/* =========================================================================
   VISISPHER 2.0
   Système : surfaces r16 · contrôles r10 · pastilles 999px
   Accent interactif unique : turquoise. Violet et mauve = atmosphère seulement.
   ========================================================================= */

:root{
  /* Univers */
  --void:#050A14;
  --deep:#0B162C;
  --slate:#1C2942;
  --steel:#3B556D;

  /* Accent interactif */
  --turq:#5FC2BA;
  --turq-hi:#7FE3DA;
  --turq-dk:#04202A;

  /* Atmosphère (jamais interactive) */
  --violet:#8B7CFF;
  --mauve:#C678C4;
  --rose:#E0BACD;

  /* Texte : le contenu utile reste clair, seuls les micro-libellés
     techniques sont en retrait. Tous testés au-dessus de WCAG AA. */
  --white:#F4F6FA;
  --muted:#B7C7DA;   /* texte courant sur fond réseau */
  --dim:#7F94AD;     /* libellés monospace décoratifs */

  /* Formes */
  --r-surface:16px;
  --r-control:10px;

  /* Rythme */
  --wrap:1240px;
  --gut:clamp(20px,5vw,64px);
  --section:clamp(96px,13vw,180px);

  /* Type */
  --f-display:"Space Grotesk","Segoe UI",system-ui,sans-serif;
  --f-body:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,"SF Mono",Menlo,monospace;

  --ease:cubic-bezier(.16,1,.3,1);
  /* Déplacement entre zones : démarre avec de l'élan, garde une phase
     centrale lisible, puis se pose. Moins abrupt que --ease. */
  --ease-voyage:cubic-bezier(.34,.66,.22,1);
}

*,*::before,*::after{box-sizing:border-box}

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:96px;
  scroll-padding-bottom:120px;  /* le menu flottant est en bas */
  color-scheme:dark;
}

body{
  margin:0;
  background:var(--void);
  color:var(--white);
  font-family:var(--f-body);
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

body.is-locked{overflow:hidden}

img{max-width:100%;height:auto;display:block}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
a{color:inherit;text-decoration:none}
ul,ol{margin:0;padding:0;list-style:none}
h1,h2,h3,p,dl,dd,figure{margin:0}

/* Filet de sécurité : aucun mot long ne peut élargir la page. */
h1,h2,h3,p,li,a,span{overflow-wrap:break-word}

svg{fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}

::selection{background:rgba(95,194,186,.28);color:#fff}

:focus-visible{
  outline:2px solid var(--turq-hi);
  outline-offset:3px;
  border-radius:4px;
}

.sr{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

.skip{
  position:fixed;top:-100px;left:16px;z-index:200;
  padding:12px 18px;border-radius:var(--r-control);
  background:var(--turq);color:var(--turq-dk);font-weight:600;
  transition:top .2s var(--ease);
}
.skip:focus{top:16px}

.wrap{
  width:100%;max-width:var(--wrap);
  margin-inline:auto;padding-inline:var(--gut);
}

/* =========================================================================
   NIVEAU 3 / 4 — le réseau
   ========================================================================= */

#reseau{
  position:fixed;inset:0;z-index:0;
  width:100%;height:100%;
  display:block;
  pointer-events:none;
}

/* Assombrit les bords pour garder le texte lisible sur toute la page */
.vignette{
  position:fixed;inset:0;z-index:1;pointer-events:none;
  background:
    radial-gradient(130% 90% at 50% 48%, transparent 0%, rgba(5,10,20,.22) 55%, rgba(5,10,20,.8) 100%),
    linear-gradient(90deg, rgba(5,10,20,.72) 0%, rgba(5,10,20,.28) 26%, rgba(5,10,20,0) 46%);
}

main,.topbar,.foot,.dock,.frag{position:relative;z-index:2}

/* =========================================================================
   TYPOGRAPHIE
   ========================================================================= */

.h2{
  font-family:var(--f-display);
  font-weight:600;
  font-size:clamp(2rem,4.4vw,3.35rem);
  line-height:1.06;
  letter-spacing:-.025em;
  max-width:17ch;
}

.eyebrow{
  font-family:var(--f-mono);
  font-size:.688rem;
  letter-spacing:.22em;
  color:var(--dim);
  margin-bottom:18px;
}

.grad{
  background:linear-gradient(96deg,var(--turq-hi) 0%,var(--violet) 55%,var(--mauve) 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:var(--turq-hi);
}

.link{
  display:inline-flex;align-items:center;gap:9px;
  font-weight:500;font-size:.938rem;color:var(--turq);
  padding-block:6px;
  transition:color .25s var(--ease),gap .25s var(--ease);
}
.link svg{width:17px;height:17px;stroke-width:1.7}
.link:hover{color:var(--turq-hi);gap:14px}

/* =========================================================================
   BOUTONS
   ========================================================================= */

.btn{
  display:inline-flex;align-items:center;gap:11px;
  padding:15px 24px;border-radius:var(--r-control);
  font-weight:600;font-size:.938rem;letter-spacing:-.005em;
  white-space:nowrap;
  transition:transform .25s var(--ease),box-shadow .3s var(--ease),
             background-color .25s var(--ease),border-color .25s var(--ease);
}
.btn svg{width:18px;height:18px;stroke-width:1.8;transition:transform .3s var(--ease)}
.btn:hover svg{transform:translateX(4px)}
.btn:active{transform:translateY(1px) scale(.99)}

.btn--primary{
  background:linear-gradient(135deg,var(--turq-hi),var(--turq));
  color:var(--turq-dk);
  box-shadow:0 0 0 1px rgba(127,227,218,.5),0 14px 40px -14px rgba(95,194,186,.85);
}
.btn--primary:hover{
  box-shadow:0 0 0 1px rgba(127,227,218,.8),0 18px 52px -14px rgba(95,194,186,1);
  transform:translateY(-2px);
}

.btn--ghost{
  color:var(--white);
  background:rgba(11,22,44,.42);
  border:1px solid rgba(154,173,196,.3);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}
.btn--ghost:hover{
  background:rgba(28,41,66,.62);
  border-color:rgba(95,194,186,.55);
  transform:translateY(-2px);
}

.btn--lg{padding:19px 34px;font-size:1.031rem}

.rnd{
  width:46px;height:46px;flex:none;
  display:grid;place-items:center;border-radius:50%;
  color:var(--white);
  background:rgba(11,22,44,.5);
  border:1px solid rgba(154,173,196,.24);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  transition:border-color .25s var(--ease),background-color .25s var(--ease),transform .25s var(--ease);
}
.rnd svg{width:20px;height:20px}
.rnd:hover{border-color:rgba(95,194,186,.6);background:rgba(28,41,66,.7)}
.rnd:active{transform:scale(.94)}

/* =========================================================================
   EN-TÊTE / LOGO
   ========================================================================= */

.topbar{
  position:absolute;top:0;left:0;right:0;
  padding:clamp(22px,3.2vw,42px) var(--gut) 0;
}

/* Logo officiel. Le fichier porte déjà son halo : aucun effet ajouté,
   aucune recomposition, seules ses proportions sont respectées. */
.logo{
  display:inline-block;
  transition:transform .5s var(--ease);
}
.logo:hover{transform:scale(1.02)}

.logo img{
  display:block;
  width:clamp(200px,20vw,272px);
  height:auto;
}

/* =========================================================================
   01 · HERO
   ========================================================================= */

.hero{
  position:relative;
  min-height:100dvh;
  display:flex;align-items:center;
  padding:clamp(140px,18vh,200px) 0 clamp(150px,20vh,190px);
}

.hero__inner{
  width:100%;max-width:var(--wrap);
  margin-inline:auto;padding-inline:var(--gut);
}

.hero__content{max-width:min(770px,60vw)}

.hero__title{
  font-family:var(--f-display);
  font-weight:500;
  font-size:clamp(2.5rem,5.1vw,4.125rem);
  line-height:1.06;
  letter-spacing:-.032em;
}
.hero__title .grad{font-weight:600}

.hero__lead{
  margin-top:clamp(22px,2.6vw,32px);
  max-width:44ch;
  font-family:var(--f-mono);
  font-size:clamp(.875rem,1.25vw,1rem);
  line-height:1.75;
  color:var(--muted);
  letter-spacing:-.01em;
}

.hero__actions{
  display:flex;flex-wrap:wrap;gap:14px;
  margin-top:clamp(32px,3.6vw,44px);
}

/* --- NIVEAU 2 : interfaces holographiques ------------------------------- */

.hud{
  position:absolute;inset:0;
  pointer-events:none;
  overflow:hidden;
}

.hud__panel{
  position:absolute;
  padding:13px 15px;
  border-radius:12px;
  background:
    radial-gradient(120% 90% at 6% 0%,rgba(95,194,186,.13),transparent 60%),
    linear-gradient(158deg,rgba(38,58,94,.34),rgba(9,19,40,.22));
  border:1px solid rgba(127,227,218,.19);
  backdrop-filter:blur(14px) saturate(150%);
  -webkit-backdrop-filter:blur(14px) saturate(150%);
  box-shadow:
    inset 0 1px 0 rgba(196,255,250,.16),
    0 0 34px -14px rgba(95,194,186,.32),
    0 26px 60px -30px rgba(0,0,0,.9);
  font-family:var(--f-mono);
  font-size:.625rem;
  letter-spacing:.06em;
  color:var(--muted);
  opacity:0;
  animation:hud-in 1.1s var(--ease) forwards;
}

/* Coins holographiques */
.hud__panel::before,.hud__panel::after{
  content:"";position:absolute;width:9px;height:9px;
  border-color:rgba(127,227,218,.7);border-style:solid;
  filter:drop-shadow(0 0 5px rgba(127,227,218,.6));
}
.hud__panel::before{top:-1px;left:-1px;border-width:1px 0 0 1px}
.hud__panel::after{bottom:-1px;right:-1px;border-width:0 1px 1px 0}

.hud__head{
  display:flex;align-items:center;gap:7px;
  color:var(--turq);font-size:.625rem;letter-spacing:.13em;
  margin-bottom:9px;
}
.hud__x{color:var(--steel)}
.hud__close{
  margin-left:auto;color:var(--steel);font-size:.813rem;line-height:1;
  pointer-events:none;
}

.hud__rows{display:grid;gap:5px;min-width:150px}
.hud__rows div{display:flex;justify-content:space-between;gap:16px}
.hud__rows dt{color:var(--dim)}
.hud__rows dd{margin:0;color:var(--white)}
.hud__rows .is-on{color:var(--turq-hi)}

.hud__foot{
  display:flex;justify-content:space-between;gap:16px;
  margin-top:8px;color:var(--dim);
}

.spark{width:130px;height:34px;display:block}
.spark__line{
  stroke:var(--turq);stroke-width:1.3;
  filter:drop-shadow(0 0 4px rgba(95,194,186,.9));
  stroke-dasharray:400;
  animation:spark-run 9s linear infinite;
}

.globe{width:104px;height:104px;display:block;margin:2px auto 0}
.globe__edge{stroke:rgba(95,194,186,.42);stroke-width:1}
.globe__m{stroke:rgba(95,194,186,.2);stroke-width:.9;fill:none}
.globe__pt{fill:var(--turq-hi);stroke:none;filter:drop-shadow(0 0 5px var(--turq-hi))}
.globe__pt--1{animation:blip 4s ease-in-out infinite}
.globe__pt--2{animation:blip 4s ease-in-out infinite 2s}

.hud__panel--stream{top:16%;right:30%}
.hud__panel--node{top:31%;right:6%}
.hud__panel--globe{bottom:19%;right:9%}

.coord{
  position:absolute;
  display:grid;gap:2px;
  font-family:var(--f-mono);font-size:.625rem;letter-spacing:.1em;
  color:var(--dim);
  opacity:0;
  animation:hud-in 1.4s var(--ease) forwards;
}
.coord--a{top:13%;right:16%;animation-delay:1.05s}
.coord--b{bottom:17%;left:var(--gut);animation-delay:1.2s}
.coord--c{top:62%;right:20%;animation-delay:1.35s}

@keyframes hud-in{
  from{opacity:0;transform:translate3d(0,14px,0) scale(.97)}
  to{opacity:1;transform:none}
}
@keyframes spark-run{
  from{stroke-dashoffset:400}
  to{stroke-dashoffset:0}
}
@keyframes blip{
  0%,100%{opacity:.25}
  50%{opacity:1}
}

/* Dérive très lente des panneaux dans l'espace (2e animation, en boucle) */
.hud__panel--stream{
  animation:hud-in 1.1s var(--ease) .5s forwards,
            drift-a 22s ease-in-out 1.6s infinite;
}
.hud__panel--node{
  animation:hud-in 1.1s var(--ease) .75s forwards,
            drift-b 26s ease-in-out 1.85s infinite;
}
.hud__panel--globe{
  animation:hud-in 1.1s var(--ease) .95s forwards,
            drift-a 30s ease-in-out 2.05s infinite reverse;
}

@keyframes drift-a{
  0%,100%{translate:0 0}
  50%{translate:-7px 11px}
}
@keyframes drift-b{
  0%,100%{translate:0 0}
  50%{translate:9px -8px}
}

/* =========================================================================
   02 · EXPLORER / NODES
   ========================================================================= */

.explorer{padding-block:var(--section)}

.nodes-wrap{position:relative;margin-top:clamp(44px,5vw,68px)}

/* Le maillage passe derrière les fragments : ce sont des nœuds reliés,
   pas quatre cartes posées côte à côte. */
.web{
  position:absolute;inset:0;width:100%;height:100%;
  overflow:visible;pointer-events:none;z-index:0;
}
.web__base{
  fill:none;stroke:rgba(95,194,186,.3);stroke-width:1;
  stroke-dasharray:var(--len,1200);
  stroke-dashoffset:var(--len,1200);
  transition:stroke-dashoffset 1.8s var(--ease) .2s;
}
.web.is-drawn .web__base{stroke-dashoffset:0}

.web__pulse{
  fill:none;stroke:var(--turq-hi);stroke-width:1.7;
  filter:drop-shadow(0 0 6px rgba(95,194,186,.95));
  stroke-dasharray:54 var(--len,1200);
  stroke-dashoffset:54;
  opacity:0;
}
.web.is-drawn .web__pulse{
  opacity:1;
  animation:web-run 9s linear 1.4s infinite;
}
@keyframes web-run{
  from{stroke-dashoffset:54}
  to{stroke-dashoffset:var(--neg,-1200)}
}

.nodes{
  position:relative;z-index:1;
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:clamp(16px,2vw,26px);
}

/* Décalage vertical : évite la grille de cartes parfaitement alignée */
.node:nth-child(2){margin-top:clamp(24px,4vw,56px)}
.node:nth-child(4){margin-top:clamp(24px,4vw,56px)}

.node__btn{
  position:relative;
  display:grid;gap:0;
  width:100%;height:100%;text-align:left;
  padding:clamp(26px,3vw,38px) clamp(24px,3vw,36px) clamp(22px,2.6vw,30px);
  border-radius:var(--r-surface);
  background:linear-gradient(162deg,rgba(28,41,66,.42),rgba(11,22,44,.2));
  border:1px solid rgba(154,173,196,.16);
  backdrop-filter:blur(7px);
  -webkit-backdrop-filter:blur(7px);
  overflow:hidden;
  transition:border-color .35s var(--ease),transform .45s var(--ease),
             background-color .35s var(--ease),box-shadow .45s var(--ease);
}

/* Lueur qui suit le curseur */
.node__btn::before{
  content:"";position:absolute;inset:-1px;border-radius:inherit;
  background:radial-gradient(320px circle at var(--mx,50%) var(--my,0%),
             rgba(95,194,186,.16),transparent 62%);
  opacity:0;transition:opacity .4s var(--ease);pointer-events:none;
}
.node__btn:hover{
  transform:translateY(-5px);
  border-color:rgba(95,194,186,.45);
  box-shadow:0 34px 70px -34px rgba(0,0,0,.95);
}
.node__btn:hover::before{opacity:1}

.node__marker{
  position:absolute;top:20px;right:22px;
  width:26px;height:26px;display:grid;place-items:center;
}
.node__marker i{
  width:7px;height:7px;border-radius:50%;
  background:var(--turq);
  box-shadow:0 0 0 0 rgba(95,194,186,.45);
  animation:pulse 3.4s ease-out infinite;
}
.node:nth-child(2) .node__marker i{background:var(--violet);animation-delay:.85s}
.node:nth-child(3) .node__marker i{background:var(--mauve);animation-delay:1.7s}
.node:nth-child(4) .node__marker i{animation-delay:2.55s}

@keyframes pulse{
  0%{box-shadow:0 0 0 0 rgba(95,194,186,.5)}
  70%{box-shadow:0 0 0 15px rgba(95,194,186,0)}
  100%{box-shadow:0 0 0 0 rgba(95,194,186,0)}
}

.node__index{
  font-family:var(--f-mono);font-size:.688rem;letter-spacing:.17em;
  color:var(--dim);
}
.node__title{
  font-family:var(--f-display);font-weight:600;
  font-size:clamp(1.375rem,2.3vw,1.75rem);
  letter-spacing:-.02em;line-height:1.15;
  margin-top:14px;
}
.node__desc{
  margin-top:12px;max-width:34ch;
  color:var(--muted);font-size:.938rem;line-height:1.6;
}
.node__cta{
  display:inline-flex;align-items:center;gap:9px;
  margin-top:clamp(20px,2.4vw,28px);
  font-size:.875rem;font-weight:600;color:var(--turq);
  transition:gap .3s var(--ease);
}
.node__cta svg{width:16px;height:16px;stroke-width:1.8}
.node__btn:hover .node__cta{gap:14px}

/* =========================================================================
   FENÊTRE HOLOGRAPHIQUE
   ========================================================================= */

.frag{position:fixed;inset:0;z-index:120;display:grid;place-items:center}
.frag[hidden]{display:none}

/* Voile léger : il met le contenu de la page en retrait sans éteindre le
   réseau, qui doit rester lisible derrière la fenêtre. */
.frag__scrim{
  position:absolute;inset:0;
  background:radial-gradient(125% 95% at 50% 50%,rgba(5,10,20,.16),rgba(5,10,20,.6));
  backdrop-filter:blur(2px);
  -webkit-backdrop-filter:blur(2px);
  opacity:0;transition:opacity .45s var(--ease);
}
.frag.is-open .frag__scrim{opacity:1}

.frag__win{
  position:relative;
  width:min(660px,calc(100vw - 2 * var(--gut)));
  max-height:min(78dvh,760px);
  display:flex;flex-direction:column;
  border-radius:var(--r-surface);
  /* Vitre projetée : le fond reste largement transparent, c'est le flou
     d'arrière-plan qui porte la lisibilité, pas une couche opaque.
     Reflets turquoise en haut à gauche, violet en bas à droite. */
  background:
    radial-gradient(115% 85% at 8% 0%,rgba(95,194,186,.16),transparent 56%),
    radial-gradient(105% 85% at 100% 100%,rgba(139,124,255,.13),transparent 62%),
    linear-gradient(160deg,rgba(44,70,112,.32),rgba(9,19,40,.5) 55%,rgba(7,15,34,.54));
  border:1px solid rgba(127,227,218,.24);
  backdrop-filter:blur(30px) saturate(165%);
  -webkit-backdrop-filter:blur(30px) saturate(165%);
  box-shadow:
    inset 0 1px 0 rgba(196,255,250,.24),
    inset 0 -1px 0 rgba(139,124,255,.12),
    inset 0 0 46px rgba(95,194,186,.05),
    0 0 74px -12px rgba(95,194,186,.3),
    0 56px 120px -46px rgba(0,0,0,1);
  /* La fenêtre se déplie depuis le nœud cliqué : l'origine de la trans-
     formation est calculée en JS d'après la position du bouton. */
  opacity:0;transform:translate3d(0,14px,0) scale(.88);
  transform-origin:50% 50%;
  transition:opacity .4s var(--ease),transform .55s var(--ease);
}
.frag.is-open .frag__win{opacity:1;transform:none}

/* Angles lumineux : la fenêtre semble projetée, pas posée. */
.frag__win::before,.frag__win::after{
  content:"";position:absolute;width:18px;height:18px;
  border-style:solid;pointer-events:none;
  filter:drop-shadow(0 0 7px rgba(127,227,218,.75));
}
.frag__win::before{
  top:-1px;left:-1px;border-width:1px 0 0 1px;
  border-color:var(--turq-hi);border-radius:var(--r-surface) 0 0 0;
}
.frag__win::after{
  bottom:-1px;right:-1px;border-width:0 1px 1px 0;
  border-color:#A99BFF;border-radius:0 0 var(--r-surface) 0;
  filter:drop-shadow(0 0 7px rgba(139,124,255,.7));
}

.frag__bar{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:14px 16px 14px 22px;
  border-bottom:1px solid rgba(127,227,218,.16);
}
.frag__id{
  font-family:var(--f-mono);font-size:.688rem;letter-spacing:.18em;color:var(--turq);
}
.frag__close{
  width:36px;height:36px;display:grid;place-items:center;
  border-radius:var(--r-control);color:var(--muted);
  border:1px solid rgba(154,173,196,.2);
  transition:color .25s var(--ease),border-color .25s var(--ease),background-color .25s var(--ease);
}
.frag__close svg{width:17px;height:17px}
.frag__close:hover{color:#fff;border-color:rgba(95,194,186,.55);background:rgba(95,194,186,.12)}

.frag__body{
  padding:clamp(24px,3.4vw,36px) clamp(22px,3.4vw,36px);
  overflow-y:auto;
  overscroll-behavior:contain;
}
.frag__panel[hidden]{display:none}
.frag__panel{animation:frag-panel .5s var(--ease) both}
@keyframes frag-panel{
  from{opacity:0;transform:translate3d(0,10px,0)}
  to{opacity:1;transform:none}
}

.frag__kicker{
  font-family:var(--f-mono);font-size:.688rem;letter-spacing:.17em;color:var(--dim);
}
.frag__title{
  font-family:var(--f-display);font-weight:600;
  font-size:clamp(1.5rem,3vw,2rem);letter-spacing:-.024em;line-height:1.12;
  margin:12px 0 16px;
}
/* Sur une vitre transparente le texte utile passe au blanc cassé :
   il doit rester net quel que soit le flux qui circule derrière. */
.frag__body p{color:#E7EFF9;max-width:58ch;font-size:.969rem}

.frag__list{
  display:grid;gap:11px;
  margin:22px 0 26px;
}
.frag__list li{
  position:relative;padding-left:26px;
  color:var(--white);font-size:.938rem;line-height:1.55;
}
.frag__list li::before{
  content:"";position:absolute;left:2px;top:.62em;
  width:7px;height:7px;border-radius:2px;
  background:var(--turq);
  box-shadow:0 0 8px rgba(95,194,186,.8);
}

.frag__meta{
  display:flex;justify-content:space-between;gap:16px;
  padding:12px 22px;
  border-top:1px solid rgba(127,227,218,.14);
  font-family:var(--f-mono);font-size:.625rem;letter-spacing:.14em;color:var(--dim);
}
.frag__meta span:last-child{color:var(--turq)}

/* =========================================================================
   03 · RÉALISATIONS
   ========================================================================= */

.works{padding-block:var(--section)}

.works__stage{margin-top:clamp(40px,5vw,64px)}

.works__frame{
  position:relative;
  border-radius:var(--r-surface);
  padding:clamp(14px,1.6vw,20px);
  background:
    radial-gradient(90% 70% at 4% 0%,rgba(95,194,186,.12),transparent 58%),
    radial-gradient(80% 70% at 100% 100%,rgba(139,124,255,.1),transparent 62%),
    linear-gradient(162deg,rgba(36,56,92,.3),rgba(9,19,40,.16));
  border:1px solid rgba(127,227,218,.19);
  backdrop-filter:blur(16px) saturate(150%);
  -webkit-backdrop-filter:blur(16px) saturate(150%);
  box-shadow:
    inset 0 1px 0 rgba(196,255,250,.15),
    0 0 60px -20px rgba(95,194,186,.24),
    0 50px 110px -50px rgba(0,0,0,1);
  perspective:1600px;
}
.works__frame::before,.works__frame::after{
  content:"";position:absolute;width:18px;height:18px;
  border-color:rgba(127,227,218,.6);border-style:solid;pointer-events:none;
}
.works__frame::before{top:-1px;left:-1px;border-width:1px 0 0 1px;border-radius:var(--r-surface) 0 0 0}
.works__frame::after{bottom:-1px;right:-1px;border-width:0 1px 1px 0;border-radius:0 0 var(--r-surface) 0}

.work{
  display:grid;
  grid-template-columns:1.72fr .92fr;
  gap:clamp(20px,2.6vw,34px);
  align-items:center;
  animation:work-in .55s var(--ease) both;
}
.work[hidden]{display:none}

@keyframes work-in{
  from{opacity:0;transform:translate3d(22px,0,0)}
  to{opacity:1;transform:none}
}

.work__shot{
  display:block;position:relative;margin:0;
  border-radius:11px;overflow:hidden;
  border:1px solid rgba(154,173,196,.2);
  transform:rotateY(3.2deg) rotateX(1deg);
  transform-origin:left center;
  transition:transform .6s var(--ease),border-color .4s var(--ease);
  box-shadow:0 34px 70px -34px rgba(0,0,0,.95);
}
.work__shot::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(112deg,rgba(95,194,186,.1),transparent 42%,rgba(139,124,255,.1));
  mix-blend-mode:screen;pointer-events:none;
}
.work__shot img{width:100%;filter:saturate(.94) contrast(1.02)}
/* Vignette non cliquable : aucune affordance de lien. */

.work__meta{padding-right:clamp(4px,1vw,14px)}
.work__tag{
  font-family:var(--f-mono);font-size:.688rem;letter-spacing:.17em;color:var(--dim);
}
.work__name{
  font-family:var(--f-display);font-weight:600;
  font-size:clamp(1.5rem,2.6vw,2rem);letter-spacing:-.024em;line-height:1.1;
  margin:12px 0 14px;
}
/* Le secteur est le titre, le nom du client vient ensuite : un visiteur doit
   voir d'abord qu'on travaille pour des métiers très différents. */
.work__client{
  font-family:var(--f-mono);font-size:.813rem;letter-spacing:.1em;
  color:var(--turq);margin:-6px 0 14px;
}
.work__desc{color:var(--muted);font-size:.938rem;line-height:1.65;margin-bottom:16px}

.works__nav{
  display:flex;align-items:center;gap:18px;
  margin-top:clamp(24px,2.8vw,34px);
}
.works__ticks{display:flex;gap:9px;flex:1}
.works__ticks button{
  position:relative;flex:1;height:2px;max-width:70px;
  background:rgba(154,173,196,.22);border-radius:999px;
  transition:background-color .35s var(--ease);
}
.works__ticks button::after{
  content:"";position:absolute;inset:-12px 0;
}
.works__ticks button[aria-current="true"]{
  background:var(--turq);
  box-shadow:0 0 12px rgba(95,194,186,.9);
}
.works__ticks button:hover{background:rgba(95,194,186,.6)}

/* =========================================================================
   04 · À PROPOS
   ========================================================================= */

.about{padding-block:var(--section)}

.about__grid{
  display:grid;
  grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);
  gap:clamp(32px,5vw,80px);
  align-items:center;
}

.about__portrait{position:relative}

.about__frame{
  position:relative;
  border-radius:var(--r-surface);
  overflow:hidden;
  border:1px solid rgba(127,227,218,.32);
  box-shadow:
    0 0 62px -18px rgba(95,194,186,.38),
    0 46px 100px -46px rgba(0,0,0,1),
    inset 0 1px 0 rgba(160,255,246,.14);
}
/* La photographie reste en couleur et non retouchée : c'est la rupture
   humaine du parcours. Seul le cadre capte un reflet du réseau, la lumière
   s'arrête aux bords et ne touche jamais le visage. */
.about__frame img{width:100%}
.about__frame::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(157deg,rgba(122,232,224,.16),transparent 22%),
    linear-gradient(337deg,rgba(139,124,255,.14),transparent 22%);
}
.about__portrait figcaption{
  margin-top:14px;
  font-family:var(--f-mono);font-size:.688rem;letter-spacing:.2em;color:var(--dim);
}

.about__text p{
  margin-top:20px;color:var(--muted);
  font-size:clamp(1rem,1.35vw,1.094rem);line-height:1.75;max-width:54ch;
}
.about__text .link{margin-top:26px}

/* =========================================================================
   05 · TARIFS
   ========================================================================= */

.access{padding-block:var(--section)}

.access__list{
  margin-top:clamp(40px,5vw,60px);
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:1px;
  background:rgba(154,173,196,.16);
  border:1px solid rgba(154,173,196,.16);
  border-radius:var(--r-surface);
  overflow:hidden;
}

.access__item{
  position:relative;
  display:flex;flex-direction:column;
  padding:clamp(28px,3.2vw,42px) clamp(22px,2.6vw,34px) clamp(28px,3.2vw,38px);
  background:linear-gradient(170deg,rgba(34,52,84,.34),rgba(10,20,42,.2));
  backdrop-filter:blur(9px) saturate(130%);
  -webkit-backdrop-filter:blur(9px) saturate(130%);
  transition:background-color .4s var(--ease);
}
.access__item:hover{background:linear-gradient(170deg,rgba(44,66,104,.44),rgba(12,24,48,.26))}

.access__item.is-featured::before{
  content:"";position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--turq),transparent);
  box-shadow:0 0 14px rgba(95,194,186,.9);
}

.access__code{
  font-family:var(--f-mono);font-size:.688rem;letter-spacing:.2em;color:var(--dim);
}
.access__price{
  font-family:var(--f-display);font-weight:500;
  font-size:clamp(2.25rem,4.4vw,3.25rem);letter-spacing:-.035em;line-height:1;
  margin:20px 0 0;
}
.access__price span{
  font-size:.44em;color:var(--turq);margin-left:4px;vertical-align:.34em;
}
.access__name{
  font-family:var(--f-display);font-weight:600;font-size:1.125rem;
  letter-spacing:-.01em;margin:16px 0 10px;
}
.access__desc{
  color:var(--muted);font-size:.938rem;line-height:1.62;
  margin-bottom:clamp(26px,3vw,34px);
}

/* Petit accès holographique. margin-top:auto aligne les trois boutons sur
   la même ligne quelle que soit la longueur des descriptions. */
/* Respiration avant le bouton : la dernière ligne de critères ne doit
   pas coller à l'accès aux tarifs. */
.access__item .ticks--sm{margin-bottom:clamp(30px,3.6vw,44px)}

.access__go{
  align-self:flex-start;
  margin-top:auto;
  display:inline-flex;align-items:center;gap:9px;
  padding:10px 17px;
  border-radius:999px;
  font-size:.813rem;font-weight:600;
  color:var(--turq-hi);
  background:rgba(95,194,186,.08);
  border:1px solid rgba(95,194,186,.3);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  transition:background-color .3s var(--ease),border-color .3s var(--ease),
             color .3s var(--ease),gap .3s var(--ease);
}
.access__go svg{width:15px;height:15px;stroke-width:1.8}
.access__go:hover{
  background:rgba(95,194,186,.17);
  border-color:rgba(127,227,218,.65);
  color:#fff;gap:13px;
}

.access__all{
  margin-top:26px;
  color:var(--white);font-size:.938rem;font-weight:500;
}
.access__note{
  margin-top:8px;
  font-family:var(--f-mono);font-size:.75rem;color:var(--dim);letter-spacing:.01em;
}

/* =========================================================================
   06 · FAQ
   ========================================================================= */

.faq{padding-block:var(--section)}

.faq__stage{
  margin-top:clamp(40px,5vw,60px);
  max-width:820px;
}

/* Les 9 questions restent dans le flux (grille superposée) : le conteneur
   prend la hauteur de la plus longue, aucun saut de mise en page au changement. */
.faq__items{display:grid}
.faq__item{
  grid-area:1 / 1;
  opacity:0;visibility:hidden;
  transform:translate3d(0,16px,0);
  transition:opacity .4s var(--ease),transform .5s var(--ease),visibility 0s .4s;
}
.faq__item.is-active{
  opacity:1;visibility:visible;transform:none;
  transition:opacity .5s var(--ease) .08s,transform .55s var(--ease) .08s;
}

.faq__q{
  font-family:var(--f-display);font-weight:600;
  font-size:clamp(1.375rem,2.9vw,2rem);
  letter-spacing:-.024em;line-height:1.18;
  max-width:22ch;
}
.faq__a{margin-top:20px}
.faq__a p{
  color:var(--muted);
  font-size:clamp(1rem,1.35vw,1.094rem);line-height:1.75;max-width:60ch;
}

.faq__nav{
  display:flex;align-items:center;gap:20px;
  margin-top:clamp(28px,3.4vw,40px);
  padding-top:clamp(24px,2.8vw,32px);
  border-top:1px solid rgba(154,173,196,.14);
}
.faq__count{
  font-family:var(--f-mono);font-size:.813rem;letter-spacing:.18em;color:var(--dim);
}
.faq__count [data-faq-current]{color:var(--turq)}

/* =========================================================================
   07 · DESTINATION
   ========================================================================= */

.end{
  padding-block:clamp(120px,17vw,220px) clamp(150px,18vw,230px);
  text-align:center;
}
.end__inner{display:grid;justify-items:center}

.end__title{
  max-width:20ch;
  font-size:clamp(2.125rem,5.4vw,4rem);
  letter-spacing:-.03em;line-height:1.06;
  text-wrap:balance;
}
.end .btn{margin-top:clamp(34px,4vw,48px)}

.end__direct{
  display:flex;flex-wrap:wrap;justify-content:center;gap:10px 30px;
  margin-top:clamp(30px,3.4vw,42px);
  font-family:var(--f-mono);font-size:.813rem;letter-spacing:.02em;
}
.end__direct a{
  color:var(--dim);
  border-bottom:1px solid transparent;
  padding-bottom:2px;
  transition:color .25s var(--ease),border-color .25s var(--ease);
}
.end__direct a:hover{color:var(--turq);border-color:rgba(95,194,186,.5)}

/* =========================================================================
   PIED DE PAGE
   ========================================================================= */

.foot{
  border-top:1px solid rgba(154,173,196,.13);
  padding:clamp(38px,4.4vw,56px) 0 clamp(120px,14vw,150px);
  background:linear-gradient(180deg,rgba(5,10,20,.5),rgba(5,10,20,.9));
}
.foot__grid{display:grid;gap:22px}
.foot__brand{
  font-family:var(--f-display);font-weight:500;
  font-size:.938rem;letter-spacing:.32em;color:var(--muted);
}
.foot__links{display:flex;flex-wrap:wrap;gap:12px 26px}
.foot__links a{
  font-size:.875rem;color:var(--dim);
  transition:color .25s var(--ease);
}
.foot__links a:hover{color:var(--turq)}
.foot__note{
  font-family:var(--f-mono);font-size:.75rem;color:var(--dim);letter-spacing:.02em;
}

/* =========================================================================
   MENU FLOTTANT
   ========================================================================= */

.dock{
  position:fixed;z-index:110;
  left:50%;bottom:max(18px,env(safe-area-inset-bottom));
  transform:translateX(-50%);
  width:max-content;max-width:calc(100vw - 24px);
}

.dock__list{
  display:flex;align-items:stretch;gap:2px;
  padding:6px;
  border-radius:999px;
  background:linear-gradient(160deg,rgba(28,41,66,.66),rgba(9,18,36,.62));
  border:1px solid rgba(95,194,186,.24);
  backdrop-filter:blur(20px) saturate(140%);
  -webkit-backdrop-filter:blur(20px) saturate(140%);
  box-shadow:
    inset 0 1px 0 rgba(160,255,246,.12),
    0 0 40px -12px rgba(95,194,186,.28),
    0 30px 60px -26px rgba(0,0,0,1);
}

.dock__i{
  display:flex;align-items:center;gap:8px;
  padding:10px 15px;border-radius:999px;
  font-family:var(--f-mono);font-size:.688rem;letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--muted);white-space:nowrap;
  transition:color .3s var(--ease),background-color .3s var(--ease);
}
.dock__i svg{width:17px;height:17px;flex:none;stroke-width:1.5}
.dock__i:hover{color:#fff;background:rgba(95,194,186,.1)}

.dock__i.is-active{
  color:var(--turq-hi);
  background:rgba(95,194,186,.15);
  box-shadow:inset 0 0 0 1px rgba(95,194,186,.34),0 0 18px -4px rgba(95,194,186,.5);
}

/* Contact : action, pas zone. Traité comme un accès direct. */
.dock__cta{
  margin-left:4px;
  color:var(--turq-dk);
  background:linear-gradient(135deg,var(--turq-hi),var(--turq));
  box-shadow:0 0 20px -6px rgba(95,194,186,.85);
}
.dock__cta:hover{color:var(--turq-dk);background:linear-gradient(135deg,#96EEE4,var(--turq-hi))}
/* Sur la zone contact, l'accès direct devient l'emplacement courant. */
.dock__cta.is-active{
  color:var(--turq-dk);
  background:linear-gradient(135deg,#96EEE4,var(--turq-hi));
  box-shadow:0 0 0 2px rgba(127,227,218,.35),0 0 26px -4px rgba(95,194,186,1);
}

.dock__more{display:none}

.dock__sheet{
  position:absolute;left:50%;bottom:calc(100% + 12px);
  transform:translateX(-50%);
  width:min(320px,calc(100vw - 28px));
  display:grid;gap:2px;
  padding:10px;
  border-radius:var(--r-surface);
  background:linear-gradient(160deg,rgba(28,41,66,.9),rgba(9,18,36,.92));
  border:1px solid rgba(95,194,186,.3);
  backdrop-filter:blur(22px) saturate(140%);
  -webkit-backdrop-filter:blur(22px) saturate(140%);
  box-shadow:0 40px 80px -34px rgba(0,0,0,1);
  animation:sheet-in .32s var(--ease) both;
}
.dock__sheet[hidden]{display:none}
@keyframes sheet-in{
  from{opacity:0;transform:translate(-50%,10px)}
  to{opacity:1;transform:translate(-50%,0)}
}
.dock__sheet a{
  padding:13px 15px;border-radius:var(--r-control);
  font-size:.938rem;color:var(--muted);
  transition:color .2s var(--ease),background-color .2s var(--ease);
}
.dock__sheet a:hover{color:#fff;background:rgba(95,194,186,.12)}
.dock__sheet-cta{
  margin-top:6px;text-align:center;font-weight:600;
  background:linear-gradient(135deg,var(--turq-hi),var(--turq))!important;
  color:var(--turq-dk)!important;
}

/* =========================================================================
   PAGES LÉGALES
   Priorité absolue à la lisibilité : aucun effet ne passe devant le texte.
   ========================================================================= */

.legal{padding-bottom:var(--section)}
.legal__wrap{max-width:800px}
.legal h3{
  font-family:var(--f-display);font-weight:600;
  font-size:clamp(1.125rem,1.9vw,1.375rem);letter-spacing:-.018em;line-height:1.25;
  margin-top:clamp(34px,4vw,48px);
  padding-top:clamp(20px,2.4vw,28px);
  border-top:1px solid rgba(154,173,196,.14);
}
.legal h3:first-of-type{margin-top:0;border-top:0;padding-top:0}
.legal p{
  margin-top:14px;color:var(--muted);
  font-size:1rem;line-height:1.78;max-width:70ch;
}
.legal p strong{color:var(--white);font-weight:500}
.legal a{color:var(--turq);text-decoration:underline;text-underline-offset:3px}
.legal a:hover{color:var(--turq-hi)}
.legal .ticks{margin-top:16px}
.legal .ticks li{font-size:.969rem;line-height:1.65}

.legal__list{display:grid;gap:12px;margin-top:18px}
.legal__list > div{
  display:grid;grid-template-columns:minmax(0,190px) minmax(0,1fr);gap:10px 24px;
}
.legal__list dt{
  font-family:var(--f-mono);font-size:.75rem;letter-spacing:.12em;color:var(--dim);
  padding-top:3px;
}
.legal__list dd{margin:0;color:var(--white);font-size:1rem;line-height:1.6}

.legal__ck{
  font:inherit;color:var(--turq);text-decoration:underline;text-underline-offset:3px;
  padding:0;cursor:pointer;
}
.legal__ck:hover{color:var(--turq-hi)}

/* =========================================================================
   BANDEAU COOKIES
   ========================================================================= */

.ck{
  position:fixed;z-index:130;
  /* Côté droit : la colonne de gauche porte le titre et les boutons du
     hero, le bandeau ne doit rien recouvrir à la première visite. */
  right:max(16px,env(safe-area-inset-right));
  bottom:calc(max(18px,env(safe-area-inset-bottom)) + 92px);
  width:min(430px,calc(100vw - 32px));
  padding:clamp(20px,2.4vw,26px);
  border-radius:var(--r-surface);
  background:
    radial-gradient(115% 85% at 6% 0%,rgba(95,194,186,.14),transparent 58%),
    linear-gradient(160deg,rgba(40,64,104,.9),rgba(8,17,36,.95));
  border:1px solid rgba(127,227,218,.26);
  backdrop-filter:blur(22px) saturate(150%);
  -webkit-backdrop-filter:blur(22px) saturate(150%);
  box-shadow:
    inset 0 1px 0 rgba(196,255,250,.2),
    0 0 60px -16px rgba(95,194,186,.3),
    0 40px 90px -40px rgba(0,0,0,1);
  opacity:0;transform:translate3d(0,14px,0);
  transition:opacity .35s var(--ease),transform .4s var(--ease);
}
.ck.is-on{opacity:1;transform:none}

.ck__id{
  font-family:var(--f-mono);font-size:.625rem;letter-spacing:.22em;color:var(--turq);
  margin-bottom:12px;
}
.ck p{color:var(--muted);font-size:.906rem;line-height:1.6}
.ck__btns{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:18px}
.ck__btns .btn{padding:12px 18px;font-size:.875rem}
.ck__link{
  font-family:var(--f-mono);font-size:.688rem;letter-spacing:.14em;
  color:var(--muted);padding:10px 4px;
  text-decoration:underline;text-underline-offset:4px;
  transition:color .25s var(--ease);
}
.ck__link:hover{color:var(--turq-hi)}
.ck__more{margin-top:14px;font-size:.813rem}
.ck__more a{color:var(--dim);text-decoration:underline;text-underline-offset:3px}
.ck__more a:hover{color:var(--turq)}

.ck__opts{display:grid;gap:14px}
.ck__opts label{display:flex;gap:12px;align-items:flex-start;cursor:pointer}
.ck__opts input{
  width:18px;height:18px;flex:none;margin-top:2px;
  accent-color:var(--turq);cursor:pointer;
}
.ck__opts input:disabled{cursor:default;opacity:.6}
.ck__opts span{display:block;color:var(--muted);font-size:.844rem;line-height:1.5}
.ck__opts b{display:block;color:var(--white);font-weight:600;font-size:.906rem;margin-bottom:3px}

/* Pied de page : accès légaux, volontairement discrets */
.foot__legal{display:flex;flex-wrap:wrap;gap:10px 22px;align-items:center}
.foot__legal a,.foot__legal button{
  font-size:.813rem;color:var(--dim);
  font-family:inherit;padding:0;cursor:pointer;
  transition:color .25s var(--ease);
}
.foot__legal button{text-decoration:underline;text-underline-offset:3px}
.foot__legal a:hover,.foot__legal button:hover{color:var(--turq)}

/* Champ piège anti-robots : hors écran, jamais focusable au clavier */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.field__opt{
  font-family:var(--f-body);letter-spacing:0;
  color:var(--steel);text-transform:none;font-size:.75rem;
}
.form__rgpd{
  margin-top:4px;
  font-size:.813rem;line-height:1.55;color:var(--dim);
}
.form__rgpd a{color:var(--turq);text-decoration:underline;text-underline-offset:3px}
.form__rgpd a:hover{color:var(--turq-hi)}

/* =========================================================================
   RÉVÉLATIONS AU SCROLL
   ========================================================================= */

.rv{
  opacity:0;transform:translate3d(0,26px,0);
  transition:opacity .8s var(--ease),transform .9s var(--ease);
}
.rv.is-in{opacity:1;transform:none}
.rv-d1{transition-delay:.08s}
.rv-d2{transition-delay:.16s}
.rv-d3{transition-delay:.24s}

/* =========================================================================
   ZONES INTERNES
   Chaque page est une zone du même réseau. En-tête commun, puis une
   composition propre à chaque zone pour éviter l'effet gabarit.
   ========================================================================= */

.zone{padding:clamp(126px,17vh,186px) 0 clamp(38px,5vw,62px)}

.zone__id{
  font-family:var(--f-mono);font-size:.688rem;letter-spacing:.22em;
  color:var(--dim);margin-bottom:18px;
}
.zone__title{
  font-family:var(--f-display);font-weight:500;
  font-size:clamp(2.25rem,5vw,3.75rem);
  line-height:1.06;letter-spacing:-.03em;
  max-width:16ch;
}
.zone__lead{
  margin-top:clamp(20px,2.4vw,28px);
  max-width:56ch;
  color:var(--muted);
  font-size:clamp(1rem,1.35vw,1.094rem);line-height:1.75;
}

/* Surface holographique réutilisable : le réseau reste lisible derrière. */
.panel{
  position:relative;
  border-radius:var(--r-surface);
  padding:clamp(24px,3vw,36px);
  background:
    radial-gradient(115% 85% at 6% 0%,rgba(95,194,186,.13),transparent 58%),
    radial-gradient(105% 85% at 100% 100%,rgba(139,124,255,.11),transparent 62%),
    linear-gradient(160deg,rgba(40,64,104,.28),rgba(9,19,40,.42));
  border:1px solid rgba(127,227,218,.18);
  backdrop-filter:blur(18px) saturate(155%);
  -webkit-backdrop-filter:blur(18px) saturate(155%);
  box-shadow:
    inset 0 1px 0 rgba(196,255,250,.18),
    0 0 52px -22px rgba(95,194,186,.3),
    0 40px 90px -46px rgba(0,0,0,1);
}
.panel::before,.panel::after{
  content:"";position:absolute;width:14px;height:14px;
  border-style:solid;pointer-events:none;
}
.panel::before{
  top:-1px;left:-1px;border-width:1px 0 0 1px;
  border-color:rgba(127,227,218,.75);border-radius:var(--r-surface) 0 0 0;
  filter:drop-shadow(0 0 6px rgba(127,227,218,.6));
}
.panel::after{
  bottom:-1px;right:-1px;border-width:0 1px 1px 0;
  border-color:rgba(169,155,255,.6);border-radius:0 0 var(--r-surface) 0;
  filter:drop-shadow(0 0 6px rgba(139,124,255,.55));
}

.panel__id{
  font-family:var(--f-mono);font-size:.688rem;letter-spacing:.18em;
  color:var(--dim);
}
.panel__title{
  font-family:var(--f-display);font-weight:600;
  font-size:clamp(1.25rem,2vw,1.5rem);letter-spacing:-.02em;line-height:1.16;
  margin:12px 0 12px;
}
/* Uniquement les paragraphes courants : un paragraphe porteur d'une classe
   garde la sienne, sinon `.panel p` (0,1,1) l'emporterait sur `.classe` (0,1,0). */
.panel p:not([class]){color:var(--muted);font-size:.969rem;line-height:1.65;max-width:70ch}

/* Liste à puces carrées, commune aux zones */
.ticks{display:grid;gap:11px;margin-top:18px}
.ticks li{
  position:relative;padding-left:25px;
  color:var(--white);font-size:.938rem;line-height:1.55;
}
.ticks li::before{
  content:"";position:absolute;left:2px;top:.6em;
  width:7px;height:7px;border-radius:2px;
  background:var(--turq);box-shadow:0 0 8px rgba(95,194,186,.8);
}

/* ------------------------------------------------------------------ */
/* ZONE 01 — RÉFÉRENCEMENT : descente le long d'une dorsale de signal  */
/* ------------------------------------------------------------------ */

.chain{position:relative;padding-block:clamp(20px,3vw,40px) var(--section)}

/* Dorsale lumineuse, en CSS pur : aucun SVG ni JS supplémentaire. */
.chain::before{
  content:"";position:absolute;left:18px;top:8px;bottom:96px;width:1px;
  background:linear-gradient(180deg,transparent,rgba(95,194,186,.45) 6%,
             rgba(95,194,186,.45) 92%,transparent);
}

.chain__step{
  position:relative;
  display:grid;grid-template-columns:38px minmax(0,1fr);
  gap:clamp(18px,2.4vw,32px);
  padding-bottom:clamp(28px,3.4vw,44px);
}
/* Décalage progressif : on descend dans la profondeur du réseau. */
.chain__step:nth-child(2){padding-left:clamp(0px,3vw,52px)}
.chain__step:nth-child(3){padding-left:clamp(0px,6vw,104px)}
.chain__step:nth-child(4){padding-left:clamp(0px,4.5vw,78px)}
.chain__step:nth-child(5){padding-left:clamp(0px,1.5vw,26px)}

.chain__dot{
  position:relative;z-index:1;
  width:37px;height:37px;flex:none;
  display:grid;place-items:center;
  border-radius:50%;
  font-family:var(--f-mono);font-size:.688rem;color:var(--turq-hi);
  background:rgba(6,14,30,.9);
  border:1px solid rgba(127,227,218,.42);
  box-shadow:0 0 18px -4px rgba(95,194,186,.7);
}

/* --- GEO : la partie stratégique doit se lire d'un coup d'œil -------- */

.geo{padding-block:clamp(30px,4vw,56px) clamp(24px,3vw,40px)}

.geo__kicker{
  font-family:var(--f-mono);font-size:.688rem;letter-spacing:.22em;color:var(--turq);
}
.geo__title{
  font-family:var(--f-display);font-weight:500;
  font-size:clamp(1.875rem,4.2vw,3rem);
  line-height:1.06;letter-spacing:-.03em;
  margin-top:18px;max-width:18ch;
}
.geo__lead{
  margin-top:clamp(18px,2.2vw,26px);
  color:var(--white);
  font-size:clamp(1.063rem,1.6vw,1.25rem);line-height:1.6;
  max-width:52ch;
}

/* Quatre points, séparés par des filets. Pas de cartes : la composition
   reste éditoriale et laisse respirer les chiffres. */
.geo__points{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:0 clamp(30px,5vw,72px);
  margin-top:clamp(34px,4.4vw,60px);
}
.geo__points li{
  display:grid;grid-template-columns:auto minmax(0,1fr);
  gap:clamp(16px,2vw,26px);
  padding-block:clamp(24px,3vw,34px);
  border-top:1px solid rgba(127,227,218,.18);
}
/* Trois enfants dans une grille à deux colonnes : il faut placer
   explicitement, sinon le paragraphe retombe sous le chiffre. */
.geo__n{grid-column:1;grid-row:1 / span 2}
.geo__points h3{grid-column:2;grid-row:1}
.geo__points p{grid-column:2;grid-row:2}

.geo__n{
  font-family:var(--f-display);font-weight:500;
  font-size:clamp(1.5rem,2.6vw,2rem);line-height:1;letter-spacing:-.03em;
  color:transparent;
  -webkit-text-stroke:1px rgba(127,227,218,.6);
  text-stroke:1px rgba(127,227,218,.6);
}
.geo__points h3{
  font-family:var(--f-display);font-weight:600;
  font-size:clamp(1.125rem,1.9vw,1.375rem);letter-spacing:-.018em;line-height:1.2;
}
.geo__points p{
  margin-top:10px;color:var(--muted);
  font-size:.969rem;line-height:1.62;max-width:44ch;
}

/* ------------------------------------------------------------------ */
/* ZONE 02 — RÉSEAUX SOCIAUX : liaison site / réseaux, puis prestations */
/* ------------------------------------------------------------------ */

.bridge{
  display:grid;grid-template-columns:1fr auto 1fr;
  align-items:center;gap:clamp(14px,2.4vw,30px);
  margin-block:clamp(30px,4vw,54px) clamp(40px,5vw,70px);
}
.bridge__end{
  text-align:center;
  padding:clamp(22px,2.6vw,32px) clamp(18px,2.4vw,28px);
}
.bridge__end .panel__id{margin-bottom:10px}
.bridge__end strong{
  display:block;
  font-family:var(--f-display);font-weight:600;
  font-size:clamp(1.063rem,1.7vw,1.313rem);letter-spacing:-.015em;
}
.bridge__end span{
  display:block;margin-top:8px;
  color:var(--muted);font-size:.875rem;line-height:1.5;
}

/* Le lien entre les deux : un flux qui circule en continu */
.bridge__wire{
  position:relative;height:2px;min-width:60px;
  background:linear-gradient(90deg,rgba(95,194,186,.15),rgba(139,124,255,.35),rgba(95,194,186,.15));
  border-radius:2px;
}
.bridge__wire::after{
  content:"";position:absolute;top:-2px;left:0;
  width:26px;height:6px;border-radius:3px;
  background:linear-gradient(90deg,transparent,var(--turq-hi),transparent);
  box-shadow:0 0 12px rgba(127,227,218,.9);
  animation:wire-run 3.6s linear infinite;
}
@keyframes wire-run{
  from{transform:translateX(-30px)}
  to{transform:translateX(calc(100% + 100px))}
}

/* Prestations : liste éditoriale numérotée, sans cartes */
.svc{margin-top:clamp(10px,2vw,24px);padding-bottom:var(--section)}
.svc__row{
  display:grid;grid-template-columns:auto minmax(0,.9fr) minmax(0,1.25fr);
  gap:clamp(18px,3vw,44px);align-items:baseline;
  padding-block:clamp(24px,3vw,34px);
  border-top:1px solid rgba(154,173,196,.14);
}
.svc__n{
  font-family:var(--f-mono);font-size:.75rem;letter-spacing:.16em;color:var(--turq);
}
.svc__t{
  font-family:var(--f-display);font-weight:600;
  font-size:clamp(1.125rem,1.9vw,1.438rem);letter-spacing:-.018em;line-height:1.2;
}
.svc__d{color:var(--muted);font-size:.969rem;line-height:1.65;max-width:62ch}

.notice{
  margin-top:clamp(26px,3vw,38px);
  padding:clamp(18px,2.2vw,24px) clamp(18px,2.4vw,26px);
  border-radius:var(--r-control);
  border:1px solid rgba(169,155,255,.26);
  background:linear-gradient(150deg,rgba(139,124,255,.1),rgba(9,19,40,.3));
  color:var(--white);font-size:.938rem;line-height:1.6;
}

/* ------------------------------------------------------------------ */
/* ZONE 03 — RÉALISATIONS : un projet occupe la scène                  */
/* ------------------------------------------------------------------ */

.show{padding-bottom:var(--section)}

.show__stage{
  display:grid;grid-template-columns:minmax(0,1.62fr) minmax(0,1fr);
  gap:clamp(24px,3.4vw,48px);align-items:center;
  padding:clamp(16px,1.8vw,24px);
  perspective:1700px;
}
.show__item{display:contents}
.show__item[hidden]{display:none}

.show__media{
  display:block;position:relative;
  border-radius:12px;overflow:hidden;
  border:1px solid rgba(154,173,196,.22);
  transform:rotateY(3.4deg);
  transform-origin:left center;
  box-shadow:0 40px 84px -38px rgba(0,0,0,.98);
  transition:transform .6s var(--ease),border-color .4s var(--ease);
  animation:show-in .55s var(--ease) both;
}
.show__media::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(112deg,rgba(95,194,186,.1),transparent 44%,rgba(139,124,255,.1));
  mix-blend-mode:screen;
}
.show__media:hover{transform:none;border-color:rgba(95,194,186,.55)}
@keyframes show-in{
  from{opacity:0;transform:translate3d(26px,0,0) rotateY(3.4deg)}
  to{opacity:1}
}

.show__info{animation:show-in .55s var(--ease) .06s both}
.show__tag{
  font-family:var(--f-mono);font-size:.688rem;letter-spacing:.17em;color:var(--dim);
}
.show__name{
  font-family:var(--f-display);font-weight:600;
  font-size:clamp(1.5rem,2.6vw,2.125rem);letter-spacing:-.024em;line-height:1.1;
  margin:12px 0 14px;
}
.show__desc{color:var(--muted);font-size:.969rem;line-height:1.68}
.show__info .ticks{margin-top:20px}
.show__info .link{margin-top:20px}

/* Bande de nœuds : les quatre projets restent visibles en permanence */
.show__strip{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(8px,1.2vw,14px);
  margin-top:clamp(26px,3vw,38px);
}
.show__node{
  position:relative;text-align:left;
  padding:15px 16px 16px;
  border-radius:var(--r-control);
  border:1px solid rgba(154,173,196,.16);
  background:linear-gradient(160deg,rgba(30,48,80,.3),rgba(9,19,40,.18));
  transition:border-color .3s var(--ease),background-color .3s var(--ease);
}
.show__node small{
  display:block;
  font-family:var(--f-mono);font-size:.625rem;letter-spacing:.16em;color:var(--dim);
}
.show__node b{
  display:block;margin-top:7px;
  font-family:var(--f-display);font-weight:600;font-size:.938rem;
  letter-spacing:-.012em;line-height:1.25;color:var(--white);
}
.show__node:hover{border-color:rgba(95,194,186,.45);background:linear-gradient(160deg,rgba(40,62,100,.4),rgba(9,19,40,.24))}
.show__node[aria-current="true"]{
  border-color:rgba(127,227,218,.6);
  background:linear-gradient(160deg,rgba(95,194,186,.15),rgba(9,19,40,.3));
  box-shadow:0 0 24px -8px rgba(95,194,186,.7);
}
.show__node[aria-current="true"] small{color:var(--turq-hi)}

/* ------------------------------------------------------------------ */
/* ZONE 04 — À PROPOS : l'humain derrière le réseau                    */
/* ------------------------------------------------------------------ */

.human{
  display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);
  gap:clamp(32px,5vw,76px);align-items:start;
  padding-bottom:clamp(50px,6vw,84px);
}
.human__text p{
  margin-top:20px;color:var(--muted);
  font-size:clamp(1rem,1.35vw,1.094rem);line-height:1.78;max-width:56ch;
}
.human__text p:first-child{margin-top:0}
.human__text p strong{color:var(--white);font-weight:500}

/* Déroulé du travail : séquence, pas cartes */
.steps{padding-bottom:var(--section)}
.steps__row{
  display:grid;grid-template-columns:auto minmax(0,1fr);
  gap:clamp(18px,3vw,38px);align-items:baseline;
  padding-block:clamp(22px,2.6vw,30px);
  border-top:1px solid rgba(154,173,196,.14);
}
.steps__n{
  font-family:var(--f-mono);font-size:.75rem;letter-spacing:.16em;color:var(--turq);
}
.steps__row b{
  display:block;
  font-family:var(--f-display);font-weight:600;
  font-size:clamp(1.063rem,1.7vw,1.25rem);letter-spacing:-.016em;
}
.steps__row span{
  display:block;margin-top:8px;
  color:var(--muted);font-size:.969rem;line-height:1.65;max-width:62ch;
}

/* ------------------------------------------------------------------ */
/* ZONE 05 — TARIFS : trois niveaux d'accès en bandes                  */
/* ------------------------------------------------------------------ */

.lvls{display:grid;gap:clamp(14px,1.8vw,22px);padding-bottom:clamp(26px,3vw,38px)}

.lvl{
  display:grid;
  grid-template-columns:minmax(0,.72fr) minmax(0,1.3fr) auto;
  gap:clamp(20px,3vw,44px);align-items:start;
}
.lvl__price{
  font-family:var(--f-display);font-weight:500;
  font-size:clamp(2.125rem,3.6vw,2.875rem);letter-spacing:-.035em;line-height:1;
  margin:14px 0 0;
}
.lvl__price span{font-size:.42em;color:var(--turq);margin-left:4px;vertical-align:.34em}
.lvl__name{
  font-family:var(--f-display);font-weight:600;font-size:1.125rem;
  letter-spacing:-.012em;margin:14px 0 0;
}
.lvl__desc{margin-top:12px;color:var(--muted);font-size:.938rem;line-height:1.6;max-width:44ch}
.lvl__inc{align-self:center}
.lvl__inc .ticks{margin-top:0}
.lvl__cta{align-self:center;white-space:nowrap}

.lvl.is-featured{
  border-color:rgba(127,227,218,.4);
  box-shadow:
    inset 0 1px 0 rgba(196,255,250,.24),
    0 0 66px -20px rgba(95,194,186,.45),
    0 40px 90px -46px rgba(0,0,0,1);
}

/* ------------------------------------------------------------------ */
/* ZONE 06 — CONTACT : sortie du réseau vers une conversation          */
/* ------------------------------------------------------------------ */

.reach{
  display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:clamp(32px,5vw,70px);align-items:start;
  padding-bottom:var(--section);
}
.reach__side p{
  color:var(--muted);font-size:clamp(1rem,1.35vw,1.094rem);
  line-height:1.78;max-width:46ch;
}
.reach__direct{display:grid;gap:14px;margin-top:clamp(28px,3.4vw,40px)}
.reach__direct a{
  display:flex;align-items:center;gap:14px;
  padding:16px 18px;border-radius:var(--r-control);
  border:1px solid rgba(154,173,196,.18);
  background:linear-gradient(160deg,rgba(30,48,80,.26),rgba(9,19,40,.16));
  transition:border-color .3s var(--ease),background-color .3s var(--ease),transform .3s var(--ease);
}
.reach__direct a:hover{
  border-color:rgba(95,194,186,.5);
  background:linear-gradient(160deg,rgba(40,62,100,.36),rgba(9,19,40,.22));
  transform:translateY(-2px);
}
.reach__direct svg{width:19px;height:19px;flex:none;color:var(--turq)}
.reach__direct b{
  display:block;font-family:var(--f-mono);font-size:.938rem;
  font-weight:500;letter-spacing:-.01em;color:var(--white);
}
.reach__direct small{
  display:block;margin-top:3px;
  font-family:var(--f-mono);font-size:.688rem;letter-spacing:.14em;color:var(--dim);
}

/* Formulaire */
.form{display:grid;gap:clamp(16px,2vw,20px)}
.field{display:grid;gap:8px}
.field > label{
  font-family:var(--f-mono);font-size:.688rem;letter-spacing:.16em;color:var(--dim);
}
.field input,.field select,.field textarea{
  width:100%;
  padding:14px 15px;
  border-radius:var(--r-control);
  font:inherit;font-size:.969rem;
  color:var(--white);
  background:rgba(6,14,30,.55);
  border:1px solid rgba(154,173,196,.26);
  transition:border-color .25s var(--ease),background-color .25s var(--ease);
}
.field textarea{min-height:132px;resize:vertical;line-height:1.6}
.field select{
  appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237FE3DA' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;background-size:17px;
  padding-right:42px;
}
.field option{background:#0B162C;color:var(--white)}
.field input::placeholder,.field textarea::placeholder{color:#8A9DB4}
.field input:focus,.field select:focus,.field textarea:focus{
  border-color:var(--turq);background:rgba(8,18,38,.7);
}
.field small{font-size:.813rem;color:var(--dim)}
.field.is-bad input,.field.is-bad select,.field.is-bad textarea{border-color:#F09A9A}
.field__err{font-size:.813rem;color:#F2AFAF;display:none}
.field.is-bad .field__err{display:block}

.form__foot{display:flex;flex-wrap:wrap;align-items:center;gap:16px;margin-top:4px}
.form__status{
  font-size:.906rem;line-height:1.5;color:var(--muted);
}
.form__status.is-ok{color:var(--turq-hi)}
.form__status.is-bad{color:#F2AFAF}
.form button[type=submit][aria-disabled=true]{opacity:.6;cursor:progress}

/* Version compacte, pour les comparaisons rapides */
.ticks--sm{gap:8px;margin-top:16px}
.ticks--sm li{padding-left:23px;font-size:.906rem;line-height:1.45}
.ticks--sm li::before{width:6px;height:6px;top:.55em}

/* =========================================================================
   OFFRES DE CRÉATION  (page tarifs)
   ========================================================================= */

.offers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.8vw,20px)}
.offer{display:flex;flex-direction:column}
.offer__price{
  font-family:var(--f-display);font-weight:500;
  font-size:clamp(2rem,3.4vw,2.75rem);letter-spacing:-.035em;line-height:1;
  margin:16px 0 0;
}
.offer__price span{font-size:.42em;color:var(--turq);margin-left:4px;vertical-align:.34em}
.offer__name{
  font-family:var(--f-display);font-weight:600;font-size:1.125rem;
  letter-spacing:-.012em;margin:14px 0 10px;
}
.offer__line{color:var(--muted);font-size:.938rem;line-height:1.6;max-width:40ch}
.offer .ticks{flex:1}
.offer__cta{margin-top:clamp(20px,2.4vw,26px)}

/* --- Deux niveaux de lecture ---------------------------------------- */
/* Niveau 1 : les trois formules occupent le premier écran, largement. */
.lvl1{padding-block:clamp(20px,3vw,44px) clamp(70px,10vw,140px)}
.lvl2{padding-bottom:clamp(60px,8vw,110px)}

.offer__more{
  display:inline-flex;align-items:center;gap:9px;
  align-self:flex-start;margin-top:auto;
  padding:11px 18px;border-radius:999px;
  font-family:var(--f-mono);font-size:.688rem;letter-spacing:.16em;
  color:var(--turq-hi);
  background:rgba(95,194,186,.08);
  border:1px solid rgba(95,194,186,.3);
  transition:background-color .3s var(--ease),border-color .3s var(--ease),color .3s var(--ease);
}
.offer__more svg{width:14px;height:14px;stroke-width:2;transition:transform .3s var(--ease)}
.offer__more:hover{background:rgba(95,194,186,.17);border-color:rgba(127,227,218,.65);color:#fff}
.offer__more[aria-expanded="true"] svg{transform:rotate(180deg)}
.offer .ticks--sm{margin-bottom:clamp(26px,3vw,36px)}

/* Le comparatif reste dans le flux, simplement replié : il est rendu, donc
   lisible par les moteurs, mais n'occupe pas le premier écran. */
.cmp-reveal{
  display:grid;grid-template-rows:0fr;
  opacity:0;
  transition:grid-template-rows .75s var(--ease),opacity .5s var(--ease);
}
.cmp-reveal__in{overflow:hidden}
.cmp-reveal.is-open{grid-template-rows:1fr;opacity:1}

/* Marqueur de descente d'un niveau */
.cmp__step{
  position:relative;
  padding-top:26px;
  font-family:var(--f-mono);font-size:.688rem;letter-spacing:.2em;color:var(--turq);
}
.cmp__step::before{
  content:"";position:absolute;top:0;left:0;height:1px;width:0;
  background:linear-gradient(90deg,var(--turq),transparent);
  box-shadow:0 0 12px rgba(95,194,186,.8);
}
.cmp-reveal.is-open .cmp__step::before{
  width:100%;transition:width .9s var(--ease) .15s;
}

/* =========================================================================
   TABLEAU COMPARATIF
   ========================================================================= */

.tblhint{
  display:none;
  margin-top:clamp(26px,3vw,38px);
  font-family:var(--f-mono);font-size:.688rem;letter-spacing:.14em;color:var(--dim);
}
.tblwrap:focus-visible{outline:2px solid var(--turq-hi);outline-offset:3px}

/* Un tableau est de la donnée dense : il lui faut une surface. Le réseau
   reste perceptible à travers, mais ne traverse plus les lignes. */
.tblwrap{
  margin-top:clamp(26px,3vw,38px);
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  padding:clamp(16px,2vw,26px) clamp(14px,1.8vw,22px);
  border-radius:var(--r-surface);
  border:1px solid rgba(127,227,218,.16);
  background:
    radial-gradient(110% 80% at 4% 0%,rgba(95,194,186,.1),transparent 58%),
    linear-gradient(160deg,rgba(38,60,98,.4),rgba(8,17,36,.66));
  backdrop-filter:blur(20px) saturate(150%);
  -webkit-backdrop-filter:blur(20px) saturate(150%);
  box-shadow:
    inset 0 1px 0 rgba(196,255,250,.16),
    0 40px 90px -46px rgba(0,0,0,1);
}
.cmp{
  width:100%;min-width:660px;
  border-collapse:collapse;
  font-size:.906rem;
}
.cmp caption{
  text-align:left;padding-bottom:14px;
  font-family:var(--f-mono);font-size:.688rem;letter-spacing:.18em;color:var(--dim);
}
.cmp th,.cmp td{
  padding:13px 16px;text-align:left;
  border-bottom:1px solid rgba(154,173,196,.12);
}
.cmp thead th{
  font-family:var(--f-display);font-weight:600;font-size:.938rem;
  letter-spacing:-.01em;color:var(--white);
  border-bottom:1px solid rgba(127,227,218,.3);
  white-space:nowrap;
}
.cmp thead th:first-child{color:var(--dim);font-family:var(--f-mono);font-size:.688rem;letter-spacing:.16em;font-weight:400}
.cmp tbody th{font-weight:400;color:var(--muted);white-space:nowrap}
.cmp td{color:var(--white);white-space:nowrap}
.cmp tbody tr:hover{background:rgba(95,194,186,.05)}
.cmp .y{color:var(--turq-hi);font-weight:600}
.cmp .n{color:var(--steel)}
.cmp .m{color:var(--muted);font-size:.844rem}
.cmp .g{color:#C9A6F5;font-weight:600}
.cmp__legend{
  margin-top:14px;
  font-family:var(--f-mono);font-size:.688rem;letter-spacing:.04em;color:var(--dim);
  line-height:1.7;
}

/* =========================================================================
   ACCOMPAGNEMENT ET HÉBERGEMENT
   ========================================================================= */

.plans{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.8vw,20px)}
.plan{display:flex;flex-direction:column;position:relative}
.plan__price{
  font-family:var(--f-display);font-weight:500;
  font-size:clamp(1.875rem,3vw,2.375rem);letter-spacing:-.032em;line-height:1;
  margin:16px 0 0;
}
.plan__price span{font-size:.36em;color:var(--turq);margin-left:5px;letter-spacing:0}
.plan__name{
  font-family:var(--f-display);font-weight:600;font-size:1.125rem;
  letter-spacing:-.012em;margin:14px 0 10px;
}
.plan__goal{color:var(--white);font-size:.938rem;line-height:1.55;font-weight:500}
.plan__base{
  margin-top:14px;
  font-family:var(--f-mono);font-size:.688rem;letter-spacing:.1em;color:var(--dim);
}
.plan .ticks{flex:1}
.plan__cta{margin-top:clamp(20px,2.4vw,26px)}

.plan__tag{
  position:absolute;top:-9px;right:18px;
  padding:4px 11px;border-radius:999px;
  font-family:var(--f-mono);font-size:.625rem;letter-spacing:.16em;
  color:var(--turq-dk);
  background:linear-gradient(135deg,var(--turq-hi),var(--turq));
  box-shadow:0 0 18px -4px rgba(95,194,186,.9);
}
.plan.is-reco{
  border-color:rgba(127,227,218,.42);
  box-shadow:
    inset 0 1px 0 rgba(196,255,250,.24),
    0 0 66px -20px rgba(95,194,186,.45),
    0 40px 90px -46px rgba(0,0,0,1);
}

/* Solution sans abonnement : présente, mais volontairement secondaire */
.renew{
  margin-top:clamp(20px,2.4vw,28px);
  display:grid;grid-template-columns:minmax(0,1fr) auto;
  gap:clamp(18px,3vw,40px);align-items:center;
  padding:clamp(20px,2.4vw,28px) clamp(20px,2.6vw,30px);
  border:1px solid rgba(154,173,196,.16);
  border-radius:var(--r-surface);
  background:linear-gradient(160deg,rgba(24,38,62,.24),rgba(9,19,40,.12));
}
.renew h3{
  font-family:var(--f-mono);font-size:.688rem;letter-spacing:.18em;
  color:var(--dim);font-weight:400;
}
.renew p:not([class]){margin-top:10px;color:var(--muted);font-size:.938rem;line-height:1.6;max-width:64ch}
.renew p strong{color:var(--white);font-weight:600}
.renew__price{
  font-family:var(--f-display);font-weight:500;
  font-size:clamp(1.5rem,2.4vw,1.875rem);letter-spacing:-.03em;white-space:nowrap;
}
.renew__price span{font-size:.44em;color:var(--turq);margin-left:4px;letter-spacing:0}

/* =========================================================================
   ZONE RÉALISATIONS : parcours par secteur
   ========================================================================= */

.sector{padding-bottom:clamp(56px,7vw,96px)}
.sector__head{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px 18px}
.sector__label{
  font-family:var(--f-display);font-weight:600;
  font-size:clamp(1.75rem,3.6vw,2.625rem);letter-spacing:-.028em;line-height:1;
}
.sector__client{
  font-family:var(--f-mono);font-size:.75rem;letter-spacing:.16em;color:var(--turq);
}
.sector__shot{
  display:block;position:relative;margin:clamp(22px,2.6vw,32px) 0 0;
  border-radius:12px;overflow:hidden;
  border:1px solid rgba(154,173,196,.2);
  box-shadow:0 40px 90px -44px rgba(0,0,0,.98);
  transition:border-color .4s var(--ease),transform .5s var(--ease);
}
.sector__shot::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(112deg,rgba(95,194,186,.09),transparent 46%,rgba(139,124,255,.09));
  mix-blend-mode:screen;
}
/* Vignette non cliquable : aucune affordance de lien. */
.sector__shot img{width:100%;display:block}

.sector__grid{
  display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:clamp(24px,3.4vw,52px);
  margin-top:clamp(24px,3vw,36px);
}
.sector__built h3,.sector__need h3{
  font-family:var(--f-display);font-weight:600;
  font-size:clamp(1.063rem,1.7vw,1.25rem);letter-spacing:-.016em;line-height:1.25;
}
.sector__built p,.sector__need p{
  margin-top:12px;color:var(--muted);font-size:.969rem;line-height:1.68;max-width:62ch;
}
.sector__built .link{margin-top:16px}

/* =========================================================================
   TRANSITIONS DE ZONE  (préparé pour les pages internes de la phase 2)

   Principe : le réseau et le menu ne bougent pas, seul le contenu glisse.
   On a donc l'impression de traverser le réseau, pas de changer de site.

   Chemin natif : transitions de vue entre documents, aucun délai ajouté à
   la navigation. Chemin de repli : même mouvement piloté en JS.
   ========================================================================= */

@view-transition{ navigation:auto }

/* Ces éléments sont exclus du balayage : ils persistent d'une page à l'autre. */
/* Le canvas n'est plus isolé : il glisse avec la page, pour que le réseau
   entier parte dans le même sens que le contenu. */
.dock{view-transition-name:dock}
.topbar{view-transition-name:topbar}

/* Sens du déplacement : on avance dans l'ordre du réseau (accueil ->
   référencement -> ... -> contact) ou l'on revient en arrière. Le sens est
   posé sur <html> avant le premier rendu par un script en tête de page. */

/* Durées posées par le script de tête d'après l'écart entre les deux zones :
   environ 650 ms pour un voisin, 1 s d'un bout à l'autre du réseau. */
::view-transition-old(root){
  animation:zone-out var(--vt-out,.25s) var(--ease-voyage) both;
}
::view-transition-new(root){
  animation:zone-in var(--vt-in,.74s) var(--ease-voyage) var(--vt-delay,.10s) both;
}

:root[data-dir="back"]::view-transition-old(root){animation-name:zone-out-back}
:root[data-dir="back"]::view-transition-new(root){animation-name:zone-in-back}

@keyframes zone-out{
  from{opacity:1;transform:translate3d(0,0,0)}
  to{opacity:0;transform:translate3d(-8%,0,0)}
}
@keyframes zone-in{
  from{opacity:0;transform:translate3d(10%,0,0)}
  to{opacity:1;transform:translate3d(0,0,0)}
}
@keyframes zone-out-back{
  from{opacity:1;transform:translate3d(0,0,0)}
  to{opacity:0;transform:translate3d(8%,0,0)}
}
@keyframes zone-in-back{
  from{opacity:0;transform:translate3d(-10%,0,0)}
  to{opacity:1;transform:translate3d(0,0,0)}
}

/* Repli : pas d'opacité à l'arrivée, pour qu'aucun contenu ne puisse
   apparaître puis disparaître si le script démarre après le premier rendu. */
.zone-out main{animation:zone-out .36s var(--ease-voyage) both}
.zone-in main{animation:zone-in-fb var(--vt-in,.74s) var(--ease-voyage) both}
:root[data-dir="back"] .zone-out main{animation-name:zone-out-back}
:root[data-dir="back"] .zone-in main{animation-name:zone-in-fb-back}

@keyframes zone-in-fb{
  from{transform:translate3d(6%,0,0)}
  to{transform:translate3d(0,0,0)}
}
@keyframes zone-in-fb-back{
  from{transform:translate3d(-6%,0,0)}
  to{transform:translate3d(0,0,0)}
}

/* =========================================================================
   RESPONSIVE
   ========================================================================= */

@media (max-width:1180px){
  .hero__content{max-width:min(600px,62vw)}
  .hud__panel--stream{right:6%;top:12%}
  .hud__panel--node{display:none}
  .coord--c{display:none}

  .lvl{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);row-gap:26px}
  .lvl__cta{grid-column:1 / -1;justify-self:start;align-self:start}
  .offers,.plans{grid-template-columns:repeat(2,minmax(0,1fr))}
  .offers > :last-child,.plans > :last-child{grid-column:1 / -1}
}

@media (max-width:1040px){
  .dock__i{padding:10px 12px;gap:7px}
  .dock__i span{font-size:.625rem;letter-spacing:.06em}
}

@media (max-width:900px){
  html{scroll-padding-top:80px}

  .hero{
    min-height:100dvh;
    padding-top:clamp(130px,20vh,180px);
    padding-bottom:clamp(160px,22vh,200px);
  }
  .hero__content{max-width:none}
  .brk{display:none}

  .hud__panel{display:none}
  .coord--a{top:auto;bottom:15%;right:auto;left:var(--gut)}
  .coord--b{bottom:10%;left:var(--gut)}

  .nodes{grid-template-columns:1fr}
  .node:nth-child(2),.node:nth-child(4){margin-top:0}

  .work{grid-template-columns:1fr;gap:24px}
  .work__shot{transform:none}
  .work__meta{padding-right:0}

  .about__grid{grid-template-columns:1fr;gap:34px}
  .about__portrait{max-width:340px}

  .access__list{grid-template-columns:1fr}

  /* --- Zones internes en une colonne --- */
  .zone__title{max-width:none}

  .chain::before{left:16px}
  .chain__step{grid-template-columns:34px minmax(0,1fr);gap:16px}
  .chain__step:nth-child(2),
  .chain__step:nth-child(3),
  .chain__step:nth-child(4),
  .chain__step:nth-child(5){padding-left:0}
  .chain__dot{width:33px;height:33px}

  .geo__points{grid-template-columns:1fr;gap:0}
  .geo__title{max-width:none}

  .bridge{grid-template-columns:1fr;gap:16px}
  .bridge__wire{
    width:2px;height:46px;min-width:0;justify-self:center;
    background:linear-gradient(180deg,rgba(95,194,186,.15),rgba(139,124,255,.35),rgba(95,194,186,.15));
  }
  .bridge__wire::after{
    top:0;left:-2px;width:6px;height:22px;
    background:linear-gradient(180deg,transparent,var(--turq-hi),transparent);
    animation-name:wire-run-v;
  }
  @keyframes wire-run-v{
    from{transform:translateY(-24px)}
    to{transform:translateY(70px)}
  }
  .svc__row{grid-template-columns:auto minmax(0,1fr);row-gap:10px}
  .svc__d{grid-column:2}

  .show__stage{grid-template-columns:1fr;gap:24px;perspective:none}
  .show__media{transform:none}
  .show__strip{grid-template-columns:repeat(2,minmax(0,1fr))}

  .human{grid-template-columns:1fr;gap:32px}
  .human .about__portrait{max-width:320px}

  .lvl{grid-template-columns:1fr;row-gap:20px}
  .lvl__price{margin-top:6px}

  .reach{grid-template-columns:1fr;gap:36px}

  .ck{left:12px;right:12px;width:auto;bottom:calc(max(18px,env(safe-area-inset-bottom)) + 84px)}
  .legal__list > div{grid-template-columns:1fr;gap:4px}
  .offers,.plans{grid-template-columns:1fr}
  .tblhint{display:block}
  .tblhint + .tblwrap{margin-top:10px}
  .renew{grid-template-columns:1fr;gap:16px}
  .sector__grid{grid-template-columns:1fr;gap:26px}

  /* Menu : 4 accès directs + feuille complète */
  .dock__hide-sm{display:none}
  .dock__more{display:block}
  .dock__i{
    flex-direction:column;gap:5px;
    padding:9px 11px;border-radius:16px;
    font-size:.563rem;letter-spacing:.08em;
  }
  .dock__i svg{width:19px;height:19px}
  .dock__list{border-radius:22px;gap:1px}
}

@media (max-width:520px){
  :root{--gut:18px}
  .hero__title{font-size:clamp(1.75rem,8.2vw,2.5rem)}
  .h2,.end__title{font-size:clamp(1.625rem,7.4vw,2.25rem)}
  .faq__q{font-size:clamp(1.25rem,6vw,1.625rem)}
  .btn{width:100%;justify-content:center}
  .hero__actions{gap:11px}
  .dock__i{padding:9px 6px;font-size:.531rem;letter-spacing:.04em}
  .dock__i svg{width:18px;height:18px}
  .works__nav{gap:12px}
  .about__portrait{max-width:none}
  .end__direct{gap:8px}
}

/* Téléphones étroits : le menu ne comprime pas sept libellés, il n'affiche
   que celui de la zone où l'on se trouve. Les autres restent des icônes,
   leur libellé demeure lisible par les lecteurs d'écran. */
@media (max-width:400px){
  .dock__i{
    flex-direction:row;gap:7px;
    padding:10px 11px;border-radius:999px;
  }
  .dock__i span{
    position:absolute;width:1px;height:1px;padding:0;margin:-1px;
    overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
  }
  .dock__i.is-active span{
    position:static;width:auto;height:auto;margin:0;
    overflow:visible;clip:auto;
  }
  .dock__list{border-radius:999px}
}

/* =========================================================================
   PRÉFÉRENCES SYSTÈME
   ========================================================================= */

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms!important;
    animation-iteration-count:1!important;
    transition-duration:.001ms!important;
  }
  /* Le sélecteur universel n'atteint pas les pseudo-éléments de transition
     de vue : le changement de zone devient instantané. */
  ::view-transition-old(root),
  ::view-transition-new(root){animation:none!important}
  .zone-out main,.zone-in main{animation:none!important}
  .rv{opacity:1;transform:none}
  .hud__panel,.coord{opacity:1}
  .frag__win{opacity:1;transform:none}
  .frag__scrim{opacity:1}
}

@media (prefers-reduced-transparency:reduce){
  .dock__list,.dock__sheet,.frag__win,.node__btn,.hud__panel,.works__frame,.access__item,.btn--ghost,.rnd{
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
    background:rgba(9,18,36,.96);
  }
}

@media (prefers-contrast:more){
  :root{--muted:#C6D4E4;--dim:#A4B6CA}
  .node__btn,.works__frame,.access__list{border-color:rgba(154,173,196,.45)}
}