/**
 * ============================================================
 * Fichier : themes.css
 * Projet : OUTIL DE CALCUL DE TEMPS
 * Auteur : Émile Snyers — Date : 2026-05-08 — Version : 1.0.2
 * Description : 6 thèmes visuels vraiment distincts.
 * ============================================================
 */

/* ================================================================
 * THÈME 1 — CLAIR (Moderne, épuré, cartes flottantes)
 * En-tête bleu dégradé, modules en cartes blanches avec ombre
 * ================================================================ */
.theme-clair {
  --couleur-fond: #f0f4ff;
  --couleur-fond-entete: #0969da;
  --couleur-fond-controle: #ffffff;
  --couleur-fond-resultat: #ffffff;
  --couleur-texte: #1a2332;
  --couleur-texte-entete: #ffffff;
  --couleur-bordure: #dde3f0;
  --couleur-accent: #0969da;
  background: var(--couleur-fond);
  color: var(--couleur-texte);
}
.theme-clair .entete {
  background: linear-gradient(135deg, #0969da 0%, #1565c0 100%);
  border-bottom: none;
  box-shadow: 0 4px 24px rgba(9, 105, 218, 0.3);
  color: #fff;
}
.theme-clair .entete h1,
.theme-clair .entete .accroche,
.theme-clair .entete .horloge-temps-reel { color: #fff; }
.theme-clair .entete-droite select,
.theme-clair .entete-droite button,
.theme-clair .entete-droite .btn-retour {
  background: rgba(255,255,255,0.18);
  border-color: rgba(255,255,255,0.35);
  color: #fff;
}
.theme-clair .entete-droite button:hover,
.theme-clair .entete-droite select:hover,
.theme-clair .entete-droite .btn-retour:hover { background: rgba(255,255,255,0.32); color: #fff; }
/* Options du sélecteur : fond blanc, texte sombre pour lisibilité */
.theme-clair .entete-droite select option { background-color: #ffffff; color: #1a2332; }
.theme-clair .horloge-temps-reel {
  background: rgba(255,255,255,0.15);
  border-color: rgba(255,255,255,0.3);
}
.theme-clair .module.actif {
  background: #fff;
  border-radius: 16px;
  padding: 2rem;
  box-shadow: 0 2px 20px rgba(9,105,218,0.09), 0 1px 4px rgba(0,0,0,0.06);
  border: 1px solid rgba(9,105,218,0.08);
}
.theme-clair .resultat-grand {
  border: none;
  background: linear-gradient(135deg, #f0f7ff, #e8f0fe);
  box-shadow: 0 4px 16px rgba(9,105,218,0.1);
  border-radius: 16px;
}
.theme-clair .onglet {
  border-radius: 10px;
  font-weight: 500;
}
.theme-clair .onglet.actif {
  box-shadow: 0 4px 14px rgba(9,105,218,0.35);
}
.theme-clair .planning-section {
  border-radius: 16px;
  border: 1px solid rgba(9,105,218,0.12);
  background: #fff;
  box-shadow: 0 2px 12px rgba(9,105,218,0.07);
}
.theme-clair .pied-page {
  background: linear-gradient(135deg, #1565c0 0%, #0969da 100%);
  border-top: none;
  color: rgba(255,255,255,0.9);
}
.theme-clair .pied-page a { color: #cfe2ff; }
.theme-clair .badge-xp { background: rgba(255,255,255,0.25); }
/* Sidebar : fond blanc, texte sombre — contraste maximal */
.theme-clair .menu-lateral {
  background: #ffffff;
  border-right-color: #dde3f0;
  box-shadow: 2px 0 12px rgba(9,105,218,0.07);
}
.theme-clair .menu-lateral-titre { color: #8fa3c0; }
.theme-clair .menu-lateral-btn { color: #1a2332; }
.theme-clair .menu-lateral-btn:hover { background: rgba(9,105,218,0.08); color: #0969da; transform: translateX(3px); }
.theme-clair .menu-lateral-btn.actif { background: #0969da; color: #fff; box-shadow: 0 2px 8px rgba(9,105,218,0.35); }
.theme-clair .menu-lateral-btn.actif:hover { background: #0757b8; color: #fff; }
.theme-clair .menu-lateral-hr { border-color: #dde3f0; }
.theme-clair .menu-lateral-pied { border-top-color: #dde3f0; }
.theme-clair .menu-lateral-toggle { color: #6b7f9a; border-color: #dde3f0; }
.theme-clair .menu-lateral-toggle:hover { background: #f0f4ff; color: #0969da; border-color: #0969da; }

/* ================================================================
 * THÈME 2 — SOMBRE (Glassmorphisme, profondeur, nébulosité)
 * ================================================================ */
.theme-sombre {
  --couleur-fond: #0d1117;
  --couleur-fond-entete: #161b22;
  --couleur-fond-controle: rgba(33, 38, 50, 0.85);
  --couleur-fond-resultat: rgba(28, 33, 44, 0.9);
  --couleur-texte: #e6edf3;
  --couleur-bordure: #30363d;
  --couleur-accent: #58a6ff;
  background: radial-gradient(ellipse at 30% 20%, #1a1f36 0%, #0d1117 60%);
  color: var(--couleur-texte);
}
.theme-sombre .entete {
  background: rgba(22, 27, 34, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(48,54,61,0.8);
  box-shadow: 0 1px 0 rgba(255,255,255,0.04), 0 4px 24px rgba(0,0,0,0.4);
}
.theme-sombre .module.actif {
  background: rgba(22, 27, 34, 0.7);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(48,54,61,0.9);
  border-radius: 14px;
  padding: 2rem;
  box-shadow: 0 8px 32px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.04);
}
.theme-sombre .resultat-grand {
  border: 1px solid rgba(88,166,255,0.2);
  background: rgba(21, 27, 40, 0.95);
  box-shadow: 0 0 40px rgba(88,166,255,0.06), inset 0 1px 0 rgba(255,255,255,0.04);
  border-radius: 14px;
}
.theme-sombre .heure-fin { text-shadow: 0 0 20px rgba(88,166,255,0.4); }
.theme-sombre .planning-section {
  background: rgba(22, 27, 34, 0.7);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(48,54,61,0.9);
  border-radius: 14px;
}
.theme-sombre .onglet.actif {
  box-shadow: 0 4px 16px rgba(88,166,255,0.2);
  border-color: rgba(88,166,255,0.4);
}
.theme-sombre .formulaire input,
.theme-sombre .formulaire select {
  background: rgba(13,17,23,0.8);
  backdrop-filter: blur(4px);
}
.theme-sombre .entete-droite select option { background-color: #161b22; color: #e6edf3; }

/* ================================================================
 * THÈME 3 — RÉTRO (Journal vintage, encre & papier, typographie forte)
 * ================================================================ */
.theme-retro {
  --couleur-fond: #f2e8d0;
  --couleur-fond-entete: #2c1810;
  --couleur-fond-controle: #fdf6e3;
  --couleur-fond-resultat: #fdf0d5;
  --couleur-texte: #2c1810;
  --couleur-texte-entete: #f2e8d0;
  --couleur-bordure: #8b6914;
  --couleur-accent: #8b3a0f;
  background: var(--couleur-fond);
  color: var(--couleur-texte);
  font-family: 'Georgia', 'Times New Roman', serif;
}
/* Grain papier */
.theme-retro::before {
  content: '';
  position: fixed; inset: 0;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 9998;
  mix-blend-mode: multiply;
}
.theme-retro .entete {
  background: #2c1810;
  border-bottom: 4px solid #8b6914;
  color: #f2e8d0;
  padding: 1.2rem 1.5rem;
}
.theme-retro .entete h1 {
  font-size: 1.8rem;
  letter-spacing: 6px;
  text-transform: uppercase;
  color: #f2e8d0;
  font-weight: 900;
  border-top: 1px solid rgba(242,232,208,0.4);
  border-bottom: 1px solid rgba(242,232,208,0.4);
  padding: 0.2rem 0;
}
.theme-retro .entete .accroche { color: rgba(242,232,208,0.75); font-style: italic; font-size: 0.85rem; }
.theme-retro .entete .horloge-temps-reel { color: #f2e8d0; border-color: rgba(242,232,208,0.3); background: rgba(242,232,208,0.1); }
.theme-retro .entete-droite select,
.theme-retro .entete-droite button,
.theme-retro .entete-droite .btn-retour { background: rgba(242,232,208,0.15); border-color: rgba(242,232,208,0.3); color: #f2e8d0; }
.theme-retro .entete-droite .btn-retour:hover { background: rgba(242,232,208,0.3); color: #f2e8d0; }
.theme-retro .entete-droite select option { background-color: #f2e8d0; color: #2c1810; }
.theme-retro .module h2 {
  font-size: 1.4rem;
  text-transform: uppercase;
  letter-spacing: 3px;
  border-bottom: 2px solid var(--couleur-bordure);
  padding-bottom: 0.5rem;
  font-weight: 900;
}
.theme-retro .resultat-grand {
  border: 3px double var(--couleur-bordure);
  background: #fdf6e3;
  position: relative;
}
.theme-retro .resultat-grand::before {
  content: '⟨ RÉSULTAT ⟩';
  position: absolute;
  top: -0.65rem;
  left: 50%;
  transform: translateX(-50%);
  background: #fdf6e3;
  padding: 0 0.5rem;
  font-size: 0.7rem;
  letter-spacing: 3px;
  color: var(--couleur-bordure);
  font-family: 'Georgia', serif;
}
.theme-retro .heure-fin {
  font-size: 5rem;
  font-family: 'Courier New', monospace;
  color: #8b3a0f;
  text-shadow: 2px 2px 0 rgba(44,24,16,0.15);
  letter-spacing: 4px;
}
.theme-retro .onglet { border-radius: 0; border: 1px solid var(--couleur-bordure); font-family: 'Georgia', serif; }
.theme-retro .onglet.actif { background: #2c1810; color: #f2e8d0; }
.theme-retro .formulaire input,
.theme-retro .formulaire select { border-radius: 0; border: 1px solid var(--couleur-bordure); border-bottom-width: 2px; }
.theme-retro .pied-page { background: #2c1810; border-top: 4px solid #8b6914; color: #f2e8d0; }
.theme-retro .pied-page a { color: #e8c97e; }
.theme-retro .planning-section { border: 2px solid var(--couleur-bordure); border-radius: 0; }
/* Sidebar : fond brun foncé → texte ivoire */
.theme-retro .menu-lateral-titre,
.theme-retro .menu-lateral-btn { color: rgba(242,232,208,0.8); font-family: 'Georgia', serif; }
.theme-retro .menu-lateral-btn:hover { background: rgba(242,232,208,0.12); color: #f2e8d0; transform: translateX(3px); }
.theme-retro .menu-lateral-btn.actif { background: rgba(242,232,208,0.2); color: #f2e8d0; }
.theme-retro .menu-lateral-btn.actif:hover { background: rgba(242,232,208,0.2); }
.theme-retro .menu-lateral-hr { border-color: rgba(242,232,208,0.2); }
.theme-retro .menu-lateral-toggle { color: rgba(242,232,208,0.6); border-color: rgba(242,232,208,0.2); font-family: 'Georgia', serif; }
.theme-retro .menu-lateral-toggle:hover { background: rgba(242,232,208,0.12); color: #f2e8d0; }

/* ================================================================
 * THÈME 4 — NÉON (Cyberpunk, scanlines, glow extrême)
 * ================================================================ */
.theme-neon {
  --couleur-fond: #060410;
  --couleur-fond-entete: #0c0820;
  --couleur-fond-controle: #110d28;
  --couleur-fond-resultat: #0e0a22;
  --couleur-texte: #c8f0ff;
  --couleur-bordure: #b400ff;
  --couleur-accent: #00ffe5;
  background: var(--couleur-fond);
  color: var(--couleur-texte);
  text-shadow: 0 0 6px rgba(200, 240, 255, 0.4);
}
/* Scanlines */
.theme-neon::after {
  content: '';
  position: fixed; inset: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent 0px,
    transparent 3px,
    rgba(0,255,229,0.025) 3px,
    rgba(0,255,229,0.025) 4px
  );
  pointer-events: none;
  z-index: 9997;
}
.theme-neon .entete {
  background: linear-gradient(135deg, #0c0820, #130830);
  border-bottom: 2px solid var(--couleur-bordure);
  box-shadow: 0 0 40px rgba(180,0,255,0.25), inset 0 -1px 0 rgba(180,0,255,0.4);
}
.theme-neon .entete h1 {
  font-size: 1.6rem;
  letter-spacing: 4px;
  color: #00ffe5;
  text-shadow: 0 0 10px #00ffe5, 0 0 30px rgba(0,255,229,0.4);
  text-transform: uppercase;
}
.theme-neon .entete .accroche { color: rgba(200,240,255,0.6); text-shadow: none; }
.theme-neon .entete .horloge-temps-reel {
  border-color: var(--couleur-bordure);
  box-shadow: 0 0 8px rgba(180,0,255,0.4);
  color: #00ffe5;
}
.theme-neon .entete-droite select,
.theme-neon .entete-droite button,
.theme-neon .entete-droite .btn-retour { border-color: var(--couleur-bordure); box-shadow: 0 0 6px rgba(180,0,255,0.3); }
.theme-neon .entete-droite .btn-retour { color: #c8f0ff; background: rgba(200,240,255,0.08); }
.theme-neon .entete-droite .btn-retour:hover { background: rgba(0,255,229,0.15); color: #00ffe5; }
.theme-neon .entete-droite select option { background-color: #0c0820; color: #c8f0ff; }
.theme-neon .module.actif {
  border: 1px solid rgba(0,255,229,0.25);
  border-radius: 4px;
  padding: 2rem;
  box-shadow: 0 0 30px rgba(0,255,229,0.06), inset 0 0 60px rgba(0,255,229,0.02);
}
.theme-neon .resultat-grand {
  border: 2px solid var(--couleur-accent);
  box-shadow: 0 0 30px rgba(0,255,229,0.2), inset 0 0 40px rgba(0,255,229,0.04);
  border-radius: 4px;
  background: #0a0820;
}
.theme-neon .heure-fin {
  font-size: 5rem;
  color: #00ffe5;
  text-shadow: 0 0 20px #00ffe5, 0 0 50px rgba(0,255,229,0.5), 0 0 80px rgba(0,255,229,0.2);
  letter-spacing: 6px;
}
.theme-neon .onglet { border-color: rgba(180,0,255,0.4); border-radius: 2px; }
.theme-neon .onglet.actif {
  background: rgba(0,255,229,0.12);
  color: #00ffe5;
  border-color: #00ffe5;
  box-shadow: 0 0 14px rgba(0,255,229,0.3);
}
.theme-neon .formulaire input,
.theme-neon .formulaire select {
  border-color: rgba(180,0,255,0.5);
  background: rgba(0,0,20,0.8);
  color: #00ffe5;
  border-radius: 2px;
}
.theme-neon .formulaire input:focus,
.theme-neon .formulaire select:focus { box-shadow: 0 0 12px rgba(0,255,229,0.4); }
.theme-neon .planning-section { border: 1px solid rgba(0,255,229,0.2); border-radius: 4px; box-shadow: 0 0 20px rgba(0,255,229,0.05); }
.theme-neon .pied-page { background: #0c0820; border-top: 2px solid var(--couleur-bordure); box-shadow: 0 -4px 24px rgba(180,0,255,0.2); }
.theme-neon .pied-page a { text-shadow: 0 0 8px var(--couleur-accent); }

/* ================================================================
 * THÈME 5 — INSTITUTIONNEL (Corporate, sobre, professionnel)
 * Sidebar tabs, structure documentaire, bleu marine strict
 * ================================================================ */
.theme-institutionnel {
  --couleur-fond: #f7f9fc;
  --couleur-fond-entete: #1a3a5c;
  --couleur-fond-controle: #ffffff;
  --couleur-fond-resultat: #eef4fb;
  --couleur-texte: #0d1f33;
  --couleur-bordure: #c8d8e8;
  --couleur-accent: #1a4d7a;
  background: var(--couleur-fond);
  color: var(--couleur-texte);
  font-family: 'Calibri', 'Segoe UI', Arial, sans-serif;
}
.theme-institutionnel .entete {
  background: #1a3a5c;
  border-bottom: 4px solid #c8960c;
  box-shadow: 0 2px 12px rgba(26,58,92,0.4);
  color: #fff;
}
.theme-institutionnel .entete h1 {
  font-size: 1.3rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #fff;
  font-weight: 700;
}
.theme-institutionnel .entete .accroche { color: rgba(255,255,255,0.7); font-style: normal; font-size: 0.8rem; }
.theme-institutionnel .entete .horloge-temps-reel { color: #fff; border-color: rgba(255,255,255,0.25); background: rgba(255,255,255,0.1); }
.theme-institutionnel .entete-droite select,
.theme-institutionnel .entete-droite button,
.theme-institutionnel .entete-droite .btn-retour { background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.25); color: #fff; }
.theme-institutionnel .entete-droite .btn-retour:hover { background: rgba(255,255,255,0.25); color: #fff; }
.theme-institutionnel .entete-droite select option { background-color: #f7f9fc; color: #0d1f33; }
.theme-institutionnel .zone-centrale { border-left: 4px solid #c8960c; padding-left: 2rem; }
.theme-institutionnel .module h2 {
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  padding: 0.6rem 1rem;
  background: #1a3a5c;
  color: #fff;
  border-left: 4px solid #c8960c;
  margin-bottom: 1.5rem;
  font-weight: 700;
}
.theme-institutionnel .resultat-grand {
  border: 1px solid var(--couleur-bordure);
  border-left: 4px solid var(--couleur-accent);
  border-radius: 0;
  background: #eef4fb;
}
.theme-institutionnel .heure-fin {
  font-size: 3.5rem;
  color: #1a3a5c;
  font-family: 'Calibri', Arial, sans-serif;
  font-weight: 700;
  letter-spacing: 1px;
}
.theme-institutionnel .onglet {
  border-radius: 0;
  border: 1px solid var(--couleur-bordure);
  border-bottom: none;
  font-weight: 600;
  font-size: 0.85rem;
}
.theme-institutionnel .onglet.actif {
  background: #1a3a5c;
  color: #fff;
  border-color: #1a3a5c;
  border-bottom: 2px solid #c8960c;
}
.theme-institutionnel .onglets { border-bottom: 2px solid #1a3a5c; }
.theme-institutionnel .formulaire input,
.theme-institutionnel .formulaire select { border-radius: 2px; border: 1px solid var(--couleur-bordure); }
.theme-institutionnel .planning-section { border-radius: 0; border-left: 4px solid var(--couleur-accent); }
.theme-institutionnel .pied-page { background: #1a3a5c; border-top: 4px solid #c8960c; color: rgba(255,255,255,0.85); }
.theme-institutionnel .pied-page a { color: #9ecfff; }
.theme-institutionnel .tableau-conversion th { background: #1a3a5c; }
/* Sidebar : fond bleu marine → texte blanc */
.theme-institutionnel .menu-lateral-titre,
.theme-institutionnel .menu-lateral-btn { color: rgba(255,255,255,0.8); font-family: 'Calibri', 'Segoe UI', Arial, sans-serif; }
.theme-institutionnel .menu-lateral-btn:hover { background: rgba(255,255,255,0.12); color: #fff; transform: translateX(3px); }
.theme-institutionnel .menu-lateral-btn.actif { background: rgba(200,150,12,0.35); color: #fff; border-left: 3px solid #c8960c; }
.theme-institutionnel .menu-lateral-btn.actif:hover { background: rgba(200,150,12,0.35); }
.theme-institutionnel .menu-lateral-hr { border-color: rgba(200,150,12,0.3); }
.theme-institutionnel .menu-lateral-toggle { color: rgba(255,255,255,0.6); border-color: rgba(200,150,12,0.3); }
.theme-institutionnel .menu-lateral-toggle:hover { background: rgba(255,255,255,0.1); color: #fff; }

/* ================================================================
 * THÈME 6 — NUCLÉAIRE (Terminal phosphore, CRT, bunker)
 * Monospace extrême, glow vert, scanlines lourdes
 * ================================================================ */
.theme-nucleaire {
  --couleur-fond: #011a08;
  --couleur-fond-entete: #000f04;
  --couleur-fond-controle: #021508;
  --couleur-fond-resultat: #011407;
  --couleur-texte: #00cc55;
  --couleur-bordure: #007722;
  --couleur-accent: #00ff66;
  background: var(--couleur-fond);
  color: var(--couleur-texte);
  font-family: 'Courier New', 'Consolas', monospace;
  text-shadow: 0 0 4px rgba(0, 255, 102, 0.6);
}
/* Scanlines CRT lourdes */
.theme-nucleaire::after {
  content: '';
  position: fixed; inset: 0;
  background: repeating-linear-gradient(
    0deg,
    rgba(0,0,0,0.12) 0px,
    rgba(0,0,0,0.12) 1px,
    transparent 1px,
    transparent 4px
  );
  pointer-events: none;
  z-index: 9997;
}
/* Légère courbure CRT sur le fond */
.theme-nucleaire::before {
  content: '';
  position: fixed; inset: 0;
  background: radial-gradient(ellipse at center, transparent 60%, rgba(0,0,0,0.5) 100%);
  pointer-events: none;
  z-index: 9996;
}
.theme-nucleaire .entete {
  background: #000f04;
  border-bottom: 2px solid var(--couleur-bordure);
  box-shadow: 0 0 20px rgba(0,255,102,0.15);
}
.theme-nucleaire .entete h1 {
  font-size: 1.2rem;
  letter-spacing: 8px;
  text-transform: uppercase;
  color: var(--couleur-accent);
  text-shadow: 0 0 10px rgba(0,255,102,0.8), 0 0 30px rgba(0,255,102,0.3);
  font-weight: 400;
}
.theme-nucleaire .entete .accroche {
  font-size: 0.75rem;
  letter-spacing: 2px;
  color: rgba(0,204,85,0.7);
  text-shadow: none;
  font-style: normal;
}
.theme-nucleaire .entete .horloge-temps-reel {
  border-color: var(--couleur-bordure);
  color: var(--couleur-accent);
  box-shadow: 0 0 8px rgba(0,255,102,0.3);
  letter-spacing: 3px;
}
.theme-nucleaire .entete-droite select,
.theme-nucleaire .entete-droite button,
.theme-nucleaire .entete-droite .btn-retour { border-color: var(--couleur-bordure); border-radius: 0; font-family: 'Courier New', monospace; }
.theme-nucleaire .entete-droite .btn-retour { color: var(--couleur-texte); background: rgba(0,255,102,0.05); }
.theme-nucleaire .entete-droite .btn-retour:hover { background: rgba(0,255,102,0.15); color: var(--couleur-accent); }
.theme-nucleaire .entete-droite select option { background-color: #011a08; color: #00cc55; }
.theme-nucleaire .module h2 {
  font-size: 0.9rem;
  letter-spacing: 4px;
  text-transform: uppercase;
  padding: 0.4rem 0.8rem;
  border: 1px solid var(--couleur-bordure);
  background: rgba(0,255,102,0.05);
  display: inline-block;
  margin-bottom: 1.5rem;
}
.theme-nucleaire .module h2::before { content: '> '; }
.theme-nucleaire .resultat-grand {
  border: 2px solid var(--couleur-bordure);
  border-radius: 0;
  background: #011407;
  box-shadow: 0 0 30px rgba(0,255,102,0.1), inset 0 0 50px rgba(0,255,102,0.03);
  position: relative;
}
.theme-nucleaire .resultat-grand::before {
  content: '[ OUTPUT ]';
  position: absolute;
  top: -0.7rem;
  left: 1rem;
  font-size: 0.65rem;
  letter-spacing: 4px;
  background: #011a08;
  padding: 0 0.4rem;
  color: var(--couleur-bordure);
}
.theme-nucleaire .heure-fin {
  font-size: 5rem;
  color: var(--couleur-accent);
  text-shadow: 0 0 20px rgba(0,255,102,0.9), 0 0 50px rgba(0,255,102,0.4);
  letter-spacing: 8px;
  font-weight: 400;
}
.theme-nucleaire .onglet {
  border-radius: 0;
  border: 1px solid var(--couleur-bordure);
  font-family: 'Courier New', monospace;
  font-size: 0.8rem;
  letter-spacing: 1px;
}
.theme-nucleaire .onglet::before { content: '[ '; }
.theme-nucleaire .onglet::after { width: 0 !important; content: ' ]'; position: static; display: inline; height: auto; background: none; }
.theme-nucleaire .onglet.actif {
  background: rgba(0,255,102,0.1);
  color: var(--couleur-accent);
  border-color: var(--couleur-accent);
  box-shadow: 0 0 12px rgba(0,255,102,0.25);
}
.theme-nucleaire .formulaire input,
.theme-nucleaire .formulaire select {
  border-radius: 0;
  border-color: var(--couleur-bordure);
  background: #010f05;
  color: var(--couleur-accent);
  font-family: 'Courier New', monospace;
  letter-spacing: 2px;
}
.theme-nucleaire .formulaire input::placeholder { color: rgba(0,204,85,0.4); }
.theme-nucleaire .formulaire input:focus,
.theme-nucleaire .formulaire select:focus { box-shadow: 0 0 12px rgba(0,255,102,0.35); }
.theme-nucleaire .planning-section { border: 1px solid var(--couleur-bordure); border-radius: 0; background: #010f05; }
.theme-nucleaire .btn-export { border-radius: 0; letter-spacing: 2px; font-family: 'Courier New', monospace; }
.theme-nucleaire .pied-page { background: #000f04; border-top: 2px solid var(--couleur-bordure); box-shadow: 0 -4px 20px rgba(0,255,102,0.1); }
.theme-nucleaire .pied-page a { text-shadow: 0 0 8px var(--couleur-accent); }

/* ================================================================
 * PANEL GÉNÉRATIONNEL — surcharges thématiques
 * ================================================================ */

/* --- Thème SOMBRE --- */
.theme-sombre .ag-gen-panel-inner { box-shadow: 0 4px 30px rgba(0,0,0,0.35); }
.theme-sombre .cat-film    { background: #1a2a3a; color: #64b5f6; }
.theme-sombre .cat-musique { background: #2a1a3a; color: #ce93d8; }
.theme-sombre .cat-livre   { background: #1a2e1a; color: #81c784; }
.theme-sombre .cat-serie   { background: #2e2a1a; color: #ffb74d; }
.theme-sombre .cat-jeu     { background: #2e1a1a; color: #ef9a9a; }

/* --- Thème RÉTRO (style journal papier) --- */
.theme-retro .ag-gen-panel-inner {
  border-radius: 2px;
  border-width: 3px;
  border-style: double;
  box-shadow: 4px 4px 0 rgba(0,0,0,0.3);
}
.theme-retro .ag-gen-header {
  font-family: 'Courier New', monospace;
  letter-spacing: 1px;
}
.theme-retro .ag-gen-nom { font-size: 1rem; letter-spacing: 2px; text-transform: uppercase; }
.theme-retro .ag-gen-resume {
  font-family: 'Courier New', monospace;
  font-size: 0.88rem;
  border-radius: 0;
}
.theme-retro .ag-section { border-radius: 0; border-style: dashed; }
.theme-retro .ag-section-titre { font-family: 'Courier New', monospace; }
.theme-retro .ag-gen-body { font-family: 'Courier New', monospace; font-size: 0.88rem; }
.theme-retro .cat-film, .theme-retro .cat-musique,
.theme-retro .cat-livre, .theme-retro .cat-serie, .theme-retro .cat-jeu {
  background: rgba(242,232,208,0.4);
  color: #5a3e1b;
  border: 1px solid #8a6a3b;
  border-radius: 0;
}
.theme-retro .ag-toutes-gen-item { border-radius: 0; }
.theme-retro .ag-btn-toutes-gen { border-radius: 0; font-family: 'Courier New', monospace; letter-spacing: 1px; }

/* --- Thème NÉON (cyberpunk) --- */
.theme-neon .ag-gen-panel-inner {
  border-width: 2px;
  border-radius: 4px;
  box-shadow: 0 0 20px rgba(var(--gen-couleur-rgb, 0,230,118), 0.3),
              inset 0 0 30px rgba(0,0,0,0.2);
}
.theme-neon .ag-gen-header { letter-spacing: 1px; text-shadow: 0 0 10px currentColor; }
.theme-neon .ag-gen-nom { font-size: 1rem; letter-spacing: 3px; text-transform: uppercase; }
.theme-neon .ag-gen-resume { border-radius: 0; font-family: 'Courier New', monospace; }
.theme-neon .ag-section { border-radius: 0; border-style: solid; }
.theme-neon .ag-section-titre { letter-spacing: 2px; }
.theme-neon .ag-gen-body { font-family: 'Courier New', monospace; font-size: 0.87rem; }
.theme-neon .ag-milestone-item { border-radius: 0; }
.theme-neon .ag-invention-item, .theme-neon .ag-oeuvre-item { border-radius: 0; }
.theme-neon .cat-film    { background: rgba(30,30,60,0.8); color: #90caf9; border: none; }
.theme-neon .cat-musique { background: rgba(50,10,60,0.8); color: #ce93d8; border: none; }
.theme-neon .cat-livre   { background: rgba(10,40,20,0.8); color: #80cbc4; border: none; }
.theme-neon .cat-serie   { background: rgba(50,30,10,0.8); color: #ffcc02; border: none; }
.theme-neon .cat-jeu     { background: rgba(60,10,10,0.8); color: #ff5370; border: none; }
.theme-neon .ag-humour-box { border-style: dashed; }
.theme-neon .ag-btn-toutes-gen { border-radius: 0; letter-spacing: 2px; }
.theme-neon .ag-toutes-gen-item { border-radius: 0; }

/* --- Thème INSTITUTIONNEL (corporate) --- */
.theme-institutionnel .ag-gen-panel-inner {
  border-radius: 4px;
  border-width: 2px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.08);
}
.theme-institutionnel .ag-gen-header { letter-spacing: 0.5px; }
.theme-institutionnel .ag-gen-nom { font-size: 1.05rem; font-weight: 900; letter-spacing: 1px; }
.theme-institutionnel .ag-section { border-radius: 4px; }
.theme-institutionnel .ag-section-titre { font-size: 0.78rem; letter-spacing: 2px; }
.theme-institutionnel .ag-btn-toutes-gen { border-radius: 4px; letter-spacing: 1px; }

/* --- Thème NUCLÉAIRE (terminal) --- */
.theme-nucleaire .ag-gen-panel-inner {
  border-radius: 0;
  border-width: 2px;
  box-shadow: 0 0 20px rgba(0,255,102,0.15);
  font-family: 'Courier New', monospace;
}
.theme-nucleaire .ag-gen-header {
  font-family: 'Courier New', monospace;
  letter-spacing: 3px;
  text-transform: uppercase;
}
.theme-nucleaire .ag-gen-nom { font-size: 0.9rem; letter-spacing: 4px; }
.theme-nucleaire .ag-gen-gros-emoji { filter: grayscale(0.3); }
.theme-nucleaire .ag-gen-resume {
  font-family: 'Courier New', monospace;
  border-radius: 0;
  font-size: 0.85rem;
  letter-spacing: 0.5px;
}
.theme-nucleaire .ag-gen-body { font-family: 'Courier New', monospace; font-size: 0.86rem; }
.theme-nucleaire .ag-section { border-radius: 0; }
.theme-nucleaire .ag-section-titre { letter-spacing: 3px; }
.theme-nucleaire .ag-section-titre::before { content: '> '; }
.theme-nucleaire .ag-milestone-item { border-radius: 0; }
.theme-nucleaire .ag-invention-item, .theme-nucleaire .ag-oeuvre-item { border-radius: 0; }
.theme-nucleaire .ag-event-annee { text-shadow: 0 0 8px currentColor; }
.theme-nucleaire .cat-film, .theme-nucleaire .cat-musique,
.theme-nucleaire .cat-livre, .theme-nucleaire .cat-serie, .theme-nucleaire .cat-jeu {
  background: rgba(0,255,102,0.06);
  color: var(--couleur-accent);
  border: 1px solid var(--couleur-bordure);
  border-radius: 0;
}
.theme-nucleaire .ag-humour-box {
  border-radius: 0;
  border-style: dashed;
  color: var(--couleur-accent);
}
.theme-nucleaire .ag-btn-toutes-gen { border-radius: 0; letter-spacing: 3px; font-family: 'Courier New', monospace; }
.theme-nucleaire .ag-btn-replier { border-radius: 0; letter-spacing: 1px; font-family: 'Courier New', monospace; }
.theme-nucleaire .ag-toutes-gen-item { border-radius: 0; }
.theme-nucleaire .ag-tg-badge-moi { border-radius: 0; }
.theme-nucleaire .ag-cadeaux-details { border-radius: 0; }
.theme-nucleaire .ag-cadeaux-summary { font-family: 'Courier New', monospace; letter-spacing: 1px; }
.theme-nucleaire .ag-cadeaux-liste li { border-radius: 0; }

/* ================================================================
 * MODULE 10 — AFFICHER L'HEURE — SURCHARGES PAR THÈME
 * ================================================================ */

/* ── THÈME 1 : CLAIR — Horloge lumineuse, fond blanc azuré ── */
.theme-clair .hl-display-wrap {
  --hl-texte : #0969da;
  --hl-fond  : #f0f7ff;
  border: 1px solid rgba(9,105,218,0.12);
  box-shadow: 0 2px 20px rgba(9,105,218,0.09);
}
.theme-clair .hl-num-time   { text-shadow: none; font-weight: 700; }
.theme-clair .hl-neon-time  { text-shadow: 0 2px 12px rgba(9,105,218,0.3); animation: none; }
.theme-clair .hl-nuc-pre    { text-shadow: none; color: #0969da; background: #f0f7ff; }
.theme-clair .hl-style-btn.actif { box-shadow: 0 4px 14px rgba(9,105,218,0.35); }

/* ── THÈME 2 : SOMBRE — Horloge glassmorphe ── */
.theme-sombre .hl-display-wrap {
  --hl-texte : #58a6ff;
  --hl-fond  : rgba(13,17,23,0.85);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(48,54,61,0.9);
  box-shadow: 0 8px 32px rgba(0,0,0,0.3);
}

/* ── THÈME 3 : RÉTRO — Horloge journal vintage ── */
.theme-retro .hl-display-wrap {
  --hl-texte : #8b3a0f;
  --hl-fond  : #fdf6e3;
  border: 3px double #8b6914;
  border-radius: 0;
}
.theme-retro .hl-num-time {
  font-family: 'Courier New', monospace;
  letter-spacing: 8px;
  text-shadow: 2px 2px 0 rgba(44,24,16,0.15);
}
.theme-retro .hl-style-btn { border-radius: 0; font-family: 'Georgia', serif; }
.theme-retro .hl-style-btn.actif { background: #2c1810; border-color: #2c1810; }
.theme-retro .hl-chrono-section { border-radius: 0; border-style: double; }
.theme-retro .hl-options-panel  { border-radius: 0; }

/* ── THÈME 4 : NÉON — Horloge cyberpunk ultra-glow ── */
.theme-neon .hl-display-wrap {
  --hl-texte : #00ffe5;
  --hl-fond  : #060410;
  border: 1px solid rgba(0,255,229,0.2);
  box-shadow: 0 0 40px rgba(0,255,229,0.08), inset 0 0 60px rgba(0,255,229,0.03);
}
.theme-neon .hl-style-btn { border-color: rgba(180,0,255,0.4); border-radius: 2px; }
.theme-neon .hl-style-btn.actif { background: rgba(0,255,229,0.15); border-color: #00ffe5; box-shadow: 0 0 14px rgba(0,255,229,0.4); }
.theme-neon .hl-chrono-section { border-color: rgba(0,255,229,0.2); border-radius: 2px; }
.theme-neon .hl-options-panel  { border-color: rgba(0,255,229,0.2); border-radius: 2px; }

/* ── THÈME 5 : INSTITUTIONNEL — Horloge documentaire sober ── */
.theme-institutionnel .hl-display-wrap {
  --hl-texte : #1a3a5c;
  --hl-fond  : #eef4fb;
  border: 1px solid #c8d8e8;
  border-left: 4px solid #c8960c;
  border-radius: 0;
}
.theme-institutionnel .hl-num-time {
  font-family: 'Calibri', Arial, sans-serif;
  font-size: 4rem;
  letter-spacing: 2px;
  text-shadow: none;
}
.theme-institutionnel .hl-style-btn { border-radius: 2px; font-family: 'Calibri', Arial, sans-serif; }
.theme-institutionnel .hl-style-btn.actif { background: #1a3a5c; border-color: #1a3a5c; border-bottom: 2px solid #c8960c; }
.theme-institutionnel .hl-chrono-section { border-radius: 0; border-left: 3px solid #c8960c; }
.theme-institutionnel .hl-options-panel  { border-radius: 0; border-left: 3px solid #c8960c; }

/* ── THÈME 6 : NUCLÉAIRE — Horloge CRT phosphore ── */
.theme-nucleaire .hl-display-wrap {
  --hl-texte : #00ff66;
  --hl-fond  : #011a08;
  border: 2px solid #007722;
  border-radius: 0;
  box-shadow: 0 0 30px rgba(0,255,102,0.12), inset 0 0 80px rgba(0,0,0,0.3);
}
.theme-nucleaire .hl-num-time {
  text-shadow: 0 0 10px rgba(0,255,102,0.8), 0 0 30px rgba(0,255,102,0.3);
}
.theme-nucleaire .hl-style-btn {
  border-radius: 0;
  font-family: 'Courier New', monospace;
  letter-spacing: 1px;
  border-color: #007722;
}
.theme-nucleaire .hl-style-btn.actif {
  background: #00ff66;
  color: #011a08;
  border-color: #00ff66;
  box-shadow: 0 0 12px rgba(0,255,102,0.5);
}
.theme-nucleaire .hl-chrono-section {
  border-radius: 0;
  border-color: #007722;
  background: #011407;
}
.theme-nucleaire .hl-options-panel  { border-radius: 0; border-color: #007722; background: #011407; }
.theme-nucleaire .hl-chrono-display { text-shadow: 0 0 8px rgba(0,255,102,0.6); }