feat: ship the site redesign with pricing and blog hidden (refs #29)

.env.example

@@ -3,8 +3,9 @@
 # Changes require rebuild (NEXT_PUBLIC_ vars are inlined at build time)
 NEXT_PUBLIC_TESTFLIGHT_URL=
 
-# GitHub Release link for Android beta
-NEXT_PUBLIC_ANDROID_RELEASE_URL=
+# Enables unfinished Blog/Pricing routes outside Vercel production.
+# Vercel production always ignores this flag.
+DICTUS_SITE_PREVIEW=
 
 # --- Phase 12: Webhook Notifications (server-only secrets, DO NOT prefix NEXT_PUBLIC_) ---
 

.github/workflows/ci.yml

@@ -24,5 +24,8 @@ jobs:
       - name: Lint
         run: npm run lint
 
+      - name: Validate bilingual editorial workflow
+        run: npm run test:blog
+
       - name: Build
         run: npm run build

AGENTS.md

@@ -0,0 +1,12 @@
+# Development servers
+
+- Always use Portly (`portly ...`) to start, stop, restart, inspect, or keep local development servers running.
+- Start with `portly status --json`. Reuse a healthy managed server; if an in-scope server is running outside Portly, register it and use `portly take-over <project/server> --json`.
+- Never launch persistent development servers directly, in the background, or through another supervisor.
+
+# Website preview
+
+- Read `CLAUDE.md` and the issue's latest brief before changing product claims.
+- Issue #29's approved light direction supersedes the original dark-first direction.
+- Work on a dedicated branch. `main` deploys production: do not push or merge it without a separate instruction.
+- Blog/Pricing placeholders are preview-only. Do not enable `DICTUS_SITE_PREVIEW` on production.

CLAUDE.md

@@ -2,8 +2,16 @@
 
 ## Projet
 
-Landing page marketing pour **Dictus**, un clavier de dictation vocale 100% offline pour iOS et Android.
-Développé par PIVI Solutions. Domaine cible : getdictus.com.
+Site marketing de **Dictus**, une suite de dictée vocale locale par défaut pour iPhone et ordinateur.
+Développé par PIVI Solutions. Domaine : getdictus.com.
+
+### Travail en cours — issue #29
+
+Continuer la refonte sur `t3code/develop-issue-29`, avec la PR #32 en brouillon.
+La base est validée pour poursuivre le développement, pas pour une publication.
+Ne pas fusionner dans `main` ni déclencher la production avant une instruction
+distincte de l'utilisateur, une fois le site et la sortie mobile payante prêts.
+Lire `docs/issue-29-handoff.md` pour reprendre après changement de conversation.
 
 ## Stack
 
@@ -13,45 +21,47 @@ Développé par PIVI Solutions. Domaine cible : getdictus.com.
 
 ## Produit
 
-Dictus est un clavier de dictation vocale qui fonctionne entièrement sur l'appareil (offline), disponible sur iOS et Android.
+Dictus est disponible sous deux formes :
+
+- **Dictus Desktop**, gratuit aujourd'hui et demain, sur macOS, Windows et Linux. La transcription audio s'effectue localement. Un post-traitement facultatif, désactivé par défaut, peut transmettre le texte au fournisseur choisi par l'utilisateur.
+- **Dictus iOS**, pour iOS 17 ou ultérieur, avec un clavier de dictée utilisable dans les apps compatibles avec les claviers tiers.
 
-Fonctionnalités disponibles (v1) :
-- Transcription vocale en temps réel, 100% on-device
-- Aucune donnée envoyée sur internet — privacy first
-- Fonctionne comme clavier tiers (dans n'importe quelle app)
-- Open source — code transparent et auditable
-- Compatible iOS 18+ (Android en cours de développement)
+Le code des applications iOS et Desktop est public et vérifiable. Android reste en développement et ne doit pas être présenté comme disponible. La page Pricing de preview documente le catalogue de travail iOS de l’issue #28 : 4,99 €/mois, 39,99 €/an (essai de 7 jours selon éligibilité Apple), achat unique de 149,99 €. Ces valeurs sont centralisées dans `src/config/pricing.ts`. Les achats Pro ne sont pas encore disponibles ; la validation finale du catalogue et des territoires reste requise avant publication. Lire `docs/issue-28-plan.md` et le dernier brief de #28.
 
-Fonctionnalités à venir :
-- Smart Mode Pro (reformulation intelligente via IA on-device)
-- Vocabulaire personnalisé (dictionnaire de termes techniques)
-- Historique des transcriptions (journal local avec recherche)
-- Transcription de fichiers audio (import et transcription locale)
+Toute fonctionnalité à venir doit être vérifiée dans les dépôts produit et les issues en cours avant d'être annoncée sur le site.
 
 ## Design — Brand Kit
 
 Le brand kit complet est dans `/dictus-brand-kit.html` (ouvrir dans un navigateur pour le visualiser).
 
-### Direction artistique
+### Direction artistique du site
 
-- **Ton** : Premium, sombre, glassmorphism
-- **Cohérence** : Aligné avec iOS 26 Liquid Glass
-- **Ambiance** : Dark UI professionnelle, accents bleus lumineux
+- **Clair en premier**, avec la palette existante et le sombre comme variante secondaire.
+- DM Sans fine, beaucoup d'espace, une hiérarchie calme et peu d'éléments simultanés.
+- Waveform de marque en filigrane dans le hero.
+- Vrais écrans des produits dans leurs proportions natives ; ne pas inventer de captures ou de texte dicté.
+- Liquid Glass discret sur des contrôles utiles. La lecture et le repli Safari/Firefox priment sur l'effet.
+- Navigation fixe en pilule : Home, Blog, Pricing, Soutenir. Blog et Pricing restent réservés à la preview jusqu'à livraison de leur contenu.
 
 ### Couleurs principales
 
 | Token | Hex | Usage |
 |-------|-----|-------|
-| Ink Deep | `#0A1628` | Background principal |
-| Ink | `#0B0F1A` | Background body |
-| Ink 2 | `#111827` | Background secondaire |
-| Surface | `#161C2C` | Cards, panels |
+| Light Primary | `#F2F2F7` | Background principal du site |
+| Light Secondary | `#EFF1F5` | Sections alternées |
+| Light Surface | `#FFFFFF` | Surfaces et états actifs |
+| Ink Deep | `#0A1628` | Background principal sombre |
+| Ink | `#0B0F1A` | Background body sombre |
+| Ink 2 | `#111827` | Background secondaire sombre |
+| Surface | `#161C2C` | Surfaces sombres |
 | Navy | `#0F3460` | Gradient icône |
 | Accent Blue | `#3D7EFF` | CTA, boutons, éléments actifs |
 | Accent Hi | `#6BA3FF` | Highlights, hover |
 | Sky | `#93C5FD` | Highlights, icônes |
-| Mist | `#DBEAFE` | Texte sur fond clair |
-| White | `#FFFFFF` | Texte principal sur sombre |
+| Text Light | `#000000` | Texte principal sur clair |
+| Body Light | `rgba(0,0,0,0.60)` | Texte courant sur clair |
+| Mist | `#DBEAFE` | Accent très clair |
+| White | `#FFFFFF` | Texte principal sur sombre et CTA bleus |
 | White 70% | `rgba(255,255,255,0.70)` | Texte body |
 | White 40% | `rgba(255,255,255,0.40)` | Labels, texte secondaire |
 | Border | `rgba(255,255,255,0.07)` | Bordures subtiles |
@@ -71,15 +81,15 @@ Le brand kit complet est dans `/dictus-brand-kit.html` (ouvrir dans un navigateu
 ### Gradients
 
 - **Icon BG** : `linear-gradient(135deg, #0D2040, #071020)`
-- **Button** : `linear-gradient(135deg, #1A4E8A, #0F3460)`
+- **Button** : `linear-gradient(135deg, #2563EB, #1D4ED8)`
 - **Bar accent** : `linear-gradient(180deg, #6BA3FF, #2563EB)`
 
 ### Typographie
 
 | Rôle | Font | Weight | Détails |
 |------|------|--------|---------|
-| Display / Wordmark | DM Sans | 200 | `letter-spacing: -0.03em`, lowercase "dictus" |
-| Heading | DM Sans | 400 | Titres de sections |
+| Display / Wordmark | DM Sans | 200 | `letter-spacing: -0.03em`, « Dictus » |
+| Heading | DM Sans | 200–400 | Titres de sections |
 | Body | DM Sans | 300 | Texte courant |
 | Mono / Code | DM Mono | 400 | Labels techniques |
 
@@ -105,11 +115,13 @@ L'icône représente une **onde sonore stylisée** — trois barres verticales d
 
 ## Règles
 
-- Toujours utiliser le logo sur fond sombre (#0A1628 ou équivalent)
-- Ne pas utiliser le logo sur fond coloré vif ou photographique sans couche sombre
+- Le squircle sombre de l'icône peut être posé sur le fond clair du site ; préserver son contraste et ses proportions.
+- Ne pas poser le wordmark directement sur un fond coloré vif ou photographique sans surface lisible.
 - Respecter les proportions de l'icône — ne pas déformer
 - Le site doit être responsive et performant (Lighthouse 90+)
 - Langue principale : français, avec possibilité d'anglais
+- Employer « local par défaut » avec précision. Ne pas affirmer qu'aucune donnée ne peut jamais être envoyée : les téléchargements, mises à jour, paiements et le post-traitement Desktop choisi explicitement utilisent le réseau.
+- `main` déclenche la production. Blog/Pricing et les captures iPhone de preview ne doivent pas être publiés sans validation distincte.
 
 ## Agent skills
 

dictus-brand-kit.html

@@ -385,10 +385,26 @@
     <div>
       <h1><span>Dictus</span><br>Brand Kit</h1>
     </div>
-    <p class="hero-sub">v1.0 · Mars 2026 · PIVI Solutions</p>
-    <p style="max-width:520px;font-size:14px;">Identité visuelle pour Dictus — clavier iOS de dictation vocale offline. Direction : premium, sombre, glassmorphism. Cohérent avec iOS 26 Liquid Glass.</p>
+    <p class="hero-sub">v1.1 · Septembre 2026 · PIVI Solutions</p>
+    <p style="max-width:560px;font-size:14px;">Identité visuelle de Dictus — dictée vocale locale par défaut sur iPhone et ordinateur. La marque conserve ses bleus, sa waveform et son icône sombre ; le site adopte une direction claire, sobre et très espacée.</p>
   </div>
 
+  <!-- WEBSITE DIRECTION -->
+  <section>
+    <h2>Direction du site</h2>
+    <div class="divider"></div>
+    <p style="max-width:760px;margin-bottom:24px;font-size:14px;">
+      Le clair est la direction principale de getdictus.com. Utiliser DM Sans fine, une hiérarchie calme,
+      la waveform en filigrane et de vrais écrans produit. Liquid Glass reste discret sur les contrôles
+      utiles et doit conserver un repli lisible dans Safari et Firefox. Le sombre demeure une variante,
+      pas le point de départ imposé.
+    </p>
+    <p style="max-width:760px;font-size:14px;">
+      Formuler les promesses avec précision : transcription locale par défaut, code public et vérifiable,
+      Desktop gratuit, Android en développement. Ne pas inventer de prix, de disponibilité ou de capture.
+    </p>
+  </section>
+
   <!-- LOGO MARK -->
   <section>
     <h2>Logo Mark</h2>
@@ -600,6 +616,30 @@ <h2>Tailles d'icône iOS</h2>
     <h2>Palette de couleurs</h2>
     <div class="divider"></div>
     <div class="palette-grid">
+      <div class="swatch">
+        <div class="swatch-color" style="background:#F2F2F7;border-color:rgba(0,0,0,0.1)"></div>
+        <div class="swatch-info">
+          <div class="swatch-name">Light Primary</div>
+          <div class="swatch-hex">#F2F2F7</div>
+          <div class="swatch-role">Fond principal du site</div>
+        </div>
+      </div>
+      <div class="swatch">
+        <div class="swatch-color" style="background:#EFF1F5;border-color:rgba(0,0,0,0.1)"></div>
+        <div class="swatch-info">
+          <div class="swatch-name">Light Secondary</div>
+          <div class="swatch-hex">#EFF1F5</div>
+          <div class="swatch-role">Sections alternées</div>
+        </div>
+      </div>
+      <div class="swatch">
+        <div class="swatch-color" style="background:#FFFFFF;border-color:rgba(0,0,0,0.1)"></div>
+        <div class="swatch-info">
+          <div class="swatch-name">Light Surface</div>
+          <div class="swatch-hex">#FFFFFF</div>
+          <div class="swatch-role">Surfaces et états actifs</div>
+        </div>
+      </div>
       <div class="swatch">
         <div class="swatch-color" style="background:#0A1628;"></div>
         <div class="swatch-info">
@@ -692,8 +732,8 @@ <h2>Gradients</h2>
       <div class="grad-swatch" style="background:linear-gradient(135deg,#0D2040,#071020);">
         <div class="grad-label">Icon BG · 135°<br>#0D2040 → #071020</div>
       </div>
-      <div class="grad-swatch" style="background:linear-gradient(135deg,#1A4E8A,#0F3460);">
-        <div class="grad-label">Button · 135°<br>#1A4E8A → #0F3460</div>
+      <div class="grad-swatch" style="background:linear-gradient(135deg,#2563EB,#1D4ED8);">
+        <div class="grad-label">Button · 135°<br>#2563EB → #1D4ED8</div>
       </div>
       <div class="grad-swatch" style="background:linear-gradient(180deg,#6BA3FF,#2563EB);">
         <div class="grad-label">Bar accent · 180°<br>#6BA3FF → #2563EB</div>
@@ -712,16 +752,16 @@ <h2>Typographie</h2>
           <div class="label" style="margin-top:4px;">DM Sans · 200</div>
         </div>
         <div class="type-sample">
-          <div style="font-size:40px;font-weight:200;letter-spacing:-0.03em;color:var(--white);">dictus</div>
+          <div style="font-size:40px;font-weight:200;letter-spacing:-0.03em;color:var(--white);">Dictus</div>
         </div>
       </div>
       <div class="type-row">
         <div class="type-meta">
           <div class="label">Heading</div>
-          <div class="label" style="margin-top:4px;">DM Sans · 400</div>
+          <div class="label" style="margin-top:4px;">DM Sans · 200–400</div>
         </div>
         <div class="type-sample">
-          <div style="font-size:22px;font-weight:400;color:var(--white);">Dictation vocale offline</div>
+          <div style="font-size:22px;font-weight:300;color:var(--white);">Votre voix reste la vôtre.</div>
         </div>
       </div>
       <div class="type-row">
@@ -730,7 +770,7 @@ <h2>Typographie</h2>
           <div class="label" style="margin-top:4px;">DM Sans · 300</div>
         </div>
         <div class="type-sample">
-          <div style="font-size:15px;font-weight:300;color:var(--white-70);">Transcription en temps réel, 100% sur l'appareil.</div>
+          <div style="font-size:15px;font-weight:300;color:var(--white-70);">Transcription locale par défaut, sur iPhone et ordinateur.</div>
         </div>
       </div>
       <div class="type-row">
@@ -775,15 +815,15 @@ <h2>Règles d'utilisation</h2>
     <div class="do-dont">
       <div class="guideline do">
         <div class="guideline-tag">✓ À faire</div>
-        <p>Toujours utiliser le logo sur un fond sombre (#0A1628 ou équivalent) comme usage principal.</p>
+        <p>Sur fond clair, conserver le squircle sombre de l'icône et un wordmark noir lisible.</p>
       </div>
       <div class="guideline dont">
         <div class="guideline-tag">✗ À éviter</div>
         <p>Ne pas utiliser le logo sur un fond coloré vif ou un fond photographique sans couche sombre.</p>
       </div>
       <div class="guideline do">
         <div class="guideline-tag">✓ À faire</div>
-        <p>Utiliser le wordmark en minuscules <em>dictus</em>, poids 200, avec le tracking -0.03em.</p>
+        <p>Utiliser le wordmark <em>Dictus</em>, poids 200, avec le tracking -0.03em.</p>
       </div>
       <div class="guideline dont">
         <div class="guideline-tag">✗ À éviter</div>
@@ -801,8 +841,8 @@ <h2>Règles d'utilisation</h2>
   </section>
 
   <div class="footer">
-    <p>Dictus Brand Kit v1.0 · PIVI Solutions · 2026</p>
-    <p>MIT License · dictus.app</p>
+    <p>Dictus Brand Kit v1.1 · PIVI Solutions · 2026</p>
+    <p>MIT License · getdictus.com</p>
   </div>
 
 </div>