/* ============================================================
   VARIABLES : couleurs, polices, tailles
   Thème unique, toujours sombre.
   ============================================================ */
:root {
  color-scheme: dark;

  /* Fonds (bleu-noir, du plus sombre au plus clair) */
  --fond: #0a1014;
  --fond-2: #0d151a;
  --surface: #111a20;
  --surface-2: #16222a;

  /* Lignes et bordures */
  --ligne: #1d2a32;
  --ligne-forte: #2a3a44;

  /* Textes */
  --texte: #e4eaed;
  --texte-2: #97a5ae;
  --texte-3: #7f8d98;   /* petits textes : éclairci pour la lisibilité */
  --texte-lecture: #c2ccd2; /* paragraphes longs */

  /* Accents : vert principal, bleu secondaire */
  --vert: #5dcb95;
  --vert-clair: #86dcb1;
  --vert-fond: rgba(93, 203, 149, 0.08);
  --vert-bord: rgba(93, 203, 149, 0.35);
  --bleu: #6fa6df;
  --bleu-fond: rgba(111, 166, 223, 0.08);
  --bleu-bord: rgba(111, 166, 223, 0.35);

  /* Couleurs des lueurs du fond (R, G, B) */
  --lueur-1: 46, 84, 120;
  --lueur-2: 93, 203, 149;

  /* Polices */
  --police-titres: "Flink Neue", "Red Hat Display", "Segoe UI", system-ui, sans-serif;
  --police-texte: "Red Hat Display", "Segoe UI", system-ui, -apple-system, sans-serif;
  --police-mono: "JetBrains Mono", ui-monospace, "Cascadia Mono", "Consolas", monospace;

  /* Tailles de texte (modifiables dans admin.html, onglet Apparence) */
  --echelle-generale: 1;      /* tout le texte du site */
  --taille-libelles: 1.05rem; /* libellés verts au-dessus des sections */
  --echelle-titres: 1;        /* grands titres blancs */
  --echelle-nom: 1;           /* nom en haut de page */

  /* Mise en page */
  --largeur: 1120px;
  --gouttiere: clamp(16px, 4vw, 40px);
  --hauteur-nav: 58px;
  --hauteur-entete: 86px; /* espace réservé sous la barre flottante */
  --rayon: 6px;
  --rayon-petit: 6px;

  /* Mouvement */
  --courbe: cubic-bezier(0.2, 0.7, 0.2, 1);
  --duree: 0.6s;
}

/* ============================================================
   PALETTE NOIR ET BLANC (onglet Apparence de l'éditeur)
   Toujours sombre : ni noir pur, ni blanc éclatant.
   Trois niveaux de gris pour le fond.
   ============================================================ */
html[data-palette="mono"] {
  --vert: #d5d9dc;
  --vert-clair: #eceef0;
  --vert-fond: rgba(213, 217, 220, 0.07);
  --vert-bord: rgba(213, 217, 220, 0.28);
  --bleu: #aab1b6;
  --bleu-fond: rgba(170, 177, 182, 0.07);
  --bleu-bord: rgba(170, 177, 182, 0.28);
  --texte: #e3e5e7;
  --texte-2: #a3a8ac;
  --texte-3: #858b90;
  --texte-lecture: #c6cacd;
  --lueur-1: 150, 156, 162;
  --lueur-2: 150, 156, 162;
  /* Niveau 1 (par défaut) : anthracite */
  --fond: #0f1113;
  --fond-2: #131517;
  --surface: #17191c;
  --surface-2: #1d2023;
  --ligne: #25282b;
  --ligne-forte: #33373b;
}
html[data-palette="mono"][data-gris="2"] {
  /* Niveau 2 : graphite */
  --fond: #16181a;
  --fond-2: #1a1c1f;
  --surface: #1f2225;
  --surface-2: #25282c;
  --ligne: #2d3034;
  --ligne-forte: #3b3f44;
}
html[data-palette="mono"][data-gris="3"] {
  /* Niveau 3 : ardoise, le plus clair (reste sombre) */
  --fond: #1e2023;
  --fond-2: #222528;
  --surface: #282b2f;
  --surface-2: #2e3236;
  --ligne: #373b40;
  --ligne-forte: #464b51;
  --texte-3: #8f959a;
}
/* En noir et blanc, le bouton principal garde un texte foncé lisible */
html[data-palette="mono"] .bouton--principal { color: #111315; }