:root {
  --couleur-fond: #f5f3ef;
  --couleur-carte: #ffffff;
  --couleur-texte: #2b241d;
  --couleur-bordeaux: #6d1327;
  --couleur-bordeaux-fonce: #4d0c1a;
  --couleur-or: #b08d3e;
  --couleur-bordure: #ddd6cc;
  --couleur-erreur: #b23a2e;
  --couleur-ok: #2f7a3d;
  --rayon: 8px;
}

* { box-sizing: border-box; }

a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--couleur-or);
  outline-offset: 2px;
}

.bandeau-test {
  position: sticky;
  top: 0;
  z-index: 9999;
  background: #ff8c00;
  color: #1a1400;
  text-align: center;
  padding: 6px;
  font-weight: 700;
  font-size: 0.9rem;
}

html, body {
  /* Filet de sécurité anti-scroll horizontal (cf. recette mobile du 14/07) : la vraie cause
     (spécificité CSS du tiroir de nav, cf. .topbar .nav-scrollable plus bas) est corrigée,
     mais on garde cette ceinture-bretelles pour qu'aucun débordement ponctuel ne fasse
     défiler la page latéralement. */
  overflow-x: hidden;
}

body {
  margin: 0;
  font-family: -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  background: var(--couleur-fond);
  color: var(--couleur-texte);
  font-size: 16px;
  line-height: 1.4;
}

a { color: var(--couleur-bordeaux); }

.topbar {
  background: var(--couleur-bordeaux-fonce);
  color: #fff;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  padding: 0.6rem 1rem;
  gap: 0.5rem;
}
.topbar .logo { display: flex; align-items: center; gap: 0.6rem; color: #fff; font-weight: 700; text-decoration: none; font-size: 1.1rem; }
.logo-nav { height: 32px; width: auto; display: block; border-radius: 4px; background: #fff; padding: 2px 5px; }
.topbar nav { display: flex; gap: 1rem; flex-wrap: wrap; }
.topbar nav a { color: #f0e6d8; text-decoration: none; font-size: 0.95rem; }
.topbar nav a:hover { text-decoration: underline; }
.topbar nav a.deconnexion { color: #d9b3b3; }
.topbar nav a.utilisateur-courant { font-weight: 600; }

.chip-bascule {
  display: inline-block;
  padding: 0.2rem 0.65rem;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 600;
  text-decoration: none !important;
  border: 1px solid transparent;
}
.chip-bascule-test { background: #ff8c00; color: #1a1400; }
.chip-bascule-test:hover { background: #e67d00; }
.chip-bascule-prod { background: #d9d3c7; color: #3a352c; }
.chip-bascule-prod:hover { background: #c9c2b3; }

.contenu { max-width: 980px; margin: 0 auto; padding: 1rem; }

h1 { font-size: 1.5rem; margin: 0.5rem 0 1rem; }
h2 { font-size: 1.1rem; margin: 0 0 0.75rem; color: var(--couleur-bordeaux); }

.bloc {
  background: var(--couleur-carte);
  border: 1px solid var(--couleur-bordure);
  border-radius: var(--rayon);
  padding: 1rem;
  margin-bottom: 1rem;
}

.formulaire label { display: block; font-size: 0.85rem; font-weight: 600; margin-bottom: 0.2rem; }
.formulaire input[type=text], .formulaire input[type=email], .formulaire input[type=number], .formulaire input[type=date],
.formulaire input[type=password], .formulaire select, .formulaire textarea {
  width: 100%;
  padding: 0.55rem;
  border: 1px solid var(--couleur-bordure);
  border-radius: var(--rayon);
  font-size: 1rem;
  background: #fff;
  color: var(--couleur-texte);
}
.formulaire textarea { resize: vertical; }
.avertissement { color: #7a5417; font-size: 0.82rem; margin: 0.35rem 0 0; }

.ligne-champs { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-bottom: 0.75rem; }
.champ { flex: 1 1 160px; }
.champ-large { flex: 2 1 260px; }
.champ-petit { flex: 0 1 110px; }
.champ-case { flex: 0 0 auto; display: flex; align-items: center; gap: 0.4rem; }
.champ-case input { width: 22px; height: 22px; }
.champ-mini { width: 90px !important; }

.bouton {
  display: inline-block;
  padding: 0.6rem 1.1rem;
  border-radius: var(--rayon);
  border: 1px solid var(--couleur-bordeaux);
  background: #fff;
  color: var(--couleur-bordeaux);
  font-size: 1rem;
  text-decoration: none;
  cursor: pointer;
}
.bouton-principal { background: var(--couleur-bordeaux); color: #fff; }
.bouton-principal:hover { background: var(--couleur-bordeaux-fonce); }
.bouton-secondaire { background: #fff; color: var(--couleur-bordeaux); }
.bouton-large { width: 100%; padding: 0.9rem; font-size: 1.05rem; font-weight: 600; }
.bouton-petit { padding: 0.35rem 0.7rem; font-size: 0.85rem; }
.bouton:disabled { opacity: 0.5; cursor: not-allowed; }

.table { width: 100%; border-collapse: collapse; margin-bottom: 0.75rem; }
.table th, .table td { text-align: left; padding: 0.5rem; border-bottom: 1px solid var(--couleur-bordure); font-size: 0.92rem; }
.table th { color: #6a6055; font-weight: 600; }
.actions { display: flex; gap: 0.4rem; }

.badge {
  display: inline-block;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  font-size: 0.78rem;
  background: #eee;
  color: #555;
}
.badge-ouvert { background: #fbe8c9; color: #7a5417; }
.badge-cloture, .badge-valide { background: #d9ecd9; color: #2f5c33; }
.badge-brouillon { background: #f0dede; color: #7a2222; }
.badge-vrac { background: #f0dede; color: #7a2222; }
.badge-bouteille { background: #dee8f0; color: #22497a; }
/* États de fait (pas des statuts) : calculés depuis les variantes du vin. */
.badge-sans-prix { background: #ffe0b2; color: #7a4a00; font-weight: 600; }
.badge-non-range { background: #ede0f5; color: #52306e; font-weight: 600; }

.vide { color: #8a8072; font-style: italic; }
.info-discrete { color: #6a6055; font-size: 0.9rem; }
.liste-simple { list-style: none; padding: 0; margin: 0; }
.liste-simple li { padding: 0.3rem 0; border-bottom: 1px solid #f0ece3; }

.page-login {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 1.5rem;
  background: linear-gradient(160deg, #2a0a0e 0%, #4a1218 55%, #5c161d 100%);
}
/* Sur TEST, .bandeau-test est un frère flex de .carte-login à l'intérieur de body.page-login :
   sans cette règle il devient un item du flex row, se retrouve à gauche et pousse la carte hors
   du centre (constaté en recette du 14/07 ; la PROD sans bandeau était bien centrée). En le
   sortant du flux (position: fixed, pleine largeur, en haut), .carte-login redevient le seul
   enfant en flux du body et reste centrée horizontalement comme verticalement. */
.page-login .bandeau-test {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
}
.carte-login {
  background: #fff;
  padding: 2.5rem 2rem 2rem;
  border-radius: 18px;
  width: 100%;
  max-width: 380px;
  text-align: center;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35);
  border-top: 3px solid var(--couleur-or);
}
.logo-login { display: block; width: 220px; max-width: 70%; height: auto; margin: 0 auto 1.1rem; }
.carte-login h1 {
  font-family: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  font-size: 2rem;
  letter-spacing: 0.02em;
  color: var(--couleur-bordeaux);
  margin: 0;
}
.carte-login .sous-titre { color: #8a8072; margin-top: 0.2rem; margin-bottom: 1rem; font-size: 0.95rem; }
.filet-or {
  width: 56px;
  height: 2px;
  margin: 0.2rem auto 1rem;
  background: linear-gradient(90deg, transparent, var(--couleur-or), transparent);
  border: none;
}
.tagline-login {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  color: var(--couleur-or);
  font-size: 1.05rem;
  margin: 0 0 1.4rem;
}
.carte-login form { text-align: left; }
.carte-login label {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--couleur-texte);
  margin: 0.9rem 0 0.35rem;
}
.carte-login label:first-of-type { margin-top: 0; }
.carte-login input[type="text"],
.carte-login input[type="email"],
.carte-login input[type="password"] {
  width: 100%;
  padding: 0.75rem 0.85rem;
  border: 1px solid var(--couleur-bordure);
  border-radius: 10px;
  font-size: 1rem;
  background: #faf9f7;
  color: var(--couleur-texte);
  transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}
.carte-login input[type="text"]:focus,
.carte-login input[type="email"]:focus,
.carte-login input[type="password"]:focus {
  outline: none;
  border-color: var(--couleur-bordeaux);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(109, 19, 39, 0.15);
}
.carte-login .bouton {
  margin-top: 1.5rem;
  min-height: 46px;
  font-size: 1.05rem;
  border-radius: 10px;
}
.erreur { color: var(--couleur-erreur); font-weight: 600; margin-top: 0.75rem; }
.message-ok { background: #d9ecd9; color: #2f5c33; padding: 0.6rem 1rem; border-radius: var(--rayon); margin-bottom: 1rem; }
.lien-discret { text-align: center; margin-top: 1.1rem; }
.lien-discret a { color: #8a8072; font-size: 0.88rem; text-decoration: underline; }

.formulaire-inline { display: flex; gap: 0.4rem; align-items: center; }
.champ-email-inline { padding: 0.4rem; font-size: 0.88rem; border: 1px solid var(--couleur-bordure); border-radius: var(--rayon); min-width: 170px; }
.colonne-discrete { color: #a89e90; font-size: 0.8rem; }

@media (max-width: 480px) {
  .page-login { padding: 1rem; }
  .carte-login { padding: 2rem 1.25rem 1.75rem; border-radius: 14px; }
  .logo-login { width: 180px; }
}

.statut-analyse { font-size: 0.9rem; color: #6a6055; }

.barre-actions { margin-top: 1rem; }

.formulaire-recherche { display: flex; gap: 0.5rem; margin-bottom: 1rem; }
.formulaire-recherche input { flex: 1; padding: 0.55rem; border-radius: var(--rayon); border: 1px solid var(--couleur-bordure); }

.mono { font-family: "Courier New", monospace; font-size: 0.85rem; }

.fil-achat { color: #6a6055; }

@media (max-width: 640px) {
  .ligne-champs { flex-direction: column; }
  .champ, .champ-large, .champ-petit { flex: 1 1 auto; }
  .table { font-size: 0.85rem; display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

/* ---------------------------------------------------------------------
   Refonte saisie mobile (13/07/2026) : nav responsive, choix de mode,
   wizard mobile, écran de contrôle PC.
   --------------------------------------------------------------------- */

.nav-scrollable {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  flex-wrap: nowrap;
}
/* Le comportement mobile (<= 900px, tiroir plein écran) est défini plus bas
   dans le bloc « Menu burger mobile », qui prend le pas sur cette règle
   desktop pour les petits écrans. */

.badge-controle { background: var(--couleur-bordeaux); color: #fff; font-weight: 700; }
.lien-changer-mode { color: #c9b8a8 !important; font-size: 0.85rem !important; }
.bouton-danger { background: #fff; color: var(--couleur-erreur); border: 1px solid var(--couleur-erreur); }
.bouton-danger:hover { background: var(--couleur-erreur); color: #fff; }
.formulaire-suppression { margin-top: 0.75rem; }

/* --- Wizard mobile -------------------------------------------------------- */

.assistant-mobile { max-width: 520px; margin: 0 auto; }
.assistant-mobile h1 { font-size: 1.3rem; text-align: center; }
.entete-variante { text-align: center; margin-bottom: 0.5rem; }

.champ-stepper, .champ-choix-photos, .champ-qualif, .champ-nb-photos { margin-bottom: 1.4rem; }
.champ-stepper label, .champ-choix-photos label, .champ-qualif label, .champ-nb-photos label {
  display: block; font-weight: 700; margin-bottom: 0.5rem; font-size: 0.95rem;
}

.stepper { display: flex; align-items: center; justify-content: center; gap: 1.2rem; }
.stepper-bouton {
  width: 56px; height: 56px; border-radius: 50%;
  border: 2px solid var(--couleur-bordeaux); background: #fff; color: var(--couleur-bordeaux);
  font-size: 1.8rem; line-height: 1; cursor: pointer;
}
.stepper-bouton:active { background: var(--couleur-bordeaux); color: #fff; }
.stepper-valeur { font-size: 1.6rem; font-weight: 700; min-width: 2.5rem; text-align: center; }

.choix-chips { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.chip {
  padding: 0.75rem 1.1rem;
  border-radius: 999px;
  border: 2px solid var(--couleur-bordure);
  background: #fff;
  color: var(--couleur-texte);
  font-size: 0.95rem;
  cursor: pointer;
}
.chip-actif { border-color: var(--couleur-bordeaux); background: var(--couleur-bordeaux); color: #fff; font-weight: 700; }
.champ-libre {
  margin-top: 0.6rem; width: 100%; padding: 0.7rem; font-size: 1rem;
  border: 1px solid var(--couleur-bordure); border-radius: var(--rayon);
}

.slots-photos { display: flex; flex-direction: column; gap: 1rem; margin-bottom: 1.4rem; }
.slot-photo { border: 1px dashed var(--couleur-bordure); border-radius: var(--rayon); padding: 0.75rem; }
.slot-photo-label { display: block; font-weight: 700; margin-bottom: 0.5rem; }
.slot-photo-input { width: 100%; font-size: 1rem; }
.slot-photo-apercu { display: flex; align-items: center; gap: 0.75rem; }
.slot-photo-miniature { width: 90px; height: 90px; object-fit: cover; border-radius: var(--rayon); border: 1px solid var(--couleur-bordure); }
.slot-photo-envoi .slot-photo-miniature { opacity: 0.5; }
.slot-photo-erreur { color: var(--couleur-erreur); }

.bouton-tactile { min-height: 56px; font-size: 1.15rem; }
.statut-enregistrement { text-align: center; color: var(--couleur-ok); font-weight: 600; margin-top: 0.75rem; }

/* --- Visionneuse plein écran (photos.js, fiche du vin) --------------------- */

.lightbox {
  position: fixed; inset: 0; background: rgba(0, 0, 0, 0.85);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 1rem; z-index: 10000;
}
.lightbox img { max-width: 92vw; max-height: 80vh; object-fit: contain; border-radius: var(--rayon); }

/* ---------------------------------------------------------------------
   Refonte UX lot 1 (24/07/2026) : liste unique du stock (chips de filtre,
   vignettes, pagination) et fiche unique d'un vin (bandeau de contrôle,
   cartes de variantes empilées, ré-analyse IA).
   --------------------------------------------------------------------- */

/* --- Liste unique --------------------------------------------------------- */

.chips-filtres { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1rem; }
.chip-filtre {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.9rem;
  border-radius: 999px;
  border: 1px solid var(--couleur-bordure);
  background: #fff;
  color: var(--couleur-texte);
  text-decoration: none;
  font-size: 0.9rem;
}
.chip-filtre:hover { border-color: var(--couleur-bordeaux); }
.chip-filtre-actif {
  border-color: var(--couleur-bordeaux);
  background: var(--couleur-bordeaux);
  color: #fff;
  font-weight: 700;
}
.chip-compteur {
  background: rgba(0, 0, 0, 0.08);
  border-radius: 999px;
  padding: 0 0.45rem;
  font-size: 0.8rem;
  font-weight: 700;
}
.chip-filtre-actif .chip-compteur { background: rgba(255, 255, 255, 0.25); }

.table-stock tbody tr.ligne-vin { cursor: pointer; }
.table-stock tbody tr.ligne-vin:hover { background: #faf6ef; }
.cellule-vignette { width: 56px; }
.vignette-stock {
  width: 44px;
  height: 44px;
  object-fit: cover;
  border-radius: var(--rayon);
  border: 1px solid var(--couleur-bordure);
  background: #fff;
  display: block;
}
.vignette-absente {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  color: #b8ae9f;
  border-style: dashed;
}
.lien-vin { font-weight: 600; text-decoration: none; }
.lien-vin:hover { text-decoration: underline; }

.pagination { display: flex; align-items: center; gap: 0.75rem; margin: 0.5rem 0 1.5rem; }

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

.ligne-badges { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; margin: 0 0 0.4rem; }
.badge-a-saisir { background: #fbe8c9; color: #7a5417; }

/* Publications (lot 3) : ligne read-only de l'en-tête de la fiche vin — quelle variante est
   partie sur quel canal, et quand. Volontairement discret (ni action, ni couleur forte). */
.ligne-publications {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.8rem;
  margin: 0 0 0.5rem;
  font-size: 0.85rem;
}
.publications-titre { color: #6a6055; font-weight: 600; }
.publication-variante { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0.3rem; }
.badge-publie { background: #e4ece4; color: #3c5c40; font-weight: 600; cursor: help; }

/* Encart de liaison entre écrans (ex. /exports -> /cibles). */
.encart-liaison {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  background: #fff;
  border: 1px solid var(--couleur-bordure);
  border-left: 4px solid var(--couleur-or);
  border-radius: var(--rayon);
  padding: 0.7rem 1rem;
  margin-bottom: 1rem;
  font-size: 0.92rem;
}
.encart-liaison .bouton { margin-left: auto; }

.bandeau-controle {
  background: #fbe8c9;
  border-left: 4px solid var(--couleur-or);
  border-radius: var(--rayon);
  padding: 0.75rem 1rem;
  margin-bottom: 1rem;
  font-size: 0.95rem;
}

.carte-variante {
  border: 1px solid var(--couleur-bordure);
  border-radius: var(--rayon);
  padding: 0.85rem;
  margin-bottom: 0.85rem;
  background: #fdfcfa;
}
.carte-variante-nouvelle { border-style: dashed; border-color: var(--couleur-or); }
.carte-variante-entete {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.6rem;
}
.carte-variante-entete h3 { margin: 0; font-size: 1rem; color: var(--couleur-bordeaux); }
.bouton-supprimer-variante, .bouton-retirer-variante { margin-left: auto; }

.barre-actions-fiche { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; }
.barre-actions-fiche .bouton-large { flex: 1 1 240px; width: auto; }
/* Le bouton de validation s'affiche en premier tout en restant second dans le DOM (cf.
   commentaire de stock_fiche.html : la touche Entrée doit enregistrer, pas valider). */
.barre-actions-fiche .bouton-valider { order: 1; }
.barre-actions-fiche .bouton-enregistrer-simple { order: 2; }

.champ-modifie-ia {
  background: #fff8e1 !important;
  border-color: var(--couleur-or) !important;
  box-shadow: 0 0 0 2px rgba(176, 141, 62, 0.25);
}

.barre-reocr { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; margin-bottom: 0.8rem; }
.barre-reocr .info-discrete { flex: 1 1 100%; margin: 0; }
.statut-reocr { font-size: 0.9rem; color: #6a6055; }
.statut-reocr-erreur { color: var(--couleur-erreur); font-weight: 600; }

.case-photo-ocr {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.78rem;
  color: var(--couleur-texte);
  cursor: pointer;
}
.case-photo-ocr input { width: 18px; height: 18px; }

/* ---------------------------------------------------------------------
   Menu burger mobile (14/07/2026) : la nav horizontale devient un tiroir
   plein écran/latéral en dessous de 900px. Voir static/js/menu.js pour
   l'ouverture/fermeture (ouvert par défaut = jamais, avant chargement JS).
   --------------------------------------------------------------------- */

.topbar-titre-court { display: none; }

.burger-menu {
  display: none;
  position: relative;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: none;
  background: transparent;
  color: #fff;
  cursor: pointer;
  border-radius: var(--rayon);
  flex: 0 0 auto;
}
.burger-menu:hover { background: rgba(255, 255, 255, 0.1); }

.burger-icone,
.burger-icone::before,
.burger-icone::after {
  content: "";
  position: absolute;
  left: 10px;
  width: 24px;
  height: 2px;
  background: #f0e6d8;
  border-radius: 2px;
  transition: transform 0.2s ease, opacity 0.2s ease, top 0.2s ease;
}
.burger-icone { top: 21px; }
.burger-icone::before { top: -8px; }
.burger-icone::after { top: 8px; }
.burger-menu[aria-expanded="true"] .burger-icone { background: transparent; }
.burger-menu[aria-expanded="true"] .burger-icone::before { top: 0; transform: rotate(45deg); }
.burger-menu[aria-expanded="true"] .burger-icone::after { top: 0; transform: rotate(-45deg); }

.badge-burger {
  /* Pastille décalée hors du cadre de l'icône (top/right négatifs) pour ne jamais mordre
     sur les barres du burger : l'icône occupe x:10-34 / y:13-31 dans le bouton 44x44
     (cf. .burger-icone ci-dessous) ; la pastille, plus petite et poussée dans le coin, reste
     hors de cette zone. */
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 16px;
  height: 16px;
  padding: 0 3px;
  border-radius: 999px;
  font-size: 0.64rem;
  line-height: 16px;
  text-align: center;
  box-shadow: 0 0 0 2px var(--couleur-bordeaux-fonce);
}

.overlay-nav { display: none; }

/* Regroupement bas de tiroir : sur desktop, invisible dans la structure
   (display:contents) pour conserver le rendu actuel de la barre horizontale. */
.tiroir-bas { display: contents; }

.topbar nav a.lien-actif { text-decoration: underline; font-weight: 700; color: #fff; }

@media (max-width: 900px) {
  .topbar { flex-wrap: nowrap; align-items: center; }
  .topbar-titre-long { display: none; }
  .topbar-titre-court { display: inline; }

  .burger-menu { display: inline-flex; }

  .overlay-nav.visible {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 1000;
  }

  /* Préfixées par .topbar pour battre en spécificité les règles de base ".topbar nav"
     (0,1,1) et ".topbar nav a" (0,1,2) : sans le préfixe, ".nav-scrollable" seul (0,1,0)
     perd le cascade et flex-wrap:wrap / gap:1rem de la règle de base restent appliqués en
     mobile — c'est ce qui faisait passer .tiroir-bas en deuxième colonne, coupée par le bord
     de l'écran (recette du 14/07), et provoquait le débordement horizontal de la page. */
  .topbar .nav-scrollable {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(84vw, 340px);
    max-width: 340px;
    height: 100%;
    background: var(--couleur-bordeaux-fonce);
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 0;
    padding: 3.5rem 0 1rem;
    margin: 0;
    overflow-y: auto;
    overflow-x: hidden;
    transform: translateX(100%);
    transition: transform 0.25s ease;
    z-index: 1001;
    box-shadow: -4px 0 18px rgba(0, 0, 0, 0.3);
  }
  .nav-scrollable.ouverte { transform: translateX(0); }

  .topbar .nav-scrollable a {
    flex: none;
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 48px;
    padding: 0.75rem 1.25rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    font-size: 1.02rem;
  }
  .topbar nav.nav-scrollable a.lien-actif {
    background: rgba(255, 255, 255, 0.1);
    text-decoration: none;
    box-shadow: inset 3px 0 0 var(--couleur-or);
  }

  .tiroir-bas {
    display: flex;
    flex-direction: column;
    margin-top: auto;
    padding-top: 0.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.18);
  }
  .tiroir-bas .chip-bascule { margin: 0.75rem 1.25rem; text-align: center; }
}

body.nav-ouverte-body { overflow: hidden; }

/* achats lot1 — répartition manuelle du coût d'un lot (page achats + page de modification).
   Ajout en fin de fichier uniquement, aucune règle existante n'est modifiée. */
.message-avertissement {
  background: #fbe8c9;
  color: #7a5417;
  padding: 0.6rem 1rem;
  border-radius: var(--rayon);
  margin-bottom: 1rem;
}
.table-repartition .col-nombre { text-align: right; }
.table-repartition tfoot th { text-align: right; color: #3a352c; }
.table-repartition tfoot td, .table-repartition tfoot th { border-bottom: none; font-weight: 600; }
.table-repartition tfoot tr:first-child th, .table-repartition tfoot tr:first-child td {
  border-top: 2px solid var(--couleur-bordure);
}
.table-repartition .champ-prix-achat {
  width: 100px;
  padding: 0.35rem;
  font-size: 0.9rem;
  text-align: right;
  border: 1px solid var(--couleur-bordure);
  border-radius: var(--rayon);
}
.ecart-ok { color: #2f5c33; font-weight: 700; }
.ecart-ko { color: #b3610f; font-weight: 700; }

@media (max-width: 700px) {
  .table-repartition thead { display: none; }
  .table-repartition, .table-repartition tbody, .table-repartition tfoot,
  .table-repartition tr, .table-repartition td, .table-repartition th { display: block; width: 100%; }
  .table-repartition tbody tr {
    border: 1px solid var(--couleur-bordure);
    border-radius: 8px;
    margin-bottom: 0.75rem;
    padding: 0.5rem 0.75rem;
    background: #fff;
  }
  .table-repartition tbody td {
    border-bottom: none;
    padding: 0.3rem 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
  }
  .table-repartition tbody td::before {
    content: attr(data-label);
    font-weight: 600;
    color: #6a6055;
    margin-right: auto;
  }
  .table-repartition tfoot tr {
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.2rem 0.75rem;
  }
  .table-repartition tfoot th { text-align: left; }
}

/* --- Rangement dans la fiche vin et la liste (refonte UX lot 2) ------------ */

/* Bloc « Rangement » d'une carte de variante : affectations réelles (caisses cliquables),
   emplacement hérité en lecture seule, et édition manuelle (select + quantité + Ranger).
   Ces champs n'ont pas de `name` : ils ne partent pas dans le POST de la fiche. */
.bloc-rangement {
  border-top: 1px dashed var(--couleur-bordure);
  margin-top: 0.6rem;
  padding-top: 0.6rem;
}
.bloc-rangement.rangement-en-cours { opacity: 0.6; }
.rangement-entete {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem; margin-bottom: 0.4rem;
}
.rangement-titre { font-weight: 600; color: var(--couleur-bordeaux); }
.rangement-legacy { color: #8a8072; font-style: italic; font-size: 0.9rem; }
.rangement-etat { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-bottom: 0.5rem; }
.rangement-etat .affectation {
  display: inline-flex; align-items: center; gap: 0.25rem;
  background: #f0ece3; border-radius: 999px; padding: 0.2rem 0.5rem 0.2rem 0.7rem;
}
.affectation-quantite { color: #6a6055; font-size: 0.9rem; }
.bouton-retirer-affectation {
  border: none; background: none; cursor: pointer; line-height: 1;
  font-size: 1.1rem; color: var(--couleur-erreur); padding: 0 0.15rem;
}
.rangement-ajout { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; }
.rangement-ajout .select-caisse { flex: 1 1 200px; max-width: 320px; }
.erreur-rangement { color: var(--couleur-erreur); font-weight: 600; font-size: 0.9rem; margin: 0.4rem 0 0; }

.lien-caisse { color: var(--couleur-bordeaux); font-weight: 600; text-decoration: none; }
.lien-caisse:hover { text-decoration: underline; }
.cellule-rangement { white-space: nowrap; }
.cellule-rangement .lien-caisse + .lien-caisse { margin-left: 0.35rem; }