/* ═══════════════════════════════════════════════════════════════════════
   KLARO — Système de design
   Direction : éditorial suisse, contraste fort, mouvement discret.
   01 Jetons · 02 Base · 03 Typo · 04 Curseur · 05 Chargement
   06 En-tête · 07 Boutons · 08 Blocs · 09 Sections · 10 Adaptations
   ═══════════════════════════════════════════════════════════════════════ */

/* ── 01 · JETONS ─────────────────────────────────────────────────────── */
:root{
  --ink:#0B0B0D; --ink-2:#141417; --ink-3:#1D1E22; --ink-4:#2B2C31;
  --smoke:#5C616A; --smoke-2:#8A8F98; --smoke-3:#C2C6CC;
  --paper:#FBFAF7; --paper-2:#F2EFE8; --paper-3:#E8E3D8;
  --line:#E4DFD4; --line-2:#D2CCBF; --line-d:rgba(255,255,255,.12);

  --v:#C63821;  --v-soft:#FDEDE9;  --v-grad:linear-gradient(112deg,#FF5A1F,#FF3D52 46%,#FF2D6F);
  --v-btn:linear-gradient(112deg,#C4351F,#C33322 46%,#C1225A);
  --r:#1668C9;  --r-soft:#E9F1FB;  --r-grad:linear-gradient(112deg,#1E6FD9,#1FA5C4);
  --r-btn:linear-gradient(112deg,#1A5FB8,#147E96);
  --d:#6B4BC4;  --d-soft:#F0ECFB;  --d-grad:linear-gradient(112deg,#7A4FD6,#C13A8E);
  --d-btn:linear-gradient(112deg,#6440BC,#A22C77);
  --ok:#0F7048; --ok-soft:#E6F3EC; --warn:#B4271C;

  --a:var(--v); --a-soft:var(--v-soft); --a-grad:var(--v-grad); --a-btn:var(--v-btn);
  --a-rgb:216,65,42;

  --rad:12px; --rad-l:18px; --rad-xl:26px; --rad-2xl:32px;
  --max:1240px; --gut:30px; --nav-h:68px;

  --sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;
  --serif:'Instrument Serif',Georgia,'Times New Roman',serif;

  --e:cubic-bezier(.22,1,.36,1);
  --e-io:cubic-bezier(.65,.05,.36,1);
  --e-soft:cubic-bezier(.4,0,.2,1);

  --sh-1:0 1px 3px rgba(11,11,13,.05);
  --sh-2:0 12px 30px -16px rgba(11,11,13,.2);
  --sh-3:0 30px 60px -26px rgba(11,11,13,.28);
  --sh-4:0 60px 110px -44px rgba(11,11,13,.45);
}
body.p-vitrine  {--a:var(--v); --a-soft:var(--v-soft); --a-grad:var(--v-grad); --a-btn:var(--v-btn); --a-rgb:198,56,33}
body.p-reception{--a:var(--r); --a-soft:var(--r-soft); --a-grad:var(--r-grad); --a-btn:var(--r-btn); --a-rgb:22,104,201}
body.p-duo      {--a:var(--d); --a-soft:var(--d-soft); --a-grad:var(--d-grad); --a-btn:var(--d-btn); --a-rgb:107,75,196}

/* ── 02 · BASE ───────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:96px}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{font-family:var(--sans);background:var(--paper);color:var(--ink);
  font-size:17px;line-height:1.62;letter-spacing:-.012em;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;text-rendering:optimizeLegibility}
body.locked{overflow:hidden}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font-family:inherit;border:0;background:none;cursor:pointer;color:inherit}
::selection{background:var(--ink);color:var(--paper)}
.dark ::selection{background:var(--paper);color:var(--ink)}
:focus-visible{outline:2.5px solid var(--a);outline-offset:3px;border-radius:4px}
/* barre de défilement discrète */
::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-track{background:var(--paper-2)}
::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:99px;border:3px solid var(--paper-2)}
::-webkit-scrollbar-thumb:hover{background:var(--smoke-2)}

.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gut)}
.wrap-n{max-width:900px;margin:0 auto;padding:0 var(--gut)}
section{padding:110px 0;position:relative}
section.tight{padding:74px 0}
section.flush{padding-top:0}
@media(max-width:900px){section{padding:66px 0}section.tight{padding:48px 0}body{font-size:16px}:root{--gut:20px}}
.skip{position:fixed;left:-9999px;top:0;z-index:400;background:var(--ink);color:#fff;
  padding:14px 22px;border-radius:0 0 12px 0;font-weight:650;font-size:.9rem}
.skip:focus{left:0}

/* ── 03 · TYPOGRAPHIE ────────────────────────────────────────────────── */
h1,h2,h3,h4{line-height:1.02;letter-spacing:-.042em;font-weight:800;color:var(--ink)}
h1{font-size:clamp(2.6rem,7vw,6.2rem);letter-spacing:-.055em;line-height:.98}
h2{font-size:clamp(1.9rem,4.4vw,3.4rem);letter-spacing:-.046em;line-height:1.04}
h3{font-size:1.14rem;letter-spacing:-.026em;font-weight:750;line-height:1.3}
.dark h1,.dark h2,.dark h3,.dark h4{color:#fff}
.serif{font-family:var(--serif);font-weight:400;font-style:italic;letter-spacing:-.03em}
p{color:var(--smoke)}
.dark p,.dark .lead{color:rgba(255,255,255,.7)}
.lead{font-size:clamp(1.02rem,1.55vw,1.22rem);line-height:1.6}
.tnum{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}
.center{text-align:center}
.mw{max-width:60ch}.mw-c{max-width:60ch;margin-left:auto;margin-right:auto}

/* Numérotation de section, façon éditoriale */
.kicker{display:flex;align-items:center;gap:14px;font-size:.68rem;font-weight:800;
  letter-spacing:.22em;text-transform:uppercase;color:var(--smoke);margin-bottom:22px}
.dark .kicker{color:rgba(255,255,255,.62)}
.kicker i{font-style:normal;font-variant-numeric:tabular-nums;color:var(--a);opacity:.85}
.kicker::after{content:"";flex:1;height:1px;background:currentColor;opacity:.18;max-width:120px}
.kicker.mid{justify-content:center}
.kicker.mid::after{display:none}

/* Révélation de texte, ligne par ligne */
.rl{display:block;overflow:hidden}
.rl > span{display:block;transform:translateY(105%);opacity:0;
  transition:transform 1.05s var(--e),opacity .9s var(--e)}
.rl.in > span{transform:none;opacity:1}
.rl:nth-child(2) > span{transition-delay:.07s}
.rl:nth-child(3) > span{transition-delay:.14s}
.rl:nth-child(4) > span{transition-delay:.21s}
/* Révélation générique */
.rv{opacity:0;transform:translateY(24px);transition:opacity .9s var(--e),transform .9s var(--e)}
.rv.in{opacity:1;transform:none}
.rv-s{opacity:0;transform:translateY(30px) scale(.985);transition:opacity 1s var(--e),transform 1s var(--e)}
.rv-s.in{opacity:1;transform:none}
/* Révélation par masque, pour les visuels */
.rm{clip-path:inset(0 0 100% 0);transition:clip-path 1.25s var(--e)}
.rm.in{clip-path:inset(0 0 0 0)}

@media(prefers-reduced-motion:reduce){
  .rv,.rv-s,.rm,.rl > span{opacity:1 !important;transform:none !important;clip-path:none !important;transition:none !important}
  *{animation-duration:.01ms !important;transition-duration:.01ms !important}
  html{scroll-behavior:auto !important}
}

/* ── 04 · CURSEUR ────────────────────────────────────────────────────── */
.cur,.cur-d{position:fixed;top:0;left:0;pointer-events:none;z-index:300;
  border-radius:50%;mix-blend-mode:difference;will-change:transform}
.cur{width:7px;height:7px;background:#fff;margin:-3.5px 0 0 -3.5px}
.cur-d{width:34px;height:34px;border:1px solid rgba(255,255,255,.55);margin:-17px 0 0 -17px;
  transition:width .35s var(--e),height .35s var(--e),margin .35s var(--e),opacity .3s,border-color .3s}
body.cur-on .cur-d{width:62px;height:62px;margin:-31px 0 0 -31px;border-color:rgba(255,255,255,.9)}
body.cur-hide .cur,body.cur-hide .cur-d{opacity:0}
@media(hover:none),(max-width:900px){.cur,.cur-d{display:none}}

/* ── 05 · CHARGEMENT ─────────────────────────────────────────────────── */
.loader{position:fixed;inset:0;z-index:350;background:var(--ink);display:grid;place-items:center;
  transition:transform 1s var(--e) .15s;will-change:transform}
.loader.done{transform:translateY(-101%)}
.loader-in{text-align:center;transition:opacity .5s var(--e)}
.loader.done .loader-in{opacity:0}
.loader-mk{font-size:clamp(2.6rem,9vw,5rem);font-weight:900;letter-spacing:-.08em;color:#fff;
  display:flex;justify-content:center;gap:.02em}
.loader-mk span{display:inline-block;opacity:0;transform:translateY(50%);
  animation:lm .7s var(--e) forwards}
@keyframes lm{to{opacity:1;transform:none}}
.loader-bar{width:min(240px,50vw);height:1.5px;background:rgba(255,255,255,.16);margin:26px auto 0;overflow:hidden}
.loader-bar i{display:block;height:100%;width:0;background:#fff;transition:width .25s linear}
.loader-pct{margin-top:14px;font-size:.7rem;letter-spacing:.24em;color:rgba(255,255,255,.6);
  font-variant-numeric:tabular-nums;font-weight:700}
html.no-loader .loader{display:none}

/* Progression de lecture */
.prog{position:fixed;top:0;left:0;height:2px;background:var(--a);z-index:200;width:0;
  transition:width .1s linear;opacity:.9}

/* ── 06 · EN-TÊTE ────────────────────────────────────────────────────── */
.announce{background:var(--ink);color:rgba(255,255,255,.92);text-align:center;
  font-size:.78rem;font-weight:450;padding:10px 20px;position:relative;z-index:60}
.announce b{color:#fff;font-weight:680}
.announce a{border-bottom:1px solid rgba(255,255,255,.32);transition:border-color .3s}
.announce a:hover{border-color:#fff}
.pip{display:inline-block;width:5px;height:5px;border-radius:50%;background:#FF5A1F;
  margin-right:9px;vertical-align:middle;animation:pip 2.6s infinite}
@keyframes pip{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.3;transform:scale(.65)}}

header{position:sticky;top:0;z-index:55;background:rgba(251,250,247,.78);
  backdrop-filter:blur(26px) saturate(180%);-webkit-backdrop-filter:blur(26px) saturate(180%);
  border-bottom:1px solid transparent;transition:border-color .4s var(--e),background .4s var(--e)}
header.stuck{border-bottom-color:var(--line)}
nav.main{display:flex;align-items:center;justify-content:space-between;height:var(--nav-h);gap:16px}
.logo{display:flex;align-items:center;gap:10px;font-weight:900;font-size:1.14rem;letter-spacing:-.075em;flex-shrink:0}
.logo-mk{width:29px;height:29px;border-radius:8px;background:var(--ink);display:grid;place-items:center;
  font-size:.85rem;font-weight:900;letter-spacing:-.05em;color:#fff;position:relative;overflow:hidden}
.logo-mk::after{content:"";position:absolute;inset:0;background:var(--v-grad);opacity:0;transition:opacity .45s var(--e)}
.logo:hover .logo-mk::after{opacity:1}
.logo-mk span{position:relative;z-index:2}
.logo-tx{display:inline-flex}
.logo-tx b{font-weight:900;display:inline-block;transition:transform .4s var(--e)}
.logo:hover .logo-tx b:nth-child(1){transform:translateY(-2px)}
.logo:hover .logo-tx b:nth-child(3){transform:translateY(2px)}

.nav-mid{display:flex;gap:2px}
.nav-mid a{position:relative;font-size:.855rem;font-weight:550;color:var(--smoke);
  padding:8px 14px;border-radius:9px;transition:color .3s var(--e);white-space:nowrap;overflow:hidden}
.nav-mid a::before{content:"";position:absolute;inset:0;background:rgba(11,11,13,.055);
  border-radius:9px;transform:scale(.85);opacity:0;transition:transform .4s var(--e),opacity .3s}
.nav-mid a:hover{color:var(--ink)}
.nav-mid a:hover::before{transform:none;opacity:1}
.nav-mid a > span{position:relative;z-index:1}
.nav-mid a.on{color:var(--ink);font-weight:650}
.nav-mid a.on::before{opacity:1;transform:none}
.nav-mid a.on.nv{color:var(--v)} .nav-mid a.on.nv::before{background:var(--v-soft)}
.nav-mid a.on.nr{color:var(--r)} .nav-mid a.on.nr::before{background:var(--r-soft)}
.nav-mid a.on.nd{color:var(--d)} .nav-mid a.on.nd::before{background:var(--d-soft)}
.nav-end{display:flex;align-items:center;gap:9px;flex-shrink:0}
.lang{display:flex;background:rgba(11,11,13,.05);border-radius:100px;padding:3px}
.lang button{padding:6px 11px;border-radius:100px;font-size:.72rem;font-weight:800;letter-spacing:.06em;
  color:var(--smoke);transition:all .35s var(--e)}
.lang button.on{background:#fff;color:var(--ink);box-shadow:0 1px 4px rgba(0,0,0,.1)}
.burger{display:none;width:38px;height:38px;border-radius:10px;place-items:center}
.burger i{display:block;width:18px;height:1.8px;background:var(--ink);border-radius:2px;position:relative;transition:background .2s}
.burger i::before,.burger i::after{content:"";position:absolute;left:0;width:18px;height:1.8px;
  background:var(--ink);border-radius:2px;transition:transform .4s var(--e)}
.burger i::before{top:-6px}.burger i::after{top:6px}
.burger.on i{background:transparent}
.burger.on i::before{transform:translateY(6px) rotate(45deg)}
.burger.on i::after{transform:translateY(-6px) rotate(-45deg)}
@media(max-width:1080px){
  .nav-mid{position:fixed;top:calc(var(--nav-h) + 36px);left:0;right:0;background:var(--paper);
    flex-direction:column;gap:2px;padding:14px var(--gut) 26px;border-bottom:1px solid var(--line);
    box-shadow:var(--sh-2);transform:translateY(-125%);transition:transform .55s var(--e);z-index:50}
  .nav-mid.open{transform:none}
  .nav-mid a{padding:14px 14px;font-size:1.02rem;border-radius:11px}
  .burger{display:grid}
  .nav-cta{display:none}
}

/* ── 07 · BOUTONS ────────────────────────────────────────────────────── */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:16px 30px;border-radius:100px;font-weight:640;font-size:.95rem;letter-spacing:-.014em;
  border:1.5px solid transparent;white-space:nowrap;overflow:hidden;isolation:isolate;
  transition:color .4s var(--e),border-color .4s var(--e),transform .5s var(--e),box-shadow .5s var(--e)}
.btn > span{position:relative;z-index:2;display:inline-flex;align-items:center;gap:9px}
/* Couche 0 : fond de repos. Couche 1 : remplissage qui monte au survol.
   Couche 2 : le texte, toujours au-dessus des deux. */
.btn::before{content:"";position:absolute;inset:0;z-index:0;transition:transform .55s var(--e)}
.btn::after{content:"";position:absolute;inset:0;z-index:1;transform:translateY(101%);
  transition:transform .55s var(--e)}
.btn:hover::after{transform:none}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0) scale(.985);transition-duration:.12s}
.btn-a::before{background:var(--a-btn)}
.btn-a{color:#fff;box-shadow:0 12px 26px -14px rgba(var(--a-rgb),.7)}
.btn-a::after{background:var(--ink)}
.btn-v::before{background:var(--v-btn)} .btn-v{color:#fff;box-shadow:0 12px 26px -14px rgba(216,65,42,.65)} .btn-v::after{background:var(--ink)}
.btn-r::before{background:var(--r-btn)} .btn-r{color:#fff;box-shadow:0 12px 26px -14px rgba(22,104,201,.6)} .btn-r::after{background:var(--ink)}
.btn-d::before{background:var(--d-btn)} .btn-d{color:#fff;box-shadow:0 12px 26px -14px rgba(107,75,196,.6)} .btn-d::after{background:var(--ink)}
.btn-ink::before{background:var(--ink)} .btn-ink{color:#fff} .btn-ink::after{background:var(--a-btn)}
.btn-out{color:var(--ink);border-color:var(--line-2)}
.btn-out::before{background:#fff} .btn-out::after{background:var(--ink)}
.btn-out:hover{color:#fff;border-color:var(--ink)}
.btn-ghost{color:#fff;border-color:rgba(255,255,255,.28)}
.btn-ghost::before{background:transparent} .btn-ghost::after{background:#fff}
.btn-ghost:hover{color:var(--ink);border-color:#fff}
.btn-s{padding:9px 18px;font-size:.845rem}
.btn-l{padding:19px 36px;font-size:1.01rem}
.btn-full{width:100%}
/* Flèche du bouton : pastille PLEINE dans la couleur du texte, flèche dans la
   couleur opposée. Elle se détache franchement du bouton au repos comme au
   survol, et se trouve dans la couche du texte : jamais recouverte. */
.btn .ar{position:relative;z-index:2;flex-shrink:0;display:inline-grid;place-items:center;
  width:27px;height:27px;border-radius:50%;margin:-4px -9px -4px 3px;
  background:currentColor;
  transition:transform .5s var(--e),background .4s var(--e)}
.btn .ar svg{width:13px;height:13px;stroke:var(--ar-ink,#0B0B0D);stroke-width:3;
  transition:transform .5s var(--e),stroke .4s var(--e)}
.btn:hover .ar{transform:translateX(4px)}
.btn:hover .ar svg{transform:translateX(1px)}
.btn-l .ar{width:31px;height:31px;margin-right:-11px}
.btn-l .ar svg{width:14px;height:14px}

/* Boutons à texte clair : pastille claire, flèche foncée */
.btn-a,.btn-v,.btn-r,.btn-d,.btn-ink,.btn-ghost{--ar-ink:#0B0B0D}
/* Boutons à texte foncé : pastille foncée, flèche claire */
.btn-out{--ar-ink:#FBFAF7}
/* Inversions au survol, quand la couleur du texte bascule */
.btn-out:hover{--ar-ink:#0B0B0D}
.btn-ghost:hover{--ar-ink:#FBFAF7}
.hero .btn-a:hover,.dark .btn-a:hover{--ar-ink:#FBFAF7}

.btn svg{transition:transform .45s var(--e)}
/* Lien souligné animé */
.ul{position:relative;font-weight:640;display:inline-block}
.ul::after{content:"";position:absolute;left:0;bottom:-2px;width:100%;height:1.4px;background:currentColor;
  transform:scaleX(0);transform-origin:right;transition:transform .5s var(--e)}
.ul:hover::after{transform:scaleX(1);transform-origin:left}

/* ── 08 · BLOCS ──────────────────────────────────────────────────────── */
.card{background:#fff;border:1px solid var(--line);border-radius:var(--rad-xl);padding:32px 28px;
  transition:transform .6s var(--e),box-shadow .6s var(--e),border-color .4s}
.card:hover{transform:translateY(-5px);box-shadow:var(--sh-3)}
.chip{display:inline-flex;align-items:center;gap:8px;padding:8px 15px;border-radius:100px;
  font-size:.78rem;font-weight:560;background:#fff;border:1px solid var(--line);color:#474C55;box-shadow:var(--sh-1)}
.chip svg{width:12px;height:12px;flex-shrink:0;color:var(--ok)}
.dark .chip{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.14);color:rgba(255,255,255,.8)}
.dark .chip svg{color:#4ADE9B}
.pill{display:inline-block;font-size:.645rem;font-weight:850;letter-spacing:.15em;
  text-transform:uppercase;padding:6px 13px;border-radius:100px}
.pill-v{background:var(--v-soft);color:var(--v)}
.pill-r{background:var(--r-soft);color:var(--r)}
.pill-d{background:var(--d-soft);color:var(--d)}
.pill-ok{background:var(--ok-soft);color:var(--ok)}
.pill-a{background:var(--a-soft);color:var(--a)}
.grid{display:grid;gap:18px}
.g2{grid-template-columns:1fr 1fr}
.g3{grid-template-columns:repeat(3,1fr)}
@media(max-width:1000px){.g3{grid-template-columns:repeat(2,1fr)}}
@media(max-width:760px){.g2,.g3{grid-template-columns:1fr}}
.sh{max-width:720px;margin-bottom:52px}
.sh.mid{text-align:center;margin-left:auto;margin-right:auto}
.sh h2{margin-bottom:18px}
@media(max-width:900px){.sh{margin-bottom:38px}}
.tint{background:var(--paper-2)}
.dark{background:var(--ink);color:#fff}

/* Grain + trame */
.grain{position:absolute;inset:0;pointer-events:none;opacity:.5;mix-blend-mode:overlay;z-index:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.055'/%3E%3C/svg%3E")}
.gridlines{position:absolute;inset:0;pointer-events:none;opacity:.4;z-index:0;
  background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
  background-size:80px 80px;
  -webkit-mask-image:radial-gradient(ellipse 78% 70% at 50% 36%,#000 22%,transparent 76%);
  mask-image:radial-gradient(ellipse 78% 70% at 50% 36%,#000 22%,transparent 76%)}
.gridlines.light{background-image:linear-gradient(rgba(11,11,13,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(11,11,13,.04) 1px,transparent 1px)}
.aura{position:absolute;border-radius:50%;filter:blur(90px);pointer-events:none;z-index:0;opacity:.5}

/* ── 09 · HÉROS ──────────────────────────────────────────────────────── */
.hero{position:relative;background:var(--ink);color:#fff;overflow:hidden;isolation:isolate;
  min-height:clamp(560px,86vh,880px);display:flex;align-items:center;
  margin-top:calc(var(--nav-h) * -1);padding:calc(var(--nav-h) + 78px) 0 72px}
.hero .wrap{position:relative;z-index:2}
.hero h1{color:#fff}
.hero-tag{display:inline-flex;align-items:center;gap:10px;padding:8px 16px;border-radius:100px;
  font-size:.68rem;font-weight:780;letter-spacing:.18em;text-transform:uppercase;margin-bottom:30px;
  background:rgba(255,255,255,.07);color:rgba(255,255,255,.82);border:1px solid rgba(255,255,255,.1)}
.hero-sub{font-size:clamp(1.02rem,1.55vw,1.2rem);max-width:44em;margin:26px 0 0;
  line-height:1.6;color:rgba(255,255,255,.72)}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:38px}
.hero-scroll{position:absolute;left:var(--gut);bottom:30px;z-index:2;display:flex;align-items:center;gap:11px;
  font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.55);font-weight:700}
.hero-scroll i{display:block;width:1px;height:34px;background:linear-gradient(rgba(255,255,255,.45),transparent);
  animation:sc 2.2s var(--e-soft) infinite}
@keyframes sc{0%{transform:scaleY(0);transform-origin:top}45%{transform:scaleY(1);transform-origin:top}
  55%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
@media(max-width:760px){.hero-scroll{display:none}}
/* En-tête de page secondaire */
.phead{position:relative;background:var(--ink);color:#fff;overflow:hidden;isolation:isolate;
  margin-top:calc(var(--nav-h) * -1);padding:calc(var(--nav-h) + 62px) 0 62px}
.phead .wrap{position:relative;z-index:2}
.phead h1{color:#fff;font-size:clamp(2.1rem,5vw,4.1rem);max-width:17ch}
.phead .lead{color:rgba(255,255,255,.72);max-width:52em;margin-top:20px}
.phead.mid{text-align:center}
.phead.mid h1,.phead.mid .lead{margin-left:auto;margin-right:auto}
.pmark{display:inline-flex;align-items:center;gap:13px;margin-bottom:22px}
.pmark-ic{width:44px;height:44px;border-radius:13px;display:grid;place-items:center;color:#fff;
  background:var(--a-btn);flex-shrink:0}
.pmark-ic svg{width:20px;height:20px}
.pmark b{font-size:.94rem;font-weight:800;letter-spacing:-.02em;display:block;line-height:1.2;color:#fff}
.pmark span{font-size:.77rem;color:rgba(255,255,255,.66)}
.phead-cta{display:flex;gap:11px;flex-wrap:wrap;margin-top:32px}
.phead.mid .phead-cta{justify-content:center}

/* Marquee */
.mq{background:var(--ink);border-top:1px solid rgba(255,255,255,.08);
  border-bottom:1px solid rgba(255,255,255,.08);overflow:hidden;padding:19px 0;position:relative}
.mq::before,.mq::after{content:"";position:absolute;top:0;bottom:0;width:130px;z-index:2;pointer-events:none}
.mq::before{left:0;background:linear-gradient(90deg,var(--ink),transparent)}
.mq::after{right:0;background:linear-gradient(-90deg,var(--ink),transparent)}
.mq-t{display:flex;width:max-content;animation:mq 42s linear infinite}
.mq:hover .mq-t{animation-play-state:paused}
@keyframes mq{to{transform:translateX(-50%)}}
.mq-t span{display:flex;align-items:center;gap:44px;padding-right:44px;white-space:nowrap;
  font-size:.74rem;font-weight:650;letter-spacing:.17em;text-transform:uppercase;color:rgba(255,255,255,.5)}
.mq-t span::after{content:"";width:4px;height:4px;border-radius:50%;background:#FF5A1F;opacity:.8}

/* Compteur à rouleaux */
/* Compteur à rouleaux : fenêtre d'exactement une ligne, lignes de 1 em */
.odo{display:inline-flex;align-items:baseline;font-variant-numeric:tabular-nums;line-height:1}
.odo-c{display:inline-block;overflow:hidden;height:1em;line-height:1}
.odo-c i{display:block;font-style:normal;line-height:1;will-change:transform;
  transform:translateY(-10em);                 /* repos : chiffre final visible */
  transition:transform 1.6s cubic-bezier(.22,1,.36,1)}
/* Chaque ligne est remise à zéro : aucune marge ni style hérité du conteneur
   ne doit modifier sa hauteur, sinon le rouleau s'arrête au mauvais endroit. */
.odo-c i .odo-d{display:block;height:1em;line-height:1;margin:0;padding:0;border:0;
  font-size:inherit;font-weight:inherit;font-style:normal;letter-spacing:inherit;text-align:center}
.odo-x{display:inline-block}
.stat{border-top:1px solid var(--line);padding-top:26px}
.dark .stat{border-color:rgba(255,255,255,.14)}
.stat b{display:block;font-size:clamp(2.8rem,6vw,4.6rem);font-weight:900;letter-spacing:-.06em;
  line-height:1;margin-bottom:16px;color:var(--ink)}
.dark .stat b{color:#fff}
.stat b em{font-style:normal;background:var(--a-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.stat p{font-size:.93rem;line-height:1.55;max-width:30ch}

/* Section épinglée — les deux voies */
.pin{position:relative}
.pin-track{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:stretch}
@media(max-width:900px){.pin-track{grid-template-columns:1fr}}
.way{position:relative;background:#fff;border:1.5px solid var(--line);border-radius:var(--rad-2xl);
  overflow:hidden;display:flex;flex-direction:column;isolation:isolate;
  transition:transform .65s var(--e),box-shadow .65s var(--e),border-color .45s var(--e)}
.way::before{content:"";position:absolute;inset:0;z-index:0;opacity:0;transition:opacity .6s var(--e)}
.way.v::before{background:radial-gradient(600px 300px at 50% 0%,rgba(216,65,42,.07),transparent 70%)}
.way.r::before{background:radial-gradient(600px 300px at 50% 0%,rgba(22,104,201,.07),transparent 70%)}
.way:hover{transform:translateY(-8px);box-shadow:var(--sh-4)}
.way:hover::before{opacity:1}
.way.v:hover{border-color:#EFB2A5} .way.r:hover{border-color:#A6C9EF}
.way-band{height:5px;position:relative;z-index:1}
.way.v .way-band{background:var(--v-grad)} .way.r .way-band{background:var(--r-grad)}
.way-in{padding:36px 32px 32px;display:flex;flex-direction:column;flex:1;position:relative;z-index:1}
@media(max-width:560px){.way-in{padding:26px 22px 24px}}
.way-no{position:absolute;top:26px;right:30px;font-family:var(--serif);font-size:3.2rem;line-height:1;
  color:var(--ink);opacity:.07;font-style:normal}
.way-q{font-size:1.02rem;font-weight:660;color:var(--ink);margin:16px 0 8px;line-height:1.4}
.way h3{font-size:1.78rem;letter-spacing:-.05em;margin:0 0 13px}
.way-p{font-size:.93rem;line-height:1.58;margin-bottom:22px}
.way-price{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:19px 0;margin-bottom:20px}
.way-amt{font-size:2rem;font-weight:900;letter-spacing:-.055em;line-height:1;display:flex;align-items:baseline;gap:6px;font-variant-numeric:tabular-nums}
.way-amt small{font-size:.8rem;font-weight:700;color:var(--smoke)}
.way-mode{font-size:.68rem;font-weight:850;letter-spacing:.14em;text-transform:uppercase;margin-top:10px;
  display:inline-block;padding:5px 11px;border-radius:6px}
.way.v .way-mode{background:var(--v-soft);color:var(--v)}
.way.r .way-mode{background:var(--r-soft);color:var(--r)}
.way-li{display:flex;gap:10px;align-items:flex-start;font-size:.9rem;padding:7px 0;color:#3A3F48;line-height:1.48}
.way-li svg{width:14px;height:14px;flex-shrink:0;margin-top:5px}
.way.v .way-li svg{color:var(--v)} .way.r .way-li svg{color:var(--r)}
.way-foot{margin-top:auto;padding-top:24px}
.way-not{font-size:.83rem;color:var(--smoke-2);margin-top:15px;line-height:1.5;padding-top:15px;border-top:1px dashed var(--line)}

/* Bande Duo */
.duoband{background:var(--ink);border-radius:var(--rad-2xl);padding:36px 38px;display:flex;
  align-items:center;justify-content:space-between;gap:28px;flex-wrap:wrap;position:relative;overflow:hidden;isolation:isolate}
.duoband::before{content:"";position:absolute;inset:0;background:var(--d-grad);opacity:.18;z-index:0}
.duoband .grain{opacity:.6}
.duoband > *{position:relative;z-index:2}
.duoband h3{color:#fff;font-size:1.34rem;margin-bottom:8px}
.duoband p{color:rgba(255,255,255,.76);font-size:.93rem;max-width:56ch;margin:0}
@media(max-width:760px){.duoband{padding:28px 24px}}

/* ── Diagnostic ──────────────────────────────────────────────────────── */
.diag{background:#fff;border:1.5px solid var(--line);border-radius:var(--rad-2xl);
  padding:clamp(26px,3.8vw,46px);max-width:820px;margin:0 auto;box-shadow:var(--sh-2)}
.dq{margin-bottom:26px}
.dq-q{font-size:1.02rem;font-weight:700;margin-bottom:14px;letter-spacing:-.025em;display:flex;gap:12px;align-items:flex-start}
.dq-n{width:24px;height:24px;border-radius:50%;background:var(--paper-2);color:var(--smoke);
  display:grid;place-items:center;font-size:.73rem;font-weight:800;flex-shrink:0;margin-top:2px;transition:all .4s var(--e)}
.dq.done .dq-n{background:var(--ink);color:#fff}
.dq-opts{display:flex;flex-wrap:wrap;gap:8px;padding-left:36px}
@media(max-width:560px){.dq-opts{padding-left:0}}
.dq-o{position:relative;padding:11px 18px;border-radius:100px;border:1.5px solid var(--line);background:#fff;
  font-size:.89rem;font-weight:560;color:#3A3F48;transition:all .4s var(--e);text-align:left;overflow:hidden}
.dq-o:hover{border-color:var(--smoke-2);transform:translateY(-2px)}
.dq-o.on{background:var(--ink);color:#fff;border-color:var(--ink);transform:none}
.diag-out{margin-top:26px;padding:26px 28px;border-radius:var(--rad-l);background:var(--paper);
  border:1px solid var(--line);display:none}
.diag-out.show{display:block;animation:pop .6s var(--e)}
@keyframes pop{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.diag-out h3{font-size:1.3rem;margin:11px 0 10px;letter-spacing:-.035em}
.diag-out p{font-size:.94rem;margin-bottom:18px}
.diag-hint{font-size:.82rem;color:var(--smoke);text-align:center;margin-top:18px}

/* Cartes fonctionnalité + étapes */
.feat{position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--rad-l);
  padding:26px 24px;overflow:hidden;transition:transform .55s var(--e),box-shadow .55s var(--e),border-color .4s}
.feat::after{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:var(--a-grad);
  transform:scaleX(0);transform-origin:left;transition:transform .65s var(--e)}
.feat:hover{transform:translateY(-5px);box-shadow:var(--sh-2)}
.feat:hover::after{transform:none}
.feat-ic{width:36px;height:36px;border-radius:11px;display:grid;place-items:center;margin-bottom:15px;
  background:var(--a-soft);color:var(--a);transition:transform .5s var(--e)}
.feat:hover .feat-ic{transform:scale(1.08) rotate(-4deg)}
.feat-ic svg{width:16px;height:16px}
.feat h3{font-size:.99rem;margin-bottom:7px}
.feat p{font-size:.875rem;line-height:1.55}
.step{position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--rad-l);padding:28px 25px;
  transition:transform .55s var(--e),box-shadow .55s var(--e)}
.step:hover{transform:translateY(-5px);box-shadow:var(--sh-2)}
.step-t{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}
.step-n{width:38px;height:38px;border-radius:12px;background:var(--ink);color:#fff;display:grid;
  place-items:center;font-weight:850;font-size:.92rem;transition:background .5s var(--e),transform .5s var(--e)}
.step:hover .step-n{background:var(--a-btn);transform:rotate(-6deg)}
.step h3{margin-bottom:8px}
.step p{font-size:.89rem}
.pnum{font-family:var(--serif);font-size:2.7rem;line-height:1;display:block;margin-bottom:14px;font-style:normal;
  background:var(--a-grad);-webkit-background-clip:text;background-clip:text;color:transparent;opacity:.5}

/* Tarifs */
.pr-g{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;align-items:stretch}
@media(max-width:1000px){.pr-g{grid-template-columns:1fr;max-width:480px;margin:0 auto}}
.pr{position:relative;background:#fff;border:1.5px solid var(--line);border-radius:var(--rad-2xl);padding:36px 28px;
  display:flex;flex-direction:column;overflow:hidden;transition:transform .6s var(--e),box-shadow .6s var(--e),border-color .4s}
.pr:hover{transform:translateY(-7px);box-shadow:var(--sh-3)}
.pr.hot{border-color:var(--a);box-shadow:var(--sh-2)}
.pr.hot::before{content:"";position:absolute;inset:0;background:radial-gradient(500px 240px at 50% 0%,rgba(var(--a-rgb),.06),transparent 70%);pointer-events:none}
.pr-tag{position:absolute;top:0;left:50%;transform:translateX(-50%);font-size:.6rem;font-weight:850;
  letter-spacing:.16em;text-transform:uppercase;padding:6px 18px;border-radius:0 0 12px 12px;color:#fff;background:var(--a-btn)}
.pr h3{font-size:1.16rem;margin-bottom:6px}
.pr-sub{font-size:.86rem;color:var(--smoke);margin-bottom:22px;min-height:2.8em;line-height:1.44}
.pr-amt{font-size:2.5rem;font-weight:900;letter-spacing:-.055em;line-height:1;display:flex;align-items:baseline;gap:5px;font-variant-numeric:tabular-nums}
.pr-amt small{font-size:.85rem;font-weight:700;color:var(--smoke)}
.pr-mode{font-size:.66rem;font-weight:850;letter-spacing:.14em;text-transform:uppercase;
  background:var(--a-soft);color:var(--a);padding:5px 11px;border-radius:6px;display:inline-block;margin:13px 0}
.pr-setup{font-size:.83rem;font-weight:650;color:var(--ink);background:var(--paper-2);border-radius:9px;
  padding:9px 12px;margin-bottom:22px;display:block}
.pr ul{list-style:none;flex:1;margin-bottom:26px}
.pr li{display:flex;gap:11px;align-items:flex-start;font-size:.895rem;padding:9px 0;
  border-bottom:1px solid var(--paper-2);color:var(--smoke);line-height:1.45}
.pr li:last-child{border-bottom:0}
.pr li svg{width:14px;height:14px;color:var(--a);flex-shrink:0;margin-top:4px}
.pr li.off{color:var(--smoke-2)}
.pr li.off svg{color:var(--smoke-2);opacity:.45}

/* Tableaux */
.tbl-w{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:var(--rad-xl);border:1px solid var(--line);background:#fff;box-shadow:var(--sh-1)}
table.t{width:100%;border-collapse:collapse;min-width:660px}
.t th,.t td{padding:17px 19px;text-align:left;border-bottom:1px solid var(--line);font-size:.885rem;vertical-align:top}
.t thead th{font-size:.65rem;letter-spacing:.15em;text-transform:uppercase;font-weight:850;color:var(--smoke);background:var(--paper-2);position:sticky;top:0}
.t thead th.hv{background:var(--v);color:#fff} .t thead th.hr{background:var(--r);color:#fff} .t thead th.hd{background:var(--d);color:#fff}
.t tbody td{color:var(--smoke)}
.t tbody th{font-weight:640;color:var(--ink);width:26%;font-size:.885rem}
.t tbody tr{transition:background .3s}
.t tbody tr:hover{background:var(--paper)}
.t td.cv{background:rgba(216,65,42,.045);color:var(--ink);font-weight:600}
.t td.cr{background:rgba(22,104,201,.045);color:var(--ink);font-weight:600}
.t td.cd{background:rgba(107,75,196,.05);color:var(--ink);font-weight:640}
.t tr:last-child td,.t tr:last-child th{border-bottom:0}
.yes{color:var(--ok);font-weight:750} .no{color:var(--smoke-2)}

/* Calculateur */
.calc{background:#fff;border:1.5px solid var(--line);border-radius:var(--rad-2xl);
  padding:clamp(24px,3.6vw,42px);max-width:840px;margin:0 auto;box-shadow:var(--sh-2)}
.calc-r{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:14px;flex-wrap:wrap}
.calc-r label{font-size:.91rem;flex:1 1 235px;color:#3A3F48;font-weight:520}
.calc-c{display:flex;align-items:center;gap:12px}
.calc input[type=range]{-webkit-appearance:none;appearance:none;width:172px;height:3px;border-radius:99px;
  background:var(--line);outline:none}
.calc input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:17px;height:17px;border-radius:50%;
  background:var(--r);cursor:grab;box-shadow:0 2px 8px rgba(22,104,201,.4);transition:transform .25s var(--e)}
.calc input[type=range]::-webkit-slider-thumb:active{cursor:grabbing;transform:scale(1.2)}
.calc input[type=range]::-moz-range-thumb{width:17px;height:17px;border:0;border-radius:50%;background:var(--r);cursor:grab}
.calc input[type=number]{font:inherit;font-size:.88rem;width:96px;padding:8px 11px;border:1px solid var(--line);
  border-radius:9px;background:var(--paper);text-align:right;font-variant-numeric:tabular-nums;transition:border-color .3s}
.calc input[type=number]:focus{outline:0;border-color:var(--r)}
.calc-v{font-variant-numeric:tabular-nums;font-weight:780;min-width:54px;text-align:right;font-size:.91rem}
.calc-out{position:relative;background:var(--ink);color:#fff;border-radius:var(--rad-l);padding:26px 28px;margin-top:26px;overflow:hidden}
.calc-out .lbl{font-size:.64rem;text-transform:uppercase;letter-spacing:.18em;opacity:.68;margin-bottom:8px;font-weight:800}
.calc-out .big{font-size:clamp(2.1rem,4.8vw,3.1rem);font-weight:900;letter-spacing:-.055em;line-height:1;
  font-variant-numeric:tabular-nums;background:var(--r-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.calc-note{font-size:.84rem;color:rgba(255,255,255,.66);margin-top:16px;line-height:1.6}
.calc-hyp{font-size:.78rem;color:var(--smoke);margin-top:16px;text-align:center;line-height:1.6}
.calc-sep{border:0;border-top:1px dashed var(--line);margin:20px 0}

/* Avant / après */
.frame{max-width:1000px;margin:0 auto;background:#26272C;border-radius:16px;padding:11px 11px 0;
  box-shadow:0 60px 110px -46px rgba(0,0,0,.8),0 0 0 1px rgba(255,255,255,.07)}
.fr-bar{display:flex;align-items:center;gap:6px;padding:0 5px 11px}
.fr-bar i{width:9px;height:9px;border-radius:50%;display:block}
.fr-url{flex:1;margin-left:8px;background:rgba(255,255,255,.08);border-radius:6px;padding:5px 13px;
  font-size:.66rem;color:rgba(255,255,255,.5);font-family:ui-monospace,Menlo,monospace;letter-spacing:0}
.ba{position:relative;border-radius:9px 9px 0 0;overflow:hidden;user-select:none;aspect-ratio:16/9;background:#fff;cursor:ew-resize;touch-action:pan-y}
@media(max-width:780px){.ba{aspect-ratio:4/5}}
.ba-p{position:absolute;inset:0;overflow:hidden}
.ba-new{clip-path:inset(0 0 0 50%)}
.ba-in{position:absolute;inset:0;display:flex;flex-direction:column}
.old{background:#D8D8D2;font-family:'Times New Roman',Times,serif;overflow:hidden}
.old-top{background:#00308F;color:#FFEB3B;padding:7px 14px;font-size:clamp(.56rem,1.35vw,.84rem);font-weight:700;text-align:center}
.old-nav{background:#B9B9B2;padding:5px 14px;font-size:clamp(.48rem,1.1vw,.68rem);color:#00308F;border-bottom:2px solid #8E8E88}
.old-nav u{margin-right:12px}
.old-b{padding:clamp(10px,2.2vw,22px);color:#111;flex:1}
.old h5{font-size:clamp(.88rem,2.6vw,1.65rem);color:#00308F;margin-bottom:9px;text-decoration:underline;font-weight:700}
.old p{font-size:clamp(.54rem,1.25vw,.8rem);color:#2B2B2B;line-height:1.5;margin-bottom:9px;font-family:'Times New Roman',serif}
.old .badimg{background:repeating-linear-gradient(45deg,#BDBDB7,#BDBDB7 10px,#ACACA6 10px,#ACACA6 20px);
  height:clamp(38px,8vw,74px);border:2px inset #999;margin-bottom:10px;display:grid;place-items:center;color:#6A6A64;font-size:clamp(.46rem,1vw,.64rem)}
.old .badbtn{background:linear-gradient(#F0F0F0,#C6C6C6);border:2px outset #BBB;padding:3px 12px;font-size:clamp(.48rem,1.15vw,.7rem);display:inline-block;color:#000}
.old .hit{margin-top:12px;font-size:clamp(.42rem,1vw,.6rem);color:#6A6A64;border-top:1px solid #ADADA7;padding-top:8px}
.new{background:linear-gradient(168deg,#FCFBF8,#EFE9DE);padding:clamp(14px,3.2vw,40px);display:flex;flex-direction:column;justify-content:center}
.new-tag{font-size:clamp(.42rem,.95vw,.62rem);font-weight:850;letter-spacing:.2em;text-transform:uppercase;
  margin-bottom:9px;background:var(--v-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.new h5{font-size:clamp(1rem,3.4vw,2.6rem);font-weight:850;letter-spacing:-.05em;line-height:1.03;margin-bottom:10px;color:var(--ink)}
.new p{font-size:clamp(.54rem,1.35vw,.9rem);color:var(--smoke);line-height:1.55;margin-bottom:16px;max-width:30em}
.new-btns{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:18px}
.new-b1{background:var(--v-grad);color:#fff;font-size:clamp(.48rem,1.2vw,.78rem);font-weight:660;padding:clamp(6px,1.4vw,12px) clamp(11px,2.6vw,25px);border-radius:100px}
.new-b2{border:1px solid #D6CFC1;color:var(--ink);font-size:clamp(.48rem,1.2vw,.78rem);font-weight:600;padding:clamp(6px,1.4vw,12px) clamp(11px,2.6vw,25px);border-radius:100px}
.new-g{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(5px,1vw,11px)}
.new-g i{height:clamp(30px,7vw,82px);border-radius:9px;display:block}
.new-g i:nth-child(1){background:linear-gradient(140deg,#DFD6C5,#C0B49D)}
.new-g i:nth-child(2){background:linear-gradient(140deg,#CDDAD2,#A9BDB2)}
.new-g i:nth-child(3){background:linear-gradient(140deg,#E5D1C9,#C9ABA0)}
.ba-tag{position:absolute;top:14px;font-size:.58rem;font-weight:850;letter-spacing:.16em;text-transform:uppercase;
  padding:6px 14px;border-radius:100px;z-index:4;backdrop-filter:blur(10px)}
.ba-t1{left:14px;background:rgba(11,11,13,.78);color:#fff}
.ba-t2{right:14px;background:var(--v-grad);color:#fff}
.ba-bar{position:absolute;top:0;bottom:0;left:50%;width:2px;background:#fff;z-index:6;box-shadow:0 0 0 1px rgba(11,11,13,.12),0 0 28px rgba(0,0,0,.34)}
.ba-k{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:50px;height:50px;border-radius:50%;
  background:#fff;display:grid;place-items:center;cursor:ew-resize;box-shadow:0 10px 28px rgba(11,11,13,.42);transition:transform .35s var(--e)}
.ba-k:hover{transform:translate(-50%,-50%) scale(1.1)}
.ba-k svg{width:19px;height:19px;color:var(--ink)}

/* À propos */
.ab{display:grid;grid-template-columns:320px 1fr;gap:60px;align-items:start}
@media(max-width:920px){.ab{grid-template-columns:1fr;gap:38px}}
.pf{position:relative;max-width:320px}
.pf::before{content:"";position:absolute;inset:-14px -14px 14px 14px;border-radius:var(--rad-xl);background:var(--v-grad);opacity:.14;z-index:0}
.photo{position:relative;z-index:1;width:100%;aspect-ratio:1;border-radius:var(--rad-xl);overflow:hidden;
  box-shadow:var(--sh-4);background:var(--ink-3)}
.photo img{width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--e);will-change:transform}
.pf:hover .photo img{transform:scale(1.045)}
.pcap{margin-top:24px;padding-top:19px;border-top:1px solid var(--line)}
.pcap b{display:block;font-size:1.06rem;font-weight:850;letter-spacing:-.035em;margin-bottom:4px}
.pcap span{display:block;font-size:.84rem;color:var(--smoke);line-height:1.6}
.ab-tx p{font-size:1.01rem;margin-bottom:16px}
.quote{font-family:var(--serif);font-size:clamp(1.26rem,2.3vw,1.72rem);color:var(--ink);line-height:1.35;
  margin:28px 0;padding-left:24px;border-left:2px solid var(--v);font-style:italic}

/* Confiance */
.trust{background:#fff;border:1px solid var(--line);border-radius:var(--rad-l);padding:26px 23px;height:100%;
  transition:transform .55s var(--e),box-shadow .55s var(--e)}
.trust:hover{transform:translateY(-4px);box-shadow:var(--sh-2)}
.trust-ic{width:34px;height:34px;border-radius:10px;background:var(--ok-soft);color:var(--ok);display:grid;place-items:center;margin-bottom:14px}
.trust-ic svg{width:16px;height:16px}
.trust h3{font-size:.97rem;margin-bottom:7px}
.trust p{font-size:.87rem;line-height:1.55}
.never{position:relative;background:var(--ink);border-radius:var(--rad-2xl);padding:clamp(30px,3.8vw,46px);color:#fff;overflow:hidden;isolation:isolate}
.never > *{position:relative;z-index:2}
.never h3{color:#fff;font-size:1.3rem;margin-bottom:22px;letter-spacing:-.035em}
.never-li{display:flex;gap:13px;align-items:flex-start;padding:13px 0;border-bottom:1px solid rgba(255,255,255,.08);
  font-size:.93rem;color:rgba(255,255,255,.82);line-height:1.5;transition:color .3s,padding-left .4s var(--e)}
.never-li:hover{color:#fff;padding-left:6px}
.never-li:last-child{border-bottom:0}
.never-x{width:18px;height:18px;border-radius:50%;background:rgba(255,90,31,.2);color:#FF7A55;display:grid;
  place-items:center;flex-shrink:0;margin-top:3px;font-size:.64rem;font-weight:900}

/* FAQ */
.faq-l{max-width:830px;margin:0 auto}
.faq-cat{font-size:.65rem;font-weight:850;letter-spacing:.16em;text-transform:uppercase;color:var(--smoke);margin:32px 0 12px;padding-left:4px}
.faq-cat:first-child{margin-top:0}
details{background:#fff;border:1px solid var(--line);border-radius:var(--rad-l);margin-bottom:9px;overflow:hidden;
  transition:box-shadow .45s var(--e),border-color .35s}
details[open]{box-shadow:var(--sh-2);border-color:var(--line-2)}
summary{padding:20px 24px;font-weight:640;cursor:pointer;list-style:none;display:flex;justify-content:space-between;
  gap:16px;align-items:center;font-size:.97rem;letter-spacing:-.024em;transition:color .3s}
summary:hover{color:var(--a)}
summary::-webkit-details-marker{display:none}
.chev{width:21px;height:21px;flex-shrink:0;position:relative;transition:transform .45s var(--e)}
.chev::before,.chev::after{content:"";position:absolute;background:var(--a);border-radius:2px}
.chev::before{top:9.5px;left:2px;width:17px;height:2px}
.chev::after{top:2px;left:9.5px;width:2px;height:17px;transition:opacity .35s}
details[open] .chev{transform:rotate(180deg)}
details[open] .chev::after{opacity:0}
.ans{padding:0 24px 23px;font-size:.93rem;color:var(--smoke);line-height:1.7}
.ans b{color:var(--ink);font-weight:640}

/* Contact */
.ct{display:grid;grid-template-columns:.9fr 1.1fr;gap:56px;align-items:start}
@media(max-width:980px){.ct{grid-template-columns:1fr;gap:38px}}
.ct-l p{color:rgba(255,255,255,.72);font-size:1.01rem;margin-bottom:30px}
.ct-d{display:flex;flex-direction:column;gap:9px}
.ct-i{display:flex;align-items:center;gap:15px;padding:17px 20px;border:1px solid var(--line-d);border-radius:var(--rad-l);
  transition:all .45s var(--e);background:rgba(255,255,255,.025)}
.ct-i:hover{border-color:rgba(255,255,255,.34);background:rgba(255,255,255,.06);transform:translateX(6px)}
.ct-ic{width:39px;height:39px;border-radius:11px;background:rgba(255,90,31,.15);display:grid;place-items:center;color:#FF7A55;flex-shrink:0;transition:all .45s var(--e)}
.ct-i:hover .ct-ic{background:var(--v-grad);color:#fff}
.ct-ic svg{width:16px;height:16px}
.ct-i b{display:block;font-size:.94rem;font-weight:640;color:#fff}
.ct-i span{font-size:.8rem;color:rgba(255,255,255,.62)}
form{background:rgba(255,255,255,.03);border:1px solid var(--line-d);border-radius:var(--rad-xl);padding:34px}
.fld{margin-bottom:16px}
.fld label{display:block;font-size:.75rem;font-weight:640;letter-spacing:.04em;color:rgba(255,255,255,.72);margin-bottom:8px;text-transform:uppercase}
.fld input,.fld textarea,.fld select{width:100%;background:rgba(255,255,255,.05);border:1px solid var(--line-d);
  border-radius:11px;padding:14px 16px;color:#fff;font-family:inherit;font-size:.93rem;transition:all .35s var(--e)}
.fld select{appearance:none;cursor:pointer;padding-right:42px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;background-size:16px}
.fld select option{background:#1D1E22;color:#fff}
.fld input:focus,.fld textarea:focus,.fld select:focus{outline:0;border-color:#FF5A1F;background:rgba(255,255,255,.09);box-shadow:0 0 0 4px rgba(255,90,31,.12)}
.fld input::placeholder,.fld textarea::placeholder{color:rgba(255,255,255,.42)}
.fld textarea{resize:vertical;min-height:90px}
.f2{display:grid;grid-template-columns:1fr 1fr;gap:13px}
@media(max-width:560px){.f2{grid-template-columns:1fr}form{padding:24px 20px}}
.fnote{font-size:.77rem;color:rgba(255,255,255,.6);text-align:center;margin-top:15px;line-height:1.6}
.fnote a{color:rgba(255,255,255,.74);border-bottom:1px solid rgba(255,255,255,.28)}
.fok{display:none;background:rgba(15,112,72,.2);border:1px solid rgba(15,112,72,.45);border-radius:13px;
  padding:16px 18px;color:#8FE3B6;font-size:.91rem;margin-bottom:16px}
.ferr{display:none;background:rgba(180,39,28,.22);border:1px solid rgba(255,120,100,.5);border-radius:13px;
  padding:16px 18px;color:#FFB3A6;font-size:.91rem;margin-bottom:16px;line-height:1.5}
.ferr a{color:#fff;font-weight:700;border-bottom:1px solid rgba(255,255,255,.4)}

/* ── 10 · PIED + IMPRESSION ──────────────────────────────────────────── */
footer{position:relative;background:#08080A;color:rgba(255,255,255,.6);padding:74px 0 32px;font-size:.87rem;overflow:hidden}
footer .wrap{position:relative;z-index:2}
.f-word{position:absolute;left:50%;bottom:-3.5vw;transform:translateX(-50%);font-size:clamp(5rem,18vw,15rem);
  font-weight:900;letter-spacing:-.07em;color:rgba(255,255,255,.032);line-height:.8;white-space:nowrap;z-index:1;pointer-events:none}
.f-g{display:grid;grid-template-columns:1.7fr 1fr 1fr 1fr;gap:34px}
@media(max-width:900px){.f-g{grid-template-columns:1fr 1fr;gap:28px}}
@media(max-width:560px){.f-g{grid-template-columns:1fr}}
footer .logo{color:#fff;margin-bottom:15px}
footer .logo-mk{background:var(--ink-3)}
.f-c h4{color:#fff;font-size:.69rem;letter-spacing:.16em;text-transform:uppercase;margin-bottom:15px;font-weight:850}
.f-c a{display:block;color:rgba(255,255,255,.62);padding:5px 0;font-size:.87rem;transition:color .3s,transform .4s var(--e)}
.f-c a:hover{color:#fff;transform:translateX(4px)}
.f-d{color:rgba(255,255,255,.58);font-size:.87rem;line-height:1.7;max-width:27em;margin-bottom:15px}
.f-loc{font-size:.8rem;color:rgba(255,255,255,.56);line-height:1.7}
.f-b{margin-top:52px;padding-top:24px;border-top:1px solid rgba(255,255,255,.08);display:flex;
  justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:.78rem;color:rgba(255,255,255,.56)}
.f-b a{color:rgba(255,255,255,.5)}
.f-b a:hover{color:#fff}
@media print{
  header,.announce,form,.diag,.phead-cta,.hero-cta,.gridlines,.grain,.loader,.cur,.cur-d,.prog,.mq{display:none !important}
  body{font-size:11pt;background:#fff;color:#000}
  section{padding:16pt 0;page-break-inside:avoid}
  .hero,.phead,.dark,footer{background:#fff !important;color:#000 !important}
  .hero h1,.phead h1,.dark h2,.dark h3,.dark p{color:#000 !important}
  .rv,.rv-s,.rm,.rl > span{opacity:1 !important;transform:none !important;clip-path:none !important}
}


/* ═══════════════════════════════════════════════════════════════════════
   GARDE-FOU DE LISIBILITÉ
   Tout texte posé sur un fond sombre est ramené en clair par défaut.
   Les « îlots clairs » (cartes, tableaux, formulaires, comparateur…)
   sont explicitement exclus : ils gardent leurs couleurs sombres.
   ═══════════════════════════════════════════════════════════════════════ */
.hero,.phead,.dark,footer,.never,.duoband,.calc-out,.announce{color:rgba(255,255,255,.72)}

/* Titres : blanc franc */
.hero :is(h1,h2,h3,h4),.phead :is(h1,h2,h3,h4),.dark :is(h1,h2,h3,h4),
footer :is(h1,h2,h3,h4),.never :is(h1,h2,h3,h4),.duoband :is(h1,h2,h3,h4){color:#fff}

/* Texte courant sur fond sombre, hors îlots clairs */
:is(.hero,.phead,.dark,footer,.never,.duoband,.calc-out)
  :is(p,li,small,dd,dt,figcaption,blockquote,address,.lead,.kicker,.f-loc,.quote,.diag-hint,.calc-hyp,.faq-cat,.pcap)
  :not(:is(.card,.feat,.step,.trust,.diag,.calc,.tbl-w,.pr,.way,.chip,.frame,.fld,.old,.new,.p-box,.p-refs,.sg,details,form) *){
  color:rgba(255,255,255,.68)
}
/* Un îlot clair posé sur fond sombre reprend ses couleurs normales */
:is(.hero,.phead,.dark,footer,.never,.duoband)
  :is(.card,.feat,.step,.trust,.diag,.calc,.tbl-w,.pr,.way,.frame,.old,.new,.p-box,.p-refs,.sg,details){color:var(--ink)}
:is(.hero,.phead,.dark,footer,.never,.duoband) :is(.card,.feat,.step,.trust,.pr,.way,.p-box,.sg,details) p{color:var(--smoke)}
:is(.hero,.phead,.dark,footer,.never,.duoband) :is(.card,.feat,.step,.trust,.pr,.way,.sg,details) :is(h1,h2,h3,h4){color:var(--ink)}

/* Gras et emphase : légèrement plus lumineux que le texte courant */
:is(.hero,.phead,.dark,footer,.never,.duoband,.calc-out)
  :is(b,strong) :not(:is(.card,.feat,.step,.trust,.pr,.way,.tbl-w,.p-box,details) *){color:rgba(255,255,255,.94)}

/* Liens sur fond sombre */
:is(.hero,.phead,.dark,footer,.never,.duoband) a:not(.btn):not(.ct-i):not(.logo){color:rgba(255,255,255,.86)}
:is(.hero,.phead,.dark,footer,.never,.duoband) a:not(.btn):not(.ct-i):not(.logo):hover{color:#fff}

/* Le contraire : un bloc sombre posé dans une page claire */
.tint :is(.dark,.never,.duoband,.calc-out) :is(p,li,small){color:rgba(255,255,255,.68)}

/* Sécurité : jamais de texte noir sur noir, ni de blanc sur blanc */
.dark [style*="color:var(--ink)"],.hero [style*="color:var(--ink)"],
.phead [style*="color:var(--ink)"],.never [style*="color:var(--ink)"],
.duoband [style*="color:var(--ink)"]{color:#fff !important}
.dark [style*="color:var(--smoke)"],.hero [style*="color:var(--smoke)"],
.phead [style*="color:var(--smoke)"],.never [style*="color:var(--smoke)"],
.duoband [style*="color:var(--smoke)"]{color:rgba(255,255,255,.68) !important}

/* Pastilles posées sur un fond sombre : verre dépoli, texte clair */
.hero .chip,.phead .chip,.dark .chip,.never .chip,.duoband .chip{
  background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.16);color:rgba(255,255,255,.84);box-shadow:none}
.hero .chip svg,.phead .chip svg,.dark .chip svg,.never .chip svg{color:#5FE0A6}

/* Le filigrane KLARO du pied est décoratif : il est masqué aux lecteurs d'écran
   et ne doit jamais être lu comme du texte. */
.f-word{user-select:none}


/* ═══════════════════════════════════════════════════════════════════════
   TEXTE EN DÉGRADÉ — FILET DE SÉCURITÉ
   « color:transparent + background-clip:text » rend le texte invisible
   si la découpe n'est pas appliquée. On garantit donc toujours une
   couleur de repli lisible, et on interdit les dégradés sombres
   sur fond sombre.
   ═══════════════════════════════════════════════════════════════════════ */
@supports not ((background-clip:text) or (-webkit-background-clip:text)){
  .stat b em,.pnum,.new-tag,.calc-out .big{background:none;color:var(--a)}
  .dark .stat b em,.dark .calc-out .big,.calc-out .big{color:#FF7A55}
}
/* Sur fond sombre, les unités et gros chiffres restent lumineux */
.dark .stat b em,.hero .stat b em{background:linear-gradient(112deg,#FF8A3D,#FF5C8A);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.calc-out .big{background:linear-gradient(112deg,#4FA8F5,#5FD6E8);
  -webkit-background-clip:text;background-clip:text;color:transparent}
/* Le bouton principal ne doit jamais se fondre dans le fond du héros */
.hero .btn-a::before,.dark .btn-a::before{background:var(--v-btn)}
.hero .btn-a,.dark .btn-a{box-shadow:0 14px 30px -14px rgba(255,90,31,.6)}
.hero .btn-a::after,.dark .btn-a::after{background:#fff}
.hero .btn-a:hover,.dark .btn-a:hover{color:var(--ink)}