/* ═══════════════════════════════════════════════════════════════════════════════════════════════════════════════════
   EQNX · LE SYSTÈME COMMUN AUX TROIS SURFACES — eqnx.vc, Galaxy I, le portail LP (prototype v3, 26/10/2026, proto/v3)
   ═══════════════════════════════════════════════════════════════════════════════════════════════════════════════════
   Ce fichier EST le système commun (pack Claude Design, 02-SYSTEME-COMMUN.md et 09-POLICES.md, corrigés par les
   décisions d'Alex du 26/10/2026, proto-v3/DECISIONS-ALEX.md). Une surface le charge AVANT sa propre feuille, puis
   n'y ajoute que son bloc d'harmonisation : elle ne redéfinit jamais une classe .eq-* (sinon les cinq composants ne
   seraient plus identiques au pixel près — la mesure tests/proto-v3/mesure-commun.spec.js le dirait).

   UN SEUL EMPLACEMENT : app/assets/commun/ (fichiers, polices, icônes).
     · eqnx.vc et le portail Twig le lisent par AssetMapper : {{ asset('commun/eqnx-commun.css') }} (empreinte dans
       l'adresse ; les url() ci-dessous sont réécrites par AssetMapper, polices comprises) ;
     · Galaxy (statique, racine galaxy/) le lit par le lien symbolique galaxy/commun → ../app/assets/commun :
       /commun/eqnx-commun.css. Aucune copie ; `git archive` (eqnx-deployer) garde le lien tel quel.
   Pas de !important ici (règle 3 du pack : jamais sur eqnx.vc) ; une surface qui doit écraser un existant le fait dans
   SA feuille d'harmonisation. Aucune ressource externe : polices auto-hébergées, CSP 'self' partout.
   Mode d'emploi complet : app/templates/commun/LISEZ-MOI.md. Démonstration : /dev/kit-v3.php.
   ═══════════════════════════════════════════════════════════════════════════════════════════════════════════════════ */

/* ── 1. LES POLICES (déclarées UNE fois, ici ; licence web Neue Haas : usage EQNX seulement) ─────────────────────────
   NHG = Neue Haas Grotesk Display 100 · 300 · 400, et son gras 500–900 = TeX Gyre Heros Bold (libre, plus bas) — jamais
   de faux gras. Ses chiffres sont PROPORTIONNELS (aucune fonction tnum dans les fichiers, vérifié le 26/10/2026) : une
   colonne de nombres ne s'aligne pas en NHG. SG = Space Grotesk variable 300–700, qui a tnum (chiffres tabulaires).
   Plex Mono = IBM Plex Mono 400 · 500 (la variante E) : les fichiers du portail, lp/fonts/, LUS PAR DES LIENS
   SYMBOLIQUES (app/assets/commun/fonts/plex-mono/*.woff2 → ../../../../../lp/fonts/) — aucune copie qui diverge ; Galaxy
   les sert par /commun/, eqnx.vc et le portail par AssetMapper. Même découpage latin / latin-ext que lp/fonts.css.
   Ni NHG, ni SG, ni Plex Mono n'ont de glyphes arabes (Galaxy ar.html : la police arabe du système, QUESTIONS.md). */
@font-face{font-family:"NHG";src:url("fonts/neue-haas-grotesk-display-thin-KRmlvSN.woff") format("woff");font-weight:100;font-style:normal;font-display:swap}
@font-face{font-family:"NHG";src:url("fonts/neue-haas-grotesk-display-light-1dRzH2y.woff") format("woff");font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:"NHG";src:url("fonts/neue-haas-grotesk-display-roman-uuPtneh.woff") format("woff");font-weight:400;font-style:normal;font-display:swap}
/* le gras de « NHG » (Alex, 26/10 : la graisse 65 Medium de Commercial Type est trop chère, « trouve une solution open source ») :
   TeX Gyre Heros Bold, libre (GUST Font License, CTAN), de la même lignée Helvetica. Déclaré sous le même nom de famille,
   il sert tout seul chaque `font-weight` 500-900 d'un texte en NHG, sans classe ni changement des surfaces. */
@font-face{font-family:"NHG";src:url("fonts/tex-gyre-heros/texgyreheros-bold-KfLrF7p.otf") format("opentype");font-weight:500 900;font-style:normal;font-display:swap}
@font-face{font-family:"SG";src:url("fonts/space-grotesk-E2-i95I.woff") format("woff");font-weight:300 700;font-style:normal;font-display:swap}
@font-face{font-family:"Plex Mono";src:url("fonts/plex-mono/IBMPlexMono-400-latin--Imvmox.woff2") format("woff2");font-weight:300 400;font-style:normal;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Plex Mono";src:url("fonts/plex-mono/IBMPlexMono-400-latin-ext-bsYzT0_.woff2") format("woff2");font-weight:300 400;font-style:normal;font-display:swap;
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Plex Mono";src:url("fonts/plex-mono/IBMPlexMono-500-latin-J35NZ7_.woff2") format("woff2");font-weight:500 700;font-style:normal;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Plex Mono";src:url("fonts/plex-mono/IBMPlexMono-500-latin-ext-XLxX8eM.woff2") format("woff2");font-weight:500 700;font-style:normal;font-display:swap;
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

/* L'ARABE (26/10/2026 — QCM d'Alex : « la règle :lang(ar) dans le kit ») : IBM Plex Sans Arabic (Light, Regular, Medium ;
   licence OFL : fonts/plex-sans-arabic/LICENSE-OFL.txt), déclarée DANS LES FAMILLES DU KIT (NHG, SG, Plex Mono) pour les seuls
   caractères arabes (unicode-range) : une page arabe garde ses noms latins en NHG et ses lettres arabes en Plex Sans Arabic,
   et une page sans arabe ne télécharge rien. ⚠ LES MÊMES DESCRIPTEURS DE GRAISSE que les faces latines (NHG 100 · 300 · 400 ;
   SG 300 700 ; Plex Mono 300 400 · 500 700) : une face arabe « 100 300 » l'emportait sur la face latine « 300 » dans
   l'appariement, et un « a » en NHG 300 tombait sur la police de repli (mesuré le 26/10/2026 sur Galaxy ar.html). Jusque-là
   dans galaxy/galaxy-arabe.css, retirée. */
@font-face{font-family:"NHG";src:url("fonts/plex-sans-arabic/IBMPlexSansArabic-Light-1vFFsD5.woff2") format("woff2");font-weight:100;font-style:normal;font-display:swap;
  unicode-range:U+0600-06FF,U+0750-077F,U+0870-08FF,U+FB50-FDFF,U+FE70-FEFF,U+200C-200F}
@font-face{font-family:"NHG";src:url("fonts/plex-sans-arabic/IBMPlexSansArabic-Light-1vFFsD5.woff2") format("woff2");font-weight:300;font-style:normal;font-display:swap;
  unicode-range:U+0600-06FF,U+0750-077F,U+0870-08FF,U+FB50-FDFF,U+FE70-FEFF,U+200C-200F}
@font-face{font-family:"NHG";src:url("fonts/plex-sans-arabic/IBMPlexSansArabic-Regular-QyVSx3D.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap;
  unicode-range:U+0600-06FF,U+0750-077F,U+0870-08FF,U+FB50-FDFF,U+FE70-FEFF,U+200C-200F}
@font-face{font-family:"SG";src:url("fonts/plex-sans-arabic/IBMPlexSansArabic-Regular-QyVSx3D.woff2") format("woff2");font-weight:300 700;font-style:normal;font-display:swap;
  unicode-range:U+0600-06FF,U+0750-077F,U+0870-08FF,U+FB50-FDFF,U+FE70-FEFF,U+200C-200F}
@font-face{font-family:"Plex Mono";src:url("fonts/plex-sans-arabic/IBMPlexSansArabic-Regular-QyVSx3D.woff2") format("woff2");font-weight:300 400;font-style:normal;font-display:swap;
  unicode-range:U+0600-06FF,U+0750-077F,U+0870-08FF,U+FB50-FDFF,U+FE70-FEFF,U+200C-200F}
@font-face{font-family:"Plex Mono";src:url("fonts/plex-sans-arabic/IBMPlexSansArabic-Medium-E-pwz0F.woff2") format("woff2");font-weight:500 700;font-style:normal;font-display:swap;
  unicode-range:U+0600-06FF,U+0750-077F,U+0870-08FF,U+FB50-FDFF,U+FE70-FEFF,U+200C-200F}

/* ── 2. LES JETONS ────────────────────────────────────────────────────────────────────────────────────────────────── */
:root{
  /* le noir de la barre et du pied (les 3 surfaces, les 2 thèmes) et ses filets */
  --eq-noir:#0A0908;
  --eq-filet-barre:#1E1C19;
  --eq-filet-noir:#322F29;
  --eq-barre-repos:#ACA698;
  --eq-barre-actif:#FFFFFF;
  /* UN seul orange ; son encre pour le texte orange sur fond clair (5,15:1 sur le papier) */
  --eq-orange:#E8632B;
  --eq-orange-encre:#B8451A;
  /* le pied. ⚠ CONTRASTE AA (26/10/2026) : le pack donnait #6B6B6B aux titres de colonne et au © — 3,73:1 sur #0A0908,
     sous le seuil AA (4,5:1) pour du texte de 12 px. #787878 est le gris neutre le plus proche qui l'atteint (4,51:1) :
     l'allure ne change pas (un cran de luminance), l'écart avec le pack est noté dans proto-v3/QUESTIONS.md. */
  --eq-pied-titre:#787878;
  --eq-pied-texte:#A8A8A8;
  --eq-pied-filet:#FFFFFF24;
  /* UN papier clair et UNE encre pour les 3 sites (choix confirmé par Alex le 26/10/2026) */
  --eq-papier:#FBFAF7;
  --eq-encre:#0A0908;
  /* formes et mouvements */
  --eq-rayon:3px;
  --eq-marge:clamp(20px,5vw,80px);
  --eq-max:1440px;
  --eq-barre-h:64px;
  --eq-courbe:cubic-bezier(.22,1,.36,1);

  /* L'ESPACE ENTRE LES MOTS D'UN TITRE NHG (26/10/2026). L'espace de Neue Haas Grotesk Display est très étroite : 0,150 em
     (300), 0,159 (400), 0,161 (100), mesurées dans les fichiers — Space Grotesk : 0,258 ; une Helvetica : ~0,28. Et
     l'interlettrage négatif des titres la réduit encore (l'interlettrage s'ajoute aussi après l'espace) : à -0,045 em, il
     restait 0,105 em — « HELLO,JULIEN », « Backinglife », « OPENFORSUBSCRIPTION » (même à interlettrage nul). Un titre
     NHG rend donc à l'espace ce que la police et son interlettrage lui retirent, pour qu'elle se lise à ~0,25 em :
        letter-spacing:<l>;  word-spacing:calc(var(--eq-titre-mots) - <l>)        (ex. -.045em → +.145em)
     En capitales, JAMAIS d'interlettrage négatif (il colle les fûts) : letter-spacing:var(--eq-titre-caps), et
        word-spacing:calc(var(--eq-titre-mots) - var(--eq-titre-caps)).
     ⚠ en em, et posé sur la règle du titre elle-même : word-spacing hérite d'une longueur déjà calculée (0,1 em d'un
     <body> à 16 px resterait 1,6 px dans un titre de 106 px). La mesure (mesure-commun.spec.js, « titres NHG ») vérifie
     chaque titre NHG de la page : espace effective = 0,15 + interlettrage + word-spacing ≥ 0,22 em.
     Le TEXTE courant (NHG dans les trois variantes A, D, E) reçoit +0,08 em, posé sur <body> par ce fichier (§3 bis). */
  --eq-titre-mots:.1em;
  --eq-titre-caps:.02em;

  /* LES COULEURS DES CATÉGORIES (Alex, 26/10/2026, après la comparaison avec les decks : « on garde la rampe actuelle du
     portail, partout » — l'exec summary du 24/10 l'emploie déjà). La rampe de lp/eqnx-lp.css (--ramp-1…7), exposée UNE
     fois ici : le portail la consomme (eqnx-harmonisation.css, --ramp-n: var(--eq-cat-n)), Galaxy aussi (--gx-s1…5).
     Puis le branchement des catégories, celui du portail (eqnx-lp.css, --sector-*, --geo-*). La palette « accordée à la
     marque » du prototype est retirée (release du 26/10/2026). */
  --eq-cat-1:#E8632B;
  --eq-cat-2:#4A5C6E;
  --eq-cat-3:#4F7A5B;
  --eq-cat-4:#A88B4A;
  --eq-cat-5:#A44C3B;
  --eq-cat-6:#8A9BAA;
  --eq-cat-7:#CAC5B8;
  --eq-cat-healthtech:var(--eq-cat-3);
  --eq-cat-ai:var(--eq-cat-1);
  --eq-cat-deeptech:var(--eq-cat-2);
  --eq-cat-fintech:var(--eq-cat-4);
  --eq-cat-opportunistic:var(--eq-cat-6);
  --eq-cat-europe:var(--eq-cat-2);
  --eq-cat-us:var(--eq-cat-6);
  --eq-cat-me:var(--eq-cat-7);

  /* les familles (piles de secours de 09-POLICES.md) */
  --eq-nhg:"NHG","Helvetica Neue",Arial,sans-serif;
  --eq-sg:"SG","Space Grotesk",system-ui,sans-serif;
  --eq-mono:"Plex Mono","IBM Plex Mono",ui-monospace,Menlo,monospace;
}

/* ── 3. LES POLICES : LA VARIANTE E, EN DUR (release du 26/10/2026 ; A et D gardées pour la page du kit seulement) ─────────────────
   Alex, 26/10 au matin : la variante B (Plex au portail, Inter à Galaxy) est ÉCARTÉE ; on compare A, D et E, toutes avec
   des polices déjà dans le dépôt ; puis (même jour, après la comparaison avec les decks récents) E devient le DÉFAUT —
   A et D restent derrière l'interrupteur. Une surface ne nomme JAMAIS une famille : elle consomme ces cinq variables.
                                                                                      A        D        E
     --eq-font-titre    titres, énoncés, noms, grands chiffres d'affichage          NHG      NHG      NHG
     --eq-font-texte    les phrases qu'on lit (paragraphes, notes, liens du pied)   NHG      NHG      NHG
     --eq-font-label    menus, langue, sur-titres, boutons, © (en capitales)        SG       SG       Plex Mono
     --eq-font-ui       l'interface : formulaires, cellules, petits textes d'écran   NHG      SG       NHG
     --eq-font-chiffres colonnes de nombres, tableaux (+ font-variant-numeric:var(--eq-chiffres))  SG  SG  Plex Mono
   A « NHG + Space Grotesk pour les libellés » ; D « Space Grotesk pour l'interface » ; E « Plex Mono pour les libellés ».
   Depuis la release du 26/10/2026, plus aucun attribut data-eq-fonts sur <html> : le :root (E) vaut partout. Seule la
   page du kit (/app/kit-v3, le poste) pose data-eq-fonts sur un bloc, pour comparer les variantes côte à côte. */
:root{   /* le défaut : E (Alex, 26/10). ⚠ AVANT les trois attributs : à spécificité égale, le dernier gagne */
  --eq-font-titre:var(--eq-nhg);
  --eq-font-texte:var(--eq-nhg);
  --eq-font-label:var(--eq-mono);
  --eq-font-ui:var(--eq-nhg);
  --eq-font-chiffres:var(--eq-mono);
  --eq-chiffres:tabular-nums;
}
[data-eq-fonts=a]{
  --eq-font-titre:var(--eq-nhg);
  --eq-font-texte:var(--eq-nhg);
  --eq-font-label:var(--eq-sg);
  --eq-font-ui:var(--eq-nhg);
  --eq-font-chiffres:var(--eq-sg);
  --eq-chiffres:tabular-nums;
}
[data-eq-fonts=d]{
  --eq-font-titre:var(--eq-nhg);
  --eq-font-texte:var(--eq-nhg);
  --eq-font-label:var(--eq-sg);
  --eq-font-ui:var(--eq-sg);
  --eq-font-chiffres:var(--eq-sg);
  --eq-chiffres:tabular-nums;
}
[data-eq-fonts=e]{
  --eq-font-titre:var(--eq-nhg);
  --eq-font-texte:var(--eq-nhg);
  --eq-font-label:var(--eq-mono);
  --eq-font-ui:var(--eq-nhg);
  --eq-font-chiffres:var(--eq-mono);
  --eq-chiffres:tabular-nums;
}
/* §3 bis — le texte courant est en NHG dans les trois variantes : son espace (0,15 em) est rendue lisible ici, une fois,
   pour les trois surfaces (+0,08 em → ~0,23 em). Les titres posent la leur (--eq-titre-mots) ; la barre revient à la
   normale (ses libellés sont en capitales espacées). */
body{word-spacing:.08em}
.eq-nav{word-spacing:normal}

/* ── 4. LES DEUX FONDS : sombre (eqnx.vc par défaut, l'accueil Galaxy) et clair (le papier commun) ────────────────────
   .eq-sombre / .eq-clair se posent sur <html> ou sur un bloc. Les boutons et la langue « sur fond clair » les lisent.
   ⚠ CONTRASTE AA (26/10/2026) : --eq-texte-3 passe de #6B6B6B (3,9:1 sur #000) à #787878 (4,5:1), et sur le papier de
   #86827A (3,67:1) à #77736C (4,52:1), la même teinte chaude un cran plus sombre (QUESTIONS.md, Kit commun n°5). */
:root,.eq-sombre{
  --eq-fond:#000;
  --eq-texte:#FFFFFF;
  --eq-texte-2:#A8A8A8;
  --eq-texte-3:#787878;
  --eq-filet:#FFFFFF24;
  --eq-accent-texte:var(--eq-orange);
}
.eq-clair{
  --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);
}
.eq-sombre,.eq-clair{background:var(--eq-fond);color:var(--eq-texte)}
/* la barre et le pied restent noirs dans les deux thèmes, sur les 3 surfaces : ils portent leurs propres jetons sombres,
   pour qu'une page claire (.eq-clair sur <html>) ne change pas un pixel dedans */
.eq-nav,.eq-foot{--eq-fond:#000;--eq-texte:#FFFFFF;--eq-texte-2:#A8A8A8;--eq-texte-3:#787878;--eq-filet:#FFFFFF24;--eq-accent-texte:var(--eq-orange)}

/* ── 5. COMPOSANT 1 · LA BARRE (64 px, #0A0908, logo à x = 72 px à 1440 px) ──────────────────────────────────────────
   Trois colonnes : le logo, le menu (1fr), la zone de droite. La zone de droite est TOUJOURS dans la 3e colonne : quand
   le menu est caché (sous 900 px, ou replié), elle garde le bord droit au ras de la marge (26/10/2026 : elle tombait
   dans la colonne 1fr et s'arrêtait 40 px — l'écart de la colonne vide — avant la marge, sur les 3 surfaces).
   LE REPLI DU MENU : sous 900 px (CSS), et .eq-nav--replie (posée par eqnx-commun.js quand le menu ne tient pas sur sa
   ligne, ou sous la largeur data-eq-replie-sous) ; la surface montre alors SON relais (le hamburger de Galaxy, la barre
   d'onglets du bas du portail) par .eq-nav--replie, jamais en redéfinissant .eq-nav-menu. */
.eq-nav{position:fixed;inset:0 0 auto;z-index:50;box-sizing:border-box;height:var(--eq-barre-h);margin:0;
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:40px;padding:0 var(--eq-marge);
  background:var(--eq-noir);border-bottom:1px solid var(--eq-filet-barre);color:var(--eq-barre-actif);
  font:400 12px/1 var(--eq-font-label);-webkit-font-smoothing:antialiased}
.eq-nav *,.eq-nav *::before,.eq-nav *::after{box-sizing:border-box}
.eq-nav-logo{grid-column:1;display:flex;align-items:center;color:var(--eq-barre-actif);text-decoration:none}
.eq-nav-menu{grid-column:2;display:flex;align-self:stretch;align-items:stretch;gap:28px;margin:0;padding:0;list-style:none;min-width:0}
.eq-nav-menu a{position:relative;display:flex;align-items:center;font:400 12px/1 var(--eq-font-label);letter-spacing:.2em;
  text-transform:uppercase;white-space:nowrap;color:var(--eq-barre-repos);text-decoration:none;transition:color .3s var(--eq-courbe)}
/* le trait orange de 2 px, au ras du bas de la barre (il couvre le filet), qui s'étire de 0 à 100 % en 0,4 s */
.eq-nav-menu a::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--eq-orange);
  transform:scaleX(0);transition:transform .4s var(--eq-courbe)}
.eq-nav-menu a:hover,.eq-nav-menu a[aria-current]:not([aria-current=false]),.eq-nav-menu a.eq-actif{color:var(--eq-barre-actif)}
.eq-nav-menu a:hover::after,.eq-nav-menu a[aria-current]:not([aria-current=false])::after,.eq-nav-menu a.eq-actif::after{transform:scaleX(1)}
.eq-nav-r{grid-column:3;justify-self:end;display:flex;align-items:center;gap:22px}
.eq-nav--replie .eq-nav-menu{display:none}

/* ── 6. COMPOSANT 2 · LE LOGO (20 px de haut dans la barre, currentColor) ─────────────────────────────────────────────── */
.eq-logo{display:block;height:20px;width:auto;fill:currentColor;color:inherit;flex:none}
.eq-logo path{fill:currentColor}

/* ── 7. COMPOSANT 3 · LA LANGUE (pilule 3 px ; la langue active blanche, soulignée d'orange) ──────────────────────────
   Un <div> de liens (eqnx.vc, Galaxy) ou un <form> de boutons submit (le portail : la langue est une préférence
   enregistrée, POST — marche sans script). Même rendu. */
.eq-lang{display:inline-flex;align-items:center;gap:10px;margin:0;padding:6px 10px;border:1px solid var(--eq-filet-noir);
  border-radius:var(--eq-rayon);font:400 12px/1 var(--eq-font-label);letter-spacing:.16em;color:var(--eq-barre-repos);white-space:nowrap}
.eq-lang>a,.eq-lang>button{display:block;margin:0;padding:4px 0;border:0;background:none;color:var(--eq-barre-repos);
  font:inherit;letter-spacing:inherit;text-transform:uppercase;text-decoration:none;cursor:pointer;transition:color .3s var(--eq-courbe)}
.eq-lang>a:hover,.eq-lang>button:hover{color:var(--eq-barre-actif)}
.eq-lang>[aria-pressed=true],.eq-lang>[aria-current]:not([aria-current=false]){color:var(--eq-barre-actif);box-shadow:inset 0 -1px 0 var(--eq-orange);cursor:default}
.eq-lang>i{display:block;width:1px;height:10px;background:var(--eq-filet-noir);flex:none}
/* sur le papier (le sélecteur d'une page légale, hors de la barre) — #77736C : AA sur le papier (4,52:1) */
.eq-lang--clair{border-color:#0A090824;color:#77736C}
.eq-lang--clair>a,.eq-lang--clair>button{color:#6B6B6B}
.eq-lang--clair>a:hover,.eq-lang--clair>button:hover,.eq-lang--clair>[aria-pressed=true],.eq-lang--clair>[aria-current]:not([aria-current=false]){color:var(--eq-encre)}
.eq-lang--clair>i{background:#0A090824}

/* ── 8. LE BOUTON « PORTAIL LP » DE LA BARRE (eqnx.vc ; ni Galaxy, décision d'Alex, ni le portail) ───────────────────
   La sphère (.eq-orb, 24 px) : la sphère CSS (un dégradé qui tourne) ; avec eq_portail.video, la vidéo sign-up.mp4 la
   recouvre (object-fit: cover, muette, en boucle). La sphère CSS reste dessous : c'est elle qu'on voit sous
   prefers-reduced-motion (la vidéo est cachée, et eqnx-commun.js la met en pause), ou tant que la vidéo n'est pas chargée. */
.eq-portal{display:inline-flex;align-items:center;gap:10px;padding:9px 16px 9px 9px;border:1px solid var(--eq-filet-noir);
  border-radius:var(--eq-rayon);color:var(--eq-barre-actif);font:400 14px/1 var(--eq-font-label);white-space:nowrap;text-decoration:none;
  transition:border-color .3s var(--eq-courbe),box-shadow .3s var(--eq-courbe)}
.eq-portal:hover{color:var(--eq-barre-actif);border-color:var(--eq-orange);box-shadow:inset 0 0 0 1px var(--eq-orange),0 0 22px -6px var(--eq-orange)}
.eq-orb{position:relative;display:block;flex:none;width:24px;height:24px;overflow:hidden;border-radius:2px;
  background:radial-gradient(circle at 35% 30%,#F4F1EA,#8A857C 55%,#1C1B19);animation:eq-orb 9s linear infinite}
.eq-orb--video{animation:none}
.eq-orb video,.eq-orb img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;pointer-events:none}
@keyframes eq-orb{to{filter:brightness(1.15);transform:rotate(360deg)}}
.eq-arr{display:inline-block;color:var(--eq-texte-3);transition:transform .35s var(--eq-courbe),color .3s var(--eq-courbe)}
.eq-portal:hover .eq-arr{color:var(--eq-orange);transform:translate(2px,-2px)}

/* ── 9. COMPOSANT 4 · LES BOUTONS (le rectangle à 3 px du portail est la référence) ─────────────────────────────────────
   .eq-btn          plein : fond = le texte du fond courant (blanc sur noir, encre sur papier), texte = le fond
   .eq-btn--ghost   fantôme : transparent, filet du fond courant, contour orange au survol
   .eq-btn--ink     plein portail : l'encre orange #B8451A, texte blanc
   Les trois ont un filet de 1 px (transparent pour les pleins) : plein et fantôme ont la MÊME hauteur, 53 px. */
.eq-btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;box-sizing:border-box;margin:0;padding:18px 26px;
  border:1px solid transparent;border-radius:var(--eq-rayon);background:var(--eq-texte);color:var(--eq-fond);
  font:400 15px/1 var(--eq-font-label);letter-spacing:0;word-spacing:normal;text-transform:none;white-space:nowrap;text-decoration:none;cursor:pointer;
  transition:box-shadow .3s var(--eq-courbe),border-color .3s var(--eq-courbe),transform .3s var(--eq-courbe)}
.eq-btn:hover{color:var(--eq-fond);box-shadow:0 0 0 3px var(--eq-fond),0 0 0 4px var(--eq-orange);transform:translateY(-1px)}
.eq-btn .eq-arr{color:inherit}
.eq-btn:hover .eq-arr{transform:translateX(3px)}
.eq-btn--ghost{background:transparent;color:var(--eq-texte);border-color:var(--eq-filet)}
.eq-btn--ghost:hover{color:var(--eq-texte);border-color:var(--eq-orange);box-shadow:none}
.eq-btn--ink{background:var(--eq-orange-encre);color:#FFFFFF}
.eq-btn--ink:hover{color:#FFFFFF}

/* le focus clavier : orange et visible, sur tout ce qui est commun */
/* Chrome peut allumer :focus-visible après un clic de souris sur un lien d'ancre (#contact) : le cadre orange autour
   de « CONTACT » (Alex, 26/10 : « bug du menu »). Le cadre ne s'affiche donc qu'après une touche Tab (html.eq-clavier,
   posé et retiré par eqnx-commun.js) ; à la souris, le lien actif garde seulement son trait orange. */
.eq-nav a:focus,.eq-lang>:focus,.eq-portal:focus,.eq-btn:focus,.eq-foot a:focus{outline:none}
.eq-clavier :is(.eq-nav a,.eq-lang>*,.eq-portal,.eq-btn,.eq-foot a,.eq-foot input,.eq-foot button):focus-visible{
  outline:2px solid var(--eq-orange);outline-offset:3px}

/* ── 10. COMPOSANT 5 · LE PIED, COMPACT (Alex, 26/10 au matin : ~200 px au lieu de ~330) ────────────────────────────────
   Bande noire pleine largeur ; dedans, 1440 px au plus et les marges de la barre. 32 px en haut, liens en 14 px, 32 px
   avant la ligne ©, 20 px en bas : ~220 px à 1440 (quatre lignes de liens). Quatre colonnes égales (à 1440 px, x = 72 / 406 / 740 / 1074) : Navigate · Legal ·
   Contact · l'emplacement de la surface (.eq-foot-c--x : la newsletter d'eqnx.vc et de Galaxy ; vide au portail, il garde sa place, pour que les
   colonnes soient au même endroit partout). Une colonne de liens (.eq-foot-l) reste UNE seule colonne, quel que soit le
   nombre de liens (Alex, 26/10 : la 2e sous-colonne de Galaxy, « News » seul à côté, faisait « bizarre »). RIEN SOUS LE © : la mention de Galaxy (.eq-foot-m) est AU-DESSUS de la ligne ©, qui finit la page.
   Aucune marge extérieure : l'espace au-dessus du pied appartient à la surface. text-align:start : en arabe (dir=rtl),
   tout le pied se lit depuis la droite, en miroir exact. */
.eq-foot{display:block;margin:0;padding:0;border:0;background:var(--eq-noir);color:#FFFFFF;word-spacing:normal;-webkit-font-smoothing:antialiased}
.eq-foot,.eq-foot *{text-align:start}
.eq-foot *,.eq-foot *::before,.eq-foot *::after{box-sizing:border-box}
.eq-foot-in{width:100%;max-width:var(--eq-max);margin:0 auto;padding:32px var(--eq-marge) 20px;box-sizing:border-box}
.eq-foot-g{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px 40px}
.eq-foot-c{display:flex;flex-direction:column;align-items:flex-start;gap:10px;min-width:0;margin:0}
.eq-foot-t,.eq-foot-c h4{margin:0;font:400 12px/1 var(--eq-font-label);letter-spacing:.18em;text-transform:uppercase;color:var(--eq-pied-titre)}
.eq-foot-l{display:grid;grid-auto-flow:row;justify-items:start;gap:2px;max-width:100%}
.eq-foot-l>a,.eq-foot-l>span{font:300 14px/1.4 var(--eq-font-texte);letter-spacing:0;word-spacing:var(--eq-titre-mots);text-transform:none}
.eq-foot-l>a{color:#FFFFFF;text-decoration:none;transition:color .3s var(--eq-courbe)}
.eq-foot-l>a:hover{color:var(--eq-orange)}
.eq-foot-l>span{color:var(--eq-pied-texte)}
/* la mention légale (Galaxy) : au-dessus de la ligne ©, sans capitales */
.eq-foot-m{display:flex;flex-direction:column;gap:6px;margin-top:32px}
.eq-foot-m:empty{display:none}
.eq-foot-mention{margin:0;max-width:none;font:300 12px/1.5 var(--eq-font-texte);letter-spacing:0;word-spacing:var(--eq-titre-mots);text-transform:none;color:var(--eq-pied-titre)}
/* la ligne © : la dernière chose de la page */
.eq-foot-b{display:flex;align-items:baseline;gap:24px;margin-top:32px;padding-top:16px;
  box-shadow:inset 0 1px 0 var(--eq-pied-filet);font:400 12px/1.5 var(--eq-font-label);letter-spacing:.14em;text-transform:uppercase;color:var(--eq-pied-titre)}
/* le champ newsletter d'eqnx.vc et de Galaxy (_eq_news.html.twig, dans .eq-foot-c--x ; le prototype n'envoie rien :
   eqnx-commun.js, [data-eq-news]) et sa note (.eq-news-note) */
.eq-news{display:flex;flex-wrap:wrap;align-items:stretch;gap:0;width:100%;max-width:360px;margin:0}
.eq-news label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.eq-news input{flex:1 1 0;min-width:0;margin:0;padding:9px 12px;border:1px solid var(--eq-filet-noir);border-right:0;
  border-radius:var(--eq-rayon) 0 0 var(--eq-rayon);background:transparent;color:#FFFFFF;font:300 14px/1.2 var(--eq-font-ui);letter-spacing:0;text-transform:none}
.eq-news input::placeholder{color:var(--eq-pied-titre)}
.eq-news button{flex:none;margin:0;padding:9px 14px;border:1px solid var(--eq-filet-noir);border-radius:0 var(--eq-rayon) var(--eq-rayon) 0;
  background:transparent;color:#FFFFFF;font:400 12px/1.2 var(--eq-font-label);letter-spacing:.14em;text-transform:uppercase;cursor:pointer;
  transition:border-color .3s var(--eq-courbe),color .3s var(--eq-courbe)}
.eq-news button:hover{border-color:var(--eq-orange);color:var(--eq-orange)}
/* 26/10/2026 — la newsletter branchée au CRM (NewsletterController) : la colonne qui la porte reste CACHÉE tant que le
   serveur ne l'a pas dite ouverte (le réglage `site_newsletter_ouverte`, lu par eqnx-commun.js : <html data-eq-news="ouverte">) ;
   sans script, cachée aussi. Le champ piège : hors de l'écran, jamais atteint au clavier. */
html:not([data-eq-news="ouverte"]) .eq-foot-c--x:has(form[data-eq-news]){display:none}
/* ⚠ 26/10/2026 au soir — PAS hors de l'écran : à left:-10000px, en arabe (RTL), le piège élargissait la page de ~10 000 px
   (Galaxy défilait à l'horizontale). Le motif « visually hidden », sans left ni right : rien ne déborde, dans aucun sens.
   La mesure du kit et galaxy.spec.js vérifient scrollWidth <= innerWidth (EN, FR, AR ; 1440 et 390). */
.eq-news .eq-news-piege{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.eq-news-msg{flex-basis:100%;margin:8px 0 0;font:300 13px/1.5 var(--eq-font-texte);letter-spacing:0;text-transform:none;color:var(--eq-pied-texte)}
.eq-news-note{flex-basis:100%;margin:8px 0 0;font:300 12px/1.45 var(--eq-font-texte);letter-spacing:0;word-spacing:var(--eq-titre-mots);text-transform:none;color:var(--eq-pied-texte)}
.eq-news-note a{color:var(--eq-pied-texte);text-decoration:underline;text-decoration-color:var(--eq-filet-noir);text-underline-offset:.2em;transition:color .3s var(--eq-courbe)}
.eq-news-note a:hover{color:var(--eq-orange);text-decoration-color:currentColor}

/* ── 11. L'OUVERTURE, UNE FOIS PAR SESSION (eqnx-commun.js pose html[data-eq-intro=jouer|sauter|finie]) ───────────────
   Un élément d'intro porte .eq-intro : visible seulement quand l'intro se joue. L'ouverture commune (_eq_intro.html.twig,
   Alex, 26/10 au matin) : le logo Lottie d'eqnx.vc plein écran sur le noir — sur le papier, logo à l'encre, au portail
   (.eq-ouverture--clair : ses tracés prennent l'encre par la feuille, net, sans filtre) — puis la page se dévoile. Le
   script commun l'anime (opacité, échelle : CSSOM, admis par les CSP 'self') ; un clic ou une touche la passe. */
html[data-eq-intro=sauter] .eq-intro,html[data-eq-intro=finie] .eq-intro{display:none}
.eq-ouverture{display:none}
html[data-eq-intro=jouer] .eq-ouverture{position:fixed;inset:0;z-index:10000;display:grid;place-items:center;background:#000;cursor:pointer}
html[data-eq-intro=jouer] .eq-ouverture--clair{background:var(--eq-papier)}
.eq-ouverture-logo{width:min(46vw,340px);aspect-ratio:1}
.eq-ouverture-logo svg{display:block}
.eq-ouverture--clair .eq-ouverture-logo svg path{fill:var(--eq-encre)}

/* ── 12. LE RESPONSIVE (les seuils du pack : 1280, 1100, 900, 520) ───────────────────────────────────────────────────── */
@media (max-width:1280px){.eq-nav-menu{gap:20px}}
/* sous 1100 px, le bouton Portail LP ne garde que la sphère et la flèche (son libellé, .eq-portal-l, disparaît) */
@media (max-width:1100px){.eq-portal{padding-right:12px}.eq-portal-l{display:none}}
@media (max-width:900px){.eq-nav-menu{display:none}.eq-nav-r{gap:14px}
  .eq-foot-g{grid-template-columns:repeat(2,minmax(0,1fr))}.eq-foot-c--x:empty{display:none}}
@media (max-width:520px){.eq-foot-c--x{grid-column:1/-1}}
@media (prefers-reduced-motion:reduce){
  .eq-orb{animation:none}
  .eq-orb video{display:none}
  .eq-nav-menu a,.eq-nav-menu a::after,.eq-lang>*,.eq-portal,.eq-arr,.eq-btn,.eq-foot a{transition:none}
}

/* ── 13. L'ARABE (26/10/2026 — QCM d'Alex) : un texte arabe ne s'espace jamais lettre à lettre (l'interlettrage coupe les
   liaisons) et n'a pas de capitales : dans les composants du kit, tout élément DE LANGUE ARABE perd l'interlettrage et la
   mise en capitales. `:lang(ar)` s'applique à l'élément selon SA langue : les codes « EN · FR · IT · ES · AR » de la pilule
   (lang="en"…) et les adresses latines gardent leur style. Les familles arabes sont plus haut (§1). ─────────────────────── */
:is(.eq-nav,.eq-foot,.eq-lang,.eq-btn,.eq-portal,.eq-intro):lang(ar),
:is(.eq-nav,.eq-foot,.eq-lang,.eq-btn,.eq-portal,.eq-intro) :lang(ar){letter-spacing:0!important;text-transform:none!important;word-spacing:normal}