/* Thème neutre : toutes les variables de la peau. Un autre thème ne redéfinit que ces variables (voir la charte). */
:root{
  --marine:#002D62; --papier:#F5F6F8; --surface:#FFFFFF; --encre:#0F1B2D; --brume:#C9D1DC;
  --orange:#F37021; --violet:#6B21A8; --marque:#002D62;
  /* L'orange de la marque (décors, traits, focus) ne passe pas le contraste sous du texte blanc (2,9 pour 1) ni en texte sur fond clair.
     --orange-fort : fond d'un bouton ou d'une pastille à texte blanc (5,2 pour 1). --orange-texte : orange en texte sur la surface (5,2 pour 1 en clair ; l'orange vif suffit en sombre). */
  --orange-fort:#C2410C; --orange-texte:#C2410C;
  --r1:#8B94A3; --r2:#2F8F6B; --r3:#2E6FD6; --r4:#6B21A8; --r5:#C9961A;
  --doux:rgba(15,27,45,.7);
  --ombre-repos:0 1px 2px rgba(0,45,98,.14),0 8px 16px -8px rgba(0,45,98,.28);
  --ombre-leve:0 2px 4px rgba(0,45,98,.16),0 22px 30px -14px rgba(0,45,98,.4);
  --titre:"Bricolage Grotesque",system-ui,sans-serif;
  --texte:Literata,Georgia,serif;
  /* Échelle d'espacement : 4, 8, 12, 16, 24, 32 px (+ la gouttière de page, 18 px). Les gap, marges et rembourrages courants s'y alignent. */
  --esp-1:4px; --esp-2:8px; --esp-3:12px; --esp-4:16px; --esp-5:24px; --esp-6:32px; --gouttiere:18px;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --marque:#7FA6E0; --papier:#0B1A33; --surface:#12254A; --encre:#E8ECF3; --brume:#2B3F66;
    --violet:#B58CE6; --r4:#9B5BD6; --doux:rgba(232,236,243,.72); --orange-texte:#F37021;
    --ombre-repos:0 1px 2px rgba(0,0,0,.4),0 8px 16px -8px rgba(0,0,0,.6);
    --ombre-leve:0 2px 4px rgba(0,0,0,.5),0 22px 30px -14px rgba(0,0,0,.8);
  }
}
:root[data-theme="dark"]{
  --marque:#7FA6E0; --papier:#0B1A33; --surface:#12254A; --encre:#E8ECF3; --brume:#2B3F66;
  --violet:#B58CE6; --r4:#9B5BD6; --doux:rgba(232,236,243,.72); --orange-texte:#F37021;
  --ombre-repos:0 1px 2px rgba(0,0,0,.4),0 8px 16px -8px rgba(0,0,0,.6);
  --ombre-leve:0 2px 4px rgba(0,0,0,.5),0 22px 30px -14px rgba(0,0,0,.8);
}

/* Touche de couleur du thème neutre : un simple trait violet (bandeau de l'en-tête, haut des blocs, sous les titres, cartes de message, page des thèmes).
   Les thèmes à surcouche (comme « métiers ») gardent le ruban multicolore des catégories. */
body:not([data-surcouche]) :is(.entete,.bloc-page,.hero,.page__tete){--ruban:var(--violet)}
body:not([data-surcouche]) .msg__carte::before,body:not([data-surcouche]) .hub__marque::after{background:var(--violet)}