/* =========================================================
   BIZZOO Admin — feuille de style unique (mobile d'abord)
   Charte BIZZOO : bleu vif, bleu nuit, orange et ambre —
   les couleurs de l'icône. Le rouge ne dit plus la marque,
   seulement le danger.
   ========================================================= */

/* ---------- Jetons de design ---------- */
/* Même charte que l'application client, tirée de l'icône BIZZOO :
   bleu vif, bleu nuit, orange de la vague, ambre de l'anse. L'orange
   sert de fond et porte du bleu nuit ; en texte, c'est l'orange
   foncé. Le rouge est réservé au danger (suppression, erreur). */
/* ---------- Poppins, embarquée ---------- */
/* LES FICHIERS SONT DANS L'APPLICATION, pas chez Google. Une police
   allée chercher sur le réseau ne s'affiche pas quand il n'y en a
   pas — et BIZZOO doit s'ouvrir hors connexion. Quatre graisses
   latines : 31 Ko en tout, moins qu'une seule photo de produit.
   « font-display: swap » : le texte s'affiche tout de suite dans la
   police du téléphone, puis bascule. Mieux vaut un texte lisible
   aussitôt qu'un écran blanc le temps du chargement. */
@font-face{font-family:'Poppins';font-style:normal;font-weight:400;font-display:swap;
  src:url(polices/poppins-400.woff2) format('woff2')}
@font-face{font-family:'Poppins';font-style:normal;font-weight:500;font-display:swap;
  src:url(polices/poppins-500.woff2) format('woff2')}
@font-face{font-family:'Poppins';font-style:normal;font-weight:600;font-display:swap;
  src:url(polices/poppins-600.woff2) format('woff2')}
@font-face{font-family:'Poppins';font-style:normal;font-weight:700;font-display:swap;
  src:url(polices/poppins-700.woff2) format('woff2')}

:root{
  /* LE BLEU DE L'ICÔNE, et les nuances qui en descendent. Chacune garde
     la clarté de la nuance de la DA qu'elle remplace — donc les mêmes
     contrastes — et prend la couleur que la tuile de l'icône a à cette
     clarté, le long de sa diagonale : le bleu principal tombe au milieu
     de la tuile, les plus claires éclaircissent son bleu le plus clair,
     la plus sombre assombrit son plus sombre (voir le README).
     Les ombres reprennent --bleu et --bleu-900 en rgba(…) : elles
     changent avec eux. */
  --bleu-900:#091A51;
  --bleu-800:#102A7C;
  --bleu-700:#1A3B98;
  --bleu:#2550B7;
  --bleu-400:#3B76F4;
  --bleu-300:#749EF8;
  --bleu-100:#D5E2FD;
  --bleu-50:#ECF2FE;

  /* L'ORANGE DE LA DA, et le texte qu'il porte : BLANC, comme sur la
     DA corrigée — ses trois boutons, sa pastille de remise, sa cloche.

     CE N'EST PAS LE CHOIX LE PLUS LISIBLE, et il faut le savoir : blanc
     sur cet orange donne 2,36:1, sous le seuil des règles
     d'accessibilité ; le texte sombre de la DA y donnait 6,21:1, et la
     version précédente l'employait pour cette raison. La marque a
     tranché pour le blanc. Ce jeton est le seul endroit à changer pour
     revenir au sombre : « #1F2937 », et tous les composants orange
     suivent.

     En TEXTE sur fond clair, c'est l'orange foncé — l'orange vif y
     tomberait au même 2,36:1. */
  --orange:#FF8A00;
  --orange-texte:#FFFFFF;
  --orange-fonce:#A85800;
  --orange-clair:#FFF1DE;
  --ambre:#FFA808;
  --ambre-clair:#FFF3DE;

  --rouge:#D92D20;
  --rouge-fonce:#B42318;
  --rouge-clair:#FEE4E2;
  --vert:#0F9D58;
  --vert-clair:#E4F5EC;
  --wa:#1FAF56;

  /* LE TEXTE ET LE FOND DE LA DA. */
  --encre:#1F2937;
  --encre-douce:#4B5563;
  --encre-tres-douce:#9AA3AF;
  --trait:#E3E8EF;
  --fond:#F5F7FA;
  --blanc:#FFFFFF;

  --ombre:0 12px 30px -18px rgba(9,26,81,.55);
  --ombre-forte:0 20px 45px -20px rgba(9,26,81,.6);
  --r-sm:10px;
  --r:14px;
  --r-lg:20px;
  /* Poppins d'abord ; la police du téléphone tant qu'elle charge, et
     pour les alphabets qu'elle ne couvre pas. */
  --police:'Poppins',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --barre-h:66px;
  --safe-b:max(env(safe-area-inset-bottom,0px), 8px);
}

*,*::before,*::after{box-sizing:border-box}

html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  font-family:var(--police);
  background:var(--fond);
  color:var(--encre);
  -webkit-font-smoothing:antialiased;
  overscroll-behavior-y:none;
}

img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
ul{margin:0;padding:0;list-style:none}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
h1,h2,h3,h4{margin:0;line-height:1.25}

.ic{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex:none}
.ic-sm{width:17px;height:17px}
.ic-lg{width:26px;height:26px}

/* ---------- Barre supérieure ---------- */
.topbar{
  /* BLANC, comme la DA. Le dégradé bleu foncé d'avant avalait le
     mot-symbole — dont le « Bizz » est bleu — et forçait tout ce que
     l'en-tête porte à s'écrire en blanc. Sur fond clair, la marque
     reste elle-même et le titre se lit à 13,7:1. */
  position:sticky;top:0;z-index:30;
  background:var(--blanc);
  color:var(--encre);
  padding:calc(env(safe-area-inset-top,0px) + 14px) 16px 12px;
  border-bottom:1px solid var(--trait);
}
.topbar-ligne{display:flex;align-items:center;gap:12px;min-height:40px}
.topbar h1{font-size:18px;font-weight:700;letter-spacing:-.2px;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.topbar .sous{font-size:12.5px;color:var(--encre-douce);margin-top:2px}
.topbar-actions{display:flex;gap:6px;align-items:center}
.topbar-logo{flex:1;min-width:0}
.btn-ic{
  display:inline-flex;align-items:center;justify-content:center;
  width:38px;height:38px;border-radius:12px;border:0;
  /* Sur l'en-tête blanc, un bouton translucide ne se voyait plus. */
  background:var(--fond);color:var(--encre);
}
.btn-ic:active{transform:scale(.94)}
/* L'en-tête est blanc : un bouton blanc sur blanc ne se voit plus. */
.topbar .btn-ic{color:var(--encre)}
.btn-ic-clair{background:var(--bleu-50);color:var(--bleu-800);width:34px;height:34px}
.btn-ic-clair:disabled{opacity:.35}
.btn-ic-danger{color:var(--rouge-fonce);background:var(--rouge-clair)}

/* ---------- Logo ---------- */
/* ---------- Le mot-symbole ---------- */
/* Écrit, pas dessiné : net à toutes les tailles, et rien à charger. */
.logo-mot{
  display:inline-block;position:relative;
  font-weight:700;font-size:26px;line-height:1;letter-spacing:-.01em;
  padding-bottom:9px;white-space:nowrap;
}
.logo-bizz{color:var(--bleu)}
.logo-oo{color:var(--orange)}
/* Les deux points, sous le mot : ils sont au logo ce que les roues
   sont au chariot de l'icône. */
.logo-points{
  position:absolute;left:.09em;bottom:1px;display:flex;gap:.16em;
}
.logo-points i{width:.17em;height:.17em;border-radius:50%;display:block}
.logo-points i:first-child{background:var(--bleu)}
.logo-points i:last-child{background:var(--orange)}
/* Sur un fond sombre, le bleu du mot disparaîtrait. */
.logo-mot.clair .logo-bizz,
.logo-mot.clair .logo-points i:first-child{color:#fff;background:#fff}
.logo-mot.clair .logo-bizz{background:none;color:#fff}
.logo-sous{
  display:block;font-size:10.5px;font-weight:600;color:var(--encre-douce);
  letter-spacing:.01em;margin-top:3px;white-space:nowrap;
}

.logo{display:inline-flex;align-items:center;gap:9px;min-width:0}
.marque{flex:none;display:block;object-fit:contain}
.logo-textes{display:flex;flex-direction:column;min-width:0;line-height:1.05}

/* ---------- Zone de vue ---------- */
.vue{
  padding:16px 16px calc(var(--barre-h) + var(--safe-b) + 28px);
  max-width:720px;margin:0 auto;
  outline:none;
}
.vue > * + *{margin-top:14px}

/* ---------- Barre d'onglets ---------- */
.tabbar{
  position:fixed;left:0;right:0;bottom:0;z-index:40;
  display:grid;grid-template-columns:repeat(5,1fr);
  align-items:center;
  height:calc(var(--barre-h) + var(--safe-b));
  padding-bottom:var(--safe-b);
  background:rgba(255,255,255,.96);
  backdrop-filter:blur(12px);
  border-top:1px solid var(--trait);
}
.tabbar a{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  height:100%;font-size:10.5px;font-weight:600;color:var(--encre-tres-douce);
}
.tabbar a.actif{color:var(--bleu-700)}
.tabbar a.actif .ic{stroke-width:2}
/* Ces deux-là n'existent que dans le menu latéral, sur ordinateur :
   au téléphone, le nom ferait une sixième colonne et le bouton
   orange perdrait son rond. */
.tabbar-marque,.tab-cta-nom{display:none}
.tab-cta{position:relative}
.tab-cta-rond{
  display:flex;align-items:center;justify-content:center;
  width:52px;height:52px;border-radius:50%;
  background:linear-gradient(135deg,var(--orange),var(--orange-fonce));
  color:#fff;box-shadow:0 10px 22px -8px rgba(201,77,0,.8);
  margin-bottom:12px;
}
.tab-cta-rond .ic{stroke-width:2.4;width:26px;height:26px}
.tab-cta:active .tab-cta-rond{transform:scale(.93)}

/* ---------- Cartes & boutons ---------- */
.carte{
  background:var(--blanc);
  border-radius:var(--r);
  padding:16px;
  box-shadow:var(--ombre);
}
/* UNE CARTE PEUT ÊTRE UN LIEN, et « a » reste alors en ligne : son fond
   ne couvre que des bouts de ligne, le titre et le texte débordent sur
   la page, un rectangle blanc reste au bord — la carte Stock de
   l'accueil l'a montré. Toute carte-lien est donc un bloc ; « :where »
   laisse aux variantes en flex, plus bas, le dernier mot. */
:where(a).carte{display:block}
.carte-titre{display:flex;align-items:center;gap:7px;font-size:15px;font-weight:700;margin-bottom:12px}
.carte-titre .ic-sm{color:var(--bleu-700)}
.carte-liste{padding:6px 8px}

.btn{
  /* BOUTON PRINCIPAL DE LA DA : bleu plein, texte blanc (7,23:1),
     coins arrondis. Le dégradé d'avant venait d'une autre charte ;
     la DA montre un aplat. */
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  /* En pilule, comme les trois boutons de la DA corrigée. */
  min-height:48px;padding:10px 20px;border:0;border-radius:999px;
  background:var(--bleu);
  color:#fff;font-weight:600;font-size:15px;
  box-shadow:0 10px 22px -12px rgba(37,80,183,.6);
  width:100%;
}
.btn:active{transform:scale(.98)}
.btn-clair{
  /* BOUTON SECONDAIRE DE LA DA : fond blanc, trait bleu, texte bleu. */
  background:var(--blanc);color:var(--bleu);box-shadow:none;
  border:1.5px solid var(--bleu);
}
/* BOUTON ORANGE DE LA DA : l'action qui engage — ajouter au panier,
   passer la commande. Texte blanc et gras, comme la DA corrigée : voir
   la note sur « --orange-texte » dans les jetons de design. */
.btn-orange{
  background:var(--orange);color:var(--orange-texte);font-weight:700;
  box-shadow:0 10px 22px -12px rgba(255,138,0,.7);
}
/* LIEN TEXTE DE LA DA : souligné, bleu, sans fond ni cadre. */
.lien-texte{
  color:var(--bleu);font-weight:600;text-decoration:underline;
  text-underline-offset:3px;
}
.btn-danger{background:linear-gradient(135deg,var(--rouge),var(--rouge-fonce));box-shadow:0 10px 22px -10px rgba(230,35,41,.6)}
.btn-danger-clair{background:var(--rouge-clair);color:var(--rouge-fonce);border-color:#F6C6C7}
.btn-rangee{display:flex;flex-direction:column;gap:10px}

.aide{font-size:12.5px;color:var(--encre-tres-douce);line-height:1.5}
.aide-inline{font-size:12px;font-weight:500;color:var(--encre-tres-douce)}

/* ---------- Accueil : chiffres clés ---------- */
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.stat{
  background:var(--blanc);border-radius:var(--r);
  padding:14px 10px;text-align:center;
  box-shadow:var(--ombre);
  display:flex;flex-direction:column;gap:3px;
}
.stat:active{transform:scale(.97)}
.stat-valeur{font-size:22px;font-weight:800;color:var(--bleu-800)}
.stat-valeur small{font-size:13px;color:var(--encre-tres-douce);font-weight:700}
.stat-label{font-size:11px;font-weight:700;color:var(--encre-tres-douce);text-transform:uppercase;letter-spacing:.06em}

.carte-publier{border-top:4px solid var(--orange)}
.pub-etat{margin:0 0 10px;font-size:13.5px;line-height:1.5;color:var(--encre-douce)}
.note-attente{
  display:flex;align-items:center;gap:8px;
  background:#FFF6E5;border:1px solid #F5DEB0;color:#8A5B00;
  font-size:12.5px;font-weight:600;
  padding:10px 12px;border-radius:var(--r-sm);
  margin-bottom:12px;
}
.note-ok{
  display:flex;align-items:center;gap:8px;
  background:var(--vert-clair);border:1px solid #BFE6CF;color:#0B6E3E;
  font-size:12.5px;font-weight:600;
  padding:10px 12px;border-radius:var(--r-sm);
  margin-bottom:12px;
}

/* Boutons monter / descendre / modifier, en bout de ligne. */
.avant-actions{display:flex;gap:5px;align-items:center}

/* ---------- Lignes produit ---------- */
.ligne{
  display:flex;align-items:center;gap:11px;width:100%;
  padding:10px 8px;border:0;background:none;text-align:left;
  border-radius:var(--r-sm);
}
.ligne:active{background:var(--bleu-50)}
.ligne + .ligne{border-top:1px solid var(--trait)}
.pastille{
  flex:none;width:46px;height:46px;border-radius:12px;overflow:hidden;min-height:0;
  background:var(--bleu-50);display:flex;align-items:center;justify-content:center;
  color:var(--bleu-400);
}
.pastille img{width:100%;height:100%;object-fit:cover}
.pastille-vide{color:#A9BDD6}
.ligne-corps{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.ligne-titre{font-size:14px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ligne-sous{font-size:11.5px;color:var(--encre-tres-douce);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ligne-fin{display:flex;flex-direction:column;align-items:flex-end;gap:4px}
.ligne-montant{font-size:13px;font-weight:800;color:var(--orange-fonce)}
.ligne-stock{font-size:11.5px;font-weight:700;color:var(--encre-tres-douce)}
.ligne-stock-vide{color:var(--rouge-fonce)}
.ligne-badges{display:flex;gap:4px}

/* Saisie rapide du stock : − [ 12 ] + */
.stock-saisie{display:flex;align-items:center;justify-content:center;gap:14px}
.stock-saisie .btn-ic{width:46px;height:46px}
.stock-saisie input{
  width:110px;text-align:center;
  font-size:26px;font-weight:800;color:var(--encre);
  border:1.5px solid var(--trait);border-radius:var(--r-sm);
  padding:10px 8px;background:var(--blanc);
}
.stock-saisie input:focus{outline:none;border-color:var(--bleu);}
/* Ce que dit la base au moment d'ouvrir la feuille. */
.stock-actuel{margin:0 0 8px;font-size:13.5px;color:var(--encre-douce)}
.stock-actuel strong{color:var(--encre)}

/* ---------- L'écran Stock ----------
   Le chiffre en gros, en bout de ligne : c'est lui qu'on cherche. La
   couleur dit l'urgence avant qu'on ait lu le mot. */
.stock-aide{padding:12px 14px}
.stock-chiffre{font-size:20px;font-weight:800;line-height:1;color:var(--encre)}
.stock-chiffre.stock-rupture{color:var(--rouge-fonce)}
.stock-chiffre.stock-bas{color:var(--orange-fonce)}
.stock-chiffre.stock-ok{color:#0B6E3E}

/* ---------- Historique ---------- */
.histo-jour{
  margin:18px 4px 8px;font-size:12.5px;font-weight:800;
  color:var(--encre-tres-douce);text-transform:uppercase;letter-spacing:.06em;
}
.histo-ligne{display:flex;align-items:flex-start;gap:11px;padding:11px 8px}
.histo-ligne + .histo-ligne{border-top:1px solid var(--trait)}
/* Une action annulée reste au journal, en retrait : l'historique dit ce
   qui s'est passé, y compris qu'on est revenu en arrière. */
.histo-annulee{opacity:.55}
.histo-annulee .histo-libelle{text-decoration:line-through}
.histo-marque-annulee{
  display:inline-flex;align-items:center;gap:5px;margin-top:3px;
  font-size:11.5px;font-weight:700;color:var(--orange-fonce);
}
.histo-ligne [data-annuler]{flex:none;align-self:center}
.histo-compact{padding:9px 0}
.histo-compact + .histo-compact{border-top:1px solid var(--trait)}
.histo-rond{
  flex:none;display:flex;align-items:center;justify-content:center;
  width:34px;height:34px;border-radius:11px;
}
.histo-vert{background:var(--vert-clair);color:var(--vert)}
.histo-bleu{background:var(--bleu-50);color:var(--bleu-700)}
.histo-rouge{background:var(--rouge-clair);color:var(--rouge-fonce)}
.histo-or{background:var(--ambre-clair);color:var(--orange-fonce)}
.histo-gris{background:#EEF1F6;color:var(--encre-douce)}
.histo-corps{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.histo-libelle{font-size:13.5px;font-weight:600;line-height:1.4}
.histo-details{font-size:11.5px;color:var(--encre-tres-douce)}

/* ---------- Slider : images libres puis produits mis en avant ---------- */
.titre-section{
  margin:20px 4px 2px;font-size:12.5px;font-weight:800;
  color:var(--encre-tres-douce);text-transform:uppercase;letter-spacing:.06em;
}
.avant-ligne{display:flex;align-items:center;gap:10px;padding:7px 0}
.avant-ligne + .avant-ligne{border-top:1px solid var(--trait)}
.avant-num{
  flex:none;width:24px;height:24px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--orange);color:var(--orange-texte);font-size:12.5px;font-weight:800;
}
.avant-nom{
  flex:1;min-width:0;text-align:left;border:0;background:none;padding:0;
  font-size:13.5px;font-weight:700;color:var(--encre);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.badge-avant{background:var(--ambre-clair);color:var(--orange-fonce)}
.slide-bloc{padding:10px}
.slide-eteint{opacity:.6}
.slide-apercu{
  position:relative;border-radius:var(--r-sm);overflow:hidden;
  aspect-ratio:16/10;background:var(--bleu-50);
}
.slide-apercu img,
.slide-apercu video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#000}
/* Une vignette de vidéo se signale : sans cela, l'image figée de la
   première seconde se prend pour une photo. */
.slide-marque-video{
  position:absolute;bottom:8px;right:8px;
  display:inline-flex;align-items:center;gap:5px;
  background:rgba(6,16,31,.72);color:#fff;
  font-size:11px;font-weight:700;padding:3px 8px;border-radius:7px;
}
/* Ajouter un écran : une photo ou une vidéo, côte à côte. */
.media-choix{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.media-choix .photo-ajout{aspect-ratio:4/3}
.media-choix .photo-ajout small{font-size:10.5px;font-weight:600;color:var(--encre-tres-douce)}
.slide-etiquette{
  position:absolute;top:8px;left:8px;
  background:rgba(6,16,31,.72);color:#fff;
  font-size:11px;font-weight:700;padding:3px 8px;border-radius:7px;
}
.slide-pied{display:flex;align-items:center;gap:10px;padding:10px 4px 2px}
.slide-texte{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.slide-titre{
  font-size:13.5px;font-weight:700;line-height:1.35;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.slide-lien{
  font-size:11.5px;color:var(--encre-tres-douce);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
/* Bande d'aperçu sur l'accueil */
.slider-apercu{
  display:flex;gap:8px;overflow-x:auto;padding-bottom:4px;
  scrollbar-width:none;-webkit-overflow-scrolling:touch;
}
.slider-apercu::-webkit-scrollbar{display:none}
.slider-apercu-img{
  position:relative;flex:0 0 128px;height:80px;
  border-radius:var(--r-sm);overflow:hidden;background:var(--bleu-50);
}
.slider-apercu-img img,
.slider-apercu-img video{width:100%;height:100%;object-fit:cover;display:block;background:#000}
.slider-apercu-img .slide-etiquette{top:6px;left:6px;font-size:10px;padding:2px 6px}

/* ---------- Comptes de l'équipe ---------- */
.compte-ligne{display:flex;align-items:center;gap:11px;padding:11px 0}
.compte-ligne + .compte-ligne{border-top:1px solid var(--trait)}
.compte-inactif{opacity:.55}
.compte-rond{
  flex:none;display:flex;align-items:center;justify-content:center;
  width:36px;height:36px;border-radius:12px;
  background:#EEF1F6;color:var(--encre-douce);
}
.compte-rond-admin{background:var(--ambre-clair);color:var(--orange-fonce)}
.compte-corps{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.compte-email{
  font-size:13.5px;font-weight:700;line-height:1.35;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.compte-moi{
  font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;
  background:var(--bleu-50);color:var(--bleu-700);
  padding:2px 6px;border-radius:6px;vertical-align:1px;
}
.compte-details{font-size:11.5px;color:var(--encre-tres-douce)}

/* ---------- Recherche & puces ---------- */
.recherche-boite{
  display:flex;align-items:center;gap:10px;
  background:var(--blanc);border:1.5px solid var(--trait);
  border-radius:14px;padding:4px 14px;
  box-shadow:var(--ombre);
  color:var(--encre-tres-douce);
}
.recherche-boite:focus-within{border-color:var(--bleu)}
.recherche-boite input{
  flex:1;border:0;outline:none;background:none;
  min-height:46px;font-size:15px;color:var(--encre);
}
.puces{display:flex;gap:8px;overflow-x:auto;padding:2px;scrollbar-width:none}
.puces::-webkit-scrollbar{display:none}
.puce{
  flex:none;display:inline-flex;align-items:center;
  padding:8px 14px;border-radius:999px;
  background:var(--blanc);border:1px solid var(--trait);
  font-size:12.5px;font-weight:700;color:var(--encre-douce);
}
.puce.active{background:var(--bleu-700);border-color:var(--bleu-700);color:#fff}
.puce-fixe{background:var(--bleu-50);border-color:var(--bleu-100);color:var(--bleu-800)}

/* ---------- Badges & prix ---------- */
.badge{
  display:inline-flex;align-items:center;gap:4px;
  padding:4px 9px;border-radius:999px;
  font-size:11px;font-weight:800;
}
.badge .ic-sm{width:13px;height:13px}
.badge-promo{background:var(--orange);color:var(--orange-texte)}
.badge-flash{background:var(--ambre);color:var(--bleu-900)}
.badge-rupture{background:var(--rouge);color:#fff}
.badge-disponible{background:var(--vert-clair);color:var(--vert)}
.badge-commande{background:var(--bleu-50);color:var(--bleu-700)}
/* Un réassort en route : l'ambre de la charte, qui dit l'attente
   sans alarmer comme le rouge de la rupture. */
.badge-approvisionnement{background:var(--ambre-clair);color:var(--orange-fonce)}
/* LE SUIVI D'UNE COMMANDE SE LIT EN QUATRE PALIERS, et quatre paliers
   demandent quatre couleurs : « Payé » bleu clair (rien à faire
   encore), « Colis préparé » ambre (la boutique s'en occupe),
   « Livraison en cours » bleu profond (ça bouge), « Livré » vert.
   Deux paliers de la même teinte, et la progression ne se lit plus. */
.badge-livraison{background:var(--bleu-700);color:#fff}
.badge-ok{background:var(--vert-clair);color:var(--vert)}
/* Une commande partie au prix revendeur : BIZZOO y laisse sa marge,
   la boutique touche autant. Le dire évite de croire à une erreur. */
.badge-revendeur{background:var(--vert-clair);color:var(--vert)}

.prix{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.prix-actuel{font-size:14.5px;font-weight:800;color:var(--orange-fonce)}
.prix-grand .prix-actuel{font-size:22px}
.prix-ancien{font-size:11.5px;color:var(--encre-tres-douce)}
.prix-grand .prix-ancien{font-size:14px}

/* ---------- Fiche produit ---------- */
.fiche-badges{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:9px}
.fiche-nom{font-size:19px;font-weight:800;letter-spacing:-.2px;line-height:1.3;margin-bottom:8px}
.fiche-description p{margin:0 0 9px;font-size:14px;line-height:1.6;color:var(--encre-douce)}
.fiche-description p:last-child{margin-bottom:0}

.photos-bande{
  display:flex;gap:10px;overflow-x:auto;
  padding:2px;scrollbar-width:none;-webkit-overflow-scrolling:touch;
}
.photos-bande::-webkit-scrollbar{display:none}
.photos-bande-img{
  flex:0 0 150px;height:150px;object-fit:cover;
  border-radius:var(--r);box-shadow:var(--ombre);
  background:var(--blanc);
}
.photo-absente{
  display:flex;align-items:center;gap:10px;
  color:var(--encre-tres-douce);font-size:12.5px;line-height:1.5;
}
.photo-absente .ic{color:#A9BDD6}

/* ---------- Formulaire produit : photos ---------- */
.photos-zone{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.photo-boite{
  position:relative;aspect-ratio:1/1;border-radius:var(--r-sm);
  overflow:hidden;background:var(--bleu-50);min-height:0;
}
.photo-boite img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.photo-principale{
  position:absolute;left:0;right:0;bottom:0;
  background:rgba(8,42,82,.72);color:#fff;
  font-size:10px;font-weight:700;text-align:center;
  padding:3px 4px;letter-spacing:.04em;
}
.photo-retirer{
  position:absolute;top:5px;right:5px;
  width:26px;height:26px;border-radius:50%;border:0;
  background:rgba(10,28,54,.72);color:#fff;
  display:flex;align-items:center;justify-content:center;
}
.photo-retirer .ic-sm{width:14px;height:14px}
.photo-ajout{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  aspect-ratio:1/1;border-radius:var(--r-sm);
  border:2px dashed var(--bleu-100);color:var(--bleu-700);
  font-size:12px;font-weight:700;cursor:pointer;
  background:var(--bleu-50);
}
.photo-ajout:active{transform:scale(.97)}

/* ---------- Vidéo de présentation ---------- */
.video-ajout{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;
  padding:22px 14px;border-radius:var(--r-sm);
  border:2px dashed var(--bleu-100);color:var(--bleu-700);
  font-size:13.5px;font-weight:700;cursor:pointer;text-align:center;
  background:var(--bleu-50);
}
.video-ajout:active{transform:scale(.98)}
.video-ajout small{font-size:11.5px;font-weight:600;color:var(--encre-tres-douce)}
.video-boite{border:1px solid var(--trait);border-radius:var(--r-sm);overflow:hidden}
.video-boite video{width:100%;max-height:260px;background:#000;display:block}
.video-pied{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:8px 10px;background:var(--bleu-50);
  font-size:12px;font-weight:700;color:var(--encre-douce);
}
.video-lecture{width:100%;max-height:300px;background:#000;border-radius:var(--r-sm);display:block}

/* ---------- Champs de formulaire ---------- */
.champ{margin-bottom:14px}
.champ:last-child{margin-bottom:0}
.champ label{display:block;font-size:12.5px;font-weight:700;color:var(--encre-douce);margin-bottom:6px}
.obligatoire{color:var(--rouge)}
/* Une valeur qu'on montre sans la laisser modifier : elle vient
   d'ailleurs, et un champ de saisie grisé laisserait croire l'inverse. */
.lecture-seule{
  padding:11px 13px;border-radius:12px;background:var(--fond);
  border:1px solid var(--trait);
  font-size:14px;font-weight:700;color:var(--encre);
}
.champ input,.champ select,.champ textarea{
  width:100%;min-height:48px;
  border:1.5px solid var(--trait);border-radius:12px;
  background:var(--blanc);
  padding:12px 14px;font-size:15px;outline:none;
}
.champ textarea{resize:vertical;line-height:1.5;min-height:0}
.champ input:focus,.champ select:focus,.champ textarea:focus{border-color:var(--bleu)}
.champ select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2354637A' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center}
.champ .aide{margin-top:6px}
.champ-montant{position:relative;display:flex;align-items:center}
.champ-montant input{padding-right:64px}
.champ-montant .devise{
  position:absolute;right:14px;
  font-size:13px;font-weight:700;color:var(--encre-tres-douce);
}
.champ-duo{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.champ-jeton{display:flex;gap:8px;align-items:center}
.champ-jeton input{flex:1}
.champ-jeton .btn-ic-clair{flex:none;width:48px;height:48px;border-radius:12px}

/* ---------- Interrupteurs ---------- */
.inter{
  display:flex;align-items:center;gap:12px;
  padding:10px 0;cursor:pointer;
}
.inter + .inter{border-top:1px solid var(--trait)}
.inter-textes{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.inter-label{font-size:14px;font-weight:700}
.inter input{position:absolute;opacity:0;pointer-events:none}
.inter-piste{
  flex:none;width:50px;height:30px;border-radius:999px;
  background:#CBD6E4;position:relative;transition:background .2s;
}
.inter-pouce{
  position:absolute;top:3px;left:3px;
  width:24px;height:24px;border-radius:50%;
  background:#fff;box-shadow:0 2px 6px rgba(10,28,54,.3);
  transition:transform .2s;
}
.inter input:checked + .inter-piste{background:var(--vert)}
.inter input:checked + .inter-piste .inter-pouce{transform:translateX(20px)}

/* ---------- Catégories ---------- */
.cat-bloc{padding:13px 16px}
.cat-bloc-entete{display:flex;align-items:center;gap:10px}
/* La pastille ronde de la liste : la même que chez le client, en plus
   petit. C'est elle qu'on reconnaît d'un écran à l'autre. */
.cat-pastille{
  flex:none;width:38px;height:38px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;color:#fff;
  position:relative;overflow:hidden;
}
.cat-pastille .ic{width:20px;height:20px}
/* La photo, quand la catégorie en a une, recouvre l'icône : si elle ne
   se charge pas, elle s'efface et l'icône reparaît (voir « data-secours »). */
.cat-pastille img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* L'aperçu dans la fiche : rond, comme chez le client — on voit tout de
   suite ce que les coins perdront. La croix reste dans le coin carré. */
.cat-photo-boite{overflow:visible;background:none}
.cat-photo-boite img{border-radius:50%;box-shadow:0 0 0 1px var(--trait)}
.cat-bloc-nom{flex:1;min-width:0;font-size:14.5px;font-weight:800;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cat-bloc-compte{flex:none;font-size:11.5px;font-weight:700;color:var(--encre-tres-douce)}
.cat-bloc-sous{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}
.sous-ligne{display:flex;gap:8px;align-items:center;margin-bottom:8px}
.sous-ligne input{
  flex:1;min-height:44px;border:1.5px solid var(--trait);border-radius:11px;
  padding:10px 12px;font-size:14px;outline:none;background:var(--blanc);
}
.sous-ligne input:focus{border-color:var(--bleu)}
.sous-ligne .btn-ic-clair{flex:none}

/* ---------- Listes répétables (autres numéros, autres adresses) ---------- */
.ligne-multi{
  display:flex;gap:10px;align-items:flex-start;
  padding:12px;margin-bottom:10px;
  border:1.5px solid var(--trait);border-radius:var(--r-md);
  background:var(--bleu-50);
}
.ligne-multi-champs{flex:1;min-width:0;display:flex;flex-direction:column;gap:8px}
.ligne-multi-champs input[type=text],.ligne-multi-champs input[type=tel]{
  width:100%;min-height:44px;
  border:1.5px solid var(--trait);border-radius:11px;background:var(--blanc);
  padding:10px 12px;font-size:14px;outline:none;
}
.ligne-multi-champs input:focus{border-color:var(--bleu)}
.ligne-multi-duo{display:flex;gap:8px}
.ligne-multi-duo input{flex:1;min-width:0}
.ligne-multi-coche{
  display:flex;align-items:center;gap:9px;min-height:34px;
  font-size:12.5px;font-weight:700;color:var(--encre-douce);cursor:pointer;
}
.ligne-multi-coche input{flex:none;width:20px;height:20px;accent-color:var(--vert)}
.ligne-multi .btn-ic-clair{flex:none}

/* ---------- Boutiques (les secteurs de l'enseigne) ---------- */
.bou-ligne{display:flex;align-items:center;gap:11px;padding:11px 0}
.bou-ligne + .bou-ligne{border-top:1px solid var(--trait)}
.bou-fermee{opacity:.55}
.bou-pastille{
  flex:none;display:flex;align-items:center;justify-content:center;
  width:40px;height:40px;border-radius:13px;
  background:var(--bleu);color:#fff;overflow:hidden;
}
.bou-pastille-photo{background:#EEF1F6}
.bou-pastille img{width:100%;height:100%;object-fit:cover}
.bou-corps{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.bou-nom{font-size:14.5px;font-weight:800;color:var(--encre);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bou-details{font-size:12px;color:var(--encre-tres-douce)}
.bou-courante{
  display:inline-block;padding:2px 7px;border-radius:999px;
  background:var(--vert-clair);color:var(--vert);
  font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;
}
.bou-actions{flex:none;display:flex;gap:4px}
.bou-actions .btn-ic[disabled]{opacity:.3}

.bou-choix{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:10px}
.bou-vignette{
  display:flex;flex-direction:column;align-items:center;gap:7px;
  padding:12px 8px;border-radius:var(--r-md);
  border:1.5px solid var(--trait);background:var(--blanc);
  font-size:11.5px;font-weight:700;color:var(--encre-douce);
  text-align:center;line-height:1.25;
}
.bou-vignette.actif{border-color:var(--bleu);background:var(--bleu-50);color:var(--bleu-800)}
.bou-vignette span{overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}

.carte-boutique-active{display:flex;align-items:center;gap:12px;padding:14px 16px;font-size:13.5px}
.carte-boutique-active strong{font-size:15px;color:var(--encre)}
.carte-boutique-active small{color:var(--encre-tres-douce)}
/* La pastille de la boutique est un carré de 40 px — mais elle est,
   elle aussi, un « span » enfant direct : sans cette exception, elle
   héritait du « flex:1 » et s'étirait en un grand rectangle bleu. */
.carte-boutique-active > span:not(.bou-pastille){flex:1;min-width:0}
.carte-boutique-active > .ic{flex:none;color:var(--encre-tres-douce)}

.choix-icones,.choix-couleurs{display:flex;gap:8px;flex-wrap:wrap}
.choix-icone{
  width:46px;height:46px;border-radius:13px;
  border:1.5px solid var(--trait);background:var(--blanc);color:var(--encre-douce);
  display:flex;align-items:center;justify-content:center;
}
.choix-icone.actif{border-color:var(--bleu);background:var(--bleu-50);color:var(--bleu)}
.choix-couleur{
  width:38px;height:38px;border-radius:999px;border:3px solid transparent;
  box-shadow:0 0 0 1.5px var(--trait);
}
.choix-couleur.actif{border-color:var(--blanc);box-shadow:0 0 0 2.5px var(--encre)}
/* Les illustrations de la fiche d'une catégorie : rondes, comme le rond
   qu'elles rempliront, et l'élue cerclée comme une couleur choisie. */
.choix-illustrations{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.choix-illustration{
  width:46px;height:46px;border-radius:999px;padding:0;overflow:hidden;
  border:3px solid transparent;box-shadow:0 0 0 1.5px var(--trait);background:var(--blanc);
}
.choix-illustration img{display:block;width:100%;height:100%;object-fit:cover;border-radius:999px}
.choix-illustration.actif{border-color:var(--blanc);box-shadow:0 0 0 2.5px var(--bleu)}

/* ---------- Enseigne ou boutique : la bascule des réglages ---------- */
.cible-choix{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.cible-onglet{
  display:flex;align-items:center;gap:8px;
  padding:12px 11px;border-radius:var(--r-md);
  border:1.5px solid var(--trait);background:var(--blanc);
  text-align:left;color:var(--encre-douce);
}
.cible-onglet .ic-sm{flex:none;color:var(--encre-tres-douce)}
.cible-onglet span{display:flex;flex-direction:column;gap:2px;min-width:0;
  font-size:13px;font-weight:800;color:var(--encre);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cible-onglet small{font-size:11px;font-weight:600;color:var(--encre-tres-douce)}
.cible-onglet.actif{border-color:var(--bleu);background:var(--bleu-50)}
.cible-onglet.actif .ic-sm{color:var(--bleu)}
.cible-onglet.actif span{color:var(--bleu-800)}

/* ---------- Marge (prix grossiste → prix public) ---------- */
.note-marge{
  display:flex;align-items:center;gap:9px;
  margin:-6px 0 16px;padding:11px 13px;
  border-radius:var(--r-md);background:var(--vert-clair);
  font-size:13px;color:var(--encre);line-height:1.45;
}
.note-marge .ic{flex:none;color:var(--vert)}
.note-marge strong{font-weight:800}
.note-marge-perte{background:var(--rouge-clair)}
.note-marge-perte .ic{color:var(--rouge)}

.marge-grille{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.marge-grille div{display:flex;flex-direction:column;gap:3px;min-width:0}
.marge-grille span{font-size:11.5px;font-weight:700;color:var(--encre-tres-douce)}
.marge-grille strong{font-size:16px;font-weight:800;color:var(--bleu-800)}
.marge-grille .marge-perte{color:var(--rouge)}

/* ---------- Publication ---------- */
.pub-resume{
  display:grid;grid-template-columns:1fr 1fr;gap:8px;
  margin-bottom:12px;font-size:13px;color:var(--encre-douce);
}
.pub-resume strong{color:var(--bleu-800);font-size:15px}
.barre{
  height:10px;border-radius:999px;background:var(--bleu-50);
  overflow:hidden;margin-top:4px;
}
.barre-remplie{
  height:100%;width:0;border-radius:999px;
  background:linear-gradient(90deg,var(--bleu-400),var(--bleu-700));
  transition:width .35s;
}
#pub-progression{margin-bottom:12px}
.pub-succes{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;padding:8px 0 2px}
.pub-succes h3{font-size:17px;font-weight:800}
.pub-succes-rond{
  display:flex;align-items:center;justify-content:center;
  width:56px;height:56px;border-radius:50%;
  background:var(--vert-clair);color:var(--vert);
}
.pub-succes-rond .ic{width:28px;height:28px;stroke-width:2.2}
.pub-succes .btn-clair{margin-top:8px}
.lien-copiable{
  display:flex;align-items:center;gap:8px;
  background:var(--bleu-50);border:1px solid var(--bleu-100);
  border-radius:11px;padding:11px 12px;
  font-size:12.5px;font-weight:700;color:var(--bleu-800);
  word-break:break-all;
}
.lien-copiable span{flex:1;min-width:0}

/* ---------- Écran de connexion ---------- */
.carte-connexion{
  display:flex;flex-direction:column;align-items:center;gap:12px;
  padding:26px 20px;margin-top:20px;
}
.carte-connexion .champ{width:100%;margin-bottom:0}
.carte-connexion .btn{width:100%}

/* ---------- Aide dépliable ---------- */
.bloc-aide{margin-top:12px;border-top:1px solid var(--trait);padding-top:10px}
.bloc-aide summary{font-size:13px;font-weight:700;color:var(--bleu-800);cursor:pointer}
.bloc-aide p{font-size:13px;line-height:1.55;color:var(--encre-douce);margin:9px 0 0}
.aide-liste{
  margin:10px 0 0;padding-left:20px;
  font-size:13px;line-height:1.6;color:var(--encre-douce);
}
.aide-liste li{margin-bottom:8px}

/* ---------- États vides & chargement ---------- */
.chargement{
  display:flex;flex-direction:column;align-items:center;gap:14px;
  padding:60px 20px;color:var(--encre-tres-douce);font-size:13.5px;font-weight:600;
}
.chargement-rond{
  width:34px;height:34px;border-radius:50%;
  border:3.5px solid var(--bleu-100);border-top-color:var(--bleu-700);
  animation:tourner .9s linear infinite;
}
@keyframes tourner{to{transform:rotate(360deg)}}

.vide{
  display:flex;flex-direction:column;align-items:center;gap:8px;
  text-align:center;padding:38px 20px;
  color:var(--encre-tres-douce);
}
.vide .ic{width:44px;height:44px;stroke-width:1.3;color:#B9C4D4}
.vide p{margin:4px 0 0;font-size:15px;font-weight:700;color:var(--encre-douce)}
.vide small{font-size:12.5px;line-height:1.5;max-width:280px}
.vide .btn,.vide .btn-clair{width:auto;margin-top:10px}

/* ---------- Toasts ---------- */
.toasts{
  position:fixed;left:16px;right:16px;
  bottom:calc(var(--barre-h) + var(--safe-b) + 14px);
  z-index:60;display:flex;flex-direction:column;align-items:center;gap:8px;
  pointer-events:none;
}
.toast{
  background:var(--encre);color:#fff;
  font-size:13.5px;font-weight:600;
  padding:11px 18px;border-radius:12px;
  box-shadow:var(--ombre-forte);
  max-width:100%;text-align:center;
}
.toast-ok{background:var(--vert)}
.toast-err{background:var(--rouge-fonce)}
/* L'ambre de l'avertissement : ni le vert qui approuve, ni le rouge qui
   refuse. Ce toast dit « c'est passé, mais regardez ce que cela coûte ».
   Il porte souvent trois lignes — d'où le texte aligné à gauche, qui se
   lit mieux qu'un paragraphe centré. */
.toast-alerte{background:#8A5B00;text-align:left;line-height:1.45;max-width:340px}

/* ---------- Feuille modale ---------- */
.feuille{position:fixed;inset:0;z-index:70}
.conditions-ugc-fond{position:fixed;inset:0;z-index:100;background:rgba(6,16,31,.72);display:flex;align-items:center;justify-content:center;padding:20px}
.conditions-ugc-boite{width:min(100%,500px);max-height:90vh;overflow:auto;background:#fff;color:var(--encre);border-radius:18px;padding:24px;box-shadow:0 18px 50px rgba(0,0,0,.25)}
.conditions-ugc-boite h2{font-size:21px;margin:0 0 14px}
.conditions-ugc-boite p{line-height:1.55;margin:0 0 12px}
.conditions-ugc-boite label{display:flex;align-items:flex-start;gap:9px;margin:18px 0;font-weight:600;line-height:1.4}
.conditions-ugc-boite .btn-rangee{flex-wrap:wrap}
.feuille[hidden]{display:none}
.feuille-fond{position:absolute;inset:0;background:rgba(6,16,31,.55)}
.feuille-boite{
  position:absolute;left:0;right:0;bottom:0;
  background:var(--fond);
  border-radius:var(--r-lg) var(--r-lg) 0 0;
  max-height:88vh;display:flex;flex-direction:column;
  animation:monter .28s cubic-bezier(.2,.9,.3,1);
}
@keyframes monter{from{transform:translateY(40px);opacity:.4}to{transform:none;opacity:1}}
.feuille-poignee{
  width:42px;height:5px;border-radius:999px;
  background:#C9D3E0;margin:10px auto 2px;flex:none;
}
.feuille-entete{
  display:flex;align-items:center;gap:10px;
  padding:8px 16px 10px;flex:none;
}
.feuille-entete h2{flex:1;font-size:16.5px;font-weight:800}
.feuille-entete .btn-ic{background:var(--bleu-50);color:var(--encre-douce)}
.feuille-corps{
  overflow-y:auto;padding:2px 16px calc(var(--safe-b) + 24px);
  -webkit-overflow-scrolling:touch;
}
.feuille-corps > * + *{margin-top:12px}

/* ---------- Visionneuse ---------- */
.visionneuse{
  position:fixed;inset:0;z-index:80;
  background:rgba(5,16,31,.94);
  display:flex;align-items:center;justify-content:center;
  /* La marge est portee par chaque vue, pas par le cadre : la piste
     garde ainsi la meme largeur, agrandie ou non, et la photo
     zoomee occupe l ecran en entier. */
}
.visionneuse[hidden]{display:none}
/* z-index : agrandie, la photo passerait par-dessus ce bouton. */
.visionneuse-fermer{position:absolute;top:calc(env(safe-area-inset-top,0px) + 14px);right:14px;color:#fff;background:rgba(255,255,255,.15);z-index:1}
.visionneuse-zoom{position:absolute;top:calc(env(safe-area-inset-top,0px) + 14px);right:62px;color:#fff;background:rgba(255,255,255,.15);z-index:1}
.visionneuse-zoom.actif{background:rgba(255,255,255,.32)}
.visionneuse-zoom .ic-zoom-moins,.visionneuse-zoom.actif .ic-zoom-plus{display:none}
.visionneuse-zoom.actif .ic-zoom-moins{display:block}


/* ---------- Visionneuse : galerie ---------- */
.visionneuse-piste{
  display:flex;width:100%;height:100%;
  overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x mandatory;
  scrollbar-width:none;-webkit-overflow-scrolling:touch;
  /* Le doigt fait défiler la galerie ; le pincement, lui, est à nous
     (sans quoi c'est toute la page qui grossirait). */
  touch-action:pan-x;
}
/* Photo agrandie : plus de défilement, le doigt la promène. */
.visionneuse-piste.figee{overflow:hidden;touch-action:none}
.visionneuse-piste::-webkit-scrollbar{display:none}
.visionneuse-vue{
  flex:0 0 100%;scroll-snap-align:center;scroll-snap-stop:always;
  display:flex;align-items:center;justify-content:center;
  padding:20px;
}
.visionneuse-vue img{
  max-width:100%;max-height:100%;object-fit:contain;border-radius:var(--r-sm);
  transform-origin:center center;transition:transform .18s ease-out;
  -webkit-user-select:none;user-select:none;-webkit-touch-callout:none;
}
/* Pendant le geste, la photo colle aux doigts : aucune animation. */
.visionneuse-piste.pincee .visionneuse-vue img{transition:none}
.visionneuse-fleche{
  position:absolute;top:50%;transform:translateY(-50%);
  width:44px;height:44px;border:0;border-radius:50%;
  background:rgba(255,255,255,.16);color:#fff;
  display:flex;align-items:center;justify-content:center;
}
.visionneuse-fleche[hidden]{display:none}
.visionneuse-precedent{left:10px}
.visionneuse-suivant{right:10px}
.visionneuse-pied{
  position:absolute;left:0;right:0;
  bottom:calc(env(safe-area-inset-bottom,0px) + 18px);
  display:flex;flex-direction:column;align-items:center;gap:8px;
  pointer-events:none;
}
.visionneuse-points{display:flex;justify-content:center;gap:7px;pointer-events:auto}
.visionneuse-points button{
  width:8px;height:8px;border-radius:50%;border:0;padding:0;
  background:rgba(255,255,255,.4);transition:all .25s;
}
.visionneuse-points button.actif{background:#fff;width:22px;border-radius:999px}
.visionneuse-compteur{
  font-size:12.5px;font-weight:700;color:rgba(255,255,255,.85);
  background:rgba(0,0,0,.35);padding:4px 12px;border-radius:999px;
}
.visionneuse-compteur:empty{display:none}

/* ---------- Écrans plus larges ---------- */
@media (min-width:560px){
  .photos-zone{grid-template-columns:repeat(4,1fr)}
  .pub-resume{grid-template-columns:repeat(4,1fr)}
}

/* ---------- Validations ----------
   L'ancien et le nouveau côte à côte : approuver sans voir ce qui
   change reviendrait à signer sans lire. */
.dem-carte{border-left:4px solid var(--ambre)}
.dem-entete{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:6px}
.dem-boutique{
  display:inline-flex;align-items:center;gap:5px;min-width:0;
  font-size:11px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;
  color:var(--bleu-700);
}
.dem-boutique .ic{width:14px;height:14px;stroke-width:2;flex:none}
.dem-quand{font-size:11.5px;color:var(--encre-tres-douce);flex:none}
.dem-objet{
  display:flex;align-items:center;gap:7px;
  font-size:15px;font-weight:700;margin-bottom:2px;
}
.dem-objet .ic{color:var(--bleu-700);flex:none}
.dem-apercu{
  margin:0 0 12px;border-radius:var(--r-sm);overflow:hidden;
  background:var(--bleu-50);
}
.dem-apercu img,.dem-apercu video{display:block;width:100%;max-height:200px;object-fit:contain}
.dem-champs{display:flex;flex-direction:column;gap:8px}
.dem-champ{
  display:grid;grid-template-columns:minmax(72px,auto) 1fr 16px 1fr;
  align-items:center;gap:8px;
  padding:8px 10px;border-radius:var(--r-sm);background:var(--bleu-50);
  font-size:12.5px;
}
/* Un champ qui ne change pas ne mérite pas qu'on s'y arrête. */
.dem-champ-egal{opacity:.45}
.dem-cle{font-weight:700;color:var(--encre-douce)}
.dem-avant{color:var(--encre-tres-douce);text-decoration:line-through;overflow-wrap:anywhere}
.dem-champ > .ic{color:var(--encre-tres-douce)}
.dem-apres{font-weight:700;color:var(--bleu-800);overflow-wrap:anywhere}
.dem-verdict{
  display:flex;align-items:center;gap:6px;margin-top:10px;
  font-size:12.5px;font-weight:700;
}
.dem-verdict .ic{flex:none}
.dem-verdict-approuvee{color:#0B6E3E}
.dem-verdict-refusee{color:var(--rouge-fonce)}

/* ---------- Commandes des clients ---------- */
/* Une commande payée qui attend, c'est un client qui attend : la carte
   d'accueil se voit en premier, avant tout le reste. */
.carte-commandes{
  display:block;text-decoration:none;color:inherit;
  border-top:4px solid var(--vert);
}
.carte-commandes .carte-titre{color:var(--vert)}

.badge-nouvelle{background:var(--orange);color:var(--orange-texte)}
.badge-annulee{background:var(--fond);color:var(--encre-tres-douce)}

/* =========================================================
   UNE COMMANDE, UNE CARTE SERRÉE
   =========================================================
   Une commande de trois articles prenait tout un écran de téléphone
   (685 px) : noms de produits cassés mot par mot, montants coupés en
   deux, un bandeau « Payée » et deux grands boutons sur chaque carte.
   La règle, maintenant :
     — rien ne se coupe à contretemps : le NOM d'un article tient sur
       une ligne (il se déplie d'un appui), un MONTANT ne se casse
       jamais ;
     — le paiement tient sur la ligne de l'heure ; seul ce qui demande
       de l'attention garde un bandeau ;
     — WhatsApp vit à côté du numéro, et les gros boutons ne restent
       que pour les gestes rares (confier, confirmer à la main) ;
     — à l'ordinateur, le client et les articles côte à côte. */
.cmd-carte{border-left:3px solid var(--vert);padding:13px 14px}
/* Tout est remis : la carte s'efface sans disparaître. */
.cmd-soldee{border-left-color:var(--trait);opacity:.72}

.cmd-entete{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.cmd-gauche{min-width:0}
.cmd-titre{display:flex;flex-wrap:wrap;align-items:center;gap:5px 6px}
.cmd-numero{font-size:14px;font-weight:800;letter-spacing:.04em;margin-right:2px}
.cmd-titre .badge{padding:3px 8px;font-size:10.5px}
.cmd-somme{flex:none;text-align:right}
.cmd-montant{font-size:15.5px;font-weight:800;line-height:1.3;color:var(--orange-fonce);white-space:nowrap}
.cmd-part{font-size:11px;color:var(--encre-tres-douce);white-space:nowrap}
.cmd-meta{
  display:flex;flex-wrap:wrap;align-items:center;gap:2px 10px;margin-top:3px;
  font-size:12px;color:var(--encre-tres-douce);
}
.cmd-paye{display:inline-flex;align-items:center;gap:4px;color:var(--vert);font-weight:600}
.cmd-paye .ic-sm{width:14px;height:14px}
.cmd-revendeur{display:inline-flex;align-items:center;gap:4px;color:var(--vert);font-weight:600}
.cmd-revendeur .ic-sm{width:13px;height:13px}

/* Ce qui demande de l'attention garde son bandeau. */
.cmd-etat{
  display:flex;align-items:flex-start;gap:7px;
  margin-top:10px;padding:7px 10px;border-radius:var(--r-sm);
  font-size:12px;font-weight:600;line-height:1.45;
}
.cmd-etat .ic{flex:none;margin-top:1px}
.cmd-etat-attente{background:var(--bleu-50);color:var(--bleu-700)}
.cmd-etat-alerte{background:var(--rouge-clair);color:var(--rouge-fonce)}

/* « minmax(0,1fr) », PAS « 1fr » : une colonne de grille s'élargit
   sinon jusqu'au plus long nom d'article — celui qu'on vient justement
   d'empêcher de passer à la ligne — et toute la page déborde. */
.cmd-corps{display:grid;grid-template-columns:minmax(0,1fr);gap:10px;margin-top:10px}
.cmd-lignes,.cmd-client{min-width:0}
@media (min-width:1024px){
  .cmd-corps{grid-template-columns:minmax(240px,300px) minmax(0,1fr);gap:18px;align-items:start}
}

.cmd-client{
  padding:9px 11px;background:var(--fond);border-radius:var(--r-sm);
  display:flex;flex-direction:column;gap:5px;font-size:12.5px;line-height:1.4;
}
.cmd-client .ic-sm{flex:none;width:14px;height:14px;color:var(--encre-tres-douce);margin-right:6px}
.cmd-client-nom{display:flex;align-items:center;font-weight:700;color:var(--encre)}
.cmd-client-contact{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 10px}
.cmd-client-tel{
  display:inline-flex;align-items:center;white-space:nowrap;
  color:var(--bleu-700);font-weight:700;text-decoration:none;
}
.cmd-wa{
  display:inline-flex;align-items:center;gap:5px;padding:4px 11px;border-radius:999px;
  background:#1FAF54;color:#fff;font-size:11.5px;font-weight:700;text-decoration:none;white-space:nowrap;
}
.cmd-client .cmd-wa .ic-sm{color:#fff;margin:0}
.cmd-client-adresse{display:flex;align-items:flex-start;color:var(--encre-douce)}
.cmd-client-adresse .ic-sm{margin-top:2px}
.cmd-note{
  font-size:12px;font-style:italic;color:var(--encre-douce);
  padding-top:5px;border-top:1px dashed var(--trait);
}

.cmd-lignes{display:flex;flex-direction:column}
.cmd-ligne{padding:8px 0;border-bottom:1px solid var(--trait)}
.cmd-ligne:first-child{padding-top:2px}
.cmd-ligne:last-child{border-bottom:0;padding-bottom:0}
.cmd-ligne-haut{display:flex;align-items:baseline;gap:6px}
.cmd-quantite{flex:none;font-size:12.5px;font-weight:800;color:var(--orange-fonce)}
/* Le nom : une ligne, et « … » s'il est long. C'est un bouton : un appui
   le déplie, un second le replie. */
.cmd-ligne-nom{
  flex:1;min-width:0;padding:0;border:0;background:none;cursor:pointer;
  font:inherit;font-size:13px;font-weight:600;line-height:1.4;color:var(--encre);text-align:left;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.cmd-ligne-nom[aria-expanded="true"]{white-space:normal}
.cmd-ligne-prix{flex:none;font-size:12.5px;font-weight:700;color:var(--encre-douce);white-space:nowrap}
.cmd-ligne-bas{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:6px 8px;margin-top:5px;
}
.cmd-ligne-refs{display:flex;align-items:center;gap:6px;min-width:0;font-size:11.5px;color:var(--encre-tres-douce)}
.cmd-ligne-refs .code-produit{font-size:11px;padding:1px 6px}
.cmd-ref{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cmd-ligne-etat{display:flex;align-items:center;gap:6px;margin-left:auto}
.cmd-ligne-etat .badge{padding:3px 8px;font-size:10.5px}
.btn-mini{
  border:1px solid var(--bleu-100);border-radius:999px;
  background:var(--bleu-50);color:var(--bleu-700);
  padding:4px 10px;font-size:11px;font-weight:700;font-family:inherit;
  white-space:nowrap;
}
.btn-mini:active{transform:scale(.95)}
.btn-mini:disabled{opacity:.5}

/* Les gestes rares : des boutons, mais pas des boutons d'accueil. */
.cmd-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
/* « width:auto » : le bouton de base fait toute la largeur, et une rangée
   de deux se serait empilée. Au téléphone, « flex:1 » le fait remplir
   quand même sa rangée. */
.cmd-actions .btn{width:auto;flex:1 1 auto;min-height:40px;padding:8px 14px;font-size:13.5px;box-shadow:none}
.cmd-actions .btn .ic{width:18px;height:18px}
/* À l'ordinateur, un bouton à sa taille, à droite — pas une barre de
   950 px sous la carte. */
@media (min-width:1024px){
  .cmd-actions{justify-content:flex-end}
  .cmd-actions .btn{flex:0 0 auto;min-width:220px}
}
.cmd-aide{margin:8px 0 0;font-size:12px}
/* Le résumé du haut, à la taille d'un résumé. */
.cmd-resume{padding:12px 14px}
.cmd-resume .carte-titre{font-size:14px;margin-bottom:4px}

/* ---------- Le code d'un produit ---------- */
/* Un numéro donné par la base, jamais saisi. On le montre comme ce
   qu'il est : un repère, pas un champ. */
.code-produit{
  display:inline-block;padding:1px 7px;border-radius:6px;
  background:var(--bleu-50);color:var(--bleu-700);
  font-weight:800;letter-spacing:.06em;
}
.code-fige{
  display:flex;align-items:flex-start;gap:9px;
  padding:11px 13px;border-radius:var(--r-sm);
  background:var(--fond);border:1px dashed var(--trait);
}
.code-fige .ic-sm{flex:none;margin-top:2px;color:var(--encre-tres-douce)}
.code-fige small{font-size:12px;color:var(--encre-tres-douce);line-height:1.45}
.code-fige .code-produit{margin-right:4px}

/* ---------- Ce que rapportent les boutiques ---------- */
.carte-benefice{
  display:block;text-decoration:none;color:inherit;
  border-top:4px solid var(--orange);
}
.carte-benefice .carte-titre{color:var(--orange-fonce)}

.st-filtres{display:flex;gap:8px;flex-wrap:wrap}

.st-resume{text-align:center}
.st-resume-grand small{
  display:block;font-size:12px;color:var(--encre-tres-douce);
  text-transform:uppercase;letter-spacing:.08em;font-weight:700;
}
.st-resume-grand strong{
  display:block;margin-top:6px;
  font-size:30px;font-weight:800;color:var(--orange-fonce);
}
.st-resume-detail{
  display:grid;grid-template-columns:repeat(3,1fr);gap:10px;
  margin-top:16px;padding-top:14px;border-top:1px solid var(--trait);
}
/* L'écran d'une boutique n'a que deux chiffres à mettre là : sans cela,
   ils resteraient calés à gauche avec un vide à droite. */
.st-resume-detail.deux{grid-template-columns:repeat(2,1fr)}
.st-resume-detail small{display:block;font-size:11px;color:var(--encre-tres-douce)}
.st-resume-detail span{font-size:14px;font-weight:800}

.st-ligne{
  background:var(--blanc);border-radius:var(--r);
  padding:14px 16px;margin-bottom:10px;box-shadow:var(--ombre);
}
.st-ligne-entete{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.st-nom{font-size:14px;font-weight:700}
.st-boutique{
  display:flex;align-items:center;gap:5px;margin-top:4px;
  font-size:12px;color:var(--encre-tres-douce);
}
.st-quantite{flex:none;font-size:15px;font-weight:800;color:var(--orange-fonce)}
.st-chiffres{
  display:grid;grid-template-columns:repeat(4,1fr);gap:8px;
  margin-top:12px;padding-top:12px;border-top:1px dashed var(--trait);
}
.st-chiffres small{display:block;font-size:10.5px;color:var(--encre-tres-douce)}
.st-chiffres span{font-size:13px;font-weight:700}
.st-benefice span{color:var(--vert)}
.st-totaux{
  margin-top:10px;font-size:12px;color:var(--encre-douce);line-height:1.5;
}
.st-boutique-ligne{display:flex;justify-content:space-between;align-items:center;gap:12px}
.st-boutique-benefice{
  flex:none;font-size:17px;font-weight:800;color:var(--vert);
}

@media (max-width:400px){
  .st-chiffres{grid-template-columns:repeat(2,1fr)}
}

/* =========================================================
   Écran d'ordinateur
   =========================================================
   Une boutique se tient au comptoir avec un téléphone, mais
   se gère assis, sur un écran large : c'est là qu'on saisit
   vingt produits, qu'on relit des chiffres, qu'on compare.
   Au-delà de 1024 px la barre du bas devient donc un menu à
   gauche, et « Nouveau produit » y prend sa vraie place —
   en haut, sous le nom, là où l'on commence à lire.

   Rien ne descend sous 1024 px : au téléphone, l'application
   reste exactement celle d'aujourd'hui.
   ========================================================= */
@media (min-width:1024px){
  :root{ --rail:240px; }

  body{ padding-left:var(--rail); }

  /* ---------- Le menu, sur le bord gauche ---------- */
  .tabbar{
    top:0;bottom:0;right:auto;width:var(--rail);
    height:100dvh;padding:16px 12px;
    /* Une seule colonne : la barre du bas en comptait cinq. */
    grid-template-columns:1fr;grid-auto-rows:max-content;
    align-content:start;gap:3px;
    background:var(--blanc);backdrop-filter:none;
    border-top:0;border-right:1px solid var(--trait);
  }
  .tabbar a{
    flex-direction:row;justify-content:flex-start;gap:13px;
    height:46px;padding:0 13px;border-radius:12px;
    font-size:14px;font-weight:600;
  }
  .tabbar a span{font-size:14px}
  .tabbar .ic{width:22px;height:22px;flex:none}
  .tabbar a:hover{background:var(--fond)}
  .tabbar a.actif,.tabbar a.actif:hover{background:var(--bleu-50);color:var(--bleu-700)}

  .tabbar-marque{
    order:-2;
    display:flex;align-items:center;gap:10px;
    padding:6px 13px 16px;margin-bottom:6px;
    border-bottom:1px solid var(--trait);
  }
  /* Le logo de la charte, à sa taille de menu, et le mot « Admin »
     dessous. Aucune couleur n'est posée sur les spans : « Bizz » et
     « oo » tiennent les leurs, et une règle de couleur ici les
     repeindrait toutes les deux de la même teinte. */
  .tabbar-marque{flex-direction:column;align-items:flex-start;gap:2px}
  .tabbar-marque .logo-mot{font-size:19px}
  .tabbar-marque .marque-role{
    font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
    color:var(--encre-tres-douce);
  }

  /* Le rond orange du milieu redevient ce qu'il est : le bouton
     principal. En haut de la liste, avec son nom écrit. */
  .tab-cta{order:-1;height:auto;padding:0;margin-bottom:10px}
  .tab-cta-rond{
    width:100%;height:44px;border-radius:12px;margin:0;
    justify-content:flex-start;gap:10px;padding:0 14px;
    box-shadow:0 8px 18px -10px rgba(201,77,0,.85);
  }
  .tab-cta-rond .ic{width:21px;height:21px}
  .tab-cta-nom{display:inline;font-size:14px;font-weight:700;color:#fff}

  /* ---------- Ce que le menu libère ---------- */
  .topbar{border-radius:0}
  .vue{
    max-width:1180px;
    padding:22px 28px 48px;   /* plus de barre en bas : plus de place à lui réserver */
  }
  .toasts{left:calc(var(--rail) + 16px);bottom:22px}
  /* Les feuilles modales montaient du bas de l'écran, au pouce.
     Sur un ordinateur elles se posent au centre. */
  .feuille-boite{
    left:50%;bottom:auto;top:50%;transform:translate(-50%,-50%);
    width:min(680px,92vw);max-height:86vh;
    border-radius:var(--r-lg);
    animation:none;
  }

  /* Les compteurs gardent leurs trois colonnes : à six, ils se
     tasseraient à gauche en laissant la moitié de la carte vide. */
  .photos-zone{grid-template-columns:repeat(6,1fr)}
}

/* ---------- Comptes revendeurs ----------
   Trois choses pour trancher : qui demande, comment le joindre, et ce
   qu'il dit de son commerce. Le reste est du décor. */
.rv-contact{display:flex;flex-wrap:wrap;gap:8px 16px;margin:0 0 10px}
.rv-contact a{
  display:inline-flex;align-items:center;gap:5px;
  font-size:12.5px;font-weight:600;color:var(--bleu);
}
.rv-message{
  margin:0 0 10px;padding:10px 12px;border-radius:var(--r-sm);
  background:var(--bleu-50);border:1px solid var(--bleu-100);
  font-size:13px;line-height:1.5;white-space:pre-wrap;
}
/* Où se trouve le commerce. Le flex garde l'icône À CÔTÉ du texte :
   posée dans le fil de la phrase, elle se retrouve seule sur sa ligne
   dès que l'adresse est longue — et une adresse de Cotonou l'est. */
.rv-ou{
  display:flex;align-items:flex-start;gap:8px;
  margin:0 0 10px;font-size:13px;line-height:1.5;
  color:var(--encre-douce);
}
.rv-ou .ic{margin-top:2px;color:var(--bleu)}
.rv-ou a{color:var(--bleu);font-weight:600;text-decoration:underline}

/* ---------- Les fiches clients ----------
   Une liste qu'on parcourt en cherchant quelqu'un au téléphone : le nom
   d'abord, le numéro juste dessous, et ce que le compte a dépensé au
   bout. Trois lignes, lisibles d'un coup d'œil. */
.cl-ligne{display:block;margin-bottom:10px}
.cl-ligne-haut{display:flex;align-items:center;gap:6px}
.cl-nom{
  display:inline-flex;align-items:center;gap:6px;
  font-size:15px;font-weight:700;color:var(--encre);
}
.cl-verifie{display:inline-flex;color:var(--vert)}
.cl-ligne-bas{
  display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;
  margin-top:4px;font-size:13px;color:var(--encre-douce);
}
.cl-mention{
  display:inline-block;padding:2px 8px;border-radius:999px;
  background:var(--bleu-50);color:var(--bleu-700);
  font-size:11.5px;font-weight:700;
}
.cl-chiffres{
  display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;
  margin-top:10px;padding-top:10px;border-top:1px solid var(--trait);
  font-size:12.5px;color:var(--encre-tres-douce);
}
.cl-chiffres strong{margin-left:auto;font-size:14px;color:var(--orange-fonce)}

.cl-fiche .cl-mention{margin:0 0 10px}
.cl-contact{display:flex;flex-wrap:wrap;gap:8px 16px;margin:0 0 10px}
.cl-contact a{
  display:inline-flex;align-items:center;gap:5px;
  font-size:12.5px;font-weight:600;color:var(--bleu);
}
.cl-cmd{margin-bottom:10px}
.cl-cmd-haut{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.cl-cmd-bas{
  display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;
  margin-top:10px;padding-top:10px;border-top:1px solid var(--trait);
  font-size:12.5px;color:var(--encre-tres-douce);
}
.cl-cmd-bas strong{margin-left:auto;font-size:14px;color:var(--encre)}

/* ---------- Le journal des versements ----------
   Une ligne par tentative. Le montant à droite, l'opérateur à gauche :
   on parcourt la colonne des montants, et on s'arrête sur ce qui cloche. */
.vs-ligne{margin-bottom:10px}
.vs-haut{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.vs-milieu{
  display:flex;align-items:center;gap:10px;
  margin-top:10px;padding-top:10px;border-top:1px solid var(--trait);
}
.vs-canal{font-size:12.5px;font-weight:700;color:var(--encre-douce)}
.vs-milieu strong{margin-left:auto;font-size:15px;color:var(--encre)}
/* Un versement incomplet : les deux montants ensemble, en rouge. Lire
   « 12 000 » seul ferait croire la commande réglée. */
.vs-manque{
  display:flex;align-items:flex-start;gap:8px;
  margin-top:10px;padding:8px 10px;border-radius:var(--r-sm);
  background:var(--rouge-clair);color:var(--rouge-fonce);
  font-size:12.5px;line-height:1.5;
}
.vs-manque .ic{flex:none;margin-top:1px}
.vs-ref{
  margin-top:8px;font-size:11.5px;color:var(--encre-tres-douce);
  word-break:break-all;
}
.vs-canal-ligne{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  margin-bottom:8px;
}
.vs-canal-total{font-size:15px;font-weight:800;color:var(--orange-fonce)}

/* ---------- Les codes promo ----------
   Le code en gros : c'est ce qu'on dicte au téléphone. Ce qu'il retire
   juste en dessous, et ce qu'il a coûté tout en bas. */
.cd-carte{margin-bottom:10px}
.cd-haut{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.cd-code{
  font-size:17px;font-weight:800;letter-spacing:.06em;
  color:var(--encre);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
}
.cd-remise{margin-top:8px;font-size:20px;font-weight:800;color:var(--orange-fonce)}
.cd-chiffres{
  display:flex;align-items:center;gap:10px;
  margin-top:10px;padding-top:10px;border-top:1px solid var(--trait);
  font-size:12.5px;color:var(--encre-tres-douce);
}
.cd-chiffres strong{margin-left:auto;font-size:14px;color:var(--encre)}
/* Un code fermé reste lisible, mais se distingue d'un coup d'œil : on
   ne doit pas le dicter à un client par erreur. */
.cd-ferme{opacity:.62}

/* ---------- Ce que le client a confirmé ----------
   Sous l'état de la ligne : votre déclaration d'un côté, la sienne de
   l'autre. Les deux ensemble closent la commande. Une ligne à part, à
   droite, sous le badge qu'elle complète. */
.cmd-confirme{
  display:flex;align-items:center;justify-content:flex-end;gap:5px;
  margin-top:4px;font-size:11.5px;font-weight:600;color:var(--vert);
}
.cmd-confirme .ic-sm{width:14px;height:14px}
.cmd-attente-client{
  margin-top:4px;text-align:right;
  font-size:11.5px;color:var(--encre-tres-douce);
}

/* ---------- L'écran du livreur ----------
   Ce qu'il porte en haut, à qui et où en dessous, et un seul bouton.
   Rien d'autre : aucun montant n'existe dans ces données. */
.lv-course{margin-bottom:12px}
.lv-haut{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.lv-articles{
  margin-top:10px;padding:10px 12px;border-radius:var(--r-sm);
  background:var(--bleu-50);font-size:13.5px;line-height:1.7;
}
.lv-client{
  margin-top:10px;padding-top:10px;border-top:1px solid var(--trait);
  font-size:13px;line-height:1.6;
}
.lv-nom{display:flex;align-items:center;gap:6px;font-weight:700;color:var(--encre)}
.lv-tel,.lv-ou{
  display:flex;align-items:flex-start;gap:6px;margin-top:6px;
  color:var(--bleu);font-weight:600;
}
.lv-tel .ic,.lv-ou .ic{flex:none;margin-top:2px}
.lv-note{
  margin-top:8px;padding:8px 10px;border-radius:var(--r-sm);
  background:var(--jaune-clair,#FFF7E6);color:var(--encre-douce);
  font-size:12.5px;line-height:1.5;
}
.lv-avancer{margin-top:12px}

/* ---------- L'essai de la passerelle SMS ----------
   Le verdict en clair, et la réponse brute repliée en dessous :
   inutile au quotidien, indispensable le jour où rien ne marche. */
.sms-verdict{
  display:flex;gap:8px;align-items:flex-start;
  margin-top:12px;padding:12px;border-radius:var(--r-sm);
  font-size:13px;line-height:1.5;
}
.sms-verdict .ic{flex:none;margin-top:2px}
.sms-ok{background:var(--vert-clair);color:#0B6E3E}
.sms-ko{background:var(--rouge-clair);color:var(--rouge-fonce)}
.sms-brut{margin-top:8px;font-size:12px;color:var(--encre-tres-douce)}
.sms-brut summary{cursor:pointer;font-weight:600}
.sms-brut pre{
  margin:8px 0 0;padding:10px;border-radius:var(--r-sm);
  background:var(--fond);overflow-x:auto;font-size:11.5px;line-height:1.45;
}

/* ---------- Avis des clients ----------
   Une boutique répond, elle n'efface pas : l'écran met la réponse en
   avant et le masquage au second plan, à sa juste place. */
.av-etoiles-lues{display:inline-flex;gap:1px}
.av-etoiles-lues .av-et{color:var(--trait);display:inline-flex}
.av-etoiles-lues .av-et-pleine{color:var(--ambre)}
/* Les icônes du projet sont au trait : une étoile pleine doit être
   remplie, sinon « pleine » et « vide » ne diffèrent que par la teinte. */
.av-etoiles-lues .av-et-pleine .ic{fill:currentColor}
.av-ligne{display:flex;align-items:center;gap:10px;margin:0 0 8px;flex-wrap:wrap}
.av-cible{font-size:12px;font-weight:600;color:var(--encre-tres-douce)}
.av-dit{
  margin:0 0 10px;padding:10px 12px;border-radius:var(--r-sm);
  background:var(--fond);font-size:13.5px;line-height:1.55;white-space:pre-wrap;
}
.av-deja-repondu{
  display:flex;gap:8px;margin:0 0 4px 12px;padding:10px 12px;
  border-left:3px solid var(--bleu-100);border-radius:0 var(--r-sm) var(--r-sm) 0;
  background:var(--bleu-50);font-size:12.5px;line-height:1.5;
}
.av-deja-repondu .ic{flex:none;color:var(--bleu);margin-top:1px}
/* Un avis masqué reste lisible par l'équipe, mais se voit comme tel :
   on doit pouvoir vérifier ce qu'on a masqué. */
.av-masque{opacity:.72;border:1px dashed var(--trait)}
.av-etiquette-masque{
  display:flex;align-items:center;gap:6px;margin:0 0 10px;
  padding:8px 10px;border-radius:var(--r-sm);
  background:var(--ambre-clair);color:var(--orange-fonce);
  font-size:12px;font-weight:700;
}

/* ---------- Réclamations ----------
   La boutique répond, elle ne ferme pas. Un recours se voit de loin :
   c'est le seul cas où l'enseigne entre dans le dossier. */
.sav-ligne{display:flex;align-items:center;gap:10px;margin:0 0 10px;flex-wrap:wrap}
.sav-ou{font-size:12px;font-weight:600;color:var(--encre-tres-douce)}
.badge.sav-a-repondre{background:var(--ambre-clair);color:var(--orange-fonce)}
.badge.sav-repondu{background:var(--bleu-50);color:var(--bleu-700)}
.badge.sav-regle{background:var(--vert-clair);color:var(--vert)}
.badge.sav-recours{background:var(--orange);color:var(--orange-texte)}
.badge.sav-tranche{background:var(--bleu-900);color:#fff}
/* Un dossier remonté à BIZZOO ne se confond pas avec les autres. */
.sav-en-recours{border:1px solid var(--orange)}
.sav-tarde{
  display:inline-flex;align-items:center;gap:4px;
  font-size:11.5px;font-weight:700;color:var(--orange-fonce);
}
.sav-motif{
  display:flex;gap:8px;margin:0 0 10px;padding:10px 12px;border-radius:var(--r-sm);
  background:var(--ambre-clair);color:var(--orange-fonce);
  font-size:12.5px;line-height:1.5;
}
.sav-motif .ic{flex:none;margin-top:1px}
.sav-fil{border-top:1px solid var(--trait);margin-top:4px}
.sav-msg{padding:10px 0;border-bottom:1px solid var(--trait)}
.sav-msg:last-child{border-bottom:0}
.sav-msg-qui{display:flex;align-items:center;gap:6px;font-size:12.5px}
.sav-msg-qui .ic{color:var(--encre-tres-douce)}
.sav-msg-quand{margin-left:auto;font-size:11px;color:var(--encre-tres-douce)}
.sav-msg-texte{margin:4px 0 0;font-size:13px;line-height:1.55;white-space:pre-wrap}
.sav-msg-boutique .sav-msg-qui .ic{color:var(--bleu)}
/* Ce que dit BIZZOO s'impose : cela doit se distinguer du reste du fil. */
.sav-msg-enseigne{
  background:var(--bleu-50);border-radius:var(--r-sm);padding:10px 12px;margin:8px 0;
}
.sav-msg-enseigne .sav-msg-qui .ic{color:var(--bleu-700)}
.sav-clos{
  display:flex;align-items:center;gap:6px;margin-top:12px;
  font-size:12.5px;font-weight:700;color:var(--vert);
}

/* ---------- Les notifications ----------
   Une ligne par nouvelle, groupée par famille. Le point bleu à droite
   dit « pas encore lue » sans avoir à comparer les gris entre eux. */
.notif-groupe{display:flex;flex-direction:column;gap:8px}
.notif{
  display:flex;align-items:flex-start;gap:11px;
  padding:12px 13px;border-radius:var(--r);
  background:var(--blanc);box-shadow:var(--ombre);
  color:inherit;text-decoration:none;
}
.notif:active{transform:scale(.99)}
.notif-lue{box-shadow:none;background:var(--fond)}
.notif-rond{
  flex:none;width:34px;height:34px;border-radius:12px;
  display:flex;align-items:center;justify-content:center;
  background:var(--bleu-50);color:var(--bleu-700);
}
.notif-lue .notif-rond{background:var(--trait);color:var(--encre-tres-douce)}
.notif-corps{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.notif-titre{font-size:13.5px;font-weight:700;line-height:1.3;color:var(--encre)}
.notif-lue .notif-titre{font-weight:600;color:var(--encre-douce)}
.notif-texte{font-size:12.5px;line-height:1.35;color:var(--encre-douce)}
.notif-quand{font-size:11px;color:var(--encre-tres-douce);margin-top:2px}
.notif-point{
  flex:none;width:9px;height:9px;border-radius:50%;
  background:var(--bleu);margin-top:6px;
}
/* La pastille de la cloche, sur le modèle de celles des onglets. */
.btn-cloche{position:relative}
.cloche-pastille{
  position:absolute;top:2px;right:2px;
  min-width:17px;height:17px;padding:0 4px;border-radius:99px;
  background:var(--rouge);color:#fff;
  font-size:10px;font-weight:800;line-height:17px;text-align:center;
  box-shadow:0 0 0 2px var(--blanc);
}
/* La commande qu'une notification vient d'ouvrir : on la souligne le
   temps de la retrouver des yeux, puis on la laisse tranquille. */
.cmd-visee{
  outline:2px solid var(--bleu);outline-offset:3px;
  transition:outline-color .4s ease;
}
/* Le livreur dans la feuille « Confier » : son nom, son numéro dessous. */
.cmd-livreur{justify-content:flex-start;text-align:left}
.cmd-livreur-mots{display:flex;flex-direction:column;gap:1px;min-width:0}
.cmd-livreur-nom{font-weight:700;line-height:1.25}
.cmd-livreur-tel{font-size:11.5px;font-weight:600;opacity:.75;line-height:1.2}
/* Le porteur de l'enseigne, marqué. Il n'est pas de cette boutique-là,
   et on lui remet le nom, le numéro et l'adresse d'un client : autant
   que ce soit lisible au moment d'appuyer. */
.cmd-livreur-bizzoo{
  display:inline-block;margin-left:7px;padding:1px 6px;border-radius:999px;
  background:var(--bleu);color:#fff;font-size:9.5px;font-weight:800;
  letter-spacing:.4px;vertical-align:middle;
}