/* CRM Brasserie de Senlis — feuille de style unique */

:root {
  --fond: #f6f3ee;
  --surface: #fffefc;
  --surface-2: #faf7f2;
  --bordure: #e6e0d5;
  --bordure-forte: #d5cbba;

  --encre: #1f1a15;
  --encre-2: #574e44;
  --encre-3: #8a8074;

  --ambre: #a8590c;
  --ambre-fort: #7d4108;
  --ambre-pale: #fdf1e0;
  --orge: #d9a441;

  --vert: #4a7a35;
  --vert-pale: #eef5e8;
  --rouge: #a8322a;
  --rouge-pale: #fceeed;
  --bleu: #2f5d8c;
  --bleu-pale: #eaf1f8;

  --rayon: 10px;
  --ombre: 0 1px 2px rgba(31, 26, 21, .05), 0 6px 16px -8px rgba(31, 26, 21, .12);
  --police: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, Helvetica, Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: var(--police);
  font-size: 14px;
  line-height: 1.5;
  color: var(--encre);
  background: var(--fond);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--ambre); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3 { margin: 0; font-weight: 600; letter-spacing: -.01em; }
h1 { font-size: 22px; }
h2 { font-size: 16px; }
h3 { font-size: 13px; text-transform: uppercase; letter-spacing: .07em; color: var(--encre-3); font-weight: 600; }
button, input, select, textarea { font: inherit; color: inherit; }

/* ------------------------------- Structure ------------------------------- */

.app { display: grid; grid-template-columns: 236px 1fr; min-height: 100vh; }

.laterale {
  background: #221c16;
  color: #e8e0d4;
  padding: 20px 14px;
  display: flex; flex-direction: column; gap: 26px;
  position: sticky; top: 0; height: 100vh;
}
.marque { display: flex; gap: 11px; align-items: center; padding: 0 6px; }
.marque .logo {
  width: 34px; height: 34px; border-radius: 9px; flex: none;
  background: linear-gradient(160deg, var(--orge), var(--ambre));
  display: grid; place-items: center; font-size: 18px;
}
.marque strong { display: block; font-size: 13.5px; line-height: 1.25; }
.marque span { font-size: 11px; color: #a89b88; }

.nav { display: flex; flex-direction: column; gap: 2px; }
.nav a {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 11px; border-radius: 8px;
  color: #cabfae; font-size: 13.5px; text-decoration: none;
}
.nav a:hover { background: #2e261e; color: #f2ebe0; text-decoration: none; }
.nav a.actif { background: var(--ambre); color: #fff; }
.nav a .puce {
  margin-left: auto; font-size: 11px; font-variant-numeric: tabular-nums;
  background: rgba(255,255,255,.14); padding: 1px 7px; border-radius: 20px;
}
.nav a.actif .puce { background: rgba(0,0,0,.22); }
.laterale footer { margin-top: auto; font-size: 11px; color: #8a7d6c; padding: 0 6px; line-height: 1.6; }
.laterale footer a { color: inherit; text-decoration: none; }
.laterale footer a:hover { text-decoration: underline; }

.principal { min-width: 0; display: flex; flex-direction: column; }
.barre {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 14px;
  padding: 14px 26px; background: rgba(246,243,238,.9);
  backdrop-filter: blur(8px); border-bottom: 1px solid var(--bordure);
}
.barre .titre { flex: 1; min-width: 0; }
.barre .titre p { margin: 2px 0 0; font-size: 12.5px; color: var(--encre-3); }
/* Le bouton suit le titre plutôt que de se caler à droite de la barre : sur un nom
   qui passe à la ligne, le coin droit est loin du mot qu'on copie. */
.rang-titre { display: flex; align-items: center; gap: 10px; min-width: 0; }
.rang-titre h1 { min-width: 0; }
/* Cible tactile carrée : sur un téléphone, 30px est le minimum pour viser sans rater. */
.copier-titre {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; padding: 0; cursor: pointer;
  border: 1px solid var(--bordure); border-radius: 8px;
  background: var(--surface); color: var(--encre-3);
}
.copier-titre:hover { border-color: var(--orge); color: var(--orge); }
.copier-titre.copie { border-color: var(--vert); color: var(--vert); }
.copier-titre[hidden] { display: none; }
.contenu { padding: 22px 26px 60px; }

/* -------------------------------- Éléments -------------------------------- */

.carte {
  background: var(--surface); border: 1px solid var(--bordure);
  border-radius: var(--rayon); box-shadow: var(--ombre);
}
.carte > header {
  display: flex; align-items: center; gap: 12px;
  padding: 13px 16px; border-bottom: 1px solid var(--bordure);
}
.carte > header h2 { flex: 1; }
.carte .corps { padding: 16px; }

.grille { display: grid; gap: 14px; }
.grille.kpi { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.grille.deux { grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); }

.kpi-carte { padding: 15px 16px; }
.kpi-carte .etiquette { font-size: 11.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--encre-3); }
.kpi-carte .valeur { font-size: 27px; font-weight: 600; letter-spacing: -.02em; margin-top: 5px; font-variant-numeric: tabular-nums; }
.kpi-carte .detail { font-size: 12.5px; color: var(--encre-2); margin-top: 3px; }

.jauge { height: 5px; border-radius: 3px; background: var(--bordure); overflow: hidden; margin-top: 10px; }
.jauge i { display: block; height: 100%; background: var(--ambre); border-radius: 3px; }
.jauge.ok i { background: var(--vert); }
.jauge.alerte i { background: var(--rouge); }

.btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 13px; border-radius: 8px; cursor: pointer;
  border: 1px solid var(--bordure-forte); background: var(--surface);
  font-size: 13.5px; font-weight: 500; white-space: nowrap;
}
.btn:hover { background: var(--surface-2); }
.btn.primaire { background: var(--ambre); border-color: var(--ambre); color: #fff; }
.btn.primaire:hover { background: var(--ambre-fort); }
.btn.discret { border-color: transparent; background: transparent; color: var(--encre-2); }
.btn.discret:hover { background: var(--surface-2); }
.btn.danger { color: var(--rouge); }
.btn:disabled { opacity: .5; cursor: not-allowed; }

.champ { display: flex; flex-direction: column; gap: 5px; }
.champ > label { font-size: 12px; color: var(--encre-2); font-weight: 500; }
input[type=text], input[type=date], input[type=email], input[type=search], select, textarea {
  width: 100%; padding: 7px 10px; border: 1px solid var(--bordure-forte);
  border-radius: 8px; background: var(--surface);
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--orge); outline-offset: -1px; border-color: var(--orge); }
textarea { resize: vertical; min-height: 72px; line-height: 1.55; }
select { appearance: none; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6'><path d='M0 0l5 6 5-6z' fill='%238a8074'/></svg>"); background-repeat: no-repeat; background-position: right 10px center; padding-right: 26px; }

.recherche { position: relative; width: 300px; }
.recherche input { padding-left: 32px; }
.recherche::before { content: "⌕"; position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--encre-3); font-size: 16px; }

.badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 8px; border-radius: 20px; font-size: 11.5px; font-weight: 600;
  background: var(--surface-2); border: 1px solid var(--bordure); color: var(--encre-2);
  white-space: nowrap;
}
.badge.vert { background: var(--vert-pale); border-color: #cfe0c2; color: var(--vert); }
.badge.rouge { background: var(--rouge-pale); border-color: #f0d0cd; color: var(--rouge); }
.badge.ambre { background: var(--ambre-pale); border-color: #f2ddbe; color: var(--ambre-fort); }
.badge.bleu { background: var(--bleu-pale); border-color: #cfdff0; color: var(--bleu); }
.badge.a { background: #2b241c; border-color: #2b241c; color: #f5c877; }

/* Sigle d'enseigne dans un itinéraire, une couleur par réseau pour le repérer d'un
   coup d'œil. Teintes assourdies, jamais les rouges et verts pleins des badges d'état :
   dans ce CRM le rouge veut dire « à relancer », il ne doit pas vouloir dire autre
   chose à quinze pixels de là. Le sigle reste reconnaissable par sa forme — carré,
   collé à gauche — là où l'état est une pastille arrondie en bout de ligne. */
.enseigne {
  display: inline-block; min-width: 30px; margin-right: 6px;
  padding: 1px 5px; border-radius: 4px;
  font-size: 10px; font-weight: 700; letter-spacing: .04em; text-align: center;
  font-variant-numeric: tabular-nums; white-space: nowrap;
  background: var(--surface-2); border: 1px solid var(--bordure); color: var(--encre-3);
}
/* Intermarché : rouge brique. Leclerc : bleu. Les deux couleurs d'enseigne, ternies. */
.enseigne.itm { background: #fbeceb; border-color: #eccfcc; color: #9a3b32; }
.enseigne.lec { background: #e9f0f7; border-color: #ccdcec; color: #2a5680; }
.enseigne.crf { background: #eaf0fa; border-color: #ccd8ee; color: #34488c; }
.enseigne.net { background: #fdf2e2; border-color: #f0dcbd; color: #8a5411; }
.enseigne.u   { background: #fdeef0; border-color: #f0ccd3; color: #99354a; }
.enseigne.auc { background: #fbeae6; border-color: #eecdc4; color: #97452c; }
.enseigne.cas { background: #eef1e9; border-color: #d7dfcb; color: #4f6b39; }

/* --------------------------------- Tables --------------------------------- */

.tableau-conteneur { overflow-x: auto; }
.tableau-conteneur.large > table { min-width: 1180px; }
.tableau-conteneur.large th:first-child,
.tableau-conteneur.large td:first-child { min-width: 240px; }
table { width: 100%; border-collapse: collapse; }
thead th {
  text-align: left; font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em;
  color: var(--encre-3); font-weight: 600; padding: 9px 12px;
  border-bottom: 1px solid var(--bordure); background: var(--surface-2);
  position: sticky; top: 0; white-space: nowrap;
}
thead th.triable { cursor: pointer; user-select: none; }
thead th.triable:hover { color: var(--encre); }
thead th .fleche { color: var(--ambre); }
tbody td { padding: 9px 12px; border-bottom: 1px solid var(--bordure); vertical-align: middle; }
tbody tr:hover { background: var(--surface-2); }
tbody tr.cliquable { cursor: pointer; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.principale { font-weight: 600; }
.secondaire { font-size: 12px; color: var(--encre-3); }
.negatif { color: var(--rouge); }
.positif { color: var(--vert); }

.vide { padding: 44px 16px; text-align: center; color: var(--encre-3); }

/* ---- Liste des comptes en cartes : remplace le tableau sous 800px (voir plus bas) ---- */
.liste-comptes-mobile { display: none; padding: 10px; gap: 8px; flex-direction: column; }
.carte-compte {
  border: 1px solid var(--bordure); border-radius: var(--rayon);
  padding: 12px 14px; background: var(--surface);
}
.carte-compte.cliquable { cursor: pointer; }
.carte-compte.cliquable:active { background: var(--surface-2); }
/* Carte de relance : une seule ligne, pour en balayer beaucoup d'un coup d'oeil.
   Le nom se tronque plutot que de passer a la ligne et de decaler le reste ; les
   badges ne se compriment jamais, c'est le nom qui cede la place. */
.carte-compte.serree {
  display: flex; align-items: center; gap: 7px;
  padding: 10px 12px; min-height: 44px;      /* la ligne entiere est la cible du pouce */
}
.carte-compte.serree .principale {
  min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.carte-compte.serree .badge { flex: none; }
.carte-compte.serree .espace { flex: 1; }

/* --------------------------------- Filtres -------------------------------- */

.filtres { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--bordure); }
.filtres select, .filtres input[type=search] { width: auto; min-width: 130px; }

/* ---- Filtre à choix multiples ----
   Un bouton qui résume la sélection, et un panneau de cases à cocher. Le panneau est
   en position absolue : dans le flux, il pousserait tout le tableau vers le bas. */
.filtre-multi { position: relative; }
.filtre-multi .declencheur {
  display: flex; align-items: center; gap: 6px; min-width: 130px; cursor: pointer;
  padding: 7px 10px; font: inherit; font-size: 13px; text-align: left;
  border: 1px solid var(--bordure-forte); border-radius: 8px;
  background: var(--surface); color: var(--encre);
}
.filtre-multi .declencheur .resume { flex: 1; }
.filtre-multi .declencheur .chevron { color: var(--encre-3); font-size: 11px; }
.filtre-multi.rempli .declencheur { border-color: var(--orge); color: var(--orge); font-weight: 600; }
.filtre-multi .panneau {
  position: absolute; z-index: 30; top: calc(100% + 4px); left: 0;
  min-width: 100%; max-width: 280px;
  padding: 6px; background: var(--surface);
  border: 1px solid var(--bordure-forte); border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .12);
}
/* Seule la liste défile : la recherche doit rester visible pendant qu'on fait défiler. */
.filtre-multi .panneau .choix { max-height: 264px; overflow-y: auto; }
.filtre-multi .panneau .filtre-panneau {
  width: 100%; margin-bottom: 6px; padding: 6px 8px; font-size: 13px;
}
.filtre-multi .panneau label {
  display: flex; align-items: center; gap: 8px; cursor: pointer;
  padding: 6px 8px; border-radius: 6px; font-size: 13px; white-space: nowrap;
}
.filtre-multi .panneau label:hover { background: var(--surface-2); }
.filtre-multi .panneau input { flex: none; margin: 0; }

@media (max-width: 800px) {
  /* Le panneau prend toute la largeur de la barre de filtres plutôt que de se caler
     sous son bouton : ouvert depuis le dernier filtre de la rangée, il sortirait du
     cadre à droite. Il s'ancre donc sur la barre, qui devient le repère de position. */
  .filtres { position: relative; }
  .filtre-multi { position: static; }
  .filtre-multi .panneau { left: 10px; right: 10px; min-width: 0; max-width: none; }
}
.pagination { display: flex; align-items: center; gap: 10px; padding: 11px 16px; font-size: 13px; color: var(--encre-2); }
.pagination .espace { flex: 1; }

/* ---------------------------------- Fiche --------------------------------- */

.fiche { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 16px; align-items: start; }
.fiche-entete { display: flex; gap: 14px; align-items: flex-start; padding: 16px; }
.fiche-entete .fiche-identite { flex: 1; min-width: 0; }
.fiche-entete .fiche-chiffres { text-align: right; }
.fiche-entete .avatar {
  width: 46px; height: 46px; border-radius: 11px; flex: none; display: grid; place-items: center;
  background: var(--ambre-pale); color: var(--ambre-fort); font-weight: 700; font-size: 17px;
}
.paires { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px 18px; }
.paire .cle { font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--encre-3); }
.paire .val { margin-top: 2px; white-space: pre-line; word-break: break-word; }
.paire .val:empty::after { content: "—"; color: var(--bordure-forte); }

/* Case a cocher seule, dans un cadre de la meme hauteur que les champs texte
   pour que la grille du formulaire reste alignee. */
/* Ce label n'est pas un intitule de champ mais l'enveloppe cliquable de la case :
   selecteur plus specifique que « .champ > label » pour ne pas heriter de sa taille. */
.champ > label.bascule {
  display: flex; align-items: center; cursor: pointer;
  padding: 7px 10px; border: 1px solid var(--bordure-forte); border-radius: 8px; background: var(--surface);
  font-size: 14px;
}
/* Cale invisible d'une ligne de texte : le cadre garde la hauteur d'un champ texte. */
.bascule::before { content: ""; display: block; width: 0; height: 1.5em; }
.bascule:hover { background: var(--surface-2); }
.bascule input { width: 18px; height: 18px; margin: 0; accent-color: var(--ambre); cursor: pointer; }

.formulaire { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; }
.formulaire .pleine { grid-column: 1 / -1; }

.fil { list-style: none; margin: 0; padding: 0; }
.fil li { position: relative; padding: 0 0 16px 22px; border-left: 2px solid var(--bordure); }
.fil li:last-child { border-left-color: transparent; padding-bottom: 0; }
.fil li::before {
  content: ""; position: absolute; left: -6px; top: 4px; width: 10px; height: 10px;
  border-radius: 50%; background: var(--surface); border: 2px solid var(--ambre);
}
.fil .entete-item { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.fil .date { font-size: 12px; color: var(--encre-3); font-variant-numeric: tabular-nums; }
.fil .texte { margin-top: 3px; white-space: pre-line; color: var(--encre-2); }
.fil .actions { margin-left: auto; display: flex; gap: 2px; opacity: 0; transition: opacity .12s; }
.fil li:hover .actions, .fil li:focus-within .actions { opacity: 1; }
.fil .actions .btn { padding: 3px 8px; font-size: 12.5px; }
.fil form { padding-bottom: 4px; }

/* --------------------------------- Import --------------------------------- */

.depot {
  border: 2px dashed var(--bordure-forte); border-radius: var(--rayon);
  padding: 40px 20px; text-align: center; background: var(--surface-2); cursor: pointer;
}
.depot.survol { border-color: var(--ambre); background: var(--ambre-pale); }
.depot .icone { font-size: 30px; }
.depot p { margin: 8px 0 0; color: var(--encre-2); }

/* -------------------------------- Divers ---------------------------------- */

.message { padding: 11px 14px; border-radius: 8px; font-size: 13.5px; margin-bottom: 14px; }
.message.erreur { background: var(--rouge-pale); border: 1px solid #f0d0cd; color: var(--rouge); }
.message.succes { background: var(--vert-pale); border: 1px solid #cfe0c2; color: var(--vert); }
.message.info { background: var(--bleu-pale); border: 1px solid #cfdff0; color: var(--bleu); }

.notif {
  position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%);
  background: #221c16; color: #fff; padding: 10px 18px; border-radius: 22px;
  box-shadow: 0 8px 26px rgba(0,0,0,.25); z-index: 100; font-size: 13.5px;
}

.pile { display: flex; flex-direction: column; gap: 14px; }
.rang { display: flex; align-items: center; gap: 10px; }
.rang.fin { justify-content: flex-end; }

@media (max-width: 1080px) {
  .fiche { grid-template-columns: 1fr; }
}
@media (max-width: 800px) {
  .app { grid-template-columns: 1fr; }
  .laterale {
    position: static; height: auto; flex-direction: row; align-items: center; gap: 14px;
    overflow-x: auto; -webkit-overflow-scrolling: touch;
  }
  .laterale footer, .marque span { display: none; }
  .nav { flex-direction: row; flex: none; }
  /* Sans white-space:nowrap, un lien de deux mots ("Tournées ITM Nord") se met a
     rejeter sur plusieurs lignes dans une rangee qui defile horizontalement : illisible,
     et ca masque que le reste de la barre est justement accessible en glissant. */
  .nav a { white-space: nowrap; flex: none; }
  .recherche { width: 180px; }

  /* Tableau des comptes (11 colonnes, 1180px minimum) illisible sur telephone meme en
     defilant horizontalement : la liste en cartes le remplace, voir carteCompte() dans
     app.js.
     L'itineraire de tournee porte la meme classe mais n'a pas de liste de remplacement,
     et il est deja concu pour l'ecran etroit (colonnes CA et dernier contact masquees,
     largeur minimale ramenee a 312px). Sans cette exception il disparaissait entierement :
     la page ne montrait plus que l'entete de chaque journee, sans aucun magasin. */
  .tableau-conteneur.large:not(:has(table.tournee)) { display: none; }
  .liste-comptes-mobile { display: flex; }
}

/* ---- Utilisateur connecte, au pied de la barre laterale ---- */
.utilisateur { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--bordure, #e3ddd3); }
.utilisateur .qui { display: flex; align-items: center; gap: 9px; }
.utilisateur img,
.utilisateur .pastille {
  width: 30px; height: 30px; border-radius: 50%; flex: none;
  display: grid; place-items: center;
  background: var(--ambre, #c98a2e); color: #fff; font: 600 13px/1 system-ui, sans-serif;
}
.utilisateur img { object-fit: cover; }
/* min-width:0 : sans lui, une adresse longue elargit la barre laterale au lieu d'etre tronquee. */
.utilisateur .identite { min-width: 0; display: flex; flex-direction: column; }
.utilisateur .identite strong { font-size: 12.5px; }
.utilisateur .identite span  { font-size: 11px; color: #8a7d6c; }
.utilisateur .identite strong,
.utilisateur .identite span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.deconnexion {
  display: block; margin-top: 9px; font-size: 11.5px; color: #8a7d6c;
  text-decoration: none; padding: 5px 0;
}
.deconnexion:hover { color: var(--texte, #2c2620); text-decoration: underline; }
.sans-connexion {
  font-size: 11px; line-height: 1.5; color: #8a2028;
  background: #fdf3f3; border-radius: 6px; padding: 8px 10px;
}

/* Doit rester APRES les styles de base du bloc utilisateur : a specificite egale,
   c'est la derniere regle du fichier qui gagne. Placee plus haut, elle ne s'appliquerait
   jamais, la barre laterale garderait sa hauteur et mangerait l'ecran d'un telephone. */
@media (max-width: 800px) {
  .utilisateur {
    margin: 0 0 0 auto; padding: 0 0 0 12px;
    border-top: 0; border-left: 1px solid var(--bordure, #e3ddd3);
    display: flex; align-items: center; gap: 10px; flex: none;
  }
  .utilisateur .identite { display: none; }
  .deconnexion { margin-top: 0; white-space: nowrap; }
}

/* ---- Onglets par réseau, écran « À relancer » ---- */
.onglets {
  display: flex; flex-wrap: wrap; gap: 4px;
  margin-bottom: 16px; padding-bottom: 10px;
  border-bottom: 1px solid var(--bordure);
}
.onglets a {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 13px; border-radius: 8px;
  font-size: 13.5px; font-weight: 500; color: var(--encre-2);
  text-decoration: none; white-space: nowrap;
  border: 1px solid transparent;
}
.onglets a:hover { background: var(--surface-2); text-decoration: none; border-color: var(--bordure); }
.onglets a.actif { background: var(--ambre); border-color: var(--ambre); color: #fff; }
.onglets .compte {
  font-size: 11.5px; font-variant-numeric: tabular-nums;
  padding: 1px 7px; border-radius: 20px;
  background: var(--surface-2); border: 1px solid var(--bordure); color: var(--encre-3);
}
/* Sur l'onglet actif, la pastille doit rester lisible sur fond ambre. */
.onglets a.actif .compte { background: rgba(0,0,0,.22); border-color: transparent; color: #fff; }

/* ---- Secteurs de tournées ----
   Premier niveau, au-dessus des onglets de tournées : on choisit d'abord la région,
   puis la tournée. Volontairement plus sobre que les onglets, pour que l'œil voie
   lequel des deux rangs commande l'autre. */
.secteurs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.secteurs a {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 12px; border-radius: 20px;
  font-size: 13px; font-weight: 500; color: var(--encre-2);
  text-decoration: none; white-space: nowrap;
  background: var(--surface-2); border: 1px solid var(--bordure);
}
.secteurs a:hover { text-decoration: none; border-color: var(--bordure-forte); color: var(--encre); }
.secteurs a.actif {
  background: var(--encre); border-color: var(--encre); color: var(--surface);
}
.secteurs .compte {
  font-size: 11.5px; font-variant-numeric: tabular-nums; color: var(--encre-3);
}
.secteurs a.actif .compte { color: var(--surface); opacity: .75; }

@media (max-width: 800px) {
  /* Les onglets défilent horizontalement plutôt que de casser la mise en page. */
  .onglets { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .secteurs {
    flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch;
    margin-bottom: 10px; padding-bottom: 2px;
  }
}

/* ---- Grille des références par contenant, sur la fiche client ---- */
.assortiment th:first-child, .assortiment td:first-child { white-space: nowrap; }
.assortiment td.num, .assortiment th.num { text-align: center; width: 84px; }
.assortiment tbody tr:hover { background: var(--surface-2); }
.assortiment .secondaire { font-size: 12px; }
/* Combinaison qui n'existe pas : ni case, ni interaction possible. */
.assortiment .impossible { color: var(--bordure-forte); user-select: none; }

/* La case remplit la cellule : en tournée on vise avec le pouce, pas au pixel. */
.assortiment .case {
  display: flex; align-items: center; justify-content: center;
  margin: -9px -12px; padding: 9px 12px; cursor: pointer;
}
.assortiment .case input {
  width: 19px; height: 19px; margin: 0;
  accent-color: var(--ambre); cursor: pointer;
}
.assortiment .case input:disabled { opacity: .4; cursor: wait; }

/* ---- Itinéraire de tournée ----
   Objectif : une tournée tient à l'écran, sans défilement dans un sens ni dans l'autre.
   Le détail — adresse, contact, liste des références manquantes — passe en infobulle. */
.tournee { table-layout: fixed; width: 100%; }
.tournee th, .tournee td { padding: 5px 8px; vertical-align: middle; }
.tournee td { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tournee .jalon { background: var(--surface-2); }
.tournee .jalon td { color: var(--encre-2); font-size: 12.5px; }

.tournee .col-num     { width: 34px; }
.tournee .col-trajet  { width: 108px; font-size: 12px; }
.tournee .col-ca      { width: 78px; }
.tournee .col-contact { width: 104px; }
/* La colonne magasin prend ce qui reste — mais jamais moins que de quoi lire un nom.
   Les largeurs minimales du tableau sont calculees pour la preserver : sans cela,
   c'est la colonne essentielle qui s'ecrase quand la fenetre se resserre. */
.tournee .col-magasin { width: auto; }
/* Doublon de la colonne « contact », qui ne sert que sur téléphone. */
.tournee .etat-replie { display: none; }
.tournee .col-magasin .principale { font-weight: 600; }
.tournee .col-magasin a { color: inherit; }
.tournee .col-magasin a:hover { color: var(--ambre); }
.tournee .badge { padding: 1px 6px; font-size: 11px; }

/* ---- Replier un tronçon d'itinéraire ----
   Le jalon qui ouvre une section (départ, pause déjeuner, nuitée) se replie d'un appui.
   Toute la ligne est la cible : sur un téléphone on vise le pouce, pas le pixel. */
/* Sans user-select, l'appui du pouce surligne le libelle du jalon au lieu de le replier. */
.tournee tr.repliable { cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent; }
.tournee tr.repliable:hover td { background: var(--ambre-pale); }
.tournee tr.repliable .pliage { float: right; display: flex; align-items: center; gap: 7px; }
.tournee tr.repliable .chevron {
  display: inline-block; color: var(--encre-3); font-size: 11px;
  transition: transform .15s ease;
}
/* Replié, le chevron pointe vers la droite et le nombre de magasins masqués apparaît :
   sans ce rappel, une section fermée ressemble à une section vide. */
.tournee tr.repliable[aria-expanded="false"] .chevron { transform: rotate(-90deg); }
.tournee tr.repliable .compte-replie { display: none; font-size: 11px; color: var(--encre-3); }
.tournee tr.repliable[aria-expanded="false"] .compte-replie { display: inline; }

/* Le conteneur ne defile que si la fenetre est vraiment etroite. */
.tableau-conteneur.large > table.tournee { min-width: 630px; }

/* ---- Commandes placees dans l'entete d'une carte ----
   L'entete existant contient un simple lien (« Tout voir ») et mesure 51 px. Un bouton
   ou une liste deroulante avec leur remplissage par defaut le poussent a 63 px, et les
   cartes ne s'alignent plus. On les ramene donc a la hauteur du lien. */
.carte > header .btn.discret { padding: 0; border: 0; background: none; color: var(--ambre); }
.carte > header .btn.discret:hover { background: none; text-decoration: underline; }
.carte > header select.choix-fiche { margin-top: 0; padding-top: 2px; padding-bottom: 2px; }

/* ---- Classement des commerciaux, tableau de bord ----
   Une barre plutot qu'un camembert : on compare trois nombres, l'oeil le fait mieux
   sur des longueurs alignees. La barre se lit relativement au plus actif. */
.classement { width: 100%; }
.classement td { padding: 6px 8px; border: 0; vertical-align: middle; white-space: nowrap; }
.classement td:first-child { padding-left: 0; width: 1%; }
.classement td:last-child { padding-right: 0; }
.classement .barre-cell { width: 100%; padding-left: 12px; padding-right: 12px; }
.classement .barre-part {
  display: block; height: 8px; border-radius: 4px;
  background: var(--ambre); min-width: 3px;
}
.classement tr:nth-child(n+2) .barre-part { background: var(--orge); }

/* ---- Champs modifiables, dans la liste des informations du compte ----
   « Via centrale » et « Importance » sont les deux seuls champs modifiables d'une fiche
   par ailleurs en lecture seule. Chacun s'edite a sa place habituelle dans la liste : la
   liste deroulante remplace la valeur affichee au lieu de s'ajouter ailleurs. Elle reste
   ouverte en permanence et s'enregistre au changement, sans bouton « Modifier » a
   trouver d'abord ni « Enregistrer » a oublier ensuite.

   Les selects du site occupent toute la largeur ; ici la valeur tient en un mot.
   Le remplissage a droite est celui du chevron dessine par la regle generale. */
select.choix-fiche {
  width: auto; min-width: 84px; margin-top: 2px;
  padding: 4px 26px 4px 10px;
  font-size: 13px; font-weight: 600; border-radius: 6px; cursor: pointer;
}
select.choix-fiche:hover { border-color: var(--orge); }
select.choix-fiche:focus-visible { outline: 2px solid var(--ambre); outline-offset: 1px; }
select.choix-fiche:disabled { opacity: .5; cursor: wait; }

/* ---- Tête de gondole, au-dessus de la grille des références ---- */
.bascule-gondole {
  display: flex; align-items: center; gap: 11px; cursor: pointer;
  padding: 11px 13px; margin-bottom: 14px;
  border: 1px solid var(--bordure-forte); border-radius: 8px; background: var(--surface-2);
}
.bascule-gondole:hover { background: var(--ambre-pale); border-color: var(--orge); }
.bascule-gondole input { width: 19px; height: 19px; margin: 0; accent-color: var(--ambre); cursor: pointer; }
.bascule-gondole input:disabled { opacity: .4; cursor: wait; }
.bascule-gondole .secondaire { display: block; font-size: 12px; margin-top: 1px; }
/* Coché, l'encadré se distingue au premier coup d'œil dans la fiche. */
.bascule-gondole:has(input:checked) { background: var(--ambre-pale); border-color: var(--orge); }

/* Résumé de tournée : une ligne, pas une carte. */
.resume-tournee {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 20px;
  margin-bottom: 12px; font-size: 13px;
}
.resume-tournee .secondaire { font-size: 11.5px; }
.resume-tournee .titre-long { color: var(--encre-3); font-size: 12px; margin-left: auto; }
/* Onglets plus serrés : c'est la barre qui débordait sur deux rangées. */
.onglets a { padding: 6px 10px; font-size: 13px; }
.onglets { margin-bottom: 12px; padding-bottom: 8px; }
.tournee th, .tournee td { padding: 3px 8px; line-height: 1.35; }
.tournee thead th { padding: 4px 8px; }
/* Le grand vide en bas de page n'a pas lieu d'être sur un itinéraire qu'on veut voir d'un bloc. */
.contenu:has(table.tournee) { padding-bottom: 20px; }
.carte:has(table.tournee) > header { padding: 8px 14px; }

@media (max-width: 800px) {
  /* Les chiffres passent sous l'identité au lieu de lui disputer la largeur. Côte à
     côte sur 375px il ne restait qu'une centaine de pixels au nom : « Délai de relance
     : 36 j » tombait sur quatre lignes et les trois pastilles s'empilaient l'une sous
     l'autre. En pleine largeur, chacune tient sur une ligne. */
  .fiche-entete { flex-wrap: wrap; }
  .fiche-entete .fiche-chiffres {
    flex: 1 0 100%; text-align: left;
    margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--bordure);
  }
}

@media (max-width: 800px) {
  /* Sur un téléphone, en tournée, ce qui compte est : quelle étape, quel magasin,
     où il en est, et ce qui manque. Le CA se lit sur la fiche. L'état, lui, décide
     de la visite : il repasse contre le nom, la colonne n'ayant pas la place. */
  .tournee .col-ca, .tournee .col-contact { display: none; }
  /* Le nom cede la place avant le badge : tronque, « Saint-Valery-sur-Som… » reste
     reconnaissable, alors qu'un etat pousse hors de la cellule ne se lit plus du tout.
     D'ou le flex, sur un conteneur interne — le poser sur la cellule la sortirait du
     modele de tableau et disloquerait la ligne. */
  .tournee .cellule-magasin { display: flex; align-items: center; gap: 4px; min-width: 0; }
  .tournee .cellule-magasin .principale { overflow: hidden; text-overflow: ellipsis; }
  .tournee .cellule-magasin .badge { flex: none; }
  /* Sur téléphone le sigle se resserre : chaque pixel va au nom de la ville. */
  .tournee .cellule-magasin .enseigne { flex: none; min-width: 0; margin-right: 0; padding: 1px 4px; }
  .tournee .etat-replie { display: inline; margin-left: auto; }
  .tableau-conteneur.large > table.tournee { min-width: 312px; }
  .tournee .col-trajet { width: 84px; font-size: 11.5px; }
  .tournee th, .tournee td { padding: 3px 6px; }
}

@media (max-width: 800px) {
  /* Largeur explicite et non « le reste » : avec table-layout fixe, le reste est
     calculé sur la largeur du conteneur avant que min-width ne s'applique, et la
     colonne du nom se retrouvait à 65 px. C'est la seule qu'il ne faut jamais sacrifier. */
  .tournee .col-magasin { width: 190px; }
}

/* ---- Modification d'un itinéraire ----
   Une liste simple, lignes hautes et boutons de 34px : on la manipule au doigt, souvent
   depuis un téléphone. Les jalons restent visibles comme repères, en retrait. */
.bandeau-edition { margin: 0; line-height: 1.5; }
.liste-edition { list-style: none; margin: 0; padding: 6px 10px; }
.liste-edition li { display: flex; align-items: center; gap: 8px; min-height: 42px; }
.liste-edition li + li { border-top: 1px solid var(--bordure); }
.jalon-edition { color: var(--encre-3); font-size: 12.5px; padding-left: 4px; }
.magasin-edition .rang-magasin { width: 22px; flex: none; text-align: right; color: var(--encre-3); font-size: 12.5px; }
.magasin-edition .nom-magasin {
  flex: 1; min-width: 0; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.btn-etape {
  flex: none; width: 34px; height: 34px; padding: 0; cursor: pointer;
  border: 1px solid var(--bordure-forte); border-radius: 8px;
  background: var(--surface); color: var(--encre-2); font-size: 15px;
}
.btn-etape:hover:not(:disabled) { border-color: var(--orge); color: var(--orge); }
.btn-etape:disabled { opacity: .3; cursor: default; }
.btn-etape.retirer:hover:not(:disabled) { border-color: var(--rouge); color: var(--rouge); }

.ajout-magasin { position: relative; padding: 10px 16px 14px; border-top: 1px solid var(--bordure); }
.ajout-magasin .recherche-ajout { width: 100%; }
.resultats-ajout {
  margin-top: 6px; border: 1px solid var(--bordure-forte); border-radius: 8px;
  background: var(--surface); overflow: hidden;
}
.resultat-ajout {
  display: flex; flex-direction: column; align-items: flex-start; gap: 1px; width: 100%;
  padding: 8px 12px; border: 0; background: none; text-align: left; cursor: pointer; font: inherit;
}
.resultat-ajout + .resultat-ajout { border-top: 1px solid var(--bordure); }
.resultat-ajout:hover:not(:disabled) { background: var(--surface-2); }
.resultat-ajout:disabled { cursor: default; opacity: .5; }
.resultats-ajout .vide { padding: 10px 12px; }

/* Question du tableur et sa réponse. */
.question-tournee {
  margin: 0 0 10px; padding: 9px 12px;
  background: var(--ambre-pale); border-left: 3px solid var(--orge); border-radius: 0 6px 6px 0;
  font-size: 13.5px; white-space: pre-line;
}
#reponse-tournee { width: 100%; }

/* ---- Carte des tournées ----
   Une couleur par secteur, reprise par la pastille de la légende. Teintes choisies
   pour se distinguer entre elles sans rivaliser avec l'ambre de l'interface : on doit
   pouvoir suivre un fil du regard d'un bout à l'autre de la carte. */
:root {
  --sect-0: #2f5d8c;
  --sect-1: #4a7a35;
  --sect-2: #a8322a;
  --sect-3: #7a4b9c;
  --sect-4: #b07508;
  --sect-5: #1f7a74;
}

.atelier-carte { display: grid; grid-template-columns: minmax(0, 1fr) 310px; gap: 16px; align-items: start; }
.fond-carte { padding: 10px; }
.fond-carte svg { display: block; width: 100%; height: auto; }
.fond-carte .dep { fill: var(--surface-2); stroke: var(--bordure-forte); stroke-width: .8; stroke-linejoin: round; }
.fond-carte .note-carte { margin: 8px 4px 2px; font-size: 12px; color: var(--encre-3); }

.fond-carte .trace .route {
  fill: none; stroke: var(--teinte); stroke-width: 2.2;
  stroke-linejoin: round; stroke-linecap: round; opacity: .8;
}
.fond-carte .trace.deux-jours .route { stroke-dasharray: 8 5; }
.fond-carte .arret { fill: var(--teinte); stroke: var(--surface); stroke-width: 1.4; }
.fond-carte .base circle { fill: var(--encre); stroke: var(--surface); stroke-width: 2; }
.fond-carte .base text { font-size: 15px; font-weight: 600; fill: var(--encre); }

/* Survol : tout s'efface sauf la tournée visée. C'est ce qui rend quatorze parcours
   lisibles sans quatorze couleurs. */
.fond-carte svg.vise .trace { opacity: .12; }
.fond-carte svg.vise .trace.vu { opacity: 1; }
.fond-carte svg.vise .trace.vu .route { stroke-width: 3.2; opacity: 1; }
.fond-carte .trace { cursor: pointer; transition: opacity .12s ease; }

.legende-carte { padding: 14px 16px; display: flex; flex-direction: column; gap: 14px; }
.secteur-legende h3 {
  display: flex; align-items: center; gap: 8px; margin: 0 0 6px;
  font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--encre-2);
}
.secteur-legende .puce-couleur {
  width: 10px; height: 10px; border-radius: 3px; background: var(--teinte); flex: none;
}
.legende-carte ul { list-style: none; margin: 0; padding: 0; }
.legende-carte li {
  padding: 4px 8px; border-radius: 7px; border-left: 3px solid var(--teinte);
  display: flex; flex-direction: column; gap: 1px; cursor: default;
}
.legende-carte li:hover, .legende-carte li.vu { background: var(--surface-2); }
.legende-carte li a { font-size: 13.5px; font-weight: 500; }
.legende-carte li .secondaire { font-size: 11.5px; }

@media (max-width: 900px) {
  .atelier-carte { grid-template-columns: minmax(0, 1fr); }
}

/* ---- Boîte d'extraction des comptes ----
   Elle n'existe que pour poser une question : extrait-on ce qu'on voit, ou tout ?
   Assez large pour montrer le rappel des filtres, assez sobre pour qu'on y réponde
   sans la lire deux fois. */
.boite-extraction {
  border: 1px solid var(--bordure-forte); border-radius: var(--rayon);
  background: var(--surface); color: var(--encre); box-shadow: var(--ombre);
  padding: 0; max-width: 520px; width: calc(100% - 32px);
}
.boite-extraction::backdrop { background: rgba(31, 26, 21, .35); }
.boite-extraction form { padding: 20px 22px 16px; display: flex; flex-direction: column; gap: 12px; }
.boite-extraction h2 { margin: 0; font-size: 18px; }
.boite-extraction p { margin: 0; font-size: 13px; }

.choix-perimetre {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 11px 13px; border: 1px solid var(--bordure); border-radius: 9px;
  cursor: pointer; font-size: 14px;
}
.choix-perimetre:hover { border-color: var(--bordure-forte); background: var(--surface-2); }
.choix-perimetre:has(input:checked) { border-color: var(--ambre); background: var(--ambre-pale); }
.choix-perimetre:has(input:disabled) { opacity: .55; cursor: default; }
.choix-perimetre input { margin-top: 3px; accent-color: var(--ambre); flex: none; }

.rappel-filtres { margin: 6px 0 0; padding: 0; list-style: none; font-size: 12.5px; }
.rappel-filtres li { display: flex; gap: 6px; }
.rappel-filtres .secondaire { min-width: 76px; }
.boite-extraction .note-extraction { color: var(--encre-3); font-size: 12px; }
.boite-extraction menu {
  display: flex; justify-content: flex-end; gap: 8px; margin: 4px 0 0; padding: 0;
}