@import url('fonts.css');

/* ══════════════════════════════════════════════════════════════
   CONSEIL ET FORMATION G3J · Philippe Gérard
   Jetons relevés sur le site Framer existant : Inter, fond crème,
   encre presque noire, bleu sourd #1f3a5f pour la seconde moitié
   des titres. Rien n'est inventé ici.
   ══════════════════════════════════════════════════════════════ */

:root{
  --paper:#fffffb;
  --cream:#f4f2e8;
  --tint:rgba(46,26,6,.05);
  --ink:#151413;
  --ink-2:#59524f;
  --ink-3:#69645e;
  --navy:#1f3a5f;
  --navy-d:#152741;
  --navy-l:rgba(31,58,95,.7);
  --white:#fff;
  --line:rgba(21,20,19,.1);
  --line-2:rgba(21,20,19,.18);
  --accent:#c2703a;

  --r-s:8px; --r-m:12px; --r-l:16px; --r-xl:22px; --r-full:999px;

  --sh-1:0 1px 2px rgba(21,20,19,.04), 0 4px 14px rgba(21,20,19,.04);
  --sh-2:0 2px 6px rgba(21,20,19,.05), 0 14px 38px rgba(21,20,19,.07);
  --sh-3:0 6px 18px rgba(21,20,19,.07), 0 30px 70px rgba(21,20,19,.11);

  --ff:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;
  --ff-d:var(--ff);
  --ff-b:var(--ff);

  --gut:clamp(20px,5vw,64px);
  --sec:clamp(64px,8vw,132px);
  --max:1200px;
  --barh:0px;

  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-soft:cubic-bezier(.33,.1,.2,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html:not(.audit){scroll-behavior:smooth}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font:500 16px/1.4 var(--ff);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;padding-bottom:var(--barh);
}
body.lock{overflow:hidden}
img,video,svg{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3,h4{margin:0;font-family:var(--ff);font-weight:400;line-height:1.2;letter-spacing:-.04em}
p{margin:0}
:focus-visible{outline:2.5px solid var(--accent);outline-offset:3px;border-radius:6px}
::selection{background:var(--navy);color:#fff}
section[id]{scroll-margin-top:88px}

/* ─── layout ─────────────────────────────────────────────── */
.wrap{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--gut)}
.sec{padding-block:var(--sec)}
.center{text-align:center}

/* ─── type ───────────────────────────────────────────────── */
.d1{font-size:clamp(1.35rem,3vw,2.9rem);line-height:1.2;letter-spacing:-.03em}
.d2{font-size:clamp(1.85rem,3.9vw,3.25rem);line-height:1.2;letter-spacing:-.04em}
.d3{font-size:clamp(1.3rem,2.2vw,1.85rem);letter-spacing:-.03em}
.lead{font-size:clamp(.97rem,1.1vw,1.06rem);color:var(--ink-2);line-height:1.6;font-weight:500}
.sm{font-size:.9rem;line-height:1.56}
.mut{color:var(--ink-2)}
h1 em,h2 em,h3 em{font-style:normal;font-weight:400;color:var(--navy-l)}
.on-navy em{color:rgba(255,255,255,.62)}

.kicker{
  margin:0;font-size:.78rem;font-weight:600;letter-spacing:.01em;color:var(--ink-3);
}
.hero .kicker{color:rgba(255,255,255,.72)}
.diag .kicker,.ct .kicker{color:var(--ink-3)}
.ct .kicker{color:rgba(255,255,255,.6)}

/* ─── buttons ────────────────────────────────────────────── */
.btn{
  --bg:var(--navy);--fg:#fff;
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:48px;height:48px;padding:0 22px;border-radius:var(--r-s);
  background:var(--bg);color:var(--fg);border:0;cursor:pointer;
  font-family:var(--ff);font-weight:600;font-size:.94rem;line-height:1;text-align:center;
  box-shadow:var(--sh-1);overflow:hidden;isolation:isolate;
  transition:transform .34s var(--ease),box-shadow .34s var(--ease),opacity .3s;
  -webkit-tap-highlight-color:transparent;
}
.btn>*{position:relative;z-index:2}
.btn::before{content:'';position:absolute;inset:0;z-index:1;background:var(--navy);
  clip-path:inset(100% 0 0 0);transition:clip-path .46s var(--ease)}
.btn:hover{transform:translateY(-2px);box-shadow:var(--sh-2)}
.btn:hover::before{clip-path:inset(0 0 0 0)}
.btn:active{transform:translateY(0)}
.btn[disabled]{opacity:.4;pointer-events:none}
.btn svg{width:18px;height:18px;flex:none;display:block}
.btn--o{--bg:transparent;--fg:var(--navy);box-shadow:inset 0 0 0 1.5px var(--line-2)}
.btn--o::before{background:var(--navy)}
.btn--o:hover{--fg:#fff}
.btn--w{--bg:#fff;--fg:var(--navy)}
.btn--w::before{background:var(--navy-l)}
.btn--w:hover{--fg:var(--navy-d)}
.btn--ghost{--bg:rgba(255,255,255,.1);--fg:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.3);backdrop-filter:blur(8px)}
.btn--ghost::before{background:#fff}
.btn--ghost:hover{--fg:var(--navy)}
.btn--br{--bg:var(--navy)}
.btn--br::before{background:var(--navy)}
.btn--sm{min-height:44px;height:44px;padding:0 18px;font-size:.88rem}
.btn--wide{width:100%}

/* ══════════════════════════════════════════════════════════
   EN-TÊTE DE PAGE
   Les pages intérieures avaient trois traitements différents :
   un titre centré sur fond plat pour les unes, un texte à
   gauche et une photo à droite pour les autres. Deux défauts.
   Aucune image en haut là où il en fallait une, et surtout un
   rythme qui changeait de page en page, ce qui se lit comme du
   désordre plutôt que comme une intention.

   Toutes reçoivent désormais le même bandeau : une photo pleine
   largeur, un voile, le titre au centre. Même langage que la
   page d’accueil, en plus court, pour que l’accueil reste le
   moment le plus fort. Le titre y devient enfin un h1 : les
   cinq pages intérieures n’en avaient aucun.
   ══════════════════════════════════════════════════════════ */
.phd{
  position:relative;display:flex;align-items:center;overflow:hidden;
  background:var(--ink);min-height:clamp(360px,50vh,500px);
  padding:clamp(88px,12vh,124px) 0 clamp(38px,4.6vw,58px);
}
/* .imgrv, plus bas dans la feuille, pose position:relative sur ce
   même élément : à spécificité égale, c’est lui qui gagnait et la
   photo se posait dans le flux au lieu de tapisser le bandeau. */
.phd .phd__bg{position:absolute;inset:0;z-index:0}
.phd .phd__bg img{width:100%;height:100%;object-fit:cover;object-position:center 34%}
.phd .phd__bg::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(21,20,19,.72) 0%,rgba(21,20,19,.58) 46%,rgba(21,20,19,.8) 100%);
}
.phd__in{position:relative;z-index:2;width:100%;text-align:center}
.phd .kicker{color:rgba(255,255,255,.76)}
.phd h1{margin:15px auto 0;color:#fff;max-width:min(48ch,100%);
  font-size:clamp(1.5rem,2.6vw,2.45rem)}
.phd h1 em{color:rgba(255,255,255,.74)}
.phd__p{
  margin:19px auto 0;max-width:58ch;color:rgba(255,255,255,.85);
  font-size:clamp(.95rem,1.05vw,1.04rem);line-height:1.6;
}
.phd + .sec{padding-top:clamp(44px,5.2vw,78px)}

@media (max-width:600px){
  .phd{min-height:clamp(320px,54vh,400px)}
  .phd h1{max-width:100%}
}

/* ─── à propos : le portrait tient enfin une place, à côté de
       ce qu’il illustre. Le titre étant monté dans le bandeau,
       il ne reste que la citation et la signature, dont la
       hauteur répond à celle de la photo. Les deux colonnes
       sont centrées l’une sur l’autre : plus de vide sous le
       portrait. ─────────────────────────────────────────── */
.intro{display:grid;grid-template-columns:minmax(0,340px) minmax(0,1fr);
  gap:clamp(26px,4.2vw,58px);align-items:center}
.intro--rev{grid-template-columns:minmax(0,1fr) minmax(0,340px)}
.intro--rev .intro__ph{order:2}
.intro__ph{border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--sh-3);
  background:var(--cream);aspect-ratio:3/4}
.intro__ph img{width:100%;height:100%;object-fit:cover;display:block}
.intro .quote{margin:0}
@media (max-width:820px){
  .intro,.intro--rev{grid-template-columns:1fr;gap:26px}
  .intro__ph,.intro--rev .intro__ph{width:min(260px,70vw);justify-self:center;order:0}
}

/* ══════════════════════════════════════════════════════════
   RIDEAU D’ACCUEIL
   Sobre : le logo réel monte doucement, le nom se pose,
   puis le voile crème se retire. Aucun effet décoratif.
   ══════════════════════════════════════════════════════════ */
.ld{position:fixed;inset:0;z-index:999;display:grid;place-items:center;
  background:var(--cream);pointer-events:none}
.ld__in{display:grid;justify-items:center;gap:18px;will-change:transform,opacity}
.ld__markwrap{position:relative;overflow:hidden;line-height:0}
.ld__mark{width:clamp(78px,8.5vw,104px);height:auto}
/* un cache incliné à 45° recule vers le haut à droite : le trait
   apparaît de la base du personnage jusqu'à la pointe de la flèche,
   exactement le sens que dessine le logo. */
.ld__wipe{
  position:absolute;left:50%;top:50%;width:200%;height:200%;margin:-100%;
  background:var(--cream);transform:rotate(45deg) translateY(0);
}
.ld.go .ld__wipe{animation:draw 1.25s cubic-bezier(.58,.02,.28,1) .2s forwards}
@keyframes draw{to{transform:rotate(45deg) translateY(-105%)}}

.ld__word{
  display:flex;overflow:hidden;font-size:clamp(.72rem,1.5vw,.84rem);
  font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-2);
}
.ld__word span{display:block;transform:translateY(115%);opacity:0}
.ld.go .ld__word span{animation:wordUp .8s var(--ease-soft) forwards}
@keyframes wordUp{to{transform:none;opacity:1}}
.ld.go .ld__word span:nth-child(1){animation-delay:1.05s}
.ld.go .ld__word span:nth-child(2){animation-delay:1.06s}
.ld.go .ld__word span:nth-child(3){animation-delay:1.08s}
.ld.go .ld__word span:nth-child(4){animation-delay:1.09s}
.ld.go .ld__word span:nth-child(5){animation-delay:1.11s}
.ld.go .ld__word span:nth-child(6){animation-delay:1.12s}
.ld.go .ld__word span:nth-child(7){animation-delay:1.14s}
.ld.go .ld__word span:nth-child(8){animation-delay:1.16s}
.ld.go .ld__word span:nth-child(9){animation-delay:1.17s}
.ld.go .ld__word span:nth-child(10){animation-delay:1.19s}
.ld.go .ld__word span:nth-child(11){animation-delay:1.20s}
.ld.go .ld__word span:nth-child(12){animation-delay:1.22s}
.ld.go .ld__word span:nth-child(13){animation-delay:1.23s}
.ld.go .ld__word span:nth-child(14){animation-delay:1.25s}
.ld.go .ld__word span:nth-child(15){animation-delay:1.26s}
.ld.go .ld__word span:nth-child(16){animation-delay:1.27s}
.ld.go .ld__word span:nth-child(17){animation-delay:1.29s}
.ld.go .ld__word span:nth-child(18){animation-delay:1.31s}
.ld.go .ld__word span:nth-child(19){animation-delay:1.32s}
.ld.go .ld__word span:nth-child(20){animation-delay:1.33s}
.ld.go .ld__word span:nth-child(21){animation-delay:1.35s}
.ld.go .ld__word span:nth-child(22){animation-delay:1.36s}
.ld.go .ld__word span:nth-child(23){animation-delay:1.38s}
.ld.go .ld__word span:nth-child(24){animation-delay:1.40s}

.ld__sub{font-size:.66rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--ink-3);opacity:0;margin-top:-6px}
.ld.go .ld__sub{animation:fadeIn .7s var(--ease-soft) 1.5s forwards}
@keyframes fadeIn{to{opacity:1}}

/* le voile se retire, sans fioriture */
.ld.out{animation:veilOut .82s var(--ease-soft) .1s forwards}
@keyframes veilOut{to{opacity:0}}
.ld.out .ld__in{animation:veilLift .82s var(--ease-soft) forwards}
@keyframes veilLift{to{opacity:0;transform:translateY(-12px)}}
.ld.gone{display:none}
.ld.quick .ld__in{opacity:0}
html.audit .ld{display:none!important}

/* ══════════════════════════════════════════════════════════
   LE VOCABULAIRE DE MOUVEMENT
   Quatre gestes, et pas un de plus, appliqués partout de la
   même façon. Un site qui bouge de quatre manières a une
   signature ; un site qui bouge de douze manières a l’air mal
   fini. Tout passe par transform et opacity : le compositeur
   s’en charge seul, rien n’est repeint pendant le défilement.

   1 · les titres se lèvent mot à mot derrière une ligne de coupe
   2 · les grilles se déroulent dans l’ordre, jamais par paquets
   3 · une ligne avance sur ce qui est réellement séquentiel
   4 · les nombres se comptent, une seule fois, à leur apparition
   ══════════════════════════════════════════════════════════ */

/* 1 · Le titre reste caché jusqu’à sa découpe, sinon on le voit
       s’afficher puis disparaître d’un coup avant de se lever.
       Le rideau couvre l’écran pendant ce temps : rien ne
       clignote. Sans script, le <noscript> de chaque page rend
       tout visible d’emblée. */
.wsplit{opacity:0}
.wsplit[data-split]{opacity:1}

/* 2 · Le retard de chaque carte vient de son rang réel dans la
       grille, calculé par le script. Les anciens paliers fixes
       se répétaient tous les trois éléments : une grille de six
       cartes démarrait deux fois, ce qui se voyait. Le rang est
       plafonné, faute de quoi une longue liste finirait par
       apparaître une seconde après son début. */
.stag>*{transition-delay:calc(min(var(--i,0),7) * 70ms)}

/* 3 · L’illumination progressive, empruntée aux étapes de la
       méthode, sert aussi le parcours : chaque ligne prend sa
       couleur au moment où on l’atteint. */
.cv .cv__y{color:rgba(21,20,19,.34);transition:color .6s var(--ease)}
.cv .cv__r.in .cv__y{color:var(--navy)}

/* 4 · Les barres du radar suivent la réponse au lieu de sauter. */
.rad__bar i{transition:width .5s var(--ease)}

/* ══════════════════════════════════════════════════════════
   QUESTIONS FRÉQUENTES
   Le balisage appelait .faq et .faq__a depuis le début, mais la
   feuille n’a jamais porté ces règles : le navigateur rendait
   donc ses <details> bruts, triangle compris, collés à gauche
   sous un titre centré. L’audit ne l’avait pas vu parce que
   <summary> ne figurait pas parmi les cibles tactiles surveillées,
   alors que c’est bel et bien une commande. Les deux sont
   corrigés.
   ══════════════════════════════════════════════════════════ */
.faq{max-width:76ch;margin:clamp(30px,3.8vw,46px) auto 0;display:grid;gap:10px}
.faq details{
  border-radius:var(--r-l);background:var(--paper);
  box-shadow:inset 0 0 0 1px var(--line);overflow:hidden;
  transition:box-shadow .3s var(--ease),background .3s var(--ease);
}
.faq details:hover{box-shadow:inset 0 0 0 1px var(--line-2)}
.faq details[open]{background:var(--white);box-shadow:inset 0 0 0 1px var(--line-2),var(--sh-1)}
.faq summary{
  display:flex;align-items:center;gap:16px;cursor:pointer;list-style:none;
  min-height:60px;padding:15px clamp(16px,2vw,22px);
  font-size:clamp(.95rem,1.05vw,1.02rem);font-weight:500;color:var(--ink);
  line-height:1.45;-webkit-tap-highlight-color:transparent;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary:focus-visible{outline:2px solid var(--navy);outline-offset:-2px;border-radius:var(--r-l)}
/* Le chevron reprend celui de la note de méthode : un seul signe
   d’ouverture sur tout le site. */
.faq summary::after{
  content:'';flex:none;margin-left:auto;width:9px;height:9px;
  border-right:1.8px solid var(--navy);border-bottom:1.8px solid var(--navy);
  transform:rotate(45deg) translate(-2px,-2px);
  transition:transform .32s var(--ease);
}
.faq details[open] summary::after{transform:rotate(225deg) translate(-2px,-2px)}
.faq details[open] summary{color:var(--navy);font-weight:600}
.faq__a{padding:0 clamp(16px,2vw,22px) clamp(16px,2vw,20px)}
.faq__a p{font-size:.9rem;line-height:1.62;color:var(--ink-2);max-width:66ch}
/* La hauteur d’un <details> ne s’anime pas de façon fiable : on
   fait entrer la réponse, sans prétendre déplier la boîte. */
.faq details[open] .faq__a{animation:faqIn .42s var(--ease-soft) both}
@keyframes faqIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  .faq details[open] .faq__a{animation:none}
  .faq summary::after{transition:none}
}

/* ─── le niveau de maturité, et la méthode qui le produit ───
   Un pourcentage seul se lit comme une mesure. Le palier dit ce
   qu’il est : un repère ordinal, sur une échelle à quatre crans
   parce que chaque question en compte quatre. */
.lvl{display:flex;align-items:center;gap:clamp(14px,2vw,22px);
  padding:clamp(16px,2vw,22px);border-radius:var(--r-l);
  background:var(--navy);color:#fff;margin-bottom:16px}
.lvl__n{flex:none;display:flex;flex-direction:column;align-items:center;justify-content:center;
  width:64px;height:64px;border-radius:var(--r-m);background:rgba(255,255,255,.12);line-height:1}
.lvl__n span{font-size:1.7rem;font-weight:600;letter-spacing:-.03em}
.lvl__n small{font-size:.62rem;letter-spacing:.06em;color:rgba(255,255,255,.66);margin-top:4px}
.lvl__t b{display:block;font-size:1.02rem;font-weight:600;letter-spacing:-.02em;margin-bottom:5px}
.lvl__t p{font-size:.845rem;line-height:1.55;color:rgba(255,255,255,.82)}

.meth{margin-top:16px;border-top:1px solid var(--line);padding-top:14px}
.meth summary{cursor:pointer;font-size:.83rem;font-weight:600;color:var(--navy);
  list-style:none;padding:10px 0;min-height:44px;display:flex;align-items:center;gap:7px}
.meth summary::-webkit-details-marker{display:none}
.meth summary::before{content:'';width:7px;height:7px;flex:none;border-right:1.6px solid currentColor;
  border-bottom:1.6px solid currentColor;transform:rotate(-45deg);transition:transform .28s var(--ease)}
.meth[open] summary::before{transform:rotate(45deg)}
.meth__b p{font-size:.82rem;line-height:1.6;color:var(--ink-2);margin-top:9px}
.meth__b b{color:var(--ink);font-weight:600}

/* « non concerné » : un choix à part, qui retire la question du calcul */
.scale button.na{flex:0 0 auto;font-size:.79rem;color:var(--ink-3);
  box-shadow:inset 0 0 0 1.5px var(--line);background:transparent}
.scale button.na.on{background:var(--ink-3);color:#fff;box-shadow:none}
.rad__r--off{opacity:.55}
.rad__off{flex:1;font-size:.74rem;color:var(--ink-3);font-style:italic;text-align:right}

/* ─── reveals ────────────────────────────────────────────── */
.rv{opacity:0;transform:translateY(22px);transition:opacity .8s var(--ease-soft),transform .8s var(--ease-soft)}
.rv.in{opacity:1;transform:none}
.rv-d1{transition-delay:.07s}.rv-d2{transition-delay:.14s}.rv-d3{transition-delay:.21s}
.rv-d4{transition-delay:.28s}.rv-d5{transition-delay:.35s}
html.audit .rv{opacity:1!important;transform:none!important;transition:none!important}
/* transform only. A filter transition is not composited, and animating
   saturate() on a 1500px photo cost three dropped frames per reveal. */
.imgrv{overflow:hidden;position:relative}
.imgrv>img{transform:scale(1.07);transition:transform 1.3s var(--ease-soft)}
.rv.in .imgrv>img,.imgrv.in>img{transform:none}
html.audit .imgrv>img{transform:none!important}

/* ══════════════════════════════════════════════════════════
   HEADER
   ══════════════════════════════════════════════════════════ */
.hd{position:fixed;inset:0 0 auto;z-index:90;
  transition:background .4s var(--ease),box-shadow .4s var(--ease),transform .45s var(--ease)}
.hd__in{display:flex;align-items:center;gap:16px;min-height:74px;padding-block:11px}
.hd.stuck{background:rgba(248,246,242,.93);backdrop-filter:blur(18px) saturate(1.4);
  box-shadow:0 1px 0 var(--line),0 10px 34px rgba(21,20,19,.06)}
.hd.hide{transform:translateY(-102%)}

/* Pages intérieures : fond dès le départ, et la première section
   descend sous l’en-tête fixe. */
body:not(.has-hero) .hd{
  background:rgba(255,255,251,.93);backdrop-filter:blur(18px) saturate(1.4);
  box-shadow:0 1px 0 var(--line);
}
body:not(.has-hero) main>section:first-child{padding-top:calc(var(--sec) + 76px)}

/* L’inversion en blanc ne vaut QUE sur la page d’accueil, seule à
   placer une photo sombre derrière l’en-tête. Ailleurs le fond est
   crème : du blanc y serait invisible. */
.has-hero .hd:not(.stuck) .brand__n{color:#fff}
.has-hero .hd:not(.stuck) .brand__s{color:rgba(255,255,255,.66)}
.has-hero .hd:not(.stuck) .brand img{filter:brightness(0) invert(1)}
.has-hero .hd:not(.stuck) .nav a{color:rgba(255,255,255,.82)}
.has-hero .hd:not(.stuck) .nav a:hover,.has-hero .hd:not(.stuck) .nav a.on{color:#fff;background:rgba(255,255,255,.14)}
.has-hero .hd:not(.stuck) .btn{background:rgba(255,255,255,.14);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.34);backdrop-filter:blur(8px)}
.has-hero .has-hero .hd:not(.stuck) .btn::before{background:#fff}
.has-hero .has-hero .hd:not(.stuck) .btn:hover{color:var(--ink)}
.has-hero .hd:not(.stuck) .burger i{background:#fff}
.brand{display:flex;align-items:center;gap:11px;margin-right:auto;min-height:46px}
.brand img{width:40px;height:auto;flex:none}
.brand__t{display:flex;flex-direction:column;line-height:1.1}
.brand__n{font-family:var(--ff-d);font-size:1.12rem;font-weight:600;letter-spacing:.01em;color:var(--navy)}
.brand__s{font-size:.575rem;letter-spacing:.19em;text-transform:uppercase;color:var(--ink-3);font-weight:600}
.nav{display:flex;align-items:center;gap:1px}
.nav a{position:relative;padding:9px 12px;min-height:44px;display:inline-flex;align-items:center;
  font-size:.885rem;font-weight:500;color:var(--ink-2);border-radius:var(--r-full);
  transition:color .3s var(--ease),background .3s var(--ease)}
.nav a:hover,.nav a.on{color:var(--navy);background:rgba(21,20,19,.07)}
.hd__cta{display:flex;align-items:center;gap:9px}
.burger{display:none;width:46px;height:46px;border:0;background:transparent;cursor:pointer;
  border-radius:var(--r-full);position:relative;-webkit-tap-highlight-color:transparent}
.burger i{position:absolute;left:13px;width:20px;height:2px;background:var(--navy);border-radius:2px;
  transition:transform .4s var(--ease),opacity .25s}
.burger i:nth-child(1){top:17px}.burger i:nth-child(2){top:22.5px}.burger i:nth-child(3){top:28px}
.burger.on i:nth-child(1){transform:translateY(5.5px) rotate(45deg)}
.burger.on i:nth-child(2){opacity:0}
.burger.on i:nth-child(3){transform:translateY(-5.5px) rotate(-45deg)}

.drw{position:fixed;inset:0;z-index:88;background:var(--paper);height:100vh;overflow-y:auto;
  -webkit-overflow-scrolling:touch;opacity:0;visibility:hidden;transform:translateY(-14px);
  transition:opacity .38s var(--ease),transform .42s var(--ease),visibility .42s}
.drw.on{opacity:1;visibility:visible;transform:none}
.drw__in{min-height:100%;display:flex;flex-direction:column;justify-content:center;gap:24px;
  padding:calc(84px + env(safe-area-inset-top)) var(--gut) calc(30px + env(safe-area-inset-bottom))}
.drw__nav{display:flex;flex-direction:column}
.drw__nav a{font-family:var(--ff-d);font-size:clamp(1.35rem,5.6vw,1.85rem);padding:13px 0;min-height:54px;
  display:flex;align-items:center;justify-content:space-between;gap:16px;border-bottom:1px solid var(--line);
  opacity:0;transform:translateY(14px);transition:opacity .45s var(--ease),transform .45s var(--ease)}
.drw.on .drw__nav a{opacity:1;transform:none}
.drw.on .drw__nav a:nth-child(1){transition-delay:.08s}
.drw.on .drw__nav a:nth-child(2){transition-delay:.13s}
.drw.on .drw__nav a:nth-child(3){transition-delay:.18s}
.drw.on .drw__nav a:nth-child(4){transition-delay:.23s}
.drw.on .drw__nav a:nth-child(5){transition-delay:.28s}
.drw.on .drw__nav a:nth-child(6){transition-delay:.33s}
.drw.on .drw__nav a:nth-child(7){transition-delay:.38s}
.drw__nav a>span:last-child{font-size:.68rem;letter-spacing:.15em;color:var(--accent);
  font-family:var(--ff-b);font-weight:700;flex:none}
.drw__f{display:grid;gap:10px;opacity:0;transition:opacity .5s .42s}
.drw.on .drw__f{opacity:1}

/* ══════════════════════════════════════════════════════════
   HERO · pleine largeur, comme sur le site existant
   ══════════════════════════════════════════════════════════ */
.hero{
  position:relative;min-height:min(88vh,780px);display:flex;align-items:flex-end;
  padding:0 0 clamp(52px,7vw,96px);overflow:hidden;background:var(--ink);
}
.hero__bg{position:absolute;inset:0;z-index:0}
.hero__bg img{width:100%;height:100%;object-fit:cover;object-position:center 22%}
.hero__bg::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(21,20,19,.52) 0%,rgba(21,20,19,.34) 38%,rgba(21,20,19,.78) 100%);
}
.hero__g{position:relative;z-index:2;width:100%;text-align:center;padding-top:clamp(96px,12vh,140px)}
.hero h1{margin:0 auto;color:#fff;max-width:min(42ch,100%)}
.hero h1 em{color:rgba(255,255,255,.72)}
.hero__p{margin:20px auto 0;max-width:62ch;color:rgba(255,255,255,.82);font-size:clamp(.97rem,1.1vw,1.06rem);line-height:1.6}
.hero__b{display:flex;flex-wrap:wrap;align-items:center;gap:11px;margin-top:28px;justify-content:center}
.hero .eyebrow{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.24);color:#fff;backdrop-filter:blur(8px)}
.hero .eyebrow svg{color:#fff}
.hero__badge{
  display:inline-flex;align-items:center;gap:12px;margin-top:30px;
  background:rgba(255,255,255,.1);backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.2);border-radius:var(--r-m);padding:12px 18px;
}
.hero__badge b{font-size:1.5rem;color:#fff;font-weight:600;flex:none;letter-spacing:-.03em}
.hero__badge span{font-size:.82rem;line-height:1.35;color:rgba(255,255,255,.75);text-align:left}

/* Les mêmes repères, en note plutôt qu’en bandeau : pas de cadre,
   pas de fond, un filet au-dessus et de petits caractères. */
.facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(16px,2.4vw,34px);margin-top:clamp(34px,4.2vw,52px);
  padding-top:clamp(22px,2.6vw,30px);border-top:1px solid var(--line)}
.facts__i{display:flex;flex-direction:column;gap:3px}
.facts__i b{font-size:1.02rem;font-weight:600;color:var(--ink);letter-spacing:-.02em;line-height:1.25}
.facts__i span{font-size:.79rem;color:var(--ink-3);line-height:1.45}
@media (max-width:760px){ .facts{grid-template-columns:1fr 1fr;gap:18px 20px} }

.hd2{max-width:60ch;margin-inline:auto;text-align:center}
.hd2.center{margin-inline:auto}
.hd2 h2{margin:16px 0 0}
.hd2 .lead{margin-top:14px;margin-inline:auto;max-width:62ch}

/* ══════════════════════════════════════════════════════════
   THREE WAYS
   ══════════════════════════════════════════════════════════ */
.ways{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.8vw,22px);margin-top:clamp(32px,4vw,50px)}
.way{position:relative;display:flex;flex-direction:column;background:var(--white);border-radius:var(--r-l);
  border:1px solid var(--line);box-shadow:none;overflow:hidden;
  transition:transform .42s var(--ease),box-shadow .42s var(--ease)}
.way:hover{transform:translateY(-5px);box-shadow:var(--sh-2)}
.way__ph{aspect-ratio:16/10;overflow:hidden;background:var(--cream)}
.way__ph img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease)}
.way:hover .way__ph img{transform:scale(1.05)}
.way__b{padding:clamp(20px,2.4vw,28px);display:flex;flex-direction:column;flex:1}
.way__n{font-size:.76rem;font-weight:600;color:var(--ink-3);margin-bottom:8px}
.way h3{font-size:1.4rem;margin-bottom:9px}
.way p{font-size:.9rem;color:var(--ink-2);line-height:1.6}
.way__l{margin-top:auto;padding-top:20px;min-height:44px;display:inline-flex;align-items:center;gap:9px;
  font-weight:600;font-size:.9rem;color:var(--navy)}
.way__l i{display:block;width:16px;height:1.6px;background:currentColor;transition:width .3s var(--ease)}
.way:hover .way__l i{width:26px}

/* ══════════════════════════════════════════════════════════
   DIAGNOSTIC
   ══════════════════════════════════════════════════════════ */
.diag{position:relative;background:var(--cream);color:var(--ink);overflow:hidden;border-block:1px solid var(--line)}
.diag::before{display:none}
.diag h2{color:var(--ink)}
.diag .lead{color:var(--ink-2)}
.diag__g{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 380px;
  gap:clamp(20px,2.6vw,34px);align-items:start;margin-top:clamp(30px,4vw,48px)}
.dcard{background:var(--white);color:var(--ink);border-radius:var(--r-l);border:1px solid var(--line);box-shadow:none;
  display:flex;flex-direction:column;overflow:hidden;min-width:0}
.dprog{padding:clamp(18px,2.2vw,24px) clamp(20px,2.6vw,30px) 0}
.dprog__l{list-style:none;margin:0 0 13px;padding:0;display:flex;gap:4px;overflow-x:auto;scrollbar-width:none}
.dprog__l::-webkit-scrollbar{display:none}
.dprog__i{display:flex;align-items:center;gap:7px;flex:none;padding:6px 11px 6px 6px;border-radius:var(--r-full);
  font-size:.76rem;font-weight:600;color:var(--ink-3);white-space:nowrap;
  transition:color .3s var(--ease),background .3s var(--ease)}
.dprog__i b{width:22px;height:22px;border-radius:var(--r-full);flex:none;display:grid;place-items:center;
  font-size:.69rem;font-weight:700;background:var(--cream);color:var(--ink-3);
  transition:background .3s var(--ease),color .3s var(--ease)}
.dprog__i.done{color:var(--navy);cursor:pointer}
.dprog__i.done b{background:rgba(21,20,19,.12);color:var(--navy)}
.dprog__i.on{color:var(--ink);background:rgba(21,20,19,.07)}
.dprog__i.on b{background:var(--navy);color:#fff}
.dprog__t{height:3px;border-radius:2px;background:var(--cream);overflow:hidden}
.dprog__t i{display:block;height:100%;border-radius:2px;
  background:linear-gradient(90deg,var(--navy),var(--accent));transition:width .5s var(--ease)}

.dpanes{padding:clamp(22px,2.6vw,30px) clamp(20px,2.6vw,30px);flex:1}
.dpane{animation:paneIn .42s var(--ease-soft) both}
.dpane[hidden]{display:none}
@keyframes paneIn{0%{opacity:0;transform:translateY(9px)}100%{opacity:1;transform:none}}
html.audit .dpane{animation:none}
.dpane__h{font-size:clamp(1.3rem,2.2vw,1.7rem);margin-bottom:8px}
.dpane__s{font-size:.9rem;color:var(--ink-2);line-height:1.58;margin-bottom:22px;max-width:52ch}

.q{padding:16px 0;border-top:1px solid var(--line)}
.q:first-of-type{border-top:0;padding-top:0}
.q__t{font-weight:600;font-size:.96rem;line-height:1.45;margin-bottom:12px}
.scale{display:flex;flex-wrap:wrap;gap:7px}
.scale button{
  flex:1 1 auto;min-width:0;min-height:46px;padding:10px 12px;border:0;cursor:pointer;
  border-radius:var(--r-m);background:var(--paper);box-shadow:inset 0 0 0 1.5px var(--line);
  font-size:.845rem;font-weight:500;color:var(--ink-2);
  transition:box-shadow .24s var(--ease),background .24s var(--ease),color .24s var(--ease);
  -webkit-tap-highlight-color:transparent;
}
.scale button:hover{box-shadow:inset 0 0 0 1.5px var(--navy-l);color:var(--ink)}
.scale button.on{background:var(--navy);color:#fff;box-shadow:none;font-weight:600}

.dnav{display:flex;align-items:center;gap:12px;padding:16px clamp(20px,2.6vw,30px);
  border-top:1px solid var(--line);background:var(--white)}
.dnav [hidden]{display:none}
.dcount{margin-left:auto;text-align:right;line-height:1.15}
.dcount span{display:block;font-size:.66rem;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3)}
.dcount strong{font-family:var(--ff-d);font-size:1.2rem;font-weight:500;color:var(--navy)}

/* radar */
.rad{position:sticky;top:96px;background:var(--white);border-radius:var(--r-l);
  padding:clamp(20px,2.4vw,26px);border:1px solid var(--line)}
.rad__t{font-size:.7rem;letter-spacing:.02em;color:var(--ink-3);margin-bottom:4px;font-weight:600}
.rad__sc{font-size:2.6rem;line-height:1;color:var(--ink);font-weight:600;letter-spacing:-.04em}
.rad__sc small{font-size:.4em;color:var(--ink-3);margin-left:4px;font-weight:500}
/* the viewBox carries a horizontal margin so the axis labels have room,
   and the chart is capped so it never scales to an absurd size on a tablet */
.rad svg{display:block;width:100%;max-width:340px;height:auto;margin:14px auto 6px}
.rad .grid{fill:none;stroke:rgba(21,20,19,.12);stroke-width:1}
.rad .axis{stroke:rgba(21,20,19,.14);stroke-width:1}
.rad .shape{fill:rgba(31,58,95,.16);stroke:var(--navy);stroke-width:2;stroke-linejoin:round;
  transition:d .5s var(--ease)}
.rad .pt{fill:var(--navy)}
.rad .lbl{fill:var(--ink-2);font-size:9.5px;font-family:var(--ff);font-weight:600}
.rad__l{display:grid;gap:0;margin-top:12px}
.rad__r{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--line);font-size:.82rem}
.rad__r:last-child{border-bottom:0}
.rad__r span:first-child{flex:1;color:var(--ink-2)}
.rad__bar{width:64px;height:5px;border-radius:3px;background:var(--tint);overflow:hidden;flex:none}
.rad__bar i{display:block;height:100%;border-radius:3px;background:var(--navy);transition:width .5s var(--ease)}
.rad__r b{width:38px;text-align:right;font-variant-numeric:tabular-nums;color:var(--ink);font-weight:600}
.rad__f{margin-top:14px;font-size:.75rem;color:var(--ink-3);line-height:1.5}

/* result */
.res__hi{display:grid;gap:12px;margin:20px 0}
.res__c{display:flex;gap:14px;align-items:flex-start;padding:16px 18px;border-radius:var(--r-m);background:var(--tint)}
.res__c svg{width:20px;height:20px;flex:none;margin-top:2px}
.res__c--up svg{color:#2f7d5c}
.res__c--work svg{color:var(--navy)}
.res__c b{display:block;font-size:.94rem;margin-bottom:3px}
.res__c p{font-size:.865rem;color:var(--ink-2);line-height:1.55}
.dsend{display:grid;gap:10px;margin-top:20px}
.dnote{margin-top:18px;padding:14px 16px;border-radius:var(--r-m);background:var(--cream);
  font-size:.82rem;line-height:1.55;color:var(--ink-2)}

/* ══════════════════════════════════════════════════════════
   DOMAINS · offers
   ══════════════════════════════════════════════════════════ */
.dom{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr));
  gap:clamp(14px,1.8vw,20px);margin-top:clamp(32px,4vw,48px)}
.dom__c{background:var(--tint);border-radius:var(--r-l);padding:clamp(22px,2.4vw,28px);
  border:1px solid var(--line);box-shadow:none;display:flex;flex-direction:column;
  transition:transform .42s var(--ease),box-shadow .42s var(--ease)}
.dom__c:hover{transform:translateY(-4px);box-shadow:var(--sh-2)}
.dom__ic{width:40px;height:40px;border-radius:var(--r-m);background:rgba(21,20,19,.07);
  display:grid;place-items:center;color:var(--navy);margin-bottom:15px;flex:none}
.dom__ic svg{width:21px;height:21px}
.dom__c h3{font-size:1.12rem;margin-bottom:9px;letter-spacing:-.02em}
.dom__c p{font-size:.885rem;color:var(--ink-2);line-height:1.6}

.split{display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(28px,4.4vw,60px);align-items:start}
.split__ph{border-radius:var(--r-l);overflow:hidden;box-shadow:none;aspect-ratio:4/3}
.split__ph--port{aspect-ratio:4/5;max-width:340px;margin-inline:auto;position:sticky;top:104px}
.about .split{align-items:start}
.about .split>div:first-child{padding-top:2px}
.about .d2{font-size:clamp(1.7rem,3vw,2.5rem)}
.split__ph img{width:100%;height:100%;object-fit:cover}
.split--rev .split__ph{order:2}
.split--mid{align-items:center}
.ul{display:grid;gap:12px;margin-top:22px;padding:0;list-style:none}
.ul li{display:flex;gap:12px;align-items:flex-start;font-size:.92rem;line-height:1.55;color:var(--ink-2)}
.ul svg{width:19px;height:19px;flex:none;color:var(--navy);margin-top:2px}
.ul b{color:var(--ink);font-weight:600}

/* rhythm cards */
.ryt{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.8vw,20px);margin-top:clamp(30px,3.6vw,44px)}
.ryt__c{position:relative;background:var(--white);border-radius:var(--r-l);padding:clamp(22px,2.5vw,30px);
  border:1px solid var(--line);box-shadow:none;display:flex;flex-direction:column}
.ryt__c--hl{background:linear-gradient(170deg,rgba(31,58,95,.1),var(--white) 58%);border-color:rgba(31,58,95,.42)}
.ryt__tag{position:absolute;top:18px;right:18px;font-size:.62rem;font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;color:#fff;background:var(--navy);padding:6px 11px;border-radius:var(--r-full)}
.ryt__c h3{font-size:1.26rem;margin-bottom:6px}
.ryt__vol{font-size:.84rem;color:var(--ink-3);margin-bottom:16px}
.ryt__p{font-family:var(--ff-d);font-size:2.1rem;line-height:1;color:var(--navy)}
.ryt__p small{font-size:.42em;font-family:var(--ff-b);color:var(--ink-3);font-weight:600;margin-left:4px}
.ryt__day{font-size:.8rem;color:var(--ink-2);margin-top:7px}
.ryt__d{font-size:.885rem;color:var(--ink-2);line-height:1.6;margin-top:16px;padding-top:16px;border-top:1px solid var(--line)}
.ryt__l{list-style:none;padding:0;margin:16px 0 0;display:grid;gap:9px}
.ryt__l li{display:flex;gap:9px;align-items:flex-start;font-size:.85rem;line-height:1.5;color:var(--ink-2)}
.ryt__l li::before{content:'';flex:none;width:6px;height:6px;margin-top:7px;border-radius:var(--r-full);background:var(--navy)}

/* tarifs */
.tar{background:var(--white);border-radius:var(--r-xl);border:1px solid var(--line);box-shadow:var(--sh-1);
  overflow:hidden;margin-top:clamp(30px,3.6vw,44px)}
.tar__r{display:flex;justify-content:space-between;align-items:baseline;gap:18px;
  padding:16px clamp(20px,2.4vw,28px);border-top:1px solid var(--line)}
.tar__r:first-child{border-top:0}
.tar__r span{font-size:.95rem}
.tar__r em{display:block;font-size:.79rem;color:var(--ink-3);font-style:normal;margin-top:2px}
.tar__r b{font-weight:700;color:var(--navy);white-space:nowrap;font-variant-numeric:tabular-nums;font-size:1rem}
.tar__note{padding:16px clamp(20px,2.4vw,28px);background:var(--cream);font-size:.83rem;
  line-height:1.56;color:var(--ink-2)}
.info__b{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:15px}

.offer{display:block;margin-top:26px;padding:22px 24px;
  border-radius:var(--r-l);background:var(--white);border:1px solid var(--line)}
.offer svg{width:22px;height:22px;flex:none;color:var(--navy);margin-top:1px}
.offer b{display:block;color:var(--ink);margin-bottom:6px;font-size:1.05rem;font-weight:600;letter-spacing:-.02em}
.offer p{font-size:.87rem;color:var(--ink-2);line-height:1.55}

/* ─── steps : une ligne qui avance vraiment ──────────────────
   La section s’appelle « Une façon simple d’avancer ». La ligne
   avance donc pour de bon, au rythme du défilement, et chaque
   étape s’allume au moment où elle est atteinte. Tout se joue
   sur transform et opacity : le compositeur s’en charge seul,
   rien n’est repeint, rien ne saccade sur un téléphone.
   Sans script, tout reste lisible : l’état masqué n’existe que
   sous .anim, que le script est seul à poser.
   ───────────────────────────────────────────────────────────── */
.steps{position:relative;display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(18px,2.4vw,32px);margin-top:clamp(36px,4.4vw,54px);counter-reset:s}
.steps__rail{position:absolute;left:0;right:0;top:0;height:1px;
  background:var(--line);pointer-events:none;overflow:hidden}
.steps__rail i{display:block;width:100%;height:100%;background:var(--navy);
  transform:scaleX(var(--p,0));transform-origin:0 50%}
.steps__i{position:relative;padding-top:42px}
.steps__i::before{counter-increment:s;content:counter(s,decimal-leading-zero);
  position:absolute;top:17px;left:0;font-family:var(--ff-d);font-size:.86rem;
  letter-spacing:.09em;color:rgba(21,20,19,.32);transition:color .6s var(--ease)}
.steps__i::after{content:'';position:absolute;top:0;left:0;width:7px;height:7px;
  margin:-3px 0 0 -3px;border-radius:var(--r-full);background:var(--line-2);
  transform:scale(.55);transition:transform .55s var(--ease),background .55s var(--ease)}
.steps__i.lit::before{color:var(--navy)}
.steps__i.lit::after{background:var(--navy);transform:scale(1)}
.steps__i h3{font-size:1.1rem;margin-bottom:8px}
.steps__i p{font-size:.88rem;color:var(--ink-2);line-height:1.58}
.steps.anim .steps__i h3,.steps.anim .steps__i p{opacity:0;transform:translateY(15px);
  transition:opacity .78s var(--ease-soft),transform .78s var(--ease-soft)}
.steps.anim .steps__i.lit h3{transition-delay:.06s}
.steps.anim .steps__i.lit p{transition-delay:.15s}
.steps.anim .steps__i.lit h3,.steps.anim .steps__i.lit p{opacity:1;transform:none}

/* ─── titre dont les mots se lèvent derrière une ligne de coupe ─
   La boîte de découpe descend plus bas que la ligne de base, sinon
   elle rogne les jambages : le p de « simple » et la cédille de
   « façon » y laissaient leur queue. Le remplissage est repris à
   l’identique en marge négative, si bien que la boîte de marge
   garde exactement sa hauteur d’origine et que rien ne bouge
   autour. Le mot part d’assez bas pour ne jamais dépasser.
   ───────────────────────────────────────────────────────────── */
.wsplit .wr{display:inline-block;overflow:hidden;vertical-align:top;
  padding-bottom:.2em;margin-bottom:-.2em}
.wsplit .wr>i{display:inline-block;font-style:normal;transform:translateY(128%);
  transition:transform .9s cubic-bezier(.19,1,.22,1)}
.wsplit.lit .wr>i{transform:none}
html.audit .wsplit .wr>i{transform:none!important;transition:none!important}
html.audit .steps__i h3,html.audit .steps__i p{opacity:1!important;transform:none!important}
html.audit .steps__rail i{transform:none!important}

/* about */
.about{background:var(--cream)}
.cv{display:grid;gap:0;margin-top:26px}
.cv__r{display:grid;grid-template-columns:132px 1fr;gap:20px;padding:15px 0;border-top:1px solid var(--line)}
.cv__r:first-child{border-top:0}
.cv__y{font-family:var(--ff-d);font-size:.92rem;color:var(--navy);font-weight:500}
.cv__d{font-size:.91rem;color:var(--ink-2);line-height:1.55}
.cv__d b{color:var(--ink);font-weight:600}
.quote{margin:0;font-family:var(--ff-d);font-size:clamp(1.1rem,1.75vw,1.44rem);line-height:1.48;letter-spacing:-.01em}
.sig{display:flex;align-items:center;gap:14px;margin-top:24px}
.sig .ln{width:34px;height:1px;background:var(--accent);flex:none}
.sig .nm{font-family:var(--ff-d);font-size:1.18rem}
.sig .rl{font-size:.8rem;color:var(--ink-2)}

/* contact */
.ct{background:var(--navy);color:#fff}
.ct h2{color:#fff}
.ct .lead{color:rgba(255,255,255,.72)}
.ct__g{display:grid;grid-template-columns:.88fr 1.12fr;gap:clamp(26px,4vw,54px);align-items:start;margin-top:clamp(30px,4vw,48px)}
.ct__i{display:grid;gap:12px}
.ct__c{background:rgba(255,255,255,.06);border-radius:var(--r-l);padding:20px 22px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}
.ct__c b{display:flex;align-items:center;gap:9px;font-size:.68rem;letter-spacing:.15em;text-transform:uppercase;
  color:rgba(255,255,255,.6);font-weight:700;margin-bottom:9px}
.ct__c b svg{width:17px;height:17px;color:var(--navy-l)}
.ct__c .v{font-family:var(--ff-d);font-size:1.2rem;line-height:1.34}
.ct__c .v a{display:inline-flex;align-items:center;min-height:44px}
.ct__c .v a:hover{color:var(--navy-l)}
.ct__c p{font-size:.84rem;color:rgba(255,255,255,.62);margin-top:5px;line-height:1.5}
.form{background:var(--white);color:var(--ink);border-radius:var(--r-xl);padding:clamp(22px,2.8vw,34px);box-shadow:var(--sh-3)}
.fg{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.fld{margin-bottom:14px}
.fld--full{grid-column:1/-1}
.fld label{display:block;font-weight:600;font-size:.875rem;margin-bottom:7px}
.fld input,.fld textarea,.fld select{
  width:100%;min-height:52px;padding:13px 15px;border-radius:var(--r-m);background:var(--paper);border:0;
  box-shadow:inset 0 0 0 1.5px var(--line);font-size:1rem;
  transition:box-shadow .28s var(--ease),background .28s var(--ease);-webkit-appearance:none;appearance:none}
.fld textarea{min-height:112px;resize:vertical;line-height:1.55;font-family:var(--ff-b)}
.fld input:focus,.fld textarea:focus,.fld select:focus{outline:0;background:var(--white);box-shadow:inset 0 0 0 2px var(--navy)}
.fld input.bad,.fld textarea.bad{box-shadow:inset 0 0 0 2px #b4544f}
.fld .hint{display:block;margin-top:7px;font-size:.78rem;color:var(--ink-3);line-height:1.5}
.fsel{position:relative}
.fsel::after{content:'';position:absolute;right:16px;top:50%;width:8px;height:8px;margin-top:-6px;
  border-right:2px solid var(--ink-3);border-bottom:2px solid var(--ink-3);transform:rotate(45deg);pointer-events:none}

/* footer */
.ft{background:var(--navy-d);color:rgba(255,255,255,.78);padding-block:clamp(48px,6vw,74px) 26px}
.ft__g{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:clamp(26px,4vw,52px)}
.ft img{width:52px;margin-bottom:16px}
.ft h3{color:#fff;font-size:1.16rem;margin-bottom:11px}
.ft p{font-size:.87rem;line-height:1.62;max-width:36ch}
.ft__t{font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.72);
  margin-bottom:12px;font-weight:700}
.ft__l{display:grid}
.ft__l a{font-size:.88rem;padding:10px 0;min-height:44px;display:flex;align-items:center;transition:color .3s}
.ft__l a:hover{color:#fff}
.ft__b{display:flex;flex-wrap:wrap;gap:12px 26px;justify-content:space-between;align-items:center;
  margin-top:clamp(32px,5vw,54px);padding-top:22px;border-top:1px solid rgba(255,255,255,.12);
  font-size:.78rem;color:rgba(255,255,255,.7)}
.ft__b a{display:inline-flex;align-items:center;min-height:44px}
.ft__b a:hover{color:#fff}

/* mobile bar + toast */
.bar{position:fixed;left:0;right:0;bottom:0;z-index:80;display:none;gap:10px;
  padding:11px var(--gut) calc(11px + env(safe-area-inset-bottom));background:var(--paper);
  box-shadow:0 -1px 0 var(--line),0 -12px 32px rgba(21,20,19,.1);
  transform:translateY(115%);transition:transform .45s var(--ease)}
.bar.on{transform:none}
.bar .btn{flex:1;min-height:50px;padding:12px 12px;font-size:.9rem;white-space:nowrap}
.toast{position:fixed;left:50%;bottom:calc(24px + var(--barh));z-index:95;transform:translate(-50%,14px);
  opacity:0;visibility:hidden;pointer-events:none;background:var(--ink);color:#fff;border-radius:var(--r-full);
  padding:13px 22px;font-size:.86rem;box-shadow:var(--sh-3);max-width:calc(100vw - 32px);text-align:center;
  transition:opacity .3s var(--ease),transform .42s var(--ease),visibility .42s}
.toast:empty{display:none}
.toast.on{opacity:1;visibility:visible;transform:translate(-50%,0)}

/* legal pages */
.legal{max-width:820px;margin-inline:auto;padding-top:clamp(104px,13vh,150px)}
.legal h1{font-size:clamp(2rem,4vw,3rem);margin-bottom:8px}
.legal .upd{font-size:.85rem;color:var(--ink-3);margin-bottom:34px}
.legal h2{font-size:clamp(1.3rem,2.2vw,1.7rem);margin:44px 0 14px;padding-top:22px;border-top:1px solid var(--line)}
.legal h3{font-size:1.08rem;margin:26px 0 9px}
.legal p{margin-bottom:13px;color:var(--ink-2);line-height:1.72;font-size:.95rem}
.legal ul{margin:0 0 15px;padding-left:20px;color:var(--ink-2);line-height:1.72;font-size:.95rem}
.legal li{margin-bottom:7px}
.legal b,.legal strong{color:var(--ink)}
.legal a{color:var(--navy);text-decoration:underline;text-underline-offset:2px}
.legal a:hover{color:var(--navy)}
.legal table{width:100%;border-collapse:collapse;margin-bottom:18px;font-size:.9rem}
.legal th,.legal td{text-align:left;padding:11px 12px;border-bottom:1px solid var(--line);vertical-align:top}
.legal th{font-weight:700;color:var(--ink);background:var(--cream)}
.legal td{color:var(--ink-2)}
.idcard{background:var(--white);border-radius:var(--r-l);border:1px solid var(--line);
  padding:20px 22px;margin-bottom:18px;box-shadow:var(--sh-1)}
.idcard dl{display:grid;grid-template-columns:auto 1fr;gap:9px 20px;margin:0;font-size:.92rem}
.idcard dt{color:var(--ink-3);font-weight:600}
.idcard dd{margin:0;color:var(--ink)}
/* a phone or address link standing alone in a <dd> is a real target,
   not a link inside a sentence, so it gets a real hit area */
.idcard dd a,.legal li>a:only-child{display:inline-flex;align-items:center;min-height:44px}

/* ══════════════════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════════════════ */
@media (max-width:1180px){ .diag__g{grid-template-columns:minmax(0,1fr) 330px} }
@media (max-width:1024px){
  .nav a{padding:9px 9px;font-size:.85rem}
  .ways{grid-template-columns:1fr 1fr}
  .ways .way:last-child{grid-column:1/-1}
  .ryt{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr;gap:clamp(24px,4vw,32px);padding-left:28px}
  .steps__rail{left:0;right:auto;top:5px;bottom:5px;width:1px;height:auto}
  .steps__rail i{width:100%;height:100%;transform:scaleY(var(--p,0));transform-origin:50% 0}
  .steps__i{padding-top:26px}
  .steps__i::before{top:0;left:0}
  .steps__i::after{top:7px;left:-28px;margin:-3px 0 0 -3px}
}
@media (max-width:960px){
  .nav{display:none}
  .burger{display:block}
  .hd__cta .btn{display:none}
  .hero__g,.split,.ct__g,.diag__g{grid-template-columns:1fr}
  .hero__ph{order:-1;max-width:460px;margin-inline:auto;width:100%}
  .hero__ph .fr{aspect-ratio:5/4}
  .split--rev .split__ph{order:-1}
  .split__ph{max-width:520px;margin-inline:auto;width:100%}
  .rad{position:static;order:-1;margin-bottom:16px}
  .ft__g{grid-template-columns:1fr 1fr}
  .ft__g>div:first-child{grid-column:1/-1}
  .bar{display:flex}
  body{--barh:78px}
}
@media (max-width:760px){
  body{font-size:16.5px}
  .ways{grid-template-columns:1fr}
  .ways .way:last-child{grid-column:auto}
  .hero__badge{left:0;right:0;bottom:-16px;max-width:none;margin-inline:auto;width:max-content}
  .cv__r{grid-template-columns:1fr;gap:4px}
  .fg{grid-template-columns:1fr}
}
@media (max-width:600px){
  .ft__g{grid-template-columns:1fr}
  .ft__b{justify-content:flex-start}
  .dcard{border-radius:var(--r-l)}
  .dprog{padding-inline:18px}
  .dpanes{padding:22px 18px}
  .dnav{padding:14px 18px}
  .scale button{flex:1 1 100%}
  .form{padding:22px 18px}
  .legal table,.legal thead,.legal tbody,.legal tr,.legal th,.legal td{display:block}
  .legal th{border:0}
  .legal td{border-bottom:1px solid var(--line);padding-left:0}
  .idcard dl{grid-template-columns:1fr;gap:2px 0}
  .idcard dd{margin-bottom:9px}
}
@media (max-width:430px){
  .bar{gap:8px}
  .bar .btn{padding:12px 10px;font-size:.85rem;gap:7px}
  .bar .btn svg{width:16px;height:16px}
}
@media (max-width:420px){
  .brand img{width:34px}
  .brand__n{font-size:1rem}
  .brand__s{display:none}
  .hd__in{gap:10px;min-height:68px}
  .burger{width:44px;height:44px}
  .burger i{left:12px}
}
@supports (height:100dvh){ .drw{height:100dvh} }

@media (prefers-reduced-motion:reduce){
  .steps__rail i{transform:none}
  .steps__i::before{color:var(--navy)}
  .steps__i::after{background:var(--navy);transform:scale(1)}
  .wsplit .wr>i{transform:none}
  html:not(.audit){scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important}
  .rv{opacity:1;transform:none}
  .imgrv>img{transform:none;filter:none}
}
@media print{
  .ld,.hd,.bar,.drw,.toast{display:none!important}
  body{background:#fff;padding-bottom:0}
}

/* ══════════════════════════════════════════════════════════
   BANDEAU COOKIES
   Ce n'est pas une demande de consentement : le site n'en a
   pas besoin, faute de traceur. C'est une information, et
   elle se referme définitivement.
   ══════════════════════════════════════════════════════════ */
.ck{
  position:fixed;left:var(--gut);bottom:calc(16px + var(--barh));z-index:96;
  max-width:min(430px,calc(100vw - var(--gut)*2));
  display:flex;align-items:flex-start;gap:14px;
  background:var(--white);border:1px solid var(--line-2);border-radius:var(--r-m);
  padding:16px 18px;box-shadow:var(--sh-2);
  opacity:0;transform:translateY(10px);transition:opacity .4s var(--ease),transform .4s var(--ease);
}
.ck.on{opacity:1;transform:none}
.ck[hidden]{display:none}
.ck p{font-size:.82rem;line-height:1.5;color:var(--ink-2)}
.ck b{color:var(--ink);font-weight:600}
.ck a{color:var(--navy);text-decoration:underline;text-underline-offset:2px}
.ck button{
  flex:none;min-height:38px;padding:0 14px;border:0;cursor:pointer;border-radius:var(--r-s);
  background:var(--navy);color:#fff;font-weight:600;font-size:.8rem;font-family:var(--ff);
}
.ck button:hover{background:var(--navy-d)}
@media (max-width:560px){
  .ck{left:12px;right:12px;max-width:none;flex-direction:column;gap:10px}
  .ck button{width:100%;min-height:44px}
}

/* ══════════════════════════════════════════════════════════
   AGENDA CAL.COM
   Chargé seulement sur demande : tant que le visiteur ne
   clique pas, aucune requête ne part vers un service tiers.
   ══════════════════════════════════════════════════════════ */
.cal{margin-top:clamp(28px,3.4vw,42px);background:var(--white);border:1px solid var(--line);
  border-radius:var(--r-l);overflow:hidden}
.cal__ask{padding:clamp(26px,3.4vw,44px);text-align:center;max-width:56ch;margin-inline:auto}
.cal__ask p{font-size:.92rem;line-height:1.6;color:var(--ink-2)}
.cal__ask b{color:var(--ink);font-weight:600}
.cal__b{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:10px;margin-top:20px}
.cal iframe{width:100%;min-height:660px;border:0;display:block}
@media (max-width:600px){ .cal iframe{min-height:560px} .cal__b .btn{width:100%} }

/* ══════════════════════════════════════════════════════════
   GARDE : L’ICÔNE D’UN BOUTON N’APPARTIENT QU’AU BOUTON
   Les blocs de section (.offer, .ul, .res__c…) donnent une
   taille et une couleur à leurs propres icônes. Un bouton
   posé à l’intérieur de l’un d’eux héritait de ces règles :
   sur « Réserver un créneau », l’icône passait en navy sur
   un fond navy, donc invisible, et il ne restait qu’un vide
   inexpliqué à gauche du texte. Ce bloc ferme la porte, une
   fois pour toutes, en se plaçant après tous les autres.
   ══════════════════════════════════════════════════════════ */
.btn svg{width:18px;height:18px;flex:none;display:block;margin:0;color:inherit}
.btn--sm svg{width:17px;height:17px}

/* ══════════════════════════════════════════════════════════
   MESSAGE PRÊT
   Un lien mailto: ne fait rien du tout sur un poste où aucune
   messagerie n’est déclarée, et c’est fréquent : le visiteur
   clique, la page ne bouge pas, le message est perdu et
   personne ne s’en aperçoit. On ne parie plus dessus. Le
   message composé est montré, copiable d’un seul geste, avec
   l’adresse en clair ; ouvrir la messagerie n’est plus qu’une
   commodité parmi d’autres, à côté du téléphone.
   ══════════════════════════════════════════════════════════ */
.ready{border-radius:var(--r-l);background:var(--paper);box-shadow:inset 0 0 0 1.5px var(--line)}
.form .ready{margin-top:2px}
.ready__h{display:flex;align-items:center;gap:11px;padding:clamp(18px,2.2vw,24px) clamp(18px,2.4vw,26px) 0}
.ready__h svg{width:22px;height:22px;flex:none;color:#2f7d5c}
.ready__h b{font-size:1.06rem;font-weight:600;color:var(--ink);letter-spacing:-.02em}
.ready__s{margin:9px clamp(18px,2.4vw,26px) 0;font-size:.87rem;line-height:1.58;color:var(--ink-2)}
.ready__to{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 10px;
  margin:16px clamp(18px,2.4vw,26px) 0;padding:11px 14px;border-radius:var(--r-m);background:var(--cream)}
.ready__to span{font-size:.76rem;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-3);font-weight:600}
.ready__to strong{font-size:.95rem;font-weight:600;color:var(--navy);word-break:break-all}
.ready__b{margin:12px clamp(18px,2.4vw,26px) 0;padding:14px 15px;max-height:min(48vh,300px);overflow:auto;
  border-radius:var(--r-m);background:var(--cream);font-family:var(--ff);font-size:.83rem;
  line-height:1.62;color:var(--ink-2);white-space:pre-wrap;word-break:break-word;
  -webkit-overflow-scrolling:touch;overscroll-behavior:contain}
.ready__a{display:flex;flex-wrap:wrap;gap:10px;padding:16px clamp(18px,2.4vw,26px) 0}
.ready__a .btn{flex:1 1 210px}
.ready__a .btn--quiet{flex:0 0 auto}
.ready__f{margin:0;padding:14px clamp(18px,2.4vw,26px) clamp(18px,2.2vw,24px);
  font-size:.81rem;line-height:1.55;color:var(--ink-3)}
.ready__f a{color:var(--navy);font-weight:600;text-decoration:underline;text-underline-offset:2px}
@media (max-width:520px){ .ready__a .btn{flex:1 1 100%} }