/* ==========================================================================
   BDS BOUTIQUE — DESIGN SYSTEM COMPLET
   Design system extrait des 6 maquettes HTML
   ========================================================================== */

/* ---------- @font-face Silka (4 graisses) ---------- */
@font-face{font-family:'Silka';font-weight:300;font-style:normal;font-display:swap;src:local('Silka Light'),url('../fonts/Silka-Light.otf') format('opentype')}
@font-face{font-family:'Silka';font-weight:400;font-style:normal;font-display:swap;src:local('Silka Regular'),url('../fonts/Silka-Regular.otf') format('opentype')}
@font-face{font-family:'Silka';font-weight:700;font-style:normal;font-display:swap;src:local('Silka Bold'),url('../fonts/Silka-Bold.otf') format('opentype')}
@font-face{font-family:'Silka';font-weight:900;font-style:normal;font-display:swap;src:local('Silka Black'),url('../fonts/Silka-Black.otf') format('opentype')}

/* ---------- :focus-visible (accueil.html:77) ---------- */
:focus-visible{outline:3px solid #6a42c2;outline-offset:2px}

/* ---------- .btn-grad (accueil.html:82-89) ---------- */
.btn-grad{background:linear-gradient(90deg,#6a42c2 0%,#8b5dff 40%,#FA7921 100%);color:#fff;border:none;cursor:pointer;text-decoration:none;font-weight:700}
.btn-grad:hover{filter:saturate(1.05) brightness(1.03);color:#fff}

/* ---------- .hairline (accueil.html:91-93) ---------- */
.hairline{box-shadow:inset 0 0 0 1px rgba(17,17,17,.08)}

/* ---------- .gpanel (accueil.html:95-114) — gradient-bordered card ---------- */
.gpanel{position:relative;background:#fff;border-radius:1rem;border:1px solid rgba(17,17,17,.08)}
.gpanel::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;background:linear-gradient(120deg,#6a42c2,#FA7921);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:.12;pointer-events:none}

/* ---------- .badge (accueil.html:116-124) ---------- */
.badge{display:inline-flex;align-items:center;gap:.4rem;font-weight:700;font-size:.7rem;padding:.35rem .6rem;border-radius:999px;line-height:1}

/* ---------- .glass (accueil.html:126-129) ---------- */
.glass{backdrop-filter:blur(6px);background:linear-gradient(180deg,rgba(255,255,255,.85),rgba(255,255,255,.6))}

/* ---------- .shadow-card (accueil.html:131-133) ---------- */
.shadow-card{box-shadow:0 8px 30px rgba(0,0,0,.06)}

/* ---------- .shadow-glow (tailwind extend) ---------- */
.shadow-glow{box-shadow:0 0 0 1px rgba(13,13,13,.06),0 12px 35px rgba(106,66,194,.15)}

/* ---------- .clip-radial (accueil.html:135-138) ---------- */
.clip-radial{-webkit-mask-image:radial-gradient(400px 120px at 50% -50px,#000,transparent);mask-image:radial-gradient(400px 120px at 50% -50px,#000,transparent)}

/* ---------- .filter-chip (catalogue.html:111-115) ---------- */
.filter-chip[aria-pressed="true"]{background:rgba(106,66,194,.12);color:#6a42c2;border-color:rgba(106,66,194,.35)}

/* ---------- Keyframes (accueil.html:28-37) ---------- */
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes glitter{0%,100%{opacity:.35}50%{opacity:1}}
@keyframes pulseSoft{0%,100%{box-shadow:0 0 0 0 rgba(106,66,194,.35)}70%{box-shadow:0 0 0 16px rgba(106,66,194,0)}}
@keyframes grow{to{width:100%}}
@keyframes fadeInUp{from{opacity:0;transform:translateY(1rem)}to{opacity:1;transform:translateY(0)}}

.animate-floaty{animation:floaty 6s ease-in-out infinite}
.animate-glitter{animation:glitter 2.2s ease-in-out infinite}
.animate-pulseSoft{animation:pulseSoft 2.4s ease-out infinite}

/* ---------- Product card hover effect (catalogue.html) ---------- */
/* P0.2: Quick-add — always visible on mobile, hover-reveal on desktop */
.bds-product-card .bds-hover-add{position:absolute;inset:.75rem;top:auto;transition:all .2s ease}
@media(hover:hover)and (pointer:fine){
  .bds-product-card .bds-hover-add{transform:translateY(.5rem);opacity:0}
  .bds-product-card:hover .bds-hover-add,.bds-product-card:focus-within .bds-hover-add{opacity:1;transform:translateY(0)}
}
.bds-product-card img.bds-card-img{transition:transform .3s ease}
.bds-product-card:hover img.bds-card-img{transform:scale(1.02)}

/* ---------- Donation pills (panier.html:140-171) ---------- */
.bds-pill input[type="radio"]{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);border:0}
.bds-pill label{cursor:pointer;user-select:none;border-radius:.75rem;border:1px solid #d1d5db;padding:.5rem .75rem;font-size:.875rem;font-weight:600;background:#fff;color:#1f2937;transition:background .15s,color .15s,border-color .15s;display:inline-block}
.bds-pill label:hover{background:#f9fafb}
.bds-pill input[type="radio"]:checked+label{background:#6a42c2;color:#fff;border-color:#6a42c2}
.bds-pill input[type="radio"]:focus-visible+label{box-shadow:0 0 0 2px rgba(106,66,194,.3)}

/* ---------- Toast notification ---------- */
#bds-toast{position:fixed;bottom:1rem;left:50%;transform:translateX(-50%) translateY(2rem);z-index:200;opacity:0;transition:all .3s ease;pointer-events:none}
#bds-toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* ---------- Confetti canvas ---------- */
#bds-confetti{position:fixed;inset:0;pointer-events:none;z-index:300;display:none}

/* ---------- Mini cart drawer (slide-in panel) ---------- */
.bds-drawer-overlay{position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:100;opacity:0;visibility:hidden;transition:opacity .25s ease,visibility .25s ease}
.bds-drawer-overlay.open{opacity:1;visibility:visible}
.bds-drawer-panel{position:fixed;top:0;right:0;width:92vw;max-width:28rem;height:100vh;background:#fff;z-index:101;transform:translateX(100%);transition:transform .3s cubic-bezier(.32,.72,0,1);box-shadow:-8px 0 30px rgba(0,0,0,.1);overflow-y:auto;display:flex;flex-direction:column}
.bds-drawer-overlay.open~.bds-drawer-panel,.bds-drawer-panel.open{transform:translateX(0)}

/* ---------- Mobile filter drawer ---------- */
.bds-filter-overlay{position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:90;opacity:0;visibility:hidden;transition:opacity .25s ease,visibility .25s ease}
.bds-filter-overlay.open{opacity:1;visibility:visible}
.bds-filter-panel{position:fixed;top:0;right:0;width:20rem;max-width:85vw;height:100vh;background:#fff;z-index:91;transform:translateX(100%);transition:transform .3s cubic-bezier(.32,.72,0,1);box-shadow:-8px 0 30px rgba(0,0,0,.1);overflow-y:auto;padding:1.25rem}
.bds-filter-overlay.open~.bds-filter-panel,.bds-filter-panel.open{transform:translateX(0)}

/* ---------- HelloAsso info box (panier.html:265-272, coordonnées.html:215-222) ---------- */
.bds-ha-box{border-radius:.75rem;border:1px solid rgb(253,186,116);background:rgb(255,247,237);padding:1rem;font-size:.875rem;line-height:1.5}

/* ---------- Progress bar (panier.html:73-88) ---------- */
.bds-progress ol{display:flex;align-items:center;gap:.75rem;font-size:.875rem;list-style:none;padding:0;margin:0}
.bds-progress .bds-step-active{font-weight:700;color:#6a42c2}

/* ---------- WooCommerce overrides ---------- */
.woocommerce a.button,.woocommerce button.button,.woocommerce input.button,.woocommerce #respond input#submit,
.woocommerce a.button.alt,.woocommerce button.button.alt,.woocommerce input.button.alt{
  background:linear-gradient(90deg,#6a42c2 0%,#8b5dff 40%,#FA7921 100%);color:#fff;border-radius:9999px;padding:.75rem 1.5rem;font-weight:700;border:none;transition:filter .15s;font-family:'Silka',ui-sans-serif,system-ui,sans-serif}
.woocommerce a.button:hover,.woocommerce button.button:hover,.woocommerce a.button.alt:hover,.woocommerce button.button.alt:hover{
  background:linear-gradient(90deg,#6a42c2 0%,#8b5dff 40%,#FA7921 100%);filter:saturate(1.05) brightness(1.03);color:#fff}
.woocommerce span.onsale{background:#FA7921;border-radius:999px;padding:.35rem .8rem;font-size:.75rem;font-weight:700;min-height:0;line-height:1.4}
.woocommerce .star-rating span::before{color:#6a42c2}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a{color:#6a42c2}
.woocommerce .woocommerce-message,.woocommerce .woocommerce-info,.woocommerce .woocommerce-error{border-top-color:#6a42c2;border-radius:.75rem}
.woocommerce .woocommerce-message::before,.woocommerce .woocommerce-info::before{color:#6a42c2}
.woocommerce .quantity .qty{width:3.5rem;text-align:center;padding:.5rem;border:1px solid #d1d5db;border-radius:9999px}
.woocommerce ul.products li.product{border:none;margin:0;padding:0}
.woocommerce ul.products li.product a img{border-radius:1rem 1rem 0 0}
.woocommerce div.product p.price,.woocommerce div.product span.price{color:#111;font-weight:900;font-size:1.5rem}

/* ---------- Print styles (confirmation.html:99-113) ---------- */
@media print{
  header,nav,.no-print,.site-header,.site-footer,.bds-drawer-overlay,.bds-drawer-panel,#bds-toast,#bds-confetti{display:none!important}
  .print\:show{display:block!important}
  body{background:#fff}
}

/* ---------- Scrollbar thin ---------- */
.bds-scroll::-webkit-scrollbar{width:4px}
.bds-scroll::-webkit-scrollbar-track{background:transparent}
.bds-scroll::-webkit-scrollbar-thumb{background:rgba(0,0,0,.12);border-radius:999px}

/* ---------- QR Code container ---------- */
.bds-qr canvas{border-radius:.5rem}

/* ---------- Icon sizing inside badges/buttons ---------- */
.badge .icon,.badge [data-lucide]{width:.75rem;height:.75rem}
.btn-grad .icon,.btn-grad [data-lucide]{width:1.25rem;height:1.25rem}

/* ---------- Ensure dialog backdrop ---------- */
dialog::backdrop{background:rgba(0,0,0,.4)}
dialog{border:none;border-radius:1rem;padding:0;max-width:32rem;width:92vw}

/* ---------- WC Checkout form fields — ISO coordonnées.html ---------- */
.woocommerce-checkout .form-row input.input-text,
.woocommerce-checkout .form-row textarea,
.woocommerce-checkout .form-row select{
  padding:.5rem .75rem;border-radius:.75rem;border:1px solid #d1d5db;width:100%;font-family:'Silka',ui-sans-serif,system-ui,sans-serif;font-size:.875rem}
.woocommerce-checkout .form-row label{display:block;font-size:.875rem;font-weight:700;margin-bottom:.25rem}
.woocommerce-checkout .form-row{margin-bottom:.75rem}
.woocommerce-checkout #order_review_heading{display:none}
/* Shipping methods as pills */
.woocommerce-checkout #shipping_method li{display:inline-block;margin-right:.5rem}
.woocommerce-checkout #shipping_method li label{cursor:pointer;user-select:none;border-radius:.75rem;border:1px solid #d1d5db;padding:.5rem .75rem;font-size:.875rem;font-weight:600;background:#fff;transition:all .15s}
.woocommerce-checkout #shipping_method li input[type="radio"]{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
.woocommerce-checkout #shipping_method li input[type="radio"]:checked+label{background:#6a42c2;color:#fff;border-color:#6a42c2}
/* Payment box */
.woocommerce-checkout #payment{background:transparent;border:none;border-radius:0}
.woocommerce-checkout #payment div.form-row{padding:0}
.woocommerce-checkout #payment #place_order{background:linear-gradient(90deg,#6a42c2 0%,#8b5dff 40%,#FA7921 100%);color:#fff;border-radius:9999px;padding:.75rem 1.5rem;font-weight:700;border:none;width:100%;cursor:pointer;box-shadow:0 0 0 1px rgba(13,13,13,.06),0 12px 35px rgba(106,66,194,.15)}
.woocommerce-checkout #payment #place_order:hover{filter:saturate(1.05) brightness(1.03)}
/* Cart table ISO — stepper + remove */
.woocommerce-cart-form .quantity{display:contents}
.woocommerce-cart-form .quantity input.qty{border:none!important;width:3rem!important;text-align:center;padding:.5rem 0!important;border-radius:0!important}