/* ══════════════════════════════════════════════════════════════════════════
   MECAFLOW — mf-ui : les 8 composants du CRM (direction design 22.09.2026)
   ──────────────────────────────────────────────────────────────────────────
   Pourquoi ce fichier existe : 39 audits, une seule maladie — tout l'écran
   est une liste de lignes à 13,5 px, une taille, une couleur, zéro image,
   zéro temps, zéro geste. Plutôt que corriger 40 modules un par un, on
   construit 8 composants ici, une fois, et on les pose partout.

   Règles fixes (ops/direction-design-2026-09-22.md) :
   · Couleurs : UNIQUEMENT les jetons de charte/tokens.css et du :root d'app.html.
     Ce fichier ne déclare aucune couleur nouvelle : chaque --mf-* est une
     lecture d'un jeton existant, avec sa valeur de charte en repli pour le
     cas où le jeton n'est pas chargé (page de démo, page isolée).
   · Typo : 4 tailles seulement — 48 / 20 / 15 / 12,5. Rien d'autre.
   · Rayons : 12 (cartes) / 8 (boutons) / 5 (pastilles).
   · Tactile : 48 px minimum, 8 px d'écart, état pressé visible (scale .96).
   · Mouvement : 150 ms (pression) / 300 ms (état) / 1 200 ms (anneau) — et
     tout est coupé sous prefers-reduced-motion.
   · Sombre = marque. Le clair est une variante des MÊMES jetons, vérifiée après.
   · Icônes SVG trait (mf-ui.js : MF.icon), zéro emoji comme icône.

   Tout est préfixé « mf- » : ce fichier peut vivre à côté des 15 000 lignes
   de CSS d'app.html sans jamais entrer en collision avec elles.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── 0. Jetons de lecture ─────────────────────────────────────────────────
   Deux mondes chargent ce fichier : app.html (--ground/--ink-2/--dh-blue…) et
   la charte (--bg/--ink2/--ember…). Chaque --mf-* essaie les deux noms, puis
   retombe sur la valeur de charte. Ainsi le composant est identique partout
   sans dupliquer une seule couleur. */
:root{
  --mf-bg:      var(--bg,    var(--ground,  #0b0f16));
  --mf-bg2:     var(--bg2,   var(--surface, #0f1420));
  --mf-card:    var(--card,  rgba(20,26,38,.60));
  --mf-card2:   var(--card2, var(--panel-2, rgba(26,34,50,.72)));
  --mf-ink:     var(--ink,   #eaf0f8);
  --mf-ink2:    var(--ink2,  var(--ink-2,   #9aa6ba));
  --mf-ink3:    var(--ink3,  #6f7b8f);
  --mf-line:    var(--line,  rgba(255,255,255,.09));
  --mf-line2:   var(--line2, rgba(255,255,255,.055));
  --mf-accent:  var(--ember, #E8930C);      /* la marque : action, chiffre-héros */
  --mf-accent2: var(--ember2,#ff9d1e);      /* survol */
  --mf-hot:     var(--hot,   #ff7a18);      /* dégradé de bouton primaire seulement */
  --mf-teal:    var(--teal,  #14e0b0);      /* mesure, donnée positive */
  /* Les 6 états machine : une couleur = un sens, dans les 40 modules. */
  --mf-ok:      var(--ok,    #22c55e);
  --mf-prod:    var(--prod,  #14e0b0);
  --mf-regl:    var(--regl,  #E8930C);
  --mf-maint:   var(--maint, #c2703d);
  --mf-resa:    var(--resa,  #3aa7c8);
  --mf-panne:   var(--panne, var(--red, #ff3b3b));
  --mf-neutral: var(--ink3,  #6f7b8f);      /* gris = rien à faire */
  /* Palette FIXE par cause de panne — réutilisée dans Pareto, frises, cartes.
     Quatre causes, quatre jetons d'état déjà existants : aucune couleur neuve. */
  --mf-cause-meca: var(--mf-maint);         /* mécanique  = cuivre  */
  --mf-cause-elec: var(--mf-regl);          /* électrique = ambre   */
  --mf-cause-soft: var(--mf-resa);          /* logiciel   = bleu    */
  --mf-cause-outil:var(--mf-prod);          /* outil      = turquoise */
  /* Texte posé SUR un aplat de couleur : sombre sur les tons clairs, blanc sur
     les tons profonds. Décidé une fois ici, jamais dans un composant. */
  --mf-on-accent:#0b0f16; --mf-on-ok:#0b0f16; --mf-on-prod:#0b0f16; --mf-on-regl:#0b0f16;
  --mf-on-resa:#0b0f16;   --mf-on-maint:#ffffff; --mf-on-panne:#ffffff; --mf-on-neutral:#ffffff;
  --mf-on-teal:#0b0f16;
  --mf-disp: var(--disp, var(--font-disp, 'Barlow Condensed','Bahnschrift','Arial Narrow',sans-serif));
  --mf-body: var(--body, var(--font-body, 'Barlow','Segoe UI',system-ui,sans-serif));
  --mf-mono: var(--mono, var(--font-mono, 'JetBrains Mono',ui-monospace,Consolas,monospace));
  --mf-r-xs:5px; --mf-r-sm:8px; --mf-r-md:12px;
  --mf-t-150:150ms; --mf-t-300:300ms; --mf-t-1200:1200ms;
  --mf-ease:cubic-bezier(.22,.8,.3,1);
  --mf-shadow: var(--shadow, 0 1px 0 rgba(255,255,255,.04),0 18px 46px -12px rgba(0,0,0,.66));
  --mf-glow:   var(--glow,   0 0 0 1px rgba(232,147,12,.5),0 14px 44px -8px rgba(232,147,12,.28));
  --mf-veil: 11,15,22;   /* composantes du fond, pour les voiles sur photo */
}
/* ── Clair : mêmes jetons, valeurs du :root clair d'app.html ──────────────
   Vérifié à 4,5:1 sur blanc pour le texte. Le cuivre de maintenance est gardé
   tel quel : le violet #8A57D6 du vieux thème clair est interdit en structurant. */
html[data-theme="light"]{
  --mf-bg:#EEF0F3; --mf-bg2:#FFFFFF; --mf-card:#FFFFFF; --mf-card2:#F4F7FB;
  --mf-ink:#17202E; --mf-ink2:#5A6678; --mf-ink3:#6f7b8f;
  --mf-line:#D8DCE3; --mf-line2:#E2E6EC;
  --mf-ok:#1E9E5A; --mf-prod:#0FA3A8; --mf-regl:#E8930C; --mf-maint:#c2703d; --mf-resa:#2673D9; --mf-panne:#D5232A;
  --mf-teal:#0FA3A8; --mf-neutral:#5A6678;
  --mf-on-ok:#ffffff; --mf-on-prod:#ffffff; --mf-on-resa:#ffffff; --mf-on-teal:#ffffff;
  --mf-shadow:0 1px 0 rgba(0,0,0,.02),0 14px 34px -14px rgba(23,32,46,.22);
  --mf-veil:238,240,243;
  color-scheme:light;
}

/* ── 1. Socle : boîte, typo, tons, cibles, pression, mouvement ───────────── */
[class*="mf-"],[class*="mf-"]::before,[class*="mf-"]::after{box-sizing:border-box}

/* Les 4 tailles. Toute chaîne d'un composant porte l'une de ces classes ou
   hérite d'un bloc qui en porte une. */
.mf-t-hero {font-family:var(--mf-disp);font-weight:700;font-size:48px;line-height:1;letter-spacing:.005em;font-variant-numeric:tabular-nums}
.mf-t-title{font-family:var(--mf-disp);font-weight:600;font-size:20px;line-height:1.15;letter-spacing:.01em}
.mf-t-body {font-family:var(--mf-body);font-weight:400;font-size:15px;line-height:1.45}
.mf-t-code {font-family:var(--mf-mono);font-weight:500;font-size:12.5px;line-height:1.4;letter-spacing:.02em;font-variant-numeric:tabular-nums}

/* Tons : la couleur dit l'état. Poser .mf-tone-X sur un composant règle
   --mf-tone (le trait) et --mf-on-tone (le texte posé dessus). */
.mf-tone-ok     {--mf-tone:var(--mf-ok);     --mf-on-tone:var(--mf-on-ok)}
.mf-tone-prod   {--mf-tone:var(--mf-prod);   --mf-on-tone:var(--mf-on-prod)}
.mf-tone-regl   {--mf-tone:var(--mf-regl);   --mf-on-tone:var(--mf-on-regl)}
.mf-tone-maint  {--mf-tone:var(--mf-maint);  --mf-on-tone:var(--mf-on-maint)}
.mf-tone-resa   {--mf-tone:var(--mf-resa);   --mf-on-tone:var(--mf-on-resa)}
.mf-tone-panne  {--mf-tone:var(--mf-panne);  --mf-on-tone:var(--mf-on-panne)}
.mf-tone-accent {--mf-tone:var(--mf-accent); --mf-on-tone:var(--mf-on-accent)}
.mf-tone-teal   {--mf-tone:var(--mf-teal);   --mf-on-tone:var(--mf-on-teal)}
.mf-tone-neutral{--mf-tone:var(--mf-neutral);--mf-on-tone:var(--mf-on-neutral)}
/* Ton par défaut de chaque composant, en :where() donc à spécificité NULLE : la
   classe .mf-tone-X posée par le JS gagne toujours, quel que soit l'ordre du fichier. */
:where(.mf-hero,.mf-gauge,.mf-deck){--mf-tone:var(--mf-accent);--mf-on-tone:var(--mf-on-accent)}
:where(.mf-tile,.mf-tl,.mf-plan,.mf-tl-item,.mf-tl-seg,.mf-tl-step,.mf-tl-cell,.mf-plan-m,.mf-wheel-item,.mf-gauge-bar){--mf-tone:var(--mf-neutral);--mf-on-tone:var(--mf-on-neutral)}
.mf-tone-meca   {--mf-tone:var(--mf-cause-meca); --mf-on-tone:var(--mf-on-maint)}
.mf-tone-elec   {--mf-tone:var(--mf-cause-elec); --mf-on-tone:var(--mf-on-regl)}
.mf-tone-soft   {--mf-tone:var(--mf-cause-soft); --mf-on-tone:var(--mf-on-resa)}
.mf-tone-outil  {--mf-tone:var(--mf-cause-outil);--mf-on-tone:var(--mf-on-prod)}

/* Icône trait : hérite de la couleur du texte, jamais d'aplat. */
.mf-ic{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;display:inline-block;vertical-align:-4px}
.mf-ic-s{width:16px;height:16px;vertical-align:-3px}
.mf-ic-l{width:28px;height:28px}
.mf-ic-xl{width:44px;height:44px;stroke-width:1.75}

/* La cible tactile : 48 px, 8 px d'écart (via gap des conteneurs), pressée
   visible en 150 ms. C'est le bouton de base de toute la bibliothèque. */
.mf-tap{min-width:48px;min-height:48px;display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:0 16px;border:1px solid var(--mf-line);border-radius:var(--mf-r-sm);
  background:var(--mf-card2);color:var(--mf-ink);font-family:var(--mf-body);font-weight:600;font-size:15px;line-height:1;
  cursor:pointer;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation;
  text-decoration:none;white-space:nowrap;
  transition:transform var(--mf-t-150) var(--mf-ease),background var(--mf-t-300),border-color var(--mf-t-300),color var(--mf-t-300),box-shadow var(--mf-t-300)}
.mf-tap:hover{border-color:color-mix(in srgb,var(--mf-ink) 22%,transparent)}
.mf-tap:active,.mf-tap.mf-pressed{transform:scale(.96)}
.mf-tap:focus-visible{outline:2px solid var(--mf-accent2);outline-offset:2px}
.mf-tap.mf-primary{background:linear-gradient(180deg,var(--mf-accent2),var(--mf-accent));color:var(--mf-on-accent);border-color:transparent;font-weight:700;box-shadow:0 6px 18px -8px rgba(232,147,12,.6)}
.mf-tap.mf-danger{background:var(--mf-panne);color:var(--mf-on-panne);border-color:transparent;font-weight:700}
.mf-tap.mf-tone{background:var(--mf-tone);color:var(--mf-on-tone);border-color:transparent;font-weight:700}
.mf-tap.mf-ghost{background:transparent}
.mf-tap.mf-icon{padding:0;width:48px}
.mf-tap.mf-round{border-radius:50%}
.mf-tap[disabled],.mf-tap[aria-disabled="true"]{opacity:.45;pointer-events:none}
/* `display:inline-flex` battrait l'attribut hidden : un bouton caché par l'écran (cloche sans
   notifications, bouton réservé au staff) doit vraiment disparaître. */
.mf-tap[hidden]{display:none}
/* Bouton à état (vue « Par zone » / « Kanban », « Organiser ») : enfoncé = cerclé de la marque. */
.mf-tap[aria-pressed="true"]:not(.mf-hero-counter):not(.mf-primary){border-color:var(--mf-accent);background:color-mix(in srgb,var(--mf-accent) 14%,transparent);box-shadow:inset 0 0 0 1px var(--mf-accent)}
.mf-btns{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.mf-btns.mf-end{justify-content:flex-end}
/* Une rangée cachée par l'écran (« Checklist complète → Autonome » tant que tout n'est pas coché)
   doit vraiment disparaître : `display:flex` battrait l'attribut hidden. */
.mf-btns[hidden],.mf-row[hidden],.mf-stack[hidden]{display:none}
/* Pression sur toute surface cliquable (tuile, carte, compteur) — même règle. */
.mf-press{transition:transform var(--mf-t-150) var(--mf-ease);-webkit-tap-highlight-color:transparent;cursor:pointer}
.mf-press:active,.mf-press.mf-pressed{transform:scale(.96)}
/* Appui long : on coupe le menu contextuel du navigateur et la sélection de texte,
   sinon l'appui long ouvre « Copier l'image » au lieu de la roue. */
[data-long],[data-wheel]{-webkit-touch-callout:none;user-select:none;-webkit-user-select:none}

/* Pulse : deux cas seulement — panne bloquante et « en cours ». */
@keyframes mf-pulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--mf-tone) 55%,transparent)}70%{box-shadow:0 0 0 12px transparent}100%{box-shadow:0 0 0 0 transparent}}
@keyframes mf-pulse-svg{0%{opacity:.85;r:9}70%{opacity:0;r:18}100%{opacity:0;r:18}}
@keyframes mf-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes mf-pop{0%{transform:scale(.4);opacity:0}60%{transform:scale(1.08);opacity:1}100%{transform:scale(1)}}
@keyframes mf-draw{to{stroke-dashoffset:0}}
/* « En cours » : l'avatar respire (échelle 1 → 1,06) et la barre d'OF défile — 1,2 s, la
   troisième durée de la charte, rien d'autre. */
@keyframes mf-breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}
@keyframes mf-flow{from{transform:translateX(-100%)}to{transform:translateX(100%)}}
.mf-pulse{animation:mf-pulse var(--mf-t-1200) ease-out infinite}

/* Badge de coin : 12,5 mono, fond du ton. */
.mf-badge{display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:22px;padding:0 7px;border-radius:var(--mf-r-xs);
  background:var(--mf-tone);color:var(--mf-on-tone);font-family:var(--mf-mono);font-size:12.5px;font-weight:500;line-height:1;font-variant-numeric:tabular-nums}
/* Pastille d'état (point 10 px) — toujours accompagnée d'un texte, jamais seule. */
.mf-dot{display:inline-block;width:10px;height:10px;border-radius:50%;background:var(--mf-tone);flex:none;vertical-align:middle}

/* Grille de tuiles : gap 8 px = l'écart tactile minimal. */
.mf-grid{display:grid;gap:8px;grid-template-columns:repeat(auto-fill,minmax(var(--mf-col,128px),1fr))}
.mf-stack{display:flex;flex-direction:column;gap:8px}
.mf-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
/* Deux colonnes qui se replient seules : sur tablette (768) la seconde passe dessous.
   min(100%, 340px) : une colonne ne dépasse jamais la largeur de son conteneur. */
.mf-cols{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(min(100%,var(--mf-colw,340px)),1fr));align-items:start}
/* Dans une grille, la grande carte (panne bloquante, photo en fond) prend toute la rangée :
   ce qui brûle ne se partage pas la ligne avec un stock de gants. */
.mf-cols > .mf-tile-l,.mf-cols > .mf-fold.mf-wide{grid-column:1/-1}
/* Une carte nue : le contenant d'une jauge ou d'une pile, sans autre décoration. */
.mf-card{border-radius:var(--mf-r-md);background:var(--mf-card);border:1px solid var(--mf-line);padding:16px;color:var(--mf-ink);min-width:0}
/* Titre de section d'un écran mf : 20 px + un compte en 12,5 mono à droite. Remplace les
   h2 en capitales espacées quand l'écran est entièrement basculé. */
.mf-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:22px 0 10px;flex-wrap:wrap}
.mf-head h4{margin:0;font-family:var(--mf-disp);font-weight:600;font-size:20px;line-height:1.15;color:var(--mf-ink);display:flex;align-items:baseline;gap:8px}
.mf-head h4 .mf-badge{vertical-align:middle;position:relative;top:-2px}
.mf-head > span,.mf-head .mf-head-n{font-family:var(--mf-mono);font-size:12.5px;font-weight:500;color:var(--mf-ink3)}
.mf-head .mf-btns{margin-left:auto}
/* Ce qui est sain se replie en UNE ligne : « 6 machines sans incident › ». */
.mf-quiet{display:flex;align-items:center;gap:8px;padding:10px 4px;font-family:var(--mf-mono);font-size:12.5px;font-weight:500;color:var(--mf-ink3);letter-spacing:.02em}
.mf-quiet .mf-ic{width:16px;height:16px;color:var(--mf-ok)}
/* Bloc de texte (brief) : corps 15 px, jamais du 13,5. */
.mf-prose{font-family:var(--mf-body);font-size:15px;line-height:1.5;color:var(--mf-ink);white-space:pre-wrap;word-break:break-word}

/* ── 2. mf-hero — Bandeau-héros ─────────────────────────────────────────────
   UN nombre de 48 px + une phrase + 2-3 compteurs qui filtrent. Le liseré de
   4 px porte le ton de la situation (vert = sain, rouge = ça brûle). L'état
   vide est un grand check : « Tout est rangé ». */
/* Flex + wrap plutôt qu'une grille : quand la colonne est étroite (tablette, carte à
   deux colonnes), les compteurs passent SOUS le chiffre au lieu de l'écraser. */
.mf-hero{position:relative;isolation:isolate;
  display:flex;flex-wrap:wrap;gap:16px 24px;align-items:center;
  padding:22px 24px 22px 28px;border-radius:var(--mf-r-md);background:var(--mf-card);border:1px solid var(--mf-line);
  box-shadow:var(--mf-shadow);overflow:hidden;color:var(--mf-ink)}
.mf-hero::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--mf-tone);transition:background var(--mf-t-300)}
.mf-hero::after{content:"";position:absolute;z-index:-1;left:-40px;top:-60px;width:320px;height:220px;pointer-events:none;
  background:radial-gradient(closest-side,color-mix(in srgb,var(--mf-tone) 16%,transparent),transparent);transition:background var(--mf-t-300)}
.mf-hero-main{display:flex;flex-direction:column;gap:6px;min-width:0;flex:1 1 240px}
.mf-hero-n{font-family:var(--mf-disp);font-weight:700;font-size:48px;line-height:1;letter-spacing:.005em;font-variant-numeric:tabular-nums;
  color:var(--mf-ink);display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.mf-hero-n.mf-toned{color:var(--mf-tone)}
.mf-hero-n small{font-family:var(--mf-disp);font-weight:600;font-size:20px;color:var(--mf-ink2);letter-spacing:.01em}
.mf-hero-n .mf-u{font-family:var(--mf-disp);font-weight:600;font-size:20px;color:var(--mf-ink2)}
.mf-hero-p{font-family:var(--mf-disp);font-weight:600;font-size:20px;line-height:1.15;color:var(--mf-ink)}
.mf-hero-sub{font-family:var(--mf-mono);font-size:12.5px;line-height:1.4;color:var(--mf-ink3);letter-spacing:.02em}
.mf-hero-counters{display:flex;gap:8px;flex-wrap:wrap;margin-left:auto;align-self:center;flex:0 1 auto}
.mf-hero-counter{min-width:96px;min-height:56px;padding:8px 14px;flex-direction:column;gap:2px;align-items:flex-start;background:color-mix(in srgb,var(--mf-card2) 70%,transparent)}
.mf-hero-counter b{font-family:var(--mf-disp);font-weight:700;font-size:20px;line-height:1;color:var(--mf-tone);font-variant-numeric:tabular-nums}
/* Le libellé d'un compteur peut passer sur deux lignes quand la colonne est étroite (feuille Menu
   sur téléphone) : il ne chevauche jamais son voisin. */
.mf-hero-counter span{font-family:var(--mf-mono);font-size:12.5px;font-weight:500;color:var(--mf-ink2);line-height:1.2;text-align:left;white-space:normal;max-width:100%;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.mf-hero-counter[aria-pressed="true"]{border-color:var(--mf-tone);background:color-mix(in srgb,var(--mf-tone) 14%,transparent);box-shadow:inset 0 0 0 1px var(--mf-tone)}
.mf-hero-counter.mf-tone-neutral b{color:var(--mf-ink2)}
.mf-hero-actions{flex-basis:100%;display:flex;gap:8px;flex-wrap:wrap}
/* Anneau de charge à gauche du chiffre (« 7/12 = 58 % ») : il se remplit en 1,2 s à l'apparition. */
.mf-hero-gauge{flex:none;align-self:center}
.mf-hero-gauge .mf-gauge{gap:0}
/* Cockpit (chantier 4, Mon poste) : le héros devient l'écran entier quand un run tourne.
   `fill` : le fond prend la couleur de l'état — vert production, ambre réglage, rouge run oublié.
   Le liseré de 4 px reste, le halo grandit : l'opérateur n'a rien à lire, il voit. */
.mf-hero.mf-hero-fill{background:linear-gradient(135deg,color-mix(in srgb,var(--mf-tone) 20%,var(--mf-card)),color-mix(in srgb,var(--mf-tone) 6%,var(--mf-card)));
  border-color:color-mix(in srgb,var(--mf-tone) 45%,transparent);transition:background var(--mf-t-300),border-color var(--mf-t-300)}
.mf-hero.mf-hero-fill::after{width:520px;height:360px;background:radial-gradient(closest-side,color-mix(in srgb,var(--mf-tone) 22%,transparent),transparent)}
/* Chrono vivant en chiffre-héros : chiffres tabulaires, dans la couleur de l'état. */
.mf-hero-n b[data-chrono]{font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:.02em;color:var(--mf-tone)}
/* En clair, l'ambre du réglage sur un fond teinté clair ne tient pas 3:1 même à 48 px : le chrono
   reprend l'encre, le fond et le liseré disent déjà l'état. */
html[data-theme="light"] .mf-hero-n b[data-chrono]{color:var(--mf-ink)}
.mf-hero-p .mf-run-dot{display:inline-block;margin-right:8px;vertical-align:middle;position:relative;top:-1px}
/* `big` : deux gros boutons pleine largeur (« +1 pièce » / « Terminer »), 64 px, texte 20 px. */
.mf-hero-actions.mf-big{gap:12px}
.mf-hero-actions.mf-big .mf-tap{flex:1 1 200px;min-height:64px;font-family:var(--mf-disp);font-weight:700;font-size:20px;letter-spacing:.01em}
.mf-hero-actions.mf-big .mf-tap .mf-ic{width:24px;height:24px}
/* État vide : grand check, phrase, rien d'autre. */
.mf-hero.mf-empty{--mf-tone:var(--mf-ok);--mf-on-tone:var(--mf-on-ok);flex-wrap:nowrap}
.mf-hero.mf-empty .mf-hero-main{flex-basis:0}
.mf-hero-check{flex:none;width:64px;height:64px;border-radius:50%;background:color-mix(in srgb,var(--mf-tone) 18%,transparent);color:var(--mf-tone);
  display:grid;place-items:center;animation:mf-pop var(--mf-t-300) var(--mf-ease) both}
.mf-hero-check .mf-ic{width:36px;height:36px;stroke-width:2.5}
@media (max-width:760px){
  .mf-hero{padding:18px 16px 18px 20px;gap:12px}
  .mf-hero-counters{flex-basis:100%;margin-left:0}
  .mf-hero-counter{flex:1 1 0;min-width:0;padding:8px 10px}
}
/* ── Chantier 5 (fiche machine) : photo en fond, titre, tampon-bouton de statut ──────────
   La photo occupe tout le bandeau, voilée de gauche (94 %, le texte) à droite (40 %, la photo
   respire). Avec `fill`, le voile prend la couleur de l'état : en panne, tout le bandeau vire
   rouge — le pied de machine voit l'état à trois mètres, avant de lire. */
.mf-hero.mf-hero-img{min-height:200px;background-color:var(--mf-card);
  background-image:linear-gradient(90deg,rgba(var(--mf-veil),.94) 0%,rgba(var(--mf-veil),.74) 55%,rgba(var(--mf-veil),.40) 100%),var(--mf-img,none);
  background-size:cover;background-position:center;background-repeat:no-repeat}
.mf-hero.mf-hero-img.mf-hero-fill{
  background-image:linear-gradient(90deg,color-mix(in srgb,var(--mf-tone) 30%,rgb(var(--mf-veil))) 0%,color-mix(in srgb,var(--mf-tone) 16%,rgba(var(--mf-veil),.70)) 55%,color-mix(in srgb,var(--mf-tone) 10%,rgba(var(--mf-veil),.42)) 100%),var(--mf-img,none);
  background-size:cover;background-position:center;background-repeat:no-repeat}
/* En clair, un chiffre-héros teinté (ambre du réglage, vert) sur un fond déjà teinté par `fill` ne
   tient pas 3:1 : il reprend l'encre — le liseré, le voile et le tampon disent déjà l'état. */
html[data-theme="light"] .mf-hero.mf-hero-fill .mf-hero-n.mf-toned{color:var(--mf-ink)}
.mf-hero-title{font-family:var(--mf-disp);font-weight:600;font-size:20px;line-height:1.15;color:var(--mf-ink);letter-spacing:.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
/* Tampon de temps dans le bandeau : « 2 h 15 » en 20 px sur un aplat de la couleur de l'état, le
   nom de l'état dessous. En bouton (data-wheel-btn), c'est LE bouton de statut : 64 px de haut,
   pressé visible, un tap ouvre l'éventail des autres statuts. `late` = cerclé de rouge. */
.mf-hero-stamp{flex:none;align-self:center;display:inline-flex;flex-direction:column;align-items:flex-end;justify-content:center;gap:3px;
  min-width:112px;min-height:64px;padding:8px 14px;border-radius:var(--mf-r-sm);border:1px solid transparent;
  background:var(--mf-tone);color:var(--mf-on-tone);text-align:right;font-family:var(--mf-body);cursor:default;
  transition:background var(--mf-t-300),box-shadow var(--mf-t-300),transform var(--mf-t-150) var(--mf-ease)}
button.mf-hero-stamp{cursor:pointer;-webkit-tap-highlight-color:transparent;line-height:1}
button.mf-hero-stamp:hover{border-color:color-mix(in srgb,var(--mf-on-tone) 35%,transparent)}
.mf-hero-stamp b{display:flex;align-items:center;gap:4px;font-family:var(--mf-disp);font-weight:700;font-size:20px;line-height:1;font-variant-numeric:tabular-nums;letter-spacing:.005em}
.mf-hero-stamp span{font-family:var(--mf-mono);font-size:12.5px;font-weight:500;line-height:1;opacity:.92;white-space:nowrap}
.mf-hero-stamp.mf-late{box-shadow:0 0 0 2px var(--mf-bg2),0 0 0 4px var(--mf-panne)}
.mf-hero-stamp.mf-pulse{animation:mf-pulse var(--mf-t-1200) ease-out infinite}
/* Le tampon pousse les compteurs à la ligne quand la place manque : jamais l'un sur l'autre. */
.mf-hero.mf-has-stamp .mf-hero-counters{margin-left:0}
@media (max-width:760px){.mf-hero-stamp{min-height:56px;padding:6px 12px}}

/* ── Onglets : trois boutons à état, pleine largeur sur tablette ──────────────────────────
   L'onglet courant est cerclé de la marque (règle des .mf-tap[aria-pressed]) ; sa pastille dit
   qu'il y a quelque chose dedans (« 1 » rouge sur Maintenant = une panne est ouverte). */
.mf-tabs{display:flex;gap:8px;flex-wrap:wrap}
.mf-tabs .mf-tab{flex:1 1 140px;max-width:280px;position:relative;gap:8px}
/* Des onglets posés dans un titre de section (la période « 30 j · 90 j · 6 mois · 1 an ») restent
   sur une ligne, à droite, à leur largeur naturelle — pas une pile de boutons pleine largeur. */
.mf-head > .mf-tabs,.mf-head .mf-btns > .mf-tabs{margin-left:auto;flex-wrap:nowrap;width:auto}
.mf-head > .mf-tabs .mf-tab,.mf-head .mf-btns > .mf-tabs .mf-tab{flex:0 0 auto;min-width:64px}
@media (max-width:760px){.mf-tabs .mf-tab{max-width:none}}
.mf-tabs .mf-tab .mf-badge{position:absolute;top:-6px;right:-4px}
.mf-tabs .mf-tab.mf-on{color:var(--mf-ink)}
/* Une pile de lignes hors d'une tuile pliée (le détail d'une journée, ouvert dans une feuille) :
   les mêmes .mf-fold-row — point coloré, texte 15 px, sous-texte 12,5 mono, 48 px de haut. */
.mf-rows{display:flex;flex-direction:column;gap:4px}
.mf-rows .mf-fold-row{padding-left:8px}
.mf-rows .mf-fold-row + .mf-fold-row{border-top:1px solid var(--mf-line2)}

/* ── 3. mf-gauge — Jauge : anneau, barre à seuil, sparkline ─────────────────
   Remplissage 1,2 s à l'apparition (IntersectionObserver côté JS pose .mf-on),
   couleur par seuil, valeur toujours écrite à côté : jamais la couleur seule. */
.mf-gauge{display:inline-flex;flex-direction:column;align-items:center;gap:6px;color:var(--mf-ink);vertical-align:top;max-width:100%}
.mf-gauge-label{font-family:var(--mf-mono);font-size:12.5px;font-weight:500;line-height:1.3;color:var(--mf-ink2);text-align:center;letter-spacing:.02em}
/* anneau */
.mf-gauge-ring{position:relative;width:var(--mf-size,120px);height:var(--mf-size,120px);flex:none}
.mf-gauge-ring svg{width:100%;height:100%;display:block;transform:rotate(-90deg);overflow:visible}
.mf-gauge-ring .mf-g-track{fill:none;stroke:color-mix(in srgb,var(--mf-ink) 9%,transparent);stroke-width:var(--mf-stroke,8)}
.mf-gauge-ring .mf-g-fill{fill:none;stroke:var(--mf-tone);stroke-width:var(--mf-stroke,8);stroke-linecap:round;
  stroke-dasharray:100;stroke-dashoffset:100;
  transition:stroke-dashoffset var(--mf-t-1200) var(--mf-ease),stroke var(--mf-t-300)}
.mf-gauge.mf-on .mf-gauge-ring .mf-g-fill{stroke-dashoffset:var(--mf-off,100)}
.mf-gauge-val{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;text-align:center;padding:12%}
.mf-gauge-val b{font-family:var(--mf-disp);font-weight:700;font-size:20px;line-height:1;font-variant-numeric:tabular-nums;color:var(--mf-ink);letter-spacing:.005em;white-space:nowrap}
.mf-gauge-val small{font-family:var(--mf-mono);font-size:12.5px;font-weight:500;color:var(--mf-ink2);line-height:1.3;margin-top:3px}
.mf-gauge-lg .mf-gauge-val b{font-size:48px}
.mf-gauge-xs .mf-gauge-val b{font-family:var(--mf-mono);font-weight:500;font-size:12.5px}
.mf-gauge-xs .mf-gauge-val small{display:none}
.mf-gauge-ring .mf-g-icon{position:absolute;inset:0;display:grid;place-items:center;color:var(--mf-tone)}
/* barre à seuil (bullet) : libellé · piste · valeur en texte */
.mf-gauge-bar{display:grid;grid-template-columns:minmax(72px,auto) minmax(0,1fr) auto;align-items:center;gap:12px;width:100%;min-width:220px}
.mf-gauge-bar .mf-g-lab{font-family:var(--mf-body);font-size:15px;color:var(--mf-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mf-gauge-bar .mf-g-track{position:relative;height:14px;border-radius:var(--mf-r-xs);background:color-mix(in srgb,var(--mf-ink) 9%,transparent);overflow:visible}
.mf-gauge-bar .mf-g-band{position:absolute;top:0;bottom:0;border-radius:var(--mf-r-xs);background:color-mix(in srgb,var(--mf-band) 18%,transparent)}
.mf-gauge-bar .mf-g-fill{position:absolute;left:0;top:0;bottom:0;width:0;border-radius:var(--mf-r-xs);background:var(--mf-tone);
  transition:width var(--mf-t-1200) var(--mf-ease),background var(--mf-t-300)}
.mf-gauge.mf-on .mf-gauge-bar .mf-g-fill{width:var(--mf-pct,0%)}
/* Le trait de cible/seuil est posé par --mf-mark (chantier 7) : à gauche en horizontal, en bas en vertical. */
.mf-gauge-bar .mf-g-mark{position:absolute;top:-5px;bottom:-5px;left:var(--mf-mark,0);width:3px;margin-left:-1.5px;border-radius:2px;background:var(--mf-ink);opacity:.85}
.mf-gauge-bar .mf-g-val{font-family:var(--mf-mono);font-size:12.5px;font-weight:500;color:var(--mf-ink);font-variant-numeric:tabular-nums;white-space:nowrap;min-width:5ch;text-align:right}
.mf-gauge-bar .mf-g-val i{font-style:normal;color:var(--mf-ink3)}
.mf-gauge.mf-gauge-h{display:flex;flex-direction:column;align-items:stretch;gap:8px;width:100%}
.mf-gauge-rows{display:flex;flex-direction:column;gap:8px;width:100%}
/* verticale (consommables) : tap = −1 côté JS de l'écran, ici la forme */
.mf-gauge.mf-gauge-v{width:auto;display:inline-flex}
.mf-gauge-v .mf-gauge-rows{width:auto}
/* align-items:stretch : sans lui, la piste (vide, ses enfants sont absolus) mesure 0 px de haut. */
.mf-gauge-v .mf-gauge-bar{grid-template-columns:1fr;grid-template-rows:auto 1fr auto;align-items:stretch;justify-items:center;height:140px;min-width:56px;width:56px;text-align:center;gap:6px}
.mf-gauge-v .mf-gauge-bar .mf-g-lab{font-family:var(--mf-mono);font-size:12.5px;color:var(--mf-ink2);max-width:56px}
.mf-gauge-v .mf-gauge-bar .mf-g-track{height:auto;width:100%;border-radius:var(--mf-r-sm)}
.mf-gauge-v .mf-gauge-bar .mf-g-val{text-align:center;min-width:0}
.mf-gauge-v .mf-gauge-bar .mf-g-fill{top:auto;right:0;width:100%;height:0;transition:height var(--mf-t-1200) var(--mf-ease),background var(--mf-t-300)}
.mf-gauge-v.mf-on .mf-gauge-bar .mf-g-fill{height:var(--mf-pct,0%);width:100%}
.mf-gauge-v .mf-gauge-bar .mf-g-mark{left:-4px;right:-4px;top:auto;bottom:var(--mf-mark,0);width:auto;height:3px;margin:0 0 -1.5px}
/* sparkline 12 points */
.mf-gauge-spark{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:10px;width:100%;min-width:160px}
.mf-gauge-spark svg{width:100%;height:48px;display:block;overflow:visible}
.mf-gauge-spark .mf-g-line{fill:none;stroke:var(--mf-tone);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset var(--mf-t-1200) linear}
.mf-gauge-spark .mf-g-area{fill:var(--mf-tone);opacity:0;transition:opacity var(--mf-t-1200)}
.mf-gauge-spark .mf-g-last{fill:var(--mf-tone);stroke:var(--mf-bg2);stroke-width:2}
.mf-gauge.mf-on .mf-gauge-spark .mf-g-line{stroke-dashoffset:0}
.mf-gauge.mf-on .mf-gauge-spark .mf-g-area{opacity:.16}
.mf-gauge-spark .mf-g-val{font-family:var(--mf-disp);font-weight:700;font-size:20px;line-height:1;color:var(--mf-ink);font-variant-numeric:tabular-nums}
.mf-gauge-spark .mf-g-val small{display:block;font-family:var(--mf-mono);font-size:12.5px;font-weight:500;color:var(--mf-ink2);margin-top:3px}

/* ── 4. mf-tile — Tuile d'entité ────────────────────────────────────────────
   L'image avant le texte : photo, initiales colorées ou silhouette SVG.
   Liseré 4 px + anneau d'état, nom 20 px, sous-titre 12,5, badge en coin,
   UNE action primaire de 48 px, appui long = menu. 3 tailles : s 64 / m 96 / l. */
.mf-tile{--mf-init:var(--mf-teal);
  position:relative;display:flex;align-items:center;gap:12px;padding:8px 8px 8px 12px;min-height:80px;
  border-radius:var(--mf-r-md);background:var(--mf-card);border:1px solid var(--mf-line);color:var(--mf-ink);
  text-align:left;font-family:var(--mf-body);overflow:hidden;
  transition:transform var(--mf-t-150) var(--mf-ease),border-color var(--mf-t-300),box-shadow var(--mf-t-300)}
.mf-tile::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--mf-tone);transition:background var(--mf-t-300)}
.mf-tile[data-act]{cursor:pointer}
.mf-tile[data-act]:active,.mf-tile.mf-pressed{transform:scale(.97)}
.mf-tile:focus-visible{outline:2px solid var(--mf-accent2);outline-offset:2px}
.mf-tile.mf-sel{border-color:var(--mf-accent);box-shadow:var(--mf-glow)}
.mf-tile.mf-blocking .mf-tile-media{animation:mf-pulse var(--mf-t-1200) ease-out infinite}
.mf-tile-media{position:relative;flex:none;width:64px;height:64px;border-radius:var(--mf-r-sm);overflow:visible;
  background:var(--mf-card2);box-shadow:0 0 0 3px var(--mf-tone);transition:box-shadow var(--mf-t-300)}
.mf-tile-media img,.mf-tile-media .mf-init,.mf-tile-media .mf-sil{position:absolute;inset:0;width:100%;height:100%;border-radius:inherit;object-fit:cover;display:grid;place-items:center}
.mf-tile-media .mf-init{background:color-mix(in srgb,var(--mf-init) 82%,var(--mf-bg));color:#0b0f16;font-family:var(--mf-disp);font-weight:700;font-size:20px;letter-spacing:.02em}
.mf-tile-media .mf-sil{color:var(--mf-ink2);background:linear-gradient(160deg,color-mix(in srgb,var(--mf-ink) 10%,var(--mf-card2)),var(--mf-card2))}
.mf-tile-media .mf-sil svg{width:76%;height:76%;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.mf-tile-media .mf-sil .mf-sil-t{position:absolute;bottom:3px;right:5px;font-family:var(--mf-mono);font-size:12.5px;color:var(--mf-ink);font-weight:500}
.mf-tile-media.mf-person,.mf-tile-media.mf-person img,.mf-tile-media.mf-person .mf-init{border-radius:50%}
/* Chiffre à la place de l'image : le nombre porte la couleur de l'état, sur un voile de ce ton. */
.mf-tile-media .mf-txt{background:color-mix(in srgb,var(--mf-tone) 16%,var(--mf-card2));color:var(--mf-tone);font-family:var(--mf-disp);font-weight:700;font-size:20px;letter-spacing:.005em;font-variant-numeric:tabular-nums}
/* Icône trait à la place de l'image : dans la couleur de l'état, comme un pictogramme de panneau. */
.mf-tile-media .mf-ico{color:var(--mf-tone);background:color-mix(in srgb,var(--mf-tone) 12%,var(--mf-card2))}
.mf-tile-media .mf-ico svg{width:56%;height:56%;stroke-width:1.8}
/* anneau de progression autour du média */
/* Liseré de progression. Il épouse la forme de la case : rectangle arrondi pour une machine,
   une pièce, un document ; cercle pour un visage (la case est ronde). Un cercle autour d'un carré
   coupait les quatre coins — c'est ce qu'on voyait à l'écran. */
.mf-tile-ring{position:absolute;inset:-6px;width:calc(100% + 12px);height:calc(100% + 12px);pointer-events:none;overflow:visible}
.mf-tile-ring circle,.mf-tile-ring rect{fill:none;stroke-width:3;vector-effect:non-scaling-stroke}
.mf-tile-ring circle{transform:rotate(-90deg);transform-origin:50% 50%}
.mf-tile-ring .mf-g-track{stroke:color-mix(in srgb,var(--mf-ink) 10%,transparent)}
.mf-tile-ring .mf-g-fill{stroke:var(--mf-tone);stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:var(--mf-off,100);transition:stroke-dashoffset var(--mf-t-1200) var(--mf-ease)}
.mf-tile-body{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:2px}
.mf-tile-name{font-family:var(--mf-disp);font-weight:600;font-size:20px;line-height:1.1;color:var(--mf-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mf-tile-sub{font-family:var(--mf-mono);font-size:12.5px;font-weight:500;line-height:1.35;color:var(--mf-ink2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Une ligne d'état, jamais un paragraphe : ellipse ; la tuile « wrap » (grande carte) la laisse respirer. */
.mf-tile-state{display:flex;align-items:center;gap:6px;max-width:100%;font-family:var(--mf-mono);font-size:12.5px;font-weight:500;color:var(--mf-tone);line-height:1.3;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mf-tile-state .mf-dot{flex:none}
.mf-tile.mf-wrap .mf-tile-state{white-space:normal;overflow:visible;align-items:flex-start}
.mf-tile.mf-wrap .mf-tile-state .mf-dot{margin-top:3px}
.mf-tile-meta{display:flex;gap:10px;flex-wrap:wrap;font-family:var(--mf-mono);font-size:12.5px;color:var(--mf-ink3);margin-top:2px}
.mf-tile-meta span{display:inline-flex;align-items:center;gap:4px}
.mf-tile-badge{position:absolute;top:6px;right:6px;z-index:2}
.mf-tile-lock{position:absolute;left:-4px;top:-4px;width:22px;height:22px;border-radius:50%;background:var(--mf-bg2);color:var(--mf-ink2);display:grid;place-items:center;box-shadow:0 0 0 1px var(--mf-line)}
.mf-tile-lock .mf-ic{width:12px;height:12px}
.mf-tile-acts{display:flex;gap:8px;flex:none;align-items:center}
/* Un badge en coin se marcherait dessus avec le nom ou le bouton d'action dans une tuile de
   80 px : le corps descend sous le badge (la tuile grandit un peu, rien ne se chevauche). */
.mf-tile-s.mf-has-badge .mf-tile-body{padding-top:22px}
.mf-tile-s.mf-has-badge .mf-tile-acts{margin-top:22px}
.mf-tile-bar{height:4px;border-radius:2px;background:color-mix(in srgb,var(--mf-ink) 10%,transparent);margin-top:6px;overflow:hidden}
.mf-tile-bar i{display:block;height:100%;width:var(--mf-pct,0%);background:var(--mf-tone);transition:width var(--mf-t-1200) var(--mf-ease)}
/* m : 96 px, colonne, pour les murs (hub, parc, trombinoscope) */
.mf-tile-m{flex-direction:column;align-items:center;text-align:center;padding:14px 8px 10px;gap:10px;min-height:0;min-width:120px}
.mf-tile-m::before{left:0;top:0;bottom:auto;right:0;width:auto;height:4px}
.mf-tile-m .mf-tile-media{width:96px;height:96px}
.mf-tile-m .mf-tile-body{align-items:center;width:100%}
.mf-tile-m .mf-tile-name{max-width:100%;font-size:20px}
/* centré + trop long = coupé des deux côtés ; borné à la tuile, les points de suspension reprennent la main */
.mf-tile-m .mf-tile-sub,.mf-tile-m .mf-tile-state,.mf-tile-m .mf-tile-meta{max-width:100%;justify-content:center}
.mf-tile-m .mf-tile-acts{width:100%;justify-content:center}
.mf-tile-m .mf-tile-acts .mf-tap{flex:1 1 auto}
/* Un « ⋯ » seul sous un visage (carte apprenti de Compétences) reste un carré de 48 px, centré :
   étiré sur toute la largeur, il se lirait comme l'action principale — et c'est le tap sur la carte. */
.mf-tile-m .mf-tile-acts .mf-tap.mf-icon:only-child{flex:0 0 48px}
/* l : carte large, photo en fond, nom SUR l'image. Voile 45 % → 93 % du haut
   vers le bas : la photo respire en haut, le texte reste lisible en bas. */
.mf-tile-l{min-height:188px;align-items:flex-end;padding:14px 14px 12px 18px;
  background-image:linear-gradient(180deg,rgba(var(--mf-veil),.45) 0%,rgba(var(--mf-veil),.93) 100%),var(--mf-img,none);
  background-size:cover;background-position:center;background-color:var(--mf-card)}
/* Sans photo, la grande carte bloquante ne reste pas un rectangle vide : un voile de son ton
   (rouge) sous le nom — la couleur dit l'état, avant même de lire. */
.mf-tile-l.mf-blocking{background-color:color-mix(in srgb,var(--mf-tone) 12%,var(--mf-card))}
/* Sans photo : plus de silhouette géante en filigrane derrière les mots (elle gênait la lecture).
   À la place, un fond d'atelier : la trame technique du papier millimétré, un halo dans la
   couleur de l'état en haut à droite, et le voile habituel pour que le texte reste net. */
.mf-tile-l.mf-cyber{
  background-image:
    linear-gradient(180deg,rgba(var(--mf-veil),.28) 0%,rgba(var(--mf-veil),.86) 70%,rgba(var(--mf-veil),.95) 100%),
    radial-gradient(130% 95% at 100% 0%,color-mix(in srgb,var(--mf-tone) 32%,transparent) 0%,transparent 60%),
    repeating-linear-gradient(90deg,color-mix(in srgb,var(--mf-ink) 7%,transparent) 0 1px,transparent 1px 22px),
    repeating-linear-gradient(0deg,color-mix(in srgb,var(--mf-ink) 7%,transparent) 0 1px,transparent 1px 22px),
    linear-gradient(158deg,color-mix(in srgb,var(--mf-tone) 9%,var(--mf-card2)) 0%,var(--mf-card) 100%);
  background-size:cover,cover,22px 22px,22px 22px,cover;
  background-position:center,center,left top,left top,center;
  background-repeat:no-repeat,no-repeat,repeat,repeat,no-repeat}
.mf-tile-l .mf-tile-media{position:absolute;top:12px;left:16px;width:48px;height:48px}
.mf-tile-l .mf-tile-badge{top:12px;right:12px}
.mf-tile-l .mf-tile-body{padding-top:56px}
.mf-tile-l .mf-tile-name{font-size:20px;white-space:normal}
.mf-tile-l .mf-tile-acts{align-self:flex-end}
/* Tampon de temps (grande carte) : le temps passé dans l'état en 20 px, dans la couleur de l'état,
   l'état en 12,5 dessous. Seuil dépassé (`late`) : cerclé de rouge — le fond garde sa couleur,
   parce que la couleur dit l'état et rien d'autre. */
.mf-tile-stamp{position:absolute;top:12px;right:12px;z-index:2;display:flex;flex-direction:column;align-items:flex-end;gap:2px;padding:6px 10px;
  border-radius:var(--mf-r-sm);background:var(--mf-tone);color:var(--mf-on-tone);transition:background var(--mf-t-300),box-shadow var(--mf-t-300)}
.mf-tile-stamp b{display:flex;align-items:center;gap:4px;font-family:var(--mf-disp);font-weight:700;font-size:20px;line-height:1;font-variant-numeric:tabular-nums;letter-spacing:.005em}
.mf-tile-stamp span{font-family:var(--mf-mono);font-size:12.5px;font-weight:500;line-height:1;opacity:.92;white-space:nowrap}
.mf-tile-stamp.mf-late{box-shadow:0 0 0 2px var(--mf-bg2),0 0 0 4px var(--mf-panne)}
/* Une tuile qu'on peut glisser à la souris (mode Organiser) le montre. */
.mf-tile[draggable="true"]{cursor:grab}
.mf-tile[draggable="true"]:active{cursor:grabbing}
/* Tuile vivante : un run est ouvert. L'avatar respire, un reflet défile sur la barre d'OF. */
.mf-tile.mf-live .mf-tile-media{animation:mf-breathe var(--mf-t-1200) ease-in-out infinite}
.mf-tile.mf-live .mf-tile-bar i{position:relative;overflow:hidden}
.mf-tile.mf-live .mf-tile-bar i::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.5),transparent);animation:mf-flow var(--mf-t-1200) linear infinite}
/* Chaleur (petite carte) : le fond se remplit de gauche à droite avec le temps passé dans l'état.
   Le temps se dessine : on ne lit pas « depuis 3 h 40 », on voit une carte aux trois quarts pleine. */
.mf-tile-s.mf-heat,.mf-tile-m.mf-heat{background-image:linear-gradient(90deg,color-mix(in srgb,var(--mf-tone) 22%,transparent) calc(var(--mf-heat,0)*100%),transparent 0);transition:background var(--mf-t-1200) var(--mf-ease)}
/* état absent / à évaluer : la tuile se grise, le liseré reste */
.mf-tile.mf-dim .mf-tile-media,.mf-tile.mf-dim .mf-tile-name{opacity:.55}
.mf-tile-l.mf-dim{opacity:.45}
/* nom sur plusieurs lignes (texte d'une annonce) : on lève l'ellipse, rien d'autre ne change */
.mf-tile.mf-wrap .mf-tile-name,.mf-tile.mf-wrap .mf-tile-sub{white-space:normal;overflow:visible;text-overflow:clip}
/* emplacement libre sous les métadonnées (avatars empilés, petite jauge) */
.mf-tile-html{margin-top:8px;display:flex;align-items:center;gap:8px;flex-wrap:wrap;min-width:0}
.mf-tile-html > .mf-tl{flex:1 1 100%;min-width:0;width:100%}
/* Pied de carte pleine largeur (`foot`) : la gamme en frise d'un ordre passe SOUS la rangée
   média · corps · actions et défile au doigt si elle est longue — la carte ne s'élargit jamais.
   La rangée du haut s'aligne en haut : la pièce et le bouton restent à côté du nom. */
.mf-tile.mf-has-foot{flex-wrap:wrap;align-items:flex-start;padding-top:12px}
.mf-tile.mf-has-foot > .mf-tile-acts{margin-top:4px}
.mf-tile-foot{flex:1 1 100%;min-width:0;width:100%;margin-top:4px;padding-top:8px;border-top:1px solid var(--mf-line2)}
.mf-tile-foot > .mf-tl{min-width:0;width:100%}
.mf-tile-foot .mf-tl-steps,.mf-tile-html .mf-tl-steps{padding:2px 0 4px}
.mf-tile-foot .mf-tl-step,.mf-tile-html .mf-tl-step{min-width:108px;padding:0 4px}
.mf-tile-foot .mf-tl-step b,.mf-tile-html .mf-tl-step b{font-size:15px;font-family:var(--mf-body);font-weight:600;max-width:124px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Boutons secondaires (chantier 5 : « − / + / Commander » d'une pièce, « Diagnostic / Gérer » d'une
   panne) : la petite carte s'autorise à passer à la ligne — le corps garde au moins 150 px, la
   rangée d'actions glisse dessous, alignée à droite, quand la colonne est étroite. */
.mf-tile-s.mf-has-acts{flex-wrap:wrap;row-gap:8px}
.mf-tile-s.mf-has-acts .mf-tile-body{flex:1 1 150px}
.mf-tile-s.mf-has-acts .mf-tile-acts{margin-left:auto;flex-wrap:wrap;justify-content:flex-end}
/* chevron d'une tuile pliée : tourne quand le détail est ouvert */
.mf-tile-chev{display:grid;place-items:center;width:48px;height:48px;color:var(--mf-ink3);flex:none;transition:transform var(--mf-t-300) var(--mf-ease)}
/* tuile pliée : la carte est le résumé, le détail s'ouvre dessous au tap */
.mf-fold{border-radius:var(--mf-r-md);min-width:0}
.mf-fold-sum{list-style:none;cursor:pointer;-webkit-tap-highlight-color:transparent;border-radius:var(--mf-r-md)}
.mf-fold-sum::-webkit-details-marker{display:none}
.mf-fold-sum::marker{content:""}
.mf-fold-sum:focus-visible{outline:2px solid var(--mf-accent2);outline-offset:2px}
.mf-fold-sum:active .mf-tile{transform:scale(.985)}
.mf-fold[open] .mf-tile-chev{transform:rotate(180deg)}
.mf-fold[open] .mf-fold-sum .mf-tile{border-bottom-left-radius:0;border-bottom-right-radius:0}
.mf-fold-body{border:1px solid var(--mf-line);border-top:0;border-radius:0 0 var(--mf-r-md) var(--mf-r-md);background:color-mix(in srgb,var(--mf-card) 60%,transparent);padding:4px 8px 8px 12px;display:flex;flex-direction:column;gap:4px;animation:mf-in var(--mf-t-300) var(--mf-ease) both}
.mf-fold-row{display:flex;align-items:center;gap:12px;min-height:48px;padding:6px 4px 6px 0;border-radius:var(--mf-r-sm);color:var(--mf-ink)}
.mf-fold-row[data-act]{cursor:pointer;transition:transform var(--mf-t-150) var(--mf-ease),background var(--mf-t-300)}
.mf-fold-row[data-act]:hover{background:color-mix(in srgb,var(--mf-ink) 5%,transparent)}
.mf-fold-row[data-act]:active,.mf-fold-row.mf-pressed{transform:scale(.985)}
.mf-fold-row:focus-visible{outline:2px solid var(--mf-accent2);outline-offset:-2px}
.mf-fold-txt{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:2px}
.mf-fold-txt b{font-family:var(--mf-body);font-weight:600;font-size:15px;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mf-fold-txt span{font-family:var(--mf-mono);font-size:12.5px;color:var(--mf-ink2);line-height:1.35;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mf-fold-row .mf-tap{flex:none}
.mf-fold-more{min-height:48px;display:flex;align-items:center;justify-content:center;font-family:var(--mf-mono);font-size:12.5px;font-weight:500;color:var(--mf-accent);cursor:pointer;border-radius:var(--mf-r-sm);transition:transform var(--mf-t-150) var(--mf-ease)}
.mf-fold-more:active,.mf-fold-more.mf-pressed{transform:scale(.985)}
/* avatars empilés (classe, habilités) */
.mf-avs{display:inline-flex;align-items:center}
.mf-avs .mf-av{margin-left:-8px}
.mf-avs .mf-av:first-child{margin-left:0}
.mf-av{--mf-init:var(--mf-teal);width:32px;height:32px;border-radius:50%;flex:none;overflow:hidden;background:color-mix(in srgb,var(--mf-init) 82%,var(--mf-bg));
  color:#0b0f16;font-family:var(--mf-disp);font-weight:700;font-size:12.5px;display:inline-grid;place-items:center;box-shadow:0 0 0 2px var(--mf-bg2),0 0 0 4px var(--mf-tone,transparent)}
.mf-av img{width:100%;height:100%;object-fit:cover;display:block}
.mf-av.mf-av-more{background:var(--mf-card2);color:var(--mf-ink2);font-family:var(--mf-mono);font-weight:500}

/* ── 5. mf-timeline — Frise ────────────────────────────────────────────────
   Le temps se dessine : journée (06→18 segmentée), horizon (auj. → +90),
   semaine (colonnes), étapes (stepper). Curseur « maintenant », défilement
   natif au doigt, tap = fiche. */
/* min-width:0 : posée dans une grille, la frise ne doit pas imposer sa largeur de
   contenu (640 px) à la colonne — c'est le conteneur .mf-tl-scroll qui défile. */
.mf-tl{position:relative;color:var(--mf-ink);font-family:var(--mf-body);min-width:0;max-width:100%}
.mf-tl-scroll{overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;scrollbar-width:thin;scroll-snap-type:x proximity;padding-bottom:4px}
.mf-tl-title{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:8px}
.mf-tl-title h4{margin:0;font-family:var(--mf-disp);font-weight:600;font-size:20px;line-height:1.15}
.mf-tl-title span{font-family:var(--mf-mono);font-size:12.5px;color:var(--mf-ink3)}
.mf-tl-tick{position:absolute;top:0;transform:translateX(-50%);font-family:var(--mf-mono);font-size:12.5px;font-weight:500;color:var(--mf-ink3);line-height:1;white-space:nowrap}
.mf-tl-tick::after{content:"";position:absolute;left:50%;top:16px;width:1px;height:var(--mf-tick-h,52px);background:var(--mf-line)}
.mf-tl-tick.mf-major{color:var(--mf-ink2)}
.mf-tl-now{position:absolute;top:0;bottom:0;width:2px;margin-left:-1px;background:var(--mf-panne);z-index:3;pointer-events:none}
.mf-tl-now::before{content:"";position:absolute;top:-1px;left:-5px;width:12px;height:12px;border-radius:50%;background:var(--mf-panne);box-shadow:0 0 0 3px color-mix(in srgb,var(--mf-panne) 30%,transparent)}
.mf-tl-now span{position:absolute;top:-2px;left:10px;font-family:var(--mf-mono);font-size:12.5px;color:var(--mf-panne);white-space:nowrap;line-height:1}
/* journée */
/* 22 px de marge de chaque côté : les heures « 06:00 » et « 18:00 », centrées sur leur trait,
   ne débordent plus du conteneur (ce débordement faisait apparaître une barre de défilement
   même quand la frise tenait dans la colonne). Les enfants absolus se calent sur le padding. */
.mf-tl-day{position:relative;min-width:640px;height:76px;padding:0 22px}
.mf-tl-day-in{position:relative;height:100%;padding-top:22px}
.mf-tl-day .mf-tl-track{position:absolute;left:0;right:0;top:26px;height:40px;border-radius:var(--mf-r-xs);background:color-mix(in srgb,var(--mf-ink) 6%,transparent);overflow:hidden}
.mf-tl-seg{position:absolute;top:0;bottom:0;min-width:3px;border-radius:var(--mf-r-xs);background:var(--mf-tone);color:var(--mf-on-tone);
  display:flex;align-items:center;padding:0 8px;overflow:hidden;white-space:nowrap;font-family:var(--mf-mono);font-size:12.5px;font-weight:500;cursor:pointer;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.15);transition:filter var(--mf-t-150)}
.mf-tl-seg:hover{filter:brightness(1.1)}
.mf-tl-seg.mf-hatch{background-image:repeating-linear-gradient(135deg,transparent 0 6px,rgba(0,0,0,.18) 6px 8px)}
.mf-tl-seg.mf-late{outline:2px solid var(--mf-panne);outline-offset:-2px}
.mf-tl-day .mf-tl-future{position:absolute;top:0;bottom:0;right:0;background:repeating-linear-gradient(90deg,transparent 0 6px,color-mix(in srgb,var(--mf-ink) 5%,transparent) 6px 7px);pointer-events:none}
/* horizon : passé en retard | 0→7 | 7→30 | 30→90 (échelle non linéaire, l'urgence prend la place) */
.mf-tl-hz{position:relative;min-width:640px;height:118px;padding-top:22px}
.mf-tl-hz .mf-tl-line{position:absolute;left:0;right:0;top:48px;height:2px;background:var(--mf-line)}
.mf-tl-hz .mf-tl-late{position:absolute;left:0;top:38px;height:22px;border-radius:var(--mf-r-xs);background:color-mix(in srgb,var(--mf-panne) 14%,transparent)}
.mf-tl-hz .mf-tl-late span{position:absolute;left:8px;top:4px;font-family:var(--mf-mono);font-size:12.5px;color:var(--mf-panne)}
.mf-tl-hz .mf-tl-tick::after{top:16px;height:22px}
.mf-tl-item{position:absolute;top:49px;transform:translate(-50%,-50%);width:48px;height:48px;display:grid;place-items:center;cursor:pointer;background:none;border:0;padding:0;color:inherit}
.mf-tl-item i{display:block;width:16px;height:16px;border-radius:50%;background:var(--mf-tone);box-shadow:0 0 0 3px var(--mf-bg2),0 0 0 4px color-mix(in srgb,var(--mf-tone) 40%,transparent);transition:transform var(--mf-t-150)}
.mf-tl-item:active i,.mf-tl-item.mf-pressed i{transform:scale(.85)}
.mf-tl-item.mf-late i{animation:mf-pulse var(--mf-t-1200) ease-out infinite}
.mf-tl-item span{position:absolute;top:calc(50% + 14px + var(--mf-lane,0)*18px);left:50%;transform:translateX(-50%);
  font-family:var(--mf-mono);font-size:12.5px;font-weight:500;color:var(--mf-ink2);white-space:nowrap;line-height:1;max-width:176px;overflow:hidden;text-overflow:ellipsis;
  padding:2px 4px;border-radius:var(--mf-r-xs);background:color-mix(in srgb,var(--mf-bg2) 85%,transparent)}
.mf-tl-item.mf-late span{color:var(--mf-panne)}
/* Un GROUPE d'échéances tombées au même endroit : la pastille grossit et porte le compte, au
   lieu de trente points empilés. `mute` : aucun couloir libre à moins de 18 % — on garde le
   point, on retire l'étiquette (l'infobulle liste les six premières). */
.mf-tl-item.mf-tl-many i{width:26px;height:26px;display:grid;place-items:center;
  font-family:var(--mf-disp);font-weight:700;font-size:13px;line-height:1;color:var(--mf-on-tone);font-variant-numeric:tabular-nums}
.mf-tl-item.mf-tl-many.mf-late i{animation:none}   /* un compte ne clignote pas : il se lit */
.mf-tl-item.mf-tl-mute span{display:none}
.mf-tl-item.mf-tl-l0 span{left:2px;transform:none}
.mf-tl-item.mf-tl-r0 span{left:auto;right:-14px;transform:none}
/* semaine : colonnes Lun→Ven, avatars empilés, aujourd'hui souligné */
.mf-tl-week{display:grid;grid-template-columns:repeat(var(--mf-cols,5),minmax(124px,1fr));gap:8px;min-width:max-content}
.mf-tl-col{position:relative;border-radius:var(--mf-r-sm);background:var(--mf-card);border:1px solid var(--mf-line);padding:10px 10px 12px;min-height:128px;display:flex;flex-direction:column;gap:8px}
.mf-tl-col.mf-today{border-color:var(--mf-accent);box-shadow:inset 0 3px 0 var(--mf-accent)}
.mf-tl-col.mf-past{opacity:.7}
.mf-tl-col h5{margin:0;font-family:var(--mf-disp);font-weight:600;font-size:20px;line-height:1.1}
.mf-tl-col h5 small{display:block;font-family:var(--mf-mono);font-size:12.5px;font-weight:500;color:var(--mf-ink3);margin-top:2px}
.mf-tl-col .mf-tl-cell{display:flex;align-items:center;gap:8px;min-height:40px;padding:4px 6px;border-radius:var(--mf-r-xs);background:color-mix(in srgb,var(--mf-tone) 12%,transparent);cursor:pointer;font-family:var(--mf-mono);font-size:12.5px;color:var(--mf-ink)}
.mf-tl-col .mf-tl-cell b{font-family:var(--mf-body);font-weight:600;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mf-tl-col .mf-tl-empty{font-family:var(--mf-mono);font-size:12.5px;color:var(--mf-ink3)}
/* étapes : stepper 1→N (gamme, chaîne, versions, incident) */
.mf-tl-steps{display:flex;min-width:max-content;padding:4px 0 8px}
.mf-tl-step{position:relative;display:flex;flex-direction:column;align-items:center;gap:8px;min-width:112px;padding:0 8px;text-align:center;cursor:pointer;background:none;border:0;color:inherit;font-family:var(--mf-body)}
.mf-tl-step::before{content:"";position:absolute;left:50%;right:-50%;top:19px;height:2px;background:var(--mf-line);z-index:0}
.mf-tl-step:last-child::before{display:none}
.mf-tl-step.mf-done::before{background:var(--mf-tone)}
.mf-tl-step-dot{position:relative;z-index:1;width:40px;height:40px;border-radius:50%;background:var(--mf-card2);border:2px solid var(--mf-tone);color:var(--mf-tone);display:grid;place-items:center;
  font-family:var(--mf-mono);font-size:12.5px;font-weight:500;transition:background var(--mf-t-300),color var(--mf-t-300),transform var(--mf-t-150) var(--mf-ease)}
.mf-tl-step.mf-done .mf-tl-step-dot{background:var(--mf-tone);color:var(--mf-on-tone)}
.mf-tl-step.mf-doing .mf-tl-step-dot{background:color-mix(in srgb,var(--mf-tone) 20%,var(--mf-card2));animation:mf-pulse var(--mf-t-1200) ease-out infinite}
.mf-tl-step b{font-family:var(--mf-disp);font-weight:600;font-size:20px;line-height:1.1;max-width:140px}
.mf-tl-step span{font-family:var(--mf-mono);font-size:12.5px;color:var(--mf-ink2);line-height:1.3}
/* Pressée : la pastille se tasse (150 ms), comme tout ce qui se touche. */
.mf-tl-step:active .mf-tl-step-dot,.mf-tl-step.mf-pressed .mf-tl-step-dot{transform:scale(.92)}
.mf-tl-step:focus-visible{outline:2px solid var(--mf-accent2);outline-offset:2px;border-radius:var(--mf-r-sm)}
/* `big` : la pastille à toucher (l'opération à faire sur MA machine) — 48 px par échelle, pour que
   le fil reste aligné sur les voisines ; un halo dans sa couleur. */
.mf-tl-step.mf-big .mf-tl-step-dot{transform:scale(1.2);border-width:3px;box-shadow:0 0 0 4px color-mix(in srgb,var(--mf-tone) 22%,transparent);font-size:15px;font-family:var(--mf-disp);font-weight:700}
.mf-tl-step.mf-big:active .mf-tl-step-dot,.mf-tl-step.mf-big.mf-pressed .mf-tl-step-dot{transform:scale(1.1)}
.mf-tl-step.mf-big b{font-weight:700}
/* `disabled` : machine en panne ou consignée — cadenas sur la pastille, étape grisée mais lisible. */
.mf-tl-step[aria-disabled="true"]{opacity:.55;cursor:not-allowed}
.mf-tl-step[aria-disabled="true"] .mf-tl-step-dot{border-style:dashed}
.mf-tl-step-lock{position:absolute;top:-6px;right:-8px;width:20px;height:20px;border-radius:50%;background:var(--mf-bg2);color:var(--mf-panne);display:grid;place-items:center;box-shadow:0 0 0 1px var(--mf-line);z-index:2}
.mf-tl-step-lock .mf-ic{width:11px;height:11px;stroke-width:2.5}
/* Bloc « en cours » du ruban de la journée : reflet qui défile (1,2 s), le bord droit avance. */
.mf-tl-seg.mf-live::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent);animation:mf-flow var(--mf-t-1200) linear infinite;pointer-events:none}
.mf-tl-seg:focus-visible{outline:2px solid var(--mf-accent2);outline-offset:-2px}

/* ── 6. mf-plan — Mini-plan d'atelier SVG ──────────────────────────────────
   Zones + machines en points (mini) ou en tuiles d'état (carte / plein).
   Le plein est éditable : glisser une machine, la déposer dans une zone. */
.mf-plan{position:relative;border-radius:var(--mf-r-md);background:var(--mf-card);border:1px solid var(--mf-line);overflow:hidden;color:var(--mf-ink);font-family:var(--mf-body)}
/* Enfant DIRECT seulement : le plan « tuiles » contient des icônes et des anneaux SVG qui ont
   leurs propres dimensions — cette règle ne doit pas les aplatir. */
.mf-plan > svg{display:block;max-width:100%;height:auto;margin:0 auto;font-family:var(--mf-mono)}
.mf-plan-mini{width:96px;height:64px;border-radius:var(--mf-r-sm)}
.mf-plan-mini > svg{height:100%}
.mf-plan-zone rect{fill:color-mix(in srgb,var(--mf-ink) 4%,transparent);stroke:var(--mf-line);stroke-width:1;rx:8}
.mf-plan-zone text{fill:var(--mf-ink3);font-size:12.5px;font-weight:500;letter-spacing:.08em;text-transform:uppercase}
.mf-plan-zone.mf-drop rect{stroke:var(--mf-accent);stroke-width:2;fill:color-mix(in srgb,var(--mf-accent) 10%,transparent)}
.mf-plan-m{cursor:pointer;-webkit-tap-highlight-color:transparent}
.mf-plan-m rect{fill:var(--mf-card2);stroke:var(--mf-tone);stroke-width:2;rx:8;transition:stroke-width var(--mf-t-150),filter var(--mf-t-300)}
.mf-plan-m .mf-plan-code{fill:var(--mf-ink);font-size:12.5px;font-weight:500}
.mf-plan-m .mf-plan-name{fill:var(--mf-ink2);font-size:12.5px}
.mf-plan-m .mf-plan-dot{fill:var(--mf-tone)}
.mf-plan-m .mf-plan-halo{fill:var(--mf-tone);opacity:0}
.mf-plan-m.mf-blocking .mf-plan-halo{animation:mf-pulse-svg var(--mf-t-1200) ease-out infinite}
.mf-plan-m .mf-plan-av{fill:var(--mf-teal)}
.mf-plan-m .mf-plan-av-t{fill:#0b0f16;font-size:12.5px;font-weight:700;font-family:var(--mf-disp)}
.mf-plan-m:hover rect{filter:brightness(1.12)}
.mf-plan-m.mf-sel rect{stroke-width:3;filter:drop-shadow(0 0 8px var(--mf-tone))}
.mf-plan-m.mf-drag{cursor:grabbing}
.mf-plan-m.mf-drag rect{filter:drop-shadow(0 10px 12px rgba(0,0,0,.45))}
.mf-plan-full{touch-action:none;user-select:none}
.mf-plan-legend{display:flex;gap:12px;flex-wrap:wrap;padding:8px 12px;border-top:1px solid var(--mf-line);font-family:var(--mf-mono);font-size:12.5px;color:var(--mf-ink2)}
.mf-plan-legend span{display:inline-flex;align-items:center;gap:6px}
/* v1 « tuiles positionnées » : les groupes en blocs dont la largeur suit le poids (flex-grow =
   nombre de machines), qui passent à la ligne seuls sur tablette. Pas de défilement horizontal. */
.mf-plan-tiles{display:flex;flex-wrap:wrap;gap:12px;align-items:stretch;background:none;border:0;border-radius:0;overflow:visible}
/* Base 0 + croissance = poids : la largeur est PROPORTIONNELLE au nombre de machines (avec une base
   de 300 px, la croissance ne partagerait que le reste, et 12 machines pèseraient comme 2). */
.mf-plan-z{position:relative;flex:var(--mf-n,1) 1 0%;min-width:min(100%,300px);display:flex;flex-direction:column;gap:10px;padding:14px 12px 12px;
  border-radius:var(--mf-r-md);background:var(--mf-card);border:1px solid var(--mf-line);overflow:hidden;transition:border-color var(--mf-t-300),box-shadow var(--mf-t-300)}
.mf-plan-z::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:var(--mf-tone);transition:background var(--mf-t-300)}
.mf-plan-zh{display:flex;align-items:baseline;justify-content:space-between;gap:8px 12px;flex-wrap:wrap;min-width:0}
.mf-plan-zh h4{margin:0;font-family:var(--mf-disp);font-weight:600;font-size:20px;line-height:1.15;color:var(--mf-ink);display:flex;align-items:baseline;gap:8px;min-width:0}
.mf-plan-zh h4 .mf-badge{position:relative;top:-2px}
.mf-plan-zh > span{font-family:var(--mf-mono);font-size:12.5px;font-weight:500;color:var(--mf-ink3);letter-spacing:.02em}
/* align-content:start : une zone d'une seule machine garde une tuile de taille normale et du
   « sol » vide dessous — comme sur un plan, pas une tuile étirée sur toute la hauteur. */
/* `container` : les cartes qu'elle contient se réorganisent d'après la largeur de LA COLONNE
   (voir @container mfcol plus bas), pas d'après celle de l'écran — un kanban à sept colonnes sur
   un grand écran a des colonnes aussi étroites qu'un plan sur tablette. */
.mf-plan-zt{display:grid;gap:8px;grid-template-columns:repeat(auto-fill,minmax(min(100%,var(--mf-tw,232px)),1fr));align-content:start;min-height:56px;flex:1;
  container:mfcol / inline-size}
.mf-plan-zempty{min-height:56px;display:flex;align-items:center;justify-content:center;grid-column:1/-1;font-family:var(--mf-mono);font-size:12.5px;color:var(--mf-ink3);border:1px dashed var(--mf-line);border-radius:var(--mf-r-sm)}
/* dépôt (souris) : la zone cible s'allume */
.mf-plan-z.mf-drop{border-color:var(--mf-accent);box-shadow:var(--mf-glow)}
/* par état (kanban) : une colonne par statut ; « panne » à gauche, plus large si non vide ;
   une colonne vide se resserre. Les petites cartes s'empilent en une colonne. */
.mf-plan-kb .mf-plan-z{flex:1 1 0%;min-width:min(100%,300px)}
.mf-plan-kb .mf-plan-z.mf-wide{flex:2 1 0%;min-width:min(100%,400px)}
.mf-plan-kb .mf-plan-z.mf-empty{flex:0 1 auto;min-width:min(100%,176px)}
.mf-plan-kb .mf-plan-zt{grid-template-columns:1fr;align-content:start}
/* Dans une colonne, la petite carte garde son nom lisible : média 48 px, le « ⋯ » reste à 48. */
.mf-plan-kb .mf-tile-s .mf-tile-media{width:48px;height:48px}
.mf-plan-kb .mf-plan-z.mf-wide .mf-plan-zt{grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr))}
@media (max-width:760px){.mf-plan-tiles{gap:8px}.mf-plan-z{padding:12px 8px 8px}}

/* ── Bandeau d'action collant : « 3 machines déplacées — Enregistrer / Annuler » ─────────
   Même place que la barre « Annuler » (sous le pouce, au-dessus de la barre du bas sur tablette). */
.mf-bar{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom,0px));z-index:1040;max-width:calc(100vw - 32px);
  display:flex;align-items:center;gap:12px;padding:6px 6px 6px 18px;border-radius:var(--mf-r-md);overflow:hidden;
  background:var(--mf-bg2);color:var(--mf-ink);border:1px solid var(--mf-line);box-shadow:var(--mf-shadow);
  transform:translate(-50%,140%);transition:transform var(--mf-t-300) var(--mf-ease);font-family:var(--mf-body)}
.mf-bar::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--mf-tone)}
.mf-bar.mf-on{transform:translate(-50%,0)}
.mf-bar-msg{font-size:15px;font-weight:600;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.mf-bar .mf-btns{flex:none;flex-wrap:nowrap}
@media (max-width:760px){.mf-bar{bottom:calc(80px + env(safe-area-inset-bottom,0px));padding-left:14px}.mf-bar .mf-tap{padding:0 12px}}

/* ── 7. mf-deck — Pile de décisions ────────────────────────────────────────
   Une grande carte à la fois, la suivante visible derrière. Glisser à droite
   (oui) / à gauche (non) OU deux boutons de 56 px — jamais le geste seul. */
.mf-deck{position:relative;color:var(--mf-ink);font-family:var(--mf-body)}
.mf-deck-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:10px}
.mf-deck-head h4{margin:0;font-family:var(--mf-disp);font-weight:600;font-size:20px;line-height:1.15}
.mf-deck-count{font-family:var(--mf-mono);font-size:12.5px;font-weight:500;color:var(--mf-ink2);font-variant-numeric:tabular-nums}
.mf-deck-stage{position:relative;height:var(--mf-deck-h,268px);touch-action:pan-y}
/* Fond OPAQUE (bg2 sous card2) : --card2 de la charte est translucide, et les cartes
   du dessous se verraient au travers. z-index décroissant : la carte du dessus est la
   PREMIÈRE du DOM, donc sans z-index ses sœurs suivantes la recouvriraient. */
.mf-deck-card{position:absolute;inset:0;border-radius:var(--mf-r-md);background-color:var(--mf-bg2);background-image:linear-gradient(var(--mf-card2),var(--mf-card2));border:1px solid var(--mf-line);box-shadow:var(--mf-shadow);
  padding:18px 18px 18px 22px;display:flex;flex-direction:column;gap:8px;overflow:hidden;user-select:none;-webkit-user-select:none;
  transform-origin:50% 100%;will-change:transform;z-index:4;
  transition:transform var(--mf-t-300) var(--mf-ease),opacity var(--mf-t-300)}
.mf-deck-card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--mf-tone)}
.mf-deck-card[data-pos="1"]{transform:translateY(12px) scale(.955);opacity:.9;pointer-events:none;z-index:3}
.mf-deck-card[data-pos="2"]{transform:translateY(24px) scale(.91);opacity:.6;pointer-events:none;z-index:2}
.mf-deck-card[data-pos="3"]{transform:translateY(24px) scale(.91);opacity:0;pointer-events:none;z-index:1}
.mf-deck-card.mf-drag{transition:none;cursor:grabbing}
.mf-deck-card.mf-out-r{transform:translateX(130%) rotate(10deg);opacity:0}
.mf-deck-card.mf-out-l{transform:translateX(-130%) rotate(-10deg);opacity:0}
.mf-deck-top{display:flex;align-items:center;gap:12px}
.mf-deck-top .mf-av{width:48px;height:48px;font-size:20px}
.mf-deck-top .mf-tile-media{width:48px;height:48px;box-shadow:none}
.mf-deck-title{font-family:var(--mf-disp);font-weight:600;font-size:20px;line-height:1.1;flex:1;min-width:0}
.mf-deck-sub{font-family:var(--mf-mono);font-size:12.5px;color:var(--mf-ink2);margin-top:2px}
.mf-deck-body{font-family:var(--mf-body);font-size:15px;line-height:1.45;color:var(--mf-ink);flex:1;min-height:0;overflow:hidden}
.mf-deck-meta{display:flex;gap:12px;flex-wrap:wrap;font-family:var(--mf-mono);font-size:12.5px;color:var(--mf-ink3)}
.mf-deck-meta span{display:inline-flex;align-items:center;gap:4px}
.mf-deck-stamp{position:absolute;top:16px;padding:6px 12px;border:3px solid currentColor;border-radius:var(--mf-r-xs);font-family:var(--mf-disp);font-weight:700;font-size:20px;text-transform:uppercase;letter-spacing:.06em;opacity:0;pointer-events:none;background:color-mix(in srgb,var(--mf-bg2) 70%,transparent)}
.mf-deck-stamp.mf-yes{right:16px;color:var(--mf-ok);transform:rotate(8deg)}
.mf-deck-stamp.mf-no{left:16px;color:var(--mf-panne);transform:rotate(-8deg)}
.mf-deck-btns{display:flex;gap:16px;justify-content:center;align-items:center;margin-top:14px}
.mf-deck-btn{width:56px;height:56px;border-radius:50%;padding:0;border:1px solid var(--mf-line);background:var(--mf-card2);color:var(--mf-ink);display:grid;place-items:center;cursor:pointer;
  -webkit-tap-highlight-color:transparent;transition:transform var(--mf-t-150) var(--mf-ease),background var(--mf-t-300)}
.mf-deck-btn .mf-ic{width:26px;height:26px;stroke-width:2.5}
.mf-deck-btn:active,.mf-deck-btn.mf-pressed{transform:scale(.92)}
.mf-deck-btn:focus-visible{outline:2px solid var(--mf-accent2);outline-offset:3px}
.mf-deck-btn.mf-yes{background:var(--mf-ok);color:var(--mf-on-ok);border-color:transparent;box-shadow:0 8px 20px -8px color-mix(in srgb,var(--mf-ok) 70%,transparent)}
.mf-deck-btn.mf-no{background:var(--mf-panne);color:var(--mf-on-panne);border-color:transparent;box-shadow:0 8px 20px -8px color-mix(in srgb,var(--mf-panne) 70%,transparent)}
.mf-deck-btn.mf-later{width:48px;height:48px}
.mf-deck-btn[disabled]{opacity:.35;pointer-events:none}
.mf-deck-empty{position:absolute;inset:0;border-radius:var(--mf-r-md);border:1px dashed var(--mf-line);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;text-align:center;padding:20px;
  --mf-tone:var(--mf-ok)}
.mf-deck-empty .mf-hero-check{width:72px;height:72px}
.mf-deck-empty b{font-family:var(--mf-disp);font-weight:600;font-size:20px}
.mf-deck-empty span{font-family:var(--mf-mono);font-size:12.5px;color:var(--mf-ink2)}
.mf-deck-hint{text-align:center;font-family:var(--mf-mono);font-size:12.5px;color:var(--mf-ink3);margin-top:8px}
/* Geste sûr : barre « Annuler » qui se vide en 4 s. Au-dessus de la barre du bas sur tablette. */
.mf-undo{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom,0px));z-index:1050;max-width:calc(100vw - 32px);
  display:flex;align-items:center;gap:12px;padding:6px 6px 6px 16px;border-radius:var(--mf-r-md);overflow:hidden;
  background:var(--mf-bg2);color:var(--mf-ink);border:1px solid var(--mf-line);box-shadow:var(--mf-shadow);
  transform:translate(-50%,140%);transition:transform var(--mf-t-300) var(--mf-ease)}
.mf-undo.mf-on{transform:translate(-50%,0)}
.mf-undo-msg{font-family:var(--mf-body);font-size:15px;font-weight:600;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mf-undo .mf-tap{color:var(--mf-accent);border-color:transparent}
/* bouton « bascule » (Réglage) : dans son ton, texte posé dessus */
.mf-undo .mf-tap.mf-tone{color:var(--mf-on-tone);background:var(--mf-tone)}
.mf-undo-bar{position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--mf-accent);transform-origin:left center;animation:mf-undo var(--mf-ms,4000ms) linear forwards}
@keyframes mf-undo{from{transform:scaleX(1)}to{transform:scaleX(0)}}
@media (max-width:760px){.mf-undo{bottom:calc(80px + env(safe-area-inset-bottom,0px))}}

/* ── 8. mf-wheel — Roue / feuille de choix ─────────────────────────────────
   Appui long → 6-8 pastilles colorées de 64 px autour du doigt ; sous 760 px
   une feuille du bas en tuiles. Choix interdit = cadenas, jamais caché. */
.mf-wheel-ov{position:fixed;inset:0;z-index:1000;background:rgba(11,15,22,.55);opacity:0;transition:opacity var(--mf-t-300);touch-action:none;
  font-family:var(--mf-body);color:var(--mf-ink)}
html[data-theme="light"] .mf-wheel-ov{background:rgba(23,32,46,.35)}
.mf-wheel-ov.mf-on{opacity:1}
.mf-wheel{position:absolute;width:0;height:0}
.mf-wheel-center{position:absolute;left:-28px;top:-28px;width:56px;height:56px;border-radius:50%;background:var(--mf-bg2);border:1px solid var(--mf-line);display:grid;place-items:center;
  font-family:var(--mf-mono);font-size:12.5px;font-weight:500;color:var(--mf-ink2);text-align:center;line-height:1.1;padding:4px;box-shadow:var(--mf-shadow)}
.mf-wheel-item{position:absolute;left:-32px;top:-32px;width:64px;height:64px;border-radius:50%;border:0;padding:0;cursor:pointer;
  background:var(--mf-tone);color:var(--mf-on-tone);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  font-family:var(--mf-body);font-weight:600;font-size:12.5px;line-height:1;letter-spacing:.01em;
  box-shadow:0 10px 24px -8px rgba(0,0,0,.6);opacity:0;transform:translate(0,0) scale(.3);-webkit-tap-highlight-color:transparent;
  transition:transform var(--mf-t-300) cubic-bezier(.2,.9,.3,1.15),opacity var(--mf-t-300),box-shadow var(--mf-t-150)}
.mf-wheel-item .mf-ic{width:26px;height:26px;stroke-width:2.25}
/* Dans la roue, le libellé ne tient pas dans 64 px (« Disponible », « Maintenance ») :
   il se pose SOUS la pastille, en étiquette — l'icône reste seule dans le rond. */
.mf-wheel .mf-wheel-item span{position:absolute;top:calc(100% + 4px);left:50%;transform:translateX(-50%);max-width:120px;padding:3px 8px;border-radius:var(--mf-r-xs);
  background:var(--mf-bg2);color:var(--mf-ink);font-family:var(--mf-mono);font-size:12.5px;font-weight:500;white-space:nowrap;box-shadow:0 0 0 1px var(--mf-line)}
.mf-wheel .mf-wheel-item.mf-hot span{background:var(--mf-tone);color:var(--mf-on-tone);box-shadow:none}
.mf-sheet .mf-wheel-item span,.mf-wheel-inline .mf-wheel-item span{max-width:100%;overflow:hidden;text-overflow:ellipsis}
.mf-wheel-ov.mf-on .mf-wheel-item{opacity:1;transform:translate(var(--mf-x,0),var(--mf-y,0)) scale(1)}
.mf-wheel-item:hover,.mf-wheel-item.mf-hot{box-shadow:0 0 0 3px var(--mf-bg2),0 0 0 6px var(--mf-tone),0 10px 24px -8px rgba(0,0,0,.6)}
.mf-wheel-ov.mf-on .mf-wheel-item.mf-hot{transform:translate(var(--mf-x,0),var(--mf-y,0)) scale(1.12)}
.mf-wheel-item.mf-cur{box-shadow:0 0 0 3px var(--mf-bg2),0 0 0 5px var(--mf-ink)}
.mf-wheel-item[aria-disabled="true"]{filter:saturate(.25);opacity:.55!important;cursor:not-allowed}
.mf-wheel-item .mf-wheel-lock{position:absolute;top:-4px;right:-4px;width:22px;height:22px;border-radius:50%;background:var(--mf-bg2);color:var(--mf-ink);display:grid;place-items:center;box-shadow:0 0 0 1px var(--mf-line)}
.mf-wheel-item .mf-wheel-lock .mf-ic{width:12px;height:12px}
.mf-wheel-item:focus-visible{outline:2px solid var(--mf-accent2);outline-offset:3px}
/* feuille du bas (≤ 760 px, ou forcée) */
.mf-sheet{position:absolute;left:0;right:0;bottom:0;background:var(--mf-bg2);border-top:1px solid var(--mf-line);border-radius:var(--mf-r-md) var(--mf-r-md) 0 0;
  padding:12px 16px calc(16px + env(safe-area-inset-bottom,0px));transform:translateY(100%);transition:transform var(--mf-t-300) var(--mf-ease);box-shadow:var(--mf-shadow)}
.mf-wheel-ov.mf-on .mf-sheet{transform:none}
.mf-sheet-grip{width:40px;height:4px;border-radius:2px;background:var(--mf-line);margin:0 auto 10px}
.mf-sheet-title{font-family:var(--mf-disp);font-weight:600;font-size:20px;margin:0 0 10px}
.mf-sheet-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:8px}
.mf-sheet .mf-wheel-item{position:relative;left:auto;top:auto;width:auto;height:auto;min-height:72px;border-radius:var(--mf-r-sm);transform:none!important;opacity:1;gap:6px;padding:8px}
.mf-sheet .mf-wheel-item span{max-width:100%;white-space:normal;line-height:1.15}
/* feuille de choix INLINE (dans un écran ou un parcours) : mêmes pastilles, pas d'overlay */
.mf-wheel-inline{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:8px;width:100%}
.mf-wheel-inline .mf-wheel-item{position:relative;left:auto;top:auto;width:auto;height:auto;min-height:72px;border-radius:var(--mf-r-sm);transform:none;opacity:1;gap:6px;padding:8px;
  background:color-mix(in srgb,var(--mf-tone) 16%,var(--mf-card2));color:var(--mf-ink);border:1px solid color-mix(in srgb,var(--mf-tone) 35%,transparent)}
.mf-wheel-inline .mf-wheel-item .mf-ic{color:var(--mf-tone)}
.mf-wheel-inline .mf-wheel-item span{max-width:100%;white-space:normal;line-height:1.15;font-size:15px}
.mf-wheel-inline .mf-wheel-item[aria-pressed="true"],.mf-wheel-inline .mf-wheel-item.mf-cur{background:var(--mf-tone);color:var(--mf-on-tone);border-color:transparent;box-shadow:none}
.mf-wheel-inline .mf-wheel-item[aria-pressed="true"] .mf-ic{color:inherit}
.mf-wheel-inline .mf-wheel-item:active{transform:scale(.96)}

/* ── 9. mf-flow — Parcours plein écran ────────────────────────────────────
   Une question par écran, champ géant, barre « 3/8 », auto-avance, résumé
   animé à la fin. Remplace les dialogues de 6-14 champs. */
.mf-flow{position:fixed;inset:0;z-index:1100;background:var(--mf-bg);color:var(--mf-ink);font-family:var(--mf-body);display:flex;flex-direction:column;
  opacity:0;transition:opacity var(--mf-t-300)}
.mf-flow.mf-on{opacity:1}
.mf-flow.mf-inline{position:relative;inset:auto;z-index:auto;min-height:460px;border-radius:var(--mf-r-md);border:1px solid var(--mf-line);background:var(--mf-card);opacity:1;overflow:hidden}
.mf-flow-top{display:flex;align-items:center;gap:12px;padding:12px 16px 8px}
.mf-flow-top h3{margin:0;flex:1;min-width:0;font-family:var(--mf-disp);font-weight:600;font-size:20px;line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mf-flow-prog{font-family:var(--mf-mono);font-size:12.5px;font-weight:500;color:var(--mf-ink2);font-variant-numeric:tabular-nums}
.mf-flow-bar{height:4px;background:var(--mf-line);margin:0 16px}
.mf-flow-bar i{display:block;height:100%;width:var(--mf-p,0%);background:var(--mf-accent);border-radius:2px;transition:width var(--mf-t-300) var(--mf-ease)}
.mf-flow-body{flex:1;min-height:0;overflow:auto;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:24px;padding:24px 16px}
.mf-flow-step{display:flex;flex-direction:column;align-items:center;gap:22px;width:100%;max-width:640px;animation:mf-in var(--mf-t-300) var(--mf-ease) both}
.mf-flow-q{font-family:var(--mf-disp);font-weight:600;font-size:20px;line-height:1.2;text-align:center;max-width:34ch;margin:0}
.mf-flow-q small{display:block;font-family:var(--mf-mono);font-size:12.5px;font-weight:500;color:var(--mf-ink3);margin-top:6px;letter-spacing:.02em}
/* nombre : chiffre géant + pavé */
.mf-flow-num{display:flex;align-items:baseline;justify-content:center;gap:10px;min-height:56px;font-family:var(--mf-disp);font-weight:700;font-size:48px;line-height:1;font-variant-numeric:tabular-nums;color:var(--mf-ink)}
.mf-flow-num small{font-family:var(--mf-disp);font-weight:600;font-size:20px;color:var(--mf-ink2)}
.mf-flow-num.mf-empty{color:var(--mf-ink3)}
/* chiffre PROPOSÉ (pré-rempli par ce que le serveur sait) : ambre tant qu'on ne l'a pas touché */
.mf-flow-num.mf-pre{color:var(--mf-accent)}
html[data-theme="light"] .mf-flow-num.mf-pre{color:var(--mf-ink2)}   /* l'ambre ne tient pas 3:1 sur le fond clair */
.mf-flow-pad{display:grid;grid-template-columns:repeat(3,minmax(72px,88px));gap:8px}
.mf-flow-pad .mf-tap{height:56px;font-family:var(--mf-disp);font-weight:600;font-size:20px}
.mf-flow-steppers{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
.mf-flow-steppers .mf-tap{font-family:var(--mf-mono);font-size:12.5px;font-weight:500;min-width:56px}
/* choix : tuiles colorées, une par cause */
.mf-flow-choices{width:100%}
/* texte */
.mf-flow-text{width:100%;max-width:640px;min-height:132px;padding:14px;border-radius:var(--mf-r-sm);border:1px solid var(--mf-line);background:var(--mf-card2);color:var(--mf-ink);
  font-family:var(--mf-body);font-size:20px;line-height:1.35;resize:vertical;outline:none}
.mf-flow-text:focus{border-color:var(--mf-accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--mf-accent) 25%,transparent)}
/* photo */
.mf-flow-photo{width:100%;max-width:420px;aspect-ratio:4/3;border-radius:var(--mf-r-md);border:1px dashed var(--mf-line);background:var(--mf-card2);display:grid;place-items:center;overflow:hidden;position:relative;cursor:pointer}
.mf-flow-photo img{width:100%;height:100%;object-fit:cover;display:block}
.mf-flow-photo span{display:flex;flex-direction:column;align-items:center;gap:8px;color:var(--mf-ink2);font-family:var(--mf-body);font-size:15px}
.mf-flow-photo input{position:absolute;inset:0;opacity:0;cursor:pointer}
/* bas : Retour · Suivant */
.mf-flow-bottom{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:12px 16px calc(12px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--mf-line)}
.mf-flow-bottom .mf-tap{min-width:120px}
/* résumé animé */
.mf-flow-sum{display:flex;flex-direction:column;gap:8px;width:100%;max-width:640px}
.mf-flow-sum-row{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:12px;padding:12px 16px;border-radius:var(--mf-r-sm);background:var(--mf-card2);border:1px solid var(--mf-line);
  animation:mf-in var(--mf-t-300) var(--mf-ease) both;animation-delay:calc(var(--mf-i,0)*80ms)}
.mf-flow-sum-row span{font-family:var(--mf-mono);font-size:12.5px;color:var(--mf-ink2)}
.mf-flow-sum-row b{font-family:var(--mf-disp);font-weight:600;font-size:20px;color:var(--mf-ink);text-align:right}
.mf-flow-sum-row.mf-toned b{color:var(--mf-tone)}
.mf-flow-done{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center}
.mf-flow-done .mf-hero-check{width:88px;height:88px}
.mf-flow-done .mf-hero-check .mf-ic{width:48px;height:48px}
.mf-flow-done b{font-family:var(--mf-disp);font-weight:600;font-size:20px}

/* ── 11. Pilule « en cours » — barre rapide (chantier 3) ─────────────────────
   La seule information de la barre qui vaut sur les 40 écrans : un chronomètre est
   ouvert. Vert qui bat + chrono 20 px + pièce/machine 12,5 + barre de pièces. Run
   oublié (> 12 h) : ambre. Sans run : « Démarrer » + le prochain ordre. */
.mf-run{position:relative;overflow:hidden;gap:10px;padding:0 16px 0 14px;height:48px;text-align:left;max-width:100%;min-width:0;
  background:color-mix(in srgb,var(--mf-tone) 12%,var(--mf-card2));border-color:color-mix(in srgb,var(--mf-tone) 45%,transparent);color:var(--mf-ink)}
.mf-run.mf-run-idle{--mf-tone:var(--mf-accent);background:var(--mf-card2);border-color:var(--mf-line)}
.mf-run.mf-run-idle .mf-ic{color:var(--mf-accent)}
.mf-run-dot{width:10px;height:10px;border-radius:50%;background:var(--mf-tone);flex:none}
.mf-run-dot.mf-pulse{animation:mf-pulse var(--mf-t-1200) ease-out infinite}
.mf-run-clock{font-family:var(--mf-disp);font-weight:700;font-size:20px;line-height:1;font-variant-numeric:tabular-nums;color:var(--mf-tone);letter-spacing:.01em;flex:none}
.mf-run-txt{display:flex;flex-direction:column;gap:2px;min-width:0;line-height:1.15}
.mf-run-name{font-family:var(--mf-body);font-weight:600;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:200px}
.mf-run-sub{font-family:var(--mf-mono);font-size:12.5px;font-weight:500;color:var(--mf-ink2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:200px}
.mf-run-bar{position:absolute;left:0;right:0;bottom:0;height:3px;background:color-mix(in srgb,var(--mf-ink) 10%,transparent)}
.mf-run-bar i{display:block;height:100%;width:var(--mf-pct,0%);background:var(--mf-tone);transition:width var(--mf-t-1200) var(--mf-ease)}
/* Sous 1100 px (tablette, téléphone) il reste le point et le chrono — le nom de la pièce n'a plus
   la place à côté de la recherche : l'opérateur voit toujours son temps courir, c'est l'essentiel.
   Sans run, « Démarrer » garde son mot, perd son sous-texte. */
@media (max-width:1100px){.mf-run{padding:0 12px;gap:8px}.mf-run:not(.mf-run-idle) .mf-run-txt{display:none}.mf-run.mf-run-idle .mf-run-sub{display:none}}

/* ── 12. Bouton flottant (≤ 1100 px) ──────────────────────────────────────────
   Un rond rouge de 64 px en bas à droite, au-dessus de la barre du bas, toujours
   visible, léger halo. Pas de pulse : il n'est pas une alerte, il en déclare une.
   Tap = Panne ; appui long = éventail des autres gestes (roue). */
.mf-fab{position:fixed;right:16px;bottom:calc(20px + env(safe-area-inset-bottom,0px));z-index:1030;width:64px;height:64px;border-radius:50%;border:0;padding:0;
  background:var(--mf-tone);color:var(--mf-on-tone);display:none;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;
  box-shadow:0 0 0 6px color-mix(in srgb,var(--mf-tone) 22%,transparent),0 12px 28px -8px rgba(0,0,0,.6);
  -webkit-tap-highlight-color:transparent;touch-action:manipulation;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;
  font-family:var(--mf-body);transition:transform var(--mf-t-150) var(--mf-ease),box-shadow var(--mf-t-300),opacity var(--mf-t-300)}
.mf-fab .mf-ic{width:28px;height:28px;stroke-width:2.25}
.mf-fab-lbl{font-family:var(--mf-mono);font-size:12.5px;font-weight:500;line-height:1;margin-top:2px}
.mf-fab:active,.mf-fab.mf-pressed{transform:scale(.94)}
.mf-fab:focus-visible{outline:2px solid var(--mf-accent2);outline-offset:3px}
@media (max-width:1100px){.mf-fab{display:flex}}
@media (max-width:760px){.mf-fab{bottom:calc(88px + env(safe-area-inset-bottom,0px))}}
.mf-fab[hidden]{display:none}
/* La barre « Annuler », le bandeau collant, une roue ou un parcours parlent au même endroit :
   le bouton s'efface tant qu'ils sont là, il revient après. */
body:has(.mf-undo.mf-on) .mf-fab,body:has(.mf-bar.mf-on) .mf-fab,body:has(.mf-wheel-ov) .mf-fab,body:has(.mf-flow:not(.mf-inline)) .mf-fab,body:has(dialog[open]) .mf-fab{transform:scale(0);opacity:0;pointer-events:none}

/* ── 13. Feuille du bas générique + feuille « Menu » ──────────────────────────
   Même feuille que la roue (voile, grip, glissement 300 ms), mais défilable et
   centrée en colonne de 720 px au-delà de la tablette. */
.mf-sheet-big{max-height:min(88vh,88dvh);display:flex;flex-direction:column;padding-bottom:0;outline:none}
.mf-sheet-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:6px}
.mf-sheet-head .mf-sheet-title{margin:0;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mf-sheet-body{overflow:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;margin:0 -16px;padding:0 16px calc(16px + env(safe-area-inset-bottom,0px))}
/* Au-delà de la tablette, TOUTE feuille (Menu, réglages, gravité, outils du plan) se centre en
   colonne de 720 px : une bande de tuiles sur 1440 px de large n'est plus une feuille. */
@media (min-width:761px){
  .mf-wheel-ov .mf-sheet{left:50%;right:auto;width:min(720px,calc(100vw - 32px));transform:translate(-50%,100%);border-radius:var(--mf-r-md) var(--mf-r-md) 0 0}
  .mf-wheel-ov.mf-on .mf-sheet{transform:translate(-50%,0)}
}
/* Menu en tuiles par famille : chiffres-héros en tête, une teinte par famille (point + intitulé),
   tuiles 3 colonnes (4 sur tablette), favoris en tuiles doubles, pastille dans le coin. */
.mf-menu{display:flex;flex-direction:column;gap:16px;padding-top:4px}
.mf-menu .mf-hero{padding:14px 16px 14px 20px;gap:10px 16px;box-shadow:none}
.mf-menu-grp h5{margin:0 0 8px;font-family:var(--mf-mono);font-size:12.5px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--mf-tone);display:flex;align-items:center;gap:8px}
.mf-menu-grp h5::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--mf-tone);flex:none}
.mf-menu-grp h5::after{content:"";flex:1;height:1px;background:var(--mf-line)}
.mf-menu-grp.mf-tone-neutral h5{color:var(--mf-ink3)}
.mf-menu-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.mf-menu-item{position:relative;flex-direction:column;justify-content:center;gap:6px;min-height:72px;padding:10px 6px;white-space:normal;text-align:center;
  background:color-mix(in srgb,var(--mf-tone) 10%,var(--mf-card2));border-color:color-mix(in srgb,var(--mf-tone) 28%,transparent)}
.mf-menu-item.mf-wide{grid-column:span 2;flex-direction:row;justify-content:flex-start;padding:10px 14px;text-align:left}
.mf-menu-item.mf-on{border-color:var(--mf-tone);box-shadow:inset 0 0 0 1px var(--mf-tone);background:color-mix(in srgb,var(--mf-tone) 18%,var(--mf-card2))}
.mf-menu-grp.mf-tone-neutral .mf-menu-item{background:var(--mf-card2);border-color:var(--mf-line)}
.mf-menu-ic{color:var(--mf-tone);display:grid;place-items:center;flex:none;font-size:24px;line-height:1}
.mf-menu-grp.mf-tone-neutral .mf-menu-ic{color:var(--mf-ink2)}
.mf-menu-ic .mf-ic,.mf-menu-ic svg{width:28px;height:28px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;display:block}
.mf-menu-lbl{font-family:var(--mf-body);font-weight:600;font-size:15px;line-height:1.15;color:var(--mf-ink);overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;min-width:0}
.mf-menu-badge{position:absolute;top:6px;right:6px}
@media (min-width:761px){.mf-menu-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}

/* ── 14. Rail de navigation 64 px ──────────────────────────────────────────────
   Le menu latéral devient une colonne d'icônes : tuiles de 48 px, mini-plan d'atelier en
   tête, pastilles = points colorés par nature, groupes = filets. Déplié (épinglé .mf-open,
   ou survol à la souris .mf-hover) : libellés, intitulés, étoiles de favoris, chiffres.
   ⚠️ Spécificité volontairement haute (nav.side.mf-rail …) : la feuille « mf-system » à la
   fin d'app.html restyle .navbtn/.navgroup, et à spécificité égale c'est elle qui gagnerait. */
nav.side.mf-rail{--mf-railw:64px;--mf-railx:256px;position:relative;z-index:45;width:var(--mf-railw);min-width:0;box-sizing:border-box;
  padding:8px 8px 16px;display:flex;flex-direction:column;gap:2px;background:var(--mf-bg2);border-right:1px solid var(--mf-line);
  overflow-x:hidden;overflow-y:auto;scrollbar-width:none;transition:width var(--mf-t-300) var(--mf-ease),box-shadow var(--mf-t-300)}
nav.side.mf-rail::-webkit-scrollbar{display:none}
nav.side.mf-rail.mf-open{width:var(--mf-railx)}
/* Survol : le rail se déplie PAR-DESSUS le contenu (il ne pousse rien), puis se replie. */
nav.side.mf-rail.mf-hover:not(.mf-open){width:var(--mf-railx);box-shadow:var(--mf-shadow)}
/* tête : mini-plan (tap = plan d'atelier) + épingle */
.mf-rail-head{display:flex;flex-direction:column;align-items:center;gap:6px;padding:4px 0 10px;border-bottom:1px solid var(--mf-line);margin-bottom:6px;flex:none}
.mf-rail-plan{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;min-height:48px;padding:0;border:0;background:none;color:inherit;cursor:pointer;border-radius:var(--mf-r-sm);
  -webkit-tap-highlight-color:transparent;transition:transform var(--mf-t-150) var(--mf-ease),background var(--mf-t-150)}
.mf-rail-plan:hover{background:color-mix(in srgb,var(--mf-ink) 7%,transparent)}
.mf-rail-plan:active,.mf-rail-plan.mf-pressed{transform:scale(.96)}
.mf-rail-plan:focus-visible{outline:2px solid var(--mf-accent2);outline-offset:-2px}
.mf-rail-plan .mf-plan-mini{width:48px;height:40px;flex:none;background:var(--mf-card);transition:width var(--mf-t-300) var(--mf-ease),height var(--mf-t-300) var(--mf-ease)}
.mf-rail-plan .mf-rail-lbl{display:none;text-align:left;min-width:0;flex:1 1 auto}
.mf-rail-plan .mf-rail-lbl b{display:block;font-family:var(--mf-body);font-weight:600;font-size:15px;line-height:1.2;color:var(--mf-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mf-rail-plan .mf-rail-lbl span{display:block;font-family:var(--mf-mono);font-size:12.5px;color:var(--mf-ink2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px}
.mf-rail-pin{width:48px;height:48px;color:var(--mf-ink3);flex:none}
/* groupes : un filet quand replié ; intitulé 12,5 mono, cliquable (replie ses entrées) quand déplié */
nav.side.mf-rail .mf-rail-grp{margin:6px 6px 2px;padding:0;height:1px;background:var(--mf-line);font-size:0;color:transparent;letter-spacing:0;overflow:hidden;cursor:pointer;flex:none;user-select:none;-webkit-user-select:none}
nav.side.mf-rail .mf-rail-grp .mf-ic{display:none}
/* boutons : tuile carrée de 48 px, icône trait 22 px centrée, libellé caché */
nav.side.mf-rail .mf-rail-btn{position:relative;display:flex;align-items:center;justify-content:center;gap:12px;width:48px;min-height:48px;height:48px;padding:0;margin:0 auto;
  border:0;border-radius:var(--mf-r-sm);background:none;color:var(--mf-ink2);font-family:var(--mf-body);font-size:15px;font-weight:600;line-height:1;white-space:nowrap;overflow:visible;transform:none;flex:none;text-align:left;box-shadow:none;
  -webkit-tap-highlight-color:transparent;transition:background var(--mf-t-150),color var(--mf-t-150),transform var(--mf-t-150) var(--mf-ease)}
nav.side.mf-rail .mf-rail-btn:hover{background:color-mix(in srgb,var(--mf-ink) 7%,transparent);color:var(--mf-ink);transform:none}
nav.side.mf-rail .mf-rail-btn:active,nav.side.mf-rail .mf-rail-btn.mf-pressed{transform:scale(.96)}
nav.side.mf-rail .mf-rail-btn.on{background:color-mix(in srgb,var(--mf-accent) 14%,transparent);color:var(--mf-ink);box-shadow:inset 3px 0 0 var(--mf-accent);font-weight:600}
nav.side.mf-rail .mf-rail-btn.on .mf-rail-ic{color:var(--mf-accent)}
nav.side.mf-rail .mf-rail-btn:focus-visible{outline:2px solid var(--mf-accent2);outline-offset:-2px}
nav.side.mf-rail .mf-rail-btn.sub::before{display:none}
/* Un groupe replié cache ses entrées quand le rail est déplié ; replié, toutes les icônes restent
   (une pastille de Messagerie ne doit jamais disparaître derrière un groupe fermé). */
nav.side.mf-rail:is(.mf-open,.mf-hover) .mf-rail-btn.mf-hid{display:none}
nav.side.mf-rail .mf-rail-ic{width:24px;height:24px;flex:none;display:inline-flex;align-items:center;justify-content:center;color:inherit;font-size:20px;line-height:1;filter:none}
nav.side.mf-rail .mf-rail-ic svg{width:22px;height:22px;display:block;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
nav.side.mf-rail .mf-rail-lbl{display:none;flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis}
nav.side.mf-rail .navfav,nav.side.mf-rail .beta-tag{display:none}
/* pastille : un point coloré par nature (data-tone) quand le rail est replié — le point rouge sur
   « Maintenance » et la machine rouge de la miniature racontent la même chose. */
nav.side.mf-rail .mf-rail-badge{position:absolute;top:6px;right:6px;margin:0;min-width:10px;width:10px;height:10px;padding:0;border-radius:50%;font-size:0;line-height:0;
  background:var(--mf-tone,var(--mf-panne));color:var(--mf-on-tone,#fff);box-shadow:0 0 0 2px var(--mf-bg2);animation:none}
nav.side.mf-rail .mf-rail-badge[data-tone="panne"]{--mf-tone:var(--mf-panne);--mf-on-tone:var(--mf-on-panne)}
nav.side.mf-rail .mf-rail-badge[data-tone="regl"]{--mf-tone:var(--mf-regl);--mf-on-tone:var(--mf-on-regl)}
nav.side.mf-rail .mf-rail-badge[data-tone="resa"]{--mf-tone:var(--mf-resa);--mf-on-tone:var(--mf-on-resa)}
nav.side.mf-rail .mf-rail-badge[data-tone="teal"]{--mf-tone:var(--mf-teal);--mf-on-tone:var(--mf-on-teal)}
nav.side.mf-rail .mf-rail-badge[data-tone="accent"]{--mf-tone:var(--mf-accent);--mf-on-tone:var(--mf-on-accent)}
nav.side.mf-rail .mf-rail-badge[data-tone="ok"]{--mf-tone:var(--mf-ok);--mf-on-tone:var(--mf-on-ok)}
/* déplié (épinglé ou survol) : libellés, intitulés, étoiles, chiffres */
nav.side.mf-rail:is(.mf-open,.mf-hover) .mf-rail-btn{width:100%;justify-content:flex-start;padding:0 12px}
nav.side.mf-rail:is(.mf-open,.mf-hover) .mf-rail-btn.sub{padding-left:26px}
nav.side.mf-rail:is(.mf-open,.mf-hover) .mf-rail-btn.sub::before{display:block}
nav.side.mf-rail:is(.mf-open,.mf-hover) .mf-rail-lbl{display:block}
nav.side.mf-rail:is(.mf-open,.mf-hover) .navfav{display:inline-block;margin-left:auto}
nav.side.mf-rail:is(.mf-open,.mf-hover) .beta-tag{display:inline-block}
nav.side.mf-rail:is(.mf-open,.mf-hover) .mf-rail-grp{height:auto;margin:14px 8px 4px;background:none;font-family:var(--mf-mono);font-size:12.5px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--mf-ink3);display:flex;align-items:center;gap:8px;overflow:visible}
nav.side.mf-rail:is(.mf-open,.mf-hover) .mf-rail-grp::after{content:"";flex:1;height:1px;background:var(--mf-line)}
nav.side.mf-rail:is(.mf-open,.mf-hover) .mf-rail-grp .mf-ic{display:block;width:14px;height:14px;transition:transform var(--mf-t-300) var(--mf-ease)}
nav.side.mf-rail:is(.mf-open,.mf-hover) .mf-rail-grp.mf-fold .mf-ic{transform:rotate(-90deg)}
nav.side.mf-rail:is(.mf-open,.mf-hover) .mf-rail-badge{position:static;width:auto;height:22px;min-width:22px;padding:0 7px;border-radius:var(--mf-r-xs);font-family:var(--mf-mono);font-size:12.5px;font-weight:500;line-height:22px;margin-left:auto;box-shadow:none;display:inline-flex;align-items:center;justify-content:center;font-variant-numeric:tabular-nums}
nav.side.mf-rail:is(.mf-open,.mf-hover) .mf-rail-badge+.navfav{margin-left:6px}
nav.side.mf-rail:is(.mf-open,.mf-hover) .mf-rail-head{flex-direction:row;justify-content:space-between;align-items:center}
nav.side.mf-rail:is(.mf-open,.mf-hover) .mf-rail-plan{justify-content:flex-start;padding:0 4px;width:auto;flex:1 1 auto;min-width:0}
nav.side.mf-rail:is(.mf-open,.mf-hover) .mf-rail-plan .mf-plan-mini{width:66px;height:46px}
nav.side.mf-rail:is(.mf-open,.mf-hover) .mf-rail-plan .mf-rail-lbl{display:block}
nav.side.mf-rail .mf-rail-badge[hidden]{display:none}
/* Libellé éphémère à l'appui long d'une icône (tablette sans souris) : posé dans body, en
   position fixe, parce que le rail rogne ce qui dépasse de ses 64 px. */
.mf-rail-tip{position:fixed;z-index:1200;transform:translateY(-50%);padding:10px 14px;border-radius:var(--mf-r-sm);background:var(--mf-bg2);color:var(--mf-ink);border:1px solid var(--mf-line);box-shadow:var(--mf-shadow);
  font-family:var(--mf-body);font-size:15px;font-weight:600;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity var(--mf-t-150)}
.mf-rail-tip.mf-on{opacity:1}
/* Sous 760 px, le rail n'existe pas : barre du bas + feuille Menu, deux navigations, pas trois. */
@media (max-width:760px){nav.side.mf-rail{display:none}}

/* ── 15. Bandeau du haut : boutons-icônes 48 px sur la surface sombre ── */
.mf-top{color:var(--mf-ink2);border-color:transparent;position:relative}
.mf-top:hover{color:var(--mf-ink);background:color-mix(in srgb,var(--mf-ink) 8%,transparent)}
.mf-top .mf-ic{width:22px;height:22px}
/* pastille de compteur sur un bouton-icône (notifications) */
.mf-top .mf-badge{position:absolute;top:4px;right:4px;height:18px;min-width:18px;padding:0 5px;font-size:12.5px}

/* ── 16. Chantier 6 — le formateur : jauge segmentée, frise semaine à interrupteur, bande de
   jours, pastille de niveau, matrice, checklist tactile ───────────────────────────────────── */
/* Barre segmentée : libellé · piste en couleurs de niveau · pourcentage. Une ligne = 48 px (c'est
   une cible : tap = la liste des élèves). Les segments se déploient en 1,2 s à l'apparition. */
.mf-gauge-seg{display:grid;grid-template-columns:minmax(96px,32%) minmax(0,1fr) auto;align-items:center;gap:12px;width:100%;min-height:48px;padding:4px 8px 4px 4px;
  border:0;border-radius:var(--mf-r-sm);background:none;color:var(--mf-ink);text-align:left;font-family:var(--mf-body);-webkit-tap-highlight-color:transparent}
button.mf-gauge-seg{cursor:pointer}
button.mf-gauge-seg:hover{background:color-mix(in srgb,var(--mf-ink) 5%,transparent)}
.mf-gauge-seg:focus-visible{outline:2px solid var(--mf-accent2);outline-offset:-2px}
.mf-gauge-seg .mf-g-lab{display:flex;flex-direction:column;gap:2px;min-width:0}
.mf-gauge-seg .mf-g-lab b{font-family:var(--mf-body);font-weight:600;font-size:15px;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mf-gauge-seg .mf-g-lab small{font-family:var(--mf-mono);font-size:12.5px;font-weight:500;color:var(--mf-ink3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mf-gauge-seg .mf-g-track{display:flex;height:14px;border-radius:var(--mf-r-xs);background:color-mix(in srgb,var(--mf-ink) 9%,transparent);overflow:hidden}
.mf-g-seg{display:block;height:100%;width:0;flex:none;background:var(--mf-tone);transition:width var(--mf-t-1200) var(--mf-ease)}
.mf-g-seg + .mf-g-seg{box-shadow:inset 1px 0 0 var(--mf-bg2)}
.mf-gauge.mf-on .mf-g-seg{width:var(--mf-w,0%)}
.mf-gauge-seg .mf-g-val{font-family:var(--mf-disp);font-weight:700;font-size:20px;line-height:1;font-variant-numeric:tabular-nums;color:var(--mf-tone);min-width:4ch;text-align:right}
.mf-gauge-seg.mf-tone-neutral .mf-g-val{color:var(--mf-ink2)}
/* Micro-barres (les modules d'un apprenti sous son visage) : 8 px, libellé court, pas de cible. */
.mf-gauge-segs.mf-compact .mf-gauge-rows{gap:4px}
.mf-gauge-segs.mf-compact .mf-gauge-seg{grid-template-columns:minmax(20px,24%) minmax(0,1fr) auto;min-height:24px;gap:8px;padding:0}
.mf-gauge-segs.mf-compact .mf-gauge-seg .mf-g-lab b{font-family:var(--mf-mono);font-weight:500;font-size:12.5px;color:var(--mf-ink2)}
.mf-gauge-segs.mf-compact .mf-gauge-seg .mf-g-track{height:8px}
.mf-gauge-segs.mf-compact .mf-gauge-seg .mf-g-val{font-family:var(--mf-mono);font-weight:500;font-size:12.5px;min-width:3ch}
/* Frise semaine : chiffres en tête de colonne, cellule avec interrupteur de 48 px, colonnes larges. */
.mf-tl-stats{display:flex;gap:12px;flex-wrap:wrap;margin:-2px 0 2px}
.mf-tl-stats span{display:inline-flex;align-items:baseline;gap:4px;font-family:var(--mf-mono);font-size:12.5px;font-weight:500;color:var(--mf-ink3)}
.mf-tl-stats b{font-family:var(--mf-disp);font-weight:700;font-size:20px;line-height:1;color:var(--mf-tone);font-variant-numeric:tabular-nums}
.mf-tl-cell-txt{display:flex;flex-direction:column;gap:1px;min-width:0;flex:1 1 auto}
.mf-tl-cell-txt span{font-family:var(--mf-mono);font-size:12.5px;color:var(--mf-ink3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mf-tl-col .mf-tl-cell.mf-has-btn{min-height:56px;padding:4px 4px 4px 8px}
.mf-tl-col .mf-tl-cell.mf-dim{opacity:.55}
.mf-tl-col .mf-tl-cell[data-act]{transition:transform var(--mf-t-150) var(--mf-ease),background var(--mf-t-300)}
.mf-tl-col .mf-tl-cell.mf-pressed{transform:scale(.97)}
.mf-tl-col .mf-tl-cell:focus-visible{outline:2px solid var(--mf-accent2);outline-offset:-2px}
.mf-tl-week.mf-wide .mf-tl-col,.mf-tl-kind-week.mf-wide .mf-tl-week{--mf-colmin:176px}
.mf-tl-kind-week.mf-wide .mf-tl-week{grid-template-columns:repeat(var(--mf-cols,5),minmax(var(--mf-colmin,176px),1fr))}
/* Roue inline : une ligne d'aide sous le libellé (jamais dans la roue autour du doigt). */
.mf-wheel-inline .mf-wheel-item small{display:block;font-family:var(--mf-mono);font-size:12.5px;font-weight:500;line-height:1.2;opacity:.85;white-space:normal;max-width:100%}
.mf-wheel .mf-wheel-item small{display:none}
/* Parcours : le bloc libre sous la question (checklist, dernière évaluation). */
.mf-flow-above{width:100%;max-width:640px;display:flex;flex-direction:column;gap:8px}
/* Checklist tactile : une rangée de 48 px, une case de 24 px, un tap n'importe où sur la ligne. */
.mf-check{display:flex;align-items:center;gap:12px;min-height:48px;padding:4px 10px;border-radius:var(--mf-r-sm);border:1px solid var(--mf-line);background:var(--mf-card2);
  font-family:var(--mf-body);font-size:15px;line-height:1.3;color:var(--mf-ink);cursor:pointer;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;transition:background var(--mf-t-300),border-color var(--mf-t-300)}
.mf-check input{position:absolute;opacity:0;width:0;height:0}
.mf-check i{flex:none;width:24px;height:24px;border-radius:var(--mf-r-xs);border:2px solid var(--mf-ink3);display:grid;place-items:center;color:var(--mf-on-ok);transition:background var(--mf-t-150),border-color var(--mf-t-150)}
.mf-check i .mf-ic{width:16px;height:16px;stroke-width:3;opacity:0}
.mf-check:has(input:checked){border-color:color-mix(in srgb,var(--mf-ok) 55%,transparent);background:color-mix(in srgb,var(--mf-ok) 10%,var(--mf-card2))}
.mf-check:has(input:checked) i{background:var(--mf-ok);border-color:var(--mf-ok)}
.mf-check:has(input:checked) i .mf-ic{opacity:1}
.mf-check:has(input:focus-visible){outline:2px solid var(--mf-accent2);outline-offset:2px}
/* Bande des jours d'école : 5 lettres, école = bleu plein, aujourd'hui = souligné. */
.mf-days{display:inline-flex;gap:3px;vertical-align:middle}
.mf-day{display:inline-grid;place-items:center;width:24px;height:22px;border-radius:var(--mf-r-xs);font-family:var(--mf-mono);font-style:normal;font-size:12.5px;font-weight:500;line-height:1;
  color:var(--mf-ink3);background:color-mix(in srgb,var(--mf-ink) 6%,transparent);position:relative}
.mf-day.mf-on{background:var(--mf-tone);color:var(--mf-on-tone)}
.mf-day.mf-today::after{content:"";position:absolute;left:5px;right:5px;bottom:-4px;height:2px;border-radius:1px;background:var(--mf-accent)}
/* Pastille de niveau : cible 48 px, pastille 32 px dans la couleur du niveau, chiffre dedans ; l'anneau
   extérieur = auto-évaluation de l'élève (avec son chiffre en coin). Tap = niveau suivant. */
.mf-lvl{position:relative;display:inline-grid;place-items:center;width:48px;height:48px;padding:0;border:0;border-radius:var(--mf-r-sm);background:none;color:inherit;cursor:default;
  -webkit-tap-highlight-color:transparent;touch-action:manipulation;user-select:none;-webkit-user-select:none;transition:background var(--mf-t-150),transform var(--mf-t-150) var(--mf-ease)}
.mf-lvl i{display:grid;place-items:center;width:32px;height:32px;border-radius:var(--mf-r-xs);background:var(--mf-tone);color:var(--mf-on-tone);font-family:var(--mf-disp);font-style:normal;font-weight:700;font-size:20px;line-height:1;
  font-variant-numeric:tabular-nums;transition:background var(--mf-t-300),transform var(--mf-t-150) var(--mf-ease)}
.mf-lvl.mf-tone-neutral i{background:color-mix(in srgb,var(--mf-ink) 12%,transparent);color:var(--mf-ink2)}
.mf-lvl.mf-self i{box-shadow:0 0 0 2px var(--mf-bg2),0 0 0 4px var(--mf-self,var(--mf-ink3))}
.mf-lvl em{position:absolute;right:2px;bottom:2px;min-width:16px;height:16px;padding:0 3px;border-radius:var(--mf-r-xs);background:var(--mf-self,var(--mf-ink3));color:var(--mf-bg);font-family:var(--mf-mono);font-style:normal;font-size:12.5px;font-weight:500;line-height:16px;text-align:center}
.mf-lvl[data-act]{cursor:pointer}
.mf-lvl[data-act]:hover{background:color-mix(in srgb,var(--mf-ink) 7%,transparent)}
.mf-lvl[data-act]:active i,.mf-lvl.mf-pressed i{transform:scale(.88)}
.mf-lvl:focus-visible{outline:2px solid var(--mf-accent2);outline-offset:-2px}
.mf-lvl.mf-na{cursor:default;opacity:.45}
.mf-lvl.mf-na i{background:none;color:var(--mf-ink3);font-family:var(--mf-mono);font-weight:500;font-size:12.5px}
/* ✓ du serveur : un anneau vert qui surgit puis s'efface (300 ms) — « enregistré » se voit, ne se lit pas. */
.mf-lvl.mf-saved::after{content:"";position:absolute;inset:4px;border-radius:var(--mf-r-sm);box-shadow:0 0 0 2px var(--mf-ok);animation:mf-saved var(--mf-t-1200) var(--mf-ease) both;pointer-events:none}
@keyframes mf-saved{0%{opacity:0;transform:scale(.7)}20%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(1.06)}}
/* Matrice apprentis × compétences (vue « Grille », le bureau) : en-tête de module fusionné dans sa
   couleur, première colonne collante, cellules de 48 px. Un tableau de chiffres — mais l'essentiel
   (autonomie, à valider, stagnations) est dit par le bandeau au-dessus. */
.mf-matrix-wrap{overflow:auto;max-width:100%;border-radius:var(--mf-r-md);border:1px solid var(--mf-line);background:var(--mf-card)}
table.mf-matrix{border-collapse:separate;border-spacing:0;font-family:var(--mf-body);color:var(--mf-ink);min-width:100%}
.mf-matrix th,.mf-matrix td{padding:2px 2px;text-align:center;vertical-align:middle;border-bottom:1px solid var(--mf-line2);background:var(--mf-card)}
.mf-matrix thead th{position:sticky;top:0;z-index:3;background:var(--mf-bg2)}
.mf-matrix th.mf-mod{padding:6px 10px;text-align:left;font-family:var(--mf-mono);font-size:12.5px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--mf-tone);border-bottom:2px solid var(--mf-tone);white-space:nowrap}
.mf-matrix th.mf-comp{min-width:56px;max-width:96px;padding:6px 4px 8px;font-family:var(--mf-mono);font-size:12.5px;font-weight:500;color:var(--mf-ink2);line-height:1.25;white-space:normal;vertical-align:bottom}
.mf-matrix th.mf-comp b{display:block;font-family:var(--mf-disp);font-weight:600;font-size:15px;color:var(--mf-ink)}
.mf-matrix th.mf-comp span{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.mf-matrix .mf-stick{position:sticky;left:0;z-index:2;text-align:left;padding:4px 10px 4px 8px;min-width:200px;box-shadow:1px 0 0 var(--mf-line)}
.mf-matrix thead .mf-stick{z-index:4}
.mf-matrix .mf-stick .mf-who{display:flex;align-items:center;gap:8px;min-width:0}
.mf-matrix .mf-stick .mf-who b{font-family:var(--mf-body);font-weight:600;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mf-matrix .mf-stick .mf-who small{display:block;font-family:var(--mf-mono);font-size:12.5px;color:var(--mf-ink3)}
.mf-matrix .mf-stick .mf-who .mf-tap{margin-left:auto}
.mf-matrix td.mf-cell{padding:0}
@media (max-width:760px){.mf-matrix .mf-stick{min-width:150px}.mf-matrix .mf-stick .mf-who .mf-tap{display:none}}

/* ── 17. Chantier 7 — Maintenance + Pilotage : frise en semaines, anneau à arcs, histogramme,
   jauge-tuile verticale (tap = −1), segment cliquable, photo dans un choix ─────────────── */
/* Anneau à arcs : après le remplissage principal, chaque arc porte SA couleur (subie en rouge,
   entretien planifié en bleu) ; ils apparaissent en 1,2 s avec l'anneau, jamais avant. */
.mf-gauge-ring .mf-g-arc{fill:none;stroke:var(--mf-tone);stroke-width:var(--mf-stroke,8);stroke-linecap:butt;opacity:0;transition:opacity var(--mf-t-1200) var(--mf-ease)}
.mf-gauge.mf-on .mf-gauge-ring .mf-g-arc{opacity:1}
/* Histogramme : 12 barres, base zéro, la plus haute touche le haut, une semaine vide = un trait. */
.mf-gauge-bars .mf-gauge-spark svg{height:40px}
.mf-g-col{fill:var(--mf-tone);opacity:0;transition:opacity var(--mf-t-300);transition-delay:calc(var(--mf-i,0)*40ms)}
.mf-gauge.mf-on .mf-g-col{opacity:.9}
.mf-gauge.mf-on .mf-g-col.mf-zero{opacity:.28}
.mf-gauge-bars .mf-gauge-spark .mf-g-val small{white-space:nowrap}
/* Un histogramme posé dans une tuile (`spark`) prend la largeur du corps, jamais plus. */
.mf-tile-html > .mf-gauge{flex:1 1 100%;min-width:0;width:100%;display:flex}
.mf-tile-html .mf-gauge-spark{min-width:0}
.mf-tile-html .mf-gauge-bars .mf-gauge-spark svg{height:32px}
/* Segment cliquable dans la barre empilée (Pareto) : un bouton sans bord, enfoncé = cerclé d'encre. */
button.mf-g-seg{border:0;padding:0;margin:0;cursor:pointer;position:relative;-webkit-tap-highlight-color:transparent;touch-action:manipulation;transition:width var(--mf-t-1200) var(--mf-ease),filter var(--mf-t-150),transform var(--mf-t-150)}
button.mf-g-seg:hover{filter:brightness(1.12)}
button.mf-g-seg[aria-pressed="true"]{box-shadow:inset 0 0 0 3px var(--mf-bg2),inset 0 0 0 5px var(--mf-ink)}
button.mf-g-seg:focus-visible{outline:2px solid var(--mf-accent2);outline-offset:1px;z-index:1}
.mf-gauge-segs.mf-tall .mf-gauge-seg .mf-g-track{height:28px;border-radius:var(--mf-r-sm)}
.mf-gauge-segs.mf-tall .mf-gauge-seg{min-height:56px}
/* Une seule ligne sans libellé (la barre 100 % du Pareto) : la piste prend toute la largeur. */
.mf-gauge-segs.mf-tall .mf-gauge-seg.mf-nolab{grid-template-columns:minmax(0,1fr) auto}
.mf-gauge-segs.mf-tall .mf-gauge-seg.mf-nolab .mf-g-lab{display:none}
/* Jauge mise à jour SUR PLACE (MF.gaugeSet) : 300 ms, la durée d'un changement d'état — pas le
   remplissage d'apparition de 1,2 s. */
.mf-gauge.mf-on .mf-gauge-bar.mf-quick .mf-g-fill,.mf-gauge-v.mf-on .mf-gauge-bar.mf-quick .mf-g-fill{transition:width var(--mf-t-300) var(--mf-ease),height var(--mf-t-300) var(--mf-ease),background var(--mf-t-300)}
/* Jauge-tuile verticale (`big`) : une tuile carrée par consommable — liseré du ton en haut, piste
   de 40 px qui se remplit depuis le bas, trait de seuil, chiffre 20 px dans le ton, nom dessous.
   Tap = −1 (bouton de 48 px et plus), appui long = roue. Les tuiles passent à la ligne d'elles-mêmes. */
.mf-gauge-v.mf-gauge-big{display:flex;width:100%}
.mf-gauge-big .mf-gauge-rows{flex-direction:row;flex-wrap:wrap;gap:8px;width:100%}
.mf-gauge-v.mf-gauge-big .mf-gauge-bar{position:relative;overflow:hidden;width:132px;min-width:132px;height:188px;padding:12px 10px 10px;gap:6px;
  grid-template-rows:minmax(0,1fr) auto auto;border:1px solid var(--mf-line);border-radius:var(--mf-r-md);background:var(--mf-card);color:var(--mf-ink);
  font-family:var(--mf-body);text-align:center;transition:transform var(--mf-t-150) var(--mf-ease),border-color var(--mf-t-300),box-shadow var(--mf-t-300)}
.mf-gauge-v.mf-gauge-big .mf-gauge-bar::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:var(--mf-tone);transition:background var(--mf-t-300)}
.mf-gauge-v.mf-gauge-big .mf-gauge-bar .mf-g-track{order:1;width:40px;margin:0 auto;border-radius:var(--mf-r-sm);align-self:stretch}
.mf-gauge-v.mf-gauge-big .mf-gauge-bar .mf-g-val{order:2;font-family:var(--mf-disp);font-weight:700;font-size:20px;line-height:1;color:var(--mf-tone);white-space:nowrap}
.mf-gauge-v.mf-gauge-big .mf-gauge-bar.mf-tone-neutral .mf-g-val,.mf-gauge-v.mf-gauge-big .mf-gauge-bar.mf-tone-ok .mf-g-val{color:var(--mf-ink)}
.mf-gauge-v.mf-gauge-big .mf-gauge-bar .mf-g-val i{font-family:var(--mf-mono);font-size:12.5px;font-weight:500;color:var(--mf-ink3)}
.mf-gauge-v.mf-gauge-big .mf-gauge-bar .mf-g-lab{order:3;max-width:100%;font-family:var(--mf-body);font-size:15px;font-weight:600;line-height:1.2;color:var(--mf-ink);white-space:normal;overflow:hidden;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical}
.mf-gauge-v.mf-gauge-big .mf-gauge-bar .mf-g-sub{display:block;font-family:var(--mf-mono);font-size:12.5px;font-weight:500;color:var(--mf-tone);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mf-gauge-v.mf-gauge-big .mf-gauge-bar.mf-tone-neutral .mf-g-sub,.mf-gauge-v.mf-gauge-big .mf-gauge-bar.mf-tone-ok .mf-g-sub{color:var(--mf-ink2)}
button.mf-gauge-bar{cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
button.mf-gauge-bar:hover{border-color:color-mix(in srgb,var(--mf-ink) 22%,transparent)}
.mf-gauge-bar.mf-press:active,.mf-gauge-bar.mf-pressed{transform:scale(.96)}
button.mf-gauge-bar:focus-visible{outline:2px solid var(--mf-accent2);outline-offset:2px}
@media (max-width:760px){.mf-gauge-v.mf-gauge-big .mf-gauge-bar{width:calc(50% - 4px);min-width:0}}
/* Photo dans une pastille de choix (roue inline / parcours) : la vignette de la machine, 48 px. */
.mf-wheel-inline .mf-wheel-img{display:block;width:56px;height:56px;border-radius:var(--mf-r-sm);overflow:hidden;background:var(--mf-card);box-shadow:0 0 0 2px color-mix(in srgb,var(--mf-tone) 45%,transparent);flex:none}
.mf-wheel-inline .mf-wheel-img img{width:100%;height:100%;object-fit:cover;display:block}
.mf-wheel .mf-wheel-img{display:none}
/* Frise « horizon » en SEMAINES : une colonne « en retard » hachurée rouge, une colonne par semaine
   (aujourd'hui cerclée de la marque), « plus tard » et « au compteur » (pointillé) à droite. Les
   pastilles sont des boutons de 48 px : code machine 12,5 mono dans le ton, libellé 15 px, délai. */
.mf-tl-hzw-grid{display:grid;grid-template-columns:repeat(var(--mf-cols,10),minmax(156px,1fr));gap:8px;min-width:max-content;padding:2px 0 4px}
.mf-tl-wk{position:relative;display:flex;flex-direction:column;gap:6px;min-height:156px;width:168px;padding:10px 8px;border-radius:var(--mf-r-sm);background:var(--mf-card);border:1px solid var(--mf-line);
  transition:border-color var(--mf-t-300),box-shadow var(--mf-t-300)}
.mf-tl-wk.mf-empty{opacity:.72}
.mf-tl-wk.mf-today{border-color:var(--mf-accent);box-shadow:inset 0 3px 0 var(--mf-accent);opacity:1}
.mf-tl-wk.mf-late{background-color:color-mix(in srgb,var(--mf-panne) 8%,var(--mf-card));border-color:color-mix(in srgb,var(--mf-panne) 45%,transparent);
  background-image:repeating-linear-gradient(135deg,transparent 0 8px,color-mix(in srgb,var(--mf-panne) 9%,transparent) 8px 10px)}
.mf-tl-wk.mf-late.mf-empty{background-image:none}
.mf-tl-wk.mf-meter{border-style:dashed}
.mf-tl-wk h5{margin:0 0 2px;font-family:var(--mf-disp);font-weight:600;font-size:20px;line-height:1.1;color:var(--mf-ink);display:flex;align-items:baseline;gap:6px;flex-wrap:wrap}
.mf-tl-wk h5 small{flex-basis:100%;font-family:var(--mf-mono);font-size:12.5px;font-weight:500;color:var(--mf-ink3);line-height:1.2}
.mf-tl-wk.mf-today h5 small{color:var(--mf-accent)}
.mf-tl-wk.mf-late h5{color:var(--mf-panne)}
.mf-tl-wk h5 .mf-badge{position:relative;top:-2px}
.mf-tl-wk.mf-tone-neutral h5 .mf-badge{background:color-mix(in srgb,var(--mf-ink) 12%,transparent);color:var(--mf-ink)}
.mf-tl-pill{display:flex;align-items:center;gap:8px;width:100%;min-height:48px;padding:6px 8px;border-radius:var(--mf-r-sm);text-align:left;cursor:pointer;color:var(--mf-ink);font-family:var(--mf-body);
  border:1px solid color-mix(in srgb,var(--mf-tone) 35%,transparent);background:color-mix(in srgb,var(--mf-tone) 12%,var(--mf-card2));
  -webkit-tap-highlight-color:transparent;touch-action:manipulation;transition:transform var(--mf-t-150) var(--mf-ease),background var(--mf-t-300)}
.mf-tl-pill .mf-ic,.mf-tl-pill .mf-dot{color:var(--mf-tone);flex:none}
.mf-tl-pill-txt{display:flex;flex-direction:column;gap:1px;min-width:0;flex:1 1 auto}
.mf-tl-pill-txt b{font-family:var(--mf-mono);font-size:12.5px;font-weight:500;letter-spacing:.02em;color:var(--mf-tone);line-height:1.2}
.mf-tl-pill.mf-tone-neutral .mf-tl-pill-txt b{color:var(--mf-ink2)}
/* Le libellé prend deux lignes au besoin (« Graissage glissières »), jamais plus : la pastille grandit, la colonne non. */
.mf-tl-pill-txt span{font-family:var(--mf-body);font-size:15px;font-weight:600;line-height:1.2;white-space:normal;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow-wrap:break-word;hyphens:auto}
.mf-tl-pill small{font-family:var(--mf-mono);font-size:12.5px;font-weight:500;color:var(--mf-ink2);white-space:nowrap;flex:none}
.mf-tl-pill.mf-late small{color:var(--mf-panne)}
.mf-tl-pill:hover{background:color-mix(in srgb,var(--mf-tone) 20%,var(--mf-card2))}
.mf-tl-pill:active,.mf-tl-pill.mf-pressed{transform:scale(.97)}
.mf-tl-pill:focus-visible{outline:2px solid var(--mf-accent2);outline-offset:2px}
.mf-tl-hzw .mf-tl-empty{font-family:var(--mf-mono);font-size:12.5px;color:var(--mf-ink3);padding:2px}
@media (max-width:760px){.mf-tl-hzw-grid{grid-template-columns:repeat(var(--mf-cols,10),minmax(140px,1fr))}.mf-tl-wk{width:148px;padding:8px 6px}}
/* En clair, l'ambre ne tient pas 4,5:1 sur un fond clair : le code machine de la pastille et le
   chiffre de la jauge-tuile reprennent l'encre — le liseré, le fond et la jauge disent déjà l'état. */
html[data-theme="light"] .mf-tl-pill.mf-tone-regl .mf-tl-pill-txt b,html[data-theme="light"] .mf-tl-pill.mf-tone-teal .mf-tl-pill-txt b{color:var(--mf-ink2)}
html[data-theme="light"] .mf-gauge-v.mf-gauge-big .mf-gauge-bar.mf-tone-regl .mf-g-val{color:var(--mf-ink)}
html[data-theme="light"] .mf-gauge-v.mf-gauge-big .mf-gauge-bar.mf-tone-regl .mf-g-sub{color:var(--mf-ink2)}
/* Tendance sous un chiffre : ▲ vert quand ça s'améliore, ▼ rouge sinon, gris sans période précédente. */
.mf-trend{display:inline-flex;align-items:center;gap:4px;font-family:var(--mf-mono);font-size:12.5px;font-weight:500;color:var(--mf-ink3);white-space:nowrap}
.mf-trend.mf-up{color:var(--mf-ok)}
.mf-trend.mf-down{color:var(--mf-panne)}
.mf-trend .mf-ic{width:14px;height:14px;stroke-width:2.5}
/* Pendant un recalcul, les chiffres baissent d'opacité au lieu d'être remplacés par « Calcul… ». */
.mf-dimmed{opacity:.45;transition:opacity var(--mf-t-300);pointer-events:none}

/* ── 18. Chantier 8 — Messagerie : fil de bulles, séparateurs de jour, cartes d'action, composeur,
   groupe repliable, note de tuile ──────────────────────────────────────────────────────────── */
/* Le fil : c'est l'ÉCRAN qui garde ce conteneur (il défile), le composant ne rend que son contenu.
   Hauteur bornée à l'écran moins le bandeau et le composeur : la zone de saisie reste visible. */
.mf-chat{display:flex;flex-direction:column;gap:8px;padding:8px 2px 12px;min-height:160px;max-height:min(60vh,720px);overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;scrollbar-width:thin;font-family:var(--mf-body);color:var(--mf-ink)}
/* Dans une colonne flex bornée en hauteur, un enfant à `overflow:hidden` (la carte d'action) se
   laisserait écraser jusqu'à 0 : rien ne rétrécit, le conteneur défile. */
.mf-chat > *{flex:none}
/* Séparateur de jour : « AUJOURD'HUI », « HIER », « lundi 15 septembre » entre deux filets. */
.mf-chat-day{display:flex;align-items:center;gap:12px;margin:8px 0 2px;font-family:var(--mf-mono);font-size:12.5px;font-weight:500;color:var(--mf-ink3);letter-spacing:.06em;text-transform:uppercase;white-space:nowrap}
.mf-chat-day::before,.mf-chat-day::after{content:"";flex:1;height:1px;background:var(--mf-line)}
/* Bulles : 15 px corps, rayon 12, l'angle côté auteur à 5 px. Les miennes à droite, teintées de
   la marque (ambre à 20 % sur le fond de carte, jamais un aplat : le texte reste en encre). */
.mf-bub{position:relative;max-width:min(80%,560px);padding:10px 14px;border-radius:var(--mf-r-md);font-size:15px;line-height:1.45;border:1px solid var(--mf-line);background:var(--mf-card2);color:var(--mf-ink);animation:mf-in var(--mf-t-300) var(--mf-ease) both}
.mf-bub.mf-them{align-self:flex-start;border-bottom-left-radius:var(--mf-r-xs)}
.mf-bub.mf-me{align-self:flex-end;border-bottom-right-radius:var(--mf-r-xs);background:color-mix(in srgb,var(--mf-accent) 20%,var(--mf-card2));border-color:color-mix(in srgb,var(--mf-accent) 40%,transparent)}
.mf-bub.mf-pending{opacity:.6}
.mf-bub.mf-has-card{width:min(100%,440px)}
.mf-bub-who{font-family:var(--mf-mono);font-size:12.5px;font-weight:500;color:var(--mf-ink2);margin-bottom:3px}
.mf-bub-txt{white-space:pre-wrap;word-break:break-word;overflow-wrap:anywhere}
.mf-bub-cards{display:flex;flex-direction:column;gap:8px;margin-top:8px}
.mf-bub-cards .mf-tile{background:var(--mf-card)}
.mf-bub-txt + .mf-bub-cards{margin-top:10px}
.mf-bub-img{display:block;border-radius:var(--mf-r-sm);overflow:hidden;max-width:320px;background:var(--mf-card)}
.mf-bub-img img{display:block;width:100%;height:auto;max-height:320px;object-fit:cover}
.mf-bub-at{display:flex;justify-content:flex-end;align-items:center;gap:4px;margin-top:4px;font-family:var(--mf-mono);font-size:12.5px;color:var(--mf-ink3);line-height:1;font-variant-numeric:tabular-nums}
.mf-bub-at .mf-ic{width:14px;height:14px;vertical-align:0}
.mf-bub.mf-me .mf-bub-at .mf-ic{color:var(--mf-ok)}
.mf-bub-seen{color:var(--mf-ok)}
.mf-chat-empty{align-self:center;margin:auto;display:flex;flex-direction:column;align-items:center;gap:8px;padding:24px 12px;text-align:center;color:var(--mf-ink3);font-family:var(--mf-mono);font-size:12.5px;max-width:34ch}
.mf-chat-empty .mf-ic{color:var(--mf-ink3)}
/* Carte d'action (alerte système) : centrée, liseré et icône dans le ton, titre 20 px, une phrase,
   l'heure et l'état en 12,5, les boutons de 48 px à droite. `done` : décision prise → liseré vert, estompée. */
.mf-chat-card{position:relative;align-self:center;width:min(100%,520px);display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px 12px;align-items:center;padding:12px 14px 12px 18px;border-radius:var(--mf-r-md);
  border:1px solid color-mix(in srgb,var(--mf-tone) 45%,transparent);background:color-mix(in srgb,var(--mf-tone) 10%,var(--mf-card));overflow:hidden;animation:mf-in var(--mf-t-300) var(--mf-ease) both}
.mf-chat-card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--mf-tone);transition:background var(--mf-t-300)}
.mf-chat-card-ic{width:48px;height:48px;flex:none;border-radius:var(--mf-r-sm);display:grid;place-items:center;background:color-mix(in srgb,var(--mf-tone) 16%,transparent);color:var(--mf-tone)}
.mf-chat-card-ic .mf-ic{width:26px;height:26px}
.mf-chat-card-body{display:flex;flex-direction:column;gap:2px;min-width:0}
.mf-chat-card-body b{font-family:var(--mf-disp);font-weight:600;font-size:20px;line-height:1.15;color:var(--mf-ink)}
.mf-chat-card-body span{font-size:15px;line-height:1.4;color:var(--mf-ink2);overflow-wrap:anywhere}
.mf-chat-card-body small{font-family:var(--mf-mono);font-size:12.5px;color:var(--mf-ink3)}
.mf-chat-card > .mf-btns{grid-column:1/-1;justify-content:flex-end}
.mf-chat-card.mf-done{--mf-tone:var(--mf-ok);opacity:.8;background:var(--mf-card);border-color:var(--mf-line)}
/* Composeur : collé en bas, sur le fond de page, jamais redessiné. Sous 760 px il se pose
   AU-DESSUS de la barre du bas (fixe, 64 px + zone sûre). */
.mf-composer{position:sticky;bottom:0;z-index:2;display:flex;flex-direction:column;gap:8px;padding:8px 0 calc(8px + env(safe-area-inset-bottom,0px));background:var(--mf-bg);border-top:1px solid var(--mf-line);font-family:var(--mf-body)}
.mf-composer-quick{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding:2px 0;-webkit-overflow-scrolling:touch}
.mf-composer-quick::-webkit-scrollbar{display:none}
.mf-composer-quick .mf-tap{flex:none}
.mf-composer-row{display:flex;gap:8px;align-items:flex-end}
.mf-composer-in{flex:1 1 auto;min-width:0;min-height:48px;max-height:160px;padding:12px 14px;border-radius:var(--mf-r-md);border:1px solid var(--mf-line);background:var(--mf-card2);color:var(--mf-ink);font-family:var(--mf-body);font-size:15px;line-height:1.4;resize:none;outline:none;overflow-y:auto;transition:border-color var(--mf-t-300),box-shadow var(--mf-t-300)}
.mf-composer-in:focus{border-color:var(--mf-accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--mf-accent) 25%,transparent)}
.mf-composer-in::placeholder{color:var(--mf-ink3)}
.mf-composer-send,.mf-composer-plus{flex:none}
.mf-composer.mf-busy .mf-composer-send{opacity:.5;pointer-events:none}
@media (max-width:760px){.mf-bub{max-width:88%}.mf-composer{bottom:calc(76px + env(safe-area-inset-bottom,0px))}}
/* Groupe repliable : un titre de section .mf-head en résumé d'un <details>, chevron qui tourne,
   grille qui se replie (l'annuaire par classe : replié au-delà de 10 visages, la recherche l'ouvre). */
.mf-group{min-width:0}
.mf-group > summary{list-style:none;cursor:pointer;-webkit-tap-highlight-color:transparent;border-radius:var(--mf-r-sm);user-select:none;-webkit-user-select:none;min-height:48px}
.mf-group > summary::-webkit-details-marker{display:none}
.mf-group > summary::marker{content:""}
.mf-group > summary:focus-visible{outline:2px solid var(--mf-accent2);outline-offset:2px}
.mf-group > summary.mf-head{margin:14px 0 8px;align-items:center;flex-wrap:nowrap}
.mf-group > summary.mf-head > span:not(.mf-tile-chev){white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;flex:1 1 auto}
.mf-group > summary .mf-tile-chev{margin-left:auto;flex:none}
.mf-group[open] > summary .mf-tile-chev{transform:rotate(180deg)}
.mf-group > .mf-grid{animation:mf-in var(--mf-t-300) var(--mf-ease) both}
.mf-group[hidden]{display:none}
/* Une tuile cachée par un filtre (la recherche de l'annuaire) : `display:flex` battrait l'attribut hidden. */
.mf-tile[hidden]{display:none}
/* Champ de recherche : 48 px, loupe à gauche, mêmes bords et même focus que le composeur. */
.mf-search{position:relative;display:flex;align-items:center;margin:0 0 8px}
.mf-search > .mf-ic{position:absolute;left:14px;color:var(--mf-ink3);pointer-events:none}
.mf-search input{width:100%;min-height:48px;padding:0 14px 0 44px;border-radius:var(--mf-r-sm);border:1px solid var(--mf-line);background:var(--mf-card2);color:var(--mf-ink);font-family:var(--mf-body);font-size:15px;outline:none;appearance:none;-webkit-appearance:none;transition:border-color var(--mf-t-300),box-shadow var(--mf-t-300)}
.mf-search input:focus{border-color:var(--mf-accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--mf-accent) 25%,transparent)}
.mf-search input::placeholder{color:var(--mf-ink3)}
/* Note de tuile : une ligne de texte 12,5 mono sur deux lignes au plus dans l'emplacement libre
   (l'aperçu du dernier message sous un visage). Centrée dans la tuile-visage. */
.mf-tile-note{flex:1 1 100%;min-width:0;font-family:var(--mf-mono);font-size:12.5px;font-weight:500;line-height:1.35;color:var(--mf-ink2);overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow-wrap:anywhere;text-align:left}
.mf-tile-m .mf-tile-note{text-align:center}
.mf-tile-note b{color:var(--mf-ink);font-weight:500}
/* En clair, l'ambre à 20 % sur blanc reste lisible en encre ; le liseré de carte ambré passe à 55 %
   pour tenir 3:1 contre le fond. */
html[data-theme="light"] .mf-bub.mf-me{background:color-mix(in srgb,var(--mf-accent) 14%,var(--mf-card2));border-color:color-mix(in srgb,var(--mf-accent) 55%,transparent)}

/* ── 19. Chantier 9 — Parc, RH, Administration, Clients : horloge d'équipe, calendrier mural,
   barres proportionnelles, barre centrée, colonnes, QR, badgeuse ronde ──────────────────── */
/* Horloge d'équipe : une colonne fixe de visages (--mf-lab) puis la piste ; les heures ne sont
   écrites qu'une fois en tête ; le curseur « maintenant » traverse toutes les lignes (calc sur la
   part de piste : X × (100 % − colonne)). Une ligne badgée depuis > 10 h (`late`) vire à l'ambre. */
.mf-tl-lanes-in{--mf-lab:208px;min-width:640px;position:relative}
.mf-tl-lanes-head{display:grid;grid-template-columns:var(--mf-lab) minmax(0,1fr);height:22px;margin-bottom:6px}
.mf-tl-lanes-ticks{position:relative;display:block;height:22px;margin:0 22px}
.mf-tl-lanes-ticks .mf-tl-tick::after{display:none}
.mf-tl-lanes-body{position:relative;display:flex;flex-direction:column;gap:6px}
.mf-tl-lane{display:grid;grid-template-columns:var(--mf-lab) minmax(0,1fr);align-items:center;gap:0;min-height:48px;padding:0;border:0;border-radius:var(--mf-r-sm);background:none;color:var(--mf-ink);text-align:left;font-family:var(--mf-body);width:100%}
button.mf-tl-lane{cursor:pointer;-webkit-tap-highlight-color:transparent}
button.mf-tl-lane:hover{background:color-mix(in srgb,var(--mf-ink) 5%,transparent)}
.mf-tl-lane:focus-visible{outline:2px solid var(--mf-accent2);outline-offset:-2px}
.mf-tl-lane-lab{display:flex;align-items:center;gap:8px;min-width:0;padding:0 8px 0 4px}
.mf-tl-lane-txt{display:flex;flex-direction:column;min-width:0;gap:1px}
.mf-tl-lane-txt b{font-family:var(--mf-body);font-weight:600;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mf-tl-lane-txt span{font-family:var(--mf-mono);font-size:12.5px;color:var(--mf-ink3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mf-tl-lane.mf-late .mf-tl-lane-txt span{color:var(--mf-regl)}
.mf-tl-lane-track{position:relative;display:block;height:36px;margin:0 22px;border-radius:var(--mf-r-xs);background:color-mix(in srgb,var(--mf-ink) 6%,transparent);overflow:hidden}
.mf-tl-lane.mf-late .mf-tl-lane-track{box-shadow:inset 0 0 0 2px var(--mf-regl)}
.mf-tl-lanes .mf-tl-now,.mf-tl-gantt .mf-tl-now{left:calc(var(--mf-lab) + 22px + (100% - var(--mf-lab) - 44px) * var(--mf-x,0));top:-4px;bottom:0}
/* Près du bord droit, le mot « maintenant » passe à gauche du trait : il ne sort jamais de la frise. */
.mf-tl-now.mf-flip span{left:auto;right:10px}
.mf-tl-lanes .mf-tl-empty,.mf-tl-gantt .mf-tl-empty,.mf-tl-month .mf-tl-empty{font-family:var(--mf-mono);font-size:12.5px;color:var(--mf-ink3);padding:8px 4px}
/* Calendrier mural : grille jours × personnes. Première colonne collante (les noms restent visibles
   quand on fait défiler les jours), en-tête collant ; week-ends grisés, aujourd'hui cerclé de la
   marque ; cases vides = cibles de 40 px (nouvelle absence) ; blocs = boutons de 40 px arrondis. */
.mf-tl-month{--mf-lab:168px;display:grid;grid-template-columns:var(--mf-lab) repeat(var(--mf-days,31),minmax(30px,1fr));gap:2px;min-width:max-content;padding:2px 0 4px;position:relative}
.mf-tl-mcorner{position:sticky;left:0;z-index:3;background:var(--mf-bg)}
.mf-tl-mh{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:1px;height:44px;border-radius:var(--mf-r-xs);font-family:var(--mf-mono);font-size:12.5px;font-weight:500;color:var(--mf-ink3);line-height:1}
.mf-tl-mh b{font-family:var(--mf-disp);font-weight:600;font-size:15px;color:var(--mf-ink2);padding-bottom:4px}
.mf-tl-mh.mf-we{color:var(--mf-ink3);opacity:.7}
.mf-tl-mh.mf-today b{color:var(--mf-accent)}
.mf-tl-mh.mf-today{box-shadow:inset 0 -3px 0 var(--mf-accent)}
.mf-tl-mlab{position:sticky;left:0;z-index:2;display:flex;align-items:center;gap:8px;min-height:40px;padding:0 8px 0 4px;background:var(--mf-bg);border-radius:var(--mf-r-xs);min-width:0}
.mf-tl-mlab b{font-family:var(--mf-body);font-weight:600;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--mf-ink)}
.mf-tl-mlab[data-act]{cursor:pointer;transition:transform var(--mf-t-150) var(--mf-ease)}
.mf-tl-mlab[data-act]:hover{background:color-mix(in srgb,var(--mf-ink) 5%,var(--mf-bg))}
.mf-tl-mlab.mf-pressed{transform:scale(.97)}
.mf-tl-mcell{min-height:40px;border-radius:var(--mf-r-xs);background:color-mix(in srgb,var(--mf-ink) 5%,transparent);transition:background var(--mf-t-150)}
.mf-tl-mcell.mf-we{background:color-mix(in srgb,var(--mf-ink) 2%,transparent);background-image:repeating-linear-gradient(135deg,transparent 0 5px,color-mix(in srgb,var(--mf-ink) 5%,transparent) 5px 7px)}
.mf-tl-mcell.mf-today{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--mf-accent) 55%,transparent)}
.mf-tl-mcell[data-act]{cursor:pointer;-webkit-tap-highlight-color:transparent}
.mf-tl-mcell[data-act]:hover{background:color-mix(in srgb,var(--mf-accent) 16%,transparent)}
.mf-tl-mcell.mf-pressed{background:color-mix(in srgb,var(--mf-accent) 28%,transparent)}
.mf-tl-mcell:focus-visible{outline:2px solid var(--mf-accent2);outline-offset:-2px}
.mf-tl-mblk{z-index:1;display:flex;align-items:center;justify-content:center;min-height:40px;margin:3px 1px;padding:0 6px;border:0;border-radius:var(--mf-r-sm);background:var(--mf-tone);color:var(--mf-on-tone);
  font-family:var(--mf-disp);font-weight:700;font-size:15px;letter-spacing:.02em;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;box-shadow:inset 0 0 0 1px rgba(0,0,0,.12);
  cursor:default;-webkit-tap-highlight-color:transparent;transition:transform var(--mf-t-150) var(--mf-ease),filter var(--mf-t-150)}
button.mf-tl-mblk{cursor:pointer}
button.mf-tl-mblk:hover{filter:brightness(1.1)}
.mf-tl-mblk.mf-hatch{background-image:repeating-linear-gradient(135deg,transparent 0 6px,rgba(0,0,0,.22) 6px 9px)}
.mf-tl-mblk.mf-pressed{transform:scale(.96)}
.mf-tl-mblk:focus-visible{outline:2px solid var(--mf-accent2);outline-offset:1px}
/* Barres proportionnelles : libellé à gauche (code + titre), piste, barre dans la couleur de l'état,
   remplie selon l'avancement (le voile clair sur la part non faite), cerclée de rouge en retard. */
.mf-tl-gantt{--mf-lab:184px;min-width:640px;position:relative}
.mf-tl-gantt .mf-tl-lanes-head{grid-template-columns:var(--mf-lab) minmax(0,1fr)}
.mf-tl-gbody{position:relative;display:flex;flex-direction:column;gap:6px}
.mf-tl-grow{display:grid;grid-template-columns:var(--mf-lab) minmax(0,1fr);align-items:center;min-height:48px}
.mf-tl-glab{display:flex;flex-direction:column;min-width:0;gap:1px;padding:0 8px 0 4px}
.mf-tl-glab b{font-family:var(--mf-mono);font-weight:500;font-size:12.5px;color:var(--mf-ink2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mf-tl-glab span{font-family:var(--mf-body);font-weight:600;font-size:15px;color:var(--mf-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mf-tl-gtrack{position:relative;display:block;height:40px;margin:0 22px;border-radius:var(--mf-r-xs);background:color-mix(in srgb,var(--mf-ink) 6%,transparent)}
.mf-tl-gbar{position:absolute;top:4px;bottom:4px;display:flex;align-items:center;padding:0 8px;border:0;border-radius:var(--mf-r-xs);overflow:hidden;
  background:color-mix(in srgb,var(--mf-tone) 32%,var(--mf-card2));color:var(--mf-ink);font-family:var(--mf-mono);font-size:12.5px;font-weight:500;white-space:nowrap;
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--mf-tone) 60%,transparent);cursor:default;-webkit-tap-highlight-color:transparent;transition:transform var(--mf-t-150) var(--mf-ease),filter var(--mf-t-150)}
.mf-tl-gbar i{position:absolute;left:0;top:0;bottom:0;width:var(--mf-pct,0%);background:var(--mf-tone);opacity:.9;transition:width var(--mf-t-1200) var(--mf-ease)}
.mf-tl-gbar span{position:relative;z-index:1;color:var(--mf-ink)}
.mf-tl-gbar.mf-late{box-shadow:inset 0 0 0 2px var(--mf-panne)}
button.mf-tl-gbar{cursor:pointer}
button.mf-tl-gbar:hover{filter:brightness(1.08)}
.mf-tl-gbar.mf-pressed{transform:scale(.97)}
.mf-tl-gbar:focus-visible{outline:2px solid var(--mf-accent2);outline-offset:1px}
/* Barre centrée sur zéro : un trait au milieu, le remplissage part vers la droite (positif) ou vers
   la gauche (négatif — ancré à droite du centre pour grandir vers la gauche). */
.mf-gauge-bar.mf-center .mf-g-zero{position:absolute;top:-3px;bottom:-3px;left:50%;width:2px;margin-left:-1px;background:var(--mf-ink3);opacity:.7}
.mf-gauge-bar.mf-center .mf-g-fill{left:50%;border-radius:0 var(--mf-r-xs) var(--mf-r-xs) 0}
.mf-gauge-bar.mf-center.mf-neg .mf-g-fill{left:auto;right:50%;border-radius:var(--mf-r-xs) 0 0 var(--mf-r-xs)}
/* Colonnes cliquables (les 52 semaines) : 48 px de large, 120 px de haut, côte à côte, défilement
   horizontal au doigt ; le libellé (S38) dessous, la valeur au-dessus. */
.mf-gauge-v.mf-gauge-cols{display:flex;width:100%;max-width:100%}
.mf-gauge-cols .mf-gauge-rows{flex-direction:row;align-items:flex-end;gap:4px;width:100%;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:thin;padding-bottom:4px;-webkit-overflow-scrolling:touch}
.mf-gauge-v.mf-gauge-cols .mf-gauge-bar{width:48px;min-width:48px;height:132px;padding:4px 2px;border:0;border-radius:var(--mf-r-sm);background:none;gap:4px;grid-template-rows:auto 1fr auto}
.mf-gauge-v.mf-gauge-cols .mf-gauge-bar .mf-g-val{order:0;font-size:12.5px}
.mf-gauge-v.mf-gauge-cols .mf-gauge-bar .mf-g-track{order:1;width:28px;margin:0 auto;border-radius:var(--mf-r-xs)}
.mf-gauge-v.mf-gauge-cols .mf-gauge-bar .mf-g-lab{order:2;max-width:48px;font-size:12.5px}
.mf-gauge-v.mf-gauge-cols .mf-gauge-bar[aria-pressed="true"]{background:color-mix(in srgb,var(--mf-accent) 14%,transparent);box-shadow:inset 0 0 0 1px var(--mf-accent)}
.mf-gauge-v.mf-gauge-cols .mf-gauge-bar.mf-today .mf-g-lab{color:var(--mf-accent)}
/* QR code : un carré blanc à coins arrondis (il se scanne dans les deux thèmes), jamais étiré. */
.mf-qr{display:block;border-radius:var(--mf-r-sm);max-width:100%;height:auto;background:#fff}
.mf-qr-card{display:flex;flex-direction:column;align-items:center;gap:8px;padding:12px;border-radius:var(--mf-r-md);background:#fff}
/* La badgeuse : un bouton rond de 120 px — la seule chose à toucher au poste. Le chrono dedans (12,5
   mono, la donnée court), le libellé dessous. Vert = au poste, marque = pointer l'arrivée. */
.mf-tap.mf-xl{width:120px;height:120px;min-width:120px;min-height:120px;border-radius:50%;flex-direction:column;gap:4px;padding:0;font-size:15px;font-weight:700;white-space:normal;text-align:center;line-height:1.1}
.mf-tap.mf-xl .mf-ic{width:28px;height:28px}
.mf-tap.mf-xl b{font-family:var(--mf-disp);font-weight:700;font-size:20px;font-variant-numeric:tabular-nums;line-height:1}
.mf-tap.mf-xl.mf-tone{box-shadow:0 0 0 6px color-mix(in srgb,var(--mf-tone) 22%,transparent)}
/* Rangée de « faits » d'un dossier (contrat, identité) : libellé 12,5 mono, valeur 15 px — deux
   colonnes qui se replient sur tablette. Pas un formulaire imprimé : des cartes de faits. */
.mf-facts{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:8px}
.mf-fact{display:flex;flex-direction:column;gap:2px;min-height:56px;padding:8px 10px;border-radius:var(--mf-r-sm);background:var(--mf-card2);border:1px solid var(--mf-line);min-width:0}
.mf-fact small{font-family:var(--mf-mono);font-size:12.5px;font-weight:500;color:var(--mf-ink3);letter-spacing:.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mf-fact b{font-family:var(--mf-body);font-weight:600;font-size:15px;color:var(--mf-ink);overflow-wrap:anywhere}
.mf-fact.mf-empty b{color:var(--mf-ink3);font-weight:400}
/* Tuile-visage à deux jauges (équipe RH) : les barres posées dans l'emplacement libre prennent
   toute la largeur et restent lisibles à 12,5. */
.mf-tile-m .mf-tile-html > .mf-gauge{width:100%;flex:1 1 100%}
.mf-tile-m .mf-gauge-bar{min-width:0;grid-template-columns:minmax(0,auto) minmax(0,1fr) auto;gap:6px}
.mf-tile-m .mf-gauge-bar .mf-g-lab{font-family:var(--mf-mono);font-size:12.5px;color:var(--mf-ink3)}
.mf-tile-m .mf-gauge-bar .mf-g-track{height:8px}
.mf-tile-m .mf-gauge-bar .mf-g-mark{top:-3px;bottom:-3px}
/* Une ligne repliée cachée par l'écran (« Aucun client ne correspond » tant que la recherche trouve) disparaît vraiment. */
.mf-quiet[hidden],.mf-head[hidden],.mf-grid[hidden],.mf-card[hidden]{display:none}
/* Le visage dans le bandeau (fiche RH, compte) : 64 px, cerclé de la couleur de l'état, à gauche du chiffre. */
.mf-hero-av{flex:none;align-self:center}
.mf-hero-av .mf-av{box-shadow:0 0 0 3px var(--mf-tone);font-size:20px}
/* Tuiles allumées / éteintes (les modules de l'organisation) : une tuile de menu qui porte un état.
   Éteinte = grisée et désaturée ; allumée = pleine, dans la teinte de sa famille (pas la marque). */
.mf-toggles .mf-menu-item{transition:opacity var(--mf-t-300),filter var(--mf-t-300),background var(--mf-t-300),border-color var(--mf-t-300),transform var(--mf-t-150) var(--mf-ease)}
.mf-toggles .mf-menu-item[aria-pressed="false"]{opacity:.5;filter:grayscale(.7);background:var(--mf-card2);border-color:var(--mf-line);box-shadow:none}
.mf-toggles .mf-menu-item.mf-tap[aria-pressed="true"]{border-color:var(--mf-tone);box-shadow:inset 0 0 0 1px var(--mf-tone);background:color-mix(in srgb,var(--mf-tone) 18%,var(--mf-card2))}
/* Sous-texte d'une barre horizontale (« solde 12 h · 34 j pointés » sous le nom) : 12,5 mono, sur sa ligne. */
.mf-gauge-h:not(.mf-gauge-v) .mf-gauge-bar:has(.mf-g-sub){grid-template-columns:minmax(150px,30%) minmax(0,1fr) auto}
.mf-gauge-h:not(.mf-gauge-v) .mf-gauge-bar .mf-g-sub{display:block;font-family:var(--mf-mono);font-size:12.5px;font-weight:500;color:var(--mf-ink3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Dans une tuile-visage : libellé et valeur sur une ligne, la piste pleine largeur dessous. */
.mf-tile-m .mf-gauge-bar{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"lab val" "track track";gap:2px 8px;min-width:0}
.mf-tile-m .mf-gauge-bar .mf-g-lab{grid-area:lab;text-align:left}
.mf-tile-m .mf-gauge-bar .mf-g-val{grid-area:val}
.mf-tile-m .mf-gauge-bar .mf-g-track{grid-area:track}
/* Une ligne d'état centrée qui déborde s'aligne à gauche (le point reste visible), au lieu d'être coupée des deux côtés. */
.mf-tile-m .mf-tile-sub,.mf-tile-m .mf-tile-state,.mf-tile-m .mf-tile-meta{justify-content:safe center}
@media (max-width:760px){.mf-tl-lanes-in,.mf-tl-gantt{min-width:560px}.mf-tl-lanes-in{--mf-lab:120px}.mf-tl-gantt{--mf-lab:132px}.mf-tl-month{--mf-lab:120px}.mf-tap.mf-xl{width:112px;height:112px;min-width:112px;min-height:112px}}
html[data-theme="light"] .mf-tl-gbar span{color:var(--mf-ink)}

/* ── 20. Chantier 10 — Ordres de fabrication, Pièces, Archives : glisser une carte entre groupes,
   poignée tactile, photo d'en-tête de groupe, kanban étroit, gamme éditable (total, « + »), tampon
   sur toute taille de tuile, grille de cartes-pochettes, galerie de documents. ──────────────────── */
/* La poignée : 48 px, six points, `touch-action:none` pour que le doigt qui la tient ne fasse pas
   défiler la page. Sur pointeur fin (souris) elle est cachée : on saisit la carte n'importe où. */
.mf-tile-grip{cursor:grab;touch-action:none;color:var(--mf-ink3)}
.mf-tile-grip:active{cursor:grabbing}
@media (pointer:fine){.mf-tile-grip{display:none}}
/* La carte d'origine reste en place, grisée ; le fantôme suit le doigt, légèrement soulevé. */
.mf-tile.mf-drag-src{opacity:.35}
.mf-drag-ghost{box-shadow:0 18px 40px -10px rgba(0,0,0,.6),0 0 0 1px var(--mf-accent);transform-origin:center;opacity:.96;will-change:transform}
.mf-drag-ghost .mf-tile-acts{visibility:hidden}
/* Pendant le glissé, chaque cible se signale (pointillé) ; celle sous le doigt s'allume. */
.mf-dragging [data-drop]{outline:2px dashed color-mix(in srgb,var(--mf-accent) 45%,transparent);outline-offset:-2px;transition:outline-color var(--mf-t-150),box-shadow var(--mf-t-300)}
.mf-dragging [data-drop].mf-drop{outline-color:var(--mf-accent);box-shadow:var(--mf-glow);background:color-mix(in srgb,var(--mf-accent) 8%,var(--mf-card))}
/* Photo d'en-tête d'un groupe (la machine de la vue « Plan » des ordres) : 48 px, cerclée du ton. */
.mf-plan-zh.mf-has-img{align-items:center}
.mf-plan-zimg{width:48px;height:48px;border-radius:var(--mf-r-sm);object-fit:cover;flex:none;box-shadow:0 0 0 2px var(--mf-tone)}
.mf-plan-zh.mf-has-img h4{flex:1 1 auto}
/* Colonne étroite : la carte se réorganise d'après la largeur RÉELLE de la colonne, pas d'après
   un drapeau posé à la main (l'ancien `.mf-plan-narrow` n'était jamais émis — les règles ci-dessous
   ne s'appliquaient donc jamais, et le tampon « 3 h 40 » passait par-dessus le nom de la machine).
   Sous 300 px, la petite carte passe sur deux rangées : média + corps (le nom garde au moins
   140 px), puis tampon et actions à droite. */
@container mfcol (max-width:400px){
  .mf-tile-s{flex-wrap:wrap;row-gap:8px;padding-right:6px}
  /* Le nom tient sur deux lignes plutôt que de finir en « To… » : dans une colonne étroite,
     « Décolleteuse Tornos Deco 10 » ne rentre pas sur une ligne, et un nom coupé au deuxième
     caractère ne désigne plus rien. */
  .mf-tile-s .mf-tile-name{white-space:normal;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
  /* `min-width:140px` et pas `min-width:0` : c'est le refus de rétrécir qui FORCE le passage à
     la ligne. Avec `min-width:0`, la rangée ne se coupe jamais — le corps s'écrase à 90 px et le
     nom de la machine sort en un mot par ligne. */
  .mf-tile-s .mf-tile-body{flex:1 1 140px;min-width:140px}
  .mf-tile-s .mf-tile-stamp{order:3;margin-left:auto}
  .mf-tile-s .mf-tile-acts{order:4;margin-left:auto;flex-wrap:wrap;justify-content:flex-end}
}
/* Sous 820 px (tablette en portrait comprise), les colonnes s'empilent pleine largeur : le flux
   gauche→droite se lit de haut en bas, jamais en 3 + 2. */
@media (max-width:820px){.mf-plan-kb .mf-plan-z,.mf-plan-kb .mf-plan-z.mf-wide,.mf-plan-kb .mf-plan-z.mf-empty{min-width:100%;flex-basis:100%}
  .mf-plan-kb .mf-plan-z.mf-empty .mf-plan-zt{min-height:0}
  .mf-plan-kb .mf-plan-zt{grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr))}}
/* La gamme éditable : pastille « + » en pointillé, total en gros au bout de la frise. */
.mf-tl-step.mf-tl-add .mf-tl-step-dot{border-style:dashed;color:var(--mf-accent);border-color:var(--mf-accent)}
.mf-tl-step.mf-tl-add::before{display:none}
.mf-tl-step.mf-tl-add b{font-family:var(--mf-body);font-weight:600;font-size:15px;color:var(--mf-accent)}
.mf-tl-total{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:2px;padding:0 12px 0 16px;margin-left:4px;border-left:2px solid var(--mf-line);min-width:96px}
.mf-tl-total b{font-family:var(--mf-disp);font-weight:700;font-size:20px;line-height:1;color:var(--mf-tone);font-variant-numeric:tabular-nums;white-space:nowrap}
.mf-tl-total span{font-family:var(--mf-mono);font-size:12.5px;color:var(--mf-ink2);white-space:nowrap}
/* Le tampon sur une petite tuile : dans la rangée, entre le corps et les actions (jamais par-dessus
   le nom) ; sur une tuile de mur, par-dessus l'image en haut à droite. Sa teinte propre gagne. */
.mf-tile-s .mf-tile-stamp{position:static;order:2;flex:none;align-items:flex-end;padding:4px 8px}
.mf-tile-s .mf-tile-acts{order:3}
.mf-tile-s .mf-tile-foot{order:5}
.mf-tile-m .mf-tile-stamp{top:8px;right:8px;padding:4px 8px}
.mf-tile-stamp.mf-tone-ok,.mf-tile-stamp.mf-tone-regl,.mf-tile-stamp.mf-tone-panne,.mf-tile-stamp.mf-tone-resa,.mf-tile-stamp.mf-tone-prod,.mf-tile-stamp.mf-tone-teal,.mf-tile-stamp.mf-tone-neutral,.mf-tile-stamp.mf-tone-accent{background:var(--mf-tone);color:var(--mf-on-tone)}
/* Grille de cartes-pochettes (catalogue, archives) : grandes cartes de 260 px, l'image en fond, le
   nom dessus — dans une grille, pas en pleine rangée. Les cartes s'alignent en haut. */
.mf-grid.mf-grid-l{--mf-col:260px;align-items:stretch}
/* Dans une colonne de 260 px, le corps prend TOUTE la largeur et la rangée d'actions (Lancer · ⋯)
   passe dessous, alignée à droite — sinon deux boutons écrasaient le nom à trois lettres par ligne. */
.mf-grid.mf-grid-l > .mf-tile-l{min-height:200px;flex-wrap:wrap;align-content:flex-end;row-gap:8px}
.mf-grid.mf-grid-l > .mf-tile-l .mf-tile-body{flex:1 1 100%;padding-top:64px}
.mf-grid.mf-grid-l > .mf-tile-l .mf-tile-name{overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.mf-grid.mf-grid-l > .mf-tile-l .mf-tile-meta{gap:6px 10px}
/* Sur la pochette, le badge (« Nouveau », « 3 doc. ») se pose à côté de la vignette, en haut à
   gauche : le coin droit appartient au tampon (verdict, temps par pièce). */
.mf-grid.mf-grid-l > .mf-tile-l .mf-tile-badge{right:auto;left:72px;top:24px}
/* Une grande carte dont la vignette 3D est peinte après coup (data-vig) : le fond arrive par --mf-img,
   la silhouette en filigrane s'efface — sans redessiner la carte. */
.mf-tile-l.mf-vig-on{background-image:linear-gradient(180deg,rgba(var(--mf-veil),.35) 0%,rgba(var(--mf-veil),.93) 100%),var(--mf-img,none);background-size:cover;background-position:center}
/* Galerie du dossier : vignettes carrées 128 px, le nom dessous, 3-4 par ligne dans le tiroir. */
.mf-gallery{--mf-col:132px}
.mf-gallery .mf-tile-m .mf-tile-media{width:112px;height:112px}
.mf-gallery .mf-tile-m .mf-tile-name{font-family:var(--mf-body);font-weight:600;font-size:15px;white-space:normal;line-height:1.25;max-height:2.5em;overflow:hidden}
/* Une bannette d'affectation (« À affecter ») : le groupe est en pointillé, sa teinte marque. */
.mf-plan-z.mf-tray{border-style:dashed}
/* Le corps d'une fiche en trois blocs : titre de bloc 20 px + une grille de champs. */
.mf-fiche-blk{border:1px solid var(--mf-line);border-radius:var(--mf-r-md);padding:12px 14px 14px;margin-bottom:12px;background:color-mix(in srgb,var(--mf-card) 60%,transparent)}
.mf-fiche-blk > h4{margin:0 0 8px;font-family:var(--mf-disp);font-weight:600;font-size:20px;line-height:1.15;display:flex;align-items:center;gap:8px;color:var(--mf-ink)}
.mf-fiche-blk > h4 .mf-ic{color:var(--mf-accent)}
.mf-req{color:var(--mf-panne);font-weight:700;margin-left:2px}
/* L'éditeur d'une opération, sous la frise : champs sur une ligne, boutons 48 px. */
.mf-gamme-ed{display:flex;flex-wrap:wrap;gap:8px;align-items:end;margin-top:8px;padding:10px;border:1px solid var(--mf-line);border-radius:var(--mf-r-sm);background:var(--mf-card2)}
.mf-gamme-ed > div{display:flex;flex-direction:column;gap:4px;flex:1 1 120px;min-width:0}
.mf-gamme-ed > div > label{font-family:var(--mf-mono);font-size:12.5px;color:var(--mf-ink2)}
.mf-gamme-ed > div.mf-btns{flex:1 1 100%;flex-direction:row;justify-content:flex-end;gap:8px}
/* Champ de saisie posé dans une barre mf : hauteur de cible (48 px), rayon bouton, police corps. */
.mf-inp{min-height:48px;padding:0 14px;border:1px solid var(--mf-line);border-radius:var(--mf-r-sm);background:var(--mf-card2);color:var(--mf-ink);font-family:var(--mf-body);font-size:15px;min-width:0}
.mf-inp:focus-visible{outline:2px solid var(--mf-accent2);outline-offset:1px}
.mf-inp.mf-grow{flex:1 1 200px}
/* Frise mensuelle des archives : une ligne verticale du temps, un jalon par mois (point dans la
   couleur de l'année scolaire), les cartes-dossiers accrochées à droite ; un mois ancien est
   replié d'un tap (c'est un <details class="mf-group">, le chevron tourne). */
.mf-months{position:relative;padding-left:26px}
.mf-months::before{content:"";position:absolute;left:9px;top:12px;bottom:12px;width:2px;background:var(--mf-line);border-radius:1px}
.mf-months .mf-group > summary.mf-head{position:relative;margin:10px 0 8px}
.mf-months .mf-group > summary.mf-head::before{content:"";position:absolute;left:-23px;top:50%;width:12px;height:12px;margin-top:-6px;border-radius:50%;background:var(--mf-tone,var(--mf-accent));box-shadow:0 0 0 3px var(--mf-bg);transition:box-shadow var(--mf-t-300)}
.mf-months .mf-group[open] > summary.mf-head::before{box-shadow:0 0 0 3px var(--mf-bg),0 0 0 5px color-mix(in srgb,var(--mf-tone,var(--mf-accent)) 35%,transparent)}
.mf-months .mf-group > .mf-grid{margin-bottom:6px}
@media (max-width:760px){.mf-months{padding-left:20px}.mf-months::before{left:6px}.mf-months .mf-group > summary.mf-head::before{left:-19px;width:10px;height:10px;margin-top:-5px}}
/* La carte-pochette qui porte une gamme en pied (frise) garde sa vignette en fond et laisse la frise
   respirer sur toute la largeur ; le tampon (temps par pièce, verdict) reste lisible sur la photo. */
.mf-grid.mf-grid-l > .mf-tile-l.mf-has-foot{align-items:flex-start}
.mf-grid.mf-grid-l > .mf-tile-l .mf-tile-stamp{top:12px;right:12px}
.mf-grid.mf-grid-l > .mf-tile-l .mf-tile-acts{align-self:flex-end;margin-left:auto}
/* La rangée des machines qui reçoivent une pièce glissée : tuiles serrées, jauge de charge dessous. */
.mf-grid.mf-machrow{--mf-col:200px}
.mf-grid.mf-machrow .mf-tile-s .mf-tile-media{width:48px;height:48px}
/* La bande « cette semaine » : un titre 20 px, une grille de pochettes, rien d'autre. */
.mf-band{margin-top:14px}
.mf-band > .mf-head{margin:0 0 8px}
/* Une pastille de gamme sélectionnée (éditeur ouvert dessous) se cercle de la marque. */
.mf-tl-step.mf-cur .mf-tl-step-dot{box-shadow:0 0 0 3px var(--mf-bg),0 0 0 5px var(--mf-accent)}
/* Le pied d'une fiche : les boutons secondaires à gauche, l'action principale à droite, cibles 48 px. */
.mf-fiche-foot{display:flex;gap:8px;flex-wrap:wrap;align-items:center;justify-content:flex-end;margin-top:12px;padding-top:12px;border-top:1px solid var(--mf-line)}
.mf-fiche-foot .mf-spacer{flex:1 1 auto}

/* ── 10. Mouvement réduit : tout s'arrête, les valeurs finales s'affichent ── */
@media (prefers-reduced-motion:reduce){
  [class*="mf-"],[class*="mf-"]::before,[class*="mf-"]::after{animation:none!important;transition:none!important}
  .mf-gauge .mf-g-fill,.mf-gauge .mf-g-line{transition:none!important}
}
/* ── Impression : ni ombre ni fond sombre ─────────────────────────────────── */
@media print{
  .mf-hero,.mf-tile,.mf-deck-card,.mf-plan,.mf-plan-z,.mf-tl-col{box-shadow:none!important;background:#fff!important;border-color:#c9ced6!important;color:#17202E!important}
  .mf-wheel-ov,.mf-flow:not(.mf-inline),.mf-bar,.mf-undo,.mf-fab,nav.side.mf-rail,.mf-composer{display:none!important}
  .mf-chat{max-height:none!important;overflow:visible!important}
}