/*
 * LE SITE PUBLIC eqnx.vc — sa feuille (25/10/2026 ; v3 le 26/10/2026, branche proto/v3 ; claude-docs/modules/site-public.md).
 *
 * UNE SEULE FEUILLE pour la surface (pack Claude Design, 01-REGLES.md §1), chargée APRÈS le kit commun
 * (assets/commun/eqnx-commun.css : polices, jetons, barre, logo, langue, boutons, pied, fonds .eq-sombre / .eq-clair).
 * Elle ne redéfinit JAMAIS une classe .eq-* (les cinq composants restent identiques au pixel près sur les trois surfaces,
 * tests/proto-v3/mesure.sh le vérifie) : elle consomme les variables du kit et n'ajoute que le bloc v3, préfixe .s-.
 *   · les familles : var(--eq-font-titre) (NHG), var(--eq-font-label) (Space Grotesk), var(--eq-font-texte) — les deux
 *     variantes A, D et E du kit (data-eq-fonts) ; jamais un nom de police ici ; jamais de graisse 500+ sur NHG ;
 *   · les fonds : var(--eq-fond), var(--eq-texte), var(--eq-texte-2), var(--eq-filet), var(--eq-accent-texte) — sombre au
 *     départ, le papier commun en clair (html.eq-clair + data-theme="clair", posés par site-tete.js / site.js) ;
 *   · pas de !important (règle 3).
 * La feuille de Webflow (compilée, purgée le 25/10/2026) est RETIRÉE le 26/10/2026 : plus aucun gabarit du site n'en
 * portait une classe (vérifié par grep sur tous les .twig du dépôt : navbar, nav-container, hero-section, frosted-card,
 * team-block, filter-list, join-the-circle, bttom-circle, footer, eqnx---rich-text… : aucune occurrence ailleurs que
 * dans les gabarits du site, réécrits ; aucune autre page ne charge site/site.css).
 */

/* ═══ EQNX v3 ═══ */

/* ── 1. Les jetons propres au site (le reste vient du kit) ─────────────────────────────────────────────────────────────
   --s-t3     le texte tertiaire en PETIT (zones, rôles, numéros) : #6B6B6B du pack fait 3,9:1 sur le noir, sous AA ;
              #858585 fait 5,7:1 ; sur le papier, #736F67 (4,8:1) — la proposition du kit (QUESTIONS.md, Kit commun §5)
   --s-glow   la lumière de la couronne : blanche sur le noir, une ombre d'encre douce sur le papier (03 « Mode clair »)
   --s-carte  le fond d'un portrait absent ou en chargement */
:root{
  --s-t3:#858585;
  --s-glow:#FFFFFF;
  --s-glow-fort:55%;
  --s-glow-halo:35%;
  --s-carte:#0D0D0C;
  --s-filet-doux:#FFFFFF12;
  --s-ph-fond:#1A1917;
}
html[data-theme=clair]{
  --s-t3:#736F67;
  --s-glow:#0A0908;
  --s-glow-fort:26%;
  --s-glow-halo:16%;
  --s-carte:#F1EFEA;
  --s-filet-doux:#0A090812;
  --s-ph-fond:#E7E5E0;
}

/* ── 2. La page ────────────────────────────────────────────────────────────────────────────────────────────────────── */
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;text-size-adjust:100%}
.s-page{margin:0;background:var(--eq-fond);color:var(--eq-texte);font:300 17px/1.6 var(--eq-font-texte);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;
  transition:background-color .5s var(--eq-courbe),color .5s var(--eq-courbe)}
.s-page *,.s-page *::before,.s-page *::after{box-sizing:border-box}
.s-page img{display:block;max-width:100%}
.s-page ::selection{background:var(--eq-orange);color:#000}
.s-page main{display:block;outline:none}
.s-pf-r,.s-tm-c,.s-scroll,.s-legal-texte a,.s-legal-voir a{color:inherit}
/* le focus clavier orange (le kit a le sien sur .eq-* ; :where garde ces règles-ci plus faibles que les siennes) */
:where(.s-page main,.s-skip) :focus-visible,.s-skip:focus-visible{outline:2px solid var(--eq-orange);outline-offset:4px;border-radius:2px}
.s-skip{position:fixed;left:12px;top:-60px;z-index:70;padding:10px 14px;border-radius:var(--eq-rayon);background:var(--eq-texte);color:var(--eq-fond);
  font:400 14px/1 var(--eq-font-label);text-decoration:none;transition:top .2s var(--eq-courbe)}
.s-skip:focus{top:12px}
.s-vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ── 3. L'intro : le composant du kit (commun/_eq_intro.html.twig, .eq-ouverture) — plus rien ici ─────────────────── */

/* ── 4. Le hero : la couronne, le titre, le point orange ; sans accroche ──────────────────────────────────────────── */
.s-hero{position:relative;display:grid;place-items:center;min-height:100svh;padding:calc(var(--eq-barre-h) + 48px) var(--eq-marge) 132px;overflow:hidden;isolation:isolate}
.s-ring{position:absolute;left:50%;top:44%;z-index:-1;width:min(74vw,980px,96svh);aspect-ratio:1;translate:-50% -50%;border-radius:50%;pointer-events:none;
  box-shadow:0 0 0 1px color-mix(in srgb,var(--s-glow) 10%,transparent),
    inset 0 -40px 90px -30px color-mix(in srgb,var(--s-glow) var(--s-glow-fort),transparent),
    0 40px 120px -40px color-mix(in srgb,var(--s-glow) var(--s-glow-halo),transparent);
  animation:s-ring 14s var(--eq-courbe) infinite alternate}
@keyframes s-ring{to{rotate:24deg}}
/* le bas du hero se fond dans la page : la couronne et son halo ne s'arrêtent plus sur une ligne nette (Alex, 26/10 : « la sphère est coupée en bas ») */
.s-hero::after{content:"";position:absolute;left:0;right:0;bottom:0;z-index:-1;height:min(32svh,260px);pointer-events:none;background:linear-gradient(to bottom,transparent,var(--eq-fond))}
.s-h1{position:relative;max-width:12ch;margin:0 0 6vh;text-align:center;font:300 clamp(48px,7.4vw,124px)/.98 var(--eq-font-titre);letter-spacing:-.045em;word-spacing:calc(var(--eq-titre-mots) + .045em);
  color:var(--eq-texte);text-wrap:balance;
  background:linear-gradient(100deg,var(--eq-texte) 20%,color-mix(in srgb,var(--eq-texte) 50%,var(--eq-fond)) 95%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
/* découpé par SplitText (site.js) : le dégradé passe sur chaque ligne (une ligne qui bouge sort du « clip » de son parent) */
.s-h1.s-h1--decoupe{background:none;-webkit-text-fill-color:currentColor}
.s-h1-l{background:linear-gradient(100deg,var(--eq-texte) 20%,color-mix(in srgb,var(--eq-texte) 50%,var(--eq-fond)) 95%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;padding-bottom:.06em}
.s-nobr{white-space:nowrap}
.s-dot{display:inline-block;width:.13em;height:.13em;margin-left:.06em;border-radius:50%;background:var(--eq-orange);vertical-align:.02em}
.s-hero-foot{position:absolute;left:var(--eq-marge);right:var(--eq-marge);bottom:28px;display:flex;justify-content:space-between;align-items:center;
  padding-top:20px}  /* sans filet : il ne séparait rien (Alex, 26/10) */
.s-scroll{display:grid;justify-items:center;width:22px;height:36px;padding-top:7px;border:1px solid var(--eq-filet);border-radius:12px;transition:border-color .3s var(--eq-courbe)}
.s-scroll span{width:2px;height:7px;border-radius:2px;background:var(--eq-texte);animation:s-defile 2s var(--eq-courbe) infinite}
.s-scroll:hover{border-color:var(--eq-orange)}
@keyframes s-defile{50%{transform:translateY(8px);opacity:.2}}
/* l'interrupteur clair / sombre, COLLANT (Alex, 26/10/2026) : même place à l'écran au défilement, en bas à droite, à
   la hauteur de l'indicateur de défilement du hero. .s-theme est le dernier enfant de <main>, collant en bas, de hauteur
   nulle : le bouton suit l'écran tant que <main> est là, puis s'arrête au-dessus du pied (rien sur la newsletter, rien
   sous le ©). Il porte son propre fond (celui de la page) et un filet texte 2 : lisible sur le papier comme sur le noir,
   et au-dessus d'une image. Zone tactile 64 × 48 (::after), focus orange (la règle de main). */
.s-theme{position:sticky;bottom:0;z-index:40;display:flex;justify-content:flex-end;height:0;padding:0 var(--eq-marge);pointer-events:none}
.s-toggle{position:relative;flex:none;width:52px;height:30px;margin:0;padding:4px;transform:translateY(calc(-100% - 31px));pointer-events:auto;
  border:1px solid var(--eq-texte-2);border-radius:99px;background:var(--eq-fond);box-shadow:0 6px 20px -8px #0A090880;cursor:pointer;
  transition:border-color .3s var(--eq-courbe),background-color .5s var(--eq-courbe)}
.s-toggle::after{content:"";position:absolute;inset:-9px -6px}
.s-toggle span{display:block;width:20px;height:20px;border-radius:50%;background:var(--eq-texte);transition:transform .4s var(--eq-courbe)}
.s-toggle:hover{border-color:var(--eq-orange)}
.s-toggle[aria-pressed=true] span{transform:translateX(22px)}

/* ── 5. Les sections : la grille, les intitulés « ( 01  ABOUT EQNX ) » ───────────────────────────────────────────── */
.s-sec{max-width:var(--eq-max);margin:0 auto;padding:clamp(80px,11vw,160px) var(--eq-marge) 0}
.s-label{display:flex;align-items:center;gap:.5em;margin:0 0 clamp(40px,5vw,72px);padding-bottom:22px;border-bottom:1px solid var(--eq-filet);
  font:300 15px/1 var(--eq-font-label);letter-spacing:.24em;text-transform:uppercase;color:var(--eq-texte-2)}
.s-label-n{margin-right:.7em}
.s-label--nu{justify-content:center;margin:0;padding:0;border:0}
.s-label--nu .s-label-n{margin-right:0}

/* ── 6. Section 01 · About EQNX — variante B « l'impact d'abord » (Alex, 26/10/2026) ──────────────────────────────────
   Une page de magazine : l'énoncé en très grand, seul sur sa ligne (la seconde proposition, « — at the moment… », en
   texte 2, sur sa ligne) ; beaucoup d'air ; puis la note « Why EQNX? » et le Lottie about (ci-dessous) ; puis les
   secteurs (les verticales) et la thèse compacte (SiteThesis), chacun sous son libellé et son filet. */
.s-statement{max-width:15.5em;margin:0;font:300 clamp(38px,5.3vw,80px)/1.04 var(--eq-font-titre);letter-spacing:-.035em;word-spacing:calc(var(--eq-titre-mots) + .035em);text-wrap:balance}
/* la seconde proposition sur sa ligne, en texte 2 : jamais « — at » orphelin en bout de ligne */
.s-statement-fin{display:block;margin-top:.12em;color:var(--eq-texte-2)}
/* LA NOTE « WHY EQNX? » (recomposée le 26/10/2026 — Alex : « améliore la mise en page, ce n'est pas ouf »). Avant : un
   Lottie de 300 px flottant dans le premier tiers, un libellé orange de 12 px et une phrase de 23 px sur 27 em, perdus
   dans le vide sous l'énoncé de 80 px. Maintenant, la grammaire des blocs de la section :
   · le libellé AU-DESSUS de son filet, aux mesures de « Our sectors » et « Our thesis » (.s-bloc-l), en orange : c'est
     la note de la section ;
   · dessous, la grille de la thèse (3 colonnes égales, .s-th) : la phrase devient un second titre (NHG 300, de 26 à
     42 px : l'énoncé fait 80, un titre de la thèse 28) ;
   · le Lottie à la taille de sa colonne (--s-about-l : son dessin occupe 62 % de la largeur de sa boîte et toute sa
     hauteur ; ses traits restent à 1 px, non-scaling-stroke), le bord du cercle sur la marge ou sur un axe de la grille.
   Deux mises en page (?why=1|2 sur le poste de dev ; la 2, retenue, par défaut — accueil.html.twig) :
   1 « la ligne de la thèse » : le cercle dans la 1re colonne, un filet vertical à l'endroit exact de celui de la thèse,
     la phrase sur les colonnes 2 et 3 — le bloc se lit comme une ligne de plus du tableau de la thèse ;
   2 « la phrase, puis le cercle » (RETENUE) : la phrase sur les colonnes 1 et 2, sur l'axe gauche de l'énoncé, le
     cercle au ras de la marge droite, en contrepoids ; au téléphone, la phrase puis le cercle, à droite. */
/* overflow-x: clip — la boîte du Lottie déborde de son vide (19-20 % de chaque côté, repris par les marges négatives pour
   poser le cercle sur la marge) : sans lui, la page défilait de côté (1450 px à 1440, 419 à 390 ; tests/e2e/newsletter.spec.js,
   « aucune page ne déborde »). `clip` et non `hidden` : pas de conteneur de défilement, l'axe vertical reste libre. */
.s-why{margin-top:clamp(72px,8vw,120px);overflow-x:clip}
.s-why-l{margin:0 0 28px;font:400 12px/1 var(--eq-font-label);letter-spacing:.2em;text-transform:uppercase;color:var(--eq-accent-texte)}
.s-why-c{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:center;border-top:1px solid var(--eq-filet)}
.s-why-p{max-width:19em;margin:0;font:300 clamp(26px,2.9vw,42px)/1.22 var(--eq-font-titre);letter-spacing:-.02em;
  word-spacing:calc(var(--eq-titre-mots) + .02em);text-wrap:balance}
/* la boîte du Lottie : 400 px à 1440 (le cercle : 248 ; le dessin, axe compris : 62 % × 72 % de la boîte), à l'échelle
   de la colonne ; le vide du haut et du bas de la boîte (14 % chacun) est repris, pour que le dessin soit à --s-why-air
   des filets — sinon la ligne faisait 480 px de haut pour un dessin de 290 */
.s-why{--s-why-air:clamp(32px,3.4vw,48px)}
.s-why .s-lottie--about{--s-about-l:clamp(220px,28vw,400px);width:var(--s-about-l);height:auto;aspect-ratio:1;
  margin-block:calc(var(--s-why-air) - var(--s-about-l) * .14)}
/* 1 · la ligne de la thèse */
.s-why--1 .s-lottie--about{grid-column:1;margin-left:calc(var(--s-about-l) * -.19)}
.s-why--1 .s-why-p{grid-column:2 / span 2;align-self:stretch;display:flex;align-items:center;padding:var(--s-why-air) 0 var(--s-why-air) 40px;border-left:1px solid var(--eq-filet)}
/* 2 · la phrase, puis le cercle */
.s-why--2 .s-why-p{grid-column:1 / span 2;grid-row:1;padding-right:40px;font-size:clamp(28px,3vw,44px)}
.s-why--2 .s-lottie--about{grid-column:3;grid-row:1;justify-self:end;margin-right:calc(var(--s-about-l) * -.2)}
.s-lottie{width:150px;height:150px;mix-blend-mode:difference}
.s-lottie svg{display:block}
/* Les traits des Lottie font 1 unité dans un cadre de 1080 : affichés à 150–300 px, ils tombaient à 0,15–0,3 px, flous et
   gris (Alex, 26/10 : « en mauvaise qualité »). Ils gardent désormais 1 px à l'écran, quelle que soit la taille. */
.s-lottie svg :is(path,ellipse,circle,rect,line,polyline){vector-effect:non-scaling-stroke}
html[data-theme=clair] .s-lottie{filter:invert(1);mix-blend-mode:normal}
/* La barre et le pied SUIVENT le thème sur eqnx.vc (Alex, 26/10 : « l'interrupteur change la couleur du menu aussi » →
   barre claire en mode clair). Le portail et Galaxy, qui n'ont pas d'interrupteur, gardent la barre noire. On ne
   redéfinit aucune classe .eq-* : on change seulement les jetons que le kit leur donne, sous html.eq-clair. */
html.eq-clair .eq-nav,html.eq-clair .eq-foot{
  --eq-noir:var(--eq-papier);--eq-filet-barre:#0A09081F;--eq-filet-noir:#0A090833;--eq-barre-repos:#4D4A45;--eq-barre-actif:var(--eq-encre);
  --eq-pied-titre:#77736C;--eq-pied-texte:#4D4A45;--eq-pied-filet:#0A090824;
  --eq-fond:var(--eq-papier);--eq-texte:var(--eq-encre);--eq-texte-2:#4D4A45;--eq-texte-3:#77736C;--eq-filet:#0A090824;--eq-accent-texte:var(--eq-orange-encre)}
html.eq-clair .eq-foot,html.eq-clair .eq-foot-l>a{color:var(--eq-encre)}
html.eq-clair .eq-foot-l>a:hover{color:var(--eq-orange-encre)}
html.eq-clair .eq-foot{border-top:1px solid #0A09081F}
.eq-nav,.eq-foot{transition:background-color .5s var(--eq-courbe),color .5s var(--eq-courbe),border-color .5s var(--eq-courbe)}

.s-bloc{margin-top:clamp(80px,8.5vw,128px)}
.s-bloc-l{margin:0 0 28px;font:400 12px/1 var(--eq-font-label);letter-spacing:.2em;text-transform:uppercase;color:var(--eq-texte-2)}
/* la thèse : trois blocs (SiteThesis) — les secteurs sont juste au-dessus, dans les verticales */
.s-th{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin:0;padding:0;border-top:1px solid var(--eq-filet)}
.s-th li{padding:32px 40px 36px 0}
.s-th li+li{padding-left:40px;border-left:1px solid var(--eq-filet)}
.s-n{font:400 12px/1 var(--eq-font-label);letter-spacing:.2em;color:var(--s-t3);transition:color .3s var(--eq-courbe)}
.s-th li:hover .s-n{color:var(--eq-accent-texte)}
.s-th h4{margin:20px 0 14px;font:300 clamp(22px,1.8vw,28px)/1.12 var(--eq-font-titre);letter-spacing:-.02em;word-spacing:calc(var(--eq-titre-mots) + .02em);text-wrap:balance}
.s-th p{margin:0;color:var(--eq-texte-2);font-size:16px;line-height:1.55;text-wrap:pretty}

.s-vert{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin:0;padding:0;border-top:1px solid var(--eq-filet)}
.s-v{display:grid;justify-items:center;align-content:start;gap:18px;padding:48px 20px 40px;text-align:center;border-right:1px solid var(--eq-filet)}
.s-v:last-child{border-right:0}
.s-v p{margin:0}
.s-v .s-lottie{margin-bottom:12px}
.s-v-n{display:flex;align-items:center;gap:12px;font:400 15px/1 var(--eq-font-label);letter-spacing:.28em;text-transform:uppercase;white-space:nowrap}
.s-v-n b{flex:none;width:7px;height:7px;border-radius:50%;background:var(--eq-texte-2);transition:background-color .3s var(--eq-courbe)}
.s-v:hover .s-v-n b{background:var(--eq-orange)}
.s-v-t{color:var(--eq-texte-2);font-size:16px;line-height:1.45;text-wrap:balance}

/* ── 7. Section 02 · Portfolio : nom, zone, flèche ; badge « Exited » ; aucun chiffre ─────────────────────────────── */
.s-pf-l{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(32px,5vw,80px);margin:0;padding:0}
.s-pf-l li{border-bottom:1px solid var(--eq-filet)}
.s-pf-r{display:grid;grid-template-columns:minmax(0,1fr) auto 24px;gap:20px;align-items:center;padding:22px 0;text-decoration:none}
.s-pf-n{display:flex;align-items:center;gap:12px;min-width:0;transition:transform .5s var(--eq-courbe)}
.s-pf-nom{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font:300 clamp(24px,2vw,32px)/1.15 var(--eq-font-titre);letter-spacing:-.02em;word-spacing:calc(var(--eq-titre-mots) + .02em)}
.s-pf-x{flex:none;padding:4px 8px 3px;border:1px solid currentColor;border-radius:99px;color:var(--eq-accent-texte);font:400 11px/1 var(--eq-font-label);letter-spacing:.16em;text-transform:uppercase}
.s-pf-p{white-space:nowrap;text-align:right;font:400 12px/1 var(--eq-font-label);letter-spacing:.16em;text-transform:uppercase;color:var(--s-t3)}
.s-pf-a{text-align:right;color:var(--s-t3);transition:transform .4s var(--eq-courbe),color .3s var(--eq-courbe)}
a.s-pf-r:hover .s-pf-n{transform:translateX(8px)}
a.s-pf-r:hover .s-pf-a{color:var(--eq-accent-texte);transform:translate(2px,-2px)}
a.s-pf-r:focus-visible{outline-offset:2px}

/* ── 8. Section 03 · Our team : une grille de 4, portraits en noir et blanc, la couleur au survol ──────────────────── */
.s-tm{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(28px,3vw,48px) clamp(16px,2vw,28px);margin:0;padding:0}
.s-tm-c{display:block;text-decoration:none}
.s-ph{position:relative;aspect-ratio:4/5;margin-bottom:18px;overflow:hidden;background:var(--s-ph-fond)}
.s-ph img{width:100%;height:100%;object-fit:cover;object-position:50% 30%;filter:grayscale(1) contrast(1.04);transform:scale(1.02);
  transition:transform .9s var(--eq-courbe),filter .6s var(--eq-courbe)}
.s-ph--carre img{object-position:50% 22%}
.s-ph-ini{position:absolute;inset:0;display:grid;place-items:center;font:100 clamp(48px,5vw,84px)/1 var(--eq-font-titre);letter-spacing:-.04em;color:var(--s-t3)}
.s-tm-c:hover .s-ph img{filter:grayscale(0) contrast(1);transform:scale(1.06)}
.s-tm-n{margin:0;font:300 22px/1.15 var(--eq-font-titre);letter-spacing:-.015em;word-spacing:calc(var(--eq-titre-mots) + .015em)}
.s-tm-r{margin:6px 0 0;font:400 12px/1.4 var(--eq-font-label);letter-spacing:.14em;text-transform:uppercase;color:var(--s-t3);transition:color .3s var(--eq-courbe)}
.s-tm-c:hover .s-tm-r{color:var(--eq-accent-texte)}
.s-tm-in{display:inline-block;margin:10px 0 0;font:400 12px/1 var(--eq-font-label);letter-spacing:.14em;text-transform:uppercase;color:var(--eq-texte-2);text-decoration:none;
  border-bottom:1px solid var(--eq-filet);padding-bottom:3px;transition:color .3s var(--eq-courbe),border-color .3s var(--eq-courbe)}
.s-tm-in:hover{color:var(--eq-accent-texte);border-color:var(--eq-orange)}
.s-tm-in:focus-visible{outline:2px solid var(--eq-orange);outline-offset:3px}

/* ── 9. Le contact : deux boutons du kit, centrés ; plus de demi-sphère ──────────────────────────────────────────── */
.s-cta{margin-top:clamp(100px,12vw,180px);padding:clamp(100px,12vw,180px) var(--eq-marge);text-align:center;border-top:1px solid var(--eq-filet)}
.s-cta-t{margin:0;font:300 clamp(40px,5vw,80px)/1 var(--eq-font-titre);letter-spacing:-.04em;word-spacing:calc(var(--eq-titre-mots) + .04em);text-wrap:balance}
.s-cta-b{display:flex;flex-wrap:wrap;justify-content:center;gap:14px;margin-top:48px}

/* ── 10. Le champ newsletter : le kit (commun/_eq_news.html.twig, la 4e colonne du pied ; sa note : .eq-news-note) ──── */

/* ── 11. Les pages légales : le gabarit commun (06-PAGES-LEGALES.md) ─────────────────────────────────────────────── */
.s-legal{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:clamp(40px,6vw,96px);max-width:var(--eq-max);margin:0 auto;
  padding:calc(var(--eq-barre-h) + clamp(48px,7vw,104px)) var(--eq-marge) clamp(96px,10vw,160px)}
.s-legal-toc{position:sticky;top:calc(var(--eq-barre-h) + 48px);align-self:start;padding-top:12px}
.s-legal-toc-t{margin:0 0 18px;font:400 12px/1 var(--eq-font-label);letter-spacing:.18em;text-transform:uppercase;color:var(--eq-texte-2)}
.s-legal-toc ol{list-style:none;display:grid;gap:12px;margin:0;padding:0;border-left:1px solid var(--eq-filet)}
.s-legal-toc a{display:block;margin-left:-1px;padding:2px 0 2px 16px;border-left:1px solid transparent;font:400 12px/1.4 var(--eq-font-label);letter-spacing:.14em;
  text-transform:uppercase;text-decoration:none;color:var(--s-t3);transition:color .3s var(--eq-courbe),border-color .3s var(--eq-courbe)}
.s-legal-toc a:hover{color:var(--eq-texte)}
.s-legal-toc a[aria-current]{color:var(--eq-accent-texte);border-left-color:var(--eq-orange)}
.s-legal-c{grid-column:2;min-width:0;max-width:68ch}
.s-legal-h1{margin:0 0 32px;font:300 clamp(44px,6vw,88px)/1 var(--eq-font-titre);letter-spacing:-.04em;word-spacing:calc(var(--eq-titre-mots) + .04em);text-wrap:balance}
.s-legal-texte{font-size:17px;line-height:1.6}
.s-legal-texte p,.s-legal-texte ul{margin:0 0 1.1em}
.s-legal-texte h2{margin:56px 0 16px;font:300 32px/1.15 var(--eq-font-titre);letter-spacing:-.02em;word-spacing:calc(var(--eq-titre-mots) + .02em);scroll-margin-top:calc(var(--eq-barre-h) + 32px)}
.s-legal-texte ul{list-style:none;padding:0}
.s-legal-texte li{position:relative;margin:0 0 .55em;padding-left:22px}
.s-legal-texte li::before{content:"";position:absolute;left:0;top:.8em;width:9px;height:1px;background:var(--eq-texte-2)}
.s-legal-texte a{text-decoration:underline;text-decoration-color:var(--eq-filet);text-decoration-thickness:1px;text-underline-offset:.22em;transition:color .3s var(--eq-courbe),text-decoration-color .3s var(--eq-courbe)}
.s-legal-texte a:hover{color:var(--eq-accent-texte);text-decoration-color:currentColor}
.s-legal-maj{margin-top:40px;color:var(--eq-texte-2);font-size:15px}
.s-legal-voir{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 24px;margin-top:56px;padding-top:24px;border-top:1px solid var(--eq-filet)}
.s-legal-voir span{font:400 12px/1 var(--eq-font-label);letter-spacing:.18em;text-transform:uppercase;color:var(--eq-texte-2)}
.s-legal-voir a{font-size:16px;text-decoration:none;transition:color .3s var(--eq-courbe)}
.s-legal-voir a:hover{color:var(--eq-accent-texte)}

/* ── 12. La 404 : la couronne, « ( 404 ) Page not found » ─────────────────────────────────────────────────────────── */
.s-404{min-height:calc(100svh - 120px);padding-bottom:96px}
.s-404-c{display:grid;justify-items:center;gap:28px;text-align:center}
.s-h1.s-h1--404{max-width:none;margin:0;font-size:clamp(44px,6vw,96px)}

/* ── 13. Les largeurs (les seuils du pack : 1100, 900, 640, 520) ─────────────────────────────────────────────────── */
@media (max-width:1100px){
  .s-legal{grid-template-columns:minmax(0,1fr)}
  .s-legal-toc{display:none}
  .s-legal-c{grid-column:1;justify-self:center;width:100%}
}
@media (max-width:900px){
  .s-th{grid-template-columns:minmax(0,1fr)}
  .s-th li,.s-th li+li{display:grid;grid-template-columns:56px minmax(0,1fr);column-gap:24px;padding:28px 0 32px;border-left:0}
  .s-th li+li{border-top:1px solid var(--eq-filet)}
  .s-th .s-n{grid-row:span 2;padding-top:.6em}
  .s-th h4{margin-top:0}
  .s-th p{max-width:62ch}
  .s-vert{grid-template-columns:repeat(2,minmax(0,1fr))}
  .s-v:nth-child(2n){border-right:0}
  .s-v:nth-child(-n+2){border-bottom:1px solid var(--eq-filet)}
  .s-pf-l{grid-template-columns:minmax(0,1fr)}
  .s-tm{grid-template-columns:repeat(3,minmax(0,1fr))}
  .s-scroll{visibility:hidden}
}
@media (max-width:640px){
  /* le hero mobile garde tout l'écran (26/10/2026, vague 2) : l'interrupteur collant s'y pose sur la ligne du pied du hero,
     au lieu de tomber sur l'énoncé de la section suivante dès le premier écran */
  .s-hero{min-height:max(100svh,560px);padding-bottom:112px}
  .s-toggle{transform:translateY(calc(-100% - 20px))}
  .s-ring{top:46%;width:min(94vw,560px)}
  /* « Why EQNX? » au téléphone : une colonne — le libellé, le filet, le cercle (au ras de la marge, ou à droite en 2),
     la phrase à 26 px sous lui */
  .s-why-c{grid-template-columns:minmax(0,1fr)}
  .s-why{--s-why-air:24px}
  .s-why .s-lottie--about{--s-about-l:240px}
  .s-why--1 .s-lottie--about{margin-left:calc(var(--s-about-l) * -.19)}
  .s-why--1 .s-why-p,.s-why--2 .s-why-p{grid-column:1;grid-row:auto;padding:0 0 8px;border-left:0;font-size:26px}
  .s-why--2 .s-why-p{padding-top:var(--s-why-air)}
  .s-why--2 .s-lottie--about{grid-column:1;grid-row:2;justify-self:end;margin-right:calc(var(--s-about-l) * -.2)}
  .s-th li,.s-th li+li{display:block;padding:24px 0 28px}
  .s-th h4{margin-top:18px}
  .s-tm{grid-template-columns:repeat(2,minmax(0,1fr))}
  .s-vert{grid-template-columns:minmax(0,1fr)}
  .s-v,.s-v:nth-child(2n){border-right:0;border-bottom:1px solid var(--eq-filet)}
  .s-v:last-child{border-bottom:0}
  .s-pf-r{gap:14px;padding:18px 0}
  .s-tm-n{font-size:19px}
  .s-cta-b .eq-btn{width:100%}
}
@media (max-width:520px){
  .s-pf-r{grid-template-columns:minmax(0,1fr) auto}
  .s-pf-a{display:none}
}

/* ── 14. prefers-reduced-motion : rien ne bouge (site.js ne lance ni intro, ni découpage, ni apparition) ──────────── */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .s-ring,.s-scroll span{animation:none}
  .s-page,.s-ph img,.s-pf-n,.s-pf-a,.s-toggle span,.s-tm-r,.s-tm-in,.s-n,.s-v-n b{transition:none}
  .s-tm-c:hover .s-ph img{transform:scale(1.02)}
  a.s-pf-r:hover .s-pf-n{transform:none}
}

/* ═══ fin v3 ═══ */

/* 27/10/2026 (Alex, au téléphone : « on ne comprend pas le lien vers LP portal ») — sous 560 px, le bouton du portail
   dit son nom : « LP Portal ↗ » (« Portail LP » en français) au lieu de la sphère seule ; la sphère cède sa place, et la
   barre resserre ses écarts pour tenir dans 375 px (le logo, EN | FR, le bouton). Au-dessus de 560 px : inchangé (le
   kit, eqnx-commun.css : la sphère et la flèche jusqu'à 1100 px). Galaxy n'est pas touché (portée .s-page). */
@media (max-width:560px){
  .s-page .eq-nav{gap:12px}
  .s-page .eq-portal{padding-left:12px;gap:8px}
  .s-page .eq-portal .eq-orb{display:none}
  .s-page .eq-portal .eq-portal-l{display:inline}
}
@media (max-width:360px){
  .s-page .eq-portal .eq-portal-l{font-size:12px;letter-spacing:.04em}
}

/* 27/10/2026 (Alex, au téléphone : « l'animation est positionnée un petit peu bizarrement sur la droite » ; « sur la partie
   Homage, la sphère est un petit peu trop vers le haut, et on voit le titre du dessous About EQNX » ; « sans toucher à la
   version desk ») — sous 640 px seulement :
   · le hero : la sphère ET le titre centrés dans l'écran SOUS la barre (avant : la couronne à 46 % de la hauteur, le titre
     remonté de 6vh et un bas de 112 px — le tout ~60 px trop haut sur un iPhone) ; la section suivante descend de 40 px, son
     libellé ne paraît plus au moindre défilement ;
   · « Why EQNX? » : le cercle animé centré sous la phrase, à 200 px (avant : collé au bord droit et débordant, la
     composition du bureau). Galaxy, vérifié au même format, n'a pas ces défauts (sa sphère est en grille, centrée). */
@media (max-width:640px){
  .s-hero{padding-bottom:48px}
  .s-h1{margin-bottom:0}
  .s-ring{top:calc(50% + var(--eq-barre-h) / 2)}
  .s-hero + *{margin-top:40px}
  .s-why .s-lottie--about{--s-about-l:200px}
  .s-why--1 .s-lottie--about,.s-why--2 .s-lottie--about{justify-self:center;margin-left:0;margin-right:0}
}