/* N0 NAME — couche de design « téléphone d'abord » (chargée en dernier).
   Principes : zones tactiles ≥ 48 px, actions principales sous le pouce, navigation fixe en bas,
   cartes aérées, hiérarchie claire, couleurs de la charte (encre, signal, papier). */

:root{
  --ink:#10141C; --ink-2:#1B212C; --signal:#FF5B1F; --paper:#F4F2EC; --card:#fff; --mist:#E7E9ED; --slate:#5B6472;
  --ok:#12A26B; --route:#2F6BFF; --warn:#E8A400; --bad:#D93A3A;
  --r-lg:22px; --r-md:16px; --r-sm:12px;
  --sh-1:0 1px 2px rgba(16,20,28,.05),0 8px 22px -10px rgba(16,20,28,.20);
  --tab-h:66px; --safe-b:env(safe-area-inset-bottom,0px); --safe-t:env(safe-area-inset-top,0px);
}
html{scroll-behavior:smooth;-webkit-tap-highlight-color:transparent}
body{background:var(--paper);overscroll-behavior-y:none}
.ico{width:22px;height:22px;flex:none}
a,button{touch-action:manipulation}
:focus-visible{outline:3px solid var(--signal);outline-offset:2px}

/* ---------- En-tête compact (superviseur et chauffeur) ---------- */
.entete-sup{position:sticky;top:0;z-index:40;display:flex;align-items:center;justify-content:flex-start;gap:10px;
  padding:calc(10px + var(--safe-t)) 14px 10px;background:var(--ink);border-bottom:1px solid var(--ink-2)}
.entete-sup .logo-lien{display:flex;flex:none}
.entete-sup .logo-complet{display:none}
.entete-sup .logo-mini{display:block;width:36px;height:36px;border-radius:10px}
.entete-titre{margin:0;flex:1;min-width:0;font-family:'Space Grotesk','Inter',sans-serif;font-weight:700;font-size:1.12rem;letter-spacing:-.01em;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.entete-nav,.deconnexion,.nav-alerte-chauffeur{display:none}
.etat-sync{display:none}
.etat-sync.hors-ligne{display:inline-block;background:var(--bad);color:#fff;font-weight:700;font-size:.72rem;padding:4px 10px;border-radius:99px;margin:0}
.bouton-sync,.bouton-son{display:grid;place-items:center;width:42px;height:42px;padding:0;margin:0;border:0;border-radius:50%;background:var(--ink-2);color:#fff;cursor:pointer}
.bouton-sync .txt,.bouton-son .txt{display:none}
.bouton-son.son-actif{background:var(--signal);color:var(--ink)}
.bouton-sync.tourne .ico{animation:tourne .9s linear}
@keyframes tourne{to{transform:rotate(360deg)}}

/* ---------- Navigation fixe en bas ---------- */
.tabbar{position:fixed;left:0;right:0;bottom:0;z-index:45;display:grid;grid-template-columns:repeat(4,1fr);
  background:rgba(255,255,255,.96);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border-top:1px solid var(--mist);padding-bottom:var(--safe-b);box-shadow:0 -8px 24px -16px rgba(16,20,28,.35)}
.tabbar-2{grid-template-columns:repeat(2,1fr)}
.tabbar a{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;height:var(--tab-h);text-decoration:none;color:var(--slate);font-size:.72rem;font-weight:600}
.tabbar a.actif{color:var(--ink)}
.tabbar a.actif:before{content:"";position:absolute;top:0;left:30%;right:30%;height:3px;border-radius:0 0 4px 4px;background:var(--signal)}
.tabbar a.danger{color:var(--bad)}
body.sup{padding-bottom:calc(var(--tab-h) + var(--safe-b) + 8px)}

/* ---------- Contenu, cartes, titres ---------- */
.sup-contenu{padding:14px 14px 28px}
.bloc{border:0;border-radius:var(--r-lg);padding:18px;margin-bottom:14px;box-shadow:var(--sh-1)}
.bloc h2{font-size:1.15rem}
.bloc-alertes{border:2px solid var(--bad)}
.retour{margin-bottom:10px}
.retour a{display:inline-flex;align-items:center;min-height:40px;font-weight:600;text-decoration:none;color:var(--slate)}
.alerte-nouvelle{position:sticky;top:calc(64px + var(--safe-t));z-index:30;border-radius:var(--r-md);box-shadow:var(--sh-1)}
.info,.alerte{border-radius:var(--r-md)}

/* Interrupteurs : contrôle segmenté pleine largeur */
.bloc-mode{display:flex;flex-direction:column;align-items:stretch;gap:12px;border:0}
.bascule{width:100%;display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:4px;padding:4px;border:0;border-radius:var(--r-md);background:#ECEEF1;overflow:visible}
.bascule form{display:block}
.bascule-actif,.bascule-inactif,.bascule-ferme{width:100%;min-height:48px;border-radius:12px;font-size:.98rem}
.bascule-inactif{background:transparent}
.bascule-actif{box-shadow:0 2px 8px -2px rgba(255,91,31,.55)}

/* Chiffres clés */
.chiffres{gap:10px}
.chiffres div{border-radius:var(--r-md);padding:16px 8px;background:linear-gradient(160deg,#1B212C,#10141C)}
.chiffres strong{font-size:2.1rem}

/* Commandes */
.commande{position:relative;border:0;border-radius:var(--r-md);padding:16px 16px 16px 20px;background:#FAF9F6;box-shadow:inset 0 0 0 1px var(--mist)}
.commande:before{content:"";position:absolute;left:0;top:14px;bottom:14px;width:5px;border-radius:0 5px 5px 0;background:var(--mist)}
.st-en_attente:before,.st-attribuee:before,.st-acceptee:before,.st-absent:before{background:var(--warn)}
.st-en_cours:before{background:var(--route)}
.st-livree:before{background:var(--ok)}
.st-annulee:before{background:var(--bad)}
.commande-tete strong,.commande-tete a{font-family:'Space Grotesk','Inter',sans-serif;font-size:1.05rem}
.prix{font-size:1.25rem}
.detail{font-size:.95rem}
.actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;align-items:stretch}
.actions>.en-ligne,.actions>form{display:block;margin:0}
.actions form:has(select){grid-column:1/-1;display:grid;grid-template-columns:1fr auto;gap:8px}
.actions>span.petit{grid-column:1/-1}
.actions select{width:100%;min-height:48px}
.btn-petit{min-height:48px;width:100%;padding:10px 12px;border-radius:14px;font-size:.92rem;display:inline-flex;align-items:center;justify-content:center;text-align:center}
.btn-petit:active,.bouton:active,.gros-bouton:active,.btn-moyen:active{transform:scale(.98)}
.chauffeur{padding:12px 0;gap:10px}
.chauffeur .en-ligne{margin-left:0}
.chauffeur .btn-petit{width:auto;min-width:140px}
.ajout input,.ajout select{min-height:48px}
.ajout .btn-petit{width:auto;min-width:120px}
.ligne-histo{padding:12px 0}

/* Formulaires */
input[type=text],input[type=tel],input[type=password],select,textarea{min-height:52px;border-radius:14px;font-size:16px}
.champ label,.form-effacer label,.produit-edit label{font-size:.8rem;letter-spacing:.02em}
.produit-edit,.edit-grille{gap:10px}

/* ---------- Interface chauffeur : tout se fait au pouce ---------- */
.mission{border:0;border-radius:24px;padding:18px;box-shadow:var(--sh-1)}
.mission .commande-tete{margin-bottom:4px}
.a-preparer-mission{border-radius:20px;padding:20px 16px;margin:14px 0;background:linear-gradient(160deg,#1B212C,#10141C)}
.a-preparer-mission strong{font-size:2.9rem}
.infos-client{margin:14px 0}
.infos-client p{font-size:1.02rem}
.infos-client a{font-weight:700;text-decoration-color:var(--signal)}
.raccourcis{grid-template-columns:repeat(4,1fr);gap:8px}
.raccourci{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-height:72px;padding:10px 4px;border:0;border-radius:16px;background:#EEF0F3;font-size:.78rem}
.raccourci:active{background:var(--mist)}
.avancer{position:sticky;bottom:calc(var(--tab-h) + var(--safe-b) + 10px);z-index:20;margin:14px -4px 0;padding:14px 4px 4px;background:linear-gradient(to top,#fff 70%,rgba(255,255,255,0))}
.gros-bouton{min-height:72px;border-radius:20px;font-size:1.3rem;box-shadow:0 10px 24px -10px rgba(255,91,31,.7)}
.gros-livre{box-shadow:0 10px 24px -10px rgba(18,162,107,.8)}
.issue{border-top:0;padding-top:4px}
.issue .gros-bouton{margin-top:8px}
.btn-moyen{min-height:52px;border-radius:14px}
.issue-partiel{display:grid;grid-template-columns:1fr;gap:8px}
.issue-partiel input{width:100%}
.issue-ligne{gap:10px}
.btn-echange{border-radius:14px;border:1.5px solid var(--ink)}
.chrono{font-size:1.2rem}

/* ---------- Client : formulaire et suivi ---------- */
.contenu{padding:20px 14px 36px}
.carte{border:0;border-radius:26px;padding:26px 20px 28px;box-shadow:var(--sh-1)}
.carte h1{font-size:1.85rem}
.ligne-produit{padding:12px;border-radius:18px;background:#FAF9F6;box-shadow:inset 0 0 0 1px var(--mist);margin-bottom:10px}
.quantite{grid-template-columns:56px 1fr 56px;gap:8px}
.quantite button{min-height:52px;border:0;border-radius:14px;background:#ECEEF1;font-size:1.5rem}
.quantite button:active{background:var(--mist)}
.barre-commande{position:sticky;bottom:0;z-index:15;margin:18px -20px -28px;padding:12px 20px calc(14px + var(--safe-b));background:rgba(255,255,255,.97);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-top:1px solid var(--mist);border-radius:0 0 26px 26px}
.barre-commande .total{margin:0 0 10px;padding:0;border:0;background:transparent}
.barre-commande .bouton{margin:0;min-height:58px;border-radius:16px;font-size:1.08rem;box-shadow:0 10px 24px -12px rgba(255,91,31,.8)}
.bouton{border-radius:16px;min-height:56px}
.a-preparer{border-radius:20px}
.suivi li span{width:38px;height:38px}
.suivi li+li:before{top:18px}

/* ---------- Grand écran : retour à une navigation en haut ---------- */
@media (min-width:900px){
  body.sup{padding-bottom:0}
  .tabbar{display:none}
  .entete-sup{padding:12px 28px}
  .entete-sup .logo-complet{display:block}
  .entete-sup .logo-mini{display:none}
  .entete-titre{flex:none;margin-right:12px;color:#9AA3B2;font-weight:600}
  .entete-nav{display:flex;margin-left:6px}
  .etat-sync{display:inline-block;margin-left:auto;color:#9AA3B2}
  .etat-sync.hors-ligne{margin-left:auto}
  .bouton-sync,.bouton-son{width:auto;height:40px;border-radius:99px;padding:0 16px;display:inline-flex;gap:8px;align-items:center;font:inherit;font-weight:600;font-size:.85rem}
  .bouton-sync{background:#2F6BFF}
  .bouton-sync .txt,.bouton-son .txt{display:inline}
  .deconnexion,.nav-alerte-chauffeur{display:inline-block}
  .alerte-nouvelle{top:76px}
  .bloc-mode{flex-direction:row;align-items:center;justify-content:space-between}
  .bascule{width:auto;min-width:300px}
  .actions{display:flex;flex-wrap:wrap}
  .actions>.en-ligne,.actions>form{display:inline-flex}
  .btn-petit{width:auto}
  .avancer{position:static;background:none;margin:14px 0 0;padding:0}
  .barre-commande{position:static;margin:18px 0 0;padding:0;background:none;border:0;backdrop-filter:none}
  .contenu{padding-top:32px}
}

/* Bandeau son : discret, en haut de page (ne recouvre plus l entete) */
.barre-son{position:static;padding:10px 14px;font-size:.9rem}