/* ===================================================
   OKTOMARU — vitrine
   Basé sur charte_graphique/okto-tokens.css (v1)
   Règle : zéro couleur en dur hors de ce bloc :root.
   =================================================== */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;700&family=Inter:wght@400;600&family=JetBrains+Mono:wght@400;500&display=swap');

:root{
  --okto-font-heading:'Space Grotesk',system-ui,-apple-system,sans-serif;
  --okto-font-body:'Inter',system-ui,-apple-system,sans-serif;
  --okto-font-mono:'JetBrains Mono','Fira Code',ui-monospace,monospace;

  --okto-text-xs:11px; --okto-text-sm:13px; --okto-text-base:15px;
  --okto-text-lg:18px; --okto-text-xl:22px; --okto-text-2xl:28px; --okto-text-3xl:36px;

  --okto-space-1:4px;  --okto-space-2:8px;  --okto-space-3:12px; --okto-space-4:16px;
  --okto-space-6:24px; --okto-space-8:32px; --okto-space-12:48px; --okto-space-16:64px;
  --okto-space-24:96px;

  --okto-radius-sm:4px; --okto-radius:8px; --okto-radius-lg:12px; --okto-radius-xl:16px;
  --okto-transition:150ms ease;
  --okto-maxw:1080px;
}

:root,[data-theme="light"]{
  --okto-bg:#F5F7FA;  --okto-surface:#FFFFFF; --okto-border:#E2E6ED;
  --okto-text:#0D1117; --okto-muted:#646E7B;   /* 3,48:1 → 4,82:1 */
  --okto-sprout:#16B364; --okto-sprout-subtle:#EDFAF3;
  /* Le vert de charte ne donne que 2,74:1 avec du blanc — sous le minimum AA
     de 4,5:1. On garde #16B364 comme accent (bordures, pastilles, lueurs) et
     on passe à cette teinte dès qu'un TEXTE est en jeu. 5,40:1. */
  --okto-sprout-text:#0E7A45;
  --okto-alert:#E5484D;  --okto-warn:#F5A623;
  /* Élévation : deux couches par niveau — un contact net + une diffusion
     large. Une seule ombre floue donne toujours un rendu mou. */
  /* Rayons de flou VOLONTAIREMENT courts. Sur un fond clair, une ombre large
     et douce se lit comme un dégradé, pas comme une élévation : c'est le
     contact serré sous l'objet qui fait qu'on le voit décoller. */
  --okto-shadow-sm:0 1px 2px rgba(13,17,23,.16), 0 2px 4px rgba(13,17,23,.10);
  --okto-shadow:0 1px 2px rgba(13,17,23,.18), 0 3px 6px rgba(13,17,23,.14),
                0 10px 18px -4px rgba(13,17,23,.16);
  --okto-shadow-lg:0 2px 4px rgba(13,17,23,.20), 0 6px 12px rgba(13,17,23,.16),
                   0 18px 32px -6px rgba(13,17,23,.22);
  --okto-shadow-hover:0 2px 4px rgba(13,17,23,.20), 0 10px 18px -2px rgba(13,17,23,.20),
                      0 24px 40px -10px rgba(22,179,100,.45);
  --okto-card-sheen:none;
  /* Bouton : en clair, un halo blanc ne se verrait pas sur un fond clair.
     On garde une ombre neutre et on met le blanc EN HAUT, en liseré interne —
     l'effet « éclairé par le dessus » sans halo invisible. */
  --okto-shadow-btn:inset 0 1px 0 rgba(255,255,255,.45),
                    0 1px 2px rgba(13,17,23,.34), 0 4px 8px -1px rgba(13,17,23,.30);
  --okto-shadow-btn-hi:inset 0 1px 0 rgba(255,255,255,.55),
                       0 2px 4px rgba(13,17,23,.36), 0 8px 16px -2px rgba(13,17,23,.34);
  /* Bloc de contact : ombre teintée à l'accent, posée sur une ombre neutre
     qui l'ancre — une ombre colorée seule fait flotter sans poids. */
  /* Le vert doit être dans la couche PROCHE, pas seulement dans la lointaine :
     à 36 px de flou il se dilue et l'ombre repasse grise. */
  --okto-shadow-join:0 1px 3px rgba(13,17,23,.14),
                     0 6px 12px -2px rgba(20,150,88,.40),
                     0 16px 26px -6px rgba(20,150,88,.42),
                     0 34px 52px -16px rgba(22,179,100,.34);
  /* PAS `none` : une liste box-shadow ne peut pas contenir `none`, la
     déclaration entière devient invalide et le navigateur la jette — toutes
     les ombres du mode clair disparaissaient. Un inset transparent ne dessine
     rien et garde la liste valide. */
  --okto-lift:inset 0 0 0 0 transparent;
  --okto-on-accent:#FFFFFF;
  /* Lumière : le moyeu du vortex est la seule source de la page. */
  --okto-sprout-hi:#1FCB74;
  --okto-glow-hero:rgba(22,179,100,.15);
  --okto-glow-soft:rgba(22,179,100,.09);
  --okto-glow-card:rgba(22,179,100,.10);
  --okto-vortex-op:.055;
}
[data-theme="dark"]{
  --okto-bg:#0D1117;  --okto-surface:#161B22; --okto-border:#30363D;
  --okto-text:#F5F7FA; --okto-muted:#8B949E;
  --okto-sprout:#23D18B; --okto-sprout-subtle:#0D2818;
  --okto-sprout-text:#23D18B;   /* 8,70:1 sur la surface sombre : conforme tel quel */
  --okto-alert:#FF6B6B;  --okto-warn:#F5A623;
  /* En sombre, une ombre seule ne se voit pas : c'est le liseré clair en haut
     (inset) qui fabrique le relief, l'ombre ne fait que décoller du fond. */
  --okto-shadow-sm:0 1px 3px rgba(0,0,0,.7), 0 4px 12px rgba(0,0,0,.5);
  --okto-shadow:0 2px 6px rgba(0,0,0,.92), 0 12px 26px -2px rgba(0,0,0,.85),
                0 30px 54px -14px rgba(0,0,0,.92);
  --okto-shadow-lg:0 4px 10px rgba(0,0,0,.95), 0 22px 42px -4px rgba(0,0,0,.90),
                   0 54px 92px -20px rgba(0,0,0,1);
  --okto-shadow-hover:0 4px 10px rgba(0,0,0,.95), 0 26px 48px -6px rgba(0,0,0,.9),
                      0 44px 84px -20px rgba(35,209,139,.40);
  /* Sur fond presque noir, l'ombre ne suffit pas : on éclaire légèrement le
     haut de la carte pour simuler une lumière rasante venue d'en haut. */
  --okto-card-sheen:linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,0) 42%);
  /* Bouton : halo blanc comme demandé — sur fond sombre il détache
     franchement, là où le vert se confondait avec le bouton lui-même. */
  --okto-shadow-btn:inset 0 1px 0 rgba(255,255,255,.35),
                    0 1px 3px rgba(0,0,0,.7),
                    0 6px 16px -3px rgba(255,255,255,.20),
                    0 16px 34px -12px rgba(255,255,255,.14);
  --okto-shadow-btn-hi:inset 0 1px 0 rgba(255,255,255,.45),
                       0 2px 5px rgba(0,0,0,.75),
                       0 10px 24px -3px rgba(255,255,255,.30),
                       0 24px 46px -14px rgba(255,255,255,.20);
  --okto-shadow-join:0 2px 8px rgba(0,0,0,.6),
                     0 10px 20px -4px rgba(35,209,139,.26),
                     0 26px 48px -10px rgba(35,209,139,.30),
                     0 52px 92px -26px rgba(35,209,139,.22);
  /* liseré haut clair + liseré bas sombre : c'est ce duo qui donne le relief
     quand le fond est presque noir et que l'ombre ne se voit pas. */
  --okto-lift:inset 0 1px 0 rgba(255,255,255,.14), inset 0 -1px 0 rgba(0,0,0,.6);
  --okto-on-accent:#0D1117;
  --okto-sprout-hi:#35E39A;
  --okto-glow-hero:rgba(35,209,139,.20);
  --okto-glow-soft:rgba(35,209,139,.11);
  --okto-glow-card:rgba(35,209,139,.14);
  --okto-vortex-op:.075;
}

*,*::before,*::after{box-sizing:border-box}
/* clip et non hidden : hidden créerait un conteneur de défilement et
   casserait le position:sticky de l'en-tête. */
html{scroll-behavior:smooth;overflow-x:clip}
body{overflow-x:clip}
body{
  margin:0; background:var(--okto-bg); color:var(--okto-text);
  font-family:var(--okto-font-body); font-size:var(--okto-text-base); line-height:1.6;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation-duration:.01ms!important;transition-duration:.01ms!important}
}

h1,h2,h3{font-family:var(--okto-font-heading);font-weight:700;line-height:1.2;margin:0;
  letter-spacing:-.02em}
h1{font-size:clamp(30px,5.2vw,48px)}
h2{font-size:var(--okto-text-2xl)}
h3{font-size:var(--okto-text-lg);font-weight:500;letter-spacing:-.01em}
p{margin:0 0 var(--okto-space-3)}
a{color:var(--okto-sprout-text);text-decoration:none}
/* Repli sans JavaScript : l'adresse reste lisible par un humain, coupée par
   des espaces de largeur nulle pour les moissonneurs. */
.mailto{color:var(--okto-sprout-text)}
a:hover{text-decoration:underline}
.mono{font-family:var(--okto-font-mono)}
.muted{color:var(--okto-muted)}
.wrap{max-width:var(--okto-maxw);margin:0 auto;padding:0 var(--okto-space-6)}
section{padding:var(--okto-space-24) 0}
/* Deux sections qui se suivent additionnaient 96 px bas + 96 px haut : le
   « Modèle » flottait au milieu de 192 px de vide. Seule la marge basse compte. */
section + section{padding-top:0}
.eyebrow{font-size:var(--okto-text-xs);letter-spacing:.08em;text-transform:uppercase;
  color:var(--okto-muted);font-weight:600;margin-bottom:var(--okto-space-3)}
.section-lede{color:var(--okto-muted);font-size:var(--okto-text-lg);max-width:62ch;
  margin-top:var(--okto-space-3)}

/* ── accessibilité ── */
.skip{position:absolute;left:-9999px;top:0;background:var(--okto-sprout-text);
  color:var(--okto-on-accent);padding:10px 16px;border-radius:var(--okto-radius);z-index:100}
.skip:focus{left:var(--okto-space-4);top:var(--okto-space-4)}
:focus-visible{outline:2px solid var(--okto-sprout);outline-offset:2px;border-radius:var(--okto-radius-sm)}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ── header ── */
.site-header{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--okto-bg) 88%,transparent);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--okto-border)}
.site-header .wrap{display:flex;align-items:center;gap:var(--okto-space-6);
  height:64px;justify-content:space-between}
.brand{display:flex;align-items:center;gap:10px;color:var(--okto-text);text-decoration:none}
.brand:hover{text-decoration:none}
.brand .mark{color:var(--okto-text);--logo-accent:var(--okto-sprout);--logo-bg:var(--okto-surface)}
.brand .name{font-family:var(--okto-font-heading);font-weight:500;font-size:20px;letter-spacing:-.03em}
.nav{display:flex;align-items:center;gap:var(--okto-space-6)}
.nav a{color:var(--okto-muted);font-size:var(--okto-text-sm);font-weight:600}
.nav a:hover{color:var(--okto-text);text-decoration:none}
/* `.nav a` (0,1,1) l'emporterait sur `.btn-primary` (0,1,0) et rendrait le
   CTA du header illisible : on remonte la spécificité au même niveau. */
.nav a.btn-primary,.nav a.btn-primary:hover{color:var(--okto-on-accent)}
.nav a.btn-ghost,.nav a.btn-ghost:hover{color:var(--okto-text)}
@media (max-width:760px){.nav .nav-link{display:none}}

/* Sous 430 px, l'en-tête (marque + CTA + bascule) dépassait la largeur de
   l'écran et élargissait tout le document. On resserre à la source. */
@media (max-width:430px){
  .wrap{padding:0 var(--okto-space-4)}
  .nav{gap:var(--okto-space-3)}
  .brand .name{font-size:18px}
  .nav a.btn-primary{padding:8px 12px;font-size:13px}
  .hero .actions .btn{width:100%}
  h1{font-size:clamp(28px,8.4vw,40px)}
}

.theme-btn{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;
  border:1px solid var(--okto-border);border-radius:var(--okto-radius);background:var(--okto-surface);
  color:var(--okto-muted);cursor:pointer;transition:var(--okto-transition);padding:0;
  box-shadow:var(--okto-shadow-sm), var(--okto-lift)}
.theme-btn:hover{color:var(--okto-text);border-color:var(--okto-muted);
  box-shadow:var(--okto-shadow), var(--okto-lift)}
.theme-btn svg{width:17px;height:17px}
[data-theme="light"] .icon-sun{display:none}
[data-theme="dark"]  .icon-moon{display:none}

/* ── boutons ── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--okto-font-body);font-size:var(--okto-text-base);font-weight:600;
  padding:12px 22px;border-radius:var(--okto-radius);border:1px solid transparent;
  cursor:pointer;transition:var(--okto-transition);text-decoration:none;line-height:1.2}
.btn:hover{text-decoration:none}
/* Dégradé conique : c'est la rotation des lames de la marque, pas un effet. */
.btn-primary{color:var(--okto-on-accent);
  background:conic-gradient(from 140deg at 50% 50%,
    var(--okto-sprout-text), var(--okto-sprout) 32%, var(--okto-sprout-text) 68%, var(--okto-sprout));
  box-shadow:var(--okto-shadow-btn), var(--okto-lift)}
.btn-primary:hover{filter:brightness(1.06);transform:translateY(-1px);
  box-shadow:var(--okto-shadow-btn-hi), var(--okto-lift)}
.btn-primary:active{transform:translateY(0);box-shadow:var(--okto-shadow-btn)}
.btn-ghost{background:var(--okto-surface);color:var(--okto-text);border-color:var(--okto-border);
  box-shadow:var(--okto-shadow-sm), var(--okto-lift)}
.btn-ghost:hover{border-color:var(--okto-muted);transform:translateY(-1px);
  box-shadow:var(--okto-shadow), var(--okto-lift)}
.btn-ghost:active{transform:translateY(0);box-shadow:var(--okto-shadow-sm)}
.btn[disabled]{opacity:.55;cursor:not-allowed;filter:none}

/* ══ SIGNATURE — le vortex comme source de lumière ══════════════════════
   La marque n'est pas posée en décoration : elle est la lampe de la page.
   Immense, quasi invisible, en rotation très lente, son moyeu émet la seule
   lueur du site. Le socle au centre, les marques qui rayonnent autour.       */
/* overflow:hidden empêche le débordement horizontal, mais tranche le vortex
   net au bord de la section — une ligne droite en travers de la page. Le
   masque vertical le fait disparaître avant d'atteindre ce bord. */
.lightfield{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0;
  -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 14%,#000 76%,transparent 99%);
  mask-image:linear-gradient(180deg,transparent 0%,#000 14%,#000 76%,transparent 99%)}
.lightfield .vortex{position:absolute;color:var(--okto-text);
  --logo-accent:var(--okto-sprout);--logo-bg:transparent;
  opacity:var(--okto-vortex-op);
  animation:vortex-spin 150s linear infinite;
  /* Le masque évite le bord net : la forme doit se dissoudre, pas se découper. */
  -webkit-mask-image:radial-gradient(closest-side,#000 45%,transparent 100%);
  mask-image:radial-gradient(closest-side,#000 45%,transparent 100%)}
@keyframes vortex-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.lightfield .vortex{animation:none}}

/* ── hero ── */
.hero{position:relative;padding:var(--okto-space-24) 0 var(--okto-space-16);isolation:isolate}
.hero .lightfield .vortex{width:min(860px,105vw);height:min(860px,105vw);
  right:-14%;top:-32%}
/* inset:0 impératif — un débordement à droite décale toute la page en mobile. */
.hero::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(58% 52% at 80% 26%,var(--okto-glow-hero),transparent 68%);
  -webkit-mask-image:linear-gradient(180deg,#000 74%,transparent 98%);
  mask-image:linear-gradient(180deg,#000 74%,transparent 98%)}
.hero .wrap{position:relative;z-index:1}
.hero h1{max-width:16ch}
.hero .sub{font-size:var(--okto-text-lg);color:var(--okto-muted);max-width:60ch;
  margin-top:var(--okto-space-6)}
.hero .actions{display:flex;gap:var(--okto-space-3);flex-wrap:wrap;margin-top:var(--okto-space-8)}

/* ── portefeuille ── */
.tight{padding-top:0}
.brands{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:var(--okto-space-4);margin-top:var(--okto-space-12)}
.brand-card{position:relative;display:flex;flex-direction:column;
  background-color:var(--okto-surface);background-image:var(--okto-card-sheen);
  border:1px solid var(--okto-border);
  border-radius:var(--okto-radius-lg);padding:var(--okto-space-8);
  color:var(--okto-text);text-decoration:none;
  box-shadow:var(--okto-shadow), var(--okto-lift);
  transition:transform 180ms ease, box-shadow 180ms ease, border-color var(--okto-transition);
  min-height:210px}
/* La carte s'allume depuis sa tuile de logo : la marque est le foyer. */
.brand-card::after{content:"";position:absolute;inset:0;border-radius:inherit;
  pointer-events:none;opacity:0;transition:opacity var(--okto-transition);
  background:radial-gradient(48% 46% at 20% 26%,var(--okto-glow-card),transparent 70%)}
/* Survol : elle se lève franchement et une lueur verte apparaît dessous —
   c'est le seul endroit du site où la couleur sert à signaler une action. */
a.brand-card:hover,a.brand-card:focus-visible{text-decoration:none;border-color:var(--okto-sprout);
  transform:translateY(-7px) scale(1.012);
  box-shadow:var(--okto-shadow-hover), var(--okto-lift)}
a.brand-card:active{transform:translateY(-2px) scale(1);box-shadow:var(--okto-shadow)}
a.brand-card:hover::after,a.brand-card:focus-visible::after{opacity:1}
/* Tuile de logo : fond clair fixe dans les deux thèmes. Les logos des marques
   ont leurs propres fonds et contraintes — on ne leur impose pas le nôtre. */
/* Tuile volontairement large : elle doit accueillir aussi bien une icône carrée
   qu'un logotype allongé sans rapetisser ce dernier. */
.blogo{display:inline-flex;align-items:center;justify-content:center;
  width:112px;height:72px;border-radius:var(--okto-radius);background:#FFFFFF;
  border:1px solid var(--okto-border);margin-bottom:var(--okto-space-4);
  overflow:hidden;flex-shrink:0;
  box-shadow:inset 0 2px 5px rgba(13,17,23,.18), inset 0 -1px 0 rgba(255,255,255,.9),
              0 1px 0 rgba(255,255,255,.7)}
.blogo img{max-width:92px;max-height:54px;width:auto;height:auto;object-fit:contain;display:block}
.brand-card h3{margin:0 0 var(--okto-space-3)}
.brand-card p{color:var(--okto-muted);font-size:14px;margin:0}
.status{align-self:flex-start;font-family:var(--okto-font-mono);font-size:var(--okto-text-xs);
  letter-spacing:.04em;padding:2px 9px;border-radius:999px;margin-bottom:var(--okto-space-4)}
/* « En ligne » respire, « Bientôt » reste inerte : allumé contre pas encore allumé. */
.status.live{color:var(--okto-sprout-text);background:var(--okto-sprout-subtle);
  border:1px solid var(--okto-sprout);display:inline-flex;align-items:center;gap:7px}
.status.live::before{content:"";width:6px;height:6px;border-radius:50%;
  background:var(--okto-sprout);animation:pulse 2.6s ease-in-out infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 var(--okto-glow-card)}
                 50%{box-shadow:0 0 0 5px transparent}}
@media (prefers-reduced-motion:reduce){.status.live::before{animation:none}}
.status.soon{color:var(--okto-muted);background:var(--okto-bg);border:1px solid var(--okto-border)}
.go{display:inline-flex;align-items:center;gap:6px;margin-top:auto;padding-top:var(--okto-space-4);
  color:var(--okto-sprout-text);font-size:var(--okto-text-sm);font-weight:600}

/* Cartes « à venir » : la marque en filigrane, floutée — on montre qu'il y a
   quelque chose sans dire quoi. */
.brand-card.ghost{border-style:dashed;box-shadow:var(--okto-shadow), var(--okto-lift);overflow:hidden}
.brand-card.ghost h3{color:var(--okto-muted);letter-spacing:.1em}
.silhouette{position:absolute;right:var(--okto-space-4);bottom:var(--okto-space-4);
  filter:blur(3.5px);opacity:.26;pointer-events:none}
.silhouette .mark{color:var(--okto-text);--logo-accent:var(--okto-text);--logo-bg:var(--okto-surface)}

/* ── bandeau chiffres ── */
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:1px;background:var(--okto-border);border:1px solid var(--okto-border);
  border-radius:var(--okto-radius-lg);overflow:hidden;margin-top:var(--okto-space-16)}
.fact{background:var(--okto-surface);padding:var(--okto-space-6)}
.fact .v{font-family:var(--okto-font-mono);font-size:var(--okto-text-2xl);font-weight:500;
  color:var(--okto-sprout-text);line-height:1.1}
.fact .k{font-size:var(--okto-text-sm);color:var(--okto-muted);margin-top:6px}

/* ── grilles de cartes ── */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:var(--okto-space-6);margin-top:var(--okto-space-12)}
.card{background:var(--okto-surface);border:1px solid var(--okto-border);
  border-radius:var(--okto-radius-lg);padding:var(--okto-space-8);box-shadow:var(--okto-shadow-sm)}
.card .num{font-family:var(--okto-font-mono);font-size:var(--okto-text-sm);color:var(--okto-sprout);
  margin-bottom:var(--okto-space-3)}
.card h3{margin-bottom:var(--okto-space-3)}
.card p{color:var(--okto-muted);font-size:14px;margin:0}

/* ── liste socle ── */
.stack{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:var(--okto-space-6);margin-top:var(--okto-space-12)}
.stack .item{border-top:2px solid var(--okto-border);padding-top:var(--okto-space-4)}
.stack .item h3{font-size:var(--okto-text-base);font-weight:600;margin-bottom:6px}
.stack .item p{color:var(--okto-muted);font-size:14px;margin:0}

/* ── deux publics ── */
.split{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:var(--okto-space-6);margin-top:var(--okto-space-12)}
.panel{background:var(--okto-surface);border:1px solid var(--okto-border);
  border-radius:var(--okto-radius-lg);padding:var(--okto-space-8)}
.panel h3{margin-bottom:var(--okto-space-4);display:flex;align-items:center;gap:10px}
.panel h3 .tag{font-family:var(--okto-font-mono);font-size:var(--okto-text-xs);
  color:var(--okto-sprout);border:1px solid var(--okto-sprout);border-radius:999px;padding:2px 9px}
.panel ul{list-style:none;padding:0;margin:0}
.panel li{position:relative;padding-left:24px;margin-bottom:var(--okto-space-3);
  color:var(--okto-muted);font-size:14px}
.panel li::before{content:"";position:absolute;left:4px;top:9px;width:7px;height:7px;
  border-radius:2px;background:var(--okto-sprout)}

/* ── étapes ── */
.steps{counter-reset:s;margin-top:var(--okto-space-12);display:grid;gap:1px;
  background:var(--okto-border);border:1px solid var(--okto-border);
  border-radius:var(--okto-radius-lg);overflow:hidden}
.step{background:var(--okto-surface);padding:var(--okto-space-6) var(--okto-space-8);
  display:grid;grid-template-columns:auto 1fr;gap:var(--okto-space-6);align-items:start}
.step .idx{font-family:var(--okto-font-mono);font-size:var(--okto-text-sm);color:var(--okto-sprout);
  padding-top:3px;min-width:32px}
.step h3{font-size:var(--okto-text-base);font-weight:600;margin-bottom:4px}
.step p{color:var(--okto-muted);font-size:14px;margin:0}

/* ── formulaire ── */
/* Point de conversion : la lumière du socle l'atteint franchement. */
#prevenir{position:relative;isolation:isolate}
#prevenir .lightfield .vortex{width:min(620px,90vw);height:min(620px,90vw);
  left:-16%;bottom:-38%}
#prevenir .wrap{position:relative;z-index:1}
.join{position:relative;background:var(--okto-surface);border:1px solid var(--okto-border);
  border-radius:var(--okto-radius-xl);padding:var(--okto-space-12);
  box-shadow:var(--okto-shadow-join), var(--okto-lift);overflow:hidden}
.join::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(58% 70% at 88% -10%,var(--okto-glow-soft),transparent 66%)}
.join > *{position:relative}

/* La mascotte accompagne le formulaire — le seul endroit du site où quelqu'un
   s'adresse à quelqu'un. Elle ne signe rien : le logo reste seul en en-tête. */
.join-mascot{position:absolute;right:var(--okto-space-8);bottom:var(--okto-space-6);
  width:180px;height:auto;display:none;pointer-events:none;
  filter:drop-shadow(0 10px 22px rgba(13,17,23,.18))}
@media (min-width:920px){
  .join-mascot{display:block}
  .join{padding-right:calc(var(--okto-space-12) + 210px)}
}
.result-mascot{vertical-align:-12px;margin-right:10px}
@media (max-width:640px){.join{padding:var(--okto-space-6)}}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--okto-space-4);
  margin-top:var(--okto-space-8)}
@media (max-width:640px){.form-grid{grid-template-columns:1fr}}
.field{display:flex;flex-direction:column;gap:6px}
.field.full{grid-column:1/-1}
label{font-size:var(--okto-text-sm);font-weight:600}
label .opt{font-weight:400;color:var(--okto-muted)}
input[type=text],input[type=email],textarea,select{
  font-family:var(--okto-font-body);font-size:var(--okto-text-base);color:var(--okto-text);
  background:var(--okto-bg);border:1px solid var(--okto-border);border-radius:var(--okto-radius);
  padding:11px 13px;transition:var(--okto-transition);width:100%;
  box-shadow:inset 0 2px 4px rgba(13,17,23,.10)}
input:focus,textarea:focus,select:focus{outline:none;border-color:var(--okto-sprout);
  box-shadow:0 0 0 3px var(--okto-sprout-subtle)}
input[aria-invalid="true"],textarea[aria-invalid="true"]{border-color:var(--okto-alert)}
textarea{resize:vertical;min-height:96px}
.err{font-size:var(--okto-text-sm);color:var(--okto-alert);min-height:0}
.err:empty{display:none}

.radios{display:flex;gap:var(--okto-space-3);flex-wrap:wrap}
.radio{position:relative}
.radio input{position:absolute;opacity:0;width:0;height:0}
.radio span{display:inline-block;padding:9px 16px;border:1px solid var(--okto-border);
  border-radius:var(--okto-radius);font-size:14px;cursor:pointer;transition:var(--okto-transition);
  background:var(--okto-bg)}
.radio input:checked+span{border-color:var(--okto-sprout);background:var(--okto-sprout-subtle);
  color:var(--okto-sprout);font-weight:600}
.radio input:focus-visible+span{outline:2px solid var(--okto-sprout);outline-offset:2px}

.consent{display:flex;gap:11px;align-items:flex-start;margin-top:var(--okto-space-4)}
.consent input{margin-top:3px;width:16px;height:16px;accent-color:var(--okto-sprout);flex-shrink:0}
.consent label{font-weight:400;font-size:var(--okto-text-sm);color:var(--okto-muted)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.form-foot{display:flex;align-items:center;gap:var(--okto-space-4);flex-wrap:wrap;
  margin-top:var(--okto-space-8)}
.note{font-size:var(--okto-text-sm);color:var(--okto-muted)}

.result{margin-top:var(--okto-space-6);padding:var(--okto-space-4) var(--okto-space-6);
  border-radius:var(--okto-radius);border-left:3px solid var(--okto-sprout);
  background:var(--okto-sprout-subtle);font-size:14px;display:none}
.result.show{display:block}
.result.error{border-left-color:var(--okto-alert);background:var(--okto-bg);color:var(--okto-alert)}

/* ── footer ── */
.site-footer{border-top:1px solid var(--okto-border);padding:var(--okto-space-12) 0;
  margin-top:var(--okto-space-16)}
.site-footer .wrap{display:flex;justify-content:space-between;gap:var(--okto-space-6);
  flex-wrap:wrap;align-items:flex-start}
.site-footer p{font-size:var(--okto-text-sm);color:var(--okto-muted);margin:0 0 6px}
.site-footer .links{display:flex;gap:var(--okto-space-4);flex-wrap:wrap}
.site-footer .links a{font-size:var(--okto-text-sm);color:var(--okto-muted)}
.site-footer .links a:hover{color:var(--okto-text)}