/*
 * Interface visuelle de PJJoue V1.
 *
 * Cette feuille conserve strictement la cascade de la V1 de référence.
 * Les sélecteurs et variables propres au jeu sont nommés en français ; les
 * propriétés CSS restent celles du standard web. L'ordre des règles est
 * volontairement conservé, car il participe au rendu final.
 */
:root {
    color-scheme: dark;
    font-family: Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;

    /* Palette de référence. */
    --bleu-nuit-950: #0a2a52;
    --bleu-nuit-800: #1c5798;
    --bleu-700: #6fb7ff;
    --ciel-100: #174b83;
    --jaune-interface: #ffc83d;

    /* Surfaces et bordures. */
    --surface-carte: #10477f;
    --surface-carte-profonde: #0b3d70;
    --surface-secondaire: var(--ciel-100);
    --surface-survol: var(--bleu-nuit-800);
    --surface-active: #2568aa;
    --bordure-carte: rgba(145,198,245,.34);
    --bordure: #5c86b7;

    /* Texte et accents. */
    --texte: #f7f8ff;
    --texte-secondaire: #c6d8ef;
    --texte-sur-jaune: #083566;
    --accent: #ffc857;
    --accent-survol: #ffd978;
    --accent-doux: rgba(255,200,87,.16);
    --bouton-selection: #fec01d;

    /* États de réponse. */
    --reussite-douce: rgba(53,208,127,.16);
    --danger: #ff5f7a;
    --danger-doux: rgba(255,95,122,.16);

    /* Ombres et dimensions communes. */
    --ombre-douce: 0 6px 18px rgba(0,0,0,.14);
    --ombre-carte: 0 6px 18px rgba(0,19,52,.14);
    --rayon-tres-grand: 24px;
    --rayon-grand: 18px;
    --rayon-moyen: 14px;
    --taille-choix-question: .98rem;
    --taille-correction-question: .98rem;
    --taille-action-question: .96rem;
    --taille-action-question-mobile: .88rem;
    --taille-titre-1: clamp(1.65rem,2.75vw,2.55rem);
    --taille-titre-2: clamp(1.18rem,1.7vw,1.6rem);
    --taille-titre-3: 1rem;
    --taille-question: clamp(1.14rem,1.7vw,1.48rem);

    /* Repères colorés de l'interface. */
    --icone-bleu-vert: #39e0c5;
    --icone-jaune: var(--jaune-interface);
    --couleur-fil-association: #ffc94f;
    --couleur-etape-active: var(--jaune-interface);
    --icone-orange: #ff9e2f;
    --icone-verte: #43d6a3;
    --icone-violette: #9b7cff;
    --icone-ciel: #62c5ff;
}

* {
    box-sizing: border-box
}
html {
    max-width: 100%;
    overflow-x: hidden;
    scroll-behavior: smooth;
    font-size: calc(15px * var(--echelle-texte,1));
}
body {
    max-width: 100%;
    overflow-x: hidden;
    margin: 0;
    min-width: 320px;
    min-height: 100vh;
    color: var(--texte);
    background: #123f73;
}
body[data-ecran-actif="parcours"],body[data-ecran-actif="bilan"] {
    background-color: #123f73;
    background-image:
        radial-gradient(circle at 8% 28%,transparent 0 70px,rgba(126,181,226,.07) 71px 72px,transparent 73px 104px,rgba(126,181,226,.05) 105px 106px,transparent 107px),
        radial-gradient(circle at 92% 76%,transparent 0 95px,rgba(255,200,61,.05) 96px 97px,transparent 98px 135px,rgba(255,200,61,.04) 136px 137px,transparent 138px);
}
input,select {
    font: inherit
}
button {
    font: inherit;
    cursor: pointer
}
button:disabled {
    cursor: not-allowed;
    opacity: .48
}
a {
    color: inherit
}
.masque {
    display: none!important
}
.passer-lien {
    position: fixed;
    z-index: 1000;
    top: 10px;
    left: 12px;
    padding: 11px 16px;
    border-radius: 10px;
    color: #fff;
    background: var(--bleu-nuit-950);
    transform: translateY(-150%);
}
.passer-lien:focus {
    transform: none
}
.ecran>.page-entete h1[tabindex="-1"]:focus,.ecran>h1[tabindex="-1"]:focus {
    outline: 0;
}
header.entete {
    position: sticky;
    z-index: 100;
    top: 0;
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 66px;
    padding: 8px clamp(14px,3vw,38px);
    border-bottom: 1px solid #6d95c2;
    background: #0b315d;
    box-shadow: 0 2px 10px rgba(0,0,0,.16);
}
.marque {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: max-content;
    color: #fff;
    font-size: 1.08rem;
    font-weight: 850;
    letter-spacing: -.02em;
}
.marque b {
    color: var(--accent);
    font-size: 1.28rem;
    letter-spacing: -.045em;
}
.marque b span {
    color: #fff;
}
.actions button {
    min-height: 40px;
    border: 1px solid transparent;
    border-radius: 999px;
    padding: 8px 14px;
    color: var(--bleu-nuit-950);
    background: linear-gradient(135deg,#ffda72,#e9aa2f);
    border-color: #ffe095;
    font-weight: 800;
    transition: transform .18s ease,box-shadow .18s ease,background .18s ease,border-color .18s ease;
}
.discret {
    min-height: 40px;
    border: 1px solid var(--bordure);
    border-radius: 999px;
    padding: 8px 14px;
    color: var(--texte-secondaire);
    background: transparent;
    box-shadow: none;
    font-weight: 800;
    transition: transform .18s ease,box-shadow .18s ease,background .18s ease,border-color .18s ease;
}
.global-retour:active,.discret:active {
    color: #fff;
    background: #b67a00;
    border-color: var(--accent)
}
.navigation {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}
.navigation button {
    min-height: 40px;
    border: 1px solid #6f94c0;
    border-radius: 999px;
    padding: 8px 14px;
    color: #fff;
    background: var(--surface-secondaire);
    font-weight: 800;
    transition: transform .18s ease,box-shadow .18s ease,background .18s ease,border-color .18s ease;
}
.navigation button:hover {
    transform: none;
    color: var(--bleu-nuit-950);
    border-color: var(--bouton-selection);
    background: var(--bouton-selection);
    box-shadow: none;
}
.navigation button[aria-current="page"] {
    color: var(--bleu-nuit-950);
    border-color: var(--bouton-selection);
    background: var(--bouton-selection);
    box-shadow: none;
}
.conteneur {
    width: min(1180px,calc(100% - 28px));
    min-height: calc(100vh - 66px);
    margin: 0 auto;
    padding: 28px 0 26px;
}
.ecran {
    animation: arriveeEcran .18s ease both;
    display: none
}
.ecran.actif {
    display: block
}
@keyframes arriveeEcran {
    from {
        opacity: 0;
        transform: none
    }
    to {
        opacity: 1;
        transform: none
    }
}
#parcours .page-entete h1 {
    color: var(--accent)
}
p {
    overflow-wrap: anywhere;
    line-height: 1.58
}
.sous-titre,.page-entete>p {
    max-width: 820px;
    color: var(--texte-secondaire);
    font-size: .98rem
}
.page-entete {
    margin-bottom: 22px;
    padding-top: 24px;
}
.page-entete>.discret {
    margin-bottom: 15px;
    color: #fff;
    border-color: #6f94c0;
    background: linear-gradient(135deg,var(--surface-secondaire),#215f9e)
}
.page-entete>.discret:hover {
    color: #fff;
    border-color: var(--accent);
    background: linear-gradient(135deg,#184f88,#2568aa)
}
.page-entete>.discret:active {
    color: #fff;
    background: #b67a00;
    border-color: var(--accent)
}
.actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin: 18px 0
}
.mode-grille {
    display: grid;
    gap: 15px;
    grid-template-columns: repeat(2,minmax(0,1fr))
}
.mode-carte {
    border: 1px solid var(--bordure);
    border-radius: var(--rayon-grand);
    box-shadow: var(--ombre-douce);
    border-color: var(--bordure);
    background: rgba(17,60,113,.94);
    min-height: 100%;
    padding: 19px;
    text-align: left;
    color: var(--texte);
}
button.mode-carte {
    width: 100%;
    border-color: var(--bordure)
}
.carte:hover {
    border-color: var(--accent)
}
.mode-icone {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    flex: 0 0 52px;
    margin-bottom: 14px;
    border: 1px solid #6f94c0;
    border-radius: 18px;
    color: var(--accent);
    background: var(--surface-secondaire);
}
.theme-icone,.vide-icone {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    flex: 0 0 52px;
    margin-bottom: 14px;
    border: 0;
    border-radius: 18px;
    color: var(--icone-bleu-vert);
    background: transparent;
    box-shadow: none;
}
.mode-icone svg {
    width: 29px;
    height: 29px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.theme-icone svg,.vide-icone svg {
    width: 29px;
    height: 29px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
    filter: drop-shadow(0 3px 6px rgba(0,20,55,.12));
}
.mode-titre {
    display: block;
    color: #fff;
    font-size: 1.12rem;
    font-weight: 800
}
.mode-texte {
    display: block;
    min-height: 3.2em;
    margin-top: 8px;
    color: var(--texte-secondaire);
    line-height: 1.55
}
.lancer {
    display: block;
    margin-top: 13px;
    color: var(--accent);
    font-weight: 900
}
.repere {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 30px;
    padding: 5px 11px;
    border: 1px solid rgba(255,224,149,.86);
    border-radius: 999px;
    font-size: .78rem;
    font-weight: 900;
    color: #fff;
    background: var(--surface-secondaire);
    border-color: #6f94c0;
}
.theme .theme-icone {
    color: var(--accent)
}
.information,.retournee-note {
    margin: 14px 0 19px;
    padding: 13px 16px;
    border-left: 5px solid var(--accent);
    border-radius: 0 var(--rayon-moyen) var(--rayon-moyen) 0;
    color: #eef3ff;
    background: linear-gradient(90deg,rgba(255,200,87,.13),rgba(23,75,131,.96));
    line-height: 1.55;
}
.progression,.barre {
    overflow: hidden;
    width: 100%;
    height: 10px;
    border-radius: 999px;
    background: #16487e;
}
.barre i {
    display: block;
    width: 0;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg,var(--bleu-700),var(--accent));
    transition: width .3s ease
}
.question-conteneur {
    width: min(980px,100%);
    margin: 0 auto;
    padding: clamp(18px,2.7vw,30px);
    border: 1px solid #7199c7;
    border-radius: var(--rayon-tres-grand);
    background: rgba(18,63,120,.98);
    box-shadow: var(--ombre-douce);
}
.question-entete {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px
}
.question-entete .progression {
    flex: 1
}
.compteur,.chronometre {
    min-width: max-content;
    color: var(--texte-secondaire);
    font-weight: 750
}
#reperesQuestion {
    display: grid;
    grid-template-columns: minmax(220px,1fr) minmax(150px,.65fr) minmax(220px,1fr);
    gap: 10px;
    margin-bottom: 20px;
}
#reperesQuestion .repere {
    min-width: 0;
    min-height: 44px;
    border-color: #ffe095;
    border-radius: 14px;
    color: #fff;
    background: var(--ciel-100);
}
#reperesQuestion .repere-theme {
    display: flex;
    gap: 10px
}
#reperesQuestion .repere-position {
    display: grid;
    align-content: center
}
#reperesQuestion .repere-position {
    border-left: 4px solid var(--couleur-etape-active,var(--jaune-interface));
}
#reperesQuestion .repere-theme > span:last-child {
    min-width: 0;
    display: grid;
    align-content: center;
}
#reperesQuestion small {
    display: block;
    color: #fff;
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .05em
}
#reperesQuestion .theme-icone {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    margin: 0;
    border-color: var(--accent);
    border-radius: 10px
}
#reperesQuestion .theme-icone svg {
    width: 20px;
    height: 20px
}
#reperesQuestion .repere-locale {
    grid-column: 1/-1;
    justify-content: center;
    min-height: 34px
}
.question {
    letter-spacing: -.02em;
    font-size: var(--taille-question);
    line-height: 1.34;
    margin: 6px 0 16px
}
.activite-consigne {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin: -3px 0 14px;
    padding: 11px 13px;
    border-radius: var(--rayon-moyen);
    color: #eef3ff;
    background: rgba(23,75,131,.76);
}
.reponses.activite-reponses {
    display: block;
}
.activite-consigne span {
    padding: 5px 9px;
    border-radius: 999px;
    color: var(--bleu-nuit-950);
    background: var(--accent);
    font-size: .75rem;
    font-weight: 800
}
.reponses {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 10px
}
.reponse .lettre {
    display: grid;
    place-items: center;
    width: 31px;
    height: 31px;
    border-radius: 50%;
    font-weight: 950;
    color: var(--bleu-nuit-950);
    background: var(--accent);
}
.reponse.retire {
    visibility: hidden;
    pointer-events: none
}
.jokers {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin: 19px 0 14px;
    padding-top: 15px;
    border-top: 1px solid var(--bordure);
}
.joker {
    display: inline-flex;
    align-items: center;
    border: 1px solid #6f94c0;
    border-radius: 999px;
    font-weight: 750;
    min-height: 34px;
    padding: 5px 10px;
    gap: 6px;
    font-size: .82rem;
    color: #fff;
    background: var(--surface-secondaire);
    border-color: #6f94c0;
}
.joker:hover:not(:disabled) {
    box-shadow: none;
    color: #fff;
    background: var(--surface-active);
    border-color: var(--accent)
}
.joker:active:not(:disabled) {
    color: #fff;
    background: #b67a00;
    border-color: var(--accent)
}
.joker.rappel-jokers {
    animation: rappelJokers 1s ease
}
@keyframes rappelJokers {
    50% {
        box-shadow: 0 0 0 6px rgba(255,200,87,.17)
    }
}
.correction {
    margin: 20px 0;
    padding: 20px;
    border: 1px solid var(--bordure);
    border-radius: var(--rayon-grand);
    background: var(--bleu-nuit-800);
}
.correction.incorrecte,
.correction.correction-incorrecte {
    border-color: #ff5f7a;
    background: var(--danger-doux);
}
.correction.bon {
    border-color: #35d07f;
    background: var(--reussite-douce)
}
.correction.aidee {
    border-color: #ffc857;
    background: #214f82
}
.correction h3 {
    margin-bottom: 8px;
    font-size: 1.05rem;
    line-height: 1.35
}
.suivant-ligne {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: space-between;
    align-items: center;
    margin: 14px 0 4px
}
.suivant-ligne button:hover {
    color: #fff;
    border-color: var(--accent);
    background: linear-gradient(135deg,#184f88,#2568aa)
}
.suivant-ligne button:active {
    color: #fff;
    background: #b67a00;
    border-color: var(--accent)
}
.suivant-ligne .principal {
    color: #fff;
    border-color: #6f94c0;
    background: linear-gradient(135deg,var(--surface-secondaire),#215f9e);
    box-shadow: none
}
.suivant-ligne .principal:hover {
    border-color: var(--accent);
    background: linear-gradient(135deg,#184f88,#2568aa)
}
.suivant-ligne .principal:active {
    background: #b67a00
}
.navigation-question-groupe {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 7px
}
.multiple-grille {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 10px
}
.multiple-choix:hover,.ordre-liste li:hover,.association-colonne button:hover,.classement-element:hover {
    border-color: var(--accent)
}
.multiple-choix.retire {
    display: none
}
.multiple-coche {
    display: grid;
    place-items: center;
    flex: 0 0 25px;
    height: 25px;
    border: 1px solid #80a6d1;
    border-radius: 7px;
    color: transparent
}
.ordre-liste {
    display: grid;
    gap: 9px;
    margin: 0;
    padding: 0;
    list-style: none
}
.ordre-liste li {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 11px;
    padding: 12px;
    border: 1px solid #7199c7;
    border-radius: var(--rayon-moyen);
    color: var(--texte);
    background: var(--bleu-nuit-800);
}
.ordre-commandes {
    display: flex;
    gap: 5px
}
.ordre-commandes button {
    width: 36px;
    height: 36px;
    border: 1px solid #80a6d1;
    border-radius: 9px;
    color: #eef3ff;
    background: #215f9e;
}
.ordre-liste li.ordre-verrouille {
    border-color: var(--accent);
    background: rgba(255,200,87,.13)
}
.ordre-verrouille .ordre-texte {
    text-decoration: underline 2px var(--accent);
    text-underline-offset: 5px
}
.ordre-verrou {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    color: var(--bleu-nuit-950);
    background: var(--accent)
}
.ordre-texte small,.association-colonne button small,.classement-element small {
    display: block;
    margin-top: 5px;
    color: var(--accent);
    font-size: .74rem;
    font-weight: 850
}
.association-panneau {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    min-height: 180px
}
.association-colonne {
    display: grid;
    align-content: start;
    gap: 9px;
    z-index: 2
}
.association-colonne button {
    min-height: 58px;
    padding: 12px;
    border: 1px solid #7199c7;
    border-radius: var(--rayon-moyen);
    color: var(--texte);
    background: var(--bleu-nuit-800);
    text-align: left;
}
.association-colonne button.actif,.association-colonne button[aria-pressed="true"] {
    border-color: var(--violet,#7657ff);
    box-shadow: 0 0 0 3px rgba(118,87,255,.2)
}
.association-colonne button.associe {
    border-color: var(--accent);
    background: rgba(255,200,87,.13)
}
.association-aide,
.association-colonne-titre,
.association-colonne button .association-repere {
    display: none;
}
.association-lignes {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: visible
}
.association-lignes .fil-association {
    fill: none;
    stroke: var(--couleur-fil-association);
    stroke-width: 4px;
    stroke-linecap: round;
    stroke-linejoin: round
}
.classement-liste {
    display: grid;
    gap: 10px
}
.classement-element {
    padding: 14px;
    border: 1px solid #7199c7;
    border-radius: var(--rayon-moyen);
    color: var(--texte);
    background: var(--bleu-nuit-800);
}
.classement-element>b {
    display: block;
    margin-bottom: 10px
}
.classement-element>div {
    display: flex;
    flex-wrap: wrap;
    gap: 7px
}
.classement-element button {
    padding: 7px 11px;
    border: 1px solid #80a6d1;
    border-radius: 999px;
    color: #eef3ff;
    background: #215f9e;
}
.classement-element button.selectionne,
.classement-element button[aria-pressed="true"] {
    color: var(--bleu-nuit-950);
    border-color: var(--accent);
    background: var(--accent);
}
.classement-element.verrouille-joker {
    border-color: var(--accent);
    background: rgba(255,200,87,.13);
}
.activite-verrouille b {
    color: var(--accent)
}
@keyframes arriveeMentor {
    from {
        opacity: 0;
        transform: translateY(30px)
    }
    to {
        opacity: 1;
        transform: none
    }
}
.tableau-bord {
    display: grid;
    gap: 15px;
    grid-template-columns: repeat(4,minmax(0,1fr));
    margin: 24px 0
}
.statistique,.statistiques>div {
    padding: 20px;
    border: 1px solid var(--bordure);
    border-radius: var(--rayon-grand);
    text-align: center;
    background: var(--bleu-nuit-800);
    box-shadow: var(--ombre-douce);
}
.statistique b,.statistiques b {
    display: block;
    color: var(--accent);
    font-size: 1.85rem
}
.statistiques {
    display: grid;
    grid-template-columns: repeat(4,minmax(0,1fr));
    gap: 14px
}
.carte {
    border: 1px solid var(--bordure-carte);
    border-radius: 18px;
    box-shadow: var(--ombre-carte);
    background: var(--surface-carte);
    padding: 24px
}
.erreur-element {
    padding: 16px;
    border-left: 4px solid var(--accent);
    border-radius: 0 12px 12px 0;
    background: #214f82
}
.vide {
    text-align: center;
    padding: 45px 20px;
    color: var(--texte-secondaire)
}
.resultat-icone {
    position: relative;
    width: 76px;
    height: 76px;
    margin: 0 auto 18px;
    border: 12px solid var(--accent);
    border-radius: 50%;
    box-shadow: inset 0 0 0 7px var(--bleu-nuit-800),0 8px 22px rgba(255,200,87,.26);
}
.resultat-icone::before {
    position: absolute;
    content: "";
    top: 54px;
    width: 25px;
    height: 38px;
    background: var(--bleu-nuit-800);
    clip-path: polygon(0 0,100% 0,70% 100%,50% 78%,25% 100%);
    left: 2px;
    transform: rotate(12deg)
}
.resultat-icone::after {
    position: absolute;
    content: "";
    top: 54px;
    width: 25px;
    height: 38px;
    background: var(--bleu-nuit-800);
    clip-path: polygon(0 0,100% 0,70% 100%,50% 78%,25% 100%);
    right: 2px;
    transform: rotate(-12deg)
}
.formulaire-grille {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 18px
}
.parametre {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 18px;
    border: 1px solid var(--bordure-carte);
    border-radius: var(--rayon-moyen);
    background: var(--surface-carte);
}
.curseur {
    width: min(240px,50vw);
    accent-color: var(--bleu-700)
}
.choix-groupe {
    display: flex;
    flex-wrap: wrap;
    gap: 8px
}
.choix-bouton {
    padding: 9px 13px;
    border: 1px solid #6f94c0;
    border-radius: 11px;
    color: #fff;
    background: var(--surface-secondaire)
}
.choix-bouton:hover {
    border-color: var(--bouton-selection)
}
.choix-bouton.actif,.choix-bouton[aria-pressed="true"],.choix-bouton.selectionne {
    color: var(--bleu-nuit-950);
    border-color: var(--bouton-selection);
    background: var(--bouton-selection);
    box-shadow: none;
}
.natif-masque {
    display: none
}
.source {
    padding: 14px 0;
    border-bottom: 1px solid var(--bordure)
}
.source a {
    color: var(--accent);
    font-weight: 850
}
.notification {
    position: fixed;
    z-index: 200;
    left: 50%;
    bottom: 24px;
    max-width: min(600px,calc(100vw - 32px));
    padding: 13px 19px;
    border-radius: 999px;
    color: #fff;
    background: var(--bleu-nuit-950);
    box-shadow: var(--ombre-douce);
    transform: translate(-50%,140%);
    opacity: 0;
    transition: .22s;
}
.notification.visible {
    transform: translate(-50%,0);
    opacity: 1
}
@media (max-width:1040px) {
    header.entete {
        flex-wrap: wrap;
        gap: 8px
    }
    .marque {
        order: 1
    }
    .navigation {
        order: 4;
        width: 100%;
        margin: 0;
        padding: 3px 0 1px;
        overflow-x: auto;
        scrollbar-width: thin;
    }
    .rapide {
        order: 3;
        margin-left: 0
    }
    .navigation button {
        flex: 0 0 auto;
        min-height: 37px;
        padding: 7px 12px;
        font-size: .9rem
    }
    .conteneur {
        min-height: calc(100vh - 116px)
    }
}
@media (max-width:820px) {
    .conteneur {
        width: min(100% - 18px,1180px);
        padding-top: 20px
    }
    .mode-grille,.formulaire-grille {
        grid-template-columns: 1fr
    }
    .tableau-bord,.statistiques {
        grid-template-columns: repeat(2,minmax(0,1fr))
    }
    #reperesQuestion {
        grid-template-columns: 1fr 1fr
    }
    #reperesQuestion .repere-theme,#reperesQuestion .repere-locale {
        grid-column: 1/-1
    }
    .reponses,.multiple-grille {
        grid-template-columns: 1fr
    }
}
@media (max-width:580px) {
    html {
        font-size: calc(14px * var(--echelle-texte,1))
    }
    header.entete {
        padding: 7px 8px
    }
    .marque {
        font-size: .93rem
    }
    .marque > span {
        display: none;
    }
    .global-retour {
        min-height: 36px;
        padding: 6px 10px;
        font-size: .86rem
    }
    .rapide {
        width: 36px;
        height: 36px;
        min-height: 36px
    }
    .navigation {
        gap: 6px
    }
    .navigation button {
        min-height: 35px;
        padding: 6px 10px;
        font-size: .84rem
    }
    .conteneur {
        width: calc(100% - 14px);
        padding-top: 15px
    }
    h1 {
        font-size: clamp(1.65rem,8vw,2.15rem)
    }
    h2 {
        font-size: 1.4rem
    }
    .page-entete>.discret {
        margin-bottom: 11px
    }
    .tableau-bord,.statistiques {
        grid-template-columns: 1fr
    }
    .mode-carte,.carte {
        padding: 15px
    }
    .mode-icone,.theme-icone,.vide-icone {
        width: 47px;
        height: 47px;
        flex-basis: 47px;
        margin-bottom: 11px;
        border-radius: 14px
    }
    .mode-icone svg,.theme-icone svg,.vide-icone svg {
        width: 26px;
        height: 26px
    }
    .question-conteneur {
        padding: 13px 10px;
        border-radius: 17px
    }
    .question-entete {
        align-items: flex-start;
        flex-wrap: wrap
    }
    .question-entete .progression {
        order: 3;
        flex-basis: 100%
    }
    #reperesQuestion {
        grid-template-columns: 1fr
    }
    #reperesQuestion .repere-theme,#reperesQuestion .repere-locale {
        grid-column: auto
    }
    #reperesQuestion .repere {
        min-height: 40px;
        padding: 7px 10px
    }
    .question {
        margin-bottom: 14px;
        font-size: 1.22rem
    }
    .reponse {
        grid-template-columns: 31px 1fr;
        min-height: 60px;
        padding: 10px;
        font-size: .95rem
    }
    .reponse .lettre {
        width: 28px;
        height: 28px
    }
    .jokers {
        gap: 7px;
        margin: 15px 0 11px;
        padding-top: 12px
    }
    .joker {
        min-height: 36px;
        padding: 7px 10px;
        font-size: .88rem
    }
    .activite-consigne {
        align-items: flex-start
    }
    .association-panneau {
        grid-template-columns: 1fr;
        gap: 18px
    }
    .association-lignes {
        display: none
    }
    .association-aide {
        display: block;
        margin: 0 0 12px;
        padding: 10px 12px;
        border-left: 3px solid var(--accent);
        border-radius: 0 10px 10px 0;
        color: #eaf4ff;
        background: rgba(8,56,108,.42);
        font-size: .82rem;
        line-height: 1.4;
    }
    .association-colonne {
        padding: 11px;
        border: 1px solid rgba(145,198,245,.25);
        border-radius: 14px;
        background: rgba(8,56,108,.24);
    }
    .association-colonne-titre {
        display: block;
        margin: 0 0 2px;
        color: var(--accent);
        font-size: .78rem;
        font-weight: 850;
        letter-spacing: .01em;
    }
    .association-colonne button .association-repere {
        display: block;
        margin-top: 5px;
        color: var(--accent);
        font-size: .72rem;
        font-weight: 850;
    }
    .suivant-ligne {
        flex-direction: row;
        align-items: stretch;
        gap: 7px
    }
    .suivant-ligne>button,.suivant-ligne .navigation-question-groupe {
        flex: 1;
        min-width: 0
    }
    .suivant-ligne .navigation-question-groupe button {
        width: 100%
    }
}
@media (prefers-reduced-motion:reduce) {
    html {
        scroll-behavior: auto
    }
    *,*::before,*::after {
        animation-duration: .001ms;
        animation-iteration-count: 1;
        transition-duration: .001ms
    }
}
.barre-actions-page {
    display: contents;
}
.son-mobile {
    display: none;
}
.discret.global-retour,
.discret.son-mobile {
    width: max-content;
    margin: 0 0 4px;
    color: #fff;
    border-color: #6f94c0;
    background: var(--surface-carte-profonde);
    box-shadow: none
}
.discret.global-retour:hover,
.discret.son-mobile:hover {
    color: #fff;
    border-color: var(--accent);
    background: #17558f;
    box-shadow: none
}
.discret.global-retour:active,
.discret.son-mobile:active {
    color: #fff;
    background: #b67a00;
    border-color: var(--accent)
}
.son-commande.rapide {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    min-width: 112px;
    min-height: 38px;
    padding: 0 12px;
    gap: 7px;
    color: #fff;
    border: 1px solid #6f94c0;
    border-radius: 999px;
    background: linear-gradient(135deg,var(--surface-secondaire),#215f9e);
    font-weight: 800;
    transition: transform .18s ease,box-shadow .18s ease,background .18s ease,border-color .18s ease
}
.son-commande.rapide:hover {
    border-color: var(--bouton-selection);
    background: linear-gradient(135deg,#184f88,#2568aa)
}
.son-icone {
    width: 20px;
    height: 20px;
    overflow: visible;
    fill: currentColor;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round
}
.son-icone .son-onde {
    fill: none;
    transition: opacity .16s ease
}
.son-texte {
    display: inline;
    position: static;
    width: auto;
    height: auto;
    border: 0;
    border-radius: 0;
    font-size: .78rem;
    font-weight: 900;
    white-space: nowrap
}
.son-texte::before,.son-texte::after {
    display: none!important;
    content: none
}
.son-commande[aria-pressed="false"] {
    border-color: #6f94c0;
    background: linear-gradient(135deg,var(--surface-secondaire),#215f9e);
    color: #fff
}
.son-commande[aria-pressed="false"] .son-onde {
    opacity: 0
}
.son-commande.rapide[aria-pressed="true"] {
    color: #fff;
    border-color: var(--bouton-selection);
    background: var(--bouton-selection)
}
.joker-icone svg {
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    width: 19px;
    height: 19px
}
@media (max-width:620px) {
    .son-commande.rapide {
        width: auto;
        min-width: 96px;
        min-height: 34px;
        height: 34px;
        padding: 0 8px
    }
    .son-texte {
        font-size: .73rem
    }
    .joker {
        min-height: 32px;
        padding: 5px 8px;
        font-size: .79rem
    }
    .joker-icone,.joker-icone svg {
        width: 18px;
        height: 18px
    }
}
.precedent-bouton,.passer-bouton {
    color: var(--texte);
    background: var(--surface-carte-profonde);
    border-color: #6f94c0;
    box-shadow: none;
}
.rapide:hover,.precedent-bouton:hover,.passer-bouton:hover {
    color: #fff;
    background: #17558f;
    border-color: var(--accent);
    box-shadow: none;
    transform: none;
}
.discret:hover {
    transform: none;
    box-shadow: none;
    color: #fff;
    background: rgba(28,87,152,.55);
    border-color: var(--accent);
}
.principal {
    min-height: 40px;
    border: 1px solid transparent;
    border-radius: 12px;
    padding: 9px 16px;
    font-weight: 800;
    transition: transform .18s ease,box-shadow .18s ease,background .18s ease,border-color .18s ease;
    color: var(--bleu-nuit-950);
    background: var(--accent);
    border-color: #ffe7a7;
    box-shadow: none;
}
.activite-valider:hover {
    color: var(--bleu-nuit-950);
    background: var(--accent-survol);
    border-color: #fff1c7;
    box-shadow: 0 6px 16px rgba(255,200,87,.16);
    transform: none;
}
.principal:active,.activite-valider:active {
    transform: translateY(0);
    background: #e3a82f;
}
.mode-carte:hover {
    border-color: var(--accent);
    box-shadow: var(--ombre-douce);
}
.reponse:hover {
    background: var(--surface-active);
    border-color: var(--accent);
}
.reponse.selectionne,.reponse[aria-checked="true"] {
    background: #174f88;
    border-color: var(--couleur-etape-active);
    box-shadow: inset 4px 0 0 var(--couleur-etape-active);
}
.joker:disabled {
    opacity: .48;
    filter: saturate(.55);
}
.multiple-choix[aria-pressed="true"] {
    border-color: var(--accent);
    background: var(--accent-doux);
}
.multiple-choix.selectionne .multiple-coche {
    color: var(--bleu-nuit-950);
    background: var(--accent);
    border-color: var(--accent);
}
.progression i {
    display: block;
    width: 0;
    height: 100%;
    border-radius: inherit;
    transition: width .3s ease;
    background: linear-gradient(90deg,#e9aa2f,var(--accent));
}
.danger {
    color: #fff;
    background: var(--danger);
    border-color: #ff91a4;
}
.danger:hover {
    background: #e94d68;
    border-color: #ffc0cb;
}
[aria-disabled="true"] {
    cursor: not-allowed;
}
#zoneIndice,#zoneCorrection {
    font-size: var(--taille-correction-question);
    line-height: 1.6;
}
.correction p, .correction li, .correction small {
    font-size: inherit;
    line-height: inherit;
}
.reponse {
    display: grid;
    grid-template-columns: 36px 1fr;
    align-items: center;
    gap: 12px;
    min-height: 72px;
    padding: 13px;
    text-align: left;
    border: 1px solid #7199c7;
    border-radius: var(--rayon-moyen);
    box-shadow: none;
    color: var(--texte);
    background: var(--surface-survol);
    border-color: #7199c7;
    font-size: var(--taille-choix-question);
    line-height: 1.5;
}
.multiple-choix {
    border: 1px solid #7199c7;
    border-radius: var(--rayon-moyen);
    color: var(--texte);
    background: var(--bleu-nuit-800);
    display: flex;
    width: 100%;
    align-items: center;
    gap: 12px;
    padding: 15px;
    text-align: left;
    font-size: var(--taille-choix-question);
    line-height: 1.5;
    font-weight: 650;
}
.suivant-ligne button {
    border: 1px solid transparent;
    transition: transform .18s ease,box-shadow .18s ease,background .18s ease,border-color .18s ease;
    border-radius: 11px;
    color: #fff;
    border-color: #6f94c0;
    background: linear-gradient(135deg,var(--surface-secondaire),#215f9e);
    font-size: var(--taille-action-question);
    font-weight: 800;
    letter-spacing: .01em;
    min-height: 38px;
    padding: 7px 12px;
}
@media (max-width:580px) {
    .activite-valider {
        width: 100%;
        min-width: 0;
        min-height: 40px;
        padding: 8px 12px;
    }
    .suivant-ligne button {
        width: 100%;
        min-height: 36px;
        padding: 7px 8px;
        font-size: var(--taille-action-question-mobile);
    }
    .ordre-commandes button {
        min-height: 36px;
        padding: 7px 8px;
        font-size: var(--taille-action-question-mobile);
    }
}
h1 {
    overflow-wrap: anywhere;
    margin-top: 0;
    letter-spacing: -.025em;
    color: #fff;
    font-size: var(--taille-titre-1);
    line-height: 1.12;
}
h2 {
    overflow-wrap: anywhere;
    margin-top: 0;
    letter-spacing: -.025em;
    color: #fff;
    font-size: var(--taille-titre-2);
    line-height: 1.22;
}
h3 {
    overflow-wrap: anywhere;
    margin-top: 0;
    letter-spacing: -.025em;
    color: #fff;
    font-size: var(--taille-titre-3);
    line-height: 1.28;
}
.section-titre {
    color: var(--accent);
    margin: 30px 0 14px;
}
#enonceQuestion {
    color: #fff;
    font-size: inherit;
    line-height: inherit;
}
@media (max-width:580px) {
    :root {
        --taille-choix-question: .95rem;
        --taille-correction-question: .94rem;
        --taille-action-question: var(--taille-action-question-mobile);
        --taille-titre-1: clamp(1.5rem,7vw,1.95rem);
        --taille-titre-2: 1.24rem;
        --taille-question: 1.06rem;
    }
    .sous-titre, .page-entete>p {
        font-size: .94rem;
    }
}
.mode-repere {
    border-color: var(--accent);
    color: var(--bleu-nuit-950);
    background: var(--accent)
}
.ecrite-activite, .elimination-activite {
    display: grid;
    gap: 14px
}
.ecrite-zone {
    display: flex;
    gap: 10px;
    align-items: stretch
}
.ecrite-zone input {
    flex: 1;
    min-width: 0;
    padding: 12px 14px;
    border: 1px solid #7199c7;
    border-radius: 12px;
    color: var(--texte);
    background: #123f78;
    font: inherit
}
.ecrite-zone input:focus {
    border-color: var(--accent);
    outline: 3px solid var(--accent-doux)
}
.elimination-grille {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 10px
}
.elimination-choix {
    position: relative;
    min-height: 68px;
    padding: 13px 42px 13px 14px;
    text-align: left;
    border: 1px solid #7199c7;
    border-radius: 14px;
    color: var(--texte);
    background: var(--surface-survol);
    font: inherit
}
.elimination-choix::after {
    position: absolute;
    right: 13px;
    top: 50%;
    content: "×";
    transform: translateY(-50%);
    font-size: 1.35rem;
    font-weight: 950;
    color: var(--accent)
}
.elimination-choix.elimine {
    opacity: .58;
    text-decoration: line-through;
    border-color: var(--danger);
    background: var(--danger-doux)
}
.elimination-choix.elimine::after {
    content: "↶"
}
.elimination-compteur {
    color: var(--texte-secondaire);
    font-size: .9rem
}
@media (max-width:580px) {
    .elimination-grille {
        grid-template-columns: 1fr
    }
    .ecrite-zone {
        flex-direction: column
    }
}
.revelation-cinquante-cinquante {
    padding: 11px 13px;
    border: 1px solid var(--accent);
    border-radius: 12px;
    color: var(--texte);
    background: var(--accent-doux);
    line-height: 1.5;
}
.revelation-cinquante-cinquante b {
    color: var(--accent)
}
.elimination-choix.verrouille-joker {
    border-color: var(--accent);
    background: var(--accent-doux);
    box-shadow: 0 0 0 2px rgba(255,200,87,.10);
}
:focus-visible {
    outline: 3px solid #ffd166;
    outline-offset: 3px;
}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible {
    box-shadow: 0 0 0 3px rgba(255,209,102,.28);
}
.lecteur-ecran-seulement {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
}
.produit-pied-page nav {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 10px
}
.produit-pied-page a {
    color: var(--texte);
    text-decoration: underline;
    text-underline-offset: 3px
}
.produit-repere {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 10px;
    border: 1px solid var(--bordure);
    border-radius: 999px;
    background: rgba(255,255,255,.05);
    font-size: .82rem
}
@media (prefers-reduced-motion: reduce) {
    *,*::before,*::after {
        animation-duration: .01ms;
        animation-iteration-count: 1;
        scroll-behavior: auto;
        transition-duration: .01ms
    }
}
@media (max-width:720px) {
    .entete {
        gap: 8px;
        padding: 10px 12px
    }
    .navigation {
        overflow-x: auto;
        max-width: 100%;
        padding-bottom: 2px
    }
    .navigation button {
        white-space: nowrap
    }
    .question {
        padding: 18px 14px
    }
    .jokers {
        grid-template-columns: repeat(2,minmax(0,1fr))
    }
    .suivant-ligne {
        align-items: stretch;
        flex-direction: column
    }
    .navigation-question-groupe {
        flex-direction: column
    }
    .suivant-ligne button,.navigation-question-groupe button {
        width: 100%
    }
}