/*
 * apps/_shared/static/css/composants.css
 * --------------------------------------
 * LE JEU DE COMPOSANTS COMMUN À TOUT MEELTON : bouton, champ, libellé, aide,
 * carte, tuile de chiffre, pastille, tableau, alerte, indicateur de
 * chargement, champ avec unité, case à cocher.
 * Chargé par le cadre unique (`_cadre_marque.html`) sur toutes les pages de
 * toutes les marques, AVANT la feuille de l'app, qui peut donc préciser.
 *
 * 🚨 POURQUOI (12/10/2026, lot 5 du cadre unique). Les outils recopiaient
 * chacun leur bouton, leur champ et leur carte : les trois outils du Brief
 * (annuaire, baromètre, frais de notaire) avec des écarts de détail, les
 * outils Zero Bullshit (`zbs.css`, `zb-btn`, `zb-card`...) avec leur propre
 * jeu. Une correction faite dans l'un ne valait jamais pour les autres.
 *
 * UN COMPOSANT, DES VALEURS PAR MARQUE. Rien ici n'est propre à une marque :
 * chaque détail visible (couleur, police, casse, taille, marge, arrondi,
 * ombre) se lit dans une variable que la marque pose dans `<marque>/base.html`
 * (bloc `valeurs_marque`). Le repli de chaque variable est la valeur du Brief
 * Patrimonial, la première marque migrée : une marque qui ne déclare rien
 * reçoit ses composants, à ses propres couleurs (`--color-primary`...).
 * Zero Bullshit déclare les siennes (libellés et boutons en capitales
 * monospace, boutons noirs) : c'est l'identité de ses outils, posée comme
 * valeurs, plus comme une seconde copie des composants.
 *
 * Seules les alertes « attention » et « erreur » gardent leurs couleurs
 * d'usage (ambre, rouge) : elles disent un état, pas une marque.
 *
 * PRÉFIXE `m-`, celui du socle (`m-nl` pour le bandeau, `m-encart` pour la
 * publicité) : aucun risque de collision avec une classe d'app ou de Tailwind.
 */

/* ── Bouton ──
   `inline-flex` pour une marque qui met une icône dans ses boutons (ZB) ;
   `align-items`, `justify-content` et `gap` sont sans effet en `inline-block`. */
.m-bouton {
  display: var(--m-bouton-affichage, inline-block);
  align-items: center; justify-content: center; gap: var(--m-esp-2, 8px);
  text-align: center; text-decoration: none; cursor: pointer;
  background: var(--m-bouton-fond, var(--color-primary));
  color: var(--m-bouton-texte, var(--color-text-on-primary));
  font-family: var(--m-bouton-police, inherit);
  font-size: var(--m-bouton-taille, 1rem);
  font-weight: var(--m-bouton-graisse, 600);
  text-transform: var(--m-bouton-casse, none);
  letter-spacing: var(--m-bouton-espacement, normal);
  border: var(--m-bouton-bordure, none);
  border-radius: var(--m-bouton-rayon, 8px);
  padding: var(--m-bouton-marge, 0.75rem 1.9rem);
  transition: opacity 0.2s, transform 0.2s, background-color 0.2s, color 0.2s, border-color 0.2s;
}
.m-bouton:hover {
  background: var(--m-bouton-survol-fond, var(--m-bouton-fond, var(--color-primary)));
  border-color: var(--m-bouton-survol-trait, transparent);
  color: var(--m-bouton-texte, var(--color-text-on-primary));
  opacity: var(--m-bouton-survol-opacite, 0.92);
  transform: translateY(var(--m-bouton-survol-decalage, -1px));
  text-decoration: none;
}
.m-bouton:disabled,
.m-bouton[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; transform: none; }
/* Le bouton secondaire, à côté d'un bouton principal (« Précédent »). */
.m-bouton--contour {
  background: var(--m-contour-fond, #fff);
  color: var(--m-contour-texte, var(--color-primary));
  border: var(--m-contour-bordure, 1px solid var(--color-primary));
  padding: var(--m-contour-marge, 0.7rem 1.6rem);
  font-size: var(--m-contour-taille, 0.95rem);
}
.m-bouton--contour:hover {
  background: var(--m-contour-survol-fond, var(--color-primary-light, #f5f5f5));
  color: var(--m-contour-survol-texte, var(--color-primary));
  border-color: var(--m-contour-survol-trait, var(--color-primary));
  opacity: 1; transform: none;
}
/* Toute la largeur de son conteneur (le bouton d'un formulaire en colonne). */
.m-bouton--plein { display: block; width: 100%; }

/* ── Libellé, champ, aide ── */
.m-label {
  display: block;
  font-family: var(--m-label-police, inherit);
  font-size: var(--m-label-taille, 0.85rem);
  font-weight: var(--m-label-graisse, 600);
  text-transform: var(--m-label-casse, none);
  letter-spacing: var(--m-label-espacement, normal);
  color: var(--m-label-couleur, var(--color-primary));
  margin-bottom: var(--m-label-marge, 0.35rem);
}
/* PAS de `display` : un champ reste en ligne, comme le navigateur le pose. Le
   passer en bloc déplaçait de quelques pixels les champs posés dans une ligne
   de texte ou une rangée de filtres. */
.m-champ {
  width: 100%; font-family: inherit; background: var(--neutre-surface, #fff); outline: none;
  font-size: var(--m-champ-taille, 0.95rem);
  color: var(--marque-encre, #1a1a1a);
  padding: var(--m-champ-marge, 0.65rem 0.85rem);
  border: 1px solid var(--m-champ-trait, var(--marque-filet, #e3e3e3));
  border-radius: var(--m-champ-rayon, 7px);
  transition: border-color 0.2s, box-shadow 0.2s;
}
.m-champ:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--color-primary) 15%, transparent);
}
.m-champ--invalide { border-color: var(--etat-erreur-trait, #b42318); }
/* Seule la marge du haut : posée sur un <p>, l'aide garde l'espace du
   paragraphe sous elle (les formulaires de l'annuaire en dépendent). */
.m-aide {
  font-size: var(--m-aide-taille, 0.78rem);
  color: var(--m-aide-couleur, var(--marque-gris, #666));
  margin-top: var(--m-aide-marge, 0.3rem);
}

/* Un champ et son unité (€, €/an, ans), soudés. */
.m-groupe { display: flex; }
.m-groupe .m-champ { border-radius: 7px 0 0 7px; min-width: 0; }
.m-groupe__unite {
  display: flex; align-items: center; padding: 0 0.85rem; white-space: nowrap;
  font-size: var(--m-t-petit); color: var(--marque-encre, #1a1a1a);
  background: var(--color-primary-light, #f5f5f5);
  border: 1px solid var(--m-champ-trait, var(--marque-filet, #e3e3e3)); border-left: none;
  border-radius: 0 7px 7px 0;
}

/* Une case à cocher ou un bouton radio, avec son libellé. */
.m-case { display: inline-flex; align-items: center; gap: 0.45rem; cursor: pointer; }
.m-case input { accent-color: var(--color-primary); width: 1rem; height: 1rem; margin: 0; }

/* ── Carte ── */
.m-carte {
  background: var(--neutre-surface, #fff);
  border: 1px solid var(--marque-filet, #e3e3e3);
  border-radius: var(--m-carte-rayon, 10px);
  box-shadow: var(--m-carte-ombre, 0 1px 4px color-mix(in srgb, var(--color-primary) 6%, transparent));
  padding: var(--m-carte-marge, 1.5rem);
}
/* Une carte posée sur un fond doux plutôt que blanc (un encart secondaire). */
.m-carte--plate { background: var(--m-carte-plate-fond, var(--color-primary-light, #f5f5f5)); box-shadow: none; }
.m-carte__titre,
.m-intertitre {
  font-family: var(--m-carte-titre-police, var(--font-heading));
  font-size: var(--m-carte-titre-taille, 1.15rem);
  font-weight: var(--m-carte-titre-graisse, 700);
  text-transform: var(--m-carte-titre-casse, none);
  letter-spacing: var(--m-carte-titre-espacement, normal);
  line-height: var(--m-carte-titre-interligne, 1.3);
  color: var(--m-carte-titre-couleur, var(--color-primary));
  margin: 0 0 var(--m-carte-titre-marge, 1rem);
}

/* ── Tuile de chiffre ── Un grand nombre et son libellé (« 1 234 fiches »).
   `m-stats` les range en ligne, centrées. Le détail (une phrase sous le
   libellé) n'est employé que par ZB. */
.m-stats { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: var(--m-esp-4, 16px); margin-top: var(--m-esp-5, 24px); }
/* Alignée à GAUCHE depuis le 10/11/2026 (règle de la charte : on ne centre
   qu'un bloc qui se suffit à lui-même) ; `m-chiffres` de `page.css` est la
   rangée de la charte, `m-stats` reste pour les pages pas encore passées. */
.m-stat {
  background: var(--m-stat-fond, var(--color-primary-light, #f5f5f5));
  border: 1px solid var(--marque-filet, #e3e3e3);
  border-radius: var(--m-stat-rayon, 10px);
  padding: var(--m-stat-marge, 1rem 1.6rem);
  min-width: var(--m-stat-largeur-min, 150px);
}
.m-stat__num {
  font-family: var(--m-stat-police, var(--font-heading));
  font-size: var(--m-stat-taille, 2rem);
  font-weight: var(--m-stat-graisse, 700);
  letter-spacing: var(--m-stat-espacement, normal);
  line-height: var(--m-stat-interligne, inherit);
  font-variant-numeric: var(--m-stat-chiffres, normal);
  color: var(--m-stat-couleur, var(--color-primary));
}
.m-stat__label {
  font-family: var(--m-stat-label-police, inherit);
  font-size: var(--m-stat-label-taille, 0.72rem);
  text-transform: uppercase;
  letter-spacing: var(--m-stat-label-espacement, 0.08em);
  color: var(--m-stat-label-couleur, var(--marque-gris, #666));
  margin-top: var(--m-stat-label-marge, 0.2rem);
}
.m-stat__detail {
  font-size: var(--m-t-note); line-height: 1.45; margin-top: var(--m-esp-2, 8px);
  color: var(--m-stat-label-couleur, var(--marque-gris, #666));
}

/* ── Pastilles ── Des liens de filtre en ligne (« Banques 42 »), l'actif plein. */
.m-pastilles { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.m-pastille {
  background: var(--neutre-surface, #fff); border: 1px solid var(--marque-filet, #e3e3e3); border-radius: var(--m-rayon-pilule, 999px);
  padding: 0.4rem 0.9rem; font-size: var(--m-t-petit); color: var(--marque-encre, #1a1a1a);
  /* Une pastille-lien n'est jamais soulignée (un lien de marque souligné
     débordait sur la pastille, relevé le 11/11/2026), et peut porter la
     pastille de couleur d'un état ou d'une série (`m-graph__pastille`) devant
     son texte, qui restait sans taille (étape 2 RealT, 11/11/2026). */
  display: inline-flex; align-items: center; gap: var(--m-esp-2, 8px); text-decoration: none;
}
.m-pastille:hover {
  border-color: var(--marque-accent, var(--color-primary));
  color: var(--marque-accent, var(--color-primary)); text-decoration: none;
}
.m-pastille__compte { color: var(--marque-gris, #666); margin-left: 0.3rem; }
.m-pastille--active {
  background: var(--marque-accent, var(--color-primary)); color: var(--neutre-sur-aplat, #fff);
  border-color: var(--marque-accent, var(--color-primary));
}
.m-pastille--active:hover { color: var(--neutre-sur-aplat, #fff); }
/* Le compte sur la pastille pleine : blanc plein. À 72 % il tombait à 3,7
   pour 1 sur le violet ZB (audit du 11/11/2026). */
.m-pastille--active .m-pastille__compte { color: var(--neutre-sur-aplat, #fff); font-weight: 400; }

/* ── Tableau ── `m-tableau` : un tableau PLAT, posé dans une carte ou dans le
   texte (filets entre les lignes, aucun cadre). `m-tableau--cadre` : un tableau
   posé SUR LA PAGE, qui porte son propre cadre (fond blanc, bord, bandeau
   d'en-tête, survol de ligne). Le contexte choisit la variante, la marque ne
   choisit que les valeurs.

   Repères de colonne : `num` sur une cellule de chiffres (alignée à droite,
   chiffres de même largeur) ; `m-tableau__tri` sur un en-tête qui trie la
   liste par un lien (le lien porte toute la cellule, une `.fleche` dit le
   sens, `est-actif` la colonne en cours). `m-defile` autour d'un tableau large
   le fait défiler au lieu d'élargir la page.

   🚨 SPÉCIFICITÉ, DEUX RÈGLES MESURÉES (reprises des tableaux ZB, 02/09/2026) :
   - l'alignement des en-têtes est posé à spécificité NULLE (`:where`), pour
     qu'un `text-right` du gabarit l'emporte : sinon les titres de colonnes de
     chiffres restent à gauche au-dessus de nombres rangés à droite ;
   - tout le reste pèse (0,1,2) et BAT les utilitaires (`px-4`, `py-3`,
     `text-xs`) que les gabarits portent encore : les débloquer changerait des
     dizaines de cellules que personne n'a demandé à toucher.
   La couleur et la taille des cellules ne sont posées QUE sur la variante
   encadrée : dans un tableau plat, la cellule garde la main (un libellé grisé
   par le gabarit, un chiffre en monospace).

   LE TABLEAU PLAT N'A PAS DE MARGE AUX BORDS : la gouttière se pose entre les
   colonnes (`th + th`, `td + td`), jamais sur chaque cellule, sinon le tableau
   décolle du bord de la carte qui le porte et ne s'aligne plus sur son titre.
   Le repli des valeurs est le tableau des chiffres du site Meelton. */
:where(.m-tableau) thead th,
:where(.m-tableau) tbody th { text-align: left; }
.m-tableau {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--m-tableau-taille, 0.92rem);
}
.m-tableau thead th {
  font-family: var(--m-tableau-entete-police, inherit);
  font-size: var(--m-tableau-entete-taille, 0.78rem);
  font-weight: var(--m-tableau-entete-graisse, 700);
  text-transform: var(--m-tableau-entete-casse, uppercase);
  letter-spacing: var(--m-tableau-entete-espacement, normal);
  color: var(--m-tableau-entete-couleur, var(--marque-gris, #666));
  background: var(--m-tableau-entete-fond, transparent);
  padding: var(--m-tableau-entete-marge, 10px 8px);
  border-bottom: var(--m-tableau-entete-trait, 1px solid var(--m-tableau-trait, var(--marque-filet, #eee)));
  white-space: var(--m-tableau-entete-coupure, normal);
}
/* Un titre de ligne (`<th scope="row">` dans le corps) est une cellule comme
   les autres : mêmes marges, même filet ; sa graisse reste au gabarit. */
.m-tableau tbody td,
.m-tableau tbody th {
  padding: var(--m-tableau-cellule-marge, 10px 8px);
  border-bottom: 1px solid var(--m-tableau-trait, var(--marque-filet, #eee));
  vertical-align: var(--m-tableau-cellule-alignement, inherit);
}
/* Le filet sous la dernière ligne : gardé par défaut, retiré par une marque
   dont le tableau finit sur le bord de sa carte ou de son cadre (ZB). */
.m-tableau tbody tr:last-child td,
.m-tableau tbody tr:last-child th {
  border-bottom: var(--m-tableau-dernier-trait, 1px solid var(--m-tableau-trait, var(--marque-filet, #eee)));
}
.m-tableau thead th + th,
.m-tableau tbody td + td,
.m-tableau tbody th + td { padding-left: var(--m-tableau-gouttiere, 8px); }
.m-tableau .num { text-align: right; font-variant-numeric: tabular-nums; }
/* Un nombre qui ne se coupe pas, si la marque le veut. À spécificité NULLE :
   un `whitespace-nowrap` du gabarit, et la règle des en-têtes, gardent la main. */
:where(.m-tableau td.num) { white-space: var(--m-tableau-nombre-coupure, nowrap); }
/* Un montant ne se coupe jamais (« 1'200 » puis « $ » à la ligne, relevé par
   Benjamin le 10/11/2026) : `nowrap` par défaut, une marque peut rouvrir. */
/* La variante encadrée ne change que des VALEURS du tableau plat (marges,
   gouttière, fond d'en-tête), plus son cadre et le survol de ligne. */
.m-tableau--cadre {
  --m-tableau-entete-marge: var(--m-tableau-cadre-entete-marge, 12px 16px);
  --m-tableau-cellule-marge: var(--m-tableau-cadre-cellule-marge, 14px 16px);
  --m-tableau-gouttiere: var(--m-tableau-cadre-gouttiere, 16px);
  --m-tableau-entete-fond: var(--m-tableau-cadre-entete-fond, var(--color-primary-light, #f5f5f5));
  background: var(--neutre-surface, #fff);
  border: 1px solid var(--m-tableau-trait, var(--marque-filet, #eee));
  border-radius: var(--m-tableau-rayon, 10px);
  overflow: hidden;
}
.m-tableau--cadre tbody td,
.m-tableau--cadre tbody th {
  font-size: var(--m-tableau-taille, 0.92rem);
  color: var(--m-tableau-cadre-texte, inherit);
  vertical-align: inherit;
}
.m-tableau--cadre tbody tr:hover td,
.m-tableau--cadre tbody tr:hover th {
  background: var(--m-tableau-survol, var(--color-primary-light, #f5f5f5));
  transition: background-color 0.1s ease;
}
/* En-tête triable. Le padding passe de la cellule au LIEN : sans ça, seule la
   largeur du texte répond au clic. La flèche est TOUJOURS rendue (↕ sur les
   colonnes inactives), sinon la largeur de la colonne saute à chaque clic. */
.m-tableau thead th.m-tableau__tri { padding: 0; }
.m-tableau thead th.m-tableau__tri > a {
  display: block;
  padding: var(--m-tableau-entete-marge, 10px 8px);
  color: inherit; text-decoration: none; text-align: inherit;
  transition: color 0.1s ease, background-color 0.1s ease;
}
.m-tableau thead th + th.m-tableau__tri > a { padding-left: var(--m-tableau-gouttiere, 8px); }
.m-tableau thead th.m-tableau__tri > a:hover {
  color: var(--m-tableau-tri-couleur, var(--color-primary));
  background: var(--m-tableau-tri-survol-fond, color-mix(in srgb, var(--color-primary) 12%, transparent));
}
.m-tableau thead th.m-tableau__tri .fleche { margin-left: var(--m-esp-2, 8px); opacity: 0.3; }
.m-tableau thead th.m-tableau__tri.est-actif > a { color: var(--m-tableau-tri-couleur, var(--color-primary)); }
.m-tableau thead th.m-tableau__tri.est-actif .fleche { opacity: 1; }
/* En mode sombre (24/10/2026), la flèche à 30 % tombait à 1,9:1 sur le noir :
   à 60 % elle passe 3:1, le seuil d'un pictogramme. Écran seulement. */
@media screen {
  html[data-mode="sombre"] .m-tableau thead th.m-tableau__tri .fleche { opacity: 0.6; }
  html[data-mode="sombre"] .m-tableau thead th.m-tableau__tri.est-actif .fleche { opacity: 1; }
}
.m-defile { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ── Alertes ── Les modificateurs portent les valeurs que les routes posent
   déjà (`ton` : ok, warn, err). */
.m-alerte { border-radius: var(--m-rayon, 8px); padding: 0.85rem 1.1rem; font-size: var(--m-t-petit); margin-bottom: 1.25rem; }
.m-alerte--ok {
  background: var(--color-primary-light, #f5f5f5);
  border: 1px solid color-mix(in srgb, var(--color-primary) 70%, var(--neutre-surface, #fff)); color: var(--color-primary);
}
.m-alerte--warn { background: var(--etat-alerte-fond, #fffbeb); border: 1px solid var(--etat-alerte-trait, #fcd34d); color: var(--etat-alerte-texte, #92400e); }
.m-alerte--err { background: var(--etat-erreur-fond, #fef2f2); border: 1px solid var(--etat-erreur-trait, #fca5a5); color: var(--etat-erreur-texte, #991b1b); }

/* ── Indicateur de chargement ── */
.m-sablier {
  width: 2rem; height: 2rem; margin: 0 auto;
  border: 3px solid var(--marque-filet, #e3e3e3); border-top-color: var(--color-primary);
  border-radius: 50%; animation: m-tourne 0.8s linear infinite;
}
@keyframes m-tourne { to { transform: rotate(360deg); } }

/* ── Infobulle ── Un « i » qui ouvre une précision, au clic comme au toucher.
   POURQUOI (03/11/2026) : une infobulle au survol (`title`) ne s'affiche pas
   sur téléphone, la précision y disparaissait. On s'appuie sur l'attribut
   `popover` du navigateur : aucun script, fermeture par Échap ou clic ailleurs.
   Usage : <button type="button" class="m-infobulle" popovertarget="ib-x"
   aria-label="...">i</button><div id="ib-x" popover class="m-infobulle__texte">...</div> */
.m-infobulle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.1rem; height: 1.1rem; margin-left: 0.35rem; padding: 0;
  border: 1px solid currentColor; border-radius: 50%;
  background: transparent; color: inherit; cursor: pointer;
  font: italic 700 0.7rem/1 Georgia, serif; text-transform: none; letter-spacing: 0;
  vertical-align: middle; opacity: 0.75;
}
.m-infobulle:hover, .m-infobulle:focus-visible { opacity: 1; }
/* Au doigt, la zone qui réagit fait 44 px (charte, `MD Manuels/SYSTEME_GRAPHIQUE.md`
   §3.7) sans grossir le rond : audit RealT du 10/11/2026, les « ? » de 18 px
   se rataient sur téléphone. */
@media (pointer: coarse) {
  .m-infobulle { position: relative; }
  .m-infobulle::before { content: ""; position: absolute; inset: -14px; }
}
.m-infobulle__texte {
  max-width: min(22rem, calc(100vw - 32px)); margin: auto; padding: 0.9rem 1.1rem;
  border: 1px solid var(--marque-filet, #e3e3e3); border-radius: var(--m-rayon, 8px);
  background: var(--neutre-surface, #fff); color: inherit;
  font-size: var(--m-t-petit); line-height: 1.5; text-transform: none; letter-spacing: 0;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}
.m-infobulle__texte::backdrop { background: rgba(0, 0, 0, 0.15); }
.m-infobulle__texte p + p { margin-top: 0.6rem; }

/* ── En-tête de fiche avec le bouton « Suivre » ──
   Benjamin, 04/11/2026, sur la fiche des ventes à découvert : le bouton, posé
   en carte isolée sous les chiffres, « c'est atroce » ; il appartient à
   l'en-tête de la société, à côté de la réponse qui donne envie de suivre.
   Trois zones : la TÊTE (titre et réponse), le SUIVI (la carte compacte de
   `_suivre.html`, variante « entete »), le PIED (codes, liens, fraîcheur).
   Grand écran : le suivi à droite, sur la hauteur de la tête et du pied.
   Téléphone : empilé, le suivi juste sous la réponse, avant les codes.
   La classe ne se pose QUE si le suivi est affiché : sans lui, l'en-tête garde
   toute sa largeur. Maquette validée le 05/11/2026 (/maquette, /go). */
.m-entete {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--m-entete-suivi-largeur, 300px);
  grid-template-areas: "tete suivi" "pied suivi";
  column-gap: var(--m-esp-7, 48px);
  align-items: start;
}
.m-entete__tete { grid-area: tete; min-width: 0; }
.m-entete__pied { grid-area: pied; min-width: 0; }
.m-entete__suivi { grid-area: suivi; }
.m-carte.m-suivre--entete { padding: var(--m-esp-4, 16px) var(--m-esp-4, 16px); margin: 0; }
.m-suivre--entete .m-bouton { padding: 0.7rem 1rem; }
/* `text-wrap: pretty` : dans une colonne de 300 px, la promesse laissait un
   mot seul sur sa dernière ligne (« actions. », mesuré le 05/11/2026). */
.m-suivre--entete .m-aide { font-size: var(--m-t-note); line-height: 1.45; text-wrap: pretty; }
@media (max-width: 760px) {
  .m-entete { grid-template-columns: minmax(0, 1fr); grid-template-areas: "tete" "suivi" "pied"; }
  .m-entete__suivi { margin-top: 0.9rem; }
}

/* ── Fil d'Ariane ──
   Benjamin, 10/11/2026 : « j'ai l'impression qu'à chaque dossier on invente la
   manière de faire les menus ». Le crowdfunding de ZB l'écrivait en
   utilitaires, page par page ; le registre RealT avait sa propre barre. Un
   seul composant désormais (`apps/_shared/templates/_navigation.html`, macro
   `fil_ariane`), qui reprend la typographie des libellés de la marque. */
.m-fil {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--m-esp-1, 4px) var(--m-esp-2, 8px);
  margin: 0 0 var(--m-fil-marge, 1.5rem);
  font-family: var(--m-fil-police, var(--m-label-police, inherit));
  font-size: var(--m-fil-taille, 11px);
  text-transform: var(--m-fil-casse, var(--m-label-casse, none));
  letter-spacing: var(--m-fil-espacement, var(--m-label-espacement, normal));
  color: var(--m-fil-couleur, var(--marque-gris, #666));
}
.m-fil a { color: inherit; text-decoration: none; transition: color 0.15s; }
.m-fil a:hover { color: var(--color-primary); }
.m-fil__sep { opacity: 0.5; }
.m-fil [aria-current="page"] { color: var(--marque-encre, inherit); }

/* ── Sommaire d'une page longue ──
   Même demande (10/11/2026, sur une fiche RealT : « très très dur à lire parce
   que la navigation n'est pas claire du tout, surtout pour des pages
   longues »). Les parties de la page, toujours visibles : colonne collée à
   gauche sur grand écran, barre collée en haut qu'on fait défiler du doigt sur
   téléphone. La partie en cours de lecture est marquée (`est-actif`, posé par
   le script de `_navigation.html`). Le gabarit hôte place le sommaire et son
   contenu dans `.m-avec-sommaire`. */
.m-avec-sommaire { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--m-esp-5, 24px); }
.m-sommaire {
  position: sticky; top: 0; z-index: 4;
  background: var(--marque-fond, var(--neutre-surface, #fff));
  border-bottom: 1px solid var(--marque-filet, #e3e3e3);
  margin: 0 calc(-1 * var(--m-esp-4, 16px)); padding: var(--m-esp-2, 8px) var(--m-esp-4, 16px);
}
.m-sommaire__titre {
  display: none;
  font-family: var(--m-label-police, inherit); font-size: var(--m-t-legende);
  text-transform: var(--m-label-casse, none); letter-spacing: var(--m-label-espacement, normal);
  color: var(--marque-gris, #666); margin: 0 0 var(--m-esp-2, 8px);
}
.m-sommaire ol {
  list-style: none; margin: 0; padding: 0;
  display: flex; gap: var(--m-esp-1, 4px) var(--m-esp-4, 16px); overflow-x: auto; -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.m-sommaire li { flex: none; }
.m-sommaire ol a {
  display: block; padding: var(--m-esp-2, 8px) 0; white-space: nowrap;
  font-size: var(--m-t-petit); color: var(--marque-gris, #666); text-decoration: none;
  border-bottom: 2px solid transparent;
}
.m-sommaire ol a:hover { color: var(--marque-encre, inherit); }
.m-sommaire ol a.est-actif { color: var(--marque-encre, inherit); border-bottom-color: var(--color-primary); font-weight: 600; }
.m-sommaire__pied { display: none; }
@media (min-width: 1024px) {
  .m-avec-sommaire { grid-template-columns: 210px minmax(0, 1fr); gap: var(--m-esp-7, 48px); align-items: start; }
  .m-sommaire { top: 16px; margin: 0; padding: 0; border: 0; background: none; max-height: calc(100vh - 32px); overflow-y: auto; }
  .m-sommaire__titre { display: block; }
  .m-sommaire ol { flex-direction: column; overflow: visible; gap: 2px; }
  .m-sommaire ol a { white-space: normal; padding: var(--m-esp-1, 4px) 0 var(--m-esp-1, 4px) var(--m-esp-3, 12px); border-bottom: 0; border-left: 2px solid var(--marque-filet, #e3e3e3); }
  .m-sommaire ol a.est-actif { border-left-color: var(--color-primary); }
  .m-sommaire__pied { display: block; margin-top: var(--m-esp-4, 16px); font-size: var(--m-t-note); }
}
/* Les liens du pied (« précédent / suivant ») à la couleur de la marque : ils
   sortaient dans le bleu souligné du navigateur (planche, 10/11/2026). */
.m-sommaire__pied a { color: var(--marque-accent, var(--color-primary)); text-decoration: none; font-weight: 600; }
.m-sommaire__pied a:hover { text-decoration: underline; }
/* Une ancre atteinte depuis le sommaire ne se cache pas sous la barre collée. */
.m-avec-sommaire [id] { scroll-margin-top: 64px; }

/* ── Sous-menu d'une rubrique ──
   Benjamin, 10/11/2026 : « on ne gère pas du tout les menus et sous-menus de
   la même façon ». LA règle : le menu du site porte les rubriques ; une
   rubrique qui a plusieurs pages a UN sous-menu, cette seconde ligne, sous
   l'en-tête, la page en cours soulignée à la couleur de la marque. Jamais une
   barre propre à une rubrique, jamais des onglets maison. Macro `sous_menu`
   de `_navigation.html`. Sur téléphone, la ligne défile au doigt. */
.m-sous-menu {
  display: flex; gap: var(--m-esp-1, 4px) var(--m-esp-6, 32px); overflow-x: auto; -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  border-bottom: 1px solid var(--marque-filet, #e3e3e3);
  margin: 0 0 var(--m-esp-5, 24px);
}
.m-sous-menu a {
  flex: none; padding: var(--m-esp-3, 12px) 0 var(--m-esp-3, 12px); white-space: nowrap;
  font-size: var(--m-t-petit); color: var(--marque-gris, #666); text-decoration: none;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.m-sous-menu a:hover { color: var(--marque-encre, #1a1a1a); }
/* Sur grand écran, toutes les pages de la rubrique se voient : la ligne se
   replie au lieu de cacher les dernières. */
@media (min-width: 900px) { .m-sous-menu { flex-wrap: wrap; overflow: visible; } }
.m-sous-menu a[aria-current="page"] {
  color: var(--marque-encre, #1a1a1a); font-weight: 600;
  border-bottom-color: var(--color-primary);
}

/* ── Rangée de filtres ──
   Au-dessus de la liste ou du tableau qu'elle filtre, sur UNE ligne qui se
   replie : chaque filtre est un libellé et son champ, la recherche en
   premier, le bouton « Filtrer » en dernier (utile sans script). Les filtres
   actifs se lisent en pastilles dessous, chacune retirable. */
.m-filtres {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--m-esp-3, 12px) var(--m-esp-4, 16px);
  margin: 0 0 var(--m-esp-4, 16px);
}
.m-filtres__champ { display: flex; flex-direction: column; min-width: 10rem; flex: 0 0 auto; }
.m-filtres__champ:not(.m-filtres__champ--large) .m-champ { width: auto; min-width: 10rem; }
/* UNE HAUTEUR pour les champs, les listes et le bouton d'une rangée, et le
   bouton aligné sur le bas des champs : le bouton était moins haut que les
   listes (registre RealT, planche, relevé le 10/11/2026). */
.m-filtres .m-champ, .m-filtres .m-bouton { min-height: 2.75rem; box-sizing: border-box; }
.m-filtres .m-bouton { align-self: flex-end; }
.m-filtres__champ--large { flex: 1 1 18rem; }
.m-filtres .m-label { margin-bottom: var(--m-esp-1, 4px); }
.m-filtres__actifs { display: flex; flex-wrap: wrap; gap: var(--m-esp-2, 8px); margin: 0 0 var(--m-esp-4, 16px); font-size: var(--m-t-note); }
.m-filtres__actifs a { text-decoration: none; }
.m-filtres__compte { font-size: var(--m-t-note); color: var(--marque-gris, #666); margin: 0 0 var(--m-esp-3, 12px); }

/* ── Pagination ──
   Sous la liste, alignée à gauche comme tout le reste : « ‹ Précédente »,
   les numéros (la page en cours pleine), « Suivante › ». Macro `pagination`
   de `_navigation.html`. */
.m-pagination { display: flex; flex-wrap: wrap; align-items: center; gap: var(--m-esp-2, 8px); margin: var(--m-esp-5, 24px) 0 0; font-size: var(--m-t-petit); }
.m-pagination a, .m-pagination span {
  min-width: 2.25rem; height: 2.25rem; padding: 0 var(--m-esp-3, 12px);
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--marque-filet, #e3e3e3); border-radius: var(--m-rayon-petit, 4px);
  color: var(--marque-encre, #1a1a1a); text-decoration: none; font-variant-numeric: tabular-nums;
}
.m-pagination a:hover { border-color: var(--color-primary); color: var(--color-primary); }
.m-pagination [aria-current="page"] { background: var(--marque-encre, #1a1a1a); border-color: var(--marque-encre, #1a1a1a); color: var(--marque-fond, #fff); }
.m-pagination .m-pagination__trou { border: 0; min-width: 0; padding: 0 2px; color: var(--marque-gris, #666); }

/* ── Bouton discret et bouton de suppression (10/11/2026) ──
   Les deux variantes qui manquaient (15 systèmes de boutons relevés dans les
   outils). DISCRET : une action contextuelle à côté du contenu (fermer,
   copier, partager), sans fond ni bord (le « tertiaire » du DSFR). SUPPRIMER :
   une action qui détruit ou retire, toujours précédée d'une confirmation. */
.m-bouton--discret {
  background: transparent; border-color: transparent;
  color: var(--m-lien, var(--color-primary)); padding-left: 0; padding-right: 0;
}
.m-bouton--discret:hover { background: transparent; border-color: transparent; color: var(--m-marque-800, var(--color-primary)); text-decoration: underline; transform: none; opacity: 1; }
.m-bouton--danger { background: var(--etat-erreur-trait, #b42318); border-color: var(--etat-erreur-trait, #b42318); color: var(--neutre-sur-aplat, #fff); }
.m-bouton--danger:hover { background: var(--etat-erreur-texte, #a1201a); border-color: var(--etat-erreur-texte, #a1201a); color: var(--neutre-sur-aplat, #fff); }

/* ── Tableau : ligne de total, case sur deux lignes, date (10/11/2026) ──
   Le total en DERNIÈRE ligne, en gras, sous un filet fort. Une case peut
   porter une précision en seconde ligne (`m-tableau__sous`), en gris et en
   petit. Une date (`date`) garde la police du texte, chiffres de même
   largeur : jamais la police à chasse fixe (relevé sur le registre RealT). */
.m-tableau tfoot th, .m-tableau tfoot td {
  font-weight: 700; padding: var(--m-tableau-cellule-marge, 10px 8px);
  border-top: 2px solid var(--m-filet-fort, var(--marque-filet, #ccc)); color: var(--marque-encre, #1a1a1a);
}
.m-tableau tfoot td + td, .m-tableau tfoot th + td { padding-left: var(--m-tableau-gouttiere, 8px); }
.m-tableau--cadre tfoot th, .m-tableau--cadre tfoot td { background: var(--m-tableau-cadre-entete-fond, var(--color-primary-light, #f5f5f5)); }
:where(.m-tableau tfoot th) { text-align: left; }
.m-tableau__sous { display: block; font-size: var(--m-t-note); line-height: 1.4; color: var(--marque-gris, #666); margin-top: 2px; font-weight: 400; }
.m-tableau td.date { font-family: inherit; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ── « Trier par » d'un tableau en fiches ── Sur téléphone, un
   `m-tableau--fiches` cache ses en-têtes, donc son tri par colonne : l'ordre
   se choisit alors au-dessus de la liste, en choix segmenté
   (`m-tableau__trier-mobile`), caché sur grand écran (registre RealT,
   11/11/2026). */
.m-tableau__trier-mobile { display: none; }
@media (max-width: 640px) { .m-tableau__trier-mobile { display: inline-flex; } }
}

/* ── Tri côté navigateur (`static/js/tri-tableaux.js`, 10/11/2026) ──
   Le titre de colonne devient un bouton : même typographie que l'en-tête,
   la flèche dit le sens (↕ tant que la colonne n'est pas triée). */
.m-tableau thead th .m-tableau__trier {
  all: unset; box-sizing: border-box; display: inline-flex; align-items: center; gap: var(--m-esp-2, 8px); cursor: pointer;
  font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit;
}
.m-tableau thead th .m-tableau__trier:hover,
.m-tableau thead th[aria-sort] .m-tableau__trier { color: var(--m-tableau-tri-couleur, var(--color-primary)); }
.m-tableau thead th .m-tableau__trier:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.m-tableau thead th .m-tableau__trier .fleche { opacity: 0.35; }
.m-tableau thead th[aria-sort] .m-tableau__trier .fleche { opacity: 1; }
.m-tableau thead th.num .m-tableau__trier { justify-content: flex-end; width: 100%; }

/* ── Surligner dans un tableau (Benjamin, 10/11/2026) ──
   UNE CASE : `m-bon` (vert) ou `m-mauvais` (rouge) selon que la valeur est une
   bonne ou une mauvaise nouvelle POUR LE LECTEUR, jamais selon son seul signe ;
   le signe ou la flèche est toujours écrit, la couleur ne fait que doubler.
   UNE LIGNE : `m-ligne--ok`, `m-ligne--attention`, `m-ligne--alerte`, le fond
   pâle de l'état, pour une ligne à remarquer (le sujet de la page, un défaut). */
.m-tableau td.m-bon { color: var(--etat-ok-texte, #1f5c3f); font-weight: 600; }
.m-tableau td.m-mauvais { color: var(--etat-erreur-texte, #a1201a); font-weight: 600; }
.m-tableau tbody tr.m-ligne--ok > * { background: var(--etat-ok-fond, #eaf4ee); }
.m-tableau tbody tr.m-ligne--attention > * { background: var(--etat-alerte-fond, #fbf3e2); }
.m-tableau tbody tr.m-ligne--alerte > * { background: var(--etat-erreur-fond, #fbe9e7); }
.m-tableau tbody tr.m-ligne--sujet > * { background: var(--m-marque-50, #f7f2f6); font-weight: 600; }

/* ── États qui manquaient (audit du système, 10/11/2026) ──
   EN COURS : un bouton qui attend la réponse (`aria-busy="true"`), son texte
   gardé, un sablier à sa place, plus cliquable. DÉSACTIVÉ : un champ grisé
   et non modifiable, qui le dit à la souris. */
.m-bouton[aria-busy="true"] { position: relative; color: transparent; pointer-events: none; }
.m-bouton[aria-busy="true"]::after {
  content: ""; position: absolute; inset: 0; margin: auto; width: 1em; height: 1em;
  border: 2px solid var(--m-bouton-texte, #fff); border-right-color: transparent; border-radius: 50%;
  animation: m-tourne 0.8s linear infinite;
}
.m-champ:disabled, .m-champ[aria-disabled="true"] {
  background: var(--m-surface-douce, #f3f3f3); color: var(--m-texte-2, #666); cursor: not-allowed;
}
.m-segments a:hover, .m-segments button:hover { background: var(--m-surface-douce, #f3f3f3); }
.m-tableau thead th .m-tableau__trier { padding-block: var(--m-esp-1, 4px); }

/* ══ Lot 2 des modules à construire (11/11/2026) : tableaux et filtres.
   Comportement : `static/js/tableaux-filtres.js`. Macros : `_page.html`. ══ */

/* ── En-têtes collants ── Un long tableau garde ses titres de colonne en vue,
   et sa première colonne (le nom) quand il défile de côté. Le tableau vit
   dans `m-defile m-defile--collant`, qui défile dans les deux sens : un
   en-tête ne colle qu'à l'intérieur de son cadre qui défile. */
.m-defile--collant { overflow: auto; max-height: var(--m-tableau-collant-hauteur, 70vh); }
.m-tableau--collant { overflow: visible; border-collapse: separate; border-spacing: 0; }
.m-tableau--collant thead th { position: sticky; top: 0; z-index: 2; background: var(--m-surface, #fff); }
.m-tableau--cadre.m-tableau--collant thead th { background: var(--m-tableau-cadre-entete-fond, var(--color-primary-light, #f5f5f5)); }
.m-tableau--collant tbody th:first-child,
.m-tableau--collant tbody td:first-child { position: sticky; left: 0; z-index: 1; background: var(--m-surface, #fff); }
.m-tableau--collant thead th:first-child { left: 0; z-index: 3; }

/* ── Ligne dépliable ── Le nom de la ligne est le bouton qui ouvre le détail,
   une flèche dit l'état ; le détail, dessous, sur toute la largeur. */
.m-tableau__deplier {
  all: unset; box-sizing: border-box; cursor: pointer; display: inline-flex; align-items: center;
  gap: var(--m-esp-2, 8px); color: var(--m-lien, var(--color-primary)); font-weight: 600; min-height: 1.5rem;
}
.m-tableau__deplier::before { content: "▸"; color: var(--m-texte-2, #666); transition: transform 0.12s; display: inline-block; }
.m-tableau__deplier[aria-expanded="true"]::before { transform: rotate(90deg); }
.m-tableau__deplier:hover { text-decoration: underline; }
.m-tableau__deplier:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.m-tableau tbody tr.m-tableau__detail > td { background: var(--m-surface-douce, var(--m-gris-50)); font-size: var(--m-t-petit); padding-left: var(--m-esp-6, 32px); }
.m-tableau--cadre tbody tr.m-tableau__detail:hover > td { background: var(--m-surface-douce, var(--m-gris-50)); }

/* ── Mini-barre dans une case ── La piste à gauche du nombre, même longueur
   pour toutes les lignes : les barres se comparent d'une ligne à l'autre. */
.m-tableau__barre { display: inline-flex; align-items: center; gap: var(--m-esp-2, 8px); justify-content: flex-end; }
.m-tableau__piste { display: inline-block; width: var(--m-tableau-barre-largeur, 5rem); height: 8px; border-radius: 2px; background: var(--m-gris-100); overflow: hidden; flex: none; }
.m-tableau__piste > span { display: block; height: 100%; width: calc(var(--l) * 1%); background: var(--c, var(--m-marque-500, var(--color-primary))); }

/* ── Filtre en direct ── Un champ au-dessus du tableau ou de la liste qu'il
   filtre, à la frappe. */
.m-filtre-direct { display: flex; flex-direction: column; max-width: 24rem; margin: 0 0 var(--m-esp-3, 12px); }
.m-filtre-direct .m-label { margin-bottom: var(--m-esp-1, 4px); }
[data-filtre-item][hidden], .m-tableau tbody tr[hidden] { display: none; }

/* ── Recherche principale ── LE champ de la page : grand, son bouton collé. */
.m-recherche { max-width: 40rem; }
.m-recherche .m-label { display: block; margin-bottom: var(--m-esp-2, 8px); }
.m-recherche__ligne { display: flex; gap: var(--m-esp-2, 8px); }
.m-recherche__champ { flex: 1 1 auto; min-width: 0; min-height: 3rem; font-size: var(--m-t-corps); }
.m-recherche .m-bouton { min-height: 3rem; flex: none; }

/* ── Facettes ── Le titre du groupe, puis chaque choix et son nombre de
   résultats aligné à droite. Un choix sans résultat reste, grisé. */
.m-facettes { border: 0; margin: 0; padding: 0; min-width: 0; }
.m-facettes > legend { padding: 0; margin-bottom: var(--m-esp-2, 8px); }
.m-facettes__liste { list-style: none; margin: 0; padding: 0; max-width: 18rem; font-size: var(--m-t-petit); }
.m-facettes__liste > li { display: flex; justify-content: space-between; align-items: center; gap: var(--m-esp-3, 12px); padding: var(--m-esp-1, 4px) 0; }
.m-facettes__compte { color: var(--m-texte-2, #666); font-size: var(--m-t-note); font-variant-numeric: tabular-nums; }
.m-facettes--vide { color: var(--m-texte-2, #666); }
.m-pastille.m-facettes--vide { opacity: 0.7; }
/* La puce exclue : barrée, sur le fond pâle d'alerte (troisième état). */
.m-pastille--exclue { background: var(--etat-erreur-fond, #fbe9e7); border-color: var(--etat-erreur-trait, #b42318); color: var(--etat-erreur-texte, #a1201a); text-decoration: line-through; }
.m-pastille--exclue .m-pastille__compte { color: inherit; text-decoration: none; }

/* ── Curseur ── Le libellé à gauche, la valeur écrite à droite, la piste
   remplie jusqu'à la poignée, les bornes dessous. À deux poignées, la part
   entre les deux est remplie. */
.m-curseur { max-width: 28rem; --a: 0; --b: 50; }
.m-curseur__tete { display: flex; justify-content: space-between; align-items: baseline; gap: var(--m-esp-3, 12px); margin: 0 0 var(--m-esp-2, 8px); }
.m-curseur__tete .m-label { margin: 0; }
.m-curseur output { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.m-curseur__piste { position: relative; height: 1.5rem; }
.m-curseur__piste::before, .m-curseur__piste::after { content: ""; position: absolute; top: 50%; height: 4px; transform: translateY(-50%); border-radius: 2px; pointer-events: none; }
.m-curseur__piste::before { left: 0; right: 0; background: var(--m-gris-200); }
.m-curseur__piste::after { left: calc(var(--a) * 1%); width: calc((var(--b) - var(--a)) * 1%); background: var(--m-marque-500, var(--color-primary)); }
.m-curseur input[type="range"] {
  position: absolute; inset: 0; width: 100%; margin: 0; background: transparent; z-index: 1;
  -webkit-appearance: none; appearance: none; accent-color: var(--m-marque-600, var(--color-primary));
}
.m-curseur input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 1.25rem; height: 1.25rem; border-radius: 50%; cursor: pointer; pointer-events: auto;
  background: var(--m-surface, #fff); border: 2px solid var(--m-marque-600, var(--color-primary));
}
.m-curseur input[type="range"]::-moz-range-thumb {
  width: 1rem; height: 1rem; border-radius: 50%; cursor: pointer; pointer-events: auto;
  background: var(--m-surface, #fff); border: 2px solid var(--m-marque-600, var(--color-primary));
}
.m-curseur input[type="range"]:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
/* Deux poignées sur une piste : seules les poignées reçoivent le clic. */
.m-curseur--plage input[type="range"] { pointer-events: none; }
.m-curseur__bornes { display: flex; justify-content: space-between; margin: var(--m-esp-1, 4px) 0 0; font-size: var(--m-t-legende); color: var(--m-texte-2, #666); font-variant-numeric: tabular-nums; }

/* ── Le visage d'une entité ── Logo, portrait ou initiales, un rond. */
.m-avatar {
  display: inline-grid; place-items: center; flex: none; border-radius: 50%; object-fit: cover;
  background: var(--m-marque-100); color: var(--m-marque-800); font-weight: 700; line-height: 1;
}
.m-avatar--petit { width: 2rem; height: 2rem; font-size: var(--m-t-legende); }
.m-avatar--moyen { width: 3rem; height: 3rem; font-size: var(--m-t-corps); }

/* ── Case riche ── Le visage, le nom, la précision dessous. */
.m-tableau__entite { display: inline-flex; align-items: center; gap: var(--m-esp-3, 12px); }
.m-tableau__entite-nom { font-weight: 600; }

/* ── Tableau en fiches sur téléphone ── Une ligne devient une fiche : chaque
   case sur sa ligne, le titre de sa colonne à gauche (posé par le script ;
   sans script, les cases restent empilées, lisibles). La première case est
   le titre de la fiche. */
@media (max-width: 640px) {
  .m-tableau--fiches thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .m-tableau--fiches, .m-tableau--fiches tbody, .m-tableau--fiches tr, .m-tableau--fiches td, .m-tableau--fiches tbody th { display: block; width: auto; }
  .m-tableau--fiches tbody tr { border: 1px solid var(--m-filet, #e3e3e3); border-radius: var(--m-rayon, 8px); padding: var(--m-esp-2, 8px) var(--m-esp-4, 16px); margin-bottom: var(--m-esp-3, 12px); background: var(--m-surface, #fff); }
  .m-tableau--fiches.m-tableau--cadre { border: 0; background: transparent; }
  .m-tableau--fiches tbody td, .m-tableau--fiches tbody th {
    display: flex; justify-content: space-between; gap: var(--m-esp-4, 16px); text-align: right;
    padding: var(--m-esp-2, 8px) 0; border-bottom: 1px solid var(--m-filet, #e3e3e3);
  }
  .m-tableau--fiches tbody tr > :first-child { font-weight: 700; text-align: left; justify-content: flex-start; font-size: var(--m-t-corps); }
  .m-tableau--fiches tbody tr > :last-child { border-bottom: 0; }
  .m-tableau--fiches tbody [data-libelle]:not(:first-child)::before { content: attr(data-libelle); color: var(--m-texte-2, #666); text-align: left; font-size: var(--m-t-note); }
  .m-tableau--fiches thead th + th, .m-tableau--fiches tbody td + td { padding-left: 0; }
}