/* Design system - fidèle à la maquette « Basilic Commande Luxe » */
@import url('polices.css');   /* polices servies localement : aucun appel a Google */

:root {
  --vert: #04383B;
  --vert-fonce: #032a2c;
  --or: #BFA74D;
  --or-clair: #E8E2D3;
  --creme: #FAF8F3;
  --encre: #1E2B29;
  --gris: #6B7574;
  --gris-clair: #96A09D;
  --blanc: #FFFFFF;
  --rouge: #b00020;
  --vert-ok: #4F8A4F;
  --serif: 'Cormorant Garamond', 'Cormorant repli', Georgia, serif;
  --sans: 'Jost', 'Jost repli', system-ui, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
button { font-family: inherit; }  /* les boutons n'héritent pas de la police par défaut → forcer Jost */
body { font-family: var(--sans); background: var(--creme); color: var(--encre); font-size: 15px; line-height: 1.55; }
/* Le pied de page tient le bas de la fenêtre. Sans cette colonne, un écran dont
   le contenu ne remplit pas la hauteur (tableau de bord, listes courtes, pages
   d'erreur) laissait le pied remonter au milieu, avec du vide sous lui. Le
   contenu prend la hauteur restante et repousse le pied ; sur un écran long, la
   mise en page ne bouge pas. Rien n'est fixé : un pied qui suivrait le
   défilement mangerait l'écran au téléphone. 100dvh est répété pour les
   navigateurs mobiles, dont les barres font mentir 100vh d'une trentaine de
   pixels et ajoutaient une bande de défilement pour rien. */
body { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; }
/* La largeur explicite n'est pas décorative : dans une colonne, les marges
   automatiques de .page (son centrage) empêchent l'étirement, et la boîte se
   réduirait à la largeur de son contenu. Le catalogue passait ainsi à 1344 px
   dans une fenêtre de 390, avec défilement latéral sur tout le logiciel. */
main.page { flex: 1 0 auto; width: 100%; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; }

/* ---------- Header ---------- */
.topbar { background: var(--vert); color: var(--blanc); position: sticky; top: 0; z-index: 60; border-bottom: 1px solid rgba(191,167,77,.55); }
.topbar-inner { max-width: 1344px; margin: 0 auto; width: 100%; display: flex; align-items: center; gap: 24px; padding: 17px 32px; }
.brand { display: flex; flex-direction: column; align-items: flex-start; line-height: 1; }
.brand-logo { height: 34px; width: auto; display: block; }
.brand-sous { font-size: 9px; font-weight: 500; letter-spacing: 0.28em; color: var(--or); text-transform: uppercase; margin-top: 6px; }
.tenant-badge { display: flex; align-items: center; gap: 11px; border-left: 1px solid rgba(191,167,77,.45); padding-left: 24px; }
.tenant-badge img { height: 34px; width: 34px; object-fit: contain; background: var(--blanc); border-radius: 6px; padding: 2px; }
.tenant-badge span { font-size: 13px; letter-spacing: 0.04em; }
/* Bascule d'entreprise (vitrine) : le badge devient un menu au survol */
.tenant-badge.a-choix { position: relative; cursor: pointer; }
.tenant-badge.a-choix .tenant-chevron { font-size: 10px; color: var(--or); margin-left: -3px; }
.tenant-menu { position: absolute; top: 100%; left: 12px; padding-top: 10px; display: none; z-index: 80; }
.tenant-badge.a-choix:hover .tenant-menu,
.tenant-badge.a-choix:focus-within .tenant-menu { display: block; }
.tenant-menu > * { display: block; background: var(--blanc); min-width: 215px; }
.tenant-menu-titre { color: var(--gris); font-size: 10px; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; padding: 12px 18px 8px; border: 1px solid rgba(4,56,59,.10); border-bottom: none;
  border-radius: 10px 10px 0 0; box-shadow: 0 14px 34px rgba(4,56,59,.14); }
.tenant-menu a { color: var(--vert); font-size: 13.5px; letter-spacing: .03em; padding: 10px 18px 12px;
  border: 1px solid rgba(4,56,59,.10); border-top: none; box-shadow: 0 14px 34px rgba(4,56,59,.14); }
.tenant-menu a:last-child { border-radius: 0 0 10px 10px; }
.tenant-menu a:hover { color: var(--or); background: var(--creme); }
.topbar-droite { margin-left: auto; display: flex; align-items: center; gap: 26px; }
.topbar-user { text-align: right; line-height: 1.25; }
.topbar-user .nom { font-size: 13px; font-weight: 500; }
.topbar-user .sous { font-size: 11px; color: var(--gris-clair); }
.nav-lien { font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--blanc); opacity: .92; border-bottom: 1px solid transparent; padding-bottom: 2px; transition: color .3s, border-color .3s; }
.nav-lien:hover { color: #fff; opacity: 1; border-bottom-color: var(--or); }
.btn-panier { border: 1px solid rgba(191,167,77,.75); color: #FAF8F3; padding: 11px 22px; font-size: 12.5px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; background: transparent; cursor: pointer; border-radius: 2px; }
.btn-panier:hover { background: var(--or); color: var(--vert); }

/* ---------- Typo & structure de page ---------- */
.page { max-width: 1344px; margin: 0 auto; padding: 48px 32px 80px; }
/* Largeurs par écran, fidèles à la maquette (le padding 32 est inclus, comme la maquette) */
.page.page-920 { max-width: 920px; }
.page.page-840 { max-width: 840px; }
.page.page-660 { max-width: 660px; }
.salutation { font-family: var(--serif); font-style: italic; color: #A08838; font-size: 21px; margin-bottom: 10px; }
.hero-saison { display: flex; align-items: center; gap: 14px; margin-top: 18px; }
.hero-saison .filet-court { width: 64px; height: 1px; background: var(--or); flex: none; }
.hero-saison .txt { font-size: 11px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: #7C8683; }
h1.titre-page { font-family: var(--serif); font-weight: 600; color: var(--vert); font-size: 56px; line-height: 0.95; letter-spacing: 0.02em; margin: 6px 0 10px; }
.sous-titre { font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gris); border-top: 1px solid var(--or); display: inline-block; padding-top: 10px; }
.encart-tarifs { border: 1px solid var(--or-clair); background: var(--blanc); color: var(--vert); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; padding: 12px 18px; }
.entete-page { display: flex; align-items: end; justify-content: space-between; gap: 24px; flex-wrap: wrap; }

/* ---------- Onglets catégories ---------- */
.onglets { display: flex; gap: 34px; border-bottom: 1px solid #E3DFD2; margin: 34px 0 8px; flex-wrap: wrap; }
.onglet { font-size: 13px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gris); padding: 12px 2px; border-bottom: 2px solid transparent; }
.onglet .num { color: var(--or); margin-right: 6px; font-size: 12px; }
.onglet.actif, .onglet:hover { color: var(--vert); border-bottom-color: var(--or); }

/* ---------- Sections & cartes ---------- */
.section-cat { margin-top: 54px; }
.section-entete { display: flex; align-items: flex-end; gap: 18px; }
.section-num { font-family: var(--serif); font-size: 104px; line-height: 0.72; font-weight: 600; color: rgba(4,56,59,.08); flex: none; user-select: none; }
.section-entete > div { padding-bottom: 4px; }
.section-titre { font-family: var(--serif); font-size: 36px; font-weight: 600; line-height: 1; color: var(--vert); }
.section-sous { font-family: var(--serif); font-style: italic; color: #A08838; font-size: 17px; margin-top: 6px; }
.section-count { margin-left: auto; padding-bottom: 8px; font-size: 10.5px; font-weight: 500; letter-spacing: 0.2em; color: var(--gris-clair); text-transform: uppercase; }
.section-filet { height: 1px; background: linear-gradient(90deg, #BFA74D 0%, rgba(191,167,77,.12) 70%, transparent 100%); margin: 16px 0 4px; transform-origin: left; }
.grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 30px; margin-top: 20px; }
.carte { background: var(--blanc); border: 1px solid #E8E2D3; border-radius: 6px; overflow: hidden; display: flex; flex-direction: column; transition: box-shadow .45s cubic-bezier(.22,.61,.36,1), transform .45s cubic-bezier(.22,.61,.36,1), border-color .45s; }
.carte:hover { transform: translateY(-4px); box-shadow: 0 20px 48px rgba(4,56,59,.14); border-color: #D9CFAF; }
.carte-photo { aspect-ratio: 4/3; background: repeating-linear-gradient(45deg, #EFE9D8, #EFE9D8 12px, #E7E0CC 12px, #E7E0CC 24px); display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; }
.carte-photo img { width: 100%; height: 100%; object-fit: cover; }
.carte-photo .photo-label { font-family: ui-monospace, monospace; font-size: 11px; color: var(--gris); background: rgba(255,255,255,.85); padding: 4px 10px; }
.carte-photo .ruban { position: absolute; top: 14px; left: 14px; background: var(--or); color: #fff; font-size: 10px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; padding: 6px 13px; border-radius: 2px; }
.carte-corps { padding: 20px 22px 22px; display: flex; flex-direction: column; gap: 9px; flex: 1; }
.carte-titre { font-family: var(--serif); font-size: 23px; font-weight: 600; line-height: 1.12; color: var(--vert); }
.carte-desc { font-size: 13.5px; line-height: 1.5; color: var(--gris); flex: 1; }
.carte-prix { display: flex; align-items: baseline; gap: 8px; border-top: 1px solid #EFE9DA; padding-top: 12px; margin-top: 3px; }
.prix-ht { font-size: 20px; font-weight: 600; color: var(--vert); }
.prix-unite { font-size: 13px; color: var(--gris); }
.prix-ttc { margin-left: auto; font-size: 12.5px; color: var(--gris-clair); }
.badges { display: flex; flex-wrap: wrap; gap: 7px; }
.badge { font-size: 10px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; padding: 4px 10px; border: 1px solid #E3DFD2; color: var(--gris); background: var(--blanc); border-radius: 2px; }
.badge.or { background: #F5EFDC; border-color: var(--or-clair); color: #8a7526; }
.carte-corps .badges { margin-top: 3px; }
.carte .badge { color: #3E5A52; border-color: #D8E0DB; }
.carte .badge.or { color: #7A6A25; border-color: #E4D9AE; background: #FBF7E9; }
.badge.vert { background: #EAF2EA; border-color: #D4E4D4; color: var(--vert-ok); }
.carte.indispo .carte-photo img { opacity: .45; }
.carte.indispo .carte-corps { opacity: .5; }
.carte .bandeau-indispo { position: absolute; left: 0; right: 0; bottom: 0; background: rgba(5,23,36,.85);
  color: #FAF8F3; font-size: 11px; font-weight: 500; letter-spacing: .1em; text-align: center; padding: 9px 10px; text-transform: uppercase; }
.carte-saison { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: #A08838; font-weight: 500; }

/* ---------- Boutons & formulaires ---------- */
.btn { display: inline-block; border: none; cursor: pointer; font-family: var(--sans); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; padding: 13px 28px; border-radius: 3px; transition: opacity .12s; }
.btn:hover { opacity: .88; }
.btn-primaire { background: var(--vert); color: var(--blanc); transition: opacity .12s, background .18s ease, color .18s ease, transform .15s ease, box-shadow .15s ease; }
.btn-or { background: var(--or); color: var(--vert); }
.btn-contour { background: transparent; border: 1px solid var(--vert); color: var(--vert); }
.btn-danger { background: var(--rouge); color: var(--blanc); }
.btn-petit { padding: 8px 16px; font-size: 11px; }
label { display: block; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gris); margin-bottom: 6px; }
input[type="text"], input[type="email"], input[type="password"], input[type="date"], input[type="time"],
input[type="number"], input[type="datetime-local"], select, textarea {
  width: 100%; padding: 11px 14px; border: 1px solid #DDD8C9; background: var(--blanc); font-family: var(--sans);
  font-size: 14px; color: var(--encre);
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--or); outline-offset: -1px; }
.champ { margin-bottom: 18px; }
.champ .aide { font-size: 12px; color: var(--gris-clair); margin-top: 4px; }
.obligatoire::after { content: " *"; color: var(--or); }
.formulaire-carte { background: var(--blanc); border: 1px solid #ECE8DC; padding: 28px; }
.grille-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 22px; }
@media (max-width: 760px) { .grille-2 { grid-template-columns: 1fr; } }

/* ---------- Tableaux ---------- */
table.liste { width: 100%; border-collapse: collapse; background: var(--blanc); border: 1px solid #ECE8DC; }
table.liste th { background: var(--vert); color: var(--blanc); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; text-align: left; padding: 12px 14px; font-weight: 500; }
table.liste td { padding: 12px 14px; border-top: 1px solid #F0ECE0; font-size: 14px; transition: background .25s; }
table.liste tr:hover td { background: #FCFAF5; }
/* Tableau à colonnes nombreuses : il prend la largeur de son contenu et défile
   dans son fourreau. À 100 % de largeur, onze colonnes écrasaient chaque case au
   point qu'un libellé de deux mots n'y tenait plus. */
table.liste.liste-large { width: max-content; min-width: 100%; }

/* ---------- Statuts ---------- */
.statut { font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; padding: 4px 10px; display: inline-block; }
.statut-transmise { background: #F5EFDC; color: #8a7526; }
.statut-confirmee { background: #EAF2EA; color: var(--vert-ok); }
.statut-refusee, .statut-annulee { background: #F7E3E3; color: var(--rouge); }
.statut-livree { background: #E4EEF2; color: #2C5F73; }
.statut-en_attente { background: #F3ECDA; color: #8A6D1F; }
.statut-hors_stock { background: #EDE7E2; color: #6B5B4E; }
.statut-litige { background: #F6E5D8; color: #9A4A22; }
.statut-receptionnee { background: var(--vert); color: var(--blanc); }
.statut-facturee { background: var(--or); color: var(--blanc); }

/* Mes commandes : dernière commande, favoris, recharger */
.derniere-cmd { display: flex; align-items: center; justify-content: space-between; gap: 24px;
  background: #F3EFE3; border: 1px solid rgba(191,167,77,.5); padding: 18px 24px; margin-bottom: 28px; }
.dc-tag { font-size: 10px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: #7A6A25; }
.dc-num { font-family: var(--serif); font-size: 21px; color: var(--vert); margin-top: 5px; }
.dc-muette { color: var(--gris); font-size: 15px; font-family: var(--sans); }
.dc-articles { font-size: 13px; color: var(--gris); margin-top: 3px; }
/* « Commander à nouveau » porte l'habillage commun (.btn et sa variante) : dans
   l'encadré c'est l'action principale, sur une ligne de liste c'est une action
   secondaire, comme « Modifier » ailleurs. Il ne reste ici que le repli, que
   .btn ne fixe pas. */
.action-recharger { white-space: nowrap; }
.col-fav { width: 30px; text-align: center; padding-right: 0 !important; }
.fav { border: none; background: none; cursor: pointer; font-size: 17px; color: #D8D2C0; line-height: 1;
  transition: color .18s ease, transform .18s ease; }
.fav:hover { transform: scale(1.15); }
.fav.on { color: var(--or); }
/* Champs personnalisés d'un produit, saisis dans la ligne du panier */
.champ-perso-ligne { margin: 9px 0 0; max-width: 380px; }
.champ-perso-ligne label { font-size: 11.5px; letter-spacing: .05em; }
.champ-perso-ligne input { padding: 7px 10px; font-size: 13px; }
/* Planning hebdomadaire manager (feuille de production, CdC §7.1) */
.planning-barre { display: flex; align-items: center; justify-content: space-between; gap: 20px;
  flex-wrap: wrap; margin: 6px 0 22px; }
.planning-vues { display: flex; gap: 22px; }
.planning-nav { display: flex; align-items: center; gap: 18px; }
.pn-btn { font-size: 12px; font-weight: 600; letter-spacing: .05em; color: var(--vert); }
.pn-btn:hover { color: var(--or); }
.pn-lbl { font-family: var(--serif); font-size: 16px; color: var(--vert); }
.planning-grille { display: grid; grid-template-columns: repeat(7, 1fr); gap: 10px; }
.planning-jour { background: #fff; border: 1px solid #EFEAD9; display: flex; flex-direction: column; }
.planning-jour.aujourdhui { border-color: rgba(191,167,77,.7); box-shadow: inset 0 0 0 1px rgba(191,167,77,.4); }
.pj-tete { padding: 9px 10px; border-bottom: 1px solid #EFEAD9; text-align: center; }
.pj-nom { display: block; font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--vert); }
.pj-date { display: block; font-size: 11px; color: var(--gris); margin-top: 2px; }
.pj-corps { padding: 8px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.pj-cmd { display: block; background: #FAF8F3; border: 1px solid #EFEAD9; border-left: 3px solid var(--or);
  padding: 8px 9px; transition: box-shadow .18s ease; }
.pj-cmd:hover { box-shadow: 0 3px 10px rgba(30,43,41,.08); }
.pj-heure { font-weight: 600; font-size: 13px; color: var(--vert); }
.pj-client { font-size: 12.5px; color: var(--encre); margin-top: 1px; line-height: 1.2; }
.pj-meta { font-size: 11px; color: var(--gris); margin: 2px 0 6px; }
.pj-cmd .statut { font-size: 10px; }
.pj-vide { font-size: 11px; color: #C7C0AE; font-style: italic; text-align: center; padding: 16px 0; }
@media (max-width: 960px) { .planning-grille { grid-template-columns: repeat(2, 1fr); } }

/* Suggestions de produits complémentaires (panier) */
.suggestions { display: flex; gap: 16px; margin-top: 6px; }
.suggestion { flex: 1; min-width: 0; border: 1px solid #EFEAD9; padding: 10px;
  transition: border-color .2s ease, box-shadow .2s ease; }
.suggestion:hover { border-color: rgba(191,167,77,.6); box-shadow: 0 4px 14px rgba(30,43,41,.06); }
.suggestion img, .sug-vignette { width: 100%; height: 84px; object-fit: cover; background: #F0ECE0; display: block; }
.sug-nom { font-family: var(--serif); font-size: 14px; font-weight: 600; color: var(--vert); margin-top: 8px; line-height: 1.25; }
.sug-prix { font-size: 12px; color: var(--gris); margin-top: 3px; }

/* Impression du bon de commande (récap / confirmation) : on ne garde que le contenu */
@media print {
  .demo-bar, .topbar, .pied, .recap-boutons, .confirm-boutons, .retour-lien,
  .toast, .fav, .action-recharger, .recap-sous,
  .confirm-svg, .confirm-kicker, .confirm-passion { display: none !important; }
  /* Pas de colonne pleine hauteur sur papier : le pied y est masqué, et une
     boîte flex coupe mal quand le bon déborde sur une seconde feuille. La
     hauteur minimale part aussi : sur papier 100vh vaut la feuille entière,
     marges comprises, donc un bon d'une page en sortait deux, la seconde vide. */
  body { background: #fff !important; display: block; min-height: 0; }
  main.page { max-width: 100% !important; padding: 0 !important; flex: none; }
  .carte-bloc { border: 1px solid #DDD !important; box-shadow: none !important; page-break-inside: avoid; }
  .confirm-bloc { text-align: left !important; }
  .confirm-titre { font-size: 26px !important; }
  .bon-commande { margin-top: 18px !important; }
}

/* Bon de commande (confirmation) : entête document */
.bon-commande { margin-top: 40px; }
.bon-entete { display: flex; justify-content: space-between; align-items: flex-end;
  border-bottom: 2px solid var(--or); padding-bottom: 12px; margin-bottom: 24px; }
.bon-marque { font-weight: 700; letter-spacing: .2em; color: var(--vert); font-size: 18px; }
.bon-sous { font-size: 13px; color: var(--gris); margin-top: 3px; }
.bon-client { font-family: var(--serif); font-size: 17px; color: var(--vert); }

/* ---------- Arbre d'états (page de suivi) ---------- */
/* Barre de statut HORIZONTALE (Transmise / Confirmée / Livrée) */
.arbre { display: flex; margin: 30px 0 6px; }
.etape { flex: 1; display: flex; flex-direction: column; align-items: center; text-align: center; position: relative; }
.etape .etape-jalon { position: relative; z-index: 1; height: 18px; display: flex; align-items: center; }
.etape .rond { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--gris-clair); background: var(--blanc); box-sizing: border-box; }
.etape.faite .rond { background: var(--or); border-color: var(--or); }
/* trait reliant le centre d'un rond à celui du suivant */
.etape:not(:last-child)::after { content: ""; position: absolute; top: 8px; left: 50%; width: 100%; height: 2px; background: #E3DFD2; z-index: 0; }
.etape.faite:not(:last-child)::after { background: var(--or); }
.etape-corps { margin-top: 10px; padding-bottom: 0; }
.etape-titre { font-weight: 500; color: var(--vert); font-size: 14px; }
/* .message-etat partage le rendu sans partager le sens : une classe de date portait
   les messages d'état de la fiche de gestion (retours/ETUDE_AFFICHAGES.md §3.12).
   Deux noms, une seule règle : le jour où l'un des deux doit changer, il se
   détache sans toucher à l'autre. */
.etape-date, .message-etat { font-size: 11px; color: var(--gris-clair); margin-top: 2px; }

/* ---------- Divers ---------- */
.flash { padding: 13px 18px; margin-bottom: 18px; font-size: 14px; }
.flash-ok { background: #EAF2EA; color: var(--vert-ok); border: 1px solid #D4E4D4; }
.flash-erreur { background: #F7E3E3; color: var(--rouge); border: 1px solid #EFC9C9; }
/* Alignement et retraits repris de l'attribut style du gabarit : posés là, ils
   ne pouvaient plus être affinés au téléphone, où la barre basse du panier
   recouvre le pied et lui réclame une garde. */
.pied { background: var(--vert); color: var(--gris-clair); text-align: left; font-size: 12px; padding: 30px 32px; margin-top: 60px; }
.pied a { color: var(--or); }
.vide { text-align: center; color: var(--gris); padding: 60px 20px; font-family: var(--serif); font-size: 20px; font-style: italic; }
.total-ligne { display: flex; justify-content: space-between; padding: 8px 0; font-size: 14px; }
.total-ligne.grand { font-size: 18px; font-weight: 600; color: var(--vert); border-top: 2px solid var(--or); padding-top: 12px; }
.qty { display: inline-flex; align-items: center; border: 1px solid #DDD8C9; background: #FAF8F3; }
.qty button { border: none; background: transparent; font-size: 17px; width: 34px; height: 34px; cursor: pointer; color: var(--vert); }
.qty input { width: 54px; border: none; text-align: center; font-size: 14px; padding: 0 2px; }
@media (max-width: 900px) {
  .topbar { flex-wrap: wrap; padding: 12px 16px; gap: 12px; }
  .page { padding: 22px 16px 60px; }
  h1.titre-page { font-size: 38px; }
}

/* ---------- Page de suivi : styles complémentaires (barre horizontale) ---------- */
.etape.echec .rond { background: var(--rouge); border-color: var(--rouge); }
.etape.echec .etape-titre { color: var(--rouge); }

/* ---------- Reporting (module reporting) - ajouts indispensables ----------
   Cartes KPI, barre de filtres et cadres des graphiques Chart.js
   (hauteur fixe requise avec maintainAspectRatio:false). */
.filtres-reporting { display: flex; align-items: end; gap: 18px; flex-wrap: wrap; margin-top: 30px; padding: 20px 24px; }
.filtres-reporting .champ { margin-bottom: 0; min-width: 170px; }
.filtres-reporting .btn { padding: 12px 24px; }
.kpi-grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px; margin-top: 22px; }
.kpi-carte { background: var(--blanc); border: 1px solid #ECE8DC; border-top: 2px solid var(--or); padding: 18px 20px; }
.kpi-libelle { font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gris); }
.kpi-valeur { font-family: var(--serif); font-size: 34px; font-weight: 600; color: var(--vert); line-height: 1.15; margin-top: 6px; }
.kpi-note { font-size: 12px; color: var(--gris-clair); margin-top: 4px; }
.graphes-reporting { margin-top: 22px; gap: 18px; align-items: stretch; }
.graphe-cadre { position: relative; height: 300px; margin-top: 14px; }
.tableau-reporting { margin-top: 18px; }
.tableau-reporting .cellule-montant { text-align: right; }
.tableau-reporting .ligne-total td { border-top: 2px solid var(--or); background: #FBF9F2; }
.volumes-titre { font-family: var(--serif); font-size: 22px; font-weight: 500; color: var(--vert); }

/* ---------- Parcours de commande (module commande) - ajouts indispensables ----------
   .option-radio : les variantes doivent se lire comme des choix, pas comme des
   libellés de champ (le label global est en petites capitales espacées).
   .bloc-centre : bloc central de la page de confirmation. */
.option-radio { display: flex; align-items: center; gap: 10px; text-transform: none; letter-spacing: normal; font-size: 14px; color: var(--encre); margin-bottom: 8px; cursor: pointer; }
.option-radio input { accent-color: var(--vert); }
.bloc-centre { max-width: 680px; margin: 24px auto 0; text-align: center; }
.bloc-centre .sous-titre { border-top: none; }

/* ---------- Admin catalogue & tarification (module catalogue_admin) - ajouts indispensables ----------
   label.case : cases à cocher lisibles (le label global est bloc/majuscules espacées) ;
   .ligne-exception : signale visuellement les exceptions de prix client (prioritaires) ;
   .actions / .variante-ligne : mise en page des cellules d'actions et des lignes de variantes. */
label.case { display: flex; align-items: center; gap: 8px; text-transform: none; letter-spacing: normal; font-size: 13px; color: var(--encre); margin: 0 0 6px; cursor: pointer; }
label.case input[type="checkbox"] { width: auto; accent-color: var(--vert); }
.cases-allergenes { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 2px 18px; }
table.liste td form { display: inline-block; margin: 0; }
table.liste .ligne-inactive td { opacity: .55; }
table.liste tr.ligne-exception td { background: #FBF4DE; }
.actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.variante-ligne { display: flex; gap: 10px; align-items: center; margin-bottom: 10px; max-width: 460px; }

/* ---------- Mode vitrine (SHOWCASE) ---------- */
/* barre démo (complète uniquement) : non sticky, elle défile ; seul le header reste collé
   en haut, sinon les deux se chevauchent (tous deux position:sticky top:0). */
.demo-bar { display: flex; align-items: center; gap: 18px;
  background: var(--or); color: var(--vert); padding: 8px 24px; font-size: 12px; letter-spacing: .04em; flex-wrap: wrap; }
.demo-bar a { text-transform: uppercase; letter-spacing: .12em; font-size: 11px; font-weight: 600;
  border-bottom: 2px solid transparent; padding-bottom: 2px; }
.demo-bar a:hover { border-bottom-color: var(--vert); }
.demo-tag { background: var(--vert); color: var(--or); text-transform: uppercase; letter-spacing: .16em;
  font-size: 10px; font-weight: 600; padding: 4px 10px; }
.demo-sep { opacity: .75; }
.demo-note { margin-left: auto; font-style: italic; opacity: .8; }
.demo-groupe { margin-top: 40px; }
.demo-groupe-titre { font-family: var(--serif); font-size: 26px; color: var(--vert); border-bottom: 1px solid var(--or-clair);
  padding-bottom: 10px; margin-bottom: 18px; }
.demo-num { color: var(--or); font-size: 20px; margin-right: 10px; }
.demo-cartes { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.demo-carte { background: var(--blanc); border: 1px solid #ECE8DC; padding: 18px 20px; display: block; transition: box-shadow .15s, border-color .15s; }
.demo-carte:hover { box-shadow: 0 10px 28px rgba(4,56,59,.10); border-color: var(--or); }
.demo-carte-titre { font-family: var(--serif); font-size: 19px; font-weight: 600; color: var(--vert); }
.demo-carte-desc { font-size: 12.5px; color: var(--gris); margin-top: 5px; }

/* ---------- Micro-interactions (boutons d'achat) ---------- */
.btn { transition: opacity .12s, transform .15s ease, box-shadow .15s ease; }
.btn-primaire:hover { opacity: 1; background: var(--or); color: var(--vert); transform: translateY(-1px); box-shadow: 0 6px 18px rgba(191,167,77,.38); }
.btn-or:hover { opacity: 1; transform: translateY(-1px); box-shadow: 0 6px 18px rgba(4,56,59,.22); }
.btn-primaire:active, .btn-or:active { transform: translateY(0) scale(.98); box-shadow: none; }
.qty button { transition: background .25s ease, color .25s ease; border-radius: 2px; }
.qty button:hover { background: #F1ECDF; color: var(--vert); }
.qty input { transition: background .15s ease; }
.btn-panier { transition: background .35s ease, color .35s ease; }

/* Alignement des lignes de prix entre cartes d'une même rangée :
   on réserve la hauteur de deux rangées de badges, même quand une carte n'en a qu'une. */
.carte-corps .badges { min-height: 28px; align-content: flex-start; }


/* ---------- Finitions esthétiques ---------- */
.carte-photo img { transition: transform 1.1s cubic-bezier(.22,.61,.36,1); }
.carte:hover .carte-photo img { transform: scale(1.07); }
.onglet { position: relative; border-bottom: none; padding-bottom: 12px; }
.onglet::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--or);
  transform: scaleX(0); transform-origin: left; transition: transform .22s ease; }
.onglet.actif::after, .onglet:hover::after { transform: scaleX(1); }
::selection { background: var(--or-clair); color: var(--vert); }
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--creme); }
::-webkit-scrollbar-thumb { background: #D8D2C0; border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: var(--or); }

/* ---------- Alignement maquette : nav, footer, modale, panier, confirmation ---------- */
.btn-panier { position: relative; }
.pastille { position: absolute; top: -9px; right: -9px; background: var(--or); color: var(--vert);
  font-size: 11px; font-weight: 600; min-width: 20px; height: 20px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; padding: 0 5px; }
.retour-lien { display: inline-block; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--gris); margin-bottom: 18px; transition: color .3s; }
.retour-lien:hover { color: var(--vert); }
.pied-marque { font-family: var(--sans); font-weight: 600; letter-spacing: 0.24em; color: var(--blanc); font-size: 15px; }
.pied-tagline { font-family: var(--serif); font-style: italic; color: rgba(250,248,243,.55); font-size: 14px; margin-top: 4px; }

/* Modale produit */
.modale-fond { position: fixed; inset: 0; background: rgba(5,23,36,.6); backdrop-filter: blur(6px);
  display: none; align-items: center; justify-content: center; z-index: 90; padding: 24px; }
.modale-fond.ouverte { display: flex; }
.modale { background: var(--blanc); max-width: 900px; width: 100%; max-height: 92vh; overflow: auto;
  display: grid; grid-template-columns: 47% 53%; position: relative; }
.modale-photo { background: repeating-linear-gradient(45deg, #EFE9D8, #EFE9D8 12px, #E7E0CC 12px, #E7E0CC 24px); min-height: 420px; }
.modale-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.modale-corps { padding: 34px 36px 30px; }
.modale-fermer { position: absolute; top: 16px; right: 16px; width: 34px; height: 34px; border-radius: 50%;
  border: 1px solid #E8E2D3; background: var(--creme); color: var(--gris); font-size: 16px; cursor: pointer; z-index: 2;
  transition: border-color .25s, color .25s, transform .3s; }
.modale-fermer:hover { border-color: var(--or); color: var(--vert); transform: rotate(90deg); }
.modale-kicker { font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--or); font-weight: 600; }
.modale-titre { font-family: var(--serif); font-size: 34px; font-weight: 600; color: var(--vert); margin: 6px 0 10px; }
.modale-desc { font-size: 14.5px; color: var(--gris); }
.modale .badge { background: #FAF8F3; }
.modale-rub { font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--encre);
  font-weight: 600; margin: 18px 0 8px; }
.modale-rub .sans-surcout { text-transform: none; letter-spacing: 0; color: var(--gris-clair); font-weight: 400; }
.segments { display: flex; gap: 10px; flex-wrap: wrap; }
.segments input { position: absolute; opacity: 0; pointer-events: none; }
.segments label { border: 1px solid #DDD8C9; padding: 9px 18px; font-size: 12px; letter-spacing: 0.12em;
  text-transform: uppercase; cursor: pointer; transition: all .15s; margin: 0; color: var(--encre); }
.segments input:checked + label { background: var(--vert); color: var(--blanc); border-color: var(--vert); }
.segments label:hover { border-color: var(--or); }
.modale-ligne-prix { display: flex; align-items: end; justify-content: space-between; gap: 16px;
  border-top: 1px solid var(--or-clair); margin-top: 20px; padding-top: 16px; }
.modale-prix .ht { font-size: 22px; font-weight: 600; color: var(--vert); }
.modale-prix .ttc { font-size: 12px; color: var(--gris-clair); text-align: right; }
.qte-note { font-size: 12px; color: var(--gris-clair); text-transform: none; letter-spacing: 0; margin-left: 8px; }
.qty button { width: 40px; height: 40px; font-size: 18px; }
.qty input { height: 40px; }
.modale .btn-primaire { width: 100%; margin-top: 18px; padding: 16px; text-align: center; }
.fiche-grille form .btn-primaire { margin-top: 22px; padding: 15px 34px; }

/* Panier « Votre commande » */
.commande-grille { display: grid; grid-template-columns: 1fr 360px; gap: 26px; align-items: start; }
@media (max-width: 980px) { .commande-grille { grid-template-columns: 1fr; } }
.carte-bloc { background: var(--blanc); border: 1px solid #E8E2D3; border-radius: 6px; padding: 26px 28px; }
.carte-bloc h2 { font-family: var(--serif); font-size: 24px; font-weight: 600; color: var(--vert); }
.carte-bloc .filet { width: 34px; height: 2px; background: var(--or); margin: 8px 0 18px; }
.ligne-article { display: flex; align-items: center; gap: 16px; padding: 14px 0; border-top: 1px solid #F0ECE0; }
.ligne-article:first-of-type { border-top: none; }
.ligne-article .vignette { width: 64px; height: 64px; object-fit: cover; flex-shrink: 0;
  background: repeating-linear-gradient(45deg, #EFE9D8, #EFE9D8 8px, #E7E0CC 8px, #E7E0CC 16px); }
.ligne-article .infos { flex: 1; min-width: 0; }
.ligne-article .nom { font-family: var(--serif); font-size: 17px; font-weight: 600; color: var(--vert); }
.ligne-article .detail { font-size: 12px; color: var(--gris); }
.ligne-article .total { font-weight: 600; min-width: 76px; text-align: right; }
.ligne-article .retirer { border: none; background: none; color: var(--gris-clair); font-size: 17px;
  cursor: pointer; padding: 6px; transition: color .25s; }
.ligne-article .retirer:hover { color: #A34226; }
.form-3col { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 4px 20px; }
@media (max-width: 860px) { .form-3col { grid-template-columns: 1fr; } }
.info-i { display: inline-flex; align-items: center; justify-content: center; width: 15px; height: 15px;
  border: 1px solid var(--or); border-radius: 50%; color: var(--or); font-size: 10px; font-style: normal;
  margin-left: 5px; cursor: help; }
/* Une infobulle native ne s'ouvre qu'au survol : au focus clavier, aucun
   navigateur ne la montre. La pastille se prend maintenant au clavier, et le
   texte déjà rendu pour le doigt (mobile.css) reparaît tant qu'elle garde le
   focus. Sans ces trois lignes, les aides converties en infobulle ne
   s'atteindraient qu'à la souris. Deux règles et non une : la première vaut
   quand le repli suit la pastille, la seconde quand il suit le libellé qui la
   porte, et `:has` posé dans la même liste ferait tomber les deux là où il
   n'est pas connu. */
.info-i:focus-visible { outline: 2px solid var(--or); outline-offset: 2px; }
.info-i:focus-visible ~ .aide-tactile { display: block; font-size: 12.5px; color: var(--gris); margin-top: 5px; }
*:has(> .info-i:focus-visible) ~ .aide-tactile { display: block; font-size: 12.5px; color: var(--gris); margin-top: 5px; }
/* Sur un en-tête de colonne, le repli n'est pas dans la cellule (trop étroite,
   et le tableau défile) mais devant le tableau : sans cette troisième règle, ces
   infobulles-là ne s'ouvriraient toujours qu'à la souris. */
*:has(> table .info-i:focus-visible) > .aide-tactile { display: block; font-size: 12.5px; color: var(--gris); margin-top: 5px; }
.aside-recap { background: var(--vert); color: var(--blanc); padding: 28px 30px; border-radius: 6px; box-shadow: 0 24px 56px rgba(4,56,59,.28); position: sticky; top: 20px; }
.aside-recap h2 { font-family: var(--serif); font-size: 24px; font-weight: 600; color: var(--blanc); margin-bottom: 16px; }
.aside-recap .ligne { display: flex; justify-content: space-between; font-size: 14px; padding: 7px 0;
  color: rgba(250,248,243,.85); }
.aside-recap .total { border-top: 1px solid rgba(191,167,77,.45); margin-top: 10px; padding-top: 14px;
  display: flex; justify-content: space-between; align-items: baseline; }
.aside-recap .total .lib { font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--or); }
.aside-recap .total .mnt { font-size: 26px; font-weight: 600; color: var(--blanc); }
.aside-recap .note { font-size: 12px; color: rgba(250,248,243,.6); margin: 14px 0 18px; line-height: 1.5; }
.btn-verifier { display: block; width: 100%; background: var(--or); color: var(--vert); border: none;
  padding: 15px; font-family: var(--sans); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase;
  font-weight: 600; cursor: pointer; text-align: center; border-radius: 3px; transition: background .3s, transform .3s; }
.btn-verifier:hover { background: #CDB55C; transform: translateY(-1px); }

/* Récapitulatif final */
.recap-rows { display: grid; grid-template-columns: repeat(auto-fit, minmax(225px, 1fr)); gap: 14px 26px; }
.recap-rows .lib { font-size: 10.5px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gris-clair); }
.recap-rows .val { font-size: 15px; font-weight: 500; color: var(--encre); margin-top: 3px; }
.recap-sous { font-family: var(--serif); font-style: italic; font-size: 18px; color: var(--gris); margin: 0 0 30px; }
.recap-boutons { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 30px; }
.recap-boutons form { margin: 0; }
.recap-boutons .btn-contour { background: var(--blanc); border-color: #DCD5C2; color: var(--vert); transition: border-color .3s; }
.recap-boutons .btn-contour:hover { border-color: var(--or); opacity: 1; }
.recap-ligne-art .varia { color: var(--gris-clair); font-size: 13px; }
.recap-ligne-art { display: flex; justify-content: space-between; padding: 9px 0; border-top: 1px solid #F0ECE0; font-size: 14.5px; }
.recap-ligne-art:first-of-type { border-top: none; }
.recap-totaux { display: flex; gap: 22px; justify-content: flex-end; flex-wrap: wrap; border-top: 1px solid var(--or-clair);
  margin-top: 12px; padding-top: 12px; font-size: 14px; color: var(--gris); }
.recap-totaux .ttc { color: var(--vert); font-weight: 600; }

/* Confirmation */
.confirm-bloc { max-width: 640px; margin: 4vh auto 0; text-align: center; }
.confirm-kicker { font-family: var(--serif); font-style: italic; color: var(--or); font-size: 19px; margin-top: 20px; }
.confirm-titre { font-family: var(--serif); font-size: 42px; font-weight: 600; color: var(--vert); margin: 8px 0 14px; }
.confirm-texte { color: var(--gris); font-size: 15px; margin-bottom: 8px; }
.confirm-passion { font-family: var(--serif); font-style: italic; color: var(--or); font-size: 17px; margin: 18px 0 4px; }
.confirm-boutons { display: flex; gap: 14px; justify-content: center; margin-top: 26px; flex-wrap: wrap; }
@keyframes trace { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
.confirm-svg circle, .confirm-svg path { stroke-dasharray: 100; animation: trace 1s ease forwards; }
.confirm-svg path { animation-delay: .5s; stroke-dashoffset: 100; }

/* ===== Alignement maquette · 2e passe ===== */
.modale .badge { font-size: 12px; letter-spacing: 0.02em; text-transform: none; padding: 5px 11px; }
.ast { color: var(--or); }
input.champ-fact, select.champ-fact { background: #FDFAF0; border-color: #E8DFC8; }
/* Case remplie par le logiciel et non par le demandeur (identité du compte au
   panier) : sans fond ni texte grisés, une case en lecture seule a l'air d'une
   case à remplir, et le clic sans effet passe pour une panne. */
input.champ-fige { background: #F0ECE0; color: var(--gris); }
.conteneur-etroit { max-width: 940px; margin: 0 auto; }
table.liste-clair th { background: #F5F1E6; color: var(--gris); letter-spacing: 0.14em; padding: 13px 24px; }
table.liste-clair td { padding: 17px 24px; }
table.liste-clair .col-droite { text-align: right; }
table.liste-clair td.col-muette { color: var(--gris); }
.statut-livree { background: #EFEDE3; color: #6B7574; }
.statut-confirmee { color: #3E6B3E; }

/* ===== Fiche produit détaillée ===== */
.modale-fiche-lien { display: inline-block; margin: 2px 0 6px; font-size: 11px; letter-spacing: 0.16em;
  text-transform: uppercase; color: #8a7526; border-bottom: 1px solid var(--or); padding-bottom: 2px; }
.modale-fiche-lien:hover { color: var(--vert); border-color: var(--vert); }
.fiche-grille { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 44px;
  align-items: start; margin-top: 18px; }
.fiche-photo { position: sticky; top: 24px; background: var(--blanc); border: 1px solid #ECE8DC; }
.fiche-texte { color: var(--gris); font-size: 14px; line-height: 1.65; margin-top: 4px; }
.fiche-allergenes { margin-top: 4px; }
@media (max-width: 900px) { .fiche-grille { grid-template-columns: 1fr; } .fiche-photo { position: static; } }

/* ===== Parcours client : survols identiques à la maquette =====
   Les boutons verts primaires s'éclaircissent vers #0A4A4E (pas de virage à l'or,
   réservé à l'admin) ; le bouton contour de la confirmation passe sa bordure à l'or. */
.modale .btn-primaire, .fiche-grille .btn-primaire, .confirm-boutons .btn-primaire {
  transition: background .3s ease, transform .3s ease; }
.modale .btn-primaire:hover, .fiche-grille .btn-primaire:hover,
.confirm-boutons .btn-primaire:hover {
  background: #0A4A4E; color: var(--blanc); opacity: 1; box-shadow: none; }
.modale .btn-primaire:hover, .fiche-grille .btn-primaire:hover { transform: translateY(-1px); }
.confirm-boutons .btn-primaire:active, .fiche-grille .btn-primaire:active,
.modale .btn-primaire:active { transform: none; box-shadow: none; }
.confirm-boutons .btn-contour { border-color: #DCD5C2; transition: border-color .3s; }
.confirm-boutons .btn-contour:hover { border-color: var(--or); color: var(--vert); opacity: 1; }

/* ===== Datepicker français (comme la maquette) ===== */
.datepicker { position: relative; }
.dp-affiche { width: 100%; box-sizing: border-box; border: 1px solid #DCD5C2; border-radius: 3px;
  padding: 11px 13px; font-size: 14px; background: var(--blanc); cursor: pointer; color: var(--encre);
  transition: border-color .3s; }
.dp-affiche:hover, .dp-affiche:focus { border-color: var(--or); outline: none; }
.dp-affiche::placeholder { color: var(--gris-clair); }
.dp-cal { position: absolute; top: 100%; left: 0; z-index: 40; margin-top: 8px; background: var(--blanc);
  border: 1px solid #E8E2D3; border-radius: 8px; box-shadow: 0 22px 54px rgba(4,56,59,.2); padding: 16px; width: 292px; }
.dp-cal[hidden] { display: none; }
.dp-cal-tete { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.dp-cal-tete button { width: 30px; height: 30px; border: 1px solid #E8E2D3; background: var(--creme);
  border-radius: 3px; cursor: pointer; color: var(--vert); font-size: 16px; transition: border-color .25s; }
.dp-cal-tete button:hover { border-color: var(--or); }
.dp-mois { font-family: var(--serif); font-size: 18px; font-weight: 600; color: var(--vert); text-transform: capitalize; }
.dp-dows { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; margin-bottom: 4px; }
.dp-dows span { text-align: center; font-size: 10px; font-weight: 600; letter-spacing: 0.08em; color: var(--gris-clair); padding: 2px 0; }
.dp-grille { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.dp-grille button { height: 33px; border: none; border-radius: 3px; font-size: 13px; cursor: pointer;
  background: transparent; color: var(--encre); transition: background .2s; }
.dp-grille button:hover:not(:disabled) { background: var(--creme); }
.dp-grille button.sel { background: var(--or); color: var(--vert); font-weight: 600; }
.dp-grille button:disabled { color: #CFCABA; cursor: default; }
.dp-grille button.vide { visibility: hidden; }
.dp-aide { margin-top: 12px; font-size: 11.5px; line-height: 1.5; color: var(--gris-clair); }

/* ===== Animations d'entrée au chargement (comme la maquette) ===== */
@keyframes viewIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes trackIn { from { opacity: 0; letter-spacing: .18em; } to { opacity: 1; letter-spacing: .02em; } }
@keyframes ruleGrow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes fadeUpM { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes cardIn { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
@keyframes chapIn { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.page { animation: viewIn .55s cubic-bezier(.22,.61,.36,1) both; }
.a-titre { animation: trackIn 1s cubic-bezier(.22,.61,.36,1) both; }
.a-up1 { animation: fadeUpM .6s cubic-bezier(.22,.61,.36,1) .05s both; }
.a-up2 { animation: fadeUpM .6s cubic-bezier(.22,.61,.36,1) .2s both; }
.a-up3 { animation: fadeUpM .6s cubic-bezier(.22,.61,.36,1) .32s both; }
.a-up4 { animation: fadeUpM .6s cubic-bezier(.22,.61,.36,1) .44s both; }
.a-rule { display: inline-block; transform-origin: left; animation: ruleGrow .9s cubic-bezier(.22,.61,.36,1) .15s both; }
.section-entete { animation: chapIn .6s cubic-bezier(.22,.61,.36,1) both; }
.section-filet { animation: ruleGrow .9s cubic-bezier(.22,.61,.36,1) both; }
.grille .carte { animation: cardIn .65s cubic-bezier(.22,.61,.36,1) backwards; }
@media (prefers-reduced-motion: reduce) {
  .page, .a-titre, .a-up1, .a-up2, .a-up3, .a-up4, .a-rule, .section-entete, .section-filet, .grille .carte { animation: none !important; }
}

/* ===== Filtrage du catalogue (onglets catégories + sous-filtres) ===== */
.onglet { cursor: pointer; }
.sous-filtres { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; }
.sous-filtres[hidden] { display: none; }
.sous-filtre { border: 1px solid #E8E2D3; background: var(--blanc); color: var(--gris); font-size: 11px;
  font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; padding: 7px 16px; border-radius: 999px;
  cursor: pointer; transition: border-color .3s, background .3s; }
.sous-filtre:hover { border-color: var(--or); }
.sous-filtre.actif { background: #F7F1DE; color: #7A6A25; border-color: var(--or); }
/* ré-animation au filtrage : coupe puis relance les keyframes */
.section-entete.sans-anim, .section-filet.sans-anim, .grille .carte.sans-anim { animation: none !important; }

/* ===== Navigation par chapitre (vue catégorie filtrée) ===== */
.chap-nav { margin-top: 64px; border-top: 1px solid #E8E2D3; padding-top: 22px; display: flex;
  justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.chap-nav[hidden] { display: none; }
.chap-nav button { background: none; border: none; cursor: pointer; padding: 6px 2px; display: flex;
  flex-direction: column; gap: 5px; transition: opacity .3s; }
.chap-nav button:hover { opacity: .75; }
.chap-nav .chap-suiv { text-align: right; margin-left: auto; }
.chap-nav .chap-lbl { font-size: 10px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gris-clair); }
.chap-nav .chap-nom { font-family: var(--serif); font-size: 24px; font-weight: 600; color: var(--vert); }

/* ===== Panier lecture seule (vitrine 100% visuelle) + toast ===== */
.qty-fixe { display: inline-flex; align-items: center; justify-content: center; min-width: 54px; height: 40px;
  border: 1px solid #DDD8C9; background: #FAF8F3; border-radius: 2px; font-size: 14px; font-weight: 500;
  color: var(--encre); padding: 0 12px; }
.toast { position: fixed; left: 50%; bottom: 30px; transform: translate(-50%, 16px); z-index: 120;
  background: var(--vert); color: #FAF8F3; border: 1px solid rgba(191,167,77,.6); border-radius: 3px;
  padding: 14px 26px; font-size: 13px; letter-spacing: .04em; box-shadow: 0 18px 44px rgba(5,23,36,.35);
  opacity: 0; pointer-events: none; transition: opacity .3s, transform .3s; }
.toast.on { opacity: 1; transform: translate(-50%, 0); }
.toast[hidden] { display: none; }

/* ===== Aperçu d'une boutique cliente (administration) =====
   Bande placée DANS l'en-tête : elle suit la barre du haut, donc elle reste
   visible quel que soit le défilement, sans second élément collant. */
.bandeau-apercu { background: var(--creme); border-top: 1px solid var(--or); color: var(--encre); }
.bandeau-apercu-inner { max-width: 1344px; margin: 0 auto; width: 100%; display: flex;
  align-items: center; gap: 20px; padding: 11px 32px; font-size: 13px; }
.bandeau-apercu .btn { margin-left: auto; flex: none; }

/* ===== Barre de travail : contexte « entreprise cliente » =====
   Même famille visuelle que le bandeau d'aperçu, dans l'en-tête. */
.barre-contexte { background: var(--creme); border-top: 1px solid var(--or); color: var(--encre); }
.barre-contexte-inner { max-width: 1344px; margin: 0 auto; width: 100%; display: flex;
  align-items: center; gap: 16px; padding: 8px 32px; font-size: 13px; flex-wrap: wrap; }
.barre-contexte-etat { color: var(--gris); }
.barre-contexte-etat strong { color: var(--encre); font-weight: 600; }
.barre-contexte-form { display: flex; align-items: center; gap: 8px; }
.barre-contexte-form select { font-size: 13px; padding: 4px 8px; max-width: 260px; width: auto; }
.barre-contexte-sortie { appearance: none; -webkit-appearance: none; background: none; margin: 0;
  border: 0; border-bottom: 1px solid var(--or-clair); padding: 0 0 1px; font-family: inherit;
  font-size: 13px; color: var(--gris); cursor: pointer; }
.barre-contexte-sortie:hover { color: var(--or); border-bottom-color: var(--or); }
.barre-contexte-lien { font-size: 13px; color: var(--gris); border-bottom: 1px solid var(--or-clair); }
.barre-contexte-lien:hover { color: var(--or); border-bottom-color: var(--or); }

/* ===== Quantité saisissable au clavier =====
   Le champ n'est plus en lecture seule (fiche produit, ajout rapide, panier).
   Les flèches natives du champ nombre sont masquées : le rendu reste celui des
   deux boutons − / +, la saisie directe s'ajoute sans rien déplacer. */
.qty input::-webkit-outer-spin-button,
.qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.qty input { -moz-appearance: textfield; appearance: textfield; }

/* ===== Feuille de production : contenu des commandes du jour =====
   Le planning ne donnait que le nombre d'articles ; la cuisine devait ouvrir
   chaque commande. Le détail tient dans la case du jour, en petit corps. */
.pj-lignes { list-style: none; margin: 0 0 6px; padding: 5px 0 0; border-top: 1px solid #EFEAD9; }
.pj-lignes li { display: flex; gap: 6px; font-size: 11.5px; line-height: 1.35;
  color: var(--encre); margin-top: 3px; }
.pj-lignes li:first-child { margin-top: 0; }
.pj-qte { font-weight: 600; color: var(--vert); white-space: nowrap; }

/* ===== Bandeau « en attente » (page de suivi, catégorie de flash « avertissement ») =====
   Ni une réussite ni une erreur : la commande est suspendue et attend une
   réponse du demandeur. Reprend les teintes du statut du même nom. Même teinte
   pour un message qui nuance une réussite sans la démentir, un enregistrement
   accepté mais douteux : rendu en vert, il passait pour une confirmation. */
.flash-attente { background: #F3ECDA; color: #8A6D1F; border: 1px solid #E4D8B8; }

/* Documentation : une page de lecture, pas un écran de saisie. La mesure de ligne
   est bornée, sans quoi le texte court d'un bord à l'autre sur un grand écran et
   l'œil perd la ligne suivante. */
.doc { max-width: 860px; }
.doc h2 { font-family: var(--serif); font-size: 30px; font-weight: 600; color: var(--vert);
          margin: 40px 0 14px; padding-top: 18px; border-top: 1px solid #ECE8DC; }
.doc h3 { font-size: 17px; font-weight: 600; color: var(--vert); margin: 24px 0 8px; }
.doc p { margin: 0 0 14px; line-height: 1.7; }
.doc table.liste { margin: 6px 0 18px; }
.doc-chapeau { font-size: 16px; color: var(--gris); border-left: 3px solid var(--or);
               padding-left: 16px; margin-bottom: 26px; }
.doc-sommaire { background: var(--creme); border: 1px solid #ECE8DC; padding: 18px 22px;
                margin-bottom: 10px; }
.doc-sommaire ol { margin: 10px 0 0 18px; padding: 0; columns: 2; column-gap: 30px; }
.doc-sommaire li { margin-bottom: 5px; break-inside: avoid; }
.doc-sommaire a { color: var(--encre); text-decoration: none; }
.doc-sommaire a:hover { color: var(--or); }
.doc-liste { margin: 0 0 16px 20px; padding: 0; line-height: 1.7; }
.doc-liste li { margin-bottom: 7px; }
.doc-avertissement { background: #FCF7E8; border-left: 3px solid var(--or); padding: 14px 18px; }
.doc-pied { margin-top: 40px; padding-top: 18px; border-top: 1px solid #ECE8DC;
            font-size: 13px; color: var(--gris); }
@media screen and (max-width: 760px) {
  .doc-sommaire ol { columns: 1; }
  .doc h2 { font-size: 24px; }
}

/* ---------- Explorateur du reporting ---------- */
/* L'écran n'introduit aucun motif nouveau : il réutilise la carte de formulaire,
   la grille d'indicateurs, le tableau liste et les pastilles. Ce qui suit ne
   couvre que ce qui n'existait pas : les questions d'ouverture, la ligne des
   éléments retenus et le panneau de sélection. */
.grille-questions { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 22px; margin-top: 14px; }
.etiquette-famille { font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--or); margin-bottom: 8px; }
.liste-questions { list-style: none; padding: 0; margin: 0; }
.liste-questions li { margin-bottom: 8px; }
.liste-questions a { font-size: 14px; color: var(--vert); border-bottom: 1px solid #E3DFD2; padding-bottom: 2px; }
.liste-questions a:hover { border-bottom-color: var(--or); }

.ligne-selection { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 18px; }
.ligne-selection .sous-titre { margin: 0; }
.badge-retire { cursor: pointer; }
.lien-discret { font-size: 13px; color: var(--gris); border-bottom: 1px solid #E3DFD2; }
.lien-discret:hover { color: var(--vert); border-bottom-color: var(--or); }

.panneau-selection { margin-top: 14px; }
.panneau-selection.replie { display: none; }
.entete-panneau { display: flex; align-items: flex-end; gap: 14px; flex-wrap: wrap; }
.actions-panneau { display: flex; gap: 8px; flex-wrap: wrap; }
.liste-valeurs { list-style: none; padding: 0; margin: 14px 0 0; max-height: 320px; overflow-y: auto; border: 1px solid #ECE8DC; }
.liste-valeurs li { border-bottom: 1px solid #F0ECE0; }
.liste-valeurs li:last-child { border-bottom: none; }
.liste-valeurs label { display: flex; align-items: center; gap: 10px; padding: 9px 12px; cursor: pointer; font-size: 14px; }
.liste-valeurs label:hover { background: #FCFAF5; }
.libelle-valeur { flex: 1; }
.montant-valeur { color: var(--gris); font-variant-numeric: tabular-nums; }
.pied-panneau { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 14px; flex-wrap: wrap; }

.entete-tableau { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.colonne-mesure { background: #FBF9F2; font-weight: 600; }
.ligne-autres td { color: var(--gris); font-style: italic; }
.note-tableau { font-size: 12px; color: var(--gris); margin-top: 10px; }
.pied-explorer { margin-top: 26px; }
.champ-bouton { display: flex; align-items: flex-end; }
.champ.replie { display: none; }

/* Portefeuille d'un manager : liste courte et scrutable, jamais un mur de cases. */
.liste-portefeuille { max-height: 190px; overflow-y: auto; border: 1px solid #ECE8DC; padding: 10px 12px; background: var(--blanc); }

/* Vignette du logo d'entreprise : l'image, pas son chemin. */
.apercu-logo { display: flex; align-items: center; gap: 12px; margin-top: 10px; }
.apercu-logo img { max-height: 56px; max-width: 190px; border: 1px solid #ECE8DC; background: var(--blanc); padding: 6px; object-fit: contain; }
.logo-liste { max-height: 34px; max-width: 90px; object-fit: contain; display: block; }

/* ---------- Modale de confirmation ---------- */
/* Remplace la boîte du navigateur : celle-ci annonçait le domaine avant la
   question, ignorait la charte et cassait le fil d'un geste d'administration. */
/* .modale est une grille à deux colonnes (photo + texte) sur la fiche produit :
   la confirmation n'a qu'une colonne, elle repasse donc en bloc. */
.modale-confirmation .modale { max-width: 520px; display: block; }
.modale-confirmation .modale-corps { padding: 30px 32px 26px; }
.modale-confirmation .modale-desc { font-size: 15px; line-height: 1.55; color: var(--encre); }
.modale-actions { display: flex; gap: 12px; justify-content: flex-end; margin-top: 26px; }
.modale-actions .btn { min-width: 120px; text-align: center; }