/* ═══════════════════════════════════════════════════════════════════════════════════════
   Lot D « Téléphone 390 px » (24/10, programme final de JB, critère d) — chargée EN DERNIER.
   « Aujourd'hui, Stock, fiche, Offres, Demandes, Atelier, Administratif utilisables en web app sur
   iPhone à 390 px, gestes principaux à portée de pouce, aucun défilement horizontal. »
   Au téléphone (≤ 600 px, le seuil de la barre des écrans) seulement ; le bureau ne change pas.
   1. Jetons : aucun texte sous 15 px (même les mentions), cibles de 44 px ; puis les cibles de chaque écran.
   2. La coque : zones de sécurité de l'iPhone (encoche, barre d'accueil), barre des écrans partout.
   3. Les gestes à portée de pouce : « Chercher » (écrans de liste), le geste urgent d'Aujourd'hui.
   4. Aujourd'hui : l'essentiel (ce qui attend une action, une ligne par sujet), le reste derrière « Voir tout ».
   5. Les six autres écrans : textes et cibles qui avaient une taille écrite en dur.
   Retour arrière : retirer la ligne <link … telephone-390.css> de front/index.html.
   ═══════════════════════════════════════════════════════════════════════════════════════ */

/* Le bouton « Chercher » et la barre du geste urgent n'existent qu'au téléphone. */
.ap-pouce,.aj-pouce,.aj-z-tout,.v2-v1-court,.st-tel-affichage,.am-tel-filtres,.aj-t-ch{display:none}

@media (max-width:600px){
  /* ── 1. Jetons ─────────────────────────────────────────────────────────────────────── */
  :root{
    --ap-t-xs:15px;--ap-t-s:15px;--ap-t-m:15px;--ap-t-l:16px;--ap-t-xl:17px;--ap-t-titre:22px;--ap-t-chiffre:26px;
    --ap-h-ctrl:44px;--ap-h-ctrl-l:48px;--ap-h-ligne:52px;
    --tel-bas:calc(60px + env(safe-area-inset-bottom,0px));
  }
  body{-webkit-text-size-adjust:100%;text-size-adjust:100%}
  main.page input,main.page select,main.page textarea{font-size:16px}

  /* ── 2. La coque ───────────────────────────────────────────────────────────────────── */
  header.v2-entete,header.v2-entete.c1-entete{box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);height:calc(56px + env(safe-area-inset-top,0px));min-height:calc(56px + env(safe-area-inset-top,0px));
    padding-left:max(12px,env(safe-area-inset-left,0px));padding-right:max(12px,env(safe-area-inset-right,0px))}
  main.page{padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
  /* Aujourd'hui gardait la règle de l'ancien cockpit (sa propre barre, disparue) : la barre des écrans revient. */
  body:has(.ck-page) .c1-bas{display:flex}
  .ux-barre-bas{height:var(--tel-bas);box-sizing:border-box;align-items:stretch}
  .ux-barre-bas a,.ux-barre-bas button{min-height:50px;justify-content:center}
  /* Toute cible se touche au doigt : 44 px au moins (Apple, « Human Interface Guidelines »). */
  main.page :is(button,.btn,select,input:not([type=checkbox]):not([type=radio]),summary,[role=button],[role=tab]),
  main.page a[href],.ux-plus :is(a,button){min-height:44px}
  /* 44 px de large au moins. Dans un ruban qui glisse (ancres de la fiche), un bouton ne rétrécit pas sous son texte
     (sinon les mots se chevauchent) ; ailleurs il garde le droit de passer à la ligne. */
  main.page :is(button,.btn,summary,[role=button],[role=tab]){min-width:44px}
  .pv-ancres :is(button,a){flex-shrink:0}
  main.page :is(button,.btn,summary):not(:has(> *)){display:inline-flex;align-items:center;justify-content:center}
  main.page input[type=checkbox],main.page input[type=radio]{width:22px;height:22px}
  /* Les tailles écrites en dur (10 à 12,5 px) : pastilles, mentions « · dans la V1 », petites lignes. */
  main.page :is(small,.badge,.v2-dans-v1,.ap-v1-suffixe,.btn.v2-mini){font-size:var(--ap-t-s)}
  /* La barre du haut tient en 390 px avec des cibles de 44 px : « ‹ V1 », pastille du garage seulement s'il y a un choix. */
  header.v2-entete,header.v2-entete.c1-entete{gap:4px}
  header.v2-entete :is(.ux-loupe,.ck-bx-b,.rp-entree,.v2-vers-v1){min-width:44px;min-height:44px;height:44px}
  header.v2-entete .brand.v2-marque{min-height:44px}
  .v2-garage-actif:not(:has(select,button)){display:none}
  .v2-v1-long{display:none}.v2-v1-court{display:inline}
  header.v2-entete .v2-vers-v1{padding:0 var(--ap-e2);font-size:var(--ap-t-m)}

  /* ── 3. À portée de pouce ──────────────────────────────────────────────────────────── */
  /* La barre du geste de la fiche (« Faire une offre ») se pose juste sur la barre des écrans. */
  .pv-tel .pv-basbar{bottom:var(--tel-bas)}
  .ap-pouce{display:inline-flex;align-items:center;gap:8px;position:fixed;z-index:56;left:max(16px,env(safe-area-inset-left,0px));
    bottom:calc(var(--tel-bas) + 10px);height:48px;padding:0 18px 0 14px;border:0;border-radius:24px;
    font:inherit;font-size:16px;font-weight:var(--ap-g-titre);color:#fff;background:hsl(var(--ap-action));box-shadow:var(--ap-ombre-3)}
  .ap-pouce .ux-icone{width:20px;height:20px}
  body:has(.dm-app.conv) .ap-pouce,html.pv-clavier .ap-pouce,body:has(.ux-plus-fond) .ap-pouce{display:none}
  /* La place du bouton sous la dernière ligne (les Demandes ont leur propre hauteur : la place va dans leur liste). */
  body:has(.ap-pouce) main.page:not(:has(.dm)){padding-bottom:calc(var(--tel-bas) + 76px)}
  .dm-file .dm-items{padding-bottom:72px}

  /* ── 4. Aujourd'hui : l'essentiel ──────────────────────────────────────────────────── */
  .aj-page:not(.aj-tel-tout) :is(.aj-z-mois,.aj-z-milieu,.aj-z-planning,.aj-parc,.aj-pipe,.aj-prepa,.aj-calmes-d,.aj-silences,.aj-masquer){display:none}
  .aj-page{gap:var(--ap-e3);padding-bottom:calc(var(--tel-bas) + 72px)}
  .aj-haut{min-height:0}
  .aj-haut h1{font-size:var(--ap-t-titre)}
  .aj-qui{font-size:var(--ap-t-s)}
  .aj-masquer{min-height:44px}
  .aj-grille-jour,.aj-grille-jour.aj-sans-mois{grid-template-areas:'compte' 'traiter' 'tout' 'mois' 'planning' 'milieu'}
  .aj-z-tout{display:block;grid-area:tout}
  .aj-voir-tout{width:100%;min-height:48px;padding:var(--ap-e2) var(--ap-e4);border:1px solid hsl(var(--trait-fort));border-radius:var(--ap-r-l);
    font:inherit;font-size:var(--ap-t-m);font-weight:var(--ap-g-titre);color:hsl(var(--ap-action-fort));background:hsl(var(--carte))}
  /* Ce qui compte maintenant : le sujet (il ouvre sa liste), le pourquoi sur une ligne, le geste à droite. */
  .aj-compte{padding:var(--ap-e2) var(--ap-e3)}
  .aj-compte h2{font-size:var(--ap-t-xs);margin:var(--ap-e1) 0}
  .aj-compte h2 span{display:none}
  .aj-ligne,.aj-ligne.aj-n0,.aj-ligne.aj-n1,.aj-ligne.aj-n2{grid-template-columns:4px minmax(0,1fr) auto;gap:var(--ap-e3);padding:var(--ap-e2) 0;align-items:center}
  .aj-ligne .aj-sevb{width:4px;height:36px}
  .aj-ligne .aj-geste{grid-column:auto;justify-self:end;height:44px;padding:0 var(--ap-e3);font-size:var(--ap-t-m)}
  .aj-q,main.page .aj-q{display:flex;align-items:center;justify-content:flex-start;min-height:44px;font-size:var(--ap-t-l);line-height:1.25;text-align:left}
  .aj-ligne .aj-tx{display:flex;flex-direction:column;min-height:44px;justify-content:center}
  .aj-ligne .aj-tx small{font-size:var(--ap-t-s);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  /* À traiter : une ligne par sujet, dans l'ordre d'urgence. */
  .aj-traiter{padding:var(--ap-e2) var(--ap-e3)}
  .aj-traiter .aj-ct{margin-bottom:var(--ap-e1);align-items:center}
  .aj-traiter .aj-ct h2{font-size:var(--ap-t-l)}
  .aj-ct-sous{display:none}
  .aj-traiter .aj-icone{width:44px;height:44px;margin-left:auto}
  .aj-tuiles{grid-template-columns:minmax(0,1fr);gap:0}
  .aj-tuile,.aj-tuile.aj-n0,.aj-tuile.aj-n1,.aj-tuile.aj-n2,main.page .aj-tuile{display:grid;grid-template-columns:34px minmax(0,1fr) auto 16px;align-items:center;gap:var(--ap-e2);
    min-height:52px;padding:var(--ap-e1) 0 var(--ap-e1) var(--ap-e3);border:0;border-top:1px solid hsl(var(--trait));border-radius:0;box-shadow:none;background:none;animation:none}
  .aj-place:first-child .aj-tuile{border-top:0}
  .aj-tuile::before{top:12px;bottom:12px;width:4px}
  .aj-tuile .aj-t-haut{display:contents}
  .aj-tuile .aj-t-chiffre{grid-column:1;grid-row:1;font-size:var(--ap-t-xl);text-align:right}
  .aj-tuile .aj-t-lib{grid-column:2;grid-row:1;font-size:var(--ap-t-m);line-height:1.25;white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .aj-tuile .aj-sev{grid-column:3;grid-row:1;font-size:var(--ap-t-xs);padding:1px 6px;text-transform:none;letter-spacing:0;font-weight:var(--ap-g-moyen)}
  .aj-tuile .aj-t-ch{grid-column:4;grid-row:1;width:16px;height:16px;color:hsl(var(--doux))}
  .aj-tuile .aj-t-pq,.aj-tuile .aj-bande{display:none}
  .aj-autres{min-height:44px;width:100%;font-size:var(--ap-t-m)}
  .aj-illisible{font-size:var(--ap-t-s)}
  /* Le geste le plus urgent, au-dessus de la barre des écrans. */
  .aj-pouce{display:grid;grid-template-columns:auto minmax(0,1fr) 18px;align-items:center;gap:var(--ap-e2);position:fixed;z-index:56;
    left:max(16px,env(safe-area-inset-left,0px));right:max(84px,calc(env(safe-area-inset-right,0px) + 84px));bottom:calc(var(--tel-bas) + 10px);
    min-height:48px;padding:0 var(--ap-e3) 0 var(--ap-e4);border-radius:24px;color:#fff;background:hsl(var(--ap-action));box-shadow:var(--ap-ombre-3);text-decoration:none}
  .aj-pouce b{font-size:var(--ap-t-l);white-space:nowrap}
  .aj-pouce span{font-size:var(--ap-t-s);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;opacity:.9}
  .aj-pouce .ck-i{width:18px;height:18px;stroke:#fff}
  body:has(.aj-volet.on) .aj-pouce,body:has(.ux-plus-fond) .aj-pouce{display:none}
  /* « Voir tout » : le reste de la page, comme avant, en une colonne. */
  .aj-tel-tout .aj-k-lib,.aj-tel-tout .aj-k-t,.aj-tel-tout .aj-tag,.aj-tel-tout .aj-jour,.aj-tel-tout .aj-tait-l{font-size:var(--ap-t-xs)}
  .aj-tel-tout .aj-k-s,.aj-tel-tout .aj-tx small,.aj-tel-tout .aj-legende,.aj-tel-tout .aj-pc-note{font-size:var(--ap-t-s)}
  .aj-mini{min-height:44px}

  /* ── 5. Les autres écrans ──────────────────────────────────────────────────────────── */
  /* Onglets et pastilles : à la ligne plutôt qu'en ruban qui défile et se coupe au bord. */
  .aw-tabs,.aw-tabs.v2-onglets-ecran{flex-wrap:wrap;overflow:visible}
  .aw-tabs button{flex:none;padding:0 var(--ap-e3);font-size:var(--ap-t-m)}
  .dm-pills,.dm-ft>.dm-pills{flex-wrap:wrap!important;overflow:visible;margin:0;padding:0}
  /* Stock : Mode, Liste / Vitrine, nombre par page et puces de marques derrière « Affichage ▾ ». */
  .st-tel-affichage{display:inline-flex;align-items:center;gap:6px}
  .st[data-stock]:not(.st-tel-aff) :is(.st-modes,.st-aff,.st-parpage),.st[data-stock]:not(.st-tel-aff) .st-marques{display:none}
  .st-tel-aff .st-tel-affichage{background:hsl(var(--ap-encre));color:#fff}
  /* Atelier : métier, personne et registres derrière « Filtres ▾ » ; la recherche reste à sa place. */
  .am-tel-filtres{display:flex;align-items:center;gap:6px;width:100%;min-height:44px;padding:0 var(--ap-e3);border:1px solid hsl(var(--ap-trait-fort));border-radius:var(--ap-r-m);
    font:inherit;font-size:var(--ap-t-m);color:hsl(var(--ap-encre));background:hsl(var(--ap-carte));text-align:left}
  .am-tel-filtres b{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .am:not(.am-tel-ouvert) .am-filtres>.ag-seg{display:none}
  .am-tel-ouvert .am-tel-filtres{background:hsl(var(--ap-encre));color:#fff}
  .am-filtres .ag-cherche{flex:1 1 100%}
  .am-filtres .ag-cherche input{width:100%}
  /* Demandes : la hauteur de l'application tient compte de l'encoche ; répondre au-dessus de la barre d'accueil. */
  .dm{--dm-haut:calc(112px + env(safe-area-inset-top,0px))}
  .dm-comp{padding-bottom:calc(var(--ap-e2) + env(safe-area-inset-bottom,0px))}
  .dm-gestes .dm-btn,.dm-envoi .dm-env{width:44px;min-width:44px}
  .dm-btn.ic{min-width:44px}
  /* Aujourd'hui, « Voir tout » : les mentions écrites en dur et les segments de la préparation. */
  .aj-ecart,.aj-sev,.aj-dep,.aj-k-90,.aj-attente-tot{font-size:var(--ap-t-xs)}
  .aj-st,.aj-flux .aj-st,.aj-flux-v1 .aj-st{min-width:44px}
  /* Les rangées de filtres de l'ancien écran Voitures (atelier) vont à la ligne : plus de texte qui se chevauche. */
  .fw-filter-row,.ux-v-barre .fw-filter-row{flex-wrap:wrap;overflow:visible}
  .fw-filter-row>*{flex:none}
  /* Administratif : la date et l'état de la livraison vont à la ligne dans leur case. */
  .or-lv b,.or-lv small,.or-lv .or-at{white-space:normal}
  /* Demandes : « Demandes · Offres », « Moi / Garage » et « ⋯ » vont à la ligne plutôt que de sortir de l'écran. */
  .dm-l1{flex-wrap:wrap}
  /* Fiche › Offres et Contacts : le tableau devient une ligne par affaire (plus de tableau à faire glisser de côté). */
  .pv-ca-tab{overflow:visible}
  .pv-ca-tab :is(table,tbody){display:block}
  .pv-ca-tab thead{display:none}
  .pv-ca-tab tr{display:flex;flex-wrap:wrap;align-items:center;gap:4px var(--ap-e3);padding:var(--ap-e2) 0;border-top:1px solid hsl(var(--ap-trait))}
  .pv-ca-tab td,.pv .pv-ca-tab table.pv-t td{display:block;height:auto;padding:0;border:0;box-shadow:none;background:none}
  .pv .pv-ca-tab table.pv-t td.pv-cache-tel{display:none}
  .pv-ca-tab td:last-child{margin-left:auto}
  /* Fiche : la barre compacte se colle sous la barre du haut, encoche comprise. */
  .s2-compact{top:calc(56px + env(safe-area-inset-top,0px))}
  .pv{--pv-haut:calc(56px + env(safe-area-inset-top,0px))}
  .pv.compact-on{--pv-ancres-haut:calc(108px + env(safe-area-inset-top,0px))}
  /* Fiche : une alerte trop longue pour sa ligne met son geste dessous, à droite (« Baisser le prix · dans la V1 »). */
  .pv-bd{flex-wrap:wrap;row-gap:var(--ap-e1);padding-top:var(--ap-e1);padding-bottom:var(--ap-e1)}
  .pv-bd :is(.go,.pv-v1g){margin-left:auto}
  /* Atelier › Devis & OR (registre clients) : l'en-tête d'un devis va à la ligne au lieu de sortir de la carte. */
  .ac-tete .ac-tx{align-self:stretch;max-width:100%}
  .ac-tx b,.ac-tx small{white-space:normal;overflow-wrap:anywhere}
}