/*
 * Feuille de style unique du site.
 *
 * Servie telle quelle depuis public/ : aucune étape de build, aucun npm sur
 * l'hébergeur, qui peut n'offrir que du FTP et un cPanel. Toute feuille
 * ajoutée doit rester directement servable, sans compilation.
 *
 * Direction : le tableau de service d'un bureau de brigade. Chaque véhicule
 * est une réglette à dos coloré, comme un aimant sur un tableau blanc. Le nom
 * radio prime sur la marque, parce que c'est lui qu'on prononce à la radio.
 */

:root {
    /* Bleus repris du logo Gendarmerie lui-même (#174b92 mesuré dans le
       fichier), pour que le bandeau et la marque parlent la même langue. */
    --bleu-gn: #174b92;
    --bleu-fonce: #0f3468;
    --bleu-encre: #12203f;
    --bleu-pale: #eaf0f9;
    /* Fond du bandeau : bleu très pâle, distinct à la fois du blanc des cartes
       et du gris du fond de page. Assez clair pour que le logo (#174b92) y
       reste lisible à 6,8:1, ce qu'un bleu soutenu ne permettait pas. */
    --bandeau-fond: #dde6f5;

    /* Rouge du logo. Réservé à l'accent tricolore du bandeau : il ne doit
       jamais concurrencer le rouge d'indisponibilité d'un véhicule. */
    --rouge-gn: #da1a1f;

    /* Surfaces */
    --papier: #f3f5fa;
    --blanc: #ffffff;
    --trait: #dce1ec;

    /* Encres */
    --encre: #12203f;
    --acier: #616a80;

    /* États de disponibilité, également distingués par un glyphe :
       la couleur seule ne suffit pas à un daltonien. */
    --present: #17683f;
    --indispo: #a56410;
    --absent: #97202f;

    --spine: 6px;

    --mono: ui-monospace, "SF Mono", "Cascadia Mono", "Segoe UI Mono",
        "Roboto Mono", Menlo, Consolas, monospace;
    --sans: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial,
        sans-serif;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

/*
 * L'attribut hidden doit toujours gagner.
 *
 * La feuille par défaut du navigateur applique display:none aux éléments
 * [hidden], mais c'est une règle d'agent utilisateur : le moindre display
 * déclaré ici l'écrase. Sans ce garde-fou, une carte .reglette (display:flex)
 * masquée par la recherche restait affichée, alors que le filtrage marchait.
 */
[hidden] {
    display: none !important;
}

body {
    margin: 0;
    font-family: var(--sans);
    color: var(--encre);
    background: var(--papier);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

a {
    color: var(--bleu-fonce);
}

:focus-visible {
    outline: 3px solid var(--bleu-gn);
    outline-offset: 2px;
}

/* ───────────────────────── En-tête ─────────────────────────
   Bandeau blanc plutôt que bleu nuit. Le logo Gendarmerie est bleu sur fond
   transparent : sur un fond sombre il fallait le poser sur une plaque blanche,
   rustine visible. Sur fond blanc il s'affiche tel quel, en grand.
   Le filet tricolore en pied de bandeau assume l'identité institutionnelle
   sans avoir besoin d'un aplat de couleur. */

.bandeau {
    background: var(--bandeau-fond);
    color: var(--encre);
    border-bottom: 1px solid rgba(23, 75, 146, 0.18);
    position: relative;
}

/* Filet bleu-blanc-rouge, 3 px, calé en pied de bandeau. */
.bandeau::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 3px;
    background: linear-gradient(
        to right,
        var(--bleu-gn) 0 33.33%,
        var(--blanc) 33.33% 66.66%,
        var(--rouge-gn) 66.66% 100%
    );
}

.bandeau__interieur {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0.85rem 1.25rem;
    display: flex;
    align-items: center;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.marque {
    display: flex;
    align-items: center;
    gap: 1rem;
    text-decoration: none;
    color: inherit;
}

/* Le logo porte lui-même la mention « Gendarmerie nationale » : il lui faut
   une taille où ce texte reste lisible, pas une vignette de 38 px. */
.marque__logo {
    display: block;
    height: 62px;
    width: auto;
    flex-shrink: 0;
}

/* Séparateur vertical entre le logo institutionnel et le nom de l'outil :
   ce sont deux marques distinctes, elles ne doivent pas se confondre. */
.marque__texte {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
    padding-left: 1rem;
    border-left: 1px solid rgba(23, 75, 146, 0.25);
}

.marque__nom {
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--bleu-gn);
}

.marque__sous {
    font-size: 0.72rem;
    letter-spacing: 0.06em;
    color: var(--acier);
    text-transform: uppercase;
}

/* Bouton du menu escamotable. Absent au-dessus de 900 px, où la navigation
   tient sur une ligne. */
.bascule-menu {
    display: none;
    align-items: center;
    gap: 0.5rem;
    margin-left: auto;
    font-family: inherit;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    color: var(--bleu-gn);
    background: var(--blanc);
    border: 1px solid rgba(23, 75, 146, 0.3);
    border-radius: 2px;
    padding: 0.5rem 0.85rem;
    cursor: pointer;
}

.bascule-menu svg {
    width: 20px;
    height: 20px;
    display: block;
}

.bascule-menu[aria-expanded="true"] {
    background: var(--bleu-gn);
    color: var(--blanc);
    border-color: var(--bleu-gn);
}

.navigation {
    display: flex;
    gap: 0.25rem;
    margin-left: auto;
    flex-wrap: wrap;
}

.navigation__lien {
    display: block;
    padding: 0.5rem 0.9rem;
    color: var(--acier);
    text-decoration: none;
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    border-radius: 2px;
    border-bottom: 2px solid transparent;
}

/* Pas d'aplat au survol : sur un fond déjà teinté, il forme une tache.
   La couleur du texte et le filet suffisent à signaler la cible. */
.navigation__lien:hover {
    color: var(--bleu-gn);
    border-bottom-color: rgba(23, 75, 146, 0.35);
}

.navigation__lien[aria-current="page"] {
    color: var(--bleu-gn);
    border-bottom-color: var(--bleu-gn);
}

.page {
    max-width: 1180px;
    margin: 0 auto;
    padding: 2rem 1.25rem 4rem;
}

.titre-page {
    margin: 0 0 0.35rem;
    font-size: 1.9rem;
    font-weight: 700;
    letter-spacing: -0.015em;
}

.chapeau {
    margin: 0 0 2.25rem;
    color: var(--acier);
    font-size: 0.95rem;
}

.chapeau strong {
    color: var(--encre);
    font-weight: 600;
}

.unite {
    margin-bottom: 2.5rem;
}

.unite__entete {
    display: flex;
    align-items: baseline;
    gap: 1rem;
    padding-bottom: 0.6rem;
    margin-bottom: 1.1rem;
    border-bottom: 2px solid var(--bleu-gn);
    flex-wrap: wrap;
}

.unite__nom {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--bleu-gn);
}

.unite__compte {
    font-size: 0.85rem;
    color: var(--acier);
    margin-left: auto;
}

/*
 * Signature de la page : un segment par véhicule, coloré selon son état.
 * Reprend la rangée d'aimants du tableau physique — l'état de l'unité se lit
 * d'un coup d'œil, sans lire une seule carte.
 */
.jauge {
    display: flex;
    gap: 3px;
    align-items: center;
}

.jauge__segment {
    width: 16px;
    height: 8px;
    border-radius: 1px;
    background: var(--trait);
}

.jauge__segment--present {
    background: var(--present);
}

.jauge__segment--indispo {
    background: var(--indispo);
}

.jauge__segment--absent {
    background: var(--absent);
}

.parc {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 0.9rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.reglette {
    position: relative;
    background: var(--blanc);
    border: 1px solid var(--trait);
    border-left: var(--spine) solid var(--acier);
    padding: 0.9rem 1rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

.reglette--present {
    border-left-color: var(--present);
}

.reglette--indispo {
    border-left-color: var(--indispo);
}

.reglette--absent {
    border-left-color: var(--absent);
}

.reglette__haut {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
}

/* Le nom radio domine : c'est l'identifiant opérationnel. */
.reglette__radio {
    font-size: 1.35rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    line-height: 1;
    color: var(--bleu-encre);
}

.reglette__radio--absent-liste {
    color: var(--acier);
    font-weight: 600;
    font-size: 1.05rem;
    letter-spacing: 0.02em;
    text-transform: none;
    font-style: italic;
}

.reglette__numero {
    font-family: var(--mono);
    font-size: 0.8rem;
    color: var(--acier);
    white-space: nowrap;
    padding-top: 0.2rem;
}

.reglette__vehicule {
    font-size: 0.95rem;
    font-weight: 600;
}

.reglette__plaque {
    font-family: var(--mono);
    font-size: 0.85rem;
    letter-spacing: 0.04em;
    color: var(--encre);
    background: var(--papier);
    border: 1px solid var(--trait);
    padding: 0.1rem 0.4rem;
    display: inline-block;
}

.reglette__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem 0.9rem;
    font-size: 0.8rem;
    color: var(--acier);
    margin-top: auto;
    padding-top: 0.5rem;
    border-top: 1px dashed var(--trait);
}

.reglette__km {
    font-family: var(--mono);
}

/* Pastille d'état : glyphe + libellé, jamais la couleur seule. */
.etat {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.etat--present {
    color: var(--present);
}

.etat--indispo {
    color: var(--indispo);
}

.etat--absent {
    color: var(--absent);
}

.etat__glyphe {
    font-size: 0.9em;
}

.motif {
    margin: 0;
    font-size: 0.82rem;
    color: var(--encre);
    background: #fdf6e8;
    border-left: 3px solid var(--indispo);
    padding: 0.35rem 0.55rem;
}

.reglette--absent .motif {
    background: #fbeff1;
    border-left-color: var(--absent);
}

.alerte-revision {
    margin: 0;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--absent);
}

.bouton {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-family: inherit;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    padding: 0.5rem 1rem;
    border: 1px solid var(--bleu-gn);
    background: var(--bleu-gn);
    color: var(--blanc);
    text-decoration: none;
    cursor: pointer;
    border-radius: 2px;
    white-space: nowrap;
}

.bouton:hover {
    background: var(--bleu-fonce);
    border-color: var(--bleu-fonce);
}

.bouton--discret {
    background: transparent;
    color: var(--bleu-gn);
}

.bouton--discret:hover {
    background: rgba(23, 75, 146, 0.08);
    color: var(--bleu-gn);
}

.bouton--danger {
    background: transparent;
    border-color: var(--absent);
    color: var(--absent);
}

.bouton--danger:hover {
    background: var(--absent);
    color: var(--blanc);
    border-color: var(--absent);
}

.bouton--petit {
    font-size: 0.75rem;
    padding: 0.3rem 0.6rem;
}

.barre-titre {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 0.35rem;
}

.barre-titre .titre-page {
    margin-bottom: 0;
}

.actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    align-items: center;
}

.actions--fin {
    margin-top: 1.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--trait);
}

.message {
    padding: 0.75rem 1rem;
    margin-bottom: 1.5rem;
    border-left: 4px solid var(--present);
    background: #eaf5ee;
    font-size: 0.9rem;
    font-weight: 600;
    color: #0f4d2e;
}

.message--erreur {
    border-left-color: var(--absent);
    background: #fbeff1;
    color: #6d1723;
}

/* ───────────────────────── Recherche ─────────────────────────
   Un champ unique et rien d'autre : la loupe à l'intérieur, l'effacement en
   bout de champ, la validation à la touche Entrée. Pas d'étiquette en
   capitales ni de bouton séparé — l'intitulé est porté par l'invite de saisie,
   le label restant dans le DOM pour les lecteurs d'écran. */

.recherche {
    position: relative;
    display: block;
    max-width: 30rem;
    margin-bottom: 1.75rem;
}

.recherche__label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.recherche__icone {
    position: absolute;
    left: 0.8rem;
    top: 50%;
    transform: translateY(-50%);
    width: 17px;
    height: 17px;
    color: var(--acier);
    pointer-events: none;
}

.recherche__saisie {
    width: 100%;
    font-family: inherit;
    font-size: 0.9rem;
    color: var(--encre);
    background: var(--blanc);
    border: 1px solid var(--trait);
    border-radius: 2px;
    padding: 0.6rem 2.6rem 0.6rem 2.45rem;
    appearance: none;
}

.recherche__saisie::-webkit-search-cancel-button {
    display: none;
}

.recherche__saisie::placeholder {
    color: var(--acier);
}

.recherche__saisie:focus {
    outline: none;
    border-color: var(--bleu-gn);
    box-shadow: 0 0 0 3px rgba(23, 75, 146, 0.13);
}

.recherche__effacer {
    position: absolute;
    right: 0.4rem;
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border: 0;
    border-radius: 2px;
    background: transparent;
    color: var(--acier);
    font-size: 1.05rem;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
}

.recherche__effacer:hover {
    background: var(--papier);
    color: var(--encre);
}

.resultat-vide {
    background: var(--blanc);
    border: 1px dashed var(--trait);
    padding: 1.5rem;
    text-align: center;
    color: var(--acier);
    font-size: 0.9rem;
}

/* ───────────────────────── Onglets ─────────────────────────
   Évite les pages interminables : une catégorie visible à la fois.
   Sans JavaScript, tous les panneaux restent affichés — la page reste
   complète, elle est simplement plus longue. */

.onglets__liste {
    display: flex;
    gap: 0.15rem;
    flex-wrap: wrap;
    border-bottom: 2px solid var(--bleu-gn);
    margin-bottom: 1.5rem;
}

.onglet {
    font-family: inherit;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--acier);
    background: transparent;
    border: 1px solid transparent;
    border-bottom: none;
    padding: 0.55rem 1rem;
    cursor: pointer;
    border-radius: 2px 2px 0 0;
    margin-bottom: -2px;
}

.onglet:hover {
    color: var(--bleu-gn);
    background: rgba(23, 75, 146, 0.06);
}

.onglet[aria-selected="true"] {
    color: var(--blanc);
    background: var(--bleu-gn);
    border-color: var(--bleu-gn);
}

.onglet__compte {
    display: inline-block;
    margin-left: 0.45rem;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0;
    opacity: 0.75;
}

.panneau[hidden] {
    display: none;
}

.formulaire {
    background: var(--blanc);
    border: 1px solid var(--trait);
    border-top: 3px solid var(--bleu-gn);
    padding: 1.5rem;
    max-width: 900px;
}

.groupe {
    margin-bottom: 1.75rem;
    border: 0;
    padding: 0;
}

.groupe:last-of-type {
    margin-bottom: 0;
}

.groupe__legende {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--acier);
    padding: 0 0 0.6rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid var(--trait);
    width: 100%;
    display: block;
}

.grille-champs {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem 1.25rem;
}

.champ {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.champ--large {
    grid-column: 1 / -1;
}

.champ__label {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--encre);
}

.champ__obligatoire {
    color: var(--absent);
}

.champ__saisie,
.champ__select,
.champ__zone {
    font-family: inherit;
    font-size: 0.9rem;
    color: var(--encre);
    background: var(--blanc);
    border: 1px solid var(--acier);
    border-radius: 2px;
    padding: 0.5rem 0.6rem;
    width: 100%;
}

.champ__zone {
    min-height: 5rem;
    resize: vertical;
}

.champ__saisie:focus,
.champ__select:focus,
.champ__zone:focus {
    outline: none;
    border-color: var(--bleu-fonce);
    box-shadow: 0 0 0 3px rgba(23, 75, 146, 0.13);
}

.champ__saisie--code {
    font-family: var(--mono);
    letter-spacing: 0.04em;
}

.champ__aide {
    font-size: 0.75rem;
    color: var(--acier);
}

.champ__erreur {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--absent);
}

.champ--invalide .champ__saisie,
.champ--invalide .champ__select,
.champ--invalide .champ__zone {
    border-color: var(--absent);
    border-width: 2px;
}

.case {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
    font-size: 0.88rem;
    padding: 0.35rem 0;
    cursor: pointer;
}

.case input[type="checkbox"] {
    width: 1.05rem;
    height: 1.05rem;
    margin: 0.1rem 0 0;
    accent-color: var(--bleu-gn);
    flex-shrink: 0;
}

.case__texte {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.case__aide {
    font-size: 0.75rem;
    color: var(--acier);
}

/* Liste de matériel du bordereau : case + champ d'identifiant révélé. */
.checklist {
    display: flex;
    flex-direction: column;
    list-style: none;
    margin: 0;
    padding: 0;
    border: 1px solid var(--trait);
}

.checklist__ligne {
    border-bottom: 1px solid var(--papier);
    padding: 0.45rem 0.8rem;
}

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

.checklist__identifiant {
    margin: 0.4rem 0 0.2rem 1.6rem;
    max-width: 22rem;
}

.checklist__identifiant[hidden] {
    display: none;
}

/* Ligne de création de matériel : désignation souple, quantité étroite, retrait
   réduit à sa croix.

   Pas `.grille-champs` ici : ses colonnes de 220 px donnaient une pleine colonne
   au bouton et rejetaient la désignation sur sa propre ligne. Le flex aligne sur
   `flex-end`, donc la croix se pose au niveau des champs et non de leurs
   étiquettes. */
.ligne-materiel {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.6rem 0.75rem;
}

.ligne-materiel + .ligne-materiel {
    margin-top: 0.7rem;
}

.ligne-materiel__designation {
    flex: 1 1 16rem;
    min-width: 0;
}

.ligne-materiel__quantite {
    flex: 0 0 6.5rem;
}

.ligne-materiel__retrait {
    flex: 0 0 auto;
    width: 2.1rem;
    height: 2.1rem;
    padding: 0;
    font-size: 1.1rem;
    line-height: 1;
    color: var(--acier);
    background: none;
    border: 1px solid var(--trait);
    border-radius: 2px;
    cursor: pointer;
}

.ligne-materiel__retrait:hover {
    color: var(--absent);
    border-color: var(--absent);
}

.ligne-materiel__ajout {
    margin-top: 0.9rem;
}

/* Quantité propre à chaque ligne cochée : un mouvement peut emporter 2 gilets
   et 12 cônes, ce qu'un champ unique partagé ne savait pas dire. */
.checklist__quantite {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0.4rem 0 0.2rem 1.6rem;
    font-size: 0.8rem;
    color: var(--acier);
}

.checklist__quantite input {
    width: 5.5rem;
}

.recapitulatif {
    background: var(--papier);
    border: 1px solid var(--trait);
    padding: 1rem 1.15rem;
    font-size: 0.88rem;
}

.recapitulatif dl {
    margin: 0;
    display: grid;
    grid-template-columns: minmax(9rem, auto) 1fr;
    gap: 0.4rem 1rem;
}

.recapitulatif dt {
    color: var(--acier);
    font-size: 0.8rem;
}

.recapitulatif dd {
    margin: 0;
    font-weight: 600;
}

/* ───────────────────────── Registres ─────────────────────────
   Tables denses, dans la veine du registre papier : filets fins,
   en-têtes en petites capitales, données alignées en monospace. */

.bloc {
    margin-bottom: 2.5rem;
}

.bloc__entete {
    display: flex;
    align-items: baseline;
    gap: 1rem;
    padding-bottom: 0.6rem;
    margin-bottom: 1.1rem;
    border-bottom: 2px solid var(--bleu-gn);
    flex-wrap: wrap;
}

.bloc__titre {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--bleu-gn);
}

.bloc__compte {
    font-size: 0.85rem;
    color: var(--acier);
    margin-left: auto;
}

.registre-boite {
    overflow-x: auto;
    background: var(--blanc);
    border: 1px solid var(--trait);
}

.registre {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}

.registre th {
    text-align: left;
    font-size: 0.7rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--acier);
    font-weight: 700;
    padding: 0.6rem 0.85rem;
    border-bottom: 1px solid var(--trait);
    white-space: nowrap;
}

.registre td {
    padding: 0.65rem 0.85rem;
    border-bottom: 1px solid var(--papier);
    vertical-align: top;
}

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

.registre__code {
    font-family: var(--mono);
    font-size: 0.82rem;
}

.registre__principal {
    font-weight: 600;
}

.registre__discret {
    color: var(--acier);
}

.etiquette {
    display: inline-block;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    padding: 0.15rem 0.45rem;
    border: 1px solid currentColor;
    color: var(--acier);
    white-space: nowrap;
}

.etiquette--alerte {
    color: var(--absent);
}

.etiquette--attente {
    color: var(--indispo);
}

.etiquette--ok {
    color: var(--present);
}

.colonnes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1.25rem;
}

.fiche {
    background: var(--blanc);
    border: 1px solid var(--trait);
    border-top: 3px solid var(--bleu-gn);
    padding: 1rem 1.15rem 1.15rem;
}

.fiche__titre {
    margin: 0 0 0.15rem;
    font-size: 0.95rem;
    font-weight: 700;
}

.fiche__sous {
    margin: 0 0 0.85rem;
    font-size: 0.78rem;
    color: var(--acier);
}

.fiche__liste {
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 0.85rem;
}

.fiche__liste li {
    padding: 0.3rem 0;
    border-bottom: 1px solid var(--papier);
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
}

.fiche__liste li:last-child {
    border-bottom: none;
}

.marqueur-identifiant {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--bleu-gn);
    white-space: nowrap;
}

/*
 * Inventaire replié d'une fiche militaire.
 *
 * Déroulé, il fait jusqu'à 11 lignes par fiche, soit ~4 000 px de page pour un
 * effectif de 35. Le repli tient la page en un écran et demi sans rien retirer
 * du DOM, ce qui laisse la recherche travailler sur la totalité de l'effectif.
 */
.fiche__inventaire {
    margin-bottom: 0.85rem;
}

.fiche__inventaire-resume {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.35rem 0;
    font-size: 0.78rem;
    color: var(--acier);
    cursor: pointer;
    user-select: none;
    border-bottom: 1px solid var(--papier);
}

.fiche__inventaire-resume::marker,
.fiche__inventaire-resume::-webkit-details-marker {
    color: var(--bleu-gn);
}

.fiche__inventaire-resume:hover {
    color: var(--bleu-gn);
}

.fiche__inventaire[open] .fiche__inventaire-resume {
    font-weight: 700;
    color: var(--bleu-gn);
}

.fiche__inventaire .fiche__liste {
    margin-top: 0.35rem;
}

.pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    margin-top: 1.25rem;
}

.pagination__pages {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.pagination__lien {
    display: inline-block;
    padding: 0.35rem 0.7rem;
    border: 1px solid var(--trait);
    background: var(--blanc);
    color: var(--encre);
    font-size: 0.82rem;
    text-decoration: none;
}

.pagination__lien:hover {
    border-color: var(--bleu-gn);
    color: var(--bleu-gn);
}

.pagination__lien--courant {
    background: var(--bleu-gn);
    border-color: var(--bleu-gn);
    color: var(--blanc);
    font-weight: 700;
}

.pagination__lien--inactif {
    color: var(--acier);
    opacity: 0.55;
}

.pagination__lien--inactif:hover {
    border-color: var(--trait);
    color: var(--acier);
}

.pagination__ellipse {
    padding: 0.35rem 0.2rem;
    color: var(--acier);
}

/* Repoussé à droite : c'est un repère, pas une commande. */
.pagination__compte {
    margin-left: auto;
    font-size: 0.78rem;
    color: var(--acier);
}

@media (max-width: 760px) {
    .pagination__compte {
        margin-left: 0;
        width: 100%;
    }
}

.vide {
    background: var(--blanc);
    border: 1px dashed var(--trait);
    padding: 2.5rem 1.5rem;
    text-align: center;
}

.vide__titre {
    margin: 0 0 0.4rem;
    font-size: 1.05rem;
    font-weight: 700;
}

.vide__texte {
    margin: 0 auto;
    max-width: 46ch;
    color: var(--acier);
    font-size: 0.9rem;
}

.chantier {
    background: var(--blanc);
    border: 1px solid var(--trait);
    border-top: 3px solid var(--bleu-gn);
    padding: 1.75rem;
}

.chantier__liste {
    margin: 1rem 0 0;
    padding-left: 1.1rem;
    color: var(--acier);
    font-size: 0.9rem;
}

.chantier__liste li {
    margin-bottom: 0.35rem;
}

.pied {
    max-width: 1180px;
    margin: 0 auto;
    padding: 1.5rem 1.25rem 2.5rem;
    color: var(--acier);
    font-size: 0.78rem;
    border-top: 1px solid var(--trait);
}

/* ───────────────────────── Adaptation aux écrans ─────────────────────────
   Deux seuils : 900 px pour la navigation (le bandeau ne tient plus sur une
   ligne dès la tablette en portrait), 760 px pour les tableaux. */

@media (max-width: 900px) {
    .bascule-menu {
        display: inline-flex;
    }

    /* Le menu occupe toute la largeur sous le bandeau, une entrée par ligne.
       Sans JavaScript il reste déroulé : mieux vaut une page longue qu'une
       navigation inatteignable. */
    .navigation {
        display: none;
        flex-direction: column;
        gap: 0;
        width: 100%;
        margin-left: 0;
        margin-top: 0.85rem;
        padding-top: 0.5rem;
        border-top: 1px solid rgba(23, 75, 146, 0.18);
    }

    .navigation--ouverte {
        display: flex;
    }

    .navigation__lien {
        padding: 0.75rem 0.5rem;
        border-bottom: 1px solid rgba(23, 75, 146, 0.1);
        border-radius: 0;
    }

    .navigation__lien[aria-current="page"] {
        border-bottom-color: var(--bleu-gn);
    }

    .marque__logo {
        height: 48px;
    }
}

@media (max-width: 760px) {
    /*
     * Tableaux en fiches empilées.
     *
     * Le défilement horizontal est le pire compromis sur tablette : on perd la
     * colonne d'en-tête dès qu'on glisse, donc on ne sait plus ce qu'on lit.
     * Chaque ligne devient une fiche, chaque cellule porte son intitulé grâce
     * à l'attribut data-intitule posé dans les vues.
     */
    .registre-boite {
        overflow-x: visible;
        border: 0;
        background: transparent;
    }

    .registre,
    .registre tbody,
    .registre tr,
    .registre td {
        display: block;
        width: 100%;
    }

    .registre thead {
        /* Masqué visuellement, conservé pour les lecteurs d'écran. */
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
    }

    .registre tr {
        background: var(--blanc);
        border: 1px solid var(--trait);
        border-left: 3px solid var(--bleu-gn);
        margin-bottom: 0.75rem;
        padding: 0.35rem 0.85rem 0.6rem;
    }

    .registre td {
        padding: 0.4rem 0;
        border-bottom: 1px solid var(--papier);
        display: flex;
        flex-wrap: wrap;
        gap: 0.25rem 1rem;
        justify-content: space-between;
        align-items: baseline;
    }

    .registre td:last-child {
        border-bottom: none;
    }

    .registre td::before {
        content: attr(data-intitule);
        font-size: 0.7rem;
        font-weight: 700;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--acier);
        flex: 0 0 auto;
    }

    /* Une cellule sans intitulé (actions, champs de saisie) prend toute la
       largeur au lieu de s'aligner à droite d'un libellé absent. */
    .registre td:not([data-intitule])::before {
        content: none;
    }

    .registre td:not([data-intitule]) {
        justify-content: flex-start;
    }

    .registre td .champ__saisie,
    .registre td .champ__select {
        max-width: 100% !important;
    }

    /*
     * Les onglets passent à la ligne plutôt que de défiler.
     *
     * Le défilement horizontal a été essayé et retiré : un onglet sorti de
     * l'écran est un onglet dont on ignore l'existence, et Admin en porte
     * six. C'est le raisonnement déjà retenu pour les tableaux, où
     * l'en-tête qui s'échappe rend la ligne illisible.
     *
     * Repliés, ils ne peuvent plus ressembler à des onglets de classeur :
     * seule la dernière rangée toucherait le filet. Ils prennent donc
     * l'apparence de pastilles, chacune close sur elle-même.
     */
    .onglets__liste {
        flex-wrap: wrap;
        gap: 0.35rem;
        border-bottom-width: 1px;
        padding-bottom: 0.6rem;
    }

    .onglet {
        white-space: nowrap;
        font-size: 0.75rem;
        letter-spacing: 0.05em;
        padding: 0.45rem 0.7rem;
        margin-bottom: 0;
        border: 1px solid var(--trait);
        border-radius: 2px;
        flex: 1 1 auto;
        text-align: center;
    }

    .onglet[aria-selected="true"] {
        background: var(--bleu-gn);
        border-color: var(--bleu-gn);
        color: var(--blanc);
    }
}

@media (max-width: 640px) {
    .titre-page {
        font-size: 1.5rem;
    }

    .page {
        padding: 1.5rem 1rem 3rem;
    }

    .unite__compte,
    .bloc__compte {
        margin-left: 0;
    }

    .barre-titre {
        flex-direction: column;
        align-items: stretch;
    }

    .barre-titre .bouton,
    .barre-titre .actions .bouton {
        justify-content: center;
    }

    .formulaire {
        padding: 1.1rem;
    }

    /* minmax() figé à 280 px déborde sur un écran de 320 px. */
    .parc,
    .colonnes {
        grid-template-columns: 1fr;
    }

    .grille-champs {
        grid-template-columns: 1fr;
    }

    .recapitulatif dl {
        grid-template-columns: 1fr;
        gap: 0.15rem;
    }

    .recapitulatif dd {
        margin-bottom: 0.5rem;
    }

    .marque__logo {
        height: 42px;
    }

    .marque__texte {
        padding-left: 0.75rem;
    }

    .marque__nom {
        font-size: 0.85rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}

/* Bloc d'actions en pied de réglette — le lien discret en fin de méta
   passait inaperçu, il devient un bouton à part entière. */
.reglette__actions {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
    padding-top: 0.6rem;
    border-top: 1px solid var(--papier);
}

.reglette__actions .bouton {
    flex: 1 1 auto;
    justify-content: center;
}

.fiche__actions {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
    margin-top: 0.9rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--papier);
}

.fiche__actions .bouton {
    flex: 1 1 auto;
    justify-content: center;
}

/* Avertissement d'une modification qui échappe à la traçabilité bordereau. */
.avertissement {
    border-left: 4px solid var(--indispo);
    background: #fdf6e8;
    padding: 0.8rem 1rem;
    margin-bottom: 1.5rem;
    font-size: 0.875rem;
}

.avertissement strong {
    display: block;
    margin-bottom: 0.2rem;
}

/* Onglet sans résultat pendant une recherche : visible mais inopérant,
   pour que le compteur à zéro reste lisible sans induire un clic inutile. */
.onglet--vide {
    opacity: 0.4;
    cursor: default;
}

.onglet--vide:hover {
    background: transparent;
    color: var(--acier);
}

/* ==========================================================================
   Écrans d'accès : connexion, invitation, 2FA, initialisation
   ==========================================================================
   Carte centrée sur fond de page, sans navigation : à ce stade rien n'est
   encore accessible, un menu ne mènerait qu'à des redirections. */

.corps-acces {
    min-height: 100vh;
    display: flex;
}

.acces {
    margin: auto;
    width: 100%;
    max-width: 34rem;
    padding: 2rem 1rem;
}

.acces__carte {
    background: #fff;
    border: 1px solid var(--trait);
    padding: 2rem;
}

.acces__entete {
    text-align: center;
    margin-bottom: 1.5rem;
    padding-bottom: 1.25rem;
    /* Le filet tricolore du bandeau, repris ici : même identité, sans le
       bandeau lui-même. */
    border-bottom: 3px solid var(--bleu-gn);
    border-image: linear-gradient(90deg, var(--bleu-gn) 33%, #fff 33% 66%, var(--rouge-gn) 66%) 1;
}

/* Le logo porte les mots « Gendarmerie nationale » : jamais réduit à une
   vignette, il doit rester lisible. */
.acces__logo {
    height: 74px;
    width: auto;
}

.acces__entite {
    margin: 0.6rem 0 0;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--acier);
}

.acces__titre {
    margin: 0 0 1.25rem;
    font-size: 1.15rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.acces__note {
    margin-top: 1.25rem;
    font-size: 0.85rem;
    color: var(--acier);
    line-height: 1.5;
}

.acces__pied {
    margin-top: 1.5rem;
    text-align: center;
    font-size: 0.78rem;
    color: var(--acier);
}

/* Bouton rendu visuellement neutre : sert aux formulaires POST qui doivent
   avoir l'air d'un lien (déconnexion), sans devenir un GET. */
.lien-nu {
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    color: var(--bleu-gn);
    text-decoration: underline;
    cursor: pointer;
}

.qr {
    display: flex;
    justify-content: center;
    margin: 1.25rem 0;
}

.qr svg {
    width: 220px;
    height: 220px;
}

.cle-2fa {
    display: inline-block;
    margin-top: 0.35rem;
    font-family: var(--mono);
    font-size: 0.95rem;
    letter-spacing: 0.06em;
    background: var(--papier);
    padding: 0.4rem 0.6rem;
    border: 1px solid var(--trait);
}

/* Les six cases du code TOTP. Elles remplacent le champ unique quand le script
   répond ; sans lui elles restent masquées et ne coûtent rien. */
.code-cases {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.15rem;
}

.code-cases__case {
    /* Largeur souple plutôt qu'une requête média : six cases fixes débordent
       de la carte sur un téléphone étroit, celles-ci se resserrent. */
    flex: 1 1 0;
    min-width: 0;
    max-width: 3.25rem;
    height: 3.25rem;
    padding: 0;
    text-align: center;
    font-family: var(--mono);
    font-size: 1.35rem;
    color: var(--encre);
    background: var(--blanc);
    border: 1px solid var(--acier);
    border-radius: 2px;
}

.code-cases__case:focus {
    outline: none;
    border-color: var(--bleu-fonce);
    box-shadow: 0 0 0 3px rgba(23, 75, 146, 0.13);
}

.code-bascule {
    align-self: flex-start;
    margin-top: 0.35rem;
    font-size: 0.75rem;
}

.codes-secours {
    list-style: none;
    margin: 1.25rem 0;
    padding: 1rem;
    background: var(--papier);
    border: 1px solid var(--trait);
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
    gap: 0.5rem;
    font-family: var(--mono);
    font-size: 0.95rem;
}

.matrice {
    margin-top: 1.25rem;
}

.matrice__bloc {
    border: 1px solid var(--trait);
    padding: 0.75rem 1rem 1rem;
    margin-top: 0.75rem;
}

.matrice__titre {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--acier);
    padding: 0 0.35rem;
}

.matrice__cases {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.5rem;
}

/* ==========================================================================
   Pastille de compte et menu, en bout de bandeau
   ==========================================================================
   Remplace le nom en clair suivi d'un bouton « Déconnexion » : deux éléments
   à la taille d'un onglet, pour des actions qui n'en sont pas. */

.lecteur-ecran {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.compte {
    position: relative;
    margin-left: 0.75rem;
}

/* Le marqueur natif du <summary> n'a pas sa place sur une pastille ronde. */
.compte__pastille {
    list-style: none;
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--bleu-gn);
    color: var(--blanc);
    cursor: pointer;
    user-select: none;
    border: 2px solid transparent;
}

.compte__pastille::-webkit-details-marker {
    display: none;
}

.compte__pastille:hover,
.compte[open] .compte__pastille {
    border-color: rgba(23, 75, 146, 0.35);
}

.compte__pastille:focus-visible {
    outline: 2px solid var(--bleu-gn);
    outline-offset: 2px;
}

.compte__initiales {
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.04em;
}

.compte__menu {
    position: absolute;
    top: calc(100% + 0.6rem);
    right: 0;
    z-index: 40;
    min-width: 16rem;
    background: var(--blanc);
    border: 1px solid var(--trait);
    box-shadow: 0 8px 24px rgba(18, 32, 63, 0.14);
}

.compte__identite {
    padding: 0.85rem 1rem;
    border-bottom: 1px solid var(--trait);
}

.compte__nom {
    margin: 0;
    font-weight: 700;
    font-size: 0.9rem;
}

.compte__email,
.compte__role {
    margin: 0.15rem 0 0;
    font-size: 0.78rem;
    color: var(--acier);
    word-break: break-all;
}

.compte__actions {
    padding: 0.35rem 0;
}

.compte__lien {
    display: block;
    width: 100%;
    text-align: left;
    padding: 0.55rem 1rem;
    background: none;
    border: 0;
    font: inherit;
    font-size: 0.85rem;
    color: var(--encre);
    text-decoration: none;
    cursor: pointer;
}

/* Aplat discret admis ici, contrairement au bandeau : sur fond blanc il ne
   forme pas de tache, et un menu déroulant a besoin d'un survol franc. */
.compte__lien:hover {
    background: var(--papier);
    color: var(--bleu-gn);
}

.compte__deconnexion {
    border-top: 1px solid var(--trait);
}

.compte__lien--sortie {
    color: var(--absent);
    font-weight: 600;
}

.compte__lien--sortie:hover {
    background: #fbeff1;
    color: var(--absent);
}

.modale {
    width: min(46rem, calc(100vw - 2rem));
    max-height: min(85vh, 52rem);
    padding: 0;
    border: 1px solid var(--trait);
    background: var(--blanc);
    color: var(--encre);
}

.modale::backdrop {
    background: rgba(18, 32, 63, 0.45);
}

.modale__entete {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--trait);
    position: sticky;
    top: 0;
    background: var(--blanc);
}

.modale__titre {
    margin: 0;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.modale__fermer {
    background: none;
    border: 0;
    font-size: 1.6rem;
    line-height: 1;
    color: var(--acier);
    cursor: pointer;
    padding: 0 0.25rem;
}

.modale__fermer:hover {
    color: var(--encre);
}

.modale__corps {
    padding: 1.25rem;
    overflow-y: auto;
}

@media (max-width: 900px) {
    /*
     * Logo, puis « Menu », puis la pastille tout à droite.
     *
     * Même ordre qu'au-dessus de 900 px, où la pastille ferme le bandeau :
     * l'identité se trouve au même endroit quelle que soit la largeur, plutôt
     * que de changer de côté selon l'écran.
     *
     * Un seul `margin-left: auto` dans la rangée, porté par le premier élément
     * du groupe de droite. Quand la pastille en avait un aussi, les deux se
     * repoussaient et laissaient un trou entre eux.
     */
    .bandeau__interieur {
        gap: 0.75rem;
    }

    .bascule-menu {
        order: 1;
        margin-left: auto;
    }

    .compte {
        order: 2;
        margin-left: 0;
    }

    /* Le menu déroulé occupe toute la largeur, sous les deux. */
    .navigation {
        order: 3;
    }

    .compte__pastille {
        width: 34px;
        height: 34px;
    }

    /* Ancré à droite du bandeau plutôt qu'à la pastille : sur un écran
       étroit, un menu de 16rem aligné sur une pastille déborde. */
    .compte__menu {
        right: -0.5rem;
        min-width: min(18rem, calc(100vw - 2rem));
    }
}

.etapes {
    list-style: none;
    display: flex;
    gap: 0.35rem;
    margin: 0 0 1.5rem;
    padding: 0;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--acier);
    flex-wrap: wrap;
}

.etapes__item {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.6rem;
    border: 1px solid var(--trait);
    flex: 1 1 auto;
}

.etapes__numero {
    display: grid;
    place-items: center;
    width: 1.35rem;
    height: 1.35rem;
    border-radius: 50%;
    background: var(--trait);
    color: var(--acier);
    font-size: 0.7rem;
    font-weight: 700;
}

.etapes__item--courante {
    color: var(--bleu-gn);
    border-color: var(--bleu-gn);
    font-weight: 700;
}

.etapes__item--courante .etapes__numero {
    background: var(--bleu-gn);
    color: var(--blanc);
}

.etapes__item--faite {
    color: var(--present);
    border-color: rgba(23, 104, 63, 0.35);
}

.etapes__item--faite .etapes__numero {
    background: var(--present);
    color: var(--blanc);
}

/* Lien discret sous un champ, calé à droite sous la saisie. */
.champ__lien {
    display: block;
    margin-top: 0.35rem;
    text-align: right;
    font-size: 0.75rem;
    color: var(--acier);
}

.champ__lien:hover {
    color: var(--bleu-gn);
}

/* Action unique, centrée : sur un formulaire d'une seule issue, la caler à
   droite laisse un vide qui donne l'impression d'un second bouton manquant. */
.actions--centre {
    justify-content: center;
}

/* ==========================================================================
   Exigences de mot de passe, cochées pendant la frappe
   ==========================================================================
   Sans JavaScript, la liste s'affiche sans marquage : elle dit ce qu'il faut,
   exactement comme le texte d'aide qu'elle remplace. */

.exigences {
    list-style: none;
    margin: 0.5rem 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    gap: 0.2rem 0.75rem;
    font-size: 0.78rem;
    color: var(--acier);
}

.exigences__item {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

/* Glyphe ET couleur : la couleur seule ne suffit pas à un daltonien, même
   règle que pour la disponibilité des véhicules. */
.exigences__marque::before {
    content: "○";
    font-size: 0.85em;
}

.exigences__item--ok {
    color: var(--present);
}

.exigences__item--ok .exigences__marque::before {
    content: "✓";
}

.exigences__item--manque {
    color: var(--absent);
}

.exigences__item--manque .exigences__marque::before {
    content: "✕";
}

/* ==========================================================================
   Écarts et alignements, sortis des attributs style
   ==========================================================================
   La politique de sécurité ne porte plus 'unsafe-inline' sur style-src, et un
   attribut ne peut pas recevoir de nonce : il ne reste donc plus un seul
   style="…" dans les vues. Ces modificateurs reprennent valeur pour valeur ce
   que ces attributs faisaient. Aucun n'est un ajustement de design, et aucun
   ne pose de display : la règle [hidden] du haut de fichier doit continuer de
   masquer ce qu'elle masque.

   Convention de nommage : --serre resserre l'écart par défaut du composant,
   --espace en ajoute un là où il n'y en avait pas. */

/* Chapeau d'une page qui enchaîne aussitôt sur un tableau ou des onglets :
   les 2,25 rem par défaut y creusent un trou. */
.chapeau--serre {
    margin-bottom: 1.25rem;
}

/* Note placée juste sous le titre de la carte : elle n'a rien au-dessus
   d'elle dont il faudrait l'écarter. */
.acces__note--intro {
    margin-top: 0;
}

/* Barre d'actions d'un formulaire de connexion : cartes courtes, où le filet
   des 1,5 rem par défaut tombe trop bas. L'assistant d'installation garde
   l'écart normal, ses écrans sont longs. */
.actions--serre {
    margin-top: 1.25rem;
}

.actions--espace {
    margin-top: 1rem;
}

.actions--espace-bas {
    margin-bottom: 1.25rem;
}

/* Fieldsets d'un formulaire dont les groupes s'enchaînent sans respiration,
   la légende soulignée suffisant à les séparer. */
.groupe--sans-marge {
    margin-bottom: 0;
}

/* Formulaire d'ajout posé sous le tableau qu'il alimente. */
.formulaire--espace {
    margin-top: 1.5rem;
}

.bloc__entete--espace {
    margin-top: 1.5rem;
}

.avertissement--espace {
    margin-top: 1.5rem;
}

/* Avertissement à plusieurs paragraphes : intitulé puis explication, sans les
   marges par défaut du navigateur qui doubleraient l'encadré. */
.avertissement__intitule {
    margin: 0 0 0.5rem;
}

.avertissement__texte {
    margin: 0 0 0.75rem;
}

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

.champ__aide--espace {
    margin-bottom: 0.75rem;
}

.champ__aide--colle {
    margin: 0;
}

.champ__aide--centre {
    text-align: center;
}

.fiche__inventaire--espace {
    margin-top: 1.25rem;
}

/* Cellules de registre à contenu ponctuel : une case à cocher, un glyphe.
   Sous 760 px la cellule devient une fiche en flex et l'alignement n'a plus
   de prise, ce qui est le comportement voulu. */
.registre__centre {
    text-align: center;
}

/* Champs de saisie calibrés sur ce qu'ils reçoivent : un rang de tri, une
   abréviation de grade. Le tableau en fiches les repasse à 100 % sous
   760 px, cf. la requête média. */
.champ__saisie--ordre {
    max-width: 6rem;
}

.champ__saisie--sigle {
    max-width: 7rem;
}