/* ═══════════════════════════════════════════════════════════════════════════
   soma-mobile.css — SOMA SUR IPHONE · la couche mobile (nuit du 15 au 16/09/2026).
   Contrat : cerveau/HANDOFF-IPHONE-SESSION-1.md · référence visuelle : cerveau/maquettes/iphone-v4.html.
   Chargée EN DERNIER. Tout vit sous @media (max-width: 767px) : au-dessus de 768 px, zéro pixel ne bouge
   (le gardien tests/mobile/gardien.mjs le prouve par captures à 1440 identiques au commit de départ).
   Le HTML des modules n'est pas réécrit : ce fichier réordonne (order, display), restyle, masque ce que la
   coquille remplace ; js/mobile-shell.js AJOUTE (barre de navigation, barre d'onglets, feuilles).
   Composants partagés (noms stables — un module n'écrit jamais son propre @media, il les emploie) :
     .mobile-nav (barre de navigation 44 px) · .mobile-tabs / .mobile-tab (barre d'onglets 84 px)
     .mobile-sheet / .mobile-sheet-dim (une feuille qui monte du bas) · .mobile-segments (D4)
     .mobile-bs (bandeau de section à filet) · la ligne dense = .soma-ligne sous 768 px (étape 3)
     .mobile-gl (grand livre) · .mobile-ab (barre d'action d'une fiche) · .mobile-lit (le lit gris du fleuve)
   Règles : var(--) seulement, zéro emoji, pas de largeur fixe sans garde-fou, un panneau Noir Artois par écran.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
  :root {
    --font-eb: 'Space Grotesk', 'Lato', sans-serif;   /* D8 — petits titres en capitales, +0,16 em (BRAND v2 § 5) */
    --ink: #0F1A17;                                   /* Noir Artois : la voix de SOMA, la tuile pressée (BRAND v2 § 4) */
    --grey: #F3F5F3;                                  /* le lit du fleuve, uniquement */
    --line: #E8EDE8;
    --line2: rgba(160, 192, 160, .5);
    --ocre: #B48A3C;                                  /* l'attente (maquette v4) */
    --mob-nav: 44px;
    --mob-tabs: 84px;
    --mob-sat: env(safe-area-inset-top, 0px);
    --mob-sab: env(safe-area-inset-bottom, 0px);
  }

  /* ── 0 · LA COQUILLE — étape 1 ──────────────────────────────────────────── */
  html { -webkit-text-size-adjust: 100%; }
  html, body { overscroll-behavior-y: none; }
  #app { height: 100vh; height: 100dvh; flex-direction: column; }
  #sidebar, .sb-v3-subnav { display: none !important; }          /* le rail vit dans la barre d'onglets, « Plus » et le sélecteur */
  #app-header { display: none !important; }                       /* remplacé par .mobile-nav (Mon tableau de bord, Signaler → « Plus ») */
  #main { flex: 1 1 auto; min-width: 0; width: 100%; -webkit-overflow-scrolling: touch; }
  #content { padding: 6px 16px calc(var(--mob-tabs) + var(--mob-sab) + 24px); min-width: 0; max-width: 100vw; }

  /* la barre de navigation : à gauche la pastille MA (ou « ‹ Retour »), au centre le titre ⌄, à droite recherche · cloche · SOMA · avatar */
  .mobile-nav { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 2px; min-height: calc(var(--mob-nav) + var(--mob-sat)); padding: var(--mob-sat) 6px 0 10px; background: var(--white); border-bottom: 1px solid var(--line); }
  .mobile-nav__mark { width: 30px; height: 30px; border-radius: var(--radius-sm); background: var(--green); color: var(--white); font: 900 11px/1 var(--font); letter-spacing: -.04em; display: flex; align-items: center; justify-content: center; margin: 0 8px 0 4px; flex: none; }
  .mobile-nav__back { display: inline-flex; align-items: center; gap: 3px; min-height: 44px; padding: 0 6px 0 2px; border: none; background: none; color: var(--green-dark); font: 700 15px var(--font); flex: none; }
  .mobile-nav__back svg { width: 11px; height: 19px; }
  .mobile-nav__back[hidden], .mobile-nav__mark[hidden] { display: none; }   /* l'attribut hidden gagne sur display:flex */
  .mobile-nav__title { margin: 0 auto; min-height: 44px; min-width: 44px; padding: 0 6px; border: none; background: none; display: flex; align-items: center; gap: 6px; font: 900 15px/1 var(--font); letter-spacing: -.01em; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 52vw; }
  .mobile-nav__title svg { width: 10px; height: 10px; color: var(--muted); flex: none; }
  .mobile-nav__title.sans-choix svg { display: none; }
  .mobile-nav__r { display: flex; align-items: center; gap: 0; margin-left: auto; flex: none; }
  .mobile-nav__ico { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; color: var(--text); background: none; border: none; position: relative; padding: 0; }
  .mobile-nav__ico svg { width: 21px; height: 21px; }
  .mobile-nav__ico[hidden] { display: none; }
  /* un écran de profondeur (fiche, page atteinte depuis une tuile) : seulement « ‹ Retour » à gauche, ⋯ et SOMA à droite — loupe, cloche et avatar vivent sur les écrans racines */
  .mobile-nav.profondeur [data-mob="recherche"], .mobile-nav.profondeur [data-mob="cloche"], .mobile-nav.profondeur .mobile-nav__av { display: none; }
  .mobile-nav.profondeur .mobile-nav__title { max-width: 60vw; }
  .mobile-nav__badge { position: absolute; top: 5px; right: 5px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: var(--red); color: var(--white); font: 900 10px/16px var(--font); text-align: center; }
  .mobile-nav__badge:empty, .mobile-nav__badge[data-n="0"] { display: none; }
  .mobile-nav__av { width: 44px; height: 44px; border: none; background: none; padding: 0; display: flex; align-items: center; justify-content: center; }
  .mobile-nav__av span { width: 32px; height: 32px; border-radius: 50%; background: var(--green-soft); color: var(--green-dark); font: 900 12px var(--font); display: flex; align-items: center; justify-content: center; }
  .mobile-nav__ico:focus-visible, .mobile-nav__title:focus-visible, .mobile-nav__back:focus-visible, .mobile-nav__av:focus-visible { outline: none; box-shadow: var(--shadow-focus); border-radius: var(--radius-sm); }

  /* D4 · les trois segments de « Affaires » — la recette du groupe segmenté (DESIGN.md § 8.4) */
  .mobile-segments { display: flex; gap: 2px; margin: 8px 16px 2px; padding: 3px; border-radius: var(--radius-pill); background: rgba(26, 110, 60, .06); }
  .mobile-segments[hidden] { display: none; }                                          /* l'attribut hidden doit gagner sur display:flex */
  .mobile-segments button { flex: 1 1 0; min-height: 44px; border: none; border-radius: var(--radius-pill); background: none; font: 700 12.5px var(--font); color: var(--text2); display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 0 8px; }
  .mobile-segments button.on { background: var(--white); color: var(--green-dark); box-shadow: 0 1px 3px rgba(13, 27, 15, .08); }
  .mobile-segments button b { font-weight: 700; font-size: 11px; color: var(--muted); }
  .mobile-segments button.on b { color: var(--green-dark); }
  .mobile-segments button:focus-visible { outline: none; box-shadow: var(--shadow-focus); }

  /* la barre d'onglets : cinq onglets, blanche comme le rail, l'actif en vert foncé avec un trait au-dessus */
  .mobile-tabs { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: flex; justify-content: space-around; padding: 7px 4px var(--mob-sab); height: calc(var(--mob-tabs) + var(--mob-sab)); background: var(--white); border-top: 1px solid var(--line); }
  .mobile-tab { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 3px; width: 74px; min-height: 60px; padding: 4px 0 0; border: none; background: none; color: var(--muted); font: 700 9.5px/1 var(--font); white-space: nowrap; position: relative; }
  .mobile-tab svg { width: 24px; height: 24px; }
  .mobile-tab.on { color: var(--green-dark); }
  .mobile-tab.on::before { content: ''; position: absolute; top: -8px; width: 20px; height: 2px; background: var(--green); }
  .mobile-tab .mobile-nav__badge { top: -2px; right: 14px; }
  .mobile-tab:focus-visible { outline: none; box-shadow: var(--shadow-focus); border-radius: var(--radius-sm); }

  /* la feuille : fond assombri 50 %, radius 26, poignée, ✕ ; fermeture par glissé ou ✕ */
  .mobile-sheet-dim { position: fixed; inset: 0; z-index: 60; background: rgba(15, 26, 23, .5); }
  .mobile-sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 61; background: var(--white); border-radius: 26px 26px 0 0; padding: 8px 0 calc(18px + var(--mob-sab)); max-height: 92vh; max-height: 92dvh; overflow: auto; box-shadow: 0 -12px 48px rgba(13, 27, 15, .18); transition: transform .22s ease-out; }
  .mobile-sheet__grab { width: 36px; height: 5px; border-radius: 3px; background: var(--muted2); margin: 0 auto 10px; }
  .mobile-sheet__te { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; padding: 0 16px 8px; }
  .mobile-sheet__eb { display: block; font: 600 9.5px/1 var(--font-eb); letter-spacing: .16em; text-transform: uppercase; color: var(--green); margin-bottom: 4px; }
  .mobile-sheet__t { margin: 0; font: 900 16px/1.1 var(--font); letter-spacing: -.02em; color: var(--text); }
  .mobile-sheet__x { width: 44px; height: 44px; border: none; background: none; display: flex; align-items: center; justify-content: center; margin: -7px -8px 0 0; flex: none; }
  .mobile-sheet__x span { width: 30px; height: 30px; border-radius: 50%; background: var(--grey); display: flex; align-items: center; justify-content: center; color: var(--text2); }
  .mobile-sheet__x svg { width: 12px; height: 12px; }
  .mobile-sheet__grp { padding: 10px 16px 2px; font: 600 9.5px/1.3 var(--font-eb); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
  .mobile-sheet__item { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 46px; padding: 0 16px; border: none; border-bottom: 1px solid var(--line); background: none; font: 700 14px var(--font); letter-spacing: -.01em; color: var(--text); text-align: left; }
  .mobile-sheet__item i { width: 7px; height: 7px; background: var(--muted2); flex: none; }        /* la puce carrée — jamais un rond (BRAND v2 § 10) */
  .mobile-sheet__item.on { color: var(--green-dark); }
  .mobile-sheet__item.on i, .mobile-sheet__item.p i { background: var(--green); }
  .mobile-sheet__item.p { color: var(--green-dark); }
  .mobile-sheet__item.r { color: var(--red); } .mobile-sheet__item.r i { background: var(--red); }
  .mobile-sheet__item small { margin-left: auto; font: 400 11px var(--font); color: var(--muted); text-align: right; white-space: nowrap; }
  .mobile-sheet__item b.n { margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--red); color: var(--white); font: 900 11px/20px var(--font); text-align: center; }
  .mobile-sheet__item:last-child { border-bottom: 0; }
  .mobile-sheet__item:focus-visible { outline: none; box-shadow: var(--shadow-focus); }

  /* les tiroirs et panneaux du bureau deviennent des feuilles, pleine largeur (leur JS ne change pas) */
  .soma-tiroir { top: auto; bottom: 0; height: 92vh; height: 92dvh; width: 100%; max-width: 100vw; border-left: 0; border-radius: 26px 26px 0 0; transform: translateY(100%); box-shadow: 0 -12px 48px rgba(13, 27, 15, .18); }
  .soma-tiroir.open { transform: translateY(0); }
  .com-panel { top: auto; bottom: 0; height: 92vh; height: 92dvh; border-left: 0; border-radius: 26px 26px 0 0; box-shadow: 0 -12px 48px rgba(13, 27, 15, .18); }
  .com-panel.open { width: 100vw; max-width: 100vw; }
  #soma-notifs { top: calc(var(--mob-nav) + var(--mob-sat)); right: 0; left: 0; width: auto; max-width: 100vw; border-radius: 0 0 22px 22px; max-height: calc(100vh - var(--mob-nav) - var(--mob-tabs)); overflow: auto; }

  /* ── 1 · LE LOT ZÉRO — étape 2 : les casses connues qui cachent du contenu ──────────────── */
  #main { overflow-x: hidden; }                                    /* filet : rien ne défile de côté (le gardien lit les bords, pas ce filet) */
  #content img, #content svg, #content canvas, #content video, #content iframe { max-width: 100%; }
  #content canvas { height: auto; }
  #content input, #content select, #content textarea { min-width: 0; max-width: 100%; }
  /* marges négatives prévues pour les 44 px du bureau → neutralisées */
  #content #det-main-wrap { margin: 0 !important; width: auto; height: auto !important; }   /* le module pose margin:-40px -44px EN LIGNE (js) : seul !important le neutralise sans toucher au JS */
  #content .det-main { padding-left: 0; padding-right: 0; }
  #view-list { margin: 0; width: auto; padding: 8px 0 60px; }
  /* les panneaux fixes du bureau : pleine largeur, et rien tant qu'ils sont fermés (ils comptaient dans la largeur) */
  .devis-panel-ia { width: 100vw; max-width: 100vw; left: 0; right: 0; }
  .devis-panel-ia:not(.open) { display: none; }
  .pao-panel { width: 100vw; max-width: 100vw; }
  .pao-panel:not(.open) { display: none; }
  .soma-tiroir:not(.open) { visibility: hidden; }
  /* en-têtes de page : les boutons passent sous le titre au lieu de sortir de l'écran */
  .dw-head { flex-wrap: wrap; gap: 8px 12px; }
  .dw-head-right { margin-left: 0; flex-wrap: wrap; width: 100%; gap: 8px; }
  .pao-nav { flex-wrap: wrap; gap: 8px; }
  .pao-nav-btn { min-width: 44px; min-height: 44px; }
  .pao-type-filter { flex-wrap: wrap; }
  /* les grilles à colonnes fixes se replient (jamais une colonne coupée) */
  .dv10-dec-row { grid-template-columns: 1fr; gap: 8px; }
  .dv10-geste { white-space: normal; height: auto; min-height: 44px; max-width: 100%; }
  .dv10-krow { grid-template-columns: 1fr; gap: 2px; }
  .dv10-k5 { grid-template-columns: 1fr 1fr; }
  .dv10-fleuve { flex-wrap: wrap; }
  .dv10-fs { flex: 1 1 calc(50% - 4px); min-width: 0; }
  .cv2d-kpis { grid-template-columns: 1fr 1fr; }
  .cv2d-kpi-val, .kpi-num { font-size: 26px; letter-spacing: -.02em; overflow-wrap: anywhere; }
  .dash-plan-row { grid-template-columns: 1fr; }
  .dash-plan-row-progress { display: block; }                      /* le bureau la cachait sous 760 px : « Devis en édition », « En étude » reviennent */
  #content .soma-brief-btn { min-width: 44px; }
  .pao-nav-label { min-height: 44px; display: inline-flex; align-items: center; }
  .dash-plan-decal { white-space: normal; }
  .de-hero5 { grid-template-columns: 1fr 1fr; }
  .de-met .de-grid4 { min-width: 0; grid-template-columns: 1fr 1fr; }
  .kpi-row { grid-template-columns: 1fr 1fr; gap: 8px; }
  .kpi-card { min-height: 0; }
  /* Détections : ce que les @container masquaient sous 1280 revient (la valeur en deuxième étage, jamais masquée) */
  .det-table .det-contact-email, .det-table .det-via, .det-mode-qualifier th:nth-child(3), .det-mode-qualifier td:nth-child(3), .det-mode-go th:nth-child(3), .det-mode-go td:nth-child(3) { display: block; }
  .det-table .det-contact-email { display: inline; }
  /* les barres de commande s'empilent, les onglets défilent au doigt sans couper */
  .command-bar { flex-wrap: wrap; }
  .command-bar > *, .command-bar__search { min-width: 0; max-width: 100%; }
  .tabs-pipeline, .devis-segments, .soma-onglets, .pao-type-filter, .det-tabs, .it-filters { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .tabs-pipeline::-webkit-scrollbar, .devis-segments::-webkit-scrollbar, .soma-onglets::-webkit-scrollbar { display: none; }
  /* toute table du bureau qui n'a pas de bascule en cartes défile dans son cadre, jamais la page */
  #content table:not(.soma-ligne-table):not(.comsig-table) { display: block; width: 100%; max-width: 100%; overflow-x: auto; }
  /* la fiche affaire (les 44 px de bureau, la grille à deux colonnes) — la composition vient à l'étape 5 */
  .af-wrap { padding: 8px 0 24px; min-height: 0; }
  .af-grid { grid-template-columns: 1fr; }
  .af-grid > div { min-width: 0; }                                  /* un élément de grille ne peut pas rétrécir sous son contenu sans ça */
  .af-add-full { grid-template-columns: 1fr; }
  .af-bloc, .af-box, .af-vers, .af-pilot, .af-head, .af-sante { width: auto; min-width: 0; max-width: 100%; }
  /* indicateurs du dashboard études (les quatre familles) et planning du tableau de bord */
  .dv10-ctabs { flex-wrap: wrap; }
  .dv10-ctab { flex: 1 1 45%; min-width: 0; }
  .dash-plan-row-name { flex-wrap: wrap; }
  .dash-charts-grid { display: block; }
  .dash-chart-card { width: auto; margin: 0 0 12px; }

  /* ── 2 · LE PATRON « LISTE » — étape 3 : la ligne dense (maquette v4, .li) ─────────────────
     46 px minimum, deux étages (titre 13,5 px 700 · sous-ligne 11 px gris), la barre d'état 3 px à gauche
     (déjà portée par .soma-ligne : c'est sa couleur qui parle), la valeur Lato 900 15 px à droite, le ⋯ 44 px
     qui ouvre la feuille des gestes (mobile-shell.js). Fond blanc, filets, aucune carte, aucune colonne coupée :
     toutes les cellules du bureau sont là, en deuxième étage ; les en-têtes de colonnes se dissolvent dans la ligne. */
  .soma-ligne-table > thead, .comsig-table > thead, .soma-ligne-table th, .comsig-table th, .devis-grid-th, .devis-grid-head, .slt-hd { display: none; }
  .soma-ligne-table > tbody > tr.soma-ligne, .devis-grid-row.soma-ligne, .comsig-table > tbody > tr:not(.comsig-bande) {
    display: block; position: relative; min-height: 46px; padding: 8px 48px 8px 12px; border-bottom: 1px solid var(--line); line-height: 1.3;
  }
  .soma-ligne-table > tbody > tr.soma-ligne, .devis-grid-row.soma-ligne { padding-right: 136px; }   /* la valeur à droite + le ⋯ */
  .soma-ligne-table > tbody > tr.soma-ligne > td, .devis-grid-row.soma-ligne > .devis-grid-td, .comsig-table > tbody > tr:not(.comsig-bande) > td { display: inline; padding: 0; border: none; min-width: 0; font-size: 11px; color: var(--muted); }
  .soma-ligne-table > tbody > tr.soma-ligne > td[data-col]::before, .devis-grid-row.soma-ligne > .devis-grid-td[data-col]::before { content: none; }
  /* étage 1 : la première cellule (titre + sous-titre) */
  .soma-ligne-table > tbody > tr.soma-ligne > td:first-child, .devis-grid-row.soma-ligne > .devis-grid-td:first-child, .comsig-table > tbody > tr:not(.comsig-bande) > td:first-child { display: block; padding: 0 0 2px; }
  .det-sig-t1, .devl-t1, .comsig-t1 { font: 700 13.5px/1.25 var(--font); letter-spacing: -.01em; color: var(--text); white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .det-sig-t2, .devl-t2, .comsig-t2 { font-size: 11px; color: var(--muted); line-height: 1.3; white-space: normal; display: inline; }
  .soma-ligne-table > tbody > tr.soma-ligne > td:first-child > .det-sig-t2, .devis-grid-row.soma-ligne > .devis-grid-td:first-child > .devl-t2 { display: block; }
  /* la valeur : à droite, Lato 900 15 px, sa précision dessous */
  .soma-ligne-table > tbody > tr.soma-ligne > td.det-sig-droite[data-col], .devis-grid-row.soma-ligne > .devl-droite { display: block; position: absolute; right: 44px; top: 8px; max-width: 96px; text-align: right; }
  .det-sig-tfo, .devl-tfo { display: flex; flex-direction: column; align-items: flex-end; }
  .det-sig-tfo-v, .devl-tfo-v { font: 900 15px/1.1 var(--font); letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: var(--text); }
  .det-sig-tfo-quoi, .devl-tfo-quoi { font-size: 10px; color: var(--muted); white-space: normal; line-height: 1.2; }
  /* le ⋯ (posé par mobile-shell.js, ou le kebab du bureau) et les boutons du bureau qu'il remplace */
  .mobile-row-menu { position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border: none; background: none; color: var(--muted); display: flex; align-items: center; justify-content: center; padding: 0; }
  .mobile-row-menu svg { width: 17px; height: 17px; }
  .mobile-row-menu:focus-visible { outline: none; box-shadow: var(--shadow-focus); border-radius: var(--radius-sm); }
  .soma-ligne-table > tbody > tr.soma-ligne > td:last-child:not([data-col]) { display: block; position: static; }
  .soma-ligne-table > tbody > tr.soma-ligne > td:last-child:not([data-col]) > button, .soma-ligne-table > tbody > tr.soma-ligne > td:last-child:not([data-col]) > a { display: none; }   /* Go / No vivent dans le ⋯ (et dans le tiroir) */
  .comsig-table > tbody > tr:not(.comsig-bande) > td:last-child { display: block; position: absolute; right: 0; top: 50%; transform: translateY(-50%); }
  .comsig-table > tbody > tr:not(.comsig-bande) > td:last-child::before { content: none; }
  .comsig-kb { width: 44px; height: 44px; }
  /* étage 2 : toutes les autres cellules, en ligne, séparées par un point médian */
  .soma-ligne-table > tbody > tr.soma-ligne > td[data-col]:not(.det-sig-droite) + td[data-col]:not(.det-sig-droite)::before, .devis-grid-row.soma-ligne > .devis-grid-td[data-col]:not(.devl-droite) + .devis-grid-td[data-col]:not(.devl-droite)::before, .comsig-table > tbody > tr:not(.comsig-bande) > td:not(:first-child):not(:last-child) + td:not(:last-child)::before { content: '\00B7\00A0'; color: var(--muted2); }
  .soma-ligne-table > tbody > tr.soma-ligne > td[data-col]:not(.det-sig-droite) > div, .devis-grid-row.soma-ligne > .devis-grid-td[data-col]:not(.devl-droite) > div { display: inline; }
  .soma-ligne-table > tbody > tr.soma-ligne > td[data-col]:not(.det-sig-droite) > div:empty, .devis-grid-row.soma-ligne > .devis-grid-td[data-col]:not(.devl-droite) > div:empty { display: none; }
  .soma-ligne-table > tbody > tr.soma-ligne > td[data-col]:not(.det-sig-droite) > div + div::before, .devis-grid-row.soma-ligne > .devis-grid-td[data-col]:not(.devl-droite) > div + div::before { content: '\00A0'; }
  .det-sig-etat, .devl-etat { font-weight: 700; color: var(--text2); }                   /* l'état en toutes lettres, en gras */
  .det-sig-m2, .devl-m1, .devl-m2 { color: var(--text2); font-weight: 400; font-size: 11px; white-space: normal; }
  .comsig-table > tbody > tr:not(.comsig-bande) > td:first-child { text-align: left; }
  .command-bar { justify-content: flex-start; gap: 8px; }
  .det-remise-in { display: none; }                                                        /* la date se lit ; elle se modifie dans le tiroir */
  .det-remise-dit { display: inline; }
  .det-sig-date--depassee .det-remise-dit { color: var(--red); font-weight: 700; }
  /* Commercial — la table « chez qui · depuis · prochain mouvement … » */
  .comsig-carte { border: none; border-radius: 0; overflow: visible; background: none; }
  .comsig-bande td { display: block; padding: 12px 0 6px; font: 600 10.5px/1 var(--font-eb); letter-spacing: .16em; text-transform: uppercase; color: var(--text2); border-bottom: 1px solid var(--line2); background: none; }
  .comsig-bande td small, .comsig-bande td span { text-transform: none; letter-spacing: 0; font: 400 11px var(--font); color: var(--muted); margin-left: 8px; }
  .comsig-pied { padding: 10px 0; font-size: 11px; color: var(--muted); }
  /* Tâches (la ligne .slt-row du bureau, dans une fiche) : deux étages, son ⋯ « tous les gestes » reste */
  .slt-row { display: flex; flex-wrap: wrap; align-items: center; column-gap: 8px; min-height: 46px; padding: 8px 0 8px 12px; border-bottom: 1px solid var(--line); }
  .slt-row .slt-chk { width: 44px; height: 44px; flex: none; order: 0; margin-left: -12px; }
  .slt-row .slt-aff { order: 4; flex: 1 1 100%; font-size: 11px; color: var(--muted); }
  .slt-row .slt-rw { order: 1; flex: 1 1 0; min-width: 0; }
  .slt-row .slt-rw .t { font: 700 13.5px/1.25 var(--font); white-space: normal; }
  .slt-row .slt-wh { order: 2; flex: none; margin-left: auto; font: 900 15px/1.1 var(--font); font-variant-numeric: tabular-nums; text-align: right; }
  .slt-row .slt-b2 { display: none; }                                                       /* le geste vit dans le ⋯ du bureau (.slt-ic) */
  .slt-row .slt-ic { order: 3; width: 44px; height: 44px; flex: none; margin-right: -4px; }
  /* Détections : la barre d'outils s'empile (recherche pleine largeur) */
  .det-toolbar { flex-wrap: wrap; gap: 8px; }
  .det-search { flex: 1 1 100%; min-height: 44px; }
  /* 44 px partout : boutons, champs, sélecteurs, onglets, pastilles ; les liens dans le texte gagnent leur zone de touche sans bouger la ligne */
  #content button:not(.mobile-row-menu), #content .btn, #content .chip, #content .cta, #content select, #content input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), #content .command-bar__btn, #content .tabs-pipeline__tab, #content .soma-onglet, #content .com-tab, #content .pt-lien-partis, #content .dw-btn-ghost, #content .vs-pick, #content summary, #content [role="button"] { min-height: 44px; }
  #content .command-bar__search, #content .search { min-height: 44px; }
  #content a:not([class*="btn"]):not(.cta):not(.mobile-sheet__item):not([class*="tab"]) { display: inline-block; padding: 14px 0; margin: -14px 0; }
  #content .command-bar__btn, #content .kebab-menu__item { min-width: 44px; }
  #content .kebab-menu .kebab-menu__item { min-height: 46px; height: auto; }
  /* les valeurs cliquables d'une ligne (la transfo, la remise) gagnent leur zone de touche sans bouger la ligne */
  .det-sig-tfo-v, .devl-tfo-v { display: inline-flex; align-items: center; justify-content: flex-end; min-height: 44px; min-width: 44px; margin: -12px 0; }
  .soma-ligne-table > tbody > tr.soma-ligne > td[onclick], .soma-ligne-table > tbody > tr.soma-ligne > td.det-sig-date { display: inline-block; padding: 14px 0; margin: -14px 0; }
  /* les bandes de regroupement des listes et l'annotation : bandeaux de section à filet */
  .pt-bande td, .detsig-bande td, .dvsig-bande td, .slt-bande, .dvl-bande { display: block; padding: 12px 0 6px; font: 600 10.5px/1 var(--font-eb); letter-spacing: .16em; text-transform: uppercase; color: var(--text2); border-bottom: 1px solid var(--line2); background: none; }

  /* ── 3 · LE DASHBOARD ÉTUDES — étape 4 (maquette v4, écrans 1-2, D7, D8) ───────────────────
     Ordre : titre · verdict · depuis lundi · le fleuve · ce qui réclame ta décision · les 5 du lundi ·
     indicateurs · cette semaine. Un seul panneau Noir Artois : le verdict. Le fleuve est le seul élément
     posé sur un lit gris. Les 5 du lundi en grand livre, les décisions en patron liste, les indicateurs en portes. */
  .dw-scene { display: flex; flex-direction: column; }
  .dw-scene > .dw-head { order: 0; }
  .dw-scene > #dv10-verdict { order: 1; }
  .dw-scene > #dv10-semaine { order: 2; }
  .dw-scene > #dv10-fleuve { order: 3; }
  .dw-scene > #dv10-decisions { order: 4; }
  .dw-scene > #dv10-lundi { order: 5; }
  .dw-scene > #dv10-indicateurs { order: 6; }
  .dw-scene > #dv10-agenda { order: 7; }
  .dw-scene > * { order: 8; }
  /* le titre : tiret vert 26×3, « Dashboard études » 28 px 900, « Objectifs › » à droite, la date dessous */
  .dw-head { display: block; margin: 8px 0 6px; }
  .dw-head .dw-eyebrow, .dw-head .pg-eyebrow { display: none; }
  .dw-head .pg-head h1 { font: 900 28px/1.05 var(--font); letter-spacing: -.028em; margin: 0; }
  .dw-head .pg-head h1::before { content: ''; display: block; width: 26px; height: 3px; background: var(--green); margin-bottom: 9px; }
  .dw-head-right { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin: 4px 0 0; width: auto; }
  .dw-head-right .dw-date { flex: 1 1 100%; font-size: 12px; color: var(--muted); }
  .dw-head-right .dw-btn-ghost { border: none; background: none; padding: 0; min-height: 44px; font: 700 12.5px var(--font); color: var(--green-dark); box-shadow: none; }
  /* le verdict : LE panneau Noir Artois de l'écran */
  .dv10-verdict { background: var(--ink); color: var(--white); border: none; border-radius: 14px; padding: 13px 16px 12px 17px; margin: 10px 0 0; position: relative; overflow: hidden; gap: 0; display: block; }
  .dv10-verdict::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--green); }
  .dv10-verdict-av { display: none; }                                                        /* la nuée reste au bureau ; ici, le rond vert de l'eyebrow */
  .dv10-verdict-who { display: flex; align-items: center; gap: 8px; font: 600 9.5px/1 var(--font-eb); letter-spacing: .18em; text-transform: uppercase; color: var(--green); margin: 0; }
  .dv10-verdict-who::before { content: ''; width: 16px; height: 16px; border-radius: 50%; background: var(--green); display: inline-block; }
  .dv10-verdict-p { font: italic 400 16px/1.38 var(--font-serif); letter-spacing: -.012em; color: var(--white); margin: 8px 0 9px; }
  .dv10-verdict-attente { color: rgba(255, 255, 255, .55); }
  .dv10-verdict-srcs { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin: 0; font-size: 11.5px; }
  .dv10-verdict-srcs .dv10-src { background: none; border: none; padding: 0; color: var(--green); font-weight: 700; min-height: 44px; display: inline-flex; align-items: center; margin: -12px 0; }
  .dv10-verdict-srcs .dv10-src svg { display: none; }
  .dv10-verdict-srcs .dv10-src-constat { color: rgba(255, 255, 255, .55); font-weight: 400; }
  /* depuis lundi : bandeau + une ligne de quatre compteurs (36 px), zéros en noir */
  .dv10-semaine { display: flex; flex-wrap: wrap; align-items: center; gap: 0; margin: 20px 0 0; padding: 0; border: none; background: none; border-radius: 0; }
  .dv10-semaine-k { flex: 1 1 100%; font: 600 10.5px/1 var(--font-eb); letter-spacing: .16em; text-transform: uppercase; color: var(--text2); padding-bottom: 6px; border-bottom: 1px solid var(--line2); margin: 0; }
  /* CORRECTION 4 · plus de pilules d'état : quatre compteurs à plat sur une ligne de 36 px, séparés d'un point médian, un filet dessous */
  .dv10-mv { flex: 0 1 auto; display: inline-flex; align-items: baseline; gap: 5px; height: 36px; padding: 0; margin: 0; font: 400 11px var(--font); color: var(--muted); background: none; border: none; border-radius: 0; }
  .dv10-mv + .dv10-mv::before { content: '\00B7'; color: var(--muted2); margin: 0 8px 0 4px; }
  .dv10-mv svg { display: none; }
  .dv10-mv b { font: 900 15px var(--font); color: var(--text); font-variant-numeric: tabular-nums; }
  .dv10-semaine { border-bottom: 1px solid var(--line); }
  /* les bandeaux de section : caps à gauche, sous-titre en petit, filet */
  .dv10-fleuve-h, .dv10-dec-h { display: flex; align-items: baseline; gap: 8px; margin: 20px 0 0; padding-bottom: 6px; border-bottom: 1px solid var(--line2); }
  .dv10-sect { font: 600 10.5px/1 var(--font-eb); letter-spacing: .16em; text-transform: uppercase; color: var(--text2); white-space: nowrap; }
  .dv10-sub, .dv10-sub-serif { font: 400 11px var(--font); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1 1 auto; min-width: 0; }
  /* le fleuve : lit gris pleine largeur, tuiles blanches 100×82 qui glissent et s'aimantent */
  .dv10-fleuve { display: flex; flex-wrap: nowrap; gap: 6px; margin: 8px -16px 0; padding: 10px 16px 8px; background: var(--grey); overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-left: 16px; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .dv10-fleuve::-webkit-scrollbar { display: none; }
  .dv10-fs { flex: 0 0 100px; width: 100px; height: 82px; min-height: 82px; scroll-snap-align: start; border: none; border-radius: 10px; background: var(--white); padding: 9px 9px 0; display: flex; flex-direction: column; position: relative; overflow: hidden; box-shadow: 0 1px 2px rgba(13, 27, 15, .04); }
  .dv10-fs::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: var(--line); }
  .dv10-fs-l { font: 600 9.5px/1.15 var(--font-eb); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); height: 22px; overflow: hidden; }
  .dv10-fs-v { font: 900 26px/1 var(--font); letter-spacing: -.03em; font-variant-numeric: tabular-nums; margin-top: 1px; color: var(--text); }
  .dv10-fs-a { font-size: 9.5px; color: var(--muted); margin-top: auto; padding-bottom: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .dv10-fs-a .dv10-warn { color: var(--ocre); font-weight: 400; }
  .dv10-fs.off .dv10-fs-v { color: var(--muted2); }
  .dv10-fs:has(.dv10-warn)::after { background: var(--ocre); }
  .dv10-fs.goulot { box-shadow: inset 0 0 0 1.5px var(--red); }
  .dv10-fs.goulot .dv10-fs-l, .dv10-fs.goulot .dv10-fs-a, .dv10-fs.goulot .dv10-fs-a .dv10-warn { color: var(--red); }
  .dv10-fs.goulot::after { background: var(--red); }
  .dv10-goulot-tag { display: none; }                                                        /* le liseré et les textes rouges le disent */
  .dv10-fs:active, .dv10-fs.on { background: var(--ink); color: var(--white); }
  .dv10-fs:active .dv10-fs-l, .dv10-fs.on .dv10-fs-l { color: var(--green); }
  .dv10-fs:active .dv10-fs-v, .dv10-fs.on .dv10-fs-v { color: var(--white); }
  .dv10-fs:active .dv10-fs-a, .dv10-fs.on .dv10-fs-a { color: rgba(255, 255, 255, .7); }
  .dv10-fs:active::after, .dv10-fs.on::after { background: var(--green); }
  /* sous le lit : sept carrés, chacun une touche (mobile-shell.js) */
  .mobile-pos { display: flex; gap: 6px; align-items: center; height: 40px; }
  .mobile-pos button { width: 44px; height: 40px; margin: 0 -17px 0 -18px; border: none; background: none; padding: 0; display: flex; align-items: center; justify-content: center; }
  .mobile-pos button i { width: 9px; height: 9px; background: var(--muted2); display: block; }
  .mobile-pos button.on i { background: var(--text); }
  .mobile-pos button.g i { background: var(--red); }
  .mobile-pos span { font-size: 10.5px; color: var(--muted); margin-left: 26px; }
  .mobile-pos a[hidden] { display: none; }
  .mobile-pos a { margin-left: auto; font: 700 11px var(--font); color: var(--green-dark); text-decoration: none; min-height: 44px; min-width: 44px; display: inline-flex; align-items: center; justify-content: flex-end; }
  /* ce qui réclame ta décision : patron liste — barre rouge sur la première, ocre sur les suivantes, montant à droite, ⋯ */
  .dv10-dec { border: none; border-radius: 0; background: none; }
  .dv10-dec-row { display: block; position: relative; min-height: 46px; padding: 8px 44px 8px 12px; border-bottom: 1px solid var(--line); gap: 0; }
  .dv10-dec-row::before { top: 9px; bottom: 9px; border-radius: 2px; background: var(--ocre); }
  .dv10-dec-row.hot::before { background: var(--red); }
  .dv10-dec-fait { font: 700 13.5px/1.25 var(--font); letter-spacing: -.01em; color: var(--text); padding-right: 84px; }
  .dv10-dec-fait small { display: block; font: 400 11px/1.3 var(--font); color: var(--muted); margin-top: 2px; }
  .dv10-dec-cout { position: absolute; right: 44px; top: 8px; text-align: right; font-size: 10px; color: var(--muted); line-height: 1.2; }
  .dv10-dec-cout b { display: block; font: 900 15px/1.1 var(--font); letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: var(--text); }
  .dv10-dec-row .dv10-geste { display: none; }                                              /* le geste vit dans le ⋯ */
  .dv10-dec-pied { min-height: 38px; display: flex; align-items: center; font: 700 12px var(--font); }
  .dv10-dec-pied a { color: var(--green-dark); text-decoration: none; }
  /* les 5 du lundi : grand livre — libellé eyebrow, chiffre 22 px 900 à droite, explication dessous, pas une boîte */
  .dv10-k5 { display: block; }
  .dv10-k { display: grid; grid-template-columns: 1fr auto; gap: 2px 14px; align-items: start; padding: 9px 0; border: none; border-bottom: 1px solid var(--line); border-radius: 0; background: none; }
  .dv10-k:last-child { border-bottom: none; }
  .dv10-k-l { grid-column: 1; grid-row: 1; font: 600 9.5px/1.3 var(--font-eb); letter-spacing: .14em; text-transform: uppercase; color: var(--text2); padding-top: 5px; }
  .dv10-k-v { grid-column: 2; grid-row: 1 / span 3; font: 900 22px/1 var(--font); letter-spacing: -.03em; font-variant-numeric: tabular-nums; text-align: right; align-self: start; white-space: nowrap; color: var(--text); }
  .dv10-k-v.att, .dv10-k-v.attente { font: italic 400 15px/1.5 var(--font-serif); color: var(--text2); }
  .dv10-k-obj, .dv10-k-dec { grid-column: 1; font-size: 10.5px; color: var(--muted); line-height: 1.35; }
  .dv10-k-obj b { color: var(--text2); font-weight: 700; }
  .dv10-k-obj a, .dv10-compo-lien { color: var(--green-dark); font-weight: 700; }
  /* indicateurs de gestion : quatre portes (la famille + ses mots), la famille ouverte déroule son grand livre */
  .dv10-ctabs { display: block; border: none; }
  .dv10-ctab { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 46px; padding: 8px 0 8px 12px; border: none; border-bottom: 1px solid var(--line); background: none; font: 700 13.5px/1.25 var(--font); letter-spacing: -.01em; color: var(--text); text-align: left; border-radius: 0; flex: none; }
  .dv10-ctab small { font: 400 11px var(--font); color: var(--muted); margin-left: 6px; }
  .dv10-ctab::after { content: '\203A'; color: var(--muted2); font-size: 18px; padding: 0 6px 0 10px; }
  .dv10-ctab.active { color: var(--green-dark); }
  .dv10-cale-panel { border: none; padding: 0; }
  .dv10-krow { display: grid; grid-template-columns: 1fr auto; gap: 2px 14px; padding: 9px 0 9px 12px; border-bottom: 1px solid var(--line); align-items: start; }
  .dv10-krow-n { grid-column: 1; grid-row: 1; font: 600 9.5px/1.3 var(--font-eb); letter-spacing: .14em; text-transform: uppercase; color: var(--text2); padding-top: 5px; }
  .dv10-krow-v { grid-column: 2; grid-row: 1 / span 2; font: 900 22px/1 var(--font); letter-spacing: -.03em; font-variant-numeric: tabular-nums; text-align: right; color: var(--text); white-space: nowrap; }
  .dv10-krow-d { grid-column: 1; grid-row: 2; font-size: 10.5px; color: var(--muted); line-height: 1.35; }
  /* cette semaine : une ligne italique + « Planning AO › » */
  .dv10-bande { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; margin: 20px 0 0; padding: 0 0 8px; border: none; border-bottom: 1px solid var(--line2); background: none; border-radius: 0; }
  .dv10-bande-k { flex: 1 1 100%; font: 600 10.5px/1 var(--font-eb); letter-spacing: .16em; text-transform: uppercase; color: var(--text2); padding-bottom: 6px; }
  .dv10-bande > span:not(.dv10-bande-k) { font: italic 400 12.5px var(--font-serif); color: var(--muted); }
  .dv10-bande a { color: var(--green-dark); font: 700 12px var(--font); text-decoration: none; }
  /* le rail compact posé sur la page atteinte depuis une tuile (mobile-shell.js) : les 7 étapes en chips, la courante en Noir Artois */
  .mobile-rail { display: flex; gap: 6px; padding: 8px 16px 2px; overflow-x: auto; scrollbar-width: none; }
  .mobile-rail::-webkit-scrollbar { display: none; }
  .mobile-rail button { flex: none; min-height: 44px; padding: 0 12px; border-radius: var(--radius-pill); border: 1px solid var(--line2); background: var(--white); font: 700 11px var(--font); color: var(--text2); white-space: nowrap; }
  .mobile-rail button.on { background: var(--ink); border-color: var(--ink); color: var(--white); }
  .mobile-rail button.g { color: var(--red); border-color: var(--red); }
  .mobile-rail[hidden] { display: none; }

  /* ── 4 · LA FICHE AFFAIRE — étape 5 (maquette v4, écrans 3-5, D5) ───────────────────────────
     Une colonne, dans l'ordre du bureau : en-tête à plat (pas de boîte), prochain mouvement = LE panneau Noir Artois,
     santé en grand sans boîte, puis le devis, les tâches, les relances, le journal du score, le suivi, le sort, le
     contact, les repères — chacun en bandeau + lignes. La barre d'action (mobile-shell.js) est collée en bas. */
  .af-wrap { display: flex; flex-wrap: wrap; flex-direction: row; align-items: flex-start; padding-bottom: calc(96px + 24px); }
  .af-wrap > *, .af-head > *, .af-reps > *, .af-grid > div > * { flex: 1 1 100%; min-width: 0; max-width: 100%; }
  .af-back { display: none; }                                                              /* « ‹ Commercial » vit dans la barre de navigation */
  .af-head, .af-reps, .af-grid, .af-grid > div { display: contents; }
  .af-head-top { order: 1; } .af-pilot { order: 2; } .af-sante { order: 3; } .af-vers { order: 4; }
  .af-grid > div:first-child > .af-box { order: 5; }                                      /* Tâches */
  .af-grid > div:first-child > .af-bloc:nth-of-type(1) { order: 6; }                      /* Relances */
  .af-grid > div:first-child > .af-bloc:nth-of-type(2) { order: 7; }                      /* Pourquoi N % ? */
  .af-grid > div:last-child > .af-box:nth-of-type(1) { order: 8; }                        /* Le suivi */
  .af-grid > div:last-child > .af-box:nth-of-type(2) { order: 9; }                        /* Le sort */
  .af-grid > div:last-child > .af-box:nth-of-type(3) { order: 10; }                       /* Contact */
  .af-reps .af-rep { order: 11; flex: 1 1 25%; min-width: 0; }                             /* Repères, en pied, sur une rangée */
  /* l'en-tête : eyebrow, titre 21 px 900, faits en 11 px — pas de boîte */
  .af-head-top { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 6px 10px; padding: 6px 0 0; }
  .af-head-t { flex: 1 1 0; min-width: 0; }
  .af-head-t .t { font: 900 21px/1.12 var(--font); letter-spacing: -.022em; color: var(--text); }
  .af-head-t .s { font: 400 11px/1.4 var(--font); color: var(--muted); margin-top: 5px; }
  .af-stade { flex: none; font: 600 9.5px/1.4 var(--font-eb); letter-spacing: .16em; text-transform: uppercase; color: var(--green-dark); background: none; border: none; padding: 4px 0 0; }
  /* le prochain mouvement : le seul panneau Noir Artois de l'écran */
  .af-pilot { margin: 12px 0 0; background: var(--ink); border: none; border-radius: 14px; position: relative; overflow: hidden; color: var(--white); padding: 0; }
  .af-pilot::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--green); }
  .af-pilot-h { padding: 11px 16px 5px 17px; font: 600 9.5px/1.3 var(--font-eb); letter-spacing: .14em; text-transform: uppercase; color: var(--green); background: none; border: none; }
  .af-pv { display: grid; grid-template-columns: 50px 1fr auto; gap: 10px; padding: 8px 16px 10px 17px; align-items: start; border-top: 1px solid rgba(255, 255, 255, .08); border-bottom: none; background: none; box-shadow: none; }
  .af-pv .q { width: auto; font: 600 9.5px/1.3 var(--font-eb); letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .5); padding-top: 3px; }
  .af-pv--reclame .q { color: var(--white); }
  .af-pv .quoi { font-size: 13px; line-height: 1.35; color: rgba(255, 255, 255, .85); }
  .af-pv .quoi b { color: var(--white); font-weight: 700; }
  .af-pv .quoi small { display: block; font-size: 10.5px; color: rgba(255, 255, 255, .5); margin-top: 2px; }
  .af-pv .quand { font: 900 17px/1 var(--font); letter-spacing: -.02em; text-align: right; padding-top: 2px; font-variant-numeric: tabular-nums; color: var(--white); }
  .af-pv .quand.r { color: var(--white); }
  .af-pv .quand.r::after { content: ''; display: block; width: 8px; height: 8px; background: var(--red); margin: 5px 0 0 auto; }
  .af-pv .quand.m { color: rgba(255, 255, 255, .35); font-weight: 400; }
  .af-pv-bt { min-height: 44px; border-radius: 10px; margin-top: 6px; }
  /* la santé : en grand, sans boîte, sa jauge lit le journal du score */
  .af-sante { margin: 6px 0 0; padding: 12px 0; border: none; border-bottom: 1px solid var(--line); border-radius: 0; background: none; display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; align-items: center; }
  .af-sante .k { grid-column: 2; grid-row: 1; font: 600 9.5px/1.2 var(--font-eb); letter-spacing: .14em; text-transform: uppercase; color: var(--text2); }
  .af-sante .l { grid-column: 1 / -1; grid-row: 1 / span 2; display: contents; margin: 0; }
  .af-sante .l .v { grid-column: 1; grid-row: 1 / span 2; font: 900 40px/1 var(--font); letter-spacing: -.045em; font-variant-numeric: tabular-nums; }
  .af-sante .l .v.warn { color: var(--yellow); }
  .af-sante .l .tr { grid-column: 2; grid-row: 2; font: 700 11px var(--font); color: var(--green-dark); }
  .af-sante .l .p30 { grid-column: 2; grid-row: 2; justify-self: start; margin-left: 76px; font-size: 11px; color: var(--muted); }
  .af-sante .why { grid-column: 1 / -1; grid-row: 3; font-size: 11px; color: var(--muted); }
  .af-sante .spark { grid-column: 1 / -1; grid-row: 4; height: 16px; margin-top: 6px; gap: 3px; }
  .af-sante .spark i { flex: 1; width: auto; border-radius: 2px; }
  /* les bandeaux de section (le devis, les tâches, les relances, le journal, le suivi, le sort, le contact) et leurs lignes */
  .af-vers, .af-bloc, .af-box { margin: 20px 0 0; border: none; border-radius: 0; background: none; padding: 0; box-shadow: none; }
  .af-vers .vh, .af-bloc-h, .af-box .bh { display: flex; align-items: baseline; gap: 8px; padding: 0 0 6px; margin: 0; border: none; border-bottom: 1px solid var(--line2); background: none; font: 600 10.5px/1.3 var(--font-eb); letter-spacing: .16em; text-transform: uppercase; color: var(--text2); border-radius: 0; }
  .af-vers .vh span:first-child, .af-box .bh b { font: inherit; color: inherit; white-space: nowrap; }
  .af-vers .vh .vh-n, .af-box .bh .sub { flex: 1 1 auto; min-width: 0; font: 400 11px var(--font); letter-spacing: 0; text-transform: none; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .af-box .bh .sp { display: none; }
  .af-box .bh .lk, .af-box .bh .af-btn, .af-box .bh .af-soma { font: 700 12px var(--font); letter-spacing: 0; text-transform: none; color: var(--green-dark); background: none; border: none; padding: 0; min-height: 44px; margin: -14px 0; display: inline-flex; align-items: center; white-space: nowrap; }
  .af-box .bh .af-soma { color: var(--muted); font-weight: 400; }
  .af-vers .vr { padding: 8px 0 8px 12px; gap: 8px 6px; flex-wrap: wrap; min-height: 46px; border-bottom: 1px solid var(--line); background: none; position: relative; box-shadow: none; }
  .af-vers .vr .vn { font: 700 13.5px var(--font); }
  .af-vers .vr .vs { font: 700 12px var(--font); color: var(--text2); background: none; border: none; border-radius: 0; padding: 0; letter-spacing: 0; text-transform: none; }   /* CORRECTION 4 · « V1 · En édition » à plat : la barre ocre de la ligne porte déjà la couleur */
  .af-vers .vr .vn::after { content: '\00A0\00B7'; color: var(--muted2); font-weight: 400; }
  .af-vers .vr .vs.en { color: var(--green-dark); }
  .af-vers .vr.cur { box-shadow: inset 3px 0 0 var(--yellow); }
  .af-vers .vr.cur:has(.vs.en) { box-shadow: inset 3px 0 0 var(--green); }
  .af-vers .vr.cur:has(.vs.ar) { box-shadow: inset 3px 0 0 var(--muted2); }
  .af-vers .vr .vd { flex: 1 1 100%; font-size: 11px; color: var(--muted); }
  .af-vers .vr .af-btn { margin-left: auto; min-height: 44px; border: none; background: none; color: var(--green-dark); font: 700 12px var(--font); padding: 0 4px; box-shadow: none; }   /* un seul bouton vert par écran : celui de la barre d'action */
  .af-bloc-vide, .af-vide-l, .af-bloc-note { padding: 10px 0; font: italic 400 12.5px/1.45 var(--font-serif); color: var(--muted); }
  .af-bloc-note { border-top: 1px solid var(--line); }
  .af-rel { display: flex; gap: 10px; padding: 10px 0 10px 12px; border-bottom: 1px solid var(--line); font-size: 12.5px; }
  .af-bloc-corps { padding: 0; }
  .af-bloc-corps .det-calc-l { padding: 10px 0 4px 12px; font: 600 9.5px/1.3 var(--font-eb); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
  .af-bloc-corps .det-calc-ligne, .af-bloc-corps .det-calc-f { padding: 8px 0 8px 12px; border-bottom: 1px solid var(--line); min-height: 46px; display: flex; align-items: center; gap: 10px; font-size: 12.5px; }
  .af-bloc-corps .det-calc-ligne > :first-child, .af-bloc-corps .det-calc-f > :first-child { white-space: nowrap; flex: none; }   /* la date ou le point de départ ne se coupent pas */
  .af-bloc-corps .det-calc-note { padding: 10px 12px; font: italic 400 11.5px/1.4 var(--font-serif); color: var(--muted); }
  .af-jt { display: flex; justify-content: space-between; padding: 10px 0 0 12px; font: 700 12px var(--font); }
  .af-jt span:last-child { font: 900 15px var(--font); }
  .af-jr { display: flex; align-items: flex-start; gap: 10px; padding: 8px 0 8px 12px; min-height: 46px; border-bottom: 1px solid var(--line); font-size: 12.5px; position: relative; }
  .af-jr .d { flex: none; width: 52px; font: 700 12px var(--font); color: var(--text); }
  .af-jr.note { box-shadow: inset 3px 0 0 var(--green); }                                  /* une note lue par SOMA = la barre verte (acquis) */
  .af-jr .af-jr-x { width: 44px; height: 44px; margin: -8px -4px -8px auto; flex: none; }
  .af-noteadd { padding: 10px 0; }
  .af-add-full { display: none; flex-direction: column; gap: 8px; padding: 10px 0 0; }        /* la nouvelle tâche s'ouvre par « + Ajouter » (mobile-shell.js) */
  .af-box.mob-ouvert .af-add-full { display: flex; }
  .af-add-full .af-btn, .af-btn { min-height: 44px; border-radius: 10px; }
  .af-sort-h { cursor: pointer; min-height: 44px; align-items: center; }
  .af-row { display: flex; align-items: center; gap: 10px; padding: 10px 0; flex-wrap: wrap; }
  .af-row .rw { flex: 1 1 0; min-width: 0; }
  .af-row .ra { display: flex; gap: 8px; margin-left: auto; }
  .af-row .ra .af-btn { min-width: 44px; min-height: 44px; border-radius: 22px; background: var(--green-soft); color: var(--green-dark); border: none; font: 700 12px var(--font); padding: 0 14px; }
  /* les repères : quatre colonnes en pied, eyebrow + chiffre 16 px 900 */
  .af-rep { border: none; border-radius: 0; padding: 10px 0; min-width: 0; margin-top: 8px; border-top: 1px solid var(--line); }
  .af-rep .k { font: 600 9.5px/1.2 var(--font-eb); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
  .af-rep .v { font: 900 16px/1.2 var(--font); letter-spacing: -.02em; font-variant-numeric: tabular-nums; margin-top: 2px; }
  .af-rep .v .sm, .af-rep .v .mut { font: 700 11px var(--font); color: var(--muted); }
  .af-rep .v .w { color: var(--yellow); }
  /* la barre d'action, collée au-dessus des onglets : un seul bouton vert (D5), puis note · mail · tâche en 46×46 */
  .mobile-ab { position: fixed; left: 0; right: 0; bottom: calc(var(--mob-tabs) + var(--mob-sab)); z-index: 29; background: rgba(255, 255, 255, .96); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-top: 1px solid var(--line); padding: 10px 16px; display: flex; gap: 8px; }
  .mobile-ab button { height: 46px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; font: 700 14px var(--font); letter-spacing: -.01em; border: 1px solid var(--line2); background: var(--white); color: var(--text); flex: 0 0 46px; width: 46px; padding: 0; }
  .mobile-ab button svg { width: 19px; height: 19px; }
  .mobile-ab button.p { flex: 1 1 auto; width: auto; padding: 0 14px; background: var(--green); border-color: var(--green); color: var(--white); }
  .mobile-ab button.ink { flex: 1 1 auto; width: auto; padding: 0 12px; background: var(--ink); border-color: var(--ink); color: var(--white); }
  .mobile-ab button.plat { flex: 1 1 auto; width: auto; padding: 0 12px; }
  .mobile-ab button.r { flex: 1 1 auto; width: auto; padding: 0 12px; color: var(--red); border-color: var(--red); }
  .mobile-ab button:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
  .mobile-ab[hidden] { display: none; }
  /* la feuille « Lire la réponse » */
  .mobile-mail { margin: 0 16px; padding: 10px 0; border-top: 1px solid var(--line2); border-bottom: 1px solid var(--line); }
  .mobile-mail .de { display: flex; justify-content: space-between; gap: 10px; font-size: 12px; }
  .mobile-mail .de b { font-weight: 900; } .mobile-mail .de span { color: var(--muted); }
  .mobile-mail .co { font: italic 400 12.5px/1.45 var(--font-serif); color: var(--muted); margin-top: 6px; }

  /* ── CORRECTION 2 (16/09 matin) · les listes : moins de commandes avant la première ligne ─────────
     La recherche se replie derrière la loupe de la barre de navigation (feuille, mobile-shell.js) ; le bouton
     principal (Nouveau devis, Aspirer) et le ⋯ descendent dans la barre d'action collée en bas ; Filtres et la
     période tiennent sur une ligne de 44 px, les onglets juste dessous. Aucun bouton ne disparaît : il change de place. */
  .command-bar { gap: 6px; margin-bottom: 6px; }
  .command-bar__search, .det-toolbar .det-search { display: none; }                          /* → la loupe de la barre de navigation */
  .command-bar__actions { display: flex; flex-wrap: nowrap; gap: 6px; width: 100%; }
  .command-bar__actions > div[style*="relative"] { flex: 1 1 0; min-width: 0; }
  .command-bar__actions > div[style*="relative"] > .command-bar__btn { width: 100%; }
  .command-bar__btn { height: 44px; min-height: 44px; padding: 0 12px; font-size: 12.5px; }
  .command-bar__actions > .command-bar__btn--primary, .command-bar__actions > .kebab-menu { display: none; }   /* → la barre d'action */
  .det-toolbar { gap: 6px; margin-bottom: 6px; }
  .det-toolbar .det-period { flex: 1 1 0; min-width: 0; height: 44px; }
  .det-toolbar > .btn { display: none; }                                                      /* Aspirer → la barre d'action */
  .devis-segments, .det-onglets { margin-top: 0; }
  .devis-table-container { margin-top: 6px; }
  .det-stats { padding: 8px 12px; gap: 6px 10px; }
  /* la feuille de recherche */
  .mobile-recherche { margin: 0 16px; }
  .mobile-recherche input { width: 100%; height: 48px; border: 1px solid var(--line2); border-radius: var(--radius-md); padding: 0 14px; font: 400 15px var(--font); color: var(--text); background: var(--white); }
  .mobile-recherche input:focus-visible { outline: none; box-shadow: var(--shadow-focus); border-color: var(--green); }
  .mobile-recherche small { display: block; margin-top: 8px; font-size: 11px; color: var(--muted); }
  .mobile-ab button.p .command-bar__btn-icon { width: 16px; height: 16px; }

  /* ── CORRECTION 3 · le deuxième étage tient sur deux lignes, l'état d'abord (mobile-shell.js le compose) ── */
  #content .mobile-etage2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 11px; line-height: 1.35; color: var(--muted); }
  #content .mobile-etage2 > *, #content .soma-ligne-table .mobile-etage2 > td[data-col] { display: inline; padding: 0; border: none; width: auto; }
  #content .mobile-etage2 > *::before, #content .soma-ligne-table .mobile-etage2 > td[data-col]::before { content: none; }
  #content .mobile-etage2 > * + *::before, #content .soma-ligne-table .mobile-etage2 > td[data-col] + td[data-col]::before { content: '\00B7\00A0'; color: var(--muted2); font: inherit; letter-spacing: 0; text-transform: none; }
  #content .mobile-etage2 > * > div { display: inline; }
  #content .mobile-etage2 > * > div:empty { display: none; }
  #content .mobile-etage2 > * > div + div::before { content: '\00A0'; }
  #content .mobile-etage2 .det-sig-date, #content .mobile-etage2 td[onclick] { display: inline; padding: 0; margin: 0; }
  #content .mobile-etage2 .det-remise-dit { display: inline-block; min-height: 44px; line-height: 44px; margin: -16px 0; }   /* la date reste une touche de 44 px sans épaissir la ligne */
  .mobile-etage2 .det-sig-etat, .mobile-etage2 .devl-etat { font-weight: 700; color: var(--text2); }

  /* ── CORRECTION 5 · rien ne flotte sur la barre d'onglets ni la barre d'action ──
     Le rond « ? » (raccourcis clavier, module Devis) quitte le coin : il devient la ligne « Aide » de la feuille « Plus »
     (mobile-shell.js, même action). Les autres flottants du bureau (voile des détections, panneaux) sont déjà des feuilles. */
  #soma-help-fab { display: none; }
}

/* Tablette (768 → 1023 px) — lot zéro seulement (étape 2) : l'en-tête débordait dès 1024 px.
   La recherche du rail et la signature « Nos ouvrages nous engagent » se retirent, rien d'autre ne bouge. */
@media (min-width: 768px) and (max-width: 1023px) {
  .app-header__baseline { display: none !important; }   /* posée display:block EN LIGNE dans index.html : seul !important la retire */
  .sb-v3__search-text, .sb-v3__search-kbd { display: none; }
}