/* ============================================================
   NEXUS DIGITAL : Deep-blue terminal with luminous data orbs
   Design tokens per DESIGN.md
   ============================================================ */

:root{
  /* Colors */
  --color-liquid-abyss:#0d3b34;   /* fond de page (le hero garde son propre sol) */
  --color-liquid-deep:#124a41;    /* surface profonde : kinetic, well, footer */
  --color-liquid-kelp:#17564c;    /* surface carte */
  --color-liquid-mist:#7be5cd;    /* accent bleu (texte) */
  --color-platinum:#eefffc;       /* encre : titres */
  --color-silver-mist:#a8d8d0;    /* texte courant */
  --color-ash:#ffffff;            /* encre forte */
  --color-slate-deep:#7db3aa;     /* légendes discrètes */
  --color-lavender-phosphor:#78e8d5; /* bleu vif : chiffres, focus */

  /* traits sur fond nocturne */
  --line-soft:rgba(214,250,244,.09);
  --line:rgba(214,250,244,.17);

  --gradient-bioluminescent:linear-gradient(90deg,rgb(59,246,215) 0%,rgb(148,240,225) 100%);
  --gradient-cta:linear-gradient(90deg,rgb(37,235,202) 0%,rgb(96,250,224) 100%);
  --gradient-cta-hover:linear-gradient(90deg,rgb(29,216,185) 0%,rgb(59,246,215) 100%);

  /* Type */
  --font-matter:'Satoshi','DM Sans',ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --font-arial:Arial,ui-sans-serif,system-ui,-apple-system,sans-serif;

  --text-caption:10px;   --leading-caption:1.4;  --tracking-caption:.15em;
  --text-body:16px;      --leading-body:1.4;
  --text-subheading:24px;--leading-subheading:1.3;--tracking-subheading:-.02em;
  --text-heading:36px;   --leading-heading:1;
  --text-heading-lg:61px;--tracking-heading-lg:-.04em;
  --text-display:96px;   --tracking-display:-.04em;

  --w-regular:400; --w-medium:500;

  /* Spacing */
  --sp-12:12px;  --sp-16:16px;  --sp-20:20px;  --sp-24:24px;  --sp-28:28px;
  --sp-32:32px;  --sp-36:36px;  --sp-40:40px;  --sp-48:48px;  --sp-64:64px;
  --sp-80:80px;  --sp-120:120px;--sp-140:140px;--sp-160:160px;--sp-164:164px;

  /* Layout */
  --page-max:1440px;
  --gutter:clamp(20px,5vw,64px);
  --section-y:clamp(44px,5.2vw,80px);

  /* Radii : complete vocabulary */
  --radius-cards:16px;
  --radius-small:6px;
  --radius-pill:999px;

  /* hero nocturne (écran d'accueil) */
  --hero-ink:#ffffff;
  --hero-ink-soft:rgba(213,236,230,.66);
  --hero-floor:#04211e;
  --gradient-pastel:linear-gradient(102deg,#c6f2e4 0%,#e4ecfb 46%,#f6dbee 100%);
  --gradient-pastel-hover:linear-gradient(102deg,#d8f8ee 0%,#f0f4ff 46%,#ffe8f6 100%);

  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-io:cubic-bezier(.65,0,.35,1);
}

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:auto;
}

body{
  background:var(--color-liquid-abyss);
  color:var(--color-silver-mist);
  font-family:var(--font-matter);
  font-weight:var(--w-regular);
  font-size:var(--text-body);
  line-height:var(--leading-body);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
  font-variant-ligatures:none;
}

body.is-locked{overflow:hidden}

img,svg,canvas{display:block;max-width:100%}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
a{color:inherit;text-decoration:none}

::selection{background:rgba(59,246,215,.38);color:#ffffff}

/* ── shell ──────────────────────────────────────────────────── */
.shell{
  width:100%;
  max-width:var(--page-max);
  margin-inline:auto;
  padding-inline:var(--gutter);
}

.skip{
  position:fixed;top:-100px;left:var(--gutter);z-index:200;
  background:#1dd8b9;color:#04211e;
  padding:12px 20px;border-radius:var(--radius-small);
  transition:top .2s var(--ease-out);
}
.skip:focus{top:14px}

:focus-visible{
  outline:1px solid var(--color-lavender-phosphor);
  outline-offset:4px;
  border-radius:2px;
}

/* ── atmosphere layers ──────────────────────────────────────── */
.grain{
  position:fixed;inset:-120px;z-index:90;pointer-events:none;
  opacity:.09;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E");
  animation:grainShift 7s steps(6) infinite;
}
@keyframes grainShift{
  0%{transform:translate(0,0)}      16%{transform:translate(-8px,4px)}
  33%{transform:translate(6px,-6px)} 50%{transform:translate(-4px,8px)}
  66%{transform:translate(8px,2px)}  83%{transform:translate(-6px,-4px)}
  100%{transform:translate(0,0)}
}

.vignette{
  position:fixed;inset:0;z-index:88;pointer-events:none;
  background:radial-gradient(120% 90% at 50% 42%,transparent 52%,rgba(2,22,20,.30) 100%);
}
/* le grain s'allège encore sur le hero, déjà très sombre */
.is-hero .grain{opacity:.05}
.is-hero .vignette{opacity:0}

.progress{
  position:fixed;top:0;left:0;right:0;height:1px;z-index:120;
  background:var(--line-soft);pointer-events:none;
}
.progress i{
  display:block;height:100%;width:100%;
  transform:scaleX(0);transform-origin:0 50%;
  background:var(--gradient-bioluminescent);
}

/* ── typography primitives ──────────────────────────────────── */
h1,h2,h3,h4{
  font-family:var(--font-matter);
  font-weight:var(--w-medium);
  color:var(--color-platinum);
  line-height:1;
  letter-spacing:var(--tracking-heading-lg);
}

.h2{
  font-size:clamp(2rem,4.6vw,3.8rem);
  line-height:1;
  letter-spacing:-.04em;
}

.eyebrow{
  font-size:var(--text-caption);
  font-weight:var(--w-medium);
  letter-spacing:var(--tracking-caption);
  text-transform:uppercase;
  color:var(--color-silver-mist);
  display:inline-flex;align-items:center;gap:10px;
}
.eyebrow--lg{font-size:12px;letter-spacing:.12em;color:var(--color-liquid-mist)}

.pulse{
  width:6px;height:6px;border-radius:50%;
  background:var(--color-lavender-phosphor);
  box-shadow:0 0 0 0 rgba(120,232,209,.45);
  animation:pulse 2.4s var(--ease-io) infinite;
}
@keyframes pulse{
  0%{box-shadow:0 0 0 0 rgba(120,232,209,.4)}
  70%{box-shadow:0 0 0 10px rgba(120,232,209,0)}
  100%{box-shadow:0 0 0 0 rgba(120,232,209,0)}
}

/* split-text machinery */
[data-split]{overflow:visible}
.line{display:block;overflow:hidden;padding-bottom:.14em;margin-bottom:-.14em}
.line__i{display:block;will-change:transform}

/* ── buttons ────────────────────────────────────────────────── */
.btn{
  position:relative;display:inline-flex;align-items:center;justify-content:center;
  border-radius:var(--radius-pill);
  font-family:var(--font-arial);
  font-size:14px;line-height:1.43;
  letter-spacing:.02em;
  text-transform:uppercase;
  padding:14px 22px;
  overflow:hidden;
  isolation:isolate;
  transition:transform .5s var(--ease-out),color .35s var(--ease-out);
  will-change:transform;
}
.btn--gradient{background:var(--gradient-cta);color:#04211e}
.btn--gradient::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:var(--gradient-cta-hover);
  opacity:0;transition:opacity .45s var(--ease-out);
}
.btn--gradient:hover::after{opacity:1}
.btn span{position:relative;z-index:1}
.btn--lg{padding:20px 38px;font-size:14px}

/* CTA pastel du hero : dégradé bleu pâle → lavande → rose */
.btn--pastel{
  background:var(--gradient-pastel);
  color:#04211e;
  gap:14px;
  box-shadow:0 18px 44px -22px rgba(0,0,0,.75);
}
.btn--pastel::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:var(--gradient-pastel-hover);
  opacity:0;transition:opacity .45s var(--ease-out);
}
.btn--pastel:hover::after{opacity:1}
.btn--pastel svg{
  position:relative;z-index:1;
  width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:1.4;
  transition:transform .45s var(--ease-out);
}
.btn--pastel:hover svg{transform:translate(3px,-3px)}

/* CTA secondaire du hero : verre translucide sur fond nocturne */
.btn--glass{
  background:rgba(255,255,255,.06);
  color:var(--hero-ink);
  box-shadow:inset 0 0 0 1px rgba(214,250,244,.24);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}
.btn--glass::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:rgba(255,255,255,.14);
  opacity:0;transition:opacity .45s var(--ease-out);
}
.btn--glass:hover::after{opacity:1}

.link-arrow{
  display:inline-flex;align-items:center;gap:10px;
  font-size:12px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--color-silver-mist);
  padding-bottom:4px;
  border-bottom:1px solid var(--line);
  transition:color .35s var(--ease-out),border-color .35s var(--ease-out);
}
.link-arrow svg{
  width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:1.2;
  transition:transform .45s var(--ease-out);
}
.link-arrow:hover{color:var(--color-platinum);border-color:rgba(120,232,209,.6)}
.link-arrow:hover svg{transform:translate(3px,-3px)}

/* ── nav ────────────────────────────────────────────────────── */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  height:80px;display:flex;align-items:center;
  transition:height .5s var(--ease-out),background-color .5s var(--ease-out),
             border-color .5s var(--ease-out),backdrop-filter .5s var(--ease-out);
  border-bottom:1px solid transparent;
}
.nav.is-stuck{
  height:64px;
  background:rgba(13,59,52,.72);
  backdrop-filter:blur(18px) saturate(140%);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
  border-bottom-color:var(--line-soft);
}
.nav.is-hidden{transform:translateY(-100%)}
/* grille 3 colonnes : les liens restent centrés sur la page quelles que soient
   les largeurs du logo et du bloc de droite */
.nav__inner{
  display:grid;grid-template-columns:1fr auto 1fr;
  align-items:center;gap:var(--sp-24);width:100%;
}
.nav__inner > .brand{justify-self:start}
.nav__inner > .nav__end{justify-self:end}

.brand{
  display:inline-flex;align-items:center;gap:13px;
  color:var(--color-platinum);
}
.brand__mark{width:26px;height:26px;flex:none}
/* Lockup : « NEXUS » 400/.30em, « DIGITAL » 400/.44em à 47 %, charte §1 */
.brand__lockup{display:flex;flex-direction:column;justify-content:center;gap:2px}
.brand__name{font-size:16px;font-weight:var(--w-regular);letter-spacing:.30em;line-height:1}
.brand__sub {font-size:7.5px;font-weight:var(--w-regular);letter-spacing:.44em;line-height:1}

.nav__links{display:flex;align-items:center;column-gap:var(--sp-24)}
.nav__links a{
  position:relative;
  font-size:12px;font-weight:var(--w-regular);
  letter-spacing:.12em;text-transform:uppercase;
  color:var(--color-silver-mist);
  transition:color .35s var(--ease-out);
}
.nav__links a::after{
  content:"";position:absolute;left:0;bottom:-6px;height:1px;width:100%;
  background:var(--color-liquid-mist);
  transform:scaleX(0);transform-origin:100% 50%;
  transition:transform .45s var(--ease-out);
}
.nav__links a:hover{color:var(--color-platinum)}
.nav__links a:hover::after{transform:scaleX(1);transform-origin:0 50%}

.nav__end{display:flex;align-items:center;gap:var(--sp-16)}

.burger{display:none;width:40px;height:40px;position:relative;border-radius:var(--radius-small)}
.burger i{
  position:absolute;left:10px;width:20px;height:1px;background:var(--color-platinum);
  transition:transform .45s var(--ease-out),opacity .3s;
}
.burger i:nth-child(1){top:17px}
.burger i:nth-child(2){top:23px}
.burger[aria-expanded="true"] i:nth-child(1){transform:translateY(3px) rotate(45deg)}
.burger[aria-expanded="true"] i:nth-child(2){transform:translateY(-3px) rotate(-45deg)}

.menu{
  position:fixed;inset:0;z-index:99;
  background:rgba(13,59,52,.96);
  backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);
  display:flex;align-items:center;
  opacity:0;pointer-events:none;
  transition:opacity .5s var(--ease-out);
}
.menu.is-open{opacity:1;pointer-events:auto}
.menu__inner{width:100%;padding:0 var(--gutter);display:flex;flex-direction:column;gap:8px}
.menu__inner a{
  display:flex;align-items:baseline;gap:18px;
  font-size:clamp(2rem,9vw,3.4rem);font-weight:var(--w-medium);
  letter-spacing:-.04em;color:var(--color-platinum);
  padding:10px 0;border-bottom:1px solid var(--line-soft);
  opacity:0;transform:translateY(24px);
  transition:opacity .6s var(--ease-out),transform .6s var(--ease-out),color .3s;
}
.menu.is-open .menu__inner a{opacity:1;transform:none}
.menu.is-open .menu__inner a:nth-child(1){transition-delay:.06s}
.menu.is-open .menu__inner a:nth-child(2){transition-delay:.12s}
.menu.is-open .menu__inner a:nth-child(3){transition-delay:.18s}
.menu.is-open .menu__inner a:nth-child(4){transition-delay:.24s}
.menu.is-open .menu__inner a:nth-child(5){transition-delay:.3s}
.menu__inner a em{
  font-size:12px;font-style:normal;letter-spacing:.12em;
  color:var(--color-slate-deep);
}
.menu__inner a:hover{color:var(--color-liquid-mist)}

/* nav posée sur le hero nocturne */
.nav--light .brand{color:var(--hero-ink)}
.nav--light .nav__links a{color:rgba(215,238,232,.72)}
.nav--light .nav__links a:hover{color:var(--hero-ink)}
.nav--light .nav__links a::after{background:#7be5cd}
.nav--light .burger i{background:var(--hero-ink)}
.nav--light .btn--gradient{background:var(--gradient-pastel);color:#04211e}
.nav--light .btn--gradient::after{background:var(--gradient-pastel-hover)}
.nav--light.is-stuck{
  background:rgba(4,29,27,.62);
  border-bottom-color:rgba(255,255,255,.09);
}

/* ── hero ───────────────────────────────────────────────────── */
.hero{
  position:relative;
  min-height:100svh;
  display:flex;flex-direction:column;
  padding-top:clamp(120px,17vh,190px);
  padding-bottom:0;
  overflow:hidden;
  isolation:isolate;
  /* nuit bleu profond : halo central, bloom à droite, vignette profonde */
  background:
    radial-gradient(46% 40% at 76% 60%,rgba(38,196,168,.22) 0%,rgba(38,196,168,0) 70%),
    radial-gradient(72% 58% at 50% 42%,rgba(16,124,107,.52) 0%,rgba(16,124,107,0) 74%),
    radial-gradient(128% 96% at 50% 46%,#0a3f38 0%,#052421 52%,#010c0c 100%);
  color:var(--hero-ink-soft);
}

.orb{
  position:absolute;inset:0;width:100%;height:100%;
  z-index:1;pointer-events:none;
}

/* halo derrière le globe */
.hero__aura{
  position:absolute;left:50%;bottom:-34%;translate:-50% 0;
  width:min(150vh,140vw);aspect-ratio:1;
  z-index:0;pointer-events:none;
  background:
    radial-gradient(closest-side,rgba(31,178,152,.30),rgba(31,178,152,.06) 62%,transparent 74%),
    radial-gradient(closest-side at 66% 40%,rgba(120,232,209,.16),transparent 60%);
  filter:blur(14px);
}

/* le globe se noie dans le sol au lieu d'être coupé net */
.hero__floor{
  position:absolute;left:0;right:0;bottom:0;height:13%;
  z-index:2;pointer-events:none;
  background:linear-gradient(180deg,rgba(1,12,12,0) 0%,rgba(2,16,15,.35) 55%,rgba(4,33,30,.92) 100%);
}

.hero__inner{
  position:relative;z-index:3;
  flex:none;
  display:flex;flex-direction:column;align-items:center;
  text-align:center;
}

.hero__mark{
  font-size:13px;font-weight:var(--w-medium);
  letter-spacing:.42em;text-indent:.42em;
  text-transform:uppercase;
  color:var(--hero-ink);
  opacity:.94;
}

 /* mot mis en avant dans un titre, survit à la reconstruction en lignes */
.hl{
  font-style:normal;
  color:var(--color-lavender-phosphor);
}

.hero__title{
  margin-top:clamp(28px,4.6vh,46px);
  font-size:clamp(2.5rem,5.9vw,5rem);
  font-weight:var(--w-medium);
  line-height:1.03;
  letter-spacing:-.04em;
  color:var(--hero-ink);
  max-width:18ch;
}

.hero__sub{
  margin-top:clamp(26px,4.4vh,46px);
  max-width:52ch;
  font-size:clamp(15px,1.25vw,19px);
  line-height:1.5;
  color:var(--hero-ink-soft);
}

.hero__actions{
  margin-top:clamp(24px,3.6vh,38px);
  display:flex;align-items:center;justify-content:center;gap:var(--sp-24);flex-wrap:wrap;
}

/* ── ticker ─────────────────────────────────────────────────── */
.ticker{
  position:relative;z-index:3;
  /* dernier enfant du hero : la marge auto le colle au bas du premier écran,
     au-dessus du dégradé de sol, donc visible sans scroller */
  margin-top:auto;
  border-top:1px solid rgba(255,255,255,.07);
  padding-block:var(--sp-20);
  overflow:hidden;
  /* prolonge le sol du hero */
  background:var(--hero-floor);
}

/* raccord hero → page : même nuit, simple respiration */
.seam{
  height:clamp(44px,5.5vh,80px);
  background:linear-gradient(180deg,var(--hero-floor) 0%,#0a332c 42%,var(--color-liquid-abyss) 100%);
}
.ticker__track{display:flex;width:max-content;animation:tick 42s linear infinite}
.ticker:hover .ticker__track{animation-play-state:paused}
.ticker__set{display:flex;align-items:center}
.ticker__set span{
  font-size:12px;letter-spacing:.12em;text-transform:uppercase;
  color:rgba(206,232,226,.6);opacity:.92;
  padding-inline:clamp(20px,3vw,40px);white-space:nowrap;
}
.ticker__set i{width:4px;height:4px;border-radius:50%;background:rgba(94,222,196,.45);flex:none}
@keyframes tick{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ── aperçus sectoriels : éventail de cartes ────────────────── */
.deck{
  /* deux familles suffisent à changer le caractère d'une maquette :
     l'antique du site pour les enseignes modernes, une serif système
     pour l'avocat, l'horloger et le restaurant */
  --f-sans:var(--font-matter);
  --f-serif:'Iowan Old Style','Hoefler Text','Apple Garamond',Garamond,'Times New Roman',serif;

  position:relative;
  padding-top:calc(var(--section-y) * .7);
  padding-bottom:calc(var(--section-y) * .6);
  overflow:hidden;
}
.deck__head{display:flex;flex-direction:column;align-items:center;text-align:center}
.deck__title{margin-top:var(--sp-24);max-width:18ch}
.deck__sub{
  margin-top:var(--sp-24);max-width:56ch;
  color:var(--color-silver-mist);line-height:1.5;
}

.deck__frame{margin-top:clamp(36px,4.6vw,68px)}

/* la scène déborde volontairement de la grille : l'éventail sort du cadre */
.deck__stage{
  position:relative;
  width:100%;
  height:var(--deck-h,440px);
  perspective:1200px;
  touch-action:pan-y;
  outline:none;
}
.deck__stage:focus-visible{outline:1px solid var(--color-lavender-phosphor);outline-offset:12px;border-radius:20px}

/* halo haut : la même lueur bleutée que le reste de la page */
.deck__stage::before{
  content:"";position:absolute;left:50%;top:2%;translate:-50% 0;
  width:min(820px,74%);height:52%;
  background:radial-gradient(closest-side,rgba(120,232,209,.14),transparent 72%);
  pointer-events:none;
}
/* ombre portée au sol, pour poser la pile */
.deck__stage::after{
  content:"";position:absolute;left:50%;bottom:6px;translate:-50% 0;
  width:min(880px,80%);height:140px;
  background:radial-gradient(closest-side,rgba(2,20,18,.66),transparent 74%);
  pointer-events:none;
}

.deck__cards{
  list-style:none;
  position:absolute;inset:0;
  transform-style:preserve-3d;
}

.deck__card{
  position:absolute;left:50%;bottom:var(--card-base,34px);
  width:var(--card-w,500px);height:var(--card-h,320px);
  margin-left:calc(var(--card-w,500px) / -2);
  container-type:inline-size;
  border-radius:var(--radius-cards);
  border:1px solid rgba(238,255,252,.16);
  background:var(--tone-bg);
  overflow:hidden;
  cursor:pointer;
  opacity:0;
  /* le texte des maquettes ne doit pas se sélectionner pendant un glisser */
  user-select:none;-webkit-user-select:none;
  will-change:transform;
  box-shadow:0 30px 64px -34px rgba(0,0,0,.9);
  transition:
    transform .8s var(--ease-out),
    opacity .5s var(--ease-out),
    border-color .45s var(--ease-out),
    box-shadow .6s var(--ease-out);
}
/* voile qui recule les cartes inactives sans coûter un filtre */
.deck__card::after{
  content:"";position:absolute;inset:0;z-index:3;pointer-events:none;
  background:linear-gradient(180deg,rgba(4,33,30,.34),rgba(4,33,30,.50));
  transition:opacity .6s var(--ease-out);
}
.deck__card.is-active{
  cursor:grab;
  box-shadow:0 56px 96px -42px rgba(0,0,0,.95),0 0 0 1px rgba(120,232,209,.24);
}
.deck__card.is-active::after{opacity:0}
/* carte visée au survol : le voile s'éclaircit et le liseré s'allume,
   pour dire qu'un clic la ramène devant */
.deck__card.is-lit{
  border-color:rgba(120,232,209,.42);
  box-shadow:0 42px 78px -38px rgba(0,0,0,.92),0 0 0 1px rgba(120,232,209,.18);
}
.deck__card.is-lit::after{opacity:.42}
.deck__cards.is-dragging .deck__card{transition:opacity .5s var(--ease-out)}
.deck__cards.is-dragging .deck__card.is-active{cursor:grabbing}

/* ── maquettes de sites ─────────────────────────────────────── */
/* Chaque carte est une page finie : mise en page, palette et
   typographie lui appartiennent. Tout est dimensionné en cqw,
   donc la maquette reste juste à n'importe quelle taille de carte.
   Seuls le fond de carte et le chrome du navigateur sont communs. */
.deck__card{
  --tone-bg:#f6f4f0;
  --tone-chrome:#e8e6e1;
  --tone-hair:rgba(0,0,0,.10);
  --tone-field:rgba(0,0,0,.06);
  --tone-dot:rgba(0,0,0,.20);
  --tone-mute:rgba(0,0,0,.46);
}
.deck__card[data-scheme="dark"]{
  --tone-chrome:#1b1c1f;
  --tone-hair:rgba(255,255,255,.10);
  --tone-field:rgba(255,255,255,.08);
  --tone-dot:rgba(255,255,255,.24);
  --tone-mute:rgba(255,255,255,.5);
}
.deck__card[data-tone="rivage"]   {--tone-bg:#f7f4ee;--tone-chrome:#eae6dd}
.deck__card[data-tone="batir"]    {--tone-bg:#111517}
.deck__card[data-tone="delcourt"] {--tone-bg:#f5f3ee;--tone-chrome:#e9e6df}
.deck__card[data-tone="meche"]    {--tone-bg:#151215;--tone-chrome:#221d21}
.deck__card[data-tone="reparo"]   {--tone-bg:#ffffff;--tone-chrome:#eaeff3}
.deck__card[data-tone="horloge"]  {--tone-bg:#0d0e10}
.deck__card[data-tone="tablenord"]{--tone-bg:#120c08;--tone-chrome:#1d150f}
.deck__card[data-tone="sereine"]  {--tone-bg:#f2f8f7;--tone-chrome:#e4eeec}

.mock{
  position:relative;z-index:1;
  width:100%;height:100%;
  display:flex;flex-direction:column;
  background:var(--tone-bg);
  line-height:1.2;
}

/* chrome du navigateur, commun aux huit */
.mock__bar{
  flex:none;display:flex;align-items:center;gap:1.2cqw;
  padding:2.4cqw 3cqw;
  background:var(--tone-chrome);
  border-bottom:1px solid var(--tone-hair);
}
.mock__bar i{width:1.5cqw;height:1.5cqw;border-radius:50%;background:var(--tone-dot);flex:none}
.mock__url{
  margin-left:1.6cqw;
  font-family:var(--f-sans);
  font-size:11px;font-size:2cqw;
  letter-spacing:.02em;color:var(--tone-mute);
  background:var(--tone-field);
  border-radius:var(--radius-pill);
  padding:.9cqw 3cqw;
}

.mock__page{flex:1;min-height:0;display:flex;flex-direction:column}

/* ── 1 · Rivage Immobilier ──────────────────────────────────── */
.rv{background:#f7f4ee;color:#1d2a26;font-family:var(--f-sans)}
.rv__hero{
  position:relative;overflow:hidden;
  flex:none;height:64%;
  padding:2.8cqw 4cqw 3.2cqw;
  display:flex;flex-direction:column;
  color:#fff;
  background:
    linear-gradient(180deg,rgba(10,26,24,.34),rgba(10,26,24,0) 32%,rgba(8,24,22,.6)),
    linear-gradient(180deg,
      #b6ccd2 0%,#d6e1dc 19%,#9db1a4 34%,
      #7a9584 48%,#5b7965 70%,#2f4738 100%);
}
/* deux crêtes : la lointaine dans la brume, la proche bien détachée */
.rv__hero::after{
  content:"";position:absolute;left:0;right:0;top:19%;height:24%;z-index:0;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 70' preserveAspectRatio='none'%3E%3Cpath d='M0 70V38l34-16 30 12 36-19 38 23 32-12 44 18 86-22v46z' fill='%2392a99c' opacity='.7'/%3E%3Cpath d='M0 70V50l46-18 40 16 44-12 40 18 46-14 84 16v14z' fill='%234d6857'/%3E%3C/svg%3E") no-repeat center bottom/100% 100%;
}
/* reflet à la surface de l'eau */
.rv__hero::before{
  content:"";position:absolute;left:0;right:0;top:43%;height:9%;z-index:0;
  background:linear-gradient(180deg,rgba(255,255,255,.26),transparent);
}
.rv__hero > *{position:relative;z-index:1}
.rv__nav{display:flex;align-items:center;gap:2.4cqw}
.rv__logo{font-family:var(--f-serif);font-size:3cqw;letter-spacing:.34em}
.rv__links{display:flex;gap:2.4cqw;margin-left:auto;font-size:1.75cqw;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.86)}
.rv__phone{font-size:1.7cqw;letter-spacing:.06em;border:1px solid rgba(255,255,255,.55);border-radius:var(--radius-pill);padding:.9cqw 2.2cqw}
.rv__kick{margin-top:auto;font-size:1.7cqw;letter-spacing:.3em;text-transform:uppercase;color:rgba(255,255,255,.82)}
.rv__title{margin-top:1.2cqw;font-family:var(--f-serif);font-size:5.4cqw;line-height:1.04;max-width:14ch}
.rv__search{
  margin-top:2.4cqw;width:86%;
  display:flex;align-items:center;
  background:rgba(255,255,255,.96);color:#26332e;
  border-radius:var(--radius-pill);
  padding:.8cqw .8cqw .8cqw 3cqw;
  font-size:1.85cqw;
}
.rv__search span:first-child{flex:1;color:rgba(38,51,46,.55)}
.rv__search span + span{padding:0 2.4cqw;border-left:1px solid rgba(0,0,0,.14);color:rgba(38,51,46,.55)}
.rv__search em{
  font-style:normal;background:#2f6b5e;color:#fff;
  border-radius:var(--radius-pill);padding:1.1cqw 2.6cqw;
  font-size:1.6cqw;letter-spacing:.1em;text-transform:uppercase;
}
.rv__grid{flex:1;min-height:0;display:grid;grid-template-columns:repeat(3,1fr);gap:2.4cqw;padding:2.6cqw 4cqw 0}
.rv__item{display:flex;flex-direction:column;gap:.9cqw}
.rv__shot{display:block;height:7.6cqw;border-radius:1.4cqw}
.rv__shot--a{background:linear-gradient(160deg,#cfdad2 0%,#7f9a8c 100%)}
.rv__shot--b{background:linear-gradient(160deg,#e6dccb 0%,#a89076 100%)}
.rv__shot--c{background:linear-gradient(160deg,#d3dbe1 0%,#8a99a5 100%)}
.rv__item b{font-size:1.95cqw;font-weight:var(--w-medium)}
.rv__item i{font-style:normal;font-size:1.8cqw;color:#2f6b5e}

/* ── 2 · Atelier Bâtir ──────────────────────────────────────── */
.bt{background:#111517;color:#f1f4f3;font-family:var(--f-sans)}
.bt__nav{
  flex:none;display:flex;align-items:center;gap:2.4cqw;
  padding:2.6cqw 4cqw;border-bottom:1px solid rgba(255,255,255,.09);
}
.bt__logo{font-size:2.2cqw;letter-spacing:.24em}
.bt__logo b{color:#e2a03f;font-weight:var(--w-medium)}
.bt__links{display:flex;gap:2.4cqw;margin-left:auto;font-size:1.7cqw;letter-spacing:.1em;color:rgba(241,244,243,.56)}
.bt__cta{
  font-size:1.6cqw;letter-spacing:.12em;text-transform:uppercase;
  background:#e2a03f;color:#1a1206;padding:1.2cqw 2.6cqw;
}
.bt__hero{
  position:relative;flex:1;min-height:0;overflow:hidden;
  padding:4.6cqw 4cqw;
  display:flex;flex-direction:column;justify-content:flex-end;
  background:
    linear-gradient(95deg,rgba(12,15,17,.96) 34%,rgba(12,15,17,.28) 74%,rgba(12,15,17,.72)),
    linear-gradient(180deg,#46545c 0%,#7a6a58 44%,#241f1c 100%);
}
/* grue et immeubles en fond de chantier */
.bt__hero::before{
  content:"";position:absolute;right:3%;top:6%;bottom:0;width:44%;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 120'%3E%3Crect x='98' y='50' width='38' height='70' fill='%23b3a795' opacity='.5'/%3E%3Crect x='4' y='74' width='32' height='46' fill='%239b8f7d' opacity='.4'/%3E%3Cg stroke='%23ded4c5' stroke-width='2.4' fill='none' stroke-linecap='round'%3E%3Cpath d='M58 120V26'/%3E%3Cpath d='M18 26h104'/%3E%3Cpath d='M58 26 46 8'/%3E%3Cpath d='M46 8h44'/%3E%3Cpath d='M90 8v13'/%3E%3Cpath d='M34 26v11'/%3E%3C/g%3E%3C/svg%3E") no-repeat right bottom/contain;
  opacity:.6;
}
.bt__hero > *{position:relative;z-index:1}
.bt__kick{font-size:1.7cqw;letter-spacing:.24em;text-transform:uppercase;color:#e2a03f}
.bt__title{
  margin-top:2cqw;
  font-size:6.4cqw;line-height:.98;letter-spacing:-.01em;
  font-weight:var(--w-medium);text-transform:uppercase;
}
.bt__stats{margin-top:3.6cqw;display:flex;gap:5cqw}
.bt__stats span{display:flex;flex-direction:column;gap:.4cqw;font-size:1.6cqw;letter-spacing:.08em;text-transform:uppercase;color:rgba(241,244,243,.52)}
.bt__stats b{font-size:4cqw;font-weight:var(--w-medium);color:#f1f4f3;letter-spacing:-.03em}

/* ── 3 · Delcourt & Associés ────────────────────────────────── */
.dl{background:#f5f3ee;color:#1a2333;font-family:var(--f-serif)}
.dl__nav{
  flex:none;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  padding:2.8cqw 4cqw;border-bottom:1px solid rgba(26,35,51,.16);
}
.dl__logo{text-align:center;font-size:2.6cqw;letter-spacing:.3em;line-height:1.4}
.dl__logo em{display:block;font-style:normal;font-size:1.5cqw;letter-spacing:.3em;color:#27406c}
.dl__links{display:flex;gap:2.6cqw;font-family:var(--f-sans);font-size:1.65cqw;letter-spacing:.14em;text-transform:uppercase;color:rgba(26,35,51,.6)}
.dl__links--end{justify-content:flex-end}
.dl__hero{
  flex:1;min-height:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:0 4cqw;
  background:radial-gradient(76% 130% at 50% 0%,rgba(39,64,108,.08),transparent 68%);
}
.dl__kick{font-family:var(--f-sans);font-size:1.6cqw;letter-spacing:.28em;text-transform:uppercase;color:rgba(26,35,51,.5)}
.dl__title{margin-top:1.8cqw;font-size:7cqw;line-height:1.04;max-width:14ch}
.dl__cta{
  margin-top:3.4cqw;font-family:var(--f-sans);
  font-size:1.6cqw;letter-spacing:.16em;text-transform:uppercase;
  border:1px solid #27406c;color:#27406c;padding:1.5cqw 3.6cqw;
}
.dl__cols{
  flex:none;display:grid;grid-template-columns:repeat(4,1fr);
  border-top:1px solid rgba(26,35,51,.16);font-family:var(--f-sans);
}
.dl__cols span{
  padding:2.4cqw 1.4cqw;text-align:center;
  font-size:1.6cqw;color:rgba(26,35,51,.66);
  border-right:1px solid rgba(26,35,51,.11);
}
.dl__cols span:last-child{border-right:0}

/* ── 4 · Studio Mèche ───────────────────────────────────────── */
.mh{flex-direction:row;background:#151215;color:#f6efee;font-family:var(--f-sans)}
.mh__left{flex:1.04;display:flex;flex-direction:column;padding:3.4cqw 4cqw}
.mh__logo{font-size:2.1cqw;letter-spacing:.44em}
.mh__title{margin-top:auto;font-size:6.4cqw;line-height:.98;font-weight:var(--w-medium)}
.mh__price{margin-top:3cqw;display:flex;flex-direction:column;gap:1.1cqw;font-size:1.75cqw;color:rgba(246,239,238,.6)}
.mh__price span{display:flex;justify-content:space-between;width:80%;padding-bottom:1cqw;border-bottom:1px solid rgba(246,239,238,.14)}
.mh__price b{color:#e39b93;font-weight:var(--w-regular)}
.mh__cta{
  margin-top:3cqw;align-self:flex-start;
  background:#e39b93;color:#241a1a;
  font-size:1.65cqw;letter-spacing:.14em;text-transform:uppercase;
  padding:1.5cqw 3.4cqw;border-radius:var(--radius-pill);
}
.mh__right{
  flex:.96;position:relative;
  background:
    radial-gradient(66% 52% at 46% 32%,rgba(255,229,217,.92),transparent 62%),
    radial-gradient(40% 34% at 70% 74%,rgba(224,150,132,.5),transparent 70%),
    linear-gradient(198deg,#916058 0%,#4c302f 54%,#241a1a 100%);
}
.mh__tag{
  position:absolute;left:8%;bottom:7%;
  font-size:1.55cqw;letter-spacing:.22em;text-transform:uppercase;color:rgba(255,255,255,.82);
}

/* ── 5 · Réparo ─────────────────────────────────────────────── */
.rp{background:#fff;color:#0f2230;font-family:var(--f-sans)}
.rp__top{flex:none;display:flex;align-items:center;gap:2.6cqw;padding:2.4cqw 4cqw;background:#0b2b40;color:#fff}
.rp__logo{font-size:2.3cqw;letter-spacing:.2em;font-weight:var(--w-medium)}
.rp__links{display:flex;gap:2.4cqw;font-size:1.65cqw;color:rgba(255,255,255,.68)}
.rp__tel{
  margin-left:auto;background:#f4b731;color:#1a1408;
  font-size:1.8cqw;font-weight:var(--w-medium);
  padding:1cqw 2.4cqw;border-radius:.8cqw;
}
.rp__hero{
  flex:1;min-height:0;display:flex;flex-direction:column;
  padding:3.8cqw 4cqw 0;
  background:linear-gradient(180deg,#eef4f8 0%,#fff 64%);
}
.rp__badge{
  align-self:flex-start;display:inline-flex;align-items:center;gap:1cqw;
  font-size:1.5cqw;letter-spacing:.12em;text-transform:uppercase;
  color:#127a55;background:rgba(18,122,85,.1);
  border-radius:var(--radius-pill);padding:.9cqw 2.2cqw;
}
.rp__badge::before{content:"";width:1.2cqw;height:1.2cqw;border-radius:50%;background:#1aa06f}
.rp__title{margin-top:2.2cqw;font-size:5.6cqw;line-height:1.04;letter-spacing:-.02em;font-weight:var(--w-medium)}
.rp__actions{margin-top:2.6cqw;display:flex;align-items:center;gap:2.6cqw;font-size:1.75cqw}
.rp__actions em{font-style:normal;background:#f4b731;color:#1a1408;font-weight:var(--w-medium);padding:1.5cqw 3.2cqw;border-radius:.9cqw}
.rp__actions span{color:#0b2b40;text-decoration:underline;text-underline-offset:.5cqw}
.rp__cards{margin-top:auto;display:grid;grid-template-columns:repeat(3,1fr);gap:2cqw}
.rp__cards span{
  display:flex;flex-direction:column;gap:.5cqw;
  background:#f4f7f9;border:1px solid rgba(11,43,64,.1);border-bottom:0;
  border-radius:1.4cqw 1.4cqw 0 0;padding:2cqw;
  font-size:1.6cqw;color:rgba(15,34,48,.55);
}
.rp__cards b{font-size:1.95cqw;color:#0f2230;font-weight:var(--w-medium)}

/* ── 6 · Maison Horloge ─────────────────────────────────────── */
.hg{background:#0d0e10;color:#f1ece2;font-family:var(--f-serif)}
.hg__nav{
  flex:none;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  padding:2.8cqw 4cqw;border-bottom:1px solid rgba(241,236,226,.1);
}
.hg__logo{text-align:center;font-size:2.2cqw;letter-spacing:.4em}
.hg__links{display:flex;gap:2.4cqw;font-family:var(--f-sans);font-size:1.55cqw;letter-spacing:.14em;text-transform:uppercase;color:rgba(241,236,226,.48)}
.hg__links--end{justify-content:flex-end}
.hg__stage{
  flex:1;min-height:0;display:grid;grid-template-columns:1fr 1fr;
  align-items:center;gap:3cqw;padding:0 4cqw;
  background:radial-gradient(58% 92% at 27% 50%,rgba(198,160,82,.22),transparent 70%);
}
/* garde-temps : lunette guillochée, cadran noir, aiguille dorée */
.hg__watch{
  justify-self:center;width:21cqw;height:21cqw;border-radius:50%;
  position:relative;
  background:
    radial-gradient(circle at 34% 26%,rgba(255,255,255,.6),transparent 44%),
    conic-gradient(from 205deg,#e8d3a1,#8b7136,#f2dfb2,#8b7136,#e8d3a1);
  box-shadow:0 2cqw 4cqw rgba(0,0,0,.65);
}
.hg__watch::before{
  content:"";position:absolute;inset:11%;border-radius:50%;
  background:radial-gradient(circle at 40% 30%,#2c2e33,#101113 72%);
  box-shadow:inset 0 0 2cqw rgba(0,0,0,.85);
}
.hg__watch::after{
  content:"";position:absolute;left:48.6%;top:23%;width:2.8%;height:29%;
  background:#e8d3a1;border-radius:1cqw;
  transform-origin:50% 100%;transform:rotate(34deg);
}
.hg__kick{font-family:var(--f-sans);font-size:1.55cqw;letter-spacing:.3em;text-transform:uppercase;color:#c6a052}
.hg__title{margin-top:1.4cqw;font-size:6.2cqw;line-height:1}
.hg__price{margin-top:1.6cqw;font-family:var(--f-sans);font-size:2.2cqw;color:rgba(241,236,226,.7)}
.hg__cta{
  display:inline-block;margin-top:3cqw;font-family:var(--f-sans);
  font-size:1.6cqw;letter-spacing:.14em;text-transform:uppercase;
  background:#c6a052;color:#17120a;padding:1.6cqw 3.4cqw;
}

/* ── 7 · Table Nord ─────────────────────────────────────────── */
.tn{
  color:#f6efe4;font-family:var(--f-serif);
  background:
    linear-gradient(180deg,rgba(18,12,8,.76),rgba(18,12,8,.3) 42%,rgba(18,12,8,.9)),
    radial-gradient(54% 44% at 64% 46%,rgba(232,164,92,.6),transparent 66%),
    radial-gradient(40% 32% at 26% 70%,rgba(148,72,48,.5),transparent 70%),
    linear-gradient(160deg,#3d2619 0%,#22160f 54%,#120c08 100%);
}
.tn__nav{
  flex:none;display:flex;align-items:center;justify-content:center;gap:3cqw;
  padding:2.6cqw 4cqw;
  font-family:var(--f-sans);font-size:1.55cqw;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(246,239,228,.62);
}
.tn__logo{
  font-family:var(--f-serif);font-style:normal;text-transform:none;
  font-size:3cqw;letter-spacing:.16em;color:#f6efe4;
}
.tn__hero{flex:1;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:0 4cqw}
.tn__kick{font-family:var(--f-sans);font-size:1.55cqw;letter-spacing:.28em;text-transform:uppercase;color:rgba(246,239,228,.68)}
.tn__title{margin-top:1.8cqw;font-size:6.4cqw;line-height:1.06}
.tn__cta{
  margin-top:3cqw;font-family:var(--f-sans);
  font-size:1.55cqw;letter-spacing:.18em;text-transform:uppercase;
  border:1px solid rgba(246,239,228,.55);border-radius:var(--radius-pill);
  padding:1.4cqw 3.4cqw;
}
.tn__bar{
  flex:none;display:flex;justify-content:space-between;
  padding:2.4cqw 4cqw;border-top:1px solid rgba(246,239,228,.16);
  font-family:var(--f-sans);font-size:1.55cqw;letter-spacing:.1em;color:rgba(246,239,228,.58);
}

/* ── 8 · Cabinet Sereine ────────────────────────────────────── */
.sr{background:#f2f8f7;color:#12302e;font-family:var(--f-sans)}
.sr__nav{
  flex:none;display:flex;align-items:center;gap:2.6cqw;
  padding:2.4cqw 4cqw;background:#fff;border-bottom:1px solid rgba(18,48,46,.08);
}
.sr__logo{display:flex;align-items:center;gap:1.2cqw;font-size:2.05cqw;font-weight:var(--w-medium)}
.sr__logo i{width:2.4cqw;height:2.4cqw;border-radius:50%;background:linear-gradient(140deg,#5cbdae,#2c7a72);flex:none}
.sr__links{display:flex;gap:2.2cqw;margin-left:auto;font-size:1.65cqw;color:rgba(18,48,46,.58)}
.sr__cta{background:#2c7a72;color:#fff;font-size:1.6cqw;padding:1.2cqw 2.6cqw;border-radius:var(--radius-pill)}
.sr__hero{flex:1;min-height:0;display:grid;grid-template-columns:1.06fr .94fr;gap:3cqw;padding:2.8cqw 4cqw 0;align-items:center}
.sr__title{font-size:5cqw;line-height:1.06;letter-spacing:-.02em;font-weight:var(--w-medium);max-width:13ch}
.sr__pills{margin-top:2.4cqw;display:flex;flex-wrap:wrap;gap:1.1cqw;font-size:1.55cqw}
.sr__pills span{background:#fff;border:1px solid rgba(18,48,46,.1);border-radius:var(--radius-pill);padding:.9cqw 2cqw;color:rgba(18,48,46,.7)}
.sr__book{
  margin-top:2.4cqw;width:fit-content;
  display:flex;align-items:center;gap:1.4cqw;
  background:#fff;border:1px solid rgba(18,48,46,.1);border-radius:1.6cqw;
  padding:1.5cqw 2cqw;font-size:1.65cqw;
}
.sr__book em{font-style:normal;background:#e3f2ef;color:#2c7a72;border-radius:.8cqw;padding:.8cqw 1.6cqw}
.sr__photo{
  position:relative;align-self:end;height:86%;overflow:hidden;
  border-radius:2.4cqw 2.4cqw 0 0;
  background:
    radial-gradient(62% 48% at 44% 28%,rgba(255,255,255,.88),transparent 62%),
    linear-gradient(160deg,#c6e3dd 0%,#6cab9f 56%,#3a7c74 100%);
}
.sr__note{
  position:absolute;left:8%;bottom:12%;
  display:flex;flex-direction:column;gap:.5cqw;
  background:#fff;border-radius:1.4cqw;padding:1.5cqw 2cqw;
  font-size:1.45cqw;color:rgba(18,48,46,.68);
  box-shadow:0 1.6cqw 3cqw rgba(10,40,36,.24);
}
.sr__note b{color:#e0a63c;font-size:1.5cqw;letter-spacing:.12em}

/* ── comparatif ───────────────────────────────── */
.compare{padding-top:calc(var(--section-y) * .6);padding-bottom:var(--section-y)}
.compare__head{display:flex;flex-direction:column;align-items:center;text-align:center}
.compare__title{margin-top:var(--sp-24);max-width:20ch}
.compare__sub{
  margin-top:var(--sp-24);max-width:52ch;
  color:var(--color-silver-mist);line-height:1.5;
}

.compare__grid{
  margin-top:var(--sp-48);
  display:grid;grid-template-columns:repeat(2,1fr);
  gap:clamp(32px,5vw,96px);
}
.compare__name{
  font-size:clamp(1.35rem,2.2vw,1.9rem);
  line-height:1;letter-spacing:-.03em;
}
.compare__list{list-style:none;margin-top:var(--sp-28);border-top:1px solid var(--line)}
.compare__list li{
  display:flex;align-items:center;gap:16px;
  padding-block:var(--sp-20);
  border-bottom:1px solid var(--line);
  line-height:1.4;
  color:var(--color-slate-deep);
}
/* la colonne Nexus porte l'encre pleine : c'est elle qu'on doit lire */
.compare__col--us .compare__list li{color:var(--color-platinum)}

.compare__mark{
  flex:none;width:28px;height:28px;border-radius:50%;
  display:grid;place-items:center;
  background:var(--gradient-cta);color:#04211e;
}
.compare__mark svg{
  width:15px;height:15px;
  fill:none;stroke:currentColor;stroke-width:12;stroke-linecap:round;
}
.compare__mark--off{background:var(--color-liquid-kelp);color:var(--color-slate-deep)}
.compare__mark--off svg{width:12px;height:12px;stroke-width:1.6}

/* ── statement ──────────────────────────────────────────────── */
.statement{padding-top:var(--section-y);padding-bottom:calc(var(--section-y) * .6);border-top:1px solid var(--line-soft)}
/* colonne gauche calée sur la largeur naturelle du titre (20ch),
   le mockup occupe l'espace resté vide à sa droite */
.statement__inner{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  column-gap:clamp(32px,4vw,72px);
  align-items:start;
}
.statement__inner > .eyebrow{grid-column:1;grid-row:1;justify-self:start}
/* colonne gauche : titre + flèche qui invite à descendre */
.statement__lead{grid-column:1;grid-row:2;margin-top:var(--sp-32)}
.statement__text{
  max-width:20ch;
  font-size:clamp(1.9rem,4.4vw,3.6rem);
  line-height:1.05;letter-spacing:-.04em;
  color:var(--color-platinum);
}
/* colonne droite : le mockup et le paragraphe restent solidaires,
   pour que le texte suive l'image et non la hauteur du titre */
.statement__side{grid-column:2;grid-row:2;margin-top:var(--sp-32)}
.statement__visual{
  border:1px solid var(--line-soft);
  border-radius:var(--radius-cards);
  overflow:hidden;
  background:#031710;
}
.statement__visual img{display:block;width:100%;height:auto}

/* flèche « la suite est plus bas » : tracée au scroll par GSAP */
.statement__cue{
  margin-top:clamp(32px,5vw,72px);
  margin-left:clamp(0px,2vw,32px);
  color:var(--color-lavender-phosphor);
}
.cue{display:block;width:clamp(140px,18vw,236px);height:auto;max-width:100%;overflow:visible}

.statement__meta{
  margin-top:var(--sp-36);
  margin-left:auto;
  max-width:600px;
  display:flex;flex-direction:column;align-items:flex-start;gap:var(--sp-28);
}
.statement__meta p{font-size:16px;line-height:1.5;color:var(--color-silver-mist)}

/* desktop : la colonne gauche s'étire sur la hauteur du mockup et la flèche
   se cale en bas, juste au-dessus de la section qu'elle annonce */
@media (min-width:1081px){
  .statement__inner{align-items:stretch}
  .statement__lead{display:flex;flex-direction:column}
  .statement__cue{margin-top:auto;padding-top:clamp(32px,5vw,72px)}
}

/* ── offres & tarifs ────────────────────────────────────────── */
.explore{padding-top:calc(var(--section-y) * .5);padding-bottom:var(--section-y)}

.pricing__head{
  display:flex;
  justify-content:center;
}
.pricing__intro{
  display:flex;flex-direction:column;align-items:center;
  width:100%;text-align:center;
}
/* le titre tient sur une seule ligne et occupe la largeur : la taille suit
   le viewport, plafonnée pour ne jamais dépasser la gouttière */
.pricing__intro .h2{
  margin-top:var(--sp-20);
  font-size:clamp(1.75rem,5.4vw,4.8rem);
}
.pricing__sub{
  margin-top:var(--sp-20);max-width:60ch;
  color:var(--color-silver-mist);line-height:1.5;
  text-wrap:balance;
}

/* interrupteur de facturation : le choix doit sauter aux yeux */
.pay{
  margin-top:var(--sp-28);
  display:inline-flex;flex-direction:column;align-items:center;gap:var(--sp-16);
  padding:var(--sp-24) var(--sp-24) var(--sp-20);
  border-radius:calc(var(--radius-cards) + 6px);
  background:linear-gradient(180deg,rgba(120,232,209,.07) 0%,rgba(120,232,209,.02) 100%);
  box-shadow:inset 0 0 0 1px var(--line);
}
.pay__label{
  display:inline-flex;align-items:center;gap:10px;
  font-size:12px;font-weight:var(--w-medium);
  letter-spacing:.12em;text-transform:uppercase;
  color:var(--color-platinum);
}
.pay__hint{font-size:12px;line-height:1.4;color:var(--color-slate-deep)}

.switch{
  position:relative;display:inline-flex;align-items:center;
  padding:5px;
  border-radius:var(--radius-pill);
  background:rgba(4,33,30,.55);
  box-shadow:inset 0 0 0 1px rgba(214,250,244,.20);
}
.switch__pill{
  position:absolute;left:0;top:5px;height:calc(100% - 10px);width:0;
  border-radius:var(--radius-pill);
  background:var(--gradient-cta);
  box-shadow:0 12px 30px -12px rgba(59,246,215,.75);
  transform:translateX(5px);
  opacity:0;
  transition:transform .55s var(--ease-out),width .55s var(--ease-out),opacity .35s var(--ease-out);
  will-change:transform,width;
}
.switch.is-ready .switch__pill{opacity:1}
.switch__btn{
  position:relative;z-index:1;
  display:inline-flex;align-items:center;gap:11px;
  border-radius:var(--radius-pill);
  padding:17px 28px;
  font-family:var(--font-arial);
  font-size:13px;line-height:1;letter-spacing:.1em;text-transform:uppercase;
  white-space:nowrap;
  color:var(--color-silver-mist);
  transition:color .4s var(--ease-out);
}
.switch__btn:hover{color:var(--color-platinum)}
.switch.is-ready .switch__btn.is-on{color:#04211e;font-weight:var(--w-medium)}
.switch:not(.is-ready) .switch__btn.is-on{color:var(--color-platinum)}
.switch__btn em{
  font-style:normal;
  font-size:var(--text-caption);letter-spacing:var(--tracking-caption);
  padding:5px 9px;border-radius:var(--radius-small);
  background:rgba(120,232,209,.14);color:var(--color-liquid-mist);
  transition:background-color .4s var(--ease-out),color .4s var(--ease-out);
}
.switch.is-ready .switch__btn.is-on em{background:rgba(4,33,30,.14);color:#04211e}

/* grille des formules */
.plans{
  margin-top:var(--sp-36);
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:var(--sp-20);
  padding:24px 18px;
  border-radius:calc(var(--radius-cards) + 12px);
  background:linear-gradient(180deg,rgba(23,86,76,.34) 0%,rgba(23,86,76,0) 100%);
  box-shadow:inset 0 0 0 1px var(--line-soft);
}
.plan__slot{display:flex}

.plan{
  position:relative;flex:1;
  display:flex;flex-direction:column;
  background:linear-gradient(180deg,#114439 0%,#0b342d 100%);
  border:1px solid var(--line-soft);
  border-radius:var(--radius-cards);
  padding:var(--sp-28);
  overflow:hidden;
  transition:transform .6s var(--ease-out),border-color .6s var(--ease-out);
}
.plan::after{
  content:"";position:absolute;left:-30%;top:-60%;width:160%;height:160%;
  background:radial-gradient(closest-side,rgba(120,232,209,.16),transparent 70%);
  opacity:0;transition:opacity .6s var(--ease-out);pointer-events:none;
}
.plan:hover{transform:translateY(-4px)}
.plan:hover::after{opacity:1}
.plan > *{position:relative;z-index:1}

.plan--popular{
  background:linear-gradient(180deg,#17594c 0%,#0c3b33 100%);
  border-color:rgba(120,232,209,.55);
  box-shadow:
    0 0 0 1px rgba(120,232,209,.22),
    0 36px 80px -40px rgba(0,0,0,.95),
    0 0 70px -26px rgba(59,246,215,.42);
  transform:scale(1.045);
  z-index:2;
}
.plan--popular:hover{transform:scale(1.045) translateY(-4px)}

.plan__top{min-height:34px;display:flex;align-items:center}
.plan__badge{
  display:inline-flex;align-items:center;gap:8px;
  font-size:11px;font-weight:var(--w-medium);
  letter-spacing:var(--tracking-caption);text-transform:uppercase;
  padding:9px 15px;border-radius:var(--radius-pill);
  background:var(--gradient-cta);color:#04211e;
  box-shadow:0 12px 30px -14px rgba(59,246,215,.85);
}
.plan__badge::before{
  content:"";width:5px;height:5px;border-radius:50%;background:#04211e;
}

.plan__price{margin-top:var(--sp-20);display:flex;flex-direction:column;gap:8px}
.plan__from{
  font-size:var(--text-caption);letter-spacing:var(--tracking-caption);
  text-transform:uppercase;color:var(--color-slate-deep);
}
.plan__row{display:flex;align-items:baseline;gap:9px;color:var(--color-platinum)}
.plan__mult{
  font-size:clamp(1.1rem,1.8vw,1.4rem);
  letter-spacing:-.03em;color:var(--color-liquid-mist);
}
.plan__mult[hidden]{display:none}
.plan__amount{
  font-size:clamp(2.3rem,3.6vw,3.2rem);
  line-height:1;letter-spacing:var(--tracking-heading-lg);
  font-weight:var(--w-medium);
  font-variant-numeric:tabular-nums;
}
.plan__cur{font-size:1.05rem;letter-spacing:-.02em;color:var(--color-liquid-mist)}
.plan__period{font-size:13px;line-height:1.4;color:var(--color-slate-deep)}

.plan__name{
  margin-top:var(--sp-24);
  font-size:clamp(1.3rem,2vw,1.75rem);
  line-height:1.05;letter-spacing:-.03em;
}
.plan__desc{
  margin-top:var(--sp-12);
  font-size:15px;line-height:1.5;
  color:var(--color-silver-mist);
}
.plan--popular .plan__desc{color:#c7ece4}

.plan__includes{
  margin-top:var(--sp-28);padding-top:var(--sp-24);
  border-top:1px solid var(--line);
}
.plan__includes h4{
  font-size:11px;font-weight:var(--w-medium);
  letter-spacing:.12em;text-transform:uppercase;
  color:var(--color-slate-deep);
}
.plan--popular .plan__includes h4{color:var(--color-liquid-mist)}

.plan__list{list-style:none;margin-top:var(--sp-20);display:flex;flex-direction:column;gap:14px}
.plan__list li{
  display:flex;align-items:flex-start;gap:13px;
  font-size:15px;line-height:1.4;
  color:var(--color-silver-mist);
}
.plan--popular .plan__list li{color:var(--color-platinum)}
.plan__check{
  flex:none;width:24px;height:24px;margin-top:1px;
  border-radius:50%;display:grid;place-items:center;
  background:rgba(120,232,209,.13);color:#94f0e1;
}
.plan__check svg{
  width:13px;height:13px;
  fill:none;stroke:currentColor;stroke-width:12;stroke-linecap:round;
}
.plan--popular .plan__check{background:var(--gradient-cta);color:#04211e}

.plan__foot{margin-top:auto;padding-top:var(--sp-32)}
.plan__cta{width:100%}

.plans__note{
  margin-top:var(--sp-24);max-width:70ch;
  font-size:13px;line-height:1.5;color:var(--color-slate-deep);
}

/* ── kinetic pinned ─────────────────────────────────────────── */
.kinetic{
  position:relative;
  height:100svh;
  overflow:hidden;
  background:var(--color-liquid-deep);
  display:grid;place-items:center;
}
.orb--deep{opacity:.9}
.kinetic__stage{position:relative;z-index:2;width:100%}
.kinetic__line{
  display:flex;width:max-content;
  font-size:clamp(4rem,18vw,295px);
  font-weight:var(--w-medium);
  line-height:1;letter-spacing:-.046em;
  color:var(--color-platinum);
  white-space:nowrap;
  will-change:transform;
}
.kinetic__line--a{opacity:.95}
.kinetic__line--b{
  color:transparent;
  -webkit-text-stroke:1px rgba(148,240,225,.45);
  margin-top:clamp(-14px,-1.4vw,-6px);
}
.kinetic__note{
  margin-top:var(--sp-40);
  padding-inline:var(--gutter);
  max-width:600px;
  font-size:14px;line-height:1.5;
  color:var(--color-silver-mist);
}

/* ── capabilities ───────────────────────────────────────────── */
.caps{padding-block:var(--section-y)}
.caps__head .h2{margin-top:var(--sp-24)}
.caps__grid{
  margin-top:var(--sp-48);
  display:grid;grid-template-columns:repeat(2,1fr);
  gap:var(--sp-24);
}
.card{
  position:relative;
  background:var(--color-liquid-kelp);
  border:1px solid var(--line-soft);
  border-radius:var(--radius-cards);
  padding:var(--sp-36);
  min-height:280px;
  display:flex;flex-direction:column;
  overflow:hidden;
  transition:background-color .6s var(--ease-out),transform .6s var(--ease-out);
}
.card::after{
  content:"";position:absolute;left:-30%;top:-60%;width:160%;height:160%;
  background:radial-gradient(closest-side,rgba(120,232,209,.16),transparent 70%);
  opacity:0;transition:opacity .6s var(--ease-out);pointer-events:none;
}
.card:hover{transform:translateY(-4px)}
.card:hover::after{opacity:1}
.card__idx{
  font-size:var(--text-caption);letter-spacing:var(--tracking-caption);
  text-transform:uppercase;color:var(--color-slate-deep);
}
.card h3{
  margin-top:auto;padding-top:var(--sp-48);
  font-size:clamp(1.5rem,2.4vw,2.25rem);
  line-height:1;letter-spacing:-.03em;
}
.card p{margin-top:var(--sp-20);color:var(--color-silver-mist);line-height:1.5;max-width:46ch}

/* ── quote ──────────────────────────────────────────────────── */
.quote{padding-block:var(--section-y);border-top:1px solid var(--line-soft)}
.quote__inner{display:flex;flex-direction:column;align-items:center;text-align:center}
.quote__glyph{width:52px;height:auto;color:var(--color-liquid-mist)}
.quote__glyph path{opacity:.5}
.quote blockquote{
  margin-top:var(--sp-36);
  max-width:22ch;
  font-size:clamp(1.6rem,3.8vw,3.1rem);
  font-weight:var(--w-medium);
  line-height:1.1;letter-spacing:-.03em;
  color:var(--color-ash);
}
.quote__by{margin-top:var(--sp-40);display:flex;flex-direction:column;gap:8px}
.quote__name{
  font-size:12px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--color-platinum);
}
.quote__role{
  font-size:var(--text-caption);letter-spacing:var(--tracking-caption);
  text-transform:uppercase;color:var(--color-slate-deep);
}

/* ── cta well ───────────────────────────────────────────────── */
.cta{padding-bottom:var(--section-y)}
.well{
  background:var(--color-liquid-deep);
  border:1px solid var(--line-soft);
  border-radius:var(--radius-cards);
  padding:var(--sp-80) clamp(24px,5vw,64px);
  display:flex;flex-direction:column;align-items:flex-start;
  position:relative;overflow:hidden;
}
.well::before{
  content:"";position:absolute;right:-10%;top:-40%;
  width:60%;aspect-ratio:1;
  background:radial-gradient(closest-side,rgba(120,232,209,.18),transparent 72%);
  pointer-events:none;
}
.well__rings{
  position:absolute;
  right:clamp(-80px,-2vw,0px);top:50%;translate:0 -50%;
  width:clamp(260px,34vw,470px);height:auto;
  stroke-width:1;pointer-events:none;
  opacity:.9;
}
/* anneaux du CTA : bleu lisible sur fond nocturne */
.well__rings g[stroke]{stroke:#5edec9}
.well__rings circle[fill]{fill:#78e8d5}
.well__orbit{transform-origin:200px 200px;animation:orbit 26s linear infinite}
@keyframes orbit{to{transform:rotate(360deg)}}

.well > .eyebrow{position:relative}
.well__title{margin-top:var(--sp-24);position:relative}
.well__sub{
  margin-top:var(--sp-28);max-width:56ch;
  color:var(--color-silver-mist);line-height:1.5;position:relative;
}
.well__actions{
  margin-top:var(--sp-48);
  display:flex;align-items:center;gap:var(--sp-28);flex-wrap:wrap;position:relative;
}

/* ── footer ─────────────────────────────────────────────────── */
.foot{
  background:var(--color-liquid-deep);
  padding-top:var(--sp-80);
  padding-bottom:var(--sp-40);
}
.foot__grid{
  display:grid;
  grid-template-columns:minmax(0,1.6fr) repeat(3,minmax(0,.8fr));
  gap:var(--sp-48) var(--sp-24);
}
.foot__brand p{margin-top:var(--sp-24);max-width:34ch;color:var(--color-slate-deep);font-size:14px;line-height:1.5}
.foot__col{display:flex;flex-direction:column;gap:14px}
.foot__col h4{
  font-size:var(--text-caption);letter-spacing:var(--tracking-caption);
  text-transform:uppercase;color:var(--color-slate-deep);
  font-weight:var(--w-medium);margin-bottom:6px;
}
.foot__col a{
  font-size:14px;color:var(--color-silver-mist);width:fit-content;
  transition:color .3s var(--ease-out),transform .4s var(--ease-out);
}
.foot__col a:hover{color:var(--color-platinum);transform:translateX(4px)}

.foot__word{
  margin-top:clamp(60px,9vw,140px);
  font-size:clamp(3.5rem,16vw,15rem);
  font-weight:var(--w-medium);
  line-height:.85;letter-spacing:-.046em;
  text-align:center;
  color:transparent;
  background:linear-gradient(180deg,rgba(148,240,225,.30) 0%,rgba(13,59,52,0) 88%);
  -webkit-background-clip:text;background-clip:text;
  user-select:none;
}

.foot__legal{
  margin-top:var(--sp-40);padding-top:var(--sp-24);
  border-top:1px solid var(--line);
  display:flex;align-items:center;justify-content:space-between;gap:var(--sp-24);
  flex-wrap:wrap;
  font-size:var(--text-caption);letter-spacing:var(--tracking-caption);
  text-transform:uppercase;color:var(--color-slate-deep);
}
.foot__legal-links{display:flex;gap:var(--sp-24)}
.foot__legal-links a:hover{color:var(--color-liquid-mist)}

/* ── reveal defaults (pre-JS) ───────────────────────────────── */
.js [data-anim]{opacity:0}
/* hidden only until JS has split the lines and set their masked start state,
   the offset itself is applied by GSAP so it owns the transform baseline */
.js [data-split]{visibility:hidden}
.js [data-split].is-ready{visibility:visible}

/* ── responsive ─────────────────────────────────────────────── */
@media (max-width:1080px){
  .plans{grid-template-columns:1fr;gap:var(--sp-16)}
  .plan--popular{transform:none}
  .plan--popular:hover{transform:translateY(-4px)}
  .foot__grid{grid-template-columns:1fr 1fr}
  .statement__inner{display:block}
  .statement__side{margin-top:var(--sp-40)}
  .statement__visual{max-width:620px}
}

@media (max-width:860px){
  .compare__grid{grid-template-columns:1fr;gap:var(--sp-48)}
  .nav__links{display:none}
  .nav__inner{grid-template-columns:1fr auto}
  .burger{display:block}
  .nav__end .btn{display:none}
  .caps__grid{grid-template-columns:1fr}
  .statement__meta{margin-left:0}
  .statement__text{max-width:none}
  .statement__cue{margin-left:0;margin-top:var(--sp-40)}
  .hero{padding-top:clamp(104px,14vh,150px)}
  .pay{width:100%;align-items:stretch}
  .switch{width:100%;justify-content:space-between}
  .switch__btn{flex:1;justify-content:center;padding-inline:14px}
  .plan{padding:var(--sp-24) var(--sp-20)}
  .well{padding:var(--sp-48) var(--sp-24)}
  .well__rings{display:none}
}

@media (max-width:560px){
  .foot__grid{grid-template-columns:1fr}
  .hero__actions{gap:var(--sp-20);width:100%}
  .hero__title{max-width:none}
  .btn--lg{width:100%}
  .kinetic{height:80svh}
  .pay{padding:var(--sp-20) var(--sp-16) var(--sp-16)}
  .switch__btn{font-size:11px;letter-spacing:.06em;gap:7px;padding-inline:10px}
  .switch__btn em{padding:4px 7px}
  .plan__cta{width:100%}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;
  }
  .js [data-anim]{opacity:1}
  .js [data-split]{visibility:visible}
  .js [data-split] .line__i{transform:none}
  .ticker__track{animation:none}
  .grain{animation:none}
}