/* ============================================================
   Panneau Infos boutique — composant de bibliothèque partagée
   (v1.8.427, règle Elhadji 2026-10-07 : « le bon comportement
   sur tibida est le bon — applique-le partout et enregistre-le
   dans une bibliothèque en dur »).

   UN SEUL rendu du panneau Infos pour toutes les vitrines
   (/s/ storefront, /r/ marketplace, surfaces futures), piloté
   par public/shared/boutique-info.js (window.BoutiqueInfo).

   Invariants géométrie/comportement (gardés par le test
   predeploy « boutique-info-panel ») :
   - box-sizing: border-box sur le composant ET ses enfants,
     posé ICI : le tiroir fait 100% + padding inclus quelle que
     soit la page hôte (cause racine du panneau /s/ tronqué :
     themes.css ne posait le border-box que sur checkout/sheet/
     modal, le tiroir 100% + 40px de padding débordait de 40px
     à gauche en content-box).
   - feuille fixe pleine hauteur ancrée à droite,
     width: min(420px, 100%), voile plein écran ;
   - z-index 990/991 : au-dessus du chrome des vitrines
     (.sf-header est à 500 — il recouvrait le panneau /s/ et
     rendait le X incliquable) et sous le widget chat.
   - défilement du fond verrouillé par le JS (compteur).
   - aucun débordement horizontal à 390px, safe-area bas,
     prefers-reduced-motion respecté.
   Couleurs : variables --bip-* branchées sur les tokens de la
   vitrine hôte quand ils existent (--sf-* du storefront),
   sinon palette claire de référence (marketplace) ; les thèmes
   sombres du storefront suivent via leurs propres --sf-*.
   ============================================================ */
.bip-veil, .bip-drawer, .bip-drawer *, .bip-drawer *::before, .bip-drawer *::after {
  box-sizing: border-box;
}
.bip-veil {
  position: fixed; inset: 0; background: rgba(0, 0, 0, .5); z-index: 990;
}
.bip-veil[hidden] { display: none; }
.bip-drawer {
  --bip-bg: var(--sf-bg, #fff);
  --bip-text: var(--sf-text, #111);
  --bip-divider: var(--sf-divider, #f0f0f0);
  --bip-border: var(--sf-border, #e5e5e5);
  --bip-surface-2: var(--sf-surface-2, #f7f7f7);
  --bip-muted: #8a8a8a;
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 991;
  width: min(420px, 100%);
  background: var(--bip-bg); color: var(--bip-text);
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding: 20px 20px calc(20px + env(safe-area-inset-bottom));
  box-shadow: -8px 0 32px rgba(0, 0, 0, .18);
  animation: bipIn .28s ease;
  font-family: inherit;
}
.bip-drawer[hidden] { display: none; }
@keyframes bipIn { from { transform: translateX(100%); } to { transform: translateX(0); } }
@media (prefers-reduced-motion: reduce) { .bip-drawer { animation: none; } }

.bip-x {
  position: absolute; top: 14px; right: 14px; width: 40px; height: 40px;
  border-radius: 50%; border: 1px solid var(--bip-border); background: var(--bip-bg);
  font-size: 18px; line-height: 1; cursor: pointer; color: inherit;
  display: flex; align-items: center; justify-content: center;
  -webkit-tap-highlight-color: transparent;
}
.bip-drawer h2 { font-size: 18px; margin: 0 48px 8px 0; }
.bip-status {
  display: inline-block; font-size: 12px; font-weight: 700;
  padding: 6px 12px; border-radius: 999px; margin-bottom: 6px;
}
.bip-status.open { background: #e6f7e6; color: #1a7a1a; }
.bip-status.closed { background: #fdeaea; color: #b91c1c; }
.bip-accepts { font-size: 12px; opacity: .7; margin: 4px 0 0; }
.bip-notice {
  margin: 10px 0 2px; padding: 12px 14px; background: #fff7ed;
  border: 1px solid #fef3c7; border-radius: 12px;
  font-size: 14px; font-weight: 700; color: #c2410c; text-align: center;
}
.bip-drawer h3 {
  font-size: 12px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--bip-muted); margin: 20px 0 10px; font-weight: 700;
}
.bip-hrow {
  display: flex; justify-content: space-between; gap: 12px;
  padding: 8px 0; border-bottom: 1px solid var(--bip-divider); font-size: 13px;
}
.bip-hrow.today { font-weight: 700; }
.bip-zsearch {
  width: 100%; padding: 12px 14px; margin-bottom: 6px;
  border: 1px solid var(--bip-border); border-radius: 12px;
  font-size: 14px; font-family: inherit;
  background: var(--bip-surface-2); color: var(--bip-text);
}
.bip-zsearch:focus { outline: none; border-color: var(--bip-text); }
/* iOS anti-zoom (règle Elhadji 2026-10-07) : la recherche de zones est un
   champ de saisie — 16px sur tactile, sinon Safari zoome au toucher
   (constat photo sur sitndipsn.com). Garde « ios-form-overflow ». */
@media (pointer: coarse) { .bip-zsearch { font-size: 16px; } }
.bip-zblock { padding: 8px 0; border-bottom: 1px solid var(--bip-divider); }
.bip-zblock:last-child { border-bottom: 0; }
.bip-zareas { font-size: 13px; opacity: .65; line-height: 1.5; margin-bottom: 4px; }
.bip-zareas mark { background: #fef08a; color: #111; padding: 0 2px; border-radius: 3px; }
.bip-zrow { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; font-weight: 700; }
.bip-zempty { color: var(--bip-muted); font-size: 14px; text-align: center; padding: 20px 0; margin: 0; }
.bip-addr { font-size: 13px; margin: 0 0 10px; }
.bip-map { height: 180px; border-radius: 12px; overflow: hidden; margin-bottom: 10px; background: var(--bip-surface-2); }
.bip-pin { background: none; border: 0; }
.bip-pin-drop {
  display: block; width: 26px; height: 26px; border: 2px solid #fff;
  border-radius: 50% 50% 50% 0; transform: rotate(-45deg);
  box-shadow: 0 2px 6px rgba(0, 0, 0, .35);
}
.bip-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.bip-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 0 18px; border-radius: 12px;
  border: 1px solid var(--bip-border); background: var(--bip-surface-2);
  color: inherit; font-size: 14px; font-weight: 600; text-decoration: none;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.bip-soc { display: flex; flex-direction: column; gap: 2px; }
.bip-soc a {
  display: block; padding: 10px 0; border-bottom: 1px solid var(--bip-divider);
  font-size: 13px; font-weight: 600; color: inherit; text-decoration: none;
}
.bip-logo { text-align: center; margin-top: 24px; }
.bip-logo img { max-height: 64px; max-width: 70%; border-radius: 12px; object-fit: contain; }
.bip-slogan { text-align: center; color: var(--bip-muted); font-size: 10px; margin: 12px 0 0; letter-spacing: .02em; }

/* Thèmes sombres explicites : le market porte html[data-theme="dark"]
   (palette reprise de son ancien tiroir), le storefront porte ses thèmes
   sombres via data-theme + ses tokens --sf-* déjà sombres. */
html[data-theme="dark"] .bip-drawer {
  --bip-bg: #111; --bip-text: #fff; --bip-divider: rgba(255, 255, 255, .1);
  --bip-border: rgba(255, 255, 255, .2); --bip-surface-2: #1C1C1E;
  --bip-muted: rgba(255, 255, 255, .6);
}
html[data-theme="noir"] .bip-drawer,
html[data-theme="nuit-gourmande"] .bip-drawer,
html[data-theme="apple-noir"] .bip-drawer {
  --bip-muted: #a8a8a8;
}
html[data-theme="dark"] .bip-notice,
html[data-theme="noir"] .bip-notice,
html[data-theme="nuit-gourmande"] .bip-notice,
html[data-theme="apple-noir"] .bip-notice {
  background: #3a2a12; border-color: #9a6a2f; color: #fdba74;
}
@media (prefers-color-scheme: dark) {
  html:not([data-theme]) .bip-drawer {
    --bip-bg: #161616; --bip-text: #f5f5f5; --bip-divider: #2a2a2a;
    --bip-border: #3a3a3a; --bip-surface-2: #1f1f1f; --bip-muted: #a8a8a8;
  }
  html:not([data-theme]) .bip-notice { background: #3a2a12; border-color: #9a6a2f; color: #fdba74; }
}