/* ═══════════════════════════════════════════════════════════════════════════
 *  kanban_mobile.css — LE KANBAN SUR TÉLÉPHONE (lot 2, 09/10/2026)
 *  R-KANBAN-MOBILE · maquette « Production mobile », option A (Julien, 23:05).
 * ───────────────────────────────────────────────────────────────────────────
 *  Gabarit Préparation (REFERENCE_UI_PREPARATION §3 bis) : en-tête = recherche
 *  44 px + « ⋯ » ; barre = « COLONNE · nom · n ▾ » + « Priorité ▾ » (pièces .mx-,
 *  css/mobile_composants.css) ; résumé gris ; cartes .kmc (js/kanban/carte_mobile.js).
 *  Téléphone seulement : tout est dans le @media. Couleurs : variables de base.css.
 * ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* En-tête : pas de grand titre (l'onglet du bas dit « Production ») ; la recherche et « ⋯ » */
  .page-header:has(#kanban-search) > div:first-child { display: none; }
  .page-header:has(#kanban-search) { padding-top: 12px; }
  .page-header:has(#kanban-search) .page-actions { display: flex; flex-wrap: nowrap; gap: 8px; overflow: visible; }
  .page-header:has(#kanban-search) .page-actions > *:not(#kanban-search):not(#m-kanban-plus) { display: none !important; }
  #kanban-search {
    flex: 1 1 auto; min-width: 0; width: auto; height: 44px; box-sizing: border-box; padding: 0 12px;
    border-radius: 12px; border: 1.5px solid var(--border); background: var(--white);
    font-family: 'DM Sans', sans-serif; font-size: 16px; color: var(--text);
  }
  #kanban-search:focus { outline: none; border-color: var(--wood-dark); box-shadow: 0 0 0 3px var(--accent-soft); }
  .m-kanban-plus { flex: 0 0 44px; width: 44px; padding: 0; }
  .m-kanban-plus svg { width: 20px; height: 20px; }

  /* La barre : Colonne + Priorité, puis le résumé */
  #m-kanban-barre { margin: 0 0 10px; }
  #m-kanban-barre .mx-fbar { margin-top: 0; }

  /* La carte au gabarit (fond blanc, rayon 16, intérieur 12, rien de vide) */
  .kanban-card.kmc {
    background: var(--white); border: 1px solid var(--border); border-radius: 16px !important;
    padding: 12px; margin-bottom: 0; box-shadow: none; font-family: 'DM Sans', sans-serif;
  }
  .kanban-card.kmc:hover { box-shadow: none; }
  .kanban-card.kmc:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
  .kanban-card.kmc.encours-depasse { background: var(--white); box-shadow: none; }   /* dit par la pastille « Encours dépassé » */
  .kanban-card.kmc.card-zone-be::before { content: none; }                           /* dit en mots dans la ligne grise */
  .kmc .card-echarpe-wrap { border-top-right-radius: 16px; }
  .kmc .kfeu-band { margin: -12px -12px 10px; border-radius: 16px 16px 0 0; min-height: 32px; box-sizing: border-box; }
  .kmc-tete { display: flex; align-items: center; gap: 10px; min-width: 0; }
  .kmc-prio { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; background: var(--wood-light); }
  .kmc-nom { flex: 1; min-width: 0; font-size: 15px; line-height: 20px; font-weight: 700; color: var(--wood-dark); overflow-wrap: anywhere; }
  .kmc.card-client-bloque .kmc-tete, .kmc.card-prepaiement-bloque .kmc-tete { padding-right: 56px; }   /* l'écharpe ne cache ni le nom ni la date */
  .kmc-date { font-family: 'DM Mono', monospace; font-size: 12.5px; color: var(--text-muted); white-space: nowrap; flex-shrink: 0; }
  .kmc-vignette { width: 40px; height: 40px; border-radius: 8px; flex-shrink: 0; background-size: cover; background-position: center; }
  .kmc .mx-etat { margin-top: 4px; }
  .kmc-pastilles { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
  .kmc-pastille { font-size: 12px; line-height: 18px; font-weight: 700; border-radius: 999px; padding: 1px 9px; }
  .kmc-pastille.rouge   { color: var(--red); background: var(--red-soft); }
  .kmc-pastille.orange  { color: var(--orange-text); background: var(--orange-soft); }
  .kmc-pastille.violet  { color: var(--violet); background: var(--violet-soft); }
  .kmc-pastille.rouille { color: var(--rust); background: var(--rust-soft); }
  .kmc-avance { margin-top: 8px; }
  .kmc-avance-l { display: flex; justify-content: space-between; font-size: 12.5px; line-height: 17px; color: var(--text-muted); }
  .kmc-pct { font-family: 'DM Mono', monospace; color: var(--text); }
  .kmc-barre { height: 6px; border-radius: 999px; background: var(--wood-pale); overflow: hidden; margin-top: 4px; }
  .kmc-barre span { display: block; height: 100%; border-radius: 999px; background: var(--green); }
  .kmc-attente { font-size: 12.5px; line-height: 17px; color: var(--text-muted); font-style: italic; margin-top: 6px; }
  .kanban-empty { padding: 20px 16px; border: 1.5px dashed var(--border); color: var(--text-muted); background: var(--white); border-radius: 16px; text-align: center; font-size: 14px; }

  /* ── La fiche de commande (10/10/2026, R-KANBAN-MOBILE-FICHE, option A : onglets) ──
        js/kanban/fiche_mobile.js range la fiche dessinée par carte.js ; rien n'est réécrit. */
  #card-modal-content > .mfc-haut {
    position: sticky; top: 0; z-index: 6; display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: calc(8px + env(safe-area-inset-top, 0px)) var(--m-cote) 8px; background: var(--wood-bg); border-bottom: 1px solid var(--border);
  }
  .mfc-haut ~ .modal-title { display: none; }               /* le nom est dans la tête de fiche */
  .mfc-retour {
    appearance: none; display: inline-flex; align-items: center; gap: 4px; min-height: 44px; padding: 0 8px 0 0; border: 0;
    background: transparent; color: var(--accent); font-family: 'DM Sans', sans-serif; font-size: 15px; font-weight: 700; cursor: pointer;
  }
  .mfc-retour svg { width: 20px; height: 20px; }
  .mfc-retour:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 10px; }
  .mfc-plus { flex: 0 0 44px; width: 44px; padding: 0; border: 1.5px solid var(--border); border-radius: 12px; }
  .mfc-plus svg { width: 20px; height: 20px; }
  .mfc-haut ~ .fiche-flex { padding-top: 12px; gap: 0; }
  .mfc-cache, .mfc-double { display: none !important; }
  .mfc-tete { margin-bottom: 10px; font-family: 'DM Sans', sans-serif; }
  .mfc-sur { display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--text-muted); }
  .mfc-sur .mx-lamp { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
  .mfc-nom { margin: 4px 0 0; font-size: 22px; line-height: 28px; font-weight: 700; color: var(--wood-dark); overflow-wrap: anywhere; }
  .mfc-tete .mx-etat { margin-top: 6px; }
  .mfc-date { font-weight: 500; }
  .mfc-feu { margin-top: 10px; }
  .mfc-feu .kfeu-band { margin: 0; border-radius: 12px; min-height: 44px; box-sizing: border-box; padding: 0 12px; }
  /* Prochain geste : carte blanche à contour foncé, un seul bouton principal */
  .mfc-geste { border: 1.5px solid var(--wood-dark); display: flex; flex-direction: column; gap: 6px; margin-bottom: 4px; }
  .mfc-geste-k { font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--text-muted); }
  .mfc-geste-t { font-size: 15px; line-height: 20px; font-weight: 700; color: var(--wood-dark); }
  .mfc-geste .mx-principal { margin-top: 4px; }
  .mfc-onglets .mx-onglets { margin: 10px 0 12px; }
  .mfc-rouge { color: var(--red) !important; }
  /* Un onglet à la fois : seul ce qui porte le nom de l'onglet choisi s'affiche */
  [data-mfc-actif="etapes"] [data-mfc-onglet]:not([data-mfc-onglet="etapes"]),
  [data-mfc-actif="infos"]  [data-mfc-onglet]:not([data-mfc-onglet="infos"]),
  [data-mfc-actif="notes"]  [data-mfc-onglet]:not([data-mfc-onglet="notes"]),
  [data-mfc-actif="photos"] [data-mfc-onglet]:not([data-mfc-onglet="photos"]) { display: none !important; }
  /* Les sections déjà titrées par l'onglet perdent leur trait de séparation du bureau */
  [data-mfc-onglet="photos"], [data-mfc-onglet="infos"] { border-top: 0 !important; }
  [data-mfc-onglet="notes"].fiche-notes-panel { width: 100%; margin: 0; }
}