/* Le dépôt de Lyon — SPE.
   Pensé pour l'entrepôt : gros caractères, gros boutons, fort contraste.
   On l'utilise debout, une main prise par la douchette. */
:root{
  --bleu:#17527E; --bleu-2:#1B5C8A; --bleu-3:#3E8FC4; --clair:#7FC0E6;
  --nuit:#12293D; --creme:#F4F7FA; --papier:#FFFFFF; --encre:#16222C;
  --sourd:#5F6E7A; --trait:#D3DCE4;
  --vert:#1D9E75; --vert-f:#0F6E56; --vert-c:#E1F5EE;
  --rouge:#B3352F; --rouge-c:#FBEAE8; --ambre:#8A5B0B; --ambre-c:#FBF0DC;
  --sans:"Avenir Next",Avenir,-apple-system,"Helvetica Neue",Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box} html,body{margin:0;padding:0}
body{font-family:var(--sans);color:var(--encre);background:var(--creme);
  font-size:16px;line-height:1.5;-webkit-text-size-adjust:100%}

header{background:var(--nuit);color:#EAF2F8;padding:14px 20px;
  display:flex;align-items:center;gap:16px;position:sticky;top:0;z-index:20}
header img{height:34px;flex:none}
header .lieu{font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  color:#8FB0C8;margin-top:2px}
header h1{margin:0;font-size:17px;font-weight:600;letter-spacing:.01em}
nav{margin-left:auto;display:flex;gap:6px;flex-wrap:wrap}
nav a{color:#CFE1EE;text-decoration:none;font-size:13px;font-weight:600;
  padding:8px 13px;border-radius:7px;letter-spacing:.03em}
nav a:hover{background:rgba(255,255,255,.10)}
nav a.ici{background:var(--bleu-3);color:#fff}

main{max-width:1100px;margin:0 auto;padding:22px 20px 60px}
h2{font-size:24px;font-weight:600;margin:0 0 4px}
h3{font-size:12px;text-transform:uppercase;letter-spacing:.14em;color:var(--bleu-2);
  font-weight:700;margin:26px 0 10px}
p{margin:0 0 12px} p.sous{color:var(--sourd);margin:0 0 20px}
.petit{font-size:13px;color:var(--sourd)}

.carte{background:var(--papier);border:1px solid var(--trait);border-radius:12px;
  padding:18px 20px;margin-bottom:16px}
.grille{display:grid;gap:14px;margin-bottom:16px}
.g3{grid-template-columns:repeat(3,1fr)}
.g2{grid-template-columns:repeat(2,1fr)}
@media(max-width:760px){.g3,.g2{grid-template-columns:1fr}}

.chiffre{background:var(--papier);border:1px solid var(--trait);border-radius:12px;
  padding:18px 20px}
.chiffre .v{font-size:34px;font-weight:700;color:var(--bleu);line-height:1;
  display:block;margin-bottom:6px;font-variant-numeric:tabular-nums}
.chiffre .l{font-size:13px;color:var(--sourd);display:block}

form.scan{display:flex;gap:10px;flex-wrap:wrap;align-items:stretch}
input[type=text],input[type=number],input[type=date],select{
  font-family:var(--sans);font-size:19px;padding:14px 16px;border-radius:10px;
  border:2px solid var(--trait);background:var(--papier);color:var(--encre);
  min-width:0;width:100%}
input:focus,select:focus{outline:none;border-color:var(--bleu-3);
  box-shadow:0 0 0 4px rgba(62,143,196,.18)}
input.code{font-size:24px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
label{display:block;font-size:12px;text-transform:uppercase;letter-spacing:.1em;
  color:var(--sourd);font-weight:700;margin:0 0 6px}
.champ{margin-bottom:16px}

button,.bouton{font-family:var(--sans);font-size:17px;font-weight:700;
  padding:14px 24px;border-radius:10px;border:0;cursor:pointer;
  background:var(--bleu-2);color:#fff;text-decoration:none;display:inline-block;
  text-align:center}
button:hover,.bouton:hover{background:var(--bleu)}
button.vert{background:var(--vert-f)} button.vert:hover{background:#0b5443}
.bouton.pale{background:var(--papier);color:var(--bleu-2);border:2px solid var(--trait)}
.bouton.pale:hover{background:var(--creme)}
button.large{width:100%;font-size:20px;padding:18px}

table{width:100%;border-collapse:collapse;font-size:15px}
th{text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.1em;
  color:var(--sourd);font-weight:700;padding:0 12px 8px 0;
  border-bottom:2px solid var(--bleu-2)}
td{padding:11px 12px 11px 0;border-bottom:1px solid var(--trait);vertical-align:top}
td:last-child,th:last-child{padding-right:0}
td.n,th.n{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
tr.total td{border-bottom:0;border-top:2px solid var(--bleu-2);font-weight:700}
a{color:var(--bleu-2)}
code,.code{font-family:"SF Mono",Menlo,Consolas,monospace;font-size:15px;
  background:var(--creme);padding:2px 7px;border-radius:5px;font-weight:700;
  letter-spacing:.03em;white-space:nowrap}

.pastille{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.07em;
  text-transform:uppercase;padding:4px 9px;border-radius:6px;white-space:nowrap}
.p-sol{background:var(--vert-c);color:var(--vert-f)}
.p-res{background:var(--creme);color:var(--sourd);border:1px solid var(--trait)}
.p-att{background:var(--ambre-c);color:var(--ambre)}
.p-ok{background:var(--vert-c);color:var(--vert-f)}
.p-non{background:var(--rouge-c);color:var(--rouge)}

.avis{border-radius:10px;padding:14px 18px;margin-bottom:16px;font-size:15px}
.avis.bon{background:var(--vert-c);border-left:4px solid var(--vert-f);color:var(--vert-f)}
.avis.mauvais{background:var(--rouge-c);border-left:4px solid var(--rouge);color:var(--rouge)}
.avis.info{background:var(--creme);border-left:4px solid var(--bleu-3)}
.avis b{display:block;margin-bottom:2px}

.propose{background:var(--vert-c);border:2px solid var(--vert-f);border-radius:12px;
  padding:22px;text-align:center;margin-bottom:16px}
.propose .adr{font-size:44px;font-weight:700;color:var(--vert-f);letter-spacing:.04em;
  line-height:1;margin-bottom:8px;font-variant-numeric:tabular-nums}
.propose .quoi{font-size:15px;color:var(--vert-f)}

.vide{text-align:center;padding:40px 20px;color:var(--sourd)}
.vide .gros{font-size:19px;font-weight:600;color:var(--encre);margin-bottom:6px}

/* ─────────────────────────────────────────────────────────── téléphone ───
   ⚠ C'est l'usage principal dans l'entrepôt : on scanne debout, une main
   prise. Le champ et le bouton passent l'un sous l'autre, et l'en-tête
   s'empile — sinon tout déborde à droite et le bouton devient inatteignable. */
@media (max-width: 700px) {
  header{flex-wrap:wrap;gap:10px;padding:12px 14px}
  header h1{font-size:16px}
  header .lieu{font-size:11px}
  nav{margin-left:0;width:100%;gap:4px}
  nav a{flex:1;text-align:center;padding:10px 6px;font-size:12px}
  main{padding:16px 14px 60px}
  h2{font-size:21px}
  form.scan{flex-direction:column}
  form.scan input, form.scan button{width:100%;flex:none}
  .carte{padding:14px 15px;border-radius:10px}
  table{font-size:14px}
  td, th{padding-right:8px}
  .propose .adr{font-size:34px}
  .chiffre .v{font-size:28px}
}
/* Un tableau large se fait glisser du doigt plutôt que de pousser la page. */
.carte > table{display:block;overflow-x:auto;white-space:nowrap}
.carte > table td, .carte > table th{white-space:normal}

/* ─────────────────────────────── terminaux de type MC3300 (480 px) ───
   L'écran d'un terminal d'entrepôt est étroit et haut. La barre de
   navigation y frôlait le bord : on la resserre plutôt que de la laisser
   rogner le dernier onglet. */
@media (max-width: 520px) {
  nav a{font-size:11px;padding:9px 3px;letter-spacing:0}
  header img{height:28px}
  header h1{font-size:15px}
}

/* ── sortir : on ne s'en sert qu'au bureau, jamais sur la tablette ──────
   (depuis Django 4.1 la déconnexion exige un POST, d'où le formulaire) */
header nav .sortir{display:inline;margin:0}
header nav .sortir button{font:inherit;background:transparent;border:0;
  color:inherit;opacity:.6;cursor:pointer;padding:0;text-decoration:underline}
header nav .sortir button:hover{opacity:1}

/* ═══════════════════ LE CATALOGUE, LES SOCIÉTÉS, LES TIERS — 29/10/2026 ═══
   ⭐ Chaque société porte SA couleur (--soc), posée en tranche à gauche des
   fiches comme l'onglet d'un classeur : on sait à qui est un produit avant
   d'avoir lu son nom. Le produit s'affiche comme une étiquette de rayon —
   la contenance en gros, le prix en face, la référence en pied. */
.entete-page{display:flex;align-items:flex-end;justify-content:space-between;
  gap:16px;flex-wrap:wrap;margin-bottom:16px}
.entete-page p.sous{margin:0}
.fil{margin:0 0 8px;font-size:14px}
.fil a{text-decoration:none;font-weight:600}
form.carte.scan{display:flex;gap:10px;align-items:stretch}
form.carte.scan input{flex:1}

.filtres{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 18px;padding:0}
.puce{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;
  background:var(--papier);border:1px solid var(--trait);color:var(--encre);
  text-decoration:none;font-size:14px;font-weight:600}
.puce::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--soc,var(--sourd))}
.puce.toutes::before{display:none}
.puce .nb{color:var(--sourd);font-weight:500;font-variant-numeric:tabular-nums}
.puce:hover{border-color:var(--bleu-3)}
.puce.ici{background:var(--nuit);border-color:var(--nuit);color:#fff}
.puce.ici .nb{color:#8FB0C8}

.rayon{display:grid;grid-template-columns:repeat(auto-fill,minmax(215px,1fr));gap:14px}
.etiquette{display:flex;flex-direction:column;background:var(--papier);
  border:1px solid var(--trait);border-left:6px solid var(--soc,var(--bleu-3));
  border-radius:12px;overflow:hidden;text-decoration:none;color:var(--encre);
  transition:transform .15s ease,border-color .15s ease}
.etiquette:hover{transform:translateY(-2px);border-color:var(--bleu-3);border-left-color:var(--soc)}
.etiquette:focus-visible{outline:3px solid var(--bleu-3);outline-offset:2px}
/* ⭐ Carré, sans marge : les photos sont préparées au même format
   (outils/preparer_photos_produits.py), donc chaque produit y a la même
   hauteur. Une marge ici rapetissait tout, et différemment selon la photo. */
.etiquette .photo{aspect-ratio:1;background:#fff;display:flex;align-items:center;
  justify-content:center;border-bottom:1px solid var(--trait);overflow:hidden}
.etiquette .photo img{width:100%;height:100%;object-fit:contain;display:block}
.sans-photo{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--sourd);
  text-align:center;padding:0 12px}
.etiquette .infos{padding:12px 14px 14px;display:flex;flex-direction:column;gap:3px;flex:1}
.etiquette .soc,.bandeau-soc .soc{font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  font-weight:700;color:var(--soc,var(--sourd))}
.etiquette .desig{font-size:16px;line-height:1.3}
.etiquette .marque{font-size:13px;color:var(--sourd)}
.ligne-prix{display:flex;align-items:baseline;justify-content:space-between;gap:8px;
  margin-top:auto;padding-top:10px;border-top:1px dashed var(--trait)}
.ligne-prix .cont{font-size:22px;font-weight:700;font-variant-numeric:tabular-nums;
  letter-spacing:-.01em}
.ligne-prix .prix{font-size:20px;font-weight:700;color:var(--bleu);font-variant-numeric:tabular-nums}
.ligne-prix .prix em{font-size:12px;font-weight:700;font-style:normal;color:var(--ambre);
  text-transform:uppercase;letter-spacing:.06em}
.etiquette .pied{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-top:8px}
.etiquette .pied code{font-size:12px}

/* la fiche */
.fiche{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:22px;
  align-items:start;margin-bottom:16px}
.galerie .grande{aspect-ratio:1;background:#fff;border:1px solid var(--trait);border-radius:12px;
  display:flex;align-items:center;justify-content:center;overflow:hidden;
  border-left:6px solid var(--soc,var(--trait))}
.galerie .grande img{width:100%;height:100%;object-fit:contain;display:block}
.galerie .petites{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}
.galerie .petites button{padding:0;width:64px;height:64px;border-radius:8px;
  border:2px solid var(--trait);background:#fff;overflow:hidden}
.galerie .petites button.ici{border-color:var(--bleu-3)}
.galerie .petites img{width:100%;height:100%;object-fit:contain}
.bandeau-soc{border-left:6px solid var(--soc);padding-left:14px;margin-bottom:6px}
.bandeau-soc h2{margin:2px 0 4px}
.faits{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;margin:16px 0}
.fait{background:var(--papier);border:1px solid var(--trait);border-radius:10px;padding:12px 14px}
.fait .v{display:block;font-size:22px;font-weight:700;font-variant-numeric:tabular-nums;line-height:1.15}
.fait .l{display:block;font-size:12px;color:var(--sourd);margin-top:4px}
.fait.prix .v{color:var(--bleu)}

/* les formulaires du bureau */
textarea,input[type=email],input[type=tel],input[type=url],input[type=search],input[type=password]{
  font-family:var(--sans);font-size:17px;padding:12px 14px;border-radius:10px;
  border:2px solid var(--trait);background:var(--papier);color:var(--encre);width:100%}
textarea{font-size:16px;line-height:1.45;resize:vertical}
textarea:focus,input[type=email]:focus,input[type=tel]:focus,input[type=url]:focus,
input[type=search]:focus,input[type=password]:focus{outline:none;border-color:var(--bleu-3);
  box-shadow:0 0 0 4px rgba(62,143,196,.18)}
input[type=color]{width:72px;height:50px;padding:4px;border:2px solid var(--trait);
  border-radius:10px;background:var(--papier)}
.grille-champs{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:2px 16px}
.grille-champs .champ:has(textarea){grid-column:1/-1}
label.case{display:flex;align-items:center;gap:10px;text-transform:none;letter-spacing:0;
  font-size:16px;color:var(--encre);font-weight:600;margin:6px 0 0}
label.case input{width:24px;height:24px;flex:none}
.aide{font-size:12.5px;color:var(--sourd);margin-top:5px;line-height:1.4}
.erreur{font-size:13.5px;color:var(--rouge);font-weight:600;margin-top:5px}
.en-erreur input,.en-erreur select,.en-erreur textarea{border-color:var(--rouge)}
.barre-actions{position:sticky;bottom:0;display:flex;gap:10px;justify-content:flex-end;
  padding:14px 0 6px;background:linear-gradient(to top,var(--creme) 75%,rgba(244,247,250,0))}
button:disabled{opacity:.6;cursor:progress}

/* les photos */
.depot-photos{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.depot-photos label.bouton{margin:0;text-transform:none;letter-spacing:0;font-size:16px;color:#fff;
  position:relative;overflow:hidden}
.depot-photos label.bouton.pale{color:var(--bleu-2)}
.depot-photos input[type=file]{position:absolute;inset:0;opacity:0;cursor:pointer}
.apercus{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.apercus:empty{display:none}
.apercus img{width:84px;height:84px;object-fit:cover;border-radius:8px;border:1px solid var(--trait)}
.photos-actuelles{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.photo-actuelle{border:1px solid var(--trait);border-radius:10px;overflow:hidden;background:#fff}
.photo-actuelle img{width:100%;aspect-ratio:1;object-fit:contain;padding:8px;display:block}
.photo-actuelle .gestes{display:flex;border-top:1px solid var(--trait)}
.photo-actuelle form{flex:1;margin:0}
.photo-actuelle button{width:100%;border-radius:0;font-size:13px;padding:10px 6px;
  background:var(--papier);color:var(--bleu-2)}
.photo-actuelle button:hover{background:var(--creme)}
.photo-actuelle button.retirer{color:var(--rouge)}
.photo-actuelle .marque-p{flex:1;text-align:center;font-size:11px;letter-spacing:.12em;
  text-transform:uppercase;font-weight:700;color:var(--vert-f);padding:11px 6px}

/* les sociétés */
.societes{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:14px}
.societe{background:var(--papier);border:1px solid var(--trait);border-top:6px solid var(--soc);
  border-radius:12px;padding:18px 20px;display:flex;flex-direction:column;gap:12px;align-items:flex-start}
.societe .tete{display:flex;align-items:center;gap:14px}
.societe .tete img{height:42px;max-width:110px;object-fit:contain}
.societe .chiffres{display:flex;gap:22px;font-size:13px;color:var(--sourd)}
.societe .chiffres b{display:block;color:var(--encre);font-size:22px;font-variant-numeric:tabular-nums;line-height:1.1}
.societe ul.manque{margin:0;padding-left:18px;font-size:14px;color:var(--ambre)}
.societe .bouton{margin-top:auto;align-self:stretch}

/* l'espace impression */
.imprimables{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px}
.imprimable{display:flex;flex-direction:column;gap:4px;background:var(--papier);border:1px solid var(--trait);
  border-radius:12px;padding:16px 18px;text-decoration:none;color:var(--encre)}
.imprimable:hover{border-color:var(--bleu-3)}
.imprimable b{font-size:16px}
.imprimable span{font-size:13.5px;color:var(--sourd)}
.imprimable .format{align-self:flex-start;font-size:11px;font-weight:700;letter-spacing:.08em;
  background:var(--creme);color:var(--bleu-2);border-radius:5px;padding:3px 8px;margin-top:6px}
.imprimable.bientot{opacity:.6;border-style:dashed}

@media (max-width: 860px){ .fiche{grid-template-columns:1fr} }
@media (max-width: 700px){
  form.carte.scan{flex-direction:column}
  .rayon{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .ligne-prix .cont{font-size:18px} .ligne-prix .prix{font-size:17px}
  .etiquette .desig{font-size:14.5px}
  .barre-actions{justify-content:stretch} .barre-actions > *{flex:1}
}
@media (prefers-reduced-motion: reduce){ .etiquette{transition:none} .etiquette:hover{transform:none} }

/* ═══════════════════════════════ LES BONS DE COMMANDE — 29/10/2026 ═══ */
.puce-mini{display:inline-flex;align-items:center;gap:6px;font-weight:600;font-size:14px}
.puce-mini::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--soc)}
.statut-brouillon{background:var(--creme);color:var(--sourd);border:1px solid var(--trait)}
.statut-a_signer{background:var(--ambre-c);color:var(--ambre)}
.statut-signe{background:#E4EEF7;color:var(--bleu)}
.statut-livre{background:var(--vert-c);color:var(--vert-f)}
.statut-annule{background:var(--rouge-c);color:var(--rouge)}
.actions-bon{display:flex;gap:8px;flex-wrap:wrap}
.actions-bon .bouton{font-size:15px;padding:11px 16px}
.bouton.vert-lien{background:var(--vert-f)} .bouton.vert-lien:hover{background:#0b5443}
.lignes-bon td{vertical-align:middle}
.vignette-ligne{width:58px} .vignette-ligne img{width:48px;height:48px;object-fit:contain;
  border:1px solid var(--trait);border-radius:8px;background:#fff;display:block}
.qte-ligne{margin:0;display:inline} .qte-ligne input{width:86px;font-size:17px;padding:8px 10px;text-align:right}
.lien-retirer{background:none;color:var(--rouge);font-size:15px;padding:6px 10px;font-weight:600}
.lien-retirer:hover{background:var(--rouge-c)}
.prix-a-fixer{color:var(--ambre);font-weight:700;font-size:12px;text-transform:uppercase;letter-spacing:.06em}
.pad-signature{width:100%;height:240px;border:2px dashed var(--trait);border-radius:12px;background:#fff;
  touch-action:none;display:block;cursor:crosshair}
.signature-vue{max-width:100%;max-height:120px;border:1px solid var(--trait);border-radius:8px;background:#fff;padding:6px}
.etapes{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.etapes form{margin:0}
.choix-sens{display:flex;gap:18px;flex-wrap:wrap}
.choix-sens label.case{margin:0}

/* ═══════════════════════════════════ LES APPAREILS — 29/10/2026 ═══ */
.entete-section{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-top:22px}
.entete-section h3{margin:0 0 10px}
.petit-bouton{font-size:14px;padding:8px 14px}
.appareils{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px}
.appareil{background:var(--papier);border:1px solid var(--trait);border-radius:12px;padding:14px 16px;
  display:flex;flex-direction:column;gap:10px}
.appareil.eteint{opacity:.55}
.appareil.c-est-moi{border-color:var(--bleu-3);box-shadow:0 0 0 3px rgba(62,143,196,.18)}
.tete-appareil{display:flex;align-items:center;gap:12px}
.tete-appareil > div{flex:1;min-width:0}
.icone-appareil{font-size:26px;line-height:1}
.voyant{width:12px;height:12px;border-radius:50%;background:#C9D2DA;flex:none}
.voyant.allume{background:var(--vert);box-shadow:0 0 0 4px rgba(29,158,117,.18)}
.appareil .vers label{margin-bottom:4px}
.appareil .vers select{font-size:16px;padding:10px 12px}
.pied-appareil{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:auto;
  border-top:1px solid var(--trait);padding-top:8px;font-size:14px}
.imprimantes-du-poste{list-style:none;margin:0;padding:0;font-size:14px;color:var(--sourd);line-height:1.7}
.ce-poste.actif{border-color:var(--vert);background:linear-gradient(var(--vert-c),var(--papier) 70%)}
.gros-texte{font-size:18px;margin-bottom:6px}
.ligne-form{display:flex;gap:10px;flex-wrap:wrap} .ligne-form select{flex:1;min-width:180px}
.aide-branchement{margin-top:22px}
.aide-branchement .grille{margin:0}

/* l'écoute en direct */
.ecoute h3{display:flex;align-items:center;gap:10px}
.onde{width:10px;height:10px;border-radius:50%;background:var(--vert);position:relative}
.onde::after{content:"";position:absolute;inset:-6px;border-radius:50%;border:2px solid var(--vert);
  animation:onde 1.6s ease-out infinite}
@keyframes onde{from{transform:scale(.5);opacity:1}to{transform:scale(1.6);opacity:0}}
.flux-scans{list-style:none;margin:0;padding:0;font-size:14px;max-height:260px;overflow:auto}
.flux-scans li{display:grid;grid-template-columns:auto 1fr;gap:2px 10px;padding:8px 0;
  border-bottom:1px solid var(--trait)}
.flux-scans .h{font-variant-numeric:tabular-nums;color:var(--sourd);font-size:13px}
.flux-scans .trajet{font-weight:600}
.flux-scans .quoi{grid-column:2;color:var(--sourd)}
.flux-scans li.nouveau{animation:arrive 1.2s ease-out}
@keyframes arrive{from{background:var(--vert-c)}to{background:transparent}}
.flux-scans .vide-flux{display:block;color:var(--sourd);border:0}
.flux-scans.grand li{display:block;font-size:17px;font-weight:600;padding:12px 4px}
.flux-scans.grand li.rate{color:var(--rouge)}
@media (prefers-reduced-motion: reduce){.onde::after,.flux-scans li.nouveau{animation:none}}

/* le PDA */
.pda-tete{display:flex;justify-content:space-between;gap:12px;align-items:flex-end;flex-wrap:wrap;margin-bottom:12px}
.pda-tete b{font-size:20px}
.pda-vers form{margin:0} .pda-vers select{font-size:16px;padding:10px 12px;min-width:200px}

/* l'annonce d'un scan reçu sur un poste */
.relais-annonce{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);z-index:50;
  background:var(--nuit);color:#fff;font-weight:700;padding:12px 20px;border-radius:999px;
  box-shadow:0 6px 24px rgba(18,41,61,.35)}

/* ═════════════════════════════ AJUSTER LE STOCK À LA MAIN — 29/10/2026 ═══ */
.palettes-a-ajuster{display:flex;flex-direction:column;gap:12px}
.palette-ajust{border:1px solid var(--trait);border-radius:10px;padding:12px 14px;background:var(--creme)}
.pa-tete{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:8px}
.pa-tete .adr{background:var(--nuit);color:#fff}
.pa-form{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap;margin:0}
.pa-form .champ{margin:0;flex:1;min-width:140px}
.pa-form input,.pa-form select{font-size:16px;padding:10px 12px}
.pa-form button{padding:11px 18px;font-size:15px}
.pa-form.deplacer{margin-top:8px;padding-top:8px;border-top:1px dashed var(--trait)}
b.plus{color:var(--vert-f)} b.moins{color:var(--rouge)}

/* ═══════════════════════════ LES ICÔNES AU TRAIT — 29/10/2026 ═══
   (Anthony : « moins IA les pictogrammes » — plus aucun émoji) */
.ic{width:1.15em;height:1.15em;vertical-align:-.2em;flex:none}
.bouton .ic,button .ic{margin-right:6px}
.icone-appareil{display:flex;align-items:center;justify-content:center;width:44px;height:44px;
  border-radius:10px;background:var(--creme);color:var(--bleu-2);flex:none}
.icone-appareil .ic{width:24px;height:24px;vertical-align:0}
.aide-branchement b{display:flex;align-items:center;gap:8px}
.lignes-reception input{font-size:16px;padding:9px 10px;min-width:0}
.lignes-reception input[type=number]{max-width:110px;text-align:right}
.lignes-reception input[type=text]{max-width:140px}
.lignes-reception input[type=date]{max-width:170px}
.lignes-reception tr.ligne-close td{opacity:.55}
header nav a.moi{opacity:.8;font-weight:500}
header nav a.moi:hover{opacity:1}
.statut-partiel{background:var(--ambre-c);color:var(--ambre)}

/* ═══════════════════════════ LA SIGNATURE À DISTANCE — 29/10/2026 ═══ */
.sig-envoyee{background:var(--ambre-c);color:var(--ambre)}
.sig-ouverte{background:#E4EEF7;color:var(--bleu)}
.sig-signee{background:var(--vert-c);color:var(--vert-f)}
.sig-annulee{background:var(--rouge-c);color:var(--rouge)}
.choix-pieces{display:flex;flex-direction:column;gap:8px}
.piece-choix{display:flex;align-items:center;gap:12px;padding:12px 14px;border:1px solid var(--trait);
  border-radius:10px;background:var(--papier);text-transform:none;letter-spacing:0;color:var(--encre);
  font-size:15px;font-weight:500;margin:0;cursor:pointer}
.piece-choix input{width:22px;height:22px;flex:none}
.piece-choix .ic{width:22px;height:22px;color:var(--bleu-2)}
.piece-choix span{flex:1}
.partage .ligne-form input{flex:1;font-size:14px;font-family:"SF Mono",Menlo,monospace}
.boutons-partage{display:flex;gap:10px;flex-wrap:wrap;margin:12px 0 6px}
.liste-pieces{list-style:none;margin:0;padding:0}
.liste-pieces li{display:flex;gap:10px;align-items:flex-start;padding:8px 0;border-bottom:1px solid var(--trait)}
.liste-pieces .ic{width:20px;height:20px;color:var(--bleu-2);margin-top:2px}
.suivi{margin:0 0 14px;padding-left:20px;line-height:1.9;color:var(--sourd)}
.suivi li.fini{color:var(--encre)}
.suivi li.fini::marker{color:var(--vert-f)}

/* ═══════════════════════════ LES ORDINATEURS RELIÉS — 30/10/2026 ═══
   Le programme du dépôt trouve les imprimantes du Wi-Fi ; on les couple ici. */
.autour{border-color:var(--bleu-3)}
.autour-tete{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap}
.autour-tete h3{display:flex;align-items:center;gap:8px;margin:0 0 4px}
.autour-tete h3 .ic{color:var(--bleu-2)}
.ordinateurs{list-style:none;margin:14px 0;padding:0}
.ordinateurs li{display:flex;align-items:center;gap:12px;padding:10px 0;border-top:1px solid var(--trait);flex-wrap:wrap}
.ordinateurs .qui{flex:1;min-width:220px}
.ordinateurs .qui .ic{color:var(--bleu-2)}
.actions-ordinateur{display:flex;align-items:center;gap:10px}
.actions-ordinateur form{margin:0}
.trouves{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,420px),1fr));gap:12px}
.trouve{display:flex;gap:14px;align-items:flex-start;flex-wrap:wrap;background:var(--papier);
  border:1px solid var(--trait);border-radius:12px;padding:14px 16px}
.trouve.couple{border-color:var(--vert);box-shadow:inset 3px 0 0 var(--vert)}
.trouve.absent{opacity:.6}
.trouve-corps{flex:1;min-width:0}
.trouve-corps b{display:block;font-size:16px}
.badges{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.badge{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:600;color:var(--sourd);
  background:var(--creme);border:1px solid var(--trait);border-radius:999px;padding:3px 9px}
.badge .ic{width:14px;height:14px}
.badge.chiffre{font-family:"SF Mono",Menlo,monospace;font-weight:500}
.badge.eteinte{background:var(--ambre-c);color:var(--ambre);border-color:transparent}
.trouve-actions{display:flex;flex-direction:column;align-items:flex-end;gap:8px;flex:none}
.trouve-actions form{margin:0}
.pastille.couplee{background:var(--vert-c);color:var(--vert-f)}
details.coupler summary{list-style:none;cursor:pointer}
details.coupler summary::-webkit-details-marker{display:none}
details.coupler[open]{flex-basis:100%}
.form-coupler{display:grid;gap:10px;margin-top:10px;padding:14px;background:var(--creme);border-radius:10px;min-width:260px}
.form-coupler label{display:flex;flex-direction:column;gap:4px;margin:0}
.form-coupler input,.form-coupler select{font-size:15px;padding:9px 10px}
.essai{font-size:13px;margin:8px 0 0}
.essai-fait{color:var(--vert-f)} .essai-echec{color:var(--rouge)} .essai-attente,.essai-envoye{color:var(--ambre)}
.vide-autour{display:flex;gap:14px;align-items:flex-start;margin-top:14px;padding:16px;border:1px dashed var(--trait);border-radius:12px}
.vide-autour > .ic{width:34px;height:34px;color:var(--bleu-3)}
.vide-autour p{margin:0}
.appareil .relie{color:var(--vert-f)}
.trois-cas .carte h3{margin:12px 0 6px}
.form-installer .grille{margin-bottom:12px}

/* la page du lien, ouverte sur l'appareil à installer */
.page-installer{background:var(--creme)}
.page-installer .entete-client{background:#fff;border-bottom:3px solid var(--nuit);padding:16px 20px;display:flex;align-items:center;gap:14px}
.page-installer .entete-client img{height:40px}
.page-installer .entete-client .qui{font-size:13px;color:var(--sourd)}
.page-installer .entete-client b{display:block;font-size:16px;color:var(--encre)}
.page-installer .page-client{max-width:680px;margin:0 auto;padding:22px 16px 60px}
.installer-ici{background:#fff;border:1px solid var(--trait);border-radius:14px;padding:22px 20px}
.installer-ici h1{font-size:24px;line-height:1.25;margin:14px 0 6px}
.installer-ici .bouton.large{display:flex;align-items:center;justify-content:center;font-size:19px;padding:18px;margin:18px 0 8px}
.etapes-installer{margin:16px 0 0;padding-left:22px;line-height:1.55}
.etapes-installer li{margin-bottom:10px}
.ensuite{margin-top:16px;padding-top:14px;border-top:1px solid var(--trait)}
.autres-appareils h3{margin:26px 0 10px;font-size:15px}
.choix-appareil{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px}
.choix-appareil a{display:flex;align-items:center;gap:8px;padding:12px;border:1px solid var(--trait);border-radius:10px;
  background:#fff;color:var(--encre);text-decoration:none;font-weight:600;font-size:14px}
.choix-appareil a .ic{color:var(--bleu-2)}
.choix-appareil a.actif{border-color:var(--bleu-3);box-shadow:0 0 0 3px rgba(62,143,196,.18)}
.page-installer .mention{font-size:12px;color:var(--sourd);line-height:1.5;margin-top:18px}
.page-installer .fin{text-align:center;padding:30px 16px}

/* ═══════════════════════════ LE CLICK & COLLECT — 30/10/2026 ═══ */
.rt-recue{background:var(--ambre-c);color:var(--ambre)}
.rt-prete{background:#E4EEF7;color:var(--bleu)}
.rt-retiree{background:var(--vert-c);color:var(--vert-f)}
.rt-annulee{background:var(--rouge-c);color:var(--rouge)}
.scan-retrait{min-width:min(100%,360px)}
.scan-retrait input{flex:1;font-size:16px}
.jours-depot{display:flex;gap:8px;flex-wrap:wrap;margin:16px 0}
.jours-depot a{padding:8px 14px;border:1px solid var(--trait);border-radius:999px;background:var(--papier);
  color:var(--encre);text-decoration:none;font-weight:600;font-size:14px}
.jours-depot a.actif{background:var(--nuit);border-color:var(--nuit);color:#fff}
.compteurs-retrait{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:16px}
.compteurs-retrait div{background:var(--papier);border:1px solid var(--trait);border-radius:12px;padding:10px 16px;min-width:110px}
.compteurs-retrait b{display:block;font-size:26px;line-height:1.1}
.compteurs-retrait span{font-size:13px;color:var(--sourd)}
.compteurs-retrait .sourd{opacity:.7}
.creneau-depot{display:grid;grid-template-columns:70px 1fr;gap:14px;padding:12px 0;border-top:1px solid var(--trait)}
.creneau-depot h3{margin:4px 0 0;font-size:18px;font-variant-numeric:tabular-nums}
.cartes-retrait{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr));gap:10px}
.carte-retrait{display:flex;flex-direction:column;gap:3px;padding:12px 14px;background:var(--papier);border:1px solid var(--trait);
  border-radius:12px;color:var(--encre);text-decoration:none}
.carte-retrait:hover{border-color:var(--bleu-3)}
.carte-retrait .pastille{align-self:flex-start;margin-bottom:4px}
.carte-retrait.statut-retiree{opacity:.65}
.carte.retard{border-color:var(--ambre)}
.carte.retard .carte-retrait{margin-bottom:8px}
.ou-prendre{display:inline-block;font-family:"SF Mono",Menlo,monospace;font-size:13px;background:var(--creme);
  border-radius:6px;padding:3px 8px;margin:2px 6px 2px 0}
.ou-prendre.manque{background:var(--rouge-c);color:var(--rouge);font-family:var(--sans);font-weight:700}
.gros-chiffre{font-size:20px}
.message-client{font-style:italic;background:var(--creme);border-radius:8px;padding:8px 12px}
.barre-actions-retrait{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:16px 0}
.barre-actions-retrait form{margin:0}
.prevenir{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.liste-remise{list-style:none;padding:0;margin:0 0 14px;font-size:17px;line-height:1.8}
.horaires-saisie td{padding:6px 10px 6px 0}
.horaires-saisie input{font-size:16px;padding:8px 10px;max-width:130px}
.fermetures{list-style:none;padding:0;margin:0 0 12px}
.case.gros{font-size:17px;font-weight:700;text-transform:none;letter-spacing:0;color:var(--encre)}
.facultatif{text-transform:none;letter-spacing:0;font-weight:400;color:var(--sourd)}
.rouge{color:var(--rouge);font-weight:700}

/* la page publique de commande */
.page-retrait{background:var(--creme)}
.retrait-tete{background:var(--nuit);color:#fff}
.retrait-tete-in{max-width:980px;margin:0 auto;padding:18px 16px;display:flex;align-items:center;gap:16px}
.retrait-tete img{height:44px;flex:none}
.retrait-tete h1{font-size:21px;margin:0;color:#fff;line-height:1.2}
.retrait-tete p{margin:3px 0 0;opacity:.85;font-size:14px}
.retrait-page{max-width:980px;margin:0 auto;padding:18px 16px 110px}
.etapes-retrait{display:flex;gap:6px;list-style:none;padding:0;margin:0 0 14px;counter-reset:e;font-size:13px;color:var(--sourd)}
.etapes-retrait li{counter-increment:e}
.etapes-retrait li::before{content:counter(e) ". "}
.etapes-retrait li:not(:last-child)::after{content:"  ›";padding-left:6px}
.bloc-retrait{background:#fff;border:1px solid var(--trait);border-radius:14px;padding:18px 16px;margin-bottom:16px}
.bloc-retrait h2{display:flex;align-items:center;gap:10px;font-size:19px;margin:0 0 12px}
.bloc-retrait h2 .num{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;
  background:var(--nuit);color:#fff;font-size:15px}
.marque-retrait{font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--sourd);margin:16px 0 8px;
  display:flex;align-items:center;gap:8px}
.marque-retrait::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--marque)}
.produits-retrait{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,290px),1fr));gap:10px}
.produit-retrait{display:grid;grid-template-columns:72px 1fr;gap:4px 12px;align-items:start;padding:12px;border:1px solid var(--trait);
  border-radius:12px;background:#fff}
.produit-retrait.choisi{border-color:var(--vert);box-shadow:0 0 0 2px rgba(29,158,117,.18)}
.produit-retrait.epuise{opacity:.55}
.produit-retrait img,.produit-retrait .sans-photo{width:72px;height:72px;object-fit:contain;border-radius:8px;background:var(--creme);
  grid-row:span 2;display:flex;align-items:center;justify-content:center;color:var(--sourd)}
.produit-corps{display:flex;flex-direction:column;gap:2px;min-width:0}
.prix-retrait b{font-size:18px}
.prix-retrait span{font-size:12px;color:var(--sourd)}
.prix-retrait .ht{margin-left:6px}
.dispo{font-size:12px;font-weight:700;color:var(--vert-f)}
.dispo.peu{color:var(--ambre)} .dispo.non{color:var(--rouge)}
.quantite-retrait{grid-column:2;display:flex;align-items:center;gap:6px;margin-top:6px}
.quantite-retrait button{width:42px;height:42px;padding:0;font-size:22px;line-height:1;border-radius:10px;background:var(--creme);
  color:var(--encre);border:1px solid var(--trait)}
.quantite-retrait input{width:64px;text-align:center;font-size:18px;padding:8px 4px}
.jours-retrait{display:flex;gap:8px;overflow-x:auto;padding-bottom:6px;margin-bottom:10px}
.jour-retrait{display:flex;flex-direction:column;align-items:center;min-width:64px;padding:8px 6px;border-radius:12px;
  background:#fff;color:var(--encre);border:1px solid var(--trait);font-size:12px;font-weight:600}
.jour-retrait b{font-size:20px}
.jour-retrait.actif{background:var(--nuit);color:#fff;border-color:var(--nuit)}
.creneaux-retrait{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:8px}
.creneaux-retrait > p{grid-column:1/-1;margin:0 0 2px}
.creneau{display:flex;align-items:center;justify-content:center;gap:6px;padding:12px 8px;border:1px solid var(--trait);border-radius:10px;
  background:#fff;cursor:pointer;font-weight:700;font-size:15px;text-transform:none;letter-spacing:0;color:var(--encre);margin:0;
  font-variant-numeric:tabular-nums}
.creneau input{position:absolute;opacity:0;pointer-events:none}
.creneau:has(input:checked){background:var(--vert-f);border-color:var(--vert-f);color:#fff}
.creneau:has(input:focus-visible){outline:3px solid var(--bleu-3);outline-offset:2px}
.creneau.complet{opacity:.45;cursor:not-allowed;text-decoration:line-through}
.creneau em{font-style:normal;font-weight:500;font-size:12px}
.piege{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.panier-retrait{position:fixed;left:0;right:0;bottom:0;background:#fff;border-top:1px solid var(--trait);
  box-shadow:0 -4px 16px rgba(18,41,61,.08);padding:12px 16px;display:flex;align-items:center;justify-content:space-between;gap:12px;z-index:5}
.panier-retrait > div{display:flex;flex-direction:column}
.panier-retrait span{font-size:15px;color:var(--sourd)}
.panier-retrait button{padding:14px 22px}
.horaires-retrait{margin-top:18px}
.horaires-retrait ul{list-style:none;padding:0;margin:0;background:#fff;border:1px solid var(--trait);border-radius:12px}
.horaires-retrait li{display:flex;justify-content:space-between;padding:8px 14px;border-bottom:1px solid var(--trait);font-size:14px}
.horaires-retrait li:last-child{border-bottom:0}
.page-retrait .mention{font-size:12px;color:var(--sourd);line-height:1.5}
.page-retrait .fin{text-align:center;padding:30px 16px}
.suivi-retrait{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;list-style:none;padding:0;margin:0 0 16px}
.suivi-retrait li{background:#fff;border:1px solid var(--trait);border-radius:12px;padding:10px 12px;color:var(--sourd);font-size:13px}
.suivi-retrait li b{display:block;font-size:16px;color:var(--sourd)}
.suivi-retrait li.fini{border-color:var(--vert);background:var(--vert-c)}
.suivi-retrait li.fini b{color:var(--vert-f)}
.rdv-retrait{background:#fff;border:2px solid var(--nuit);border-radius:14px;padding:18px 16px;margin-bottom:16px}
.rdv-retrait h2{font-size:22px;line-height:1.25;margin:2px 0 10px}
.consignes{background:var(--creme);border-radius:8px;padding:10px 12px}
.code-retrait{text-align:center;margin:12px 0}
.code-retrait svg{max-width:100%;height:auto}
.lignes-suivi td{padding:8px 8px 8px 0}
.lignes-suivi tr.total td{border-bottom:0}
@media (max-width:600px){
  .creneau-depot{grid-template-columns:1fr}
  .retrait-tete h1{font-size:18px}
}

/* ⚠ Un élément « hidden » reste caché, même si sa classe lui donne un display. */
[hidden]{display:none!important}
.carte table.pleine{display:table}