/* ============================================================
   LIMA : la peau commune
   Source unique : design/commun/norme.md (arrêtée le 2026-10-07).
   Fond noir, orange #FF5500, Outfit. Valeurs reprises du régime
   sombre en production sur le site Shield (.dark de projet-2.css),
   orange remplacé. Aucune autre couche ne porte de couleur.
   ============================================================ */

@font-face{
  font-family:"Outfit";
  src:url("../assets/fonts/Outfit-Variable.ttf") format("truetype");
  font-weight:400 700;font-display:swap;
}
/* Microgramma : réservée au wordmark, jamais au texte. */
@font-face{
  font-family:"Microgramma";
  src:url("../assets/fonts/Microgramma-D-Bold-Extended.otf") format("opentype");
  font-weight:700;font-display:swap;
}

/* ---------- 1. Jetons (norme §2) ---------- */

:root{
  --bg:       #000000;
  --card:     #121212;
  --field:    #1A1A1A;
  --chip:     rgba(255,255,255,.07);
  --text:     #F4F1EC;
  --muted:    #A8A39C;
  --faint:    #7A7A78;
  --line:     rgba(255,255,255,.07);
  --brand:    #FF5500;
  --on-brand: #000000;   /* jamais de blanc sur l'orange : 3,2 de contraste */
  --shadow:   none;      /* le sombre ne porte jamais d'ombre */
  --ok:       #3FA86B;   /* états (norme §2) */
  --alarm:    #E1483F;
  --warn:     #D99A1E;

  /* Dérivés, tous calculés sur les jetons ci-dessus */
  --brand-line: rgba(255,85,0,.45);   /* filet de survol */
  --bar-bg:     rgba(0,0,0,.86);      /* barre collante translucide */
  /* Masque du sceau du hero : opaque en haut, dissous dans le fond en bas.
     Un masque ne porte que de l'opacité, la teinte n'y joue aucun rôle. */
  --fondu-sceau: linear-gradient(to bottom, #000 40%, transparent 70%);

  /* Rayons : cinq valeurs, aucune autre (norme §3) */
  --r-pill:  999px;
  --r-card:  24px;
  --r-inner: 16px;
  --r-media: 12px;
  --r-round: 50%;

  /* Trois poids de largeur */
  --w-page: 1180px;
  --w-text: 760px;
  --w-inst: 560px;

  --font:      "Outfit", system-ui, sans-serif;
  --font-mark: "Microgramma", "Outfit", system-ui, sans-serif;
}

/* Mode clair, blog uniquement : seul le contenu (main) bascule, la barre et le
   pied de page restent noirs. Valeurs du thème clair du site Shield (projet-2.css),
   sauf --faint, foncé pour rester lisible sur blanc (4,6 au lieu de 2,4). */
html[data-theme="clair"] main{
  --bg:#F1F1EE; --card:#FFFFFF; --field:#E9E9E5; --chip:#E4E4DF;
  --text:#17181A; --muted:#5F6167; --faint:#75777C;
  --line:rgba(0,0,0,.08); --brand-line:rgba(255,85,0,.55);
  --shadow:0 1px 2px rgba(21,24,29,.05), 0 6px 20px rgba(21,24,29,.06);
  background:var(--bg);color:var(--text);
}

/* ---------- 2. Base ---------- */

*{box-sizing:border-box}
[hidden]{display:none !important}   /* un élément masqué le reste, quel que soit son display */
html{scroll-behavior:smooth;scroll-padding-top:84px}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font);
  font-feature-settings:"tnum" 1;
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* Échelle typo (norme §3) : h1 46 / h2 30 / h3 17, tout en 600 */
h1,h2,h3,h4{color:var(--text);font-weight:600;margin:0 0 14px;text-wrap:balance}
h1{font-size:46px;letter-spacing:-.02em;line-height:1.08}
h2{font-size:30px;letter-spacing:-.01em;line-height:1.15}
h3{font-size:17px;line-height:1.35}
h4{font-size:15px}

p{margin:0 0 16px;color:var(--muted)}
p:last-child{margin-bottom:0}
strong{color:var(--text);font-weight:600}

a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
ul{margin:0;padding:0;list-style:none}

/* ---------- 3. Accessibilité et mouvement ---------- */

:focus-visible{outline:2px solid var(--brand);outline-offset:3px}
@media (prefers-reduced-motion:reduce){
  *{animation:none !important;transition:none !important}
  html{scroll-behavior:auto}
}