/* PALOMA BUSINESS — feuille de style
   Palette tirée du logo : vert forêt, vert PB, vert feuille. Chaque produit apporte sa propre teinte de fruit (--teinte). */
:root {
  --foret: #1E3B22;
  --vert: #2E6B1F;
  --vert-fonce: #234F18;
  --feuille: #8BB33A;
  --surface: #F1F5EA;
  --trait: #D6DFC9;
  --texte: #1F2A1F;
  --doux: #55624F;
  --erreur: #A3262A;
  --mtn: #FFCB05;
  --airtel: #E3000F;
  --rayon: 10px;
  --serif: "Young Serif", Georgia, "Times New Roman", serif;
  --sans: "Figtree", "Segoe UI", Roboto, Arial, sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; animation: none !important; } }
body { margin: 0; font-family: var(--sans); font-size: 1.0625rem; line-height: 1.55; color: var(--texte); background: #fff; }
img { max-width: 100%; height: auto; }
a { color: var(--vert); text-underline-offset: 3px; }
a:hover { color: var(--vert-fonce); }
:focus-visible { outline: 3px solid var(--feuille); outline-offset: 2px; }
h1, h2, h3 { font-family: var(--serif); font-weight: 400; color: var(--foret); line-height: 1.15; }
h1 { font-size: clamp(1.9rem, 4.5vw, 2.8rem); margin: 1.6rem 0 1rem; }
h2 { font-size: clamp(1.4rem, 3vw, 1.8rem); margin: 2rem 0 .8rem; }
h3 { font-size: 1.2rem; margin: 0 0 .3rem; }
.enveloppe { width: min(1120px, 100% - 2.5rem); margin-inline: auto; }
.page-etroite { max-width: 640px; }
.visuellement-cache { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.saut { position: absolute; left: -999px; top: 0; background: var(--foret); color: #fff; padding: .6rem 1rem; z-index: 10; }
.saut:focus { left: 1rem; }

/* En-tête */
.entete { background: var(--foret); color: #fff; position: sticky; top: 0; z-index: 5; }
.entete-ligne { display: flex; align-items: center; gap: 1.5rem; min-height: 68px; }
.marque { display: flex; align-items: center; gap: .6rem; color: #fff; text-decoration: none; font-family: var(--serif); font-size: 1.15rem; line-height: 1; }
.marque img { border-radius: 50%; background: #fff; }
.marque small { font-family: var(--sans); font-size: .72rem; letter-spacing: .04em; color: #cfe0b4; }
.nav { display: flex; gap: 1.2rem; margin-left: auto; flex-wrap: wrap; }
.nav a { color: #e4eed7; text-decoration: none; font-weight: 500; padding: .3rem 0; border-bottom: 2px solid transparent; }
.nav a:hover, .nav a[aria-current] { color: #fff; border-bottom-color: var(--feuille); }
.bouton-panier { background: var(--feuille); color: var(--foret); text-decoration: none; font-weight: 700; padding: .55rem 1rem; border-radius: 999px; white-space: nowrap; }
.bouton-panier:hover { background: #a3c957; color: var(--foret); }
.pastille { display: inline-block; min-width: 1.5em; padding: 0 .4em; margin-left: .2rem; background: var(--foret); color: #fff; border-radius: 999px; text-align: center; font-size: .85rem; }
@media (max-width: 760px) {
  .entete-ligne { flex-wrap: wrap; gap: .4rem 1rem; padding: .5rem 0; }
  .bouton-panier { margin-left: auto; }
  .nav { order: 3; width: 100%; margin: 0; gap: 1rem; font-size: .95rem; overflow-x: auto; flex-wrap: nowrap; }
}

/* Boutons */
.bouton { display: inline-block; background: var(--vert); color: #fff; border: 0; border-radius: 8px; padding: .7rem 1.2rem; font: 600 1rem var(--sans); text-decoration: none; cursor: pointer; }
.bouton:hover { background: var(--vert-fonce); color: #fff; }
.bouton-secondaire { background: #fff; color: var(--vert); box-shadow: inset 0 0 0 2px var(--vert); }
.bouton-secondaire:hover { background: var(--surface); color: var(--vert-fonce); }
.bouton-clair { background: var(--feuille); color: var(--foret); }
.bouton-clair:hover { background: #a3c957; color: var(--foret); }
.bouton-large { width: 100%; padding: .9rem; font-size: 1.05rem; margin-top: 1.4rem; }

/* Bannière : l’étagère de bouteilles est l’élément signature */
.banniere { background: var(--foret); color: #e9f1df; padding: 2.5rem 0 0; overflow: hidden; }
.banniere-grille { display: grid; grid-template-columns: 1.15fr 1fr; gap: 2rem; align-items: end; }
.banniere-texte { padding-bottom: 3rem; }
.banniere h1 { color: #fff; margin-top: 0; max-width: 18ch; }
.banniere p { max-width: 52ch; }
.banniere-infos { color: #cfe0b4; font-size: .98rem; }
.etagere { display: flex; justify-content: center; align-items: flex-end; gap: .4rem; padding: 0 1rem; border-bottom: 14px solid #5a3d22; position: relative; }
.etagere::after { content: ""; position: absolute; left: 0; right: 0; bottom: -14px; height: 4px; background: #7a5530; }
.etagere-bouteille { width: 19%; max-width: 110px; display: block; }
.etagere-bouteille svg { display: block; width: 100%; height: auto; filter: drop-shadow(0 6px 6px rgba(0,0,0,.25)); }
.etagere-bouteille:nth-child(2), .etagere-bouteille:nth-child(4) { width: 17%; }
@media (prefers-reduced-motion: no-preference) {
  .etagere-bouteille { animation: pose .7s cubic-bezier(.2,.8,.3,1.2) both; }
  .etagere-bouteille:nth-child(2) { animation-delay: .08s; } .etagere-bouteille:nth-child(3) { animation-delay: .16s; }
  .etagere-bouteille:nth-child(4) { animation-delay: .24s; } .etagere-bouteille:nth-child(5) { animation-delay: .32s; }
  @keyframes pose { from { transform: translateY(-40px); opacity: 0; } }
}
@media (max-width: 760px) {
  .banniere-grille { grid-template-columns: 1fr; }
  .banniere-texte { padding-bottom: 1rem; }
  .etagere { max-width: 380px; margin: 0 auto; }
}

/* Produits */
.rayon h2 { border-bottom: 2px solid var(--trait); padding-bottom: .4rem; }
.grille-produits { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 1.4rem 1.2rem; }
.produit { display: flex; flex-direction: column; border-top: 6px solid var(--teinte); background: #fff; }
.produit .visuel { display: flex; justify-content: center; align-items: flex-end; aspect-ratio: 4 / 3; background: color-mix(in srgb, var(--teinte) 14%, #fff); object-fit: cover; width: 100%; }
.produit .visuel svg { height: 82%; width: auto; }
.produit-corps { display: flex; flex-direction: column; flex: 1; padding: .9rem 0 0; }
.format { font-family: var(--sans); font-size: .85rem; font-weight: 600; color: var(--doux); }
.produit-desc { color: var(--doux); font-size: .95rem; margin: .2rem 0 .6rem; flex: 1; }
.produit-prix { font-family: var(--serif); font-size: 1.35rem; color: var(--foret); margin: 0 0 .6rem; }
.ajout { display: flex; gap: .5rem; }
.ajout input { width: 4.2rem; }
.ajout .bouton { flex: 1; padding-inline: .6rem; }
.produit-epuise .visuel { filter: grayscale(.8); opacity: .6; }
.hors-saison { margin: 0; padding: .6rem; background: var(--surface); color: var(--doux); text-align: center; border-radius: 8px; font-weight: 500; }

.etapes { margin: 3rem 0; padding: 1.5rem 1.6rem; background: var(--surface); border-radius: var(--rayon); }
.etapes h2 { margin-top: 0; }
.etapes ol { padding-left: 1.3rem; max-width: 70ch; }
.etapes li { margin-bottom: .5rem; }

/* Formulaires */
input, select, textarea { font: inherit; color: inherit; padding: .6rem .7rem; border: 1.5px solid #b9c6ad; border-radius: 8px; background: #fff; width: 100%; }
input[type=checkbox], input[type=radio] { width: auto; accent-color: var(--vert); }
input[type=color] { height: 2.6rem; padding: .2rem; width: 5rem; }
input[aria-invalid], select[aria-invalid], textarea[aria-invalid] { border-color: var(--erreur); }
.formulaire label { display: block; font-weight: 600; margin: 1rem 0 .3rem; }
.formulaire label.option { font-weight: 500; }
fieldset { border: 0; padding: 0; margin: 0 0 1.6rem; }
legend { font-family: var(--serif); font-size: 1.3rem; color: var(--foret); margin-bottom: .2rem; }
.choix { display: grid; gap: .5rem; margin: .6rem 0; }
.option { display: flex !important; gap: .6rem; align-items: center; padding: .75rem .9rem; border: 1.5px solid var(--trait); border-radius: 8px; cursor: pointer; margin: 0 !important; }
.option:has(input:checked) { border-color: var(--vert); background: var(--surface); }
.option-mtn:has(input:checked) { box-shadow: inset 5px 0 0 var(--mtn); }
.option-airtel:has(input:checked) { box-shadow: inset 5px 0 0 var(--airtel); }
.aide { color: var(--doux); font-size: .93rem; }
.champ-erreur { color: var(--erreur); font-size: .93rem; margin: .3rem 0 0; font-weight: 500; }
.si-retrait { display: none; }
.mode-retrait .si-livraison { display: none; }
.mode-retrait .si-retrait { display: block; }

.message { padding: .8rem 1rem; border-radius: 8px; margin: 1rem 0; background: var(--surface); border-left: 5px solid var(--vert); }
.message p { margin: .2rem 0; }
.message-erreur { background: #fbeceb; border-left-color: var(--erreur); }

/* Panier */
.lignes-panier { list-style: none; padding: 0; margin: 0; }
.lignes-panier li { display: grid; grid-template-columns: 56px 1fr 5rem auto; grid-template-areas: "img info qte total" "img info qte retirer"; gap: 0 1rem; align-items: center; padding: .9rem 0; border-bottom: 1px solid var(--trait); }
.visuel-mini { grid-area: img; width: 56px; height: 56px; display: flex; justify-content: center; align-items: flex-end; background: color-mix(in srgb, var(--teinte) 16%, #fff); border-radius: 8px; object-fit: cover; }
.visuel-mini svg { height: 90%; }
.ligne-info { grid-area: info; display: flex; flex-direction: column; }
.ligne-info span { color: var(--doux); font-size: .93rem; }
.lignes-panier input { grid-area: qte; }
.ligne-total { grid-area: total; font-weight: 600; text-align: right; }
.lien-retirer { grid-area: retirer; background: none; border: 0; color: var(--erreur); font: inherit; font-size: .9rem; cursor: pointer; text-decoration: underline; justify-self: end; padding: 0; }
.panier-pied { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; flex-wrap: wrap; margin-top: 1rem; }
.sous-total { text-align: right; margin: 0; font-size: 1.1rem; }
.sous-total small { color: var(--doux); font-size: .88rem; }
.actions-fin { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; margin: 2rem 0 3rem; }

/* Commande */
.commande-grille { display: grid; grid-template-columns: 1.4fr 1fr; gap: 2.5rem; align-items: start; margin-bottom: 3rem; }
.recap { background: var(--surface); border-radius: var(--rayon); padding: 1.2rem 1.4rem; position: sticky; top: 90px; }
.recap h2 { margin-top: 0; font-size: 1.35rem; }
.recap ul { list-style: none; padding: 0; margin: 0 0 .6rem; }
.recap li, .recap-ligne { display: flex; justify-content: space-between; gap: 1rem; padding: .35rem 0; margin: 0; }
.recap-total { border-top: 2px solid var(--trait); margin-top: .4rem; padding-top: .7rem !important; font-weight: 700; font-size: 1.15rem; }
@media (max-width: 820px) { .commande-grille { grid-template-columns: 1fr; } .recap { position: static; order: -1; } }

/* Paiement */
.paiement-bloc { border-radius: var(--rayon); padding: 1.2rem 1.4rem; background: var(--surface); border-left: 8px solid var(--mtn); margin: 1.5rem 0; }
.paiement-airtel { border-left-color: var(--airtel); }
.paiement-bloc h2 { margin-top: 0; }
.paiement-etapes li { margin-bottom: .5rem; }
.gros { font-size: 1.25rem; white-space: nowrap; }

/* Statuts */
.statut { display: inline-block; padding: .25rem .7rem; border-radius: 999px; font-weight: 600; font-size: .9rem; background: var(--surface); color: var(--foret); }
.statut-attente_paiement { background: #fff3cd; color: #6b4e00; }
.statut-paiement_declare { background: #ffe3b3; color: #7a3d00; }
.statut-payee, .statut-preparation { background: #e1efcf; color: var(--vert-fonce); }
.statut-livraison, .statut-prete { background: #d5e8f5; color: #1d4b6b; }
.statut-livree { background: var(--foret); color: #fff; }
.statut-annulee { background: #fbeceb; color: var(--erreur); }

.frise { list-style: none; padding: 0; margin: 1.5rem 0; border-left: 3px solid var(--trait); }
.frise li { position: relative; padding: .45rem 0 .45rem 1.4rem; color: var(--doux); }
.frise li::before { content: ""; position: absolute; left: -9px; top: .75rem; width: 15px; height: 15px; border-radius: 50%; background: #fff; border: 3px solid var(--trait); }
.frise li.fait { color: var(--texte); }
.frise li.fait::before { background: var(--feuille); border-color: var(--feuille); }
.frise li.en-cours { color: var(--foret); font-weight: 700; }
.frise li.en-cours::before { background: var(--vert); border-color: var(--vert); box-shadow: 0 0 0 4px #dcebc8; }

/* Page texte */
.page-texte { max-width: 68ch; margin-bottom: 3rem; }
.page-texte p { line-height: 1.7; }
.chapeau { font-size: 1.2rem; color: var(--doux); }

/* Pied de page */
.pied { background: var(--surface); margin-top: 3rem; padding: 2.5rem 0 1rem; font-size: .95rem; }
.pied-grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.5rem; }
.pied h2 { font-size: 1.1rem; margin: 0 0 .4rem; }
.pied-logo { border-radius: 50%; }
.pied-bas { color: var(--doux); font-size: .85rem; border-top: 1px solid var(--trait); padding-top: 1rem; margin-top: 1.5rem; }
.whatsapp-flottant { position: fixed; right: 1rem; bottom: 1rem; width: 56px; height: 56px; border-radius: 50%; background: #1FA855; display: grid; place-items: center; box-shadow: 0 4px 12px rgba(0,0,0,.25); z-index: 6; }
.whatsapp-flottant:hover { background: #178a45; }

/* Espace de gestion */
.admin-contenu { padding-bottom: 3rem; }
.admin .nav-admin { margin-left: auto; }
.tableau-bord { display: flex; flex-wrap: wrap; gap: 1rem 2.5rem; padding: 1rem 1.4rem; background: var(--surface); border-radius: var(--rayon); }
.tableau-bord p { margin: 0; }
.tableau-bord strong { display: block; font-family: var(--serif); font-weight: 400; font-size: 1.6rem; color: var(--foret); }
.filtres { display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: center; margin: 1.5rem 0 1rem; }
.filtres a { text-decoration: none; padding: .3rem .1rem; border-bottom: 2px solid transparent; font-weight: 500; }
.filtres a[aria-current] { border-bottom-color: var(--vert); color: var(--foret); }
.filtres input { width: auto; flex: 1; min-width: 12rem; }
.defile { overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; margin: 1rem 0; }
.table th, .table td { text-align: left; padding: .6rem .7rem; border-bottom: 1px solid var(--trait); vertical-align: top; }
.table thead th { font-size: .88rem; color: var(--doux); font-weight: 600; }
.table tfoot td, .table tfoot th { border-bottom: 0; }
.champ-court { width: 7rem; }
.admin-grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.2rem; }
.carte { border: 1.5px solid var(--trait); border-radius: var(--rayon); padding: 1rem 1.3rem; margin: 1rem 0; }
.carte h2 { margin-top: 0; font-size: 1.25rem; }
.carte-alerte { border-color: #e6a23c; background: #fff8ec; }
.note { font-style: italic; color: var(--doux); }
.boutons-whatsapp { display: flex; flex-wrap: wrap; gap: .5rem; }

@media print {
  .entete, .nav, .filtres, form, .boutons-whatsapp, .whatsapp-flottant, .pied { display: none !important; }
  .carte { border: 1px solid #999; }
}

/* ===== Version 2 : diaporama, promotions, avis, tableau de bord ===== */

/* Diaporama */
.carrousel { position: relative; overflow: hidden; background: var(--foret); color: #e9f1df; }
.carrousel-piste { display: flex; transition: transform .6s cubic-bezier(.4, 0, .2, 1); }
.diapo { flex: 0 0 100%; min-height: 420px; display: flex; align-items: flex-end; padding-top: 2.5rem; }
.diapo-grille { display: grid; grid-template-columns: 1.15fr 1fr; gap: 2rem; align-items: end; width: min(1120px, 100% - 2.5rem); }
.diapo-texte { padding-bottom: 4.5rem; }
.diapo h1, .diapo h2 { color: #fff; margin-top: 0; max-width: 18ch; }
.diapo h2 { font-size: clamp(1.9rem, 4.5vw, 2.8rem); margin-bottom: .6rem; }
.diapo h2 .format { color: #cfe0b4; font-size: 1rem; }
.diapo p { max-width: 50ch; }
.diapo-produit { background: linear-gradient(110deg, var(--foret) 45%, color-mix(in srgb, var(--teinte) 70%, var(--foret)) 100%); }
.diapo-etiquette { display: inline-block; background: var(--feuille); color: var(--foret); font-weight: 700; padding: .25rem .8rem; border-radius: 999px; margin: 0 0 1rem; }
.diapo-prix { font-family: var(--serif); font-size: 1.8rem; color: #fff; margin: .4rem 0 1.2rem; }
.diapo-prix .prix-barre { font-size: 1.1rem; color: #cfe0b4; }
.diapo-ajout .bouton { background: var(--feuille); color: var(--foret); }
.diapo-ajout .bouton:hover { background: #a3c957; }
.diapo-visuel { display: flex; justify-content: center; align-items: flex-end; height: 100%; }
.diapo-image { display: flex; justify-content: center; align-items: flex-end; width: 100%; max-width: 320px; aspect-ratio: 1; }
.diapo-image svg { height: 100%; width: auto; filter: drop-shadow(0 12px 14px rgba(0,0,0,.35)); }
img.diapo-image { object-fit: cover; border-radius: 12px 12px 0 0; }
.carrousel-commandes { position: absolute; left: 50%; transform: translateX(-50%); bottom: 1rem; display: flex; align-items: center; gap: .6rem; }
.carrousel-fleche, .carrousel-pause { background: rgba(255,255,255,.12); color: #fff; border: 1px solid rgba(255,255,255,.3); border-radius: 999px; font: inherit; cursor: pointer; }
.carrousel-fleche { width: 2.2rem; height: 2.2rem; font-size: 1.4rem; line-height: 1; }
.carrousel-pause { padding: .3rem .8rem; font-size: .85rem; margin-left: auto; }
.carrousel-fleche:hover, .carrousel-pause:hover { background: rgba(255,255,255,.25); }
.carrousel-points { display: flex; gap: .45rem; }
.carrousel-points button { width: .7rem; height: .7rem; padding: 0; border-radius: 999px; border: 0; background: rgba(255,255,255,.4); cursor: pointer; transition: width .3s; }
.carrousel-points button[aria-selected="true"] { width: 1.8rem; background: var(--feuille); }
@media (max-width: 760px) {
  .diapo { min-height: 0; padding-top: 1.8rem; }
  .diapo-grille { grid-template-columns: 1fr; gap: .5rem; }
  .diapo-texte { padding-bottom: .5rem; }
  .diapo-visuel { order: -1; }
  .diapo-image { max-width: 170px; }
  .diapo-marque .etagere { margin-bottom: 4rem; }
  .diapo-produit .diapo-texte { padding-bottom: 4.2rem; }
}

/* Bandeau de confiance */
.bandeau-confiance { background: var(--surface); border-bottom: 1px solid var(--trait); }
.bandeau-confiance ul { list-style: none; margin: 0 auto; padding: .9rem 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: .4rem 1.5rem; font-size: .95rem; color: var(--doux); }
.bandeau-confiance strong { color: var(--foret); }

/* Prix et promotions */
.produit-image { position: relative; }
.badge-promo { position: absolute; top: .6rem; left: .6rem; background: #B5122E; color: #fff; font-weight: 700; padding: .2rem .6rem; border-radius: 6px; font-size: .9rem; }
.prix-barre { font-family: var(--sans); font-size: .95rem; color: var(--doux); margin-left: .3rem; }
.produit-prix .prix-actuel { color: var(--foret); }

/* Avis */
.etoiles { color: #E0A100; letter-spacing: .08em; font-size: 1.05rem; white-space: nowrap; }
.etoiles-vides { color: #D6DFC9; }
.avis-section { margin: 3rem 0 1rem; }
.avis-entete { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .5rem 2rem; }
.avis-moyenne { margin: 0; }
.avis-liste { list-style: none; padding: 0; margin: 1rem 0 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.2rem; }
.avis-liste li { border-left: 4px solid var(--feuille); padding: .2rem 0 .2rem 1.1rem; }
.avis-liste blockquote, .avis-texte { margin: .5rem 0; font-size: 1.02rem; line-height: 1.6; }
.avis-auteur { margin: 0; font-weight: 600; color: var(--foret); }
.avis-verifie { font-weight: 500; font-size: .82rem; color: var(--vert); background: var(--surface); padding: .1rem .5rem; border-radius: 999px; margin-left: .3rem; }
.avis-reponse { font-size: .93rem; color: var(--doux); background: var(--surface); padding: .6rem .8rem; border-radius: 8px; margin: .6rem 0 0; }

/* Notation par étoiles (formulaire) */
.notation { display: inline-flex; flex-direction: row-reverse; gap: .2rem; margin: .4rem 0 0; }
.notation legend { width: 100%; font-family: var(--sans); font-size: 1rem; font-weight: 600; color: var(--texte); }
.notation input { position: absolute; opacity: 0; width: 1px; }
.notation label { font-size: 2rem; line-height: 1; color: #D6DFC9; cursor: pointer; margin: 0 !important; }
.notation label:hover, .notation label:hover ~ label, .notation input:checked ~ label { color: #E0A100; }
.notation input:focus-visible + label { outline: 3px solid var(--feuille); border-radius: 4px; }

/* Tableau de bord */
.pastille-alerte { background: #E6A23C; color: #1E3B22; font-weight: 700; }
.message-alerte { background: #fff8ec; border-left-color: #E6A23C; }
.tdb-entete { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; }
.tdb-periode { display: flex; align-items: center; gap: .6rem; }
.tdb-periode label { font-weight: 600; }
.tdb-periode select { width: auto; }
.indicateurs { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 1rem; margin: 1.2rem 0; }
.indicateur { background: var(--surface); border-radius: var(--rayon); padding: 1rem 1.2rem; }
.indicateur p { margin: 0 0 .3rem; color: var(--doux); font-weight: 500; }
.indicateur strong { display: block; font-family: var(--serif); font-weight: 400; font-size: 1.7rem; color: var(--foret); line-height: 1.2; }
.indicateur span { font-size: .88rem; color: var(--doux); }
.indicateur-principal { background: var(--foret); }
.indicateur-principal p, .indicateur-principal span { color: #cfe0b4; }
.indicateur-principal strong { color: #fff; font-size: 2rem; }
.indicateur .hausse { color: #b7e07a; }
.indicateur .baisse { color: #ffb4a8; }
.graphiques { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 1.2rem; }
.graphique-large { grid-column: 1 / -1; }
.zone-graphique { position: relative; height: 260px; }
.graphique-large .zone-graphique { height: 300px; }
@media (max-width: 820px) { .graphiques { grid-template-columns: 1fr; } }
.repartition-notes p { display: grid; grid-template-columns: 2.5rem 1fr 2rem; align-items: center; gap: .8rem; margin: .3rem 0; }
.jauge { height: .6rem; background: var(--trait); border-radius: 999px; overflow: hidden; }
.jauge span { display: block; height: 100%; background: #E0A100; }

/* ===== Version 3 : équipe, rôles, livraisons, photos ===== */
.qui-suis-je { text-align: right; font-size: .9rem; color: var(--doux); margin-top: .6rem; margin-bottom: 0; }
.role { display: inline-block; font-size: .8rem; font-weight: 700; padding: .12rem .55rem; border-radius: 999px; white-space: nowrap; }
.role-admin { background: var(--foret); color: #fff; }
.role-boutiquier { background: #e1efcf; color: var(--vert-fonce); }
.role-livreur { background: #d5e8f5; color: #1d4b6b; }
.roles-legende { background: var(--surface); border-radius: var(--rayon); padding: .6rem 1.2rem; margin-bottom: 1rem; }
.roles-legende p { margin: .4rem 0; font-size: .95rem; }
.ligne-inactive td { opacity: .55; }
.champs-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 0 1.2rem; }
.form-membre h2 .aide { font-family: var(--sans); font-size: .9rem; }
.vignette { display: block; width: 52px; height: 52px; border-radius: 8px; object-fit: cover; }
.vignette-vide { opacity: .35; }
.table-produits td { vertical-align: middle; }
.photo-edition { display: grid; grid-template-columns: 220px 1fr; gap: 1.2rem; align-items: start; margin-bottom: 1rem; }
.photo-actuelle { aspect-ratio: 4 / 3; border-radius: var(--rayon); background: color-mix(in srgb, var(--teinte) 14%, #fff); display: grid; place-items: center; overflow: hidden; padding: .6rem; text-align: center; }
.photo-actuelle img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 600px) { .photo-edition { grid-template-columns: 1fr; } }
.course h2 { margin: .3rem 0; }
.course-tete { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin: 0; }
.course-adresse { font-size: 1.1rem; margin: 0 0 .5rem; }
.course-colis { margin: .6rem 0; padding-left: 1.2rem; }
.course-en-route { border-color: #3B7EA1; box-shadow: inset 6px 0 0 #3B7EA1; }

/* ===== Version 4 : comptes clients, stock, application ===== */
.choix-compte { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.2rem; margin: 1rem 0 3rem; }
.choix-compte > div { border: 1.5px solid var(--trait); border-radius: var(--rayon); padding: 1rem 1.3rem; }
.choix-compte h2 { margin-top: 0; font-size: 1.3rem; }
.choix-compte .bouton { margin: .2rem .4rem .2rem 0; }
.encart-compte { background: var(--surface); border-radius: var(--rayon); padding: 1rem 1.2rem; }
.si-compte { display: none; }
.avec-compte .si-compte { display: block; }
.ligne-alerte { grid-column: 2 / -1; color: var(--erreur); font-size: .9rem; font-weight: 500; }
.stock-faible { margin: 0 0 .5rem; color: #B5122E; font-weight: 600; font-size: .92rem; }
.pastille-stock { display: inline-block; min-width: 2.4rem; text-align: center; padding: .15rem .5rem; border-radius: 999px; font-weight: 700; }
.stock-ok { background: #e1efcf; color: var(--vert-fonce); }
.stock-bas { background: #ffe3b3; color: #7a3d00; }
.stock-zero { background: #fbeceb; color: var(--erreur); }
.champ-libelle { min-width: 11rem; }
.champ-mini { width: 4.5rem; }
.hausse-texte { color: var(--vert); font-weight: 700; }
.baisse-texte { color: var(--erreur); font-weight: 700; }
.bandeau-app { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .5rem 1.5rem; border-top: 1px solid var(--trait); margin-top: 1.5rem; padding-top: 1rem; }
.bandeau-app p { margin: 0; }
.app-ok { display: none; }
.app-installee .app-ok { display: block; color: var(--vert); font-weight: 600; }
.app-installee .bandeau-app { display: none; }
.app-installee .whatsapp-flottant { bottom: calc(1rem + env(safe-area-inset-bottom, 0px)); }
[hidden] { display: none !important; }

/* ===== Version 6 : caisse du comptoir ===== */
.caisse-etat { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; margin: .5rem 0 1rem; }
.reseau { font-weight: 700; padding: .25rem .8rem; border-radius: 999px; }
.reseau::before { content: "● "; }
.reseau-ok { background: #e1efcf; color: var(--vert-fonce); }
.reseau-ko { background: #fbeceb; color: var(--erreur); }
.caisse-grille { display: grid; grid-template-columns: 1.5fr 1fr; gap: 1.2rem; align-items: start; }
@media (max-width: 860px) { .caisse-grille { grid-template-columns: 1fr; } }
.caisse-produits input[type=search] { margin-bottom: .8rem; }
.tuiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: .6rem; }
.tuile { position: relative; display: flex; flex-direction: column; text-align: left; gap: .2rem; padding: 0 0 .5rem; border: 1.5px solid var(--trait); border-radius: 10px; background: #fff; cursor: pointer; font: inherit; overflow: hidden; min-height: 150px; }
.tuile:hover, .tuile:focus-visible { border-color: var(--vert); }
.tuile:active { transform: scale(.98); }
.tuile img, .tuile-couleur { display: block; width: 100%; height: 76px; object-fit: cover; }
.tuile-couleur { opacity: .85; }
.tuile-nom { padding: 0 .5rem; font-weight: 600; line-height: 1.25; font-size: .95rem; }
.tuile-nom small { color: var(--doux); font-weight: 500; }
.tuile-prix { padding: 0 .5rem; font-family: var(--serif); color: var(--foret); }
.tuile-stock { position: absolute; top: .35rem; right: .35rem; background: rgba(255,255,255,.92); border-radius: 999px; padding: 0 .45rem; font-size: .8rem; font-weight: 700; color: var(--vert-fonce); }
.tuile-stock.zero { color: var(--erreur); }
.tuile-off { opacity: .5; }
.caisse-ticket { position: sticky; top: 84px; border: 1.5px solid var(--trait); border-radius: var(--rayon); padding: 1rem 1.1rem; background: #fff; }
.caisse-ticket h2 { margin: 0 0 .5rem; font-size: 1.3rem; }
.caisse-lignes { list-style: none; padding: 0; margin: 0; max-height: 38vh; overflow-y: auto; }
.caisse-lignes li { display: grid; grid-template-columns: 1fr auto auto; gap: .6rem; align-items: center; padding: .45rem 0; border-bottom: 1px solid var(--trait); }
.cl-nom small { color: var(--doux); }
.cl-nom .ligne-alerte { display: block; }
.cl-qte { display: inline-flex; align-items: center; gap: .4rem; }
.cl-qte button { width: 2rem; height: 2rem; border-radius: 50%; border: 1.5px solid var(--vert); background: #fff; color: var(--vert); font-size: 1.1rem; cursor: pointer; }
.cl-qte b { min-width: 1.5rem; text-align: center; }
.cl-total { font-weight: 600; min-width: 5.5rem; text-align: right; }
.caisse-total { display: flex; justify-content: space-between; font-size: 1.3rem; margin: .8rem 0; }
.caisse-total strong { font-family: var(--serif); font-weight: 400; font-size: 1.7rem; color: var(--foret); }
.caisse-paiement { margin-bottom: .8rem; }
.choix-paiement { display: grid; grid-template-columns: repeat(3, 1fr); gap: .4rem; margin: .4rem 0 .6rem; }
.choix-paiement .option { justify-content: center; padding: .6rem .3rem; font-size: .92rem; }
.billets { display: flex; flex-wrap: wrap; gap: .4rem; margin: .5rem 0; }
.billets .bouton { padding: .4rem .7rem; font-size: .9rem; }
.rendu { font-size: 1.1rem; margin: .3rem 0; }
.rendu.manque strong { color: var(--erreur); }
.caisse-client { margin: .5rem 0; }
.caisse-client summary { cursor: pointer; color: var(--vert); font-weight: 600; }
.caisse-jour { margin-top: 1.5rem; }
.fenetre-recu { border: 0; border-radius: 12px; padding: 1rem; max-width: 92vw; box-shadow: 0 10px 40px rgba(0,0,0,.3); }
.fenetre-recu::backdrop { background: rgba(0,0,0,.45); }
#zone-impression { display: none; }
.ticket-caisse { width: 76mm; max-width: 100%; margin: 0 auto; font-family: "Segoe UI", Arial, sans-serif; font-size: 12.5px; line-height: 1.4; color: #111; }
.ticket-caisse header { text-align: center; border-bottom: 1px dashed #999; padding-bottom: 2mm; }
.ticket-caisse header img { width: 22mm; height: 22mm; }
.ticket-caisse h1 { font-family: Georgia, serif; font-size: 16px; margin: 1mm 0; color: #1E3B22; }
.ticket-caisse header p { margin: .3mm 0; font-size: 10.5px; color: #555; }
.ticket-caisse .t-titre { text-align: center; font-weight: 800; letter-spacing: .05em; margin: 2mm 0 0; }
.ticket-caisse .t-num { text-align: center; font-weight: 700; font-size: 14px; margin: 0 0 2mm; }
.ticket-caisse table { width: 100%; border-collapse: collapse; margin: 2mm 0; border-top: 1px dashed #999; border-bottom: 1px dashed #999; }
.ticket-caisse td { padding: .7mm 0; vertical-align: top; }
.ticket-caisse td.n { text-align: right; white-space: nowrap; }
.ticket-caisse .detail { color: #555; font-size: 10.5px; }
.ticket-caisse .t-total td { font-weight: 800; font-size: 14px; padding-top: 1.5mm; }
.ticket-caisse p { margin: .8mm 0; }
.ticket-caisse .t-paye { text-align: center; border: 2.5px solid #1E3B22; color: #1E3B22; font-weight: 900; letter-spacing: .15em; font-size: 16px; width: 60%; margin: 2mm auto; transform: rotate(-3deg); }
.ticket-caisse footer { text-align: center; font-size: 11px; color: #555; border-top: 1px dashed #999; padding-top: 2mm; margin-top: 2mm; }
@media print {
  @page { size: 80mm auto; margin: 2mm; }
  body.impression-ticket > *:not(#zone-impression) { display: none !important; }
  body.impression-ticket #zone-impression { display: block !important; }
}

/* ===== Version 7 : étiquettes et scan ===== */
.code { font-family: ui-monospace, Consolas, monospace; letter-spacing: .03em; }
.planche { margin: 1rem 0; overflow-x: auto; }
.feuille { width: var(--larg); height: var(--haut-page); box-sizing: border-box; padding: var(--haut) 0 0 var(--gauche);
  display: grid; grid-template-columns: repeat(var(--cols), var(--l)); grid-auto-rows: var(--h); align-content: start;
  background: #fff; margin: 0 auto 1rem; box-shadow: 0 2px 10px rgba(0,0,0,.15); overflow: hidden; }
.etiquette { width: var(--l); height: var(--h); box-sizing: border-box; padding: 2mm 2.5mm; display: flex; gap: 2mm; align-items: center;
  position: relative; overflow: hidden; font-family: Arial, Helvetica, sans-serif; color: #000; outline: 1px dashed #cfd8c4; outline-offset: -1px; }
.et-texte { flex: 1; min-width: 0; display: flex; flex-direction: column; font-size: 8.5pt; line-height: 1.15; }
.et-texte strong { font-size: 9.5pt; }
.et-texte b { font-size: 10.5pt; margin-top: .5mm; }
.et-texte .ean { width: 100%; height: 13mm; margin-top: 1mm; }
.etiquette .qr { width: 17mm; height: 17mm; flex: none; }
.et-marque { position: absolute; right: 2mm; top: 1mm; font-size: 5.5pt; letter-spacing: .12em; color: #1E3B22; font-weight: 700; }
.code-texte { font-family: Consolas, monospace; font-size: 8pt; margin-top: 1mm; }
.etiquette.petite { padding: 1mm 1.5mm; gap: 1mm; }
.etiquette.petite .et-texte { font-size: 6pt; }
.etiquette.petite .et-texte strong { font-size: 6.5pt; }
.etiquette.petite .et-texte b { font-size: 7pt; }
.etiquette.petite .ean { height: 8.5mm; margin-top: .5mm; }
.etiquette.petite .qr { width: 15mm; height: 15mm; }
.etiquette.petite .et-marque { display: none; }
@media print {
  body.admin .entete, body.admin .qui-suis-je, .pas-imprime, body.admin .message { display: none !important; }
  body.admin .admin-contenu { width: auto; padding: 0; margin: 0; }
  body.admin { background: #fff; }
  .planche { margin: 0; overflow: visible; }
  .feuille { box-shadow: none; margin: 0; break-after: page; page-break-after: always; }
  .feuille:last-child { break-after: auto; page-break-after: auto; }
  .etiquette { outline: none; }
}
/* Scan à la caisse */
.scan-barre { display: flex; gap: .5rem; margin-bottom: .8rem; }
.scan-barre input { flex: 1; margin: 0 !important; }
.scan-barre .bouton { white-space: nowrap; }
.flash-scan { animation: flashScan .6s ease; }
@keyframes flashScan { from { background: #dcebc8; } to { background: #fff; } }
.fenetre-camera { border: 0; border-radius: 12px; padding: 1rem; width: min(480px, 94vw); }
.fenetre-camera video { width: 100%; border-radius: 8px; background: #000; aspect-ratio: 4 / 3; object-fit: cover; }
.fenetre-camera::backdrop { background: rgba(0,0,0,.6); }

/* ===== Version 8 : caisse sur téléphone et tablette ===== */
.barre-mobile, .fermer-ticket { display: none; }
.ticket-tete { display: flex; align-items: center; gap: .8rem; }
.role-caissier { background: #fde9c8; color: #7a4a00; }
@media (min-width: 700px) and (max-width: 860px) {
  .caisse-grille { grid-template-columns: 1.3fr 1fr; gap: .8rem; }
  .tuiles { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); }
}
@media (max-width: 699px) {
  .caisse { padding-bottom: 5.5rem; }
  .caisse-grille { display: block; }
  .tuiles { grid-template-columns: repeat(3, 1fr); gap: .45rem; }
  .tuile { min-height: 128px; }
  .tuile img, .tuile-couleur { height: 58px; }
  .tuile-nom { font-size: .85rem; }
  .caisse-etat { gap: .3rem .6rem; font-size: .9rem; }
  .caisse-etat .bouton { padding: .35rem .7rem; }
  .scan-barre { flex-wrap: wrap; }
  .scan-barre .bouton { width: 100%; }
  .caisse-ticket { display: none; }
  .ticket-ouvert .caisse-ticket { display: block; position: fixed; inset: 0; z-index: 30; border: 0; border-radius: 0; overflow-y: auto;
    padding: calc(.8rem + env(safe-area-inset-top, 0px)) 1rem calc(1.2rem + env(safe-area-inset-bottom, 0px)); }
  .ticket-ouvert .caisse-lignes { max-height: none; }
  .ticket-ouvert .barre-mobile { display: none; }
  .fermer-ticket { display: inline-block; background: none; border: 0; color: var(--vert); font: 600 1rem var(--sans); padding: .4rem 0; cursor: pointer; }
  .barre-mobile { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 25; align-items: center; justify-content: space-between; gap: 1rem;
    padding: .7rem 1rem calc(.7rem + env(safe-area-inset-bottom, 0px)); background: var(--foret); color: #fff; box-shadow: 0 -4px 14px rgba(0,0,0,.2); }
  .barre-mobile .bouton { background: var(--feuille); color: var(--foret); }
  .barre-mobile:not(.barre-pleine) .bouton { opacity: .7; }
  .caisse-jour .table { font-size: .9rem; }
  .fenetre-recu { width: 100vw; max-width: 100vw; max-height: 100dvh; margin: 0; border-radius: 0; overflow-y: auto; }
}
.lien-equipe { float: right; color: var(--doux); font-size: .85rem; }
@media (max-width: 600px) { .lien-equipe { float: none; display: block; margin-top: .4rem; } }

/* ===== Version 9 : production ===== */
.onglets { display: flex; flex-wrap: wrap; gap: .3rem; border-bottom: 2px solid var(--trait); margin: .6rem 0 1rem; }
.onglets a { padding: .55rem .9rem; text-decoration: none; font-weight: 600; color: var(--doux); border-bottom: 3px solid transparent; margin-bottom: -2px; }
.onglets a[aria-current] { color: var(--foret); border-bottom-color: var(--vert); }
.periode { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1.2rem; background: var(--surface); border-radius: var(--rayon); padding: .7rem 1rem; margin: 1rem 0; }
.periode-types { display: flex; gap: .2rem; background: #fff; border-radius: 999px; padding: .2rem; }
.periode-types a { padding: .3rem .8rem; border-radius: 999px; text-decoration: none; font-weight: 600; color: var(--doux); }
.periode-types a[aria-current] { background: var(--foret); color: #fff; }
.periode-nav { display: flex; align-items: center; gap: .6rem; }
.periode-nav a { text-decoration: none; font-size: 1.4rem; line-height: 1; padding: 0 .4rem; }
.periode-nav strong { font-family: var(--serif); font-weight: 400; font-size: 1.15rem; color: var(--foret); }
.periode-libre { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin-left: auto; }
.periode-libre label { display: flex; align-items: center; gap: .3rem; font-size: .9rem; }
.periode-libre input { width: auto; padding: .3rem .4rem; }
.periode-libre .bouton { padding: .35rem .8rem; }
.ligne-lot { display: grid; grid-template-columns: 2fr 1fr 1.6fr auto; gap: .2rem .8rem; align-items: end; padding: .5rem 0; border-bottom: 1px dashed var(--trait); }
#lignes-sortie .ligne-lot { grid-template-columns: 2fr 1fr 1fr auto; }
.ligne-lot label { margin: 0 !important; font-size: .9rem; }
.ligne-lot .info-ligne { grid-column: 1 / -2; font-size: .88rem; color: var(--doux); }
.ligne-lot .alerte-ligne { color: #B5122E; }
.retirer-ligne { grid-row: 1; grid-column: -2; align-self: end; width: 2.2rem; height: 2.4rem; border: 1.5px solid var(--trait); background: #fff; border-radius: 8px; color: var(--erreur); font-size: 1.2rem; cursor: pointer; }
@media (max-width: 700px) { .ligne-lot, #lignes-sortie .ligne-lot { grid-template-columns: 1fr 1fr; } .retirer-ligne { grid-column: 2; grid-row: auto; justify-self: end; } }
.resultat-lot { border-color: var(--vert); }
.calcul-achat { color: var(--vert-fonce); font-weight: 600; min-height: 1.4em; }
.table-rentabilite td, .table-rentabilite th { white-space: nowrap; }
.table-rentabilite td:first-child { white-space: normal; min-width: 10rem; }
.rent-perte td:first-child { box-shadow: inset 5px 0 0 var(--erreur); }
.rent-sous-cible td:first-child { box-shadow: inset 5px 0 0 #E6A23C; }
.rent-ok td:first-child { box-shadow: inset 5px 0 0 var(--feuille); }
.jauge-marge { display: inline-block; width: 3rem; height: .5rem; border-radius: 999px; background: linear-gradient(90deg, var(--vert) var(--v), var(--trait) var(--v)); vertical-align: middle; }
.lien-conseil { background: none; border: 0; padding: 0; color: var(--vert); font: inherit; font-weight: 700; text-decoration: underline dotted; cursor: pointer; }
.legende-rent { font-size: .88rem; color: var(--doux); display: flex; flex-wrap: wrap; gap: .3rem 1rem; align-items: center; }
.rent-pastille { display: inline-block; width: .8rem; height: .8rem; border-radius: 3px; margin-right: .2rem; vertical-align: middle; }
.rent-pastille.ok { background: var(--feuille); } .rent-pastille.sous-cible { background: #E6A23C; } .rent-pastille.perte { background: var(--erreur); }
.simulateur { border-color: #E6A23C; }

/* ===== Version 10 : Super administrateur ===== */
.role-superadmin { background: #6b1e3a; color: #fff; }
.journal-detail { font-size: .9rem; max-width: 46rem; white-space: normal; }
.apercu-masse { border-color: var(--vert); box-shadow: 0 0 0 3px #dcebc8; }
.grille-produits-admin td { padding: .35rem .3rem; }
.grille-produits-admin input, .grille-produits-admin select { padding: .35rem .4rem; font-size: .92rem; }
.grille-produits-admin .champ-libelle { min-width: 12rem; }
.ligne-nouveau td { background: var(--surface); }
/* Étiquettes « code seul » (sans nom ni prix, pour les revendeurs) */
.etiquette.code-seul { justify-content: center; gap: 3mm; padding: 2mm; }
.etiquette.code-seul .ean { width: auto; height: 100%; max-width: 100%; margin: 0; }
.etiquette.code-seul .qr { width: auto; height: 100%; max-height: 30mm; }
.etiquette.code-seul .ean + .qr { height: 80%; }
.etiquette.code-seul .code-texte { font-size: 11pt; }

/* ===== Version 12 : Impressions (rapports A4) ===== */
.lien-impression { text-align: right; margin: -.4rem 0 .6rem; }
.lien-impression a { font-weight: 600; text-decoration: none; }
.choix-rapports { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: .8rem; margin: 1rem 0; }
.carte-rapport { display: flex; flex-direction: column; gap: .3rem; padding: .9rem 1rem; border: 1.5px solid var(--trait); border-radius: var(--rayon); text-decoration: none; color: var(--texte); background: #fff; }
.carte-rapport strong { font-family: var(--serif); font-weight: 400; font-size: 1.15rem; color: var(--foret); }
.carte-rapport span { font-size: .9rem; color: var(--doux); }
.carte-rapport:hover, .carte-rapport.actif { border-color: var(--vert); box-shadow: inset 0 0 0 1px var(--vert); }
.rapport { background: #fff; max-width: 210mm; margin: 1rem auto 2rem; padding: 14mm 12mm; box-shadow: 0 2px 14px rgba(0,0,0,.12); font-family: "Segoe UI", Arial, sans-serif; font-size: 10.5pt; color: #111; line-height: 1.4; }
.rapport h1, .rapport h2 { font-family: Georgia, serif; color: #1E3B22; }
.rapport-entete { display: grid; grid-template-columns: auto 1fr auto; gap: 5mm; align-items: center; border-bottom: 2.5px solid #1E3B22; padding-bottom: 4mm; margin-bottom: 5mm; }
.rapport-entete img { width: 22mm; height: 22mm; }
.rapport-entete p { margin: .5mm 0; font-size: 8.5pt; color: #444; }
.rapport-societe { font-family: Georgia, serif; font-size: 14pt !important; color: #1E3B22 !important; font-weight: 700; letter-spacing: .04em; }
.rapport-titre { text-align: right; }
.rapport-titre h1 { font-size: 15pt; margin: 0 0 1mm; }
.rapport-titre p { font-size: 10pt !important; color: #111 !important; }
.rapport h2 { font-size: 12pt; margin: 6mm 0 2mm; border-bottom: 1px solid #ccd5c2; padding-bottom: 1mm; }
.rapport-chiffres { display: grid; grid-template-columns: repeat(auto-fit, minmax(32mm, 1fr)); gap: 3mm; margin: 2mm 0 4mm; }
.rapport-chiffres div { border: 1px solid #ccd5c2; border-radius: 2mm; padding: 2.5mm 3mm; display: flex; flex-direction: column; break-inside: avoid; }
.rapport-chiffres span { font-size: 8.5pt; color: #555; }
.rapport-chiffres strong { font-size: 13pt; color: #1E3B22; }
.rapport-chiffres small { font-size: 8pt; color: #555; }
.rapport-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 6mm; }
.table-rapport { width: 100%; border-collapse: collapse; font-size: 9.5pt; }
.table-rapport th { background: #1E3B22; color: #fff; font-weight: 600; text-align: left; padding: 1.6mm 2mm; font-size: 8.5pt; }
.table-rapport td { padding: 1.3mm 2mm; border-bottom: .5px solid #d9dfd2; vertical-align: top; }
.table-rapport tbody tr:nth-child(even) td { background: #f6f8f2; }
.table-rapport .n, .table-rapport th:not(:first-child) { text-align: right; white-space: nowrap; }
.table-rapport tfoot td { font-weight: 700; border-top: 1.5px solid #1E3B22; background: #eef3e6; }
.table-rapport tr { break-inside: avoid; }
.table-rapport .sous-titre td { background: #e1ead6 !important; font-weight: 700; color: #1E3B22; font-size: 8.5pt; text-transform: uppercase; letter-spacing: .04em; }
.ligne-alerte-rapport td { color: #8a1c1c; }
.rapport-note { font-size: 8.5pt; color: #555; margin: 1.5mm 0 0; }
.rapport-alertes { margin: 0; padding-left: 5mm; }
.rapport-alertes li { margin: 1mm 0; }
.rapport-pied { margin-top: 8mm; border-top: 1px solid #ccd5c2; padding-top: 3mm; font-size: 8.5pt; color: #555; }
.rapport-signatures { display: grid; grid-template-columns: 1fr 1fr; gap: 10mm; margin-bottom: 4mm; color: #111; }
.rapport-signatures div { border: 1px solid #ccd5c2; min-height: 22mm; padding: 2mm 3mm; }
@media (max-width: 760px) { .rapport { padding: 6mm 4mm; } .rapport-2col, .rapport-entete { grid-template-columns: 1fr; } .rapport-titre { text-align: left; } }
@media print {
  @page { size: A4; margin: 12mm 10mm 14mm; @bottom-right { content: "Page " counter(page) " / " counter(pages); font-size: 8pt; color: #666; } }
  .rapport { box-shadow: none; margin: 0; padding: 0; max-width: none; }
  .rapport section { break-inside: auto; }
  .rapport h2 { break-after: avoid; }
  .lien-impression, .choix-rapports, .periode { display: none !important; }
}
/* Accès de l’équipe */
.panneau-acces { border-color: var(--vert); box-shadow: 0 0 0 3px #dcebc8; }
.acces-details { display: grid; grid-template-columns: max-content 1fr; gap: .4rem 1rem; margin: .5rem 0 1rem; }
.acces-details dt { color: var(--doux); }
.acces-details dd { margin: 0; font-weight: 600; }
.mdp-temp { font-size: 1.3rem; letter-spacing: .12em; background: var(--surface); padding: .15rem .6rem; border-radius: 6px; }

/* ===== Version 14 : inventaires ===== */
.progression { height: .7rem; background: var(--trait); border-radius: 999px; overflow: hidden; margin: .3rem 0 .6rem; }
.progression span { display: block; height: 100%; background: var(--vert); transition: width .3s; }
.inventaire-actif { border-color: #E6A23C; }
.inventaire-barre { position: sticky; top: 72px; z-index: 3; background: #fff; }
.inventaire-barre select { width: auto; }
.table-inventaire td { vertical-align: middle; }
.sous-titre-inv td { background: var(--surface); font-weight: 700; color: var(--foret); font-size: .9rem; text-transform: uppercase; letter-spacing: .04em; }
.compteur { display: inline-flex; align-items: center; gap: .3rem; }
.compteur button { width: 2.2rem; height: 2.2rem; border-radius: 50%; border: 1.5px solid var(--vert); background: #fff; color: var(--vert); font-size: 1.2rem; cursor: pointer; }
.compteur .compte { width: 5rem; text-align: center; font-weight: 700; font-size: 1.05rem; }
.inv-compte td:first-child { box-shadow: inset 4px 0 0 var(--feuille); }
.inv-ecart td:first-child { box-shadow: inset 4px 0 0 #E6A23C; }
.table-inventaire .motif { min-width: 10rem; }
.table-inventaire .note { min-width: 9rem; }
.etat-ligne { color: var(--vert); font-weight: 700; width: 1.5rem; }
.validation-inv { border-color: var(--vert); }
.fiche-comptage .case-comptage { width: 22mm; border: 1px solid #999 !important; }
.fiche-comptage .case-obs { width: 45mm; border-bottom: 1px solid #999 !important; }
.fiche-comptage td { height: 8mm; }
@media (max-width: 700px) { .inventaire-barre { top: 0; } .table-inventaire .note { display: none; } }

/* ===== Version 15 : espace de gestion sur téléphone ===== */
.nav-equipe { display: none; }
.app-installee .nav-equipe { display: inline; }           /* dans l’application installée, l’accès équipe est dans le menu */
.menu-admin { display: none; margin-left: auto; background: var(--feuille); color: var(--foret); border: 0; border-radius: 999px; padding: .5rem 1rem; font: 700 .95rem var(--sans); cursor: pointer; }
.installer-pro { margin-top: 1.5rem; }
@media (max-width: 860px) {
  .admin .entete-ligne { flex-wrap: wrap; padding: .4rem 0; }
  .admin .menu-admin { display: inline-block; }
  .admin .nav-admin { display: none; order: 3; width: 100%; flex-direction: column; gap: 0; margin: .4rem 0 .2rem; padding: .3rem 0; border-top: 1px solid rgba(255,255,255,.15); max-height: 70vh; overflow-y: auto; }
  .admin .nav-admin.ouvert { display: flex; }
  .admin .nav-admin a { padding: .75rem .4rem; border-bottom: 1px solid rgba(255,255,255,.08); font-size: 1.05rem; }
  .admin .nav-admin a[aria-current] { border-bottom-color: var(--feuille); background: rgba(255,255,255,.06); }
  .admin .qui-suis-je { text-align: left; }
  .admin .admin-contenu h1 { font-size: 1.7rem; }
  .admin .indicateurs { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 420px) { .admin .indicateurs { grid-template-columns: 1fr; } }

/* ===== Version 16 : centre d’alertes ===== */
.pastille-critique { background: #C62828; color: #fff; font-weight: 700; }
.direct { margin: 0; color: var(--doux); display: flex; align-items: center; gap: .4rem; }
.point-direct { width: .7rem; height: .7rem; border-radius: 50%; background: #2E9E44; box-shadow: 0 0 0 0 rgba(46,158,68,.6); animation: pouls 2s infinite; }
@keyframes pouls { 70% { box-shadow: 0 0 0 8px rgba(46,158,68,0); } 100% { box-shadow: 0 0 0 0 rgba(46,158,68,0); } }
@media (prefers-reduced-motion: reduce) { .point-direct { animation: none; } }
.resume-alertes { display: grid; grid-template-columns: repeat(3, 1fr); gap: .8rem; margin: 1rem 0; }
.ra { border-radius: var(--rayon); padding: .8rem 1rem; display: flex; align-items: baseline; gap: .5rem; }
.ra strong { font-family: var(--serif); font-weight: 400; font-size: 2rem; }
.ra-critique { background: #fdecec; color: #8a1c1c; } .ra-attention { background: #fff3df; color: #7a4a00; } .ra-info { background: #e5f0f8; color: #1d4b6b; }
.alerte { border-left-width: 6px; }
.alerte-critique { border-left-color: #C62828; } .alerte-attention { border-left-color: #E6A23C; } .alerte-info { border-left-color: #3B7EA1; }
.alerte h2 { font-size: 1.15rem; display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.compte-alerte { background: var(--surface); border-radius: 999px; padding: 0 .6rem; font-family: var(--sans); font-size: .9rem; }
.liste-alerte { list-style: none; padding: 0; margin: 0; }
.liste-alerte li { padding: .55rem 0; border-bottom: 1px dashed var(--trait); line-height: 1.6; }
.liste-alerte li:last-child { border-bottom: 0; }
.actions-assist { display: inline-flex; flex-wrap: wrap; align-items: center; gap: .35rem; margin-left: .5rem; }
.bouton-mini { display: inline-block; padding: .2rem .65rem; border-radius: 999px; border: 1.5px solid var(--vert); color: var(--vert); text-decoration: none; font-size: .85rem; font-weight: 600; white-space: nowrap; }
.bouton-mini:hover { background: var(--surface); }
.bouton-wa { border-color: #1FA855; color: #fff; background: #1FA855; }
.bouton-wa:hover { background: #178a45; color: #fff; }
.deja-contacte { font-size: .82rem; color: var(--vert-fonce); background: #e1efcf; border-radius: 999px; padding: .1rem .55rem; }
.badge-urgent { background: #fdecec; color: #8a1c1c; border-radius: 999px; padding: .1rem .5rem; font-size: .8rem; font-weight: 700; }
.entonnoir { display: grid; grid-template-columns: repeat(5, 1fr); gap: .5rem; }
.etape-ent { background: var(--surface); border-radius: var(--rayon); padding: .7rem; text-align: center; display: flex; flex-direction: column; position: relative; }
.etape-ent strong { font-family: var(--serif); font-weight: 400; font-size: 1.8rem; color: var(--foret); }
.etape-ent span { font-size: .85rem; color: var(--doux); }
.etape-ent small { position: absolute; top: .3rem; left: .4rem; font-weight: 700; color: var(--vert); font-size: .8rem; }
@media (max-width: 700px) { .entonnoir { grid-template-columns: repeat(2, 1fr); } .resume-alertes { grid-template-columns: 1fr; } }
.ligne-difficulte td { background: #fff6f0; }
.equipe-presence { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: .6rem; }
.membre-presence { display: flex; gap: .6rem; align-items: center; padding: .5rem .7rem; border: 1px solid var(--trait); border-radius: var(--rayon); }
.membre-presence div { display: flex; flex-direction: column; }
.membre-presence small { color: var(--doux); }
.point-presence { width: .7rem; height: .7rem; border-radius: 50%; background: #bbb; flex: none; }
.membre-presence.present .point-presence { background: #2E9E44; }
/* Conditions de vente */
.conditions h2 { scroll-margin-top: 90px; }
.sommaire { display: flex; flex-wrap: wrap; gap: .3rem .9rem; background: var(--surface); border-radius: var(--rayon); padding: .8rem 1rem; font-size: .93rem; }
.mention-cgv { text-align: center; margin-top: .6rem; }
.pied-bas a { margin-left: .6rem; }

/* ===== Version 18 : chargés de suivi ===== */
.role-suivi { background: #e5dcf5; color: #4a2a80; }
.barre-suivi { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .6rem 1.2rem; align-items: center; background: var(--surface); border-radius: var(--rayon); padding: .7rem 1rem; margin-bottom: 1rem; }
.filtres-suivi { display: flex; flex-wrap: wrap; gap: .3rem .9rem; align-items: center; }
.filtres-suivi a { text-decoration: none; font-weight: 600; padding: .2rem 0; border-bottom: 2px solid transparent; }
.filtres-suivi a[aria-current] { border-bottom-color: var(--vert); color: var(--foret); }
.option-inline { display: inline-flex; align-items: center; gap: .3rem; font-size: .9rem; color: var(--doux); }
.permanence { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; font-size: .92rem; }
.permanence form { margin: 0; }
.liste-alerte li { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .4rem 1rem; }
.contenu-alerte { flex: 1 1 22rem; }
.suivi-ctrl { display: inline-flex; flex-wrap: wrap; gap: .3rem; align-items: center; margin: 0; }
.suivi-ctrl select, .suivi-ctrl input { width: auto; padding: .25rem .4rem; font-size: .85rem; }
.suivi-etat { font-size: .85rem; border-radius: 999px; padding: .15rem .6rem; }
.suivi-etat.pris { background: #fff3df; color: #7a4a00; }
.suivi-etat.pris-moi { background: #e5f0f8; color: #1d4b6b; font-weight: 600; }
.suivi-etat.resolu { background: #e1efcf; color: var(--vert-fonce); }
.ligne-prise { background: #fffaf2; }
.ligne-traitee { opacity: .7; }
.bouton-gris { border-color: #999; color: #555; }
button.bouton-mini { background: #fff; cursor: pointer; font-family: inherit; }

/* ===== Version 19 : Club PALOMA ===== */
.centre { text-align: center; }
.carte-fid { --c1: #2E6B1F; --c2: #1E3B22; border-radius: 18px; padding: 1.2rem 1.3rem; color: #fff; background: linear-gradient(135deg, var(--c1), var(--c2)); box-shadow: 0 10px 30px rgba(0,0,0,.25); margin: 1.2rem 0 .8rem; position: relative; overflow: hidden; }
.carte-fid::after { content: "🌿"; position: absolute; right: -10px; bottom: -24px; font-size: 7rem; opacity: .12; }
.carte-fid.niveau-fruit { --c1: #D9861A; --c2: #8A4B0B; }
.carte-fid.niveau-baobab { --c1: #6B4A2B; --c2: #2B1C10; }
.carte-fid-haut { display: flex; gap: .7rem; align-items: center; }
.carte-fid-haut img { border-radius: 50%; background: #fff; }
.carte-fid-haut div { display: flex; flex-direction: column; }
.carte-fid-haut strong { font-family: var(--serif); font-weight: 400; font-size: 1.3rem; }
.carte-fid-nom { font-size: 1.15rem; letter-spacing: .03em; margin: .9rem 0 .2rem; }
.carte-fid-points strong { font-family: var(--serif); font-weight: 400; font-size: 2.4rem; line-height: 1; }
.carte-fid-points span { display: block; opacity: .85; }
.carte-fid-codes { display: flex; gap: .8rem; align-items: center; background: #fff; border-radius: 12px; padding: .6rem; margin-top: .9rem; position: relative; z-index: 1; }
.carte-fid-qr { width: 96px; flex: none; }
.carte-fid-qr svg { width: 100%; display: block; }
.carte-fid-ean { flex: 1; height: 80px; }
.code-parrain { font-family: ui-monospace, Consolas, monospace; font-size: 1.2rem; background: var(--surface); padding: .1rem .5rem; border-radius: 6px; }
.resume-carte { display: flex; flex-direction: column; gap: .1rem; text-decoration: none; color: #fff; border-radius: 14px; padding: 1rem 1.2rem; background: linear-gradient(135deg, #2E6B1F, #1E3B22); margin: 1rem 0; }
.resume-carte.niveau-fruit { background: linear-gradient(135deg, #D9861A, #8A4B0B); } .resume-carte.niveau-baobab { background: linear-gradient(135deg, #6B4A2B, #2B1C10); }
.resume-carte strong { font-family: var(--serif); font-weight: 400; font-size: 1.8rem; }
.resume-carte span { opacity: .9; }
.bandeau-club { display: flex; flex-wrap: wrap; justify-content: center; gap: .3rem 1rem; padding: .6rem 1rem; background: #FFF3CD; color: #5a4300; text-decoration: none; font-size: .95rem; }
.bandeau-club .lien { font-weight: 700; color: var(--vert-fonce); }
.niveaux-club { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: .8rem; margin: 1rem 0; }
.niveau-club { border-radius: var(--rayon); padding: 1rem; color: #fff; display: flex; flex-direction: column; gap: .2rem; }
.niveau-club span { font-size: 2rem; } .niveau-club strong { font-family: var(--serif); font-weight: 400; font-size: 1.4rem; } .niveau-club p { margin: 0; opacity: .92; }
.niveau-feuille { background: #2E6B1F; } .niveau-fruit { background: #C9781A; } .niveau-baobab { background: #5A3E24; }
.encart-fidelite { background: #f3f8ec; border: 1.5px solid var(--feuille); border-radius: var(--rayon); padding: .8rem 1rem; }
.caisse-fid { border: 1.5px dashed var(--feuille); border-radius: var(--rayon); padding: .6rem .8rem; margin-bottom: .6rem; background: #f8fbf3; }
.caisse-fid label { font-weight: 600; font-size: .92rem; }
.fid-form { display: grid; gap: .4rem; margin-top: .4rem; }
.fid-titre { margin: 0 0 .2rem; display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.fid-bouteilles { display: flex; gap: .4rem; align-items: center; margin-top: .3rem; }
.fid-bouteilles input { width: 6rem; padding: .3rem; }
/* Cartes imprimées : format carte bancaire */
.planche-cartes { display: grid; grid-template-columns: repeat(2, 85.6mm); grid-auto-rows: 54mm; gap: 4mm 6mm; justify-content: center; }
.carte-imprimee { width: 85.6mm; height: 54mm; box-sizing: border-box; border-radius: 3.5mm; padding: 3mm 4mm; background: linear-gradient(135deg, #2E6B1F, #1E3B22); color: #fff; display: flex; flex-direction: column; overflow: hidden; -webkit-print-color-adjust: exact; print-color-adjust: exact; border: .3mm solid #ccc; }
.ci-haut { display: flex; gap: 2mm; align-items: center; }
.ci-haut img { width: 10mm; height: 10mm; border-radius: 50%; background: #fff; }
.ci-haut div { display: flex; flex-direction: column; font-size: 7pt; }
.ci-haut strong { font-family: Georgia, serif; font-size: 11pt; }
.ci-nom { margin: 1.5mm 0 1mm; font-size: 9pt; letter-spacing: .04em; }
.ci-ean { background: #fff; border-radius: 1.5mm; height: 18mm; width: 100%; padding: .8mm; box-sizing: border-box; }
.ci-pied { margin: auto 0 0; font-size: 6pt; opacity: .85; }
@media print { .planche-cartes { gap: 2mm 4mm; } .carte-imprimee { break-inside: avoid; } }

/* ===== Version 20 : clients professionnels ===== */
.conditions-pro { border: 1.5px solid var(--trait); border-radius: var(--rayon); padding: .8rem 1rem; margin: .8rem 0; }
.conditions-pro[disabled] { opacity: .75; }
.reglement-pro { border-color: var(--vert); }
.grille-pro td { vertical-align: middle; }
.grille-pro .raccourcis { display: inline-flex; gap: .2rem; margin-left: .3rem; }
.grille-pro .raccourcis button { border: 1px solid var(--trait); background: #fff; border-radius: 6px; padding: .15rem .35rem; font-size: .8rem; cursor: pointer; }
.grille-pro tr.ligne-choisie td { background: #f3f8ec; }
.depot-bloc { border: 1px solid var(--trait); border-radius: var(--rayon); padding: .6rem .9rem; margin: .6rem 0; }
.depot-bloc summary { cursor: pointer; }
.doc-parties h2 { margin-top: 0; }

/* ===== Version 21 : canaux de vente et fournisseurs ===== */
.canaux-vente, .canaux-choix { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: .6rem; margin: .5rem 0 1rem; }
.canal-carte { display: flex !important; gap: .7rem; align-items: flex-start; border: 2px solid var(--trait); border-radius: var(--rayon); padding: .8rem 1rem; cursor: pointer; margin: 0 !important; font-weight: 400 !important; }
.canal-carte input { margin-top: .3rem; width: 1.2rem; height: 1.2rem; }
.canal-carte span { display: flex; flex-direction: column; gap: .15rem; }
.canal-carte small { color: var(--doux); }
.canal-carte:has(input:checked) { border-color: var(--vert); background: #f3f8ec; }
.badge-origine { display: inline-block; font-size: .75rem; font-weight: 700; padding: .05rem .5rem; border-radius: 999px; background: #e5dcf5; color: #4a2a80; }
.liste-simple { list-style: none; padding: 0; margin: 0; }
.liste-simple li { padding: .4rem 0; border-bottom: 1px dashed var(--trait); }
.liste-simple li:last-child { border-bottom: 0; }
.type-reception { width: auto; }

/* ===== Version 22 : rayons du PALOMA MARKET ===== */
.sommaire-rayons { display: flex; gap: .4rem; overflow-x: auto; padding: 1rem 0 .2rem; position: sticky; top: 68px; z-index: 3; background: #fff; scrollbar-width: thin; }
.sommaire-rayons a { white-space: nowrap; text-decoration: none; border: 1.5px solid var(--trait); border-radius: 999px; padding: .35rem .9rem; font-weight: 600; font-size: .92rem; color: var(--foret); background: #fff; }
.sommaire-rayons a:hover { border-color: var(--vert); background: var(--surface); }
.rayon { scroll-margin-top: 130px; }
@media (max-width: 760px) { .sommaire-rayons { top: 0; } }

/* ===== Version 23 : disponibilité claire pour le client ===== */
.badge-stock { position: absolute; right: .6rem; top: .6rem; font-size: .78rem; font-weight: 700; padding: .2rem .6rem; border-radius: 999px; background: rgba(255,255,255,.95); box-shadow: 0 1px 4px rgba(0,0,0,.15); }
.badge-ok { color: var(--vert-fonce); }
.badge-faible { color: #8a4b00; background: #fff3df; }
.badge-rupture { color: #fff; background: #B3261E; }
.badge-boutique { color: #1d4b6b; background: #e5f0f8; }
.badge-saison { color: #5a4300; background: #FFF3CD; }
.produit-epuise .visuel, .produit-epuise img.visuel { filter: grayscale(.85); opacity: .55; }
.indispo { border: 1.5px dashed var(--trait); border-radius: 10px; padding: .6rem .7rem; background: #fafafa; }
.indispo-titre { margin: 0; font-weight: 700; color: var(--foret); }
.indispo-aide { margin: .2rem 0 .5rem; font-size: .88rem; color: var(--doux); }
.indispo .bouton[disabled] { width: 100%; background: #c9cfc4; color: #fff; cursor: not-allowed; }
.prevenir { margin-top: .5rem; }
.prevenir summary { cursor: pointer; font-weight: 600; color: var(--vert); font-size: .92rem; }
.prevenir form { display: grid; gap: .4rem; margin-top: .4rem; }
.stock-faible { font-weight: 700; }
.attente-clients { color: #8a4b00; font-weight: 600; }