/* SOCOCE Livraison - feuille commune.
   Mobile d'abord : l'ecran livreur est le cas d'usage le plus contraint
   (soleil, une main, reseau instable), c'est lui qui fixe les regles. */

:root{
  /* --- Charte SOCOCE ---------------------------------------------------
     Derivee de la charte fournie (valeurs quadri converties en sRGB) :
       vert baobab       C50 M00 J100 N00
       bleu nuit         C92 M78 J41  N42   (signature SOCOCE)
       bleu intermediaire C82 M55 J28  N12   (volume du "C")
     Si l'agence fournit les hexadecimaux officiels, ce sont les cinq lignes
     ci-dessous qu'il faut corriger - rien d'autre dans tout le projet.     */
  --marque:        #29344f;   /* bleu nuit : couleur d'action et d'en-tete */
  --marque-fonce:  #1e2740;
  --bleu:          #3c6491;   /* bleu intermediaire : information, liens    */
  --vert:          #8cc63f;   /* vert baobab : accent, reussite             */
  --vert-fonce:    #5c8a21;   /* le vert sur fond blanc, lisible            */

  /* Le vert est TRES clair : en aplat il ne porte jamais de texte blanc
     (contraste ~2,2:1). Il sert de liseré, de fond de succes, ou de bouton
     a texte bleu nuit. Les aplats porteurs de texte blanc sont en --marque. */

  --encre:#1b1b1f; --gris:#6a6a73; --trait:#e3e3e8; --fond:#f6f7f9; --blanc:#fff;
  --ok:#4a7a0f; --alerte:#b45309; --danger:#b3261e;
  --r:12px; --ombre:0 1px 3px rgba(41,52,79,.10),0 6px 18px rgba(41,52,79,.06);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font:16px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  color:var(--encre); background:var(--fond);
  -webkit-text-size-adjust:100%;
}
a{color:var(--bleu)}

/* --- Structure --- */
.bandeau{
  background:var(--marque);color:#fff;padding:14px 16px;
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  border-bottom:4px solid var(--vert);      /* le liseré baobab */
}
.bandeau h1{font-size:17px;margin:0;font-weight:600;letter-spacing:.2px}
.bandeau .marque{display:flex;align-items:center;gap:8px;font-weight:800;letter-spacing:1.5px;font-size:17px}
.bandeau .marque img{height:26px;width:auto;display:block}
.bandeau .marque .service{font-weight:400;letter-spacing:.3px;opacity:.75;font-size:14px}
.bandeau .droite{margin-left:auto;display:flex;gap:8px;align-items:center;font-size:13px;opacity:.95}
.page{max-width:960px;margin:0 auto;padding:16px}
.page.etroite{max-width:520px}

/* --- Blocs --- */
.carte{background:var(--blanc);border:1px solid var(--trait);border-radius:var(--r);padding:16px;margin-bottom:12px;box-shadow:var(--ombre)}
.carte h2{font-size:15px;margin:0 0 12px;font-weight:600;color:var(--marque)}
.carte h3{font-size:14px;margin:0 0 6px;font-weight:600;color:var(--marque)}
.rangee{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.rangee.entre{justify-content:space-between}
.grille{display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}

/* --- Formulaires --- */
label{display:block;font-size:13px;color:var(--gris);margin:10px 0 4px;font-weight:500}
input,select,textarea{
  width:100%;padding:12px;border:1px solid var(--trait);border-radius:10px;
  font:inherit;background:var(--blanc);color:var(--encre);
}
input:focus,select:focus,textarea:focus{outline:2px solid var(--vert-fonce);outline-offset:1px;border-color:var(--marque)}
textarea{min-height:80px;resize:vertical}

button,.bouton{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:12px 18px;border:0;border-radius:10px;background:var(--marque);color:#fff;
  font:inherit;font-weight:600;cursor:pointer;text-decoration:none;min-height:46px;
}
button:hover,.bouton:hover{background:var(--marque-fonce)}
button:disabled{opacity:.5;cursor:not-allowed}
button.secondaire,.bouton.secondaire{background:var(--blanc);color:var(--marque);border:1px solid var(--trait)}
button.secondaire:hover{background:var(--fond)}
/* Le geste positif du terrain : vert baobab, texte bleu nuit. */
button.valider,.bouton.valider{background:var(--vert);color:var(--marque-fonce)}
button.valider:hover{background:#7cb333}
button.discret{background:transparent;color:var(--bleu);padding:8px 10px;min-height:0;font-weight:500}
button.large{width:100%}
button.danger{background:var(--danger)}

/* --- Etiquettes de statut --- */
.etat{display:inline-block;padding:3px 10px;border-radius:999px;font-size:12px;font-weight:600;white-space:nowrap}
.etat.recu{background:#eaeef6;color:var(--marque)}
.etat.affecte{background:#fef3e2;color:var(--alerte)}
.etat.en_livraison{background:#e8eff7;color:var(--bleu)}
.etat.livre{background:#eef7e0;color:var(--ok)}
.etat.echec{background:#fdeaea;color:var(--danger)}
.etat.annule{background:#f1f1f4;color:var(--gris)}

/* --- Listes d'arrets --- */
.arret{border:1px solid var(--trait);border-radius:var(--r);padding:14px;margin-bottom:10px;background:var(--blanc)}
.arret .titre{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:6px}
.arret .num{font-weight:700;font-variant-numeric:tabular-nums;color:var(--marque)}
.arret .meta{font-size:13px;color:var(--gris);margin:2px 0}
.arret .indice{font-size:14px;margin:8px 0;padding:8px 10px;background:var(--fond);border-radius:8px;border-left:3px solid var(--vert)}
.arret .actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}

/* --- Chiffres cles --- */
.chiffre{background:var(--blanc);border:1px solid var(--trait);border-radius:var(--r);padding:12px;text-align:center}
.chiffre .n{font-size:24px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--marque)}
.chiffre .l{font-size:12px;color:var(--gris);text-transform:uppercase;letter-spacing:.5px}

/* --- Messages --- */
.avis{padding:12px 14px;border-radius:10px;margin:10px 0;font-size:14px}
.avis.info{background:#eaeef6;color:var(--marque)}
.avis.ok{background:#eef7e0;color:var(--ok)}
.avis.err{background:#fdeaea;color:var(--danger)}
.avis.attention{background:#fef3e2;color:var(--alerte)}
.muet{color:var(--gris);font-size:14px}
.vide{text-align:center;color:var(--gris);padding:32px 16px}

table{width:100%;border-collapse:collapse;font-size:14px}
th,td{text-align:left;padding:9px 8px;border-bottom:1px solid var(--trait)}
th{font-size:12px;color:var(--gris);text-transform:uppercase;letter-spacing:.4px}
.code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px;background:var(--fond);padding:2px 6px;border-radius:6px}
.secret{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;word-break:break-all;
        background:#eef7e0;border:1px solid var(--vert);padding:8px 10px;border-radius:8px;display:block}

.cache{display:none !important}
@media (max-width:560px){ .page{padding:12px} .bandeau h1{font-size:15px} }