/* ========================================
   PAGE ROUE
   ======================================== */

.wheel-header {margin-bottom: clamp(15px, 3vw, 20px); padding: 10px 0; width:100%;}
.wheel-title {font-size: clamp(1.3em, 4vw, 3em); color: var(--primary-color); margin:5px 0; line-height:clamp(1em, 5vw, 1.6em);}
.welcome-message {/*padding:0 clamp(2px, 1.5vw, 20px);*/}
.welcome-message-border {border-width: 0 3px 0 0; border-color: var(--primary-color); border-style: solid; margin: 3px 35px 0 0; padding: 0 35px 0 0;}
.welcome-message h2 {color:var(--secondary-color); letter-spacing: 1px; font-size: clamp(1.2em, 3vw, 2.5em);}
.welcome-message h3 {font-weight:500; font-size: clamp(1.1em, 3vw, 2em);}
.welcome-message p {font-size:1.2em; margin: 20px 0; color:var(--secondary-color);}
.welcome-message strong {color: var(--primary-color); letter-spacing: 1px;}
.welcome-message a {color: var(--primary-color); letter-spacing: 1px;}
.img300 {width: 100%; height: auto; max-width: 300px;}


/* ========================================
   CHAMP CODE (MODE PRIVÉ)
   ======================================== */

.token-input-container {max-width: 500px; margin: 30px auto; padding: 20px; background: var(--light-bg); border-radius: 12px; border: 2px solid var(--primary-color);}
.token-input-container label {display: block; margin-bottom: 10px; font-size: 1.3em; color: var(--dark-color);}
.token-input {width: 100%; padding: 12px 15px; border: 2px solid var(--border-color); border-radius: 8px; font-size: 1.5em; margin-bottom: 10px; text-align: center; font-weight: 900; color: #ff6b35; transition: var(--transition);}
.token-input:focus {outline: none; border-color: var(--primary-color);}
.token-input[readonly] {background: #f0f0f0; cursor: not-allowed;}
.btn-validate-token {background: var(--primary-color); color: var(--white); border: none; padding: 12px 30px; border-radius: 8px; font-weight: bold; cursor: pointer; transition: var(--transition);}
.btn-validate-token:hover {transform: translateY(-2px); box-shadow: 0 4px 15px rgba(255, 107, 53, 0.3);}

/* ========================================
   FORMULAIRE LEAD
   ======================================== */

.lead-form-container {max-width: 660px; margin: auto; /*max-width: 500px; margin: 30px auto; padding: 25px; background: var(--light-bg); border-radius: 12px; border: 2px solid var(--secondary-color);*/}
.lead-form {display: flex; flex-direction: column; gap: 15px;}
.lead-form-title {font-size: 1.3em; color: var(--white); text-align: center; background-color: var(--primary-color); padding: 10px 10px 15px; border-radius: 8px;}
.lead-field {display: flex; flex-direction: column; gap: 4px;}
.lead-field label {font-size: 0.95em; font-weight: 600; color: var(--dark-color);}
.lead-field input {width: 100%; padding: 12px; border: 2px solid var(--border-color); border-radius: 8px; font-size: 1em; transition: var(--transition); background: var(--white);}
.lead-field input:focus {outline: none; border-color: var(--secondary-color); box-shadow: 0 0 0 3px rgba(118, 75, 162, 0.15);}
.lead-field-error {font-size: 0.85em; color: var(--danger-color); /*min-height: 1em;*/}
.lead-submit-btn {width: 100%; padding: 14px; border-radius: 8px;  border: none; background: var(--secondary-color); color: var(--white); font-size: 1.3em; cursor: pointer; transition: var(--transition); margin-top: 5px; font-family: var(--primary-font);}
.lead-submit-btn:hover:not(:disabled) {transform: translateY(-2px); box-shadow: 0 4px 15px rgba(118, 75, 162, 0.3);}
.lead-submit-btn:disabled {opacity: 0.6; cursor: not-allowed;}
.lead-form-error {display: block; text-align: center; font-size: 0.95em; color: var(--danger-color); font-weight: 600; min-height: 1.2em;}

/* ========================================
   ZONE DE JEU
   ======================================== */

.wheel-game-area {background: var(--white); border-radius: 20px; padding: 40px clamp(10px, 3vw, 40px); box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1); margin-bottom: 60px; position: relative; /*max-width: var(--content-max-width);*/ width: 100%; margin-left: auto; margin-right: auto;}
#deckCounter {position: absolute; top: clamp(10px, 3vw, 20px); left: clamp(10px, 3vw, 20px); user-select: none; font-size: clamp(0.8em, 3vw, 1.3em);}
#quizScore {position: absolute; bottom: clamp(10px, 3vw, 20px); left: clamp(10px, 3vw, 20px); user-select: none; font-size: clamp(0.8em, 3vw, 1.3em);}

/* Bouton plein écran */
.btn-fullscreen {position: absolute; top: 15px; right: 15px; background: var(--white); border: 2px solid var(--border-color); border-radius: 8px; width: clamp(30px, 3vw, 40px); height: clamp(30px, 3vw, 40px); font-size: clamp(1.2em, 3vw, 1.5em); cursor: pointer; transition: var(--transition); display: flex; align-items: center; justify-content: center; z-index: 10;}
.btn-fullscreen:hover {background: var(--light-bg); border-color: var(--primary-color); color: var(--primary-color);}

/* État plein écran 
.wheel-game-area:fullscreen {background: var(--white); display: flex; align-items: center; justify-content: center; padding: 20px;}
.wheel-game-area:-webkit-full-screen {background: var(--white); display: flex; align-items: center; justify-content: center; padding: 20px;}
.wheel-game-area:-moz-full-screen {background: var(--white); display: flex; align-items: center; justify-content: center;  padding: 20px;}*/

/* Message d'erreur */
.wheel-error {text-align: center; padding: 60px 20px;}
.error-icon {font-size: 4em; margin-bottom: 20px;}
.error-text {font-size: 1.2em; color: var(--danger-color); font-weight: 500;}

/* ========================================
   CANVAS DE LA ROUE
   ======================================== */

.wheel-canvas-wrapper {position: relative; width: min(100%, 900px); margin: 0 auto; /*aspect-ratio: 1;*/}
#wheelCanvas {width: 100%; height: 100%; display: block;}

.spin-button, .spin-button-tube {background: var(--primary-color); border: clamp(3px, 1vw, 6px) solid var(--white); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3); cursor: pointer; transition: var(--transition); z-index: 100; display: flex; align-items: center; justify-content: center;}
.spin-button {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: clamp(80px, 11vw, 200px);; height: clamp(80px, 11vw, 200px); /*max-width: 200px; max-height: 200px; min-width: 80px; min-height: 80px;*/ border-radius: 50%; white-space: pre-line; }

#spinButton.spin-text-ecoute {padding-top: 15px;}
#spinButton.spin-text-ecoute .spin-text {line-height: 1.3;}

.spin-button-tube {padding: 20px 10px; margin: -90px auto 0; width: 100%; max-width: 400px; border-radius: 16px;}
.spin-button-tube .spin-text {font-size: clamp(1.2em, 3vw, 3em);}

.spin-button:hover:not(:disabled) {transform: translate(-50%, -50%) scale(1.05); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);}
.spin-button:active:not(:disabled) {transform: translate(-50%, -50%) scale(0.98);}
.spin-button:disabled {/*opacity: 0.5;*/ cursor: not-allowed; background: #ccc;}

.spin-button-tube:hover:not(:disabled) {transform: scale(1.05); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);}
.spin-button-tube:active:not(:disabled) {transform: scale(0.98);}
.spin-button-tube:disabled {/*opacity: 0.5;*/ cursor: not-allowed; background: #ccc;}

#wheelCanvas, #cooldownCanvas {display: block; margin: 0 auto;}
#cooldownCanvas {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); pointer-events: none;}

.spin-text {color: var(--white); font-size: clamp(15px, 3vw, 33px); font-weight: bold; text-transform: uppercase; font-family: "Mouse Memoirs", sans-serif;}

.text-mystery {animation: mystery-pulse 1s ease-in-out infinite; letter-spacing: 0.3em; padding-left:clamp(1px, 1vw, 15px); text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);}
@keyframes mystery-pulse {
  0%, 100% {transform: scale(1); text-shadow: 0 0 20px rgba(118, 75, 162, 0.5);}
  50% {transform: scale(2); text-shadow: 0 0 30px rgba(118, 75, 162, 0.8);}
}

.text-locked {}
.text-replay {}
.text-question {}

/* ========================================
   LAYOUT ROUE + ASIDE + LOTS
   ======================================== */

.apple-blindtest-help {margin: 20px 0; padding: 15px; border-radius: 8px; background: var(--secondary-color); color: var(--border-color); text-align: justify;}
.apple-blindtest-help strong {font-weight:500; font-size: 1.2em; color: var(--white);}
.apple-blindtest-help a.apple-help-close { display:block; margin-top: 10px; text-decoration: underline; cursor: pointer; text-align: center; color: var(--white); background: var(--primary-color); padding: 6px 12px; border-radius: 8px;}

.prizes-list-full-width {}
.prizes-list-full-width h2 {text-align:center; font-size:2em; color:var(--dark-color); margin-bottom:40px;}
.prizes-grid {display:grid; grid-template-columns:repeat(auto-fit, minmax(450px, 1fr)); gap:20px;}

.prize-card {border-radius:12px; padding:20px; box-shadow:0 4px 15px rgba(0, 0, 0, 0.2); transition:var(--transition); min-height:80px; display:flex; align-items:center; justify-content:center; gap:15px}
.prize-card:hover {transform:translateY(-5px); box-shadow:0 8px 25px rgba(0, 0, 0, 0.3);}
.prize-image {flex-shrink:0; width:100%; max-width:100px; border-radius:8px; overflow:hidden; background:rgba(255, 255, 255, 0.2); display:flex; align-items:center; justify-content:center;}
.prize-image img {width:100%; height:100%; object-fit:cover;}
.prize-info {width:100%;}
.prize-name {font-size:1.6em;}
.prize-description {font-size:0.95em; line-height:1.4;}

.yt-blindtest-wrapper {padding: clamp(10px, 3vw, 30px); background: var(--white); border-radius: 12px; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1); overflow:hidden;}
.yt-blindtest-player {background: var(--border-color); width:300px; aspect-ratio:16 / 9; float:left; margin:0 20px 0 0; border-radius: 12px; overflow: hidden;}
.yt-blindtest-player #ytBlindtestHost iframe {width: 100%; height: 100%; display: block;}
.yt-blindtest-text {text-align: justify;}

.wheel-error-page {text-align: center; padding: 60px 20px;}
.wheel-error-page h1 {margin-bottom: 16px;}
.wheel-error-page p {margin-bottom: 24px; color: #666;}
.btn-retour {display: inline-block; padding: 10px 24px; background: #667eea; color: #fff; border-radius: 8px; text-decoration: none; font-weight: 600;}
.btn-retour:hover {background: #5a6fd6;}
.wheel-disclaimer-overlay {position: fixed; inset: 0; background: rgba(0,0,0,0.7); display: flex; align-items: center; justify-content: center; z-index: 9999;}
.wheel-disclaimer-content {background: #fff; border-radius: 12px; padding: 32px; max-width: 520px; width: 90%; text-align: center;}
.wheel-disclaimer-btn {margin-top: 20px; padding: 10px 24px; background: #667eea; color: #fff; border: none; border-radius: 8px; cursor: pointer; font-size: 15px; font-weight: 600;}
.wheel-disclaimer-btn:hover {background: #5a6fd6;}

.error-404 {text-align:center; padding:100px 20px;}
.error-404-icon {font-size:8em; margin-bottom:30px; animation:spin404 3s ease-in-out infinite;}
.error-404-title {font-size:2.5em; color:var(--dark-color); margin-bottom:20px;}
.error-404-text {font-size:1.2em; color:#666; margin-bottom:40px;}
.btn-home {display:inline-block; background:linear-gradient(135deg, var(--primary-color), var(--secondary-color)); color:var(--white); padding:15px 40px; border-radius:50px; text-decoration:none; font-weight:bold; font-size:1.1em; transition:var(--transition);}
.btn-home:hover {transform:translateY(-3px); box-shadow:0 8px 20px rgba(0, 0, 0, 0.2);}
@keyframes spin404 {
    0%, 100% { transform:rotate(0deg); }
    25% { transform:rotate(10deg); }
    75% { transform:rotate(-10deg); }
}

/* ========================================
   MODAL RÉSULTAT
   ======================================== */

.result-modal {position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.8); display: flex; align-items: center; justify-content: center; z-index: 1000; animation: fadeIn 0.3s ease;}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.result-content {display: flex; flex-direction: column; gap: 10px; background: var(--white); border-radius: 20px; padding: clamp(20px, 4vw, 30px); width: 90%; text-align: center; animation: slideUp 0.5s ease; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3); max-height: 100%; overflow-y: auto; scrollbar-width: none;}
.result-content-global {max-width: 580px;}
.result-content-quiz {max-width: 780px;}
.result-content-blindtest {max-width: 480px;}


@keyframes slideUp {
    from { transform: translateY(50px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

.result-icon {animation: bounce 0.6s ease infinite alternate; display:flex; justify-content:center; align-items:center; width:100%; max-width:clamp(250px, 45vh, 500px); margin: 0 auto;}
.result-icon img {/*width:100%; height:auto;*/ object-fit:contain; overflow:hidden; border-radius:12px;}

@keyframes bounce {
    from { transform: translateY(0); }
    to { transform: translateY(-10px); }
}
.result-block {display:flex; flex-direction:column; gap:10px;}
.result-title {font-size:clamp(18px, 4vw, 25px); margin-bottom:10px; display:none;}
.result-prize {font-size:clamp(30px, 4vw, 40px); color: var(--primary-color); line-height:clamp(30px, 5vw, 45px); margin-bottom: 15px;}
.result-description {font-size: clamp(20px, 4vw, 25px);}
.result-validate {width: 100%; padding: 15px; border-radius: 50px; border: 0px; background: #45243e; color: var(--white); font-size: 1.1em; font-weight: 700; cursor: pointer; transition: 0.3s; transform: translateY(0px); box-shadow: none;}
.result-close {width:100%; padding:15px; border-radius:50px; border:none; background:var(--primary-color); color: var(--white); font-size:clamp(16px, 4vw, 18px); font-weight:700; cursor:pointer; transition:var(--transition); box-shadow:none;}
.result-close:hover {transform: translateY(-2px); box-shadow: 0 8px 20px rgba(255, 107, 53, 0.3);}

/* ============================================
   QUIZ MODAL - Styles complets
   ============================================ */

.result-modal {display:none;}
.result-modal.show {display:flex;}   

.quiz-timer {font-size:14px; opacity: 0.85; color:#F39C12;}

/* QCM Wrapper */
.quiz-qcm {display: none;}
.quiz-qcm.active {display: block;}
/* Choices container */
.quiz-choices {display: grid; gap: 12px; margin-bottom: 16px;}

.quiz-modal-footer {margin-top:10px;}

/* ========================================
   TIMER QUIZ (MODE OPEN)
   ======================================== */

#quizTimer {font-size:1.3rem; font-weight:600; text-align:center; padding:15px; background:linear-gradient(135deg, rgba(52, 152, 219, 0.1), rgba(41, 128, 185, 0.1)); border-radius: 12px; border: 2px solid rgba(52, 152, 219, 0.3); color:#2980b9; transition: all 0.3s ease; display: none;}
#quizTimer:not(:empty) {display: block;}
#quizTimer.active {animation: pulse 1s ease-in-out infinite;}
#quizTimer.warning {background: linear-gradient(135deg, rgba(243, 156, 18, 0.1), rgba(230, 126, 34, 0.1)); border-color: rgba(243, 156, 18, 0.3); color: #e67e22;}
#quizTimer.danger {background: linear-gradient(135deg, rgba(231, 76, 60, 0.1), rgba(192, 57, 43, 0.1)); border-color: rgba(231, 76, 60, 0.3); color: #c0392b;}

@keyframes pulse {
    0%, 100% {transform: scale(1); opacity: 1;}
    50% {transform: scale(1.02); opacity: 0.9;}
}

/* Responsive */
@media (max-width: 768px) {
    #quizTimer {font-size: 1.1rem; padding: 12px 15px;}
}

/* ============================================
   BOUTONS DE CHOIX QCM - ICI !
   ============================================ */

.quiz-choice-btn {width: 100%; text-align: left; padding: 15px; border-radius: 12px; border: 2px solid var(--primary-color); /*background: var(--white);*/ cursor: pointer; font-weight: 700; font-size: 16px; transition: all 0.3s; outline: none;}
/* Hover normal */
.quiz-choice-btn:hover:not(.selected):not(.correct):not(.wrong):not(:disabled) { background: rgba(255, 255, 255, 0.12); border-color: var(--secondary-color);}
/* Sélectionné (avant validation) */
.quiz-choice-btn.selected { outline: 3px solid rgba(46, 204, 113, 0.8); background: rgba(46, 204, 113, 0.2); border-color: rgba(46, 204, 113, 0.6);}
/* Bonne réponse (après validation) */
.quiz-choice-btn.correct {border: 3px solid var(--primary-color) !important; background: var(--primary-color) !important; color: #fff !important; cursor: default; font-size: 1em; display: block !important;}
/* Mauvaise réponse sélectionnée (après validation) */
.quiz-choice-btn.wrong { border: 3px solid rgba(231, 76, 60, 1) !important; background: #ccc !important; color: #E74C3C !important; cursor: default; display: block !important;}
.quiz-choice-btn:disabled {cursor: default; border: none; background: #ccc; color: #fff; display:none;}

/* ============================================
   BOUTON VALIDER
   ============================================ */

/*.quiz-validate-btn { width: 100%; padding: 16px; border-radius: 12px; border: 0; background: #2ECC71; color: #111; font-size: 16px; font-weight: 900; cursor: pointer; transition: all 0.3s;}*/
.quiz-validate-btn:hover:not(:disabled) {transform: translateY(-2px); box-shadow: 0 4px 12px rgba(46, 204, 113, 0.4);}
.quiz-validate-btn:disabled {cursor: default;}
/* État "Bonne réponse" */
.quiz-validate-btn.success { background: #2ECC71;}
/* État "Mauvaise réponse" */
.quiz-validate-btn.error { background: #E74C3C;}

/* ============================================
   ANSWER (Mode Open)
   ============================================ */

.quiz-answer {display: none; flex-direction:column; padding: 10px; background: rgba(46, 204, 113, 0.15); border: 1px solid rgba(46, 204, 113, 0.3); border-radius: 12px;}
.quiz-answer.show {display: flex;}
.quiz-answer-label {font-size: 14px; font-weight: 800; margin-bottom: 8px; opacity: 0.85;}
.quiz-answer-text {font-size:clamp(22px, 3vw, 30px); font-weight:600; line-height:1.2;}

/* ============================================
   EXPLANATION (Mode QCM)
   ============================================ */

.quiz-explanation { display: none; margin-top: 14px; padding: 14px; background: rgba(243, 156, 18, 0.15); border: 1px dashed rgba(243, 156, 18, 0.4); border-radius: 12px;}
.quiz-explanation.show { display: block;}
.quiz-explanation-label { font-size: 14px; font-weight: 800; margin-bottom: 6px; opacity: 0.85;}
.quiz-explanation-text { font-size: 16px; line-height: 1.4; opacity: 0.95;}


/* ========================================
   EPHEMERE
   ======================================== */

.ephe-ui {position: relative; display:grid;gap:10px}
.ephe-ui-row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.wrap-textarea {position: relative;}
select#modeSelect {padding: 10px; margin: 0 0 0 10px; color: #ff6b35; font-family: 'Boogaloo'; font-size: 1em;}
textarea#linesInput{width:100%;min-height:280px;padding:0 10px 10px 60px; font-family:inherit; font-size: 0.9em;}
#linesInput {width:100%; line-height: 22px;}
.cursor-counter {position:absolute; left: 10px; top: 3px; font-size: 12px; padding: 0 7px; border-radius: 8px; background: rgba(0,0,0,0.06); color: rgba(0,0,0,0.75); pointer-events: none; transition: transform 80ms linear;}
.cursor-counter.max {background: rgba(192,57,43,0.12); color: rgba(192,57,43,0.95); font-weight: 700;}
.muted{opacity:.75}


/* ========================================
   RESPONSIVE
   ======================================== */

@media (max-height: 580px) { 
   .result-content {max-width:90%;}
   .result-content-blindtest {display: grid; grid-template-columns: 0.7fr 1.6fr 0.7fr; align-items: center;}
   .result-content-global {display: grid; grid-template-columns: 0.7fr 1.6fr 0.7fr; align-items: center;}
   .result-content-quiz {gap:10px;}
   .result-content-blindtest {}
}

@media (max-width: 768px) {

   .welcome-message-border {border:none; margin:20px 0 0;}
   .result-icon {font-size: 4em;}
   .prizes-grid {grid-template-columns: 1fr;}
   .token-input-container {padding: 15px;}
   .lead-form-container {padding: 15px; margin: 20px auto;}
   .yt-blindtest-wrapper {display: flex; flex-direction: column; /* Ordre vertical */ align-items: center;}
   .yt-blindtest-player {float: none; margin: 20px 0 0 0; width: 100%;}
   .yt-blindtest-text {order: -1;}
}

@media (max-width: 480px) {
    .btn-fullscreen {width: 30px; height: 30px; font-size: 1.2em;}
    .spin-button {border:3px solid var(--white);}
}