/* ============================================================================
   STYLES DES FONCTIONNALITÉS — à charger APRÈS kit.css (utilise ses tokens).
   Couvre : quiz, multi-step, panier (drawer), filtre, toggle tarifs, carrousel, countdown.
   ============================================================================ */

/* ---- Quiz / recommandateur ---- */
.quiz { background:var(--c-surface); border:1px solid var(--c-line); border-radius:var(--radius); padding:var(--s-8); }
.quiz-progress { height:8px; background:var(--c-bg-alt); border-radius:var(--radius-pill); overflow:hidden; margin-bottom:var(--s-4); }
.quiz-progress i { display:block; height:100%; background:linear-gradient(90deg,var(--c-primary),#60a5fa); transition:width .25s ease; }
.quiz-q { margin:var(--s-2) 0 var(--s-6); outline:none; }
.quiz-options { display:grid; gap:var(--s-3); }
.quiz-option { justify-content:flex-start; text-align:left; }
.quiz-result { text-align:center; }
.quiz-email { max-width:420px; margin:var(--s-4) auto 0; text-align:left; }

/* ---- Formulaire multi-étapes ---- */
.ms-progress { height:8px; background:var(--c-bg-alt); border-radius:var(--radius-pill); overflow:hidden; margin-bottom:var(--s-6); }
.ms-progress i { display:block; height:100%; width:0; background:linear-gradient(90deg,var(--c-primary),#60a5fa); transition:width .25s ease; }
.ms-nav { display:flex; gap:var(--s-3); justify-content:space-between; margin-top:var(--s-4); }
fieldset[data-step] { border:0; padding:0; margin:0; }
fieldset[data-step] legend { font-weight:700; color:var(--c-ink); font-size:1.1rem; margin-bottom:var(--s-4); outline:none; }

/* ---- Panier (drawer) ---- */
[data-cart-drawer] { position:fixed; top:0; right:0; bottom:0; width:min(420px,100%); z-index:120;
  background:var(--c-surface); border-left:1px solid var(--c-line); box-shadow:var(--shadow-lg);
  transform:translateX(100%); transition:transform .25s ease; padding:var(--s-6); overflow:auto; }
[data-cart-drawer].is-open { transform:translateX(0); }
@media (prefers-reduced-motion: reduce){ [data-cart-drawer]{ transition:none; } }
.cart-line { display:flex; align-items:center; gap:var(--s-3); padding:var(--s-3) 0; border-bottom:1px solid var(--c-line); }
.cart-line-info { flex:1; min-width:0; }
.cart-line-info strong { display:block; color:var(--c-ink); font-size:.95rem; }
.cart-line-info small { color:var(--c-muted); }
.cart-qty { display:flex; align-items:center; gap:var(--s-2); }
.cart-qty button { width:30px; height:30px; border:1px solid var(--c-line); background:var(--c-surface); border-radius:var(--radius-sm); cursor:pointer; font-size:1rem; }
.cart-remove { border:0; background:none; color:var(--c-muted); cursor:pointer; font-size:1rem; padding:var(--s-2); }
.cart-remove:hover { color:var(--c-danger); }

/* ---- Filtre catalogue ---- */
.filter-bar { display:flex; flex-wrap:wrap; gap:var(--s-2); align-items:center; margin-bottom:var(--s-6); }
.filter-bar input[type="search"] { flex:1; min-width:200px; font:inherit; padding:var(--s-2) var(--s-4); border:2px solid var(--c-line); border-radius:var(--radius-sm); }
[data-filter-btn] { font:inherit; font-weight:600; padding:var(--s-2) var(--s-4); border:1px solid var(--c-line); background:var(--c-surface); border-radius:var(--radius-pill); cursor:pointer; color:var(--c-body); }
[data-filter-btn][aria-pressed="true"] { background:var(--c-primary); color:#fff; border-color:var(--c-primary); }

/* ---- Bascule tarifs ---- */
.toggle-switch { display:inline-flex; align-items:center; gap:var(--s-3); margin-bottom:var(--s-6); }
[data-toggle] { width:52px; height:28px; border-radius:var(--radius-pill); border:0; background:var(--c-line); position:relative; cursor:pointer; transition:background .2s; }
[data-toggle]::after { content:""; position:absolute; top:3px; left:3px; width:22px; height:22px; border-radius:50%; background:var(--c-surface); box-shadow:var(--shadow-sm); transition:left .2s; }
[data-toggle][aria-checked="true"] { background:var(--c-primary); }
[data-toggle][aria-checked="true"]::after { left:27px; }

/* ---- Carrousel ---- */
.carousel-track { display:flex; gap:var(--s-4); overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; padding-bottom:var(--s-3); scrollbar-width:thin; }
.carousel-slide { flex:0 0 85%; scroll-snap-align:start; }
@media (min-width:768px){ .carousel-slide { flex-basis:calc(33.333% - 11px); } }
.carousel-nav { display:flex; gap:var(--s-2); justify-content:flex-end; margin-top:var(--s-3); }

/* ---- Compte à rebours ---- */
[data-countdown] { display:inline-flex; gap:var(--s-3); align-items:baseline; font-weight:800; color:var(--c-ink); font-variant-numeric:tabular-nums; }
[data-countdown] [data-cd] { font-size:1.6rem; }
[data-countdown].is-expired { opacity:.7; }