/*
 * Composants du Paramétrage, relevés dans le fichier de référence
 * « docs/Portail SIGES-ETFP.standalone-src.dc.html » (écran « Paramétrage
 * initial », lignes 945–1011).
 *
 * ⚠️ **Rien n'est inventé ici.** Chaque valeur — rayon, retrait, taille, teinte
 * — vient de cet écran. Le fichier de référence porte ses styles en ligne,
 * littéral par littéral : les nommer en composants est ce qui permet de les
 * réutiliser sur les écrans suivants sans les recopier, et de les corriger en
 * un seul endroit.
 *
 * ⚠️ **Aucune couleur littérale.** Les teintes du référentiel ont été ajoutées
 * à `tokens.css` ; les réécrire ici ferait diverger les deux fichiers au
 * premier ajustement.
 */

/* ------------------------------------------------- Pastille d'état de page */

/*
 * « Paramétrage terminé » / « Paramétrage incomplet », à droite du titre.
 *
 * ⚠️ **Deux états, jamais un seul.** Une pastille qui n'apparaîtrait qu'une
 * fois le paramétrage complet laisserait l'utilisateur sans repère tant qu'il
 * ne l'est pas — c'est-à-dire précisément au moment où il en a besoin.
 */
.statut-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 700;
    border-radius: 99px;
    padding: 8px 15px;
    border: 1px solid transparent;
    white-space: nowrap;
}

.statut-pill--ok {
    color: var(--c-succes);
    background: var(--c-succes-surface);
    border-color: var(--c-succes-bordure);
}

.statut-pill--attente {
    color: var(--c-alerte);
    background: var(--c-alerte-surface);
    border-color: var(--c-alerte-bordure);
}

/* ------------------------------------------------------------- Bandeaux */

.bandeau {
    display: flex;
    gap: 11px;
    align-items: flex-start;
    border-radius: 14px;
    padding: 14px 18px;
    border: 1px solid transparent;
    font-size: 12.5px;
    line-height: 1.5;
}

.bandeau svg {
    flex-shrink: 0;
    margin-top: 1px;
}

.bandeau--info {
    background: var(--c-info-surface);
    border-color: var(--c-info-bordure);
    color: var(--c-info-texte);
}

.bandeau--info strong {
    color: var(--c-info-texte-fort);
    font-weight: 700;
}

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

/*
 * Encadré de renvoi en bas de carte : « l'offre se gère ailleurs ».
 *
 * ⚠️ **Plus discret qu'un bandeau d'information**, à dessein : il n'annonce
 * rien à faire ici, il évite seulement de chercher au mauvais endroit.
 */
.note-renvoi {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    background: var(--c-surface-note);
    border: 1px solid var(--c-surface-grise);
    border-radius: 11px;
    padding: 13px 16px;
    margin-top: 20px;
    font-size: 12.5px;
    color: var(--c-texte-faible);
    line-height: 1.5;
}

.note-renvoi svg {
    flex-shrink: 0;
    margin-top: 1px;
}

.note-renvoi a {
    font-weight: 700;
}

/* ------------------------------------------------- Panneau à deux colonnes */

/*
 * Années scolaires · Sessions.
 *
 * ⚠️ **`auto-fit` + `minmax(280px, 1fr)` : le passage à une colonne est
 * automatique.** Aucune requête média ne décide du moment — c'est la largeur
 * disponible qui le fait, et le comportement reste juste quelle que soit la
 * largeur de la barre latérale ou du navigateur.
 */
.panneau {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 22px;
}

.bloc__tete {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 4px;
    flex-wrap: wrap;
}

.bloc__titre {
    font-family: var(--police-titre);
    font-weight: 700;
    font-size: 15px;
    margin: 0;
    color: var(--c-encre);
}

.bloc__aide {
    font-size: 12.5px;
    color: var(--c-texte-note);
    margin: 0 0 14px;
    line-height: 1.5;
}

/* ------------------------------------------------------- Bouton « Ajouter » */

/*
 * ⚠️ **Une pastille bleue discrète, pas un bouton principal.** Sur cet écran,
 * trois blocs proposent chacun un ajout : trois boutons pleins se seraient
 * disputé l'attention, et aucun n'aurait paru plus important que le titre
 * au-dessus de lui.
 */
.btn-ajout {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--c-bleu);
    background: var(--c-info-surface);
    border: 1px solid var(--c-info-bordure);
    border-radius: 8px;
    padding: 6px 11px;
    text-decoration: none;
    cursor: pointer;
    font-family: inherit;
}

.btn-ajout:hover {
    background: var(--c-info-survol);
    color: var(--c-bleu-fonce);
}

/* ------------------------------------------------------------- Lignes */

.liste-lignes {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ligne {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 13px 16px;
    border: 1px solid var(--c-bordure-app);
    border-radius: 11px;
    background: var(--c-surface);
    flex-wrap: wrap;
}

/*
 * ⚠️ **L'année en cours est mise en valeur par un FOND, pas par une bordure
 * seule.** C'est le contexte de travail de toute l'application : il doit se
 * repérer d'un coup d'œil dans une liste qui peut compter dix années.
 */
.ligne--active {
    background: var(--c-succes-surface);
    border-color: var(--c-succes-bordure);
}

/*
 * Une ligne archivée reste LISIBLE, seulement atténuée. La masquer ferait
 * croire à une suppression, et l'on ne saurait plus comment la rouvrir.
 */
.ligne--archivee .ligne__nom {
    color: var(--c-texte-desactive);
}

.ligne__gauche {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    min-width: 0;
}

.ligne__nom {
    font-size: 14px;
    font-weight: 700;
    color: var(--c-encre);
}

.ligne__meta {
    font-size: 12px;
    color: var(--c-texte-faible);
}

.ligne__actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

/* --------------------------------------------------------------- Puces */

.puce {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .03em;
    text-transform: uppercase;
    border-radius: 99px;
    padding: 4px 10px;
    white-space: nowrap;
}

.puce--ok {
    color: var(--c-succes);
    background: var(--c-succes-badge);
}

.puce--neutre {
    color: var(--c-texte-desactive);
    background: var(--c-surface-grise);
}

.puce--info {
    color: var(--c-bleu);
    background: var(--c-info-surface);
}

/* ------------------------------------------------------- Actions de ligne */

/*
 * Lien d'action en toutes lettres : « Activer », « Désactiver ».
 *
 * ⚠️ **Écrit, pas iconographié.** Activer une année en désactive une autre :
 * une icône seule ne pourrait pas porter une conséquence pareille, et l'on
 * cliquerait pour voir.
 */
.lien-action {
    font-size: 12px;
    font-weight: 700;
    color: var(--c-bleu);
    padding: 0 6px;
    background: none;
    border: 0;
    cursor: pointer;
    font-family: inherit;
    text-decoration: none;
}

.lien-action:hover {
    color: var(--c-bleu-fonce);
}

.lien-action--defaire {
    color: var(--c-bordeaux);
}

.lien-action--defaire:hover {
    color: var(--c-bordeaux-fonce);
}

.lien-action--faire {
    color: var(--c-succes);
}

.lien-action--faire:hover {
    color: var(--c-vert-fonce);
}

/*
 * Action sans objet — « Activer » sur l'année déjà en cours.
 *
 * ⚠️ **Rendue, mais inerte.** La retirer décalerait les deux autres actions de
 * cette seule ligne, et la rangée perdrait le rythme régulier qui fait lire la
 * liste d'un coup d'œil. La laisser cliquable serait pire : un bouton qui ne
 * fait rien se lit comme une panne.
 */
.lien-action.est-inerte {
    color: var(--c-texte-desactive);
    cursor: default;
}

/* Boutons-icônes 28×28, bordés — modifier et supprimer. */
.ico-btn {
    display: inline-flex;
    width: 28px;
    height: 28px;
    align-items: center;
    justify-content: center;
    color: var(--c-texte-mute);
    border: 1px solid var(--c-bordure-app);
    border-radius: 7px;
    background: var(--c-surface);
    cursor: pointer;
    padding: 0;
    text-decoration: none;
}

.ico-btn:hover {
    background: var(--c-surface-survol-froid);
    color: var(--c-encre);
}

.ico-btn--danger {
    color: var(--c-danger);
}

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

/* Variante 26 px, pour l'en-tête d'une carte de type de formation. */
.ico-btn--petit {
    width: 26px;
    height: 26px;
    flex-shrink: 0;
}

/* ------------------------------------------------- Cartes « type de formation » */

.grille-cartes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 14px;
}

.carte-type {
    border: 1px solid var(--c-bordure-app);
    border-radius: 12px;
    padding: 16px 18px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.carte-type__tete {
    display: flex;
    align-items: center;
    gap: 9px;
}

/* Le code (FPI, FPQ, AMB) : court, en évidence, jamais tronqué. */
.carte-type__code {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .03em;
    color: var(--c-bleu);
    background: var(--c-info-surface);
    border: 1px solid var(--c-info-bordure);
    border-radius: 7px;
    padding: 3px 9px;
    flex-shrink: 0;
}

.carte-type__nom {
    font-size: 14px;
    font-weight: 700;
    color: var(--c-encre);
    flex: 1;
    line-height: 1.25;
    min-width: 0;
}

.carte-type__infos {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.carte-type__info {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12.5px;
    color: var(--c-texte-mute);
}

.carte-type__info svg {
    flex-shrink: 0;
}

.carte-type__info strong {
    color: var(--c-texte);
    font-weight: 700;
}

/*
 * Le rythme d'organisation, en pastille.
 *
 * ⚠️ **Deux teintes, et l'écart est voulu.** « Par session » est bleu — c'est
 * le cas qui EXIGE une session à l'ouverture d'une formation ; « par année »
 * reste neutre. Les rendre identiques obligerait à lire le texte pour
 * distinguer les deux comportements.
 */
.carte-type__rythme {
    align-self: flex-start;
}

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

@media (max-width: 560px) {
    /*
     * Sur mobile, les actions passent sous le libellé : à trois boutons et un
     * lien, elles ne tiennent pas sur la même ligne qu'un nom d'année, et le
     * `flex-wrap` les repousserait de toute façon — autant le faire proprement,
     * alignées à gauche.
     */
    .ligne {
        align-items: flex-start;
        flex-direction: column;
        gap: 10px;
    }

    .ligne__actions {
        width: 100%;
    }

    .statut-pill {
        width: 100%;
        justify-content: center;
    }
}

/* =====================================================================
   Offre de formation — Secteur → Filière → Métier

   ⚠️ **Ce bloc n'introduit AUCUNE couleur littérale et aucun composant
   concurrent.** Il prolonge ceux du paramétrage (.carte, .bloc__tete,
   .ligne, .puce, .ico-btn, .btn-ajout, .grille-cartes) avec les seules
   pièces que cet écran ajoute : la pastille d'état, la branche d'un
   secteur, la case à cocher et les pastilles de métier. Une seconde
   famille de composants aurait fait diverger les deux écrans, alors
   qu'ils se suivent dans le même parcours.
   ===================================================================== */

/*
 * Pastille d'état — un point, avant le nom.
 *
 * ⚠️ **Elle DOUBLE la puce « Activé / Désactivé », elle ne la remplace pas.**
 * La couleur seule ne dit rien à qui ne la distingue pas, et l'état décide de
 * ce que le formulaire « Nouvel apprenant » proposera : il doit rester lisible
 * en toutes lettres.
 */
.pastille {
    width: 8px;
    height: 8px;
    border-radius: 99px;
    flex-shrink: 0;
}

.pastille--ok {
    background: var(--c-succes);
}

.pastille--eteinte {
    background: var(--c-bordure-inactive);
}

/* Un secteur fermé reste lisible, sans se disputer l'attention avec les autres. */
.carte-type--eteinte {
    background: var(--c-surface-grise);
    border-color: var(--c-bordure-douce);
}

.carte-type--eteinte .carte-type__nom {
    color: var(--c-texte-desactive);
}

/* ------------------------------------------------ Branche d'un secteur */

.branche {
    border: 1px solid var(--c-bordure-app);
    border-radius: 12px;
    padding: 14px 16px 16px;
    margin-bottom: 14px;
}

.branche:last-child {
    margin-bottom: 0;
}

.branche--eteinte {
    background: var(--c-surface-grise);
}

.branche__tete {
    display: flex;
    align-items: center;
    gap: 9px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

.branche__nom {
    font-family: var(--police-titre);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--c-encre);
}

/* Le bouton « + Filière » est poussé à droite, comme dans les en-têtes de bloc. */
.branche__tete .btn-ajout {
    margin-left: auto;
}

.branche__vide {
    font-size: 12.5px;
    color: var(--c-texte-note);
    margin: 0 0 4px 2px;
    line-height: 1.5;
}

/* La ligne d'une filière est plus compacte que celle d'une année scolaire :
   elle porte ses métiers juste en dessous, et l'ensemble doit se lire comme
   un seul bloc. */
.ligne--branche {
    padding: 10px 13px;
}

.est-eteint {
    color: var(--c-texte-desactive);
    text-decoration: line-through;
}

/* ------------------------------------------------------- Case à cocher */

/*
 * Chaque bascule est un formulaire : sans cela, l'écran demanderait du
 * JavaScript pour enregistrer un simple clic.
 */
.bascule-ligne {
    display: inline-flex;
    margin: 0;
}

.coche {
    width: 19px;
    height: 19px;
    border-radius: 6px;
    border: 1.5px solid var(--c-bordure-champ);
    background: var(--c-surface);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    flex-shrink: 0;
}

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

.coche--ok {
    background: var(--c-vert);
    border-color: var(--c-vert);
}

/* ------------------------------------------------- Pastilles de métier */

.metiers {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin: 8px 0 4px 26px;
}

/*
 * Un métier tient sur une pastille : ils sont nombreux et courts, et une
 * ligne pleine largeur par métier ferait défiler l'écran sur trois hauteurs
 * pour ce qui tient en trois rangées.
 */
.metier {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--c-encre);
    background: var(--c-surface-neutre);
    border: 1px solid var(--c-bordure-douce);
    border-radius: 99px;
    padding: 4px 8px 4px 12px;
    max-width: 100%;
}

.metier__nom {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.metier__code {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .03em;
    color: var(--c-bleu);
    flex-shrink: 0;
}

/*
 * ⚠️ **Éteint = le métier N'EST PAS proposé**, pour l'une des trois raisons
 * de la chaîne : lui-même, sa filière ou son secteur. C'est
 * `Metier::estDisponible()` qui tranche, jamais `actif` seul — sinon un
 * métier coché dans un secteur fermé paraîtrait ouvert.
 */
.metier--eteint {
    background: var(--c-surface-grise);
    border-color: var(--c-bordure-inactive);
}

.metier--eteint .metier__nom {
    color: var(--c-texte-desactive);
}

.metier .coche {
    width: 17px;
    height: 17px;
    border-radius: 99px;
}

@media (max-width: 560px) {
    .metiers {
        margin-left: 0;
    }
}

/* =====================================================================
   Gestion des classes

   ⚠️ Ce bloc n'ajoute que ce qui n'existait nulle part : la jauge
   d'occupation et deux repères de carte. Tout le reste — .carte,
   .grille-cartes, .carte-type, .puce, .ico-btn, .btn-ajout, .tableau —
   vient du paramétrage, de l'offre et de la liste du personnel.
   ===================================================================== */

/*
 * Bandeau de méta d'une carte de classe : niveau, type, état.
 *
 * ⚠️ **Sur sa propre ligne, sous le titre.** Glissées dans l'en-tête à côté
 * du code et du libellé, ces pastilles repoussaient les icônes d'action hors
 * de la carte dès que le libellé dépassait deux mots.
 */
.classe__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: -4px;
}

.classe__lien {
    text-decoration: none;
    color: inherit;
}

/*
 * Titre d'une carte de classe, sur sa propre ligne sous le code.
 *
 * ⚠️ `flex: none` annule le `flex: 1` de `.carte-type__nom` : dans la carte,
 * qui est une colonne, il aurait étiré le titre en HAUTEUR. Et un mot plus
 * large que la carte se coupe au lieu de déborder sur la voisine.
 */
.classe__titre {
    flex: none;
    margin-top: -4px;
    overflow-wrap: anywhere;
}

/* Les actions (modifier, supprimer) collées à droite de l'en-tête. */
.classe__actions {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
    flex-shrink: 0;
}

.classe__lien:hover {
    text-decoration: underline;
}

/*
 * ⚠️ **Un manque se SIGNALE, il ne se tait pas.** Une classe sans formateur
 * est le cas normal à l'ouverture, mais c'est aussi ce qu'il faut corriger
 * avant la rentrée : un tiret neutre ne l'aurait pas distingué d'une salle
 * non renseignée, qui n'appelle aucune action.
 */
.classe__manque {
    color: var(--c-or-fonce);
    font-style: italic;
}

.classe__pied {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    padding-top: 12px;
    border-top: 1px solid var(--c-bordure-app);
}

/* ------------------------------------------------- Jauge d'occupation */

.jauge-bloc {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.jauge-tete {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    font-size: 12.5px;
    color: var(--c-texte-mute);
}

.jauge-tete strong {
    font-family: var(--police-titre);
    font-size: 15px;
    color: var(--c-encre);
}

/*
 * ⚠️ **Le sureffectif se lit sur le RAPPORT, pas sur la barre.** Celle-ci est
 * plafonnée à 100 % — une barre de 130 % sortirait de sa boîte — donc c'est
 * « 31 / 24 » qui doit changer de couleur, sans quoi un dépassement
 * s'afficherait exactement comme une classe tout juste pleine.
 */
.jauge-tete strong.est-complet {
    color: var(--c-bordeaux);
}

.jauge {
    height: 7px;
    border-radius: 99px;
    background: var(--c-surface-grise);
    overflow: hidden;
}

.jauge__barre {
    display: block;
    height: 100%;
    border-radius: 99px;
    background: var(--c-vert);
}

.jauge__barre--plein {
    background: var(--c-bordeaux);
}

.jauge-pied {
    font-size: 12px;
    color: var(--c-texte-note);
    margin: 0;
}

/*
 * ⚠️ **La marge basse que `.champ` traîne depuis la page de connexion
 * désaligne une barre de filtres.** Elle y ajoute 18 px sous chaque champ,
 * que le `align-items: flex-end` du conteneur répercute sur toute la rangée :
 * le bouton « Filtrer » remontait au-dessus des libellés.
 */
.filtres__champ .champ {
    margin-bottom: 0;
}

/* Les actions d'un en-tête de page, quand il en porte plusieurs. */
.page-entete__actions {
    display: flex;
    align-items: center;
    gap: 9px;
    flex-wrap: wrap;
}

/* =====================================================================
   Apprenants — assistant, fil d'étapes, avatars

   ⚠️ Comme pour les classes, ce bloc n'ajoute que ce qui n'existait pas.
   .carte, .bandeau, .puce, .tableau, .grille-kpi, .filtres et le thème de
   formulaire viennent du reste de l'application.
   ===================================================================== */

.lien-retour {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 13px;
    font-weight: 600;
    color: var(--c-texte-mute);
    text-decoration: none;
    margin-bottom: 14px;
}

.lien-retour:hover {
    color: var(--c-encre);
}

/*
 * L'assistant : le fil d'étapes à gauche, le panneau de saisie à droite.
 *
 * ⚠️ **Une grille, pas un flottant.** Le panneau de droite contient une
 * grille de formulaire qui doit pouvoir se réduire : en flottant, ses
 * champs débordaient du conteneur dès que le fil s'allongeait.
 */
.assistant {
    display: grid;
    grid-template-columns: 252px 1fr;
    gap: 20px;
    align-items: start;
}

.assistant__fil {
    background: var(--c-surface);
    border: 1px solid var(--c-bordure-app);
    border-radius: 13px;
    padding: 16px 14px;
    position: sticky;
    top: 16px;
}

.assistant__fil-titre {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--c-texte-mute);
    margin: 0 0 12px 8px;
}

.etapes {
    list-style: none;
    margin: 0 0 16px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.etape__lien {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 9px 10px;
    border-radius: 9px;
    text-decoration: none;
    color: var(--c-encre);
}

.etape__lien:hover {
    background: var(--c-surface-survol-froid);
}

/*
 * ⚠️ **Une étape inatteignable est INERTE, pas masquée.** Sur un dossier
 * neuf, rien n'est encore enregistré : masquer les étapes suivantes aurait
 * caché le parcours entier, et l'on n'aurait pas su combien il en reste.
 */
.etape__lien.est-inerte {
    cursor: default;
    opacity: .55;
}

.etape__rang {
    width: 24px;
    height: 24px;
    border-radius: 99px;
    background: var(--c-surface-grise);
    color: var(--c-texte-mute);
    font-size: 12px;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

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

.etape__titre {
    font-size: 13px;
    font-weight: 700;
    line-height: 1.2;
}

.etape__sous-titre {
    font-size: 11.5px;
    color: var(--c-texte-mute);
}

.etape--courante .etape__lien {
    background: var(--c-info-surface);
}

.etape--courante .etape__rang {
    background: var(--c-bleu);
    color: #fff;
}

.etape--courante .etape__titre {
    color: var(--c-bleu-fonce);
}

/* Une étape déjà franchie garde un repère : on sait ce qui reste. */
.etape--faite .etape__rang {
    background: var(--c-succes-badge);
    color: var(--c-succes);
}

.completude {
    border-top: 1px solid var(--c-bordure-app);
    padding-top: 12px;
    margin: 0 8px;
}

.completude__tete {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    font-size: 12px;
    color: var(--c-texte-mute);
    margin-bottom: 6px;
}

.completude__tete strong {
    color: var(--c-vert-fonce);
    font-size: 13px;
}

.assistant__tete {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 16px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--c-bordure-app);
}

.assistant__icone {
    width: 34px;
    height: 34px;
    border-radius: 9px;
    background: var(--c-info-surface);
    color: var(--c-bleu);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.assistant__tete .carte__titre {
    margin-bottom: 2px;
}

/*
 * ⚠️ **Le pied porte le « Précédent » à gauche et les deux actions à
 * droite**, comme la maquette. Groupés, « Enregistrer le brouillon » et
 * « Suivant » se seraient disputé le même geste, et l'on aurait quitté
 * l'assistant en croyant avancer.
 */
.assistant__pied {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    padding-top: 16px;
    margin-top: 6px;
    border-top: 1px solid var(--c-bordure-app);
}

.assistant__pied-droite {
    display: flex;
    align-items: center;
    gap: 9px;
    flex-wrap: wrap;
}

.recap__manques {
    margin: 6px 0 0;
    padding-left: 18px;
    line-height: 1.6;
}

/* ------------------------------------------------------------ Avatars */

.avatar {
    width: 32px;
    height: 32px;
    border-radius: 99px;
    background: var(--c-vert-surface);
    color: var(--c-vert-fonce);
    font-size: 12px;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.avatar--grand {
    width: 46px;
    height: 46px;
    font-size: 16px;
}

.ligne-apprenant {
    display: flex;
    align-items: center;
    gap: 10px;
}

.entete-apprenant {
    display: flex;
    align-items: center;
    gap: 14px;
}

/* Les deux teintes de pastille propres au suivi des dossiers. */
.puce--attente {
    color: var(--c-or-fonce);
    background: var(--c-or-surface);
}

.puce--refus {
    color: var(--c-bordeaux);
    background: var(--c-bordeaux-surface);
}

@media (max-width: 900px) {
    /*
     * Sous 900 px, le fil passe au-dessus du panneau : à 252 px de large, il
     * ne laissait plus qu'une colonne de champs illisible.
     */
    .assistant {
        grid-template-columns: 1fr;
    }

    .assistant__fil {
        position: static;
    }

    .etapes {
        flex-direction: row;
        flex-wrap: wrap;
    }
}

/* =====================================================================
   Formulaires longs — grille adaptative et sections titrées

   ⚠️ La grille reprend l'idiome du fichier de référence,
   `repeat(auto-fit, minmax(…px, 1fr))`, employé partout dans ses
   tableaux de bord. Elle s'adapte d'elle-même : trois colonnes sur un
   écran large, deux sur une tablette, une sur un portable, sans une
   seule requête média.
   ===================================================================== */

/*
 * ⚠️ **Un MODIFICATEUR, pas un changement de `.formulaire`.** Les
 * formulaires courts — paramétrage, offre, classe — tiennent en deux
 * colonnes à largeur bornée, et c'est bien ainsi : élargir les aurait
 * étalés sur toute la page pour cinq champs. Seuls les formulaires
 * longs prennent cette grille.
 */
.formulaire--grille {
    max-width: none;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 16px 18px;
}

/*
 * ⚠️ **Dans cette grille, une ligne occupe UNE colonne par défaut.**
 * C'est l'inverse de `.formulaire`, où elle prend la largeur entière :
 * ici les champs sont nombreux et courts, et les empiler aurait produit
 * la colonne interminable que les sections sont censées éviter.
 */
.formulaire--grille .form-ligne {
    grid-column: span 1;
}

.formulaire--grille .form-ligne--pleine,
.formulaire--grille .form-section {
    grid-column: 1 / -1;
}

/* Un champ qui a besoin de place : adresse, observation, besoin. */
.formulaire--grille .form-ligne--large {
    grid-column: span 2;
}

@media (max-width: 720px) {
    .formulaire--grille .form-ligne--large {
        grid-column: 1 / -1;
    }
}

/* ------------------------------------------------- Sections titrées */

/*
 * Un groupe de champs, sous un intertitre.
 *
 * ⚠️ **`<fieldset>` et `<legend>`, pas deux `<div>`.** Le groupement est
 * une information pour les lecteurs d'écran autant que pour l'œil :
 * annoncer « Informations de naissance » avant ses champs évite de
 * parcourir seize libellés sans savoir où l'on est.
 *
 * ⚠️ **Sans bordure ni fond.** Encadrer chaque groupe aurait produit
 * des cartes dans une carte, et l'écran aurait perdu la hiérarchie qu'il
 * cherche à donner. C'est le filet de l'intertitre qui sépare.
 */
.form-section {
    border: 0;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 16px 18px;
}

/* La première section n'a pas besoin d'être repoussée du titre de l'étape. */
.form-section + .form-section {
    margin-top: 10px;
}

.form-section__tete {
    grid-column: 1 / -1;
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--c-bordure-app);
}

.form-section__titre {
    font-family: var(--police-titre);
    font-size: 13px;
    font-weight: 700;
    color: var(--c-encre);
    margin: 0;
}

.form-section__aide {
    font-size: 12px;
    color: var(--c-texte-mute);
    margin: 0;
}

/*
 * Un champ en lecture seule : il se lit, il ne s'édite pas, et l'œil doit
 * le distinguer sans avoir à cliquer dedans pour s'en apercevoir.
 */
.champ[readonly] {
    background: var(--c-surface-grise);
    color: var(--c-texte-mute);
    cursor: default;
}

.champ[readonly]:focus {
    border-color: var(--c-bordure-champ);
    box-shadow: none;
}