/* ── Charte graphique — Commandes Facilement v4 ─────────────────────────────
   Brun foncé, orange chaud, fond crème (CdC §5 et maquettes).
   Feuille unique, sans framework : à ce volume, des variables CSS et quelques
   règles bien rangées suffisent largement (cf. Plan de développement, phase 3).
   ------------------------------------------------------------------------- */

:root {
  --orange: #e8622a;
  --orange-fonce: #ea580c;
  --orange-pale: #fed7aa;
  --brun: #2d1a0e;
  --brun-clair: #4a3325;
  --creme: #faf8f5;
  --creme-fonce: #f9f4f0;
  --blanc: #ffffff;
  --texte: #2d1a0e;
  --texte-doux: #7a6a5d;
  --bordure: #ece5de;
  --rouge: #c0392b;
  --rouge-pale: #fdedec;
  --vert: #2ecc71;
  --vert-fonce: #1e8449;
  --vert-pale: #eafaf1;
  --orange-vif: #f39c12;
  --orange-tres-pale: #fef0ea;

  --rayon: 14px;
  --rayon-petit: 9px;
  --ombre: 0 1px 3px rgb(45 26 14 / 8%), 0 8px 24px rgb(45 26 14 / 6%);
}

/* La police Outfit est prévue par la charte. Tant qu'elle n'est pas embarquée
   dans static/, on retombe sur la pile système : aucun appel réseau, donc pas
   de page qui s'affiche sans style si la boutique perd sa connexion. */
* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: Outfit, "Segoe UI", system-ui, -apple-system, sans-serif;
  background: var(--creme);
  color: var(--texte);
  line-height: 1.5;
}

h1 { font-size: 1.7rem; margin: 0 0 .2rem; }
h2 { font-size: 1.1rem; margin: 0 0 .6rem; }

.sous-titre { margin: 0 0 1.4rem; color: var(--texte-doux); font-size: .93rem; }
.note { color: var(--texte-doux); font-size: .9rem; }

/* ── Marque ───────────────────────────────────────────────────────────────── */
.marque { display: flex; align-items: center; gap: .7rem; margin-bottom: 1.6rem; }

.marque-pastille {
  display: grid; place-items: center;
  width: 42px; height: 42px;
  background: var(--orange); color: var(--blanc);
  border-radius: 12px; font-weight: 700; letter-spacing: .5px;
}

.marque-texte { display: flex; flex-direction: column; line-height: 1.15; }
.marque-texte strong { font-size: 1.05rem; }
.marque-texte span { color: var(--orange); font-size: .9rem; }

/* ══ ÉCRAN DE CONNEXION ═══════════════════════════════════════════════════
   Reprise du composant BrandPanel / LoginForm de la maquette Connexion.html.
   ═══════════════════════════════════════════════════════════════════════ */
.ecran-connexion { display: flex; min-height: 100vh; }

/* ── Panneau de marque (gauche) ───────────────────────────────────────────── */
.panneau-marque {
  display: flex; flex-direction: column;
  flex: 0 0 44%;
  padding: 56px 56px 48px;
  color: var(--blanc); background: var(--brun);
  position: relative; overflow: hidden;
}

.panneau-marque > * { position: relative; z-index: 1; }

/* Halos d'ambiance : deux dégradés radiaux débordant des angles. */
.halo { position: absolute; border-radius: 50%; z-index: 0; }

.halo--haut {
  top: -80px; right: -80px; width: 320px; height: 320px;
  background: radial-gradient(circle, rgb(232 98 42 / 35%), transparent 70%);
}

.halo--bas {
  bottom: -120px; left: -60px; width: 280px; height: 280px;
  background: radial-gradient(circle, rgb(232 98 42 / 18%), transparent 70%);
}

.marque--connexion { gap: 12px; margin: 0; }

.marque--connexion .marque-pastille {
  width: 48px; height: 48px;
  font-size: 22px; border-radius: 14px;
  box-shadow: 0 8px 22px rgb(232 98 42 / 40%);
}

.marque--connexion .marque-texte strong {
  color: var(--blanc); font-size: 18px; font-weight: 800; line-height: 1;
}

.marque--connexion .marque-texte span {
  color: var(--orange); font-size: 13px; font-weight: 700; letter-spacing: .4px;
}

/* L'accroche est centrée verticalement : les marges automatiques en haut et en
   bas absorbent à parts égales l'espace laissé libre entre le logo et le pied. */
.accroche { margin: auto 0; }

.sur-titre {
  margin: 0 0 14px;
  font-size: 13px; font-weight: 600; letter-spacing: 1.5px;
  text-transform: uppercase; color: var(--orange);
}

.accroche h1 {
  margin: 0 0 18px;
  font-size: 48px; font-weight: 800; line-height: 1.05; letter-spacing: -1.2px;
}

.accroche .accent { color: var(--orange); }

.texte-accroche {
  max-width: 380px; margin: 0;
  font-size: 15px; line-height: 1.55;
  color: rgb(255 255 255 / 65%);
}

.pied-marque {
  margin: 0;
  font-size: 11px; color: rgb(255 255 255 / 35%);
}

/* ── Panneau du formulaire (droite) ───────────────────────────────────────── */
.panneau-formulaire {
  display: flex; align-items: center; justify-content: center;
  flex: 1;
  padding: 56px 48px;
  background: var(--creme);
}

.formulaire-connexion { width: 100%; max-width: 420px; }

.titre-connexion {
  margin: 0 0 6px;
  font-size: 32px; font-weight: 800; letter-spacing: -.8px;
}

.sous-titre-connexion {
  margin: 0 0 30px;
  font-size: 14px; line-height: 1.5; color: var(--texte-doux);
}

/* Champ encadré : la bordure et le halo réagissent au focus de l'input via
   :focus-within, ce qui évite tout JavaScript. */
.champ-encadre-groupe { margin-bottom: 18px; }

.champ-encadre-groupe label {
  display: block; margin: 0 0 7px;
  font-size: 12px; font-weight: 600; letter-spacing: .2px;
}

.champ-encadre {
  display: flex; align-items: center; gap: 10px;
  padding: 0 12px;
  background: var(--blanc);
  border: 1.5px solid var(--bordure);
  border-radius: 11px;
  transition: border-color .15s, box-shadow .15s;
}

.champ-encadre:focus-within {
  border-color: var(--orange);
  box-shadow: 0 0 0 4px var(--orange-tres-pale);
}

.champ-encadre svg { width: 15px; height: 15px; flex-shrink: 0; color: var(--texte-doux); }
.champ-encadre:focus-within svg { color: var(--orange); }

.champ-encadre input {
  flex: 1; width: auto;
  padding: 13px 0;
  font-size: 14px; font-weight: 500; color: var(--texte);
  background: transparent; border: 0;
}

.champ-encadre input:focus-visible { outline: none; }

.alerte--connexion {
  display: flex; align-items: center; gap: 9px;
  margin: 0 0 18px;
  padding: 10px 13px;
  font-size: 13px; font-weight: 500;
  border: 1px solid rgb(192 57 43 / 20%); border-radius: 10px;
}

.alerte--connexion svg { width: 15px; height: 15px; flex-shrink: 0; }

.bouton-connexion {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%;
  padding: 14px 16px;
  font: inherit; font-size: 15px; font-weight: 700;
  color: var(--blanc); background: var(--orange);
  border: 0; border-radius: 12px;
  box-shadow: 0 8px 20px rgb(232 98 42 / 28%);
  cursor: pointer;
  transition: background .15s;
}

.bouton-connexion:hover { background: #c24f1e; }
.bouton-connexion svg { width: 15px; height: 15px; }

/* ══ ÉCRAN DE CHOIX DU PROFIL ═════════════════════════════════════════════ */
.ecran-profils { max-width: 1080px; margin: 0 auto; padding: 40px 32px 60px; }

.entete-profils {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 16px;
  margin-bottom: 36px;
}

.marque--profils { gap: 12px; margin: 0; }

.marque--profils .marque-pastille {
  width: 44px; height: 44px;
  font-size: 20px; border-radius: 13px;
  box-shadow: 0 6px 16px rgb(232 98 42 / 30%);
}

.nom-application {
  display: block;
  font-size: 17px; font-weight: 800; letter-spacing: -.3px;
}

.actions-profils { display: flex; align-items: center; gap: 10px; }

.pastille-session {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 12px;
  font-size: 12px; font-weight: 600;
  color: #1e7e44; background: #eafaf1;
  border: 1px solid rgb(46 204 113 / 20%); border-radius: 999px;
}

.pastille-session::before {
  content: "";
  width: 7px; height: 7px;
  background: var(--vert); border-radius: 50%;
  box-shadow: 0 0 0 3px rgb(46 204 113 / 13%);
}

.bouton-verrouiller {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 14px;
  font: inherit; font-size: 13px; font-weight: 600;
  color: var(--texte); background: var(--blanc);
  border: 1px solid var(--bordure); border-radius: 10px;
  cursor: pointer;
}

.bouton-verrouiller:hover { border-color: var(--texte-doux); }
.bouton-verrouiller svg { width: 13px; height: 13px; }

.titre-profils { margin-bottom: 30px; }
.titre-profils h1 { margin: 0 0 8px; font-size: 38px; letter-spacing: -1px; }
.titre-profils .sur-titre { margin-bottom: 8px; font-size: 12px; letter-spacing: 1.4px; }

.texte-profils {
  max-width: 640px; margin: 0;
  font-size: 15px; line-height: 1.5; color: var(--texte-doux);
}

.grille-profils {
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}

.carte-profil {
  display: flex; flex-direction: column;
  overflow: hidden;
  background: var(--blanc);
  border: 1.5px solid var(--bordure);
  border-radius: 16px;
  box-shadow: 0 2px 8px rgb(28 18 8 / 4%);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.carte-profil:hover {
  transform: translateY(-3px);
  border-color: var(--orange);
  box-shadow: 0 14px 30px rgb(28 18 8 / 10%);
}

.entete-carte-profil {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 22px 18px 16px;
}

.avatar-profil {
  display: grid; place-items: center;
  width: 56px; height: 56px; flex-shrink: 0;
  font-size: 19px; font-weight: 800; letter-spacing: .5px;
  color: var(--blanc);
  border-radius: 14px;
}

.nom-profil {
  margin: 0 0 3px;
  font-size: 17px; font-weight: 800; letter-spacing: -.3px;
}

/* La puce de rôle reprend la couleur de l'avatar, en fond très clair. */
.puce-role {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 8px;
  font-size: 10.5px; font-weight: 700; letter-spacing: .2px;
  border-radius: 999px;
}

.puce-role::before {
  content: "";
  width: 5px; height: 5px;
  background: currentcolor; border-radius: 50%;
}

.pied-carte-profil {
  margin-top: auto;
  padding: 12px 18px;
  background: #fdfbf8;
  border-top: 1px solid var(--bordure);
}

.carte-profil:hover .pied-carte-profil { background: var(--orange-tres-pale); }

.bouton-choisir {
  display: block; width: 100%;
  padding: 9px 12px;
  font: inherit; font-size: 13px; font-weight: 700; text-align: center;
  color: var(--orange); background: transparent;
  border: 1px solid var(--orange); border-radius: 9px;
  cursor: pointer;
  list-style: none;
}

.bouton-choisir::-webkit-details-marker { display: none; }
.bouton-choisir:hover { color: var(--blanc); background: var(--orange); }

.formulaire-pin { margin-top: 10px; }

.formulaire-pin label {
  display: block; margin-bottom: 4px;
  font-size: 11px; font-weight: 600; color: var(--texte-doux);
}

.formulaire-pin input {
  width: 100%; margin-bottom: 8px;
  padding: 9px 10px;
  font-size: 15px; text-align: center; letter-spacing: .35em;
  background: var(--blanc);
  border: 1px solid var(--bordure); border-radius: 9px;
}

/* Carte d'invitation, sans action : bordure en pointillés pour la distinguer
   des profils réellement sélectionnables. */
.carte-ajout {
  display: flex; flex-direction: column; align-items: flex-start;
  justify-content: center; gap: 10px;
  padding: 22px 18px;
  color: var(--texte-doux);
  border: 1.5px dashed var(--bordure); border-radius: 16px;
}

.icone-ajout {
  display: grid; place-items: center;
  width: 36px; height: 36px;
  background: var(--blanc);
  border: 1px solid var(--bordure); border-radius: 10px;
}

.icone-ajout svg { width: 16px; height: 16px; }
.carte-ajout strong { font-size: 13px; color: var(--texte); }
.carte-ajout span { font-size: 11.5px; line-height: 1.4; }

.encart-tracabilite {
  display: flex; align-items: flex-start; gap: 12px;
  margin: 28px 0 0;
  padding: 14px 18px;
  font-size: 12.5px; line-height: 1.5; color: var(--texte-doux);
  background: var(--blanc);
  border: 1px solid var(--bordure); border-radius: 12px;
}

.encart-tracabilite svg { width: 16px; height: 16px; flex-shrink: 0; margin-top: 1px; color: var(--orange); }
.encart-tracabilite strong { color: var(--texte); }

.encart-tracabilite code {
  padding: 1px 5px;
  font-family: ui-monospace, monospace; font-size: 11.5px;
  color: #c24f1e; background: var(--creme);
  border-radius: 4px;
}

/* ── Écrans étroits : les deux panneaux passent l'un sous l'autre ─────────── */
@media (max-width: 900px) {
  .ecran-connexion { flex-direction: column; }
  .panneau-marque { flex: none; padding: 32px 28px; }
  .accroche h1 { font-size: 32px; }
  .panneau-formulaire { padding: 32px 28px; }
}

/* ── Formulaires ──────────────────────────────────────────────────────────── */
label {
  display: block;
  margin: .9rem 0 .3rem;
  font-size: .87rem; font-weight: 600;
}

input[type="text"], input[type="password"] {
  width: 100%;
  padding: .7rem .85rem;
  font: inherit;
  color: var(--texte);
  background: var(--creme);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon-petit);
}

input:focus-visible, button:focus-visible, summary:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 2px;
}

.bouton-principal {
  margin-top: 1.2rem;
  padding: .7rem 1.2rem;
  font: inherit; font-weight: 600;
  color: var(--blanc); background: var(--orange);
  border: none; border-radius: var(--rayon-petit);
  cursor: pointer;
}

.bouton-principal:hover { background: var(--orange-fonce); }
.bouton-bloc { display: block; width: 100%; text-align: center; }

/* Les boutons portent une couleur selon ce qu'ils font, pas selon leur place :
     orange plein  → l'action qui engage (créer, enregistrer) ;
     orange teinté → les actions courantes (modifier, renommer, ajouter) ;
     vert          → les exports ;
     rouge         → ce qui supprime ;
     gris          → la simple navigation, rien d'autre.
   Le gris pâle servait à tout : les actions se noyaient dans la page. */
.bouton-discret {
  padding: .45rem .8rem;
  font: inherit; font-size: .85rem;
  color: var(--brun-clair); background: transparent;
  border: 1px solid var(--bordure); border-radius: var(--rayon-petit);
  cursor: pointer;
}

.bouton-discret:hover { color: var(--texte); border-color: var(--texte-doux); }

.bouton-action {
  padding: .45rem .8rem;
  font: inherit; font-size: .85rem; font-weight: 600;
  color: var(--orange); background: var(--orange-tres-pale);
  border: 1px solid var(--orange-pale); border-radius: var(--rayon-petit);
  cursor: pointer;
}

.bouton-action:hover {
  color: var(--blanc); background: var(--orange); border-color: var(--orange);
}

/* Vert : couleur d'usage des tableurs, elle rend l'export repérable sans lire. */
/* Porté aussi bien par un <button> que par un <a> (l'export depuis la liste des
   événements est un simple lien) : d'où `inline-block` et la décoration
   retirée, sans quoi le lien s'afficherait souligné et sur toute la largeur. */
.bouton-excel {
  display: inline-block;
  padding: .45rem .8rem;
  font: inherit; font-size: .85rem; font-weight: 600; text-decoration: none;
  color: var(--blanc); background: var(--vert-fonce);
  border: 1px solid var(--vert-fonce); border-radius: var(--rayon-petit);
  cursor: pointer;
}

.bouton-excel:hover:not(:disabled) { background: #196f3d; }

/* Un bouton désactivé garde sa couleur en sourdine : l'utilisateur voit que la
   fonction existe et qu'elle n'est pas encore ouverte, plutôt qu'un bouton mort. */
.bouton-excel:disabled {
  color: var(--vert-fonce); background: var(--vert-pale);
  border-color: var(--vert-pale); cursor: not-allowed;
}

.alerte {
  margin: 1rem 0 0;
  padding: .7rem .9rem;
  font-size: .9rem;
  color: var(--rouge); background: var(--rouge-pale);
  border-radius: var(--rayon-petit);
}

/* Confirmation d'une action réussie : même gabarit que l'alerte, en vert, pour
   que l'œil distingue les deux d'un coup d'œil sans lire le texte. */
.confirmation {
  margin: 1rem 0 0;
  padding: .7rem .9rem;
  font-size: .9rem;
  color: #1e8449; background: #eafaf1;
  border-radius: var(--rayon-petit);
}

/* ── Choix du profil ──────────────────────────────────────────────────────── */
.entete-profils {
  display: flex; justify-content: space-between;
  align-items: flex-start; gap: 1rem;
}

.bloc-profils { margin-top: 1.6rem; }
.bloc-profils h2 { color: var(--texte-doux); font-size: .8rem;
  text-transform: uppercase; letter-spacing: .06em; }

.grille-profils {
  display: grid; gap: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(165px, 1fr));
}

.carte-profil {
  padding: 1rem;
  background: var(--blanc);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  box-shadow: var(--ombre);
}

.carte-profil--chef { border-color: var(--orange-pale); }

.entete-carte-profil {
  display: flex; align-items: center; gap: .7rem;
  margin-bottom: .8rem;
}

/* Puce de rôle : un point coloré et un libellé court, comme dans la maquette. */
.puce-role {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .1rem .5rem;
  font-size: .72rem; font-weight: 600;
  color: #b9770e; background: var(--creme-fonce);
  border-radius: 999px;
}

.puce-role::before { content: "●"; font-size: .6rem; }
.puce-role--chef { color: #7e22ce; background: #f3e8ff; }

.avatar {
  display: grid; place-items: center;
  width: 46px; height: 46px; margin: 0 auto .6rem;
  font-size: 1.15rem; font-weight: 700;
  color: var(--orange); background: var(--orange-pale);
  border-radius: 50%;
}

.avatar--petit { width: 36px; height: 36px; margin: 0; font-size: .95rem; }

/* Avatar à initiales de la barre latérale : rond, couleur donnée par le rôle
   (cf. DROIT_COLORS de la maquette v6). */
.avatar--carre {
  width: 32px; height: 32px; margin: 0; flex-shrink: 0;
  font-size: 12px; font-weight: 800; letter-spacing: .3px;
  color: var(--blanc);
  border-radius: 50%;
}

.avatar--violet { background: #7c3aed; }
.avatar--ambre  { background: #e8a520; }
.avatar--vert   { background: var(--vert); }
.avatar--orange { background: var(--orange); }

/* Les cartes de profil réutilisent ces mêmes classes de rôle : l'avatar prend
   la couleur en aplat et une ombre teintée, la puce la reprend en texte sur
   fond très clair. */
.avatar-profil.avatar--violet { box-shadow: 0 6px 14px rgb(124 58 237 / 33%); }
.avatar-profil.avatar--ambre  { box-shadow: 0 6px 14px rgb(232 165 32 / 33%); }

.puce-role.avatar--violet { color: #7c3aed; background: rgb(124 58 237 / 10%); }
.puce-role.avatar--ambre  { color: #b9770e; background: rgb(232 165 32 / 14%); }

.nom-profil { margin: 0 0 .2rem; font-weight: 600; }
.role-profil { margin: 0; color: var(--texte-doux); font-size: .82rem; }

.grille-profils { grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); }

.bloc-pin summary { list-style: none; }
.bloc-pin summary::-webkit-details-marker { display: none; }
.formulaire-pin { margin-top: .6rem; }
.etiquette-pin { font-size: .78rem; color: var(--texte-doux); }

.formulaire-pin input {
  text-align: center;
  letter-spacing: .35em;
  font-size: 1.05rem;
}

/* ── Application (barre latérale + contenu) ───────────────────────────────── */
.application { display: flex; min-height: 100vh; }

/* Dimensions et couleurs reprises telles quelles du composant Sidebar de la
   maquette v6 : largeur 220, blocs séparés par des filets clairs, barre
   collante sur toute la hauteur. */
.barre-laterale {
  display: flex; flex-direction: column;
  width: 220px; flex-shrink: 0;
  height: 100vh; position: sticky; top: 0;
  background: var(--brun);
}

.marque--laterale {
  gap: 10px; margin: 0;
  padding: 28px 24px 24px;
  border-bottom: 1px solid rgb(255 255 255 / 8%);
}

.marque--laterale .marque-pastille {
  width: 40px; height: 40px;
  font-size: 20px; border-radius: 12px;
}

.marque--laterale .marque-texte strong {
  color: var(--blanc); font-weight: 800; font-size: 15px; line-height: 1.1;
}

.marque--laterale .marque-texte span {
  color: var(--orange); font-weight: 600; font-size: 12px;
}

/* ── Bloc « Vendeur actif » ───────────────────────────────────────────────── */
.bloc-vendeur-actif {
  padding: 12px 14px;
  border-bottom: 1px solid rgb(255 255 255 / 6%);
}

.intitule-bloc {
  margin: 0 0 6px 2px;
  font-size: 9.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .8px;
  color: rgb(255 255 255 / 35%);
}

.bloc-profil-actif {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px;
  background: rgb(255 255 255 / 6%);
  border: 1px solid rgb(255 255 255 / 8%);
  border-radius: 10px;
}

.bloc-profil-actif strong {
  display: block;
  font-size: 12.5px; font-weight: 700;
  color: rgb(255 255 255 / 95%);
}

/* ── Pied de la barre latérale : établissement + sortie de session ────────── */
.pied-lateral {
  margin-top: auto;
  padding: 14px 14px 12px;
  border-top: 1px solid rgb(255 255 255 / 8%);
}

.bloc-etablissement {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 10px;
}

.pastille-etablissement {
  display: grid; place-items: center;
  width: 30px; height: 30px; flex-shrink: 0;
  font-size: 14px;
  background: rgb(232 98 42 / 18%);
  border-radius: 8px;
}

.bloc-etablissement strong {
  display: block;
  font-size: 12px; font-weight: 600;
  color: rgb(255 255 255 / 85%);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.etat-session {
  display: flex; align-items: center; gap: 5px;
  font-size: 10px; color: rgb(255 255 255 / 35%);
}

/* Point vert avec halo : reprend le témoin de session de la maquette. */
.etat-session::before {
  content: "";
  width: 5px; height: 5px;
  background: var(--vert); border-radius: 50%;
  box-shadow: 0 0 0 2px rgb(46 204 113 / 25%);
}

.bouton-quitter {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%;
  padding: 9px 12px;
  font: inherit; font-size: 12px; font-weight: 600;
  color: rgb(255 255 255 / 70%);
  background: rgb(255 255 255 / 4%);
  border: 1px solid rgb(255 255 255 / 12%);
  border-radius: 9px;
  cursor: pointer;
}

.bouton-quitter:hover { color: var(--blanc); background: rgb(255 255 255 / 8%); }

.lien-changer {
  padding: 0;
  font: inherit; font-size: 10px;
  color: rgb(255 255 255 / 40%); background: none;
  border: none; cursor: pointer;
}

.lien-changer:hover { color: var(--orange); }

.navigation {
  display: flex; flex-direction: column;
  flex: 1; min-height: 0; overflow-y: auto;
  padding: 12px 10px;
}

/* Couleur et décoration explicites : ces entrées sont des <a>, qui prendraient
   sinon le style par défaut du navigateur — bleu, puis violet une fois visités,
   ce qui jure avec la barre latérale brune. */
.lien-navigation {
  display: block;
  margin-bottom: 2px;
  padding: 11px 14px;
  font-size: 13px; font-weight: 400;
  color: rgb(255 255 255 / 55%);
  text-decoration: none;
  border-left: 3px solid transparent;
  border-radius: 10px;
}

a.lien-navigation:hover { background: rgb(255 255 255 / 5%); }

.lien-navigation--actif {
  color: var(--orange);
  font-weight: 700;
  background: rgb(232 98 42 / 18%);
  border-left-color: var(--orange);
}

/* Vues à venir : estompées pour montrer la structure sans faire croire à un
   clic possible. */
.lien-navigation--inactif { color: rgb(255 255 255 / 28%); }

.pied-lateral { margin-top: auto; }
.pied-lateral .bouton-discret { width: 100%; color: #cbb8a8; border-color: var(--brun-clair); }
.pied-lateral .bouton-discret:hover { color: var(--blanc); border-color: #cbb8a8; }

/* ── Zone principale : barre supérieure fixe + contenu défilant ───────────── */
.zone-principale {
  display: flex; flex-direction: column;
  flex: 1; min-width: 0;
}

.barre-superieure {
  display: flex; align-items: center; justify-content: space-between;
  height: 60px; flex-shrink: 0;
  padding: 0 28px;
  background: var(--blanc);
  border-bottom: 1px solid var(--bordure);
}

.titre-vue { margin: 0; font-size: 18px; font-weight: 800; color: var(--texte); }

.fil-etablissement {
  display: flex; align-items: center; gap: 6px;
  margin: 0;
  font-size: 11px; color: var(--texte-doux);
}

.bouton-nouvelle-commande {
  margin-top: 0;
  padding: 10px 22px;
  font-size: 13px; font-weight: 700;
  border-radius: 10px;
}

/* Vue à venir : le bouton reste visible pour respecter la maquette, mais son
   état désactivé évite de promettre une action qui n'existe pas encore. */
.bouton-nouvelle-commande:disabled { opacity: .45; cursor: not-allowed; }
.bouton-nouvelle-commande:disabled:hover { background: var(--orange); }

.contenu { flex: 1; padding: 22px 28px; }

/* Les cartes occupent toute la largeur du contenu, comme dans la maquette : un
   plafond sur la carte désalignait la barre de filtres et le tableau placé
   juste en dessous. La lisibilité des textes longs est préservée en limitant
   les paragraphes plutôt que le cadre (voir .carte p ci-dessous). */
.carte {
  margin-bottom: 1.2rem;
  padding: 1.4rem;
  background: var(--blanc);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  box-shadow: var(--ombre);
}

/* Une ligne de texte trop longue devient pénible à suivre : on borne les
   paragraphes, pas la carte, pour que filtres et tableaux restent pleine largeur. */
.carte > p { max-width: 70ch; }

/* ── En-tête de page (titre + action principale) ──────────────────────────── */
.entete-page {
  display: flex; justify-content: space-between;
  align-items: flex-start; gap: 1rem; flex-wrap: wrap;
  margin-bottom: 1.2rem;
}

.entete-page .bouton-principal, .entete-page .bouton-discret { margin-top: 0; }

a.bouton-principal, a.bouton-discret {
  display: inline-block; text-decoration: none;
}

/* ── Filtres et lignes de formulaire ──────────────────────────────────────── */
.barre-filtres {
  display: flex; gap: .6rem; align-items: center; flex-wrap: wrap;
  margin-bottom: 1.2rem;
}

.barre-filtres input[type="search"] { flex: 1 1 220px; }
.barre-filtres .bouton-discret { margin: 0; }

/* L'action principale est repoussée à l'extrémité droite de la ligne, comme
   dans la maquette. */
.barre-filtres .bouton-principal { margin: 0 0 0 auto; }

/* Les pastilles occupent toute la largeur disponible sous la recherche. */
.pastilles-filtre { width: 100%; }

.ligne-formulaire {
  display: flex; gap: .6rem; align-items: center; flex-wrap: wrap;
  margin-top: .9rem;
}

.ligne-formulaire--serree { margin-top: 0; justify-content: flex-end; }
.ligne-formulaire .bouton-principal, .ligne-formulaire .bouton-discret { margin-top: 0; }
.ligne-formulaire select, .ligne-formulaire input { margin: 0; }

.grille-champs {
  display: grid; gap: .8rem;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

.grille-champs label { margin-top: .6rem; }

input[type="search"], input[type="number"], input[type="date"],
input[type="time"], select {
  width: 100%;
  padding: .55rem .7rem;
  font: inherit; color: var(--texte);
  background: var(--creme);
  border: 1px solid var(--bordure); border-radius: var(--rayon-petit);
}

.case-a-cocher {
  display: flex; align-items: center; gap: .45rem;
  margin-top: .9rem; font-weight: 400;
}

.case-a-cocher input { width: auto; }

/* ── Tableaux ─────────────────────────────────────────────────────────────── */
/* Le tableau défile dans son propre conteneur : sur tablette, la page elle-même
   ne doit jamais partir en défilement horizontal. */
.tableau-defilant { overflow-x: auto; }

.tableau { width: 100%; border-collapse: collapse; font-size: .93rem; }

.tableau th {
  padding: .5rem .6rem;
  text-align: left; font-size: .78rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .04em;
  color: var(--texte-doux);
  border-bottom: 1px solid var(--bordure);
}

.tableau td {
  padding: .55rem .6rem;
  border-bottom: 1px solid var(--bordure);
  vertical-align: middle;
}

.tableau tbody tr:hover { background: var(--creme-fonce); }
.tableau--compact td { padding: .35rem .5rem; }
.colonne-droite { text-align: right; }

/* Sélecteur explicite pour les en-têtes : « .tableau th » l'emporterait sinon
   sur « .colonne-droite » par spécificité, et le titre de colonne resterait à
   gauche au-dessus de chiffres alignés à droite. */
.tableau th.colonne-droite { text-align: right; }
.cellule-douce { color: var(--texte-doux); }

.lien-tableau { color: var(--texte); font-weight: 600; text-decoration: none; }
.lien-tableau:hover { color: var(--orange); text-decoration: underline; }

/* ── Étiquettes d'état ────────────────────────────────────────────────────── */
.etiquette {
  display: inline-block;
  padding: .12rem .5rem;
  font-size: .74rem; font-weight: 600;
  border-radius: 999px;
}

.etiquette--actif { color: #1e8449; background: #eafaf1; }
.etiquette--stock { color: #1e8449; background: #eafaf1; }
.etiquette--epuise { color: var(--rouge); background: var(--rouge-pale); }
.etiquette--categorie { color: var(--orange); background: var(--orange-tres-pale, #fef0ea); }
.etiquette--inactif { color: #b9770e; background: #fef9e7; }
.etiquette--archive { color: var(--texte-doux); background: var(--bordure); }
.etiquette--menu { color: #7e22ce; background: #f3e8ff; }

.bouton-danger {
  padding: .45rem .8rem;
  font: inherit; font-size: .85rem; font-weight: 600;
  color: var(--rouge); background: var(--rouge-pale);
  border: 1px solid #f1c0bb; border-radius: var(--rayon-petit);
  cursor: pointer;
}

.bouton-danger:hover {
  color: var(--blanc); background: var(--rouge); border-color: var(--rouge);
}

/* ── Créneaux : événements et plages horaires ─────────────────────────────── */

/* Les panneaux repliés (ajout, génération, réglage) sont des <details> : le même
   procédé que la saisie rapide de stock, et toujours pas une ligne de
   JavaScript. Le chevron natif est masqué, le résumé se présente en bouton. */
.bloc-creation > summary,
.reglage-plage > summary,
.reglage-evenement > summary {
  display: inline-block; list-style: none;
}

.bloc-creation > summary::-webkit-details-marker,
.reglage-plage > summary::-webkit-details-marker,
.reglage-evenement > summary::-webkit-details-marker { display: none; }

.bloc-creation { padding: 1rem 1.2rem; }
.bloc-creation > summary { margin: 0; cursor: pointer; }
.bloc-creation .ligne-formulaire input[type="text"] { flex: 1; min-width: 14rem; }
.bloc-creation .ligne-formulaire input { width: auto; }

.carte-evenement {
  margin-bottom: 1.2rem;
  background: var(--blanc);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  box-shadow: var(--ombre);
  overflow: hidden;
}

/* En-tête coloré : le repère qui permet de distinguer deux journées voisines
   d'un coup d'œil quand la liste s'allonge en fin d'année. */
.entete-evenement { padding: 1rem 1.3rem; color: var(--blanc); }
.evenement--orange { background: var(--orange); }
.evenement--violet { background: #7c5cd6; }
.evenement--vert   { background: #27a567; }
.evenement--bleu   { background: #2f7fbf; }

.nom-evenement {
  margin: 0; font-size: .74rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em;
  opacity: .85;
}

.date-evenement {
  margin: .1rem 0 .15rem;
  font-size: 1.55rem; font-weight: 700; letter-spacing: -.5px;
}

.cumul-evenement { margin: 0; font-size: .82rem; opacity: .9; }

.corps-evenement { padding: 1.1rem 1.3rem 1.2rem; }

.grille-plages {
  display: grid; gap: .7rem;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  margin-bottom: 1rem;
}

.plage {
  padding: .7rem .8rem;
  background: var(--creme);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon-petit);
}

/* Plage saturée : c'est l'information que le vendeur doit repérer d'un coup
   d'œil pendant le rush (EF-011). Le presque-complet la précède en ambre, pour
   qu'il propose un autre horaire avant d'être bloqué. */
.plage--presque { background: #fffaf0; border-color: var(--orange-vif); }
.plage--complet { background: var(--rouge-pale); border-color: var(--rouge); }

.heures-plage { margin: 0 0 .4rem; font-weight: 600; font-size: .95rem; }

.rail-plage {
  display: block; height: 5px;
  background: var(--bordure); border-radius: 999px; overflow: hidden;
}

.rail-plage > span {
  display: block; height: 100%;
  background: var(--orange); border-radius: 999px;
}

.plage--presque .rail-plage > span { background: var(--orange-vif); }
.plage--complet .rail-plage > span { background: var(--rouge); }

.etat-plage {
  display: flex; justify-content: space-between; align-items: baseline; gap: .4rem;
  margin: .4rem 0 .5rem;
  font-size: .8rem; color: var(--texte-doux);
}

.plage--presque .libelle-etat { color: #b06a00; font-weight: 600; }
.plage--complet .libelle-etat { color: var(--rouge); font-weight: 600; }
.compte-plage { font-weight: 600; color: var(--texte); font-variant-numeric: tabular-nums; }

/* Tranche de numéros de la plage : une information de repère, pas une action. */
.tranche-plage {
  margin: .15rem 0 0;
  font-size: .74rem;
  font-variant-numeric: tabular-nums;
}

.actions-plage { display: flex; align-items: center; gap: .3rem; }
.actions-plage .reglage-plage { flex: 1; }
.actions-plage .bouton-discret { width: 100%; padding: .3rem .5rem; font-size: .8rem; }

.reglage-plage[open] {
  position: relative;
  padding: .6rem; margin-top: .3rem;
  background: var(--blanc);
  border: 1px solid var(--bordure); border-radius: var(--rayon-petit);
}

.reglage-plage label { margin: .5rem 0 .2rem; font-size: .78rem; }
.reglage-plage label:first-of-type { margin-top: .6rem; }
.reglage-plage .bouton-principal { margin-top: .7rem; }

.croix {
  padding: .25rem .45rem;
  font-size: 1rem; line-height: 1;
  color: var(--texte-doux); background: none;
  border: 1px solid transparent; border-radius: var(--rayon-petit);
  cursor: pointer;
}

.croix:hover { color: var(--rouge); border-color: var(--rouge); }

.barre-actions-evenement {
  display: flex; align-items: flex-start; gap: .5rem; flex-wrap: wrap;
  padding-top: .9rem;
  border-top: 1px solid var(--bordure);
}

.barre-actions-evenement > summary,
.reglage-evenement > summary { cursor: pointer; }

/* Le panneau déplié occupe toute la largeur sous la barre, au lieu d'étirer le
   bouton qui l'a ouvert. */
.reglage-evenement[open] { flex: 1 1 100%; }
.reglage-evenement .ligne-formulaire { margin-top: .6rem; }
.reglage-evenement .ligne-formulaire input { width: auto; }
.reglage-evenement .ligne-formulaire input[type="text"] { flex: 1; min-width: 12rem; }
.reglage-evenement .case-a-cocher { margin: 0; font-weight: 400; }

.action-a-droite { margin-left: auto; }

/* ── Cartes de statistiques (bandeau de chiffres clés) ────────────────────── */
.grille-stats {
  display: grid; gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  margin-bottom: 1.2rem;
}

.carte-stat {
  display: flex; align-items: center; gap: .9rem;
  padding: 1.1rem 1.3rem;
  background: var(--blanc);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  box-shadow: var(--ombre);
}

.icone-stat {
  display: grid; place-items: center;
  width: 44px; height: 44px; flex-shrink: 0;
  font-size: 1.2rem;
  background: var(--creme-fonce);
  border-radius: 12px;
}

.libelle-stat {
  display: block;
  font-size: .8rem; color: var(--texte-doux);
}

.valeur-stat {
  display: block;
  font-size: 1.75rem; font-weight: 700; line-height: 1.15;
}

/* ── Pastilles de filtre (remplacent le menu déroulant de catégories) ─────── */
.pastilles-filtre { display: flex; gap: .45rem; flex-wrap: wrap; align-items: center; }

.pastille-filtre {
  padding: .42rem .85rem;
  font-size: .85rem; text-decoration: none;
  color: var(--texte); background: var(--blanc);
  border: 1px solid var(--bordure); border-radius: 999px;
  white-space: nowrap;
}

.pastille-filtre:hover { border-color: var(--orange); }

.pastille-filtre--active {
  color: var(--orange); font-weight: 600;
  background: var(--creme);
  border-color: var(--orange);
}

/* « + Catégorie » et « Archivés » ne filtrent pas sur une catégorie : bordure
   en pointillés et teinte neutre pour les distinguer au premier coup d'œil de
   la liste des catégories. */
.pastille-filtre--action {
  color: var(--texte-doux);
  background: transparent;
  border-style: dashed;
}

.pastille-filtre--action:hover { color: var(--texte); border-color: var(--texte-doux); }

/* Quand le filtre « Archivés » est enclenché, il reprend la couleur d'état
   active pour qu'on n'oublie pas qu'il masque une partie du catalogue. */
.pastille-filtre--action.pastille-filtre--active {
  color: var(--orange); background: var(--orange-tres-pale);
  border-style: solid; border-color: var(--orange);
}

/* ── En-tête de tableau orange (maquette « Liste des produits ») ──────────── */
.tableau--titre thead th {
  padding: .7rem .8rem;
  color: var(--blanc); background: var(--orange);
  border-bottom: none;
  text-transform: none; font-size: .84rem; letter-spacing: 0;
}

.tableau--titre thead th:first-child { border-radius: var(--rayon) 0 0 0; }
.tableau--titre thead th:last-child { border-radius: 0 var(--rayon) 0 0; }
.tableau--titre tbody tr:nth-child(even) { background: var(--creme-fonce); }

/* ── Jauge de remplissage (stock, capacité de créneau) ────────────────────── */
.jauge {
  width: 100%; height: 4px;
  margin-top: .3rem;
  background: var(--bordure);
  border-radius: 999px; overflow: hidden;
}

.jauge span { display: block; height: 100%; background: var(--vert, #2ecc71); }
.jauge--attention span { background: var(--orange-vif, #f39c12); }
.jauge--critique span { background: var(--rouge); }

.cellule-stock { min-width: 92px; }

/* ── Actions d'une ligne de tableau ───────────────────────────────────────── */
.actions-ligne {
  display: flex; align-items: center; justify-content: flex-end; gap: .4rem;
}

.actions-ligne .bouton-discret { margin: 0; white-space: nowrap; }

/* Le panneau de saisie du stock se superpose au tableau plutôt que d'élargir la
   ligne, ce qui ferait sauter la mise en page à chaque ouverture. */
.action-stock { position: relative; }
.action-stock summary { list-style: none; }
.action-stock summary::-webkit-details-marker { display: none; }

.action-stock[open] summary { color: var(--orange); border-color: var(--orange); }

.action-stock form {
  position: absolute; top: calc(100% + .35rem); right: 0; z-index: 5;
  width: 200px;
  padding: .7rem;
  text-align: left;
  background: var(--blanc);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon-petit);
  box-shadow: 0 10px 26px rgb(28 18 8 / 14%);
}

.action-stock label {
  display: block; margin: 0 0 .3rem;
  font-size: .74rem; font-weight: 600; color: var(--texte-doux);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.action-stock input { margin-bottom: .5rem; }

.action-stock .bouton-principal,
.action-stock .bouton-discret.bouton-bloc {
  width: 100%; margin: 0; padding: .45rem; font-size: .85rem;
}

.stock-actuel {
  display: flex; justify-content: space-between; align-items: baseline;
  margin: 0 0 .6rem; padding-bottom: .5rem;
  font-size: .78rem; color: var(--texte-doux);
  border-bottom: 1px solid var(--bordure);
}

.stock-actuel strong { font-size: .95rem; color: var(--texte); }

/* Sépare le geste courant (livraison) de la correction manuelle, pour qu'on ne
   confonde pas un mouvement avec une valeur absolue. */
.separateur-stock {
  margin-top: .7rem !important;
  padding-top: .6rem;
  border-top: 1px solid var(--bordure);
}

/* ── Catégories ───────────────────────────────────────────────────────────── */
.ligne-ajout {
  margin: 0 0 1.1rem;
  padding-bottom: 1.1rem;
  border-bottom: 1px solid var(--bordure);
}

.ligne-ajout input { flex: 1; min-width: 12rem; margin: 0; }
.ligne-ajout .bouton-principal { margin: 0; }

/* Écran des étiquettes : la journée occupe la place qu'il lui faut (elle porte
   le nom de l'événement et le décompte), la catégorie garde une largeur fixe. */
.formulaire-etiquettes .ligne-formulaire { align-items: flex-end; margin-top: 0; }

.champ-etiquettes {
  display: flex; flex-direction: column; gap: .3rem;
  flex: 1; min-width: 14rem;
}

.champ-etiquettes .intitule-recap { margin: 0; }

.liste-categories { margin: 0; padding: 0; list-style: none; }

/* Colonnes tenues par une grille, partagée avec l'en-tête : en flex, la largeur
   du nom variait d'une rangée à l'autre et les décomptes ne s'alignaient plus. */
.entete-liste,
.rangee-categorie {
  display: grid;
  grid-template-columns: 5.5rem minmax(0, 1fr) 11rem 11rem 6.5rem;
  align-items: center;
  gap: .9rem;
}

/* Bascule du tri des étiquettes : le bouton porte le mode **courant**, et le
   clic passe à l'autre. Un interrupteur plutôt qu'une liste déroulante — il n'y
   a que deux valeurs, et cela évite un second bouton pour valider. */
.bascule-tri {
  width: 100%;
  padding: .3rem .5rem;
  font-size: .8rem; text-align: left;
  color: var(--texte-doux);
  background: none;
  border: 1px solid transparent; border-radius: .45rem;
  cursor: pointer;
}

.bascule-tri:hover,
.bascule-tri:focus-visible {
  color: var(--texte);
  background: var(--creme);
  border-color: var(--bordure);
}

.entete-liste {
  margin: 0 0 .2rem;
  padding: 0 .2rem .4rem;
  font-size: .72rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .05em;
  color: var(--texte-doux);
  border-bottom: 1px solid var(--bordure);
}

.rangee-categorie {
  padding: .3rem .2rem;
  border-bottom: 1px solid var(--bordure);
}

.rangee-categorie:last-child { border-bottom: none; }
.rangee-categorie:hover { background: var(--creme-fonce); }

/* Rang : les deux flèches encadrent le numéro, ce qui rend le sens du
   déplacement évident sans texte. */
.pile-rang {
  display: flex; align-items: center; gap: .15rem;
  flex-shrink: 0; width: 5.2rem;
}

.numero-rang {
  width: 1.6rem; text-align: center;
  font-size: .82rem; font-variant-numeric: tabular-nums;
  color: var(--texte-doux);
}

.bouton-rang {
  width: 1.6rem; height: 1.6rem; padding: 0;
  font: inherit; font-size: .62rem; line-height: 1;
  color: var(--texte-doux); background: var(--blanc);
  border: 1px solid var(--bordure); border-radius: var(--rayon-petit);
  cursor: pointer;
}

.bouton-rang:hover:not(:disabled) {
  color: var(--orange); border-color: var(--orange);
}

/* Bout de liste : le bouton reste en place pour que les rangées ne se décalent
   pas, mais il n'appelle plus l'œil ni le clic. */
.bouton-rang:disabled { opacity: .3; cursor: default; }

.champ-nom { display: flex; gap: .5rem; align-items: center; min-width: 0; }

/* Le nom se lit comme du texte : le champ ne s'encadre qu'au survol ou au focus.
   Dix-sept champs encadrés en permanence donnaient un écran de formulaire là où
   l'utilisateur attend une liste. */
.saisie-nom {
  width: 100%; min-width: 0; margin: 0;
  padding: .35rem .5rem;
  font: inherit; color: var(--texte);
  background: transparent;
  border: 1px solid transparent; border-radius: var(--rayon-petit);
}

.saisie-nom:hover { background: var(--blanc); border-color: var(--bordure); }

.saisie-nom:focus {
  background: var(--blanc); border-color: var(--orange); outline: none;
}

/* Le bouton n'apparaît qu'au moment utile. `:focus-within` couvre les deux cas
   que le survol ignore : la navigation au clavier et l'écran tactile, où poser
   le doigt dans le champ donne le focus sans jamais produire de survol. */
.bouton-renommer { visibility: hidden; flex-shrink: 0; }
.rangee-categorie:hover .bouton-renommer,
.champ-nom:focus-within .bouton-renommer { visibility: visible; }

.compteur-produits {
  display: flex; gap: .4rem; align-items: center;
  margin: 0; min-width: 0;
}

.nombre-produits { font-size: .85rem; color: var(--texte-doux); }
.nombre-produits--vide { font-style: italic; opacity: .7; }

/* La colonne d'action garde sa largeur même sans bouton : sans elle, les rangées
   supprimables seraient les seules à s'aligner. */
.cellule-action { display: flex; justify-content: flex-end; }
.bouton-compact { padding: .3rem .6rem; font-size: .8rem; }

.note--pied { margin: .9rem 0 0; font-size: .82rem; }

.etat-vide {
  margin: 0; padding: 2.2rem 1rem;
  text-align: center; color: var(--texte);
}

.etat-vide .note { display: inline-block; margin-top: .4rem; }

/* ── Écrans étroits (tablette en portrait, mobile) ────────────────────────── */
@media (max-width: 720px) {
  .application { flex-direction: column; }
  .barre-laterale { width: 100%; }
  .navigation { flex-direction: row; flex-wrap: wrap; }
  .contenu { padding: 1.4rem; }

  /* Deux colonnes seulement : le nom occupe toute la première ligne, le rang et
     les décomptes se rangent dessous. L'en-tête n'a plus de sens et disparaît. */
  .entete-liste { display: none; }

  .rangee-categorie {
    grid-template-columns: 5.5rem minmax(0, 1fr);
    gap: .5rem .9rem;
    padding: .7rem .2rem;
  }

  .bascule-tri { padding-left: 0; }

  .champ-nom { grid-column: 1 / -1; order: -1; }
  .bouton-renommer { visibility: visible; }
}

/* ── Tableau de bord ──────────────────────────────────────────────────────── */
.carte-stat { align-items: flex-start; }
.corps-stat { flex: 1; min-width: 0; }

/* Chaque état de paiement a sa couleur, la même que dans le reste de
   l'application : vert payé, ambre arrhes, rouge impayé. */
.icone-stat.stat--vert  { color: var(--vert-fonce); background: var(--vert-pale); }
.icone-stat.stat--ambre { color: #b06a00; background: #fff4e2; }
.icone-stat.stat--rouge { color: var(--rouge); background: var(--rouge-pale); }

.rail-stat {
  display: block; height: 6px; margin-top: .55rem;
  background: var(--bordure); border-radius: 999px; overflow: hidden;
}

.rail-stat > span { display: block; height: 100%; border-radius: 999px; }
.rail-stat.stat--vert  > span { background: var(--vert-fonce); }
.rail-stat.stat--ambre > span { background: var(--orange-vif); }
.rail-stat.stat--rouge > span { background: var(--rouge); }

.grille-apercus {
  display: grid; gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.apercu-evenement {
  border: 1px solid var(--bordure); border-radius: var(--rayon);
  overflow: hidden;
}

.entete-apercu {
  display: flex; justify-content: space-between; align-items: baseline; gap: .6rem;
  padding: .6rem .85rem;
  color: var(--blanc); font-size: .88rem;
}

.entete-apercu span { opacity: .9; font-size: .82rem; }
.corps-apercu { padding: .8rem .85rem 1rem; }

.ligne-remplissage {
  display: flex; justify-content: space-between; align-items: baseline;
  margin: 0 0 .4rem;
  font-size: .84rem; color: var(--texte-doux);
}

.ligne-remplissage strong { color: var(--texte); font-variant-numeric: tabular-nums; }

.pastilles-plages { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .75rem; }

/* Une pastille par plage : elle donne l'horaire et son remplissage sans quitter
   le tableau de bord, et prend la couleur de son état comme sur l'écran des
   créneaux — le vendeur retrouve le même code partout. */
.pastille-plage {
  padding: .18rem .5rem;
  font-size: .74rem; font-variant-numeric: tabular-nums;
  color: var(--texte-doux); background: var(--creme-fonce);
  border: 1px solid var(--bordure); border-radius: 999px;
}

.pastille-plage--presque { color: #b06a00; background: #fff4e2; border-color: var(--orange-vif); }
.pastille-plage--complet { color: var(--rouge); background: var(--rouge-pale); border-color: var(--rouge); }

.grille-tableau {
  display: grid; gap: 1.2rem;
  grid-template-columns: minmax(0, 2.4fr) minmax(0, 1fr);
  align-items: start;
}

.grille-vendeurs {
  display: grid; gap: .8rem;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}

.carte-vendeur {
  display: flex; flex-direction: column; align-items: center;
  padding: .9rem .6rem;
  text-align: center;
  background: var(--creme); border: 1px solid var(--bordure);
  border-radius: var(--rayon-petit);
}

.carte-vendeur .avatar { margin: 0 0 .5rem; }
.nom-vendeur { font-size: .92rem; }
.role-vendeur { font-size: .75rem; color: var(--texte-doux); }
.compte-vendeur {
  margin-top: .35rem;
  font-size: 1.6rem; font-weight: 700; color: var(--orange);
  font-variant-numeric: tabular-nums;
}

.liste-stock { margin: 0; padding: 0; list-style: none; }

.liste-stock li {
  display: flex; justify-content: space-between; align-items: center; gap: .6rem;
  padding: .4rem 0;
  border-bottom: 1px solid var(--bordure);
}

.liste-stock li:last-child { border-bottom: none; }
.nom-stock { font-size: .88rem; }

@media (max-width: 900px) {
  /* La colonne des catégories passe sous les vendeurs plutôt que de se réduire
     à une bande illisible. */
  .grille-tableau { grid-template-columns: minmax(0, 1fr); }
}

/* ── Familles de couleurs : catégories et archives ────────────────────────── */
/* Deux domaines distincts, deux couleurs constantes d'un écran à l'autre : le
   violet mène toujours aux catégories, le brun sourd concerne toujours ce qui
   est mis de côté. L'orange reste réservé aux produits eux-mêmes. */
.bouton-violet, .pastille-filtre--categorie {
  padding: .45rem .8rem;
  font: inherit; font-size: .85rem; font-weight: 600;
  color: #6b46c1; background: #f3efff;
  border: 1px solid #ddd0f7; border-radius: var(--rayon-petit);
  text-decoration: none; cursor: pointer;
}

.bouton-violet:hover, .pastille-filtre--categorie:hover {
  color: var(--blanc); background: #7c5cd6; border-color: #7c5cd6;
}

.bouton-archive, .pastille-filtre--archive {
  padding: .45rem .8rem;
  font: inherit; font-size: .85rem; font-weight: 600;
  color: var(--brun-clair); background: #efe9e3;
  border: 1px solid #ddd2c8; border-radius: var(--rayon-petit);
  text-decoration: none; cursor: pointer;
}

.bouton-archive:hover, .pastille-filtre--archive:hover {
  color: var(--blanc); background: var(--brun-clair); border-color: var(--brun-clair);
}

/* En pastille, les deux gardent la forme ronde de la barre de filtres. */
.pastille-filtre--categorie, .pastille-filtre--archive {
  padding: .42rem .85rem; border-radius: 999px; white-space: nowrap;
}

.pastille-filtre--archive.pastille-filtre--active {
  color: var(--blanc); background: var(--brun-clair); border-color: var(--brun-clair);
}

/* ── Manque de stock (EF-036) ─────────────────────────────────────────────── */
/* Le manque se lit en rouge, comme une plage complete : dans les deux cas
   l'information est « on ne peut plus en promettre ». */
.etiquette--manque {
  color: var(--blanc); background: var(--rouge);
}

.detail-engagement {
  display: block;
  font-size: .74rem; color: var(--texte-doux);
}

.carte-stat--alerte { border-color: var(--rouge); }
.carte--alerte { border-left: 4px solid var(--rouge); }

.liste-manques { margin: .6rem 0 0; padding: 0; list-style: none; }

.liste-manques li {
  display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
  padding: .45rem 0;
  border-bottom: 1px solid var(--bordure);
}

.liste-manques li:last-child { border-bottom: none; }
.nom-manque { font-weight: 600; min-width: 12rem; }
.liste-manques .etiquette--manque { margin-left: auto; }

/* ── Commandes : wizard de saisie (phase 4) ───────────────────────────────── */
/* Le fil d'étapes reprend la barre de la maquette v6 : étape faite en vert,
   étape courante en orange, étapes à venir en gris. La couleur porte l'état
   d'avancement, elle n'est pas décorative. */
.fil-etapes {
  display: flex; gap: .4rem;
  margin: 0 0 1.4rem; padding: 0;
  list-style: none;
}

.etape {
  flex: 1;
  display: flex; align-items: center; justify-content: center; gap: .45rem;
  padding: .55rem .4rem;
  font-size: .82rem; font-weight: 600;
  color: var(--texte-doux); background: var(--bordure);
  border-radius: var(--rayon-petit);
}

.etape--courante { color: var(--blanc); background: var(--orange); }
.etape--faite    { color: var(--blanc); background: var(--vert-fonce); }

.numero-etape {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.25rem; height: 1.25rem;
  font-size: .75rem; font-weight: 700;
  background: rgb(255 255 255 / 22%); border-radius: 50%;
}

.etape:not(.etape--courante):not(.etape--faite) .numero-etape {
  background: rgb(45 26 14 / 8%);
}

/* Barre d'actions commune aux quatre étapes : le retour à gauche, l'action
   principale à droite et large — c'est elle qu'on vise sans regarder. */
.barre-wizard {
  display: flex; align-items: center; gap: .7rem;
  margin-top: 1.2rem;
}

.barre-wizard .bouton-principal,
.barre-wizard .bouton-valider { flex: 1; margin: 0; }
.barre-wizard .bouton-discret { margin: 0; }

.bouton-valider {
  padding: .8rem 1.2rem;
  font: inherit; font-size: .95rem; font-weight: 700;
  color: var(--blanc); background: var(--vert-fonce);
  border: none; border-radius: var(--rayon-petit);
  text-align: center; text-decoration: none; cursor: pointer;
}

.bouton-valider:hover { background: #196f3d; }

.abandon-wizard { margin-top: 1.4rem; text-align: center; }
.abandon-wizard .bouton-discret { margin: 0; }

.rappel-livraison {
  margin-left: .4rem; padding: .1rem .5rem;
  font-size: .74rem; font-weight: 700;
  color: #1d4ed8; background: #e8f0fe;
  border-radius: 999px;
}

/* ── Étape 1 : la journée à gauche, ses plages à droite ───────────────────── */
/* Deux colonnes comme la maquette v6 : on choisit d'abord la journée, ce qui
   n'affiche que ses horaires. Dérouler toutes les plages de toutes les journées
   noierait le choix — le 24 décembre en compte une cinquantaine. */
.etape-creneau {
  display: grid; gap: 1.4rem;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  align-items: start;
}

.colonne-evenements { display: flex; flex-direction: column; gap: .7rem; }
.colonne-plages { display: flex; flex-direction: column; }

/* Le bouton radio de la journée est masqué mais reste focalisable au clavier :
   `display: none` le sortirait de l'ordre de tabulation. C'est la carte, son
   étiquette, qui sert de surface cliquable. */
.radio-evenement {
  position: absolute; width: 1px; height: 1px;
  opacity: 0; pointer-events: none;
}

/* L'apparence de la carte passe par des variables plutôt que par des classes :
   les règles qui les renseignent sont écrites dans le gabarit, faute de
   connaître les identifiants d'événement à l'avance. Chacune a ici sa valeur
   par défaut — celle de la carte non retenue. */
.carte-evenement--choix {
  display: block; width: 100%; margin: 0; padding: 0;
  font: inherit; font-weight: 400; text-align: left;
  background: var(--blanc);
  border: 3px solid var(--bordure-carte, var(--bordure));
  border-radius: var(--rayon);
  box-shadow: var(--ombre-carte, none);
  overflow: hidden; cursor: pointer;
}

.carte-evenement--choix:hover { border-color: var(--orange-pale); }

.carte-evenement--choix .entete-evenement {
  display: flex; align-items: center; justify-content: space-between; gap: .6rem;
  padding: .75rem 1rem;
  color: var(--texte-bandeau, var(--texte));
  background: var(--fond-bandeau, var(--creme-fonce));
}

.carte-evenement--choix .nom-evenement { font-size: 1rem; opacity: 1; }
.carte-evenement--choix .date-evenement { margin: 0; font-size: .82rem; opacity: .85; }

.pied-evenement {
  display: flex; align-items: center; justify-content: space-between;
  padding: .55rem 1rem;
  font-size: .82rem; color: var(--texte-doux);
  background: var(--fond-pied, var(--creme));
}

/* Un seul groupe de plages est visible à la fois : celui de la journée cochée,
   révélé par la règle générée dans le gabarit. Le changement de journée ne
   coûte donc aucune requête. */
.groupe-plages { display: none; flex-direction: column; gap: .5rem; }
.bloc-vide {
  padding: 1.5rem; text-align: center;
  background: var(--creme-fonce); border-radius: var(--rayon);
}

/* La plage est un bouton radio dont le libellé occupe toute la carte : le
   vendeur clique n'importe où dessus, ce qui compte sur écran tactile. */
.plage--choix { position: relative; margin: 0; cursor: pointer; }
.plage--choix input[type="radio"] { position: absolute; opacity: 0; }

.ligne-plage {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: .6rem; margin-bottom: .4rem;
}

.ligne-plage .heures-plage { margin: 0; }

/* Surbrillance portée par `:checked` et non par une classe rendue côté
   serveur : elle doit apparaître **au clic**, pas après la validation de
   l'étape — c'est le seul retour visuel que le vendeur obtient. */
.plage--choix:has(input:checked) {
  background: var(--orange-tres-pale);
  border-color: var(--orange);
  box-shadow: 0 0 0 2px var(--orange-pale);
}

.plage--choix:has(input:checked) .heures-plage,
.plage--choix:has(input:checked) .libelle-etat { color: var(--orange); }

.plage--choix:hover:not(.plage--complet) { border-color: var(--orange-pale); }

/* Plage complète : cliquable nulle part, mais toujours visible (EF-011) — le
   vendeur doit pouvoir dire au client « celle-là est pleine ». */
.plage--complet { cursor: not-allowed; opacity: .65; }

.bascule-livraison {
  display: flex; align-items: center; gap: .75rem;
  margin: 0 0 1rem; padding: .8rem 1rem;
  font-weight: 400;
  background: var(--blanc);
  border: 1px solid var(--bordure); border-radius: var(--rayon);
  cursor: pointer;
}

.bascule-livraison:has(input:checked) {
  background: var(--orange-tres-pale); border-color: var(--orange);
}

.colonne-plages .barre-wizard { margin-top: auto; padding-top: 1.2rem; }

.bascule-livraison > span { display: flex; flex-direction: column; }
.bascule-livraison input { width: auto; margin: 0; }

/* ── Étapes 2 et 4 : formulaire à gauche, récapitulatif à droite ──────────── */
.grille-etape {
  display: grid; gap: 1.1rem;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  align-items: start;
}

.grille-etape .barre-wizard { grid-column: 1 / -1; }

.colonne-recap { display: flex; flex-direction: column; gap: .9rem; }

.recap-bloc {
  padding: .9rem 1.1rem;
  background: var(--blanc);
  border: 1px solid var(--bordure); border-radius: var(--rayon);
}

.intitule-recap {
  margin: 0 0 .5rem;
  font-size: .74rem; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: var(--texte-doux);
}

.intitule-recap--espace { margin-top: 1rem; }

.pastille-evenement {
  display: inline-block; margin: 0 0 .35rem; padding: .2rem .7rem;
  font-size: .8rem; font-weight: 700;
  color: var(--blanc); background: var(--orange);
  border-radius: 999px;
}

.heure-recap { margin: 0; font-weight: 700; }
.nom-client-recap { margin: 0; font-weight: 700; font-size: 1.02rem; }

.note-commande {
  margin: .4rem 0 0;
  font-size: .85rem; font-style: italic; color: var(--texte-doux);
}

.champ { margin-bottom: .2rem; }
.ligne-champs { display: flex; gap: .8rem; }
.ligne-champs .champ { flex: 1; }

/* `email` est arrivé avec l'écran d'administration : sans lui dans cette liste,
   le champ gardait sa taille par défaut (une vingtaine de caractères) et
   débordait de la carte au lieu de suivre la colonne. */
input[type="tel"], input[type="search"], input[type="number"],
input[type="email"], textarea {
  width: 100%;
  padding: .7rem .85rem;
  font: inherit;
  color: var(--texte); background: var(--creme);
  border: 1px solid var(--bordure); border-radius: var(--rayon-petit);
}

textarea { resize: vertical; }

/* ── Étape 3 : catalogue en tuiles + panier ───────────────────────────────── */
.etape-produits {
  display: grid; gap: 1.1rem;
  grid-template-columns: minmax(0, 1fr) 24rem;
  align-items: start;
}

.colonne-catalogue { min-width: 0; }

.grille-tuiles {
  display: grid; gap: .6rem; margin-top: .9rem;
  grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr));
}

/* La tuile est un vrai bouton d'envoi : accessible au clavier, et elle
   fonctionne sans une ligne de JavaScript. */
.tuile {
  position: relative;
  display: flex; flex-direction: column; align-items: center; gap: .3rem;
  width: 100%; padding: 1.1rem .7rem .8rem;
  font: inherit; text-align: center;
  color: var(--texte); background: var(--creme-fonce);
  border: 2px solid var(--bordure); border-radius: var(--rayon);
  cursor: pointer;
}

.tuile:hover { border-color: var(--orange); }
.tuile--menu { background: #faf5ff; border-color: #e9d5ff; }
.tuile--kg   { background: #fff7ed; border-color: var(--orange-pale); }

.tuile--choisie {
  background: var(--orange-tres-pale); border-color: var(--orange);
}

.nom-tuile { font-size: .88rem; font-weight: 700; line-height: 1.25; }
.prix-tuile { font-size: .85rem; font-weight: 700; color: var(--orange); }

.dispo-tuile { font-size: .72rem; color: var(--texte-doux); }
.dispo-tuile--rupture { font-weight: 700; color: var(--rouge); }

.badge-tuile {
  position: absolute; top: .35rem; left: .45rem;
  padding: .05rem .4rem;
  font-size: .6rem; font-weight: 800; letter-spacing: .05em;
  color: var(--blanc); border-radius: 999px;
}

.badge-tuile--menu { background: #7e22ce; }
.badge-tuile--kg   { background: var(--orange-fonce); }

.compteur-tuile {
  position: absolute; top: .35rem; right: .45rem;
  padding: .1rem .45rem;
  font-size: .7rem; font-weight: 800;
  color: var(--blanc); background: var(--orange);
  border-radius: 999px;
}

/* Le panier reste à l'écran pendant qu'on parcourt la grille : le vendeur
   vérifie ce qu'il a saisi sans remonter. */
.colonne-panier {
  position: sticky; top: 1rem;
  display: flex; flex-direction: column; gap: .6rem;
  max-height: calc(100vh - 7rem); overflow-y: auto;
  padding: 1rem;
  background: var(--blanc);
  border: 1px solid var(--bordure); border-radius: var(--rayon);
}

.titre-panier { margin: 0; font-size: 1.05rem; font-weight: 800; }
.panier-vide { padding: 1.5rem 0; text-align: center; }

.ligne-panier {
  padding: .65rem .75rem;
  background: var(--creme); border: 1px solid var(--bordure);
  border-radius: var(--rayon-petit);
}

.entete-ligne-panier {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: .5rem;
}

.entete-ligne-panier .badge-tuile { position: static; margin-right: .35rem; }

.reglage-quantite {
  display: flex; align-items: center; gap: .35rem; margin-top: .5rem;
}

.saisie-quantite { display: flex; align-items: center; gap: .25rem; }
.saisie-quantite input { width: 4.5rem; padding: .3rem .4rem; text-align: right; }
.unite-quantite { font-size: .78rem; color: var(--texte-doux); }

.bouton-rond {
  width: 1.8rem; height: 1.8rem;
  font: inherit; font-size: 1.05rem; font-weight: 700; line-height: 1;
  color: var(--texte-doux); background: var(--bordure);
  border: none; border-radius: var(--rayon-petit); cursor: pointer;
}

.bouton-rond--plus { color: var(--blanc); background: var(--orange); }
.sous-total { margin-left: auto; font-weight: 700; color: var(--orange); }

.note-ligne { display: flex; gap: .3rem; margin-top: .45rem; }
.note-ligne input { padding: .35rem .5rem; font-size: .82rem; }

.pied-panier { padding-top: .6rem; border-top: 1px solid var(--bordure); }

.total-panier {
  display: flex; align-items: baseline; justify-content: space-between;
  margin: .6rem 0;
  font-size: .9rem; color: var(--texte-doux);
}

.total-panier strong { font-size: 1.25rem; color: var(--orange); }

/* ── Statut de paiement ───────────────────────────────────────────────────── */
/* Trois boutons radio déguisés : un seul clic, et le clavier fonctionne — ce
   qu'une pile de <button> n'offrirait pas sans JavaScript. */
.choix-paiement { display: flex; gap: .35rem; }

.option-paiement {
  flex: 1; margin: 0; padding: .5rem .3rem;
  font-size: .8rem; font-weight: 700; text-align: center;
  border-radius: var(--rayon-petit); cursor: pointer;
}

.option-paiement input { position: absolute; opacity: 0; width: 0; }

.option-paiement--paye     { color: var(--vert-fonce); background: var(--vert-pale); }
.option-paiement--arrhes   { color: #b06a00; background: #fef9e7; }
.option-paiement--non_paye { color: var(--rouge); background: var(--rouge-pale); }

.option-paiement--paye:has(input:checked) {
  color: var(--blanc); background: var(--vert-fonce);
}

.option-paiement--arrhes:has(input:checked) {
  color: var(--blanc); background: var(--orange-vif);
}

.option-paiement--non_paye:has(input:checked) {
  color: var(--blanc); background: var(--rouge);
}

/* Le montant n'a de sens que sur le statut « arrhes » : il n'apparaît que
   lorsque celui-ci est retenu. Bascule en CSS pur, donc immédiate et
   fonctionnelle sans JavaScript.
   Le champ reste envoyé même masqué, ce qui est sans effet : le serveur
   remet le montant à zéro hors du statut « arrhes » (normaliser_paiement). */
.bloc-arrhes { display: none; margin-top: .7rem; }

.bloc-paiement:has(input[name="statut_paiement"][value="arrhes"]:checked)
  .bloc-arrhes { display: block; }

.bloc-arrhes label { font-size: .78rem; }

.montants-predefinis {
  display: flex; flex-wrap: wrap; gap: .3rem; margin-bottom: .45rem;
}

.montant-predefini {
  margin: 0; padding: .3rem .6rem;
  font-size: .8rem; font-weight: 700;
  color: #b06a00; background: #fef9e7;
  border: 1px solid transparent; border-radius: var(--rayon-petit);
  cursor: pointer;
}

.montant-predefini input { position: absolute; opacity: 0; width: 0; }

.montant-predefini:has(input:checked) {
  background: var(--blanc); border-color: var(--orange-vif);
}

.champ-montant { display: flex; align-items: center; gap: .35rem; }
.champ-montant input { padding: .45rem .6rem; }

/* « Arrhes versées » suit la même mise en forme que « reste à payer », mais
   n'est **pas** masquée en mode sans prix : une somme déjà versée par le client
   n'est pas un tarif, et il doit la retrouver (cf. `.sans-prix` plus bas). */
.reste-a-payer,
.arrhes-versees {
  display: flex; justify-content: space-between;
  margin: .6rem 0 0; font-size: .85rem; color: var(--texte-doux);
}

/* ── Étape 4 : récapitulatif ──────────────────────────────────────────────── */
.recap-produits { display: flex; flex-direction: column; }
.liste-recap { margin: 0; padding: 0; list-style: none; }

.liste-recap li {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: .3rem;
  padding: .4rem 0;
  border-bottom: 1px solid var(--bordure);
}

.liste-recap li:last-child { border-bottom: none; }
.nom-recap { font-weight: 600; font-size: .9rem; }

.note-recap {
  display: block; flex-basis: 100%;
  font-size: .78rem; font-style: italic; color: var(--texte-doux);
}

/* Ligne de panier dont le produit a été retiré du catalogue pendant la saisie :
   elle reste visible — la masquer ferait valider une commande incomplète — mais
   elle est barrée et signalée, et la validation la refuse. */
.ligne-indisponible .nom-recap,
.ligne-indisponible .prix {
  text-decoration: line-through;
  opacity: .6;
}

.note-recap--alerte {
  font-style: normal;
  font-weight: 600;
  color: var(--rouge);
}

/* ── Étape 5 : écran de succès ────────────────────────────────────────────── */
.ecran-succes { max-width: 34rem; margin: 2rem auto; text-align: center; }

.pastille-succes {
  display: flex; align-items: center; justify-content: center;
  width: 4rem; height: 4rem; margin: 0 auto 1rem;
  font-size: 1.8rem; font-weight: 800;
  color: var(--vert-fonce); background: var(--vert-pale);
  border-radius: 50%;
}

.ecran-succes h1 { margin: 0 0 .4rem; color: var(--vert-fonce); }
.numero-succes { margin: 0 0 .2rem; font-size: 1.05rem; }
.numero-succes strong { font-size: 1.3rem; color: var(--orange); }

.actions-succes {
  display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center;
  margin-top: 1.6rem;
}

.actions-succes .bouton-discret { margin: 0; }

/* ── Liste des commandes ──────────────────────────────────────────────────── */
.etiquette--livraison { color: #1d4ed8; background: #e8f0fe; }
.pastille-filtre--livraison { color: #1d4ed8; border-color: #c7d9fb; }

.pastille-filtre--livraison.pastille-filtre--active {
  color: var(--blanc); background: #1d4ed8; border-color: #1d4ed8;
}

.etiquette--paye     { color: var(--vert-fonce); background: var(--vert-pale); }
.etiquette--arrhes   { color: #b06a00; background: #fef9e7; }
.etiquette--non_paye { color: var(--rouge); background: var(--rouge-pale); }

.choix-champ { display: flex; gap: .3rem; }

.option-champ {
  margin: 0; padding: .4rem .75rem;
  font-size: .82rem; font-weight: 600;
  color: var(--texte-doux); background: var(--blanc);
  border: 1px solid var(--bordure); border-radius: var(--rayon-petit);
  cursor: pointer;
}

.option-champ input { position: absolute; opacity: 0; width: 0; }

.option-champ:has(input:checked) {
  color: var(--orange); background: var(--orange-tres-pale);
  border-color: var(--orange);
}

/* Le panneau de changement de statut se déplie sur la ligne, comme la saisie
   rapide du stock sur la liste des produits — même geste, même présentation. */
.action-statut { position: relative; }
.action-statut summary { list-style: none; cursor: pointer; }
.action-statut summary::-webkit-details-marker { display: none; }

.action-statut form {
  position: absolute; z-index: 5; right: 0; width: 15rem;
  margin-top: .35rem; padding: .8rem;
  background: var(--blanc);
  border: 1px solid var(--bordure); border-radius: var(--rayon);
  box-shadow: var(--ombre);
}

.action-statut .choix-paiement { margin-bottom: .3rem; }
.action-statut .bouton-principal { margin-top: .6rem; }

.pagination { display: flex; gap: .35rem; margin-top: 1rem; }

/* ── Établissement qui n'affiche pas les prix (CdC §9) ────────────────────── */
/* Une seule règle, posée sur le corps de page : elle vaut pour le rendu Jinja
   comme pour le panier reconstruit par le script. Les arrhes ne sont pas
   masquées — c'est une somme versée, pas un tarif. */
.sans-prix .prix,
.sans-prix .prix-tuile,
.sans-prix .sous-total,
.sans-prix .total-panier,
.sans-prix .reste-a-payer { display: none; }

/* ── Fiche d'une commande ─────────────────────────────────────────────────── */
.grille-fiche {
  display: grid; gap: 1.1rem;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  align-items: start;
}

.liste-composants {
  margin: .35rem 0 0; padding-left: 1.1rem;
  font-size: .82rem; color: var(--texte-doux);
}

.liste-composants .note { font-size: .72rem; font-style: italic; }

/* ── Écrans étroits : les colonnes s'empilent ─────────────────────────────── */
@media (max-width: 1100px) {
  .etape-produits { grid-template-columns: minmax(0, 1fr); }
  .colonne-panier { position: static; max-height: none; }
}

@media (max-width: 900px) {
  .grille-etape, .grille-fiche, .etape-creneau {
    grid-template-columns: minmax(0, 1fr);
  }
  .ligne-champs { flex-direction: column; gap: 0; }
  .fil-etapes { flex-wrap: wrap; }
  .etape { flex: 1 1 45%; }
}

/* Date et heure de retrait dans la liste : la date d'abord, puisque c'est
   l'ordre du tri. Chiffres tabulaires pour que les colonnes s'alignent. */
.date-retrait {
  display: block;
  font-size: .88rem; font-variant-numeric: tabular-nums;
}

.date-retrait strong { margin-left: .3rem; color: var(--orange); }

/* ── Page d'erreur (404, 403, 500) ───────────────────────────────────────────
   Volontairement sobre et centrée : elle s'affiche hors de l'application, sans
   barre latérale, parfois même avant toute connexion. */
.page-erreur {
  display: flex; align-items: center; justify-content: center;
  min-height: 100vh; padding: 2rem;
  background: var(--creme);
}

.carte-erreur {
  max-width: 34rem; width: 100%;
  padding: 2.4rem 2rem;
  text-align: center;
}

.code-erreur {
  margin: 0;
  font-size: 3.4rem; font-weight: 700; line-height: 1;
  color: var(--orange);
  font-variant-numeric: tabular-nums;
}

.carte-erreur h1 { margin: .6rem 0 .8rem; font-size: 1.35rem; }
.carte-erreur .note { margin: 0 auto; max-width: 28rem; }

/* La référence est faite pour être lue à voix haute au téléphone : chasse fixe
   et fond tramé, pour qu'on ne confonde pas un 0 et un O. */
.reference-erreur {
  margin: 1.2rem 0 0;
  font-size: .85rem; color: var(--texte-doux);
}

.reference-erreur strong {
  padding: .15rem .45rem;
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  letter-spacing: .06em;
  color: var(--texte);
  background: var(--creme-fonce);
  border: 1px solid var(--bordure); border-radius: .35rem;
}

.actions-erreur {
  display: flex; gap: .6rem; flex-wrap: wrap; justify-content: center;
  margin-top: 1.6rem;
}

/* ── Administration ────────────────────────────────────────────────────────
   Trois onglets (profils, établissement, paiement), chacun à son adresse. Les
   onglets sont des liens et non des boutons : on doit pouvoir mettre l'écran
   des réglages en signet et y revenir par le bouton « précédent ». */
.onglets {
  display: flex; gap: .25rem; flex-wrap: wrap;
  margin-bottom: 1.4rem; padding: .35rem;
  background: var(--blanc);
  border: 1px solid var(--bordure); border-radius: var(--rayon);
  box-shadow: var(--ombre);
}

.onglet {
  padding: .55rem 1.2rem;
  font-size: .9rem; font-weight: 600; text-decoration: none;
  color: var(--texte-doux);
  border-radius: var(--rayon-petit);
}

.onglet:hover { color: var(--texte); background: var(--creme-fonce); }

.onglet--actif,
.onglet--actif:hover { color: var(--blanc); background: var(--orange); }

/* Rappel des rôles : deux blocs côte à côte, séparés par un filet coloré qui
   reprend la couleur d'avatar du rôle — même code visuel qu'à l'écran de choix
   de profil, pour qu'on relie les deux sans y penser. */
.carte--compacte { padding-top: 1rem; padding-bottom: 1rem; }

.grille-droits {
  display: grid; gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  margin-top: .6rem;
}

.bloc-droit { padding-left: .9rem; border-left: 3px solid var(--bordure); }
.bloc-droit strong { display: block; margin-bottom: .2rem; font-size: .95rem; }
.bloc-droit span { font-size: .82rem; line-height: 1.5; color: var(--texte-doux); }
.bloc-droit--chef { border-left-color: #8b5cf6; }
.bloc-droit--vendeur { border-left-color: var(--orange-vif); }

/* Liste des profils : même grille que l'en-tête, comme pour les catégories —
   une rangée porte plusieurs formulaires, qu'un <tr> ne peut pas contenir. */
.liste-profils { margin: 0; padding: 0; list-style: none; }

.entete-liste--profils,
.rangee-profil {
  display: grid;
  grid-template-columns: minmax(10rem, 1fr) 10rem 12.5rem 10.5rem;
  align-items: center;
  gap: .9rem;
}

.rangee-profil { padding: .45rem .2rem; border-bottom: 1px solid var(--bordure); }
.rangee-profil:last-child { border-bottom: none; }

/* Un profil archivé reste lisible mais visiblement en retrait : il ne se
   présente plus à l'ouverture du poste, et la liste doit le dire d'un coup d'œil. */
.rangee-profil--archive { opacity: .62; }

.champ-nom--profil .avatar { flex-shrink: 0; }
.rangee-profil:hover .bouton-renommer { visibility: visible; }

.cellule-droit { min-width: 0; }
.cellule-droit p { display: flex; gap: .4rem; align-items: center; margin: 0; }
.cellule-nombre { margin-top: .2rem; font-size: .78rem; color: var(--texte-doux); }

/* Violet pour le chef, ambre pour les vendeurs : mêmes teintes que les avatars
   (cf. COULEURS_ROLE dans auth.py), pour que la couleur porte le niveau de
   droits partout de la même façon. */
.etiquette--chef {
  color: #6d28d9; background: #f3e8ff; border-color: #ddd0fb;
}

.etiquette--vendeur {
  color: #a16207; background: #fef7e4; border-color: var(--orange-pale);
}

/* Le PIN ne s'affiche jamais : le champ sert à en poser un nouveau. D'où le
   point de suspension en repère plutôt que la valeur. */
.cellule-pin { display: flex; gap: .35rem; flex-direction: column; min-width: 0; }
.formulaire-code { display: flex; gap: .4rem; align-items: center; }

.saisie-pin {
  width: 7.5rem; margin: 0;
  padding: .35rem .5rem;
  font: inherit; font-size: .9rem; text-align: center; letter-spacing: .18em;
  background: var(--blanc);
  border: 1px solid var(--bordure); border-radius: var(--rayon-petit);
}

.saisie-pin:focus { border-color: var(--orange); outline: none; }
.note--pin { font-size: .75rem; }

/* Action secondaire écrite comme un lien : « Retirer le PIN » ne doit pas peser
   autant qu'« Archiver », qui est à côté. */
.bouton-lien {
  padding: 0;
  font: inherit; font-size: .78rem; text-decoration: underline;
  color: var(--texte-doux); background: none; border: none; cursor: pointer;
}

.bouton-lien:hover { color: var(--orange); }

/* Case à cocher suivie de son explication : le texte passe sous l'intitulé, et
   la case s'aligne sur la première ligne plutôt que sur le milieu du bloc. */
.case-a-cocher--note { align-items: flex-start; }
.case-a-cocher--note .note { display: block; margin-top: .15rem; }

.rangee-profil .cellule-action { gap: .4rem; }

/* Montants d'arrhes : des jetons, parce que c'est ainsi qu'ils apparaîtront au
   vendeur à l'étape « paiement » d'une commande. */
.liste-montants {
  display: flex; gap: .6rem; flex-wrap: wrap;
  margin: 0; padding: 0; list-style: none;
}

.jeton-montant {
  display: flex; gap: .5rem; align-items: center;
  padding: .5rem .6rem .5rem .9rem;
  font-weight: 600;
  background: var(--orange-tres-pale);
  border: 1px solid var(--orange-pale); border-radius: var(--rayon-petit);
}

.bouton-retrait {
  display: grid; place-items: center;
  width: 1.4rem; height: 1.4rem; padding: 0;
  font: inherit; font-size: 1rem; line-height: 1;
  color: var(--texte-doux); background: none;
  border: none; border-radius: 50%; cursor: pointer;
}

.bouton-retrait:hover { color: var(--blanc); background: var(--rouge); }

/* Sur petit écran, la rangée repasse en deux colonnes : le nom occupe toute la
   largeur en tête, le reste se range dessous — même traitement que les
   catégories, pour ne pas avoir deux comportements à retenir. */
@media (max-width: 1100px) {
  .entete-liste--profils { display: none; }

  .rangee-profil {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: .5rem .9rem;
    padding: .8rem .2rem;
  }

  .champ-nom--profil { grid-column: 1 / -1; }
  .cellule-pin { grid-column: 1 / -1; }
  .rangee-profil .bouton-renommer { visibility: visible; }
}

/* ── Pages légales ─────────────────────────────────────────────────────────
   Mentions, confidentialité, CGU, cookies. Ce sont des documents : une colonne
   étroite, une hiérarchie de titres nette et des marges généreuses valent mieux
   ici que la mise en page dense des écrans de travail. Elles s'affichent aussi
   bien connecté que déconnecté, donc sans rien emprunter à la barre latérale. */
.page-legale { background: var(--creme); }

.feuille-legale {
  max-width: 48rem;
  margin: 0 auto;
  padding: 2.5rem 1.5rem 4rem;
}

.entete-legale { margin-bottom: 2rem; }
.marque--legale { text-decoration: none; color: inherit; }
.entete-legale h1 { margin: 0 0 .3rem; }

.maj-legale { margin: 0; color: var(--texte-doux); font-size: .88rem; }

.texte-legal {
  padding: 2rem 2.2rem;
  background: var(--blanc);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  box-shadow: var(--ombre);
}

.texte-legal h2 {
  margin: 2rem 0 .7rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--bordure);
  font-size: 1.15rem;
}

.texte-legal h2:first-child { margin-top: 0; padding-top: 0; border-top: none; }
.texte-legal h3 { margin: 1.5rem 0 .5rem; font-size: 1rem; }
.texte-legal p, .texte-legal li { font-size: .95rem; }
.texte-legal ul { padding-left: 1.2rem; }
.texte-legal li { margin-bottom: .45rem; }
.texte-legal a { color: var(--orange-fonce); }

.texte-legal code {
  padding: .1em .35em;
  background: var(--creme-fonce);
  border-radius: 4px;
  font-size: .9em;
}

.chapeau {
  margin: 0 0 1.6rem;
  padding-left: .9rem;
  border-left: 3px solid var(--orange);
  color: var(--brun-clair);
}

/* Encadré d'avertissement : une règle que l'on doit lire avant d'agir, pas une
   note de bas de page. */
.encadre-legal {
  padding: .9rem 1.1rem;
  background: var(--orange-tres-pale);
  border: 1px solid var(--orange-pale);
  border-radius: var(--rayon-petit);
}

/* Couples « intitulé / valeur » des mentions légales. */
.fiche-legale {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: .4rem 1.4rem;
  margin: 0 0 1.4rem;
  font-size: .95rem;
}

.fiche-legale dt { color: var(--texte-doux); }
.fiche-legale dd { margin: 0; }

.tableau-legal {
  width: 100%;
  margin: 0 0 1.4rem;
  border-collapse: collapse;
  font-size: .93rem;
}

.tableau-legal th, .tableau-legal td {
  padding: .7rem .8rem;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--bordure);
}

.tableau-legal thead th { background: var(--creme-fonce); font-size: .85rem; }
.tableau-legal tbody th { width: 12rem; font-weight: 600; }

.navigation-legale {
  display: flex; flex-wrap: wrap; gap: .4rem 1.2rem;
  margin-top: 1.6rem;
  font-size: .9rem;
}

.navigation-legale a { color: var(--orange-fonce); }
.navigation-legale [aria-current] { color: var(--texte-doux); }
.retour-legal { margin-top: 1.2rem; font-size: .9rem; }
.retour-legal a { color: var(--texte-doux); }

/* Rappel des pages légales dans la barre latérale et sur l'écran de connexion :
   présent, mais discret — ce n'est pas une entrée de navigation courante. */
.liens-legaux {
  display: flex; flex-wrap: wrap; gap: .2rem .8rem;
  margin-top: .9rem;
  font-size: .75rem;
}

.liens-legaux a { color: var(--texte-doux); text-decoration: none; }
.liens-legaux a:hover { text-decoration: underline; }
.liens-legaux--connexion a { color: rgb(255 255 255 / 65%); }

@media (max-width: 700px) {
  .texte-legal { padding: 1.4rem 1.1rem; }
  .fiche-legale { grid-template-columns: 1fr; gap: 0 0; }
  .fiche-legale dd { margin-bottom: .7rem; }
  .tableau-legal tbody th { width: auto; }
}