/* ═══════════════════════════════════════════════════════════════════════════
 * composants.css — L'apparence des composants MFUI (lot REFONTE-0).
 *
 * ⚠️ AUCUNE COULEUR ÉCRITE ICI : uniquement les variables de theme.css
 * (test_socle_visuel.py le vérifie). Ombres : seulement fenêtre, tiroir, bulle
 * et messages — les éléments qui flottent. Pas de dégradé.
 *
 * Trois tailles (conception §5) :
 *   ≥ 1200 px     menu fixe de 220 px ;
 *   768–1199 px   menu réduit aux icônes, libellé au survol et au clavier ;
 *   < 768 px      menu en tiroir, barre haute compacte.
 * ═══════════════════════════════════════════════════════════════════════════ */

/* ── Icônes et logo ────────────────────────────────────────────────────── */
.mf-icone {
  width: 18px; height: 18px;
  flex: none;
  display: inline-block;
  vertical-align: middle;
}
.mf-logo { display: inline-flex; align-items: center; gap: 9px; color: var(--mf-marque); }
.mf-logo-image { width: 24px; height: 24px; flex: none; }
.mf-logo-nom {
  color: var(--mf-texte);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

/* ══════════════════════════════════════════════════════════════════════════
 * La coquille
 * ══════════════════════════════════════════════════════════════════════════ */
.mf-app {
  display: grid;
  grid-template-columns: var(--mf-menu-large) minmax(0, 1fr);
  min-height: 100vh;
  background: var(--mf-fond);
}

.mf-evitement {
  position: absolute;
  left: var(--mf-e-2); top: -48px;
  z-index: 60;
  padding: var(--mf-e-2) var(--mf-e-3);
  background: var(--mf-surface);
  border: 1px solid var(--mf-bordure);
  border-radius: var(--mf-rayon-controle);
}
.mf-evitement:focus-visible { top: var(--mf-e-2); }

/* ── Menu latéral ──────────────────────────────────────────────────────── */
.mf-menu {
  position: sticky; top: 0;
  height: 100vh;
  display: flex; flex-direction: column;
  gap: var(--mf-e-4);
  padding: var(--mf-e-4) var(--mf-e-3);
  background: var(--mf-fond);
  color: var(--mf-texte-2);
  font-size: var(--mf-t-13);
  overflow-y: auto;
}
.mf-menu-haut {
  display: flex; align-items: center; justify-content: space-between;
  min-height: 32px;
  padding: 0 var(--mf-e-1);
}
.mf-menu-haut .mf-bouton { display: none; }
.mf-menu-marque { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mf-menu-espace { padding-left: 33px; color: var(--mf-texte-discret); font-size: var(--mf-t-12); }

.mf-selecteur {
  display: flex; align-items: center; gap: var(--mf-e-2);
  width: 100%;
  padding: 7px 10px;
  background: var(--mf-surface);
  border: 1px solid var(--mf-bordure);
  border-radius: 7px;
  text-align: left;
}
.mf-selecteur:hover { border-color: var(--mf-bordure-champ); }
.mf-selecteur-icone { display: none; }
.mf-selecteur-textes { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.mf-selecteur-etiquette {
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--mf-texte-discret);
}
.mf-selecteur-valeur {
  color: var(--mf-texte);
  font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mf-selecteur-chevron { color: var(--mf-texte-discret); width: 16px; height: 16px; }

.mf-menu-liens { display: flex; flex-direction: column; gap: var(--mf-e-3); flex: 1; }
.mf-menu-titre {
  padding: 0 10px var(--mf-e-1);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--mf-texte-discret);
}
.mf-menu-groupe ul { display: flex; flex-direction: column; gap: 2px; }

.mf-lien {
  position: relative;
  display: flex; align-items: center; gap: 10px;
  min-height: 32px;
  padding: 6px 10px;
  border-radius: var(--mf-rayon-controle);
  color: var(--mf-texte-2);
}
.mf-lien:hover { background: var(--mf-survol); color: var(--mf-texte); text-decoration: none; }
.mf-lien[aria-current="page"] {
  background: var(--mf-marque-lavis);
  color: var(--mf-marque-appuyee);
  font-weight: 600;
}
.mf-lien-texte { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.mf-pastille {
  min-width: 20px;
  padding: 0 7px;
  border-radius: 10px;
  background: var(--mf-panne-lavis);
  color: var(--mf-panne-texte);
  font-size: 11px;
  font-weight: 600;
  line-height: 18px;
  text-align: center;
}
.mf-pastille--neutre { background: var(--mf-surface-2); color: var(--mf-texte-2); }

.mf-compte {
  display: flex; align-items: center; gap: var(--mf-e-2);
  padding: var(--mf-e-3) var(--mf-e-1) 0;
  border-top: 1px solid var(--mf-bordure);
}
.mf-compte-icone { color: var(--mf-texte-discret); }
.mf-compte-textes { flex: 1; min-width: 0; }
.mf-compte-nom, .mf-compte-detail { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mf-compte-nom { color: var(--mf-texte); font-weight: 600; }
.mf-compte-detail { color: var(--mf-texte-discret); font-size: var(--mf-t-12); }

.mf-voile { display: none; }

/* ── Zone principale, barre haute ──────────────────────────────────────── */
.mf-principal {
  min-width: 0;
  display: flex; flex-direction: column;
  background: var(--mf-surface);
  border-left: 1px solid var(--mf-bordure);
}
.mf-haut {
  display: flex; align-items: center; gap: var(--mf-e-3);
  min-height: 56px;
  padding: var(--mf-e-3) var(--mf-e-6);
}
.mf-haut .mf-bouton-menu, .mf-haut-logo { display: none; }
.mf-haut-infos { flex: 1; min-width: 0; display: flex; align-items: center; gap: var(--mf-e-3); }
.mf-haut-theme { flex: none; }
.mf-fil { flex: 1; min-width: 0; color: var(--mf-texte-discret); font-size: var(--mf-t-12); }
.mf-fil ol { display: flex; flex-wrap: wrap; gap: 0 var(--mf-e-2); }
.mf-fil li { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.mf-fil li + li::before { content: "/"; margin-right: var(--mf-e-2); color: var(--mf-texte-discret); }
.mf-fil li[aria-current="page"] { color: var(--mf-texte-2); }
.mf-haut-droite { display: flex; align-items: center; gap: var(--mf-e-2); flex: none; }

.mf-fraicheur {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--mf-texte-2);
  font-size: var(--mf-t-12);
  white-space: nowrap;
}
.mf-fraicheur .mf-point { background: var(--mf-arretee-point); }
.mf-fraicheur--fraiche .mf-point { background: var(--mf-marche-point); }
.mf-fraicheur--ancienne .mf-point { background: var(--mf-veille-point); }

.mf-contenu {
  flex: 1;
  width: 100%;
  max-width: 1280px;
  padding: var(--mf-e-2) var(--mf-e-6) var(--mf-e-8);
}
.mf-contenu:focus { outline: none; }

/* ── 768 – 1199 px : le menu se réduit aux icônes ──────────────────────── */
@media (max-width: 1199.98px) and (min-width: 768px) {
  .mf-app { grid-template-columns: var(--mf-menu-etroit) minmax(0, 1fr); }
  .mf-menu { padding: var(--mf-e-4) var(--mf-e-2); align-items: center; overflow: visible; }
  .mf-menu-haut { padding: 0; }
  .mf-logo-nom { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .mf-menu-espace { display: none; }
  .mf-selecteur { justify-content: center; padding: 8px; width: 40px; }
  .mf-selecteur-icone { display: inline-block; }
  .mf-selecteur-textes, .mf-selecteur-chevron { display: none; }
  .mf-menu-titre { height: 1px; padding: 0; margin: var(--mf-e-1) 6px; overflow: hidden; color: transparent;
    background: var(--mf-bordure); }
  .mf-lien { justify-content: center; width: 40px; padding: 10px; }
  /* Le libellé devient une bulle, au survol ET au clavier. */
  .mf-lien-texte {
    position: absolute;
    left: calc(100% + 10px); top: 50%;
    transform: translateY(-50%);
    z-index: 30;
    padding: 5px 9px;
    background: var(--mf-texte);
    color: var(--mf-surface);
    border-radius: var(--mf-rayon-controle);
    box-shadow: var(--mf-ombre-flottant);
    font-weight: 500;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--mf-duree);
  }
  .mf-lien:hover .mf-lien-texte, .mf-lien:focus-visible .mf-lien-texte { opacity: 1; }
  .mf-lien .mf-pastille {
    position: absolute; top: 1px; right: -2px;
    min-width: 16px; padding: 0 4px;
    font-size: 10px; line-height: 16px;
  }
  .mf-compte { flex-direction: column; padding-top: var(--mf-e-2); }
  .mf-compte-textes { display: none; }
}

/* ── < 768 px : le menu devient un tiroir ──────────────────────────────── */
@media (max-width: 767.98px) {
  .mf-app { grid-template-columns: minmax(0, 1fr); }
  .mf-menu {
    position: fixed; left: 0; top: 0; bottom: 0;
    z-index: 50;
    width: min(300px, 86vw);
    height: auto;
    background: var(--mf-surface);
    box-shadow: var(--mf-ombre-flottant);
    transform: translateX(-102%);
    visibility: hidden;
    transition: transform var(--mf-duree), visibility 0s linear var(--mf-duree);
  }
  /* À l'ouverture, le tiroir devient visible AUSSITÔT (pas de transition sur
     visibility) : sinon le focus posé par MFUI.monterCoquille était refusé. */
  .mf-menu-ouvert .mf-menu {
    transform: none;
    visibility: visible;
    transition: transform var(--mf-duree);
  }
  .mf-menu-haut .mf-bouton { display: inline-flex; }
  .mf-voile { display: block; position: fixed; inset: 0; z-index: 40; background: var(--mf-voile); }
  .mf-voile[hidden] { display: none; }
  .mf-lien { min-height: var(--mf-cible-terrain); }
  .mf-principal { border-left: 0; }
  /* Barre haute du téléphone (maquette validée) : ☰ · logo · bascule, puis le
     site, la fraîcheur et la période sur une seconde ligne. */
  .mf-haut { flex-wrap: wrap; padding: var(--mf-e-2) var(--mf-e-4); gap: var(--mf-e-2) var(--mf-e-2);
    min-height: 52px; border-bottom: 1px solid var(--mf-bordure); }
  .mf-haut .mf-bouton-menu { display: inline-flex; order: 1; }
  .mf-haut-logo { display: inline-flex; order: 2; flex: 1; min-width: 0; }
  .mf-haut-theme { order: 3; }
  .mf-haut-infos { order: 4; flex: 1 0 100%; gap: var(--mf-e-2); }
  .mf-fil ol { flex-wrap: nowrap; }
  .mf-fil li:not(:last-child) { display: none; }
  .mf-fil li + li::before { content: none; }
  .mf-fil { font-size: var(--mf-t-12); }
  .mf-contenu { padding: var(--mf-e-4) var(--mf-e-4) var(--mf-e-8); }
}

/* ══════════════════════════════════════════════════════════════════════════
 * Blocs de page
 * ══════════════════════════════════════════════════════════════════════════ */
.mf-entete {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
  gap: var(--mf-e-3);
  margin-bottom: var(--mf-e-4);
}
.mf-titre { font-size: var(--mf-t-22); font-weight: 700; letter-spacing: -0.01em; line-height: 1.25;
  overflow-wrap: anywhere; }
.mf-sous-titre { margin-top: 2px; color: var(--mf-texte-2); font-size: var(--mf-t-13); }
.mf-entete-actions { display: flex; flex-wrap: wrap; gap: var(--mf-e-2); }

.mf-section-titre {
  margin: var(--mf-e-5) 0 var(--mf-e-2);
  color: var(--mf-texte-2);
  font-size: var(--mf-t-12);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* ── Bandeau de grands chiffres ────────────────────────────────────────── */
.mf-chiffres {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0 0 var(--mf-e-4);
  border: 1px solid var(--mf-bordure);
  border-radius: var(--mf-rayon-bloc);
  overflow: hidden;
}
.mf-chiffres--1 { grid-template-columns: minmax(0, 1fr); }
.mf-chiffres--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mf-chiffres--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mf-chiffre-bloc { padding: 14px var(--mf-e-4); border-left: 1px solid var(--mf-bordure); min-width: 0; }
.mf-chiffre-bloc:first-child { border-left: 0; }
.mf-chiffre-libelle { color: var(--mf-texte-2); font-size: var(--mf-t-12); }
.mf-chiffre-valeur {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 5px;
  margin: 2px 0 0;
}
.mf-chiffre {
  font-size: var(--mf-t-28);
  font-weight: 650;
  letter-spacing: -0.02em;
  line-height: 1.2;
  overflow-wrap: anywhere;
}
.mf-chiffre-total { font-size: var(--mf-t-22); color: var(--mf-texte-discret); font-weight: 600; margin-left: -5px; }
.mf-chiffre-unite { color: var(--mf-texte-2); font-size: var(--mf-t-13); font-weight: 500; }
.mf-chiffre-variation { margin: 2px 0 0; font-size: var(--mf-t-12); color: var(--mf-texte-2); }
.mf-variation--bon { color: var(--mf-marche-texte); }
.mf-variation--mauvais { color: var(--mf-panne-texte); }

@media (max-width: 899.98px) {
  .mf-chiffres, .mf-chiffres--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mf-chiffres--1 { grid-template-columns: minmax(0, 1fr); }
  .mf-chiffre-bloc { border-left: 0; border-top: 1px solid var(--mf-bordure); }
  .mf-chiffre-bloc:nth-child(-n+2) { border-top: 0; }
  .mf-chiffre-bloc:nth-child(2n) { border-left: 1px solid var(--mf-bordure); }
  .mf-chiffres--1 .mf-chiffre-bloc:nth-child(2n) { border-left: 0; }
  .mf-chiffre { font-size: var(--mf-t-22); }
}

/* ── État : point + mot ────────────────────────────────────────────────── */
.mf-point {
  width: 7px; height: 7px;
  flex: none;
  display: inline-block;
  border-radius: 50%;
  background: var(--mf-arretee-point);
}
.mf-etat {
  display: inline-flex; align-items: center; gap: 6px;
  font-weight: 500;
  color: var(--mf-arretee-texte);
}
.mf-etat--marche { color: var(--mf-marche-texte); }
.mf-etat--marche .mf-point { background: var(--mf-marche-point); }
.mf-etat--veille { color: var(--mf-veille-texte); }
.mf-etat--veille .mf-point { background: var(--mf-veille-point); }
.mf-etat--panne { color: var(--mf-panne-texte); }
.mf-etat--panne .mf-point { background: var(--mf-panne-point); }
.mf-etat--inconnu { color: var(--mf-texte-discret); }
.mf-etat--inconnu .mf-point { background: transparent; box-shadow: inset 0 0 0 1.5px var(--mf-texte-discret); }

/* ── Tuiles « en ce moment » ───────────────────────────────────────────── */
.mf-tuiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: var(--mf-e-2);
  margin-bottom: var(--mf-e-4);
}
.mf-tuile {
  min-width: 0;
  padding: 9px 11px;
  border: 1px solid var(--mf-bordure);
  border-radius: var(--mf-rayon-bloc);
  font-size: var(--mf-t-13);
}
.mf-tuile-titre { font-weight: 600; overflow-wrap: anywhere; }

/* ── Tableau ───────────────────────────────────────────────────────────── */
.mf-tableau-cadre { width: 100%; }
.mf-tableau { width: 100%; font-size: var(--mf-t-13); }
.mf-tableau th {
  padding: 7px var(--mf-e-3) 7px 0;
  border-bottom: 1px solid var(--mf-bordure);
  color: var(--mf-texte-2);
  font-size: var(--mf-t-12);
  font-weight: 500;
  text-align: left;
  white-space: nowrap;
}
.mf-tableau td {
  padding: 9px var(--mf-e-3) 9px 0;
  border-bottom: 1px solid var(--mf-bordure-douce);
  vertical-align: middle;
  overflow-wrap: anywhere;
}
.mf-tableau th:last-child, .mf-tableau td:last-child { padding-right: 0; }
.mf-tableau tbody tr:last-child td { border-bottom: 0; }
.mf-tableau .mf-nombre { text-align: right; white-space: nowrap; }
.mf-tableau .mf-etat { white-space: nowrap; }
.mf-unite { color: var(--mf-texte-2); }
.mf-tableau--cliquable tbody tr { cursor: pointer; }
.mf-tableau--cliquable tbody tr:hover td { background: var(--mf-survol); }

/* Sous 600 px : une carte par ligne, « libellé : valeur », jamais de défilement. */
@media (max-width: 599.98px) {
  .mf-tableau, .mf-tableau tbody, .mf-tableau tr, .mf-tableau td { display: block; width: 100%; }
  /* Chaque cellule porte son libellé (data-libelle) : l'en-tête ne sert plus, et
     même masqué il dépassait de la page (vu à 375 px, lot REFONTE-1). */
  .mf-tableau thead { display: none; }
  .mf-tableau tr {
    margin-bottom: var(--mf-e-2);
    padding: var(--mf-e-2) var(--mf-e-3);
    border: 1px solid var(--mf-bordure);
    border-radius: var(--mf-rayon-bloc);
  }
  .mf-tableau td {
    display: flex; justify-content: space-between; gap: var(--mf-e-3);
    padding: 5px 0;
    border-bottom: 1px solid var(--mf-bordure-douce);
    text-align: right;
  }
  .mf-tableau td:last-child { border-bottom: 0; }
  .mf-tableau td::before {
    content: attr(data-libelle);
    color: var(--mf-texte-2);
    text-align: left;
    flex: none;
    max-width: 50%;
  }
  .mf-tableau td.mf-tableau-principal { font-weight: 600; font-size: var(--mf-t-14); text-align: left; }
  .mf-tableau td.mf-tableau-principal::before { content: none; }
  .mf-tableau .mf-nombre { white-space: normal; }
  .mf-tableau--cliquable tbody tr:hover td { background: transparent; }
}

/* ── Boutons ───────────────────────────────────────────────────────────── */
.mf-bouton {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 34px;
  padding: 0 var(--mf-e-3);
  border: 1px solid transparent;
  border-radius: var(--mf-rayon-controle);
  font-size: var(--mf-t-13);
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  white-space: nowrap;
  transition: background var(--mf-duree), border-color var(--mf-duree);
}
.mf-bouton .mf-icone { width: 16px; height: 16px; }
.mf-bouton:disabled { cursor: not-allowed; opacity: 0.5; }
.mf-bouton--principal { background: var(--mf-marque); color: var(--mf-texte-sur-marque); }
.mf-bouton--principal:hover:not(:disabled) { background: var(--mf-marque-appuyee); }
.mf-bouton--secondaire { background: var(--mf-surface); color: var(--mf-texte); border-color: var(--mf-bordure); }
.mf-bouton--secondaire:hover:not(:disabled) { background: var(--mf-survol); border-color: var(--mf-bordure-champ); }
.mf-bouton--danger { background: var(--mf-danger); color: var(--mf-texte-sur-danger); }
.mf-bouton--danger:hover:not(:disabled) { background: var(--mf-danger-appuye); }
/* Une action dangereuse dans une page : rouge en contour ; le plein, à la confirmation. */
.mf-bouton--danger-contour { background: var(--mf-surface); color: var(--mf-panne-texte); border-color: var(--mf-danger); }
.mf-bouton--danger-contour:hover:not(:disabled) { background: var(--mf-panne-lavis); }
.mf-bouton--discret { background: transparent; color: var(--mf-marque); padding: 0 var(--mf-e-2); }
.mf-bouton--discret:hover:not(:disabled) { background: var(--mf-survol); }
.mf-bouton--icone { width: 34px; padding: 0; }
.mf-bouton--icone.mf-bouton--discret { color: var(--mf-texte-2); }
.mf-bouton--terrain { min-height: var(--mf-cible-terrain); padding: 0 var(--mf-e-4); font-size: var(--mf-t-16); }
.mf-bouton--terrain.mf-bouton--icone { width: var(--mf-cible-terrain); padding: 0; }
.mf-rangee-boutons { display: flex; flex-wrap: wrap; gap: var(--mf-e-2); align-items: center; }

/* ── Champs ────────────────────────────────────────────────────────────── */
.mf-champ { display: flex; flex-direction: column; gap: 5px; margin-bottom: var(--mf-e-4); min-width: 0; }
.mf-libelle { font-size: var(--mf-t-13); font-weight: 600; }
.mf-requis { color: var(--mf-panne-texte); }
.mf-saisie {
  width: 100%;
  min-height: 36px;
  padding: 7px 11px;
  background: var(--mf-surface);
  color: var(--mf-texte);
  border: 1px solid var(--mf-bordure-champ);
  border-radius: var(--mf-rayon-controle);
  font-size: var(--mf-t-14);
}
.mf-saisie::placeholder { color: var(--mf-texte-discret); opacity: 1; }
.mf-saisie:focus-visible { outline-offset: 0; border-color: var(--mf-focus); }
.mf-saisie:disabled { background: var(--mf-surface-2); color: var(--mf-texte-2); }
.mf-saisie--compacte { width: auto; min-height: 30px; padding: 4px 9px; font-size: var(--mf-t-12); }
select.mf-saisie { padding-right: 28px; }
.mf-champ--erreur .mf-saisie { border-color: var(--mf-panne-point); }
.mf-aide { color: var(--mf-texte-2); font-size: var(--mf-t-12); }
.mf-erreur {
  display: flex; align-items: flex-start; gap: 5px;
  color: var(--mf-panne-texte);
  font-size: var(--mf-t-12);
  font-weight: 500;
}
.mf-erreur .mf-icone { width: 14px; height: 14px; margin-top: 1px; }

.mf-case { display: inline-flex; align-items: center; gap: var(--mf-e-2); cursor: pointer; min-height: 28px; }
.mf-case input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.mf-case-marque {
  position: relative;
  width: 18px; height: 18px;
  flex: none;
  border: 1.5px solid var(--mf-bordure-champ);
  border-radius: 4px;
  background: var(--mf-surface);
}
.mf-case input:checked + .mf-case-marque { background: var(--mf-marque); border-color: var(--mf-marque); }
.mf-case input:checked + .mf-case-marque::after {
  content: "";
  position: absolute; left: 5px; top: 1px;
  width: 5px; height: 10px;
  border: solid var(--mf-texte-sur-marque);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.mf-case input:focus-visible + .mf-case-marque { outline: 2px solid var(--mf-focus); outline-offset: 2px; }
.mf-case--interrupteur .mf-case-marque { width: 34px; height: 20px; border-radius: 10px; }
.mf-case--interrupteur .mf-case-marque::before {
  content: "";
  position: absolute; left: 2px; top: 2px;
  width: 13px; height: 13px;
  border-radius: 50%;
  background: var(--mf-texte-discret);
  transition: transform var(--mf-duree);
}
.mf-case--interrupteur input:checked + .mf-case-marque::before { transform: translateX(14px); background: var(--mf-texte-sur-marque); }
.mf-case--interrupteur input:checked + .mf-case-marque::after { content: none; }

/* ── Onglets ───────────────────────────────────────────────────────────── */
.mf-onglets {
  display: flex; gap: var(--mf-e-1);
  margin-bottom: var(--mf-e-4);
  border-bottom: 1px solid var(--mf-bordure);
  overflow-x: auto;
  /* Le trait de l'onglet choisi déborde d'1 px (margin-bottom: -1px) : sans ceci,
     une barre de défilement VERTICALE apparaissait à droite (vu dans Edge, lot REFONTE-3). */
  overflow-y: hidden;
  scrollbar-width: thin;
}
.mf-onglet {
  display: inline-flex; align-items: center; gap: 6px;
  margin-bottom: -1px;
  padding: var(--mf-e-2) var(--mf-e-3);
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  color: var(--mf-texte-2);
  font-size: var(--mf-t-13);
  font-weight: 500;
  white-space: nowrap;
}
.mf-onglet:hover { color: var(--mf-texte); }
.mf-onglet[aria-selected="true"] { color: var(--mf-texte); border-bottom-color: var(--mf-marque); font-weight: 600; }

/* ── Bandeau d'incident, encart d'appel ────────────────────────────────── */
.mf-alerte {
  display: flex; align-items: center; gap: var(--mf-e-3);
  margin-bottom: var(--mf-e-4);
  padding: 10px 14px;
  background: var(--mf-panne-lavis);
  border: 1px solid var(--mf-panne-bord);
  border-radius: var(--mf-rayon-bloc);
  font-size: var(--mf-t-13);
}
.mf-alerte-icone { color: var(--mf-panne-texte); }
.mf-alerte-texte { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.mf-alerte-texte strong { color: var(--mf-panne-texte); }

.mf-encart {
  margin-bottom: var(--mf-e-4);
  padding: 14px var(--mf-e-4);
  background: var(--mf-marque-lavis);
  border: 1px solid var(--mf-marque-bord);
  border-radius: var(--mf-rayon-bloc);
}
.mf-encart-titre { font-size: var(--mf-t-14); font-weight: 700; margin-bottom: var(--mf-e-1); }
.mf-encart-texte { color: var(--mf-texte-2); font-size: var(--mf-t-13); margin-bottom: 10px; max-width: 60ch; }

/* ── Vide, chargement, erreur ──────────────────────────────────────────── */
.mf-vide, .mf-erreur-bloc {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: var(--mf-e-8) var(--mf-e-4);
  border: 1px dashed var(--mf-bordure);
  border-radius: var(--mf-rayon-bloc);
  text-align: center;
}
.mf-vide-icone, .mf-erreur-icone { width: 24px; height: 24px; color: var(--mf-texte-discret); }
.mf-erreur-icone { color: var(--mf-panne-texte); }
.mf-vide-titre, .mf-erreur-texte { font-weight: 600; overflow-wrap: anywhere; }
.mf-vide-texte { color: var(--mf-texte-2); font-size: var(--mf-t-13); max-width: 48ch; }
.mf-erreur-bloc { border-style: solid; border-color: var(--mf-panne-bord); }
.mf-erreur-bloc .mf-bouton { margin-top: var(--mf-e-2); }

.mf-squelette { display: flex; flex-direction: column; gap: 10px; padding: var(--mf-e-2) 0; }
.mf-squelette-ligne {
  display: block;
  height: 12px;
  border-radius: 4px;
  background: var(--mf-surface-2);
  animation: mf-respire 1.6s ease-in-out infinite;
}
@keyframes mf-respire { 50% { opacity: 0.45; } }

/* ── Graphiques ────────────────────────────────────────────────────────── */
.mf-graphe {
  position: relative;
  margin: 0 0 var(--mf-e-2);
  padding: 22px 0 22px 44px;       /* en haut : la place de l'unité */
  overflow-x: clip;               /* rien ne dépasse de côté ; la bulle peut monter */
}
.mf-graphe-zone { position: relative; width: 100%; height: 100%; }
.mf-graphe-svg { width: 100%; height: 100%; overflow: visible; }
.mf-graphe-grille { stroke: var(--mf-grille); stroke-width: 1; }
.mf-graphe-ligne { fill: none; stroke: var(--mf-marque); stroke-width: 2; stroke-linejoin: round; }
.mf-graphe-aire { fill: var(--mf-marque-lavis); }
.mf-serie-1 { fill: var(--mf-serie-1); }
.mf-serie-2 { fill: var(--mf-serie-2); }
.mf-serie-3 { fill: var(--mf-serie-3); }
.mf-serie-fond-1 { background: var(--mf-serie-1); }
.mf-serie-fond-2 { background: var(--mf-serie-2); }
.mf-serie-fond-3 { background: var(--mf-serie-3); }
.mf-cible { fill: transparent; cursor: crosshair; }
.mf-cible:focus-visible { outline: none; fill: var(--mf-survol); fill-opacity: 0.6; }
.mf-graphe-y, .mf-graphe-x, .mf-graphe-unite {
  position: absolute;
  color: var(--mf-texte-2);
  font-size: 11px;
  line-height: 1;
  white-space: nowrap;
  pointer-events: none;
}
.mf-graphe-y { left: -8px; transform: translate(-100%, 50%); }
.mf-graphe-unite { left: -8px; top: -22px; transform: translateX(-100%); }
.mf-graphe-x { top: calc(100% + 7px); transform: translateX(-50%); overflow: hidden; text-overflow: ellipsis; }
.mf-graphe-x--debut { transform: none; }
.mf-graphe-x--fin { transform: translateX(-100%); }
@media (max-width: 599.98px) { .mf-graphe-x--seconde { display: none; } }
.mf-graphe-repere {
  position: absolute;
  width: 9px; height: 9px;
  margin: -4.5px 0 0 -4.5px;
  border-radius: 50%;
  background: var(--mf-surface);
  border: 2px solid var(--mf-marque);
  pointer-events: none;
}
.mf-bulle {
  position: absolute; top: -6px;
  z-index: 20;
  transform: translate(-50%, -100%);
  padding: 5px 9px;
  background: var(--mf-texte);
  color: var(--mf-surface);
  border-radius: var(--mf-rayon-controle);
  box-shadow: var(--mf-ombre-flottant);
  font-size: var(--mf-t-12);
  white-space: nowrap;
  pointer-events: none;
}
.mf-legende { display: flex; flex-wrap: wrap; gap: var(--mf-e-1) var(--mf-e-4); margin: var(--mf-e-2) 0 var(--mf-e-4) 44px;
  color: var(--mf-texte-2); font-size: var(--mf-t-12); }
.mf-legende li { display: inline-flex; align-items: center; gap: 6px; }
.mf-legende-carre { width: 10px; height: 10px; border-radius: 2px; }

/* ── Fenêtre (modale) ──────────────────────────────────────────────────── */
.mf-fenetre-ouverte { overflow: hidden; }
.mf-fenetre-voile {
  position: fixed; inset: 0;
  z-index: 70;
  display: flex; align-items: center; justify-content: center;
  padding: var(--mf-e-4);
  background: var(--mf-voile);
}
.mf-fenetre {
  width: min(460px, 100%);
  max-height: calc(100vh - 32px);
  overflow-y: auto;
  padding: var(--mf-e-5) var(--mf-e-5) var(--mf-e-4);
  background: var(--mf-surface);
  border: 1px solid var(--mf-bordure);
  border-radius: var(--mf-rayon-bloc);
  box-shadow: var(--mf-ombre-flottant);
}
.mf-fenetre--large { width: min(720px, 100%); }
.mf-fenetre-tete { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--mf-e-3); }
.mf-fenetre-titre { font-size: var(--mf-t-16); font-weight: 700; overflow-wrap: anywhere; padding-top: 6px; }
.mf-fenetre-texte { margin: var(--mf-e-2) 0 var(--mf-e-4); color: var(--mf-texte-2); overflow-wrap: anywhere; }
.mf-fenetre-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--mf-e-2); margin-top: var(--mf-e-4); }

/* ── Messages éphémères ────────────────────────────────────────────────── */
.mf-toasts {
  position: fixed; right: var(--mf-e-4); bottom: var(--mf-e-4);
  z-index: 80;
  display: flex; flex-direction: column; gap: var(--mf-e-2);
  width: min(380px, calc(100vw - 32px));
  pointer-events: none;
}
.mf-toasts--urgent { bottom: auto; top: var(--mf-e-4); }
.mf-toast {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 10px 6px 10px 12px;
  background: var(--mf-surface);
  border: 1px solid var(--mf-bordure);
  border-left: 3px solid var(--mf-marque);
  border-radius: var(--mf-rayon-controle);
  box-shadow: var(--mf-ombre-flottant);
  font-size: var(--mf-t-13);
  pointer-events: auto;
}
.mf-toast-icone { margin-top: 1px; color: var(--mf-marque); }
.mf-toast-texte { flex: 1; min-width: 0; padding-top: 1px; overflow-wrap: anywhere; }
.mf-toast .mf-bouton--icone { width: 26px; min-height: 26px; }
.mf-toast--succes { border-left-color: var(--mf-marche-point); }
.mf-toast--succes .mf-toast-icone { color: var(--mf-marche-texte); }
.mf-toast--erreur { border-left-color: var(--mf-panne-point); }
.mf-toast--erreur .mf-toast-icone { color: var(--mf-panne-texte); }
@media (max-width: 767.98px) {
  .mf-toasts { left: var(--mf-e-4); right: var(--mf-e-4); width: auto; }
}

/* ══════════════════════════════════════════════════════════════════════════
 * Page seule (connexion) — lot REFONTE-1
 * Une seule carte au milieu, la marque au-dessus, les liens légaux dessous.
 * ══════════════════════════════════════════════════════════════════════════ */
.mf-page-seule {
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  padding: var(--mf-e-8) var(--mf-e-4);
  background: var(--mf-fond);
}
.mf-connexion { width: min(372px, 100%); display: flex; flex-direction: column; align-items: center; }
.mf-connexion-marque { margin-bottom: 22px; }
.mf-connexion-marque .mf-logo-image { width: 30px; height: 30px; }
.mf-connexion-marque .mf-logo-nom { font-size: var(--mf-t-22); }
.mf-carte-seule {
  width: 100%;
  padding: 26px 26px 22px;
  background: var(--mf-surface);
  border: 1px solid var(--mf-bordure);
  border-radius: var(--mf-rayon-bloc);
}
.mf-carte-titre { font-size: var(--mf-t-22); font-weight: 700; letter-spacing: -0.01em; margin-bottom: var(--mf-e-1); }
.mf-carte-texte { color: var(--mf-texte-2); font-size: var(--mf-t-13); margin-bottom: 18px; }
.mf-libelle-ligne { display: flex; align-items: baseline; justify-content: space-between; gap: var(--mf-e-2); }
.mf-libelle-ligne a { font-size: var(--mf-t-13); }
.mf-bouton--large { width: 100%; min-height: 40px; font-size: var(--mf-t-14); }
.mf-succes {
  display: flex; align-items: flex-start; gap: 5px;
  color: var(--mf-marche-texte);
  font-size: var(--mf-t-12);
  font-weight: 500;
}
.mf-succes .mf-icone { width: 14px; height: 14px; margin-top: 1px; }
.mf-lien-retour { display: block; margin-top: var(--mf-e-4); font-size: var(--mf-t-13); text-align: center; }
.mf-pied-legal {
  margin-top: 18px;
  color: var(--mf-texte-discret);
  font-size: var(--mf-t-12);
  line-height: 1.8;
  text-align: center;
}
.mf-pied-legal a { color: inherit; margin: 0 var(--mf-e-2); }
.mf-saisie--code { font-size: var(--mf-t-22); letter-spacing: 0.2em; text-align: center; }

/* ══════════════════════════════════════════════════════════════════════════
 * Briques ajoutées au lot REFONTE-1 (panel client)
 * ══════════════════════════════════════════════════════════════════════════ */

/* ── Statut (abonnement, facture) : point + texte ───────────────────────── */
.mf-statut { display: inline-flex; align-items: center; gap: 6px; font-weight: 500; color: var(--mf-arretee-texte); }
.mf-statut--succes { color: var(--mf-marche-texte); }
.mf-statut--succes .mf-point { background: var(--mf-marche-point); }
.mf-statut--attention { color: var(--mf-veille-texte); }
.mf-statut--attention .mf-point { background: var(--mf-veille-point); }
.mf-statut--danger { color: var(--mf-panne-texte); }
.mf-statut--danger .mf-point { background: var(--mf-panne-point); }
.mf-statut--info { color: var(--mf-marque-appuyee); }
.mf-statut--info .mf-point { background: var(--mf-marque); }

/* ── Bandeau : les autres tons ──────────────────────────────────────────── */
.mf-alerte--attention { background: var(--mf-veille-lavis); border-color: var(--mf-veille-bord); }
.mf-alerte--attention .mf-alerte-icone, .mf-alerte--attention .mf-alerte-texte strong { color: var(--mf-veille-texte); }
.mf-alerte--info { background: var(--mf-surface-2); border-color: var(--mf-bordure); color: var(--mf-texte-2); }
.mf-alerte--info .mf-alerte-icone { color: var(--mf-texte-2); }
.mf-alerte--info .mf-alerte-texte strong { color: var(--mf-texte); }
.mf-alerte .mf-bouton { flex: none; }

/* ── Propriétés en lecture ──────────────────────────────────────────────── */
.mf-proprietes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: var(--mf-e-3) var(--mf-e-6);
  margin: 0 0 var(--mf-e-4);
}
.mf-propriete { min-width: 0; }
.mf-propriete dt { color: var(--mf-texte-2); font-size: var(--mf-t-12); }
.mf-propriete dd { margin: 2px 0 0; font-weight: 600; overflow-wrap: anywhere; }

/* ── Tuile cliquable ────────────────────────────────────────────────────── */
.mf-tuile--lien { padding: 0; }
.mf-tuile-lien { display: block; height: 100%; padding: 9px 11px; color: inherit; border-radius: var(--mf-rayon-bloc); }
.mf-tuile-lien:hover { background: var(--mf-survol); text-decoration: none; }

/* ── Fenêtre de choix (site, client) ────────────────────────────────────── */
.mf-choix { display: flex; flex-direction: column; gap: 2px; margin: var(--mf-e-2) 0 0; }
.mf-choix-bouton {
  display: flex; flex-direction: column; align-items: flex-start; gap: 1px;
  width: 100%;
  min-height: 40px;
  padding: 8px 12px;
  background: none;
  border: 1px solid transparent;
  border-radius: var(--mf-rayon-controle);
  text-align: left;
}
.mf-choix-bouton:hover { background: var(--mf-survol); }
.mf-choix-bouton[aria-pressed="true"] { background: var(--mf-marque-lavis); color: var(--mf-marque-appuyee); font-weight: 600; }
.mf-choix-nom { overflow-wrap: anywhere; }
.mf-choix-detail { color: var(--mf-texte-2); font-size: var(--mf-t-12); font-weight: 400; }

/* ── Mise en page d'une page ────────────────────────────────────────────── */
.mf-bloc {
  margin-bottom: var(--mf-e-4);
  padding: var(--mf-e-4) var(--mf-e-5);
  background: var(--mf-surface);
  border: 1px solid var(--mf-bordure);
  border-radius: var(--mf-rayon-bloc);
  min-width: 0;
}
.mf-bloc-titre { font-size: var(--mf-t-14); font-weight: 700; margin-bottom: var(--mf-e-3); }
.mf-bloc-texte { color: var(--mf-texte-2); font-size: var(--mf-t-13); margin-bottom: var(--mf-e-3); max-width: 70ch; }
.mf-bloc > :last-child { margin-bottom: 0; }
.mf-grille-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--mf-e-4); }
.mf-grille-2 > * { min-width: 0; }
@media (max-width: 899.98px) { .mf-grille-2 { grid-template-columns: minmax(0, 1fr); } }
.mf-lien-suite { display: inline-flex; align-items: center; gap: 4px; font-size: var(--mf-t-12); }
.mf-lien-suite .mf-icone { width: 14px; height: 14px; }
.mf-pied-graphe { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: var(--mf-e-2);
  margin: 0 0 var(--mf-e-4); color: var(--mf-texte-discret); font-size: var(--mf-t-12); }
.mf-note { color: var(--mf-texte-2); font-size: var(--mf-t-12); }
.mf-code { font-family: ui-monospace, "Cascadia Code", Consolas, monospace; font-size: var(--mf-t-13);
  overflow-wrap: anywhere; }
.mf-formulaire { max-width: 420px; }
.mf-principal > .mf-pied-legal { margin: auto var(--mf-e-6) var(--mf-e-4); text-align: left; }
@media (max-width: 767.98px) { .mf-principal > .mf-pied-legal { margin: auto var(--mf-e-4) var(--mf-e-4); } }

/* ── Fiche SAV d'une pièce, au scan (fiche-materiel.js, lot REFONTE-4) ───── */
.mf-fiche { display: flex; flex-direction: column; min-width: 0; }
.mf-fiche > .mf-bloc { margin-bottom: var(--mf-e-3); }
.mf-fiche-tete { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between;
  gap: var(--mf-e-2) var(--mf-e-4); margin-bottom: var(--mf-e-3); }
.mf-fiche-code { margin: 0; font-size: var(--mf-t-22); font-weight: 700; overflow-wrap: anywhere; }
.mf-fiche-ou .mf-proprietes dd { font-size: var(--mf-t-16); }
.mf-fiche-installation { margin: 0 0 var(--mf-e-2); font-size: var(--mf-t-16); font-weight: 700; }
.mf-fiche-scans { display: flex; align-items: center; gap: var(--mf-e-2); margin: 0;
  color: var(--mf-texte-2); font-size: var(--mf-t-13); }
.mf-fiche-scans .mf-icone { width: 16px; height: 16px; flex: none; }
.mf-fiche-periodes { margin: 0; padding-left: var(--mf-e-5); font-size: var(--mf-t-13); }
.mf-fiche-periodes li { padding: 2px 0; color: var(--mf-texte-2); }
.mf-fiche-periodes .mf-fiche-periode--en-cours { color: var(--mf-texte); font-weight: 600; }
.mf-fiche-historique { margin: 0; padding: 0; list-style: none; }
.mf-fiche-evt { display: flex; flex-wrap: wrap; gap: 2px var(--mf-e-3); padding: 7px 0;
  border-top: 1px solid var(--mf-bordure-douce); font-size: var(--mf-t-13); }
.mf-fiche-historique .mf-fiche-evt:first-child { border-top: 0; }
.mf-fiche-quand { flex: none; min-width: 9.5em; color: var(--mf-texte-2); font-variant-numeric: tabular-nums; }
.mf-fiche-phrase { flex: 1; min-width: min(16em, 100%); overflow-wrap: anywhere; }
.mf-fiche-suite { margin-top: var(--mf-e-2); }
.mf-fiche-suite summary { cursor: pointer; color: var(--mf-marque); font-size: var(--mf-t-13); }
.mf-fiche-suite .mf-fiche-historique { margin-top: var(--mf-e-2); border-top: 1px solid var(--mf-bordure-douce); }
.mf-fiche-actions { display: flex; flex-wrap: wrap; gap: var(--mf-e-2); }
@media (max-width: 599.98px) { .mf-fiche-actions .mf-bouton { flex: 1 1 100%; justify-content: center; } }