/* ---
 * Version : V1.8 · 2026-07-16
 * Changelog V1.8 (grille 2 colonnes écran résultat desktop, validé
 *   _result-2col-mockup.html) : .result-grid/.result-main/.result-side —
 *   #handoff-block en colonne principale 2/3, #summary+#compact-band+.verdict+
 *   #zone-c en colonne latérale 1/3, desktop uniquement (>900px). .rescuewrap
 *   920→1180px (cap porté par .result-grid). Sélecteurs #result > #handoff-block/
 *   #summary/#compact-band re-scopés en .result-main > /.result-side >
 *   (apply3Zones() dans site/app.js les enveloppe désormais dans les nouveaux
 *   conteneurs au lieu de les insérer à plat dans #result).
 * Version : V1.7 · 2026-07-14
 * Changelog V1.7 : merge de main dans result-refonte — reprend le correctif hero
 *   desktop (V1.4.1, ci-dessous) sous la refonte écran résultat (V1.5/V1.6).
 *   Zones disjointes : le fix hero touche .hero-da et .da-stage, la refonte touche
 *   #result, .sub- (email), .zone-c et .post-copy. Aucun conflit fonctionnel.
 *   NB : ne JAMAIS écrire un glob CSS du type point-sub-etoile-slash dans ce
 *   header — la séquence étoile+slash ferme le commentaire et tue TOUTE la
 *   feuille (0 règle parsée, site entièrement dénudé). Bug introduit puis
 *   corrigé le 14/07 pendant la résolution du merge.
 * Version : V1.6 · 2026-07-14
 * Changelog V1.6 (RÉALIGNEMENT EMAIL sur le VALIDÉ) : le bloc email suivait la
 *   Variante 1 (champ + envoi accolés) — or le fondateur avait validé la
 *   VARIANTE 2 (« champ et envoi EMPILÉS, largeur identique ») + l'encadré
 *   discret de la maquette _fin-mockup (état C). Corrigé : (a) .sub-block devient
 *   un ENCADRÉ DISCRET (fond surface, bordure grise fine, ombre légère, icône
 *   enveloppe neutre — plus aucune bordure/rouge alarmant) ; (b) Google, champ et
 *   Envoyer partagent UNE largeur (--sub-w 320) et UNE hauteur (--sub-h 46),
 *   EMPILÉS ; (c) l'accent est réservé au SEUL bouton Envoyer ; (d) + .sub-google-cta,
 *   bouton Google « click-to-load » affiché avant consentement (même gabarit que
 *   l'officiel) → fini le « champ Google vide ». Remplace .sub-google-gate.
 * Version : V1.5 · 2026-07-14
 * Changelog V1.5 : refonte écran résultat 3 zones + email V3 + itinéraire post-copie.
 *   (1) email V3 : champ + bouton Google même largeur dans un cadre unique
 *   (.sub-form / .sub-google-slot / .sub-google-gate), cases à cocher légères,
 *   désencombrement. (2) hiérarchie 3 zones (#result > label+#handoff-block /
 *   #summary / #zone-c email en bas séparé) + .zone-c / .zone-c-label. (3)
 *   itinéraire post-copie numéroté (.post-copy / .pc-lead / .pc-steps / .pc-num)
 *   révélé après la copie, calé sur les marges du copybar, replié en colonne ≤560px.
 * Version : V1.4.1 · 2026-07-14
 * Changelog V1.4.1 (correction fondateur) : le masquage de la scène animée du hero
 *   pendant un uncooking (.hero-da.flow-started .da-stage) s'appliquait PARTOUT.
 *   Il est désormais scopé @media(max-width:900px) — c'est-à-dire au seul cas où le
 *   hero est empilé (scène SOUS le formulaire → deux « Uncooking » à l'écran).
 *   Sur DESKTOP (>900px, 2 colonnes) la scène RESTE VISIBLE pendant le vrai
 *   uncooking : aucune confusion côte à côte, c'est la signature de la page.
 * Version : V1.4 · 2026-07-13
 * Changelog V1.4 : sélecteur langue mobile renforcé (pastille nav ≥44px de cible
 *   tactile, présence nette ≤560px) + footer aéré (padding/gaps, air autour du
 *   sélecteur de pied) + lien extension en chip (icône + fond, plus visible).
 * Version : V1.3 · 2026-07-13
 * Changelog V1.3 : + sélecteur de langue pastille (.langwrap/.langbtn/.langmenu,
 *   header light + footer dark, menu build-time). Remplace la rangée .footlang
 *   plate par la pastille sombre au pied (menu ouvert vers le haut). + suggestion
 *   de langue redesignée en toast (.lang-toast : titre + phrase + 2 choix,
 *   bas-droite, gaté sur le consentement pour ne pas concurrencer le bandeau
 *   légal) — remplace l'ancien .lang-suggest (lien nu).
 * Version : V1.2 · 2026-07-12
 * Changelog V1.2 : + styles du bandeau de suggestion de langue (.lang-suggest,
 *   bottom toast z-25 sous le sticky-copy) et du sélecteur permanent en pied
 *   (.footlang) — détection auto langue approche B (app.js V1.30).
 * Changelog V1.1 : fix critique — le commentaire d'en-tête contenait la
 *   séquence de fermeture de commentaire CSS en toutes lettres (dans un nom de
 *   sélecteur cité entre guillemets), ce qui fermait le commentaire prématurément
 *   et faisait disparaître le bloc de variables racine entier (--accent etc.
 *   non définies) → boutons/CTA invisibles (transparent sur fond clair) sur les
 *   4 pages. Détecté en QA visuelle avant commit, jamais parti en prod.
 * Changelog V1.0 : consolidation CSS (décision fondateur, priorité absolue) — source
 *   unique partagée pour les 4 pages (root EN/FR, /pro, /everyday), qui
 *   embarquaient chacune ~380 lignes de <style> quasi identique (copié-collé).
 *   C'était la cause-racine des bugs récurrents (cadre de carte, bouton ×,
 *   header débordant) : un correctif posé sur une page, oublié sur les 3
 *   autres. Rapatrie aussi le CSS que site/app.js injectait au runtime en 3
 *   IIFE séparées (.mt-banner, .fbm-x/.g413, .sub-x/.compact-band/.sticky-copy)
 *   — supprime l'axe de désync statique/runtime et le risque de FOUC pointés
 *   par l'audit mobile. Chaque page ne garde plus en inline que ses règles
 *   VRAIMENT propres (pro : .ext-card/.personas · everyday :
 *   .prose/.cases/.cta-card/.readmore) — tout le reste (y compris .illus-ba,
 *   partagé root+fr) vit ici désormais.
 * --- */
  :root{
    /* ⚠️ SR-24 (17/07) — LA SOURCE UNIQUE DU POINT DE RUPTURE « ÉTROIT ».
       Ce nombre vivait en dur DEUX fois : dans `@media(max-width:900px)` ici, et
       dans `isMobile` (app.js). Deux nombres magiques identiques dans deux
       fichiers = la façon exacte dont naît notre famille de bugs : le jour où l'un
       bouge, l'autre reste, et plus rien ne le signale.
       Il est déclaré ICI, et app.js le LIT (getPropertyValue('--bp-narrow')).
       ⚠️ Une limite du langage, à connaître : une `@media` NE PEUT PAS consommer une
       var() CSS — les media queries sont évaluées avant la cascade. Le `900px` reste
       donc écrit en clair dans les `@media` ci-dessous, et ce token en est la
       DÉCLARATION DE RÉFÉRENCE côté JS. Ce n'est pas une source unique parfaite ;
       c'est la meilleure possible sans build step. Si tu changes le seuil : change
       ce token ET les `@media(max-width:900px)`. Le JS, lui, suivra tout seul. */
    --bp-narrow:900px;
    /* ⚠️ SR-16 (17/07) — CETTE DÉCLARATION DIT DÉSORMAIS LA VÉRITÉ.
       Elle disait `"Neue Montreal","Inter",sans-serif` depuis toujours, et
       PERSONNE n'a jamais vu Neue Montreal : le <link> vers api.fontshare.com
       part bien à chaque chargement (83 pages), mais Fontshare répond HTTP 200
       avec 1 OCTET — Neue Montreal est une fonte commerciale Pangram Pangram
       qu'il n'a jamais hébergée (témoin : satoshi → 597 o, l'API marche).
       Aucun 404, aucune erreur console : le repli sur Inter était SILENCIEUX.
       Vérifié sur la prod : document.fonts ne contient qu'Inter + JetBrains Mono,
       et forcer un <h1> en Inter ne change pas sa largeur d'un pixel.
       Arbitrage Kevin : « le fil rouge ne se répare pas en ajoutant du poids —
       il se répare en disant vrai. » Donc on nomme ce qui rend réellement.
       (Ce que Switzer achèterait : 73,6 ko — chiffré, à rouvrir si on veut.) */
    --font-display:"Inter",ui-sans-serif,system-ui,-apple-system,sans-serif;
    --font-sans:"Inter",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
    --font-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
    /* Corps du brief — PILE SYSTÈME, arbitrée Kevin (17/07) après mesure :
       Source Serif 4 coûtait 217,7 ko (latin+latin-ext) pour UN écran. `ui-serif`
       donne New York sur Apple (dessiné pour l'écran) et Georgia ailleurs : 0 octet,
       zéro requête tierce, zéro question RGPD. Charter en secours (Android/Linux).
       Le brief doit rester VISUELLEMENT DISTINCT du handoff (mono) : c'est le
       contraste serif↔mono qui porte le sens (« à lire », pas « à recoller »),
       pas la marque de la fonte. */
    --font-brief:ui-serif,Charter,"Bitstream Charter",Georgia,serif;
    --accent:#FF2D55; --accent-hover:#E61F48; --accent-active:#C9153A; --accent-soft:#FFF0F3; --accent-shadow:rgba(255,45,85,.20); --accent-ring:rgba(255,45,85,.28);
    /* Palette secondaire (retour fondateur 15/07 — "tout est rouge", même une
       action SECONDAIRE comme le brief humain) : ambre-terracotta, pas inventé —
       formalise le ton déjà présent dans le gradient décoratif du hero (.page-bg
       .b2/.b4, ~#FF7A3D/#FF9F78). Réservé aux CTA secondaires (ex. .note-inline-cta) ;
       ne remplace jamais --accent sur les CTA principaux. */
    --accent2:#D9662E; --accent2-hover:#C25422; --accent2-soft:#FFF1E6; --accent2-shadow:rgba(217,102,46,.22);
    --bg:#FFFDFC; --bg2:#FAF8F7; --surface:#FFFFFF; --border:#E9E4E1; --divider:#F1EEEC;
    --ink:#171716; --ink2:#625E5A; --ink3:#938D88;
    --success:#16845B; --success-soft:#E7F6EE; --success-border:#B9E6CE;
    --err-bg:#FDECEA; --err-border:#C0392B; --err-ink:#7C2418;
    --r-sm:.5rem; --r-md:.75rem; --r-lg:1rem; --r-xl:1.5rem;
    --sh-sm:0 1px 2px rgba(23,23,22,.04); --sh-card:0 8px 24px rgba(23,23,22,.07); --sh-cardh:0 18px 40px rgba(23,23,22,.12); --sh-accent:0 10px 24px var(--accent-shadow);
    /* ⚠️ TOKENS DE LA FAMILLE .sub-* (Google + champ + Envoyer : UNE largeur, UNE
       hauteur). DÉFINIS ICI, AU ROOT, ET PAS SUR .sub-block — c'est le correctif
       du bug iPhone du 16/07 : ils vivaient sur .sub-block, or .sub-form/.sub-email/
       .sub-btn sont AUSSI réutilisés hors de ce conteneur (tunnel .bt-stage, mur
       gate.js .uck-gate-modal). Sans ancêtre .sub-block les deux var() résolvaient
       VIDE → height:var(--sub-h) invalide → height:auto → bouton Continue à 14,5px
       (« affaissé ») et max-width:var(--sub-w) → none → cap 320px disparu, textes
       hors cadre. Au root, TOUTE réutilisation future de .sub-* est correcte par
       défaut : la classe de bug meurt ici, on ne la re-patche pas au cas par cas. */
    --sub-w:320px; --sub-h:46px;
  }
  *{box-sizing:border-box}
  html,body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font-sans);text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased}
  [hidden]{display:none!important} /* fix : bat les .btn/.modal display:flex qui écrasaient l'attribut hidden */
  ::selection{background:#FFD6DE;color:var(--ink)}
  .display{font-family:var(--font-display)}
  /* largeur remontée 1120→1250px (retour fondateur 08/07 : site trop étroit vs
     standards modernes Linear/Stripe/Notion — haut de la fourchette 1140-1280px
     citée, mesuré + validé sur site/_width-mockup.html) */
  .container{max-width:1250px;margin:0 auto;padding:0 28px}
  svg.i{width:1em;height:1em;stroke:currentColor;stroke-width:1.5;fill:none;stroke-linecap:round;stroke-linejoin:round;flex:none}
  .env{position:fixed;bottom:12px;left:12px;font-size:10.5px;color:var(--ink3);border:1px solid var(--border);background:#fff;border-radius:6px;padding:3px 8px;text-transform:uppercase;letter-spacing:.08em;z-index:20;box-shadow:var(--sh-sm)}

  /* nav */
  .nav{display:flex;align-items:center;gap:10px;padding:22px 0}
  .logo{display:inline-flex;align-items:baseline;gap:.14em;font-family:var(--font-display);font-weight:700;font-size:24px;letter-spacing:-.03em;color:var(--ink);text-decoration:none}
  .logo .dot{width:8px;height:8px;border-radius:50%;background:var(--accent);align-self:center;transform:translateY(1px)}
  .nav .logo{font-size:34px}
  .nav .logo .dot{width:10px;height:10px}
  .nav .links{margin-left:auto;display:flex;align-items:center;gap:22px}
  .nav .links a{color:var(--ink2);text-decoration:none;font-size:14px;font-weight:500}
  .nav .links a:hover{color:var(--ink)}
  /* ══ SR-04·A « LA RÉPONSE » (17/07, arbitré Kevin) ═══════════════════════════
     Le constat du fondateur (« site statique des années 2010, les boutons ne
     répondent pas ») était JUSTE en effet et FAUX en cause : le hover existe
     depuis toujours (translateY + transition .14s). Le vrai défaut est pire —
     il n'était protégé par AUCUN `@media(hover:hover)` (0 occurrence pour 44
     règles `:hover`). Sur iOS, un tap laisse donc le bouton COLLÉ en état
     survolé (soulevé, foncé) jusqu'au tap suivant ailleurs. Mobile n'était pas
     inerte : il était CASSÉ. Et `:active` n'existait que sur 1 bouton /~153 —
     donc au doigt, rien ne confirmait jamais le geste.

     ⚠️ POURQUOI ON ENVELOPPE PLUTÔT QUE D'ÉNUMÉRER UN RESET `hover:none` :
     un bloc de reset devrait lister chaque règle existante, et toute règle
     `:hover` future y échapperait EN SILENCE — c'est exactement le défaut qui a
     produit le bug `--sub-w` (énumérer corrige l'instance, pas la classe). On
     enveloppe : le hover n'existe QUE là où un vrai curseur existe.
     « Pas un truc lent » (contrainte Kevin) : press 90ms, hover 140ms. Le press
     est plus RAPIDE que le hover — une confirmation doit être instantanée. ══ */
  .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:var(--r-md);font-family:var(--font-sans);font-weight:600;cursor:pointer;transition:.14s ease;border:none;line-height:1;-webkit-tap-highlight-color:transparent}
  .btn-primary{background:var(--accent);color:#fff;box-shadow:var(--sh-accent)}
  .btn-secondary{background:var(--surface);color:var(--ink);border:1px solid var(--border);box-shadow:var(--sh-sm)}
  @media(hover:hover){
    .btn-primary:hover{background:var(--accent-hover);transform:translateY(-1px)}
    .btn-secondary:hover{background:var(--bg2);border-color:var(--ink)}
  }
  /* La réponse au geste — souris ET doigt. C'est CE bloc qui répond vraiment au
     « les boutons auraient dû être animés » : le mouvement dit « je t'ai eu »,
     il ne décore pas. */
  .btn:active{transform:translateY(1px) scale(.988);transition-duration:90ms}
  .btn-primary:active{background:var(--accent-active)}
  .btn-secondary:active{background:var(--bg2)}
  /* Le clavier : il n'avait aucun anneau de focus visible. */
  .btn:focus-visible{outline:none;box-shadow:0 0 0 3px var(--accent-ring),var(--sh-accent)}
  @media(prefers-reduced-motion:reduce){
    .btn:active{transform:none} /* on garde la réponse COULEUR, on retire le mouvement */
  }
  .btn-sm{height:38px;padding:0 15px;font-size:14px}
  .btn-lg{height:56px;padding:0 24px;font-size:16px}

  /* HERO — mix B (respiration verticale eyebrow→H1→H2) + C (carte unique
     champ+CTA+trust+aide), décision fondateur 08/07 après 2 tours de mock
     (site/_hero-mockup.html section 5 « Variante MIX — retenue »). H3
     (hero-lead) retiré : le mécanisme est déjà montré par le placeholder de
     l'input + la section How it works plus bas. Coches vertes (checkrow) +
     encadré privacy fusionnés en UNE trust-line non encadrée (déjà portée
     par .privacy-line, juste déboxée ici) — plus d'objet de réassurance en
     double. Carte 640px = largeur déjà utilisée par .inputwrap (aucune
     largeur nouvelle) ; le calage retenu (vs 560px recentré écarté) tombe
     verticalement sous les extrémités du H1, reliant visuellement carte et
     texte au lieu d'un second objet plaqué à part. */
  .hero{text-align:center;padding:60px 0 52px}
  .eyebrow{font-size:18px;font-weight:700;letter-spacing:-.01em;color:var(--ink2);text-transform:none;margin:0 0 28px;display:inline-flex;align-items:center;gap:9px;font-family:var(--font-display)}
  .eyebrow .hot{color:var(--accent);font-weight:700}
  .hero h1{font-family:var(--font-display);font-weight:700;font-size:clamp(2.5rem,5vw,4.4rem);line-height:1.06;letter-spacing:-.035em;margin:0 auto 20px;max-width:19ch}
  .hero .sub{color:var(--accent);font-weight:600;font-size:clamp(1.15rem,2.5vw,1.45rem);letter-spacing:-.01em;margin:0 0 36px}
  .hero h1.h1-duo{max-width:30ch;font-size:clamp(2.2rem,4.3vw,3.6rem)}
  @media(max-width:560px){.hero h1 br{display:none}}
  /* retour fondateur 08/07 (5e tour) : le cadre de carte (bg2+border+shadow)
     créait un effet de double encadrement — le champ blanc arrondi À
     L'INTÉRIEUR d'une carte grise elle-même arrondie, lu comme un bug plus
     qu'un choix de design. Retiré : simple conteneur de largeur, plus de
     fond/bordure/ombre propres. */
  .inputwrap{max-width:640px;margin:0 auto}

  /* ═══════════ DA « The Instrument » — hero product-led (home) ═══════════
     Fond mouvant B propagé à toute la page + hero 2 colonnes (message/action à
     gauche, l'instrument animé à droite). Tout l'instrument est SCOPÉ sous
     .da-stage → zéro collision avec l'écran résultat réel (.handoff, .btn-copy,
     .flag sont renommés .di-* dans instrument.js par sécurité). Décoratif. */
  .page-bg{position:fixed;inset:-22%;z-index:0;pointer-events:none;filter:blur(84px);opacity:.4}
  .page-bg span{position:absolute;width:48%;height:54%;border-radius:50%}
  .page-bg .b1{background:radial-gradient(circle,rgba(255,45,85,.34),transparent 62%);top:-6%;left:44%;animation:daDrift1 34s ease-in-out infinite}
  .page-bg .b2{background:radial-gradient(circle,rgba(255,122,61,.30),transparent 62%);top:38%;left:60%;animation:daDrift2 40s ease-in-out infinite}
  .page-bg .b3{background:radial-gradient(circle,rgba(255,214,222,.5),transparent 60%);top:6%;left:0%;animation:daDrift3 38s ease-in-out infinite}
  .page-bg .b4{background:radial-gradient(circle,rgba(255,159,120,.26),transparent 60%);top:46%;left:10%;animation:daDrift1 44s ease-in-out infinite reverse}
  @keyframes daDrift1{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-7%,6%) scale(1.12)}}
  @keyframes daDrift2{0%,100%{transform:translate(0,0) scale(1.05)}50%{transform:translate(-10%,-7%) scale(.93)}}
  @keyframes daDrift3{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(8%,5%) scale(1.1)}}
  .container,footer,section{position:relative;z-index:1}  /* contenu au-dessus du fond */

  /* hero 2 colonnes */
  .hero-da{display:grid;grid-template-columns:1.04fr .96fr;gap:52px;align-items:center;text-align:left;padding:52px 0 60px}
  .hero-da .hero-left{text-align:left;min-width:0}
  .hero-da .hero-left .eyebrow{margin-left:0;margin-right:0}
  .hero-da .hero-left h1{margin-left:0;text-align:left}
  .hero-da .hero-left .sub{text-align:left}
  .hero-da .hero-left .inputwrap{margin:0;max-width:460px}
  .hero-da .hero-left .privacy-line{text-align:left;justify-content:flex-start;margin-left:0}
  .hero-da .hero-left .trust{text-align:left}
  .da-stage{position:relative;min-width:0}
  #instrument-mount{position:relative}
  /* dès que le vrai uncooking démarre (app.js : .flow-started) : on retire
     l'instrument déco et le hero repasse en 1 colonne — plus de double « Uncooking ». */
  /* Uncooking en cours (.flow-started) — MASQUAGE DE LA SCÈNE : MOBILE UNIQUEMENT
     (correction fondateur 14/07). Sous 900px le hero est empilé : la scène animée
     tombe SOUS le formulaire → deux « Uncooking… » à l'écran = confusion. On la
     masque donc là, et LÀ SEULEMENT. Sur DESKTOP (>900px, 2 colonnes) l'animation
     RESTE VISIBLE et continue de tourner pendant le vrai uncooking — aucune
     confusion possible côte à côte, c'est la signature de la page. */
  @media(max-width:900px){
    .hero-da.flow-started{grid-template-columns:1fr}
    .hero-da.flow-started .da-stage{display:none}
  }

  /* ---- l'instrument (scopé) ---- */
  .da-stage .instrument{position:relative;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-xl);box-shadow:var(--sh-cardh);padding:18px 18px 20px}
  .da-stage .inst-head{display:flex;align-items:center;gap:10px;padding-bottom:12px;border-bottom:1px solid var(--divider)}
  .da-stage .probe{position:relative;width:12px;height:12px;flex:none}
  .da-stage .probe i{position:absolute;inset:0;border-radius:50%;background:var(--accent)}
  .da-stage .probe i.ping{animation:daPing 1.5s ease-out infinite}
  @keyframes daPing{0%{transform:scale(1);opacity:.55}70%,100%{transform:scale(2.6);opacity:0}}
  .da-stage .inst-title{font:600 13.5px var(--font-sans);color:var(--ink)}
  .da-stage .inst-status{margin-left:auto;font:600 11px var(--font-sans);letter-spacing:.04em;text-transform:uppercase;color:var(--accent-active);background:var(--accent-soft);border-radius:999px;padding:4px 10px}
  .da-stage .inst-body{position:relative;margin-top:14px;min-height:296px}
  .da-stage .scan-area{position:relative}
  .da-stage .src{border:1px solid var(--divider);border-radius:var(--r-md);background:var(--bg2);padding:10px 12px;height:238px;overflow:hidden;position:relative;transition:filter .4s,opacity .4s,border-color .3s}
  .da-stage .src.scanning{border-color:var(--accent-shadow)}
  .da-stage .src::after{content:"";position:absolute;left:0;right:0;bottom:0;height:26px;background:linear-gradient(transparent,var(--bg2));pointer-events:none;z-index:2}
  .da-stage .src .line{font:12.5px/1.5 var(--font-sans);color:var(--ink2);margin:0 0 6px}
  .da-stage .src .who{font-weight:700;color:var(--ink)}
  .da-stage .src .who.ai{color:var(--accent-active)}
  .da-stage .src .scanline{position:absolute;left:0;right:0;top:-48px;height:48px;z-index:3;pointer-events:none;opacity:0;background:linear-gradient(to bottom,transparent,rgba(255,45,85,.16) 60%,transparent)}
  .da-stage .src .scanline::after{content:"";position:absolute;left:6px;right:6px;bottom:8px;height:2px;border-radius:2px;background:var(--accent);box-shadow:0 0 10px 1px var(--accent-shadow)}
  .da-stage .src.scanning .scanline{opacity:1;animation:daSweep 1.35s cubic-bezier(.5,0,.5,1) infinite}
  @keyframes daSweep{0%{top:-48px}100%{top:238px}}
  .da-stage .obs{list-style:none;position:absolute;inset:0;margin:0;padding:11px 13px;display:flex;flex-direction:column;justify-content:center;gap:10px;background:rgba(255,253,252,.84);backdrop-filter:blur(2px);border:1px solid var(--border);border-radius:var(--r-md);box-shadow:var(--sh-card);z-index:4;opacity:0;transform:translateY(6px);transition:opacity .4s,transform .4s;pointer-events:none}
  .da-stage .obs li{display:flex;align-items:center;gap:9px;font:12.5px/1.3 var(--font-sans);color:var(--ink);opacity:0;transition:opacity .25s}
  .da-stage .obs li.show{opacity:1}
  .da-stage .obs .mk{flex:none;width:19px;height:19px;border-radius:50%;background:var(--accent-soft);color:var(--accent-active);display:grid;place-items:center;font-size:11px;font-weight:700}
  .da-stage .obs .n{margin-left:auto;font:700 12px var(--font-mono);color:var(--accent-active)}
  .da-stage .obs li.typing .txt::after{content:"";display:inline-block;width:6px;height:13px;background:var(--accent);vertical-align:-2px;margin-left:1px;animation:daBlink 1s step-end infinite}
  @keyframes daBlink{50%{opacity:0}}
  .da-stage .instrument.uncooking .src{filter:blur(1.5px) saturate(.55);opacity:.4}
  .da-stage .instrument.uncooking .obs{opacity:1;transform:none;border-color:var(--accent-shadow);animation:daHeat 1.7s ease-in-out infinite}
  @keyframes daHeat{0%,100%{box-shadow:var(--sh-card),inset 0 0 34px rgba(255,45,85,.06)}50%{box-shadow:0 10px 30px var(--accent-shadow),inset 0 0 54px rgba(255,45,85,.18)}}
  .da-stage .instrument.uncooking .probe{width:17px;height:17px}
  .da-stage .instrument.uncooking .probe i:first-child{box-shadow:0 0 16px 5px var(--accent-shadow)}
  .da-stage .instrument.uncooking .probe i.ping{animation:daPing .95s ease-out infinite}
  .da-stage .instrument.uncooking .inst-title{color:var(--accent-active)}
  /* jauge vert→rouge */
  .da-stage .doneness{position:absolute;left:12px;right:12px;bottom:12px;z-index:5;background:rgba(255,253,252,.94);border:1px solid var(--border);border-radius:var(--r-md);padding:9px 12px;box-shadow:var(--sh-card);opacity:0;transform:translateY(8px);transition:opacity .45s,transform .45s}
  .da-stage .doneness.show{opacity:1;transform:none}
  .da-stage .dn-row{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:6px}
  .da-stage .dn-cap{font:600 10.5px var(--font-sans);letter-spacing:.09em;text-transform:uppercase;color:var(--ink3)}
  .da-stage .dn-verdict{font:700 12.5px var(--font-display);color:var(--accent-active);letter-spacing:.02em;text-transform:uppercase}
  .da-stage .dn-track{position:relative;height:8px;border-radius:999px;background:linear-gradient(90deg,#E7F6EE,#FFF3D9 45%,#FFD9D9)}
  .da-stage .dn-fill{position:absolute;left:0;top:0;bottom:0;width:0;border-radius:999px;background:linear-gradient(90deg,var(--success) 0%,#E8A93B 52%,var(--accent) 100%);transition:width 1.1s ease .1s}
  .da-stage .doneness.show .dn-fill{width:88%}
  .da-stage .dn-cursor{position:absolute;top:50%;left:88%;width:13px;height:13px;border-radius:50%;background:var(--accent);border:2px solid #fff;box-shadow:var(--sh-sm);transform:translate(-50%,-50%) scale(0);transition:transform .3s ease .55s}
  .da-stage .doneness.show .dn-cursor{transform:translate(-50%,-50%) scale(1)}
  /* handoff overlay (di-handoff pour éviter la collision avec l'écran résultat) */
  .da-stage .di-handoff{position:absolute;inset:0;z-index:6;display:flex;flex-direction:column;border:1px solid var(--border);border-radius:var(--r-lg);background:var(--surface);box-shadow:var(--sh-sm);overflow:hidden;opacity:0;transform:translateY(18px) scale(.97);pointer-events:none;transition:opacity .5s ease,transform .5s ease,box-shadow .5s ease,border-color .5s ease}
  .da-stage .hd-top{display:flex;align-items:center;gap:8px;padding:11px 13px;border-bottom:1px solid var(--divider);flex:none}
  .da-stage .hd-top .spark{width:16px;height:16px;color:var(--accent)}
  .da-stage .hd-top .t{font:600 13px var(--font-sans);color:var(--ink)}
  .da-stage .di-flag{margin-left:auto;display:inline-flex;align-items:center;gap:5px;font:600 11.5px var(--font-sans);color:#fff;background:var(--success);border-radius:999px;padding:4px 10px}
  .da-stage .di-flag svg{width:12px;height:12px}
  .da-stage .hd-body{flex:1;padding:12px 14px;font:12.5px/1.6 var(--font-mono);color:var(--ink);white-space:pre-wrap;overflow:auto}
  .da-stage .hd-body b{color:var(--accent-active);font-weight:700}
  .da-stage .hd-body b.ho-h{display:block;color:var(--ink);font-family:var(--font-sans);font-size:11.5px;letter-spacing:.02em;margin:8px 0 2px}
  .da-stage .hd-foot{display:flex;gap:10px;align-items:center;padding:0 14px 14px;flex:none}
  .da-stage .di-copy{display:inline-flex;align-items:center;gap:8px;height:42px;padding:0 16px;border:none;border-radius:var(--r-md);background:var(--accent);color:#fff;font:600 13.5px var(--font-sans);cursor:default;transition:.2s}
  .da-stage .di-copy svg{width:15px;height:15px}
  .da-stage .hint{font:12px var(--font-sans);color:var(--ink3)}
  @keyframes daCopyPulse{0%{box-shadow:0 0 0 0 var(--accent-ring)}70%,100%{box-shadow:0 0 0 11px rgba(255,45,85,0)}}
  /* état READY : handoff par-dessus (wow) + carte de fond qui grise → détachement */
  .da-stage .instrument.ready{background:var(--bg2)}
  .da-stage .instrument.ready .inst-status{color:#fff;background:var(--success)}
  .da-stage .instrument.ready .probe i.ping{animation:none;opacity:0}
  .da-stage .instrument.ready .di-handoff{opacity:1;transform:translateY(-5px) scale(1.02);pointer-events:auto;box-shadow:0 30px 70px rgba(23,23,22,.18);border-color:var(--success);animation:daPop .62s cubic-bezier(.2,.85,.3,1.25) 1,daFlash 1.1s ease-out 1}
  @keyframes daPop{0%{opacity:0;transform:translateY(24px) scale(.95)}62%{opacity:1;transform:translateY(-10px) scale(1.03)}100%{transform:translateY(-5px) scale(1.02)}}
  @keyframes daFlash{0%{box-shadow:0 0 0 3px rgba(22,132,91,.5),0 30px 70px rgba(23,23,22,.18)}100%{box-shadow:0 0 0 18px rgba(22,132,91,0),0 30px 70px rgba(23,23,22,.18)}}
  .da-stage .instrument.ready .di-copy{animation:daCopyPulse 1.8s ease-out infinite}

  @media(max-width:900px){
    .hero-da{grid-template-columns:1fr;gap:30px;padding:34px 0 40px;text-align:center}
    .hero-da .hero-left{text-align:center;display:flex;flex-direction:column;align-items:center}
    .hero-da .hero-left h1,.hero-da .hero-left .sub{text-align:center}
    .hero-da .hero-left .inputwrap{margin:0 auto;max-width:560px;width:100%}
    .hero-da .hero-left .privacy-line{justify-content:center}
    .da-stage{max-width:520px;margin:0 auto;width:100%}
  }
  @media(prefers-reduced-motion:reduce){
    .page-bg span,.da-stage .probe i.ping,.da-stage .src .scanline,.da-stage .obs li.typing .txt::after,.da-stage .instrument.ready .di-copy{animation:none!important}
  }

  /* carte 640px = trop juste pour input+bouton en ligne (le texte FR
     « Collez un lien de partage ChatGPT ou Claude » + « Relancer ma
     conversation → » y coupait le placeholder — même traitement ici pour
     la parité de structure FR/EN demandée) — empilé, même largeur de carte. */
  .inputcard{display:flex;flex-direction:column;gap:10px;background:transparent;border:none;padding:0;box-shadow:none}
  .inputcard input{width:100%;height:56px;padding:0 18px;font:16px/1 var(--font-sans);color:var(--ink);text-align:left;border:1.5px solid var(--border);background:var(--surface);border-radius:var(--r-lg);box-shadow:var(--sh-sm);outline:none}
  .inputcard input:focus{border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-ring)}
  .inputcard input::placeholder{color:var(--ink3)}
  .inputcard .btn-lg{width:100%}
  .tick{display:none!important}
  @keyframes pulse-once{0%{transform:scale(1)}50%{transform:scale(1.03)}100%{transform:scale(1)}}
  .pulse{animation:pulse-once .3s ease}
  .trust{margin:10px 0 0;padding-top:10px;border-top:1px solid var(--divider);font-size:13.5px;color:var(--ink3)}
  .trust + .trust{margin-top:6px}
  /* trust-line unifiée (ex-encadré privacy + ex-coches vertes) — non encadrée,
     une seule ligne desktop */
  .privacy-line{display:flex;align-items:center;justify-content:center;gap:7px;max-width:560px;margin:16px auto 0;font-size:13px;line-height:1.5;color:var(--ink3);text-align:center;white-space:nowrap}
  .privacy-line .pl-lock{width:13px;height:13px;color:var(--ink3);flex:none}
  .privacy-line b{color:var(--ink);font-weight:600}
  .privacy-line a{color:var(--ink3);font-weight:500;text-decoration:underline;text-underline-offset:2px;white-space:nowrap}
  .privacy-line a:hover{color:var(--ink)}
  /* illustration picto-ligne (direction A) — section démo */
  .illus-ba{display:block;width:min(340px,86vw);height:auto;margin:0 auto 34px;color:var(--ink2)}
  .nb{white-space:nowrap}
  .guidelink{color:var(--accent);text-decoration:none;font-weight:500}
  .guidelink:hover{text-decoration:underline}
  /* modale guide */
  .modal-backdrop{position:fixed;inset:0;background:rgba(23,23,22,.44);display:flex;align-items:center;justify-content:center;padding:20px;z-index:50}
  .modal-backdrop[hidden]{display:none}
  .modal{position:relative;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-xl);box-shadow:var(--sh-cardh);max-width:880px;width:100%;max-height:90vh;overflow:auto;padding:38px 40px 34px}
  .modal-close{position:absolute;top:16px;right:16px;width:34px;height:34px;border:1px solid var(--border);background:var(--surface);border-radius:var(--r-sm);color:var(--ink2);font-size:16px;cursor:pointer;display:grid;place-items:center}
  .modal-close:hover{background:var(--bg2);color:var(--ink)}
  .modal h2{font-family:var(--font-display);font-weight:700;font-size:26px;letter-spacing:-.03em;margin:0 0 6px}
  .modal-sub{color:var(--ink2);font-size:14.5px;margin:0 0 20px}
  /* modale waitlist extension (chip footer) — compacte, centrée */
  .wl-modal{max-width:440px;text-align:center;padding:34px 30px 28px}
  .wl-modal .modal-sub{margin:0 auto;max-width:36ch}
  .wl-ico{width:52px;height:52px;margin:2px auto 16px;border-radius:50%;background:var(--accent-soft);color:var(--accent-active);display:grid;place-items:center}
  .wl-ico svg{width:26px;height:26px}
  .wl-form{display:flex;flex-direction:column;gap:10px;margin:20px auto 12px;max-width:320px}
  .wl-email{width:100%;height:48px;padding:0 16px;font:15px/1 var(--font-sans);color:var(--ink);border:1.5px solid var(--border);background:var(--surface);border-radius:var(--r-md);outline:none;text-align:center}
  .wl-email:focus{border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-ring)}
  .wl-email::placeholder{color:var(--ink3)}
  .wl-btn{width:100%;height:48px;font-size:15px}
  .wl-note{font-size:12.5px;color:var(--ink3);margin:0 auto;max-width:34ch;line-height:1.5}
  .wl-ok{font-size:15px;font-weight:600;color:var(--success);margin:16px 0 0}
  .guideblock{border:1px solid var(--border);border-radius:var(--r-lg);padding:24px 26px;margin-bottom:22px}
  .guideblock.muted{background:var(--bg2)}
  .gb-head{font-family:var(--font-display);font-weight:600;font-size:19px;letter-spacing:-.02em;margin-bottom:14px;display:flex;align-items:baseline;gap:10px}
  .gb-plat{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink3);font-family:var(--font-sans);font-weight:500}
  .gb-shots{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:6px 0 20px}
  .gb-shots img{width:100%;aspect-ratio:660/440;border:1px solid var(--border);border-radius:var(--r-md);background:var(--bg2);display:block}
  @media(max-width:640px){.gb-shots{grid-template-columns:1fr}}
  .guideblock ol{margin:0;padding-left:22px}
  .guideblock li{font-size:15px;color:var(--ink);margin:10px 0;line-height:1.6;letter-spacing:-.005em}
  .guideblock li.gb-warn{background:var(--warning-soft);border:1px solid #F2D38A;border-radius:var(--r-sm);padding:12px 14px;list-style:none;margin-left:-22px}
  .gb-note{font-size:13px;color:var(--ink3);margin:10px 0 0}
  .gb-foot{font-size:13px;color:var(--ink3);text-align:center;margin:6px 0 0}
  code{background:var(--bg2);border:1px solid var(--border);border-radius:5px;padding:0 5px;font-family:var(--font-mono);font-size:12px}

  .divlabel{text-align:center;font-size:11px;letter-spacing:.15em;text-transform:uppercase;color:var(--ink3);margin:40px 0 16px;position:relative}
  .divlabel::before,.divlabel::after{content:"";position:absolute;top:50%;width:calc(50% - 92px);height:1px;background:var(--divider)}
  .divlabel::before{left:0}.divlabel::after{right:0}

  /* conv line + chips */
  /* max-width relevé 920→1180 (V1.8, grille 2 colonnes desktop, validé
     _result-2col-mockup.html) : .rescuewrap n'est utilisé QUE par #result
     (grep vérifié) — le relever ici ne touche aucun autre écran. Le cap réel
     de la grille 2 colonnes est porté par .result-grid{max-width:1180px} plus
     bas ; sous 900px .result-grid repasse à max-width:920px, donc le rescuewrap
     à 1180 ne change rien visuellement en mobile (viewport toujours < 1180). */
  /* §2 PARCOURS-REEL (16/07) : le bas de #result COLLAIT le début de « How it
     works » — mesuré, l'écart valait exactement 0px (section#how top = #result
     bottom = 1298). Aucune respiration entre le livrable et la page marketing.
     margin-bottom ici plutôt qu'un padding sur #how : c'est le résultat qui doit
     se détacher de ce qui suit, quelle que soit la section suivante (elle change
     selon la page — /pro, /everyday n'ont pas la même). */
  .rescuewrap{max-width:1180px;margin:0 auto 56px}
  .convcard{background:var(--bg2);border:1px solid var(--border);border-radius:var(--r-md);padding:18px 16px;text-align:center}
  .convtitle{display:inline-flex;align-items:center;justify-content:center;gap:9px;font-family:var(--font-display);font-weight:600;font-size:20px;letter-spacing:-.02em;color:var(--ink)}
  .convtitle .ic{color:var(--ink3);font-size:19px}
  .convmeta{margin-top:7px;font-size:13.5px;color:var(--ink2);display:flex;align-items:center;justify-content:center;gap:7px;flex-wrap:wrap}
  .convmeta .sep{color:var(--border)}
  .convmeta .up{color:var(--accent);vertical-align:-1px}
  .convmeta .metahi{color:var(--accent);font-weight:700;text-transform:uppercase;font-size:11px;letter-spacing:.03em;margin-left:1px}
  .convmeta .burnt{color:var(--accent);font-weight:600;display:inline-flex;align-items:center;gap:5px}
  /* jauge d'essence : échelle COMPLÈTE toujours visible + curseur qui marque la position */
  .gauge{max-width:300px;margin:16px auto 4px}
  .gauge-track{position:relative;height:10px;border-radius:6px;background:linear-gradient(90deg,#16845B,#6DA82B,#C08A1A,#E06A1E,#FF2D55)}
  .gauge-cursor{position:absolute;top:50%;left:10%;width:18px;height:18px;border-radius:50%;background:#fff;border:3px solid var(--ink);box-shadow:0 2px 5px rgba(23,23,22,.3);transform:translate(-50%,-50%);transition:left .55s cubic-bezier(.34,1.15,.5,1),border-color .3s}
  .gauge-ends{display:flex;justify-content:space-between;margin-top:7px;font-size:10px;letter-spacing:.05em;text-transform:uppercase;color:var(--ink3);font-weight:600}
  .gauge-label{max-width:340px;margin:9px auto 2px;font-family:var(--font-display);font-weight:700;font-size:15px;line-height:1.3;letter-spacing:-.01em;text-wrap:balance}
  @media(prefers-reduced-motion:reduce){.gauge-cursor{transition:none}}
  /* flash « ✓ prêt » — moment d'accomplissement bref entre loading et récap */
  .ready-flash{text-align:center;padding:44px 30px 40px;margin-top:18px;animation:rfin .3s ease}
  .rf-check{width:64px;height:64px;border-radius:50%;background:var(--success);color:#fff;display:grid;place-items:center;margin:0 auto 14px;box-shadow:0 8px 22px rgba(22,132,91,.3);animation:rfpop .45s cubic-bezier(.34,1.56,.5,1)}
  .rf-check .i{width:34px;height:34px;stroke-width:3}
  .rf-label{font-family:var(--font-display);font-weight:700;font-size:22px;color:var(--success);letter-spacing:-.02em}
  @keyframes rfin{from{opacity:0}to{opacity:1}}
  @keyframes rfpop{0%{transform:scale(.4);opacity:0}60%{transform:scale(1.12)}100%{transform:scale(1);opacity:1}}
  @media(prefers-reduced-motion:reduce){.ready-flash,.rf-check{animation:none}}
  /* message adaptatif (nommer le problème + geste répétable, selon la zone) */
  .verdict{max-width:600px;margin:20px auto 6px;text-align:center;animation:handoffIn .45s ease}
  .v-title{font-family:var(--font-display);font-weight:600;font-size:18px;letter-spacing:-.01em;color:var(--ink);margin:0}
  .v-sub{font-size:14.5px;line-height:1.55;color:var(--ink2);margin:7px auto 0;max-width:54ch}
  @media(prefers-reduced-motion:reduce){.verdict{animation:none}}
  /* signal « handoff prêt ↓ » — guide l'œil vers le bloc en dessous */
  .ready-cue{text-align:center;margin:12px auto 0;font-size:13.5px;font-weight:600;color:var(--accent-active);display:flex;align-items:center;justify-content:center;gap:7px}
  .ready-cue .rc-arrow{display:inline-block;font-size:16px;animation:rcbob 1.3s ease-in-out infinite}
  @keyframes rcbob{0%,100%{transform:translateY(0)}50%{transform:translateY(4px)}}
  @media(prefers-reduced-motion:reduce){.ready-cue .rc-arrow{animation:none}}
  /* marqueur succès (B : plus vert, visible) + apparition handoff */
  #handoff-block{animation:handoffIn .45s ease}
  @keyframes handoffIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
  .ready-flag{display:inline-flex;align-items:center;gap:9px;background:var(--success);color:#fff;border:none;border-radius:999px;padding:9px 17px 9px 12px;font-size:14.5px;font-weight:700;margin:0 0 16px;box-shadow:0 4px 14px rgba(22,132,91,.28);animation:readyPop .4s ease}
  @keyframes readyPop{from{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}
  .ready-flag .rc{width:22px;height:22px;border-radius:50%;background:rgba(255,255,255,.22);display:grid;place-items:center}
  .ready-flag .i{width:15px;height:15px;stroke-width:2.6}
  @media(prefers-reduced-motion:reduce){.ready-flag{animation:none}}
  @media(prefers-reduced-motion:reduce){#handoff-block{animation:none}}
  .chips-head{text-align:center;font-weight:600;font-size:11px;color:var(--ink3);text-transform:uppercase;letter-spacing:.1em;margin-top:18px;padding-top:16px;border-top:1px solid var(--divider)}
  .chips{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px;justify-content:center}
  .chip{display:inline-flex;align-items:center;gap:8px;height:42px;padding:0 17px;border-radius:9999px;border:1px solid var(--accent-soft);background:var(--surface);font-size:14.5px;font-weight:600;color:var(--ink);box-shadow:var(--sh-sm);transition:.16s;animation:chipIn .4s ease backwards}
  .chip:hover{transform:translateY(-2px);box-shadow:var(--sh-card)}
  .chip .ic{font-size:17px;color:var(--accent)}
  .chip b{color:var(--accent);font-weight:700;font-family:var(--font-display)}
  .chip:nth-child(2){animation-delay:.06s}.chip:nth-child(3){animation-delay:.12s}.chip:nth-child(4){animation-delay:.18s}
  @keyframes chipIn{from{opacity:0;transform:translateY(8px) scale(.96)}to{opacity:1;transform:none}}
  @media(prefers-reduced-motion:reduce){.chip{animation:none}.chip:hover{transform:none}}
  /* chips miroir (neutres) + indice « élevé » (uniquement volume/durée) */
  .chip .lab{font-size:10.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--ink3)}
  .chip .up{color:var(--accent);font-weight:700}
  .chip.hi{border-color:var(--accent);background:var(--accent-soft)}
  .chip.hi .hitag{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;color:var(--accent)}
  .chip.neutral b{color:var(--ink)}
  .chip.neutral .ic{color:var(--ink3)}
  /* comparaison mots toi/IA — 2 lignes labellisées, l'écart raconte l'histoire */
  .bal-cap{font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ink3);text-align:center;margin:14px 0 8px}
  .balance{margin:0 auto;max-width:380px;display:flex;flex-direction:column;gap:9px}
  .bal-row{display:grid;grid-template-columns:72px 1fr auto;align-items:center;gap:10px}
  .bal-name{font-size:13px;font-weight:700;color:var(--ink);text-align:right}
  .bal-name.ai{color:var(--accent-active)}
  .bal-track{height:12px;border-radius:6px;background:var(--divider);overflow:hidden}
  .bal-fill{display:block;height:100%;border-radius:6px;transition:width .55s cubic-bezier(.34,1.1,.5,1)}
  .bal-fill.you{background:var(--ink)}
  .bal-fill.ai{background:var(--accent)}
  .bal-num{font-size:12.5px;font-weight:600;color:var(--ink2);white-space:nowrap}
  .bal-num.ai{color:var(--accent-active)}
  @media(prefers-reduced-motion:reduce){.bal-fill{transition:none}}
  /* encart context rot sourcé (bloc 5) */
  .rot-line{text-align:center;font-size:12.5px;color:var(--ink3);margin:14px 22px 2px;line-height:1.5}
  .rot-line a{color:var(--accent-active);font-weight:600;text-decoration:none;border-bottom:1px solid var(--accent-soft)}
  .rot-line a:hover{border-color:var(--accent)}
  .chip:hover{border-color:var(--accent);transform:translateY(-1px)}
  details.proof{margin-top:10px}
  details.proof summary{list-style:none;cursor:pointer;color:var(--accent-active);font-size:13px;font-weight:600}
  details.proof .ev{font-size:13px;color:var(--ink2);border-left:2px solid var(--border);padding:5px 12px;margin:8px 0}

  /* HANDOFF */
  .handoff{margin-top:20px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--sh-card)}
  .handoff .hd{display:flex;align-items:center;gap:10px;padding:20px 22px 12px}
  .handoff .hd .ic{color:var(--accent);font-size:20px}
  .handoff .hd .t{font-family:var(--font-display);font-weight:600;font-size:21px;letter-spacing:-.02em}
  .handoff .hd .s{font-size:12.5px;color:var(--ink2);margin-left:auto}
  .promptwrap{position:relative;margin:0 18px}
  textarea.prompt{display:block;width:100%;max-height:340px;overflow:auto;resize:none;background:var(--bg2);border:1px solid var(--border);border-radius:var(--r-md);
    padding:20px;margin:0;font-family:var(--font-mono);font-size:13px;line-height:1.7;color:#2b2925;white-space:pre-wrap}
  textarea.prompt:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-ring)}
  .copybar{display:flex;gap:10px;align-items:center;margin:14px 18px 0;padding:0}
  .btn-copy{flex:1;height:56px;font-size:17px}
  /* Hiérarchie Open/Copy (petite conv) : empilé, Open dominant en haut, Copy
     discret dessous — fix test iPhone 13/07 (Open préremplit l'app en 1 clic). */
  .copybar-stack{flex-direction:column;align-items:stretch;gap:8px}
  .copybar-stack .btn{width:100%;flex:none}
  .btn-copy-sec{height:46px;font-size:14.5px}
  .fnote-toggle{display:flex;align-items:center;justify-content:center;gap:8px;margin:12px 22px 0;font-size:12.5px;color:var(--ink3);cursor:pointer;user-select:none}
  .fnote-toggle input{accent-color:var(--accent);width:15px;height:15px;cursor:pointer;flex:none}
  .fnote-toggle:hover{color:var(--ink2)}
  .handoff .foot{padding:12px 22px 20px;font-size:12px;color:var(--ink3);text-align:center}
  /* loading + erreur */
  .loading{background:var(--bg2);border:1px solid var(--border);border-radius:var(--r-xl);padding:34px 30px;margin-top:18px;text-align:center}
  .loading .orb{width:44px;height:44px;border-radius:50%;background:var(--accent);margin:0 auto 16px;box-shadow:0 0 0 0 var(--accent-ring);animation:orb 1.8s ease-in-out infinite}
  @keyframes orb{0%,100%{box-shadow:0 0 0 0 rgba(255,45,85,.35);transform:scale(1)}50%{box-shadow:0 0 0 16px rgba(255,45,85,0);transform:scale(1.08)}}
  .loading .lead{font-weight:700;font-size:22px;font-family:var(--font-display);letter-spacing:-.02em}
  .loading .lead .dots::after{content:"…";animation:dots 1.4s steps(4,end) infinite;display:inline-block;width:1.2em;text-align:left;overflow:hidden;vertical-align:bottom}
  @keyframes dots{0%{width:0}100%{width:1.2em}}
  /* worklog animé (R5) — lignes qui se remplacent, chips colorées à micro-anim */
  .loading .worklog{margin:20px auto 0;padding:0;list-style:none;font-size:14.5px;max-width:440px;text-align:left}
  .loading .worklog li{display:flex;align-items:center;gap:11px;padding:7px 0;position:relative;color:var(--ink3);opacity:.4;transition:opacity .4s ease,color .4s ease,transform .4s ease;transform:translateY(2px)}
  .loading .worklog .wl-dot{flex:none;width:10px;height:10px;border-radius:50%;background:var(--ink3);position:relative;transition:background .35s ease;box-shadow:0 0 0 0 rgba(255,45,85,0)}
  /* ligne en cours : texte encré + dot accent qui pulse */
  .loading .worklog li.active{opacity:1;color:var(--ink);transform:none}
  .loading .worklog li.active .wl-dot{background:var(--accent);animation:wlpulse 1.3s ease-in-out infinite}
  @keyframes wlpulse{0%,100%{box-shadow:0 0 0 0 rgba(255,45,85,.45)}50%{box-shadow:0 0 0 6px rgba(255,45,85,0)}}
  /* ligne terminée : dot succès + tick qui se dessine */
  .loading .worklog li.done{opacity:1;color:var(--ink2)}
  .loading .worklog li.done .wl-dot{background:var(--success);animation:none}
  .loading .worklog li.done .wl-dot::after{content:"";position:absolute;left:3px;top:1.5px;width:3px;height:6px;border:solid #fff;border-width:0 1.6px 1.6px 0;transform:rotate(45deg) scale(0);transform-origin:center;animation:wltick .3s ease forwards}
  @keyframes wltick{to{transform:rotate(45deg) scale(1)}}
  /* apparition/entrée d'une nouvelle ligne */
  @keyframes wlrise{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
  .loading .worklog li.enter{animation:wlrise .4s ease}
  @media(prefers-reduced-motion:reduce){.loading .orb{animation:none}.loading .worklog li{opacity:1;color:var(--ink);transform:none;transition:none}.loading .worklog li .wl-dot{animation:none!important}.loading .worklog li.done .wl-dot::after{animation:none;transform:rotate(45deg) scale(1)}.loading .worklog li.enter{animation:none}.loading .lead .dots::after{animation:none;content:"…";width:auto}}
  /* erreur qui tranche : ⚠ + rouge franc, distinct du rose de marque */
  .errmsg{margin-top:16px;background:var(--err-bg);border:1.5px solid var(--err-border);color:var(--err-ink);border-radius:var(--r-md);padding:14px 16px;font-size:14px;line-height:1.5;text-align:left}
  .errmsg::before{content:"⚠ "}
  .err-guide{display:inline-block;margin-top:8px;color:var(--err-ink);font-weight:600;text-decoration:underline;cursor:pointer}
  .copied{color:#fff!important}
  .btn-secondary.copied{background:var(--success)!important;border-color:var(--success)!important}
  .btn-primary.copied{background:var(--success)!important;box-shadow:none!important}

  /* SECTIONS — rythme vertical GLOBAL : une seule cadence sur toute la page */
  section{padding:84px 0}
  #how{padding:84px 0}
  .alt-bg{background:var(--bg2);border-top:1px solid var(--divider);border-bottom:1px solid var(--divider)}
  .sechead{text-align:center;margin-bottom:56px}
  .sechead h2{font-family:var(--font-display);font-weight:700;font-size:clamp(2rem,4vw,2.9rem);letter-spacing:-.03em;margin:0 0 8px}
  .sechead p{color:var(--ink2);font-size:16px;margin:0}
  .steps3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
  .step{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-xl);padding:32px 28px 32px;box-shadow:var(--sh-sm);transition:.2s;text-align:center}
  .step:hover{box-shadow:var(--sh-cardh);transform:translateY(-5px);border-color:var(--accent-soft)}
  /* vignette picto-ligne + microcap d'étape (remplacent le rond chiffré) */
  .step .illus{display:block;height:96px;max-width:100%;margin:0 auto 16px;color:var(--ink2)}
  .step .stepcap{font-size:10.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ink3);margin:0 0 8px}
  .step h3{font-family:var(--font-display);font-size:21px;margin:0 0 8px;font-weight:600;letter-spacing:-.02em}
  .step p{font-size:14.5px;color:var(--ink2);margin:0;line-height:1.6}
  /* #11 démo handoff (R2 : chrome + ombre + largeur maîtrisée) */
  .demo-wrap{max-width:680px;margin:0 auto;background:var(--surface);border:1px solid var(--border);border-radius:16px;overflow:hidden;box-shadow:0 30px 70px -20px rgba(255,45,85,.16),0 18px 44px -18px rgba(43,41,37,.26),0 4px 14px -6px rgba(43,41,37,.12);transition:transform .25s ease,box-shadow .25s ease}
  .demo-wrap:hover{transform:translateY(-4px);box-shadow:0 42px 92px -22px rgba(255,45,85,.24),0 24px 56px -18px rgba(43,41,37,.30)}
  .demo-hd{display:flex;align-items:center;gap:8px;padding:13px 18px;border-bottom:1px solid var(--divider);background:var(--bg2)}
  .demo-hd .demo-tag{margin-left:auto;font-family:var(--font-mono);font-size:11px;color:var(--success);background:var(--success-soft);border:1px solid var(--success-border);border-radius:999px;padding:2px 10px;letter-spacing:.02em}
  .demo-hd .dd{width:11px;height:11px;border-radius:50%;background:var(--border)}
  .demo-hd .dd:nth-child(1){background:#ff5f57}.demo-hd .dd:nth-child(2){background:#febc2e}.demo-hd .dd:nth-child(3){background:#28c840}
  .demo-hd .demo-title{margin-left:10px;font-family:var(--font-mono);font-size:12.5px;color:var(--ink3)}
  pre.demo-body{margin:0;padding:28px 30px;font-family:var(--font-mono);font-size:13px;line-height:1.75;color:#2b2925;white-space:pre-wrap;overflow-x:auto}
  pre.demo-body b{font-weight:600;color:var(--ink)}
  pre.demo-body .k{color:var(--accent);font-weight:500}
  .demo-note{text-align:center;font-size:13px;color:var(--ink3);margin:16px auto 0;max-width:560px}
  /* #17 sound familiar — marquee horizontal 2 rangées (R6) */
  .pains{position:relative;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent)}
  .pain-row{display:flex;gap:18px;width:max-content;will-change:transform}
  .pain-row + .pain-row{margin-top:18px}
  .pain-row.r1{animation:marquee-l 46s linear infinite}
  .pain-row.r2{animation:marquee-r 60s linear infinite}
  .pains:hover .pain-row{animation-play-state:paused}
  @keyframes marquee-l{from{transform:translateX(0)}to{transform:translateX(-50%)}}
  @keyframes marquee-r{from{transform:translateX(-50%)}to{transform:translateX(0)}}
  .pain{flex:0 0 auto;width:min(440px,82vw);box-sizing:border-box;margin:0;background:var(--surface);border:1px solid var(--border);border-left:3px solid var(--accent);border-radius:var(--r-lg);padding:26px 28px;font-size:16.5px;line-height:1.6;color:var(--ink);font-style:normal;box-shadow:var(--sh-sm)}
  .pain cite{display:block;margin-top:15px;font-size:13px;color:var(--ink3);font-style:normal;letter-spacing:.02em;font-weight:500}
  @media(prefers-reduced-motion:reduce){.pain-row{animation:none!important;flex-wrap:wrap;width:auto;justify-content:center}.pains{-webkit-mask-image:none;mask-image:none;overflow:visible}.pain-row [aria-hidden="true"]{display:none}}
  .personas{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
  .persona{border:1px solid var(--border);border-radius:var(--r-lg);padding:24px;background:var(--surface);box-shadow:var(--sh-sm);transition:.2s}
  .persona:hover{box-shadow:var(--sh-cardh);transform:translateY(-4px) scale(1.012)}
  .persona .icwrap{width:44px;height:44px;border-radius:var(--r-md);background:var(--accent-soft);display:grid;place-items:center;color:var(--accent-active);font-size:22px}
  .persona h3{font-family:var(--font-display);font-size:16px;margin:14px 0 4px;font-weight:600;letter-spacing:-.01em}
  .persona p{font-size:13.5px;color:var(--ink2);margin:0;line-height:1.55}
  .persona p b{color:var(--ink);font-weight:600}
  .who-foot{text-align:center;max-width:620px;margin:40px auto 0;font-size:16.5px;color:var(--ink2);line-height:1.6}
  .who-foot b{color:var(--ink);font-weight:600}
  .faq{max-width:720px;margin:0 auto}
  details.q{border-bottom:1px solid var(--divider);padding:18px 4px}
  details.q summary{list-style:none;cursor:pointer;font-weight:600;font-size:16px;display:flex;justify-content:space-between;gap:10px;align-items:center;font-family:var(--font-display);letter-spacing:-.01em}
  details.q summary .plus{color:var(--ink3);font-size:22px;transition:.2s;font-weight:400}
  details.q[open] summary .plus{transform:rotate(45deg);color:var(--accent)}
  details.q p{color:var(--ink2);font-size:14.5px;margin:12px 0 2px;line-height:1.6}

  /* FOOTER refait */
  footer{background:var(--ink);color:#e9e4e1;padding:72px 0 48px;margin-top:48px}
  .footgrid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr 1fr;gap:40px}
  .footbrand .logo{color:#fff;font-size:30px}
  .footbrand .tag{font-family:var(--font-display);font-size:19px;color:#fff;margin:16px 0 0;letter-spacing:-.02em;max-width:16ch;line-height:1.2}
  /* point de capture extension : chip visible (ouvre la modale guide / bloc 413) */
  .footnotify{margin-top:26px;max-width:320px}
  .footnotify .fn-link{display:inline-flex;align-items:center;gap:8px;color:#fff;background:rgba(255,255,255,.06);
    border:1px solid rgba(255,255,255,.16);border-radius:999px;padding:10px 16px;font-size:13.5px;font-weight:600;line-height:1.2;text-decoration:none;transition:.15s}
  .footnotify .fn-link:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.34);transform:translateY(-1px)}
  .footnotify .fn-ico{width:16px;height:16px;flex:none;color:var(--accent)}
  /* Encart « préviens-moi » (CHANTIER-ALLÉGEMENT 16/07) — RELOCALISATION de
     l'ancienne case B (api/subscribe.js purpose conversation-watch, ex-#sub-block)
     vers le pied de page, hors du chemin critique du handoff, jamais un mur.
     Injecté en JS (mountFooterWatch(), site/app.js) dans .footbrand, après
     .footnotify — zéro édition HTML par page (même philosophie que la capture
     email d'origine), universel (footer présent sur toutes les pages). */
  .foot-watch{margin-top:22px;max-width:320px}
  .foot-watch-t{color:#fff;font-size:13.5px;font-weight:600;line-height:1.35;margin:0 0 10px}
  .foot-watch-form{display:flex;gap:8px}
  .foot-watch-email{flex:1;min-width:0;height:40px;padding:0 12px;font:inherit;font-size:13px;
    color:#fff;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16);border-radius:var(--r-sm)}
  .foot-watch-email::placeholder{color:rgba(255,255,255,.42)}
  .foot-watch-email:focus{outline:none;border-color:rgba(255,255,255,.4)}
  .foot-watch-btn{flex:none;height:40px;padding:0 16px;font:600 13px var(--font-sans);color:#fff;
    background:var(--accent2);border:none;border-radius:var(--r-sm);cursor:pointer}
  .foot-watch-btn:hover{background:var(--accent2-hover)}
  .foot-watch-err{margin:8px 0 0;font-size:11.5px;color:#ff8a8a}
  .foot-watch-ok{margin:8px 0 0;font-size:12.5px;color:#fff;display:flex;align-items:center;gap:6px}
  .foot-watch-ok::before{content:"✓";color:var(--accent2)}
  .foot-watch-note{margin:8px 0 0;font-size:10.5px;line-height:1.4;color:rgba(255,255,255,.48)}
  /* air autour du sélecteur de langue du pied */
  footer .footlang{margin-top:44px}
  .footcol h4{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink3);margin:0 0 14px;font-weight:600}
  .footcol a{display:block;color:#c9c2bc;text-decoration:none;font-size:14px;margin-bottom:10px}
  .footcol a:hover{color:#fff}
  .footsoon{display:block;color:#8a837d;font-size:14px;margin-bottom:10px}
  .footsoon em{font-style:normal;font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--accent);border:1px solid rgba(255,45,85,.4);border-radius:5px;padding:1px 6px;margin-left:4px}
  .footbottom{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;border-top:1px solid #2c2825;margin-top:40px;padding-top:22px;font-size:12.5px;color:var(--ink3)}

  /* scroll reveal */
  .reveal{opacity:0;transform:translateY(16px);transition:opacity .5s ease,transform .5s ease}
  .reveal.in{opacity:1;transform:none}
  @media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}.btn-primary:hover,.step:hover,.persona:hover,.chip:hover,.demo-wrap:hover{transform:none}}
  @media(max-width:760px){.steps3,.personas{grid-template-columns:1fr}.footgrid{grid-template-columns:1fr 1fr}.nav .links > a:not(:last-child){display:none}}
  /* --- MOBILE (≤560px) : audit tech 2026-07-03 — pas de scroll latéral, hero/CTA lisibles, cibles ≥44px --- */
  @media(max-width:560px){
    html,body{overflow-x:hidden}
    img,svg{max-width:100%}
    .container{padding:0 18px}
    section{padding:56px 0}
    #how{min-height:auto;padding:64px 0}
    #how .sechead{margin-bottom:36px}
    .hero{padding:32px 0 24px}
    /* bug re-test 08/07 mobile réel : chevauchement H1/H2 signalé — espacement
       vertical insuffisant. Wording inchangé, marge H1 remontée pour respirer. */
    .hero h1{margin-bottom:28px}
    .eyebrow{font-size:16px;margin-bottom:20px}
    .privacy-line{white-space:normal}
    /* input = zone de collage ÉVIDENTE et confortable (l'élément principal) ·
       bouton SÉPARÉ dessous, présent mais pas démesuré */
    .inputcard{flex-direction:column;gap:12px;padding:0;background:transparent;border:none;box-shadow:none}
    .inputcard input{flex:none;width:100%;height:66px;padding:0 18px;font-size:16px;text-align:left;border:1.5px solid var(--border);background:var(--surface);border-radius:var(--r-lg);box-shadow:var(--sh-card)}
    .inputcard input:focus{border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-ring)}
    .inputcard .btn-lg{width:100%;height:52px;font-size:15.5px}
    /* le tick n'a pas de sens en colonne : on le masque proprement */
    .tick{display:none!important}
    /* bug re-test 08/07 mobile réel : "Relancer ma conversation" débordait à
       droite — à 375px exact, logo+bouton touchaient le bord SANS aucune
       marge de sécurité (357px pile sur 357px de conteneur utile), donc la
       moindre variance de rendu police (fallback système pendant le
       chargement des web fonts) faisait déborder. Resserré avec une vraie
       marge + garde-fou overflow (jamais de débordement même si un texte
       plus long arrive un jour). */
    .nav{padding:18px 0;gap:8px}
    .nav .logo{font-size:22px}
    .nav .links{min-width:0}
    .btn-sm{height:44px;padding:0 12px;font-size:12.5px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
    .divlabel::before,.divlabel::after{width:calc(50% - 62px)}
    /* démo terminal : padding réduit, scroll interne conservé */
    pre.demo-body{padding:20px 18px;font-size:12.5px}
    .demo-hd{padding:11px 14px}
    /* modale : padding resserré, fermeture atteignable */
    .modal{padding:30px 20px 26px}
    .modal-close{top:12px;right:12px}
    .gb-shots{grid-template-columns:1fr}
    /* handoff : marges internes réduites */
    .handoff .hd{flex-wrap:wrap;padding:18px 16px 10px}
    .handoff .hd .s{margin-left:0;flex-basis:100%}
    .promptwrap{margin:0 12px}
    textarea.prompt{padding:16px}
    .copybar{margin:12px 12px 0}
    .btn-copy{font-size:16px}
    /* footer : 1 colonne sur petit écran */
    .footgrid{grid-template-columns:1fr;gap:26px}
    footer{padding:44px 0 32px}
    .footbottom{flex-direction:column;align-items:flex-start;gap:6px}
    /* cibles tactiles chips / faq */
    .chip{height:40px}
    details.q summary{padding:2px 0}
  }

  /* ===== compléments partagés (ex-tail /pro + /everyday) ===== */
  /* --- page-outil : compléments (partagé /pro + /everyday) --- */
  a.btn{text-decoration:none}
  .nav .links a.btn-primary{color:#fff}
  .nav .links a.btn-primary:hover{color:#fff}

  /* ===== CSS ex-runtime (ex-injectMultitopicCss, app.js) ===== */
  .mt-banner{display:flex;align-items:center;gap:12px 14px;flex-wrap:wrap;margin:18px 0 14px;padding:14px 18px;
    border-radius:var(--r-lg);background:linear-gradient(100deg,var(--accent-soft),#FFF8FA);
    border:1px solid #FFD6DE;box-shadow:var(--sh-sm);text-align:left}
  .mt-banner .mt-sp{color:var(--accent);font-size:17px;flex:none}
  .mt-banner .mt-bt{flex:1 1 160px;font-family:var(--font-display);font-weight:600;font-size:15.5px;letter-spacing:-.01em;color:var(--ink)}
  .mt-banner .mt-bl{display:flex;gap:6px;flex-wrap:wrap}
  .mt-topic{font-size:12px;font-weight:600;color:var(--ink2);background:var(--surface);border:1px solid var(--border);border-radius:999px;padding:4px 10px;white-space:nowrap}

  /* ===== CSS ex-runtime (ex-injectUx14Css, app.js) ===== */
  .fbm-back{position:fixed;inset:0;z-index:60;background:rgba(23,23,22,.45);display:flex;justify-content:center;align-items:center;padding:20px}
  .fbm-card{background:var(--surface);border-radius:var(--r-lg);box-shadow:var(--sh-card);padding:20px 20px 18px;
    max-width:400px;width:100%;position:relative;text-align:left;animation:fbmIn .18s ease-out}
  @keyframes fbmIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
  .fbm-x{position:absolute;top:10px;right:10px;width:32px;height:32px;border-radius:50%;border:1px solid var(--border);
    background:var(--bg2);color:var(--ink2);font-size:15px;line-height:1;cursor:pointer;display:grid;place-items:center}
  .fbm-x:hover{color:var(--ink);border-color:var(--ink)}
  .fbm-t{font-family:var(--font-display);font-weight:600;font-size:17px;letter-spacing:-.01em;margin:0 0 14px;padding-right:34px}
  .fbm-chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}
  .fbm-chip{font:600 13px/1 var(--font-sans);color:var(--ink2);background:var(--bg2);border:1px solid var(--border);border-radius:999px;padding:10px 14px;cursor:pointer}
  .fbm-chip:hover{border-color:var(--ink)}
  .fbm-chip.on{background:var(--accent-soft);border-color:var(--accent);color:var(--accent-active)}
  .fbm-send{width:100%;height:46px;font-size:14.5px}
  .fbm-note{font-size:11.5px;color:var(--ink3);margin:10px 0 0;text-align:center}
  .fbm-thanks{display:flex;align-items:center;justify-content:center;gap:8px;font-weight:600;font-size:14.5px;color:var(--ink2);padding:18px 0 6px}
  .fbm-grab{display:none}
  body.is-mobile .fbm-back{align-items:flex-end;padding:0}
  body.is-mobile .fbm-card{max-width:none;border-radius:18px 18px 0 0;box-shadow:0 -12px 30px rgba(23,23,22,.2);
    padding-bottom:max(18px,env(safe-area-inset-bottom));animation:fbmUp .22s ease-out}
  @keyframes fbmUp{from{transform:translateY(40px);opacity:.6}to{transform:none;opacity:1}}
  body.is-mobile .fbm-grab{display:block;width:38px;height:4px;border-radius:2px;background:var(--border);margin:0 auto 12px}
  @media(prefers-reduced-motion:reduce){
    .fbm-card,body.is-mobile .fbm-card{animation:none}
  }

  /* ===== CSS ex-runtime (ex-injectCaptureCss, app.js) ===== */
  .fb-line{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:10px 4px 0;font-size:13px;color:var(--ink3)}
  .fb-btn{background:var(--bg2);border:1px solid var(--border);border-radius:var(--r-md);cursor:pointer;
    font-size:14px;line-height:1;padding:5px 9px;transition:transform .12s,border-color .12s}
  .fb-btn:hover{transform:translateY(-1px);border-color:var(--accent)}
  .fb-thanks{font-weight:600;color:var(--ink2)}
  /* Composant email V2 « empilement minimal » (redesign 08/07, validé fondateur
     sur maquette site/_email-mockup.html) : plus de pavé pointillé — un simple
     filet de séparation (padfoot), largeurs resserrées (~320-360px, jamais pleine
     largeur du résultat), bouton Google discret, champ + envoi empilés pleine
     largeur du composant, cases après le formulaire. */
  /* ===== Bloc capture email — ALIGNÉ SUR LE VALIDÉ (maquette _fin-mockup état C
     + _email-mockup VARIANTE 2 « champ et envoi EMPILÉS, largeur identique » —
     feu fondateur). Trois règles tenues :
     (1) ENCADRÉ DISCRET : fond surface, bordure grise fine, ombre légère, icône
         enveloppe NEUTRE. Aucune bordure accent, aucun rouge alarmant.
     (2) UNE largeur (--sub-w) et UNE hauteur (--sub-h) pour Google, champ et
         Envoyer — empilés, jamais accolés, jamais deux largeurs différentes.
     (3) L'ACCENT EST RÉSERVÉ AU SEUL BOUTON ENVOYER. ===== */
  .sub-block{margin:20px auto 0;padding:18px;max-width:calc(var(--sub-w) + 36px);background:var(--surface);border:1px solid var(--border);border-radius:14px;box-shadow:var(--sh-sm)}
  .sub-t{margin:0;display:flex;align-items:center;gap:8px;font-family:var(--font-display);font-weight:700;font-size:15.5px;letter-spacing:-.01em;color:var(--ink)}
  .sub-t .sub-ic{width:18px;height:18px;color:var(--ink3);flex:none}
  .sub-google{width:100%;max-width:var(--sub-w);margin:14px 0 0}
  .sub-google-slot{width:100%;min-height:var(--sub-h);border-radius:var(--r-md);overflow:hidden;line-height:0}
  .sub-google-slot iframe{display:block;margin:0!important}
  /* Bouton Google « click-to-load » : affiché AVANT consentement (même gabarit que
     le bouton officiel : pill blanc, bordure grise, logo G, largeur du champ).
     Rien de Google n'est chargé tant qu'il n'est pas cliqué → règle Emil tenue,
     et l'encadré n'a plus jamais de trou « champ Google vide ». */
  .sub-google-cta{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;height:var(--sub-h);padding:0 14px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);cursor:pointer;font:600 14.5px/1 var(--font-sans);color:var(--ink);box-shadow:var(--sh-sm);transition:border-color .14s,background .14s}
  .sub-google-cta:hover{border-color:var(--ink3);background:var(--bg2,#faf8f6)}
  .sub-google-cta svg{width:18px;height:18px;flex:none}
  .sub-google-err{margin:6px 0 0;font-size:12.5px;font-weight:600;color:#C03D2E}
  .sub-or{display:flex;align-items:center;gap:10px;margin:12px 0;font-size:12px;color:var(--ink3);width:100%;max-width:var(--sub-w)}
  .sub-or::before,.sub-or::after{content:"";flex:1;height:1px;background:var(--border)}
  /* VARIANTE 2 : champ PUIS envoi, empilés, même largeur, même hauteur. */
  .sub-form{display:flex;flex-direction:column;gap:8px;width:100%;max-width:var(--sub-w)}
  .sub-email{width:100%;height:var(--sub-h);padding:0 14px;font:inherit;font-size:14.5px;color:var(--ink);background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);transition:border-color .14s,box-shadow .14s}
  .sub-email:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-ring)}
  .sub-email::placeholder{color:var(--ink3)}
  .sub-form .sub-btn{width:100%;height:var(--sub-h);margin:0;padding:0;font:600 14.5px/1 var(--font-sans);border:none;border-radius:var(--r-md);background:var(--accent);color:#fff;box-shadow:var(--sh-accent);transition:background .14s}
  .sub-form .sub-btn:hover{background:var(--accent-hover);transform:none}
  .sub-form .sub-btn:active{background:var(--accent-active)}
  .sub-cases{display:flex;flex-direction:column;gap:7px;margin:14px 0 0;width:100%;max-width:var(--sub-w);text-align:left}
  .sub-case{display:flex;align-items:flex-start;gap:9px;font-size:12.5px;line-height:1.45;color:var(--ink2);cursor:pointer}
  .sub-case input{appearance:none;-webkit-appearance:none;flex:none;width:16px;height:16px;margin:1px 0 0;border:1.5px solid var(--border);border-radius:5px;background:var(--surface);cursor:pointer;position:relative;transition:background .12s,border-color .12s}
  .sub-case input:checked{background:var(--accent);border-color:var(--accent)}
  .sub-case input:checked::after{content:"";position:absolute;left:4.5px;top:1.5px;width:4px;height:8px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
  .sub-case input:focus-visible{outline:2px solid var(--accent-ring);outline-offset:1px}
  .sub-err{margin:10px 0 0;font-size:12.5px;font-weight:600;color:#C03D2E}
  .sub-note{margin:12px 0 0;font-size:11.5px;color:var(--ink3);line-height:1.5;max-width:var(--sub-w)}
  .sub-ok{margin:12px 0 0;font-size:13px;font-weight:600;color:var(--success)}
  /* Fix équilibre visuel écran principal (retour fondateur 08/07) : le handoff
     au-dessus prend toute la largeur du résultat, mais la colonne resserrée
     (320-360px, volontaire — cf. commentaire plus haut) du composant email
     restait collée à gauche par défaut (aucun élément n'était centré), ce qui
     lisait comme un décalage/oubli plutôt qu'un choix. Centre la colonne dans
     #sub-block SEULEMENT (scoping par id, PAS par classe) pour ne rien changer
     à l'écran de fin (.endmail, encore au stade maquette _fin-mockup.html, pas
     encore intégré) qui partage les mêmes classes .sub-*. */
  #sub-block{text-align:center}
  #sub-block .sub-form,#sub-block .sub-google,#sub-block .sub-or,#sub-block .sub-note,#sub-block .sub-cases{margin-left:auto;margin-right:auto}
  #sub-block .sub-t{justify-content:center}

  /* ===== HIÉRARCHIE 3 ZONES écran résultat (validé _result-mobile-v2-mockup.html) :
     Zone A (#handoff-block) héros en haut · Zone B (#summary) analyse repliée
     (foldMetrics/foldMobile inchangé) · Zone C (#zone-c ⊃ #sub-block) options
     secondaires séparées. Réordonnancement DOM par apply3Zones() ; ici le rythme.
     V1.8 : #handoff-block/#summary/#compact-band ne sont plus des enfants
     DIRECTS de #result (grille 2 colonnes desktop plus bas) mais de
     .result-main/.result-side — sélecteurs re-scopés en conséquence. Restent
     valables par id (spécificité) quel que soit le conteneur réel. ===== */
  #result > #divlabel{margin:28px 0 14px}
  .result-main > #handoff-block{margin-top:0}
  .result-side > #summary{margin-top:28px}
  .result-side > #compact-band{margin-top:24px}
  .result-side > #summary .convtitle{font-size:17px}
  .result-side > #summary .convtitle .ic{font-size:16px}
  /* CHANTIER-ALLÉGEMENT (16/07) : Zone C n'héberge plus la box email (supprimée
     §2) mais le brief humain (.note-inline) — plus de filet séparateur ni de
     label « Options secondaires » : c'est désormais un contenu à part entière de
     la colonne latérale, pas une annexe. La carte .note-inline porte sa propre
     bordure/ombre, la Zone C ne fait que la positionner. */
  /* ⚠️ PIÈGE TROUVÉ EN MESURANT LE §3 (16/07) : #zone-c est créé en JS via
     document.createElement("section") (apply3Zones) → il HÉRITE de la règle
     globale `section{padding:84px 0}` (ligne ~496), pensée pour les sections
     MARKETING de la page, pas pour un wrapper injecté. La règle desktop
     .result-side .zone-c{padding-top:0} ne tuait que le HAUT → il restait
     84px de padding-BAS invisibles sous la box premium. C'est ce qui
     l'empêchait d'atteindre le bas du handoff (mesuré : 84px pile), et ça
     ajoutait 84px de vide mort sous la box SUR MOBILE AUSSI — donc ça allonge
     l'écran que tout ce chantier cherche à raccourcir (cf. §1).
     padding:0 ici, une fois pour toutes : ce n'est pas une section marketing.
     Le padding-top:16px voulu sur mobile est réappliqué plus bas explicitement. */
  .zone-c{margin-top:0;padding:0}
  .zone-c-label{margin:0 0 14px;font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink3);text-align:left}
  @media(max-width:560px){
    #result > #divlabel{margin:20px 0 12px}
    .result-side > #summary{margin-top:22px}
    .result-side > #compact-band{margin-top:20px}
    /* ⚠️ SR-20 (17/07) — 10e OCCURRENCE DU FIL ROUGE : `padding-top:16px` était un
       VESTIGE. Son rôle était d'espacer la carte du FILET séparateur et du label
       « Options secondaires »… tous deux SUPPRIMÉS le 16/07 — le commentaire
       ci-dessus (l.821-825) l'acte noir sur blanc. Il paddait donc contre RIEN :
       16px de vide mort sur mobile, au-dessus de la carte premium, exactement là
       où on se bat pour des pixels. Le margin-top:22px, lui, reste légitime : il
       sépare la carte du bloc au-dessus. Rien n'errait, rien ne le signalait —
       une règle juste dont la raison a disparu. */
    .zone-c{margin-top:22px}
  }

  /* ===== GRILLE 2 COLONNES ÉCRAN RÉSULTAT DESKTOP (proposition fondateur
     validée — source de vérité site/_result-2col-mockup.html) : colonne
     principale 2/3 (#handoff-block) + colonne latérale 1/3 (#summary +
     #compact-band + .verdict en haut, #zone-c juste en dessous). DESKTOP
     UNIQUEMENT (>900px, précédent déjà utilisé pour .hero-da/.da-stage plus
     haut) — sous ce point de rupture, retour identique à l'empilement actuel
     pleine largeur, même ordre (apply3Zones()/site/app.js n'y touche pas).
     NB (écart avec le mockup) : .verdict (#verdict, message adaptatif affiché
     ~9s après le récap, replié par foldMetrics) n'était pas couvert par le
     mockup — il vit dans le DOM réel entre #summary et #zone-c. Rejoint
     .result-side pour préserver l'ordre visuel actuel (sinon il s'afficherait
     pleine largeur SOUS toute la grille, un comportement jamais vu ni validé).
     Fix hauteur (retour fondateur #1) : align-items:stretch (comportement Grid
     par défaut) + .result-main en flex column, .handoff (flex:1) absorbe la
     hauteur de ligne, .rot-line se pousse en bas (margin-top:auto) → les deux
     colonnes finissent à la même ligne de base, sans étirer le textarea. */
  .result-grid{display:grid;grid-template-columns:minmax(0,2fr) minmax(260px,1fr);gap:30px;align-items:stretch;max-width:1180px;margin:0 auto}
  .result-main{min-width:0;display:flex;flex-direction:column}
  .result-main .handoff{flex:1;display:flex;flex-direction:column}
  .result-main .rot-line{margin-top:auto}
  .result-side{display:flex;flex-direction:column;gap:18px;position:sticky;top:24px}
  @media(min-width:901px){
    /* Le rail latéral gère déjà l'espacement via gap:18px : on neutralise les
       marges/le filet pensés pour l'empilement pleine largeur (règles plus
       haut), pour ne pas les cumuler avec le gap. Sous 900px ces overrides ne
       s'appliquent plus : les marges/le filet d'origine reprennent leur rôle
       telles quelles, empilement identique à l'existant. */
    .result-side > #summary,
    .result-side > #compact-band,
    .result-side .verdict{margin-top:0}
    .result-side .zone-c{margin-top:0;padding-top:0;border-top:none}
    .result-side .zone-c-label{text-align:left}
    /* §3 PARCOURS-REEL (16/07) : la box brief s'arrêtait 189px avant le bas du
       handoff (mesuré) — elle avait l'air d'une note de bas de page à côté de
       l'asset principal. Or c'est l'ASSET PREMIUM : il doit peser autant que le
       handoff, pas moins. La colonne (.result-side) était déjà étirée par la
       grille (align-items:stretch), mais ses enfants gardaient leur hauteur
       naturelle → 189px de vide en bas. flex:1 sur le DERNIER enfant (#zone-c)
       lui fait absorber ce vide, et .note-inline le remplit à son tour.
       align-content:space-between (et pas center) : le conteneur est en
       flex-wrap, donc align-content distribue les LIGNES sur l'axe vertical →
       icône+titre en haut, CTA poussé en bas.
       ⚠️ align-content:flex-start + margin-top:auto sur le CTA, et PAS
       space-between : avec space-between les 3 lignes se répartissaient à
       intervalles égaux → deux trous de ~110px (titre │ vide │ pile │ vide │
       CTA), 58% de la carte en vide mesuré. Motif standard « contenu groupé en
       haut, CTA ancré en bas » : un seul vide, en bas, qui se lit comme une
       respiration et non comme un bug. Le vide résiduel reste un vrai sujet
       (remonté à Kevin) : étirer ne suffit pas à donner du POIDS, il faudra du
       contenu — la carte est trop maigre pour 383px. */
    .result-side .zone-c{flex:1;display:flex;flex-direction:column}
    .result-side .zone-c .note-inline{flex:1;align-content:flex-start}
    .result-side .zone-c .note-inline-cta{margin-top:auto}
  }
  /* ══ SR-06·B « LE BUDGET D'ÉCRAN » (17/07, arbitré Kevin) ════════════════════
     Constat mesuré : sur mobile la carte premium démarrait à 732px (82px SOUS le
     pli de 650px) et son CTA à 917px (267px sous le pli). Le parcours réel étant
     coller → copier → PARTIR dans ChatGPT, elle n'était jamais vue : le premium
     n'existait pas sur téléphone. Ce n'est pas un défaut de design de la carte —
     c'est un problème de BUDGET : le handoff mangeait tout l'écran.
     Deux leviers, zéro nouvelle classe :
       · on plafonne le textarea (on n'a pas besoin de 340px de prompt pour
         comprendre qu'on l'a ; il scrolle déjà, `overflow:auto` l.479) ;
       · on remonte #zone-c AVANT les signaux (order:-1) — le brief est une
         ACTION, la jauge est du contexte ; l'action passe devant.
     ⚠️ `gap:0` est OBLIGATOIRE : .result-side a `gap:18px` en base (grille
     desktop). En repassant `display:flex` ici pour obtenir `order`, le gap
     ressusciterait et rajouterait 18px × 3 — exactement le vide qu'on chasse. ══ */
  @media(max-width:900px){
    .result-grid{display:block;max-width:920px}
    .result-main{display:block}
    .result-main .handoff{flex:none}
    .result-side{display:flex;flex-direction:column;gap:0;position:static}
    .result-side .zone-c{order:-1}
  }
  @media(max-width:560px){
    textarea.prompt{max-height:190px}
  }

  /* ===== ITINÉRAIRE POST-COPIE (levier 1) — révélé après Copier, mobile + desktop ===== */
  .post-copy{margin:14px 18px 0;background:var(--success-soft);border:1px solid var(--success-border);border-radius:var(--r-md);padding:13px 15px;counter-reset:pc;animation:readyPop .32s ease}
  .pc-lead{display:flex;align-items:center;gap:8px;margin:0 0 11px;font-size:13.5px;font-weight:700;color:var(--success)}
  .pc-check{flex:none;width:20px;height:20px;border-radius:50%;background:var(--success);color:#fff;display:grid;place-items:center}
  .pc-check .i{width:12px;height:12px;stroke-width:3}
  .pc-steps{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:9px 18px}
  .pc-step{display:flex;align-items:center;gap:9px;font-size:13.5px;font-weight:500;color:var(--ink)}
  .pc-num{counter-increment:pc;flex:none;width:22px;height:22px;border-radius:50%;background:var(--surface);border:1.5px solid var(--success-border);color:var(--success);font-size:12px;font-weight:700;display:grid;place-items:center}
  .pc-num::before{content:counter(pc)}
  @media(prefers-reduced-motion:reduce){.post-copy{animation:none}}
  @media(max-width:560px){.post-copy{margin:12px 12px 0}.pc-steps{flex-direction:column;gap:10px}}
  .metrics-fold{display:block;margin:10px auto 0;background:none;border:none;cursor:pointer;
    font:inherit;font-size:13px;font-weight:600;color:var(--ink3);padding:4px 8px;letter-spacing:-.01em}
  .metrics-fold:hover{color:var(--accent)}
  /* QA-MOBILE-REELLE (16/07) — « ↓ Détails » vit DANS la carte signaux, en pied,
     plus en orphelin entre deux cartes. Deux hôtes selon le viewport :
       · desktop → dernier enfant de #summary (.convcard) : séparateur fin + pleine
         largeur de carte, l'affordance est explicite (la carte dit « à bout de
         souffle », le pied de CETTE carte propose de déplier) ;
       · mobile  → dernier enfant de #compact-band, qui est une ligne flex
         (coche | titre | mini-jauge) : d'où flex-wrap + flex-basis:100% sur le
         bouton, sinon il se collerait en 4e colonne à droite de la mini-jauge
         au lieu de passer en pied de bandeau. */
  #summary > .metrics-fold{width:100%;margin:12px 0 0;padding-top:10px;
    border-top:1px solid var(--divider);border-radius:0}
  .compact-band{flex-wrap:wrap}
  .compact-band > .metrics-fold{flex-basis:100%;width:100%;margin:10px 0 0;padding-top:9px;
    border-top:1px solid var(--border)}
  /* ALLÈGEMENT MOBILE (décision fondateur 08/07 4e tour, validé sur maquette
     site/_result-mobile-mockup.html) : bandeau compact (coche+titre+mini-jauge)
     qui REMPLACE la carte de métriques complète dès le récap sur mobile — plus
     d'attente 9s. Diagnostic ayant motivé le fix : la carte seule pesait
     ≈565px sur ~650px utiles (Safari iPhone) = 87% du 1er écran. */
  .compact-band{display:none;align-items:center;gap:10px;padding:14px 16px;
    background:var(--bg2);border:1px solid var(--border);border-radius:var(--r-lg)}
  body.is-mobile .compact-band.on{display:flex}
  .compact-band .cb-check{flex:none;width:26px;height:26px;border-radius:50%;
    background:var(--success-soft);color:var(--success);display:grid;place-items:center}
  .compact-band .cb-check svg{width:15px;height:15px;stroke-width:2.6}
  .compact-band .cb-mid{flex:1;min-width:0}
  .compact-band .cb-title{margin:0;font-family:var(--font-display);font-weight:600;
    font-size:14px;letter-spacing:-.01em;color:var(--ink);white-space:nowrap;
    overflow:hidden;text-overflow:ellipsis}
  .compact-band .cb-sub{margin:1px 0 0;font-size:11.5px;color:var(--ink2);
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .compact-band .cb-gauge{flex:none;width:40px}
  .compact-band .cb-gauge .gauge-track{position:relative;height:6px;border-radius:4px;
    background:linear-gradient(90deg,#16845B,#6DA82B,#C08A1A,#E06A1E,#FF2D55)}
  .compact-band .cb-gauge .gauge-cursor{position:absolute;top:50%;left:10%;width:10px;
    height:10px;border-radius:50%;background:#fff;border:2px solid var(--ink);
    transform:translate(-50%,-50%)}
  /* CTA COPIER STICKY MOBILE (proposition B, même maquette) : tant que le
     handoff est prêt et non copié, un bouton "Copier" reste fixé en bas
     d'écran — visible sans le moindre scroll, quel que soit l'endroit où on
     se trouve dans la page. Disparaît après clic. */
  .sticky-copy{display:none}
  body.is-mobile .sticky-copy.on{display:block;position:fixed;left:0;right:0;bottom:0;z-index:30;
    padding:10px 16px max(10px,env(safe-area-inset-bottom));
    background:linear-gradient(to top,var(--bg) 65%,transparent)}
  /* retour fondateur 08/07 (validé, seul ajustement demandé) : texte un peu
     petit — taille explicite plutôt que l'héritage sans size-modifier
     (.btn seul n'a pas de font-size propre). Proportions/padding inchangés. */
  .sticky-copy button{width:100%;height:52px;font-size:17px}
  /* bug re-test 08/07 : le × flottait mal en sibling flex de l'input (pensé
     pour l'ancien .inputcard en ligne) — overlay absolu ancré dans le champ
     lui-même, robuste que .inputcard soit en ligne ou en colonne. */
  .link-shell{position:relative}
  .link-shell input{padding-right:38px}
  .clr-btn{position:absolute;top:50%;right:8px;transform:translateY(-50%);flex:none;
    width:26px;height:26px;border-radius:50%;border:1px solid var(--border);
    background:var(--bg2);color:var(--ink3);font-size:16px;line-height:1;cursor:pointer;padding:0}
  .clr-btn:hover{color:var(--ink);border-color:var(--accent)}
  .clr-strip{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:10px auto 0;padding:12px 16px;
    background:var(--accent-soft);border:1px solid var(--accent);border-radius:var(--r-md);
    font-size:13.5px;color:var(--ink2);text-align:left}
  .clr-strip .clr-q{flex:1;min-width:200px;font-weight:600}
  .clr-strip button{font:inherit;font-size:13px;font-weight:600;padding:7px 12px;border-radius:var(--r-md);
    cursor:pointer;border:1px solid var(--border);background:var(--surface);color:var(--ink)}
  .clr-strip .clr-mail{border-color:var(--accent);color:var(--accent-active)}
  .g413{margin:18px 0 0;padding:14px 16px;background:#FBF4E1;border:1px solid #F2D38A;border-radius:var(--r-md);text-align:left}
  .g413-head{font-weight:700;font-size:14px;margin:0 0 6px;color:var(--ink)}
  .g413 p{font-size:13.5px;color:var(--ink2);line-height:1.55;margin:0 0 10px}
  /* ⚠️ SR-24 / D1 — CAPACITÉ, PAS LARGEUR. Le texte 413 route sur l'APPAREIL
     (`is-device-*`), pas sur `is-mobile` (devenu la largeur avec SR-24) : le mobile
     est invité à « reprendre sur son ordinateur » et reçoit un pont email
     (`bridge:isMobileDevice`). Gater sur la largeur ferait promettre ce pont à un
     desktop en fenêtre étroite, sans que la charge suive. */
  body.is-device-desktop .g413-mobile{display:none}
  body.is-device-mobile .g413-desktop{display:none}
  .g413-form{display:flex;gap:8px;flex-wrap:wrap}
  .g413-form input{flex:1;min-width:180px;padding:8px 12px;font:inherit;font-size:14px;color:var(--ink);
    background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md)}
  .g413-form input:focus{outline:none;border-color:var(--accent)}
  .g413 .g413-note{font-size:12px;color:var(--ink3);margin:8px 0 0}
  .g413 .g413-ok{font-weight:600;color:var(--ink2);margin:0}
  @media(prefers-reduced-motion:reduce){.fb-btn{transition:none}}

  /* ===== suggestion de langue redesignée — toast (app.js langSuggest, approche B) =====
     Non intrusif (aucun layout shift sur le hero), fermable, refus en localStorage.
     Redesign V1.3 : titre qui VEND l'offre dans la langue cible + 1 phrase + 2 choix
     nets (aller / rester), au lieu d'un lien nu. Bas-droite, plafonné 380px.
     z-index 25 < consent-bar (60) : si coexistence, le bandeau légal prime. */
  .lang-toast{position:fixed;right:12px;bottom:12px;left:auto;z-index:25;max-width:380px;width:calc(100% - 24px);
    display:flex;align-items:flex-start;gap:12px;background:var(--surface);border:1px solid var(--border);
    border-left:3px solid var(--accent);border-radius:var(--r-lg);box-shadow:var(--sh-cardh);padding:14px 14px 14px 15px;
    animation:handoffIn .3s ease}
  .lang-toast .tg{flex:none;width:34px;height:34px;border-radius:50%;background:var(--accent-soft);display:grid;place-items:center;color:var(--accent-active)}
  .lang-toast .tg svg{width:18px;height:18px}
  .lang-toast .tbody{flex:1;min-width:0}
  .lang-toast .tt{font-family:var(--font-display);font-weight:600;font-size:14.5px;letter-spacing:-.01em;color:var(--ink);margin:1px 0 3px;line-height:1.25}
  .lang-toast .ts{font-size:13px;color:var(--ink2);margin:0 0 11px;line-height:1.45}
  .lang-toast .tact{display:inline-flex;align-items:center;gap:6px;background:var(--accent);color:#fff;text-decoration:none;
    font-weight:600;font-size:13.5px;border-radius:var(--r-md);padding:8px 13px;box-shadow:var(--sh-accent)}
  .lang-toast .tact:hover{background:var(--accent-hover)}
  .lang-toast .tkeep{display:inline-block;margin-left:6px;color:var(--ink3);font-size:13px;font-weight:500;background:none;border:none;cursor:pointer;padding:8px 6px}
  .lang-toast .tkeep:hover{color:var(--ink)}
  .lang-toast .tx{position:absolute;top:9px;right:9px;width:26px;height:26px;border:none;background:transparent;color:var(--ink3);
    border-radius:var(--r-sm);cursor:pointer;font-size:14px;display:grid;place-items:center;line-height:1}
  .lang-toast .tx:hover{background:var(--bg2);color:var(--ink)}

  /* ===== sélecteur de langue permanent — pastille header + pied (V1.3) ===== */
  /* Composant partagé (build.js langSwitcher) : bouton pastille « 🌐 Autonyme ▾ »
     + menu déroulant des 5 langues. Rendu build-time (langue courante marquée
     server-side, zéro flash). app.js ne gère que l'ouverture/fermeture. */
  .langwrap{position:relative;display:inline-block}
  .langbtn{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border:1px solid var(--border);background:var(--surface);
    border-radius:999px;font-family:var(--font-sans);font-weight:600;font-size:14px;color:var(--ink);cursor:pointer;box-shadow:var(--sh-sm);transition:.14s ease;line-height:1}
  .langbtn:hover{border-color:var(--ink);background:var(--bg)}
  .langbtn .globe{width:16px;height:16px;color:var(--ink2);flex:none}
  .langbtn .flag{font-size:15px;line-height:1}
  .langbtn .chev{width:12px;height:12px;color:var(--ink3);transition:transform .16s ease}
  .langbtn[aria-expanded="true"]{border-color:var(--ink)}
  .langbtn[aria-expanded="true"] .chev{transform:rotate(180deg)}
  .langmenu{position:absolute;top:calc(100% + 8px);right:0;min-width:210px;background:var(--surface);border:1px solid var(--border);
    border-radius:var(--r-lg);box-shadow:var(--sh-cardh);padding:6px;z-index:40}
  .langmenu[hidden]{display:none}
  .langmenu .mh{font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink3);font-weight:600;padding:8px 10px 6px}
  .langmenu a{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:var(--r-sm);text-decoration:none;color:var(--ink);font-size:14.5px;font-weight:500}
  .langmenu a .flag{font-size:16px;line-height:1;width:20px;text-align:center;flex:none}
  .langmenu a:hover{background:var(--bg2)}
  .langmenu a[aria-current="true"]{background:var(--accent-soft);color:var(--accent-active);font-weight:600}
  .langmenu a[aria-current="true"] .check{margin-left:auto;color:var(--accent);width:15px;height:15px}
  /* déclinaison sombre pour le pied + menu qui s'ouvre vers le HAUT (bas de page) */
  .langbtn.dark{background:rgba(255,255,255,.06);border-color:#2c2825;color:#fff}
  .langbtn.dark:hover{background:rgba(255,255,255,.12);border-color:#4a4440}
  .langbtn.dark .globe{color:#c9c2bc}
  .langbtn.dark .chev{color:#8a837d}
  .footlang{display:flex;flex-wrap:wrap;gap:8px 14px}
  .footlang .langmenu{top:auto;bottom:calc(100% + 8px);left:0;right:auto}
  /* Mobile : loger la pastille validée dans la nav. On retire le bouton CTA
     redondant de la barre (le grand CTA du hero est juste dessous) — cf. la
     maquette validée dont la nav mobile = logo + pastille. La pastille s'ancre
     à droite. ≤560px seulement ; au-dessus, CTA + pastille cohabitent. */
  @media(max-width:560px){
    .nav{gap:8px}
    .nav .links{gap:10px;flex:none}
    .nav .links > .btn{display:none}
    .nav .langwrap{margin-left:auto}
    /* pastille langue mobile : cible tactile ≥44px + présence nette (site 5
       langues, trafic majoritairement mobile — le sélecteur doit sauter aux yeux). */
    .nav .langbtn{min-height:44px;padding:0 14px;font-size:15px;box-shadow:var(--sh-card)}
    .nav .langbtn .flag{font-size:17px}
    .nav .langbtn .globe{width:17px;height:17px}
    .nav .langmenu{min-width:220px}
    .nav .langmenu a{padding:12px 12px;font-size:15.5px}
  }

  /* ===== bandeau de consentement (consent.js — spec Emil §4) ===== */
  .consent-bar{position:fixed;left:12px;right:12px;bottom:12px;z-index:60;max-width:720px;margin:0 auto;
    background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--sh-card);
    padding:16px 18px;font-size:13.5px;color:var(--ink2)}
  .consent-main{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
  .consent-txt{flex:1;min-width:220px;line-height:1.5}
  .consent-txt b{color:var(--ink)}
  .consent-txt a{color:var(--accent-active);text-decoration:none;font-weight:600}
  .consent-txt a:hover{text-decoration:underline}
  .consent-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
  .consent-btn{height:40px;padding:0 18px;border-radius:var(--r-md);font:inherit;font-weight:600;font-size:13.5px;cursor:pointer;border:1px solid transparent;white-space:nowrap}
  .consent-reject{background:var(--surface);color:var(--ink);border-color:var(--border)}
  .consent-reject:hover{background:var(--bg2);border-color:var(--ink)}
  .consent-accept{background:var(--accent);color:#fff;box-shadow:var(--sh-accent)}
  .consent-accept:hover{background:var(--accent-hover)}
  .consent-link{background:none;border:none;color:var(--ink3);font:inherit;font-size:13px;text-decoration:underline;cursor:pointer;padding:0 4px}
  .consent-link:hover{color:var(--ink)}
  .consent-cats{margin-top:14px;padding-top:14px;border-top:1px solid var(--divider);display:flex;flex-direction:column;gap:10px}
  .consent-cat{display:flex;align-items:flex-start;justify-content:space-between;gap:14px}
  .consent-cat > span:first-child{display:flex;flex-direction:column;gap:2px}
  .consent-cat b{color:var(--ink);font-size:13.5px}
  .consent-cat small{color:var(--ink3);font-size:12px;line-height:1.45}
  .consent-cat input[type=checkbox]{width:20px;height:20px;flex:none;margin-top:2px;accent-color:var(--accent);cursor:pointer}
  .consent-always{color:var(--success);font-size:12px;font-weight:600;flex:none;margin-top:2px}
  /* Compactage mobile du bandeau (option A validée fondateur 15/07) : ~15-20px de
     hauteur gagnés (padding resserré, texte 12.5px, boutons 38px) pour libérer le bas
     de l'écran au 1er chargement. AUCUN texte / catégorie / bouton retiré → zéro impact
     légal (validé sans Emil). */
  @media(max-width:560px){
    .consent-bar{left:8px;right:8px;bottom:8px;padding:12px 13px;font-size:12.5px}
    .consent-txt{line-height:1.45}
    .consent-main{align-items:stretch;gap:11px}
    .consent-actions{width:100%}
    .consent-reject,.consent-accept{flex:1;height:38px}
  }

  /* ── Sortie humaine : brief humain (point d'entrée + tunnel + destinations) ──
     Refonte 15/07 (mockups _note-refonte/_note-button/_note-wall/_brief-tunnel,
     4/4 validés par Kevin) :
     (a) .note-inline = entrée visible sous .copybar, carte élevée (option C
     retenue, palette secondaire --accent2 ambre-terracotta pour sortir du
     "tout est rouge") ; (b) revealPostCopy() relocalise CE MÊME élément après
     .post-copy (.is-nudge = relance, pas un doublon) ; (c) le clic ouvre un
     TUNNEL PLEIN ÉCRAN à 2 étapes (email → brief) au lieu d'empiler un mur puis
     un bloc de résultat inline dans la page — .note-actions-primary/-secondary
     (Copier pleine largeur + grille 3 icônes) INCHANGÉS, déjà validés, migrent
     tels quels à l'intérieur de l'étape 2 du tunnel. */
  /* CHANTIER-ALLÉGEMENT (16/07) : .note-inline vit désormais dans Zone C
     (.result-side > #zone-c), plus sous .copybar — la box grossit et empile
     icône+titre / formats / CTA (elle a toute la largeur de la colonne latérale).
     ⚠️ QA-MOBILE-REELLE (16/07) : c'était `flex-direction:column`, ce qui
     contredisait le commentaire d'origine (« flex-wrap plutôt que flex-row ») et
     mettait l'ICÔNE SEULE sur sa ligne, titre+sous-titre dessous — à toutes les
     largeurs, desktop compris. C'est la régression du fix déjà demandé le 15/07
     (« titre/sous-titre À CÔTÉ de l'icône ») : il avait été posé sur .note-inline
     en @media 560 puis perdu quand la box a migré dans .zone-c.
     Correctif : on RESTE en ligne (row) + flex-wrap. Icône (flex:none) et corps
     (flex:1 1 0%) tiennent la 1re ligne ; formats et CTA passent en dessous via
     flex-basis:100%. Pas de flex-direction:column — c'est lui qui isolait l'icône. */
  .zone-c .note-inline{flex-wrap:wrap;align-items:center;margin:0;padding:20px 20px 18px}
  .zone-c .note-inline-body{flex:1 1 0%;min-width:0}
  .zone-c .note-inline-cta{flex-basis:100%;width:100%;justify-content:center;margin-top:14px;padding:11px 16px}
  .note-inline{display:flex;align-items:center;gap:9px;margin:14px 18px 0;padding:14px 16px;
    background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);
    box-shadow:var(--sh-card),0 0 0 1px rgba(255,45,85,.05);
    transform:translateY(-1px);transition:transform .18s ease,box-shadow .18s ease}
  /* SR-04·A — même maladie que les .btn : au doigt, la carte restait SOULEVÉE
     après le tap. Le lift n'a de sens qu'avec un curseur qui survole. */
  @media(hover:hover){
    .note-inline:hover{transform:translateY(-3px);box-shadow:var(--sh-cardh),0 0 0 1px rgba(255,45,85,.07)}
  }

  /* ══ SR-20·D — LA CARTE PREMIUM SE DÉTACHE (17/07, reco du sous-agent) ════════
     Constat Kevin : « elle ressemble à la carte handoff — même blanc, même rayon,
     même ombre. Rien ne dit que c'est autre chose. » Elle était VISIBLE (SR-06·B)
     mais pas DISTINCTE.
     La reco compose DEUX leviers orthogonaux, sans une seule règle nouvelle :
     · LA MATIÈRE (--aside) : la carte cesse d'être une carte blanche posée sur du
       blanc. Fond teinté, plus de bordure, plus d'ombre — elle n'est plus du même
       MATÉRIAU que le handoff. C'est la piste que Kevin n'avait pas demandée, et
       c'est la plus forte : on ne l'a pas décorée, on a changé sa substance.
     · LE NOM (--tag) : une étiquette qui CHEVAUCHE le bord haut (grammaire de la
       <legend> d'un <fieldset>). Une carte dont l'étiquette mord le contour n'est
       plus lue comme la même ESPÈCE d'objet. Et surtout elle NOMME la zone au lieu
       de la peindre : « POUR UN HUMAIN » dit exactement ce que le handoff n'est pas.
     Le liseré (piste initiale de Kevin) n'est PAS repris : sur fond teinté sans
     bordure, un rail de 3px redevient une décoration — il peindrait au lieu de dire.
     Elle reste SECONDAIRE : aucun rouge --accent, le CTA garde --accent2. ══════ */
  .zone-c .note-inline{position:relative;background:var(--accent2-soft);border-color:transparent;
    box-shadow:none;transform:none;margin-top:8px;padding-top:26px}
  @media(hover:hover){
    .zone-c .note-inline:hover{transform:none;box-shadow:inset 0 0 0 1px var(--accent2-shadow)}
  }
  .zone-c .note-inline .note-inline-ic{background:var(--surface)}
  .zone-c .note-inline .note-pile-d{border-color:var(--accent2-soft)} /* la pile garde son chevauchement sur le nouveau fond */
  /* ══ SR-03 « LE SPÉCIMEN » — l'aperçu dans la carte (GO Kevin) ═══════════════
     La carte MONTRE ce qu'est un brief au lieu de le promettre — le principe qui a
     fait gagner la pile, appliqué au niveau au-dessus. Il comble le vide AVEC DU
     SENS, pas avec du padding : mon constat était « étirer une carte trop maigre
     ne donne pas du poids, ça donne du vide ».
     🔒 Contrainte dure : ne jamais laisser croire que le brief est généré. Des
     BARRES, zéro texte réel, une légende qui dit « UN brief ». Inclinaison + fondu
     de coupe = « spécimen », pas « livrable » — le fondu EST l'argument, il empêche
     la vignette de se lire comme un document entier. AUCUNE animation : le shimmer
     est la grammaire du CHARGEMENT, il dirait « votre brief s'écrit ».
     ⚠️ DESKTOP UNIQUEMENT, et c'est mesuré : le vide qu'il comble est causé par
     l'étirement `flex:1` qui n'existe QU'À ≥901px (l.905). Sur mobile la carte a sa
     hauteur naturelle — aucun vide à combler — et la hauteur y est précieuse :
     SR-06·B vient de faire remonter la carte au-dessus du pli, validé sur l'iPhone
     de Kevin. Ajouter ~130px de vignette là annulerait ce gain. On ne paie pas un
     problème desktop avec les pixels du mobile. ══════════════════════════════ */
  .note-prev{display:none} /* mobile : rien — voir ci-dessus */
  @media(min-width:901px){
    .zone-c .note-prev{display:block;width:100%;margin:14px 0 0;box-sizing:border-box}
    .note-spec{position:relative;border:1px solid var(--border);border-radius:var(--r-sm);
      background:var(--surface);box-shadow:0 6px 16px rgba(23,23,22,.09);
      padding:11px 12px 0;transform:rotate(-1.4deg);transform-origin:left center;
      max-height:118px;overflow:hidden}
    .note-spec::after{content:"";position:absolute;left:0;right:0;bottom:0;height:44px;
      background:linear-gradient(rgba(255,255,255,0),var(--surface));pointer-events:none}
    .note-spec-bar{display:flex;align-items:center;gap:5px;margin:0 0 9px}
    .note-spec-dot{flex:none;width:5px;height:5px;border-radius:50%;background:var(--accent2)}
    .note-spec-t{flex:none;width:52px;height:5px;border-radius:3px;background:var(--ink3);opacity:.55}
    .note-spec-h{width:34px;height:5px;border-radius:3px;background:var(--accent2);opacity:.75;margin:10px 0 6px}
    .note-prev-l{height:5px;border-radius:3px;background:var(--border);margin-top:5px}
    .note-prev-cap{margin:9px 0 0;font:400 11px/1.45 var(--font-sans);color:var(--ink3)}
  }
  .note-inline-tag{position:absolute;top:-8px;left:16px;display:inline-flex;align-items:center;
    font:700 9.5px/1 var(--font-sans);letter-spacing:.1em;text-transform:uppercase;
    color:#fff;background:var(--accent2);border-radius:999px;padding:5px 10px;
    box-shadow:0 3px 8px var(--accent2-shadow);white-space:nowrap}
  .note-inline.is-nudge{animation:handoffIn .35s ease .1s backwards}
  .note-inline-ic{flex:none;width:22px;height:22px;color:var(--accent-active);background:var(--accent-soft);
    border-radius:50%;padding:5px;box-sizing:content-box;animation:noteIcBreathe 2.6s ease-in-out infinite}
  .note-inline-body{flex:1;min-width:0}
  .note-inline-t{margin:0;font-size:13px;font-weight:600;color:var(--ink);letter-spacing:-.005em}
  .note-inline-s{margin:1px 0 0;font-size:12px;color:var(--ink2);line-height:1.4}
  /* SR-04·A — ce CTA n'est PAS un `.btn` (c'est un <button class="note-inline-cta">),
     donc il n'héritait NI de la transition NI de rien : il changeait de couleur
     d'un coup sec au survol, et restait collé au doigt. Le seul CTA du chemin
     premium était le moins réactif du site. On lui donne la même grammaire que
     les .btn — sans en faire un .btn (il garde --accent2, son rang secondaire). */
  .note-inline-cta{flex:none;display:inline-flex;align-items:center;gap:5px;font:600 13px var(--font-sans);
    color:#fff;background:var(--accent2);border:none;border-radius:var(--r-sm);cursor:pointer;
    padding:9px 14px;white-space:nowrap;box-shadow:0 10px 24px var(--accent2-shadow);
    transition:background .14s ease,transform .14s ease;-webkit-tap-highlight-color:transparent}
  @media(hover:hover){
    .note-inline-cta:hover{background:var(--accent2-hover);color:#fff;transform:translateY(-1px)}
  }
  .note-inline-cta:active{background:var(--accent2-hover);transform:translateY(1px) scale(.988);transition-duration:90ms}
  .note-inline-cta:focus-visible{outline:none;box-shadow:0 0 0 3px var(--accent2-soft),0 10px 24px var(--accent2-shadow)}
  @media(prefers-reduced-motion:reduce){.note-inline-cta:active{transform:none}}
  .note-inline-cta svg{width:14px;height:14px;flex:none}
  .note-inline-cta:disabled{opacity:.6;cursor:default}
  @keyframes noteIcBreathe{0%,100%{box-shadow:0 0 0 0 var(--accent-soft)}50%{box-shadow:0 0 0 5px var(--accent-soft)}}
  @media(prefers-reduced-motion:reduce){.note-inline-ic{animation:none}.note-inline{transition:none}}

  /* ── « Voilà ce que vous obtenez » — DIRECTION B « LA PILE » (GO fondateur
     16/07, validé sur site/_share-formats-mockup.html contre 2 autres directions).
     Remplace la 1re version (pictos gris alignés) : verdict fondateur « c'est pas
     désirable, c'est sage […] Pas Uncook style » — elle informait sans donner envie.

     LEVIER : grammaire d'affichage empruntée au FACEPILE (pile d'avatars). Des
     pastilles rondes QUI SE CHEVAUCHENT ne sont lues par personne comme 4 boutons
     — le chevauchement rend le tap physiquement ambigu, donc l'œil sait avant même
     d'essayer que c'est de l'AFFICHAGE, pas de l'action. C'est ce qui permet
     d'encaisser le VRAI vert WhatsApp à pleine saturation sans fabriquer une
     barre d'outils : la contrainte « montré, jamais cliquable » est payée par la
     forme elle-même, au lieu d'être combattue.

     ⚠️ CONTRAINTE DURE — MONTRÉ, JAMAIS CLIQUABLE : aucun :hover, aucun
     cursor:pointer, aucune bordure-bouton, aucun <a>/<button> dans le markup
     (renderNoteFormats). Un seul CTA (.note-inline-cta) ouvre le tunnel. Raison
     fondateur : cliquer « WhatsApp » et tomber sur un mur email piégerait
     l'utilisateur — la promesse est visible, le chemin reste unique et honnête.
     Ne JAMAIS rendre ces pastilles interactives « puisqu'elles ont l'air de ».

     Couleurs tierces en variables LOCALES à .note-outs — jamais dans :root : ce
     ne sont pas des tokens Uncook, ce sont les couleurs de marques tierces. */
  .note-outs{width:100%;margin:12px 0 0;box-sizing:border-box;
    --c-copy:#6B6560; --c-mail:var(--accent2); --c-wa:#25D366; --c-pdf:#D8232A}
  .note-outs--pile{display:flex;align-items:center;gap:11px;flex-wrap:wrap}
  .note-pile{display:flex;flex:none;padding-left:2px}
  .note-pile-d{box-sizing:border-box;width:30px;height:30px;border-radius:50%;
    display:grid;place-items:center;margin-left:-8px;color:#fff;
    border:2px solid var(--surface);box-shadow:0 2px 5px rgba(23,23,22,.13)}
  .note-pile-d:first-child{margin-left:0}
  .note-pile-d svg{width:14px;height:14px}
  .note-pile-d--copy{background:var(--c-copy)}
  .note-pile-d--mail{background:var(--c-mail)}
  .note-pile-d--wa{background:var(--c-wa)}
  .note-pile-d--pdf{background:var(--c-pdf)}
  .note-outs-cap{flex:1;min-width:0;margin:0;font:400 11.5px/1.45 var(--font-sans);color:var(--ink2)}
  .note-outs-cap b{font-weight:600;color:var(--ink)}

  /* ── Tunnel du brief humain (plein écran, 2 étapes) — remplace l'ancien
     empilement inline .note-wall→.note-block. Même famille que .modal-backdrop
     (gate.js) mais dimensionné plein écran plutôt que carte centrée à 880px. */
  .brief-tunnel-backdrop{position:fixed;inset:0;z-index:65;background:var(--bg);
    display:flex;flex-direction:column;animation:btFadeIn .28s ease}
  @keyframes btFadeIn{from{opacity:0}to{opacity:1}}
  .bt-topbar{flex:none;display:flex;align-items:center;justify-content:space-between;padding:18px 20px 6px}
  .bt-steps{display:inline-flex;align-items:center;gap:2px;background:var(--surface);border:1px solid var(--border);
    border-radius:999px;padding:5px;box-shadow:var(--sh-sm)}
  .bt-step{display:inline-flex;align-items:center;gap:6px;padding:6px 13px;border-radius:999px;
    font:600 12px var(--font-sans);color:var(--ink3);transition:background .2s,color .2s}
  .bt-step-dot{flex:none;width:7px;height:7px;border-radius:50%;background:var(--border)}
  .bt-step.is-current{background:var(--accent-soft);color:var(--accent-active)}
  .bt-step.is-current .bt-step-dot{background:var(--accent);box-shadow:0 0 0 3px var(--accent-ring)}
  .bt-step.is-done{color:var(--ink2)}
  .bt-step.is-done .bt-step-dot{background:var(--success)}
  .bt-close{flex:none;width:32px;height:32px;border:1px solid var(--border);background:var(--surface);
    border-radius:var(--r-sm);color:var(--ink2);font-size:15px;cursor:pointer;display:grid;place-items:center}
  .bt-close:hover{background:var(--bg2);color:var(--ink)}
  /* ⚠️ SR-15 (16/07) — NE JAMAIS REMETTRE `justify-content:center` ICI.
     `justify-content:center` + `overflow:auto` est un piège CSS classique : quand
     le contenu déborde, le débordement par le bord de DÉBUT (le haut) n'est JAMAIS
     scrollable — le navigateur clampe `scrollTop` à 0. Le haut du contenu est donc
     peint hors du conteneur et INATTEIGNABLE : ni scroll, ni molette, ni clavier.
     Mesuré sur le rendu réel (scrollTop reste 0 dans tous les cas) :
       640px de haut → OK · 600 → déborde mais rien de coupé
       560 → 14px inatteignables · 520 → 34px · 480 → 54px · 400 → 94px
     Qui tombe sous 560px : le TÉLÉPHONE EN PAYSAGE (iPhone 13 couché = ~390px de
     viewport → 94px du titre inatteignables), les petites fenêtres, le split-screen.
     Pas un cas exotique : il suffit de tourner son téléphone sur le mur premium.
     LE FIX : centrage par MARGES AUTO. `margin:auto` centre exactement comme
     justify-content quand ça tient, MAIS laisse le débordement scrollable dans les
     deux sens quand ça ne tient pas. C'est la seule façon de centrer un conteneur
     scrollable sans perdre du contenu.
     `:not(.is-brief)` : l'étape 2 (le brief) est déjà en justify-content:flex-start
     + align-items:stretch — les marges auto la casseraient. */
  .bt-stage{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;
    padding:8px 34px 40px;overflow:auto;text-align:center}
  /* ⚠️ SR-01 (17/07) — MON PROPRE FIX SR-15 CAUSAIT CE DÉFAUT.
     SR-15 avait remplacé `justify-content:center` (qui rendait le haut du contenu
     INATTEIGNABLE au scroll) par un centrage via marges auto : ça centrait quand
     ça tenait ET laissait scroller quand ça débordait. Correct — mais le centrage
     reste un centrage : sur un écran haut, le titre part au MILIEU, et le tunnel
     « s'ouvre sur du rien » (constat Kevin, titre à ~700px du haut).
     On ancre donc EN HAUT. Ça satisfait les deux exigences à la fois :
       · le titre + le champ email sont dans le viewport À L'OUVERTURE, sans scroll
         (demande Kevin) ;
       · rien n'est jamais inatteignable, en paysage comme ailleurs (l'objectif de
         SR-15) — `justify-content:flex-start` + `overflow:auto` scrolle vers le
         BAS, jamais vers un haut coupé.
     Le centrage vertical était une coquetterie ; l'accès immédiat est un besoin. */
  /* ══ SR-02·B « L'ÉTABLI » (17/07, arbitré Kevin) ═════════════════════════════
     Constat du fondateur : « la fenêtre qui présente le brief est là comme si elle
     n'était pas là » — le brief EST le livrable, il devrait être l'objet principal
     de l'écran. Diagnostic du sous-agent, et il est plus juste que « il manque de
     la place » : le vrai coupable est `max-width:640px`. À 640px, TOUTE explication
     ajoutée se paie AVEC le livrable — le brief rétrécit à mesure qu'on l'explique.
     L'établi rend l'explication GRATUITE en vertical : les actions et le contexte
     passent dans un rail latéral, le brief récupère la largeur. Mesuré par l'agent :
     190 → 300px de colonne de lecture.
     Sous 900px, l'établi se replie exactement sur la direction A (une colonne) —
     ce n'est pas deux designs, c'est le même qui respire. ══════════════════════ */
  .bt-stage.is-brief{align-items:stretch;text-align:left;justify-content:flex-start;padding:6px 30px 30px;
    max-width:640px;margin:0 auto;width:100%;box-sizing:border-box}
  @media(min-width:901px){
    .bt-stage.is-brief{max-width:1000px}
    .bt-bench{display:flex;gap:24px;align-items:flex-start}
    .bt-bench-main{flex:1 1 0%;min-width:0}
    /* sticky : le rail suit la lecture d'un brief long au lieu de décrocher */
    .bt-bench-rail{flex:0 0 300px;position:sticky;top:12px}
    .bt-bench-rail .note-actions-primary{margin-top:0}
  }
  .bt-eyebrow{font:700 11px var(--font-sans);letter-spacing:.07em;text-transform:uppercase;color:var(--accent-active);margin:0 0 12px}
  .bt-h1{font-family:var(--font-display);font-weight:700;font-size:27px;letter-spacing:-.03em;margin:0 0 10px;max-width:19ch;line-height:1.15}
  .bt-lead{color:var(--ink2);font-size:14px;line-height:1.6;margin:0 0 24px;max-width:40ch}
  .bt-stage .sub-form,.bt-stage .sub-cases,.bt-stage .sub-google,.bt-stage .sub-or{margin-left:auto;margin-right:auto}
  /* ⚠️ §4 PARCOURS-REEL (16/07) — LE font-size EST OBLIGATOIRE ICI, NE PAS LE RETIRER.
     Retour fondateur : « la ligne One-click unsubscribe est trop grosse par rapport
     au reste ». Ce n'était PAS une question de goût : `.nw-note` n'avait AUCUNE
     règle font-size, nulle part → elle retombait sur le 16px par défaut du
     navigateur, pendant que `.bt-lead` (le message principal) est à 14px. La
     mention de réassurance était donc littéralement le PLUS GROS texte courant de
     l'écran (1,14× le message qu'elle accompagne) — la hiérarchie exactement à
     l'envers, sur un écran de confiance. Un défaut par omission : personne n'a
     écrit « rends la mention légale énorme », il a suffi de ne rien écrire du tout. */
  .bt-stage .nw-note{margin:16px auto 0;max-width:40ch;font-size:12px;line-height:1.5}
  .bt-orb{width:42px;height:42px;border-radius:50%;background:var(--accent);margin:0 auto 18px;animation:orb 1.8s ease-in-out infinite}
  .bt-loading-lead{font-family:var(--font-display);font-weight:700;font-size:21px;letter-spacing:-.02em;margin:0 0 8px}
  .bt-loading-sub{color:var(--ink2);font-size:13px;max-width:34ch}
  .bt-brief-tag{display:inline-flex;align-items:center;gap:6px;font:700 10.5px var(--font-sans);letter-spacing:.06em;
    text-transform:uppercase;color:var(--success);background:var(--success-soft);border:1px solid var(--success-border);
    border-radius:999px;padding:4px 10px;margin:0 0 12px;align-self:flex-start}
  .bt-brief-title{font-family:var(--font-display);font-weight:700;font-size:26px;letter-spacing:-.03em;
    margin:0 0 16px;color:var(--ink)}
  /* ══ SR-19 — LE BRIEF EST UN DOCUMENT, PLUS UN CHAMP (17/07, décidé Kevin) ═══
     Il restait un <textarea> : bordure, bague de focus, poignée de resize — donc
     un champ de saisie, à zéro hiérarchie. Le titre disait « un brief à lire, pas
     à recoller dans une IA » et la FORME disait l'inverse. Un textarea est
     plain-text par nature : il ne PEUT pas porter de titres. D'où le vrai DOM.
     On retire les 3 affordances de champ ; le brief devient l'objet de l'écran. */
  .bt-brief-text{width:100%;box-sizing:border-box;min-height:190px;max-height:300px;overflow:auto;
    padding:22px 24px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);
    font:16px/1.72 var(--font-brief);letter-spacing:.002em;color:#2b2925;white-space:pre-wrap}
  .bt-brief-doc{white-space:normal;border:none;background:transparent;padding:4px 2px 0;
    max-height:none;overflow:visible}
  /* Les en-têtes — le CUMUL demandé par Kevin : le traitement structurel (œil
     composé, filet, espacement) ET le gras par-dessus. Ils doivent « frapper ».
     Sans-serif sur les titres / serif sur le corps : le contraste dit « ceci est
     une charpente, cela est de la prose ». */
  .bf-h{margin:26px 0 8px;font:700 11.5px/1.3 var(--font-sans);letter-spacing:.1em;
    text-transform:uppercase;color:var(--ink);display:flex;align-items:center;gap:10px}
  .bf-h::after{content:"";flex:1;height:1px;background:var(--divider)}
  .bf-h:first-child{margin-top:0}
  .bf-p{margin:0 0 12px;font:16px/1.72 var(--font-brief);color:#2b2925}
  .bf-ul{margin:0 0 14px;padding:0;list-style:none}
  .bf-ul li{position:relative;padding-left:18px;margin:0 0 7px;font:16px/1.68 var(--font-brief);color:#2b2925}
  .bf-ul li::before{content:"";position:absolute;left:3px;top:.62em;width:5px;height:5px;border-radius:50%;
    background:var(--accent2)}
  .bt-brief-sub{margin:-8px 0 18px;font:14px/1.5 var(--font-sans);color:var(--ink2);max-width:52ch}

  /* ══ SR-17·B « ET APRÈS ? » — la sortie du brief (17/07, arbitré Kevin) ═══════
     La page était un CUL-DE-SAC : aucune sortie hors « fermer ». Constat mesuré
     par le sous-agent, et il est pire que « pas engageants » : l'action UNIQUE
     était à ×0,75 de la duplicate — 25% PLUS PETITE. La hiérarchie n'était pas
     absente, elle était INVERSÉE, et c'est la LONGUEUR DE CHAÎNE qui l'avait
     décidé (13 caractères contre 22). Personne ne l'a choisi.
     POIDS INÉGAL, DÉCIDÉ PAR LE CODE : « Revenir » = closeTunnel(), déjà offert
     3 fois (×, backdrop, Échap). « Reprendre une autre conversation » = la SEULE
     porte vers un 2e usage, zéro affordance ailleurs. Une 4e copie d'une sortie
     ne peut pas primer sur l'unique chemin vers une deuxième utilisation.
     Tuile teintée et NON pastille pleine : les pastilles pleines sont la famille
     des DESTINATIONS (marques tierces, cf. .note-pile). Une sortie n'est pas une
     destination — un disque en ferait un 4e destinataire. Même famille, rang
     différent. Cibles tactiles ≥44px (elles étaient à 27px). ══════════════════ */
  .bt-next{margin:22px 0 0;padding:16px 0 0;border-top:1px solid var(--divider)}
  .bt-next-h{margin:0 0 10px;font:700 11px var(--font-sans);letter-spacing:.09em;
    text-transform:uppercase;color:var(--ink3)}
  .bt-next-go{display:flex;align-items:center;gap:12px;width:100%;min-height:44px;
    padding:13px 14px;text-align:left;cursor:pointer;border:1px solid var(--accent2-soft);
    border-left:3px solid var(--accent2);border-radius:var(--r-md);background:var(--accent2-soft);
    transition:background .14s ease,transform .14s ease,border-color .14s ease;
    -webkit-tap-highlight-color:transparent}
  @media(hover:hover){.bt-next-go:hover{background:#FFE7D6;border-color:var(--accent2);transform:translateY(-1px)}}
  .bt-next-go:active{transform:translateY(1px) scale(.994);transition-duration:90ms}
  .bt-next-go:focus-visible{outline:none;box-shadow:0 0 0 3px var(--accent2-shadow)}
  .bt-next-go-ic{flex:none;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;
    background:var(--accent2);color:#fff}
  .bt-next-go-ic svg{width:15px;height:15px}
  .bt-next-go-b{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
  .bt-next-go-t{font:600 14px var(--font-sans);color:var(--ink)}
  .bt-next-go-s{font:12.5px/1.4 var(--font-sans);color:var(--ink2)}
  .bt-next-go-ar{flex:none;width:15px;height:15px;color:var(--accent2)}
  /* La sortie discrète : un lien, pas un bouton — c'est sa 4e occurrence. */
  .bt-next-back{display:block;width:100%;min-height:44px;margin:4px 0 0;padding:10px;
    background:none;border:none;cursor:pointer;font:500 13px var(--font-sans);color:var(--ink3);
    transition:color .14s ease;-webkit-tap-highlight-color:transparent}
  @media(hover:hover){.bt-next-back:hover{color:var(--ink)}}
  .bt-next-back:focus-visible{outline:none;color:var(--ink);box-shadow:0 0 0 3px var(--accent-ring);border-radius:var(--r-sm)}
  @media(prefers-reduced-motion:reduce){.bt-next-go:active,.bt-next-go:hover{transform:none}}
  .bt-brief-foot{margin-top:16px}
  .bt-brief-foot .note-actions-primary{margin:0 0 8px}
  body.tunnel-open{overflow:hidden}

  .note-actions-primary{display:flex;margin:12px 0 8px}
  .note-actions-primary .btn{width:100%;height:48px;font-size:14.5px;display:inline-flex;align-items:center;justify-content:center;gap:8px}
  .note-actions-primary svg{width:16px;height:16px;flex:none}
  .note-actions-secondary{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
  .note-act{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
    padding:12px 8px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);
    color:var(--ink);font:600 12.5px var(--font-sans);cursor:pointer;text-decoration:none;
    transition:border-color .14s,background .14s,transform .14s}
  .note-act:hover{border-color:var(--ink2);background:var(--bg2);transform:translateY(-1px)}
  .note-act-ic{width:19px;height:19px;color:var(--ink2)}
  .note-act.wa:hover .note-act-ic{color:#25D366}
  .note-act.mail:hover .note-act-ic{color:var(--accent-active)}
  .note-deliver{width:100%;margin:10px 0 0}
  #note-email{margin:14px 0 0}
  .note-sent{margin:10px 0 0;font-size:12.5px;line-height:1.45;color:var(--ink2);display:flex;align-items:center;gap:6px}
  .note-sent::before{content:"✓";color:var(--accent);font-weight:700}
  @media(max-width:560px){
    /* ⚠️ AUTO-ZOOM iOS — RÈGLE DURE, NE PAS DESCENDRE SOUS 16px.
       Safari iOS zoome AUTOMATIQUEMENT le viewport au focus de TOUT contrôle de
       formulaire (input, textarea, select) dont le font-size est < 16px. Sur un
       overlay position:fixed;inset:0 (tunnel, mur gate.js), le panneau ne suit PAS
       le visual viewport quand Safari zoome → il devient plus large que l'écran
       zoomé → bord droit coupé net. C'est un débordement qu'AUCUN viewport simulé
       (375px dans un moteur desktop) ne peut reproduire — d'où l'iPhone de Kevin
       qui le voit et pas notre QA.
       16px n'est PAS un choix typographique ici : c'est le seuil exact qui désarme
       le zoom. Tout passage sous 16px ré-ouvre le bug.

       ⚠️⚠️ CORRECTIF DU CORRECTIF (16/07, même journée) : la V1 de cette règle
       ÉNUMÉRAIT les sélecteurs (`.sub-email`, `input[type=email]`) — et ratait donc
       le <textarea id="note-text"> du brief, à 14,5px, dans le MÊME overlay, sur le
       MÊME chemin premium : taper dedans sur iPhone rouvrait exactement le bug que
       cette règle prétendait tuer. iOS auto-zoome les textarea aussi.
       LA LEÇON, la même que `--sub-w` scopé sur `.sub-block` : une énumération
       corrige l'INSTANCE, un sélecteur large corrige la CLASSE. On cible donc
       TOUT contrôle de formulaire des overlays — pas une liste qu'il faudra
       penser à rallonger au prochain champ ajouté (personne n'y pensera). */
    .brief-tunnel-backdrop input,.brief-tunnel-backdrop textarea,.brief-tunnel-backdrop select,
    .uck-gate-modal input,.uck-gate-modal textarea,.uck-gate-modal select,
    .note-wall input,.note-wall textarea,.sub-email{font-size:16px}
    .note-inline{margin:12px 12px 0;flex-wrap:wrap;padding:13px 14px}
    .note-inline-body{flex:1 1 0%;min-width:0} /* basis 0%, PAS auto : avec un flex-wrap actif, un basis "auto" prend la largeur max-content du texte pour la décision de retour à la ligne (min-width:0 seul ne suffit pas) — vérifié en QA réelle 375px, l'icône et le texte finissaient sur 2 lignes distinctes avec "auto" */
    .note-inline-cta{flex-basis:100%;justify-content:center;margin-top:6px;padding:9px 4px}
    .note-actions-secondary{gap:7px}
    .note-act{padding:10px 4px;font-size:11.5px}
    .bt-topbar{padding:16px 16px 4px}
    .bt-step{font-size:11px;padding:5px 10px}
    .bt-close{width:28px;height:28px}
    .bt-stage{padding:8px 22px 30px}
    .bt-stage.is-brief{padding:6px 18px 22px}
    .bt-h1{font-size:22px}
    .bt-lead{font-size:13px}
    .bt-brief-title{font-size:20px}
    /* SR-19 : le brief garde 16px sur mobile (spec Kevin « 16px/1.72 »). Il était
       rabaissé à 14,5px pour la densité — mais c'est le LIVRABLE, pas de la chrome.
       Bonus : ce n'est plus un contrôle de formulaire (<article>), donc l'auto-zoom
       iOS de SR-13 ne peut plus s'y déclencher — le 16px est ici un choix de
       lisibilité, plus une contrainte. */
    .bt-brief-text{padding:16px}
    .bf-p,.bf-ul li{font-size:15.5px;line-height:1.66}
    .bf-h{margin-top:22px}
    .bt-brief-sub{font-size:13px}
  }
  /* ⚠️ SR-19 — LE PDF IMPRIMAIT UNE PAGE BLANCHE, ET C'ÉTAIT MA FAUTE.
     Cette règle masque TOUT (`body *{visibility:hidden}`) puis ne révèle que
     `#note-block`… un élément QUI N'EXISTE PLUS : mon propre refactor du tunnel
     l'a remplacé par `.bt-stage`/`#note-text`, et j'ai laissé le sélecteur pointer
     dans le vide. Résultat : le bouton PDF — une des 4 destinations du chemin
     premium — ouvrait une impression VIDE. Aucune erreur, aucun warning : un
     sélecteur qui ne matche rien est parfaitement légal en CSS. 8e occurrence du
     fil rouge, et la seule que j'ai écrite moi-même.
     On cible désormais l'objet réel, et on masque la chrome (barre d'étapes,
     actions) qui n'a aucun sens sur papier. */
  @media print{
    body *{visibility:hidden}
    .bt-stage.is-brief,.bt-stage.is-brief *{visibility:visible}
    .bt-stage.is-brief{position:absolute;left:0;top:0;width:100%;max-width:none;padding:0;overflow:visible}
    .note-inline,.brief-tunnel-backdrop .bt-topbar,.bt-brief-foot,
    .note-deliver,#note-email,.note-sent{display:none!important}
    .bt-brief-text{border:none;min-height:auto;max-height:none;overflow:visible;padding:0;background:none}
    .bf-h::after{display:none} /* le filet ne sert à rien à l'impression */
  }