/* ============================================================
   Danick Rouleau
   Direction : fond quasi noir, typographie XXL en dégradé orange,
   listes numérotées à visuel collant, cadre fin.
   ============================================================ */

/* ---------- 1. TOKENS ---------- */
:root{
  --marine:#0D1426;
  --marine-2:#121B31;
  --marine-3:#1A2542;
  --void:#0D1426;
  --orange:#fb3402;--orange-hi:#ff5a30;--orange-dk:#d92a00;
  --cream:#F4F1EB;--cream-2:#EAE5DA;
  --ink:#0D1426;--ink-soft:#515A6E;--ink-faint:#7A8296;
  --on-dark:#EFEBE2;--on-dark-soft:#97A0B4;--on-dark-faint:#6B7488;
  --line-dark:rgba(255,255,255,.10);
  --line-light:rgba(13,20,38,.13);
  --grad:linear-gradient(96deg,var(--orange-hi) 0%,var(--orange) 42%,var(--orange-dk) 100%);
  --grad-edge:linear-gradient(120deg,rgba(251,52,2,.65),rgba(255,90,48,.25) 40%,rgba(251,52,2,.55));

  --f-display:'Archivo',system-ui,sans-serif;
  --f-body:'Archivo',system-ui,sans-serif;

  --wrap:1240px;
  --gut:clamp(18px,4vw,58px);
  --sec:clamp(76px,10vw,140px);
  --r:6px;
  --ease:cubic-bezier(.3,.7,.4,1);
}

/* ---------- 2. RESET ---------- */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--marine);color:var(--on-dark);font-family:var(--f-body);font-size:18px;line-height:1.62;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:clip}
img{display:block;max-width:100%}
a{color:var(--orange);text-decoration:none}
a:hover{color:var(--orange-hi)}
h1,h2,h3,h4{margin:0;font-family:var(--f-display);font-weight:900;line-height:1.0;letter-spacing:-.025em;text-transform:uppercase;text-wrap:balance}
p{margin:0 0 1.05em;text-wrap:pretty}
p:last-child{margin-bottom:0}
::selection{background:var(--orange);color:#fff}
.wrap{max-width:var(--wrap);margin:0 auto;padding-inline:var(--gut)}
.skip{position:absolute;left:-9999px;top:0;background:var(--orange);color:#fff;padding:12px 18px;z-index:300;font-size:14px;font-weight:700}
.skip:focus{left:12px;top:12px;color:#fff}
:focus-visible{outline:2px solid var(--orange);outline-offset:3px}

/* ---------- 3. TYPE ---------- */
.t-hero{font-size:clamp(34px,5vw,64px);line-height:.98;letter-spacing:-.028em}
.t-h2{font-size:clamp(25px,2.8vw,38px);line-height:1.08;letter-spacing:-.018em}
.t-h3{font-size:clamp(21px,2.1vw,28px);letter-spacing:-.01em}
.lede{font-size:clamp(17.5px,1.4vw,20.5px);line-height:1.62;color:var(--on-dark-soft);font-weight:400}
strong,b{font-weight:700;color:var(--on-dark)}
.hl{color:var(--orange)}

/* le mot-promesse, en dégradé */
.o{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;
  background-size:220% 100%;background-position:0% 50%}
@media(prefers-reduced-motion:no-preference){.o{animation:gradShift 9s ease-in-out infinite alternate}}
@keyframes gradShift{to{background-position:100% 50%}}

/* sur-titre */
.tag{font-family:var(--f-display);font-weight:700;font-size:12.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--on-dark-faint);display:inline-flex;align-items:center;gap:11px;width:fit-content;line-height:1.5}
.tag::before{content:"";width:22px;height:1px;background:var(--orange);flex:none}
.hero .tag{font-size:11px;letter-spacing:.16em;white-space:nowrap;gap:9px}
.hero .tag::before{width:18px}
@media(max-width:520px){.hero .tag{font-size:11px;letter-spacing:.12em;white-space:normal;line-height:1.6}}
.tag--mut{color:var(--on-dark-faint)}
.tag--bare::before{display:none}

/* ---------- 4. SECTIONS CLAIRES / SOMBRES ---------- */
.sec{padding-block:var(--sec);position:relative}
.sec--dark{background:var(--marine)}
/* Sections sans modificateur et .sec--tint : CLAIRES.
   On rebascule les variables, cartes et filets suivent tout seuls. */
.sec:not(.sec--dark),.sec--tint{
  --on-dark:var(--ink);--on-dark-soft:var(--ink-soft);--on-dark-faint:var(--ink-faint);
  --line-dark:var(--line-light);--marine:var(--cream);--marine-2:var(--cream-2);--marine-3:var(--cream-2);
  background:var(--cream);color:var(--ink)}
.sec--tint{background:var(--cream-2)}
.sec--tint .card{background:var(--cream)}
.sec--ruled{}
.sechead{max-width:26ch}
.sechead .tag{margin-bottom:20px}
.sechead .lede{margin-top:24px;max-width:50ch}
.rule{height:1px;background:var(--line-dark);border:0;margin:0}

/* ---------- 5. GRILLE ASYMÉTRIQUE ---------- */
.spread{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:clamp(30px,5vw,80px)}
.spread--flip{grid-template-columns:minmax(0,1fr) minmax(0,1.55fr)}
.spread__margin{align-self:start;position:sticky;top:104px}
.margin-note{border-left:1px solid var(--orange);padding:2px 0 2px 18px;margin-bottom:28px;position:relative;--gx:50%;--gy:50%}
.margin-note:last-child{margin-bottom:0}
.margin-note p{font-size:16px;line-height:1.6;color:var(--on-dark-soft);margin:9px 0 0}
.margin-note--mut{border-left-color:var(--line-dark)}
@media(max-width:900px){
  .spread,.spread--flip{grid-template-columns:1fr;gap:34px}
  .spread__margin{position:static}
}

/* ---------- 6. BOUTONS ---------- */
.btn{font-family:var(--f-display);font-weight:800;font-size:14.5px;letter-spacing:.08em;text-transform:uppercase;display:inline-flex;align-items:center;gap:11px;padding:17px 28px;border:0;border-radius:var(--r);background:var(--grad);color:#fff;cursor:pointer;line-height:1;white-space:nowrap;position:relative;overflow:hidden;isolation:isolate;--bx:50%;--by:50%;transition:transform .18s var(--ease),box-shadow .22s}
.btn:hover{color:#fff;transform:translateY(-2px);box-shadow:0 16px 40px -14px rgba(251,52,2,.8)}
.btn:active{transform:translateY(0)}
.btn::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;border-radius:inherit;background:radial-gradient(120px 120px at var(--bx) var(--by),rgba(255,255,255,.4),transparent 60%);opacity:0;transition:opacity .25s}
.btn:hover::before{opacity:1}
.btn--lg{padding:21px 36px;font-size:16.5px}
.btn--out{background:transparent;color:var(--on-dark);box-shadow:inset 0 0 0 1px var(--line-dark)}
.btn--out:hover{color:#fff;box-shadow:inset 0 0 0 1px var(--orange),0 16px 40px -18px rgba(251,52,2,.6)}
.btn--out::before{background:radial-gradient(130px 130px at var(--bx) var(--by),rgba(251,52,2,.3),transparent 62%)}
.btn .ar{transition:transform .2s}
.btn:hover .ar{transform:translateX(4px)}
.tlink{font-family:var(--f-display);font-weight:700;font-size:14px;letter-spacing:.1em;text-transform:uppercase;display:inline-flex;align-items:center;gap:9px;color:var(--on-dark);border-bottom:1px solid var(--line-dark);padding-bottom:5px;transition:border-color .18s,color .18s,gap .18s}
.tlink:hover{color:var(--orange);border-bottom-color:var(--orange);gap:14px}
.actions{display:flex;flex-wrap:wrap;gap:14px 22px;align-items:center;margin-top:38px}

/* ---------- 7. NAV ---------- */
.nav{position:sticky;top:0;z-index:100;background:rgba(13,20,38,.9);backdrop-filter:blur(16px) saturate(140%);border-bottom:1px solid var(--line-dark)}
.nav__in{display:flex;align-items:center;justify-content:space-between;gap:20px;height:70px;max-width:var(--wrap);margin:0 auto;padding-inline:var(--gut)}
.brand{display:flex;align-items:center;gap:12px;color:var(--on-dark)}
.brand:hover{color:var(--on-dark)}
.brand img{height:36px;width:36px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 1.5px rgba(251,52,2,.55)}
.brand__txt{display:flex;flex-direction:column;line-height:1}
.brand__name{font-family:var(--f-display);font-weight:900;font-size:17px;letter-spacing:.02em;text-transform:uppercase}
.brand__sub{font-family:var(--f-display);font-weight:700;font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--orange);margin-top:4px}
.nav__links{display:flex;align-items:center;gap:30px}
.nav__links a{font-family:var(--f-display);font-weight:600;font-size:14px;letter-spacing:.08em;text-transform:uppercase;color:var(--on-dark-soft);padding:6px 0;border-bottom:1px solid transparent;transition:color .16s,border-color .16s}
.nav__links a:hover{color:var(--on-dark)}
.nav__links a[aria-current="page"]{color:var(--on-dark);border-bottom-color:var(--orange)}
@media(min-width:1201px) and (max-width:1420px){.nav__links{gap:20px}.nav__links a{font-size:13px;letter-spacing:.06em}}
.nav__cta{display:flex;align-items:center;gap:14px}
.nav .btn{padding:13px 21px;font-size:12.5px}
.burger{display:none;background:none;border:0;color:var(--on-dark);cursor:pointer;padding:8px;margin:-8px}
@media(max-width:1200px){
  .nav__links{position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;gap:0;background:rgba(13,20,38,.98);backdrop-filter:blur(16px);border-bottom:1px solid var(--line-dark);padding:4px var(--gut) 18px;display:none}
  .nav__links.open{display:flex}
  .nav__links a{padding:15px 0;border-bottom:1px solid var(--line-dark)}
  .burger{display:block}
}
@media(max-width:560px){.nav__cta .btn{display:none}}

/* ---------- 8. HERO PLEINE IMAGE ---------- */
.hero{position:relative;min-height:clamp(540px,76vh,860px);display:flex;align-items:flex-end;
  padding-block:clamp(64px,8vw,110px) clamp(44px,6vw,76px);overflow:hidden;background:var(--marine)}
.hero__bg{display:none}
.hero::before{content:"";position:absolute;top:-16%;right:-8%;width:min(66vw,760px);height:min(66vw,760px);
  background:radial-gradient(circle,rgba(251,52,2,calc(var(--hero-glow,.2)*1.1)),transparent 62%);pointer-events:none;z-index:0}
.hero .wrap{position:relative;z-index:2;width:100%}
.hero__grid{display:grid;grid-template-columns:minmax(0,1fr) clamp(280px,29vw,420px);gap:clamp(28px,4vw,62px);align-items:end}
.hero h1{margin-top:0}
.hero h1 .tag{display:flex;margin:0 0 22px;line-height:1.5;letter-spacing:.16em}
.hero .lede{margin-top:26px;max-width:44ch;color:var(--on-dark-soft)}
.hero__photo{display:block;position:relative;z-index:2;align-self:end;justify-self:end;width:100%}
.hero__photo img{width:100%;height:auto;aspect-ratio:1/1.16;object-fit:cover;object-position:64% 16%;border-radius:var(--r);
  filter:grayscale(var(--hero-gray,0)) saturate(var(--hero-sat,1.14)) contrast(1.05) brightness(calc(var(--hero-bright,.7) + .3));
  box-shadow:0 40px 90px -36px rgba(0,0,0,.8)}
/* Signature posee sur le bas de la photo, debordant legerement a gauche pour
   accrocher l oeil. Fond orange plein : lisible sur nimporte quelle photo. */
.hero__photo{margin:0}
.hero__cap{position:absolute;left:clamp(-18px,-1.4vw,-10px);bottom:clamp(16px,2.6vw,34px);
  display:flex;align-items:baseline;gap:8px;max-width:calc(100% + 18px);
  padding:10px 16px;background:rgba(13,20,38,.94);border-radius:4px;border-left:3px solid var(--orange);
  box-shadow:0 14px 30px -14px rgba(0,0,0,.9);
  font-family:var(--f-display);font-weight:700;font-size:clamp(10.5px,.86vw,12px);
  letter-spacing:.14em;text-transform:uppercase;color:#fff;white-space:nowrap}
.hero__cap b{font-weight:900;color:var(--orange)}
.hero__cap b::after{content:" ·";color:rgba(255,255,255,.42)}
@media(max-width:520px){.hero__cap{left:8px;bottom:12px;font-size:10px;letter-spacing:.1em;padding:8px 12px}}
.hero__strip{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line-dark);margin-top:clamp(44px,6vw,72px)}
.hero__stat{padding:24px 18px 4px;border-left:1px solid var(--line-dark)}
.hero__stat:first-child{border-left:0;padding-left:0}
.hero__stat b{display:block;font-family:var(--f-display);font-weight:900;font-size:clamp(24px,2.6vw,34px);line-height:1;letter-spacing:-.03em;color:var(--on-dark)}
.hero__stat span{display:block;margin-top:9px;font-size:15px;line-height:1.4;color:var(--on-dark-soft)}
@media(max-width:900px){.hero__grid{grid-template-columns:minmax(0,1fr)}.hero__photo{max-width:400px}.hero__strip{grid-template-columns:1fr 1fr}.hero__stat{padding-left:0;border-left:0;border-top:1px solid var(--line-dark)}.hero__stat:first-child{border-top:0}}
@media(max-width:520px){.hero__strip{grid-template-columns:1fr}}
@media(max-width:560px){.lines .ln{clip-path:none}.t-hero{line-height:.98}}

/* ---------- 9. BANDEAU DÉFILANT ---------- */
.marquee{overflow:hidden;border-block:1px solid var(--line-dark);padding-block:clamp(14px,2vw,26px);background:var(--marine)}
.marquee__track{display:flex;gap:clamp(30px,5vw,70px);width:max-content}
.marquee span{font-family:var(--f-display);font-weight:900;font-size:clamp(26px,4vw,56px);line-height:1;letter-spacing:-.025em;text-transform:uppercase;color:transparent;-webkit-text-stroke:1px rgba(242,239,233,.22);white-space:nowrap}
.marquee span:nth-child(even){background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-stroke:0;color:transparent}
@media(prefers-reduced-motion:no-preference){.marquee__track{animation:slide 32s linear infinite}}
@keyframes slide{to{transform:translateX(-50%)}}

/* ---------- 10. LISTE NUMÉROTÉE À VISUEL COLLANT ---------- */
.obs{border-top:1px solid var(--line-dark);margin-top:clamp(38px,4.5vw,56px)}
.obs__row{display:grid;grid-template-columns:auto 1fr;gap:clamp(20px,3.6vw,52px);
  padding:clamp(24px,2.8vw,36px) 0;border-bottom:1px solid var(--line-dark);align-items:start;
  transition:padding-left .3s var(--ease),background .3s}
.obs__row:hover{padding-left:14px;background:linear-gradient(90deg,rgba(251,52,2,.07),transparent 60%)}
.obs__n{font-family:var(--f-display);font-weight:700;font-size:13.5px;letter-spacing:.1em;color:var(--on-dark-faint);padding-top:8px;min-width:3.2em;transition:color .3s}
.obs__row:hover .obs__n{color:var(--orange)}
.obs__row h3{font-size:clamp(17.5px,1.7vw,21px);font-weight:800;letter-spacing:.04em;text-transform:uppercase;line-height:1.3;color:var(--on-dark)}
.obs__row p{margin-top:12px;color:var(--on-dark-soft);font-size:16.5px;line-height:1.6;max-width:58ch}

/* ---------- 11. CARTES ---------- */
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,1.5vw,18px);margin-top:clamp(38px,4.5vw,56px)}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(12px,1.4vw,16px);margin-top:clamp(38px,4.5vw,56px)}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2vw,26px);margin-top:clamp(38px,4.5vw,56px)}
@media(max-width:960px){.grid-3,.grid-4{grid-template-columns:1fr 1fr}}
@media(max-width:620px){.grid-3,.grid-4,.grid-2{grid-template-columns:1fr}}
.card{position:relative;isolation:isolate;background:var(--marine);border-radius:var(--r);
  box-shadow:inset 0 0 0 1px var(--line-dark);padding:28px 24px 30px;display:flex;flex-direction:column;gap:11px;
  --mx:50%;--my:50%;transition:transform .24s var(--ease),box-shadow .24s}
.card::before{content:"";position:absolute;inset:0;border-radius:inherit;z-index:0;pointer-events:none;
  background:radial-gradient(240px 240px at var(--mx) var(--my),rgba(251,52,2,.16),transparent 68%);opacity:0;transition:opacity .3s}
.card>*{position:relative;z-index:1}
.card:hover{transform:translateY(-4px);box-shadow:inset 0 0 0 1px rgba(251,52,2,.5),0 30px 60px -34px rgba(0,0,0,.85)}
.card:hover::before{opacity:1}
.card h3{font-size:17px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;line-height:1.3}
.card p{font-size:16px;line-height:1.58;color:var(--on-dark-soft);margin:0}
.card .tag{margin-bottom:2px}

/* ---------- 12. FORFAITS ---------- */
.plans{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:clamp(42px,5vw,64px);align-items:stretch}
@media(max-width:1040px){.plans{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.plans{grid-template-columns:1fr}}
.plan{position:relative;isolation:isolate;display:flex;flex-direction:column;background:var(--marine);
  border-radius:var(--r);box-shadow:inset 0 0 0 1px var(--line-dark);padding:32px 24px 28px;
  --mx:50%;--my:50%;transition:transform .22s var(--ease),box-shadow .22s}
.plan::before{content:"";position:absolute;inset:0;border-radius:inherit;z-index:0;pointer-events:none;
  background:radial-gradient(240px 240px at var(--mx) var(--my),rgba(251,52,2,.16),transparent 68%);opacity:0;transition:opacity .3s}
.plan>*{position:relative;z-index:1}
.plan:hover{transform:translateY(-4px);box-shadow:inset 0 0 0 1px var(--orange),0 30px 60px -34px rgba(0,0,0,.85)}
.plan:hover::before{opacity:1}
.plan--feat{background:var(--marine-2);box-shadow:inset 0 0 0 1px rgba(251,52,2,.6)}
.plan__flag{position:absolute;top:-10px;left:22px;background:var(--grad);color:#fff;font-family:var(--f-display);font-size:11.5px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;padding:6px 11px;border-radius:3px;z-index:2}
.plan__name{font-family:var(--f-display);font-weight:800;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--on-dark-faint)}
.plan--feat .plan__name{color:var(--orange)}
.plan__price{font-family:var(--f-display);font-weight:900;font-size:clamp(32px,3.6vw,44px);line-height:1;letter-spacing:-.035em;margin-top:14px;color:var(--on-dark)}
.plan--feat .plan__price{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.plan__price small{font-size:15.5px;font-weight:600;letter-spacing:0;color:var(--on-dark-soft);-webkit-text-fill-color:var(--on-dark-soft)}
.plan__for{margin:12px 0 0;font-size:15.5px;line-height:1.5;color:var(--on-dark-soft);min-height:42px}
.plan__when{margin-top:14px;align-self:flex-start;font-family:var(--f-display);font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--on-dark);box-shadow:inset 0 0 0 1px var(--line-dark);padding:7px 11px;border-radius:3px}
.plan--feat .plan__when{box-shadow:inset 0 0 0 1px rgba(251,52,2,.5);color:var(--orange)}
.plan__list{list-style:none;margin:22px 0 0;padding:22px 0 0;border-top:1px solid var(--line-dark);display:grid;gap:12px;flex:1}
.plan__list li{position:relative;padding-left:22px;font-size:15.5px;line-height:1.52;color:var(--on-dark-soft)}
.plan__list li::before{content:"";position:absolute;left:0;top:9px;width:11px;height:1px;background:var(--orange)}
.plan__note{margin:16px 0 0;font-size:13px;line-height:1.55;color:var(--on-dark-faint)}
.plan .btn{margin-top:24px;width:100%;justify-content:center;padding:15px}

/* ---------- 13. FAQ ---------- */
.faq{margin-top:clamp(38px,4.5vw,56px);border-top:1px solid var(--line-dark)}
.faq details{border-bottom:1px solid var(--line-dark)}
.faq summary{cursor:pointer;list-style:none;padding:24px 46px 24px 0;position:relative;font-family:var(--f-display);font-weight:800;font-size:17.5px;letter-spacing:.02em;text-transform:uppercase;line-height:1.35;transition:color .16s}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--orange)}
.faq summary::after{content:"";position:absolute;right:8px;top:32px;width:13px;height:1px;background:var(--orange)}
.faq summary::before{content:"";position:absolute;right:14px;top:26px;width:1px;height:13px;background:var(--orange);transition:transform .22s var(--ease)}
.faq details[open] summary::before{transform:scaleY(0)}
.faq__a{padding:0 0 26px;color:var(--on-dark-soft);max-width:66ch;font-size:17px;line-height:1.65}

/* ---------- 14. CITATION ---------- */
/* Citation accompagnee du portrait : la photo tient la moitie gauche, le texte
   garde sa mesure de lecture a droite. Sous 760 px, la photo passe au-dessus. */
.qsplit{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(28px,5vw,72px);align-items:center}
/* width:100% est obligatoire : sans elle, justify-self:end dimensionne la
   figure sur son contenu, or limage en chargement differe na pas encore de
   taille. La figure reste a 0, donc limage nest jamais demandee. Blocage. */
.qsplit__photo{margin:0;width:100%;max-width:380px;justify-self:end}
.qsplit__photo img{display:block;width:100%;height:auto;aspect-ratio:1/1.16;object-fit:cover;object-position:64% 16%;
  border-radius:var(--r);filter:saturate(1.14) contrast(1.05);box-shadow:0 40px 90px -36px rgba(0,0,0,.8)}
.qsplit .quote{max-width:52ch}
@media(max-width:760px){.qsplit{grid-template-columns:minmax(0,1fr);gap:32px}
  .qsplit__photo{max-width:320px;justify-self:start}}
.quote{border-left:1px solid var(--orange);padding-left:clamp(20px,3vw,34px)}
.quote p{font-weight:800;font-size:clamp(19px,1.9vw,25px);line-height:1.34;letter-spacing:-.018em;text-transform:uppercase;color:var(--on-dark)}
.quote cite{display:block;margin-top:22px;font-family:var(--f-display);font-weight:700;font-size:12.5px;letter-spacing:.18em;text-transform:uppercase;font-style:normal;color:var(--on-dark-faint)}

/* ---------- 15. PHOTO ---------- */
.figure{margin:0;position:relative;border-radius:var(--r);overflow:hidden}
.figure img{width:100%;object-fit:cover;filter:grayscale(.3) contrast(1.06)}
.figure figcaption{font-family:var(--f-display);font-weight:600;font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--on-dark-faint);margin-top:13px}

/* ---------- 16. BANDEAU CTA ---------- */
.cta{position:relative;overflow:hidden;background:var(--orange);padding-block:clamp(64px,9vw,110px)}
.cta::before{content:"";position:absolute;inset:0;background:radial-gradient(60% 90% at 22% 50%,rgba(255,255,255,.14),transparent 64%)}
.cta .wrap{position:relative;z-index:1}
.cta h2{max-width:16ch;color:#fff}
.cta .lede{color:rgba(255,255,255,.92);max-width:46ch;margin-top:20px}
.cta .tag{color:rgba(255,255,255,.82)}
.cta .tag::before{background:rgba(255,255,255,.82)}
.cta .btn{background:var(--marine);color:#fff}
.cta .btn:hover{background:#060B16;color:#fff}
.cta .tlink{color:#fff;border-bottom-color:rgba(255,255,255,.45)}
.cta .tlink:hover{color:#fff;border-bottom-color:#fff}
.cta .margin-note{border-left-color:rgba(255,255,255,.5)}
.cta .margin-note p{color:rgba(255,255,255,.92)}

/* ---------- 17. CALENDLY ---------- */
.booking{background:var(--marine-2);border-radius:var(--r);box-shadow:inset 0 0 0 1px var(--line-dark);min-height:660px;display:flex;align-items:center;justify-content:center;padding:30px;text-align:center}
.booking__ph{font-family:var(--f-display);font-weight:700;font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:var(--on-dark-faint);line-height:2.2}
/* version avec le vrai widget : plein cadre, sans padding */
.booking--live{display:block;padding:0;overflow:hidden;min-height:700px;text-align:initial}
.booking--live .calendly-inline-widget{border-radius:var(--r)}

/* ---------- 18. PIED DE PAGE ---------- */
.foot{background:var(--marine);padding-block:clamp(52px,6vw,80px) 28px;border-top:1px solid var(--line-dark)}
.foot__top{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:36px}
@media(max-width:820px){.foot__top{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.foot__top{grid-template-columns:1fr}}
.foot h3,.foot h4{font-family:var(--f-display);font-weight:800;font-size:12.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--on-dark-faint);margin-bottom:18px}
.foot a,.foot p{color:var(--on-dark);font-size:16px;margin:0 0 10px;display:block}
.foot a:hover{color:var(--orange)}
.foot__blurb{color:var(--on-dark-soft);font-size:15.5px;line-height:1.6;max-width:32ch;margin-top:18px}
.foot__logo{height:56px;width:56px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 1.5px rgba(251,52,2,.55)}
.foot__legal{margin-top:clamp(38px,4.5vw,56px);padding-top:24px;border-top:1px solid var(--line-dark);font-family:var(--f-display);font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--on-dark-faint);display:flex;flex-wrap:wrap;gap:8px 24px;justify-content:space-between}

/* ---------- 19. LUEUR SUR NOTES DE MARGE ---------- */
.margin-note::before{content:"";position:absolute;inset:-8px -12px;border-radius:4px;pointer-events:none;
  background:radial-gradient(130px 130px at var(--gx) var(--gy),rgba(251,52,2,.11),transparent 66%);opacity:0;transition:opacity .3s}
.margin-note:hover::before{opacity:1}

/* ---------- 20. RÉVÉLATION DE LIGNES ---------- */
/* Chaque ligne du titre monte derrière un masque. Visible par défaut. */
.lines{display:block}
.lines .ln{display:block;overflow:visible;clip-path:inset(0 -30% 0 -30%);padding-bottom:.12em;margin-bottom:-.12em}
.lines .ln>span{display:block;white-space:nowrap}
@media(max-width:1000px){.lines .ln>span{white-space:normal}.lines .ln{clip-path:none;overflow:visible}}
@media(prefers-reduced-motion:no-preference){
  .lines.is-armed .ln>span{transform:translateY(105%)}
  .lines.is-armed.is-in .ln>span{animation:lineUp .82s cubic-bezier(.16,1,.3,1) both}
  .lines.is-armed.is-in .ln:nth-child(2)>span{animation-delay:.1s}
  .lines.is-armed.is-in .ln:nth-child(3)>span{animation-delay:.2s}
  .lines.is-armed.is-in .ln:nth-child(4)>span{animation-delay:.3s}
}
@keyframes lineUp{from{transform:translateY(105%)}to{transform:none}}

/* ---------- 21. RÉVÉLATION AU SCROLL ---------- */
@media(prefers-reduced-motion:no-preference){
  .reveal.is-in{animation:rise .72s cubic-bezier(.2,.7,.3,1) both}
  .reveal.is-in[data-d="1"]{animation-delay:.07s}
  .reveal.is-in[data-d="2"]{animation-delay:.14s}
  .reveal.is-in[data-d="3"]{animation-delay:.21s}
  .reveal.is-in[data-d="4"]{animation-delay:.28s}
  .reveal.is-in[data-d="5"]{animation-delay:.35s}
  .obs.is-in{animation:drawRule .6s ease both}
}
@keyframes rise{from{transform:translateY(26px);opacity:.001}to{transform:none;opacity:1}}
@keyframes drawRule{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}

/* ---------- 22. ANIMATIONS LIÉES AU SCROLL ---------- */

/* Hero épinglé qui se dissout sous la section suivante */
@media(min-width:901px){
  html[data-anim="1"] .hero{position:sticky;top:0;z-index:0}
  html[data-anim="1"] .hero+*{position:relative;z-index:2;background:var(--marine)}
}
@media (prefers-reduced-motion:no-preference){
  html[data-anim="1"] .hero__grid{
    transform:translateY(calc(var(--heroP,0)*-9vh)) scale(calc(1 - var(--heroP,0)*.14));
    opacity:calc(1 - var(--heroP,0)*1.35);
    filter:blur(calc(var(--heroP,0)*9px));
    transform-origin:50% 0}
  html[data-anim="1"] .hero__knight{
    transform:scaleX(-1) translateY(calc(var(--heroP,0)*4vh)) scale(calc(1 + var(--heroP,0)*.12));
    opacity:calc(1 - var(--heroP,0)*.9)}
  html[data-anim="1"] .hero__bg{opacity:calc(1 - var(--heroP,0)*.7)}
}

/* Parcours épinglé, défilement horizontal */
.hpin{position:relative;height:300vh;background:var(--marine-2)}
.hpin__stage{position:sticky;top:0;height:100vh;overflow:hidden;display:flex;flex-direction:column;
  justify-content:center;gap:clamp(24px,4vh,46px);padding-inline:clamp(18px,4vw,58px)}
.hpin__head{max-width:var(--wrap);width:100%;margin:0 auto}
.hpin__head h2{margin-top:14px}
.hpin__bar{margin-top:24px;height:2px;background:var(--line-dark);position:relative;max-width:340px}
.hpin__bar span{position:absolute;inset:0 auto 0 0;width:calc(var(--trackP,0)*100%);background:var(--grad);display:block}
.hpin__track{display:flex;align-items:stretch;gap:clamp(18px,2.4vw,32px);width:max-content;padding-block:8px;padding-inline:max(calc((100vw - var(--wrap))/2),clamp(18px,4vw,58px));
  transform:translate3d(calc(var(--trackX,0px)),0,0);will-change:transform}
.hpanel{flex:0 0 clamp(280px,32vw,420px);background:var(--marine);border-radius:var(--r);
  box-shadow:inset 0 0 0 1px var(--line-dark);padding:clamp(26px,2.6vw,38px);display:flex;flex-direction:column;gap:12px;
  position:relative;overflow:hidden}
.hpanel::before{content:"";position:absolute;inset:0;background:var(--grad-edge);opacity:0;transition:opacity .4s}
.hpanel:hover::before{opacity:.09}
.hpanel__n{font-family:var(--f-display);font-weight:900;font-size:clamp(40px,4vw,58px);line-height:1;
  letter-spacing:-.04em;color:transparent;-webkit-text-stroke:1px rgba(239,235,226,.28);margin-bottom:6px}
.hpanel h3{font-size:clamp(19px,2vw,25px)}
.hpanel p{color:var(--on-dark-soft);font-size:16px;margin:0}
.hpanel .btn{margin-top:auto;align-self:flex-start;flex:none}
.hpanel--end{background:var(--marine-3);box-shadow:inset 0 0 0 1px rgba(251,52,2,.5)}

/* --- Diptyque épinglé : deux portraits qui défilent avec le scroll --- */
.dpin{position:relative;height:280vh}
.dpin__stage{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:clamp(22px,3vw,38px);overflow:hidden;padding-inline:clamp(18px,4vw,58px)}
.dpin__pair{display:flex;gap:clamp(16px,2.4vw,34px);align-items:center;justify-content:center;width:100%;max-width:var(--wrap)}
.dframe{margin:0;position:relative;flex:0 1 clamp(220px,26vw,380px);border-radius:var(--r);overflow:hidden;
  box-shadow:inset 0 0 0 1px var(--line-dark),0 30px 70px -40px rgba(0,0,0,.85);
  will-change:transform,opacity}
.dframe video{display:block;width:100%;height:min(52vh,520px);object-fit:cover;background:var(--marine-2)}
.dframe figcaption{position:absolute;left:0;right:0;bottom:0;padding:26px 18px 14px;font-size:13px;
  letter-spacing:.02em;color:var(--on-dark);background:linear-gradient(transparent,rgba(9,14,26,.86))}
.dframe--a{transform:translate3d(calc((1 - var(--dP,0)) * -12vw),0,0) scale(calc(.92 + var(--dP,0) * .08));
  opacity:calc(.6 + var(--dP,0) * .4)}
.dframe--b{transform:translate3d(calc((1 - var(--dP,0)) * 12vw),0,0) scale(calc(.92 + var(--dP,0) * .08));
  opacity:calc(.6 + var(--dP,0) * .4)}
.dpin__quote{margin:0;max-width:60ch;text-align:center;
  opacity:clamp(0,calc((var(--dP,0) - .35) * 3),1);
  transform:translate3d(0,calc((1 - clamp(0,calc((var(--dP,0) - .35) * 3),1)) * 22px),0)}
.dpin__quote p{font-family:var(--f-display);font-weight:700;font-size:clamp(19px,2.2vw,28px);line-height:1.32;
  letter-spacing:-.01em;color:var(--on-dark);margin:0;text-wrap:pretty}
.dpin__quote cite{display:block;margin-top:14px;font-style:normal;font-size:13px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--orange)}
@media(max-width:900px){
  .dpin{height:auto}
  .dpin__stage{position:static;height:auto;padding-block:clamp(56px,9vw,90px)}
  .dpin__pair{flex-direction:column}
  .dframe{flex:none;width:100%;max-width:420px}
  .dframe video{height:auto;aspect-ratio:3/4}
  .dframe--a,.dframe--b{transform:none;opacity:1}
  .dpin__quote{opacity:1;transform:none}
}
@media(prefers-reduced-motion:reduce){
  .dframe--a,.dframe--b{transform:none;opacity:1}
  .dpin__quote{opacity:1;transform:none}
}
@media(max-width:900px){
  .hpin{height:auto}
  .hpin__stage{position:static;height:auto;padding-block:clamp(76px,10vw,140px);overflow:visible}
  .hpin__track{width:auto;flex-direction:column;transform:none;padding-inline:0}
  .hpanel{flex:none}
  .hpin__bar{display:none}
}

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion:no-preference){
    .nav::after{content:"";position:absolute;left:0;bottom:-1px;height:1px;width:100%;background:var(--grad);
      transform-origin:left;transform:scaleX(0);animation:progress linear both;animation-timeline:scroll(root)}
    .hero__photo img{animation:bgDrift linear both;animation-timeline:view();animation-range:entry 0% exit 100%}
    .reveal{animation:enter linear both;animation-timeline:view();animation-range:entry 6% entry 44%}
    .obs__row{animation:rowIn linear both;animation-timeline:view();animation-range:entry 10% entry 52%}
    .grid-2>*,.grid-3>*,.grid-4>*,.plans>*{animation:cardIn linear both;animation-timeline:view();animation-range:entry 8% entry 48%}
    .obs,.faq{animation:drawRule linear both;animation-timeline:view();animation-range:entry 12% entry 42%}
    .cta .wrap{animation:enter linear both;animation-timeline:view();animation-range:entry 0% entry 56%}
    .quote{animation:enter linear both;animation-timeline:view();animation-range:entry 6% entry 46%}
  }
}
/* ---------- 23. CROCHETS DES RÉGLAGES ---------- */
/* Chaque variable a un repli : le site fonctionne sans le panneau. */
body{font-size:var(--body-size,18px);line-height:var(--body-line,1.62)}
h1,h2,h3,h4{font-weight:var(--title-weight,900);letter-spacing:var(--title-tracking,-.025em)}
html[data-titlecase="0"] h1,html[data-titlecase="0"] h2,html[data-titlecase="0"] h3,
html[data-titlecase="0"] .quote p{text-transform:none}
.t-hero{font-size:calc(clamp(34px,5vw,64px)*var(--hero-scale,1))}
.t-h2{font-size:calc(clamp(25px,2.8vw,38px)*var(--hero-scale,1))}
.wrap{padding-inline:calc(clamp(18px,4vw,58px)*var(--gut-scale,1))}
.sec{padding-block:calc(clamp(76px,10vw,140px)*var(--sec-scale,1))}
.hero{min-height:clamp(500px,var(--hero-h,76vh),900px)}
.hero__photo img{filter:grayscale(var(--hero-gray,0)) saturate(var(--hero-sat,1.14)) contrast(1.05) brightness(calc(var(--hero-bright,.7) + .3))}
.hero__bg::after{background:none}
.marquee__track{animation-duration:var(--marquee-dur,32s)}
.card:hover,.plan:hover{transform:translateY(var(--lift,-4px))}
.btn:hover{transform:translateY(calc(var(--lift,-4px)*.5))}
.btn::before,.card::before,.plan::before,.margin-note::before{opacity:0}
.btn:hover::before,.card:hover::before,.plan:hover::before,.margin-note:hover::before{opacity:var(--glow-strength,1)}

/* interrupteurs */
html[data-anim="0"] *,html[data-anim="0"] *::before,html[data-anim="0"] *::after{animation:none !important}
html[data-glow="0"] .btn::before,html[data-glow="0"] .card::before,
html[data-glow="0"] .plan::before,html[data-glow="0"] .margin-note::before{display:none}
html[data-marquee="0"] .marquee{display:none}
html[data-stats="0"] .hero__strip{display:none}
html[data-parallax="0"] .hero__photo img{animation:none !important;transform:none !important}
html[data-lines="0"] .lines .ln>span{transform:none !important;animation:none !important}
html[data-lines="0"] .lines .ln{clip-path:none}

/* vitesse globale */
html .reveal.is-in,html .lines.is-armed.is-in .ln>span{animation-duration:calc(.75s*var(--anim-scale,1))}

/* variantes de carte */
html[data-cards="plein"] .card{background:var(--marine-2);box-shadow:none}
html[data-cards="plein"] .card:hover{box-shadow:0 30px 60px -34px rgba(0,0,0,.85)}
html[data-cards="nu"] .card{background:transparent;box-shadow:none;padding-inline:0;border-top:1px solid var(--line-dark);border-radius:0;padding-top:24px}
html[data-cards="nu"] .card:hover{transform:none;box-shadow:none;border-top-color:var(--orange)}

/* variantes de liste */
html[data-list="carte"] .obs{border-top:0;display:grid;gap:12px}
html[data-list="carte"] .obs__row{border-bottom:0;background:var(--marine);border-radius:var(--r);
  box-shadow:inset 0 0 0 1px var(--line-dark);padding:24px}
html[data-list="carte"] .obs__row:hover{padding-left:24px;background:var(--marine-2)}
html[data-list="gros"] .obs__n{font-size:clamp(30px,4vw,56px);font-weight:900;letter-spacing:-.04em;color:var(--orange);padding-top:0}
html[data-list="gros"] .obs__row h3{font-size:clamp(20px,2.2vw,27px);text-transform:none;letter-spacing:-.02em}

/* ---------- 24. FOND ANIMÉ - CIRCUIT ---------- */
.hero__spot,.sec-circuit{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.hero__spot{z-index:1;opacity:.85}
.hero__spot .circuit__base{opacity:.55}
.hero>.wrap{position:relative;z-index:2}
.hero__spot{-webkit-mask-image:radial-gradient(130% 90% at 68% 6%,#000,transparent 82%);mask-image:radial-gradient(130% 90% at 68% 6%,#000,transparent 82%)}
.sec-circuit{-webkit-mask-image:radial-gradient(120% 95% at 82% 8%,#000,transparent 84%);mask-image:radial-gradient(120% 95% at 82% 8%,#000,transparent 84%)}
.circuit{position:absolute;inset:0;width:100%;height:100%}
.circuit__base{opacity:.55}
.circuit__base .ctr{fill:none;stroke:#fff;stroke-opacity:.14;stroke-width:1.3}
.circuit__base .cnode{fill:var(--marine);stroke:#fff;stroke-opacity:.22;stroke-width:1.3}
.circuit__pulse .cpulse{fill:none;stroke:var(--orange-hi);stroke-width:2.4;stroke-linecap:round;stroke-dasharray:6 94;stroke-dashoffset:0;opacity:0;filter:drop-shadow(0 0 4px var(--orange))}
.circuit .node-live{fill:var(--orange);stroke:none;transform-box:fill-box;transform-origin:center;filter:drop-shadow(0 0 5px var(--orange))}
.has-circuit{overflow:hidden;position:relative}
.has-circuit>.wrap{position:relative;z-index:2}
@media (prefers-reduced-motion:no-preference){
  html[data-anim="1"] .circuit-on .cpulse{animation:circuitFlow calc(4.6s*var(--anim-scale,1)) linear infinite}
  html[data-anim="1"] .circuit-on .cpulse--2{animation-duration:calc(5.8s*var(--anim-scale,1));animation-delay:.9s}
  html[data-anim="1"] .circuit-on .cpulse--3{animation-duration:calc(3.9s*var(--anim-scale,1));animation-delay:2.1s}
  html[data-anim="1"] .circuit-on .cpulse--4{animation-duration:calc(6.4s*var(--anim-scale,1));animation-delay:1.4s}
  html[data-anim="1"] .circuit-on .cpulse--5{animation-duration:calc(4.3s*var(--anim-scale,1));animation-delay:3s}
  html[data-anim="1"] .circuit-on .cpulse--6{animation-duration:calc(5.2s*var(--anim-scale,1));animation-delay:.4s}
  html[data-anim="1"] .circuit-on .cpulse--7{animation-duration:calc(7s*var(--anim-scale,1));animation-delay:2.6s}
  html[data-anim="1"] .circuit-on .node-live{animation:nodePulse calc(3.4s*var(--anim-scale,1)) ease-in-out infinite}
  html[data-anim="1"] .circuit-on .node-live:nth-of-type(2){animation-delay:.7s}
  html[data-anim="1"] .circuit-on .node-live:nth-of-type(3){animation-delay:1.5s}
  html[data-anim="1"] .circuit-on .node-live:nth-of-type(4){animation-delay:2.2s}
}
@keyframes circuitFlow{0%{stroke-dashoffset:0;opacity:0}8%{opacity:1}90%{opacity:1}100%{stroke-dashoffset:-100;opacity:0}}
@keyframes nodePulse{0%,100%{opacity:.35;transform:scale(.7)}50%{opacity:1;transform:scale(1.25)}}
html[data-circuit="0"] .hero__spot,html[data-circuit="0"] .sec-circuit{display:none}
@media(max-width:640px){
  .hero__spot{-webkit-mask-image:radial-gradient(160% 120% at 55% 22%,#000,transparent 94%);mask-image:radial-gradient(160% 120% at 55% 22%,#000,transparent 94%)}
  .sec-circuit{-webkit-mask-image:radial-gradient(165% 130% at 60% 20%,#000,transparent 95%);mask-image:radial-gradient(165% 130% at 60% 20%,#000,transparent 95%)}
  .circuit__base{opacity:.7}
  .circuit__base .ctr{stroke-opacity:.20;stroke-width:1}
  .circuit__pulse .cpulse{stroke-width:1.4;stroke-dasharray:18 82;filter:drop-shadow(0 0 5px var(--orange)) drop-shadow(0 0 11px var(--orange-hi))}
}

/* ---------- 25. LISIBILITÉ MOBILE ---------- */
/* Principe : rien n'est retiré du code (le contenu reste indexable).
   On replie ce qui est secondaire et on retire ce qui est décoratif.
   Le TEXTE, lui, reste toujours dans le DOM et toujours lisible. */
@media(max-width:760px){
  /* décor : conservé sur mobile, ce sont des SVG donc zéro donnée à charger.
     Seules les pulsations les plus lourdes sont allégées. */
  .sec-circuit{opacity:.75}
  .cpulse--5,.cpulse--6,.cpulse--7{display:none}
  .hero::before{width:120vw;height:60vh;opacity:.7}

  /* respiration : sections moins hautes, texte plus aéré */
  .sec{padding-block:calc(clamp(46px,11vw,64px)*var(--sec-scale,1))}
  body{line-height:1.68}
  .lede{font-size:17.5px;line-height:1.62}
  .sechead{max-width:none}

  /* notes de marge repliées dans un accordéon (le texte reste dans le DOM) */
  details.mnotes{margin-top:22px;border-top:1px solid var(--line-dark);border-bottom:1px solid var(--line-dark)}
  details.mnotes>summary{list-style:none;cursor:pointer;padding:15px 30px 15px 0;position:relative;
    font-family:var(--f-display);font-weight:800;font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:var(--orange)}
  details.mnotes>summary::-webkit-details-marker{display:none}
  details.mnotes>summary::after{content:"";position:absolute;right:6px;top:22px;width:12px;height:1px;background:var(--orange)}
  details.mnotes>summary::before{content:"";position:absolute;right:11px;top:17px;width:1px;height:11px;background:var(--orange);transition:transform .22s}
  details.mnotes[open]>summary::before{transform:scaleY(0)}
  /* dans le bandeau orange, le repli doit passer au blanc sinon il disparait */
  .cta details.mnotes{border-color:rgba(255,255,255,.35)}
  .cta details.mnotes>summary{color:#fff}
  .cta details.mnotes>summary::before,.cta details.mnotes>summary::after{background:#fff}
  details.mnotes .spread__margin{padding-bottom:18px}
  .margin-note{margin-bottom:20px;border-left-width:2px;padding-left:14px}
  .margin-note p{font-size:15.5px}

  /* cibles tactiles : 44 px minimum partout */
  .nav__links a{padding:16px 0}
  .foot a{padding-block:9px;margin-bottom:2px}
  .field label{font-size:13px}
  .faq summary{padding-block:20px;min-height:44px}
  .btn{padding:16px 24px;min-height:48px}
  .btn--lg{padding:18px 28px}
  .tlink{padding-block:10px}

  /* listes : moins de décalage, plus de lisibilité */
  .obs__row{gap:14px;padding-block:22px}
  .obs__row:hover{padding-left:0;background:none}
  .obs__n{min-width:2.6em;padding-top:5px}
}
@media(max-width:480px){
  .hero__grid{gap:26px}
  .hero__photo{max-width:none}
  .plan{padding:26px 20px 24px}
  .card{padding:24px 20px 26px}
}

/* ---------- 26. FORMULAIRE ---------- */
.form{display:grid;gap:16px;margin-top:28px;max-width:520px}
.field{display:grid;gap:7px}
.field label{font-family:var(--f-display);font-weight:700;font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--on-dark-soft)}
.field input,.field textarea{font-family:var(--f-body);font-size:16.5px;color:var(--on-dark);
  background:var(--marine);border:0;box-shadow:inset 0 0 0 1px var(--line-dark);border-radius:var(--r);
  padding:15px 16px;min-height:52px;width:100%;transition:box-shadow .18s}
.field textarea{min-height:120px;resize:vertical;line-height:1.5}
.field input:focus,.field textarea:focus{outline:0;box-shadow:inset 0 0 0 2px var(--orange)}
.field input::placeholder,.field textarea::placeholder{color:var(--on-dark-faint)}
.form__hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form__note{font-size:14px;color:var(--on-dark-faint);margin:0}
.form .btn{justify-self:start}

/* ---------- 27. BARRE D'APPEL MOBILE ---------- */
.callbar{display:none}
@media(max-width:760px){
  .callbar{display:grid;grid-template-columns:1fr 1fr;gap:1px;position:fixed;left:0;right:0;bottom:0;z-index:120;
    background:var(--line-dark);box-shadow:0 -10px 30px -18px rgba(0,0,0,.8)}
  .callbar a{display:flex;align-items:center;justify-content:center;gap:9px;min-height:56px;
    font-family:var(--f-display);font-weight:800;font-size:13.5px;letter-spacing:.08em;text-transform:uppercase;
    background:var(--marine);color:var(--on-dark)}
  .callbar a.is-primary{background:var(--orange);color:#fff}
  .callbar svg{width:17px;height:17px;flex:none}
  body{padding-bottom:56px}
}

/* ---------- 28. PAGE COURTE (merci, 404) ---------- */
.slim{min-height:64vh;display:flex;align-items:center;padding-block:clamp(60px,10vw,120px)}
.slim .wrap{max-width:760px;width:100%}
.slim h1{margin-top:18px}
.slim .lede{margin-top:22px}

/* ---------- 29. CAVALIER EN FOND DE HERO ---------- */
.hero__knight{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;transform:scaleX(-1)}
.hero__knight img,.hero__knight video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%;
  opacity:.34;transform-origin:50% 50%;
  -webkit-mask-image:radial-gradient(62% 78% at 50% 50%,#000 42%,rgba(0,0,0,.62) 72%,transparent 100%);
  mask-image:radial-gradient(62% 78% at 50% 50%,#000 42%,rgba(0,0,0,.62) 72%,transparent 100%)}
/* halo qui respire, calé sur le lisere orange */
.hero__knight::after{content:"";position:absolute;inset:0;
  background:radial-gradient(ellipse at 50% 54%,rgba(251,52,2,.24),transparent 62%);pointer-events:none}
@media (prefers-reduced-motion:no-preference){
  html[data-anim="1"] .hero__knight img,html[data-anim="1"] .hero__knight video{animation:knightDrift calc(22s*var(--anim-scale,1)) ease-in-out infinite alternate}
  html[data-anim="1"] .hero__knight::after{animation:knightGlow calc(7s*var(--anim-scale,1)) ease-in-out infinite alternate}
}
@keyframes knightDrift{from{transform:scale(1)}to{transform:scale(1.045)}}
@keyframes knightGlow{from{opacity:.55}to{opacity:1}}
html[data-knight="0"] .hero__knight{display:none}
@media(max-width:900px){
  /* sur un ecran etroit et haut, le meme cadrage plein zoomerait sur un detail :
     on reduit le cadre et on repasse en contain pour que la piece reste reconnaissable */
  .hero__knight{inset:2% -26% auto -26%;height:56%}
  .hero__knight img,.hero__knight video{object-fit:contain;object-position:50% 50%;opacity:.3;
    -webkit-mask-image:radial-gradient(66% 78% at 50% 50%,#000 44%,transparent 96%);mask-image:radial-gradient(66% 78% at 50% 50%,#000 44%,transparent 96%)}
}

/* panneau de réglages : invisible tant qu'il n'est pas activé */
#tweaks-root:empty{display:none}
@keyframes progress{to{transform:scaleX(1)}}
@keyframes heroOut{to{opacity:.2;transform:translateY(-48px)}}
html[data-scrolllinked="0"] .reveal,html[data-scrolllinked="0"] .obs__row,
html[data-scrolllinked="0"] .grid-2>*,html[data-scrolllinked="0"] .grid-3>*,
html[data-scrolllinked="0"] .grid-4>*,html[data-scrolllinked="0"] .plans>*,
html[data-scrolllinked="0"] .hero__grid,html[data-scrolllinked="0"] .cta .wrap,
html[data-scrolllinked="0"] .quote,html[data-scrolllinked="0"] .obs,html[data-scrolllinked="0"] .faq{animation-timeline:none;animation:none}
@keyframes bgDrift{from{transform:translateY(10px)}to{transform:translateY(-10px)}}
@keyframes enter{from{opacity:.001;transform:translateY(28px)}to{opacity:1;transform:none}}
@keyframes rowIn{from{opacity:.001;transform:translateY(20px)}to{opacity:1;transform:none}}
@keyframes cardIn{from{opacity:.001;transform:translateY(32px) scale(.985)}to{opacity:1;transform:none}}

/* ---------- IMPRESSION ---------- */
@media print{
  *{animation:none!important;transition:none!important;transform:none!important}
  html,body{background:#fff!important;color:#111!important;font-size:11pt;line-height:1.5}
  .nav,.marquee,.hero__bg,.hero__knight,.circuit,.sec-circuit,.tweaks,#tweaks-root,
  .skip,video,.cta .btn,.btn,.faq__q::after,.callbar,.cookiebar{display:none!important}
  a{color:#111!important;text-decoration:none}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:9pt;color:#555}
  h1,h2,h3,.o{color:#111!important;-webkit-text-fill-color:#111!important;background:none!important}
  .sec,.hero{padding-block:18pt!important;page-break-inside:avoid}
  .plan,.card,.faq__item{break-inside:avoid;border:1px solid #ccc!important;background:#fff!important}
  .reveal,.lines .ln>span{opacity:1!important}
  .footer{border-top:1px solid #ccc}
}


/* ---------- 30. DOCUMENT LÉGAL ---------- */
.legal{max-width:74ch;margin-top:clamp(34px,4vw,52px)}
.legal h2{font-size:clamp(19px,1.9vw,24px);letter-spacing:-.01em;margin:clamp(34px,4vw,48px) 0 12px;padding-top:clamp(20px,2.4vw,28px);border-top:1px solid var(--line-dark)}
.legal h3{font-size:16.5px;letter-spacing:.01em;margin:22px 0 8px;color:var(--ink)}
.legal p{margin:0 0 14px;color:var(--ink-soft);line-height:1.68}
.legal ul{margin:0 0 16px;padding:0;list-style:none;display:grid;gap:9px}
.legal li{position:relative;padding-left:24px;color:var(--ink-soft);line-height:1.6}
.legal li::before{content:"";position:absolute;left:0;top:11px;width:11px;height:1.5px;background:var(--orange)}
.legal a{color:var(--orange);text-decoration:underline;text-underline-offset:3px}
.legal b{color:var(--ink);font-weight:700}
.legal__date{margin-top:18px;font-size:13px;letter-spacing:.06em;text-transform:uppercase;font-weight:700;color:var(--ink-faint);opacity:.85}

/* ---------- 31. BANNIÈRE DE TÉMOINS ---------- */
.cookiebar{position:fixed;left:0;right:0;bottom:0;z-index:120;transform:translateY(110%);
  transition:transform .5s cubic-bezier(.16,1,.3,1);background:#0D1426;color:#EFEBE2;
  border-top:2px solid var(--orange);box-shadow:0 -18px 50px -22px rgba(0,0,0,.8)}
.cookiebar.is-in{transform:none}
.cookiebar__in{max-width:1240px;margin:0 auto;padding:20px clamp(18px,4vw,58px);
  display:flex;flex-wrap:wrap;align-items:center;gap:16px 28px;justify-content:space-between}
.cookiebar__txt{flex:1 1 380px;min-width:0}
.cookiebar__txt b{display:block;font-size:14px;letter-spacing:.14em;text-transform:uppercase;color:var(--orange);margin-bottom:7px}
.cookiebar__txt p{margin:0;font-size:14.5px;line-height:1.55;color:rgba(239,235,226,.82);max-width:62ch}
.cookiebar__txt a{color:#EFEBE2;text-decoration:underline;text-underline-offset:3px}
.cookiebar__txt a:hover{color:var(--orange)}
.cookiebar__act{display:flex;flex-wrap:wrap;gap:10px;flex:0 0 auto}
.cookiebar__act button{font-family:inherit;font-weight:800;font-size:13px;letter-spacing:.06em;
  text-transform:uppercase;padding:13px 22px;border:0;cursor:pointer;border-radius:2px;line-height:1;
  transition:transform .16s cubic-bezier(.3,.7,.4,1),background .16s,color .16s}
.cookiebar__act .is-yes{background:var(--orange);color:#fff}
.cookiebar__act .is-yes:hover{transform:translateY(-2px);background:#d92a00}
.cookiebar__act .is-no{background:transparent;color:#EFEBE2;box-shadow:inset 0 0 0 1.5px rgba(239,235,226,.28)}
.cookiebar__act .is-no:hover{color:var(--orange);box-shadow:inset 0 0 0 1.5px var(--orange)}
@media(max-width:860px){.cookiebar{bottom:var(--callbar-h,56px)}.cookiebar__in{padding-block:16px}
  .cookiebar__act{width:100%}.cookiebar__act button{flex:1}}
@media(prefers-reduced-motion:reduce){.cookiebar{transition:none}}

/* lien légal dans le pied de page */
.foot__legal a{color:inherit;text-decoration:underline;text-underline-offset:3px;opacity:.8}
.foot__legal a:hover{color:var(--orange);opacity:1}