/* ============================================================
   SAMATSA · homepage-hero-vNext — itération de convergence

   Base : la structure de la v2 (deux colonnes, nav à plat, geste
   signature sous le titre). Ce qui change :

   · le panneau bleu nuit rigide disparaît. Le fond de droite n'est
     plus qu'une grille très basse et deux nappes de lumière — aucune
     arête, donc rien ne subsiste derrière la carte quand elle flotte ;
   · l'objet de droite n'est plus un document imprimé mais une
     LECTURE DU JEU : un seul panneau, matière douce, hiérarchie
     conduite jusqu'à « Priorité actuelle » ;
   · le sous-titre tient en une phrase ;
   · les CTA reviennent à un rayon contemporain (13 px) ;
   · l'accent revient dans la palette officielle : bleu acier pour le
     mot, sauge densifiée pour le geste, champagne en une seule touche.
   ============================================================ */

@font-face{font-family:'Merchant';src:url('../fonts/Merchant-Regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Merchant';src:url('../fonts/Merchant-Medium.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}

:root{
  /* — palette officielle — */
  --navy:#0B1D33;
  --navy-2:#132B49;
  --slate:#1F3656;
  --steel:#38587A;
  --anthracite:#1A1D22;
  --mist:#D9DEE6;
  --ivory:#F3F1ED;
  --off:#FAFAF8;
  --sage:#A7B7AE;
  --gold:#C5A96A;
  --sky:#DCE6F3;

  /* le geste : sauge légèrement densifiée pour tenir sur l'ivoire */
  --swash:#8CA39B;
  /* teinte exacte du fond a la hauteur du H1 : sert de reserve autour
     des descendantes pour que le geste ne les touche jamais */
  --paper-air:#F6F4EF;

  /* — encres — */
  --ink:#0B1D33;
  --ink-2:rgba(11,29,51,.70);
  --ink-3:rgba(11,29,51,.46);
  --ink-4:rgba(11,29,51,.26);
  --rule:rgba(11,29,51,.13);
  --rule-2:rgba(11,29,51,.075);

  /* — typo — */
  --serif:'Instrument Serif',Georgia,'Times New Roman',serif;
  --sans:'Inter Tight','Helvetica Neue',Arial,sans-serif;
  --merch:'Merchant','Inter Tight',sans-serif;

  /* — mesures — */
  --wrap:1240px;
  --pad:clamp(1.25rem,4vw,3.25rem);
  --nav-h:74px;
  --r-btn:13px;
  --r-card:20px;
}

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}

html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;
  background:linear-gradient(178deg,var(--off) 0%,#F5F3EE 58%,#F0EEE8 100%);
  color:var(--ink);
  font-family:var(--sans);font-weight:400;font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
body::after{
  content:"";position:fixed;inset:0;z-index:9999;pointer-events:none;opacity:.42;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.045'/%3E%3C/svg%3E");
}

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

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

.skip{position:absolute;left:-9999px;top:0;z-index:999;background:var(--navy);color:var(--off);padding:.75rem 1.25rem}
.skip:focus{left:1rem;top:1rem}
:focus-visible{outline:2px solid var(--steel);outline-offset:3px;border-radius:3px}

.num{font-family:var(--merch);font-weight:500;font-feature-settings:"tnum" 1,"lnum" 1;letter-spacing:.005em}
.num .thin{display:inline-block;width:.2em}

/* ── révélation ───────────────────────────────────────────── */
.rv{opacity:0;transform:translateY(14px);transition:opacity .9s cubic-bezier(.2,.7,.2,1) var(--d,0s),transform .9s cubic-bezier(.2,.7,.2,1) var(--d,0s)}
.rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}}

/* ══════════ NAVIGATION ══════════ */
.nav{position:sticky;top:0;z-index:50;background:transparent;transition:background .45s}
.nav::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:var(--rule);opacity:0;transition:opacity .45s;
}
.nav.is-stuck{background:rgba(250,250,248,.94);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.nav.is-stuck::after{opacity:1}



.nav__in{height:var(--nav-h);display:flex;align-items:center;gap:2rem}

.logo{display:flex;align-items:center;margin-right:auto}
.logo img{height:23.1px;width:auto;opacity:.96;transition:opacity .35s}
.logo:focus-visible{outline-offset:6px}
.logo:hover img{opacity:1}

.nav__links{display:flex;gap:1.9rem}
.nav__links a{font-size:.855rem;color:var(--ink-2);position:relative;padding:.35rem 0;transition:color .35s}
.nav__links a::after{content:"";position:absolute;left:0;right:100%;bottom:.1rem;height:1px;background:var(--steel);transition:right .5s cubic-bezier(.2,.8,.2,1)}
.nav__links a:hover{color:var(--ink)}
.nav__links a:hover::after{right:0}

.nav__act{display:flex;align-items:center;gap:1.3rem;margin-left:auto}
.nav__login{font-size:.82rem;color:var(--ink-3);transition:color .35s}
.nav__login:hover{color:var(--ink)}

.burger{display:none;width:34px;height:34px;flex-direction:column;justify-content:center;gap:5px;align-items:flex-end}
.burger span{display:block;height:1px;background:var(--ink);transition:transform .4s,width .4s}
.burger span:first-child{width:20px}
.burger span:last-child{width:13px}
.burger[aria-expanded="true"] span:first-child{transform:translateY(3px) rotate(45deg)}
.burger[aria-expanded="true"] span:last-child{width:20px;transform:translateY(-3px) rotate(-45deg)}

.mmenu{
  position:fixed;inset:0;z-index:45;background:var(--ivory);
  display:flex;flex-direction:column;justify-content:center;gap:2.5rem;padding:5rem var(--pad) 3rem;
}
.mmenu nav{display:flex;flex-direction:column;gap:.35rem}
.mmenu nav a{font-family:var(--serif);font-size:clamp(2rem,9vw,2.9rem);line-height:1.22;display:flex;align-items:baseline;gap:1rem;color:var(--ink)}
.mmenu nav a i{font-family:var(--merch);font-style:normal;font-size:.72rem;color:var(--steel);letter-spacing:.1em}
.mmenu .btn{justify-content:center}

/* ══════════ BOUTONS ══════════ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.7rem;
  font-size:.83rem;font-weight:500;letter-spacing:.03em;
  padding:.95rem 1.5rem;border-radius:var(--r-btn);border:1px solid transparent;
  transition:transform .45s cubic-bezier(.2,.8,.2,1),box-shadow .45s,background .35s,border-color .35s,color .35s;
}
.btn i{font-style:normal;transition:transform .45s cubic-bezier(.2,.8,.2,1);font-size:.95em}
.btn:hover i{transform:translateX(4px)}
.btn--sm{padding:.65rem 1.1rem;font-size:.775rem;border-radius:10px}
.btn--lg{padding:1.1rem 1.85rem;font-size:.875rem}

.btn--ink{
  background:var(--navy);color:var(--off);
  box-shadow:0 1px 1px rgba(11,29,51,.18),0 10px 22px -14px rgba(11,29,51,.85);
}
.btn--ink:hover{background:var(--navy-2);transform:translateY(-2px);box-shadow:0 1px 1px rgba(11,29,51,.18),0 18px 32px -16px rgba(11,29,51,.75)}

/* secondaire : présent mais clairement au second plan */
.btn--ghost{
  background:rgba(255,255,255,.62);color:var(--ink-2);
  border-color:rgba(11,29,51,.22);
  box-shadow:0 1px 1px rgba(11,29,51,.04);
}
.btn--ghost:hover{background:rgba(255,255,255,.9);color:var(--ink);border-color:rgba(11,29,51,.32);transform:translateY(-2px)}

/* ══════════ TYPOGRAPHIE ══════════ */
.display{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(2.15rem,.95rem + 4.35vw,5rem);
  letter-spacing:-.02em;line-height:1.02;
  color:var(--ink);
}
.display__dot{color:var(--ink)}

.eyebrow{
  display:flex;align-items:center;gap:.75rem;margin:0 0 1.15rem;
  font-size:.685rem;font-weight:500;letter-spacing:.215em;text-transform:uppercase;
  color:var(--steel);
}
/* le carré Samatsa, en repère d'eyebrow */
.eyebrow::before{
  content:"";width:9px;height:9px;flex:none;background:currentColor;opacity:.9;
  clip-path:polygon(0 0,50% 0,50% 50%,100% 50%,100% 100%,50% 100%,50% 50%,0 50%);
}
/* ── SIGNATURE DE NAVIGATION ÉDITORIALE ──
   Deux variantes d'encre pour le MÊME composant `.eyebrow` (même carré,
   même typo, même taille, même tracking, même poids, même espacement) :
   la géométrie ne change jamais, seule la couleur s'adapte au fond pour
   garder le contraste. Rien d'autre n'est redéfini — currentColor sur
   le carré suffit à recolorer l'icône avec le texte, il n'y a donc
   qu'une ligne par variante.

   --dark : sauge de la palette officielle, déjà utilisée ailleurs sur
   la page comme encre de label secondaire sur fond sombre (section 3).
   Sert les sections 2 et 3.

   --gold : champagne de la palette officielle. Sert la section 5 en
   particulier, dont l'eyebrow est le premier signal qui répond au
   dernier de la section 4 (« Vers l'autonomie. », posé dans la même
   teinte) — un fil délibéré entre les deux sections, pas une exception
   au système. */
.eyebrow--dark{color:var(--sage)}
.eyebrow--gold{color:var(--gold)}

.lead{
  max-width:31rem;
  font-size:clamp(1.04rem,.96rem + .42vw,1.2rem);line-height:1.6;
  color:var(--ink-2);text-wrap:pretty;
}
/* « identifier » et « concentrer » : les deux gestes de la méthode.
   Le poids suffit — même taille, même encre, aucun effet publicitaire. */
.lead b{font-weight:600;color:inherit}

/* ══════════ HERO ══════════ */
.hero{
  position:relative;
  min-height:min(680px,calc(100svh - var(--nav-h)));
  display:flex;align-items:center;
  padding:clamp(2.2rem,3.6vw,3.2rem) 0 clamp(2.6rem,4.2vw,3.6rem);
  overflow:hidden;
}

/* — le fond : aucune arête, seulement de la lumière et une trame — */
.hero__field{position:absolute;inset:0;pointer-events:none}
.field__grid{
  position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(11,29,51,.075) 1px,transparent 1px),
    linear-gradient(90deg,rgba(11,29,51,.075) 1px,transparent 1px);
  background-size:clamp(58px,5vw,78px) clamp(58px,5vw,78px);
  -webkit-mask-image:radial-gradient(100% 88% at 74% 44%,#000 2%,transparent 74%);
  mask-image:radial-gradient(100% 88% at 74% 44%,#000 2%,transparent 74%);
}
/* nappe de lumière haute, froide */
.field__light{
  position:absolute;right:-16%;top:-40%;width:min(84vw,1080px);aspect-ratio:1;
  background:radial-gradient(circle at 50% 50%,
    rgba(220,230,243,.85) 0%,rgba(217,222,230,.55) 34%,rgba(217,222,230,.12) 56%,transparent 72%);
}
/* plan de profondeur bas, sauge très diluée */
.field__depth{
  position:absolute;right:-6%;bottom:-30%;width:min(64vw,820px);aspect-ratio:1.2;
  background:radial-gradient(ellipse at 50% 50%,
    rgba(167,183,174,.40) 0%,rgba(167,183,174,.14) 44%,transparent 70%);
}

.hero__in{
  position:relative;z-index:1;
  display:grid;grid-template-columns:minmax(0,56fr) minmax(0,44fr);
  gap:clamp(1.8rem,3.8vw,4rem);align-items:center;
}

.hero__text{max-width:37rem}
.hero .display{margin:0 0 1.4rem}
.hero__cta{display:flex;align-items:center;gap:.85rem;flex-wrap:wrap;margin-top:1.9rem}
.hero__note{margin-top:1.55rem;font-size:.954rem;line-height:1.5;letter-spacing:.012em;color:rgba(11,29,51,.67)}

/* ── le geste sous « te fait progresser » ───────────────────
   Arc lisse repris de v6b (remontée au milieu, sortie un peu
   plus haute que l'attaque), redessiné à largeur variable :
   fin aux deux bouts, médium au premier tiers, densité d'encre
   portée par un dégradé. Aucune irrégularité aléatoire.
   Généré par tools/build-swash.py.

   Le tracé passe DERRIÈRE les lettres : `z-index:-1` le pose sous
   le contenu du titre, jamais dessus. Les descendantes du p et du
   g le coupent proprement au lieu d'être barrées, et le mot reste
   au premier plan. Le geste est donc posé un peu plus bas pour
   qu'il frôle ces descendantes sans se faire avaler par elles.    */
.accent{position:relative;display:inline-block;white-space:nowrap}
.accent em{
  position:relative;z-index:1;font-style:italic;color:var(--steel);
  text-shadow:0 0 3px var(--paper-air),0 0 3px var(--paper-air),0 0 5px var(--paper-air);
}
.swash{
  position:absolute;z-index:-1;left:-2%;bottom:-.145em;width:104%;max-width:none;height:.30em;
  overflow:visible;clip-path:inset(0 100% -40% 0);
}
.rv.in .swash{clip-path:inset(0 -4% -40% 0);transition:clip-path 1.15s cubic-bezier(.32,.86,.32,1) .75s}
@media (prefers-reduced-motion:reduce){
  .swash,.rv.in .swash{clip-path:none;transition:none}
}

/* ══════════ LA LECTURE DU JEU ══════════ */
.hero__stage{display:flex;flex-direction:column;align-items:flex-end;gap:1.15rem}

.read{
  position:relative;width:min(100%,26.5rem);margin-left:auto;
  padding:clamp(1.45rem,1.9vw,1.8rem);
  border-radius:var(--r-card);
  background:linear-gradient(163deg,rgba(255,255,255,.90) 0%,rgba(255,255,255,.72) 52%,rgba(255,255,255,.82) 100%);
  border:1px solid rgba(255,255,255,.9);
  -webkit-backdrop-filter:blur(20px) saturate(140%);backdrop-filter:blur(20px) saturate(140%);
  box-shadow:
    inset 0 0 0 1px rgba(11,29,51,.05),
    inset 0 1px 0 rgba(255,255,255,.95),
    0 2px 4px -2px rgba(11,29,51,.10),
    0 26px 46px -28px rgba(11,29,51,.34),
    0 60px 90px -70px rgba(11,29,51,.30);
  animation:drift 13s cubic-bezier(.45,0,.55,1) infinite;
}
@keyframes drift{
  0%,100%{transform:translate3d(0,0,0)}
  50%{transform:translate3d(0,-6px,0)}
}
@media (prefers-reduced-motion:reduce){.read{animation:none}}

.read__head{padding-bottom:1.05rem;border-bottom:1px solid var(--rule-2)}
.read__kind{
  font-size:.605rem;font-weight:500;letter-spacing:.22em;text-transform:uppercase;
  color:var(--steel);margin-bottom:.48rem;
}
.read__title{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(1.5rem,1.15rem + .75vw,1.9rem);line-height:1.05;letter-spacing:-.015em;
  color:var(--navy);
}

/* — niveau : deux repères et le chemin entre eux — */
.level{--lv:clamp(1.75rem,1.2rem + 1.3vw,2.35rem);
  display:grid;grid-template-columns:auto 1fr auto;align-items:end;gap:clamp(.7rem,1.3vw,1.1rem);padding:1.25rem 0 1.3rem}
.level__lb{display:block;font-size:.60rem;font-weight:500;letter-spacing:.15em;text-transform:uppercase;color:var(--ink-3);margin-bottom:.4rem;white-space:nowrap}
.level__v{display:block;font-size:var(--lv);line-height:.9;color:var(--navy)}
.level__pt--goal{text-align:right}
.level__pt--goal .level__lb{color:var(--steel)}
.level__pt--goal .level__v{color:var(--steel)}
/* le chemin entre les deux repères : un filet qui glisse de l'ardoise vers
   l'acier et s'allège en arrivant, un point plein au départ, un anneau fin
   à l'objectif. Une trajectoire, pas une jauge. Calé sur le centre optique
   des chiffres via --lv. */
.level__link{
  display:flex;flex-direction:column;align-items:stretch;gap:.42rem;
  margin-bottom:calc(var(--lv) * .516);
}
/* l'écart à couvrir, posé sur le chemin : une annotation, pas un badge.
   Même sauge que le geste sous le titre. */
.level__gain{
  text-align:center;line-height:1;white-space:nowrap;
  font-size:.665rem;font-weight:500;letter-spacing:.045em;
  color:var(--swash);
}
.level__gain .num{
  display:inline-block;min-width:2.5em;text-align:center;
  letter-spacing:.02em;
}
.level__path{
  position:relative;height:1px;
  background:linear-gradient(90deg,
    rgba(31,54,86,.28) 0%,
    rgba(56,88,122,.32) 62%,
    rgba(56,88,122,.13) 100%);
}
.level__path::before,.level__path::after{content:"";position:absolute;top:50%;border-radius:50%;transform:translateY(-50%)}
.level__path::before{left:0;width:4.5px;height:4.5px;background:var(--slate)}
.level__path::after{right:0;width:6.5px;height:6.5px;background:var(--off);box-shadow:0 0 0 1.1px rgba(56,88,122,.72)}

/* — lecture : deux colonnes tenues par l'espace, pas par des filets — */
.traits{display:grid;grid-template-columns:1fr 1fr;gap:1.3rem;padding-top:1.25rem;border-top:1px solid var(--rule-2)}
.traits__lb{font-size:.595rem;font-weight:500;letter-spacing:.17em;text-transform:uppercase;color:var(--ink-3);margin-bottom:.72rem}
.tags li{display:flex;align-items:center;gap:.58rem;font-size:.945rem;line-height:1.4;color:var(--navy);padding:.24rem 0}
.tags li::before{
  content:"";width:7px;height:7px;flex:none;
  clip-path:polygon(0 0,50% 0,50% 50%,100% 50%,100% 100%,50% 100%,50% 50%,0 50%);
}
.tags--on li::before{background:var(--sage)}
.tags--off li::before{background:rgba(11,29,51,.22)}
.tags--off li{color:var(--ink-2)}

/* — le cœur de la promesse — */
.focus{
  margin-top:1.4rem;padding:1rem 1.15rem 1.1rem;border-radius:14px;
  background:linear-gradient(160deg,var(--navy) 0%,#122B4A 100%);
  box-shadow:0 12px 26px -18px rgba(11,29,51,.85);
}
.focus__lb{
  display:flex;align-items:center;gap:.55rem;
  font-size:.60rem;font-weight:500;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(220,230,243,.72);margin-bottom:.42rem;
}
/* l'unique touche de champagne du hero : une étoile à quatre branches aux
   côtés concaves, tracée fine. Un seul éclat — jamais la grappe de sparkles
   des interfaces IA. */
.focus__mark{
  width:9.5px;height:9.5px;flex:none;
  fill:var(--gold);opacity:.88;
  transform:translateY(-.5px);
}
.focus__v{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(1.14rem,1rem + .45vw,1.36rem);line-height:1.2;letter-spacing:-.008em;
  color:#F6F4F0;
}

/* ══════════ RESPONSIVE ══════════ */
@media (max-width:1180px){
  .hero__in{gap:clamp(1.6rem,3vw,2.6rem)}
  .display{font-size:clamp(2.15rem,.9rem + 3.9vw,3.7rem)}
  .read{width:min(100%,25rem)}
}

@media (max-width:960px){
  
  .nav__links,.nav__login{display:none}
  .burger{display:flex}

  .hero{min-height:0;padding-top:clamp(2rem,4.5vw,2.8rem);padding-bottom:clamp(3rem,7vw,4rem)}
  .hero__in{grid-template-columns:minmax(0,1fr);gap:clamp(2.6rem,6.5vw,3.4rem)}
  .hero__text{max-width:34rem}
  .hero__stage{align-items:stretch}
  .read{width:min(100%,28rem);margin-inline:auto}
  .field__grid{-webkit-mask-image:radial-gradient(95% 60% at 50% 78%,#000 2%,transparent 76%);mask-image:radial-gradient(95% 60% at 50% 78%,#000 2%,transparent 76%)}
  .field__light{right:-34%;top:-10%;width:min(120vw,760px)}
  .field__depth{right:-20%;bottom:-6%;width:min(96vw,700px)}
}

@media (max-width:640px){
  :root{--nav-h:64px}
  .nav__act .btn{display:none}
  .display{font-size:clamp(2rem,1rem + 4.7vw,2.6rem)}
  .hero__cta{gap:.7rem;flex-direction:column;align-items:stretch;margin-top:1.8rem}
  .hero__cta .btn{width:100%}
  .level{--lv:1.7rem}
  .tags li{font-size:.92rem}
}

@media (max-width:400px){
  .display{font-size:2.02rem}
  .read{padding:1.2rem}
  .traits{gap:.9rem}
}

/* Mobile banner and header stay in normal document flow. Desktop is unchanged. */
@media(max-width:959.98px){
  .nav{
    position:relative;top:auto;
    background:var(--ivory);
    opacity:1;filter:none;
    -webkit-backdrop-filter:none;backdrop-filter:none;
    mix-blend-mode:normal;
  }
  #immersion-banner .immersion-banner__link{min-height:54px;padding-block:5px;padding-inline:12px;row-gap:2px;font-size:.72rem}
  #immersion-banner .immersion-banner__cta{padding-block:0}
}

/* Mobile navigation: compact brand at left, member access and menu at right. */
@media(max-width:959.98px){
  .nav__in{gap:1rem}
  .nav .logo{display:flex;flex:none;min-height:44px}
  .nav .logo img{content:url("../img/logo-samatsa-static-ink.svg");height:28px;width:auto;object-fit:contain}
  .nav__act > .btn{display:none}
  .nav__act{width:auto;margin-left:auto;gap:.75rem}
  .nav__act .nav__login{display:inline-flex;align-items:center;min-height:44px;font-size:.875rem;color:var(--navy);white-space:nowrap}
  .nav__act .burger{width:44px;height:44px;flex:none}
}