/* === STYLE GLOBAL === */
body, html { margin: 0; padding: 0; font-family: 'Segoe UI', sans-serif; background-color: #000000; color: #e0e0e0; min-height: 100vh; }

header { background-color: #111; border-bottom: 2px solid #34febb; padding: 15px 0; position: sticky; top: 0; z-index: 1000; }
nav { display: flex; justify-content: center; gap: 30px; font-size: 1.1em; flex-wrap: wrap; padding: 0 10px; }
nav a { color: white; text-decoration: none; transition: 0.3s; }
nav a:hover { color: #34febb; text-decoration: underline; }

.container { width: 100%; max-width: 900px; margin: 0 auto; padding: 20px; padding-bottom: 80px; display: flex; flex-direction: column; align-items: center; box-sizing: border-box; }
.logo { width: 100%; max-width: 350px; display: block; margin: 0 auto 20px; }

h1 { color: #34febb; text-align: center; text-transform: uppercase; letter-spacing: 2px; }
.subtitle { color: #fff; margin-bottom: 30px; text-align: center; font-style: italic; }

/* Timer */
#timer { position: fixed; top: 100px; right: 20px; background: #111; color: #34febb; border: 1px solid #34febb; padding: 10px 20px; border-radius: 5px; font-weight: bold; font-family: monospace; display: none; z-index: 2000; }
#timer.show { display: block; }

#startScreen { background: #111; border: 1px solid #333; padding: 40px; border-radius: 10px; text-align: center; width: 100%; max-width: 500px; border-top: 4px solid #34febb; box-sizing: border-box; }
#emailInput { width: 80%; padding: 12px; margin: 20px 0; background: #000; border: 1px solid #333; color: #fff; text-align: center; box-sizing: border-box; }

.hidden { display: none !important; }

/* FORÇAGE DE LA LARGEUR A 100% */
.full-width { width: 100% !important; }
#quizForm { width: 100%; }
#resultsContent { width: 100%; }

/* --- Styles du Quiz --- */
.question-card { background: #111; border: 1px solid #222; border-left: 4px solid #333; padding: 20px; margin-bottom: 20px; width: 100%; border-radius: 5px; transition: 0.3s; box-sizing: border-box; }
.question-card:hover { border-left-color: #34febb; background: #141414; }
.question-number { color: #34febb; font-weight: bold; margin-right: 10px; }
.question-text { font-weight: bold; color: #fff; font-size: 1.1em; margin-bottom: 15px; display: inline; }

label { display: block; margin: 8px 0; padding: 10px; background: #050505; border: 1px solid #222; cursor: pointer; transition: 0.3s; box-sizing: border-box; }
label:hover { border-color: #34febb; color: #fff; }
input[type="radio"] { margin-right: 10px; accent-color: #34febb; }

.btn-action { background: transparent; color: #34febb; border: 1px solid #34febb; padding: 12px 30px; font-size: 1em; font-weight: bold; text-transform: uppercase; cursor: pointer; margin-top: 20px; }
.btn-action:hover { background: #34febb; color: #000; }
.btn-disabled { opacity: 0.5; cursor: not-allowed; }

/* --- Styles des Résultats --- */
.result-summary { background: #111; padding: 20px; border-radius: 10px; border: 1px solid #34febb; text-align: center; margin-bottom: 30px; width: 100%; box-sizing: border-box; }
.final-score { font-size: 2em; color: #34febb; font-weight: bold; }

.card-correct { border-left-color: #28a745 !important; }
.card-wrong { border-left-color: #dc3545 !important; }
.no-pointer { pointer-events: none; }

label.correct-answer { background-color: rgba(40, 167, 69, 0.2) !important; border-color: #28a745 !important; color: #fff !important; }
label.wrong-answer { background-color: rgba(220, 53, 69, 0.2) !important; border-color: #dc3545 !important; opacity: 0.7; }

.explanation-box { margin-top: 15px; padding: 15px; background: rgba(52, 254, 187, 0.05); border-left: 3px solid #34febb; font-size: 0.95em; color: #ddd; }
.explanation-title { font-weight: bold; color: #34febb; display: block; margin-bottom: 5px; }

footer { background-color: #111; color: #fff; text-align: center; padding: 20px 10px; margin-top: 40px; border-top: 1px solid #222; padding-bottom: 60px; }
footer a { color: #fff !important; text-decoration: none; }

#cookie-banner { position: fixed; bottom: 0; width: 100%; background-color: #111; border-top: 1px solid #34febb; color: #fff; text-align: center; padding: 10px; font-size: 14px; z-index: 1000; }

/* === RESPONSIVE TABLETTE === */
@media (max-width: 768px) {
    nav { gap: 15px; font-size: 0.95em; }

    h1 { font-size: 1.5em; letter-spacing: 1px; }

    /* Timer repositionné en haut au centre sur mobile */
    #timer { top: auto; bottom: 70px; right: 10px; font-size: 0.9em; padding: 8px 14px; }

    #startScreen { padding: 25px 20px; }
    #emailInput { width: 100%; }

    .question-card { padding: 15px; }
    .question-text { font-size: 1em; }

    label { padding: 10px 8px; font-size: 0.95em; }

    .btn-action { width: 100%; padding: 14px; box-sizing: border-box; }

    .final-score { font-size: 1.6em; }
    .result-summary { padding: 15px; }
    .explanation-box { padding: 12px; font-size: 0.9em; }
}

/* === RESPONSIVE MOBILE === */
@media (max-width: 480px) {
    nav { gap: 10px; font-size: 0.85em; }
    .logo { max-width: 220px; }
    h1 { font-size: 1.2em; }
    .container { padding: 15px; padding-bottom: 80px; }

    #startScreen { padding: 20px 15px; }
    .question-card { padding: 12px; }
    .question-number { font-size: 0.95em; }
    .question-text { font-size: 0.95em; }
    label { font-size: 0.9em; padding: 8px; }

    .final-score { font-size: 1.4em; }
}