/* ============================================================
   Ecom Afrique — Gestion Commandes
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&display=swap');

:root {
  --encre: #0F3D3E;
  --encre-clair: #1B5A5B;
  --fond: #F6F5F1;
  --carte: #FFFFFF;
  --trait: #E4E1D8;
  --texte: #1E211F;
  --texte-att: #63685F;

  --ambre: #E8A33D;
  --ambre-fonce: #C97F1E;
  --succes: #2D8659;
  --succes-fond: #E4F2E9;
  --attente: #C97F1E;
  --attente-fond: #FBEEDA;
  --danger: #C1440E;
  --danger-fond: #FBE7DD;
  --neutre-fond: #ECEAE3;

  --rayon: 10px;
  --ombre: 0 1px 2px rgba(15, 61, 62, 0.06), 0 4px 14px rgba(15, 61, 62, 0.06);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: var(--fond);
  color: var(--texte);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, .chiffre {
  font-family: 'Space Grotesk', -apple-system, sans-serif;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--encre);
  margin: 0;
}

a { color: var(--encre-clair); }

.entete {
  background: var(--encre);
  color: #fff;
  padding: 14px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  z-index: 10;
}
.entete .marque {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: 17px;
  color: #fff;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 8px;
}
.entete .marque .pastille {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--ambre);
  display: inline-block;
}
.entete nav { display: flex; align-items: center; gap: 18px; font-size: 14px; flex-wrap: wrap; }
.entete nav a { color: rgba(255,255,255,0.82); text-decoration: none; }
.entete nav a.actif, .entete nav a:hover { color: #fff; }
.entete nav a.actif { font-weight: 600; }
.entete .utilisateur { font-size: 13px; color: rgba(255,255,255,0.65); display:flex; align-items:center; gap:12px; }
.entete .utilisateur a { color: rgba(255,255,255,0.65); }
/* L'en-tête reste collé en haut : un lien vers une section (#commandes, #detail, #carburant) doit s'arrêter juste en dessous, pas derrière. */
html { scroll-padding-top: 64px; }

.conteneur { max-width: 1180px; margin: 0 auto; padding: 24px 18px 60px; }

.grille-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; margin-bottom: 26px; }
.carte-stat {
  background: var(--carte);
  border: 1px solid var(--trait);
  border-radius: var(--rayon);
  padding: 18px 20px;
  box-shadow: var(--ombre);
}
.carte-stat .etiquette { font-size: 12.5px; color: var(--texte-att); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 8px; }
.carte-stat .chiffre { font-size: 28px; font-variant-numeric: tabular-nums; }
/* Carte « Total encaissé » du Super Admin (v17) : avec le calcul toujours visible (montant payé par les clients − frais de livraison).
   Sur écran large elle occupe deux colonnes de la grille (de quoi lire le calcul sur une ligne) ; sur téléphone, une seule (une colonne
   de plus créerait un défilement latéral : le seuil de 480 px garantit qu'il y a alors au moins deux colonnes, même avec une barre de défilement). */
@media (min-width: 480px) { .carte-stat.carte-encaisse { grid-column: span 2; } }
.carte-stat .decompte { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--trait); font-size: 14px; font-variant-numeric: tabular-nums; }
.carte-stat .decompte-ligne { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 2px 14px; padding: 3px 0; }
.carte-stat .decompte-ligne > span:first-child { color: var(--texte-att); }
.carte-stat .decompte-ligne > span:last-child { font-weight: 600; white-space: nowrap; }
.carte-stat .decompte-ligne.moins > span:last-child { color: var(--danger); }
.carte-stat .decompte-aide { margin: 10px 0 0; font-size: 13px; line-height: 1.45; color: var(--texte-att); }
/* Tableaux larges du Super Admin (closers, livreurs) : sur téléphone ils défilent de côté ; le nom reste affiché à gauche pendant le défilement. */
.premiere-colonne-fixe th:first-child, .premiere-colonne-fixe td:first-child { position: sticky; left: 0; z-index: 1; background: var(--carte); }
.carte-stat.accent { border-color: var(--ambre); background: linear-gradient(180deg, #fff 0%, #FDF6EA 100%); }

.liste-commandes { display: flex; flex-direction: column; gap: 10px; }
.carte-commande {
  background: var(--carte);
  border: 1px solid var(--trait);
  border-radius: var(--rayon);
  padding: 16px 18px;
  box-shadow: var(--ombre);
}
.carte-commande .ligne-haut { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; margin-bottom: 8px; }
.carte-commande .numero { font-family: 'Space Grotesk', sans-serif; font-weight: 600; font-size: 15px; }
.carte-commande .montant { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--encre); white-space: nowrap; }
.carte-commande .client { font-size: 14px; color: var(--texte); margin: 2px 0; }
.carte-commande .meta { font-size: 13px; color: var(--texte-att); }
.carte-commande .actions { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 8px; }

.badge {
  display: inline-block;
  padding: 3px 11px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
}
.badge-neutre  { background: var(--neutre-fond); color: var(--texte-att); }
.badge-attente { background: var(--attente-fond); color: var(--attente); }
.badge-succes  { background: var(--succes-fond); color: var(--succes); }
.badge-danger  { background: var(--danger-fond); color: var(--danger); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  border: 1px solid transparent;
  border-radius: 8px;
  padding: 9px 15px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  font-family: inherit;
}
.btn-primaire { background: var(--encre); color: #fff; }
.btn-primaire:hover { background: var(--encre-clair); }
.btn-ambre { background: var(--ambre); color: #2A1B04; }
.btn-ambre:hover { background: var(--ambre-fonce); color: #fff; }
.btn-whatsapp { background: #25D366; color: #fff; }
.btn-whatsapp:hover { background: #1DA851; }
.btn-discret { background: transparent; color: var(--texte); border-color: var(--trait); }
.btn-discret:hover { background: var(--neutre-fond); }
.btn-danger-ligne { background: transparent; color: var(--danger); border-color: var(--danger-fond); }
.btn:disabled, .btn.desactive { opacity: 0.45; cursor: not-allowed; pointer-events: none; }
.btn-pleine-largeur { width: 100%; }

label { display: block; font-size: 13px; font-weight: 600; color: var(--texte); margin-bottom: 5px; }
input, select, textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--trait);
  border-radius: 8px;
  font-size: 14.5px;
  font-family: inherit;
  background: #fff;
  color: var(--texte);
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--encre-clair); outline-offset: 1px; }
.champ { margin-bottom: 15px; }
textarea { resize: vertical; min-height: 70px; }

.barre-filtres { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.filtre-lien {
  padding: 6px 13px; border-radius: 999px; border: 1px solid var(--trait);
  font-size: 13px; color: var(--texte-att); text-decoration: none; background: #fff;
}
.filtre-lien.actif { background: var(--encre); color: #fff; border-color: var(--encre); }

.page-connexion { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: var(--encre); padding: 20px; }
.carte-connexion { background: #fff; border-radius: 14px; padding: 34px 30px; width: 100%; max-width: 380px; box-shadow: 0 20px 60px rgba(0,0,0,0.25); }
.carte-connexion .logo { font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 20px; color: var(--encre); margin-bottom: 4px; display:flex; align-items:center; gap:8px; }
.carte-connexion .logo .pastille { width: 10px; height: 10px; border-radius: 50%; background: var(--ambre); }
.carte-connexion .sous-titre { color: var(--texte-att); font-size: 13.5px; margin-bottom: 24px; }
.erreur { background: var(--danger-fond); color: var(--danger); padding: 10px 13px; border-radius: 8px; font-size: 13.5px; margin-bottom: 16px; }

.table-scroll { overflow-x: auto; background: var(--carte); border: 1px solid var(--trait); border-radius: var(--rayon); box-shadow: var(--ombre); }
table { width: 100%; border-collapse: collapse; font-size: 13.8px; }
th { text-align: left; font-size: 12px; text-transform: uppercase; letter-spacing: 0.03em; color: var(--texte-att); padding: 12px 14px; border-bottom: 1px solid var(--trait); white-space: nowrap; }
td { padding: 12px 14px; border-bottom: 1px solid var(--trait); vertical-align: middle; }
tr:last-child td { border-bottom: none; }
tr:hover td { background: #FAFAF7; }

/* Journal des envois : sur téléphone, chaque ligne devient une petite carte (l'état et le détail restent visibles sans faire défiler). */
@media (max-width: 760px) {
  .table-empilee thead { display: none; }
  .table-empilee, .table-empilee tbody { display: block; }
  .table-empilee tr { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; padding: 11px 12px; border-bottom: 1px solid var(--trait); }
  .table-empilee tr:last-child { border-bottom: none; }
  .table-empilee td { display: block; padding: 0; border: none; }
  .table-empilee td.ligne-pleine { order: 2; flex-basis: 100%; overflow-wrap: anywhere; }
  .table-empilee tr:hover td { background: transparent; }
}

.vide { text-align: center; padding: 50px 20px; color: var(--texte-att); }
.vide .titre-vide { font-family: 'Space Grotesk', sans-serif; color: var(--texte); font-size: 16px; margin-bottom: 6px; }

.grille-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 760px) {
  .grille-2 { grid-template-columns: 1fr; }
  /* Sans cela, un tableau large (Performance livreurs, Équipe…) élargissait toute la page : elle débordait sur le côté. Il défile maintenant dans sa carte. */
  .grille-2 > * { min-width: 0; }
  .conteneur { padding: 16px 12px 50px; }

  /* Téléphone : le menu passe sur une 2e ligne, défilable sur le côté (avant, il disparaissait et on ne pouvait plus naviguer). */
  .entete { flex-wrap: wrap; padding: 10px 12px; row-gap: 8px; }
  .entete nav { order: 3; flex: 0 0 100%; flex-wrap: nowrap; gap: 8px; overflow-x: auto; padding-bottom: 2px; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .entete nav::-webkit-scrollbar { display: none; }
  .entete nav a { flex: 1 0 auto; text-align: center; white-space: nowrap; padding: 7px 11px; font-size: 13.5px; border-radius: 999px; background: rgba(255,255,255,0.10); }
  .entete nav a.actif { background: rgba(255,255,255,0.26); }
  html { scroll-padding-top: 94px; } /* l'en-tête fait alors 2 lignes (≈ 79 px) */
}

.section-titre { display: flex; align-items: center; justify-content: space-between; margin: 30px 0 14px; flex-wrap: wrap; gap: 10px; }
.section-titre h2 { font-size: 18px; }

.fil-etapes { display: flex; align-items: center; gap: 4px; font-size: 12px; color: var(--texte-att); margin-top: 6px; flex-wrap: wrap; }
.fil-etapes .etape { padding: 2px 8px; border-radius: 6px; background: var(--neutre-fond); }
.fil-etapes .etape.franchie { background: var(--succes-fond); color: var(--succes); }
.fil-etapes .sep { color: var(--trait); }

.pagination { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 22px 0; }
.page-lien {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 34px; height: 34px; padding: 0 10px;
  border-radius: 7px; border: 1px solid var(--trait); background: #fff;
  color: var(--texte); text-decoration: none; font-size: 13.5px; font-weight: 600;
}
.page-lien:hover { background: var(--neutre-fond); }
.page-lien.page-actuelle { background: var(--encre); color: #fff; border-color: var(--encre); }
.page-ellipsis { color: var(--texte-att); padding: 0 4px; }
.page-total { margin-left: 8px; }

.note-commande {
  background: var(--attente-fond);
  border-left: 3px solid var(--attente);
  padding: 10px 13px;
  border-radius: 6px;
  font-size: 13.5px;
  color: var(--texte);
  margin: 10px 0;
}
.note-commande strong { color: var(--attente); }
.pastille-note { color: var(--attente); font-weight: 700; }

/* Note du closer pour le livreur (« Livrer à 13h ») : doit sauter aux yeux, y compris sur un téléphone. */
.note-closer {
  background: #FFF3CF;
  border: 1px solid var(--ambre);
  border-left: 5px solid var(--ambre-fonce);
  padding: 10px 13px;
  border-radius: 6px;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--texte);
  margin: 10px 0;
  overflow-wrap: anywhere;
}
.note-closer .etiquette-note {
  display: block;
  font-size: 12.5px;
  font-weight: 700;
  color: #8A5410;
  margin-bottom: 3px;
}
.btn-lien { background: transparent; color: var(--encre-clair); border-color: transparent; text-decoration: underline; font-weight: 500; }
.btn-lien:hover { background: var(--neutre-fond); }

.details-codclic {
  background: var(--succes-fond);
  border-left: 3px solid var(--succes);
  padding: 10px 13px;
  border-radius: 6px;
  font-size: 13.5px;
  color: var(--texte);
  margin: 10px 0;
}
.details-codclic strong { color: var(--succes); }
.pastille-codclic { color: var(--succes); font-weight: 700; }

/* ============================================================
   Messages, répartition, zone de remise à zéro
   ============================================================ */
.succes { background: var(--succes-fond); color: var(--succes); padding: 10px 13px; border-radius: 8px; font-size: 13.5px; margin-bottom: 16px; }

.ligne-part { display: grid; grid-template-columns: minmax(0, 1fr) 120px; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--trait); }
.ligne-part:last-of-type { border-bottom: none; }
.ligne-part input { text-align: right; font-variant-numeric: tabular-nums; }
.total-parts { display: flex; justify-content: space-between; align-items: baseline; padding: 12px 14px; border-radius: 8px; background: var(--neutre-fond); font-weight: 600; margin: 10px 0 16px; }
.total-parts.ok { background: var(--succes-fond); color: var(--succes); }
.total-parts.ko { background: var(--danger-fond); color: var(--danger); }

.barre-part { height: 8px; border-radius: 999px; background: var(--neutre-fond); position: relative; min-width: 110px; }
.barre-part span { display: block; height: 100%; border-radius: 999px; background: var(--encre-clair); }
.barre-part i { position: absolute; top: -3px; bottom: -3px; width: 2px; background: var(--ambre-fonce); }

.interrupteur { display: flex; gap: 12px; align-items: flex-start; padding: 14px; border: 1px solid var(--trait); border-radius: var(--rayon); background: #fff; margin-bottom: 16px; }
.interrupteur input { width: auto; margin-top: 3px; }
.interrupteur label { margin: 0; font-size: 14.5px; }

.zone-danger { border: 1px solid var(--danger); background: #fff; border-radius: var(--rayon); padding: 18px 20px; box-shadow: var(--ombre); }
.zone-danger h2 { color: var(--danger); margin-bottom: 6px; }
.case { display: flex; gap: 10px; align-items: flex-start; padding: 10px 0; border-bottom: 1px solid var(--trait); }
.case:last-of-type { border-bottom: none; }
.case input { width: auto; margin-top: 3px; }
.case label { margin: 0; font-weight: 500; }
.case .meta { display: block; font-size: 12.5px; color: var(--texte-att); }
.btn-danger { background: var(--danger); color: #fff; }
.btn-danger:hover { background: #9d3509; }

.liste-historique { list-style: none; margin: 0; padding: 0; }
.liste-historique li { padding: 8px 0; border-bottom: 1px solid var(--trait); font-size: 13.5px; display: flex; justify-content: space-between; gap: 12px; }
.liste-historique li:last-child { border-bottom: none; }
.liste-historique .meta { white-space: nowrap; }
.avancement { height: 10px; background: var(--neutre-fond); border-radius: 999px; overflow: hidden; margin: 10px 0 18px; }
.avancement span { display: block; height: 100%; background: var(--encre-clair); }

/* ============================================================
   Performance personnelle (tableaux de bord livreur / closer) et carburant
   ============================================================ */
.sous-titre-section { font-size: 15px; margin: 0 0 8px; }

.table-perf { font-variant-numeric: tabular-nums; }
.table-perf th, .table-perf td { padding: 9px 10px; }
.table-perf th { white-space: normal; text-align: right; line-height: 1.25; vertical-align: bottom; text-transform: none; letter-spacing: 0; font-size: 12.5px; }
@media (max-width: 520px) {
  /* Téléphone : colonnes serrées pour que le résumé (3 colonnes) tienne sans défilement latéral. */
  .table-perf { font-size: 13px; }
  .table-perf th, .table-perf td { padding: 8px 6px; }
  .table-perf th:first-child, .table-perf td:first-child { padding-left: 10px; }
}
.table-perf th:first-child, .table-perf th.gauche { text-align: left; }
.table-perf td.num { text-align: right; white-space: nowrap; }
.table-perf td.lib { font-weight: 600; }
.table-perf td.gauche { text-align: left; }
.note-carburant { font-size: 12.5px; font-weight: 400; color: var(--texte-att); overflow-wrap: anywhere; }
.table-perf td.note-carburant { min-width: 110px; }
.table-resume td.lib, .table-resume th:first-child { width: 34%; }
.table-perf tr.accent td { background: #FDF6EA; font-weight: 700; color: var(--encre); }
.table-perf tr.inactif td { color: #A3A79F; }
.table-perf tr.inactif td.lib { font-weight: 500; }
.table-perf tr.total td { border-top: 2px solid var(--encre); background: var(--neutre-fond); font-weight: 700; }
.table-detail th:first-child, .table-detail td.lib { position: sticky; left: 0; z-index: 1; background: var(--carte); }
.table-detail tr.total td.lib { background: var(--neutre-fond); }
/* Quand un tableau déborde (téléphone), une ombre à droite montre qu'il reste des colonnes ; elle disparaît en fin de défilement. */
.table-scroll-perf {
  background:
    linear-gradient(to left, var(--carte) 30%, rgba(255, 255, 255, 0)) 100% 0 / 36px 100% no-repeat local,
    radial-gradient(farthest-side at 100% 50%, rgba(15, 61, 62, 0.22), rgba(15, 61, 62, 0)) 100% 0 / 10px 100% no-repeat scroll,
    var(--carte);
}
.indice-defilement { display: none; }
@media (max-width: 520px) { .indice-defilement { display: block; margin: 6px 2px 0; } }
/* Notes explicatives sous les tableaux de performance : texte secondaire, plus discret que le contenu. */
.table-scroll-perf + p.meta, .indice-defilement + p.meta { font-size: 13px; line-height: 1.45; color: var(--texte-att); }
.table-perf td.avec-barre { position: relative; }
.mini-barre { position: absolute; left: 6px; right: 6px; bottom: 3px; height: 3px; border-radius: 999px; background: var(--neutre-fond); }
.mini-barre i { display: block; height: 100%; border-radius: 999px; background: var(--encre-clair); }

.filtre-lien .compteur { display: inline-block; min-width: 18px; margin-left: 4px; padding: 0 6px; border-radius: 999px; background: var(--neutre-fond); color: var(--texte); font-size: 11.5px; font-weight: 700; text-align: center; }
.filtre-lien.actif .compteur { background: rgba(255,255,255,0.22); color: #fff; }

/* Carburant : le gros bouton (une pilule ambre, voir .pilule plus bas) ouvre la carte du formulaire, posée juste dessous. */
.carte-carburant { margin: 0 0 18px; }
.carte-carburant > summary { list-style: none; }
.carte-carburant > summary::-webkit-details-marker { display: none; }
.carte-carburant .corps { background: var(--carte); border: 1px solid var(--trait); border-radius: 18px; box-shadow: var(--ombre); padding: 16px 16px 18px; margin-top: 12px; }
.carte-carburant .corps .meta { margin: 10px 0 0; font-size: 13px; line-height: 1.45; color: var(--texte-att); }
.carte-carburant input { font-size: 16px; min-height: 46px; }
.carte-carburant .champ-montant { margin-bottom: 10px; }
.carte-carburant #carb-montant { font: 700 26px/1.1 'Space Grotesk', -apple-system, sans-serif; padding: 14px 16px; border-radius: 14px; font-variant-numeric: tabular-nums; }
.carte-carburant .btn-pleine-largeur { min-height: 52px; border-radius: 14px; font-size: 16px; }
/* « Litres, date, note » : repliés, seul le montant est obligatoire. */
.plus-details { margin: 0 0 14px; }
.plus-details > summary { cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 2px; font-size: 14px; font-weight: 600; color: var(--encre-clair); }
.plus-details > summary::-webkit-details-marker { display: none; }
.plus-details > summary::after { content: ''; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-2px); transition: transform .15s ease; }
.plus-details[open] > summary::after { transform: rotate(-135deg) translateY(-1px); }
.plus-details .grille-formulaire { margin-top: 6px; }
.grille-formulaire { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 12px; }
.grille-formulaire .pleine { grid-column: 1 / -1; }
@media (max-width: 340px) { .grille-formulaire { grid-template-columns: 1fr; } }

/* ============================================================
   « En poche aujourd'hui » (accueil du livreur) : le montant à verser en grand, deux lignes de chiffres dessous. Aucune phrase.
   ============================================================ */
.carte-poche { background: var(--encre); color: #fff; border-radius: 22px; padding: 18px 20px 16px; box-shadow: var(--ombre); margin: 0 0 14px; }
.carte-poche .poche-titre { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 2px 12px; font-size: 15px; font-weight: 600; }
.carte-poche .poche-date { font-size: 13px; font-weight: 500; color: rgba(255, 255, 255, 0.74); }
.carte-poche .poche-montant { font-family: 'Space Grotesk', -apple-system, sans-serif; font-weight: 700; font-size: clamp(40px, 13vw, 56px); line-height: 1.05; letter-spacing: -0.02em; margin: 8px 0 14px; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.carte-poche .poche-unite { font-size: 0.34em; font-weight: 600; letter-spacing: 0; color: var(--ambre); }
.carte-poche .poche-detail { display: grid; gap: 8px; padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, 0.2); font-size: 15px; }
/* Une ligne = un libellé, des pointillés, le chiffre : on lit « encaissé − carburant = en poche » d'un coup d'œil. */
.carte-poche .poche-ligne { display: flex; align-items: baseline; gap: 8px; }
.carte-poche .poche-ligne::after { content: ''; order: 2; flex: 1 1 12px; min-width: 12px; border-bottom: 2px dotted rgba(255, 255, 255, 0.28); transform: translateY(-3px); }
.carte-poche .poche-ligne strong { order: 3; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.carte-poche .poche-nb { padding: 1px 9px; border-radius: 999px; background: rgba(255, 255, 255, 0.14); font-size: 12.5px; white-space: nowrap; }
.carte-poche.negatif { background: var(--danger); }
.carte-poche.negatif .poche-unite, .carte-poche.negatif .poche-date { color: #fff; }   /* texte plein blanc sur le rouge : contraste suffisant pour les petits caractères */
.carte-poche.negatif .poche-nb { background: rgba(255, 255, 255, 0.2); }
.carte-poche.negatif .poche-ligne::after { border-bottom-color: rgba(255, 255, 255, 0.4); }
.recap-poche { margin: 0 0 12px; font-size: 13.5px; padding: 9px 12px; border-radius: 8px; background: var(--succes-fond); color: var(--encre); }
.recap-poche.negatif { background: var(--danger-fond); color: #A8390B; }   /* un cran plus foncé que --danger : petit texte, contraste 5,4 sur 1 */

/* ============================================================
   Accueils du livreur et du closer : des cartes, pensées d'abord pour le téléphone (v15)
   Pas de titre ni de phrase en haut : un bouton, des filtres, des cartes. Les statistiques sont sur « Ma performance ».
   ============================================================ */
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.colonne-app { max-width: 720px; margin: 0 auto; }
.colonne-app .vide .titre-vide { font-weight: 700; color: var(--encre); font-size: 17px; }
.colonne-app .vide { padding: 36px 20px; border: 2px dashed var(--trait); border-radius: 18px; background: rgba(255, 255, 255, 0.5); }

/* La pilule : le bouton principal d'un accueil (carburant pour le livreur, nouvelle commande pour le closer).
   Un dégradé net à mi-hauteur, un reflet en haut et une ombre en bas lui donnent un volume de cylindre couché. */
.pilule {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 62px; box-sizing: border-box;
  padding: 8px 10px 8px 8px; border: 0; border-radius: 999px; cursor: pointer;
  font: 700 17px/1.2 'Space Grotesk', -apple-system, sans-serif; letter-spacing: 0; color: #2A1B04; text-decoration: none;
  background: linear-gradient(180deg, #F8CB7C 0%, #EEB154 45%, #E7A238 55%, #D68E1F 100%);
  box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, 0.7), inset 0 -3px 0 rgba(130, 74, 4, 0.3), 0 12px 20px -10px rgba(201, 127, 30, 0.85), 0 1px 2px rgba(15, 61, 62, 0.2);
  -webkit-tap-highlight-color: transparent; user-select: none;
  transition: transform .12s ease, box-shadow .12s ease;
}
.pilule:hover { filter: brightness(1.03); }
.pilule:active { transform: translateY(2px); box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, 0.55), inset 0 -1px 0 rgba(130, 74, 4, 0.3), 0 4px 8px -6px rgba(201, 127, 30, 0.8); }
.pilule:focus-visible { outline: 3px solid var(--encre); outline-offset: 3px; }
.pilule-pastille { flex: 0 0 auto; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: #FFF6E2; color: #9A5A0A; box-shadow: inset 0 -2px 0 rgba(130, 74, 4, 0.12), 0 1px 2px rgba(80, 45, 2, 0.25); }
.pilule-libelle { flex: 1 1 auto; text-align: left; }
.pilule-plus { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: #2A1B04; color: #FFD58E; transition: transform .2s ease; }
details[open] > summary .pilule-plus { transform: rotate(45deg); }
.pilule-compacte { width: auto; min-height: 52px; padding: 6px 18px 6px 6px; gap: 10px; font-size: 15.5px; }
.pilule-compacte .pilule-pastille { width: 40px; height: 40px; background: #2A1B04; color: #FFD58E; box-shadow: none; }
@media (prefers-reduced-motion: reduce) { .pilule, .pilule-plus, .plus-details > summary::after { transition: none; } }

/* Onglets de la liste du livreur : quatre cases égales, le nombre en grand et le libellé dessous (ils tiennent sur 360 px). */
.onglets-compteurs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; padding: 4px; margin: 0 0 14px; background: var(--neutre-fond); border-radius: 18px; }
.onglets-compteurs .filtre-lien { display: flex; flex-direction: column-reverse; align-items: center; justify-content: center; gap: 2px; min-height: 58px; padding: 8px 2px 7px; border: 0; border-radius: 14px; background: transparent; color: var(--texte-att); font-size: 12.5px; font-weight: 600; line-height: 1.15; text-align: center; }
.onglets-compteurs .filtre-lien .compteur { margin: 0; padding: 0; min-width: 0; background: none; color: var(--encre); font: 700 21px/1.1 'Space Grotesk', -apple-system, sans-serif; }
.onglets-compteurs .filtre-lien.actif { background: var(--encre); color: #fff; box-shadow: 0 3px 8px -3px rgba(15, 61, 62, 0.6); }
.onglets-compteurs .filtre-lien.actif .compteur { background: none; color: #fff; }

/* Filtres du closer : une seule rangée qu'on fait glisser du doigt (sur ordinateur, ils passent à la ligne). */
.barre-filtres.defilante { flex-wrap: nowrap; overflow-x: auto; margin: 0 -12px 14px; padding: 2px 12px 4px; gap: 8px; scrollbar-width: none; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; scroll-padding: 0 12px; }
.barre-filtres.defilante::-webkit-scrollbar { display: none; }
.barre-filtres.defilante .filtre-lien { flex: 0 0 auto; scroll-snap-align: start; min-height: 40px; display: inline-flex; align-items: center; padding: 8px 15px; font-size: 14px; font-weight: 600; }
@media (min-width: 761px) { .barre-filtres.defilante { flex-wrap: wrap; overflow: visible; margin: 0 0 14px; padding: 0; } }

/* Barre d'outils du closer : la période à gauche, le bouton « Commande manuelle » à droite. */
.barre-outils { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 14px; }
.filtre-date { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; flex: 1 1 auto; min-width: 0; margin: 0; }
.filtre-date select {
  width: auto; min-height: 46px; padding: 8px 38px 8px 16px; border-radius: 999px; font-size: 14.5px; font-weight: 600; color: var(--encre);
  -webkit-appearance: none; appearance: none;
  background: #fff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1.5l5 5 5-5' fill='none' stroke='%230F3D3E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>") no-repeat right 15px center / 12px 8px;
}
.bloc-plage { display: none; flex-wrap: wrap; align-items: center; gap: 8px; width: 100%; }
.bloc-plage input[type=date] { width: auto; flex: 1 1 130px; min-height: 46px; font-size: 16px; }
.bloc-plage .btn { min-height: 46px; }
.banniere-nouvelles { background: var(--ambre); color: #2A1B04; padding: 12px 16px; border-radius: 14px; margin-bottom: 14px; font-weight: 700; text-align: center; cursor: pointer; box-shadow: var(--ombre); }

/* Cartes de commandes. La couleur du bord gauche dit le statut (orange : en cours, vert : fait, rouge : problème, gris : nouveau). */
.liste-commandes { gap: 12px; }
.cc { position: relative; }
.cc .carte-commande { display: block; position: relative; overflow: hidden; padding: 14px 16px 14px 22px; border: 1px solid var(--trait); border-radius: 16px; background: var(--carte); box-shadow: var(--ombre); color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; transition: transform .1s ease; }
.cc .carte-commande::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 6px; background: var(--cc-couleur, #CFCBBE); }
.cc .carte-commande:active { transform: scale(0.99); }
.cc .carte-commande:focus-visible { outline: 3px solid var(--encre-clair); outline-offset: 2px; }
.cc-attente { --cc-couleur: var(--ambre); }
.cc-succes { --cc-couleur: var(--succes); }
.cc-danger { --cc-couleur: var(--danger); }
.cc-neutre { --cc-couleur: #B8B4A6; }
.cc-ligne { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.cc-nom { font: 700 17px/1.25 'Space Grotesk', -apple-system, sans-serif; color: var(--encre); overflow-wrap: anywhere; }
.cc .carte-commande .montant { font: 700 17px/1.25 'Space Grotesk', -apple-system, sans-serif; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--encre); }
.cc .montant small { font-size: 12px; font-weight: 600; color: var(--texte-att); }
.cc-adresse { display: flex; align-items: flex-start; gap: 6px; margin-top: 4px; font-size: 14.5px; line-height: 1.35; color: var(--texte); overflow-wrap: anywhere; }
.cc-adresse .icone { flex: 0 0 auto; margin-top: 2px; color: var(--texte-att); }
.cc-ref { font-size: 12.5px; color: var(--texte-att); font-variant-numeric: tabular-nums; }
.cc-ligne + .cc-ref { margin-top: 2px; }
.cc-bas { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; margin-top: 10px; }
.cc-bas .cc-ref { margin-left: auto; }
.cc-appels { font-size: 12.5px; color: var(--texte-att); }
.cc .note-closer { margin: 10px 0 0; }
.cc .badge-attente { color: #8A5410; }
.cc .badge-succes { color: #1F6B45; }
.cc .badge-danger { color: #A8390B; }
/* Bouton rond « appeler », posé à côté de la carte (jamais dedans), dans le coin du bas : un geste du pouce. */
.cc.avec-appel .cc-bas { min-height: 46px; padding-right: 58px; }
.cc-appel { position: absolute; right: 14px; bottom: 14px; z-index: 1; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: var(--encre); color: #fff; box-shadow: 0 6px 12px -6px rgba(15, 61, 62, 0.7); -webkit-tap-highlight-color: transparent; }
.cc-appel:active { transform: scale(0.94); }
.cc-appel:focus-visible { outline: 3px solid var(--ambre); outline-offset: 2px; }

/* Téléphone : le bouton « Commande manuelle » flotte en bas à droite, sous le pouce, et reste visible pendant qu'on fait défiler.
   (Sur ordinateur, il reste dans la barre du haut.) La marge du bas empêche qu'il cache la fin de la liste et la pagination. */
@media (max-width: 760px) {
  .pilule-flottante { position: fixed; right: 14px; bottom: 16px; z-index: 20; box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, 0.7), inset 0 -3px 0 rgba(130, 74, 4, 0.3), 0 14px 26px -8px rgba(15, 61, 62, 0.55), 0 2px 4px rgba(15, 61, 62, 0.25); }
  .colonne-app.avec-flottant { padding-bottom: 88px; }
}