/* ═══ POLICES LOCALES ═══════════════════════════════════════════════
   Fraunces (titres) et Instrument Sans (corps), variables, sous-ensemble
   latin, servies depuis web/fonts/ (licence OFL, textes à côté des fichiers).
   Plus aucun appel à Google Fonts : c'était le dernier appel externe de la
   page. Les chemins sont relatifs à styles.css, valables depuis l'accueil
   comme depuis une page dans un dossier. */
/* ═══════════════════════════════════════════════════════════════════════════
   LES POLICES — RÉPARÉ LE 24 AOÛT 2026, NE PAS RÉÉCRIRE AVEC UNE VARIABLE

   Les quatre déclarations portaient « font-family: var(--dis) ». Une règle
   @font-face n'accepte PAS de variable CSS à cet endroit : c'est un nom qu'on
   déclare, pas une valeur qu'on calcule. Les quatre blocs étaient donc ignorés
   en silence, AUCUNE police n'était chargée, et le navigateur retombait sur
   system-ui. Le rendu changeait selon la machine et selon le bloc.

   Le défaut était invisible à la lecture du code et visible au premier coup
   d'œil à l'écran. C'est Kévin qui l'a vu, en comparant deux captures.

   Pire : --dis nommait Instrument Sans mais chargeait le fichier Fraunces. Le
   nom et le fichier ne correspondaient pas.

   DÉCISION RETENUE : une seule police sur tout le site, Instrument Sans, en
   variable de 400 à 700. C'est ce que --dis et --sans nomment tous deux, et
   ce que le commentaire de la palette décrivait déjà. Fraunces a été retirée :
   elle n'était plus utilisée nulle part et pesait 160 Ko servis pour rien.
   Pour revenir en arrière : reprendre les deux fichiers dans l'historique git,
   déclarer un @font-face « Fraunces », et pointer --dis dessus.

   verif.mjs refuse désormais un @font-face dont le nom est une variable. ═══ */
@font-face{font-family:"Instrument Sans";src:url("web/fonts/instrument-sans.woff2") format("woff2");font-weight:400 700;font-style:normal;font-display:swap}
@font-face{font-family:"Instrument Sans";src:url("web/fonts/instrument-sans-italic.woff2") format("woff2");font-weight:400 700;font-style:italic;font-display:swap}


:root{
  --creme:#F4F0E9;   /* aplat secondaire, jamais le fond de page */
  --sable:#E7E0D4;
  --pierre:#D3CBBC;
  --pierre-f:#B3AA9A;
  --gris:#7C766B;
  --encre:#1C1A17;
  --encre-72:rgba(28,26,23,.72);
  /* .52 donnait 3,56 sur blanc, sous le seuil de 4,5 : ce niveau était
     employé pour du texte et le rendait illisible. Remonté à .62, qui donne
     4,84. Le nom porte la valeur pour qu'on ne s'y trompe plus. */
  --encre-62:rgba(28,26,23,.62);
  --encre-30:rgba(28,26,23,.30);
  --encre-14:rgba(28,26,23,.14);
  --blanc:#FFFFFF;
  --blanc-72:rgba(255,255,255,.72);
  --blanc-40:rgba(255,255,255,.40);
  --blanc-88:rgba(255,255,255,.88);
  --blanc-62:rgba(255,255,255,.62);
  --blanc-16:rgba(255,255,255,.16);
  --blanc-12:rgba(255,255,255,.12);
  /* Les voiles posés sur une image ou un aplat sombre. */
  --voile:rgba(20,18,16,.72);
  --voile-f:rgba(20,18,16,.86);
  --or:#A98634;
  /* L'or sur fond sombre : #A98634 donne 3,3:1 sur l'encre, sous le seuil.
     Cette version éclaircie donne 7,4:1, et c'est déjà celle qu'emploient
     les blocs sombres du site. */
  --vert:#2F6B3F;            /* la validation, et elle seule (31 août 2026) */
  --vert-f:rgba(47,107,63,.09);
  --or-c:#D6AA54;
  --brique:#8C4A32;
  /* La même rouille, éclaircie pour les fonds sombres : #8C4A32 sur l'encre
     donne 2:1, illisible. Cette version donne 5,5:1. Ce n'est pas une couleur
     de plus, c'est la même à un autre niveau de clarté. */
  --brique-c:#C98462;

  /* ── SURFACES ───────────────────────────────────────────────────
     Les trois fonds du site, et rien d'autre. --carte est le fond de
     toutes les cartes claires, --encre-h celui d'une carte sombre
     survolée, --nuit le fond le plus profond, réservé aux aplats de
     pied de page et de barre. Ces valeurs revenaient écrites à la main
     dans une trentaine de règles. */
  --carte:#F9F7F4;
  --encre-h:#33312E;
  --nuit:#141210;
  /* Les deux teintes des captures WhatsApp : elles imitent l'application et
     ne sont donc pas libres. Elles restent dans la palette pour que personne
     ne les prenne pour un écart. */
  --wapp-fond:#0B141A;
  --wapp-vert:#8FBF8F;
  /* Une seule police sur tout le site. Fraunces reste dans web/fonts/ et sa
     déclaration @font-face plus haut est intacte : revenir en arrière tient
     à cette ligne, et à remettre le preload dans les trois gabarits. */
  /* ── RAYON ────────────────────────────────────────────────────────
     Décision de Kévin, 21 août 2026 : les angles s'arrondissent
     légèrement, en référence au site Cadot. La règle précédente était
     « border-radius: 0 partout ». Elle est remplacée par « un seul
     rayon, déclaré ici, jamais de valeur en dur ailleurs », et
     verif.mjs contrôle désormais cela. Changer le chiffre ci-dessous
     change tout le site d'un coup. Les 14 px sont mesurés sur les vignettes
     du site de référence : 15 px de rayon sur une carte de 423 px, soit
     3,5 % de la largeur, et 16 px sur l'image qu'elle contient.
     Les grilles à filet portent le rayon sur le conteneur et non sur
     chaque cellule : arrondir les cellules ferait apparaître le fond
     de la grille dans les angles, et le filet partagé se briserait. */
  /* ── AIR ENTRE LES BLOCS ──────────────────────────────────────────
     Un seul écart, déclaré ici, pour que deux blocs voisins soient
     toujours séparés de la même distance. Mesuré sur le site de
     référence : 190 px de blanc entre la bande sombre et le titre qui
     suit, 212 px entre deux blocs clairs. Chaque bloc porte donc la
     moitié de cet écart en haut et en bas, et les deux moitiés
     s'additionnent à la frontière.
     Un aplat sombre en pleine largeur n'apporte pas de blanc : le bloc
     clair qui le précède et celui qui le suit portent donc l'écart
     entier, et le blanc reste d'un seul tenant jusqu'à l'aplat. Le faire
     avec une marge sur l'aplat laisserait voir le crème du corps de
     page, et trois fonds se suivraient. */
  /* v243 : l'écart de bloc passe de 95 à 62 px sur écran large. Deux
     sections voisines laissaient 190 px de vide, soit un écran de téléphone
     entier sans contenu entre deux blocs. À 62, l'écart vaut 124 px : la page
     respire encore et cesse d'attendre. Un seul jeton, tout le site suit. */
  --air:clamp(42px,4.6vw,62px);

  /* ── ÉCHELLE DES TITRES ─────────────────────────────────────────
     Trois tailles, pas six. Avant ce jeton, les titres de bloc du site
     mesuraient 49,6, 43,2, 41,6, 40 et 31,2 px pour la même fonction,
     et les chapôs 12,5, 14, 15, 15,5 et 18 px. verif.mjs refuse
     désormais toute taille de titre écrite en dur. */
  --t1:clamp(1.95rem,6.1vw,3.15rem);   /* le titre de la page, une fois */
  --t2:clamp(1.75rem,4.4vw,2.6rem);    /* tout titre de bloc */
  --t3:clamp(1.02rem,2.2vw,1.28rem);   /* titre interne, dans une carte */
  --st:15.5px;                          /* le chapô, une seule taille */

  /* Les écarts à l'intérieur d'un bloc. Entre blocs, c'est --air. */
  --e1:14px;   /* du sur-titre au titre */
  --e2:16px;   /* du titre au chapô */
  --e3:26px;   /* du chapô à l'action */
  --r:14px;   /* blocs, cartes, boutons, images */
  --r-s:8px;  /* petits éléments : pastilles, champs, étiquettes */
  --dis:"Instrument Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --sans:"Instrument Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  /* La largeur du site, décidée le 24 août 2026 en référence au site Cadot :
     un seul plafond, déclaré ici et lu par .hold. Sur un écran de 1920 px, le
     contenu occupe 1760 px, il en occupait 1220. Les textes gardent leurs
     colonnes en ch : ce sont les grilles, les rails et les bandes qui
     s'élargissent. La gouttière suit l'écran : 20 px sur téléphone,
     jusqu'à 50 px sur grand écran, comme les marges du site de référence. */
  --hold:1760px;
  --pad:clamp(20px,2.6vw,50px);
}
/* « États-Unis » dans un titre : jamais coupé sur son trait d'union.
   L'enveloppe est posée par le build (protegerEtatsUnis), pas à la main. */
.insec{white-space:nowrap}
*{box-sizing:border-box;margin:0;padding:0;border-radius:0}
/* Les champs et les boutons n'héritent pas de la police : sans cette ligne,
   le navigateur leur pose Arial. Quatre boutons de l'accueil et vingt-quatre
   de la landing complète étaient dans une autre police que le reste du site,
   sans que rien ne le signale. */
button,input,select,textarea{font-family:inherit}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;
  /* v109 : le header colle en haut, les ancres doivent s'arreter dessous */
  /* La marge d'ancrage se déduit de la hauteur réelle de la barre, mesurée au
     chargement et à chaque redimensionnement. Écrite en dur, elle dérivait dès
     que la barre changeait de hauteur : au retrait de la phrase sous le logo,
     les ancres tombaient 34 px trop haut et le début du formulaire passait
     derrière la barre. La valeur en dur reste comme repli avant le script. */
  /* La marge d'ancrage se déduit de la hauteur réelle de la barre, mesurée au
     chargement et à chaque redimensionnement. Écrite en dur, elle dérivait au
     premier changement de hauteur. Les 30 px ajoutés donnent l'air qui manquait
     au premier texte d'une section atteinte par une ancre : sur téléphone, le
     titre « Candidature » venait coller le bas de la barre. */
  scroll-padding-top:calc(var(--barre, 96px) + 30px)}

/* ═══ LE FOND DU SITE EST BLANC ════════════════════════════════════════
   Règle de marque, pas une préférence de page : --blanc est le sol de
   toutes les pages, accueil et pages intérieures, sur les deux profils.

   --creme n'est PAS un fond de page. C'est l'aplat secondaire, celui
   d'un bloc qu'on veut détacher du sol : .eqt, .qz-rec, .soc-w, .ptv.
   L'avoir laissé sur body a fait revenir le fond crème à chaque nouvelle
   page, faute d'être écrit quelque part.

   verif.mjs refuse désormais toute autre valeur sur body. */
body{background:var(--blanc);color:var(--encre);font-family:var(--sans);
  font-size:16px;line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden;padding-bottom:74px}
img,svg{display:block;max-width:100%}
/* Toute image garde son ratio : les attributs width/height posés au build
   (26 août 2026) réservent la place, ils ne figent JAMAIS la hauteur. Panne
   du 26 août : cartes des opérations à 1 213 px sur téléphone. */
img{height:auto}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--or);outline-offset:3px}
h1,h2,h3,.num{font-family:var(--dis);font-weight:400;line-height:1.1;letter-spacing:-.005em}

/* ═══════════════════════════════════════════════════════════════════════════
   LE SYSTÈME DES TITRES DE BLOC

   Avant cette règle, six définitions concurrentes se disputaient le même
   objet : trois graisses (300, 400, 600), trois largeurs (20ch, 26ch, 62ch,
   libre), et .h2x qui ignorait jusqu'au jeton de taille. Le résultat était
   visible à l'œil nu : un titre sur une ligne à Miami, quatre lignes bancales
   sur l'écosystème, trois lignes étroites sur l'accompagnement.

   Un titre de bloc est UN objet. Il a donc UNE définition.

     Taille      --t2, l'échelle existe et n'a jamais eu besoin d'exception.
     Graisse     600. Un titre doit sauter aux yeux ; la 300 ne le fait pas.
     Largeur     24ch. C'est la valeur qui donne deux à trois lignes régulières
                 quelle que soit la longueur du titre, au lieu d'une ligne
                 unique ici et de quatre lignes là.
     Équilibrage text-wrap:balance, partout. Sans lui, la dernière ligne reste
                 orpheline sur un mot.
     Interlettre -.02em, resserrée : à cette taille et cette graisse, l'espace
                 par défaut délave le titre.

   LA SEULE VARIABLE LÉGITIME EST LA COULEUR, parce qu'elle suit la surface :
   encre sur fond clair, blanc sur fond foncé. Tout le reste est identique.
   Les blocs conservent leur marge propre, rien d'autre.

   verif.mjs refuse la construction si une règle redéfinit la taille, la
   graisse ou la largeur d'un titre de bloc. C'est ce qui empêchera une
   septième définition d'apparaître dans deux semaines. ═══════════════════ */
.sec-c h2, .ban h2, .rt-h h2, .fmt2-h h2, .cad-h h2, .h2x, .tt h2,
.hr-titre2 h2, .etp-h h2, .crf-h h2, .itw-t h2{
  font-family:var(--dis);
  font-size:var(--t2);
  font-weight:600;
  line-height:1.12;
  letter-spacing:-.02em;
  /* 34ch, et pas 24. Mesuré sur les quinze titres de la page : à 24ch, treize
     titres tombent sur trois lignes ; à 34ch, treize tombent sur DEUX lignes.
     C'est la colonne la plus régulière sans toucher à un seul mot, et deux
     lignes valent mieux que trois pour un titre qui doit sauter aux yeux : le
     regard saisit le bloc d'un coup au lieu de le lire. */
  max-width:34ch;
  text-wrap:balance;
  color:var(--encre);
}
/* ── LE RYTHME GAUCHE, CENTRE, DROITE EST DÉLIBÉRÉ ────────────────────────
   Il ne doit surtout pas être uniformisé : c'est la grammaire de la page, et
   le texte du bloc suit le même alignement que son titre.

   En revanche une largeur bridée DOIT être repositionnée, sinon la boîte de
   34ch reste collée à gauche pendant que le texte se centre à l'intérieur : le
   titre paraît alors décalé sans qu'on sache pourquoi. C'est exactement ce qui
   s'est produit en v264, où .rt-h et .fmt2-h avaient reçu la largeur sans le
   recentrage. Chaque bloc déclare donc ici sa position, une fois. */
/* LE GROUPE DE TITRE EST UN OBJET DE TROIS PIÈCES : l'intitulé en rouille,
   le titre, et le texte qui suit. Les trois partagent OBLIGATOIREMENT le même
   alignement, sinon l'intitulé reste collé à gauche pendant que le titre se
   centre, et le bloc paraît de travers sans qu'on sache pourquoi.

   C'est exactement le défaut introduit en v265 sur les chiffres, les étapes et
   le carrefour : ces trois blocs sont alignés à GAUCHE, et leur titre avait
   reçu margin-inline:auto en même temps que la largeur. L'intitulé « LES
   CHIFFRES » restait à gauche, le titre partait au centre.

   L'intitulé et le texte héritent naturellement du text-align du conteneur.
   Seul le titre, parce qu'il porte une largeur bridée, doit repositionner sa
   BOÎTE. D'où ces trois groupes, qui doivent rester le miroir exact du
   text-align de chaque bloc. */
.sec-c h2, .ban h2, .rt-h h2, .fmt2-h h2, .h2x, .itw-t h2{margin-inline:auto}    /* centrés */
.cad-h h2{margin-left:auto;margin-right:0}                            /* à droite */
.hr-titre2 h2, .etp-h h2, .crf-h h2,
.serv .h2x{margin-left:0;margin-right:auto}                            /* à gauche */
/* L'incise en brique, réservée au titre. Le rouille est un accent de sens,
   pas une décoration : il ne sert qu'à isoler la partie du titre qui porte
   la promesse. */
.sec-c h2 em, .fmt2-h h2 em, .h2x em{font-style:normal;color:var(--brique)}
.bleed{padding-inline:var(--pad)}
.hold{max-width:var(--hold);margin-inline:auto}
.lab,.sec-c p.lab,.let-in p.lab,.cad-h p.lab,.itw-t p.lab{font-size:11px;font-weight:600;letter-spacing:.22em;
  text-transform:uppercase;line-height:1.3;margin:0;
  /* Tous les intitulés de bloc du site ont le même style et la même couleur.
     Les blocs à fond sombre redéclarent le jeton une fois, ils n'écrivent pas
     de couleur : c'est ce qui garantit qu'ils restent une seule couleur. */
  color:var(--lab-c,var(--brique))}
/* Ces blocs redéclarent seulement la couleur des intitulés. Un rayon sur des
   sections pleine largeur laisserait quatre coins de fond de page visibles. */
.cad,.let,.prt,.ft,.hero,.freins,.rsv,.qr,.serv,.cand,.eqx{--lab-c:var(--brique-c)}
.tex{position:relative}
.tex::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.4;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.4'/%3E%3C/svg%3E")}

/* ═ BANDE BÉTON, le quartier se construit ═══ */
.strip{position:relative;overflow:hidden;line-height:0;
  background:linear-gradient(180deg,#DAD7D2,#C6C3BE 62%,#B4B1AC);
  border-bottom:1px solid rgba(28,26,23,.2)}
.strip::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.28;mix-blend-mode:multiply;z-index:2;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cfilter id='c'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4'/%3E%3C/filter%3E%3Crect width='150' height='150' filter='url(%23c)' opacity='.42'/%3E%3C/svg%3E")}
/* La frise suit le plafond du site : elle était déjà plus large que
   l'ancien, signe que 1220 étouffait. */
.strip-in{max-width:var(--hold);margin-inline:auto}
/* La frise est montrée EN ENTIER : plus de hauteur imposée, plus de
   rognage. Sa hauteur découle de la largeur du dessin, comme un bandeau.
   C'est ce qui la rend lisible, ciel compris.

   Conséquence assumée : elle ne peut plus rester collée en haut. Un
   bandeau complet fait 145 px sur ordinateur et 176 px sur téléphone ;
   collé à la barre, le bloc mangerait le quart de l'écran en permanence.
   La barre colle seule, la frise défile avec la page. */
.strip svg{width:100%;height:auto;display:block;position:relative;z-index:1}
/* Le panorama fait 2400 unités : à pleine largeur il serait illisible.
   On lui donne une hauteur fixe et c'est le cadrage qui suit la
   construction, de Detroit jusqu'aux collines. */
.strip-in{max-width:none;overflow:hidden}
.strip svg{width:3400px;max-width:none}
.strip.run-b svg{animation:frcam var(--sd) linear both}
@media(max-width:899px){.strip svg{width:2600px}}
/* La hauteur de la bande est réglée par .strip depuis que la frise vit dans
   le bloc collant : un max-height ici décalait le cadrage vers le ciel au
   lieu du sol. */
/* Format bandeau : le dessin est agrandi de moitié par rapport au doublement
   précédent, et il n'est plus rogné du tout. Sa hauteur suit sa largeur, comme
   pour toute image : 177 px sur ordinateur, 219 px sur téléphone. */
@media(max-width:639px){.strip svg{width:4200px}}
@keyframes frcam{0%{transform:translateX(0)}76%,100%{transform:translateX(var(--cam,0px))}}
.bande{fill:var(--nuit)}
.etoiles{position:absolute;inset:0;z-index:3;pointer-events:none;opacity:0;
  background-image:radial-gradient(0.9px 0.9px at 32.9% 11.9%,rgba(255,253,245,0.49),transparent),
    radial-gradient(0.9px 0.9px at 53.5% 24.6%,rgba(255,253,245,0.95),transparent),
    radial-gradient(1.6px 1.6px at 22.3% 8.1%,rgba(255,253,245,0.49),transparent),
    radial-gradient(0.9px 0.9px at 10.3% 28.0%,rgba(255,253,245,0.97),transparent),
    radial-gradient(0.9px 0.9px at 62.7% 37.4%,rgba(255,253,245,0.77),transparent),
    radial-gradient(0.9px 0.9px at 40.0% 60.6%,rgba(255,253,245,0.76),transparent),
    radial-gradient(0.9px 0.9px at 14.4% 27.7%,rgba(255,253,245,0.76),transparent),
    radial-gradient(0.9px 0.9px at 55.8% 43.2%,rgba(255,253,245,0.77),transparent),
    radial-gradient(0.9px 0.9px at 63.5% 25.0%,rgba(255,253,245,0.76),transparent),
    radial-gradient(1.6px 1.6px at 61.5% 32.3%,rgba(255,253,245,0.88),transparent),
    radial-gradient(1.3px 1.3px at 46.7% 57.5%,rgba(255,253,245,0.61),transparent),
    radial-gradient(1.1px 1.1px at 78.6% 44.2%,rgba(255,253,245,0.5),transparent),
    radial-gradient(1.3px 1.3px at 30.6% 32.2%,rgba(255,253,245,0.85),transparent),
    radial-gradient(0.9px 0.9px at 29.4% 60.8%,rgba(255,253,245,0.73),transparent),
    radial-gradient(1.6px 1.6px at 17.5% 23.2%,rgba(255,253,245,0.68),transparent),
    radial-gradient(1.3px 1.3px at 94.8% 7.6%,rgba(255,253,245,0.64),transparent),
    radial-gradient(1.6px 1.6px at 35.5% 32.3%,rgba(255,253,245,0.49),transparent),
    radial-gradient(0.9px 0.9px at 10.6% 18.9%,rgba(255,253,245,0.48),transparent),
    radial-gradient(1.6px 1.6px at 69.5% 41.2%,rgba(255,253,245,0.61),transparent),
    radial-gradient(0.9px 0.9px at 38.9% 42.5%,rgba(255,253,245,0.97),transparent),
    radial-gradient(1.6px 1.6px at 36.0% 39.0%,rgba(255,253,245,0.48),transparent),
    radial-gradient(1.1px 1.1px at 76.0% 10.6%,rgba(255,253,245,0.67),transparent),
    radial-gradient(1.1px 1.1px at 90.4% 32.3%,rgba(255,253,245,0.7),transparent),
    radial-gradient(1.6px 1.6px at 54.8% 55.1%,rgba(255,253,245,0.93),transparent),
    radial-gradient(1.3px 1.3px at 28.5% 27.5%,rgba(255,253,245,0.83),transparent),
    radial-gradient(0.9px 0.9px at 38.4% 16.6%,rgba(255,253,245,0.55),transparent);
  background-repeat:no-repeat}
.strip.run-b .etoiles{animation:fretoiles var(--sd) linear both}
@keyframes fretoiles{
  0%{opacity:.9}7%{opacity:0}
  7%,74%{opacity:0}
  84%{opacity:.72}94%,100%{opacity:.9}}
.pin{fill:none;stroke:#3C4A33;stroke-width:1.3;stroke-linecap:round;
  stroke-dasharray:1000;stroke-dashoffset:1000}
.strip.run-b .pin{animation:frtr 1.2s ease-out var(--t) both}

.hw{fill:none;stroke:#FBF8F2;stroke-width:1.9;stroke-dasharray:1000;stroke-dashoffset:1000;stroke-linejoin:round;stroke-linecap:round}
.scene{opacity:1}

.us{fill:none;stroke:var(--encre-h);stroke-width:1.6;vector-effect:non-scaling-stroke;
  stroke-linejoin:round;stroke-linecap:round}
.ud{fill:none;stroke:var(--encre-h);stroke-width:1;vector-effect:non-scaling-stroke;opacity:.7;
  stroke-linejoin:round;stroke-linecap:round}
.up{fill:none;stroke:var(--encre-h);stroke-width:1.1;vector-effect:non-scaling-stroke;opacity:.55;stroke-linecap:round}
.arc{fill:none;stroke:#42502F;stroke-width:1;vector-effect:non-scaling-stroke;opacity:.55}
.art{fill:none;stroke:#5C5142;stroke-width:1.3;vector-effect:non-scaling-stroke;stroke-linecap:round}
.pt{fill:var(--encre-h)}
.para{opacity:0}
.para-m{fill:none;stroke:#4A4640;stroke-width:1.6;stroke-linecap:round}
.para-t{fill:#D97A55;stroke:#A85A3C;stroke-width:1;transform:scaleX(.05)}
.strip.run-b .para{animation:frcol .5s ease var(--t) both}
.strip.run-b .para-t{animation:frpara var(--sd) linear both}
@keyframes frpara{
  0%,60%{transform:scaleX(.05)}
  67%,76%{transform:scaleX(1)}
  83%,100%{transform:scaleX(.05)}}

.sun-d{fill:#F0CE94}
.sun-h{fill:url(#halo)}
.sun{opacity:0;transform:translate(10px,80px) scale(.78)}
.nuit{fill:url(#nuitg);opacity:0}
.refl{fill:#FFE3B4;opacity:0}
.strip.run-b .sun{animation:frsun var(--sd) linear both}
.strip.run-b .sun-d{animation:frsunc var(--sd) linear both}
.strip.run-b .nuit{animation:frnuit var(--sd) linear both}
.strip.run-b .refl{animation:frrefl var(--sd) linear both}
@keyframes frsun{
  0%,6%{opacity:0;transform:translate(10px,80px) scale(.78)}
  11%{opacity:1;transform:translate(190px,58px) scale(.84)}
  20%{transform:translate(470px,26px) scale(.92)}
  31%{transform:translate(830px,-6px) scale(.99)}
  42%{transform:translate(1160px,-22px) scale(1)}
  52%{transform:translate(1440px,-6px) scale(1.04)}
  60%{transform:translate(1640px,20px) scale(1.16)}
  67%{transform:translate(1800px,40px) scale(1.32)}
  73%{transform:translate(1950px,58px) scale(1.46)}
  78%{opacity:1;transform:translate(2070px,76px) scale(1.5)}
  82%,100%{opacity:0;transform:translate(2130px,88px) scale(1.5)}}
@keyframes frsunc{
  0%{fill:#EFC384}20%{fill:#F7E3A6}42%{fill:#FCF2CC}
  52%{fill:#F9D179}60%{fill:#F2A851}67%{fill:#E8783D}
  73%{fill:#D4522E}78%,100%{fill:#AE3020}}
@keyframes frnuit{
  0%{opacity:.93}5%{opacity:.55}11%{opacity:.14}18%,50%{opacity:0}
  64%{opacity:.16}74%{opacity:.46}82%{opacity:.80}90%,100%{opacity:.93}}
@keyframes frrefl{0%,54%{opacity:0;fill:#FFD9A2}61%{opacity:.55;fill:#FBBE84}
  68%{opacity:.6;fill:#EE8E5E}75%{opacity:.22;fill:#C9603F}81%,100%{opacity:0}}

.skl{fill:none;stroke:#2C2A27;stroke-width:2.3;stroke-linecap:round;stroke-linejoin:round}

.strip .us,.strip .ud,.strip .up{stroke-dasharray:1000;stroke-dashoffset:1000}
.strip .uf,.strip .upf,.strip .ar,.strip .lm,.strip .pt{opacity:0}
/* opacity:0 indispensable : sans lui, tant que le script n'a pas ajouté run-b,
   les arbres restent écrasés à scaleY(0) mais visibles. Avec
   vector-effect:non-scaling-stroke, un tracé écrasé garde son épaisseur et
   se dessine en petit trait. C'étaient les résidus au sol dans la bande. */
/* Le bleu monte avec le soleil, tient la journée, puis s'éteint bien avant
   que la nuit ne s'installe : les deux ne se croisent pas, la nuit garde son
   dégradé chaud intact. */
.jour{fill:url(#jourg);opacity:0}
.strip.run-b .jour{animation:frjour var(--sd) linear both}
@keyframes frjour{
  0%,10%{opacity:0}
  22%{opacity:.62}
  34%,52%{opacity:.78}
  62%{opacity:.5}
  70%{opacity:0}
  100%{opacity:0}}

/* Nuages. Tailles et vitesses différentes : les petits vont moins vite et
   sont plus pâles, c'est ce qui donne la profondeur. */
.nu path{fill:var(--blanc)}
.nu{opacity:0}
.strip.run-b .nu{animation:frnuage var(--sd) linear both}
.nu-1{--dep:220px;--fin:1180px;--ech:1.35;--al:.72}
.nu-2{--dep:760px;--fin:1560px;--ech:1.7;--al:.8}
.nu-3{--dep:1420px;--fin:1900px;--ech:.85;--al:.45}
.nu-4{--dep:2050px;--fin:2620px;--ech:1.15;--al:.6}
.nu-1{transform:translate(220px,-16px)}
.nu-2{transform:translate(760px,-25px)}
.nu-3{transform:translate(1420px,-8px)}
.nu-4{transform:translate(2050px,-20px)}
@keyframes frnuage{
  0%,12%{opacity:0}
  24%{opacity:var(--al)}
  56%{opacity:var(--al)}
  66%{opacity:0}
  100%{opacity:0}}
.strip.run-b .nu-1{animation:frnuage var(--sd) linear both,frdrv1 var(--sd) linear both}
.strip.run-b .nu-2{animation:frnuage var(--sd) linear both,frdrv2 var(--sd) linear both}
.strip.run-b .nu-3{animation:frnuage var(--sd) linear both,frdrv3 var(--sd) linear both}
.strip.run-b .nu-4{animation:frnuage var(--sd) linear both,frdrv4 var(--sd) linear both}
@keyframes frdrv1{from{transform:translate(220px,-16px) scale(1.35)}to{transform:translate(1180px,-16px) scale(1.35)}}
@keyframes frdrv2{from{transform:translate(760px,-25px) scale(1.7)}to{transform:translate(1560px,-25px) scale(1.7)}}
@keyframes frdrv3{from{transform:translate(1420px,-8px) scale(.85)}to{transform:translate(1900px,-8px) scale(.85)}}
@keyframes frdrv4{from{transform:translate(2050px,-20px) scale(1.15)}to{transform:translate(2620px,-20px) scale(1.15)}}
.strip.fige .jour{opacity:.72!important}
.strip.fige .nu{opacity:0!important}

/* Panneaux d'entrée de ville, à l'américaine : plaque verte, filet clair en
   retrait du bord, nom en capitales et État en dessous. Le filet intérieur est
   la signature des panneaux routiers US, c'est lui qui fait la lecture.
   Les villes sont celles du tableau des marchés du site. */
.pan{opacity:0}
.pan-p{fill:none;stroke:var(--encre-h);stroke-width:1.8;stroke-linecap:round}
.pan-c{fill:#3D4B34;stroke:#2A3325;stroke-width:1.4}
.pan-i{fill:none;stroke:#EFEADD;stroke-width:1;opacity:.85}
.pan-t{font-family:var(--sans);font-size:11.5px;font-weight:600;letter-spacing:.08em;
  fill:#F4F1EA;text-anchor:middle}
.pan-e{font-family:var(--sans);font-size:6.5px;font-weight:600;letter-spacing:.1em;
  fill:#EFEADD;opacity:.72;text-anchor:middle}
.strip.run-b .pan{animation:frpan .55s cubic-bezier(.3,1.5,.5,1) var(--t,0s) both}
@keyframes frpan{0%{opacity:0;transform:scaleY(.2)}55%{opacity:1}100%{opacity:1;transform:scaleY(1)}}
.strip.fige .pan{opacity:1!important;transform:none!important}

.strip .ar{transform:scaleY(0);opacity:0}
.strip .sk{opacity:0}
.strip .fl-b{fill:none;stroke:#3E5A70;stroke-width:1.2;vector-effect:non-scaling-stroke;
  opacity:.8;stroke-linecap:round;stroke-dasharray:1000;stroke-dashoffset:1000}
.strip .fl-v{fill:none;stroke:#DCE6EA;stroke-width:1;vector-effect:non-scaling-stroke;
  opacity:0;stroke-linecap:round}
.strip .fl-w{transform:scaleY(0)}

.strip.run-b .us{animation:frtr .8s ease-out var(--t) both}
.strip.run-b .ud{animation:frtr .65s linear calc(var(--t) + .5s) both}
.strip.run-b .uf{animation:frcol .55s ease calc(var(--t) + .72s) both}
.strip.run-b .up{animation:frtr .5s linear calc(var(--t) + 1s) both}
.strip.run-b .hw{animation:frtr 1.7s ease-out var(--t) both}
.strip.run-b .upf{animation:frcol .45s ease calc(var(--t) + 1.24s) both}
.strip.run-b .ar{animation:frpousse .62s cubic-bezier(.22,1.4,.4,1) var(--t) both}
.strip.run-b .sk{animation:frroule var(--d) linear var(--t) both}
.strip.run-b .lm{animation:frlum 1.1s ease var(--t) both}
.strip.run-b .pt{animation:frcol .35s ease var(--t) both}
.strip.run-b .fl-b{animation:frtr 1.8s ease-out var(--t) both}
.strip.run-b .fl-w{animation:frmonte 2s cubic-bezier(.2,.8,.3,1) var(--t) both}
.strip.run-b .fl-v{animation:frvague .6s ease var(--t) both}
@keyframes frtr{from{stroke-dashoffset:1000}to{stroke-dashoffset:0}}
@keyframes frcol{from{opacity:0}to{opacity:1}}
@keyframes frpousse{0%{transform:scaleY(0);opacity:0}20%{opacity:1}100%{transform:scaleY(1);opacity:1}}
@keyframes frroule{0%{opacity:0;transform:translateX(0)}
  7%{opacity:1}88%{opacity:1}100%{opacity:0;transform:translateX(var(--x))}}
@keyframes frlum{0%{opacity:0}25%{opacity:.95}45%{opacity:.4}70%{opacity:.95}100%{opacity:.88}}
@keyframes frmonte{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes frvague{0%{opacity:0}60%{opacity:.75}100%{opacity:.5}}

/* ── v120 : avion, hélicoptère, panneau éclairé, étoiles filantes ── */

/* L'avion décolle de derrière la deuxième maison. Il est placé avant les
   maisons dans le DOM : elles le masquent tant qu'il n'a pas dépassé les toits. */
.avion{opacity:0}
.av-b{fill:var(--encre-h)}
.av-c,.av-w{fill:#3D3A35}
.av-f{fill:#5A554D}
.av-r{fill:#4A4640}
.av-h{fill:#9BA7AD}
.av-t{fill:var(--blanc);opacity:.24}
.strip.run-b .avion{animation:fravion var(--sd) linear both}
@keyframes fravion{
  0%,6.6%{opacity:0;transform:translate(150px,56px) rotate(-4deg) scale(.78)}
  6.8%{opacity:1;transform:translate(152px,55.6px) rotate(-5deg) scale(.79)}
  9.5%{transform:translate(206px,47px) rotate(-15deg) scale(.85)}
  12%{transform:translate(268px,34px) rotate(-19deg) scale(.93)}
  14.5%{transform:translate(342px,25px) rotate(-18deg) scale(1.03)}
  17%{transform:translate(438px,18px) rotate(-16deg) scale(1.11)}
  20%{transform:translate(580px,12px) rotate(-13deg) scale(1.12)}
  23.5%{transform:translate(742px,8.5px) rotate(-11deg) scale(1)}
  27%{transform:translate(898px,6.4px) rotate(-9deg) scale(.82)}
  31%{transform:translate(1050px,5px) rotate(-7deg) scale(.62)}
  35%{transform:translate(1178px,4px) rotate(-6deg) scale(.44)}
  39%{transform:translate(1280px,3.2px) rotate(-5deg) scale(.3)}
  43%{transform:translate(1356px,2.6px) rotate(-4deg) scale(.2)}
  47%{opacity:1;transform:translate(1410px,2.2px) rotate(-3deg) scale(.12)}
  51%{opacity:0;transform:translate(1446px,2px) rotate(-3deg) scale(.07)}
  51.1%,100%{opacity:0}}

/* L'hélicoptère se pose sur le toit plat de la dernière villa, y 23.
   L'origine du dessin est aux patins moins 4,5 : posé, elle vaut 18,5. */
.helico{opacity:0}
.he-b{fill:var(--encre-h)}
.he-v{fill:#8FA6B4}
.he-s{fill:none;stroke:var(--encre-h);stroke-width:1;stroke-linecap:round}
.he-d{fill:none;stroke:var(--encre-h);stroke-width:1;opacity:.3;stroke-linecap:round}
.he-p{fill:none;stroke:var(--encre-h);stroke-width:1.5;stroke-linecap:round;
  transform-box:fill-box;transform-origin:center}
.strip.run-b .helico{animation:frhelico var(--sd) linear both}
.strip.run-b .he-p{animation:frpale .22s linear infinite}
@keyframes frhelico{
  0%,60%{opacity:0;transform:translate(2336px,-26px) scale(.86)}
  61.5%{opacity:1;transform:translate(2286px,-19px) scale(.88)}
  65%{transform:translate(2208px,-3px) scale(.91)}
  68%{transform:translate(2160px,7px) scale(.95)}
  71%{transform:translate(2136px,15px) scale(.99)}
  74%,100%{opacity:1;transform:translate(2130px,18.5px) scale(1)}}
@keyframes frpale{
  0%{transform:scaleX(1)}25%{transform:scaleX(.12)}
  50%{transform:scaleX(-1)}75%{transform:scaleX(.12)}100%{transform:scaleX(1)}}

/* Le panneau reste allumé quand la nuit tombe : il est dessiné au-dessus du
   calque de nuit, comme les fenêtres éclairées. Halo large et faible d'abord,
   lettres vives ensuite. Aucun clignotement. */
.hw-n{opacity:0}
.hw-g{fill:none;stroke:#FFE9B0;stroke-width:5;opacity:.22;
  stroke-linejoin:round;stroke-linecap:round}
.hw-l{fill:none;stroke:#FFF6DC;stroke-width:1.9;
  stroke-linejoin:round;stroke-linecap:round}
.strip.run-b .hw-n{animation:frhwn var(--sd) linear both}
@keyframes frhwn{
  0%,57%{opacity:0}
  64%{opacity:.34}
  74%{opacity:.7}
  84%,100%{opacity:1}}

/* Étoiles filantes, dans les deux fenêtres où le ciel est étoilé :
   la fin de nuit au début du cycle, et la nuit qui revient à la fin. */
.fil{position:absolute;z-index:4;pointer-events:none;opacity:0;
  width:52px;height:1.4px;
  background:linear-gradient(90deg,rgba(255,249,235,0),rgba(255,249,235,.92) 88%,#FFFDF5)}
.fil-a{left:16%;top:7%}
.fil-b{left:44%;top:5%}
.fil-c{left:23%;top:15%}
.fil-d{left:66%;top:10%}
.strip.run-b .fil-a{animation:frfila var(--sd) linear both}
.strip.run-b .fil-b{animation:frfilb var(--sd) linear both}
.strip.run-b .fil-c{animation:frfilc var(--sd) linear both}
.strip.run-b .fil-d{animation:frfild var(--sd) linear both}
@keyframes frfila{
  0%,1.6%{opacity:0;transform:rotate(17deg) translateX(-70px)}
  2.4%{opacity:.85}
  4.2%{opacity:0;transform:rotate(17deg) translateX(210px)}
  4.3%,100%{opacity:0}}
@keyframes frfilb{
  0%,85%{opacity:0;transform:rotate(15deg) translateX(-70px)}
  85.9%{opacity:.9}
  87.6%{opacity:0;transform:rotate(15deg) translateX(215px)}
  87.7%,100%{opacity:0}}
@keyframes frfilc{
  0%,90.4%{opacity:0;transform:rotate(21deg) translateX(-70px)}
  91.2%{opacity:.75}
  92.9%{opacity:0;transform:rotate(21deg) translateX(190px)}
  93%,100%{opacity:0}}
@keyframes frfild{
  0%,95.6%{opacity:0;transform:rotate(13deg) translateX(-70px)}
  96.4%{opacity:.88}
  98.2%{opacity:0;transform:rotate(13deg) translateX(220px)}
  98.3%,100%{opacity:0}}

/* Rendu figé, mouvement réduit : l'avion et l'hélicoptère en vol n'ont pas
   de sens sur une image fixe, et le panneau éclairé non plus puisque la nuit
   y est neutralisée. */
.strip.fige .avion,.strip.fige .helico,.strip.fige .fil,
.strip.fige .hw-n{opacity:0!important}

.strip.fige *{animation:none!important}
.strip.fige .us,.strip.fige .ud,.strip.fige .up,.strip.fige .hw,.strip.fige .pin{stroke-dashoffset:0!important}
.strip.fige .uf,.strip.fige .upf,.strip.fige .lm,.strip.fige .pt,.strip.fige .fl-b,.strip.fige .fl-v{opacity:1!important}
.strip.fige .fl-w{transform:scaleY(1)!important}
.strip.fige .scene{opacity:1!important}
.strip.fige .ar{opacity:1!important;transform:scaleY(1)!important}
.strip.fige .sun{opacity:1!important;transform:translate(2130px,88px) scale(1.5)!important;opacity:0!important}
.strip.fige .sun-d{fill:#C63F2B!important}
.strip.fige .nuit{opacity:0!important}.strip.fige .refl{opacity:0!important}
.strip.fige .sk{opacity:1!important;transform:none!important}
.strip.fige .para{opacity:1!important}.strip.fige .para-t{transform:scaleX(.05)!important}

/* ── barre utilitaire ── */
.util{background:var(--nuit);color:var(--blanc-72);font-size:12px}
.util-in{padding:0}

.util b{font-weight:500;color:var(--blanc)}
.qr{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
  background:var(--blanc-12);margin:0}
.qr-i{background:var(--nuit);padding:11px 16px 12px;border-radius:var(--r)}
.qr-i summary{list-style:none;font-family:var(--dis);font-size:16.5px;font-weight:500;
  color:var(--brique-c);line-height:1.2;cursor:default}
.qr-i summary::-webkit-details-marker{display:none}
.qr-i p{font-size:11.5px;color:var(--blanc-72);margin:5px 0 0;line-height:1.45}

@media(max-width:760px){
  .qr{grid-template-columns:1fr;gap:1px}
  .qr-i{padding:0}
  .qr-i summary{display:flex;align-items:center;justify-content:space-between;gap:12px;
    padding:11px 16px;font-size:15px;cursor:pointer;
    -webkit-tap-highlight-color:transparent}
  .qr-i summary::after{content:"";flex:none;width:7px;height:7px;
    border-right:1.5px solid rgba(255,255,255,.45);border-bottom:1.5px solid rgba(255,255,255,.45);
    transform:rotate(45deg) translate(-2px,-2px);transition:transform .25s ease}
  .qr-i[open] summary::after{transform:rotate(-135deg) translate(-2px,-2px)}
  .qr-i[open] summary{color:var(--brique-c)}
  .qr-i p{padding:0 16px 12px;margin-top:0}
}

/* ── header ─────────────────────────────────────────────────────────────
   Barre blanche, sans aucun aplat : la hiérarchie tient à la police et à la
   couleur du texte, pas à un fond sombre. Seul « Candidater » est plein, et
   c'est voulu : c'est le seul geste qu'on demande depuis la barre. */
/* Sur les pages intérieures la barre colle seule ; sur les accueils elle est
   dans .tete avec la frise, et c'est le bloc entier qui colle. */
.hd{position:sticky;top:0;z-index:50;background:var(--blanc)}

/* 70 px et non 62 : le pavé porte trois lignes depuis que la mention est
   devenue un lien, et 60 px dans 62 ne respirait pas. */
.hd-in{display:flex;align-items:center;justify-content:space-between;gap:14px;height:82px}


.lg-t{font-family:var(--dis);font-size:17px;letter-spacing:.16em;font-weight:500}
.lg-t i{font-style:normal;color:var(--or)}
.hd-n{display:none;gap:30px;font-size:13.5px;font-weight:600;color:var(--encre-72)}
.hd-n a{transition:color .2s ease}
.hd-n a:hover{color:var(--encre)}
/* L'entrée où l'on se trouve : le mot change de couleur, rien d'autre. Pas de
   filet, pas de fond. La rouille est la seule couleur possible ici : l'or, qui
   marque l'actif ailleurs sur le site, tombe à 3,4:1 sur blanc et passe sous le
   seuil de lisibilité dès qu'il touche du texte. Sur une bordure il tient, sur
   un mot non. La rouille donne 6,8:1, et c'est déjà la couleur d'« Enzo » dans
   le pavé : elle désigne ce qui est à nous. */
.hd-n a[aria-current="page"]{color:var(--brique);cursor:default}
.hd-c{font-size:12px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;padding:12px 17px;white-space:nowrap;
  border:1px solid var(--encre);background:var(--encre);color:var(--blanc);transition:background .22s,border-color .22s}
.hd-c:hover{background:var(--brique);border-color:var(--brique)}
/* v109 : groupe d'actions, et « Livres » en CTA permanent.
   Sous 940 px le dock du bas porte « Candidater », le header porte « Livres ».
   Au-dessus, le dock disparaît et le header porte les deux. */
.hd-a{display:flex;align-items:center;gap:12px}
.hd-l{font-size:12px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;
  padding:12px 15px;white-space:nowrap;border:1px solid var(--encre-30);
  background:transparent;color:var(--encre-72);
  transition:border-color .22s,color .22s,background .22s}
.hd-l:hover{border-color:var(--encre);color:var(--encre)}
.hd-c{display:none}
@media(min-width:940px){.hd-c{display:inline-flex;align-items:center}}
@media(min-width:1080px){.hd-n{display:flex}.hd-in{height:92px}
  .hd-b{display:none!important}}
/* Cinq entrées depuis le 24 août 2026 : la barre respire, la compression
   d'appoint n'a plus lieu d'être. Les entrées à sous-menu portent un
   chevron, qui se retourne à l'ouverture — rotate, jamais transform. */
.hd-s > a{position:relative;padding-right:15px}
.hd-s > a::after{content:"";position:absolute;right:1px;top:calc(50% - 5px);
  width:6px;height:6px;border-right:1.5px solid currentColor;
  border-bottom:1.5px solid currentColor;rotate:45deg;
  transition:rotate .2s ease,translate .2s ease}
.hd-s:hover > a::after,.hd-s:focus-within > a::after{rotate:225deg;translate:0 4px}
/* LE SOUS-MENU DES BUDGETS, par défaut du 24 août 2026. Une carte du
   système sous l'entrée, ouverte au survol et au clavier (focus-within).
   Le pont ::before couvre l'interstice : la souris peut descendre sans que
   la carte se referme. Chaque palier porte data-go : il sélectionne son
   format avant de défiler, par le pont déjà posé pour le comparatif. */
/* LE GRAND PANNEAU (24 août 2026, référence Cadot). Un seul panneau sous
   la barre collante : les groupes en onglets, chaque entrée avec son
   pictogramme au trait dans une tuile du système. Ouvert au survol et au
   clavier, piloté par le script (position posée sous la barre à l'ouverture,
   comme le panneau du doigt). Sous 1080 px, le panneau du doigt prend le
   relais : celui-ci disparaît. */
.hd-s{position:relative;padding-right:15px}
.hd-s::after{content:"";position:absolute;right:1px;top:calc(50% - 5px);
  width:6px;height:6px;border-right:1.5px solid currentColor;
  border-bottom:1.5px solid currentColor;rotate:45deg;
  transition:rotate .2s ease,translate .2s ease}
.hd-s[aria-expanded="true"]::after{rotate:225deg;translate:0 4px}
.hd-mega{position:fixed;left:0;right:0;z-index:59;pointer-events:none}
.hd-mega-c{pointer-events:auto;background:var(--blanc);border:1px solid var(--encre-14);
  border-radius:var(--r);box-shadow:0 24px 60px rgba(20,18,16,.18);
  padding:18px 20px 20px;margin-top:10px;
  opacity:0;translate:0 8px;
  transition:opacity .18s ease,translate .24s cubic-bezier(.22,.9,.3,1)}
.hd-mega.la .hd-mega-c{opacity:1;translate:0 0}
.hd-mp[hidden]{display:none}
.hd-mp{display:grid;grid-template-columns:1fr 1fr;gap:4px 22px}
/* Les budgets en cartes-photos : la langue des vignettes, en miniature.
   Photo de l'opération, montant, ville en rouille. */
.hd-mp-b{grid-template-columns:repeat(3,1fr);gap:14px}
.hd-mb{display:block;text-decoration:none;color:var(--encre);
  background:color-mix(in srgb,var(--creme) 42%,var(--blanc));
  border:1px solid var(--encre-14);border-radius:var(--r-s);overflow:hidden;
  transition:background .18s ease,border-color .18s ease,box-shadow .22s ease}
.hd-mb:hover,.hd-mb:focus-visible{background:var(--blanc);
  border-color:var(--encre-30);box-shadow:0 10px 24px rgba(20,18,16,.12)}
.hd-mb-ph{display:block;aspect-ratio:16/9;overflow:hidden}
.hd-mb-ph img{display:block;width:100%;height:100%;object-fit:cover;
  transition:transform .5s cubic-bezier(.22,.9,.3,1)}
.hd-mb:hover .hd-mb-ph img{transform:scale(1.04)}
.hd-mb b{display:block;padding:11px 14px 0;font-family:var(--dis);
  font-size:16.5px;font-weight:600;font-variant-numeric:tabular-nums}
.hd-mb em{display:block;padding:2px 14px 13px;font-style:normal;font-size:9.5px;
  font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--brique)}
/* Les douze thèmes d'articles : des pastilles-cartes, en trois colonnes. */
.hd-mp-th{grid-template-columns:1fr;gap:10px}
/* Le panneau « Les articles » : les thèmes à gauche (deux colonnes), les
   articles du thème survolé à droite (26 août 2026). */
.hd-thg{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;align-content:start}
.hd-mp-th{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);column-gap:22px}
.hd-thv{border-left:1px solid var(--encre-14);padding-left:22px;min-height:100%}
.hd-thv-t{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--encre-62);margin:6px 0 10px}
.hd-thl{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.hd-thl[hidden]{display:none}   /* display:grid ne doit pas battre l'attribut hidden */
.hd-thl li a{display:block;padding:8px 10px;font-size:13.5px;line-height:1.35;color:var(--encre);text-decoration:none;border:1px solid transparent}
.hd-thl li a:hover,.hd-thl li a:focus-visible{background:var(--blanc);border-color:var(--encre-30)}
.hd-thl-vide{font-size:13px;color:var(--encre-62);padding:8px 10px}
.hd-th.on{background:var(--blanc);border-color:var(--or)}
.hd-mg2{border-top:1px solid var(--encre-14)}
.hd-mg2 summary{cursor:pointer;padding:10px 0;font-weight:600;list-style:none}
.hd-mg2 a{display:block;padding:8px 0 8px 14px;font-size:14px}
.hd-mg2-h{color:var(--brique);font-weight:600}
.hd-th{display:block;padding:12px 14px;border:1px solid var(--encre-14);
  border-radius:var(--r-s);background:color-mix(in srgb,var(--creme) 42%,var(--blanc));
  text-decoration:none;color:var(--encre);font-family:var(--dis);
  font-size:13.5px;font-weight:600;line-height:1.3;
  transition:background .16s ease,border-color .16s ease}
.hd-th:hover,.hd-th:focus-visible{background:var(--blanc);border-color:var(--encre-30)}
/* Les quatre livres, en couvertures : petites cartes du système, vers leurs
   pages Amazon. La rangée porte son intitulé en rouille. */
.hd-mlt{grid-column:1/-1;margin:10px 0 0;font-size:9.5px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--brique)}
.hd-mlv{grid-column:1/-1;display:flex;gap:12px;flex-wrap:wrap;padding-top:8px}
.hd-lv{flex:none;width:128px;display:block;text-decoration:none;color:var(--encre);
  background:color-mix(in srgb,var(--creme) 42%,var(--blanc));
  border:1px solid var(--encre-14);border-radius:var(--r-s);overflow:hidden;
  transition:background .18s ease,border-color .18s ease,box-shadow .22s ease}
.hd-lv:hover,.hd-lv:focus-visible{background:var(--blanc);
  border-color:var(--encre-30);box-shadow:0 10px 22px rgba(20,18,16,.12)}
.hd-lv img{display:block;width:100%;height:auto;aspect-ratio:291/466;object-fit:cover;
  transition:transform .5s cubic-bezier(.22,.9,.3,1)}
.hd-lv:hover img{transform:scale(1.03)}
/* Prix, format et boutique sous chaque couverture du menu (25 août 2026,
   Kévin : « partout où les livres sont affichés, le lien Amazon et le prix »). */
.hd-n{float:right;font-style:normal;font-size:11px;font-weight:600;color:var(--brique);
  padding-left:10px}
.hd-lvp{display:block;padding:0 10px 10px;font-size:10.5px;line-height:1.35;color:var(--brique);font-weight:600}
.vband-a{display:inline-block;margin-top:4px;font-size:12px;font-weight:600;color:var(--brique);text-decoration:underline;text-underline-offset:3px}
.vband-a:hover{color:var(--encre)}
.hd-lv b{display:block;padding:8px 10px 10px;font-family:var(--dis);
  font-size:12px;font-weight:600;line-height:1.25}
.hd-mi{display:flex;gap:13px;align-items:flex-start;text-decoration:none;
  color:var(--encre);padding:11px 12px;border-radius:var(--r-s);
  transition:background .16s ease}
.hd-mi:hover,.hd-mi:focus-visible{background:color-mix(in srgb,var(--creme) 42%,var(--blanc))}
.hd-ico{flex:none;display:grid;place-items:center;width:40px;height:40px;
  border-radius:var(--r-s);border:1px solid var(--encre-14);
  background:color-mix(in srgb,var(--creme) 42%,var(--blanc));color:var(--brique)}
.hd-ico svg{width:21px;height:21px}
.hd-mi b{display:block;font-family:var(--dis);font-size:15.5px;font-weight:600;line-height:1.25}
.hd-mi em{display:block;margin-top:2px;font-style:normal;font-size:12px;
  color:var(--encre-62);line-height:1.45}
.hd-mi[aria-current="page"] b{color:var(--brique)}
@media(max-width:1079px){.hd-mega{display:none}}


/* Trois traits, rien autour. La zone de 44 px reste : elle est ce que le
   doigt touche, même si plus rien ne la dessine. */
.hd-b{display:grid;place-items:center;width:44px;height:44px;background:transparent;
  border:0;cursor:pointer;padding:0}
.hd-b span,.hd-b span::before,.hd-b span::after{display:block;width:23px;height:2px;
  background:var(--encre);transition:transform .28s ease,opacity .2s ease}
.hd-b span{position:relative}
.hd-b span::before,.hd-b span::after{content:"";position:absolute;left:0}
.hd-b span::before{top:-7px}
.hd-b span::after{top:7px}
.hd-b[aria-expanded="true"] span{background:transparent}
.hd-b[aria-expanded="true"] span::before{transform:translateY(7px) rotate(45deg)}
.hd-b[aria-expanded="true"] span::after{transform:translateY(-7px) rotate(-45deg)}

.hd-m{position:fixed;left:0;right:0;top:0;bottom:0;z-index:40;background:var(--blanc);
  padding:24px var(--pad) 104px;overflow-y:auto;
  animation:hdmIn .28s ease}
@keyframes hdmIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
.hd-m nav{display:grid;gap:1px;background:var(--encre-14);
  border-block:1px solid var(--encre-14)}
.hd-m a{display:block;text-decoration:none;background:var(--blanc);padding:14px 4px 15px}
.hd-m a b{display:block;font-family:var(--dis);font-size:20px;font-weight:500;color:var(--encre)}
.hd-m a span{display:block;margin-top:3px;font-size:12px;color:var(--encre-72)}
.hd-m a:active b{color:var(--or)}
.hd-m-cta{margin-top:22px;width:100%}
/* Les cinq groupes du panneau : la ligne se déplie, les enfants s'indentent.
   Le filet entre groupes vient de la grille du panneau, comme entre lignes. */
.hd-m .hd-mg{background:var(--blanc)}
.hd-m .hd-mg summary{list-style:none;cursor:pointer;position:relative;
  padding:14px 30px 15px 4px}
.hd-m .hd-mg summary::-webkit-details-marker{display:none}
.hd-m .hd-mg summary b{display:block;font-family:var(--dis);font-size:20px;
  font-weight:500;color:var(--encre)}
.hd-m .hd-mg summary span{display:block;margin-top:3px;font-size:12px;
  color:var(--encre-72)}
.hd-m .hd-mg summary::after{content:"";position:absolute;right:10px;top:24px;
  width:7px;height:7px;border-right:1.5px solid var(--encre-62);
  border-bottom:1.5px solid var(--encre-62);rotate:45deg;transition:rotate .22s ease}
.hd-m .hd-mg[open] summary::after{rotate:225deg}
.hd-m .hd-mg a{padding:12px 4px 12px 20px;font-size:15px;font-weight:500;
  color:var(--encre);border-top:1px solid var(--encre-14)}
.hd-m .hd-mg a:active{color:var(--brique)}
@media(prefers-reduced-motion:reduce){.hd-m{animation:none}}

/* ── boutons ── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:17px 26px;
  font-size:12.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  transition:background .22s,color .22s,border-color .22s;border-radius:var(--r)}
.btn-w{background:var(--blanc);color:var(--encre);border-radius:var(--r)}
.btn-w:hover{background:var(--sable)}
.btn-d{background:var(--encre);color:var(--blanc)}
.btn-d:hover{background:var(--brique)}
.btn-l{background:transparent;color:var(--encre);border:1px solid var(--encre);
  padding:13px 20px;font-size:11.5px}
.btn-l:hover{background:var(--encre);color:var(--blanc)}

/* ═══ HERO : curseur avant / après, texte posé sur le ciel ═══ */
.hero{position:relative;overflow:hidden;background:var(--nuit);color:var(--blanc);
  min-height:max(420px,min(88svh,calc(100svh - 168px)));display:flex;align-items:stretch}
.hero[hidden]{display:none}
.vign[hidden]{display:none}
.ba{position:absolute;inset:0;overflow:hidden}
.ba-l{position:absolute;inset:0}
.ba-l picture{display:block;width:100%;height:100%}
.ba-l img{width:100%;height:100%;object-fit:cover;object-position:center 94%}
.ba-cut{clip-path:inset(0 calc(100% - var(--p,50%)) 0 0)}
.ba-seam{position:absolute;top:0;bottom:0;left:var(--p,50%);width:2px;z-index:4;
  background:linear-gradient(180deg,rgba(255,255,255,0) 0%,var(--blanc) 22%,var(--blanc) 100%)}
.ba-grip{position:absolute;top:56%;left:var(--p,50%);transform:translate(-50%,-50%);z-index:5;
  width:46px;height:46px;background:var(--blanc);border:1px solid var(--encre);
  display:grid;place-items:center;color:var(--encre);font-size:15px;box-shadow:0 6px 24px rgba(0,0,0,.35);border-radius:var(--r-s)}
.ba-hint{position:absolute;top:calc(56% + 38px);left:var(--p,50%);transform:translateX(-50%);z-index:5;
  white-space:nowrap;font-size:9.5px;font-weight:600;letter-spacing:.17em;text-transform:uppercase;
  color:var(--blanc-88);text-shadow:0 1px 10px rgba(0,0,0,.9)}
.ba-rng{position:absolute;left:0;right:0;top:38%;height:62%;z-index:6;width:100%;opacity:0;margin:0;
  cursor:ew-resize;touch-action:pan-y}
.ba-cap{position:absolute;bottom:14px;z-index:5;font-size:9.5px;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;padding:6px 9px;line-height:1;
  background:var(--blanc-88);color:var(--encre-62);border-radius:var(--r-s)}
.ba-cap.l{left:14px}
.cx{display:none}
@media(min-width:440px){.cx{display:inline}}
.ba-cap.r{right:14px;background:var(--or);color:var(--encre)}
.hero-sc{position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(180deg,var(--voile-f) 0%,rgba(20,18,16,.68) 14%,
             rgba(20,18,16,.34) 25%,rgba(20,18,16,.08) 34%,rgba(20,18,16,0) 42%)}
.hero-in{position:relative;z-index:7;width:100%;padding-block:24px 0;pointer-events:none;display:flex}
.hero-in a{pointer-events:auto}
.hero-txt{display:flex;flex-direction:column;flex:1;min-width:0}
.hero-lab{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.hero-lab i{font-style:normal;color:var(--or)}
.hero-lab i::after{content:"·";margin-left:9px;color:var(--blanc-30)}
.hero-lab b{display:grid;place-items:center;width:22px;height:22px;
  border:1px solid var(--or);color:var(--or);font-family:var(--dis);
  font-size:14px;font-weight:400;line-height:1;border-radius:var(--r-s)}
.hero .lab{text-shadow:0 1px 14px rgba(20,18,16,.9)}
.hero h1,.hero .hx{letter-spacing:-.02em;font-size:var(--t2);font-weight:300;margin-top:10px;max-width:15ch;
  text-wrap:balance;
  text-shadow:0 2px 26px rgba(20,18,16,.6)}
@media(min-width:640px){.hero h1,.hero .hx{letter-spacing:-.02em;max-width:22ch}}
.hero-cta{display:none;margin-top:auto;padding-top:18px}
.hero-cap{display:none;margin-top:32px;padding-top:20px;border-top:1px solid rgba(255,255,255,.18);
  max-width:46ch;font-size:13.5px;line-height:1.65;color:var(--blanc-62)}
.hero-cap b{display:block;font-size:10.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--blanc-40);margin-bottom:8px}
.hero-cap i{font-style:normal;color:var(--or)}
.hero-cta .btn{padding:13px 20px;font-size:11px;letter-spacing:.08em}
@media(min-width:640px){.hero-cta .btn{padding:15px 24px;font-size:11.5px}}

@media(min-width:940px){
  .hero{min-height:max(430px,calc(100svh - 186px));align-items:center}
  .ba{left:auto;right:0;width:calc(min(88svh, 100svh - 168px) * var(--rap,0.75));max-width:58%}
  .ba-l img{object-position:center 74%}
  .ba-grip{top:50%}
  .ba-cap{top:16px;bottom:auto}
  .ba-hint{top:calc(50% + 38px)}
  .ba-rng{top:0;height:100%}
  .ba-seam{background:var(--blanc);box-shadow:0 0 22px rgba(0,0,0,.45)}
  .hero-sc{background:linear-gradient(90deg,var(--nuit) 0%,var(--nuit) 41%,rgba(20,18,16,.42) 46%,rgba(20,18,16,.06) 52%,rgba(20,18,16,0) 57%)}
  .hero-in{padding-block:40px}
  .hero-txt{display:block;max-width:470px}
  .hero-cta{display:block}
  .hero-cap{display:block}
  .ba-hint{display:none}
  .hero-cta{margin-top:26px;padding-top:0}
  .hero h1,.hero .hx{letter-spacing:-.02em;font-size:var(--t2);max-width:14ch}
  .hero-cta .btn{padding:17px 26px;font-size:12.5px;letter-spacing:.1em;min-width:280px}
}

/* ── cartes de confiance chevauchantes ── */
.ovl{position:relative;z-index:3}
.ovl-in{display:grid;grid-template-columns:1fr;gap:1px;background:var(--encre-14);border:1px solid var(--encre-14)}
.ov{background:var(--blanc-88);padding:17px 18px}
.ov .lab{margin-bottom:7px}
.ov b{display:block;font-family:var(--dis);font-size:25px;font-weight:500;line-height:1}
.ov span{display:block;font-size:12.5px;color:var(--encre-62);margin-top:5px}
@media(min-width:820px){.ovl{margin-top:-58px}.ovl-in{grid-template-columns:repeat(4,1fr)}}

/* ── sections ── */
.sec{padding-block:var(--air)}
/* LE RYTHME VERTICAL, décidé le 24 août 2026. Entre deux blocs, l'écart
   ressenti vaut --air, partout. Entre deux blocs clairs, le blanc des deux
   moitiés s'additionnait : deux --air ressentis, quand un bloc sombre n'en
   laissait paraître qu'un — d'où des écarts inégaux à l'œil. Les jonctions
   claires partagent donc un seul --air, une moitié chacune ; toucher un bloc
   sombre garde l'air entier du côté clair, c'est lui qu'on voit. Toute
   section .sec à fond encre ou nuit DOIT porter la classe « sombre » dans
   son partiel : verif.mjs le déduit de la feuille et refuse sinon. */
.sec:not(.sombre) + .sec:not(.sombre){padding-top:calc(var(--air)/2)}
.sec:not(.sombre):has(+ .sec:not(.sombre)){padding-bottom:calc(var(--air)/2)}
.sec-c{text-align:center;max-width:62ch;margin-inline:auto}
.sec-c h2{margin-top:12px}
.sec-c h2 em{font-style:normal;color:var(--brique)}
.sec-c p{margin-top:14px;color:var(--encre-62);font-size:15.5px}


/* ═══ CHRONIQUE DE CHANTIER ═══ */
.chro{background:var(--sable)}
.rail{display:flex;gap:14px;margin-top:34px;overflow-x:auto;scroll-snap-type:x proximity;
  padding-inline:var(--pad);scroll-padding-inline:var(--pad);padding-bottom:10px;-webkit-overflow-scrolling:touch;scrollbar-width:thin}
.rail::-webkit-scrollbar{height:3px}
.rail::-webkit-scrollbar-thumb{background:var(--pierre-f)}
.rail::-webkit-scrollbar-track{background:var(--pierre)}
.fr{flex:0 0 76%;scroll-snap-align:start;max-width:340px}
.fr-w{position:relative;border:1px solid var(--encre-14);background:var(--pierre)}
.fr-w img{width:100%;aspect-ratio:4/5;object-fit:cover;display:block}
.fr-n{position:absolute;top:0;left:0;z-index:2;background:var(--encre);color:var(--blanc);
  font-family:var(--dis);font-size:15px;font-weight:500;letter-spacing:.1em;padding:7px 12px;line-height:1}
.fr-b{position:absolute;top:0;right:0;z-index:2;font-size:9.5px;font-weight:600;letter-spacing:.15em;
  text-transform:uppercase;padding:8px 10px;line-height:1;background:var(--voile-f);color:var(--blanc-88)}
.fr-b.sim{background:var(--or);color:var(--encre)}
.fr figcaption{padding-top:13px}
.fr figcaption b{display:block;font-family:var(--dis);font-size:20px;font-weight:500;line-height:1.2}
.fr figcaption span{display:block;font-size:13.5px;color:var(--encre-62);margin-top:6px;line-height:1.5}
.chro-n{margin:20px auto 0;max-width:70ch;font-size:12.5px;color:var(--encre-30);line-height:1.55;text-align:center}
@media(min-width:900px){
  .rail{display:grid;grid-template-columns:repeat(5,1fr);gap:18px;overflow:visible;padding-inline:0}
  .fr{flex:none;max-width:none}
  .fr figcaption b{font-size:18px}
  .fr figcaption span{font-size:12.5px}
}

/* ── grille photos ── */
.grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:30px}
.it img,.ph{width:100%;aspect-ratio:4/5;display:block}
.ph{background:linear-gradient(150deg,#CFC6B6,#A79C89 55%,#8B8171);position:relative}
.ph.v3{background:linear-gradient(160deg,#D8D0C1,#B0A691)}
.ph.v4{background:linear-gradient(140deg,#A9A091,#6F675A)}
.it h3{font-family:var(--dis);font-size:19px;font-weight:500;margin-top:12px}
.it span{display:block;font-size:12.5px;color:var(--encre-62);margin-top:3px}
@media(min-width:900px){.grid{grid-template-columns:repeat(4,1fr);gap:18px}}

/* ═══ PLANCHE STATIQUE : haut/bas en mobile, gauche/droite au-delà ═══ */
.duo{display:grid;grid-template-columns:1fr;gap:1px;background:var(--encre-14);
  border:1px solid var(--encre-14);margin-top:30px}
.duo figure{background:var(--creme);display:flex;flex-direction:column}
.duo-w{position:relative}
.duo-w img{width:100%;aspect-ratio:1/1;object-fit:cover;object-position:center 38%;display:block}
.duo-t{position:absolute;top:0;left:0;z-index:2;font-size:10px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;padding:7px 11px;line-height:1;background:var(--voile-f);color:var(--blanc-88)}
.duo-t.sim{background:var(--or);color:var(--encre)}
.duo figcaption{padding:14px 16px 18px;font-size:13.5px;color:var(--encre-62);line-height:1.55}
.duo figcaption b{display:block;font-family:var(--dis);font-size:20px;font-weight:500;
  color:var(--encre);line-height:1.2;margin-bottom:5px}
@media(min-width:760px){.duo{grid-template-columns:1fr 1fr}.duo-w img{aspect-ratio:3/4}.duo.duo-un{grid-template-columns:1fr;max-width:760px;margin-inline:auto}.duo-un .duo-w img{aspect-ratio:auto}}
.lgd{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:16px}
.lgd span{font-size:13px;color:var(--encre-62)}
.lgd b{color:var(--brique);font-weight:700}
@media(min-width:760px){.lgd{grid-template-columns:repeat(4,1fr)}}

/* ── opération chiffrée ── */
.sep{margin-top:34px;padding-top:26px;border-top:1px solid var(--encre-14)}
.sep p{font-size:13.5px;color:var(--encre-62);max-width:70ch}
.case{background:var(--blanc);border:1px solid var(--encre-14);margin-top:22px}
.case-t{padding:18px 20px;border-bottom:1px solid var(--encre-14);display:flex;justify-content:space-between;
  gap:12px;flex-wrap:wrap;font-size:12.5px;color:var(--encre-62)}
.case-b{padding:24px 20px;text-align:center;background:linear-gradient(180deg,var(--sable),var(--blanc))}
.case-b .num{font-size:clamp(2.6rem,13vw,4rem);font-weight:500;line-height:1;margin-top:8px}
.case-b em{display:block;font-style:normal;font-size:13px;color:var(--encre-62);margin-top:8px}
.g4{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--encre-14);border-top:1px solid var(--encre-14)}
.g4 div{background:var(--blanc);padding:15px}
.g4 b{display:block;font-size:10.5px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--encre-30);margin-bottom:5px}
.g4 span{font-family:var(--dis);font-size:21px;font-weight:500}
.qt{padding:20px;border-top:1px solid var(--encre-14);font-family:var(--dis);font-size:19px;line-height:1.45;font-style:italic}
.qt cite{display:block;margin-top:10px;font-family:var(--sans);font-style:normal;font-size:12.5px;color:var(--encre-62)}
.note{margin-top:14px;font-size:12.5px;color:var(--encre-30);line-height:1.55}
@media(min-width:760px){.g4{grid-template-columns:repeat(4,1fr)}}

/* ── vidéo terrain ── */
.film{position:relative;aspect-ratio:16/9;overflow:hidden;border:1px solid var(--encre-14);
  cursor:pointer;background:var(--encre);margin-top:30px}
.film img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease,opacity .3s}
.film:hover img{transform:scale(1.03);opacity:.86}
.film{aspect-ratio:16/9;background:
  radial-gradient(90% 130% at 82% 18%,rgba(169,134,52,.16),transparent 55%),
  linear-gradient(155deg,#2A2724,var(--nuit) 70%)}
.film-fond{position:absolute;inset:0;display:flex;flex-direction:column;
  justify-content:flex-start;align-items:flex-start;padding:26px 28px;gap:8px}
.film-lieu{font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:var(--or)}
.film-duree{font-family:var(--dis);font-size:clamp(1.2rem,2.6vw,1.7rem);color:var(--blanc-88)}
.film-alt{margin-top:10px;text-align:center;font-size:12px;color:var(--encre-30)}
.film-alt a{color:var(--brique);text-decoration:none;border-bottom:1px solid var(--encre-14)}
.film-alt a:hover{border-color:var(--brique)}
/* La miniature porte déjà son titre : le voile ne sert plus qu'à détacher le
   bouton de lecture, il est donc bien plus léger qu'avant. */
.film-ov{position:absolute;inset:0;display:grid;place-items:center;
  background:radial-gradient(38% 52% at 50% 50%,rgba(20,18,16,.42),rgba(20,18,16,.12) 70%)}
.film-pl{width:64px;height:64px;background:var(--blanc-88);display:grid;place-items:center;border-radius:var(--r-s)}
.film-pl svg{width:22px;height:22px;fill:var(--encre);margin-left:4px}
.film-r{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:14px}
.film-mini{border:1px solid var(--encre-14);background:var(--blanc)}
.film-mini-ph{display:block;aspect-ratio:16/9;
  background:repeating-linear-gradient(135deg,var(--sable) 0 8px,var(--creme) 8px 16px)}
.film-mini p{padding:10px 12px 12px;font-size:12px;line-height:1.45}
.film-mini b{display:block;font-weight:600;color:var(--encre)}
.film-mini i{font-style:normal;color:var(--brique);font-size:10.5px;letter-spacing:.06em;
  text-transform:uppercase}
@media(max-width:700px){.film-r{grid-template-columns:1fr 1fr}.film-mini:last-child{display:none}}
.film-t{position:absolute;left:18px;right:18px;bottom:16px;color:var(--blanc);
  font-family:var(--dis);font-size:clamp(17px,3.3vw,24px);font-weight:500;line-height:1.22;
  padding-top:52px;
  background:linear-gradient(180deg,rgba(20,18,16,0),rgba(20,18,16,.62) 45%,rgba(20,18,16,.9))}
.film-t em{display:block;font-style:normal;font-family:var(--sans);font-size:11px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--blanc-62);margin-top:7px}
.film iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* ── étapes ── */


/* ── FAQ ── */
/* Les mêmes cartes que le bloc des chiffres, décidé le 24 août 2026 : la
   FAQ porte la classe blb — surface, liseré, état ouvert, pastille qui
   tourne et se teinte, tout vient de la même déclaration, rien n'est
   recopié. Ici seulement : la grille (deux colonnes, une question est une
   phrase, pas un chiffre), la mesure du texte, la pastille centrée sur la
   hauteur de la question, une seule carte ouverte à la fois (name="faq"),
   et l'arrivée alternée gauche/droite, révélée carte par carte. */
.faq{background:var(--blanc)}
.acc{margin-top:26px;display:grid;grid-template-columns:1fr;gap:12px;
  overflow-x:clip;overflow-clip-margin:18px}
@media(min-width:980px){.acc{grid-template-columns:1fr 1fr}}
.acc details{align-self:start}
.acc .blb-p{bottom:auto;top:calc(50% - 6.5px)}
.acc summary{padding:17px 52px 16px 20px;font-family:var(--dis);
  font-size:17px;font-weight:600;line-height:1.3}
.acc details[open] .blb-p::after{transform:rotate(0)}
.acc details[open] .blb-p{top:24px}
.acc .ans{padding:0 20px 6px;color:var(--encre-62);font-size:14.5px;
  line-height:1.65;max-width:66ch}
.acc .ans:last-child{padding-bottom:20px}
.acc.ent-a details:not(.vue){opacity:0;transform:translateX(var(--dx,-26px))}
.acc details:nth-child(odd){--dx:-26px}
.acc details:nth-child(even){--dx:26px}

/* ── bannière ── */
.ban{position:relative;color:var(--blanc);text-align:center;overflow:hidden;
  background:linear-gradient(rgba(20,18,16,.78),rgba(20,18,16,.78)),linear-gradient(140deg,#7A7062,#332F29)}
.ban-in{position:relative;z-index:2;padding-block:64px}
.ban h2{color:var(--blanc)}
.ban p{margin:16px auto 0;color:var(--blanc-72);max-width:46ch;font-size:15.5px}
.ban .btn{margin-top:26px}

/* ── ressources ── */
/* Le résumé « En bref » vit au pied de page : c'est un texte de synthèse
   destiné aux moteurs et aux modèles de langage, pas un argument de vente.
   En milieu de page il coupait la montée vers le formulaire ; au pied il
   reste lu par les machines et ne gêne plus personne. */
.ft .bref{margin:0 0 22px;padding-bottom:22px;border-bottom:1px solid var(--blanc-12);
  font-size:12.5px;line-height:1.7;color:var(--blanc-72);max-width:none}
.ft .bref b{color:var(--blanc)}
/* La marque du pied, comme celle de l'en-tête : IMMO US, Enzo dessous. */
.ft-lgw{display:inline-flex;flex-direction:column;gap:2px}
.ft-lg{color:var(--blanc)}
.ft-lge{color:var(--blanc-62)}
.bref{max-width:var(--hold);margin:0 auto;padding:var(--air) var(--pad);font-size:14.5px;
  line-height:1.75;color:var(--encre-62);max-width:78ch}
.bref b{color:var(--encre)}
.res-l{font-size:13.5px;line-height:1.8;color:var(--encre-62);max-width:80ch}
.res-l b{color:var(--encre)}
.res-l a{color:var(--brique);text-decoration:none;border-bottom:1px solid var(--encre-14)}
.res-l a:hover{border-color:var(--brique)}
.res{display:grid;grid-template-columns:1fr;gap:22px;margin-top:32px}
.rc .ph{aspect-ratio:16/10}
.rc h3{font-family:var(--dis);font-size:21px;font-weight:500;margin-top:14px}
.rc p{margin-top:7px;font-size:14px;color:var(--encre-62)}
@media(min-width:820px){.res{grid-template-columns:repeat(3,1fr)}}

/* ═══ BANDEAU CHIFFRES DU CURSEUR ═══ */
.ba-vues{position:absolute;left:0;right:0;top:0;z-index:6;display:flex;gap:6px;
  padding:78px 14px 12px;pointer-events:none;flex-wrap:wrap}
.ba-vues button{pointer-events:auto;font-family:var(--sans);font-size:9.5px;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;padding:7px 12px;cursor:pointer;
  border:1px solid rgba(255,255,255,.34);background:var(--encre-62);color:var(--blanc-88);
  backdrop-filter:blur(6px);transition:background .22s ease,color .22s ease,border-color .22s ease}
.ba-vues button:hover{border-color:var(--blanc-72);color:var(--blanc)}
.ba-vues button[aria-current="true"]{border-color:var(--or);color:var(--blanc);
  background:var(--voile);box-shadow:inset 0 0 0 1px rgba(214,170,84,.5)}
@media(max-width:939px){
  .ba-vues{top:auto;bottom:0;padding:10px 12px;gap:5px;justify-content:center}
  .ba-vues button{font-size:9px;padding:6px 10px;letter-spacing:.1em;
    background:var(--encre-72)}
}
.ba-fig{position:absolute;left:0;right:0;bottom:0;z-index:5;pointer-events:none;
  background:linear-gradient(180deg,rgba(20,18,16,0),rgba(20,18,16,.50) 42%,rgba(20,18,16,.85) 100%);
  padding:30px 14px 13px}
@media(max-width:939px){.hero[data-multi] .ba-fig{padding-bottom:46px}}
.ba-fig-l{display:flex;justify-content:space-between;gap:10px;margin-bottom:9px}
.ba-fig-l span{font-size:8.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  padding:5px 8px;line-height:1;background:var(--blanc-88);color:var(--encre-62);border-radius:var(--r-s)}
.ba-fig-l span.r{background:var(--or);color:var(--encre)}
.ba-fig-l span.r.reel{background:var(--blanc-88);color:var(--encre-62)}
.ba-fig-v{transition:opacity .22s ease}
.ba-fig-v.sw{opacity:0}
.ba-fig-v b{display:block;font-size:9.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--blanc-88);text-shadow:0 1px 10px rgba(0,0,0,.8)}
.ba-fig-v strong{display:block;font-family:var(--dis);font-size:clamp(1.7rem,7vw,2.4rem);
  font-weight:500;color:var(--blanc);line-height:1.05;margin-top:4px;text-shadow:0 2px 20px rgba(0,0,0,.85)}
.ba-fig-v em{display:block;font-style:normal;font-size:11.5px;color:var(--blanc-88);margin-top:5px;line-height:1.45;text-shadow:0 1px 10px rgba(0,0,0,.8)}
.ba-fig-s{display:flex;gap:9px;align-items:baseline;margin-top:9px;padding-top:8px;
  border-top:1px solid rgba(255,255,255,.24)}
.ba-fig-s i{font-style:normal;font-size:9px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--blanc-62);text-shadow:0 1px 8px rgba(0,0,0,.8)}
.ba-fig-s u{text-decoration:none;font-family:var(--dis);font-size:19px;font-weight:500;color:var(--blanc);
  line-height:1;text-shadow:0 1px 12px rgba(0,0,0,.8)}
@media(min-width:940px){.ba-fig-s u{font-size:22px}}
.ba-fig-d{margin-top:9px;font-size:9px;letter-spacing:.11em;text-transform:uppercase;color:var(--blanc-62);text-shadow:0 1px 8px rgba(0,0,0,.8)}
@media(min-width:940px){
  .ba-fig{padding:40px 22px 18px}
  .ba-fig-v strong{font-size:2.6rem}
}

.det-l{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--encre-14);
  border:1px solid var(--encre-14);margin-top:26px}
.det-l div{background:var(--blanc);padding:16px 18px}
.det-l dt{font-family:var(--dis);font-size:17px;font-weight:500}
.det-l dd{margin:5px 0 0;font-size:12.5px;color:var(--encre-62);line-height:1.5}
@media(max-width:820px){.det-l{grid-template-columns:1fr 1fr}}

/* ═══ BANDE PARTENAIRES ═══ */
/* Bande d'aplat sombre, cartes blanches posées dessus : c'est le dessin du
   modèle, avec notre encre à la place de leur bleu. Le contraste de la bande
   avec les blocs clairs qui l'encadrent est ce qui la fait exister. */
/* Serrée sous le hero, dont elle est la preuve immédiate, mais séparée du
   bloc suivant par l'écart normal : 38 px puis 0 laissaient 38 px là où
   partout ailleurs il y en a 190. */
.prt{background:var(--encre);padding-block:34px var(--air);overflow:hidden}
.prt-t{text-align:center;font-size:11px;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:var(--blanc-62);margin-bottom:22px;padding-inline:var(--pad)}
.prt-fen{position:relative}

/* La bande défilait par animation CSS, donc impossible à manipuler. C'est
   maintenant un vrai rail qui défile : le doigt, la molette et les flèches
   agissent dessus, et le défilement automatique est piloté par le script. */
.prt-zone{position:relative}
.prt-fen{overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;
  overscroll-behavior-x:contain}
.prt-fen::-webkit-scrollbar{display:none}
.prt-piste{display:flex;gap:16px;width:max-content}
/* Les flèches sont la commande manuelle : elles restent visibles à toutes les
   largeurs, sinon rien ne dit qu'on peut prendre la main sur la bande. */
/* Les flèches sont posées dans une gouttière sombre réservée pour elles, à
   droite et à gauche de la fenêtre : posées sur une carte blanche, un carré
   blanc ne se verrait pas. */
.prt-fl{position:absolute;top:50%;transform:translateY(-50%);z-index:3;
  width:40px;height:40px;border:0;border-radius:var(--r-s);
  background:var(--blanc);color:var(--encre);font-size:20px;line-height:1;cursor:pointer;
  display:grid;place-items:center;opacity:.86;
  transition:opacity .2s ease,transform .2s ease}
.prt-fl:hover{opacity:1}
.prt-fl:active{transform:translateY(-50%) scale(.94)}

@media(min-width:760px){.prt-fen{margin-inline:58px}}
/* Au doigt, la bande se manipule directement : les flèches n'y servent à rien
   et mangeraient la largeur des cartes. */
@media(max-width:759px){.prt-fl{display:none}}
.prt-prev{left:9px}
.prt-next{right:9px}
@media(prefers-reduced-motion:reduce){.prt-fen{scroll-behavior:auto}}
.prt-c{margin:0;flex:none;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:12px;background:var(--blanc);border:0;
  padding:20px 28px 17px;min-width:212px;min-height:112px}
.prt-c img{height:50px;width:auto;max-width:150px;object-fit:contain;display:block}
.prt-c figcaption{font-size:9.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--encre-62);white-space:nowrap}
@media(max-width:640px){
  .prt{padding-block:24px var(--air)}
  .prt-c{padding:16px 20px 13px;min-width:172px;min-height:96px}
  .prt-c img{height:40px;max-width:118px}
  .prt-fl{width:34px;height:34px;font-size:18px}
}
@media(prefers-reduced-motion:reduce){
  .prt-piste{animation:none;width:auto;overflow-x:auto;scrollbar-width:none}
  .prt-fen{overflow-x:auto}
  .prt-c[aria-hidden]{display:none}
}

.qz-t{font-family:var(--dis);font-size:24px;font-weight:500;line-height:1.2}
.qz-st{margin-top:6px;font-size:13.5px;color:var(--encre-62)}
.qz-c{margin-top:22px}
.qz-c label{display:block;font-size:13px;font-weight:600;margin-bottom:9px}
.qz-c label b{color:var(--brique)}
.qz-o{display:flex;flex-wrap:wrap;gap:8px}
/* La confirmation du budget : le montant retenu, en rouille, et la mention confidentielle. */
/* La feuille du questionnaire est CLAIRE : encre, pas blanc (première
   version invisible, vue à la capture). Le montant retenu en brique. */
.qz-mt{margin:0 0 10px;font-size:14px;color:var(--encre-62)}
.qz-mt b{color:var(--brique);font-weight:600}
.qz-mt i,.qz-c label i{font-style:normal;font-size:11px;letter-spacing:.06em;color:var(--encre-62)}
.qz-o button{font-family:var(--sans);font-size:13px;padding:10px 15px;cursor:pointer;
  border:1px solid var(--encre-14);background:var(--blanc);color:var(--encre-62);
  transition:border-color .2s ease,color .2s ease}
.qz-o button:hover{border-color:var(--encre-30);color:var(--encre)}
.qz-o button[aria-pressed="true"]{border-color:var(--or);color:var(--encre);
  box-shadow:inset 0 0 0 1px rgba(169,134,52,.4)}
.qz-c input,.qz-c textarea{width:100%;font-family:var(--sans);font-size:14px;padding:11px 13px;
  border:1px solid var(--encre-14);background:var(--blanc);color:var(--encre)}
.qz-c input:focus,.qz-c textarea:focus{outline:none;border-color:var(--or)}
.qz-ko input,.qz-ko textarea{border-color:var(--brique)}
.qz-ko .qz-o{outline:1px solid var(--brique);outline-offset:4px}
.qz-err{margin-top:16px;font-size:12.5px;color:var(--brique)}
.qz-nav{display:flex;gap:10px;margin-top:26px}
.qz-rec{margin-top:22px;display:grid;gap:5px;padding:16px 18px;background:var(--creme);
  border:1px solid var(--encre-14)}
.qz-rec b{font-size:10px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--encre-62);margin-bottom:4px}
.qz-rec span{font-size:13.5px}
.qz-n{margin-top:16px;font-size:11.5px;color:var(--encre-30)}

/* ═══ BOUTIQUE, ARTICLES, RÉSEAUX ═══ */
.ress{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:30px}
.ress-c{border:1px solid var(--encre-14);background:var(--blanc);padding:22px 22px 24px;
  display:flex;flex-direction:column}
.ress-b{align-self:flex-start;font-size:9.5px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--or);border:1px solid var(--or);padding:4px 9px}
.ress-c h3{font-family:var(--dis);font-size:20px;font-weight:500;line-height:1.2;margin-top:13px}
.ress-c p{margin-top:9px;font-size:13.5px;line-height:1.6;color:var(--encre-62)}
.ress-c .btn{margin-top:16px;align-self:flex-start}
.ress-n{margin-top:11px!important;font-size:11px!important}
.ress-art{background:var(--sable)}

/* ═══ BOUTIQUE (v108) ═══ */
/* v111 : couvertures reelles et plaques partagent le gabarit des couvertures */
.shop-cv{display:flex;flex-direction:column;justify-content:space-between;
  background:var(--encre);color:var(--blanc);padding:18px 16px;
  border-top:3px solid var(--or);aspect-ratio:291/466}
.shop-cv em{font-style:normal;font-size:9px;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:var(--or)}
.shop-cv b{display:block;font-family:var(--dis);font-weight:400;font-size:19px;
  line-height:1.14;margin-top:10px}
.shop-cv i{display:block;font-style:normal;font-size:11px;line-height:1.45;
  color:var(--blanc-72);margin-top:9px}
.shop-cv > span{font-size:8.5px;font-weight:600;letter-spacing:.22em;
  text-transform:uppercase;color:var(--blanc-40)}
.shop-t{font-family:var(--dis);font-weight:500;font-size:20px;line-height:1.2;margin-top:16px}
.shop-s{font-size:12.5px;font-style:italic;color:var(--encre-62);margin-top:5px}
.shop-d{font-size:13.5px;line-height:1.6;color:var(--encre-62);margin-top:10px}
.shop-w{color:var(--encre)}
.shop-l{font-size:12px;line-height:1.55;color:var(--encre-62);margin-top:10px;
  padding-left:11px;border-left:2px solid var(--or)}
.shop-l a{color:var(--brique)}
.shop-m{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:14px}
.shop-b{font-size:9.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--encre-62);border:1px solid var(--encre-14);padding:4px 9px;border-radius:var(--r-s)}
.shop-p{font-family:var(--dis);font-size:19px;font-weight:500}
.shop-a{align-self:flex-start;margin-top:14px}
.shop-f{display:grid;grid-template-columns:1fr;gap:20px;margin-top:30px;
  border:1px solid var(--encre-14);background:var(--blanc);padding:20px;border-radius:var(--r)}
.shop-cover{display:block;width:100%;height:auto;border:1px solid var(--encre-14);border-radius:var(--r-s)}
.shop-i{font-size:11px;line-height:1.55;color:var(--encre-30);margin-top:9px}
/* les couvertures n'ont pas toutes le meme ratio : on cale la hauteur,
   pas la largeur, pour que les trois cartes restent alignees */
.shop-c .shop-cover{width:auto;height:300px;max-width:100%;object-fit:contain;
  margin-inline:auto}
.shop-c .shop-cv{max-width:200px;margin-inline:auto;aspect-ratio:2/3}
.shop-f .shop-cover{max-width:240px;margin-inline:auto}
@media(min-width:820px){.shop-f .shop-cover{max-width:none;margin-inline:0}}
/* v111 : plaques de la carte vedette purgees, le livre socle a sa couverture */
.shop-f .shop-t{font-size:27px;margin-top:10px}
.shop-f .shop-s{font-size:14px}
.shop-x{display:flex;flex-direction:column}
/* Sur téléphone les trois livres secondaires se balaient : empilés, la
   boutique occupait 3 701 px, soit un cinquième de toute la page, pour un
   bloc qui n'est pas le but de la visite. En rail, elle en occupe le tiers. */
.shop-g{display:grid;grid-template-columns:1fr;gap:16px;margin-top:16px}
@media(max-width:699px){
  .shop-g{display:flex;overflow-x:auto;scroll-snap-type:x proximity;
    scrollbar-width:none;overflow-anchor:none;padding-bottom:2px;
    margin-inline:calc(var(--pad)*-1);padding-inline:var(--pad);
    scroll-padding-inline:var(--pad)}
  .shop-g::-webkit-scrollbar{display:none}
  .shop-c{flex:0 0 82%;scroll-snap-align:start}
}
.shop-c{border:1px solid var(--encre-14);background:var(--blanc);padding:18px;
  display:flex;flex-direction:column}
.shop-c .shop-m{margin-top:auto;padding-top:18px}
.shop-c .shop-a{margin-top:14px}
.shop-n{margin-top:16px;font-size:11.5px;line-height:1.6;color:var(--encre-30);
  max-width:78ch;margin-inline:auto;text-align:center}
.shop-art{margin-top:22px;border:1px solid var(--encre-14);background:var(--sable);
  padding:22px;display:grid;gap:14px}
.shop-art h3{font-family:var(--dis);font-weight:500;font-size:20px;margin-top:10px}
.shop-art p{font-size:13.5px;line-height:1.6;color:var(--encre-62);margin-top:7px}
@media(min-width:700px){.shop-g{grid-template-columns:repeat(3,1fr)}}
@media(min-width:820px){
  .shop-f{grid-template-columns:236px 1fr;gap:34px;padding:30px;align-items:start}
  .shop-art{grid-template-columns:1fr auto;align-items:center;column-gap:26px}
  .shop-art .ress-n{grid-column:1/-1;margin-top:0!important}
}
.ress-off{margin-top:16px;text-align:center;font-size:12.5px;color:var(--encre-62)}

.soc-w{background:var(--blanc);padding:var(--air) 0;border-top:1px solid var(--encre-14)}
.soc-t{text-align:center;font-size:11px;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:var(--encre-62)}
.soc{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:18px;
  max-width:760px;margin-inline:auto}
.soc a{display:block;text-decoration:none;color:inherit;text-align:center;border-radius:var(--r);
  border:1px solid var(--encre-14);background:var(--blanc);padding:15px 12px 16px;
  transition:border-color .25s ease}
.soc a:hover{border-color:var(--encre)}
.soc b{display:block;font-family:var(--dis);font-size:18px;font-weight:500}
.soc span{display:block;margin-top:4px;font-size:11px;color:var(--encre-62)}
.soc-off{opacity:.5;pointer-events:none;border-radius:var(--r)}
.soc-n{margin-top:18px;text-align:center;font-size:12.5px;color:var(--encre-62);
  max-width:70ch;margin-inline:auto}
.soc-n b{color:var(--encre)}
@media(max-width:820px){
  .ress{grid-template-columns:1fr}
  .soc{grid-template-columns:1fr;max-width:340px}
}

/* L'ancienne liste des cinq étapes (filets, numéro en or) vivait ici. Le
   dessin en cartes plus bas l'a remplacée ; ses règles, toutes masquées par
   les nouvelles, gardaient pourtant un numéro en or sur fond clair, contraire
   à la doctrine. Retirées le 24 août 2026. */

/* ═══ ÉQUIPE + ÉCOSYSTÈME ═══ */
/* Portraits réduits : trois colonnes plafonnées et centrées. En pleine
   largeur, une photo carrée par tiers d'écran faisait 470 px de côté et le
   bloc se lisait comme une galerie, pas comme une équipe. */
/* L'ÉQUIPE SUR FOND NOIR, décidé le 24 août 2026 : la section rejoint les
   aplats sombres du site, et les trois personnes prennent l'anatomie des
   cartes vidéo — photo en tête à hauteur contenue (4:3, cadrée sur les
   visages), nom, rôle en rouille claire, missions — sur les couleurs des
   cartes sombres des freins. Sur téléphone : une colonne, empilée, sans
   grille savante — rien ne peut se chevaucher. */
.eqx{background:var(--encre)}
.eqx .sec-c h2{color:var(--blanc)}
.eqx .sec-c p:not(.lab){color:var(--blanc-72)}
.eq{display:grid;grid-template-columns:1fr;gap:14px;margin-top:26px;
  overflow-x:clip;overflow-clip-margin:18px}
@media(min-width:640px){.eq{grid-template-columns:1fr 1fr;gap:16px}}
@media(min-width:900px){.eq{grid-template-columns:repeat(3,1fr);gap:18px}}
.eq figure{margin:0;background:var(--encre-h);border:1px solid var(--blanc-12);
  border-radius:var(--r);overflow:hidden;
  transition:opacity .3s ease var(--d,0ms),
    transform .4s cubic-bezier(.2,.86,.3,1.04) var(--d,0ms),
    background .22s ease,border-color .22s ease}
.eq figure:hover,.eq figure:focus-within{
  background:color-mix(in srgb,var(--blanc) 7%,var(--encre-h));
  border-color:var(--blanc-16)}
.eq-ph{display:block;aspect-ratio:4/3;overflow:hidden;background:var(--encre-h)}
.eq-ph img{display:block;width:100%;height:100%;object-fit:cover;
  object-position:center 22%;transition:transform .55s cubic-bezier(.22,.9,.3,1)}
.eq figure:hover .eq-ph img{transform:scale(1.04)}
.eq figcaption{padding:15px 18px 19px}
.eq figcaption b{display:block;font-family:var(--dis);font-size:20px;font-weight:600;
  color:var(--blanc)}
.eq figcaption i{display:block;margin-top:4px;font-style:normal;font-size:10px;font-weight:600;
  letter-spacing:.13em;text-transform:uppercase;color:var(--brique-c)}
.eq figcaption span{display:block;margin-top:9px;font-size:13px;line-height:1.6;
  color:var(--blanc-72)}

.exp{margin-top:52px;padding-top:44px;border-top:1px solid var(--encre-14)}
.exp-g{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
/* Les cartes vidéo rejoignent le système, décidé le 24 août 2026 : même
   surface, même liseré, même blanc et même ombre au survol que les vignettes,
   la FAQ et l'équipe. La miniature s'approche doucement, la pastille de
   lecture grossit — deux mouvements, une même invitation. */
.exp-c{display:block;text-decoration:none;color:inherit;border:1px solid var(--encre-14);
  background:color-mix(in srgb,var(--creme) 42%,var(--blanc));
  border-radius:var(--r);overflow:hidden;padding:0 0 15px;
  transition:border-color .25s ease,background .22s ease,box-shadow .28s ease}
.exp-c:hover,.exp-c:focus-within{background:var(--blanc);border-color:var(--encre-30);
  box-shadow:0 14px 30px rgba(20,18,16,.13)}
.exp-th{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .55s cubic-bezier(.22,.9,.3,1)}
.exp-c:hover .exp-th{transform:scale(1.03)}
.exp-ph{position:relative;display:block;aspect-ratio:16/9;overflow:hidden;
  background:linear-gradient(155deg,#2A2724,var(--nuit) 72%)}
.exp-pl{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:42px;height:42px;background:var(--blanc);display:grid;place-items:center;
  transition:transform .25s ease;border-radius:var(--r-s)}
.exp-pl svg{width:18px;height:18px;fill:var(--encre)}
.exp-c:hover .exp-pl{transform:translate(-50%,-50%) scale(1.08)}
/* v107 : entretiens en ligne (.exp-on) et gabarits encore vides */
.exp-on{cursor:pointer}
.exp-ph iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.exp-ph:has(iframe) .exp-pl{display:none}
/* v128 : equipe sans portraits, et bloc d entretiens deplace dans les contenus */
.eqt{display:grid;grid-template-columns:1fr;gap:1px;margin-top:30px;
  background:var(--encre-14);border-block:1px solid var(--encre-14)}
.eqt div{background:var(--creme);padding:20px 22px 22px;border-radius:var(--r)}
.eqt b{display:block;font-family:var(--dis);font-size:21px;font-weight:500}
.eqt i{display:block;margin-top:3px;font-style:normal;font-size:10px;font-weight:600;
  letter-spacing:.13em;text-transform:uppercase;color:var(--brique)}  /* or sur clair : jamais */
.eqt span{display:block;margin-top:9px;font-size:13px;line-height:1.6;color:var(--encre-62)}
@media(min-width:820px){.eqt{grid-template-columns:repeat(3,1fr)}}
.exp-s2{margin-top:34px;padding-top:32px;border-top:1px solid var(--encre-14)}
.exp-s2 .sec-c{margin-bottom:22px}
.exp-s2 .h2x{margin-top:6px}
.exp-g2{grid-template-columns:1fr}
/* Toute la largeur du site : un plafond de 840 px vivait ici. Deux
   entretiens, deux grandes cartes, façon Cadot. */
@media(min-width:700px){.exp-g2{grid-template-columns:repeat(2,1fr)}}
.exp-s{margin-top:44px;padding-top:38px;border-top:1px solid var(--encre-14);
  text-align:center;max-width:74ch;margin-inline:auto}

.exp-s h3{margin-top:6px}
.exp-s p{margin-top:10px;font-size:14px;line-height:1.6;color:var(--encre-62)}
.exp-s + .exp-g{margin-top:24px}
.exp-n{margin-top:14px;font-size:11.5px;line-height:1.6;color:var(--encre-30);
  max-width:78ch;margin-inline:auto;text-align:center}
.exp-c[href="#"]{cursor:default}
.exp-c[href="#"]:hover{border-color:var(--encre-14)}
.exp-c[href="#"] .exp-ph{opacity:.5}
.exp-c[href="#"] .exp-pl{display:none}
.exp-c[href="#"] .exp-ph::after{content:"Bient\00f4t en ligne";position:absolute;
  top:50%;left:50%;transform:translate(-50%,-50%);font-size:10px;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--blanc-62);white-space:nowrap}
.exp-c b{display:block;margin:14px 16px 0;font-family:var(--dis);font-size:16px;
  font-weight:500;line-height:1.25}
.exp-c i{display:block;margin:5px 16px 0;font-style:normal;font-size:10px;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;color:var(--brique)}
@media(max-width:880px){
  .exp-g{grid-template-columns:1fr 1fr}
}
@media(max-width:520px){
  .eq{grid-template-columns:1fr}
  .exp-g{grid-template-columns:1fr}
  .exp{margin-top:38px;padding-top:32px}
}

/* ═══ FICHE DE DOSSIER ═══ */
.dos{margin-top:34px;border:1px solid var(--encre-14);background:var(--blanc);border-radius:var(--r)}
.dos-h{display:flex;justify-content:space-between;align-items:flex-start;gap:24px;
  padding:24px 26px 22px;border-bottom:1px solid var(--encre-14)}
.dos-h h4{font-family:var(--dis);font-size:23px;font-weight:500;line-height:1.2;margin-top:7px}
.dos-m{margin-top:5px;font-size:12.5px;color:var(--encre-62)}
.dos-r{text-align:right;flex:none}
.dos-r b{display:block;font-family:var(--dis);font-size:34px;font-weight:500;line-height:1;
  font-variant-numeric:tabular-nums}
.dos-r span{display:block;margin-top:5px;font-size:9.5px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--encre-62)}
.dos-t{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--encre-14);
  border-bottom:1px solid var(--encre-14);border-radius:var(--r);overflow:hidden}
.dos-t div{background:var(--blanc);padding:15px 26px 16px}
.dos-t dt{font-size:9.5px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;
  color:var(--encre-62)}
.dos-t dd{margin:5px 0 0;font-family:var(--dis);font-size:20px;font-weight:500;
  font-variant-numeric:tabular-nums}
.dos-c{margin:0;padding:24px 26px 22px;border-left:3px solid var(--or)}
.dos-c p{font-family:var(--dis);font-size:18px;line-height:1.5;font-style:italic;max-width:66ch}
.dos-c cite{display:block;margin-top:11px;font-style:normal;font-size:12px;
  color:var(--encre-62)}
.dos-n{padding:0 26px 22px;font-size:11.5px;line-height:1.5;color:var(--encre-h)}
@media(max-width:820px){
  .dos-h{flex-direction:column;gap:14px;padding:20px 18px 18px}
  .dos-r{text-align:left}
  .dos-r b{font-size:30px}
  .dos-t{grid-template-columns:1fr 1fr}
  .dos-t div{padding:13px 18px 14px}
  .dos-c{padding:20px 18px 18px}
  .dos-c p{font-size:16px}
  .dos-n{padding:0 18px 18px}
}

/* ═══ MARCHÉS PAR PALIER + SERVICES ═══ */
.pal{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--encre-14);
  border:1px solid var(--encre-14);margin-top:28px}
.pal-l{background:var(--blanc);padding:16px 20px 18px;display:grid;
  grid-template-columns:auto 1fr;gap:3px 12px;align-items:center;border-radius:var(--r-s)}
.pal-l b{grid-row:span 2;display:grid;place-items:center;width:30px;height:30px;
  border:1px solid var(--or);border-radius:var(--r-s);color:var(--or);font-family:var(--dis);font-size:16px;
  font-weight:400;line-height:1}
.pal-l u{text-decoration:none;font-family:var(--dis);font-size:21px;font-weight:500;line-height:1.1}
.pal-l i{font-style:normal;font-size:12px;line-height:1.4;color:var(--encre-62)}
.mar-d .mar{margin-top:24px}
@media(max-width:880px){
  .pal{grid-template-columns:1fr}
  .pal-l{padding:13px 16px 14px}
}
.mar{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:30px}
.mar-c{border:1px solid var(--encre-14);background:var(--blanc);padding:22px 22px 24px;border-radius:var(--r)}
.mar-c header{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.mar-c header b{display:grid;place-items:center;width:26px;height:26px;flex:none;
  border:1px solid var(--or);color:var(--or);font-family:var(--dis);font-size:15px;
  font-weight:400;line-height:1;border-radius:var(--r-s)}
.mar-c header span{font-size:10px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--brique)}
.mar-c h3{font-family:var(--dis);font-size:20px;font-weight:500;line-height:1.2}
.mar-c p{margin-top:10px;font-size:13.5px;line-height:1.65;color:var(--encre-62)}
.mar-c ul{margin-top:14px;padding-top:13px;border-top:1px solid var(--encre-14);
  list-style:none;display:grid;gap:6px}
.mar-c li{font-size:12px;color:var(--encre-62);padding-left:15px;position:relative}
.mar-c li::before{content:"";position:absolute;left:0;top:7px;width:5px;height:5px;
  background:var(--or)}

.serv{margin-top:40px;background:var(--encre);color:var(--blanc);padding:34px 30px 36px;border-radius:var(--r)}

.serv .h2x{margin-top:8px}
.serv-g{display:grid;grid-template-columns:repeat(3,1fr);gap:24px 34px;margin-top:26px}
.serv-g b{display:block;font-family:var(--dis);font-size:17px;font-weight:500}
.serv-g p{margin-top:6px;font-size:13px;line-height:1.6;color:var(--blanc-72)}
@media(max-width:880px){
  .mar{grid-template-columns:1fr}
  .serv-g{grid-template-columns:1fr 1fr;gap:20px 26px}
}
@media(max-width:560px){
  .serv{padding:26px 20px 28px}
  .serv-g{grid-template-columns:1fr}
}

/* ═══ RÉSUMÉ TROIS FORMATS + DÉPLIANT CHIFFRES ═══ */
.res3{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--encre-14);
  border:1px solid var(--encre-14);margin-top:28px}
.res3-c{background:var(--blanc);padding:18px 20px 20px;display:grid;
  grid-template-columns:auto 1fr;gap:4px 12px;align-items:baseline;border-radius:var(--r)}
.res3-c b{grid-row:span 1;display:grid;place-items:center;width:26px;height:26px;
  border:1px solid var(--or);color:var(--or);font-family:var(--dis);font-size:15px;
  font-weight:400;line-height:1;border-radius:var(--r-s)}
.res3-c i{font-style:normal;font-family:var(--dis);font-size:20px;font-weight:500}
.res3-c u{grid-column:2;text-decoration:none;font-family:var(--dis);font-size:22px;
  font-weight:500;margin-top:10px;line-height:1.1}
.res3-c u.m{color:var(--brique)}
.res3-c s{grid-column:2;text-decoration:none;font-size:9.5px;font-weight:600;
  letter-spacing:.13em;text-transform:uppercase;color:var(--encre-62)}
/* Arrivé ici par le menu, on n'a jamais vu les formats : la lettre seule ne
   dit rien. Le libellé la nomme, et le lien ramène au bien correspondant. */
.res3-c em{grid-column:2;font-style:normal;font-size:9.5px;font-weight:600;
  letter-spacing:.13em;text-transform:uppercase;color:var(--or);margin-top:1px}
.res3-c a{grid-column:2;justify-self:start;margin-top:16px;padding-top:11px;
  border-top:1px solid var(--encre-14);width:100%;
  font-size:10.5px;font-weight:600;letter-spacing:.11em;text-transform:uppercase;
  color:var(--brique);text-decoration:none;
  transition:color .2s ease}
.res3-c a::after{content:"\00a0→"}
.res3-c a:hover{color:var(--encre)}
@media(max-width:760px){.res3-c a{font-size:10px}}
@media(max-width:820px){
  .res3{grid-template-columns:1fr}
  .res3-c{padding:14px 16px 16px}
  .res3-c i{font-size:18px}
  .res3-c u{font-size:20px;margin-top:8px}
}

.chif-d{margin-top:22px}
.chif-d summary{list-style:none;cursor:pointer;display:flex;justify-content:center;
  align-items:center;gap:9px;padding:13px 22px;border:1px solid var(--encre);
  background:var(--blanc);font-size:11.5px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;width:fit-content;margin-inline:auto;
  transition:background .25s ease,color .25s ease}
.chif-d summary::-webkit-details-marker{display:none}
.chif-d summary::after{content:"";width:8px;height:8px;border-right:1.5px solid currentColor;
  border-bottom:1.5px solid currentColor;transform:rotate(45deg) translate(-2px,-2px);
  transition:transform .25s ease}
.chif-d summary:hover{background:var(--encre);color:var(--blanc)}
.chif-d[open] summary::after{transform:rotate(-135deg) translate(-2px,-2px)}
.chif-d[open] summary{background:var(--encre);color:var(--blanc)}
.chif-f{display:none}
.chif-d[open] .chif-o{display:none}
.chif-d[open] .chif-f{display:inline}
.chif-d .chif-w{margin-top:22px}

/* ═══ MARQUEE WHATSAPP ═══ */
/* L'intitulé au-dessus porte l'écart, comme chez les partenaires. */
.wapp-zone{position:relative}
/* Sur fond blanc, l'intitulé de bande passe du blanc-62 à l'encre-62 : même
   rôle, même corps, la couleur suit le fond comme pour les .lab. */
.wapp .prt-t{color:var(--encre-62)}
.wapp-fen{position:relative;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;
  overscroll-behavior-x:contain}
.wapp-fen::-webkit-scrollbar{display:none}
.wapp-zone::before,.wapp-zone::after{content:"";position:absolute;top:0;bottom:0;width:80px;z-index:2;
  pointer-events:none}
/* Le fondu des bords part du blanc : le fond de page est blanc, un fondu
   crème y dessinerait deux bandes teintées. */
.wapp-zone::before{left:0;background:linear-gradient(90deg,var(--blanc),transparent)}
.wapp-zone::after{right:0;background:linear-gradient(270deg,var(--blanc),transparent)}
/* Aucun retrait interne : la boucle revient d'exactement un tiers de la
   largeur totale, un retrait fausserait ce tiers et ferait dériver le raccord. */
.wapp-piste{display:flex;gap:16px;width:max-content}
.wapp-c{margin:0;flex:none;border:1px solid var(--encre-14);background:var(--wapp-fond);overflow:hidden}
.wapp-c img{height:300px;width:auto;display:block}
/* Mêmes flèches que la bande de partenaires : un seul vocabulaire pour deux
   rails qui font la même chose. */
.wapp-fl{position:absolute;top:50%;transform:translateY(-50%);z-index:3;
  width:38px;height:38px;border:1px solid var(--encre-14);background:var(--blanc);
  color:var(--encre-62);font-size:20px;line-height:1;cursor:pointer;
  display:none;place-items:center;
  transition:border-color .2s ease,color .2s ease,opacity .2s ease;border-radius:var(--r-s)}
.wapp-fl:hover{border-color:var(--encre-62);color:var(--encre)}

.wapp-prev{left:10px}
.wapp-next{right:10px}
@media(min-width:760px){.wapp-fl{display:grid}}
.wapp-n{margin-top:12px;text-align:center;font-size:12px;color:var(--encre-30)}
.itv{max-width:760px;margin:26px auto 0}
.itv .tm-v{aspect-ratio:16/9}
@media(max-width:640px){
  .wapp-c img{height:236px}
  .wapp-piste{gap:12px}
}
@media(prefers-reduced-motion:reduce){
  .wapp-piste{animation:none;width:auto}
  .wapp-fen{overflow-x:auto}
  .wapp-c[aria-hidden]{display:none}
}

/* ═══ LES CINQ FREINS ═══ */
.freins{background:var(--encre);color:var(--blanc)}

.rt-h{max-width:72ch;margin-inline:auto;text-align:center}
.rt-h h2{color:var(--blanc);margin-top:10px}
.rt-intro{margin-top:16px;font-size:15.5px;line-height:1.7;color:var(--blanc-72);
  max-width:66ch;margin-inline:auto}







.rt-zone{position:relative;margin-top:26px}

.rt-g::-webkit-scrollbar{display:none}
/* .rt-i.vu vivait ici : classe jamais posée par le script, retirée le
   24 août 2026 au profit de [aria-current], posé par pastillesRail. */
.rt-i{flex:0 0 86%;scroll-snap-align:start;display:grid;align-content:start;
  transition:border-color .3s ease,box-shadow .3s ease;
  grid-template-columns:56px 1fr;gap:14px;padding:22px 20px 24px;
  border:1px solid rgba(255,255,255,.14);background:var(--blanc-12);border-radius:var(--r)}
/* L'ordinal est en rouille éclaircie, comme celui des cinq étapes est en
   rouille : même rôle, même famille, seul le fond change. L'or ne colore pas
   un texte, il marque l'actif — ici la bordure de la carte regardée. */
.rt-n{font-family:var(--dis);font-size:38px;font-weight:300;line-height:1;
  color:var(--brique-c)}
.rt-c h3{font-family:var(--dis);font-weight:500;font-size:21px;line-height:1.2}
.rt-v{margin-top:8px;font-family:var(--dis);font-style:italic;font-size:15.5px;
  line-height:1.5;color:var(--brique-c)}
.rt-r{margin-top:10px;font-size:14px;line-height:1.65;color:var(--blanc-72)}

.rt-fl{position:absolute;top:50%;transform:translateY(-50%);z-index:3;
  width:44px;height:44px;border:1px solid rgba(255,255,255,.35);background:var(--encre);
  color:var(--blanc);font-size:22px;line-height:1;cursor:pointer;display:none;
  transition:border-color .25s ease,opacity .25s ease;border-radius:var(--r-s)}
.rt-fl:hover{border-color:var(--blanc)}
.rt-fl[disabled]{opacity:.28;cursor:default}
.rt-fl[disabled]:hover{border-color:var(--blanc-40)}
.rt-prev{left:-14px}.rt-next{right:-14px}

@media(min-width:940px){
  .rt-i{flex:0 0 calc(50% - 8px);grid-template-columns:64px 1fr;gap:18px;
    padding:26px 26px 28px}
  .rt-n{font-size:44px}
  .rt-fl{display:block}
}
/* ═══ LE RAIL DES PREUVES (25 août 2026) ══════════════════════════════
   Le rail des signaux, avec une pièce à la place d'une citation. La carte
   passe en une seule colonne (l'ordinal au-dessus, pas à côté : la pièce
   a besoin de toute la largeur), et la pièce vit sur une SCÈNE blanche de
   ratio fixe — les documents n'ont pas tous le même format, la scène leur
   en donne un commun sans jamais les rogner (contain). */
.art-preuves .rt-i{flex:0 0 min(86vw,560px);grid-template-columns:1fr;gap:0}
.art-preuves .rt-n{font-size:24px;line-height:1;margin-bottom:12px}
.pr-v{margin:0;aspect-ratio:16/10;background:var(--blanc);
  display:grid;place-items:center;overflow:hidden;border:1px solid var(--blanc-16)}
.pr-v img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;display:block}
.pr-v .tm-v{width:100%;height:100%;margin:0;border-radius:0}
.pr-v .tm-v img{width:100%;height:100%;object-fit:cover}
/* La rangée de vignettes DANS un article : même composant que la landing,
   posé sur fond clair — le liseré et l'intitulé passent donc à l'encre. */
.art-vign{margin:26px 0 4px}
.art-vign .vign-t{color:var(--encre-62)}
.art-vign .vg{border-color:var(--encre-14)}
.art-vign .vg:hover{border-color:var(--encre-30)}
.art-vign .vg.pr-z{all:revert;position:relative;flex:none;padding:0;line-height:0;cursor:zoom-in;
  border:1px solid var(--encre-14);background:none;display:block;width:auto;height:auto}
/* L'AVANT / APRÈS D'ARTICLE (25 août 2026, demandé par Kévin : « juste
   avant après, la photo entière, prix d'achat, prix de revente, une fiche
   avec les bénéfices ») : le `.duo` de la landing, deux figures côte à
   côte, étiquette Avant / Après, légende avec le prix ; la photo est
   ENTIÈRE (scène carrée en `contain`), le clic l'ouvre dans la visionneuse ;
   sous les deux, la fiche `.lgd` de l'opération. */
.art-duo{column-span:all;margin:26px 0 6px}
.art-duo .duo{margin-top:0}
.art-duo .duo-w .pr-z{display:block;width:100%;height:auto}
.art-duo .duo-w .pr-z img{width:100%;height:auto;max-height:none;aspect-ratio:1/1;
  object-fit:contain;object-position:center;background:var(--creme)}
.art-duo .duo-t{font-size:11px;padding:8px 12px}
.art-duo .lgd{margin-top:14px}
.art-duo .art-leg{margin-top:10px}
.pr-z{all:unset;display:grid;place-items:center;width:100%;height:100%;
  position:relative;cursor:zoom-in}
.pr-z img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;display:block}
.pr-lp{position:absolute;right:8px;bottom:8px;padding:4px 9px;
  background:color-mix(in srgb,var(--nuit) 78%,transparent);color:var(--blanc);
  font-size:10px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  opacity:0;transition:opacity .2s ease}
.pr-z:hover .pr-lp,.pr-z:focus-visible .pr-lp{opacity:1}
.pr-z:focus-visible{outline:2px solid var(--or-c);outline-offset:2px}
.art-preuves .rt-c h3{margin-top:16px;font-size:19px}
.art-preuves .rt-r{margin-top:8px}
.rt-fin{margin-top:36px;text-align:center}

/* Le rail des documents est sur fond sombre : sa note reste claire.
   (Corrigé le 27 août 2026 après une passe de contraste qui l'avait
   assombrie — l'agent l'a rattrapée : texte à 1,3:1.) */
.rt-note{margin-top:12px;font-size:12px;color:var(--blanc-72)}

@media(max-width:560px){
  .rt-i{grid-template-columns:1fr;gap:6px;padding:18px 16px 20px}
  .rt-n{font-size:30px}
}

/* ═══ SÉLECTEUR DE FORMAT, au-dessus du hero ═══ */
/* Le même blanc que la barre, et rien pour les séparer : le haut de la page
   est un seul champ clair, la hiérarchie est portée par le texte. */
/* Marge basse retirée. Le bloc des opérations est suivi d'un bloc clair, et
   deux blocs clairs qui se suivent additionnent leurs marges : 62 px plus
   62 px, soit 124 px de vide, contre 62 seulement avant un bloc à fond
   coloré, dont le bord arrête l'œil. L'écart n'était donc pas le même selon
   le voisin. Ici il vaut 62 comme partout ailleurs. */
.fmt2{background:var(--blanc);padding-block:var(--air) 0}
/* Le sélecteur suit la bande sombre : il porte l'écart entier en haut. */
/* L'écart est porté par la section, comme partout : le porter aussi ici le
   doublait à l'intérieur du bloc. */
.fmt2-in{padding-block:0}
/* v124 : l axe France -> Etats-Unis, avant toute lecture.
   Pas d or : la regle est que l or ne designe que l actif. */
.axe{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;
  margin:0 0 14px;font-size:11px;font-weight:600;letter-spacing:.15em;text-transform:uppercase;
  color:var(--encre)}
.axe b{font-weight:600;display:inline-flex;align-items:center;gap:7px}
.dr{flex:none;display:block;height:11px;border:1px solid var(--encre-14)}
.dr-fr{width:16.5px}
.dr-us{width:21px}
.axe-m{display:flex;flex-direction:column;align-items:center;gap:3px}
.axe-s{width:164px;height:27px;flex:none;overflow:visible}
.axe-l{fill:none;stroke:var(--encre-30);stroke-width:1.4;stroke-dasharray:4 4;stroke-linecap:round}
.axe-p{fill:var(--encre)}
.axe-k{font-size:9px;letter-spacing:.2em;color:var(--encre-30);line-height:1}
@media(max-width:520px){.axe{gap:10px;font-size:10px}.axe-s{width:112px;height:20px}}
/* Le pavé IMMO US ne bouge pas. La seule animation est à droite : « Depuis la
   France » se tape lettre à lettre, curseur compris. La largeur est mesurée par
   le script, sinon les pas de la machine ne tombent pas sur les caractères. */

.lg-fr{display:none;flex:none;overflow:visible;white-space:nowrap;padding-left:26px;
  margin-left:2px;
  min-width:calc(var(--lgw,116px) + 28px)}
.tw{display:inline-block;overflow:hidden;white-space:nowrap;font-style:normal;
  font-weight:600;text-transform:uppercase;vertical-align:middle;
  color:var(--encre-72);border-right:1.5px solid var(--encre-30);
  width:0;animation:lgtape 1.5s steps(16,end) .55s both,lgcur .62s step-end 8}
.lg-fr .tw{font-size:8.4px;letter-spacing:.18em}
/* Sous 1360 px la barre n'a pas la place à droite : la mention passe en
   troisième ligne dans le pavé, avec la même frappe. */
/* La mention devient un lien vers la section qui explique le partage des
   rôles. Elle ne peut donc plus vivre à l'intérieur du lien du logo : deux
   liens imbriqués sont invalides. Elle sort du cadre et se pose dessous. */
.lg-w{display:flex;flex-direction:column;align-items:flex-start}
/* ── le pavé : la marque, la personne, la promesse ─────────────────────
   Trois niveaux, du plus grand au plus petit. « US » en or et « Enzo » en
   rouille sont les deux seuls accents : un par ligne, jamais deux sur la
   même. La promesse est en bas de casse, contrairement à tout le reste des
   micro-textes du site : c'est ce qui la fait lire comme une phrase et non
   comme une étiquette, et c'est tout l'objet du décrochage. */
/* LE LOGO D'ENZO (25 août 2026, fourni par Kévin : l'avatar de la chaîne,
   détouré) : le médaillon devant la marque typographique, dans les entêtes,
   les pieds et les frises. Le médaillon est rond et cerclé d'or : il tient
   sur blanc comme sur encre. */
.lg-box{border:0;padding:0;text-align:left;line-height:1;display:flex;align-items:center;gap:10px}
.lg-img{width:42px;height:42px;flex:none;display:block}
.lg-txt{display:block}
/* Le portrait d'Enzo dans le grand menu « Qui est Enzo » (25 août 2026) :
   la carte « Le fondateur » montre son visage au survol, rond, à la place
   du pictogramme. */
.hd-port{overflow:hidden;padding:0;clip-path:circle(50%)}
.hd-port img{width:100%;height:100%;object-fit:cover;object-position:50% 20%;display:block}
.ft-lgw{flex-direction:row;align-items:center;gap:12px}
.ft-img{width:48px;height:48px;flex:none;display:block}
.ft-txt{display:inline-flex;flex-direction:column;gap:2px}
.af-lg img{width:64px;height:64px;display:block}
@media(max-width:560px){.lg-img{width:36px;height:36px}.af-lg img{width:48px;height:48px}}
.lg-n{display:block;font-family:var(--dis);font-size:17px;letter-spacing:.20em;
  font-weight:600;color:var(--encre)}
.lg-n i{font-style:normal;color:var(--or)}
.lg-e{display:block;margin-top:6px;font-style:normal;font-size:9px;font-weight:700;
  letter-spacing:.28em;text-transform:uppercase;color:var(--brique);line-height:1}
@media(max-width:1359px){.lg-n{font-size:15.5px;letter-spacing:.18em}
  .lg-e{font-size:8.4px;margin-top:5px}
  }
@media(max-width:420px){.lg-n{font-size:15px;letter-spacing:.16em}
  .lg-e{font-size:8px;letter-spacing:.24em}
  }

.lg-m{display:block;margin-top:3px;padding-left:1px;line-height:1;text-decoration:none;
  min-width:calc(var(--lgw,104px) + 1px);
  border-bottom:1px solid var(--encre-14);padding-bottom:1px}
.lg-m:hover .tw,.lg-fr:hover .tw{color:var(--encre)}
.lg-fr{text-decoration:none}
.lg-m:focus-visible,.lg-fr:focus-visible{outline:2px solid var(--encre);outline-offset:2px}
.lg-m .tw{font-size:7.4px;letter-spacing:.14em;color:var(--encre-72)}
@media(min-width:1360px){.lg-m{display:none!important}}
/* Trois lignes dans la hauteur de la barre sur téléphone : elles n'y tiennent
   qu'en resserrant le corps et les marges. */
@keyframes lgtape{to{width:var(--lgw,112px)}}
@keyframes lgcur{0%,50%{border-right-color:var(--encre-30)}
  50.01%,100%{border-right-color:transparent}}
@media(min-width:1360px){.lg-fr{display:block}}
@media(prefers-reduced-motion:reduce){
  .tw{animation:none!important;width:auto!important;border-right-color:transparent!important}}

/* « avec Enzo et son équipe » élargit le pavé de 120 px. Entre 900 et 1140 px
   la barre porte déjà la navigation complète : on ne le rétablit qu'au-delà. */

.fmt2-h{text-align:center;max-width:44ch;margin:0 auto 18px}
@media(min-width:860px){.fmt2-h{max-width:none}}
@media(max-width:700px){.fmt2-h .nw{white-space:normal}}
.nw{white-space:nowrap}
.fmt2-h .lab{margin-bottom:var(--e1)}
.fmt2-h h2{}
.fmt2-h h2 em{display:block;margin-top:14px;font-style:normal;color:var(--brique)}

.fm-som{display:none;gap:8px;margin-bottom:12px}
.fm-som a{display:flex;align-items:center;gap:7px;padding:8px 13px;
  border:1px solid var(--encre-14);color:var(--encre-62);text-decoration:none;
  font-size:11.5px;font-weight:600;letter-spacing:.06em;white-space:nowrap;flex:none;
  transition:border-color .25s ease,color .25s ease}
.fm-som a s{text-decoration:none;font-family:var(--dis);font-size:15px;font-weight:400;
  color:var(--encre-30)}
.fm-som a:hover{border-color:var(--encre-30);color:var(--encre)}
.fm-som a[aria-current="true"]{border-color:var(--or);color:var(--encre);background:var(--blanc)}
.fm-som a[aria-current="true"] s{color:var(--or)}
/* Un cœur ne gonfle pas, il frappe : deux coups rapprochés, puis le silence.
   C'est le rythme qui rend le mouvement perceptible, pas l'amplitude. À 4,5 %
   en 0,13 s le battement se voit ; le même écart étalé sur une demi-seconde ne
   se verrait pas. Il s'arrête dès que le visiteur touche un format. */
@keyframes fmcoeur{
  0%{transform:scale(1)}
  4%{transform:scale(1.045)}
  9%{transform:scale(1)}
  13%{transform:scale(1.03)}
  19%{transform:scale(1)}
  100%{transform:scale(1)}}
.fmt2-h em{transform-origin:center;animation:fmcoeur 2.8s ease-in-out 1.2s infinite}
.fmt2.choisi .fmt2-h em{animation:none!important;transform:none!important}
@media(prefers-reduced-motion:reduce){
  .fmt2-h em{animation:none!important;transform:none!important}}


/* UX du sélecteur, valable sur tous les appareils. Le survol n'existe pas sur
   téléphone : l'invitation doit tenir dans l'état au repos. La carte active dit
   « Affiché ci-dessous », les autres disent quoi faire. Le mécanisme se comprend
   sans rien survoler et sans rien attendre. */
/* Retour au doigt : la carte s'enfonce à l'appui. C'est le seul moment où un
   téléphone peut confirmer que l'élément répond. */
.fm-som a:active{transform:translateY(1px)}


@media(max-width:939px){

  .fmt2-h{margin-bottom:10px}
  .fmt2-h h2{line-height:1.18}
  .fmt2-h h2 em{margin-top:11px}
  .fm-som{display:flex;overflow-x:auto;scrollbar-width:none;
    margin-inline:calc(var(--pad)*-1);padding-inline:var(--pad)}
  .fm-som::-webkit-scrollbar{display:none}
}

/* ═══ VIGNETTES SOUS LE HERO ═══ */
.vign{background:var(--encre);border-bottom:1px solid rgba(255,255,255,.1)}
.vign-in{padding-block:12px 14px}
.vign-t{font-size:9.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--blanc-40);margin-bottom:9px}
.vign-r{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
.vign-r::-webkit-scrollbar{display:none}
.vg{position:relative;flex:none;padding:0;border:1px solid rgba(255,255,255,.18);background:none;
  cursor:zoom-in;line-height:0;transition:border-color .2s,transform .2s}
.vg:hover{border-color:var(--blanc-62);transform:translateY(-2px)}
.vg img{width:88px;height:60px;object-fit:cover;display:block}
.vg-vide{width:88px;height:60px;cursor:default;
  background:repeating-linear-gradient(135deg,rgba(255,255,255,.06) 0 6px,transparent 6px 12px)}
.vg-vide:hover{transform:none;border-color:var(--blanc-16)}
@media(min-width:940px){.vg-vide{width:112px;height:76px}}
.vg-b{position:absolute;left:0;bottom:0;font-size:7.5px;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;padding:3px 5px;line-height:1;background:var(--voile-f);color:var(--blanc-88);border-radius:var(--r-s)}
@media(min-width:940px){.vg img{width:112px;height:76px}.vg-b{font-size:8.5px;padding:4px 7px}}

/* ═══ VISIONNEUSE ═══ */
.lb{position:fixed;inset:0;z-index:200;background:var(--nuit);display:none;
  flex-direction:column;padding:14px}
.lb[open]{display:flex}
.lb-top{display:flex;justify-content:space-between;align-items:center;gap:12px;flex:none;
  color:var(--blanc-62);font-size:11px;letter-spacing:.14em;text-transform:uppercase}
.lb-x{background:none;border:1px solid rgba(255,255,255,.3);color:var(--blanc);font-size:18px;line-height:1;
  width:38px;height:38px;cursor:pointer}
.lb-x:hover{background:var(--blanc-12)}
/* Corrigé le 25 août 2026 (Kévin : « la photo entière ») : la piste de la
   grille était `auto`, donc dimensionnée par l'image — un portrait de
   1632 px débordait sous la légende. La piste prend la hauteur du cadre
   (minmax(0,1fr)) et l'image s'y loge en `contain` : rien n'est coupé,
   paysage comme portrait, sur la landing comme dans les articles. */
.lb-m{flex:1;min-height:0;display:grid;grid-template-rows:minmax(0,1fr);
  grid-template-columns:minmax(0,1fr);place-items:center;padding:12px 0}
.lb-m img{width:100%;height:100%;object-fit:contain;display:block}
.lb-b{flex:none;display:flex;gap:12px;align-items:center;justify-content:space-between}
.lb-c{color:var(--blanc);font-size:14px;line-height:1.45;max-width:60ch}
.lb-c b{display:block;font-family:var(--dis);font-size:19px;font-weight:500}
.lb-c span{color:var(--blanc-62);font-size:13px}
.lb-nav{display:flex;gap:8px;flex:none}
.lb-nav button{background:none;border:1px solid rgba(255,255,255,.3);color:var(--blanc);font-size:16px;
  width:44px;height:44px;cursor:pointer}
.lb-nav button:hover{background:var(--blanc-12)}

/* ═══ L'INVESTISSEMENT EN CHIFFRES ═══ */
.chif-w{position:relative;margin-top:32px}
.chif{border:1px solid var(--encre-14);background:var(--blanc);overflow-x:auto;
  scrollbar-width:thin}
.chif::-webkit-scrollbar{height:4px}
.chif::-webkit-scrollbar-thumb{background:var(--pierre-f)}
.chif-s{display:flex;align-items:center;gap:7px;margin-bottom:8px;
  font-size:10px;font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:var(--encre-30)}
.chif-s::after{content:"";flex:1;height:1px;background:var(--encre-14)}
@media(min-width:820px){.chif-s{display:none}}
.chif-w::after{content:"";position:absolute;top:0;right:0;bottom:0;width:34px;pointer-events:none;
  background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.92))}
@media(min-width:820px){.chif-w::after{display:none}}
.chif table{border-collapse:collapse;width:100%;min-width:600px}
.chif th,.chif td{padding:11px 14px;border-bottom:1px solid var(--encre-14);font-size:14px;
  text-align:right;vertical-align:baseline;white-space:nowrap}
@media(max-width:640px){
  .chif th,.chif td{padding:9px 10px;font-size:12.5px}
  .chif td{font-size:15px}
  .chif th:first-child,.chif td:first-child{width:27%;font-size:11px}
  .chif thead i{font-size:16px}
  .chif thead b,.chif thead em{font-size:8.5px}
  .chif td small{font-size:10px}
}
.chif th:first-child,.chif td:first-child{text-align:left;white-space:normal;
  font-size:12px;font-weight:600;letter-spacing:.06em;color:var(--encre-62);width:30%}
.chif thead th{background:var(--sable);vertical-align:top;padding-block:14px}
.chif thead th:first-child{background:var(--sable)}
.chif thead b{display:block;font-size:9px;font-weight:600;letter-spacing:.15em;
  text-transform:uppercase;color:var(--or)}
.chif thead i{display:block;font-family:var(--dis);font-style:normal;font-size:20px;
  font-weight:500;margin-top:4px;line-height:1.15;color:var(--encre)}
.chif thead em{display:block;font-style:normal;font-size:10.5px;color:var(--encre-62);margin-top:4px;
  letter-spacing:.06em;white-space:normal}
.chif td{font-family:var(--dis);font-size:17px;font-weight:500;color:var(--encre)}
.chif tr.cle td{background:var(--sable)}
.chif tr.cle td:first-child{background:var(--sable);color:var(--encre)}
.chif td.vide{color:var(--pierre-f)}
.chif td small{display:block;font-family:var(--sans);font-size:11px;font-weight:400;
  color:var(--encre-62);margin-top:2px;letter-spacing:.02em}
.chif tbody tr:last-child td{border-bottom:0}
.chif-l{margin-top:18px;padding:16px 18px;background:var(--blanc);border:1px solid var(--encre-14);
  font-size:13.5px;color:var(--encre-62);line-height:1.65;max-width:82ch;border-radius:var(--r)}
.chif-l b{color:var(--encre)}
.chif-l+.chif-l{margin-top:10px}

/* ═══ DEUX FORMATS D'OPERATION ═══ */
.fmt-t{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--encre-14);
  border:1px solid var(--encre-14);margin-top:32px}
.fmt-t button{font-family:var(--sans);background:var(--creme);border:0;cursor:pointer;
  padding:16px 14px;text-align:left;transition:background .2s,color .2s}
.fmt-t button:hover{background:var(--blanc)}
.fmt-t button[aria-selected="true"]{background:var(--encre);color:var(--blanc)}
.fmt-t b{display:block;font-size:10px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--encre-30)}
.fmt-t button[aria-selected="true"] b{color:var(--or)}
.fmt-t i{display:block;font-family:var(--dis);font-style:normal;font-size:19px;font-weight:500;
  margin-top:6px;line-height:1.2}
.fmt-t em{display:block;font-style:normal;font-size:12px;color:var(--encre-62);margin-top:4px}
.fmt-t button[aria-selected="true"] em{color:var(--blanc-40)}
.fmt-p[hidden]{display:none}
.fmt-h{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:26px;
  font-size:12.5px;color:var(--encre-62)}
.fmt-s{font-size:10px;font-weight:600;letter-spacing:.15em;text-transform:uppercase;padding:6px 10px;line-height:1}
.fmt-s.clos{background:var(--encre);color:var(--blanc)}
.fmt-s.prev{background:var(--or);color:var(--encre)}
.g6{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--encre-14);
  border:1px solid var(--encre-14);margin-top:20px}
.g6 div{background:var(--blanc);padding:15px}
.g6 b{display:block;font-size:10.5px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;
  color:var(--encre-30);margin-bottom:5px}
.g6 span{font-family:var(--dis);font-size:20px;font-weight:500}
.g6 div.fort{background:var(--sable)}
.g6 div.fort span{font-size:23px}
.g6 em{display:block;font-style:normal;font-size:11px;color:var(--encre-62);margin-top:3px;line-height:1.4}
@media(min-width:760px){.g6{grid-template-columns:repeat(4,1fr)}}
.fin{margin-top:18px;padding:16px 18px;background:var(--blanc);border:1px solid var(--encre-14);
  font-size:13.5px;color:var(--encre-62);line-height:1.6}
.fin b{color:var(--encre)}

/* ═══ PREUVES AGREGEES ═══ */
.agr{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--encre-14);
  border:1px solid var(--encre-14);margin-top:30px}
.agr div{background:var(--blanc);padding:18px 16px;text-align:center}
.agr b{display:block;font-family:var(--dis);font-size:30px;font-weight:500;line-height:1}
.agr b.tbd{font-size:22px;color:var(--pierre-f)}
.agr span{display:block;font-size:12px;color:var(--encre-62);margin-top:6px;line-height:1.4}
@media(min-width:760px){.agr{grid-template-columns:repeat(4,1fr)}}

/* ═══ EQUIPE A DETROIT ═══ */
/* v105 : bloc purge. Grille survivante d'une version anterieure (2 puis 4 colonnes,
   fond degrade, badge incruste) qui ecrasait les regles ÉQUIPE plus haut.
   Voir §10 du document de contexte : purger les anciennes regles. */

/* ═══ CADRE JURIDIQUE ET FISCAL ═══ */
/* ═══ CADRE JURIDIQUE ET FISCAL ══════════════════════════════════════
   Aplat sombre, grand titre centré, puis trois blocs de tailles et de
   hauteurs différentes. Le premier, la détention, est le plus important :
   il est le plus grand et le seul sur fond clair. Les deux autres sont en
   accent, décalés vers le bas, et de hauteurs inégales : c'est ce
   décalage qui fait la composition, pas un alignement de trois colonnes.

   L'or et la rouille servent ici de fonds, jamais de texte : sur un
   aplat de couleur, le texte est blanc, et les deux couleurs sont
   assez sombres pour le porter. */
.cad{background:var(--encre);color:var(--blanc-72)}
/* Aligné à droite : le titre se termine au même bord que le bloc, et le
   regard redescend ensuite sur la première barre, à gauche. La largeur se
   règle sur le titre lui-même, pas sur le conteneur : posée sur le bloc,
   elle écraserait aussi le sur-titre et le chapô. */
.cad-h{text-align:right;margin:0 0 44px}

.cad-h .lab{margin-bottom:var(--e1)}
.cad-h h2{color:var(--blanc);margin-top:14px;margin-left:auto}
.cad-h p{margin-top:var(--e2);font-size:var(--st);line-height:1.6;color:var(--blanc-72);
  max-width:58ch;margin-left:auto}
/* Le sur-titre est un p : il héritait de la largeur maximale du chapô, et
   comme la règle .lab remet ensuite les marges à zéro, sa boîte restait
   collée à gauche. L'alignement à droite s'appliquait donc à l'intérieur
   d'une boîte de 700 px, et le mot flottait au milieu du bloc. */
.cad-h .lab{max-width:none}
/* Sur téléphone le texte revient à gauche : un paragraphe aligné à droite sur
   une colonne étroite oblige l'œil à chercher chaque début de ligne. */
@media(max-width:639px){.cad-h,.cad-h h2,.cad-h p{text-align:left;margin-left:0}}

.cadg{display:grid;grid-template-columns:1fr;gap:18px;margin-top:0}
/* Le texte est calé en haut de chaque barre, et le vide tombe en bas. Les
   trois barres restent posées sur un même sol par leurs bas ; ce sont leurs
   hauteurs qui diffèrent, pas la ligne où commence le texte. */
.cadg article{border-radius:var(--r);padding:26px 24px;
  display:flex;flex-direction:column;justify-content:flex-start}
.cadg em{display:block;font-style:normal;font-size:9.5px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;margin-bottom:12px}
.cadg h3{font-size:21px;font-weight:600;line-height:1.18;letter-spacing:-.015em}
.cadg p{font-size:14px;line-height:1.62}

:root{--cad-h1:600px;--cad-h2:505px;--cad-h3:420px}

/* ── La barre de la détention ──────────────────────────────────────
   Ce n'est plus un paragraphe mais une composition : cinq fragments de
   tailles, de couleurs et d'alignements différents, qui s'écrivent l'un
   après l'autre. Le texte est le même que la phrase d'origine, découpé.
   Sans script, ce sont six lignes ordinaires, toutes lisibles. */
/* Repli pour Safari avant 16.2 : sans lui, color-mix rend la déclaration
   invalide et le fond disparaît. La valeur est le résultat exact du mélange. */
.cad-1{background:var(--carte);color:var(--encre-72)}
.cad-1{background:color-mix(in srgb,var(--creme) 42%,var(--blanc))}
.cad-1 em{color:var(--brique)}
.cad-1 .cdf{line-height:1.14;letter-spacing:-.018em;text-wrap:balance}
.cad-1 .cdf-1{color:var(--encre);font-size:clamp(1.5rem,3vw,1.95rem);font-weight:600;margin-top:14px}
.cad-1 .cdf-2{color:var(--or);font-size:clamp(1.05rem,2.1vw,1.4rem);font-weight:600;margin-top:16px}
.cad-1 .cdf-3{color:var(--encre-62);font-size:clamp(1.05rem,2.1vw,1.4rem);font-weight:600;
  text-align:right;margin-top:2px}
.cad-1 .cdf-4{color:var(--encre-72);font-size:clamp(.92rem,1.5vw,1.02rem);font-weight:500;
  line-height:1.45;margin-top:16px;max-width:34ch}
.cad-1 .cdf-5{color:var(--brique);font-size:clamp(1.15rem,2.4vw,1.6rem);font-weight:600;margin-top:16px}
/* Le filet or sous le dernier fragment, comme sur le modèle. */
.cad-1 .cdf-6{color:var(--encre-62);font-size:clamp(.95rem,1.8vw,1.15rem);font-weight:600;
  margin-top:4px;padding-bottom:9px;width:fit-content;
  border-bottom:2px solid var(--or)}

/* Les deux barres d'accent : une seule phrase, en grand, en blanc, coupée
   en deux par la virgule. Rien d'autre dans le bloc, et beaucoup de couleur
   au-dessus : c'est le vide qui donne au texte sa force. */
/* Sur l'or, le texte est en encre pleine : à 78 % il tombait à 3,7:1, sous
   le seuil, et le sur-titre à 2,8. La hiérarchie se fait au corps et à la
   casse, pas à l'opacité. */
.cad-2,.cad-3{color:var(--blanc)}
.cad-2 em,.cad-3 em{color:var(--blanc-72)}
.cad-2 h3,.cad-3 h3{color:var(--blanc);text-transform:uppercase;font-weight:500;
  font-size:clamp(1.35rem,2.5vw,1.95rem);line-height:1.14;letter-spacing:-.005em}
.cad-2{background:var(--or)}
.cad-3{background:var(--brique)}

.cad-n{margin-top:34px;font-size:12.5px;color:var(--blanc-40);line-height:1.6;max-width:74ch}

@media(min-width:860px){
  /* Trois barres posées sur le même sol, de hauteurs décroissantes : la
     détention est la plus haute parce que c'est le message principal, les
     deux autres descendent. Les bas sont alignés, les hauts non : c'est
     l'inverse d'un escalier, et c'est ce qui donne la lecture en courbe. */
  .cadg{grid-template-columns:1.5fr 1fr 1fr;gap:20px;align-items:end}
  .cadg article{padding:32px 28px}
  /* Les bas sont alignés, donc une barre plus haute commence plus haut : sans
     compensation, son texte démarrerait au-dessus de celui des autres. Chaque
     barre reçoit donc en garniture haute l'écart avec la plus courte. Le
     calcul est dérivé des hauteurs, jamais recopié : changer une hauteur
     réaligne les trois toute seule. */
  .cadg .cad-1{padding-top:calc(32px + var(--cad-h1) - var(--cad-h3))}
  .cadg .cad-2{padding-top:calc(32px + var(--cad-h2) - var(--cad-h3))}
  /* Les barres montent, et l'écart entre elles avec : à hauteur égale le
     rapport se lit mal, c'est la différence absolue qui fait la courbe.
     Rapport conservé, 1 : 0,84 : 0,70, comme sur le modèle. La moitié
     haute de chaque barre reste vide : c'est ce vide qui donne au texte
     sa force, et c'est lui qu'on regarde d'abord. */
  .cadg .cad-1{min-height:var(--cad-h1);padding-inline:34px}
  .cadg .cad-2{min-height:var(--cad-h2)}
  .cadg .cad-3{min-height:var(--cad-h3)}
}
/* Sur téléphone les trois barres se suivent : elles gardent leur hauteur de
   couleur au-dessus du texte, mais dans un rapport plus modeste, sinon la
   page s'allonge pour rien. */
@media(max-width:859px){
  /* Empilées, les barres ne forment plus de courbe : aucune compensation à
     faire, le texte est simplement en haut et le vide en bas. */
  .cad-1{min-height:450px}
  .cad-2{min-height:380px}
  .cad-3{min-height:320px}
}
@media(min-width:1180px){.cadg{gap:24px}}

/* ═══ MUR DE TEMOIGNAGES FILTRABLE ═══ */
.h2x{}
.h2x em{font-style:normal;color:var(--brique)}
.cpt{display:flex;flex-wrap:wrap;gap:8px 26px;justify-content:center;margin-top:14px;
  font-size:12.5px;color:var(--encre-62)}
.cpt b{font-family:var(--dis);font-size:19px;font-weight:500;color:var(--encre);margin-right:5px;
  font-variant-numeric:tabular-nums;transition:color .45s ease}
.cpt.run b{color:var(--or)}
.tm-filt{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-top:28px}
.tm-filt button{font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.13em;
  text-transform:uppercase;padding:9px 14px;border:1px solid var(--encre-14);background:transparent;
  color:var(--encre-62);cursor:pointer;transition:background .2s,color .2s,border-color .2s}
.tm-filt button:hover{border-color:var(--encre-30)}
.tm-filt button[aria-pressed="true"]{background:var(--encre);color:var(--blanc);border-color:var(--encre)}
.tmg{display:grid;grid-template-columns:1fr;gap:16px;margin-top:26px}
.tm{border:1px solid var(--encre-14);background:var(--blanc)}
.tm-v{cursor:pointer;position:relative;background:
  radial-gradient(100% 140% at 80% 15%,rgba(169,134,52,.18),transparent 55%),
  linear-gradient(155deg,#2A2724,var(--nuit) 72%)}
.tm-v img{width:100%;height:100%;object-fit:cover;display:block;opacity:.92}
.tm-v iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.tm-go{position:absolute;inset:0;margin:auto;width:52px;height:52px;background:var(--blanc);
  display:grid;place-items:center;transition:transform .25s ease;border-radius:var(--r-s)}
.tm-go svg{width:22px;height:22px;fill:var(--encre)}
.tm-v:hover .tm-go{transform:scale(1.08)}
.tm-ph .tm-go{position:absolute;inset:0;margin:auto;width:52px;height:52px;
  background:var(--blanc);padding:0;font-size:0;letter-spacing:0}
.tm-ph .tm-go svg{width:22px;height:22px;fill:var(--encre)}
.tm-yt{color:var(--brique);text-decoration:none;border-bottom:1px solid var(--encre-14)}
.tm-yt:hover{border-color:var(--brique)}
.tm-tag-v{position:absolute;left:0;top:0;font-size:9px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;background:var(--or);color:var(--encre);padding:7px 10px;line-height:1}
.tm-ph{aspect-ratio:16/10;position:relative;background:linear-gradient(150deg,#BFB6A6,#8E8577 60%,#6E6659);
  display:grid;place-items:center}
.tm-ph i{width:54px;height:54px;background:var(--blanc-88);display:grid;place-items:center;font-style:normal}
.tm-ph i::after{content:"";border-left:14px solid var(--encre);border-top:9px solid transparent;
  border-bottom:9px solid transparent;margin-left:4px}
.tm-ph span{position:absolute;left:0;top:0;font-size:9px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;padding:6px 9px;background:var(--voile-f);color:var(--blanc-88)}
.tm-b{padding:15px 16px 18px}
.tm-b b{display:block;font-family:var(--dis);font-size:19px;font-weight:500;line-height:1.25}
.tm-b p{font-size:13.5px;color:var(--encre-62);margin-top:7px;line-height:1.55}
.tm-tag{display:flex;gap:7px;flex-wrap:wrap;margin-top:12px}
.tm-tag span{font-size:10px;font-weight:600;letter-spacing:.11em;text-transform:uppercase;
  padding:5px 8px;background:var(--sable);color:var(--encre-62)}
.tm[hidden]{display:none}
@media(min-width:820px){.tmg{grid-template-columns:repeat(3,1fr)}}

/* ═══ CANDIDATURE ADAPTATIVE ═══ */
/* ═══ LA CANDIDATURE, EN PORTE (24 août 2026) ══════════════════════════
   Le questionnaire n'est plus étalé dans la page : la section est une porte,
   sombre comme les freins et le cadre — le système déjà posé plus haut. On
   laisse entrer d'un geste, le tri se fait à l'entrée : le questionnaire se
   déplie au clic, sur sa feuille claire. */
.cand{background:var(--encre);color:var(--blanc)}
.cand .sec-c h2{color:var(--blanc)}
.cand .sec-c p:not(.lab){color:var(--blanc-72)}
.cand-porte{margin-top:28px;display:flex;align-items:center;justify-content:center;
  gap:16px;flex-wrap:wrap}
/* Le même tremblement bref que le passage vers les chiffres : une secousse
   d'une demi-seconde sur un cycle de cinq. translate, jamais transform. */
.cand-go{animation:hr-tremble 5s ease-in-out infinite;font-size:14px;padding:17px 34px}
.cand-el{font-size:11.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:var(--or-c)}
.cand-corps{margin-top:36px;background:var(--blanc);border-radius:var(--r);
  padding:26px 18px 30px;color:var(--encre);
  opacity:0;translate:0 18px;
  transition:opacity .5s ease,translate .55s cubic-bezier(.22,.9,.3,1)}
.cand-corps.ouvert{opacity:1;translate:0 0}
.cand.ouverte .cand-porte{display:none}
.cand-tri{text-align:center;font-size:var(--t3);font-weight:600;
  letter-spacing:-.015em;margin-bottom:20px}
@media(min-width:760px){.cand-corps{padding:36px 36px 40px}}
@media(prefers-reduced-motion:reduce){.cand-go{animation:none}
  .cand-corps{transition:none}}
.qz{max-width:720px;margin:32px auto 0;background:var(--blanc);border:1px solid var(--encre-14)}
.qz-bar{height:3px;background:var(--pierre);border-radius:var(--r-s)}
.qz-bar i{display:block;height:100%;background:var(--encre);width:0;transition:width .35s ease}
.qz-in{padding:26px 22px 24px}
.qz-n{font-size:10.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--encre-30)}
.qz-q{font-family:var(--dis);font-size:23px;font-weight:500;line-height:1.25;margin-top:14px}
.qz-h{font-size:13px;color:var(--encre-62);margin-top:7px;line-height:1.5}
.qz-f{margin-top:18px;display:grid;gap:12px}
.qz-f label{display:block;font-size:11px;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:var(--encre-62);margin-bottom:6px}
.qz-f input{width:100%;font-family:var(--sans);font-size:15px;padding:13px 14px;
  border:1px solid var(--encre-14);background:var(--creme);color:var(--encre)}
.qz-f input:focus{outline:2px solid var(--or);outline-offset:1px}
.qz-row{display:grid;grid-template-columns:1fr;gap:12px}
@media(min-width:560px){.qz-row{grid-template-columns:1fr 1fr}}
.qz-opt{display:grid;gap:9px;margin-top:16px}
.qz-opt button{font-family:var(--sans);text-align:left;font-size:14.5px;padding:14px 16px;
  border:1px solid var(--encre-14);background:var(--creme);color:var(--encre);cursor:pointer;
  transition:border-color .18s,background .18s;line-height:1.4}
.qz-opt button:hover{border-color:var(--encre-30)}
.qz-opt button[aria-pressed="true"]{border-color:var(--encre);background:var(--encre);color:var(--blanc)}
.qz-opt button em{display:block;font-style:normal;font-size:12px;opacity:.6;margin-top:3px}
.qz-blk{margin-top:22px}
.qz-blk:first-child{margin-top:0}
.qz-nav{display:flex;gap:10px;align-items:center;margin-top:24px;
  padding-top:18px;border-top:1px solid var(--encre-14)}
.qz-nav .btn{flex:1}
.qz-back{font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  background:none;border:0;color:var(--encre-62);cursor:pointer;padding:10px 4px}
.qz-back:hover{color:var(--encre)}
.btn[disabled]{opacity:.32;pointer-events:none}
.qz-legal{margin-top:14px;font-size:11.5px;color:var(--encre-30);line-height:1.55}
.qz-res b.h{display:block;font-family:var(--dis);font-size:27px;font-weight:500;line-height:1.2;margin-top:12px}
.qz-res p.t{font-size:14.5px;color:var(--encre-62);margin-top:12px;line-height:1.6}
.qz-badge{display:inline-block;font-size:10px;font-weight:600;letter-spacing:.15em;text-transform:uppercase;
  padding:6px 10px;background:var(--encre);color:var(--blanc)}
.qz-badge.or{background:var(--or);color:var(--encre)}
.qz-badge.gr{background:var(--sable);color:var(--encre-62)}
.qz-list{margin-top:16px;display:grid;gap:8px}
.qz-list span{font-size:13.5px;color:var(--encre-62);padding-left:16px;position:relative;line-height:1.5}
.qz-list span::before{content:"";position:absolute;left:0;top:9px;width:7px;height:1px;background:var(--brique)}
.qz-dbg{margin-top:18px;padding:14px;background:var(--encre);color:var(--wapp-vert);
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;line-height:1.6;
  white-space:pre-wrap;word-break:break-word}

/* ═══ LETTRE ═══ */
.let{background:var(--encre);color:var(--blanc-72);padding-block:var(--air)}

.let h2{color:var(--blanc)}
.let-in{max-width:620px;margin-inline:auto;text-align:center;padding-block:var(--air)}
.let p{margin-top:14px;font-size:15px;line-height:1.6}
.let-f{display:grid;grid-template-columns:1fr;gap:10px;margin-top:24px}
.let-f input{font-family:var(--sans);font-size:15px;padding:15px 16px;
  border:1px solid rgba(255,255,255,.22);background:var(--blanc-12);color:var(--blanc)}
.let-f input::placeholder{color:var(--blanc-40)}
.let-f input:focus{outline:2px solid var(--or);outline-offset:1px}
@media(min-width:560px){.let-f{grid-template-columns:1fr auto}}
.let-n{margin-top:14px;font-size:11.5px;color:var(--blanc-40);line-height:1.55}
.let-ok{margin-top:18px;font-size:14px;color:var(--or)}

/* ═══ EMPLACEMENT RESERVE ═══ */
.rsv{border:1px dashed var(--pierre-f);padding:26px 22px;margin-top:32px;background:var(--blanc-40)}

.rsv h3{font-family:var(--dis);font-size:22px;font-weight:500;margin-top:10px}
.rsv p{margin-top:10px;font-size:14px;color:var(--encre-62);max-width:66ch;line-height:1.6}

.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ── pied ── */
.ft{background:var(--encre);color:var(--blanc-40);padding-block:var(--air);font-size:12.5px}
.ft-r{margin-top:10px;line-height:1.65;max-width:66ch}
/* Le fouillis du pied, résolu le 24 août 2026 : trois colonnes titrées —
   les risques, ce que nous ne sommes pas, les images — puis la rangée des
   liens sous son filet, avec la marque à droite. */
.ft-g{display:grid;grid-template-columns:1fr;gap:22px;margin-top:4px}
@media(min-width:900px){.ft-g{grid-template-columns:repeat(3,1fr);gap:34px}}
.ft-t{font-size:9.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--brique-c)}
.ft-l{margin-top:30px;padding-top:18px;border-top:1px solid var(--blanc-12);
  display:flex;gap:20px;flex-wrap:wrap;align-items:baseline}
.ft-c{margin-left:auto;color:var(--blanc-40);font-size:11.5px;letter-spacing:.04em}

/* ── dock ── */
.dock{position:fixed;left:0;right:0;bottom:0;z-index:60;background:var(--blanc);
  border-top:1px solid var(--encre-14);padding:10px var(--pad);
  padding-bottom:calc(10px + env(safe-area-inset-bottom));display:flex;gap:12px;align-items:center}
.dock span{flex:1;font-size:12px;color:var(--encre-62);line-height:1.35}
.dock .btn{padding:13px 18px}
@media(min-width:940px){.dock{display:none}body{padding-bottom:0}}

@media(max-height:620px) and (max-width:939px){.ba-hint{display:none}}

/* Fenêtre basse : sans compactage, le bandeau chiffres mange
   toute la hauteur et le titre lui passe dessus. */
@media(max-height:620px){
  .hero h1,.hero .hx{letter-spacing:-.02em;font-size:clamp(1.5rem,4.4vw,2.05rem)}
  .ba-fig{padding-top:26px}
  .ba-fig-v strong{font-size:1.55rem}
  .ba-fig-v em{font-size:10.5px;margin-top:3px}
  .ba-fig-s{margin-top:6px;padding-top:6px}
  .ba-fig-s u{font-size:16px}
  /* La ligne de statut ne se masque JAMAIS : c'est elle qui porte « aucun
     résultat garanti », « résultat constaté » et « en scénario, à valider ».
     Elle était en display:none sous 620 px de haut, c'est-à-dire sur beaucoup
     de portables et sur tout téléphone tenu à l'horizontale. Elle se resserre
     désormais au lieu de disparaître. */
  .ba-fig-d{margin-top:6px;font-size:8.5px;letter-spacing:.08em;line-height:1.35}
  .ba-hint{display:none}
}

@media(prefers-reduced-motion:reduce){
  .strip *{animation:none!important}
  .strip .us,.strip .ud,.strip .up,.strip .hw,.strip .pin{stroke-dashoffset:0!important}
  .strip .uf,.strip .upf,.strip .lm,.strip .pt,.strip .scene,.strip .fl-b,.strip .fl-v{opacity:1!important}
  .strip .fl-w{transform:scaleY(1)!important}
  .strip .ar{opacity:1!important;transform:scaleY(1)!important}
  .strip .sun{opacity:1!important;transform:translate(2130px,88px) scale(1.5)!important;opacity:0!important}
  .strip .sun-d{fill:#C63F2B!important}
  .strip .nuit{opacity:0!important}.strip .refl{opacity:0!important}
  .strip .sk{opacity:1!important;transform:none!important}
  .strip .para{opacity:1!important}.strip .para-t{transform:scaleX(.05)!important}
  *{transition:none!important}
  .rail{scroll-behavior:auto}
}

/* ══════════════════════════════════════════════════════════════════
   PAGES D'ARTICLE. Le contenu long quitte l'accueil sans quitter le
   site. Même identité, mais une seule colonne et un corps de texte
   plus généreux : ici on lit, on ne parcourt pas.
   ══════════════════════════════════════════════════════════════════ */
.art{padding-block:38px 64px;overflow-x:clip}
/* Le rail des signaux sort de la colonne de lecture et de la page : la
   section est un enfant plein de .hold, centré, donc la sortie se calcule
   proprement. overflow-x:clip sur .art empêche la barre horizontale. */
/* Les deux îlots sombres de l'article respirent au rythme de la page :
   la demi-mesure d'air des jonctions de la landing, pas un chiffre
   arbitraire. */
.art-rail{margin-inline:calc(50% - 50vw);margin-block:calc(var(--air)/2)}
/* LES ARTICLES À LA LARGEUR DU SITE (24 août 2026, demandé par Kévin).
   Le cadre de 720 px a sauté : la page d'article respire comme la landing,
   bord à bord, et ses blocs s'alignent sur les mêmes marges que l'accueil.
   Le texte courant garde sa colonne mesurée en ch — c'est la doctrine de la
   largeur Cadot, les textes gardent leurs colonnes, les grilles et les
   rails s'élargissent : au-delà d'environ soixante-quinze caractères par
   ligne, l'œil rate le retour à la ligne et la lecture décroche. Ce qui
   prend la largeur, ce sont les blocs de structure : le bandeau, la
   sortie, les articles liés, le sélecteur. Et les citations débordent la
   colonne de lecture, comme un encadré de magazine. */
.art .hold{max-width:var(--hold)}
/* PLEINE LARGEUR RÉELLE (24 août 2026, demandé deux fois par Kévin — sa
   décision l'emporte sur la mesure Cadot pour les articles). Plus aucun
   plafond : titre, chapô, réponse et corps courent bord à bord comme les
   sections de la landing. Pour que le texte long reste lisible à cette
   largeur, les cartes passent en DEUX COLONNES façon magazine au-delà de
   1100 px — intitulé, titre et citations en pleine traverse, les
   paragraphes coulent dessous. */
.art-fil,.art-h,.art-rep,.art-c{max-width:none}
.art-h h1{max-width:none}
.art-cha{max-width:none}
.art-c>p,.art-c>ul{max-width:none}
/* Les items de liste des cartes : des pastilles blanches sur la surface
   crème — distinctes, et vivantes comme les cartes de la landing (liseré
   affirmé et petite ombre au survol, translate). Le tiret du corps ne
   s'applique pas ici. */
/* Inversé le 25 août 2026 (Kévin, référence FAQ) : carte blanche,
   items à la recette exacte des pastilles blb de la FAQ — surface crème
   42 %, liseré, rayon plein — texte entier, rien ne se plie. */
.art-bl li{background:color-mix(in srgb,var(--creme) 42%,var(--blanc));
  border:1px solid var(--encre-14);
  border-radius:var(--r);padding:14px 18px;margin-top:12px;
  transition:background .2s ease,border-color .2s ease,box-shadow .22s ease,translate .22s ease}
.art-bl li::before,.art-c .art-bl li::before{content:none}
.art-c .art-bl li{padding-left:18px}
.art-bl li:hover{background:var(--blanc);border-color:var(--encre-30);
  box-shadow:0 8px 18px rgba(20,18,16,.08);translate:0 -1px}
@media(min-width:1100px){
  .art-bl{column-count:2;column-gap:clamp(44px,4.5vw,80px)}
  .art-bl .lab,.art-bl h2,.art-bl .art-cit,.art-bl .art-src,.art-bl .art-vid,
  .art-bl .vband,.art-bl .art-vign{column-span:all}
  .art-bl li{break-inside:avoid}
  /* Un PARAGRAPHE ne se coupe pas entre deux colonnes (25 août 2026, vu
     par Kévin : « visuellement le texte n'est pas terrible »). Une phrase
     qui repart en haut de la colonne voisine oblige l'œil à sauter au
     milieu d'une idée. Chaque paragraphe reste d'un seul tenant ; si un
     seul est plus haut que la colonne, le navigateur tranche quand même,
     c'est le repli voulu. */
  .art-bl p:not(.lab){break-inside:avoid}
  .lr-p{max-width:900px}
}
/* LES BLOCS DE L'ARTICLE (24 août 2026) : un sujet, une carte. */
/* La carte vit comme sur la landing (24 août 2026, demandé par Kévin) :
   même recette que les blb — surface crème sur page blanche, liseré — et
   même réponse au survol : blanc, liseré affirmé, ombre, léger soulèvement.
   translate, jamais transform : les entrées en scène s'en servent déjà. */
.art-bl{background:var(--blanc);
  border:1px solid var(--encre-14);border-radius:var(--r);
  padding:clamp(24px,3vw,36px) clamp(20px,3vw,38px) clamp(26px,3.2vw,38px);
  margin-top:18px;
  transition:background .2s ease,border-color .2s ease,
    box-shadow .26s ease,translate .26s cubic-bezier(.22,.9,.3,1)}
/* La carte marquée : liseré rouille permanent, l'annonce des signaux. */
.art-bl-on,.art-bl-on:hover{border-color:var(--brique)}
.art-bl:hover{background:var(--blanc);border-color:var(--encre-30);
  box-shadow:0 14px 30px rgba(20,18,16,.13);translate:0 -2px}
.art-c .art-bl h2{margin-top:9px}
.art-c .art-bl h2+p{margin-top:14px}
.art-bl .art-cit{max-width:none}

@media(min-width:1100px){
  .art-c .art-cit{max-width:92ch}
  /* La sortie et les articles liés prennent toute la page. */
  .art-fin{padding-inline:clamp(30px,6vw,90px)}
  .art-nav-g{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
  .art-nav-g .art-sui{border-bottom:0;border:1px solid var(--encre-14);
    border-radius:var(--r);padding:20px 22px;
    background:color-mix(in srgb,var(--creme) 42%,var(--blanc));
    transition:background .2s ease,border-color .2s ease,box-shadow .26s ease}
  .art-nav-g .art-sui:hover{background:var(--blanc);border-color:var(--encre-30);
    box-shadow:0 14px 30px rgba(20,18,16,.13)}
}
.art-fil{font-size:11px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;
  color:var(--encre-62);display:flex;gap:9px;align-items:center;margin-bottom:30px}
.art-fil a{color:var(--encre-62);text-decoration:none;border-bottom:1px solid var(--encre-14)}
.art-fil a:hover{color:var(--encre);border-color:var(--encre)}

.art-h{border-bottom:1px solid var(--encre-14);padding-bottom:30px;margin-bottom:34px}
/* La rangée d'ouverture : étiquette à gauche, numéro + dates + Lecture
   rapide à droite ; le panneau du résumé s'ancre sur elle. Le numéro en
   rouille, comme tout ordinal. */
.art-top{position:relative;display:flex;align-items:baseline;
  justify-content:space-between;gap:8px 18px;flex-wrap:wrap;margin-bottom:14px}
.art-top .art-dat{margin:0}
.art-no{font-weight:600;color:var(--brique)}
.art-h h1{font-family:var(--dis);font-size:var(--t1);font-weight:300;
  line-height:1.13;letter-spacing:-.01em;margin:12px 0 0}
.art-cha{font-size:clamp(16px,2.1vw,18.5px);line-height:1.62;color:var(--encre-62);margin-top:20px}

/* ═══ LA RÉPONSE DIRECTE ══════════════════════════════════════════════════
   40 à 70 mots, autonome, placée avant le corps. C'est l'unité que les
   moteurs génératifs extraient pour citer : un paragraphe qui répond seul à
   la question du titre. Détachée par un filet plutôt que par un fond, pour
   rester dans la règle du fond blanc. */
.art-rep{margin-top:26px;padding:20px 0 0;border-top:2px solid var(--encre);
  font-size:clamp(16.5px,2.2vw,18px);line-height:1.66;color:var(--encre)}
.art-maj{color:var(--encre-h)}
/* LE BANDEAU D'ARTICLE (24 août 2026, référence brigittelinagroup.com).
   Une bande continue, courte en hauteur, bord à bord sous la barre : les
   images se touchent et glissent lentement vers la gauche, séparées par la
   marque IMMO US sur un aplat d'encre — la respiration entre deux vues.
   Boucle CSS pure (balisage doublé au build), pas de cadre, pas de rayon :
   c'est une bande, pas des cartes. Voile du haut pour que la barre pose
   dessus, fondus latéraux pour que l'entrée et la sortie ne coupent pas. */
.art-frise{position:relative;overflow-x:clip;background:var(--encre);
  height:clamp(180px,26vh,270px)}
.af-piste{display:flex;align-items:stretch;height:100%;width:max-content;
  animation:afDefile 58s linear infinite}
@keyframes afDefile{to{translate:-50% 0}}
.af-c{flex:none;height:100%;aspect-ratio:1600/620;overflow:hidden}
.af-c img{display:block;width:100%;height:100%;object-fit:cover}
/* Le panneau-vidéo : la recette panoramique des fichiers composés, en CSS.
   Deux fois la même vignette : derrière, couvrante, floutée, assombrie ;
   devant, nette, à hauteur pleine, centrée — le titre cuit dans la
   miniature n'est jamais rogné. */
.af-c.af-v{position:relative;display:grid;place-items:center;background:var(--encre)}
.af-c.af-v .af-fond{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:blur(20px) brightness(.55);transform:scale(1.12)}
.af-c.af-v img:not(.af-fond){position:relative;z-index:1;width:auto;height:100%;object-fit:contain}
.af-lg{flex:none;display:grid;place-items:center;
  padding-inline:clamp(30px,4.5vw,66px);background:var(--encre);
  font-family:var(--dis);font-size:12px;font-weight:700;
  letter-spacing:.26em;color:var(--blanc)}
.af-lg i{font-style:normal;color:var(--or)}
/* Le voile du haut assoit la barre ; les bords se fondent dans l'encre. */
.art-frise::before{content:"";position:absolute;inset:0;z-index:1;
  pointer-events:none;background:
    linear-gradient(180deg,rgba(20,18,16,.5) 0%,rgba(20,18,16,.06) 42%,rgba(20,18,16,.22) 100%),
    linear-gradient(90deg,var(--encre) 0%,transparent 7%,transparent 93%,var(--encre) 100%)}
/* La note tenait en blanc translucide sur des photos sombres ; sur une
   frise de DOCUMENTS (panneaux clairs) elle disparaissait, et au téléphone
   elle barrait la vignette (25 août 2026). Elle porte donc son propre fond
   d'encre : lisible sur n'importe quel panneau, à n'importe quelle
   largeur. */
.af-note{position:absolute;z-index:2;right:10px;bottom:8px;max-width:calc(100% - 20px);
  padding:4px 9px;background:color-mix(in srgb,var(--nuit) 74%,transparent);
  font-size:10px;line-height:1.4;
  letter-spacing:.06em;color:var(--blanc);pointer-events:none}
/* Au téléphone, la pastille de note tombait sur le texte de la vignette :
   elle prend toute la largeur, en bas de la bande, et ne croise plus rien. */
@media(max-width:640px){
  .af-note{left:0;right:0;bottom:0;max-width:none;text-align:center;padding:5px 10px}
}
@media(prefers-reduced-motion:reduce){.af-piste{animation:none}}
.art-dat{font-size:11px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;
  color:var(--encre-30);margin-top:22px}

/* Le corps : une mesure courte et un interligne large. C'est ce qui
   distingue une page qu'on lit d'une page qu'on survole. */
/* :not(.lab) : la règle du corps épargnait déjà les intitulés partout
   ailleurs (motif sec-c) ; ici elle les gonflait à 17 px — le
   « RÉCAPITULATIF » géant vu par Kévin le 25 août 2026. */
.art-c p:not(.lab){font-size:clamp(16px,2.1vw,17.5px);line-height:1.78;margin-top:19px}
.art-c h2{font-family:var(--dis);font-size:var(--t3);font-weight:400;
  line-height:1.22;margin-top:46px}
.art-c h2+p{margin-top:15px}
.art-c ul{margin-top:19px;padding-left:0;list-style:none}
.art-c li{position:relative;padding-left:20px;font-size:clamp(15.5px,2vw,17px);
  line-height:1.7;margin-top:11px}
.art-c li::before{content:"";position:absolute;left:2px;top:.72em;width:6px;height:1px;
  background:var(--encre-30)}
.art-cit{margin:26px 0 0;padding:0 0 0 20px;border-left:2px solid var(--or);
  font-family:var(--dis);font-size:clamp(17px,2.4vw,20px);font-style:normal;
  line-height:1.46;color:var(--brique)}

/* La sortie est la porte de la landing, précédée de la preuve d'existence.
   Les deux liens de registre en paire fantôme sur l'encre : cerclés de
   blanc léger, pleins au survol. */
.art-fin{margin-inline:calc(50% - 50vw);margin-block:calc(var(--air)/2) 0}
.art-fin-pr{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;
  margin-top:20px}
.art-fin-pr a{display:inline-block;padding:11px 16px;
  border:1px solid var(--blanc-40);border-radius:var(--r-s);
  color:var(--blanc);text-decoration:none;font-size:13px;font-weight:600;
  transition:border-color .2s ease,background .2s ease}
.art-fin-pr a:hover{border-color:var(--blanc);
  background:var(--blanc-16)}
.art-ill{column-span:all;margin:8px 0 16px}
.art-ill img{display:block;width:100%;height:auto;border:1px solid var(--encre-14)}
.art-leg{margin:8px 0 0;font-size:12px;line-height:1.55;color:var(--encre-62)}
.art-vid{margin:30px auto 0;max-width:880px}
/* LA BANDE DES VIDÉOS, refondue le 25 août 2026 : une fenêtre de
   défilement réelle (le doigt la tire, la molette la pousse), l'avance
   douce est faite en JavaScript par railSansFin — plus de keyframe. Les
   flèches reprennent le dessin de celles des rails, visibles au doigt. */
.vband{position:relative;margin:30px 0 4px;overflow-anchor:none}
/* La bande d'images : tuile de la largeur d'une vidéo, image entière (pas
   de recadrage : un message se lit), bouton loupe. */
/* Même HAUTEUR pour toutes les tuiles, largeur libre : des captures de
   formats différents se lisent comme une pellicule, étiquettes alignées. */
.vb-img .vband-i{width:auto}
.vb-img .vband-i .pr-z{display:block;width:auto;height:auto;cursor:zoom-in;background:var(--encre)}
.vb-img .vband-i .pr-z img{display:block;width:auto;height:min(420px,56vw);max-height:none;max-width:none}
/* Bande basse : des logos, larges et courts, n'ont pas besoin de 420 px. */
.vb-img.vb-bas .vband-i .pr-z img{height:min(160px,26vw)}
.vb-img.vb-bas .vband-i .pr-z{background:none}
/* PAS d'accroche (scroll-snap) sur une bande qui AVANCE SEULE : chaque pas
   programmé d'un pixel était aussitôt ramené au point d'accroche, la bande
   restait figée — vu par Kévin le 25 août 2026 (« les zones de vidéos ne
   défilent pas »). Les bandes de la landing n'en ont jamais eu ; les rails,
   qui ne bougent pas seuls, la gardent. */
.vb-fen{overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;
  overscroll-behavior-x:contain;overflow-anchor:none}
.vb-fen::-webkit-scrollbar{display:none}
/* La main dit qu'on peut tirer ; la main fermée dit qu'on tire. */
.vb-fen,.rt-fen,.prt-fen,.wapp-fen{cursor:grab}
/* Pendant le tirage, l'accroche (scroll-snap) est levée : sinon chaque
   déplacement programmé est aussitôt ramené au point d'accroche le plus
   proche et la souris ne bouge rien (vu au banc, 25 août 2026). Au
   relâchement, l'accroche revient et la fenêtre se cale seule. */
.vb-fen.glisse,.rt-fen.glisse,.prt-fen.glisse,.wapp-fen.glisse{cursor:grabbing;user-select:none;scroll-snap-type:none}
.vb-fen img,.rt-fen img,.prt-fen img,.wapp-fen img{-webkit-user-drag:none}
.vband-t{display:flex;align-items:flex-start;width:max-content}
.vb-fl{position:absolute;top:calc(50% - 18px);transform:translateY(-50%);z-index:3;
  width:44px;height:44px;border:1px solid var(--encre-30);background:var(--blanc);
  color:var(--encre);font-size:22px;line-height:1;cursor:pointer;display:block;
  border-radius:var(--r-s);transition:border-color .25s ease,opacity .25s ease;opacity:.92}
.vb-fl:hover{border-color:var(--encre)}
.vb-prev{left:-14px}.vb-next{right:-14px}
@media(max-width:939px){.vb-fl{width:38px;height:38px;font-size:20px}.vb-prev{left:2px}.vb-next{right:2px}}
.vband-i{display:flex;flex-direction:column;gap:8px;width:min(430px,78vw);margin-right:16px}
.vband-i .tm-v{margin:0}
.vband-l{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--encre-62)}
.vband-n{margin:10px 0 0;font-size:12px;color:var(--encre-62)}
.art-clo{margin-top:26px;font-style:italic}
/* Le CTA de clôture : bouton d'encre (le seul bouton sombre du corps), la
   promesse de délai à sa droite, la même que sur la porte de candidature. */
.art-clo-cta{margin-top:18px;display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px}
.art-clo-d{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--brique)}
/* Le picto « attention » de la clôture (25 août 2026, demandé par Kévin) :
   trait de la maison, rouille, et il BAT comme un cœur — double pulsation
   puis repos, en scale (jamais transform). Le mouvement réduit l'arrête. */
.clo-att{width:19px;height:19px;color:var(--brique);flex:none;
  display:inline-block;vertical-align:-3.5px;margin-right:9px;
  animation:cloBat 1.7s ease-in-out infinite;transform-origin:center}
@keyframes cloBat{0%,56%,100%{scale:1}14%{scale:1.24}28%{scale:1}42%{scale:1.16}}
@media(prefers-reduced-motion:reduce){.clo-att{animation:none}}
/* La vidéo du bloc de preuve, et la porte accolée dessous : deux sections
   sombres bord à bord, la grammaire des sombres de la landing. */
.art-fin-no{margin-top:10px;font-size:12px;color:var(--blanc-62)}
.art-fin-no b{color:var(--blanc-88);font-weight:600;letter-spacing:.05em}
/* Les trois blocs de fin sortent de la colonne ; le témoignage garde les
   couleurs claires de la landing, c'est le même bloc, les deux sombres
   l'encadrent au rythme d'air standard des sections. */
.art-itw{margin-inline:calc(50% - 50vw)}
.art-cta{margin-inline:calc(50% - 50vw)}
/* La ligne de source : petite, assise, séparée d'un filet dans les cartes
   claires, posée sous la réponse dans les cartes sombres du rail. */
.art-hsrc{border-top:0;padding-top:0;margin-top:9px}
.art-src{margin-top:18px;padding-top:10px;border-top:1px solid var(--encre-14);
  font-size:11px;letter-spacing:.03em;color:var(--encre-62)}
.rt-src{margin-top:10px;font-size:10.5px;line-height:1.5;color:var(--blanc-62)}
sup.tx{font-size:.68em;line-height:0}
.art-taux{margin-top:22px;font-size:11.5px;color:var(--encre-62)}

.art-nav{margin-top:52px;border-top:1px solid var(--encre-14);padding-top:26px}
.art-sui{display:block;padding:17px 0;border-bottom:1px solid var(--encre-14);
  text-decoration:none;color:var(--encre)}
.art-sui b{display:block;font-family:var(--dis);font-size:18px;font-weight:500;line-height:1.28}
.art-sui span{display:block;font-size:13.5px;color:var(--encre-62);margin-top:5px}
.art-sui:hover b{color:var(--brique)}

.ft{background:var(--encre);color:var(--blanc-62);padding-block:var(--air);margin-top:0}
.ft-n{font-size:11.5px;line-height:1.7}
.ft-n a{color:var(--blanc-88)}
.art-body .hd-in{height:82px}
@media(min-width:1080px){.art-body .hd-in{height:88px}}

/* Sélecteur d'articles : on passe de l'un à l'autre sans repasser par
   la bibliothèque. Rail défilant sur petit écran, comme les formats. */
.art-sel{display:flex;gap:8px;align-items:center;margin-bottom:30px;overflow-x:auto;scrollbar-width:none;
  padding-bottom:2px}
/* En pastille depuis le 24 août 2026, à la place de la pastille voisine :
   même coffre que les pastilles du sélecteur, texte rouille, chevron. */
.art-fil a{text-decoration:none}
.art-prev:hover{border-color:var(--brique);color:var(--brique)}
.art-sel-nx{margin-left:auto;margin-left:auto;flex:none;display:inline-flex;align-items:center;gap:7px;
  font-size:12.5px;font-weight:600;letter-spacing:.02em;color:var(--brique);
  text-decoration:none;padding:9px 14px;border:1px solid var(--encre-14);
  border-radius:var(--r-s);background:var(--blanc);
  transition:border-color .2s ease,box-shadow .2s ease}
.art-sel-nx:hover{border-color:var(--brique);box-shadow:0 8px 18px rgba(20,18,16,.08)}
.art-sel-nx span{font-size:16px;line-height:1;translate:0 -1px}

/* LA LECTURE RAPIDE : le déclencheur sur la ligne des dates, le panneau
   façon grand menu sous l'entête. Au doigt : feuille du bas sur voile,
   croix visible, refermée par le bouton retour (pilote dans suivi.js). */
/* Trois objets sur la ligne (24 août 2026, proposé et retenu) : les faits
   en pastilles discrètes — le numéro et la date en claire, la durée en
   grise — et l'action en petit bouton sombre. Un seul élément appelle le
   clic : la Lecture rapide. */
.art-dat{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
/* inline-block, pas inline-flex : le flex rognait l'espace en bordure des
   morceaux de texte (« du24 »). Et la pastille des faits parle rouille,
   entière — demande de Kévin du 24 août 2026. */
.art-chip{display:inline-block;padding:6px 11px;
  border:1px solid var(--encre-14);border-radius:var(--r-s);
  background:var(--blanc);color:var(--brique)}
.art-lab-cat a{color:inherit;text-decoration:none}
.art-lab-cat .labp{color:var(--encre-62)}
.art-lab-cat a:hover{text-decoration:underline;text-underline-offset:3px}
.lab-fl{font-size:.8em;opacity:.55}
/* Le panneau des catégories : ancré sous la ligne, feuille pleine largeur
   au doigt, la courante cerclée. */
.art-lab-wrap{position:relative;display:inline-block}
.cat-p{position:absolute;top:calc(100% + 8px);left:0;z-index:40;
  min-width:300px;padding:8px;background:var(--blanc);
  border:1px solid var(--encre-14);border-radius:var(--r);
  box-shadow:0 20px 44px rgba(20,18,16,.16);
  opacity:0;translate:0 -4px;transition:opacity .16s ease,translate .16s ease}
.cat-p.ca{opacity:1;translate:0 0}
.cat-p[hidden]{display:none}
.cat-p nav{display:grid;gap:2px}
.cat-i{padding:9px 12px;border-radius:var(--r-s);font-size:13px;font-weight:600;
  color:var(--encre);text-decoration:none;letter-spacing:0;text-transform:none}
.cat-i:hover{background:color-mix(in srgb,var(--creme) 42%,var(--blanc));color:var(--brique)}
.cat-i.cat-on{border:1px solid var(--brique);color:var(--brique)}
@media(max-width:759px){
  .cat-p{position:fixed;left:12px;right:12px;top:auto;bottom:12px;
    max-height:62vh;overflow:auto;translate:0 10px}
  .cat-p.ca{translate:0 0}}
.art-chip-g{background:color-mix(in srgb,var(--creme) 42%,var(--blanc));
  color:var(--encre-62)}
.lr-b{border:1px solid var(--encre);background:var(--encre);
  color:var(--blanc);padding:6px 12px;border-radius:var(--r-s);
  cursor:pointer;font:inherit;font-weight:600;letter-spacing:inherit;
  text-transform:inherit;
  transition:background .18s ease,border-color .18s ease}
.lr-b:hover,.lr-b[aria-expanded="true"]{background:var(--brique);
  border-color:var(--brique)}
.art-h{position:relative}
.lr-p{position:absolute;left:0;right:0;top:calc(100% + 12px);z-index:8;
  background:var(--blanc);border:1px solid var(--encre-14);
  border-radius:var(--r);box-shadow:0 24px 60px rgba(20,18,16,.16);
  padding:16px 18px 18px;
  opacity:0;translate:0 6px;visibility:hidden;
  transition:opacity .18s ease,translate .22s cubic-bezier(.22,.9,.3,1),
    visibility 0s .2s}
.lr-p.la{opacity:1;translate:0 0;visibility:visible;
  transition:opacity .18s ease,translate .22s cubic-bezier(.22,.9,.3,1)}
.lr-p[hidden]{display:none}
.lr-h{display:none}
/* Renforcé le 24 août 2026 sur demande de Kévin : la réponse porte sa
   barre rouille, et chaque section est une carte du système — surface,
   liseré, intitulé en rouille, blanc et ombre au survol. */
.lr-r{font-size:14.5px;line-height:1.62;margin-bottom:12px;
  border-left:2px solid var(--brique);padding-left:13px}
.lr-l{display:grid;grid-template-columns:1fr 1fr;gap:10px}
/* La carte de section porte son résumé : révélé au survol au pointeur,
   au + / − au doigt. */
.lr-i{position:relative;padding:12px 14px;border-radius:var(--r-s);
  border:1px solid var(--encre-14);
  background:color-mix(in srgb,var(--creme) 42%,var(--blanc));
  transition:background .16s ease,border-color .16s ease,box-shadow .2s ease}
.lr-i:hover,.lr-i:focus-within{background:var(--blanc);
  border-color:var(--encre-30);box-shadow:0 10px 22px rgba(20,18,16,.10)}
.lr-i a{display:block;text-decoration:none;color:var(--encre)}
.lr-res{margin:0;max-height:0;opacity:0;overflow:hidden;
  font-size:11.5px;line-height:1.5;color:var(--encre-62);
  letter-spacing:0;text-transform:none;
  transition:max-height .26s ease,opacity .2s ease,margin .26s ease}
/* Le +/− (corrigé le 25 août 2026, bug vu par Kévin) : le bouton vit
   PARTOUT, et son glyphe est un MIROIR de l'état — « − » dès que le
   résumé est visible, par la classe (clic) comme par le survol. */
.lr-i{padding-right:44px}
.lr-plus{display:grid;place-items:center;position:absolute;top:9px;right:9px;
  width:28px;height:28px;border-radius:var(--r-s);cursor:pointer;
  border:1px solid var(--encre-14);background:var(--blanc);
  font-size:17px;line-height:1;color:var(--encre)}
.lr-plus::before{content:"+"}
.lr-i.ouvert .lr-res{max-height:150px;opacity:1;margin-top:7px}
.lr-i.ouvert .lr-plus::before{content:"−"}
.lr-i.ouvert .lr-plus{border-color:var(--brique);color:var(--brique)}
@media(hover:hover){
  .lr-i:hover .lr-res{max-height:120px;opacity:1;margin-top:7px}
  .lr-i:hover .lr-plus::before{content:"−"}}
.lr-l b{display:block;font-family:var(--dis);font-size:13.5px;font-weight:600;
  letter-spacing:0;text-transform:none;color:var(--brique)}
.lr-l span{display:block;margin-top:2px;font-size:11.5px;letter-spacing:0;
  text-transform:none;color:var(--encre-62);line-height:1.4}
/* La rangée de qualification du panneau : la preuve d'existence en
   fantôme, le questionnaire en plein — les deux gestes, sans quitter le
   résumé. */
.lr-c{display:flex;gap:10px;flex-wrap:wrap;align-items:center;
  margin-top:12px;padding-top:13px;border-top:1px solid var(--encre-14)}
.lr-c a{display:inline-block;padding:9px 14px;border-radius:var(--r-s);
  font-size:12.5px;font-weight:600;text-decoration:none;
  transition:background .18s ease,border-color .18s ease}
.lr-c1{background:var(--encre);border:1px solid var(--encre);color:var(--blanc)}
/* LA QUESTION DU BUDGET (25 août 2026, Kévin : « toutes les lectures rapides,
   sans exception, au niveau de leur CTA : avez-vous un budget
   d'investissement ? 40 à 50 k, 130 à 150 k, 400 k et plus »). Trois
   portes vers le questionnaire, le palier pré-rempli, la promesse dessous.
   Le 400 k est marqué en brique : c'est lui qu'on veut en priorité. */
.lr-bud{display:block}
.lr-q{margin:0 0 10px;font-size:13px;font-weight:600;color:var(--encre)}
.lr-b3{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:12px}
.lr-c .lr-b3 a{display:flex;flex-direction:column;gap:3px;padding:11px 12px;text-align:center;line-height:1.2}
.lr-b3 small{font-size:10px;font-weight:500;letter-spacing:.04em;opacity:.78;text-transform:none}
.lr-b3 .lr-haut{background:var(--brique);border-color:var(--brique)}
.lr-b3 .lr-haut:hover{background:var(--encre);border-color:var(--encre)}
@media(max-width:560px){.lr-b3{grid-template-columns:1fr}}
.lr-c1:hover{background:var(--brique);border-color:var(--brique)}
.lr-c2{border:1px solid var(--encre-14);color:var(--encre)}
.lr-c2:hover{border-color:var(--brique);color:var(--brique)}
.lr-v[hidden]{display:none}
/* Le bouton remonter : pastille sombre en bas à droite, cerclée, discret
   tant qu'on n'a pas défilé. */
.haut{position:fixed;right:clamp(14px,2.4vw,26px);bottom:clamp(14px,2.4vw,26px);
  z-index:60;width:46px;height:46px;border-radius:var(--r-s);
  display:grid;place-items:center;cursor:pointer;
  background:var(--encre);color:var(--blanc);border:1px solid var(--encre);
  box-shadow:0 12px 26px rgba(20,18,16,.22);
  transition:background .2s ease,border-color .2s ease,scale .12s ease}
.haut svg{width:20px;height:20px}
.haut:hover{background:var(--brique);border-color:var(--brique)}
.haut:active{scale:.94}
.haut[hidden]{display:none}
/* Le partage : la puce fantôme de la rangée, qui confirme en rouille. */
.pgr{border:1px solid var(--encre-14);background:var(--blanc);color:var(--encre-62);
  padding:6px 12px;border-radius:var(--r-s);cursor:pointer;
  font:inherit;font-weight:600;letter-spacing:inherit;text-transform:inherit;
  transition:border-color .2s ease,color .2s ease}
.pgr:hover{border-color:var(--brique);color:var(--brique)}
/* Le cœur : puce carrée de la rangée ; plein brique en favori, avec un
   battement bref à l'ajout. */
.fav{display:inline-grid;place-items:center;width:32px;height:29px;
  border:1px solid var(--encre-14);background:var(--blanc);color:var(--encre-62);
  border-radius:var(--r-s);cursor:pointer;
  transition:border-color .2s ease,color .2s ease}
.fav svg{width:16px;height:16px}
.fav:hover{border-color:var(--brique);color:var(--brique)}
.fav[aria-pressed="true"]{border-color:var(--brique);color:var(--brique)}
.fav[aria-pressed="true"] svg{fill:var(--brique)}
.fav.bat svg{animation:favBat .5s ease}
@keyframes favBat{0%,100%{scale:1}30%{scale:1.35}60%{scale:.94}}
@media(prefers-reduced-motion:reduce){.fav.bat svg{animation:none}}
/* Le panneau de partage : petite feuille ancrée sous la rangée. */
.pgo{position:absolute;top:calc(100% + 8px);right:0;z-index:30;
  display:flex;flex-direction:column;min-width:190px;padding:7px;
  background:var(--blanc);border:1px solid var(--encre-14);border-radius:var(--r);
  box-shadow:0 18px 40px rgba(20,18,16,.16)}
.pgo[hidden]{display:none}
.pgo a,.pgo-c{padding:9px 12px;border-radius:var(--r-s);text-align:left;
  font-size:13px;font-weight:600;color:var(--encre);text-decoration:none;
  background:none;border:0;cursor:pointer;font-family:inherit}
.pgo a:hover,.pgo-c:hover{background:color-mix(in srgb,var(--creme) 42%,var(--blanc));color:var(--brique)}
.art-dat{position:relative}
.pgr.ok{border-color:var(--brique);color:var(--brique)}
.lr-v{display:none}
@media(max-width:759px){
  .lr-p{position:fixed;inset:auto 0 0 0;top:auto;z-index:72;
    max-height:84svh;overflow:auto;border-radius:var(--r);
    translate:0 16px;padding:14px 16px calc(16px + env(safe-area-inset-bottom))}
  .lr-p.la{translate:0 0}
  .lr-l{grid-template-columns:1fr}
  .lr-h{display:flex;justify-content:space-between;align-items:center;
    margin-bottom:10px}
  .lr-h b{font-family:var(--dis);font-size:15px;font-weight:600;
    letter-spacing:0;text-transform:none}
  .lr-x{border:0;background:none;cursor:pointer;padding:4px 8px;
    font-size:22px;line-height:1;color:var(--encre-62)}
  .lr-v{display:block;position:fixed;inset:0;z-index:71;
    background:var(--voile);opacity:0;transition:opacity .2s ease}
  .lr-v.la{opacity:1}
}
.art-sel::-webkit-scrollbar{display:none}
.art-sel-i{flex:none;padding:8px 14px;border:1px solid var(--encre-14);
  font-size:11.5px;font-weight:600;letter-spacing:.06em;white-space:nowrap;
  color:var(--encre-62);text-decoration:none;
  transition:border-color .2s ease,color .2s ease}
.art-sel-i:hover{border-color:var(--encre-62);color:var(--encre)}
.art-sel-on{border-color:var(--or);color:var(--encre);background:var(--blanc);cursor:default}

/* La bibliothèque : un titre, un chapô, un lien. Rien d'autre. */
.bib .art-h{margin-bottom:12px}
.bib-l-w{margin-top:10px}
/* La rangée des thèmes en tête de bibliothèque : les mêmes pastilles que
   le grand panneau, un seul vocabulaire. */
.bib-tht{margin:26px 0 10px;font-size:9.5px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--brique)}
.bib-th{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-bottom:34px}
@media(min-width:700px){.bib-th{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1100px){.bib-th{grid-template-columns:repeat(4,1fr)}}
/* LE HUB DES ARTICLES (25 août 2026) : zones espacées, en-têtes du
   système, cartes existantes réemployées, thèmes en grille de pastilles. */
.bib-z{margin-top:calc(var(--air)*.55)}
.bib-z:first-of-type{margin-top:0}
.bib-2{grid-template-columns:repeat(2,1fr)}
@media(max-width:900px){.bib-2{grid-template-columns:1fr}}
.bib-tag{display:inline-block;margin-bottom:8px;padding:4px 9px;
  border-radius:var(--r-s);background:var(--brique);color:var(--blanc);
  font-size:10px;font-weight:600;letter-spacing:.14em;text-transform:uppercase}
.hub-th{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:22px}
@media(max-width:900px){.hub-th{grid-template-columns:1fr}}
.hub-c{display:block;padding:16px 18px;border:1px solid var(--encre-14);
  border-radius:var(--r);background:var(--blanc);text-decoration:none;color:var(--encre);
  transition:border-color .2s ease,box-shadow .22s ease,translate .22s ease}
.hub-c:hover{border-color:var(--encre-30);box-shadow:0 12px 26px rgba(20,18,16,.10);translate:0 -2px}
.hub-c b{display:block;font-family:var(--dis);font-size:16px;font-weight:600}
.hub-c span{display:block;margin-top:4px;font-size:12.5px;line-height:1.5;color:var(--encre-62)}
.bib-m{font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:var(--encre-h);margin-bottom:8px}   /* 4,5:1 : la date passait à 1,9 (mesuré le 26 août 2026) */
.bib-m time{color:var(--encre-h)}   /* la règle générale des dates l'éclaircissait à 0,3 */
.bib-m b{color:var(--brique)}
/* La lettre : un champ, un bouton, la note honnête dessous. */
.lettre{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:22px}
.lettre input{flex:1 1 240px;max-width:340px;padding:13px 15px;
  border:1px solid var(--encre-14);border-radius:var(--r-s);
  font:inherit;color:var(--encre);background:var(--blanc)}
.lettre input:focus{outline:2px solid var(--brique);outline-offset:1px;border-color:var(--brique)}
.lettre-n{margin-top:12px}
/* LA BIBLIOTHÈQUE ET LES HUBS, en visuel (25 août 2026) : chaque entrée
   porte le premier panneau de frise de son article (ou sa vignette de
   vidéo), à gauche, au ratio des frises ; les cartes vedettes aussi. */
/* Un titre de section respire avant son bloc : 26 px, l'écart de la
   landing. Mesuré le 25 août 2026 : 0 px dans la bibliothèque, 16 à 38
   sur l'accueil — le problème était propre à cette page. */
/* Un titre de section respire AVANT comme après (26 août 2026, Kévin :
   « vérifie les écarts dans les bibliothèques ») : 26 px sous le titre,
   et une vraie respiration au-dessus, qui sépare deux sections. Portée
   aux seules pages en gabarit v2 : la landing garde son rythme. */
.bib-z{margin-bottom:26px}
.art-v2 .bib-z,.art-v2 .sec-c{margin-top:clamp(48px,6vw,84px)}
.art-v2 .pg-cha+.bib-z,.art-v2 .pg-cha+.sec-c,.art-v2 .art-h+.bib-z,.art-v2 .art-h+.sec-c{margin-top:clamp(36px,4vw,56px)}
.art-v2 .bib-fil{margin-top:8px}
/* Le ruban de tête ne colle pas au premier bloc de la page. */
.art-v2 .pg > .hold:first-of-type,.art-v2 .bib > .hold:first-of-type{padding-top:clamp(26px,3vw,44px)}
/* Le ruban dessiné déborde de neuf pixels au téléphone sur les pages qui ne
   clipent pas (mesuré le 26 août 2026) : clip, jamais hidden, la règle de la
   maison. */
.art-v2 main{overflow-x:clip}
.art-v2 .op-c:first-of-type{border-top:0;padding-top:0}
.bib-i{padding-block:32px;border-bottom:1px solid var(--encre-14);display:grid;grid-template-columns:1fr;gap:16px 28px;align-items:start}
@media(min-width:760px){.bib-i{grid-template-columns:320px 1fr}}
.bib-iv{display:block;overflow:hidden;background:var(--encre)}
.bib-iv img{display:block;width:100%;height:auto;aspect-ratio:1600/620;object-fit:cover}   /* height:auto : l'attribut height posé au build ne doit pas figer 620 px */
.bib-v{display:grid;grid-template-rows:auto 1fr;text-decoration:none;color:var(--encre);border:1px solid var(--encre-14);background:var(--blanc);
  transition:border-color .2s ease,translate .2s ease}
.bib-v:hover{border-color:var(--brique);translate:0 -2px}
.bib-vi{display:block;background:var(--encre);overflow:hidden}
.bib-vi img{display:block;width:100%;height:auto;aspect-ratio:1600/620;object-fit:cover}
.bib-vide{aspect-ratio:1600/620}
.bib-vt{display:block;padding:14px 16px 18px}
.bib-vm{display:block;font-size:10.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--brique);margin-bottom:6px}
.bib-v b{display:block;font-family:var(--dis);font-size:19px;font-weight:500;line-height:1.2;margin-bottom:6px}
.bib-vd{display:block;font-size:13px;line-height:1.5;color:var(--encre-62)}
.bib-v .bib-tag{margin-bottom:8px}
.bib-i h2{font-family:var(--dis);font-size:var(--t3);font-weight:400;
  line-height:1.2;margin-top:10px}
.bib-i h2 a{color:var(--encre);text-decoration:none}
.bib-i h2 a:hover{color:var(--brique)}
.bib-c{font-size:15.5px;line-height:1.68;color:var(--encre-62);margin-top:13px;max-width:62ch}
.bib-m{font-size:11px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;
  color:var(--encre-30);margin-top:15px}
.bib-l{display:inline-block;margin-top:17px;padding:10px 24px;border:1px solid var(--encre);
  font-size:11.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--encre);text-decoration:none;
  transition:background .2s ease,color .2s ease}
.bib-l:hover{background:var(--encre);color:var(--creme)}

/* ═══ LES SILOS ════════════════════════════════════════════════════════
   Seize thèmes, une carte chacun, dans l'idiome des autres cartes du
   site : fond --carte, filet 1 px, rayon en jeton, rien d'inventé.

   Le compteur est en --encre-30, jamais en or : l'or ne désigne que
   l'actif. Le décollement au survol passe par translate, jamais par
   transform, la transition d'entrée occupant déjà transform. */
.sil-g{display:grid;grid-template-columns:repeat(auto-fit,minmax(238px,1fr));
  gap:12px;margin-top:8px}
.sil-c{display:block;padding:19px 20px 20px;background:var(--carte);
  border:1px solid var(--encre-14);text-decoration:none;color:var(--encre);
  transition:border-color .22s ease,background .22s ease}
.sil-t{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.sil-t b{font-size:15.5px;font-weight:600;line-height:1.24}
.sil-n{flex:none;font-size:11px;font-weight:600;letter-spacing:.13em;
  color:var(--encre-30)}
.sil-c p:not(.lab){font-size:13px;line-height:1.56;color:var(--encre-62);margin-top:9px}
.sil-c:hover{border-color:var(--encre-30);background:var(--blanc)}
.sil-c:hover .sil-t b{color:var(--brique)}
@media(hover:hover) and (min-width:900px){
  .sil-c{transition:border-color .22s ease,background .22s ease,translate .22s ease}
  .sil-c:hover{translate:0 -6px}
}
@media(prefers-reduced-motion:reduce){.sil-c:hover{translate:none}}

/* ═══ CARREFOUR ═══════════════════════════════════════════════════════
   Six entrées, une idée par carte : un chiffre et son statut, un titre,
   deux phrases, un lien. Le trait sous le chiffre est le seul mouvement :
   il s'allonge et passe à l'or au survol, l'or ne servant qu'à marquer
   ce qui est actif. */
.crf-w{padding-block:var(--air)}
/* La phrase de section est courte et porte seule : plus grande que les autres
   titres de la page, et beaucoup d'air autour. */
.crf-h h2{line-height:1.06}
.crf-h p{margin-top:var(--e2);font-size:var(--st);line-height:1.6}
.crf{display:grid;grid-template-columns:1fr;gap:1px;background:var(--encre-14);
  border:1px solid var(--encre-14);margin-top:42px}
.crf-c{display:flex;flex-direction:column;background:var(--blanc);padding:26px 24px 22px;
  text-decoration:none;color:inherit;transition:background .18s}
.crf-c:hover,.crf-c:focus-visible{background:var(--creme)}
.crf-n{display:block;font-family:var(--dis);font-weight:300;line-height:1;
  font-size:clamp(2rem,5.4vw,2.5rem);letter-spacing:-.01em}
.crf-s{display:block;margin-top:11px;font-size:9.5px;font-weight:600;letter-spacing:.13em;
  text-transform:uppercase;color:var(--encre-62);line-height:1.55}
.crf-r{display:block;width:34px;height:2px;margin-top:16px;background:var(--encre-14);
  transition:width .24s,background .24s}
.crf-c:hover .crf-r,.crf-c:focus-visible .crf-r{width:100%;background:var(--or)}
.crf-c h3{margin-top:16px;font-family:var(--dis);font-size:20px;font-weight:500;line-height:1.24}
.crf-p{display:block;margin-top:10px;margin-bottom:18px;font-size:14px;line-height:1.65;
  color:var(--encre-62)}

/* ── Les pastilles ────────────────────────────────────────────────────
   Ce que la page d'arrivée contient, en quatre ou cinq mots. Elles montent
   par le bas quand la carte entre dans l'écran, au doigt comme à la souris,
   et repartent d'en bas au survol. Le mouvement ne déplace rien : seules
   l'opacité et la translation bougent, la place est tenue au repos. */
.crf-pa{display:flex;flex-wrap:wrap;gap:6px;margin-top:auto}
.crf-pa i{display:block;font-style:normal;font-size:10px;font-weight:600;
  letter-spacing:.09em;text-transform:uppercase;white-space:nowrap;
  padding:6px 9px;border:1px solid var(--encre-14);color:var(--encre-62);
  transition:border-color .25s ease,color .25s ease}
.crf-c:hover .crf-pa i,.crf-c:focus-visible .crf-pa i{border-color:var(--encre-30);color:var(--encre-72)}
/* Le lien est poussé en bas : d'une carte à l'autre les textes n'ont pas la
   même longueur, mais les six liens restent sur la même ligne. */
.crf-l{display:block;margin-top:16px;padding-top:13px;border-top:1px solid var(--encre-14);
  font-size:11px;font-weight:600;letter-spacing:.13em;text-transform:uppercase}
.crf-l::after{content:"\00a0→";display:inline-block;transition:transform .25s ease}
.crf-c:hover .crf-l::after,.crf-c:focus-visible .crf-l::after{transform:translateX(4px)}
.crf-c:hover .crf-l,.crf-c:focus-visible .crf-l{color:var(--brique)}
.crf-n2{margin-top:22px;font-size:12.5px;line-height:1.6;color:var(--encre-62);max-width:78ch}
/* Dès qu'il y a plusieurs colonnes, le statut et le titre tiennent une
   hauteur fixe : sinon un statut sur deux lignes décale tout le reste de
   la carte par rapport à sa voisine. */
@media(min-width:760px){.crf{grid-template-columns:1fr 1fr}
  .crf-s{min-height:3.1em}.crf-c h3{min-height:2.48em}}
@media(min-width:1080px){.crf{grid-template-columns:repeat(3,1fr)}
  .crf-c{padding:30px 26px 24px}.crf-c h3{font-size:21px}}

/* La classe ent-a n'est posée par app.js que si l'animation est possible.
   Sans script, ou en mouvement réduit, tout est déjà en place et visible :
   une carte cachée par une animation qui ne se déclenche jamais est une
   carte perdue. */
/* Règle unique pour les trois groupes animés : cartes du hero, vignettes,
   six entrées. Elles arrivent par le bas, décalées d'une colonne à l'autre. */
/* transition:none tant que l'élément n'est pas arrivé. Sans ça, poser l'état
   de départ déclenche lui-même une transition : l'élément part de son état
   normal, s'efface en une demi-seconde, puis revient. On voit un clignotement
   au lieu d'une entrée. La transition n'existe qu'à partir de .vue. */
.ent-a .ent:not(.vue){opacity:0;transform:translateY(18px);transition:none}
/* Les cartes des cinq étapes arrivent latéralement, en alternance : la
   première de la gauche, la deuxième de la droite, et ainsi de suite —
   même alternance sur téléphone, où elles sont empilées. La classe de
   direction vit dans le balisage ; elle n'a d'effet que sous .ent-a, donc
   seulement quand l'animation peut réellement se jouer. */
.ent-a .ent.lat-g:not(.vue){transform:translateX(-30px)}
.ent-a .ent.lat-d:not(.vue){transform:translateX(30px)}
/* Sortir de terre : l'élément est plein et net, simplement rogné depuis le
   haut ; la révélation le fait pousser vers le haut, depuis la ligne de sol
   que la rangée partage (align-items:flex-end). Le libellé, posé dans la
   barre, sort de terre avec elle. */
.ent-a .exp-c{transition:opacity .3s ease var(--d,0ms),
  transform .4s cubic-bezier(.2,.86,.3,1.04) var(--d,0ms),
  border-color .25s ease,background .22s ease,box-shadow .28s ease}
.ent-a .ent.terre:not(.vue){opacity:1;transform:none;clip-path:inset(100% 0 0 0)}
.ent-a .ent.terre.vue{clip-path:inset(0 0 0 0)}
.ent-a .cad-courbe a{transition:clip-path .6s cubic-bezier(.22,.9,.3,1) var(--d,0ms)}
.ent-a .ent.vue{opacity:1;transform:none}
.ent-a .st{transition:opacity .55s ease var(--d,0ms),
  transform .6s cubic-bezier(.22,.9,.3,1) var(--d,0ms)}
.ent-a .crf-c{transition:opacity .55s ease var(--d,0ms),
  transform .55s cubic-bezier(.22,.9,.3,1) var(--d,0ms),background .18s ease}
.ent-a .fmt2-c{transition:opacity .55s ease var(--d,0ms),
  transform .55s cubic-bezier(.22,.9,.3,1) var(--d,0ms),
  border-color .22s ease,background .22s ease}
.ent-a .crf-pa i{opacity:0;transform:translateY(14px)}
.ent-a .crf-c.vue .crf-pa i{opacity:1;transform:none;
  transition:opacity .42s ease,transform .42s cubic-bezier(.22,.9,.3,1),
             border-color .25s ease,color .25s ease}
/* Le décalage d'une pastille à l'autre : elles montent l'une après l'autre,
   pas toutes ensemble. Le retard part du retard de la carte. */
.ent-a .crf-c.vue .crf-pa i:nth-child(1){transition-delay:calc(var(--d,0ms) + 180ms)}
.ent-a .crf-c.vue .crf-pa i:nth-child(2){transition-delay:calc(var(--d,0ms) + 245ms)}
.ent-a .crf-c.vue .crf-pa i:nth-child(3){transition-delay:calc(var(--d,0ms) + 310ms)}
.ent-a .crf-c.vue .crf-pa i:nth-child(4){transition-delay:calc(var(--d,0ms) + 375ms)}
.ent-a .crf-c.vue .crf-pa i:nth-child(5){transition-delay:calc(var(--d,0ms) + 440ms)}
/* Au survol, les pastilles repartent d'en bas : le geste est rejoué. */
@media(hover:hover){
  .ent-a .crf-c.vue:hover .crf-pa i{animation:remonte .42s cubic-bezier(.22,.9,.3,1) both}
  .ent-a .crf-c.vue:hover .crf-pa i:nth-child(2){animation-delay:.05s}
  .ent-a .crf-c.vue:hover .crf-pa i:nth-child(3){animation-delay:.1s}
  .ent-a .crf-c.vue:hover .crf-pa i:nth-child(4){animation-delay:.15s}
  .ent-a .crf-c.vue:hover .crf-pa i:nth-child(5){animation-delay:.2s}
}
@keyframes remonte{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

@media(min-width:760px){.crf-pa{min-height:58px;align-content:flex-end}}
@media(prefers-reduced-motion:reduce){
  .crf-c,.crf-r,.crf-pa i,.crf-l::after{transition:none;animation:none}
}

/* ═══ REGISTRES PUBLICS ═══════════════════════════════════════════════
   Les identifiants au verbatim, avec le lien vers le registre. Placé
   juste après le cadre juridique : on affirme, puis on donne de quoi
   vérifier. */
.reg{background:var(--blanc);border-bottom:1px solid var(--encre-14);padding-block:var(--air)}
/* Le sur-titre suit la doctrine des intitulés : rouille, jamais gris. */
.reg-t{text-align:center;font-size:11px;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:var(--brique);margin-bottom:22px}
/* Grille à filet partagé : le rayon vit sur le conteneur, jamais sur les
   cellules — arrondir les cellules faisait apparaître le filet dans les
   angles, exactement le défaut que la règle documente. */
.reg-g{display:grid;grid-template-columns:1fr;gap:1px;background:var(--encre-14);
  border:1px solid var(--encre-14);border-radius:var(--r);overflow:hidden}
/* La surface suit la recette des cartes claires du site (les cinq étapes) :
   le sable plein était le seul aplat hors système de la page. */
.reg-c{background:color-mix(in srgb,var(--creme) 42%,var(--blanc));padding:18px 20px}
.reg-c em{display:block;font-style:normal;font-size:9.5px;font-weight:600;letter-spacing:.13em;
  text-transform:uppercase;color:var(--brique)}
/* La voix de la carte du cadre (Détention) : intitulé en rouille, nom en
   encre pleine, et la ligne d'action en rouille soulignée d'or — le même
   esprit, décidé le 24 août 2026. L'or ne colore pas le texte : il souligne. */
.reg-c b{display:block;margin-top:9px;font-family:var(--dis);
  font-size:clamp(1.1rem,1.5vw,1.3rem);font-weight:600;line-height:1.3;
  letter-spacing:-.015em;color:var(--encre)}
.reg-c a,.reg-c span{display:block;margin-top:12px;font-size:13px;line-height:1.6}
.reg-c span{color:var(--encre-62)}
.reg-c a{width:fit-content;color:var(--brique);font-weight:600;
  border-bottom:1px solid var(--or);padding-bottom:2px;
  transition:border-color .2s ease}
.reg-c a:hover{border-color:var(--brique)}
@media(min-width:820px){.reg-g{grid-template-columns:repeat(3,1fr)}.reg-c{padding:22px 24px}}

/* ═══ PAGES DU SITE ═══════════════════════════════════════════════════
   Méthode, équipe, FAQ : le titre est porté par l'en-tête de page, les
   sections reprises de la landing arrivent sans leur propre titre. */
.pg{padding-bottom:24px}
.pg-h{padding-block:36px 4px}
.pg-h h1{margin-top:12px;font-family:var(--dis);font-weight:300;line-height:1.08;
  font-size:var(--t1);max-width:24ch}
.pg-cha{margin-top:18px;font-size:clamp(16px,2.1vw,18.5px);line-height:1.62;
  color:var(--encre-62);max-width:64ch}
.pg .sec{padding-block:34px 46px}
.pg .art-fin{margin-top:44px}
.pg-nav{margin-top:52px;border-top:1px solid var(--encre-14);padding-top:24px}

/* ═══ GRAISSES DE TITRE EN SANS ══════════════════════════════════════
   Le serif tenait ses grands titres en 300 : dans un sans, la même valeur
   les rend indécis. Les titres passent en 600, les ordinaux et les grandes
   lettres décoratives en 500, les citations restent en 400. La hiérarchie
   est portée par le corps, pas par la graisse. */
h1,h2,h3{font-weight:600}
.num{font-weight:500}
.qr-i summary{font-weight:600}

.lg-t{font-weight:600}
.hd-m a b{font-weight:600}
.hero-lab b{font-weight:600}
.ov b{font-weight:600}
.fr-n{font-weight:600}
.fr figcaption b{font-weight:600}
.it h3{font-weight:600}
.duo figcaption b{font-weight:600}
.g4 span{font-weight:600}
.film-t{font-weight:600}
.acc summary{font-weight:600}
.rc h3{font-weight:600}
.ba-fig-v strong{font-weight:600}
.ba-fig-s u{font-weight:600}
.det-l dt{font-weight:600}
.qz-t{font-weight:600}
.ress-c h3{font-weight:600}
.shop-cv b{font-weight:600}
.shop-t{font-weight:600}
.shop-p{font-weight:600}
.shop-art h3{font-weight:600}
.soc b{font-weight:600}
.st .num{font-weight:500}
.st h3{font-weight:600}
.eq figcaption b{font-weight:600}
.eqt b{font-weight:600}
.exp-c b{font-weight:600}
.dos-h h4{font-weight:600}
.dos-r b{font-weight:600}
.dos-t dd{font-weight:600}
.pal-l b{font-weight:600}
.pal-l u{font-weight:600}
.mar-c header b{font-weight:600}
.mar-c h3{font-weight:600}
.serv-g b{font-weight:600}
.res3-c b{font-weight:600}
.res3-c i{font-weight:600}
.res3-c u{font-weight:600}

.rt-n{font-weight:500}
.rt-c h3{font-weight:600}

.fm-som a s{font-weight:600}
.lb-c b{font-weight:600}
.chif thead i{font-weight:600}
.chif td{font-weight:600}
.fmt-t i{font-weight:600}
.g6 span{font-weight:600}
.agr b{font-weight:600}
.cpt b{font-weight:600}
.tm-b b{font-weight:600}
.qz-q{font-weight:600}
.qz-res b.h{font-weight:600}
.rsv h3{font-weight:600}
.art-h h1{font-weight:600}
.art-c h2{font-weight:600}
.art-fin-t{font-weight:600}
.art-sui b{font-weight:600}
.bib-i h2{font-weight:600}
.crf-n{font-weight:600}
.crf-c h3{font-weight:600}
.reg-c b{font-weight:600}
.pg-h h1{font-weight:600}
/* Aux grandes tailles, un sans a besoin d'un interlettrage plus serré. */
/* Les titres de PAGE et de HERO, qui obéissent à --t1 et non à --t2 : ils ne
   relèvent pas du système des titres de bloc, mais partagent son interlettre. */
.art-h h1,.pg-h h1,.hero h1{letter-spacing:-.022em}

/* ═══ HERO : LE RÉSEAU, ET DE QUOI LE VÉRIFIER ════════════════════════
   À gauche la phrase, à droite cinq cartes qui s'ouvrent. Les cartes
   flottent : un léger décalage vertical d'une carte à l'autre, et une
   respiration lente, comme des objets posés en l'air. Elles restent
   carrées, comme tout le reste du site. */
/* Le hero ouvre la page : son air du haut est réduit de moitié pour que la
   promesse, le bouton et le film tiennent dans le premier écran. */
.hr{background:var(--blanc);padding-block:calc(var(--air) * .5) var(--air)}
.hr-in{display:grid;grid-template-columns:1fr;row-gap:0;column-gap:38px;align-items:start}
/* Trois niveaux, un rôle chacun : ce qu'on est, ce qu'on fait, avec qui.
   Le titre et la vidéo occupent toute la largeur, la phrase et les cartes
   se partagent les deux colonnes dessous. */
.hr-titre{grid-column:1/-1}

/* ═══ LE HERO : TITRE ET FILM, UN SEUL BLOC (v244) ═══════════════════════
   .hr-hero est un conteneur autonome, pas un enfant de .hr-in. Le hero y
   était imbriqué et n'héritait que d'une colonne de la grille parente : ses
   deux enfants s'empilaient quelle que soit la largeur de l'écran.

   Au-dessus de 820 px : titre à gauche, film à droite, centrés l'un sur
   l'autre pour se lire comme un seul bloc. En dessous : empilés, titre puis
   film, même ordre de lecture.

   Le seuil est à 820 et non 900 : l'aperçu s'affiche dans un cadre plus
   étroit que la fenêtre, et la bascule ne se déclenchait pas alors que la
   place était là. Mesurer le cadre, pas l'écran. */
.hr-hero{display:grid;grid-template-columns:1fr;gap:26px;align-items:center;
  margin-bottom:26px}
.hr-film{min-width:0}
/* Le bloc du film est réglé en pleine largeur ailleurs sur le site : width
   100vw et une marge négative qui le sort de son conteneur. Dans la colonne
   du hero, ce réglage le faisait déborder par la gauche et retomber sous le
   texte. Ici on le remet dans sa boîte, sans toucher aux autres emplois. */
.hr-film .cha{width:auto;margin-inline:0;margin-block:0;grid-column:auto}
.hr-film .cha-v{height:auto;aspect-ratio:16/9}
/* La miniature cède avant le texte : c'est elle qui se réduit pour que tout
   entre, jamais la taille des caractères. */
.hr-film{max-width:660px}
.hr-film .cha-t{padding:52px 18px 15px}
.hr-film .cha-t b{font-size:clamp(15px,1.5vw,18px)}

/* ═══ LA MINIATURE ENTIÈRE, SUR UNE BANDE NOIRE ═════════════════════════
   Partout ailleurs le film remplit un cadre plus large que haut et se
   recadre sans perte. Dans la colonne du hero, la hauteur est commandée par
   le texte d'à côté, et le recadrage coupait le titre incrusté du film.

   L'image est donc affichée entière, calée en haut du cadre : tout le vide
   tombe en bas, en une seule bande noire pleine, jamais en deux bandes de
   part et d'autre. Le titre du film s'y pose à plat.

   Le cadre devient une colonne : l'image prend la place disponible, la
   légende occupe le bas. La légende n'est plus en surimpression, elle ne
   peut donc jamais recouvrir l'image, quelle que soit la hauteur du bloc. */
.hr-film .cha-v{display:flex;flex-direction:column;background:var(--nuit)}
.hr-film .cha-im{flex:1 1 auto;min-height:0;height:auto}
.hr-film .cha-im img{object-fit:contain;object-position:50% 0}
/* La vidéo lancée remplit le cadre à la place de l'emballage. */
.hr-film .cha-v iframe{flex:1 1 auto;width:100%;height:100%;min-height:0;border:0}
/* Plus de dégradé : le fond est déjà noir, et un dégradé sur du noir se voit
   comme une salissure. La légende se pose à plat sur la bande. */
.hr-film .cha-t{position:static;background:none;padding:14px 20px 16px;flex:none}
.hr-film .cha-t b{text-shadow:none}



@media(min-width:820px){
  /* Le film à gauche, le texte à droite. Le placement est explicite plutôt
     que laissé au flux : l'ordre du DOM garde le titre en premier, ce qui
     donne le bon empilement sur téléphone et le bon ordre de lecture pour un
     lecteur d'écran, sans dépendre d'un `order` qui se lit mal.

     Le texte reçoit la colonne la plus large : sa taille ne se réduit pas,
     c'est la miniature qui cède. */
  /* Colonnes égales et hauteurs égales : le film et le texte forment un
     rectangle unique. Le film s'étire à la hauteur du texte, c'est donc le
     texte qui commande, et sa taille ne bouge jamais. L'image est déjà en
     object-fit cover : elle se recadre au lieu de se déformer. */
  .hr-hero{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px;
    margin-bottom:26px;align-items:stretch}
  .hr-film{grid-column:1;grid-row:1;max-width:none;height:100%}
  .hr-titre{grid-column:2;grid-row:1;display:flex;flex-direction:column;
    justify-content:center}
  .hr-film .cha{height:100%}
  .hr-film .cha-v{height:100%;aspect-ratio:auto}
}
@media(min-width:1240px){.hr-hero{gap:52px}}

/* Cinq cartes en trois colonnes : la dernière rangée en porte deux, jamais
   une seule orpheline comme en deux colonnes. */
@media(min-width:900px){.blbs{grid-template-columns:repeat(3,1fr)}}

/* Le passage vers le bloc des chiffres. En second rang derrière le bouton
   sombre du hero : deux appels de même poids se neutralisent. */
.hr-suite{margin-bottom:var(--air);text-align:center}

/* Le tremblement du passage vers les chiffres. Bref et espacé : la
   secousse dure une demi-seconde sur un cycle de cinq, le reste du temps
   le bouton est immobile. Un tremblement continu se lit comme un défaut.

   translate et non transform : la règle du site, pour ne pas entrer en
   conflit avec une animation qui occuperait déjà transform. */
@keyframes hr-tremble{
  0%,86%,100%{translate:0 0}
  88%{translate:-3px 0}
  90%{translate:3px 0}
  92%{translate:-2px 0}
  94%{translate:2px 0}
  96%{translate:-1px 0}
}
.hr-suite .btn{animation:hr-tremble 5s ease-in-out infinite}
/* Il s'arrête dès qu'on le vise : viser une cible qui bouge est pénible. */
.hr-suite .btn:hover,.hr-suite .btn:focus-visible{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){.hr-suite .btn{animation:none}}
/* Le bloc des chiffres. Il avait deux chapôs qui faisaient le même travail,
   d'où quarante-quatre pixels de flottement entre eux : il n'en a plus qu'un.
   La ligne qui décrit les cartes est descendue contre les cartes, où elle
   sert, et le sur-titre reprend l'intitulé du menu. */
.hr-titre2{grid-column:1/-1;margin-bottom:var(--e2)}
/* Le titre est écrit par le script : il ne suit donc pas l'apparition groupée
   des autres éléments animés. */
.hr-titre2.ent-a h2{opacity:1;transform:none;transition:none}
.hr-titre2 .lab{margin-bottom:var(--e1)}
/* Mesure élargie : à 26 caractères le titre tenait sur trois lignes et
   repoussait les cartes hors de l'écran quand on arrivait par l'ancre. */
.hr-titre2 h2{}
/* Le libellé des cartes, dans leur colonne : il annonce ce qu'elles portent. */
.blbs-k{grid-column:1/-1;margin:0 0 12px;font-size:9.5px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--encre-62)}
.hr-k{margin-bottom:var(--e1)}
/* v243 : mesure portée de 19 à 26 caractères. À 19, la phrase de 91
   caractères se cassait en cinq lignes courtes et irrégulières. */
.hr-titre h1{font-size:var(--t1);font-weight:600;line-height:1.06;
  letter-spacing:-.025em;max-width:26ch;text-wrap:balance}
.hr-s{margin-top:0;font-size:var(--st);line-height:1.55;color:var(--encre-72);
  max-width:44ch}
/* Le nom d'Enzo est le seul mot appuyé de la phrase : c'est lui qu'on doit
   retenir, pas le verbe. */
.hr-s b{font-weight:600;color:var(--encre)}
.hr-cta{margin-top:var(--e3)}
.hr-n{margin-top:14px;font-size:12.5px;line-height:1.6;color:var(--encre-62);max-width:44ch}

/* Les cartes entrent en glissant de quarante-six pixels sur le côté : sans
   rognage, la carte de droite élargit la page pendant les six dixièmes de
   seconde de son arrivée, et une barre de défilement horizontale apparaît
   sous 900 px. On rogne donc la colonne, ce qui donne en prime l'impression
   que la carte vient de derrière le bord.
   `clip` ne crée pas de conteneur de défilement, contrairement à `hidden` :
   le flottement vertical des cartes continue de dépasser librement. */
/* v250 : les cartes prennent toute la largeur. Le hero occupait la seconde
   colonne de .hr-in ; depuis qu'il en est sorti, elle restait vide et les
   cartes se serraient dans la moitié gauche. */
.blbs{grid-column:1/-1;display:grid;grid-template-columns:1fr;gap:12px;
  margin-top:18px;overflow-x:clip;overflow-clip-margin:18px}
/* Un crème très éclairci : les cartes restent des objets posés sur le blanc
   du hero sans peser. Dérivé du crème de la palette, pas une couleur de plus. */
.blb{background:var(--carte);
  background:color-mix(in srgb,var(--creme) 42%,var(--blanc));
  border:1px solid var(--encre-14);
  /* stretch et non start : à hauteur libre, deux cartes voisines de tailles
     différentes laissaient un décrochement, et la grille se lisait comme un
     escalier. Étirées, elles forment des rangées nettes. */
  align-self:stretch;
  /* Course raccourcie : la carte parcourt 26 px au lieu de 46 et se pose en
     0,30 s au lieu de 0,46. Le dépassement de la courbe est conservé, c'est
     lui qui donne l'impression qu'elle se pose. */
  transition:opacity .24s ease var(--d,0ms),
    transform .30s cubic-bezier(.2,.86,.3,1.04) var(--d,0ms),
    background .22s ease,border-color .22s ease,box-shadow .28s ease}
/* Les cartes arrivent une par une, alternativement de la gauche et de la
   droite. C'est le bloc le plus statique de la page : une simple montée de
   dix-huit pixels ne s'y voyait pas. Le léger dépassement de la courbe donne
   l'impression que la carte se pose plutôt qu'elle ne s'arrête. */
.blbs.ent-a .blb:not(.vue){opacity:0;transform:translateX(var(--dx,-46px))}
.blbs .blb:nth-child(odd){--dx:-26px}
.blbs .blb:nth-child(even){--dx:26px}
.blb summary{list-style:none;cursor:pointer;display:block;padding:18px 20px 17px;position:relative;
  -webkit-tap-highlight-color:transparent}
.blb summary::-webkit-details-marker{display:none}
.blb summary b{display:block;font-size:clamp(1.5rem,4.6vw,1.95rem);font-weight:600;line-height:1;
  letter-spacing:-.02em}
.blb summary i{display:block;margin-top:8px;min-height:2.4em;font-style:normal;font-size:9.5px;
  font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--encre-h);   /* 4,5:1 sur le crème (mesuré le 26 août 2026) */
  line-height:1.4;padding-right:28px}
/* La croix qui devient un moins : le seul repère d'ouverture. */
.blb-p{position:absolute;right:18px;bottom:19px;width:13px;height:13px}
.blb-p::before,.blb-p::after{content:"";position:absolute;left:0;top:6px;width:13px;height:1.5px;
  background:var(--encre);transition:transform .25s ease}
.blb-p::after{transform:rotate(90deg)}
.blb[open] .blb-p::after{transform:rotate(0)}
.blb[open]{background:var(--blanc);border-color:var(--encre-30)}
/* Au survol la carte se détache du fond. Le relief passe par l'ombre et non
   par une translation : le flottement occupe déjà la propriété transform, et
   une animation l'emporte toujours sur une déclaration simple. */
.blb:hover,.blb:focus-within{background:var(--blanc);border-color:var(--encre-30);
  box-shadow:0 14px 30px rgba(20,18,16,.13)}
.blb summary{transition:transform .22s cubic-bezier(.22,.9,.3,1)}
.blb-p::before,.blb-p::after{transition:transform .25s ease,background .22s ease}
.blb:hover .blb-p::before,.blb:hover .blb-p::after{background:var(--brique)}
.blb:hover .blb-p{transform:scale(1.18)}
.blb-p{transition:transform .22s cubic-bezier(.22,.9,.3,1)}
.blb-c{padding:0 20px 20px}
.blb-c p{font-size:13.5px;line-height:1.62;color:var(--encre-h);margin-top:2px}
.blb-c p+p{margin-top:10px}
.blb-r{font-size:11.5px;line-height:1.55;color:var(--encre-62)}
.blb-c a{display:inline-block;margin-top:14px;padding-top:11px;border-top:1px solid var(--encre-14);
  font-size:10.5px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--encre)}
.blb-c a::after{content:"\00a0→";display:inline-block;transition:transform .25s ease}
.blb-c a:hover::after{transform:translateX(4px)}

@media(min-width:620px){.blbs{grid-template-columns:1fr 1fr}
  /* Le décalage : les cartes ne s'alignent pas, elles flottent. */
  .blb:nth-child(2){margin-top:22px}
  .blb:nth-child(4){margin-top:22px}}
@media(min-width:1020px){
    /* Les deux colonnes s'alignent en haut, pas au centre : centrées, la
     colonne de cartes flotte et l'écart mesuré depuis la dernière carte ne
     vaut plus celui du bloc. */
  .hr-in{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);column-gap:56px;align-items:start}
  /* Sur deux colonnes, les cartes commencent au même niveau que la phrase :
     leur marge de rangée ne sert que quand tout est empilé. */
  .blbs{margin-top:0}
  .blb summary{padding:20px 22px 19px}
  .blb-c{padding:0 22px 22px}}
@media(min-width:1240px){.hr-in{column-gap:72px}}

/* La respiration : trois phases décalées, très lente et de faible amplitude.
   Une carte ouverte ne bouge plus, sinon on lit un texte qui flotte. */
@keyframes flotte{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
/* Sans script, le flottement démarre tout de suite. */
.blb:not([open]){animation:flotte 7.5s ease-in-out infinite}
.blb:nth-child(2):not([open]){animation-duration:8.6s;animation-delay:-2.1s}
.blb:nth-child(3):not([open]){animation-duration:7.9s;animation-delay:-4.3s}
.blb:nth-child(4):not([open]){animation-duration:9.2s;animation-delay:-1.2s}
.blb:nth-child(5):not([open]){animation-duration:8.2s;animation-delay:-5.6s}
/* Avec script, il attend que la carte soit posée : une animation l'emporte
   sur une transition, elle écraserait l'entrée si elle démarrait avant. Le
   retard négatif d'origine devient un retard positif, calé après l'entrée. */
.ent-a .blb{animation:none}
.ent-a .blb.vue:not([open]){animation:flotte 7.5s ease-in-out calc(var(--d,0ms) + 700ms) infinite}
.ent-a .blb.vue:nth-child(2):not([open]){animation-duration:8.6s}
.ent-a .blb.vue:nth-child(3):not([open]){animation-duration:7.9s;animation-delay:calc(var(--d,0ms) + 980ms)}
.ent-a .blb.vue:nth-child(4):not([open]){animation-duration:9.2s;animation-delay:calc(var(--d,0ms) + 820ms)}
.ent-a .blb.vue:nth-child(5):not([open]){animation-duration:8.2s;animation-delay:calc(var(--d,0ms) + 1140ms)}
/* La carte s'arrête dès qu'on la vise : une cible qui bouge sous le curseur
   au moment du clic est une cible ratée. Pause plutôt que suppression, sinon
   elle sauterait à sa position de repos. */
.blb:hover,.blb:focus-within{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){
  .blb,.blb-p::before,.blb-p::after,.blb-c a::after{animation:none!important;transition:none}}

/* Les chiffres qui tournent gardent une chasse fixe : sans elle, chaque
   changement de digit décale la ligne pendant toute la montée. */
.blb .ch{font-variant-numeric:tabular-nums}
/* Les mots qui s'écrivent. L'état caché n'existe que dans l'animation :
   sans script les paragraphes sont du texte ordinaire. */
@keyframes motArrive{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
/* La règle était limitée au volet des cartes du hero : les mots écrits
   ailleurs n'avaient donc aucune animation et apparaissaient d'un bloc.
   La classe .mo n'est posée que par ecrireMotAMot, elle peut être globale. */
.mo{display:inline-block;animation:motArrive .34s cubic-bezier(.22,.9,.3,1) both}
@media(prefers-reduced-motion:reduce){.mo{animation:none}}


/* ═══ RAYON : APPLICATION ═════════════════════════════════════════════
   La remise à zéro globale reste en place, sinon chaque navigateur pose
   son propre rayon sur les champs et les boutons. Le rayon est donc posé
   explicitement, ici, sur ce qui doit le porter. Chaque sélecteur listé
   existe dans une page réellement produite, sauf .hd-l, gardé pour le
   jour où le bouton « Livres » revient dans la barre. */

/* Boutons et appels à l'action */
.btn,.hd-c,.hd-l,.bib-l,.qz-o button,.qz-opt button,.let-f button{border-radius:var(--r)}

/* Blocs isolés : cartes, encadrés, panneaux, vignettes */
.blb,.prt-c,.exp-c,.exp-ph,.shop-c,.chif,.qz,.art-fin,.vg,.vign img,
.film,.eq-ph,.wapp-c,.fr-w img,.it img,.sil-c{border-radius:var(--r)}

/* Le sélecteur de format : le rayon va sur la carte, et tout ce qu'elle
   contient est rogné par elle. Sans overflow, l'image, le dégradé, le
   bandeau « Voir ce format » et le liseré or dépasseraient des angles. */

/* Grilles à filet : le rayon va sur le conteneur, qui rogne ses cellules.
   Arrondir chaque cellule ferait apparaître le fond de la grille dans les
   angles, et le filet partagé se briserait. */
.crf,.reg-g,.eqt,.res3,.pal,.dos-t,.qr,.hd-m nav{border-radius:var(--r);overflow:hidden}

/* Petits éléments */
.crf-pa i,.fm-som a,.art-sel-i,.let-f input,.qz-c input,.qz-c textarea{border-radius:var(--r-s)}

/* ═══ LES TROIS PROJECTIONS ════════════════════════════════════════════
   Trois vignettes claires de dessin identique : lettre et palier, ville,
   une phrase, les deux chiffres avec leur statut, le lien, la photo en
   bas. Elles restent le sélecteur des trois heros, d'où le <button> et
   aria-selected.

   L'égalité de dessin est la règle : même fond, même bordure, même
   hauteur d'image. Seule la lettre distingue les trois. */
.fmt2-g{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;align-items:stretch}
.fmt2-c{display:flex;flex-direction:column;text-align:left;cursor:pointer;
  text-decoration:none;color:inherit;
  background:var(--carte);
  background:color-mix(in srgb,var(--creme) 42%,var(--blanc));
  border:1px solid var(--encre-14);border-radius:var(--r);
  padding:24px 22px 22px;font-family:var(--sans);
  transition:border-color .22s ease,background .22s ease,box-shadow .28s ease}
/* Même réponse au survol que les cartes du hero : la carte passe au blanc,
   sa bordure se fonce, une ombre la détache, et la photo avance d'un cran. */
.fmt2-c:hover,.fmt2-c:focus-visible{background:var(--blanc);border-color:var(--encre-30);
  box-shadow:0 16px 34px rgba(20,18,16,.14)}

/* La lettre et le palier, sur une ligne */
/* Le palier est l'intitulé de la carte : même couleur que les .lab du site,
   la rouille. Il était le seul sur-titre en gris. */
.fc-k{display:flex;align-items:center;gap:9px;font-size:9.5px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--brique)}
.fc-k b{display:grid;place-items:center;width:22px;height:22px;flex:none;
  border:1px solid var(--encre-30);border-radius:var(--r-s);
  font-size:11px;font-weight:600;letter-spacing:0;color:var(--encre)}

.fc-t{display:block;margin-top:13px;font-size:21px;font-weight:600;line-height:1.16;
  letter-spacing:-.02em;color:var(--encre)}
.fc-p{display:block;margin-top:10px;font-size:13.5px;line-height:1.6;color:var(--encre-72)}

/* Les deux chiffres et leur statut. Le statut est au-dessus du montant :
   on ne lit jamais une valeur sans savoir ce qu'elle est. */
.fc-f{display:flex;gap:22px;margin-top:16px;padding-top:13px;
  border-top:1px solid var(--encre-14)}
.fc-f i{display:block;font-style:normal;font-size:8.5px;font-weight:600;
  letter-spacing:.13em;text-transform:uppercase;color:var(--encre-62)}
.fc-f b{display:block;margin-top:3px;font-size:17px;font-weight:600;
  line-height:1.15;color:var(--encre);font-variant-numeric:tabular-nums}

/* Le lien porte ses deux libellés dans le DOM, un seul est montré selon
   l'état : du texte en CSS n'est ni indexable ni sélectionnable. */
/* Le libellé est écrit après l'image dans le balisage, parce que l'enveloppe
   diffère d'un accueil à l'autre et que le contenu partagé se termine par la
   photo. L'ordre visuel, lui, reste celui du modèle : libellé puis image. */
.fc-l{display:block;order:2;margin-top:16px;margin-bottom:20px;font-size:14px;line-height:1.3}
.fc-l em,.fc-l i{font-style:normal}
.fc-l em{color:var(--encre);border-bottom:1px solid var(--encre-30);padding-bottom:2px}
.fc-l i{display:none;color:var(--brique);font-weight:600}
.fmt2-c:hover .fc-l em{border-color:var(--encre)}
.fmt2-c[aria-selected="true"] .fc-l em{display:none}
.fmt2-c[aria-selected="true"] .fc-l i{display:inline}

/* La photo, en bas, comme sur le modèle */
/* Le cadre de la photo ne porte plus de garniture haute : sa boîte épouse
   exactement l'image, ce qui permet de rogner l'agrandissement au survol.
   L'écart au-dessus est repris par la marge basse du lien. */
.fc-v{position:relative;display:block;order:3;margin-top:auto;
  overflow:hidden;border-radius:var(--r);background:var(--sable)}
.fc-v img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;object-position:center 42%;
  transition:transform .5s cubic-bezier(.22,.9,.3,1)}
.fmt2-c:hover .fc-v img{transform:scale(1.04)}
/* Tout visuel qui n'est pas une photographie reste étiqueté, sans exception. */
.fc-lg{position:absolute;left:9px;bottom:9px;padding:4px 9px;border-radius:var(--r-s);
  background:var(--voile);color:var(--blanc);font-size:8.5px;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase}
.fc-lg-r{background:var(--brique)}

/* L'état sélectionné : bordure or, comme partout ailleurs sur le site. */
.fmt2-c[aria-selected="true"]{border-color:var(--or);background:var(--creme)}
.fmt2-c[aria-selected="true"] .fc-k b{border-color:var(--or)}

.fmt2-n{margin-top:16px;text-align:center;font-size:12px;color:var(--encre-62);
  max-width:96ch;margin-inline:auto}

@media(max-width:899px){
  /* Le rail : trois vignettes ne tiennent pas de front, elles défilent. */
  .fmt2-g{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x proximity;
    scrollbar-width:none;padding-bottom:2px;
    margin-inline:calc(var(--pad)*-1);padding-inline:var(--pad);
    scroll-padding-inline:var(--pad)}
  .fmt2-g::-webkit-scrollbar{display:none}
  .fmt2-c{flex:0 0 78%;scroll-snap-align:start;padding:20px 18px 18px}
  .fc-t{font-size:19px}
  .fc-f b{font-size:16px}
  .fc-l{margin-bottom:16px}
}
@media(min-width:900px) and (max-width:1079px){.fmt2-g{gap:14px}.fmt2-c{padding:20px 18px 18px}}

/* ═══ CHAQUE ÉTAPE ════════════════════════════════════════════════════
   Cartes sombres posées sur une section claire, comme le modèle : c'est
   le contraste avec le fond blanc qui les fait exister. Même palette que
   le cadre juridique qui suit, encre pour le fond, or pour les accents,
   blanc pour le texte, et les deux blocs se répondent.

   Le livrable ferme la carte par un bandeau or, là où le modèle met son
   bouton de prix. C'est ce qu'on remet, et la seule chose qu'on promette.

   La carte de sortie est traitée à part parce qu'elle l'est vraiment :
   c'est le seul moment où l'opération se termine, et le seul où l'on
   demande une décision. */
.etp{background:var(--blanc)}
.etp-h{display:grid;grid-template-columns:1fr;gap:22px;align-items:start;margin-bottom:38px}
.etp-h .lab{margin-bottom:var(--e1)}
.etp-h h2{}
.etp-h p{margin-top:var(--e2);font-size:var(--st);line-height:1.62;color:var(--encre-72);max-width:62ch}
.etp-plus{white-space:nowrap;flex:none}

.etp-g{display:grid;grid-template-columns:1fr;gap:18px;list-style:none;margin:0;padding:0}
.etp-c,.etp-v{background:var(--encre);color:var(--blanc);border:0;border-radius:var(--r);
  transition:background .22s ease,box-shadow .28s ease}
.etp-c:hover,.etp-v:hover{background:var(--encre-h);
  background:color-mix(in srgb,var(--encre) 88%,var(--blanc));
  box-shadow:0 18px 38px rgba(20,18,16,.22)}
.etp-c{display:flex;flex-direction:column;padding:26px 24px 24px}

/* L'illustration passe à l'or clair : la rouille sur l'encre tombe à 2:1. */
.etp-i{color:var(--or-c)}
.etp-n{display:flex;align-items:center;gap:11px;font-size:9.5px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--blanc-40)}
.etp-n b{display:grid;place-items:center;width:26px;height:26px;flex:none;
  border:1px solid var(--or-c);border-radius:var(--r-s);
  font-size:11.5px;font-weight:600;letter-spacing:0;color:var(--or-c)}
.etp-c h3{margin-top:15px;font-size:20px;font-weight:600;line-height:1.2;letter-spacing:-.015em}
.etp-s{margin-top:10px;font-size:13.5px;line-height:1.6;color:var(--blanc-72)}
.etp-c ul{margin:18px 0 22px;padding:0;list-style:none;display:grid;gap:9px}
.etp-c li{position:relative;padding-left:17px;font-size:13px;line-height:1.5;color:var(--blanc-72)}
.etp-c li::before{content:"";position:absolute;left:0;top:8px;width:6px;height:1.5px;
  background:var(--or-c)}
/* Le bandeau du livrable, en bas de la carte quelle que soit la longueur de
   la liste : sans cela les trois cartes ne se lisent plus comme une série. */
.etp-l{padding:14px 16px;border-radius:var(--r-s);background:var(--or);color:var(--encre);
  font-size:13px;line-height:1.45}
.etp-c .etp-l{margin-top:auto}
.etp-l i{display:block;font-style:normal;font-size:9px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--encre);margin-bottom:5px}
/* Comme sur la barre or du cadre : sur un aplat de couleur, la hiérarchie se
   fait au corps et à la casse, pas à l'opacité. À 70 % ce libellé tombait à
   3,3:1, sous le seuil. */

.etp-v{padding:28px 24px;display:grid;grid-template-columns:1fr;
  gap:24px;align-items:end}
.etp-v h3{margin-top:14px;font-size:clamp(1.35rem,3.2vw,1.9rem);font-weight:600;line-height:1.14;
  letter-spacing:-.018em}
.etp-v-t p{margin-top:12px;font-size:14.5px;line-height:1.62;color:var(--blanc-72);max-width:58ch}
.etp-v-r{font-size:12px!important;line-height:1.55!important;color:var(--blanc-62)!important}
.etp-v-a{display:flex;flex-direction:column;align-items:flex-start;gap:16px}
.etp-v-a .etp-l{margin-top:0}
.etp-v-l{font-size:12.5px;color:var(--blanc-72);border-bottom:1px solid var(--blanc-16);
  padding-bottom:2px;transition:color .2s ease,border-color .2s ease}
.etp-v-l:hover{color:var(--blanc);border-color:var(--blanc-40)}

/* Sur téléphone, les trois cartes d'étape se balaient au lieu de s'empiler,
   comme les vignettes des opérations. Trois cartes empilées, c'est trois
   écrans à traverser avant d'atteindre la vente ; balayées, l'enchaînement des
   étapes se lit d'un geste. Le contenu reste dans le DOM, aucun display:none :
   un rail défile, il ne masque pas. */
@media(max-width:759px){
  .etp-g{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x proximity;
    scrollbar-width:none;padding-bottom:2px;
    margin-inline:calc(var(--pad)*-1);padding-inline:var(--pad);
    scroll-padding-inline:var(--pad)}
  .etp-g::-webkit-scrollbar{display:none}
  .etp-c,.etp-v{flex:0 0 82%;scroll-snap-align:start;padding:22px 20px 20px}
  .etp-v{display:flex;flex-direction:column;gap:18px}
}
@media(min-width:760px){
  .etp-g{grid-template-columns:repeat(3,1fr)}
  /* La vente occupe toute la largeur sous les trois étapes : c'est la même
     liste, mais son rôle n'est pas le même. Sur téléphone elle redevient la
     quatrième carte du rail. */
  .etp-v{grid-column:1/-1;margin-top:18px}
}

/* Le sélecteur des quatre étapes, sur téléphone seulement. */
.etp-pts{display:none}
@media(max-width:759px){
  .etp-pts{display:flex;gap:6px;justify-content:center;margin:0 0 16px;flex-wrap:wrap}
  .etp-pts button{display:flex;align-items:center;gap:6px;min-height:44px;
    padding:8px 11px;border:1px solid var(--encre-14);border-radius:var(--r-s);
    background:transparent;color:var(--encre-72);cursor:pointer;
    font-family:var(--sans);font-size:10px;font-weight:600;letter-spacing:.05em;
    transition:border-color .22s ease,color .22s ease,background .22s ease}
  .etp-pts button b{display:grid;place-items:center;width:19px;height:19px;flex:none;
    border:1px solid currentColor;border-radius:var(--r-s);font-size:9.5px;letter-spacing:0}
  .etp-pts button[aria-selected="true"]{border-color:var(--brique);color:var(--brique);
    background:var(--carte)}
}
@media(max-width:389px){.etp-pts button{padding:8px 8px;font-size:9.5px;gap:5px}}
@media(min-width:960px){
  .etp-h{grid-template-columns:1fr auto;align-items:start}
  .etp-plus{margin-top:6px}
  .etp-v{grid-template-columns:1.35fr 1fr;gap:44px;padding:34px 32px}
  .etp-c{padding:30px 26px 26px}
}

/* Une illustration par étape, dessinée à la main en SVG plutôt que prise dans
   une bibliothèque : quatre traits, le même style que le reste, aucun fichier
   à charger. Elle dit d'un coup d'œil ce que la carte détaille : une feuille
   avec une courbe pour la trajectoire chiffrée, un bâtiment à colonnes pour la
   société et la banque, une maison et son toit pour l'achat et le chantier,
   une étiquette pour la vente. */
.etp-i{display:block;color:var(--brique);margin-bottom:18px}
.etp-i svg{width:30px;height:30px;display:block}
.etp-v .etp-i{margin-bottom:14px}
@media(max-width:759px){.etp-i svg{width:26px;height:26px}.etp-i{margin-bottom:14px}}

/* ═══ LES TROIS BARRES SORTENT DU SOL ═════════════════════════════════
   Le bloc n'arrive pas par le bas comme les cartes ailleurs : il pousse
   depuis sa propre base, l'un après l'autre. Le dévoilement passe par
   clip-path et non par une mise à l'échelle : une barre qu'on étire
   déforme son texte, une barre qu'on découvre ne déforme rien.

   Le rayon est repris dans le clip-path, sinon les angles arrondis
   réapparaissent carrés pendant toute la montée. */
.cadg.ent-a article:not(.vue){opacity:1;transform:none;
  clip-path:inset(100% 0 0 0 round var(--r))}
.cadg.ent-a article{transition:clip-path .85s cubic-bezier(.16,.84,.3,1) var(--d,0ms)}
.cadg.ent-a article.vue{clip-path:inset(0 0 0 0 round var(--r))}
/* Le texte suit la barre : il apparaît une fois qu'elle a bien poussé. */
.cadg.ent-a article > *{opacity:0}
.cadg.ent-a article.vue > *{opacity:1;
  transition:opacity .45s ease calc(var(--d,0ms) + 420ms)}
/* Les fragments de la première barre sont écrits par le script : ils ne
   suivent donc pas l'apparition groupée des autres enfants. */
.cadg.ent-a .cad-1.vue > .cdf{opacity:1;transition:none}
@media(prefers-reduced-motion:reduce){
  .cadg.ent-a article,.cadg.ent-a article > *{clip-path:none;opacity:1;transition:none}}

/* La machine à écrire : chaque caractère se pose d'un coup, sans fondu, et
   un curseur clignote au bout de la ligne en cours. Le fondu ferait une
   apparition, pas une frappe. */
/* Le caractère non encore frappé ne doit pas occuper sa place : sinon le
   curseur se pose au bout de la ligne entière, loin du texte en train de
   s'écrire, et se lit comme un trait perdu. On l'ouvre donc en largeur. */
@keyframes mchPose{from{max-width:0;opacity:0}to{max-width:3em;opacity:1}}
.mch-m{display:inline-block;vertical-align:top}
.mch{display:inline-block;vertical-align:top;overflow:hidden;
  animation:mchPose .001s linear both}
.cdf.tape::after{content:"";display:inline-block;width:2px;height:.95em;
  margin-left:3px;vertical-align:-.11em;background:currentColor;
  animation:mchCurseur .85s steps(1) infinite}
@keyframes mchCurseur{0%,49%{opacity:1}50%,100%{opacity:0}}
@media(prefers-reduced-motion:reduce){.mch{animation:none}.cdf.tape::after{display:none}}

/* ═══ L'INVESTISSEUR RACONTE ══════════════════════════════════════════
   Bloc centré, comme le cadre juridique juste au-dessus : on vient
   d'expliquer qui détient le bien, quelqu'un vient le confirmer de vive
   voix, et les deux blocs se répondent par leur composition. */
.itw{background:var(--blanc);text-align:center}
/* Le titre suit le système unifié des titres, déclaré une fois en tête de
   feuille : il ne garde ici que son écart au sur-titre. Une bride locale de
   22ch vivait là — troisième relique d'avant v264, échappée parce que son
   sélecteur de classe n'était ni dans la liste surveillée ni un identifiant.
   Le contrôle refuse désormais toute largeur, et toute taille de bloc, posée
   sur un h2 hors du système. */
.itw-t h2{margin-top:var(--e1)}
.itw-s{margin-top:var(--e2);font-size:var(--st);line-height:1.6;color:var(--encre-72);
  max-width:52ch;margin-inline:auto}

.itw-v{margin:38px auto 0;max-width:880px}
.itw-v .tm-v{aspect-ratio:16/9;border-radius:var(--r);overflow:hidden;
  transition:box-shadow .28s ease}
.itw-v .tm-v:hover{box-shadow:0 14px 34px rgba(20,18,16,.16)}
.itw-v .tm-go{border-radius:var(--r-s)}
/* La légende dit à quoi le témoignage engage, et à quoi il n'engage pas.
   Elle est sous l'image, en une ligne, au même corps que les autres
   légendes du site. */
.itw-c{margin-top:12px;font-size:12px;line-height:1.6;color:var(--encre-62)}
.itw-c a{color:var(--brique);border-bottom:1px solid var(--encre-14);padding-bottom:1px}
.itw-c a:hover{border-color:var(--brique)}
.itw-a{margin-top:30px}

/* ═══ VISITE DE CHANTIER ══════════════════════════════════════════════
   Pleine largeur, dans le hero. L'image sort de la colonne de contenu et
   va d'un bord à l'autre : c'est ce qui lui donne l'échelle d'un écran.
   Sa hauteur est bornée par celle de la fenêtre, sinon un 16:9 pleine
   largeur ferait 810 px sur un écran de 1440 et pousserait tout le reste
   hors de vue. Le cadrage est en cover, l'image n'est pas déformée. */
/* La vidéo va d'un bord à l'autre : elle coupe la page en deux et se comporte
   donc comme une frontière de bloc, pas comme une illustration au fil du texte.
   L'écart qui la suit est celui des blocs, --air ; celui qui la précède vaut la
   moitié, parce qu'elle illustre le titre juste au-dessus et lui appartient.
   Avant, trente pixels séparaient une image pleine largeur du bloc suivant. */
.cha{grid-column:1/-1;
  margin-block:calc(var(--air) * .5) var(--air);
  width:100vw;margin-inline:calc(50% - 50vw)}
/* Hauteur calculée, pas un rapport plafonné : avec aspect-ratio ET max-height,
   c'est la LARGEUR qui se réduit pour tenir le rapport, et l'image cessait
   d'être pleine largeur. Ici la largeur reste entière et l'image est rognée. */
.cha-v{position:relative;display:block;overflow:hidden;cursor:pointer;
  width:100%;height:min(72vh,56.25vw)}
/* Le cadrage part du haut : la vignette porte son titre en haut et le visage
   dessous, un rognage centré leur coupait la tête à tous les deux. */
/* L'emballage de l'image. Par défaut il occupe tout le cadre, donc le
   centrage du bouton de lecture ne change pas hors du hero. */
.cha-im{position:relative;display:block;width:100%;height:100%}
.cha-v img{width:100%;height:100%;object-fit:cover;object-position:50% 8%;display:block}
.cha-v .tm-go{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  z-index:2;border-radius:var(--r-s)}
/* Le titre est incrusté en bas de l'image, sur un voile qui garantit sa
   lisibilité quelle que soit la photo. */
.cha-t{position:absolute;left:0;right:0;bottom:0;z-index:2;margin:0;
  padding:64px 24px 18px;
  background:linear-gradient(180deg,rgba(20,18,16,0),rgba(20,18,16,.62) 46%,var(--voile-f))}
.cha-t b{display:block;font-size:var(--t3);font-weight:600;line-height:1.22;
  letter-spacing:-.015em;color:var(--blanc);text-shadow:0 1px 14px rgba(0,0,0,.7)}
.cha-t em{display:block;margin-top:6px;font-style:normal;font-size:10px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--blanc-72)}
@media(min-width:900px){.cha-t{padding:90px 40px 26px}}
@media(max-width:639px){
  /* 16:9 comme l'image : en 4:3 la vignette perdait 129 px sur les côtés et le
     titre incrusté « DÉTROIT » se retrouvait coupé. */
  .cha-v{height:min(64vh,56.25vw)}
  .cha-t{padding:52px 18px 16px}
}


/* ═══ VISIONNEUSE D'OPÉRATIONS ════════════════════════════════════════
   Le curseur avant/après n'occupe plus la page : il apparaît au clic sur
   une vignette. Trois opérations, une seule visible.

   Deux gestes horizontaux cohabitent, et c'est le point délicat : glisser
   SUR l'image compare l'avant et l'après, glisser À CÔTÉ change
   d'opération. Ils ne se recouvrent jamais parce qu'ils n'occupent pas la
   même surface, et les flèches font la même chose pour qui ne devine pas. */
.opv{position:fixed;inset:0;z-index:120;display:grid;place-items:center;padding:14px}
.opv[hidden]{display:none}
.opv-fond{position:absolute;inset:0;background:var(--voile-f);
  animation:opvFond .22s ease both}
@keyframes opvFond{from{opacity:0}to{opacity:1}}
.opv-boite{position:relative;z-index:1;width:min(1080px,100%);max-height:calc(100dvh - 28px);
  display:flex;flex-direction:column;background:var(--encre);border-radius:var(--r);
  overflow:hidden;animation:opvBoite .3s cubic-bezier(.22,.9,.3,1) both}
@keyframes opvBoite{from{opacity:0;transform:translateY(16px) scale(.985)}to{opacity:1;transform:none}}

.opv-hd{display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:12px 16px;color:var(--blanc)}
.opv-t{display:flex;align-items:center;gap:11px;font-size:11px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--blanc-72)}
.opv-t b{display:grid;place-items:center;width:26px;height:26px;flex:none;
  border:1px solid var(--or-c);border-radius:var(--r-s);
  font-size:11.5px;letter-spacing:0;color:var(--or-c)}
.opv-x{width:38px;height:38px;flex:none;border:0;border-radius:var(--r-s);
  background:var(--blanc-12);color:var(--blanc);font-size:15px;cursor:pointer;
  transition:background .2s ease}
.opv-x:hover{background:var(--blanc-16)}

/* La scène : une opération à la fois, les autres sont retirées du flux. */
/* La scène défile plutôt que de rogner : la ligne de statut est en bas du
   hero, et c'est elle qui porte « aucun résultat garanti » et « en scénario,
   à valider ». Sur un écran bas, un overflow caché la ferait disparaître.

   L'image se plie à la hauteur disponible : sans cette limite, le rapport 4:3
   dépassait la scène de deux ou trois pixels par arrondi, et une barre de
   défilement pleine hauteur apparaissait pour rien. Le cadrage est en
   `object-fit:cover`, la photo n'est donc pas déformée. */
/* flex:0 1 auto et non 1 1 auto : la scène prend la hauteur de l'image au lieu
   de s'étirer pour remplir le panneau. Étirée, elle dépassait de deux ou trois
   pixels par arrondi du rapport 4:3, et une barre pleine hauteur apparaissait
   pour rien. Elle ne se rétrécit, et ne défile, que si le panneau touche son
   plafond de hauteur. */
.opv-scene{position:relative;overflow-y:auto;overflow-x:hidden;flex:0 1 auto;min-height:0;
  overscroll-behavior:contain;
  scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.22) transparent}

/* Quand la barre est nécessaire, elle est fine et de la couleur du panneau,
   pas le rail gris du système. */
.opv-scene::-webkit-scrollbar{width:6px}
.opv-scene::-webkit-scrollbar-track{background:transparent}
.opv-scene::-webkit-scrollbar-thumb{background:var(--blanc-16);border-radius:var(--r-s)}
.opv-scene::-webkit-scrollbar-thumb:hover{background:var(--blanc-40)}
.opv-scene .hero{display:block}
.opv-scene .hero[hidden]{display:none}

.opv-nav{display:flex;align-items:center;justify-content:center;gap:12px;padding:10px 16px}
.opv-fl{width:40px;height:40px;flex:none;border:0;border-radius:var(--r-s);
  background:var(--blanc-12);color:var(--blanc);font-size:20px;line-height:1;cursor:pointer;
  transition:background .2s ease}
.opv-fl:hover{background:var(--blanc-16)}
.opv-pts{display:flex;gap:8px}
.opv-pts button{width:38px;height:34px;border:1px solid rgba(255,255,255,.22);
  border-radius:var(--r-s);background:transparent;color:var(--blanc-72);
  font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.1em;cursor:pointer;
  transition:border-color .2s ease,color .2s ease}
.opv-pts button[aria-selected="true"]{border-color:var(--or-c);color:var(--blanc)}

.opv-aide{padding:0 16px 12px;text-align:center;font-size:11px;line-height:1.4;
  color:var(--blanc-40)}
@media(max-width:639px){
  .opv{padding:8px}
  .opv-aide{font-size:10.5px}
  .opv-fl{width:44px;height:44px}
}
@media(prefers-reduced-motion:reduce){.opv-fond,.opv-boite{animation:none}}

/* ═══ LES RAILS NE TIRENT PLUS LA PAGE ════════════════════════════════
   Le navigateur « ancre » le défilement : quand le contenu bouge, il
   corrige la position verticale pour garder le même point sous les yeux.
   Sur un rail horizontal, ce mécanisme se déclenche à chaque changement
   de carte et déplace la page de plusieurs dizaines de pixels sans qu'on
   l'ait demandé. Mesuré à 72 px sur le bloc des obstacles.
   On le désactive sur les rails, qui n'en ont aucun besoin : leur contenu
   ne change pas de hauteur. */
.rt-g,.rt-i,

/* ═══ LES CARTES SE DÉCOLLENT ═════════════════════════════════════════
   Toutes les familles de cartes du site montent de quelques pixels au
   survol. Le mouvement passe par la propriété `translate` et non par
   `transform` : les cartes du hero ont déjà une animation de flottement
   qui occupe `transform`, et une animation l'emporte toujours sur une
   déclaration. Les deux propriétés se composent, le décollement s'ajoute
   donc au flottement au lieu de se faire écraser.

   Le survol est réservé aux pointeurs qui survolent réellement. Sur un
   écran tactile, une règle :hover reste collée après le doigt : la carte
   serait restée soulevée jusqu'au prochain appui ailleurs. Au doigt, le
   geste juste n'est pas un décollement mais un enfoncement, le temps de
   l'appui. */
.blb,.fmt2-c,.etp-c,.etp-v,.cadg article{
  transition-property:opacity,transform,translate,scale,background,border-color,box-shadow,clip-path}

@media(hover:hover) and (pointer:fine){
  .blb:hover,.blb:focus-within{translate:0 -5px}
  .fmt2-c:hover,.fmt2-c:focus-visible{translate:0 -6px}
  .etp-c:hover,.etp-v:hover{translate:0 -6px}
  /* Sur l'aplat sombre du cadre, une ombre noire ne se voit pas : c'est un
     liseré clair qui donne le bord décollé. */
  .cadg article:hover{translate:0 -7px;
    box-shadow:0 20px 44px rgba(0,0,0,.42),0 0 0 1px rgba(255,255,255,.13)}
}

@media(hover:none){
  .blb:active,.fmt2-c:active,.etp-c:active,.etp-v:active,.cadg article:active{scale:.985}
}

@media(prefers-reduced-motion:reduce){
  .blb,.fmt2-c,.etp-c,.etp-v,.cadg article{transition-property:opacity,background,border-color,box-shadow}
  .blb:hover,.fmt2-c:hover,.etp-c:hover,.etp-v:hover,.cadg article:hover{translate:none}
}

/* ═══ LA COURBE, EN PETIT, SUR TÉLÉPHONE ══════════════════════════════
   Empilées, les trois barres perdent ce qui fait leur sens : des hauteurs
   qui descendent. Ce schéma le rend en un coup d'œil avant la lecture,
   dans les mêmes proportions que les barres, 1 : 0,84 : 0,70, et avec
   leurs couleurs. Il est purement décoratif : tout le contenu reste dans
   les blocs. */
.cad-courbe{display:none}
@media(max-width:859px){
  /* Chaque barre porte son nom et mène à son bloc : le schéma devient une
     table des matières, pas seulement une image. */
  .cad-courbe{display:flex;align-items:flex-end;gap:10px;margin-bottom:22px}
  /* Le nom vit dans sa barre : le lien est la barre, le libellé est posé
     par-dessus, et toute la surface colorée se vise au doigt. */
  .cad-courbe a{flex:1;position:relative;display:flex;flex-direction:column;
    text-decoration:none;min-height:44px}
  .cad-courbe i{display:block;border-radius:var(--r-s);
    transition:opacity .22s ease}
  .cad-courbe a:active i{opacity:.7}
  .cad-courbe b{position:absolute;inset:0;display:grid;place-items:center;
    font-size:9.5px;font-weight:600;letter-spacing:.12em;
    text-transform:uppercase;text-align:center}
  /* La couleur du nom suit celle de sa barre : encre sur la carte (13:1) et
     sur l'or (4,9:1), blanc sur la rouille (6,7:1). */
  .cad-courbe a:nth-child(1) b,.cad-courbe a:nth-child(2) b{color:var(--encre)}
  .cad-courbe a:nth-child(3) b{color:var(--blanc)}
  .cc-1{height:74px;background:var(--carte)}
  .cc-2{height:62px;background:var(--or)}
  .cc-3{height:52px;background:var(--brique)}
}

/* ═══ LES TROIS OPÉRATIONS, SUR TÉLÉPHONE ═════════════════════════════
   Le rail ne montre qu'une vignette et le bord de la suivante : rien ne
   dit qu'il y en a trois. Ces pastilles le disent, marquent celle qu'on
   regarde et permettent d'aller directement à une autre. Elles n'ont
   aucune raison d'être sur grand écran, où les trois sont visibles. */
.fmt2-pts{display:none}
@media(max-width:899px){
  /* Le sélecteur est au-dessus du rail : on choisit, puis on lit. En dessous,
     il fallait avoir déjà parcouru les vignettes pour découvrir qu'il existe. */
  .fmt2-pts{display:flex;gap:8px;justify-content:center;margin:0 0 16px}
  /* 44 px de haut : une pastille se vise au doigt, pas à la souris.
     Le texte est en encre-72 et non en encre-52, qui tombait à 3,5:1. */
  .fmt2-pts button{display:flex;align-items:center;gap:7px;min-height:44px;
    padding:8px 13px;border:1px solid var(--encre-14);border-radius:var(--r-s);
    background:transparent;color:var(--encre-72);cursor:pointer;
    font-family:var(--sans);font-size:10.5px;font-weight:600;letter-spacing:.06em;
    transition:border-color .22s ease,color .22s ease,background .22s ease}
  .fmt2-pts button b{display:grid;place-items:center;width:19px;height:19px;flex:none;
    border:1px solid currentColor;border-radius:var(--r-s);font-size:10px;letter-spacing:0}
  .fmt2-pts button[aria-selected="true"]{border-color:var(--brique);color:var(--brique);
    background:color-mix(in srgb,var(--creme) 42%,var(--blanc));background:var(--carte)}
}
@media(max-width:389px){.fmt2-pts button{padding:8px 10px;font-size:10px;gap:6px}}

/* ═══ RETOURS D'INVESTISSEURS ═════════════════════════════════════════
   Les messages reçus pendant l'accompagnement, en bande qui défile.
   Même mécanique que la bande des partenaires : elle avance seule, elle
   s'arrête au survol, et elle passe en manuel dès qu'on la manipule. */
/* Fond blanc, rien d'autre que la bande : sans titre ni chapô, l'œil n'a que
   les messages à lire. Le blanc l'isole des deux blocs qui l'encadrent. */
.wapp{background:var(--blanc)}
.wapp-zone{position:relative}

/* ═══ LES PARTENAIRES, EN VIDÉO ═══════════════════════════════════════
   Cinq entretiens, juste avant les livres. Aucune vidéo ne se charge
   tant qu'on n'a pas cliqué : la grille ne contient que des miniatures
   et un bouton de lecture. */
/* Deux blocs successifs sur le même fond : le second enchaîne sans reprendre
   l'écart complet, sinon on croirait à deux sections sans rapport. */
/* v258 : fond blanc. Les SECTIONS entières n'ont plus d'aplat ; seules les
   cartes en gardent un (.blb, .fmt2-c, .st-d, .reg-c, .cad-1, .eq-ph…).
   Règle unique sur tout le site, plus de traitement au cas par cas. */
.ptv{background:var(--blanc)}
/* Les livres se sont intercalés entre les deux blocs de vidéos : ils ne forment
   plus une paire, l'écart normal s'applique. */


/* ═══ LES CINQ ÉTAPES, DANS LE SYSTÈME ════════════════════════════════
   Chaque étape est une carte, comme les vignettes et les cartes du hero :
   même fond, même filet, même rayon, même décollement au survol. Avant,
   c'était une liste séparée par des filets, seul bloc du site à ne pas
   suivre la règle des cartes. */
/* overflow-x:clip et jamais hidden : les cartes arrivent de 30 px hors
   cadre, hidden créerait un contexte de défilement et casserait les ancres. */
#methode{background:var(--blanc);overflow-x:clip}
#methode .sec-c{margin-bottom:30px}
#methode .lab{margin-bottom:var(--e1)}
/* Le titre du bloc méthode suit le système unifié des titres (--t2, 600,
   34ch, déclaré une fois plus haut). Une règle à identifiant le bridait ici
   à 22ch — relique d'avant v264, passée sous le contrôle parce que son
   sélecteur n'était pas dans la liste surveillée. Le contrôle balaie
   désormais aussi les sélecteurs à identifiant. Ne pas nommer de sélecteur
   surveillé dans ce commentaire : le contrôle lit la feuille sans retirer
   les commentaires. */
/* :not(.lab) est indispensable : « #methode .sec-c p » vaut (1,1,1) et écrase
   la règle des intitulés, qui ne vaut que (0,1,0). Le sur-titre héritait donc
   de la taille et de la couleur du chapô. Troisième occurrence de ce piège. */
#methode .sec-c p:not(.lab){margin-top:var(--e2);font-size:var(--st);line-height:1.62;
  color:var(--encre-72);max-width:58ch}

.steps{display:grid;gap:12px;list-style:none;margin:0;padding:0;border:0}
.st{margin:0;border:0}
.st-d{background:var(--carte);
  background:color-mix(in srgb,var(--creme) 42%,var(--blanc));
  border:1px solid var(--encre-14);border-radius:var(--r);
  transition:background .22s ease,border-color .22s ease,box-shadow .28s ease,translate .28s ease}
.st-d summary{list-style:none;cursor:pointer;padding:22px 22px 20px;
  display:grid;grid-template-columns:auto 1fr auto;gap:4px 16px;align-items:start}
.st-d summary::-webkit-details-marker{display:none}
.st-d summary::after{content:"+";grid-column:3;grid-row:1/span 3;align-self:center;
  font-size:20px;line-height:1;color:var(--encre-62);transition:transform .28s ease,color .22s ease}
.st-d[open] summary::after{content:"−";color:var(--brique)}
/* Le numéro est en rouille et non en or : l'or sur fond clair tombe à 3,25:1,
   sous le seuil. La rouille donne 6,7 et reste dans la palette. */
.st .num{grid-row:1/span 3;font-family:var(--dis);font-size:30px;font-weight:500;
  line-height:1;color:var(--brique);letter-spacing:-.02em}
.st h3{grid-column:2;font-size:var(--t3);font-weight:600;line-height:1.2;
  letter-spacing:-.015em;color:var(--encre)}
.st-l{grid-column:2;font-size:12px;font-weight:600;letter-spacing:.02em;color:var(--brique)}
.st-b{padding:0 22px 22px;grid-column:1/-1}
.st-b p{font-size:var(--st);line-height:1.65;color:var(--encre-72);max-width:64ch;margin:0}
@media(min-width:760px){
  /* v243 : trois colonnes au lieu de deux. À deux, la cinquième étape restait
     seule à gauche avec un trou à sa droite. Cinq dans une grille de deux ne
     tombe jamais juste ; à trois, la dernière rangée en porte deux. */
  .steps{grid-template-columns:repeat(3,1fr)}
}
@media(hover:hover) and (pointer:fine){
  .st-d:hover{background:var(--blanc);border-color:var(--encre-30);
    box-shadow:0 14px 30px rgba(20,18,16,.13);translate:0 -5px}
}
@media(hover:none){.st-d:active{scale:.985}}
@media(prefers-reduced-motion:reduce){.st-d:hover{translate:none}}


/* ═══ LES OBSTACLES, EN BANDE ═════════════════════════════════════════
   Même mécanique et même dessin que les partenaires et les retours : la
   bande avance seule, s'arrête dès qu'on la manipule et y reste, deux
   flèches dans la gouttière. railSansFin duplique les cartes à
   l'exécution, il n'y a donc rien à recopier dans le balisage.

   Les cartes portent ici du texte et non des logos : c'est le seul point
   où cette bande diffère des deux autres. Une carte traverse l'écran en
   une dizaine de secondes, et le premier contact la fige, ce qui laisse
   lire. Si c'est trop rapide à l'usage, la vitesse est un seul nombre
   dans app.js. */
.rt-zone{position:relative;margin-top:30px}
/* Rail borné, comme celui des opérations : cinq cartes, on s'arrête à la
   cinquième. Pas de duplication ni de boucle, la bande sans fin allait au-delà
   du 05 et repartait au 01. */
.rt-fen{overflow-x:auto;scrollbar-width:none;overscroll-behavior-x:contain;
  scroll-snap-type:x proximity;overflow-anchor:none;
  margin-inline:calc(var(--pad)*-1);padding-inline:var(--pad);
  scroll-padding-inline:var(--pad)}
.rt-fen::-webkit-scrollbar{display:none}
.rt-piste{display:flex;gap:12px;width:max-content}
.rt-i{flex:0 0 min(78vw,420px);scroll-snap-align:start;
  display:grid;grid-template-columns:auto 1fr;gap:0 16px;align-items:start;
  padding:24px 22px 22px;background:var(--encre-h);border:1px solid var(--blanc-12);
  border-radius:var(--r);transition:border-color .25s ease,box-shadow .25s ease}
/* La carte que la pastille désigne porte le même liseré qu'elle : l'or marque
   l'actif, et le même mot doit être dit aux deux étages. L'attribut est posé
   par pastillesRail, au clic comme au balayage. */
.rt-i{cursor:pointer}
.rt-i[aria-current="true"]{border-color:var(--or-c);
  box-shadow:inset 0 0 0 1px rgba(214,170,84,.35)}
.rt-i .rt-n{font-family:var(--dis);font-size:30px;font-weight:500;line-height:1;
  color:var(--brique-c);grid-row:1/span 2}  /* rouille, comme tout ordinal */
.rt-i h3{font-size:var(--t3);font-weight:600;line-height:1.2;color:var(--blanc);
  letter-spacing:-.015em}
/* La citation en rouille claire donnait 4,3 sur le fond de carte survolée :
   sous le seuil. Le blanc à 88 % la garde distincte de la réponse sans
   descendre sous 4,5. L'italique suffit à la marquer comme une parole. */
.rt-i .rt-v{margin-top:8px;font-size:13.5px;line-height:1.55;color:var(--blanc-88);font-style:italic}
.rt-i .rt-r{margin-top:10px;font-size:13.5px;line-height:1.6;color:var(--blanc-72)}
@media(min-width:900px){.rt-i{flex:0 0 440px}}


/* Le sélecteur des cinq obstacles : même dessin que celui des opérations et
   des étapes, en clair sur fond sombre. */
/* Le sélecteur respire sous le titre, comme celui des opérations. */
/* Les flèches du rail : deux pastilles rondes posées sur les bords, sombres
   et cerclées pour rester lisibles par-dessus les cartes. Visibles aussi au
   doigt — le balayage marche, mais tout le monde ne devine pas qu'un rail se
   balaye. translate et scale, jamais transform : les entrées en scène s'en
   servent déjà. */
.rt-fl{position:absolute;top:50%;translate:0 -50%;z-index:3;
  width:44px;height:44px;border-radius:var(--r-s);display:grid;place-items:center;
  background:color-mix(in srgb,var(--encre) 84%,transparent);
  border:1px solid var(--blanc-16);color:var(--blanc);
  font-family:var(--dis);font-size:22px;line-height:1;cursor:pointer;
  transition:background .2s ease,border-color .2s ease,opacity .2s ease,scale .12s ease}
.rt-fl:hover{background:var(--encre);border-color:var(--blanc-40)}
.rt-fl:active{scale:.94}
.rt-fl:disabled{opacity:.26;cursor:default}
.rt-prev{left:calc(var(--pad)*-1 + 6px)}
.rt-next{right:calc(var(--pad)*-1 + 6px)}
@media(max-width:759px){
  .rt-fl{width:38px;height:38px;font-size:19px}
  .rt-prev{left:2px}
  .rt-next{right:2px}
}
.rt-pts{display:flex;gap:6px;justify-content:center;flex-wrap:wrap;margin:30px 0 18px}
.rt-pts button{display:flex;align-items:center;gap:6px;min-height:44px;
  padding:8px 12px;border:1px solid var(--blanc-16);border-radius:var(--r-s);
  background:transparent;color:var(--blanc-72);cursor:pointer;
  font-family:var(--sans);font-size:10px;font-weight:600;letter-spacing:.05em;
  transition:border-color .22s ease,color .22s ease,background .22s ease}
/* Le chiffre de la pastille est en rouille, comme l'ordinal de la carte
   qu'elle désigne : même rôle, même couleur. Son carré suit, par currentColor. */
.rt-pts button b{display:grid;place-items:center;width:19px;height:19px;flex:none;
  border:1px solid currentColor;border-radius:var(--r-s);font-size:9.5px;letter-spacing:0;
  color:var(--brique-c)}
.rt-pts button[aria-selected="true"]{border-color:var(--or-c);color:var(--blanc);
  background:var(--encre-h)}
@media(max-width:389px){.rt-pts button{padding:8px 9px;font-size:9.5px;gap:5px}}

/* ═══ LA CONCLUSION ═══════════════════════════════════════════════════
   Le seul appel à l'action du milieu de page : il n'a ni fond ni cadre,
   il tient par le mouvement. Les deux phrases se rejoignent depuis les
   deux bords, le bouton tombe du haut et se pose. C'est le seul endroit
   du site où une entrée est mise en scène pour elle-même.

   Le mouvement passe par `translate` et non par `transform` : la règle
   générique d'entrée occupe déjà `transform` avec une montée de dix-huit
   pixels, et les deux se composeraient en diagonale. */
/* Les deux phrases partent de 56 px hors cadre : sans cette coupe, elles
   élargissent la page et une barre horizontale apparaît le temps de la scène.
   `clip` et non `hidden` : `hidden` créerait un conteneur de défilement.
   Même piège qu'avec les cartes du hero. */
.conc{background:var(--blanc);overflow-x:clip;overflow-clip-margin:24px}
.conc-c{max-width:860px;margin:0 auto;text-align:center}
.conc .rt-somme{margin:0;font-size:var(--t2);font-weight:600;line-height:1.2;
  letter-spacing:-.022em;color:var(--encre)}
.conc .rt-somme span{display:block}
.conc-b{display:block;margin-top:var(--e3)}
.conc .rt-note{margin-top:16px;font-size:12px;line-height:1.55;color:var(--encre-62)}

/* Les états de départ. La montée générique est annulée : chaque pièce a
   le sien. */
.conc-c.ent-a .conc-a{transform:none}
.conc-c.ent-a .conc-a:not(.vue){opacity:0}
.conc-c.ent-a .conc-g:not(.vue){translate:-56px 0}
.conc-c.ent-a .conc-d:not(.vue){translate:56px 0}
.conc-c.ent-a .conc-b:not(.vue){translate:0 -54px}
.conc-c.ent-a .conc-n:not(.vue){translate:0 12px}
.conc-a{transition:opacity .42s ease var(--d,0ms),translate .52s cubic-bezier(.2,.86,.3,1.04) var(--d,0ms)}
/* Le bouton tombe : la courbe accélère puis se pose, avec un très léger
   rebond. C'est ce qui fait la pièce plutôt que le fondu. */
.conc-b{transition:opacity .3s ease var(--d,0ms),translate .5s cubic-bezier(.34,1.32,.5,1) var(--d,0ms)}

@media(max-width:759px){.conc .rt-somme{font-size:var(--t3)}}
@media(prefers-reduced-motion:reduce){
  .conc-c.ent-a .conc-a:not(.vue){opacity:1;translate:none}
}

/* ═══ LA SIGNATURE ET LE CRÉDIT (25 août 2026) ═══════════════════════════
   L'auteur des articles en fin de chaque article, discret ; le crédit du
   site en dernière ligne du pied, avec une demande courte qui se déplie. */
.art-sign{margin-top:22px;font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--encre-62)}
.art-sign span{display:block;margin-top:3px;font-weight:600;color:var(--brique)}
.kll{margin-top:34px;padding-top:16px;border-top:1px solid var(--blanc-12)}
.kll-l{font-size:11.5px;letter-spacing:.04em;color:var(--blanc-40)}

.kll-b{all:unset;cursor:pointer;color:var(--blanc-62);text-decoration:underline;text-underline-offset:3px}
.kll-b:hover,.kll-b[aria-expanded="true"]{color:var(--blanc)}
.kll-f{margin-top:14px;max-width:520px;display:grid;gap:10px}
.kll-f[hidden]{display:none}
.kll-t{font-size:13px;line-height:1.55;color:var(--blanc-62)}
.kll-f label{display:grid;gap:4px;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--blanc-62)}
.kll-f input,.kll-f select{font:inherit;font-size:14px;padding:10px 12px;background:var(--blanc);color:var(--encre);border:1px solid var(--encre-14);border-radius:var(--r-s)}
.kll-go{justify-self:start;padding:12px 18px}
.kll-n{font-size:12.5px;color:var(--blanc-72)}

/* ═══ ACCESSIBILITÉ (audit du 25 août 2026) ════════════════════════════════
   Le lien d'évitement, invisible jusqu'au focus clavier ; et 44 px au doigt
   pour les commandes de la rangée d'article et du logo. */
.skip{position:absolute;left:12px;top:-60px;z-index:100;padding:10px 14px;background:var(--encre);color:var(--blanc);
  font-size:13px;font-weight:600;border-radius:var(--r-s);transition:top .15s ease}
.skip:focus{top:12px;outline:2px solid var(--or);outline-offset:2px}
@media(hover:none){
  .lr-b,.pgr,.fav,.art-sel-i,.art-chip,.lg-box,.haut{min-height:44px}
  .fav{min-width:44px}
}

/* ═══ LA FAQ D'ARTICLE (25 août 2026) ═══════════════════════════════════════
   Une carte comme les autres ; chaque question se déplie, la première est
   ouverte. Pas de rayon, pas d'ombre : le trait de la maison. */
.art-faq .faq-i{border-top:1px solid var(--encre-14);padding:12px 0}
.art-faq .faq-i:last-child{border-bottom:1px solid var(--encre-14)}
.art-faq summary{cursor:pointer;font-family:var(--dis);font-size:17px;font-weight:500;color:var(--encre);list-style:none;display:flex;justify-content:space-between;gap:16px}
.art-faq summary::after{content:"+";color:var(--brique);font-weight:700;flex:none}
.art-faq details[open] summary::after{content:"–"}
.art-faq .faq-r{padding:8px 0 4px;font-size:15px;line-height:1.6;color:var(--encre-72)}

/* ═══ GABARIT D'ARTICLE v2 (proposition du 26 août 2026) ════════════════════
   Le rendu de la landing, appliqué à l'article : une colonne aérée, des
   cartes qui entrent en scène, les cartes marquées en bande sombre, les
   chiffres en gros, la réponse visible d'emblée. Actif par article
   (« gabarit »: « v2 ») tant que Kévin n'a pas fixé le rendu. */
.art-v2 .art-bl{column-count:1;padding:clamp(28px,4vw,48px);margin-block:0 clamp(36px,5vw,64px)}
.art-v2 .art-bl p:not(.lab){max-width:68ch;font-size:17px;line-height:1.7}
/* les titres de carte gardent le système (t3) : l'air vient de l'espace, pas de la taille */
.art-v2 .art-bl h2,.art-v2 .art-bl h3{margin:8px 0 22px;column-span:all}
.art-v2 .art-bl h2 em,.art-v2 .art-bl h3 em{font-style:normal;color:var(--brique)}
/* La carte sombre reste DANS la colonne, comme les autres cartes (26 août
   2026, Kévin : « les blocs noirs en mode pilule, le regard s'étale trop »). */
/* Le fond passe par --nuit, pas par --encre : la carte redéfinit --encre
   pour son contenu, et se serait repeinte elle-même en blanc (mesuré le
   26 août 2026 : texte blanc sur fond devenu blanc). */
.art-v2 .art-bl.art-bl-on{background:var(--nuit);color:var(--blanc);border-color:var(--nuit);border-radius:0}
.art-v2 .art-bl.art-bl-on h2,.art-v2 .art-bl.art-bl-on h3,.art-v2 .art-bl.art-bl-on p:not(.lab){color:var(--blanc)}
.art-v2 .art-bl.art-bl-on{--lab-c:var(--or-c)}
.art-v2 .art-bl.art-bl-on .art-src{color:var(--blanc-62);border-color:var(--blanc-12)}
.art-v2 .art-bl.art-bl-on li{background:color-mix(in srgb,var(--blanc) 8%,transparent);border-color:var(--blanc-12);color:var(--blanc)}
.art-v2 .art-bl.art-bl-on a{color:var(--or-c)}
.art-v2 .art-bl.art-bl-on .btn-d{background:var(--blanc);color:var(--encre)}
.art-v2 .art-rep{display:none}   /* en v2, la réponse vit dans « en bref », pas deux fois */
.art-bref{margin:26px 0 8px;padding:22px 26px;background:color-mix(in srgb,var(--creme) 55%,var(--blanc));border-left:3px solid var(--or)}
.art-bref .lab{margin-bottom:8px}
.art-bref p:not(.lab){font-family:var(--dis);font-size:var(--t3);line-height:1.45;max-width:60ch}
.art-kpi{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;margin:8px 0 26px;column-span:all}
.kpi{padding:18px 20px;border:1px solid var(--encre-14);background:var(--blanc)}
.art-bl.art-bl-on .kpi{background:color-mix(in srgb,var(--blanc) 8%,transparent);border-color:var(--blanc-12)}
.kpi b{display:block;font-family:var(--dis);font-size:var(--t2);font-weight:500;line-height:1;color:var(--brique)}
.art-bl.art-bl-on .kpi b{color:var(--or-c)}
.kpi i{display:block;margin-top:8px;font-style:normal;font-size:13px;color:var(--encre)}
.art-bl.art-bl-on .kpi i{color:var(--blanc)}
.kpi span{display:block;margin-top:4px;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--encre-72)}
.art-bl.art-bl-on .kpi span{color:var(--blanc-62)}
.art-v2 .art-cit{font-family:var(--dis);font-size:var(--t3);line-height:1.4;color:var(--brique);border-left-width:3px;padding-left:24px;margin:30px 0}
/* l'entrée en scène des cartes, comme sur la landing */
.art-v2 .art-bl.ent{opacity:0;translate:0 18px;transition:opacity .55s ease,translate .55s ease}
.art-v2 .art-bl.ent.vue{opacity:1;translate:0 0}
@media(prefers-reduced-motion:reduce){.art-v2 .art-bl.ent{opacity:1;translate:none;transition:none}}

/* ═══ v2 : LES SYSTÈMES DE LA LANDING DANS L'ARTICLE (26 août 2026) ═══════
   Les gros chiffres sont les « blb » de l'accueil, tels quels ; ici en
   rangée de deux à quatre, dépliés au clic. Les pastilles et les
   dépliants entrent latéralement, en alternance, sous .ent-a. */
.art-blbs{margin:6px 0 24px;column-span:all;grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
/* ═══ DANS UNE CARTE SOMBRE, TOUT S'ÉCLAIRCIT (26 août 2026, Kévin : « noir
   sur noir, illisible ; vérifie pourquoi le code a naturellement implanté
   ça »). CAUSE : chaque composant écrit `var(--encre)` en dur, et la carte
   sombre ne redéfinissait pas le jeton — elle ne repeignait que ce que
   j'avais pensé à citer. RÉPONSE SYSTÉMIQUE : la carte sombre redéfinit les
   jetons d'encre pour tout ce qu'elle contient ; un composant nouveau est
   lisible sans qu'on y pense. */
.art-bl.art-bl-on{--encre:var(--blanc);--encre-62:var(--blanc-72);--encre-72:var(--blanc-72);
  --encre-30:var(--blanc-40);--encre-14:var(--blanc-12);--encre-h:var(--blanc);--lab-c:var(--or-c);--brique:var(--or-c)}
.art-bl.art-bl-on .blb{background:color-mix(in srgb,var(--blanc) 8%,transparent);border-color:var(--blanc-12);color:var(--blanc)}
.art-bl.art-bl-on .blb summary b,.art-bl.art-bl-on .kpi b{color:var(--or-c)}
.art-bl.art-bl-on .blb summary i,.art-bl.art-bl-on .blb-c,.art-bl.art-bl-on .blb-c p{color:var(--blanc)}
.art-bl.art-bl-on .art-statut{color:var(--or-c)}
.art-bl.art-bl-on .blb-p::before,.art-bl.art-bl-on .blb-p::after{background:var(--or-c)}
.art-bl.art-bl-on .btn-l{border-color:var(--blanc-40);color:var(--blanc)}
.art-depli{margin:8px 0 18px;column-span:all}
.art-depli .faq-i{border-top:1px solid var(--encre-14);padding:12px 0}
.art-depli .faq-i:last-child{border-bottom:1px solid var(--encre-14)}
.art-depli summary{cursor:pointer;font-family:var(--dis);font-size:17px;font-weight:500;list-style:none;display:flex;justify-content:space-between;gap:16px}
.art-depli summary::after{content:"+";color:var(--brique);font-weight:700;flex:none}
.art-depli details[open] summary::after{content:"–"}
.art-depli .faq-r{padding:8px 0 4px;font-size:15px;line-height:1.6;color:var(--encre-72)}
.art-v2 .art-bl li.ent{transition:opacity .45s ease var(--d,0ms),transform .45s ease var(--d,0ms)}

/* ═══ v2 AU TÉLÉPHONE (26 août 2026 : « parfait sur tél comme ordi ») ══════
   La bande sombre pleine largeur se calcule sur la largeur de la fenêtre :
   overflow-x:clip sur .art l'empêche de créer un débordement horizontal.
   Les gros chiffres passent à deux par ligne, la réponse en bref garde
   son corps de lecture, les cartes retrouvent la marge du téléphone. */
@media(max-width:759px){
  .art-v2 .art-bl{padding:22px 18px;margin-block:0 28px}
  .art-blbs{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .art-blbs .blb summary{padding:14px 14px 13px}
  .art-bref{padding:16px 16px;margin:18px 0 6px}
  .art-v2 .art-bl p:not(.lab){font-size:16px;line-height:1.65}
}

/* ═══ v2 : LA COLONNE DE LECTURE (26 août 2026) ════════════════════════════
   Le regard ne doit pas traverser l'écran : la colonne d'article fait
   960 px, centrée ; la prose (chapô, intro, cartes, listes, réponse en
   bref) tient en 68 caractères ; les médias (duos, bandes, rails, frises)
   gardent la largeur de la colonne. Plus d'air entre les cartes. */
.art-v2 .art-c,.art-v2 .art-top,.art-v2 .art-h,.art-v2 .art-fin{max-width:960px;margin-inline:auto}
.art-v2 .art-c > p,.art-v2 .art-h p:not(.lab),.art-v2 .art-cha,.art-v2 .art-cha p{max-width:68ch}
.art-v2 .art-bl ul{max-width:68ch}
.art-v2 .art-bref{max-width:none}
.art-v2 .art-bl{margin-block:0 clamp(44px,6vw,72px)}
/* une carte qui suit de la prose ou une ligne de sources respire avant d'ouvrir */
.art-v2 .art-src+.art-bl,.art-v2 p+.art-bl,.art-v2 .art-c > .art-bl:first-child{margin-top:36px}

/* Dépliants et FAQ DANS une carte sombre : texte blanc, filets clairs, plus
   en or (26 août 2026 : un dépliant ouvert restait invisible, encre sur encre). */
.art-bl.art-bl-on .art-depli summary,.art-bl.art-bl-on .art-faq summary{color:var(--blanc)}
.art-bl.art-bl-on .art-depli .faq-r,.art-bl.art-bl-on .art-faq .faq-r{color:var(--blanc-72)}
.art-bl.art-bl-on .art-depli .faq-i,.art-bl.art-bl-on .art-faq .faq-i{border-color:var(--blanc-12)}
.art-bl.art-bl-on .art-depli summary::after,.art-bl.art-bl-on .art-faq summary::after{color:var(--or-c)}

/* ═══ LA BIBLIOTHÈQUE DES OPÉRATIONS (26 août 2026) ═════════════════════════
   Le modèle de la bibliothèque des articles, version opérations : une carte
   par opération, le visuel avant/après avec son statut en pastille, les
   quatre chiffres en blb dépliables, le résumé, le lien. */
.op-c{display:grid;grid-template-columns:1fr;gap:18px 32px;padding:28px 0;border-top:1px solid var(--encre-14);align-items:start}
@media(min-width:760px){.op-c{grid-template-columns:minmax(0,1fr) minmax(0,1.2fr)}}
.op-v{position:relative;display:block;background:var(--encre);overflow:hidden}
.op-v img{display:block;width:100%;height:auto;aspect-ratio:1600/620;object-fit:cover}
.op-st{position:absolute;left:12px;bottom:12px;padding:6px 10px;font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;background:var(--encre);color:var(--blanc)}
.op-st.op-ton-brique{background:var(--brique)}
.op-st.op-ton-or{background:var(--or);color:var(--encre)}
.op-st.op-ton-gris{background:var(--encre-62)}
.op-synth{max-width:68ch;margin:14px 0 0;color:var(--encre-62);line-height:1.6}
.op-vide{color:var(--encre-62)}
/* LE VISUEL DU BIEN, SUR SA PROPRE PAGE (31 août 2026, Kévin : « chaque
   maison doit avoir son avant/après »). La page d'opération montrait des
   photos d'AUTRES opérations, jamais celle dont elle parle. */
.op-duo{margin:calc(var(--air) * .62) 0 0}
.op-note{max-width:60ch;margin-top:8px;padding-left:12px;border-left:2px solid var(--or);font-size:14px;line-height:1.55;color:var(--encre-62)}
.op-t h3{font-family:var(--dis);font-weight:500;margin:6px 0 14px}
.op-t h3 a{text-decoration:none;color:var(--encre)}
.op-t h3 em{font-style:normal;color:var(--brique)}
.op-t .art-blbs{margin:0 0 16px}
.op-r{max-width:60ch;color:var(--encre-72);line-height:1.6}
.op-m{margin-top:10px;font-size:13px;color:var(--encre-72)}
.op-m a{color:var(--brique);font-weight:600}

/* ═══ LES BIBLIOTHÈQUES VIVANTES (26 août 2026) ═══════════════════════════
   Même scène que les articles. Les cartes mises en avant entrent plus
   amples (léger zoom) et leur étiquette respire trois fois à l'arrivée :
   l'œil va d'abord à ce qui est mis en avant. */
.ent-a .bib-v.ent:not(.vue){transform:translateY(26px) scale(.965)}
.ent-a .bib-v.ent.lat-g:not(.vue){transform:translateX(-36px) scale(.965)}
.ent-a .bib-v.ent.lat-d:not(.vue){transform:translateX(36px) scale(.965)}
.ent-a .bib-v.ent,.ent-a .bib-i.ent,.ent-a .hub-c.ent,.ent-a .op-c.ent{transition:opacity .55s ease var(--d,0ms),transform .6s cubic-bezier(.2,.86,.3,1.04) var(--d,0ms)}
.bib-v.vue .bib-tag{animation:souffle 2.2s ease-in-out .4s 3}
@keyframes souffle{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}
@media(prefers-reduced-motion:reduce){.bib-v.vue .bib-tag{animation:none}}

/* ═══ LE SÉLECTEUR EN NUMÉROS (26 août 2026) ════════════════════════════════
   ‹ 08 · 09 · 10 › : les voisins en lien, le courant en brique. */
/* ═══ LA BARRE FIXE DE L'ARTICLE (26 août 2026) ════════════════════════════
   Elle prend le relais de la rangée complète quand celle-ci sort de l'écran :
   les trois numéros, le nom de l'article courant toujours lisible, le cœur et
   le partage. Au survol d'un numéro, sur ordinateur, le nom du voisin. */
.art-fix{position:fixed;left:0;right:0;top:var(--barre,64px);z-index:40;
  background:color-mix(in srgb,var(--blanc) 92%,transparent);backdrop-filter:blur(8px);
  border-bottom:1px solid var(--encre-14);opacity:0;translate:0 -8px;pointer-events:none;
  transition:opacity .25s ease,translate .25s ease}
.art-fix[hidden]{display:none}
.art-fix.on{opacity:1;translate:0 0;pointer-events:auto}
/* La barre suit les marges de la page : ses numéros s'alignent sur le texte. */
.art-fix-in{display:flex;align-items:center;gap:14px;padding:8px clamp(16px,4vw,40px);min-height:44px;max-width:var(--hold);margin-inline:auto}
.art-fix-nav{display:flex;align-items:center;gap:6px;flex:none}
.art-fix-n,.art-fix-on{position:relative;display:inline-flex;align-items:center;gap:5px;min-width:44px;min-height:34px;
  justify-content:center;padding:0 10px;font-size:13px;font-weight:600;font-variant-numeric:tabular-nums;
  border:1px solid var(--encre-14);color:var(--encre);text-decoration:none;background:var(--blanc)}
.art-fix-n:hover{border-color:var(--brique);color:var(--brique)}
.art-fix-on{border-color:var(--brique);color:var(--brique)}
/* L'info-bulle s'aligne sur le bord gauche du numéro : centrée, celle du
   premier sortait de l'écran (mesuré le 26 août 2026). */
.art-fix-n em{position:absolute;top:calc(100% + 8px);left:0;max-width:min(60vw,320px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  padding:7px 10px;font-size:12px;font-style:normal;font-weight:500;background:var(--encre);color:var(--blanc);
  opacity:0;pointer-events:none;transition:opacity .18s ease}
@media(hover:hover){.art-fix-n:hover em,.art-fix-n:focus-visible em{opacity:1}}
@media(hover:none){.art-fix-n em{display:none}}
.art-fix-t{flex:1;min-width:0;font-family:var(--dis);font-size:15px;font-weight:500;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.art-fix-a{display:flex;gap:6px;flex:none}
.art-fix-b{all:unset;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;
  width:36px;height:36px;border:1px solid var(--encre-14);color:var(--encre);background:var(--blanc)}
.art-fix-b:hover{border-color:var(--brique);color:var(--brique)}
.art-fix-b[aria-pressed="true"] svg{fill:var(--brique);color:var(--brique)}
@media(max-width:759px){.art-fix-t{font-size:13.5px}.art-fix-in{gap:10px}}
.pgr svg{display:block}
.art-sign-d{font-weight:400;color:var(--encre-62)}
.art-blbs-apres{margin-top:16px}
@media(hover:hover){.art-depli details:hover summary{color:var(--brique)}}

/* ═══ ALLER À UN ARTICLE, ALLER À UN THÈME (26 août 2026) ═══════════════════
   Deux listes natives en tête de la bibliothèque : au doigt, c'est le
   sélecteur du téléphone qui s'ouvre, le geste le plus court pour retrouver
   l'article 03 ou le thème « Fiscalité ». */
.bib-go{display:grid;gap:12px;margin:0 0 22px}
@media(min-width:680px){.bib-go{grid-template-columns:1fr 1fr;gap:18px}}
.bib-go-c{display:grid;gap:6px}
.bib-go-c>span{font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--brique)}
.bib-go-s{font:inherit;font-size:15px;line-height:1.2;padding:13px 40px 13px 14px;min-height:46px;width:100%;
  background-color:var(--blanc);color:var(--encre);border:1px solid var(--encre-30);border-radius:0;
  -webkit-appearance:none;appearance:none;
  background-image:linear-gradient(45deg,transparent 49%,currentColor 50%),linear-gradient(-45deg,transparent 49%,currentColor 50%);
  background-size:6px 6px;background-position:right 20px center,right 14px center;background-repeat:no-repeat}
.bib-go-s:hover,.bib-go-s:focus-visible{border-color:var(--brique)}

/* ═══ LES TROIS PORTES DE BUDGET (26 août 2026) ═══════════════════════════
   Sur chaque article : le lecteur se désigne lui-même. La porte haute est
   marquée d'or, sans crier — c'est la discrétion qu'attend ce niveau. */
/* LA BANDE DES PORTES (v486) : LE bloc qui doit se voir. La nuit au milieu
   du corps clair — aucun autre bloc d'article ne l'a — pleine largeur de la
   colonne, et l'or garde son seul rôle : marquer la porte haute. */
.art-portes{margin:52px 0 16px;padding:30px 26px 30px;background:var(--nuit);color:var(--blanc)}
.lab-nuit{color:var(--blanc-72)}
.art-portes h3{font-family:var(--dis);font-weight:500;margin:6px 0 18px;color:var(--blanc)}
.art-p3{display:grid;gap:10px;grid-template-columns:1fr}
@media(min-width:760px){.art-p3{grid-template-columns:repeat(3,1fr)}}
.art-p1{display:block;padding:16px 18px;border:1px solid color-mix(in srgb,var(--blanc) 22%,transparent);background:var(--blanc);
  text-decoration:none;color:var(--encre);transition:border-color .2s ease,translate .2s ease}
.art-p1:hover{border-color:var(--brique);translate:0 -2px}
.art-p-n{margin:20px 0 10px;color:var(--blanc-72);font-size:15px}
.art-p-cta{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin:0}
.art-p-cta span{font-size:13px;color:var(--blanc-72);max-width:34ch;line-height:1.5}
.btn-c{background:var(--blanc);color:var(--nuit);border:1px solid var(--blanc)}
.btn-c:hover{background:var(--brique);border-color:var(--brique);color:var(--blanc)}

.art-p1 b{display:block;font-family:var(--dis);font-size:17px;font-weight:500;margin-bottom:5px}
.art-p1 small{display:block;font-size:12.5px;line-height:1.5;color:var(--encre-h)}
.art-p-haut{border-color:var(--or)}
.art-p-haut b{color:var(--brique)}


/* ═══ QUI PARLE (26 août 2026) ═════════════════════════════════════════════
   Pour le lecteur froid : deux lignes, discrètes, sous la réponse en bref. */
.art-qui{margin:18px 0 6px;padding:16px 20px;border-left:2px solid var(--encre-14);max-width:68ch}
.art-qui p{font-size:14px;line-height:1.6;color:var(--encre-h);margin:0}
.art-qui p+p{margin-top:8px}
.art-qui a{color:var(--brique);font-weight:600}

/* La suite du questionnaire : agenda sous 130 k€, fil direct au-dessus. */
.qz-suite{display:grid;gap:10px;justify-items:stretch;margin:18px 0 8px}
.qz-suite .qz-n{margin:2px 0 0}
.qz-suite .btn{width:auto}

/* ═══ LE CALENDRIER D'UNE OPÉRATION (31 août 2026) ══════════════════════════
   C'est lui qui montre que la boutique tourne : chaque étape porte sa date
   et son état, et l'étape en cours se voit d'un coup d'œil. */
.op-cal{list-style:none;margin:0;padding:0;display:grid;gap:0;max-width:68ch}
.op-e{display:grid;grid-template-columns:minmax(120px,auto) 1fr auto;gap:14px;align-items:baseline;
  padding:14px 0;border-top:1px solid var(--encre-14)}
.op-e b{font-size:12.5px;letter-spacing:.04em;text-transform:uppercase;color:var(--encre-h)}
.op-e span{font-size:15.5px;line-height:1.5}
.op-e i{font-style:normal;font-size:11px;letter-spacing:.08em;text-transform:uppercase;padding:3px 8px;border:1px solid currentColor;white-space:nowrap}
.op-e-fait i{color:var(--encre-h);opacity:.75}
.op-e-encours i{color:var(--brique);font-weight:700}
.op-e-encours span{font-weight:600}
.op-e-àvenir i,.op-e-avenir i{color:var(--encre-h);opacity:.55}
@media(max-width:759px){.op-e{grid-template-columns:1fr auto;gap:6px 12px}.op-e b{grid-column:1/-1}}

/* La fin du questionnaire se lit comme une suite, pas comme un second
   formulaire (31 août 2026). */
.qz-suiv{margin:10px 0 0;padding:12px 14px;background:var(--carte);border-left:3px solid var(--brique);
  font-size:15px;line-height:1.55}
.qz-secours[hidden]{display:none}
.qz-suite-t{margin:6px 0 2px;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--brique)}

/* ═══ LA VALIDATION SE VOIT (31 août 2026) ═════════════════════════════════
   Un accusé vert, une coche, et le geste suivant qui se désigne tout seul.
   Le vert ne sert qu'à ça sur tout le site : il garde son sens. */
/* L'accusé peut porter un bouton : il passe alors en colonne, sinon le texte
   se comprime en une colonne de quinze caractères (mesuré le 31 août 2026). */
.qz-ok:has(.btn){display:grid;grid-template-columns:22px 1fr}
.qz-ok:has(.btn) .btn{grid-column:1/-1;margin-top:8px;text-align:center}
.qz-ok{display:flex;gap:10px;align-items:flex-start;margin:10px 0 2px;padding:12px 14px;
  background:var(--vert-f);border-left:3px solid var(--vert);font-size:14px;line-height:1.55;color:var(--encre)}
.qz-ok-c{flex:none;width:22px;height:22px;display:grid;place-items:center;border-radius:0;
  background:var(--vert);color:var(--blanc);font-size:13px;font-weight:700;line-height:1}
.qz-appel{outline:2px solid var(--or);outline-offset:3px;animation:qzAppel 1.3s ease-in-out 2}
@keyframes qzAppel{0%,100%{outline-color:var(--or)}50%{outline-color:transparent}}

/* LE BATTEMENT (31 août 2026) : le dernier geste qui reste bat comme un
   cœur, doucement, tant qu'il n'est pas fait. Deux temps, comme un vrai
   battement, et jamais plus de 3 % d'amplitude : on attire l'œil, on
   n'agresse pas. */
.qz-coeur{animation:qzCoeur 1.9s ease-in-out infinite}
@keyframes qzCoeur{
  0%,100%{transform:scale(1)}
  14%{transform:scale(1.03)}
  28%{transform:scale(1)}
  42%{transform:scale(1.022)}
  56%{transform:scale(1)}
}

/* L'INTITULÉ D'ALERTE : le vert de l'accusé ne doit pas faire croire que
   tout est fini. Le rouge de la maison dit qu'il reste un geste. */
.qz-alerte{color:var(--brique);font-weight:700}
.qz-alerte::before{content:"● ";font-size:9px;vertical-align:middle}

/* LA QUESTION AU RETOUR : on ne devine pas si le créneau a été pris. */
.qz-question{display:grid;gap:8px;margin:10px 0 2px;padding:12px 14px;background:var(--carte);
  border-left:3px solid var(--brique);font-size:14.5px;line-height:1.5}
.qz-question .btn{justify-self:stretch;text-align:center}

/* LE VERROU : tant que le créneau n'est pas pris, le reste de la page se
   tait. La carte du questionnaire, elle, reste entière et cliquable. */
/* On éteint le POURTOUR — entête, pied, dock, barre du téléphone —, jamais
   la carte : la première version grisait tout, y compris ce qu'il fallait
   lire, et la page devenait illisible (mesuré le 31 août 2026). */
.qz-verrou .hd,.qz-verrou .pd,.qz-verrou .ft,.qz-verrou .dock,.qz-verrou .barre-tel{
  opacity:.3;pointer-events:none;filter:grayscale(1);transition:opacity .35s ease}
.qz-verrou .qz{position:relative;z-index:2}
@media(prefers-reduced-motion:reduce){.qz-coeur{animation:none;outline:2px solid var(--or);outline-offset:3px}}

/* Le bouton de secours porte sa mention de consentement : deux lignes, la
   seconde en petit, et il reste une cible confortable au doigt. */
.qz-secours{display:block;text-align:left;line-height:1.35;padding:14px 16px;height:auto;min-height:44px}
.qz-secours small{display:block;margin-top:6px;font-size:12px;font-weight:400;letter-spacing:0;
  text-transform:none;color:var(--encre-h);line-height:1.5}
.qz-secours[disabled]{opacity:.6;cursor:default}

/* La sortie : une fois le sujet clos, on rend la main au visiteur plutôt que
   de le laisser devant un écran fini (31 août 2026). */
.qz-sortie{display:grid;gap:10px;margin-top:18px;padding-top:18px;border-top:1px solid var(--encre-14)}
.qz-sortie .btn{text-align:center}
.qz-alerte[hidden],.qz-suite .qz-n[hidden],.qz-suite .btn[hidden]{display:none}

/* Le diagnostic, visible seulement avec ?diag=1 : il sert à nous, jamais au
   visiteur (31 août 2026). */
.qz-diag{margin:6px 0 0;font-family:ui-monospace,monospace;font-size:11.5px;color:var(--brique);
  word-break:break-word}

/* ── LE PROFIL (v480) ──────────────────────────────────────────────────── */
.pf-f{max-width:56ch}
.pf-l{display:block;font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--encre-62);margin-bottom:8px}
.pf-r{display:flex;gap:10px;flex-wrap:wrap}
.pf-r input{flex:1;min-width:240px;padding:13px 15px;font:inherit;font-size:16px;border:1px solid var(--encre-30);background:var(--carte);min-height:48px}
.pf-r input:focus-visible{outline:2px solid var(--or);outline-offset:1px}
.pf-n{margin-top:12px;font-size:13.5px;line-height:1.55;color:var(--encre-62);max-width:60ch}
.pf-lettre{margin:6px 0 18px}
.pf-case{display:flex;gap:12px;align-items:flex-start;font-size:15px;line-height:1.5;max-width:64ch;cursor:pointer}
.pf-case input{width:20px;height:20px;margin-top:2px;accent-color:var(--or);flex:none}
.pf-favs{list-style:none;margin:0 0 14px;padding:0;display:grid;gap:8px;max-width:64ch}
.pf-fav{display:flex;align-items:center;gap:12px;padding:12px 14px;border:1px solid var(--encre-14);background:var(--carte)}
.pf-fav a{flex:1;color:var(--encre);text-decoration:none}
.pf-fav a:hover{text-decoration:underline}
.pf-x{padding:8px 12px;min-height:36px;font:inherit;font-size:12.5px;background:transparent;border:1px solid var(--encre-14);color:var(--encre-62);cursor:pointer}
.pf-x:hover{border-color:var(--brique);color:var(--brique)}
.pf-vide{font-size:14.5px;color:var(--encre-62);max-width:60ch}
.pf-actions{display:flex;align-items:center;gap:14px;margin-top:6px}
.pf-etat{font-size:13.5px;color:var(--encre-62)}
.qz-retour{max-width:var(--larg);margin:0 auto 10px;padding:0 var(--marge)}
.qz-retour a{font-size:13.5px;color:var(--encre-h);text-decoration:none}
.qz-retour a:hover{color:var(--brique);text-decoration:underline}

/* ── LA VEILLE DE PUBLICATION (v487) ───────────────────────────────────── */
.veille-b{margin-left:auto;padding:2px 6px;font-size:17px;line-height:1;background:none;border:0;color:var(--encre-h);cursor:pointer}
.veille-b:hover{color:var(--brique)}
.veille-b.on{color:var(--or)}
.veille{margin:10px 0 4px;padding:16px 18px;border:1px solid var(--encre-14);background:var(--carte)}
.veille-t{margin:0 0 12px;font-weight:600}
.veille-l{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 12px}
.veille-l input{flex:1;min-width:200px;padding:12px 14px;font:inherit;font-size:16px;border:1px solid var(--encre-30);background:var(--blanc);min-height:46px}
.veille-l input:focus-visible{outline:2px solid var(--or);outline-offset:1px}
.veille-q{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center;font-size:14px;margin:0 0 8px;color:var(--encre-h)}
.veille-q label{display:inline-flex;align-items:center;gap:6px;cursor:pointer}
.veille-q input{accent-color:var(--or)}
.veille-n{margin:6px 0 0;font-size:13.5px;color:var(--encre-h)}
.veille-cta{margin:12px 0 0}

/* ── le 4e chemin : gros budget, WhatsApp direct (v490) ──
   LE VERT DU GESTE (v494, Kévin : « ça doit ressortir, c'est un point
   d'entrée important ») : le vert de la palette, jusqu'ici réservé aux
   blocs WhatsApp, devient la couleur de l'engagement direct. Bouton plein,
   texte encre (le vert est clair, le blanc n'y tiendrait pas). */
.p-wa400{display:inline-block;background:var(--wapp-vert);color:var(--encre);
  font-weight:600;text-decoration:none;padding:12px 20px;border-radius:var(--r);
  cursor:pointer;transition:filter .18s ease,translate .18s ease}
.p-wa400:hover{filter:brightness(1.05);translate:0 -1px}
.art-p-wa{margin:16px 0 0;text-align:center}
.lr-wa{display:block;margin-top:12px;font-size:14.5px;text-align:center}
.hd-mg .p-wa400{display:block;margin-top:6px;padding:10px 14px;text-align:center}
/* le CTA du questionnaire porte le même geste : liséré vert */
.art-p-cta .btn-c{border:2px solid var(--wapp-vert)}

/* ── la flèche de retour des pages seules (v491) ── */
.p-retour{display:block;max-width:var(--hold);margin:16px auto -8px;padding-inline:22px;
  font-size:14.5px;font-weight:600;text-decoration:none}
.p-retour:hover{text-decoration:underline;text-underline-offset:3px}

/* ── d'une opération à l'autre (v492) ── */
.op-nav{display:flex;flex-wrap:wrap;gap:10px 18px;justify-content:space-between;align-items:center;
  margin-top:34px;font-size:14.5px;font-weight:600}
.op-nav a{text-decoration:none}
.op-nav a:hover{text-decoration:underline;text-underline-offset:3px}
.op-nav-t{color:var(--brique)}

/* ── la question créneau gèle les autres portes (v506) ── */
.qz-gele{pointer-events:none;opacity:.35;transition:opacity .2s ease}