/* ==========================================================================
   ACTIVITÉS
   ========================================================================== */

/* ==========================================================================
   Présentation des activités
   ========================================================================== */

.mimir-activity-presentation__description {
    max-width: 52rem;
    margin-inline: auto;

    text-align: center;
}

.mimir-activity-presentation__details {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
    gap: var(--space-4);

    width: min(100%, 42rem);
    margin: var(--space-5) auto 0;
}

.mimir-activity-presentation__details[hidden] {
    display: none;
}

.mimir-activity-presentation__details--assistee {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
}

@media (max-width: 760px) {
    .mimir-activity-presentation__details--assistee {
        grid-template-columns: 1fr;
    }
}

.mimir-activity-presentation__info {
    padding: var(--space-4);

    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-large);

    text-align: center;
}

.mimir-activity-presentation__label {
    margin: 0 0 var(--space-2);

    color: var(--color-text-secondary);

    font-size: 0.9rem;
    font-weight: 700;
}

.mimir-activity-presentation__value {
    margin: 0;

    color: var(--color-text);

    font-size: 1.05rem;
    line-height: 1.5;
    font-weight: 650;
}

/* --------------------------------------------------------------------------
   Choix de la quantité d’une activité
   -------------------------------------------------------------------------- */

.mimir-activity-presentation__selection {
    width: min(100%, 42rem);
    margin: var(--space-5) auto 0;
    padding: var(--space-4);

    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-large);

    text-align: center;
}

.mimir-activity-presentation__fieldset {
    min-width: 0;
    margin: 0;
    padding: 0;

    border: 0;
}

.mimir-activity-presentation__legend {
    width: 100%;
    margin-bottom: var(--space-4);
    padding: 0;

    color: var(--color-text);

    font-size: 1rem;
    line-height: 1.4;
    font-weight: 750;
    text-align: center;
}

.mimir-activity-presentation__choices {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-3);
}

.mimir-activity-presentation__choice {
    position: relative;

    min-width: 0;

    cursor: pointer;
}

.mimir-activity-presentation__choice input[type="radio"] {
    position: absolute;
    z-index: 2;
    inset: 0;

    width: 100%;
    height: 100%;
    margin: 0;

    opacity: 0;
    cursor: pointer;
}

.mimir-activity-presentation__choice-content {
    display: grid;
    width: 100%;
    min-height: var(--touch-target-min);
    place-items: center;
    box-sizing: border-box;

    padding: var(--space-2);

    background: var(--color-surface);
    color: var(--color-text);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-small);

    font-weight: 800;

    transition:
        background-color var(--transition-fast),
        border-color var(--transition-fast),
        color var(--transition-fast),
        box-shadow var(--transition-fast);
}

.mimir-activity-presentation__choice:hover
    .mimir-activity-presentation__choice-content {
    background: var(--color-interactive-hover);
    border-color: var(--color-primary);
}

.mimir-activity-presentation__choice
    input[type="radio"]:focus-visible
    + .mimir-activity-presentation__choice-content {
    outline: none;
    box-shadow: var(--focus-ring);
}

.mimir-activity-presentation__choice
    input[type="radio"]:checked
    + .mimir-activity-presentation__choice-content {
    background: var(--color-surface-selected);
    color: var(--color-primary);
    border-color: var(--color-primary);
    box-shadow: inset 0 0 0 1px var(--color-primary);
}

@media (max-width: 26rem) {
    .mimir-activity-presentation__choices {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* ==========================================================================
   BARRE DE PROGRESSION
   ========================================================================== */

.barre-progression {
    width: 100%;
    height: 1rem;

    margin: 0 0 var(--space-5);

    overflow: hidden;

    -webkit-appearance: none;
    appearance: none;
    background: var(--color-progress-track);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-pill);

    accent-color: var(--color-primary);
}

.barre-progression::-webkit-progress-bar {
    background: var(--color-progress-track);
    border-radius: var(--radius-pill);
}

.barre-progression::-webkit-progress-value {
    background: var(--color-primary);
    clip-path: polygon(
        0 0,
        calc(100% - 0.55rem) 0,
        100% 50%,
        calc(100% - 0.55rem) 100%,
        0 100%
    );
}

.barre-progression::-moz-progress-bar {
    background: var(--color-primary);
    clip-path: polygon(
        0 0,
        calc(100% - 0.55rem) 0,
        100% 50%,
        calc(100% - 0.55rem) 100%,
        0 100%
    );
}

.barre-progression--terminee::-webkit-progress-value {
    border-radius: var(--radius-pill);
    clip-path: none;
}

.barre-progression--terminee::-moz-progress-bar {
    border-radius: var(--radius-pill);
    clip-path: none;
}

/* ==========================================================================
   CARTES-MÉMOIRE — CARTE RETOURNABLE
   ========================================================================== */

.flashcard-scene {
    width: min(100%, 28rem);
    margin-inline: auto;

    perspective: 75rem;
}

.flashcard-carte {
    display: block;

    width: 100%;
    padding: 0;

    background: transparent;
    color: inherit;

    border: 0;
    border-radius: var(--radius-large);

    cursor: pointer;
}

.flashcard-carte-interieur {
    display: grid;

    width: 100%;

    transform-style: preserve-3d;

    transition: transform 480ms cubic-bezier(0.2, 0.75, 0.25, 1);
}

.flashcard-carte[data-face="verso"] {
    cursor: default;
}

.flashcard-carte[data-face="verso"] .flashcard-carte-interieur {
    transform: rotateY(180deg);
}

.flashcard-face {
    position: relative;

    display: grid;
    grid-area: 1 / 1;
    grid-template-rows: auto minmax(0, 1fr) auto;
    align-items: center;

    min-height: 23rem;
    padding: var(--space-5);

    background: var(--color-surface);
    color: var(--color-text);

    border: 1px solid var(--color-border);
    border-radius: var(--radius-large);

    box-shadow: var(--shadow-medium);

    overflow: hidden;

    transition:
        background-color var(--transition-fast),
        border-color var(--transition-fast),
        box-shadow var(--transition-fast);

    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.flashcard-face--verso {
    transform: rotateY(180deg);
}

.flashcard-face--recto::before {
    position: absolute;
    inset: 0 auto 0 0;

    width: 0.28rem;

    background: var(--color-primary);

    content: "";

    transform: scaleY(0);
    transform-origin: center;

    transition: transform var(--transition-fast);
}

.flashcard-face-etiquette {
    justify-self: center;

    color: var(--color-primary);

    font-size: 0.95rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.flashcard-face-etiquette::after {
    display: block;

    width: 3rem;
    height: 2px;
    margin: var(--space-2) auto 0;

    background: currentColor;

    content: "";
}

.flashcard-face-contenu {
    align-self: center;

    max-width: 100%;

    font-size: clamp(1.25rem, 2.3vw, 1.65rem);
    font-weight: 600;
    line-height: 1.5;
    text-align: center;
    overflow-wrap: anywhere;
}

.flashcard-face-aide {
    align-self: end;
    justify-self: center;

    max-width: 17rem;

    color: var(--color-text-secondary);

    font-size: 0.9rem;
    line-height: 1.45;
    text-align: center;
}

.flashcard-carte[data-face="recto"]:hover .flashcard-face--recto,
.flashcard-carte[data-face="recto"]:focus-visible .flashcard-face--recto {
    background: var(--color-card-hover);
    border-color: var(--color-primary);
    box-shadow: var(--shadow-medium);
}

.flashcard-carte[data-face="recto"]:hover .flashcard-face--recto::before,
.flashcard-carte[data-face="recto"]:focus-visible
    .flashcard-face--recto::before {
    transform: scaleY(1);
}

.flashcard-carte:focus-visible {
    box-shadow: none;
}

.flashcard-carte:focus-visible .flashcard-face {
    box-shadow: var(--focus-ring), var(--shadow-medium);
}

.flashcard-scene:focus {
    outline: none;
}

.flashcard-scene:focus-visible .flashcard-face {
    box-shadow: var(--focus-ring), var(--shadow-medium);
}

.flashcard-actions {
    width: min(100%, 38rem);
    margin-inline: auto;
}

@media (max-width: 32rem) {
    .flashcard-scene {
        width: 100%;
    }

    .flashcard-face {
        min-height: 20rem;
        padding: var(--space-4);
    }

    .flashcard-face-contenu {
        font-size: 1.2rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .flashcard-carte-interieur,
    .flashcard-face,
    .flashcard-face--recto::before {
        transition: none;
    }
}

/* ==========================================================================
   TEXTE À TROUS
   ========================================================================== */

.texte-trou {
    width: 14rem;
    min-width: 8rem;
    min-height: var(--touch-target-min);

    margin: 0 0.3rem;
    padding: 0.3rem;

    background: var(--color-surface);
    color: var(--color-text);

    border: 1px solid var(--color-control-border);
    border-radius: var(--radius-small);

    font: inherit;
}

.texte-trou.correct {
    background: var(--color-success-background);
    border: 2px solid var(--color-success);
}

.texte-trou.incorrect {
    background: var(--color-error-background);
    border: 2px solid var(--color-error);
}

.texte-trou[readonly] {
    cursor: default;
    pointer-events: none;
}

.texte-trou[readonly]:not(.correct):not(.incorrect) {
    background: var(--color-surface-hover);
}

/* ==========================================================================
   ASSOCIATION
   ========================================================================== */

.association-select {
    max-width: 100%;
    min-height: var(--touch-target-min);

    padding: 0.4rem 0.6rem;
}

.association-select.correct {
    background: var(--color-success-background);
    border: 2px solid var(--color-success);
}

.association-select.incorrect {
    background: var(--color-error-background);
    border: 2px solid var(--color-error);
}

/* ==========================================================================
   QCM
   ========================================================================== */

.qcm-progression {
    margin-bottom: var(--space-4);

    color: var(--color-text-secondary);

    font-size: 0.95rem;
}

.qcm-question {
    margin-bottom: var(--space-5);

    color: var(--color-text);

    line-height: 1.4;
}

#form-qcm {
    display: flex;
    flex-direction: column;

    gap: var(--space-3);
}

/* Proposition au repos */

.qcm-proposition {
    position: relative;

    display: flex;
    min-height: var(--touch-target-min);
    align-items: flex-start;

    gap: var(--space-3);

    padding: 0.875rem;

    overflow: hidden;

    background: var(--color-surface);
    color: var(--color-text);

    border: 2px solid var(--color-control-border);
    border-radius: var(--radius-medium);

    cursor: pointer;
    touch-action: manipulation;
    user-select: none;

    transition:
        background-color var(--transition-fast),
        border-color var(--transition-fast),
        box-shadow var(--transition-fast);
}

.qcm-proposition::before {
    content: "";

    position: absolute;
    inset: 0 auto 0 0;

    width: 0.28rem;

    background: var(--color-primary);

    transform: scaleY(0);
    transform-origin: center;

    pointer-events: none;

    transition: transform var(--transition-fast);
}

.qcm-proposition:not(.bonne):not(.mauvaise):hover::before,
.qcm-proposition:not(.bonne):not(.mauvaise):has(input:focus-visible)::before,
.qcm-proposition:not(.bonne):not(.mauvaise):has(input:checked)::before {
    transform: scaleY(1);
}

.qcm-proposition:active {
    background: var(--color-card-hover);
    border-color: var(--color-primary);
}

/* Focus clavier */

.qcm-proposition:not(.bonne):not(.mauvaise):hover {
    background: var(--color-card-hover);
    border-color: var(--color-primary);
    box-shadow: var(--shadow-medium);
}

.qcm-proposition:not(.bonne):not(.mauvaise):has(input:focus-visible) {
    background: var(--color-card-hover);
    border-color: var(--color-primary);

    outline: none;
    box-shadow: var(--focus-ring), var(--shadow-medium);
}

/* Bouton radio */

.qcm-proposition input[type="radio"] {
    width: 1.25rem;
    height: 1.25rem;
}

.qcm-proposition input {
    flex: 0 0 auto;

    margin-top: 0.2rem;

    accent-color: var(--color-primary);

    cursor: pointer;
}

/* Texte de la proposition */

.qcm-texte {
    flex: 1;

    color: var(--color-text);

    line-height: 1.5;
}

/* Proposition sélectionnée avant validation */

.qcm-proposition:has(input:checked),
.qcm-proposition.is-selected {
    background: var(--color-primary-soft);

    border-color: var(--color-primary);
}

.qcm-proposition input:checked + .qcm-texte,
.qcm-proposition.is-selected .qcm-texte {
    color: var(--color-primary);

    font-weight: 700;
}

/* ==========================================================================
   États après validation
   Ces règles prennent le pas sur l’état de sélection rouge.
   ========================================================================== */

/* Bonne réponse */

.qcm-proposition.bonne,
.qcm-proposition.bonne:has(input:checked) {
    background: var(--color-success-background);
    color: var(--color-text);

    border-color: var(--color-success);

    font-weight: 700;
}

/* Mauvaise réponse sélectionnée */

.qcm-proposition.mauvaise,
.qcm-proposition.mauvaise:has(input:checked) {
    background: var(--color-error-background);
    color: var(--color-text);

    border-color: var(--color-error);
}

/* Le texte reprend sa couleur normale après validation */

.qcm-proposition.bonne .qcm-texte,
.qcm-proposition.mauvaise .qcm-texte,
.qcm-proposition.bonne input:checked + .qcm-texte,
.qcm-proposition.mauvaise input:checked + .qcm-texte {
    color: var(--color-text);
}

/* Marques visuelles de correction */

.qcm-marque-correction {
    margin-left: var(--space-1);

    font-weight: 800;
}

.qcm-proposition.bonne .qcm-marque-correction {
    color: var(--color-success);
}

.qcm-proposition.mauvaise .qcm-marque-correction {
    color: var(--color-error);
}

/* ==========================================================================
   REMISE EN ORDRE
   ========================================================================== */

.remise-ordre-progression {
    margin-bottom: var(--space-3);

    color: var(--color-text-secondary);
}

.remise-ordre-titre {
    margin: var(--space-5) 0 var(--space-4);

    color: var(--color-text);
}

.remise-ordre-liste {
    display: grid;

    gap: var(--space-3);

    margin: var(--space-5) 0;

    padding-left: 2rem;
}

.remise-ordre-element {
    padding: var(--space-4);

    background: var(--color-surface);

    color: var(--color-text);

    border: 1px solid var(--color-control-border);

    border-radius: var(--radius-medium);

    box-shadow: var(--shadow-low);
}

.remise-ordre-texte {
    display: block;

    margin-bottom: var(--space-3);

    line-height: 1.55;
}

.remise-ordre-commandes {
    display: flex;
    flex-wrap: wrap;

    gap: var(--space-2);
}

.remise-ordre-commandes .mimir-button {
    min-width: 8rem;
}

.remise-ordre-deplacement {
    position: relative;

    overflow: hidden;

    box-shadow: var(--shadow-low);

    transition:
        background-color var(--transition-fast),
        border-color var(--transition-fast),
        color var(--transition-fast),
        box-shadow var(--transition-fast);
}

.remise-ordre-deplacement::before {
    content: "";

    position: absolute;
    inset: 0 auto 0 0;

    width: 0.28rem;

    background: var(--color-primary);

    transform: scaleY(0);
    transform-origin: center;

    transition: transform var(--transition-fast);
}

.remise-ordre-deplacement:hover:not(:disabled),
.remise-ordre-deplacement:focus-visible:not(:disabled) {
    background: var(--color-card-hover);
    border-color: var(--color-primary);
    box-shadow: var(--shadow-medium);
}

.remise-ordre-deplacement:hover:not(:disabled)::before,
.remise-ordre-deplacement:focus-visible:not(:disabled)::before {
    transform: scaleY(1);
}

.remise-ordre-deplacement:focus-visible:not(:disabled) {
    box-shadow: var(--focus-ring), var(--shadow-medium);
}

.remise-ordre-deplacement:active:not(:disabled) {
    background: var(--color-surface-active);
    box-shadow: var(--shadow-low);
}

.remise-ordre-resultat {
    margin: var(--space-4) 0;

    font-weight: 700;
}

.remise-ordre-resultat.correct {
    color: var(--color-success);
}

.remise-ordre-resultat.incorrect {
    color: var(--color-error);
}

@media (max-width: 32rem) {
    .remise-ordre-liste {
        padding-left: 1.5rem;
    }

    .remise-ordre-commandes {
        flex-direction: column;
    }

    .remise-ordre-commandes .mimir-button {
        width: 100%;

        min-width: 0;
    }
}

/* ==========================================================================
   VRAI / FAUX
   ========================================================================== */

.vrai-faux-progression {
    margin-bottom: var(--space-3);

    color: var(--color-text-secondary);
}

.vrai-faux-enonce {
    margin: var(--space-5) 0;

    color: var(--color-text);

    line-height: 1.45;
}

.vrai-faux-enonce:focus {
    outline: none;
}

.vrai-faux-choix:has(input:focus-visible) {
    box-shadow: var(--focus-ring);
}

.vrai-faux-formulaire {
    display: grid;

    gap: var(--space-3);

    margin-bottom: var(--space-4);
}

.vrai-faux-choix {
    position: relative;

    display: flex;
    align-items: center;

    gap: var(--space-3);

    min-height: var(--touch-target-min);

    padding: var(--space-4);

    overflow: hidden;

    background: var(--color-surface);

    color: var(--color-text);

    border: 2px solid var(--color-control-border);

    border-radius: var(--radius-medium);

    cursor: pointer;
    touch-action: manipulation;
    user-select: none;

    transition:
        background-color var(--transition-fast),
        border-color var(--transition-fast),
        box-shadow var(--transition-fast);
}

.vrai-faux-choix::before {
    content: "";

    position: absolute;
    inset: 0 auto 0 0;

    width: 0.28rem;

    background: var(--color-primary);

    transform: scaleY(0);
    transform-origin: center;

    pointer-events: none;

    transition: transform var(--transition-fast);
}

.vrai-faux-choix:not(.correct):not(.incorrect):hover::before,
.vrai-faux-choix:not(.correct):not(.incorrect):has(input:focus-visible)::before,
.vrai-faux-choix:not(.correct):not(.incorrect):has(input:checked)::before {
    transform: scaleY(1);
}

.vrai-faux-choix:not(.correct):not(.incorrect):hover {
    background: var(--color-card-hover);
    border-color: var(--color-primary);
    box-shadow: var(--shadow-medium);
}

.vrai-faux-choix:not(.correct):not(.incorrect):has(input:focus-visible) {
    background: var(--color-card-hover);
    border-color: var(--color-primary);
    box-shadow: var(--focus-ring), var(--shadow-medium);
}

.vrai-faux-choix input {
    flex: 0 0 auto;

    width: 1.25rem;

    height: 1.25rem;

    accent-color: var(--color-primary);

    cursor: pointer;
}

.vrai-faux-texte {
    flex: 1;

    line-height: 1.5;
}

.vrai-faux-choix:has(input:checked),
.vrai-faux-choix.is-selected {
    background: var(--color-primary-soft);

    border-color: var(--color-primary);
}

.vrai-faux-choix.correct,
.vrai-faux-choix.correct:has(input:checked) {
    background: var(--color-success-background);

    border-color: var(--color-success);
}

.vrai-faux-choix.incorrect,
.vrai-faux-choix.incorrect:has(input:checked) {
    background: var(--color-error-background);

    border-color: var(--color-error);
}

.vrai-faux-choix.correct .vrai-faux-marque {
    color: var(--color-success);
}

.vrai-faux-choix.incorrect .vrai-faux-marque {
    color: var(--color-error);
}

.vrai-faux-marque {
    font-weight: 800;
}

.vrai-faux-resultat {
    margin: var(--space-4) 0;

    font-weight: 700;
}

.vrai-faux-resultat.correct {
    color: var(--color-success);
}

.vrai-faux-resultat.incorrect {
    color: var(--color-error);
}

@media (max-width: 760px) {
    .texte-trou {
        width: min(14rem, 100%);
    }
}

/* ==========================================================================
   ASSOCIATION MULTI-PAGES
   ========================================================================== */

.association-liste {
    display: grid;
    gap: var(--space-4);

    margin-block: var(--space-4);
}

.association-ligne {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(14rem, 1fr);
    gap: var(--space-4);
    align-items: center;

    padding: var(--space-4);

    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-medium);
}

.association-ligne .association-select {
    width: 100%;
    margin: 0;
}

.association-resultat {
    display: block;

    margin-top: var(--space-2);
    margin-left: 0;

    font-weight: 700;
}

@media (max-width: 48rem) {
    .association-ligne {
        grid-template-columns: 1fr;
        gap: var(--space-2);
    }
}

.association-ligne > .association-resultat {
    grid-column: 2;
}

@media (max-width: 48rem) {
    .association-ligne > .association-resultat {
        grid-column: 1;
    }
}

/* ======================================================
   REPÉRAGE
   ====================================================== */

.reperage-description {
    text-align: center;
}

.reperage-cartes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(17.8125rem, 1fr));
    gap: var(--space-5);
}

.reperage-cartes .carte {
    margin: 0;
}

.reperage-support {
    margin: var(--space-5) 0;
}

.reperage-support__titre {
    margin-bottom: var(--space-2);
}

.reperage-support__meta {
    margin: 0 0 var(--space-4);
    color: var(--color-text-secondary);
    font-style: italic;
}

.reperage-aides {
    margin: var(--space-5) 0;
    padding: var(--space-4) var(--space-5);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-medium);
    background: var(--color-surface);
}

.reperage-aides > summary {
    cursor: pointer;
    font-weight: 700;
}

.reperage-aides__liste {
    margin-bottom: 0;
}

.reperage-selection-notions,
.reperage-reponse {
    display: grid;
    gap: var(--space-4);
}

.reperage-selection-notions__resume {
    margin-top: var(--space-4);
}

.reperage-formulaire {
    margin-top: var(--space-5);
}

.reperage-reponse__label {
    font-weight: 700;
}

.reperage-reponse__champ {
    min-height: 8rem;
}

@media (max-width: 760px) {
    .reperage-cartes {
        grid-template-columns: 1fr;
    }
}

/* ======================================================
   MÉMORISER
   ====================================================== */

.memoriser-resume {
    display: grid;
    gap: var(--space-3);
    margin: var(--space-5) 0;
    padding: var(--space-5);

    background: var(--color-card-hover);

    border: 1px solid var(--color-primary);
    border-radius: var(--radius-medium);
    box-shadow: var(--shadow-low);
}

.memoriser-resume p {
    margin: 0;
}

.memoriser-paquets {
    display: grid;
    gap: var(--space-3);
    margin: var(--space-5) 0;
}

.memoriser-paquets h3 {
    margin: 0;
}