/* ============================================================================
   Design system — inspiré du style Airbnb (cf. cahier des charges section 14 :
   design system unifié sur l'ensemble des interfaces : formulaires, boutons,
   boîtes de confirmation, messages d'erreur).
   ============================================================================ */

:root {
  --couleur-primaire: #FF385C;
  --couleur-primaire-hover: #E31C5F;
  --couleur-texte: #222222;
  --couleur-texte-clair: #717171;
  --couleur-bordure: #DDDDDD;
  --couleur-fond: #FFFFFF;
  --couleur-fond-alt: #F7F7F7;
  --couleur-succes: #008A05;
  --couleur-succes-fond: #E6F4EA;
  --couleur-erreur: #C13515;
  --couleur-erreur-fond: #FDECEA;
  --couleur-attention: #B36B00;
  --couleur-attention-fond: #FFF6E5;
  --rayon-carte: 16px;
  --rayon-bouton: 8px;
  --rayon-input: 8px;
  --ombre-carte: 0 6px 16px rgba(0, 0, 0, 0.12);
  --ombre-carte-hover: 0 10px 24px rgba(0, 0, 0, 0.18);
  --ombre-navbar: 0 1px 2px rgba(0, 0, 0, 0.08);
  --police: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--police);
  color: var(--couleur-texte);
  background: var(--couleur-fond-alt);
  line-height: 1.5;
}

a { color: inherit; text-decoration: none; }

h1, h2, h3, h4 { font-weight: 600; margin: 0 0 12px; }
h1 { font-size: 28px; }
h2 { font-size: 22px; }
h3 { font-size: 18px; }
p  { margin: 0 0 12px; color: var(--couleur-texte); }

.texte-attenue { color: var(--couleur-texte-clair); font-size: 14px; }

/* ---------------------------------------------------------------------------
   Structure générale
   --------------------------------------------------------------------------- */
.conteneur {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 24px;
}

/* Back-office (partenaire/admin/livreur) : occupe toute la largeur de l'écran
   au lieu d'être limité à 1120px, pour profiter de l'espace sur les grands
   écrans (tableaux, grilles de cartes, etc.). */
.conteneur-pleine-largeur {
  max-width: none;
  margin: 0;
  padding: 0 32px;
}
@media (max-width: 780px) {
  .conteneur-pleine-largeur { padding: 0 16px; }
}

.conteneur-etroit {
  max-width: 480px;
  margin: 0 auto;
  padding: 0 24px;
}

.page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.contenu-principal {
  flex: 1;
  padding: 32px 0 64px;
}

/* ---------------------------------------------------------------------------
   Barre de navigation
   --------------------------------------------------------------------------- */
.navbar {
  background: var(--couleur-fond);
  box-shadow: var(--ombre-navbar);
  position: sticky;
  top: 0;
  z-index: 50;
}

.navbar-inner {
  max-width: none;
  margin: 0;
  padding: 14px 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
}

.navbar-toggle {
  display: none;
  background: none;
  border: none;
  padding: 8px;
  margin-left: auto;
  cursor: pointer;
  color: var(--couleur-texte);
  border-radius: var(--rayon-bouton);
}
.navbar-toggle:hover { background: var(--couleur-fond-alt); }

.navbar-logo {
  font-size: 20px;
  font-weight: 700;
  color: var(--couleur-primaire);
}

.navbar-liens {
  display: flex;
  gap: 4px;
  align-items: center;
  flex-wrap: wrap;
}

.navbar-lien {
  padding: 10px 14px;
  border-radius: var(--rayon-bouton);
  font-size: 14px;
  font-weight: 500;
  color: var(--couleur-texte);
}

.navbar-lien:hover { background: var(--couleur-fond-alt); }
.navbar-lien.actif { background: var(--couleur-fond-alt); font-weight: 700; }

/* Reste de la navigation back-office partenaire (cf. includes/entete.php) : invisible
   sur desktop (display:none), affiché uniquement dans le tiroir mobile du menu du haut —
   voir @media ci-dessous. Permet de n'avoir plus qu'un seul menu (en haut à droite) sur
   mobile au lieu de deux (barre du haut + colonne latérale). */
.navbar-sous-menu-mobile { display: none; }
.navbar-sous-menu-mobile-titre {
  display: block;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--couleur-texte-clair);
  padding: 10px 14px 2px;
}

@media (max-width: 780px) {
  .navbar-inner { padding: 14px 16px; }
  .navbar-toggle { display: flex; align-items: center; justify-content: center; }
  .navbar-sous-menu-mobile { display: contents; }

  .navbar-liens {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    background: var(--couleur-fond);
    border-radius: 0 0 var(--rayon-carte) var(--rayon-carte);
    box-shadow: var(--ombre-carte);
    padding: 8px 16px 16px;
    z-index: 40;
  }
  .navbar-liens.ouverte { display: flex; }

  .navbar-liens .navbar-lien,
  .navbar-liens .bouton {
    width: 100%;
    justify-content: flex-start;
  }
  .navbar-liens .bouton { margin-top: 6px; }
}

/* ---------------------------------------------------------------------------
   Boutons
   --------------------------------------------------------------------------- */
.bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 20px;
  border-radius: var(--rayon-bouton);
  border: none;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.05s ease, background 0.15s ease, box-shadow 0.15s ease;
  text-align: center;
}

.bouton-primaire {
  background: var(--couleur-primaire);
  color: #fff;
}
.bouton-primaire:hover { background: var(--couleur-primaire-hover); }

.bouton-secondaire {
  background: #fff;
  color: var(--couleur-texte);
  border: 1px solid var(--couleur-texte);
}
.bouton-secondaire:hover { background: var(--couleur-fond-alt); }

.bouton-vert {
  background: #1E8E3E;
  color: #fff;
  border: none;
}
.bouton-vert:hover { background: #187030; }

.modale-confirmation-fond {
  position: fixed;
  inset: 0;
  background: rgba(20, 20, 20, 0.5);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 500;
  padding: 20px;
}
.modale-confirmation-boite {
  background: #fff;
  border-radius: 14px;
  padding: 24px;
  max-width: 400px;
  width: 100%;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
}
.modale-confirmation-boite h3 { margin: 0 0 14px; }
.modale-confirmation-message {
  font-size: 15px;
  color: var(--couleur-texte);
  margin: 0 0 20px;
}
.modale-confirmation-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}
@media (max-width: 480px) {
  .modale-confirmation-actions { flex-direction: column-reverse; }
  .modale-confirmation-actions .bouton { width: 100%; }
}

.bouton-discret {
  background: transparent;
  color: var(--couleur-texte);
  border: 1px solid var(--couleur-bordure);
}
.bouton-discret:hover { background: var(--couleur-fond-alt); }

.bouton-danger {
  background: var(--couleur-erreur);
  color: #fff;
}
.bouton-danger:hover { opacity: 0.9; }

.bouton-petit { padding: 8px 14px; font-size: 13px; }
.bouton-pleine-largeur { width: 100%; }
.bouton:active { transform: scale(0.98); }
.bouton:disabled { opacity: 0.5; cursor: not-allowed; }

/* Bouton d'action livreur (livreur/dashboard.php, "Marquer livrée") : usage
   quasi exclusivement mobile/terrain, une main. Desktop (>=780px) : bouton
   normal, inchangé. Mobile uniquement : pleine largeur + zone de tap plus
   grande, plus facile à viser sans avoir à regarder précisément l'écran. */
@media (max-width: 780px) {
  .bouton-action-livreur { width: 100%; padding: 15px 20px; font-size: 16px; }
}

/* ---------------------------------------------------------------------------
   Cartes
   --------------------------------------------------------------------------- */
.carte {
  background: var(--couleur-fond);
  border-radius: var(--rayon-carte);
  box-shadow: var(--ombre-carte);
  padding: 24px;
}

.carte-hover { transition: box-shadow 0.2s ease, transform 0.2s ease; }
.carte-hover:hover { box-shadow: var(--ombre-carte-hover); transform: translateY(-2px); }

.grille-cartes {
  display: grid;
  /* Piste de largeur FIXE (260px, pas de minmax) : avec un minmax, le nombre
     de colonnes est calculé avec une fonction (min ou max) différente de la
     largeur réellement appliquée à la piste, ce qui peut créer un décalage
     entre le nombre de colonnes choisi et l'espace réellement disponible par
     colonne — à certaines largeurs de conteneur (dont celles induites par le
     zoom navigateur), la carte (largeur fixe 260px) déborde alors de sa
     propre piste et chevauche la carte voisine. Avec une valeur unique et
     fixe utilisée à la fois pour compter les colonnes et pour les
     dimensionner, ce décalage est impossible : chaque piste fait exactement
     260px, la carte s'y étire par défaut (justify-items normal = stretch) et
     fait donc exactement 260px, jamais plus. Même principe appliqué à
     .grille-cartes-compactes.grille-produits-5 plus bas. */
  grid-template-columns: repeat(auto-fill, 260px);
  gap: 20px;
  margin-bottom: 20px;
}

/* Mobile : quand une seule (ou quelques) carte(s) tient sur la ligne, les
   pistes fixes de 260px restent alignées à gauche par défaut, laissant un
   grand vide à droite. On centre la ligne pour que la carte/l'image ne
   paraisse pas décalée sur petit écran (desktop non concerné). */
@media (max-width: 780px) {
  .grille-cartes,
  .grille-cartes-compactes.grille-produits-5 { justify-content: center; }
}

.carte-produit {
  background: var(--couleur-fond);
  border: 1px solid var(--couleur-bordure);
  border-radius: var(--rayon-carte);
  box-shadow: var(--ombre-carte);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  position: relative;
}

.carte-produit-supprimer {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: none;
  background: rgba(0, 0, 0, 0.45);
  color: #fff;
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  z-index: 2;
}
.carte-produit-supprimer:hover { background: var(--couleur-erreur); }

.carte-produit-bandeau { height: 6px; }
.carte-produit-bandeau-vert { background: var(--couleur-succes); }
.carte-produit-bandeau-gris { background: #C7C7C7; }

.carte-produit-image {
  width: 100%;
  aspect-ratio: 4 / 3;
  background: var(--couleur-fond) center/contain no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--couleur-texte-clair);
  font-size: 13px;
  position: relative;
}

.badge-quantite-panier {
  position: absolute;
  top: 8px;
  right: 8px;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 11px;
  background: var(--couleur-primaire);
  color: #FFFFFF;
  font-size: 12px;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
}

.carte-produit-corps { padding: 16px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.carte-produit-prix { font-weight: 700; margin-top: auto; }
.carte-produit-description {
  font-size: 13px;
  color: var(--couleur-texte-clair);
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ---------------------------------------------------------------------------
   Formulaires
   --------------------------------------------------------------------------- */
.groupe-champ { margin-bottom: 18px; }

.etiquette {
  display: block;
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 6px;
}

.champ,
select.champ,
textarea.champ {
  width: 100%;
  max-width: 560px;
  padding: 12px 14px;
  border: 1px solid var(--couleur-bordure);
  border-radius: var(--rayon-input);
  font-size: 15px;
  font-family: var(--police);
  background: #fff;
  color: var(--couleur-texte);
}

.champ:focus {
  outline: none;
  border-color: var(--couleur-texte);
  box-shadow: 0 0 0 1px var(--couleur-texte);
}

.champ-aide { font-size: 13px; color: var(--couleur-texte-clair); margin-top: 4px; }
.champ-erreur { border-color: var(--couleur-erreur); }
.texte-erreur-champ { font-size: 13px; color: var(--couleur-erreur); margin-top: 4px; }

.champ-groupe-domaine {
  display: flex;
  border: 1px solid var(--couleur-bordure);
  border-radius: var(--rayon-input);
  overflow: hidden;
}
.champ-groupe-domaine.champ-erreur { border-color: var(--couleur-erreur); }
.champ-groupe-domaine input {
  border: none;
  padding: 12px 14px;
  font-size: 15px;
  font-family: var(--police);
  flex: 1;
  min-width: 0;
  color: var(--couleur-texte);
}
.champ-groupe-domaine input:focus { outline: none; }
.champ-groupe-domaine .suffixe-domaine {
  background: var(--couleur-fond-alt);
  color: var(--couleur-texte-clair);
  font-size: 14px;
  padding: 12px 14px;
  border-left: 1px solid var(--couleur-bordure);
  white-space: nowrap;
  display: flex;
  align-items: center;
}

.case-a-cocher-ligne {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 0;
}

.grille-mode-livraison {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 6px;
}
.carte-mode-livraison {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
  border: 1px solid var(--couleur-bordure);
  border-radius: 10px;
  padding: 12px 14px;
  cursor: pointer;
  background: #fff;
}
.carte-mode-livraison-radio {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}
.carte-mode-livraison:has(.carte-mode-livraison-radio:checked) {
  border-color: var(--couleur-succes);
  background: #EAF3DE;
}
.carte-mode-livraison:has(.carte-mode-livraison-radio:focus-visible) {
  outline: 2px solid var(--couleur-primaire);
  outline-offset: 2px;
}
.carte-mode-livraison-titre {
  font-size: 13px;
  font-weight: 600;
}
.carte-mode-livraison:has(.carte-mode-livraison-radio:checked) .carte-mode-livraison-titre {
  color: var(--couleur-succes);
}
.carte-mode-livraison-desc {
  font-size: 12px;
  color: var(--couleur-texte-clair);
}
@media (max-width: 780px) {
  .grille-mode-livraison { grid-template-columns: 1fr; }
}

/* Paire de champs (ex. Code postal / Ville, client/commande.php) : repasse en
   1 colonne sur mobile pour éviter des champs trop étroits ; desktop
   inchangé (grid-template-columns:1fr 1fr définie en inline dans le PHP). */
@media (max-width: 480px) {
  .grille-champs-paire { grid-template-columns: 1fr !important; }
}

/* Formulaire "+ Ajouter un produit" (partenaire/catalogue.php) : 6 champs
   côte à côte en desktop (inline style, inchangé), repli en 1 colonne sous
   600px — sinon chaque champ ne fait que quelques pixels de large et le
   formulaire est inutilisable sur téléphone. */
@media (max-width: 600px) {
  .grille-ajout-produit { grid-template-columns: 1fr !important; }
  .grille-ajout-produit button[type="submit"] { width: 100%; }
}

.interrupteur {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;
  flex-shrink: 0;
}
.interrupteur input { opacity: 0; width: 0; height: 0; }
.glissiere {
  position: absolute; cursor: pointer; inset: 0;
  background-color: var(--couleur-bordure);
  transition: 0.2s; border-radius: 24px;
}
.glissiere::before {
  position: absolute; content: "";
  height: 18px; width: 18px; left: 3px; bottom: 3px;
  background-color: white; transition: 0.2s; border-radius: 50%;
}
.interrupteur input:checked + .glissiere { background-color: var(--couleur-primaire); }
.interrupteur input:checked + .glissiere::before { transform: translateX(20px); }

.interrupteur-vert input:checked + .glissiere { background-color: var(--couleur-succes); }

.interrupteur-petit { width: 32px; height: 18px; }
.interrupteur-petit .glissiere::before { height: 12px; width: 12px; left: 3px; bottom: 3px; }
.interrupteur-petit input:checked + .glissiere::before { transform: translateX(14px); }

/* ---------------------------------------------------------------------------
   Tableau des horaires d'ouverture (semaine complète, zones Midi/Soir)
   --------------------------------------------------------------------------- */
.tableau-horaires { width: 100%; border-collapse: collapse; font-size: 13px; }
.tableau-horaires th, .tableau-horaires td { padding: 10px 8px; text-align: left; }

.tableau-horaires thead th.entete-midi { background: #EAF1F7; color: #33495C; text-align: center; border-radius: 6px 6px 0 0; }
.tableau-horaires thead th.entete-soir { background: #FBF0E4; color: #8A5A1E; text-align: center; border-radius: 6px 6px 0 0; }

.tableau-horaires tbody tr:nth-child(odd) { background: var(--couleur-fond-alt); }
.tableau-horaires td.cellule-midi { background: #EAF1F7; }
.tableau-horaires td.cellule-soir { background: #FBF0E4; }

.tableau-horaires tr.jour-ferme .nom-jour { color: var(--couleur-texte-clair); }
.tableau-horaires tr.jour-ferme td.cellule-midi,
.tableau-horaires tr.jour-ferme td.cellule-soir { background: #F5F5F5; }

.tableau-horaires .nom-jour { font-weight: 500; white-space: nowrap; }

.tableau-horaires td input[type="time"],
.tableau-horaires td select.champ-heure {
  width: 110px;
  border: 1px solid var(--couleur-bordure);
  border-radius: var(--rayon-input);
  padding: 5px 6px;
  font-size: 12px;
  background: #fff;
}
.tableau-horaires td.cellule-midi input[type="time"],
.tableau-horaires td.cellule-midi select.champ-heure { border-color: #C7D9E8; }
.tableau-horaires td.cellule-soir input[type="time"],
.tableau-horaires td.cellule-soir select.champ-heure { border-color: #EAD3B2; }
.tableau-horaires td input[type="time"]:disabled,
.tableau-horaires td select.champ-heure:disabled { color: #CCC; background: #FAFAFA; border-color: #EEE; }

/* Repli mobile : 1 jour = 1 bloc, avec une vraie grille 2 colonnes par ligne
   (display: grid sur <tr>, pas d'inline-block) — nom du jour + interrupteur
   sur la première ligne, Midi (début/fin) sur la deuxième, Soir (début/fin)
   sur la troisième. L'ancienne version en inline-block laissait le premier
   select "Midi" remonter sur la même ligne que le jour/interrupteur dès qu'il
   restait de la place horizontale, d'où le décalage : la grille force un
   passage à la ligne net entre chaque paire, quel que soit le contenu.
   Desktop (>=780px) : tableau inchangé, y compris son wrapper
   overflow-x:auto existant. */
@media (max-width: 780px) {
  .tableau-horaires thead { display: none; }
  .tableau-horaires, .tableau-horaires tbody { display: block; width: 100%; }
  .tableau-horaires tr {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 6px 10px;
    padding: 12px 4px;
    border-bottom: 1px solid var(--couleur-bordure);
  }
  .tableau-horaires tbody tr:nth-child(odd) { background: none; }
  .tableau-horaires tr:last-child { border-bottom: none; }
  .tableau-horaires td { display: block; padding: 0; background: none !important; }
  .tableau-horaires td.nom-jour { font-size: 15px; }
  .tableau-horaires tr > td:nth-child(2) { justify-self: end; }
  .tableau-horaires td.cellule-midi::before,
  .tableau-horaires td.cellule-soir::before {
    display: block;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-bottom: 3px;
  }
  .tableau-horaires td.cellule-midi::before { content: "☀️ Midi"; color: #33495C; }
  .tableau-horaires td.cellule-soir::before { content: "🌙 Soir"; color: #8A5A1E; }
  .tableau-horaires td input[type="time"],
  .tableau-horaires td select.champ-heure {
    width: 100%;
    padding: 9px 8px;
    font-size: 14px;
  }
}

/* ---------------------------------------------------------------------------
   Parcours de commande mono-page (mode, coordonnées, panier, options)
   --------------------------------------------------------------------------- */
.zone-parcours { margin-top: 20px; }

.etape-carte { max-width: 480px; margin: 0 auto; background: linear-gradient(160deg, #FFF1EC 0%, #FDF7F0 55%, #FFFFFF 100%); }
.etape-titre { font-size: 15px; font-weight: 600; margin-bottom: 14px; text-align: center; }

.lien-discret { color: var(--couleur-primaire); font-size: 12px; text-decoration: underline; cursor: pointer; background: none; border: none; padding: 0; }

.commande-mode-toggle { display: flex; gap: 8px; margin-bottom: 16px; }
.commande-mode-pill {
  flex: 1;
  border: 1px solid var(--couleur-bordure);
  background: var(--couleur-fond);
  border-radius: 999px;
  padding: 10px 14px;
  font-size: 13px;
  font-weight: 600;
  color: var(--couleur-texte);
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.commande-mode-pill:hover { border-color: var(--couleur-primaire); }
.commande-mode-pill.actif {
  background: var(--couleur-succes-fond);
  border-color: var(--couleur-succes);
  color: var(--couleur-succes);
}

.filtre-pill {
  flex: 0 0 auto;
  border: 1px solid var(--couleur-bordure);
  background: var(--couleur-fond);
  border-radius: 999px;
  padding: 7px 14px;
  font-size: 13px;
  font-weight: 600;
  color: var(--couleur-texte);
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.filtre-pill:hover { border-color: var(--couleur-primaire); }
.filtre-pill.actif {
  background: var(--couleur-primaire);
  border-color: var(--couleur-primaire);
  color: #FFFFFF;
}
.filtre-pill-select { max-width: 110px; }

/* Mobile uniquement : le bandeau de filtre catégories (client/boutique.php)
   reste visible sous la barre de navigation en scrollant, pour changer de
   catégorie sans devoir remonter en haut de page. Desktop non concerné (pas
   de position sticky). */
@media (max-width: 780px) {
  #filtre-categorie-pills {
    position: sticky;
    top: 64px;
    z-index: 30;
  }
}

.bandeau-info-zone {
  background: var(--couleur-succes-fond);
  color: var(--couleur-succes);
  border-radius: 8px;
  padding: 10px 12px;
  margin-bottom: 14px;
  font-size: 12.5px;
  font-weight: 600;
}

.bandeau-hors-zone {
  background: #FDECEA;
  color: #B3261E;
  border-radius: 8px;
  padding: 10px 12px;
  margin-bottom: 14px;
  font-size: 12.5px;
}
.bandeau-hors-zone .lien-discret { color: #B3261E; text-decoration: underline; margin-left: 4px; }

.bloc-info-connu {
  background: var(--couleur-fond-alt);
  border-radius: 8px;
  padding: 10px 12px;
  margin-bottom: 14px;
  font-size: 12px;
  color: var(--couleur-texte);
}
.bloc-info-connu .lien-discret { display: block; margin-top: 4px; }

.resume-commande {
  max-width: 480px;
  margin: 0 auto;
  background: var(--couleur-fond);
  border: 1px solid var(--couleur-bordure);
  border-radius: 10px;
  padding: 12px 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  font-size: 13px;
}

/* Icône panier flottante : ancrée en haut à droite de la carte blanche
   d'en-tête boutique (.entete-boutique-carte, position: relative — cf.
   includes/entete_boutique_client.php) plutôt qu'avec un top deviné en
   pixels page. Sa position dépend uniquement de cette carte, jamais de la
   hauteur de la bande photo au-dessus : aucun chevauchement possible avec
   l'un ou l'autre, quelle que soit la largeur d'écran. */
.panier-flottant-icone {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--couleur-primaire);
  color: #fff;
  border: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--ombre-carte-hover);
  cursor: pointer;
}

.panier-flottant-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  background: var(--couleur-texte);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  border-radius: 20px;
  min-width: 17px;
  height: 17px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 3px;
}

.modale-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 80;
  padding: 20px;
}

.modale-boite {
  background: var(--couleur-fond);
  border-radius: var(--rayon-carte);
  padding: 20px;
  max-width: 380px;
  width: 100%;
  max-height: 85vh;
  overflow-y: auto;
  box-shadow: var(--ombre-carte-hover);
}

.modale-titre { font-size: 15px; font-weight: 600; margin-bottom: 14px; }

.tiroir-panier-poignee { display: none; }

.ligne-panier-tiroir {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--couleur-fond-alt);
  font-size: 13px;
}

.tiroir-panier-total { font-weight: 700; margin: 12px 0; text-align: right; }

.stepper-tiroir { display: flex; align-items: center; gap: 6px; }

.stepper-tiroir-bouton {
  width: 26px;
  height: 26px;
  min-width: 26px;
  border: 1px solid var(--couleur-bordure);
  background: var(--couleur-fond);
  border-radius: 6px;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
}

.stepper-tiroir-bouton:hover { background: var(--couleur-fond-alt); }
.stepper-tiroir-bouton:disabled { opacity: 0.5; cursor: default; }

.stepper-tiroir-valeur {
  min-width: 16px;
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  color: var(--couleur-texte);
}

.stepper-edition-carte {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 1px solid var(--couleur-texte);
  border-radius: var(--rayon-bouton);
  padding: 7px 14px;
}

.stepper-edition-carte .stepper-tiroir-valeur { font-size: 14px; }

.bouton-annuler-lien {
  display: block;
  width: 100%;
  text-align: center;
  background: none;
  border: none;
  color: var(--couleur-erreur);
  font-size: 12px;
  padding: 10px 0 0;
  cursor: pointer;
}

@keyframes glisser-tiroir-panier-mobile {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}

@media (max-width: 780px) {
  .resume-commande { flex-direction: column; align-items: flex-start; }

  #tiroir-panier.modale-overlay { align-items: flex-end; padding: 0; }
  #tiroir-panier .modale-boite {
    max-width: 100%;
    width: 100%;
    border-radius: 16px 16px 0 0;
    max-height: 88vh;
    padding: 12px 16px calc(16px + env(safe-area-inset-bottom, 0px));
    animation: glisser-tiroir-panier-mobile 0.2s ease-out;
  }
  .tiroir-panier-poignee {
    display: block;
    width: 40px;
    height: 4px;
    background: var(--couleur-bordure);
    border-radius: 999px;
    margin: 0 auto 12px;
  }
}

/* ---------------------------------------------------------------------------
   Alertes / messages flash / boîtes de confirmation / erreurs
   (cf. section 14 : design cohérent des boîtes de confirmation et messages d'erreur)
   --------------------------------------------------------------------------- */
.alerte {
  padding: 14px 18px;
  border-radius: var(--rayon-input);
  margin-bottom: 16px;
  font-size: 14px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.alerte-succes { background: var(--couleur-succes-fond); color: var(--couleur-succes); }
.alerte-erreur { background: var(--couleur-erreur-fond); color: var(--couleur-erreur); }
.alerte-attention { background: var(--couleur-attention-fond); color: var(--couleur-attention); }
.alerte-info { background: #EAF3FF; color: #1A5FB4; }

.banniere-fermeture {
  background: var(--couleur-fond);
  border-left: 3px solid var(--couleur-attention);
  border-radius: 0 var(--rayon-carte) var(--rayon-carte) 0;
  padding: 14px 18px;
  margin-bottom: 20px;
  box-shadow: var(--ombre-carte);
}
.banniere-fermeture-titre { margin: 0 0 4px; font-size: 14px; font-weight: 700; color: var(--couleur-texte); }
.banniere-fermeture-texte { margin: 0; font-size: 13px; color: var(--couleur-texte-clair); line-height: 1.5; }

.boite-confirmation {
  background: var(--couleur-fond);
  border: 1px solid var(--couleur-bordure);
  border-radius: var(--rayon-carte);
  padding: 24px;
  text-align: center;
  max-width: 420px;
  margin: 0 auto;
}

/* ---------------------------------------------------------------------------
   Badges de statut
   --------------------------------------------------------------------------- */
.badge {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.badge-vert   { background: var(--couleur-succes-fond); color: var(--couleur-succes); }
.badge-rouge  { background: var(--couleur-erreur-fond); color: var(--couleur-erreur); }
select.select-disponibilite {
  padding: 6px 10px;
  border: none;
  border-radius: 999px;
  cursor: pointer;
}
.badge-orange { background: var(--couleur-attention-fond); color: var(--couleur-attention); }
.badge-gris   { background: #EEEEEE; color: var(--couleur-texte-clair); }
.badge-bleu   { background: #E6F0FE; color: #1D4ED8; text-transform: none; font-weight: 600; }

/* ---------------------------------------------------------------------------
   Liste de commandes compacte (partenaire/commandes.php) — une ligne par
   commande, statut passif par défaut (badge seul), action visible seulement
   si une étape suivante existe dans le workflow, actions secondaires (annuler,
   affecter un livreur) rangées dans un menu ⋯ pour rester le plus léger
   possible quand il n'y a rien à faire.
   --------------------------------------------------------------------------- */
.liste-commandes { display: flex; flex-direction: column; gap: 8px; }
/* Design A : chaque commande devient une carte à part entière (fond + bordure),
   pour mieux distinguer les lignes entre elles qu'avec le seul survol d'avant. */
.ligne-commande {
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--couleur-fond);
  border: 1px solid var(--couleur-bordure);
}
.ligne-commande:hover { background: var(--couleur-fond-alt); border-color: var(--couleur-bordure); }
.ligne-commande-principale {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.ligne-commande-id {
  color: var(--couleur-texte-clair);
  font-size: 12px;
  text-decoration: none;
}
.ligne-commande-id:hover { text-decoration: underline; }
.ligne-commande-client { font-weight: 700; flex: 1; min-width: 120px; }
.ligne-commande-details {
  color: var(--couleur-texte-clair);
  font-size: 12px;
  margin-top: 4px;
}
.ligne-commande-produits {
  color: var(--couleur-texte-clair);
  font-size: 12px;
  margin-top: 2px;
}
.menu-actions-ligne { position: relative; }
.menu-actions-bouton {
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 4px 8px;
  color: var(--couleur-texte-clair);
  font-size: 18px;
  line-height: 1;
  border-radius: 6px;
}
.menu-actions-bouton:hover { background: #EEEEEE; }
.menu-actions-liste {
  position: absolute;
  right: 0;
  top: 100%;
  margin-top: 4px;
  background: var(--couleur-fond);
  border: 1px solid var(--couleur-bordure);
  border-radius: 10px;
  box-shadow: var(--ombre-carte);
  min-width: 200px;
  z-index: 20;
  padding: 6px;
  display: none;
}
.menu-actions-liste.ouvert { display: block; }
.menu-actions-item {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  padding: 8px 10px;
  font-size: 13px;
  border-radius: 6px;
  cursor: pointer;
  color: var(--couleur-texte);
}
.menu-actions-item:hover { background: var(--couleur-fond-alt); }
.menu-actions-item-danger { color: var(--couleur-erreur); }
.menu-actions-separateur { height: 1px; background: var(--couleur-bordure); margin: 6px 2px; }
.menu-actions-etiquette { font-size: 11px; color: var(--couleur-texte-clair); padding: 6px 10px 2px; text-transform: uppercase; letter-spacing: 0.02em; }
.menu-actions-liste select { width: 100%; margin: 2px 10px 6px; width: calc(100% - 20px); }

.bouton-modele {
  border: 1px dashed var(--couleur-bordure);
  border-radius: 999px;
  background: transparent;
  color: var(--couleur-texte);
  font-family: var(--police);
  font-size: 13px;
  font-weight: 600;
  padding: 8px 16px;
  cursor: pointer;
}
.bouton-modele:hover { background: var(--couleur-fond-alt); border-color: var(--couleur-primaire); color: var(--couleur-primaire); }

/* ---------------------------------------------------------------------------
   Tableaux (back-office partenaire / admin)
   --------------------------------------------------------------------------- */
table.tableau {
  width: 100%;
  border-collapse: collapse;
  background: var(--couleur-fond);
  border-radius: var(--rayon-carte);
  overflow: hidden;
}
table.tableau th, table.tableau td {
  padding: 12px 16px;
  text-align: left;
  border-bottom: 1px solid var(--couleur-fond-alt);
  font-size: 14px;
}
table.tableau th { background: var(--couleur-fond-alt); font-weight: 600; }
table.tableau tr:last-child td { border-bottom: none; }

/* Repli mobile générique : TOUS les tableaux .tableau (back-office admin +
   partenaire, y compris ceux non retouchés individuellement) passent en
   liste empilée sous 780px — chaque ligne devient un petit bloc vertical
   au lieu d'une ligne étroite à plusieurs colonnes. Quand la cellule porte
   un attribut data-label (ajouté au cas par cas dans le PHP), l'intitulé de
   la colonne s'affiche au-dessus de la valeur ; sinon la cellule s'affiche
   simplement sans intitulé — dans tous les cas, largement plus lisible qu'un
   tableau compressé. .tableau-empilable reste un alias équivalent, pour les
   pages qui l'utilisent déjà explicitement. Le rendu desktop (>=780px) reste
   un tableau classique, strictement inchangé : ces règles ne s'appliquent
   qu'en dessous du seuil mobile. */
@media (max-width: 780px) {
  table.tableau thead, .tableau-empilable thead { display: none; }
  table.tableau, table.tableau tbody, table.tableau tr, table.tableau td,
  .tableau-empilable, .tableau-empilable tbody, .tableau-empilable tr, .tableau-empilable td {
    display: block;
    width: 100%;
  }
  table.tableau tr, .tableau-empilable tr {
    padding: 10px 0;
    border-bottom: 1px solid var(--couleur-fond-alt);
  }
  table.tableau tr:last-child, .tableau-empilable tr:last-child { border-bottom: none; }
  table.tableau td, .tableau-empilable td {
    padding: 4px 0;
    border-bottom: none;
  }
  table.tableau td[data-label]::before, .tableau-empilable td[data-label]::before {
    content: attr(data-label);
    display: block;
    font-size: 10px;
    font-weight: 700;
    color: var(--couleur-texte-clair);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-bottom: 2px;
  }
}

/* ---------------------------------------------------------------------------
   Mise en page back-office (dashboard partenaire / admin / livreur)
   --------------------------------------------------------------------------- */
.dashboard-mise-en-page {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 24px;
  align-items: start;
}

.dashboard-menu-colonne {
  position: sticky;
  top: 84px;
}

.dashboard-menu {
  background: var(--couleur-fond);
  border-radius: var(--rayon-carte);
  box-shadow: var(--ombre-carte);
  padding: 12px;
}

.dashboard-menu a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-left: 3px solid transparent;
  border-radius: var(--rayon-bouton);
  font-size: 14px;
  font-weight: 500;
  color: var(--couleur-texte);
  margin-bottom: 2px;
}
.dashboard-menu a:hover { background: var(--couleur-fond-alt); }
.dashboard-menu a.actif {
  background: var(--couleur-fond-alt);
  border-left-color: var(--couleur-primaire);
  font-weight: 700;
  color: var(--couleur-primaire);
}
.dashboard-menu-icone {
  display: flex;
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  opacity: .6;
}
.dashboard-menu-icone svg { width: 18px; height: 18px; }
.dashboard-menu a:hover .dashboard-menu-icone,
.dashboard-menu a.actif .dashboard-menu-icone { opacity: 1; }

.dashboard-menu-groupe {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 18px -4px 6px;
  padding: 7px 10px;
  border-radius: var(--rayon-bouton);
  background: color-mix(in srgb, var(--couleur-primaire) 12%, white);
}
.dashboard-menu-groupe:first-child { margin-top: 4px; }
.dashboard-menu-groupe-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  color: var(--couleur-primaire);
}
.dashboard-menu-groupe-badge svg { width: 14px; height: 14px; }
.dashboard-menu-groupe-titre {
  font-size: 12.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--couleur-primaire);
}

/* Carte d'identité boutique en haut du menu partenaire (nom + sous-domaine +
   lien vers le site public) — toujours visible, desktop et mobile, y compris
   quand le menu de navigation est replié. */
.carte-identite-boutique {
  background: var(--couleur-fond);
  border: 2px solid var(--couleur-primaire);
  border-radius: var(--rayon-carte);
  box-shadow: var(--ombre-carte);
  padding: 14px;
  margin-bottom: 8px;
}
.carte-identite-boutique-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.badge-statut-boutique {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--couleur-succes-fond);
  color: var(--couleur-succes);
}
.badge-statut-boutique.ferme { background: #EEEEEE; color: var(--couleur-texte-clair); }
.badge-statut-essai { display: inline-block; font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 999px; background: var(--couleur-attention-fond); color: var(--couleur-attention); }
.carte-identite-boutique-entete { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.carte-identite-boutique-texte { min-width: 0; }
.carte-identite-boutique-nom {
  font-weight: 700;
  font-size: 14px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.carte-identite-boutique-url { font-size: 11px; color: var(--couleur-texte-clair); }
.carte-identite-boutique-lien {
  display: block;
  text-align: center;
  font-size: 12px;
  font-weight: 600;
  background: var(--couleur-primaire);
  color: #fff;
  border: none;
  border-radius: var(--rayon-bouton);
  padding: 8px;
}
.carte-identite-boutique-lien:hover { background: var(--couleur-primaire-hover); }

.dashboard-menu-toggle { display: none; }

@media (max-width: 780px) {
  .dashboard-mise-en-page { grid-template-columns: 1fr; }
  .dashboard-menu-colonne { position: static; }

  .dashboard-menu-toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 12px 14px;
    background: var(--couleur-fond);
    border: 1px solid var(--couleur-bordure);
    border-radius: var(--rayon-bouton);
    box-shadow: var(--ombre-carte);
    font-size: 14px;
    font-weight: 600;
    color: var(--couleur-texte);
    cursor: pointer;
  }
  .dashboard-menu-toggle svg { width: 18px; height: 18px; flex-shrink: 0; }
  .dashboard-menu-toggle-chevron { margin-left: auto; width: 16px; height: 16px; transition: transform 0.15s ease; }
  .dashboard-menu-toggle.ouvert .dashboard-menu-toggle-chevron { transform: rotate(180deg); }

  .dashboard-menu { display: none; margin-top: 10px; }
  .dashboard-menu.ouvert { display: block; }

  /* Espace partenaire uniquement (cf. .dashboard-menu-colonne-partenaire dans
     partenaire/_menu.php) : toute la colonne latérale (carte "Profil"
     boutique + menu + bouton "Menu") est masquée sur mobile — la navigation
     est désormais regroupée dans le seul menu du haut à droite
     (.navbar-sous-menu-mobile, cf. includes/entete.php), et la carte de
     profil ne doit plus apparaître en haut des pages. */
  .dashboard-menu-colonne-partenaire { display: none; }

  /* Espace admin (cf. .dashboard-menu-colonne-admin dans admin/_menu.php) :
     même principe — la colonne latérale et son bouton "Menu" sont masqués sur
     mobile, toute la navigation étant regroupée dans le seul menu du haut à
     droite (.navbar-sous-menu-mobile, cf. includes/entete.php). */
  .dashboard-menu-colonne-admin { display: none; }
}

/* ---------------------------------------------------------------------------
   Onglets génériques (catalogue, profil boutique...)
   --------------------------------------------------------------------------- */
.onglets {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--couleur-bordure);
  margin-bottom: 16px;
  flex-wrap: wrap;
}

/* ---------------------------------------------------------------------------
   Bulle d'aide : petit "?" à côté d'un libellé, affiche une explication au
   survol/focus (tap sur mobile, puisque tabindex rend l'élément focusable).
   --------------------------------------------------------------------------- */
.bulle-aide {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--couleur-fond-alt);
  color: var(--couleur-texte-clair);
  font-size: 11px;
  font-weight: 700;
  margin-left: 6px;
  cursor: help;
  position: relative;
  vertical-align: middle;
}
.bulle-aide-contenu {
  display: none;
  position: absolute;
  bottom: 130%;
  left: 50%;
  transform: translateX(-50%);
  background: var(--couleur-texte);
  color: #fff;
  font-size: 12px;
  font-weight: 400;
  text-transform: none;
  padding: 8px 12px;
  border-radius: 8px;
  width: 220px;
  max-width: 70vw;
  line-height: 1.4;
  z-index: 20;
  box-shadow: var(--ombre-carte);
}
.bulle-aide-contenu::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: var(--couleur-texte);
}
.bulle-aide:hover .bulle-aide-contenu,
.bulle-aide:focus .bulle-aide-contenu,
.bulle-aide:focus-within .bulle-aide-contenu,
.bulle-aide.ouverte .bulle-aide-contenu { display: block; }

/* Sur mobile, certaines pages remplacent une longue barre d'onglets par un
   select natif (ex. modèles de notification) : caché en desktop, affiché en
   dessous du seuil, la barre d'onglets faisant l'inverse. */
.select-notif-mobile { display: none; }
@media (max-width: 780px) {
  .onglets { display: none; }
  .select-notif-mobile { display: block; width: 100%; margin-bottom: 16px; }
}

/* Lien "retour" visible uniquement sur mobile (ex. client/commande.php —
   récapitulatif de commande, pour revenir au panier). Desktop non concerné :
   ce parcours n'a jamais eu ce lien et n'en a pas besoin (le panier reste
   généralement une étape courte, la navigation desktop est déjà aisée). */
.lien-retour-mobile { display: none; }
@media (max-width: 780px) {
  .lien-retour-mobile { display: block; }
}

/* Champ de recherche visible uniquement sur mobile (ex. rechercher_produits.php
   côté partenaire) — le champ existe déjà côté serveur mais n'était affiché
   nulle part ; on ne l'ajoute qu'en mobile pour ne rien changer à la mise en
   page desktop existante. */
.champ-recherche-mobile { display: none; }
@media (max-width: 780px) {
  .champ-recherche-mobile { display: block; flex: 1 1 100%; }
}

/* Inverse de .champ-recherche-mobile : un champ affiché normalement sur desktop
   mais masqué uniquement sur mobile (ex. Recherche sur "Ajouter des produits"). */
@media (max-width: 780px) {
  .champ-masque-mobile { display: none; }
}

/* Rangée de pilules qui ne doit jamais passer à la ligne sur mobile (ex. filtres
   Aujourd'hui/Semaine/Mois, Date, État) : reste sur une seule ligne, avec défilement
   horizontal si ça ne tient pas, plutôt que de wrapper sur plusieurs lignes. Desktop
   non concerné : flex-wrap:wrap ci-dessous reproduit exactement le comportement par
   défaut d'avant (retiré du style inline pour pouvoir être surchargé en mobile). */
.groupe-filtre-pilules-scroll { display: flex; flex-wrap: wrap; }
@media (max-width: 780px) {
  .mobile-replie-actif { display: none; }
  .groupe-filtre-pilules-scroll,
  .dashboard-filtre-periode-pilules {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .groupe-filtre-pilules-scroll > *,
  .dashboard-filtre-periode-pilules > * {
    flex-shrink: 0;
  }
}

/* Libellé raccourci sur mobile uniquement (ex. "Tous les états" -> "Toutes"),
   desktop inchangé. */
.texte-mobile-seul { display: none; }
@media (max-width: 780px) {
  .texte-desktop-seul { display: none; }
  .texte-mobile-seul { display: inline; }
}

/* Champ date remplacé par un simple bouton sur mobile (ex. plein écran des
   commandes) : l'input date reste dans le DOM et fonctionnel (le JS l'ouvre via
   showPicker()), mais devient visuellement invisible ; desktop non concerné. */
@media (max-width: 780px) {
  .champ-date-remplace-bouton-mobile { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
}
.bouton-date-mobile { display: none; }
@media (max-width: 780px) {
  .bouton-date-mobile { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; }
}

/* Bouton flottant "remonter en haut", mobile uniquement (listes longues :
   boutique, mon catalogue, référentiel produits). display:none par défaut
   pris en compte même si du JS ajoute la classe .visible — le desktop n'a
   donc jamais ce bouton, quelles que soient les interactions JS. */
.bouton-haut-page { display: none; }
@media (max-width: 780px) {
  .bouton-haut-page {
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    right: 16px;
    bottom: 84px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--couleur-fond);
    color: var(--couleur-texte);
    border: 1px solid var(--couleur-bordure);
    box-shadow: var(--ombre-carte-hover);
    z-index: 35;
    opacity: 0;
    pointer-events: none;
    transform: translateY(6px);
    transition: opacity 0.15s ease, transform 0.15s ease;
  }
  .bouton-haut-page.visible { opacity: 1; pointer-events: auto; transform: translateY(0); }
  .bouton-haut-page svg { width: 20px; height: 20px; }
}
.onglet {
  background: none;
  border: none;
  padding: 10px 16px;
  font-size: 13px;
  font-weight: 600;
  color: var(--couleur-texte-clair);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  font-family: var(--police);
}
.onglet.actif { color: var(--couleur-primaire); border-bottom-color: var(--couleur-primaire); }
.onglet:hover { color: var(--couleur-texte); }

/* Variante segmentée (pilule pleine largeur) — boutique cliente : catégories de produits */
.onglets-segmente {
  background: var(--couleur-fond-alt);
  border-bottom: none;
  border-radius: 999px;
  padding: 4px;
  display: inline-flex;
  gap: 4px;
}
.onglet-segmente { border-radius: 999px; padding: 8px 18px; border-bottom: none; }
.onglet-segmente.actif {
  background: var(--couleur-fond);
  color: var(--couleur-texte);
  border-bottom-color: transparent;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}
.onglet-segmente:hover { color: var(--couleur-texte); }

/* ---------------------------------------------------------------------------
   Modes de commande : cartes cliquables (checkbox masquée + sélecteur ~)
   --------------------------------------------------------------------------- */
.choix-modes-cartes { display: flex; gap: 12px; flex-wrap: wrap; }
.carte-mode-toggle { flex: 1 1 200px; cursor: pointer; }
.carte-mode-toggle-carte {
  border-radius: var(--rayon-carte);
  overflow: hidden;
  box-shadow: var(--ombre-carte);
  background: var(--couleur-fond);
}
.carte-mode-toggle-bandeau { height: 6px; background: #C7C7C7; transition: background 0.15s ease; }
.carte-mode-toggle input:checked ~ .carte-mode-toggle-carte .carte-mode-toggle-bandeau { background: var(--couleur-succes); }
.carte-mode-toggle-corps { padding: 20px; text-align: center; }
.carte-mode-toggle-icone { font-size: 24px; margin-bottom: 6px; }
.carte-mode-toggle-label { font-size: 13px; font-weight: 700; color: var(--couleur-texte); }
.carte-mode-toggle-desc { font-size: 12px; margin-top: 4px; }
.carte-mode-toggle-etat { font-size: 11px; font-weight: 700; margin-top: 8px; }
.carte-mode-toggle-etat .etat-actif { display: none; color: var(--couleur-succes); }
.carte-mode-toggle-etat .etat-inactif { color: var(--couleur-texte-clair); }
.carte-mode-toggle input:checked ~ .carte-mode-toggle-carte .etat-actif { display: inline; }
.carte-mode-toggle input:checked ~ .carte-mode-toggle-carte .etat-inactif { display: none; }

/* ---------------------------------------------------------------------------
   Zones de livraison : cartes colorées
   --------------------------------------------------------------------------- */
.carte-zone { border-radius: var(--rayon-carte); overflow: hidden; box-shadow: var(--ombre-carte); background: var(--couleur-fond); }
.carte-zone-bandeau { height: 6px; background: var(--couleur-succes); }
.carte-zone-inactive .carte-zone-bandeau { background: #C7C7C7; }
.carte-zone-corps { padding: 14px; }
.carte-zone-titre { font-size: 13px; font-weight: 700; color: var(--couleur-texte); }
.carte-zone-inactive .carte-zone-titre { color: var(--couleur-texte-clair); }
.carte-zone-duree { font-size: 11px; color: var(--couleur-texte-clair); margin-top: 2px; }

/* ---------------------------------------------------------------------------
   Livreurs : cartes avec avatar initiales
   --------------------------------------------------------------------------- */
/* ---------------------------------------------------------------------------
   Admin plateforme : cartes administrateurs — bandeau de couleur (avatar) + corps blanc
   --------------------------------------------------------------------------- */
.carte-admin { border-radius: var(--rayon-carte); overflow: hidden; box-shadow: var(--ombre-carte); background: var(--couleur-fond); }
.carte-admin-bandeau { height: 6px; }
.carte-admin-corps { padding: 16px; text-align: center; }
.carte-admin-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  margin: 0 auto 8px;
}
.carte-admin-nom { font-size: 13px; font-weight: 700; color: var(--couleur-texte); }
.carte-admin-email { font-size: 11px; color: var(--couleur-texte-clair); margin-top: 2px; }
.carte-admin-date { font-size: 11px; color: var(--couleur-texte-clair); margin-top: 2px; }
.badge-vous { background: var(--couleur-succes-fond); color: var(--couleur-succes); }

.carte-livreur { border-radius: var(--rayon-carte); overflow: hidden; box-shadow: var(--ombre-carte); background: var(--couleur-fond); }
.carte-livreur-bandeau { height: 6px; background: var(--couleur-succes); }
.carte-livreur-inactif .carte-livreur-bandeau { background: #C7C7C7; }
.carte-livreur-corps { text-align: center; padding: 16px; }
.carte-livreur-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  margin: 0 auto 8px;
}
.carte-livreur-nom { font-size: 13px; font-weight: 700; color: var(--couleur-texte); }
.carte-livreur-email { font-size: 11px; margin-top: 2px; }

/* ---------------------------------------------------------------------------
   Paramètres & capacité : sections colorées par thème
   --------------------------------------------------------------------------- */
.section-parametres { border-radius: 10px; padding: 18px; margin-bottom: 14px; }
.section-parametres .groupe-champ { background: transparent; }
.section-parametres-titre { font-size: 12px; font-weight: 700; margin-bottom: 12px; }
.section-parametres-bleu { background: none; }
.section-parametres-bleu .section-parametres-titre { color: var(--couleur-texte); }
.section-parametres-sable { background: #F3EDE4; }
.section-parametres-sable .section-parametres-titre { color: #5C4A33; }
.section-parametres-mauve { background: #EDE7F0; }
.section-parametres-mauve .section-parametres-titre { color: #4A3B54; }

/* ---------------------------------------------------------------------------
   Abonnement : carte façon pricing
   --------------------------------------------------------------------------- */
.carte-box-harmonisee { max-width: 420px; margin: 0 auto; text-align: center; }
.carte-abonnement-plan {
  font-size: 11px;
  font-weight: 700;
  color: var(--couleur-primaire);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 6px;
}
.carte-abonnement-prix { font-size: 32px; font-weight: 800; color: var(--couleur-texte); margin-bottom: 4px; }
.carte-abonnement-prix span { font-size: 13px; font-weight: 500; color: var(--couleur-texte-clair); }
.carte-abonnement-sous-titre { font-size: 12px; color: var(--couleur-texte-clair); margin-bottom: 16px; }
.carte-abonnement-avantages {
  text-align: left;
  font-size: 13px;
  color: var(--couleur-texte);
  line-height: 2;
  margin: 0 auto 16px;
  max-width: 260px;
}

/* ---------------------------------------------------------------------------
   Cartes de largeur plafonnée : évite l'étirement sur toute la largeur quand
   il y a peu d'éléments (tenants, livreurs, administrateurs). Contrairement à
   .grille-cartes (auto-fit, utilisée pour les produits), les cartes restent
   à une taille raisonnable et s'alignent à gauche plutôt que de s'étirer.
   --------------------------------------------------------------------------- */
.grille-cartes-compactes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 260px));
  gap: 20px;
}

/* Variante utilisée par Mon catalogue (partenaire/rechercher_produits.php) pour
   afficher le même nombre de cartes par ligne que .grille-cartes (ex. la page
   Ajouter des produits). Piste fixe 260px (au lieu de minmax) — voir le
   commentaire sur .grille-cartes plus haut : une piste fixe évite tout
   décalage entre le nombre de colonnes calculé et la largeur réellement
   appliquée, qui provoquait un chevauchement des cartes à certains niveaux
   de zoom. cf. .grille-cartes-compactes ci-dessus pour les autres usages
   (tenants, livreurs, administrateurs, zones), non concernés. */
.grille-cartes-compactes.grille-produits-5 {
  grid-template-columns: repeat(auto-fill, 260px);
}

/* ---------------------------------------------------------------------------
   Admin plateforme : cartes tenant — bandeau de couleur (statut) + corps blanc
   --------------------------------------------------------------------------- */
.carte-tenant {
  border-radius: var(--rayon-carte);
  overflow: hidden;
  box-shadow: var(--ombre-carte);
  background: var(--couleur-fond);
  position: relative;
}
.carte-tenant-bandeau { height: 6px; }
.carte-tenant-bandeau-vert { background: var(--couleur-succes); }
.carte-tenant-bandeau-orange { background: var(--couleur-attention); }
.carte-tenant-bandeau-rouge { background: var(--couleur-erreur); }
.carte-tenant-bandeau-gris { background: #C7C7C7; }
.carte-tenant-corps { padding: 16px; }
.carte-tenant-supprimer {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: none;
  background: rgba(0, 0, 0, 0.08);
  color: var(--couleur-texte-clair);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.carte-tenant-supprimer:hover { background: var(--couleur-erreur); color: #fff; }
.carte-tenant-nom { font-size: 13px; font-weight: 700; color: var(--couleur-texte); }
.carte-tenant-detail { font-size: 11px; color: var(--couleur-texte-clair); margin-top: 2px; }

/* ---------------------------------------------------------------------------
   Commandes : vue plein écran « tickets » (mode clair)
   --------------------------------------------------------------------------- */
.vue-plein-ecran {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: #F0F2F4;
  padding: 24px;
  overflow-y: auto;
}
.entete-plein-ecran {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 18px;
  font-size: 14px;
  font-weight: 700;
  color: var(--couleur-texte);
}
.entete-plein-ecran button:not(.bouton) {
  background: none;
  border: none;
  color: var(--couleur-primaire);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}
.filtres-plein-ecran {
  display: flex;
  gap: 12px;
  align-items: stretch;
  margin-bottom: 18px;
}
/* Une carte par catégorie de filtre (Date / Livraison / État), avec un liseré
   coloré distinct en haut de chacune — pour repérer la catégorie d'un coup
   d'œil, plutôt qu'une seule barre où tous les filtres se ressemblent.
   flex: 1 (au lieu d'une largeur au contenu) : les 3 cartes se partagent toute
   la largeur de l'écran à parts égales, donc les pilules de chaque catégorie
   ont plus de place et tiennent sur une seule ligne — cartes plus compactes
   en hauteur. */
.filtre-carte {
  flex: 1;
  min-width: 0;
  background: #fff;
  border: 1px solid var(--couleur-bordure);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
}
.filtre-carte-liserer { height: 4px; }
.filtre-carte-corps { padding: 10px 16px 12px; display: flex; flex-direction: column; gap: 8px; }
.filtre-carte-titre {
  font-size: 11px;
  font-weight: 700;
  color: var(--couleur-texte-clair);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  display: flex;
  align-items: center;
  gap: 5px;
}
.filtres-plein-ecran .champ { font-size: 14px; padding: 10px 12px; }

.pilules-mode { display: flex; gap: 6px; }
.pilule-mode {
  background: var(--couleur-fond-alt);
  border: 1px solid var(--couleur-bordure);
  border-radius: 999px;
  padding: 9px 18px;
  font-size: 13px;
  font-weight: 700;
  color: var(--couleur-texte);
  cursor: pointer;
  font-family: var(--police);
}
.pilule-mode.actif { background: var(--couleur-primaire); border-color: var(--couleur-primaire); color: #fff; }

/* Grille plate : toutes les commandes visibles en même temps, sans regroupement
   par statut (le statut de chaque carte reste indiqué par son propre badge —
   cf. .kanban-carte-id-discret) — pensée pour occuper tout l'écran (cuisine,
   tablette murale) et rester lisible même avec beaucoup de commandes. */
.grille-tickets-plein-ecran {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
  gap: 14px;
}
.kanban-carte {
  position: relative;
  background: #fff;
  border: 1px solid var(--couleur-bordure);
  border-radius: 10px;
  padding: 12px 14px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Bandeau fin en en-tête de carte : une couleur propre à CHAQUE statut (et
   non par rôle) — palette qui tourne selon la position du statut dans le
   workflow, cf. position_statut_workflow() + includes/commandes_html.php.
   Marges négatives + coins arrondis en haut pour venir affleurer les bords de
   .kanban-carte malgré son padding. position: relative pour ancrer la croix
   d'annulation, qui vit maintenant DANS le bandeau (en haut à droite du
   statut) plutôt que dans le corps de la carte. */
/* .kanban-carte-bandeau porte le layout commun, quelle que soit l'origine de
   la couleur (classe modificateur pour la rotation auto/annulation ci-dessous,
   ou style inline pour une couleur hex personnalisée — cf.
   includes/workflows_statuts.php :: style_bandeau_statut_workflow()). */
.kanban-carte-bandeau {
  position: relative;
  margin: -12px -14px 10px;
  padding: 6px 32px 6px 12px;
  text-align: center;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-radius: 9px 9px 0 0;
  background: #EEEEEE;
  color: var(--couleur-texte-clair);
}
.kanban-carte-bandeau-bleu   { background: #E6EEF5; color: #33495C; }
.kanban-carte-bandeau-orange { background: var(--couleur-attention-fond); color: var(--couleur-attention); }
.kanban-carte-bandeau-mauve  { background: #EDE7F0; color: #4A3B54; }
.kanban-carte-bandeau-jaune  { background: #FDF3D9; color: #8A6212; }
.kanban-carte-bandeau-vert   { background: var(--couleur-succes-fond); color: var(--couleur-succes); }
.kanban-carte-bandeau-rose   { background: #FDECF1; color: #99215A; }
.kanban-carte-bandeau-rouge  { background: var(--couleur-erreur-fond); color: var(--couleur-erreur); }

/* Croix d'annulation : en haut à droite du bandeau statut, centrée
   verticalement (top: 50% + transform, plutôt qu'un décalage deviné en
   pixels) — reste correcte quelle que soit la hauteur réelle du bandeau. */
.kanban-carte-annuler {
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1.5px solid var(--couleur-erreur);
  background: #fff;
  color: var(--couleur-erreur);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  cursor: pointer;
}
.kanban-carte-annuler:hover { background: var(--couleur-erreur); color: #fff; }
.kanban-carte-heure { font-size: 26px; font-weight: 700; color: var(--couleur-texte); line-height: 1; }
.kanban-carte-entete-f { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.kanban-carte-mode-libelle { font-size: 12px; font-weight: 800; white-space: nowrap; display: inline-flex; align-items: center; gap: 4px; }
.kanban-carte-mode-livraison { color: #185FA5; }
.kanban-carte-mode-emporter { color: var(--couleur-succes); }
.kanban-carte-paiement-icone { font-size: 13px; }
.kanban-carte-id-discret { font-size: 10px; font-weight: 600; color: var(--couleur-texte-clair); }
/* Le vrai conteneur flex-colonne du contenu de la carte (cf.
   includes/commandes_html.php) n'est PAS .kanban-carte lui-même mais
   .kanban-carte-corps, qui regroupe tout SAUF le bandeau de statut. Sans
   cette règle, .kanban-carte-corps était un simple bloc sans layout : le
   margin-top:auto de .kanban-carte-action-zone (ci-dessous) n'avait donc
   aucun effet (auto ne "pousse" qu'à l'intérieur d'un parent flex/grid), et
   le bouton restait juste après le récap au lieu d'être aligné en bas de
   carte — d'où le décalage selon la longueur du récap. */
.kanban-carte-corps { display: flex; flex-direction: column; gap: 6px; flex: 1; }
.kanban-carte-produits-bloc {
  background: var(--couleur-fond-alt);
  border-radius: 8px;
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.kanban-carte-produit-ligne { display: flex; align-items: center; gap: 8px; }
.kanban-carte-produit-qte {
  background: var(--couleur-primaire);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  border-radius: 6px;
  padding: 2px 7px;
  min-width: 20px;
  text-align: center;
  line-height: 1.4;
}
.kanban-carte-produit-nom { font-size: 14px; font-weight: 700; color: var(--couleur-texte); }
.kanban-carte-contact-f { font-size: 13px; font-weight: 700; color: var(--couleur-texte); }
.kanban-carte-adresse-f { font-size: 13px; font-weight: 600; color: #993C1D; }
/* margin-top: auto (et non une valeur fixe) : .kanban-carte est en colonne
   flex, et les cartes d'une même ligne de grille sont étirées à la même
   hauteur (comportement par défaut de la grille) — sans ce auto, le bouton
   restait juste après le récap et l'espace en trop retombait en bas de
   carte, donc à une hauteur de bouton différente selon la longueur du récap.
   Avec margin-top: auto, le bouton est toujours poussé tout en bas de la
   carte, donc aligné avec les autres cartes de la même ligne. */
.kanban-carte-action-zone { text-align: center; margin-top: auto; padding-top: 10px; }
.kanban-carte-bouton {
  border: none;
  background: var(--couleur-primaire);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  padding: 9px 12px;
  border-radius: 8px;
  cursor: pointer;
}
.kanban-carte-bouton:hover { background: var(--couleur-primaire-hover); }

@media (max-width: 780px) {
  .filtres-plein-ecran { flex-direction: column; align-items: stretch; }
  .grille-tickets-plein-ecran { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------------------
   Tableau de bord partenaire : hero boutique + stats + progression config
   --------------------------------------------------------------------------- */
.tableau-bord-hero {
  background: var(--couleur-fond);
  box-shadow: var(--ombre-carte);
  color: var(--couleur-texte);
  border-radius: var(--rayon-carte);
  padding: 22px 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.tableau-bord-hero-nom { font-size: 17px; font-weight: 800; }
.tableau-bord-hero-sous { font-size: 12px; color: var(--couleur-texte-clair); margin-top: 4px; }
.tableau-bord-hero-sous a { color: var(--couleur-primaire); text-decoration: underline; }
.tableau-bord-hero-statut {
  background: var(--couleur-succes-fond);
  color: var(--couleur-succes);
  font-size: 12px;
  font-weight: 700;
  padding: 6px 14px;
  border-radius: 999px;
  white-space: nowrap;
}
.tableau-bord-hero-statut.ferme { background: var(--couleur-fond-alt); color: var(--couleur-texte-clair); }

.tableau-bord-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 20px;
}
.tableau-bord-stats-4 { grid-template-columns: repeat(4, 1fr); }
.tableau-bord-stats-5 { grid-template-columns: repeat(5, 1fr); }
.tableau-bord-stat {
  background: var(--couleur-fond);
  border: 1px solid var(--couleur-bordure);
  border-radius: 10px;
  padding: 14px;
  text-align: center;
}
.tableau-bord-stat .valeur { font-size: 20px; font-weight: 800; color: var(--couleur-texte); }
.tableau-bord-stat .libelle { font-size: 11px; color: var(--couleur-texte-clair); margin-top: 2px; }

.tableau-bord-stat-avec-entete { padding: 0; overflow: hidden; }
.tableau-bord-stat-entete {
  background: var(--couleur-fond-alt);
  padding: 8px 12px;
  font-size: 12px;
  font-weight: 700;
  color: var(--couleur-texte);
}
.tableau-bord-stat-entete-vert { color: var(--couleur-succes); }
.tableau-bord-stat-corps { padding: 14px; }

.mon-compte-entete { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; }
.mon-compte-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #FFE4E9;
  color: var(--couleur-primaire);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 15px;
  flex-shrink: 0;
}

/* En-tête harmonisé (Design A) : icône/avatar centré + titre + sous-titre en
   haut de la carte, réutilisé sur /partenaire/abonnement.php et /partenaire/mon_compte.php. */
.box-entete-harmonisee { text-align: center; margin-bottom: 20px; }
.box-entete-harmonisee .mon-compte-avatar { margin: 0 auto 10px; }
.box-entete-harmonisee .mon-compte-avatar.icone-emoji { font-size: 20px; }
.box-entete-harmonisee-titre { font-weight: 700; font-size: 15px; }
.box-entete-harmonisee-sous-titre { font-size: 12px; color: var(--couleur-texte-clair); margin-top: 2px; }

.tableau-bord-progression {
  background: var(--couleur-fond-alt);
  border-radius: var(--rayon-carte);
  padding: 18px;
  margin-bottom: 20px;
}
.tableau-bord-progression-entete {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  font-weight: 700;
  color: var(--couleur-texte);
  margin-bottom: 8px;
}

@media (max-width: 780px) {
  .tableau-bord-stats { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------------------
   Dashboard partenaire — bloc indicateurs : adaptations mobile
   --------------------------------------------------------------------------- */
.dashboard-indicateurs-entete {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.dashboard-filtre-periode-form {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  background: var(--couleur-fond-alt);
  border-radius: 10px;
  padding: 8px 14px;
}
.dashboard-filtre-periode-select {
  width: auto;
  font-weight: 600;
  font-size: 14px;
  padding: 8px 14px;
}
.dashboard-filtre-periode-pilules {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
@media (max-width: 780px) {
  .dashboard-filtre-periode-pilules {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .dashboard-filtre-periode-pilules > * {
    flex-shrink: 0;
  }
  .dashboard-filtre-periode-autre.mobile-replie-actif {
    display: none;
  }
}
.bouton-affiner-dates-mobile { display: none; }
@media (max-width: 780px) {
  .bouton-affiner-dates-mobile { display: inline-flex; align-items: center; }
}

.pilule-mobile-seule { display: none; }
@media (max-width: 780px) {
  .pilule-mobile-seule { display: inline-block; }
}

.bouton-affiner-mobile { display: none; }
@media (max-width: 780px) {
  .bouton-affiner-mobile { display: inline-flex; align-items: center; }
}

.groupe-champ-encadre {
  border: 1px solid var(--couleur-bordure);
  border-radius: var(--rayon-carte);
  padding: 10px 16px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.filtre-rangee-rubriques { align-items: stretch; }
@media (max-width: 780px) {
  .groupe-champ-encadre {
    border: none;
    border-radius: 0;
    padding: 0;
    display: block;
  }
  .filtre-rangee-rubriques { align-items: flex-end; }
}

.panneau-livraison-defaut { display: none; }
.sous-titre-section-parametres { display: none; }
.chronologie-rail { display: none; }
@media (min-width: 781px) {
  .panneau-livraison-defaut { display: block; }
  .sous-titre-section-parametres {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--couleur-texte);
    margin-bottom: 8px;
  }
  .chronologie-parametres { display: flex; gap: 14px; }
  .chronologie-rail {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 10px;
    flex-shrink: 0;
  }
  .chronologie-point {
    width: 10px;
    height: 10px;
    min-height: 10px;
    border-radius: 50%;
    background: var(--couleur-primaire);
    margin-top: 4px;
    flex-shrink: 0;
  }
  .chronologie-ligne {
    width: 1px;
    flex: 1;
    background: var(--couleur-bordure);
    margin: 4px 0;
  }
  .chronologie-contenu { flex: 1; min-width: 0; }
}

.bouton-plein-ecran-mobile-pilule { display: none; }
@media (max-width: 780px) {
  .bouton-plein-ecran-mobile-pilule {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 700;
    padding: 5px 10px;
    border-radius: 999px;
    background: var(--couleur-fond);
    border: 1px solid var(--couleur-bordure);
    color: var(--couleur-texte);
    font-family: var(--police);
    cursor: pointer;
  }
}

.bouton-ajouter-mobile { display: none; }
@media (max-width: 780px) {
  .bouton-ajouter-mobile {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin-bottom: 16px;
  }
  .zone-formulaire-ajout-mobile { display: none; }
}

.formulaire-ajout-grille-livreur {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr auto;
  gap: 10px;
}
.formulaire-ajout-grille-zone {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr auto;
  gap: 10px;
}
@media (max-width: 780px) {
  #modale-ajouter-livreur-corps .formulaire-ajout-grille-livreur,
  #modale-ajouter-zone-corps .formulaire-ajout-grille-zone {
    grid-template-columns: 1fr;
  }
  #modale-ajouter-livreur-corps .bouton,
  #modale-ajouter-zone-corps .bouton {
    width: 100%;
  }
}
.dashboard-filtre-periode-autre {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: nowrap;
  flex-shrink: 0;
  padding-left: 12px;
  border-left: 1px solid var(--couleur-bordure);
}
.dashboard-filtre-periode-autre .champ {
  padding: 6px 10px;
  font-size: 13px;
  width: auto;
  flex-shrink: 0;
}
.categorie-cartes-mobile { display: none; }
.categorie-carte-mobile {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--couleur-fond-alt);
  border-radius: 10px;
  padding: 10px 14px;
  border-left: 3px solid var(--couleur-primaire);
}
.categorie-carte-mobile-nom { font-weight: 700; font-size: 14px; }
.categorie-carte-mobile-chiffres { font-size: 13px; color: var(--couleur-texte-clair); text-align: right; }

@media (max-width: 780px) {
  #carte-indicateurs .tableau-bord-stats { grid-template-columns: repeat(2, 1fr); }
  #carte-indicateurs .onglet { padding: 14px 16px; font-size: 14px; }
  .dashboard-indicateurs-entete { flex-direction: column; align-items: stretch; }
  .dashboard-filtre-periode-form { width: 100%; }
  .dashboard-filtre-periode-select { width: 100%; }
  #carte-indicateurs table.tableau { display: none; }
  .categorie-cartes-mobile { display: flex; flex-direction: column; gap: 8px; }
}

/* ---------------------------------------------------------------------------
   Initialisation du catalogue partenaire depuis le référentiel (cartes
   visuelles + interrupteurs par catégorie + puces cliquables par famille)
   --------------------------------------------------------------------------- */
.carte-init-categorie { display: flex; gap: 16px; align-items: flex-start; }
.vignette-init-categorie {
  width: 52px; height: 52px; border-radius: 12px; flex-shrink: 0;
  background: linear-gradient(135deg, var(--couleur-primaire), #FF7A8A);
  color: #fff; display: flex; align-items: center; justify-content: center;
  font-size: 20px; font-weight: 800;
}
.carte-init-categorie.desactivee .vignette-init-categorie { background: var(--couleur-bordure); color: var(--couleur-texte-clair); }
.carte-init-categorie.desactivee .familles-init { opacity: .45; pointer-events: none; }

.interrupteur { position: relative; display: inline-block; width: 42px; height: 24px; flex-shrink: 0; }
.interrupteur input { opacity: 0; width: 0; height: 0; position: absolute; }
.interrupteur-curseur {
  position: absolute; inset: 0; background: var(--couleur-bordure); border-radius: 999px;
  cursor: pointer; transition: background .15s;
}
.interrupteur-curseur::after {
  content: ''; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px;
  border-radius: 50%; background: #fff; transition: left .15s;
}
.interrupteur input:checked + .interrupteur-curseur { background: var(--couleur-primaire); }
.interrupteur input:checked + .interrupteur-curseur::after { left: 21px; }
.interrupteur-vert input:checked + .interrupteur-curseur { background: var(--couleur-succes); }

.puce-famille { display: inline-block; }
.puce-famille input { display: none; }
.puce-famille span {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; margin: 4px 6px 0 0;
  border-radius: 999px; border: 1.5px solid var(--couleur-bordure); color: var(--couleur-texte-clair);
  font-size: 13px; font-weight: 600; cursor: pointer; user-select: none;
}
.puce-famille input:checked + span { border-color: var(--couleur-primaire); color: var(--couleur-primaire); background: #FFF0F3; }
.puce-famille input:disabled + span { cursor: not-allowed; }

/* ---------------------------------------------------------------------------
   Boutique client (storefront)
   --------------------------------------------------------------------------- */
.entete-boutique {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, var(--couleur-primaire), #FF7A8A);
  height: 130px;
}
.entete-boutique.avec-photo { background-size: cover; background-position: center; }
.entete-boutique.sans-photo { background: linear-gradient(180deg, #8A4B23, #4A2712); }

.entete-boutique-voile {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.15);
}
.entete-boutique.sans-photo .entete-boutique-voile {
  background: radial-gradient(circle, rgba(0, 0, 0, 0.05) 0%, rgba(0, 0, 0, 0.35) 100%);
}

.entete-boutique-illustration {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  opacity: 0.35;
}

.entete-boutique-carte {
  position: relative;
  z-index: 1;
  background: var(--couleur-fond);
  border-radius: var(--rayon-carte);
  box-shadow: var(--ombre-carte);
  padding: 20px 24px;
  margin: -32px auto 24px;
  max-width: 640px;
  text-align: center;
}
.entete-boutique-carte h1 { color: var(--couleur-texte); margin: 0; }
.entete-boutique-carte .texte-accroche { font-size: 14px; color: var(--couleur-texte-clair); margin-top: 4px; }

.statut-ouverture {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 999px;
  background: var(--couleur-fond-alt);
  color: var(--couleur-texte);
  font-size: 13px;
  font-weight: 600;
  margin-top: 12px;
}
.pastille { width: 8px; height: 8px; border-radius: 50%; background: var(--couleur-succes); }
.pastille.fermee { background: #E31C1C; }

.galerie-illustrations {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
  gap: 10px;
  margin-top: 8px;
}
.illustration-choix { display: flex; flex-direction: column; align-items: center; gap: 6px; cursor: pointer; }
.illustration-choix input { position: absolute; opacity: 0; width: 0; height: 0; }
.illustration-vignette {
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: 10px;
  border: 2px solid transparent;
  box-shadow: 0 0 0 1px var(--couleur-bordure);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  color: var(--couleur-texte-clair);
  text-align: center;
}
.illustration-vignette-defaut { background: var(--couleur-fond-alt); }
.illustration-choix input:checked + .illustration-vignette {
  border-color: var(--couleur-primaire);
  box-shadow: 0 0 0 2px var(--couleur-primaire);
}
.illustration-nom { font-size: 11px; color: var(--couleur-texte-clair); text-align: center; }

.categorie-titre { margin: 32px 0 16px; }

.footer {
  padding: 24px 0;
  text-align: center;
  color: var(--couleur-texte-clair);
  font-size: 13px;
}

.footer-liens {
  margin-bottom: 8px;
}
.footer-liens a {
  color: var(--couleur-texte-clair);
}
.footer-liens a:hover {
  color: var(--couleur-texte);
  text-decoration: underline;
}

/* ---------------------------------------------------------------------------
   Page d'accueil marketing (index.php) : hero split + aperçu produit + simulateur
   --------------------------------------------------------------------------- */
.hero-marketing {
  padding: 40px 0 8px;
}

.hero-minimaliste {
  background: var(--couleur-fond);
  border: 1px solid var(--couleur-bordure);
  border-radius: var(--rayon-carte);
  padding: 40px 28px;
  text-align: center;
}
.hero-minimaliste h1 { margin-bottom: 8px; }

.etapes-parcours {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  max-width: 600px;
  margin: 34px auto 0;
  gap: 6px;
}
.etape-item { display: flex; flex-direction: column; align-items: center; width: 160px; text-align: center; }
.etape-cercle {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--couleur-fond);
  border: 2px solid var(--couleur-bordure);
  color: var(--couleur-texte);
  font-weight: 700;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;
}
.etape-cercle-active { background: var(--couleur-primaire); border-color: var(--couleur-primaire); color: #fff; }
.etape-cercle-bleu { background: #EAF1F7; border-color: #EAF1F7; color: #33495C; }
.etape-cercle-sable { background: #F3EDE4; border-color: #F3EDE4; color: #5C4A33; }
.etape-cercle-mauve { background: #EDE7F0; border-color: #EDE7F0; color: #4A3B54; }
.etape-nom { font-size: 13px; font-weight: 600; color: var(--couleur-texte); }
.etape-ligne { height: 3px; background: var(--couleur-bordure); flex: 1; margin-top: 22px; }
.etape-ligne-active { background: var(--couleur-primaire); }

.hero-marketing-split {
  display: flex;
  align-items: center;
  gap: 32px;
  flex-wrap: wrap;
}

.hero-marketing-texte { flex: 1 1 360px; }
.hero-marketing-apercu { flex: 1 1 320px; }

.hero-marketing-fonctionnalites {
  display: flex;
  gap: 24px;
  margin-top: 22px;
  flex-wrap: wrap;
}
.hero-marketing-fonctionnalites div {
  font-size: 13px;
  color: var(--couleur-texte-clair);
  display: flex;
  align-items: center;
  gap: 6px;
}

.carte-apercu-commandes {
  background: var(--couleur-fond-alt);
  border: 1px solid var(--couleur-bordure);
  border-radius: var(--rayon-carte);
  padding: 18px;
}

.carte-apercu-entete {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
  font-size: 13px;
  font-weight: 600;
}

.carte-apercu-statut {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--couleur-succes);
  font-weight: 500;
}

.ligne-commande-apercu {
  background: var(--couleur-fond);
  border-radius: 10px;
  padding: 10px 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}
.ligne-commande-apercu:last-child { margin-bottom: 0; }
.ligne-commande-apercu .titre { font-size: 13px; font-weight: 600; }
.ligne-commande-apercu .detail { font-size: 12px; color: var(--couleur-texte-clair); }

/* Rubrique fonctionnalités (page d'accueil), 3 boîtes centrées, teintes douces */
.rubrique-fonctionnalites {
  display: flex;
  justify-content: center;
  gap: 16px;
  max-width: 640px;
  margin: 0 auto;
  flex-wrap: wrap;
}

.carte-fonctionnalite {
  flex: 1 1 180px;
  max-width: 200px;
  border-radius: 10px;
  padding: 18px;
  text-align: center;
}

.rubrique-fonctionnalites-large { max-width: none; gap: 20px; }
.rubrique-fonctionnalites-large .carte-fonctionnalite { max-width: none; flex: 1 1 0; padding: 24px; border-radius: 12px; position: relative; }
.rubrique-fonctionnalites-large .carte-fonctionnalite-icone { width: 46px; height: 46px; margin-bottom: 12px; }
.rubrique-fonctionnalites-large .carte-fonctionnalite-titre { font-size: 15px; margin-bottom: 8px; }
.rubrique-fonctionnalites-large .carte-fonctionnalite-texte { font-size: 13px; }

/* Badge temps estimé, en coin de carte (parcours d'inscription) : le titre
   reste intact et court, le temps saute aux yeux sans interférer avec la
   lecture — cf. carte-fonctionnalite-titre + carte-fonctionnalite-texte. */
.carte-fonctionnalite-badge-temps {
  position: absolute;
  top: 12px;
  right: 12px;
  background: #fff;
  font-size: 10px;
  font-weight: 700;
  border-radius: 999px;
  padding: 3px 9px;
  white-space: nowrap;
}
.carte-fonctionnalite-bleu .carte-fonctionnalite-badge-temps { color: #33495C; }
.carte-fonctionnalite-sable .carte-fonctionnalite-badge-temps { color: #5C4A33; }
.carte-fonctionnalite-mauve .carte-fonctionnalite-badge-temps { color: #4A3B54; }

.carte-fonctionnalite-icone {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 10px;
}

.carte-fonctionnalite-titre { font-size: 14px; font-weight: 500; margin-bottom: 6px; }
.carte-fonctionnalite-texte { font-size: 12px; }

.carte-fonctionnalite-bleu { background: #E6EEF5; }
.carte-fonctionnalite-bleu .carte-fonctionnalite-icone { background: #D2E1EE; }
.carte-fonctionnalite-bleu .carte-fonctionnalite-titre { color: #33495C; }
.carte-fonctionnalite-bleu .carte-fonctionnalite-texte { color: #5D7086; }

.carte-fonctionnalite-sable { background: #F3EDE4; }
.carte-fonctionnalite-sable .carte-fonctionnalite-icone { background: #EADFCF; }
.carte-fonctionnalite-sable .carte-fonctionnalite-titre { color: #5C4A33; }
.carte-fonctionnalite-sable .carte-fonctionnalite-texte { color: #86735D; }

.carte-fonctionnalite-mauve { background: #EDE7F0; }
.carte-fonctionnalite-mauve .carte-fonctionnalite-icone { background: #DED2E4; }
.carte-fonctionnalite-mauve .carte-fonctionnalite-titre { color: #4A3B54; }
.carte-fonctionnalite-mauve .carte-fonctionnalite-texte { color: #7A6A86; }

.carte-fonctionnalite-vert { background: #E6F4EA; }
.carte-fonctionnalite-vert .carte-fonctionnalite-icone { background: #D2E8DA; }
.carte-fonctionnalite-vert .carte-fonctionnalite-titre { color: #1F5C34; }
.carte-fonctionnalite-vert .carte-fonctionnalite-texte { color: #4C7A5E; }

.carte-fonctionnalite-corail { background: #FDECEA; }
.carte-fonctionnalite-corail .carte-fonctionnalite-icone { background: #F9D9D4; }
.carte-fonctionnalite-corail .carte-fonctionnalite-titre { color: #993C1D; }
.carte-fonctionnalite-corail .carte-fonctionnalite-texte { color: #A3705C; }

.carte-fonctionnalite-jaune { background: #FDF3D9; }
.carte-fonctionnalite-jaune .carte-fonctionnalite-icone { background: #F9E6AE; }
.carte-fonctionnalite-jaune .carte-fonctionnalite-titre { color: #8A6212; }
.carte-fonctionnalite-jaune .carte-fonctionnalite-texte { color: #A3874F; }

.carte-fonctionnalite-gris { background: #EFF1F2; }
.carte-fonctionnalite-gris .carte-fonctionnalite-icone { background: #DEE2E4; }
.carte-fonctionnalite-gris .carte-fonctionnalite-titre { color: #3D4A4F; }
.carte-fonctionnalite-gris .carte-fonctionnalite-texte { color: #667075; }

.carte-fonctionnalite-rose { background: #FDECF1; }
.carte-fonctionnalite-rose .carte-fonctionnalite-icone { background: #F9D3E0; }
.carte-fonctionnalite-rose .carte-fonctionnalite-titre { color: #99215A; }
.carte-fonctionnalite-rose .carte-fonctionnalite-texte { color: #A35C82; }

/* Page Fonctionnalités : grille 4 colonnes des 8 fonctionnalités */
.grille-fonctionnalites {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
.grille-fonctionnalites .carte-fonctionnalite { max-width: none; flex: none; text-align: center; }

/* Vitrine par métier (page d'accueil) */
.vitrine-metiers {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 24px;
}

.carte-metier {
  border-radius: var(--rayon-carte);
  padding: 14px;
  text-align: center;
}
.carte-metier i { font-size: 22px; }
.carte-metier .carte-metier-nom { font-size: 12px; margin-top: 6px; font-weight: 600; }

.carte-metier-pizzeria { background: #FDECEA; }
.carte-metier-pizzeria i, .carte-metier-pizzeria .carte-metier-nom { color: #993C1D; }

.carte-metier-kebab { background: #FAEEDA; }
.carte-metier-kebab i, .carte-metier-kebab .carte-metier-nom { color: #854F0B; }

.carte-metier-burger { background: #EAF3DE; }
.carte-metier-burger i, .carte-metier-burger .carte-metier-nom { color: #3B6D11; }

.carte-metier-sushi { background: #E6F1FB; }
.carte-metier-sushi i, .carte-metier-sushi .carte-metier-nom { color: #185FA5; }

.vitrine-metiers-stats {
  display: flex;
  justify-content: center;
  gap: 28px;
  margin-top: 24px;
  font-size: 12px;
  color: var(--couleur-texte-clair);
}
.vitrine-metiers-stats strong { color: var(--couleur-texte); }

/* Simulateur de pertes liées aux commandes manquées */
.simulateur-pertes {
  background: #E6F1FB;
  border-radius: var(--rayon-carte);
  padding: 32px;
  margin: 48px 0;
  text-align: center;
}

.bouton-simulateur {
  background: #185FA5;
  color: #fff;
}
.bouton-simulateur:hover { background: #0C447C; }

.simulateur-champs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  max-width: 520px;
  margin: 0 auto 24px;
  text-align: left;
}

.simulateur-champs label {
  font-size: 13px;
  color: var(--couleur-texte-clair);
  display: block;
  margin-bottom: 6px;
}

.simulateur-champ-valeur {
  display: flex;
  align-items: center;
  gap: 10px;
}
.simulateur-champ-valeur span {
  font-size: 14px;
  font-weight: 700;
  min-width: 44px;
  text-align: right;
}

.simulateur-resultats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  max-width: 520px;
  margin: 0 auto 28px;
}

.simulateur-resultat-carte {
  background: var(--couleur-fond);
  border-radius: var(--rayon-carte);
  padding: 16px;
}
.simulateur-resultat-carte .libelle { font-size: 12px; color: var(--couleur-texte-clair); }
.simulateur-resultat-carte .valeur { font-size: 22px; font-weight: 700; }
.simulateur-resultat-carte .valeur.perte { color: #185FA5; }

.simulateur-graphique {
  max-width: 520px;
  margin: 0 auto;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 8px;
  height: 140px;
  background: var(--couleur-fond);
  border-radius: var(--rayon-carte);
  padding: 16px;
}

.simulateur-barre-colonne {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  height: 100%;
}

.simulateur-barre {
  width: 100%;
  max-width: 32px;
  background: #378ADD;
  border-radius: 6px 6px 0 0;
  transition: height 0.2s ease;
}

.simulateur-barre-mois {
  font-size: 11px;
  color: var(--couleur-texte-clair);
  margin-top: 6px;
}

@media (max-width: 780px) {
  .hero-marketing-split { flex-direction: column; }
  .etapes-parcours { flex-direction: column; align-items: center; gap: 12px; }
  .etape-ligne { display: none; }
  .simulateur-champs, .simulateur-resultats { grid-template-columns: 1fr; }
  .vitrine-metiers { grid-template-columns: repeat(2, 1fr); }
  .vitrine-metiers-stats { flex-direction: column; gap: 8px; }
  .rubrique-fonctionnalites { flex-direction: column; }
  .carte-fonctionnalite { max-width: none; }
  .grille-fonctionnalites { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 480px) {
  .grille-fonctionnalites { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------------------
   Page "Infos pratiques" (design 2 : héros existant + grille de cartes) —
   chaque bloc (contact, zones, fermetures, horaires, formulaire) est une
   carte indépendante. Sur desktop (>=720px) les petites cartes se rangent
   2 par ligne ; les cartes marquées .carte-info-bloc-pleine-largeur (horaires,
   formulaire) prennent toute la largeur pour rester confortables à lire.
   En dessous de 720px tout repasse en une seule colonne empilée.
   --------------------------------------------------------------------------- */
.grille-infos-pratiques {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  margin-top: 24px;
}
@media (min-width: 720px) {
  .grille-infos-pratiques { grid-template-columns: 1fr 1fr; }
}
.carte-info-bloc-pleine-largeur { grid-column: 1 / -1; }

.carte-info-bloc {
  background: var(--couleur-fond);
  border-radius: var(--rayon-carte);
  box-shadow: var(--ombre-carte);
  padding: 20px;
}

.carte-info-bloc-titre {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
  color: var(--couleur-texte);
  margin-bottom: 14px;
}

.carte-info-bloc-icone {
  width: 28px;
  height: 28px;
  min-width: 28px;
  border-radius: 8px;
  background: #F0E6F7;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Horaires en carte pleine largeur : 2 colonnes de jours sur desktop pour
   profiter de la largeur disponible plutôt qu'une longue liste verticale. */
.grille-horaires-semaine { display: grid; grid-template-columns: 1fr; gap: 0 24px; }
@media (min-width: 560px) {
  .grille-horaires-semaine { grid-template-columns: 1fr 1fr; }
}

.formulaire-nous-ecrire { max-width: 460px; }

.infos-pratiques-ligne {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--couleur-texte);
  margin-bottom: 10px;
}

.infos-pratiques-icone {
  width: 24px;
  height: 24px;
  min-width: 24px;
  border-radius: 6px;
  background: #F0E6F7;
  display: flex;
  align-items: center;
  justify-content: center;
}

.infos-pratiques-soustitre {
  font-size: 11px;
  font-weight: 600;
  color: var(--couleur-texte-clair);
  margin: 18px 0 6px;
  letter-spacing: 0.03em;
}

.infos-pratiques-jour {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  color: var(--couleur-texte);
  padding: 6px 8px;
  border-radius: 6px;
}
.infos-pratiques-jour.alterne { background: #FAF6FC; }
.infos-pratiques-jour.aujourdhui {
  background: color-mix(in srgb, var(--couleur-primaire) 12%, white);
  font-weight: 700;
}

/* Barre "Commander" fixée en bas de /client/infos.php : synthèse du catalogue
   (nb de produits par catégorie) + lien vers la boutique, toujours accessible
   pendant la consultation des infos pratiques. */
.barre-commander-fixe {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 40;
  background: var(--couleur-fond);
  border-top: 1px solid var(--couleur-bordure);
  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.06);
  padding: 12px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.barre-commander-resume {
  font-size: 12px;
  color: var(--couleur-texte-clair);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Récap panier (client/panier.php) : Total + bouton "Passer la commande".
   Desktop (>=780px) : rendu normal, en flux, exactement comme avant. Mobile
   uniquement : barre fixée en bas d'écran (même principe que
   .barre-commander-fixe ci-dessus) pour ne pas avoir à rescroller jusqu'en
   bas après avoir ajusté des quantités — le .carte parent reçoit un padding
   bas supplémentaire pour ne pas être masqué par la barre. */
.panier-recap-total { margin-top: 16px; }
@media (max-width: 780px) {
  .carte-avec-recap-fixe { padding-bottom: 84px; }
  .panier-recap {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 40;
    background: var(--couleur-fond);
    border-top: 1px solid var(--couleur-bordure);
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.06);
    padding: 12px 20px calc(12px + env(safe-area-inset-bottom, 0px));
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
  }
  .panier-recap-total { margin: 0; font-size: 15px; white-space: nowrap; }
  .panier-recap-bouton { flex-shrink: 0; }
}

/* ---------------------------------------------------------------------------
   Sélecteur de quantité sur la carte produit
   --------------------------------------------------------------------------- */
.stepper-quantite {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}

.stepper-bouton {
  width: 28px;
  height: 28px;
  min-width: 28px;
  border: 1px solid var(--couleur-bordure);
  background: var(--couleur-fond);
  border-radius: 6px;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--couleur-texte);
}
.stepper-bouton:hover { background: var(--couleur-fond-alt); }

.stepper-valeur {
  flex: 1;
  text-align: center;
  border: none;
  background: transparent;
  font-size: 14px;
  font-weight: 600;
  color: var(--couleur-texte);
  -moz-appearance: textfield;
}
.stepper-valeur::-webkit-outer-spin-button,
.stepper-valeur::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* ---------------------------------------------------------------------------
   État vide de la boutique (catalogue non configuré)
   --------------------------------------------------------------------------- */
.etat-vide-carte {
  max-width: 360px;
  margin: 40px auto;
  border: 1px solid var(--couleur-bordure);
  border-radius: var(--rayon-carte);
  padding: 24px;
  text-align: center;
  background: var(--couleur-fond);
}

.etat-vide-titre { font-size: 15px; font-weight: 600; margin-bottom: 6px; }
.etat-vide-sous-titre { font-size: 12px; color: var(--couleur-texte-clair); margin-bottom: 14px; }

.etat-vide-barre {
  background: #F0F0F0;
  border-radius: 999px;
  height: 6px;
  margin-bottom: 16px;
  overflow: hidden;
}

.etat-vide-barre-remplissage {
  background: var(--couleur-primaire);
  height: 100%;
  transition: width 0.3s ease;
}

.etat-vide-liste {
  font-size: 12px;
  color: var(--couleur-texte);
  text-align: left;
  line-height: 1.9;
}

/* Groupes d'options : navigation "drill-down" façon Réglages (partenaire/options.php) */
.groupe-options-ligne {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 14px 4px;
  border-bottom: 1px solid var(--couleur-fond-alt);
  cursor: pointer;
  background: none;
  border-left: none;
  border-right: none;
  border-top: none;
  width: 100%;
  text-align: left;
  font: inherit;
  color: inherit;
}
.groupe-options-ligne:last-child { border-bottom: none; }
.groupe-options-ligne:hover { background: var(--couleur-fond-alt); }
.groupe-options-ligne-resume { font-size: 12px; color: var(--couleur-texte-clair); margin-top: 4px; }
.groupe-options-fleche { flex-shrink: 0; color: var(--couleur-texte-clair); font-size: 18px; }

#vue-liste-groupes.cache,
#vue-liste-produits-options.cache { display: none; }

.groupe-options-detail { display: none; }
.groupe-options-detail.ouvert { display: block; }
.groupe-options-detail-retour {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  font-weight: 600;
  margin-bottom: 16px;
  color: var(--couleur-texte);
}
.groupe-options-detail-retour:hover { text-decoration: underline; }

/* Options produits : accordéon sur une seule page (partenaire/options_produits.php) */
.op-accordeon {
  border: 1px solid var(--couleur-bordure);
  border-radius: 12px;
  margin-bottom: 10px;
  overflow: hidden;
}
.op-entete {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  cursor: pointer;
}
.op-entete:hover { background: var(--couleur-fond-alt); }
.op-entete-titre { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.op-entete-resume { font-size: 12px; color: var(--couleur-texte-clair); margin-top: 4px; width: 100%; }
.op-chevron { flex-shrink: 0; color: var(--couleur-texte-clair); transition: transform 0.15s ease; }
.op-accordeon.ouvert .op-chevron { transform: rotate(90deg); }
.op-corps { display: none; padding: 0 16px 16px; border-top: 1px solid var(--couleur-fond-alt); }
.op-accordeon.ouvert .op-corps { display: block; }

/* ---------------------------------------------------------------------------
   Spinner inline (bouton en cours de traitement, ex. génération d'image IA)
   --------------------------------------------------------------------------- */
.spinner-inline {
  display: inline-block;
  width: 12px;
  height: 12px;
  border: 2px solid rgba(255, 255, 255, 0.4);
  border-top-color: #fff;
  border-radius: 50%;
  vertical-align: -2px;
  animation: spinner-inline-rotation 0.7s linear infinite;
}
@keyframes spinner-inline-rotation {
  to { transform: rotate(360deg); }
}

/* ---------------------------------------------------------------------------
   Options produits : disposition maître-détail (partenaire/options_produits.php)
   --------------------------------------------------------------------------- */
.op-disposition {
  display: grid;
  grid-template-columns: 220px 1fr;
  border: 1px solid var(--couleur-bordure);
  border-radius: var(--rayon-carte);
  overflow: hidden;
  min-height: 320px;
}
@media (max-width: 720px) {
  .op-disposition { grid-template-columns: 1fr; }
}
.op-liste { border-right: 1px solid var(--couleur-bordure); background: var(--couleur-fond); }
@media (max-width: 720px) {
  .op-liste { border-right: none; border-bottom: 1px solid var(--couleur-bordure); }
}
.op-item {
  display: block;
  padding: 12px 14px;
  border-bottom: 1px solid var(--couleur-fond-alt);
  border-left: 3px solid transparent;
  text-decoration: none;
  color: inherit;
}
.op-item:last-child { border-bottom: none; }
.op-item:hover { background: var(--couleur-fond-alt); }
.op-item.actif { border-left-color: var(--couleur-primaire); background: var(--couleur-fond-alt); }
.op-item-nom { font-size: 13px; }
.op-item.actif .op-item-nom { font-weight: 600; }
.op-item-meta { font-size: 12px; color: var(--couleur-texte-clair); margin-top: 2px; }

.op-detail { background: #FBFBFA; padding: 18px; }
.op-detail-vide { padding: 40px 18px; text-align: center; color: var(--couleur-texte-clair); font-size: 13px; }

.op-champ-nom {
  width: 100%;
  box-sizing: border-box;
  padding: 8px 10px;
  border: 1px solid var(--couleur-bordure);
  border-radius: 8px;
  font-size: 15px;
  font-weight: 600;
  background: var(--couleur-fond);
}

.op-interrupteurs { display: flex; gap: 24px; flex-wrap: wrap; margin: 14px 0; }
.op-interrupteur-ligne { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.op-interrupteur-wrap { position: relative; width: 34px; height: 18px; flex-shrink: 0; display: inline-block; }
.op-interrupteur-case { position: absolute; top: 0; left: 0; width: 34px; height: 18px; opacity: 0; margin: 0; cursor: pointer; z-index: 2; }
.op-interrupteur {
  position: absolute;
  top: 0;
  left: 0;
  width: 34px;
  height: 18px;
  border-radius: 20px;
  background: var(--couleur-bordure);
  transition: background 0.15s ease;
}
.op-interrupteur::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #fff;
  transition: left 0.12s ease;
}
.op-interrupteur-case:checked ~ .op-interrupteur { background: var(--couleur-succes); }
.op-interrupteur-case:checked ~ .op-interrupteur::after { left: 18px; }
.op-interrupteur-label { font-size: 13px; }

.op-valeur-ligne { display: flex; gap: 8px; align-items: center; margin-bottom: 6px; }
.op-valeur-ligne .champ { background: var(--couleur-fond); }

.op-categories { display: flex; gap: 6px; flex-wrap: wrap; }
.op-pill-categorie-wrap { position: relative; display: inline-block; }
.op-pill-categorie-case { position: absolute; opacity: 0; width: 1px; height: 1px; }
.op-pill-categorie {
  display: inline-block;
  font-size: 12px;
  padding: 5px 12px;
  border-radius: 20px;
  border: 1px solid var(--couleur-bordure);
  color: var(--couleur-texte-clair);
  background: var(--couleur-fond);
  cursor: pointer;
}
.op-pill-categorie-case:checked ~ .op-pill-categorie {
  background: var(--couleur-succes);
  border-color: var(--couleur-succes);
  color: #fff;
}