/* ==========================================================
   PJJoue V1 — jokers latéraux et validation centrale
   ========================================================== */
#question .question-etape {
    position: relative;
    width: 100%;
}
#question .joker-menu-bouton {
    position: absolute;
    top: 50%;
    right: -62px;
    z-index: 12;
    width: 58px;
    min-height: 132px;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 13px 8px;
    border: 2px solid var(--accent);
    border-left-width: 1px;
    border-radius: 0 18px 18px 0;
    color: #fff3bd;
    background: linear-gradient(180deg,#1b69ad,#0b3d75);
    box-shadow: 10px 10px 24px rgba(0,20,55,.26);
    transform: translateY(-50%);
    cursor: pointer;
}
#question .joker-menu-bouton > span:last-child {
    writing-mode: vertical-rl;
    text-orientation: mixed;
    letter-spacing: .08em;
    text-transform: uppercase;
    font-size: .78rem;
    font-weight: 950;
}
#question .joker-onglet-icone {
    color: var(--accent);
    font-size: 1.2rem;
    line-height: 1;
}
#question .joker-onglet-icone svg {
    width: 24px;
    height: 24px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
#question .joker-menu-bouton:hover,
#question .joker-menu-bouton:focus-visible,
#question .joker-menu-bouton.rappel-jokers {
    color: var(--texte-sur-jaune);
    background: linear-gradient(180deg,#ffe58e,var(--jaune-interface));
    box-shadow: 0 0 0 4px rgba(255,200,61,.16),10px 12px 28px rgba(0,20,55,.30);
}
#question .joker-menu-bouton:hover .joker-onglet-icone,
#question .joker-menu-bouton:focus-visible .joker-onglet-icone,
#question .joker-menu-bouton.rappel-jokers .joker-onglet-icone {
    color: var(--texte-sur-jaune);
}
#question .joker-menu-bouton:disabled {
    opacity: .46;
    cursor: not-allowed;
    filter: saturate(.55);
}

/* ==========================================================
   Fond narratif et système unifié des cartes de question
   ========================================================== */
body:not([data-ecran-actif="accueil"])::before {
    content: "";
    position: fixed;
    inset: var(--hauteur-entete,66px) 0 0;
    z-index: 0;
    pointer-events: none;
    background: url("../filigrane-parcours.svg") center / cover no-repeat;
    opacity: .17;
}
.conteneur {
    position: relative;
    z-index: 1;
}

#question {
    --taille-texte-reponse: 1rem;
}
#question .question-carte {
    border-color: rgba(145,198,245,.34);
    background:
        linear-gradient(145deg,rgba(17,78,137,.34),transparent 46%),
        linear-gradient(180deg,#0a3e76 0%,#082f5f 100%);
    box-shadow: 0 18px 42px rgba(0,22,54,.25),inset 0 1px rgba(255,255,255,.035);
}
#question .question-carte::before {
    height: 3px;
}
#question #zoneReponses .reponse,
#question .multiple-choix,
#question .elimination-choix,
#question .association-colonne button,
#question .classement-element,
#question .ordre-liste li,
#question .ordre-texte,
#question .choisir-ordre-proposition,
#question .ecrite-zone input,
#question .ecrite-zone textarea,
#question .ecrite-zone select {
    font-size: var(--taille-texte-reponse);
    font-family: inherit;
    font-weight: 700;
    line-height: 1.45;
    letter-spacing: 0;
}
#question #zoneReponses .reponse,
#question .multiple-choix,
#question .elimination-choix,
#question .association-colonne button,
#question .classement-element,
#question .ordre-liste li,
#question .choisir-ordre-proposition {
    border: 1px solid rgba(145,198,245,.34);
    border-radius: 14px;
    color: #f5f9ff;
    background: rgba(20,79,137,.72);
    box-shadow: inset 0 1px rgba(255,255,255,.025);
    transition: border-color .16s ease,background .16s ease,box-shadow .16s ease;
}
#question #zoneReponses .reponse:hover,
#question #zoneReponses .reponse:focus-visible,
#question .multiple-choix:hover,
#question .elimination-choix:hover,
#question .association-colonne button:hover,
#question .classement-element:hover,
#question .ordre-liste li:hover,
#question .choisir-ordre-proposition:hover {
    border-color: var(--couleur-etape-active,var(--accent));
    background: #1d609f;
    box-shadow: inset 0 0 0 1px rgba(255,200,61,.1);
}
#question #zoneReponses .reponse.selectionne,
#question #zoneReponses .reponse[aria-checked="true"],
#question .multiple-choix.selectionne,
#question .elimination-choix.selectionne,
#question .ordre-choix-selectionne {
    border-color: var(--couleur-etape-active,var(--accent));
    background: #174f88;
    box-shadow: inset 4px 0 0 var(--couleur-etape-active,var(--accent));
}

#question .question-commande-ligne {
    grid-template-columns: minmax(170px,1fr) minmax(170px,auto) minmax(360px,1fr);
    margin-top: 16px;
}
#question .question-commande-ligne #boutonQuestionPrecedente,
#question .question-commande-ligne #boutonPasserQuestion,
#question .question-commande-ligne #boutonQuestionSuivante,
#question .question-commande-ligne #boutonValider,
#question .question-commande-ligne #boutonMenuJokers {
    min-height: 44px;
    height: 44px;
    padding: 0 17px;
    border-radius: 12px;
    font-size: .95rem;
    font-weight: 850;
    letter-spacing: 0;
    text-transform: none;
    white-space: nowrap;
    box-shadow: none;
}
#question .question-commande-ligne #boutonQuestionPrecedente,
#question .question-commande-ligne #boutonPasserQuestion,
#question .question-commande-ligne #boutonMenuJokers {
    color: #edf6ff;
    border: 1px solid rgba(145,198,245,.48);
    background: rgba(10,61,116,.78);
}
#question .question-commande-ligne #boutonQuestionPrecedente:hover,
#question .question-commande-ligne #boutonPasserQuestion:hover,
#question .question-commande-ligne #boutonMenuJokers:hover,
#question .question-commande-ligne #boutonQuestionPrecedente:focus-visible,
#question .question-commande-ligne #boutonPasserQuestion:focus-visible,
#question .question-commande-ligne #boutonMenuJokers:focus-visible {
    color: #fff;
    border-color: var(--accent);
    background: #17558f;
}
#question .question-commande-ligne #boutonMenuJokers {
    position: static;
    width: auto;
    display: inline-flex;
    flex-direction: row;
    gap: 8px;
    transform: none;
}
#question .question-commande-ligne #boutonMenuJokers > span:last-child {
    writing-mode: horizontal-tb;
    text-orientation: mixed;
    letter-spacing: 0;
}
#question .question-commande-ligne .joker-onglet-icone,
#question .question-commande-ligne #boutonMenuJokers:hover .joker-onglet-icone,
#question .question-commande-ligne #boutonMenuJokers:focus-visible .joker-onglet-icone {
    color: var(--accent);
}
#question .question-commande-ligne .joker-onglet-icone svg {
    width: 20px;
    height: 20px;
}

/* Pictogrammes narratifs : même finesse, couleurs historiques conservées. */
#choixMode .mode-icone svg,
#erreurs .revision-mode-icone svg,
#progression .progression-icone svg {
    fill: none;
    stroke: currentColor;
    stroke-width: 2.6;
    stroke-linecap: round;
    stroke-linejoin: round;
    filter: drop-shadow(0 2px 3px rgba(0,20,55,.1));
}

/* Dans le menu replié, la navigation se lit comme une liste de titres. */

/* Commandes mobiles compactes ; les deux actions de l'accueil restent inchangées. */
@media (max-width:820px) {
    .page-entete h1,
    .ecran > h1 {
        font-size: clamp(1.75rem,6vw,2.25rem);
    }
}

@media (max-width:360px) {
    button:not(.accueil-presentation-zone-cliquable):not(.menu-mobile-bouton),
    .secondaire,
    label.secondaire {
        font-size: .82rem;
    }
}

/* Menu compact et composition de l'accueil sur téléphone. */

@media (max-width:820px) {
    header.entete .navigation {
        grid-template-columns: repeat(2,minmax(0,1fr));
        padding-top: 2px;
    }
    header.entete .navigation button,
    header.entete .navigation button:nth-last-child(-n+2),
    header.entete .navigation .son-commande.rapide {
        min-height: 40px;
        padding: 7px 9px;
        font-size: .8rem;
    }
    #accueil .accueil-contenu {
        padding-top: 22px;
    }

/* ==========================================================
   Finitions mobiles : menu vertical, typographie et boutons ajustés
   ========================================================== */
    header.entete .marque {
        min-width: 0;
        gap: 6px;
    }
    header.entete .marque > span {
        display: inline;
        max-width: 165px;
        color: #dcecff;
        font-size: .72rem;
        line-height: 1.15;
        letter-spacing: 0;
    }
    header.entete .navigation {
        padding: 5px 0 3px;
    }
    header.entete .navigation button,
    header.entete .navigation button:nth-last-child(-n+2),
    header.entete .navigation .son-commande.rapide,
    header.entete .navigation .son-commande.rapide[aria-pressed="true"],
    header.entete .navigation .son-commande.rapide[aria-pressed="false"] {
        width: 100%;
        min-height: 36px;
        margin-inline: auto;
        padding: 6px 9px;
    }

    #accueil .accueil-texte-image {
        top: 50%;
    }

    #question {
        --taille-texte-reponse: .92rem;
    }
    #question #enonceQuestion {
        font-size: clamp(1.05rem,4.7vw,1.28rem);
        line-height: 1.32;
        margin-bottom: 12px;
    }

    #question .question-commande-ligne > .suivant-ligne {
        display: flex !important;
        flex-wrap: wrap;
        gap: 8px;
        width: max-content;
        max-width: 100%;
    }
    #question .question-commande-ligne .navigation-question-groupe {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        gap: 8px;
    }
    #question #boutonQuestionPrecedente,
    #question #boutonValider,
    #question .question-commande-ligne #boutonMenuJokers,
    #question .question-commande-ligne #boutonPasserQuestion,
    #question .question-commande-ligne #boutonQuestionSuivante {
        width: auto;
        min-width: 0;
        flex: 0 0 auto;
    }

    #entrainement .entrainement-bascule-groupe,
    #entrainement .entrainement-secondes-groupe,
    #entrainement .entrainement-nombre-choix,
    #erreurs .revision-etape-boutons,
    #progression .progression-actions,
    #parametres .parametres-actions-boutons,
    .actions,
    .pjj-fenetre-actions {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        gap: 8px;
    }
    #entrainement .option-bouton,
    #entrainement .choix-bouton,
    #erreurs .revision-etape-bouton,
    #progression .progression-actions > *,
    #parametres .parametres-actions-boutons > *,
    .actions > *,
    .pjj-fenetre-actions > * {
        width: auto;
        min-width: 0;
        flex: 0 0 auto;
    }
}

@media (max-width:360px) {
    header.entete .marque > span {
        max-width: 145px;
        font-size: .67rem;
    }
    header.entete .navigation button,
    header.entete .navigation button:nth-last-child(-n+2),
    header.entete .navigation .son-commande.rapide {
        font-size: .92rem;
    }
}

@media (max-width:820px) {
    #erreurs .erreurs-parcours-etapes {
        max-height: min(42vh,360px);
        overflow-y: auto;
        overflow-x: hidden;
        overscroll-behavior: contain;
        padding-right: 6px;
        scrollbar-gutter: stable;
    }

/* Actions d'accueil aux proportions habituelles d'une interface mobile. */
    #accueil .accueil-actions {
        align-items: center;
        justify-content: center;
        gap: 9px;
    }
    #accueil .accueil-presentation-zone-cliquable {
        width: auto;
        min-width: 0;
        min-height: 40px;
        padding: 7px 16px;
        font-size: .9rem;
        line-height: 1.15;
    }
}

@media (max-width:390px) {
    #accueil .accueil-actions {
        flex-direction: column;
    }
    #accueil .accueil-presentation-zone-cliquable {
        width: auto;
        max-width: calc(100vw - 40px);
    }
}

/* Ajustement téléphone : boutons compacts et accueil jamais rogné. */
@media (max-width:580px) {
    .navigation {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        gap: 7px 8px;
    }
    .navigation button,
    .navigation button:nth-last-child(-n+2) {
        flex: 0 0 auto;
        width: auto;
        min-width: 0;
        min-height: 40px;
        padding: 7px 11px;
        font-size: .8rem;
    }
    #entrainement .entrainement-carte {
        padding: 16px 15px;
    }
    #entrainement .entrainement-icone {
        width: 46px;
        height: 46px;
        min-width: 46px;
        margin-bottom: 8px;
    }
    #entrainement .entrainement-icone svg {
        width: 43px;
        height: 43px;
    }
    #entrainement .option-bouton {
        min-height: 40px;
    }
    #entrainement .entrainement-lancer {
        min-height: 44px;
        margin-top: 14px;
    }
    #accueil.ecran.actif,
    #accueil .accueil-presentation {
        height: auto;
        min-height: calc(100dvh - var(--hauteur-entete,66px));
        overflow: visible;
    }
    #accueil .accueil-presentation {
        display: flex;
        align-items: center;
    }
    #accueil .accueil-contenu {
        position: relative;
        top: auto;
        left: auto;
        width: 100%;
        padding: 34px 20px 30px;
        box-sizing: border-box;
    }
    .produit-pied-page {
        margin: 0;
        padding: 12px 10px 16px;
        font-size: .78rem;
    }
    .produit-pied-page .produit-repere,
    .produit-pied-page > p {
        display: none;
    }
    .produit-pied-page nav {
        justify-content: center;
        gap: 8px 14px;
        margin: 0;
    }
}

@media (max-width:360px) {
    .navigation button,
    .navigation button:nth-last-child(-n+2) {
        min-height: 38px;
        padding: 6px 9px;
        font-size: .75rem;
    }
}
#choixMode .mode-icone svg {
    width: 64px;
    height: 64px;
}
#erreurs .revision-mode-icone svg {
    width: 40px;
    height: 40px;
}
#progression .progression-icone svg {
    width: 52px;
    height: 52px;
}

/* Consignes des modes : niveau secondaire commun, sous les réponses. */
#question .activite-consigne {
    gap: 8px;
    padding: 9px 12px;
}
#question .activite-consigne span {
    padding: 4px 8px;
    font-size: .72rem;
    font-weight: 850;
}
#question .activite-consigne b {
    color: #d8e8f7;
    font-size: .88rem;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 0;
}
#question .elimination-compteur,
#question .choisir-ordre-compteur {
    color: #c7dced;
    font-size: .82rem;
    font-weight: 700;
    line-height: 1.35;
}

/* Page Progression : cartes principales plus compactes. */
#progression .progression-grille {
    width: min(1080px,100%);
    gap: 22px;
}
#progression .progression-carte {
    min-height: 440px;
    padding: 26px 27px 24px;
}
#progression .progression-carte-entete {
    gap: 12px;
    margin-bottom: 14px;
}
#progression .progression-carte h2 {
    font-size: 1.45rem;
}
#progression .progression-icone {
    width: 54px;
    height: 54px;
    min-width: 54px;
}
#progression .progression-icone svg {
    width: 46px;
    height: 46px;
}
#progression .progression-statistiques {
    gap: 9px;
}
#progression .progression-statistique {
    min-height: 62px;
    padding: 10px;
}
#progression .progression-statistique strong {
    font-size: clamp(1.35rem,2vw,1.75rem);
}
#progression .progression-statistique span {
    margin-top: 5px;
}
#progression .progression-actions {
    padding-top: 18px;
    gap: 10px;
}
#progression .progression-tableau-bord {
    gap: 7px;
}
#progression .progression-tableau-bord .tableau-carte {
    padding: 9px 11px;
}
@media (max-width:980px) {
    #progression .progression-grille {
        width: min(720px,100%);
        gap: 18px;
    }
    #progression .progression-carte {
        min-height: 0;
    }
}
@media (max-width:580px) {
    #progression .progression-carte {
        min-height: 0;
        padding: 21px 18px;
        border-radius: 19px;
    }
}
@media (max-width:900px) {
    #question .question-commande-ligne {
        display: flex !important;
        flex-wrap: wrap;
        justify-content: space-between;
    }
    #question .question-commande-ligne #boutonValider {
        order: 3;
        width: 100%;
    }
    #question .question-commande-ligne .navigation-question-groupe {
        flex-wrap: wrap;
    }
}
@media (max-width:600px) {
    body:not([data-ecran-actif="accueil"])::before {
        background-size: auto 76%;
        opacity: .12;
    }
    #question .question-commande-ligne > .suivant-ligne,
    #question .question-commande-ligne .navigation-question-groupe,
    #question .question-commande-ligne button {
        width: 100%;
    }
}
/* Le bouton Valider prend exactement la zone centrale libérée par les jokers. */
.joker-fenetre {
    width: min(720px,calc(100vw - 36px));
}
.joker-fenetre-panneau {
    padding: 34px;
}
.joker-fenetre-icone svg {
    fill: none;
    stroke: currentColor;
    stroke-width: 2.2;
    stroke-linejoin: round;
}
.joker-fenetre .joker-choix {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 12px;
    margin-top: 24px;
    padding: 0;
    border: 0;
}
.joker-fenetre .joker {
    min-height: 112px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 16px 12px;
    border: 2px solid var(--accent);
    border-radius: 17px;
    color: #fff;
    background: var(--surface-carte);
    box-shadow: 0 6px 16px rgba(0,22,55,.16);
    font-weight: 900;
    cursor: pointer;
}
.joker-fenetre .joker-icone {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    color: #ffd76b;
}
#joker5050 .joker-icone {
    color: #39d7c4;
}
#jokerIndice .joker-icone {
    color: var(--jaune-interface);
}
#jokerLangueAuChat .joker-icone {
    color: #a986ff;
}
.joker-fenetre .joker-icone svg {
    width: 34px;
    height: 34px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.joker-fenetre .joker:hover:not(:disabled),
.joker-fenetre .joker:focus-visible:not(:disabled) {
    color: var(--texte-sur-jaune);
    background: linear-gradient(180deg,#ffe58e,var(--jaune-interface));
    transform: translateY(-2px);
}
.joker-fenetre .joker:hover:not(:disabled) .joker-icone,
.joker-fenetre .joker:focus-visible:not(:disabled) .joker-icone {
    color: var(--texte-sur-jaune);
}
.joker-fenetre .joker:disabled {
    opacity: .42;
    cursor: not-allowed;
    filter: saturate(.45);
}
.joker-fenetre-statut {
    margin-top: 18px;
    padding-top: 15px;
    border-top: 1px solid rgba(142,199,251,.24);
    color: #ffe49b;
    font-weight: 800;
    text-align: center;
}
@media (max-width:1220px) {
    #question .joker-menu-bouton {
        right: -10px;
        border-left-width: 2px;
        border-radius: 18px 0 0 18px;
    }
}
@media (max-width:760px) {
    #question .joker-menu-bouton {
        right: -4px;
        width: 48px;
        min-height: 112px;
        padding: 10px 6px;
        border-radius: 16px 0 0 16px;
    }
    #question .joker-menu-bouton > span:last-child {
        font-size: .68rem;
    }
    #question .question-commande-ligne > .suivant-ligne {
        position: static;
        order: 2;
        display: grid !important;
        grid-template-columns: minmax(0,1fr) auto minmax(0,1fr);
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        width: 100%;
        pointer-events: auto;
    }
    #question #boutonQuestionPrecedente {
        grid-column: 1;
        justify-self: start;
    }
    #question #boutonValider {
        grid-column: 2;
        min-width: 0;
        padding-inline: 14px;
    }
    #question .question-commande-ligne .navigation-question-groupe {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-end;
        grid-column: 3;
        justify-self: end;
    }
    .joker-fenetre-panneau {
        padding: 28px 20px 24px;
    }
    .joker-fenetre .joker-choix {
        grid-template-columns: 1fr;
    }
    .joker-fenetre .joker {
        min-height: 72px;
        flex-direction: row;
        justify-content: flex-start;
        padding: 13px 16px;
    }
}
@media (max-width:520px) {
    #question .question-commande-ligne > .suivant-ligne {
        grid-template-columns: 1fr 1fr;
    }
    #question #boutonQuestionPrecedente {
        grid-column: 1;
        grid-row: 1;
    }
    #question #boutonValider {
        grid-column: 2;
        grid-row: 1;
        justify-self: stretch;
    }
    #question .question-commande-ligne .navigation-question-groupe {
        grid-column: 1 / -1;
        grid-row: 2;
        width: 100%;
        justify-content: flex-end;
    }
}