/* 21/10/2026 (Hassan) : correctifs d'affichage SD ONE après l'audit du 21/10 (téléphone, tablette, ordinateur).
   Chargé EN DERNIER, après v2-mobile2.css. Mise en page seulement : aucune fonction, aucun bouton, aucun texte retiré.
   Charte : bleu nuit #0F2A4A / #081830, bleu #1E5AA8, argent #AFC0D6 / #C4D3E6, blanc. Cibles tactiles ≥ 44 px. */

/* ===================== Partout ===================== */
/* Connexion : « Mot de passe » ne colle plus au champ Identifiant */
.cx-l + .cx-l{margin-top:10px}
/* Statistiques : les cartes de rapports ne dépassent plus à droite sur un écran étroit (360 px) */
.rapports{grid-template-columns:repeat(auto-fill,minmax(min(360px,100%),1fr))}
/* Bouton Retour : plus de quadrillage (comme les autres boutons) */
#v2-retour{background:linear-gradient(180deg,#FFFFFF,#E6EDF6)!important}
/* Impression / PDF (statistiques…) : le bouton Retour n'est plus imprimé par-dessus le chiffre d'affaires */
@media print{.v2-retour,#v2-retour{display:none!important}}

/* ===================== Ordinateur et tablette (761 px et plus) ===================== */
@media (min-width:761px){
  /* Planning visuel : il commence sous l'en-tête (la barre d'outils n'est plus cachée dessous) */
  #v2-contenu .vl{top:var(--haut,72px)}
  /* le Retour commun couvrait la colonne « Lignes » : l'écran a déjà son propre « Retour » dans sa barre d'outils */
  body[data-vue="graphique"] #v2-retour,body:has(#v2-contenu .vl) #v2-retour{display:none!important}
  /* Suivi des statuts : tableau sur fond blanc (une ligne sur deux était bleu nuit sur bleu nuit) */
  #v2-contenu table.tl.sts{background:#fff;border-radius:12px}
  /* Suivi des statuts et Planning de la semaine : le tableau défile dans son cadre au lieu d'élargir la page */
  #v2-contenu #sts,#v2-contenu #se{overflow-x:auto;max-width:100%;-webkit-overflow-scrolling:touch}
}
/* Accueil (ordinateur, 1101 px et plus : en dessous les graphiques sont déjà l'un sous l'autre) :
   les deux graphiques à parts égales (les mois du 1er graphique étaient écrits en 7 à 9 px) */
@media (min-width:1101px){
  .graphes{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
}

/* ===================== Tablette et téléphone à l'horizontale (761 à 1200 px) ===================== */
/* les sous-menus (Missions, Clients…) s'affichent enfin : la barre de menu ne les coupe plus.
   La classe v2-menu-tient est posée par v2-ajustements.js seulement quand toutes les rubriques tiennent sur la ligne
   (sinon la barre garde son défilement de côté, comme avant). */
@media (min-width:761px) and (max-width:1200px){
  html.v2-menu-tient #v2-menu{overflow:visible!important}
}
/* petite tablette : rubriques un peu plus serrées pour qu'elles tiennent toutes sur la ligne */
@media (min-width:761px) and (max-width:900px){
  .v2-menu > .v2-grp:not(.v2-engr) > .v2-m1{padding:0 5px}
}

/* ===================== Tablette (761 à 1100 px) ===================== */
@media (min-width:761px) and (max-width:1100px){
  /* En-tête : l'horloge ne rétrécit plus, le bouton Calendrier reste visible et cliquable.
     La date du jour reste affichée dans le pied de page. */
  .v2-horloge{flex:0 0 auto;gap:6px;padding:4px 6px 4px 12px}
  .v2-jd{display:none}
  /* les secondes sont masquées comme sur téléphone (l'heure reste) ; logo un peu plus petit :
     la Recherche garde ainsi une largeur utile */
  .v2-hm span{display:none}
  header.v2-haut{gap:10px}
  #v2-marque{gap:8px}
  .v2-marque img.sd-one.sd-one-ecriture{height:36px}
  .v2-recherche{min-width:0;flex:1 1 160px}
  .v2-recherche input{padding-right:40px}
}

/* Petite tablette (761 à 1000 px) : le tableau du Planning défile dans son cadre au lieu d'élargir la page
   (au-delà de 1000 px il tient déjà, et son en-tête reste collé en haut) */
@media (min-width:761px) and (max-width:1000px){
  #v2-contenu .pl-centre{min-width:0;overflow-x:auto}
}

/* ===================== Téléphone (760 px et moins) ===================== */
@media (max-width:760px){
  /* l'encoche n'est plus comptée deux fois au-dessus du contenu (--haut la contient déjà) */
  #v2-contenu{margin-top:0}

  /* --- Planning visuel --- */
  #v2-contenu .vl-grille,#v2-contenu .vl-noms{min-height:280px}
  #v2-contenu .vl-pile{overflow:visible!important}
  #v2-contenu .vl-pile>*{flex-shrink:0}
  #v2-contenu .vl-pile select.ch,#v2-contenu #vp-f{min-height:44px}
  /* noms de chauffeurs longs : à la ligne, 3 lignes au plus, plus rien ne déborde sur la grille */
  #v2-contenu .vl-noms .n b{overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;font-size:10.5px;line-height:1.15}

  /* --- Suivi des statuts : « Jour » et « Mois » lisibles (blanc sur blanc), chiffres touchables au doigt --- */
  #v2-contenu table.tl.sts th:first-child{color:#0F2A4A!important}
  #v2-contenu table.tl.sts td a{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px}
  #v2-contenu table.tl.sts td:first-child a{justify-content:flex-start}

  /* --- Statistiques : nom de la période en entier (« octobre 2026 ») --- */
  .sx-barre .sx-lib{flex:1 1 calc(100% - 110px);white-space:normal;line-height:1.2}

  /* --- Planning : pastilles vol / train et lien « archive » touchables --- */
  #v2-contenu .iti2 button.puce.vol,#v2-contenu .iti2 button.puce.train,#v2-contenu .puce.vol{min-height:44px!important;margin:4px 0!important;white-space:normal!important;max-width:100%}
  #v2-contenu .c-chf .arch{display:inline-flex;align-items:center;min-height:44px}
  /* étiquettes d'avancement : un peu d'air sous la barre, texte un peu plus grand */
  .trx i{margin-bottom:4px}
  .trx div{font-size:9.5px}
  /* tri par date : le bouton « Date ▲/▼ » reste disponible au téléphone */
  #v2-contenu .tm thead{display:block!important}
  #v2-contenu .tm thead tr{display:flex!important;justify-content:flex-end;margin-bottom:8px}
  #v2-contenu .tm thead th{display:none!important}
  #v2-contenu .tm thead th#tm-tri{display:inline-flex!important;align-items:center;min-height:44px;padding:0 16px;border-radius:12px;background:#fff;color:#0F2A4A;cursor:pointer;position:static}

  /* --- Tableaux en cartes : plusieurs éléments dans une case restent à droite du libellé (ex. « Avoir ») --- */
  #v2-contenu table.tl-carte tbody td > *{grid-column:2}
  #v2-contenu table.tl-carte.tl-chk tbody td:nth-child(-n+3) > *{grid-column:auto}
  /* Factures et devis : la consigne de recherche en entier */
  #v2-contenu .fa-barre #fa-q{flex:1 1 100%;width:100%;min-width:0}
  /* Liste des chauffeurs : case à cocher de 44 px */
  #v2-contenu .chf-rang{grid-template-columns:44px minmax(0,1fr) 44px!important}

  /* --- Champs en 16 px : l'iPhone ne zoome plus à chaque appui --- */
  .ch,input.ch,select.ch,textarea.ch,#v2-pan select,.fen input,.fen select,.fen textarea,.ed input,.ed select,.ed textarea{font-size:16px!important}

  /* --- Panneau de la course --- */
  /* l'en-tête et la croix restent en haut quand on fait défiler (clip au lieu de hidden) */
  #v2-pan .pan-in{overflow-x:clip!important}
  /* grands tableaux (Valorisation, 5 colonnes et plus) : ils défilent dans leur cadre, plus de mots coupés lettre par lettre */
  #v2-pan table.mini-t:has(tr > :nth-child(5)){display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}
  #v2-pan table.mini-t:has(tr > :nth-child(5)) > tbody{display:table;min-width:560px;table-layout:auto}
  #v2-pan table.mini-t:has(tr > :nth-child(5)) td,#v2-pan table.mini-t:has(tr > :nth-child(5)) th{overflow-wrap:normal!important}
  #v2-pan table.mini-t:has(tr > :nth-child(5)) > caption{display:block}
  /* tableau « Suivi » (4 cases par ligne) : libellé puis valeur, deux par deux */
  #v2-pan table.mini-t:has(tr > :nth-child(4)):not(:has(tr > :nth-child(5))) tr{display:grid;grid-template-columns:40% 60%}

  /* --- Fenêtres d'édition (.ed) --- */
  /* la fenêtre reste entre la barre d'état (heure, batterie) et la barre d'accueil de l'iPhone */
  .ed{max-height:calc(94vh - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px));max-height:calc(94dvh - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px))}
  /* Statut de la mission : 2 colonnes (la 3e était hors de l'écran : Reçue, À bord, No show) */
  .ed .codes{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .ed .codes .stx{white-space:normal}
  /* Véhicule, Date et heures… : une colonne, plus aucun champ coupé à droite */
  .ed .grille{grid-template-columns:minmax(0,1fr)!important}
  /* Enregistrer / Annuler toujours visibles en bas de la fenêtre */
  .ed .pied{position:sticky;bottom:-16px;background:#fff;padding:10px 0 12px;margin-bottom:-16px;z-index:3;border-top:1px solid var(--trait,#DCE3EC)}
  /* croix de fermeture : 44 px de large (elle était écrasée à 27 px) */
  .ed .x{flex:0 0 44px}
  /* Itinéraire : l'heure de départ en entier (« 09:30 » et non « 09: ») */
  .ed .wy-h{min-width:96px}

  /* --- Fenêtres (.fen) : Tarif de la mission, Création d'un dossier --- */
  .fen .g{grid-template-columns:minmax(0,1fr)!important}
  .fen .g>label{min-width:0}
  .fen .g .ch{width:100%;box-sizing:border-box}

  /* --- Barre « Actions groupées » : une ligne en bas de l'écran qui défile de côté --- */
  .v2-groupe{left:8px;right:8px;max-width:none;transform:translateY(160%);flex-wrap:nowrap;overflow-x:auto;justify-content:flex-start;-webkit-overflow-scrolling:touch}
  .v2-groupe.ouvert{transform:none}
  .v2-groupe>*{flex:0 0 auto}
}

/* ===================== Téléphone tenu à l'horizontale ===================== */
@media (orientation:landscape) and (max-height:500px) and (min-width:761px){
  /* la liste s'arrête au-dessus du pied de page et de la barre d'accueil ; le reste défile dans la liste */
  .v2-m2{max-height:calc(100vh - var(--haut) - var(--barre) - var(--pied) - env(safe-area-inset-bottom,0px) - 12px)}
  /* menu, pied de page et bouton Retour évitent l'encoche et la barre d'accueil */
  #v2-menu{padding-left:max(6px,env(safe-area-inset-left,0px))!important;padding-right:max(6px,env(safe-area-inset-right,0px))!important}
  .v2-pied{padding-left:max(18px,env(safe-area-inset-left,0px));padding-right:max(18px,env(safe-area-inset-right,0px));height:calc(var(--pied) + env(safe-area-inset-bottom,0px));padding-bottom:env(safe-area-inset-bottom,0px)}
  .v2-retour,#v2-retour{left:max(20px,env(safe-area-inset-left,0px))}
  /* consigne de recherche lisible dans un champ étroit */
  #v2-q::placeholder{font-size:12px}
}

/* 21/10 v2 : panneau d'actions du dossier visible au téléphone et sur tablette (pro forma, devis, e-mail…), essayé par verif-p1 */
@media (max-width:1100px){.pl-corps:has(#ds-a){flex-wrap:wrap}.pl-corps #ds-a.pl-actions{display:flex;flex:1 1 100%;width:auto;min-width:0;box-sizing:border-box;position:static;flex-direction:row;flex-wrap:wrap;gap:8px;margin-top:14px}.pl-corps #ds-a.pl-actions .bt{width:auto;min-height:44px}.pl-corps #ds-a.pl-actions h6.grp{flex-basis:100%}}
/* Planning RH : flèches ‹ › à 44 px */
.chx-nav button{min-width:44px}
/* 22/10 : champs de date et d'heure du Planning à 44 px (ordinateur) */
#pl-du,#pl-hd,#pl-dos,#pl-mis,#pl-au,#pl-hf{min-height:44px}