@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:100 900;
 font-display:swap;src:url('/assets/fonts/HankenGrotesk-var.woff2') format('woff2-variations'),
 url('/assets/fonts/HankenGrotesk-var.woff2') format('woff2')}
@font-face{font-family:'Hanken Grotesk';font-style:italic;font-weight:100 900;
 font-display:swap;src:url('/assets/fonts/HankenGrotesk-var-italic.woff2') format('woff2-variations'),
 url('/assets/fonts/HankenGrotesk-var-italic.woff2') format('woff2')}
/* ============================================================
   DUBAI DÉCRYPTE · SYSTÈME VISUEL V2
   Concept : LA QUALIFICATION. Une information entre brute et
   ressort qualifiée. Chaque état a une MATIÈRE, pas seulement
   une couleur : c'est ce qui rend la grammaire reconnaissable
   en noir et blanc, sur un Reel, dans un PDF ou sur un écran.
   ============================================================ */
:root{
  /* Encres. Le bleu nuit descend plus bas qu'en V1 pour donner
     un vrai noir bleuté de fond de scène. */
  --ink-900:#060d18; --ink-800:#0a1524; --ink-700:#0f2034; --ink-600:#16304c;
  --ink-500:#24425f; --ink-400:#4a6076;
  /* Papiers chauds. */
  --paper:#faf7f0; --paper-2:#f4efe4; --sand:#e9e0d0; --sand-2:#dcd1bd;
  --line:#ddd6c8; --line-dark:#ffffff1f;
  /* Un seul accent : l'orange de la série vidéo. Il ne décore pas et ne
     célèbre rien : il ne marque que ce qui demande une action ou ce qui
     n'est pas encore documenté. C'est ce qui le rend lisible comme un
     signal plutôt que comme un ornement. */
  --mark:#d9662e; --mark-soft:#f08a4e; --mark-glow:#d9662e1c;
  --muted:#5c6878; --muted-dark:#8fa1b4;

  /* Matières des quatre natures. */
  --fact-ink:#0a1524; --fact-bg:#0a1524; --fact-fg:#faf7f0;
  --claim-ink:#16304c; --claim-line:#16304c80;
  --assum-ink:#4a6076;
  --unknown-ink:#c25a24;

  --r-xs:2px; --r-sm:3px; --r-md:6px; --r-lg:10px;
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px;
  --s7:48px; --s8:72px; --s9:112px; --s10:160px;
  --max:1240px;

  --sans:'Hanken Grotesk',-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif;
  --brand:'Newsreader',Georgia,'Times New Roman',serif;
  --grot:'Hanken Grotesk',var(--sans);
  --mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --serif:'Newsreader',Georgia,'Times New Roman',serif;
  /* Les chiffres ont leur propre voix : tabulaires, serrés, larges. */
  --num:'Manrope','DM Sans',Arial,sans-serif;

  --e-out:cubic-bezier(.22,1,.36,1);
  --e-io:cubic-bezier(.65,0,.35,1);
  --t-fast:180ms; --t-base:320ms; --t-slow:680ms;
}

/* ---------- Échelle typographique ----------
   Trois registres qui ne se mélangent jamais :
   DISPLAY (éditorial, serif italique en accent),
   DATA (chiffres tabulaires, très grands ou très petits),
   LABEL (capitales espacées, la voix du système). */
.t-note{font:400 13px/1.55 var(--sans);color:var(--muted)}
.t-label{font:600 10.5px/1.3 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.t-num{font:500 clamp(46px,8vw,104px)/.9 var(--brand);letter-spacing:-.05em;font-variant-numeric:proportional-nums;font-feature-settings:'ss01'}
.t-num-sm{font:600 28px/1 var(--brand);letter-spacing:-.035em;font-variant-numeric:proportional-nums}
.on-dark .t-label,.on-dark .t-note{color:var(--muted-dark)}

/* ---------- LES QUATRE NATURES · la signature ----------
   Chacune porte une matière différente, lisible même sans couleur. */
.q{display:inline-flex;vertical-align:middle;align-items:center;gap:7px;padding:5px 9px;max-width:100%;
   font:600 10.5px/1.15 var(--sans);letter-spacing:.12em;text-transform:uppercase;
   border-radius:var(--r-xs)}
.q::before{content:'';width:9px;height:9px;flex:none}

/* FAIT : plein, verrouillé. Le carré est rempli, un trait le scelle. */
.q-fact{background:var(--fact-bg);color:var(--fact-fg)}
.q-fact::before{background:var(--fact-fg)}

/* AFFIRMATION : déclarée, pas verrouillée. Contour tireté, intérieur vide. */
.q-claim{color:var(--claim-ink);border:1px dashed var(--claim-line);background:transparent}
.q-claim::before{border:1.5px dashed var(--claim-ink);background:transparent}

/* HYPOTHÈSE : conditionnelle. Hachures obliques. */
.q-assum{color:var(--assum-ink);border:1px solid #7a5a2340;
  background:repeating-linear-gradient(135deg,#4a607614 0 3px,transparent 3px 7px)}
.q-assum::before{background:repeating-linear-gradient(135deg,var(--assum-ink) 0 1.5px,transparent 1.5px 3.5px)}

/* INCONNU : l'absence rendue visible. Pointillé, creux. */
.q-unknown{color:var(--unknown-ink);border:1px dotted #c25a2499;background:var(--mark-glow)}
.q-unknown::before{border:1.5px dotted var(--unknown-ink)}

.on-dark .q-claim{color:#a9c2dc;border-color:#a9c2dc66}
.on-dark .q-claim::before{border-color:#a9c2dc}
.on-dark .q-assum{color:#9fb4c8;border-color:#9fb4c840;
  background:repeating-linear-gradient(135deg,#9fb4c818 0 3px,transparent 3px 7px)}
.on-dark .q-assum::before{background:repeating-linear-gradient(135deg,#9fb4c8 0 1.5px,transparent 1.5px 3.5px)}
.on-dark .q-unknown{color:var(--mark-soft);border-color:#f08a4e7a;background:#f08a4e14}
.on-dark .q-unknown::before{border-color:var(--mark-soft)}
.on-dark .q-fact{background:var(--paper);color:var(--ink-900)}

/* ---------- Surfaces ---------- */
.surface{background:#fff;border:1px solid var(--line);border-radius:var(--r-md)}
.on-dark .surface{background:#ffffff08;border-color:var(--line-dark);backdrop-filter:blur(6px)}
.raised{box-shadow:0 1px 2px #0a152408,0 12px 28px -14px #0a15242e}
.floating{box-shadow:0 2px 6px #0a15240f,0 28px 60px -28px #0a152459}

/* Le fond de scène sombre : une grille de données, pas un dégradé de startup. */

/* ---------- Contrôles ---------- */
.b{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;
  padding:0 20px;border-radius:var(--r-sm);font:600 14px/1 var(--sans);letter-spacing:.01em;
  text-decoration:none;cursor:pointer;border:1px solid transparent;
  transition:transform var(--t-fast) var(--e-out),box-shadow var(--t-fast),background var(--t-fast)}
.b-ghost{border-color:var(--line);color:var(--ink-800);background:transparent}
.on-dark .b-ghost{border-color:#ffffff30;color:var(--paper)}
.b-ghost:hover{border-color:var(--ink-800)}
.b:focus-visible,a:focus-visible,button:focus-visible{outline:2px solid var(--mark);outline-offset:3px}

/* ---------- Le rail de qualification · mécanique de marque ---------- */
.rail{position:relative;padding-left:26px}
.rail::before{content:'';position:absolute;left:8px;top:2px;bottom:2px;width:1px;background:var(--line)}
.on-dark .rail::before{background:#ffffff26}
.rail>li{position:relative;list-style:none;padding:11px 0}
.rail>li::before{content:'';position:absolute;left:-22px;top:17px;width:7px;height:7px;border-radius:50%;
  background:var(--paper);border:1.5px solid var(--line)}
.on-dark .rail>li::before{background:var(--ink-900);border-color:#ffffff40}
.rail>li[data-q="fact"]::before{background:var(--ink-800);border-color:var(--ink-800)}
.on-dark .rail>li[data-q="fact"]::before{background:var(--paper);border-color:var(--paper)}
/* Le vermillon ne marque que l'action restante. */
.rail>li[data-q="todo"]::before,.on-dark .rail>li[data-q="todo"]::before{
  background:var(--mark);border-color:var(--mark);box-shadow:0 0 0 4px var(--mark-glow)}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ============================================================
   V2 · PROFONDEUR ET MISE EN SCÈNE DES ÉCRANS CONNECTÉS
   Le motion ne décore pas : il montre une structure qui existait
   déjà avant qu'on entre. Tout est coupé si l'utilisateur a
   demandé moins d'animations.
   ============================================================ */

/* Le terminal : une barre d'état fine, la voix du système. */
.term{display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  font:600 10.5px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.on-dark .term{color:#7d90a4}
.term .dot{width:5px;height:5px;border-radius:50%;background:var(--mark);flex:none;
  box-shadow:0 0 0 3px var(--mark-glow)}
.term .sep{width:1px;height:11px;background:currentColor;opacity:.3}
/* Le titre de page EST le premier segment du terminal : un seul h1,
   visible, sans ajouter de bruit au-dessus de la composition. */
.term h1{font:inherit;letter-spacing:inherit;text-transform:inherit;color:inherit;margin:0}

/* Le couloir : la structure qui attend, vue en profondeur.
   Chaque plan recule, s'assombrit et perd en netteté. */
.depth{position:relative;perspective:1400px}
.depth-stack{display:grid;gap:10px;transform-style:preserve-3d}
.depth-layer{border:1px solid var(--line-dark);border-radius:var(--r-md);padding:14px 18px;
  background:#ffffff07;display:flex;justify-content:space-between;align-items:center;gap:14px;
  transform-origin:50% 0}
.depth-layer:nth-child(1){opacity:1}
.depth-layer:nth-child(2){opacity:.62;transform:scale(.982) translateZ(-26px)}
.depth-layer:nth-child(3){opacity:.4;transform:scale(.964) translateZ(-52px)}
.depth-layer:nth-child(4){opacity:.24;transform:scale(.946) translateZ(-78px)}
.depth-layer:nth-child(5){opacity:.13;transform:scale(.928) translateZ(-104px)}
.depth-fade{position:absolute;left:0;right:0;bottom:-2px;height:120px;pointer-events:none;
  background:linear-gradient(transparent,var(--ink-900))}

/* Le seuil : les plans se posent l'un après l'autre. Une fois. */
@keyframes settle{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes settleBack{from{opacity:0;transform:translateY(14px) scale(.96)}}
@keyframes ruleIn{from{width:0}to{width:34px}}
.rise{animation:settle .7s var(--e-out) both}
.rise-1{animation-delay:.05s}.rise-2{animation-delay:.16s}.rise-3{animation-delay:.28s}
.rise-4{animation-delay:.4s}
.rule-in{animation:ruleIn .8s var(--e-out) both;animation-delay:.1s}
.depth-layer{animation:settleBack .7s var(--e-out) both}
.depth-layer:nth-child(1){animation-delay:.34s}
.depth-layer:nth-child(2){animation-delay:.42s}
.depth-layer:nth-child(3){animation-delay:.5s}
.depth-layer:nth-child(4){animation-delay:.58s}
.depth-layer:nth-child(5){animation-delay:.66s}

/* Les portes du seuil : elles réagissent, sans gadget. */
.door{position:relative;overflow:hidden;cursor:pointer;text-align:left;
  transition:border-color var(--t-base) var(--e-out),background var(--t-base),transform var(--t-base) var(--e-out)}
.door::after{content:'';position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--mark);
  transform:scaleX(0);transform-origin:0 50%;transition:transform var(--t-base) var(--e-out)}
.door:hover{transform:translateY(-2px);background:#ffffff12;border-color:#ffffff45}
.door:hover::after{transform:scaleX(1)}

/* La barre de composition de l'Indice : chaque segment est un critère,
   pas un pourcentage décoratif. Survol : le critère se nomme. */
.idx{display:flex;gap:3px;height:10px}
.idx i{display:block;border-radius:2px;background:var(--sand);transition:background var(--t-fast)}
.on-dark .idx i{background:#ffffff1f}
.on-dark .idx i.on{background:var(--paper)}
.idx i.on{background:var(--ink-800)}
.idx i.next{background:repeating-linear-gradient(135deg,var(--mark) 0 2px,transparent 2px 5px)}

/* Compteur de natures en bande, sans débordement. */
.natband{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;background:#fff}
.natband>div{padding:16px;border-right:1px solid var(--line)}
.natband>div:last-child{border-right:0}
.natband>div.act{background:var(--mark-glow)}
.on-dark .natband{background:#ffffff08;border-color:var(--line-dark)}
.on-dark .natband>div{border-color:var(--line-dark)}

/* Une carte qui réagit au survol : le dossier a l'air vivant. */
.lift{transition:transform var(--t-base) var(--e-out),box-shadow var(--t-base)}
.lift:hover{transform:translateY(-2px);box-shadow:0 2px 6px #0a15240f,0 26px 50px -26px #0a152459}

@media (prefers-reduced-motion:reduce){
 .rise,.depth-layer,.rule-in{animation:none!important}
 .depth-layer{opacity:1!important;transform:none!important}
}

@media(max-width:760px){
 /* Le couloir de profondeur se met à plat : les plans s'empilent
    verticalement au lieu de forcer la largeur. */
 .depth,.depth-stack{perspective:none;transform-style:flat}
 .depth-layer{flex-direction:column;align-items:flex-start;gap:10px}
 .depth-layer>*{max-width:100%}
 .depth-layer .idx{width:100%!important}
 .depth-layer span[style*="display:flex"]{flex-wrap:wrap}
 .rail>li>div[style*="justify-content:space-between"]{flex-wrap:wrap;gap:4px!important}
 .rail>li>div[style*="justify-content:space-between"]>span:first-child{flex:1 1 100%}
 .natband{grid-template-columns:repeat(2,minmax(0,1fr))}
 .natband>div:nth-child(2n){border-right:0}
 .natband>div:nth-child(-n+2){border-bottom:1px solid var(--line)}
 .on-dark .natband>div:nth-child(-n+2){border-color:var(--line-dark)}
 .term{gap:8px;font-size:9.5px}
 .term .sep{display:none}
 .depth-layer{flex-wrap:wrap;gap:8px}
 .depth-layer,.depth-stack{transform:none!important}
 .depth-layer:nth-child(n){opacity:1}
 .depth-layer:nth-child(3){opacity:.55}
 .depth-layer:nth-child(4){opacity:.35}
 .depth-layer:nth-child(5){opacity:.2}
}

@media(max-width:900px){
 #p4 [style*="grid-template-columns"],#p5 [style*="grid-template-columns"],
 #p6 [style*="grid-template-columns"]{grid-template-columns:minmax(0,1fr)!important}
 #p4 .natband,#p6 .natband{grid-template-columns:repeat(2,minmax(0,1fr))!important}
 #p4 [style*="repeat(3,minmax"]{grid-template-columns:minmax(0,1fr)!important}
 #p5 .door{width:100%}
}

/* ============================================================
   PROPAGATION · le système V2 appliqué aux classes existantes.
   Aucune structure HTML n'est modifiée : le funnel, les CTA, la
   navigation et la capture restent exactement où ils sont.
   ============================================================ */

body{background:var(--paper);color:var(--ink-800)}

/* Titres : la hiérarchie devient franche, l'italique serif reste l'accent. */
h1{font:400 clamp(30px,4.6vw,58px)/1.06 var(--brand);letter-spacing:-.025em}
h2{font:400 clamp(24px,3.1vw,38px)/1.14 var(--brand);letter-spacing:-.02em}
h3{font:600 19px/1.28 var(--brand);letter-spacing:-.01em}
h1 em,h2 em{font-family:var(--serif);font-style:italic;font-weight:400}

/* Les micro-libellés parlent la même langue partout. */
.eyebrow,.stat-label,.section-label{font:600 10.5px/1.3 var(--sans)!important;
  letter-spacing:.16em!important;text-transform:uppercase!important;color:var(--muted)}
.note,.pilot-note{font:400 13px/1.55 var(--sans);color:var(--muted)}

/* Les chiffres deviennent un objet graphique. */
.result-big{font:500 clamp(44px,7vw,92px)/.92 var(--brand)!important;
  letter-spacing:-.05em!important;color:var(--ink-900)!important}

/* Surfaces : une seule définition de carte sur tout le site. */
.card,.course-card{background:#fff;border:1px solid var(--line);
  border-radius:var(--r-md);box-shadow:0 1px 2px #0a152408,0 12px 28px -16px #0a15242e}

/* Contrôles : une hauteur, un rayon, un comportement. */
.btn{min-height:46px;border-radius:var(--r-sm);font:600 14px/1 var(--sans);
  letter-spacing:.01em;padding:0 20px;
  transition:transform var(--t-fast) var(--e-out),box-shadow var(--t-fast),background var(--t-fast)}
.btn:not(.outline):not(.light):not(.text-link){background:var(--ink-900);color:var(--paper);border:1px solid var(--ink-900)}
.btn:not(.outline):not(.light):hover{transform:translateY(-1px);box-shadow:0 10px 22px -10px #0a1524a0}
.btn.outline{background:transparent;border:1px solid var(--line);color:var(--ink-800)}
.btn.outline:hover{border-color:var(--ink-800)}
:focus-visible{outline:2px solid var(--mark);outline-offset:3px}

/* Champs : même hauteur que les boutons, même rayon. */
.field input,.field select,.field textarea,input[type=text],input[type=email],input[type=number]{
  min-height:46px;border-radius:var(--r-sm);border:1px solid var(--line);
  background:#fff;padding:0 14px;font:400 15px/1 var(--sans);color:var(--ink-800)}
.field textarea{padding:12px 14px;line-height:1.55;min-height:96px}
.field input:focus,.field textarea:focus,.field select:focus{border-color:var(--ink-600);outline:none;
  box-shadow:0 0 0 3px #16304c1a}

/* Tableaux de données : chiffres alignés, filets discrets. */
table{border-collapse:collapse;width:100%}
th,td{border-color:var(--line)}
td:not(:first-child),th:not(:first-child){font-variant-numeric:tabular-nums}

/* Le premier écart, déjà en production, prend la matière du système. */
.first-gap{border:1px solid var(--line);border-left:3px solid var(--mark);
  background:var(--mark-glow);border-radius:var(--r-md);padding:18px 20px}
.first-gap 

/* Rythme vertical : une seule échelle, plus de marges au hasard. */
section+section{margin-top:0}
.card+.card{margin-top:var(--s4)}

/* ============================================================
   QA · corrections issues de la passe sur 7 largeurs × 18 pages
   ============================================================ */

/* 126 cibles tactiles sous 40 px, presque toutes dans les pieds de page et
   les barres d'onglets. Sur un produit qui vise d'abord du trafic mobile,
   c'est le détail qui fait amateur avant même qu'on lise une ligne. */
footer a,.footer-links a,.welcome-footer a,nav a,.tabs a,.journey-tabs a,
.text-link,.login-link,.side-link{
  display:inline-flex;align-items:center;min-height:44px}
footer nav,.welcome-footer nav{display:flex;flex-wrap:wrap;gap:0 18px;align-items:center}

/* Les barres d'onglets défilent au lieu de pousser hors écran, avec une
   amorce visuelle pour qu'on sache qu'il y a une suite. */
.tabs,.journey-tabs{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;
  -webkit-overflow-scrolling:touch;scroll-snap-type:x proximity;
  mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent)}
.tabs::-webkit-scrollbar,.journey-tabs::-webkit-scrollbar{display:none}
.tabs>a,.journey-tabs>a{white-space:nowrap;flex:none;scroll-snap-align:start;padding:0 14px}

/* Les tableaux de données restent dans leur conteneur défilant, jamais
   au-delà de la page. */
.offer-table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;
  mask-image:linear-gradient(90deg,#000 calc(100% - 24px),transparent)}
.offer-table-wrap>table{min-width:520px}

/* Zones sûres iOS : rien ne se colle au bord ni ne passe sous l'encoche. */
@supports(padding:env(safe-area-inset-left)){
 .wrap,.workspace,main,footer{
  padding-left:max(var(--s4),env(safe-area-inset-left));
  padding-right:max(var(--s4),env(safe-area-inset-right))}
 .home-mobile-nav{padding-bottom:max(var(--s4),env(safe-area-inset-bottom))}
}

/* Aucun élément collant ne doit recouvrir du contenu au scroll. */
.topbar{z-index:40}
.home-mobile-nav{z-index:60}
.drawer-shade{z-index:50}

/* Très petits écrans : le texte ne se coupe pas, il se replie. */
@media(max-width:360px){
 h1{font-size:clamp(26px,8vw,34px)}
 .result-big{font-size:clamp(38px,12vw,52px)!important}
 .btn{width:100%;padding:0 14px}
 .card{padding:18px!important}
 td,th{padding:8px 10px}
}

/* Le pied de page anglais alignait ses liens légaux sur une seule ligne :
   « Refunds » sortait de l'écran de 48 px sous 430 px. */

/* ============================================================
   V2 · LA GRAMMAIRE DANS LE PRODUIT
   Les composants ci-dessus ne vivaient que dans la page de
   prototype. Ce bloc les relie aux écrans réels. Règle tenue
   partout : le vermillon ne sort que pour une action à faire
   ou un inconnu à résoudre, et jamais deux fois pour la même
   chose sur un même écran.
   ============================================================ */

/* Une surface qui doit se lire comme un instrument, pas comme une page :
   filet supérieur, barre terminale, angles serrés. Réservée au dossier,
   au premier écart, aux dix minutes et aux zones d'ombre. */
.tool-surface{position:relative;border-radius:var(--r-md)}
.tool-surface::before{content:'';position:absolute;left:0;right:0;top:0;height:2px;
  background:linear-gradient(90deg,var(--ink-800),transparent 62%);border-radius:var(--r-md) var(--r-md) 0 0}
.tool-surface>.term{margin-bottom:var(--s5)}
.tool-surface>h3{margin-top:0}

/* L'en-tête de dossier. */

/* L'Indice traité comme un événement chiffré, pas comme une ligne de texte. */
.idx-panel{display:block}
.idx-head{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--s4);
  flex-wrap:wrap;margin:0 0 var(--s4);font-weight:400}
.idx-score{display:flex;align-items:baseline;gap:6px}
.idx-num{font:500 clamp(54px,9vw,104px)/.86 var(--brand);letter-spacing:-.05em;color:var(--ink-900)}
.idx-out{font:600 18px/1 var(--brand);color:var(--muted)}
.idx-panel .idx{height:12px;margin-bottom:10px}
.idx-legend{margin:0 0 var(--s5)}
.idx-rail,.move-rail{margin:var(--s5) 0}
.rail-row{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s4)}
.rail-row>span:first-child{font:400 15px/1.5 var(--sans)}
.idx-rail li[data-q="todo"] .rail-row>span:first-child{color:var(--ink-900);font-weight:600}
.move-rail li h4{margin:6px 0 4px;font:600 17px/1.3 var(--brand);letter-spacing:-.01em}
.move-rail li p{font:400 14px/1.6 var(--sans);margin:0}
.move-rail li[data-q="fact"] h4,.move-rail li[data-q="fact"] p{opacity:.55}

/* Le décompte des natures : un chiffre par matière. */
.natband-n{font:500 30px/1 var(--brand);letter-spacing:-.035em;margin-top:10px;color:var(--ink-900)}
.natband>div.act .natband-n{color:var(--unknown-ink)}

/* Le premier écart : deux chiffres face à face, un seul geste de lecture. */
.gap-row+.gap-row{margin-top:var(--s7);padding-top:var(--s6);border-top:1px solid var(--line)}
.gap-row h4{margin:0 0 var(--s4);font:600 17px/1.3 var(--brand)}
.gap-two{display:flex;align-items:center;gap:var(--s5);flex-wrap:wrap}
.gap-side{display:flex;flex-direction:column;gap:6px;min-width:0}
.gap-num{font:500 clamp(40px,6.4vw,76px)/.9 var(--brand);letter-spacing:-.05em;color:var(--ink-900);
  white-space:nowrap}
.gap-num.struck{color:var(--muted);text-decoration:line-through;text-decoration-thickness:3px;
  text-decoration-color:var(--mark)}
.gap-arrow{font:400 26px/1 var(--brand);color:var(--mark);flex:none}
.gap-rule{height:2px;background:var(--ink-800);margin:var(--s5) 0 var(--s4)}
.gap-points{font:400 16px/1.6 var(--sans);margin:0 0 var(--s4)}
.gap-points strong{font-weight:600;color:var(--ink-900)}
/* Les quatre postes de l'écart. À quatre colonnes fixes, l'étiquette de nature
   se retrouvait coupée dès que la colonne descendait sous 90 px : la grille
   se replie maintenant sur la largeur minimale de l'étiquette. */
.gap-parts{display:grid;grid-template-columns:repeat(auto-fit,minmax(118px,1fr));gap:var(--s3);margin-bottom:var(--s4)}
.gap-part{display:flex;flex-direction:column;gap:6px;align-items:flex-start;
  border:1px solid var(--line);border-radius:var(--r-sm);padding:12px 14px;background:#fff}
.gap-part-n{font:600 19px/1.1 var(--brand);letter-spacing:-.02em;color:var(--ink-900)}

/* Le registre : la ligne porte sa nature, la grammaire se lit sans le menu. */
.ev-row legend{display:inline-flex;align-items:center;gap:10px}
.ev-n{font:600 12px/1 var(--sans);color:var(--muted)}
.ev-row[data-nature="unknown"]{border-left:3px solid var(--mark)}
.ev-row[data-nature="fact"]{border-left:3px solid var(--ink-800)}
.nature-key{list-style:none;margin:var(--s4) 0 0;padding:0;display:grid;gap:8px}
.nature-key li{display:flex;align-items:flex-start;gap:10px;font:400 13px/1.5 var(--sans);color:var(--muted)}
.nature-key .q{flex:none}

/* Les zones d'ombre sont des inconnus, et le disent avant de le devenir. */
.blind-spot{display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.blind-spot .q{margin-bottom:2px}
.blind-spot.is-in .q{opacity:.45}

@media(max-width:760px){
 .gap-parts{grid-template-columns:repeat(2,minmax(0,1fr))}
 .gap-two{gap:var(--s4)}
 .gap-arrow{transform:rotate(90deg);align-self:center}
 .idx-head{align-items:flex-start;flex-direction:column;gap:var(--s2)}
}
@media(max-width:420px){
 .gap-parts{grid-template-columns:minmax(0,1fr)}
}

/* L'espace connecté : la barre d'état, puis le seuil. */

/* Les dix zones d'ombre, page publique : chacune est un inconnu assumé. */
.bs-head{display:flex;align-items:center;gap:12px;margin-bottom:var(--s3)}
.bs-card h2{font:400 clamp(21px,2.1vw,27px)/1.2 var(--brand);letter-spacing:-.02em}
/* La grammaire montrée, pas seulement décrite. */
.nature-key-4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s4);
  margin:var(--s5) 0;padding:var(--s5) 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.nature-key-4>div{display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.nature-key-4 p{margin:0}
@media(max-width:760px){.nature-key-4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:420px){.nature-key-4{grid-template-columns:minmax(0,1fr)}}

/* ---------- La salle des pièces ---------- */
.doc-room{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:var(--s4);margin-top:var(--s5)}
.doc-card{border:1px solid var(--line);border-radius:var(--r-md);background:#fff;padding:18px 20px;
  display:flex;flex-direction:column;gap:10px}
.doc-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
.doc-ref{font:600 11px/1 var(--sans);letter-spacing:.14em;color:var(--muted)}
.doc-card h4{margin:0;font:600 15.5px/1.35 var(--brand);letter-spacing:-.01em}
.doc-meta{margin:0;display:grid;grid-template-columns:auto 1fr;gap:4px 14px;align-items:baseline}
.doc-meta dt{font:600 9.5px/1.4 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
  white-space:nowrap}
.doc-meta dd{margin:0;font:400 13px/1.5 var(--sans);overflow-wrap:anywhere}
.doc-miss{color:var(--muted);font-style:italic}
.doc-next{color:var(--unknown-ink);font-weight:500}
.doc-card.doc-unknown{border-left:3px solid var(--mark)}
.doc-card.doc-fact{border-left:3px solid var(--ink-800)}

/* ---------- Les écrans qui n'ont pas encore de données ----------
   Un écran vide dit ce qui manque, pourquoi ça compte, et le geste suivant.
   Il ne s'excuse pas et ne reste jamais muet. */
.empty-state{background:linear-gradient(180deg,#fff, var(--paper-2))}
.empty-state h3{font:400 clamp(21px,2.4vw,30px)/1.15 var(--brand);letter-spacing:-.02em;margin:0 0 var(--s3)}
.empty-state>p{max-width:64ch;font:400 15px/1.7 var(--sans);color:var(--muted)}
.empty-next{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin:var(--s4) 0 0;
  padding-top:var(--s4);border-top:1px solid var(--line);font:500 15px/1.6 var(--sans);color:var(--ink-900)}
.empty-next .t-label{color:var(--unknown-ink);flex:none}
@media(max-width:520px){.doc-room{grid-template-columns:minmax(0,1fr)}}

/* Le premier écart sur les pages publiques : même grammaire que dans le produit. */
.first-gap.gap-panel{border-left:0;background:#fff;border:1px solid var(--line);border-radius:var(--r-md);padding:24px 26px}
.first-gap.gap-panel .term{margin-bottom:var(--s4)}

/* La page expertise applique la grammaire à nos propres affirmations. */
.exp-card>.q{margin-bottom:var(--s3)}
.exp-card h2{font:400 clamp(21px,2.2vw,28px)/1.18 var(--brand);letter-spacing:-.02em;margin:0 0 var(--s3)}

/* Les commandes isolées se touchent au doigt. Les liens d'attribution posés
   dans une phrase gardent la hauteur de leur ligne : les agrandir casserait
   le paragraphe sans rien gagner. */
.auth-links a,.page-heading>a,.memo-example>a,main>a:first-child{
  display:inline-flex;align-items:center;min-height:44px;padding:6px 2px}

/* ============================================================
   V2 · LES COMPOSITIONS
   Jusqu'ici la V2 posait des composants sur des pages V1 : des
   cartes pleine largeur empilées, des grilles uniformes, une
   seule valeur de gris. Ce bloc apporte ce qui manquait vraiment :
   des rangées asymétriques, l'alternance clair / sombre, et des
   chiffres traités comme des objets graphiques.
   Toutes les mesures viennent de l'échelle --s1..--s10, pour que
   rien ne soit posé « à peu près ».
   ============================================================ */

/* La page devient une suite de rangées, pas une pile de cartes. */
.v2{display:grid;gap:var(--s7);max-width:var(--max);margin:0 auto;padding:0}
.v2-head{display:flex;align-items:center;justify-content:space-between;gap:var(--s5);
  flex-wrap:wrap;padding-bottom:var(--s4);border-bottom:1px solid var(--line)}
.v2-head .term{flex:1 1 auto;min-width:0}

/* Rangées asymétriques. Le rapport porte le sens : le bloc qui pèse
   le plus dans la décision occupe la plus grande colonne. */
.v2-row{display:grid;gap:var(--s5);align-items:stretch}
.v2-row.a{grid-template-columns:minmax(0,1fr) minmax(0,1.62fr)}
.v2-row.b{grid-template-columns:minmax(0,1.62fr) minmax(0,1fr)}
.v2-row.c{grid-template-columns:repeat(3,minmax(0,1fr))}
.v2-row.d{grid-template-columns:repeat(4,minmax(0,1fr))}
.v2-row.e{grid-template-columns:repeat(2,minmax(0,1fr))}

/* Deux matières de surface, jamais mélangées au hasard : le papier
   porte ce qui est établi, l'encre porte ce qui demande une décision. */
.v2-panel{background:#fff;border:1px solid var(--line);border-radius:var(--r-md);
  padding:var(--s6);display:flex;flex-direction:column;gap:var(--s4);min-width:0}
.v2-panel.flat{background:transparent}
.v2-ink{background:var(--ink-900);color:var(--paper);border-radius:var(--r-md);
  padding:var(--s6);position:relative;overflow:hidden;display:flex;flex-direction:column;gap:var(--s4);min-width:0}
.v2-ink::before{content:'';position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(#ffffff0a 1px,transparent 1px),linear-gradient(90deg,#ffffff0a 1px,transparent 1px);
  background-size:56px 56px;
  mask-image:radial-gradient(130% 100% at 0% 0%,#000 20%,transparent 80%)}
.v2-ink>*{position:relative}
.v2-ink h2,.v2-ink h3{color:var(--paper)}
.v2-ink p{color:#b9c8d8}

/* Le chiffre comme événement : une seule valeur par bloc, très grande,
   avec son unité en exposant optique et son libellé dessous. */
.v2-figure{display:flex;flex-direction:column;gap:var(--s2);min-width:0}
.v2-figure b{font:500 clamp(52px,7.4vw,104px)/.84 var(--brand);letter-spacing:-.05em;
  color:var(--ink-900);font-weight:500;display:inline-flex;align-items:baseline;gap:4px;align-self:flex-start}
.v2-figure b i{font:600 .3em/1 var(--brand);font-style:normal;letter-spacing:0;color:var(--muted)}
.v2-ink .v2-figure b{color:var(--paper)}
.v2-figure.sm b{font-size:clamp(30px,3.2vw,44px)}
.v2-figure .lab{font:600 10.5px/1.3 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.v2-ink .v2-figure .lab{color:#8fa1b4}
.v2-figure p{margin:0;font:400 14px/1.6 var(--sans);color:var(--muted);max-width:40ch}

/* La barre de composition : une proportion réelle, pas une décoration. */
.v2-bar{display:flex;height:10px;border-radius:2px;overflow:hidden;background:var(--sand)}
.v2-bar i{display:block;height:100%}
.v2-bar i:nth-child(1){background:var(--ink-900)}
.v2-bar i:nth-child(2){background:var(--ink-600)}
.v2-bar i:nth-child(3){background:var(--ink-500)}
.v2-bar i:nth-child(4){background:var(--ink-400)}

/* Le face-à-face de deux chiffres, avec l'écart nommé entre les deux. */
.v2-versus{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
  gap:var(--s5);align-items:start}
.v2-versus-mid{display:flex;flex-direction:column;align-items:center;gap:10px;margin-top:14px;
  font:600 10.5px/1.3 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--unknown-ink);
  text-align:center;white-space:nowrap}
.v2-versus-mid::before,.v2-versus-mid::after{content:'';width:1px;height:34px;background:var(--line)}
.v2-struck b{color:var(--muted)}
.v2-struck b::after{content:'';position:absolute;left:0;right:0;top:52%;height:3px;background:var(--mark)}
.v2-struck b{position:relative}

/* Une ligne de registre : l'affirmation, sa source, sa matière à droite. */
.v2-line{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--s4);
  padding:var(--s4) 0;border-top:1px solid var(--line)}
.v2-line:first-of-type{border-top:0;padding-top:0}
.v2-line-t{min-width:0;display:flex;flex-direction:column;gap:4px}
.v2-line-t strong{font:500 15.5px/1.4 var(--sans);color:var(--ink-900)}
.v2-line-t span{font:400 13px/1.5 var(--sans);color:var(--muted)}
.v2-line .q{flex:none}
.v2-ink .v2-line{border-color:#ffffff1f}
.v2-ink .v2-line-t strong{color:var(--paper)}
.v2-ink .v2-line-t span{color:#8fa1b4}

/* Une liste de priorités : le point vermillon marque ce qui reste à faire. */
.v2-todo{list-style:none;margin:0;padding:0;display:grid;gap:var(--s4)}
.v2-todo li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:14px;align-items:start}
.v2-todo li::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--mark);
  box-shadow:0 0 0 4px var(--mark-glow);margin-top:7px}
.v2-todo strong{display:block;font:500 16.5px/1.4 var(--sans);color:var(--paper)}
.v2-todo span{display:block;font:400 13.5px/1.55 var(--sans);color:#8fa1b4;margin-top:3px}

@media(max-width:900px){
 .v2-row.a,.v2-row.b,.v2-row.e{grid-template-columns:minmax(0,1fr)}
 .v2-row.c,.v2-row.d{grid-template-columns:repeat(2,minmax(0,1fr))}
 .v2{gap:var(--s6)}
}
@media(max-width:560px){
 .v2-row.c,.v2-row.d{grid-template-columns:minmax(0,1fr)}
 .v2-panel,.v2-ink{padding:var(--s5)}
 .v2-versus{grid-template-columns:minmax(0,1fr);gap:var(--s4)}
 .v2-versus-mid{flex-direction:row;gap:12px}
 .v2-versus-mid::before,.v2-versus-mid::after{width:28px;height:1px}
}

/* ---------- Espace libre : la composition, pas une pile de cartes ---------- */
.esp{padding:var(--s6) 0 var(--s8)}.esp-lines{display:flex;flex-direction:column}
.esp-lines .v2-line{text-decoration:none;padding:var(--s4) var(--s3);margin:0 calc(var(--s3) * -1);
  border-radius:var(--r-sm)}
.esp-lines .v2-line:hover{background:var(--paper-2)}

/* ---------- Deal Room : la planche de bord ---------- */
.dealboard{padding:var(--s5) 0 var(--s7)}
.dealboard-name{color:var(--ink-900);font-weight:600;letter-spacing:.06em}
.dealboard-top .v2-panel .v2-figure{margin-bottom:var(--s2)}
.dealboard-crit{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:3px;margin-top:6px}
.dealboard-crit span{font:600 9px/1.3 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dealboard-crit span.on{color:var(--ink-900)}
.dealboard-crit span.now{color:var(--unknown-ink)}
.dealboard-top .note{margin-top:auto;padding-top:var(--s4);border-top:1px solid var(--line)}
.dealboard-prio{color:var(--mark-soft)!important}
.dealboard-top h2{font:400 clamp(26px,2.9vw,38px)/1.12 var(--brand);letter-spacing:-.025em;margin:0}
.dealboard-gain{margin-top:auto;padding-top:var(--s4);border-top:1px solid #ffffff1f;
  font:400 13.5px/1.6 var(--sans);color:#b9c8d8;display:flex;flex-wrap:wrap;gap:10px;align-items:baseline}
.dealboard-gain .t-label{color:#8fa1b4}
.dealboard-nat .v2-panel{gap:var(--s3);justify-content:space-between}
.dealboard-nat .v2-panel.act{background:var(--mark-glow);border-color:#c25a2433}
.dealboard-nat .v2-panel.act .v2-figure b{color:var(--unknown-ink)}
.dealboard-nat .q{align-self:flex-start}
.dealboard-sub{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s4);
  padding-bottom:var(--s4);border-bottom:1px solid var(--ink-900)}
.dealboard-body .v2-line:first-of-type{border-top:0;padding-top:var(--s4)}
.dealboard-side{display:grid;gap:var(--s5);align-content:start}
.dealboard-traj{margin:var(--s3) 0 0}
.dealboard-traj .rail-row>span:first-child{font-size:14px}
.dealboard-final .dealboard-doc{display:flex;gap:var(--s4);align-items:center}
.dealboard-doc-i{flex:none;width:58px;height:76px;border:1px solid var(--line);border-radius:2px;background:#fff;
  display:flex;align-items:flex-end;justify-content:center;padding:8px;position:relative;
  box-shadow:0 1px 2px #0a152410,0 10px 20px -14px #0a152440}
.dealboard-doc-i::before{content:'';position:absolute;left:10px;right:10px;top:12px;height:2px;background:var(--ink-900)}
.dealboard-doc-i::after{content:'';position:absolute;left:10px;right:18px;top:19px;height:1px;background:var(--line);
  box-shadow:0 5px 0 var(--line),0 10px 0 var(--line)}
.dealboard-doc-i b{font:600 15px/1 var(--brand);letter-spacing:-.02em;color:var(--ink-900)}
.dealboard-doc p{margin:0;font:400 13.5px/1.55 var(--sans)}
@media(max-width:900px){
 .dealboard-crit{grid-template-columns:repeat(3,minmax(0,1fr))}
 .dealboard-crit span:nth-child(n+4){display:none}
}

/* ---------- Accueil : la preuve, en face-à-face ---------- */
.welcome-proof{padding:var(--s8) var(--s7);border-radius:var(--r-lg)}
.welcome-proof .term{margin-bottom:var(--s5)}
.welcome-proof h2{font:400 clamp(30px,3.8vw,54px)/1.06 var(--brand);letter-spacing:-.03em;margin:0 0 var(--s7)}
.welcome-proof .v2-figure p{color:#9fb4c8;max-width:34ch}
.welcome-proof .v2-struck b{color:#7d90a4}
.welcome-proof .v2-struck b::after{background:var(--mark-soft)}
.welcome-proof .v2-versus-mid{color:var(--mark-soft)}
.welcome-proof .v2-versus-mid::before,.welcome-proof .v2-versus-mid::after{background:#ffffff26}
.welcome-proof .note{color:#8fa1b4;margin:0 0 var(--s5)}
.gap-bar{margin:var(--s5) 0 var(--s4)}
@media(max-width:760px){.welcome-proof{padding:var(--s6) var(--s5)}}

.dealboard-top,.dealboard-body{align-items:start}
/* L'état d'un outil libre n'est pas une nature d'information : il ne prend
   pas la matière du FAIT. */
.esp-state{font:600 9.5px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
  border:1px solid var(--line);border-radius:2px;padding:6px 9px;flex:none;white-space:nowrap}
.esp-lines .v2-line:hover .esp-state{border-color:var(--ink-800);color:var(--ink-900)}

/* ============================================================
   ACCUEIL V2 · le produit ouvre la page, pas une photo
   ============================================================ */
.v2page{background:var(--paper)}
.hero2{background:var(--ink-900);color:var(--paper);position:relative;overflow:hidden;
  padding-bottom:var(--s9)}
.hero2::before{content:'';position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(#ffffff0a 1px,transparent 1px),linear-gradient(90deg,#ffffff0a 1px,transparent 1px);
  background-size:64px 64px;mask-image:radial-gradient(140% 100% at 12% 0%,#000 18%,transparent 78%)}
.hero2>*{position:relative}
/* La barre de navigation passe sur l'encre. */
.hero2-bar .topbar{border-bottom:1px solid #ffffff1a}
.hero2-bar .monogram,.hero2-bar .brand-name{color:var(--paper)}
.hero2-bar .topbar nav a{color:#b9c8d8}
.hero2-bar .topbar nav a:hover{color:var(--paper)}
.hero2-bar .topbar .btn:not(.outline):not(.light){background:var(--paper);color:var(--ink-900);border-color:var(--paper)}
.hero2-bar .topbar .btn:not(.outline):not(.light):hover{background:#fff}
/* Sur l'encre, c'est la version du logo prévue pour les fonds sombres,
   la même que celle de l'espace connecté. */
.hero2-bar .brand .brand-light{display:none}
.hero2-bar .brand .brand-dark{display:block}
.hero2-bar .header-account>a:not(.btn){color:#b9c8d8}
.hero2-left{display:flex;flex-direction:column;align-items:flex-start;gap:var(--s5);min-width:0}
.hero2 h1{font:400 clamp(44px,5.6vw,80px)/1.02 var(--brand);letter-spacing:-.04em;margin:0;color:var(--paper);
  max-width:14ch}
.hero2 h1 em{font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:-.02em}
.hero2-left>p{margin:0;max-width:52ch;font:400 clamp(15px,1.25vw,17px)/1.7 var(--sans);color:#b9c8d8}
.hero2 .hero-actions{display:flex;gap:var(--s3);flex-wrap:wrap;margin-top:var(--s2)}
.hero2 .hero-actions .btn:not(.outline):not(.light){background:var(--paper);color:var(--ink-900);border-color:var(--paper)}
.hero2 .hero-actions .btn:not(.outline):not(.light):hover{background:#fff}
.hero2 .hero-actions .b-ghost{border-color:#ffffff38;color:var(--paper)}
.hero2 .hero-actions .b-ghost:hover{border-color:var(--paper)}

.hero2-right{display:flex;flex-direction:column;gap:var(--s4);min-width:0}
.hero2-msg{padding:var(--s5);display:flex;flex-direction:column;gap:10px}
.hero2-msg .t-label{color:#8fa1b4}
.hero2-msg>p{margin:0;font:400 15.5px/1.65 var(--sans);color:#dde6ee}
.hero2-msg>p b{font-weight:600;color:var(--paper)}
.hero2-msg .note{color:#7d90a4;font-size:12.5px}
.hero2-sieve{display:flex;align-items:center;gap:14px}
.hero2-sieve .t-label{color:var(--mark-soft);flex:none}
.hero2-sieve i{flex:1;height:1px;background:linear-gradient(90deg,var(--mark),transparent)}
.hero2-reg{padding:var(--s5)}
.hero2-reg-h{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s4);
  padding-bottom:var(--s4);border-bottom:1px solid #ffffff1a}
.hero2-reg-h .t-label{color:#8fa1b4}
.hero2-rail{margin:var(--s4) 0 0;padding-left:22px}
.hero2-rail li{padding:12px 0;display:flex;flex-direction:column;align-items:flex-start;gap:6px}
.hero2-rail li strong{font:500 15px/1.4 var(--sans);color:var(--paper)}
.hero2-rail li>span:last-child{font:400 13px/1.5 var(--sans);color:#8fa1b4}

/* Les rangées de l'accueil respirent au même rythme que le reste. */
.v2page main{display:grid;gap:var(--s9);padding:var(--s8) 0 var(--s9)}
.v2page h2{font:400 clamp(28px,3.4vw,48px)/1.08 var(--brand);letter-spacing:-.03em;margin:0}
.v2page .welcome-manifesto{margin:0;border-top:1px solid var(--line)}
/* Trois liens de quartier posés côte à côte : ce sont des commandes, pas des
   mots dans une phrase{display:inline-flex;align-items:center;min-height:44px;padding:0 14px;
  border:1px solid var(--line);border-radius:var(--r-sm);font:500 14px/1 var(--sans);color:var(--ink-800)}.welcome-join{padding:var(--s8) var(--s7);border-radius:var(--r-lg)}
.welcome-join .term{margin-bottom:var(--s6)}

@media(max-width:1000px){
 .hero2{padding-bottom:var(--s7)}
 .v2page main{gap:var(--s8);padding:var(--s7) 0 var(--s8)}
}
@media(max-width:760px){
 .welcome-join{padding:var(--s6) var(--s5)}
}
@media(max-width:520px){
 .hero2 .hero-actions{width:100%}
 .hero2 .hero-actions .btn,.hero2 .hero-actions .b-ghost{width:100%}
}

/* ============================================================
   ESPACE CONNECTÉ · LA NAVIGATION DEVIENT SECONDAIRE
   La colonne sombre de 280 px imposait la navigation comme sujet
   principal de chaque écran. Elle devient une colonne claire et
   fine, tenue par un filet, et le dossier reprend la scène.
   ============================================================ */
.ws2{display:grid;grid-template-columns:222px minmax(0,1fr);min-height:100vh;background:var(--paper)}
.ws2 .ws-rail{background:var(--paper);border-right:1px solid var(--line);color:var(--ink-800);
  display:flex;flex-direction:column;gap:var(--s5);padding:var(--s5) var(--s4) var(--s5) var(--s5);
  position:sticky;top:0;height:100vh;overflow-y:auto}
.ws-brand{display:block;margin-bottom:var(--s2)}
.ws-brand img{width:96px;height:auto;display:block}
.ws-rail .brand-dark{display:none}
.ws-rail .brand-light{display:block}
.ws-nav{display:flex;flex-direction:column;gap:2px;flex:1}
.ws-group{margin:var(--s5) 0 8px;color:var(--muted)}
.ws-group:first-child{margin-top:0}
/* Un lien de navigation : discret, et l'état actif se lit à la barre d'encre. */
.ws-link{display:flex;align-items:center;min-height:38px;padding:6px 10px 6px 12px;border-radius:var(--r-sm);
  position:relative;text-decoration:none;color:var(--ink-700);
  font:400 14.5px/1.35 var(--sans);transition:background var(--t-fast),color var(--t-fast)}
.ws-link:hover{background:var(--paper-2);color:var(--ink-900)}
.ws-link.active{color:var(--ink-900);font-weight:600;background:transparent}
.ws-link.active::before{content:'';position:absolute;left:0;top:8px;bottom:8px;width:2px;
  background:var(--ink-900);border-radius:2px}
.ws-rail-foot{border-top:1px solid var(--line);padding-top:var(--s4);display:flex;flex-direction:column;gap:10px}
.ws-rail-foot .t-label{margin:0;padding-left:12px}
.ws2 .nav-disclosure summary{font:600 10.5px/1.3 var(--sans);letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted);cursor:pointer;padding:8px 12px}

/* La barre haute : un filet, un état, un compte. Rien de plus. */
.ws2 .ws-top{display:flex;align-items:center;justify-content:space-between;gap:var(--s4);
  min-height:64px;padding:0 var(--s6);border-bottom:1px solid var(--line);background:var(--paper);
  position:sticky;top:0;z-index:40}
.ws-top-l,.ws-top-r{display:flex;align-items:center;gap:var(--s4)}
.ws-top-brand{display:none}
.ws-top-brand img{width:74px;height:auto;display:block}
.ws-state{font:600 10px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
  border:1px solid var(--line);border-radius:2px;padding:7px 10px}
.ws-account{font:400 14px/1 var(--sans);color:var(--ink-800);text-decoration:none;
  display:inline-flex;align-items:center;min-height:44px}
.ws-account:hover{color:var(--ink-900)}
.ws2 .workspace-main{padding:0 var(--s6) var(--s8);max-width:1240px;width:100%;margin:0 auto}
.ws2 .app-foot{margin-top:var(--s8);padding-top:var(--s5);border-top:1px solid var(--line);
  font:400 12px/1.8 var(--sans);color:var(--muted)}

/* Mobile : une vraie barre d'onglets au pouce, pas la colonne desktop pliée. */
.ws-tabs{display:none}
@media(max-width:900px){
 .ws2{grid-template-columns:minmax(0,1fr)}
 .ws2 .ws-rail{position:fixed;top:0;left:0;bottom:0;width:min(78vw,300px);z-index:60;
   transform:translateX(-101%);transition:transform var(--t-base) var(--e-out);
   box-shadow:0 0 60px #0a152426;height:100%}
 .ws2 .ws-rail.open{transform:none}
 .ws-top-brand{display:block}
 .ws2 .ws-top{padding:0 var(--s5);min-height:58px}
 /* À 390 px la barre haute n'a de place que pour la marque et le compte :
    l'état et le fil d'Ariane sont déjà donnés par la barre terminale. */
 .ws-top-l .t-label{display:none}
 .ws-state{display:none}
 .ws-account{white-space:nowrap;font-size:13.5px}
 .ws-top-brand img{width:64px}
 .ws2 .workspace-main{padding:0 var(--s5) calc(var(--s10) + env(safe-area-inset-bottom))}
 .ws-tabs{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));position:fixed;left:0;right:0;bottom:0;
   z-index:55;background:#fffffff2;backdrop-filter:blur(12px);border-top:1px solid var(--line);
   padding-bottom:env(safe-area-inset-bottom)}
 .ws-tab{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;
   min-height:58px;padding:8px 4px;border:0;background:transparent;cursor:pointer;text-decoration:none;
   font:500 10px/1.2 var(--sans);color:var(--muted);text-align:center}
 .ws-tab i{width:16px;height:16px;border:1.5px solid currentColor;border-radius:3px;display:block}
 .ws-tab:nth-child(2) i{border-radius:50%}
 .ws-tab:nth-child(3) i{border-style:dotted}
 .ws-tab:nth-child(4) i{border-style:solid;border-width:1.5px 1.5px 4px 1.5px}
 .ws-tab#menu i{border:0;box-shadow:0 -5px 0 currentColor,0 0 0 currentColor,0 5px 0 currentColor;
   height:1.5px;width:15px;margin:7px 0}
 .ws-tab span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
 .ws-tab.active{color:var(--ink-900)}
 .ws-tab.active i{border-color:var(--ink-900);background:var(--ink-900)}
}
@media(max-width:380px){.ws-tab span{font-size:9px}}

/* ---------- Le seuil du Système ---------- */
.threshold{padding:var(--s8) var(--s7);border-radius:var(--r-lg);margin-bottom:var(--s6)}
.threshold .term{margin-bottom:var(--s7)}
.threshold-row{align-items:start;gap:var(--s8)}
.threshold-t{display:flex;flex-direction:column;align-items:flex-start;gap:var(--s4)}
.threshold-rule{height:2px;background:var(--mark);margin-bottom:var(--s3)}
.threshold h2{font:400 clamp(36px,4.6vw,66px)/1.02 var(--brand);letter-spacing:-.035em;margin:0;color:var(--paper)}
.threshold h2 em{font-family:var(--serif);font-style:italic;font-weight:400}
.threshold-t>p{margin:0;max-width:46ch;color:#b9c8d8;font:400 16px/1.7 var(--sans)}
.threshold-q{color:#8fa1b4!important;margin-top:var(--s4)}
.threshold-doors{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s4);width:100%}
.threshold-door{display:flex;flex-direction:column;gap:8px;padding:var(--s5);text-decoration:none;
  border-radius:var(--r-md);min-width:0}
.threshold-door strong{font:600 19px/1.3 var(--brand);letter-spacing:-.015em;color:var(--paper)}
.threshold-door>span{font:400 14px/1.6 var(--sans);color:#9fb4c8}
.threshold-go{font:600 10px/1.3 var(--sans)!important;letter-spacing:.14em;text-transform:uppercase;
  color:var(--mark-soft)!important;margin-top:auto;padding-top:10px}
.threshold .note{color:#7d90a4;margin:var(--s2) 0 0;font-size:12.5px}
.threshold-side{display:flex;flex-direction:column;gap:var(--s4)}
.threshold-side .depth-layer .t-label{color:var(--paper)}
.threshold-side .depth-layer .t-label+.t-label{color:#8fa1b4}
.threshold-foot{margin:var(--s7) 0 0;padding-top:var(--s5);border-top:1px solid #ffffff1a;
  font:400 13px/1.7 var(--sans);color:#8fa1b4;max-width:70ch}
@media(max-width:900px){
 .threshold{padding:var(--s6) var(--s5)}
 .threshold-doors{grid-template-columns:minmax(0,1fr)}
 .threshold-row{gap:var(--s6)}
}

/* Finition · les quatre pastilles de nature occupent exactement la même boîte,
   sinon les chiffres au-dessus d'elles ne sont plus sur la même ligne. */
.q-fact{border:1px solid transparent}
/* Le seuil : la colonne de droite prend de la hauteur et le pied traverse. */
.threshold-side .depth-stack{gap:14px}
.threshold-side .depth-layer{padding:18px 22px}
.threshold-foot{margin:var(--s7) 0 0;padding-top:var(--s5);border-top:1px solid #ffffff1a}
.threshold-foot span{display:block;max-width:74ch;font:400 13px/1.7 var(--sans);color:#8fa1b4}
/* Le filet du pied traversait à moitié : la largeur maximale posée plus haut
   restait active. Elle est levée ici, et c'est le texte qui reste borné. */
.threshold-foot{max-width:none}
/* La colonne de droite ne flotte plus en haut d'un grand vide : elle se pose
   au centre de la hauteur qu'occupe la colonne de gauche. */
.threshold-row{align-items:stretch}
.threshold-side{justify-content:center}

/* ============================================================
   COMPARER · la comparaison est l'objet, pas une suite de cartes
   ============================================================ */
.cmp{gap:var(--s6)}
.cmp-tops{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:var(--s4)}
.cmp-top{border:1px solid var(--line);border-radius:var(--r-md);background:#fff;padding:var(--s5);
  display:flex;flex-direction:column;gap:var(--s3);min-width:0}
.cmp-top-h{display:flex;align-items:center;gap:10px;min-width:0}
.cmp-top-h .t-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cmp-letter{flex:none;width:26px;height:26px;border-radius:3px;background:var(--ink-900);color:var(--paper);
  display:inline-flex;align-items:center;justify-content:center;font:600 12px/1 var(--sans)}
.cmp-letter.sm{width:20px;height:20px;font-size:10px;margin-right:6px}
.cmp-top .v2-figure b{font-size:clamp(38px,4.4vw,60px)}
/* La position relative, sans podium : un repère sur un axe, pas un classement. */
.cmp-rail{position:relative;height:3px;background:var(--sand);border-radius:2px;margin:var(--s2) 0}
.cmp-rail i{position:absolute;top:50%;width:9px;height:9px;border-radius:50%;background:var(--ink-900);
  transform:translate(-50%,-50%)}
.cmp-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:auto;padding-top:var(--s3)}
.cmp-actions .remove{border:0;background:transparent;color:var(--muted);font:400 13px/1 var(--sans);
  cursor:pointer;min-height:44px;padding:0 4px}
.cmp-actions .remove:hover{color:var(--unknown-ink)}
.cmp-matrix{overflow-x:auto}
.cmp-table{border-collapse:collapse;width:100%;font:400 14px/1.5 var(--sans)}
.cmp-table caption{text-align:left;padding-bottom:var(--s3);color:var(--muted)}
.cmp-table th,.cmp-table td{padding:12px 14px;border-bottom:1px solid var(--line);text-align:left;vertical-align:middle}
.cmp-table thead th{font:600 10.5px/1.4 var(--sans);letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted);border-bottom:1px solid var(--ink-900);white-space:nowrap}
.cmp-table tbody th{font-weight:400;color:var(--ink-800)}
.cmp-table td.num{text-align:right;font-variant-numeric:tabular-nums;font-weight:500;color:var(--ink-900);white-space:nowrap}
.cmp-table tr.diff th,.cmp-table tr.diff td{background:#0a15240a}
.cmp-diff-tag{display:inline-block;margin-left:10px;font:600 9px/1 var(--sans);letter-spacing:.14em;
  text-transform:uppercase;color:var(--unknown-ink);border:1px dotted #c25a2466;border-radius:2px;padding:4px 6px}
.cmp-assump{border-top:1px solid var(--line);padding-top:var(--s5);display:flex;flex-direction:column;gap:var(--s4)}
.cmp-assump-g{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:var(--s3)}
.cmp-assump-i{display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.cmp-assump-i>span:last-child{font:400 14px/1.5 var(--sans);color:var(--ink-800)}
.cmp-assump .note{max-width:78ch;margin:0}
@media(max-width:700px){
 .cmp-table th,.cmp-table td{padding:10px}
 .cmp-table{min-width:520px}
}

/* ============================================================
   QUARTIERS · une surface de veille, pas un catalogue
   ============================================================ */
.qz{gap:var(--s7)}
.qz-figs .v2-figure b{font-size:clamp(30px,3.2vw,44px)}
.qz .area-panorama{margin:0}
.qz .area-panorama img{width:100%;height:280px;object-fit:cover;display:block;border-radius:var(--r-md)}
.qz .area-panorama figcaption{font:400 11px/1.5 var(--sans);color:var(--muted);margin-top:8px}
.qz-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:var(--s4)}
.qz-card{gap:var(--s3)}
.qz-card-h{display:flex;align-items:center;justify-content:space-between;gap:var(--s3)}
.qz-card h3{margin:0;font:600 19px/1.25 var(--brand);letter-spacing:-.015em}
.qz-card>p{margin:0;font:400 14.5px/1.6 var(--sans);color:var(--muted)}
.qz-card .btn{align-self:flex-start;margin-top:auto}
/* Les transactions relevées : un relevé, présenté comme un relevé. */
.qz-tx{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:var(--s3) 0;
  display:flex;flex-direction:column;gap:2px}
.qz-tx-h{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s3);padding-bottom:6px}
.qz-tx-h a{color:var(--muted);text-decoration:underline}
.qz-tx-r{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 12px;padding:7px 0;
  border-top:1px solid var(--line)}
.qz-tx-n{font:500 13.5px/1.4 var(--sans);color:var(--ink-900);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.qz-tx-m{grid-column:1;font:400 11.5px/1.4 var(--sans);color:var(--muted)}
.qz-tx-v{grid-column:2;grid-row:1/3;align-self:center;font:600 14px/1 var(--brand);letter-spacing:-.01em;
  color:var(--ink-900);font-variant-numeric:tabular-nums;white-space:nowrap}
.qz-none{margin:0;font:400 13.5px/1.6 var(--sans);color:var(--muted);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:var(--s3) 0}
.qz-none .t-label{display:block;color:var(--unknown-ink);margin-bottom:5px}
/* Ce qui manque occupe sa propre bande : un manque nommé vaut une donnée. */
.qz-gaps{padding:var(--s7) var(--s6);border-radius:var(--r-lg)}
.qz-gaps .term{margin-bottom:var(--s5)}
.qz-gaps h2{font:400 clamp(26px,3vw,42px)/1.1 var(--brand);letter-spacing:-.03em;margin:0 0 var(--s6);color:var(--paper)}
.qz-gaps-g{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:var(--s5)}
.qz-gap{display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.qz-gap strong{font:600 15.5px/1.35 var(--sans);color:var(--paper)}
.qz-gap>span:last-child{font:400 13px/1.55 var(--sans);color:#8fa1b4}
.qz-gaps .note{color:#8fa1b4;margin:var(--s6) 0 0;max-width:78ch}
.qz-gaps-cta{margin-top:var(--s5)}
.qz-gaps-cta .btn{border-color:#ffffff3d;color:var(--paper)}
@media(max-width:700px){
 .qz-gaps{padding:var(--s6) var(--s5)}
 .qz .area-panorama img{height:200px}
}

/* ============================================================
   CONTRÔLE DU DOSSIER · la méthode au service du dossier
   ============================================================ */
.rev{gap:var(--s6)}
.rev-top{align-items:stretch}
.rev-idx{height:9px;gap:3px;margin:var(--s2) 0}
.rev-top .note{margin:auto 0 0;padding-top:var(--s4);border-top:1px solid var(--line)}
.rev-aside{justify-content:center;gap:var(--s3)}
.rev-aside h3{margin:0;font:400 clamp(19px,2vw,26px)/1.25 var(--brand);letter-spacing:-.02em;color:var(--paper)}
.rev-aside p{margin:0;font:400 14px/1.65 var(--sans)}
.rev-aside .btn{align-self:flex-start;margin-top:var(--s2);background:var(--paper);color:var(--ink-900);border-color:var(--paper)}
.rev-form{display:flex;flex-direction:column}
.rev-head{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s4);
  padding-bottom:var(--s3);border-bottom:1px solid var(--ink-900)}
.rev-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--s5);
  padding:var(--s5) 0;border-bottom:1px solid var(--line);position:relative}
.rev-row.now::before{content:'';position:absolute;left:calc(var(--s4) * -1);top:var(--s5);width:7px;height:7px;
  border-radius:50%;background:var(--mark);box-shadow:0 0 0 4px var(--mark-glow)}
.rev-row.done .rev-row-l{opacity:.6}
.rev-row-l{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--s4);align-items:start}
.rev-n{font:500 22px/1 var(--brand);letter-spacing:-.02em;color:var(--muted)}
.rev-row.done .rev-n{color:var(--ink-900)}
.rev-row.now .rev-n{color:var(--unknown-ink)}
.rev-row-l h3{margin:0 0 6px;font:600 17px/1.3 var(--brand);letter-spacing:-.015em}
.rev-row-l p{margin:0 0 var(--s3);font:400 14px/1.6 var(--sans);color:var(--muted)}
.rev-row-l .btn{margin-top:4px}
.rev-row-r{display:flex;flex-direction:column;gap:var(--s3);min-width:0}
.rev-row-r .field span{display:block;font:600 10.5px/1.3 var(--sans);letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);margin-bottom:7px}
.rev-save{display:flex;align-items:center;gap:var(--s4);flex-wrap:wrap;padding-top:var(--s5)}
.rev-save p{margin:0;font:400 12.5px/1.6 var(--sans);color:var(--muted)}
.rev-foot{margin-top:var(--s6)}
@media(max-width:820px){
 .rev-row{grid-template-columns:minmax(0,1fr);gap:var(--s4)}
 .rev-row.now::before{left:calc(var(--s3) * -1)}
}

/* L'écran d'accès garde sa sobriété mais dit ce qu'un compte conserve :
   un écran qui attend une action n'est pas un écran vide. */
.gate-keeps{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:var(--s4);
  margin:var(--s5) 0;padding:var(--s5) 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.gate-keep{display:flex;flex-direction:column;gap:6px}
.gate-keep strong{font:600 15px/1.35 var(--sans);color:var(--ink-900)}
.gate-keep span{font:400 13.5px/1.55 var(--sans);color:var(--muted)}

/* ---------- Mon compte : un écran de réglages, pas une démonstration ---------- */
.acc{padding:var(--s6) 0 var(--s8)}
.acc .v2-line:first-of-type{padding-top:0}
.acc .v2-line{flex-direction:column;align-items:flex-start;gap:6px}
.acc .v2-line .text-link{align-self:flex-start;white-space:nowrap;padding:4px 0}
.acc .v2-row{align-items:start}
.acc-form{border-top:1px solid var(--line);padding-top:var(--s5);margin-top:var(--s2);
  display:flex;flex-direction:column;gap:var(--s3)}
.acc-form .form-actions{margin:0}
.acc-where{background:var(--paper-2)}
.acc-zone+.acc-zone{border-top:1px solid var(--line);padding-top:var(--s5)}
.acc-zone h3{margin:0 0 6px;font:600 10.5px/1.3 var(--sans);letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-900)}
.acc-zone p{margin:0;font:400 13.5px/1.6 var(--sans);color:var(--muted);max-width:44ch}
.acc-zone ul{list-style:none;margin:var(--s4) 0 0;padding:0;display:grid;gap:8px}
.acc-zone li{font:400 14.5px/1.5 var(--sans);color:var(--ink-700)}
.acc-zone li b{font:500 20px/1 var(--brand);color:var(--ink-900);margin-right:7px}
.acc-foot{align-items:start}
.acc-foot .v2-panel{gap:var(--s3);padding-top:var(--s5)}
.acc-foot .note{margin:0;max-width:46ch}

/* ---------- Mes achats : ce que ce compte possède, et ce qu'il ne possède pas ---------- */
.buy{padding:var(--s6) 0 var(--s8)}
.buy .v2-panel h3{margin:0;font:400 clamp(19px,2vw,25px)/1.25 var(--brand);letter-spacing:-.02em;color:var(--ink-900)}
.buy .v2-panel>p{margin:0;font:400 14.5px/1.7 var(--sans);color:var(--muted);max-width:56ch}
.buy-item h3{margin:0;font:400 clamp(20px,2.2vw,27px)/1.2 var(--brand);letter-spacing:-.02em;color:var(--ink-900)}
.buy-item p{margin:0;font:400 14.5px/1.7 var(--sans);color:var(--muted);max-width:52ch}
.buy-item.owned{border-color:var(--ink-900)}
.buy-item .form-actions{margin-top:auto;padding-top:var(--s3)}
.buy .sr-status:empty{display:none}
.buy .sr-status{margin:0;font:400 13px/1.6 var(--sans);color:var(--muted)}
.buy .journey-faq{border-top:1px solid var(--line);padding:var(--s3) 0}
.buy-next{gap:var(--s3)}
.buy-next .form-actions{margin:0}
.buy-help{border:0;border-top:1px solid var(--line);border-radius:0;
  padding:var(--s6) 0 0;gap:var(--s3)}
.buy-help .text-link{align-self:flex-start}
.buy-help p{max-width:66ch}

/* ---------- Cibles tactiles : un contrôle autonome se touche au doigt ---------- */
@media(max-width:768px){
 .dd-language{min-height:44px;display:inline-flex;align-items:center;padding:12px 16px}
 input[type=checkbox]{width:24px;height:24px;min-height:24px;flex:none}
 .offer-choice>a,.login-link,.source-note>a,a.t-label,a.language-switch{min-height:44px;
   display:inline-flex;align-items:center;gap:8px}
 figcaption a,.image-caption a{min-height:24px;display:inline-flex;align-items:center}
}

/* ---------- La surface document : un texte long garde la matière du produit ----------
   Une page de méthode, une offre détaillée ou un cas corrigé restent du texte.
   Ils ne deviennent pas un tableau de bord : ils prennent la typographie, les
   filets et le rythme de la nouvelle DA, et rien de plus. */
.docp{padding:var(--s6) 0 var(--s8)}
.docp-body{background:#fff;border:1px solid var(--line);border-radius:var(--r-md);
  padding:var(--s7) var(--s6);margin:0}
.docp-body h2{margin:var(--s6) 0 var(--s3);padding-top:var(--s5);border-top:1px solid var(--line);
  font:400 clamp(20px,2.3vw,28px)/1.15 var(--brand);letter-spacing:-.025em;color:var(--ink-900)}
.docp-body>h2:first-of-type{margin:0 0 var(--s4);padding-top:0;border-top:0;
  font:400 clamp(26px,3.2vw,42px)/1.08 var(--brand);letter-spacing:-.03em;color:var(--ink-900)}
.docp-body h3{margin:var(--s6) 0 var(--s3);padding-top:var(--s5);border-top:1px solid var(--line);
  font:600 11px/1.3 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-900)}
.docp-body h3:first-of-type{border-top:0;padding-top:0;margin-top:var(--s5)}
.docp-body p{margin:0 0 var(--s3);font:400 15.5px/1.75 var(--sans);color:var(--ink-700);max-width:72ch}
.docp-body p.note{font-size:13px;color:var(--muted)}
.docp-body ul,.docp-body ol{margin:0 0 var(--s4);padding-left:20px;max-width:72ch}
.docp-body li{margin:0 0 10px;font:400 15px/1.7 var(--sans);color:var(--ink-700)}
.docp-body .eyebrow{display:block;margin-bottom:var(--s3)}
.docp-body table{width:100%;border-collapse:collapse;font:400 13.5px/1.5 var(--sans);margin-bottom:var(--s4)}
.docp-body th{text-align:left;font:600 10px/1.3 var(--sans);letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);padding:0 12px 10px 0;border-bottom:1px solid var(--line)}
.docp-body td{padding:12px 12px 12px 0;border-bottom:1px solid var(--line);color:var(--ink-700);vertical-align:top}
.docp-body details{border-top:1px solid var(--line);padding:var(--s4) 0}
.docp-body summary{cursor:pointer;font:500 15px/1.5 var(--sans);color:var(--ink-900);min-height:24px}
.docp-body .btn{margin:var(--s3) 8px 0 0}

/* Le bloc d'attaque : ce que la page affirme, avant le détail. */
.v2-lead{padding:var(--s7) var(--s6)}
.v2-lead h1{margin:var(--s3) 0 var(--s4);
  font:400 clamp(34px,4.6vw,64px)/1.03 var(--brand);letter-spacing:-.035em;color:var(--paper)}
.v2-lead h1 em{font-style:italic;color:#c8d4e0}
.v2-lead>p{max-width:60ch;font:400 16px/1.7 var(--sans);color:#b9c8d8}
.v2-lead .form-actions{margin-top:var(--s5)}
@media(max-width:560px){.v2-lead{padding:var(--s6) var(--s5)}.docp-body{padding:var(--s6) var(--s5)}}

/* ---------- Les parcours : une gamme se lit en cinq secondes ---------- */
.off{padding:var(--s6) 0 var(--s8)}
.off-avail{margin:0;max-width:78ch;font:400 13.5px/1.7 var(--sans);color:var(--muted)}
.off-card h3{margin:0;font:400 clamp(21px,2.3vw,28px)/1.15 var(--brand);letter-spacing:-.025em;color:var(--ink-900)}
.off-card>p{margin:0;font:400 14.5px/1.7 var(--sans);color:var(--muted);max-width:50ch}
.off-price{margin-top:auto;padding-top:var(--s4);border-top:1px solid var(--line)}
.off-price b{font-size:clamp(28px,3vw,40px)}
.off-card .form-actions{margin:0}
.off-sel{display:grid;gap:var(--s5)}
.off-sel .offer-selector{margin:0}
.off-detail h3{margin:0;font:400 clamp(20px,2.2vw,27px)/1.18 var(--brand);letter-spacing:-.02em}
.off-detail .v2-panel>p{margin:0;font:400 14.5px/1.7 var(--sans);color:var(--muted);max-width:52ch}
.off-detail .v2-panel .form-actions{margin-top:auto;padding-top:var(--s3)}
.off-list{gap:var(--s3)}
.off-list strong{font-size:14.5px}
.off-steps{list-style:decimal;margin:0;padding-left:20px;display:grid;gap:8px}
.off-steps li{font:400 13.5px/1.6 var(--sans);color:#8fa1b4}
.off-proof h2,.off-end h2{margin:0;font:400 clamp(26px,3.2vw,44px)/1.08 var(--brand);letter-spacing:-.03em}
.off-q h2{margin:0 0 var(--s4)}
.off-q details:first-of-type{border-top:0}

/* ---------- Dossier exemple : le chiffre remplace la photo de couverture ---------- */
.memo-cover2{padding:var(--s6)}
.memo-cover-row{align-items:center;gap:var(--s6)}
.memo-cover2 h2{margin:0 0 8px;font:400 clamp(26px,3.2vw,44px)/1.08 var(--brand);letter-spacing:-.03em}
.memo-cover2 p{margin:0;font:400 14px/1.6 var(--sans);color:#b9c8d8}

/* ---------- Compte, abonnement, accès : mêmes matières que le reste ---------- */
.memb{padding:var(--s6) 0 var(--s8)}
.v2-note{margin:0;max-width:74ch;font:400 14.5px/1.7 var(--sans);color:var(--muted)}
.memb .account-tabs{display:flex;flex-wrap:wrap;gap:8px}
.memb .v2-panel h2{margin:0;font:400 clamp(21px,2.4vw,30px)/1.14 var(--brand);letter-spacing:-.025em;color:var(--ink-900)}
.memb .v2-panel>p{margin:0;font:400 14.5px/1.7 var(--sans);color:var(--muted);max-width:56ch}
.memb .v2-panel .form-actions{margin-top:auto;padding-top:var(--s3)}
.memb .access-list{margin:0;padding-left:18px;display:grid;gap:10px}
.memb .access-list li{font:400 14.5px/1.6 var(--sans);color:var(--ink-700)}
.memb .dossier-list{display:grid;gap:8px}

/* ---------- Rien ne pousse la colonne au-delà de l'écran ----------
   Un enfant de grille refuse de descendre sous son contenu minimal.
   Un tableau large ou une grille de boutons élargissait donc toute la
   colonne de travail sur mobile. Chaque maillon peut désormais rétrécir. */
.workspace-right,.workspace-main,.v2,.v2-panel,.v2-ink,.docp-body,.off-sel{min-width:0}
.v2>*,.docp-body>*{min-width:0;max-width:100%}
.offer-table-wrap{max-width:100%}
@media(max-width:768px){
 .ws-account{min-height:44px;display:inline-flex;align-items:center}
}

/* La barre haute reste dans l'écran, et le pied de page passe au-dessus
   de la barre d'onglets au lieu de se glisser dessous. */
.ws-top-r{min-width:0;flex-wrap:wrap;justify-content:flex-end}
@media(max-width:768px){
 .ws-top-r{gap:10px}
}

/* ---------- L'anglais : mêmes composants{padding:var(--s6) 0 var(--s8)}



.v2-sec{display:grid;gap:var(--s5)}
.v2-sec>h2{margin:0;font:400 clamp(24px,2.9vw,38px)/1.1 var(--brand);letter-spacing:-.028em;color:var(--ink-900)}

/* =========================================================================
   FINITION — hiérarchie mobile, rythme, chiffres, zone sûre
   ========================================================================= */

/* La bascule de langue redevient un contrôle secondaire : plus de boîte,
   plus de poids qu'un lien de service. La marque et le compte passent avant. */
.dd-language{border:0;padding:0 2px;min-height:44px;color:var(--muted);
  font:600 10px/1 var(--sans);letter-spacing:.1em;opacity:.85}
.dd-language:hover{background:transparent;color:var(--ink-900);opacity:1}
.dd-language strong{font-weight:700;color:var(--ink-800)}
.ws-top-r .dd-language{margin-left:2px;padding-left:12px;border-left:1px solid var(--line)}
.topbar .dd-language{margin-left:14px}

/* Un contenu qui glisse sous la barre haute s'efface, il ne laisse pas
   dépasser un coin arrondi sous le filet. */
.ws2 .ws-top::after{content:'';position:absolute;left:0;right:0;top:100%;height:16px;
  background:linear-gradient(var(--paper),#faf7f000);pointer-events:none}

@media(max-width:900px){
 /* La marque reprend sa place, le nom du compte ne casse jamais la ligne. */
 .ws-top-brand img{width:82px}
 .ws2 .ws-top{min-height:60px;gap:var(--s3)}
 .ws-top-r{gap:10px;flex-wrap:nowrap}
 .ws-account{font-size:13px;max-width:34vw;overflow:hidden;text-overflow:ellipsis;
   white-space:nowrap;display:block;line-height:44px}
 .ws-top-r .dd-language{font-size:9.5px;letter-spacing:.08em;padding-left:10px}
 /* La dernière information se lit confortablement au-dessus de la barre d'onglets. */
 .ws2 .workspace-main{padding-bottom:calc(112px + env(safe-area-inset-bottom))}
}

/* Le badge d'état ne concurrence plus le titre : il informe, il ne crie pas. */
.esp-state{font-size:9px;letter-spacing:.08em;padding:3px 7px;border-radius:2px;line-height:1.2}

/* Le registre de l'espace : titres courts sur une ligne, rythme tendu. */
.esp-lines .v2-line{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:start}
.esp-lines .v2-line-t{grid-column:1}
.esp-lines .esp-state{grid-column:2;margin-top:3px}
.esp-lines .v2-line-t strong{text-wrap:balance}
@media(max-width:640px){
 .esp-lines .v2-line{padding:14px var(--s2);gap:8px}
 .esp-lines .v2-line-t strong{font-size:15px;letter-spacing:-.012em;line-height:1.3}
 .esp-lines .v2-line-t span{font-size:12.5px;line-height:1.5}
 .esp-lines .esp-state{font-size:8.5px;letter-spacing:.06em;padding:3px 6px}
 /* Un libellé de section se replie proprement au lieu de se serrer. */
 .v2-panel>.t-label,.v2-ink>.t-label,.section-label{letter-spacing:.1em;line-height:1.45}
 .v2-panel>.t-label{max-width:30ch}
}

/* Les nombres : même gabarit partout, jamais séparés de leur unité. */
.v2-figure b,.t-num,.t-num-sm,.cmp-table .num,.money,.offer-price,.metric-row strong,
.result-row strong,.v2-line-t span{font-variant-numeric:tabular-nums}
.v2-figure b,.offer-price,.t-num{white-space:nowrap}
.cmp-table .num,.offer-table td{white-space:nowrap}
.v2-figure b i{white-space:nowrap}

/* Le badge d'état : une information de service, pas un bouton. */
.esp-state{font-size:8.5px;letter-spacing:.05em;padding:3px 6px;font-weight:700}
@media(max-width:640px){.esp-lines .esp-state{font-size:8px;letter-spacing:.04em;padding:2px 5px}}

@media(max-width:400px){
 .esp-lines .v2-line-t strong{font-size:14.5px}
}

/* La marque tient dans la hauteur de la barre : elle ne l'étire plus. */
@media(max-width:900px){
 .ws-top-brand img{width:auto;height:42px}
 .ws2 .ws-top{min-height:62px}
}

/* La rangée de l'espace passe réellement en une colonne quand l'aside
   devient trop étroite pour un titre court. */
/* Sur les petits écrans, la ligne rend au titre la largeur que les marges
   internes lui prenaient. */
@media(max-width:400px){
 .esp-lines .v2-line{padding:14px 0;margin:0 -12px;gap:6px}
 .esp-lines .esp-state{font-size:7.5px;padding:2px 4px}
}
/* La marque retrouve sa présence sans étirer la barre. */
@media(max-width:900px){
 .ws-top-brand img{height:48px}
 .ws2 .ws-top{min-height:68px}
}

/* Sous 376 px, la ligne se recompose au lieu de se comprimer : le titre
   prend toute la largeur, l'état passe dessous. */
@media(max-width:375px){
 .esp-lines .v2-line{grid-template-columns:minmax(0,1fr)}
 .esp-lines .esp-state{grid-column:1;justify-self:start;margin-top:4px}
}

/* Sur fond sombre la bascule de langue prend les couleurs du fond,
   sinon le « FR » disparaît dans l'encre. */
.on-dark .dd-language,.hero2-bar .dd-language{color:#8fa1b4}
.on-dark .dd-language strong,.hero2-bar .dd-language strong{color:var(--paper)}
.on-dark .dd-language:hover,.hero2-bar .dd-language:hover{color:var(--paper)}

/* La barre de l'accueil sur mobile : marque, langue, menu, sans collision. */
@media(max-width:1000px){
 .hero2-bar .topbar{flex-wrap:nowrap;gap:10px;align-items:center}
 .hero2-bar .brand img,.topbar .brand img{height:44px;width:auto}
 .hero2-bar .site-navigation,.topbar .site-navigation{display:flex;align-items:center;gap:10px;margin-left:auto}
 .topbar .dd-language{margin-left:0;font-size:9.5px;letter-spacing:.08em;padding:0 4px}
 .home-menu-button{position:static;flex:none}
}

/* Le texte courant d'un panneau garde toujours la même voix. */
.v2 .v2-panel>p:not(.note):not(.t-note),.v2 .v2-ink>p:not(.note):not(.t-note){
  font:400 14.5px/1.7 var(--sans);max-width:62ch}
.v2 .v2-panel>p:not(.note):not(.t-note){color:var(--muted)}

/* Le bouton de menu de l'accueil vit sur fond sombre. */
.hero2-bar .home-menu-button{color:var(--paper);border:1px solid #ffffff40;background:transparent}
.hero2-bar .home-menu-button:hover{background:#ffffff14}

/* Un libellé de bouton qui se replie reste lisible. */
.btn{line-height:1.3;text-align:center}

/* ---------- Premier accès Premium : le système d'abord, la méthode ensuite ---------- */
.prem-term{margin-bottom:var(--s4)}
#programme-purchase h2{margin:0 0 var(--s5);font:400 clamp(24px,3vw,38px)/1.1 var(--brand);
  letter-spacing:-.03em;color:var(--ink-900)}
.prem-steps{list-style:none;margin:0 0 var(--s5);padding:0;display:grid;gap:var(--s4);counter-reset:pstep}
.prem-steps li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:14px;align-items:start;
  padding-top:var(--s4);border-top:1px solid var(--line)}
.prem-steps li:first-child{border-top:0;padding-top:0}
.prem-steps li::before{counter-increment:pstep;content:counter(pstep);
  font:500 15px/1 var(--brand);color:var(--muted);min-width:14px;margin-top:3px}
.prem-steps strong{display:block;font:500 16px/1.35 var(--sans);color:var(--ink-900)}
.prem-steps span{display:block;margin-top:4px;font:400 14px/1.65 var(--sans);color:var(--muted);max-width:58ch}
.prem-cta{margin:0 0 var(--s4)}
.prem-method{margin:0 0 var(--s5)}
.prem-method .text-link{font-size:13px}

/* ---------- Moteur de contenu : une donnée, sa nature, sa source ---------- */
.cm{padding:var(--s6) 0 var(--s8)}
.cm-rows{display:flex;flex-direction:column}
.cm-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--s4);align-items:start;
  padding:var(--s4) 0;border-top:1px solid var(--line)}
.cm-row:first-child{border-top:0;padding-top:0}
.cm-t{min-width:0;display:flex;flex-direction:column;gap:5px}
.cm-t strong{font:600 10.5px/1.3 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.cm-t>span{font:400 15px/1.6 var(--sans);color:var(--ink-900)}
.cm-row.cm-unknown .cm-t>span{color:var(--muted);font-style:italic}
.cm-meth{display:block;margin-top:5px;font:400 12px/1.5 var(--sans);color:var(--muted);font-style:normal}
.cm-src{display:block;margin-top:4px;font:400 11.5px/1.5 var(--sans);color:var(--muted)}
.cm-src a{text-decoration:underline}
.cm-list{margin:0;padding-left:18px;display:grid;gap:9px}
.cm-list li{font:400 14.5px/1.6 var(--sans);color:var(--ink-700)}
.cm-list+.cm-list{margin-top:var(--s4);padding-top:var(--s4);border-top:1px solid var(--line)}
.cm-cover{justify-content:space-between}
.cm-cover .v2-bar{margin-top:var(--s4)}
.cm-table-wrap{overflow-x:auto;max-width:100%}
.cm-table{width:100%;border-collapse:collapse;font:400 13px/1.5 var(--sans);min-width:520px}
.cm-table th{text-align:left;font:600 9.5px/1.3 var(--sans);letter-spacing:.13em;text-transform:uppercase;
  color:var(--muted);padding:0 10px 9px 0;border-bottom:1px solid var(--line);white-space:nowrap}
.cm-table td{padding:10px 10px 10px 0;border-bottom:1px solid var(--line);color:var(--ink-700)}
.cm-table .num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.cm-gaps{background:var(--paper-2)}
.cm-actions .form-actions{margin-top:auto;padding-top:var(--s3)}
.cm-srcs{display:grid;gap:var(--s3)}
.cm-srcrow{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--s3);align-items:baseline;
  padding-top:var(--s3);border-top:1px solid var(--line)}
.cm-srcrow:first-child{border-top:0;padding-top:0}
.cm-srcrow strong{grid-column:1;font:500 14px/1.4 var(--sans);color:var(--ink-900)}
.cm-srcrow>span:not(.cm-status){grid-column:1;font:400 12.5px/1.5 var(--sans);color:var(--muted)}
.cm-status{grid-column:2;grid-row:1;font:600 9px/1.3 var(--sans);letter-spacing:.08em;
  border:1px solid var(--line);border-radius:2px;padding:3px 6px;color:var(--muted);white-space:nowrap}
@media(max-width:640px){
 .cm-row{grid-template-columns:minmax(0,1fr);gap:8px}
 .cm-row .q{justify-self:start}
}

/* ---------- Le bureau d'investissement : la question avant l'outil ---------- */
.desk{display:grid;gap:var(--s5)}

/* Droits en attente : la donnée existe, nous ne pouvons pas encore la publier.
   Ce n'est ni un fait, ni une inconnue. Elle a sa propre lecture. */
.q-rights{color:var(--muted);border:1px solid var(--line);background:var(--paper-2)}
.q-rights::before{background:linear-gradient(90deg,var(--muted) 0 50%,transparent 50%)}
.cm-row.cm-blocked .cm-t>span{color:var(--muted)}
.cm-rights{background:var(--paper-2)}

/* La couche AVANT D'ACHETER ICI. Un bloc, pas une surenchère de panneaux. */
.cm-buy{display:grid;gap:var(--s4)}
.cm-buy .v2-head{margin:0}
.cm-buy .term h2{font:inherit;letter-spacing:inherit;text-transform:inherit;margin:0}
.cm-lead{margin:0;font:400 16px/1.65 var(--sans);color:var(--ink-900)}
.cm-legal-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s4) var(--s5);margin-top:var(--s3)}
.cm-legal-grid article{min-width:0;display:flex;flex-direction:column;gap:7px;
 padding-top:var(--s3);border-top:1px solid var(--line)}
.cm-legal-grid h3{margin:0;font:500 15px/1.35 var(--sans);color:var(--ink-900);letter-spacing:-.01em}
.cm-legal-grid p{margin:0;font:400 14px/1.65 var(--sans);color:var(--ink-700)}
.cm-linked .esp-lines{margin-top:var(--s3)}
@media(max-width:900px){.cm-legal-grid{grid-template-columns:minmax(0,1fr);gap:var(--s4)}}

/* Fil d'Ariane. Balisé et visible : un balisage sans équivalent affiché
   ne décrit rien. Discret, il ne concurrence pas le titre de page. */
.crumb{margin:0 0 var(--s3)}
.crumb ol{display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0;list-style:none;
 font:600 10.5px/1.5 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.crumb li+li::before{content:'/';margin-right:6px;color:var(--line)}
.crumb a{color:var(--muted);text-decoration:none;border-bottom:1px solid transparent}
.crumb a:hover{color:var(--ink-900);border-bottom-color:var(--line)}
.crumb [aria-current]{color:var(--ink-900)}
.on-dark .crumb ol,.boot .crumb ol{color:#8fa3b8}
.boot .crumb a{color:#8fa3b8}
.boot .crumb [aria-current]{color:#d8e2ec}

/* ─────────────────────────────────────────────────────────────────────────
   TYPOGRAPHIE DES NOMBRES — règle globale
   Un chiffre est une mesure, pas un mot. Trois principes tenus partout :
   chiffres tabulaires pour que deux valeurs s'alignent, unité détachée de
   l'approche négative pour qu'elle ne vienne jamais toucher la valeur, et
   valeur insécable pour qu'un pourcentage ne se coupe pas en fin de ligne.
   ───────────────────────────────────────────────────────────────────────── */
.n,.t-num,.t-num-sm,.idx-num,.gap-num,.gap-part-n,.natband-n,.result-big,
.v2-figure b,.v2-versus-mid,.cm-table .num,.esp-state,.delivery-metrics strong,
.preview-numbers strong,td:not(:first-child),th:not(:first-child){
 font-variant-numeric:tabular-nums lining-nums;
 font-feature-settings:'tnum' 1,'lnum' 1}
.n{display:inline-flex;align-items:baseline;white-space:nowrap;max-width:100%}
.nv{letter-spacing:-.018em}
/* L'unité reprend une approche normale et garde sa propre respiration :
   c'est ce détachement qui empêche la virgule et le signe de se toucher. */
.nu{margin-left:.22em;letter-spacing:0;font-size:.62em;font-weight:600;
 align-self:center;color:var(--muted);text-transform:none}
.v2-ink .nu,.on-dark .nu{color:#a9bccf}
.v2-figure b .nu,.t-num .nu{font-size:.34em;margin-left:.16em;letter-spacing:.02em}

/* L'approche négative des grands nombres était trop forte : à 92 px elle
   retirait près de 5 px entre chaque glyphe, ce qui écrasait la virgule
   décimale et collait le signe pour cent au dernier chiffre. Elle est ramenée
   à une valeur qui reste optique sans manger la ponctuation. */
.t-num{letter-spacing:-.022em;font-variant-numeric:tabular-nums lining-nums}
.t-num-sm,.natband-n,.gap-part-n{letter-spacing:-.016em}
.idx-num,.gap-num{letter-spacing:-.024em}
.result-big{letter-spacing:-.022em!important;font-variant-numeric:tabular-nums lining-nums}

/* ─────────────────────────────────────────────────────────────────────────
   COMPOSITION ÉDITORIALE — une idée n'est pas une unité fonctionnelle
   Un cadre sert à isoler une donnée, un état, une interaction ou une
   comparaison. Une idée se compose avec de l'espace, de la typographie et de
   la grille. `.ed` est le bloc de récit : pas de fond, pas de bordure.
   ───────────────────────────────────────────────────────────────────────── */
.ed{min-width:0;display:flex;flex-direction:column;gap:var(--s3);
 background:none;border:0;padding:0}
.ed>h2{margin:0;max-width:20ch}
.ed>p{margin:0;max-width:62ch;font:400 16.5px/1.7 var(--sans);color:var(--ink-700)}
.ed>p.lead{font:400 clamp(17px,1.9vw,21px)/1.62 var(--sans);color:var(--ink-900);max-width:56ch}
.ed .t-label+h2{margin-top:2px}
/* Une section éditoriale respire davantage qu'une grille de données. */
.ed-sec{display:grid;gap:var(--s5);padding:var(--s6) 0;border-top:1px solid var(--line)}
.ed-sec:first-child{border-top:0}
.ed-head{display:grid;gap:var(--s3);grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);
 align-items:end}
.ed-head p{margin:0;max-width:56ch;font:400 16px/1.68 var(--sans);color:var(--ink-700)}
@media(max-width:860px){.ed-head{grid-template-columns:minmax(0,1fr);align-items:start}
 .ed-sec{padding:var(--s5) 0;gap:var(--s4)}}
/* Une liste de destinations lisible : un filet, pas huit cartes identiques. */
.ed-list{display:grid;gap:0}
.ed-list a{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:var(--s4);
 align-items:baseline;padding:var(--s4) 0;border-top:1px solid var(--line);
 text-decoration:none;color:inherit}
.ed-list a:first-child{border-top:0}
.ed-list a:hover .ed-list-t{text-decoration:underline;text-underline-offset:3px}
.ed-list-n{font:600 10.5px/1.6 var(--sans);letter-spacing:.14em;color:var(--muted)}
.ed-list-t{font:500 17.5px/1.35 var(--brand);letter-spacing:-.01em;color:var(--ink-900)}
.ed-list-d{display:block;margin-top:5px;font:400 14.5px/1.6 var(--sans);color:var(--ink-700)}
.ed-list-s{font:600 10px/1.6 var(--sans);letter-spacing:.12em;text-transform:uppercase;
 color:var(--muted);white-space:nowrap}
@media(max-width:620px){.ed-list a{grid-template-columns:auto minmax(0,1fr);gap:var(--s3)}
 .ed-list-s{grid-column:2;margin-top:2px}}

/* Le grand chiffre des figures : même règle que `.n`. L'unité portée par `i`
   sort de l'approche négative et reçoit sa propre respiration, sinon elle
   vient toucher le dernier chiffre aux grandes tailles. */
.v2-figure b{letter-spacing:-.022em;font-variant-numeric:tabular-nums lining-nums}
.v2-figure b i{margin-left:.1em;letter-spacing:.01em;font-size:.32em}

/* CE QUI CHANGE — une chronologie, pas une grille de cartes. */
.chg-mois{display:grid;gap:0;margin-top:var(--s5)}
.chg-mois-t{margin:0 0 var(--s3);font:600 10.5px/1.3 var(--sans);letter-spacing:.16em;
 text-transform:uppercase;color:var(--muted)}
.chg{display:grid;grid-template-columns:minmax(150px,190px) minmax(0,1fr);gap:var(--s5);
 padding:var(--s5) 0;border-top:1px solid var(--line)}
.chg-meta{display:flex;flex-direction:column;align-items:flex-start;gap:9px;min-width:0}
.chg-meta time{font:600 12.5px/1.4 var(--sans);color:var(--ink-900);font-variant-numeric:tabular-nums}
.chg-cat{font:600 9.5px/1.3 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.chg-body{min-width:0;display:flex;flex-direction:column;gap:10px}
.chg-body h3{margin:0;font:400 clamp(19px,2.1vw,25px)/1.24 var(--brand);letter-spacing:-.015em;
 color:var(--ink-900);max-width:36ch}
.chg-body p{margin:0;font:400 15.5px/1.68 var(--sans);color:var(--ink-700);max-width:66ch}
.chg-imp{padding-top:var(--s3);border-top:1px solid var(--line)}
.chg-imp .t-label{display:block;margin-bottom:5px}
.chg-foot{display:flex;flex-wrap:wrap;gap:6px var(--s4);align-items:baseline;margin-top:2px}
.chg-zones{font:400 12.5px/1.5 var(--sans);color:var(--muted)}
.chg-zones a{color:var(--muted);text-decoration:underline;text-underline-offset:2px}
.chg-list .chg:first-child{border-top:0}
@media(max-width:760px){.chg{grid-template-columns:minmax(0,1fr);gap:var(--s3);padding:var(--s4) 0}
 .chg-meta{flex-direction:row;align-items:center;gap:10px;flex-wrap:wrap}}

/* L'ESPACE — une seule action principale, puis trois couches décroissantes. */
.now{display:grid;grid-template-columns:minmax(0,1.62fr) minmax(0,1fr);gap:var(--s6);
 padding:var(--s6);border-radius:var(--r-md);margin-bottom:var(--s3)}
.now-l{min-width:0;display:flex;flex-direction:column;gap:var(--s3)}
.now-l h2{margin:0;font:400 clamp(27px,3.6vw,46px)/1.08 var(--brand);letter-spacing:-.025em;color:var(--paper)}
.now-l>p{margin:0;max-width:52ch;font:400 16px/1.68 var(--sans);color:#b9c8d8}
.now-figs{display:flex;flex-wrap:wrap;gap:var(--s5);margin-top:2px}
.now-figs .v2-figure b{font-size:clamp(30px,3.4vw,46px)}
.now-next{margin:var(--s3) 0 0;padding-top:var(--s3);border-top:1px solid #ffffff1f;
 display:flex;flex-direction:column;gap:5px}
.now-next strong{font:500 17.5px/1.35 var(--brand);letter-spacing:-.01em;color:var(--paper)}
.now-next>span:not(.t-label){font:400 14.5px/1.6 var(--sans);color:#a9bccf}
.now-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:var(--s3)}
.now-r{min-width:0;display:flex;flex-direction:column;gap:var(--s3);
 padding-left:var(--s5);border-left:1px solid #ffffff1f}
.now-chg{list-style:none;margin:0;padding:0;display:grid;gap:var(--s3)}
.now-chg li{display:grid;gap:4px}
.now-chg time{font:600 11px/1.3 var(--sans);letter-spacing:.06em;color:#8fa3b8;
 font-variant-numeric:tabular-nums}
.now-chg a{font:400 14.5px/1.5 var(--sans);color:var(--paper);text-decoration:none;
 border-bottom:1px solid #ffffff2b;display:inline}
.now-chg a:hover{border-bottom-color:var(--paper)}
.desk2 .ed-sec:first-of-type{border-top:0}
@media(max-width:900px){.now{grid-template-columns:minmax(0,1fr);gap:var(--s4);padding:var(--s4)}
 .now-r{padding-left:0;padding-top:var(--s4);border-left:0;border-top:1px solid #ffffff1f}
 .now-figs{gap:var(--s4)}}

/* Les quatre natures sur l'accueil : quatre colonnes ouvertes, sans cadre. */
.home-nat{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s4) var(--s5)}
.home-nat-i{min-width:0;display:flex;flex-direction:column;gap:10px;
 padding-top:var(--s3);border-top:1px solid var(--line)}
.home-nat-i p{margin:0;font:400 14.5px/1.62 var(--sans);color:var(--ink-700)}
@media(max-width:1000px){.home-nat{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.home-nat{grid-template-columns:minmax(0,1fr);gap:var(--s3)}}

/* Sur fond sombre, l'action principale était peinte en bleu nuit sur bleu
   nuit : le remplissage disparaissait et elle se retrouvait à égalité visuelle
   avec l'action secondaire. La règle vaut pour toute surface sombre, pas pour
   ce bouton-là : l'encre et le papier s'inversent avec le fond.
   La spécificité reprend celle de la règle de base, sinon elle ne passe pas. */
.v2-ink .btn:not(.outline):not(.light):not(.text-link),
.on-dark .btn:not(.outline):not(.light):not(.text-link),
.now-cta .btn:not(.outline):not(.light):not(.text-link){
 background:var(--paper);color:var(--ink-900);border-color:var(--paper)}
.v2-ink .btn:not(.outline):not(.light):not(.text-link):hover,
.on-dark .btn:not(.outline):not(.light):not(.text-link):hover,
.now-cta .btn:not(.outline):not(.light):not(.text-link):hover{background:#fff;border-color:#fff}
/* Et l'action secondaire sur fond sombre reste lisible sans devenir lourde. */
.v2-ink .btn.outline,.on-dark .btn.outline{color:var(--paper);border-color:#ffffff47;background:transparent}
.v2-ink .btn.outline:hover,.on-dark .btn.outline:hover{border-color:var(--paper)}
.now-cta .b-ghost{color:var(--paper);border:1px solid #ffffff3d;background:transparent;
 display:inline-flex;align-items:center;min-height:48px;padding:0 20px;border-radius:var(--r-sm);
 font:600 14px/1 var(--sans);text-decoration:none}
.now-cta .b-ghost:hover{border-color:#ffffff7a}
/* Le lien de bas de colonne ne doit pas se lire comme une ligne de liste vide. */
.now-r>.text-link{align-self:flex-start;border-top:0;margin-top:2px}
/* Les trois repères du hero tiennent sur une ligne au téléphone. */
@media(max-width:620px){}

/* Les liens de zone sous une entrée de changement sont de la navigation, pas
   du texte courant : ils doivent rester atteignables au pouce. */
.chg-zones{display:flex;flex-wrap:wrap;gap:0 10px;align-items:center}
.chg-zones a{display:inline-flex;align-items:center;min-height:40px;padding:0 2px}

/* Le fil d'Ariane : ses éléments mesurent 44 px de haut pour rester
   atteignables, mais le séparateur se calait en haut de cette boîte pendant
   que le lien se calait sur sa ligne de base, ce qui le faisait paraître
   décroché. Tout est centré sur le même axe. */
.crumb{margin:0 0 var(--s3)}
.crumb ol{align-items:center;row-gap:2px}
.crumb li{display:inline-flex;align-items:center;min-height:44px}
.crumb li+li::before{line-height:1;display:inline-flex;align-items:center}

/* ═════════════════════════════════════════════════════════════════════════
   SYSTÈME TYPOGRAPHIQUE
   Trois voix, trois fonctions. Un serif de titrage qui donne le registre
   éditorial, une grotesque pour le texte courant, un monospace pour tout ce
   qui est preuve : source, date, référence, état. Cette troisième voix est
   ce qui fait lire une fiche comme un document de recherche et non comme une
   page de site.
   ═════════════════════════════════════════════════════════════════════════ */
h1{font:400 clamp(34px,5vw,66px)/1.045 var(--brand);letter-spacing:-.012em}
h2{font:400 clamp(25px,3.2vw,42px)/1.12 var(--brand);letter-spacing:-.01em}
h3{font:500 clamp(18px,1.9vw,22px)/1.3 var(--brand);letter-spacing:-.004em}
h1 em,h2 em,h3 em{font-style:italic;font-weight:300}
/* Les chiffres restent en grotesque : une mesure se lit mieux en linéale,
   et c'est elle qui porte les chiffres tabulaires. */
.t-num,.t-num-sm,.idx-num,.gap-num,.gap-part-n,.natband-n,.result-big,
.v2-figure b,.nv,.n{font-family:var(--grot)}
.v2-figure b{font-weight:500}
/* La voix des preuves. */
.t-label,.section-label,.eyebrow,.cm-src,.cm-status,.chg-cat,.ed-list-n,.ed-list-s,
.term,.doc-ref,.now-chg time,.chg-meta time,.q{font-family:var(--mono)}
.t-label,.section-label,.eyebrow{font-weight:500;letter-spacing:.13em}
.cm-src{font-size:11px;letter-spacing:.01em}
.q{font-weight:500;letter-spacing:.09em}
.term{letter-spacing:.11em}

/* Mesures de lecture. Une colonne de texte éditorial ne s'étale pas dans la
   largeur disponible : elle est calibrée pour l'œil. */
.ed>p{max-width:68ch;font:400 16.5px/1.74 var(--sans);color:var(--ink-700)}
.ed>p.lead{max-width:56ch;font:400 clamp(17px,1.9vw,20.5px)/1.6 var(--sans);color:var(--ink-900)}
.ed>h2{max-width:17ch}
.ed-head p{max-width:58ch;font:400 16px/1.74 var(--sans)}
.chg-body p{max-width:70ch}
.chg-body h3{font:400 clamp(19px,2.1vw,26px)/1.22 var(--brand);max-width:34ch}

/* ── JUSTIFICATION ────────────────────────────────────────────────────────
   Justifié seulement là où la colonne est assez large pour que le gris
   typographique reste régulier : paragraphes éditoriaux et analyses. Jamais
   les titres, les labels, les listes, les descriptions courtes, le microcopy.
   Sous 720 px la colonne descend vers quarante caractères : à cette mesure la
   justification creuse des rivières, on reste donc en drapeau. */
@media(min-width:720px){
 .ed>p,.ed-head p,.chg-body>p:not(.chg-imp):not(.note),
 .cm-lead,.article-body>p,.docp-body>p,.now-l>p{
  text-align:justify;text-justify:inter-word;text-align-last:left;
  hyphens:auto;-webkit-hyphens:auto;-ms-hyphens:auto}
}
/* En drapeau comme en justifié, on coupe proprement plutôt que de laisser un
   mot long créer un trou. */
.ed>p,.ed-head p,.chg-body p,.cm-lead,.article-body>p{overflow-wrap:break-word}
/* Ce qui ne se justifie jamais, quelle que soit la largeur. */
.t-label,.section-label,.eyebrow,.note,.ed-list-d,.ed-list-t,.cm-src,
h1,h2,h3,h4,.btn,.b,td,th,li{text-align:inherit;hyphens:manual}
.note{max-width:64ch;font:400 13px/1.64 var(--sans);color:var(--muted)}

/* ── ANNOTATION MARGINALE ─────────────────────────────────────────────────
   Le texte porte l'idée, la marge porte la preuve. C'est la composition d'un
   appareil critique : elle dit visuellement que chaque affirmation a une
   provenance{display:grid;grid-template-columns:minmax(0,1fr) minmax(170px,230px);
 gap:var(--s4) var(--s6);align-items:start}
@media(max-width:860px){}
@media(max-width:520px){}

/* ── EXTRAIT DE DOCUMENT ──────────────────────────────────────────────────
   Ce qu'on vous envoie, montré comme une pièce et non comme une citation
   décorative : papier, filet{position:relative;background:var(--paper-2);border:1px solid var(--line);
 border-radius:2px;padding:var(--s5) var(--s5) var(--s4)}

/* ── FIGURE DE MISE EN SCÈNE ──────────────────────────────────────────────
   Une donnée importante ne se pose pas dans un tableau : elle occupe. */
.pull{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--s5) var(--s6);
 align-items:center;padding:var(--s6) 0;border-top:1px solid var(--line);
 border-bottom:1px solid var(--line)}
@media(max-width:700px){.pull{grid-template-columns:minmax(0,1fr);gap:var(--s3);padding:var(--s5) 0}}

/* ── BANDE IMMOBILIÈRE ────────────────────────────────────────────────────
   De la ville réelle dans le produit, avec sa légende et son crédit. Une
   image porte une information, pas une ambiance. */
.band{position:relative;margin:var(--s6) 0;border-radius:var(--r-md);overflow:hidden;
 background:var(--ink-900)}
.band img{display:block;width:100%;height:clamp(260px,42vw,460px);object-fit:cover;
 opacity:.82}
.band-in{position:absolute;inset:auto 0 0 0;padding:var(--s6);
 background:linear-gradient(transparent,#060d18e0 62%);
 display:grid;gap:var(--s3);align-items:end}
.band-in h2{margin:0;color:var(--paper);max-width:16ch}
.band-in p{margin:0;max-width:56ch;font:400 15.5px/1.68 var(--sans);color:#c6d3e0}
.band-cr{font:400 10.5px/1.5 var(--mono);color:#8fa3b8;letter-spacing:.06em}
.band-cr a{color:#8fa3b8;text-decoration:underline;text-underline-offset:2px}
.band-d{display:flex;flex-wrap:wrap;gap:var(--s5);margin-top:4px}
.band-d div{display:grid;gap:3px}
.band-d b{font:500 clamp(22px,3vw,34px)/1 var(--grot);color:var(--paper);
 font-variant-numeric:tabular-nums}
.band-d span{font:500 9.5px/1.4 var(--mono);letter-spacing:.13em;text-transform:uppercase;color:#8fa3b8}
@media(max-width:700px){.band-in{padding:var(--s4)}.band-d{gap:var(--s4)}}

/* ── SIGNATURE DE ZONE ────────────────────────────────────────────────────
   Cinq signaux, lus en bloc. Les états ont chacun leur marque : plein pour
   ce qui existe, creux pour ce qui manque, trait pour ce qui est annoncé. */
.sig{padding:var(--s5) 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
 display:grid;gap:var(--s4)}
.sig-h{display:flex;flex-wrap:wrap;gap:8px var(--s4);align-items:baseline;justify-content:space-between}
.sig-c{font:400 11px/1.4 var(--mono);color:var(--muted);letter-spacing:.04em}
.sig-l{list-style:none;margin:0;padding:0;display:grid;
 grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--s4) var(--s5)}
.sig-l li{min-width:0;display:grid;gap:6px;align-content:start;
 padding-top:var(--s3);border-top:2px solid var(--line)}
.sig-l li[data-e="oui"]{border-top-color:var(--ink-900)}
.sig-l li[data-e="annonce"]{border-top-color:var(--assum-ink,#7a5a23)}
.sig-l li i{width:8px;height:8px;border-radius:50%;background:var(--ink-900)}
.sig-l li[data-e="non"] i{background:transparent;border:1.5px solid var(--line)}
.sig-l li[data-e="annonce"] i{background:repeating-linear-gradient(135deg,var(--assum-ink,#7a5a23) 0 2px,transparent 2px 4px)}
.sig-t{font:500 13.5px/1.35 var(--sans);color:var(--ink-900)}
.sig-v{font:500 9.5px/1.4 var(--mono);letter-spacing:.13em;color:var(--muted)}
.sig-l li[data-e="oui"] .sig-v{color:var(--ink-900)}
.sig-p{font:400 12.5px/1.55 var(--sans);color:var(--muted)}
@media(max-width:1000px){.sig-l{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:480px){.sig-l{grid-template-columns:minmax(0,1fr);gap:var(--s3)}}

/* ── POSITION D'UN PROGRAMME ──────────────────────────────────────────────
   Trois états, et un seul allumé. C'est la distinction que les brochures
   effacent : annoncé, en chantier, livré. */
.tl{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s4);
 padding:var(--s4) 0;margin:var(--s3) 0}
.tl-s{min-width:0;display:grid;gap:5px;align-content:start;padding-top:var(--s3);
 border-top:2px solid var(--line);opacity:.45}
.tl-s.done{opacity:.7}
.tl-s.on{opacity:1;border-top-color:var(--ink-900)}
.tl-s i{width:9px;height:9px;border-radius:50%;border:1.5px solid var(--line)}
.tl-s.done i,.tl-s.on i{background:var(--ink-900);border-color:var(--ink-900)}
.tl-s b{font:500 10px/1.4 var(--mono);letter-spacing:.13em;color:var(--ink-900)}
.tl-s span{font:400 12.5px/1.5 var(--sans);color:var(--muted)}
@media(max-width:520px){.tl{grid-template-columns:minmax(0,1fr);gap:var(--s3)}}

/* ── LE DOSSIER ACTIF ─────────────────────────────────────────────────────
   Une pièce référencée, pas une carte de tableau de bord : une référence
   lisible, un titre qui occupe, et une seule chose à faire ensuite. */
.now{position:relative;border:1px solid #ffffff1c}
.now::after{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;
 background:linear-gradient(var(--accent,#d9662e),transparent 78%)}
.now-ref{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px var(--s4);
 padding-bottom:var(--s3);border-bottom:1px solid #ffffff1f}
.now-ref-n{margin-left:auto;font:500 11px/1.4 var(--mono);letter-spacing:.12em;color:#8fa3b8}
.now-l h2{font-family:var(--brand);font-weight:400}
.now-next strong{font-family:var(--brand);font-weight:500;font-size:19px}
/* La prochaine action se distingue du reste par un filet, pas par une carte. */
.now-next{position:relative;padding-left:var(--s4);border-left:2px solid var(--accent,#d9662e);
 border-top:0;padding-top:0;margin-top:var(--s4)}

/* ── MICRO-INTERACTIONS ───────────────────────────────────────────────────
   Sobres et utiles : la provenance se révèle au survol, l'état de
   qualification se précise. Rien qui retarde la lecture. */
.cm-row{transition:background .18s ease}
.cm-row:hover{background:var(--paper-2)}
.cm-row .cm-src{opacity:.72;transition:opacity .18s ease}
.cm-row:hover .cm-src{opacity:1}
.q{transition:border-color .18s ease,color .18s ease}
.cm-row:hover .q-unknown{border-color:var(--unknown-ink)}
.ed-list a{transition:background .18s ease,padding-left .18s ease}
.ed-list a:hover{background:var(--paper-2);padding-left:6px}
.sig-l li{transition:border-top-color .18s ease}
.band img{transition:opacity .5s ease,transform .7s ease}
.band:hover img{opacity:.9;transform:scale(1.014)}
@media(prefers-reduced-motion:reduce){
 .band img,.ed-list a,.cm-row,.q{transition:none}
 .band:hover img{transform:none}}

/* Le titrage a hérité d'une approche dessinée pour une linéale : appliquée à
   un serif de texte, elle fait se toucher les pleins. On la détend partout où
   la famille de titrage est en place, sans toucher aux chiffres, qui gardent
   la leur. */
h1,h2,h3,h4,.hero2-left h1,.welcome-proof h2,.band-in h2,.now-l h2,
.empty-state h3,.bs-card h2,.exp-card h2,.chg-body h3,.ed>h2{
 letter-spacing:-.011em!important}
.hero2-left h1{font-weight:400;line-height:1.02}
.hero2-left h1 em{font-weight:300}
/* Le sous-titre de section garde une descente d'œil régulière sous le serif. */
.ed>h2+p,.ed-head p{margin-top:0}

/* ── RÈGLE DE JUSTIFICATION, ÉTABLIE PAR MESURE ───────────────────────────
   Mesuré sur la production, sans dictionnaire de césure : à cinquante
   caractères par ligne le plus grand blanc inter-mots monte à 2,6 fois
   l'espace normal, ce qui creuse des rivières visibles. À soixante-quinze il
   retombe à 2,08, et la césure automatique le réduit encore sur les
   navigateurs qui disposent du dictionnaire français ou anglais.
   La justification est donc réservée aux colonnes réellement longues, à
   partir de 1200 px de fenêtre. En dessous, drapeau, avec une découpe de
   ligne soignée. Jamais sur fond sombre, où le blanc se voit davantage, ni
   sur les descriptions courtes, les listes, les labels et le microcopy. */
.now-l>p,.band-in p{text-align:left;hyphens:manual;text-wrap:pretty}
@media(max-width:1199px){
 .ed>p,.ed-head p,.chg-body>p:not(.chg-imp):not(.note),.cm-lead,
 .article-body>p,.docp-body>p{text-align:left;hyphens:auto;text-wrap:pretty}
}
@media(min-width:1200px){
 .ed>p,.ed-head p,.chg-body>p:not(.chg-imp):not(.note),.cm-lead,
 .article-body>p,.docp-body>p{
  text-align:justify;text-justify:inter-word;text-align-last:left;
  hyphens:auto;-webkit-hyphens:auto;-ms-hyphens:auto}
}
.ed-list-d,.note,.sig-p{text-wrap:pretty;hyphens:manual}

/* ── OUVERTURE D'UNE FICHE QUARTIER ───────────────────────────────────────
   Un titre éditorial et la phrase qui situe la zone, avec les trois compteurs
   qui disent d'emblée ce que la fiche sait et ce qu'elle ignore. */
.cm-open{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);
 gap:var(--s5) var(--s6);align-items:end;padding:var(--s5) 0 var(--s6)}
.cm-open-t{min-width:0;display:flex;flex-direction:column;gap:var(--s3)}
.cm-open-h{margin:0;font:400 clamp(34px,5.4vw,68px)/1.02 var(--brand);
 letter-spacing:-.014em;color:var(--ink-900)}
.cm-open-l{margin:0;max-width:52ch;font:400 clamp(16.5px,1.8vw,19.5px)/1.62 var(--sans);
 color:var(--ink-700);text-wrap:pretty}
.cm-open-m{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s4);
 padding-top:var(--s3);border-top:1px solid var(--line)}
.cm-open-m div{display:grid;gap:4px;min-width:0}
.cm-open-m b{font:500 clamp(26px,3.2vw,38px)/1 var(--grot);letter-spacing:-.02em;
 color:var(--ink-900);font-variant-numeric:tabular-nums lining-nums}
.cm-open-m b i{font-style:normal;font-size:.5em;color:var(--muted);letter-spacing:0}
.cm-open-m span{font:500 9px/1.4 var(--mono);letter-spacing:.12em;color:var(--muted)}
@media(max-width:860px){.cm-open{grid-template-columns:minmax(0,1fr);gap:var(--s4);
 align-items:start;padding:var(--s4) 0 var(--s5)}}

/* La colonne éditoriale d'une fiche était étranglée pendant que le panneau de
   couverture occupait une surface presque vide. On rend la place au texte et
   on laisse le panneau épouser son contenu. */
.cm-top{grid-template-columns:minmax(0,1.95fr) minmax(250px,.8fr)!important;align-items:start}
.cm-top .cm-cover{position:sticky;top:var(--s4);align-self:start}
@media(max-width:1000px){.cm-top{grid-template-columns:minmax(0,1fr)!important}
 .cm-top .cm-cover{position:static}}

/* Une bande d'entrée de silo, plus basse qu'une bande d'accueil. */
.band-sm img{height:clamp(200px,26vw,300px)}
.band-sm .band-in{padding:var(--s5)}
.band-sm .band-in h2{font-size:clamp(23px,2.6vw,34px)}

/* ═════════════════════════════════════════════════════════════════════════
   PROSE ÉDITORIALE — UNE SEULE DÉFINITION
   Audit machine du 22/09 sur treize pages : quarante-trois blocs longs
   étaient justifiés et trente-huit blocs comparables ne l'étaient pas, dont
   un jeu de paragraphes servis sur 1064 px, soit environ cent trente signes
   par ligne. Trois cas relevaient d'une vraie incohérence, les autres sont
   des leads, des notes ou des surfaces sombres, volontairement en drapeau.
   `.editorial-prose` est le point d'entrée : un nouveau bloc éditorial prend
   cette classe et hérite de la règle, sans qu'on ait à toucher au CSS.
   ═════════════════════════════════════════════════════════════════════════ */
.editorial-prose,.ed>p,.ed-head p,.chg-body>p:not(.note),.cm-lead,
.article-body>p,.docp-body>p,.card>p,.cm-legal-grid article p{
 max-width:70ch;overflow-wrap:break-word}
@media(max-width:1199px){
 .editorial-prose,.ed>p,.ed-head p,.chg-body>p:not(.note),.cm-lead,
 .article-body>p,.docp-body>p,.card>p,.cm-legal-grid article p{
  text-align:left;hyphens:auto;text-wrap:pretty}
}
@media(min-width:1200px){
 .editorial-prose,.ed>p,.ed-head p,.chg-body>p:not(.note),.cm-lead,
 .article-body>p,.docp-body>p,.card>p,.cm-legal-grid article p{
  text-align:justify;text-justify:inter-word;text-align-last:left;
  hyphens:auto;-webkit-hyphens:auto;-ms-hyphens:auto}
}
/* Ce qui reste en drapeau par nature, et non par oubli : un chapô se lit
   d'un trait, une note est un aparté, et sur fond sombre le blanc se voit. */
.cm-open-l,.hero2-left p,.v2-note,.note,.band-in p,.v2-ink>p,
.now-l>p,.ed-list-d,.sig-p{
 text-align:left;hyphens:manual;text-wrap:pretty}

/* ══ LA MÉMOIRE DU COMPTE ═══════════════════════════════════════════════════
   Trois surfaces nouvelles, une seule grammaire : le filet plutôt que la
   carte, le libellé technique en petites capitales, le titre en serif. Rien
   ici ne ressemble à un widget de tableau de bord. */

/* Le contrôle « suivre ». Discret quand il ne l'est pas, plein quand il l'est :
   l'état doit se lire d'un coup d'œil, sans relire le libellé. */
.cm-open-k{grid-column:1/-1;margin-top:var(--s4);padding-top:var(--s4);border-top:1px solid var(--line)}
.keep{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 18px;
 border:1px solid var(--ink-600);border-radius:var(--r-sm);background:transparent;
 color:var(--ink-900);cursor:pointer;
 font:600 11px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;
 transition:background .18s ease,color .18s ease,border-color .18s ease}
.keep i{width:7px;height:7px;flex:none;border-radius:50%;border:1.5px solid currentColor}
.keep:hover{background:var(--paper-2)}
.keep.on{background:var(--ink-900);border-color:var(--ink-900);color:var(--paper)}
.keep.on i{background:var(--mark-soft);border-color:var(--mark-soft)}
.keep:focus-visible{outline:2px solid var(--mark);outline-offset:3px}

/* REPRENDRE LE FIL, dans l'espace. Une pièce large à gauche, trois colonnes de
   filets à droite. Sur mobile la pièce passe au-dessus, les colonnes se
   suivent : aucune n'est réduite à une bande illisible. */
.cont-grid{display:grid;gap:var(--s5);margin-top:var(--s5)}
.cont-reprise{display:block;padding:var(--s5);border:1px solid var(--ink-900);
 border-radius:var(--r-sm);background:var(--ink-900);color:var(--paper);text-decoration:none}
.cont-reprise strong{display:block;margin:var(--s3) 0 6px;
 font:400 clamp(22px,3vw,30px)/1.15 var(--brand);letter-spacing:-.02em;color:var(--paper)}
.cont-reprise .t-label{color:var(--mark-soft)}
.cont-reprise .cont-m{color:var(--muted-dark)}
.cont-go{display:inline-block;margin-top:var(--s4);padding-bottom:3px;
 border-bottom:1px solid var(--mark-soft);color:var(--paper);
 font:600 11px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase}
.cont-reprise:hover .cont-go{border-bottom-color:var(--paper)}
.cont-cols{display:grid;gap:var(--s5)}
.cont-col ul{list-style:none;margin:var(--s3) 0 0;padding:0}
.cont-col li{border-top:1px solid var(--line)}
.cont-col li a{display:block;padding:11px 0;text-decoration:none;color:inherit;min-height:44px}
.cont-col li a:hover .cont-t{text-decoration:underline;text-underline-offset:3px}
.cont-t{display:block;font:500 15.5px/1.35 var(--brand);letter-spacing:-.01em;color:var(--ink-900)}
.cont-m{display:block;margin-top:3px;font:600 10px/1.5 var(--sans);letter-spacing:.11em;
 text-transform:uppercase;color:var(--muted)}
.cont-vide{margin:var(--s3) 0 0;font:400 14px/1.6 var(--sans);color:var(--muted)}
.cont .note{margin-top:var(--s5)}
@media(min-width:900px){
 .cont-grid{grid-template-columns:minmax(0,.86fr) minmax(0,1.6fr);align-items:start}
 .cont-cols{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s5)}
}

/* MES REPÈRES. Une ligne = un repère et son retrait. Le bouton de retrait ne
   crie pas : il n'est pas l'action principale de la page. */
.rep-list{display:grid;gap:0;margin-top:var(--s3)}
.rep-row{display:flex;align-items:center;gap:var(--s4);
 padding:var(--s3) 0;border-top:1px solid var(--line)}
.rep-list>.rep-row:first-child,.rep-card:first-child .rep-row{border-top:0}
.rep-row>a{flex:1 1 auto;min-width:0;text-decoration:none;color:inherit;min-height:44px;
 display:flex;flex-direction:column;justify-content:center}
.rep-row>a strong{font:500 16px/1.35 var(--brand);letter-spacing:-.01em;color:var(--ink-900)}
.rep-row>a span{margin-top:3px;font:600 10px/1.5 var(--sans);letter-spacing:.11em;
 text-transform:uppercase;color:var(--muted)}
.rep-row>a:hover strong{text-decoration:underline;text-underline-offset:3px}
.rep-x{flex:none;min-height:40px;padding:0 12px;border:1px solid var(--line);
 border-radius:var(--r-sm);background:transparent;color:var(--muted);cursor:pointer;
 font:600 10px/1 var(--sans);letter-spacing:.11em;text-transform:uppercase}
.rep-x:hover{border-color:var(--ink-600);color:var(--ink-900)}
.rep-card{border-top:1px solid var(--line)}
.rep-card .rep-row{border-top:0}
.rep-lines{list-style:none;margin:0 0 var(--s3);padding:0 0 0 var(--s4);
 border-left:2px solid var(--sand)}
.rep-lines li{font:400 13.5px/1.7 var(--sans);color:var(--ink-700);
 font-variant-numeric:tabular-nums lining-nums}
.rep-vide{margin:var(--s3) 0 0;font:400 14.5px/1.7 var(--sans);color:var(--muted)}
.rep .banner{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s4)}

/* ══ LE VERROU QUI EXPLIQUE ═════════════════════════════════════════════════
   Un bloc fermé garde la même matière que les blocs ouverts : même filet,
   même papier. Il se distingue par une barre marquée, pas par un flou. */
.lk{border:1px solid var(--line);border-radius:var(--r-sm);background:var(--paper);
 margin-top:var(--s5);overflow:hidden}
.lk+.lk{margin-top:var(--s4)}
.lk>summary{list-style:none;cursor:pointer;display:block;padding:0}
.lk>summary::-webkit-details-marker{display:none}
.lk>summary:focus-visible{outline:2px solid var(--mark);outline-offset:-2px}
.lk-prev{padding:var(--s5) var(--s5) 0}
.lk-prev .t-label{color:var(--muted)}
.lk-prev p{margin:8px 0 0;font:400 15.5px/1.7 var(--sans);color:var(--ink-700);max-width:70ch}
.lk-prev strong{font-variant-numeric:tabular-nums lining-nums}
.lk-bar{display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap;
 min-height:52px;padding:var(--s3) var(--s5);margin-top:var(--s4);
 border-top:1px solid var(--line);background:var(--paper-2)}
.lk-bar i{width:9px;height:9px;flex:none;border-radius:2px;background:var(--mark);
 box-shadow:0 0 0 4px var(--mark-glow)}
.lk-t{font:600 11px/1.4 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-900)}
.lk-lvl{font:600 10px/1.4 var(--sans);letter-spacing:.12em;padding:4px 8px;border-radius:var(--r-xs);
 background:var(--ink-900);color:var(--paper)}
.lk-more{margin-left:auto;font:600 10.5px/1.4 var(--sans);letter-spacing:.12em;
 text-transform:uppercase;color:var(--mark);border-bottom:1px solid currentColor;padding-bottom:2px}
.lk[open] .lk-more::after{content:" ↑"}
.lk:not([open]) .lk-more::after{content:" ↓"}
.lk-panel{display:grid;gap:var(--s5);padding:var(--s5);border-top:1px solid var(--line)}
.lk-panel p{margin:8px 0 0;font:400 15.5px/1.75 var(--sans);color:var(--ink-700);max-width:70ch}
.lk-lv{border-left:2px solid var(--sand);padding-left:var(--s4)}
.lk-lv-r{padding:var(--s3) 0;border-bottom:1px solid var(--line)}
.lk-lv-r:last-of-type{border-bottom:0}
.lk-lv-r strong{display:block;margin-top:4px;font:500 18px/1.3 var(--brand);
 letter-spacing:-.01em;color:var(--ink-900)}
.lk-price{display:block;margin-top:4px;font:600 11px/1.5 var(--sans);letter-spacing:.06em;color:var(--mark)}
.lk-sans{margin-top:var(--s3)}
.lk-sans .t-label{display:block;margin-bottom:4px}
@media(min-width:900px){.lk-panel{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr)}}

/* ══ LES OFFRES ═════════════════════════════════════════════════════════════
   Pas une grille de tarifs. Une question, trois réponses, puis chaque offre
   écrite en entier, l'une après l'autre. */
.of-ou{display:grid;gap:0;margin:var(--s6) 0 var(--s8)}
.of-ou-c{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:var(--s4);
 align-items:center;padding:var(--s5) 0;border-top:1px solid var(--line);
 text-decoration:none;color:inherit;transition:background .18s ease,padding-left .18s ease}
.of-ou-c:hover{background:var(--paper-2);padding-left:6px}
.of-ou-n{font:600 10.5px/1.6 var(--sans);letter-spacing:.14em;color:var(--muted)}
.of-ou-q{font:400 clamp(19px,2.4vw,27px)/1.3 var(--brand);letter-spacing:-.02em;color:var(--ink-900)}
.of-ou-a{text-align:right;white-space:nowrap}
.of-ou-a strong{display:block;font:600 10.5px/1.5 var(--sans);letter-spacing:.12em;color:var(--ink-900)}
.of-ou-a span{font:600 12px/1.5 var(--sans);color:var(--mark);font-variant-numeric:tabular-nums}
@media(max-width:700px){.of-ou-c{grid-template-columns:auto minmax(0,1fr)}
 .of-ou-a{grid-column:2;text-align:left;margin-top:6px}}

.of-bloc{padding:var(--s7) 0;border-top:2px solid var(--ink-900)}
.of-bloc.of-ici{position:relative}
.of-head{max-width:78ch}
.of-head h2{margin:var(--s3) 0 0;font:400 clamp(28px,4vw,46px)/1.08 var(--brand);
 letter-spacing:-.03em;color:var(--ink-900)}
.of-lede{margin:var(--s4) 0 0;font:400 16.5px/1.75 var(--sans);color:var(--ink-700);max-width:70ch}
.of-body{display:grid;gap:var(--s6);margin-top:var(--s6)}
.of-price .v2-figure b{font:400 clamp(38px,6vw,62px)/1 var(--brand);letter-spacing:-.03em;
 font-variant-numeric:tabular-nums lining-nums;display:block;color:var(--ink-900)}
.of-price .v2-figure .lab{display:block;margin-top:8px;font:600 10.5px/1.5 var(--sans);
 letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.of-tag{display:inline-block;margin-top:var(--s4);padding:5px 10px;border-radius:var(--r-xs);
 font:600 10px/1.4 var(--sans);letter-spacing:.12em;text-transform:uppercase;
 background:var(--ink-900);color:var(--paper)}
.of-tag-q{background:transparent;color:var(--muted);border:1px solid var(--line)}
.of-price .form-actions{margin-top:var(--s4)}
.of-l{margin-top:var(--s5)}
.of-l:first-child{margin-top:0}
.of-l ul{list-style:none;margin:var(--s3) 0 0;padding:0}
.of-l li{position:relative;padding:9px 0 9px var(--s5);border-top:1px solid var(--line);
 font:400 15px/1.65 var(--sans);color:var(--ink-700)}
.of-l li::before{content:"";position:absolute;left:0;top:17px;width:10px;height:1px;background:var(--ink-600)}
.of-non li{color:var(--muted)}
.of-non li::before{background:var(--mark)}
.of-res{margin-top:var(--s5);padding-top:var(--s4);border-top:1px solid var(--ink-900)}
.of-res .t-label{display:block;margin-bottom:6px}
.of-res strong{font:400 clamp(18px,2.2vw,24px)/1.35 var(--brand);letter-spacing:-.02em;color:var(--ink-900)}
.of-credit{margin-top:var(--s5);padding:var(--s4);border-left:2px solid var(--mark);
 background:var(--paper-2);font:400 14.5px/1.7 var(--sans);color:var(--ink-700)}
.of-credit .t-label{display:block;margin-bottom:6px;color:var(--mark)}
.of-credit-on{border-left-color:var(--ink-900)}
@media(min-width:900px){.of-body{grid-template-columns:minmax(0,.7fr) minmax(0,1.5fr);gap:var(--s8)}
 .of-price{position:sticky;top:var(--s5);align-self:start}}


.of-non-v{margin-top:var(--s8)}
.of-non-g{display:grid;gap:0;margin-top:var(--s5)}
.of-non-g>div{padding:var(--s5) 0;border-top:1px solid var(--line)}
.of-non-g strong{display:block;font:500 18px/1.3 var(--brand);letter-spacing:-.01em;color:var(--ink-900)}
.of-non-g p{margin:8px 0 0;font:400 15px/1.7 var(--sans);color:var(--ink-700);max-width:66ch}
@media(min-width:900px){.of-non-g{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--s7)}}
.of-q{margin-top:var(--s8)}
.of-end{margin-top:var(--s8);padding:var(--s7) var(--s6)}
.of-end h2{margin:var(--s3) 0 var(--s4);font:400 clamp(26px,3.6vw,40px)/1.1 var(--brand);letter-spacing:-.03em}

/* La section des offres sur l'accueil : trois portes, pas un tableau. */
.home-off-g{display:grid;gap:0;margin-top:var(--s5)}
.home-off-c{display:block;padding:var(--s5) 0;border-top:1px solid var(--line);
 text-decoration:none;color:inherit;transition:background .18s ease,padding-left .18s ease}
.home-off-c:hover{background:var(--paper-2);padding-left:6px}
.home-off-q{display:block;margin:var(--s3) 0 0;font:400 clamp(19px,2.2vw,25px)/1.3 var(--brand);
 letter-spacing:-.02em;color:var(--ink-900)}
.home-off-c p{margin:8px 0 0;font:400 14.5px/1.65 var(--sans);color:var(--ink-700);max-width:60ch}
.home-off-p{display:flex;align-items:baseline;gap:10px;margin-top:var(--s3)}
.home-off-p b{font:400 26px/1 var(--brand);letter-spacing:-.02em;color:var(--mark);
 font-variant-numeric:tabular-nums lining-nums}
.home-off-p i{font-style:normal;font:600 10px/1.5 var(--sans);letter-spacing:.11em;
 text-transform:uppercase;color:var(--muted)}
@media(min-width:900px){.home-off-g{grid-template-columns:repeat(3,minmax(0,1fr));column-gap:var(--s6)}
 .home-off-c{border-top-width:2px;border-top-color:var(--ink-900)}
 .home-off-c:hover{padding-left:0;background:transparent}
 .home-off-c:hover .home-off-q{text-decoration:underline;text-underline-offset:4px}}



/* ══ DÉCRYPTE DEAL ══════════════════════════════════════════════════════════ */
.dl-sec{padding-top:var(--s7)}
.dl-two{display:grid;gap:var(--s5);margin-top:var(--s5);align-items:start}
.dl-two .v2-figure b{font:400 clamp(34px,5.4vw,56px)/1 var(--brand);letter-spacing:-.03em;
 display:block;color:var(--ink-900);font-variant-numeric:tabular-nums lining-nums}
.dl-two .v2-figure .lab{display:block;margin-top:8px;font:600 10.5px/1.5 var(--sans);
 letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.dl-rows{display:grid;gap:0}
.dl-rows-w{margin-top:var(--s5)}
.dl-r{display:flex;align-items:baseline;gap:var(--s4);flex-wrap:wrap;
 padding:11px 0;border-top:1px solid var(--line)}
.dl-r>span{flex:1 1 auto;font:400 14.5px/1.6 var(--sans);color:var(--ink-700)}
.dl-r>strong{font:500 17px/1.4 var(--sans);color:var(--ink-900);
 font-variant-numeric:tabular-nums lining-nums;letter-spacing:-.005em}
.dl-r>i{flex-basis:100%;font-style:normal;font:600 10px/1.5 var(--sans);letter-spacing:.11em;
 text-transform:uppercase;color:var(--muted)}
@media(min-width:900px){.dl-two{grid-template-columns:minmax(0,.55fr) minmax(0,1.45fr);gap:var(--s7)}}

.dl-gap{display:grid;gap:var(--s4);align-items:center;margin-top:var(--s5);
 padding:var(--s5);border:1px solid var(--line);border-radius:var(--r-sm);background:var(--paper-2)}
.dl-gap-s b{display:block;margin:6px 0;font:400 clamp(32px,5vw,50px)/1 var(--brand);
 letter-spacing:-.03em;color:var(--ink-900);font-variant-numeric:tabular-nums lining-nums}
.dl-gap-s b.struck{color:var(--muted);text-decoration:line-through;text-decoration-thickness:1px}
.dl-gap-a{font-size:22px;color:var(--mark);text-align:center}
@media(min-width:700px){.dl-gap{grid-template-columns:1fr auto 1fr}}

.dl-bil{display:grid;gap:var(--s5);margin-top:var(--s5);padding:var(--s5);
 border:1px solid var(--ink-900);border-radius:var(--r-sm)}
.dl-bil-s strong{display:block;margin:6px 0;font:400 clamp(22px,3vw,30px)/1.15 var(--brand);
 letter-spacing:-.02em;color:var(--ink-900)}
.dl-bil-s p{margin:0;font:400 15px/1.7 var(--sans);color:var(--ink-700);max-width:60ch}
.dl-bil-c{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s3)}
.dl-bil-c>div{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);
 padding:9px 0;border-top:1px solid var(--line)}
.dl-bil-c b{font:500 20px/1 var(--sans);color:var(--ink-900);font-variant-numeric:tabular-nums lining-nums}
@media(min-width:900px){.dl-bil{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:var(--s7)}
 .dl-bil-c{grid-template-columns:1fr}}

.dl-ctx{margin-top:var(--s6)}
.dl-ctx-g{display:grid;gap:var(--s4);margin-top:var(--s3)}
@media(min-width:700px){.dl-ctx-g{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1100px){.dl-ctx-g{grid-template-columns:repeat(4,minmax(0,1fr))}}

.dl-pts{display:grid;gap:0;margin-top:var(--s6)}
.dl-pt{display:grid;gap:var(--s3);padding:var(--s5) 0;border-top:1px solid var(--line)}
.dl-pt-t .t-label{color:var(--muted)}
.dl-pt-t strong{display:block;margin-top:4px;font:500 18px/1.3 var(--brand);
 letter-spacing:-.01em;color:var(--ink-900)}
.dl-pt-t>span:last-child{display:block;margin-top:5px;font:400 14px/1.65 var(--sans);
 color:var(--muted);max-width:62ch}
.dl-pt-c{display:flex;flex-wrap:wrap;gap:8px}
.dl-n{min-height:40px;padding:0 4px;border:1px solid var(--line);border-radius:var(--r-xs);
 background:transparent;cursor:pointer;display:inline-flex;align-items:center;
 transition:border-color .16s ease,background .16s ease}
.dl-n:hover{border-color:var(--ink-600)}
.dl-n.on{border-color:var(--ink-900);background:var(--paper-2);box-shadow:inset 0 0 0 1px var(--ink-900)}
.dl-n:focus-visible{outline:2px solid var(--mark);outline-offset:2px}
.dl-n .q{pointer-events:none}
@media(min-width:900px){.dl-pt{grid-template-columns:minmax(0,1.45fr) minmax(0,.55fr);
 gap:var(--s5);align-items:start}.dl-pt-c{justify-content:flex-end}}

.dl-prev .t-label{color:var(--muted)}
.dl-locked{padding-top:var(--s8);border-top:2px solid var(--ink-900);margin-top:var(--s7)}
.dl-credit{margin-top:var(--s6);padding:var(--s5);border:1px solid var(--mark);
 border-radius:var(--r-sm);background:var(--mark-glow)}
.dl-credit .t-label{display:block;margin-bottom:8px;color:var(--mark)}
.dl-credit p{margin:0;font:400 15.5px/1.75 var(--sans);color:var(--ink-800);max-width:70ch}
.dl-foot{margin-top:var(--s7);padding-top:var(--s4);border-top:1px solid var(--line)}

/* Le rapport payant : même grammaire, densité supérieure. */
.dlr-sc{display:grid;gap:var(--s5);margin-top:var(--s5)}
.dlr-sc-c{padding:var(--s5);border:1px solid var(--line);border-radius:var(--r-sm)}
.dlr-sc-c b{display:block;margin:8px 0 4px;font:400 clamp(28px,4vw,40px)/1 var(--brand);
 letter-spacing:-.03em;color:var(--ink-900);font-variant-numeric:tabular-nums lining-nums}
.dlr-sc-c .dl-rows{margin-top:var(--s4)}
@media(min-width:900px){.dlr-sc{grid-template-columns:repeat(3,minmax(0,1fr))}}
.dlr-am{display:grid;gap:0;margin-top:var(--s5)}
.dlr-am-i{padding:var(--s5) 0;border-top:1px solid var(--line)}
.dlr-am-h{display:flex;align-items:baseline;gap:var(--s3);flex-wrap:wrap}
.dlr-am-h h3{margin:0;font:500 19px/1.3 var(--brand);letter-spacing:-.01em;color:var(--ink-900)}
.dlr-am-c{margin:var(--s3) 0 0;font:400 15.5px/1.75 var(--sans);color:var(--ink-800);max-width:70ch;
 font-variant-numeric:tabular-nums lining-nums}
.dlr-am-o{margin:var(--s3) 0 0;padding-left:var(--s4);border-left:2px solid var(--sand);
 font:400 14.5px/1.7 var(--sans);color:var(--ink-700);max-width:70ch}
.dlr-am-o .t-label{display:block;margin-bottom:4px}
.dlr-q{display:grid;gap:0;margin-top:var(--s5)}
.dlr-q-i{padding:var(--s5) 0;border-top:1px solid var(--line)}
.dlr-q-q{margin:0;font:400 clamp(18px,2.2vw,23px)/1.4 var(--brand);letter-spacing:-.02em;
 color:var(--ink-900);max-width:64ch}
.dlr-q-m{display:grid;gap:var(--s3);margin-top:var(--s4)}
.dlr-q-m>span{font:400 14px/1.65 var(--sans);color:var(--ink-700)}
.dlr-q-m .t-label{display:block;margin-bottom:3px}
@media(min-width:800px){.dlr-q-m{grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);gap:var(--s5)}}
.dlr-vg{display:grid;gap:0;margin-top:var(--s5)}
.dlr-vg>div{padding:var(--s5) 0;border-top:1px solid var(--line)}
.dlr-vg strong{display:block;font:500 18px/1.3 var(--brand);letter-spacing:-.01em;color:var(--ink-900)}
.dlr-vg p{margin:6px 0 0;font:400 15px/1.7 var(--sans);color:var(--ink-700);max-width:68ch}
@media(min-width:900px){.dlr-vg{grid-template-columns:repeat(3,minmax(0,1fr));column-gap:var(--s6)}}

/* ══ RECHERCHE ══════════════════════════════════════════════════════════════ */
.srch{display:flex;gap:8px;align-items:stretch;flex-wrap:wrap;margin:var(--s5) 0}
.srch-l{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.srch input{flex:1 1 220px;min-width:0;min-height:46px;padding:0 14px;
 border:1px solid var(--line);border-radius:var(--r-sm);background:var(--paper);
 color:var(--ink-900);font:400 15px/1 var(--sans)}
.srch input:focus{outline:2px solid var(--mark);outline-offset:-1px;border-color:var(--mark)}
.srch-b{min-height:46px;padding:0 18px;border:1px solid var(--ink-900);border-radius:var(--r-sm);
 background:var(--ink-900);color:var(--paper);cursor:pointer;
 font:600 11px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase}
.ws-top-s{flex:1 1 200px;min-width:0;max-width:420px}
.ws-top-s .srch{margin:0}
.ws-top-s .srch input{min-height:40px;font-size:14px}
.ws-top-s .srch-b{min-height:40px;padding:0 12px}
@media(max-width:899px){.ws-top-s{display:none}}
.srch-sug{display:flex;flex-wrap:wrap;gap:8px;margin-top:var(--s3)}
.srch-g{margin-top:var(--s6)}
.srch-g>.t-label{display:block;margin-bottom:var(--s3)}

/* ══ PÉRIMÈTRE DE LA VEILLE ═════════════════════════════════════════════════ */
.chg-per{padding-bottom:var(--s6);border-bottom:1px solid var(--line)}
.chg-per-g{display:grid;gap:var(--s6);margin-top:var(--s5)}
.chg-per-i{padding:var(--s4) 0;border-top:1px solid var(--line)}
.chg-per-i strong{display:block;font:500 17px/1.3 var(--brand);letter-spacing:-.01em;color:var(--ink-900)}
.chg-per-i p{margin:6px 0 0;font:400 14.5px/1.7 var(--sans);color:var(--ink-700);max-width:60ch}
.chg-per-n .chg-per-i strong{color:var(--muted)}
.chg-per-n>.t-label{color:var(--mark)}
@media(min-width:900px){.chg-per-g{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s7)}}
/* L'intro d'un bloc de repères n'est pas une note de bas de page : elle
   introduit la liste qui suit, donc elle se tient contre elle. */
.rep-intro{margin:var(--s3) 0 var(--s4);font:400 14px/1.7 var(--sans);color:var(--muted);max-width:62ch}
.rep .v2-panel{display:flex;flex-direction:column}
/* Le prix barré du Système quand un crédit DEAL court : la remise se lit
   comme un prix, pas comme une note en bas de bloc. */
.of-price-was{margin:var(--s3) 0 0}
.of-price-was .t-label{display:block;margin-bottom:2px}
.of-price-was s{font:400 22px/1 var(--brand);color:var(--muted);
 text-decoration-thickness:1px;font-variant-numeric:tabular-nums lining-nums}
.prem-credit{border-left:2px solid var(--mark);padding-left:var(--s4)}

/* LE PANNEAU INDICATEUR DE L'ACCUEIL
   Une orientation, pas une grille de tarifs : quatre lignes, un filet entre
   elles, le prix à droite. Rien à comparer, juste une progression à voir. */
.home-sign{margin:var(--s8) 0;padding:var(--s6) 0;
 border-top:2px solid var(--ink-900);border-bottom:1px solid var(--line)}
.home-sign-h{display:grid;gap:var(--s3);margin-bottom:var(--s4)}
.home-sign-h p{margin:0;font:400 15.5px/1.7 var(--sans);color:var(--ink-700);max-width:66ch}
.home-sign-l{list-style:none;margin:0;padding:0;display:grid;gap:0;counter-reset:sign}
.home-sign-l a{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:var(--s4);
 align-items:baseline;padding:var(--s4) 0;border-top:1px solid var(--line);
 text-decoration:none;color:inherit;min-height:44px;
 transition:background .18s ease,padding-left .18s ease}
.home-sign-l a:hover{background:var(--paper-2);padding-left:6px}
.home-sign-n{font:600 10.5px/1.6 var(--sans);letter-spacing:.14em;color:var(--muted)}
.home-sign-t strong{display:block;font:600 11px/1.5 var(--sans);letter-spacing:.13em;
 text-transform:uppercase;color:var(--ink-900)}
.home-sign-t>span{display:block;margin-top:5px;font:400 15.5px/1.5 var(--brand);
 letter-spacing:-.01em;color:var(--ink-700)}
.home-sign-p{white-space:nowrap;font:400 19px/1.3 var(--brand);letter-spacing:-.02em;
 color:var(--mark);font-variant-numeric:tabular-nums lining-nums}
.home-sign .note{margin-top:var(--s4)}
@media(min-width:900px){
 .home-sign-h{grid-template-columns:minmax(0,.9fr) minmax(0,1.4fr);align-items:baseline;gap:var(--s6)}
}
@media(max-width:620px){
 .home-sign-l a{grid-template-columns:auto minmax(0,1fr);row-gap:6px}
 .home-sign-p{grid-column:2}
}

/* ══ LE RYTHME : CHAPITRES, IMAGES, MOUVEMENT ══════════════════════════════
   Onze sections sur le même papier formaient un couloir. Deux chapitres
   passent maintenant sur fond d'encre, le panneau des offres sur le sable :
   la page se lit par blocs, et l'œil retrouve des points d'appui. */
.ed-sec.sombre{padding:var(--s7) var(--s6);border-radius:var(--r-md);margin:var(--s7) 0}
.ed-sec.sombre .ed-head p,.ed-sec.sombre .note{color:#c3d0dc}
.ed-sec.sombre .t-label{color:var(--mark-soft)}
.ed-sec.sombre h2{color:var(--paper)}
.ed-sec.sombre .ed-list a{border-top-color:var(--line-dark)}
.ed-sec.sombre .ed-list a:hover{background:#ffffff0a}
.ed-sec.sombre .ed-list-t{color:var(--paper)}
.ed-sec.sombre .ed-list-d{color:#b6c4d2}
.ed-sec.sombre .ed-list-n,.ed-sec.sombre .ed-list-s{color:var(--muted-dark)}
@media(max-width:700px){.ed-sec.sombre{padding:var(--s6) var(--s5);margin:var(--s6) calc(var(--s5) * -1);border-radius:0}}

.home-sign.sable{background:var(--paper-2);border-radius:var(--r-md);
 padding:var(--s6);border-top:2px solid var(--ink-900);border-bottom:0}
.home-sign.sable .home-sign-l a{border-top-color:var(--sand)}
.home-sign.sable .home-sign-l a:hover{background:#ffffff9c}
@media(max-width:700px){.home-sign.sable{margin-left:calc(var(--s5) * -1);margin-right:calc(var(--s5) * -1);
 border-radius:0;padding:var(--s6) var(--s5)}}

/* L'IMAGE PASSÉE AU CRIBLE. La photographie est enfin là, et elle est
   annotée : elle sert la démonstration au lieu de décorer la page. */
.crible{padding:var(--s7) var(--s6);border-radius:var(--r-md);margin:var(--s7) 0}
.crible-h{max-width:66ch}
.crible-h h2{margin:var(--s3) 0 0;font:400 clamp(28px,4vw,44px)/1.08 var(--brand);
 letter-spacing:-.03em;color:var(--paper)}
.crible-h p{margin:var(--s4) 0 0;font:400 16px/1.75 var(--sans);color:#c3d0dc;max-width:64ch}
.crible-h .t-label{color:var(--mark-soft)}
.crible-g{display:grid;gap:var(--s6);margin-top:var(--s6);align-items:start}
.crible-img{margin:0;border-radius:var(--r-sm);overflow:hidden;background:#0a1524}
.crible-img img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover}
.crible-img figcaption{padding:10px var(--s4) var(--s4);font:400 10.5px/1.6 var(--mono);
 letter-spacing:.05em;color:#8fa3b8}
.crible-img figcaption a{color:#8fa3b8;text-decoration:underline;text-underline-offset:2px}
.crible-l{list-style:none;margin:0;padding:0;display:grid;gap:0;counter-reset:cr}
.crible-l li{padding:var(--s4) 0;border-top:1px solid var(--line-dark)}
.crible-l li:first-child{border-top:0;padding-top:0}
.crible-l b{display:block;margin:8px 0 5px;font:400 clamp(17px,2vw,21px)/1.35 var(--brand);
 letter-spacing:-.015em;color:var(--paper)}
.crible-l li>span:last-child{display:block;font:400 14.5px/1.7 var(--sans);color:#b6c4d2;max-width:56ch}
.crible-n{margin-top:var(--s6);padding-top:var(--s4);border-top:1px solid var(--line-dark)}
@media(min-width:900px){.crible-g{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--s7)}}
@media(max-width:700px){.crible{padding:var(--s6) var(--s5);margin:var(--s6) calc(var(--s5) * -1);border-radius:0}}

/* ── LE MOUVEMENT ──────────────────────────────────────────────────────────
   L'état masqué n'existe que si le script l'a posé : sans JavaScript, la
   page entière reste visible. On ne touche qu'à l'opacité et à la
   translation, donc la mise en page ne bouge jamais et le CLS reste nul. */
html.mv .avenir{opacity:0;transform:translateY(10px)}
html.mv .avenir.vu{opacity:1;transform:none;
 transition:opacity .5s cubic-bezier(.22,.61,.36,1) var(--retard,0ms),
            transform .55s cubic-bezier(.22,.61,.36,1) var(--retard,0ms)}
#app.entre{animation:entreeRoute .19s cubic-bezier(.22,.61,.36,1) both}
@keyframes entreeRoute{from{opacity:.55;transform:translateY(5px)}to{opacity:1;transform:none}}

/* ── LE FEEDBACK SOUS LA MAIN ──────────────────────────────────────────────
   Un produit qui ne répond pas au doigt paraît mort, même bien composé.
   Ces états coûtent trois lignes et changent la sensation. */
.btn,.b,.keep,.rep-x,.dl-n,.srch-b{transition:transform .14s ease,background .18s ease,
 border-color .18s ease,color .18s ease,box-shadow .18s ease}
.btn:active,.b:active,.keep:active,.rep-x:active,.dl-n:active,.srch-b:active{transform:translateY(1px)}
.ed-list a:active,.of-ou-c:active,.home-off-c:active,.home-sign-l a:active{transform:translateY(1px)}
a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible,select:focus-visible{
 outline:2px solid var(--mark);outline-offset:3px;border-radius:2px}
.on-dark a:focus-visible,.v2-ink a:focus-visible,.sombre a:focus-visible,
.on-dark button:focus-visible,.crible a:focus-visible{outline-color:var(--mark-soft)}
.lk:hover .lk-bar{background:var(--sand)}
.lk-bar{transition:background .18s ease}
.band{transition:box-shadow .3s ease}
.band:hover{box-shadow:0 18px 50px #0a152426}

@media(prefers-reduced-motion:reduce){
 .avenir,.avenir.vu{opacity:1;transform:none;transition:none}
 #app.entre{animation:none}
 .btn:active,.b:active,.keep:active,.rep-x:active,.dl-n:active,.srch-b:active,
 .ed-list a:active,.of-ou-c:active,.home-off-c:active,.home-sign-l a:active{transform:none}
 .band:hover{box-shadow:none}
}

/* Loaded premium content must not retain the padded, flex loading shell. */
.premium-loaded{display:block;min-width:0;width:100%}
@media(max-width:600px){
 .ws2 .workspace-main{padding-left:8px;padding-right:8px}
 .premium-loaded .card{padding:16px;min-width:0}
 .premium-loaded p{text-align:left;hyphens:none}
}