/* Home v3 (2026-08-10) — maquette validee hermes-home-v3.html, portee telle
   quelle (structure/ordre/textes/palette/tailles non reinterpretes). Polices
   auto-hebergees via public/css/landing-fonts.css (Fraunces 700/800, Work
   Sans 400/500/600, IBM Plex Mono 500 — deja en place, voir commentaire de
   ce fichier). Palette propre a cette page (noir/pin/vert), distincte de
   home.css (ancienne home, abysse/signal) et de landing.css (ivoire/pin,
   pages de campagne) : conservee identique a la maquette. */
:root{
  --noir:#081712; --pin:#0E241B; --pin2:#143324; --ligne:rgba(240,244,238,.10);
  /* Contraste (2026-08-11, audit externe) : .62/.45 mesuraient respectivement
     ~6,9:1 et ~4,2:1 sur les fonds de page réels (#081712 à rgba(7,18,8,.5))
     -- le second échouait le seuil AA texte normal (4,5:1), alors qu'il sert
     de couleur de base a des textes porteurs de sens (labels de montages,
     lignes "Avec ChatGPT :", mentions sous CTA, pied de page). Remontés a
     .75/.58 -- calculé (relative luminance WCAG) : ~8,9-9,9:1 et ~5,8-6,3:1
     sur tous les fonds utilisés sur la page, marge confortable au-dessus du
     seuil. Les éléments purement décoratifs (séparateurs, filigranes de
     numéros) gardent leur propre opacité faible, non affectée par ces deux
     variables. */
  --blanc:#F2F5F0; --gris:rgba(242,245,240,.75); --gris2:rgba(242,245,240,.58);
  --vert:#2FE08A; --vert8:rgba(47,224,138,.10); --lueur:rgba(47,224,138,.30);
}
.hv3{background:var(--noir);color:var(--blanc)}
.hv3 *{box-sizing:border-box}
.hv3{font-family:'Work Sans',sans-serif;font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased}
.hv3 .wrap{max-width:1180px;margin:0 auto;padding:0 24px}
.hv3 h1,.hv3 h2,.hv3 h3{font-family:'Fraunces',serif;letter-spacing:-.03em;line-height:1.0;font-weight:700;text-wrap:balance}
.hv3 .em{white-space:normal;color:var(--vert)}
.hv3 .pill{display:inline-block;white-space:nowrap;font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--gris);border:1px solid var(--ligne);border-radius:99px;padding:8px 16px;margin-bottom:24px;background:var(--pin)}
.hv3 .eyebrow{font-family:'IBM Plex Mono',monospace;font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--gris);display:block;margin-bottom:14px}
.hv3 .btn{display:inline-flex;align-items:center;justify-content:center;height:48px;background:var(--vert);color:var(--noir);font-weight:600;font-size:14.5px;padding:0 28px;border-radius:99px;text-decoration:none;transition:transform .2s ease,filter .2s ease}
.hv3 .btn:hover{transform:translateY(-2px);filter:brightness(1.08)}
.hv3 .btn.ghost{background:transparent;color:var(--blanc);border:1px solid var(--ligne)}
.hv3 .btn.ghost:hover{background:var(--pin2);filter:none}
.hv3 .risk{font-size:13px;color:var(--gris2);margin-top:14px}
.hv3 section{padding:clamp(64px,8vw,104px) 0;position:relative}
.hv3 .reveal{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s ease}
.hv3 .reveal.on{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .hv3 .reveal{opacity:1;transform:none;transition:none}
  .hv3 .marquee-track{animation:none!important}
  .hv3 .glow,.hv3 .halo{animation:none!important}
}

/* HERO */
/* Hero video (2026-08-10) -- fond pleine largeur, texte pose par-dessus.
   min-height empeche un hero trop bas sur les ecrans larges/courts (le
   ratio natif de la video, 1284x716, ne suffirait pas seul a definir une
   hauteur agreable pour le texte). */
/* Rééquilibré (2026-08-11, 2 passes) : le padding symétrique de la première
   passe (48-80px partout) supprimait bien le vide en bas, mais laissait la
   pastille coller à la barre de navigation -- mesuré en conditions réelles.
   Asymétrie modérée réintroduite (haut > bas, ~12-20px d'écart selon la
   largeur -- bien moins que les 28px+ du tout premier réglage qui avait
   créé le vide initial) : la pastille respire sans recréer de trou en bas. */
.hv3 .hero{padding:clamp(64px,8vw,100px) 0 clamp(56px,7vw,88px);overflow:hidden;min-height:480px;display:flex;align-items:center}
.hv3 .hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:65% center;
  z-index:0;opacity:0;transition:opacity 1s ease}
.hv3 .hero-video.loaded{opacity:1}
.hv3 .hero-poster-img{display:none;position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:65% center;z-index:0}
/* Verifie reellement a 1366/1536/1920/2560px (2026-08-10, video "portable +
   hologrammes") : la composition tient a center jusqu'a 1920px, mais le
   panneau hologramme du haut (coche) touche le bord superieur a 2560px --
   la mise a l'echelle "cover" recadre davantage en hauteur a mesure que le
   ratio de la section s'elargit. Biais vertical seulement au-dela de ce
   seuil, pour ne pas decaler une composition deja correcte en dessous. */
@media (min-width:2200px){
  .hv3 .hero-video,.hv3 .hero-poster-img{object-position:65% 38%}
}
/* Bascule video/poster en CSS pur -- mesure reelle (Lighthouse mobile
   throttle) : la faire dependre d'une classe ajoutee en JS laissait le LCP
   (cet <img>) attendre l'execution du script, variable sous throttling CPU
   -- 4,4s mesures contre 1,2s sur une page de controle sans cette
   dependance. Une media query s'applique au premier style de la page,
   avant tout JS, quel que soit le delai d'execution du script. Le JS ne
   pilote plus que .play()/l'injection des <source> (chemin desktop), plus
   jamais la visibilite du repli. */
@media (max-width:768px), (prefers-reduced-motion:reduce) {
  .hv3 .hero-video{display:none}
  .hv3 .hero-poster-img{display:block}
}
/* Assure la lisibilite du texte quel que soit le contenu exact affiche a
   cet instant de la boucle video -- degrade vers la gauche (sous le texte)
   et laisse le sujet (tiers droit) visible. */
.hv3 .hero-scrim{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(90deg,rgba(8,23,18,.82) 0%,rgba(8,23,18,.55) 42%,rgba(8,23,18,.12) 68%,transparent 85%)}
.hv3 .hero-fade-bottom{position:absolute;left:0;right:0;bottom:0;height:220px;z-index:1;pointer-events:none;
  background:linear-gradient(to bottom,transparent,var(--noir))}
.hv3 .hero .wrap{position:relative;z-index:2;width:100%}
/* Animation CSS pure (2026-08-10), pas de classe JS -- mesure reelle
   (Lighthouse mobile throttle) : en attendant l'ajout d'une classe .on par
   script, le H1 (le plus grand bloc de texte de la page) restait a
   opacity:0 jusqu'a l'execution du JS, qui peut significativement varier
   sous throttling CPU (x4 en mobile) -- LCP mesure a 4,4s contre 1,2s sur
   une page de controle. L'animation demarre seule au chargement, plus
   fiable qu'une dependance a l'ordre/latence d'execution du script. */
.hv3 .hero-copy{max-width:640px;animation:hv3HeroReveal .8s ease .35s both}
@keyframes hv3HeroReveal{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.hv3 .hero-copy{animation:none}}
.hv3 .hero h1{font-size:clamp(40px,5.4vw,74px);max-width:13ch;font-weight:800}
.hv3 .hero .lead{font-size:clamp(17px,1.9vw,21px);color:var(--blanc);max-width:30ch;margin:22px 0 0;
  font-weight:500;line-height:1.25;letter-spacing:-.02em}
.hv3 .hero .sub{font-size:15px;color:var(--gris);max-width:43ch;margin:16px 0 28px;line-height:1.7}
.hv3 .hero .ctas{display:flex;gap:12px;flex-wrap:wrap}
.hv3 .hero .risk{text-align:left}

@media (max-width:900px){
  /* Voile mobile renforcé (2026-08-11, audit terrain) : verifié au pixel sur
     le poster réel -- le degradé G→D pensé pour un texte cale à gauche
     laisse passer, a droite du texte (desormais centre plein largeur des
     900px), un halo lumineux du visuel (rgb 183,255,239 mesure sous le H1)
     -- contraste 1,03:1 contre le texte blanc a cet endroit precis, contre
     ~7,5:1 en moyenne sur la ligne (la moyenne masquait le point chaud).
     Voile quasi uniforme sur mobile plutot que directionnel : calcule pour
     ramener meme le pixel le plus clair du poster sous ~11:1. */
  .hv3 .hero-scrim{background:linear-gradient(180deg,
    rgba(8,23,18,.62) 0%,
    rgba(8,23,18,.85) 20%,
    rgba(8,23,18,.88) 82%,
    rgba(8,23,18,.72) 100%)}
  .hv3 .hero-copy{margin:0 auto;max-width:100%}
  .hv3 .hero h1,.hv3 .hero .lead,.hv3 .hero .sub{margin-left:auto;margin-right:auto;text-align:center;max-width:100%}
  /* nowrap convient en desktop (une ligne large) mais force un debordement
     horizontal en mobile etroit -- constate en test reel a 375px. On
     autorise le retour a la ligne plutot que de couper le texte. */
  .hv3 .hero .pill{display:inline-block;width:auto;max-width:100%;white-space:normal;text-align:center;margin-left:auto;margin-right:auto}
  .hv3 .hero .ctas{justify-content:center}
  .hv3 .hero .risk{text-align:center}
  /* Video plus courte en mobile : le crop lateral disparait (cf. object-
     fit:cover en conteneur etroit), pas besoin de la meme hauteur qu'en
     desktop pour que le sujet reste lisible. */
  .hv3 .hero{min-height:0}
}

/* BANDEAU CONFIANCE */
.hv3 .trust{padding:0}
.hv3 .trust-box{border:1px solid var(--ligne);border-radius:28px;background:rgba(9,24,11,.7);
  padding:22px 26px;display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center}
.hv3 .trust-line{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px;
  font-size:14.5px;color:var(--gris)}
.hv3 .trust-line a{color:var(--blanc);text-decoration:none;border-bottom:1px solid var(--ligne);font-weight:500}
.hv3 .trust-line a:hover{color:var(--vert)}
.hv3 .trust-line .dot-sep{color:rgba(240,244,238,.2)}
.hv3 .trust-line .gh{width:17px;height:17px;color:var(--blanc);flex:none;margin-right:2px}
.hv3 .trust-badges{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 28px;list-style:none;margin:0;padding:0}
.hv3 .trust-badges li{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--gris)}
.hv3 .trust-badges svg{width:14px;height:14px;flex:none;color:rgba(47,224,138,.75)}

/* ETAPES */
.hv3 .steps .card-wrap{border:1px solid var(--ligne);border-radius:30px;
  background:linear-gradient(180deg,rgba(9,28,12,.8),rgba(7,18,8,.76));padding:clamp(28px,4vw,44px)}
.hv3 .steps-head{display:grid;grid-template-columns:minmax(0,.92fr) minmax(16rem,.7fr);gap:24px;align-items:end}
.hv3 .steps h2{font-size:clamp(30px,4.2vw,58px);max-width:13ch}
.hv3 .steps-head p{color:var(--gris);font-size:15.5px;line-height:1.8;margin:0}
.hv3 .steps-row{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:36px}
.hv3 .step{position:relative;overflow:hidden;border:1px solid var(--ligne);border-radius:24px;
  background:rgba(12,28,13,.76);padding:26px;min-height:15rem;transition:border-color .2s,transform .2s}
.hv3 .step:hover{border-color:rgba(47,224,138,.3);transform:translateY(-3px)}
.hv3 .step .ghost{position:absolute;right:16px;top:2px;font-family:'Fraunces',serif;font-size:70px;
  font-weight:800;color:rgba(240,244,238,.045);pointer-events:none;letter-spacing:-.05em}
.hv3 .step .no{font-family:'IBM Plex Mono',monospace;font-size:11.5px;letter-spacing:.16em;color:var(--vert)}
.hv3 .step h3{font-family:'Fraunces',serif;font-size:24px;font-weight:700;margin:22px 0 12px;max-width:15ch}
.hv3 .step p{font-size:14px;color:var(--gris);line-height:1.75;margin:0}
@media (max-width:820px){.hv3 .steps-head{grid-template-columns:1fr}.hv3 .steps-row{grid-template-columns:1fr}}

/* Repère prix précoce (2026-08-11, densité) : ligne fine entre "Trois
   étapes" et la suite, pas une <section> à part entière -- padding réduit
   volontairement, pour ne jamais ressembler à un vrai palier de lecture.
   Filets fins haut/bas (même langage que .timeline / .marquee ailleurs sur
   la page) pour la détacher visuellement du flux sans la charger. */
.hv3 .price-teaser-band{padding:8px 0 4px}
.hv3 .price-teaser{display:block;text-align:center;padding:16px 0;margin-top:8px;
  border-top:1px solid var(--ligne);border-bottom:1px solid var(--ligne);
  color:var(--gris);font-size:14.5px;text-decoration:none;transition:color .2s ease,border-color .2s ease}
.hv3 .price-teaser:hover{color:var(--vert);border-color:rgba(47,224,138,.25)}
.hv3 .price-teaser b{color:var(--blanc);font-weight:600}
.hv3 .price-teaser span{color:var(--vert);font-weight:600;margin-left:2px}

/* C'EST QUOI */
.hv3 .what h2{font-size:clamp(30px,4.2vw,58px);max-width:16ch}
.hv3 .what .sub{color:var(--gris);margin-top:14px;max-width:56ch;font-size:16px;line-height:1.8}
/* Rôles (2026-08-11, audit externe -- casser la monotonie des cartes) :
   colonnes sans bordure ni fond, séparées par de simples filets verticaux
   -- traitement délibérément différent des cartes qui précèdent (étapes) et
   suivent (différences), pour que deux sections consécutives ne se
   ressemblent jamais. Le rôle "nous" garde une distinction (accent en
   haut), sans revenir à un encart plein. */
.hv3 .roles{display:grid;grid-template-columns:repeat(3,1fr);margin-top:40px}
.hv3 .role{padding:8px 28px;border-left:1px solid var(--ligne)}
.hv3 .role:first-child{border-left:none;padding-left:0}
.hv3 .role:last-child{padding-right:0}
.hv3 .role.us{position:relative;border-left-color:rgba(47,224,138,.2)}
.hv3 .role.us::before{content:"";position:absolute;top:0;left:28px;right:0;height:2px;background:var(--vert)}
.hv3 .role .tag{font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--gris2)}
.hv3 .role.us .tag{color:var(--vert);margin-top:14px;display:inline-block}
.hv3 .role h3{font-family:'Work Sans',sans-serif;font-size:17px;font-weight:600;margin:12px 0 10px}
.hv3 .role p{font-size:14px;color:var(--gris);line-height:1.75;margin:0}

/* Cartes différences : première en pleine largeur, les trois suivantes sur
   une seule rangée -- asymétrie délibérée plutôt qu'une nouvelle rangée de
   cartes identiques (contraste avec les rôles ci-dessus, sans bordure).
   Passé de 4 à 3 cartes sous la première (2026-08-11, densité) : "Il ne
   répond pas. Il agit." et "Il se programme tout seul." fusionnées (textes
   proches, une seule carte "Autonomie" garde l'essentiel des deux) -- 3
   cartes en ligne plutôt qu'une grille 2x2 devenue impaire, la rangée
   respire au lieu de laisser un trou. */
.hv3 .diff{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:16px}
.hv3 .dcard:first-child{grid-column:1/-1}
.hv3 .dcard{border:1px solid var(--ligne);border-radius:20px;padding:24px;background:rgba(12,28,13,.6);
  transition:border-color .2s,transform .2s}
.hv3 .dcard:first-child{padding:32px;background:linear-gradient(135deg,rgba(10,38,16,.75),rgba(12,28,13,.6))}
.hv3 .dcard:first-child h3{font-size:26px;max-width:32ch}
.hv3 .dcard:first-child p{max-width:60ch}
.hv3 .dcard:hover{border-color:rgba(47,224,138,.28);transform:translateY(-2px)}
.hv3 .dcard .tag{font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--vert)}
.hv3 .dcard h3{font-family:'Fraunces',serif;font-size:22px;font-weight:700;margin:12px 0 10px;max-width:22ch}
.hv3 .dcard p{font-size:14px;color:var(--gris);line-height:1.75;margin:0}
.hv3 .dcard p b{color:var(--blanc);font-weight:500}

/* CTA intermédiaires discrets (2026-08-11) : lien texte fléché, jamais un
   bouton -- ne casse pas le rythme entre deux sections denses. */
.hv3 .inline-cta{display:block;text-align:center;margin-top:24px;color:var(--vert);
  font-family:'Work Sans',sans-serif;font-weight:600;font-size:14.5px;text-decoration:none;
  padding:11px 0}
.hv3 .inline-cta:hover{text-decoration:underline}

/* Vidéo de démonstration (2026-08-20) -- remplace la frise "Une journée.
   Sans vous." (contenu conservé dans CONTENU-RESERVE-TIMELINE.md à la
   racine du dépôt, hors public/).

   Facade cliquable, pas d'iframe au chargement (voir le script en bas de
   home.blade.php) : .video-facade réserve le ratio 16/9 via aspect-ratio,
   AVANT même que l'image ne charge -- zéro CLS, avec ou sans JS. La
   vignette (public/images/video/demo-parcours-complet.jpg) est servie
   depuis notre propre domaine : aucune requête vers YouTube tant que
   personne n'a cliqué sur le bouton lecture. */
.hv3 .video-demo{border-top:1px solid var(--ligne);border-bottom:1px solid var(--ligne)}
.hv3 .video-demo h2{text-align:center;max-width:20ch;margin:0 auto 12px}
.hv3 .video-demo .eyebrow{display:block;text-align:center}
.hv3 .video-demo .sub{text-align:center;color:var(--gris);font-size:16px;margin:0 auto}

.hv3 .video-facade{position:relative;display:block;margin:48px auto 0;max-width:900px;
  aspect-ratio:16/9;border-radius:20px;overflow:hidden;cursor:pointer;
  border:1px solid var(--ligne);background:#0c1c0d}
.hv3 .video-facade-thumb{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.hv3 .video-facade-play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:76px;height:76px;border-radius:50%;background:var(--vert);display:flex;
  align-items:center;justify-content:center;box-shadow:0 0 0 10px rgba(7,26,21,.55),0 8px 30px rgba(0,0,0,.4);
  transition:transform .2s ease}
.hv3 .video-facade:hover .video-facade-play,.hv3 .video-facade:focus-visible .video-facade-play{transform:translate(-50%,-50%) scale(1.08)}
.hv3 .video-facade-duration{position:absolute;right:14px;bottom:14px;background:rgba(7,26,21,.85);
  color:var(--blanc);font-family:'IBM Plex Mono',monospace;font-size:13px;padding:4px 9px;
  border-radius:6px;letter-spacing:.02em}
.hv3 .video-facade iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

.hv3 .video-consent-note{text-align:center;color:var(--gris2);font-size:12.5px;max-width:560px;
  margin:16px auto 0;line-height:1.6}
.hv3 .video-consent-note a{color:var(--vert)}

@media (max-width:820px){
  .hv3 .video-facade{margin-top:32px;border-radius:14px}
  .hv3 .video-facade-play{width:60px;height:60px}
}

/* MONTAGES */
.hv3 .setups h2{font-size:clamp(30px,4.2vw,58px);max-width:15ch}
.hv3 .setups .sub{color:var(--gris);margin-top:14px;max-width:54ch;font-size:16px;line-height:1.8}
.hv3 .setup-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:44px}
.hv3 .setup{border:1px solid var(--ligne);border-radius:22px;background:rgba(10,24,12,.68);padding:26px;
  transition:border-color .2s,transform .2s}
.hv3 .setup:hover{border-color:rgba(47,224,138,.3);transform:translateY(-3px)}
.hv3 .setup .num{font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.16em;color:var(--vert)}
.hv3 .setup h3{font-family:'Fraunces',serif;font-size:23px;font-weight:700;margin:12px 0 20px;max-width:24ch}

/* Montages repliés (2026-08-11, densité) : 3 des 6 cartes masquées par
   défaut, révélées sur place au clic -- rien n'est retiré du DOM, donc rien
   n'est perdu pour le SEO/lecteurs d'écran qui ignorent le CSS, seul
   l'affichage change. Sans .expanded : les 3 cartes visibles (01, 02, 06)
   laissent la dernière seule sur sa rangée (nombre impair dans une grille à
   2 colonnes) -- plutôt qu'un trou disgracieux à côté, elle occupe alors
   toute la largeur, ce qui se lit comme une carte de clôture voulue. */
.hv3 .setup-collapsible{display:none}
.hv3 .setup-grid.expanded .setup-collapsible{display:block;animation:setupReveal .5s ease both}
.hv3 .setup-grid.expanded .setup-collapsible:nth-of-type(3){animation-delay:.08s}
.hv3 .setup-grid.expanded .setup-collapsible:nth-of-type(4){animation-delay:.16s}
@keyframes setupReveal{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  .hv3 .setup-grid.expanded .setup-collapsible{animation:none}
}
.hv3 .setup-grid:not(.expanded) .setup:last-child{grid-column:1/-1}
.hv3 .setup-toggle{grid-column:1/-1;justify-self:center;margin:2px 0 4px;padding:12px 26px;
  border-radius:99px;border:1px solid var(--ligne);background:transparent;color:var(--gris);
  font-family:'Work Sans',sans-serif;font-size:14px;font-weight:600;cursor:pointer;
  transition:border-color .2s,color .2s,background .2s}
.hv3 .setup-toggle:hover{border-color:rgba(47,224,138,.35);color:var(--blanc);background:rgba(47,224,138,.06)}
.hv3 .setup-toggle .setup-toggle-label span{color:var(--vert)}
.hv3 .flow{list-style:none;margin:0;padding:0}
.hv3 .flow li{position:relative;padding:0 0 16px 26px;font-size:14px;color:var(--gris);line-height:1.7}
.hv3 .flow li:last-child{padding-bottom:0}
.hv3 .flow li::before{content:"";position:absolute;left:5px;top:8px;width:7px;height:7px;border-radius:50%;
  background:rgba(47,224,138,.55)}
.hv3 .flow li::after{content:"";position:absolute;left:8px;top:19px;bottom:2px;width:1px;background:var(--ligne)}
.hv3 .flow li:last-child::after{display:none}
.hv3 .flow li:last-child::before{background:var(--vert);box-shadow:0 0 10px rgba(47,224,138,.6)}
.hv3 .flow .lab{display:block;font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--gris2);margin-bottom:3px}
.hv3 .flow li:last-child .lab{color:var(--vert)}
.hv3 .flow b{color:var(--blanc);font-weight:500}
.hv3 .vs{margin-top:18px;padding-top:16px;border-top:1px solid var(--ligne);
  font-size:13px;color:var(--gris2);line-height:1.6;display:flex;gap:9px;align-items:flex-start}
.hv3 .vs svg{width:14px;height:14px;flex:none;margin-top:2px;color:#D97757}
.hv3 .vs b{color:rgba(242,245,240,.72);font-weight:500}
.hv3 .setups-note{margin-top:24px;font-size:14.5px;color:var(--gris);text-align:center}
.hv3 .setups-note b{color:var(--blanc);font-weight:500}
@media (max-width:900px){
  .hv3 .roles,.hv3 .diff,.hv3 .setup-grid{grid-template-columns:1fr}
  .hv3 .role{border-left:none;border-top:1px solid var(--ligne);padding:24px 0}
  .hv3 .role:first-child{border-top:none;padding-top:0}
  .hv3 .role.us{border-top-color:rgba(47,224,138,.2)}
  .hv3 .role.us::before{left:0}
  .hv3 .dcard:first-child{padding:24px}
  .hv3 .dcard:first-child h3{font-size:22px}
}

/* MARQUEE */
/* Respiration renforcée (2026-08-11) : mesuré en conditions réelles, les
   chips touchaient quasiment le sous-titre -- la section semblait une
   bande étroite comparée aux autres. Padding vertical propre (au lieu du
   seul padding de base partagé) + marges internes augmentées. */
.hv3 .marquee{border-top:1px solid var(--ligne);border-bottom:1px solid var(--ligne);position:relative;overflow:hidden;padding:clamp(80px,10vw,130px) 0}
.hv3 .marquee h2{font-size:clamp(30px,4.2vw,60px);text-align:center;max-width:16ch;margin:0 auto 12px}
.hv3 .marquee .sub{text-align:center;color:var(--gris);font-size:16px;margin-bottom:60px}
.hv3 .marquee-row{display:flex;overflow:hidden;gap:12px;margin-bottom:18px;mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.hv3 .marquee-track{display:flex;gap:12px;flex:none;animation:hv3scroll 46s linear infinite}
.hv3 .marquee-row.rev .marquee-track{animation-direction:reverse;animation-duration:38s}
@keyframes hv3scroll{to{transform:translateX(-50%)}}
.hv3 .chip{flex:none;font-size:13.5px;color:var(--gris);border:1px solid var(--ligne);border-radius:99px;padding:10px 18px;white-space:nowrap;background:var(--pin)}
.hv3 .chip b{color:var(--blanc);font-weight:500}

/* TEMPS */
.hv3 .temps h2{font-size:clamp(30px,4.2vw,60px);max-width:17ch}
.hv3 .temps .sub{color:var(--gris);margin-top:14px;max-width:52ch;font-size:16px}
.hv3 .temps-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:44px;align-items:stretch}
.hv3 .temps-diy{background:rgba(7,18,8,.5);border:1px solid var(--ligne);border-radius:22px;padding:30px}
.hv3 .temps-diy h3{font-family:'Work Sans',sans-serif;font-size:15px;font-weight:600;color:var(--gris);margin:0 0 20px}
.hv3 .trow{display:flex;justify-content:space-between;gap:16px;padding:11px 0;border-bottom:1px solid rgba(240,244,238,.06);font-size:14px;color:var(--gris)}
.hv3 .trow span:last-child{font-family:'IBM Plex Mono',monospace;color:var(--blanc);flex:none;font-size:13px}
.hv3 .ttotal{display:flex;justify-content:space-between;margin-top:16px;padding-top:16px;border-top:1px solid var(--ligne);font-weight:600;font-size:16px}
.hv3 .temps-nous{background:linear-gradient(170deg,rgba(8,44,20,.95),rgba(7,26,13,.9));border:1px solid rgba(47,224,138,.28);border-radius:22px;padding:30px;display:flex;flex-direction:column;justify-content:center;position:relative;overflow:hidden}
.hv3 .temps-nous .halo{position:absolute;inset:0;background:radial-gradient(circle at 40% 25%,rgba(47,224,138,.14),transparent 62%)}
.hv3 .temps-nous h3{font-family:'Work Sans',sans-serif;font-size:15px;font-weight:600;color:var(--vert);position:relative;margin:0}
.hv3 .temps-nous .big{font-family:'Fraunces',serif;font-size:clamp(56px,7vw,96px);font-weight:800;line-height:1;margin:22px 0 0;position:relative}
.hv3 .temps-nous p{color:var(--gris);margin:20px 0 22px;position:relative;font-size:15px;line-height:1.75}
.hv3 .tlist{list-style:none;position:relative;margin:0 0 24px;padding:0}
.hv3 .tlist li{font-size:13.5px;color:var(--gris);padding:4px 0;display:flex;gap:10px;align-items:flex-start}
.hv3 .tlist li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--vert);flex:none;margin-top:8px}
.hv3 .temps-nous .btn{align-self:flex-start;position:relative}

/* TARIFS */
.hv3 .pricing h2{font-size:clamp(30px,4.2vw,60px);text-align:center}
.hv3 .anchor{max-width:600px;margin:18px auto 0;text-align:center;color:var(--gris);font-size:16px}
.hv3 .anchor b{color:var(--blanc)}
.hv3 .cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:48px;align-items:stretch}
/* Repris (2026-08-11) : prix + CTA flottaient sans lien visuel avec le
   texte, contrairement aux 3 cartes au-dessus où tout s'enchaîne dans une
   même colonne. Un séparateur vertical (même langage que le border-top
   avant les listes à puces des cartes) rattache le bloc prix/CTA à la
   bande au lieu de le laisser orphelin à droite ; padding augmenté pour
   un rendu aussi soigné que les cartes. */
.hv3 .custom-band{margin-top:18px;background:rgba(7,18,8,.5);border:1px solid var(--ligne);border-radius:24px;padding:34px 36px;display:grid;grid-template-columns:1fr auto;gap:36px;align-items:center}
.hv3 .custom-band h3{font-family:'Work Sans',sans-serif;font-size:15px;font-weight:600;margin:0 0 8px}
.hv3 .custom-band h3 .tag{font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--gris2);border:1px solid var(--ligne);border-radius:99px;padding:4px 10px;margin-left:10px;vertical-align:middle}
.hv3 .custom-band p{font-size:14px;color:var(--gris);max-width:62ch;line-height:1.75;margin:0}
.hv3 .custom-band .cb-right{text-align:right;white-space:nowrap;padding-left:36px;border-left:1px solid var(--ligne);display:flex;flex-direction:column;align-items:flex-end;gap:16px}
.hv3 .custom-band .cb-price{font-family:'Fraunces',serif;font-size:34px;font-weight:700;letter-spacing:-.04em;line-height:1}
.hv3 .custom-band .cb-price small{font-family:'Work Sans',sans-serif;font-size:13px;font-weight:400;color:var(--gris)}
.hv3 .custom-band .btn{margin-top:0}
.hv3 .pcard{background:linear-gradient(180deg,rgba(13,31,15,.86),rgba(9,21,10,.82));border:1px solid var(--ligne);border-radius:24px;padding:28px 24px;display:flex;flex-direction:column;position:relative;transition:transform .2s ease,border-color .2s ease}
.hv3 .pcard:hover{transform:translateY(-3px);border-color:rgba(47,224,138,.3)}
/* Renforcé (2026-08-11, audit externe) : l'écart visuel avec les deux
   autres cartes restait faible malgré badge + bordure. Légère mise à
   l'échelle + ombre marquée, au-dessus de ses voisines en z-index pour ne
   pas se faire recouvrir par l'effet hover des cartes adjacentes. Le
   bouton plein (non-ghost) était déjà correct sur cette carte -- vérifié. */
.hv3 .pcard.mid{border-color:rgba(47,224,138,.42);background:linear-gradient(180deg,rgba(10,38,16,.96),rgba(8,26,11,.9));
  transform:scale(1.045);box-shadow:0 24px 60px rgba(0,0,0,.45),0 0 0 1px rgba(47,224,138,.12);z-index:1}
.hv3 .pcard.mid:hover{transform:scale(1.045) translateY(-3px)}
.hv3 .badge{position:absolute;top:-12px;left:50%;transform:translateX(-50%);background:var(--vert);color:var(--noir);font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.12em;padding:6px 14px;border-radius:99px;text-transform:uppercase;white-space:nowrap;font-weight:500}
.hv3 .pcard h3{font-family:'Work Sans',sans-serif;font-size:15px;font-weight:600;margin:0}
.hv3 .price{font-family:'Fraunces',serif;font-size:44px;font-weight:700;margin:16px 0 0;line-height:1;letter-spacing:-.04em}
.hv3 .price small{font-family:'Work Sans',sans-serif;font-size:14px;font-weight:400;color:var(--gris)}
.hv3 .pdesc{font-size:13.5px;color:var(--gris);line-height:1.7;margin:14px 0 0;min-height:76px}
.hv3 .pcard .btn{margin-top:22px;width:100%;height:44px;font-size:13.5px}
.hv3 .pcard ul{list-style:none;margin:22px 0 0;padding-top:22px;border-top:1px solid var(--ligne)}
.hv3 .pcard li{padding:5px 0;font-size:13px;color:var(--gris);display:flex;gap:9px;align-items:flex-start;line-height:1.55}
.hv3 .pcard li::before{content:"";width:5px;height:5px;border-radius:50%;background:rgba(47,224,138,.7);flex:none;margin-top:8px}
.hv3 .guarantee{text-align:center;margin-top:26px;font-size:14px;color:var(--gris)}
.hv3 .guarantee b{color:var(--vert)}

/* CHIFFRES */
.hv3 .nums{padding-top:0}
.hv3 .band{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;border-top:1px solid var(--ligne);padding-top:48px;text-align:center}
.hv3 .band .n{font-family:'Fraunces',serif;font-size:clamp(34px,4vw,52px);font-weight:700;letter-spacing:-.04em}
.hv3 .band .n em{color:var(--vert);font-style:normal}
.hv3 .band .l{font-size:13px;color:var(--gris);margin-top:6px}

/* COMPARATIF */
/* Respiration renforcée avant la FAQ (2026-08-11) : l'écart numérique était
   déjà dans la moyenne des autres transitions (mesuré ~254px, comparable à
   pricing→compare ~222px), mais le tableau dense à bord net (grille,
   texte serré) "tient" le regard jusqu'à son bord, contrairement aux
   sections aérées -- la même distance s'y perçoit comme plus abrupte.
   Padding bas dédié, au-delà du padding de base partagé. */
.hv3 .compare{padding-bottom:clamp(96px,13vw,160px)}
.hv3 .compare h2{font-size:clamp(30px,4.2vw,60px);max-width:16ch}
.hv3 .compare .sub{color:var(--gris);margin-top:14px;max-width:48ch;font-size:16px}
.hv3 .table-wrap{margin-top:44px;border:1px solid var(--ligne);border-radius:24px;overflow:hidden}
.hv3 table{width:100%;border-collapse:collapse}
.hv3 th,.hv3 td{padding:15px 18px;text-align:left;font-size:14px;border-bottom:1px solid rgba(240,244,238,.06)}
.hv3 thead th{background:var(--pin);font-family:'Work Sans',sans-serif;font-weight:600;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--gris)}
.hv3 th.us,.hv3 td.us{background:var(--vert8);color:var(--blanc);font-weight:500}
/* Renforcé (2026-08-11) : l'en-tête (vert8 + texte vert 12px) lisait plus
   faible que ses propres cellules en dessous (fond identique mais texte
   blanc, plus contrasté) -- mesuré en conditions réelles, la colonne ne
   "gagnait" pas l'œil comme prévu. Fond plus saturé + poids de texte
   supérieur aux autres en-têtes, pour que la hiérarchie soit nette dès la
   première ligne. */
.hv3 thead th.us{background:rgba(47,224,138,.22);color:var(--vert);font-weight:700}
.hv3 td{color:var(--gris)}
.hv3 tr:last-child td{border-bottom:none}
.hv3 .ok{color:var(--vert);font-weight:600}
.hv3 .no{color:#D97757}

/* FAQ */
.hv3 .faq h2{font-size:clamp(30px,4.2vw,56px);text-align:center}
.hv3 .faq .list{max-width:760px;margin:44px auto 0}
.hv3 details{background:rgba(12,26,13,.7);border:1px solid var(--ligne);border-radius:18px;margin-bottom:10px;overflow:hidden;transition:border-color .2s}
.hv3 details[open]{border-color:rgba(47,224,138,.3)}
.hv3 summary{cursor:pointer;padding:20px 24px;font-weight:600;font-size:16px;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:44px}
.hv3 summary::-webkit-details-marker{display:none}
.hv3 summary::after{content:"+";font-family:'Fraunces',serif;font-size:24px;color:var(--vert);transition:transform .3s;flex:none}
.hv3 details[open] summary::after{transform:rotate(45deg)}
.hv3 details p{padding:0 24px 20px;color:var(--gris);font-size:14.5px;line-height:1.75;margin:0}

/* TEMOIGNAGE (masque tant que vide -- voir home.blade.php) */
.hv3 .temoin{padding-top:0}
.hv3 .temoin-card{border:1px solid var(--ligne);border-radius:24px;background:rgba(12,28,13,.66);padding:clamp(28px,4vw,44px);max-width:760px;margin:0 auto;text-align:center}
.hv3 .temoin-card p{font-family:'Fraunces',serif;font-size:clamp(20px,2.4vw,26px);font-weight:600;line-height:1.4;color:var(--blanc);margin:0}
.hv3 .temoin-card cite{display:block;margin-top:18px;font-style:normal;font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--gris2)}

/* FINAL */
.hv3 .final{text-align:center;overflow:hidden}
.hv3 .final .glow{position:absolute;bottom:-280px;left:50%;transform:translateX(-50%);width:960px;height:620px;background:radial-gradient(ellipse,rgba(47,224,138,.16),transparent 66%);pointer-events:none}
.hv3 .final h2{font-size:clamp(36px,5.2vw,76px);max-width:15ch;margin:0 auto;position:relative;font-weight:800}
.hv3 .final p{color:var(--gris);margin:20px auto 30px;max-width:44ch;position:relative;font-size:16px}

/* Refonte (2026-08-11) : 4 colonnes + bloc bas, au niveau de soin du reste
   de la page (le pied de page précédent -- un seul paragraphe de liens --
   paraissait trop léger comparé aux sections au-dessus). */
.hv3 footer{border-top:1px solid var(--ligne);padding:clamp(56px,7vw,88px) 0 40px}
.hv3 .footer-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:32px;padding-bottom:44px;border-bottom:1px solid var(--ligne)}
.hv3 .footer-col h4{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--gris2);font-weight:600;margin:0 0 18px}
.hv3 .footer-col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
/* Cible tactile 44px (2026-08-11, audit terrain) : mesuré ~16px de haut sans
   padding -- l'espacement visuel entre liens venait du gap du ul, pas d'une
   zone cliquable réelle. Padding vertical sur le lien lui-même (14*1.6 texte
   + 22px de padding ~= 44px), gap du ul ramené à 0 -- le padding porte
   desormais tout l'espacement, deux liens adjacents restent distincts. */
.hv3 .footer-col a{display:block;color:var(--gris);text-decoration:none;font-size:14px;padding:11px 0}
.hv3 .footer-col a:hover{color:var(--vert)}
.hv3 .footer-tag{display:block;font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.06em;color:var(--gris2);margin-top:2px}
.hv3 .footer-trust{font-size:13px;color:var(--gris2);line-height:1.6;margin:20px 0 0;max-width:26ch}
.hv3 .footer-trust b{color:var(--blanc);font-weight:600}
.hv3 .footer-bottom{padding-top:32px;text-align:center;color:var(--gris2);font-size:12.5px;line-height:1.8}
.hv3 .footer-logo{display:inline-flex;align-items:center;gap:8px;text-decoration:none;margin:-9px 0 7px;padding:9px 0;font-family:'Fraunces',serif;font-weight:700;font-size:16px;color:var(--blanc)}
.hv3 .footer-logo img{display:block}
.hv3 .footer-logo b{color:var(--vert);font-weight:700}
.hv3 .footer-disclaimer{max-width:64ch;margin:0 auto}
/* .32 mesurait ~2,9:1 -- sous le seuil, alors que c'est un texte legal
   porteur de sens (copyright), pas une decoration. Aligné sur --gris2. */
.hv3 .footer-copyright{margin-top:6px;color:var(--gris2)}

@media (max-width:700px){.hv3 h1 br,.hv3 h2 br{display:none}}
@media (max-width:820px){
  .hv3 .temps-grid{grid-template-columns:1fr}
  .hv3 .cards{grid-template-columns:1fr}
  /* Carte pleine largeur en pile mobile : la mise à l'échelle deborderait
     du cadre, remplacée par une ombre seule (déjà distinctive). */
  .hv3 .pcard.mid{transform:none;margin:8px 0}
  .hv3 .pcard.mid:hover{transform:translateY(-3px)}
  .hv3 .custom-band{grid-template-columns:1fr;gap:20px;text-align:left}
  .hv3 .custom-band .cb-right{text-align:left;align-items:flex-start;border-left:none;border-top:1px solid var(--ligne);padding-left:0;padding-top:20px}
  .hv3 .band{grid-template-columns:repeat(2,1fr);gap:26px}
  /* Indice de défilement (2026-08-11, audit terrain) : mesuré en conditions
     réelles -- scrollWidth 660px contre 324px de cadre, la 3e colonne est
     entièrement hors-champ et rien ne le suggère. Ombre de bord qui
     s'efface quand le tableau est scrollé jusqu'au bout (classe posée en
     JS, cf. home.blade.php) -- pas de bord flou si tout est déjà visible. */
  .hv3 .table-wrap{overflow-x:auto;position:relative}
  .hv3 .table-wrap::after{content:"";position:absolute;top:0;right:0;bottom:0;width:32px;
    pointer-events:none;z-index:2;transition:opacity .25s ease;
    background:linear-gradient(to right,transparent,rgba(4,12,8,.92))}
  .hv3 .table-wrap.at-end::after{opacity:0}
  .hv3 table{min-width:660px}
  .hv3 .pdesc{min-height:0}
  .hv3 .footer-grid{grid-template-columns:repeat(2,1fr);gap:36px 24px;text-align:left}
  .hv3 .footer-trust{max-width:100%}
}
@media (max-width:520px){
  .hv3 .footer-grid{grid-template-columns:1fr}
}

/* Formulaire de contact "Sur-mesure" (2026-08-10) -- meme systeme visuel */
.hv3 .contact-form{max-width:560px;margin:0 auto}
.hv3 .contact-form label{display:block;font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--gris2);margin-bottom:8px}
.hv3 .contact-form .field{margin-bottom:20px}
.hv3 .contact-form input,.hv3 .contact-form textarea{width:100%;background:rgba(7,18,8,.5);border:1px solid var(--ligne);border-radius:12px;padding:13px 16px;color:var(--blanc);font-family:'Work Sans',sans-serif;font-size:15px}
.hv3 .contact-form input:focus,.hv3 .contact-form textarea:focus{outline:none;border-color:rgba(47,224,138,.5)}
.hv3 .contact-form textarea{min-height:140px;resize:vertical}
.hv3 .contact-form .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.hv3 .contact-form .err{color:#D97757;font-size:12.5px;margin-top:6px}
.hv3 .contact-ok{border:1px solid rgba(47,224,138,.3);background:var(--vert8);border-radius:16px;padding:20px 24px;color:var(--blanc);text-align:center;margin-bottom:28px}