/* Le noyau de l'identité de NDAKILI (AF447) : les polices, les rôles de couleur et le nom dessiné, lus à la fois par le jeu
   (web/index.html) et par sa page d'accueil publique (site-du-jeu). Les couleurs viennent de ndakili-palette.css,
   engendrée depuis outils/jumeau/identite/palette.json ; ce fichier ne nomme une couleur que par son rôle. Ce sont les
   seules déclarations de police du jeu et de sa page : changer d'habit, c'est changer ce fichier.
   Brice Kengni Zanguim */

/* -- 1. Les polices -------------------------------------------------------------------------------------------- */
@font-face { font-family: 'Rubik'; src: url('polices/Rubik-VF.woff') format('woff'); font-weight: 300 900; font-style: normal; font-display: swap; }
@font-face { font-family: 'Bungee'; src: url('polices/Bungee-Regular.woff') format('woff'); font-weight: 400; font-style: normal; font-display: swap; }

/* -- 2. Les rôles --------------------------------------------------------------------------------------------- */
:root {
  --police-texte: 'Rubik', system-ui, sans-serif;
  --police-titres: 'Bungee', 'Rubik', system-ui, sans-serif;
  /* Les rôles : toute la feuille passe par eux. */
  --papier: var(--ndakili-blanc);              /* le fond des cadres et des étiquettes */
  --papier-creux: var(--ndakili-creux);        /* un champ, une ligne, une carte dans un cadre */
  --encre: var(--ndakili-noir);                /* texte, traits, ombres */
  --encre-douce: var(--ndakili-gris);          /* texte secondaire */
  --vif: var(--ndakili-jaune);                 /* l'action : bouton principal, bandeau de titre, pastille */
  --vif-fonce: var(--ndakili-jaune-fonce);
  --info: var(--ndakili-indigo);
  --info-clair: var(--ndakili-indigo-clair);
  --gain: var(--ndakili-vert);
  --chaud: var(--ndakili-ocre);                /* en aplat sous l'encre seulement */
  --alerte: var(--ndakili-rouge);
  --trait: 3px solid var(--encre);
  --trait-fin: 2px solid var(--encre);
  --ombre: 5px 5px 0 var(--encre);
  --ombre-petite: 3px 3px 0 var(--encre);
  --voile: color-mix(in srgb, var(--encre) 50%, transparent);
  /* La seconde surface, le néon et le grain (Brice, 2026-11-09 : « un effet néon et une couleur supplémentaire [...] du
     marron foncé [...] des petites granularités ») : un bois sombre tramé de points, qui porte les titres en néon. */
  --brun: var(--ndakili-marron);
  --brun-clair: var(--ndakili-marron-clair);
  --lueur: var(--vif);                       /* la couleur du tube de néon ; une annonce la prend à son genre */
  --grain-clair: radial-gradient(circle, color-mix(in srgb, var(--papier) 14%, transparent) 0 1px, transparent 1.6px) 0 0 / 7px 7px;
  --grain-sombre: radial-gradient(circle, color-mix(in srgb, var(--encre) 12%, transparent) 0 1px, transparent 1.6px) 0 0 / 6px 6px;
  --surface-brune: var(--grain-clair), linear-gradient(170deg, var(--brun-clair), var(--brun) 72%);
  --surface-vive: var(--grain-sombre), var(--vif);
  /* la bande de pagne de la maquette Rue : losanges ocre et points jaunes sur indigo ; toujours dans son cadre, jamais sous un texte */
  --pagne: radial-gradient(circle at 50% 50%, var(--vif) 3px, transparent 3.5px) 0 0 / 22px 18px,
    conic-gradient(from 45deg at 50% 50%, var(--chaud) 0 25%, transparent 0 50%, var(--chaud) 0 75%, transparent 0) 11px 0 / 22px 18px, var(--info);
}

/* -- 3. Le nom dessiné (AF447) : la règle du logo de la direction Rue d'origine, en em pour qu'il garde ses proportions à
   toute taille. Lettres jaunes cernées d'encre, ombre franche, le A en pignon ocre posé sur le bas de la boîte des
   lettres, ce qui l'abaisse un peu sous la ligne ; le tout penché de trois degrés. Le balisage vient de nomDessine(). */
.nom-dessine { display: inline-flex; align-items: flex-end; line-height: 1; font-family: var(--police-titres); font-weight: 400; letter-spacing: .02em; color: var(--vif);
  -webkit-text-stroke: .115em var(--encre); paint-order: stroke fill; text-shadow: .086em .086em 0 var(--encre); rotate: -3deg; }
.nom-dessine .a-maison { width: .86em; height: .74em; margin: 0 .02em .02em; fill: var(--chaud); stroke: var(--encre); stroke-width: 11px; paint-order: stroke;
  overflow: visible; filter: drop-shadow(.07em .07em 0 var(--encre)); }