/* ═══════════════════════════════════════════════════════════════
   UNIK'EAU — v3 « Eau vive »
   Base froide et lumineuse : glacier, marine, bleus du logo.
   Display : Sora · Texte : Instrument Sans · Données : IBM Plex Mono
   ═══════════════════════════════════════════════════════════════ */

:root{
  /* Couleurs */
  --ink:#0A1C30;          /* marine profond, titres */
  --ink-2:#42566E;        /* texte courant */
  --ink-3:#7488A0;        /* légendes */
  --bg:#F2F7FB;           /* glacier */
  --bg-2:#E8F1F8;         /* glacier appuyé */
  --white:#FFFFFF;
  --line:#DCE7F0;
  --blue:#1265C3;         /* bleu logo */
  --blue-d:#0C4C99;
  --cyan:#2EA7E6;         /* dégradé logo */
  --cyan-l:#8FD4F5;
  --hot:#E2503C;          /* levier eau chaude */
  --cold:#2EA7E6;         /* levier eau froide */
  --deep:#061627;         /* section filtration */
  --deep-2:#0B2138;

  /* Typo */
  --f-display:"Sora",system-ui,sans-serif;
  --f-body:"Instrument Sans",system-ui,sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,monospace;

  /* Rythme */
  --wrap:1160px;
  --r-lg:28px;
  --r-md:18px;
  --r-sm:12px;
  --sh-card:0 1px 2px rgba(10,28,48,.05), 0 12px 32px -12px rgba(10,28,48,.12);
  --sh-pop:0 2px 6px rgba(10,28,48,.06), 0 28px 60px -20px rgba(10,28,48,.22);
  --ease:cubic-bezier(.22,.9,.24,1);
}

/* ---------- Base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:84px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;
  font-family:var(--f-body);
  font-size:17px;line-height:1.6;
  color:var(--ink-2);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--blue);text-decoration:none}
h1,h2,h3,h4{font-family:var(--f-display);color:var(--ink);line-height:1.12;margin:0;letter-spacing:-.02em;text-wrap:balance}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
button{font:inherit;cursor:pointer;background:none;border:0;padding:0;color:inherit}
:focus-visible{outline:3px solid var(--cyan);outline-offset:3px;border-radius:4px}
::selection{background:var(--cyan-l);color:var(--ink)}

.skip{position:fixed;left:12px;top:-60px;z-index:200;background:var(--ink);color:#fff;padding:10px 16px;border-radius:10px;transition:top .2s}
.skip:focus{top:12px}

.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:24px}

/* Barre de progression */
.progress{position:fixed;inset:0 0 auto 0;height:3px;z-index:120;background:transparent;pointer-events:none}
.progress span{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--blue),var(--cyan))}

/* Bande de chiffres clés */
.statbar{
  display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-bottom:72px;
}
.stat{
  background:var(--white);border:1px solid var(--line);border-radius:var(--r-md);
  padding:22px 24px;box-shadow:var(--sh-card);text-align:center;
}
.stat b{
  display:block;font-family:var(--f-display);font-weight:800;font-size:clamp(26px,2.6vw,34px);letter-spacing:-.02em;
  background:linear-gradient(100deg,var(--blue) 20%,var(--cyan) 80%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.stat span{display:block;margin-top:4px;font-family:var(--f-mono);font-size:12px;letter-spacing:.06em;color:var(--ink-3)}

/* ---------- Sections ---------- */
.section{padding:104px 0}
.section--white{background:var(--white)}
.section--tint{background:linear-gradient(180deg,var(--bg) 0%,var(--bg-2) 100%)}

.shead{max-width:680px;margin-bottom:56px}
.shead--center{margin-inline:auto;text-align:center}
.shead h2{font-size:clamp(30px,4.4vw,46px);font-weight:700}
.shead__lead{margin-top:18px;font-size:18px;color:var(--ink-2)}

.eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--f-mono);font-size:12.5px;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;color:var(--blue);
  margin-bottom:16px;
}
.eyebrow::before{content:"";width:22px;height:2px;background:linear-gradient(90deg,var(--blue),var(--cyan));border-radius:2px}
.shead--center .eyebrow::after{content:"";width:22px;height:2px;background:linear-gradient(90deg,var(--cyan),var(--blue));border-radius:2px}

/* ---------- Boutons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--f-display);font-weight:600;font-size:15.5px;letter-spacing:-.01em;
  padding:15px 26px;border-radius:999px;
  transition:transform .25s var(--ease),box-shadow .25s var(--ease),background .25s;
  white-space:nowrap;
}
.btn svg{flex:none}
.btn--primary{
  color:#fff;
  background:linear-gradient(135deg,var(--blue) 0%,var(--blue-d) 100%);
  box-shadow:0 1px 0 rgba(255,255,255,.25) inset, 0 10px 24px -8px rgba(18,101,195,.55);
}
.btn--primary:hover{transform:translateY(-2px);box-shadow:0 1px 0 rgba(255,255,255,.25) inset, 0 16px 32px -10px rgba(18,101,195,.6)}
.btn--wa{
  color:#fff;
  background:linear-gradient(135deg,#27B45E,#128C46);
  box-shadow:0 1px 0 rgba(255,255,255,.25) inset, 0 10px 24px -8px rgba(24,150,74,.5);
}
.btn--wa:hover{transform:translateY(-2px)}
.btn--ghost{
  color:var(--ink);
  background:rgba(255,255,255,.66);
  border:1px solid var(--line);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
}
.btn--ghost:hover{transform:translateY(-2px);background:#fff;box-shadow:var(--sh-card)}
.btn--soft{color:var(--blue);background:#EAF3FC;border:1px solid #D3E6F7}
.btn--soft:hover{background:#DFEEFA;transform:translateY(-2px)}
.btn--full{width:100%}

/* ---------- Nav (verre) ---------- */
.nav{
  position:sticky;top:0;z-index:100;
  background:rgba(242,247,251,.72);
  -webkit-backdrop-filter:blur(18px) saturate(1.5);backdrop-filter:blur(18px) saturate(1.5);
  border-bottom:1px solid transparent;
  transition:border-color .3s,background .3s,transform .35s var(--ease);
  will-change:transform;
}
.nav.is-stuck{border-bottom-color:var(--line);background:rgba(242,247,251,.86)}
.nav.nav--hidden{transform:translateY(-100%)}

.nav__inner{
  max-width:var(--wrap);margin-inline:auto;padding:14px 24px;
  display:flex;align-items:center;gap:28px;
}
.nav__brand img{width:118px;height:auto}
.nav__links{display:flex;gap:26px;margin-inline:auto}
.nav__links a{
  font-family:var(--f-display);font-size:14.5px;font-weight:600;color:var(--ink-2);
  transition:color .2s;
}
.nav__links a:hover{color:var(--blue)}
.nav__actions{display:flex;align-items:center;gap:12px}
.nav__actions .btn{padding:11px 20px;font-size:14px}

.burger{display:none;width:44px;height:44px;border-radius:12px;border:1px solid var(--line);background:#fff;place-items:center}
.burger span{display:block;width:18px;height:2px;background:var(--ink);border-radius:2px;position:relative}
.burger span::before,.burger span::after{content:"";position:absolute;left:0;width:18px;height:2px;background:var(--ink);border-radius:2px;transition:transform .25s}
.burger span::before{top:-6px}.burger span::after{top:6px}
.burger[aria-expanded="true"] span{background:transparent}
.burger[aria-expanded="true"] span::before{transform:translateY(6px) rotate(45deg)}
.burger[aria-expanded="true"] span::after{transform:translateY(-6px) rotate(-45deg)}

.mobilemenu{
  position:fixed;inset:64px 12px auto 12px;z-index:99;
  background:rgba(255,255,255,.92);
  -webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);
  border:1px solid var(--line);border-radius:var(--r-md);
  box-shadow:var(--sh-pop);padding:10px;
}
.mobilemenu a{
  display:block;padding:14px 16px;border-radius:10px;
  font-family:var(--f-display);font-weight:600;color:var(--ink);
}
.mobilemenu a:hover{background:var(--bg)}

/* ---------- Héros ---------- */
.hero{position:relative;overflow:clip}
.hero__bg{position:absolute;inset:0;pointer-events:none}
.hero__bg::before{
  content:"";position:absolute;right:-16%;top:-32%;width:70vw;height:70vw;max-width:940px;max-height:940px;
  background:radial-gradient(circle closest-side at 50% 50%, rgba(46,167,230,.20), rgba(46,167,230,0) 100%);
}
.hero__bg::after{
  content:"";position:absolute;left:-14%;bottom:-40%;width:56vw;height:56vw;max-width:760px;max-height:760px;
  background:radial-gradient(circle closest-side at 50% 50%, rgba(18,101,195,.13), rgba(18,101,195,0) 100%);
}
@media (prefers-reduced-motion:no-preference){
  .hero__bg::before{animation:halodrift 22s ease-in-out infinite alternate}
  .hero__bg::after{animation:halodrift 26s ease-in-out infinite alternate-reverse}
  @keyframes halodrift{
    0%{transform:translate(0,0) scale(1)}
    100%{transform:translate(-46px,34px) scale(1.07)}
  }
}

/* Mot rotatif du titre */
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.rot{display:inline-block;height:1.08em;overflow:hidden;vertical-align:bottom}
.rot__list{display:flex;flex-direction:column}
.rot__list i{
  font-style:normal;display:block;height:1.08em;
  background:linear-gradient(100deg,var(--blue) 20%,var(--cyan) 80%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
@media (prefers-reduced-motion:no-preference){
  .rot__list{animation:rotwords 11s cubic-bezier(.77,0,.18,1) infinite}
  @keyframes rotwords{
    0%,19%{transform:translateY(0)}
    25%,44%{transform:translateY(-20%)}
    50%,69%{transform:translateY(-40%)}
    75%,94%{transform:translateY(-60%)}
    100%{transform:translateY(-80%)}
  }
}
.hero__inner{
  min-height:var(--heroh,640px);
  display:grid;grid-template-columns:minmax(0,600px);gap:14px;
  grid-template-areas:"copy" "actions";
  align-content:center;
  padding-block:48px 96px;z-index:1;
}
.hero__copy{grid-area:copy}
.hero__actions{grid-area:actions}
.hero__visual{position:absolute;inset:0;z-index:-1}
.hero__media{position:absolute;inset:0}
.hero__media video,.hero__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 50%}
.hero__videofallback{z-index:0}
.hero__video{z-index:1;pointer-events:none}
/* Teinte bleutée douce + fondu bas pour ancrer la vidéo à la marque et à la page */
.hero__media::before{
  content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:
    radial-gradient(120% 90% at 86% 12%, rgba(46,167,230,.18), transparent 55%),
    linear-gradient(180deg, rgba(242,247,251,.10) 0%, transparent 24%, transparent 70%, rgba(242,247,251,.6) 100%);
}
.hero__media::after{
  content:"";position:absolute;inset:0;z-index:3;
  background:linear-gradient(90deg,
    rgba(242,247,251,.98) 0%, rgba(242,247,251,.95) 26%,
    rgba(242,247,251,.6) 42%, rgba(242,247,251,.12) 60%, rgba(242,247,251,0) 78%);
}
.hero__media .stage__badge{left:auto;right:26px;top:24px;z-index:5}
.hero__media .tap{z-index:5}
.hero__media .tap--hot{right:19%;top:44%;left:auto}
.hero__media .tap--cold{left:53%;top:60%}
.hero__media .tap--net{left:auto;right:19%;bottom:16%}
.hero__eyebrow{margin-bottom:20px}
.hero h1{font-size:clamp(38px,5.6vw,62px);font-weight:800}
.hero h1 em{
  font-style:normal;
  background:linear-gradient(100deg,var(--blue) 20%,var(--cyan) 80%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.hero__lead{margin-top:22px;font-size:19px;max-width:52ch}
.hero__cta{margin-top:26px;display:flex;flex-wrap:wrap;gap:14px}
.hero__proof{
  margin-top:26px;display:flex;flex-wrap:wrap;gap:10px 26px;
  font-family:var(--f-mono);font-size:13px;color:var(--ink-3);
}
.hero__proof li{display:flex;align-items:center;gap:8px}
.hero__proof svg{color:var(--blue)}

/* Scène produit */
@media (prefers-reduced-motion:no-preference){
  .stage__ring{animation:ripple 7.5s ease-out infinite}
  .stage__ring--2{animation-delay:3.75s}
  @keyframes ripple{
    0%{transform:translate(-50%,-50%) scale(.6);opacity:0}
    14%{opacity:.75}
    100%{transform:translate(-50%,-50%) scale(1.12);opacity:0}
  }
}
.stage__badge{
  position:absolute;left:18px;top:18px;z-index:2;
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--f-mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--blue-d);background:rgba(255,255,255,.8);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border:1px solid rgba(211,230,247,.9);border-radius:999px;padding:8px 13px;
}
.stage__badge i{width:7px;height:7px;border-radius:50%;background:#27B45E;box-shadow:0 0 0 4px rgba(39,180,94,.18)}

/* Étiquettes calées sur les leviers de la machine */
.tap{
  position:absolute;z-index:3;
  display:flex;align-items:center;gap:9px;
  background:rgba(255,255,255,.88);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  border:1px solid rgba(220,231,240,.9);border-radius:14px;
  padding:9px 13px;box-shadow:var(--sh-card);
}
.tap i{width:10px;height:10px;border-radius:50%;flex:none}
.tap b{font-family:var(--f-display);font-size:13.5px;font-weight:700;color:var(--ink);letter-spacing:-.01em}
.tap small{display:block;font-family:var(--f-mono);font-size:11px;color:var(--ink-3);line-height:1.2}
.tap--hot{right:-14px;top:24%}
.tap--hot i{background:var(--hot);box-shadow:0 0 0 4px rgba(226,80,60,.16)}
.tap--cold{left:-14px;top:41%}
.tap--cold i{background:var(--cold);box-shadow:0 0 0 4px rgba(46,167,230,.18)}
.tap--net{left:8%;bottom:14px}
.tap--net i{background:var(--blue);box-shadow:0 0 0 4px rgba(18,101,195,.16)}

@media (prefers-reduced-motion:no-preference){
  .tap{animation:tapfloat 5.2s ease-in-out infinite}
  .tap--cold{animation-delay:1.4s}
  .tap--net{animation-delay:2.6s}
  @keyframes tapfloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
}

/* Vagues d'eau animées */
.waves{position:relative;height:88px;margin-top:-88px;pointer-events:none}
.wave{position:absolute;bottom:-1px;left:0;width:200%;height:100%}
@media (prefers-reduced-motion:no-preference){
  .wave--1{animation:wavemove 16s linear infinite}
  .wave--2{animation:wavemove 11s linear infinite reverse}
  .wave--3{animation:wavemove 22s linear infinite}
  @keyframes wavemove{to{transform:translateX(-50%)}}
}


/* Entrée orchestrée du hero */
@media (prefers-reduced-motion:no-preference){
  .hero__copy > *{opacity:0;animation:heroin .85s var(--ease) forwards}
  .hero__copy > *:nth-child(1){animation-delay:.05s}
  .hero__copy > *:nth-child(2){animation-delay:.14s}
  .hero__copy > *:nth-child(3){animation-delay:.26s}
  .hero__copy > *:nth-child(4){animation-delay:.38s}
  .hero__copy > *:nth-child(5){animation-delay:.5s}
  .hero__visual{opacity:0;animation:heroin 1s .3s var(--ease) forwards}
  .hero__actions > *{opacity:0;animation:heroin .85s var(--ease) forwards}
  .hero__actions > *:nth-child(1){animation-delay:.42s}
  .hero__actions > *:nth-child(2){animation-delay:.54s}
  @keyframes heroin{
    from{opacity:0;transform:translateY(26px)}
    to{opacity:1;transform:none}
  }
}

/* Bandeau défilant */
.marquee{
  background:linear-gradient(90deg,var(--blue-d),var(--blue) 45%,var(--cyan));
  color:#fff;overflow:hidden;padding:15px 0;
  border-block:1px solid rgba(255,255,255,.14);
}
.marquee__track{display:flex;width:max-content;gap:0}
.marquee__group{display:flex;align-items:center;gap:44px;padding-right:44px;white-space:nowrap}
.marquee__group span{font-family:var(--f-display);font-weight:600;font-size:14.5px;letter-spacing:.01em}
.marquee__group i{width:5px;height:5px;border-radius:50%;background:rgba(255,255,255,.65);flex:none}
@media (prefers-reduced-motion:no-preference){
  .marquee__track{animation:mq 34s linear infinite}
  @keyframes mq{to{transform:translateX(-50%)}}
}

/* ---------- Principe : bonbonnes vs réseau ---------- */
.compare{display:grid;grid-template-columns:1fr 64px 1fr;gap:22px;align-items:stretch}
.cpanel{
  background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:34px;box-shadow:var(--sh-card);position:relative;overflow:hidden;
}
.cpanel--after{
  border-color:#C7E2F7;
  background:
    linear-gradient(180deg,#fff, #F4FAFF) padding-box,
    linear-gradient(160deg,var(--cyan-l),var(--blue)) border-box;
  border:1px solid transparent;
}
.cpanel__art{
  position:absolute;right:22px;top:20px;opacity:.5;color:#C58B5A;
}
.cpanel__art--blue{color:var(--blue);opacity:.6}
.cpanel__tag{
  display:inline-block;font-family:var(--f-mono);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;
  padding:7px 12px;border-radius:999px;margin-bottom:20px;
}
.cpanel--before .cpanel__art{
  position:absolute;right:22px;top:20px;opacity:.5;color:#C58B5A;
}
.cpanel__art--blue{color:var(--blue);opacity:.6}
.cpanel__tag{background:#F5EDE6;color:#8A6A4C}
.cpanel--after .cpanel__art{
  position:absolute;right:22px;top:20px;opacity:.5;color:#C58B5A;
}
.cpanel__art--blue{color:var(--blue);opacity:.6}
.cpanel__tag{background:#E3F2FD;color:var(--blue-d)}
.cpanel h3{font-size:22px;margin-bottom:16px}
.cpanel li{display:flex;gap:12px;padding:10px 0;border-top:1px dashed var(--line);font-size:16px}
.cpanel li:first-of-type{border-top:0}
.cpanel li svg{flex:none;margin-top:4px}
.cpanel--before li svg{color:#C58B5A}
.cpanel--after li svg{color:var(--blue)}
.compare__arrow{
  align-self:center;display:grid;place-items:center;width:64px;height:64px;border-radius:50%;
  background:linear-gradient(135deg,var(--blue),var(--cyan));color:#fff;
  box-shadow:0 12px 26px -8px rgba(18,101,195,.5);
}

/* ---------- Lieux ---------- */
.places{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.place{
  display:flex;flex-direction:column;align-items:flex-start;gap:4px;
  background:var(--white);border:1px solid var(--line);border-radius:var(--r-md);
  padding:24px 24px 22px;box-shadow:var(--sh-card);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease);
}
.place:hover{transform:translateY(-4px);box-shadow:var(--sh-pop)}
.place__ic{
  width:52px;height:52px;border-radius:16px;display:grid;place-items:center;
  color:var(--pc);background:var(--pb);margin-bottom:12px;
}
.place b{font-family:var(--f-display);font-weight:700;font-size:17px;color:var(--ink);letter-spacing:-.01em}
.place small{font-size:14px;color:var(--ink-3)}

/* ---------- Bande ambiance ---------- */
.lifband{position:relative;overflow:hidden}
.lifband img{display:block;width:100%;height:min(440px,52vw);object-fit:cover;object-position:center 62%}
.lifband__card{
  position:absolute;left:max(24px,calc((100% - var(--wrap)) / 2 + 24px));bottom:34px;
  max-width:420px;
  background:rgba(255,255,255,.82);
  -webkit-backdrop-filter:blur(16px) saturate(1.4);backdrop-filter:blur(16px) saturate(1.4);
  border:1px solid rgba(255,255,255,.75);border-radius:var(--r-md);
  padding:22px 26px;box-shadow:var(--sh-pop);
}
.lifband__card .eyebrow{margin-bottom:8px}
.lifband__txt{font-size:15.5px;color:var(--ink-2)}

/* ---------- Modèles ---------- */
.models{display:grid;grid-template-columns:1fr 1fr;gap:26px;align-items:start}
.mcard{
  background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--sh-card);overflow:hidden;display:flex;flex-direction:column;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease);
}
.mcard:hover{transform:translateY(-5px);box-shadow:var(--sh-pop)}
.mcard__media{
  position:relative;background:linear-gradient(180deg,var(--bg) 0%,var(--bg-2) 100%);
  padding:38px 24px 26px;display:grid;place-items:end center;min-height:320px;
}
.mcard__media img{grid-area:1/1;max-height:290px;width:auto;filter:drop-shadow(0 20px 22px rgba(10,28,48,.22))}
.mcard__media .vimg{opacity:0;transition:opacity .45s ease;pointer-events:none}
.mcard__media .vimg.is-on{opacity:1}
.swatches{display:flex;flex-wrap:wrap;gap:8px}
.sw{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--f-mono);font-size:12px;color:var(--ink-2);
  border:1px solid var(--line);border-radius:999px;padding:7px 13px 7px 8px;
  background:#FAFCFE;transition:border-color .25s,background .25s,color .25s;
}
.sw i{
  width:18px;height:18px;border-radius:50%;flex:none;
  background:linear-gradient(135deg,var(--c1) 50%,var(--c2) 50%);
  border:1px solid rgba(10,28,48,.15);
}
.sw:hover{border-color:#C9DCEC}
.sw.is-on{border-color:var(--blue);color:var(--blue-d);background:#EAF3FC}
.mcard__pin{
  position:absolute;left:20px;top:20px;z-index:3;
  font-family:var(--f-mono);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;
  background:rgba(255,255,255,.85);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  border:1px solid var(--line);border-radius:999px;padding:7px 12px;color:var(--ink-2);
}
.mcard__body{padding:28px 30px 30px;display:flex;flex-direction:column;gap:16px;flex:1}
.mcard__body h3{font-size:24px}
.mcard__body h3 small{display:block;font-family:var(--f-mono);font-size:12px;font-weight:400;letter-spacing:.08em;color:var(--ink-3);margin-top:7px}
.mcard__desc{font-size:16px}
.mcard__chips{display:flex;flex-wrap:wrap;gap:8px}
.mcard__chips span{
  font-family:var(--f-mono);font-size:12px;color:var(--blue-d);
  background:#EAF3FC;border:1px solid #D3E6F7;border-radius:999px;padding:6px 11px;
}
.mcard__price{border:1px solid var(--line);border-radius:var(--r-sm);padding:4px 16px;background:#FAFCFE}
.mcard__price div{display:flex;align-items:baseline;gap:10px;padding:10px 0}
.mcard__price div + div{border-top:1px dashed var(--line)}
.mcard__price span{font-family:var(--f-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);min-width:64px}
.mcard__price b{font-family:var(--f-display);font-weight:700;font-size:16.5px;color:var(--ink);letter-spacing:-.01em}
.mcard__price small{font-size:12.5px;color:var(--ink-3)}
.mcard__cta{margin-top:auto;display:flex;flex-direction:column;gap:10px}
.mcard__cta .btn{width:100%}
.mcard__doc{
  text-align:center;font-family:var(--f-mono);font-size:12px;color:var(--ink-3);
  text-decoration:underline;text-underline-offset:3px;
}
.mcard__doc:hover{color:var(--blue)}

/* ---------- Filtration (sombre) ---------- */
.section--deep{
  background:
    radial-gradient(1100px 480px at 78% -8%, rgba(46,167,230,.14), transparent 62%),
    radial-gradient(900px 460px at 12% 108%, rgba(18,101,195,.16), transparent 60%),
    linear-gradient(180deg,var(--deep) 0%,var(--deep-2) 100%);
  color:#B9CCE0;
}
.section--deep .shead h2{color:#fff}
.section--deep .shead__lead{color:#9FB6CC}
.section--deep .eyebrow{color:var(--cyan)}
.section--deep .eyebrow::before,.section--deep .shead--center .eyebrow::after{background:linear-gradient(90deg,var(--cyan),var(--cyan-l))}

/* ---------- Confiance (bande sombre « eau de Guadeloupe ») ---------- */
.trust__grid{display:grid;grid-template-columns:1.05fr .95fr;gap:52px;align-items:center}
.trust__copy h2{font-size:clamp(28px,4vw,44px);font-weight:700;color:#fff}
.trust .shead__lead{margin-top:18px;max-width:52ch}
.trust__points{margin-top:30px;display:grid;gap:18px}
.trust__point{display:flex;gap:14px;align-items:flex-start}
.trust__ic{
  flex:none;width:44px;height:44px;border-radius:13px;display:grid;place-items:center;color:var(--cyan-l);
  background:rgba(46,167,230,.12);border:1px solid rgba(143,212,245,.22);
}
.trust__point b{display:block;font-family:var(--f-display);font-weight:600;font-size:16.5px;color:#fff;letter-spacing:-.01em}
.trust__point p{margin-top:3px;font-size:14.5px;color:#9FB6CC;line-height:1.5}
.trust__cta{margin-top:32px;display:flex;flex-wrap:wrap;gap:12px}

.btn--glass{
  color:#EAF4FB;background:rgba(255,255,255,.08);
  border:1px solid rgba(143,212,245,.28);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
}
.btn--glass:hover{transform:translateY(-2px);background:rgba(255,255,255,.14)}

.trust__visual{
  position:relative;margin:0;border-radius:var(--r-lg);padding:34px;display:grid;place-items:center;
  background:radial-gradient(80% 70% at 50% 40%, rgba(46,167,230,.10), transparent 70%),linear-gradient(180deg,#08192C,#0A1F35);
  border:1px solid rgba(143,212,245,.16);box-shadow:0 30px 70px -30px rgba(0,0,0,.6);
}
.trust__halo{position:absolute;left:50%;top:44%;width:340px;height:340px;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle,rgba(46,167,230,.22),transparent 65%);filter:blur(30px);pointer-events:none}
.trust__visual img{position:relative;max-height:360px;width:auto;filter:drop-shadow(0 24px 40px rgba(0,0,0,.5))}
.trust__visual figcaption{position:relative;margin-top:18px;font-family:var(--f-mono);font-size:12px;letter-spacing:.03em;color:#8FB0CC;text-align:center;max-width:36ch}

@media (max-width:920px){
  .trust__grid{grid-template-columns:1fr;gap:32px}
  .trust__visual{padding:26px}
  .trust__visual img{max-height:280px}
}



.lab{
  --acc:#1E86D6;
  display:grid;grid-template-columns:1.05fr .95fr;gap:26px;align-items:stretch;
}
.lab__stage{
  position:relative;min-height:clamp(480px, calc(100vh - 240px), 640px);border-radius:var(--r-lg);overflow:hidden;
  background:
    radial-gradient(70% 60% at 50% 42%, color-mix(in srgb, var(--acc) 16%, transparent), transparent 72%),
    linear-gradient(180deg,#08192C,#0A1F35);
  border:1px solid rgba(143,212,245,.16);
  box-shadow:0 30px 70px -30px rgba(0,0,0,.7);
  transition:background .5s;
}
.lab__grid{
  position:absolute;inset:0;opacity:.5;
  background:
    linear-gradient(rgba(143,212,245,.06) 1px,transparent 1px),
    linear-gradient(90deg,rgba(143,212,245,.06) 1px,transparent 1px);
  background-size:34px 34px;
  -webkit-mask-image:radial-gradient(75% 75% at 50% 45%,#000 30%,transparent 100%);
          mask-image:radial-gradient(75% 75% at 50% 45%,#000 30%,transparent 100%);
}
.lab__glow{
  position:absolute;left:50%;top:50%;width:340px;height:340px;transform:translate(-50%,-52%);
  border-radius:50%;filter:blur(56px);
  background:color-mix(in srgb, var(--acc) 34%, transparent);
  transition:background .5s;
}
.lab__ring{
  position:absolute;left:50%;top:50%;width:330px;height:330px;transform:translate(-50%,-52%);
  border-radius:50%;border:1px dashed color-mix(in srgb, var(--acc) 55%, transparent);
  opacity:.6;
}
@media (prefers-reduced-motion:no-preference){
  .lab__ring{animation:spin 26s linear infinite}
  @keyframes spin{to{transform:translate(-50%,-52%) rotate(360deg)}}
}
.lab__parts i{
  position:absolute;width:4px;height:4px;border-radius:50%;
  background:color-mix(in srgb, var(--acc) 80%, #fff);opacity:.5;
}
.lab__parts i:nth-child(1){left:16%;top:24%}
.lab__parts i:nth-child(2){left:82%;top:20%}
.lab__parts i:nth-child(3){left:12%;top:70%}
.lab__parts i:nth-child(4){left:86%;top:64%}
.lab__parts i:nth-child(5){left:26%;top:88%}
.lab__parts i:nth-child(6){left:70%;top:86%}
.lab__parts i:nth-child(7){left:50%;top:10%}
@media (prefers-reduced-motion:no-preference){
  .lab__parts i{animation:drift 7s ease-in-out infinite}
  .lab__parts i:nth-child(2n){animation-delay:1.6s}
  .lab__parts i:nth-child(3n){animation-delay:3.1s}
  @keyframes drift{0%,100%{transform:translateY(0);opacity:.35}50%{transform:translateY(-14px);opacity:.75}}
}
.lab__scan{
  position:absolute;inset:0;pointer-events:none;opacity:0;
  background:linear-gradient(180deg,transparent 0%, color-mix(in srgb,var(--acc) 26%,transparent) 50%, transparent 100%);
  transform:translateY(-100%);
}
.lab.scanning .lab__scan{opacity:1;animation:scan .6s var(--ease)}
@keyframes scan{to{transform:translateY(100%)}}
.lab__bkt{position:absolute;width:26px;height:26px;border:2px solid color-mix(in srgb,var(--acc) 70%,transparent);opacity:.8}
.lab__bkt--tl{left:16px;top:16px;border-right:0;border-bottom:0;border-radius:8px 0 0 0}
.lab__bkt--tr{right:16px;top:16px;border-left:0;border-bottom:0;border-radius:0 8px 0 0}
.lab__bkt--bl{left:16px;bottom:16px;border-right:0;border-top:0;border-radius:0 0 0 8px}
.lab__bkt--br{right:16px;bottom:16px;border-left:0;border-top:0;border-radius:0 0 8px 0}

.lab__viewer{position:absolute;inset:0}
.mv{position:absolute;inset:0;width:100%;height:100%;opacity:0;pointer-events:none;transition:opacity .7s ease;--poster-color:transparent}
.mv.is-active{opacity:1;pointer-events:auto}

.uvstage{position:absolute;inset:0;display:grid;place-items:center;opacity:0;transition:opacity .7s ease;pointer-events:none}
.uvstage.is-active{opacity:1}
.uvstage__ph{
  position:relative;height:330px;width:auto;
  filter:drop-shadow(0 0 22px rgba(110,215,255,.75)) drop-shadow(0 10px 24px rgba(0,0,0,.45));
}
.uvstage__halo{
  position:absolute;width:320px;height:320px;border-radius:50%;
  background:radial-gradient(circle,rgba(70,205,239,.34),rgba(70,205,239,.08) 52%,transparent 70%);
  filter:blur(4px);
}
.uvstage__rays{position:absolute;width:300px;height:300px}
.uvstage__rays i{
  position:absolute;left:50%;top:50%;width:1.5px;height:120px;
  background:linear-gradient(180deg,rgba(160,235,255,.85),transparent);
  transform-origin:0 0;
}
.uvstage__rays i:nth-child(1){transform:rotate(15deg) translateY(34px)}
.uvstage__rays i:nth-child(2){transform:rotate(75deg) translateY(34px)}
.uvstage__rays i:nth-child(3){transform:rotate(135deg) translateY(34px)}
.uvstage__rays i:nth-child(4){transform:rotate(195deg) translateY(34px)}
.uvstage__rays i:nth-child(5){transform:rotate(255deg) translateY(34px)}
.uvstage__rays i:nth-child(6){transform:rotate(315deg) translateY(34px)}
@media (prefers-reduced-motion:no-preference){
  .uvstage.is-active .uvstage__ph{animation:uvcore 2.4s ease-in-out infinite}
  @keyframes uvcore{
    0%,100%{filter:drop-shadow(0 0 18px rgba(110,215,255,.65)) drop-shadow(0 10px 24px rgba(0,0,0,.45))}
    50%{filter:drop-shadow(0 0 34px rgba(140,230,255,.95)) drop-shadow(0 10px 24px rgba(0,0,0,.45))}
  }
  .uvstage.is-active .uvstage__halo{animation:uvhalo 2.4s ease-in-out infinite}
  @keyframes uvhalo{0%,100%{opacity:.8;transform:scale(1)}50%{opacity:1;transform:scale(1.07)}}
  .uvstage.is-active .uvstage__rays{animation:uvspin 22s linear infinite}
  @keyframes uvspin{to{transform:rotate(360deg)}}
}
.lab__hud{
  position:absolute;left:22px;right:22px;top:20px;z-index:4;
  display:flex;justify-content:space-between;align-items:center;
  font-family:var(--f-mono);font-size:12px;letter-spacing:.1em;
}
.lab__chip{
  color:#EAF6FF;background:color-mix(in srgb,var(--acc) 30%, rgba(6,22,39,.6));
  border:1px solid color-mix(in srgb,var(--acc) 55%, transparent);
  border-radius:999px;padding:7px 13px;
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  transition:background .5s,border-color .5s;
}
.lab__count{color:#7E9CB8}
.lab__count b{color:#fff;font-weight:600}
.lab__drag{
  position:absolute;left:50%;bottom:16px;transform:translateX(-50%);z-index:4;
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--f-mono);font-size:11.5px;color:#7E9CB8;letter-spacing:.06em;
}
.lab__drag svg{width:15px;height:15px}
.lab__drag{transition:opacity .3s}
.lab.is-uv .lab__drag{opacity:0}

.lab__panel{display:flex;flex-direction:column;gap:20px;min-height:clamp(480px, calc(100vh - 240px), 640px)}
.lab__arrow{
  position:absolute;top:50%;transform:translateY(-50%);z-index:6;
  width:50px;height:50px;border-radius:50%;display:grid;place-items:center;
  background:rgba(10,31,53,.74);border:1px solid rgba(143,212,245,.3);color:#EAF6FF;
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  transition:transform .25s var(--ease),border-color .25s,background .25s;
}
.lab__arrow--prev{left:14px}
.lab__arrow--next{right:14px}
.lab__arrow:hover{transform:translateY(-50%) scale(1.1);border-color:var(--cyan);background:rgba(46,167,230,.26)}
.lab__detail{
  position:relative;flex:1;border-radius:var(--r-lg);
  background:rgba(10,31,53,.66);
  border:1px solid rgba(143,212,245,.14);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  overflow:hidden;
}
.dtl{position:absolute;inset:0;padding:36px;opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s var(--ease);pointer-events:none;display:flex;flex-direction:column;justify-content:center}
.dtl.is-active{opacity:1;transform:none;pointer-events:auto}
.dtl__step{font-family:var(--f-mono);font-size:12px;letter-spacing:.14em;color:var(--c,#46CDEF);margin-bottom:14px}
.dtl__name{font-size:32px;color:#fff}
.dtl__name em{
  display:block;font-style:normal;font-size:16px;font-weight:500;margin-top:6px;
  color:color-mix(in srgb, var(--c,#46CDEF) 78%, #fff);
}
.dtl__desc{margin-top:18px;font-size:16.5px;color:#AEC5DA;max-width:44ch}
.dtl__spec{
  margin-top:22px;align-self:flex-start;
  font-family:var(--f-mono);font-size:12px;color:#DCEDF9;
  border:1px solid color-mix(in srgb,var(--c,#46CDEF) 45%,transparent);
  background:color-mix(in srgb,var(--c,#46CDEF) 14%,transparent);
  border-radius:999px;padding:8px 14px;
}
.dtl__meta{
  margin-top:12px;font-family:var(--f-mono);font-size:11.5px;letter-spacing:.06em;
  color:#6E8CA8;display:flex;align-items:center;gap:8px;
}
.dtl__meta::before{content:"";width:14px;height:1px;background:#3A5570}
/* Pipeline : le circuit de l'eau */
.pipe{
  position:relative;margin-bottom:24px;
  display:grid;grid-template-columns:auto repeat(5,1fr) auto;align-items:start;
}
.pipe__tube{
  position:absolute;left:26px;right:26px;top:25px;height:6px;border-radius:6px;
  background:rgba(143,212,245,.13);
  box-shadow:inset 0 1px 2px rgba(0,0,0,.4);
  overflow:hidden;
}
.pipe__tube span{
  display:block;height:100%;width:0;border-radius:6px;
  background:linear-gradient(90deg,var(--blue) 0%,var(--cyan) 70%,var(--cyan-l) 100%);
  box-shadow:0 0 12px rgba(46,167,230,.8);
  transition:width .15s linear;
}
.pipe__cap,.pnode{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:9px}
.pnode button{display:flex;flex-direction:column;align-items:center;gap:9px}
.pipe__dot{
  width:60px;height:60px;cursor:pointer;border-radius:50%;display:grid;place-items:center;
  background:#0A1F35;border:1.5px solid rgba(143,212,245,.22);
  color:#7E9CB8;transition:border-color .3s,background .3s,color .3s,box-shadow .3s,transform .3s var(--ease);
}
.pipe__dot b{font-family:var(--f-display);font-weight:700;font-size:13.5px;letter-spacing:.01em}
.pipe__dot--cap{width:52px;height:52px;color:#5F7E9C}
.pipe__lbl{
  display:flex;flex-direction:column;align-items:center;gap:2px;
  font-family:var(--f-mono);font-size:11px;letter-spacing:.08em;color:#5F7E9C;text-transform:uppercase;
}
.pipe__lbl i{font-style:normal;font-size:9.5px;color:#416080}
.pnode.is-done .pipe__dot{
  background:color-mix(in srgb,var(--c) 26%,#0A1F35);
  border-color:color-mix(in srgb,var(--c) 70%,transparent);
  color:#EAF6FF;
}
.pnode.is-active .pipe__dot{
  background:color-mix(in srgb,var(--c) 34%,#0A1F35);
  border-color:var(--c);color:#fff;transform:scale(1.12);
  box-shadow:0 0 0 5px color-mix(in srgb,var(--c) 22%,transparent), 0 0 24px color-mix(in srgb,var(--c) 55%,transparent);
}
.pnode.is-active .pipe__lbl{color:#DCEDF9}
.pnode.is-active .pipe__lbl i{color:color-mix(in srgb,var(--c) 80%,#fff)}
.pnode button:hover .pipe__dot{border-color:color-mix(in srgb,var(--c) 70%,transparent);transform:scale(1.06)}
.pipe__dot--out.is-live{border-color:var(--cyan);color:#fff;box-shadow:0 0 18px rgba(46,167,230,.55)}
@media (prefers-reduced-motion:no-preference){
  .pnode.is-active .pipe__dot{animation:nodepulse 2.4s ease-in-out infinite}
  @keyframes nodepulse{
    0%,100%{box-shadow:0 0 0 5px color-mix(in srgb,var(--c) 22%,transparent), 0 0 24px color-mix(in srgb,var(--c) 55%,transparent)}
    50%{box-shadow:0 0 0 9px color-mix(in srgb,var(--c) 12%,transparent), 0 0 34px color-mix(in srgb,var(--c) 70%,transparent)}
  }
}

.realstrip{
  margin-top:64px;display:grid;grid-template-columns:auto 1fr;gap:34px;align-items:center;
  background:rgba(10,31,53,.55);border:1px solid rgba(143,212,245,.14);
  border-radius:var(--r-lg);padding:28px 38px 28px 28px;
}
.rack{width:360px}
.rack__title{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:#7FA6C4;margin-bottom:12px;text-align:center}
.rack__bay{
  display:grid;grid-template-columns:repeat(4,1fr);gap:10px;padding:16px;border-radius:18px;
  background:rgba(4,17,31,.85);border:1px solid rgba(143,212,245,.2);
  box-shadow:inset 0 3px 16px rgba(0,0,0,.55), 0 18px 40px -16px rgba(0,0,0,.6);
}
.rack__slot{
  display:flex;flex-direction:column;align-items:center;gap:7px;padding:10px 6px 11px;border-radius:12px;
  background:linear-gradient(180deg,#FBFCFD,#EDF1F5);box-shadow:inset 0 -3px 8px rgba(10,28,48,.14), 0 2px 6px rgba(0,0,0,.35);
}
.rack__slot img{width:100%;max-width:50px;height:auto;border-radius:6px}
.rack__slot b{font-family:var(--f-mono);font-size:10px;letter-spacing:.05em;color:var(--blue-d)}
.rack__slot i{font-style:normal;font-size:9.5px;color:var(--ink-3);text-align:center;line-height:1.25}
.realstrip__cap{display:flex;flex-direction:column;justify-content:center}
.realstrip__cap h3{color:#fff;font-size:22px;margin:4px 0 12px}
.realstrip__cap p{color:#A6BDD3;font-size:16px;max-width:52ch}
.realstrip__cap .eyebrow{color:var(--cyan);margin-bottom:6px}

/* ---------- Parcours ---------- */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;counter-reset:step}
.step{
  position:relative;background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:30px 26px;box-shadow:var(--sh-card);
}
.step::before{
  counter-increment:step;content:counter(step,decimal-leading-zero);
  font-family:var(--f-mono);font-size:12.5px;letter-spacing:.12em;color:var(--blue);
  display:inline-block;background:#EAF3FC;border:1px solid #D3E6F7;border-radius:999px;
  padding:6px 12px;margin-bottom:18px;
}
.step h3{font-size:19px;margin-bottom:10px}
.step p{font-size:15.5px}
.step__ic{position:absolute;right:22px;top:24px;color:var(--cyan);opacity:.85}

/* ---------- Tarifs ---------- */
.pricing-head{display:flex;flex-direction:column;align-items:center;gap:30px}

.seg{
  display:inline-grid;grid-template-columns:1fr 1fr;position:relative;
  background:rgba(255,255,255,.6);
  -webkit-backdrop-filter:blur(16px) saturate(1.4);backdrop-filter:blur(16px) saturate(1.4);
  border:1px solid var(--line);border-radius:999px;padding:5px;
  box-shadow:var(--sh-card);
}
.seg::before{
  content:"";position:absolute;top:5px;bottom:5px;left:5px;width:calc(50% - 5px);
  background:linear-gradient(135deg,var(--blue),var(--blue-d));
  border-radius:999px;transition:transform .35s var(--ease);
  box-shadow:0 8px 18px -6px rgba(18,101,195,.55);
}
.seg[data-mode="achat"]::before{transform:translateX(100%)}
.seg button{
  position:relative;z-index:1;
  font-family:var(--f-display);font-weight:700;font-size:18px;
  padding:17px 52px;border-radius:999px;color:var(--ink-2);
  transition:color .3s;
}
.seg button.is-on{color:#fff}
.seg button small{display:block;font-family:var(--f-mono);font-weight:400;font-size:12px;letter-spacing:.08em;opacity:.75;margin-top:2px}

.mode{display:none}
.mode.is-on{display:block}

.plans{display:grid;grid-template-columns:1fr 1fr;gap:26px;max-width:880px;margin-inline:auto}
.plan{
  position:relative;background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:36px 34px;box-shadow:var(--sh-card);display:flex;flex-direction:column;gap:18px;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease);
}
.plan:hover{transform:translateY(-5px);box-shadow:var(--sh-pop)}
.plan--featured{
  background:
    linear-gradient(180deg,#fff,#F4FAFF) padding-box,
    linear-gradient(160deg,var(--cyan),var(--blue)) border-box;
  border:1.5px solid transparent;
}
.plan__badge{
  position:absolute;top:-14px;left:34px;
  font-family:var(--f-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  color:#fff;background:linear-gradient(135deg,var(--blue),var(--cyan));
  border-radius:999px;padding:7px 14px;box-shadow:0 8px 18px -6px rgba(18,101,195,.5);
}
.plan__for{font-family:var(--f-mono);font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.plan__price{display:flex;align-items:baseline;gap:7px;color:var(--ink)}
.plan__num{font-family:var(--f-display);font-weight:800;font-size:58px;letter-spacing:-.03em;line-height:1}
.plan__cur{font-family:var(--f-display);font-weight:700;font-size:26px}
.plan__unit{font-family:var(--f-mono);font-size:13px;color:var(--ink-3)}
.plan__ttc{margin:8px 0 0;font-family:var(--f-mono);font-size:12.5px;color:var(--ink-3);font-weight:600}
.lterms{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin:22px auto 0;max-width:880px}
.lterm{display:inline-flex;align-items:center;gap:9px;padding:10px 18px;border-radius:999px;background:rgba(18,101,195,.07);border:1px solid var(--line);color:var(--ink);font-size:13.5px;font-weight:600;font-family:var(--f-body)}
.lterm svg{color:var(--blue);flex:none}
.plan__maint{
  font-size:14.5px;color:var(--blue-d);background:#EAF3FC;border:1px solid #D3E6F7;
  border-radius:var(--r-sm);padding:10px 14px;
}
.plan__list{display:flex;flex-direction:column}
.plan__list li{display:flex;gap:11px;padding:9px 0;border-top:1px dashed var(--line);font-size:15.5px}
.plan__list li:first-child{border-top:0}
.plan__list svg{flex:none;color:var(--blue);margin-top:4px}
.plan .btn{margin-top:auto}

.buynote{
  max-width:880px;margin:26px auto 0;
  background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:28px 32px;box-shadow:var(--sh-card);
  display:grid;grid-template-columns:auto 1fr;gap:20px;align-items:start;
}
.buynote__ic{
  width:44px;height:44px;border-radius:14px;display:grid;place-items:center;
  background:#EAF3FC;color:var(--blue);border:1px solid #D3E6F7;
}
.buynote h3{font-size:17.5px;margin-bottom:8px}
.buynote p{font-size:15px}
.buynote p + p{margin-top:6px}
.buynote b{color:var(--ink)}

.plans__note{max-width:880px;margin:26px auto 0;text-align:center;font-size:14px;color:var(--ink-3)}
.footer__legal a{color:inherit;text-decoration:underline;text-underline-offset:3px}

/* ---------- Obligations ---------- */
.law{
  display:grid;grid-template-columns:1fr 1fr;gap:26px;align-items:stretch;
}
.law__card{
  background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:34px;box-shadow:var(--sh-card);
}
.law__card h3{font-size:20px;margin-bottom:14px;display:flex;align-items:center;gap:12px}
.law__card h3 svg{color:var(--blue)}
.law__card p{font-size:16px}
.law__card p + p{margin-top:12px}
.law__ref{
  margin-top:18px;display:inline-block;
  font-family:var(--f-mono);font-size:12px;color:var(--blue-d);
  background:#EAF3FC;border:1px solid #D3E6F7;border-radius:999px;padding:7px 13px;
}

/* ---------- FAQ ---------- */
.faq{max-width:780px;margin-inline:auto;display:flex;flex-direction:column;gap:14px}
.qa{
  background:var(--white);border:1px solid var(--line);border-radius:var(--r-md);
  box-shadow:var(--sh-card);overflow:hidden;
}
.qa summary{
  list-style:none;display:flex;justify-content:space-between;align-items:center;gap:18px;
  padding:22px 26px;cursor:pointer;
  font-family:var(--f-display);font-weight:600;font-size:16.5px;color:var(--ink);
}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{
  content:"";flex:none;width:22px;height:22px;border-radius:50%;
  background:
    linear-gradient(var(--blue),var(--blue)) center/10px 2px no-repeat,
    linear-gradient(var(--blue),var(--blue)) center/2px 10px no-repeat,
    #EAF3FC;
  transition:transform .3s var(--ease);
}
.qa[open] summary::after{transform:rotate(45deg)}
.qa p{padding:0 26px 24px;font-size:15.5px;max-width:64ch}

/* ---------- Contact ---------- */
.cta{
  position:relative;overflow:hidden;border-radius:var(--r-lg);
  background:
    radial-gradient(720px 320px at 84% 0%, rgba(46,167,230,.34), transparent 60%),
    linear-gradient(140deg,var(--blue-d) 0%,var(--blue) 55%,#1F84D6 100%);
  color:#DCEDF9;padding:64px 56px;
  box-shadow:0 30px 70px -28px rgba(12,76,153,.6);
}
.cta::after{
  content:"";position:absolute;right:-70px;bottom:-110px;width:340px;height:340px;border-radius:50%;
  border:1px solid rgba(255,255,255,.16);
}
.cta::before{
  content:"";position:absolute;right:10px;bottom:-40px;width:190px;height:190px;border-radius:50%;
  border:1px dashed rgba(255,255,255,.22);
}
.cta > *{position:relative;z-index:1}
.cta__inner{display:grid;grid-template-columns:1.15fr .85fr;gap:44px;align-items:center}
.cta__visual{position:relative;display:flex;justify-content:center;align-items:flex-end;gap:22px;padding-bottom:22px}
.cta__halo{position:absolute;left:50%;bottom:0;transform:translateX(-50%);width:330px;height:330px;border-radius:50%;background:radial-gradient(closest-side, rgba(143,212,245,.38), transparent 72%);filter:blur(4px)}
.cta__tall{position:relative;width:158px;height:auto;filter:drop-shadow(0 26px 30px rgba(4,26,50,.5))}
.cta__small{position:relative;width:122px;height:auto;filter:drop-shadow(0 20px 26px rgba(4,26,50,.5))}
.cta__base{position:absolute;left:50%;bottom:6px;transform:translateX(-50%);width:310px;height:26px;border-radius:50%;background:rgba(4,22,39,.55);filter:blur(11px)}
.cta h2{color:#fff;font-size:clamp(28px,3.6vw,40px);max-width:18ch}
.cta__lead{margin-top:16px;font-size:17.5px;max-width:52ch}
.cta__actions{margin-top:32px;display:flex;flex-wrap:wrap;gap:14px}
.cta .btn--ghost{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.3);color:#fff}
.cta .btn--ghost:hover{background:rgba(255,255,255,.22)}
.cta__meta{margin-top:34px;display:flex;flex-wrap:wrap;gap:12px 30px;font-family:var(--f-mono);font-size:13px;color:#BBDCF5}
.cta__meta a{color:#fff}

/* ---------- Footer ---------- */
.footer{background:var(--white);border-top:1px solid var(--line);padding:56px 0 34px}
.footer__grid{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:44px;align-items:start}
.footer__brand img{width:132px}
.footer__brand p{margin-top:16px;font-size:15px;max-width:34ch}
.cobrand{
  margin-top:22px;display:inline-flex;align-items:center;gap:14px;
  border:1px solid var(--line);border-radius:var(--r-sm);padding:12px 16px;background:#FAFCFE;
}
.cobrand__logo{color:var(--ink);display:block}
.cobrand__logo .pwr{stroke:var(--cyan)}
.cobrand small{font-size:12.5px;color:var(--ink-3);line-height:1.45;max-width:24ch}
.footer h4{font-family:var(--f-mono);font-weight:500;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);margin-bottom:16px}
.footer li{padding:5px 0;font-size:15px}
.footer li a{color:var(--ink-2)}
.footer li a:hover{color:var(--blue)}
.footer__legal{
  margin-top:44px;padding-top:24px;border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px 24px;
  font-size:13px;color:var(--ink-3);
}
.footer__legal p{max-width:none}

/* ---------- Bouton flottant WhatsApp ---------- */
.fab{
  position:fixed;right:20px;bottom:20px;z-index:90;
  display:grid;place-items:center;width:58px;height:58px;border-radius:50%;
  background:linear-gradient(135deg,#27B45E,#128C46);color:#fff;
  box-shadow:0 14px 30px -8px rgba(24,150,74,.6);
  opacity:0;transform:translateY(14px) scale(.9);pointer-events:none;
  transition:opacity .3s,transform .3s var(--ease);
}
.fab.is-on{opacity:1;transform:none;pointer-events:auto}
.fab:hover{transform:translateY(-3px)}

/* ---------- Apparitions ---------- */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.reveal.in{opacity:1;transform:none}

/* ---------- Responsive ---------- */
@media (max-width:1100px){
  .nav__links{display:none}
  .burger{display:grid}
  .nav__actions .btn--ghost{display:none}
  .nav__inner{justify-content:space-between;gap:14px}
  .nav__actions{flex:none}
}
@media (max-width:980px){
  .section{padding:80px 0}
  .hero__inner{grid-template-columns:1fr;gap:26px;padding-block:28px 72px;min-height:0;grid-template-areas:"copy" "visual" "actions"}
  .hero__visual{position:relative;inset:auto;z-index:auto;grid-area:visual}
  .hero__media{position:relative;height:340px;border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh-pop)}
  .hero__media::after{background:linear-gradient(180deg,rgba(242,247,251,0) 55%,rgba(242,247,251,.2) 100%)}
  .hero__media video,.hero__media img{object-position:center 48%}
  .hero__media .stage__badge{right:auto;left:14px;top:14px}
  .hero__media .tap--hot{right:8%;top:26%}
  .hero__media .tap--cold{left:6%;top:52%}
  .hero__media .tap--net{right:10%;bottom:10%;left:auto}
  .compare{grid-template-columns:1fr 1fr;gap:14px}
  .places{grid-template-columns:1fr 1fr;gap:12px}
  .statbar{grid-template-columns:1fr 1fr;gap:12px;margin-bottom:52px}
  .stat{padding:16px 12px}
  .stat span{font-size:10.5px}
  .place{padding:18px 16px}
  .place__ic{width:44px;height:44px;border-radius:13px;margin-bottom:8px}
  .place b{font-size:15px}
  .place small{font-size:12.5px}
  .cta__inner{grid-template-columns:1fr;gap:36px}
  .cta__visual{padding-bottom:16px}
  .cta__tall{width:132px}
  .cta__small{width:102px}
  .lifband img{height:280px}
  .lifband__card{left:16px;right:16px;bottom:16px;max-width:none;padding:16px 18px}
  .lifband__txt{font-size:14px}
  .cpanel__art{display:none}
  .compare__arrow{display:none}
  .cpanel{padding:20px 16px}
  .cpanel h3{font-size:16px;margin-bottom:10px}
  .cpanel li{font-size:13.5px;padding:7px 0;gap:8px}
  .cpanel__art{
  position:absolute;right:22px;top:20px;opacity:.5;color:#C58B5A;
}
.cpanel__art--blue{color:var(--blue);opacity:.6}
.cpanel__tag{font-size:9.5px;padding:5px 9px;margin-bottom:12px;letter-spacing:.08em}
  .lab{grid-template-columns:1fr}
  .lab__stage{min-height:400px}
  .pipe__dot{width:44px;height:44px}
  .pipe__dot b{font-size:11.5px}
  .pipe__dot--cap{width:40px;height:40px}
  .pipe__cap .pipe__lbl,.pipe__lbl{font-size:9.5px}
  .pipe__lbl i{display:none}
  .pipe__tube{top:19px;left:20px;right:20px}
  .lab__panel{min-height:0}
  .lab__detail{min-height:0}
  .dtl{position:static;opacity:1;transform:none;display:none;padding:30px;justify-content:flex-start}
  .dtl.is-active{display:flex}
  .steps{grid-template-columns:1fr 1fr}
  .law{grid-template-columns:1fr}
  .footer__grid{grid-template-columns:1fr 1fr}
  .realstrip{grid-template-columns:1fr;padding:22px;gap:20px}
  .rack{width:100%;max-width:380px;margin-inline:auto}
  .cta{padding:48px 32px}
}
@media (max-width:640px){
  body{font-size:16px}
  .nav__inner{padding:11px 16px;gap:10px}
  .nav__brand img{width:96px}
  .nav__actions{gap:8px}
  .nav__actions .btn--wa{padding:10px 12px;font-size:12.5px;gap:6px}
  .nav__actions .btn--wa svg{width:15px;height:15px}
  .burger{width:40px;height:40px;flex:none}
  .lterms{gap:8px}
  .lterm{padding:9px 13px;font-size:12.5px}
  .rack__bay{gap:8px;padding:12px}
  .rack__slot{padding:8px 5px 9px;gap:6px}
  .rack__slot i{font-size:8.5px}
  .cta__tall{width:116px}
  .cta__small{width:90px}
  .cta__halo{width:250px;height:250px}
  .cta__base{width:240px;height:20px}
  .cta__visual{gap:16px}
  .cta h2{font-size:26px}
  .cta__lead{font-size:16px}
  .cta__meta{flex-direction:column;gap:8px}
  .hero__cta{width:100%;flex-direction:column}
  .hero__cta .btn{width:100%;justify-content:center;white-space:normal;text-align:center}
  .steps{grid-template-columns:1fr 1fr;gap:12px}
  .step{padding:18px 15px}
  .step::before{font-size:10px;padding:4px 9px;margin-bottom:10px}
  .step h3{font-size:14.5px;margin-bottom:6px}
  .step p{font-size:12.5px}
  .step__ic{display:none}
  .pipe__lbl{display:none}
  .pnode.is-active .pipe__lbl{display:flex}
  .pipe__dot{width:40px;height:40px}
  .pipe__dot b{font-size:10.5px}
  .pipe__dot--cap{width:36px;height:36px}
  .pipe__tube{top:17px;left:18px;right:18px;height:5px}
  .lab__stage{min-height:250px}
  .models{gap:12px}
  .mcard__media{min-height:170px;padding:18px 10px 10px}
  .mcard__media img{max-height:150px}
  .mcard__pin{font-size:9px;padding:4px 8px;left:10px;top:10px;letter-spacing:.06em}
  .mcard__body{padding:14px 14px 16px;gap:10px}
  .mcard__body h3{font-size:17px}
  .mcard__body h3 small{font-size:9.5px;margin-top:4px}
  .mcard__desc{display:none}
  .mcard__chips{display:none}
  .mcard__price{padding:2px 10px}
  .mcard__price div{flex-direction:column;align-items:flex-start;gap:2px;padding:8px 0}
  .mcard__price span{min-width:0;font-size:9.5px}
  .mcard__price b{font-size:13.5px}
  .mcard__price small{font-size:10.5px}
  .mcard__cta .btn{white-space:normal;font-size:12.5px;padding:10px 8px}
  .mcard__doc{font-size:10.5px}
  .sw{font-size:10px;padding:5px 9px 5px 6px;gap:6px}
  .sw i{width:14px;height:14px}
  .uvstage__ph{height:175px}
  .uvstage__halo{width:230px;height:230px}
  .uvstage__rays{width:210px;height:210px}
  .uvstage__rays i{height:86px}
  .dtl{padding:26px}
  .dtl__name{font-size:26px}
  .dtl__desc{font-size:15px}
  .lab__drag{display:none}
  .tap--hot{right:-6px}
  .tap--cold{left:-6px}
  .seg button{padding:14px 24px;font-size:16px}
  .plans{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .plan{padding:20px 14px;gap:12px;cursor:pointer;position:relative;min-width:0}
  .plan .btn{white-space:normal;text-align:center}
  .plan__for{font-size:10px;letter-spacing:.06em}
  .plan__num{font-size:38px}
  .plan__cur{font-size:19px}
  .plan__unit{font-size:11px}
  .plan__badge{font-size:9px;padding:5px 10px;left:16px;top:-11px}
  .plan:not(.is-x) .plan__maint,.plan:not(.is-x) .plan__list,.plan:not(.is-x) .plan__ttc{display:none}
  .plan:not(.is-x) .btn{padding:11px 12px;font-size:12.5px}
  .plan:not(.is-x)::after{
    content:"Toucher pour le détail";
    font-family:var(--f-mono);font-size:9.5px;letter-spacing:.08em;color:var(--ink-3);
  }
  .plan.is-x{grid-column:1/-1;order:-1;padding:28px 22px;cursor:default}
  .plan.is-x .plan__num{font-size:52px}
  .plan.is-x .plan__for{font-size:11.5px}
  .plan__num{font-size:48px}
  .buynote{grid-template-columns:1fr;gap:14px}
  .footer__grid{grid-template-columns:1fr}
  .hero__proof{gap:8px 18px}
  .cta{padding:40px 22px}
  .cta__actions .btn{white-space:normal;text-align:center;width:100%}
  .cta__meta{gap:10px 18px}
}

@media (max-width:400px){
  .wrap{padding-inline:18px}
  .nav__inner{padding:10px 12px;gap:8px}
  .nav__brand img{width:86px}
  .nav__actions .btn--wa{padding:9px 10px;font-size:11.5px;gap:5px}
  .rack__slot b{font-size:9px}
  .seg button{padding:12px 16px;font-size:14.5px}
  .seg button small{font-size:10px}
  .mcard__body{padding:24px 20px 26px}
  .plan{padding:30px 22px}
  .buynote{padding:22px 20px}
}