/*
 * Châssis de l'espace authentifié : barre latérale, en-tête, tableaux, cartes.
 *
 * Consomme les tokens de tokens.css — aucune couleur littérale ici, aucune
 * redéfinition de variable. Les composants publics (.btn, .champ, .champ-label)
 * vivent dans app.css et sont réutilisés tels quels : les redéfinir ferait
 * diverger la page de connexion du reste de l'application.
 */

/* ------------------------------------------------------------ Châssis */

/*
 * Barre latérale : grille à deux colonnes, la barre fixée en hauteur d'écran.
 *
 * ⚠️ **C'est le menu latéral d'origine, et il est conservé tel quel.** Le
 * fichier de référence propose une barre qui se replie par `flex-wrap` ; ce
 * comportement a été essayé puis écarté. Ce qui a été retenu de la référence
 * vit dans le contenu (cartes, lignes, pastilles), pas dans la navigation :
 * celle-ci garde ses groupes titrés, sa barre d'accent à gauche et son sceau
 * vert.
 */
.erp {
    display: grid;
    grid-template-columns: 252px 1fr;
    min-height: 100vh;
    background: var(--c-fond-app);
}

/*
 * ⚠️ **Collante sur toute la hauteur de l'écran.** La navigation doit rester
 * atteignable au milieu d'une longue liste d'agents : la faire défiler avec le
 * contenu obligerait à remonter en haut de page pour changer de module.
 */
.erp__lateral {
    background: var(--c-sombre);
    color: var(--c-sombre-texte);
    display: flex;
    flex-direction: column;
    gap: 22px;
    padding: 22px 16px;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
}

.erp__marque {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--c-surface);
    text-decoration: none;
    padding: 0 6px;
}

/* Sceau vert : l'identité institutionnelle du METFP. */
.erp__marque-sceau {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 11px;
    background: var(--grad-vert);
    color: var(--c-surface);
    flex: none;
}

.erp__marque-nom {
    font-family: var(--police-titre);
    font-weight: 700;
    font-size: 1.05rem;
    letter-spacing: .01em;
}

.erp__marque-tutelle {
    display: block;
    font-size: .68rem;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--c-sombre-mute);
}

/*
 * Titre de groupe : « Pilotage », « Établissement », « Pédagogie »…
 *
 * ⚠️ **Les groupes ne sont pas décoratifs.** Huit entrées à la file se
 * parcourent en lisant chaque libellé ; groupées par domaine, elles se
 * retrouvent par l'endroit où l'on sait qu'elles sont.
 */
.erp__groupe-titre {
    font-size: .66rem;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--c-sombre-mute);
    padding: 0 8px;
    margin-bottom: 7px;
}

.erp__nav {
    display: flex;
    flex-direction: column;
    gap: 3px;
    margin-bottom: 16px;
}

.erp__lien {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 10px;
    border-radius: 9px;
    color: var(--c-sombre-texte);
    text-decoration: none;
    font-size: .875rem;
    font-weight: 500;
    border-left: 3px solid transparent;
}

.erp__lien:hover {
    background: rgba(255, 255, 255, .06);
    color: var(--c-surface);
}

/*
 * L'item actif est surligné bleu, avec une barre d'accent à gauche.
 *
 * ⚠️ **La barre est posée sur TOUS les items, en transparent.** Sans elle, le
 * seul item actif gagnerait trois pixels de retrait et toute la liste se
 * décalerait au changement de page.
 */
.erp__lien.est-actif {
    background: rgba(31, 111, 168, .22);
    border-left-color: var(--c-bleu-clair);
    color: var(--c-surface);
}

/*
 * Pied de barre : Profil et Deconnexion, puis la mention d'assistance.
 *
 * ATTENTION : il porte desormais des DESTINATIONS, pas seulement du texte.
 * C'est pourquoi la taille de police est descendue sur .erp__assistance :
 * appliquee au conteneur, elle rapetissait les deux liens et les faisait
 * sortir du vocabulaire des autres entrees de menu.
 */
.erp__pied-lateral {
    margin-top: auto;
    border-top: 1px solid rgba(255, 255, 255, .09);
    padding-top: 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.erp__nav--compte {
    margin-bottom: 0;
}

.erp__assistance {
    margin: 0;
    padding: 0 8px;
    font-size: .73rem;
    line-height: 1.45;
    color: var(--c-sombre-mute);
}

/* La sortie vire au rouge au survol : c'est la seule action irreversible du menu. */
.erp__lien--sortie:hover {
    background: rgba(192, 57, 43, .18);
    color: var(--c-surface);
}

/* --------------------------------------------------------- Zone droite */

.erp__corps {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.erp__entete {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px clamp(18px, 3vw, 34px);
    background: var(--c-surface);
    border-bottom: 1px solid var(--c-bordure-app);
    flex-wrap: wrap;
}

/*
 * En-tête du fichier de référence : à gauche l'ÉTABLISSEMENT et son contexte,
 * à droite la recherche et l'avatar.
 *
 * ⚠️ **C'est l'établissement qui est nommé, pas l'utilisateur.** L'écran
 * répond d'abord à « où suis-je ? » — le périmètre dans lequel tout ce que je
 * vais saisir sera enregistré. L'identité du compte, elle, se lit dans
 * l'avatar et dans la barre latérale.
 */
.erp__lieu {
    line-height: 1.2;
    min-width: 0;
}

.erp__lieu-nom {
    font-family: var(--police-titre);
    font-weight: 700;
    font-size: 18px;
    color: var(--c-encre);
}

.erp__lieu-contexte {
    font-size: 12.5px;
    color: var(--c-texte-faible);
}

.erp__outils {
    display: flex;
    align-items: center;
    gap: 12px;
}

.erp__recherche {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--c-surface-recherche);
    border: 1px solid var(--c-bordure-douce);
    border-radius: 9px;
    padding: 8px 12px;
    color: var(--c-texte-faible);
    font-size: 13px;
    font-family: inherit;
    min-width: 0;
}

.erp__recherche input {
    border: 0;
    background: transparent;
    font: inherit;
    color: var(--c-encre);
    outline: none;
    width: 15ch;
    min-width: 0;
}

.erp__avatar {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 999px;
    background: var(--c-bleu);
    color: var(--c-surface);
    font-weight: 700;
    font-size: 14px;
    flex: none;
    text-decoration: none;
}

.erp__avatar:hover {
    background: var(--c-bleu-fonce);
    color: var(--c-surface);
}

.erp__main {
    flex: 1;
    padding: clamp(18px, 3vw, 30px);
    display: flex;
    flex-direction: column;
    gap: 20px;
    min-width: 0;
}

/* ------------------------------------------------------- Titre de page */

.page-titre {
    margin: 0 0 4px;
    font-family: var(--police-titre);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--c-encre);
}

.page-sous-titre {
    margin: 0 0 20px;
    color: var(--c-texte-mute);
    font-size: .9rem;
}

/*
 * `flex-end` : l'action de droite s'aligne sur la LIGNE DE BASE du bloc de
 * titre, pas sur son sommet. C'est la mise en page du fichier de référence, et
 * elle évite qu'un bouton flotte au-dessus d'un titre de deux lignes.
 */
.page-entete {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
}

/* ------------------------------------------------------------ Cartes */

.carte {
    background: var(--c-surface);
    border: 1px solid var(--c-bordure-app);
    border-radius: 14px;
    padding: 22px 24px;
}

/*
 * ⚠️ **Aucune marge entre deux cartes.** L'espacement vient du `gap: 20px` de
 * `.erp__main`, comme dans le fichier de référence : une marge ajoutée ici s'y
 * additionnerait, et l'écart entre deux cartes cesserait de valoir celui entre
 * le bandeau et la première.
 */
.carte__titre {
    margin: 0 0 14px;
    font-family: var(--police-titre);
    font-size: 15px;
    font-weight: 700;
    color: var(--c-encre);
}

.grille-kpi {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(178px, 1fr));
    gap: 14px;
    margin-bottom: 20px;
}

.kpi {
    background: var(--c-surface);
    border: 1px solid var(--c-bordure-app);
    border-radius: 13px;
    padding: 15px 17px;
}

.kpi__valeur {
    font-family: var(--police-titre);
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--c-vert-fonce);
    line-height: 1.1;
}

.kpi__libelle {
    font-size: .78rem;
    color: var(--c-texte-mute);
    text-transform: uppercase;
    letter-spacing: .06em;
    margin-top: 3px;
}

/* ----------------------------------------------------------- Tableaux */

.tableau-enveloppe {
    overflow-x: auto;
    border: 1px solid var(--c-bordure-app);
    border-radius: 13px;
    background: var(--c-surface);
}

.tableau {
    width: 100%;
    border-collapse: collapse;
    font-size: .86rem;
}

.tableau th {
    text-align: left;
    padding: 11px 14px;
    background: var(--c-fond-app);
    border-bottom: 1px solid var(--c-bordure-app);
    font-size: .72rem;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--c-texte-mute);
    white-space: nowrap;
}

.tableau td {
    padding: 11px 14px;
    border-bottom: 1px solid var(--c-bordure-douce);
    vertical-align: top;
}

.tableau tbody tr:last-child td {
    border-bottom: none;
}

.tableau tbody tr:hover {
    background: var(--c-bleu-surface-alt);
}

.tableau__principal {
    font-weight: 600;
    color: var(--c-encre);
}

.tableau__secondaire {
    display: block;
    font-size: .78rem;
    color: var(--c-texte-mute);
}

.tableau__vide {
    padding: 34px 18px;
    text-align: center;
    color: var(--c-texte-mute);
}

/* ------------------------------------------------------------ Badges */

.badge {
    display: inline-block;
    padding: 2px 9px;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 600;
    white-space: nowrap;
    border: 1px solid transparent;
}

.badge--vert {
    background: var(--c-vert-surface);
    color: var(--c-vert-fonce);
    border-color: var(--c-vert-bordure);
}

.badge--bleu {
    background: var(--c-bleu-surface-alt);
    color: var(--c-bleu-fonce);
    border-color: var(--c-bleu-bordure);
}

.badge--or {
    background: var(--c-or-surface);
    color: var(--c-or-fonce);
    border-color: var(--c-or-bordure);
}

.badge--bordeaux {
    background: var(--c-bordeaux-surface);
    color: var(--c-bordeaux-fonce);
    border-color: var(--c-bordeaux-bordure);
}

.badge--gris {
    background: var(--c-surface-grise);
    color: var(--c-texte-gris);
    border-color: var(--c-bordure-inactive);
}

/* ------------------------------------------------------------ Filtres */

.filtres {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: flex-end;
    margin-bottom: 16px;
}

.filtres__champ {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 160px;
}

.filtres__label {
    font-size: .72rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--c-texte-mute);
    font-weight: 600;
}

/* ------------------------------------------------- Boutons secondaires */

.btn-secondaire {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 15px;
    border-radius: 9px;
    border: 1px solid var(--c-bordure-app);
    background: var(--c-surface);
    color: var(--c-encre);
    font-size: .85rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    font-family: inherit;
}

.btn-secondaire:hover {
    border-color: var(--c-bleu-bordure);
    color: var(--c-bleu-fonce);
}

.btn-danger {
    border-color: var(--c-bordeaux-bordure);
    color: var(--c-bordeaux);
}

.btn-danger:hover {
    background: var(--c-bordeaux-surface);
    color: var(--c-bordeaux-fonce);
}

.actions-ligne {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

/* ------------------------------------------------------------ Messages */

.messages {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 18px;
}

.message {
    border-radius: 11px;
    padding: 12px 15px;
    font-size: .87rem;
    border: 1px solid transparent;
}

.message--succes {
    background: var(--c-vert-surface);
    border-color: var(--c-vert-bordure);
    color: var(--c-vert-fonce);
}

.message--erreur {
    background: var(--c-bordeaux-surface);
    border-color: var(--c-bordeaux-bordure);
    color: var(--c-bordeaux-fonce);
}

.message--info {
    background: var(--c-bleu-surface-alt);
    border-color: var(--c-bleu-bordure);
    color: var(--c-bleu-fonce);
}

/*
 * Message porteur d'un secret (mot de passe provisoire).
 * Volontairement voyant et sans fermeture automatique : il ne sera plus
 * jamais affiché, et se refermer seul le ferait perdre.
 */
.message--secret {
    background: var(--c-or-surface);
    border-color: var(--c-or-bordure);
    color: var(--c-or-fonce);
}

.message__secret-valeur {
    display: inline-block;
    margin: 7px 0 4px;
    padding: 7px 13px;
    border-radius: 8px;
    background: var(--c-surface);
    border: 1px dashed var(--c-or);
    font-family: ui-monospace, "Cascadia Mono", "Segoe UI Mono", monospace;
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: .07em;
    color: var(--c-encre);
    user-select: all;
}

.message__titre {
    font-weight: 700;
    margin-bottom: 2px;
}

/* ------------------------------------------------------- Formulaires */

/*
 * Grille à DEUX colonnes, dont chaque ligne occupe par défaut la largeur
 * entière. Seuls les champs marqués `form-ligne--demi` s'apparient — une date
 * de début et une date de fin se lisent ensemble, et les étaler sur 660 px
 * chacune faisait une colonne interminable. Les formulaires existants, dont
 * aucun champ n'est marqué, gardent exactement la mise en page d'avant.
 */
.formulaire {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 17px 16px;
    max-width: 660px;
}

.formulaire--large {
    max-width: none;
}

.form-ligne {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.form-ligne--demi {
    grid-column: span 1;
}

.form-ligne--pleine {
    grid-column: 1 / -1;
}

/*
 * ⚠️ `.champ` porte une marge basse de 18 px, héritée de la page de connexion
 * qui empile ses champs sans grille. Dans une grille, elle s'ajoute à
 * l'espacement et désaligne les deux colonnes : l'aide d'un champ se
 * retrouvait plus bas que celle de son voisin.
 */
.form-ligne .champ {
    margin-bottom: 0;
}

.form-ligne .champ-label {
    margin-bottom: 6px;
}

.champ-label__requis {
    color: var(--c-bordeaux);
    margin-left: 3px;
    font-weight: 700;
}

.form-ligne--invalide .champ {
    border-color: var(--c-bordeaux);
    background: var(--c-surface);
}

/*
 * Case à cocher : une zone cliquable encadrée, qui tient la case, son libellé
 * et son aide. Rendue comme un champ de saisie, la case paraissait détachée de
 * son libellé et l'aide flottait sans rattachement.
 */
.bascule {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    padding: 12px 14px;
    border: 1px solid var(--c-bordure-champ);
    border-radius: var(--r-md);
    background: var(--c-surface-champ);
    cursor: pointer;
}

.bascule:hover {
    border-color: var(--c-vert);
}

.bascule input[type="checkbox"] {
    width: 17px;
    height: 17px;
    margin: 2px 0 0;
    flex: none;
    accent-color: var(--c-vert);
    cursor: pointer;
}

.bascule__texte {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.bascule__titre {
    font-size: var(--ts-sm);
    font-weight: 700;
    color: var(--c-encre);
}

.bascule .aide {
    margin-top: 4px;
}

/*
 * Pied du formulaire : séparé par un filet, l'action principale à gauche.
 * Collé aux champs, « Créer » se lisait comme un champ de plus.
 */
.formulaire__actions {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    margin-top: 5px;
    padding-top: 16px;
    border-top: 1px solid var(--c-bordure-app);
}

.aide {
    display: block;
    font-size: .78rem;
    line-height: 1.45;
    color: var(--c-texte-mute);
    margin-top: 4px;
}

.erreur-champ {
    font-size: .79rem;
    color: var(--c-bordeaux);
    margin-top: 4px;
}

.erreur-champ ul {
    margin: 0;
    padding-left: 16px;
}

/*
 * Carte d'accueil d'un formulaire : même carte que les listes, avec un en-tête
 * qui rappelle ce que l'écran enregistre.
 */
.carte--formulaire {
    max-width: 700px;
}

.carte__tete {
    margin-bottom: 18px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--c-bordure-app);
}

/* Dans un en-tête de carte, le filet porte déjà la séparation. */
.carte__tete .carte__titre {
    margin-bottom: 0;
}

.carte__aide {
    font-size: .82rem;
    color: var(--c-texte-mute);
    margin-top: 4px;
    line-height: 1.5;
}

/* Sous 720 px, les paires de dates reprennent la largeur entière. */
@media (max-width: 720px) {
    .formulaire {
        grid-template-columns: 1fr;
    }

    .form-ligne--demi {
        grid-column: 1 / -1;
    }
}

/* Grille des droits : une ligne par module, une colonne par action. */
.droits {
    width: 100%;
    border-collapse: collapse;
    font-size: .84rem;
}

.droits th,
.droits td {
    padding: 8px 10px;
    border-bottom: 1px solid var(--c-bordure-app);
    text-align: left;
}

.droits td.droits__case,
.droits th.droits__case {
    text-align: center;
    width: 96px;
}

.droits input[type="checkbox"] {
    width: 17px;
    height: 17px;
    accent-color: var(--c-bleu);
    cursor: pointer;
}

/* La liste native du ChoiceType est masquée : la grille la remplace. */
.droits-source {
    display: none;
}

/* ----------------------------------------------------------- Étroit */

.page-etroite {
    max-width: 520px;
    margin: 42px auto;
}

/*
 * La barre laterale a DEJA bascule en pleine largeur a ce stade : c'est le
 * flex-wrap du chassis qui s'en charge, sans requete media. Il reste a la
 * remettre a plat -- marque, navigation et pied sur une seule rangee.
 *
 * ATTENTION : le pied reste VISIBLE. Il portait autrefois une simple mention
 * d'assistance, il porte maintenant le mot de passe et la DECONNEXION : le
 * masquer sur mobile enfermerait l'utilisateur dans sa session.
 */
/*
 * Sous 900 px, la barre latérale passe à plat au-dessus du contenu.
 *
 * ⚠️ **Le pied de barre est masqué, PAS la navigation.** Il ne porte qu'une
 * mention d'assistance : la place gagnée vaut mieux qu'une ligne de texte de
 * plus au-dessus de chaque écran. Les titres de groupe disparaissent pour la
 * même raison — à plat, ils couperaient la rangée en quatre.
 */
@media (max-width: 900px) {
    .erp {
        grid-template-columns: 1fr;
    }

    .erp__lateral {
        position: static;
        height: auto;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        gap: 12px;
    }

    .erp__nav {
        flex-direction: row;
        flex-wrap: wrap;
        margin-bottom: 0;
    }

    /*
     * ATTENTION : seule la MENTION d'assistance est masquee. Le pied porte
     * maintenant la deconnexion : le cacher enfermerait dans sa session tout
     * utilisateur sur ecran etroit.
     */
    .erp__groupe-titre,
    .erp__assistance {
        display: none;
    }

    .erp__pied-lateral {
        margin-top: 0;
        margin-left: auto;
        padding-top: 0;
        border-top: 0;
    }
}

/* ------------------------------------------- Offre : colonnes en cascade */

/*
 * Trois colonnes Secteur / Filiere / Metier.
 * La selection voyage dans l'URL, pas dans un etat JavaScript : la mise en
 * evidence de la colonne active est donc purement CSS, sur une classe posee
 * par le gabarit.
 */
.colonnes {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    align-items: start;
}

.colonne {
    background: var(--c-surface);
    border: 1px solid var(--c-bordure-app);
    border-radius: 13px;
    overflow: hidden;
    min-width: 0;
}

.colonne__entete {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 11px 14px;
    background: var(--c-fond-app);
    border-bottom: 1px solid var(--c-bordure-app);
}

.colonne__titre {
    font-size: .72rem;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--c-texte-mute);
    font-weight: 700;
    min-width: 0;
}

.colonne__contexte {
    display: block;
    text-transform: none;
    letter-spacing: 0;
    font-size: .78rem;
    font-weight: 600;
    color: var(--c-encre);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.colonne__liste {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 62vh;
    overflow-y: auto;
}

.colonne__item {
    display: flex;
    align-items: center;
    gap: 4px;
    border-bottom: 1px solid var(--c-bordure-douce);
    padding-right: 6px;
}

.colonne__item:last-child {
    border-bottom: none;
}

.colonne__item:hover {
    background: var(--c-bleu-surface-alt);
}

/* L'item selectionne porte la barre bleue, comme la barre laterale. */
.colonne__item.est-actif {
    background: var(--c-bleu-surface-alt);
    box-shadow: inset 3px 0 0 var(--c-bleu);
}

/*
 * Une ligne fermee reste LISIBLE, seulement attenuee : la masquer ferait
 * croire a une suppression, et l'on ne saurait plus comment la rouvrir.
 */
.colonne__item.est-inactif .colonne__nom {
    color: var(--c-texte-desactive);
    text-decoration: line-through;
}

.colonne__lien {
    flex: 1;
    display: block;
    padding: 10px 12px;
    text-decoration: none;
    color: inherit;
    min-width: 0;
}

.colonne__nom {
    display: block;
    font-size: .88rem;
    font-weight: 600;
    color: var(--c-encre);
    overflow-wrap: anywhere;
}

.colonne__meta {
    display: block;
    font-size: .75rem;
    color: var(--c-texte-mute);
    margin-top: 2px;
}

.colonne__outils {
    display: flex;
    align-items: center;
    gap: 2px;
    flex: none;
}

.colonne__action {
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border-radius: 7px;
    border: 1px solid transparent;
    background: transparent;
    color: var(--c-texte-mute);
    text-decoration: none;
    font-size: .95rem;
    line-height: 1;
    cursor: pointer;
    font-family: inherit;
}

.colonne__action:hover {
    border-color: var(--c-bordure-app);
    background: var(--c-surface);
    color: var(--c-bleu-fonce);
}

.colonne__action--danger:hover {
    border-color: var(--c-bordeaux-bordure);
    color: var(--c-bordeaux);
}

.colonne__vide {
    padding: 22px 14px;
    font-size: .82rem;
    color: var(--c-texte-mute);
    text-align: center;
}

@media (max-width: 900px) {
    .colonnes {
        grid-template-columns: 1fr;
    }

    .colonne__liste {
        max-height: none;
    }
}

/* ------------------------------------------- Décisions sur un dossier */
/* Liste des apprenants : valider, rejeter, annuler une inscription. */

.decisions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.decisions form {
    margin: 0;
}

.decision {
    font: inherit;
    font-size: 12.5px;
    font-weight: 700;
    border-radius: 8px;
    padding: 5px 10px;
    border: 1px solid var(--c-bordure-inactive);
    background: var(--c-fond-app);
    color: var(--c-texte-gris);
    cursor: pointer;
}

.decision--validee {
    color: var(--c-vert);
    background: var(--c-vert-surface);
    border-color: var(--c-vert-bordure);
}

.decision--rejetee {
    color: var(--c-bordeaux);
    background: var(--c-bordeaux-surface);
    border-color: var(--c-bordeaux-bordure);
}

.decision:hover {
    filter: brightness(0.96);
}

.decision:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

/* ---------------------------------------------------------- Pagination */

.pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px 16px;
    margin: 14px 0 4px;
}

.pagination__decompte {
    font-size: 13px;
    color: var(--c-texte-gris);
}

.pagination__pages {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.pagination__lien,
.pagination__saut {
    display: inline-flex;
    align-items: center;
    min-width: 34px;
    justify-content: center;
    padding: 6px 10px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
}

.pagination__lien {
    color: var(--c-bleu);
    background: var(--c-surface);
    border: 1px solid var(--c-bordure-app);
}

.pagination__lien:hover {
    background: var(--c-bleu-surface);
}

.pagination__lien.est-actif {
    color: #fff;
    background: var(--c-bleu);
    border-color: var(--c-bleu);
}

.pagination__lien.est-inactif {
    color: var(--c-texte-inactif);
    background: transparent;
    cursor: default;
}

.pagination__saut {
    color: var(--c-texte-gris);
}

/* Pièces du dossier d'un apprenant (fiche, étape 6 de l'assistant). */
.pieces__alerte,
.pieces__complet {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 12px;
    font-size: 13.5px;
    font-weight: 600;
}

.pieces__alerte {
    color: var(--c-or-fonce);
}

.pieces__complet {
    color: var(--c-succes);
}

.pieces__depot {
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid var(--c-bordure-app);
}

.pieces__titre {
    margin: 0 0 4px;
    font-size: 15px;
}

/* Période des moyennes : 1er, 2e, 3e trimestre, année. */
.periodes {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0 0 16px;
}

.periodes__lien {
    display: inline-flex;
    align-items: center;
    padding: 7px 14px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    color: var(--c-bleu);
    background: var(--c-surface);
    border: 1px solid var(--c-bordure-app);
}

.periodes__lien:hover {
    background: var(--c-bleu-surface);
}

.periodes__lien.est-actif {
    color: #fff;
    background: var(--c-bleu);
    border-color: var(--c-bleu);
}

/* Barre de progression de Turbo masquée à la demande. */
.turbo-progress-bar {
    display: none !important;
}