/* ============================================================
   Thèmes : dark + retro sépia
   ============================================================ */

/* ============================================================
   BOUTON TOGGLE
   ============================================================ */
#theme-toggle {
  position: fixed;
  top: 66px; right: 14px;
  z-index: 9993;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: #fff;
  color: var(--c-teal-dark);
  border: 2px solid var(--c-teal);
  border-radius: 50px;
  font-family: var(--font-title);
  font-weight: 800;
  font-size: .85rem;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .15);
  transition: transform .2s, background .2s;
}
#theme-toggle:hover { transform: translateY(-2px); }
.theme-label { font-size: .8rem; }

.theme-btn-dark  { background: #1a2332 !important; color: #ffd23f !important; border-color: #ffd23f !important; }
.theme-btn-retro { background: #f4ecd8 !important; color: #6b5830 !important; border-color: #6b5830 !important; }

@media print {
  #theme-toggle { display: none !important; }
}

/* ============================================================
   DARK MODE
   ============================================================ */
html.theme-dark {
  color-scheme: dark;
}
html.theme-dark body {
  background: #0f2c3f !important;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(255, 210, 63, .08) 0%, transparent 40%),
    radial-gradient(circle at 80% 70%, rgba(255, 107, 107, .06) 0%, transparent 45%) !important;
  color: #e8e8ee !important;
}
html.theme-dark body::before {
  background-image: radial-gradient(circle, rgba(255, 255, 255, .04) 1px, transparent 1.5px) !important;
}

html.theme-dark .section-title,
html.theme-dark .mod-card h3,
html.theme-dark .card-title,
html.theme-dark .law-content h3,
html.theme-dark h1, html.theme-dark h2, html.theme-dark h3 {
  color: var(--c-yellow) !important;
}

html.theme-dark .section.section-conditions   { background: #2a1a22 !important; }
html.theme-dark .section.section-enfants      { background: #2a2818 !important; }
html.theme-dark .section.section-lois         { background: #1a2a24 !important; }
html.theme-dark .section.section-comparaison  { background: #221a2a !important; }
html.theme-dark .section.section-quiz         { background: #2a2818 !important; }
html.theme-dark .section.section-plus         { background: #1a2a24 !important; }
html.theme-dark .section.section-carte        { background: #1a2a24 !important; }
html.theme-dark .section.section-temoignages  { background: #2a241a !important; }
html.theme-dark .section.section-ma-journee   { background: #2a2018 !important; }

html.theme-dark .card,
html.theme-dark .sector-card,
html.theme-dark .law-content,
html.theme-dark .day-in-life,
html.theme-dark .plus-card,
html.theme-dark .historical-figure,
html.theme-dark .timeline-mini,
html.theme-dark .fun-fact-box,
html.theme-dark .quiz-container,
html.theme-dark .mod-card,
html.theme-dark .mod-step,
html.theme-dark .empathy-block,
html.theme-dark .lois-game,
html.theme-dark .journee-q,
html.theme-dark .journee-card,
html.theme-dark .carte-info,
html.theme-dark .temoignage-card,
html.theme-dark .compare-after {
  background: #1a2a38 !important;
  color: #e8e8ee !important;
  border-color: #2a3a50 !important;
}

html.theme-dark .quiz-option,
html.theme-dark .mod-quiz-option,
html.theme-dark .journee-opt,
html.theme-dark .lois-game-btn,
html.theme-dark .thought-btn,
html.theme-dark .btn-next,
html.theme-dark .mod-btn {
  background: #243548 !important;
  color: #e8e8ee !important;
  border-color: #2e4358 !important;
}

html.theme-dark .tl-year,
html.theme-dark .law-year-badge {
  background: var(--c-yellow) !important;
  color: #0f2c3f !important;
}

html.theme-dark strong { color: var(--c-yellow) !important; }

html.theme-dark .site-header,
html.theme-dark .mod-header,
html.theme-dark .mod-module-header {
  background: linear-gradient(135deg, #0a1a28 0%, #15354a 50%, #1a3d52 100%) !important;
}

html.theme-dark .site-footer { background: #05141f !important; }

html.theme-dark .france-svg { filter: invert(1) hue-rotate(180deg); }
html.theme-dark .france-outline { fill: #1a2a38 !important; stroke: var(--c-yellow) !important; }

/* ============================================================
   MODE RETRO (sépia "1880")
   ============================================================ */
html.theme-retro {
  color-scheme: light;
}
html.theme-retro body {
  background: #f4ecd8 !important;
  background-image: none !important;
  color: #3a2c17 !important;
  font-family: 'Playfair Display', 'Times New Roman', Georgia, serif !important;
}
html.theme-retro body::before { display: none !important; }

html.theme-retro * {
  font-family: inherit !important;
}

html.theme-retro h1, html.theme-retro h2, html.theme-retro h3, html.theme-retro h4,
html.theme-retro .site-title, html.theme-retro .section-title,
html.theme-retro .card-title, html.theme-retro .mod-card h3,
html.theme-retro .mod-module-header h1 {
  font-family: 'Playfair Display', serif !important;
  color: #3a2c17 !important;
  letter-spacing: .02em;
}

html.theme-retro .section,
html.theme-retro .section.section-conditions,
html.theme-retro .section.section-enfants,
html.theme-retro .section.section-lois,
html.theme-retro .section.section-comparaison,
html.theme-retro .section.section-quiz,
html.theme-retro .section.section-plus,
html.theme-retro .section.section-carte,
html.theme-retro .section.section-temoignages,
html.theme-retro .section.section-ma-journee {
  background: #f4ecd8 !important;
}
html.theme-retro .section.section-germinal { background: #3a2c17 !important; color: #f4ecd8 !important; }

html.theme-retro .card,
html.theme-retro .sector-card,
html.theme-retro .law-content,
html.theme-retro .day-in-life,
html.theme-retro .plus-card,
html.theme-retro .historical-figure,
html.theme-retro .timeline-mini,
html.theme-retro .fun-fact-box,
html.theme-retro .quiz-container,
html.theme-retro .mod-card,
html.theme-retro .mod-step,
html.theme-retro .empathy-block,
html.theme-retro .temoignage-card,
html.theme-retro .compare-after,
html.theme-retro .compare-before {
  background: #ece2c8 !important;
  color: #3a2c17 !important;
  border: 2px solid #6b5830 !important;
  box-shadow: 4px 4px 0 #6b5830 !important;
}

html.theme-retro .site-header,
html.theme-retro .mod-header,
html.theme-retro .mod-module-header {
  background: #6b5830 !important;
  color: #f4ecd8 !important;
  border-bottom: 6px double #3a2c17;
}
html.theme-retro .site-header::before,
html.theme-retro .mod-header::before { display: none !important; }
html.theme-retro .site-header::after { display: none !important; }
html.theme-retro .site-title, html.theme-retro .mod-header h1, html.theme-retro .mod-module-header h1 {
  color: #f4ecd8 !important;
  text-transform: uppercase;
  letter-spacing: .08em;
}

html.theme-retro img:not(.france-svg):not(.mod-card-emoji):not(.region-emoji) {
  filter: sepia(.8) contrast(1.05) brightness(.92);
}

html.theme-retro strong { color: #8b4513 !important; }

html.theme-retro .nav-link {
  background: transparent !important;
  border-color: #f4ecd8 !important;
  text-transform: uppercase;
  letter-spacing: .06em;
  font-size: .82rem;
}

/* Charge Playfair Display pour le mode retro via Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,700;1,400&display=swap');

/* Prière de ne pas appliquer les thèmes aux éléments déjà stylés spécifiquement (diplôme, mascotte) */
html.theme-dark  .diplome,
html.theme-retro .diplome,
html.theme-dark  #mascot-root,
html.theme-retro #mascot-root {
  /* Laisse les styles d'origine */
}

/* ============================================================
   TOGGLE SON
   ============================================================ */
#sound-toggle {
  position: fixed;
  top: 118px; right: 14px;
  z-index: 9993;
  width: 44px; height: 44px;
  background: #fff;
  color: var(--c-teal-dark);
  border: 2px solid var(--c-teal);
  border-radius: 50%;
  font-size: 1rem;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .15);
  transition: transform .15s, background .15s;
}
#sound-toggle:hover { transform: scale(1.08); }
#sound-toggle.on { background: var(--c-mint); color: #1a4a3a; border-color: #1a4a3a; }

html.theme-dark  #sound-toggle { background: #1a2332; color: #ffd23f; border-color: #ffd23f; }
html.theme-retro #sound-toggle { background: #f4ecd8; color: #6b5830; border-color: #6b5830; }

@media print { #sound-toggle { display: none !important; } }