:root{
  --gtw-hover-bg: #f0e6d6;  /* choices */
  --gtw-hover-border: gold;

  --gtw-correct-bg: linear-gradient(180deg,#e8fbef,#f3fff8);
  --gtw-correct-border: rgba(46,204,113,0.26);
  --gtw-correct-color: #0b6b3a;

  --gtw-incorrect-bg: linear-gradient(180deg,#ffecec,#ffe3e3);
  --gtw-incorrect-border: rgba(231,76,60,0.22);
  --gtw-incorrect-color: #7a1a1a;
}



.accordion-container {
    width: 50%;
    max-width: 600px;
    background-color: #ffffff;
    border-radius: 10px;
    padding: 15px;
    margin-top: 40px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.accordion {
    background-color: #e6f4ea;
    color: #333;
    cursor: pointer;
    padding: 12px 18px;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    font-size: 16px;
    border-radius: 8px;
    margin-bottom: 10px;
    transition: background-color 0.3s;
    position: relative;
}

.accordion:hover {
    background-color: #d2ecd7;
}

.panel {
    padding-left: 20px;
    display: none;
    flex-direction: column;
    margin-bottom: 15px;
    text-align: left; /* Aligne le texte à gauche */
}

.genre-panel {
    max-height: 200px;        /* ajuste la hauteur max selon tes besoins */
    overflow-y: auto;         /* active le scroll vertical */
    padding-right: 0.5em;     /* espace pour la barre de scroll */
    margin-bottom: 1em;       /* un petit espacement en bas */
    border-left: 2px solid #ddd;
}

.sub-accordion {
    position: relative;
    cursor: pointer;
    margin-top: 1em;
    padding-left: 1.5em; /* pour laisser de la place au triangle */
    transition: color 0.3s;
}

.sub-accordion::before {
    content: "▸";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1em;
    transition: transform 0.3s ease;
    color: #555; /* couleur du triangle */
}

/* Quand la section est ouverte, fais tourner le triangle */
.sub-accordion.active::before {
    transform: translateY(-50%) rotate(90deg);
    color: #4CAF50;
}

.sub-panel {
    padding-left: 20px;
    display: none;
    flex-direction: column;
    gap: 4px;
}


.scroll-item {
    position: relative;      /* pour positionner la balle */
    padding-left: 1.2em;     /* espace pour la balle */
    cursor: pointer;         /* indique que c’est cliquable */
    color: #333;
    transition: background-color 0.2s;
    margin-top: 1em;
}


.scroll-item:hover {
    background-color: #f0f0f0;
}

.scroll-item::before {
    content: '●';            /* injecte la balle avant le texte */
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    color: #4CAF50;
    font-size: 0.8em;
}

.contre-espacement {
    margin-bottom: 1em;
}



/* POP-UP DE DEMARRAGE */

/* Overlay flouté sombre */
.gtw-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Pop-up principale */
.gtw-popup {
    background: linear-gradient(to bottom right, #ffffff, #f9f9f9);
    border: 3px solid gold;
    box-shadow: 0 0 25px rgba(255, 215, 0, 0.6), 0 0 10px rgba(0, 0, 0, 0.2);
    border-radius: 20px;
    padding: 2rem;
    max-width: 480px;
    width: 90%;
    opacity: 0;
    transform: translateY(-30px);
    transition: all 0.4s ease;
    font-family: 'Segoe UI', sans-serif;
    position: relative;
}

/* Apparition animée */
.gtw-popup.gtw-visible {
    opacity: 1;
    transform: translateY(0);
}

/* En-tête */
.gtw-header {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.gtw-header h2 {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    font-size: 2rem;
    font-weight: bold;
    color: #222;    /* #333 */
    text-shadow: 1px 1px 2px rgba(0,0,0,0.2);
    margin: 0;
    letter-spacing: 0.2px;
    pointer-events: none;
}

.gtw-header .gtw-close {
    font-size: 3rem;
    cursor: pointer;
    color: #888;
    transition: color 0.3s ease;
    margin-left: auto; /* ← force l'alignement à droite */
}

.gtw-header .gtw-close:hover {
    color: crimson;
}



/* Affichage de la difficulté */
.gtw-difficulty {
    background: linear-gradient(to right, #f5f5f5, #fafafa);
    padding: 0.6rem 1rem;
    border-left: 5px solid gold;
    border-radius: 8px;
    margin-bottom: 1rem;
    font-weight: bold;
    color: #444;
    box-shadow: inset 0 0 5px rgba(255, 215, 0, 0.5);
}

.gtw-difficulty.gtw-facile    { border-color: #4caf50; }
.gtw-difficulty.gtw-moyen     { border-color: #ffc107; }
.gtw-difficulty.gtw-difficile { border-color: #f44336; }
.gtw-difficulty.gtw-enfer     { border-color: #1e1a1a; }


/* Bloc de consignes */
.gtw-instructions {
    display: flex;
    align-items: center;
    background: #fefbea;
    border: 1px solid #ffe58f;
    border-radius: 10px;
    padding: 1rem;
    margin-bottom: 1rem;
    box-shadow: 0 0 8px rgba(255, 215, 0, 0.2);
}

.gtw-mascotte {
    width: 60px;
    height: 60px;
    margin-right: 1rem;
    border-radius: 50%;
    object-fit: cover;
    box-shadow: 0 0 8px gold;
}

.gtw-text {
    color: #555;
    font-size: 0.95rem;
    line-height: 1.4;
}

/* Exemple visuel */
.gtw-example {
    margin: 1.5rem 0;
    text-align: center;
}

.gtw-example-title {
    font-weight: bold;
    margin-bottom: 0.5rem;
    margin-left: -11rem;
    color: #666;
    font-size: 1.1rem;
}

/* Conteneur des deux images côte à côte */
.gtw-example-images {
    display: flex;
    justify-content: center;
    gap: 5rem; /* Espace entre les images */
    align-items: center;
    margin-top: 0.8rem;
}

/* Image floutée */
.gtw-example-image {
    max-width: 150px;
    width: 100%;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
    filter: blur(4px);
    transition: transform 0.3s ease, filter 0.3s ease;
    opacity: 0.9;
}

.gtw-example-image:hover {
    transform: scale(1.03);
    filter: blur(3px);
    opacity: 1;
}

/* Nouvelle image "READY" */
.gtw-ready-image {
    max-height: 150px; /* Aligne la hauteur avec l'autre image */
    width: auto;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
    object-fit: contain;
    cursor: default;
}



/* Bouton JOUER */
.gtw-start-button {
    display: block;
    width: 100%;
    padding: 0.9rem;
    font-size: 1.2rem;
    font-weight: bold;
    background: #27ae60;
    color: white;
    border: none;
    border-radius: 12px;
    box-shadow: 0 0 10px #27ae60, 0 0 30px #27ae60;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-top: 1rem;
}

.gtw-start-button:hover {
    background: #2ecc71;
    box-shadow: 0 0 12px #2ecc71, 0 0 40px #2ecc71;
    transform: scale(1.05);
}


/* SECONDE POP-UP */

/* 1) Overlay central */
.gtw-overlay-game {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 3;
}

/* 2) Container principal */
.gtw-popup-game {
    background: linear-gradient(to bottom right, #ffffff, #f9f9f9);
    border: 3px solid gold;
    border-radius: 20px;
    padding: 1.5rem;
    max-width: 480px;
    width: 80%;
    box-shadow: 0 0 25px rgba(255, 215, 0, 0.6),
                0 0 10px rgba(0, 0, 0, 0.2);
    opacity: 0;
    transform: translateY(-30px);
    transition: all 0.4s ease;
    font-family: 'Segoe UI', sans-serif;
    position: relative;
    overflow: visible;     /* IMPORTANT : permet au feedback d'apparaître au-dessus */
}

/* 3) Animation d’apparition */
.gtw-popup-game.gtw-visible {
    opacity: 1;
    transform: translateY(0);
}

/* 6) Scoreboard */
.gtw-scoreboard {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.gtw-progress {
    flex: 1;
    height: 8px;
    background: #ddd;
    border-radius: 4px;
    overflow: hidden;
    margin-right: 0.5rem;
}

.gtw-progress-bar {
    width: 0%;
    height: 100%;
    background: linear-gradient(to right, #f1c40f, #e67e22);
    transition: width 0.3s ease;
}

.gtw-info {
    font-size: 0.9rem;
}

.gtw-streak {
    display: flex;
    align-items: center;
    font-size: 0.9rem;
}

.gtw-streak span {
    margin-left: 0.3rem;
}


/* 7) Image mystère */
.gtw-question-image {
    width: 13rem;
    max-height: 21em;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    margin-bottom: 1rem;
    cursor: pointer;
    transition: transform 0.2s;
}

.gtw-question-image:hover {
    transform: scale(1.05);
}

/* Modal */
.gtw-image-modal {
    display: none;
    position: fixed;
    z-index: 4;
    left: 0;
    top: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.8);
}

/* Image agrandie : occupe toute la hauteur */
.gtw-modal-content {
    display: block;
    max-width: 100%;
    height: 100vh; /* occupe toute la hauteur de l'écran */
    object-fit: contain; /* conserve les proportions */
    margin: auto;
    border-radius: 8px;
}

.image-modal-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px; /* espace constant entre les éléments */
}

/* Bouton fermer */
.gtw-close-modal {
    position: absolute;
    top: 20px;
    right: 20px;
    color: #fff;
    font-size: 3.5rem;
    font-weight: bold;
    cursor: pointer;
}

/* Bouton upload icône */
.gtw-upload-btn {
    position: absolute;
    top: 2.15rem;
    right: 5rem; /* pour le mettre à gauche de la croix */
    cursor: pointer;
    color: white;   /* Pour le titre alternatif */
}

.gtw-upload-btn img {
    width: 2rem;
    height: auto;
    display: block;
}




/* 8) Choix QCM - base */
.gtw-choices {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.6rem;
    margin-bottom: 1rem;
}

.gtw-choice {
    padding: 0.8rem;
    background: #fff;
    border: 2px solid #ddd;
    border-radius: 8px;
    cursor: pointer;
    text-align: center;
    transition: background 220ms ease, border-color 220ms ease, box-shadow 180ms ease, transform 180ms ease, color 180ms ease;
    /* garde la cohérence visuelle */
}

/* hover uniquement pour les choix non marqués */
.gtw-choice:not(.correct):not(.incorrect):hover {
    background: var(--gtw-hover-bg);
    border-color: var(--gtw-hover-border);
}

/* état correct : fond vert clair, bordure verte douce */
.gtw-choice.correct {
    background: var(--gtw-correct-bg);
    border-color: var(--gtw-correct-border);
    color: var(--gtw-correct-color);
    box-shadow: 0 6px 14px rgba(46,204,113,0.14);
}

/* état incorrect : fond rouge clair, bordure rouge douce */
.gtw-choice.incorrect {
    background: var(--gtw-incorrect-bg);
    border-color: var(--gtw-incorrect-border);
    color: var(--gtw-incorrect-color);
    box-shadow: 0 6px 14px rgba(231,76,60,0.12);
    animation: gtw-pulse 420ms cubic-bezier(.2,.9,.2,1);
}

/* style quand tous les choix sont déjà répondus (optionnel mais propre) */
.gtw-choices.answered .gtw-choice:not(.correct):not(.incorrect) {
    opacity: 0.78;
    transform: scale(0.995);
}

/* disabled look */
.gtw-choice:disabled {
    cursor: default;
    filter: saturate(0.98);
}

@keyframes gtw-pulse {
    0% { transform: scale(0.985); box-shadow: 0 4px 10px rgba(46,204,113,0.06); }
    60% { transform: scale(1.02); }
    100% { transform: scale(1); }
}








/* FEEDBACK : message qui s'affiche au-dessus de la popup, centré */
.gtw-feedback {
    position: absolute;
    top: 12.5em;                    /* placement vertical du message */
    left: 50%;
    transform: translateX(-50%) translateY(-8px); /* légèrement décalé vers le haut */
    display: inline-block;
    white-space: nowrap;
    padding: 8px 14px;
    background: linear-gradient(180deg,#ffffff,#fbfbfb);
    border-radius: 12px;
    box-shadow: 0 8px 28px rgba(0,0,0,0.12);
    color: #122;
    font-weight: 700;
    font-size: 1rem;
    opacity: 0;
    pointer-events: none;          /* évite d'interférer avec les clics */
    transition: transform 320ms cubic-bezier(.2,.9,.2,1), opacity 220ms ease;
    z-index: 50;                    /* au-dessus du contenu du popup */
}

/* Etat visible : slide + fade in */
.gtw-feedback.show {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
}


/* Feedback success / error */
.gtw-feedback.success {
  background: linear-gradient(180deg, #e6ffef, #dff8ea); /* léger vert */
  color: #064b2a; /* texte sombre */
  border: 1px solid rgba(6,75,42,0.12);
  box-shadow: 0 8px 28px rgba(6,75,42,0.06);
}

.gtw-feedback.error {
  background: linear-gradient(180deg, #ffe6e6, #ffdede); /* léger rouge */
  color: #6b0b0b; /* texte sombre rouge foncé */
  border: 1px solid rgba(107,11,11,0.12);
  box-shadow: 0 8px 28px rgba(107,11,11,0.06);
}

/* Si tu veux du texte blanc plus contrasté */
.gtw-feedback.success.white,
.gtw-feedback.error.white {
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,0.12);
}






/* 10) Bouton Valider */
.gtw-validate {
    display: block;
    width: 100%;
    padding: 0.8rem;
    background: #27ae60;
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 1rem;
    cursor: pointer;
    transition: background 0.3s ease;
}

.gtw-validate:hover {
    background: #2ecc71;
}






/* ---------- End screen layout & style ---------- */
.gtw-endscreen {
    margin-top: 1rem;
    border-radius: 14px;
    padding: 0.8rem;
    background: linear-gradient(180deg, rgba(250,250,250,0.9), rgba(245,240,238,0.9));
    box-shadow: 0 8px 30px rgba(18, 18, 18, 0.08);
    transition: transform 0.35s ease, opacity 0.35s ease;
    overflow: hidden;
}

/* Grid: left character + right details */
.gtw-end-grid {
    display: grid;
    grid-template-columns: 120px 1fr;
    gap: 1rem;
    align-items: center;
}

/* character */
.gtw-character-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6px;
    border-radius: 12px;
    background: linear-gradient(180deg, #fff, #faf7f5);
    box-shadow: 0 6px 18px rgba(0,0,0,0.06);
    max-width: 120px;
    margin: 0 auto;
}

.gtw-character {
    width: 100%;
    height: auto;
    border-radius: 10px;
    display: block;
    transition: transform 0.45s cubic-bezier(.2,.9,.2,1), box-shadow 0.3s;
    transform-origin: center;
    will-change: transform;
}

/* subtle bounce when appear */
.gtw-character-wrap .gtw-character {
    animation: gtw-character-appear 480ms ease both;
}
@keyframes gtw-character-appear {
    from { transform: scale(0.85) translateY(6px); opacity: 0; }
    to   { transform: scale(1) translateY(0); opacity: 1; }
}

/* right column */
.gtw-end-right .gtw-end-title {
    margin: 0 0 6px 0;
    font-size: 1.05rem;
    color: #2b2b2b;
    font-weight: 700;
}

.gtw-end-details p {
    margin: 6px 0;
    color: #444;
    font-size: 0.95rem;
}

/* Buttons shared style */
.gtw-btn {
    display: inline-block;
    padding: 0.6rem 1rem;
    border-radius: 12px;
    border: none;
    font-weight: 700;
    cursor: pointer;
    margin-right: 0.6rem;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
    box-shadow: 0 6px 18px rgba(0,0,0,0.08);
    background: linear-gradient(180deg, #fff, #f7f2ea);
    border: 1px solid rgba(0,0,0,0.06);
}

/* primary look for replay */
.gtw-replay.gtw-btn, .gtw-btn.gtw-replay {
    background: linear-gradient(180deg,#fffbe6,#fff2d6);
    color: #5a3a00;
    border: 1px solid rgba(90,58,0,0.12);
}





/* Confettis full-page (global) */
.gtw-confetti-container.gtw-confetti-global {
    pointer-events: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh; /* prend toute la page */
    overflow: visible;
    z-index: 5; /* au-dessus de tout */
}

.gtw-confetti {
    position: fixed;
    top: -20px;
    width: 10px;
    height: 14px;
    border-radius: 2px;
    opacity: 0.95;
    transform-origin: center;
    animation-duration: 1600ms;
    animation: gtw-confetti-fall-full 1600ms cubic-bezier(.2,.8,.2,1) forwards;
}



/* Couleurs des confettis */
.gtw-confetti:nth-child(3n)   { background: linear-gradient(180deg,#06d6a0,#118ab2); } /* vert/bleu */
.gtw-confetti:nth-child(3n+1) { background: linear-gradient(180deg,#ffd166,#ef476f); }
.gtw-confetti:nth-child(3n+2) { background: linear-gradient(180deg,#8338ec,#3a86ff); }

/* Animation : chute complète sur la page */
@keyframes gtw-confetti-fall-full {
    0%   { transform: translateY(0) rotate(0deg) scale(1); opacity: 1; }
    70%  { opacity: 1; }
    100% { transform: translateY(110vh) rotate(540deg) scale(0.92); opacity: 0; }
}

/* Bouton "Partager" en vert (couleur de fabrique) */
.gtw-share.gtw-btn, .gtw-btn.gtw-share {
    background: linear-gradient(180deg,#e6fff0,#dff8ea); /* léger fond vert pâle */
    color: #0b6b3a; /* texte sombre vert */
    border: 1px solid rgba(11,107,58,0.12);
    box-shadow: 0 8px 20px rgba(11,107,58,0.06);
    transition: transform 0.18s ease, box-shadow 0.18s;
}

/* Hover du bouton vert */
.gtw-share.gtw-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 30px rgba(11,107,58,0.12);
}

/* Effet hover général pour autres boutons */
.gtw-btn:hover { 
    transform: translateY(-3px); 
    box-shadow: 0 10px 26px rgba(0,0,0,0.10); 
}












@media (max-width: 600px) {
    .gtw-question-image {
        margin-bottom: 20px; /* espace sous l'image pour éviter pb de responsive avec le navigateur */
    }
    .gtw-question-image {   /* Image question */
        width: 9rem;
    }
}

@media (max-width: 520px) {
    .gtw-end-grid { grid-template-columns: 96px 1fr; gap: 0.6rem; }
    .gtw-popup-game { padding: 1rem; max-width: 94%; }
    .gtw-character-wrap { max-width: 96px; }
    .gtw-choice { padding: 0.6rem; font-size: 0.95rem; }
}


/* réduire la taille sur petits écrans et autoriser retour à la ligne */
@media (max-width: 420px) {
  .gtw-feedback { font-size: 0.95rem; white-space: normal; padding: 8px 10px; max-width: 90vw; }
}









/*

CONSIGNE :

Cadre orné : Bordure dorée avec ornements décoratifs aux coins
Image centrale : Encadrée avec effet de brillance au survol
Matériaux nobles : Textures dégradées simulant du métal et du papier ancien

✨ Détails visuels élégants :

Arrière-plan mystique : Orbes dorées flottantes et texture papier
Typographie classic : look authentique
Animations subtiles : Rotation 3D, effets de brillance, pulsations dorées
Couleurs premium : Or, bronze, et dégradés métalliques
Feedback premium : Notifications avec bordures colorées


Je souhaite créer la seconde page d'un jeu en ligne appelé "Devine le Webtoon", qui s'affiche après que l'utilisateur ait cliqué sur le bouton "JOUER" dans une première pop-up d'introduction.

Cette nouvelle page (toujours en pop-up) est l'espace de jeu principal, et doit reprendre le même style premium que la première :

Design noble et raffiné (matériaux luxueux, touches dorées)

Arrière-plan mystique

Animations subtiles, ombrages doux

Feedback visuels et sonores "haut de gamme"

Responsive et moderne

Un texte dynamique de type : 



L’ensemble doit rester cohérent avec la pop-up initiale, mais s’adapter à ce nouveau contexte interactif de quiz. Les transitions doivent être douces, élégantes, premium. Le tout responsive

🎨 Tu peux te laisser une part de créativité pour améliorer l'interface ou l'expérience si certaines idées te viennent.

⚙️ Enfin, ce prompt concerne uniquement la partie design et affichage (HTML/CSS/JS côté front). La logique de gestion des données (comme le JSON des questions, le système de validation, ou le compteur de réponses) sera intégrée plus tard : tu peux donc utiliser des placeholders ({{question}}, {{choices}}, etc.) sans problème.
*/