/* Charte graphique MNSPF partagée (front-office ET back-office) — servie par le module common
   via META-INF/resources à l'URL /resources/css/xtranets.css. Logo et favicons sous /resources/img/. */

/* =============================================================================
   Charte MNSPF (reprise de mnspf.fr) — sapeurs-pompiers : chrome BLANC, titres en
   BLEU MARINE, actions en ROUGE, angles droits, typo sobre.
   On surcharge les variables de thème Bootstrap 5.3 → propagation sans toucher aux templates.
   ============================================================================= */
:root {
    --mnspf-bleu: #164271;
    --mnspf-bleu-fonce: #0f3258;
    --mnspf-rouge: #e32128;
    --mnspf-rouge-fonce: #a6191e;

    /* Le « primaire » structurel = bleu marine (titres, liens, .text-primary). */
    --bs-primary: var(--mnspf-bleu);
    --bs-primary-rgb: 22, 66, 113;

    /* Accent / danger = rouge MNSPF. */
    --bs-danger: var(--mnspf-rouge);
    --bs-danger-rgb: 227, 33, 40;

    /* Liens en bleu marine. */
    --bs-link-color: var(--mnspf-bleu);
    --bs-link-color-rgb: 22, 66, 113;
    --bs-link-hover-color: var(--mnspf-bleu-fonce);
    --bs-link-hover-color-rgb: 15, 50, 88;
}

body {
    background-color: #F4F7FA !important; /* page en bleu-gris clair ; seul le menu reste blanc */
    color: #666666;
}

/* Tables : surface BLANCHE sur le fond bleuté (la table ressort comme une carte), avec une
   alternance de lignes bleutée — lisible sur le blanc, au lieu du gris Bootstrap. */
.table {
    --bs-table-bg: #ffffff;
    --bs-table-striped-bg: #eef3f9;
    --bs-table-striped-color: inherit;
}

/* Encadre la table comme une carte (bord + arrondi) pour bien la délimiter du fond. */
.table-responsive {
    border: 1px solid #e3e9f0;
    border-radius: var(--bs-border-radius);
    overflow: hidden;
}

/* RÈGLE DE CHARTE — boutons d'action dans une cellule de tableau.
   À poser sur le <td> d'actions : boutons alignés à droite, espacés, sur une seule ligne.
   Convention des libellés (boutons outline, compacts via .app .btn, avec icône Font Awesome) :
     · Consulter  -> .btn-outline-primary  + fa-eye
     · Modifier   -> .btn-outline-warning  + fa-pen-to-square
     · Supprimer  -> .btn-outline-danger   + fa-trash  (dans un <form> pour le POST + confirm)
   IMPORTANT : surtout PAS de `display:flex` sur le <td> — cela sort la cellule du modèle de tableau,
   elle ne prend alors plus la hauteur de la ligne (le striping et les bordures se cassent sur les
   lignes multi-lignes, les boutons « flottent »). On garde donc un vrai <td> et on dispose les
   actions en inline-block, centrées verticalement. */
/* Nom de fichier dans un tableau : borné et tronqué en points de suspension, le nom complet restant
   accessible en info-bulle. Sans borne, un nom long — ou un type MIME comme
   `application/vnd.openxmlformats-officedocument.wordprocessingml.document` — élargit la colonne au point
   de pousser les boutons d'action hors de l'écran. Constaté sur la bibliothèque documentaire. */
.cell-fichier {
    display: inline-block;
    max-width: 14rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: bottom;
}

.table-actions {
    text-align: right;
    vertical-align: middle;
    white-space: nowrap;
}

.table-actions > * {
    display: inline-block;
    vertical-align: middle;
}

.table-actions > * + * {
    margin-left: 0.4rem;
}

.table-actions form {
    margin: 0;
}

/* Logo MNSPF dans la barre de navigation. */
.navbar-brand .brand-logo {
    height: 42px;
    width: auto;
}

/* Titres en bleu marine (comme mnspf.fr). Les libellés .text-muted gardent leur gris (specificité). */
h1, h2, h3, h4, h5, h6, .card-title {
    color: var(--mnspf-bleu);
}

/* Navbar BLANCHE + liseré rouge (rappel sapeurs-pompiers) ; marque en bleu marine. */
.mnspf-navbar {
    border-bottom: 3px solid var(--mnspf-rouge);
}

.mnspf-navbar .navbar-brand {
    color: var(--mnspf-bleu);
}

.mnspf-navbar .nav-link.active {
    color: var(--mnspf-bleu);
    font-weight: 600;
    box-shadow: inset 0 -3px 0 var(--mnspf-rouge); /* soulignement rouge de l'onglet actif */
}

.navbar-brand .brand-text {
    font-weight: 600;
    letter-spacing: 0.02em;
}

/* Boutons d'action = bordure rouge sur fond transparent, angles droits (style CTA mnspf.fr) ;
   au survol, aplat rouge. (.btn-primary est le bouton d'action par défaut des écrans.) */
.btn-primary {
    --bs-btn-color: var(--mnspf-rouge);
    --bs-btn-bg: transparent;
    --bs-btn-border-color: var(--mnspf-rouge);
    --bs-btn-hover-color: #ffffff;
    --bs-btn-hover-bg: var(--mnspf-rouge);
    --bs-btn-hover-border-color: var(--mnspf-rouge);
    --bs-btn-active-color: #ffffff;
    --bs-btn-active-bg: var(--mnspf-rouge-fonce);
    --bs-btn-active-border-color: var(--mnspf-rouge-fonce);
    --bs-btn-disabled-color: var(--mnspf-rouge);
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: var(--mnspf-rouge);
    font-weight: 600;
}

/* Icône + libellé toujours sur une seule ligne dans les boutons. */
.btn {
    white-space: nowrap;
}

/* Boutons compacts (btn-sm) par défaut dans l'application. La classe .app est posée sur le <body>
   du layout (BO/FO) ; les pages de login autonomes n'en héritent pas et gardent leur taille normale. */
.app .btn {
    --bs-btn-padding-y: 0.25rem;
    --bs-btn-padding-x: 0.6rem;
    --bs-btn-font-size: 0.85rem;
}

/* Bandeau de titre de page : aplat bleu marine + accent rouge à gauche, texte clair.
   Contraste net sur le fond #F4F7FA et sur les cartes blanches du contenu. */
.page-header {
    background-color: var(--mnspf-bleu);
    color: #ffffff;
    border-left: 5px solid var(--mnspf-rouge);
    border-radius: var(--bs-border-radius);
}

.page-header h1,
.page-header h2,
.page-header .h4 {
    color: #ffffff;
}

.page-header .text-muted {
    color: rgba(255, 255, 255, 0.8) !important;
}

/* Accent rouge sous un titre mis en évidence (ex. titre de la page de connexion). */
.mnspf-title-accent {
    width: 48px;
    height: 3px;
    background-color: var(--mnspf-rouge);
    margin: 0 auto;
    border-radius: 2px;
}

/* Badge « service » discret et sur charte (remplace le cyan text-bg-info). */
.badge-service {
    background-color: #eef2f7;
    color: var(--mnspf-bleu);
    font-weight: 600;
}

/* =============================================================================
   Messagerie — liste des conversations (cartes lisibles, accent non-lu)
   ============================================================================= */
.conv-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.conv-item {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    background-color: #ffffff;
    border: 1px solid #e3e9f0;
    border-radius: var(--bs-border-radius);
    padding: 0.8rem 1rem;
    text-decoration: none;
    color: inherit;
    transition: box-shadow 0.12s ease, border-color 0.12s ease, background-color 0.12s ease;
}

/* Pas de filet latéral coloré — ni au survol, ni sur un non-lu (retour MOA du 2026-08-12, FO n° 6) :
   la MOA y voyait une signature étrangère à la charte MNSPF. Le non-lu reste porté par l'icône pleine,
   le sujet en gras et le fond légèrement teinté ; le survol, par l'ombre. Réglé ICI et non côté
   front-office : le grief vaut pour les deux zones, et deux définitions divergentes du même motif sont
   exactement ce que la charte interdit. */
.conv-item:hover {
    box-shadow: 0 2px 10px rgba(22, 66, 113, 0.10);
}

.conv-item.unread {
    background-color: #fbfdff;
}

.conv-icon {
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background-color: #eef2f7;
    color: var(--mnspf-bleu);
    display: flex;
    align-items: center;
    justify-content: center;
}

.conv-item.unread .conv-icon {
    background-color: var(--mnspf-bleu);
    color: #ffffff;
}

.conv-subject {
    color: var(--mnspf-bleu);
    font-weight: 600;
}

.conv-item.unread .conv-subject {
    font-weight: 700;
}

.conv-meta {
    color: #6c757d;
    font-size: 0.85rem;
}

/* min-width:0 pour autoriser le text-truncate dans un conteneur flex. */
.min-w-0 {
    min-width: 0;
}

/* =============================================================================
   Messagerie — fil de discussion (bulles de chat contrastées + avatars)
   ============================================================================= */
.chat {
    background-color: #ffffff;
    border: 1px solid #e3e9f0;
    border-radius: var(--bs-border-radius);
    padding: 1rem 1rem 0.25rem;
}

.chat-row {
    display: flex;
    gap: 0.6rem;
    margin-bottom: 0.85rem;
    align-items: flex-end;
}

.chat-row.me {
    flex-direction: row-reverse;
}

.chat-avatar {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
}

.chat-avatar.them {
    background-color: #eef2f7;
    color: var(--mnspf-bleu);
}

.chat-avatar.me {
    background-color: var(--mnspf-bleu);
    color: #ffffff;
}

.chat-bubble {
    max-width: 72%;
    padding: 0.55rem 0.85rem;
    border-radius: 12px;
}

.chat-bubble .chat-head {
    font-size: 0.78rem;
    margin-bottom: 0.2rem;
}

.chat-bubble .chat-body {
    white-space: pre-wrap;
    word-break: break-word;
}

.bubble-them {
    background-color: #eef2f7;
    color: #20303f;
    border-bottom-left-radius: 2px;
}

.bubble-them .chat-head {
    color: var(--mnspf-bleu);
}

.bubble-me {
    background-color: var(--mnspf-bleu);
    color: #ffffff;
    border-bottom-right-radius: 2px;
}

.bubble-me .chat-head {
    color: rgba(255, 255, 255, 0.75);
}

/* Pièces jointes d'un message : « chips » téléchargeables. Le style doit être lisible sur les DEUX
   fonds de bulle — clair pour l'interlocuteur (.bubble-them), marine pour soi (.bubble-me). Sans style
   dédié, le lien hérite du bleu par défaut et devient illisible sur la bulle marine (pièce « invisible »
   pour l'expéditeur). D'où un contraste explicite par type de bulle. */
.chat-pieces {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.chat-piece {
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    padding: 0.2rem 0.55rem;
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: 0.8rem;
    text-decoration: none;
    overflow: hidden;
}

.chat-piece span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bubble-them .chat-piece {
    background-color: #ffffff;
    border-color: #cfd8e3;
    color: var(--mnspf-bleu);
}

.bubble-them .chat-piece:hover {
    background-color: #f3f7fb;
}

.bubble-me .chat-piece {
    background-color: rgba(255, 255, 255, 0.16);
    border-color: rgba(255, 255, 255, 0.45);
    color: #ffffff;
}

.bubble-me .chat-piece:hover {
    background-color: rgba(255, 255, 255, 0.28);
}

/* La taille du fichier (.text-muted) reste lisible sur la bulle marine. */
.bubble-me .chat-piece .text-muted {
    color: rgba(255, 255, 255, 0.75) !important;
}

/* Note interne (inter-service MNSPF) : pleine largeur, ton ambré, bordure pointillée — jamais
   transmise à l'organisme. Volontairement très distincte des bulles de message. */
.chat-note {
    margin: 0 0 0.85rem;
    padding: 0.55rem 0.85rem;
    background-color: #fff8e6;
    border: 1px dashed #e0a800;
    border-left-width: 4px;
    border-left-style: solid;
    border-radius: 8px;
    color: #5c4600;
}

.chat-note-head {
    font-size: 0.78rem;
    margin-bottom: 0.2rem;
    color: #8a6d00;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.chat-note-body {
    white-space: pre-wrap;
    word-break: break-word;
}

/* Composer à onglets de la messagerie BO. Les onglets INACTIFS sont remplis (gris bleuté) et bordés
   pour bien se distinguer du fond clair de la page — sinon ils « flottent » sans affordance d'onglet.
   L'onglet ACTIF ressort : blanc pour « Répondre », ambré pour « Note interne » (palette .chat-note),
   et fusionne avec la zone de contenu (blanche / ambrée) via sa bordure basse. */
.composer-tabs {
    border-bottom-color: #cdd8e5;
}

.composer-tabs .nav-link {
    background-color: #e4ebf3;
    border-color: #cdd8e5;
    color: var(--mnspf-bleu);
}

.composer-tabs .nav-link:hover {
    background-color: #d9e2ee;
    border-color: #cdd8e5;
}

.composer-tabs .nav-link.active {
    background-color: #ffffff;
    border-color: #cdd8e5 #cdd8e5 #ffffff;
    color: var(--mnspf-bleu);
}

.composer-tabs + .tab-content {
    background-color: #ffffff;
    border-color: #cdd8e5;
}

.composer-tabs .nav-link-note {
    color: #8a6d00;
}

.composer-tabs .nav-link-note.active {
    background-color: #fff8e6;
    color: #5c4600;
    border-color: #e0a800 #e0a800 #fff8e6;
}

.composer-pane-note {
    background-color: #fff8e6;
}

.xd-container {
    min-height: 60vh;
}

/* Lisibilité du fragment de statut du check de liaison (back-office). */
#liaison-result .alert {
    margin-bottom: 0;
}

/* Point « nouveau message » d'une ligne de sinistre (E-18), aux DEUX extrémités.
   Une pastille pleine, avant le numéro de dossier : elle signale, elle ne compte pas.
   Le rouge vient de la charte (--mnspf-rouge via --bs-danger), jamais d'un littéral dans un gabarit. */
.point-non-lu {
    display: inline-block;
    width: .5rem;
    height: .5rem;
    border-radius: 50%;
    background-color: var(--bs-danger);
    vertical-align: middle;
}

/* Ligne de tableau cliquable (listes de sinistres, FO et BO). Le curseur est le seul indice visuel :
   la ligne ne change pas d'apparence au survol du tableau Bootstrap, qui a déjà son `table-hover`. */
tr[data-ligne-cliquable] {
    cursor: pointer;
}

/* CARTE ENTIÈREMENT CLIQUABLE (accueil du back-office, R-69). La carte EST l'ancre : plus de bouton
   « Ouvrir » qui redisait son titre. Il faut donc deux choses qu'un bouton donnait gratuitement — que le
   texte garde sa couleur de lecture, et que la surface réponde au survol.
   ⚠️ Aucune couleur littérale : la teinte de survol est celle du thème (`--bs-primary`), et l'ombre
   celle de Bootstrap. Le `color: inherit` va de pair avec `text-decoration-none` posé au gabarit — sans
   lui, tout le contenu de la carte passerait en bleu de lien. */
.card-cliquable {
    color: inherit;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

.card-cliquable:hover,
.card-cliquable:focus-visible {
    border-color: var(--bs-primary);
    box-shadow: var(--bs-box-shadow-sm);
}

/* Le titre prend la couleur d'accent au survol : c'est lui qui nomme la destination. */
.card-cliquable:hover .card-title,
.card-cliquable:focus-visible .card-title {
    color: var(--bs-primary);
}

/* ------------------------------------------------------------------------------------------------
   Fiche sinistre — les deux fils qui grandissent sans fin (retour de recette du 27/08).

   Le journal et la conversation sont les seules cartes dont le contenu croît indéfiniment : sur un
   dossier suivi, ils repoussent le pied de page si loin que le reste de la fiche devient inatteignable
   au défilement. Les deux se traitent par un défilement INTERNE, pas par une troncature — rien n'est
   caché, tout reste atteignable là où on le cherche.
   ------------------------------------------------------------------------------------------------ */

/* Le journal : hauteur plafonnée, le fil défile dedans. La valeur est celle demandée en recette. */
.journal-dossier {
    max-height: 15rem;
    overflow-y: auto;
}

/* 🚨 La conversation, elle, ne se plafonne PAS par une valeur : elle prend la hauteur que la colonne
   de gauche impose, et défile au-delà. Une ligne en `rem` aurait été un second réglage à maintenir
   à côté de celui de la pile de gauche, et faux dès qu'on ajoute une carte.

   Le motif : la colonne devient le référentiel de position, la carte s'y colle par `inset: 0` et
   cesse donc de compter dans la hauteur intrinsèque de la rangée — c'est ce qui la lui SOUMET, au
   lieu de la lui imposer. ⚠️ Réservé au grand écran : sous `xl` les colonnes s'empilent, il n'y a
   plus de « à côté », et une carte absolue s'effondrerait sur la suivante. */
@media (min-width: 1200px) {
    .conversation-dossier {
        position: relative;
    }

    .conversation-dossier > .card {
        position: absolute;
        inset: 0;
    }
}

/* ⚠️ Sans `min-height: 0`, un enfant flex refuse de descendre sous sa hauteur de contenu et le
   défilement ne s'arme jamais : la carte grandit quand même. C'est le piège classique du couple
   `flex-grow` + `overflow`, et il est silencieux. */
.conversation-dossier .card-body,
.conversation-fil {
    min-height: 0;
}

.conversation-fil {
    overflow-y: auto;
}

/* Le chevron d'un replieur Bootstrap — il pointe vers le bas quand la section est ouverte, vers la
   droite quand elle est repliée.

   ⚠️ C'est le data-API de Bootstrap qui pose et retire `.collapsed` sur le déclencheur, tout seul et
   même sur du contenu injecté par HTMX (il est délégué sur `document`). Aucun JS à écrire, aucun
   écouteur à poser dans un fragment — donc rien qui puisse s'empiler au swap suivant (CLAUDE.md § 6.2).

   ⚠️ La rotation est retirée sous `prefers-reduced-motion` uniquement pour sa TRANSITION : la position
   finale du chevron, elle, porte de l'information et reste dans les deux cas. */
.asso-repli .fa-chevron-down {
    transition: transform .15s ease-in-out;
}

.asso-repli.collapsed .fa-chevron-down {
    transform: rotate(-90deg);
}

@media (prefers-reduced-motion: reduce) {
    .asso-repli .fa-chevron-down {
        transition: none;
    }
}

/* 🚨 LE TITRE EST LE DÉCLENCHEUR — retour de recette du 2026-09-08, [D65] : « d'une façon générale il
   faut éviter de multiplier les boutons de comportement d'IHM ». Ouvrir ou replier un contenu déjà
   présent à l'écran ne réclame pas de bouton à soi ; le bouton est un geste MÉTIER, et à plusieurs les
   boutons de pur comportement noient celui qui engage quelque chose (charte graphique, « Gestes d'IHM »).

   🚨 Ce qui suit ne fait que RETIRER l'apparence de bouton — jamais le bouton lui-même. Un `<div>` à qui
   l'on donnerait `role="button"` perdrait le focus clavier, l'activation par Entrée et Espace, et
   l'`aria-expanded` que Bootstrap tient tout seul sur son déclencheur. Le titre garde donc la typographie
   de son support (`font: inherit`), et c'est le chevron de `.asso-repli` qui dit l'état.

   ⚠️ `text-align: inherit` et non `left` : la même classe sert aux deux zones, dont l'une pourrait un jour
   se lire de droite à gauche. */
.asso-repli-titre {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    width: 100%;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    text-align: inherit;
}

/* ⚠️ L'ENTÊTE ENTIÈRE doit être cliquable, marges comprises : sans cela, la bande de quelques pixels qui
   entoure le titre reste inerte, et l'utilisateur qui vise « le bandeau » tombe une fois sur deux à côté.
   On déplace donc le rembourrage de l'entête vers le déclencheur — les variables sont celles de la carte,
   pas des valeurs recopiées, sinon les deux divergeraient au premier changement de thème. */
.card-header:has(> .asso-repli-titre) {
    padding: 0;
}

.card-header > .asso-repli-titre {
    padding: var(--bs-card-cap-padding-y) var(--bs-card-cap-padding-x);
}

/* La jauge d'avancement des pièces d'un dossier — UNE CASE PAR PIÈCE, pas une barre continue
   (maquette C du 27/08, retour de recette R-40).

   Le pas de la jauge est celui du geste : sur un dossier à trois pièces, une barre remplie « aux deux
   tiers » demande de convertir une longueur en un nombre de pièces, là où les cases le donnent.

   ⚠️ Les cases sont rendues en parcourant les listes de pièces, jamais à partir d'un pourcentage : le
   nombre de cases et le nombre de lignes affichées viennent ainsi de la même source (CLAUDE.md § 5.5).

   ⚠️ Aucune couleur en dur — `--bs-success` et les gris de Bootstrap sont déjà rethémés plus haut. Et
   la couleur ne porte pas l'information à elle seule : le bloc est un `role="img"` dont le libellé
   reprend les deux phrases du bandeau. */
.asso-jauge {
    display: flex;
    gap: .2rem;
}

.asso-jauge > span {
    flex: 1 1 0;
    height: .45rem;
    border-radius: .1rem;
    background-color: var(--bs-secondary-bg);
    border: 1px solid var(--bs-border-color);
}

.asso-jauge > span.pleine {
    background-color: var(--bs-success);
    border-color: var(--bs-success);
}

/* LA LISTE DES ADHÉRENTS FNSPF — le tableau de résultats de la card « Vérification d'adhésion »
   (retours R-57 et « recherche large » du 31/08).

   🚨 CE QU'IL CORRIGE : huit colonnes dans une card qui n'occupe qu'une colonne de la grille défilaient
   latéralement, et c'est le défilement horizontal — plus que la densité — qui faisait perdre le fil
   d'une ligne. Le gabarit est passé à cinq colonnes ; ce fichier n'a plus qu'à les rendre lisibles.

   ⚠️ Aucune couleur en dur : `--mnspf-bleu` et les variables Bootstrap déjà rethémées plus haut
   (charte-graphique.md). Et aucune règle qui suppose une largeur d'écran : la card est en `col-12` sur
   la fiche, mais rien ne garantit qu'elle y reste. */
.asso-fnspf-liste {
    max-height: 22rem;
    overflow-y: auto;
}

/* 🚨 L'EN-TÊTE RESTE VISIBLE PENDANT LE DÉFILEMENT. Sur vingt-cinq lignes, « Prénom | Naissance |
   Rattachement | Catégorie » avait disparu avant la moitié de la liste, et quatre colonnes de texte se
   ressemblent assez pour qu'on lise un lieu de naissance comme une amicale.

   ⚠️ Le fond est OPAQUE : sans lui, les lignes défilent en transparence sous les libellés. Et le
   `z-index` est nécessaire parce que les cellules du corps créent leur propre contexte d'empilement dès
   qu'elles sont positionnées. */
.asso-fnspf-table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background-color: var(--bs-table-bg);
    box-shadow: inset 0 -1px 0 var(--bs-border-color);
}

/* L'INTERTITRE DE PATRONYME. Les résultats d'un « commence par » se groupent par nom ; ce qui départage
   à l'intérieur d'un groupe est le prénom. La ligne de groupe porte donc le nom une fois, au lieu d'une
   colonne qui l'aurait répété à chaque ligne. */
.asso-fnspf-table tr.asso-fnspf-groupe th {
    position: sticky;
    top: 1.9rem;
    z-index: 1;
    background-color: var(--bs-secondary-bg);
    color: var(--mnspf-bleu);
    font-size: .8rem;
    letter-spacing: .04em;
    text-transform: uppercase;
    padding-top: .25rem;
    padding-bottom: .25rem;
}

/* Le zébrage repart à chaque groupe — c'est ce que donne `nth-of-type` appliqué DANS un `tbody`, et
   c'est la raison pour laquelle chaque groupe en est un. `.table-striped` de Bootstrap, lui, compte sur
   tout le tableau et aurait fait sauter l'alternance d'un groupe à l'autre. */
.asso-fnspf-table tbody tr:not(.asso-fnspf-groupe):nth-of-type(odd) > td {
    background-color: var(--bs-table-striped-bg);
}

/* Les filets verticaux : quatre colonnes de texte sans séparation se lisent comme une phrase. */
.asso-fnspf-table td + td {
    border-left: 1px solid var(--bs-border-color);
}

.asso-fnspf-table td,
.asso-fnspf-table thead th {
    padding-top: .3rem;
    padding-bottom: .3rem;
}

/* La colonne du bouton radio : juste assez large pour lui, centrée. */
.asso-fnspf-choix {
    width: 2.25rem;
    text-align: center;
}

/* 🚨 TOUTE LA LIGNE EST CLIQUABLE, SANS UNE LIGNE DE JAVASCRIPT : chaque cellule porte un `<label for>`
   qui vise le bouton radio de sa ligne, et ce label doit occuper la cellule entière pour que le clic
   porte partout. Un `onclick` aurait été du code mort au front-office (CSP, § 6.2). */
.asso-fnspf-cellule {
    display: block;
    margin-bottom: 0;
    cursor: pointer;
}

/* La sous-ligne : nom de naissance, lieu, code UD. Elle départage sans occuper une colonne. */
.asso-fnspf-second {
    font-size: .75rem;
    line-height: 1.2;
}

/* Les dates en chiffres à chasse fixe : c'est ce qui permet de comparer deux jours de naissance d'un
   coup d'œil au lieu de les lire. */
.asso-fnspf-date {
    font-variant-numeric: tabular-nums;
}

/* 🚨 LA LIGNE COCHÉE SE VOIT — l'identité approuvée est RECOPIÉE dans le dossier (D28), et plus aucune
   ligne n'est pré-cochée depuis R-57 : le gestionnaire doit pouvoir vérifier d'un regard laquelle il a
   choisie avant de valider.

   ⚠️ `:has()` et non une classe posée par script : le bouton radio est le seul état, et le CSS le lit
   là où il est. C'est aussi ce qui fait que le rendu reste juste après un swap HTMX — il n'y a rien à
   réappliquer. */
.asso-fnspf-table tbody tr:has(input[name="codeAdherent"]:checked) > td {
    background-color: rgba(var(--bs-primary-rgb), .08);
}

.asso-fnspf-table tbody tr:has(input[name="codeAdherent"]:checked) > td:first-child {
    box-shadow: inset .2rem 0 0 var(--mnspf-bleu);
}

/* ⚠️ LE BOUTON EST ATTÉNUÉ TANT QUE RIEN N'EST CHOISI, il n'est pas désactivé : c'est le `required` du
   bouton radio qui BLOQUE réellement l'envoi et qui explique pourquoi. Une atténuation qui prétendrait
   interdire laisserait l'utilisateur sans message le jour où elle se tromperait. */
.asso-fnspf:not(:has(input[name="codeAdherent"]:checked)) .asso-fnspf-valider {
    opacity: .55;
}

/* ------------------------------------------------------------------------------------------------
   LES COUPLES LIBELLÉ / VALEUR D'UNE FICHE (retour de recette du 11/09 — « lisibilité des fiches
   sinistre »).

   🚨 LE MOTIF REMPLACÉ EST `<dl class="row small">` + `col-5`/`col-7`, ET IL POSAIT DES COLONNES
   SANS POSER DE RANGÉES. Entre le couple n et le couple n+1, l'œil n'avait qu'un demi-interligne ;
   sur une synthèse de seize lignes, suivre un libellé jusqu'à sa valeur devenait un exercice. Trois
   causes se cumulaient, et les trois se corrigent ici : aucun filet horizontal, un libellé et une
   valeur de même poids (les deux héritent du `color: #666` du corps, le `<dt>` n'étant distingué que
   par le gras de Bootstrap), et un `.small` posé sur le bloc ENTIER qui ramenait la valeur — ce
   qu'on vient lire — à 12,25 px.

   ⚠️ LE CONTRASTE EST INVERSÉ, et c'est le cœur du correctif : le libellé s'efface (gris, petit
   corps, sans gras), la valeur prend l'encre et un demi-niveau de graisse. C'est la valeur qu'on
   cherche, pas l'étiquette.

   ⚠️ `tabular-nums` sur les valeurs : les dates et les codes s'alignent au chiffre près d'une rangée
   à l'autre, ce qui est la moitié de la lisibilité d'une colonne de dates.

   ⚠️ Ces classes vivent ici, dans le CSS COMMUN, parce que les deux zones portent la même fiche —
   le front-office ne partage plus le thème du back-office, mais il charge toujours ce fichier. La
   classe s'écrit une fois, les couleurs se résolvent par zone (CLAUDE.md § 5.5).
   ------------------------------------------------------------------------------------------------ */

:root {
    /* Le gris du libellé et le filet de rangée : deux valeurs, deux rôles, nommées pour qu'un
       gabarit n'ait jamais à les écrire (CLAUDE.md § 4 — pas de couleur en dur dans les templates). */
    --mnspf-libelle: #7d8ea1;
    --mnspf-filet: #e3e9f0;
    --mnspf-zebrure: #f7fafd;
}

/* ── Piste « Rangées » : un couple par rangée, un filet entre chaque ─────────────────────────── */

/* 🚨 UNE GRILLE, ET NON LA GRILLE DE BOOTSTRAP : c'est elle qui fait disparaître le couple ENTIER
   quand un `th:if` retire ses deux balises — le `<dt>` et le `<dd>` conditionnels (cause de clôture,
   motif du refus) ne laissent aucun trou, la grille se referme. Avec `row`/`col-*`, la même absence
   laissait une gouttière. */
.fiche-dl {
    display: grid;
    grid-template-columns: minmax(8rem, 36%) 1fr;
    column-gap: 1rem;
    margin: 0;
}

/* ⚠️ `> dt` et `> dd`, jamais `dt`/`dd` : une `<dl>` imbriquée (la modale de détail en porte) ne doit
   pas hériter du filet de sa mère. */
.fiche-dl > dt,
.fiche-dl > dd {
    margin: 0;
    padding: .42rem 0;
    border-top: 1px solid var(--mnspf-filet);
    min-width: 0;
}

/* Le premier couple n'a pas de filet au-dessus : le bord de la card en tient lieu. ⚠️ `first-of-type`
   et non `first-child` — un `<th:block>` ne laisse rien dans le rendu, mais un commentaire ou un
   nœud texte, si. */
.fiche-dl > dt:first-of-type,
.fiche-dl > dt:first-of-type + dd {
    border-top: 0;
    padding-top: 0;
}

.fiche-dl > dt {
    font-weight: 400;
    color: var(--mnspf-libelle);
    font-size: .8125rem;
}

.fiche-dl > dd {
    color: var(--mnspf-bleu-fonce);
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}

/* 🚨 `.fiche-sec` A DISPARU (retour d'écran du 2026-09-15) — la classe n'est plus posée par aucun
   gabarit, ni ici ni sur la grille du récapitulatif, et ses deux règles sont parties avec elle.
   Le complément d'une réponse n'est pas une note de bas de page : c'est la FIN de la réponse, et il
   se lit à la suite, dans la même police — « réponse : complément ». La phrase est assemblée par
   `affichageAvecComplement()`, dans le modèle, pour que les deux fiches la disent pareil (§ 5.5).
   Ne pas la rouvrir pour « nuancer » un complément : c'est précisément ce qui a mis trois styles
   d'affichage dans une card qui n'a que deux rôles, un libellé et une valeur. */

.fiche-dl > dd ul {
    margin: .25rem 0 0;
    padding-left: 1.1rem;
    font-weight: 400;
}

/* ⚠️ Les libellés-PHRASES du questionnaire (« Que faisiez-vous au moment des faits ? ») ne tiennent
   pas dans 36 % : la variante leur donne la moitié de la card. */
.fiche-dl-large {
    grid-template-columns: minmax(8rem, 55%) 1fr;
}

/* ── Piste « Groupes » : les mêmes rangées, chapitrées ───────────────────────────────────────── */

/* 🚨 AU-DELÀ D'UNE DIZAINE DE LIGNES, CE N'EST PLUS LA SÉPARATION QUI MANQUE, C'EST LA STRUCTURE :
   la synthèse enchaîne trois natures d'information — le contrat, la personne, les faits — que trois
   `<dl>` séparent déjà dans le code sans que l'écran le montre. L'intertitre rend visible une
   couture qui existait. */

/* 🚨 Frère GÉNÉRAL (`~`) et non adjacent (`+`) : le groupe du milieu est un fragment qui, sur un
   dossier sans personne physique, se rend quand même mais en `d-none` — il n'a alors plus la classe
   `.fiche-groupe`, et un sélecteur adjacent aurait collé le groupe suivant au précédent. */
.fiche-groupe ~ .fiche-groupe {
    margin-top: .9rem;
}

.fiche-groupe-titre {
    font-size: .6875rem;
    font-weight: 600;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--mnspf-bleu);
    margin: 0 0 .35rem;
    padding-bottom: .25rem;
    border-bottom: 2px solid var(--mnspf-bleu);
}

/* La zébrure remplace le filet de rangée à l'intérieur d'un groupe : deux repères horizontaux
   concurrents feraient un damier. ⚠️ Les marges négatives étendent la bande jusqu'au bord du
   rembourrage de la card — sans elles, la zébrure s'arrête avant le texte et se lit comme une
   sélection. */
.fiche-dl-zebre > dt,
.fiche-dl-zebre > dd {
    border-top: 0;
    padding: .38rem .5rem;
}

.fiche-dl-zebre > dt {
    margin-left: -.5rem;
}

.fiche-dl-zebre > dd {
    margin-right: -.5rem;
}

.fiche-dl-zebre > dt:nth-of-type(odd),
.fiche-dl-zebre > dt:nth-of-type(odd) + dd {
    background-color: var(--mnspf-zebrure);
}

/* ── Piste « Paires empilées » : le libellé AU-DESSUS de sa valeur ───────────────────────────── */

/* 🚨 C'EST LA RÉPONSE AUX LIBELLÉS FIGÉS À LA SAISIE. Une question du questionnaire tient sur trois
   lignes face à une réponse d'un mot : en colonnes, la droite est un ruban de vide et le filet
   souligne ce vide au lieu de le combler. Empilée, la question dispose de la pleine largeur, et
   aucune colonne fixe n'a plus à tenir un libellé dont on ne connaît pas la longueur — c'est la
   seule disposition qui ne se dégrade pas quand le questionnaire évolue.

   ⚠️ Chaque couple s'enveloppe dans un `<div>` : HTML5 l'autorise dans une `<dl>` sans rien perdre
   de la sémantique, et c'est ce qui permet à la grille de traiter le couple comme UN élément. */
.fiche-dl-grille {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
    gap: .85rem 1.5rem;
    margin: 0;
}

.fiche-dl-grille > div {
    min-width: 0;
}

.fiche-dl-grille dt {
    font-size: .8125rem;
    font-weight: 400;
    color: var(--mnspf-libelle);
    line-height: 1.35;
    margin: 0 0 .15rem;
}

.fiche-dl-grille dd {
    margin: 0;
    font-size: .95rem;
    font-weight: 600;
    color: var(--mnspf-bleu-fonce);
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
}

/* 🚨 LES SOUS-CHAMPS D'UNE QUESTION COMPOSITE SONT DES RÉPONSES, PAS UNE NOTE DE BAS DE PAGE (retour
   de recette du 2026-09-15). Ils étaient une liste à puces de phrases « Libellé : valeur », en .84rem
   sans graisse, tandis que toute réponse simple de la même card se lit en .95rem gras : trois styles
   d'affichage pour une seule nature d'information, et le plus discret servait à ce qui en portait le
   plus — l'identité du défunt, les coordonnées du tiers lésé. Ils reprennent donc les DEUX rôles de la
   card, libellé et valeur, hérités des sélecteurs ci-dessus sans une déclaration de plus.

   ⚠️ UNE LIGNE FLEX QUI SE REPLIE, ET NON DEUX COLONNES : les libellés sont FIGÉS À LA SAISIE, donc de
   longueur imprévisible par construction — une colonne d'intitulés se ferait manger par « Nom Prénom ou
   raison sociale » et rejetterait la valeur dans une case étroite. En flex, la paire tient sur une ligne
   quand elle peut et passe à la ligne quand elle ne peut pas.

   ⚠️ C'est cette mise en paires qui a permis de RETIRER `.fiche-large` (`grid-column: 1 / -1`) : une
   composite tient désormais dans une colonne. Tant qu'elle prenait la largeur entière, elle ouvrait une
   rangée neuve et laissait les colonnes restantes de la précédente vides — le « trou en haut à droite »
   du même retour, visible sur une déclaration Décès dont la première réponse est simple. */
.fiche-champs {
    display: grid;
    gap: .15rem 0;
    margin: .25rem 0 0;
}

.fiche-champs > div {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0 .4rem;
    min-width: 0;
}

/* ⚠️ Le libellé d'un sous-champ ne porte pas la marge basse des libellés de la grille : elle
   décalerait la ligne flex sans rien séparer. */
.fiche-champs dt {
    margin: 0;
}

/* Le deux-points relève de la présentation, pas de la donnée : il sépare deux rôles que la couleur et
   la graisse distinguent déjà, et il s'en va avec eux si la card change de disposition. */
.fiche-champs dt::after {
    content: " :";
}

/* ------------------------------------------------------------------------------------------------
   LES LISTES FILTRABLES : UN CHAMP SOUDÉ À SA LISTE, ET UNE BARRE QUI DIT CE QU'ON REGARDE
   (retour de recette du 2026-09-11 — « je ne trouve pas mon organisme dans la liste »).

   🚨 LE DÉFAUT N'ÉTAIT PAS LA TRONCATURE, C'ÉTAIT DE NE PAS LA DIRE. Huit écrans posent le même
   contrôle : un champ de recherche, et en dessous ce que le serveur renvoie — cinquante lignes au
   plus. Rien à l'écran ne distinguait « voici les 50 premiers sur 312 » de « voici tout ce qui
   existe », et un utilisateur qui ne trouve pas son organisme en conclut à un filtrage qu'il ne
   comprend pas, pas à une recherche à préciser. Trois remèdes, et ce fichier porte le troisième :
   annoncer la coupe, classer par pertinence (côté SQL), et **rendre visible que le champ et la
   liste sont un seul contrôle**.

   🚨 CHAMP ET LISTE SONT UN SEUL OBJET, DONC UN SEUL CADRE. Deux boîtes empilées avec une gouttière
   entre elles se lisent comme deux contrôles indépendants : on remplit le champ, puis on cherche
   ailleurs ce qu'il a changé. Ici la bordure est portée par le CONTENEUR ; le champ perd la sienne
   et ses arrondis du bas, la liste perd les siens du haut, et la barre de résultat s'intercale entre
   les deux. Le regard qui quitte le champ tombe sur la phrase qui répond.

   ⚠️ LA BARRE EST EN TÊTE, JAMAIS EN PIED. Une coupe annoncée sous cinquante lignes n'est lue que
   par qui a déjà tout fait défiler — c'est-à-dire par personne, et surtout pas par celui qui abandonne
   à la dixième. Le gabarit lui pose `aria-live="polite"` : le contenu change sans que le focus quitte
   le champ, donc seule l'annonce vocale peut le dire à qui ne voit pas l'écran.

   ⚠️ ET ELLE EST TOUJOURS RENDUE, même quand la liste est vide ou complète — c'est elle qui ferme le
   cadre sous le champ. Un champ soudé au vide ressemble à une boîte cassée ; et une barre qui
   apparaît seulement en cas de coupe fait sauter la liste d'une hauteur de ligne à chaque frappe.

   ⚠️ TROIS FORMES DE CORPS, UN SEUL CADRE : une `list-group` de lignes cliquables (rattachement),
   une `list-group` de choix exclusifs (choix du parent), un `<select>` (les cinq écrans de saisie).
   Le cadre, la soudure et la barre sont communs ; ce qui change est à l'intérieur.
   ------------------------------------------------------------------------------------------------ */

/* Le cadre commun. ⚠️ `overflow: clip` — et non des arrondis reposés pièce par pièce à l'intérieur :
   le cadre coupe ce qui dépasse de ses coins, donc le champ, la barre et la liste s'y inscrivent
   quelle que soit la forme de chacun, y compris quand la liste est encore vide. C'est possible
   PARCE QUE le halo de focus est porté par le cadre lui-même (règle suivante) et non par le champ :
   posé à l'intérieur, il serait rogné. `clip` plutôt que `hidden` : aucune boîte de défilement
   parasite ne se crée, et la liste garde la sienne. */
.liste-filtrable {
    border: 1px solid var(--mnspf-filet);
    border-radius: var(--bs-border-radius, .375rem);
    background-color: #fff;
    overflow: clip;
}

/* 🚨 LE CHAMP N'A PLUS DE BORDURE PROPRE — c'est le cadre qui la porte. `box-shadow: none` retire
   aussi le halo de focus de Bootstrap, qui dessinerait un rectangle flottant À L'INTÉRIEUR du cadre
   et défairait la soudure ; il est remplacé plus bas par une teinte du cadre entier. */
.liste-filtrable .form-control,
.liste-filtrable .input-group > .form-control {
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.liste-filtrable .input-group > .btn,
.liste-filtrable .input-group-text {
    border: 0;
    border-radius: 0;
    background-color: transparent;
}

/* ⚠️ LE FOCUS SE DÉPLACE SUR LE CADRE, il ne disparaît pas : `:focus-within` allume l'objet entier,
   ce qui est exactement ce qu'on veut faire comprendre — taper dans le champ agit sur la liste. */
.liste-filtrable:focus-within {
    border-color: var(--mnspf-bleu);
    box-shadow: 0 0 0 .2rem rgba(var(--bs-primary-rgb), .15);
}

/* ── La barre de résultat ────────────────────────────────────────────────────────────────────── */

/* Teintée, et seulement teintée : un fond différent du champ et de la liste suffit à la poser comme
   une annonce et non comme une première ligne de résultat. Les filets font le reste. */
.liste-filtrable-barre {
    padding: .35rem .75rem;
    background-color: var(--mnspf-zebrure);
    border-top: 1px solid var(--mnspf-filet);
    border-bottom: 1px solid var(--mnspf-filet);
    font-size: .82rem;
    color: var(--mnspf-libelle);
    font-variant-numeric: tabular-nums;
}

/* La coupe est la seule information qui appelle un geste (« précisez la recherche ») : elle prend
   l'encre du texte courant, le reste de la barre s'efface. */
.liste-filtrable-barre .liste-filtrable-coupe {
    color: var(--mnspf-bleu-fonce);
    font-weight: 600;
}

/* ── Le corps : la liste, ou le `<select>` ───────────────────────────────────────────────────── */

/* 🚨 LA HAUTEUR SE BORNE AU BON ÉTAGE, ET IL N'EST PAS LE MÊME DES DEUX CÔTÉS. Un `<select>` compte en
   LIGNES (`size`) et gère son propre défilement : lui poser un cadre défilant par-dessus en ferait deux,
   emboîtés, et la molette n'irait plus là où on croit. Une `list-group`, elle, ne sait pas se borner —
   c'est ce modificateur qui le fait pour elle. D'où deux règles et non une. */
.liste-filtrable-defilante {
    max-height: 15rem;
    overflow-y: auto;
}

.liste-filtrable-corps > .form-select,
.liste-filtrable-corps > select {
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

/* Les filets internes de la `list-group` suffisent : celui du haut ferait doublon avec le filet bas
   de la barre, et celui du bas avec la bordure du cadre. */
.liste-filtrable-corps .list-group > .list-group-item:first-child {
    border-top: 0;
}

.liste-filtrable-corps .list-group > .list-group-item:last-child {
    border-bottom: 0;
}

/* ── Le choix exclusif : c'est la LIGNE qui s'allume, pas une pastille ───────────────────────── */

/* 🚨 PAS DE BOUTON RADIO DESSINÉ DANS UNE LISTE (arbitrage du 2026-09-11 sur la maquette) : une
   colonne de pastilles au milieu de lignes qui portent déjà un nom, un code, un badge de type et
   une mention « Désactivé » se lit comme un formulaire égaré dans un résultat de recherche.

   ⚠️ MAIS L'`<input type="radio">` RESTE DANS LE DOM, masqué, et le `<label>` enveloppe la ligne.
   Rien ne change côté serveur — même `name`, même envoi — et rien ne change au clavier : Tab entre
   dans le groupe, les flèches parcourent les choix, le lecteur d'écran annonce toujours « bouton
   radio, coché ». Ce qu'on retire est le dessin, pas le contrôle. Un `<select>` mono-sélection
   aurait fait le même travail à moindres frais, mais une `<option>` ne sait porter ni le badge de
   type ni la mention « Désactivé », et ce sont elles qui permettent de choisir.

   ⚠️ `:has()` et non une classe posée par script : l'état vit dans le bouton radio, le CSS le lit
   là où il est. C'est aussi ce qui fait que le rendu reste juste après un swap HTMX — il n'y a rien
   à réappliquer, et aucun JS maison à écrire. */
.liste-filtrable-choix {
    position: relative;
    cursor: pointer;
    margin-bottom: 0;
}

.liste-filtrable-choix input[type="radio"] {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.liste-filtrable-choix:has(input[type="radio"]:checked) {
    background-color: rgba(var(--bs-primary-rgb), .08);
    box-shadow: inset .2rem 0 0 var(--mnspf-bleu);
}

/* La coche est écrite dans le gabarit et réservée sa place en permanence : la révéler par
   `visibility` et non par `display` évite que la ligne cochée ne se décale d'un caractère. */
.liste-filtrable-choix .liste-filtrable-coche {
    visibility: hidden;
    color: var(--mnspf-bleu);
}

.liste-filtrable-choix:has(input[type="radio"]:checked) .liste-filtrable-coche {
    visibility: visible;
}

/* 🚨 LE FOCUS CLAVIER DOIT SE VOIR ALORS QUE CE QUI LE REÇOIT EST INVISIBLE — sans cette règle, les
   flèches parcourent la liste sans que rien ne bouge à l'écran tant qu'aucun choix n'est validé. */
.liste-filtrable-choix:has(input[type="radio"]:focus-visible) {
    outline: 2px solid var(--mnspf-bleu);
    outline-offset: -2px;
}

/* ⚠️ REPLI : sur un navigateur sans `:has()`, les trois règles ci-dessus ne s'appliquent pas et la
   ligne cochée serait indiscernable. On y remontre donc le bouton natif — moins beau, mais utilisable,
   ce qui est le seul critère qui compte ici. */
@supports not selector(:has(*)) {
    .liste-filtrable-choix input[type="radio"] {
        position: static;
        width: auto;
        height: auto;
        opacity: 1;
        pointer-events: auto;
    }
}

/* ------------------------------------------------------------------------------------------------
   UN CHAMP DE DATE A UNE LARGEUR CONNUE (retour d'écran du 2026-09-16).

   `form-control` vaut `width: 100%` : un champ de date s'étirait donc sur toute la largeur de sa
   colonne — la carte entière du questionnaire, soit la page — pour dix caractères. Le défaut n'est
   pas esthétique : un contrôle beaucoup plus large que ce qu'il attend ne dit plus ce qu'il attend,
   et il se lit comme un champ libre à côté des champs libres qui l'entourent.

   🚨 C'est un PLAFOND, pas une largeur : `max-width` laisse le champ rester à 100 % en dessous, donc
   il tient encore la colonne sur un téléphone. Une largeur fixe, elle, déborderait.

   ⚠️ La valeur couvre « 31/12/2026 » plus le bouton d'agenda que le navigateur pose lui-même, et
   celui de Firefox est le plus large des trois. Elle n'est pas le résultat d'un calcul au pixel : on
   plafonne large, parce qu'un champ un peu trop grand se lit, alors qu'un champ trop court coupe la
   date ou l'agenda — et cette coupe-là ne se verrait que sur le navigateur qu'on n'a pas essayé.
   ------------------------------------------------------------------------------------------------ */
.champ-date {
    max-width: 11rem;
}