/* ═══════════════════════════════════════════════════════════════════════════
 *  mobile_composants.css — LE GABARIT TÉLÉPHONE, EN PIÈCES COMMUNES (préfixe .mx-)
 *  Lot 0 du chantier « style Préparation partout » (09/10/2026).
 * ───────────────────────────────────────────────────────────────────────────
 *  Référence : claude/REFERENCE_UI_PREPARATION.md §3 bis (règle permanente de
 *  Julien, 09/10/2026 22:32). Les mesures sont celles de Préparation
 *  (css/logistique_tableau.css, bloc ≤ 768 px) : on ne les invente pas, on les
 *  rend RÉUTILISABLES. Tout écran téléphone, existant ou nouveau, prend ces
 *  pièces au lieu de recopier des valeurs.
 *
 *  Pièces : onglets d'état 2 × N (.mx-onglets) · bouton-filtre (.mx-filtre)
 *  et bouton d'alerte rouge (.mx-alerte) · feuille qui monte avec ronds radio
 *  (.mx-feuille) · recherche (.mx-rech) · carte (.mx-carte) · bouton principal
 *  (.mx-principal) et outils (.mx-outil) · état vide (.mx-vide) · bloc replié
 *  (.mx-repli).
 *
 *  Construites par js/mobile_composants.js (mxOnglets, mxFiltre, mxFeuille,
 *  mxRecherche) — le HTML ne s'écrit pas à la main.
 *  Contrôlé par banc/banc_mobile_style.mjs (+ banc/lib_mobile_style.mjs, le
 *  contrôle de conformité réutilisable sur n'importe quel écran).
 *
 *  Couleurs : UNIQUEMENT les variables de base.css (charte, §0000).
 *  Hors du @media : ces classes n'existent que dans du HTML produit pour le
 *  téléphone (mobileEstActif) ; le bureau ne les rencontre jamais, il ne
 *  change donc pas. Les déclarer partout permet aussi de les tester seules.
 * ═══════════════════════════════════════════════════════════════════════════ */

/* ── Onglets d'état : grille 2 × N, 48 px, jamais de rangée qui défile ───── */
.mx-onglets { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 12px 0 10px; }
.mx-onglet {
  appearance: none; font: inherit; font-family: 'DM Sans', sans-serif;
  display: flex; align-items: center; gap: 8px; min-width: 0; min-height: 48px;
  padding: 6px 12px; border-radius: 12px; border: 1.5px solid var(--border);
  background: var(--white); color: var(--text); text-align: left; cursor: pointer;
}
.mx-onglet .mx-lamp { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; background: var(--wood-light); }
.mx-onglet .mx-lib { flex: 1; min-width: 0; font-size: 13px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mx-onglet .mx-n { font-family: 'DM Mono', monospace; font-size: 15px; color: var(--wood-dark); flex-shrink: 0; }
.mx-onglet.on { border-color: var(--wood-dark); box-shadow: 0 0 0 3px var(--accent-soft); }
.mx-onglet:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* Couleur de la lampe = couleur de l'état (rien d'autre n'est coloré) */
.mx-lamp.rouge  { background: var(--red); }
.mx-lamp.orange { background: var(--orange); }
.mx-lamp.vert   { background: var(--green); }
.mx-lamp.bleu   { background: var(--accent); }
.mx-lamp.violet { background: var(--violet); }
.mx-lamp.rouille{ background: var(--rust); }

/* ── Bouton-filtre « FILTRE · valeur · nombre ▾ » + bouton d'alerte rouge ── */
.mx-fbar { display: flex; gap: 8px; margin-top: 10px; min-width: 0; }
.mx-filtre {
  appearance: none; font: inherit; font-family: 'DM Sans', sans-serif;
  flex: 1; min-width: 0; min-height: 44px; display: flex; align-items: center; gap: 8px;
  padding: 0 12px; border-radius: 12px; border: 1.5px solid var(--wood-dark);
  background: var(--white); color: var(--wood-dark); cursor: pointer; text-align: left;
}
.mx-filtre .mx-v { display: flex; align-items: center; gap: 6px; }
.mx-filtre .mx-v[hidden] { display: none; }
.mx-v-t { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
/* Bouton secondaire (« Priorité ▾ ») : à côté du principal, contour neutre ; contour foncé quand il filtre. */
.mx-filtre.compact { flex: 0 0 auto; border-color: var(--border); }
.mx-filtre.compact .mx-k { color: var(--wood-dark); font-size: 13px; letter-spacing: 0; text-transform: none; }
.mx-filtre.compact.actif { border-color: var(--wood-dark); box-shadow: 0 0 0 3px var(--accent-soft); }
.mx-filtre .mx-k { font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--text-muted); flex-shrink: 0; }
.mx-filtre .mx-v { font-size: 14px; font-weight: 700; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mx-filtre .mx-n { margin-left: auto; font-family: 'DM Mono', monospace; font-size: 13px; background: var(--accent-soft); border-radius: 999px; padding: 1px 8px; flex-shrink: 0; }
.mx-filtre svg, .mx-alerte svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.mx-alerte {
  appearance: none; font: inherit; font-family: 'DM Sans', sans-serif;
  min-height: 44px; padding: 0 12px; border-radius: 12px; border: 1.5px solid var(--red-line);
  background: var(--red-soft); color: var(--red); font-size: 13px; font-weight: 700;
  display: flex; align-items: center; gap: 6px; cursor: pointer; flex-shrink: 0;
}
.mx-alerte .mx-pt { width: 7px; height: 7px; border-radius: 50%; background: var(--red); }
.mx-alerte[hidden], .mx-filtre .mx-n[hidden] { display: none; }
.mx-filtre .mx-n[hidden] + svg { margin-left: auto; }   /* sans nombre, la flèche reste calée à droite */   /* le display:flex ci-dessus l'emporterait sur [hidden] */
.mx-alerte.on { background: var(--red); border-color: var(--red); color: var(--white); }
.mx-alerte.on .mx-pt { background: var(--white); }
.mx-filtre:focus-visible, .mx-alerte:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ── Feuille qui monte : poignée, titre 17 px, liste blanche, ronds radio ── */
/* z-index 9500 : au-dessus des fenêtres (.modal-overlay 9000) et de la barre de la fiche (9100), sous
   les dialogues UI.confirm (100100) et les toasts (100200) — une feuille ouverte DEPUIS une fiche doit se voir. */
.mx-feuille-fond { position: fixed; inset: 0; z-index: 9500; background: rgba(27, 31, 35, .42); }
.mx-feuille {
  position: absolute; left: 0; right: 0; bottom: 0; max-height: 84vh; overflow-y: auto;
  background: var(--wood-bg); border-radius: 16px 16px 0 0;
  padding: 0 16px calc(24px + env(safe-area-inset-bottom, 0px));
  font-family: 'DM Sans', sans-serif; animation: mxMonte .22s ease;
}
@keyframes mxMonte { from { transform: translateY(100%); } to { transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { .mx-feuille { animation: none; } }
.mx-feuille-tete { position: sticky; top: 0; z-index: 1; background: var(--wood-bg); padding: 0 0 8px; }
.mx-poignee { width: 40px; height: 5px; border-radius: 999px; background: var(--wood-light); margin: 8px auto 10px; }
.mx-feuille-ligne { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.mx-feuille-t { font-size: 17px; font-weight: 800; color: var(--wood-dark); padding: 2px 4px; min-width: 0; }
.mx-fermer {
  appearance: none; font: inherit; min-height: 44px; padding: 0 14px; border-radius: 12px;
  border: 1.5px solid var(--border); background: var(--white); color: var(--wood-dark);
  font-size: 14px; font-weight: 700; cursor: pointer; flex-shrink: 0;
}
.mx-fermer:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.mx-choix-l { background: var(--white); border-radius: 16px; overflow: hidden; }
.mx-choix-sep { font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--text-muted); padding: 14px 4px 6px; }
.mx-choix {
  appearance: none; font: inherit; width: 100%; display: flex; align-items: center; gap: 12px;
  min-height: 52px; padding: 0 14px; border: 0; border-bottom: 1px solid var(--border);
  background: var(--white); color: var(--text); font-size: 16px; text-align: left; cursor: pointer;
}
.mx-choix:last-child { border-bottom: 0; }
.mx-choix .mx-rd { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--wood-light); flex-shrink: 0; box-sizing: border-box; }
.mx-choix .mx-lib { flex: 1; min-width: 0; }
.mx-choix .mx-n { font-family: 'DM Mono', monospace; font-size: 13px; color: var(--text-muted); flex-shrink: 0; }
.mx-choix.on { font-weight: 700; color: var(--wood-dark); }
.mx-choix.on .mx-rd { border: 6px solid var(--wood-dark); }
.mx-choix.rouge .mx-lib { color: var(--red); }
/* Feuille de gestes (mxActions) : libellé + ligne d'explication grise */
.mx-action .mx-lib { display: flex; flex-direction: column; padding: 8px 0; }
.mx-act-l { font-weight: 700; color: var(--wood-dark); }
.mx-act-s { font-size: 12.5px; line-height: 17px; color: var(--text-muted); font-weight: 400; }
.mx-action.rouge .mx-act-l { color: var(--red); }
.mx-choix .mx-lamp { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.mx-filtre .mx-lamp { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
/* Ligne de résumé sous un filtre (« 7 commandes · 46 h · 2 à surveiller ») */
.mx-resume { font-size: 12.5px; line-height: 17px; color: var(--text-muted); margin: 8px 4px 0; }
.mx-resume:empty { display: none; }
.mx-choix:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

/* ── Recherche : 44 px, rayon 12, texte 16 px (pas de zoom iPhone), ✕ 36 px ── */
.mx-rech {
  display: flex; align-items: center; gap: 6px; height: 44px; min-width: 0; margin-top: 10px;
  padding: 0 4px 0 12px; border-radius: 12px; border: 1.5px solid var(--border); background: var(--white);
}
.mx-rech:focus-within { border-color: var(--wood-dark); box-shadow: 0 0 0 3px var(--accent-soft); }
.mx-rech svg { width: 18px; height: 18px; fill: none; stroke: var(--text-muted); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.mx-rech input {
  flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: transparent;
  font-family: 'DM Sans', sans-serif; font-size: 16px; color: var(--text);
}
.mx-rech input::-webkit-search-cancel-button { display: none; }
.mx-rech-x {
  appearance: none; width: 36px; height: 36px; min-height: 0; border: 0;   /* min-height : mobile.css impose 40 px à tout bouton */
  border-radius: 10px; background: transparent;
  color: var(--text-muted); cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.mx-rech-x[hidden] { display: none; }
.mx-rech-x:focus-visible { outline: 2px solid var(--accent); outline-offset: 0; }
.mx-rech-dit { font-size: 12.5px; color: var(--text-muted); margin: 6px 4px 0; }
.mx-rech-dit:empty { display: none; }

/* ── Carte : blanche, rayon 16, hauteur libre, rien de vide ─────────────── */
.mx-liste { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
.mx-carte { background: var(--white); border-radius: 16px; border: 1px solid var(--border); padding: 12px; min-width: 0; font-family: 'DM Sans', sans-serif; }
.mx-carte-tete { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.mx-carte-nom { flex: 1; min-width: 0; font-size: 15px; line-height: 20px; font-weight: 700; color: var(--wood-dark); overflow-wrap: anywhere; }
.mx-carte-val { font-family: 'DM Mono', monospace; font-size: 12.5px; color: var(--text-muted); white-space: nowrap; flex-shrink: 0; }
.mx-carte-sous { font-size: 14px; line-height: 19px; color: var(--text); margin-top: 2px; overflow-wrap: anywhere; }
.mx-etat { font-size: 13px; line-height: 18px; font-weight: 700; margin-top: 6px; }
.mx-etat.ok  { color: var(--green); }
.mx-etat.att { color: var(--orange-text); }
.mx-etat.ko  { color: var(--red); }
.mx-etat.info{ color: var(--accent); }
.mx-detail { font-size: 12.5px; line-height: 17px; color: var(--text-muted); margin-top: 2px; overflow-wrap: anywhere; }
.mx-carte-sous:empty, .mx-etat:empty, .mx-detail:empty, .mx-carte-val:empty { display: none; }
.mx-actions { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.mx-actions:empty { display: none; }

/* ── Bouton principal : pleine largeur, 44 px, rayon 10, geste à l'infinitif ── */
.mx-principal {
  appearance: none; font: inherit; font-family: 'DM Sans', sans-serif; width: 100%;
  min-height: 44px; padding: 6px 12px; border-radius: 10px; border: 1.5px solid var(--accent);
  background: var(--accent); color: var(--white); font-size: 14px; line-height: 18px; font-weight: 700;
  display: flex; align-items: center; justify-content: center; gap: 8px; text-align: center; cursor: pointer;
}
.mx-principal.v { background: var(--green); border-color: var(--green); }      /* facturer / valider */
.mx-principal.r { background: var(--rust); border-color: var(--rust); }        /* montage */
.mx-principal.neutre { background: var(--white); border-color: var(--border); color: var(--wood-dark); }  /* ouvrir */
.mx-principal:disabled { background: var(--wood-pale); border-color: var(--border); color: var(--text-muted); cursor: default; }
.mx-principal:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.mx-outils { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 8px; }
.mx-outil {
  appearance: none; font: inherit; font-family: 'DM Sans', sans-serif; min-width: 0; height: 44px;
  border-radius: 10px; border: 1px solid var(--border); background: var(--white); color: var(--wood-dark);
  font-size: 13px; font-weight: 600; display: flex; align-items: center; justify-content: center; gap: 6px; cursor: pointer;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0 8px;
}
.mx-outil svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.mx-outil .mx-n { font-family: 'DM Mono', monospace; font-size: 12.5px; color: var(--text-muted); }
.mx-outil:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ── État vide : dit ce qu'il se passe, jamais une zone blanche muette ──── */
.mx-vide {
  margin-top: 10px; padding: 20px 16px; border-radius: 16px; border: 1.5px dashed var(--border);
  background: var(--white); color: var(--text-muted); font-size: 14px; line-height: 19px; text-align: center;
}
.mx-vide b { display: block; color: var(--wood-dark); font-size: 15px; margin-bottom: 4px; }

/* ── Bloc replié (chiffres de bureau, compléments) ─────────────────────── */
.mx-repli { margin-top: 10px; background: var(--white); border-radius: 16px; border: 1px solid var(--border); overflow: hidden; }
.mx-repli > summary {
  list-style: none; display: flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 14px;
  font-size: 14px; font-weight: 700; color: var(--wood-dark); cursor: pointer;
}
.mx-repli > summary::-webkit-details-marker { display: none; }
.mx-repli > summary::after { content: ''; margin-left: auto; width: 8px; height: 8px; border-right: 2px solid var(--text-muted); border-bottom: 2px solid var(--text-muted); transform: rotate(45deg); transition: transform .15s; }
.mx-repli[open] > summary::after { transform: rotate(-135deg); }
.mx-repli > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.mx-repli-corps { padding: 0 14px 14px; font-size: 14px; color: var(--text); }