/* ============================================================================
   assets/css/charte_composants.css — LES COMPOSANTS DE LA CHARTE v2.0, communs aux
   sept sites et aux six modèles de référence (reference_design_*.html, qui le
   chargent depuis test.master). SOCLE : identique partout, reporté par
   synchroniser-socle.php. Chargé AVANT charte.css, qui porte les jetons de la
   marque et ses quelques particularités.

   AUCUNE COULEUR DE MARQUE ICI : tout passe par les jetons --m-*. Ce qui varie
   d'une marque à l'autre est un jeton déclaré par chaque charte.css :
     --m-trait-titre     remplissage du trait sous le titre et sous le titre de section
     --m-entete-onglet   barre de l'onglet actif de la barre d'application
     --m-stat-2, -5      teintes des 2e et 5e indicateurs d'une rangée de KPI
   Un composant se corrige ICI, une seule fois — puis synchroniser-socle.php.
   ============================================================================ */

/* ─────────── COMMANDES NATIVES DU NAVIGATEUR ─────────── */
/* Barres de défilement, calendrier d'un champ date, liste d'un <select> : le
   navigateur les dessine lui-même, clairs tant qu'on ne lui dit pas que le thème
   est sombre. La barre de la page suit <html>, pas <body> qui porte le thème. */
body.theme-clair { color-scheme: light; }
body.theme-ardoise, body.theme-sombre,
html:has(> body.theme-ardoise), html:has(> body.theme-sombre) { color-scheme: dark; }

/* ─────────── ANIMATIONS GLOBALES ─────────── */
@keyframes apparait {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}
@keyframes glisse {
  from { opacity: 0; transform: translateX(-8px); }
  to   { opacity: 1; transform: none; }
}
@keyframes glisseHaut {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}
@keyframes glisseDroite {
  from { opacity: 0; transform: translateX(12px); }
  to   { opacity: 1; transform: none; }
}
@keyframes glisseDroiteSortie {
  from { opacity: 1; transform: none; }
  to   { opacity: 0; transform: translateX(24px); }
}
@keyframes pulse {
  0%   { transform: scale(1);   opacity: .6; }
  70%  { transform: scale(2.6); opacity: 0; }
  100% { transform: scale(2.6); opacity: 0; }
}
@keyframes trace { to { stroke-dashoffset: 0; } }
@keyframes revele { to { opacity: .08; } }
@keyframes remplir { to { width: var(--largeur); } }
@keyframes shimmer { to { transform: translateX(100%); } }
@keyframes clignote { 50% { opacity: 0; } }
@keyframes tournoie { to { transform: rotate(360deg); } }

.apparait { opacity: 0; animation: apparait 0.6s var(--m-doux) forwards; }
.d1 { animation-delay: .05s; } .d2 { animation-delay: .12s; }
.d3 { animation-delay: .19s; } .d4 { animation-delay: .26s; }
.d5 { animation-delay: .33s; } .d6 { animation-delay: .40s; }
.d7 { animation-delay: .47s; } .d8 { animation-delay: .54s; }
.d9 { animation-delay: .61s; } .d10 { animation-delay: .68s; } .d11 { animation-delay: .75s; }

/* ─────────── HEADER ─────────── */
/* Toutes les couleurs de l'en-tête passent par les jetons --m-entete-*, définis
   par thème. La barre est toujours pleine et foncée : c'est la structure d'écran
   décrite par la charte, il n'existe pas de variante claire. */
.m-entete {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 40px; height: 56px;
  border-bottom: 1px solid var(--m-entete-bordure);
  position: sticky; top: 0; background: var(--m-entete-bg);
  backdrop-filter: saturate(180%) blur(10px);
  z-index: 100;
  transition: background .35s var(--m-doux), border-color .35s var(--m-doux);
}
.m-logo { font-weight: 700; font-size: 18px; letter-spacing: -0.5px; color: var(--m-entete-fort); }
/* Le logotype garde ses deux tons : le nom en blanc, la seconde moitié dans
   l'accent d'en-tête — la même teinte que la barre de l'onglet actif. */
.m-logo span { color: var(--m-entete-accent); }
.m-nav { display: flex; gap: 4px; }
.m-nav a {
  text-decoration: none; color: var(--m-entete-texte); font-size: 14px; font-weight: 600;
  padding: 8px 14px; border-radius: var(--m-rayon);
  transition: color .25s var(--m-doux), background .25s var(--m-doux), box-shadow .2s var(--m-doux);
  position: relative;
}
.m-nav a::after {
  content: ""; position: absolute; left: 14px; right: 14px; bottom: 4px;
  height: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: left;
  transition: transform .35s var(--m-doux);
}
.m-nav a:hover { color: var(--m-entete-fort); }
.m-nav a:hover::after { transform: scaleX(1); }
/* Charte : l'élément actif se signale par une barre et un fond propre — jamais
   par un aplat coloré plein. La barre fait 2 px et garde des extrémités franches :
   le coin bas perd donc son rayon, sinon la barre s'amincirait à ses deux bouts.
   En bas sur la nav horizontale, à gauche quand la nav se replie en colonne. */
.m-nav a.actif {
  color: var(--m-entete-fort); background: var(--m-entete-surface);
  border-radius: var(--m-rayon) var(--m-rayon) 0 0;
}
/* Barre de l'onglet actif : sa teinte est celle de la marque (--m-entete-onglet,
   charte.css du site) — une couleur unie ou le filet d'identité d'EMO. Une ombre
   interne n'aurait pas pu porter un dégradé : la barre passe par ::after, qui sert
   déjà au soulignement de survol. Le fond propre de l'onglet et son texte en blanc
   franc restent les premiers signaux de l'état : la barre les confirme. */
.m-nav a.actif::after {
  left: 0; right: 0; bottom: 0; height: 2px;
  background: var(--m-entete-onglet);
  transform: none;
}
.m-nav a:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--m-entete-plein), 0 0 0 4px var(--m-entete-accent); }

.m-entete-droite { display: flex; align-items: center; gap: 16px; }

/* Bouton burger — visible uniquement en mobile (voir media query) */
.m-burger {
  display: none;
  width: 38px; height: 38px;
  align-items: center; justify-content: center;
  border: 1px solid var(--m-entete-bordure); border-radius: var(--m-rayon);
  background: var(--m-entete-surface); color: var(--m-entete-fort); cursor: pointer;
  font-size: 16px;
  transition: background .2s var(--m-doux), border-color .2s var(--m-doux);
}
.m-burger:hover { background: var(--m-entete-surface-forte); }
.m-burger:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--m-entete-plein), 0 0 0 4px var(--m-entete-accent); }

/* Sélecteurs de thème et d'en-tête — segmented controls jumeaux */
.m-theme-switcher {
  display: inline-flex; align-items: center;
  background: var(--m-entete-surface);
  border: 1px solid var(--m-entete-bordure);
  border-radius: var(--m-rayon-lg); padding: 2px; gap: 2px;
  transition: background .35s var(--m-doux), border-color .35s var(--m-doux);
}
.m-theme-btn {
  width: 30px; height: 30px;
  border: none; background: none;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--m-rayon); cursor: pointer;
  color: var(--m-entete-texte);
  font-size: 13px; font-family: var(--m-police);
  transition: background .25s var(--m-doux), color .25s var(--m-doux), transform .25s var(--m-ressort);
}
.m-theme-btn:hover { color: var(--m-entete-fort); transform: scale(1.05); }
.m-theme-btn.actif {
  background: var(--m-entete-surface-forte); color: var(--m-entete-fort);
  box-shadow: 0 1px 2px var(--m-carte-ombre-2);
}
.m-theme-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--m-entete-plein), 0 0 0 4px var(--m-entete-accent);
}

.m-user { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--m-entete-texte); }
.m-user-avatar {
  width: 32px; height: 32px; border-radius: 50%; background: var(--m-entete-surface);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 13px; color: var(--m-entete-fort);
  cursor: pointer;
  transition: transform .35s var(--m-ressort), box-shadow .25s var(--m-doux);
}
.m-user-avatar:hover, .m-user-avatar:focus-visible {
  outline: none;
  transform: scale(1.08);
  box-shadow: 0 0 0 2px var(--m-entete-plein), 0 0 0 4px var(--m-entete-accent);
}

/* Bouton d'en-tête : retour au tableau des modules du portail. Toujours le
   DERNIER élément de la barre, après l'utilisateur, dans toutes les apps —
   c'est la place que l'œil apprend une fois pour toutes. Il porte les jetons
   --m-entete-* de la barre foncée : fond translucide, texte fort, anneau de
   focus dans l'accent d'en-tête. En mobile il garde l'icône seule, le libellé
   restant dans title + aria-label. */
.m-entete-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-width: 38px; height: 38px; padding: 0 12px;
  border: 1px solid var(--m-entete-bordure); border-radius: var(--m-rayon);
  background: var(--m-entete-surface); color: var(--m-entete-fort);
  font-size: 14px; font-weight: 500; font-family: var(--m-police);
  text-decoration: none; cursor: pointer;
  transition: background .2s var(--m-doux), border-color .2s var(--m-doux), transform .25s var(--m-ressort);
}
.m-entete-btn:hover { background: var(--m-entete-surface-forte); }
.m-entete-btn:active { transform: scale(.96); }
.m-entete-btn:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--m-entete-plein), 0 0 0 4px var(--m-entete-accent); }
.m-entete-btn i { font-size: 14px; }

/* ─────────── CONTENU ─────────── */
.m-contenu { padding: 40px; }
.m-titre-page { font-size: 28px; font-weight: 700; letter-spacing: -0.5px; margin-bottom: 8px; }
.m-titre-page .curseur {
  display: inline-block; width: 2px; height: 0.85em; background: var(--m-accent);
  margin-left: 4px; vertical-align: -2px; animation: clignote 1.1s steps(2) infinite;
}
/* Le trait sous le titre : sa teinte est celle de la marque (--m-trait-titre, charte.css du site) */
.m-titre-page::after {
  content: ""; display: block;
  width: 48px; height: 3px; margin-top: 12px;
  border-radius: var(--m-rayon-pill);
  background: var(--m-trait-titre);
}
.m-sous-titre { font-size: 15px; color: var(--m-gris-500); margin-bottom: 24px; }
.m-sous-titre kbd {
  display: inline-block; font-variant-numeric: tabular-nums; font-size: 11px;
  color: var(--m-gris-700); background: var(--m-gris-100);
  border: 1px solid var(--m-bordure-champ); border-bottom-width: 2px;
  border-radius: 4px; padding: 1px 6px; line-height: 1.2;
}

/* ─────────── BANNER D'AIDE ─────────── */
/* Motif d'encadré de la charte : fond info clair + filet gauche de 3 px en
   couleur d'information. Avant, des pointillés gris sur un fond --m-gris-50 : soit
   1,03 : 1 avec le fond de page, autrement dit rien du tout. */
.m-banner-aide {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 18px;
  border: 1px solid var(--m-info); border-radius: var(--m-rayon);
  background: var(--m-info-light); color: var(--m-info);
  margin-bottom: 24px;
}
.m-banner-aide-icone {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--m-info); color: var(--m-sur-couleur);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  font-size: 14px;
}
.m-banner-aide-texte { font-size: 13px; color: inherit; }
.m-banner-aide-texte strong { font-weight: 700; }
.m-banner-aide-texte kbd {
  display: inline-block; font-variant-numeric: tabular-nums; font-size: 11px;
  color: var(--m-gris-700); background: var(--m-blanc);
  border: 1px solid var(--m-bordure-champ); border-bottom-width: 2px;
  border-radius: 4px; padding: 1px 6px; line-height: 1.2; margin: 0 1px;
}

/* ─────────── STATS + SPARKLINES + COUNTER ─────────── */
.m-stats {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
  background: var(--m-bordure); border: 1px solid var(--m-bordure);
  border-radius: var(--m-rayon); overflow: hidden; margin-bottom: var(--m-espace-6);
}
.m-stat {
  background: var(--m-blanc); padding: 20px 24px; position: relative;
  min-width: 0;                               /* autorise la colonne 1fr à rétrécir (sinon débordement + icônes rognées en mobile) */
  transition: background .3s var(--m-doux);
}
.m-stat:hover { background: var(--m-gris-50); }
/* KPI critique : liseré gauche de 3 px en erreur (posé par JS si valeur > 0) */
.m-stat-critique { box-shadow: inset 3px 0 0 var(--m-erreur); }
.m-stat-label {
  font-size: 12px; text-transform: uppercase; letter-spacing: 1px;
  color: var(--m-gris-500); margin-bottom: 4px; padding-right: 52px;
}
.m-stat-valeur {
  font-size: 28px; font-weight: 700; letter-spacing: -1px;
  font-variant-numeric: tabular-nums;
}
.m-stat-valeur.accent { color: var(--m-accent); }
.m-stat-valeur.succes { color: var(--m-succes); }
.m-stat-valeur.erreur { color: var(--m-erreur); }
.m-stat-valeur.bleu { color: var(--m-bleu); }
.m-stat-valeur.attention { color: var(--m-attention); }
.m-stat-valeur.info { color: var(--m-info); }
.m-stat-valeur.violet { color: var(--m-violet); }
.m-stat-detail { font-size: 12px; color: var(--m-gris-500); margin-top: 2px; font-variant-numeric: tabular-nums; }

.m-stat-icone {
  position: absolute; top: 16px; right: 16px;
  width: 34px; height: 34px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 14px; color: var(--m-sur-couleur);
  background: var(--m-gris-400);
  box-shadow: 0 2px 6px var(--m-carte-ombre-1), 0 1px 2px var(--m-carte-ombre-2);
  transition: transform .35s var(--m-ressort), box-shadow .3s var(--m-doux);
}
.m-stat:hover .m-stat-icone {
  transform: scale(1.1) rotate(-6deg);
  box-shadow: 0 4px 10px var(--m-carte-ombre-2);
}
.m-stat:nth-child(1) .m-stat-icone { background: var(--m-gris-400); }
.m-stat:nth-child(2) .m-stat-icone { background: var(--m-stat-2); }
.m-stat:nth-child(3) .m-stat-icone { background: var(--m-succes); }
.m-stat:nth-child(4) .m-stat-icone { background: var(--m-erreur); }
.m-stat:nth-child(5) .m-stat-icone { background: var(--m-stat-5); }
.m-stat:nth-child(6) .m-stat-icone { background: var(--m-attention); }
.m-stat:nth-child(7) .m-stat-icone { background: var(--m-info); }
.m-stat:nth-child(8) .m-stat-icone { background: var(--m-violet); }

.m-stat-spark {
  position: absolute; right: 16px; bottom: 14px; width: 84px; height: 28px;
  pointer-events: none;
}
.m-stat-spark path {
  fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 200; stroke-dashoffset: 200;
  animation: trace 1.4s var(--m-doux) forwards;
}
.m-stat-spark .aire { fill: currentColor; opacity: 0; stroke: none; animation: revele .8s var(--m-doux) forwards; }
.m-stat:nth-child(1) .m-stat-spark path { stroke: var(--m-gris-300); animation-delay: .35s; }
.m-stat:nth-child(2) .m-stat-spark path { stroke: var(--m-stat-2);    animation-delay: .50s; }
.m-stat:nth-child(3) .m-stat-spark path { stroke: var(--m-succes);    animation-delay: .65s; }
.m-stat:nth-child(4) .m-stat-spark path { stroke: var(--m-erreur);    animation-delay: .80s; }
.m-stat:nth-child(5) .m-stat-spark path { stroke: var(--m-stat-5);    animation-delay: .95s; }
.m-stat:nth-child(6) .m-stat-spark path { stroke: var(--m-attention); animation-delay: 1.10s; }
.m-stat:nth-child(7) .m-stat-spark path { stroke: var(--m-info);      animation-delay: 1.25s; }
.m-stat:nth-child(8) .m-stat-spark path { stroke: var(--m-violet);    animation-delay: 1.40s; }

/* ─────────── BARRE DE RECHERCHE + AUTOCOMPLETE ─────────── */
.m-barre-actions {
  display: flex; align-items: center; gap: var(--m-espace-3); margin-bottom: var(--m-espace-5); flex-wrap: wrap;
  position: relative; z-index: 50;
}
.m-recherche {
  flex: 1; min-width: 280px; position: relative;
  z-index: 1;
}
.m-recherche:focus-within { z-index: 200; }
.m-recherche input {
  width: 100%; padding: 11px 64px 11px 38px;
  border: 1px solid var(--m-bordure-champ);
  border-radius: var(--m-rayon); font-size: 14px; font-family: var(--m-police);
  background: var(--m-gris-50); outline: none;
  transition: border-color .25s var(--m-doux), background .25s var(--m-doux), box-shadow .25s var(--m-doux);
}
.m-recherche input:hover:not(:focus) { border-color: var(--m-bordure-champ-survol); }
.m-recherche input:focus { border-color: var(--m-accent); background: var(--m-blanc); box-shadow: 0 0 0 4px var(--m-accent-light); }
.m-recherche .icone-loupe {
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  color: var(--m-gris-500); font-size: 14px; pointer-events: none;
  transition: color .25s var(--m-doux), transform .35s var(--m-ressort);
}
.m-recherche input:focus ~ .icone-loupe, .m-recherche:focus-within .icone-loupe {
  color: var(--m-accent); transform: translateY(-50%) scale(1.1);
}
.m-recherche kbd {
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  font-variant-numeric: tabular-nums; font-size: 11px; color: var(--m-gris-500);
  background: var(--m-gris-100); border: 1px solid var(--m-bordure-champ);
  border-bottom-width: 2px; border-radius: 4px; padding: 1px 6px;
}
.m-dropdown {
  position: absolute; top: calc(100% + 4px); left: 0; right: 0;
  background: var(--m-blanc); border: 1px solid var(--m-bordure-forte);
  border-radius: var(--m-rayon); box-shadow: var(--m-ombre-flottant);
  padding: 6px; z-index: 1; display: none;
  animation: glisseHaut .25s var(--m-doux) backwards;
}
.m-recherche:focus-within .m-dropdown { display: block; }
.m-dropdown-titre {
  font-size: 11px; text-transform: uppercase; letter-spacing: 1px;
  color: var(--m-gris-500); padding: 6px 10px;
}
.m-dropdown-item {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 10px; border-radius: 4px; cursor: pointer; font-size: 14px;
  color: var(--m-noir);
  transition: background .15s ease;
}
.m-dropdown-item:hover, .m-dropdown-item.surligne { background: var(--m-gris-100); }
.m-dropdown-item .ref { font-variant-numeric: tabular-nums; font-size: 12px; color: var(--m-gris-500); }
.m-dropdown-item kbd {
  font-variant-numeric: tabular-nums; font-size: 10px; color: var(--m-gris-500);
  background: var(--m-gris-100); border: 1px solid var(--m-bordure-champ);
  border-radius: 3px; padding: 1px 5px;
  position: static; transform: none; border-bottom-width: 1px;
}

.m-select {
  padding: 11px 32px 11px 14px; border: 1px solid var(--m-bordure-champ);
  border-radius: var(--m-rayon); font-size: 14px; font-family: var(--m-police);
  color: var(--m-noir);
  background: var(--m-gris-50) var(--m-chevron) no-repeat right 12px center;
  appearance: none; cursor: pointer; outline: none;
  transition: border-color .2s var(--m-doux), box-shadow .2s var(--m-doux), background-color .2s var(--m-doux);
}
.m-select:hover { border-color: var(--m-bordure-champ-survol); background-color: var(--m-blanc); }
.m-select:focus { border-color: var(--m-accent); box-shadow: 0 0 0 4px var(--m-accent-light); }

/* ─────────── BOUTONS ─────────── */
.m-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 10px 18px; border-radius: var(--m-rayon);
  font-size: 14px; font-weight: 500; font-family: var(--m-police);
  border: 1px solid transparent; cursor: pointer; line-height: 1; text-decoration: none;
  position: relative;
  transition: background .2s var(--m-doux), color .2s var(--m-doux),
              border-color .2s var(--m-doux), box-shadow .2s var(--m-doux),
              transform .25s var(--m-ressort);
}
.m-btn:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--m-blanc), 0 0 0 4px var(--m-accent); }
.m-btn:active { transform: scale(0.97); }
.m-btn:disabled { opacity: .5; cursor: not-allowed; }
/* Primaire — l'aplat d'encre de la charte v2 : « le primaire porte l'action par
   défaut ». L'appui ne change plus la couleur, seulement l'échelle (§ 06). */
.m-btn-primaire { background: var(--m-emphase); color: var(--m-sur-emphase); }
.m-btn-primaire:hover:not(:disabled) { background: var(--m-emphase-hover); transform: translateY(-1px); }
.m-btn-secondaire { background: var(--m-blanc); color: var(--m-noir); border-color: var(--m-bordure-champ); }
.m-btn-secondaire:hover:not(:disabled) { background: var(--m-gris-50); border-color: var(--m-bordure-champ-survol); transform: translateY(-1px); }
/* Accent — l'aplat de marque : une seule action signalante par écran (§ 06) */
.m-btn-accent { background: var(--m-accent); color: var(--m-sur-couleur); }
.m-btn-accent:hover:not(:disabled) { background: var(--m-accent-hover); transform: translateY(-1px); }
.m-btn-danger { background: var(--m-blanc); color: var(--m-erreur); border-color: var(--m-erreur); }
.m-btn-danger:hover:not(:disabled) { background: var(--m-erreur-light); }
/* Ghost — sans fond ni bordure, il ne se lisait pas comme un bouton. Un liseré
   léger lui rend une limite. Il est tiré de currentColor, donc il suit la couleur
   du texte et reste visible quel que soit le fond : carte claire, thème sombre,
   ou la barre d'actions groupées où le ghost passe en blanc. Au survol la teinte
   fonce, le liseré fonce avec elle. */
.m-btn-ghost {
  background: none; color: var(--m-gris-500);
  border-color: color-mix(in srgb, currentColor 25%, transparent);
}
.m-btn-ghost:hover:not(:disabled) {
  color: var(--m-noir); background: var(--m-gris-100);
  border-color: color-mix(in srgb, currentColor 30%, transparent);
}
.m-btn-petit { padding: 6px 12px; font-size: 13px; }
.m-btn .fleche { transition: transform .35s var(--m-doux); display: inline-flex; }
.m-btn:hover .fleche { transform: translateX(3px); }

/* Plein vert — valider / confirmer une action positive */
.m-btn-succes { background: var(--m-succes); color: var(--m-sur-couleur); }
.m-btn-succes:hover:not(:disabled) { filter: brightness(1.08); transform: translateY(-1px); }
/* Doux — fond doux de l'accent + son encre, action moins lourde que le plein */
.m-btn-soft { background: var(--m-accent-light); color: var(--m-sur-accent-light); }
.m-btn-soft:hover:not(:disabled) { filter: brightness(.97); transform: translateY(-1px); }
body.theme-ardoise .m-btn-soft:hover:not(:disabled),
body.theme-sombre  .m-btn-soft:hover:not(:disabled) { filter: brightness(1.25); }
/* Contour accent — alternative légère, moins agressive que Danger */
.m-btn-contour-accent { background: none; color: var(--m-accent); border-color: var(--m-accent); }
.m-btn-contour-accent:hover:not(:disabled) { background: var(--m-accent-light); color: var(--m-sur-accent-light); border-color: var(--m-sur-accent-light); }
/* Carré, icône seule */
.m-btn-icone { padding: 0; width: 38px; height: 38px; justify-content: center; }
.m-btn-icone.m-btn-petit { width: 32px; height: 32px; }
/* Pastille compteur dans un bouton — style commun avec .m-badge-compteur (section badges) ; ici seul l'écart au texte */
.m-btn-compteur { margin-left: 4px; }
/* Sur fond foncé (boutons primaires noir / accent) la pastille s'inverse pour rester lisible */
.m-btn-primaire .m-btn-compteur { background: var(--m-sur-emphase); color: var(--m-emphase); }
.m-btn-accent .m-btn-compteur { background: var(--m-sur-couleur); color: var(--m-accent); }

.m-btn.charge { color: transparent !important; pointer-events: none; }
.m-btn.charge::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 14px; height: 14px; margin: -7px 0 0 -7px;
  border: 2px solid currentColor; border-top-color: transparent;
  border-radius: 50%; color: var(--m-blanc);
  animation: tournoie .8s linear infinite;
}
.m-btn-secondaire.charge::after, .m-btn-ghost.charge::after { color: var(--m-noir); }

/* ─────────── BADGES + POINT PULSANT ─────────── */
/* align-items:baseline, et non center : centrer le rond sur la boîte de ligne le
   pose au milieu du bas de casse, donc visiblement trop bas dès qu'un libellé
   commence par une majuscule (« En cours », « Bloqué »…). Posé sur la ligne de
   base, un rond de 8 px se centre sur la hauteur de capitale — mais paraît alors
   un peu haut sur un mot tout en bas de casse. On le descend donc à mi-chemin
   des deux bandes : (1cap - 1ex) / 4. Ces unités suivent la police et le corps,
   il n'y a aucune valeur magique à reprendre si l'un des deux change.
   Repli en 0.5px pour les navigateurs sans l'unité cap (ils ignorent le calc).
   Icônes et compteurs, eux, gardent le centrage sur la ligne. */
/* Padding vertical dissymétrique — 4 px en haut, 2 px en bas — et non 3/3.
   Un padding symétrique centre la BOÎTE DE LIGNE, pas l'encre : la police monte
   beaucoup plus haut au-dessus de la ligne de base qu'elle ne descend en dessous,
   si bien que le texte flotte 1 px trop haut dans la pastille. Le point étant
   calé sur le texte, tout le contenu remontait avec lui. Le 1 px repris en bas
   laisse la hauteur inchangée (22,8 px). Même principe que le décalage déjà en
   place sur .m-badge-compteur. À revoir si l'on change de police ou de corps. */
.m-badge {
  display: inline-flex; align-items: baseline; gap: 5px;
  padding: 4px 10px 2px; border-radius: var(--m-rayon-pill); font-size: 12px; font-weight: 500; line-height: 1.4;
}
.m-badge .m-point {
  align-self: baseline;
  transform: translateY(0.5px);
  transform: translateY(calc((1cap - 1ex) / 4));
}
/* L'icône vise la même ligne optique que le rond, par le chemin inverse : son
   encre remplit sa boîte, on la centre donc sur la ligne puis on la remonte
   d'un quart d'écart capitale/bas de casse. Sans cette remontée elle retombe
   au milieu du bas de casse — le défaut même qu'on corrige sur le rond. */
.m-badge i {
  align-self: center;
  transform: translateY(-0.5px);
  transform: translateY(calc((1ex - 1cap) / 4));
}
.m-badge .m-badge-compteur { align-self: center; }
/* Palette de badge — ses teintes viennent des jetons --m-badge-* de la charte du site
   (S2C et Neyrtec ont les leurs). Quatre teintes
   sont sémantiques (succès, erreur, attention, info) et disent ce qui se passe ;
   les autres (neutre, accent, violet, contour) rangent sans alerter. Chaque
   pastille associe un fond, une encre et un liseré : les fonds sont clairs et
   se dissoudraient sans lui sur le fond d'application. */
.m-badge-neutre { background: var(--m-badge-neutre-fond); color: var(--m-badge-neutre-encre); box-shadow: inset 0 0 0 1px var(--m-badge-neutre-bord); }
.m-badge-accent { background: var(--m-badge-accent-fond); color: var(--m-badge-accent-encre); box-shadow: inset 0 0 0 1px var(--m-badge-accent-bord); }
.m-badge-succes { background: var(--m-badge-succes-fond); color: var(--m-badge-succes-encre); box-shadow: inset 0 0 0 1px var(--m-badge-succes-bord); }
.m-badge-erreur { background: var(--m-badge-erreur-fond); color: var(--m-badge-erreur-encre); box-shadow: inset 0 0 0 1px var(--m-badge-erreur-bord); }
.m-badge-attention { background: var(--m-badge-attention-fond); color: var(--m-badge-attention-encre); box-shadow: inset 0 0 0 1px var(--m-badge-attention-bord); }
.m-badge-info { background: var(--m-badge-info-fond); color: var(--m-badge-info-encre); box-shadow: inset 0 0 0 1px var(--m-badge-info-bord); }
.m-badge-violet { background: var(--m-badge-violet-fond); color: var(--m-badge-violet-encre); box-shadow: inset 0 0 0 1px var(--m-badge-violet-bord); }
.m-badge-contour { background: none; border: 1px solid var(--m-gris-300); color: var(--m-gris-700); }

/* ─────────── PASTILLE D'ICÔNE ───────────
   Le carré arrondi qui porte l'icône d'une carte, d'une ligne de liste ou d'une entrée de
   menu. Même grammaire que le badge : un fond sourd, une encre du même ton, et sur fond
   sombre un liseré. Sans modificateur, elle porte l'accent de la marque.

   POURQUOI LE LISERÉ, ET SEULEMENT SUR FOND SOMBRE. Mesuré sur les trois thèmes, le fond
   sourd ne se détache de la surface que de 1,2 : 1 en clair, 1,1 : 1 en ardoise et
   1,0 : 1 en sombre. En clair l'écart de teinte suffit — un carré teinté sur du blanc se
   voit. En ardoise et en sombre les deux fonds sont presque noirs, la teinte ne sauve plus
   rien : la pastille disparaît et il ne reste qu'un glyphe posé sur le vide. Le liseré en
   currentColor lui rend sa forme, exactement comme il rend la sienne au badge (§ 03). Ne
   pas l'ajouter en clair, où il cerclerait chaque icône sans raison.

   L'ENCRE N'EST JAMAIS --m-accent SUR --m-accent-light : elle n'y tient que 3,95 : 1.
   --m-sur-accent-light est fait pour ce fond. Les sept autres variantes reprennent les
   paires du badge, déjà vérifiées par la charte.

   JAMAIS UN MOT DANS UNE PASTILLE. Mesurées sur les cinq marques et les trois thèmes, les
   huit paires tiennent de 3,10 à 10,21 : 1 — au-dessus des 3 : 1 que le WCAG demande à un
   objet graphique (1.4.11), donc bonnes pour une icône. Dix-neuf des cent vingt mesures
   restent sous 4,5 : 1,
   le seuil du texte : un chiffre ou une lettre posés là ne passeraient plus. Pour un
   compteur, c'est --m-badge-compteur ; pour deux mots, c'est le badge.

   Deux tailles : 38 px, la hauteur d'un bouton, et 48 px pour une carte large. */
.m-pastille-icone {
  --m-pastille-fond: var(--m-accent-light);
  --m-pastille-encre: var(--m-sur-accent-light);
  width: 38px; height: 38px; flex-shrink: 0; border-radius: var(--m-rayon);
  display: inline-flex; align-items: center; justify-content: center; font-size: 15px;
  background: var(--m-pastille-fond); color: var(--m-pastille-encre);
  transition: background .35s var(--m-doux), color .35s var(--m-doux), transform .35s var(--m-ressort);
}
.m-pastille-grande { width: 48px; height: 48px; font-size: 19px; }
.m-pastille-neutre    { --m-pastille-fond: var(--m-gris-100);        --m-pastille-encre: var(--m-gris-500); }
.m-pastille-bleu      { --m-pastille-fond: var(--m-bleu-light);      --m-pastille-encre: var(--m-bleu); }
.m-pastille-succes    { --m-pastille-fond: var(--m-succes-light);    --m-pastille-encre: var(--m-succes); }
.m-pastille-erreur    { --m-pastille-fond: var(--m-erreur-light);    --m-pastille-encre: var(--m-erreur); }
.m-pastille-attention { --m-pastille-fond: var(--m-attention-light); --m-pastille-encre: var(--m-attention); }
.m-pastille-info      { --m-pastille-fond: var(--m-info-light);      --m-pastille-encre: var(--m-info); }
.m-pastille-violet    { --m-pastille-fond: var(--m-violet-light);    --m-pastille-encre: var(--m-violet); }
body.theme-ardoise .m-pastille-icone,
body.theme-sombre  .m-pastille-icone { box-shadow: inset 0 0 0 1px currentColor; }
/* Dans une carte cliquable, la pastille suit le survol de la carte. */
.m-carte:hover .m-pastille-icone { transform: scale(1.06) rotate(-3deg); }

/* ─────────── NUANCIER (section Palette) ─────────── */
/* Les pastilles de marque portent les hex de la charte en dur : ce sont des
   valeurs de référence, elles ne doivent pas suivre le thème. Les pastilles de
   séries lisent --m-serie-*, elles, puisqu'un graphique doit rester lisible
   sur fond sombre. */
.m-nuancier { display: grid; gap: 1px; background: var(--m-gris-200); border: 1px solid var(--m-bordure); border-radius: var(--m-rayon); overflow: hidden; margin-bottom: var(--m-espace-5); }
.m-nuance { background: var(--m-blanc); padding: 0; }
.m-nuance-aplat { height: 56px; }
.m-nuance-txt { padding: 6px 8px; font-variant-numeric: tabular-nums; font-size: 10px; line-height: 1.5; color: var(--m-gris-500); }
.m-nuance-txt b { display: block; font-weight: 500; color: var(--m-noir); font-size: 10.5px; }
.m-legende { font-size: 12.5px; color: var(--m-gris-500); margin: 0 0 20px; }
.m-nuancier + .m-legende { margin-top: -14px; }
.m-sous-titre-mini { font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; color: var(--m-gris-500); margin-bottom: 10px; }
.m-badge i { font-size: 10px; }                 /* icône optionnelle dans un badge */

/* Pastille compteur (notifications, filtres…) — cercle pour 1 chiffre, pilule qui s'étire pour 2-3 chiffres */
.m-btn-compteur, .m-badge-compteur {
  display: inline-flex; align-items: center; justify-content: center;
  box-sizing: border-box; flex-shrink: 0;
  min-width: 18px; height: 18px; padding: 1px 6px 0;   /* 1px en haut : recentre optiquement le chiffre (les chiffres Source Sans portent un peu haut) */
  border-radius: var(--m-rayon-pill);
  font-size: 11px; font-weight: 700; line-height: 1;
  font-variant-numeric: tabular-nums;
  background: var(--m-accent); color: var(--m-sur-couleur);
}

.m-point { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex-shrink: 0; position: relative; }
/* Le point reprend l'encre de son badge : même teinte, même lecture. */
.m-point-vert { background: var(--m-badge-succes-encre); }
.m-point-bleu { background: var(--m-badge-accent-encre); }
.m-point-orange { background: var(--m-badge-attention-encre); }
.m-point-rouge { background: var(--m-badge-erreur-encre); }
.m-point-gris { background: var(--m-gris-300); }
.m-point-violet { background: var(--m-badge-violet-encre); }
.m-point-violet::after, .m-point-bleu::after, .m-point-orange::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: inherit; opacity: .6;
  animation: pulse 1.8s var(--m-doux) infinite;
}

/* ─────────── TABLEAU ─────────── */
.m-tableau-wrap { border: 1px solid var(--m-bordure); border-radius: var(--m-rayon); overflow: hidden; margin-bottom: var(--m-espace-6); background: var(--m-blanc); }
.m-tableau { width: 100%; border-collapse: collapse; font-size: 14px; }
/* Charte § 06 : en-tête sur gris-50, libellés 12 px capitales gris-500,
   cellules 12 × 16 px, filets gris-100 entre les lignes. */
.m-tableau thead { background: var(--m-gris-50); }
.m-tableau th {
  padding: 10px 16px; text-align: left; font-size: 12px; font-weight: 500;
  text-transform: uppercase; letter-spacing: 1px; color: var(--m-gris-500);
  border-bottom: 1px solid var(--m-bordure);
}
.m-tableau td { padding: 12px 16px; border-bottom: 1px solid var(--m-gris-100); position: relative; }
.m-tableau tbody tr {
  transition: background .25s var(--m-doux);
  opacity: 0; animation: apparait .5s var(--m-doux) forwards;
}
.m-tableau tbody tr:nth-child(1) { animation-delay: .35s; }
.m-tableau tbody tr:nth-child(2) { animation-delay: .42s; }
.m-tableau tbody tr:nth-child(3) { animation-delay: .49s; }
.m-tableau tbody tr:nth-child(4) { animation-delay: .56s; }
.m-tableau tbody tr:nth-child(5) { animation-delay: .63s; }
.m-tableau tbody tr:last-child td { border-bottom: none; }
.m-tableau tbody tr td:first-child::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 0;
  background: var(--m-accent); transition: width .25s var(--m-doux);
}
.m-tableau tbody tr:hover { background: var(--m-gris-50); }
.m-tableau tbody tr:hover td:first-child::before { width: 2px; }
.m-tableau .m-cell-titre { font-weight: 500; }
.m-tableau .m-cell-titre a {
  color: var(--m-noir); text-decoration: none; position: relative;
  transition: color .2s var(--m-doux);
}
.m-tableau .m-cell-titre a::after {
  content: ""; position: absolute; left: 0; bottom: -2px; height: 1px; width: 100%;
  background: currentColor; transform: scaleX(0); transform-origin: left;
  transition: transform .35s var(--m-doux);
}
.m-tableau .m-cell-titre a:hover { color: var(--m-accent); }
.m-tableau .m-cell-titre a:hover::after { transform: scaleX(1); }
/* Charte : mono pour les identifiants, references, dates et montants alignes */
.m-tableau .m-cell-ref { font-size: 13px; color: var(--m-gris-500); font-variant-numeric: tabular-nums; }
.m-tableau .m-cell-actions { display: flex; gap: 4px; }

/* ─────────── EN-TÊTE DE TRI 3 ÉTATS + FILTRES PAR COLONNE ─────────── */
/* Calqué sur `.sp-tableau` du module traitement_nomenclatures (Synthèse).  */
.m-tableau thead .m-entetes-tri th {
  position: sticky; top: 0; z-index: 1;
  background: var(--m-gris-50);
  cursor: default; user-select: none; white-space: nowrap;
}
.m-tableau thead .m-triable { cursor: pointer; transition: background .12s var(--m-doux); }
.m-tableau thead .m-triable:hover { background: var(--m-gris-100); }
.m-tableau thead .m-triable:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--m-accent); border-radius: var(--m-rayon-sm); }
.m-tri-fleche {
  display: inline-block; width: 12px; margin-left: 4px;
  font-size: 11px; opacity: .35; vertical-align: middle;
  transition: opacity .12s var(--m-doux), color .12s var(--m-doux);
}
.m-tri-fleche::after { content: "↕"; }
.m-tableau th.m-triable[aria-sort="ascending"]  .m-tri-fleche,
.m-tableau th.m-triable[aria-sort="descending"] .m-tri-fleche { opacity: 1; color: var(--m-accent); }
.m-tableau th.m-triable[aria-sort="ascending"]  .m-tri-fleche::after { content: "↑"; }
.m-tableau th.m-triable[aria-sort="descending"] .m-tri-fleche::after { content: "↓"; }

.m-tableau thead .m-filtres-ligne th {
  padding: 4px 6px;
  background: var(--m-gris-50);
  border-top: 1px solid var(--m-bordure);
  position: sticky; top: 32px; z-index: 1;
}
.m-filtre-col {
  width: 100%; padding: 4px 8px;
  border: 1px solid var(--m-bordure-champ); border-radius: 6px;
  background: var(--m-blanc); color: var(--m-noir);
  font-family: var(--m-police); font-size: 12px;
  outline: none;
  transition: border-color .15s var(--m-doux), box-shadow .15s var(--m-doux);
}
.m-filtre-col:focus { border-color: var(--m-accent); box-shadow: 0 0 0 2px var(--m-accent-light); }
.m-filtre-col::placeholder { color: var(--m-gris-400); font-style: italic; }

.m-filtre-combo { position: relative; display: flex; align-items: stretch; width: 100%; }
.m-filtre-combo .m-filtre-col {
  border-top-right-radius: 0; border-bottom-right-radius: 0;
  border-right: 0; flex: 1 1 auto; min-width: 0;
}
.m-filtre-combo-bouton {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0 8px;
  border: 1px solid var(--m-bordure-champ);
  border-top-right-radius: 6px; border-bottom-right-radius: 6px;
  background: var(--m-gris-50); color: var(--m-gris-500);
  font-size: 11px; cursor: pointer;
  transition: background-color .12s var(--m-doux), color .12s var(--m-doux), border-color .12s var(--m-doux);
}
.m-filtre-combo-bouton:hover { background: var(--m-gris-100); color: var(--m-accent); }
.m-filtre-combo.ouvert .m-filtre-col,
.m-filtre-combo.ouvert .m-filtre-combo-bouton { border-color: var(--m-accent); }
.m-filtre-combo.ouvert .m-filtre-combo-bouton { background: var(--m-accent-light); color: var(--m-sur-accent-light); }
.m-filtre-combo.ouvert .m-filtre-combo-bouton i { transform: rotate(180deg); }
.m-filtre-combo-bouton i { transition: transform .15s var(--m-doux); }
.m-filtre-combo-liste {
  position: fixed; top: 0; left: 0;
  width: max-content;
  max-width: min(420px, 90vw); max-height: 260px;
  overflow-y: auto;
  margin: 0; padding: 4px; list-style: none;
  background: var(--m-blanc);
  border: 1px solid var(--m-bordure-forte); border-radius: 6px;
  box-shadow: var(--m-ombre-flottant);
  z-index: 9999;
}
.m-filtre-combo-option {
  display: flex; justify-content: space-between; align-items: center;
  gap: 8px; padding: 6px 10px;
  font-size: 12px; color: var(--m-noir);
  border-radius: 4px; cursor: pointer;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: background-color .08s var(--m-doux), color .08s var(--m-doux);
}
.m-filtre-combo-option > span:first-child { overflow: hidden; text-overflow: ellipsis; }
.m-filtre-combo-option-reset {
  color: var(--m-gris-500);
  border-bottom: 1px solid var(--m-bordure);
  margin-bottom: 4px; padding-bottom: 8px;
  border-radius: 0; font-style: italic;
}
.m-filtre-combo-option-reset i { margin-right: 4px; }
.m-filtre-combo-option:hover,
.m-filtre-combo-option.surligne,
.m-filtre-combo-option[aria-selected="true"] { background: var(--m-accent-light); color: var(--m-sur-accent-light); }
.m-filtre-combo-option-vide {
  padding: 8px 10px; font-size: 12px;
  color: var(--m-gris-400); font-style: italic; text-align: center;
}
.m-filtre-combo-option-compteur {
  margin-left: 8px; font-size: 10px;
  color: var(--m-gris-400); font-variant-numeric: tabular-nums;
}
.m-filtre-combo-option:hover .m-filtre-combo-option-compteur,
.m-filtre-combo-option[aria-selected="true"] .m-filtre-combo-option-compteur { color: var(--m-accent); opacity: .8; }

.m-tableau .m-table-ligne-vide {
  padding: 20px 16px; text-align: center;
  color: var(--m-gris-500); font-size: 12.5px; font-style: italic;
}
.m-tableau .m-table-ligne-vide i { margin-right: 6px; color: var(--m-gris-400); }
.m-tableau tbody tr.no-results-row td:first-child::before { display: none; }

/* ─────────── PROGRESSION + SHIMMER ─────────── */
.m-progression { width: 100%; height: 6px; background: var(--m-gris-100); border-radius: 3px; overflow: hidden; position: relative; }
.m-progression-barre {
  height: 100%; border-radius: 3px; width: 0;
  animation: remplir 1.1s var(--m-doux) forwards; animation-delay: .5s;
  position: relative; overflow: hidden;
}
.m-progression-barre[data-largeur="10"]  { --largeur: 10%; }
.m-progression-barre[data-largeur="30"]  { --largeur: 30%; }
.m-progression-barre[data-largeur="45"]  { --largeur: 45%; }
.m-progression-barre[data-largeur="65"]  { --largeur: 65%; }
.m-progression-barre[data-largeur="100"] { --largeur: 100%; }
.m-progression-barre.accent { background: var(--m-accent); }
.m-progression-barre.succes { background: var(--m-succes); }
.m-progression-barre.accent::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.5), transparent);
  transform: translateX(-100%);
  animation: shimmer 2.4s linear infinite; animation-delay: 1.6s;
}

/* ─────────── ONGLETS GLISSANTS ─────────── */
.m-onglets {
  display: flex; border-bottom: 1px solid var(--m-bordure); margin-bottom: var(--m-espace-5); gap: 0;
  position: relative;
}
.m-onglet {
  padding: 10px 20px; font-size: 14px; font-weight: 500; color: var(--m-gris-500);
  border: none; background: none; cursor: pointer; font-family: var(--m-police);
  transition: color .25s var(--m-doux);
}
.m-onglet:hover { color: var(--m-noir); }
.m-onglet.actif { color: var(--m-noir); }
.m-onglet:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--m-blanc), 0 0 0 4px var(--m-accent); border-radius: 4px; }
/* Charte : l'onglet actif se signale par un indicateur de 2 px, pas par un aplat */
.m-onglets-indicateur {
  position: absolute; bottom: -1px; height: 2px; background: var(--m-accent);
  transition: left .4s var(--m-ressort), width .4s var(--m-ressort);
}

/* ─────────── FILTRES ACTIFS ─────────── */
.m-filtres-actifs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 16px; }
.m-filtre-tag {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; background: var(--m-gris-100);
  border-radius: var(--m-rayon-pill);
  font-size: 12px; color: var(--m-gris-700);
  transform-origin: center;
  transition: transform .35s var(--m-ressort), opacity .25s var(--m-doux), padding .3s var(--m-doux), margin .3s var(--m-doux);
}
.m-filtre-tag.parti { transform: scale(0.6); opacity: 0; padding: 0; margin: 0; }
.m-filtre-tag button {
  background: none; border: none; cursor: pointer; color: var(--m-gris-500);
  font-size: 11px; line-height: 1; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; border-radius: 50%;
  transition: color .2s var(--m-doux), background .2s var(--m-doux), transform .25s var(--m-ressort);
}
.m-filtre-tag button:hover { color: var(--m-erreur); background: var(--m-erreur-light); transform: rotate(90deg); }

/* ─────────── PAGINATION ─────────── */
.m-pagination { display: flex; align-items: center; gap: 4px; justify-content: center; margin-top: 24px; }
.m-page {
  width: 36px; height: 36px; display: flex; align-items: center; justify-content: center;
  border-radius: var(--m-rayon); font-size: 14px; font-weight: 500;
  border: 1px solid transparent; cursor: pointer;
  background: none; font-family: var(--m-police); color: var(--m-gris-500);
  transition: background .2s var(--m-doux), color .2s var(--m-doux), transform .25s var(--m-ressort);
}
.m-page:hover { background: var(--m-gris-100); color: var(--m-noir); transform: scale(1.06); }
.m-page.actif { background: var(--m-noir); color: var(--m-blanc); }
.m-page:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--m-blanc), 0 0 0 4px var(--m-accent); }

/* ─────────── CARTES ─────────── */
.m-grille-cartes { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--m-espace-4); margin-bottom: var(--m-espace-6); }
.m-carte {
  border: 1px solid var(--m-bordure); border-radius: var(--m-rayon); padding: 20px;
  cursor: pointer; background: var(--m-blanc);
  transition: border-color .25s var(--m-doux), transform .35s var(--m-ressort), box-shadow .35s var(--m-doux), background .35s var(--m-doux);
}
.m-carte:hover {
  border-color: var(--m-bordure-forte);
  transform: translateY(-3px);
  box-shadow: var(--m-ombre-carte);
}
/* En sombre/ardoise, l'ombre noire est invisible : on signale l'élévation par une surface plus claire */
body.theme-sombre  .m-carte:hover,
body.theme-ardoise .m-carte:hover { background: var(--m-gris-100); }
.m-carte-entete { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 12px; }
.m-carte-titre { font-weight: 700; font-size: 15px; }
.m-carte-desc { font-size: 13px; color: var(--m-gris-500); line-height: 1.5; margin-bottom: 16px; }
.m-carte-meta { display: flex; gap: 16px; font-size: 12px; color: var(--m-gris-500); }
.m-carte-meta span { display: flex; align-items: center; gap: 6px; }
.m-carte-meta i { color: var(--m-gris-400); font-size: 12px; }

/* ─────────── ALERTES ─────────── */
.m-alerte {
  padding: 12px 16px; border-radius: var(--m-rayon); font-size: 14px;
  display: flex; align-items: flex-start; gap: 10px; margin-bottom: 16px;
  border: 1px solid;
  animation: glisse .55s var(--m-doux) backwards;
}
/* Font Awesome pose « line-height: 1 » sur ses icônes : alignée en haut, la
   pastille de 14 px flotterait 4 px au-dessus d'une ligne de texte de 22 px.
   Elle hérite l'interligne du bandeau et se centre sur la première ligne. */
.m-alerte > i { line-height: inherit; }
/* Le plein tient la bordure, l'encre tient le texte : les teintes avivées ne
   passeraient plus AA en texte sur leur propre tint douce. */
.m-alerte-info { background: var(--m-info-light); border-color: var(--m-info); color: var(--m-info-encre); }
.m-alerte-succes { background: var(--m-succes-light); border-color: var(--m-succes); color: var(--m-succes-encre); }
.m-alerte-erreur { background: var(--m-erreur-light); border-color: var(--m-erreur); color: var(--m-erreur-encre); }
.m-alerte-attention { background: var(--m-attention-light); border-color: var(--m-attention); color: var(--m-attention-encre); }

/* ─────────── FORMULAIRE ─────────── */
.m-form-section { margin-bottom: var(--m-espace-6); }
.m-form-section h3 { font-size: 16px; font-weight: 700; color: var(--m-noir); margin-bottom: var(--m-espace-4); }
.m-form-grille { display: grid; grid-template-columns: 1fr 1fr; gap: var(--m-espace-4); }
/* Des champs empilés sur une seule colonne : le même pas de 16 px que la
   grille. Sans elle, deux .m-form-groupe qui se suivent se touchent. */
.m-form-pile { display: flex; flex-direction: column; gap: var(--m-espace-4); }
/* Plusieurs cases, boutons radio ou interrupteurs sous un même libellé. */
.m-form-choix { display: flex; flex-direction: column; gap: 8px; }
.m-form-groupe { display: flex; flex-direction: column; gap: 5px; position: relative; }
.m-form-groupe.pleine-largeur { grid-column: 1 / -1; }
.m-form-label { font-size: 13px; font-weight: 500; color: var(--m-gris-700); }
.obligatoire { color: var(--m-erreur); margin-left: 2px; font-weight: 500; }

.m-form-input {
  padding: 11px 14px; border: 1px solid var(--m-bordure-champ); border-radius: var(--m-rayon);
  font-size: 14px; font-family: var(--m-police); background: var(--m-blanc); outline: none;
  width: 100%;
  transition: border-color .2s var(--m-doux), box-shadow .2s var(--m-doux);
}
.m-form-input:hover:not(:focus):not(:disabled) { border-color: var(--m-bordure-champ-survol); }
.m-form-input:focus { border-color: var(--m-accent); box-shadow: 0 0 0 4px var(--m-accent-light); }
.m-form-input:disabled { background: var(--m-gris-50); color: var(--m-gris-400); cursor: not-allowed; }
.m-form-input::placeholder { color: var(--m-gris-400); }
textarea.m-form-input { resize: vertical; min-height: 100px; }
/* Chromium glisse 1 px en haut et en bas à l'intérieur d'un champ date : il
   faisait 43 px à côté d'un champ texte de 41. Même hauteur pour tous. */
.m-form-input::-webkit-datetime-edit-fields-wrapper { padding: 0; }

.m-form-aide { font-size: 12px; color: var(--m-gris-500); display: flex; align-items: center; gap: 6px; }
.m-form-aide i { font-size: 11px; }
.m-form-erreur { font-size: 12px; color: var(--m-erreur); display: flex; align-items: center; gap: 6px; }
.m-form-erreur i { font-size: 11px; }

/* Label flottant */
.m-flottant { position: relative; display: flex; flex-direction: column; }
.m-flottant input, .m-flottant textarea {
  padding: 22px 14px 8px; border: 1px solid var(--m-bordure-champ); border-radius: var(--m-rayon);
  font-size: 14px; font-family: var(--m-police); background: var(--m-blanc); outline: none;
  width: 100%;
  transition: border-color .2s var(--m-doux), box-shadow .2s var(--m-doux);
}
.m-flottant input:hover:not(:focus), .m-flottant textarea:hover:not(:focus) { border-color: var(--m-bordure-champ-survol); }
.m-flottant input:focus, .m-flottant textarea:focus {
  border-color: var(--m-accent); box-shadow: 0 0 0 4px var(--m-accent-light);
}
.m-flottant label {
  position: absolute; left: 14px; top: 16px; pointer-events: none;
  font-size: 14px; color: var(--m-gris-500); background: transparent;
  transition: top .2s var(--m-doux), font-size .2s var(--m-doux),
              color .2s var(--m-doux), letter-spacing .2s var(--m-doux);
}
.m-flottant input:focus + label,
.m-flottant input:not(:placeholder-shown) + label,
.m-flottant textarea:focus + label,
.m-flottant textarea:not(:placeholder-shown) + label {
  top: 6px; font-size: 11px; color: var(--m-accent);
  text-transform: uppercase; letter-spacing: .5px; font-weight: 500;
}
.m-flottant input[type="date"] + label,
.m-flottant input[type="time"] + label,
.m-flottant input[type="month"] + label {
  top: 6px; font-size: 11px;
  text-transform: uppercase; letter-spacing: .5px; font-weight: 500;
  color: var(--m-gris-500);
}
.m-flottant input[type="date"]:focus + label,
.m-flottant input[type="time"]:focus + label,
.m-flottant input[type="month"]:focus + label {
  color: var(--m-accent);
}

.m-flottant.valide input { border-color: var(--m-succes); padding-right: 40px; }
.m-flottant.valide input:focus { border-color: var(--m-succes); box-shadow: 0 0 0 4px var(--m-succes-light); }
.m-flottant.invalide input { border-color: var(--m-erreur); padding-right: 40px; }
.m-flottant.invalide input:focus { border-color: var(--m-erreur); box-shadow: 0 0 0 4px var(--m-erreur-light); }

.m-flottant.valide input:focus + label,
.m-flottant.valide input:not(:placeholder-shown) + label { color: var(--m-succes); }
.m-flottant.invalide input:focus + label,
.m-flottant.invalide input:not(:placeholder-shown) + label { color: var(--m-erreur); }

.m-flottant .m-form-icone {
  position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
  pointer-events: none; font-size: 16px;
  opacity: 0;
  transition: opacity .25s var(--m-doux), transform .35s var(--m-ressort);
}
.m-flottant.valide .m-form-icone { color: var(--m-succes); opacity: 1; transform: translateY(-50%) scale(1); }
.m-flottant.invalide .m-form-icone { color: var(--m-erreur); opacity: 1; transform: translateY(-50%) scale(1); }

/* Switch */
.m-switch-ligne {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 14px; border: 1px solid var(--m-bordure);
  border-radius: var(--m-rayon); cursor: pointer;
  background: var(--m-blanc);
  transition: background .2s var(--m-doux), border-color .2s var(--m-doux),
              transform .2s var(--m-ressort);
}
/* Charte § 06 : « les lignes de contrôle glissent de 2 px vers la droite au survol ». */
.m-switch-ligne:hover { background: var(--m-gris-50); transform: translateX(2px); }
.m-switch-info { display: flex; flex-direction: column; gap: 2px; }
.m-switch-titre { font-size: 14px; font-weight: 500; }
.m-switch-desc { font-size: 12px; color: var(--m-gris-500); }
.m-switch { position: relative; width: 38px; height: 22px; flex-shrink: 0; }
.m-switch input { position: absolute; inset: 0; opacity: 0; cursor: pointer; z-index: 2; }
.m-switch-piste {
  position: absolute; inset: 0; background: var(--m-gris-300);
  border-radius: 11px; transition: background .25s var(--m-doux), box-shadow .2s var(--m-doux);
}
.m-switch-piste::before {
  content: ""; position: absolute; left: 2px; top: 2px;
  width: 18px; height: 18px; background: #ffffff;
  border-radius: 50%; box-shadow: 0 1px 3px rgba(0,0,0,.18);
  transition: transform .28s var(--m-ressort);
}
.m-switch input:checked ~ .m-switch-piste { background: var(--m-accent); }
.m-switch input:checked ~ .m-switch-piste::before { transform: translateX(16px); }
.m-switch input:focus-visible ~ .m-switch-piste { box-shadow: 0 0 0 4px var(--m-accent-light); }

/* Checkbox custom */
.m-check {
  display: inline-flex; align-items: center; gap: 10px;
  cursor: pointer; font-size: 14px;
  padding: 10px 12px; border: 1px solid var(--m-bordure); border-radius: var(--m-rayon);
  background: var(--m-blanc);
  user-select: none;
  transition: background .15s var(--m-doux), border-color .15s var(--m-doux), transform .2s var(--m-ressort);
}
.m-check:hover { background: var(--m-gris-50); transform: translateX(2px); }
.m-check input { position: absolute; opacity: 0; pointer-events: none; }
.m-check-boite {
  width: 18px; height: 18px; border: 1.5px solid var(--m-gris-300);
  border-radius: var(--m-rayon-sm); flex-shrink: 0; position: relative;
  transition: all .2s var(--m-doux);
}
.m-check-boite svg {
  position: absolute; inset: 1px; stroke: var(--m-sur-couleur); fill: none;
  stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 18; stroke-dashoffset: 18;
  transition: stroke-dashoffset .25s ease .05s;
}
.m-check input:checked ~ .m-check-boite { background: var(--m-accent); border-color: var(--m-accent); }
.m-check input:checked ~ .m-check-boite svg { stroke-dashoffset: 0; }
.m-check input:focus-visible ~ .m-check-boite { box-shadow: 0 0 0 4px var(--m-accent-light); }
.m-check:has(input:checked) { border-color: var(--m-accent); background: var(--m-accent-light); }

/* Radio custom */
.m-radio {
  display: inline-flex; align-items: center; gap: 10px;
  cursor: pointer; font-size: 14px;
  padding: 10px 12px; border: 1px solid var(--m-bordure); border-radius: var(--m-rayon);
  background: var(--m-blanc);
  user-select: none;
  transition: background .15s var(--m-doux), border-color .15s var(--m-doux), transform .2s var(--m-ressort);
}
.m-radio:hover { background: var(--m-gris-50); transform: translateX(2px); }
.m-radio input { position: absolute; opacity: 0; pointer-events: none; }
.m-radio-cercle {
  width: 18px; height: 18px; border: 1.5px solid var(--m-gris-300);
  border-radius: 50%; flex-shrink: 0; position: relative;
  transition: all .2s var(--m-doux);
}
.m-radio-cercle::after {
  content: ""; position: absolute; inset: 4px; border-radius: 50%;
  background: var(--m-accent); transform: scale(0);
  transition: transform .2s var(--m-ressort);
}
.m-radio input:checked ~ .m-radio-cercle { border-color: var(--m-accent); }
.m-radio input:checked ~ .m-radio-cercle::after { transform: scale(1); }
.m-radio input:focus-visible ~ .m-radio-cercle { box-shadow: 0 0 0 4px var(--m-accent-light); }
.m-radio:has(input:checked) { border-color: var(--m-accent); background: var(--m-accent-light); }

/* Slider */
.m-slider {
  appearance: none; -webkit-appearance: none;
  width: 100%; height: 4px;
  background: var(--m-gris-200); border-radius: 2px;
  outline: none; cursor: pointer;
}
.m-slider::-webkit-slider-thumb {
  appearance: none; -webkit-appearance: none;
  width: 18px; height: 18px; background: var(--m-noir);
  border-radius: 50%; border: 3px solid var(--m-blanc);
  box-shadow: 0 0 0 1px var(--m-gris-300), 0 1px 2px rgba(0,0,0,.2);
  cursor: grab;
  transition: transform .2s var(--m-ressort), box-shadow .2s var(--m-doux);
}
.m-slider::-webkit-slider-thumb:hover { transform: scale(1.15); }
.m-slider::-webkit-slider-thumb:active { cursor: grabbing; transform: scale(1.1); }
.m-slider:focus::-webkit-slider-thumb { box-shadow: 0 0 0 1px var(--m-accent), 0 0 0 5px var(--m-accent-light); }
.m-slider::-moz-range-thumb { width: 18px; height: 18px; background: var(--m-noir); border-radius: 50%; border: 3px solid var(--m-blanc); box-shadow: 0 0 0 1px var(--m-gris-300); cursor: grab; }
.m-slider-ligne { display: flex; align-items: center; gap: 16px; }
.m-slider-valeur {
  font-family: var(--m-police); font-size: 13px; color: var(--m-noir);
  background: var(--m-gris-100); padding: 4px 10px; border-radius: 4px;
  min-width: 56px; white-space: nowrap; text-align: center; font-variant-numeric: tabular-nums;
  transition: background .15s ease;
}
.m-slider:active + .m-slider-valeur, .m-slider:focus + .m-slider-valeur { background: var(--m-accent-light); color: var(--m-sur-accent-light); }

/* Chips multi-select */
.m-chips-input {
  display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
  padding: 8px 10px; border: 1px solid var(--m-bordure-champ); border-radius: var(--m-rayon);
  background: var(--m-blanc); cursor: text; min-height: 44px;
  transition: border-color .2s var(--m-doux), box-shadow .2s var(--m-doux);
}
.m-chips-input:focus-within { border-color: var(--m-accent); box-shadow: 0 0 0 4px var(--m-accent-light); }
.m-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 4px 4px 10px; background: var(--m-gris-100);
  border-radius: var(--m-rayon-pill); font-size: 13px; color: var(--m-noir);
  animation: apparait .35s var(--m-ressort);
  transition: transform .35s var(--m-ressort), opacity .25s var(--m-doux);
}
.m-chip.parti { transform: scale(0.6); opacity: 0; }
.m-chip-fermer {
  width: 18px; height: 18px; border-radius: 50%;
  background: none; border: none; cursor: pointer;
  color: var(--m-gris-500); font-size: 11px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s ease, color .15s ease, transform .25s var(--m-ressort);
}
.m-chip-fermer:hover { background: var(--m-gris-300); color: var(--m-noir); transform: rotate(90deg); }
.m-chips-saisie {
  flex: 1; min-width: 80px; border: none; outline: none; padding: 4px;
  font-size: 14px; font-family: var(--m-police); background: transparent;
}

/* ─────────── TIMELINE ─────────── */
.m-timeline { display: flex; flex-direction: column; gap: 0; }
.m-timeline-item {
  display: flex; gap: 16px; padding: 16px 0;
  border-bottom: 1px solid var(--m-gris-100);
  opacity: 0; animation: glisse .5s var(--m-doux) forwards;
}
.m-timeline-item:nth-child(1) { animation-delay: .15s; }
.m-timeline-item:nth-child(2) { animation-delay: .28s; }
.m-timeline-item:nth-child(3) { animation-delay: .41s; }
.m-timeline-item:last-child { border-bottom: none; }
.m-timeline-avatar {
  width: 32px; height: 32px; border-radius: 50%; background: var(--m-gris-200);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; color: var(--m-gris-700); flex-shrink: 0;
  transition: transform .35s var(--m-ressort), box-shadow .25s var(--m-doux);
}
.m-timeline-item:hover .m-timeline-avatar { transform: scale(1.08); box-shadow: 0 0 0 4px var(--m-accent-light); }
.m-timeline-contenu { flex: 1; }
.m-timeline-auteur { font-weight: 500; font-size: 14px; }
.m-timeline-date { font-size: 12px; color: var(--m-gris-500); font-variant-numeric: tabular-nums; }
.m-timeline-texte { font-size: 14px; color: var(--m-gris-700); margin-top: 4px; }

/* ─────────── TOASTS ─────────── */
.m-toasts {
  position: fixed;
  top: calc(56px + 16px);
  right: 24px;
  z-index: 1000;
  display: flex; flex-direction: column; gap: 10px;
  pointer-events: none;
}
/* Surface de carte, comme la modale et le tiroir : le toast ne s'inverse plus
   en pavé foncé sur le thème clair. La couleur du type vit dans la pastille
   et le liseré gauche. */
.m-toast {
  pointer-events: auto;
  display: flex; align-items: flex-start; gap: 12px;
  padding: 12px 14px;
  background: var(--m-blanc); color: var(--m-noir);
  border: 1px solid var(--m-bordure-forte);
  border-left: 3px solid var(--m-gris-300);
  border-radius: var(--m-rayon); min-width: 280px; max-width: 360px;
  box-shadow: var(--m-ombre-toast);
  animation: glisseDroite .4s var(--m-doux) both;
}
.m-toast-icone {
  width: 22px; height: 22px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  color: var(--m-sur-couleur); font-size: 11px;
}
.m-toast-titre { font-size: 14px; font-weight: 500; }
.m-toast-desc { font-size: 12px; color: var(--m-gris-500); margin-top: 2px; }
.m-toast-fermer {
  background: none; border: none; color: var(--m-gris-500); cursor: pointer;
  font-size: 12px; line-height: 1; padding: 4px; margin-left: auto;
  transition: color .15s ease;
}
.m-toast-fermer:hover { color: var(--m-noir); }
.m-toast.succes .m-toast-icone { background: var(--m-succes); }
.m-toast.info   .m-toast-icone { background: var(--m-bleu); }
.m-toast.erreur .m-toast-icone { background: var(--m-erreur); }
.m-toast.succes { border-left-color: var(--m-succes); }
.m-toast.info   { border-left-color: var(--m-bleu); }
.m-toast.erreur { border-left-color: var(--m-erreur); }

/* ─────────── DIVERS ─────────── */
.m-sep { height: 1px; background: var(--m-gris-200); margin: var(--m-espace-6) 0; }
/* Charte § 04 : le titre de page porte un trait de 48 × 3 px, le titre de
   section un trait réduit de 32 × 2 px. C'est la seule ornementation
   typographique du système — pas de filet pleine largeur. */
.m-sous-titre-section {
  font-size: 20px; font-weight: 700; margin-bottom: 16px; letter-spacing: -0.3px;
  color: var(--m-noir);
}
.m-sous-titre-section::after {
  content: ""; display: block;
  width: 32px; height: 2px; margin-top: 10px;
  border-radius: var(--m-rayon-pill);
  background: var(--m-trait-titre);
}

/* ─────────── PLIER / DÉPLIER (accordéons & panneaux) ───────────
   Technique : on anime grid-template-rows/columns de 0fr vers 1fr. La piste
   passe ainsi de 0 à la taille réelle du contenu — animation fluide SANS
   mesure JavaScript de hauteur. L'enfant porte overflow:hidden + min-*:0
   pour être proprement rogné pendant le pli. reduced-motion neutralise tout. */

/* — Accordéon VERTICAL (haut→bas et bas→haut) — */
.m-pli {
  border: 1px solid var(--m-bordure); border-radius: var(--m-rayon);
  background: var(--m-blanc); overflow: hidden;
}
.m-pli + .m-pli { margin-top: 10px; }
.m-pli-tete {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 14px 16px; background: none; border: none; cursor: pointer;
  font-family: var(--m-police); font-size: 14px; font-weight: 500;
  color: var(--m-noir); text-align: left;
  transition: background .2s var(--m-doux);
}
.m-pli-tete:hover { background: var(--m-gris-50); }
.m-pli-tete:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--m-accent); }
.m-pli-tete .m-pli-titre { flex: 1; }
.m-pli-chevron {
  color: var(--m-gris-500); font-size: 12px;
  transition: transform .3s var(--m-doux), color .2s var(--m-doux);
}
.m-pli.ouvert .m-pli-chevron { transform: rotate(180deg); color: var(--m-accent); }

.m-pli-corps {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows .32s var(--m-doux);
}
.m-pli.ouvert .m-pli-corps { grid-template-rows: 1fr; }
.m-pli-clip { overflow: hidden; min-height: 0; }
.m-pli-contenu {
  padding: 2px 16px 16px; font-size: 13px; color: var(--m-gris-700); line-height: 1.6;
  opacity: 0; transform: translateY(-6px);
  transition: opacity .25s var(--m-doux) .04s, transform .3s var(--m-doux) .04s;
}
.m-pli.ouvert .m-pli-contenu { opacity: 1; transform: none; }

/* — Panneau HORIZONTAL (gauche→droite) — */
.m-pli-h {
  display: inline-flex; align-items: stretch; vertical-align: top;
  border: 1px solid var(--m-bordure); border-radius: var(--m-rayon);
  background: var(--m-blanc); overflow: hidden; min-height: 130px;
  max-width: 100%;
}
.m-pli-h-tete {
  flex: 0 0 auto; width: 52px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  background: var(--m-gris-50); border: none; cursor: pointer;
  color: var(--m-noir); font-family: var(--m-police); font-size: 13px; font-weight: 500;
  transition: background .2s var(--m-doux);
}
.m-pli-h-tete:hover { background: var(--m-gris-100); }
.m-pli-h-tete:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--m-accent); }
.m-pli-h-tete .m-pli-label { writing-mode: vertical-rl; letter-spacing: .5px; color: var(--m-gris-500); }
.m-pli-h-chevron { font-size: 13px; color: var(--m-gris-500); transition: transform .3s var(--m-doux), color .2s var(--m-doux); }
.m-pli-h.ouvert .m-pli-h-chevron { color: var(--m-accent); }

.m-pli-h-corps {
  display: grid; grid-template-columns: 0fr;
  transition: grid-template-columns .32s var(--m-doux);
}
.m-pli-h.ouvert .m-pli-h-corps { grid-template-columns: 1fr; }
.m-pli-h-clip { overflow: hidden; min-width: 0; }
.m-pli-h-contenu {
  width: min(260px, 64vw); padding: 16px 20px; text-align: left;
  font-size: 13px; color: var(--m-gris-700); line-height: 1.6;
  opacity: 0; transition: opacity .28s var(--m-doux) .05s;
}
.m-pli-h.ouvert .m-pli-h-contenu { opacity: 1; }
.m-pli-h-contenu h4 { font-size: 14px; font-weight: 700; color: var(--m-noir); margin-bottom: 6px; }

/* Sens gauche→droite : la tête est à gauche, le chevron pointe à droite (et tourne à l'ouverture) */
.m-pli-h.vers-droite .m-pli-h-tete { border-right: 1px solid var(--m-bordure); }
.m-pli-h.vers-droite .m-pli-h-chevron { transform: rotate(0deg); }
.m-pli-h.vers-droite.ouvert .m-pli-h-chevron { transform: rotate(180deg); }

/* ─────────── ZONE DE DÉPÔT (drag & drop fichiers) ─────────── */
.m-dropzone {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; padding: 32px 24px; text-align: center;
  border: 2px dashed var(--m-gris-300); border-radius: var(--m-rayon-lg);
  background: var(--m-gris-50); color: var(--m-gris-500); cursor: pointer;
  transition: border-color .25s var(--m-doux), background .25s var(--m-doux),
              transform .25s var(--m-ressort), color .25s var(--m-doux);
}
.m-dropzone:hover { border-color: var(--m-bordure-champ-survol); background: var(--m-gris-100); }
.m-dropzone:focus-visible { outline: none; border-color: var(--m-accent); box-shadow: 0 0 0 4px var(--m-accent-light); }
.m-dropzone.survol {
  border-color: var(--m-accent); background: var(--m-accent-light);
  color: var(--m-sur-accent-light); transform: scale(1.01);
}
.m-dropzone-icone {
  width: 52px; height: 52px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--m-blanc); color: var(--m-gris-400); font-size: 20px;
  box-shadow: 0 2px 6px var(--m-carte-ombre-1), 0 1px 2px var(--m-carte-ombre-2);
  transition: transform .35s var(--m-ressort), color .25s var(--m-doux);
}
.m-dropzone.survol .m-dropzone-icone { transform: translateY(-4px) scale(1.08); color: var(--m-accent); }
.m-dropzone-titre { font-size: 14px; font-weight: 500; color: var(--m-noir); }
.m-dropzone.survol .m-dropzone-titre { color: var(--m-sur-accent-light); }
.m-dropzone-sous { font-size: 12px; }
.m-dropzone-sous strong { color: var(--m-accent); }

.m-fichiers { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.m-fichier {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px; border: 1px solid var(--m-bordure); border-radius: var(--m-rayon);
  background: var(--m-blanc); font-size: 13px;
  animation: glisse .35s var(--m-doux) backwards;
}
.m-fichier-icone { color: var(--m-accent); font-size: 14px; flex-shrink: 0; }
.m-fichier-nom { flex: 1; min-width: 0; color: var(--m-noir); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.m-fichier-taille { font-size: 12px; color: var(--m-gris-500); font-variant-numeric: tabular-nums; flex-shrink: 0; }
.m-fichier-suppr {
  flex-shrink: 0; background: none; border: none; cursor: pointer; color: var(--m-gris-500);
  width: 22px; height: 22px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center; font-size: 11px;
  transition: color .2s var(--m-doux), background .2s var(--m-doux), transform .25s var(--m-ressort);
}
.m-fichier-suppr:hover { color: var(--m-erreur); background: var(--m-erreur-light); transform: rotate(90deg); }

/* ─────────── CARTES À ORDONNER (drag & drop, animation FLIP) ─────────── */
.m-tri-liste { display: flex; flex-direction: column; gap: 10px; }
.m-tri-carte {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px; border: 1px solid var(--m-bordure); border-radius: var(--m-rayon);
  background: var(--m-blanc); box-shadow: 0 1px 0 var(--m-carte-ombre-1);
  transition: border-color .2s var(--m-doux), box-shadow .25s var(--m-doux);
}
.m-tri-carte:hover { border-color: var(--m-gris-300); }
.m-tri-poignee {
  cursor: grab; color: var(--m-gris-400); font-size: 14px;
  padding: 4px 6px; border-radius: 4px; flex-shrink: 0;
  touch-action: none;                              /* tactile : la poignée déclenche le glisser, pas le défilement de page */
  transition: color .2s var(--m-doux), background .2s var(--m-doux);
}
.m-tri-poignee:hover { color: var(--m-noir); background: var(--m-gris-100); }
.m-tri-liste.tri-en-cours { user-select: none; }  /* pas de sélection de texte pendant un glisser souris */
.m-tri-carte.glisse {
  border-style: dashed; border-color: var(--m-accent);
  box-shadow: 0 14px 28px -12px var(--m-carte-ombre-2);
  position: relative; z-index: 10;                 /* la carte saisie flotte au-dessus des autres */
  cursor: grabbing;
}
.m-tri-carte.glisse .m-tri-poignee { cursor: grabbing; }
.m-tri-num {
  width: 26px; height: 26px; flex-shrink: 0; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--m-accent-light); color: var(--m-sur-accent-light);
  font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums;
}
.m-tri-info { flex: 1; min-width: 0; }
.m-tri-titre { font-size: 14px; font-weight: 500; }
.m-tri-desc { font-size: 12px; color: var(--m-gris-500); }

/* ─────────── TABLE PRO : barre, sélection, détail, colonnes, période ─────────── */
.m-pro-barre { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.m-pro-barre .pousse { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }

/* Barre d'actions groupées (apparaît quand des lignes sont sélectionnées) */
.m-actions-groupe { display: none; align-items: center; gap: 12px; padding: 10px 14px; margin-bottom: 12px; background: var(--m-noir); color: var(--m-blanc); border-radius: var(--m-rayon); }
.m-actions-groupe.visible { display: flex; animation: glisseHaut .2s var(--m-doux); }
.m-actions-groupe .compte { font-weight: 700; font-variant-numeric: tabular-nums; }
.m-actions-groupe .pousse { margin-left: auto; display: flex; gap: 6px; align-items: center; }
.m-actions-groupe .m-btn-ghost { color: var(--m-blanc); }
.m-actions-groupe .m-btn-ghost:hover { background: rgba(255,255,255,.14); color: var(--m-blanc); }

/* Case à cocher compacte (sélection de ligne) */
.m-case { width: 16px; height: 16px; cursor: pointer; accent-color: var(--m-accent); vertical-align: middle; }
.m-tableau tbody tr.selectionnee { background: var(--m-accent-light); box-shadow: inset 3px 0 0 var(--m-accent); }
/* Pas d'apparition échelonnée sur la table pro (les lignes de détail fausseraient le compte nth-child) */
#table-pro tbody tr { opacity: 1; animation: none; }

/* Ligne extensible (détail) */
.m-detail-bouton { background: none; border: none; cursor: pointer; color: var(--m-gris-500); width: 24px; height: 24px; border-radius: 4px; display: inline-flex; align-items: center; justify-content: center; transition: background .15s var(--m-doux), color .15s var(--m-doux), transform .25s var(--m-doux); }
.m-detail-bouton:hover { background: var(--m-gris-100); color: var(--m-noir); }
.m-tableau tbody tr.ouvert .m-detail-bouton { transform: rotate(90deg); color: var(--m-accent); }
.m-detail-ligne > td { padding: 0; border-bottom: 1px solid var(--m-gris-100); }
.m-detail-ligne > td::before { display: none !important; }
.m-detail-grille { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .3s var(--m-doux); background: var(--m-gris-50); }
.m-detail-ligne.ouvert .m-detail-grille { grid-template-rows: 1fr; }
.m-detail-clip { overflow: hidden; min-height: 0; }
.m-detail-contenu { padding: 14px 18px; font-size: 13px; color: var(--m-gris-700); line-height: 1.6; }

/* Popover générique (colonnes, période) — reste ouvert au clic interne */
.m-pop-ancre { position: relative; display: inline-flex; }
.m-pop { position: absolute; top: calc(100% + 6px); right: 0; z-index: 300; background: var(--m-blanc); border: 1px solid var(--m-bordure-forte); border-radius: var(--m-rayon); box-shadow: var(--m-ombre-flottant); padding: 12px; min-width: 220px; opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .18s var(--m-doux), transform .2s var(--m-doux), visibility .18s var(--m-doux); }
.m-pop-ancre.ouvert .m-pop { opacity: 1; visibility: visible; transform: none; }
.m-pop-titre { font-size: 11px; text-transform: uppercase; letter-spacing: 1px; color: var(--m-gris-500); margin-bottom: 8px; }
.m-pop-check { display: flex; align-items: center; gap: 9px; padding: 6px 4px; font-size: 14px; cursor: pointer; border-radius: var(--m-rayon-sm); }
.m-pop-check:hover { background: var(--m-gris-100); }
.m-pop-check input { accent-color: var(--m-accent); cursor: pointer; }

/* Sélecteur de période */
.m-periode-presets { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.m-periode-preset { padding: 4px 10px; border: 1px solid var(--m-bordure-champ); border-radius: var(--m-rayon-pill); background: var(--m-gris-50); color: var(--m-gris-700); font-size: 12px; cursor: pointer; font-family: var(--m-police); transition: background .15s var(--m-doux), border-color .15s var(--m-doux), color .15s var(--m-doux); }
.m-periode-preset:hover { border-color: var(--m-accent); color: var(--m-sur-accent-light); background: var(--m-accent-light); }
.m-periode-champs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 12px; }
.m-periode-champs label { font-size: 11px; color: var(--m-gris-500); display: block; margin-bottom: 4px; }
.m-periode-champs input { width: 100%; padding: 7px 9px; border: 1px solid var(--m-bordure-champ); border-radius: var(--m-rayon-sm); font-family: var(--m-police); font-size: 13px; background: var(--m-blanc); color: var(--m-noir); outline: none; transition: border-color .2s var(--m-doux), box-shadow .2s var(--m-doux); }
.m-periode-champs input:focus { border-color: var(--m-accent); box-shadow: 0 0 0 3px var(--m-accent-light); }

/* ─────────── ÉTAT VIDE ─────────── */
.m-vide {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; gap: 12px; padding: 48px 24px;
  border: 1px solid var(--m-bordure); border-radius: var(--m-rayon); background: var(--m-blanc);
}
.m-vide-icone {
  width: 64px; height: 64px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--m-gris-100); color: var(--m-gris-400); font-size: 26px;
}
.m-vide-titre { font-size: 16px; font-weight: 700; }
.m-vide-texte { font-size: 14px; color: var(--m-gris-500); max-width: 360px; line-height: 1.6; }
.m-vide-actions { display: flex; gap: 8px; margin-top: 4px; flex-wrap: wrap; justify-content: center; }

/* ─────────── SQUELETTES DE CHARGEMENT ─────────── */
.m-skel { position: relative; overflow: hidden; background: var(--m-gris-100); border-radius: var(--m-rayon-sm); }
.m-skel::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, var(--m-gris-200), transparent);
  transform: translateX(-100%); animation: shimmer 1.4s infinite;
}
.m-skel-ligne { height: 12px; }
.m-skel-titre { height: 16px; }
.m-skel-cercle { border-radius: 50%; }
/* Bascule squelette ↔ contenu réel (démo) */
.m-charge-demo .m-charge-reel { display: none; }
.m-charge-demo.pret .m-charge-squelette { display: none; }
.m-charge-demo.pret .m-charge-reel { display: block; animation: apparait .4s var(--m-doux); }

/* ─────────── BANDEAUX (hors-ligne / erreur) ─────────── */
.m-bandeau {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 18px; border-radius: var(--m-rayon); font-size: 14px;
  border: 1px solid; animation: glisseHaut .4s var(--m-doux);
}
.m-bandeau .icone { font-size: 16px; flex-shrink: 0; }
.m-bandeau-texte { flex: 1; }
.m-bandeau-texte strong { font-weight: 700; }
.m-bandeau-hors-ligne { background: var(--m-attention-light); border-color: var(--m-attention); color: var(--m-attention-encre); }
.m-bandeau-erreur { background: var(--m-erreur-light); border-color: var(--m-erreur); color: var(--m-erreur-encre); }

/* ─────────── INDICATEUR DE SAUVEGARDE AUTO ─────────── */
.m-sauvegarde {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 13px; color: var(--m-gris-500);
  transition: color .2s var(--m-doux);
}
.m-sauvegarde i { font-size: 12px; }
.m-sauvegarde.encours { color: var(--m-info); }
.m-sauvegarde.enregistre { color: var(--m-succes); }
.m-sauvegarde .spin { animation: tournoie .8s linear infinite; }

/* ─────────── MODALES & TIROIR (overlay partagé) ─────────── */
.m-overlay {
  position: fixed; inset: 0; z-index: 900;
  display: flex; align-items: center; justify-content: center; padding: 24px;
  background: rgba(0,0,0,.45); backdrop-filter: blur(2px);
  opacity: 0; visibility: hidden;
  transition: opacity .25s var(--m-doux), visibility .25s var(--m-doux);
}
.m-overlay.ouvert { opacity: 1; visibility: visible; }

.m-modale {
  width: 100%; max-width: 460px; max-height: calc(100vh - 48px);
  display: flex; flex-direction: column;
  background: var(--m-blanc); border: 1px solid var(--m-bordure-forte);
  border-radius: var(--m-rayon-lg); box-shadow: var(--m-ombre-modale);
  transform: translateY(12px) scale(.97); opacity: 0;
  transition: transform .3s var(--m-ressort), opacity .25s var(--m-doux);
}
.m-overlay.ouvert .m-modale { transform: none; opacity: 1; }
.m-modale-tete { display: flex; align-items: flex-start; gap: 14px; padding: 20px 20px 0; }
.m-modale-icone {
  width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; font-size: 16px;
  background: var(--m-accent-light); color: var(--m-sur-accent-light);
}
.m-modale-icone.danger { background: var(--m-erreur-light); color: var(--m-erreur-encre); }
.m-modale-icone.succes { background: var(--m-succes-light); color: var(--m-succes-encre); }
/* Même règle que .m-pastille-icone : en ardoise et en sombre, le fond sourd ne se
   détache plus de la fenêtre (1,1 puis 1,0 : 1) ; le liseré currentColor lui rend
   sa forme. Jamais en clair. */
body.theme-ardoise .m-modale-icone,
body.theme-sombre  .m-modale-icone { box-shadow: inset 0 0 0 1px currentColor; }
/* Au moins la hauteur de la pastille, contenu centré dedans : un titre sans
   sous-titre restait collé en haut, à côté d'une pastille de 40 px. Avec un
   sous-titre, le bloc dépasse 40 px et rien ne bouge. */
.m-modale-titre-bloc { flex: 1; min-width: 0; min-height: 40px; display: flex; flex-direction: column; justify-content: center; }
.m-modale-titre { font-size: 16px; font-weight: 700; }
.m-modale-sous { font-size: 13px; color: var(--m-gris-500); margin-top: 2px; }
/* Un sous-titre que le script remplit plus tard : vide, sa marge décalait le titre. */
.m-modale-sous:empty { display: none; }
.m-modale-fermer {
  background: none; border: none; cursor: pointer; color: var(--m-gris-500);
  width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center; font-size: 14px;
  transition: background .2s var(--m-doux), color .2s var(--m-doux), transform .25s var(--m-ressort);
}
/* Dans une tête de modale seulement : son centre sur celui de la pastille de
   40 px. Le tiroir, sans pastille, centre le sien par align-items. */
.m-modale-tete .m-modale-fermer { margin-top: 5px; }
.m-modale-fermer:hover { background: var(--m-gris-100); color: var(--m-noir); transform: rotate(90deg); }
.m-modale-fermer:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--m-blanc), 0 0 0 4px var(--m-accent); }
.m-modale-corps { padding: 16px 20px; overflow-y: auto; font-size: 14px; color: var(--m-gris-700); line-height: 1.6; }
.m-modale-pied { display: flex; justify-content: flex-end; gap: 8px; padding: 14px 20px; border-top: 1px solid var(--m-bordure); }

/* Tiroir latéral : même overlay, panneau collé à droite */
.m-overlay-tiroir { align-items: stretch; justify-content: flex-end; padding: 0; }
.m-tiroir {
  width: 100%; max-width: 400px; height: 100%;
  display: flex; flex-direction: column;
  background: var(--m-blanc); border-left: 1px solid var(--m-bordure);
  box-shadow: -20px 0 50px -20px var(--m-carte-ombre-2);
  transform: translateX(100%); transition: transform .32s var(--m-doux);
}
.m-overlay.ouvert .m-tiroir { transform: none; }
.m-tiroir-tete { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 20px; border-bottom: 1px solid var(--m-bordure); }
.m-tiroir-titre { font-size: 16px; font-weight: 700; }
.m-tiroir-corps { flex: 1; overflow-y: auto; padding: 20px; }
.m-tiroir-pied { padding: 14px 20px; border-top: 1px solid var(--m-bordure); display: flex; gap: 8px; }

/* ─────────── INFOBULLES (tooltips, CSS pur) ─────────── */
[data-infobulle] { position: relative; }
[data-infobulle]::after {
  content: attr(data-infobulle);
  position: absolute; bottom: calc(100% + 8px); left: 50%;
  transform: translateX(-50%) translateY(4px);
  padding: 5px 9px; border-radius: var(--m-rayon-sm);
  background: var(--m-noir); color: var(--m-fond);
  font-size: 12px; font-weight: 500; white-space: nowrap; line-height: 1.3;
  box-shadow: 0 4px 12px rgba(0,0,0,.25);
  opacity: 0; pointer-events: none; z-index: 400;
  transition: opacity .18s var(--m-doux), transform .18s var(--m-doux);
}
[data-infobulle]::before {
  content: ""; position: absolute; bottom: calc(100% + 3px); left: 50%;
  transform: translateX(-50%); border: 5px solid transparent; border-top-color: var(--m-noir);
  opacity: 0; pointer-events: none; z-index: 400; transition: opacity .18s var(--m-doux);
}
[data-infobulle]:hover::after, [data-infobulle]:focus-visible::after { opacity: 1; transform: translateX(-50%); }
[data-infobulle]:hover::before, [data-infobulle]:focus-visible::before { opacity: 1; }

/* ─────────── AIDE D'UN CHAMP : le « i » et sa bulle ─────────── */
/* Ce que l'infobulle ci-dessus ne sait pas faire : une PHRASE. Elle est en
   « nowrap », donc sur une seule ligne, et en position absolue — dans une
   modale ou un tiroir, tous deux en « overflow-y: auto », elle se ferait
   couper net par le bord, et le premier champ n'afficherait rien du tout.
   D'où une bulle en position FIXE, que le script place sous son bouton.
   Elle ne reprend pas non plus le fond noir : sur une phrase de trois lignes
   l'aplat sombre alourdit la page. C'est une surface, comme un menu. */

.m-label-aide { display: inline-flex; align-items: center; gap: 5px; }

.m-aide {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; padding: 0; flex: none;
  border: none; background: none; cursor: help;
  color: var(--m-gris-400); font-size: 12px; line-height: 1;
  border-radius: 50%; outline: none;
  transition: color .2s var(--m-doux), box-shadow .2s var(--m-doux);
}
.m-aide:hover, .m-aide[aria-expanded="true"] { color: var(--m-accent); }
.m-aide:focus-visible { color: var(--m-accent); box-shadow: 0 0 0 3px var(--m-accent-light); }

/* Dans un titre, le « i » n'est pas un mot : il ne doit pas décaler la ligne
   de base du texte qu'il suit. */
h2 > .m-aide, h3 > .m-aide { margin-left: 6px; vertical-align: middle; }

.m-aide-bulle {
  position: fixed; top: 0; left: 0;
  max-width: 280px; padding: 9px 12px;
  background: var(--m-blanc); color: var(--m-gris-700);
  border: 1px solid var(--m-bordure-forte); border-radius: var(--m-rayon);
  box-shadow: var(--m-ombre-flottant);
  font-size: 12px; font-weight: 400; line-height: 1.45; text-align: left;
  white-space: normal; text-wrap: pretty;
  opacity: 0; visibility: hidden; pointer-events: none; z-index: 400;
  transition: opacity .18s var(--m-doux), visibility .18s var(--m-doux);
}
.m-aide[aria-expanded="true"] .m-aide-bulle { opacity: 1; visibility: visible; }

/* ─────────── MENU CONTEXTUEL / MENU D'ACTIONS ─────────── */
.m-menu { position: relative; display: inline-flex; }
.m-menu-liste {
  position: absolute; top: calc(100% + 6px); right: 0; min-width: 200px;
  background: var(--m-blanc); border: 1px solid var(--m-bordure-forte);
  border-radius: var(--m-rayon); box-shadow: var(--m-ombre-flottant);
  padding: 6px; z-index: 300;
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .18s var(--m-doux), transform .2s var(--m-doux), visibility .18s var(--m-doux);
}
.m-menu.ouvert .m-menu-liste { opacity: 1; visibility: visible; transform: none; }
.m-menu-item {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 8px 10px; border: none; background: none; cursor: pointer;
  font-family: var(--m-police); font-size: 14px; color: var(--m-noir); text-align: left;
  border-radius: var(--m-rayon-sm);
  transition: background .15s var(--m-doux), color .15s var(--m-doux);
}
.m-menu-item i { width: 16px; text-align: center; color: var(--m-gris-500); font-size: 13px; }
.m-menu-item:hover { background: var(--m-gris-100); }
.m-menu-item.danger, .m-menu-item.danger i { color: var(--m-erreur); }
.m-menu-item.danger:hover { background: var(--m-erreur-light); }
.m-menu-sep { height: 1px; background: var(--m-gris-200); margin: 6px 4px; }
.m-menu-label { font-size: 11px; text-transform: uppercase; letter-spacing: 1px; color: var(--m-gris-500); padding: 6px 10px 2px; }

/* ─────────── TOUCHE CLAVIER (kbd réutilisable) ─────────── */
.m-touche { display: inline-block; font-family: var(--m-police); font-size: 11px; color: var(--m-gris-700); background: var(--m-gris-100); border: 1px solid var(--m-bordure-champ); border-bottom-width: 2px; border-radius: 4px; padding: 1px 6px; line-height: 1.2; }

/* ─────────── FIL D'ARIANE ─────────── */
.m-fil { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; font-size: 13px; }
.m-fil a { color: var(--m-gris-500); text-decoration: none; padding: 3px 6px; border-radius: var(--m-rayon-sm); transition: background .15s var(--m-doux), color .15s var(--m-doux); }
.m-fil a:hover { color: var(--m-noir); background: var(--m-gris-100); }
.m-fil .sep { color: var(--m-gris-400); font-size: 10px; }
.m-fil .actuel { color: var(--m-noir); font-weight: 500; padding: 3px 6px; }

/* ─────────── ASSISTANT MULTI-ÉTAPES (stepper) ─────────── */
.m-stepper { display: flex; align-items: flex-start; }
.m-step { flex: 1; display: flex; flex-direction: column; align-items: center; text-align: center; position: relative; }
.m-step:not(:last-child)::after { content: ""; position: absolute; top: 16px; left: 50%; width: 100%; height: 2px; background: var(--m-gris-200); z-index: 0; transition: background .3s var(--m-doux); }
.m-step.fait:not(:last-child)::after { background: var(--m-succes); }
/* line-height:1 + 1px de padding haut : les chiffres de Source Sans 3 ont plus
   de talon sous la ligne de base que d'espace au-dessus, ils tombaient 1,2 px
   trop haut dans la bulle. La coche des étapes faites reste centrée. */
.m-step-puce { width: 34px; height: 34px; border-radius: 50%; z-index: 1; display: flex; align-items: center; justify-content: center; line-height: 1; padding-top: 1px; background: var(--m-blanc); border: 2px solid var(--m-gris-300); color: var(--m-gris-500); font-weight: 700; font-size: 13px; transition: border-color .25s var(--m-doux), color .25s var(--m-doux), background .25s var(--m-doux), box-shadow .25s var(--m-doux); }
.m-step.actif .m-step-puce { border-color: var(--m-accent); color: var(--m-accent); box-shadow: 0 0 0 4px var(--m-accent-light); }
.m-step.fait .m-step-puce { background: var(--m-succes); border-color: var(--m-succes); color: var(--m-sur-couleur); }
.m-step-label { font-size: 12px; margin-top: 8px; color: var(--m-gris-500); }
.m-step.actif .m-step-label, .m-step.fait .m-step-label { color: var(--m-noir); }
.m-step.actif .m-step-label { font-weight: 500; }
.m-step-vue { display: none; font-size: 13px; color: var(--m-gris-700); line-height: 1.6; }
.m-step-vue.actif { display: block; animation: apparait .3s var(--m-doux); }
.m-step-vue strong { color: var(--m-noir); }

/* ─────────── PALETTE DE COMMANDES (⌘K) ─────────── */
.m-overlay-palette { align-items: flex-start; justify-content: center; padding-top: 12vh; }
.m-palette { width: 100%; max-width: 560px; background: var(--m-blanc); border: 1px solid var(--m-bordure-forte); border-radius: var(--m-rayon-lg); box-shadow: var(--m-ombre-modale); overflow: hidden; transform: translateY(-10px) scale(.98); opacity: 0; transition: transform .25s var(--m-ressort), opacity .2s var(--m-doux); }
.m-overlay.ouvert .m-palette { transform: none; opacity: 1; }
.m-palette-recherche { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--m-bordure); }
.m-palette-recherche i { color: var(--m-gris-500); }
.m-palette-recherche input { flex: 1; border: none; outline: none; background: none; font-family: var(--m-police); font-size: 15px; color: var(--m-noir); }
.m-palette-liste { max-height: 320px; overflow-y: auto; padding: 6px; }
.m-palette-groupe-titre { font-size: 11px; text-transform: uppercase; letter-spacing: 1px; color: var(--m-gris-500); padding: 8px 10px 4px; }
.m-palette-item { display: flex; align-items: center; gap: 12px; padding: 9px 10px; border-radius: var(--m-rayon-sm); cursor: pointer; font-size: 14px; color: var(--m-noir); }
.m-palette-item i { width: 18px; text-align: center; color: var(--m-gris-500); }
.m-palette-item .raccourci { margin-left: auto; }
.m-palette-item.actif, .m-palette-item:hover { background: var(--m-accent-light); color: var(--m-sur-accent-light); }
.m-palette-item.actif i, .m-palette-item:hover i { color: var(--m-sur-accent-light); }
.m-palette-vide { padding: 20px; text-align: center; color: var(--m-gris-400); font-size: 13px; font-style: italic; }

/* ─────────── SIDEBAR RÉTRACTABLE ─────────── */
.m-sidebar-demo { display: flex; border: 1px solid var(--m-bordure); border-radius: var(--m-rayon); overflow: hidden; min-height: 240px; background: var(--m-blanc); }
.m-sidebar { width: 220px; flex-shrink: 0; background: var(--m-gris-50); border-right: 1px solid var(--m-bordure); display: flex; flex-direction: column; padding: 10px; gap: 2px; transition: width .28s var(--m-doux); }
.m-sidebar.replie { width: 62px; }
.m-sidebar-lien { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: var(--m-rayon); color: var(--m-gris-700); text-decoration: none; font-size: 14px; white-space: nowrap; cursor: pointer; transition: background .15s var(--m-doux), color .15s var(--m-doux); }
.m-sidebar-lien i { width: 18px; text-align: center; flex-shrink: 0; font-size: 15px; }
.m-sidebar-lien .libelle { transition: opacity .2s var(--m-doux); }
.m-sidebar.replie .libelle { opacity: 0; pointer-events: none; }
.m-sidebar-lien:hover { background: var(--m-gris-100); color: var(--m-noir); }
.m-sidebar-lien.actif {
  background: var(--m-accent-light); color: var(--m-sur-accent-light); font-weight: 500;
  box-shadow: inset 2px 0 0 var(--m-accent);
}
.m-sidebar-bascule { margin-bottom: 6px; color: var(--m-gris-500); }
.m-sidebar-contenu { flex: 1; padding: 20px; min-width: 0; }

/* ─────────── REDUCED MOTION ─────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ─────────── RESPONSIVE ─────────── */
@media (max-width: 768px) {
  .m-contenu { padding: 24px 16px; }
  .m-stats { grid-template-columns: repeat(2, 1fr); }
  .m-stat { padding: 16px; }                  /* moins de marge interne → plus de place pour la valeur et l'icône */
  .m-stat-label { padding-right: 44px; }      /* juste assez pour dégager l'icône (la sparkline est masquée en mobile) */
  .m-form-grille { grid-template-columns: 1fr; }
  .m-grille-cartes { grid-template-columns: 1fr; }
  .m-tableau-wrap { overflow-x: auto; }
  .m-entete { padding: 0 16px; }
  .m-stat-spark { display: none; }
  .m-toasts { right: 12px; left: 12px; top: calc(56px + 12px); }
  .m-toast { min-width: 0; max-width: none; }
  .m-entete-droite { gap: 10px; }
  .m-user span { display: none; }             /* on garde l'avatar HW, on masque « H. Witkowski » qui débordait sur 2 lignes */
  .m-entete-modules { padding: 0; width: 38px; }
  .m-entete-modules span { display: none; }   /* l'icône seule, comme le burger : le libellé reste dans title + aria */

  /* Burger + nav repliée en panneau déroulant */
  .m-burger { display: inline-flex; }
  .m-nav {
    position: absolute; top: 56px; left: 0; right: 0;
    flex-direction: column; gap: 2px; display: none;
    background: var(--m-entete-bg);
    backdrop-filter: saturate(180%) blur(10px);
    border-bottom: 1px solid var(--m-entete-bordure);
    padding: 8px 16px;
    box-shadow: 0 12px 24px -12px var(--m-carte-ombre-2);   /* détache le panneau du contenu dessous */
  }
  /* opacity:1 + forwards : sinon .apparait (opacity:0) reprend le dessus à la fin de l'anim et le menu se referme tout seul */
  .m-nav.ouvert { display: flex; opacity: 1; animation: glisseHaut .2s var(--m-doux) forwards; }
  .m-nav a { padding: 12px 14px; }
  .m-nav a.actif {
    border-radius: 0 var(--m-rayon) var(--m-rayon) 0;
  }
  /* La nav est en colonne : la barre se redresse à gauche de l'élément actif */
  .m-nav a.actif::after {
    left: 0; right: auto; top: 0; bottom: 0; width: 2px; height: auto;
  }
}

/* Smartphone étroit : une seule colonne de KPI, plus lisible que 2 colonnes serrées */
@media (max-width: 480px) {
  .m-stats { grid-template-columns: 1fr; }
}