/* ============================================================
   FogenCraft — SOCLE (0.92.0)
   Jetons, base, typographie, utilitaires. Aucune règle de composant ici :
   voir composants.css. Aucune mise en page : voir pages.css.

   LE SYSTÈME GRAPHIQUE PART DU VAULT BOY
   --------------------------------------
   Les sept figurines de karma sont le seul dessin original du site. Tout
   le reste en découle : leur bleu et leur jaune d'Abri, leur trait noir
   épais, leurs volumes en blocs. Le site est une interface de Pip-Boy
   dessinée en pixels : angles nets, cadres en escalier, chiffres au
   phosphore, texte courant lisible.

   TROIS POLICES, TROIS RÔLES
   --------------------------
   Silkscreen (pixel) : titres, étiquettes, menu, boutons — ce qui se lit
   d'un coup d'œil. VT323 (Pip-Boy) : valeurs, écrans, terminaux. Inter :
   le texte courant, qui se lit longtemps. Jamais l'une à la place de
   l'autre.

   LA GRILLE EST DE 4 PX
   ---------------------
   Épaisseurs de trait 2 et 4 px, marches de coin 4 px, espacements en
   multiples de 4. Un pixel qui n'est pas sur la grille se voit.
   ============================================================ */

/* Les polices sont servies par le site : une feuille Google bloquait le
   rendu depuis une origine tierce, et les polices n'étaient découvertes
   qu'après elle (audit performance). Latin seulement. */
@font-face { font-family: "Silkscreen"; font-style: normal; font-weight: 400; font-display: swap;
             src: url("../fonts/silkscreen-400.woff2") format("woff2"); }
@font-face { font-family: "Silkscreen"; font-style: normal; font-weight: 700; font-display: swap;
             src: url("../fonts/silkscreen-700.woff2") format("woff2"); }
@font-face { font-family: "VT323"; font-style: normal; font-weight: 400; font-display: swap;
             src: url("../fonts/vt323-400.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400 600; font-display: swap;
             src: url("../fonts/inter-400.woff2") format("woff2"); }

:root {
  /* Les contrôles natifs (listes, cases, ascenseurs) en sombre. */
  color-scheme: dark;

  /* --- la palette, tirée des figurines --- */
  --fond:           #0B0B09;   /* le noir chaud du Pip-Boy éteint */
  --surface:        #15140F;
  --surface-haute:  #1F1D16;
  --trait:          #121109;   /* le contour noir des figurines */

  --texte:          #EFE9DA;   /* os — 15,6:1 sur le fond */
  --texte-doux:     #ADA797;   /*  7,7:1 */
  --texte-faible:   #8C897C;   /*  5,0:1 */

  --jaune:          #F2C230;   /* la bande de la combinaison — 11,2:1 */
  --jaune-survol:   #FFD24D;
  --jaune-focus:    #FFE28A;
  --sur-jaune:      #141309;   /* le texte posé sur le jaune */

  --bleu:           #2F63D6;   /* la combinaison — pour les surfaces */
  --bleu-clair:     #7FA6FF;   /* les liens, 7,3:1 sur le fond */
  --bleu-sombre:    #19357A;

  --peau:           #F2B98A;
  --cuir:           #7A4A22;
  --rouille:        #7A4526;

  --succes:         #5CB85C;   /*  6,9:1 */
  --alerte:         #E0605B;   /*  5,0:1 */

  --phosphore:      #5CE05C;
  --phosphore-sombre: #06130A;
  --ambre:          #FFB642;

  --bordure:        #656C54;   /* 3,0:1 — le minimum d'un composant */
  --separateur:     #25271F;
  --filet:          #736E57;

  /* Compatibilité : les scripts et quelques pages parlent encore d'accent. */
  --accent:         var(--jaune);
  --accent-survol:  var(--jaune-survol);
  --accent-focus:   var(--jaune-focus);
  --sur-accent:     var(--sur-jaune);

  /* --- typographie --- */
  --police-pixel:    "Silkscreen", "Press Start 2P", monospace;
  --police-pipboy:   "VT323", "Share Tech Mono", ui-monospace, monospace;
  --police-texte:    "Inter", "Segoe UI", system-ui, sans-serif;
  /* Compatibilité : les anciens noms pointent sur les nouveaux rôles. */
  --police-display:  var(--police-pixel);
  --police-terminal: var(--police-pipboy);

  /* Une police pixel est large et lourde : les titres sont plus petits en
     em qu'avec Teko, et plus présents. */
  /* Une échelle où chaque niveau s'entend, aux bornes nettes pour une
     police pixel (24, 40, 28, 18, 16 px). */
  --t-h1: clamp(1.5rem, 3.6vw, 2.5rem);
  --t-h2: clamp(1.25rem, 2.6vw, 1.75rem);
  --t-h3: 1.125rem;
  --t-h4: 1rem;
  --t-corps:   1.02rem;
  --t-petit:   .92rem;
  /* Silkscreen est dessinée sur une grille de 8 px : à 10,5 px elle est
     grise à 80 % (audit lisibilité). 12 px est le plancher des étiquettes,
     14 px celui de ce qu'on lit et clique : menu, boutons, onglets. */
  --t-etiquette: .75rem;
  --t-bouton: .875rem;
  --t-legende: .72rem;     /* compatibilité */
  --t-pipboy:  1.25rem;    /* VT323 en dessous de 20 px devient flou */
  --i-corps: 1.65;

  /* --- espacements, sur la grille de 4 --- */
  --e-1: 4px; --e-2: 8px; --e-3: 12px; --e-4: 16px;
  --e-5: 24px; --e-6: 36px; --e-7: 56px; --e-8: 80px;
  --e-9: 112px; --e-10: 144px;
  --marge:  clamp(16px, 4vw, 40px);
  --rythme: clamp(56px, 9vw, 112px);
  --largeur-page: 1180px;

  /* --- le trait et les coins --- */
  --trait-fin: 2px;
  --trait-fort: 4px;
  --marche: 4px;   /* la marche d'un coin en escalier */
  /* Un coin de pixel art : le rectangle moins un carré à chaque angle.
     Se pose en clip-path sur tout ce qui a un cadre. */
  --coin-pixel: polygon(
    var(--marche) 0, calc(100% - var(--marche)) 0,
    calc(100% - var(--marche)) var(--marche), 100% var(--marche),
    100% calc(100% - var(--marche)), calc(100% - var(--marche)) calc(100% - var(--marche)),
    calc(100% - var(--marche)) 100%, var(--marche) 100%,
    var(--marche) calc(100% - var(--marche)), 0 calc(100% - var(--marche)),
    0 var(--marche), var(--marche) var(--marche));
  /* Le relief d'un bloc : une arête claire en haut à gauche, sombre en
     bas à droite — le bouton de Minecraft. */
  --relief: inset var(--trait-fin) var(--trait-fin) 0 rgba(255,255,255,.22),
            inset calc(-1 * var(--trait-fin)) calc(-1 * var(--trait-fin)) 0 rgba(0,0,0,.35);
  --relief-enfonce: inset var(--trait-fin) var(--trait-fin) 0 rgba(0,0,0,.35),
                    inset calc(-1 * var(--trait-fin)) calc(-1 * var(--trait-fin)) 0 rgba(255,255,255,.12);

  /* --- la barre de navigation, mesurée --- */
  --h-nav: 64px;

  /* --- le mouvement --- */
  --duree-vite: .16s;
  --duree: .35s;
  --duree-lente: .7s;
  --courbe: cubic-bezier(.2, .8, .2, 1);
  --pas-anim: steps(4, end);   /* une animation qui avance par pixels */

  /* --- les lueurs --- */
  --lueur-jaune: 0 0 18px rgba(242,194,48,.35);
  --lueur-jaune-forte: 0 0 28px rgba(242,194,48,.55);
  --lueur-accent: var(--lueur-jaune);
  --lueur-accent-forte: var(--lueur-jaune-forte);
  --lueur-phosphore: 0 0 14px rgba(92,224,92,.35);

  /* --- ombres : dures, décalées, comme un sprite --- */
  --ombre-sm: 4px 4px 0 rgba(0,0,0,.45);
  --ombre-md: 6px 6px 0 rgba(0,0,0,.5);
  --ombre-lg: 8px 8px 0 rgba(0,0,0,.55);

  /* --- textures --- */
  --texture-beton:  url("../textures/concrete.webp");   /* 1 Ko : affichée à 5 % */
  --texture-crt:    url("../textures/crt.png");
}
@media (min-width: 46rem) { :root { --h-nav: 80px; } }

/* Ruptures, pour mémoire (CSS ne variabilise pas une media query) :
   sm 576 · md 768 · lg 1024 · xl 1440 */

/* ---------------------------------------------------- base */

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth;
       /* Un élément amené au focus ne se cache ni sous la barre collante
          ni sous la barre d'actions (WCAG 2.4.11). */
       scroll-padding-top: calc(var(--h-nav) + var(--e-3)); scroll-padding-bottom: 96px; }

body {
  margin: 0;
  background: var(--fond);
  color: var(--texte);
  font-family: var(--police-texte);
  font-size: var(--t-corps);
  line-height: var(--i-corps);
  overflow-x: hidden;
  overflow-x: clip;   /* le tactile contournait parfois `hidden` */
}
html { overflow-x: hidden; overflow-x: clip; }

img, svg, video, canvas { max-width: 100%; }
/* Une image contrainte en largeur garde ses proportions : sans `height`,
   le navigateur écrase la hauteur d'origine et l'image se déforme. */
img[width][height], svg { height: auto; }
img { height: auto; display: block; }
/* Un sprite s'agrandit en pixels, jamais en flou. */
.pixel, .peau, .objet img, .avec-icone img, .forum-avatar > span, .vignette { image-rendering: pixelated; }

:target, [id] { scroll-margin-top: calc(var(--h-nav) + var(--e-3)); }

/* ---------------------------------------------------- typographie */

h1, h2, h3, h4 {
  font-family: var(--police-pixel);
  font-weight: 700;
  margin: 0;
  line-height: 1.15;
  letter-spacing: 0;
  text-wrap: balance;
  color: var(--texte);
}
h1 { font-size: var(--t-h1); }
h2 { font-size: var(--t-h2); }
h3 { font-size: var(--t-h3); font-weight: 400; }
h4 { font-size: var(--t-h4); font-weight: 400; }

p { margin: 0 0 var(--e-4); }
a { color: var(--bleu-clair); text-underline-offset: .2em; text-decoration-thickness: 2px; }
a:hover { color: var(--jaune); }
strong, b { color: var(--texte); }
code, kbd, samp { font-family: var(--police-pipboy); font-size: 1.05em; }

/* La prose ne dépasse jamais une largeur lisible. */
.mesure { max-width: 60ch; color: var(--texte-doux); }

/* Les deux rôles typographiques posables par classe. Les composants qui
   les portent d'office sont dans composants.css (« rôles »). */
.etiquette { font-family: var(--police-pixel); font-size: var(--t-etiquette); font-weight: 400;
             letter-spacing: .125em; text-transform: uppercase; }
.valeur, .pipboy { font-family: var(--police-pipboy); font-size: var(--t-pipboy); font-weight: 400;
                   font-variant-numeric: tabular-nums; line-height: 1.1; }

/* ---------------------------------------------------- focus, clavier */

a, button, input, select, textarea { font-family: inherit; }
:where(a, button, summary, [tabindex]):focus-visible,
:where(input, select, textarea):focus-visible {
  outline: 3px solid var(--jaune-focus);
  outline-offset: 3px;
}

/* Accès clavier : premier élément de la page, visible seulement au focus. */
.saut {
  position: absolute; left: 50%; top: 0; transform: translate(-50%, -120%);
  z-index: 100; padding: var(--e-3) var(--e-5);
  background: var(--jaune); color: var(--sur-jaune);
  font-family: var(--police-pixel); font-size: var(--t-etiquette); text-transform: uppercase;
  text-decoration: none; transition: transform .15s;
}
.saut:focus { transform: translate(-50%, 0); }

.invisible { position: absolute; width: 1px; height: 1px; overflow: hidden;
             clip-path: inset(50%); white-space: nowrap; }

/* ---------------------------------------------------- utilitaires */

.page { max-width: var(--largeur-page); margin: 0 auto;
        padding: var(--e-6) var(--marge) var(--e-9);
        min-height: 60svh; }   /* une page qui se remplit en JS ne fait pas sauter le pied */
.defilant, .tableau-large { overflow-x: auto; min-width: 0; max-width: 100%;
                            overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; }
.defilant:focus-visible, .tableau-large:focus-visible,
.sortie-console:focus-visible, .journal-serveur:focus-visible {
  outline: 3px solid var(--jaune-focus); outline-offset: 2px;
}
.fin { text-align: right; }
.centre { text-align: center; }