/* shop.css — Boutique BIJOU UPEJ28 (complète Bootstrap 5.3) */

:root {
  --upej-blue: #0d6efd;
  --upej-blue-soft: #EDF4FA;
}

body { padding-bottom: env(safe-area-inset-bottom); }

/* --- Cartes produit --- */
.product-card {
  transition: box-shadow .15s ease, transform .15s ease, border-color .15s ease;
  /* Liseré gris clair au repos (qty = 0) : isole visuellement chaque carte.
     L'état .in-cart le surcharge en couleur de thème (+ anneau) ci-dessous. */
  border: 1px solid #e3e6ea !important;
}
.product-card { cursor: pointer; }
.product-card:hover { transform: translateY(-2px); box-shadow: 0 .5rem 1rem rgba(0,0,0,.12) !important; }
/* Les commandes de quantité gardent un curseur normal (pas "détail produit"). */
.product-card .input-group { cursor: auto; }
/* Produit dans le panier (quantité >= 1) : fond légèrement teinté + anneau dans
   la couleur du thème (--brand / --brand-tint injectés par theme_style). L'anneau
   est un box-shadow (hors flux -> ne décale pas la grille) ; c'est ce qui rendait
   de façon fiable l'ancien repère. Le border-color complète sur un vrai Chrome. */
.product-card.in-cart {
  border-color: var(--brand) !important;
  background-color: var(--brand-tint) !important;
  box-shadow: 0 0 0 2px var(--brand), 0 .4rem .9rem rgba(0,0,0,.12) !important;
}
.product-card.in-cart:hover {
  box-shadow: 0 0 0 2px var(--brand), 0 .6rem 1.1rem rgba(0,0,0,.16) !important;
}
.product-img {
  aspect-ratio: 1 / 1;
  object-fit: cover;
  background: var(--upej-blue-soft);
}

/* Masque les flèches natives des inputs number */
.qty-input::-webkit-outer-spin-button,
.qty-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.qty-input { -moz-appearance: textfield; }

/* --- Barre panier fixe --- */
#cartBar { z-index: 1030; }
#checkoutBtn.disabled { pointer-events: none; opacity: .5; }

/* --- Cartes de page (checkout / confirm / error) --- */
.shop-card {
  border: none;
  border-radius: 15px;
  background: #fff;
}

/* --- Zébrage léger des tableaux d'articles (panier/checkout, confirmation,
   email via inline, admin) : teinte dérivée de THEME_COLOR (--brand-tint)
   alternée avec le blanc. Bootstrap pose --bs-table-bg sur chaque cellule, on
   l'écrase donc au niveau des td. --- */
.zebra-brand > tbody > tr:nth-child(even) > td { background-color: var(--brand-tint) !important; }

/* --- Ligne meta « Réf · P.U. · cond · poids · DDM » ---
   Utilisée par les cartes du catalogue ET les 3 listes d'articles (récap
   checkout, confirmation, détail admin) : un seul endroit à régler.
   Elle PEUT se replier, mais chaque élément reste insécable (.text-nowrap).
   L'écart VERTICAL entre le nom du produit et la meta est volontairement égal
   au row-gap (écart entre deux lignes repliées) -> rythme régulier. L'écart
   HORIZONTAL reste plus large, pour bien séparer les éléments entre eux. */
.meta-line {
  display: flex;
  flex-wrap: wrap;
  column-gap: .5rem;    /* 8px : entre deux éléments d'une même ligne */
  row-gap: .125rem;     /* 2px : entre deux lignes repliées */
  margin-top: .125rem;  /* 2px : identique au row-gap ci-dessus */
  font-size: .72rem;
}

/* Variante plus lisible : totaux de l'affichage courant dans l'admin. Ils sont
   une information de synthèse, pas un détail produit -> police plus grande que
   la ligne meta, sans modifier .meta-line (partagée avec cartes et listes). */
.meta-line-lg { font-size: .85rem; }

/* --- Popup détail produit (overlay maison) --- */
.pm-overlay {
  position: fixed; inset: 0; z-index: 1060;
  display: flex; align-items: center; justify-content: center;
  padding: 1rem;
  background: rgba(0,0,0,.5);
}
.pm-overlay[hidden] { display: none; }
.pm-dialog {
  position: relative;
  background: #fff; border-radius: 15px;
  width: 100%; max-width: 420px; max-height: 90vh; overflow-y: auto;
  padding: 1.25rem; box-shadow: 0 1rem 3rem rgba(0,0,0,.3);
}
.pm-close {
  position: absolute; top: .35rem; right: .6rem;
  border: 0; background: transparent; line-height: 1;
  font-size: 1.75rem; color: #888; cursor: pointer;
  /* z-index OBLIGATOIRE depuis la galerie (v1.17.0) : .pm-gallery est elle aussi
     positionnée (relative, pour caler les flèches) et vient APRÈS dans le DOM ;
     à z-index auto elle recouvrait donc la croix. */
  z-index: 2;
}
.pm-close:hover { color: #333; }
/* Galerie photos de la popup (remplace l'ancienne .pm-img unique).
   Le défilement horizontal + scroll-snap donne le SWIPE TACTILE natif, avec
   inertie et rappel au centre : pas de handler touchstart/touchmove maison, et
   le clavier (flèches, Tab) continue de fonctionner. La barre de défilement est
   masquée, la pagination étant assurée par les points .pm-dot. */
.pm-gallery { position: relative; margin-bottom: .5rem; }
.pm-track {
  display: flex; overflow-x: auto; scroll-snap-type: x mandatory;
  border-radius: 10px; overscroll-behavior-x: contain;
  scrollbar-width: none; -ms-overflow-style: none;
}
.pm-track::-webkit-scrollbar { display: none; }
.pm-track > img {
  flex: 0 0 100%; width: 100%; aspect-ratio: 1/1; object-fit: cover;
  scroll-snap-align: center; background: var(--upej-blue-soft);
}
/* Flèches : utiles à la SOURIS seulement (au doigt, on swipe). Masquées sur les
   appareils tactiles, où elles ne feraient que recouvrir la photo. */
.pm-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 1.9rem; height: 1.9rem; border: 0; border-radius: 50%;
  background: rgba(255,255,255,.85); color: #333;
  font-size: 1.3rem; line-height: 1; padding: 0; cursor: pointer;
  box-shadow: 0 .1rem .4rem rgba(0,0,0,.25);
}
.pm-nav:hover { background: #fff; }
.pm-nav[hidden] { display: none; }
.pm-nav-prev { left: .35rem; }
.pm-nav-next { right: .35rem; }
@media (hover: none) and (pointer: coarse) { .pm-nav { display: none; } }
/* Compteur « 1/2 », posé sur la photo. pointer-events:none pour ne jamais
   intercepter le swipe. Sibling de .pm-track (et non dedans) : il n'est donc ni
   emporté par le défilement, ni rogné par son overflow. */
.pm-count {
  position: absolute; right: .5rem; bottom: .5rem;
  padding: .1rem .45rem; border-radius: 999px;
  background: rgba(0,0,0,.55); color: #fff;
  font-size: .72rem; line-height: 1.45;
  pointer-events: none;
}
.pm-count[hidden] { display: none; }
/* Points de pagination : masqués s'il n'y a qu'une photo. */
.pm-dots { display: flex; justify-content: center; gap: .35rem; margin-bottom: .75rem; }
.pm-dots[hidden] { display: none; }
.pm-dot {
  width: 9px; height: 9px; padding: 0; border: 0; border-radius: 50%;
  background: #b5b5b5; cursor: pointer;
}
.pm-dot.active { background: var(--brand); }

.pm-meta-ico { width: 1.1rem; display: inline-block; text-align: center; }

/* --- Pictos qualité (pied de catalogue, index) ---
   Mobile : 2 lignes (4 pictos puis 3). Tablette+ : une seule ligne. */
.qi-row {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start;
  column-gap: .5rem; row-gap: 1rem;
}
.qi-row .qi { width: calc(25% - .5rem); text-align: center; }   /* 4 par ligne -> 4 + 3 */
@media (min-width: 768px) {
  .qi-row { flex-wrap: nowrap; column-gap: 1rem; overflow-x: auto; }
  .qi-row .qi { width: 96px; flex: 0 0 auto; }
}

/* =========================================================================
   BON DE COMMANDE PAPIER (admin/bon-commande.php)
   -------------------------------------------------------------------------
   Formulaire vierge à imprimer. On reprend ici l'identité du bon BIJOU
   d'origine (jaune / rose / magenta), et NON le --brand-tint du site : ces
   teintes sont celles du fichier 10_Bon_de_commande_ASSO_*.xlsx, relevées
   dans son xl/styles.xml.
   ========================================================================= */

:root {
  --bc-mady:   #FFFFCC;   /* zébrage gamme principale  — « Les produits de Mady » */
  --bc-piou:   #FFE1FF;   /* zébrage gamme saisonnière — « de Piou »              */
  --bc-brown:  #7C6A4F;   /* bandeau « Les produits de Mady »                     */
  --bc-rose:   #CC3399;   /* bandeau « Sélection saisonnière de Piou » (rose BIJOU)*/
  --bc-red:    #CC0000;   /* ligne TOTAL, date limite, bandeau de haut de page    */
}

/* --bc-accent et --bc-accent-soft (sa version claire) sont injectés par
   theme_style() depuis PAPER_ACCENT_COLOR (cfg.php) : un seul endroit à
   éditer pour changer l'accent du bon. */

/* Cadre à remplir : de l'air entre les champs (Nom, Prénom, Téléphone...), qui
   étaient trop serrés. La grille Bootstrap partait de .5rem (classe g-2) : on
   double à l'écran. La valeur d'impression est resserrée dans @media print,
   pour préserver la tenue sur 1 page A4. */
/* gutter-x : 1rem, soit 8px de chaque côté entre les deux colonnes. C'est LUI
   qui sépare les tirets de gauche du libellé de droite — mesuré, 2.5rem
   donnait 48px d'écart à gauche contre 15px à droite, un déséquilibre très
   visible. À 1rem les deux valent ~15px. */
.bc-form .row { --bs-gutter-y: 1rem; --bs-gutter-x: 1rem; }

/* En-tête : les 3 lignes (titre, sous-titre, contact) étaient collées les unes
   aux autres. Petit interligne pour aérer, volontairement discret afin de ne
   pas manger la hauteur nécessaire à la tenue sur 1 page A4. */
.bc-head > * + * { margin-top: 1.2mm; }

/* Date limite de retour : encadrée en rouge, comme sur le bon d'origine. */
.bc-deadline {
  display: inline-block;          /* le cadre épouse le texte, pas la largeur */
  color: var(--bc-red); font-weight: 700; font-size: .85rem;
  border: 1.5px solid var(--bc-red); border-radius: 3px; padding: 1mm 2mm;
}

/* Ligne « Vous pouvez aussi commander en ligne ». Classe dédiée plutôt qu'une
   utilitaire mb-* : celles-ci sont en !important chez Bootstrap, impossibles à
   ajuster finement sans !important inline — qui aurait à son tour écrasé la
   compression d'impression. */
.bc-online { margin-bottom: .8rem; }

/* Mention « règlement à joindre dans une enveloppe » : rouge, italique, placée
   à droite du mode de règlement. nowrap = elle ne doit JAMAIS se couper sur
   deux lignes ; police légèrement réduite pour qu'elle tienne à côté. */
.bc-note {
  color: var(--bc-red); font-style: italic; font-weight: 600;
  white-space: nowrap; font-size: .92em;
}

/* Les listes de cases à cocher (Classe, Mode de règlement, Préférence de
   livraison) utilisent le même mécanisme .bc-field : elles démarrent donc à
   l'aplomb des tirets. */

.bc-table { width: 100%; border-collapse: collapse; font-size: 8pt; }
.bc-table th, .bc-table td { border: 1px solid #999; padding: 1.2mm 1.5mm; }
.bc-table thead th {
  font-weight: 700; text-align: center;
  background: var(--bc-accent); color: #fff;
  /* Bordures en BLANC : sur le fond coloré de l'en-tête, le gris #999 des
     autres cellules est quasiment invisible, et les colonnes ne se
     distinguaient plus. */
  border-color: #fff;
}
.bc-table .bc-name { font-weight: 600; }
.bc-table .bc-cond { color: #666; font-size: .9em; }
/* Cases laissées VIDES : le parent les remplit au stylo, d'où une hauteur
   minimale garantie même si la ligne est courte. */
.bc-table .bc-fill { min-width: 14mm; height: 6mm; background: #fff; }

/* Bandeaux de gamme : MARRON pour Mady, ROSE pour la saisonnière — cohérent
   avec le zébrage jaune/rose des deux gammes. */
.bc-section td {
  color: #fff; font-weight: 700; font-style: italic;
  text-transform: uppercase; letter-spacing: .02em;
}
.bc-section-mady td { background: var(--bc-brown); }
.bc-section-piou td { background: var(--bc-rose); }

/* Zébrage : un <tbody> PAR GAMME -> nth-child repart à 1 dans chacun, donc
   chaque gamme démarre sur une ligne teintée, comme sur le bon d'origine.
   La teinte couvre la ligne ENTIÈRE, colonnes Quantité et Total comprises. */
/* Les lignes NON teintées sont explicitement BLANCHES, et pas simplement sans
   fond. Sans ça elles étaient transparentes : à l'impression on voyait le blanc
   du papier (rendu correct), mais à l'écran le gris de la page — et seulement
   sur les 3 premières colonnes, puisque .bc-fill force déjà du blanc sur Qté et
   Total. D'où l'impression d'un zébrage gris « qui ne va pas jusqu'au bout ».
   Écran et impression sont désormais identiques.
   Ciblé sur les tbody zébrés : une règle plus large (.bc-table tbody td)
   l'emporterait sur .bc-section td et effacerait les bandeaux de gamme. */
.bc-zebra-mady > tr > td,
.bc-zebra-piou > tr > td { background: #fff; }
.bc-zebra-mady > tr:nth-child(odd) > td { background: var(--bc-mady); }
.bc-zebra-piou > tr:nth-child(odd) > td { background: var(--bc-piou); }

/* Ligne TOTAL : rouge, et plus haute que les lignes produits (c'est là qu'on
   écrit les deux totaux à la main). */
.bc-table tfoot td {
  font-weight: 700; height: 9mm;
  /* Trait ÉPAIS et sombre au-dessus du TOTAL : c'est lui qui le détache du
     dernier produit. En border-collapse, la bordure la plus large l'emporte sur
     celle de la ligne du dessus (1px #999), il n'y a donc rien à retirer côté
     produits. */
  border-top: 2px solid #333;
}
.bc-table tfoot .bc-total-label {
  background: var(--bc-accent); color: #fff; text-align: right;
  font-size: 1.15em; letter-spacing: .03em;
}
/* Les 2 cases du TOTAL restent BLANCHES comme celles des produits : ce sont des
   cases à remplir au stylo, la teinte les en distinguait sans raison. C'est le
   trait épais ci-dessus qui marque la séparation. (.bc-fill donne déjà le blanc,
   d'où l'absence de règle de fond ici.) */

/* Champs à remplir. UN SEUL mécanisme pour tous : libellé à sa largeur
   NATURELLE, puis la zone de saisie — tirets ou cases à cocher — qui occupe le
   reste. Le `gap` du flex donne un écart libellé -> saisie IDENTIQUE partout
   (c'est le but) ; en contrepartie, les zones de saisie ne démarrent
   volontairement pas toutes à la même abscisse, puisque les libellés n'ont pas
   la même longueur.
   margin-right sur les tirets : ils ne butent plus contre le libellé de la
   colonne de droite ni contre le bord du cadre. */
.bc-field { display: flex; align-items: flex-end; gap: 2mm; }
.bc-field > .bc-label { flex: 0 0 auto; white-space: nowrap; }
.bc-field > .bc-line  { flex: 1 1 auto; min-width: 0; height: 4.5mm; margin-right: 4mm; }
/* Champ de la colonne de GAUCHE : AUCUNE marge de fin, la gouttière entre
   colonnes fait déjà tout le travail. Les 4mm restent utiles à droite, où les
   tirets longent le bord du cadre sans gouttière pour les en écarter. */
.bc-field > .bc-line.bc-line-inner { margin-right: 0; }
.bc-field > .bc-opts  { flex: 1 1 auto; min-width: 0; }
/* Listes de cases : baseline, pour que le libellé s'aligne sur la PREMIÈRE
   option et non sur la dernière (flex-end le collerait en bas de la liste). */
.bc-field-opts { align-items: baseline; }
/* TIRETS et non pointillés : à la conversion en PDF, des points trop serrés
   fusionnent et donnent un trait plein. */
.bc-line { border-bottom: 1px dashed #666; display: inline-block; }
.bc-box {
  display: inline-block; width: 3.2mm; height: 3.2mm;
  border: 1px solid #333; margin-right: 1mm; vertical-align: -.3mm;
}

@media print {
  @page { size: A4 portrait; margin: 8mm; }

  /* /!\ SANS ceci, les navigateurs suppriment TOUS les fonds à l'impression :
     le jaune, le rose et le magenta disparaîtraient, or c'est tout l'intérêt
     de ce rendu. À conserver impérativement. */
  body, .bc-sheet, .bc-table, .bc-table td, .bc-table th,
  .bc-section td, .bc-deadline, .bc-note,
  .bc-table thead th, .bc-table tfoot .bc-total-label, .bc-table tfoot .bc-fill {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  /* Masque tout ce qui n'a pas à être imprimé — dont le bandeau « MODE TEST »
     que html_head() injecte automatiquement en haut de page. */
  .no-print, .alert-warning { display: none !important; }

  body { background: #fff !important; }
  .bc-sheet { margin: 0; padding: 0; max-width: none; }
  tr { break-inside: avoid; page-break-inside: avoid; }
  thead { display: table-header-group; }

  /* --- Compression pour tenir sur UNE page A4 ---------------------------
     Sans ça le bon fait ~379mm, pour 281mm utiles (A4 moins 2x8mm de marge)
     : il déborderait sur une 2e page. Le tableau pèse le plus lourd (35
     produits). Valeurs mesurées dans le navigateur -> ~260mm au total, soit
     21mm de sécurité pour absorber les écarts de rendu d'une imprimante à
     l'autre. Les lignes restent à 4,6mm, écrivables au stylo (le bon papier
     UPEJ28 2025 tenait 34 produits avec des lignes comparables).
     Uniquement à l'impression : à l'écran, la page garde une taille
     confortable à lire. */
  .bc-sheet { padding-top: 0 !important; padding-bottom: 0 !important; }
  .bc-sheet > .mb-3 { margin-bottom: .35rem !important; }
  .bc-sheet > .mb-2 { margin-bottom: .3rem !important; }
  /* Pas de surcharge de la hauteur des logos ici : elle est fixée une seule
     fois, en style inline dans paperform.php, donc identique à l'écran et à
     l'impression. Le plafond de 85px y est documenté. */
  .bc-online { margin-bottom: .45rem; }
  .bc-form { font-size: .68rem !important; padding: 1.2mm !important; }
  .bc-form .row { --bs-gutter-y: .6rem; }   /* aéré, mais moins qu'à l'écran */
  .bc-table { font-size: 7.2pt; }
  .bc-table th, .bc-table td { padding: .4mm 1.2mm; line-height: 1.15; }
  .bc-table .bc-fill { height: 4.6mm; }
  .bc-table tfoot td { height: 8mm; }
  .bc-section td { padding: .5mm 1.2mm; }
}

/* Pastilles de statut (admin) */
.badge-status-processing { background:#6f42c1; }
.badge-status-received   { background:#fd7e14; }
.badge-status-paid       { background:#198754; }
.badge-status-error      { background:#dc3545; }
.badge-status-canceled   { background:#6c757d; }