/* ============================================================= THEME UNIQUE (clair & sombre) – variante « B » ------------------------------------------------------------- ✱ Default : light theme (variables dans :root) ✱ Dark : ajoutez simplement `class="dark"` ou `data-theme="dark"` sur / ------------------------------------------------------------- ➜ Les vraies règles (body, h1, etc.) utilisent uniquement des variables. Aucune couleur “en dur” en dehors des palettes ci-dessous, ce qui rend la maintenance DRY ! ============================================================= */ /* ----------------------------- 1. PALETTE — LIGHT (par défaut) ----------------------------- */ :root { /* Bases */ --body-bg-img: url("fond_clair.png"); --body-text: #000; /* Texte accentué */ --accent-blue: rgb(6, 6, 226); /* Titres (h1) */ --h1-bg: rgba(255, 255, 255, 0.7); --h1-shadow: 5px 4px 15px -1px #000000; --h1-border: none; /* Conteneurs génériques */ --container-bg: rgba(255, 255, 255, 0.6); --container-blur: 60px; --container-border: transparent; --container-shadow: 5px 4px 15px -1px #000000; --card-h2-bg: #f8f9fa; /* Fond des h2 dans les cartes (hors .lecon) */ --card-h2-border: #6ec5db; /* Conteneurs .lecon */ --lecon-border: 5px solid rgba(241, 21, 21, 0.8); --lecon-h2-bg: rgba(236, 125, 125, 0.8); /* Tables */ --table-border: #140c0c; --table-head-bg: rgb(187, 215, 243); --table-row-even-bg: rgb(229, 236, 243); /* Liens & menu */ --link-color: black; --dropdown-bg: rgba(245, 252, 253, 0.9); --dropdown-link-color: black; --dropdown-link-hover-bg: #ddd; --dropdown-blur: blur(50px) brightness(1.2); --dropdown-mobile-bg: #f7e9e9; /* fond clair pour sous-menu en mobile */ /* couleur des balises

 */
  --balise-code : rgb(244, 27, 27);
}

/* -----------------------------
   2. PALETTE — DARK (override)
   ----------------------------- */
.dark {
  --body-bg-img: url("/static/css/fond_sombre.webp");
  --body-text: rgb(255, 245, 217);

  --accent-blue: rgb(224, 243, 247);

  --h1-bg: rgb(33, 37, 41);
  --h1-shadow: inset 0 0 10px rgba(0, 0, 0, 0.2);
  --h1-border: 1px solid rgb(255, 245, 217);

  --container-bg: rgba(20, 20, 20, 0.55);
  --container-blur: 80px;
  --container-border: 2px solid rgba(0, 0, 0, 0.5);
  --container-shadow: 8px 8px 20px rgba(238, 232, 232, 0.3);
  --card-h2-bg: rgb(52, 58, 64);
  --card-h2-border: rgb(244, 247, 251);

  --lecon-border: 5px solid rgba(159, 14, 14, 0.8);
  --lecon-h2-bg: rgba(159, 14, 14, 0.8);

  --table-border: #ddd;
  --table-head-bg: rgb(33, 37, 41);
  --table-row-even-bg: rgb(31, 48, 65);

  --link-color: rgb(249, 255, 234);
  --dropdown-bg: rgba(0, 0, 0, 0.8);
  --dropdown-link-color: rgb(249, 255, 234);
  --dropdown-link-hover-bg: #252233;
  --dropdown-blur: blur(70px);
  --dropdown-mobile-bg: #181717; /* fond sombre pour sous-menu en mobile */

  /* couleur des balises  */
  --balise-code : rgb(234, 55, 55);
}

/* =============================================================
   3. RÈGLES COMMUNES (utilisent les variables ci-dessus)
   ============================================================= */

/* -------- BODY -------- */
body {
  background-image: var(--body-bg-img);
  background-repeat: repeat-y;
  background-size: 100% auto;
  color: var(--body-text);
}

/* -------- TITRE PRINCIPAL -------- */
h1 {
  font-family: 'Poppins', sans-serif;
  font-size: 3rem;
  text-align: center;
  margin-top: 20px;
  padding: 10px 20px;
  border-radius: 10px;
  background-color: var(--h1-bg);
  backdrop-filter: blur(100px);
  -webkit-backdrop-filter: blur(100px);
  box-shadow: var(--h1-shadow);
  border: var(--h1-border);
  color: var(--body-text);
}


code {
  color: var(--balise-code);
}



/* -------- TEXTES ACCENTUÉS -------- */
.exemple,
.demonstration,
.lecon {
  color: var(--accent-blue);
}

/* -------- CONTENEURS GÉNÉRIQUES -------- */
.container > div {
  background-color: var(--container-bg);
  backdrop-filter: blur(var(--container-blur));
  -webkit-backdrop-filter: blur(var(--container-blur));
}

/* Bordure + ombrage seulement pour les conteneurs « classiques » (pas .lecon) */
.container > div:not(.lecon) {
  border: var(--container-border);
  box-shadow: var(--container-shadow);
}

/* Titre dans les conteneurs (hors .lecon) */
.container > div:not(.lecon) h2 {
  background-color: var(--card-h2-bg);
  border: 1px solid var(--card-h2-border); 
  box-shadow: 0 4px 15px rgba(255, 255, 255, 0.5);
}

/* -------- CONTENEUR .LECON -------- */
.lecon {
  border: var(--lecon-border);
  box-shadow: 0px 30px 60px rgba(0, 0, 0, 0.4),
              0px 20px 20px rgba(0, 0, 0, 0.3);
}

.lecon .h2-lecon {
  background-color: var(--lecon-h2-bg);
}

/* -------- LIENS / MENU -------- */
a {
  color: var(--link-color);
}


.dropdown-content {
  background-color: var(--dropdown-bg);
  backdrop-filter: var(--dropdown-blur);
  -webkit-backdrop-filter: var(--dropdown-blur);
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
}

.dropdown-content a {
  color: var(--dropdown-link-color);
}

.dropdown-content a:hover {
  background-color: var(--dropdown-link-hover-bg);
}

/* -------- TABLES -------- */

/* Bordure & espacement des cellules */
table th, table td {
  border: 1px solid var(--table-border);
}

/* En-têtes de colonne */
table th {
  background-color: var(--table-head-bg);
}

/* Alternance de couleurs */
table tr:nth-child(even) {
  background-color: var(--table-row-even-bg);
}

/* -------- RÉSPONSIVE -------- */
@media screen and (max-width: 900px) {
  .nav-links { background-color: #333; }
  .dropdown-content { background-color: var(--dropdown-mobile-bg); }
}

/* =============================================================
   FIN DU FICHIER ❦
   ============================================================= */