/* ==================================================================
   Atoolead — Design system
   Bleu marine + bleu roi, surfaces blanches, data dense.
   ================================================================== */

:root {
  /* Marque */
  --nav:            #16225E;
  --nav-hover:      #1E2E76;
  --nav-text:       #A9B6DC;
  --nav-text-actif: #FFFFFF;

  --accent:         #2563EB;
  --accent-600:     #1D4ED8;
  --accent-700:     #1E40AF;
  --accent-soft:    #E6EEFE;
  --logo-de:        #5B9BFF;
  --logo-vers:      #3730D8;

  /* Surfaces */
  --bg:             #F6F8FC;
  --surface:        #FFFFFF;
  --surface-alt:    #FAFBFE;
  --border:         #E6EAF2;
  --border-fort:    #D6DDEA;

  /* Texte */
  --texte:          #0F1B3D;
  --texte-doux:     #46557A;
  --muted:          #6B7A99;
  --muted-clair:    #94A2BD;

  /* Sémantique */
  --succes:         #16A34A;
  --succes-soft:    #E3F6EC;
  --alerte:         #F59E0B;
  --alerte-soft:    #FEF1E0;
  --danger:         #EF4444;
  --danger-soft:    #FDE9E9;
  --violet:         #7C5CFC;
  --violet-soft:    #EFE9FE;
  --info-soft:      #E6EEFE;

  /* Formes */
  --r-xs: 6px;
  --r-sm: 8px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 18px;
  --r-full: 999px;

  --ombre-1: 0 1px 2px rgba(15, 27, 61, .05);
  --ombre-2: 0 1px 3px rgba(15, 27, 61, .06), 0 6px 20px rgba(15, 27, 61, .05);
  --ombre-3: 0 12px 32px rgba(15, 27, 61, .12);

  --sidebar-l: 248px;
  --gap: 20px;

  /* Typo */
  --police-titre: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  --police-texte: 'Inter', system-ui, -apple-system, sans-serif;
  --tabulaire: 'Inter', system-ui, sans-serif;
}

/* ------------------------------------------------------------------ */
/* Base                                                                */
/* ------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--texte);
  font-family: var(--police-texte);
  font-size: 14px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--police-titre);
  margin: 0;
  letter-spacing: -.02em;
  color: var(--texte);
}
h1 { font-size: 27px; font-weight: 800; }
h2 { font-size: 17px; font-weight: 700; }
h3 { font-size: 15px; font-weight: 700; }

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-600); }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--r-xs);
}

/* Toute icône a une taille par défaut : un SVG sans width/height s'affiche
   sinon en 300 × 150 px. Les règles contextuelles plus bas l'emportent. */
svg.ico {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  display: inline-block;
  vertical-align: middle;
}

/* Chiffres alignés dans les tableaux */
.num, td.num, .kpi-valeur, .cellule-nombre {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}

/* ------------------------------------------------------------------ */
/* Structure                                                           */
/* ------------------------------------------------------------------ */
.app { display: flex; min-height: 100vh; }

.contenu {
  flex: 1;
  min-width: 0;
  padding: 26px 30px 60px;
}

/* ------------------------------------------------------------------ */
/* Sidebar                                                             */
/* ------------------------------------------------------------------ */
.sidebar {
  width: var(--sidebar-l);
  flex: 0 0 var(--sidebar-l);
  background: var(--nav);
  color: var(--nav-text);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
}

.sidebar-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 22px 20px 18px;
}
.sidebar-logo .marque {
  font-family: var(--police-titre);
  font-weight: 800;
  font-size: 21px;
  color: #fff;
  letter-spacing: -.03em;
}

.logo-glyphe {
  width: 30px; height: 30px;
  flex: 0 0 30px;
}

.nav {
  flex: 1;
  overflow-y: auto;
  padding: 4px 12px 20px;
  scrollbar-width: thin;
}
.nav::-webkit-scrollbar { width: 6px; }
.nav::-webkit-scrollbar-thumb { background: rgba(255,255,255,.14); border-radius: 3px; }

.nav-titre {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: rgba(169, 182, 220, .55);
  padding: 18px 12px 7px;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px 12px;
  border-radius: var(--r-md);
  color: var(--nav-text);
  font-size: 13.5px;
  font-weight: 500;
  margin-bottom: 2px;
  transition: background .14s ease, color .14s ease;
}
.nav-item:hover { background: var(--nav-hover); color: #fff; }
.nav-item.actif {
  background: var(--accent);
  color: var(--nav-text-actif);
  font-weight: 600;
  box-shadow: 0 4px 12px rgba(37, 99, 235, .35);
}
.nav-item svg { width: 18px; height: 18px; flex: 0 0 18px; stroke-width: 1.9; }

.nav-badge {
  margin-left: auto;
  background: var(--accent);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 1px 7px;
  border-radius: var(--r-full);
}
.nav-item.actif .nav-badge { background: rgba(255,255,255,.24); }

.sidebar-pied {
  border-top: 1px solid rgba(255,255,255,.09);
  padding: 14px;
}
.profil {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px;
  border-radius: var(--r-md);
  color: #fff;
}
.profil:hover { background: var(--nav-hover); }
.profil-avatar {
  width: 34px; height: 34px;
  flex: 0 0 34px;
  border-radius: var(--r-md);
  background: var(--accent);
  color: #fff;
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 12.5px;
}
.profil-nom { font-size: 13px; font-weight: 600; line-height: 1.2; }
.profil-role { font-size: 11.5px; color: var(--nav-text); }

/* ------------------------------------------------------------------ */
/* En-tête de page                                                     */
/* ------------------------------------------------------------------ */
.page-tete {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 22px;
}
.page-sous-titre {
  color: var(--muted);
  font-size: 13.5px;
  margin-top: 3px;
}
.page-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }

/* ------------------------------------------------------------------ */
/* Boutons                                                             */
/* ------------------------------------------------------------------ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 16px;
  border-radius: var(--r-md);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--texte);
  font-family: var(--police-texte);
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background .14s, border-color .14s, box-shadow .14s, transform .06s;
}
.btn:hover { background: var(--surface-alt); border-color: var(--border-fort); }
.btn:active { transform: translateY(1px); }
.btn svg { width: 16px; height: 16px; stroke-width: 2; }

.btn-primaire {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  box-shadow: 0 4px 12px rgba(37, 99, 235, .26);
}
.btn-primaire:hover { background: var(--accent-600); border-color: var(--accent-600); color: #fff; }

.btn-danger { color: var(--danger); border-color: #F6C9C9; background: var(--danger-soft); }
.btn-danger:hover { background: #FBDCDC; }

.btn-fantome { background: transparent; border-color: transparent; color: var(--muted); }
.btn-fantome:hover { background: var(--accent-soft); color: var(--accent); }

.btn-sm { height: 32px; padding: 0 11px; font-size: 12.5px; border-radius: var(--r-sm); }
.btn-icone { width: 40px; padding: 0; justify-content: center; }

/* Bouton « Voir détails » des tableaux */
.btn-details {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--accent);
  font-size: 12.5px;
  font-weight: 600;
}
.btn-details svg { width: 14px; height: 14px; flex: 0 0 14px; stroke-width: 2; }
.btn-details:hover { background: var(--accent-soft); border-color: #C7DBFD; }

/* ------------------------------------------------------------------ */
/* Cartes                                                              */
/* ------------------------------------------------------------------ */
.carte {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--ombre-1);
}
.carte-tete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 17px 20px;
  border-bottom: 1px solid var(--border);
}
.carte-corps { padding: 20px; }

/* ------------------------------------------------------------------ */
/* Bandeau KPI — signature visuelle                                    */
/* ------------------------------------------------------------------ */
.kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(178px, 1fr));
  gap: 14px;
  margin-bottom: var(--gap);
}

.kpi {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 18px;
  box-shadow: var(--ombre-1);
  display: flex;
  flex-direction: column;
  gap: 11px;
  transition: box-shadow .18s ease, transform .18s ease;
}
.kpi:hover { box-shadow: var(--ombre-2); transform: translateY(-1px); }

/* Un indicateur qui mène quelque part le dit : sans ce curseur, rien ne
   distingue un chiffre cliquable d'un chiffre décoratif. */
.kpi-cliquable { cursor: pointer; }
.kpi-cliquable:hover .kpi-valeur { text-decoration: underline; }

.kpi-bulle {
  width: 42px; height: 42px;
  border-radius: var(--r-lg);
  display: grid;
  place-items: center;
  background: var(--accent-soft);
  color: var(--accent);
}
.kpi-bulle svg { width: 20px; height: 20px; stroke-width: 1.9; }
.kpi-bulle.vert   { background: var(--succes-soft); color: var(--succes); }
.kpi-bulle.orange { background: var(--alerte-soft); color: var(--alerte); }
.kpi-bulle.rouge  { background: var(--danger-soft); color: var(--danger); }
.kpi-bulle.violet { background: var(--violet-soft); color: var(--violet); }

.kpi-label {
  font-size: 12.5px;
  color: var(--muted);
  font-weight: 500;
  line-height: 1.35;
}
.kpi-valeur {
  font-family: var(--police-titre);
  font-size: 25px;
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1.1;
}
.kpi-note { font-size: 12px; color: var(--muted-clair); }

.tendance {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12.5px;
  font-weight: 600;
}
.tendance.hausse { color: var(--succes); }
.tendance.baisse { color: var(--danger); }

/* ------------------------------------------------------------------ */
/* Tableaux                                                            */
/* ------------------------------------------------------------------ */
.tableau-enveloppe {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--ombre-1);
  overflow: hidden;
}
.tableau-defilement { overflow-x: auto; }

table.tableau {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
table.tableau thead th {
  background: var(--surface-alt);
  color: var(--texte-doux);
  font-family: var(--police-titre);
  font-size: 11.5px;
  font-weight: 700;
  text-align: left;
  padding: 13px 14px;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
  vertical-align: middle;
}
table.tableau tbody td {
  padding: 13px 14px;
  border-bottom: 1px solid #F1F4F9;
  vertical-align: middle;
}
table.tableau tbody tr:last-child td { border-bottom: 0; }
table.tableau tbody tr:hover { background: #FBFCFE; }

table.tableau th.droite, table.tableau td.droite { text-align: right; }
table.tableau th.centre, table.tableau td.centre { text-align: center; }

/* Ligne TOTAL */
table.tableau tfoot td,
table.tableau tr.ligne-total td {
  background: var(--accent-soft);
  font-weight: 700;
  color: var(--accent-700);
  border-top: 1px solid #C7DBFD;
  border-bottom: 0;
  padding: 14px;
}

.cellule-principale { font-weight: 600; color: var(--texte); }
.cellule-secondaire { font-size: 12px; color: var(--muted); }
.valeur-positive { color: var(--succes); font-weight: 600; }
.valeur-negative { color: var(--danger); font-weight: 600; }
/* Employée dans dix écrans (stats, stock, livraisons, paiements…) mais
   jamais définie : les chiffres censés alerter en rouge s'affichaient en
   noir. Une ligne ici vaut mieux que vingt-trois corrections ailleurs. */
.texte-danger    { color: var(--danger); font-weight: 600; }
.valeur-attente  { color: var(--alerte); font-weight: 600; }

/* Pastille d'entité (client, fournisseur) */
.pastille {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px; height: 32px;
  border-radius: var(--r-sm);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .02em;
  background: var(--accent-soft);
  color: var(--accent);
  flex: 0 0 32px;
}
.entite { display: flex; align-items: center; gap: 10px; }

/* ------------------------------------------------------------------ */
/* Barre de progression                                                */
/* ------------------------------------------------------------------ */
.progression {
  width: 100%;
  min-width: 84px;
}
.progression-valeur {
  font-size: 12.5px;
  font-weight: 600;
  margin-bottom: 5px;
  display: block;
}
.progression-piste {
  width: 100%;
  height: 5px;
  border-radius: var(--r-full);
  background: #EDF1F7;
  overflow: hidden;
}
.progression-barre {
  height: 100%;
  border-radius: var(--r-full);
  background: var(--accent);
  transition: width .5s cubic-bezier(.4, 0, .2, 1);
}
.progression-barre.complet   { background: linear-gradient(90deg, #16a34a, #22c55e); }
.progression-barre.excellent { background: var(--succes); }
.progression-barre.moyen     { background: var(--alerte); }
.progression-barre.faible    { background: #f97316; }
.progression-barre.critique  { background: var(--danger); }

/* ------------------------------------------------------------------ */
/* Édition en place                                                    */
/* ------------------------------------------------------------------ */
.modifiable {
  cursor: text;
  border-bottom: 1px dashed transparent;
  border-radius: 3px;
  padding: 1px 3px;
  margin: -1px -3px;
  transition: background .12s, border-color .12s;
}
.modifiable:hover {
  background: var(--accent-soft);
  border-bottom-color: var(--accent);
}
.modifiable:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}
.modifiable.en-edition {
  background: transparent;
  border-bottom-color: transparent;
  padding: 0;
  margin: 0;
  display: block;
}
.saisie-en-place {
  height: auto;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  line-height: inherit;
  min-width: 0;
  width: 100%;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  outline: none;
}
/* La case active se signale par son contour, pas le champ qu'elle contient */
.tableau td:focus-within {
  box-shadow: inset 0 0 0 2px var(--violet, #7c6bff);
}
.vient-de-changer {
  animation: surlignage 1.4s ease-out;
}
@keyframes surlignage {
  0%   { background: #C9F0DA; }
  100% { background: transparent; }
}

/* ------------------------------------------------------------------ */
/* Badges                                                              */
/* ------------------------------------------------------------------ */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: var(--r-full);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  background: #EEF1F7;
  color: var(--texte-doux);
}
.badge.vert   { background: var(--succes-soft); color: #12803B; }
.badge.orange { background: var(--alerte-soft); color: #B45309; }
.badge.rouge  { background: var(--danger-soft); color: #B91C1C; }
.badge.bleu   { background: var(--accent-soft); color: var(--accent-700); }
.badge.violet { background: var(--violet-soft); color: #5B3FD1; }
/* Deux nuances de plus pour les statuts de facture : le jaune du règlement
   partiel, entre l'attente et l'encaissé, et le gris de l'annulation — une
   facture annulée n'appelle aucune action, elle doit s'effacer du regard. */
.badge.jaune  { background: #FEF7CD; color: #8A6100; }

/* Encadré cliquable qui mène à son onglet : l'actif se distingue, sinon on
   ne sait plus lequel des cinq on est en train de lire. */
.kpi-actif { box-shadow: 0 0 0 2px var(--liseré, #1e3fa0) inset; }
a.kpi:hover { transform: translateY(-1px); transition: transform .12s ease; }
.badge.gris   { background: #EDEFF3; color: #6B7A99; }

.point {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: currentColor;
  flex: 0 0 8px;
}

/* ------------------------------------------------------------------ */
/* Formulaires                                                         */
/* ------------------------------------------------------------------ */
.champ { margin-bottom: 15px; }
.champ label {
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--texte-doux);
  margin-bottom: 6px;
}
.saisie, select.saisie, textarea.saisie {
  width: 100%;
  height: 40px;
  padding: 0 12px;
  border: 1px solid var(--border-fort);
  border-radius: var(--r-md);
  background: var(--surface);
  font-family: var(--police-texte);
  font-size: 13.5px;
  color: var(--texte);
  transition: border-color .14s, box-shadow .14s;
}
textarea.saisie { height: auto; padding: 10px 12px; min-height: 90px; resize: vertical; }
.saisie:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, .12);
}
.saisie::placeholder { color: var(--muted-clair); }
.saisie:disabled { background: var(--surface-alt); color: var(--muted); }

.aide { font-size: 12px; color: var(--muted); margin-top: 5px; }
.erreur-champ { font-size: 12px; color: var(--danger); margin-top: 5px; }

.recherche { position: relative; flex: 1; max-width: 340px; }
.recherche .saisie { padding-left: 38px; }
.recherche svg {
  position: absolute;
  left: 13px; top: 50%;
  transform: translateY(-50%);
  width: 16px; height: 16px;
  color: var(--muted-clair);
  pointer-events: none;
}

.grille-champs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 0 16px;
}

/* ------------------------------------------------------------------ */
/* Onglets                                                             */
/* ------------------------------------------------------------------ */
.onglets {
  display: flex;
  gap: 26px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 20px;
}
.onglet {
  padding: 11px 2px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--muted);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.onglet:hover { color: var(--texte-doux); }
.onglet.actif { color: var(--accent); border-bottom-color: var(--accent); }

/* ------------------------------------------------------------------ */
/* Alertes                                                             */
/* ------------------------------------------------------------------ */
.alerte {
  display: flex;
  gap: 11px;
  padding: 13px 16px;
  border-radius: var(--r-lg);
  font-size: 13.5px;
  margin-bottom: 18px;
  border: 1px solid transparent;
}
.alerte svg { width: 18px; height: 18px; flex: 0 0 18px; margin-top: 1px; }
.alerte-info    { background: var(--accent-soft); border-color: #C7DBFD; color: var(--accent-700); }
.alerte-succes  { background: var(--succes-soft); border-color: #BBE9CE; color: #12803B; }
.alerte-attente { background: var(--alerte-soft); border-color: #FBDFB4; color: #B45309; }
.alerte-danger  { background: var(--danger-soft);  border-color: #F6C9C9; color: #B91C1C; }

.note-pied svg { width: 15px; height: 15px; flex: 0 0 15px; }
.note-pied {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 12.5px;
  padding: 14px 4px 0;
}

/* ------------------------------------------------------------------ */
/* Grilles de section                                                  */
/* ------------------------------------------------------------------ */
.grille { display: grid; gap: var(--gap); margin-bottom: var(--gap); }
.grille-2 { grid-template-columns: repeat(2, 1fr); }
.grille-3 { grid-template-columns: repeat(3, 1fr); }
.grille-2-1 { grid-template-columns: 2fr 1fr; }

/* ------------------------------------------------------------------ */
/* Barre de pagination / outils de tableau                             */
/* ------------------------------------------------------------------ */
.barre-outils {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.barre-outils .pousse { margin-left: auto; }

.pagination { display: flex; gap: 6px; align-items: center; justify-content: center; padding: 16px; }
.page-lien {
  min-width: 34px; height: 34px;
  padding: 0 9px;
  display: inline-grid;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--texte-doux);
  font-size: 13px;
  font-weight: 600;
}
.page-lien:hover { background: var(--surface-alt); }
.page-lien.actif { background: var(--accent); border-color: var(--accent); color: #fff; }
.page-lien.desactive { opacity: .4; pointer-events: none; }

/* ------------------------------------------------------------------ */
/* État vide                                                           */
/* ------------------------------------------------------------------ */
.vide {
  text-align: center;
  padding: 54px 24px;
  color: var(--muted);
}
.vide-bulle svg { width: 24px; height: 24px; stroke-width: 1.8; }
.vide-bulle {
  width: 52px; height: 52px;
  margin: 0 auto 14px;
  border-radius: var(--r-lg);
  background: var(--accent-soft);
  color: var(--accent);
  display: grid;
  place-items: center;
}
.vide h3 { margin-bottom: 5px; }
.vide p { margin: 0 0 18px; font-size: 13.5px; }

/* ------------------------------------------------------------------ */
/* Barre de chargement                                                 */
/* ------------------------------------------------------------------ */
#barre-chargement {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  width: 0;
  background: linear-gradient(90deg, var(--logo-de), var(--accent));
  z-index: 9999;
  transition: width .25s ease, opacity .3s ease;
}

/* ------------------------------------------------------------------ */
/* Connexion                                                           */
/* ------------------------------------------------------------------ */
.page-connexion {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
  background:
    radial-gradient(900px 480px at 12% -10%, rgba(91, 155, 255, .18), transparent 62%),
    radial-gradient(760px 440px at 96% 108%, rgba(55, 48, 216, .14), transparent 60%),
    var(--bg);
}
.carte-connexion {
  width: 100%;
  max-width: 396px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  box-shadow: var(--ombre-3);
  padding: 34px 32px;
}

/* ------------------------------------------------------------------ */
/* Responsive                                                          */
/* ------------------------------------------------------------------ */
@media (max-width: 1180px) {
  .grille-2, .grille-3, .grille-2-1 { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
  :root { --sidebar-l: 100%; }
  .app { flex-direction: column; }
  .sidebar {
    position: sticky;
    top: 0;
    height: auto;
    flex: none;
    width: 100%;
    z-index: 60;
  }
  .nav {
    display: none;
    max-height: 68vh;
    padding-bottom: 14px;
  }
  .sidebar.ouverte .nav { display: block; }
  .sidebar.ouverte .sidebar-pied { display: block; }
  .sidebar-pied { display: none; }
  .bascule-menu { display: inline-grid !important; }
  .contenu { padding: 18px 15px 48px; }
  h1 { font-size: 22px; }
  .page-tete { flex-direction: column; align-items: stretch; }
  .kpis { grid-template-columns: repeat(auto-fit, minmax(148px, 1fr)); gap: 11px; }
  .kpi { padding: 14px; }
  .kpi-valeur { font-size: 21px; }
}

.bascule-menu svg { width: 19px; height: 19px; }
.bascule-menu {
  display: none;
  place-items: center;
  width: 38px; height: 38px;
  margin-left: auto;
  border-radius: var(--r-md);
  background: rgba(255,255,255,.12);
  border: 0;
  color: #fff;
  cursor: pointer;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

@media print {
  .sidebar, .page-actions, .btn, .pagination { display: none !important; }
  .contenu { padding: 0; }
  .carte, .tableau-enveloppe { box-shadow: none; border-color: #ccc; }
}

/* Cellules corrigeables de l'aperçu d'import */
.cellule-cible {
  cursor: text;
  transition: background .12s ease;
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cellule-cible:hover { background: var(--accent-soft); }

/* Une valeur corrigée se distingue de celle du fichier */
.cellule-cible.corrigee {
  background: rgba(245, 158, 11, .12);
  font-weight: 600;
  box-shadow: inset 2px 0 0 var(--attente, #F59E0B);
}

.cellule-cible input {
  width: 100%;
  border: 1px solid var(--accent);
  border-radius: 4px;
  padding: 3px 6px;
  font: inherit;
  font-size: 12.5px;
  background: var(--surface);
}

/* Ligne du fichier qui pose problème, repérable au premier coup d'œil */
.tableau tbody tr.ligne-probleme > td { background: rgba(239, 68, 68, .05); }
.tableau tbody tr.ligne-probleme:hover > td { background: rgba(239, 68, 68, .09); }
.tableau tbody tr.ligne-probleme > td:first-child {
  box-shadow: inset 3px 0 0 var(--danger, #EF4444);
}

/* Repère de semaine : l'activité se pilote à la semaine, il reste sous les yeux */
.semaine-repere {
  display: block;
  margin: 4px 14px 14px;
  padding: 11px 14px;
  border-radius: 12px;
  text-decoration: none;
  background: linear-gradient(135deg, rgba(124,107,255,.16), rgba(168,85,247,.12));
  border: 1px solid rgba(124,107,255,.30);
  transition: border-color .15s ease, transform .15s ease;
}
.semaine-repere:hover { border-color: rgba(124,107,255,.55); transform: translateY(-1px); }
.semaine-repere { display: flex; align-items: baseline; gap: 8px; }
.semaine-numero {
  font-family: var(--police-titre, 'Sora', sans-serif);
  font-weight: 700;
  font-size: 19px;
  letter-spacing: .3px;
  color: var(--primaire, #7c6bff);
}
.semaine-periode {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--muted, #64748b);
}
body.sombre .semaine-numero { color: #f1f5f9; }

/* La semaine en cours ressort dans la liste des commandes */
.semaine-active {
  color: var(--primaire, #7c6bff);
  font-weight: 700;
}

/* Sections de semaine dans la liste des commandes */
.ligne-semaine > td { padding: 0 !important; background: var(--fond-doux, #f8fafc); }
body.sombre .ligne-semaine > td { background: rgba(255,255,255,.04); }
.bascule-semaine {
  display: flex; align-items: center; gap: 12px;
  width: 100%; padding: 11px 18px;
  background: none; border: 0; cursor: pointer; text-align: left;
  font-family: inherit; font-size: 13px;
  border-top: 1px solid var(--bordure, #e2e8f0);
}
.bascule-semaine:hover { background: rgba(124,107,255,.07); }
.bascule-semaine .chevron {
  display: inline-block; transition: transform .15s ease;
  color: var(--muted, #64748b); font-size: 12px;
}
.bascule-semaine.ouvert .chevron { transform: rotate(90deg); }
.bascule-semaine .semaine-libelle {
  font-family: var(--police-titre, 'Sora', sans-serif);
  font-weight: 700; font-size: 15px; color: var(--primaire, #7c6bff);
}
.bascule-semaine .semaine-dates { color: var(--texte, #0f172a); font-weight: 500; }
body.sombre .bascule-semaine .semaine-dates { color: #e2e8f0; }
.bascule-semaine .semaine-chiffres { color: var(--muted, #64748b); margin-left: auto; }

/* Duplication d'une semaine, dans la barre d'actions */
.forme-dupliquer { display: flex; gap: 6px; align-items: center; margin: 0; }
.forme-dupliquer .saisie { width: auto; height: 36px; font-size: 12.5px; }

/* Fil des étapes de l'import */
.fil-etapes {
  display: flex; flex-wrap: wrap; gap: 6px;
  list-style: none; margin: 0 0 var(--gap); padding: 0;
}
.fil-etapes li {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 14px 8px 10px;
  border-radius: 999px;
  background: var(--fond-doux, #f8fafc);
  border: 1px solid var(--bordure, #e2e8f0);
  font-size: 12.5px; color: var(--muted, #64748b);
}
.fil-etapes .fil-puce {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--bordure, #e2e8f0); color: var(--muted, #64748b);
  font-weight: 700; font-size: 11.5px;
}
.fil-etapes li.faite { border-color: rgba(34,197,94,.35); }
.fil-etapes li.faite .fil-puce { background: #22c55e; color: #fff; }
.fil-etapes li.active {
  background: linear-gradient(135deg, rgba(124,107,255,.16), rgba(168,85,247,.12));
  border-color: rgba(124,107,255,.45);
  color: var(--texte, #0f172a); font-weight: 600;
}
.fil-etapes li.active .fil-puce { background: var(--primaire, #7c6bff); color: #fff; }
body.sombre .fil-etapes li { background: rgba(255,255,255,.04); }
body.sombre .fil-etapes li.active { color: #f1f5f9; }
@media (max-width: 700px) { .fil-etapes .fil-libelle { display: none; } }

/* Réaffectation d'un lead depuis l'écran de contrôle */
.choix-client { width: 100%; min-width: 150px; font-size: 12.5px; height: 34px; }
.choix-client.corrigee {
  border-color: rgba(249, 115, 22, .6);
  background: rgba(249, 115, 22, .07);
  font-weight: 600;
}
.choix-client:disabled { opacity: .5; }

/* Lancement du contrôle, au pied de l'association des colonnes */
.bloc-analyser {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  margin-top: 18px; padding: 16px 18px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(124,107,255,.10), rgba(168,85,247,.07));
  border: 1px solid rgba(124,107,255,.30);
}
.bloc-analyser-texte {
  display: flex; align-items: flex-start; gap: 10px;
  flex: 1; min-width: 260px;
  font-size: 12.5px; line-height: 1.5; color: var(--muted, #64748b);
}
.bloc-analyser-texte svg { flex-shrink: 0; margin-top: 2px; }
body.sombre .bloc-analyser-texte { color: #cbd5e1; }
.btn-analyser { font-size: 14px; padding: 12px 24px; white-space: nowrap; }

/* Ajout d'une ligne libre sur une facture */
.forme-ligne-facture { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 0; }
.forme-ligne-facture .saisie { height: 38px; }

/* Bloc de facture prêt à recopier */
.zone-copie {
  width: 100%;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 12px; line-height: 1.7;
  white-space: pre; overflow-x: auto;
  resize: vertical;
}

/* Badge produit à sa propre couleur */
.badge-produit { border: 1px solid; font-weight: 600; }

/* Pastille de couleur, discrète */
.pastille-couleur {
  display: inline-block; width: 12px; height: 12px;
  border-radius: 3px; vertical-align: middle;
  border: 1px solid rgba(0,0,0,.12);
}

/* Suppression depuis une liste : présent mais discret */
.btn-supprimer { color: var(--danger, #EF4444); border: 0; background: none; cursor: pointer; font: inherit; }
.btn-supprimer:hover { text-decoration: underline; }

/* ================================================================
   Vue simple : l'essentiel visible, le reste rangé
   ================================================================ */

/* Colonnes secondaires : présentes dans le HTML, masquées à l'affichage.
   Aucune donnée n'est perdue, un clic sur la bascule les rouvre toutes. */
body.vue-simple .col-avancee { display: none; }

/* Indicateurs et blocs secondaires */
body.vue-simple .bloc-avance { display: none; }

/* Les textes d'explication permanents deviennent du bruit pour qui
   utilise l'outil tous les jours. Les alertes, elles, restent. */
body.vue-simple .aide,
body.vue-simple .note-pied { display: none; }

/* Plus d'air entre les blocs quand il y a moins à lire */
body.vue-simple .grille-kpi { gap: 14px; }
body.vue-simple .tableau td { padding-top: 13px; padding-bottom: 13px; }

/* Bascule d'affichage, au pied du menu */
.bascule-vue {
  display: flex; align-items: center; gap: 9px;
  margin: 0 0 10px; padding: 9px 12px;
  border-radius: 10px;
  font-size: 12.5px; color: var(--muted, #64748b);
  text-decoration: none;
  border: 1px solid var(--bordure, #e2e8f0);
  transition: border-color .15s ease, color .15s ease;
}
.bascule-vue:hover { border-color: rgba(124,107,255,.5); color: var(--texte, #0f172a); }
.bascule-etat {
  position: relative; flex-shrink: 0;
  width: 30px; height: 17px; border-radius: 999px;
  background: var(--bordure, #cbd5e1);
  transition: background .15s ease;
}
.bascule-etat::after {
  content: ''; position: absolute; top: 2px; left: 2px;
  width: 13px; height: 13px; border-radius: 50%;
  background: #fff; transition: transform .15s ease;
  box-shadow: 0 1px 2px rgba(0,0,0,.2);
}
.bascule-etat.active { background: var(--primaire, #7c6bff); }
.bascule-etat.active::after { transform: translateX(13px); }
body.sombre .bascule-vue:hover { color: #f1f5f9; }

/* Saisie des codes courts à la création d'un client */
.ligne-code {
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
  padding: 10px 0;
  border-bottom: 1px solid var(--bordure, #e2e8f0);
}
.ligne-code:last-child { border-bottom: 0; }
.ligne-code .saisie { height: 38px; font-size: 13px; }

/* Fenêtre en surimpression : l'historique s'ouvre sans quitter la page */
[hidden] { display: none !important; }

.voile {
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  background: rgba(15, 23, 42, .45);
  backdrop-filter: blur(2px);
}
.volet {
  width: 100%; max-width: 720px; max-height: 82vh;
  display: flex; flex-direction: column;
  background: var(--surface, #fff);
  border: 1px solid var(--bordure, #e2e8f0);
  border-radius: var(--r-lg, 16px);
  box-shadow: 0 18px 50px rgba(15, 23, 42, .25);
  overflow: hidden;
}
.volet-tete {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
  padding: 18px 20px;
  border-bottom: 1px solid var(--bordure, #e2e8f0);
}
.volet-tete h2 { margin: 0 0 3px; font-size: 17px; }
.volet-corps { overflow: auto; }
.volet-corps .tableau { margin: 0; }

/* Toute la ligne ouvre l'historique : la cible est la ligne, pas un lien */
tr.ligne-historique { cursor: pointer; }
tr.ligne-historique:hover > td { background: rgba(124, 107, 255, .07); }

/* Saisie d'un paiement, ligne par produit */
.tableau-paiement { margin: 12px 0 0; font-size: 13px; }
.tableau-paiement th, .tableau-paiement td { padding: 8px 10px; }
.tableau-paiement .saisie-sm { height: 34px; font-size: 13px; }
.tableau-paiement tfoot td { font-weight: 600; }

/* Zone de dépôt d'un fichier : cible large, geste évident */
.zone-depot {
  margin-top: 14px; padding: 30px 22px;
  border: 2px dashed var(--bordure, #cbd5e1);
  border-radius: 14px;
  background: var(--fond-doux, #f8fafc);
  cursor: pointer; text-align: center;
  transition: border-color .15s ease, background .15s ease;
}
.zone-depot:hover,
.zone-depot:focus-visible { border-color: var(--primaire, #7c6bff); outline: none; }
.zone-depot.survol {
  border-color: var(--primaire, #7c6bff);
  background: rgba(124, 107, 255, .08);
}
.zone-depot.rempli {
  border-style: solid;
  border-color: rgba(34, 197, 94, .5);
  background: rgba(34, 197, 94, .06);
  padding: 16px 18px; text-align: left;
}
.zone-depot-vide svg { width: 30px; height: 30px; color: var(--muted, #94a3b8); }
.zone-depot-titre {
  margin-top: 8px; font-weight: 600; font-size: 14.5px;
  color: var(--texte, #0f172a);
}
.zone-depot-aide { margin-top: 3px; font-size: 12.5px; color: var(--muted, #64748b); }
.zone-depot-choisi { display: flex; align-items: center; gap: 12px; }
.zone-depot-choisi svg { width: 24px; height: 24px; color: #22c55e; flex-shrink: 0; }
.zone-depot-nom { font-weight: 600; word-break: break-all; }
.zone-depot-choisi .btn { margin-left: auto; flex-shrink: 0; }

/* Fiches en sections : un titre par groupe de champs, séparés par un filet */
.bloc-fiche { padding-bottom: 20px; margin-bottom: 20px; border-bottom: 1px solid var(--bordure, #e2e8f0); }
.bloc-fiche:last-of-type { border-bottom: 0; margin-bottom: 10px; }
.titre-bloc {
  margin: 0 0 14px;
  font-family: var(--police-titre, 'Sora', sans-serif);
  font-size: 13px; font-weight: 600; letter-spacing: .3px;
  text-transform: uppercase; color: var(--muted, #64748b);
}

/* Tarifs : une ligne par produit, alignée */
.grille-tarifs { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; }
.ligne-tarif { display: flex; align-items: center; gap: 10px; cursor: pointer; }
.ligne-tarif .saisie { width: 100px; text-align: right; }

/* Case à cocher explicite, avec sa conséquence écrite à côté */
.case-statut { display: flex; align-items: flex-start; gap: 11px; cursor: pointer; }
.case-statut input { margin-top: 3px; flex-shrink: 0; }
.case-statut .cellule-secondaire { display: block; margin-top: 2px; }

/* Ligne livrable mais imparfaite : signalée sans être traitée comme une erreur */
.tableau tbody tr.ligne-alerte > td { background: rgba(249, 115, 22, .05); }
.tableau tbody tr.ligne-alerte:hover > td { background: rgba(249, 115, 22, .09); }
.tableau tbody tr.ligne-alerte > td:first-child {
  box-shadow: inset 3px 0 0 rgba(249, 115, 22, .8);
}

/* Commande servie : la ligne se lit d'un coup d'œil dans la liste, sans
   avoir à chercher la colonne Statut. Même construction que .ligne-alerte —
   un fond très léger et un filet à gauche — pour que les deux signaux se
   ressemblent au lieu de se concurrencer. */
.tableau tbody tr.ligne-livree > td { background: rgba(22, 163, 74, .07); }
.tableau tbody tr.ligne-livree:hover > td { background: rgba(22, 163, 74, .12); }
.tableau tbody tr.ligne-livree > td:first-child {
  box-shadow: inset 3px 0 0 rgba(22, 163, 74, .85);
}
body.sombre .tableau tbody tr.ligne-livree > td { background: rgba(34, 197, 94, .10); }
body.sombre .tableau tbody tr.ligne-livree:hover > td { background: rgba(34, 197, 94, .16); }

/* Tableau dense : une ligne = une ligne. Sert aux listes d'action qu'on
   parcourt d'un coup d'œil, pas aux tableaux qu'on lit cellule par cellule. */
.tableau-serre tbody td { padding-top: 5px; padding-bottom: 5px; line-height: 1.3; }
.tableau-serre thead th { padding-top: 6px; padding-bottom: 6px; }
.tableau-serre .badge { padding: 1px 7px; font-size: 11px; }
.tableau-serre sup { font-size: 9px; opacity: .65; margin-left: 1px; }

/* Volume bloqué anormal : ce n'est plus un réglage à faire, c'est un client
   qui manque. Rouge franc, filet épais — la ligne doit se repérer sans lire. */
.tableau tbody tr.ligne-critique > td { background: rgba(220, 38, 38, .12); }
.tableau tbody tr.ligne-critique:hover > td { background: rgba(220, 38, 38, .18); }
.tableau tbody tr.ligne-critique > td:first-child {
  box-shadow: inset 4px 0 0 #dc2626;
}
.tableau tbody tr.ligne-critique > td strong { color: #b91c1c; }
body.sombre .tableau tbody tr.ligne-critique > td { background: rgba(248, 113, 113, .16); }
body.sombre .tableau tbody tr.ligne-critique > td strong { color: #fca5a5; }

/* Actions de fin d'import : elles passent à la ligne plutôt que de déborder */
.actions-import {
  display: flex; flex-wrap: wrap; gap: 10px;
  margin-top: 16px;
}
.actions-import form { margin: 0; }
.actions-import .btn { flex: 0 1 auto; }

/* Bandeau d'entrée : ce qui reste à placer, et le bouton qui ouvre le modal */
.bandeau-placer {
  display: flex; align-items: center; justify-content: space-between;
  gap: 18px; flex-wrap: wrap;
  padding: 18px 20px; margin-bottom: var(--gap);
}
.bandeau-placer-titre {
  font-family: var(--police-titre, 'Sora', sans-serif);
  font-size: 18px; font-weight: 700; margin-bottom: 2px;
}

/* Modal de placement, plus large que les autres : il contient un tableau */
.volet-placer { max-width: 860px; }
.volet-placer form { display: flex; flex-direction: column; min-height: 0; max-height: 82vh; }
.volet-placer .volet-corps { padding: 18px 20px; }
.volet-pied {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 20px;
  border-top: 1px solid var(--bordure, #e2e8f0);
  background: var(--fond-doux, #f8fafc);
}
.volet-pied .cellule-secondaire { margin-left: auto; }

/* Étape 1 : les types, en cartes cliquables */
.grille-types { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.carte-type {
  display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
  padding: 16px; cursor: pointer; text-align: left;
  background: var(--surface, #fff);
  border: 2px solid var(--bordure, #e2e8f0);
  border-radius: 12px;
  font: inherit;
  transition: border-color .15s ease, transform .15s ease;
}
.carte-type:hover { border-color: rgba(124,107,255,.5); transform: translateY(-1px); }
.carte-type.choisi { border-color: var(--primaire, #7c6bff); background: rgba(124,107,255,.06); }
.carte-type-nb {
  font-family: var(--police-titre, 'Sora', sans-serif);
  font-size: 26px; font-weight: 700; line-height: 1;
}

/* Étape 2 : quantité grisée tant que la ligne n'est pas cochée */
.champ-qte:disabled { opacity: .4; }


/* Lien discret posé à côté d'un libellé de champ */
.lien-discret {
  margin-left: 8px; font-size: 12px; font-weight: 500;
  color: var(--primaire, #7c6bff); text-decoration: none;
}
.lien-discret:hover { text-decoration: underline; }

/* Collage direct depuis un tableur, replié par défaut */
.bloc-collage { margin-top: 14px; }

/* Grille de collage : on retrouve les gestes d'un tableur */
.grille-collage {
  max-height: 660px;          /* environ 20 lignes, puis défilement vertical */
  overflow: auto;             /* et défilement horizontal si besoin */
  border: 1px solid var(--bordure, #e2e8f0); border-radius: 10px;
}
/* La colonne des numéros reste visible quand on défile vers la droite */
#table-collage tbody td:first-child,
#table-collage thead th:first-child {
  position: sticky; left: 0; z-index: 3;
  background: var(--fond-doux, #f8fafc);
  min-width: 44px; text-align: right; padding-right: 10px;
}
#table-collage thead th:first-child { z-index: 4; }
#table-collage { margin: 0; font-size: 12.5px; }
#table-collage thead th {
  position: sticky; top: 0; z-index: 2;
  background: var(--fond-doux, #f8fafc);
  font-size: 11.5px; text-transform: uppercase; letter-spacing: .3px;
  padding: 7px 10px; white-space: nowrap;
}
#table-collage td { padding: 0; }
.case-collage {
  min-width: 130px; padding: 7px 10px;
  outline: none; cursor: text;
  border-right: 1px solid var(--bordure, #eef2f7);
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  white-space: nowrap;
}
.case-collage:focus {
  box-shadow: inset 0 0 0 2px var(--primaire, #7c6bff);
  background: rgba(124, 107, 255, .05);
}
.barre-collage {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-top: 10px;
}
.barre-collage .cellule-secondaire { margin-left: auto; }

/* Aperçu du fichier : lecture façon tableau de leads, pas façon CSV brut */
#table-apercu { font-size: 13px; }
#table-apercu thead th {
  position: sticky; top: 0; z-index: 2;
  background: var(--fond-doux, #f8fafc);
  white-space: nowrap; vertical-align: top; line-height: 1.5;
}
#table-apercu tbody tr:nth-child(even) > td { background: rgba(148, 163, 184, .04); }
#table-apercu tbody tr:hover > td { background: rgba(124, 107, 255, .06); }
#table-apercu td { white-space: nowrap; }
.mono { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 12.5px; }

/* Réaffectation au contrôle : les clients qui commandent la zone ressortent */
.choix-client { min-width: 190px; }

.choix-client optgroup { font-weight: 600; }
.choix-client .option-preneur { background: #fef3c7; font-weight: 500; }

/* Livraison forcée : la ligne reste signalée, mais elle partira */
.case-forcer {
  display: inline-flex; align-items: center; gap: 6px;
  cursor: pointer; font-size: 12.5px; font-weight: 500;
  padding: 3px 8px; border-radius: 999px;
  background: rgba(245, 158, 11, .12); color: #b45309;
  white-space: nowrap;
}
.case-forcer input { margin: 0; }
.tableau tbody tr.ligne-forcee > td { background: rgba(34, 197, 94, .07); }


/* Sélection rectangulaire dans la grille de collage */
.case-collage.selectionnee { background: rgba(124, 107, 255, .14); }
.case-collage.selectionnee:focus { background: rgba(124, 107, 255, .22); }
.grille-collage { user-select: none; }
.case-collage { user-select: text; }

/* Sélection dans le tableau des lignes du fichier (étape Contrôle) */
.cellule-cible.selectionnee { background: rgba(124, 107, 255, .14); }
.cellule-cible:focus { outline: 2px solid var(--primaire, #7c6bff); outline-offset: -2px; }

/* Sélection dans le tableau du contrôle */
#table-controle td.selectionnee { background: rgba(124, 107, 255, .14); }
#table-controle td:focus { outline: 2px solid var(--primaire, #7c6bff); outline-offset: -2px; }
#table-controle { user-select: none; }

/* Sélection façon tableur, partout où la couche est activée */
table[data-tableur-auto] { user-select: none; }
table[data-tableur-auto] td.selectionnee { background: rgba(124, 107, 255, .14); }
table[data-tableur-auto] td:focus { outline: 2px solid var(--primaire, #7c6bff); outline-offset: -2px; }
table[data-tableur-auto] .modifiable { user-select: text; }

/* Passage à la livraison depuis Leads en attente */
.bandeau-livrer {
  display: flex; align-items: center; justify-content: space-between;
  gap: 18px; flex-wrap: wrap;
  padding: 16px 20px; margin-bottom: var(--gap);
  border: 1px solid rgba(34, 197, 94, .35); border-radius: 14px;
  background: rgba(34, 197, 94, .07);
}
.bandeau-livrer-titre {
  font-family: var(--police-titre, 'Sora', sans-serif);
  font-size: 17px; font-weight: 700; margin-bottom: 2px;
}


/* Compteur de sélection : signale ce qui manque */
.avertissement { color: #b45309; font-weight: 500; }

/* Fournisseur affiché par son nom complet, sans abréviation */
.badge-fournisseur {
  display: inline-block; padding: 3px 10px; border-radius: 999px;
  border: 1px solid var(--bordure, #e2e8f0);
  background: var(--fond-doux, #f8fafc);
  font-size: 12.5px; font-weight: 500; white-space: nowrap;
}

/* Filets entre les commandes : à cette densité, l'œil perd sa ligne */
#grille-commandes tbody tr { border-bottom: 1px solid var(--bordure, #e2e8f0); }
#grille-commandes tbody tr:hover > td { background: rgba(124, 107, 255, .045); }

/* Accordéons et onglets de fiche */
.accordeon { border: 1px solid var(--bordure, #e2e8f0); border-radius: 14px;
             background: #fff; margin-bottom: 12px; overflow: hidden; }
.accordeon > summary {
  list-style: none; cursor: pointer; padding: 14px 18px;
  display: flex; align-items: center; gap: 10px;
  font-family: var(--police-titre, 'Sora', sans-serif);
  font-size: 15px; font-weight: 600; color: var(--encre, #0f1b3d);
}
.accordeon > summary::-webkit-details-marker { display: none; }
.accordeon > summary::after {
  content: '▸'; margin-left: auto; color: var(--muted, #64748b);
  transition: transform .18s ease;
}
.accordeon[open] > summary::after { transform: rotate(90deg); }
.accordeon > summary:hover { background: var(--fond-doux, #f8fafc); }
.accordeon-corps { padding: 4px 18px 18px; }
.accordeon-resume { margin-left: 8px; font-size: 12.5px; font-weight: 500;
                    color: var(--muted, #64748b); }

.onglets-fiche { display: flex; gap: 4px; flex-wrap: wrap;
                 border-bottom: 1px solid var(--bordure, #e2e8f0);
                 margin-bottom: var(--gap); }
.onglets-fiche a {
  padding: 9px 15px; border-radius: 10px 10px 0 0; font-size: 13.5px;
  font-weight: 500; color: var(--muted, #64748b); text-decoration: none;
  border: 1px solid transparent; border-bottom: none;
}
.onglets-fiche a.actif {
  background: #fff; color: var(--encre, #0f1b3d); font-weight: 600;
  border-color: var(--bordure, #e2e8f0); margin-bottom: -1px;
}
.onglets-fiche a:hover:not(.actif) { background: var(--fond-doux, #f8fafc); }

/* Tri : la flèche dit sur quelle colonne et dans quel sens */
.tableau thead th.trie-asc::after  { content: ' ▲'; font-size: 9px; opacity: .8; }
.tableau thead th.trie-desc::after { content: ' ▼'; font-size: 9px; opacity: .8; }
.tableau thead th[title]:hover { background: rgba(255,255,255,.12); }

/* Preneur ayant déjà reçu ce contact : à ne pas resservir */
.option-deja-eu { color: #b45309; }

/* Cellules en lecture seule : le fond dit qu'il ne sert à rien d'y taper */
.tableau td.figee {
  background: rgba(148, 163, 184, .09);
  color: var(--muted, #64748b);
}
.tableau td.figee.selectionnee { background: rgba(148, 163, 184, .2); }
.tableau tbody tr:hover > td.figee { background: rgba(148, 163, 184, .14); }

/* Sélecteur de période d'une fiche : discret, en haut à droite */
.periode-fiche { display: flex; justify-content: flex-end; margin: -6px 0 12px; }
.periode-menu { position: relative; }
.periode-menu > summary {
  list-style: none; cursor: pointer;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 12px; border: 1px solid var(--bordure, #e2e8f0);
  border-radius: 999px; background: #fff;
  font-size: 13px; font-weight: 500; color: var(--encre, #0f1b3d);
}
.periode-menu > summary::-webkit-details-marker { display: none; }
.periode-menu > summary::after { content: '▾'; color: var(--muted, #64748b); }
.periode-menu > summary:hover { background: var(--fond-doux, #f8fafc); }
.periode-panneau {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 30;
  min-width: 230px; padding: 8px;
  background: #fff; border: 1px solid var(--bordure, #e2e8f0);
  border-radius: 12px; box-shadow: 0 12px 32px rgba(15, 27, 61, .14);
}
.periode-choix {
  display: block; padding: 7px 10px; border-radius: 8px;
  font-size: 13px; color: var(--encre, #0f1b3d); text-decoration: none;
}
.periode-choix:hover { background: var(--fond-doux, #f8fafc); }
.periode-choix.actif { background: rgba(124, 107, 255, .1); font-weight: 600; }
.periode-sur-mesure {
  display: grid; grid-template-columns: auto 1fr; gap: 6px 8px;
  align-items: center; margin-top: 8px; padding-top: 10px;
  border-top: 1px solid var(--bordure, #e2e8f0);
  font-size: 12.5px; color: var(--muted, #64748b);
}
.periode-sur-mesure button { grid-column: 1 / -1; justify-content: center; }

/* Fenêtre de détail, ouverte depuis un chiffre du tableau */
.modal-fond {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(15, 27, 61, .45);
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
.modal-fond[hidden] { display: none; }
.modal-boite {
  background: #fff; border-radius: 16px; width: 100%; max-width: 620px;
  max-height: 85vh; overflow: auto;
  box-shadow: 0 24px 60px rgba(15, 27, 61, .3);
}
.modal-tete {
  display: flex; align-items: center; gap: 12px;
  padding: 16px 20px; border-bottom: 1px solid var(--bordure, #e2e8f0);
}
.modal-tete h2 {
  margin: 0; flex: 1; font-size: 16px;
  font-family: var(--police-titre, 'Sora', sans-serif);
}
.modal-corps { padding: 18px 20px 20px; }

/* Chiffre cliquable : il se comporte comme un lien, sans en avoir l'air */
.lien-detail {
  background: none; border: 0; padding: 0; cursor: pointer;
  font: inherit; color: inherit;
  border-bottom: 1px dashed currentColor;
}
.lien-detail:hover { color: var(--violet, #7c6bff); }

/* Champ de mapping à renseigner : le manque se voit sur le champ lui-même */
.champ-manquant .saisie {
  border-color: var(--rouge, #dc2626);
  background: rgba(220, 38, 38, .04);
}
.champ-manquant label { color: var(--rouge, #dc2626); }

/* Action longue en cours : le bouton montre qu'il travaille */
.attente-longue.en-attente {
  opacity: .75;
  cursor: progress;
  position: relative;
  overflow: hidden;
}
.attente-longue.en-attente::after {
  content: '';
  position: absolute; left: 0; bottom: 0; height: 2px; width: 40%;
  background: currentColor; opacity: .8;
  animation: attente-glisse 1.1s ease-in-out infinite;
}
@keyframes attente-glisse {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(300%); }
}

/* Destinataire d'une ligne en erreur : le champ le signale, les autres
   restent neutres pour que le regard aille droit aux problèmes */
.saisie.champ-erreur {
  border-color: var(--rouge, #dc2626);
  background: rgba(220, 38, 38, .05);
}
.saisie.champ-erreur:focus {
  border-color: var(--rouge, #dc2626);
  box-shadow: 0 0 0 3px rgba(220, 38, 38, .14);
}

/* Barre d'avancement sans progression connue : elle va et vient */
.progression-barre.progression-indeterminee {
  width: 35% !important;
  animation: progression-va-et-vient 1.4s ease-in-out infinite;
}
@keyframes progression-va-et-vient {
  0%   { margin-left: 0; }
  50%  { margin-left: 65%; }
  100% { margin-left: 0; }
}

/* Déroulant en place : il remplit la case sans en dessiner une seconde */
select.saisie-en-place {
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  max-width: 100%;
  white-space: nowrap;
  text-overflow: ellipsis;
  padding-right: 14px;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: right 5px center, right 1px center;
  background-size: 4px 4px, 4px 4px;
  background-repeat: no-repeat;
}

/* Colonne des destinataires : largeur stable, texte qui ne déborde pas */
#table-controle .choix-client {
  display: inline-block;
  max-width: 240px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: bottom;
}

/* Codes clients : tableaux denses, la page tenait sur trois écrans */
#page-codes-clients .tableau td { padding-top: 6px; padding-bottom: 6px; }
#page-codes-clients .tableau .saisie-sm { height: 28px; font-size: 12.5px; }
#page-codes-clients .aide { margin-top: 2px; font-size: 11.5px; }

/* Deux dates qui vont ensemble : côte à côte et compactes, jamais l'une
   sous l'autre. `.saisie` étant en largeur pleine, il faut la contraindre. */
.duo-dates {
  display: inline-flex; align-items: center; gap: 6px; flex-wrap: nowrap;
}
.duo-dates .saisie {
  width: 132px; height: 34px; padding: 0 9px; font-size: 13px;
}
.duo-dates .cellule-secondaire { white-space: nowrap; font-size: 12px; }

/* Carte des secteurs */
.enveloppe-carte { position: relative; margin: 0 auto; }
.enveloppe-carte svg {
  display: block;
  width: auto;
  max-width: 100%;
  height: min(62vh, 560px);
  margin: 0 auto;
}
.enveloppe-carte .dep {
  stroke: #fff; stroke-width: 1; cursor: pointer;
  transition: fill .15s ease, opacity .15s ease;
}
.enveloppe-carte .dep:hover { opacity: .78; }
.infobulle-carte {
  position: absolute; z-index: 20; pointer-events: none;
  background: var(--encre, #0f1b3d); color: #fff;
  padding: 7px 10px; border-radius: 8px; font-size: 12.5px; line-height: 1.5;
  box-shadow: 0 10px 26px rgba(15, 27, 61, .22);
}
.legende-carte { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12.5px; }
.legende-carte .pastille {
  display: inline-block; width: 11px; height: 11px;
  border-radius: 3px; margin-right: 4px; vertical-align: -1px;
}

/* Secteurs : saisie à gauche, carte à droite et plus grande */
.secteurs-duo {
  display: grid;
  grid-template-columns: minmax(300px, 400px) 1fr;
  gap: var(--gap, 16px);
  align-items: start;
  margin-bottom: var(--gap, 16px);
}
.secteurs-duo .enveloppe-carte svg { height: min(70vh, 640px); }
@media (max-width: 1100px) {
  .secteurs-duo { grid-template-columns: 1fr; }
}

/* Compteurs et chiffres qui ouvrent le détail des lignes */
.kpi-cliquable { cursor: pointer; transition: box-shadow .15s ease; }
.kpi-cliquable:hover { box-shadow: 0 6px 18px rgba(15, 27, 61, .10); }
.nombre-cliquable {
  cursor: pointer;
  color: var(--violet, #7c6bff);
  font-weight: 600;
  text-decoration: underline dotted;
  text-underline-offset: 3px;
}

/* Six compteurs sur une ligne, qui se replient plutôt que de déborder */
@media (max-width: 1200px) {
  .kpis[style*="repeat(6"] { grid-template-columns: repeat(3, 1fr) !important; }
}
@media (max-width: 700px) {
  .kpis[style*="repeat(6"] { grid-template-columns: repeat(2, 1fr) !important; }
}

/* Bilan d'import : synthèse à gauche, lignes détaillées à droite */
.import-duo {
  display: grid;
  grid-template-columns: minmax(380px, 620px) 1fr;
  gap: var(--gap, 16px);
  align-items: start;
}
.import-duo > .carte[hidden] { display: none; }
@media (max-width: 1250px) {
  .import-duo { grid-template-columns: 1fr; }
}

/* Filtres des leads en attente : une seule ligne, de gauche à droite */
.filtres-attente {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap;
  flex: 1 1 auto;
}
.filtres-attente > * { flex: 0 1 auto; min-width: 0; }
.filtres-attente .saisie-sm { max-width: 170px; }
.filtres-attente label { white-space: nowrap; }
.filtres-attente .btn { white-space: nowrap; }
@media (max-width: 1000px) { .filtres-attente { flex-wrap: wrap; } }

/* Bilan de bascule : fenêtre centrée, lue avant d'agir */
.voile-bilan {
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(15, 27, 61, .45);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
.fenetre-bilan {
  background: var(--surface, #fff);
  border-radius: 14px;
  padding: 22px 24px;
  max-width: 520px; width: 100%;
  max-height: 80vh; overflow: auto;
  box-shadow: 0 24px 60px rgba(15, 27, 61, .28);
}

/* Compteurs filtrants de l'écran fichier importé */
.kpi-cliquable { cursor: pointer; color: inherit; transition: box-shadow .15s ease; }
.kpi-cliquable:hover { box-shadow: 0 6px 18px rgba(15, 27, 61, .10); }
.kpi-actif {
  border-color: var(--violet, #7c6bff);
  box-shadow: 0 0 0 2px rgba(124, 107, 255, .18);
}

/* Facture : le document à gauche, l'édition à droite */
.facture-duo {
  display: grid;
  grid-template-columns: 1fr minmax(280px, 340px);
  gap: var(--gap, 16px);
  align-items: start;
}
.titre-objet {
  color: var(--violet, #7c6bff);
  font-weight: 700;
  letter-spacing: .4px;
  margin-bottom: 6px;
}
.tableau-facture thead th {
  background: var(--violet, #7c6bff);
  color: #fff;
}
.total-ttc {
  display: flex; justify-content: space-between; align-items: center;
  background: rgba(124, 107, 255, .10);
  border-radius: 8px; padding: 10px 14px; margin-top: 8px;
  font-size: 16px;
}
.total-ttc strong { color: var(--violet, #7c6bff); }
.bloc-ligne {
  border: 1px solid var(--border, #e6eaf2);
  border-radius: 8px; padding: 10px; margin-bottom: 8px;
}
@media (max-width: 1100px) { .facture-duo { grid-template-columns: 1fr; } }

/* Cartes de montants à liseré coloré, comme sur l'écran Factures */
.kpi-liseré { border-top: 3px solid var(--liseré, #7c6bff); }
.lien-fort { color: var(--violet, #7c6bff); font-weight: 600; text-decoration: none; }
.lien-fort:hover { text-decoration: underline; }

.ligne-facture { cursor: pointer; }
.ligne-facture:hover { background: var(--fond-survol, #f7f8fc); }

/* Filtres à cases : tout est visible, un clic par choix */
.cases-filtre {
  display: flex; flex-wrap: wrap; gap: 6px;
  padding: 6px 0 2px;
}
.case-filtre {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 11px; border-radius: 999px;
  border: 1px solid var(--border, #e6eaf2);
  background: var(--fond-carte, #fff);
  cursor: pointer; font-size: 13px; user-select: none;
  transition: background .12s, border-color .12s;
}
.case-filtre:hover { border-color: var(--violet, #7c6bff); }
.case-filtre input { margin: 0; cursor: pointer; }
.case-filtre:has(input:checked) {
  background: rgba(124, 107, 255, .12);
  border-color: var(--violet, #7c6bff);
  font-weight: 600;
}

/* Graphe en barres : lecture immédiate de l'évolution hebdomadaire */
.graphe-barres {
  display: flex; align-items: flex-end; gap: 10px;
  height: 200px; padding: 10px 0;
  overflow-x: auto;
}
.graphe-colonne {
  display: flex; flex-direction: column; align-items: center;
  gap: 6px; min-width: 62px; height: 100%;
}
.graphe-valeur { font-size: 11px; color: var(--texte-doux, #5a5f78); }
.graphe-pile {
  flex: 1; width: 100%; display: flex; align-items: flex-end;
  gap: 3px; justify-content: center;
}
.graphe-barre { width: 18px; border-radius: 4px 4px 0 0; min-height: 2px; }
.graphe-ca    { background: rgba(124, 107, 255, .55); }
.graphe-marge { background: #16a34a; }
.graphe-legende { font-size: 11px; font-weight: 600; }
.pastille-ca, .pastille-marge {
  display: inline-block; width: 10px; height: 10px;
  border-radius: 3px; vertical-align: middle;
}
.pastille-ca    { background: rgba(124, 107, 255, .55); }
.pastille-marge { background: #16a34a; }

/* Tableau compact : sur cinquante lignes, chaque pixel de hauteur compte */
.tableau-compact th,
.tableau-compact td {
  padding-top: 6px;
  padding-bottom: 6px;
  font-size: 13px;
}
.tableau-compact .cellule-principale { font-size: 13px; }
.tableau-compact .badge {
  padding: 1px 7px;
  font-size: 11px;
}
.tableau-compact .champ-modifiable { padding: 1px 4px; }

/* Podium fournisseurs : les quatre questions qu'on se pose en arrivant */
.podium-fournisseurs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 12px;
  margin-bottom: var(--gap);
}
.podium-carte {
  display: block; padding: 14px 16px;
  border: 1px solid var(--border, #e6eaf2);
  border-radius: 12px;
  background: var(--fond-carte, #fff);
  text-decoration: none; color: inherit;
  transition: border-color .12s, transform .12s;
}
.podium-carte:hover {
  border-color: var(--violet, #7c6bff);
  transform: translateY(-1px);
}
.podium-titre {
  display: flex; align-items: center; gap: 6px;
  font-size: 12px; color: var(--texte-doux, #5a5f78);
  margin-bottom: 8px;
}
.podium-titre svg { width: 15px; height: 15px; }
.podium-nom { font-size: 17px; font-weight: 700; line-height: 1.2; }
.podium-valeur { font-size: 13px; margin-top: 3px; color: var(--texte-doux, #5a5f78); }
.texte-vert   { color: #16a34a; }
.texte-violet { color: #7c6bff; }

/* Ligne ouvrant une fiche au double-clic */
.ligne-fiche { cursor: default; }
.ligne-fiche:hover { background: rgba(124, 107, 255, .04); }

/* Troisième série du graphe fournisseur : les défauts */
.graphe-defaut { background: #ef4444; }
.pastille-defaut {
  display: inline-block; width: 10px; height: 10px;
  border-radius: 3px; vertical-align: middle; background: #ef4444;
}

/* ---- Graphiques SVG ---------------------------------------------- */
.graphe-svg { width: 100%; height: auto; display: block; overflow: visible; }
.graphe-grille { stroke: var(--border, #e6eaf2); stroke-width: 1; }
.graphe-axe {
  font-size: 11px;
  fill: var(--texte-doux, #8890a8);
  font-family: inherit;
}
.graphe-cadre {
  border: 1px solid var(--border, #e6eaf2);
  border-radius: 14px;
  padding: 16px 18px;
  background: var(--fond-carte, #fff);
}
.graphe-cadre h3 {
  margin: 0 0 2px;
  font-size: 14px;
  font-weight: 700;
}
.graphe-legende-svg {
  display: flex; gap: 16px; flex-wrap: wrap;
  margin-top: 10px; font-size: 12px;
  color: var(--texte-doux, #5a5f78);
}
.graphe-legende-svg span::before {
  content: ''; display: inline-block;
  width: 10px; height: 10px; border-radius: 3px;
  margin-right: 6px; vertical-align: middle;
  background: currentColor;
}

/* ---- Barres horizontales comparatives ---------------------------- */
.barres-h { display: flex; flex-direction: column; gap: 8px; }
.barre-h {
  display: grid;
  grid-template-columns: 120px 1fr 130px;
  gap: 12px; align-items: center;
  padding: 6px 8px; border-radius: 8px;
  text-decoration: none; color: inherit;
  transition: background .12s;
}
a.barre-h:hover { background: rgba(124, 107, 255, .06); }
.barre-h-nom {
  font-weight: 600; font-size: 13px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.barre-h-piste {
  height: 22px; border-radius: 6px;
  background: var(--fond, #f4f6fb);
  overflow: hidden;
}
.barre-h-jauge {
  height: 100%; border-radius: 6px;
  background: linear-gradient(90deg, #7c6bff, #a855f7);
  transition: width .3s;
}
/* Deux barres empilées dans la même piste : la commande en fond, la
   livraison par-dessus. Superposées plutôt que côte à côte, on lit le
   « il manque ça » sans faire de soustraction. */
.barre-h-double { position: relative; }
.barre-h-double .barre-h-jauge { position: absolute; top: 0; left: 0; }
.barre-h-prevu {
  background: var(--bordure, #dfe4f0);
  opacity: .9;
}
.barre-h-fait { background: linear-gradient(90deg, #16a34a, #4ade80); }

.barre-h-valeur { font-size: 13px; font-weight: 600; text-align: right; }
.barre-h-detail {
  display: block; font-size: 11px; font-weight: 400;
  color: var(--texte-doux, #8890a8);
}

/* ==== Cockpit Stats & rapports ==================================== */
.cockpit-tete {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 20px; flex-wrap: wrap; margin-bottom: 14px;
}
.cockpit-tete h1 { margin: 2px 0 4px; font-size: 26px; font-weight: 700; }
.cockpit-tete p { margin: 0; }
.eyebrow {
  font-size: 11px; text-transform: uppercase; letter-spacing: .09em;
  color: var(--violet, #7c6bff); font-weight: 700; margin: 0;
}
.cockpit-periode { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }

/* Cartes de tête */
.cockpit-hero {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 14px; margin-bottom: var(--gap);
}
.hero-carte {
  padding: 18px 20px; border-radius: 16px;
  border: 1px solid var(--border, #e6eaf2);
  background: var(--fond-carte, #fff);
}
.hero-principale {
  background: linear-gradient(135deg, rgba(124,107,255,.10), rgba(168,85,247,.05));
  border-color: rgba(124, 107, 255, .32);
}
.hero-haut {
  display: flex; justify-content: space-between; align-items: center;
  gap: 10px; margin-bottom: 10px;
}
.hero-etiquette {
  display: flex; align-items: center; gap: 7px;
  font-size: 12px; color: var(--texte-doux, #5a5f78); font-weight: 600;
}
.hero-etiquette i {
  width: 8px; height: 8px; border-radius: 50%; display: inline-block;
}
.pt-bleu { background: #3b82f6; } .pt-vert { background: #16a34a; }
.pt-violet { background: #7c6bff; } .pt-orange { background: #f59e0b; }
.hero-carte strong {
  display: block; font-size: 30px; font-weight: 700; line-height: 1.1;
  letter-spacing: -.02em;
}
.hero-carte small {
  display: block; margin-top: 8px;
  font-size: 12px; color: var(--texte-doux, #8890a8);
}
.hero-double { display: flex; gap: 22px; margin-top: 12px; }
.hero-double span { display: flex; flex-direction: column; }
.hero-double b { font-size: 15px; font-weight: 700; }
.hero-double small { margin: 0; font-size: 11px; }

.tend {
  font-size: 12px; font-weight: 700; font-style: normal;
  padding: 3px 8px; border-radius: 20px; white-space: nowrap;
}
.tend.bon { background: rgba(22,163,74,.12); color: #16a34a; }
.tend.mauvais { background: rgba(220,38,38,.10); color: #dc2626; }
.tend.neutre { background: var(--fond, #f4f6fb); color: #8890a8; }

/* Anneau du taux de livraison */
.hero-anneau { display: flex; align-items: center; gap: 14px; }
.anneau { width: 62px; height: 62px; flex: none; }
.anneau-fond { fill: none; stroke: var(--fond, #eef1f7); stroke-width: 7; }
.anneau-jauge {
  fill: none; stroke: #7c6bff; stroke-width: 7; stroke-linecap: round;
}

/* Blocs */
.cockpit-bloc { margin-bottom: var(--gap); }
.bloc-tete {
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: 14px; flex-wrap: wrap; margin-bottom: 12px;
}
.bloc-tete h2 { margin: 3px 0 0; font-size: 17px; font-weight: 700; }

/* Flux */
.flux-grille {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
}
.flux-grille article {
  padding: 15px 17px; border-radius: 13px;
  border: 1px solid var(--border, #e6eaf2);
  background: var(--fond-carte, #fff);
}
.flux-grille article.alerte { border-color: rgba(245,158,11,.42); }
.flux-grille span {
  display: block; font-size: 12px; color: var(--texte-doux, #5a5f78);
  margin-bottom: 5px;
}
.flux-grille strong {
  display: block; font-size: 25px; font-weight: 700; line-height: 1.1;
  margin-bottom: 6px;
}

/* Alertes */
.alerte-grille {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 12px;
}
.alerte-carte {
  display: flex; align-items: center; gap: 13px;
  padding: 14px 16px; border-radius: 13px;
  border: 1px solid var(--border, #e6eaf2);
  background: var(--fond-carte, #fff);
  text-decoration: none; color: inherit;
  transition: transform .12s, border-color .12s;
}
.alerte-carte:hover { transform: translateY(-1px); }
.alerte-carte > span:nth-child(2) { flex: 1; display: flex; flex-direction: column; }
.alerte-carte small { font-size: 11.5px; color: var(--texte-doux, #5a5f78); }
.alerte-carte strong { font-size: 22px; font-weight: 700; line-height: 1.15; }
.alerte-carte em { font-size: 11.5px; font-style: normal; color: var(--texte-doux, #8890a8); }
.alerte-carte b { font-size: 17px; color: var(--texte-doux, #b6bccd); }
.alerte-signe {
  width: 30px; height: 30px; border-radius: 9px; flex: none;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 15px;
}
.alerte-carte.rouge .alerte-signe { background: rgba(220,38,38,.12); color: #dc2626; }
.alerte-carte.rouge:hover { border-color: rgba(220,38,38,.45); }
.alerte-carte.orange .alerte-signe { background: rgba(245,158,11,.14); color: #b45309; }
.alerte-carte.orange:hover { border-color: rgba(245,158,11,.5); }
.alerte-carte.violet .alerte-signe { background: rgba(124,107,255,.13); color: #7c6bff; }
.alerte-carte.violet:hover { border-color: rgba(124,107,255,.5); }

/* Deux tableaux côte à côte */
.duo-grille {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(370px, 1fr));
  gap: var(--gap); align-items: start;
}
.rang {
  display: inline-flex; align-items: center; justify-content: center;
  width: 19px; height: 19px; border-radius: 6px; margin-right: 8px;
  background: var(--fond, #f4f6fb); color: var(--texte-doux, #5a5f78);
  font-size: 11px; font-weight: 700;
}

/* Qualité */
.qualite-grille {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 11px;
}
.qualite-grille article {
  padding: 13px 15px; border-radius: 12px;
  border: 1px solid var(--border, #e6eaf2);
  background: var(--fond-carte, #fff);
}
.qualite-grille article.positif {
  background: rgba(22,163,74,.06);
  border-color: rgba(22,163,74,.28);
}
.qualite-grille span {
  display: block; font-size: 11.5px; color: var(--texte-doux, #5a5f78);
}
.qualite-grille strong { display: block; font-size: 21px; font-weight: 700; }
.qualite-grille em {
  font-size: 11.5px; font-style: normal; color: var(--texte-doux, #8890a8);
}

/* Logo : l'image doit garder ses proportions quelle que soit la taille */
.logo-glyphe { object-fit: contain; display: block; }
.logo-complet { width: auto; max-width: 190px; display: block; }

/* Défauts d'un lot livré : ce que le client a reçu de défectueux */
.defaut-bandeau {
  display: flex; gap: 22px; align-items: center; flex-wrap: wrap;
  padding: 12px 16px; margin-bottom: 14px;
  border-radius: 12px; border: 1px solid var(--border, #e6eaf2);
  background: var(--fond, #f7f8fc);
}
.defaut-bandeau.alerte {
  border-color: rgba(220,38,38,.35);
  background: rgba(220,38,38,.04);
}
.defaut-resume { display: flex; flex-direction: column; }
.defaut-resume span { font-size: 11.5px; color: var(--texte-doux, #5a5f78); }
.defaut-resume strong { font-size: 22px; font-weight: 700; line-height: 1.15; }

/* Le « dont défauts » cliquable garde l'allure du chiffre voisin : c'est le
   même bloc, il mène simplement quelque part. */
button.defaut-resume {
  background: none;
  border: 0;
  padding: 2px 6px;
  margin: -2px -6px;
  text-align: left;
  font: inherit;
  cursor: pointer;
  border-radius: 8px;
}
button.defaut-resume:hover,
button.defaut-resume:focus-visible {
  background: var(--fond-doux, #f6f8fc);
  outline: none;
}
button.defaut-resume span { text-decoration: underline dotted; }
.defaut-resume em {
  font-size: 11.5px; font-style: normal; color: var(--texte-doux, #8890a8);
}
.defaut-cases { display: flex; gap: 8px; flex-wrap: wrap; margin-left: auto; }
.defaut-case {
  padding: 6px 11px; border-radius: 8px;
  background: var(--fond-carte, #fff);
  border: 1px solid var(--border, #e6eaf2);
}
.defaut-case span {
  display: block; font-size: 10.5px; color: var(--texte-doux, #5a5f78);
}
.defaut-case strong { font-size: 15px; font-weight: 700; }

/* Axes du graphe : plus francs que la grille */
.graphe-axe-trait { stroke: #c9cfdd; stroke-width: 1.2; }

/* Le graphe ne dépasse pas une hauteur raisonnable, même sur grand écran */
.graphe-cadre .graphe-svg { max-height: 150px; }

/* ==== Bilan des livraisons ======================================== */
.bilan-tete {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 12px; margin-bottom: 6px;
}
.bilan-chiffre {
  padding: 13px 16px; border-radius: 12px;
  border: 1px solid var(--border, #e6eaf2);
  background: var(--fond, #f7f8fc);
}
.bilan-chiffre span {
  display: block; font-size: 11.5px;
  color: var(--texte-doux, #5a5f78); margin-bottom: 3px;
}
.bilan-chiffre strong { font-size: 25px; font-weight: 700; line-height: 1.1; }

.bilan-defauts { display: flex; gap: 9px; flex-wrap: wrap; margin-bottom: 4px; }
.bilan-defaut {
  padding: 8px 13px; border-radius: 9px;
  border: 1px solid var(--border, #e6eaf2);
  background: var(--fond-carte, #fff);
  min-width: 92px;
}
.bilan-defaut span {
  display: block; font-size: 10.5px; color: var(--texte-doux, #5a5f78);
}
.bilan-defaut strong { font-size: 17px; font-weight: 700; }
.bilan-defaut em {
  font-size: 10.5px; font-style: normal;
  color: var(--texte-doux, #8890a8); margin-left: 5px;
}

.bilan-table { margin-bottom: 4px; }
.bilan-jauge {
  height: 7px; border-radius: 4px; overflow: hidden;
  background: var(--fond, #eef1f7); margin-bottom: 3px;
}
.bilan-jauge i {
  display: block; height: 100%; border-radius: 4px;
  background: linear-gradient(90deg, #7c6bff, #a855f7);
}

.bilan-jours {
  display: flex; gap: 8px; align-items: flex-end;
  height: 96px; padding: 6px 2px 0;
}
.bilan-jour {
  flex: 1; display: flex; flex-direction: column;
  align-items: center; justify-content: flex-end; height: 100%;
}
.bilan-jour b { font-size: 11px; font-weight: 700; margin-bottom: 3px; }
.bilan-jour i {
  width: 100%; max-width: 30px; border-radius: 4px 4px 0 0;
  background: linear-gradient(180deg, #7c6bff, #a5b0ff);
  min-height: 3px;
}
.bilan-jour small {
  font-size: 10px; color: var(--texte-doux, #8890a8); margin-top: 4px;
}

/* Repère de retard sur une journée */
.repere-retard {
  display: inline-flex; align-items: center; justify-content: center;
  width: 15px; height: 15px; margin-left: 4px;
  border-radius: 50%; background: rgba(245,158,11,.18);
  color: #b45309; font-size: 10px; font-weight: 800;
  vertical-align: middle; cursor: help;
}

/* Réglage du rythme attendu */
.seuils-menu { position: relative; }
.seuils-menu summary { list-style: none; cursor: pointer; }
.seuils-menu summary::-webkit-details-marker { display: none; }
.seuils-panneau {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 40;
  width: 230px; padding: 14px 16px;
  border-radius: 12px; border: 1px solid var(--border, #e6eaf2);
  background: var(--fond-carte, #fff);
  box-shadow: 0 12px 32px rgba(20, 24, 44, .13);
}
.seuil-ligne {
  display: grid; grid-template-columns: 1fr 62px 14px;
  gap: 8px; align-items: center; margin-bottom: 6px;
  font-size: 12.5px;
}
.seuil-ligne em {
  font-style: normal; font-size: 11.5px; color: var(--texte-doux, #8890a8);
}

/* Bouton d'action aboutie : la livraison au client */
.btn-vert {
  background: linear-gradient(135deg, #16a34a, #22c55e);
  border-color: #16a34a;
  color: #fff;
}
.btn-vert:hover { background: linear-gradient(135deg, #15803d, #16a34a); }
.btn-vert svg { stroke: currentColor; }

/* Bloc économie : la marge positive se repère d'un coup d'œil */
.flux-grille article.positif {
  border-color: rgba(22,163,74,.32);
  background: rgba(22,163,74,.05);
}

/* Destinations multiples d'un code court */
.pile-destinations { display: flex; flex-direction: column; gap: 4px; }
.rang-destination { display: flex; gap: 4px; align-items: center; }
.rang-destination [data-retirer] {
  padding: 0 8px; line-height: 1; font-size: 15px; height: 32px;
}

/* Une ligne sans destination : ses leads ne partiront nulle part */
.ligne-alerte { background: rgba(245,158,11,.06); }

/* Retour d'enregistrement automatique */
.etat-enreg {
  font-size: 11.5px; align-self: center; min-width: 62px;
  color: var(--texte-doux, #8890a8);
}
.etat-enreg.ok { color: #16a34a; }
.etat-enreg.erreur { color: #dc2626; font-weight: 600; }

/* Vue destinations : lignes serrées, on y repère plus qu'on n'y lit */
.tableau-compact .rang-destination { margin-bottom: 2px; gap: 3px; }
.tableau-compact .pile-destinations { gap: 1px; }
.tableau-compact td { padding: 4px 8px; vertical-align: middle; }
.tableau-compact .rang-destination .btn { height: 22px; padding: 0 5px; font-size: 10px; }
.tableau-compact .cellule-principale,
.tableau-compact .cellule-secondaire { font-size: 11.5px; }

/* ==================================================================
   RAPPORT — Stats & rapports
   ==================================================================
   Une page qu'on lit de haut en bas et qu'on imprime. Trois principes :
   une seule graisse forte par bloc, les chiffres alignés sur une
   tabulaire, et l'écart encodé visuellement (barre, jauge) plutôt que
   laissé à la lecture du nombre.
   ------------------------------------------------------------------ */

.rapport { --rapport-gap: 22px; }

/* En-tête : le titre porte, les outils s'effacent */
.rapport-tete {
  display: flex; flex-wrap: wrap; gap: 16px;
  align-items: flex-end; justify-content: space-between;
  padding-bottom: 16px; margin-bottom: var(--rapport-gap);
  border-bottom: 1px solid var(--border, #E6EAF2);
}
.rapport-titre h1 {
  margin: 2px 0 6px; font-size: 27px; font-weight: 700; letter-spacing: -.02em;
  font-family: var(--police-titre, system-ui);
}
.rapport-periode-lue { margin: 0; font-size: 13px; color: var(--muted, #6B7A99); }
.rapport-periode-lue strong { color: var(--texte, #0F1B3D); font-weight: 650; }
.rapport-periode-lue span::before { content: ' · '; }

.rapport-outils { display: flex; flex-direction: column; gap: 8px; align-items: flex-end; }
.rapport-raccourcis { display: flex; gap: 6px; flex-wrap: wrap; }
.rapport-dates { display: flex; gap: 6px; align-items: center; margin: 0; }
.rapport-dates .saisie { width: 138px; }
.rapport-dates span { color: var(--muted-clair, #94A2BD); }

.rapport-bloc { margin-bottom: var(--rapport-gap); }

/* Note discrète sous un chiffre de tête : dit le périmètre exact */
.hero-note {
  margin-top: 8px; font-size: 10.5px; color: var(--muted-clair, #94A2BD);
}

/* Phrase de lecture sous un graphique : le graphe montre, la phrase dit */
.rapport-lecture {
  margin: 10px 0 0; padding: 10px 14px;
  background: var(--surface-alt, #FAFBFE);
  border: 1px solid var(--border, #E6EAF2);
  border-radius: var(--r-md, 10px);
  font-size: 12.5px; color: var(--texte-doux, #46557A);
}
.rapport-lecture strong { color: var(--texte, #0F1B3D); }

/* Légende de courbe, alignée à droite du titre de bloc */
.bloc-tete .graphe-legende {
  display: flex; gap: 14px; flex-wrap: wrap; align-items: center;
  font-size: 11.5px; color: var(--texte-doux, #46557A);
}
.bloc-tete .graphe-legende span { display: inline-flex; align-items: center; gap: 6px; }
.bloc-tete .graphe-legende i {
  width: 10px; height: 10px; border-radius: 3px; display: inline-block;
}

/* ------------------------------------------------------------------
   Panneau : une mesure unique, sa décomposition, sa lecture
   ------------------------------------------------------------------ */
.panneau {
  display: flex; flex-direction: column;
  background: var(--surface, #fff);
  border: 1px solid var(--border, #E6EAF2);
  border-radius: var(--r-lg, 14px);
  box-shadow: var(--ombre-1);
  overflow: hidden;
}
.panneau-tete {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 18px 0;
}
.panneau-tete h3 {
  margin: 0; font-size: 14px; font-weight: 650;
  font-family: var(--police-titre, system-ui);
}
.panneau-chiffre {
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
  padding: 12px 18px 14px;
}
.panneau-chiffre strong {
  font-size: 30px; font-weight: 700; line-height: 1;
  letter-spacing: -.02em; font-variant-numeric: tabular-nums;
}
.panneau-chiffre span { font-size: 12.5px; color: var(--muted, #6B7A99); }
.panneau-chiffre b { color: var(--texte, #0F1B3D); font-weight: 650; }
.panneau-pied {
  margin: auto 0 0; padding: 11px 18px;
  border-top: 1px solid var(--border, #E6EAF2);
  background: var(--surface-alt, #FAFBFE);
  font-size: 11.5px; color: var(--muted, #6B7A99);
}
.panneau-pied strong { color: var(--texte-doux, #46557A); }

/* ------------------------------------------------------------------
   Liste à barres : la largeur porte la comparaison, pas le nombre
   ------------------------------------------------------------------ */
.barres-liste { list-style: none; margin: 0; padding: 0 18px 4px; }
.barres-liste li {
  display: grid;
  grid-template-columns: minmax(96px, 1.1fr) minmax(60px, 2fr) auto auto;
  align-items: center; gap: 10px;
  padding: 7px 0;
  border-bottom: 1px solid var(--border, #E6EAF2);
}
.barres-liste li:last-child { border-bottom: 0; }
.barre-nom { font-size: 12.5px; color: var(--texte-doux, #46557A); }
.barre-piste {
  height: 8px; border-radius: var(--r-full, 999px);
  background: var(--bg, #F6F8FC); overflow: hidden;
}
.barre-piste i {
  display: block; height: 100%; border-radius: inherit;
  min-width: 2px; transition: width .25s ease;
}
.barre-piste .ton-ok        { background: var(--succes, #16A34A); }
.barre-piste .ton-attention { background: var(--alerte, #F59E0B); }
.barre-piste .ton-danger    { background: var(--danger, #EF4444); }
.barre-piste .ton-neutre    { background: var(--muted-clair, #94A2BD); }
.barre-val {
  font-size: 13px; font-weight: 650; text-align: right;
  font-variant-numeric: tabular-nums; min-width: 62px;
}
.barre-detail {
  font-size: 11px; color: var(--muted, #6B7A99); text-align: right;
  font-variant-numeric: tabular-nums; min-width: 62px;
}

/* ------------------------------------------------------------------
   Tableaux du rapport : chiffres tabulaires, total détaché
   ------------------------------------------------------------------ */
.tableau-rapport td.num,
.tableau-rapport th.droite { font-variant-numeric: tabular-nums; }
.tableau-rapport tbody tr.ligne-total > td {
  border-top: 2px solid var(--border-fort, #D6DDEA);
  background: var(--surface-alt, #FAFBFE);
}
.tableau-rapport .cellule-secondaire { display: block; font-size: 11px; }

/* Jauge dans une cellule : le taux se voit avant d'être lu */
.jauge-cellule {
  display: inline-flex; flex-direction: column; align-items: flex-end;
  gap: 4px; min-width: 72px;
}
.jauge-cellule .jauge-piste {
  display: block; align-self: stretch;
  height: 4px; border-radius: var(--r-full, 999px);
  background: var(--bg, #F6F8FC); overflow: hidden;
}
.jauge-cellule .jauge-piste i {
  display: block; height: 100%; min-width: 2px;
  border-radius: inherit; background: var(--accent, #2563EB); opacity: .6;
}

/* Étiquette de risque : la concentration du portefeuille */
.etiquette-risque {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 5px 11px; border-radius: var(--r-full, 999px);
  background: var(--surface-alt, #FAFBFE);
  border: 1px solid var(--border, #E6EAF2);
  font-size: 11.5px; color: var(--texte-doux, #46557A); white-space: nowrap;
}
.etiquette-risque strong { color: var(--texte, #0F1B3D); font-weight: 700; }
.etiquette-risque.alerte {
  background: var(--alerte-soft, #FEF1E0);
  border-color: rgba(245, 158, 11, .38);
  color: #9A6300;
}
.etiquette-risque.alerte strong { color: #7A4E00; }

.rapport-pied {
  margin: 6px 0 0; padding-top: 14px;
  border-top: 1px solid var(--border, #E6EAF2);
  font-size: 11px; color: var(--muted-clair, #94A2BD); text-align: right;
}

@media (max-width: 900px) {
  .rapport-tete { align-items: flex-start; }
  .rapport-outils { align-items: flex-start; width: 100%; }
  .rapport-dates .saisie { width: 100%; }
  .barres-liste li { grid-template-columns: 1fr auto; row-gap: 4px; }
  .barres-liste .barre-piste { grid-column: 1 / -1; }
}

/* ==================================================================
   IMPRESSION — le rapport devient un document
   ==================================================================
   Ctrl+P doit donner quelque chose qu'on envoie à un associé : pas de
   navigation, pas de boutons, pas de blocs coupés en deux.
   ------------------------------------------------------------------ */
@media print {
  @page { size: A4; margin: 12mm 10mm; }

  body { background: #fff; }
  .rapport { --rapport-gap: 14px; }

  /* Ni navigation, ni boutons : un document, pas une interface. */
  .rapport-outils,
  .rapport .bloc-tete .btn,
  .rapport .carte-tete .btn,
  .rapport-bloc .btn { display: none !important; }

  .rapport-tete { border-bottom: 2px solid #333; }
  .rapport-titre h1 { font-size: 20px; }
  .rapport-titre { max-width: 100%; }

  /* Les cartes et les lignes ne se coupent pas ; les sections, si.
     Protéger la section entière laissait des pages à moitié vides. */
  .rapport-bloc { break-inside: auto; page-break-inside: auto; }
  .rapport .panneau,
  .rapport .hero-carte,
  .rapport .alerte-carte,
  .rapport .flux-grille article { break-inside: avoid; page-break-inside: avoid; }
  .rapport .tableau-enveloppe { break-inside: auto; }
  /* À l'écran, les longues listes défilent dans leur cadre ; sur papier,
     un cadre qui défile ne montre qu'un écran de lignes. On rend la
     hauteur au tableau, la pagination fait le reste. */
  .rapport .tableau-defilement {
    max-height: none !important; overflow: visible !important;
  }
  .rapport .tableau thead { display: table-header-group; }
  .rapport .tableau tr { break-inside: avoid; }

  /* Les aplats coûtent de l'encre et passent mal en niveaux de gris :
     on garde la structure, on allège la couleur. */
  .rapport .hero-carte,
  .rapport .panneau,
  .rapport .tableau-enveloppe,
  .rapport .flux-grille article,
  .rapport .qualite-grille article,
  .rapport .alerte-carte {
    box-shadow: none !important;
    border: 1px solid #bbb !important;
    background: #fff !important;
  }
  .rapport-lecture { background: #fff !important; }
  .rapport .barre-piste { border: 1px solid #ddd; }
  .rapport .barre-piste i,
  .rapport .jauge-piste i {
    print-color-adjust: exact; -webkit-print-color-adjust: exact;
  }

  /* Une feuille A4 fait ~190 mm de large : les media queries « mobile »
     s'y déclenchent et casseraient les grilles en une seule colonne. */
  .rapport .cockpit-hero   { grid-template-columns: repeat(4, 1fr) !important; gap: 8px; }
  .rapport .duo-grille     { grid-template-columns: 1fr 1fr !important; gap: 8px; }
  .rapport .flux-grille    { grid-template-columns: repeat(4, 1fr) !important; gap: 8px; }
  .rapport .qualite-grille { grid-template-columns: repeat(5, 1fr) !important; gap: 8px; }
  .rapport .alerte-grille  { grid-template-columns: repeat(2, 1fr) !important; gap: 8px; }

  .rapport .barres-liste {
    padding-left: 14px; padding-right: 14px;
  }
  .rapport .barres-liste li {
    grid-template-columns: minmax(70px, 1fr) minmax(50px, 1.6fr) auto auto !important;
    row-gap: 0 !important; padding: 4px 0;
  }
  .rapport .barres-liste .barre-piste { grid-column: auto !important; height: 6px; }
  .rapport .barre-nom    { font-size: 10px; }
  .rapport .barre-val    { font-size: 10.5px; min-width: 48px; }
  .rapport .barre-detail { font-size: 9px; min-width: 44px; }

  /* Quatre cartes sur 190 mm : la typo doit descendre, sinon les
     valeurs passent à la ligne au milieu d'un nombre. */
  .rapport .hero-carte { padding: 10px 12px; }
  .rapport .hero-carte strong { font-size: 17px; }
  .rapport .hero-anneau strong { font-size: 17px !important; }
  .rapport .hero-anneau { gap: 8px; }
  .rapport .hero-anneau .anneau { width: 38px; height: 38px; }
  .rapport .hero-haut { gap: 6px; }
  .rapport .hero-etiquette { font-size: 9.5px; }
  .rapport .hero-carte small,
  .rapport .hero-double small { font-size: 8.5px; }
  .rapport .hero-double { gap: 10px; }
  .rapport .hero-double b { font-size: 11px; }
  .rapport .tend { font-size: 9px; padding: 1px 5px; }
  .rapport .hero-note { font-size: 8.5px; margin-top: 5px; }

  .rapport .panneau-chiffre { padding: 8px 14px 10px; }
  .rapport .panneau-chiffre strong { font-size: 20px; }
  .rapport .panneau-tete h3 { font-size: 12px; }
  .rapport .panneau-pied { font-size: 9.5px; padding: 8px 14px; }
  .rapport .bloc-tete h2 { font-size: 15px; }
  .rapport .tableau,
  .rapport .tableau-compact td,
  .rapport .tableau-compact th { font-size: 10px; }

  .rapport-pied { display: block; }
}

/* ------------------------------------------------------------------
   Correctifs d'affichage relevés en relisant le rapport rendu
   ------------------------------------------------------------------ */

/* La courbe était bridée à 150 px de haut par une règle pensée pour les
   petits histogrammes : sur un viewBox 720×268 elle se retrouvait
   encadrée de vide des deux côtés. Dans le rapport elle prend sa
   proportion naturelle et toute la largeur, à l'écran comme au papier. */
.rapport .graphe-cadre .graphe-svg { max-height: none; }

/* .alerte est aussi la classe des bandeaux de message, en display:flex.
   Appliquée à une carte de la grille de flux, elle mettait le libellé et
   le chiffre côte à côte au lieu de les empiler. */
.flux-grille article.alerte { display: block; margin-bottom: 0; }

/* ==================================================================
   PLAN DE TRAVAIL — Dashboard
   ==================================================================
   Une liste d'actions, pas un tableau de chiffres. Chaque ligne se lit
   en un regard : ce qu'il faut faire, combien il en reste, où cliquer.
   Une ligne réglée reste visible mais s'efface — on doit voir que le
   travail est fait, pas croire qu'il n'existait pas.
   ------------------------------------------------------------------ */

.plan-barre {
  display: flex; flex-wrap: wrap; gap: 16px;
  align-items: center; justify-content: space-between;
  padding: 16px 20px; margin-bottom: 14px;
  background: var(--surface, #fff);
  border: 1px solid var(--border, #E6EAF2);
  border-radius: var(--r-lg, 14px);
  box-shadow: var(--ombre-1);
}
.plan-barre h2 {
  margin: 2px 0 3px; font-size: 20px; font-weight: 700; letter-spacing: -.01em;
  font-family: var(--police-titre, system-ui);
}
.plan-barre small { font-size: 12px; color: var(--muted, #6B7A99); }

.plan-avancement { display: flex; flex-direction: column; gap: 6px; min-width: 190px; }
.plan-avancement > span:first-child {
  font-size: 12px; font-weight: 650; color: var(--texte-doux, #46557A);
  text-align: right; font-variant-numeric: tabular-nums;
}
.plan-piste {
  display: block; height: 8px; border-radius: var(--r-full, 999px);
  background: var(--bg, #F6F8FC); overflow: hidden;
}
.plan-piste i {
  display: block; height: 100%; border-radius: inherit; min-width: 3px;
  background: var(--succes, #16A34A); transition: width .3s ease;
}

.plan-colonnes {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
  gap: 14px; align-items: start;
}

.plan-section {
  background: var(--surface, #fff);
  border: 1px solid var(--border, #E6EAF2);
  border-radius: var(--r-lg, 14px);
  box-shadow: var(--ombre-1);
  overflow: hidden;
}
.plan-tete {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border, #E6EAF2);
  background: var(--surface-alt, #FAFBFE);
}
.plan-titre { display: flex; align-items: center; gap: 11px; min-width: 0; }
.plan-titre svg { width: 19px; height: 19px; color: var(--accent, #2563EB); flex-shrink: 0; }
.plan-titre h2 {
  margin: 0; font-size: 14.5px; font-weight: 700;
  font-family: var(--police-titre, system-ui);
}
.plan-titre small { font-size: 11.5px; color: var(--muted, #6B7A99); }
.plan-compte {
  flex-shrink: 0; padding: 4px 10px; border-radius: var(--r-full, 999px);
  background: var(--accent-soft, #E6EEFE); color: var(--accent-700, #1E40AF);
  font-size: 11px; font-weight: 700; white-space: nowrap;
}
.plan-compte.fini { background: var(--succes-soft, #E3F6EC); color: #15803D; }

.plan-liste { list-style: none; margin: 0; padding: 0; }
.plan-liste li { border-bottom: 1px solid var(--border, #E6EAF2); }
.plan-liste li:last-child { border-bottom: 0; }
.plan-liste a {
  display: grid; grid-template-columns: 22px 1fr auto 14px;
  align-items: center; gap: 11px;
  padding: 11px 16px; color: inherit; text-decoration: none;
  transition: background .12s ease;
}
.plan-liste a:hover { background: var(--surface-alt, #FAFBFE); }

/* La puce porte la gravité : c'est le seul endroit coloré de la ligne,
   pour qu'un balayage de l'œil suffise à trier. */
.plan-puce {
  display: flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: var(--r-full, 999px);
  font-size: 12px; font-weight: 800; line-height: 1;
}
.plan-liste .ton-danger    .plan-puce { background: var(--danger-soft, #FDE9E9); color: #DC2626; }
.plan-liste .ton-attention .plan-puce { background: var(--alerte-soft, #FEF1E0); color: #B45309; }
.plan-liste .ton-info      .plan-puce { background: var(--accent-soft, #E6EEFE); color: var(--accent-700, #1E40AF); }
.plan-liste .fait          .plan-puce { background: var(--succes-soft, #E3F6EC); color: #15803D; }

.plan-corps { min-width: 0; }
.plan-corps strong {
  display: block; font-size: 13.5px; font-weight: 600; line-height: 1.3;
  color: var(--texte, #0F1B3D);
}
.plan-corps em {
  display: block; margin-top: 2px; font-size: 11.5px; font-style: normal;
  color: var(--muted, #6B7A99);
}

.plan-nb { text-align: right; font-variant-numeric: tabular-nums; }
.plan-nb b {
  display: block; font-size: 18px; font-weight: 700; line-height: 1;
  font-family: var(--police-titre, system-ui);
}
.plan-nb i {
  display: block; margin-top: 2px; font-size: 10px; font-style: normal;
  color: var(--muted-clair, #94A2BD);
}
.plan-liste .ton-danger .plan-nb b { color: #DC2626; }

.plan-fleche { color: var(--muted-clair, #94A2BD); font-size: 13px; }

/* Une action sans quantité : le mot remplace le chiffre. */
.plan-nb b.plan-afaire {
  font-size: 12px; font-weight: 700; letter-spacing: .01em;
  color: var(--accent-700, #1E40AF); white-space: nowrap;
}

/* Réglé : la ligne reste lisible mais recule d'un plan. */
.plan-liste .fait { background: rgba(22, 163, 74, .035); }
.plan-liste .fait .plan-corps strong { color: var(--muted, #6B7A99); font-weight: 500; }
.plan-liste .fait .plan-corps em { color: var(--muted-clair, #94A2BD); }
.plan-liste .fait .plan-nb b { font-size: 12px; color: #15803D; letter-spacing: .04em; }

/* Stock rapide, sous le plan */
.stock-rapide {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 12px 20px;
}
.stock-ligne {
  display: flex; align-items: center; gap: 11px;
  color: inherit; text-decoration: none;
}
.stock-ligne > div { flex: 1; min-width: 0; }
.stock-nb {
  font-family: var(--police-titre, system-ui); font-weight: 800; font-size: 19px;
  font-variant-numeric: tabular-nums;
}
.stock-alerte {
  padding: 8px 10px; border-radius: var(--r-md, 10px);
  background: var(--alerte-soft, #FEF1E0);
}

@media (max-width: 700px) {
  .plan-barre { align-items: flex-start; }
  .plan-avancement { width: 100%; min-width: 0; }
  .plan-liste a { grid-template-columns: 22px 1fr auto; }
  .plan-fleche { display: none; }
}

/* ------------------------------------------------------------------
   Boutons désactivés
   ------------------------------------------------------------------
   .btn n'avait aucun style pour l'état disabled : un bouton inactif
   gardait exactement l'allure d'un bouton cliquable. On le voyait sur
   « Livrer à mes clients » bloqué tant que la répartition n'est pas
   calibrée, mais aussi sur « Vérifier et passer en prêt à envoyer ».
   Le curseur et l'opacité disent maintenant ce que le clic ne fait pas.
   ------------------------------------------------------------------ */
.btn:disabled,
.btn[disabled],
.btn[aria-disabled="true"] {
  opacity: .45;
  cursor: not-allowed;
  box-shadow: none;
  filter: grayscale(.35);
}
.btn:disabled:hover,
.btn[disabled]:hover {
  transform: none;
  filter: grayscale(.35);
}

/* Nombre livré corrigé à la main : la case reste lisible comme un chiffre,
   mais se distingue du décompte automatique — sans quoi on ne saurait plus,
   trois jours après, lequel des deux on regarde. */
.case-jour {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 3px;
  min-width: 26px;
  padding: 1px 4px;
  border-radius: 6px;
  border: 1px dashed transparent;
}
.case-jour:hover {
  border-color: var(--bordure, #e2e8f0);
  background: var(--fond-doux, #f6f8fc);
}

/* Le crayon ne se montre qu'au survol de sa case : sept colonnes de jours
   toutes crayonnées feraient un tableau illisible. Il reste atteignable au
   clavier — la tabulation le fait apparaître comme le survol. */
.crayon-jour {
  background: none;
  border: 0;
  padding: 0 1px;
  cursor: pointer;
  font-size: 11px;
  line-height: 1;
  color: var(--texte-doux, #94a3b8);
  opacity: 0;
  transition: opacity .12s;
}
.case-jour:hover .crayon-jour,
.crayon-jour:focus-visible { opacity: 1; }
.crayon-jour:hover { color: var(--violet, #7c6bff); }
.case-jour.valeur-saisie .crayon-jour { opacity: .6; }

/* Même discrétion pour le bouton qui copie les défauts d'une ligne : il vit
   dans sa cellule, pas dans une case de jour, et se montre au survol de
   celle-ci. */
td:hover > [data-copier-defauts],
[data-copier-defauts]:focus-visible { opacity: 1; }
.case-vide { color: var(--texte-doux, #94a3b8); }

/* Barre d'actions de masse : elle n'existe que quand quelque chose est
   sélectionné. La règle vivait en local dans « Leads en attente » ; l'écran
   Envois s'en sert aussi, elle monte donc ici. */
.barre-masse.masse-vide { display: none !important; }
.case-jour.valeur-saisie {
  font-weight: 600;
  color: var(--violet, #7c6bff);
  border-color: rgba(124, 107, 255, .45);
  border-style: solid;
}
.case-jour.en-edition {
  border-color: var(--violet, #7c6bff);
  border-style: solid;
  background: #fff;
}

/* Case de saisie enregistrée : un repère d'une seconde, pas un bandeau.
   On saisit dix cases à la suite dans le tableau d'approvisionnement — dix
   messages empilés cacheraient le tableau qu'on est en train de remplir. */
.saisie-ok {
  border-color: var(--succes, #16a34a) !important;
  background: rgba(22, 163, 74, .08);
  transition: background .25s, border-color .25s;
}

/* Un encart de défaut qui mène à sa liste : même repère visuel que les
   indicateurs cliquables, pour qu'on n'ait pas à deviner ce qui s'ouvre. */
.case-defaut { cursor: pointer; transition: border-color .12s, background .12s; }
.case-defaut:hover {
  border-color: var(--primaire, #7c6bff) !important;
  background: rgba(124, 107, 255, .05);
}

/* Récapitulatif vivant du recalibrage : une pastille par code court
   destinataire, mise à jour à chaque case décochée. */
.recal-recap {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin: 0 0 10px;
}
.recal-part {
  display: inline-flex; align-items: baseline; gap: 5px;
  padding: 4px 9px; border-radius: 8px;
  background: var(--succes-soft, #E3F6EC);
  color: var(--succes, #16A34A);
  font-size: 12.5px; font-weight: 600;
}
.recal-part b { font-weight: 700; }
.recal-part i {
  font-style: normal; font-weight: 400; font-size: 11px;
  color: var(--texte-doux, #8890a8);
}

/* Récapitulatif replié : la phrase d'abord, le détail à la demande. Cinquante
   codes courts en pastilles repoussaient la liste des leads hors de l'écran. */
.recal-resume {
  align-self: center; font-weight: 600; font-size: 13px;
  margin-right: 4px;
}
.recal-liste {
  flex-basis: 100%;
  display: flex; flex-wrap: wrap; gap: 6px;
  max-height: 132px; overflow: auto;
  padding: 8px; margin-top: 4px;
  border-radius: 10px; background: var(--fond, #f4f6fb);
}

/* Un bouton et, sous lui, ce qu'il fait en trois mots. Le nom dit le geste,
   la ligne dit la matière — on choisit sans survoler ni ouvrir. */
.bouton-explique {
  display: flex; flex-direction: column; align-items: flex-start; gap: 3px;
}
.bouton-explique > small {
  font-size: 11px; line-height: 1.3;
  color: var(--texte-doux, #8890a8);
  padding-left: 2px;
}

/* ------------------------------------------------------------------ */
/* En-tête de tableau qui reste en place quand on descend              */
/* ------------------------------------------------------------------ */
/* Sur une grille large — quarante-cinq codes courts, huit fournisseurs —
   perdre la ligne des noms au bout de dix lignes rend la saisie
   impossible : on ne sait plus dans quelle colonne on tape.

   Deux conditions, et les deux comptent : l'en-tête est collant, ET son
   conteneur a une hauteur bornée. Sans hauteur, le conteneur ne défile pas
   lui-même — c'est la page qui bouge — et l'en-tête s'en va avec lui sans
   que rien ne le retienne. C'est le piège classique de position: sticky
   dans un bloc en overflow. */
.tableau-entete-fixe { max-height: 76vh; overflow: auto; }
.tableau-entete-fixe > table.tableau > thead > tr > th {
  position: sticky;
  top: 0;
  z-index: 3;
  /* Opaque, sinon les lignes défilent en transparence sous les titres. */
  background: var(--surface-alt, #f8fafc);
  /* border-collapse escamote les bordures d'un élément collant : on la
     redessine en ombre, qui, elle, suit. */
  box-shadow: inset 0 -1px 0 var(--bordure, #e2e8f0);
}
/* Un tableau à deux étages d'en-tête garde les deux collés, l'un sous
   l'autre : la seconde ligne se pose sous la hauteur de la première. */
.tableau-entete-fixe > table.tableau > thead > tr:nth-child(2) > th { top: 34px; }

/* Le pied — les totaux — reste visible en bas du même conteneur. */
.tableau-entete-fixe > table.tableau > tfoot > tr > th,
.tableau-entete-fixe > table.tableau > tfoot > tr > td {
  position: sticky;
  bottom: 0;
  z-index: 2;
  background: var(--surface-alt, #f8fafc);
  box-shadow: inset 0 1px 0 var(--bordure, #e2e8f0);
}

/* ------------------------------------------------------------------ */
/* Liste filtrante : le choix parmi cinquante valeurs                  */
/* ------------------------------------------------------------------ */
/* Posée sur le <body> et positionnée en absolu : dans un tableau à
   défilement, une liste enfant serait rognée par le conteneur — c'est
   exactement là qu'on en a le plus besoin. */
.liste-filtrante {
  position: absolute;
  z-index: 9999;
  max-height: 300px;
  overflow-y: auto;
  background: var(--surface, #fff);
  border: 1px solid var(--bordure, #e2e8f0);
  border-radius: 10px;
  box-shadow: 0 12px 32px rgba(15, 27, 61, .16);
  padding: 4px;
  font-size: 13px;
}
.liste-filtrante-ligne {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 7px 10px;
  border-radius: 7px;
  cursor: pointer;
  white-space: nowrap;
}
.liste-filtrante-ligne.actif,
.liste-filtrante-ligne:hover { background: rgba(124, 107, 255, .10); }
.liste-filtrante-code { font-weight: 700; }
/* Le produit et le client : lus au besoin, jamais au premier coup d'œil. */
.liste-filtrante-info {
  color: var(--texte-doux, #8890a8);
  font-size: 12px;
  margin-left: auto;
  padding-left: 14px;
}
.liste-filtrante-vide {
  padding: 10px 12px;
  color: var(--texte-doux, #8890a8);
}

/* Ligne de compte client : elle s'ouvre au clic sur son détail. */
.ligne-compte { cursor: pointer; }
.ligne-compte:hover > td { background: rgba(124, 107, 255, .05); }
.ligne-compte.ouverte > td { background: rgba(124, 107, 255, .08); }
.chevron-compte { font-size: 11px; }
.detail-compte > td { padding: 10px 14px 14px; }

/* ==================================================================
   MOBILE — voir et faire la même chose, sans scroller trois écrans
   ==================================================================
   Trois constats mesurés sur un téléphone de 390 px :

   1. Les indicateurs mangeaient tout. Huit KPI à 171 px de haut,
      c'était 750 px — deux écrans — avant la première ligne de
      données. Sur mobile ils deviennent des cartouches de trois par
      ligne, sans bulle d'icône : le chiffre et son libellé suffisent.

   2. L'en-tête de page répétait ce que la page dit déjà. Le
      sous-titre disparaît, le titre rétrécit, la barre bleue se
      resserre.

   3. Le tableau restait un tableau — c'est le choix retenu, et le
      bon : on ne transforme pas quarante colonnes en fiches
      empilées. Il défile latéralement, mais le code court reste
      collé à gauche et les titres restent collés en haut. Sans ces
      deux ancrages on ne sait plus ni sur quelle ligne ni dans
      quelle colonne on est.

   Une conséquence à connaître : pour que l'en-tête colle, le
   conteneur doit avoir une hauteur bornée — sinon c'est la page qui
   défile et l'en-tête part avec elle. D'où le max-height ici.
   ------------------------------------------------------------------ */
@media (max-width: 700px) {

  /* --- Cadre général : on récupère la marge perdue sur les bords --- */
  .contenu { padding: 14px 12px 44px; }
  .sidebar-logo { padding: 12px 14px; }
  .carte-corps { padding: 14px; }
  /* Un titre coincé entre deux boutons se coupait mot par mot
     (« Qui / doit / quoi ») : sur mobile il prend sa ligne. */
  .carte-tete {
    padding: 12px 14px;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
  :root { --gap: 14px; }

  /* --- En-tête de page --- */
  h1 { font-size: 19px; }
  .page-tete { margin-bottom: 12px; gap: 10px; }
  .page-sous-titre { display: none; }
  .page-actions { gap: 8px; }

  /* --- Indicateurs compacts : 3 par ligne, ~64 px au lieu de 171 --- */
  .kpis {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin-bottom: 12px;
  }
  .kpi {
    padding: 9px 10px;
    gap: 3px;
    border-radius: var(--r-md);
    box-shadow: none;
  }
  .kpi:hover { transform: none; box-shadow: none; }
  .kpi-bulle { display: none; }
  .kpi-label {
    font-size: 10.5px;
    line-height: 1.2;
    /* Un libellé de trois lignes casserait l'alignement de la rangée. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .kpi-valeur { font-size: 17px; }
  .kpi-note {
    font-size: 10px;
    line-height: 1.2;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  /* --- Filtres et outils : une seule ligne qui glisse ------------- */
  /* Empilés, ces boutons faisaient trois rangées. En file indienne
     défilante, ils font 44 px de haut au total. */
  .barre-outils {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    gap: 8px;
    margin-bottom: 10px;
    padding-bottom: 4px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }
  .barre-outils > * { flex: 0 0 auto; }
  .barre-outils .pousse { margin-left: auto; }
  .filtres-attente { flex-wrap: nowrap; overflow-x: auto; }

  /* --- Cibles tactiles ------------------------------------------- */
  /* Le padding grandit, la marge négative le compense : la zone
     cliquable gagne 16 px sans que la ligne grandisse d'un pixel. */
  .modifiable { padding: 8px 6px; margin: -8px -6px; }
  .modifiable.en-edition { padding: 0; margin: 0; }
  .btn-sm { height: 36px; padding: 0 12px; font-size: 13px; }
  .btn-icone { width: 40px; }
  .page-lien { min-width: 40px; height: 40px; }

  /* Un champ ou un menu de 28 px se rate au doigt. min-height plutôt que
     height : il l'emporte même sur une hauteur posée en style en ligne,
     sans avoir à retoucher chaque page. Le champ d'édition en place est
     hors du lot — sa hauteur, c'est celle de la ligne du tableau. */
  .saisie:not(.saisie-en-place),
  select.saisie:not(.saisie-en-place) { min-height: 38px; }
  textarea.saisie { min-height: 90px; }

  /* Cases à cocher natives : 13 px au doigt, c'est un pari. */
  input[type="checkbox"], input[type="radio"] { width: 20px; height: 20px; }

  /* --- Tableaux : en-tête collé en haut, 1re colonne collée à gauche */
  .tableau-defilement {
    max-height: 72vh;
    overflow: auto;
  }
  table.tableau { font-size: 12.5px; }
  table.tableau tbody td { padding: 9px 10px; }
  table.tableau thead th { padding: 10px 10px; }

  /* « 6 300 € » coupé en « 6 300 » puis « € » sur la ligne du dessous :
     une colonne étroite ne doit pas casser un montant. Le tableau glisse
     déjà latéralement — c'est lui qui s'élargit, pas le chiffre qui se
     replie. */
  table.tableau td.num, table.tableau th.num,
  table.tableau td.droite, table.tableau th.droite,
  table.tableau td.centre { white-space: nowrap; }

  .tableau-defilement > table.tableau > thead > tr > th {
    position: sticky;
    top: 0;
    z-index: 3;
    background: var(--surface-alt, #FAFBFE);
    box-shadow: inset 0 -1px 0 var(--border, #E6EAF2);
  }
  .tableau-defilement > table.tableau > thead > tr:nth-child(2) > th { top: 32px; }

  /* Fond opaque par ligne : une cellule collante translucide laisserait
     voir défiler les colonnes en dessous. On repasse donc les teintes
     d'état en couleurs pleines, portées par la ligne et héritées par la
     cellule figée. */
  .tableau-defilement > table.tableau > tbody > tr { --fond-ligne: var(--surface, #FFFFFF); }
  .tableau-defilement > table.tableau > tbody > tr.ligne-probleme { --fond-ligne: #FEF6F6; }
  .tableau-defilement > table.tableau > tbody > tr.ligne-alerte   { --fond-ligne: #FFF8F3; }
  .tableau-defilement > table.tableau > tbody > tr.ligne-livree   { --fond-ligne: #EFF9F2; }
  .tableau-defilement > table.tableau > tbody > tr.ligne-critique { --fond-ligne: #FBE5E5; }
  .tableau-defilement > table.tableau > tbody > tr.ligne-forcee   { --fond-ligne: #F0FBF4; }
  .tableau-defilement > table.tableau > tbody > tr.ligne-total    { --fond-ligne: var(--accent-soft, #E6EEFE); }

  .tableau-defilement > table.tableau > thead > tr > th:first-child,
  .tableau-defilement > table.tableau > tbody > tr > td:first-child:not([colspan]),
  .tableau-defilement > table.tableau > tfoot > tr > td:first-child:not([colspan]),
  .tableau-defilement > table.tableau > tfoot > tr > th:first-child:not([colspan]) {
    position: sticky;
    left: 0;
    /* Au-dessus des cellules voisines, en dessous de l'en-tête. */
    z-index: 2;
    box-shadow: 1px 0 0 var(--border, #E6EAF2);
  }
  .tableau-defilement > table.tableau > tbody > tr > td:first-child:not([colspan]) {
    background: var(--fond-ligne, var(--surface, #FFFFFF));
  }
  /* Le coin haut-gauche croise les deux ancrages : il doit dominer. */
  .tableau-defilement > table.tableau > thead > tr > th:first-child { z-index: 4; }

  /* Une colonne de cases à cocher n'ancre rien : ce qu'on veut garder
     sous les yeux, c'est la colonne d'après — le nom, le code court. La
     case reste accessible, à largeur fixe, et la colonne utile se colle
     juste derrière elle. */
  .tableau-defilement > table.tableau > thead > tr > th:first-child:has(input[type="checkbox"]),
  .tableau-defilement > table.tableau > tbody > tr > td:first-child:has(input[type="checkbox"]) {
    width: 32px;
    min-width: 32px;
    padding-left: 6px;
    padding-right: 6px;
  }
  .tableau-defilement > table.tableau > thead > tr > th:first-child:has(input[type="checkbox"]) + th,
  .tableau-defilement > table.tableau > tbody > tr > td:first-child:has(input[type="checkbox"]) + td {
    position: sticky;
    left: 32px;
    z-index: 2;
    box-shadow: 1px 0 0 var(--border, #E6EAF2);
  }
  .tableau-defilement > table.tableau > tbody > tr > td:first-child:has(input[type="checkbox"]) + td {
    background: var(--fond-ligne, var(--surface, #FFFFFF));
  }
  .tableau-defilement > table.tableau > thead > tr > th:first-child:has(input[type="checkbox"]) + th {
    z-index: 4;
  }
  .tableau-defilement > table.tableau > tfoot > tr > td:first-child:not([colspan]),
  .tableau-defilement > table.tableau > tfoot > tr > th:first-child:not([colspan]) {
    background: var(--accent-soft, #E6EEFE);
    box-shadow: 1px 0 0 var(--border, #E6EAF2),
                inset 0 1px 0 var(--border, #E6EAF2);
  }

  /* Le pied de tableau — les totaux — reste visible en bas. */
  .tableau-defilement > table.tableau > tfoot > tr > th,
  .tableau-defilement > table.tableau > tfoot > tr > td {
    position: sticky;
    bottom: 0;
    z-index: 2;
    background: var(--accent-soft, #E6EEFE);
    box-shadow: inset 0 1px 0 var(--border, #E6EAF2);
  }
  .tableau-defilement > table.tableau > tfoot > tr > td:first-child:not([colspan]),
  .tableau-defilement > table.tableau > tfoot > tr > th:first-child:not([colspan]) { z-index: 3; }

  /* La pagination sous un tableau borné doit rester atteignable. */
  .pagination { padding: 10px; flex-wrap: wrap; }

  /* Plan du jour : même contenu, lignes resserrées. */
  .plan-liste a { padding: 9px 12px; gap: 9px; }
  .plan-tete { padding: 11px 12px; }
}

/* ------------------------------------------------------------------
   MOBILE (suite) — ce qui ne se touche pas au doigt
   ------------------------------------------------------------------
   Deux problèmes distincts, souvent confondus :

   — Les cibles trop petites. Un chiffre modifiable de 16 px de haut
     se rate une fois sur trois. On agrandit la zone sensible sans
     agrandir la ligne : padding en plus, marge négative en compensation.

   — Les commandes qui n'apparaissent qu'au survol. Sur un écran
     tactile il n'y a pas de survol : le crayon d'une case de jour, le
     bouton « copier les défauts », étaient purement et simplement
     inatteignables. Ils deviennent visibles en permanence, discrets.
   ------------------------------------------------------------------ */
@media (max-width: 700px) {

  /* Bandeau de marque : la semaine se range à côté du logo au lieu
     de prendre une deuxième rangée à elle seule. */
  .sidebar { flex-direction: row; flex-wrap: wrap; align-items: center; }
  .sidebar-logo { flex: 1 1 auto; }
  .semaine-repere {
    flex: 0 0 auto;
    margin: 0 12px 0 0;
    padding: 6px 11px;
  }
  .semaine-numero { font-size: 15px; }
  .semaine-periode { font-size: 11px; }
  .sidebar .nav, .sidebar .sidebar-pied { flex: 0 0 100%; }

  /* Onglets : en file indienne défilante plutôt qu'en trois rangées. */
  .onglets, .onglets-fiche {
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 16px;
    margin-bottom: 12px;
    scrollbar-width: thin;
  }
  .onglets > *, .onglets-fiche > * { flex: 0 0 auto; white-space: nowrap; }

  /* Cibles tactiles : la zone grandit, la ligne non. */
  .modifiable { padding: 10px 6px; margin: -10px -6px; }
  /* Un nom de client en lien nu faisait 15 px de haut : intouchable. */
  .tableau td > a:not(.btn):not(.btn-details):not(.badge) {
    display: inline-block;
    padding: 10px 3px;
    margin: -10px -3px;
  }
  .btn-details { height: 36px; padding: 0 12px; }
  .lien-detail, .lien-total {
    display: inline-block;
    padding: 9px 4px;
    margin: -9px -4px;
  }

  /* Commandes au survol : rendues visibles, faute de survol. */
  .crayon-jour {
    opacity: .45;
    font-size: 14px;
    padding: 11px 5px;
    margin: -11px -5px;
  }
  .case-jour.valeur-saisie .crayon-jour { opacity: .7; }
  [data-copier-defauts] { opacity: .45; }
}

/* ==========================================================================
   Suivi des livraisons : la colonne « Secteur » tient sur plusieurs lignes.

   Un client qui couvre quarante départements porte une liste de 176
   caractères — « 01,02,03,10,13,… » — sans un seul espace. Pour le
   navigateur c'est UN MOT, et un mot ne se coupe pas : la colonne s'étirait
   donc sur mille pixels et écrasait toutes les autres, « Total livré » et
   « Reste » compris.

   « overflow-wrap: anywhere » autorise la coupure là où il n'y a pas
   d'espace ; sans lui, la largeur maximale ne servirait à rien. La règle ne
   vise que le tableau de cet écran, par son identifiant : les autres
   tableaux du CRM gardent leur mise en page.
   ========================================================================== */
#table-livraisons th:nth-child(3),
#table-livraisons td:nth-child(3) {
  max-width: 220px;
  white-space: normal;
  overflow-wrap: anywhere;
  line-height: 1.35;
}

/* --------------------------------------------------------------------------
   Suivi des livraisons : le code client reste à l'écran quand on défile.

   Le tableau compte treize colonnes — secteur, commandé, les cinq jours,
   total, reste, pourcentage, défaut. Sur un écran d'ordinateur portable, lire
   la colonne « Ven » oblige à pousser le tableau vers la gauche, et le nom du
   client sort de l'écran : on lit alors des chiffres sans savoir à qui ils
   appartiennent, et l'on revient en arrière à chaque ligne.

   La première colonne est donc figée, comme l'est la colonne des numéros dans
   l'écran de collage. Le filet à droite se fait avec « border-right » plutôt
   qu'une ombre interne : les lignes en alerte marquent déjà leur première
   cellule d'un « box-shadow » coloré, et deux ombres sur la même case
   s'excluraient — la plus spécifique effacerait le signal.
   -------------------------------------------------------------------------- */
#table-livraisons thead th:first-child,
#table-livraisons tbody td:first-child,
#table-livraisons tfoot td:first-child {
  position: sticky;
  left: 0;
  z-index: 3;
  background: var(--surface, #fff);
  border-right: 1px solid var(--bordure, #e2e8f0);
}

/* L'en-tête passe devant : au croisement, c'est lui qu'on doit voir. */
#table-livraisons thead th:first-child {
  z-index: 4;
  background: var(--fond-doux, #f8fafc);
}

/* Le survol éclaire la ligne entière : sans cette reprise, la colonne figée
   resterait blanche et la ligne semblerait coupée en deux. */
#table-livraisons tbody tr:hover > td:first-child {
  background: #FBFCFE;
}