/* Ancres : la barre de navigation est sticky, une ancre nue passe dessous.
   Regression introduite le 03/08 en remontant #sim dans la carte de verre (il etait
   porte par une <section> dont le padding absorbait la barre).

   LA MARGE DOIT DEPASSER LA HAUTEUR DE LA BARRE AU REPOS, pas sa hauteur compactee :
   la barre est `sticky`, donc DANS LE FLUX. Quand elle se compacte au defilement elle
   rend ses 20px au document, qui remonte d'autant — le degagement ne change pas d'un
   pixel (mesure : -9px avant compactage comme apres). C'est donc la hauteur au repos
   qui commande, 105px au-dela de 760px de large et 80px en-deca (`.nav` passe de
   18px a 10px de padding a `max-width:760px`).
     Avec un plancher a 90px et 12vh, toute fenetre de moins de ~875px de haut arrivait
   sous la barre : -9px mesures a 1440x800, cas tres courant en portable. Le plancher
   passe donc au-dessus des 105px sur les larges, et reste a 90px en etroit ou la barre
   ne fait que 80px (y mettre 118px ferait perdre 38px d'ecran pour rien). */
[id]{scroll-margin-top:clamp(90px,12vh,120px)}
@media(min-width:761px){
  [id]{scroll-margin-top:clamp(118px,12vh,132px)}
}

/* ============================================================================
   AECONOMIA — Design system refonte (templates)
   Re-skin DA 29/07/2026 : tokens alignes sur le book de Dimitri
   (design/source-dimitri-2026-07-29/DA Aeconomia (book).dc.html).
   Mapping complet + ratios WCAG calcules : docs/RESKIN-DA-MAPPING.md.
   Perf : zero autoplay video, backdrop-filter dose, assets a porter en WebP.
   ========================================================================= */

/* ---------- TOKENS (source : book DA, section /couleurs) ---------- */
:root{
  --bg:#F7F7F5;        /* fond de page (book : toutes les pages, sans exception) */
  --white:#FFFFFF;     /* surfaces : cartes, panneaux poses sur le fond */
  --cream:#EDEDE8;     /* surface secondaire — gris "reserve photo" du book, choix a valider */
  --ob:#0A0A0B;        /* encre : texte, sections pleines, boutons primaires */
  /* Sections sombres = encre pleine (book : "L'encre marque les moments forts").
     Contrastes calcules : #fff 19,79:1 (AAA) · --lime 13,56:1 (AAA). */
  --ob-soft:#0A0A0B;
  --ob-soft-line:rgba(255,255,255,.14); /* filets sur encre (book : .14–.20) */
  --ob2:#55565A;       /* corps de texte (book : gris le plus fort apres l'encre) */
  /* Les tons sauge du kit Valentine n'existent pas dans le book : rabattus sur le
     gris corps #55565A (6,83:1 sur --bg). Choix a valider avec Dimitri. */
  --sage2:#55565A;
  --sage2-ink:#55565A;
  --lime:#ADE83C;      /* vert signal : pastilles, chiffres gagnes, surligneur, fleches.
                          JAMAIS en texte sur fond clair (2,7:1). */
  --lime-hover:#C2F057;/* seul vert vif au survol (book) */
  --ink-hover:#1E201E; /* encre au survol (book) */
  /* Legendes book #8E8E93 = 3,04:1 sur --bg -> echec AA texte normal. Regle repo :
     texte = gris book plus fonce (#55565A). #8E8E93/#A5A5AA restent reserves aux
     usages decoratifs. Ecart vs book documente dans RESKIN-DA-MAPPING.md. */
  --muted:#55565A;
  --line:rgba(10,10,11,.10); /* bordure fine (book : .09–.13) */
  --sky:'Instrument Sans',Helvetica,Arial,sans-serif;   /* titres/boutons : 600, jamais 700 */
  --body:'Instrument Sans',Helvetica,Arial,sans-serif;  /* courant : 400 */
  --mono:'JetBrains Mono',monospace;                    /* chiffres & labels : 400/500 + tabular-nums */
  --r-btn:14px;
  --r-card:22px;
  --r-frame:clamp(22px,2.2vw,32px);
  --pill:99px;         /* pilules (book §07 : 99px) */
  --wrap:1240px;
  --pad:clamp(1.4rem,5vw,4.5rem);
  /* RYTHME VERTICAL (session 6, 17/08/2026 — constat Bastien n°2 du 14/08).
     Mesure au rendu : l'espace entre deux sections valait ~208px (2 x --sec) quand la
     maquette validee (lp-courtier-orleans.html) en met 130 et le book §06 borne la
     respiration a « clamp(80px, 9cqw, 132px) ENTRE deux sections ». Dans le meme temps
     les titres etaient colles a leur contenu (14-18px releves contre 26-42px en
     maquette) : trop d'air entre les blocs, pas assez dedans. --sec est donc la
     DEMI-respiration : 2 x 65px = 130px au desktop, 2 x 40px = 80px en mobile,
     exactement la fourchette du book. Les gaps titre/label reprennent les variables
     de la maquette (--gap-lab, --gap-lead), en vw : sa stage fait 100 % de fenetre,
     1 cqw y vaut 1 vw. */
  --sec:clamp(2.5rem,4.5vw,4.05rem);
  --gap-lab:clamp(28px,3.2vw,42px);   /* label mono -> titre (book §06 « Label → titre ») */
  --gap-lead:clamp(18px,2vw,26px);    /* titre -> chapeau (maquette --gap-lead) */
  /* UNE SEULE courbe de mouvement (book §09). Tout ce qui bouge sur le site
     l'utilise : transitions, animations, reveals. */
  --ease:cubic-bezier(.16,.7,.3,1);
  /* Surligneur vert des titres « deux temps » (book §05 : 66 % de hauteur). */
  --mark:rgba(173,232,60,.6);
  --mark-ink:rgba(173,232,60,.5); /* meme surligneur pose sur encre */
  /* Cadence du bandeau : valeur RELEVEE dans la maquette de reference
     (design/proposition-bastien-2026-07-29/lp-courtier-orleans.html, `.ticker-track`
     -> `aecMarquee 60s`), elle-meme alignee sur « Home Aeconomia v2 (charte).dc.html ».
     Retour Dimitri du 30/07 point 1 : « trop rapide, le remettre a la meme frequence
     que la maquette du site ». Variable = un seul point de reglage. */
  --tick-dur:60s;
}

/* ---------- RESET / BASE ---------- */
*{margin:0;padding:0;box-sizing:border-box}
/* Le clip du <body> ne suffit pas : un enfant en position:fixed (le menu mobile
   `.mm`, cale par inset:0) se mesure sur le bloc conteneur initial, barre de
   defilement comprise, et rallonge le scrollWidth du <html> — 392px pour 390px
   de fenetre au controle du 03/08, soit un micro-glissement horizontal sur
   mobile. Meme raison qu'en dessous pour `clip` plutot que `hidden` : `hidden`
   ferait du <html> un conteneur de defilement et tuerait la nav sticky. */
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;overflow-x:hidden;overflow-x:clip}
body{font-family:var(--body);background:var(--bg);color:var(--ob2);line-height:1.6;
  /* clip (et non hidden) : hidden fait du <body> un conteneur de defilement,
     ce qui casse tout position:sticky descendant (cartes etapes, aside FAQ,
     carte coulisses). clip coupe le debordement sans creer ce conteneur. */
  overflow-x:hidden;overflow-x:clip;
  background-image:
    linear-gradient(rgba(10,10,11,.022) 1px,transparent 1px),
    linear-gradient(90deg,rgba(10,10,11,.022) 1px,transparent 1px);
  background-size:48px 48px;}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;border:0;background:none}
::selection{background:rgba(173,232,60,.55)}
h1,h2,h3,h4{font-family:var(--sky);color:var(--ob);line-height:1.06;letter-spacing:-1.4px;font-weight:600}
em{font-style:italic}
/* Accessibilite : lien d'evitement (le chrome pose 2 blocs avant le contenu). */
.skip{position:absolute;left:-9999px;top:0;z-index:2000;background:var(--ob);color:#fff;
  padding:12px 20px;border-radius:var(--pill)}
.skip:focus{left:12px;top:12px;color:#fff}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* Cible du lien d'evitement : le focus se pose sur <main>, sans dessiner un anneau
   autour de la page entiere (le repere visuel, c'est le saut lui-meme). */
[tabindex="-1"]:focus{outline:0}
main{display:block}

/* ============================================================================
   MOUVEMENT — kit d'animation partage (book §09, maquette lp-courtier-orleans.html)
   ----------------------------------------------------------------------------
   CE BLOC EST LE CONTRAT AVEC LES GABARITS. Les templates n'ecrivent JAMAIS de
   @keyframes ni de courbe : ils posent une classe ou un attribut de cette liste.

   Keyframes disponibles :
     aecIn      .85s  opacite + 22px, decalage .09s par index (jusqu'a 4)
     aecMask    1s    revelation de titre par clip-path (reserve H1/H2)
     aecMarkIn  1.05s surligneur vert qui se peint (retard .55s)
     aecPulse   2.8s  respiration d'une pastille (statut en direct, label de rubrique)
     aecHalo    3.4s  anneau vert autour du bouton — UN SEUL par ecran
     aecShine   5s    reflet qui traverse le bouton plein
     aecMarquee 60s   ruban defilant (ticker, logos)
     aecDrift   28s   derive de la trame verticale 122px du fond
     aecBreath  9s    halo vert qui respire (carte encre « moment fort »)

   Hooks de revelation (poses par assets/aeconomia.js) :
     [data-reveal]      -> aecIn   quand le bloc entre a l'ecran
     [data-mask]        -> aecMask idem, pour un titre
     [data-reveal="1..4"] / [data-mask="1..2"] -> decalage en cascade
     .aec-in            -> classe ajoutee par l'observateur, NE SE REJOUE JAMAIS
     .rv / .rv.in       -> ancien couple, conserve : tous les gabarits actuels s'en servent

   Le masquage initial n'existe QUE si le JS a pris la main (classe `js` posee en
   <head> par header.php). Sans JS, sans IntersectionObserver ou si le script de bas
   de page n'arrive jamais (garde-fou 3 s dans header.php), rien n'est masque : la
   page se rend d'un bloc au lieu de rester a opacity:0.
   ========================================================================= */
@keyframes aecMarquee{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
@keyframes aecPulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.3;transform:scale(.7)}}
@keyframes aecIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes aecMask{from{opacity:0;clip-path:inset(0 0 104% 0);transform:translateY(4px)}
  to{opacity:1;clip-path:inset(0 0 -12% 0);transform:none}}
@keyframes aecBreath{0%,100%{opacity:.4;transform:scale(.9)}50%{opacity:1;transform:scale(1.08)}}
@keyframes aecHalo{0%,100%{box-shadow:0 16px 34px -20px rgba(10,10,11,.95),0 0 0 0 rgba(173,232,60,.5)}
  55%{box-shadow:0 16px 34px -20px rgba(10,10,11,.95),0 0 0 9px rgba(173,232,60,0)}}
@keyframes aecShine{0%{transform:translateX(-130%) skewX(-14deg)}55%,100%{transform:translateX(320%) skewX(-14deg)}}
@keyframes aecMarkIn{from{background-size:0% 100%}to{background-size:100% 100%}}
@keyframes aecDrift{from{background-position-x:0}to{background-position-x:-122px}}

.js [data-reveal],.js [data-mask]{opacity:0}
[data-reveal].aec-in{animation:aecIn .85s var(--ease) forwards}
[data-mask].aec-in{animation:aecMask 1s var(--ease) forwards}
[data-reveal="1"].aec-in,[data-mask="1"].aec-in{animation-delay:.09s}
[data-reveal="2"].aec-in,[data-mask="2"].aec-in{animation-delay:.18s}
[data-reveal="3"].aec-in{animation-delay:.27s}
[data-reveal="4"].aec-in{animation-delay:.36s}

/* Fond de page anime (book §07) : halo blanc radial + trame verticale 122px qui derive.
   Ils vivent dans `.aec-stage`, pose par header.php EN PREMIER ENFANT DE <body> —
   c'est la `.stage` de la maquette. Poses plus bas (dans un heros), ils demarrent
   sous le bandeau de taux et la nav : ces bandes tombent alors sur un aplat sans
   lumiere, et comme le masque de la trame ouvre a 85 % des 0 %, les 12 lignes
   verticales apparaissent d'un coup avec une couture horizontale visible.
     `z-index:-1` : la scene se peint au-dessus du fond de page mais SOUS tout le
   contenu, y compris les elements non positionnes (le fil d'Ariane n'a ni
   `position` ni `z-index`, un z-index:0 lui serait passe par-dessus). Le bandeau
   (z-index 101) et la nav (1400) restent bien au-dessus, et comme ils sont en
   verre translucide la lumiere se voit a travers, exactement comme en maquette. */
.aec-stage{position:absolute;top:0;left:0;width:100%;height:820px;pointer-events:none;z-index:-1}
.aec-halo-bg{position:absolute;top:0;left:0;right:0;height:820px;pointer-events:none;z-index:0;
  background:radial-gradient(74% 62% at 50% -4%,#FFFFFF 0%,rgba(255,255,255,.55) 42%,rgba(255,255,255,0) 78%)}
.aec-drift{position:absolute;top:0;left:0;right:0;height:780px;pointer-events:none;z-index:0;
  background-image:repeating-linear-gradient(90deg,rgba(10,10,11,.05) 0 1px,transparent 1px 122px);
  animation:aecDrift 28s linear infinite;
  -webkit-mask-image:linear-gradient(to bottom,rgba(0,0,0,.85) 0%,rgba(0,0,0,.3) 48%,transparent 90%);
  mask-image:linear-gradient(to bottom,rgba(0,0,0,.85) 0%,rgba(0,0,0,.3) 48%,transparent 90%)}

/* Pastille verte : l'element le plus repete du site (book §02). Elle remplace TOUTE
   icone decorative. `.aec-dot` = la pastille nue, `.aec-dot.is-live` = elle respire
   (aecPulse), reserve aux labels de rubrique et aux statuts en direct. */
.aec-dot{width:7px;height:7px;border-radius:50%;background:var(--lime);display:block;flex:none}
.aec-dot.is-live{animation:aecPulse 2.8s ease-in-out infinite}

/* ---------- LAYOUT ---------- */
.wrap{max-width:var(--wrap);margin:0 auto;padding-left:var(--pad);padding-right:var(--pad)}
section{padding-top:var(--sec);padding-bottom:var(--sec);position:relative}
/* En-tete de section DA : label mono uppercase a pastille lime ronde.
   (Le book #87878C fait 3,33:1 sur fond clair -> #6E6E73, 4,73:1 AA calcule.) */
.eyebrow{display:inline-flex;align-items:center;gap:.55rem;font-family:var(--mono);
  font-size:.66rem;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:#6E6E73}
.eyebrow::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--lime);flex:none}
/* ---------- TITRE EN DEUX TEMPS (book §04 + pattern 5) ----------
   « Tout H1 et H2 se coupe en deux temps : 1re moitie encre, 2de #55565A +
   surligneur vert. » Retour Dimitri du 30/07 (article, point 7) : le surligneur
   doit aussi vivre sur les INTERTITRES, pas seulement sur le titre principal.

   CLASSE EXPOSEE AUX GABARITS : `.hl` sur le second segment.
     <h2 data-mask>Le taux, <span class="hl">c'est la moitie du sujet.</span></h2>
   Les <em> des gabarits existants restent des alias exacts de `.hl` : rien a
   reecrire dans les templates deja livres.

   ANIMATION : le surligneur se peint (aecMarkIn, 1,05s, retard 0,55s) au moment ou
   le titre entre a l'ecran, donc uniquement quand le titre (ou un ancetre) porte
   [data-mask] / [data-reveal] et recoit `.aec-in`. Partout ailleurs il est peint
   d'emblee — un H2 sans hook reste lisible, jamais a moitie surligne. */
.hl,h1 em,h2 em,.h2 em{font-family:var(--sky);font-style:normal;font-weight:600;color:var(--sage2);
  background-image:linear-gradient(transparent 66%,var(--mark) 66%);
  background-repeat:no-repeat;background-size:100% 100%;
  -webkit-box-decoration-break:clone;box-decoration-break:clone}
.js [data-mask] .hl,.js [data-reveal] .hl,.js [data-mask] em,.js [data-reveal] em{background-size:0% 100%}
.js [data-mask].aec-in .hl,.js [data-reveal].aec-in .hl,
.js [data-mask].aec-in em,.js [data-reveal].aec-in em{animation:aecMarkIn 1.05s var(--ease) .55s forwards}
/* Sur encre : le gris disparait, le blanc prend la main, le surligneur s'allege. */
.hero .hl,.pf .hl,.darkband .hl,.punchband .hl,.sec-dark .hl,
.hero h1 em,.pf h2 em,.darkband h2 em{color:#fff;background-image:linear-gradient(transparent 66%,var(--mark-ink) 66%)}
/* Surligneur STATIQUE, pour un segment de paragraphe ou un chiffre (jamais un titre). */
.mark{background-image:linear-gradient(transparent 66%,var(--mark) 66%);background-repeat:no-repeat;background-size:100% 100%}
/* Marge basse = cote « titre -> chapeau » de la maquette (26px au desktop). Elle
   FUSIONNE avec la marge haute du contenu qui suit (marges adjacentes : la plus
   grande gagne) : les paragraphes a margin-top 16-18px passent a 26px, ceux qui
   ont deja plus (FAQ a 32px) ne bougent pas. Les composants qui reglent leur
   propre titre (.lp-rates-l h2, .sim .h2) gardent leur override, plus specifique. */
.h2{font-size:clamp(2rem,4.2vw,3.2rem);letter-spacing:-1.6px;margin-bottom:var(--gap-lead)}
.lead{font-size:clamp(1rem,1.4vw,1.18rem);line-height:1.65;color:var(--ob2);max-width:56ch}
.muted{color:var(--muted)}

/* ---------- BOUTONS — les 3 niveaux du book (§08) ----------
   COTES EXACTES DU BOOK, appliquees ici une fois pour toutes les pages :
     Primaire   encre, pilule 99px, padding 17/28px (18/30 en heros), pastille verte
                a gauche, ombre 0 18px 38px -22px, reflet `aecShine`.
                UN SEUL PAR ECRAN VISIBLE.
     Secondaire contour rgba(10,10,11,.2), fond blanc a 60 %, MEME geometrie.
     Tertiaire  lien texte gras + fleche, pastille optionnelle, le gap passe de
                9 a 13px au survol (classes `.link-arrow` / `.rvlink`).
   Etats : survol translateY(-3px) + #1E201E · appui translateY(-1px) scale(.985)
   · transition .28s cubic-bezier(.16,.7,.3,1).
   Sur les surfaces ENCRE (hero, sim-out, darkband, pf, art-cta, aside-cta), le
   primaire s'inverse : fond lime + texte encre (13,56:1 AAA), pastille encre.
   Le vert plein reste reserve a ce cas et aux micro-badges, jamais a un grand
   bouton sur fond clair. */
.btn{position:relative;overflow:hidden;font-family:var(--sky);font-weight:600;font-size:16px;
  padding:17px 28px;border-radius:var(--pill);
  display:inline-flex;align-items:center;justify-content:center;gap:11px;white-space:nowrap;
  transition:transform .28s var(--ease),box-shadow .28s,background .28s,color .28s}
.btn i{font-style:normal;font-family:var(--mono);transition:transform .35s}
.btn:hover i{transform:translateX(4px)}
.btn:active{transform:translateY(-1px) scale(.985)}
/* Variantes de taille (book §08) : heros 18/30, compact 14/24, barre de nav 12/20.
   Le 18/30 est reserve au HEROS (« 18/30 en heros »), pas a toutes les rangees de
   boutons : `.hero-cta` sert aussi de rangee generique dans les bandes encre. */
.hero .btn,.btn-lg{padding:18px 30px}
/* Rangee de boutons neutre, a preferer a `.hero-cta` hors du heros. */
.btnrow{display:flex;flex-wrap:wrap;align-items:center;gap:13px}
.btn-sm{padding:14px 24px;font-size:14.5px;box-shadow:0 16px 32px -22px rgba(10,10,11,.9)}
.btn-nav{padding:12px 20px;font-size:14.5px;box-shadow:0 10px 24px -14px rgba(10,10,11,.9)}
.btn-primary{background:var(--ob);color:#fff;box-shadow:0 18px 38px -22px rgba(10,10,11,.9)}
.btn-primary::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--lime);flex:none}
.btn-primary i{color:var(--lime)}
/* REFLET `aecShine` (book §09, 3,6-5s) : bande claire qui traverse le bouton plein.
   Pose sur ::after parce que ::before porte deja la pastille verte du book. */
.btn-primary::after{content:"";position:absolute;top:0;left:0;width:26%;height:100%;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.3),transparent);
  animation:aecShine 5s ease-in-out infinite}
.btn-primary:hover{background:var(--ink-hover);transform:translateY(-3px);box-shadow:0 26px 46px -22px rgba(10,10,11,1)}
/* HALO `aecHalo` (book §09, 3,4s) — A POSER SUR UN SEUL BOUTON PAR ECRAN, celui qui
   porte la conversion (retour Dimitri 30/07 point 3 : le CTA du simulateur « merite
   une belle animation, c'est le meilleur moment pour capter le client »).
   Usage gabarit : <a class="btn btn-primary aec-halo" ...>. Deux `.aec-halo` visibles
   en meme temps = erreur de composition, pas un reglage. */
.aec-halo{animation:aecHalo 3.4s ease-in-out infinite}
.aec-halo::after{animation-duration:4.2s}
/* 27/08/2026 : `.simaccord` et `.simend` (les deux surfaces encre de la page
   /simulation-de-pret-immobilier/) rejoignent les quatre listes. Sans elles, un
   bouton primaire ENCRE serait pose sur un fond ENCRE. La maquette de Dimitri y
   met une pilule BLANCHE : on garde le lime du book §14, comme sur toutes les
   autres bandes encre du site (.hero, .darkband, .pf) — question posee. */
.hero .btn-primary,.darkband .btn-primary,.pf .btn-primary,
.art-cta .btn-primary,.aside-cta .btn-primary,.mcta .btn-primary,
.simaccord .btn-primary,.simend .btn-primary{
  background:var(--lime);color:var(--ob);box-shadow:0 14px 34px -18px rgba(10,10,11,.8)}
.hero .btn-primary::before,.darkband .btn-primary::before,.pf .btn-primary::before,
.art-cta .btn-primary::before,.aside-cta .btn-primary::before,.mcta .btn-primary::before,
.simaccord .btn-primary::before,.simend .btn-primary::before{background:var(--ob)}
.hero .btn-primary i,.darkband .btn-primary i,.pf .btn-primary i,
.art-cta .btn-primary i,.aside-cta .btn-primary i,.mcta .btn-primary i,
.simaccord .btn-primary i,.simend .btn-primary i{color:var(--ob)}
.hero .btn-primary:hover,.darkband .btn-primary:hover,.pf .btn-primary:hover,
.art-cta .btn-primary:hover,.aside-cta .btn-primary:hover,.mcta .btn-primary:hover,
.simaccord .btn-primary:hover,.simend .btn-primary:hover{background:var(--lime-hover)}
.btn-dark{position:relative;overflow:hidden;background:var(--ob-soft);color:#fff;border-radius:99px;padding:16px 28px;
  box-shadow:0 16px 38px rgba(10,10,11,.3)}
.btn-dark::before{content:"";position:absolute;inset:0;
  background:linear-gradient(115deg,transparent 35%,rgba(173,232,60,.55) 50%,transparent 65%);
  transform:translateX(-120%) skewX(-12deg);transition:transform .9s cubic-bezier(.22,1,.36,1)}
.btn-dark:hover::before{transform:translateX(120%) skewX(-12deg)}
.btn-dark:hover{background:var(--ink-hover);transform:translateY(-3px);box-shadow:0 22px 52px rgba(10,10,11,.42),0 0 0 3px rgba(173,232,60,.45)}
.btn-ghost{background:rgba(255,255,255,.12);color:#fff;border:1px solid rgba(255,255,255,.32);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.btn-ghost:hover{transform:translateY(-2px);background:rgba(255,255,255,.22)}
/* NIVEAU 2 — secondaire sur fond clair (book §08) : contour a 20 %, fond blanc a
   60 %, meme geometrie que le primaire. Jamais d'ombre au repos. */
.btn-outline{background:rgba(255,255,255,.6);color:var(--ob);border:1px solid rgba(10,10,11,.2)}
.btn-outline:hover{border-color:var(--ob);background:#fff;transform:translateY(-3px);
  box-shadow:0 20px 40px -26px rgba(10,10,11,.6)}
/* NIVEAU 3 — tertiaire (book §08) : lien texte gras + fleche, pastille optionnelle,
   « le gap passe de 9 a 13px au survol ». Pas de pilule, pas d'ombre, pas de fond.
   `.rvlink` (pattern 13, pastille obligatoire) en est la variante deja posee. */
.link-arrow{display:inline-flex;align-items:center;gap:9px;font-family:var(--sky);
  font-size:14.5px;font-weight:600;color:var(--ob);white-space:nowrap;transition:gap .2s var(--ease)}
.link-arrow:hover{gap:13px;color:var(--ob)}
.link-arrow i{font-style:normal;font-family:var(--mono)}
.sec-dark .link-arrow,.pf .link-arrow,.darkband .link-arrow,.punchband .link-arrow{color:#fff}

/* ---------- PILLS / CHIPS / DOT ---------- */
.pill{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--mono);font-size:.7rem;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ob);
  background:rgba(255,255,255,.5);border:1px solid rgba(255,255,255,.7);padding:7px 14px;border-radius:50px}
/* Variante REMPLIE lime de `.pill` — badge d'etat (le PRESELECTIONNE de la livraison
   Dimitri du 06/08/2026). Le `.pill` nu est blanc translucide : pose sur une carte
   blanche il disparait, il ne pouvait donc pas porter ce badge. Fond
   `rgba(173,232,60,.55)` repris tel quel de sa maquette Contact.dc.html.
   CONTRASTE CALCULE (jamais affirme) : encre #0A0A0B sur ce fond compose sur blanc
   (= #D2F294) donne 15,9:1 — AA et AAA. */
.pill-lime{background:rgba(173,232,60,.55);border-color:rgba(173,232,60,.7);color:var(--ob)}
/* Rangee de zones en pilules (page contact, maquette Contact 06/08 §Zones) :
   pilules-LIENS vers les pages villes (pastille lime), pilule simple grise pour
   une zone sans page. Taille de texte relevee (14,5px) : ce sont des liens de
   navigation, pas des labels mono. */
.ct-zones{display:flex;gap:10px;flex-wrap:wrap;margin-top:1.6rem}
.ct-zone{font-family:var(--sky);font-size:14.5px;font-weight:600;letter-spacing:0;
  text-transform:none;padding:11px 20px;border:1px solid rgba(10,10,11,.14);
  background:var(--white);transition:border-color .25s var(--ease),transform .25s var(--ease)}
.ct-zone .aec-dot{width:6px;height:6px}
a.ct-zone:hover{border-color:var(--ob);transform:translateY(-2px)}
.ct-zone.is-mut{color:var(--ob2);background:rgba(255,255,255,.5)}
@media(pointer:coarse){.ct-zone{min-height:44px}}
.chip{display:inline-flex;align-items:center;gap:.4rem;font-size:.82rem;font-weight:600;color:var(--ob2);
  background:rgba(255,255,255,.72);border:1px solid rgba(255,255,255,.85);padding:7px 13px;border-radius:50px}
.chip b{color:var(--ob);font-weight:600}
.dot{width:9px;height:9px;border-radius:50%;background:var(--lime);
  box-shadow:0 0 0 0 rgba(173,232,60,.6);animation:pulse 2.2s ease-out infinite;flex:none}
/* DEPRECIE — anneau qui s'ecarte, anterieur au book. Conserve parce que `.dot`
   est deja pose dans des gabarits livres (badge « taux negocies » de la home).
   POUR UN NOUVEAU BLOC : utiliser `.aec-dot.is-live` (aecPulse, book §09). */
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(173,232,60,.55)}70%{box-shadow:0 0 0 9px rgba(173,232,60,0)}100%{box-shadow:0 0 0 0 rgba(173,232,60,0)}}
/* Etoiles d'avis (DA) : encre sur fond clair (pattern « 5,0 ★★★★★ »).
   Sur fond encre, les contextes sombres les repassent en lime. */
.stars{color:var(--ob);letter-spacing:1px;font-size:.9rem}

/* ---------- CARTES (DA lot 2 : blanches, grand arrondi, bord fin encre) ---------- */
.card{position:relative;border-radius:var(--r-card);
  background:var(--white);
  border:1px solid rgba(10,10,11,.09);
  box-shadow:0 30px 70px -40px rgba(10,10,11,.35)}
.card-solid{background:var(--cream);border-radius:var(--r-card);border:1px solid rgba(10,10,11,.05);
  box-shadow:0 22px 46px rgba(10,10,11,.1),inset 0 1px 0 rgba(255,255,255,.6)}

/* ---------- NAV — BARRE EN VERRE (retour Dimitri du 30/07, point 2) ----------
   « Il manque un effet glassmorphism sur la barre flottante. Verifie sur mobile :
     le texte de la page passe sous la barre et reste lisible a travers. »

   DEUX PLANS DE VERRE, et c'est le second qui repond a la remarque mobile :

   1. LA PILULE `.nav-inner`, cotes du book §07 : backdrop-filter blur(26px)
      saturate(1.9), fond rgba(247,247,245,.5) au repos -> .82 une fois defile,
      bord rgba(255,255,255,.6) -> .95, + inset 0 1px 0 rgba(255,255,255,.95).
      Elle ne couvre que `--wrap` moins 28px de marge.
   2. LE VOILE `.nav::before`, pleine largeur, sous la pilule. Sans lui, le contenu
      de la page continue de passer NET dans les bandes laterales et dans la bande
      haute que la pilule ne couvre pas : a 390px la pilule mesure 362px, il reste
      28px de fuite laterale (7 % de l'ecran) plus la bande du dessus. C'est
      exactement ce que Dimitri voit en mobile. Le voile s'allume au defilement
      (opacite 0 -> 1) : au repos, la pilule detachee de sa DA reste intacte.
      `z-index:-1` : `.nav` est un contexte d'empilement (sticky + z-index), le
      pseudo se peint donc SOUS la pilule mais AU-DESSUS de la page.

   Le seuil de bascule est a 8px de defilement (JS), pas 40 : a 40px la barre
   restait au verre « repos » pile au moment ou le texte commence a passer dessous. */
.nav{position:sticky;top:0;z-index:1400;width:100%;padding:18px 14px;transition:padding .3s var(--ease)}
.nav.is-scrolled{padding:10px 14px}
.nav::before{content:"";position:absolute;left:0;right:0;top:0;bottom:-18px;z-index:-1;pointer-events:none;
  backdrop-filter:blur(20px) saturate(1.6);-webkit-backdrop-filter:blur(20px) saturate(1.6);
  background:linear-gradient(to bottom,rgba(247,247,245,.88) 0%,rgba(247,247,245,.66) 62%,rgba(247,247,245,0) 100%);
  -webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 62%,transparent 100%);
  mask-image:linear-gradient(to bottom,#000 0%,#000 62%,transparent 100%);
  opacity:0;transition:opacity .3s var(--ease)}
.nav.is-scrolled::before{opacity:1}
/* On ne transitionne QUE ce qui change : un `transition:all` ferait interpoler
   `backdrop-filter`, qui se recalcule alors a chaque image sur toute la barre et
   passe par des valeurs ou le verre s'ouvre. */
/* Passe du 15/09 : mêmes deux plans de verre et mêmes opacités, avec une bordure,
   une ombre et des espacements plus légers. */
.nav-inner{position:relative;max-width:var(--wrap);margin:0 auto;
  display:flex;align-items:center;gap:.1rem;white-space:nowrap;
  padding:9px 9px 9px 18px;border-radius:var(--pill);
  background:rgba(247,247,245,.5);
  backdrop-filter:blur(34px) saturate(2);-webkit-backdrop-filter:blur(34px) saturate(2);
  border:1px solid rgba(255,255,255,.5);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.82);
  transition:padding .3s var(--ease),background-color .3s var(--ease),border-color .3s var(--ease),box-shadow .3s var(--ease)}
.nav.is-scrolled .nav-inner{padding:7px 7px 7px 16px;background:rgba(247,247,245,.82);
  border-color:rgba(255,255,255,.86);
  box-shadow:0 12px 28px -23px rgba(10,10,11,.38),inset 0 1px 0 rgba(255,255,255,.92)}
/* Sans backdrop-filter (Firefox ancien, navigateurs de bureau bloques) le verre ne
   floute rien : la barre devient opaque, sinon le texte passe dessous EN CLAIR. */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .nav-inner{background:#F7F7F5}
  .nav.is-scrolled .nav-inner{background:#F7F7F5}
  .nav::before{background:linear-gradient(to bottom,rgba(247,247,245,1) 0%,rgba(247,247,245,.92) 62%,rgba(247,247,245,0) 100%)}
}
/* LOGOTYPE (book §02) : 21px, graisse 600, interlettrage -0,038em, minuscules,
   slash et point final indissociables, ecart au mot 9px, pastille 7px.
   La pastille reste a 7px : la lecture « 30 % de la hauteur de capitale » qui
   donnait 4,5px etait une sur-interpretation, la maquette de Dimitri code 7px.
   Taille minimale d'affichage : 18px (ne jamais descendre en dessous). */
.brand{display:inline-flex;align-items:center;gap:9px;font-family:var(--sky);font-size:21px;font-weight:600;
  letter-spacing:-.038em;line-height:1;color:var(--ob);margin-right:.5rem;white-space:nowrap;flex:none}
.brand-dot{width:7px;height:7px;border-radius:50%;background:var(--lime);display:block;flex:none}
/* Liens 14,5px ; la passe légère du 15/09 garde la taille et ramène l'espace à 20px.
   line-height 18px + 13px de padding haut/bas = cible tactile de 44px. */
.nl{font-family:var(--sky);font-size:14.5px;font-weight:400;color:var(--ob2);padding:13px 10px;line-height:18px;
  border-radius:var(--pill);white-space:nowrap;transition:color .2s,background .2s}
.nl:hover,.nl.active:hover{color:var(--ob);background:rgba(10,10,11,.05)}
.nav-spacer{flex:1 1 10px}
/* Telephone : pilule claire bord fin, numero en mono, pastille lime qui respire. */
.nav-tel{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:12.5px;font-weight:500;color:var(--ob);
  background:rgba(255,255,255,.7);border:1px solid rgba(10,10,11,.1);
  padding:8px 15px 8px 13px;border-radius:var(--pill);margin-left:.3rem;display:inline-flex;align-items:center;gap:9px;
  white-space:nowrap;transition:border-color .2s,background .2s}
.nav-tel:hover{border-color:rgba(10,10,11,.3);background:#fff}
.nav-tel-dot{width:6px;height:6px;border-radius:50%;background:var(--lime);display:block;flex:none;
  animation:aecPulse 2.8s ease-in-out infinite}
/* CTA : pilule encre aux cotes `.btn-nav` du book (12/20px, 14,5px). */
.nav-cta{background:var(--ob);color:#fff;padding:12px 20px;border-radius:var(--pill);margin-left:.3rem;
  font-family:var(--sky);font-size:14.5px;font-weight:600;white-space:nowrap;
  box-shadow:0 10px 24px -14px rgba(10,10,11,.9);
  transition:transform .28s var(--ease),box-shadow .28s,background .28s}
.nav-cta:hover{background:var(--ink-hover);transform:translateY(-2px);box-shadow:0 16px 30px -14px rgba(10,10,11,.95)}
.nav-cta:active{transform:translateY(-1px) scale(.985)}
/* Burger : rond blanc 44px (cible tactile minimale du book §06 ; il etait a 42px). */
/* `flex:0 0 44px` et pas `width:44px` seul : dans une barre serree, un item flex se
   retrecit par defaut — le burger tombait a 41px de large, sous la cible minimale. */
.burger{display:none;flex:0 0 44px;flex-direction:column;align-items:center;justify-content:center;gap:5px;
  width:44px;height:44px;
  padding:0;margin-left:auto;border:1px solid rgba(10,10,11,.12);background:rgba(255,255,255,.7);border-radius:50%;
  cursor:pointer;transition:background .2s,border-color .2s}
.burger:hover{background:#fff;border-color:rgba(10,10,11,.3)}
.burger span{display:block;width:15px;height:1.5px;background:var(--ob);border-radius:2px}

/* menu mobile
   CORRIGE le 14/08/2026 — le panneau etait INUTILISABLE des que son contenu depassait la
   hauteur de l'ecran, ce qui est le cas normal : mesure a 1156px de contenu pour une fenetre
   de 812px. `justify-content:center` centrait ce contenu trop grand, donc la moitie qui
   depasse partait hors ecran DES DEUX COTES, et `overflow` valant `visible` il n'y avait
   rien a faire defiler. « Accueil », « A propos » et « Simulation » etaient rendus au-dessus
   du bord superieur (y = -296, -217, -138), le pied du menu (CTA, telephone, horaires) sous
   le bord inferieur. Aucun geste ne permettait de les atteindre.
   Deux corrections : on cale le contenu en haut plutot que de le centrer, et on rend le
   panneau defilable. `justify-content:center` ne survit que si le contenu tient — d'ou le
   `safe-area` conserve et le `margin-top:auto` du pied, qui recentrent quand il y a la place. */
.mm{position:fixed;inset:0;z-index:1600;display:flex;flex-direction:column;justify-content:flex-start;
  overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;
  padding:6rem 2rem calc(3rem + env(safe-area-inset-bottom));
  background:linear-gradient(160deg,#F7F7F5,#E3E3DE 60%,#E3E3DE);visibility:hidden;
  clip-path:circle(0 at calc(100% - 42px) 42px);
  transition:clip-path .65s cubic-bezier(.76,0,.24,1),visibility 0s linear .65s}
.mm.open{visibility:visible;clip-path:circle(165% at calc(100% - 42px) 42px);
  transition:clip-path .7s cubic-bezier(.22,1,.36,1)}
.mm-close{position:absolute;top:18px;right:18px;width:54px;height:54px;border-radius:16px;
  border:1px solid rgba(10,10,11,.14);background:var(--white);font-size:1.2rem;
  display:flex;align-items:center;justify-content:center}
/* Liens 25px (book §08 : « menu mobile plein ecran, liens 25px ») — ils etaient a
   36,8px. Padding 19px : cible tactile de 57px, au-dessus du minimum de 44px. */
.mm a.ml{font-family:var(--sky);font-size:25px;font-weight:600;letter-spacing:-.032em;color:var(--ob);
  padding:19px 4px;border-bottom:1px solid rgba(10,10,11,.1);display:flex;align-items:baseline;gap:1rem;
  opacity:0;transform:translateY(26px);transition:opacity .5s,transform .6s var(--ease)}
.mm.open a.ml{opacity:1;transform:none}
.mm.open a.ml:nth-child(2){transition-delay:.16s}.mm.open a.ml:nth-child(3){transition-delay:.23s}
.mm.open a.ml:nth-child(4){transition-delay:.3s}.mm.open a.ml:nth-child(5){transition-delay:.37s}
.mm.open a.ml:nth-child(6){transition-delay:.44s}
.mm a.ml b{font-size:.85rem;color:var(--sage2)}
.mm-foot{margin-top:auto;display:flex;flex-direction:column;gap:12px;padding-top:28px}
.mm-foot .cta{font-family:var(--sky);font-weight:600;background:var(--ob-soft);color:#fff;border-radius:14px;padding:16px;text-align:center}
/* Telephone du menu : mono, pastille verte a la place du pictogramme (book §02/§13). */
.mm-tel{font-family:var(--mono);font-variant-numeric:tabular-nums;justify-content:center}
.mm-hrs{font-size:13px;line-height:1.5;color:#6E6E73}

/* Le menu n'est pas un contenu reserve au JavaScript. Sous 1240px, le burger
   remplace les liens desktop : si le script ne se charge pas, la navigation
   mobile devient une liste dans le flux. Pas de panneau masque, pas de bouton
   « fermer » inerte et pas de lien rendu hors ecran. */
@media(max-width:1240px){
  html:not(.js) .burger{display:none}
  html:not(.js) .mm{position:static;z-index:auto;visibility:visible;clip-path:none;
    overflow:visible;padding:1.4rem var(--pad) 2.2rem;background:var(--bg)}
  html:not(.js) .mm-close{display:none}
  html:not(.js) .mm a.ml{opacity:1;transform:none;transition:none}
  html:not(.js) .mm-foot{margin-top:0}
}

/* ---------- BREADCRUMB ---------- */
/* La nav est desormais sticky (dans le flux) : plus besoin du degagement 7rem
   qui compensait l'ancienne nav fixed. */
.bcr{max-width:var(--wrap);margin:0 auto;padding:1.8rem var(--pad) 0;font-size:.78rem;color:var(--muted)}
.bcr a{transition:color .2s}.bcr a:hover{color:var(--ob)}
.bcr span{margin:0 .45rem;opacity:.5}

/* ---------- HERO (sombre, frame, grille) ---------- */
.hero{position:relative;overflow:hidden;background:var(--ob-soft);color:#fff;border-radius:var(--r-frame);
  margin:clamp(12px,1.5vw,20px);min-height:min(86vh,720px);display:flex;align-items:flex-end}
.hero-bg{position:absolute;inset:0;z-index:0}
.hero-bg img{width:100%;height:100%;object-fit:cover;object-position:60% center}
/* VOILE DE LISIBILITE (19/08/2026, constat audit 14/08 : H1 blanc mesure a 1,34:1
   par endroits). Alphas CALIBRES PAR ECHANTILLONNAGE DE PIXELS au rendu (methode de
   l'audit : photo re-composee + degrades sur canvas, pire pixel de la zone de texte),
   jamais un ratio affirme. Deux etats :
   - large (2 colonnes) : le texte vit a gauche, le voile lateral se renforce au
     milieu (la fenetre claire de la photo passait sous la fin des lignes du H1) et
     laisse la droite de la photo respirer ;
   - <=1024px (1 colonne) : le texte couvre toute la largeur, la photo recoit un
     voile plein — mesure : H1 a 1,36:1 et chapo a 1,2:1 sans lui. */
.hero-bg::after{content:"";position:absolute;inset:0;background:
  linear-gradient(90deg,rgba(10,10,11,.9) 0%,rgba(10,10,11,.68) 34%,rgba(10,10,11,.46) 62%,rgba(10,10,11,.12) 88%,transparent 100%),
  linear-gradient(180deg,rgba(10,10,11,.4) 0%,transparent 26%,transparent 48%,rgba(10,10,11,.7) 100%)}
@media(max-width:1024px){
  .hero-bg::after{background:
    linear-gradient(180deg,rgba(10,10,11,.68) 0%,rgba(10,10,11,.58) 46%,rgba(10,10,11,.8) 100%)}
}
.hero-grid{position:absolute;inset:0;z-index:1;pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.07) 1px,transparent 1px);
  background-size:50% 33.33%}
.hero-in{position:relative;z-index:2;max-width:var(--wrap);width:100%;margin:0 auto;
  padding:clamp(2rem,5vw,4rem) var(--pad) clamp(2.4rem,5vw,4rem);
  display:grid;grid-template-columns:1.25fr .75fr;gap:2.5rem;align-items:end}
.hero h1{color:#fff;font-size:clamp(2.5rem,6.4vw,5rem);letter-spacing:-3px;line-height:.94;font-weight:600}
/* Deux temps sur encre (DA /le-sav) : seconde partie blanche + surligneur lime. */
.hero h1 em{color:#fff;background-image:linear-gradient(transparent 66%,rgba(173,232,60,.5) 66%)}
.hero .lead{color:rgba(255,255,255,.82);margin-top:1.2rem}
.hero-meta{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.6rem}
.hero-meta .pill{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.2);color:#fff}
.hero-cta{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:1.8rem}
.hero-trust{display:flex;align-items:center;gap:.6rem;margin-top:1.4rem;font-size:.85rem;color:rgba(255,255,255,.78)}
.locc{align-self:end}
/* Stats hero — pattern 12 (lot 3) : chiffres mono enormes, cellules separees par des
   FILETS sur panneau encre (fin du damier translucide). Panneau opaque .78 : blanc
   15,51:1 / label .68 -> 7,9:1 calcules sur photo moyenne (#808080) en pire cas. */
.locc-grid{display:grid;grid-template-columns:1fr 1fr;background:rgba(10,10,11,.78);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border-radius:18px;overflow:hidden;border:1px solid rgba(255,255,255,.16)}
.locc-cell{padding:1.25rem 1.35rem;border-top:1px solid var(--ob-soft-line);border-left:1px solid var(--ob-soft-line)}
.locc-cell:nth-child(1),.locc-cell:nth-child(2){border-top:0}
.locc-cell:nth-child(odd){border-left:0}
.locc-cell b{display:block;font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:1.55rem;color:#fff;font-weight:500;letter-spacing:.01em;margin-bottom:.35rem}
.locc-cell span{display:block;font-family:var(--mono);font-size:.72rem;color:rgba(255,255,255,.68);text-transform:uppercase;letter-spacing:.08em;line-height:1.45}
.locc-cell .lstars{display:block;color:var(--lime);font-size:1rem;letter-spacing:2px;line-height:1;margin-bottom:.35rem}

/* ---------- BANDE STATS ---------- */
.stb{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}
.stb .card{padding:1.6rem 1.5rem}
.stb b{display:block;font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:2.2rem;color:var(--ob);font-weight:500;line-height:1}
.stb .k{font-family:var(--mono);font-size:.74rem;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);margin-top:.5rem}
.stb p{font-size:.86rem;color:var(--ob2);margin-top:.5rem;line-height:1.5}

/* ---------- SPLIT (pourquoi local) ---------- */
.split{display:grid;grid-template-columns:1.2fr .8fr;gap:clamp(2rem,5vw,4rem);align-items:start}
.split-rows{display:flex;flex-direction:column;gap:.2rem}
.split-row{display:flex;gap:1rem;padding:1.1rem 0;border-bottom:1px solid var(--line)}
/* Numeros : mono encre (le lime en texte sur fond clair fait 1,36:1 — interdit book+WCAG). */
.split-row .n{font-family:var(--mono);font-variant-numeric:tabular-nums;font-weight:500;color:var(--ob);font-size:1rem;flex:none}
.split-row b{display:block;font-family:var(--sky);color:var(--ob);font-size:.98rem;margin-bottom:.2rem}
.split-row span{font-size:.86rem;color:var(--ob2)}
.prose p{margin-top:1rem;color:var(--ob2)}

/* ---------- COMPOSITION POURQUOI-NOUS (31/08/2026) ----------
   Aucun nouveau jeu de cartes : la page assemble le split (pattern 6), les
   etapes a filets, la dotlist, les stats, le medaillon et les nextcards du kit.
   Les seules regles propres servent la photo humaine et la hierarchie de cette
   composition. `.content-photo` est la variante generique de photo large SANS
   texte superpose : sa legende est sous l'image, donc aucun voile ni contraste
   sur pixel photographique a calibrer. */
.why-section-head{align-items:end}
.why-section-head .h2{margin-bottom:0}
.why-intro{font-size:clamp(1rem,1.35vw,1.16rem);line-height:1.58;color:var(--ob2);
  margin:0;max-width:560px;text-wrap:pretty}
.why-compare{margin-top:clamp(30px,4vw,48px)}
.why-compare-side{padding:clamp(24px,3vw,34px) 0;border-top:1px solid var(--line)}
.why-compare-side--aec{border-top-color:var(--ob)}
.why-k{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:12px;
  font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:#55565A}
.why-compare-side h3{font-size:clamp(1.35rem,2.3vw,1.9rem);line-height:1.08;
  letter-spacing:-.03em;margin:18px 0 0;max-width:21ch}
.why-compare-side p{font-size:1rem;line-height:1.58;color:var(--ob2);margin:14px 0 0;
  max-width:58ch;text-wrap:pretty}

.content-photo{margin:0;background:var(--white);border:1px solid var(--line);
  border-radius:22px;overflow:hidden}
.content-photo img{display:block;width:100%;height:auto}
.content-photo figcaption{padding:12px 16px;font-family:var(--mono);font-size:12px;
  line-height:1.4;letter-spacing:.04em;color:#55565A}
.why-human-grid{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(260px,.45fr);
  gap:clamp(18px,3vw,34px);align-items:start;margin-top:clamp(30px,4vw,48px)}
.why-human-grid--solo{grid-template-columns:minmax(0,1fr)}
.why-founder{display:flex;gap:16px;align-items:flex-start;padding:22px 0;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.why-founder strong{display:block;font-size:1.08rem;line-height:1.25;margin-top:10px}
.why-founder p{font-size:.9rem;line-height:1.45;color:var(--ob2);margin:4px 0 0}
.why-founder .link-arrow{margin-top:16px}

.why-steps{margin-top:clamp(30px,4vw,48px)}
.why-steps .split-row{padding:1.25rem 0}
.why-steps .split-row>div{display:grid;grid-template-columns:minmax(150px,.45fr) minmax(0,1fr);
  gap:clamp(16px,3vw,38px);width:100%}
.why-steps .split-row b{margin:0}
.why-steps .split-row span{line-height:1.55;max-width:68ch}
.why-projects{margin-top:clamp(30px,4vw,48px);padding-top:24px;border-top:1px solid var(--line)}
.why-facts{margin-top:clamp(30px,4vw,48px)}
.why-facts dt{overflow-wrap:anywhere}
.why-availability{font-size:.92rem;line-height:1.55;color:var(--ob2);margin:24px 0 0}
.conversion-form-page .conversion-simulation-link{margin:20px 0 0;line-height:1.6}
.conversion-form-page .conversion-simulation-link a{color:var(--ink);font-weight:600;text-decoration:underline;text-underline-offset:.2em}
.why-cta-lead{margin:1rem auto 0;color:rgba(255,255,255,.8)}
.why-cta-btn{margin-top:1.4rem}

/* ---------- RECRUTEMENT ----------
   Composition dediee, sans promesse de carte/video/depot de CV inexistants.
   Les composants restent ceux du kit ; ces regles ne fixent que leurs espacements. */
.recruitment-hero-actions{margin-top:1.6rem}
.recruitment-role-grid,.recruitment-zones,.recruitment-faq{margin-top:clamp(30px,4vw,48px)}
.recruitment-team-link{margin-top:18px}
.recruitment-privacy{margin:18px 0 0;font-family:var(--mono);font-size:12px;line-height:1.45}
.recruitment-privacy a{color:rgba(255,255,255,.82);text-decoration:underline;text-underline-offset:3px}
.recruitment-privacy a:hover{color:#fff}

/* ---------- HUB COURTIER ----------
   Le contenu prioritaire (role + equipe) prend un vrai split ; la navigation
   vers les villes remonte avant le bloc honoraires. */
.hub-hero-actions{margin-top:1.6rem}
.hub-role{align-items:center}

/* ---------- COMMUNES ---------- */
.cmn{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.6rem}
.cmn .chip.on{background:var(--lime);border-color:var(--lime);color:var(--ob);font-weight:600}

/* ---------- PROFILS (dark bento) ---------- */
.pf{background:var(--ob-soft);color:#fff;border-radius:var(--r-frame);padding:clamp(2rem,4vw,3.4rem)}
.pf .eyebrow{color:rgba(255,255,255,.68)}
.pf h2{color:#fff}
.pf h2 em{color:#fff;background-image:linear-gradient(transparent 66%,rgba(173,232,60,.5) 66%)}
.pf-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:2rem}
.pf-card{background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.1);border-radius:18px;padding:1.5rem}
.pf-head{display:flex;align-items:center;gap:.8rem;margin-bottom:1rem}
.pf-head img{width:42px;height:42px;border-radius:50%;object-fit:cover;border:2px solid var(--lime)}
.pf-head b{display:block;font-family:var(--sky);color:#fff;font-size:.92rem;line-height:1.25}
.pf-head span{display:block;font-size:.74rem;color:rgba(255,255,255,.55);margin-top:1px}
.pf-card p{font-size:.86rem;color:rgba(255,255,255,.78);line-height:1.55}
.pf-stat{display:flex;gap:1.4rem;margin-top:1.1rem;padding-top:1.1rem;border-top:1px solid rgba(255,255,255,.1)}
.pf-stat b{font-family:var(--mono);font-variant-numeric:tabular-nums;color:var(--lime);font-size:1.1rem;display:block}
.pf-stat span{font-size:.7rem;color:rgba(255,255,255,.55)}
.bq{display:flex;flex-wrap:wrap;gap:1.4rem;align-items:center;margin-top:2rem;opacity:.85}
.bq span{font-family:var(--sky);font-size:.9rem;color:rgba(255,255,255,.7);letter-spacing:.02em}

/* ---------- COURTIER DEDIE ---------- */
.crt{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(2rem,5vw,4rem);align-items:center}
.crt-photo{position:relative;background:var(--cream);padding:6px;border-radius:24px;
  width:100%;max-width:380px;margin-inline:auto;
  box-shadow:0 30px 70px rgba(10,10,11,.16)}
.crt-photo img{border-radius:18px;aspect-ratio:4/5;object-fit:cover;width:100%}
.crt-badge{position:absolute;left:1rem;bottom:1rem;background:var(--lime);color:var(--ob);
  font-family:var(--mono);font-weight:500;font-size:.78rem;padding:8px 14px;border-radius:50px}
.crt blockquote{font-family:var(--sky);font-size:clamp(1.2rem,2vw,1.6rem);color:var(--ob);line-height:1.3;
  letter-spacing:-.6px;font-weight:500}
.crt .chips{display:flex;flex-wrap:wrap;gap:.5rem;margin:1.4rem 0}
.crt .meta{display:flex;flex-wrap:wrap;gap:1rem;margin-top:1.2rem}

/* ---------- METHODE (etapes) ---------- */
.stg{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin-top:2rem}
.stg-card{position:relative;border-radius:20px;padding:1.6rem 1.5rem;background:var(--white);
  border:1px solid rgba(10,10,11,.05);box-shadow:0 18px 40px rgba(10,10,11,.08)}
.stg-card.dark{background:var(--ob-soft);color:#fff}
.stg-n{font-family:var(--mono);font-variant-numeric:tabular-nums;font-weight:500;color:var(--lime);font-size:.8rem;letter-spacing:.1em}
.stg-card h3{font-size:1.1rem;margin:.8rem 0 .5rem}
.stg-card.dark h3{color:#fff}
.stg-card p{font-size:.86rem;color:var(--ob2)}
.stg-card.dark p{color:rgba(255,255,255,.75)}

/* ---------- FAQ — pattern 21 (lot 3) : items sobres, filets fins, « + » mono qui
   pivote (maquette Contact.dc.html). Hooks JS .faq-q / .faq-item.open inchanges. ---------- */
.fq{display:grid;grid-template-columns:1fr 1fr;gap:.7rem;margin-top:2rem}
.faq-item{position:relative;border-radius:14px;overflow:hidden;border:1px solid rgba(10,10,11,.1);
  background:var(--white);height:fit-content;transition:border-color .25s}
.faq-item.open{border-color:rgba(10,10,11,.3)}
.faq-q{width:100%;display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:1.2rem 1.3rem;text-align:left;font-family:var(--sky);font-weight:600;color:var(--ob);font-size:1.02rem;letter-spacing:-.01em}
.faq-ico{position:relative;flex:none;width:24px;height:24px;display:flex;align-items:center;justify-content:center}
.faq-ico::before{content:"+";font-family:var(--mono);font-size:1.2rem;line-height:1;color:#6E6E73;
  transition:transform .25s}
.faq-item.open .faq-ico::before{transform:rotate(45deg)}
.faq-a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .45s cubic-bezier(.22,1,.36,1)}
.faq-item.open .faq-a{grid-template-rows:1fr}
/* Contrat sans JS (30/08/2026, contre-revue editoriale) : `.faq-item.open` n'est
   posee QUE par le clic JS (aeconomia.js) — sans JS, aucune reponse ne s'ouvre
   jamais, alors que le texte est bien dans le HTML servi. Meme mecanique deja en
   service pour `.nav-zones` (`html:not(.js)`, juste au-dessus dans ce fichier) :
   sans JS, TOUTES les reponses restent depliees (grille pleine hauteur) — un
   accordeon degrade proprement en simple liste de Q/A, jamais un contenu invisible.
   Avec JS, `.js` remplace `html:not(.js)` dans la cascade et l'accordeon reprend
   son etat replie par defaut (comportement inchange). */
html:not(.js) .faq-a{grid-template-rows:1fr}
/* Le repli est une liste de reponses ouvertes : le libelle ARIA, le contenu et
   le signe visuel racontent le meme etat. Le bouton ne devient jamais un faux
   controle annonce « ferme » alors que sa reponse est deja lisible. */
html:not(.js) .faq-item{border-color:rgba(10,10,11,.3)}
html:not(.js) .faq-q[aria-expanded="true"] .faq-ico::before{transform:rotate(45deg)}
/* LE PADDING EST PORTE PAR LE CONTENEUR, PAS PAR LES <p> — corrige le 26/08/2026
   (Session 12, lot B ; constat Bastien sur l'article Saint-Marceau).

   Le defaut : `padding:0 1.3rem 1.3rem` vivait sur `.faq-a p`. Une reponse faite de
   paragraphes se calait donc a 20,8px du bord, mais tout ce qui n'etait PAS un
   paragraphe n'avait aucun padding de conteneur. Une `<ul>` du kit (`padding:0`,
   pastille en `::before{left:0}`) tombait dans la gouttiere, collee au bord de la
   carte, ~21px a gauche du reste du texte. Mesure du 26/08 : 2 articles portent
   aujourd'hui une liste dans une reponse — mais le piege restait arme pour toute
   reponse future, sur les 4 gabarits qui portent le composant.

   Second defaut du meme endroit : DEUX corps de texte cohabitaient dans une meme
   reponse — 14,4px pour les `<p>` (.9rem), 16px pour les `<li>` qui n'heritaient
   d'aucune cote. La cote descend donc au conteneur, et tout ce qu'il contient la
   prend : un seul corps par reponse, quel que soit le contenant.

   Le padding HORIZONTAL reste ici, constant : il ne cree jamais de hauteur visible
   quand la piste grid du parent (`.faq-a`) est a 0fr, donc jamais de fuite au repli. */
.faq-a-in{overflow:hidden;padding:0 1.3rem}
/* Le padding BOTTOM, lui, est retire d'ici et pose seulement quand la reponse est
   visible (contre-revue du 31/08/2026, mesure a 375px) : `box-sizing:border-box`
   ne fait PAS disparaitre un padding a 0fr comme le pretendait une note precedente
   — un padding a une taille fixe, il ne se compresse jamais sous elle-meme ; seul le
   CONTENU peut aller a 0. Avec le bottom pose ici en permanence, chaque reponse
   FERMEE gardait donc 20,8px (1.3rem) de vide visible sous un texte invisible.
   Poser le bottom seulement sur les deux etats OUVERTS (clic JS, ou fail-open sans
   JS ou `.faq-a` est deplie par defaut — regle juste au-dessus) fait disparaitre ce
   vide au repli tout en gardant la respiration quand la reponse est lisible. */
.faq-item.open .faq-a-in,
html:not(.js) .faq-a-in{padding-bottom:1.3rem}
/* La cote vise le CONTENU de la reponse, jamais le conteneur : `.faq-a-in` est
   aussi detourne par des blocs qui ne sont pas des reponses (le pli du simulateur
   des LP, les accordeons `.lp2-acc`), et une cote posee sur le conteneur y
   deviendrait la base heritee de tout ce qu'ils portent.
   Les trois contenants sont nommes ENSEMBLE : c'est ce qui ferme la classe de
   bug. Une feuille qui veut une autre cote doit alors les redeclarer tous, et ne
   peut plus en oublier un — c'est exactement l'oubli qui laissait les `<li>` a
   16px quand les `<p>` etaient a 14,4. */
.faq-a-in p,.faq-a-in li,.faq-a-in td,.faq-a-in th{font-size:.9rem;color:var(--ob2);line-height:1.6}
/* Les `<p>` n'ont plus de padding propre — sinon il s'ajouterait a celui du
   conteneur. Le padding-bottom qu'ils portaient servait aussi d'espacement entre
   deux paragraphes : cette respiration devient une marge, ce qu'elle aurait
   toujours du etre. */
.faq-a-in p{padding:0}
.faq-a-in p + p,
.faq-a-in ul, .faq-a-in ol, .faq-a-in table{margin-top:.85rem}
.faq-a-in > :last-child{margin-bottom:0}

/* ---------- CTA BAND (lime) ---------- */
.ctaband{max-width:var(--wrap);margin:0 auto;border-radius:var(--r-frame);background:var(--lime);color:var(--ob);
  padding:clamp(2.2rem,4.6vw,4rem) clamp(1.9rem,4vw,3.6rem);
  display:grid;grid-template-columns:1.4fr auto;gap:2rem;align-items:center;
  box-shadow:0 30px 70px rgba(173,232,60,.28)}
.ctaband h2{color:var(--ob);font-family:var(--body);font-weight:600;font-size:clamp(2rem,4.6vw,3.4rem);
  line-height:.96;letter-spacing:-1.6px}
.ctaband p{margin-top:.8rem;color:#0A0A0B;max-width:46ch}

/* ---------- DARK BAND (CTA final) ---------- */
.darkband{background:linear-gradient(160deg,var(--ob-soft),#141613);color:#fff;border-radius:var(--r-frame);
  padding:clamp(2.4rem,5vw,4.5rem);text-align:center;max-width:var(--wrap);margin:0 auto}
.darkband h2{color:#fff;font-size:clamp(2rem,4.4vw,3.2rem)}
.darkband h2 em{color:#fff;background-image:linear-gradient(transparent 66%,rgba(173,232,60,.5) 66%)}
.darkband .hero-cta{justify-content:center}

/* ---------- AVIS GOOGLE ---------- */
.reviews-head{display:flex;justify-content:space-between;align-items:flex-end;gap:2rem;flex-wrap:wrap;margin-bottom:2rem}
.reviews-score{display:flex;align-items:center;gap:1rem;padding:1rem 1.4rem;flex-wrap:wrap}
.reviews-score img{height:22px;width:auto}
/* Note en mono geant + etoiles encre (pattern DA « 5,0 ★★★★★ »). */
.reviews-score b{font-family:var(--mono);font-variant-numeric:tabular-nums;letter-spacing:-.055em;
  font-size:clamp(2.4rem,3.4vw,2.75rem);color:var(--ob);font-weight:500;line-height:1}
.reviews-score .gl{display:flex;flex-direction:column}
.reviews-score .gl small{font-size:.8rem;color:var(--muted)}
.reviews-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.review-card{padding:1.6rem;display:flex;flex-direction:column;gap:.8rem}
.review-card p{font-size:.92rem;color:var(--ob2);line-height:1.6;flex:1}
.review-author{display:flex;align-items:center;gap:.7rem;margin-top:.4rem}
.review-author img{width:38px;height:38px;border-radius:50%;object-fit:cover}
/* Initiales locales a la place de l'avatar Google (lot confidentialite du 03/09/2026,
   assets/aeconomia.js) : jamais de requete vers lh3.googleusercontent.com. */
.review-avatar{width:38px;height:38px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;background:var(--lime);color:var(--ob);font-family:var(--sky);font-size:.78rem;font-weight:600}

/* Carte au clic (lot confidentialite du 03/09/2026, template-lp-locale.php + aeconomia.js) :
   repli visible tant que la carte n'a pas ete chargee. */
.ae-map-gate{background:var(--bg2,#F1F1EE);display:flex;align-items:center}
.ae-map-placeholder{padding:1.2rem;display:flex;flex-direction:column;gap:.6rem}
.ae-map-placeholder p{margin:0;font-size:.82rem;color:var(--ob2)}
.ae-map-placeholder .btn{align-self:flex-start}
.ae-map-placeholder a{font-size:.86rem}
.review-author b{display:block;font-family:var(--sky);font-size:.86rem;color:var(--ob)}
.review-author span{font-size:.74rem;color:#55565A}
@media(max-width:1024px){.reviews-grid{grid-template-columns:1fr}}

/* ---------- FOOTER — handoff du 25/09, destinations et mentions conservées ---------- */
.ftr{color:var(--ob);background:var(--bg);border-top:1px solid rgba(10,10,11,.1);padding:clamp(64px,7.5vw,96px) 24px 48px}
.ftr-in{max-width:1300px;margin:0 auto}
.ftr-grid{display:grid;grid-template-columns:minmax(260px,1.2fr) minmax(150px,.65fr) minmax(240px,1.1fr) minmax(190px,.85fr);gap:clamp(24px,3.4vw,48px);align-items:start}
.ftr-brandcol,.ftr-col{min-width:0}
.ftr-brandcol .brand{margin-right:0;font-size:22px}
.ftr-desc{margin:16px 0 0;max-width:340px;font-size:15px;line-height:1.55;color:var(--ob2)}
.ftr-rating{display:flex;flex-direction:column;gap:4px;margin-top:14px;font-size:13px;line-height:1.5;color:var(--ob2)}
.ftr-rating-score{display:flex;align-items:baseline;gap:7px}.ftr-rating-score b{font-weight:500;color:var(--ob)}
.ftr-tags{display:flex;gap:9px;flex-wrap:wrap;margin-top:20px}
.ftr-tag{font-family:var(--mono);font-size:11.5px;font-weight:400;color:var(--ob2);border:1px solid rgba(10,10,11,.14);border-radius:var(--pill);padding:7px 13px;white-space:nowrap}
.ftr-col h3{font-family:var(--mono);font-size:10px;line-height:1.5;font-weight:400;letter-spacing:.1em;text-transform:uppercase;color:#6E6E73;margin-bottom:16px}
.ftr-list{display:flex;flex-direction:column;gap:11px}
.ftr-col-zones .ftr-list{display:grid;grid-template-columns:1fr 1fr;gap:11px 18px}
.ftr-link{display:inline-block;font-size:14.5px;font-weight:400;line-height:1.5;color:var(--ob2);width:fit-content;padding:4px 0;margin:-4px 0;transition:color .25s,transform .25s}
.ftr-link:hover{color:var(--ob);transform:translateX(3px)}
.ftr-tel{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:13px}
.ftr-address{margin:0;font-size:14.5px;color:var(--ob2);line-height:1.55}
.ftr-zones-all{display:inline-flex;gap:8px;align-items:center;font-size:14.5px;font-weight:600;margin-top:16px;min-height:24px}
.ftr-social{display:flex;flex-wrap:wrap;gap:8px;margin-top:19px}
.ftr-social-icon{width:44px;height:44px;border-radius:50%;border:1px solid rgba(10,10,11,.14);display:inline-flex;align-items:center;justify-content:center;color:var(--ob2);background:rgba(255,255,255,.6);transition:border-color .2s,color .2s,background .2s}
.ftr-social-icon:hover{border-color:var(--ob);color:var(--ob);background:#fff}
.ftr-joi{display:flex;gap:16px;flex-wrap:wrap;align-items:center;margin-top:40px;padding:18px 22px;background:var(--white);border:1px solid rgba(10,10,11,.12);border-radius:16px}
.ftr-joi-k{display:inline-flex;align-items:center;gap:9px;flex:none;font-family:var(--mono);font-size:10.5px;font-weight:400;letter-spacing:.1em;text-transform:uppercase;color:#6E6E73}
.ftr-joi-t{flex:1 1 380px;min-width:0;font-size:14.5px;line-height:1.5;color:var(--ob2);margin:0}
.ftr-joi-t strong{color:var(--ob);font-weight:600}
.ftr-joi-cta{display:inline-flex;align-items:center;gap:9px;font-size:14.5px;font-weight:600;min-height:24px}
.ftr-explore{display:flex;gap:12px 24px;flex-wrap:wrap;margin-top:22px;color:var(--ob2);font-size:13px}
.ftr-explore a{min-height:24px}
/* Blocs legaux + ligne finale.
   PLANCHER DE TAILLE DU BOOK (§04 et §13) : « aucune taille sous 12px », et la mention
   legale est cotee a 12px. Les trois blocs etaient a 11,5px et leurs labels mono a 8,8px,
   soit 1,2px sous le plancher mono. Tout est remonte, rien n'est descendu. */
.ftr-legal{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem 2rem;
  margin-top:clamp(2rem,3.4vw,2.8rem);padding-top:1.6rem;border-top:1px solid rgba(10,10,11,.1)}
.ftr-legal h4{font-family:var(--mono);font-size:10px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:#6E6E73;margin-bottom:.5rem}
.ftr-legal p{font-size:12px;line-height:1.6;color:var(--ob2)}
.ftr-legal strong{color:var(--ob);font-weight:600}
.ftr-legal a{color:var(--ob2);text-decoration:underline;text-underline-offset:2px}
.ftr-warn{grid-column:1/-1;font-size:12px;line-height:1.6;color:var(--ob2);
  background:var(--white);border:1px solid rgba(10,10,11,.1);border-radius:13px;padding:.8rem 1rem}
.ftr-warn b{font-weight:600;color:var(--ob)}
.ftr-legal.ftr-legal--compact{display:block}
.ftr-legal--compact .ftr-warn{margin-top:12px;padding:0;border:0;border-radius:0;background:transparent}
.ftr-bar{display:flex;flex-wrap:wrap;align-items:center;gap:.55rem 1.1rem;margin-top:clamp(1.2rem,2.2vw,1.8rem);
  padding-top:1.1rem;border-top:1px solid rgba(10,10,11,.1);font-size:12px;color:var(--ob2)}
.ftr-bar a:hover{color:var(--ob)}
.ftr-bar .copy{margin-left:auto;color:#6E6E73}

@media(max-width:1099px){.ftr-grid{grid-template-columns:1fr 1fr;gap:40px}.ftr-brandcol{grid-column:1}.ftr-col-zones{grid-column:1;grid-row:2}.ftr-contact{grid-column:2;grid-row:2}}
@media(max-width:599px){.ftr-grid{grid-template-columns:1fr;gap:32px}.ftr-brandcol,.ftr-col-zones,.ftr-contact{grid-column:auto;grid-row:auto}.ftr-joi{padding:20px;gap:20px}.ftr-joi-t{flex-basis:100%}.ftr-bar .copy{margin-left:0}}

/* ---------- REVEAL ----------
   Meme contrat que [data-reveal]/[data-mask] (voir §09 plus haut) : le masquage
   initial n'existe que sous `.js` (posee par header.php). Sans JS, `.rv` reste
   peint et sans translation des le premier rendu. */
.js .rv{opacity:0;transform:translateY(26px);transition:opacity .7s cubic-bezier(.22,1,.36,1),transform .7s cubic-bezier(.22,1,.36,1)}
.rv.in{opacity:1;transform:none}

/* ---------- Marqueur "a confirmer" (draft, visible pour Bastien/Dimitri) ---------- */
.tbc{background:#fff3cd;color:#7a5c00;border:1px dashed #d9a800;border-radius:6px;padding:1px 7px;font-size:.82em;font-style:italic}
.tbc-block{display:block;margin:1.2rem 0;background:#fff8e6;border:1px dashed #d9a800;border-radius:14px;padding:1rem 1.2rem;color:#7a5c00;font-size:.88rem;line-height:1.5}
.tbc-block b{color:#5c4500}

/* ---------- Tableau de donnees (marche DVF, quartiers) ---------- */
.dtable-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r-card);background:var(--white);margin:1.4rem 0}
.dtable{width:100%;border-collapse:collapse;font-size:.95rem;min-width:380px}
.dtable th{font-family:var(--mono);font-size:.64rem;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);text-align:left;padding:.9rem 1.1rem;border-bottom:1px solid var(--line)}
.dtable td{padding:.95rem 1.1rem;border-bottom:1px solid var(--line);color:var(--ob2);vertical-align:middle}
.dtable tr:last-child td{border-bottom:0}
.dtable td:first-child{font-family:var(--sky);font-weight:600;color:var(--ob)}
.dtable .num{font-family:var(--mono);font-weight:500;color:var(--ob);font-variant-numeric:tabular-nums}
.dtable .neg{display:inline-flex;align-items:center;gap:.3rem;font-family:var(--mono);font-weight:500;color:var(--ob);font-variant-numeric:tabular-nums}
.dtable .tag{display:inline-block;font-size:.78rem;color:var(--ob2)}

/* Indice pose par aeconomia.js seulement quand un tableau deborde vraiment.
   Le texte est un vrai noeud relie au conteneur par aria-describedby ; la pastille
   lime reste decorative. Le conteneur devient focalisable pour le defilement clavier. */
.table-scroll-hint{display:flex;align-items:center;gap:8px;margin:1rem 0 -.75rem;
  font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:.04em;color:#55565A}
.table-scroll-hint::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--lime);flex:none}
.table-scroll-hint[hidden]{display:none}

/* ---------- RESPONSIVE ---------- */
/* Book §06 : « nav complete au-dela de 1240px, burger en dessous ». Le seuil etait
   a 760px : entre 760 et 1240px la barre gardait des liens trop serres. */
@media(max-width:1240px){
  .nl,.nav-zones{display:none}
  .burger{display:flex}
}
@media(max-width:1024px){
  .hero-in{grid-template-columns:1fr}
  .stb{grid-template-columns:1fr 1fr}
  .split,.crt,.ctaband{grid-template-columns:1fr}
  .why-page .nextgrid,.why-page .why-facts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .why-human-grid{grid-template-columns:1fr}
  .why-founder{max-width:620px}
  .pf-grid,.stg{grid-template-columns:1fr 1fr}
  .ctaband{text-align:left}
}
@media(max-width:760px){
  .nav{padding:10px 12px}
  .nav.is-scrolled{padding:8px 12px}
  .nav-inner{padding:7px 7px 7px 15px;gap:0}
  .nav.is-scrolled .nav-inner{padding:6px 6px 6px 14px}
  /* Le CTA texte sort (il ne tient plus une fois le burger pose), le TELEPHONE reste :
     c'est le seul chemin de conversion d'un pouce sur les gabarits qui n'ont pas
     encore de barre d'action fixe. Un gabarit qui pose `.aec-actionbar` peut, lui,
     masquer `.nav-tel` chez lui — la barre du bas reprend les deux actions. */
  .nav-cta{display:none}
  .nav-tel{margin-left:auto;margin-right:.4rem}
  .why-page .nextgrid,.why-page .why-facts{grid-template-columns:1fr}
  .why-page .nextgrid{gap:.75rem;margin-top:1.1rem}
  .why-page .why-facts{gap:18px;margin-top:1.5rem;padding-top:22px}
  .why-steps .split-row>div{grid-template-columns:1fr;gap:5px}
  .fq,.ftr-legal,.pf-grid,.stg{grid-template-columns:1fr}
  .bcr{padding-top:1.4rem}
  .hero{min-height:auto;margin:10px}
  .hero-in{padding:2.6rem var(--pad) 2.4rem}
  .reviews-head{align-items:flex-start}
}

/* ---------- MOBILE serré ---------- */
.reviews-note{text-align:center;font-size:.76rem;color:var(--muted);font-style:italic;margin-top:1.2rem}
@media(max-width:560px){
  :root{--pad:1.2rem}
  .hero h1{font-size:clamp(2rem,9vw,2.7rem);letter-spacing:-1.5px}
  /* Book §06, mobile : « grilles 4 colonnes → 2 ». La colonne unique empilait les
     quatre tuiles de /blog/ avant tout contenu : le kit garde deux colonnes et resserre
     la tuile (recette staging du 07/09/2026, lot UX/SEO). L'accueil n'est pas concerne :
     home.css surcharge `.hm-hero .stb` en auto-fit/minmax(112px) et etait deja a deux
     par rangee (contre-revue Codex du 07/09, 2 colonnes de 160px mesurees a 390px). */
  .stb{grid-template-columns:1fr 1fr;gap:.7rem}
  .stb .card{padding:1.1rem .95rem}
  .stb b{font-size:1.75rem}
  .h2{font-size:clamp(1.7rem,7.5vw,2.15rem);letter-spacing:-1px}
  .crt blockquote{font-size:1.2rem}
  .reviews-score{width:100%;justify-content:space-between}
  .pf-stat{gap:1rem}
  .locc-cell b{font-size:1.3rem}
  .btn{padding:14px 22px;font-size:.9rem}
}
/* ---------- GARDE `prefers-reduced-motion` — GLOBAL, SANS EXCEPTION (book §09) ----------
   Le pendant JS est dans assets/aeconomia.js (`reduce`) : le CSS coupe le mouvement,
   le JS s'abstient de le declencher et affiche l'etat final. Les deux sont necessaires :
   couper l'animation d'un bloc reste a `opacity:0` sans le second. */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .rv{opacity:1!important;transform:none!important}
  [data-reveal],[data-mask]{opacity:1!important}
  /* Le surligneur ne se peint plus : il est peint. */
  .hl,h1 em,h2 em,.h2 em{background-size:100% 100%!important}
  .scard{transform:none!important}
  .tick-track{transform:none}
}

/* ===== ETAPES facon Valentine — composant kit reutilisable (toutes LP) ===== */
.lp-steps{position:relative;margin-top:2rem}
.scard{position:sticky;top:clamp(92px,12vh,130px);width:100%;max-width:1040px;margin:0 auto;
  background:#fff;border:1px solid rgba(10,10,11,.08);border-radius:var(--r-card);
  box-shadow:0 30px 80px -42px rgba(10,10,11,.4);overflow:hidden;will-change:transform}
.scard+.scard{margin-top:clamp(2rem,7vh,5rem)}
.scard-in{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(1.4rem,3vw,2.6rem);
  align-items:center;padding:clamp(1.5rem,3vw,2.4rem)}
/* Numeros d'etapes — pattern 7 (lot 3) : mono `01 / 04`, plus de chip aplat.
   #6E6E73 sur blanc = 5,07:1 AA calcule (mapping lot 2). */
.scard-step{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:.78rem;font-weight:500;
  letter-spacing:.18em;color:#6E6E73;display:inline-flex;align-items:center;gap:9px}
.scard-step::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--lime);flex:none}
.scard-h{font-family:var(--sky);font-weight:600;font-size:clamp(1.6rem,3vw,2.5rem);
  line-height:1.06;letter-spacing:-1px;color:var(--ob);margin:.9rem 0 0}
.scard-h em,.scard-h .hl{font-style:normal;color:var(--sage2,#55565A);
  background-image:linear-gradient(transparent 66%,var(--mark) 66%);background-repeat:no-repeat}
.scard.dark .scard-h em,.scard.dark .scard-h .hl{color:#fff;background-image:linear-gradient(transparent 66%,var(--mark-ink) 66%)}
.scard-k{font-family:var(--mono);font-size:.66rem;font-weight:500;letter-spacing:.16em;
  text-transform:uppercase;color:var(--sage2,#55565A);margin-top:.85rem}
.scard-p{font-size:clamp(1rem,1.25vw,1.06rem);line-height:1.6;color:var(--ob2);margin-top:.6rem}
.scard-media{position:relative;aspect-ratio:4/3;border-radius:18px;overflow:hidden;background:var(--bg)}
.scard-media img{width:100%;height:100%;object-fit:cover;display:block}
.scard.dark{background:var(--ob-soft);border-color:rgba(255,255,255,.1)}
.scard.dark .scard-h{color:#fff}
.scard.dark .scard-p{color:rgba(255,255,255,.82)}
.scard.dark .scard-step{color:rgba(255,255,255,.68)}
.scard.dark .scard-k{color:rgba(255,255,255,.6)}
@media(max-width:860px){
  .scard{position:static;max-width:560px;transform:none!important}
  .scard-in{grid-template-columns:1fr}
  .scard-media{aspect-ratio:16/9;order:-1}
}

/* ============================================================================
   Composants DA Dimitri — lot 2 (29/07/2026)
   Source : design/source-dimitri-2026-07-29/Home Aeconomia.dc.html (valeurs
   inline exactes) + DA book. Contrastes calcules : docs/RESKIN-DA-MAPPING.md §lot 2.
   ========================================================================= */

/* ---------- TICKER marquee (tout haut de page) ----------
   Items mono uppercase separes par des pastilles ; contenu genere cote PHP
   (ae_ticker_items, bareme = ae_tx_bareme, miroir de TX dans aeconomia.js).
   La pause reduced-motion est assuree par le bloc global
   @media(prefers-reduced-motion:reduce){*{animation:none!important}} du kit. */
/* LE BOUTON PAUSE NE SE POSE PAS SUR LA PISTE. Pose en `position:absolute` a droite,
   il masque en permanence une cinquantaine de pixels du ruban et tronque l'item qui
   passe dessous (le defaut constate sur la maquette). La barre est donc une RANGEE de
   deux cellules — une fenetre defilante elastique `.tick-vp`, une cellule de commande
   fixe `.tick-pause` — separees par le meme filet que deux items. Rien ne se superpose.
   Le bouton est indispensable : le bandeau demarre seul et tourne plus de 5 secondes
   (WCAG 2.2.2) ; `prefers-reduced-motion` est une preference systeme, pas un mecanisme
   dans la page. Sa cible passe a 44px sur pointeur grossier (book §06). */
.tick{position:relative;z-index:101;display:flex;align-items:stretch;
  border-bottom:1px solid rgba(10,10,11,.09);
  background:rgba(255,255,255,.6);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  overflow:hidden}
.tick-vp{flex:1 1 auto;min-width:0;overflow:hidden}
.tick-track{display:flex;width:max-content;animation:aecMarquee var(--tick-dur) linear infinite}
.tick.is-paused .tick-track{animation-play-state:paused}
.tick-seq{display:flex}
/* Plancher mono du book §04 : 10-11,5px. Le label etait a .66rem (10,6px), conforme. */
.tick-it{display:flex;align-items:center;gap:9px;padding:9px 22px;font-family:var(--mono);
  font-variant-numeric:tabular-nums;font-size:10.5px;letter-spacing:.09em;color:#6E6E73;
  white-space:nowrap;border-right:1px solid rgba(10,10,11,.07)}
.tick-dot{width:5px;height:5px;border-radius:50%;background:var(--lime);display:block;flex:none}
.tick-it.is-mut .tick-dot{background:rgba(10,10,11,.25)}
/* 12px et pas 10,5 : ce n'est pas un label de rubrique mais une COMMANDE, et le book
   §13 interdit de descendre un texte sous 12px. */
.tick-pause{flex:0 0 auto;display:flex;align-items:center;justify-content:center;min-width:44px;
  border:0;border-left:1px solid rgba(10,10,11,.07);background:transparent;color:#6E6E73;cursor:pointer;
  font-family:var(--mono);font-size:12px;letter-spacing:.09em;padding:0 16px;
  transition:background .2s,color .2s}
.tick-pause:hover{background:rgba(255,255,255,.75);color:var(--ob)}
@media(pointer:coarse){.tick-pause{min-height:44px}}

/* ---------- Dropdown zones de la nav (ex-inline header.php, restyle DA) ---------- */
.nav-zones{position:relative;display:inline-flex}
.nav-zones>.nl{cursor:pointer;user-select:none;border:0;background:transparent;text-align:left}
.nav-zones.is-open .nav-zones-menu{display:grid}
/* Pont de pointage sur les 12px d'air entre le bouton et le panneau. Sans cette
   surface invisible, mouseleave fermait le disclosure avant d'atteindre un lien. */
.nav-zones::after{content:"";display:none;position:absolute;top:100%;left:50%;transform:translateX(-50%);
  width:max(400px,100%);height:12px;z-index:1599}
.nav-zones.is-open::after,html:not(.js) .nav-zones:hover::after,html:not(.js) .nav-zones:focus-within::after{display:block}
/* Repli sans JS : la classe `.js` est retiree par le filet du <head> si le script
   partage ne demarre pas. Le bouton reste alors utilisable au survol et au focus. */
html:not(.js) .nav-zones:hover .nav-zones-menu,html:not(.js) .nav-zones:focus-within .nav-zones-menu{display:grid}
.nav-zones-menu{display:none;grid-template-columns:1fr 1fr;gap:16px;position:absolute;top:100%;left:50%;
  transform:translateX(-50%);margin-top:12px;background:#fff;border:1px solid rgba(10,10,11,.09);
  border-radius:18px;box-shadow:0 24px 60px -30px rgba(10,10,11,.5);padding:16px 18px;min-width:400px;z-index:1600}
.nav-zones-col b{display:flex;align-items:center;gap:8px;font-family:var(--mono);font-weight:500;font-size:.66rem;
  letter-spacing:.09em;text-transform:uppercase;color:#6E6E73;margin:0 0 6px 10px}
.nav-zones-col b::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--lime);flex:none}
.nav-zones-menu a{display:block;padding:6px 10px;border-radius:99px;font-family:var(--sky);font-size:.86rem;
  font-weight:600;color:var(--ob2);text-decoration:none;white-space:nowrap;transition:background .2s,color .2s}
.nav-zones-menu a:hover{background:rgba(10,10,11,.05);color:var(--ob)}
.nav-zones-menu a[aria-current="page"]{background:rgba(10,10,11,.05);color:var(--ob)}
.nav-zones-links .nav-zones-paris-link{display:flex;align-items:center;gap:7px;min-height:44px}
.nav-zones-paris-note{font-family:var(--mono);font-size:10px;font-weight:400;letter-spacing:.06em;color:#6E6E73}
.nav-zones>.nl:focus-visible,.nav-zones-menu a:focus-visible{outline:2px solid var(--ob);outline-offset:2px}

/* ---------- Zones du menu mobile (ex-inline header.php) ---------- */
.mm-zones{margin-top:16px;border-top:1px solid rgba(10,10,11,.12);padding-top:16px}
.mm-zt{font-family:var(--mono);font-weight:500;font-size:.66rem;letter-spacing:.09em;text-transform:uppercase;
  color:#6E6E73;margin-bottom:8px}

/* ---------- Listes a puces DA : pastille lime ronde (prose LP + FAQ) ---------- */
.prose ul,.faq-a-in ul{list-style:none;margin:1rem 0;padding:0;display:flex;flex-direction:column;gap:.55rem}
.prose ul li,.faq-a-in ul li{position:relative;padding-left:1.4rem;line-height:1.6;color:var(--ob2)}
/* Dans un ARTICLE, `.art-body ul li` (blog.css, charge apres le kit) impose
   `font-size:1rem` aux `li` : la reponse sortait a 14,4px pour ses paragraphes et
   16px pour sa liste, mesure au rendu de Saint-Marceau. A specificite egale
   (0,1,2) blog.css gagne ; le selecteur passe donc par `.faq-a` — (0,2,2)
   tranche, sans `!important` et sans deporter le correctif du composant dans la
   feuille du blog. */
.faq-a > .faq-a-in ul li,.faq-a > .faq-a-in ol li{font-size:.9rem}
.prose ul li::before,.faq-a-in ul li::before{content:"";position:absolute;left:0;top:.55em;
  width:7px;height:7px;border-radius:50%;background:var(--lime)}

/* ---------- Bande encre punchline (section pre-footer, maquette « Slogan ») ----------
   Composant DISPONIBLE pour les gabarits (lot 3) : la maquette la place au-dessus
   du footer clair. Usage :
   <section class="punchband"><div class="punch-in">
     <div class="punch-t">/aeconomia, le pret immo <span>simplifie</span> et <span>optimise.</span></div>
     <div class="punch-tags"><span class="punch-k">LE COURTAGE COMME IL DEVRAIT L'ETRE</span>
       <span class="ftr-tag"><i class="tick-dot"></i>/simple</span> ...</div>
   </div></section> */
.punchband{background:var(--ob);color:#fff;padding:clamp(2.1rem,3.8vw,3rem) var(--pad)}
.punch-in{max-width:var(--wrap);margin:0 auto;display:flex;gap:1.6rem;flex-wrap:wrap;
  align-items:center;justify-content:space-between}
.punch-t{font-family:var(--sky);font-size:clamp(1.25rem,2.3vw,1.9rem);font-weight:600;letter-spacing:-.03em;line-height:1.18}
.punch-t span{color:var(--lime)}
.punch-tags{display:flex;gap:9px;flex-wrap:wrap;align-items:center}
.punch-k{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;color:rgba(255,255,255,.68);margin-right:6px}
.punchband .ftr-tag{color:rgba(255,255,255,.8);border-color:rgba(255,255,255,.2);font-size:12.5px}

/* ---------- BARRE D'ACTION FIXE MOBILE (book §06) ----------
   COMPOSANT DISPONIBLE POUR LES GABARITS. « Mobile : barre d'action fixe en bas. »
   La home a deja la sienne (`.hm-stickybar`, assets/home.css) ; celle-ci est la
   version partagee, a poser telle quelle en fin de gabarit LP ou article :
     <div class="aec-actionbar" role="navigation" aria-label="Actions rapides">
       <a href="#sim">Faire étudier mon projet</a>
       <a class="tel" href="tel:..." aria-label="Appeler le ..."><span aria-hidden="true">TÉL</span></a>
     </div>
   Le liseré blanc a 22 % rend sa forme a la pilule encre quand elle flotte au-dessus
   d'une section sur encre (sinon : noir sur noir, il ne reste que le texte en suspens).
   Aucune couleur ajoutee (book §13), aucun pictogramme : « TEL » est en mono, la fonte
   des telephones dans tout le systeme — le book interdit l'emoji et le pictogramme dessine.
   Un gabarit qui pose cette barre doit degager le pied : `footer{padding-bottom:150px}`. */
.aec-actionbar{display:none;position:fixed;z-index:1500;bottom:18px;left:50%;transform:translateX(-50%);
  width:min(382px,calc(100% - 32px));gap:10px}
.aec-actionbar a{flex:1 1 auto;text-align:center;background:var(--ob);color:#fff;padding:15px 18px;
  border-radius:var(--pill);font-family:var(--sky);font-size:14.5px;font-weight:600;
  box-shadow:0 16px 34px -14px rgba(10,10,11,.8),0 0 0 1px rgba(255,255,255,.22)}
.aec-actionbar .tel{flex:0 0 auto;display:flex;align-items:center;justify-content:center;width:50px;height:50px;
  padding:0;border-radius:50%;background:#fff;color:var(--ob);border:1px solid rgba(10,10,11,.12);
  font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;
  box-shadow:0 12px 28px -14px rgba(10,10,11,.5)}
/* La barre s'efface devant la rangee de CTA du heros (04/09/2026, dette P1 du 29/08) :
   `is-held` est pose par aeconomia.js tant que cette rangee est a l'ecran, jamais par le
   HTML — sans JS la barre est visible comme avant (fail-open). `visibility` suit la
   transition pour qu'aucun lien invisible ne reste dans le parcours Tab ; la garde
   globale prefers-reduced-motion coupe les transitions, l'etat final reste juste. */
.aec-actionbar{transition:transform .35s var(--ease),opacity .35s var(--ease),visibility 0s linear 0s}
.aec-actionbar.is-held{transform:translate(-50%,140%);opacity:0;visibility:hidden;pointer-events:none;
  transition:transform .35s var(--ease),opacity .35s var(--ease),visibility 0s linear .35s}
@media(max-width:760px){
  .aec-actionbar{display:flex}
  .has-actionbar .ftr{padding-bottom:150px}
}

/* ---------- CIBLES TACTILES (book §06 : minimum 44px) ----------
   Sur pointeur GROSSIER uniquement : le rendu souris, deja valide a l'ecran par
   Dimitri, ne bouge pas. La requete porte sur la capacite du pointeur, pas sur une
   largeur d'ecran — une tablette large au doigt en a autant besoin qu'un telephone. */
@media(pointer:coarse){
  /* `.ftr-tel` ajoute le 14/08 : le telephone du pied de page mesurait 109x21px, alors que
     c'est le dernier point de contact d'une page longue. Le lien reste inline, on lui donne
     seulement de la hauteur de frappe. */
  .nav-tel,.faq-q,.btn-sm,.btn-nav,.roster-tile{min-height:44px}
  /* `.ftr-link` ajoute le 26/08, pour la meme raison et par le meme moyen. La passe du
     14/08 avait corrige le telephone et laisse ses trente voisins : mesure au rendu en
     375px, les liens du pied font 23px de haut. C'est sous la cote du book (§06 : « zone
     tactile minimale 44px », et §Don't : « descendre une cible tactile sous 44px ») ET
     sous le minimum WCAG 2.5.8 (24px) — a un pixel pres, ce qui ne se voit pas a l'oeil
     mais se rate au doigt. Le pied est sur les 22 pages : c'est le composant ou une
     cible trop petite coute le plus souvent.
     La taille VISUELLE ne bouge pas : on n'ajoute que de la hauteur de frappe. */
  .ftr-link{display:inline-flex;align-items:center;min-height:44px}
  .ftr-tel{display:inline-flex;align-items:center;min-height:44px}
  /* Mesure du 04/09/2026 au rendu 375px (pointeur grossier) : les liens tertiaires
     `.link-arrow` (« Voir nos 12 villes → », 19px de haut) et `.rvlink` (« Lire les
     avis → », 24px), le CTA de la carte JOIGNABLES (23px), les trois liens de la ligne
     legale du pied (19px) et le logotype de la nav (21px) restaient sous la cible du
     book §06 (44px) — la meme dette que `.ftr-link` le 26/08, par le meme moyen : de la
     hauteur de frappe, jamais une autre cote visuelle. Les liens dans une phrase
     (`.ftr-legal a`, `.lgcard a`) ne sont pas vises : WCAG 2.5.8 les exempte. */
  .link-arrow,.rvlink,.ftr-joi-cta,.nav .brand{min-height:44px;align-items:center}
  .ftr-bar a{display:inline-flex;align-items:center;min-height:44px}
}

/* ============================================================================
   Patterns lot 3 (29/07/2026) — application DA aux gabarits LP + blog.
   Sources : A propos.dc.html (roster, filets), Simulation.dc.html (cartes taux,
   pilules), Contact.dc.html (FAQ), Home Aeconomia.dc.html (badges, bandeau avis).
   Contrastes calcules : docs/RESKIN-DA-MAPPING.md §lot 3.
   ========================================================================= */

/* ---------- En-tete de section pattern 4 : `● /slug · MÉTA` + filet ---------- */
/* Label -> titre : cote de la maquette validee (42px au desktop), qui applique le
   « Label → titre : clamp(28px, 3.2cqw, 42px) » du book §06. Releve au rendu le
   17/08 : .9rem = 14px partout, trois fois trop court. Les heros qui posaient deja
   leur espace par la marge haute du titre ne bougent pas (marges fusionnees). */
.seyeb{display:flex;align-items:center;gap:14px;margin-bottom:var(--gap-lab)}
.seyeb .eyebrow{white-space:nowrap}
.seyeb-rule{flex:1;height:1px;background:rgba(10,10,11,.12);display:block}
/* Le nowrap tient le label sur une ligne pour que le filet coure jusqu'au bord
   (pattern 4). Sous 760px, une meta longue ne rentre plus : au controle du
   03/08, « /nos-taux · HORS ASSURANCE · TAUX AU 24.07.2026 » mesurait 373px
   dans une colonne de 352 et sortait de la fenetre. On laisse le label revenir
   a la ligne (min-width:0 sans quoi un item flex refuse de se retracter) et on
   garde un bout de filet pour que le motif reste lisible. */
@media(max-width:760px){
  .seyeb{align-items:flex-start}
  .seyeb .eyebrow{white-space:normal;min-width:0;flex:1 1 auto}
  .seyeb-rule{flex:0 0 24px;margin-top:.62rem}
}
.seyeb-dark .eyebrow{color:rgba(255,255,255,.68)}
.seyeb-dark .seyeb-rule{background:rgba(255,255,255,.2)}

/* ---------- Badges hero pattern 17 : pilule encre `● texte` + pilule blanche avis ---------- */
.hbadges{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-top:1.1rem}
.hbadge{display:inline-flex;align-items:center;gap:9px;background:var(--ob);color:#fff;
  padding:9px 17px;border-radius:99px;white-space:nowrap;font-family:var(--sky);font-size:.8rem;font-weight:600;
  box-shadow:0 10px 26px -18px rgba(10,10,11,.9)}
.hbadge .hb-dot{width:7px;height:7px;border-radius:50%;background:var(--lime);display:block;flex:none}
/* Pilule blanche : fond quasi opaque (.92) -> #55565A y fait 6,15:1 AA calcule
   meme composee sur photo noire. */
.hbadge-lt{background:rgba(255,255,255,.92);color:#55565A;border:1px solid rgba(255,255,255,.9);
  backdrop-filter:blur(22px) saturate(1.8);-webkit-backdrop-filter:blur(22px) saturate(1.8)}
.hbadge-lt .hb-stars{color:#55565A;letter-spacing:-1px;font-size:.72rem}
.hbadge-lt .hb-mono{font-family:var(--mono);font-variant-numeric:tabular-nums;font-weight:500;font-size:.76rem}

/* ---------- Cartes de taux pattern 11 (bloc « taux du moment ») ---------- */
.txrow{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:.7rem;margin:1.4rem 0 1.2rem}
.txcard{background:var(--white);border:1px solid rgba(10,10,11,.1);border-radius:14px;
  padding:16px 20px;display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.txcard b{font-family:var(--mono);font-variant-numeric:tabular-nums;font-weight:500;
  font-size:1.5rem;letter-spacing:-.03em;color:var(--ob)}
.txcard span{font-size:.88rem;color:#6E6E73}
.txcard small{margin-left:auto;font-size:.8rem;color:#6E6E73}
/* EMPILEMENT (27/08/2026, heros de /simulation-de-pret-immobilier/) : `.txrow`
   est une grille auto-fit qui rend quatre colonnes ; la maquette de Dimitri veut
   UNE colonne dans la colonne gauche du heros. Modificateur, pas un second
   composant — les cartes ne changent pas d'un pixel, seule la piste change. */
.txrow--pile{grid-template-columns:1fr;gap:12px;max-width:480px;margin:clamp(20px,2.2vw,26px) 0 0}

/* ---------- CTA intermediaire (pattern 14 : pilules, fin des aplats) ---------- */
.mid-cta{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1.1rem;
  padding:1.4rem 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.mid-cta-t{max-width:38rem}
.mid-cta-t b{display:block;font-family:var(--sky);font-weight:600;color:var(--ob);font-size:1.14rem;margin-bottom:.25rem}
.mid-cta-t span{color:var(--ob2);font-size:.95rem;line-height:1.6}

/* ---------- Lien avis pattern 13 : `● Lire les avis →` ---------- */
.rvlink{display:inline-flex;align-items:center;gap:9px;font-family:var(--sky);font-size:.92rem;font-weight:600;
  color:var(--ob);white-space:nowrap;transition:gap .2s}
.rvlink i{width:7px;height:7px;border-radius:50%;background:var(--lime);display:block;flex:none}
.rvlink span{font-family:var(--mono)}
.rvlink:hover{gap:13px}

/* ---------- Roster equipe pattern 18 (rail tuiles + fiche a lisere lime) ---------- */
.roster{margin-top:1.8rem;display:grid;grid-template-columns:1fr;gap:.9rem}
.roster-rail{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.roster-tile{position:relative;display:flex;flex-direction:column;overflow:hidden;border-radius:16px;
  background:var(--white);border:1px solid rgba(10,10,11,.1);padding:0;text-align:left;cursor:pointer;
  transition:border-color .25s,transform .25s,box-shadow .35s}
.roster-tile:hover{transform:translateY(-3px);border-color:var(--ob)}
.roster-tile.on{border-color:var(--ob);box-shadow:0 18px 40px -26px rgba(10,10,11,.55)}
.roster-ph{position:relative;display:block;aspect-ratio:4/5;overflow:hidden;background:linear-gradient(150deg,#EDEDE8,#E3E3DE)}
.roster-ph img{width:100%;height:100%;object-fit:cover;object-position:50% 13%;filter:grayscale(1) contrast(1.04);transition:filter .45s ease}
.roster-tile.on .roster-ph img,.roster-tile:hover .roster-ph img{filter:none}
/* VOILE DE LISIBILITE (19/08/2026) : l'index blanc reposait sur la photo nue (un
   text-shadow n'est pas un fond) — mesure a 1,17:1 sur la tuile la plus claire.
   Motif du kit (degrade type .hm-tile-meta) generalise : bande haute qui s'eteint
   a 36 %. Alphas calibres par echantillonnage de pixels (>= 4,5:1 vise sur la zone
   de l'index, petite typo). ::after passe AU-DESSUS de l'image (enfant statique
   peint apres) et SOUS l'index et la legende (positionnes). */
.roster-ph::after{content:"";position:absolute;left:0;right:0;top:0;height:38%;pointer-events:none;
  background:linear-gradient(180deg,rgba(10,10,11,.7) 0%,rgba(10,10,11,.64) 42%,rgba(10,10,11,0) 100%)}
.roster-n{position:absolute;top:10px;left:12px;font-family:var(--mono);font-style:normal;font-size:.66rem;
  letter-spacing:.12em;color:#fff;text-shadow:0 1px 6px rgba(10,10,11,.6)}
/* Legende : le degrade demarrait a la premiere ligne du nom (mesure 1,63:1 sur la
   tuile la plus claire). Le padding haut ouvre la rampe AVANT le texte. */
.roster-cap{position:absolute;left:0;right:0;bottom:0;display:flex;flex-direction:column;gap:1px;
  padding:30px 12px 10px;background:linear-gradient(180deg,rgba(10,10,11,0) 0%,rgba(10,10,11,.66) 38%,rgba(10,10,11,.94) 100%)}
.roster-cap b{font-family:var(--sky);font-size:.88rem;font-weight:600;color:#fff;letter-spacing:-.02em;line-height:1.15}
/* rgba(255,255,255,.64) sur encre = 8,23:1 AA calcule. */
.roster-cap span{font-size:.7rem;color:rgba(255,255,255,.64);line-height:1.25;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.roster-fiche{position:relative;background:var(--white);border:1px solid rgba(10,10,11,.1);border-radius:16px;
  padding:1.5rem 1.6rem 1.4rem;overflow:hidden}
.roster-fiche::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:var(--lime)}
.roster-meta{display:flex;align-items:center;gap:10px;font-family:var(--mono);font-size:.66rem;font-weight:500;
  letter-spacing:.1em;text-transform:uppercase;color:#6E6E73}
.roster-meta-rule{flex:1 1 8px;min-width:8px;height:1px;background:rgba(10,10,11,.14);display:block}
.roster-idx{color:#6E6E73;font-variant-numeric:tabular-nums}
.roster-nom{display:block;font-family:var(--sky);font-size:1.3rem;font-weight:600;color:var(--ob);
  letter-spacing:-.034em;line-height:1.08;margin-top:.45rem}
.roster-quote{font-size:1rem;line-height:1.4;letter-spacing:-.01em;color:var(--ob);margin-top:.7rem}
.roster-detail{font-size:.88rem;line-height:1.6;color:var(--ob2);margin-top:.8rem}
.roster-chips{font-size:.88rem;color:var(--ob2);line-height:1.7;margin-top:.7rem}
@media(min-width:861px){.roster{grid-template-columns:1.15fr .85fr;align-items:start}}
@media(max-width:860px){.roster-rail{grid-template-columns:repeat(2,1fr)}}

/* ---------- Liste de villes pattern 16 (maillage interne) ---------- */
/* ---------- CARTES « POUR ALLER PLUS LOIN » (pattern 34, 26/08/2026) ----------
   Constat Bastien du 26/08 sur /equipe/ : « espacements, hierarchie, il manque des
   choses ». Mesure du meme jour au rendu : la section /pour-aller-plus-loin rendait
   une DOTLIST NUE de 50px — trois lignes de texte sous un oeil-de-boeuf. Le ressenti
   de vide ne venait pas des paddings, uniformes a 64,8px, mais du fait qu'une
   section entiere ne portait qu'une liste a puces.

   REGLE 0 BIS : cherche avant d'ecrire. `.card` (pattern 7) donne le fond, le bord
   et l'ombre ; `.link-arrow` donne la fleche ; le label mono reprend la cote des
   eyebrows. Ce qui n'existait pas, c'est la CARTE DE LIEN elle-meme — aucune des
   quinze classes `*card*` du kit ne rend « label + titre + fleche » sans image
   (`.rel-card` exige une couverture, `.pf-card` est faite pour le fond encre,
   `.scard` est un panneau collant d'etape). D'ou ce composant, et sa fiche au
   pattern 34.

   Aucun couple de couleurs nouveau : encre `#0A0A0B` sur blanc, label `#55565A`
   sur blanc — les deux sont deja au kit et deja calcules. */
.nextgrid{list-style:none;margin:1.4rem 0 0;padding:0;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(248px,1fr));gap:1rem}
.nextcard{display:flex;flex-direction:column;gap:.55rem;height:100%;
  padding:1.25rem 1.35rem 1.15rem;text-decoration:none;
  transition:transform .25s var(--ease),border-color .25s var(--ease)}
.nextcard:hover{transform:translateY(-2px);border-color:rgba(10,10,11,.22)}
/* 12px et non `.62rem` (9,92px) : le book §13 interdit tout texte sous 12px, et
   le pattern 27 a deja remonte a 12px tous les textes PORTEURS de la carte de
   verre en ne laissant que la meta d'en-tete a la cote des eyebrows. Un label de
   carte est un texte porteur — il nomme la destination. Ecrire un composant neuf
   sous le plancher, c'est creer la dette qu'on vient de rembourser ailleurs. */
.nextcard-k{font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:.12em;
  text-transform:uppercase;color:#55565A;display:inline-flex;align-items:center;gap:8px}
.nextcard-k::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--lime);flex:none}
.nextcard-t{font-family:var(--sky);font-weight:600;font-size:1.02rem;line-height:1.3;
  letter-spacing:-.01em;color:var(--ob)}
/* La fleche est poussee en bas : trois cartes de titres inegaux gardent leurs
   fleches sur la meme ligne, ce qu'une pile simple ne donne pas. */
.nextcard .link-arrow{margin-top:auto;padding-top:.7rem;font-size:.9rem}
.nextcard:hover .link-arrow{gap:13px}

/* ---------- CARTE DE CONTENU SANS LIEN (pattern 44, 30/08/2026) ----------
   Nee du portage de /pourquoi-nous-courtier-de-pret-immobilier/ (`parts/page-contenu.php`) :
   ses blocs legacy melangent un titre court et sa description dans deux paragraphes a plat,
   la ou une carte etait visiblement l'intention (« Transparence totale » + sa phrase). REGLE
   0 BIS verifiee avant d'ecrire : `.nextcard` (pattern 34) est le plus proche mais est un
   LIEN (`<a>`, fleche `.link-arrow` obligatoire) — aucune des quinze classes `*card*` du kit
   ne rend « titre + corps » sans affordance de lien. D'ou ce composant, jumeau structurel de
   `.nextcard` moins le lien. Meme grille, memes cotes, aucun couple de couleurs nouveau. */
.reasongrid{list-style:none;margin:1.4rem 0 0;padding:0;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1rem}
.reasoncard{padding:1.25rem 1.35rem 1.35rem}
/* `.reasoncard-t` et non un heading (contre-revue Codex 30/08/2026, cf. page-contenu.php) :
   meme convention que `.nextcard-t` (pattern 34), qui n'est pas non plus un heading. */
.reasoncard-t{display:block;font-family:var(--sky);font-weight:600;font-size:1.02rem;line-height:1.3;
  letter-spacing:0;color:var(--ob)}
.reasoncard p{margin-top:.5rem;color:var(--ob2);font-size:.92rem;line-height:1.55}
/* SCOPING CONTRE `.prose ul`/`.prose ul li`/`.prose ul li::before` (30/08/2026, contre-revue
   Codex) : seul usage a ce jour, `.reasongrid` est rendu DANS `.prose` (page-contenu.php).
   `.prose ul` est (0,1,1) contre `.reasongrid` seul en (0,1,0) : le kit degradait le grid en
   flex-column, imposait `padding-left:1.4rem` (specificite `.prose ul li` = (0,1,2)) et peignait
   la pastille lime de `.prose ul li::before` (0,1,3) sur des cartes qui n'en veulent pas — meme
   classe de bug que `.faq-a > .faq-a-in ul li` juste au-dessus, memes causes. Scoping explicite,
   sans `!important`, chaque selecteur ci-dessous bat le sien a la specificite : */
.prose .reasongrid{display:grid;list-style:none;margin:1.4rem 0 0;padding:0;gap:1rem}
.prose .reasongrid>.reasoncard{padding-left:1.35rem;position:relative}
.prose .reasongrid>.reasoncard::before{content:none}

.dotlist{list-style:none;margin:1.3rem 0 0;padding:0;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:.55rem 1.4rem}
.dotlist li{position:relative;padding-left:1.3rem;line-height:1.6}
.dotlist li::before{content:"";position:absolute;left:0;top:.55em;width:7px;height:7px;border-radius:50%;background:var(--lime)}
.dotlist a{font-family:var(--sky);font-weight:600;font-size:.95rem;color:var(--ob);display:inline-flex;
  align-items:baseline;gap:7px;transition:gap .2s}
.dotlist a span{font-family:var(--mono);color:var(--ob)}
.dotlist a:hover{gap:11px}

/* ---------- FAQ en pile (pattern 21, disposition « colonne unique ») ----------
   La disposition de la maquette Contact.dc.html : les cartes s'empilent dans une
   colonne de 900px max, au lieu de la grille 2 colonnes par defaut du kit.
   Deja en service sur l'accueil via home.css (`.hm-faq .fq`) ; cette variante
   la rend disponible aux gabarits sans feuille dediee (page contact). */
.fq--pile{grid-template-columns:1fr;max-width:900px}

/* ---------- Selecteur d'agences (pattern 19, variante « selecteur + visuel ») ----------
   Maquette 06/08 : Home §/agences et Contact §/nos-locaux. UNE liste de 3 rangees
   cliquables (ville, adresse, horaires) + UNE grande photo de la facade choisie.
   Le JS du kit ([data-agsel]) echange la photo ; sans JS, la premiere facade reste
   affichee et la liste porte deja les trois adresses completes — rien n'est perdu.
   La legende sur photo est posee sur un VOILE degrade calibre (voir `.agsel-veil`,
   session portage-sections : contraste MESURE par echantillonnage des pixels de la
   facade la plus claire, jamais affirme). */
.agsel{display:flex;gap:18px;flex-wrap:wrap;align-items:stretch;margin-top:1.8rem}
.agsel-list{flex:1 1 400px;min-width:280px;border-top:1px solid rgba(10,10,11,.13);
  display:flex;flex-direction:column}
.agsel-row{width:100%;border:0;border-bottom:1px solid rgba(10,10,11,.11);background:transparent;
  cursor:pointer;text-align:left;padding:22px 6px;display:flex;flex-direction:column;gap:6px;
  transition:background .25s var(--ease),padding-left .25s var(--ease)}
.agsel-row:hover{background:var(--white);padding-left:16px}
.agsel-row.on{background:var(--white);padding-left:16px}
.agsel-row .aec-dot{width:7px;height:7px;background:rgba(10,10,11,.16);transition:background .25s}
.agsel-row.on .aec-dot,.agsel-row:hover .aec-dot{background:var(--lime)}
.agsel-city{display:inline-flex;align-items:center;gap:9px;font-family:var(--sky);
  font-size:19px;font-weight:600;letter-spacing:-.025em;color:var(--ob)}
.agsel-city em{font-style:normal;font-weight:400;font-size:14px;color:var(--ob2)}
.agsel-addr{font-size:14.5px;color:var(--ob2);padding-left:16px}
.agsel-hours{font-family:var(--mono);font-size:11.5px;font-weight:500;letter-spacing:.05em;
  color:#6E6E73;padding-left:16px}
.agsel-note{font-size:15px;color:var(--ob2);line-height:1.55;padding:22px 6px 0;margin:0}
.agsel-note a{font-weight:600;color:var(--ob);white-space:nowrap}
.agsel-photo{position:relative;flex:1 1 400px;min-width:280px;border-radius:22px;overflow:hidden;
  background:linear-gradient(150deg,#EDEDE8,#E3E3DE);min-height:380px;display:flex;
  flex-direction:column;justify-content:flex-end;padding:22px}
.agsel-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.agsel-photo--brand{background:var(--ob)}
.agsel-brand{position:absolute;inset:0;display:grid;place-items:center;overflow:hidden;
  color:var(--lime);font-family:var(--sky);font-size:clamp(2.2rem,5vw,5rem);font-weight:600;
  letter-spacing:-.06em;line-height:1}
.agsel-brand::before{content:"";position:absolute;width:42%;aspect-ratio:1;border:1px solid rgba(255,255,255,.12);
  border-radius:50%;transform:translate(64%,-18%)}
.agsel-brand span{transform:translateY(-18px)}
/* Voile de lisibilite : la moitie basse porte ville + adresse + itineraire, le haut
   la ligne mono. Alphas CALIBRES au rendu (echantillonnage de pixels, facade la plus
   claire = tours.webp) : legende mono haute >= 4,5:1, metas basses >= 4,5:1. */
.agsel-veil{position:absolute;inset:0;pointer-events:none;background:
  linear-gradient(180deg,rgba(10,10,11,.78) 0%,rgba(10,10,11,.42) 26%,rgba(10,10,11,0) 46%),
  linear-gradient(2deg,rgba(10,10,11,.9) 0%,rgba(10,10,11,.72) 34%,rgba(10,10,11,0) 62%)}
.agsel-capline{position:absolute;top:22px;left:22px;display:inline-flex;align-items:center;gap:9px;
  font-family:var(--mono);font-size:10.5px;font-weight:500;letter-spacing:.1em;color:#fff}
.agsel-capline .aec-dot{width:6px;height:6px}
.agsel-meta{position:relative;display:flex;flex-direction:column;gap:6px}
.agsel-meta b{font-family:var(--sky);font-size:clamp(22px,2.4vw,30px);font-weight:600;
  letter-spacing:-.03em;color:#fff;line-height:1.1}
.agsel-meta>span{font-size:14.5px;color:rgba(255,255,255,.9)}
.agsel-meta .agsel-h{font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.06em;
  color:rgba(255,255,255,.85);margin-top:6px}
.agsel-iti{display:inline-flex;align-items:center;gap:9px;align-self:flex-start;margin-top:16px;
  background:rgba(255,255,255,.94);color:var(--ob);padding:11px 18px;border-radius:var(--pill);
  white-space:nowrap;font-family:var(--sky);font-size:13.5px;font-weight:600;
  transition:transform .25s var(--ease),background .25s}
.agsel-iti:hover{background:#fff;color:var(--ob);transform:translateY(-2px)}
.agsel--photoleft .agsel-photo{order:-1}
@media(pointer:coarse){.agsel-row{min-height:44px}.agsel-iti{min-height:44px}}
@media(max-width:760px){
  .agsel-photo{min-height:300px}
  .agsel--photoleft .agsel-photo{order:0}
  .agsel-brand span{font-size:.85em;transform:translateY(-72px)}
}

/* ============================================================================
   HEROS CLAIR DE PAGE VILLE (`.lph`) + CARTE DE VERRE (`.aec-glass`) — lot 4
   ----------------------------------------------------------------------------
   Source : design/proposition-bastien-2026-07-29/lp-courtier-orleans.html,
   valeurs RELEVEES dans sa feuille (`.hero`, `.hero-col`, `.badges`, `.hero-rule`,
   `.hero-stats`, `.glass`, `.simu-*`), pas devinees. Le heros sombre `.hero` du
   lot 3 reste dans ce fichier : la page d'ACCUEIL (`front-page.php`, `.hm-hero`)
   s'en sert encore. La page ville, elle, ne l'utilise plus — d'ou un composant
   distinct plutot qu'une reecriture de `.hero`, qui aurait casse l'accueil.

   CE QUI CHANGE PAR RAPPORT AU HEROS SOMBRE :
     · plus d'image du tout (le `<img fetchpriority=high>` de 1600px etait le LCP
       de 12 pages) : le fond est le fond de page + le halo radial + la trame
       verticale 122px qui derive (book §07, composants `.aec-halo-bg`/`.aec-drift`
       deja presents plus haut dans ce fichier) ;
     · deux colonnes : promesse locale a gauche, carte de verre a droite, et c'est
       la carte de verre qui porte le SIMULATEUR — le point d'entree de conversion
       remonte donc au-dessus de la ligne de flottaison ;
     · lumiere claire : le primaire redevient encre (le `.hero .btn-primary`
       inverse en lime ne s'applique qu'aux surfaces encre, il ne matche pas ici),
       le titre reprend le couple encre / gris + surligneur de `.hl`.

   Les cotes `cqw` de la maquette sont transposees en `vw` : sa `.stage` est un
   conteneur `inline-size` large de 100 % de la fenetre, 1 cqw y vaut donc 1 vw.
   ========================================================================= */
.lph{position:relative}
/* Le halo et la trame ne sont plus enfants du heros : ils demarrent au haut de
   page, dans `.aec-stage` (header.php). Voir le commentaire de `.aec-stage`. */
.lph-in{position:relative;z-index:1;max-width:var(--wrap);margin:0 auto;
  padding:clamp(30px,4vw,58px) var(--pad) 0;
  display:flex;gap:clamp(34px,4.4vw,64px);flex-wrap:wrap;align-items:flex-start}
/* Bases de colonnes : la maquette est a 500/400, mais elle travaille sur une
   gouttiere de 24px la ou le kit en pose jusqu'a 72px (`--pad`, commune a toutes
   les sections — on ne desaligne pas le heros du reste de la page pour 3px). A
   largeur utile de 1096px, 500/400 donnait une colonne gauche de 566px, et les
   DEUX BADGES (295 + 265 + 9 de gouttiere = 569px, tous deux en `nowrap`)
   repassaient a la ligne. 560/380 rend la meme proportion que la maquette sur la
   largeur dont on dispose vraiment : colonne de 606px, donc rangee de badges d'un
   seul tenant meme sur la ville au libelle le plus long (Châteaudun, 315 + 265 +
   9 = 589px mesures), et 64px de marge sous le H1 a 80px (« Courtier en prêt »
   mesure 542px, interlettrage compris). */
.lph-col{flex:1 1 560px;min-width:280px}
/* `max-width` : sous ~1075px les deux colonnes passent l'une sous l'autre et la
   carte prendrait toute la largeur utile (mesure : 922px a 1024px de fenetre).
   Un curseur de 900px ne se regle pas mieux qu'un de 570, et le book plafonne la
   colonne de contenu (§06). Elle reste calee a gauche, dans l'axe du texte. */
.lph .aec-glass{flex:1 1 380px;min-width:280px;max-width:620px}
/* Badges pattern 17, deja cotes plus haut (`.hbadges`) : ils ouvrent la colonne,
   leur marge haute de rangee intercalaire ne s'applique donc pas ici. La pastille
   de la pilule encre respire (book §02 : `aecPulse` sur les statuts en direct). */
.lph .hbadges{margin-top:0}
/* 12,5px : la cote de la maquette (`.badge-ink` / `.badge-glass`), le kit etait a
   .8rem = 12,8px. Ce n'est pas un reglage de place, c'est la cote — mais elle rend
   aussi 7px a la pilule la plus longue des 12 villes. */
.lph .hbadge{font-size:12.5px}
.lph .hbadge .hb-dot{animation:aecPulse 2.8s ease-in-out infinite}
/* Pilule blanche EN VERRE (maquette `.badge-glass`) : sur fond clair le voile a
   .62 compose un blanc casse, #55565A y reste a 6,9:1 (AA calcule). */
.lph .hbadge-lt{background:rgba(255,255,255,.62);border-color:rgba(255,255,255,.9);
  box-shadow:0 10px 26px -16px rgba(10,10,11,.45),inset 0 1px 0 rgba(255,255,255,1)}
/* H1 « page interne » (book §04) : clamp(42,6cqw,80) px · 0,95 · -0,045em, coupe
   en lignes qui se revelent l'une apres l'autre (`data-mask` 0/1/2 du kit). */
.lph h1{font-size:clamp(42px,6vw,80px);line-height:.95;letter-spacing:-.045em;
  font-weight:600;color:var(--ob);margin:clamp(22px,2.6vw,32px) 0 0;text-wrap:balance}
.lph h1 .l{display:block}
/* Chapeau (book §04) : clamp(16,1.35cqw,19) px · 1,55 · colonne de texte 560px
   (§06). Classe propre et non `.lead` : les fixes de prose du gabarit reglent
   `.lead` a 1,95 d'interligne, ce qui delaverait le chapeau du heros. */
.lph-p{font-size:clamp(16px,1.35vw,19px);line-height:1.55;color:var(--ob2);
  max-width:560px;margin:clamp(20px,2.2vw,28px) 0 0}
.lph-p strong{color:var(--ob);font-weight:600}
/* Rangee « ce que nous financons » : filets haut et bas, label mono, puces a
   pastille verte (book §08 : la pastille remplace toute icone). */
.lph-rule{margin-top:clamp(24px,2.6vw,32px);padding:22px 0;
  border-top:1px solid rgba(10,10,11,.13);border-bottom:1px solid rgba(10,10,11,.13)}
.lph-k{display:block;font-family:var(--mono);font-size:10.5px;font-weight:500;
  letter-spacing:.1em;text-transform:uppercase;color:var(--ob2);margin-bottom:16px}
.lph-chips{display:flex;gap:12px 24px;flex-wrap:wrap;list-style:none;margin:0;padding:0;
  font-size:16px;line-height:1.5;color:var(--ob2)}
.lph-chips li{display:inline-flex;align-items:center;gap:9px}
.lph-chips i{width:7px;height:7px;border-radius:50%;background:var(--lime);display:block;flex:none}
/* Boutons du heros : 18/30 (book §08). */
.lph-ctas{display:flex;gap:13px;flex-wrap:wrap;margin-top:clamp(26px,2.8vw,34px)}
.lph-ctas .btn{padding:18px 30px}
/* Stats mono. La maquette tient quatre colonnes parce que ses quatre valeurs sont
   des nombres courts ; les `hero_stats` des 12 villes portent aussi des libelles
   (« Sans engagement », « À la signature »). A 122px de piste ils se couperaient en
   trois lignes : le plancher passe donc a 200px, ce qui donne 2 x 2 sur la colonne
   du heros — deux rangees pleines, jamais une tuile seule sur sa ligne. */
.lph-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:26px 30px;margin:clamp(30px,3.4vw,40px) 0 0;padding-top:30px;
  border-top:1px solid rgba(10,10,11,.13)}
.lph-stats dt{font-family:var(--mono);font-weight:500;font-size:24px;letter-spacing:-.04em;
  font-variant-numeric:tabular-nums;line-height:1.1;color:var(--ob)}
/* #6E6E73 sur --bg = 4,73:1 (AA calcule, cf. tokens en tete de fichier). */
.lph-stats dd{font-size:12.5px;line-height:1.35;color:#6E6E73;margin:5px 0 0}

/* ---------- CARTE DE VERRE (book §07, maquette `.glass`) ----------
   COTES DE LA MAQUETTE, relevees : fond rgba(255,255,255,.7), bord
   rgba(255,255,255,.85), rayon 22px (grand bloc, §07), padding 24px, ombre de
   panneau + inset blanc. ECART ASSUME AVEC LE BOOK §07, qui donne le verre a
   `blur(26px) saturate(1.9)` : la maquette monte a `blur(38px) saturate(1.6)` et
   c'est ce rendu-la que Dimitri a valide a l'ecran. Le fond (.7) et le bord (.85)
   restent, eux, dans les fourchettes du book (.5-.82 et .6-.95). */
.aec-glass{position:relative;
  background:rgba(255,255,255,.7);
  backdrop-filter:blur(38px) saturate(1.6);-webkit-backdrop-filter:blur(38px) saturate(1.6);
  border:1px solid rgba(255,255,255,.85);border-radius:22px;padding:24px;
  box-shadow:0 50px 90px -50px rgba(10,10,11,.6),inset 0 1px 0 rgba(255,255,255,1)}
.simu-head{display:flex;align-items:center;justify-content:space-between;gap:10px;
  flex-wrap:wrap;padding-bottom:17px;border-bottom:1px solid rgba(10,10,11,.09)}
.simu-title{display:flex;align-items:center;gap:9px;font-family:var(--sky);font-size:15.5px;
  font-weight:600;letter-spacing:-.015em;line-height:1.2;color:var(--ob);margin:0}
.simu-meta{font-family:var(--mono);font-size:10.5px;font-weight:500;letter-spacing:.09em;
  text-transform:uppercase;color:#6E6E73;font-variant-numeric:tabular-nums;white-space:nowrap}

/* ---------- LE SIMULATEUR POSE DANS LE VERRE ----------
   Composant complet de la maquette validee (`.glass`, l.1134-1330) : segment
   Seul / A deux, 3 onglets, tableau comparatif, grilles de resultat. Cotes
   RELEVEES dans sa feuille (l.354-435), pas devinees. Correspondance des
   variables : `--ink` = `--ob`, `--txt` = `--ob2`, `--g1` = #6E6E73 (4,73:1 sur
   le fond clair, deja la valeur des legendes de ce fichier), `--r-card` de la
   maquette = 18px (le `--r-card` du theme vaut 22px, soit son `--r-card-lg`).
   Les `cqw` deviennent des `vw` : sa `.stage` est un conteneur `inline-size`
   large de 100 % de la fenetre, 1 cqw y vaut donc 1 vw.

   TOUT EST PORTE SOUS `.aec-glass` : `.field`, `.result`, `.tabs`, `.panel`,
   `.chips` sont des noms trop courants pour vivre a la racine d'un theme
   WordPress, ou le contenu d'une page peut les reutiliser. */
.aec-glass .simu-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding:15px 0;border-bottom:1px solid rgba(10,10,11,.09)}
.aec-glass .simu-row>span{font-size:12.5px;color:#6E6E73;flex:1 1 auto}
.aec-glass .seg{display:flex;gap:3px;background:rgba(10,10,11,.05);padding:3px;border-radius:var(--pill)}
.aec-glass .seg button{border:0;cursor:pointer;background:transparent;color:#6E6E73;
  padding:7px 15px;border-radius:var(--pill);white-space:nowrap;font-family:var(--sky);
  font-size:12.5px;font-weight:600;transition:background .25s var(--ease),color .25s var(--ease)}
.aec-glass .seg button[aria-pressed="true"]{background:#fff;color:var(--ob);box-shadow:0 1px 4px rgba(10,10,11,.16)}
.aec-glass .tabs{display:flex;gap:3px;background:rgba(10,10,11,.05);padding:3px;
  border-radius:12px;margin:18px 0 22px}
.aec-glass .tabs button{flex:1 1 90px;border:0;cursor:pointer;padding:11px 8px;border-radius:10px;
  font-family:var(--sky);font-size:13px;font-weight:600;background:transparent;color:#6E6E73;
  transition:background .25s var(--ease),color .25s var(--ease)}
.aec-glass .tabs button[aria-selected="true"]{background:#fff;color:var(--ob);box-shadow:0 1px 4px rgba(10,10,11,.16)}
.aec-glass .panel{display:flex;flex-direction:column;gap:21px}
/* `.panel` est en flex : sans cette regle l'attribut `hidden` ne masque rien et
   les 3 onglets s'empilent. */
.aec-glass .panel[hidden]{display:none}
.aec-glass .field>.flabel{display:flex;justify-content:space-between;align-items:baseline;
  font-size:13px;margin-bottom:10px;gap:12px}
.aec-glass .field .flabel label{color:#6E6E73}
.aec-glass .field .flabel strong{font-family:var(--mono);font-weight:500;white-space:nowrap;
  font-variant-numeric:tabular-nums;color:var(--ob)}
.aec-glass .grp-label{font-size:13px;color:#6E6E73;margin-bottom:10px}
.aec-glass .chips{display:flex;gap:7px;flex-wrap:wrap}
.aec-glass .chips button{border:1px solid rgba(10,10,11,.16);background:rgba(255,255,255,.7);
  color:var(--ob2);cursor:pointer;padding:9px 15px;border-radius:var(--pill);
  font-family:var(--mono);font-size:12.5px;white-space:nowrap;transition:all .22s var(--ease)}
.aec-glass .chips button[aria-pressed="true"]{border-color:var(--ob);background:var(--ob);color:#fff}

/* Tableau comparatif de l'onglet Economies. */
.aec-glass .eco-table{padding:16px 0 4px;border-top:1px solid rgba(10,10,11,.09);
  border-bottom:1px solid rgba(10,10,11,.09)}
.aec-glass .eco-grid{display:grid;
  grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr);
  gap:12px 8px;align-items:baseline}
/* PLANCHER 12PX (session 6, 17/08/2026 — constat Bastien n°1 du 14/08 : « par mois »,
   « crédit », « assurance », « totale » difficilement lisibles au desktop).
   La maquette validee descendait ces textes a 10-11px ; le book §13 range
   « descendre un texte sous 12px » dans les interdits, et le gabarit LP avait deja
   arbitre 12,5px pour la mention legale (« on ne reprend pas cet ecart-la »).
   Tout texte PORTEUR (en-tetes de colonnes, hypotheses, libelles de resultat,
   mention credit) remonte a 12px et plus ; seuls les eyebrows-meta (10,5px,
   pattern 4, identiques sur tout le site) gardent leur cote de label. */
.aec-glass .eco-grid .h{font-family:var(--mono);font-size:12px;letter-spacing:.07em;
  color:var(--ob2);text-align:right}
.aec-glass .eco-grid .h:first-child{text-align:left}
.aec-glass .eco-grid .h.on{color:var(--ob)}
.aec-glass .eco-grid .who{font-size:12.5px;color:#6E6E73;line-height:1.3}
.aec-glass .eco-grid .who b{display:block;font-family:var(--mono);font-size:12px;font-weight:400}
.aec-glass .eco-grid .who.us{color:var(--ob);font-weight:600}
.aec-glass .eco-grid .who.us b{color:var(--ob2)}
.aec-glass .eco-grid .n{font-family:var(--mono);font-size:13.5px;text-align:right;
  font-variant-numeric:tabular-nums;color:#6E6E73}
.aec-glass .eco-grid .n.tot{font-size:15px}
.aec-glass .eco-grid .n.usn{color:var(--ob)}
.aec-glass .eco-grid .n.hi{box-shadow:inset 0 -7px 0 rgba(173,232,60,.55)}
.aec-glass .eco-month{display:flex;justify-content:space-between;align-items:baseline;gap:12px;
  margin-top:14px;padding:12px 0 14px;border-top:1px solid rgba(10,10,11,.07)}
.aec-glass .eco-month span:first-child{display:flex;align-items:center;gap:8px;
  font-size:13px;font-weight:600;color:var(--ob)}
.aec-glass .eco-month .v{white-space:nowrap;font-family:var(--mono);font-size:17px;
  font-variant-numeric:tabular-nums;color:var(--ob);padding:0 3px;
  background-image:linear-gradient(transparent 62%,rgba(173,232,60,.62) 62%);
  background-repeat:no-repeat;background-size:100% 100%}

/* Carte resultat = « moment fort » (pattern 8) : encre pleine, halo vert qui
   respire (`aecBreath` 9s), coupe par la garde prefers-reduced-motion globale. */
.aec-glass .result{position:relative;border-radius:18px;overflow:hidden;background:var(--ob);
  color:#fff;padding:24px;border:1px solid rgba(173,232,60,.2)}
.aec-glass .result::after{content:"";position:absolute;top:-45%;right:-18%;width:72%;
  aspect-ratio:1;pointer-events:none;
  background:radial-gradient(50% 50% at 50% 50%,rgba(173,232,60,.2),rgba(173,232,60,0) 70%);
  animation:aecBreath 9s ease-in-out infinite}
.aec-glass .result>*{position:relative}
.aec-glass .result-lab{display:flex;align-items:center;gap:9px;font-family:var(--mono);
  font-size:12px;letter-spacing:.07em;color:rgba(255,255,255,.6)}
/* CHIFFRE CLE (book §04) : c'est le chiffre geant de la carte encre. */
.aec-glass .result-big{font-family:var(--mono);font-size:clamp(34px,4.8vw,62px);
  letter-spacing:-.055em;margin:10px 0 18px;font-variant-numeric:tabular-nums;line-height:1;
  color:#fff}
.aec-glass .result-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;
  font-size:12px;color:rgba(255,255,255,.55);border-top:1px solid rgba(255,255,255,.16);padding-top:16px}
.aec-glass .result-grid b{display:block;font-family:var(--mono);color:#fff;font-size:14.5px;
  font-weight:400;font-variant-numeric:tabular-nums;margin-top:3px}
.aec-glass .result-grid b.lime{color:var(--lime)}
/* Hypotheses de comparaison, ecrites sous le chiffre : sans elles le montant se
   lirait comme une promesse personnalisee. C'est un paragraphe qui se LIT :
   plancher 12px, comme la mention legale. */
.aec-glass .simu-hyp{font-family:var(--mono);font-size:12px;line-height:1.55;
  letter-spacing:.02em;color:var(--ob2);margin:12px 0 0}
.aec-glass .result .simu-hyp{color:rgba(255,255,255,.72);margin:14px 0 0;padding-top:14px;
  border-top:1px solid rgba(255,255,255,.16)}
/* Le libelle peut etre contextualise par le gabarit (la page Simulation ajoute
   « validation par un courtier »). La regle globale `.btn{white-space:nowrap}`
   le rognait a 375px a cause de l'overflow masque de la pilule. Cette CTA pleine
   largeur accepte donc seule le retour a la ligne, centre et sans debordement. */
.aec-glass .simu-cta{width:100%;margin-top:20px;justify-content:center;
  white-space:normal;text-align:center;line-height:1.25}
/* 12,5px : la cote que le gabarit LP documente pour cette mention (.78rem), que
   cette regle ecrasait a 11px — l'avertissement credit est un texte legal, il ne
   descend pas sous le plancher. */
.aec-glass .lp-simu-legal{font-size:12.5px;line-height:1.5;color:#6E6E73;margin:14px 0 0}
.aec-glass .lp-simu-legal strong{color:var(--ob2)}

/* ---------- Simulateur EMBARQUE DANS LES ARTICLES (`.sim`, 13/08/2026) ----------
   63 articles publies portent ce bloc (`<div class="sim" data-sim>`), insere dans le
   contenu WordPress par le pipeline de publication. Son moteur JS existait bien
   (aeconomia.js, garde par [data-sim]) et CALCULAIT — mais AUCUNE regle CSS ne portait
   `.sim`, `.sim-field` ni `.sim-out` : le bloc sortait nu, avec les curseurs BLEUS
   natifs du navigateur, sur un site dont la DA ne contient pas un seul bleu.
   Meme classe de defaut que les cartes de blog du 12/08 : trouve en REGARDANT la page.

   On ne redessine rien : la carte reprend `.card`, les curseurs etendent les regles
   `.aec-glass input[type=range]` ci-dessous (filet 2px et poignee de verre du
   handoff du 21/08), le resultat reprend la carte encre du pattern 8. */
.sim{background:var(--white);border:1px solid rgba(10,10,11,.09);border-radius:var(--r-card);
  padding:1.5rem 1.6rem;display:grid;gap:1.3rem}
@media(min-width:761px){.sim{grid-template-columns:1.25fr .75fr;align-items:end}}
.sim .eyebrow{margin-bottom:.5rem}
.sim .h2{font-size:clamp(1.4rem,2.6vw,1.9rem);margin:0 0 1.1rem}
.sim-field{display:flex;flex-direction:column;gap:.5rem;margin-bottom:1rem}
.sim-field label{display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  font-size:.86rem;color:var(--ob2)}
/* Tout chiffre passe en mono tabular (regle DA 0) : sans ca les valeurs sautent au drag. */
.sim-field label b{font-family:var(--mono);font-size:.95rem;font-weight:500;color:var(--ob);
  font-variant-numeric:tabular-nums;white-space:nowrap}
/* Pattern 8, carte encre « moment fort » : eyebrow gris clair, chiffre geant mono. */
.sim-out{background:var(--ob);color:#fff;border-radius:16px;padding:1.3rem 1.4rem;
  display:flex;flex-direction:column;gap:.3rem}
.sim-out .k{font-family:var(--mono);font-size:.66rem;font-weight:500;letter-spacing:.12em;
  text-transform:uppercase;color:rgba(255,255,255,.66)}
.sim-out b{font-family:var(--mono);font-size:clamp(1.7rem,4.4vw,2.4rem);font-weight:500;
  letter-spacing:-.02em;color:var(--lime);font-variant-numeric:tabular-nums;line-height:1.05}
.sim-out small{font-size:.72rem;color:rgba(255,255,255,.66);line-height:1.4}

/* Curseurs natifs — handoff Dimitri 21/08, Home/Simulation : verre 40 x 27 px.
   Le JS ne renseigne que --ae-range-position, au centre reel de cette poignee.
   Piste et poignee sont communes aux trois familles, sans modifier leur moteur.
   Le handoff du25/09 retire le filet encre ; le focus clavier reste visible. */
.aec-glass input[type=range],.sim input[type=range],.vsim-track input[type=range]{
  --ae-range-track:linear-gradient(90deg,rgba(173,232,60,.5) 0,var(--lime) var(--ae-range-position),rgba(10,10,11,.16) var(--ae-range-position));
  --ae-range-glass:linear-gradient(180deg,rgba(255,255,255,.96) 0%,rgba(255,255,255,.22) 42%,rgba(255,255,255,.30) 62%,rgba(255,255,255,.68) 100%);
  --ae-range-shadow:0 10px 22px rgba(10,10,11,.20),0 2px 5px rgba(10,10,11,.10),inset 0 1.5px 1px #fff,inset 0 -1px 1.5px rgba(10,10,11,.07),inset 1.5px 0 2px rgba(255,255,255,.65),inset -1.5px 0 2px rgba(255,255,255,.65);
  -webkit-appearance:none;appearance:none;box-sizing:border-box;width:100%;height:2px;
  background:transparent;border:0;padding:0;border-radius:var(--pill);margin:0;cursor:pointer}
.aec-glass input[type=range]:focus-visible,.sim input[type=range]:focus-visible,.vsim-track input[type=range]:focus-visible{outline:2px solid var(--ob);outline-offset:15px}
.aec-glass input[type=range]::-webkit-slider-runnable-track,.sim input[type=range]::-webkit-slider-runnable-track,.vsim-track input[type=range]::-webkit-slider-runnable-track{height:2px;border-radius:var(--pill);background:var(--ae-range-track,rgba(10,10,11,.16))}
.aec-glass input[type=range]::-moz-range-track,.sim input[type=range]::-moz-range-track,.vsim-track input[type=range]::-moz-range-track{height:2px;border-radius:var(--pill);background:var(--ae-range-track,rgba(10,10,11,.16))}
.aec-glass input[type=range]::-moz-range-progress,.sim input[type=range]::-moz-range-progress,.vsim-track input[type=range]::-moz-range-progress{background:transparent}
.aec-glass input[type=range]::-webkit-slider-thumb,.sim input[type=range]::-webkit-slider-thumb,.vsim-track input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;box-sizing:border-box;width:40px;height:27px;margin-top:-12.5px;
  border-radius:var(--pill);background:var(--ae-range-glass);border:1px solid rgba(255,255,255,.95);box-shadow:var(--ae-range-shadow);cursor:grab;transition:transform .55s cubic-bezier(.22,1.75,.4,1)}
.aec-glass input[type=range]::-moz-range-thumb,.sim input[type=range]::-moz-range-thumb,.vsim-track input[type=range]::-moz-range-thumb{box-sizing:border-box;width:40px;height:27px;
  border-radius:var(--pill);background:var(--ae-range-glass);border:1px solid rgba(255,255,255,.95);box-shadow:var(--ae-range-shadow);cursor:grab;transition:transform .55s cubic-bezier(.22,1.75,.4,1)}
.aec-glass input[type=range]:active::-webkit-slider-thumb,.sim input[type=range]:active::-webkit-slider-thumb,.vsim-track input[type=range]:active::-webkit-slider-thumb{cursor:grabbing;transform:scale(1.05)}
.aec-glass input[type=range]:active::-moz-range-thumb,.sim input[type=range]:active::-moz-range-thumb,.vsim-track input[type=range]:active::-moz-range-thumb{cursor:grabbing;transform:scale(1.05)}
/* Rebond visuel aux butées, sans mutation de la valeur ni du calcul. */
.aec-glass input[type=range].aec-bump::-webkit-slider-thumb,.sim input[type=range].aec-bump::-webkit-slider-thumb,.vsim-track input[type=range].aec-bump::-webkit-slider-thumb{transform:scaleX(1.45) scaleY(.78);transition:transform .1s}
.aec-glass input[type=range].aec-bump::-moz-range-thumb,.sim input[type=range].aec-bump::-moz-range-thumb,.vsim-track input[type=range].aec-bump::-moz-range-thumb{transform:scaleX(1.45) scaleY(.78);transition:transform .1s}
@media(prefers-reduced-motion:reduce){
  .aec-glass input[type=range]::-webkit-slider-thumb,.sim input[type=range]::-webkit-slider-thumb,.vsim-track input[type=range]::-webkit-slider-thumb{transition:none;transform:none}
  .aec-glass input[type=range]::-moz-range-thumb,.sim input[type=range]::-moz-range-thumb,.vsim-track input[type=range]::-moz-range-thumb{transition:none;transform:none}
}
@media(max-width:760px){
  .aec-glass{padding:18px}
  .aec-glass .result{padding:20px}
  .lph-ctas .btn{flex:1 1 100%}
}
/* Les curseurs sont la commande principale du simulateur et ne mesurent que la
   hauteur de leur rail (2px). Sur pointeur GROSSIER on monte la BOITE a 44px
   (book §06) et on redescend le filet sur les pseudo-elements de piste : la
   cible grandit, le trait ne bouge pas. Le rendu souris ne change pas.
   Onglets, segment et puces de duree passent aussi la barre des 44px : mesures a
   390px, ils tombaient a 43, 34 et 40px, tous sous la cote du book. */
@media(pointer:coarse){
  .aec-glass .tabs button,.aec-glass .seg button,.aec-glass .chips button{min-height:44px}
  .aec-glass input[type=range],.sim input[type=range],.vsim-track input[type=range]{height:44px}
  .aec-glass input[type=range]:focus-visible,.sim input[type=range]:focus-visible,.vsim-track input[type=range]:focus-visible{outline-offset:2px}
}

/* ============================================================================
   FIN-D-ARTICLE V2 (session 7, 20/08/2026) — pilules de maillage du bloc CTA
   ----------------------------------------------------------------------------
   Arbitrage Bastien : « /pour-aller-plus-loin » (dotlist) et « /sur-le-même-
   sujet » etaient deux sections soeurs empilees en fin d'article. Les liens
   d'argent rejoignent le bloc CTA en pilules compactes SOUS le bouton
   (pattern 14/16, variante sur surface ENCRE : la carte .art-cta est encre) ;
   la dotlist disparait des articles, l'eyebrow de fin d'article redevient
   unique. Markup : ae_article_pills_html() (inc/helpers.php), rendu par
   parts/article-conversion.php ou injecte dans le CTA porte par le contenu
   (single.php). Posees ICI et pas dans blog.css : partage de la session 7,
   blog.css appartient au chantier lisibilite.
   CONTRASTE CALCULE (jamais affirme) : #fff sur #0A0A0B = 19,8:1 ; lime
   #ADE83C sur #0A0A0B = 13,6:1 — AA en toute taille. La bordure est un repere,
   pas un texte. Cible tactile : 44px au doigt (book §06), comme .blog-cats. */
.cta-pills{display:flex;flex-wrap:wrap;gap:9px;margin-top:1.15rem}
.cta-pill{display:inline-flex;align-items:center;gap:9px;padding:9px 16px;border-radius:var(--pill);
  border:1px solid rgba(255,255,255,.24);color:#fff;text-decoration:none;
  font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;
  transition:border-color .25s,color .25s,transform .25s var(--ease)}
.cta-pill::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--lime);flex:none}
.cta-pill:hover{border-color:var(--lime);color:var(--lime);transform:translateY(-2px)}
@media(pointer:coarse){.cta-pill{min-height:44px}}

/* =====================================================================
   LP v2 — Session 8 (20/08/2026) : refonte 80/20 des pages villes,
   d'apres l'audit externe endosse par Bastien (docs/AUDIT-EXTERNE-LP-2026-08-20.md).
   REGLE DE COORDINATION : toutes les regles neuves de ce chantier vivent ICI,
   en fin de fichier — trois sessions tournent en parallele sur le kit
   (la section « fin-d-article v2 » ci-dessus appartient a la session 7).
   Tokens : uniquement ceux du kit, aucune couleur nouvelle.
   ===================================================================== */

/* --- Quick win c : visages valides remontes dans le heros (`.lph-faces`).
   Vignettes CARREES (book §10 : jamais circulaires), N&B qui passe en couleur
   au survol comme les tuiles du bloc equipe ; legende factuelle en corps.
   Le chevauchement des vignettes est separe par un lisere couleur de fond,
   pour que trois portraits se lisent comme trois personnes. --- */
.lph-faces{display:flex;align-items:center;gap:14px;margin-top:clamp(18px,2vw,24px)}
.lph-faces-imgs{display:flex;flex:0 0 auto}
.lph-faces-imgs img{width:52px;height:52px;object-fit:cover;object-position:50% 14%;
  border-radius:10px;border:2px solid var(--bg);display:block;
  filter:grayscale(1) contrast(1.04);transition:filter .45s ease;
  box-shadow:0 10px 24px -16px rgba(10,10,11,.55)}
.lph-faces-imgs img+img{margin-left:-10px}
.lph-faces:hover .lph-faces-imgs img{filter:none}
.lph-faces-cap{font-size:.92rem;line-height:1.45;color:var(--ob2);max-width:36ch}
.lph-faces-cap b{color:var(--ob);font-weight:600}
@media(max-width:520px){
  .lph-faces-imgs img{width:46px;height:46px}
}

/* --- Quick win a : la pilule d'avis du heros porte desormais l'attribution
   (« · cabinet Centre-Val de Loire ») sur les villes sans fiche locale. Mesuree
   484px a 375 de large : le `white-space:nowrap` du composant la faisait TRONQUER.
   En ecran etroit la pilule accepte le retour a la ligne — le compteur reste
   entier, l'attribution passe dessous, rien n'est coupe. --- */
@media(max-width:640px){
  .lph .hbadge-lt{white-space:normal;align-items:flex-start;
    padding-top:8px;padding-bottom:8px;border-radius:18px;line-height:1.5}
  .lph .hbadge-lt .hb-stars{margin-top:2px}
}

/* =====================================================================
   LP v2 — PHASE 2 : prototype Orleans du nouvel ordre en 10 blocs
   (mode `lp_v2` du lp/{slug}.json, actif sur courtier-orleans seulement).
   ===================================================================== */

/* --- Bloc 1 : heros humain. La carte de verre y est REVENUE le 26/08
   (Session 12, decision Bastien) : la colonne gauche reprend donc la base de
   560px du heros v1 et n'a plus besoin d'etre bornee — c'est la carte qui
   occupe la colonne droite. Les visages gardent la place que l'audit leur
   donne (le referent EST le heros).
   La carte n'est plus enfant direct de `.lph-in` : elle est enveloppee dans le
   repli `.lph-simfoldwrap` (A12, voir plus bas). Les bases de colonne de
   `.lph .aec-glass` ne s'appliqueraient donc plus ; c'est le repli qui les
   porte. --- */
.lph--v2 .lph-in{padding-bottom:clamp(30px,4vw,54px)}
/* Le repli du simulateur EST la colonne droite du heros : mêmes bases que
   `.lph .aec-glass` (flex 380px, plafond 620px), sinon la carte se retrouverait
   pleine largeur ou ecrasee. `min-width:0` permet au verre de retrecir dans son
   conteneur au lieu de deborder. */
.lph--v2 .lph-simfoldwrap{flex:1 1 380px;min-width:280px;max-width:620px}
.lph--v2 .lph-simfoldwrap .aec-glass{max-width:none;min-width:0}
.lph--v2 .lph-faces{margin-top:clamp(22px,2.8vw,32px)}
.lph--v2 .lph-faces-imgs img{width:64px;height:64px;border-radius:12px}
.lph--v2 .lph-faces-cap{font-size:1.02rem;max-width:46ch}

/* --- Bloc 2 : les 3 reponses immediates. Trois « blocs chiffres » du book
   §08 (label mono, titre, corps), ouverts par un filet haut — la meme
   anatomie que les taux, appliquee a trois faits de service. --- */
.lp2-rep-g{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:clamp(1.3rem,2.6vw,2.2rem);margin-top:1.5rem}
.lp2-rep-c{border-top:1px solid rgba(10,10,11,.13);padding-top:1rem;
  display:flex;flex-direction:column;gap:.55rem}
.lp2-rep-c .k{font-family:var(--mono);font-size:.66rem;font-weight:500;
  letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.lp2-rep-c b{font-family:var(--sky);font-weight:600;font-size:1.12rem;
  letter-spacing:-.02em;line-height:1.3;color:var(--ob)}
.lp2-rep-c p{font-size:.93rem;line-height:1.65;color:var(--ob2);margin:0}

/* --- Bloc 3 : UN vrai avis. Carte blanche unique, citation en corps
   genereux ; l'auteur et l'attribution dessous. --- */
.lp2-review{background:var(--white);border:1px solid var(--line);
  border-radius:var(--r-card);padding:clamp(1.5rem,3vw,2.2rem);
  max-width:760px;margin:0;box-shadow:0 20px 44px -36px rgba(10,10,11,.5)}
.lp2-review blockquote{margin:.8rem 0 0;font-size:clamp(1.02rem,1.7vw,1.22rem);
  line-height:1.75;color:var(--ob)}
.lp2-review figcaption{margin-top:1.1rem;display:flex;gap:10px;align-items:baseline;
  flex-wrap:wrap;font-size:.9rem;color:var(--ob2)}
.lp2-review figcaption b{font-family:var(--sky);font-weight:600;color:var(--ob)}
.lp2-review figcaption span::before{content:"·";margin-right:10px;color:var(--muted)}

/* Session 12 (26/08) : `.lp2-minisim`, `.lp2-simcta` et `.lp2-glasswrap` sont
   partis avec les deux simulateurs du corps (un seul moteur [data-lpsim] par
   page, la carte vit dans le heros). `.lp2-more` reste : le bloc « courtier
   dedie » s'en sert pour son lien de fin. */
.lp2-more{margin-top:1rem;font-size:.92rem;color:var(--ob2)}

/* --- Bloc 7 bis : le coût en accordeons. Les titres restent des H2
   (semantique intacte) mais prennent l'habit de question du composant
   FAQ ; le wrapper h2 ne doit rien imposer au bouton. --- */
.lp2-acc{display:flex;flex-direction:column;gap:.7rem;margin-top:1.6rem;max-width:860px}
.lp2-acc-h{margin:0;font-size:1rem;letter-spacing:0;line-height:1.3}

/* ---------- Session 10 : medaillons d'initiales et replis de marque ----------
   Pattern 29 (docs/PATTERNS-DA.md). Les portraits du depot sont des images
   GENEREES : tant que ae_portraits_publiables() rend false, tout gabarit qui
  affiche une personne rend ses initiales, et les facades d'agence deviennent
  des surfaces de marque neutres. Contrastes calcules : encre sur lime 13,56:1 (AAA),
   blanc sur encre 19,79:1 (AAA).
   `.lp-member-ini` remplace au 30/08/2026 son ancien inset:0 (medaillon rempli
   toute la case photo 4:5 de `.lp-member .ph`, une surface lime immense suivie
   d'un grand vide). Il rejoint `.lph-faces-ini` a 52px : le bloc equipe des 12 LP
   ne pose plus du tout le cadre `.ph` quand le portrait n'est pas publiable
   (etat compact, `template-lp-locale.php`), le medaillon n'a donc plus de case
   a remplir. */
.roster-ini,.lph-faces-ini,.lp-member-ini{display:flex;align-items:center;justify-content:center;
  background:var(--lime);color:var(--ob);
  font-family:var(--mono);font-weight:500;letter-spacing:.02em;line-height:1}
.roster-ini{position:absolute;inset:0;font-size:2.4rem}
.lph-faces-ini,.lp-member-ini{width:52px;height:52px;border-radius:10px;font-size:.86rem;flex:none}
/* Heros SANS badges (page /simulation-de-pret-immobilier/) : l'oeil-de-boeuf
   remplace la pilule, sa pastille respire de la meme facon. MEME duree que
   `.aec-dot.is-live` et que la pastille des badges — on n'introduit pas une
   troisieme vitesse pour un troisieme point vert. */
.lph .eyebrow::before{animation:aecPulse 2.8s ease-in-out infinite}

/* A12 — la pilule « hypothese », collee au chiffre dans la ligne de label.
   RELEVE LE 27/08 : la classe est posee par parts/simulateur-glass.php, donc par
   les 14 pages qui montent la carte, mais sa SEULE regle vivait dans le <style>
   en ligne de template-lp-locale.php. Consequences constatees : sur l'accueil,
   qui ne charge pas ce <style>, la pilule sort SANS AUCUN STYLE ; sur les 12 LP
   elle sort en var(--ob2) sur une surface ENCRE, soit 2,70:1 — un mot de mention
   legale illisible. La regle remonte donc au kit, scopee `.aec-glass` (0,2,0,
   elle bat la regle en ligne des LP), et ses couleurs passent aux alphas mesures
   sur encre : blanc 72 % = 10,24:1. Un composant partage emporte son CSS. */
.aec-glass .result-hyp{margin-left:.5rem;padding:.12rem .5rem;border-radius:var(--pill);
  border:1px solid rgba(255,255,255,.28);font-family:var(--mono);font-size:12px;
  letter-spacing:.06em;text-transform:none;color:rgba(255,255,255,.72);white-space:nowrap}

/* ---------- PAGE CONTACT — blocs portes du handoff Dimitri du 21/08 ----------
   Trois blocs de sa colonne gauche (carte honoraires sur encre, quatre tuiles de
   reassurance, rangee de chiffres a filet) + ses cartes de canal. Les trois
   premiers vivent DANS le heros `.blog-head`, sous le chapo : sa maquette les y
   pose a 28-30px du texte, pas dans une section a part.

   REGLE 0 BIS — ce qui est REPRIS plutot que reecrit : `.card` (pattern 7) porte
   le fond blanc, le bord et l'ombre des quatre tuiles comme des cartes de canal ;
   `.rvlink` (pattern 13, pastille lime + fleche mono, gap 9 -> 13px) porte le
   « Appeler maintenant » de la maquette, qui est exactement ce composant.
   Ce qui n'existait pas : la carte de FAIT sur encre (chiffre lime + phrase), la
   tuile a trois lignes (label / titre / sous-titre) et la carte de CANAL (label,
   valeur, corps de texte, fleche). `.nextcard` s'arrete a « label + titre +
   fleche » sans corps, `.stb` est une grille de quatre cartes a legende mono
   capitale — la rangee de Dimitri est une rangee de trois, a filet superieur et
   sans carte. La recherche a eu lieu, elle conclut a un manque.

   COTES : tous les labels mono sont a 12px, jamais aux 10-11px de la maquette
   (book §13 : rien sous 12px — c'est la dette deja remboursee au pattern 27).

   CONTRASTES CALCULES, jamais affirmes :
     blanc a 70 % compose sur l'encre #0A0A0B -> 9,71:1 (AAA), corps de la carte ;
     blanc a 55 % compose sur l'encre         -> 6,26:1 (AA), label HONORAIRES.
       La maquette l'ecrit a 45 %, soit 4,50:1, pile sur le seuil : remonte ;
     lime #ADE83C sur encre -> 13,56:1, deja au kit ;
     #55565A sur blanc      -> 7,33:1, deja au kit ;
     #6E6E73 sur le fond #F7F7F5 -> 4,69:1, la cote des legendes du kit.
   Aucun couple de couleurs nouveau.

   LARGEUR 780px : chez Dimitri cette colonne fait 420 a 600px parce qu'un
   formulaire l'accompagne. Le formulaire n'est pas porte (aucun endpoint de
   reception, cf. l'en-tete de parts/page-contact.php) ; laissee libre sur la
   pleine largeur de 1240px, la phrase des honoraires depasserait 110 caracteres
   et les quatre tuiles feraient 300px chacune. */
.ct-heroblocs{max-width:780px}
.ct-hono{margin-top:1.8rem;background:var(--ob);color:#fff;border-radius:20px;
  padding:24px clamp(20px,2.4vw,28px);display:flex;gap:clamp(18px,2.4vw,30px);
  flex-wrap:wrap;align-items:center}
.ct-hono-k{flex:0 0 auto}
.ct-hono-k .k{font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:.1em;
  text-transform:uppercase;color:rgba(255,255,255,.55)}
.ct-hono-k b{display:block;font-family:var(--mono);font-weight:500;font-variant-numeric:tabular-nums;
  font-size:clamp(34px,4vw,44px);letter-spacing:-.055em;line-height:1;color:var(--lime);margin-top:8px}
.ct-hono p{flex:1 1 300px;min-width:255px;font-size:15px;line-height:1.55;
  color:rgba(255,255,255,.7);margin:0}
.ct-hono strong{color:#fff;font-weight:600}
/* GRILLE et non `flex:1 1 200px` comme la maquette : mesure au rendu a 780px,
   quatre tuiles en flex se placent 3 + 1 (le calcul de ligne se fait sur la base
   200px, pas sur le min-width) et la quatrieme s'etire alors sur toute la largeur.
   Une grille auto-fit range quatre colonnes tant qu'elles tiennent, en fait trois
   puis deux ensuite, et la tuile esseulee garde la largeur de ses voisines. */
.ct-assur{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:12px;margin-top:1.8rem}
/* Rayon 14px et non les 22px de `.card` : quatre tuiles de 180px avec le rayon
   d'une grande carte tournent a la pastille. La maquette dit 14, on garde 14. */
.ct-assur .card{padding:18px;border-radius:14px}
.ct-assur .k{font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ob2)}
.ct-assur b{display:block;font-family:var(--sky);font-size:16px;font-weight:600;
  letter-spacing:-.01em;color:var(--ob);margin-top:8px}
.ct-assur .s{display:block;font-size:13.5px;line-height:1.45;color:var(--ob2);margin-top:4px}
.ct-stats{display:flex;gap:26px;flex-wrap:wrap;margin-top:1.9rem;padding-top:1.4rem;
  border-top:1px solid var(--line)}
.ct-stats>div{min-width:110px}
.ct-stats b{display:block;font-family:var(--mono);font-weight:500;font-variant-numeric:tabular-nums;
  font-size:24px;letter-spacing:-.03em;color:var(--ob)}
.ct-stats span{display:block;font-size:12.5px;line-height:1.4;color:#6E6E73;margin-top:3px}
@media(max-width:760px){
  .ct-hono{padding:20px}
  /* Les tuiles descendent seules a deux colonnes puis a une (auto-fit) : rien a
     forcer ici. On borne juste le chiffre du heros, qui ne doit pas manger sa
     ligne quand la carte passe en pile. */
  .ct-hono-k b{font-size:34px}
}

/* CANAUX — trois cartes confirmees : standard, e-mail et messagerie de Dimitri.
   Grille explicite plutot qu'auto-fit/flex : aux largeurs de recette 900 et
   1440px les trois restent sur une ligne ; a 375px elles passent toutes en pile.
   Il n'existe donc aucun etat intermediaire 2 + 1 avec une carte orpheline. */
.ct-canaux{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;
  margin-top:1.9rem;max-width:920px}
.ct-canal{min-width:0;padding:26px;border-radius:18px;
  display:flex;flex-direction:column;gap:8px;color:var(--ob);
  transition:transform .25s var(--ease),border-color .25s var(--ease)}
.ct-canal:hover{transform:translateY(-4px);border-color:var(--ob)}
.ct-canal .k{font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ob2)}
.ct-canal b{font-family:var(--sky);font-size:20px;font-weight:600;letter-spacing:-.02em}
.ct-canal--tel b,.ct-canal--messagerie b{font-family:var(--mono);font-variant-numeric:tabular-nums;
  letter-spacing:-.03em;white-space:nowrap}
.ct-canal p{font-size:14.5px;line-height:1.5;color:var(--ob2);margin:4px 0 0}
/* La fleche est poussee en bas : trois cartes de corps inegaux gardent leurs
   fleches sur la meme ligne, ce qu'une pile simple ne donne pas. */
.ct-canal .rvlink{margin-top:auto;padding-top:.7rem}
.ct-canal:hover .rvlink{gap:13px}
.ct-canaux-note{max-width:780px;margin-top:1.2rem;font-size:.92rem;line-height:1.55;color:var(--ob2)}
/* Un lien hors carte doit se voir : le kit ne souligne rien par defaut
   (`a{color:inherit;text-decoration:none}`), et cette note est du texte courant. */
.ct-canaux-note a{color:var(--ob);text-decoration:underline;text-underline-offset:3px}
@media(max-width:820px){
  .ct-canaux{grid-template-columns:minmax(0,1fr);max-width:100%}
  .ct-canal{padding:22px}
}

/* ---------- À propos : la frise, les convictions, les profils, le recrutement
   (session 12, lot F — portage des sections du handoff du 21/08 absentes du
   staging). Tout ce qui suit est scope sous `.apropos-*` : aucune de ces regles
   ne peut repeindre une autre page. -------------------------------------- */

/* 1. FRISE 2022 -> aujourd'hui (pattern 36 : liste a filets, le survol decale
      par padding-left et JAMAIS par transform — un transform sur une rangee de
      texte long repeint toute la colonne).
      L'annee : la maquette la met a #87878C, soit 3,33:1 sur le fond #F7F7F5 —
      SOUS la barre AA, et a 12px. Recalculee a #6E6E73 : 4,73:1 sur le fond,
      5,07:1 sur le blanc du survol. Meme correction que `.eyebrow` du kit. */
.apropos-jalons{list-style:none;margin:0;padding:0;max-width:820px;
  border-top:1px solid rgba(10,10,11,.13)}
.apropos-jalon{display:flex;flex-wrap:wrap;gap:18px;align-items:baseline;padding:15px 8px;
  border-bottom:1px solid rgba(10,10,11,.11);
  transition:background .25s var(--ease,cubic-bezier(.16,.7,.3,1)),padding-left .25s var(--ease,cubic-bezier(.16,.7,.3,1)),box-shadow .25s var(--ease,cubic-bezier(.16,.7,.3,1))}
.apropos-jalon:hover{background:var(--white);padding-left:16px;
  box-shadow:0 14px 30px -22px rgba(10,10,11,.35)}
.apropos-jalon b{font-family:var(--mono);font-weight:500;font-size:12px;letter-spacing:.05em;
  color:#6E6E73;flex:0 0 40px;font-variant-numeric:tabular-nums}
.apropos-jalon span{flex:1 1 260px;font-size:14.5px;line-height:1.5;color:var(--ob2);
  text-wrap:pretty}
/* `.tbc-inline` du kit peint le lime en COULEUR DE TEXTE. Mesure : 1,36:1 sur
   #F7F7F5, illisible. Ses cinq usages existants sont TOUS sur encre (13,56:1) ;
   sur surface claire on garde le meme signal en l'inversant — encre sur pastille
   lime, 15,42:1 sur le fond et 15,90:1 sur le blanc du survol. Scope a la frise :
   on ne touche pas aux cinq usages de l'accueil. */
.apropos-jalon .tbc-inline{color:var(--ob);background:rgba(173,232,60,.55);
  border-bottom-color:rgba(10,10,11,.4);padding:0 .3em;border-radius:3px}

/* 2. CONVICTIONS — trois cartes, la ou la page rendait trois paragraphes nus.
      Le tag mono est a #6E6E73 sur le BLANC de la carte : 5,07:1. */
.apropos-vals{display:flex;gap:16px;flex-wrap:wrap;margin-top:2rem}
.apropos-val{flex:1 1 320px;min-width:270px;background:var(--white);
  border:1px solid rgba(10,10,11,.1);border-radius:20px;padding:30px;
  display:flex;flex-direction:column;gap:12px;transition:transform .3s var(--ease,cubic-bezier(.16,.7,.3,1))}
.apropos-val:hover{transform:translateY(-4px)}
.apropos-val-k{display:flex;align-items:center;gap:8px;font-family:var(--mono);
  font-size:12px;letter-spacing:.06em;color:#6E6E73}
.apropos-val-k .aec-dot{width:6px;height:6px}
.apropos-val-t{font-size:clamp(21px,2.1vw,26px);font-weight:600;letter-spacing:-.02em;
  line-height:1.15;margin:0}
.apropos-val p{font-size:15px;line-height:1.55;color:var(--ob2);margin:0;text-wrap:pretty}
/* Deux classes sur le meme selecteur d'element : la mention legale doit gagner
   sur `.apropos-val p` (0,1,1), d'ou les deux classes (0,2,1). */
.apropos-val p.apropos-val-legal{font-size:12.5px;line-height:1.5;color:var(--muted);
  margin:auto 0 0;padding-top:.9rem;border-top:1px solid rgba(10,10,11,.09)}

/* 3. /ETHIQUE — la carte encre qui ferme les convictions, dans la meme section.
      Blanc 60 % sur encre = 7,30:1 (sur-titre), blanc 72 % = 10,20:1 (corps). */
.apropos-ethic{display:flex;gap:clamp(22px,3vw,40px);flex-wrap:wrap;align-items:center;
  margin-top:16px;background:var(--ob);color:#fff;border-radius:20px;
  padding:clamp(26px,3vw,36px)}
.apropos-ethic-l{flex:1 1 320px;min-width:270px}
.apropos-ethic-k{display:flex;align-items:center;gap:8px;font-family:var(--mono);
  font-size:12px;letter-spacing:.06em;color:rgba(255,255,255,.6)}
.apropos-ethic-k .aec-dot{width:6px;height:6px}
.apropos-ethic-t{font-family:var(--sky);font-size:clamp(22px,2.4vw,30px);font-weight:600;
  letter-spacing:-.03em;line-height:1.15;color:#fff;margin:12px 0 0}
/* `>` : la regle de corps ne doit pas redescendre sur `.apropos-ethic-t`. */
.apropos-ethic>p{flex:1 1 360px;min-width:270px;font-size:16px;line-height:1.55;
  color:rgba(255,255,255,.72);margin:0;text-wrap:pretty}

/* 4. PROFILS ACCOMPAGNES — meme forme que les cartes « partenariats » de la
      maquette, sans aucun nom de tiers (raison ecrite dans le gabarit). */
.apropos-parts{display:flex;gap:14px;flex-wrap:wrap;margin-top:1.9rem}
.apropos-part{flex:1 1 260px;min-width:250px;background:var(--white);
  border:1px solid rgba(10,10,11,.1);border-radius:16px;padding:24px;
  transition:transform .25s var(--ease,cubic-bezier(.16,.7,.3,1))}
.apropos-part:hover{transform:translateY(-3px)}
.apropos-part b{display:block;font-family:var(--sky);font-size:17px;font-weight:600;
  letter-spacing:-.02em;color:var(--ob)}
.apropos-part p{font-size:14.5px;color:var(--ob2);line-height:1.5;margin:8px 0 0;
  text-wrap:pretty}

/* 5. /ON-RECRUTE — carte pleine largeur. Le bouton reste `.btn.btn-primary` du
      kit : ni son ombre ni son reflet (aecShine, `.btn-primary::after`) ne sont
      redefinis ici. Les h1-h4 du kit n'ont PAS de reset de marge : le h2 de
      cette carte porte la sienne, sinon le navigateur pose son 1em. */
.apropos-recrut{background:var(--white);border:1px solid rgba(10,10,11,.1);
  border-radius:24px;padding:clamp(30px,4vw,52px);display:flex;gap:34px;flex-wrap:wrap;
  align-items:center}
.apropos-recrut-l{flex:1 1 380px;min-width:270px}
.apropos-recrut-l .seyeb{margin-bottom:0}
.apropos-recrut-l h2{font-size:clamp(28px,3.6vw,46px);line-height:1.02;letter-spacing:-.038em;
  font-weight:600;margin:.9rem 0 0;text-wrap:balance}
.apropos-recrut-l p{font-size:16.5px;color:var(--ob2);line-height:1.55;margin:.9rem 0 0;
  max-width:520px;text-wrap:pretty}

/* ============================================================================
   PARCOURS POST-SIMULATION — pattern 41
   ----------------------------------------------------------------------------
   Le balisage `.simhead` / `.simflow` / `.simaccord` / `.simprep` / `.simend` vient du handoff
   Dimitri du 21/08. Il etait complet depuis la PR #90 mais n'avait aucune structure
   CSS : cartes empilees en texte nu, panneau encre transparent, bande finale claire.

   REUTILISATION AVANT CREATION : `.simflow-card` porte aussi `.card` (pattern 7),
   les titres restent `.h2` / `.hl`, les labels `.eyebrow`, les actions `.btnrow` et
   `.btn`. Les classes ci-dessous ne portent que la composition specifique a ce
   parcours. Cotes transposees de `design/source-dimitri-2026-07-29/
   design_handoff_site_aeconomia/designs/Simulation.dc.html`, avec le plancher 12px du
   book applique aux labels mono.

   CONTRASTES CALCULES, aucun couple neuf : blanc / #0A0A0B = 19,79:1 ;
   #ADE83C / #0A0A0B = 13,56:1 ; #55565A / blanc = 7,33:1 ;
   #6E6E73 / blanc = 5,07:1 ; #6E6E73 / #F7F7F5 = 4,73:1 ;
   #55565A / #F7F7F5 = 6,83:1. #ADE83C / blanc = 1,46:1 : ce couple reste strictement
   reserve aux puces decoratives, redondantes avec le texte et les numeros.
   ============================================================================ */
.sim-hero-legal{font-size:12.5px;line-height:1.55;margin:18px 0 0;max-width:480px;
  color:#6E6E73}
.sim-hero-legal strong{font-weight:600;color:var(--ob2)}

.simhead{display:flex;gap:40px;flex-wrap:wrap;align-items:flex-end}
.simhead>.h2{flex:1 1 520px;min-width:280px;margin:0}
.simhead-p{flex:1 1 280px;min-width:260px;max-width:520px;margin:0;
  font-size:16px;line-height:1.55;color:var(--ob2);text-wrap:pretty}

.simflow{display:flex;flex-wrap:wrap;gap:16px;margin-top:32px}
.simflow-card{padding:26px;border-radius:18px;
  flex:1 1 280px;min-width:min(100%,280px);
  display:flex;flex-direction:column;gap:10px;
  transition:transform .25s var(--ease),border-color .25s var(--ease)}
.simflow-card:hover{transform:translateY(-4px);border-color:var(--ob)}
.simflow-hd{display:flex;align-items:center;justify-content:space-between;gap:16px}
.simflow-n,.simflow-when{font-family:var(--mono);font-size:12px;font-weight:500;
  font-variant-numeric:tabular-nums;line-height:1.2;color:#6E6E73}
.simflow-when{color:var(--ob2);text-align:right}
.simflow-t{font-size:19px;line-height:1.2;letter-spacing:-.02em;margin-top:6px}
.simflow-card p{font-size:14.5px;line-height:1.5;color:var(--ob2);margin:0;text-wrap:pretty}

.simaccord{position:relative;overflow:hidden;margin-top:16px;background:var(--ob);
  color:#fff;border-radius:22px;padding:clamp(28px,3.2vw,44px)}
.simaccord::before{content:"";position:absolute;top:-200px;right:5%;width:540px;height:470px;
  pointer-events:none;background:radial-gradient(50% 50% at 50% 50%,rgba(173,232,60,.13),rgba(173,232,60,0) 70%)}
.simaccord-in{position:relative;display:flex;gap:clamp(26px,3.4vw,48px);
  flex-wrap:wrap;align-items:flex-start}
.simaccord-l{flex:1 1 400px;min-width:280px}
.simaccord-k{font-size:12px;color:rgba(255,255,255,.68)}
.simaccord-t{font-size:clamp(26px,3vw,38px);font-weight:600;letter-spacing:-.035em;
  line-height:1.08;color:#fff;margin-top:16px;text-wrap:balance}
.simaccord-p{font-size:16px;line-height:1.55;color:rgba(255,255,255,.68);
  margin:16px 0 0;max-width:520px;text-wrap:pretty}
.simaccord-p2{font-size:15px;color:rgba(255,255,255,.62);margin-top:14px}
.simaccord .btnrow{margin-top:28px}
.simaccord .sim-tel,.simend .sim-tel{font-family:var(--mono);font-variant-numeric:tabular-nums}
.simaccord-rows{flex:1 1 300px;min-width:265px;display:flex;flex-direction:column;
  gap:1px;background:rgba(255,255,255,.14);border-radius:18px;overflow:hidden}
.simaccord-row{background:var(--ob);padding:20px 22px}
.simaccord-rk{display:block;font-family:var(--mono);font-size:12px;font-weight:500;
  letter-spacing:.1em;color:rgba(255,255,255,.62)}
.simaccord-row>b{display:block;font-size:16.5px;font-weight:600;letter-spacing:-.02em;
  line-height:1.35;color:#fff;margin-top:9px}
.simaccord-zero{display:flex;align-items:baseline;gap:11px;flex-wrap:wrap;margin:9px 0 0}
.simaccord-zero b{font-family:var(--mono);font-size:28px;font-weight:500;letter-spacing:-.05em;
  line-height:1;color:var(--lime);white-space:nowrap;flex:0 0 auto}
.simaccord-zero span{font-size:14.5px;line-height:1.45;color:rgba(255,255,255,.68)}

.simprep{display:flex;gap:16px;flex-wrap:wrap;align-items:flex-start}
.simprep-l{flex:1 1 380px;min-width:280px}
.simprep-h{font-size:clamp(30px,4vw,50px);line-height:1.02;letter-spacing:-.038em;
  margin:0;text-wrap:balance}
.simprep-p{font-size:16px;line-height:1.55;color:var(--ob2);margin:16px 0 0;
  max-width:460px;text-wrap:pretty}
.simprep-cta{margin-top:26px}
.simpieces{flex:1 1 400px;min-width:280px;list-style:none;margin:0;padding:8px 0;
  background:var(--white);border:1px solid rgba(10,10,11,.1);border-radius:18px}
.simpieces li{display:flex;gap:12px;align-items:baseline;padding:14px 22px;
  border-bottom:1px solid rgba(10,10,11,.06)}
.simpieces li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--lime);
  display:block;flex:0 0 auto} /* decoratif : le libelle + le numero portent l'information */
.simpieces .lbl{font-size:15px;line-height:1.45;color:var(--ob);flex:1;min-width:0}
.simpieces .n{font-family:var(--mono);font-size:12px;font-weight:500;line-height:1.2;
  font-variant-numeric:tabular-nums;color:#6E6E73;white-space:nowrap}

.simend{margin-top:var(--sec);padding:clamp(70px,8vw,110px) var(--pad);
  background:var(--ob);color:#fff}
.simend-in{max-width:var(--wrap);margin:0 auto;display:flex;gap:32px;
  flex-wrap:wrap;align-items:center}
.simend-l{flex:1 1 400px;min-width:280px}
.simend-k{font-size:12px;color:rgba(255,255,255,.68)}
.simend-l h2{font-size:clamp(34px,4.6vw,60px);line-height:1;letter-spacing:-.042em;
  font-weight:600;color:#fff;margin:14px 0 0;text-wrap:balance}
.simend-l h2 .lime{color:var(--lime)}
.simend-l p{font-size:17px;color:rgba(255,255,255,.7);line-height:1.55;
  margin:16px 0 0;max-width:520px;text-wrap:pretty}
.simend-in>.btnrow{flex:0 1 auto;gap:12px}

@media(max-width:760px){
  .simhead{gap:20px;align-items:flex-start}
  .simhead>.h2,.simhead-p{flex-basis:100%;min-width:0}
  .simflow{margin-top:26px}
  .simaccord{padding:28px 20px}
  .simaccord-in{gap:28px}
  .simaccord-l,.simaccord-rows{flex-basis:100%;min-width:0}
  .simaccord .btnrow,.simend .btnrow{width:100%}
  .simaccord .btn,.simend .btn{width:100%;white-space:normal}
  .simprep-l,.simpieces{flex-basis:100%;min-width:0}
  .simprep-cta{width:100%;white-space:normal}
  .simend{padding:64px var(--pad)}
  .simend-in{gap:28px}
  .simend-l{flex-basis:100%;min-width:0}
}

/* ============================================================================
   PAGE DOCUMENT LEGALE — /politique-de-confidentialite-mentions-legales/
   ----------------------------------------------------------------------------
   Portage du handoff Dimitri du 21/08 (pose le 27/08/2026). La page n'avait jamais
   ete repassee en design : un mur de texte dans UNE carte, 18 titres en prose brute.
   La maquette la traite en DOCUMENT — colonne etroite, fiches a label mono, chrome
   reduit — et c'est ce parti qui est porte ici.

   Regle 0 bis appliquee avant d'ecrire : `.card` (l.354) donne le fond et le bord
   mais impose une ombre, que la maquette ne veut pas ; `.nextcard-k` (l.1146) est le
   label mono le plus proche mais porte une pastille lime en ::before que ces cartes
   n'ont pas. Aucune des quinze classes *card* du kit ne rend « label mono nu +
   prose ». D'ou `.lgcard`, seul composant reellement neuf de ce lot.

   Deux cotes de la maquette ne sont PAS reprises, et ce ne sont pas des choix
   esthetiques :
     - label mono a 10,5px -> 12px : le book §13 interdit tout texte sous 12px, et le
       pattern 27 a deja remonte ce plancher partout ailleurs ;
     - #87878C -> #6E6E73 : 3,57:1 contre 5,07:1 sur blanc (calcul WCAG fait pour ce
       lot). C'est la substitution que `.eyebrow` applique deja depuis le lot 2.
   ========================================================================= */
.lgdoc{container-type:inline-size;max-width:884px;margin:0 auto;
  padding:34px clamp(1.2rem,5vw,1.4rem) 90px}
/* La surcharge `.lgdoc [id]{scroll-margin-top:24px}` est RETIREE (04/09/2026, lot 2) :
   elle datait du chrome reduit de la maquette, jamais pose — la page garde la nav sticky
   (« CHROME STANDARD, ET C'EST UN CHOIX », page-legal.php). Avec 24px, une arrivee sur
   #cookies ou sur un chapitre du sommaire posait le titre SOUS la barre. La regle globale
   [id]{scroll-margin-top:clamp(118px,12vh,132px)} du haut de ce fichier s'applique donc.

   SOMMAIRE DU TEXTE INTEGRAL (`.lgdoc .toc`, 04/09/2026) — dette P1 de l'audit du 29/08
   (« mieux jalonner la page legale sans retirer son contenu ») : 16 chapitres, ~3 900
   mots, 27 000px de haut a 375px, sans une ancre. Le composant est le sommaire d'article
   de blog.css (`.toc`, `.toc-head`, `.toc-list`, scrollspy `[data-toc]` du kit), charge
   sur cette page virtuelle — regle 0 bis, rien de neuf. Trois regles seulement : ici il
   vit dans la colonne du document, pas dans un aside sticky, donc pas de bouton de
   pliage (aucun script de page) — la liste reste ouverte a toute largeur et l'en-tete
   « Sommaire · 16 sections » reste visible sous 980px, ou blog.css le masque pour
   l'article. */
.lgdoc .toc{margin-top:26px}
.lgdoc .toc-list{columns:2;column-gap:2rem}
.lgdoc .toc-list li{break-inside:avoid}
@media(max-width:980px){
  .lgdoc .toc .toc-head{display:flex}
  .lgdoc .toc-list,.lgdoc .toc-list.open{display:block;columns:1;margin-top:0}
}

.lgdoc-top{display:flex;align-items:center;justify-content:space-between;
  gap:14px;flex-wrap:wrap;margin-bottom:52px}

.lgdoc-h1{font-family:var(--sky);font-size:clamp(36px,5cqw,54px);line-height:1;
  letter-spacing:-.042em;font-weight:600;color:var(--ob);margin:0;
  display:flex;align-items:flex-end;gap:10px;flex-wrap:wrap}
/* La maquette ecrit le point final en #ADE83C : lime en texte sur fond clair =
   1,36:1, interdit par le book ET par WCAG (meme faute que les numeros de listes,
   deja corrigee l.556). Le point devient la pastille du kit, aria-hidden : meme
   signal vert, meme place, zero texte lime. */
.lgdoc-h1-dot{width:9px;height:9px;border-radius:50%;background:var(--lime);
  display:block;flex:none;margin-bottom:.12em}

.lgstack{display:flex;flex-direction:column;gap:14px;margin-top:38px}

.lgcard{background:var(--white);border:1px solid var(--line);border-radius:18px;
  padding:24px 26px;box-shadow:none}
.lgcard-k{font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:.09em;
  text-transform:uppercase;color:#6E6E73}
.lgcard p{font-size:.97rem;line-height:1.6;color:var(--ob2);margin:10px 0 0}
.lgcard strong{color:var(--ob);font-weight:600}
.lgcard em{font-style:italic;color:var(--ob2)}
.lgcard a{font-weight:600;color:var(--ob);text-decoration:underline;text-underline-offset:3px}
.lgcard a:hover{color:var(--ob2)}
/* Le marqueur {a confirmer} est lime par defaut, ce qui marche sur les bandes encre
   de l'accueil (13,56:1) mais pas sur une carte blanche (1,46:1). Sur fond clair le
   texte reprend --ob2 (7,33:1) et le signal vert passe dans le filet, decoratif. */
.lgcard .tbc-inline{color:var(--ob2);border-bottom-color:var(--lime)}

/* Le corpus juridique porte : les fiches resument, elles ne remplacent pas. Les
   intertitres etaient rendus en `<h2 class="h3">`, or `.h3` n'existe dans AUCUNE
   feuille du theme — 18 titres tombaient sur la taille par defaut du navigateur.
   Ils sont dimensionnes ici, dans le scope du corpus, sans classe fantome. */
.lgdoc-corpus{margin-top:56px}
.lgdoc-corpus h2{font-size:clamp(1.35rem,2.4vw,1.7rem);line-height:1.15;
  letter-spacing:-.03em;margin:2.6rem 0 0}
.lgdoc-corpus h3{font-size:1.06rem;line-height:1.25;letter-spacing:-.02em;margin:1.8rem 0 0}
.lgdoc-corpus h4{font-size:.98rem;line-height:1.3;margin:1.4rem 0 0}
.lgdoc-corpus .dotlist{margin:1rem 0 1.4rem}
.lgdoc-warn{margin-top:2.4rem}

.lgdoc-foot{display:flex;gap:14px;flex-wrap:wrap;align-items:center;
  justify-content:space-between;margin-top:44px;padding-top:22px;
  border-top:1px solid var(--line)}
/* #87878C de la maquette fait 3,33:1 sur le fond de page : echec AA. --ob2 vaut
   6,83:1 sur ce meme fond (calcul WCAG). */
.lgdoc-copy{font-size:12.5px;color:var(--ob2)}

@media(max-width:600px){
  .lgdoc{padding-bottom:64px}
  .lgdoc-top{gap:10px;margin-bottom:40px}
  .lgcard{padding:20px 18px}
  .lgdoc-corpus{margin-top:44px}
}

/* --- {a confirmer} PUBLIC, a ne pas confondre avec .tbc -----------------------
   .tbc / .tbc-block sont des marqueurs de relecture INTERNE, que home.css masque
   (display:none !important) pour qu'ils ne fuient jamais cote public.
   .tbc-inline est l'inverse : un fait que la page ASSUME d'afficher tant qu'il
   n'est pas tranche, comme l'exige CLAUDE.md (pattern 31). Il se voit,
   volontairement, et il bloque la mise en production du bloc qui le porte.

   POURQUOI IL REMONTE ICI : la regle vivait dans home.css, chargee sur la seule
   front page et sur /simulation-de-pret-immobilier/ (functions.php l.1191-1200).
   Sur toute autre page — la page mentions en porte deux, le SIRET et la duree de
   conservation — le marqueur sortait NON STYLE, indiscernable du texte courant,
   donc invisible en tant qu'alerte : le pattern se vidait de son sens sans que
   rien ne le signale. aeconomia.css est chargee partout.

   Le lime est CONSERVE tel quel : c'est l'etat des bandes encre de l'accueil, ou
   il vaut 13,56:1. Sur fond clair, chaque contexte le rabat sur --ob2 (voir
   `.lgcard .tbc-inline` dans le bloc « Page document legale »). */
.tbc-inline{font-style:italic;color:var(--lime);border-bottom:1px dashed currentColor}

/* --- A POSER APRES `.btn-ghost:hover` (aeconomia.css l.303) --- */
/* NIVEAU 2 sur ENCRE — pilule BLANCHE. Nee du handoff du 21/08 (panneau
   /taux-du-mois de la page Ressources). Le kit inversait deja le primaire en
   LIME sur les surfaces encre, et cette regle-la ne bouge pas ; `.btn-light`
   est l'autre pilule pleine que Dimitri dessine sur encre, celle qu'on pose
   quand le primaire lime de l'ecran est deja pris ailleurs. Encre sur blanc :
   19,79:1 (AAA), calcule. Ne PAS l'utiliser sur fond clair : elle y disparait. */
.btn-light{background:#fff;color:var(--ob);box-shadow:0 18px 38px -22px rgba(10,10,11,.9)}
.btn-light::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--lime);flex:none}
.btn-light i{color:var(--ob)}
.btn-light:hover{background:#fff;color:var(--ob);transform:translateY(-3px);
  box-shadow:0 26px 46px -22px rgba(10,10,11,1)}

/* --- A POSER APRES `.rvlink:hover` (aeconomia.css l.1072) --- */
/* ---------- MEDAILLON D'INITIALES (pattern 29) ----------
   Tenant de place d'un portrait tant que ae_portraits_publiables() rend false.
   Ecrit ICI et non dans home.css parce que home.css n'est PAS chargee sur
   /blog/ (functions.php l.1198) : la carte « article a la une » de la page
   ressources porte le meme medaillon, et un pattern ne vit qu'a un seul endroit
   (CLAUDE.md, « un pattern change, il se propage a toutes les pages »).
   `.hm-team-ini` est l'ancien nom, garde en alias : les tuiles de l'accueil et
   de /equipe/ heritent des memes valeurs sans qu'on reprenne leur markup. La
   cote par defaut est celle de la maquette Ressources (34px) ; les tuiles de
   personnes gardent leurs 46px. */
.aec-ini,.hm-team-ini{display:flex;align-items:center;justify-content:center;
  width:34px;height:34px;border-radius:50%;
  background:var(--lime);color:var(--ob);
  font-family:var(--mono);font-size:.8rem;font-weight:500;letter-spacing:.02em}
.aec-ini{flex:none}
.aec-ini--lg,.hm-team-ini{width:46px;height:46px;font-size:.9rem}

/* ============================================================================
   CONTROLES DE SAISIE — formulaire de contact, consentement, erreurs, /merci/
   Pose le 29/08/2026. Bloc AJOUTE en fin de kit : rien au-dessus n'est modifie.

   POURQUOI IL EXISTE : jusqu'a aujourd'hui aeconomia.css ne stylait AUCUN champ
   de saisie. Le seul `input` qu'il connaissait etait le `type=range` du
   simulateur (l.1502). Un `<input type="text">` sortait donc au style par
   defaut du navigateur, dans une carte de verre dessinee au pixel : c'est ce
   bloc qui cree les champs, et lui seul.

   SUR QUOI IL S'ACCROCHE. Le seul nom que le contrat de coutures fixe cote CSS
   est `data-ae-form` (contrat §1). Les regles qui DOIVENT tenir quoi qu'il
   arrive sont donc ecrites `form[data-ae-form] <element>` : elles atteignent les
   champs meme si le markup nomme ses conteneurs autrement. Les classes
   `.aec-form-*` ci-dessous ne portent que la MISE EN PAGE (colonnes, rangees) ;
   si le partiel les nomme differemment, le formulaire reste lisible et
   utilisable, il perd seulement ses deux colonnes. C'est volontaire : la v1 est
   morte de coutures inventees, on ne fait pas dependre l'accessibilite d'un nom
   de classe qui n'est pas au contrat.

   CE QU'IL NE FAIT PAS :
   - il ne touche PAS au piege a robots `ae_website` (contrat §1). Le piege est
     masque en STYLE INLINE cote markup, et c'est le bon endroit : une regle ici
     serait une seconde source de verite, et surtout un piege masque par une
     feuille externe redevient VISIBLE le jour ou la feuille ne charge pas.
     Aucun selecteur de ce fichier ne nomme ae_website.
   - il ne cree aucun etat d'erreur en JS. Les erreurs se voient sans JavaScript
     (contrat §10 : « le formulaire est envoyable SANS JavaScript ») : le serveur
     remplit le message, `:not(:empty)` le montre. Aucune regle ne depend de `.js`.
   - il ne pose pas de `scroll-margin-top` : la regle globale `[id]` du haut de ce
     fichier (l.16) couvre deja toute ancre, y compris celle du formulaire.

   REGLE 0 bis — ce qui est REUTILISE, ce qui ne l'est pas :
   - `.aec-glass` (l.1344) : REUTILISE tel quel pour la carte du formulaire.
   - `.btn-primary` (l.268) : REUTILISE tel quel pour le bouton d'envoi ; on ne
     lui ajoute qu'une largeur.
   - `.flabel` (l.1387) : NON reutilise. Ce n'est pas un label de formulaire mais
     une rangee « intitule a gauche / valeur vivante a droite » alignee sur la
     ligne de base, dessinee pour les curseurs du simulateur. Un label de saisie
     n'a pas de valeur a afficher a droite et doit rester colle a son champ.

   CONTRASTES — tous CALCULES (formule WCAG 2.x, luminance relative), aucun
   affirme. Les deux fonds de reference :
     carte de verre sur fond de page = rgba(255,255,255,.7) sur #F7F7F5 = #FDFDFC
     fond de champ = #FFFFFF
   ========================================================================= */

/* Deux variables locales, portees par le formulaire lui-meme : un seul point de
   reglage, et rien qui fuit dans le reste du kit.

   LA BORDURE DE CHAMP, valeur par valeur (calcul, pas parole) :
     rgba(10,10,11,.16) -> #D8D8D8 : 1,43:1 sur blanc — c'est la valeur de la v1,
       rejetee par les trois relecteurs.
     rgba(10,10,11,.38) -> #A2A2A2 : 2,56:1 sur blanc — c'est le PLANCHER que
       fixe le contrat §10. Mesure, il n'atteint PAS les 3:1 de WCAG 1.4.11 que
       la meme phrase reclame. Le plancher est respecte (on est au-dessus), la
       cible aussi : voir la question posee a Bastien.
     rgba(10,10,11,.44) -> #939394 : 3,06:1 sur blanc, 3,00:1 sur la carte —
       passe de justesse, marge nulle cote carte.
     rgba(10,10,11,.46) -> #8E8E8F : 3,26:1 sur blanc et 3,19:1 sur la carte.
       RETENUE : c'est la premiere valeur qui passe 1.4.11 des DEUX cotes du
       trait, et le trait est la seule chose qui dessine le champ (le blanc du
       champ et le #FDFDFC de la carte sont a 1,01:1 l'un de l'autre).
   Survol : rgba(10,10,11,.62) -> #676768, 5,64:1 sur blanc. */
form[data-ae-form]{
  --aec-fld-line:rgba(10,10,11,.46);
  --aec-fld-line-h:rgba(10,10,11,.62);
  --aec-err:#B3261E;   /* 6,54:1 sur blanc, 6,40:1 sur la carte (AA texte normal) */
  display:flex;flex-direction:column;gap:14px;margin-top:18px}

/* ---------- MISE EN PAGE (classes, degradation acceptee) ---------- */
.aec-form-sec{width:100%;max-width:var(--wrap);margin:0 auto;
  padding:var(--sec) var(--pad)}
.aec-form-card{width:100%;max-width:860px;margin:0 auto}
.aec-form-card .simu-title{font-size:19px}
.aec-form-row{display:flex;gap:12px;flex-wrap:wrap}
/* Un champ directement enfant du formulaire vit sur un axe vertical : un
   `flex-basis:190px` y imposait une hauteur. La largeur cible ne vaut que dans
   les rangees qui sont effectivement horizontales. */
.aec-form-fld{display:flex;flex-direction:column;gap:6px;flex:1 1 auto;min-width:170px;margin:0}
.aec-form-row>.aec-form-fld{flex:1 1 190px}
/* `.aec-form-fld` est en flex : sans cette regle l'attribut `hidden` ne masque
   rien. Meme piege que `.aec-glass .panel[hidden]` (l.1386). */
.aec-form-fld[hidden]{display:none}
.aec-form-note{margin:0;font-size:12px;line-height:1.45;color:var(--muted)}
.aec-form-recap{min-width:0;margin:0;padding:14px;border:1px solid rgba(10,10,11,.14);
  border-radius:14px;background:rgba(255,255,255,.54)}
.aec-form-recap[hidden]{display:none}
.aec-form-recap legend{padding:0 6px;font-family:var(--mono);font-size:11px;
  font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.aec-form-recap-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.aec-form-recap-grid label{display:flex;flex-direction:column;align-items:stretch;gap:6px}
form[data-ae-form] .aec-form-recap input[readonly]{min-height:42px;padding:9px 11px;
  font-family:var(--mono);font-size:14px;font-variant-numeric:tabular-nums;
  background:var(--cream);cursor:default}

/* ---------- LABELS ET AIDES ----------
   Un label REEL par champ (contrat §10) : jamais un placeholder seul. Le label
   est donc du texte de plein droit, en encre (19,38:1 sur la carte), pas un gris
   de legende. L'aide et la note passent sur --muted : 7,18:1 sur la carte, la ou
   le #6E6E73 des legendes du simulateur ne vaut que 4,97:1. On monte parce que
   ces textes-la portent une consigne de saisie, pas une decoration. */
form[data-ae-form] label{display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  font-family:var(--sky);font-size:13.5px;font-weight:600;line-height:1.3;color:var(--ob)}
.aec-form-req{color:var(--ob);font-weight:600}
.aec-form-hint{font-size:12px;line-height:1.45;color:var(--muted);font-weight:400}

/* ---------- LES CHAMPS ----------
   Types ENUMERES, jamais `input` nu : un selecteur large attraperait les onze
   champs caches du contrat §2 et le piege a robots, et le `type=range` du
   simulateur qui a deja ses regles l.1502.
   16px et pas moins : en-deca, iOS zoome la page au focus et le visiteur perd sa
   place dans le formulaire. 46px de haut : cible tactile confortable. */
form[data-ae-form] input[type="text"],
form[data-ae-form] input[type="tel"],
form[data-ae-form] input[type="email"],
form[data-ae-form] input[type="number"],
form[data-ae-form] select,
form[data-ae-form] textarea{
  width:100%;min-height:46px;padding:12px 14px;
  font-family:var(--body);font-size:16px;line-height:1.4;color:var(--ob);
  background:#fff;border:1px solid var(--aec-fld-line);border-radius:12px;
  transition:border-color .2s var(--ease),box-shadow .2s var(--ease)}
form[data-ae-form] input[type="text"]:hover,
form[data-ae-form] input[type="tel"]:hover,
form[data-ae-form] input[type="email"]:hover,
form[data-ae-form] input[type="number"]:hover,
form[data-ae-form] select:hover,
form[data-ae-form] textarea:hover{border-color:var(--aec-fld-line-h)}
form[data-ae-form] textarea{min-height:96px;padding-top:12px;resize:vertical}
/* Le champ libre du contrat §3 : c'est le seul qui appelle plusieurs lignes. */
form[data-ae-form] textarea[name="message"]{min-height:104px}
/* Le placeholder ACCOMPAGNE le label, il ne le remplace jamais. --muted =
   7,33:1 sur le blanc du champ. `opacity:1` parce que Firefox l'eclaircit. */
form[data-ae-form] ::placeholder{color:var(--muted);opacity:1}

/* Chiffres alignes en colonne : le telephone et l'apport se relisent, se
   corrigent et se comparent caractere par caractere. Meme mono et memes
   tabular-nums que partout ailleurs dans le kit (l.54). Les deux noms viennent
   du contrat §3 : `phone_number` et `apport_dispo`. */
form[data-ae-form] input[name="phone_number"],
form[data-ae-form] input[name="apport_dispo"]{font-family:var(--mono);
  font-size:15px;font-variant-numeric:tabular-nums;letter-spacing:.01em}

/* Le chevron du select est dessine ici : la fleche native ne se colore pas et
   sort grise clair sur plusieurs plateformes. Encre sur blanc : 19,79:1. */
form[data-ae-form] select{appearance:none;-webkit-appearance:none;
  padding-right:40px;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.6 6 6.4 11 1.6' stroke='%230A0A0B' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 15px center;background-size:12px 8px}

/* ---------- FOCUS ----------
   Visible PARTOUT, y compris sur le bouton et les liens de la mention legale.
   Encre sur la carte : 19,38:1, tres au-dela des 3:1 de WCAG 1.4.11. Le halo
   double le trait pour les ecrans ou l'outline se confond avec la bordure. */
form[data-ae-form] :focus-visible{outline:2px solid var(--ob);outline-offset:2px}
form[data-ae-form] input:focus-visible,
form[data-ae-form] select:focus-visible,
form[data-ae-form] textarea:focus-visible{border-color:var(--ob);
  box-shadow:0 0 0 3px rgba(10,10,11,.12)}

/* ---------- ERREURS ----------
   Deux etats, tous deux SANS JavaScript.
   1. `aria-invalid="true"` : pose par le serveur au retour d'un rejet.
   2. `:user-invalid` : pose par le navigateur apres une tentative d'envoi. Regle
      SEPAREE volontairement — groupee avec la precedente, un navigateur qui ne
      connait pas la pseudo-classe jetterait TOUT le selecteur, y compris l'etat
      serveur qui, lui, doit marcher partout.
   La couleur ne porte jamais l'information seule : le trait epaissit ET un
   message texte s'affiche sous le champ (WCAG 1.4.1 et 3.3.1).
   Rouge #B3261E : 6,54:1 sur blanc, 6,40:1 sur la carte, 6,54:1 en trait
   (1.4.11 demande 3:1, on est au double). */
form[data-ae-form] [aria-invalid="true"]{border-color:var(--aec-err);border-width:2px;
  box-shadow:0 0 0 3px rgba(179,38,30,.12)}
form[data-ae-form] :user-invalid{border-color:var(--aec-err);border-width:2px}
.aec-form-err{display:none;font-size:12px;line-height:1.45;font-weight:600;color:var(--aec-err)}
/* Vide = pas d'erreur = rien a l'ecran. Le `role="alert"` du markup reste dans
   le DOM en permanence, sinon aucune technologie d'assistance ne l'annonce. */
.aec-form-err:not(:empty){display:block}

/* La banniere de retour serveur. Elle se distingue par son ROLE, pas par une
   classe : `role="alert"` = un rejet a corriger, `role="status"` = une
   information calme. Ce sont les deux roles que le markup porte de toute facon
   pour l'accessibilite — aucun nom nouveau n'est invente ici.
   Fond teinte a 6 % : le rouge y reste a 5,93:1 (AA). */
form[data-ae-form] > [role="alert"]:not(:empty),
form[data-ae-form] > [role="status"]:not(:empty){margin:0;font-size:13px;line-height:1.5}
form[data-ae-form] > [role="alert"]:not(:empty){padding:12px 14px;border-radius:12px;
  color:var(--aec-err);background:rgba(179,38,30,.06);
  border:1px solid var(--aec-err);font-weight:600}
form[data-ae-form] > [role="status"]:not(:empty){color:var(--ob2)}
/* Le message de rejet recoit le focus au retour serveur : sans cette regle,
   l'anneau de focus se colle au texte. */
form[data-ae-form] > [role="alert"]:focus{outline:2px solid var(--ob);outline-offset:3px}

/* ---------- CASE DE CONSENTEMENT (contrat §5 : `name="CGV"`) ----------
   Case dessinee et non native : la case native tire sa bordure du systeme, on ne
   peut donc pas garantir ses 3:1 (WCAG 1.4.11) d'une plateforme a l'autre. Ici
   la bordure est celle des champs, 3,26:1 sur blanc, et la coche est un fond
   d'image SVG et non un `::after` — Firefox ne rend pas les pseudo-elements sur
   un `<input>`, une coche en `::after` y serait invisible.
   Coche blanche sur encre : 19,79:1. 20px de cote, cible cliquable etendue par
   le label qui l'enveloppe. */
form[data-ae-form] input[type="checkbox"],
form[data-ae-form] input[type="radio"]{appearance:none;-webkit-appearance:none;
  flex:none;width:20px;height:20px;margin:1px 0 0;cursor:pointer;
  background:#fff;border:1px solid var(--aec-fld-line);
  background-repeat:no-repeat;background-position:center;
  transition:background-color .18s var(--ease),border-color .18s var(--ease)}
form[data-ae-form] input[type="checkbox"]{border-radius:6px}
form[data-ae-form] input[type="radio"]{border-radius:50%}
form[data-ae-form] input[type="checkbox"]:hover,
form[data-ae-form] input[type="radio"]:hover{border-color:var(--aec-fld-line-h)}
form[data-ae-form] input[type="checkbox"]:checked{background-color:var(--ob);border-color:var(--ob);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14' fill='none'%3E%3Cpath d='M2.6 7.3 5.5 10.2 11.4 3.9' stroke='%23FFFFFF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-size:14px 14px}
/* Le point du radio est un degrade et non un pseudo-element, pour la meme raison
   Firefox que la coche. */
form[data-ae-form] input[type="radio"]:checked{background-color:var(--ob);border-color:var(--ob);
  background-image:radial-gradient(circle at center,#fff 0 3.4px,transparent 3.6px)}

/* La rangee du consentement : la case a gauche, le texte a droite, aligne en
   haut parce que la phrase legale fait deux ou trois lignes.
   Deux ecritures pour un seul effet, et c'est assume : `:has()` s'accroche au
   NOM DU CHAMP, qui est au contrat (`CGV`, §5), donc elle tient quel que soit le
   nom de classe du partiel ; la classe sert de repli aux navigateurs qui ne
   connaissent pas `:has()`. Regles separees, sinon le repli tombe avec elle. */
form[data-ae-form] label:has(input[name="CGV"]){align-items:flex-start;gap:11px;
  font-family:var(--body);font-size:12.5px;font-weight:400;line-height:1.5;color:var(--ob2)}
.aec-form-consent{display:flex;align-items:flex-start;gap:11px;
  font-size:12.5px;line-height:1.5;color:var(--ob2)}
.aec-form-consent a{color:var(--ob2);text-decoration:underline;text-underline-offset:2px}
.aec-form-consent a:hover{color:var(--ob)}

/* ---------- BOUTON ET MENTION LEGALE ----------
   `.btn.btn-primary` fait tout le travail (l.268) : encre, pastille lime, ombre,
   survol. On ne redecrit rien, on lui donne la largeur du formulaire. */
.aec-form-submit{width:100%;justify-content:center}
.aec-form-legal{margin:0;font-size:12.5px;line-height:1.5;color:var(--muted)}
.aec-form-legal a{color:var(--ob2);text-decoration:underline;text-underline-offset:2px}
.aec-form-legal a:hover{color:var(--ob)}

/* ---------- VARIANTE SUR ENCRE ----------
   Le partiel est annonce reutilisable, l'accueil du handoff du 21/08 comporte des
   sections sur encre : la variante existe, et elle etait indispensable.
   MESURE : pose telle quelle sur #0A0A0B, la carte de verre (rgba(255,255,255,.7))
   se composite a #B6B6B6, et TOUT s'effondre d'un coup — aides --muted 3,60:1
   (echec AA), message d'erreur 3,21:1 (echec AA), bordure de champ 1,60:1 (echec
   1.4.11). Rien ne l'aurait signale a l'ecran.
   La variante rend donc la carte OPAQUE. Le fond effectif redevient #FFFFFF quel
   que soit le fond de section, et les ratios deja calcules plus haut tiennent
   sans exception : bordure 3,26:1, aides 7,33:1, erreur 6,54:1, encre 19,79:1.
   La carte elle-meme se detache de l'encre a 19,79:1.
   Le verre est retire, pas allege : un `backdrop-filter` sur un fond opaque ne
   fait que couter du GPU sans rien peindre. */
.aec-form-sec--ink .aec-glass{background:#fff;
  backdrop-filter:none;-webkit-backdrop-filter:none;
  border-color:rgba(10,10,11,.10);
  box-shadow:0 50px 90px -50px rgba(0,0,0,.9),inset 0 1px 0 rgba(255,255,255,1)}

/* ---------- MOUVEMENT ----------
   Les seules transitions de ce bloc sont des changements de couleur au survol et
   au focus. On les coupe quand le systeme le demande : `.01ms` et non `0s` pour
   que l'evenement `transitionend` continue d'exister si un jour du JS l'ecoute.
   L'anneau de focus, lui, ne bouge jamais : il doit rester instantane. */
@media(prefers-reduced-motion:reduce){
  form[data-ae-form] input[type="text"],
  form[data-ae-form] input[type="tel"],
  form[data-ae-form] input[type="email"],
  form[data-ae-form] input[type="number"],
  form[data-ae-form] select,
  form[data-ae-form] textarea,
  form[data-ae-form] input[type="checkbox"],
  form[data-ae-form] input[type="radio"]{transition-duration:.01ms}
}

/* ---------- ETROIT ----------
   Sous 560px les deux colonnes se rangent l'une sous l'autre : a cette largeur,
   deux champs cote a cote font 130px chacun, trop peu pour lire un e-mail saisi.
   Le padding de la carte descend de 24px a 18px pour rendre la largeur au champ. */
@media(max-width:560px){
  .aec-form-card{padding:18px}
  .aec-form-row{flex-direction:column;gap:14px}
  .aec-form-row>.aec-form-fld{flex:1 1 auto}
  .aec-form-fld{min-width:0}
  .aec-form-recap-grid{grid-template-columns:minmax(0,1fr)}
}

/* ============================================================================
   PAGE /merci/ (contrat §1 : slug `merci`, constante AE_CONTACT_SLUG_MERCI)
   ------------------------------------------------------------------------
   AVERTISSEMENT DE COUTURE : les noms de classe de cette page ne figurent PAS
   dans le contrat de coutures — il ne fixe que le slug. Ce bloc pose donc le
   vocabulaire `.aec-merci*` et le declare ici pour que le markup s'y range. Si
   le partiel de /merci/ nomme ses blocs autrement, AUCUNE de ces regles ne
   s'applique : la page reste correcte, servie par les classes deja existantes du
   kit (`.wrap`, `.lead`, `.pill`, `.btn`, `.eyebrow`), simplement sans la liste
   numerotee. Point signale a Bastien.
   Contrastes : tout est pose sur le fond de page #F7F7F5 — encre 18,45:1,
   --muted 6,83:1. Aucun couple nouveau.
   ========================================================================= */
.aec-merci{max-width:760px;margin:0 auto;padding:var(--sec) var(--pad)}
.aec-merci .aec-glass{margin-top:var(--gap-lead)}

/* La suite des etapes. Numeros en mono comme tous les chiffres du site (l.54),
   dans une pastille lime : encre sur lime = 13,56:1, deja mesure pour les
   pastilles du kit (l.35). Le numero est DECORATIF (aria-hidden cote markup),
   le texte de l'etape se suffit a lui-meme. */
.aec-merci-steps{list-style:none;display:flex;flex-direction:column;gap:18px;
  margin:22px 0 0;padding:0;counter-reset:aecmrc}
.aec-merci-step{position:relative;counter-increment:aecmrc;
  padding-left:46px;font-size:14.5px;line-height:1.55;color:var(--ob2)}
.aec-merci-step::before{content:counter(aecmrc);position:absolute;left:0;top:-1px;
  display:flex;align-items:center;justify-content:center;width:30px;height:30px;
  border-radius:50%;background:var(--lime);color:var(--ob);
  font-family:var(--mono);font-size:.78rem;font-weight:500;font-variant-numeric:tabular-nums}
.aec-merci-step b{display:block;color:var(--ob);font-family:var(--sky);
  font-size:15px;font-weight:600;letter-spacing:-.01em;margin-bottom:3px}

/* Boutons de sortie ; les anciennes étiquettes Merci ont été retirées du rendu. */
.aec-merci-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:1.8rem}

@media(max-width:560px){
  .aec-merci-cta .btn{width:100%;justify-content:center}
}

/* Portraits attribués le25/09 : JPG exact en repli, WebP optionnel, couleurs des fichiers conservées. */
.ae-portrait{display:contents}
img[src*="/team/hand20260925-"]{object-position:50% 30%;filter:none}

/* Studio Bourges : cadre natif x20/y16/752/738 dans le fichier1376x768.
   Le bitmap et ses URL restent identiques ; seules ses marges blanches sortent
   du cadre. Les cartes gardent leur format et affichent le haut de la photo. */
.ae-source-photo-frame{position:relative;display:block;width:100%;aspect-ratio:var(--ae-photo-ratio,752/738);overflow:hidden;border-radius:14px;margin:0 0 28px}
/* Studio Orléans : intérieur du cadre x34/y22/904/724, original1376x768.
   Deux pixels de bord sont exclus pour éviter le liseré blanc de l'export. */
.ae-source-photo-frame--orleans{--ae-photo-ratio:904/724;--ae-photo-width:152.2123893805%;--ae-photo-top:-2.4336283186%;--ae-photo-left:-3.7610619469%}
.ae-source-photo-frame--card{height:100%;aspect-ratio:auto;margin:0;border-radius:inherit}
.ae-source-photo-frame>img{position:relative!important;display:block!important;top:auto!important;left:auto!important;width:var(--ae-photo-width,182.9787234043%)!important;max-width:none!important;height:auto!important;margin:var(--ae-photo-top,-2.1276595745%) 0 0 var(--ae-photo-left,-2.6595744681%)!important;border-radius:0!important;object-fit:fill!important}