/* =====================================================================
   THÈME : les couleurs et les polices de la direction artistique.
   Tout le site lit ces rôles ; aucune couleur n'est écrite ailleurs.

   Direction A, « Itinéraire de nuit », retenue par Anthony le 9/11/2026.
   Deux couleurs font 90 % du site : l'asphalte et le blanc cassé.
   L'accent, 10 % : le vert d'un feu tricolore, plus bleuté que le vert
   des applis de VTC (Bolt : 151° de teinte ; ici : 167°). Il ne sert qu'à
   ce qui se clique et à ce qui avance : boutons, question en cours,
   progression, score.

   Deux thèmes, mêmes couleurs, mêmes rôles :
   - nuit (par défaut) : asphalte au fond ;
   - plein soleil (html[data-theme="clair"]) : blanc cassé au fond, pour
     lire dehors. L'accent garde sa teinte ; quand il sert de couleur de
     texte sur fond clair, il passe à sa version foncée (--vert-fonce),
     sinon il serait illisible (1,5 : 1).
   Contrastes mesurés : voir public/_da/systeme.html.
   ===================================================================== */
:root {
  /* --- les couleurs --- */
  --asphalte: #14171B;
  --blanc: #EFEBE2;
  --vert: #22DDB5;
  --vert-fonce: #006B57;       /* le même vert, pour du texte sur fond clair */

  /* --- rôles : thème nuit --- */
  --c-fond: var(--asphalte);
  --c-surface: #1D2127;                       /* asphalte un ton plus haut */
  --c-texte: var(--blanc);                    /* 15,1 : 1 */
  --c-texte-doux: rgba(239, 235, 226, .68);   /* 7,5 : 1 */
  --c-trait: rgba(239, 235, 226, .16);
  --c-trait-fort: rgba(239, 235, 226, .4);

  --c-inverse-fond: var(--blanc);             /* sections de l'autre couleur */
  --c-inverse-texte: var(--asphalte);
  --c-inverse-doux: rgba(20, 23, 27, .68);    /* 5,7 : 1 */
  --c-inverse-trait: rgba(20, 23, 27, .16);
  --c-inverse-accent: var(--vert-fonce);      /* l'accent en texte sur une section claire */

  --c-papier: var(--blanc);                   /* champs, copies, textes à lire */
  --c-papier-texte: var(--asphalte);
  --c-papier-doux: rgba(20, 23, 27, .62);

  --c-accent: var(--vert);                    /* fonds : boutons, progression */
  --c-sur-accent: var(--asphalte);            /* texte sur l'accent : 10,3 : 1 */
  --c-accent-texte: var(--vert);              /* accent en texte : 10,3 : 1 */
  --c-accent-trace: var(--vert);              /* traits et pastilles de progression */
  --c-accent-halo: rgba(34, 221, 181, .2);
  --c-accent-surligne: rgba(34, 221, 181, .55);

  /* --- polices --- */
  --f-titre: "Barlow Condensed", "Arial Narrow", "Roboto Condensed", sans-serif;
  --f-texte: "Barlow", "Segoe UI", system-ui, -apple-system, sans-serif;
  --titre-casse: uppercase;
  --titre-graisse: 700;
  --titre-espace: .02em;
  color-scheme: dark;
}

/* --- rôles : thème plein soleil --- */
:root[data-theme="clair"] {
  --c-fond: var(--blanc);
  --c-surface: #E4DFD4;                       /* blanc cassé un ton plus bas */
  --c-texte: var(--asphalte);                 /* 15,1 : 1 */
  --c-texte-doux: rgba(20, 23, 27, .74);      /* 6,9 : 1 */
  --c-trait: rgba(20, 23, 27, .16);
  --c-trait-fort: rgba(20, 23, 27, .45);

  --c-inverse-fond: var(--asphalte);
  --c-inverse-texte: var(--blanc);
  --c-inverse-doux: rgba(239, 235, 226, .72);
  --c-inverse-trait: rgba(239, 235, 226, .16);
  --c-inverse-accent: var(--vert);

  --c-papier: #FFFFFF;                        /* le champ se détache du fond */
  --c-papier-texte: var(--asphalte);
  --c-papier-doux: rgba(20, 23, 27, .62);

  --c-accent: var(--vert);
  --c-sur-accent: var(--asphalte);
  --c-accent-texte: var(--vert-fonce);        /* 5,5 : 1 sur le fond */
  --c-accent-trace: var(--vert-fonce);        /* un trait vert clair disparaîtrait au soleil */
  --c-accent-halo: rgba(0, 107, 87, .16);
  --c-accent-surligne: rgba(34, 221, 181, .6);
  color-scheme: light;
}