@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700;800&display=swap');

/* ==========================================================================
   DeutschMaak — pont de theme pour les exercices legacy.

   Injecte par quiz-gate.php UNIQUEMENT pour les pages qui utilisent encore
   l'ancien habillage (fond gris, entetes bleu marine #1f3655, boutons bleus).
   Objectif : aligner ces pages sur la charte actuelle (rouge DM / or, DM Sans,
   surfaces claires et sombres) SANS toucher aux questions, aux reponses, aux
   scripts, aux minuteries ni aux corrections. Aucun effet 3D lourd.

   Les selecteurs sont prefixes par body[data-server-authorized="1"], attribut
   pose par la porte de securite : impossible d'impacter une page hors quiz.
   ========================================================================== */

:root {
  --dmq-red: var(--dm-red, #e11d2e);
  --dmq-red-deep: var(--dm-red-dark, #b31321);
  --dmq-ink: var(--dm-ink, #101216);
  --dmq-line: var(--dm-line, rgba(16, 18, 22, .10));
  --dmq-bg: #f2f4f6;
  --dmq-surface: #ffffff;
  --dmq-soft: #f2f3f7;
  --dmq-shadow: 0 18px 46px rgba(16, 18, 22, .08);
  --dmq-ease: cubic-bezier(.22, 1, .36, 1);
}

html.dark {
  --dmq-ink: #f5f6f8;
  --dmq-line: rgba(255, 255, 255, .10);
  --dmq-bg: #0b0f15;
  --dmq-surface: rgba(24, 28, 34, .94);
  --dmq-soft: rgba(255, 255, 255, .05);
  --dmq-shadow: 0 22px 54px rgba(0, 0, 0, .40);
}

/* Remappage des variables du systeme « premium » (quiz-ui-premium.css, bleu /
   violet) vers la charte DeutschMaak (rouge). Les regles premium qui passent par
   ces variables adoptent automatiquement le thème ; les aplats pastel d'options
   restent volontairement inchanges pour ne pas alterer la lisibilité. */
body[data-server-authorized="1"] {
  --telc-primary: var(--dmq-red);
  --telc-primary-dark: var(--dmq-red-deep);
  --telc-blue: var(--dmq-red);
  --telc-pink: var(--dmq-red);
  --telc-violet: var(--dmq-red-deep);
}

/* `html body[...]` (specificite 0,1,2) : depasse la regle Hoeren
   `html.telc-hoeren-quiz-page body` de telc-hoeren-quiz-mobile.css. */
html body[data-server-authorized="1"] {
  font-family: "Manrope", "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif !important;
  background: radial-gradient(circle at 82% 0, rgba(225, 29, 46, .08), transparent 32%), var(--dmq-bg) !important;
  color: var(--dmq-ink) !important;
  /* Le gabarit legacy ne réinitialise pas la marge par défaut du <body> (8px).
     Combinée à `width:100%`, elle décalait la page de 8px et créait un
     débordement horizontal. Aucun gabarit legacy ne centre le body avec des
     marges auto, donc les marges horizontales peuvent être neutralisées. */
  margin-left: 0 !important;
  margin-right: 0 !important;
  max-width: 100% !important;
  /* Remappage des variables legacy restées bleu/violet. Posées sur <body>,
     elles écrasent les `:root { --primary-color:#667eea … }` des gabarits :
     pour tout descendant de body, la valeur la plus proche (body) gagne. */
  --primary-color: var(--dmq-ink);
  --primary: var(--dmq-ink);
  --secondary-color: var(--dmq-red);
  --secondary: var(--dmq-red);
  --accent-color: var(--dmq-red);
  --accent: var(--dmq-red);
  --light-bg: var(--dmq-soft);
  --dark-text: var(--dmq-ink);
  --text-color: var(--dmq-ink);
}
html.dark body[data-server-authorized="1"] {
  --primary-color: #e9edf1;
  --primary: #e9edf1;
  --light-bg: var(--dmq-soft);
  --dark-text: var(--dmq-ink);
  --text-color: var(--dmq-ink);
}

/* ── Surfaces de contenu ── */
body[data-server-authorized="1"] .quiz-container,
body[data-server-authorized="1"] .question-card,
body[data-server-authorized="1"] .question-box,
body[data-server-authorized="1"] .audio-card,
body[data-server-authorized="1"] .instructions {
  background: var(--dmq-surface) !important;
  color: var(--dmq-ink) !important;
  border: 1px solid var(--dmq-line) !important;
  border-radius: 22px !important;
  box-shadow: var(--dmq-shadow) !important;
}

body[data-server-authorized="1"] .container {
  background: var(--dmq-surface) !important;
  color: var(--dmq-ink) !important;
  border: 1px solid var(--dmq-line) !important;
  box-shadow: var(--dmq-shadow) !important;
}

body[data-server-authorized="1"] .letter { background: transparent !important; color: var(--dmq-ink) !important; }
body[data-server-authorized="1"] .choices { background: var(--dmq-soft) !important; color: var(--dmq-ink) !important; }
body[data-server-authorized="1"] .row-container { background: var(--dmq-soft) !important; border-color: var(--dmq-line) !important; }

/* ── Titres ── */
body[data-server-authorized="1"] h1,
body[data-server-authorized="1"] h2,
body[data-server-authorized="1"] h3,
body[data-server-authorized="1"] h4,
body[data-server-authorized="1"] h5,
body[data-server-authorized="1"] h6 {
  color: var(--dmq-ink) !important;
  font-family: "Space Grotesk", "DM Sans", system-ui, sans-serif;
  letter-spacing: -.01em;
}
body[data-server-authorized="1"] h2.audio-title { color: #fff !important; }

/* Le texte des questions/annonces utilisait un violet legacy (#8b5cf6) directement
   dans les gabarits : illisible sur la charte. On le ramène à l'encre de marque.
   Les titres internes gardent leur encre via la règle ci-dessus. */
body[data-server-authorized="1"] .question-text,
body[data-server-authorized="1"] .question-text p,
body[data-server-authorized="1"] .question-text span,
body[data-server-authorized="1"] .question-text li {
  color: var(--dmq-ink) !important;
}

/* ── Tableaux de questions ── */
body[data-server-authorized="1"] th {
  background: linear-gradient(135deg, var(--dmq-red), var(--dmq-red-deep)) !important;
  color: #fff !important;
  border-color: transparent !important;
}
body[data-server-authorized="1"] td { border-color: var(--dmq-line) !important; color: var(--dmq-ink); }
body[data-server-authorized="1"] tbody tr:nth-child(even) { background: var(--dmq-soft); }

/* ── Boutons : validation, navigation ── */
body[data-server-authorized="1"] .btn-check,
body[data-server-authorized="1"] #checkBtn,
body[data-server-authorized="1"] #check-btn,
body[data-server-authorized="1"] .quiz-button:not(.secondary) {
  background: linear-gradient(135deg, var(--dmq-red), var(--dmq-red-deep)) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 13px !important;
  box-shadow: 0 12px 26px rgba(225, 29, 46, .26) !important;
  transition: transform .22s var(--dmq-ease), box-shadow .22s var(--dmq-ease) !important;
}
body[data-server-authorized="1"] .btn-check:hover,
body[data-server-authorized="1"] #checkBtn:hover,
body[data-server-authorized="1"] #check-btn:hover,
body[data-server-authorized="1"] .quiz-button:not(.secondary):hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 18px 34px rgba(225, 29, 46, .32) !important;
}
body[data-server-authorized="1"] .auto-nav-btn {
  background: linear-gradient(135deg, var(--dmq-red), var(--dmq-red-deep)) !important;
  color: #fff !important;
}
body[data-server-authorized="1"] .auto-nav-btn.auto-nav-secondary {
  background: linear-gradient(135deg, var(--dmq-ink), #3a424d) !important;
  color: #fff !important;
}
html.dark body[data-server-authorized="1"] .auto-nav-btn.auto-nav-secondary {
  background: linear-gradient(135deg, #2a3038, #454d58) !important;
}

/* ── Etats de correction ── */
body[data-server-authorized="1"] .correct,
body[data-server-authorized="1"] td.correct { background: rgba(23, 107, 71, .14) !important; color: inherit !important; }
body[data-server-authorized="1"] .wrong,
body[data-server-authorized="1"] td.wrong { background: rgba(225, 29, 46, .13) !important; color: inherit !important; }
html.dark body[data-server-authorized="1"] .correct { background: rgba(23, 107, 71, .30) !important; color: #eafaf1 !important; }
html.dark body[data-server-authorized="1"] .wrong { background: rgba(225, 29, 46, .28) !important; color: #ffeef0 !important; }

/* ── Lecteur audio ── */
body[data-server-authorized="1"] .audio-title {
  background: linear-gradient(135deg, #141a22, #242b34) !important;
  border-radius: 14px !important;
  border: 1px solid rgba(255, 255, 255, .06) !important;
  box-shadow: 0 14px 32px rgba(16, 18, 22, .24) !important;
}
html.dark body[data-server-authorized="1"] .audio-title {
  background: linear-gradient(135deg, #12171e, #1d242d) !important;
  border-color: rgba(255, 255, 255, .08) !important;
}

/* ── Marqueur de blanc (pages Lesen/Sprechen legacy) ── */
body[data-server-authorized="1"] .blank { background: var(--dmq-red) !important; color: #fff !important; }

/* ── Lien retour ── */
body[data-server-authorized="1"] .hoeren-back-link {
  background: var(--dmq-surface) !important;
  border: 1px solid var(--dmq-line) !important;
  color: var(--dmq-ink) !important;
  border-radius: 12px !important;
}
body[data-server-authorized="1"] .hoeren-back-link:hover { border-color: var(--dmq-red) !important; color: var(--dmq-red) !important; }

/* Lien retour des pages d'exercice indisponibles (b1_pdf_*) : ancien bleu marine
   #1f3655 inline. Aligne sur le bouton primaire de la charte. */
body[data-server-authorized="1"] .back-link {
  background: linear-gradient(135deg, var(--dmq-red), var(--dmq-red-deep)) !important;
  color: #fff !important;
  border-radius: 13px !important;
  box-shadow: 0 12px 26px rgba(225, 29, 46, .26) !important;
  transition: transform .22s var(--dmq-ease), box-shadow .22s var(--dmq-ease) !important;
}
body[data-server-authorized="1"] .back-link:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 18px 34px rgba(225, 29, 46, .32) !important;
}

/* ── Champs de saisie : focus charte ── */
body[data-server-authorized="1"] input[type="text"]:focus,
body[data-server-authorized="1"] input[type="number"]:focus,
body[data-server-authorized="1"] textarea:focus,
body[data-server-authorized="1"] select:focus {
  outline: none !important;
  border-color: var(--dmq-red) !important;
  box-shadow: 0 0 0 3px rgba(225, 29, 46, .16) !important;
}

@media (prefers-reduced-motion: reduce) {
  body[data-server-authorized="1"] .btn-check,
  body[data-server-authorized="1"] #checkBtn,
  body[data-server-authorized="1"] .quiz-button { transition: none !important; }
  body[data-server-authorized="1"] .btn-check:hover,
  body[data-server-authorized="1"] #checkBtn:hover,
  body[data-server-authorized="1"] .quiz-button:hover { transform: none !important; }
}