/* Charte « Commandes groupées de vin », d'après les maquettes Stitch (stitch/…/DESIGN.md).
   Tout est local : polices dans static/polices, aucune ressource externe. */

@font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap; src: url("../polices/inter-latin-400-normal.f837d382a885.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 500; font-display: swap; src: url("../polices/inter-latin-500-normal.42b95430773b.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap; src: url("../polices/inter-latin-600-normal.75fb76ec3559.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 700; font-display: swap; src: url("../polices/inter-latin-700-normal.3714175d15f3.woff2") format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("../polices/jetbrains-mono-latin-500-normal.a21e038a03f7.woff2") format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 600; font-display: swap; src: url("../polices/jetbrains-mono-latin-600-normal.075ec35bc15b.woff2") format("woff2"); }

:root {
  --bordeaux: #6d1f2c;
  --bordeaux-survol: #561822;
  --bordeaux-actif: #44121b;
  --bordeaux-clair: #f18691;
  --brun: #4a3b32;
  --creme: #f0e8e4;
  --creme-total: #f4ece8;
  --fond: #faf8f6;
  --surface: #ffffff;
  --zebre: #fcfaf9;
  --survol-ligne: #fbf5f2;
  --filet: #e8dfda;
  --filet-fort: #d5c6bf;
  --filet-ligne: #f0eae6;
  --texte: #222222;
  --texte-doux: #665c54;
  --ok: #1a6b2c;        --ok-fond: #edf7ee;        --ok-bord: #b8dfbe;
  --attention: #a35a00; --attention-fond: #fff4e5; --attention-bord: #f4d4a4;
  --erreur: #aa0000;    --erreur-fond: #fdf0f0;    --erreur-bord: #f3b8b8;
  --police: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  --police-chiffres: "JetBrains Mono", Consolas, "SFMono-Regular", monospace;
  --rayon: 4px;
  --rayon-carte: 8px;
  --marge-page: 1.5rem;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--fond); color: var(--texte);
  font-family: var(--police); font-size: 14px; line-height: 1.45;
  min-height: 100vh; display: flex; flex-direction: column;
}
a { color: var(--bordeaux); text-underline-offset: 2px; }
a:hover { color: var(--bordeaux-survol); }
h1, h2, h3 { letter-spacing: -0.01em; color: var(--texte); }
h1 { font-size: 28px; line-height: 36px; font-weight: 700; margin: 0 0 .5rem; }
h2 { font-size: 18px; line-height: 24px; font-weight: 600; margin: 1.75rem 0 .75rem; }
h3 { font-size: 15px; font-weight: 600; margin: 1.25rem 0 .5rem; }
p { margin: .5rem 0; }
small, .doux { color: var(--texte-doux); }
.num, .chiffre { font-family: var(--police-chiffres); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* --- En-tête -------------------------------------------------------------------- */
.barre {
  background: var(--bordeaux); color: #fff; display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding: .9rem var(--marge-page);
}
.barre .marque { display: flex; align-items: center; gap: .75rem; color: #fff; text-decoration: none; font-size: 20px; font-weight: 600; }
.barre .marque svg { width: 26px; height: 26px; flex: none; }
.barre .utilisateur { text-align: right; line-height: 1.3; }
.barre .utilisateur strong { display: block; font-weight: 600; }
.barre .utilisateur nav { font-size: 13px; }
.barre .utilisateur nav a, .barre .utilisateur nav button {
  color: var(--bordeaux-clair); background: none; border: 0; padding: 0; font: inherit; cursor: pointer; text-decoration: none;
}
.barre .utilisateur nav a:hover, .barre .utilisateur nav button:hover { color: #fff; text-decoration: underline; }
.barre .utilisateur nav form { display: inline; }
.barre .sep { color: var(--bordeaux-clair); margin: 0 .3rem; }

/* --- Onglets ------------------------------------------------------------------------ */
.onglets {
  background: var(--surface); border-bottom: 1px solid var(--filet); display: flex; align-items: stretch;
  gap: .25rem; padding: 0 var(--marge-page); overflow-x: auto;
}
.onglets a {
  display: flex; align-items: center; padding: 1rem .7rem; color: var(--texte); text-decoration: none;
  font-weight: 500; white-space: nowrap; border-bottom: 2px solid transparent;
}
.onglets a:hover { color: var(--bordeaux); }
.onglets a.actif { color: var(--bordeaux); border-bottom-color: var(--bordeaux); font-size: 16px; }
.onglets .separateur { width: 1px; background: var(--filet); margin: .9rem .6rem; }

/* --- Page ------------------------------------------------------------------------------ */
main { width: 100%; max-width: 1320px; margin: 0 auto; padding: 1.25rem var(--marge-page) 2.5rem; flex: 1; }
.fil-ariane { font-size: 13px; color: var(--texte-doux); margin-bottom: .5rem; }
.fil-ariane a { color: var(--texte-doux); text-decoration: none; }
.fil-ariane a:hover { color: var(--bordeaux); text-decoration: underline; }
.entete-page { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: .75rem 1.5rem; margin-bottom: 1rem; }
.entete-page h1 { margin: 0; }
.entete-page .sous-titre { color: var(--texte-doux); margin: .25rem 0 0; }
.surtitre { font-family: var(--police-chiffres); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--brun); }
.actions, .boutons { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.actions a { margin-right: 0; }

footer.pied {
  border-top: 1px solid var(--filet); background: #f3efed; color: var(--texte-doux); font-size: 13px;
  padding: 1rem var(--marge-page); display: flex; justify-content: space-between; flex-wrap: wrap; gap: .5rem;
}

/* --- Cartes et chiffres clés --------------------------------------------------------- */
.carte { background: var(--surface); border: 1px solid var(--filet); border-radius: var(--rayon-carte); padding: 1rem 1.25rem; margin: 0 0 1rem; }
.carte > h2:first-child, .carte > h3:first-child { margin-top: 0; }
.chiffres-cles { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1rem; margin: 0 0 1.25rem; }
.chiffre-cle { background: var(--surface); border: 1px solid var(--filet); border-radius: var(--rayon-carte); padding: .9rem 1rem; }
.chiffre-cle .libelle { font-size: 12px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--brun); }
.chiffre-cle .valeur { font-family: var(--police-chiffres); font-size: 24px; font-weight: 600; margin-top: .35rem; color: var(--texte); }
.chiffre-cle .valeur.bordeaux { color: var(--bordeaux); }
.chiffre-cle .detail { font-size: 12px; color: var(--texte-doux); margin-top: .2rem; }
.chiffre-cle.attention { background: var(--attention-fond); border-color: var(--attention-bord); }
.chiffre-cle.attention .libelle, .chiffre-cle.attention .valeur { color: var(--attention); }

/* --- Tableaux -------------------------------------------------------------------------- */
.tableau-defilant { overflow-x: auto; margin: 0 0 1rem; border: 1px solid var(--filet); border-radius: var(--rayon-carte); background: var(--surface); }
.tableau-defilant > table { border: 0; margin: 0; }
table { border-collapse: separate; border-spacing: 0; width: 100%; background: var(--surface); border: 1px solid var(--filet); border-radius: var(--rayon-carte); margin: 0 0 1rem; }
th, td { padding: .55rem .75rem; text-align: left; vertical-align: middle; border-bottom: 1px solid var(--filet-ligne); }
thead th {
  background: var(--creme); color: var(--brun); font-size: 12px; font-weight: 600; border-bottom: 1px solid var(--filet-fort);
  white-space: nowrap;
}
thead tr:first-child th:first-child { border-top-left-radius: var(--rayon-carte); }
thead tr:first-child th:last-child { border-top-right-radius: var(--rayon-carte); }
tbody tr:nth-child(even) td { background: var(--zebre); }
tbody tr:hover td { background: var(--survol-ligne); }
tbody th { font-weight: 600; }
tfoot th, tfoot td { background: var(--creme-total); font-weight: 700; border-bottom: 0; }
tfoot tr:last-child th:first-child { border-bottom-left-radius: var(--rayon-carte); }
tfoot tr:last-child th:last-child, tfoot tr:last-child td:last-child { border-bottom-right-radius: var(--rayon-carte); }
th.num, td.num { text-align: right; }
td.centre, th.centre { text-align: center; }
tr.famille th, tr.famille td { background: var(--creme) !important; color: var(--brun); font-weight: 600; }
tr.inactif td { color: #9a8f88; }
table.bordereau td, table.bordereau th { text-align: center; }
table.bordereau td:first-child, table.bordereau th:first-child { text-align: left; }
td.ordre { white-space: nowrap; width: 1%; }
td.ordre form { display: inline; }
td.ordre button { padding: 0 .45rem; min-height: 26px; }

/* --- Badges et messages ------------------------------------------------------------------- */
.badge {
  display: inline-flex; align-items: center; gap: .3rem; height: 22px; padding: 0 8px; border-radius: 3px; border: 1px solid;
  font-size: 11px; font-weight: 600; white-space: nowrap; vertical-align: middle;
}
.badge.ok { background: var(--ok-fond); color: var(--ok); border-color: var(--ok-bord); }
.badge.attention { background: var(--attention-fond); color: var(--attention); border-color: var(--attention-bord); }
.badge.erreur { background: var(--erreur-fond); color: var(--erreur); border-color: var(--erreur-bord); }
.badge.neutre { background: var(--creme); color: var(--brun); border-color: var(--filet-fort); }
.etat-validee { color: var(--ok); font-weight: 600; }
.etat-modifiee, .avertissement { color: var(--attention); }
.etat-modifiee { font-weight: 600; }
.erreur { color: var(--erreur); }
.erreurlist { list-style: none; padding: 0; margin: .25rem 0; color: var(--erreur); font-size: 13px; }

.messages { margin: 0 0 1rem; display: grid; gap: .5rem; }
.alerte { border: 1px solid; border-radius: var(--rayon-carte); padding: .6rem .9rem; font-weight: 500; }
.alerte.succes { background: var(--ok-fond); color: var(--ok); border-color: var(--ok-bord); }
.alerte.attention { background: var(--attention-fond); color: var(--attention); border-color: var(--attention-bord); }
.alerte.erreur { background: var(--erreur-fond); color: var(--erreur); border-color: var(--erreur-bord); }
.encadre { background: #f9ece6; border: 1px solid #efd5ca; border-radius: var(--rayon-carte); padding: .75rem 1rem; margin: 0 0 1rem; }

/* --- Boutons ------------------------------------------------------------------------------ */
button, .bouton {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem; min-height: 34px; padding: 6px 14px;
  font: inherit; font-weight: 500; border-radius: var(--rayon); cursor: pointer; text-decoration: none; white-space: nowrap;
  background: var(--surface); color: var(--brun); border: 1px solid var(--filet);
}
button:hover, .bouton:hover { background: var(--fond); color: var(--brun); }
button:disabled { opacity: .5; cursor: not-allowed; }
.primaire, button.primaire, .bouton.primaire { background: var(--bordeaux); color: #fff; border-color: var(--bordeaux); }
.primaire:hover, .bouton.primaire:hover { background: var(--bordeaux-survol); color: #fff; border-color: var(--bordeaux-survol); }
.primaire:active { background: var(--bordeaux-actif); }
.secondaire, .bouton.secondaire { background: var(--surface); color: var(--bordeaux); border-color: var(--bordeaux); }
.secondaire:hover, .bouton.secondaire:hover { color: var(--bordeaux-survol); background: var(--survol-ligne); }
.danger { color: var(--erreur); border-color: var(--erreur-bord); }
.danger:hover { background: var(--erreur-fond); color: var(--erreur); }
:focus-visible { outline: 2px solid var(--bordeaux); outline-offset: 2px; }

/* --- Formulaires --------------------------------------------------------------------------- */
input[type=text], input[type=email], input[type=number], input[type=password], input[type=search], select, textarea {
  font: inherit; color: var(--texte); background: var(--surface); border: 1px solid var(--filet); border-radius: var(--rayon);
  min-height: 34px; padding: .3rem .55rem; max-width: 100%;
}
textarea { min-height: 6rem; width: 100%; }
#id_sujet { width: 100%; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--bordeaux); box-shadow: 0 0 0 1px var(--bordeaux); }
input[aria-invalid=true] { border-color: var(--erreur); }
label { font-weight: 500; }
form p { margin: .7rem 0; }
form p label { display: inline-block; margin-bottom: .2rem; }
.helptext, form small { color: var(--texte-doux); font-size: 12px; }
.en-ligne span { display: inline-block; margin: 0 .8rem .4rem 0; }
form.intitule { display: inline-flex; gap: .35rem; float: right; font-weight: 400; }
form.intitule input { width: 14rem; min-height: 28px; }
form.intitule button { min-height: 28px; padding: 2px 10px; }

/* Les formulaires de saisie posés directement dans la page deviennent des cartes */
main > form[method=post]:not(#saisie):not(#envoi):has(textarea, select, input[type=text], input[type=email], input[type=password], input[type=number], input[type=checkbox]) {
  background: var(--surface); border: 1px solid var(--filet); border-radius: var(--rayon-carte); padding: .5rem 1.25rem; margin: 0 0 1rem;
}
/* Connexion : formulaire étroit et centré */
main:has(#id_username) { max-width: 440px; }
main:has(#id_username) input[type=email], main:has(#id_username) input[type=password] { width: 100%; }

/* Quantités : − [ n ] + */
.quantite { display: inline-flex; align-items: center; }
.quantite input { width: 4.2rem; text-align: center; border-radius: 0; font-family: var(--police-chiffres); -moz-appearance: textfield; }
.quantite input::-webkit-outer-spin-button, .quantite input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.quantite button { min-height: 34px; width: 34px; padding: 0; font-size: 16px; font-weight: 600; }
.quantite button.moins { border-radius: var(--rayon) 0 0 var(--rayon); border-right: 0; }
.quantite button.plus { border-radius: 0 var(--rayon) var(--rayon) 0; border-left: 0; background: var(--bordeaux); color: #fff; border-color: var(--bordeaux); }
.cartons { display: block; font-size: 12px; color: var(--texte-doux); margin-top: .2rem; }
.cartons.incomplet { color: var(--attention); }

/* Récapitulatif de saisie */
.recap { background: #f3efed; border: 1px solid var(--filet); border-radius: var(--rayon-carte); padding: 1rem 1.25rem; }
.recap .ligne { display: flex; justify-content: space-between; gap: 1rem; padding: .3rem 0; }
.recap .total { background: var(--surface); border-radius: var(--rayon); padding: .75rem 1rem; margin-top: .6rem; display: flex; justify-content: space-between; align-items: baseline; }
.recap .total .montant { font-family: var(--police-chiffres); font-size: 28px; font-weight: 600; color: var(--bordeaux); }

/* --- Mises en page reprises de la seconde série de maquettes ------------------------------- */
/* Sélecteur Vins / Familles / Caves du catalogue */
.selecteur { display: inline-flex; background: var(--creme); border: 1px solid var(--filet); border-radius: var(--rayon-carte); padding: 3px; gap: 2px; }
.selecteur a { padding: .4rem .9rem; border-radius: var(--rayon); color: var(--brun); text-decoration: none; font-weight: 500; white-space: nowrap; }
.selecteur a:hover { background: var(--surface); color: var(--bordeaux); }
.selecteur a.actif { background: var(--surface); color: var(--bordeaux); box-shadow: 0 1px 2px rgba(74, 59, 50, .12); }
.selecteur .compte { font-family: var(--police-chiffres); font-size: 12px; color: var(--texte-doux); margin-left: .25rem; }

/* Grilles de formulaire : chaque paragraphe (champ) occupe une cellule */
.grille-2, .grille-3, .grille-4 { display: grid; gap: 0 1.25rem; align-items: start; }
.grille-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grille-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grille-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grille-2 > p, .grille-3 > p, .grille-4 > p { margin: .5rem 0; }
.grille-2 input, .grille-2 select, .grille-3 input, .grille-3 select, .grille-4 input, .grille-4 select { width: 100%; }
.grille-2 input[type=checkbox], .grille-3 input[type=checkbox], .grille-4 input[type=checkbox] { width: auto; }
/* Case à cocher suivie de son libellé, alignés à gauche ; l'aide éventuelle passe sous le libellé. */
.case { display: flex; align-items: flex-start; gap: .55rem; }
.case input[type=checkbox] { margin: .2rem 0 0; flex: none; }
.case label small { display: block; color: var(--texte-doux); font-weight: 400; margin-top: .15rem; }
.pleine-largeur { grid-column: 1 / -1; }
.champ label { display: block; margin-bottom: .25rem; }
.champ small { display: block; margin-top: .2rem; }

/* Cartes à sections à bandeau (vin de l'offre) */
.sections { background: var(--surface); border: 1px solid var(--filet); border-radius: var(--rayon-carte); overflow: hidden; margin: 0 0 1rem; }
.sections > .bandeau { background: var(--creme); padding: .7rem 1.25rem; font-weight: 600; font-size: 16px; color: var(--texte); }
.sections > .bandeau small { font-weight: 400; margin-left: .4rem; }
.sections > .corps { padding: .5rem 1.25rem 1rem; }
.sections > .pied-sections { background: #f3efed; padding: .8rem 1.25rem; display: flex; justify-content: flex-end; flex-wrap: wrap; gap: .5rem; }
.calcul-revient { background: var(--attention-fond); border: 1px solid var(--attention-bord); border-radius: var(--rayon); padding: .7rem 1rem; margin-top: .6rem; }
.calcul-revient #revient { font-family: var(--police-chiffres); color: var(--bordeaux); }

/* Deux colonnes : contenu principal et panneau latéral */
.deux-colonnes { display: grid; grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr); gap: 1.25rem; align-items: start; }
.deux-colonnes.egales { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
.deux-colonnes > * { min-width: 0; }
.synthese .ligne { display: flex; justify-content: space-between; gap: 1rem; padding: .45rem 0; border-bottom: 1px solid var(--filet-ligne); }
.synthese .ligne:last-child { border-bottom: 0; }
.zone-danger { background: var(--erreur-fond); border: 1px solid var(--erreur-bord); border-radius: var(--rayon-carte); padding: .9rem 1.1rem; display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; }
.zone-danger strong { color: var(--erreur); }

/* Colonne étroite et centrée (mot de passe, nouvelle offre) */
.colonne-etroite { max-width: 680px; margin: 0 auto; }
.colonne-etroite input[type=password], .colonne-etroite input[type=text], .colonne-etroite input[type=email] { width: 100%; }
.encadre-alerte.erreur strong { color: var(--texte); }
.helptext ul, .champ small ul { margin: .2rem 0 0; padding-left: 1.1rem; }
.colonne-moyenne { max-width: 1040px; margin: 0 auto; }
.encadre-alerte { background: #f9e6e0; border: 1px solid #efd0c5; border-radius: var(--rayon-carte); padding: .9rem 1.1rem; margin: 0 0 1rem; }
.encadre-alerte strong { display: block; font-size: 16px; margin-bottom: .2rem; }

/* Bordereau : colonne et ligne de total sur fond crème */
table.bordereau td:last-child, table.bordereau th:last-child { background: var(--creme-total); font-weight: 700; }
table.bordereau tfoot th:last-child { color: var(--bordeaux); }

/* --- Navigation basse (mobile) ------------------------------------------------------------ */
.nav-basse { display: none; }

@media (max-width: 1023px) {
  :root { --marge-page: 1.25rem; }
}

@media (max-width: 767px) {
  :root { --marge-page: .75rem; }
  body { font-size: 15px; padding-bottom: 64px; }
  h1 { font-size: 22px; line-height: 28px; }
  .barre { padding: .7rem var(--marge-page); }
  .barre .marque { font-size: 16px; }
  .barre .utilisateur nav .masque-mobile, .barre .utilisateur .sep { display: none; }
  .onglets { display: none; }
  footer.pied { display: none; }
  .nav-basse {
    display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; position: fixed; left: 0; right: 0; bottom: 0; z-index: 10;
    background: var(--surface); border-top: 1px solid var(--filet); height: 60px;
  }
  .nav-basse a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; font-size: 11px; color: var(--texte-doux); text-decoration: none; }
  .nav-basse a svg { width: 22px; height: 22px; }
  .nav-basse a.actif { color: var(--bordeaux); font-weight: 600; }
  /* Les autres tableaux défilent horizontalement plutôt que de déborder de l'écran */
  table:not(.fiches) { display: block; overflow-x: auto; white-space: nowrap; }
  form.intitule { float: none; display: flex; margin-top: .4rem; }
  form.intitule input { width: auto; flex: 1; }

  /* Tableaux en fiches empilées : chaque cellule porte son intitulé (data-label) */
  table.fiches, table.fiches tbody, table.fiches tr, table.fiches td, table.fiches tfoot, table.fiches th { display: block; width: 100%; }
  table.fiches { border: 0; background: none; }
  table.fiches thead { display: none; }
  table.fiches tbody tr { background: var(--surface); border: 1px solid var(--filet); border-radius: var(--rayon-carte); margin-bottom: .6rem; padding: .4rem 0; }
  table.fiches tbody tr td { background: none !important; border: 0; padding: .3rem .9rem; display: flex; justify-content: space-between; align-items: center; gap: 1rem; text-align: right; }
  table.fiches tbody tr td:empty { display: none; }
  table.fiches td[data-label]::before { content: attr(data-label); color: var(--texte-doux); font-family: var(--police); font-size: 12px; text-align: left; }
  table.fiches td.titre-fiche { font-weight: 600; font-size: 15px; justify-content: flex-start; text-align: left; }
  table.fiches tr.famille { background: none !important; border: 0; padding: 0; margin: 1rem 0 .4rem; }
  table.fiches tr.famille th { background: none !important; padding: 0; border: 0; font-size: 13px; text-transform: uppercase; letter-spacing: .05em; }
  table.fiches tfoot tr { background: var(--creme-total); border-radius: var(--rayon-carte); padding: .4rem 0; }
  table.fiches tfoot th, table.fiches tfoot td { display: flex; justify-content: space-between; background: none; padding: .3rem .9rem; }
  table.fiches tfoot th:empty, table.fiches tfoot td:empty { display: none; }
  .recap .total .montant { font-size: 24px; }
  .grille-2, .grille-3, .grille-4, .deux-colonnes, .deux-colonnes.egales { grid-template-columns: minmax(0, 1fr); }
  .selecteur { display: flex; width: 100%; }
  .selecteur a { flex: 1; text-align: center; padding: .4rem .3rem; }
  .chiffres-cles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
  .chiffre-cle { padding: .6rem .75rem; }
  .chiffre-cle .valeur { font-size: 18px; }
  .chiffre-cle .detail { display: none; }
  .recap .boutons button, .entete-page .boutons .bouton { flex: 1 1 100%; white-space: normal; text-align: center; }
}