/* ═══════════════════════════════════════════════════════════════════════
   NOSOMI — Palette partagée (UX21)
   Source unique des accents de marque, version « adoucie » (juin 2026) :
   saturation réduite, moins de vibration — la couleur reste réservée au
   signal. Alignée sur index.html / pilotage.html / cockpit.

   Chargement : APRÈS le <style> inline de chaque page (juste avant </head>).
   À spécificité égale (:root), la dernière déclaration prime : ces valeurs
   remplacent donc les palettes néon héritées des :root locaux sans toucher
   au reste des styles de la page.

   Le cockpit (/cockpit) n'inclut PAS ce fichier : son :root définit déjà
   ces accents plus le fond « confort » et la surcouche thème clair.
   ═══════════════════════════════════════════════════════════════════════ */
:root {
  --green:  #43d98c;
  --cyan:   #45c6e6;
  --amber:  #efc05a;
  --red:    #f06b78;
  --violet: #b99ce6;
  /* Canaux RGB → teintes dérivées via rgb(var(--x-rgb) / alpha). */
  --cyan-rgb: 69 198 230;
  --green-rgb: 67 217 140;
  --amber-rgb: 239 192 90;
  --red-rgb: 240 107 120;
  --violet-rgb: 185 156 230;

  /* ── Contraste AA (audit Playwright 2026-07, axe color-contrast) ────────
     Les :root locaux déclaraient --muted entre .45 et .55 et --faint entre
     .25 et .55 : sous le seuil WCAG 4.5:1 sur fond #05050d (jusqu'à 1.8:1
     pour .25). Chargé après le <style> de chaque page, ce bloc impose le
     plancher AA partout sans toucher aux styles locaux :
       .72 → ≈ 8.4:1   (texte secondaire)
       .58 → ≈ 5.6:1   (hints / mentions)                                  */
  --muted: rgba(232,232,244,.72);
  --faint: rgba(232,232,244,.58);

  /* ── Formes — échelle de coins (DESIGN.md § Shapes) ─────────────────────
     Quatre paliers, un rôle chacun, aucune valeur intermédiaire. Le langage
     de coins était la dernière chose non tokenisée : `--r` existait déjà mais
     valait 4px sur trois pages et 6px sur cinq autres, et les littéraux
     dérivaient sur 3/4/5/8/12px. Chargé après le <style> de chaque page, ce
     bloc réaligne `--r` partout sans éditer les :root locaux.
       sharp  boutons, champs, petits tags de chrome
       r      cartes, panneaux, listes, tableaux — le rayon de travail
       lg     cadres, bandeaux, encarts héro
       pill   pastilles, badges, statuts                                    */
  --r-sharp: 2px;
  --r: 6px;
  --r-lg: 10px;
  --r-pill: 100px;

  /* ── Rampe typographique du site public ────────────────────────────────
     DESIGN.md ne documentait que la rampe du cockpit (28/25/14/11/26) : les
     surfaces marketing vivent sur une rampe plus large, ce qui faisait lire
     au détecteur 410 « font-size hors rampe » qui n'étaient pas des défauts.
     Voici les paliers réellement portés par le site, chacun avec un rôle
     distinct — et sans demi-pixel : 11,5 / 12,5 / 13,5 / 14,5px ne se
     distinguaient d'aucun voisin à l'œil, ils ne faisaient que dédoubler la
     même intention. Les tailles d'affichage (24 à 96px, en clamp) restent
     locales : la hiérarchie par type de page est intentionnelle.           */
  --fs-micro: 10px;
  --fs-label: 11px;
  --fs-tag:   12px;
  --fs-sm:    13px;
  --fs-body:  14px;
  --fs-md:    15px;
  --fs-lg:    16px;
  --fs-lead:  18px;
  --fs-h4:    20px;
  --fs-h3:    22px;
  --fs-h2s:   28px;
}

/* ── Liens dans le texte courant (axe link-in-text-block) ──────────────────
   Un lien au fil d'un paragraphe doit rester repérable sans la couleur :
   soulignement systématique. Les CTA/boutons (hors <p>) ne sont pas touchés. */
p a, .bc a, .step-intro a, .hint a {
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ── Cibles tactiles mobiles (audit : liens nav/footer < 32px) ────────────
   Zone de tap ≥ 40px sans changer le rendu : padding vertical + inline-block
   sur les liens de navigation et de pied de page. */
@media (max-width: 700px) {
  .nav-links a, footer a { display: inline-block; padding: 9px 4px; }
}

/* ── Plancher tactile des barres minimales ────────────────────────────────
   Les pages statiques (mentions, ressources, diagnostic, benchmark…) ont une
   barre volontairement réduite à deux liens directs, sans menu déroulant :
   elles ne chargent donc pas /assets/nav.css et n'héritaient d'aucun plancher.
   « ← Retour » y tombait à 19px de haut — lisible, mais difficile à viser au
   pouce, là où DESIGN.md fixe 40px. `nav > a` ne vise que ces liens directs :
   les entrées du menu déroulant (.nav-links a) gardent la règle ci-dessus. */
@media (max-width: 900px) {
  nav > a { min-height: 44px; display: inline-flex; align-items: center; }
}

/* ── Point de marque « NOSOMI• » ───────────────────────────────────────────
   Rendu partagé du point final du logo en haut à gauche (nav publique,
   authentification, cockpit admin). Spécificité nulle (:where) : les pages
   qui colorent leur propre point via `.nav-brand::after` (accents violet /
   ambre par module) le conservent ; toutes les autres héritent du point cyan
   de marque — présence garantie et couleur uniforme partout. */
:where(.nav-brand, .tb-brand, .brand)::after {
  content: '';
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  margin-left: 6px;
  vertical-align: middle;
  background: var(--cyan);
  box-shadow: 0 0 10px rgb(var(--cyan-rgb) / .6);
}