/* =====================================================================
   THÈME CLAIR — optimisé pour projection / lisibilité étudiants
   Palette claire avec accents cyan/teal contrastés.
   ===================================================================== */

:root {
    --bg:          #eef2f7;
    --surface:     #ffffff;
    --surface-2:   #f1f5f9;
    --border:      #d6deea;
    --border-soft: rgba(148, 163, 184, 0.35);
    --text:        #0f172a;
    --text-2:      #334155;
    --muted:       #475569;
    --muted-2:     #64748b;
    --accent:      #0891b2;
    --accent-deep: #0e7490;
}

/* ---------- Base ---------- */
html, body { background: var(--bg); }
body {
    color: var(--text);
    font-feature-settings: "cv11", "cv02";
}

/* Subtle technical grid (light) */
.grid-bg {
    background-image:
        linear-gradient(rgba(8, 145, 178, 0.07) 1px, transparent 1px),
        linear-gradient(90deg, rgba(8, 145, 178, 0.07) 1px, transparent 1px),
        radial-gradient(ellipse at top, rgba(8, 145, 178, 0.10), transparent 60%);
    background-size: 48px 48px, 48px 48px, 100% 100%;
    mask-image: radial-gradient(ellipse at center, black 40%, transparent 90%);
}

/* ---------- Reusable card ---------- */
.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 14px;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
}
.card-hover:hover {
    border-color: rgba(8, 145, 178, 0.55);
    box-shadow: 0 8px 24px rgba(8, 145, 178, 0.18);
    transform: translateY(-2px);
}
.card, .card-hover { transition: all .25s ease; }

/* ---------- Buttons ---------- */
.btn-primary {
    display: inline-flex; align-items: center; gap: .5rem;
    padding: .65rem 1.1rem;
    background: linear-gradient(135deg, #0891b2, #0369a1);
    color: #ffffff; font-weight: 600;
    border-radius: 10px;
    box-shadow: 0 4px 14px rgba(8, 145, 178, .25);
}
.btn-primary:hover { filter: brightness(1.06); }
.btn-ghost {
    display: inline-flex; align-items: center; gap: .5rem;
    padding: .55rem 1rem;
    border: 1px solid var(--border);
    color: var(--text-2); border-radius: 10px;
    background: var(--surface);
}
.btn-ghost:hover { background: var(--surface-2); color: var(--text); border-color: rgba(8,145,178,.45); }
.btn-danger {
    display: inline-flex; align-items: center; gap: .5rem;
    padding: .55rem 1rem;
    background: rgba(225, 29, 72, .10); color: #be123c;
    border: 1px solid rgba(225, 29, 72, .35); border-radius: 10px;
}

/* ---------- Markdown content ---------- */
.prose-cyber h2 { font-size: 1.5rem; font-weight: 700; color: #0e7490; margin: 1.6rem 0 .8rem; }
.prose-cyber h3 { font-size: 1.15rem; font-weight: 600; color: #0369a1; margin: 1.2rem 0 .6rem; }
.prose-cyber p  { color: var(--text-2); margin: .8rem 0; line-height: 1.7; }
.prose-cyber ul { list-style: disc; padding-left: 1.4rem; margin: .6rem 0; color: var(--text-2); }
.prose-cyber ol { list-style: decimal; padding-left: 1.4rem; margin: .6rem 0; color: var(--text-2); }
.prose-cyber li { margin: .25rem 0; }
.prose-cyber strong { color: #b45309; }
.prose-cyber a { color: #0e7490; text-decoration: underline; }
.prose-cyber code:not(pre code) {
    background: rgba(8, 145, 178, .10);
    color: #0e7490;
    padding: 1px 6px; border-radius: 4px;
    font-family: "JetBrains Mono", monospace; font-size: .9em;
}
.prose-cyber pre {
    background: #f6f8fb !important;
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 1rem !important;
    overflow-x: auto;
    margin: 1rem 0;
    font-size: .88rem;
    line-height: 1.55;
}
.prose-cyber pre code { background: transparent !important; padding: 0 !important; }
.prose-cyber table {
    width: 100%; border-collapse: collapse; margin: 1rem 0;
    background: var(--surface);
}
.prose-cyber th, .prose-cyber td {
    border: 1px solid var(--border); padding: .5rem .75rem; text-align: left;
}
.prose-cyber th { background: rgba(8, 145, 178, .08); color: #0e7490; }
.prose-cyber blockquote {
    border-left: 3px solid #0891b2;
    padding: .5rem 1rem;
    background: rgba(8, 145, 178, .06);
    color: var(--text-2);
    margin: 1rem 0;
}

/* ---------- Day color accents (darkened for light bg) ---------- */
.day-cyan    { --accent: #0891b2; }
.day-violet  { --accent: #7c3aed; }
.day-emerald { --accent: #059669; }
.day-amber   { --accent: #b45309; }
.day-rose    { --accent: #e11d48; }
.day-color   { color: var(--accent); }
.day-border  { border-color: color-mix(in srgb, var(--accent) 50%, transparent); }
.day-bg      { background: color-mix(in srgb, var(--accent) 12%, transparent); }
.day-ring    { box-shadow: 0 0 0 1px var(--accent), 0 0 18px color-mix(in srgb, var(--accent) 28%, transparent); }

/* ---------- Progress bar ---------- */
.bar { height: 8px; background: #e2e8f0; border-radius: 999px; overflow: hidden; }
.bar > div {
    height: 100%;
    background: linear-gradient(90deg, #0891b2, #059669);
    transition: width .5s ease;
}

/* ---------- Quiz states ---------- */
.q-correct  { border-color: rgba(5, 150, 105, .6) !important; background: rgba(5, 150, 105, .08); }
.q-wrong    { border-color: rgba(225, 29, 72, .6) !important;  background: rgba(225, 29, 72, .08); }

/* ---------- Form ---------- */
input[type="text"], input[type="email"], input[type="password"], textarea {
    background: var(--surface);
    border: 1px solid var(--border);
    color: var(--text);
    border-radius: 8px;
    padding: .55rem .8rem;
    width: 100%;
    font-size: .95rem;
    transition: border-color .15s ease;
}
input:focus, textarea:focus {
    outline: none;
    border-color: #0891b2;
    box-shadow: 0 0 0 2px rgba(8, 145, 178, .20);
}
label { font-size: .8rem; color: var(--muted); display: block; margin-bottom: .25rem; }

/* ---------- Scrollbar ---------- */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--surface-2); }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 6px; }
::-webkit-scrollbar-thumb:hover { background: #0891b2; }

/* ---------- Subtle pulse for live items ---------- */
@keyframes pulseGlow {
    0%, 100% { box-shadow: 0 0 6px rgba(8, 145, 178, .25); }
    50%      { box-shadow: 0 0 16px rgba(8, 145, 178, .55); }
}
.pulse-glow { animation: pulseGlow 2.5s ease-in-out infinite; }

/* ---------- Certificate ---------- */
.cert {
    background: radial-gradient(circle at top right, rgba(8, 145, 178, .10), transparent 60%),
                radial-gradient(circle at bottom left, rgba(124, 58, 237, .08), transparent 60%),
                linear-gradient(180deg, #ffffff, #f5f8fc);
    border: 1px solid rgba(8, 145, 178, .35);
    border-radius: 16px;
    padding: 3rem;
    position: relative;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.08);
}
.cert::before {
    content: ""; position: absolute; inset: 12px;
    border: 1px dashed rgba(8, 145, 178, .30);
    border-radius: 10px; pointer-events: none;
}

/* ---------- Questions interactives (vote en direct) ---------- */
.poll-vote-btn {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: .35rem;
    padding: 1rem .75rem;
    border: 1.5px solid var(--border);
    border-radius: 12px;
    background: var(--surface);
    color: var(--text-2);
    font-weight: 600; font-size: .95rem;
    cursor: pointer;
    transition: all .18s ease;
}
.poll-vote-btn:hover:not(:disabled) {
    border-color: var(--vc);
    background: var(--vs);
    color: var(--vc);
    transform: translateY(-2px);
}
.poll-vote-btn.is-selected {
    border-color: var(--vc);
    background: var(--vc);
    color: #ffffff;
    box-shadow: 0 6px 18px var(--vs);
}
.poll-vote-btn:disabled {
    cursor: not-allowed;
}
.poll-vote-btn:disabled:not(.is-selected) {
    opacity: .55;
}

/* ---------- Tirage au sort (Random — interrogation surprise) ---------- */
.random-name { transition: transform .08s ease; }
.random-rolling {
    opacity: .96;
    filter: blur(.35px);
    letter-spacing: .5px;
}
@keyframes randomPop {
    0%   { transform: scale(.55); opacity: 0; }
    60%  { transform: scale(1.18); opacity: 1; }
    100% { transform: scale(1); }
}
.random-winner {
    animation: randomPop .55s cubic-bezier(.2, .9, .3, 1.25);
    color: #0e7490 !important;
    text-shadow: 0 0 20px rgba(8, 145, 178, .45);
}
@keyframes flashGood { 0%, 100% { background: rgba(8,145,178,.06); } 30% { background: rgba(5, 150, 105, .22); } }
@keyframes flashBad  { 0%, 100% { background: rgba(8,145,178,.06); } 30% { background: rgba(225, 29, 72, .22); } }
.random-good-flash { animation: flashGood .7s ease; }
.random-bad-flash  { animation: flashBad .7s ease; }

/* ---------- Roue de la fortune (Random) ---------- */
.wheel-wrap {
    position: relative;
    width: min(82vw, 460px);
    margin: 0 auto;
    aspect-ratio: 1 / 1;
    user-select: none;
}
.wheel-svg {
    width: 100%;
    height: 100%;
    display: block;
    transform-origin: 50% 50%;
    border-radius: 9999px;
    filter: drop-shadow(0 12px 34px rgba(8, 145, 178, .28));
}
.wheel-seg-text {
    fill: #ffffff;
    font-weight: 700;
    font-family: inherit;
    pointer-events: none;
    paint-order: stroke;
    stroke: rgba(0, 0, 0, .18);
    stroke-width: .6px;
}
/* Flèche fixe pointant vers le gagnant (en haut) */
.wheel-pointer {
    position: absolute;
    top: -6px;
    left: 50%;
    transform: translateX(-50%);
    width: 0; height: 0;
    border-left: 18px solid transparent;
    border-right: 18px solid transparent;
    border-top: 30px solid #e11d48;
    z-index: 5;
    filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .3));
}
/* Moyeu central cliquable (bouton GO) */
.wheel-hub {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 84px; height: 84px;
    border-radius: 9999px;
    z-index: 6;
    background: radial-gradient(circle at 35% 30%, #ffffff, #e2e8f0);
    border: 5px solid #0891b2;
    color: #0e7490;
    font-weight: 800;
    font-size: 15px;
    letter-spacing: .5px;
    cursor: pointer;
    box-shadow: 0 8px 22px rgba(0, 0, 0, .22);
    transition: transform .12s ease, box-shadow .12s ease;
}
.wheel-hub:hover:not(:disabled) {
    transform: translate(-50%, -50%) scale(1.07);
    box-shadow: 0 10px 26px rgba(8, 145, 178, .35);
}
.wheel-hub:disabled { cursor: not-allowed; opacity: .65; }

@keyframes winnerCardPop {
    0%   { transform: scale(.7); opacity: 0; }
    55%  { transform: scale(1.06); opacity: 1; }
    100% { transform: scale(1); }
}
.winner-card { animation: winnerCardPop .5s cubic-bezier(.2, .9, .3, 1.3); }
@keyframes emojiWiggle {
    0%, 100% { transform: rotate(-8deg); }
    50%      { transform: rotate(8deg); }
}
.winner-emoji { display: inline-block; animation: emojiWiggle .6s ease-in-out infinite; }

/* =====================================================================
   OVERRIDES des utilitaires Tailwind (sombres -> clairs)
   !important pour battre les utilitaires générés par le CDN.
   ===================================================================== */

/* Backgrounds */
.bg-cyber-900          { background-color: var(--bg) !important; }
.bg-cyber-800          { background-color: var(--surface) !important; }
.bg-cyber-700          { background-color: var(--surface) !important; }
.bg-cyber-900\/80      { background-color: rgba(238, 242, 247, .85) !important; }
.bg-cyber-700\/60      { background-color: var(--surface-2) !important; }
.bg-cyber-700\/40      { background-color: var(--surface-2) !important; }
.hover\:bg-cyber-700:hover { background-color: #e2e8f0 !important; }

/* Borders */
.border-cyber-600,
.border-cyber-500           { border-color: var(--border) !important; }
.border-cyber-600\/60       { border-color: rgba(203, 213, 225, .85) !important; }
.border-cyber-600\/50       { border-color: rgba(203, 213, 225, .75) !important; }
.border-cyber-600\/40       { border-color: rgba(203, 213, 225, .65) !important; }

/* Text — neutrals */
.text-white      { color: #0f172a !important; }
.text-slate-100  { color: #0f172a !important; }
.text-slate-200  { color: #1e293b !important; }
.text-slate-300  { color: #334155 !important; }
.text-slate-400  { color: #475569 !important; }
.text-slate-500  { color: #64748b !important; }

/* Text — accents (darkened for contrast on white) */
.text-cyan-300     { color: #0e7490 !important; }
.text-cyan-400     { color: #0891b2 !important; }
.text-emerald-300  { color: #047857 !important; }
.text-emerald-400  { color: #059669 !important; }
.text-fuchsia-300  { color: #a21caf !important; }
.text-fuchsia-400  { color: #c026d3 !important; }
.text-amber-300    { color: #b45309 !important; }
.text-violet-300   { color: #6d28d9 !important; }
.text-rose-300     { color: #be123c !important; }
.text-red-300      { color: #dc2626 !important; }

/* Gradient-clip headings -> solid readable color on light bg */
.bg-clip-text.text-transparent {
    -webkit-background-clip: border-box !important;
    background-clip: border-box !important;
    background-image: none !important;
    color: #0e7490 !important;
    -webkit-text-fill-color: #0e7490 !important;
}

/* ---------- « Avancement par module » : mode haute lisibilité (projecteur) ----------
   Fond blanc + texte noir foncé pour une projection nette en salle de cours.
   Ciblé uniquement sur cette section, le reste de l'admin garde le thème sombre. */
#module-progress-admin {
    background: #ffffff !important;
    border-color: #111827 !important;
    color: #0a0a0a !important;
}
#module-progress-admin h3,
#module-progress-admin p,
#module-progress-admin span,
#module-progress-admin td,
#module-progress-admin th,
#module-progress-admin a {
    color: #0a0a0a !important;
}
/* Lignes / cartes de chaque module */
#module-progress-admin .rounded-lg {
    background: #f4f4f5 !important;
    border-color: #111827 !important;
}
/* Bordures des tableaux et séparateurs */
#module-progress-admin [class*="border-"] {
    border-color: #9ca3af !important;
}
/* Badges de statut : texte noir sur gris clair, bordure nette */
#module-progress-admin span[class*="bg-"] {
    background: #e5e7eb !important;
    color: #0a0a0a !important;
    border: 1px solid #4b5563;
}
/* Piste de la barre de progression */
#module-progress-admin .bg-cyber-800\/60 {
    background: #d1d5db !important;
}
/* Segments de la barre en niveaux de gris (visibles au projecteur) */
#module-progress-admin .bg-emerald-500\/70 { background: #111827 !important; }
#module-progress-admin .bg-amber-500\/70   { background: #6b7280 !important; }
#module-progress-admin .bg-slate-600\/50   { background: #e5e7eb !important; }
/* Point « Temps réel » : vert foncé, lisible sur fond blanc */
#module-progress-admin .bg-emerald-400 { background: #15803d !important; }

/* Lignes « En cours » mises en évidence en orange */
#module-progress-admin tr[data-status="in_progress"] {
    background: #ffedd5 !important;
}
#module-progress-admin tr[data-status="in_progress"] td {
    color: #9a3412 !important;
    font-weight: 600;
}
/* Badge « En cours » en orange plein (texte blanc) */
#module-progress-admin tr[data-status="in_progress"] span[class*="bg-"] {
    background: #f97316 !important;
    color: #ffffff !important;
    border-color: #c2410c !important;
}
/* Compteur « En cours » (⏳) de l'en-tête de module en orange */
#module-progress-admin span[title="En cours"] {
    color: #c2410c !important;
    font-weight: 700;
}

/* Badge « spoiler » : étudiant ayant refait le quiz (plusieurs tentatives) */
#module-progress-admin .retry-flag {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    margin-left: .45rem;
    padding: .05rem .45rem;
    font-size: .68rem;
    font-weight: 700;
    line-height: 1.5;
    white-space: nowrap;
    color: #b91c1c !important;
    background: #fee2e2 !important;
    border: 1px solid #b91c1c;
    border-radius: 999px;
    vertical-align: middle;
}
/* Compteur de tentatives en alerte (> 1) */
#module-progress-admin .attempts-warn {
    color: #b91c1c !important;
    font-weight: 800 !important;
}

/* --- Page Spoiler (#/spoiler) --- */
/* Masquage des réponses (bouton « Masquer les réponses ») */
.spoiler-hidden { display: none !important; }

@media print {
    nav, footer, #toast,
    #spoiler-search, #spoiler-toggle, #spoiler-print { display: none !important; }
    body { background: #fff !important; color: #000 !important; }
    .card { break-inside: avoid; }
}

/* =====================================================================
   Page « Félicitations » (#/felicitation) — générique de film défilant.
   Styles autonomes (couleurs codées en dur) : le site force un thème clair
   via les overrides ci-dessus, mais cette page doit rester un vrai « écran
   noir de cinéma », donc on n'utilise aucune classe Tailwind sombre ici.
   ===================================================================== */
html.credits-lock-scroll, body.credits-lock-scroll { overflow: hidden !important; }

.credits-viewport {
    position: fixed;
    inset: 0;
    z-index: 500;
    background: radial-gradient(ellipse at 50% 40%, #0c1730 0%, #04070f 70%, #000000 100%);
    overflow: hidden;
    font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
}

/* Étoiles discrètes en fond, purement décoratif. */
.credits-viewport::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(rgba(255,255,255,.35) 1px, transparent 1px),
        radial-gradient(rgba(255,255,255,.2) 1px, transparent 1px);
    background-size: 140px 140px, 90px 90px;
    background-position: 0 0, 45px 60px;
    opacity: .5;
    pointer-events: none;
}

.credits-controls {
    position: absolute;
    top: 1rem;
    right: 1rem;
    z-index: 10;
    display: flex;
    gap: .5rem;
    flex-wrap: wrap;
}
.credits-btn {
    font-size: .75rem;
    padding: .55rem .95rem;
    border-radius: .6rem;
    border: 1px solid rgba(255,255,255,.25);
    background: rgba(255,255,255,.07);
    color: #e2e8f0 !important;
    cursor: pointer;
    backdrop-filter: blur(6px);
    text-decoration: none;
    font-weight: 600;
    letter-spacing: .02em;
    transition: background .15s ease;
}
.credits-btn:hover { background: rgba(255,255,255,.18); }

.credits-stage {
    position: absolute;
    inset: 0;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 14%, black 86%, transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0%, black 14%, black 86%, transparent 100%);
}

.credits-track {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    text-align: center;
    color: #e6f1ff;
    will-change: transform;
    transform: translateY(100vh);
    padding: 0 5vw;
}
.credits-track.credits-running {
    animation-name: credits-crawl;
    animation-duration: var(--credits-duration, 60s);
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}
.credits-track.credits-paused { animation-play-state: paused; }

@keyframes credits-crawl {
    from { transform: translateY(var(--credits-start, 100vh)); }
    to   { transform: translateY(var(--credits-end, -100%)); }
}

.credits-block { padding: 3vh 0; }
.credits-space     { height: 14vh; }
.credits-space-lg   { height: 26vh; }

.credits-logo {
    font-size: clamp(1.5rem, 4vw, 2.4rem);
    letter-spacing: .22em;
    font-weight: 800;
    color: #7dd3fc;
    text-transform: uppercase;
}
.credits-sub {
    font-size: clamp(.8rem, 2vw, 1.05rem);
    letter-spacing: .32em;
    color: #94a3b8;
    text-transform: uppercase;
    margin-top: .6rem;
}
.credits-gold {
    font-size: clamp(2.2rem, 7vw, 4.6rem);
    font-weight: 900;
    letter-spacing: .06em;
    line-height: 1.15;
    background: linear-gradient(90deg, #fde68a, #fbbf24, #f59e0b, #fbbf24, #fde68a);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    text-transform: uppercase;
}
.credits-line {
    font-size: clamp(1rem, 2.3vw, 1.35rem);
    color: #cbd5e1;
    margin-top: 1rem;
}
.credits-section-title {
    font-size: clamp(1.05rem, 2.6vw, 1.5rem);
    letter-spacing: .3em;
    color: #22d3ee;
    text-transform: uppercase;
    font-weight: 700;
    margin-bottom: 2.6rem;
}
.credits-name {
    font-size: clamp(1.1rem, 2.5vw, 1.55rem);
    color: #f8fafc;
    letter-spacing: .05em;
    margin: .85rem 0;
    font-weight: 600;
}

@media (max-width: 640px) {
    .credits-controls { top: .6rem; right: .6rem; }
    .credits-btn { padding: .45rem .7rem; font-size: .68rem; }
}