/* ==========================================================
   PJJoue V1 — alertes harmonisées et confirmation centrée
   ========================================================== */
.pjj-fenetre-actions button {
    min-height: 46px;
    padding: 10px 20px;
    border-radius: 999px;
    font-size: 1rem;
    line-height: 1.2;
    font-weight: 850;
}
#fenetreMessage.fenetre-reussite .pjj-fenetre-panneau {
    border-color: rgba(95,224,160,.48);
    box-shadow: 0 24px 70px rgba(0,19,52,.52),0 0 0 1px rgba(95,224,160,.10);
}
#fenetreMessage.fenetre-reussite .pjj-fenetre-icone {
    color: #062e28;
    border-color: rgba(95,224,160,.78);
    background: linear-gradient(180deg,#8af0bc,#5fe0a0);
}

/* ==========================================================
   Système mobile final : rythme, toucher et absence de chevauchement
   ========================================================== */
@media (max-width:820px) {
    header.entete {
        gap: 10px;
        padding: 9px 12px 10px;
    }
    .navigation {
        width: 100%;
        max-width: 100%;
        gap: 8px;
        padding: 3px 2px 5px;
        overflow-x: auto;
        overscroll-behavior-inline: contain;
        scroll-padding-inline: 2px;
        scrollbar-width: none;
    }
    .navigation::-webkit-scrollbar {
        display: none;
    }
    .navigation button {
        flex: 0 0 auto;
        min-height: 44px;
        padding: 9px 14px;
        white-space: nowrap;
        font-size: .9rem;
    }
    .conteneur {
        width: calc(100% - 24px);
        min-height: calc(100vh - var(--hauteur-entete,116px));
        padding: 18px 0 30px;
    }
    .discret.global-retour {
        min-height: 44px;
        margin-bottom: 8px;
        padding: 9px 14px;
    }
    .page-entete {
        margin-bottom: 20px;
        padding-top: 14px;
    }
    .page-entete > p,
    .sous-titre {
        max-width: 65ch;
        line-height: 1.5;
    }
    button,
    .secondaire,
    label.secondaire {
        min-height: 44px;
    }
    #choixMode .mode-grille,
    #entrainement .entrainement-grille,
    #erreurs .revision-mode-grille,
    #progression .progression-grille {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    #choixMode .mode-carte {
        min-height: 0;
        padding: 22px 20px;
        border-radius: 19px;
    }
    #choixMode .mode-icone {
        width: 62px;
        height: 62px;
        min-width: 62px;
        margin-bottom: 14px;
    }
    #choixMode .mode-icone svg {
        width: 56px;
        height: 56px;
    }
    #entrainement .entrainement-carte,
    #erreurs .revision-mode-carte,
    #progression .progression-carte,
    #parametres .parametre {
        min-width: 0;
        min-height: 0;
        padding: 21px 19px;
        border-radius: 19px;
    }
    #erreurs .revision-mode-carte h2,
    #progression .progression-carte-entete {
        align-items: flex-start;
    }
    #progression .progression-statistiques {
        grid-template-columns: repeat(2,minmax(0,1fr));
        gap: 9px;
    }
    #progression .progression-actions,
    #parametres .parametres-actions-boutons,
    .actions {
        grid-template-columns: 1fr;
        gap: 10px;
    }
    #progression .progression-actions > *,
    #parametres .parametres-actions-boutons > *,
    .actions > * {
        width: 100%;
    }
    #parcours .chemin-programme-presentation,
    #parcours .carnet-parcours,
    #parcours .chemin-chemin {
        width: 100%;
        min-width: 0;
    }
    #parcours .programme-objectif-interieur {
        gap: 12px;
        padding-inline: 4px;
    }
    #parcours .programme-objectif-simple .objectif-icone {
        flex: 0 0 50px;
        width: 50px;
        height: 50px;
        padding-right: 8px;
    }
    #parcours .programme-objectif-simple .objectif-cible-reference {
        width: 48px;
        height: 48px;
    }
    #question .question-conteneur {
        width: 100%;
        padding: 10px 0 18px;
    }
    #question .question-entete {
        gap: 10px;
        margin-bottom: 12px;
        padding-bottom: 12px;
    }
    #question #enonceQuestion {
        margin-bottom: 14px;
        padding-inline: 4px;
    }
    #question .question-carte {
        min-height: 390px;
        padding: 20px 16px;
        border-radius: 18px;
    }
    #question .question-commande-ligne {
        display: block !important;
        margin-top: 14px;
    }
    #question .question-commande-ligne > .suivant-ligne {
        position: static;
        grid-template-columns: minmax(0,1fr) minmax(0,1fr);
        gap: 10px;
        pointer-events: auto;
    }
    #question #boutonQuestionPrecedente {
        width: 100%;
    }
    #question #boutonValider {
        grid-row: 1;
        width: 100%;
        min-width: 0;
    }
    #question .question-commande-ligne .navigation-question-groupe {
        grid-column: 1 / -1;
        grid-row: 2;
        display: grid;
        grid-template-columns: repeat(2,minmax(0,1fr));
        gap: 10px;
        width: 100%;
    }
    #question .question-commande-ligne #boutonMenuJokers,
    #question .question-commande-ligne #boutonPasserQuestion,
    #question .question-commande-ligne #boutonQuestionSuivante {
        position: static;
        width: 100%;
        min-width: 0;
        min-height: 44px;
        height: 44px;
        flex-direction: row;
        transform: none;
        border-radius: 12px;
        writing-mode: horizontal-tb;
    }
    #question .question-commande-ligne #boutonMenuJokers > span:last-child {
        writing-mode: horizontal-tb;
        font-size: .9rem;
        letter-spacing: 0;
    }
    .pjj-fenetre-panneau,
    .joker-fenetre-panneau {
        max-height: calc(100vh - 28px);
        padding: 24px 19px 20px;
        overflow-y: auto;
    }
}

@media (max-width:580px) {
    header.entete {
        padding-inline: 9px;
    }
    .navigation {
        gap: 7px;
    }
    .navigation button {
        padding: 8px 12px;
        font-size: .86rem;
    }
    .conteneur {
        width: calc(100% - 18px);
        padding-top: 14px;
    }
    .page-entete {
        margin-bottom: 17px;
        padding-top: 11px;
    }
    #progression .progression-statistiques {
        grid-template-columns: 1fr;
    }
    #progression .progression-carte-entete {
        gap: 10px;
    }
    #progression .progression-icone {
        width: 48px;
        height: 48px;
        min-width: 48px;
    }
    #progression .progression-icone svg {
        width: 41px;
        height: 41px;
    }
    #parcours .programme-objectif-interieur {
        align-items: center;
        text-align: left;
    }
    #question .question-carte {
        min-height: 370px;
    }
    .joker-fenetre .joker-choix {
        gap: 9px;
    }
}

@media (max-width:420px) {
    .conteneur {
        width: calc(100% - 16px);
    }
    #choixMode .mode-carte,
    #entrainement .entrainement-carte,
    #erreurs .revision-mode-carte,
    #progression .progression-carte,
    #parametres .parametre {
        padding: 18px 16px;
        border-radius: 17px;
    }
    #question .question-commande-ligne > .suivant-ligne,
    #question .question-commande-ligne .navigation-question-groupe {
        grid-template-columns: 1fr;
    }
    #question #boutonQuestionPrecedente,
    #question #boutonValider,
    #question .question-commande-ligne .navigation-question-groupe {
        grid-column: 1;
        grid-row: auto;
    }
    #question .question-carte {
        min-height: 350px;
        padding-inline: 13px;
    }
    #question #zoneReponses.reponses:not(.activite-reponses) {
        gap: 9px;
    }
}
#fenetreMessage.fenetre-reussite .pjj-fenetre-icone svg {
    display: none;
}
#fenetreMessage.fenetre-reussite .pjj-fenetre-icone::before {
    content: "✓";
    font-size: 1.75rem;
    line-height: 1;
    font-weight: 950;
}
#fenetreMessage.fenetre-reussite #confirmerFenetreMessage {
    color: #062e28;
    border-color: #a7f5cc;
    background: linear-gradient(180deg,#8af0bc,#5fe0a0);
    box-shadow: 0 10px 24px rgba(36,190,111,.22);
}
#fenetreMessage.fenetre-reussite #confirmerFenetreMessage:hover,
#fenetreMessage.fenetre-reussite #confirmerFenetreMessage:focus-visible {
    background: linear-gradient(180deg,#a5f6cf,#70e7ad);
    border-color: #d0ffe6;
}
#fenetreMessage[open] .pjj-fenetre-panneau {
    animation: arriveeFenetre .18s ease-out both;
}
@keyframes arriveeFenetre {
    from {
        opacity: 0;
        transform: translateY(10px) scale(.985);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}
/* Fenêtre de confirmation avant de passer une question. */
#fenetreMessage.fenetre-avertissement .pjj-fenetre-panneau {
    border-color: rgba(255,197,61,.58);
    box-shadow: 0 24px 70px rgba(0,19,52,.54),0 0 0 1px rgba(255,197,61,.12);
    padding-right: 4.25rem;
}
#fenetreMessage.fenetre-avertissement .pjj-fenetre-icone {
    color: #17355b;
    border-color: rgba(255,210,94,.9);
    background: linear-gradient(180deg,#ffe08b,#ffc53d);
    display: none;
}
#fenetreMessage.fenetre-avertissement .pjj-fenetre-icone svg {
    display: none;
}
#fenetreMessage.fenetre-avertissement .pjj-fenetre-icone::before {
    content: "?";
    font-size: 1.7rem;
    line-height: 1;
    font-weight: 950;
}
#fenetreMessage.fenetre-avertissement #confirmerFenetreMessage {
    color: #17355b;
    border-color: #ffe7a5;
    background: linear-gradient(180deg,#ffd86d,#ffc53d);
    box-shadow: 0 10px 24px rgba(255,176,25,.2);
}
#fenetreMessage.fenetre-avertissement #confirmerFenetreMessage:hover,
#fenetreMessage.fenetre-avertissement #confirmerFenetreMessage:focus-visible {
    background: linear-gradient(180deg,#ffe38d,#ffd052);
    border-color: #fff0bd;
}
/* Confirmation Passer : un seul message, sans icône interrogative redondante. */
#fenetreMessage.fenetre-avertissement #titreFenetreMessage {
    max-width: 38rem;
    margin-inline: auto;
    text-align: center;
}
#fenetreMessage.fenetre-avertissement #texteFenetreMessage:empty {
    display: none;
}
/* Confirmation Passer — texte compact, lisible et dégagé de la croix. */
#fenetreMessage.fenetre-avertissement #titreFenetreMessage:empty {
    display: none;
}
#fenetreMessage.fenetre-avertissement #texteFenetreMessage {
    display: block;
    max-width: 34rem;
    margin: 0 auto;
    padding-right: .4rem;
    font-size: 1rem;
    line-height: 1.55;
    font-weight: 650;
    text-align: center;
    text-wrap: pretty;
}
#fenetreMessage.fenetre-avertissement .pjj-fenetre-fermer {
    top: 1rem;
    right: 1rem;
}
/* ==========================================================
   PJJoue V1 — bilan : questions passées sans réponse dévoilée
   ========================================================== */
.bilan-correction-regle {
    display: flex;
    flex-direction: column;
    gap: .35rem;
    margin: 0 0 1rem;
    padding: .9rem 1rem;
    border: 1px solid rgba(116,183,255,.34);
    border-radius: 16px;
    background: rgba(15,69,126,.42);
    color: #eef7ff;
}
.bilan-correction-regle strong {
    color: #ffd05a;
    font-size: 1rem;
}
.bilan-correction-regle span {
    font-size: .95rem;
    line-height: 1.5;
}

/* Correctifs mobiles ciblés : menu complet et entraînement sans collision. */
@media (max-width:580px) {
    .navigation {
        display: grid;
        grid-template-columns: repeat(6,minmax(0,1fr));
        gap: 8px;
        width: 100%;
        padding: 3px 0 2px;
        overflow: visible;
        box-sizing: border-box;
    }
    .navigation::after {
        content: none;
    }
    .navigation button {
        grid-column: span 2;
        width: 100%;
        min-width: 0;
        min-height: 42px;
        padding: 8px 5px;
        overflow: visible;
        text-overflow: clip;
        font-size: .82rem;
        white-space: nowrap;
    }
    .navigation button:nth-last-child(-n+2) {
        grid-column: span 3;
    }
    #entrainement .entrainement-grille {
        width: 100%;
        gap: 14px;
    }
    #entrainement .entrainement-carte {
        height: auto;
        min-height: 0;
        padding: 18px 16px 17px;
        border-radius: 17px;
        align-items: stretch;
    }
    #entrainement .entrainement-icone {
        width: 54px;
        height: 54px;
        min-width: 54px;
        margin-bottom: 10px;
    }
    #entrainement .entrainement-icone svg {
        width: 50px;
        height: 50px;
    }
    #entrainement .entrainement-carte h2 {
        font-size: 1.35rem;
    }
    #entrainement .entrainement-carte > p {
        margin-top: 8px;
        font-size: .9rem;
        line-height: 1.45;
    }
    #entrainement .entrainement-details {
        margin-top: 10px;
        font-size: .84rem;
    }
    #entrainement .entrainement-options {
        margin-top: 14px;
        gap: 12px;
    }
    #entrainement .entrainement-option,
    #entrainement .entrainement-chronometre-secondes {
        display: grid;
        grid-template-columns: 1fr;
        align-items: stretch;
        gap: 7px;
        width: 100%;
        min-width: 0;
    }
    #entrainement .entrainement-option > span,
    #entrainement .entrainement-chronometre-secondes > span {
        font-size: .86rem;
    }
    #entrainement .entrainement-bascule-groupe {
        grid-template-columns: repeat(2,minmax(0,1fr));
        gap: 8px;
        width: 100%;
        min-width: 0;
    }
    #entrainement .option-bouton {
        width: 100%;
        min-width: 0;
        min-height: 44px;
        box-sizing: border-box;
    }
    #entrainement .entrainement-secondes-groupe {
        grid-template-columns: repeat(3,minmax(0,1fr));
        gap: 7px;
        width: 100%;
    }
    #entrainement .entrainement-lancer {
        position: static;
        width: 100%;
        min-height: 48px;
        margin: 17px 0 0;
        flex: none;
    }
}

@media (max-width:360px) {
    .navigation {
        gap: 6px;
    }
    .navigation button {
        padding-inline: 3px;
        font-size: .76rem;
    }
    #entrainement .entrainement-carte {
        padding-inline: 14px;
    }
}

#entrainement .entrainement-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));
}

/* ==========================================================
   Responsive final : navigation, accueil, bilan et pied de page
   ========================================================== */
#accueil .accueil-presentation-image {
    object-fit: contain;
}

@media (max-width:820px) {
    header.entete {
        grid-template-columns: 1fr;
    }
    header.entete .marque {
        justify-self: center;
    }
    header.entete .navigation {
        display: grid;
        grid-template-columns: repeat(3,minmax(0,1fr));
        gap: 7px;
        padding: 0;
    }
    header.entete .navigation button,
    header.entete .navigation button:nth-last-child(-n+2),
    header.entete .navigation .son-commande.rapide {
        grid-column: auto;
        width: 100%;
        min-width: 0;
        min-height: 38px;
        height: auto;
        padding: 6px 8px;
        font-size: clamp(.7rem,2.7vw,.84rem);
        line-height: 1.15;
        white-space: nowrap;
    }
    header.entete .navigation .son-commande.rapide {
        gap: 5px;
    }
    header.entete .navigation .son-icone {
        width: 17px;
        height: 17px;
        flex: 0 0 17px;
    }

    #accueil.ecran.actif {
        display: block;
        height: auto;
        min-height: 0;
        overflow: visible;
    }
    #accueil .accueil-presentation {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        width: 100%;
        height: auto;
        min-height: 0;
        aspect-ratio: auto;
        overflow: visible;
    }
    #accueil .accueil-presentation::after {
        content: none;
    }
    #accueil .accueil-presentation-image {
        position: relative;
        inset: auto;
        width: 100%;
        height: auto;
        object-fit: contain;
        object-position: center;
    }
    #accueil .accueil-contenu {
        position: relative;
        inset: auto;
        width: 100%;
        padding: 25px 20px 28px;
        box-sizing: border-box;
        background: #062661;
    }

    #entrainement .entrainement-lancer {
        align-self: center;
        width: auto;
        min-width: 0;
        max-width: 240px;
        min-height: 42px;
        margin: 14px auto 0;
        padding: 8px 18px;
    }

    #bilan .bilan-resume-entete {
        grid-template-columns: 54px minmax(0,1fr);
        align-items: start;
        gap: 14px;
    }
    #bilan .resultat-icone {
        width: 54px;
        height: 54px;
        border-width: 8px;
        box-sizing: border-box;
    }
    #bilan .resultat-icone::before,
    #bilan .resultat-icone::after {
        top: 39px;
        width: 18px;
        height: 25px;
    }
    #bilan #titreBilan {
        font-size: clamp(1.45rem,6vw,2.1rem);
    }

    .produit-pied-page {
        margin: 0 auto;
        padding: 13px 16px 16px;
        font-size: .78rem;
        line-height: 1.4;
    }
    .produit-pied-page .produit-repere,
    .produit-pied-page > p {
        display: block;
        margin: 4px 0;
    }
    .produit-pied-page nav {
        justify-content: center;
        gap: 6px 13px;
        margin-top: 9px;
    }
}

@media (max-width:360px) {
    header.entete .navigation {
        gap: 5px;
    }
    header.entete .navigation button,
    header.entete .navigation button:nth-last-child(-n+2),
    header.entete .navigation .son-commande.rapide {
        min-height: 36px;
        padding: 5px 4px;
        font-size: .68rem;
    }
    #accueil .accueil-contenu {
        padding-inline: 16px;
    }
    #bilan .bilan-resume-entete {
        grid-template-columns: 46px minmax(0,1fr);
        gap: 11px;
    }
    #bilan .resultat-icone {
        width: 46px;
        height: 46px;
        border-width: 7px;
    }
    #bilan .resultat-icone::before,
    #bilan .resultat-icone::after {
        top: 33px;
        width: 15px;
        height: 21px;
    }
}

/* ==========================================================
   Navigation mobile repliée et accueil lisible sur l'image
   ========================================================== */
.menu-mobile-bouton {
    display: none;
}

@media (max-width:820px) {
    :root {
        --hauteur-bouton-mobile: 40px;
    }
    header.entete {
        display: grid;
        grid-template-columns: minmax(0,1fr) auto;
        align-items: center;
        gap: 8px;
        padding: 8px 12px;
    }
    header.entete .marque {
        order: initial;
        justify-self: start;
    }
    .menu-mobile-bouton {
        display: inline-flex;
        grid-column: 2;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        gap: 4px;
        width: 42px;
        min-width: 42px;
        height: 40px;
        min-height: 40px;
        padding: 0;
        border: 1px solid #6f94c0;
        border-radius: 11px;
        color: #fff;
        background: var(--surface-secondaire);
    }
    .menu-mobile-bouton span {
        width: 20px;
        height: 2px;
        border-radius: 999px;
        background: currentColor;
        transition: transform .16s ease,opacity .16s ease;
    }
    header.entete.menu-mobile-ouvert .menu-mobile-bouton {
        color: var(--texte-sur-jaune);
        border-color: var(--bouton-selection);
        background: var(--bouton-selection);
    }
    header.entete.menu-mobile-ouvert .menu-mobile-bouton span:nth-child(1) {
        transform: translateY(6px) rotate(45deg);
    }
    header.entete.menu-mobile-ouvert .menu-mobile-bouton span:nth-child(2) {
        opacity: 0;
    }
    header.entete.menu-mobile-ouvert .menu-mobile-bouton span:nth-child(3) {
        transform: translateY(-6px) rotate(-45deg);
    }
    header.entete .navigation {
        order: initial;
        display: none;
        grid-column: 1 / -1;
        grid-template-columns: 1fr;
        justify-items: center;
        gap: 2px;
        width: 100%;
        margin: 0;
        padding: 2px 0 0;
        overflow: visible;
    }
    header.entete.menu-mobile-ouvert .navigation {
        display: grid;
    }
    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"] {
        grid-column: auto;
        width: max-content;
        max-width: 100%;
        min-width: 0;
        min-height: 34px;
        height: auto;
        padding: 6px 4px;
        border: 0;
        border-bottom: 2px solid transparent;
        border-radius: 0;
        color: #fff;
        background: transparent;
        box-shadow: none;
        font-size: .96rem;
        line-height: 1.15;
        white-space: nowrap;
    }
    header.entete .navigation button:hover,
    header.entete .navigation button:focus-visible,
    header.entete .navigation button[aria-current="page"],
    header.entete .navigation .son-commande.rapide:hover,
    header.entete .navigation .son-commande.rapide:focus-visible,
    header.entete .navigation .son-commande.rapide[aria-pressed="true"] {
        color: var(--bouton-selection);
        border-bottom-color: var(--bouton-selection);
        background: transparent;
    }
    header.entete .navigation .son-icone {
        width: 16px;
        height: 16px;
        flex: 0 0 16px;
    }
    header.entete .navigation .son-texte {
        font-size: inherit;
    }

    #accueil .accueil-presentation {
        position: relative;
    }
    #accueil .accueil-contenu {
        position: static;
        padding: 22px 20px 28px;
    }
    #accueil .accueil-texte-image {
        position: absolute;
        z-index: 4;
        top: clamp(12px,4vw,28px);
        left: clamp(16px,5vw,38px);
        width: min(56%,390px);
        color: #fff;
        text-shadow: 0 2px 8px rgba(0,25,60,.48);
    }
    #accueil .accueil-texte-image .accueil-marque {
        margin-bottom: 7px;
        font-size: clamp(1.35rem,6vw,2.7rem);
    }
    #accueil .accueil-texte-image h1 {
        font-size: clamp(1.05rem,4.6vw,2.25rem);
        line-height: 1.08;
    }
    #accueil .accueil-texte-image .accueil-accent {
        width: clamp(42px,13vw,70px);
        height: 4px;
        margin: 10px 0 0;
    }
    #accueil .accueil-introduction {
        max-width: 680px;
        margin-inline: auto;
        text-align: center;
    }

    button:not(.accueil-presentation-zone-cliquable):not(.menu-mobile-bouton),
    .secondaire,
    label.secondaire {
        min-height: var(--hauteur-bouton-mobile);
        padding-block: 6px;
        font-size: .88rem;
    }
    #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 {
        height: var(--hauteur-bouton-mobile);
        min-height: var(--hauteur-bouton-mobile);
        padding-inline: 13px;
        font-size: .88rem;
    }
    #entrainement .option-bouton,
    #entrainement .choix-bouton,
    #erreurs .revision-etape-bouton,
    #progression .progression-actions button,
    #parametres .parametres-actions-boutons button,
    .pjj-fenetre-actions button {
        min-height: var(--hauteur-bouton-mobile);
        padding: 6px 12px;
        font-size: .86rem;
    }
    .page-entete h1,
    .ecran > h1 {
        font-size: clamp(1.85rem,7vw,2.4rem);
        line-height: 1.12;
    }
}

@media (max-width:360px) {
    :root {
        --hauteur-bouton-mobile: 38px;
    }
    header.entete {
        padding-inline: 9px;
    }
    #accueil .accueil-texte-image {
        top: 23.9vw;
        left: 14px;
        width: 58%;
    }
    #accueil .accueil-texte-image .accueil-marque {
        margin-bottom: 5px;
    }
    #accueil .accueil-texte-image .accueil-accent {
        margin-top: 7px;
    }
}

/* Proportions finales des commandes sur mobile. */
@media (max-width:820px) {
    header.entete .marque > span {
        position: relative;
        top: 2px;
    }
    #accueil .accueil-presentation-zone-cliquable,
    #entrainement .entrainement-lancer,
    #parcours #boutonLancerDeParcours,
    #parcours #boutonJouerTirageDe,
    #question .question-commande-ligne button,
    #bilan .bilan-actions button,
    #progression .progression-actions button,
    #parametres .parametres-actions-boutons button,
    .pjj-fenetre-actions button,
    .celebration-continuer,
    .global-retour {
        width: max-content;
        max-width: calc(100vw - 32px);
        min-width: 0;
        min-height: 36px;
        height: auto;
        margin-left: auto;
        margin-right: auto;
        padding: 5px 10px;
        line-height: 1.15;
    }
    #entrainement .entrainement-lancer {
        max-width: calc(100% - 24px);
        margin-top: 12px;
        font-size: .84rem;
    }
    #entrainement .option-bouton,
    #entrainement .choix-bouton,
    #parametres .choix-bouton,
    #erreurs .revision-etape-bouton {
        width: max-content;
        min-width: 0;
        min-height: 34px;
        height: 34px;
        padding: 5px 9px;
    }
    #bilan .bilan-actions,
    #progression .progression-actions,
    #parametres .parametres-actions-boutons {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        gap: 8px;
    }
    #entrainement .entrainement-nombre-choix .choix-bouton,
    #entrainement .entrainement-secondes-groupe .choix-bouton,
    #parametres .choix-groupe .choix-bouton {
        width: max-content;
        min-width: 0;
        height: 34px;
        min-height: 34px !important;
        padding: 5px 9px;
    }
}

/* Ajustements ciblés des composants qui possèdent leurs propres dimensions. */
header.entete .marque > span {
    top: 3px;
}
#parcours .carnet-parcours {
    display: block;
}
#parcours .carnet-parcours-contenu {
    width: 100%;
    min-width: 0;
}
#parcours .carnet-parcours-entete {
    display: grid;
    grid-template-columns: auto minmax(0,1fr) auto;
    align-items: center;
    gap: 15px;
    margin: 0 0 26px;
    padding-bottom: 18px;
    border-bottom: 1px solid rgba(145,198,245,.22);
}
#parcours .carnet-parcours-icone {
    align-self: center;
    margin: 0;
}
#parcours #boutonLancerDeParcours .libelle-mobile {
    display: none;
}
#question .question-commande-ligne .libelle-mobile {
    display: none;
}

@media (max-width:820px) {
    /* Le centre du titre suit le centre vertical de l'image d'accueil. */
    #accueil .accueil-texte-image {
        top: 23.9vw;
        transform: translateY(-50%);
    }
    #progression .progression-importation,
    #erreurs .revision-toutes-carte [data-action="reviser-toutes-erreurs"],
    #question #boutonQuestionPrecedente,
    #question #boutonValider,
    #question #boutonMenuJokers,
    #question #boutonPasserQuestion,
    #question #boutonQuestionSuivante {
        width: max-content !important;
        max-width: calc(100vw - 32px);
        min-width: 0 !important;
        min-height: 34px !important;
        height: 34px !important;
        margin-left: auto;
        margin-right: auto;
        padding: 5px 10px !important;
        line-height: 1.1;
    }
    #progression .progression-importation {
        display: inline-flex;
        flex: 0 0 auto;
        align-items: center;
        justify-content: center;
    }
    #erreurs .revision-toutes-carte {
        justify-content: flex-start;
        gap: 16px;
    }
    #erreurs .revision-toutes-carte [data-action="reviser-toutes-erreurs"] {
        align-self: center;
        margin-top: 2px;
        font-size: .84rem;
    }
    #question .question-commande-ligne > .suivant-ligne,
    #question .question-commande-ligne .navigation-question-groupe {
        display: flex !important;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        gap: 8px;
    }
    #parcours .carnet-parcours-entete {
        grid-template-columns: 44px minmax(0,1fr);
        align-items: center;
        gap: 12px;
    }
    #parcours .carnet-parcours-entete > div:nth-child(2) {
        align-self: center;
    }
    #parcours .carnet-parcours-titre {
        grid-column: 2;
        justify-self: start;
    }
    #parcours .programme-objectif-interieur {
        gap: 4px;
    }
    #parcours .programme-objectif-simple .objectif-icone {
        flex: 0 0 44px;
        width: 44px;
        height: 44px;
        padding-right: 0;
    }
    /* Deux commandes d'un même encadrement restent côte à côte si elles tiennent. */
    #parcours .carnet-defi-de-actions,
    #bilan .bilan-actions,
    #progression .progression-actions,
    #parametres .parametres-actions-boutons,
    #question .question-commande-ligne > .suivant-ligne,
    #question .question-commande-ligne .navigation-question-groupe,
    .actions,
    .pjj-fenetre-actions {
        display: flex;
        flex-flow: row wrap;
        align-items: center;
        justify-content: center;
        gap: 8px;
    }
    #parcours .carnet-defi-de-actions {
        grid-column: 1 / -1;
        display: grid;
        grid-template-columns: max-content max-content;
        justify-content: start;
        align-items: center;
        gap: 7px;
        width: 100%;
    }
    #parcours .carnet-defi-de-actions button {
        flex: 0 1 auto;
        width: max-content !important;
        min-width: 0;
        min-height: 34px;
        height: 34px;
        margin: 0;
        padding: 5px 8px;
        white-space: nowrap;
        font-size: .8rem;
    }
    #parcours #boutonLancerDeParcours .libelle-bureau {
        display: none;
    }
    #parcours #boutonLancerDeParcours .libelle-mobile {
        display: inline;
    }
    /* Navigation d'une question : deux rangées stables, sans chevauchement. */
    #question .question-commande-ligne > .suivant-ligne {
        display: grid !important;
        grid-template-columns: max-content max-content;
        grid-template-rows: auto auto;
        justify-content: center;
        align-items: center;
        gap: 9px 10px;
        width: 100%;
    }
    #question .question-commande-ligne .navigation-question-groupe {
        display: contents !important;
    }
    #question #boutonQuestionPrecedente {
        grid-column: 1;
        grid-row: 1;
    }
    #question #boutonPasserQuestion,
    #question #boutonQuestionSuivante {
        grid-column: 2;
        grid-row: 1;
    }
    #question #boutonMenuJokers {
        grid-column: 1;
        grid-row: 2;
    }
    #question #boutonValider {
        grid-column: 2;
        grid-row: 2;
    }
    #question #boutonQuestionPrecedente,
    #question #boutonValider,
    #question #boutonMenuJokers,
    #question #boutonPasserQuestion,
    #question #boutonQuestionSuivante {
        margin: 0 !important;
    }
    #question .question-commande-ligne .libelle-bureau {
        display: none;
    }
    #question .question-commande-ligne .libelle-mobile {
        display: inline;
    }
}

/* Accueil ordinateur : l'illustration utilise toute la largeur visible. */
@media (min-width:821px) {
    body[data-ecran-actif="accueil"] .conteneur {
        width: 100%;
        max-width: none;
        margin-inline: 0;
    }
    body[data-ecran-actif="accueil"] #accueil {
        left: auto;
        width: 100%;
        margin-left: 0;
        margin-right: 0;
    }
    body[data-ecran-actif="accueil"] #accueil .accueil-presentation {
        width: 100%;
    }
    body[data-ecran-actif="accueil"] #accueil .accueil-presentation-image {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center center;
    }
}

/* L'accueil mobile n'a ni retour ni barre d'actions de page. */
@media (max-width:820px) {
    body[data-ecran-actif="accueil"] .barre-actions-page {
        display: none;
    }
}