/* ============================================================================
   base.css — socle commun à toutes les pages : polices, tokens, reset, typo, grille, la main, barre du haut, pied
   Ordre : 1. polices · 2. tokens · 3. reset · 4. typographie · 5. trame des titres · 6. la main · 7. barre du haut
           8. pied de page · 9. mouvement réduit · 10. garde-fou petits écrans
   ============================================================================ */

/* ---------- 1. Polices (fichiers locaux, aucun réseau) ----------
   Roboto Flex variable (wdth 25–151, wght 100–1000) : TOUT le texte.
   Just Another Hand : la main uniquement. IBM Plex Mono 500 : les micro-repères d'imprimeur uniquement. */
@font-face{font-family:"Flex";src:url("../fonts/roboto-flex-latin.woff2") format("woff2-variations"),url("../fonts/roboto-flex-latin.woff2") format("woff2");font-weight:100 1000;font-stretch:25% 151%;font-style:normal;font-display:block;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:"Flex";src:url("../fonts/roboto-flex-latin-ext.woff2") format("woff2-variations"),url("../fonts/roboto-flex-latin-ext.woff2") format("woff2");font-weight:100 1000;font-stretch:25% 151%;font-style:normal;font-display:block;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,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:"Just Another Hand";src:url("../fonts/just-another-hand.woff2") format("woff2");font-weight:400;font-display:block}
@font-face{font-family:"Plex Mono";src:url("../fonts/ibm-plex-mono-500.woff2") format("woff2");font-weight:500;font-display:block}

/* ---------- 2. Tokens ---------- */
:root{
  /* palette : noir / papier / gris ; le rouge feutre est réservé à la main (≤ 1 % de la surface) */
  --noir:#0D0D0C; --encre:#141413; --papier:#F1EFEA; --table:#D9D7D0; --cadre:#E2E0DA;
  --toner:#C9C7C0; --gris:#8E8C86; --graphite:#5F5E59; --filet:rgba(13,13,12,.16); --rouge:#E2332A;
  /* familles */
  --flex:"Flex",system-ui,sans-serif; --hand:"Just Another Hand",cursive; --mono:"Plex Mono",ui-monospace,monospace;
  /* courbes : la machine pose, la main écrit */
  --machine:cubic-bezier(.19,1,.22,1); --main:cubic-bezier(.6,.05,.28,.98); --doux:cubic-bezier(.65,0,.35,1);
  /* grille écran : 12 colonnes */
  --marge:40px; --gouttiere:24px; --rail:104px; --barre:52px;
  --grain:none;            /* tuile de grain, injectée par site.js (Trame.grain) */
}

/* ---------- 3. Reset ---------- */
*{box-sizing:border-box;margin:0;padding:0}
html,body{font-family:var(--flex);font-stretch:100%;-webkit-font-smoothing:antialiased;color:var(--noir)}
body.lock{overflow:hidden}
a{color:inherit}
button{font:inherit;color:inherit}
img{display:block;max-width:100%}

/* ---------- 4. Typographie utilitaire ---------- */
.lab{font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase}
.mono{font-family:var(--mono);font-size:9.5px;font-weight:500;letter-spacing:.06em;text-transform:uppercase}
.tn{font-variant-numeric:tabular-nums}
.ph{color:var(--gris)}                     /* tout texte entre crochets (information à venir) */
.grille{display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--gouttiere)}
.ar{display:inline-block;width:.95em;height:.6em;vertical-align:.06em;overflow:visible}   /* flèche → (absente de Roboto Flex) */
.ar path{fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:square;vector-effect:non-scaling-stroke}

/* ---------- 5. Trame des grands titres (voir trame.js) ---------- */
.trame{color:transparent!important;background-repeat:no-repeat;background-position:0 0;-webkit-background-clip:text;background-clip:text;image-rendering:pixelated}

/* ---------- 6. La main (voir main.js) ---------- */
.ink{fill:none;stroke:var(--rouge);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1 2;stroke-dashoffset:1;opacity:0;transition:stroke-dashoffset var(--dur) var(--main) var(--d),opacity 0s linear var(--d)}
.on .ink{stroke-dashoffset:0;opacity:1}
.hand-note{font-family:var(--hand);color:var(--rouge);font-size:36px;line-height:.86;letter-spacing:.01em;white-space:nowrap;pointer-events:none;z-index:8;clip-path:inset(-30% 101% -30% -4%);transition:clip-path 620ms var(--main) var(--d)}
.on .hand-note{clip-path:inset(-30% -6% -30% -4%)}

/* ---------- 7. Barre du haut (identique sur toutes les pages) ---------- */
.top{position:fixed;left:0;right:0;top:0;height:var(--barre);z-index:60;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:0 var(--marge);color:var(--noir)}
.top a{text-decoration:none}
.top a:hover{text-decoration:underline;text-underline-offset:3px}
.top .centre{color:var(--graphite)}
.top .droite{justify-self:end;display:flex;gap:22px}
.top .car{display:inline-block;width:.55em;height:1px;background:currentColor;vertical-align:-1px;margin-left:2px;animation:clignote .5s steps(1) infinite}
@keyframes clignote{50%{opacity:0}}

/* ---------- 8. Pied de page (identique sur toutes les pages) ---------- */
.pied{display:flex;justify-content:space-between;align-items:flex-end;border-top:1px solid currentColor;padding-top:11px;gap:24px}
.pied a{text-decoration:none}
.pied a:hover{text-decoration:underline;text-underline-offset:3px}
.pied .liens{display:flex;gap:18px}

/* ---------- 9. Mouvement réduit ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none!important;animation:none!important}
  .ink{stroke-dashoffset:0;opacity:1}.hand-note{clip-path:none}
}

/* ---------- 10. Garde-fou petits écrans (le vrai responsive est dans la TODO) ---------- */
@media (max-width:900px){
  :root{--marge:16px;--gouttiere:12px;--rail:0px}
  html,body{overflow-x:hidden}
  .top .centre{display:none}
  .top{grid-template-columns:1fr auto}
}