/* RESET & BASE */
* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:'Montserrat', sans-serif; background:#050505; color:#fff; overflow-x:hidden; -webkit-font-smoothing: antialiased; }

/* ==================== GESTION AFFICHAGE PAGES (CRITIQUE) ==================== */
/* Par défaut, TOUT est caché avec !important pour éviter les bugs */
.page { 
    display: none !important; 
    min-height: 100vh; 
    width: 100%; 
    position: relative; 
}

/* Seule la page active s'affiche */
.page.active { 
    display: block !important; 
}

/* Si la page active doit être centrée (Quiz, Analyz, Result) */
.page.active.centered-content { 
    display: flex !important; 
    flex-direction: column; 
    align-items: center; 
    justify-content: center; 
    padding: 20px;
    text-align: center; /* Assure que le texte ne part pas à gauche */
}

/* COLORS */
:root { --red: #ff1100; --dark-red: #cc0000; --grey: #222; }

/* ==================== LANDING ==================== */
.header-image { position:relative; height:100vh; width:100%; display:flex; align-items:center; justify-content:center; }
.header-image img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; opacity: 0.6; } /* Image assombrie */
.overlay { position:absolute; inset:0; background:linear-gradient(to bottom, rgba(0,0,0,0.4), rgba(0,0,0,0.9)); z-index:1; }

.hook { position:relative; z-index:2; text-align:center; width:90%; max-width:750px; margin-top:-40px; }

.badge { display:inline-block; background:rgba(255,17,0,0.2); padding:8px 20px; border-radius:50px; font-size:0.9rem; letter-spacing:2px; margin-bottom:20px; border:1px solid var(--red); text-transform:uppercase; font-weight:bold; color: var(--red); }

h1 { font-size:clamp(1.6rem, 5vw, 3rem); font-weight:800; line-height:1.1; margin-bottom:20px; text-shadow:0 2px 10px rgba(0,0,0,0.5); }
h2 { font-size:clamp(1.1rem, 4vw, 1.6rem); margin-bottom:25px; font-weight:600; line-height: 1.5; }

.highlight { color:var(--red); font-weight:900; text-decoration:underline; display: block; margin-top: 10px; }
.hook p { font-size:clamp(0.9rem, 3vw, 1.1rem); line-height:1.6; margin-bottom:30px; color:#ccc; max-width: 600px; margin-left: auto; margin-right: auto; }
.safe-text { font-size:0.85rem; color:#888; margin-top:20px; opacity:0.9; }

/* BUTTONS */
.big-red-btn { 
    background:var(--red); color:#fff; border:none; 
    padding:18px 30px; font-size:clamp(1rem, 4vw, 1.4rem); 
    font-weight:800; border-radius:8px; cursor:pointer; 
    text-transform:uppercase; letter-spacing:1px; 
    box-shadow:0 0 20px rgba(255, 17, 0, 0.4); 
    transition:transform 0.2s; width:100%; max-width:400px;
}
.big-red-btn:hover { transform:scale(1.02); background:var(--dark-red); }
.pulse-anim { animation: pulse 2s infinite; }

@keyframes pulse {
    0% { box-shadow: 0 0 0 0 rgba(255, 17, 0, 0.7); }
    70% { box-shadow: 0 0 0 15px rgba(255, 17, 0, 0); }
    100% { box-shadow: 0 0 0 0 rgba(255, 17, 0, 0); }
}

/* ==================== QUIZ ==================== */
.progress-bar { height:6px; background:#111; position:fixed; top:0; left:0; width:100%; z-index:10; }
#progress { height:100%; background:var(--red); width:0%; transition:width 0.3s ease; }

.quiz-container { width:100%; max-width:700px; }
.question-single h3 { font-size:clamp(1.4rem, 5vw, 2rem); font-weight:700; margin-bottom:30px; line-height:1.3; }
.question-single label { 
    display:block; background:#151515; border:1px solid #333; 
    margin:12px auto; padding:18px; border-radius:10px; 
    cursor:pointer; transition:all 0.2s; font-weight:600; 
    font-size:clamp(1rem, 4vw, 1.2rem); text-align:left;
}
.question-single label:hover { background:#222; border-color:var(--red); color:var(--red); }

/* ==================== LOADING & RESULT ==================== */
.loading-box, .result-box { width: 100%; max-width: 600px; }

.spinner {
    width: 60px; height: 60px; border: 5px solid #222; 
    border-top: 5px solid var(--red); border-radius: 50%; 
    animation: spin 1s linear infinite; margin: 0 auto 30px;
}
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
#analyzing-text { font-size:1.4rem; margin-bottom:15px; color:var(--red); font-weight: 800; }

.score-circle { 
    border:4px solid var(--red); width:140px; height:140px; 
    border-radius:50%; display:flex; flex-direction:column; 
    align-items:center; justify-content:center; margin:0 auto 25px;
    background:rgba(255,17,0,0.05); box-shadow:0 0 30px rgba(255,17,0,0.2);
}
.score-circle .label { font-size:0.7rem; text-transform:uppercase; color:#aaa; }
.score-circle .number { font-size:2.2rem; font-weight:900; color:#fff; }

.result-box h1 { font-size:1.8rem; margin-bottom:20px; color:#fff; font-weight: 800; }
.warning-text { background:#222; padding:15px; border-left:4px solid yellow; color:#fff; margin-bottom:20px; text-align:left; line-height:1.5; border-radius: 4px; }
.solution-text { font-size:1.1rem; margin-bottom:25px; line-height:1.5; color: #ddd; }

.olympic-alert { border:1px dashed var(--red); color:var(--red); padding:10px; margin-bottom:20px; font-weight:700; text-transform:uppercase; font-size:0.85rem; background:rgba(255,17,0,0.05); border-radius: 6px; }
.timer { margin-top:15px; color:#666; font-size:0.8rem; }

/* FOOTER & MODAL */
.mini-footer { position:absolute; bottom:10px; width:100%; text-align:center; z-index:5; }
.mini-footer a { color:rgba(255,255,255,0.4); text-decoration:none; font-size:0.7rem; }
.modal { display:none; position:fixed; inset:0; background:rgba(0,0,0,0.95); z-index:999; align-items:center; justify-content:center; }
.modal-content { background:#111; padding:30px; max-width:500px; border-radius:10px; position:relative; border:1px solid #333; text-align: left; }
.close { position:absolute; top:10px; right:15px; font-size:2rem; cursor:pointer; }