/* ===== SCOPE BOUTIQUE v4 UNIQUEMENT (n’affecte pas header/footer) ===== */
#boutique-v4{
  --brand:#8b1c1c; --brand-700:#a01f1f;
  --text:#111; --muted:#666; --bg:#f6f7f9; --card:#fff; --line:#e6e6e6;
  --r:16px; --shadow:0 2px 8px rgba(0,0,0,.08);
  --s2:8px; --s3:12px; --s4:16px; --s5:20px; --s6:24px; --s8:32px;
  --fs14:14px; --fs16:16px; --fs18:18px; --fs20:20px;
  max-width:1200px; margin:0 auto; padding:0 var(--s4);
  background-color: var(--bg);
}
#boutique-v4 *{box-sizing:border-box; max-width:100%}
#boutique-v4 img{display:block;max-width:100%;height:auto}
#boutique-v4 figure{margin:0}
#boutique-v4 .bv4-head{padding:var(--s6) 0 var(--s4)}
#boutique-v4 .bv4-head h1{margin:0 0 var(--s2);font-size:clamp(22px,3.2vw,28px);font-weight:800; color: var(--brand);}
#boutique-v4 .lead{margin:0;color:var(--muted);font-size:var(--fs14)}
#boutique-v4{overflow-x:clip} /* garde-fou anti scroll horizontal dans le SCOPE */

#boutique-v4 .bv4-tabs{
  display:flex; gap:var(--s5); align-items:center;
  overflow-x:auto; overflow-y:hidden; white-space:nowrap;
  -webkit-overflow-scrolling:touch; overscroll-behavior-x:contain; scrollbar-width:none;
  touch-action:pan-x; padding:var(--s3) 0; margin:0 0 var(--s6);
  border-bottom:1px solid var(--line);
}
#boutique-v4 .bv4-tabs::-webkit-scrollbar{display:none}
#boutique-v4 .bv4-tab{
  all:unset; position:relative; white-space:nowrap; cursor:pointer;
  color:var(--text); font-size:var(--fs16); line-height:1; padding:10px 2px;
}
#boutique-v4 .bv4-tab::before,#boutique-v4 .bv4-tab::after{content:none!important}
#boutique-v4 .bv4-tab.is-active{color:var(--brand);font-weight:800}
#boutique-v4 .bv4-tab.is-active::after{
  content:""; position:absolute; left:0; right:0; bottom:-11px; height:3px;
  border-radius:3px; background:var(--brand);
}
#boutique-v4 .bv4-tab:focus-visible{box-shadow:0 0 0 3px rgba(26,115,232,.25);border-radius:8px;outline:0}

#boutique-v4 .bv4-grid{display:grid;grid-template-columns:1fr;gap:var(--s6)}
@media(min-width:768px){ #boutique-v4 .bv4-grid{grid-template-columns:repeat(2,1fr);gap:24px} }
@media(min-width:1024px){ #boutique-v4 .bv4-grid{grid-template-columns:repeat(3,1fr);gap:24px} }

#boutique-v4 .bv4-card{background:var(--card);border-radius:var(--r);box-shadow:var(--shadow);overflow:hidden}
#boutique-v4 .bv4-media{margin:0}
#boutique-v4 .bv4-img{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;background:#eee}

#boutique-v4 .bv4-info{padding:var(--s5)}
#boutique-v4 .bv4-name{font-size:var(--fs18);font-weight:800;line-height:1.25;margin:0 0 var(--s2);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
#boutique-v4 .bv4-desc{font-size:var(--fs14);color:var(--muted);margin:0 0 var(--s4);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
#boutique-v4 .bv4-foot{display:flex;align-items:center;justify-content:space-between;gap:var(--s3)}
#boutique-v4 .bv4-price{font-weight:800;font-size:var(--fs16)}
#boutique-v4 .bv4-add{background:var(--brand);color:#fff;border:none;border-radius:12px;padding:10px 14px;font-size:var(--fs16);min-height:44px}
#boutique-v4 .bv4-add:hover{background:var(--brand-700)}

#boutique-v4 .bv4-card[hidden]{display:none!important}

.cart-fab{position:fixed;right:16px;bottom:16px;z-index:1100;display:inline-flex;align-items:center;gap:10px;background:#8b1c1c;color:#fff;border:none;border-radius:999px;padding:12px 16px;font-weight:700;box-shadow:0 6px 16px rgba(0,0,0,.18)}
.cart-fab .count{background:#fff;color:#8b1c1c;border-radius:999px;padding:2px 8px;font-weight:800}
#cart-overlay{position:fixed;inset:0;background:rgba(0,0,0,.44);z-index:1090;display:none}
#cart-overlay.show{display:block}
#cart-drawer{position:fixed;top:0;right:-420px;width:min(420px,92vw);height:100dvh;z-index:1101;background:#fff;box-shadow:-10px 0 24px rgba(0,0,0,.18);transition:right .25s ease;display:flex;flex-direction:column}
#cart-drawer.show{right:0}
.cart-header{padding:16px;border-bottom:1px solid #eee;display:flex;align-items:center;justify-content:space-between}
.cart-body{flex:1;overflow:auto;padding:12px 16px;display:flex;flex-direction:column;gap:12px}
.cart-line{display:grid;grid-template-columns:1fr auto;gap:8px;padding:12px;border:1px solid #eee;border-radius:12px;background:#fafafa}
.cart-name{font-weight:700}.cart-meta{color:#666;font-size:14px}
.cart-qty{display:flex;align-items:center;gap:8px}
.cart-qty button{width:32px;height:32px;border-radius:8px;border:1px solid #ddd;background:#fff}
.cart-price{font-weight:800;white-space:nowrap}
.cart-remove{background:none;border:none;color:#c33;font-size:13px;text-decoration:underline;cursor:pointer}
.cart-footer{border-top:1px solid #eee;padding:12px 16px;background:#fff}
.cart-total{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;font-weight:800}
.cart-actions{display:flex;gap:10px}
.cart-actions .btn{flex:1;border:none;border-radius:12px;padding:12px 14px;font-weight:700;cursor:pointer}
.btn-secondary{background:#f3f4f6}.btn-primary{background:#8b1c1c;color:#fff}.btn-primary[disabled]{opacity:.6;cursor:not-allowed}

/* Accessibilité : focus visibles et tailles tactiles */
#boutique-v4 .bv4-tab:focus-visible,#boutique-v4 .bv4-add:focus-visible{
  box-shadow:0 0 0 3px rgba(26,115,232,.25);border-radius:8px;outline:0
}
#boutique-v4 .bv4-tab,#boutique-v4 .bv4-add{min-height:44px}

/* Préférence utilisateur : réduire les animations */
@media(prefers-reduced-motion:reduce){
  #boutique-v4 *{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}

/* Performance images (rendu paresseux + ombrage sans LCP élevé) */
#boutique-v4 .bv4-img{content-visibility:auto}

/* Patch A : sur écrans <420px, diminuer la marge container pour élargir visuellement la carte */
@media(max-width:420px){ #boutique-v4{padding-inline:12px} }

/* Patch B : figure sans marge (full-bleed), déjà défini mais on verrouille */
#boutique-v4 figure{margin:0}

/* Filtrage fiable : toute carte cachée via [hidden] disparaît proprement */
#boutique-v4 .bv4-card[hidden]{display:none!important;}
/* Focus visibles pour l’accessibilité (si pas déjà défini) */
#boutique-v4 .bv4-tab:focus-visible{
  box-shadow:0 0 0 3px rgba(26,115,232,.25);
  border-radius:8px; outline:0;
}