/*
 * Composants communs, un bloc par composant de docs/04-ecrans-et-composants.md.
 * Classes BEM ; aucune valeur en dur (tokens.css).
 */

/* ---------- bouton ---------- */
.bouton {
    height: var(--hauteur-bouton);
    padding: 0 var(--espace-5);
    border: 0;
    border-radius: var(--rayon-bouton);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--espace-2);
    font-family: var(--police-titre);
    font-size: var(--taille-bouton);
    text-decoration: none;
    transition: transform var(--duree-rapide), box-shadow var(--duree-rapide);
}
.bouton:active {
    transform: translateY(3px);
}
.bouton--gauche {
    background: var(--couleur-gauche);
    color: var(--couleur-sur-accent);
    box-shadow: var(--relief-bouton) var(--couleur-gauche-relief);
}
.bouton--droite,
.bouton--principal {
    background: var(--couleur-droite);
    color: var(--couleur-sur-accent);
    box-shadow: var(--relief-bouton) var(--couleur-droite-relief);
}
.bouton--secondaire {
    background: var(--couleur-fond);
    color: var(--couleur-texte);
    border: var(--epaisseur-bordure) solid var(--couleur-bordure-forte);
    box-shadow: var(--relief-bouton) var(--couleur-surface-2);
}
.bouton--gauche:hover,
.bouton--droite:hover,
.bouton--principal:hover {
    color: var(--couleur-sur-accent);
}
.bouton--secondaire:hover {
    color: var(--couleur-texte-fort);
    border-color: var(--couleur-gauche);
}

/*
 * Brillance au survol de tout élément [data-brillance] : halo qui suit le pointeur (app.js) et reflet
 * qui balaie l'élément. Boutons pleins : reflet blanc sous le texte. Boutons secondaires et tuiles sur
 * fond sombre (carte-quiz, carte-theme, puce-tag) : halo coloré et reflet discret par-dessus le contenu,
 * réglés par leurs propres variables (--brillance-halo, --brillance-reflet, --brillance-plan-reflet),
 * avec un seul passage du reflet par survol (--brillance-repetitions), au lieu d'une boucle.
 */
[data-brillance] {
    --brillance-halo: var(--brillance-halo-clair);
    --brillance-reflet: var(--brillance-reflet-clair);
    --brillance-plan-reflet: -1;
    --brillance-repetitions: infinite;
    position: relative;
    isolation: isolate;
    overflow: hidden;
}
[data-brillance]::before,
[data-brillance]::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    opacity: 0;
    transition: opacity var(--duree-normale);
}
[data-brillance]::before {
    background: radial-gradient(circle at var(--brillance-x, 50%) var(--brillance-y, 50%), var(--brillance-halo) 0, transparent var(--brillance-rayon));
}
[data-brillance]::after {
    z-index: var(--brillance-plan-reflet);
    background: linear-gradient(105deg, transparent 35%, var(--brillance-reflet) 50%, transparent 65%);
    transform: translateX(-120%);
}
.bouton--secondaire,
.carte-quiz {
    --brillance-halo: var(--brillance-halo-gauche);
    --brillance-reflet: var(--brillance-reflet-sombre);
    --brillance-plan-reflet: 1;
    --brillance-repetitions: 1;
}
.carte-theme {
    --brillance-halo: var(--brillance-halo-droite);
    --brillance-reflet: var(--brillance-reflet-sombre);
    --brillance-plan-reflet: 1;
    --brillance-repetitions: 1;
}
@media (hover: hover) {
    [data-brillance]:hover::before,
    [data-brillance]:hover::after {
        opacity: 1;
    }
    [data-brillance]:hover::after {
        animation: bouton-reflet var(--duree-brillance) var(--courbe-sortie) var(--brillance-repetitions);
    }
}
@media (prefers-reduced-motion: reduce) {
    [data-brillance]::after {
        display: none;
    }
}
@keyframes bouton-reflet {
    0% { transform: translateX(-120%); }
    55%, 100% { transform: translateX(120%); }
}

.bouton:disabled {
    opacity: .35;
    cursor: not-allowed;
}

/* Bouton carré du bandeau (langue, « i », menu) */
.bouton-icone {
    height: var(--hauteur-bouton-icone);
    min-width: var(--hauteur-bouton-icone);
    padding: 0 var(--espace-3);
    border-radius: var(--rayon-bouton-icone);
    border: var(--epaisseur-bordure) solid var(--couleur-bordure-forte);
    background: var(--couleur-fond);
    color: var(--couleur-texte);
    font-weight: var(--graisse-forte);
    font-size: var(--taille-texte-petit);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    text-decoration: none;
}
.bouton-icone:hover {
    color: var(--couleur-texte-fort);
    border-color: var(--couleur-gauche);
}
.bouton-icone--accent {
    border-color: var(--couleur-gauche);
    color: var(--couleur-gauche);
}

/* ---------- entete ---------- */
.entete {
    position: relative;
    z-index: 10;
    border-bottom: var(--hauteur-entete-bordure) solid var(--couleur-surface-2);
}
.entete--reduit {
    border-bottom: 0;
}
.entete__interieur {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--espace-3) var(--espace-5);
    padding-block: var(--espace-3);
}
.entete__logo {
    font-family: var(--police-titre);
    font-size: var(--taille-logo);
    color: var(--couleur-texte-fort);
    text-decoration: none;
    text-shadow: var(--ombre-logo);
    white-space: nowrap;
}
.entete__logo:hover {
    color: var(--couleur-texte-fort);
}
.entete__logo-image {
    display: block;
    width: auto;
    height: var(--hauteur-logo);
}
.pied-de-page__logo .entete__logo-image {
    height: var(--hauteur-logo-pied);
}
.entete__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--espace-2);
}

/* ---------- selecteur-langue ---------- */
.selecteur-langue {
    position: relative;
}
.selecteur-langue__bouton {
    list-style: none;
}
.selecteur-langue__bouton::-webkit-details-marker {
    display: none;
}
.selecteur-langue__liste {
    position: absolute;
    right: 0;
    top: calc(100% + var(--espace-1));
    min-width: 160px;
    margin: 0;
    padding: var(--espace-1);
    list-style: none;
    border-radius: var(--rayon-bouton-icone);
    border: var(--epaisseur-bordure) solid var(--couleur-bordure-forte);
    background: var(--couleur-fond-profond);
}
.selecteur-langue__lien {
    display: block;
    padding: var(--espace-2) var(--espace-3);
    border-radius: var(--rayon-petit);
    color: var(--couleur-texte);
    font-weight: var(--graisse-forte);
    text-decoration: none;
}
.selecteur-langue__lien:hover,
.selecteur-langue__lien[aria-current] {
    background: var(--couleur-surface-2);
    color: var(--couleur-texte-fort);
}

/* ---------- bloc-texte ---------- */
.bloc-texte {
    position: relative;
    overflow: hidden;
}
.bloc-texte__interieur {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--espace-4);
    padding-block: var(--espace-6) var(--espace-7);
}
.bloc-texte__surtitre {
    color: var(--couleur-mise-en-avant);
}
.bloc-texte__titre {
    font-size: var(--taille-h1);
    text-wrap: balance;
}
.bloc-texte__gauche {
    color: var(--couleur-gauche);
    text-shadow: var(--halo-gauche);
}
.bloc-texte__droite {
    color: var(--couleur-droite);
    text-shadow: var(--halo-droite);
}
.bloc-texte__intro {
    max-width: 46ch;
    color: var(--couleur-texte-doux);
    font-size: var(--taille-intro);
}
@media (min-width: 900px) {
    .bloc-texte__interieur {
        padding-block: var(--espace-9) var(--espace-bloc-texte-bas);
    }
}
/* Pages thème et tag : descriptif 50 % plus large, espace avec les tags divisé par 3 */
.bloc-texte--liste .bloc-texte__intro {
    max-width: 69ch;
}
.bloc-texte--liste .bloc-texte__interieur {
    padding-bottom: 0;
}
.bloc-texte--liste .bloc-texte__intro p:last-child {
    margin-bottom: 0;
}

/* ---------- pied-de-page ---------- */
.pied-de-page {
    margin-top: auto;
    background: var(--couleur-fond-profond);
    border-top: var(--epaisseur-bordure) solid var(--couleur-bordure);
    font-size: var(--taille-texte-petit);
}
.pied-de-page a {
    color: var(--couleur-texte);
}
.pied-de-page a:hover {
    color: var(--couleur-gauche);
}
.pied-de-page__interieur {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
    gap: var(--espace-5) var(--espace-6);
    padding-block: var(--espace-6) 36px;
}
.pied-de-page__colonne {
    display: flex;
    flex-direction: column;
    gap: var(--espace-2);
}
.pied-de-page__liens {
    display: flex;
    flex-wrap: wrap;
    gap: 6px var(--espace-4);
    margin: 0;
    padding: 0;
    list-style: none;
}
.pied-de-page__bouton-lien {
    padding: 0;
    border: 0;
    background: none;
    color: var(--couleur-texte);
    font: inherit;
    text-decoration: underline;
    cursor: pointer;
}
.pied-de-page__bouton-lien:hover {
    color: var(--couleur-gauche);
}
.pied-de-page__logo {
    align-self: flex-start;
    font-size: var(--taille-logo);
}
.pied-de-page__langues {
    display: flex;
    gap: var(--espace-1);
    font-weight: var(--graisse-forte);
}
.pied-de-page__langue {
    padding: 6px 10px;
    border-radius: var(--rayon-petit);
    text-decoration: none;
}
.pied-de-page__langue[aria-current] {
    background: var(--couleur-surface-2);
}
.pied-de-page__signature {
    color: var(--couleur-texte-discret);
}
.pied-de-page__ocebo {
    text-decoration: none;
}
@media (min-width: 900px) {
    .pied-de-page {
        font-size: var(--taille-texte);
    }
    .pied-de-page__interieur {
        padding-block: 48px;
    }
    .pied-de-page__liens {
        flex-direction: column;
        gap: 10px;
    }
}

/* ---------- autre-jeu ---------- */
.autre-jeu {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--espace-3) var(--espace-6);
    padding: var(--espace-4);
    border: var(--epaisseur-bordure) solid var(--couleur-bordure);
    border-radius: var(--rayon-carte-jeu);
    background: var(--couleur-surface);
}
.autre-jeu__visuel {
    flex: 1 1 260px;
    height: var(--hauteur-visuel-autre-jeu);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--rayon-tuile);
    background: var(--couleur-fond);
}
.autre-jeu__logo {
    width: var(--largeur-logo-autre-jeu);
    height: auto;
}
.autre-jeu__contenu {
    flex: 2 1 380px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--espace-3);
}
.autre-jeu__etiquette {
    color: var(--couleur-mise-en-avant);
}
.autre-jeu__titre {
    margin: 0;
    font-size: var(--taille-titre-autre-jeu);
    color: var(--couleur-texte-fort);
}
.autre-jeu__texte {
    margin: 0;
    max-width: 56ch;
    font-size: var(--taille-texte-autre-jeu);
    color: var(--couleur-texte-doux);
}
.autre-jeu--compact {
    display: block;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    color: var(--couleur-texte-discret);
}
@media (max-width: 899px) {
    .autre-jeu__bouton {
        width: 100%;
    }
}
@media (min-width: 900px) {
    .autre-jeu:not(.autre-jeu--compact) {
        padding: var(--espace-5);
        border-radius: var(--rayon-grand);
    }
}

/* ---------- touches du clavier ---------- */
kbd {
    padding: 3px 7px;
    border: 1.5px solid var(--couleur-bordure-forte);
    border-bottom-width: 3px;
    border-radius: 6px;
    background: var(--couleur-surface);
    color: var(--couleur-texte);
    font: var(--graisse-forte) 12px/1 var(--police-texte);
}

/* ---------- bouton-info ---------- */
.bouton-info {
    font-family: var(--police-titre);
    font-size: 18px;
    box-shadow: 0 0 12px var(--fond-zone-gauche-active);
}

/* ---------- carte-quiz ---------- */
.carte-quiz {
    display: flex;
    flex-direction: column;
    gap: var(--espace-2);
    padding: 6px;
    border-radius: var(--rayon-bouton);
    background: var(--couleur-surface);
    border: var(--epaisseur-bordure) solid var(--couleur-bordure);
    color: var(--couleur-texte);
    text-decoration: none;
    transition: border-color var(--duree-rapide), box-shadow var(--duree-rapide);
}
.carte-quiz:hover,
.carte-quiz:focus-visible {
    color: var(--couleur-texte);
    border-color: var(--couleur-gauche);
    box-shadow: var(--halo-survol);
}
.carte-quiz__vignette {
    position: relative;
    aspect-ratio: 16 / 9;
    border-radius: 9px;
    background: repeating-linear-gradient(135deg, var(--couleur-hachure-1) 0 8px, var(--couleur-hachure-2) 8px 16px);
    overflow: hidden;
}
.carte-quiz__image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.carte-quiz__libelles {
    position: absolute;
    left: var(--espace-2);
    bottom: var(--espace-2);
    display: flex;
    border-radius: var(--rayon-petit);
    overflow: hidden;
    font: 400 11px/1 var(--police-titre);
}
.carte-quiz__libelles span {
    padding: 6px var(--espace-2);
    color: var(--couleur-sur-accent);
}
.carte-quiz__libelles span:first-child {
    background: var(--couleur-gauche);
}
.carte-quiz__libelles span:last-child {
    background: var(--couleur-droite);
}
.carte-quiz__corps {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 0 var(--espace-1) var(--espace-1);
}
.carte-quiz__titre {
    font-family: var(--police-titre);
    font-size: var(--taille-texte-petit);
    line-height: 1.2;
}
.carte-quiz__theme {
    font-size: 12px;
    font-weight: var(--graisse-moyenne);
    color: var(--couleur-texte-discret);
}

/* ---------- fil-ariane ---------- */
.fil-ariane__liste {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: var(--taille-texte-petit);
    font-weight: var(--graisse-moyenne);
    color: var(--couleur-texte-discret);
}
.fil-ariane__element + .fil-ariane__element::before {
    content: "\203A";
    margin-right: 6px;
}
.fil-ariane a {
    color: var(--couleur-texte-doux);
}
.fil-ariane [aria-current] {
    color: var(--couleur-texte);
}

/* ---------- faq ---------- */
.faq {
    display: flex;
    flex-direction: column;
    border-top: var(--epaisseur-bordure) solid var(--couleur-bordure);
}
.faq__question {
    padding: 14px 2px;
    border-bottom: 1.5px solid var(--couleur-separateur);
}
.faq__intitule {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--espace-3);
    min-height: 28px;
    font-weight: var(--graisse-forte);
    list-style: none;
    cursor: pointer;
}
.faq__intitule::-webkit-details-marker {
    display: none;
}
.faq__signe::before {
    content: "+";
    font-family: var(--police-titre);
    font-size: 18px;
    color: var(--couleur-gauche);
}
.faq__question[open] .faq__signe::before {
    content: "\2212";
}
.faq__reponse {
    position: relative;
}
.faq__reponse p {
    margin-top: var(--espace-2);
    color: var(--couleur-texte-doux);
}
/*
 * Ouverture animée (app.js) : pendant que la réponse se déplie, une lumière cyan parcourt le liseré
 * de la question de gauche à droite. États ouvert et fermé inchangés ([data-faq-ouverture] pendant l'ouverture).
 */
.faq__question {
    position: relative;
}
.faq__question::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1.5px;
    height: 1.5px;
    pointer-events: none;
    opacity: 0;
    background: linear-gradient(90deg, transparent, var(--faq-lumiere), transparent) no-repeat;
    background-size: var(--faq-lumiere-longueur) 100%;
    filter: drop-shadow(0 0 4px var(--faq-lumiere));
}
.faq__question[data-faq-ouverture]::after {
    animation: faq-lumiere var(--duree-faq-lumiere) linear forwards;
}
/* La lumière arrive en bout de liseré, s'y arrête et s'éteint en fondu */
@keyframes faq-lumiere {
    0% { opacity: 1; background-position: 0 0; animation-timing-function: cubic-bezier(.4, 0, .2, 1); }
    50% { opacity: 1; background-position: 100% 0; animation-timing-function: ease-out; }
    100% { opacity: 0; background-position: 100% 0; }
}



/* ---------- fenetre ---------- */
html.fenetre-ouverte {
    overflow: hidden;
}
.fenetre {
    width: 100%;
    max-width: none;
    max-height: calc(100dvh - 28px);
    margin: auto 0 0;
    padding: 0;
    border: var(--epaisseur-bordure) solid var(--couleur-bordure);
    border-bottom: 0;
    border-radius: var(--rayon-grand) var(--rayon-grand) 0 0;
    background: var(--couleur-fond);
    color: var(--couleur-texte);
    box-shadow: 0 -10px 40px var(--fond-zone-gauche-active);
    overflow: auto;
    overscroll-behavior: contain;
}
.fenetre::backdrop {
    background: var(--fond-fenetre-voile);
}
.fenetre[open] {
    animation: fenetre-monte var(--duree-normale) var(--courbe-sortie);
}
@keyframes fenetre-monte {
    from { transform: translateY(40px); opacity: 0; }
}
.fenetre__interieur {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 18px var(--espace-4) var(--espace-6);
}
.fenetre__entete {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--espace-3);
}
.fenetre__titres {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.fenetre__titre {
    font-size: 24px;
}
.fenetre__sous-titre {
    font-size: 14px;
    font-weight: var(--graisse-moyenne);
    color: var(--couleur-texte-discret);
}
.fenetre__fermer {
    flex: none;
    font-size: 15px;
}
.fenetre__fermer-texte {
    display: none;
}

/* ---------- bascule-reponses ---------- */
.bascule-reponses {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--espace-3);
    min-height: var(--hauteur-bouton);
    padding: 0 14px;
    border-radius: var(--rayon-bouton);
    border: var(--epaisseur-bordure) solid var(--couleur-bordure);
    background: var(--couleur-surface);
    color: var(--couleur-texte);
    font-weight: var(--graisse-forte);
    text-align: left;
}
.bascule-reponses__interrupteur {
    position: relative;
    flex: none;
    width: 46px;
    height: 26px;
    border-radius: 999px;
    border: var(--epaisseur-bordure) solid var(--couleur-bordure-forte);
}
.bascule-reponses__interrupteur::after {
    content: "";
    position: absolute;
    left: 3px;
    top: 3px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--couleur-texte-discret);
    transition: transform var(--duree-rapide);
}
.bascule-reponses[aria-checked="true"] {
    border-color: var(--couleur-gauche);
    background: var(--fond-zone-gauche);
}
.bascule-reponses[aria-checked="true"] .bascule-reponses__interrupteur {
    border-color: var(--couleur-gauche);
    background: var(--couleur-gauche);
}
.bascule-reponses[aria-checked="true"] .bascule-reponses__interrupteur::after {
    transform: translateX(20px);
    background: var(--couleur-fond);
}

/* ---------- liste-reponses et element-reponse ---------- */
.liste-reponses {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(360px, 100%), 1fr));
    gap: var(--espace-5) 28px;
}
/* Après une partie : seuls les éléments joués, sauf bascule activée */
.liste-reponses[data-partie-jouee="true"][data-tout="false"] .element-reponse:not([data-joue]) {
    display: none;
}
.liste-reponses__titre {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    border-bottom: 3px solid currentColor;
    font-size: 17px;
}
.liste-reponses__groupe--gauche .liste-reponses__titre {
    color: var(--couleur-gauche);
}
.liste-reponses__groupe--droite .liste-reponses__titre {
    color: var(--couleur-droite);
}
.liste-reponses__compte {
    font: var(--graisse-forte) var(--taille-texte-petit) var(--police-texte);
    color: var(--couleur-texte-discret);
}
.liste-reponses__elements {
    display: flex;
    flex-direction: column;
    gap: var(--espace-2);
    margin: var(--espace-2) 0 0;
    padding: 0;
    list-style: none;
}
.element-reponse {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr);
    gap: var(--espace-3);
    align-items: start;
    padding: 10px;
    border-radius: var(--rayon-bouton);
    border: 1.5px solid transparent;
}
.element-reponse[data-joue] {
    background: var(--couleur-surface);
    border-color: var(--couleur-bordure);
}
.element-reponse__image {
    width: 52px;
    height: 52px;
    border-radius: 10px;
    object-fit: cover;
    background: var(--couleur-surface-2);
}
.element-reponse__nom {
    font-family: var(--police-titre);
    font-size: 15px;
    color: var(--couleur-texte-fort);
}
.element-reponse__marque {
    display: none;
    margin-left: var(--espace-2);
    padding: 1px 7px;
    border-radius: 6px;
    color: var(--couleur-sur-accent);
    font-size: 10px;
    vertical-align: 2px;
}
.element-reponse[data-joue="juste"] .element-reponse__marque--juste {
    display: inline-flex;
    background: var(--couleur-juste);
}
.element-reponse[data-joue="faux"] .element-reponse__marque--faux {
    display: inline-flex;
    background: var(--couleur-faux);
}
.element-reponse__explication {
    margin-top: var(--espace-1);
    font-size: 14px;
    line-height: 1.4;
    color: var(--couleur-texte-doux);
}

/* ---------- info-quiz (contenu de la fenêtre « i ») ---------- */
.info-quiz__consigne {
    font-family: var(--police-titre);
    font-size: 28px;
    line-height: 1.1;
    color: var(--couleur-texte-fort);
}
.info-quiz__gauche {
    color: var(--couleur-gauche);
    text-shadow: var(--halo-texte-gauche);
}
.info-quiz__droite {
    color: var(--couleur-droite);
    text-shadow: var(--halo-texte-droite);
}
.info-quiz__intro {
    font-size: var(--taille-intro);
}
.info-quiz__intertitre {
    padding-top: var(--espace-4);
    border-top: var(--epaisseur-bordure) solid var(--couleur-surface-2);
    font-size: 15px;
    letter-spacing: .04em;
    color: var(--couleur-gauche);
}
.info-quiz__regles {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}
.info-quiz__regle {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: var(--espace-3);
    border-radius: var(--rayon-bouton);
    background: var(--couleur-surface);
    border: 1.5px solid var(--couleur-bordure);
    font-size: var(--taille-texte-petit);
    color: var(--couleur-texte-doux);
}
.info-quiz__regle-icone {
    font-family: var(--police-titre);
    font-size: 20px;
    color: var(--couleur-gauche);
}
.info-quiz__regle-icone--boutons {
    display: flex;
    gap: var(--espace-1);
}
.info-quiz__regle-icone--boutons span {
    width: 26px;
    height: 18px;
    border-radius: 5px;
    background: var(--couleur-gauche);
}
.info-quiz__regle-icone--boutons span + span {
    background: var(--couleur-droite);
}
.info-quiz__clavier {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    font-size: var(--taille-texte-petit);
    color: var(--couleur-texte-discret);
}
.info-quiz__note,
.info-quiz__credits {
    font-size: var(--taille-texte-petit);
    color: var(--couleur-texte-discret);
}
.info-quiz__reprendre {
    margin-top: 10px;
    height: 56px;
}

@media (min-width: 900px) {
    .fenetre {
        width: calc(100% - 80px);
        max-width: 900px;
        max-height: calc(100dvh - 128px);
        margin: auto;
        border-bottom: var(--epaisseur-bordure) solid var(--couleur-bordure);
        border-radius: var(--rayon-grand);
        box-shadow: var(--halo-fenetre);
    }
    .fenetre__interieur {
        gap: 18px;
        padding: 28px 32px 36px;
    }
    .fenetre__titre {
        font-size: 32px;
    }
    .fenetre__sous-titre {
        font-size: var(--taille-texte);
    }
    .fenetre__fermer-texte {
        display: inline;
    }
    .bascule-reponses {
        align-self: flex-start;
        min-height: 48px;
        padding: 0 var(--espace-4);
    }
    .liste-reponses__titre {
        font-size: 19px;
    }
    .element-reponse {
        grid-template-columns: 56px minmax(0, 1fr);
        gap: 14px;
    }
    .element-reponse__image {
        width: 56px;
        height: 56px;
    }
    .carte-quiz__titre {
        font-size: 16px;
    }
}

/* ---------- bandeau d'aperçu (BO) ---------- */
.bandeau-apercu {
    padding: var(--espace-2) var(--gouttiere);
    background: var(--couleur-mise-en-avant);
    color: var(--couleur-sur-accent);
    font-weight: var(--graisse-forte);
    text-align: center;
}

/* ---------- entete : thèmes et menu « Tous les thèmes » ---------- */
.entete__themes {
    display: none;
    align-items: center;
    gap: var(--espace-1);
}
.entete__theme {
    padding: 10px var(--espace-3);
    border-radius: var(--rayon-petit);
    color: var(--couleur-texte);
    font-weight: var(--graisse-moyenne);
    text-decoration: none;
}
.entete__theme:hover {
    color: var(--couleur-gauche);
    background: var(--couleur-surface);
}
.entete__retour {
    display: none;
    padding: 10px var(--espace-1);
    color: var(--couleur-texte-doux);
    font-weight: var(--graisse-moyenne);
    text-decoration: none;
}
.entete__retour:hover {
    color: var(--couleur-gauche);
}
.menu-themes {
    position: relative;
}
.menu-themes__bouton {
    list-style: none;
}
.menu-themes__bouton::-webkit-details-marker {
    display: none;
}
.menu-themes__long {
    display: none;
}
.menu-themes__liste {
    position: absolute;
    right: 0;
    top: calc(100% + var(--espace-1));
    z-index: 20;
    min-width: 220px;
    max-height: 70vh;
    overflow: auto;
    margin: 0;
    padding: var(--espace-1);
    list-style: none;
    border-radius: var(--rayon-bouton-icone);
    border: var(--epaisseur-bordure) solid var(--couleur-bordure-forte);
    background: var(--couleur-fond-profond);
}
.menu-themes__lien {
    display: block;
    padding: var(--espace-2) var(--espace-3);
    border-radius: var(--rayon-petit);
    color: var(--couleur-texte);
    font-weight: var(--graisse-forte);
    text-decoration: none;
}
.menu-themes__lien:hover {
    background: var(--couleur-surface-2);
    color: var(--couleur-texte-fort);
}

/* ---------- bloc-texte : variante accueil avec quiz à la une ---------- */
.bloc-texte__textes {
    display: flex;
    flex-direction: column;
    gap: var(--espace-4);
}
.bloc-texte__intro p {
    margin: 0 0 var(--espace-2);
}
.bloc-texte__une {
    display: flex;
    flex-direction: column;
    gap: var(--espace-3);
}
.bloc-texte__badge {
    align-self: flex-start;
    padding: var(--espace-1) 10px;
    border-radius: var(--rayon-petit);
    background: var(--couleur-mise-en-avant);
    color: var(--couleur-sur-accent);
    font-family: var(--police-titre);
    font-size: var(--taille-texte-petit);
}

/* ---------- sections des pages de liste ---------- */
.sections {
    display: flex;
    flex-direction: column;
    gap: 40px;
    padding-block: var(--espace-5) var(--espace-7);
}
/* Juste sous un bloc-texte--liste : un tiers de l'espace habituel (bas du bloc-texte + haut des sections) */
.sections--apres-intro {
    padding-top: calc((var(--espace-7) + var(--espace-5)) / 3);
}
.section {
    display: flex;
    flex-direction: column;
    gap: var(--espace-4);
}
.section--etroite {
    max-width: var(--largeur-texte);
}
.section__titre {
    font-size: var(--taille-h2);
}
.liste__vide {
    color: var(--couleur-texte-doux);
}

/* ---------- grille-quiz ---------- */
.grille-quiz {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(250px, 100%), 1fr));
    gap: var(--espace-4);
}
.grille-quiz__suite {
    align-self: center;
}
.carte-quiz--mise-en-avant {
    padding: var(--espace-3);
    border-color: var(--couleur-droite);
    box-shadow: var(--halo-mise-en-avant);
}
.carte-quiz--mise-en-avant .carte-quiz__titre {
    font-size: 22px;
}
.carte-quiz--mise-en-avant .carte-quiz__libelles {
    font-size: var(--taille-texte-petit);
}
.carte-quiz__jouer {
    margin: 0 var(--espace-1) var(--espace-1);
}
@media (min-width: 900px) {
    .carte-quiz--mise-en-avant {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
    }
    .carte-quiz--mise-en-avant .carte-quiz__vignette {
        grid-column: 1 / -1;
    }
    .carte-quiz--mise-en-avant .carte-quiz__titre {
        font-size: 28px;
    }
}

/* ---------- carte-theme ---------- */
.grille-themes {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(160px, 100%), 1fr));
    gap: 10px;
}
.carte-theme {
    min-height: 60px;
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);
    grid-template-rows: auto auto;
    align-items: center;
    column-gap: 10px;
    padding: var(--espace-2) 10px;
    border-radius: var(--rayon-bouton);
    background: var(--couleur-surface);
    border: var(--epaisseur-bordure) solid var(--couleur-bordure);
    color: var(--couleur-texte);
    font-weight: var(--graisse-forte);
    line-height: 1.15;
    text-decoration: none;
}
.carte-theme:hover {
    color: var(--couleur-texte-fort);
    border-color: var(--couleur-droite);
}
.carte-theme__icone {
    grid-row: 1 / span 2;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: repeating-linear-gradient(135deg, var(--couleur-hachure-1) 0 8px, var(--couleur-hachure-2) 8px 16px);
    box-shadow: inset 0 0 0 2px var(--couleur-gauche);
}
/* Thème avec icône : ni hachures ni contour, quelle que soit la couleur de la carte (spécificité au-dessus des modificateurs) */
.carte-theme .carte-theme__icone:has(img) {
    background: none;
    box-shadow: none;
}
.carte-theme__icone img {
    width: 100%;
    height: 100%;
    border-radius: inherit;
    object-fit: cover;
}
.carte-theme--droite .carte-theme__icone {
    box-shadow: inset 0 0 0 2px var(--couleur-droite);
}
.carte-theme--juste .carte-theme__icone {
    box-shadow: inset 0 0 0 2px var(--couleur-juste);
}
.carte-theme__nombre {
    font-size: 12px;
    font-weight: var(--graisse-moyenne);
    color: var(--couleur-texte-discret);
}

/* ---------- puce-tag ---------- */
.puces-tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--espace-2);
}
/* Puce pleine en couleur gauche (bleu), avec la brillance claire des boutons pleins au survol */
.puce-tag {
    padding: 6px var(--espace-3);
    border-radius: 999px;
    border: var(--epaisseur-bordure) solid var(--couleur-gauche);
    background: var(--couleur-gauche);
    color: var(--couleur-sur-accent);
    font-weight: var(--graisse-forte);
    font-size: var(--taille-texte-petit);
    text-decoration: none;
    --brillance-repetitions: 1;
}
.puce-tag:hover {
    color: var(--couleur-sur-accent);
}

/* ---------- page éditoriale ---------- */
.page-editoriale {
    max-width: calc(var(--largeur-texte) + 2 * var(--gouttiere));
    display: flex;
    flex-direction: column;
    gap: var(--espace-5);
    padding-block: var(--espace-6) var(--espace-7);
}
.page-editoriale__titre {
    font-size: var(--taille-h1);
}
.prose {
    color: var(--couleur-texte-doux);
}
.prose h2,
.prose h3 {
    margin: var(--espace-6) 0 var(--espace-2);
    font-size: var(--taille-h2);
}
.prose p,
.prose ul,
.prose ol {
    margin: 0 0 var(--espace-4);
}
/* Texte sous les quiz des pages thème et tag : premier intertitre collé au haut de la section */
.texte-apres-quiz {
    gap: 0;
}
.texte-apres-quiz > :first-child {
    margin-top: 0;
}

/* ---------- 404 ---------- */
.erreur-404 {
    position: relative;
    overflow: hidden;
}
.erreur-404__interieur {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--espace-5);
    padding-block: var(--espace-7) var(--espace-8);
    text-align: center;
}
.erreur-404__cartes {
    position: relative;
    width: 200px;
    height: 150px;
}
.erreur-404__carte {
    position: absolute;
    top: 0;
    width: 100px;
    height: 140px;
    border-radius: var(--rayon-bouton);
    border: var(--epaisseur-bordure) solid var(--couleur-gauche);
    background: var(--couleur-surface);
    box-shadow: var(--halo-gauche);
}
.erreur-404__carte--gauche {
    left: 10px;
    transform: rotate(-12deg);
}
.erreur-404__carte--droite {
    right: 10px;
    border-color: var(--couleur-droite);
    box-shadow: var(--halo-droite);
    transform: rotate(12deg);
}
.erreur-404__code {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--police-titre);
    font-size: 48px;
    color: var(--couleur-texte-fort);
    text-shadow: var(--ombre-logo);
}
p.erreur-404__code {
    position: static;
}
.erreur-404__titre {
    max-width: 22ch;
    font-size: 30px;
    text-wrap: balance;
}
.erreur-404__texte {
    color: var(--couleur-texte-doux);
}

@media (min-width: 900px) {
    .entete__themes {
        display: flex;
    }
    .entete__retour {
        display: inline-block;
    }
    .menu-themes__court {
        display: none;
    }
    .menu-themes__bouton svg {
        display: none;
    }
    .menu-themes__long {
        display: inline;
    }
    .bloc-texte--avec-une .bloc-texte__interieur {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        align-items: center;
        gap: var(--espace-8);
    }
    .bloc-texte__une .carte-quiz {
        transform: rotate(2deg);
    }
    .sections {
        gap: var(--espace-9);
        padding-block: var(--espace-8) 88px;
    }
    .sections--apres-intro {
        padding-top: calc((var(--espace-bloc-texte-bas) + var(--espace-8)) / 3);
    }
    .grille-quiz {
        gap: var(--espace-5);
    }
    .grille-themes {
        gap: 14px;
    }
    .carte-theme {
        min-height: 72px;
        grid-template-columns: 46px minmax(0, 1fr);
        padding: 10px var(--espace-3);
    }
    .carte-theme__icone {
        width: 46px;
        height: 46px;
    }
    .erreur-404__titre {
        font-size: 48px;
    }
}