/*
 * [hors-planning ABC-4-25 2026-10-06] Composant commun des tableaux de données (G5.6) et filtres
 * repliés (E27). Classe .tableau-rif posée sur CHAQUE <table> de données (pages publiques, espace
 * personnel, administration) : en-têtes sombres, lignes alternées, survol, chiffres alignés à droite
 * en tabular-nums, légende (caption), ligne « Aucun résultat ». Le défilement horizontal reste celui
 * des classes Bootstrap déjà posées (table-responsive / d-block d-md-table, TableauxDefilentHorizontalementTest).
 * Liée par les deux layouts (base.html.twig et front/base.html.twig), APRÈS Bootstrap : à spécificité
 * égale elle l'emporte, sur Bootstrap 5 (public) comme sur le Bootstrap 4 du back-office.
 * Contrastes : texte #212529 sur #fff 16:1 ; en-tête #fff sur #212529 16:1 ; focus #0a58ca.
 *
 * Filtres repliés (.repli-filtres) : <details> SANS « open », donc replié à l'arrivée et ouvrable au
 * clavier ou à la souris SANS JavaScript ; <summary> = bouton (44 px de haut au moins).
 */

/* [hors-planning ABC-4-34 L4] Règle unique des listes déroulantes (liée ici car cette feuille l'est par les deux layouts). */
@import url("composants/listes-deroulantes-st9ldIC.css");
/* [hors-planning ABC-4-34 · L5] Jetons --ds-* et composants communs (carte, détail, message d'information). */
@import url("composants/jetons-fl_Q6br.css");
@import url("composants/detail-e8Mv0Hn.css");
@import url("composants/echange-9l9yKHk.css");
/* [hors-planning ABC-4-46] Tableaux de bord (Mon espace, administration). */
@import url("composants/tableau-de-bord-w2mdk8H.css");
/* [B-R-139] Composant unique des tableaux : compact, texte coupé, barre d'outils, pagination. */
@import url("composants/tableau-910BRi-.css");
@import url("composants/boutons-geste-ZgC_y7c.css");
/* [BC-4-153] Notes en couleur (code d'EUSEP). */
@import url("composants/niveaux-notes-fI6atgb.css");
/* [ABC-4-146] Table des paiements du back-office. */
@import url("composants/paiements-admin-F04ShmY.css");
/* [B-4-138] Listes de données publiées : barre d'export et tableau modernes (portée .liste-donnees). */
@import url("composants/liste-donnees-8GuGD4Y.css");
/* [ABC-4-281] Cloche et alertes en direct du back-office. */
@import url("composants/cloche-administration-R5qnVFs.css");
/* [ABC-4-237] Défi anti-robot Turnstile (_composants/_defi_anti_robot.html.twig) : 375 px sans débordement. */
@import url("composants/defi-anti-robot-Ev14_k_.css");

table.tableau-rif {
    --bs-table-bg: transparent;
    --bs-table-striped-bg: transparent;
    --bs-table-hover-bg: transparent;
    --bs-table-color: #212529;
    --bs-table-border-color: #dee2e6;
    width: 100%;
    margin-bottom: 1rem;
    border-collapse: collapse;
    color: #212529;
    background-color: #fff;
}
table.tableau-rif caption {
    caption-side: top;
    padding: .6rem .75rem;
    text-align: left;
    color: #495057;
    font-size: .9em;
}
table.tableau-rif > thead > tr > th,
table.tableau-rif > thead > tr > td {
    background-color: #212529;
    color: #fff;
    border: 0;
    border-bottom: 2px solid #212529;
    box-shadow: none;
    padding: .3rem .6rem;
    text-align: left;
    vertical-align: middle;
    font-weight: 600;
}
table.tableau-rif > thead a { color: #fff; text-decoration: none; }
table.tableau-rif > thead a:hover { text-decoration: underline; text-underline-offset: 4px; }
table.tableau-rif > thead a:focus-visible,
table.tableau-rif a:focus-visible { outline: 3px solid #0a58ca; outline-offset: 2px; }
table.tableau-rif > thead a:focus-visible { outline-color: #fff; }
table.tableau-rif > tbody > tr > th,
table.tableau-rif > tbody > tr > td {
    background-color: #fff;
    border: 0;
    border-top: 1px solid #dee2e6;
    box-shadow: none;
    padding: .3rem .6rem;
    vertical-align: top;
}
table.tableau-rif > tbody > tr > th { text-align: left; font-weight: 600; }
table.tableau-rif > tbody > tr:nth-child(even) > * { background-color: #f3f6fb; }
table.tableau-rif > tbody > tr:hover > * { background-color: #e7edf8; }
table.tableau-rif td.text-end,
table.tableau-rif th.text-end,
table.tableau-rif td.text-right,
table.tableau-rif th.text-right,
table.tableau-rif .num {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
table.tableau-rif td[colspan="99"] {
    padding: 1.5rem 1rem;
    text-align: center;
    color: #495057;
    font-style: italic;
}

/* ---- Filtres repliés par défaut ---- */
.repli-filtres { margin: 0 0 1rem; }
.repli-filtres > summary.repli-filtres__resume {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    min-height: 44px;
    padding: .5rem 1rem;
    border: 1px solid #adb5bd;
    border-radius: .375rem;
    background: #fff;
    color: #212529;
    font-weight: 600;
    cursor: pointer;
    list-style: none;
}
.repli-filtres > summary.repli-filtres__resume::-webkit-details-marker { display: none; }
.repli-filtres > summary.repli-filtres__resume::after {
    content: "";
    width: .55rem;
    height: .55rem;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    margin-top: -.25rem;
    transition: transform .15s;
}
.repli-filtres[open] > summary.repli-filtres__resume::after { transform: rotate(-135deg); margin-top: .25rem; }
.repli-filtres > summary.repli-filtres__resume:hover { background: #f3f6fb; }
.repli-filtres > summary.repli-filtres__resume:focus-visible { outline: 3px solid #0a58ca; outline-offset: 2px; }
.repli-filtres__actifs { font-weight: 400; color: #0a58ca; }
/* [B-R-44 · G42, point 9] Rappel des critères appliqués, sous le titre de la liste : « Libellé : valeur · … ». */
.criteres-appliques { margin: -.25rem 0 .75rem; color: #495057; font-size: .95rem; }
.criteres-appliques strong { color: #212529; font-weight: 600; overflow-wrap: anywhere; }
.repli-filtres[open] > summary.repli-filtres__resume { margin-bottom: .75rem; }
@media (prefers-reduced-motion: reduce) {
    .repli-filtres > summary.repli-filtres__resume::after { transition: none; }
}
@media (max-width: 575.98px) {
    table.tableau-rif > thead > tr > th,
    table.tableau-rif > tbody > tr > th,
    table.tableau-rif > tbody > tr > td { padding: .3rem .6rem; }  /* [B-R-139] même compacité à 375 px */
}

/* [hors-planning ABC-4-34 · L2] Composant commun « zone sans donnée » (_composants/_vide.html.twig)
   et champ verrouillé (_composants/_champ_verrouille.html.twig) : un seul style partout. */
.vide { color: #5c6370; }
.vide--bloc { margin: .5rem 0; padding: .75rem 1rem; background: #f6f7f9; border: 1px dashed #c9ced6; border-radius: .25rem; font-style: italic; }
.vide--ligne td { text-align: center; color: #5c6370; font-style: italic; padding: 1rem; }
.vide--cellule, .vide--fiche { white-space: nowrap; }
.vide--fiche { font-style: italic; }

.champ-verrouille { position: relative; }
.champ-verrouille__controle { display: flex; align-items: center; gap: .5rem; }
.champ-verrouille .form-control,
.champ-verrouille input,
.champ-verrouille select { background-color: var(--ds-couleur-champ-verrouille); color: var(--ds-couleur-texte-doux); border-color: var(--ds-couleur-trait); cursor: not-allowed; border-style: dashed; }
/* [B-R-38] Le thème « Sarcelle » (rif-pages.css : `.source-content input:not(…)`, fond blanc, trait plein) l'emportait sur ce rendu : un champ verrouillé
   ressemblait à un champ modifiable (G11). Même rendu, avec la spécificité qu'il faut. */
.source-content .champ-verrouille input:not([type=checkbox]):not([type=radio]):not([type=hidden]),
.source-content .champ-verrouille select { background: var(--ds-couleur-champ-verrouille); color: var(--ds-couleur-texte-doux); border: 1px dashed var(--ds-couleur-trait); cursor: not-allowed; }
.champ-verrouille__cadenas { flex: none; color: var(--ds-couleur-texte-doux); }

/* [hors-planning ABC-4-34 · L6] Mon adhésion : synthèse en cartes par catégorie (message 19, point 1). */
.adhesion-cartes { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 1rem; margin-bottom: 1.5rem; }
.adhesion-carte h2 { font-size: var(--ds-texte-base); font-weight: 600; margin: 0 0 var(--ds-espace-3); padding-bottom: var(--ds-espace-2); border-bottom: 1px solid var(--ds-couleur-trait); color: var(--ds-couleur-primaire-fonce); }
.adhesion-carte h2 { display: flex; align-items: center; gap: var(--ds-espace-2); }
.adhesion-carte__icone { flex: none; }  /* [ABC-4-67] icône décorative devant le titre de chaque carte */
.adhesion-carte dl { margin: 0; }
.adhesion-carte dt { font-size: var(--ds-texte-petit); font-weight: 600; color: var(--ds-couleur-texte-doux); margin-top: var(--ds-espace-3); }
.adhesion-carte dt:first-child { margin-top: 0; }
.adhesion-carte dd { margin: var(--ds-espace-1) 0 0; overflow-wrap: anywhere; }

/* [hors-planning ABC-4-35 lot 4] Barre d'outils commune des tableaux d'administration (compte, filtres, puces, Exporter). */
.tableau-admin__outils { margin-bottom: 1rem; }
.tableau-admin__compte { margin: 0 0 .5rem; color: #495057; }
.tableau-admin__puces { margin: 0 0 .5rem; padding: 0; }
/* [B-R-44 · 375 px] .badge de Bootstrap = nowrap : un libellé long élargissait la page ; la puce passe à la ligne. */
.tableau-admin__puces .badge { font-size: .875rem; padding: .4rem .6rem; color: #fff; background-color: #495057; white-space: normal; overflow-wrap: anywhere; min-width: 0; max-width: 100%; text-align: left; }
.tableau-admin__retirer { color: #fff; margin-left: .35rem; text-decoration: none; }
.tableau-admin__export { display: inline-block; }
.tableau-admin__exporter > summary { list-style: none; cursor: pointer; }
.tableau-admin__exporter > summary::-webkit-details-marker { display: none; }
.tableau-admin__formats { margin: .25rem 0 0; padding: .25rem; border: 1px solid #dee2e6; border-radius: .25rem; background: #fff; }

/* [hors-planning ABC-4-45] Barre de boutons des tableaux d'administration : « Filtrer », « Rechercher », « Exporter » —
   de vrais boutons pleins (couleur, icône, libellé), sur une ligne, même place partout. Le panneau des filtres s'ouvre
   sous « Filtrer » sans JavaScript (<details>) ; il reste replié par défaut (G5.6). */
.tableau-admin__barre { display: flex; flex-wrap: wrap; gap: .5rem; align-items: flex-start; margin: 0 0 1rem; }
.tableau-admin__recherche { display: flex; flex-wrap: wrap; gap: .5rem; align-items: flex-start; flex: 1 1 24rem; }
.tableau-admin__recherche .tableau-admin__champ { flex: 1 1 12rem; min-width: 10rem; max-width: 28rem; min-height: 44px; width: auto; }
.tableau-admin__bouton { display: inline-flex; align-items: center; gap: .4rem; min-height: 44px; font-weight: 600; cursor: pointer; list-style: none; }
.tableau-admin__bouton::-webkit-details-marker { display: none; }
.tableau-admin__bouton::after { content: none; }
.tableau-admin__filtrer, .tableau-admin__exporter { position: relative; margin: 0; }
.tableau-admin__filtrer > summary.btn::after { content: none; }
.tableau-admin__panneau { position: absolute; z-index: 20; top: calc(100% + .25rem); left: 0; width: min(46rem, 92vw); padding: .75rem; border: 1px solid #dee2e6; border-radius: .375rem; background: #fff; box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15); }
.tableau-admin__exporter > .tableau-admin__formats { position: absolute; z-index: 20; top: calc(100% + .25rem); right: 0; min-width: 8rem; }
.tableau-admin__export { display: inline-block; }

/* [ABC-4-81] Champs d'adhésion grisés tant que la case de la charte n'est pas cochée (adhesion-verrou.js). */
fieldset.adhesion-champs { border: 0; padding: 0; margin: 0; min-width: 0; }
/* [hors-planning ABC-4-97] Page publique d'adhésion à 375 px : le texte réservé aux lecteurs d'écran (.visually-hidden des astérisques) du groupe grisé élargissait la page (586 px) ; on coupe le débordement horizontal du groupe, sans toucher au vertical (listes d'adresse). */
#adhesion-publique fieldset.adhesion-champs { overflow-x: clip; }
fieldset.adhesion-champs:disabled input, fieldset.adhesion-champs:disabled select { background: #e9ecef !important; color: #6c757d; border-color: #ced4da; cursor: not-allowed; }
fieldset.adhesion-champs:disabled label { color: #6c757d; cursor: not-allowed; }

/* [ABC-4-90] Civilité M. / Mme : deux boutons radio exclusifs, même rendu que les cases du formulaire d'adhésion, alignés. */
fieldset.civilite { border: 0; padding: 0; margin: 0 0 1rem; min-width: 0; }
fieldset.civilite legend { float: none; width: auto; padding: 0; margin: 0 0 .25rem; font-size: 1rem; font-weight: 600; }
fieldset.civilite .civilite__choix { display: flex; flex-wrap: wrap; gap: .5rem 1.75rem; }
fieldset.civilite .form-check { margin: 0; display: flex; align-items: center; gap: .6rem; padding-left: 0; }
fieldset.civilite .form-check-input { float: none; margin: 0; flex: 0 0 1.25rem; width: 1.25rem; height: 1.25rem; }
fieldset.adhesion-champs:disabled fieldset.civilite legend, fieldset.adhesion-champs:disabled fieldset.civilite label { color: #6c757d; cursor: not-allowed; }
/* [ABC-4-90] La règle générale des champs (.source-content input:not([type=checkbox]) : 48 px, 100 % de large, cadre arrondi) ne doit pas gonfler les boutons radio. */
.source-content fieldset.civilite input[type=radio].form-check-input { width: 1.25rem; min-width: 1.25rem; height: 1.25rem; min-height: 1.25rem; padding: 0; border-radius: 50%; }

/* [hors-planning ABC-4-89] Charte de l'adhérent : bloc soigné, case de même taille que les boutons radio de la civilité (1,25 rem), alignée sur son libellé. */
.adhesion-charte { display: flex; align-items: flex-start; gap: .6rem; padding: .75rem 1rem; border: 1px solid #ced4da; border-radius: .5rem; background: #f8f9fa; }
.adhesion-charte .form-check-input, .source-content .adhesion-charte input[type=checkbox].form-check-input { float: none; margin: .1rem 0 0; flex: 0 0 1.25rem; width: 1.25rem; min-width: 1.25rem; height: 1.25rem; min-height: 1.25rem; padding: 0; }
.adhesion-charte .form-check-label { margin: 0; line-height: 1.5; }

/* [hors-planning ABC-4-88] Étape « Votre demande a été envoyée » : carte centrée et deux choix de paiement alignés (grille : même colonne, même hauteur, bouton en bas). */
.adhesion-demande-envoyee { max-width: 56rem; margin-inline: auto; }
.cotisation-choix { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin: 1rem 0; }
.cotisation-choix__option { display: flex; border: 1px solid #ced4da; border-radius: .5rem; background: #fff; padding: 1rem; }
.cotisation-choix__option form { display: flex; flex-direction: column; width: 100%; }
.cotisation-choix__titre { font-size: 1.125rem; font-weight: 600; margin: 0 0 .5rem; }
.cotisation-choix__aide { color: #495057; margin: 0 0 1rem; }
.cotisation-choix__option .btn { margin-top: auto; white-space: normal; }
@media (max-width: 767.98px) { .cotisation-choix { grid-template-columns: 1fr; } }

/* [B-4-230 2026-10-15] Boutons radio de TOUS les formulaires (form-check de Bootstrap, ex. « Votre situation d'agent public ») : la règle
   générale des champs de contenu ne les gonfle plus (rif-pages.css : :not([type=radio])) ; ici, bouton de 1,25 rem aligné sur son
   libellé, à côté et non dessous. Couleur cochée (charte sarcelle), contour de focus et cadre d'erreur (is-invalid) : ceux de Bootstrap. */
.source-content .form-check:has(> input[type=radio].form-check-input) { display: flex; align-items: center; gap: .6rem; padding-left: 0; margin-bottom: .5rem; }
.source-content .form-check > input[type=radio].form-check-input { float: none; margin: 0; flex: 0 0 1.25rem; width: 1.25rem; height: 1.25rem; }
.source-content .form-check:has(> input[type=radio].form-check-input) > .form-check-label { display: inline-block; margin: 0; font-weight: 400; }

/* [hors-planning ABC-4-89] Bouton radio COCHÉ visible : la règle générale des champs de contenu (.source-content input:not([type=checkbox]) : fond blanc) effaçait le point
   du bouton radio coché de Bootstrap — l'usager ne voyait pas son choix de civilité. Rendu identique à la case cochée (bleu + point blanc). */
.source-content fieldset.civilite input[type=radio].form-check-input:checked { background-color: #0d6efd; border-color: #0d6efd; background-image: var(--bs-form-check-bg-image); background-repeat: no-repeat; background-position: center; background-size: contain; }

/* [hors-planning ABC-4-103 2026-10-09] Mon adhésion plus lisible : pastille d'état de la cotisation (icône + texte, jamais la couleur
   seule ; contrastes ≥ 4,5:1), reçus en petits boutons à icône, historique en cartes à 375 px, liste « Mes documents ». */
.cotisation-ligne-etat { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; margin-bottom: 1rem; }
.pastille-cotisation { display: inline-flex; align-items: center; gap: .4rem; padding: .3rem .8rem; border-radius: 999px; font-weight: 600; border: 1px solid transparent; }
.pastille-cotisation--payee { background: #d1e7dd; color: #0a3622; border-color: #a3cfbb; }
.pastille-cotisation--non-payee, .pastille-cotisation--echue { background: #ffe5d0; color: #6a2f00; border-color: #fecba1; }
.pastille-cotisation--remboursee { background: #e2e3e5; color: #2b2f32; border-color: #c4c8cb; }
.cotisation-montant { font-weight: 600; color: var(--ds-couleur-texte-doux, #495057); }
.cellule-recus { white-space: nowrap; }
.btn-recu { display: inline-flex; white-space: nowrap; align-items: center; justify-content: center; gap: .35rem; min-width: 2.25rem; min-height: 2.25rem; padding: .25rem .5rem; margin-right: .25rem; }
[data-testid="cotisation-historique"] + .source { margin: .4rem 0 0; font-size: .8rem; }
.liste-documents, ul.liste-documents.list-unstyled { display: grid; gap: .5rem; padding: 0; padding-left: 0; margin-left: 0; }
.document-ligne { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem; padding: .5rem .75rem; border: 1px solid var(--ds-couleur-trait, #dee2e6); border-radius: .5rem; }
.document-nom { display: inline-flex; align-items: center; gap: .5rem; min-width: 0; overflow-wrap: anywhere; }
.document-nom .icone-recu { flex: none; }
@media (max-width: 575.98px) {
    table.tableau-rif[data-testid="cotisation-historique"] thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
    table.tableau-rif[data-testid="cotisation-historique"], table.tableau-rif[data-testid="cotisation-historique"] tbody, table.tableau-rif[data-testid="cotisation-historique"] tr, table.tableau-rif[data-testid="cotisation-historique"] td { display: block; width: 100%; }
    table.tableau-rif[data-testid="cotisation-historique"] tr { border: 1px solid var(--ds-couleur-trait, #dee2e6); border-radius: .5rem; margin-bottom: .75rem; padding: .25rem .75rem; background: #fff; }
    table.tableau-rif[data-testid="cotisation-historique"] td { display: flex; justify-content: space-between; gap: 1rem; border: 0; background: transparent; padding: .35rem 0; text-align: right; }
    /* [ABC-4-103] « td:has(> .btn:only-child) { width: 1% }» (tableaux-aeres.css) écrasait la carte : la cellule « Reçus » doit reprendre toute la largeur. */
    table.tableau-rif[data-testid="cotisation-historique"] tr td.cellule-recus { width: 100%; flex-wrap: wrap; justify-content: flex-end; gap: .35rem; white-space: normal; }
    table.tableau-rif[data-testid="cotisation-historique"] td.cellule-recus .btn-recu { margin-right: 0; }
    table.tableau-rif[data-testid="cotisation-historique"] td::before { content: attr(data-label); font-weight: 600; text-align: left; color: var(--ds-couleur-texte-doux, #495057); }
}

/* [BC-4-149] « Mon profil » : la photo est une section compacte sous les informations, vignette de 72 px à côté des actions. */
.profil-photo { padding: var(--ds-espace-3); }
.profil-photo__corps { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--ds-espace-3); }
.profil-photo__image { flex: none; max-width: 14rem; }
.profil-photo__vignette { width: 72px; height: 72px; object-fit: cover; display: block; }
.profil-photo__actions { flex: 1 1 18rem; }
.profil-photo .form-label { font-size: var(--ds-texte-petit); margin-bottom: var(--ds-espace-1); }

/* [ABC-4-236 2026-10-15] STYLE COMMUN des cases à cocher et boutons radio du site (public, espace personnel, administration, filtres,
   consentements) : la case (1,25 rem) est À GAUCHE de son libellé, alignée sur la première ligne, le libellé reste cliquable
   (for/id) et revient à la ligne sous lui-même, jamais sous la case. Aucun correctif au cas par cas : toute rangée .form-check
   ou .custom-control (ancien balisage Bootstrap 4) passe par ces règles ; les règles plus précises ci-dessus (charte, civilité,
   situation d'agent) gardent leur rendu, qui est le même. Une case n'est jamais gonflée par la règle des champs (48 px, 100 %). */
input[type=checkbox], input[type=radio] { width: 1.25rem; height: 1.25rem; min-height: 0; flex: 0 0 1.25rem; accent-color: var(--sarcelle, #0b5a61); }
.form-check:not(.form-check-inline), .custom-control { display: flex; align-items: flex-start; gap: .6rem; padding-left: 0; min-height: 0; }
.form-check.form-check-inline { display: inline-flex; align-items: flex-start; gap: .6rem; padding-left: 0; margin-right: 1.5rem; }
.form-check > input[type=checkbox], .form-check > input[type=radio], .custom-control > input[type=checkbox], .custom-control > input[type=radio] { position: static; float: none; opacity: 1; z-index: auto; flex: 0 0 1.25rem; width: 1.25rem; min-width: 1.25rem; height: 1.25rem; min-height: 1.25rem; margin: .15rem 0 0; padding: 0; }
.form-check > label, .custom-control > label { display: inline-block; flex: 1 1 auto; min-width: 0; margin: 0; line-height: 1.5; cursor: pointer; overflow-wrap: anywhere; }

/* [B-4-283] « Mes envois » : colonnes équilibrées, boutons de même taille sur une ligne, message d'échec discret. */
table.tableau-envois { table-layout: auto; width: 100%; }
table.tableau-envois .envois-type { width: 20%; white-space: nowrap; }
table.tableau-envois .envois-date { width: 14%; white-space: nowrap; }
table.tableau-envois .envois-statut { width: 40%; }
table.tableau-envois .envois-actions { width: 26%; text-align: right; }
table.tableau-envois > tbody > tr > td { vertical-align: middle; }
table.tableau-envois > tbody > tr > td:nth-child(1) { white-space: nowrap; }
table.tableau-envois .badge { font-size: .8125rem; font-weight: 600; }
table.tableau-envois .envoi-message { font-size: .8125rem; line-height: 1.35; color: #5a6470; max-width: 36rem; }
table.tableau-envois .envoi-actions { text-align: right; white-space: nowrap; }
table.tableau-envois .envoi-actions form { display: inline-block; margin: 0; }
table.tableau-envois .envoi-actions .btn { min-width: 6rem; margin-left: .25rem; }

/* [B-4-270 2026-10-18] Le back-office charge Bootstrap 4, qui n'a pas « visually-hidden » : sans cette règle, le nom du contenu caché
   pour les lecteurs d'écran restait à l'écran dans les boutons d'action. Boutons d'action sur une ligne, serrés. */
.visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.actions-contenu > * {
    margin: 0 0.25rem 0.25rem 0;
}

/* [B-4-270 point 8, 19/10] Ventilations des effectifs de /statistiques : libellé, barre (<meter>, complément du chiffre écrit), valeur. */
.ventilation { margin: 1.5rem 0; }
.ventilation__lignes { list-style: none; padding: 0; margin: 0 0 .75rem; }
.ventilation__lignes li { display: grid; grid-template-columns: minmax(8rem, 16rem) minmax(6rem, 1fr) 6rem; gap: .5rem; align-items: center; padding: .15rem 0; border-bottom: 1px solid rgba(0, 0, 0, .08); }
.ventilation__lignes meter { width: 100%; height: 1rem; }
.ventilation__valeur { text-align: right; font-variant-numeric: tabular-nums; }
@media (max-width: 575.98px) { .ventilation__lignes li { grid-template-columns: 1fr auto; } .ventilation__lignes meter { grid-column: 1 / -1; grid-row: 2; } }
/* [B-R-44 · G42] Le placeholder du référentiel de l'État (cinq exemples) se lit en entier à 1280 px ; pleine largeur sur mobile. */
.referentiel-recherche { width: 100%; max-width: 32rem; }

/* [B-R-110 2026-10-24] Texte SQL complet d'une requête lente : il passe à la ligne (jamais coupé ni défilant, y compris à 375 px). */
pre.sql { white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-word; max-width: 100%; }