/* ============================================================================
   AECONOMIA — HOME (front-page.php uniquement)
   Depend du kit aeconomia.css (tokens, .wrap, .btn, .pill, .chip, .faq-*,
   .lp-steps/.scard, .dtable, .rv). Charge via functions.php si is_front_page().
   Perf : aucune video hors hero desktop, backdrop-filter avec fallback
   @supports, animations coupees par le bloc prefers-reduced-motion du kit.
   ========================================================================= */

/* ---------- Systeme de titres "/titre." + sous-titre CAPITALES ---------- */
.hm-t::before{content:"/";color:var(--lime);font-style:normal;margin-right:.14em}
.hm-k{display:block;font-family:var(--mono);font-size:.72rem;font-weight:500;
  letter-spacing:.18em;text-transform:uppercase;color:var(--sage2-ink);margin-top:.9rem}
.hm-desc{margin-top:.9rem;color:var(--ob2);max-width:62ch}
.hm-center{text-align:center}
.hm-center .hm-desc{margin-left:auto;margin-right:auto}
.hm-head{max-width:820px}

/* ---------- Monogramme "a." (rappel discret) ---------- */
.hm-mono{display:block;font-family:var(--sky);font-weight:600;font-size:2.1rem;
  line-height:1;color:rgba(10,10,11,.22);user-select:none}
.hm-mono b{color:var(--lime)}
.hm-mono--light{color:rgba(255,255,255,.35)}

/* ---------- CTA persistant ---------- */
/* Mobile : barre sticky bas d'ecran, 2 boutons. */
.hm-stickybar{position:fixed;left:0;right:0;bottom:0;z-index:1500;display:none;gap:.6rem;
  padding:.65rem .8rem calc(.65rem + env(safe-area-inset-bottom));
  background:rgba(247,247,245,.92);border-top:1px solid var(--line);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .hm-stickybar{background:#F7F7F5}
}
.hm-stickybar .btn{flex:1;min-width:0;justify-content:center;padding:13px 10px;font-size:.88rem}
/* Le libelle « Prendre rendez-vous » a besoin de plus que la moitie de la barre :
   a parts egales il depassait de 3px a 375px. Le telephone, plus court, lui cede
   de la place tout en gardant une cible largement superieure a 44px. */
.hm-stickybar .hm-call{flex:.78;background:var(--ob);color:#fff}
.hm-stickybar .btn-primary{flex:1.22}
/* Meme contrat que `.aec-actionbar.is-held` du kit (04/09/2026) : la barre se retire tant
   que la rangee `.hero-cta` du heros est a l'ecran, et revient ensuite. Pose par
   aeconomia.js, jamais par le HTML. */
.hm-stickybar{transition:transform .35s var(--ease),opacity .35s var(--ease),visibility 0s linear 0s}
.hm-stickybar.is-held{transform:translateY(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){
  .hm-stickybar{display:flex}
  body{padding-bottom:76px}
}
/* Desktop : bouton flottant apres le hero. */
.hm-fab{position:fixed;right:24px;bottom:24px;z-index:1500;display:none;
  flex-direction:column;align-items:flex-end;gap:.4rem;
  opacity:0;transform:translateY(14px);pointer-events:none;
  transition:opacity .45s cubic-bezier(.22,1,.36,1),transform .45s cubic-bezier(.22,1,.36,1)}
.hm-fab.on{opacity:1;transform:none;pointer-events:auto}
@media(min-width:761px){.hm-fab{display:flex}}

/* ---------- HERO ---------- */
.hm-hero .hero-in{grid-template-columns:1.08fr .92fr;align-items:end}

/* ---------- LES CINQ LEVIERS (handoff du 21/08, section #leviers) ---------
   La maquette ne pose pas des cartes mais une LISTE : cinq rangees separees
   par un filet, qui prennent le fond blanc et se decalent de 18px au survol.
   Le decalage est porte par padding-left, jamais par transform : un transform
   sur une rangee qui contient du texte long declenche un repaint de toute la
   colonne au survol.
-------------------------------------------------------------------------- */
.hm-lev-head{display:flex;flex-wrap:wrap;gap:clamp(14px,3cqw,44px);align-items:flex-end;
  margin-top:.6rem}
.hm-lev-head .hm-t{flex:1 1 440px;margin:0}
.hm-lev-head .hm-desc{flex:1 1 300px;margin:0}
.hm-leviers{margin-top:clamp(32px,3.8vw,48px);border-top:1px solid rgba(10,10,11,.13)}
.hm-levier{display:flex;gap:clamp(14px,3vw,44px);flex-wrap:wrap;align-items:baseline;
  padding:clamp(24px,2.8vw,34px) 8px;border-bottom:1px solid rgba(10,10,11,.11);
  transition:background .25s var(--ease),padding-left .25s var(--ease)}
.hm-levier:hover{background:var(--white);padding-left:18px}
/* #55565A sur le fond #F7F7F5 = 6,83:1 ; l'ancien #B4B4B8 ne faisait que 1,93:1. */
.hm-levier-n{font-family:var(--mono);font-size:11px;color:#55565A;flex:0 0 30px;
  font-variant-numeric:tabular-nums}
.hm-levier-t{flex:1 1 200px;min-width:170px;margin:0;
  font-size:clamp(1.31rem,2.3vw,1.81rem);font-weight:600;letter-spacing:-.03em;line-height:1.15}
.hm-levier-b{flex:2 1 330px;min-width:250px;margin:0;font-size:.97rem;color:var(--muted);
  line-height:1.55}
.hm-levier-g{flex:0 1 170px;min-width:130px;text-align:right;font-family:var(--mono);
  font-size:clamp(1rem,1.8vw,1.37rem);font-variant-numeric:tabular-nums;line-height:1.3;
  color:var(--ob)}
/* L'etiquette « hypothese » ne se lit jamais comme le chiffre : elle passe en
   corps mono minuscule sous lui, comme l'etiquette du bloc resultat du simulateur. */
.hm-levier-hyp{display:block;font-style:normal;font-size:12px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--faint,#87878C);margin-top:.25rem}
@media(max-width:760px){
  .hm-levier-g{text-align:left;flex:1 1 100%}
  .hm-levier:hover{padding-left:8px}
}

/* ---------- HERO CLAIR (portage du handoff du 21/08) ----------------------
   La maquette ouvre sur une AFFICHE : fond de page, pas de photo, titre encre
   sur trois lignes, surligneur lime sur la derniere. Le heros sur photo etait
   la variante 2 du 22/07 ; le handoff, plus recent, la remplace.

   TOUT EST SCOPE SOUS .hm-hero--clair, et .hm-hero n'est porte QUE par
   front-page.php : les 12 LP et la page contact partagent .hero et .hero-cta,
   elles ne doivent RIEN recevoir d'ici. Ne jamais deplacer ces regles vers
   .hero nu.
   Le heros clair aligne en HAUT (la maquette pose le titre et la carte de
   verre sur la meme ligne de depart), la ou le heros sur photo alignait en bas.
--------------------------------------------------------------------------- */
.hm-hero--clair{background:var(--bg);color:var(--ob);border-radius:0;overflow:visible}
.hm-hero--clair .hero-in{align-items:start;padding-top:clamp(1.9rem,4vw,3.6rem)}
.hm-hero--clair h1,
.hm-hero--clair .hm-hero-pills,
.hm-hero--clair .hm-finan-k,
.hm-hero--clair .stb .card b{color:var(--ob)}
.hm-hero--clair .lead{color:var(--muted)}
.hm-hero--clair .lead strong{color:var(--ob);font-weight:600}
/* Le surligneur reprend le lime sur fond clair : la regle « sur encre » de
   aeconomia.css (.hero h1 em -> blanc + mark-ink) ne vaut plus ici. */
.hm-hero--clair h1 em{color:var(--sage2);
  background-image:linear-gradient(transparent 63%,var(--mark) 63%)}

/* Titre trois lignes — cote maquette clamp(44px,6.7cqw,92px). Le theme n'a pas
   de conteneur en container-type sur ce bloc : meme echelle rendue en vw. */
.hm-hero--clair .hm-h1-lignes{font-size:clamp(2.75rem,6.4vw,5.75rem);line-height:.93;
  letter-spacing:-.046em;font-weight:600}
.hm-h1-lignes span{display:block}

/* Les deux pastilles du haut : encre pleine + verre. */
.hm-hero-pills{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;margin-bottom:1.3rem}
.hm-pill-spec,.hm-pill-avis{display:inline-flex;align-items:center;gap:.55rem;
  border-radius:var(--pill);padding:9px 17px;font-size:.78rem;font-weight:600;
  white-space:nowrap}
.hm-pill-spec{background:var(--ob);color:#fff;
  box-shadow:0 10px 26px -18px rgba(10,10,11,.9)}
.hm-pill-spec .dot{width:7px;height:7px;border-radius:50%;background:var(--lime);
  display:block;animation:aecPulse 2.8s ease-in-out infinite}
.hm-pill-avis{color:var(--muted);border:1px solid rgba(255,255,255,.9);
  background:rgba(255,255,255,.62);
  backdrop-filter:blur(22px) saturate(1.8);-webkit-backdrop-filter:blur(22px) saturate(1.8);
  box-shadow:0 10px 26px -16px rgba(10,10,11,.45),inset 0 1px 0 rgba(255,255,255,1)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .hm-pill-avis{background:var(--white)}
}
.hm-pill-avis .stars{color:var(--sage2);letter-spacing:-1px;font-size:.7rem}
/* Les boutons du heros clair. Le primaire redevient ENCRE, comme la maquette
   (background:#0A0A0B, color:#fff) et comme le CTA de la barre de navigation :
   la regle lime de aeconomia.css vise `.hero`, c'est-a-dire un heros SUR ENCRE,
   ou un bouton noir serait invisible. Sur fond clair, c'est l'inverse. */
.hm-hero--clair .btn-primary{background:var(--ob);color:#fff;
  box-shadow:0 14px 34px -18px rgba(10,10,11,.9)}
.hm-hero--clair .btn-primary::before{background:rgba(255,255,255,.26)}
.hm-hero--clair .btn-primary i{color:#fff}
.hm-hero--clair .btn-primary:hover{background:var(--ink-hover)}
/* Le bouton fantome du heros clair : sur encre il etait blanc sur sombre. */
.hm-hero--clair .btn-ghost{color:var(--ob);border-color:var(--line-strong,rgba(10,10,11,.22))}
.hm-hero--clair .btn-ghost:hover{background:rgba(10,10,11,.05)}
/* Le filigrane « a. » est cale sur le fond sombre : il n'a plus lieu d'etre. */
.hm-hero--clair .hm-mono{display:none}
@media(max-width:760px){
  .hm-hero--clair .hero-in{padding-top:1.2rem}
  .hm-hero-pills{gap:.45rem}
  .hm-pill-spec,.hm-pill-avis{font-size:.72rem;padding:8px 14px;white-space:normal}
}
.hm-review{display:inline-flex;align-items:center;gap:.55rem;margin-bottom:1.3rem;
  font-family:var(--sky);font-size:.8rem;font-weight:600;color:#fff;
  background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.28);
  border-radius:50px;padding:8px 16px;
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .hm-review{background:rgba(10,10,11,.6)}
}
.hm-review .stars{font-size:.8rem}
.hm-tilewrap{position:relative;align-self:end}
.hm-tile{position:relative;border-radius:22px;overflow:hidden;aspect-ratio:16/9;
  background:#0A0A0B;box-shadow:0 34px 80px rgba(0,0,0,.45)}
.hm-tile img,.hm-tile video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* Voile de lisibilite (19/08/2026) : la legende mono tombait dans la rampe encore
   claire du degrade. Rampe ouverte plus haut (padding) et alphas calibres par
   echantillonnage de pixels au rendu (petite typo : >= 4,5:1 sur le poster). */
.hm-tile-meta{position:absolute;left:0;right:0;bottom:0;z-index:2;display:flex;
  align-items:flex-end;justify-content:space-between;padding:1.6rem .95rem .7rem;
  background:linear-gradient(180deg,rgba(0,0,0,0) 0%,rgba(0,0,0,.6) 46%,rgba(0,0,0,.85) 100%)}
.hm-tile-cap{font-family:var(--mono);font-size:.66rem;font-weight:500;letter-spacing:.22em;
  text-transform:uppercase;color:rgba(255,255,255,.85)}
.hm-sound{display:none;align-items:center;gap:.35rem;font-family:var(--sky);font-size:.72rem;
  font-weight:600;color:#fff;background:rgba(255,255,255,.16);
  border:1px solid rgba(255,255,255,.3);border-radius:50px;padding:6px 12px}
.hm-sound.show{display:inline-flex}
.hm-ratebadge{position:absolute;top:-14px;left:-14px;z-index:3;display:flex;align-items:center;
  gap:.5rem;background:var(--white);color:var(--ob);border-radius:14px;padding:.55rem .85rem;
  font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:.78rem;font-weight:500;
  box-shadow:0 16px 38px rgba(0,0,0,.3)}
.hm-hero .hm-mono{position:absolute;left:var(--pad);bottom:1.1rem;z-index:2}
@media(max-width:1024px){
  .hm-hero .hero-in{grid-template-columns:1fr}
  .hm-tilewrap{margin-top:1.6rem}
  .hm-ratebadge{top:auto;bottom:-14px;left:12px}
}

/* ---------- TRUST : pills USP + carrousel logos ---------- */
.hm-pills{display:flex;flex-wrap:wrap;justify-content:center;gap:.6rem}
.hm-pills .pill{background:rgba(255,255,255,.7);border-color:rgba(10,10,11,.08)}
.hm-logos{margin-top:2.6rem}
.hm-logos-cap{text-align:center;font-family:var(--mono);font-size:.68rem;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:1.4rem}
.hm-marquee{overflow:hidden;position:relative;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.hm-track{display:flex;align-items:center;gap:clamp(2.2rem,5vw,4.2rem);width:max-content;
  animation:hmScroll 38s linear infinite}
.hm-marquee:hover .hm-track{animation-play-state:paused}
@keyframes hmScroll{to{transform:translateX(-50%)}}
.hm-track img{height:clamp(40px,4.4vw,54px);width:auto;opacity:.8;filter:grayscale(1);transition:opacity .3s,filter .3s}
.hm-track img:hover{opacity:1;filter:none}
@media(prefers-reduced-motion:reduce){
  .hm-track{animation:none;flex-wrap:wrap;width:auto;justify-content:center;row-gap:1.6rem}
  /* Les copies dupliquees (2e passe) portent aria-hidden : on les masque pour ne
     jamais afficher les logos "en double" quand la boucle ne tourne pas. */
  .hm-track img[aria-hidden="true"]{display:none}
}
/* Filet de securite : les marqueurs de relecture interne {a confirmer} ne fuient
   JAMAIS cote public. Le suivi des elements en attente se fait dans le Sheet
   "Aeconomia refonte - Assets & infos a demander" (Drive), pas sur la page. */
.tbc,.tbc-block{display:none !important}
/* Remarque 6 Dimitri : sous-titre + numero d'etape en CAPITALES (home uniquement). */
#steps .scard-k,#steps .scard-step{text-transform:uppercase}
/* Section equipe : photo de groupe reelle (interim avant le carrousel de fiches). */
.hm-team-photo{margin:2.4rem auto 0;max-width:1080px;border-radius:22px;overflow:hidden;
  box-shadow:0 30px 70px rgba(10,10,11,.14)}
.hm-team-photo img{display:block;width:100%;height:auto}
/* Manifesto : le courtage comme il devrait l'etre (/simple /rapide /transparent). */
/* Manifesto : CARTE sombre arrondie CONTENUE (retour Valentine 23/07 : pas de bande
   noire pleine largeur qui "cree une forte demarcation" ; un rectangle au meme
   arrondi que le header, le creme du fond restant visible tout autour).
   Markup INCHANGE : c'est le .wrap qui devient la carte.
   Gouttiere + rayon identiques a .hero / .hm-frame => bords alignes au scroll. */
.hm-manifesto-band{background:none;padding:0 0 var(--sec)}
.hm-manifesto-band > .wrap{
  max-width:none;
  margin-inline:clamp(12px,1.5vw,20px);
  padding:clamp(2.6rem,5.5vw,4.4rem) var(--pad);
  background:var(--ob-soft);
  border-radius:var(--r-frame);
  border:1px solid var(--ob-soft-line);
  box-shadow:0 30px 70px -44px rgba(10,10,11,.55)}
.hm-manifesto-band .hm-manifesto{color:#fff}
.hm-manifesto-band .hm-manifesto-k{color:rgba(255,255,255,.62)}
@media(max-width:560px){
  .hm-manifesto-band > .wrap{padding-inline:1.4rem;border-radius:22px}
}
.hm-manifesto-k{font-family:var(--mono);font-size:.82rem;font-weight:500;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);margin-bottom:1.1rem}
.hm-manifesto{font-family:var(--sky);font-weight:600;font-size:clamp(2rem,4.6vw,3.2rem);
  letter-spacing:-1.4px;line-height:1.1;color:var(--ob);display:flex;flex-wrap:wrap;
  gap:.15em .8em;justify-content:center}
.hm-manifesto em{color:var(--lime);font-style:normal}
/* Chiffre-cle mis en avant (120 M€ finances en CVL) : moment fort de la preuve. */
.hm-keyfig{text-align:center;margin:2.8rem auto 0;max-width:640px}
.hm-keyfig b{display:block;font-family:var(--mono);font-variant-numeric:tabular-nums;font-weight:500;color:var(--ob);
  font-size:clamp(3.6rem,9vw,6.2rem);letter-spacing:-3px;line-height:.95;margin:.55rem 0 .35rem}
.hm-keyfig-sub{display:block;font-size:clamp(1rem,1.5vw,1.15rem);color:var(--ob2)}
/* Bonus SAV (section "ce que nous negocions") : encart mis en avant. */
/* Retour Bastien 23/07 : le SAV etait trop petit, coince avant la methode.
   Plus d'air (marges), plus de presence (padding + texte), badge aligne. */
.hm-sav{display:flex;gap:1.2rem;align-items:center;flex-wrap:wrap;margin:2.6rem 0 0;
  padding:1.7rem 2rem;background:#fff;border:1px solid rgba(10,10,11,.08);
  border-left:5px solid var(--lime);border-radius:18px;
  box-shadow:0 18px 44px -30px rgba(10,10,11,.4)}
.hm-sav p{margin:0;color:var(--ob2);line-height:1.6;font-size:1.02rem;flex:1;min-width:15rem}
.hm-sav p b{color:var(--ob)}
.hm-sav .hm-badge-plus{flex:none}

/* ---------- ICX : note epinglee ---------- */
.hm-note{position:relative;max-width:720px;margin:2.4rem auto 0;
  background:linear-gradient(160deg,#FFFFFF,#EDEDE8);border:1px solid rgba(10,10,11,.08);
  border-radius:18px;padding:2.2rem 2.3rem 1.9rem;transform:rotate(-1.2deg);
  box-shadow:0 26px 64px rgba(10,10,11,.16);font-size:1.06rem;line-height:1.75;color:var(--ob2)}
.hm-note::before{content:"";position:absolute;top:-11px;left:50%;transform:translateX(-50%);
  width:22px;height:22px;border-radius:50%;background:var(--lime);
  box-shadow:0 6px 14px rgba(10,10,11,.28),inset 0 -3px 6px rgba(0,0,0,.18)}
.hm-note mark{background:linear-gradient(transparent 58%,rgba(173,232,60,.5) 58%);
  color:var(--ob);font-weight:600}
.hm-note-sign{margin-top:1.2rem;font-family:var(--sky);font-weight:600;color:var(--sage2)}

/* ---------- BROKER : 3 raisons ---------- */
.hm-broker{display:flex;flex-direction:column;gap:clamp(2.2rem,5vw,4rem);margin-top:2.6rem}
.hm-brow{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(1.6rem,4vw,3.6rem);align-items:center}
.hm-brow:nth-child(2n) .hm-bimg{order:2}
.hm-bimg{position:relative;aspect-ratio:4/5;border-radius:22px;overflow:hidden;max-width:420px;
  width:100%;box-shadow:0 26px 60px rgba(10,10,11,.16)}
.hm-bimg img{width:100%;height:100%;object-fit:cover}
/* Contraste AA : lime 1,36:1 sur le fond #F7F7F5 -> gris book #55565A (6,83:1 calcule). */
.hm-bn{font-family:var(--mono);font-weight:500;font-size:.8rem;color:#55565A;
  letter-spacing:.16em}
.hm-blink{display:inline-flex;align-items:center;gap:.4rem;margin-top:1.2rem;
  font-family:var(--sky);font-weight:600;font-size:.92rem;color:var(--ob);
  border-bottom:2px solid var(--lime);padding-bottom:2px;transition:gap .3s}
.hm-blink:hover{gap:.7rem}
@media(max-width:860px){
  .hm-brow{grid-template-columns:1fr}
  .hm-brow:nth-child(2n) .hm-bimg{order:0}
  .hm-bimg{aspect-ratio:16/10;max-width:none}
}

/* ---------- Cadres a image de fond (vs, edge, steps intro, vcta, glass) ---------- */
.hm-frame{position:relative;overflow:hidden;border-radius:var(--r-frame);
  margin:0 clamp(12px,1.5vw,20px)}
.hm-frame-bg{position:absolute;inset:0;z-index:0}
.hm-frame-bg img{width:100%;height:100%;object-fit:cover}
/* Overlay .68 (au lieu de .55) : kickers lime / eyebrows passent AA meme sur les zones
   claires des fonds photo ; les H2 blancs restent largement au-dessus de 4.5:1. */
.hm-frame-bg::after{content:"";position:absolute;inset:0;background:rgba(10,10,11,.68)}
.hm-frame>.hm-frame-in{position:relative;z-index:1;max-width:var(--wrap);margin:0 auto;
  padding:clamp(2.4rem,5.5vw,5rem) var(--pad)}
.hm-frame .eyebrow{color:#ADE83C;text-shadow:0 1px 14px rgba(10,10,11,.5)}
.hm-frame h2,.hm-frame .h2{color:#fff}
.hm-frame .hm-k{color:rgba(255,255,255,.72)}
.hm-frame .hm-desc{color:rgba(255,255,255,.82)}

/* ---------- Tableaux comparatifs (#vs, #edge) ---------- */
.hm-badge-reco{display:inline-block;margin-left:.45rem;vertical-align:middle;
  background:var(--lime);color:var(--ob);font-family:var(--mono);font-size:.66rem;
  font-weight:500;letter-spacing:.1em;text-transform:uppercase;border-radius:50px;padding:3px 8px}
.hm-badge-plus{display:inline-block;margin-left:.45rem;background:var(--ob);color:var(--lime);
  font-family:var(--mono);font-size:.66rem;font-weight:500;letter-spacing:.1em;
  text-transform:uppercase;border-radius:50px;padding:3px 8px}
.hm-mark{font-family:var(--sky);font-weight:600;font-size:1rem}
.hm-mark--no{color:#0A0A0B}
.hm-mark--mid{color:var(--muted)}
.dtable .hm-aeco{background:rgba(173,232,60,.09)}
.hm-tfoot{display:flex;flex-wrap:wrap;align-items:center;gap:.7rem;margin-top:1.3rem}
.hm-tfoot .btn{margin-left:auto}
.hm-frame .chip{background:rgba(255,255,255,.85);border-color:transparent}
@media(max-width:760px){.hm-tfoot .btn{margin-left:0;width:100%;justify-content:center}}

/* ---------- REVIEWS ---------- */
.hm-plats{display:flex;flex-wrap:wrap;justify-content:center;gap:1rem;margin-top:2.2rem}
.hm-plat{display:flex;align-items:center;gap:1rem;padding:1.1rem 1.5rem;min-width:260px}
.hm-plat b{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:2.2rem;font-weight:500;color:var(--ob);line-height:1}
.hm-plat .gl{display:flex;flex-direction:column}
.hm-plat .gl small{font-size:.78rem;color:var(--muted)}
.hm-rev-cap{text-align:center;font-size:.82rem;color:var(--muted);margin-top:1.6rem}
.hm-rev-hint{display:none;text-align:center;font-size:.76rem;color:var(--muted);
  font-style:italic;margin-top:.6rem}
@media(max-width:760px){.hm-rev-hint{display:block}}

/* ---------- Blocs "ce que nous negocions" (#rate remplace) ---------- */
/* Retour Bastien 23/07 : cartes trop serrees, manque de picto -> plus d'air + une
   icone lime par carte (ancre visuelle, baisse la densite de texte percue). */
.hm-negogrid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.2rem,2.4vw,2rem);margin-top:2.6rem}
/* Engagements (ex-tableau eux-vs-nous, retour Dimitri 24/07) : 6 cartes positives */
.hm-eng{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.1rem,2vw,1.6rem)}
@media(max-width:980px){.hm-eng{grid-template-columns:1fr 1fr}}
@media(max-width:620px){.hm-eng{grid-template-columns:1fr}}
.hm-nego{padding:clamp(1.8rem,2.6vw,2.4rem)}
.hm-nego-ico{display:inline-flex;align-items:center;justify-content:center;width:46px;height:46px;
  border-radius:14px;background:var(--lime);color:var(--ob);margin-bottom:1.1rem}
.hm-nego-ico svg{width:24px;height:24px}
.hm-nego h3{font-size:1.16rem;letter-spacing:-.4px;margin-bottom:.7rem}
.hm-nego h3::before{content:"/";color:var(--lime);margin-right:.14em}
.hm-nego p{font-size:.94rem;color:var(--ob2);line-height:1.66}
@media(max-width:620px){.hm-negogrid{grid-template-columns:1fr}}
/* Retour Bastien 23/07 : la methode etait une phrase fourre-tout -> 3 points visuels
   numerotes, avec l'intitule + le CTA en tete. */
/* Carte CLAIRE (grammaire 24/07) : la methode etait la seule surface sombre contenue
   au wrap = 3e largeur de sombre sur la page. Elle rejoint le langage .card-solid
   des 4 cartes au-dessus (composant, radius --r-card, jamais --r-frame). */
.hm-methode{margin-top:1.8rem;background:var(--cream);color:var(--ob2);
  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);
  border-radius:var(--r-card);padding:clamp(1.8rem,3vw,2.6rem)}
.hm-methode b{color:var(--ob)}
.hm-methode-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:1rem;margin-bottom:1.6rem}
.hm-methode-head b{font-family:var(--sky);font-size:1.28rem;letter-spacing:-.3px}
.hm-methode-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.3rem}
.hm-methode-pt{display:flex;gap:.75rem;align-items:flex-start;font-size:.95rem;line-height:1.5}
.hm-methode-n{flex:none;width:30px;height:30px;border-radius:50%;background:var(--lime);color:var(--ob);
  font-family:var(--mono);font-variant-numeric:tabular-nums;font-weight:500;font-size:.92rem;display:inline-flex;align-items:center;justify-content:center}
@media(max-width:720px){.hm-methode-grid{grid-template-columns:1fr;gap:1rem}}

/* SAV : picto lime + colonne texte (badge au-dessus du paragraphe). */
.hm-sav-ico{flex:none;align-self:flex-start}
.hm-sav-txt{flex:1;min-width:15rem;display:flex;flex-direction:column;gap:.55rem}
.hm-sav-txt .hm-badge-plus{align-self:flex-start}
.hm-sav-txt p{margin:0}

/* BILAN : chiffre-cle 120 M€ en carte sombre contenue (meme langage que le manifesto). */
/* .hm-bilan-band supprimee (24/07) : le 120 M€ vit desormais dans la carte de
   marque fusionnee (#bilan porte .hm-manifesto-band). Une seule recette de carte
   sombre quasi pleine largeur sur la page. */
.hm-brand-grid{display:grid;grid-template-columns:1.5fr 1fr;align-items:center;gap:clamp(2rem,4.5vw,4rem)}
.hm-brand-grid .hm-manifesto{font-size:clamp(2.2rem,4.2vw,3.6rem)}
.hm-brand-grid .hm-manifesto span{display:block}
.hm-brand-grid .hm-bilan{border-left:1px solid var(--ob-soft-line);padding-left:clamp(2rem,4.5vw,4rem)}
.hm-brand-grid .hm-bilan b{font-size:clamp(2.7rem,5.5vw,4.4rem);letter-spacing:-2.2px}
.hm-brand-grid .hm-bilan-sub{margin-inline:0;max-width:34ch}
@media(max-width:860px){
  .hm-brand-grid{grid-template-columns:1fr;gap:1.8rem}
  .hm-brand-grid .hm-bilan{border-left:0;border-top:1px solid var(--ob-soft-line);padding-left:0;padding-top:1.8rem}
}
.hm-bilan-k{display:block;font-family:var(--mono);font-size:.8rem;font-weight:500;letter-spacing:.18em;
  text-transform:uppercase;color:var(--lime);margin-bottom:.9rem}
.hm-bilan b{display:block;font-family:var(--mono);font-variant-numeric:tabular-nums;font-weight:500;color:#fff;
  font-size:clamp(3.4rem,9vw,5.6rem);letter-spacing:-3px;line-height:.92}
.hm-bilan-sub{display:block;margin-top:.85rem;font-size:clamp(1.05rem,1.6vw,1.25rem);
  color:rgba(255,255,255,.82);max-width:40ch;margin-inline:auto}
@media(max-width:860px){.hm-negogrid{grid-template-columns:1fr}}

/* ---------- Bonus encadre des etapes ---------- */
.hm-bonus{margin-top:1rem;background:rgba(173,232,60,.16);border:1px solid rgba(173,232,60,.55);
  border-radius:12px;padding:.75rem .95rem;font-size:.85rem;color:var(--ob2);line-height:1.5}
.hm-bonus b{color:var(--ob);font-family:var(--sky)}
.scard.dark .hm-bonus{background:rgba(173,232,60,.12);border-color:rgba(173,232,60,.35);
  color:rgba(255,255,255,.85)}
.scard.dark .hm-bonus b{color:var(--lime)}
.hm-steps-mono{max-width:1040px;margin:1.6rem auto 0}

/* ---------- VCTA (cadres image plein ecran, ex-videos) ---------- */
.hm-vcta{min-height:min(74vh,560px);display:flex;align-items:center;justify-content:center;
  text-align:center;color:#fff}
.hm-vcta .hm-frame-in{max-width:860px}
.hm-vcta h2{color:#fff;font-size:clamp(2rem,4.6vw,3.4rem);letter-spacing:-1.6px}
.hm-vcta .hero-cta{justify-content:center}
.hm-vcta-k{display:block;font-family:var(--mono);font-size:.7rem;font-weight:500;
  letter-spacing:.22em;text-transform:uppercase;color:var(--lime);margin-bottom:1rem;
  text-shadow:0 1px 14px rgba(10,10,11,.5)}
.hm-vcta p{margin:1rem auto 0;max-width:54ch;color:rgba(255,255,255,.82)}

/* ---------- INSTA / COULISSES ---------- */
.hm-ig{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(1.6rem,3vw,2.6rem);
  margin-top:2.6rem;align-items:start}
.hm-igcard{position:sticky;top:110px;padding:1.7rem 1.6rem;text-align:center}
.hm-igavatar{width:74px;height:74px;border-radius:50%;margin:0 auto 1rem;padding:3px;
  background:linear-gradient(135deg,var(--lime),var(--lime-hover))}
.hm-igavatar img{width:100%;height:100%;border-radius:50%;object-fit:contain;background:#fff;padding:10px}
.hm-igname{font-family:var(--sky);font-weight:600;font-size:1.1rem;color:var(--ob)}
.hm-igbio{font-size:.86rem;color:var(--ob2);margin-top:.6rem;line-height:1.55}
.hm-igbtns{display:flex;flex-direction:column;gap:.6rem;margin-top:1.2rem}
.hm-igbtns .btn{justify-content:center;font-size:.86rem;padding:12px 18px}
.hm-iggrid{display:grid;grid-template-columns:repeat(2,1fr);gap:.8rem}
.hm-iggrid a{position:relative;aspect-ratio:1;border-radius:14px;overflow:hidden;display:block}
.hm-iggrid img{width:100%;height:100%;object-fit:cover;transition:transform .5s cubic-bezier(.22,1,.36,1)}
.hm-iggrid a:hover img{transform:scale(1.05)}
.hm-igplay{position:absolute;right:.6rem;top:.6rem;width:26px;height:26px;border-radius:50%;
  background:rgba(0,0,0,.5);color:#fff;display:flex;align-items:center;justify-content:center;
  font-size:.66rem}
@media(max-width:880px){.hm-ig{grid-template-columns:1fr}.hm-igcard{position:static}}


/* ---------- FAQ ---------- */
.hm-faq{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(2rem,4vw,3.6rem);align-items:start}
.hm-faq-aside{position:sticky;top:110px}
.hm-faq-img{margin-top:1.6rem;border-radius:18px;overflow:hidden;aspect-ratio:4/3}
.hm-faq-img img{width:100%;height:100%;object-fit:cover}
.hm-fcat{font-family:var(--sky);font-size:.95rem;font-weight:600;color:var(--ob);
  margin:1.8rem 0 .8rem;display:flex;align-items:center;gap:.5rem}
.hm-fcat:first-child{margin-top:0}
.hm-faq .fq{grid-template-columns:1fr;margin-top:0;gap:.7rem}
@media(max-width:880px){.hm-faq{grid-template-columns:1fr}.hm-faq-aside{position:static}}

/* ---------- CTA BAND lime (entierement cliquable) ---------- */
.hm-ctaband{display:grid;cursor:pointer;text-decoration:none}
.hm-ctaband .hm-vcta-k{color:#0A0A0B}
.hm-ctaband:hover .hm-arrow{transform:translate(6px,-6px)}
.hm-arrow{font-size:clamp(2.6rem,5vw,4rem);line-height:1;color:var(--ob);
  transition:transform .4s cubic-bezier(.22,1,.36,1);justify-self:end;align-self:center}

/* =========================================================================
   BLOC "PLEINE LARGEUR AU SCROLL" (.hm-bleed) — effet godaylight demande par
   Valentine/Dimitri (23/07). Le bloc est DEJA bord a bord dans le DOM ; on le
   MASQUE en carte avec clip-path:inset(), puis on ouvre le masque au scroll.
   => zero reflow, zero CLS, le contenu interieur ne bouge pas d'un pixel.
   Chemin natif : animation-timeline:view(). Fallback : --bleed pose par home.js.
   ========================================================================= */
.hm-bleed{
  --bleed-gut:calc(max(0px, (100% - var(--wrap)) / 2) + var(--pad));
  --bleed-r0:26px;   /* rayon au repos */
  --bleed-r1:0px;    /* rayon en pleine largeur */
  --bleed:0;         /* progression 0->1 (fallback JS uniquement) */
  --bleed-x:calc(var(--bleed-gut) * (1 - var(--bleed)));
  --bleed-rad:calc(var(--bleed-r0) + (var(--bleed-r1) - var(--bleed-r0)) * var(--bleed));
  position:relative;width:100%;margin:0;border-radius:0;box-shadow:none;overflow:hidden;
  /* Etat par defaut = etat FINAL : sert aussi d'etat reduced-motion et sans-JS. */
  clip-path:inset(0 0 round var(--bleed-r1));
}
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .hm-bleed{animation:hmBleedOpen both cubic-bezier(.42,0,.22,1);
      animation-timeline:view();animation-range:cover 15vh cover 65vh}
  }
  /* Les 2 keyframes DOIVENT avoir la meme forme inset(... round ...) sinon
     aucune interpolation possible (saut brutal). */
  @keyframes hmBleedOpen{
    from{clip-path:inset(0 var(--bleed-gut) round var(--bleed-r0))}
    to{clip-path:inset(0 0 round var(--bleed-r1))}
  }
}
@supports not (animation-timeline:view()){
  @media (min-width:761px) and (prefers-reduced-motion:no-preference){
    .hm-bleed{clip-path:inset(0 var(--bleed-x) round var(--bleed-rad))}
  }
}
/* Mobile : amplitude reduite (la carte y est deja quasi bord a bord). */

/* Variante calee sur le pattern .hm-frame du theme (gouttiere + rayon identiques). */
.hm-bleed--frame{--bleed-gut:clamp(12px,1.5vw,20px);--bleed-r0:var(--r-frame)}
/* L'hote .hm-frame doit lacher sa marge et son rayon : c'est le masque qui les simule. */
.hm-frame.hm-bleed{margin:0;border-radius:0}
/* Reglage mobile place APRES .hm-bleed--frame : a specificite egale, la derniere
   declaration gagne. Avant, ce bloc etait declare avant et donc sans effet. */
@media(max-width:760px){
  .hm-bleed,.hm-bleed--frame{--bleed-gut:14px;--bleed-r0:18px;animation-range:cover 10vh cover 45vh}
}

/* ---------- CARROUSEL AVIS (#reviews) ----------
   Mobile / reduced-motion : scroller natif + scroll-snap (l'utilisateur pilote).
   Desktop (>=1025px, motion OK) : marquee CSS compositée, pilotée par .is-live (JS).
   On ne mélange JAMAIS scroll-snap et animation sur le même axe : le snap
   ramènerait la piste en arrière à chaque frame. */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

.rvx{--rvx-w:clamp(268px,80vw,340px);--rvx-gap:1rem;--rvx-shift:0px;--rvx-dur:60s;
  position:relative;margin-top:2rem;border-radius:var(--r-card)}

.rvx-viewport{
  /* plein-bord MAÎTRISÉ : on annule le padding de .wrap, jamais de 100vw
     (100vw ignore la largeur de la scrollbar => débordement horizontal sous Windows) */
  margin-inline:calc(var(--pad) * -1);
  padding-inline:var(--pad);
  overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x mandatory;
  scroll-padding-inline:var(--pad);
  -webkit-overflow-scrolling:touch;
  overscroll-behavior-x:contain;      /* pas de navigation arrière au swipe iOS/Chrome */
  scrollbar-width:none;
  /* dégradé sur les bords : masque, pas un calque de couleur — le body porte
     une grille en background-image, un overlay opaque dessinerait un rectangle */
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.rvx-viewport::-webkit-scrollbar{display:none}

.rvx-track{display:flex;align-items:stretch;gap:var(--rvx-gap);width:max-content;
  /* laisse l'ombre des cartes respirer : overflow-y:hidden la rognerait */
  padding-block:.5rem 1.8rem}
.rvx-track > .review-card{
  flex:0 0 var(--rvx-w);            /* largeur FIXE : zéro variance, zéro CLS, période de boucle stable */
  scroll-snap-align:center;
  text-align:left;                  /* .hm-center centre tout le bloc : illisible sur 340px de texte */
  padding:1.4rem;gap:.7rem;min-height:262px;
  /* PERF : on retire backdrop-filter (blur 28px + saturate 170%) — 10 cartes floutées
     translatées en continu = recomposition permanente du fond. Rendu quasi identique. */
  background:rgba(255,255,255,.74);
  backdrop-filter:none;-webkit-backdrop-filter:none;
  box-shadow:0 14px 34px rgba(10,10,11,.12),inset 0 1px 0 rgba(255,255,255,.9)}
.rvx-track > .review-card p{font-size:.9rem;line-height:1.6}
.rvx-track .review-author span{color:#55565A}  /* gris book #55565A = 6,83:1 sur le fond (calculé), AA OK en .74rem */

/* --- état marquee (classe posée par le JS uniquement) --- */
.rvx.is-live .rvx-viewport{overflow:hidden;scroll-snap-type:none}
/* Indice "faites glisser" : visible des que le marquee N'EST PAS monte (761-1024px,
   et tout desktop en reduced-motion) ; masque uniquement quand ca defile tout seul. */
.hm-rev-hint{display:block}
.rvx.is-live ~ .hm-rev-hint{display:none}
.rvx.is-live .rvx-track{animation:rvxScroll var(--rvx-dur) linear infinite}
.rvx.is-live .rvx-track.is-paused{animation-play-state:paused}
@keyframes rvxScroll{
  from{transform:translate3d(0,0,0)}
  to{transform:translate3d(calc(var(--rvx-shift) * -1),0,0)}
}

/* --- anneau de focus sur le WRAPPER : posé sur .rvx-viewport il serait
       mangé par le mask-image (l'outline est peint, donc masqué). --- */
.rvx.is-focus{outline:2px solid var(--ob);outline-offset:6px}

/* --- bouton pause/lecture --- */
/* min-height : la place du bouton est RESERVEE meme quand il est [hidden],
   sinon son apparition au montage pousse le contenu (decalage de mise en page). */
.rvx-bar{margin-top:1.1rem;min-height:35px}
.rvx-toggle[hidden]{display:none}
.rvx-toggle{display:inline-flex;align-items:center;gap:.5rem;
  font-family:var(--sky);font-size:.76rem;font-weight:600;letter-spacing:.02em;
  color:var(--ob);background:rgba(255,255,255,.72);
  border:1px solid rgba(10,10,11,.10);border-radius:50px;padding:8px 16px;
  transition:background .3s,border-color .3s}
.rvx-toggle:hover{background:#fff;border-color:rgba(10,10,11,.2)}
.rvx-toggle:focus-visible{outline:2px solid var(--ob);outline-offset:3px}
.rvx-ico{width:9px;height:11px;flex:none;background:var(--ob);
  clip-path:polygon(0 0,32% 0,32% 100%,0 100%,0 0,68% 0,100% 0,100% 100%,68% 100%)}
.rvx-toggle.is-paused .rvx-ico{clip-path:polygon(0 0,100% 50%,0 100%)}

@media(min-width:1025px){
  .rvx{--rvx-w:340px}
  /* "centré et moins large" (retour designer) : 1040px dans un wrap de 1240
     => 3 cartes pleines + une 4e qui dépasse, ce qui SIGNALE que ça défile */
  .rvx-viewport{max-width:1040px;margin-inline:auto;padding-inline:0}
}

@media(prefers-reduced-motion:reduce){
  /* aeconomia.css l.403 pose déjà *{animation:none!important} — ceinture + bretelles,
     et surtout : on masque les clones si jamais ils avaient été injectés avant
     le basculement de la media query (même logique que .hm-track img[aria-hidden]) */
  .rvx-track{animation:none!important}
  .rvx-clone{display:none!important}
}

/* =========================================================================
   HIERARCHIE VISUELLE a 3 niveaux (retour Valentine 23/07 : "pas trop de
   hierarchie visuelle, les blocs ne vont pas trop entre eux").
   Niveau 0 = hero (intouche, LCP) · 1 = moment fort · 2 = standard · 3 = service.
   ========================================================================= */
/* Utilitaires : remplacent les style="padding-*" inline, qui battaient les
   padding-block des niveaux (un style inline gagne toujours sur une classe). */
.pt0{padding-top:0}
.plr0{padding-left:0;padding-right:0}

/* --- Niveau 0 — Ancre (hero, hors échelle) --- */
/* AUCUNE MODIFICATION. Valeurs conservées telles quelles :
   .hero h1 { font-size: clamp(2.5rem, 6.4vw, 5rem); letter-spacing: -3px; line-height: .94 }
   @media(max-width:560px){ .hero h1 { font-size: clamp(2rem, 9vw, 2.7rem); letter-spacing: -1.5px } }
   .lead { font-size: clamp(1rem, 1.4vw, 1.18rem) }
   Ne pas toucher : élément LCP. */

/* --- Niveau 1 — Moment fort --- */
/* ---------- NIVEAU 1 : moment fort ---------- */
.hm-lvl1 .h2,
.hm-lvl1 .hm-t{font-size:clamp(2.6rem,5.6vw,4.2rem);letter-spacing:-2.2px;line-height:1}

/* kicker renforcé. ATTENTION contraste : var(--lime) = 1,36:1 sur le fond #F7F7F5,
   interdit en petit texte (règle book : jamais de vert en texte sur fond clair).
   Sur fond clair on prend #55565A (6,83:1 calculé). Sur les cadres sombres
   .hm-frame, le lime repasse AA. */
.hm-lvl1 .eyebrow{font-size:.72rem;letter-spacing:.22em;color:#55565A}
.hm-lvl1 .eyebrow::before{width:22px}
.hm-frame.hm-lvl1 .eyebrow,
.hm-lvl1 .hm-frame .eyebrow{color:var(--lime)}

/* le sous-titre CAPITALES disparaît : c'est lui qui banalisait les moments forts */
.hm-lvl1 .hm-k{display:none}

/* la description passe en taille lead : elle porte l'argument, elle n'accompagne pas */
.hm-lvl1 .hm-desc{font-size:clamp(1.05rem,1.5vw,1.25rem);line-height:1.6;max-width:54ch;margin-top:1.1rem}

/* respiration : +25 %. NB les style="padding-top:0" inline de front-page.php
   battent cette règle en spécificité, cf. entrée « Réglages transverses ». */
.hm-lvl1{padding-block:calc(var(--sec) * 1.25)}
/* :first-child SCOPE aux enfants directs du .wrap / .hm-frame-in : un descendant
   libre matchait le 1er item de n'importe quel sous-conteneur (bug FAQ 24/07,
   marge parasite sur le 1er item de chaque categorie). Regle = ce selecteur vise
   UNIQUEMENT l'en-tete de section, jamais les elements de grilles internes. */
.hm-lvl1 .hm-head,
.hm-lvl1 .wrap > .rv:first-child,
.hm-lvl1 .hm-frame-in > .rv:first-child{margin-bottom:2.6rem}

@media(max-width:560px){
  .hm-lvl1 .h2,
  .hm-lvl1 .hm-t{font-size:clamp(2.1rem,8.5vw,2.8rem);letter-spacing:-1.4px}
}

/* --- Manifesto : aligner sur le palier 1 (il était à 3.2rem = niveau standard) --- */
.hm-manifesto{font-size:clamp(2.6rem,5.6vw,4.2rem);letter-spacing:-2.2px}
.hm-manifesto-k{font-size:.72rem;letter-spacing:.22em}  /* était .82rem, 6e format de kicker */
@media(max-width:560px){.hm-manifesto{font-size:clamp(2.1rem,8.5vw,2.8rem);letter-spacing:-1.4px}}

/* --- Chiffre-clé : il doit rester le plus GROS NOMBRE, pas le plus gros élément
       de la page. 6.2rem passait devant le h1 (5rem) sans en-tête pour le porter. --- */
.hm-keyfig b{font-size:clamp(3.2rem,7.5vw,5.2rem);letter-spacing:-2.6px}
.hm-keyfig{margin-top:2.2rem}
.hm-keyfig .eyebrow{font-size:.72rem;letter-spacing:.22em;color:#55565A}


/* --- Niveau 2 — Section standard --- */
/* ---------- NIVEAU 2 : standard (valeurs actuelles, conservées) ----------
   .h2 reste clamp(2rem,4.2vw,3.2rem) / ls -1.6px  -> défini dans aeconomia.css
   .eyebrow reste .66rem / ls .2em / var(--sage2)
   .hm-k reste .72rem / ls .18em / uppercase / var(--sage2)
   .hm-desc reste 1rem hérité / 62ch
   -> NE RIEN MODIFIER dans aeconomia.css : .h2 est partagé par les LP. */

.hm-lvl2{padding-block:var(--sec)}
.hm-lvl2 .hm-head,
.hm-lvl2 .wrap > .rv:first-child,
.hm-lvl2 .hm-frame-in > .rv:first-child{margin-bottom:2rem}
.hm-lvl2 .hm-desc{max-width:62ch}

/* CORRECTION 1 : l'intro #steps montait à 3.4rem et venait concurrencer le niveau 1
   pour 6 % d'écart (imperceptible). Son poids vient de son cadre pleine largeur
   et de sa photo de fond, pas de la typo. On la ramène au standard. */
.hm-vcta h2{font-size:clamp(2rem,4.2vw,3.2rem);letter-spacing:-1.6px}
.hm-vcta-k{font-size:.66rem;letter-spacing:.2em}  /* était .7rem, aligné sur .eyebrow */

/* CORRECTION 2 : .scard-h (h3 de carte) plafonnait à 2.5rem alors que le h2 de sa
   section descend à 2.15rem sous 560px -> le h3 passait devant le h2. */
#steps .scard-h{font-size:clamp(1.5rem,2.6vw,2.05rem)}

/* CORRECTION 3 : le "/" est la signature du système de titres, il ne descend pas
   au niveau h3. Les cartes #rate gardent leur h3, sans le slash. */
.hm-nego h3::before{content:none}
.hm-nego h3{font-size:1.12rem;letter-spacing:-.4px}  /* inchangé par ailleurs */

/* --- Niveau 3 — Section de service / secondaire --- */
/* ---------- NIVEAU 3 : service / secondaire ---------- */
.hm-lvl3 .h2,
.hm-lvl3 .hm-t{font-size:clamp(1.65rem,2.8vw,2.35rem);letter-spacing:-1px;line-height:1.1}

/* kicker atténué : texte en var(--muted) #55565A (6,83:1 sur le fond, AA OK),
   barre lime raccourcie mais CONSERVÉE (signature DA, ne pas la passer en gris). */
.hm-lvl3 .eyebrow{font-size:.66rem;letter-spacing:.18em;color:#55565A}
.hm-lvl3 .eyebrow::before{width:10px}

.hm-lvl3 .hm-k{display:none}
.hm-lvl3 .hm-desc{font-size:.92rem;line-height:1.6;max-width:58ch;color:#55565A;margin-top:.7rem}

.hm-lvl3{padding-block:calc(var(--sec) * .72)}
.hm-lvl3 .hm-head,
.hm-lvl3 .wrap > .rv:first-child,
.hm-lvl3 .hm-frame-in > .rv:first-child{margin-bottom:1.4rem}

@media(max-width:560px){
  .hm-lvl3 .h2,
  .hm-lvl3 .hm-t{font-size:clamp(1.45rem,6.2vw,1.8rem);letter-spacing:-.6px}
}

/* --- #trust : reste sans en-tête (c'est une bande de liaison, pas une section).
       Sa légende rentre simplement dans l'échelle des kickers. --- */
.hm-logos-cap{font-size:.66rem;letter-spacing:.18em}  /* était .68rem ; .62rem passait sous le plancher mono */

/* --- #faq : les catégories doivent rester nettement sous un h2 devenu petit --- */
.hm-faq .hm-fcat{font-size:.88rem}  /* était .95rem, trop proche des 2.35rem en mobile */

/* --- Réglages transverses (à appliquer avec les 3 niveaux) --- */
/* ============================================================
   1. POINT BLOQUANT — styles inline
   front-page.php porte des style="padding-top:0" sur #team, #reviews, #edge,
   #steps, #rate, #insta, #sim, #faq. Un style inline bat toujours une classe :
   les padding-block des niveaux 1 et 3 seront IGNORÉS tels quels.
   -> Retirer ces attributs et les remplacer par des utilitaires :
      .pt0{padding-top:0}   .plr0{padding-left:0;padding-right:0}
   Les classes de niveau se placent alors sur <section>, ex :
      <section id="reviews" class="hm-lvl1 pt0">
      <section id="faq"     class="hm-lvl3 pt0">
   Sans cette étape, seule la hiérarchie typographique s'applique, pas le rythme
   vertical, soit un des trois axes perdu sur trois.

   2. ÉCHELLE DE KICKERS — 6 valeurs ramenées à 3
      avant : .62 / .66 / .68 / .70 / .72 / .82rem  (bruit, aucune lecture)
      après : .72rem (niveau 1) | .66rem (niveau 2) | .62rem (niveau 3)
   Réalignements déjà inclus dans les blocs ci-dessus :
      .hm-manifesto-k .82 -> .72 | .hm-gh-k .70 -> .72 | .hm-vcta-k .70 -> .66
      .hm-logos-cap  .68 -> .62 | .hm-k inchangé (.72rem), mais réservé au niveau 2

   3. ÉCHELLE DE TITRES RÉSULTANTE (desktop, valeur max)
      hero h1        5.0rem   ancre
      niveau 1       4.2rem   ratio 1.31 vs standard, écart lisible
      niveau 2       3.2rem   inchangé (kit partagé LP)
      niveau 3       2.35rem  ratio 1.36 vs standard
      .scard-h       2.05rem  toujours sous le h2 de sa section
      keyfig b       5.2rem   plus gros nombre, sous le h1
   ============================================================ */

/* 4. ACCESSIBILITÉ — contrastes calculés sur les fonds réels (re-skin DA 29/07)
   #55565A sur #F7F7F5 = 6,83:1 (AA)              -> kickers + desc, fond clair
   var(--lime) #ADE83C sur #F7F7F5 = 1,36:1 ECHEC -> INTERDIT en texte sur fond clair,
     autorisé uniquement sur .hm-frame (overlay rgba(10,10,11,.68)) et .hm-manifesto-band
   Le slash .hm-t::before reste lime partout : c'est un glyphe décoratif adjacent
   au titre, pas un porteur d'information. Ne pas le recolorer.

   5. PERF — aucun impact
   Pure typographie CSS : graisses couvertes par l'enqueue Instrument Sans 400/500/600
   + JetBrains Mono 400/500 (functions.php), pas de lib supplémentaire, pas de JS.
   Le hero (élément LCP) n'est touché par aucune règle. Les clamp() suivent la même
   forme que l'existant, aucun reflow au chargement.

   6. MOBILE-FIRST — le bloc @media(max-width:560px) de aeconomia.css redéfinit .h2 ;
   les niveaux 1 et 3 ont donc leur propre override à 560px (inclus plus haut).
   Écarts mobile : 2.8 / 2.15 / 1.8rem, ratios 1.30 et 1.19. Le palier service est
   volontairement moins creusé en mobile pour rester lisible.

   7. prefers-reduced-motion : aucune animation ajoutée, le bloc existant de
   aeconomia.css (ligne 402) reste valable sans modification. */
/* Manifesto : son titre est un <p class="hm-manifesto">, pas un .h2/.hm-t, donc
   la regle de niveau 1 ne l'attrapait pas. On l'aligne explicitement (3.2 -> 4.2rem)
   pour qu'il pese comme un vrai moment fort. */
.hm-lvl1 .hm-manifesto{font-size:clamp(2.6rem,5.6vw,4.2rem)}
/* Chiffre-cle : recale a 4.6rem max. A 5.2rem il sortait a 83px, soit AU-DESSUS
   du h1 du hero (80px) : or le hero est le plafond de la page. Echelle finale
   descendante : hero 80 > chiffre-cle 74 > titres niveau 1 67 > niveau 2 51 > niveau 3 38. */
.hm-keyfig b{font-size:clamp(3.2rem,7vw,4.6rem)}

/* ============================================================================
   PORTAGE SECTIONS MANQUANTES (maquette Home 06/08 — session portage-sections).
   Sept sections nouvelles : taux publies (#trust), #gain, #comparatif,
   respiration, #delegation, #solutions, #honoraires, #agences (composant kit
   .agsel), ressources (cartes .rel-card de blog.css), CTA final. Les cotes
   viennent de la maquette (cqw -> vw), les couleurs des tokens du kit.
   ========================================================================= */

/* ---------- Taux publies (dans #trust, sous les pilules) ---------- */
.hm-rates{display:flex;gap:clamp(1.6rem,4vw,3.4rem);flex-wrap:wrap;align-items:flex-end;
  justify-content:space-between;margin-top:2.6rem;padding:clamp(1.6rem,2.4vw,2.2rem) clamp(1.4rem,2.4vw,2rem);
  background:var(--white);border:1px solid rgba(10,10,11,.08);border-radius:var(--r-card);
  box-shadow:0 30px 70px -46px rgba(10,10,11,.35)}
.hm-rates-l{flex:1 1 300px;min-width:260px}
.hm-rates-k{display:block;font-family:var(--mono);font-size:10.5px;font-weight:500;
  letter-spacing:.1em;color:#6E6E73}
.hm-rates-l p{font-size:15px;color:var(--ob2);line-height:1.5;margin:14px 0 0;max-width:420px}
.hm-rates-l strong{color:var(--ob);font-weight:600}
.hm-rates-grid{flex:2 1 460px;min-width:280px;margin:0;
  grid-template-columns:repeat(auto-fit,minmax(118px,1fr))} /* 4 taux cote a cote (cote maquette) */
.hm-rates-grid .txcard{border:0;padding:0 0 0 18px;border-left:1px solid rgba(10,10,11,.1);
  border-radius:0;display:flex;flex-direction:column;gap:3px;align-items:flex-start}
.hm-rates-grid .txcard b{font-size:clamp(1.75rem,3vw,2.35rem);letter-spacing:-.05em;line-height:1}
.hm-rates-grid .txcard span{font-size:12.5px}
.hm-rates-legal{flex:1 1 100%;font-family:var(--mono);font-size:12px;line-height:1.5;
  color:#6E6E73;margin:.4rem 0 0}
@media(max-width:760px){
  .hm-rates-grid{grid-template-columns:1fr 1fr;gap:1.1rem}
}

/* ---------- #gain : l'ecart de taux tangible ---------- */
.hm-gain{display:flex;gap:clamp(2rem,4.4vw,3.8rem);flex-wrap:wrap;align-items:center}
.hm-gain-txt{flex:1 1 400px;min-width:280px}
.hm-gain-note{margin-top:2rem;max-width:470px;padding:1.5rem 0;
  border-top:1px solid rgba(10,10,11,.13);border-bottom:1px solid rgba(10,10,11,.13)}
.hm-gain-note b{display:block;font-family:var(--sky);font-size:1.18rem;font-weight:600;
  letter-spacing:-.025em;color:var(--ob)}
.hm-gain-note p{font-size:.94rem;color:var(--ob2);line-height:1.55;margin:.55rem 0 0}
.hm-gain-note a{color:var(--ob);font-weight:600;white-space:nowrap;
  background-image:linear-gradient(transparent 66%,var(--mark) 66%);background-repeat:no-repeat;background-size:100% 100%}
.hm-gainbox{flex:1 1 440px;min-width:280px;padding:28px}
.hm-gain-head{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.hm-gain-pill{display:inline-flex;align-items:center;gap:9px;background:rgba(10,10,11,.045);
  border:1px solid rgba(10,10,11,.07);border-radius:var(--pill);padding:7px 14px 7px 12px;
  font-family:var(--sky);font-size:13px;font-weight:600;letter-spacing:-.015em;color:var(--ob);white-space:nowrap}
.hm-gain-line{display:flex;align-items:baseline;gap:15px;flex-wrap:wrap;margin-top:18px}
.hm-gain-rate{font-family:var(--mono);font-size:clamp(48px,5.6vw,72px);letter-spacing:-.06em;
  line-height:1;font-variant-numeric:tabular-nums;color:var(--ob)}
.hm-gain-mens{font-family:var(--mono);font-size:19px;color:#6E6E73;white-space:nowrap;font-variant-numeric:tabular-nums}
.hm-gain-delta{margin-left:auto;white-space:nowrap;background:rgba(10,10,11,.05);
  border:1px solid rgba(10,10,11,.1);border-radius:var(--pill);padding:8px 14px;
  font-family:var(--mono);font-size:13px;font-variant-numeric:tabular-nums;color:var(--ob2);
  transition:background .3s,color .3s,border-color .3s}
.hm-gain-delta.is-on{background:rgba(173,232,60,.5);border-color:rgba(173,232,60,.7);color:var(--ob)}
/* Ligne d'unite : 12px, plancher du book §13 (la maquette descendait a 9,5). */
.hm-gain-k{font-family:var(--mono);font-size:12px;letter-spacing:.07em;color:#6E6E73;margin-top:12px}
.hm-gain-svg{width:100%;height:auto;margin-top:18px;display:block}
.hm-gain-ax{font-family:var(--mono);font-size:11px;fill:#6E6E73}
/* 10px : plancher mono du book §04 (la maquette descendait a 9,5). */
.hm-gain-axl{font-family:var(--mono);font-size:10px;letter-spacing:.08em;fill:#6E6E73}
.hm-gain-axl.is-us{fill:#0A0A0B}
/* Carte resultat : pattern 8, memes fondations que `.aec-glass .result`. */
.hm-gain-out{position:relative;overflow:hidden;margin-top:22px;background:var(--ob);color:#fff;
  border-radius:18px;padding:24px;border:1px solid rgba(173,232,60,.2);
  opacity:.3;transform:translateY(12px);transition:opacity .5s var(--ease),transform .5s var(--ease)}
.hm-gain-out::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}
.hm-gain-out.is-on{opacity:1;transform:none}
.hm-gain-out>*{position:relative}
.hm-gain-big{display:block;font-family:var(--mono);font-weight:500;font-size:clamp(36px,4.2vw,52px);
  letter-spacing:-.05em;margin-top:12px;font-variant-numeric:tabular-nums;line-height:1;color:#fff}
.hm-gain-sub{display:block;font-size:13.5px;color:rgba(255,255,255,.66);margin-top:10px}
.hm-gain-hyp{font-family:var(--sky);font-size:14px;line-height:1.6;letter-spacing:0;
  color:#6E6E73;margin:15px 0 0}
@media(max-width:760px){.hm-gainbox{padding:18px}.hm-gain-delta{margin-left:0}}

/* ---------- #comparatif : courtier ou seul ---------- */
.hm-comp-head{max-width:900px}
/* Barre anime du titre : etat final BARRE des le markup (.is-on), home.js retire
   la classe puis la remet au defilement. Texte barre = gris une fois barre. */
.hm-strike{position:relative;display:inline-block}
.hm-strike-t{transition:color .55s var(--ease)}
.hm-strike.is-on .hm-strike-t{color:var(--sage2)}
.hm-strike-bar{position:absolute;left:-.045em;right:-.045em;top:52%;height:.105em;border-radius:.06em;
  background:var(--ob);transform:scaleX(0);transform-origin:left center;pointer-events:none;display:block}
.hm-strike.is-on .hm-strike-bar{transform:scaleX(1);transition:transform .55s var(--ease)}
.hm-comp{margin-top:2rem}
.hm-comp-row{display:grid;grid-template-columns:minmax(170px,1fr) 1fr 1.1fr;gap:14px 0;
  padding:20px 0;border-bottom:1px solid rgba(10,10,11,.09);transition:background .2s}
.hm-comp-row:hover{background:var(--white)}
.hm-comp-row--head{padding:0 0 14px;border-bottom:1px solid rgba(10,10,11,.2)}
.hm-comp-row--head:hover{background:transparent}
.hm-comp-k{font-family:var(--mono);font-size:10.5px;font-weight:500;letter-spacing:.1em;color:#6E6E73}
.hm-comp-k--us{display:flex;align-items:center;gap:8px;color:var(--ob)}
.hm-comp-k--us .aec-dot{width:6px;height:6px}
.hm-comp-c{font-family:var(--sky);font-size:16px;font-weight:600;letter-spacing:-.02em;color:var(--ob);padding-right:20px}
.hm-comp-alone{font-size:15px;color:#6E6E73;line-height:1.45;padding-right:20px}
.hm-comp-us{font-size:15px;color:var(--ob);line-height:1.45;display:flex;gap:10px;align-items:flex-start}
.hm-comp-us .aec-dot{width:6px;height:6px;margin-top:7px}
/* Etiquettes mobiles : n'apparaissent que quand la grille s'empile. */
.hm-comp-alone em,.hm-comp-us em{display:none;font-style:normal;font-family:var(--mono);
  font-size:10px;font-weight:500;letter-spacing:.09em;color:#6E6E73;margin-bottom:5px}
.hm-comp-foot{display:flex;gap:14px;flex-wrap:wrap;align-items:center;margin-top:2rem}
.hm-comp-foot span{font-size:14.5px;color:#6E6E73}
@media(max-width:1024px){
  .hm-comp-row{grid-template-columns:1fr;gap:10px 0}
  .hm-comp-row--head{display:none}
  .hm-comp-alone em,.hm-comp-us em{display:block}
}

/* ---------- Respiration : photo pleine largeur, zero CTA ---------- */
/* Texte blanc sur photo : VOILE (degrade 92deg + plancher) calibre par
   echantillonnage de pixels au rendu (session portage-sections) — la zone de
   texte (moitie gauche) vise >= 4,5:1 pour le paragraphe, >= 3:1 pour le H2. */
.hm-breather{position:relative;height:clamp(290px,36vw,460px);overflow:hidden;background:var(--ob)}
.hm-breather-in{position:absolute;inset:0}
.hm-breather-in img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:50% 32%;filter:saturate(.5) contrast(1.08) brightness(.9)}
.hm-breather-tint{position:absolute;inset:0;background:var(--lime);opacity:.1;mix-blend-mode:soft-light}
.hm-breather-veil{position:absolute;inset:0;background:
  linear-gradient(92deg,rgba(10,10,11,.92) 0%,rgba(10,10,11,.78) 44%,rgba(10,10,11,.38) 66%,rgba(10,10,11,.08) 86%)}
.hm-breather-txt{position:relative;height:100%;max-width:var(--wrap);margin:0 auto;
  padding:0 var(--pad);display:flex;flex-direction:column;justify-content:center;gap:clamp(14px,1.8vw,20px)}
/* align-self : sans lui la colonne etire le label sur toute la largeur et sa boite
   sort de la zone voilee (constate a la mesure : faux minimum a 1,3:1 sur la partie
   vide de la boite). */
.hm-breather-k{display:inline-flex;align-self:flex-start;align-items:center;gap:12px;
  font-family:var(--mono);font-size:10.5px;font-weight:500;letter-spacing:.1em;color:rgba(255,255,255,.85)}
.hm-breather-txt h2{font-size:clamp(28px,4.1vw,54px);line-height:1.03;letter-spacing:-.04em;
  font-weight:600;color:#fff;margin:0;max-width:620px;text-wrap:balance}
.hm-breather-txt h2 span{color:rgba(255,255,255,.78)}
.hm-breather-txt p{font-size:15.5px;line-height:1.5;color:rgba(255,255,255,.85);margin:0;max-width:400px}
@media(max-width:760px){
  .hm-breather{height:auto;min-height:320px}
  .hm-breather-txt{padding:2.4rem var(--pad)}
  .hm-breather-veil{background:linear-gradient(180deg,rgba(10,10,11,.86) 0%,rgba(10,10,11,.72) 100%)}
}

/* ---------- #delegation : 3 cartes + encart ---------- */
.hm-deleg{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.1rem,2vw,1.6rem);margin-top:2.2rem}
@media(max-width:980px){.hm-deleg{grid-template-columns:1fr}}
.hm-deleg-card{padding:clamp(1.6rem,2.4vw,2.1rem);display:flex;flex-direction:column;gap:.9rem;
  transition:transform .35s var(--ease),box-shadow .35s}
.hm-deleg-card:hover{transform:translateY(-4px)}
.hm-deleg-top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.hm-deleg-n{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:.72rem;color:#6E6E73}
.hm-deleg-card h3{font-size:clamp(1.3rem,1.8vw,1.55rem);letter-spacing:-.03em;line-height:1.15}
.hm-deleg-card>p{font-size:.94rem;color:var(--ob2);line-height:1.55;margin:0}
.hm-deleg-items{list-style:none;margin:auto 0 0;padding:1rem 0 0;border-top:1px solid rgba(10,10,11,.09);
  display:flex;flex-direction:column;gap:.55rem}
.hm-deleg-items li{position:relative;padding-left:1.15rem;font-size:.88rem;line-height:1.45;color:var(--ob2)}
.hm-deleg-items li::before{content:"";position:absolute;left:0;top:.5em;width:5px;height:5px;
  border-radius:50%;background:var(--lime)}
.hm-deleg-enc{display:flex;gap:18px;flex-wrap:wrap;align-items:center;margin-top:18px;
  padding:22px 24px;border:1px solid rgba(10,10,11,.12);border-radius:18px;background:var(--white)}
.hm-deleg-enc>.aec-dot{flex:none}
.hm-deleg-enc p{flex:1 1 420px;min-width:280px;font-size:1rem;line-height:1.5;color:var(--ob);margin:0}
.hm-deleg-enc strong{font-weight:600}

/* ---------- #solutions : les 6 profils ---------- */
.hm-profils{margin-top:2.2rem;border-top:1px solid rgba(10,10,11,.13);display:flex;flex-wrap:wrap}
.hm-profil{flex:1 1 380px;min-width:300px;display:flex;gap:20px;align-items:flex-start;
  padding:26px 18px;border-bottom:1px solid rgba(10,10,11,.11);
  transition:background .25s var(--ease),padding-left .25s var(--ease)}
.hm-profil:hover{background:var(--white);padding-left:28px;color:inherit}
.hm-profil-n{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:.72rem;
  color:#6E6E73;padding-top:5px;flex:none}
.hm-profil-in{flex:1}
.hm-profil-in b{display:block;font-family:var(--sky);font-size:1.24rem;font-weight:600;
  letter-spacing:-.028em;color:var(--ob)}
.hm-profil-in span{display:block;font-size:.94rem;line-height:1.55;color:var(--ob2);margin-top:.45rem}
.hm-profil-a{font-family:var(--mono);font-size:1rem;color:var(--ob);padding-top:4px;flex:none;
  transition:transform .25s var(--ease)}
.hm-profil:hover .hm-profil-a{transform:translateX(4px)}

/* ---------- #honoraires : texte + rangees .split-row (kit) ---------- */
.hm-hono{display:flex;gap:clamp(2rem,4.4vw,3.8rem);flex-wrap:wrap;align-items:flex-start}
.hm-hono-l{flex:1 1 400px;min-width:280px}
.hm-hono-rows{flex:1 1 440px;min-width:280px;border-top:1px solid rgba(10,10,11,.13)}
.hm-hono-rows .split-row{padding:1.35rem 6px;transition:background .25s var(--ease),padding-left .25s var(--ease)}
.hm-hono-rows .split-row:hover{background:var(--white);padding-left:16px}
.hm-hono-rows .split-row .n{color:#6E6E73;font-size:.72rem;padding-top:.3rem}
.hm-hono-rows .split-row b{font-size:1.08rem;letter-spacing:-.02em}
.hm-hono-rows .split-row span{font-size:.92rem;line-height:1.55}

/* ---------- CTA final ---------- */
.hm-final{border-top:1px solid rgba(10,10,11,.13);padding-top:clamp(2.4rem,4.6vw,3.6rem);
  display:flex;gap:2.2rem;flex-wrap:wrap;align-items:flex-end;justify-content:space-between}
.hm-final-l{flex:1 1 420px;min-width:280px;max-width:640px}
.hm-final-tel{font-family:var(--mono);font-variant-numeric:tabular-nums}

/* ============================================================================
   SIMULATEUR RICHE (.vsim) — porte de la maquette Valentine (simulation.html)
   sur la home. Composant reutilisable par la page /simulation dediee (a extraire
   en sim.css partage a ce moment-la). Boutons a11y + focus-visible + reduced-motion.
   JS = initVsim() dans aeconomia.js, guarde par [data-vsim].
   ========================================================================= */
.vsim{
  --vs-cream:#EDEDE8; --vs-beige:#E3E3DE;
  --vs-border:rgba(10,10,11,.08); --vs-border2:rgba(10,10,11,.14); --vs-sage:#A5A5AA;
  --vs-clay:6px 6px 18px rgba(10,10,11,.12),-3px -3px 10px rgba(255,255,255,.88),inset 0 1px 0 rgba(255,255,255,.72);
  --vs-clay-sm:3px 3px 10px rgba(10,10,11,.10),-2px -2px 7px rgba(255,255,255,.82),inset 0 1px 0 rgba(255,255,255,.58);
  --vs-clay-h:8px 8px 24px rgba(10,10,11,.15),-4px -4px 14px rgba(255,255,255,.94),inset 0 1px 0 rgba(255,255,255,.74);
  max-width:1080px;margin:2.4rem auto 0;display:flex;flex-direction:column;gap:.85rem}

/* --- Resultat --- */
.vsim-hero{background:var(--white);border-radius:var(--r-card);padding:1.7rem;box-shadow:var(--vs-clay);
  border:1px solid rgba(255,255,255,.85);position:relative;overflow:hidden;
  display:grid;grid-template-columns:190px 1fr;gap:1.8rem;align-items:center}
.vsim-hero::before{content:"";position:absolute;top:-60px;right:-60px;width:260px;height:260px;border-radius:50%;
  background:radial-gradient(circle,rgba(173,232,60,.12),transparent 65%);pointer-events:none;animation:vsBlob 14s ease-in-out infinite}
@keyframes vsBlob{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(18px,-12px) scale(1.04)}66%{transform:translate(-12px,8px) scale(.97)}}
.vsim-icon{position:relative;z-index:2;display:flex;align-items:center;justify-content:center}
.vsim-icon-in{width:180px;height:180px;background:linear-gradient(145deg,var(--vs-cream),var(--vs-beige));
  border-radius:22px;border:1.5px solid rgba(10,10,11,.13);
  box-shadow:var(--vs-clay-sm),inset 2px 2px 5px rgba(255,255,255,.6);
  display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}
.vsim-icon-in::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 50% 72%,rgba(165,165,170,.2),transparent 70%);pointer-events:none}
.vsim [data-vs-img]{width:138px;height:138px;object-fit:contain;position:relative;z-index:2;
  filter:drop-shadow(0 12px 20px rgba(10,10,11,.15))}
.vsim [data-vs-img].is-swap{animation:vsSwap .6s cubic-bezier(.22,1,.36,1)}
@keyframes vsSwap{0%{transform:scale(1) rotate(0);opacity:1}40%{transform:scale(.55) rotate(-12deg);opacity:0}60%{transform:scale(1.18) rotate(10deg);opacity:1}100%{transform:scale(1) rotate(0);opacity:1}}
.vsim-tier{position:absolute;bottom:10px;left:50%;transform:translateX(-50%);font-family:var(--mono);
  font-size:.52rem;font-weight:500;letter-spacing:.09em;text-transform:uppercase;color:var(--sage2-ink,#55565A);
  background:rgba(255,255,255,.92);padding:4px 11px;border-radius:50px;white-space:nowrap;
  box-shadow:var(--vs-clay-sm);border:1px solid rgba(255,255,255,.7);z-index:3}
.vsim-dots{display:flex;gap:4px;position:absolute;top:12px;left:50%;transform:translateX(-50%);z-index:3}
.vsim-dots span{width:5px;height:5px;border-radius:50%;background:rgba(10,10,11,.16);transition:all .35s cubic-bezier(.22,1,.36,1)}
.vsim-dots span.active{background:var(--lime);box-shadow:0 0 8px rgba(173,232,60,.7);width:16px;border-radius:50px}
.vsim-info{display:flex;flex-direction:column;gap:1rem;position:relative;z-index:2;min-width:0}
.vsim-info-top{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem}
.vsim-b{display:flex;flex-direction:column;min-width:0}
.vsim-l{font-family:var(--mono);font-size:.52rem;font-weight:500;letter-spacing:.11em;text-transform:uppercase;
  color:var(--vs-muted,#55565A);margin-bottom:.35rem;display:flex;align-items:center;gap:.38rem}
.vsim-l::before{content:"";width:10px;height:2px;background:var(--lime);border-radius:2px}
.vsim-n{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:clamp(1.85rem,3.4vw,2.55rem);font-weight:500;letter-spacing:-2px;
  color:var(--ob);line-height:.95;white-space:nowrap}
.vsim-n.glitch{animation:vsGlitch .1s steps(1) 4}
@keyframes vsGlitch{0%{transform:translate(0)}25%{transform:translate(-2px,1px)}50%{transform:translate(2px,-1px)}75%{transform:translate(-1px,2px)}100%{transform:translate(0)}}
.vsim-s{font-family:var(--body);font-size:.66rem;color:#55565A;margin-top:.28rem;line-height:1.45}
.vsim-meta{display:flex;gap:1.4rem;padding-top:.9rem;border-top:1px dashed rgba(10,10,11,.13);flex-wrap:wrap;align-items:center}
.vsim-m{display:flex;flex-direction:column}
.vsim-m-l{font-family:var(--mono);font-size:.48rem;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:#55565A}
.vsim-m-v{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:.92rem;font-weight:500;letter-spacing:-.4px;color:var(--ob);margin-top:.2rem}
.vsim-m-v em{color:var(--sage2-ink,#55565A);font-style:normal;font-size:1.2em;font-weight:600}
.vsim-cta{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--sky);font-size:.82rem;font-weight:600;
  background:var(--ob-soft);color:var(--bg);border:none;border-radius:13px;padding:13px 22px;cursor:pointer;
  text-decoration:none;transition:transform .3s,box-shadow .3s;margin-left:auto;box-shadow:0 6px 18px rgba(10,10,11,.22);white-space:nowrap}
.vsim-cta:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(10,10,11,.3)}
.vsim-cta span{transition:transform .25s}
.vsim-cta:hover span{transform:translateX(4px)}

/* --- Controles --- */
.vsim-bento{display:grid;grid-template-columns:1fr 1fr;gap:.75rem}
.vsim-c{background:var(--white);border-radius:16px;border:1px solid rgba(255,255,255,.85);
  box-shadow:var(--vs-clay-sm);padding:1.05rem 1.15rem;transition:box-shadow .3s,transform .3s}
.vsim-c:hover{box-shadow:var(--vs-clay);transform:translateY(-2px)}
.vsim-c-full{grid-column:span 2}
.vsim-c-hd{display:flex;justify-content:space-between;align-items:center;margin-bottom:.65rem;gap:.5rem}
.vsim-c-lbl{font-family:var(--body);font-size:.74rem;font-weight:600;color:var(--ob)}
.vsim-c-tag{font-family:var(--mono);font-size:.48rem;font-weight:500;letter-spacing:.11em;text-transform:uppercase;color:#55565A}
.vsim-seg{display:flex;background:var(--vs-beige);border:1.5px solid var(--vs-border);border-radius:11px;padding:3px}
.vsim-seg-opt{flex:1;padding:8px 10px;text-align:center;font-family:var(--sky);font-size:.72rem;font-weight:600;
  color:#55565A;border:none;background:none;border-radius:8px;cursor:pointer;transition:all .3s cubic-bezier(.22,1,.36,1)}
.vsim-seg-opt.on{background:var(--ob-soft);color:var(--bg);box-shadow:0 2px 10px rgba(10,10,11,.22)}
.vsim-age{display:flex;align-items:center;gap:.5rem}
.vsim-age-i{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:.88rem;font-weight:500;width:60px;text-align:center;
  background:var(--vs-beige);border:1.5px solid var(--vs-border2);border-radius:10px;padding:8px 4px;color:var(--ob);outline:none}
.vsim-age-i:focus-visible{border-color:var(--sage2-ink,#55565A);background:var(--white);outline:2px solid var(--sage2-ink,#55565A);outline-offset:1px}
.vsim-age-sep{font-family:var(--sky);font-size:.64rem;color:#55565A}
.vsim-age-u{font-family:var(--sky);font-size:.72rem;font-weight:600;color:#55565A}
.vsim-sl{display:flex;flex-direction:column;gap:.5rem}
.vsim-sl-h{display:flex;justify-content:space-between;align-items:center}
.vsim-sl-min{font-family:var(--mono);font-size:.56rem;font-weight:500;letter-spacing:.05em;color:#55565A}
.vsim-sl-v{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:.86rem;font-weight:500;letter-spacing:-.3px;color:var(--ob);
  background:var(--lime);border-radius:9px;padding:4px 11px;box-shadow:0 3px 10px rgba(173,232,60,.36)}
.vsim-track{position:relative;height:22px;display:flex;align-items:center}
/* Le rail natif et la poignee utilisent desormais le composant partage.
   Les anciens calques restent dans le DOM pour ne pas modifier le moteur vsim. */
.vsim-track-bg,.vsim-track-fill{display:none}
.vsim-track input[type=range]{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%)}
@media(pointer:coarse){.vsim-track{height:44px}}
.vsim-qts{display:flex;gap:.3rem;flex-wrap:wrap}
.vsim-qt{font-family:var(--sky);font-size:.62rem;font-weight:600;background:var(--vs-beige);
  border:1.5px solid var(--vs-border);border-radius:8px;padding:4px 10px;cursor:pointer;transition:all .22s;color:var(--ob2)}
.vsim-qt.on{background:var(--ob-soft);color:var(--bg);border-color:var(--ob-soft)}
.vsim-qt:not(.on):hover{border-color:var(--vs-sage);background:var(--white)}
.vsim-qt:focus-visible{outline:2px solid var(--sage2-ink,#55565A);outline-offset:2px}
.vsim-pills{display:flex;gap:.35rem;flex-wrap:wrap}
.vsim-pill{font-family:var(--sky);font-size:.7rem;font-weight:600;background:var(--vs-beige);
  border:1.5px solid var(--vs-border2);border-radius:10px;padding:8px 14px;cursor:pointer;
  transition:all .25s cubic-bezier(.22,1,.36,1);color:var(--ob2);flex:1;text-align:center;min-width:68px}
.vsim-pill.on{background:var(--sage2-ink,#55565A);color:#fff;border-color:var(--sage2-ink,#55565A);box-shadow:0 4px 12px rgba(10,10,11,.16)}
.vsim-pill:not(.on):hover{border-color:var(--vs-sage);background:var(--white);transform:translateY(-1px)}
.vsim-pill:focus-visible,.vsim-seg-opt:focus-visible{outline:2px solid var(--sage2-ink,#55565A);outline-offset:2px}

/* Cibles tactiles du simulateur (14/08/2026, book §06 : 44px minimum sur pointeur grossier).
   Mesures a 375px : pilules de duree 70x37px avec 6px d'ecart entre voisines, bascule
   Seul(e)/A deux 144x34px. Sur un outil qui affiche un montant d'emprunt, un tap voisin
   change la duree sans que l'utilisateur le remarque : c'est un faux resultat, pas une gene.
   Le rendu souris ne bouge pas, la regle ne vise que le doigt. */
@media(pointer:coarse){
  .vsim-pill{min-height:44px}
  .vsim-pills{gap:.6rem}
  .vsim-seg-opt{min-height:44px;display:flex;align-items:center;justify-content:center}
  /* Session 6 (17/08) : les raccourcis de montant mesuraient 26px de haut au doigt
     (releve mobile 375 sur l'accueil et /simulation-de-pret-immobilier/) — sous la
     cible de 44px du book §06, comme les pilules ci-dessus. */
  .vsim-qt{min-height:44px}
  .vsim-qts{gap:.5rem}
}
.vsim-disc{grid-column:span 2;font-size:.6rem;color:var(--vs-muted2,#55565A);line-height:1.55;padding:.8rem 1rem;
  background:var(--vs-cream);border-radius:12px;border:1px solid rgba(10,10,11,.09);display:flex;gap:.5rem;align-items:flex-start}
.vsim-disc strong{color:var(--ob)}

@media(max-width:900px){
  .vsim-hero{grid-template-columns:160px 1fr;gap:1.4rem;padding:1.5rem}
  .vsim-icon-in{width:150px;height:150px}.vsim [data-vs-img]{width:110px;height:110px}
}
@media(max-width:640px){
  .vsim-hero{grid-template-columns:1fr;gap:1.2rem;padding:1.4rem;text-align:center}
  .vsim-icon-in{width:170px;height:170px;margin:0 auto}
  .vsim-info-top{grid-template-columns:1fr;gap:1rem}
  .vsim-l,.vsim-meta{justify-content:center}
  .vsim-cta{margin-left:0;width:100%;justify-content:center}
  .vsim-bento{grid-template-columns:1fr}
  .vsim-c-full,.vsim-disc{grid-column:span 1}
}
@media(prefers-reduced-motion:reduce){
  .vsim-hero::before,.vsim [data-vs-img].is-swap,.vsim-n.glitch{animation:none!important}
}

/* ==================================================================
   SESSION 10 · P1 — portage de la Home du handoff du 21/08.
   Regle 0 bis : rien ici ne recree un composant existant. Les classes
   deja ecrites au kit sont CONSOMMEES par le gabarit (.stb pour la
   rangee de chiffres du heros, .aec-glass pour la carte simulateur,
   .rel-head / .link-arrow pour les en-tetes de section) ; on n'ecrit
   que ce qu'aucune feuille ne portait.
   ================================================================== */

/* --- HEROS : « ce que nous financons » (maquette §1) ---------------
   Une liste de PERIMETRE entre deux filets : elle ne chiffre rien et
   n'engage sur rien, elle dit seulement ce qu'on prend en dossier. */
.hm-finan{margin:1.6rem 0 1.4rem;padding:.95rem 0;
  border-top:1px solid rgba(10,10,11,.13);border-bottom:1px solid rgba(10,10,11,.13)}
.hm-finan-k{display:block;font-family:var(--mono);font-size:.66rem;text-transform:uppercase;
  letter-spacing:.1em;color:var(--muted);margin-bottom:.7rem}
.hm-finan-list{list-style:none;margin:0;padding:0;
  display:flex;flex-wrap:wrap;gap:.45rem 1.4rem}
.hm-finan-list li{position:relative;padding-left:.95rem;font-size:.92rem;color:var(--ob2)}
.hm-finan-list li::before{content:"";position:absolute;left:0;top:.52em;
  width:5px;height:5px;border-radius:50%;background:var(--lime)}

/* --- VIDEO : le film prend sa propre section (maquette §5) --------- */
.hm-vwrap{max-width:900px;margin:1.8rem auto 0}
.hm-vwrap .hm-tile{width:100%}

/* --- MEDAILLON D'INITIALES (pattern 29) ----------------------------
   Ce qui reste de la grille nominative du 24/08 : la pastille elle-meme.
   Elle survit a son gabarit parce qu'elle EST le pattern — la mosaique
   d'equipe (.hm-tm, plus bas) la consomme telle quelle a l'emplacement
   exact du portrait de la maquette. Les classes de mise en page de la
   grille remplacee (.hm-teamgroup, .hm-teamgrid, .hm-teamtile,
   .hm-team-nom/-role/-spec) sont retirees : plus aucun gabarit ne les
   posait apres le portage, et une regle sans markup se perime en silence. */
.hm-team-ini{display:flex;align-items:center;justify-content:center;
  width:46px;height:46px;border-radius:50%;margin-bottom:.5rem;
  background:var(--lime);color:var(--ob);
  font-family:var(--mono);font-size:.9rem;font-weight:500;letter-spacing:.02em}

@media(max-width:640px){
  .hm-team-ini{width:38px;height:38px;font-size:.8rem}
}

/* --- HEROS : la rangee de chiffres (.stb du kit, mise en service ici) ---
   .stb est un composant du kit (aeconomia.css) qui n'avait aucun gabarit :
   on le CONSOMME, on ne le duplique pas. Deux ajustements de contexte, et
   uniquement dans le heros, ou la colonne fait ~600 px pour quatre valeurs :
   - repeat(4,1fr) blow-out : une piste `1fr` vaut `minmax(auto,1fr)` et
     s'elargit si son contenu deborde. « 3 420 » en mono 2,2rem debordait,
     et les quatre colonnes sortaient inegales (155/219/134/134 px mesures).
     minmax(0,1fr) rend les pistes vraiment egales.
   - auto-fit + minmax(112px,·) reprend la cote de la maquette : les quatre
     chiffres passent a deux par rangee quand la colonne se resserre, au lieu
     d'ecraser la valeur. */
.hm-hero .stb{grid-template-columns:repeat(auto-fit,minmax(112px,1fr));gap:.7rem}
.hm-hero .stb .card{padding:.9rem .95rem}
.hm-hero .stb b{font-size:1.55rem;letter-spacing:-.02em}
.hm-hero .stb .k{font-size:.66rem;letter-spacing:.08em;margin-top:.35rem;line-height:1.45}

/* --- PROJET : la bande CTA, cible des liens de la page (maquette §19) ------
   Consomme .hm-ctaband / .hm-arrow, ecrites au kit et sans gabarit jusqu'ici
   (regle 0 bis). Pas de formulaire : voir le commentaire du gabarit. */
.hm-projet{grid-template-columns:1fr auto;gap:1.6rem;align-items:center;
  padding:clamp(1.6rem,3vw,2.4rem);border-radius:var(--r-card);
  background:var(--lime);color:var(--ob)}
.hm-projet-t{display:block;font-size:clamp(1.5rem,3vw,2.1rem);font-weight:600;
  letter-spacing:-.03em;margin:.5rem 0 .6rem;color:var(--ob)}
.hm-projet-p{max-width:52ch;color:var(--ob);opacity:.82;margin:0 0 .9rem}
.hm-projet-list{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.4rem 1.3rem}
.hm-projet-list li{position:relative;padding-left:1rem;font-size:.88rem;color:var(--ob)}
.hm-projet-list li::before{content:"";position:absolute;left:0;top:.55em;
  width:5px;height:5px;border-radius:50%;background:var(--ob)}
@media(max-width:640px){
  .hm-projet{grid-template-columns:1fr}
  .hm-projet .hm-arrow{justify-self:start}
}

/* --- DOSSIERS : trois cas clients reels, sans visage (maquette §11) --------
   .sec-dark ne porte PAS de fond (il n'ajuste que .hl et .link-arrow) : le
   fond encre se pose ici. Contrastes calcules, pas affirmes — voir le rapport
   de session : #fff sur #0A0A0B = 19,79:1, lime sur encre = 13,56:1. */
#dossiers{background:var(--ob);color:#fff;border-radius:var(--r-frame,26px);
  padding-top:clamp(2.6rem,5vw,4rem);padding-bottom:clamp(2.6rem,5vw,4rem)}
#dossiers .h2,#dossiers .lead{color:#fff}
#dossiers .lead{opacity:.78;max-width:70ch}
.hm-cases{display:grid;gap:1rem;margin-top:2rem;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.hm-case{display:flex;flex-direction:column;padding:1.4rem;border-radius:18px;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14)}
.hm-case-top{display:flex;justify-content:space-between;align-items:center;gap:.6rem;
  font-family:var(--mono);font-size:.64rem;text-transform:uppercase;letter-spacing:.09em}
.hm-case-tag{color:var(--lime)}
.hm-case-ville{color:rgba(255,255,255,.62)}
.hm-case-t{font-size:1.12rem;font-weight:600;letter-spacing:-.02em;margin:.7rem 0 .4rem;color:#fff}
.hm-case-p{font-size:.87rem;line-height:1.55;color:rgba(255,255,255,.72);margin:0 0 1rem}
.hm-case-rate{display:flex;flex-wrap:wrap;align-items:baseline;gap:.5rem;
  padding:.8rem 0;border-top:1px solid rgba(255,255,255,.14);
  border-bottom:1px solid rgba(255,255,255,.14);font-family:var(--mono);font-variant-numeric:tabular-nums}
.hm-case-k{flex:1 1 100%;font-size:.66rem;text-transform:uppercase;letter-spacing:.09em;
  color:rgba(255,255,255,.55);margin-bottom:.2rem}
.hm-case-from{font-size:.92rem;color:rgba(255,255,255,.6);text-decoration:line-through}
.hm-case-rate i{color:rgba(255,255,255,.5);font-style:normal}
.hm-case-to{font-size:1.28rem;color:var(--lime)}
.hm-case-delta{margin-left:auto;font-size:.66rem;text-transform:uppercase;letter-spacing:.08em;
  color:var(--lime)}
.hm-case-rows{margin:.9rem 0 1.1rem;display:grid;gap:.35rem}
.hm-case-rows > div{display:flex;justify-content:space-between;gap:1rem;font-size:.82rem}
.hm-case-rows dt{color:rgba(255,255,255,.6);margin:0}
.hm-case-rows dd{margin:0;color:#fff;text-align:right}
.hm-case-foot{margin-top:auto;padding-top:.9rem;border-top:1px solid rgba(255,255,255,.14)}
.hm-case-gain{display:block;font-family:var(--mono);font-variant-numeric:tabular-nums;
  font-size:1.7rem;font-weight:500;color:var(--lime);line-height:1.1}
.hm-case-sub{display:block;font-size:.76rem;color:rgba(255,255,255,.62);margin-top:.25rem}
.hm-case-date{display:block;font-size:.72rem;color:rgba(255,255,255,.62);margin-top:.5rem}
.hm-cases-legal{margin-top:1.6rem;font-size:.74rem;line-height:1.6;color:rgba(255,255,255,.62)}
.hm-cases-legal strong{color:#fff}

/* --- {a confirmer} PUBLIC, a ne pas confondre avec .tbc ---------------------
   .tbc est un marqueur de relecture INTERNE, et home.css le masque plus haut
   pour qu'il ne fuie jamais cote public. .tbc-inline est l'inverse : un fait
   que la page ASSUME devoir afficher tant qu'il n'est pas tranche, comme
   l'exige CLAUDE.md (« En attente -> {à confirmer} visible »). Il se voit,
   volontairement, et il bloque la mise en production du bloc qui le porte. */
.tbc-inline{font-style:italic;color:var(--lime);border-bottom:1px dashed currentColor}
.hm-case-from.is-txt{text-decoration:none;font-size:.8rem}

/* --- HONORAIRES : le « 0 € si le projet n'aboutit pas » ---------------------
   Arbitrage Bastien 24/08 : aussi visible que dans la maquette. Seule forme
   chiffree autorisee sur les honoraires — elle dit ce qu'on ne facture PAS. */
.hm-hono-zero{display:flex;align-items:baseline;gap:.6rem;margin:1.6rem 0 0;
  padding-top:1.2rem;border-top:1px solid rgba(10,10,11,.13)}
.hm-hono-zero b{font-family:var(--mono);font-variant-numeric:tabular-nums;
  font-size:clamp(2.4rem,5vw,3.4rem);font-weight:500;line-height:1;
  color:var(--ob);letter-spacing:-.03em}
.hm-hono-zero span{font-size:.95rem;color:var(--ob2)}
@media(max-width:520px){.hm-hono-zero{flex-direction:column;gap:.2rem}}

/* ---------- BANDEAU AVIS : la carte blanche posee sous le heros ------------
   Maquette Dimitri, section « Bandeau avis ». Ce n'est pas une section de la
   grille a 3 niveaux (.hm-lvl1/2/3) : elle n'a ni sur-titre ni titre, elle fait
   la couture entre le heros et #trust. D'ou une classe de section a elle, qui ne
   pose qu'une marge haute et laisse .wrap tenir la gouttiere.
   Couleurs : #6E6E73 est deja la teinte de service du kit (4,73:1 sur le fond
   #F7F7F5) ; posee ici sur du blanc pur elle monte a 5,07:1, AA calcule.
-------------------------------------------------------------------------- */
.hm-avisband-sec{margin-top:clamp(1.75rem,3.4vw,2.75rem)}
.hm-avisband{display:flex;flex-wrap:wrap;align-items:center;
  gap:clamp(1.12rem,2.4vw,2rem);
  background:var(--white);border:1px solid var(--line);border-radius:20px;
  padding:20px clamp(20px,2.4vw,28px);
  box-shadow:0 24px 48px -38px rgba(10,10,11,.55)}

/* La note : le seul gros chiffre de la carte, en mono, cale sur la ligne de base
   des etoiles (align-items:baseline, pas center — sinon le « 5,0 » flotte). */
.hm-avisband-note{flex:0 0 auto;display:flex;align-items:baseline;gap:10px;margin:0}
.hm-avisband-n{font-family:var(--mono);font-size:clamp(1.75rem,3vw,2.13rem);line-height:1;
  letter-spacing:-.055em;color:var(--ob);font-variant-numeric:tabular-nums}
.hm-avisband .stars{font-size:.88rem;letter-spacing:-1px;color:var(--ob)}

/* La phrase prend tout l'espace restant et casse en premier : c'est elle qui
   doit passer a la ligne, pas les deux chiffres ni le lien. */
.hm-avisband-txt{flex:1 1 290px;min-width:245px;margin:0;font-size:.94rem;line-height:1.5;
  color:var(--muted)}
.hm-avisband-txt strong{color:var(--ob);font-weight:600}

.hm-avisband-cnt{flex:0 0 auto;display:flex;align-items:baseline;gap:10px;margin:0;
  padding-left:clamp(0px,2vw,22px)}
.hm-avisband-cnt b{font-family:var(--mono);font-weight:500;font-size:1.37rem;letter-spacing:-.04em;
  color:var(--ob);font-variant-numeric:tabular-nums}
.hm-avisband-cnt span{font-size:.84rem;color:#6E6E73}

/* .rvlink = pattern 13 du kit (point lime, fleche mono, gap 9->13px au survol) :
   rien a redefinir, on ne fait que le pousser a droite. */
.hm-avisband .rvlink{flex:0 0 auto;margin-left:auto}

@media(max-width:760px){
  .hm-avisband{gap:.9rem;padding:18px;border-radius:16px}
  .hm-avisband-cnt{flex:1 1 100%;padding-left:0}
  .hm-avisband .rvlink{margin-left:0}
}

/* ---------- METHODE : la frise des quatre etapes (handoff du 21/08) --------
   Quatre colonnes sur un rail horizontal. Chaque colonne porte SON rail (2px),
   sa barre de remplissage lime et sa pastille de depart ; le rail « continu »
   de la maquette est l'alignement des quatre, pas un trait unique — c'est ce
   qui permet au bloc de passer de 4 a 2 a 1 colonne sans casser le dessin.

   L'ETAT DE REFERENCE EST L'ETAT ALLUME (.is-on), pose par le gabarit. Les
   regles de base ci-dessous decrivent l'etat ETEINT, qui n'existe QUE si
   home.js l'a demande. Consequence directe sur les contrastes : ce qui se lit
   au repos, sans JS et en reduced-motion, c'est l'allume — corps #55565A sur
   #F7F7F5 = 6,83:1, titre et numero en encre #0A0A0B = 18,9:1, pastille encre
   sur lime a 50 % (#D2F098) = 15,7:1, tous AA et AAA. L'eteint (gris clairs de
   la maquette, sous 3:1) est un etat d'animation transitoire, double d'un
   opacity .2 : il ne stationne jamais sous les yeux du lecteur, et il n'existe
   pas pour qui a coupe les animations.

   La tete de section reutilise .hm-lev-head (h2 flex 1 1 440px + chapeau
   flex 1 1 300px) : ce sont EXACTEMENT les cotes de la maquette ici comme
   dans les cinq leviers, un seul pattern pour les deux.
--------------------------------------------------------------------------- */
.hm-mtrack{display:flex;flex-wrap:wrap;gap:clamp(16px,2.4vw,30px);
  margin-top:clamp(34px,4vw,52px);padding:0;list-style:none}
.hm-mstep{flex:1 1 240px;min-width:230px;position:relative;padding-top:32px}
.hm-mstep-rail{display:block;position:absolute;top:0;left:0;right:0;height:2px;
  border-radius:2px;background:rgba(10,10,11,.1);overflow:hidden}
.hm-mstep-fill{display:block;height:100%;background:var(--lime);
  transform:scaleX(0);transform-origin:left center;transition:transform .8s var(--ease)}
.hm-mstep-dot{display:block;position:absolute;top:-4px;left:0;width:10px;height:10px;
  border-radius:50%;background:rgba(10,10,11,.14);border:2px solid var(--bg);
  transition:background .55s var(--ease),box-shadow .55s var(--ease)}
.hm-mstep-in{display:flex;flex-direction:column;gap:12px;
  opacity:.2;transform:translateY(18px);filter:blur(3px);
  transition:opacity .75s var(--ease),transform .75s var(--ease),filter .75s var(--ease)}
.hm-mstep-top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.hm-mstep-n{font-family:var(--mono);font-size:11px;font-variant-numeric:tabular-nums;
  color:#C4C4C8;transition:color .55s var(--ease)}
.hm-mstep-chip{font-family:var(--mono);font-size:10px;letter-spacing:.08em;
  text-transform:uppercase;white-space:nowrap;padding:5px 10px;border-radius:99px;
  background:rgba(10,10,11,.04);color:#B4B4B8;
  transition:background .55s var(--ease),color .55s var(--ease)}
/* Le {a confirmer} garde sa forme de marqueur — italique, souligne pointille —
   mais ni capitales ni interlettrage mono : il doit se lire comme un trou dans
   la donnee, pas comme une etiquette. Il abandonne aussi le lime de .tbc-inline
   pour la couleur de la pastille : du lime sur la pastille lime allumee
   (#ADE83C sur #D2F098) tombe a 1,4:1, illisible. En heritant, il vaut 15,7:1
   allume et suit l'etat eteint sans regle de plus. */
.hm-mstep-chip .tbc-inline{color:inherit;text-transform:none;letter-spacing:0}
.hm-mstep-t{margin:6px 0 0;font-size:clamp(1.18rem,1.9vw,1.31rem);font-weight:600;
  letter-spacing:-.03em;line-height:1.2;color:#9A9AA0;transition:color .55s var(--ease)}
.hm-mstep-b{margin:0;font-size:.95rem;line-height:1.55;color:var(--muted)}
.hm-mstep-b b{color:var(--ob);font-weight:600}
/* --- l'etat de reference : la frise allumee --- */
.hm-mstep.is-on .hm-mstep-fill{transform:scaleX(1)}
.hm-mstep.is-on .hm-mstep-dot{background:var(--lime);box-shadow:0 0 0 6px rgba(173,232,60,.22)}
.hm-mstep.is-on .hm-mstep-in{opacity:1;transform:none;filter:none}
.hm-mstep.is-on .hm-mstep-n,
.hm-mstep.is-on .hm-mstep-t{color:var(--ob)}
.hm-mstep.is-on .hm-mstep-chip{background:rgba(173,232,60,.5);color:var(--ob)}
/* Filet de securite : si le JS eteint la frise alors que l'utilisateur a coupe
   les animations (course entre le media query et le module), rien ne s'eteint. */
@media(prefers-reduced-motion:reduce){
  .hm-mstep .hm-mstep-fill{transform:scaleX(1)}
  .hm-mstep .hm-mstep-dot{background:var(--lime);box-shadow:0 0 0 6px rgba(173,232,60,.22)}
  .hm-mstep .hm-mstep-in{opacity:1;transform:none;filter:none}
  .hm-mstep .hm-mstep-n,.hm-mstep .hm-mstep-t{color:var(--ob)}
  .hm-mstep .hm-mstep-chip{background:rgba(173,232,60,.5);color:var(--ob)}
}
/* Sous 560px la frise devient une colonne : le rail horizontal n'a plus de sens
   a 230px de large, mais la pastille et la barre restent le reperage d'etape. */
@media(max-width:560px){
  .hm-mtrack{gap:26px}
  .hm-mstep{flex:1 1 100%;min-width:0;padding-top:26px}
}

/* --- LE SAV : les deux engagements chiffres (maquette #sav) ----------------
   Meme fond encre que #dossiers, et pour la meme raison : .sec-dark n'ajuste
   que .hl et .link-arrow, le fond se pose ici.
   Contrastes CALCULES sur #0A0A0B, jamais affirmes : #fff 19,79:1 ·
   lime #ADE83C 13,56:1 · blanc .72 = 10,3:1 · blanc .62 = 7,75:1 · blanc .5
   = 5,2:1. Rien sous 4,5:1, y compris les libelles mono de 10 px.
   Les deux cartes ne sont pas separees par une gouttiere mais par UN pixel
   clair : c'est le conteneur qui porte la couleur du filet, les cartes se
   posent dessus. D'ou gap:1px + overflow:hidden, et surtout pas une bordure
   sur chaque carte (qui doublerait le trait entre les deux).
-------------------------------------------------------------------------- */
#sav{position:relative;overflow:hidden;background:var(--ob);color:#fff;
  border-radius:var(--r-frame,26px);
  padding-top:clamp(2.6rem,5vw,4rem);padding-bottom:clamp(2.6rem,5vw,4rem)}
#sav .h2{color:#fff}
#sav .hm-desc{color:rgba(255,255,255,.72)}
/* Le halo lime de la maquette : purement decoratif, sous le contenu, jamais
   cliquable. width en min() : a 620px fixes il debordait a droite en tablette
   et rallongeait la page avant que overflow:hidden ne le rattrape. */
.hm-sav2-halo{position:absolute;top:-220px;right:6%;z-index:0;pointer-events:none;
  width:min(620px,90%);height:540px;
  background:radial-gradient(50% 50% at 50% 50%,rgba(173,232,60,.13),rgba(173,232,60,0) 70%)}
#sav .wrap{position:relative;z-index:1}

.hm-sav2-head{display:flex;flex-wrap:wrap;gap:clamp(.9rem,3vw,2.75rem);align-items:flex-end}
.hm-sav2-head .h2{flex:1 1 440px;margin:0}
.hm-sav2-head .hm-desc{flex:1 1 300px;min-width:16rem;margin:0;max-width:46ch}

.hm-sav2{display:flex;flex-wrap:wrap;gap:1px;margin-top:clamp(2rem,3.8vw,3rem);
  background:rgba(255,255,255,.14);border-radius:22px;overflow:hidden}
.hm-sav2-card{flex:1 1 380px;min-width:280px;background:var(--ob);
  padding:clamp(1.6rem,3vw,2.4rem);display:flex;flex-direction:column;gap:1rem;
  transition:background .3s var(--ease)}
.hm-sav2-card:hover{background:#141613}
.hm-sav2-top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.75rem}
.hm-sav2-k{display:block;font-family:var(--mono);font-size:.66rem;text-transform:uppercase;
  letter-spacing:.1em;color:rgba(255,255,255,.62)}
/* Le chiffre et sa mention ne se separent JAMAIS : meme boite, la mention
   directement sous le chiffre. A cote, elle passait seule a la ligne des que la
   carte descendait sous 380px et le pourcentage se retrouvait nu — c'est
   exactement ce que l'invariant interdit. */
.hm-sav2-num{display:flex;flex-direction:column;align-items:flex-end;text-align:right;
  margin-left:auto}
.hm-sav2-num b{font-family:var(--mono);font-weight:500;font-variant-numeric:tabular-nums;
  font-size:clamp(1.6rem,3vw,2.15rem);letter-spacing:-.05em;line-height:1;color:var(--lime)}
.hm-sav2-num em{font-style:normal;font-family:var(--mono);font-size:.66rem;
  text-transform:uppercase;letter-spacing:.09em;color:rgba(255,255,255,.62);margin-top:.35rem}
.hm-sav2-badge{display:inline-flex;align-items:center;gap:.5rem;background:var(--lime);
  color:var(--ob);font-family:var(--mono);font-size:.66rem;text-transform:uppercase;
  letter-spacing:.1em;padding:6px 12px;border-radius:99px;white-space:nowrap}
.hm-sav2-badge .aec-dot{width:5px;height:5px;background:var(--ob)}
.hm-sav2-t{margin:0;color:#fff;font-size:clamp(1.35rem,2.3vw,1.8rem);font-weight:600;
  letter-spacing:-.03em;line-height:1.15}
.hm-sav2-t sup{font-size:.55em;line-height:0}
.hm-sav2-p{margin:0;font-size:.97rem;line-height:1.55;color:rgba(255,255,255,.72)}
.hm-sav2-p strong{color:#fff;font-weight:600}
.hm-sav2-foot{margin-top:auto;padding-top:1.1rem;border-top:1px solid rgba(255,255,255,.14)}
.hm-sav2-ex{margin:0;font-size:.87rem;line-height:1.55;color:rgba(255,255,255,.72)}
.hm-sav2-ex strong{color:#fff;font-weight:600}
/* L'etiquette d'hypothese ne se lit jamais comme le chiffre : mono, minuscule,
   sous lui. Meme contrat de lecture que .simu-hyp et .hm-levier-hyp — un
   chiffre d'hypothese s'habille pareil partout sur le site, sinon le lecteur
   n'apprend pas a le reconnaitre. */
.hm-sav2-hyp{margin:.7rem 0 0;font-family:var(--mono);font-size:12px;line-height:1.6;
  letter-spacing:.04em;color:rgba(255,255,255,.62)}
.hm-sav2-legend{margin:clamp(1.4rem,3vw,2rem) 0 0;max-width:78ch;font-size:.87rem;
  line-height:1.6;color:rgba(255,255,255,.62)}
@media(max-width:620px){
  /* Sous 620px la carte n'a plus la largeur pour poser le chiffre a droite du
     libelle : les deux passent l'un sous l'autre, alignes a gauche. */
  .hm-sav2-top{align-items:flex-start}
  .hm-sav2-num{align-items:flex-start;text-align:left;margin-left:0}
}

/* ==================================================================
   #equipe — LA MOSAIQUE DENSE A ONGLETS (handoff du 21/08, §16).
   ------------------------------------------------------------------
   PATTERN 37, applique a la lettre : l'etat de reference du markup est
   l'etat ALLUME. Le gabarit rend TOUS les panneaux et TOUTES les fiches
   depliees, en cartes d'au moins 280px — c'est ce que voient une panne
   de JS, un robot, un navigateur sans IntersectionObserver. Le JS pose
   `.is-dense` sur `.hm-tm` et c'est LUI qui eteint : six colonnes, une
   seule fiche ouverte, un seul panneau visible.
   Le seul element ecrit ETEINT est la barre d'onglets, parce que c'est
   un CONTROLE : sans JS elle ne commanderait rien. Un bouton mort est
   pire qu'un bouton absent — le contenu, lui, reste entier.

   COULEURS : aucun couple nouveau. Encre #0A0A0B sur blanc = 19,79:1 et
   gris #55565A sur blanc = 7,33:1, tous deux calcules au pattern 34. Sur
   le fond de face (blanc + voile lime a 10 %, soit ~#F7FCEF) : encre
   = 18,6:1, gris #55565A = 6,9:1. Le lime n'est JAMAIS du texte.
   COTES : les micro-labels mono sont a 12px et non aux 9,5px de la
   maquette — le book §13 interdit tout texte sous 12px et le pattern 34
   a deja tranche qu'on n'ecrit pas un composant neuf sous le plancher.
   ================================================================== */
.hm-tm{margin-top:2.2rem}

/* --- La barre d'onglets ------------------------------------------- */
.hm-tm-tabs{display:inline-flex;flex-wrap:wrap;gap:2px;padding:5px;max-width:100%;
  margin-bottom:1.2rem;border:1px solid rgba(10,10,11,.05);border-radius:var(--pill);
  background:rgba(10,10,11,.065)}
.hm-tm-tabs[hidden]{display:none}
.hm-tm-tab{display:inline-flex;align-items:center;gap:9px;flex:none;
  border:0;border-radius:var(--pill);padding:12px 20px;cursor:pointer;
  background:transparent;color:var(--ob2);white-space:nowrap;
  font-family:var(--sky);font-size:14px;font-weight:600;
  transition:background .35s var(--ease),color .35s var(--ease),box-shadow .35s var(--ease)}
.hm-tm-tab:hover{color:var(--ob)}
.hm-tm-tab[aria-selected="true"]{background:#fff;color:var(--ob);
  box-shadow:0 3px 10px rgba(10,10,11,.14),0 1px 2px rgba(10,10,11,.08)}
.hm-tm-dot{display:block;flex:none;width:7px;height:7px;border-radius:50%;
  background:rgba(10,10,11,.22);
  transition:background .3s var(--ease),box-shadow .3s var(--ease)}
.hm-tm-tab[aria-selected="true"] .hm-tm-dot{background:var(--lime);
  box-shadow:0 0 0 3px rgba(173,232,60,.25)}

/* --- Le panneau et sa ligne de secteur ---------------------------- */
.hm-tm-panel[hidden]{display:none}
.hm-tm-panel + .hm-tm-panel{margin-top:2.4rem}
.hm-tm.is-dense .hm-tm-panel + .hm-tm-panel{margin-top:0}
.hm-tm-line{display:flex;flex-wrap:wrap;align-items:baseline;gap:.3rem .8rem;
  margin:0 0 1rem;font-size:.95rem;line-height:1.5;color:var(--ob2)}
.hm-tm-line b{font-weight:600;color:var(--ob)}
.hm-tm-line-k{font-style:normal;font-family:var(--mono);font-size:12px;
  text-transform:uppercase;letter-spacing:.09em;color:var(--muted)}

/* --- La grille ---------------------------------------------------- */
.hm-tm-grid{list-style:none;margin:0;padding:0;display:grid;gap:12px;
  grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
.hm-tm.is-dense .hm-tm-grid{grid-template-columns:repeat(6,minmax(0,1fr));
  grid-auto-flow:row dense}

/* --- La tuile -----------------------------------------------------
   HAUTEUR : la maquette fixe 274px, la cote d'une tuile PHOTO — une photo
   remplit sa boite, un medaillon non, et le champ `citation` est vide tant
   que Dimitri ne l'a pas valide. La cote suit donc le contenu REELLEMENT
   rendu (meta + nom + pied), mesure au rendu. Elle remonte le jour ou les
   citations arrivent : trois lignes clampees a 17px, c'est +70px. */
.hm-tm-tile{display:flex;flex-direction:column;overflow:hidden;
  border:1px solid rgba(10,10,11,.1);border-radius:18px;background:#fff;
  box-shadow:0 1px 2px rgba(10,10,11,.08);transition:box-shadow .35s var(--ease)}
.hm-tm.is-dense .hm-tm-tile{flex-direction:row;grid-column:span 1;height:210px}
.hm-tm.is-dense .hm-tm-tile.is-open{grid-column:span 3;
  box-shadow:0 24px 52px -24px rgba(10,10,11,.42)}

/* --- La face : l'emplacement du portrait de la maquette ------------
   Elle recoit le medaillon d'initiales tant que ae_portraits_publiables()
   rend false, et l'<img> le jour ou elle rendra true — meme boite, meme
   geometrie, aucune retouche de gabarit a prevoir (pattern 33). */
.hm-tm-face{position:relative;display:flex;flex-direction:column;
  align-items:flex-start;justify-content:space-between;gap:1rem;
  padding:1.15rem 1.2rem;min-width:0;
  background:linear-gradient(150deg,rgba(173,232,60,.10),rgba(10,10,11,.04))}
.hm-tm.is-dense .hm-tm-face{flex:1 1 auto;min-height:0;cursor:pointer}
.hm-tm.is-dense .hm-tm-tile.is-open .hm-tm-face{flex:0 0 calc((100% - 24px)/3)}
.hm-tm-face:focus-visible{outline:2px solid var(--ob);outline-offset:-4px}
.hm-tm-face .hm-team-ini{width:56px;height:56px;margin:auto 0;font-size:1.05rem}
.hm-tm-photo{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:50% 13%}
/* Le numero est un RANG dans la mosaique, jamais un effectif : pas de
   denominateur. Coin droit — pattern 19 corrige, il ne dispute pas au
   medaillon le coin gauche. */
.hm-tm-idx{position:absolute;top:12px;right:14px;z-index:1;font-style:normal;
  font-family:var(--mono);font-size:12px;letter-spacing:.1em;color:var(--muted);
  transition:color .3s var(--ease)}
.hm-tm-tile.is-open .hm-tm-idx,.hm-tm-face:hover .hm-tm-idx{color:var(--ob)}
.hm-tm-strip{position:relative;z-index:1;display:flex;flex-direction:column;gap:2px;
  min-width:0;max-width:100%}
.hm-tm-strip b{font-size:15px;font-weight:600;letter-spacing:-.02em;line-height:1.15;
  color:var(--ob)}
.hm-tm-strip span{font-size:12.5px;line-height:1.25;color:var(--ob2);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.hm-tm.is-dense .hm-tm-tile.is-open .hm-tm-strip{display:none}

/* --- La fiche depliee --------------------------------------------- */
.hm-tm-open{position:relative;flex:1 1 auto;min-width:0;display:flex;
  flex-direction:column;justify-content:space-between;gap:14px;
  padding:20px 24px 18px;background:#fff}
.hm-tm.is-dense .hm-tm-tile:not(.is-open) .hm-tm-open{display:none}
/* Le filet lime se PEINT avec aecMarkIn, la keyframe du kit prevue pour ca
   (surligneur qui se remplit de 0 a 100 %). Aucun @keyframes n'est ecrit
   ici : les gabarits et leurs feuilles consomment le contrat d'animation
   d'aeconomia.css, ils ne l'etendent pas. Etat de reference : 100 %. */
.hm-tm-rule{position:absolute;left:0;right:0;top:0;height:2px;
  background:linear-gradient(var(--lime),var(--lime)) 0 0/100% 100% no-repeat}
.hm-tm-head{display:flex;flex-direction:column;gap:5px;min-width:0}
.hm-tm-meta{display:flex;align-items:center;gap:10px;min-width:0;
  font-family:var(--mono);font-size:12px;line-height:1.4;letter-spacing:.09em;
  color:var(--muted)}
.hm-tm-meta > span{flex:0 1 auto;min-width:0}
.hm-tm-meta-rule{flex:1 1 8px;min-width:8px;height:1px;display:block;
  background:rgba(10,10,11,.14)}
.hm-tm-nom{display:block;font-size:22px;font-weight:600;letter-spacing:-.034em;
  line-height:1.08;color:var(--ob)}
/* Reste vide tant que Dimitri n'a pas valide les citations : la regle
   attend son markup, le gabarit ne rend rien si le champ est vide. */
.hm-tm-quote{margin:0;font-size:17px;line-height:1.35;letter-spacing:-.022em;
  color:var(--ob);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;
  overflow:hidden}
.hm-tm-foot{display:flex;align-items:flex-end;justify-content:space-between;
  flex-wrap:wrap;gap:12px 14px;padding-top:13px;
  border-top:1px solid rgba(10,10,11,.12)}
.hm-tm-foot .btn{flex:0 0 auto;margin-left:auto}
.hm-tm-sect{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:4px}
.hm-tm-sect-k{font-family:var(--mono);font-size:12px;text-transform:uppercase;
  letter-spacing:.12em;color:var(--muted)}
.hm-tm-sect-v{font-size:12.5px;line-height:1.3;color:var(--ob2)}

/* --- La carte qui ferme la rangee : des FAITS, pas une facade -------
   La maquette y met une photo d'agence ; les facades du depot sont, elles
   aussi, generees. Elle rend donc l'adresse et les horaires servis par
   ae_agences(), source unique deja consommee ailleurs sur la page. */
.hm-tm-fill{display:flex;flex-direction:column;justify-content:flex-end;gap:.28rem;
  padding:1.15rem 1.2rem;border:1px solid rgba(10,10,11,.1);border-radius:18px;
  background:linear-gradient(150deg,rgba(173,232,60,.10),rgba(10,10,11,.04))}
.hm-tm-fill[hidden]{display:none}
.hm-tm.is-dense .hm-tm-fill{height:210px}
.hm-tm-fill-k{font-family:var(--mono);font-size:12px;text-transform:uppercase;
  letter-spacing:.1em;color:var(--muted)}
.hm-tm-fill-v{font-size:15px;font-weight:600;letter-spacing:-.02em;color:var(--ob)}
.hm-tm-fill-adr{font-size:12.5px;line-height:1.35;color:var(--ob2)}
.hm-tm-fill-h{margin-top:.35rem;font-family:var(--mono);font-size:12px;
  text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}

/* --- Le depliement : keyframes du kit, jamais de nouvelles ---------
   Passer de display:none a display:flex rejoue l'animation : c'est ce qui
   fait qu'un changement de fiche se voit, sans une ligne de JS d'animation. */
.hm-tm.is-dense .hm-tm-tile.is-open .hm-tm-rule{animation:aecMarkIn .55s var(--ease) both}
.hm-tm.is-dense .hm-tm-tile.is-open .hm-tm-open > *:not(.hm-tm-rule){
  animation:aecIn .5s var(--ease) both}
.hm-tm.is-dense .hm-tm-tile.is-open .hm-tm-open > *:nth-child(3){animation-delay:.07s}
.hm-tm.is-dense .hm-tm-tile.is-open .hm-tm-open > *:nth-child(4){animation-delay:.14s}

@media(max-width:1080px){
  .hm-tm.is-dense .hm-tm-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media(max-width:760px){
  .hm-tm.is-dense .hm-tm-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  /* Les cotes de la maquette (236px ferme, 186px de face, 470px ouvert) sont
     celles d'une tuile PHOTO : une photo remplit sa boite, un medaillon non.
     Recalees sur ce que le contenu occupe reellement — mesure au rendu a
     375px, ou 236px laissaient 120px de vide sous chaque pastille. */
  .hm-tm.is-dense .hm-tm-tile{height:168px}
  .hm-tm.is-dense .hm-tm-tile.is-open{grid-column:span 2;flex-direction:column;height:320px}
  .hm-tm.is-dense .hm-tm-tile.is-open .hm-tm-face{flex:0 0 118px}
  .hm-tm.is-dense .hm-tm-fill{height:168px}
  .hm-tm-face{padding:.95rem 1rem}
  .hm-tm-face .hm-team-ini{width:48px;height:48px;font-size:.95rem}
  /* La barre d'onglets passe sur deux rangees : un rayon de pilule sur un bloc
     a deux lignes se lit comme un accident, un rectangle arrondi non. */
  .hm-tm-tabs{border-radius:22px}
  .hm-tm-tab{padding:11px 15px;font-size:13.5px}
  .hm-tm-open{padding:16px 18px 15px}
  .hm-tm-nom{font-size:20px}
  .hm-tm-quote{font-size:15.5px}
}

@media(prefers-reduced-motion:reduce){
  .hm-tm-tile,.hm-tm-tab,.hm-tm-dot,.hm-tm-idx{transition:none}
  .hm-tm.is-dense .hm-tm-tile.is-open .hm-tm-rule,
  .hm-tm.is-dense .hm-tm-tile.is-open .hm-tm-open > *{animation:none}
}

/* ---------- RESULTATS ET AVIS : la section sur encre (handoff du 21/08) -----
   Quatrieme et DERNIERE section sur encre de l'accueil, avec #dossiers, #bilan
   et #sav : le book §12 en autorise quatre au maximum, on est au plafond.
   Meme recette exactement que #dossiers et #sav — .sec-dark n'ajuste que .hl et
   .link-arrow, le fond se pose ici — pour que les blocs encre de la page soient
   un seul objet visuel et non trois recettes voisines.

   Contrastes CALCULES (formule WCAG, composition alpha faite en sRGB avant
   linearisation), jamais affirmes.
   Sur le fond de section #0A0A0B : #fff 19,79:1 · lime #ADE83C 13,56:1 ·
   blanc .92 16,66:1 · blanc .72 10,25:1 · blanc .62 7,75:1.
   Sur le fond des cartes du rail (blanc .045 compose sur encre, soit #151515) :
   blanc .92 15,80:1 · blanc .62 7,66:1. Rien sous 4,5:1, y compris la legende
   de 13 px et les labels de 14 px.
-------------------------------------------------------------------------- */
#reviews{position:relative;overflow:hidden;background:var(--ob);color:#fff;
  border-radius:var(--r-frame,26px);
  padding-top:clamp(2.6rem,5vw,4rem);padding-bottom:clamp(2.6rem,5vw,4rem)}
#reviews .h2{color:#fff;max-width:800px}

/* Le halo lime de la maquette : decoratif, sous le contenu, jamais cliquable.
   width en min() pour la meme raison que #sav — a 640px fixes il debordait en
   tablette et rallongeait la page avant qu'overflow:hidden ne le rattrape. */
.hm-res-halo{position:absolute;bottom:-240px;right:5%;z-index:0;pointer-events:none;
  width:min(640px,90%);height:560px;
  background:radial-gradient(50% 50% at 50% 50%,rgba(173,232,60,.1),rgba(173,232,60,0) 70%)}
#reviews .wrap{position:relative;z-index:1}

/* Second segment du titre en blanc adouci, et PAS le surligneur lime .hl de
   #dossiers / #sav : la section porte deja du lime sur la valeur mise en avant,
   sur les etoiles et sur la pastille du lien. Un quatrieme objet lime dans le
   titre aplatirait la hierarchie. Ecart assume vis-a-vis du pattern de titre en
   deux tons, conforme a la maquette. */
.hm-res-soft{color:rgba(255,255,255,.62)}

/* --- Les chiffres : une rangee a filets, pas de cartes (pattern 36
       applique aux nombres). Le filet du haut est le seul trait ; la valeur en
       mono tabulaire et le label en dessous. --- */
.hm-res-stats{display:flex;flex-wrap:wrap;gap:clamp(1.2rem,2.6vw,1.9rem);
  margin-top:clamp(2.2rem,4.2vw,3.25rem)}
.hm-res-stat{flex:1 1 210px;min-width:170px;
  border-top:1px solid rgba(255,255,255,.2);padding-top:1.4rem}
.hm-res-stat b{display:block;font-family:var(--mono);font-weight:500;
  font-variant-numeric:tabular-nums;font-size:clamp(2rem,4.6vw,3.88rem);
  line-height:1;letter-spacing:-.06em;color:#fff}
.hm-res-stat span{display:block;margin-top:.75rem;font-size:.88rem;line-height:1.4;
  color:rgba(255,255,255,.62)}

/* --- La ligne d'avis : note + compteur + detail fiche par fiche. C'est la
       phrase qui casse en premier, jamais la note. --- */
.hm-res-note{display:flex;flex-wrap:wrap;align-items:center;gap:1.25rem;
  margin-top:clamp(2.75rem,5vw,4.1rem);padding-top:1.75rem;
  border-top:1px solid var(--ob-soft-line)}
.hm-res-score{flex:0 0 auto;display:flex;align-items:baseline;gap:.8rem;margin:0}
.hm-res-n{font-family:var(--mono);font-weight:500;font-variant-numeric:tabular-nums;
  font-size:clamp(2rem,3.4vw,2.75rem);line-height:1;letter-spacing:-.055em;color:#fff}
.hm-res .stars{color:var(--lime);letter-spacing:-1px;font-size:.94rem}
.hm-res-txt{flex:1 1 320px;min-width:260px;margin:0;font-size:.94rem;line-height:1.55;
  color:rgba(255,255,255,.72)}
.hm-res-txt strong{color:#fff;font-weight:600}

/* --- Le rail d'avis : MEME composant, repeint. Aucune regle de .rvx n'est
       modifiee — le carrousel est partage avec home.js (clonage, pause,
       mesure) et on ne touche qu'a sa couleur, sous le scope .hm-res. --- */
.hm-res .rvx-track > .review-card{
  background:rgba(255,255,255,.045);
  border:1px solid var(--ob-soft-line);
  box-shadow:none}
.hm-res .rvx-track > .review-card p{color:rgba(255,255,255,.92)}
/* Le filet au-dessus de la signature vient de la maquette : il separe le
   verbatim de son auteur, et il tient les cartes a hauteur egale. */
.hm-res .review-author{margin-top:auto;padding-top:.85rem;
  border-top:1px solid rgba(255,255,255,.12)}
.hm-res .review-author b{color:#fff}
.hm-res .rvx-track .review-author span{color:rgba(255,255,255,.62)}

/* Le bouton pause : meme dessin, valeurs inversees. L'icone est un clip-path
   peint par background-color, donc elle doit passer au blanc elle aussi. */
.hm-res .rvx-toggle{color:#fff;background:rgba(255,255,255,.1);
  border-color:rgba(255,255,255,.24)}
.hm-res .rvx-toggle:hover{background:rgba(255,255,255,.18);
  border-color:rgba(255,255,255,.4)}
.hm-res .rvx-toggle:focus-visible{outline-color:#fff}
.hm-res .rvx-ico{background:#fff}
/* L'anneau de focus du rail est pose sur le wrapper (il serait mange par le
   mask-image du viewport) : sur encre, var(--ob) serait invisible. */
.hm-res .rvx.is-focus{outline-color:#fff}

.hm-res .hm-rev-hint{color:rgba(255,255,255,.62)}
/* La legende reprend l'alignement a gauche de la section (l'ancienne version
   etait centree, avec .hm-center sur le .wrap ; la maquette est cadree a
   gauche de bout en bout). */
.hm-res .hm-rev-cap{text-align:left;color:rgba(255,255,255,.62);max-width:78ch}
.hm-res .hm-rev-cap .link-arrow{font-size:inherit}

@media(min-width:1025px){
  /* Le rail reprend la largeur entiere du .wrap et deborde jusqu'au bord de la
     section, comme la maquette. La regle partagee le cadrait a 1040px centres,
     ce qui, sous un bloc aligne a gauche, se lisait comme un decalage. */
  .hm-res .rvx-viewport{max-width:none;
    margin-inline:calc(var(--pad) * -1);padding-inline:var(--pad)}
}
@media(max-width:560px){
  /* Sous 560px, deux colonnes de chiffres tombent a 155px : « 16 000 € » en
     mono n'y tient plus. Une colonne préserve la lisibilité. */
  .hm-res-stat{flex:1 1 100%}
  .hm-res-note{gap:.9rem}
}