/* ============================================================================
   CRM SENZO — COUCHE MOBILE GLOBALE (2026-09-17, docs/SPEC-Mobile-Refonte.md § 3)
   Chargée sur TOUTES les pages par lib/layout.php. crm-mobile.js pose `html.mm` sous 860 px
   (le seuil du CRM) : tout ici est préfixé `html.mm`, donc RIEN ne s'applique sur ordinateur.
   La messagerie a sa propre couche (mail-mobile.*) ; ce fichier n'y ajoute que les règles
   génériques (champs 16 px, garde anti-débordement).
   Règles Fausto : boutons 36 px (pas 44), champs 16 px, sobre, texte jamais coupé.
   ============================================================================ */
html.mm { --cm-top: 56px; --cm-tab: 60px; --cm-safe: env(safe-area-inset-bottom, 0px); }

/* ---------- G3 · Champs 16 px partout (sinon iOS zoome au tap) ---------- */
html.mm input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]), html.mm select, html.mm textarea { font-size: 16px !important; }
html.mm input[type=date], html.mm input[type=datetime-local], html.mm input[type=time] { min-height: 40px; }

/* ---------- G4 · Boutons ≥ 36 px (posé par le JS sur ceux qui sont trop petits) ---------- */
html.mm .cm-tap { min-height: 36px !important; padding-top: 6px !important; padding-bottom: 6px !important; }
html.mm .cm-tap-row > * + * { margin-left: 6px; }

/* ---------- G10 · Garde anti-débordement ---------- */
html.mm:not(.mm-list):not(.mm-detail):not(.mm-compose) .content { padding-left: 12px; padding-right: 12px; }   /* pas sur la messagerie (bord à bord) */
html.mm .content > *, html.mm .card { min-width: 0; max-width: 100%; box-sizing: border-box; }
html.mm .card { overflow-wrap: anywhere; }
html.mm img, html.mm video { max-width: 100%; height: auto; }
html.mm pre { white-space: pre-wrap; }
html.mm .edit-grid, html.mm .grid2, html.mm .grid3, html.mm .cols2 { grid-template-columns: 1fr !important; }

/* ---------- G1 · Tableau → cartes (le JS étiquette chaque cellule avec son en-tête) ---------- */
html.mm table.cm-cards { display: block; width: 100%; border-collapse: collapse; }
html.mm table.cm-cards thead, html.mm table.cm-cards colgroup { display: none; }
html.mm table.cm-cards tbody, html.mm table.cm-cards tr, html.mm table.cm-cards td, html.mm table.cm-cards th { display: block; width: 100%; box-sizing: border-box; }
html.mm table.cm-cards tr { display: flex; flex-direction: column; padding: 9px 12px 10px; border-bottom: 1px solid var(--line); background: var(--card); }
html.mm table.cm-cards td.cm-first { order: -1; }                          /* le titre de la carte d'abord… */
html.mm table.cm-cards td.cm-act { order: 99; }                            /* …les boutons en dernier */
html.mm table.cm-cards tr:hover { background: var(--card); }
html.mm table.cm-cards td { padding: 2px 0; border: 0; text-align: left; white-space: normal; overflow-wrap: anywhere; font-size: 14px; line-height: 1.4; }
html.mm table.cm-cards td:empty { display: none; }
html.mm table.cm-cards td[data-l]::before { content: attr(data-l) " : "; color: #8895a7; font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; margin-right: 4px; }
html.mm table.cm-cards td.cm-first { font-size: 15px; font-weight: 700; color: var(--navy); padding-bottom: 4px; }
html.mm table.cm-cards td.cm-first::before { content: none; }
html.mm table.cm-cards td.cm-act { display: flex; flex-wrap: wrap; gap: 6px; padding-top: 6px; }
html.mm table.cm-cards td.cm-act::before { content: none; }
html.mm table.cm-cards td.cm-act > * { margin: 0; }
html.mm .table-wrap, html.mm .rel-wrap { overflow: visible; }
/* G12 · pages longues : les lignes au-delà de 60 attendent « Voir plus » */
html.mm table.cm-cards tr.cm-more { display: none; }
html.mm .cm-morebtn { display: block; width: 100%; margin: 8px 0; padding: 10px; font-size: 14px; font-weight: 700; background: #f5f8fb; border: 1px solid var(--line); border-radius: 10px; color: var(--navy); }

/* ---------- G2 · Filtres repliés ---------- */
html.mm form.cm-filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
html.mm form.cm-filters.cm-collapsed > select, html.mm form.cm-filters.cm-collapsed > label, html.mm form.cm-filters.cm-collapsed .cm-hide { display: none !important; }
html.mm form.cm-filters > input[type=search], html.mm form.cm-filters > input[type=text] { flex: 1 1 60%; min-width: 0; }
html.mm form.cm-filters > select { flex: 1 1 45%; min-width: 0; width: auto; margin: 0; }
html.mm form.cm-filters > button, html.mm form.cm-filters > input[type=submit] { width: auto; flex: none; margin: 0; }
html.mm .cm-fbtn { flex: none; display: inline-flex; align-items: center; gap: 6px; margin: 0; padding: 8px 12px; min-height: 36px; font-size: 13.5px; font-weight: 700; color: var(--navy); background: #f5f8fb; border: 1px solid var(--line); border-radius: 10px; width: auto; }
html.mm .cm-fbtn .cm-fn { display: inline-block; min-width: 18px; padding: 0 6px; border-radius: 20px; background: #2563eb; color: #fff; font-size: 11px; text-align: center; }
html.mm .cm-fbtn .cm-fn:empty { display: none; }

/* ---------- G5 · Barre haute de page (← titre) ---------- */
html.mm .cm-top { position: sticky; top: var(--cm-top); z-index: 30; display: flex; align-items: center; gap: 4px; min-height: 48px; margin: 0 -12px 8px; padding: 4px 6px; background: var(--card); border-bottom: 1px solid var(--line); }
html.mm .cm-top .cm-ib { flex: none; width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; border: 0; background: transparent; border-radius: 10px; font-size: 22px; color: var(--navy); text-decoration: none; padding: 0; }
html.mm .cm-top .cm-ib:active { background: #eef2f7; }
html.mm .cm-top b { flex: 1 1 auto; min-width: 0; font-size: 16px; color: var(--navy); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html.mm .cm-top-hidden { display: none !important; }

/* ---------- G6 · Bouton « + » flottant ---------- */
html.mm .cm-fab { position: fixed; right: 16px; bottom: calc(var(--cm-tab) + var(--cm-safe) + 16px); z-index: 34; width: 52px; height: 52px; border-radius: 16px; background: var(--navy); color: #fff; font-size: 28px; line-height: 1; display: flex; align-items: center; justify-content: center; text-decoration: none; box-shadow: 0 6px 18px rgba(13,27,42,.35); }
html.mm .cm-fab:active { transform: scale(.96); }
html.mm.cm-hasfab .content { padding-bottom: calc(var(--cm-tab) + var(--cm-safe) + 80px); }

/* ---------- G7 · Téléphones / e-mails / adresses cliquables ---------- */
html.mm a.cm-tel, html.mm a.cm-mail { color: inherit; text-decoration: none; border-bottom: 1px dotted #9fb0c4; }
html.mm a.cm-map { display: inline-block; margin-left: 6px; font-size: 13px; text-decoration: none; color: #2f5fa3; font-weight: 700; white-space: nowrap; }

/* ---------- G8 · Prendre une photo ---------- */
html.mm .cm-photo { display: inline-flex; align-items: center; gap: 6px; margin: 6px 6px 0 0; padding: 8px 12px; min-height: 36px; border: 1px dashed #b9c3d0; border-radius: 10px; background: #f7f9fb; color: var(--navy); font-size: 13.5px; font-weight: 700; width: auto; }
html.mm .cm-photo-n { font-size: 12.5px; color: #1a7f44; font-weight: 700; margin-left: 4px; }

/* ---------- G9 · Recherche globale plein écran ---------- */
html.mm.mm-gs .gsearch { position: fixed; inset: 0; z-index: 80; max-width: none; margin: 0; padding: 10px 12px calc(12px + var(--cm-safe)); background: var(--card); display: flex; flex-direction: column; gap: 8px; }
html.mm.mm-gs .gsearch .cm-gsrow { display: flex; align-items: center; gap: 6px; }
html.mm.mm-gs #gsearch { flex: 1 1 auto; min-width: 0; height: 44px; font-size: 16px !important; color: var(--navy); background: #f2f5f9 !important; border: 1px solid var(--line); border-radius: 12px; padding: 0 14px; }
html.mm.mm-gs .gsearch .cm-gsx { flex: none; width: 40px; height: 40px; border: 0; background: transparent; font-size: 22px; color: var(--navy); border-radius: 10px; }
html.mm.mm-gs .gsearch-box { position: static; flex: 1 1 auto; max-height: none; overflow-y: auto; border: 0; box-shadow: none; border-radius: 0; }
html.mm.mm-gs .gsearch-box .gs-item { padding: 12px 8px; font-size: 15px; border-bottom: 1px solid var(--line); }
html.mm.mm-gs .gsearch-box .gs-grp { padding: 10px 8px 4px; }
html.mm .cm-gsrow { display: flex; align-items: center; gap: 4px; }
html.mm .cm-gsx { display: none; }
html.mm.mm-gs .cm-gsx { display: inline-flex; align-items: center; justify-content: center; }
html.mm.mm-gs body { overflow: hidden; }

/* ---------- Divers ---------- */
html.mm .pager { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; padding: 12px 0; font-size: 13px; }
html.mm .pager a, html.mm .pager button { padding: 8px 12px; min-height: 36px; border: 1px solid var(--line); border-radius: 10px; text-decoration: none; }
html.mm .pager input[type=number] { width: 56px; }
html.mm .alert { font-size: 13.5px; }

/* ---------- Étape 2 · Fiche client (contact.php) ---------- */
html.mm .cli-ess[hidden] { display: block !important; }
html.mm .cli-ess { padding: 4px 12px; margin-bottom: 12px; }
html.mm .cli-ess .ess-row { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid #eef1f5; text-decoration: none; color: var(--navy); min-height: 40px; }
html.mm .cli-ess .ess-row:last-child { border-bottom: 0; }
html.mm .cli-ess .ess-i { flex: none; width: 22px; text-align: center; font-size: 16px; }
html.mm .cli-ess .ess-v { flex: 1 1 auto; min-width: 0; font-size: 15px; font-weight: 600; overflow-wrap: anywhere; }
html.mm .cli-ess .ess-l { flex: none; font-size: 11px; color: #8895a7; text-transform: uppercase; letter-spacing: .03em; font-weight: 700; }
/* le bloc d'ajout rapide : des puces « + Note · + Appel · + RDV… », le formulaire ne s'ouvre qu'au tap */
html.mm .qadd-card { padding: 8px 10px; }
/* Retour Fausto (18.09, vrai téléphone) : « + Note / + Appel… pas lisible » — des VRAIS boutons, pas du texte gris. */
html.mm .qadd-tabs { display: flex; flex-wrap: nowrap; gap: 8px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; padding: 6px 4px 8px; border-bottom: 0; }
html.mm .qadd-tabs::-webkit-scrollbar { display: none; }
html.mm .qadd-tab { flex: none; white-space: nowrap; min-height: 38px; padding: 8px 14px; border-radius: 20px; font-size: 14px; font-weight: 700;
  color: var(--navy); background: #fff; border: 1.5px solid #b9c3d0; box-shadow: none; }
html.mm .qadd-tab.on { background: var(--navy); color: #fff; border-color: var(--navy); box-shadow: none; }
html.mm .quick-actions { gap: 8px; margin-bottom: 10px; }
html.mm .quick-actions .qa { min-width: 0; flex: 1 1 28%; padding: 11px 6px; font-size: 13.5px; }
html.mm .quick-actions .qa.qa-aff { background: #fdf3e0; color: #7a5a12; }
/* ---------- Étape 2 · Liste des contacts (contacts.php) : cartes compactes ---------- */
html.mm table.cm-cards td[data-l="Canton"], html.mm table.cm-cards td[data-l="Nos Pipedrive"] { display: none; }
html.mm table.cm-cards td[data-l="Téléphone"] a, html.mm table.cm-cards td[data-l="Email"] a { font-weight: 600; }

/* ---------- Étape 3 · Kanban (board.php) : UNE colonne à la fois ---------- */
html.mm .board-hint, html.mm #fitToggle, html.mm .kanban-scroll-top, html.mm .kcol-add { display: none !important; }
html.mm .board-head { gap: 6px; }
html.mm .board-head .page-title { flex: 1 0 100%; font-size: 20px; margin: 0 0 4px; }
html.mm .board-head .board-search { max-width: none; flex: 1 1 100%; order: 5; }
html.mm .cm-stages { position: sticky; top: var(--cm-top); z-index: 25; display: flex; align-items: center; gap: 4px; margin: 0 -12px 8px; padding: 6px 6px; background: var(--card); border-bottom: 1px solid var(--line); }
html.mm .cm-stages .cm-sarrow { flex: none; width: 36px; height: 36px; border: 0; background: #f2f5f9; border-radius: 10px; font-size: 20px; color: var(--navy); padding: 0; }
html.mm .cm-stages .cm-sarrow:disabled { opacity: .3; }
html.mm .cm-stages .cm-schips { flex: 1 1 auto; min-width: 0; display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
html.mm .cm-stages .cm-schips::-webkit-scrollbar { display: none; }
html.mm .cm-stages .cm-schip { flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 6px 12px; border-radius: 20px; border: 1px solid var(--line); background: var(--card); color: var(--navy); font-size: 13.5px; font-weight: 700; white-space: nowrap; }
html.mm .cm-stages .cm-schip .cm-sdot { width: 8px; height: 8px; border-radius: 50%; background: var(--kcol-c, #9fb0c4); }
html.mm .cm-stages .cm-schip .cm-sn { font-size: 11.5px; color: #8895a7; font-weight: 700; }
html.mm .cm-stages .cm-schip.on { background: var(--navy); color: #fff; border-color: var(--navy); }
html.mm .cm-stages .cm-schip.on .cm-sn { color: #c9d3e0; }
html.mm .kanban { display: block; overflow: visible; padding-bottom: 0; }
html.mm .kanban .kcol { display: none; flex: none; width: 100%; box-sizing: border-box; border: 0; background: transparent; padding: 0; }
html.mm .kanban .kcol.cm-on { display: block; }
html.mm .kcol-head[draggable] { cursor: default; }
html.mm .kcol-head { padding: 6px 4px 8px; }
html.mm .kcol-tools { display: none; }
html.mm .kcard { padding: 12px 12px 10px; margin-bottom: 10px; border-radius: 12px; font-size: 15px; cursor: default; }
html.mm .kcard .kmove { width: 100%; min-height: 40px; margin-top: 8px; font-size: 16px; }
html.mm body.is-board .content { height: auto; }

/* ---------- Étape 4 · Agenda (echeancier.php) : vue « Jour » en cartes ---------- */
html.mm table.cm-cards tr.cm-day { display: block; padding: 12px 12px 4px; background: #f5f8fb; border-bottom: 0; }
html.mm table.cm-cards tr.cm-day td { font-size: 12px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: #5b6572; padding: 0; }
html.mm table.cm-cards tr.cm-day.cm-today td { color: #1d4f8f; }
html.mm table.cm-cards tr.cm-day td::before { content: none; }
html.mm table.cm-cards td.ech-date { order: -2; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding-bottom: 4px; }
html.mm table.cm-cards td.ech-date::before { content: none; }
html.mm table.cm-cards td.ech-date .ech-dtxt { font-size: 15px; font-weight: 800; color: var(--navy); }
html.mm table.cm-cards td.ech-date.late .ech-dtxt { color: #b23b3b; }
html.mm table.cm-cards td.ech-date .ech-late { font-size: 11px; }
html.mm table.cm-cards td.ech-date .ech-edit { margin-left: auto; }
html.mm table.cm-cards td.ech-date .ech-edit summary { font-size: 12.5px; min-height: 32px; display: inline-flex; align-items: center; padding: 0 10px; }
html.mm table.cm-cards td.ech-date .ech-edit-form { display: flex; flex-direction: column; gap: 6px; flex-basis: 100%; }
html.mm table.cm-cards td.ech-subj b { font-size: 15px; }
html.mm table.cm-cards td.ech-tel a, html.mm table.cm-cards td.ech-mail a { font-weight: 600; }
html.mm .ech-filters, html.mm .ech-tabs { gap: 6px; }

/* ---------- Étape 5 · Tableau de bord : « Aujourd'hui » en tête ---------- */
html.mm .cm-today[hidden] { display: block !important; }
html.mm .cm-today { padding: 2px 12px; margin-bottom: 12px; }
html.mm .cm-today .ct-row { display: flex; align-items: center; gap: 10px; min-height: 44px; text-decoration: none; color: var(--navy); border-bottom: 1px solid #eef1f5; font-size: 15px; }
html.mm .cm-today .ct-row:last-child { border-bottom: 0; }
html.mm .cm-today .ct-row b { font-size: 18px; margin-right: 4px; }
html.mm .cm-today .ct-row.late { color: #b23b3b; }
html.mm .cm-today .ct-i { flex: none; width: 24px; text-align: center; }
html.mm .cm-today .ct-v { flex: 1 1 auto; }
html.mm .cm-today .ct-go { flex: none; color: #9fb0c4; font-size: 20px; }
html.mm .stats { grid-template-columns: 1fr 1fr; gap: 10px; }

/* ---------- Cases à cocher par catégorie (fiche client) ---------- */
html.mm .cs-tools { flex-wrap: wrap; }
html.mm .cs-tools .cs-filter { max-width: none; flex: 1 1 100%; font-size: 16px; }
html.mm .cs-chip { min-height: 36px; font-size: 13.5px; padding: 5px 10px; gap: 5px; }
html.mm .cs-chips { padding: 8px 8px 10px; gap: 5px; }
html.mm .cs-head { padding: 6px 10px; }

/* ══════════════════════════════════════════════════════════════════════════════════════════
   PASSE RESPONSIVE DU 04.11.2026 — défauts MESURÉS à 375 px sur la fiche client et une
   campagne réelles (émulation mobile, pas une lecture de code).
   ══════════════════════════════════════════════════════════════════════════════════════════ */

/* ---------- 1 · LA BARRE DU HAUT DÉBORDAIT : 478 px de contenu pour 375 px d'écran ----------
   Conséquence mesurée : la CLOCHE DE NOTIFICATIONS était à droite:474 px, donc hors écran et
   INATTEIGNABLE sur téléphone, et le sélecteur de langue était coupé.
   Cause : `.lang-form` en `flex:0 0 auto` (108 px incompressibles) + la marque à 101 px +
   `.gsearch{min-width:120px}`. Aucune règle mobile ne touchait cette barre.
   ⚖️ On ne supprime rien : la langue part dans le tiroir ☰ (crm-mobile.js), là où vivent les
   réglages ; la cloche redevient visible et tapable. */
html.mm .topbar .lang-form { display: none; }          /* déplacée dans le tiroir, pas supprimée */
html.mm .topbar .brand span { display: none; }          /* « SenzoCRM » → « Senzo » : 35 px gagnés */
html.mm .topbar .gsearch { min-width: 0; margin-left: 4px; }
html.mm .topbar-bell { min-width: 40px; min-height: 40px; display: inline-flex; align-items: center;
  justify-content: center; margin-left: auto; padding: 0; }
/* La langue, une fois dans le tiroir : une ligne de menu comme les autres. */
html.mm .sidenav .lang-form { display: block; margin: 10px 12px 4px; }
html.mm .sidenav .lang-sel { width: 100%; height: 40px; font-size: 16px; background: rgba(255,255,255,.12);
  border-radius: 10px; padding: 0 10px; }

/* ---------- 2 · PANNEAUX SURGISSANTS COUPÉS PAR LE BORD DE L'ÉCRAN ----------
   Mesuré : « + étiquette » débordait jusqu'à 466 px, « Renommer un fichier » jusqu'à 425 px,
   « 🗑️ Supprimer la note » jusqu'à 438 px. Cause : `position:absolute; left:0` avec une largeur
   FIXE (230/240 px) — il y a la place sur ordinateur, pas sur un téléphone.
   ⚖️ Sur mobile ils deviennent un panneau en bas d'écran : jamais coupé, et à portée du pouce. */
html.mm .tag-add-form,
html.mm .cfile-rename-form,
html.mm .msg-aff > form {          /* « 📁 lier à une affaire », sur chaque note et chaque e-mail */
  /* ⚠️ PREMIER ESSAI : `position:fixed` pour en faire un panneau en bas d'écran. ÉCHEC MESURÉ —
     un ancêtre porte un `transform`, qui devient alors le bloc conteneur du `fixed` : le panneau
     atterrissait à x=229 au lieu de 12, et tombait à 22 px de large. Piège CSS classique.
     ⚖️ On renonce au flottant : sur mobile le panneau s'ouvre SOUS le bouton, en pleine largeur.
     Rien ne peut sortir de l'écran, où que se trouve le bouton dans la page. */
  position: static; width: 100%; max-width: 100%;
  left: auto; right: auto; top: auto; bottom: auto;
  margin-top: 6px; box-shadow: none;
}
html.mm .tag-add:not([open]) > .tag-add-form,
html.mm .cfile-rename:not([open]) > .cfile-rename-form { display: none; }
html.mm .tag-add-form select, html.mm .tag-add-form input,
html.mm .cfile-rename-form input,
html.mm .msg-aff > form select { height: 40px; font-size: 16px; max-width: 100%; }
html.mm .tag-add-form button, html.mm .cfile-rename-form button,
html.mm .msg-aff > form button { min-height: 40px; }
/* Palette de couleurs de l'éditeur riche : 120 px fixes dans une barre qui peut être étroite. */
html.mm .reditor-colors { max-width: 100%; display: inline-flex; flex-wrap: wrap; }
/* Garde-fou général : tout panneau positionné reste dans l'écran, même ceux qu'on n'a pas listés. */
html.mm main [style*="position:absolute"], html.mm main details > form, html.mm main details > div {
  max-width: calc(100vw - 24px);
}
html.mm .note-del { max-width: 100%; white-space: normal; }

/* ---------- 3 · 84 CHAMPS SOUS 16 px SUR LA FICHE CLIENT → iOS zoome tout seul ----------
   La couche G3 ne traitait que `input[type=text]`, `input` sans type et `input[type=search]` :
   les `select`, `textarea`, `email`, `tel`, `date` et `datetime-local` passaient au travers.
   ⚖️ Une règle CSS plutôt qu'un parcours JS : elle couvre aussi ce qui est ajouté après coup. */
html.mm main input:not([type=checkbox]):not([type=radio]):not([type=file]),
html.mm main select,
html.mm main textarea { font-size: 16px; }

/* ---------- 4 · DONNÉES AFFICHÉES SOUS 11,5 px ----------
   Lisible sur un écran de 27 pouces, pas dans un couloir d'immeuble. On remonte ce qui porte
   une DONNÉE ; les intitulés de section du menu restent petits, c'est leur rôle. */
html.mm .ess-l,
html.mm .ct-biens-t,
html.mm .ct-bien-s,
html.mm .ct-bien-n,
html.mm .cc-appel,
html.mm .cc-note-d,
html.mm .cc-puce,
html.mm .cc-notes,
html.mm .camp-card .cc-nom small,
html.mm .lbadge { font-size: 12px; }

/* ---------- 5 · CIBLES TACTILES ----------
   ⚖️ 36 px pour un bouton, 38 px pour un champ (arbitrage de Fausto du 25.08 : le 44 px
   théorique a été refusé — « boutons trop gros, on comprend rien »). On corrige ce qui est
   vraiment une COMMANDE, pas chaque lien dans une phrase. */
html.mm .tag-x { width: 24px; height: 24px; font-size: 15px; }                 /* était 16×16 */
html.mm .tag-add summary, html.mm .title-edit-btn, html.mm details > summary.qa { min-height: 36px;
  display: inline-flex; align-items: center; }
html.mm .camp-card .cc-nom { display: block; padding: 4px 0; }                 /* la carte s'ouvre au nom */
html.mm .camp-card .cc-count { min-width: 34px; min-height: 26px; display: inline-flex;
  align-items: center; justify-content: center; }

/* ---------- 6 · LES PETITS PANNEAUX « ✎ » DE LA CHRONOLOGIE (mesuré le 04.11) ----------
   Un `<details>` dans une rangée flex garde la largeur de son résumé (« ✎ », 64 px) même une fois
   OUVERT : le formulaire à l'intérieur débordait jusqu'à 512 px sur un écran de 430.
   ⚠️ Et `grid-template-columns:1fr` ne suffit pas : **`1fr` ne descend jamais sous la largeur de
   son contenu** (`min-content`). Le `<select>` « RDV Réunion… » imposait 210 px à lui seul.
   C'est la règle n°6 du 07_UI_UX, appliquée ici aux grilles : il faut `minmax(0,1fr)` ET
   `min-width:0` sur les éléments. */
html.mm .tl-meta details[open] { flex: 1 1 100%; width: 100%; }
html.mm .tl-meta details[open] > form { width: 100%; }
html.mm .edit-grid { grid-template-columns: minmax(0, 1fr) !important; }
html.mm .edit-grid > div { min-width: 0; }
html.mm .edit-grid select, html.mm .edit-grid input, html.mm .edit-grid textarea { width: 100%; max-width: 100%; }

/* ⚠️ « 📁 lier à une affaire » : le `position:fixed` ne marche PAS ici — un ancêtre porte un
   `transform`, ce qui fait de lui le bloc conteneur du fixed (piège CSS classique). Mesuré : le
   panneau se retrouvait à x=229 au lieu de x=12, et son `<select>` sortait jusqu'à 452 px.
   ⚖️ Sur mobile on abandonne le flottant : le panneau passe SOUS le bouton, en pleine largeur.
   Rien ne peut alors sortir de l'écran, quelle que soit la position du bouton dans la page. */
html.mm .msg-aff > form {
  position: static !important; width: 100% !important; max-width: 100% !important;
  left: auto !important; right: auto !important; top: auto !important; bottom: auto !important;
  margin-top: 6px; box-shadow: none;
}
html.mm .msg-aff:not([open]) > form { display: none !important; }   /* fermé = invisible, sans ambiguïté */
html.mm .msg-aff > form select { width: 100% !important; max-width: 100% !important; }

/* ---------- 7 · LES DEUX COMMANDES PRINCIPALES D'UNE CARTE DE CAMPAGNE ----------
   Mesuré au doigt à 390 px : le bouton « OK » faisait 35 px (la règle du projet est 36) et le
   NOM du client — qui est le lien pour ouvrir sa fiche — 27 px. Ce sont les deux gestes qu'un
   agent répète 250 fois dans une session d'appels : ils méritent la taille. */
html.mm .camp-card .cc-ok { min-height: 40px; font-size: 14px; }
html.mm .camp-card .cc-nom { min-height: 36px; display: flex; flex-direction: column; justify-content: center; }

/* Chantiers sous « Immeubles & Locations » : lisibles au doigt (04.11.2026). */
html.mm a.trav-l{min-height:40px;font-size:13px}
html.mm .trav-bloc .trav-e,html.mm .trav-bloc .trav-v,html.mm .trav-note{font-size:12px}
html.mm .camp-card .cc-result textarea[name=note]{font-size:16px;min-height:60px}
html.mm .camp-card .cc-cote{min-height:40px;font-size:14px;flex:1 1 100%}
html.mm .camp-card .cc-actions .cc-ok{flex:1 1 100%}
/* Recherche par couleur : les pastilles passent au doigt, sur plusieurs lignes. */
html.mm .wk-couleurs{gap:6px;padding:8px}
html.mm a.wk-coul{min-height:36px;font-size:13px;flex:1 1 auto;justify-content:center}
html.mm .wk-coul-t{flex:1 1 100%;margin:0 0 2px}
html.mm .wk-legende{font-size:12px}