/* ============================================================
   Français avec Charles — jetons de design
   Source unique de la palette. Chargé avant le <style> de chaque
   page, donc surchargeable localement si besoin.

   Palette « paysage » : couleurs relevées au pixel sur le tableau
   de Marc Deudon (page de connexion). Le fond vient des
   illustrations de roleplay (#FAF1E1, moyenne de 20 prélèvements).
   ============================================================ */

:root {
  /* ---- Fond ---- */
  --toile:        #faf1e1;   /* fond de page, aligné sur les illustrations */
  --toile-warm:   #f2e8d4;
  --toile-deep:   #e8dcc2;

  /* ---- Encre ---- */
  --ink:          #14100e;   /* noir chaud, accordé aux aquarelles */
  --ink-soft:     #3d362f;
  --ink-faint:    #7a7066;

  /* ---- Accents, prélevés sur le tableau ----
     Deux cobalts : le vif est la valeur réelle du ciel, il ne tient
     que 3,25:1 sur la toile et ne doit JAMAIS porter de texte.
     Le cobalt d'interface est assombri pour atteindre 4,94:1. */
  --cobalt:       #0f6cb0;   /* interface : liens, boutons, labels */
  --cobalt-deep:  #0a5490;
  --cobalt-vif:   #168dd1;   /* bandes et aplats uniquement */
  --petrole:      #0082ae;
  --petrole-deep: #00506d;
  --turquoise:    #7fcdd9;
  --vert-acide:   #b4d806;
  --vert:         #6b8a10;   /* version assombrie, pour le texte */
  --vert-deep:    #4f6a0c;   /* texte sur fond teinte olive : 5,6:1 la ou --vert tombe a 3,1:1 */
  --orange:       #eb8509;   /* JAMAIS de texte dessus : 2,6:1 max */
  --orange-deep:  #c4770f;
  --rouge:        #b3261e;   /* erreurs uniquement */

  /* ---- Un niveau = une bande du tableau ----
     Quatre bandes pour quatre niveaux. C1 sort du paysage et prend le noir
     de l'arbre : la silhouette se tient SUR le champ, elle n'est pas une
     bande de plus. C'est le sommet du parcours. */
  --n-a1: var(--cobalt-vif);
  --n-a2: #2aa9b5;
  --n-b1: var(--vert-acide);
  --n-b2: var(--orange);
  --n-c1: var(--ink);

  /* ---- Traits ---- */
  --line:        rgba(20, 16, 14, 0.16);
  --line-strong: rgba(20, 16, 14, 0.40);

  /* ---- Alias hérités ----
     Ces noms datent de l'ancienne charte et ne décrivent plus leur
     valeur. Conservés pour ne pas casser ~1600 références existantes.
     À supprimer le jour où on renomme les usages. */
  --paper:         var(--toile);
  --paper-warm:    var(--toile-warm);
  --paper-deep:    var(--toile-deep);
  --burgundy:      var(--cobalt);
  --burgundy-soft: var(--cobalt-deep);
  --ochre:         var(--orange);
  --ochre-deep:    var(--orange-deep);
  --olive:         var(--vert);
  --bleu:          var(--petrole-deep);
}

/* ---- La bande d'horizon : miniature du tableau, en ouverture de page ---- */
.horizon {
  height: 14px;
  position: relative;
  background: linear-gradient(to bottom,
    var(--cobalt-vif) 0 26%,
    var(--turquoise)  26% 46%,
    var(--vert-acide) 46% 60%,
    var(--orange)     60% 100%);
}

/* ---- Effets de l'ancienne charte, neutralisés ----
   Le grain et les dégradés radiaux simulaient une texture sans en
   produire ; le fleuron était un ornement décoratif de trop. */
body::before,
body::after { display: none !important; }
.hero-ornament { display: none !important; }

/* ---- Transition entre pages : la page se pose, elle n'arrive pas ----
   Fondu d'entrée systématique (déclaratif, aucun JS requis) et classe
   .fc-fade-out posée par l'intercepteur de clics des pages qui l'utilisent
   avant de naviguer. Meme duree (150ms) dans les deux sens. */
body { animation: fc-page-in .15s ease both; }
body.fc-fade-out { animation: fc-page-out .15s ease both; }
@keyframes fc-page-in  { from { opacity: 0; } to   { opacity: 1; } }
@keyframes fc-page-out { from { opacity: 1; } to   { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  body, body.fc-fade-out { animation: none; }
}