/* Styles communs à toutes les pages. Chaque page les complète ou les
   surcharge dans son propre <style>, chargé après ce fichier.

   Toutes les couleurs passent par les variables ci-dessous : c'est ce qui
   permet le mode sombre. Une couleur écrite en dur dans une page ne suivrait
   pas — ajoute plutôt une variable ici, avec sa valeur dans les deux thèmes.

   Le thème suit le réglage du téléphone ; le bouton 🌙 / ☀️ à côté du titre
   l'impose (voir theme.js), via l'attribut data-theme de <html>. */
:root {
  color-scheme: light;
  --card: #fff;
  --card-passe: #fafaf8;
  --text: #1a1a18;
  --muted: #6b6b66;
  --muted-doux: #9a9a94;
  --border: #e0e0da;
  --border-doux: #e6e6e0;
  --neutre: #f0f0ec;
  --neutre-doux: #f6f6f3;
  --neutre-fort: #55554f;
  --accent: #185fa5;
  --accent-fort: #14508c;
  --accent-bg: #e6f1fb;
  --accent-bg-fort: #d6e8f8;
  --accent-border: #c4dcf2;
  --accent-border-doux: #cfe2f5;
  --danger: #a32d2d;
  --danger-fort: #8a2626;
  --danger-bg: #fcebeb;
  --danger-border: #f3caca;
  --success: #0f6e56;
  --success-bg: #e1f5ee;
  --success-border: #b9e6d4;
  --violet: #5b3fa8;
  --violet-bg: #efeafb;
  --warn: #8a5a12;
  --warn-fort: #6b4a10;
  --warn-bg: #fdf2dd;
  --warn-border: #e8cf9a;
  --warn-card: #fffdf7;
  --orange: #92600a;
  --orange-bg: #fdf1de;
  --orange-bg-fort: #fbe6c2;
  --orange-border: #f0d9ad;
  --perso: #6b3fa0;
  --perso-bg: #f3ecfa;
  --perso-border: #ded0ef;
  --perso-card: #f6f2fb;
  --ombre: rgba(20, 20, 15, 0.05);
  --voile: rgba(255, 255, 255, 0.78);
  --bandeau-info-fond: #1a1a18;
  --bandeau-info-texte: #fff;
  --fond-1: #dcebfa;
  --fond-2: #fbe6e6;
  --fond-3: #eef2f6;
  --fond-4: #f4f4f2;
  --fond-5: #f6f1ea;
}

/* Thème sombre : deux sélecteurs pour une même palette, l'un quand le
   téléphone est réglé en sombre (sauf choix contraire), l'autre quand on l'a
   choisi à la main. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="clair"]) {
    color-scheme: dark;
    --card: #1f2125;
    --card-passe: #1a1c1f;
    --text: #e8e8e3;
    --muted: #a2a29b;
    --muted-doux: #7d7d77;
    --border: #3a3d42;
    --border-doux: #33363b;
    --neutre: #2c2f33;
    --neutre-doux: #26292d;
    --neutre-fort: #c4c4bd;
    --accent: #3d86d6;
    --accent-fort: #2f6fb5;
    --accent-bg: #1c2f45;
    --accent-bg-fort: #24405f;
    --accent-border: #2c4a6b;
    --accent-border-doux: #2c4a6b;
    --danger: #d9534f;
    --danger-fort: #b8403c;
    --danger-bg: #3a1f1f;
    --danger-border: #5a2a2a;
    --success: #2e9e7d;
    --success-bg: #183a31;
    --success-border: #275a4b;
    --violet: #b59cf0;
    --violet-bg: #2c2440;
    --warn: #e0b060;
    --warn-fort: #f0c27a;
    --warn-bg: #3a2f17;
    --warn-border: #6a5328;
    --warn-card: #26241d;
    --orange: #f0b45a;
    --orange-bg: #3a2c16;
    --orange-bg-fort: #4a3719;
    --orange-border: #6b5126;
    --perso: #c6a6f0;
    --perso-bg: #2d2540;
    --perso-border: #4a3b66;
    --perso-card: #231f2c;
    --ombre: rgba(0, 0, 0, 0.35);
    --voile: rgba(255, 255, 255, 0.04);
    --bandeau-info-fond: #e8e8e3;
    --bandeau-info-texte: #111;
    --fond-1: #16263a;
    --fond-2: #2a1a1d;
    --fond-3: #14161a;
    --fond-4: #16181b;
    --fond-5: #1a1816;
  }
}
:root[data-theme="sombre"] {
  color-scheme: dark;
  --card: #1f2125;
  --card-passe: #1a1c1f;
  --text: #e8e8e3;
  --muted: #a2a29b;
  --muted-doux: #7d7d77;
  --border: #3a3d42;
  --border-doux: #33363b;
  --neutre: #2c2f33;
  --neutre-doux: #26292d;
  --neutre-fort: #c4c4bd;
  --accent: #3d86d6;
  --accent-fort: #2f6fb5;
  --accent-bg: #1c2f45;
  --accent-bg-fort: #24405f;
  --accent-border: #2c4a6b;
  --accent-border-doux: #2c4a6b;
  --danger: #d9534f;
  --danger-fort: #b8403c;
  --danger-bg: #3a1f1f;
  --danger-border: #5a2a2a;
  --success: #2e9e7d;
  --success-bg: #183a31;
  --success-border: #275a4b;
  --violet: #b59cf0;
  --violet-bg: #2c2440;
  --warn: #e0b060;
  --warn-fort: #f0c27a;
  --warn-bg: #3a2f17;
  --warn-border: #6a5328;
  --warn-card: #26241d;
  --orange: #f0b45a;
  --orange-bg: #3a2c16;
  --orange-bg-fort: #4a3719;
  --orange-border: #6b5126;
  --perso: #c6a6f0;
  --perso-bg: #2d2540;
  --perso-border: #4a3b66;
  --perso-card: #231f2c;
  --ombre: rgba(0, 0, 0, 0.35);
  --voile: rgba(255, 255, 255, 0.04);
  --bandeau-info-fond: #e8e8e3;
  --bandeau-info-texte: #111;
  --fond-1: #16263a;
  --fond-2: #2a1a1d;
  --fond-3: #14161a;
  --fond-4: #16181b;
  --fond-5: #1a1816;
}

* { box-sizing: border-box; }
html { min-height: 100%; }
body {
  margin: 0; font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  color: var(--text); padding: 1.5rem; min-height: 100vh;
  background:
    radial-gradient(circle at 8% 0%, var(--fond-1) 0%, transparent 42%),
    radial-gradient(circle at 100% 12%, var(--fond-2) 0%, transparent 38%),
    linear-gradient(180deg, var(--fond-3) 0%, var(--fond-4) 55%, var(--fond-5) 100%);
  background-color: var(--fond-4);
  background-attachment: fixed;
}
.wrap { margin: 0 auto; max-width: 1000px; }

/* Barre d'onglets et en-tête. */
.tabs { display: flex; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }
.tab {
  font-size: 13px; padding: 6px 14px; border-radius: 20px; text-decoration: none;
  color: var(--muted); border: 1px solid var(--border); background: var(--card);
}
.tab.on { background: var(--accent); color: #fff; border-color: var(--accent); font-weight: 500; }
/* Le bouton de thème, ajouté par theme.js à côté du titre de la page. */
.theme-btn {
  margin-left: 8px; vertical-align: 3px; font-size: 12px; line-height: 1;
  padding: 3px 7px; border-radius: 20px;
  border: 1px solid var(--border); background: var(--card); cursor: pointer;
}
.theme-btn:hover { border-color: var(--accent); }
header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 1.25rem; flex-wrap: wrap; gap: 12px;
}
h1 { font-size: 21px; font-weight: 700; margin: 0; letter-spacing: -0.01em; }
.tagline { font-size: 13px; color: var(--muted); margin: 2px 0 4px; }
.who { font-size: 13px; color: var(--muted); }
.who a { color: var(--accent); cursor: pointer; margin-left: 10px; }
.banner {
  display: none; background: var(--accent); color: #fff; font-size: 14px; font-weight: 500;
  text-align: center; padding: 12px 18px;
}

/* Un lien habillé en bouton ne se souligne pas. */
a.btn { text-decoration: none; display: inline-block; }

.panel {
  background: var(--card); border: 1px solid var(--border); border-radius: 14px;
  padding: 1.25rem; box-shadow: 0 1px 3px var(--ombre); margin-bottom: 18px;
}
.empty { color: var(--muted); font-size: 14px; padding: 2rem; text-align: center; }