/* identite.css — L'APPARENCE DU LIEU (Serrabona). Avec lieu.json, c'est tout ce qui change d'un monument à l'autre.
 *
 * Aucune page ni aucun moteur n'écrit de couleur, de police ou de rayon en dur : tout passe par ces jetons.
 * Les noms sont ceux qu'utilisaient déjà les moteurs (--bg, --pan, --ink, --acc…) : ils suivent l'identité sans retouche.
 *
 * Serrabona — « austère au dehors, éclatant au dedans » : nuit de schiste, le BLEU DE LA VISITE VIRTUELLE (#2f7fc4,
 * celui du thème des visites et des hotspots) réservé à ce qui est précieux (action principale, sélection, focus), or
 * des cierges pour les repères. (Avant le 15/10 : marbre rose saumon ; remplacé à la demande de Yann.)
 * Thème par défaut : sombre. Variante « clair » (calcaire et marbre) choisie dans le panneau d'accessibilité.
 * Contrastes mesurés (WCAG) : voir docs/IDENTITE.md.
 */
:root {
  color-scheme: dark;
  /* — surfaces — */
  --bg:        #101312;
  --pan:       #181c1b;
  --pan2:      #222826;
  --line:      #39423e;
  --scene:     #0a0c0b;
  --pan-grad:  linear-gradient(180deg, #222826, #181c1b);
  /* — texte — */
  --ink:       #f3ebe6;
  --ink2:      #d8cec8;
  --muted:     #aab0aa;
  /* — accent et repères — */
  --acc:       #2f7fc4;   /* le bleu du thème de la visite virtuelle */
  --acc-d:     #22537f;
  --acc-ink:   #9cd0ff;   /* accent LISIBLE EN TEXTE sur le fond (liens, puces) — sens historique, lu par les moteurs */
  --acc-on:    #03070c;   /* texte posé SUR l'accent (boutons pleins) : sombre — le blanc ne fait que 4,2:1 sur ce bleu */
  --acc-grad:  linear-gradient(160deg, #4a93d6, #2f7fc4);
  --gold:      #e6c27a;
  --focus:     #bfe0ff;
  --ok:        #b9cd94;   /* présence, « local », fait (règle Fable : le vert dit la connexion, jamais un type) */
  /* — couleur par type de média — */
  --t-visite:  #93cbbd; --t-360: #a8c8d9; --t-vr180: #e6c27a; --t-film: #b9cd94; --t-3d: #e7ae9f;
  --t-audio:   #e6c27a; --t-photo: #93cbbd; --t-doc: #c9c1d8;
  /* — catégories des sites « À proximité » (carte et liste de l'onglet Venir seulement ; demandé par Yann le 14/10) — */
  --c-religieux: #b99ae0; --c-chateau: #dcae52; --c-archeo: #d98b68; --c-memorial: #9aa6b4;
  --c-musee: #6ea8e0; --c-vue: #57c0cf; --c-nature: #7dbf74;
  /* — verre (panneaux posés sur l'image) — */
  --glass:      #121615c2;
  --glass-menu: #1a1f1df7;
  --hover:      #ffffff17;
  --voile-haut: #101312b3;
  --voile-bas:  #101312eb;
  --ombre:      #00000099;
  --blur: 18px;
  /* — typographie (polices auto-hébergées, vendor/fonts) — */
  --fh: 'Space Grotesk', system-ui, sans-serif;
  --fb: 'Inter', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
  --fd: 'Space Grotesk', system-ui, sans-serif;
  --fm: ui-monospace, Menlo, Monaco, monospace;
  /* — matière — */
  --r-card: 14px;
  --r-pan:  22px;
  --r-pill: 999px;
  --sh:     0 18px 44px -16px #000000a6;
  --tr: .16s;
  /* — compatibilité : jetons lus par les moteurs historiques — */
  --vlpc-accent: var(--acc);
  --accent: var(--acc);
  --accent-d: var(--acc-d);
  --panel: var(--pan);
  --panel2: var(--pan2);
  --card: var(--pan2);
}

/* Variante claire : calcaire, schiste et le bleu de la visite, un ton plus profond (lisible en blanc dessus). */
:root[data-theme="clair"] {
  color-scheme: light;
  --bg:        #f3eee6;
  --pan:       #fbf8f3;
  --pan2:      #ece5da;
  --line:      #d6cbbd;
  --scene:     #e8e1d6;
  --pan-grad:  linear-gradient(180deg, #fbf8f3, #ece5da);
  --ink:       #2b2522;
  --ink2:      #4a403b;
  --muted:     #6b5f57;
  --acc:       #2b6cab;
  --acc-d:     #22537f;
  --acc-ink:   #1f5f99;
  --acc-on:    #ffffff;
  --acc-grad:  linear-gradient(160deg, #2b6cab, #22537f);
  --gold:      #7a5c18;
  --focus:     #1f5f99;
  --ok:        #4d6b2e;
  /* couleurs par type, foncées pour le calcaire : elles servent de TEXTE (surtitres des cartes, numéros des haltes,
     « En écoute »…) ; héritées du sombre, elles tombaient à 1,5:1 (audit du 16/10/2026). Toutes ≥ 4,6:1 sur bg, pan, pan2. */
  --t-visite:  #2f6e5e; --t-360: #336a87; --t-vr180: #845d10; --t-film: #576d2d; --t-3d: #ae3e20;
  --t-audio:   #845d10; --t-photo: #2f6e5e; --t-doc: #6f5998;
  --c-religieux: #74489f; --c-chateau: #855e0f; --c-archeo: #9c4a2a; --c-memorial: #55606c;
  --c-musee: #2c64a0; --c-vue: #1c6e7a; --c-nature: #3a7135;
  --glass:      #fbf8f3d9;
  --glass-menu: #fbf8f3fa;
  --hover:      #2b25221a;
  --voile-haut: #f3eee680;
  --voile-bas:  #f3eee6f0;
  --ombre:      #2b252240;
  --sh:     0 14px 36px -14px #2b25224d;
}

::selection { background: color-mix(in srgb, var(--acc) 38%, transparent); }