/*
 * 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: 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: #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: #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: 0.95rem; 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: #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 {
  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: center; gap: 1rem; margin-top: 1.75rem; }
.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: 12px; line-height: 1.45; margin-top: 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: #fff; border: 1px solid var(--marque-filet, #e3e3e3); border-radius: 999px;
  padding: 0.4rem 0.9rem; font-size: 0.9rem; color: var(--marque-encre, #1a1a1a);
}
.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: #fff;
  border-color: var(--marque-accent, var(--color-primary));
}
.m-pastille--active:hover { color: #fff; }
.m-pastille--active .m-pastille__compte { color: rgba(255, 255, 255, 0.72); }

/* ── 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, normal); }
/* 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: #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: 6px; 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; }
.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: 8px; padding: 0.85rem 1.1rem; font-size: 0.92rem; margin-bottom: 1.25rem; }
.m-alerte--ok {
  background: var(--color-primary-light, #f5f5f5);
  border: 1px solid color-mix(in srgb, var(--color-primary) 70%, #fff); color: var(--color-primary);
}
.m-alerte--warn { background: #fffbeb; border: 1px solid #fcd34d; color: #92400e; }
.m-alerte--err { background: #fef2f2; border: 1px solid #fca5a5; color: #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); } }