/* public/css/shop.css — Boutique en ligne — Design Galerie Premium
   ════════════════════════════════════════════════════════════════
   1. Tokens & reset
   2. Nav fixe + drawer mobile
   3. Hero plein écran (catalogue)
   4. Filter bar sticky (mobile)
   5. Layout sidebar + main
   6. Sidebar (catégories + filtres)
   7. Cards Galerie + grid
   8. Banner inspire (éditorial)
   9. Pagination
   10. Filter drawer mobile + FAB cart
   11. Footer
   12. Page produit (conservé)
   13. Page panier (conservé)
   14. Page checkout (conservé)
   15. Page success (conservé)
   16. Boutons + alertes
   17. Empty state
   18. Responsive (6 breakpoints)
   ════════════════════════════════════════════════════════════════ */

/* ══════════════ 1. TOKENS & RESET ══════════════ */
:root {
  --primary: #D32F2F;
  --primary-dark: #B71C1C;
  --primary-soft: rgba(211,47,47,0.08);
  --secondary: #1A1A1A;
  --background: #FAFAFA;
  --surface: #F4F1EE;
  --cream: #FAF7F2;
  --card-bg: #FFFFFF;
  --white: #FFFFFF;
  --text: #1A1A1A;
  --text-light: #757575;
  --text-soft: #999;
  --text-muted: #757575;
  --halal: #2E7D32;
  --halal-light: #43A047;
  --halal-dark: #1B5E20;          /* AA-conforme sur cream/white pour texte < 18px */
  --halal-soft: rgba(46,125,50,0.1);
  --border: rgba(0,0,0,0.08);
  --border-strong: rgba(0,0,0,0.14);
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.04);
  --shadow-md: 0 8px 24px rgba(0,0,0,0.08);
  --shadow-lg: 0 20px 48px rgba(0,0,0,0.12);
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 18px;
  --radius-xl: 24px;
  --pad-page: clamp(16px, 4vw, 48px);
  --gap-grid: clamp(12px, 2vw, 24px);
  --font-heading: 'Playfair Display', Georgia, serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --nav-h: 64px;
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 16px);
  overflow-x: clip;
}
body {
  font-family: var(--font-body);
  color: var(--text);
  background: var(--cream);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  min-height: 100vh;
  display: flex; flex-direction: column;
  overflow-x: clip;
  width: 100%;
}
img, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }

:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; border-radius: 4px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  html { scroll-behavior: auto; }
}

.skip-link {
  position: absolute; top: -100%; left: 16px;
  background: var(--primary); color: var(--white);
  padding: 12px 24px; border-radius: 0 0 8px 8px;
  font-weight: 600; font-size: 0.88rem; z-index: 200; transition: top 0.2s;
}
.skip-link:focus { top: 0; }

/* ══════════════ 2. NAV ══════════════ */
.nav__toggle { display: none; }

.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  background: rgba(26, 26, 26, 0.97);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
.nav__inner {
  display: flex; align-items: center; gap: 16px;
  max-width: 1400px; margin: 0 auto;
  padding: 0 var(--pad-page); height: var(--nav-h);
}
.nav__burger {
  display: none;
  width: 44px; height: 44px;
  background: none; border: none; color: var(--white);
  cursor: pointer; padding: 0;
  flex-direction: column; justify-content: center; align-items: center; gap: 5px;
}
.nav__burger span {
  display: block; width: 22px; height: 2px;
  background: var(--white); border-radius: 2px;
  transition: transform 0.25s, opacity 0.2s;
}
.nav__logo {
  font-family: var(--font-heading);
  font-size: clamp(1rem, 2vw, 1.2rem);
  font-weight: 700; color: var(--white);
  letter-spacing: -0.01em; flex-shrink: 0;
  white-space: nowrap;
  /* Audit v3 #9 : tap target 44px sur le logo (lien vers accueil).
     display: inline-flex pour centrer verticalement le texte dans la zone tappable. */
  display: inline-flex; align-items: center;
  min-height: 44px;
}
.nav__logo span { color: var(--primary); }
.nav__links-wrap { margin-left: auto; }
.nav__links {
  display: flex; gap: 32px; list-style: none;
}
.nav__links a {
  font-size: 0.85rem; font-weight: 500;
  color: rgba(255,255,255,0.65);
  transition: color 0.2s;
  white-space: nowrap;
  position: relative;
}
.nav__links a:hover, .nav__links a:focus-visible { color: var(--white); }
.nav__links a.is-active { color: var(--white); }
.nav__links a.is-active::after {
  content: ''; position: absolute; bottom: -4px; left: 0; right: 0;
  height: 2px; background: var(--primary); border-radius: 2px;
}
.nav__cart {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 12px;
  background: rgba(255,255,255,0.08); color: var(--white);
  position: relative; transition: background 0.15s;
  flex-shrink: 0;
}
.nav__cart:hover, .nav__cart:focus-visible { background: var(--primary); }
/* Pulse à l'arrivée de l'animation flying-image (Sprint #9) */
.nav__cart.is-pulse {
  animation: navCartPulse 0.4s cubic-bezier(0.32, 0.72, 0, 1);
}
@keyframes navCartPulse {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.18); background: var(--primary); }
  100% { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .nav__cart.is-pulse { animation: none; }
}
.nav__cart-badge {
  position: absolute; top: -4px; right: -4px; min-width: 20px; height: 20px;
  padding: 0 5px; background: var(--primary); color: var(--white);
  border-radius: 100px; font-size: 0.7rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  /* Bordure blanche (review H4) : sépare clairement le badge rouge du bouton
     cart sur fond dark, donne un effet "pin" plus visible. */
  border: 2px solid var(--white);
  box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}

/* Drawer mobile */
.nav__drawer {
  display: none;
  position: fixed; top: var(--nav-h); left: 0; right: 0;
  background: rgba(26,26,26,0.98); backdrop-filter: blur(16px);
  border-top: 1px solid rgba(255,255,255,0.06);
  padding: 8px 16px 16px;
  transform: translateY(-100%);
  transition: transform 0.25s ease;
  z-index: 99;
}
.nav__drawer ul { list-style: none; }
.nav__drawer li { border-bottom: 1px solid rgba(255,255,255,0.06); }
.nav__drawer li:last-child { border-bottom: none; }
.nav__drawer a {
  display: block; padding: 16px 8px;
  color: rgba(255,255,255,0.85);
  font-size: 0.95rem;
}
.nav__toggle:checked ~ .nav__drawer {
  transform: translateY(0);
}
.nav__toggle:checked ~ .nav .nav__burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav__toggle:checked ~ .nav .nav__burger span:nth-child(2) { opacity: 0; }
.nav__toggle:checked ~ .nav .nav__burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ══════════════ 3. HERO PLEIN ÉCRAN (catalogue) ══════════════ */
.shop-hero {
  position: relative;
  height: clamp(380px, 60vh, 640px);
  margin-top: var(--nav-h);
  overflow: hidden;
  isolation: isolate;
  contain: layout paint;
}
.shop-hero__bg {
  position: absolute; inset: 0;
  background: url('/img/products/meat-raw.jpg') center/cover;
  /* Brightness 0.7 (vs 0.55) → garde plus de couleur viande appétissante */
  filter: brightness(0.7) saturate(1.1);
  transform: scale(1.05);
  animation: heroZoom 24s ease-out infinite alternate;
}
@keyframes heroZoom { to { transform: scale(1.12); } }
.shop-hero__overlay {
  position: absolute; inset: 0;
  /* Overlay 50% (vs 70%) — gradient plus subtil, on voit mieux la texture */
  background: linear-gradient(135deg, rgba(26,26,26,0.55), rgba(0,0,0,0.25));
}
.shop-hero__content {
  position: relative; z-index: 2;
  height: 100%; max-width: 1400px; margin: 0 auto;
  padding: 0 var(--pad-page);
  display: flex; flex-direction: column; justify-content: center;
  color: var(--white);
}
.shop-hero__breadcrumb {
  display: flex; gap: 8px; align-items: center;
  font-size: 0.78rem; color: rgba(255,255,255,0.65);
  margin-bottom: clamp(12px, 2vw, 24px); letter-spacing: 0.04em;
}
.shop-hero__breadcrumb a { color: rgba(255,255,255,0.85); transition: color 0.15s; }
.shop-hero__breadcrumb a:hover { color: var(--primary); }
.shop-hero__label {
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--primary);
  margin-bottom: 12px;
}
.shop-hero__title {
  font-family: var(--font-heading);
  font-size: clamp(2rem, 5.5vw, 4.8rem);
  font-weight: 700; line-height: 1.05;
  margin-bottom: clamp(12px, 2vw, 20px);
  letter-spacing: -0.01em;
  max-width: 14ch;
}
.shop-hero__title em { color: var(--primary); font-style: normal; }
.shop-hero__sub {
  font-size: clamp(0.95rem, 1.5vw, 1.05rem);
  color: rgba(255,255,255,0.85);
  max-width: 540px;
}
.shop-hero__stats {
  display: flex; gap: clamp(24px, 5vw, 40px);
  margin-top: clamp(20px, 3vw, 32px);
  padding-top: clamp(16px, 2vw, 24px);
  border-top: 1px solid rgba(255,255,255,0.15);
  max-width: 540px;
  flex-wrap: wrap;
}
.shop-hero__stat-val {
  font-family: var(--font-heading);
  font-size: clamp(1.4rem, 2.5vw, 1.8rem);
  font-weight: 700; line-height: 1;
}
.shop-hero__stat-lbl {
  font-size: 0.72rem; color: rgba(255,255,255,0.65);
  letter-spacing: 0.04em; margin-top: 4px;
}

/* ── Search bar (Sprint post-launch #1) ──
   Au-dessus du filter-bar mobile. Compose avec filter cat= via hidden input. */
.search-bar {
  display: block;
  padding: 0 var(--pad-page) 8px;
}
.search-bar__field {
  position: relative;
  display: flex; align-items: center;
  background: var(--white);
  border: 1.5px solid var(--border-strong);
  border-radius: 100px;
  padding: 0 12px;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.search-bar__field:focus-within {
  border-color: var(--secondary);
  box-shadow: 0 0 0 3px rgba(26,26,26,0.06);
}
.search-bar__icon {
  color: var(--text-light);
  flex-shrink: 0;
  margin-right: 8px;
}
.search-bar__input {
  flex: 1;
  height: 44px;
  border: none; outline: none;
  background: transparent;
  font-family: inherit; font-size: 0.95rem;
  color: var(--text);
  min-width: 0;
}
.search-bar__input::placeholder { color: var(--text-light); }
.search-bar__input::-webkit-search-cancel-button { display: none; }
.search-bar__clear {
  width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--text-light);
  font-size: 1.4rem; font-weight: 400; line-height: 1;
  text-decoration: none;
  transition: color 0.15s;
}
.search-bar__clear:hover, .search-bar__clear:focus-visible { color: var(--primary); }
.main__search-active {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px;
  background: var(--cream); border-radius: 100px;
  font-size: 0.85rem; color: var(--text-light);
}
.main__search-active strong { color: var(--text); }
.main__search-active a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px;
  color: var(--text-light); text-decoration: none;
  border-radius: 50%;
  transition: background 0.15s;
}
.main__search-active a:hover, .main__search-active a:focus-visible {
  background: var(--secondary); color: var(--white);
}

/* ══════════════ 4. FILTER BAR (mobile) ══════════════ */
.filter-bar {
  display: none;
  position: sticky; top: var(--nav-h); z-index: 80;
  background: rgba(255,255,255,0.96);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
  padding: 12px var(--pad-page);
}
.filter-bar__row {
  display: flex; gap: 8px; align-items: center;
  position: relative;
}
/* Audit v2 #4 : fade-out à droite sur la liste de chips horizontale,
   signale visuellement que le scroll est possible. mask-image natif
   compatible Safari/Firefox/Chrome via -webkit- prefix.
   Le fade-out s'applique seulement quand le contenu DÉBORDE (la
   scrollbar n'apparaît pas via scrollbar-width:none mais le mask reste
   utile car le dernier chip est tronqué visuellement). */
.filter-bar__chips {
  flex: 1;
  display: flex; gap: 6px; overflow-x: auto;
  scrollbar-width: none; scroll-snap-type: x proximity;
  padding: 2px 0;
  -webkit-overflow-scrolling: touch;
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent 100%);
  mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent 100%);
}
.filter-bar__chips::-webkit-scrollbar { display: none; }
.filter-bar__chip {
  padding: 12px 16px; border-radius: 100px;
  /* Audit v3 #1 : 40→44px tap target (WCAG/HIG min). */
  min-height: 44px;
  display: inline-flex; align-items: center;
  background: var(--surface); color: var(--text);
  font-size: 0.85rem; font-weight: 500;
  white-space: nowrap; flex-shrink: 0;
  scroll-snap-align: start;
  transition: all 0.15s;
}
.filter-bar__chip:hover { background: rgba(0,0,0,0.06); }
.filter-bar__chip.is-active {
  background: var(--secondary); color: var(--white);
}
.filter-bar__open {
  flex-shrink: 0; width: 44px; height: 36px; border-radius: 100px;
  background: var(--white); color: var(--text);
  border: 1px solid var(--border-strong);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; transition: all 0.15s;
}
.filter-bar__open:hover, .filter-bar__open:focus-visible {
  border-color: var(--primary); color: var(--primary);
}

/* ══════════════ 5. LAYOUT 2 COLS ══════════════ */
.shop-wrap {
  flex: 1;
  max-width: 1400px; margin: 0 auto;
  width: 100%;
  padding: clamp(32px, 5vw, 64px) var(--pad-page);
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: clamp(32px, 5vw, 64px);
  align-items: start;
  min-width: 0;
}

/* ══════════════ 6. SIDEBAR ══════════════ */
.sidebar {
  position: sticky;
  top: calc(var(--nav-h) + 24px);
  min-width: 0;
}
.sidebar__title {
  font-family: var(--font-heading); font-size: 0.7rem; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--primary);
  margin-bottom: 16px;
}
.sidebar__list { list-style: none; }
.sidebar__list a {
  display: flex; justify-content: space-between; align-items: center;
  padding: 13px 4px;
  font-size: 0.95rem; color: var(--text);
  border-bottom: 1px solid var(--border);
  transition: color 0.15s, padding 0.15s;
}
.sidebar__list a:hover { color: var(--primary); padding-left: 8px; }
.sidebar__list a.is-active { color: var(--primary); font-weight: 600; }
.sidebar__list a.is-active::before { content: '—'; margin-right: 10px; color: var(--primary); }
.sidebar__count {
  font-size: 0.78rem; color: var(--text-soft);
  background: var(--surface); padding: 2px 10px; border-radius: 100px;
  font-weight: 500;
}
.sidebar__filter-block {
  margin-top: 32px; padding: 20px;
  background: var(--white); border-radius: var(--radius-md);
  border: 1px solid var(--border);
  display: flex; flex-direction: column; gap: 4px;
}
.sidebar__filter-title {
  font-size: 0.78rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--text-light); margin-bottom: 10px;
}
.sidebar__search {
  width: 100%;
  border: 1px solid var(--border-strong); background: var(--background);
  padding: 10px 14px; border-radius: 100px; font-size: 0.85rem;
  font-family: inherit; color: var(--text);
  margin-bottom: 12px;
}
.sidebar__search:focus { border-color: var(--primary); outline: none; background: var(--white); }
.sidebar__chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px; margin: 4px 4px 4px 0; border-radius: 100px;
  background: var(--surface); border: 1px solid transparent;
  font-size: 0.85rem; cursor: pointer; transition: all 0.15s;
  user-select: none;
}
.sidebar__chip:hover { background: rgba(211,47,47,0.06); }
.sidebar__chip:has(input:checked) {
  background: var(--primary-soft); border-color: var(--primary); color: var(--primary);
}
.sidebar__chip input { accent-color: var(--primary); width: 14px; height: 14px; }
.sidebar__reset {
  display: inline-block; margin-top: 8px;
  font-size: 0.82rem; color: var(--text-muted);
  text-decoration: underline; text-underline-offset: 3px;
}
.sidebar__reset:hover { color: var(--primary); }

/* ══════════════ 7. MAIN ══════════════ */
.main { min-width: 0; }
.main__head {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: clamp(20px, 3vw, 32px);
  flex-wrap: wrap; gap: 12px;
}
.main__title {
  font-family: var(--font-heading);
  font-size: clamp(1.5rem, 3vw, 2.4rem);
  font-weight: 700; letter-spacing: -0.01em;
  line-height: 1.15;
}
.main__count { color: var(--text-light); font-size: 0.92rem; }
.main__count strong { color: var(--text); font-weight: 700; font-variant-numeric: tabular-nums; }
.main__search-active {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px; border-radius: 100px;
  background: var(--primary-soft); color: var(--primary);
  font-size: 0.85rem;
}
.main__search-active a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--primary); color: var(--white);
  font-size: 0.7rem;
}

/* Grid produits */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr));
  gap: var(--gap-grid);
  min-width: 0;
}
.grid > * { min-width: 0; }

/* ══════════════ 8. CARD ══════════════ */
.card {
  background: var(--white);
  border-radius: var(--radius-lg);
  overflow: hidden;
  position: relative;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column;
}
.card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
}
.card__link {
  display: flex; flex-direction: column;
  flex: 1; color: inherit;
}
.card__media {
  position: relative; aspect-ratio: 4/5;
  overflow: hidden; background: var(--surface);
  isolation: isolate;
}
/* Skeleton shimmer pendant le chargement de l'image (Sprint #8 — perceived perf).
   Audit v3 review #3 — Fix régression sur related products :
   - opacity 0 initial + animation CSS pure (350ms, delay 50ms) au lieu de
     dépendre du JS catalogue.ejs qui n'était pas chargé sur fiche produit
     (résultait en .related__card images invisibles). Animation forwards
     garde l'image visible si JS .is-loaded n'arrive jamais.
   - Le JS .is-loaded (catalogue) reste comme amélioration : disable
     l'animation et force opacity 1 immédiatement quand l'image est complete.
*/
.card__media::before {
  content: ''; position: absolute; inset: 0;
  background:
    linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.5) 50%, transparent 100%),
    var(--surface);
  background-size: 200% 100%, 100% 100%;
  background-repeat: no-repeat;
  /* Review H1 : animation finie (4 iterations ≈ 5.6s) + fade-out final via
     keyframes + forwards. Évite l'animation infinite qui consommait CPU/GPU
     éternellement sur related products (JS .is-loaded jamais déclenché). */
  animation: skeletonShimmer 1.4s ease-in-out 4 forwards;
  z-index: 0;
  opacity: 1;
  transition: opacity 0.25s ease-out;
}
.card__media.is-loaded::before { opacity: 0; animation: none; }
@keyframes skeletonShimmer {
  0%   { background-position: -100% 0, 0 0; opacity: 1; }
  90%  { opacity: 1; }
  100% { background-position: 100% 0, 0 0; opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .card__media::before { animation: none; opacity: 0; }
}
.card__media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.6s ease;
  /* Normalisation contrast/saturation pour homogénéiser des photos d'origines variées */
  filter: brightness(1.02) saturate(1.05);
  position: relative; z-index: 1;
  /* Audit v4 #1 : opacity 1 par défaut (au lieu de 0 + animation).
     L'animation forwards V3 n'apparait pas fiablement sur certains contextes
     (related products) — root cause exacte non identifiée mais probablement
     un timing/specificity issue. Revert au comportement le plus simple :
     image visible dès le rendu, skeleton ::before disparait au fade-out
     des keyframes (4 iterations, opacity 1→0). */
  opacity: 1;
}
.card:hover .card__media img { transform: scale(1.06); }
/* Voile subtil bottom→top pour assurer la lisibilité des badges + uniformiser le rendu */
.card__media::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,0.04) 0%, transparent 25%, transparent 70%, rgba(0,0,0,0.08) 100%);
  pointer-events: none;
  z-index: 1;
}
.card__media-placeholder {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  font-size: 4rem; opacity: 0.25;
}
.card__badges {
  position: absolute; top: 12px; left: 12px; z-index: 1;
  display: flex; flex-direction: column; gap: 6px;
  pointer-events: none;
}
.card__badge {
  padding: 5px 11px; border-radius: 100px;
  font-size: 0.66rem; font-weight: 700; letter-spacing: 0.04em;
  text-transform: uppercase;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.card__badge--halal    { background: rgba(46,125,50,0.92);   color: var(--white); }
.card__badge--popular  { background: rgba(255,193,7,0.95);   color: #5d4400; }
.card__badge--new      { background: rgba(211,47,47,0.95);   color: var(--white); }

/* CTA "+ Voir le produit" — slide up au hover desktop */
.card__add-cta {
  position: absolute; left: 14px; right: 14px; bottom: 14px; z-index: 2;
  padding: 12px; border-radius: 100px;
  background: var(--secondary); color: var(--white);
  font-family: inherit; font-size: 0.85rem; font-weight: 600;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  opacity: 0; transform: translateY(12px);
  transition: opacity 0.25s ease, transform 0.25s ease, background 0.15s;
}
.card:hover .card__add-cta,
.card:focus-within .card__add-cta {
  opacity: 1; transform: translateY(0);
}

.card__body {
  padding: clamp(14px, 2vw, 20px);
  flex: 1;
  display: flex; flex-direction: column;
}
.card__category {
  font-size: 0.68rem; font-weight: 600; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--text-soft); margin-bottom: 6px;
}
.card__name {
  font-family: var(--font-heading);
  font-size: clamp(0.95rem, 1.5vw, 1.1rem);
  font-weight: 700; line-height: 1.3; margin-bottom: 6px;
  color: var(--text);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.card__desc {
  font-size: 0.82rem; color: var(--text-light);
  line-height: 1.5;
  margin-bottom: 14px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.5em;
}
.card__price-row {
  display: flex; align-items: baseline; gap: 4px;
  margin-top: auto;
  padding-top: 12px; border-top: 1px solid var(--border);
}
.card__price {
  font-family: var(--font-heading);
  font-size: clamp(1.1rem, 2vw, 1.3rem);
  font-weight: 700; color: var(--primary);
}
.card__unit { font-size: 0.78rem; color: var(--text-light); }

/* ══════════════ 9. INSPIRE BANNER ══════════════ */
.inspire {
  grid-column: 1 / -1;
  background: var(--secondary); color: var(--white);
  border-radius: var(--radius-lg);
  padding: clamp(28px, 4vw, 48px);
  display: grid; grid-template-columns: 2fr 1fr; gap: 32px;
  align-items: center;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  margin: 8px 0;
  min-width: 0;
}
.inspire::after {
  content: ''; position: absolute; right: -80px; top: -80px;
  width: 400px; height: 400px; border-radius: 50%;
  background: radial-gradient(circle, rgba(211,47,47,0.25), transparent 70%);
  pointer-events: none;
  z-index: -1;
}
.inspire__content { min-width: 0; }
.inspire__label {
  font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--primary); font-weight: 600; margin-bottom: 12px;
}
.inspire__title {
  font-family: var(--font-heading);
  font-size: clamp(1.4rem, 2.6vw, 2.2rem);
  font-weight: 700; line-height: 1.15; margin-bottom: 12px;
}
.inspire__sub { color: rgba(255,255,255,0.7); margin-bottom: 20px; font-size: 0.95rem; }
.inspire__cta {
  display: inline-block; padding: 12px 28px; border-radius: 100px;
  background: var(--primary); color: var(--white); font-weight: 600;
  font-size: 0.88rem; transition: background 0.15s;
}
.inspire__cta:hover { background: var(--primary-dark); }
.inspire__img {
  height: 200px; border-radius: var(--radius-md); overflow: hidden;
  background: url('/img/products/grill.jpg') center/cover;
  position: relative; z-index: 1;
}

/* ══════════════ 10. PAGINATION ══════════════ */
/* Sprint UX #6 : pagination renforcée visuellement (audit externe).
   Avant : juste au bout du grid → l'utilisateur ne voyait pas qu'il y avait
   d'autres pages. Maintenant : bloc avec séparateur top + label primary
   plus visible + boutons numérotés avec contraste fort. */
.pagination {
  grid-column: 1 / -1;
  display: flex; flex-direction: column; align-items: center;
  gap: 14px;
  margin-top: clamp(32px, 4vw, 56px);
  padding-top: clamp(24px, 3vw, 32px);
  border-top: 1px solid var(--border);
  position: relative;
}
.pagination::before {
  content: ''; position: absolute; top: -1px; left: 50%;
  transform: translateX(-50%);
  width: 80px; height: 2px;
  background: var(--primary);
  border-radius: 2px;
}
.pagination__label {
  font-family: var(--font-heading);
  font-size: 0.85rem; font-weight: 700;
  color: var(--text);
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
  text-transform: uppercase;
}
.pagination__btns {
  display: flex; align-items: center; justify-content: center;
  gap: 8px; flex-wrap: wrap;
}
.pagination__btn {
  min-width: 44px; height: 44px; padding: 0 14px;
  border-radius: 100px;
  background: var(--white); border: 1.5px solid var(--border-strong);
  font-family: inherit; font-size: 0.95rem; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
  transition: all 0.15s;
  color: var(--text);
  box-shadow: var(--shadow-sm);
}
.pagination__btn:hover {
  border-color: var(--primary); color: var(--primary);
  transform: translateY(-1px);
}
.pagination__btn.is-active {
  background: var(--primary); color: var(--white); border-color: var(--primary);
  box-shadow: 0 2px 8px rgba(211, 47, 47, 0.25);
}
.pagination__btn--disabled { opacity: 0.35; pointer-events: none; box-shadow: none; }

/* ══════════════ 11. FILTER DRAWER + FAB CART ══════════════ */
.filter-drawer-toggle { display: none; }
.filter-drawer {
  display: none;
  position: fixed; inset: 0; z-index: 110;
  background: rgba(0,0,0,0.5);
  opacity: 0; pointer-events: none;
  transition: opacity 0.2s ease;
}
.filter-drawer__panel {
  position: absolute; bottom: 0; left: 0; right: 0;
  background: var(--white);
  border-radius: 24px 24px 0 0;
  padding: 16px 20px calc(20px + var(--safe-bottom));
  max-height: 80vh; overflow-y: auto;
  transform: translateY(100%);
  transition: transform 0.25s ease;
}
.filter-drawer__handle {
  width: 40px; height: 4px; border-radius: 2px;
  background: var(--border-strong);
  margin: 0 auto 16px;
}
.filter-drawer__head {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 16px;
}
.filter-drawer__title {
  font-family: var(--font-heading); font-size: 1.2rem; font-weight: 700;
}
.filter-drawer__close {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--surface); border: none; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.filter-drawer__section { margin-bottom: 20px; }
.filter-drawer__section-title {
  font-size: 0.78rem; font-weight: 600; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--text-light); margin-bottom: 10px;
}
.filter-drawer__search {
  width: 100%;
  padding: 12px 16px; border-radius: 100px;
  border: 1px solid var(--border-strong); background: var(--background);
  font-family: inherit; font-size: 0.92rem;
}
.filter-drawer__apply {
  width: 100%; padding: 14px; margin-top: 8px;
  background: var(--primary); color: var(--white); border: none;
  border-radius: 100px; font-weight: 600; font-size: 0.95rem;
  cursor: pointer; transition: background 0.15s;
}
.filter-drawer__apply:hover { background: var(--primary-dark); }
.filter-drawer__reset {
  display: block; text-align: center; margin-top: 12px;
  font-size: 0.85rem; color: var(--text-muted);
  text-decoration: underline; text-underline-offset: 3px;
}
.filter-drawer-toggle:checked ~ .filter-drawer {
  opacity: 1; pointer-events: auto;
}
.filter-drawer-toggle:checked ~ .filter-drawer .filter-drawer__panel {
  transform: translateY(0);
}

/* FAB Cart */
.fab-cart {
  display: none;
  position: fixed; bottom: calc(20px + var(--safe-bottom)); right: 20px;
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--primary); color: var(--white);
  box-shadow: 0 8px 24px rgba(211,47,47,0.4);
  align-items: center; justify-content: center;
  z-index: 90;
  transition: transform 0.15s;
}
.fab-cart:active { transform: scale(0.95); }
.fab-cart__badge {
  position: absolute; top: 4px; right: 4px;
  min-width: 22px; height: 22px;
  padding: 0 6px; background: var(--white); color: var(--primary);
  border-radius: 100px; font-size: 0.72rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid var(--primary);
}

/* ══════════════ 12. EMPTY STATE ══════════════ */
.empty-state {
  background: var(--white); border-radius: var(--radius-lg);
  padding: 64px 24px; text-align: center;
  box-shadow: var(--shadow-sm);
}
.empty-state__title { color: var(--text-muted); margin-bottom: 16px; }
.empty-state__cta {
  display: inline-block; padding: 12px 28px; border-radius: 100px;
  background: var(--primary); color: var(--white); font-weight: 600;
  font-size: 0.88rem; transition: background 0.15s;
}
.empty-state__cta:hover { background: var(--primary-dark); }

/* ══════════════ 13. FOOTER ══════════════ */
.shop-footer, .footer-shop {
  background: var(--secondary); color: var(--white);
  padding: clamp(40px, 5vw, 64px) var(--pad-page) clamp(20px, 3vw, 28px);
  margin-top: clamp(40px, 6vw, 80px);
}
.shop-footer__inner {
  max-width: 1400px; margin: 0 auto;
  display: grid; grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: clamp(24px, 4vw, 40px);
  padding-bottom: 32px; border-bottom: 1px solid rgba(255,255,255,0.08);
}
.shop-footer__brand {
  font-family: var(--font-heading); font-size: 1.25rem; font-weight: 700;
  margin-bottom: 12px;
}
.shop-footer__brand span { color: var(--primary); }
.shop-footer__addr, .shop-footer__brand-desc {
  font-size: 0.88rem; color: rgba(255,255,255,0.6); line-height: 1.6;
  max-width: 320px;
}
/* Audit v4 L2 : lien tel: dans le footer (adresse) tap target 44px. */
.shop-footer__addr a {
  color: var(--primary); font-weight: 600;
  display: inline-flex; align-items: center;
  min-height: 44px;
}
.shop-footer__title {
  font-family: var(--font-heading); font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  margin-bottom: 14px; color: rgba(255,255,255,0.65);
}
.shop-footer__links { list-style: none; }
.shop-footer__links li { margin-bottom: 4px; }
/* Audit v2 #6 (review H1) : tap targets footer 44px via min-height + flex
   centering UNIQUEMENT. Pas de padding-block (sinon = 64px par lien, footer
   exagérément étiré). Le min-height + align-items: center suffit pour WCAG. */
.shop-footer__links a {
  font-size: 0.88rem; color: rgba(255,255,255,0.65);
  transition: color 0.15s;
  display: inline-flex; align-items: center;
  min-height: 44px;
}
.shop-footer__links a:hover { color: var(--white); }
.shop-footer__hours { font-size: 0.88rem; color: rgba(255,255,255,0.7); }
.shop-footer__hours strong { color: var(--white); font-size: 1rem; }
.shop-footer__bottom {
  max-width: 1400px; margin: 20px auto 0;
  display: flex; justify-content: space-between; align-items: center;
  font-size: 0.78rem; color: rgba(255,255,255,0.5);
  flex-wrap: wrap; gap: 12px;
}
/* Audit v2 #6 : liens du footer__bottom (Mentions légales / CGV / etc.)
   passent aussi en zone tap 44px (min-height seul, sans padding-block). */
.shop-footer__bottom a {
  color: rgba(255,255,255,0.6);
  display: inline-flex; align-items: center;
  min-height: 44px;
}
.shop-footer__bottom a:hover { color: var(--white); }
/* Lien "Espace pro" : visuellement discret pour ne pas attirer les clients,
   mais cliquable et bookmarkable pour le boucher. Hauteur 44px conservée. */
.shop-footer__pro {
  opacity: 0.55; font-size: 0.78em;
}
.shop-footer__pro:hover { opacity: 1; }

/* ══════════════ 16. BOUTONS + ALERTES (générique) ══════════════ */
.shop-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 24px; border-radius: 100px;
  font-family: var(--font-body); font-size: 0.92rem; font-weight: 600;
  border: none; cursor: pointer; transition: all 0.15s;
  text-decoration: none;
}
.shop-btn--primary { background: var(--primary); color: var(--white); }
.shop-btn--primary:hover { background: var(--primary-dark); }
.shop-btn--outline {
  background: transparent; color: var(--text);
  border: 1.5px solid var(--border-strong);
}
.shop-btn--outline:hover { border-color: var(--primary); color: var(--primary); }

.alert {
  border-radius: var(--radius-md); padding: 14px 18px; margin-bottom: 24px;
  font-size: 0.92rem; line-height: 1.5;
}
.alert--error { background: rgba(211,47,47,0.08); color: var(--primary); border: 1px solid rgba(211,47,47,0.2); }
.alert--warn  { background: rgba(255,193,7,0.12); color: #6d4f00; border: 1px solid rgba(255,193,7,0.3); }

/* ══════════════ 12. PAGE PRODUIT — Nouveau layout (Sprint refacto) ══════════════ */
.shop-main {
  flex: 1;
  max-width: 1280px; margin: 0 auto;
  padding: clamp(24px, 4vw, 32px) var(--pad-page) clamp(40px, 5vw, 64px);
  width: 100%;
  margin-top: var(--nav-h);
}

/* CTA height token (utilisé pour padding-bottom mobile + safe-area) */
:root { --cta-h: calc(72px + var(--safe-bottom)); }

/* ── 12.1 Crumb (fil d'Ariane discret) ── */
.crumb {
  margin-top: var(--nav-h);
  background: transparent;
}
.crumb__inner {
  max-width: 1440px; margin: 0 auto;
  padding: 20px var(--pad-page) 4px;
  display: flex; align-items: center; gap: 8px;
  font-size: 0.78rem; color: var(--text-light);
  overflow-x: auto; scrollbar-width: none;
  white-space: nowrap;
}
.crumb__inner::-webkit-scrollbar { display: none; }
/* Audit v4 M2 : breadcrumb links tap target 44px via min-height + flex. */
.crumb a {
  color: var(--text-light); transition: color 0.15s;
  display: inline-flex; align-items: center;
  min-height: 44px;
}
.crumb a:hover { color: var(--primary); }
.crumb__sep { color: var(--text-soft); }
.crumb__current { color: var(--text); font-weight: 600; }
.back-link {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 0.85rem; color: var(--text-light);
  margin-right: auto; padding: 6px 0;
  transition: color 0.15s, gap 0.2s;
}
.back-link:hover { color: var(--primary); gap: 12px; }
/* Desktop : le breadcrumb suffit, le back-link est redondant. On le cache. */
@media (min-width: 1024px) {
  .back-link { display: none; }
}

/* ── 12.2 Product layout — 3 cols (thumbs | hero | info) ── */
.product {
  max-width: 1440px; margin: 0 auto;
  width: 100%;
  padding: clamp(16px, 3vw, 36px) var(--pad-page) clamp(40px, 6vw, 80px);
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr) 460px;
  grid-template-areas: "thumbs hero info";
  gap: clamp(20px, 3vw, 40px);
  align-items: start;
}
.thumbs   { grid-area: thumbs; }
.hero-img { grid-area: hero; }
.info     { grid-area: info; }
/* Variante : produit sans galerie multiple → on retire la track des thumbs */
.product--no-thumbs {
  grid-template-columns: minmax(0, 1fr) 460px;
  grid-template-areas: "hero info";
}

/* ── 12.3 Thumbnail rail (desktop only) ── */
.thumbs {
  position: sticky;
  top: calc(var(--nav-h) + 36px);
  display: flex; flex-direction: column; gap: 12px;
}
.thumbs--hidden { display: none; }
.thumbs__btn {
  width: 88px; aspect-ratio: 1/1;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 2px solid transparent;
  background: var(--surface);
  padding: 0; cursor: pointer;
  position: relative;
  transition: all 0.25s;
}
.thumbs__btn img {
  width: 100%; height: 100%; object-fit: cover;
  filter: brightness(0.85) saturate(0.95);
  transition: filter 0.25s, transform 0.4s;
}
.thumbs__btn:hover { border-color: var(--border-strong); transform: translateX(2px); }
.thumbs__btn:hover img { filter: brightness(1) saturate(1); }
.thumbs__btn.is-active {
  border-color: var(--secondary);
  box-shadow: var(--shadow-sm);
}
.thumbs__btn.is-active img { filter: brightness(1) saturate(1); }

/* ── 12.4 Hero gallery (carousel) ── */
.hero-img {
  position: sticky;
  top: calc(var(--nav-h) + 36px);
  aspect-ratio: 4/5;
  border-radius: var(--radius-xl);
  overflow: hidden;
  background: var(--cream);
  box-shadow: var(--shadow-lg);
  isolation: isolate;
}
.hero-img__track {
  position: absolute; inset: 0;
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.hero-img__track::-webkit-scrollbar { display: none; }
.hero-img__slide {
  flex: 0 0 100%;
  scroll-snap-align: start;
  height: 100%;
  position: relative;
  background: var(--cream);
}
.hero-img__slide img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.5s ease;
}
.hero-img:hover .hero-img__slide img { transform: scale(1.04); }
.hero-img__placeholder {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  font-size: 5rem; opacity: 0.25;
}

.hero-img__top {
  position: absolute; top: 24px; left: 24px; right: 24px;
  display: flex; justify-content: space-between; align-items: flex-start;
  pointer-events: none; z-index: 3;
}
.hero-img__badges {
  display: flex; flex-direction: row; flex-wrap: wrap; gap: 6px;
  pointer-events: auto;
  max-width: calc(100% - 60px);
}
.hero-img__badge {
  padding: 7px 14px; border-radius: 100px;
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase;
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
.hero-img__badge--halal {
  background: rgba(46,125,50,0.95); color: var(--white);
  display: inline-flex; align-items: center; gap: 6px;
}
.hero-img__badge--halal::before { content: '✓'; font-weight: 800; }
.hero-img__badge--featured { background: rgba(255,255,255,0.92); color: var(--secondary); }

.hero-img__actions {
  display: flex; flex-direction: column; gap: 8px;
  pointer-events: auto;
}
.hero-img__action {
  width: 44px; height: 44px; border-radius: 50%;
  background: rgba(255,255,255,0.92);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border: none; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: all 0.2s; color: var(--text);
}
.hero-img__action:hover { background: var(--white); color: var(--primary); transform: scale(1.08); }
.hero-img__action.is-active { color: var(--primary); }
.hero-img__action.is-active svg { fill: var(--primary); }

/* Floating back button — mobile only */
.hero-img__back {
  display: none;
  position: absolute; top: 16px; left: 16px;
  z-index: 4;
  width: 40px; height: 40px; border-radius: 50%;
  background: rgba(255,255,255,0.92);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border: none; cursor: pointer;
  align-items: center; justify-content: center;
  color: var(--text);
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  transition: transform 0.2s;
}
.hero-img__back:active { transform: scale(0.92); }

/* Quick price chip (mobile) */
.hero-img__price-chip {
  display: none;
  position: absolute; bottom: 16px; left: 16px;
  z-index: 3;
  padding: 8px 14px; border-radius: 100px;
  background: rgba(255,255,255,0.95);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  font-family: var(--font-heading);
  font-size: 0.95rem; font-weight: 700;
  color: var(--secondary);
  box-shadow: 0 4px 16px rgba(0,0,0,0.12);
}
.hero-img__price-chip small { font-weight: 500; color: var(--text-light); font-size: 0.78rem; }

/* Dots indicator (mobile/tablet) */
.hero-img__dots {
  display: none;
  position: absolute; bottom: 16px; left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  gap: 6px;
  background: rgba(26,26,26,0.55);
  padding: 7px 12px; border-radius: 100px;
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
.hero-img__dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: rgba(255,255,255,0.45);
  border: none; padding: 0; cursor: pointer;
  transition: all 0.3s ease;
}
.hero-img__dot.is-active {
  background: var(--white);
  width: 22px; border-radius: 100px;
}

/* ── 12.5 Info column ── */
.info {
  display: flex; flex-direction: column;
  min-width: 0;
  padding-top: 8px;
}
.info__category {
  font-size: 0.74rem; font-weight: 600; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--primary);
  display: inline-flex; align-items: center; gap: 8px;
  margin-bottom: 12px;
}
.info__category::after {
  content: ''; flex: 1; height: 1px; background: var(--border);
  max-width: 60px;
}
.info__title {
  font-family: var(--font-heading);
  font-size: clamp(1.8rem, 3.4vw, 2.8rem);
  font-weight: 700; line-height: 1.05;
  letter-spacing: -0.015em;
  margin-bottom: 16px;
  color: var(--text);
  overflow-wrap: anywhere;
  hyphens: auto;
}
.info__meta {
  display: flex; gap: 20px; align-items: center;
  font-size: 0.85rem; color: var(--text-light);
  flex-wrap: wrap;
  padding-bottom: 24px;
  margin-bottom: 24px;
  border-bottom: 1px solid var(--border);
}
/* SKU déplacée en bas du form (review M4) : discrète, pour mentionner au tel
   sans polluer la zone de décision d'achat. */
.info__sku {
  color: var(--text-soft);
  font-variant-numeric: tabular-nums;
  font-size: 0.74rem;
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px dashed var(--border);
  letter-spacing: 0.04em;
}

.info__price-row {
  display: flex; align-items: baseline; gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.info__price {
  font-family: var(--font-heading);
  font-size: clamp(2.2rem, 4.5vw, 3.2rem);
  font-weight: 700; color: var(--secondary);
  line-height: 0.95;
  letter-spacing: -0.02em;
  display: inline-flex; align-items: baseline; gap: 2px;
}
/* Suffixe "/kg" inline avec le prix (review M3) : avant "22,00 € le kg",
   maintenant "22,00 €/kg" attaché — clarifie que c'est un prix unitaire,
   pas un total. Taille à ~45% du prix pour rester lisible mais subordonné. */
.info__price-unit {
  font-size: 0.45em; color: var(--text-light); font-weight: 500;
  font-family: var(--font-body);
  letter-spacing: 0;
}
.info__price-tax {
  margin-left: auto;
  font-size: 0.78rem; color: var(--halal); font-weight: 600;
  display: inline-flex; align-items: center; gap: 6px;
}
.info__price-tax::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: var(--halal);
  animation: pulse 2s ease-in-out infinite;
}
.info__price-tax--out { color: var(--text-soft); }
.info__price-tax--out::before { background: var(--text-soft); animation: none; }
@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.6; transform: scale(0.8); }
}

/* Description courte produit (review L1) : italique + premiers mots en
   small-caps subtil pour donner un vibe "note du chef" plutôt qu'un texte
   commercial générique. La bordure rouge gauche reste comme accent. */
.info__desc {
  font-size: 1rem; color: var(--text);
  line-height: 1.7;
  margin: 24px 0 32px;
  padding-left: 14px;
  border-left: 2px solid var(--primary);
  font-style: italic;
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 1.05rem;
}

/* ── 12.6 Configurateur (weight grid + qty stepper) ── */
.cta-form { display: contents; }

.config { margin-bottom: 24px; }
.config__head {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 14px;
}
.config__label {
  font-size: 0.74rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--text);
}
.config__value {
  font-family: var(--font-heading);
  font-size: 0.95rem; font-weight: 700;
  color: var(--primary);
}
/* Remplace `.config__value` (valeur rouge redondante — review M1) :
   maintenant info contextuelle utile (artisanat boucher) plutôt que
   répétition de la valeur déjà visible dans le bouton noir sélectionné. */
.config__hint {
  font-size: 0.74rem;
  color: var(--text-light);
  font-style: italic;
  font-weight: 500;
}

/* Sprint priorité #6 : indicateur portions dynamique sous le weight-grid.
   Aide l'user à se projeter sur la quantité ("≈ 3 personnes") avant
   d'ajouter au panier. JS met à jour la valeur live selon le poids choisi. */
.config__portions {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 10px;
  padding: 6px 10px;
  background: var(--cream);
  border-radius: 100px;
  font-size: 0.78rem; font-weight: 500;
  color: var(--text-light);
}
.config__portions svg { color: var(--halal); flex-shrink: 0; }
.config__portions #portions-count {
  font-weight: 700;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.weight-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.weight-opt { position: relative; }
.weight-opt input { position: absolute; opacity: 0; pointer-events: none; }
.weight-opt__btn {
  display: block; text-align: center;
  padding: 14px 4px;
  border: 1.5px solid var(--border-strong);
  border-radius: var(--radius-md);
  font-family: var(--font-heading); font-size: 0.96rem; font-weight: 700;
  background: transparent;
  transition: transform 0.15s cubic-bezier(0.32, 0.72, 0, 1), border-color 0.18s, background 0.18s, box-shadow 0.18s, color 0.18s;
  cursor: pointer;
  letter-spacing: -0.01em;
  color: var(--text);
  -webkit-tap-highlight-color: transparent;
}
.weight-opt__btn:hover {
  border-color: var(--secondary);
  background: rgba(26,26,26,0.03);
}
/* Press feedback (scale 0.96) sur :active — skill rule scale-feedback :
   "subtle scale (0.95-1.05) on press for tappable cards/buttons" */
.weight-opt input:active + .weight-opt__btn,
.weight-opt__btn:active { transform: scale(0.96); }
.weight-opt input:checked + .weight-opt__btn {
  border-color: var(--secondary);
  background: var(--secondary);
  color: var(--white);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.weight-opt input:checked:active + .weight-opt__btn {
  transform: translateY(-2px) scale(0.96);
}
.weight-opt input:focus-visible + .weight-opt__btn {
  outline: 2px solid var(--primary); outline-offset: 2px;
}

.weight-custom {
  display: flex; align-items: center;
  margin-top: 10px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-md);
  padding: 4px 4px 4px 16px;
  background: var(--white);
  transition: border-color 0.15s;
  gap: 8px;
}
.weight-custom:focus-within { border-color: var(--secondary); }
.weight-custom__label {
  font-size: 0.85rem; color: var(--text-light); font-weight: 500;
  flex: 1;
  min-width: 0;
}
/* Sprint UX #5 : wrapper +/- autour de l'input poids personnalisé.
   L'input seul forçait l'utilisateur à utiliser le clavier numérique
   sur mobile (peu pratique avec un step de 0.1kg). Les boutons donnent
   un feedback tactile fort + sont alignés visuellement sur .qty-stepper. */
.weight-custom__stepper {
  display: inline-flex; align-items: center;
  background: var(--cream);
  border-radius: 100px;
  padding: 4px;
  gap: 2px;
  flex-shrink: 0;
}
.weight-custom__btn {
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--white); border: none; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--secondary);
  transition: all 0.15s;
  box-shadow: var(--shadow-sm);
  flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
}
.weight-custom__btn:hover {
  background: var(--secondary); color: var(--white);
  transform: scale(1.05);
}
.weight-custom__btn:active { transform: scale(0.95); }
.weight-custom__btn:disabled { opacity: 0.3; pointer-events: none; cursor: not-allowed; }
.weight-custom__btn:focus-visible {
  outline: 2px solid var(--primary); outline-offset: 2px;
}
.weight-custom__input {
  width: 56px;
  padding: 4px 0;
  border: 0;
  font-family: var(--font-heading); font-size: 1.05rem; font-weight: 700;
  text-align: right;
  background: transparent;
  color: var(--text);
  -moz-appearance: textfield;
  font-variant-numeric: tabular-nums;
}
.weight-custom__input:focus { outline: none; background: rgba(0,0,0,0.04); border-radius: 4px; }
.weight-custom__input::-webkit-inner-spin-button,
.weight-custom__input::-webkit-outer-spin-button { -webkit-appearance: none; display: none; }
/* Unité collée à l'input à l'intérieur du stepper (review #H1) :
   l'user voit la valeur + unité comme un tout cohérent (ex : "0.6 kg")
   au lieu d'un input vide avec "kg" séparé sur le côté. */
.weight-custom__unit {
  font-size: 0.88rem; color: var(--text); font-weight: 600;
  padding: 0 10px 0 2px;
}

.qty-row {
  display: grid; grid-template-columns: 1fr auto;
  align-items: center; gap: 16px;
  padding: 18px 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  margin-bottom: 24px;
}
.qty-row__label-wrap { display: flex; flex-direction: column; gap: 2px; }
.qty-row__label {
  font-size: 0.74rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--text);
}
.qty-row__hint { font-size: 0.78rem; color: var(--text-soft); }
.qty-stepper {
  display: inline-flex; align-items: center; gap: 4px;
  background: var(--cream);
  border-radius: 100px;
  padding: 6px;
}
.qty-stepper__btn {
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--white); border: none; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 1.15rem; font-weight: 700; color: var(--secondary);
  transition: all 0.15s;
  box-shadow: var(--shadow-sm);
}
.qty-stepper__btn:hover {
  background: var(--secondary); color: var(--white);
  transform: scale(1.05);
}
.qty-stepper__btn:active { transform: scale(0.95); }
.qty-stepper__btn:disabled { opacity: 0.3; pointer-events: none; }
.qty-stepper__value {
  min-width: 44px; text-align: center;
  font-family: var(--font-heading);
  font-size: 1.15rem; font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* ── 12.7 Notes accordion ── */
.notes-toggle { display: none; }
.notes-summary {
  display: flex; justify-content: space-between; align-items: center;
  cursor: pointer;
  padding: 8px 0;
  font-size: 0.88rem; color: var(--text); font-weight: 500;
  transition: color 0.15s;
}
.notes-summary:hover { color: var(--primary); }
.notes-summary__icon {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--cream);
  display: inline-flex; align-items: center; justify-content: center;
  transition: transform 0.25s, background 0.15s, color 0.15s;
}
.notes-summary:hover .notes-summary__icon { background: var(--secondary); color: var(--white); }
/* max-height augmenté à 280px pour accommoder le textarea auto-grow
   + nouveau meta-row (helper + counter). */
.notes-toggle:checked ~ .notes-content { max-height: 280px; opacity: 1; margin-top: 12px; }
.notes-toggle:checked ~ .notes-summary .notes-summary__icon { transform: rotate(180deg); }
.notes-content {
  max-height: 0; opacity: 0; overflow: hidden;
  transition: max-height 0.3s ease, opacity 0.2s ease, margin 0.2s ease;
}
.notes-textarea {
  width: 100%;
  min-height: 64px;
  padding: 12px 14px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-md);
  font-family: inherit; font-size: 0.92rem;
  resize: none; /* auto-grow géré par JS, pas par l'user */
  background: var(--white);
  color: var(--text);
  line-height: 1.5;
  transition: border-color 0.15s, box-shadow 0.15s;
  overflow: hidden;
}
.notes-textarea:focus {
  outline: none;
  border-color: var(--secondary);
  box-shadow: 0 0 0 3px rgba(26,26,26,0.05);
}
.notes-textarea::placeholder { color: var(--text-soft); opacity: 0.8; }
/* Meta row : helper à gauche, compteur à droite */
.notes-meta {
  margin-top: 6px;
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  font-size: 0.72rem;
}
.notes-helper { color: var(--text-soft); font-style: italic; flex: 1; }
.notes-count {
  color: var(--text-soft);
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}
/* État "presque plein" : counter passe en couleur d'avertissement à 90% */
.notes-count.is-near-limit { color: #ED6C02; font-weight: 600; }
.notes-count.is-at-limit { color: var(--primary); font-weight: 700; }

/* ── 12.8 CTA + Pickup + Trust ── */
.cta-block {
  margin-top: 24px;
  display: flex; flex-direction: column; gap: 12px;
}
.cta-add {
  display: flex; align-items: center; gap: 14px;
  padding: 18px 26px;
  background: var(--secondary);
  color: var(--white);
  border-radius: 100px;
  border: none; cursor: pointer;
  font-family: var(--font-body); font-weight: 700; font-size: 0.95rem;
  width: 100%;
  transition: all 0.25s;
  box-shadow: var(--shadow-md);
  position: relative;
  overflow: hidden;
  letter-spacing: 0.02em;
}
.cta-add::before {
  content: ''; position: absolute; inset: 0;
  background: var(--primary);
  transform: translateX(-100%);
  transition: transform 0.35s ease;
  z-index: 0;
}
.cta-add:hover::before { transform: translateX(0); }
.cta-add:hover { box-shadow: var(--shadow-lg); }
.cta-add:disabled { opacity: 0.55; cursor: not-allowed; box-shadow: none; }
.cta-add:disabled::before { display: none; }
.cta-add > * { position: relative; z-index: 1; }
.cta-add__icon { width: 22px; height: 22px; transition: transform 0.3s; }
.cta-add:hover:not(:disabled) .cta-add__icon { transform: translateX(2px) rotate(-8deg); }
.cta-add__label {
  flex: 1; text-align: left;
  text-transform: uppercase; font-size: 0.85rem; letter-spacing: 0.08em;
}
.cta-add__total {
  font-family: var(--font-heading);
  font-size: 1.2rem;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}

/* Click & Collect — barre fine inline (review H2) :
   avant = bloc vert 80px de haut occupant 12% de l'espace mobile pour
   info statique (l'user a déjà choisi C&C). Maintenant = ligne fine 32px,
   libère le viewport pour le configurateur. */
.pickup {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 14px;
  background: var(--halal-soft, rgba(46,125,50,0.06));
  border-radius: var(--radius-md);
  border: 1px solid rgba(46,125,50,0.18);
  font-size: 0.84rem;
  line-height: 1.3;
  color: var(--text);
  margin: 0;
  flex-wrap: wrap;
}
.pickup__icon-svg {
  color: var(--halal);
  flex-shrink: 0;
}
.pickup strong { font-weight: 700; color: var(--halal); }
.pickup__sep { color: var(--text-soft); margin: 0 2px; }
.pickup__addr { color: var(--text-light); font-size: 0.82rem; }
/* Sprint #5 : géolocalisation distance Click & Collect.
   Le bouton "Distance ?" déclenche navigator.geolocation au clic — pas
   automatique car ça demande permission user (skill rule `data-leakage`). */
.pickup__geo-btn {
  display: inline-flex; align-items: center; gap: 4px;
  margin-left: 8px;
  /* Audit v4 M4 : 22px → 44px tap target (WCAG). padding amplifié. */
  padding: 12px 14px;
  min-height: 44px;
  background: transparent;
  border: 1px solid var(--border-strong);
  border-radius: 100px;
  font-family: inherit; font-size: 0.78rem; font-weight: 600;
  color: var(--text-light);
  cursor: pointer;
  transition: all 0.15s;
}
.pickup__geo-btn:hover, .pickup__geo-btn:focus-visible {
  border-color: var(--halal); color: var(--halal);
  background: var(--halal-soft, rgba(46,125,50,0.06));
}
.pickup__geo-btn svg { color: var(--halal); }
.pickup__distance {
  margin-left: 8px;
  font-size: 0.78rem; font-weight: 600;
  color: var(--halal);
  font-variant-numeric: tabular-nums;
}
.pickup__distance.is-error {
  color: var(--text-light); font-weight: 500;
  font-style: italic;
}

.trust {
  display: flex; gap: 8px; flex-wrap: wrap;
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}
.trust__item {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 0.78rem; color: var(--text); font-weight: 600;
  padding: 7px 12px;
  background: var(--white);
  border: 1px solid var(--border-strong);
  border-radius: 100px;
  transition: border-color 0.15s;
}
.trust__item:hover { border-color: var(--halal); }
.trust__icon { color: var(--halal); flex-shrink: 0; }

/* Sprint priorité #2 : badge AVS distinctif au lieu d'icône bouclier générique.
   Pastille verte halal avec lettres "AVS" en blanc bold — immédiatement
   reconnaissable comme certification spécifique (vs icône qui pourrait être
   n'importe quel logo "secure"). Le tooltip explique le sigle pour les visiteurs
   qui ne connaissent pas AVS. */
.trust__item--avs {
  /* Border halal renforcée pour signaler l'importance de cette certification */
  border-color: var(--halal);
  background: var(--halal-soft, rgba(46,125,50,0.06));
}
.trust__item--avs:hover { background: var(--halal-soft, rgba(46,125,50,0.12)); }
.trust__avs-mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px;
  background: var(--halal);
  color: var(--white);
  border-radius: 50%;
  font-family: var(--font-heading);
  font-weight: 800; font-size: 0.66rem;
  letter-spacing: 0.04em;
  flex-shrink: 0;
  box-shadow: 0 1px 2px rgba(46,125,50,0.25);
}
.trust__avs-mark--sm {
  width: 22px; height: 22px;
  font-size: 0.58rem;
}
.summary-trust__item--avs {
  border-color: var(--halal);
  background: var(--halal-soft, rgba(46,125,50,0.06));
}
.trust__item--cutting {
  border-color: var(--primary);
  background: rgba(195,32,48,0.04);
}
.trust__item--cutting .trust__icon { color: var(--primary); }

/* ── 12.9 Story (savoir-faire) ── */
.story {
  background: var(--secondary);
  color: var(--white);
  padding: clamp(48px, 7vw, 96px) var(--pad-page);
  margin-top: clamp(40px, 5vw, 80px);
  position: relative;
  overflow: hidden;
}
.story::before {
  content: ''; position: absolute;
  top: -100px; right: -100px;
  width: 500px; height: 500px; border-radius: 50%;
  background: radial-gradient(circle, rgba(211,47,47,0.18), transparent 70%);
  pointer-events: none;
}
.story__inner {
  max-width: 1440px; margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 5vw, 80px);
  align-items: center;
  position: relative;
  z-index: 1;
}
/* Story : photo team + overlay gradient pour contraste texte */
.story__deco {
  aspect-ratio: 4/5;
  border-radius: var(--radius-xl);
  position: relative;
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  background:
    radial-gradient(circle at 30% 25%, rgba(211,47,47,0.22) 0%, transparent 55%),
    radial-gradient(circle at 70% 75%, rgba(200,162,75,0.08) 0%, transparent 55%),
    linear-gradient(135deg, rgba(45,36,36,0.55) 0%, rgba(26,26,26,0.35) 60%, rgba(34,24,24,0.55) 100%),
    url('/img/team.jpg') center/cover no-repeat;
}
.story__deco::before {
  content: '';
  position: absolute; inset: 0;
  background-image: repeating-linear-gradient(
    -45deg,
    transparent 0,
    transparent 16px,
    rgba(255,255,255,0.025) 16px,
    rgba(255,255,255,0.025) 32px
  );
  pointer-events: none;
}
.story__deco::after {
  content: '"';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--font-heading);
  font-size: clamp(8rem, 18vw, 14rem);
  line-height: 0.8;
  font-weight: 800;
  color: rgba(255,255,255,0.06);
  pointer-events: none;
}
.story__content { max-width: 520px; }
.story__label {
  font-size: 0.74rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: #C8A24B; font-weight: 700;
  margin-bottom: 16px;
  display: inline-flex; align-items: center; gap: 12px;
}
.story__label::after {
  content: ''; width: 40px; height: 1px; background: #C8A24B;
}
.story__title {
  font-family: var(--font-heading);
  font-size: clamp(2rem, 3.6vw, 3rem);
  font-weight: 700; line-height: 1.1;
  margin-bottom: 20px;
  letter-spacing: -0.015em;
}
.story__title em { color: var(--primary); font-style: italic; }
.story__text {
  font-size: 1rem; line-height: 1.75;
  color: rgba(255,255,255,0.78);
  margin-bottom: 24px;
}
.story__stats {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,0.12);
}
.story__stat-val {
  font-family: var(--font-heading);
  /* Plus dramatique sur desktop (jusqu'à 3.4rem) — réduit progressivement sur mobile */
  font-size: clamp(1.6rem, 3.5vw, 3.4rem);
  font-weight: 700;
  color: var(--white);
  line-height: 1; margin-bottom: 8px;
  letter-spacing: -0.02em;
}
.story__stat-lbl {
  font-size: 0.74rem; letter-spacing: 0.06em;
  color: rgba(255,255,255,0.55);
  text-transform: uppercase;
}

/* ── 12.10 Bento (détails produit) ── */
.bento {
  max-width: 1440px; margin: 0 auto;
  width: 100%;
  padding: clamp(48px, 7vw, 96px) var(--pad-page);
}
.bento__head {
  margin-bottom: clamp(28px, 4vw, 48px);
  display: flex; justify-content: space-between; align-items: baseline;
  flex-wrap: wrap; gap: 12px;
}
.bento__title {
  font-family: var(--font-heading);
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  font-weight: 700; letter-spacing: -0.015em;
  line-height: 1.1;
  color: var(--text);
}
.bento__title-line {
  font-size: 0.74rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--primary); font-weight: 700;
  display: block; margin-bottom: 12px;
}
.bento__sub {
  color: var(--text-light); font-size: 0.92rem;
  max-width: 360px;
}
.bento__toggle {
  display: none;
  width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--white); cursor: pointer;
  align-items: center; justify-content: center;
  color: var(--text-light);
  transition: background 0.15s, transform 0.25s;
  flex-shrink: 0;
}
.bento__toggle[aria-expanded="false"] svg { transform: rotate(-90deg); }
.bento__toggle svg { transition: transform 0.25s ease; }

.bento__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: minmax(180px, auto);
  gap: 16px;
}
.bento__cell {
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: clamp(20px, 2.5vw, 28px);
  border: 1px solid var(--border);
  display: flex; flex-direction: column; justify-content: space-between;
  transition: transform 0.25s, box-shadow 0.25s;
  position: relative;
  overflow: hidden;
}
.bento__cell:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.bento__cell--1 { grid-column: span 2; grid-row: span 2; padding: 0; overflow: hidden; }
.bento__cell--2 { grid-column: span 2; }
.bento__cell--3, .bento__cell--4, .bento__cell--5 { grid-column: span 1; }
/* Si allergens présents (cell 4 rendue), cell 5 prend toute la ligne pour combler.
   Si allergens absents : cell 3 + cell 5 partagent la dernière rangée en 2 cols. */
.bento__grid:has(.bento__cell--4) .bento__cell--5 { grid-column: 1 / -1; }

/* Cell 1 sans image : gradient + radial glow, pas de produit dupliqué */
.bento__cell--1 {
  color: var(--white);
  display: flex;
  align-items: flex-end;
  position: relative;
  min-height: 380px;
  border: none;
  background:
    radial-gradient(circle at 75% 25%, rgba(211,47,47,0.32) 0%, transparent 55%),
    radial-gradient(circle at 25% 80%, rgba(200,162,75,0.10) 0%, transparent 55%),
    linear-gradient(135deg, #3a2828 0%, #1a1a1a 65%, #221717 100%);
}
.bento__cell--1::before {
  content: '';
  position: absolute; inset: 0;
  background-image: repeating-linear-gradient(
    45deg,
    transparent 0,
    transparent 18px,
    rgba(255,255,255,0.025) 18px,
    rgba(255,255,255,0.025) 36px
  );
  pointer-events: none;
}
.bento__cell--1:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.bento__hero-content {
  padding: clamp(20px, 3vw, 36px);
  z-index: 1;
  position: relative;
}
.bento__hero-label {
  font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: #C8A24B; font-weight: 700; margin-bottom: 10px;
  display: block;
}
.bento__hero-title {
  font-family: var(--font-heading);
  font-size: clamp(1.4rem, 2.4vw, 2rem);
  font-weight: 700; line-height: 1.1;
  margin-bottom: 12px;
  letter-spacing: -0.01em;
}
.bento__hero-text {
  font-size: 0.92rem; line-height: 1.65;
  color: rgba(255,255,255,0.82);
  max-width: 420px;
}

.bento__cell-icon {
  width: 44px; height: 44px;
  border-radius: 12px;
  background: var(--primary-soft);
  color: var(--primary);
  display: inline-flex; align-items: center; justify-content: center;
  margin-bottom: 16px;
}
.bento__cell-title {
  font-family: var(--font-heading);
  font-size: 1.2rem; font-weight: 700;
  margin-bottom: 8px;
  letter-spacing: -0.01em;
  color: var(--text);
}
.bento__cell-text {
  font-size: 0.88rem; color: var(--text-light);
  line-height: 1.6;
  white-space: pre-line; /* Préserve les sauts de ligne dans long_description */
  overflow-wrap: anywhere;
}
.bento__cell-list {
  list-style: none;
  display: flex; flex-direction: column; gap: 8px;
  margin-top: 12px;
}
.bento__cell-list li {
  font-size: 0.85rem; color: var(--text);
  padding-left: 22px; position: relative;
}
.bento__cell-list li::before {
  content: ''; position: absolute; left: 0; top: 8px;
  width: 12px; height: 1.5px; background: var(--primary);
}

.allergens-chips {
  display: flex; gap: 6px; flex-wrap: wrap; margin-top: 12px;
}
.allergens-chip {
  padding: 4px 10px;
  border-radius: 100px;
  background: rgba(255,193,7,0.14);
  color: #745300;
  font-size: 0.74rem; font-weight: 600;
}

/* ── 12.11 Related (réutilise .card du catalogue) ── */
.related {
  padding: clamp(48px, 7vw, 96px) var(--pad-page);
}
.related__inner { max-width: 1440px; margin: 0 auto; }
.related__head {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: clamp(28px, 4vw, 48px);
  flex-wrap: wrap; gap: 12px;
}
.related__title-wrap { display: flex; flex-direction: column; }
.related__label {
  font-size: 0.74rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--primary); font-weight: 700;
  margin-bottom: 12px;
}
.related__title {
  font-family: var(--font-heading);
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  font-weight: 700; letter-spacing: -0.015em;
  color: var(--text);
}
.related__link {
  font-size: 0.85rem; font-weight: 600; color: var(--primary);
  display: inline-flex; align-items: center; gap: 6px;
  transition: gap 0.18s;
}
.related__link:hover { gap: 12px; }
.related__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr));
  gap: var(--gap-grid);
}

/* ── 12.12 Mobile sticky CTA (refonte UX : 2 états default/success) ── */
.mobile-cta {
  display: none;
  position: fixed; bottom: 0; left: 0; right: 0;
  background: var(--white);
  border-top: 1px solid var(--border);
  padding: 14px 16px calc(14px + var(--safe-bottom));
  z-index: 95;
  box-shadow: 0 -10px 32px rgba(0,0,0,0.10);
  transform: translateY(110%);
  transition: transform 0.4s cubic-bezier(0.32, 0.72, 0, 1);
}
body.cta-visible .mobile-cta { transform: translateY(0); }
/* Quand la sticky CTA est visible, on remonte le toast pour éviter recouvrement
   (review M2). 90px = hauteur approx du mobile-cta default (~78px) + marge. */
body.cta-visible { --toast-bottom-offset: 90px; }

.mobile-cta__state {
  max-width: 1440px; margin: 0 auto;
}
.mobile-cta__state[hidden] { display: none; }

/* Option C : ligne 1 (stepper + label + prix) */
.mobile-cta__top-row {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 10px;
}
.mobile-cta__qty-label {
  flex: 1; min-width: 0;
  font-size: 0.82rem; font-weight: 500;
  color: var(--text-light);
  font-variant-numeric: tabular-nums;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Ligne 2 (bouton full-width) */
.mobile-cta__row {
  display: flex; gap: 10px; align-items: stretch;
}
.mobile-cta__row--dual { gap: 12px; }

.mobile-cta__qty {
  display: inline-flex; align-items: center; gap: 2px;
  background: var(--cream);
  border-radius: 100px; padding: 4px;
  flex-shrink: 0;
}
.mobile-cta__qty-btn {
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--white); border: none; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 1.05rem; font-weight: 700; color: var(--secondary);
  box-shadow: var(--shadow-sm);
  transition: all 0.15s;
}
.mobile-cta__qty-btn:active {
  transform: scale(0.92);
  background: var(--secondary); color: var(--white);
}
.mobile-cta__qty-val {
  min-width: 32px; text-align: center;
  font-family: var(--font-heading);
  font-size: 1rem; font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* Boutons CTA (base partagée default + success states) */
.mobile-cta__btn {
  flex: 1;
  min-height: 54px;
  padding: 10px 18px;
  border-radius: 100px;
  border: 1.5px solid transparent;
  font-family: inherit; font-weight: 700; font-size: 0.92rem;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  letter-spacing: 0.01em;
  cursor: pointer;
  text-decoration: none;
  position: relative; overflow: hidden;
  transition: transform 0.15s, background 0.2s, border-color 0.2s, opacity 0.2s;
  -webkit-tap-highlight-color: transparent;
}
.mobile-cta__btn:disabled { opacity: 0.55; cursor: not-allowed; }
.mobile-cta__btn:active:not(:disabled) { transform: scale(0.97); }
.mobile-cta__btn:focus-visible { outline: 3px solid var(--primary); outline-offset: 2px; }

/* Variant primaire (default action + "Accéder au panier") */
.mobile-cta__btn--primary {
  background: var(--secondary); color: var(--white);
  justify-content: space-between;
}
.mobile-cta__btn-arrow {
  width: 18px; height: 18px;
  flex-shrink: 0;
  opacity: 0.8;
}
.mobile-cta__btn--primary:hover:not(:disabled) { background: #000; }

/* Variant secondaire (Continuer) */
.mobile-cta__btn--secondary {
  background: var(--white); color: var(--secondary);
  border-color: var(--border-strong, #D0CFCC);
  flex: 0 0 auto; min-width: 120px;
  justify-content: center;
}
.mobile-cta__btn--secondary:hover:not(:disabled) {
  background: var(--cream);
  border-color: var(--secondary);
}

/* Icône + (état default) */
.mobile-cta__btn-icon {
  width: 18px; height: 18px;
  flex-shrink: 0;
  opacity: 0.9;
}

/* Label dual-line (état default) */
.mobile-cta__btn-label {
  display: flex; flex-direction: column; align-items: flex-start; gap: 1px;
  flex: 1; min-width: 0;
}
.mobile-cta__btn-action {
  font-size: 0.95rem; font-weight: 700;
  letter-spacing: 0.01em;
}
.mobile-cta__btn-meta {
  font-size: 0.72rem; font-weight: 500;
  opacity: 0.7;
  font-variant-numeric: tabular-nums;
  text-transform: none;
}
.mobile-cta__total {
  font-family: var(--font-heading);
  font-variant-numeric: tabular-nums;
  font-size: 1.35rem; font-weight: 800;
  flex-shrink: 0;
  color: var(--text);
}

/* État success : message de confirmation au-dessus des 2 boutons */
.mobile-cta__success-msg {
  display: flex; align-items: center; gap: 8px;
  font-size: 0.9rem; font-weight: 600;
  color: var(--halal, #2E7D32);
  margin-bottom: 10px;
  padding-left: 4px;
}
.mobile-cta__success-msg svg {
  color: var(--halal, #2E7D32);
  background: var(--halal-soft, rgba(46,125,50,0.12));
  border-radius: 50%;
  padding: 3px;
  width: 22px; height: 22px;
  flex-shrink: 0;
}

/* Animation entrée success state (slide + fade) */
.mobile-cta__state--success {
  animation: ctaSuccessIn 280ms cubic-bezier(0.32, 0.72, 0, 1);
}
@keyframes ctaSuccessIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .mobile-cta__state--success { animation: none; }
  .mobile-cta { transition: none; }
}

/* ══════════════ 13. PAGE PANIER ══════════════ */
.cart-page {
  flex: 1;
  max-width: 1280px; margin: 0 auto;
  width: 100%;
  padding: clamp(20px, 3vw, 32px) var(--pad-page) clamp(40px, 6vw, 80px);
}

/* ── 13.1 Cart head ── */
.cart-head {
  display: flex; align-items: baseline; justify-content: space-between;
  flex-wrap: wrap; gap: 12px;
  margin-bottom: clamp(20px, 3vw, 36px);
  padding-bottom: clamp(16px, 2vw, 24px);
  border-bottom: 1px solid var(--border);
}
.cart-head__title {
  font-family: var(--font-heading);
  font-size: clamp(1.6rem, 3.4vw, 2.6rem);
  font-weight: 700; letter-spacing: -0.015em;
  line-height: 1.05;
  color: var(--text);
}
.cart-head__meta {
  font-size: 0.92rem; color: var(--text-light);
  display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.cart-head__meta strong { color: var(--text); font-weight: 700; }
.cart-head__meta-sep { color: var(--text-soft); }

/* ── 13.2 Layout 2 cols ── */
.cart-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 400px;
  gap: clamp(24px, 3vw, 48px);
  align-items: start;
}

/* ── 13.3 Cart items (left col) ── */
.cart-items {
  background: var(--white);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  overflow: hidden;
}
.cart-items__head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 20px 24px;
  border-bottom: 1px solid var(--border);
}
.cart-items__title {
  font-family: var(--font-heading);
  font-size: 1.2rem; font-weight: 700;
  letter-spacing: -0.01em;
}
.cart-items__clear {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 0.82rem; color: var(--text-light);
  background: transparent; border: none; cursor: pointer;
  padding: 8px 12px; border-radius: 8px;
  transition: color 0.15s, background 0.15s;
}
.cart-items__clear:hover { color: var(--primary); background: var(--primary-soft); }
.cart-items__footer { padding: 18px 24px; border-top: 1px solid var(--border); }

.cart-list { display: flex; flex-direction: column; }

/* ── 13.4 Cart item (ligne) ──
   Layout : [image 88] [info 1fr extensible] [stepper] [total min 88] [X 44]
   gap réduit à 14px desktop pour éviter le whitespace excessif côté droit.
   Le `info` flex-grow:1 pousse stepper/total/X groupés à droite. */
.cart-item {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr) auto auto auto;
  gap: 14px;
  align-items: center;
  padding: 20px 24px;
  border-bottom: 1px solid var(--border);
  transition: background 0.15s, opacity 0.25s;
}
.cart-item:last-child { border-bottom: none; }
.cart-item:hover { background: var(--cream); }
.cart-item.is-removing { opacity: 0; transform: translateX(20px); }

.cart-item__media {
  width: 88px; height: 88px;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--surface);
  position: relative;
}
.cart-item__media img { width: 100%; height: 100%; object-fit: cover; }
.cart-item__media-placeholder {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-muted, var(--text-soft, #999));
  opacity: 0.5;
}
.cart-item__media-halal {
  position: absolute; top: 6px; left: 6px;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--halal); color: var(--white);
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

.cart-item__info { min-width: 0; }
/* Lisibilité tag catégorie : 0.72rem au lieu de 0.66 (+ contraste WCAG borderline corrigé) */
.cart-item__cat {
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--primary);
  margin-bottom: 4px; display: inline-block;
  padding: 2px 0;
}
.cart-item__name {
  font-family: var(--font-heading);
  font-size: 1.05rem; font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.2; margin-bottom: 6px;
}
.cart-item__name a { color: var(--text); transition: color 0.15s; }
.cart-item__name a:hover { color: var(--primary); }
.cart-item__notes-wrap { margin-bottom: 6px; }
.cart-item__notes {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 0.78rem; color: var(--text-light);
  font-style: italic;
  background: none; border: none; padding: 0;
  cursor: pointer; text-align: left;
  max-width: 100%;
}
.cart-item__notes-text {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.cart-item__notes--add { color: var(--primary); font-style: normal; font-weight: 600; }
.cart-item__notes::before {
  content: '';
  display: inline-block;
  width: 12px; height: 12px;
  flex-shrink: 0;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%2020h9%22%2F%3E%3Cpath%20d%3D%22M16.5%203.5a2.121%202.121%200%200%201%203%203L7%2019l-4%201%201-4L16.5%203.5z%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%2020h9%22%2F%3E%3Cpath%20d%3D%22M16.5%203.5a2.121%202.121%200%200%201%203%203L7%2019l-4%201%201-4L16.5%203.5z%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
  opacity: 0.6;
}
.cart-item__notes:hover, .cart-item__notes:focus-visible { color: var(--primary); }
.cart-item__notes-form { margin-top: 8px; display: flex; flex-direction: column; gap: 8px; }
.cart-item__notes-form[hidden] { display: none; }
.cart-item__notes-input {
  width: 100%; padding: 10px 12px;
  font-family: inherit; font-size: 0.85rem;
  border: 1.5px solid var(--border); border-radius: var(--radius-md);
  resize: vertical; min-height: 64px;
}
.cart-item__notes-form-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.cart-item__notes-save, .cart-item__notes-cancel {
  padding: 8px 14px; border-radius: var(--radius-md);
  font-size: 0.82rem; font-weight: 600; cursor: pointer;
  min-height: 40px;
}
.cart-item__notes-save {
  background: var(--primary); color: var(--white); border: none;
}
.cart-item__notes-cancel {
  background: transparent; color: var(--text-light);
  border: 1px solid var(--border);
}
.cart-item__price-line {
  font-size: 0.82rem; color: var(--text-light);
  display: inline-flex; align-items: center; gap: 6px;
  font-variant-numeric: tabular-nums;
  flex-wrap: wrap;
}
.cart-item__price-line strong { color: var(--text); font-weight: 600; }
.cart-item__price-line .sep { color: var(--text-soft); }

.cart-item__qty {
  display: inline-flex; align-items: center; gap: 0;
  background: var(--cream-dark);
  border-radius: 100px;
  padding: 4px;
}
/* Desktop : 36×36 cercle compact (souris précise OK). Mobile : agrandi à 36px
   minimum + hit-area étendue via padding du wrapper qty (cf. media query mobile). */
.cart-item__qty-btn {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--white); border: none; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 1.05rem; font-weight: 700; color: var(--secondary);
  box-shadow: var(--shadow-sm);
  transition: all 0.15s;
}
.cart-item__qty-btn:hover {
  background: var(--secondary); color: var(--white);
  transform: scale(1.05);
}
.cart-item__qty-btn:active { transform: scale(0.95); }
.cart-item__qty-btn:disabled { opacity: 0.3; pointer-events: none; }
.cart-item__qty-val {
  min-width: 50px; text-align: center;
  font-family: var(--font-heading);
  font-weight: 700; font-size: 0.95rem;
  font-variant-numeric: tabular-nums;
  padding: 0 8px;
}

.cart-item__total {
  font-family: var(--font-heading);
  font-size: 1.15rem; font-weight: 700;
  color: var(--secondary);
  font-variant-numeric: tabular-nums;
  text-align: right;
  min-width: 80px;
}

/* X delete : visuellement compact (32×32 icône cercle) mais hit-area étendue 44×44
   via padding pour respecter touch-target-size mobile sans agrandir la silhouette. */
.cart-item__remove {
  width: 44px; height: 44px; border-radius: 50%;
  padding: 6px;
  background: transparent; border: none; cursor: pointer;
  color: var(--text-soft);
  display: inline-flex; align-items: center; justify-content: center;
  transition: all 0.15s;
  position: relative;
}
.cart-item__remove svg { width: 18px; height: 18px; }
.cart-item__remove:hover, .cart-item__remove:focus-visible {
  background: var(--primary-soft); color: var(--primary);
  outline: none;
}
.cart-item__remove:focus-visible { box-shadow: 0 0 0 2px var(--primary); }

.cart-continue {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 18px;
  font-size: 0.92rem; font-weight: 600; color: var(--text);
  border: 1.5px solid var(--border-strong);
  border-radius: 100px;
  transition: all 0.15s;
}
.cart-continue:hover {
  border-color: var(--secondary);
  background: var(--secondary); color: var(--white);
  gap: 12px;
}

/* ── 13.5 Summary (right col, sticky) ── */
.cart-summary {
  position: sticky;
  top: calc(var(--nav-h) + 24px);
  display: flex; flex-direction: column; gap: 16px;
}
.summary-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  padding: 24px;
}
.summary-card__title {
  font-family: var(--font-heading);
  font-size: 1.2rem; font-weight: 700;
  letter-spacing: -0.01em;
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
}
.summary-row {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 8px 0;
  font-size: 0.92rem;
}
.summary-row span:last-child { font-variant-numeric: tabular-nums; }
.summary-row--minor { font-size: 0.85rem; color: var(--text-light); }
.summary-row--minor .summary-free {
  color: var(--halal); font-weight: 700;
  display: inline-flex; align-items: center; gap: 4px;
}
.summary-row--minor .summary-free::before { content: '✓'; font-weight: 800; font-size: 0.78rem; }
.summary-divider { border: none; border-top: 1px dashed var(--border); margin: 12px 0; }
.summary-row--total {
  font-family: var(--font-heading);
  font-size: 1.5rem; font-weight: 700;
  letter-spacing: -0.01em;
  padding: 14px 0 18px;
  align-items: baseline;
}
.summary-row--total span:last-child {
  color: var(--primary); font-size: 1.7rem;
}

.summary-cta {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%;
  padding: 18px 24px;
  background: var(--secondary); color: var(--white);
  border: none; border-radius: 100px;
  font-family: var(--font-body); font-weight: 700; font-size: 0.95rem;
  letter-spacing: 0.04em; text-transform: uppercase;
  box-shadow: var(--shadow-md);
  position: relative; overflow: hidden;
  transition: all 0.25s;
  margin-bottom: 12px;
  cursor: pointer;
}
.summary-cta::before {
  content: ''; position: absolute; inset: 0;
  background: var(--primary);
  transform: translateX(-100%);
  transition: transform 0.35s ease;
}
.summary-cta:hover::before { transform: translateX(0); }
.summary-cta:hover { box-shadow: var(--shadow-lg); }
.summary-cta > * { position: relative; z-index: 1; }
.summary-cta__icon { width: 18px; height: 18px; transition: transform 0.3s; }
.summary-cta:hover .summary-cta__icon { transform: translateX(4px); }

.summary-hint {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 14px;
  background: var(--halal-soft);
  border-radius: var(--radius-md);
  border-left: 3px solid var(--halal);
  font-size: 0.82rem; color: var(--text);
}
.summary-hint strong { font-weight: 600; }
.summary-hint__icon { width: 18px; height: 18px; flex-shrink: 0; color: var(--halal); }

.summary-trust { display: flex; flex-wrap: wrap; gap: 6px; }
.summary-trust__item {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 6px 10px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 100px;
  font-size: 0.74rem; font-weight: 600; color: var(--text);
}
.summary-trust__item svg { color: var(--halal); flex-shrink: 0; }

/* ── 13.6 Empty state ── */
.empty-cart {
  background: var(--white);
  border-radius: var(--radius-xl);
  padding: clamp(40px, 6vw, 80px) clamp(24px, 4vw, 60px);
  text-align: center;
  border: 1px dashed var(--border-strong);
}
.empty-cart__icon {
  width: 80px; height: 80px;
  border-radius: 50%;
  background: var(--cream-dark);
  margin: 0 auto 24px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--text-light);
}
.empty-cart__title {
  font-family: var(--font-heading);
  font-size: clamp(1.4rem, 2.6vw, 1.8rem);
  font-weight: 700; margin-bottom: 12px;
}
.empty-cart__text {
  color: var(--text-light); font-size: 0.95rem;
  margin: 0 auto 24px; max-width: 360px;
}
.empty-cart__cta {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 14px 28px;
  background: var(--secondary); color: var(--white);
  border-radius: 100px;
  font-weight: 600; font-size: 0.92rem;
  transition: background 0.15s, gap 0.2s;
}
.empty-cart__cta:hover { background: var(--primary); gap: 12px; }

/* ── 13.7 Mobile sticky CTA cart variant ── */
.mobile-cta--cart .mobile-cta__row { gap: 12px; }
.mobile-cta--cart .mobile-cta__info {
  display: flex; flex-direction: column; flex-shrink: 0;
}
.mobile-cta--cart .mobile-cta__count { font-size: 0.74rem; color: var(--text-light); }
.mobile-cta--cart .mobile-cta__total {
  font-family: var(--font-heading);
  font-size: 1.25rem; font-weight: 700;
  color: var(--secondary);
  font-variant-numeric: tabular-nums;
}
.mobile-cta--cart .mobile-cta__btn {
  flex: 1;
  padding: 14px 18px;
  background: var(--secondary); color: var(--white);
  border-radius: 100px; border: none;
  font-weight: 700; font-size: 0.95rem;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  letter-spacing: 0.04em; text-transform: uppercase;
}
.mobile-cta--cart .mobile-cta__btn:active {
  transform: scale(0.98); background: var(--primary);
}

/* ══════════════ 14. PAGE CHECKOUT (refacto v2 — best practices Baymard + Stripe) ══════════════ */

/* ── 14.1 Co-Nav (épurée, focus tunnel) ── */
.co-nav {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255,255,255,0.97);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}
.co-nav__inner {
  max-width: 1280px; margin: 0 auto;
  padding: 0 var(--pad-page);
  height: 64px;
  display: grid; grid-template-columns: auto 1fr auto;
  align-items: center; gap: 16px;
}
/* Audit v2 #7 : "Retour au panier" était à 43px (1px sous min WCAG).
   min-height + padding garantissent 44px et étendent la hit area. */
.co-nav__back {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 0.85rem; color: var(--text-light); font-weight: 500;
  min-height: 44px; padding: 8px 4px;
  transition: color 0.15s, gap 0.2s;
}
.co-nav__back:hover { color: var(--primary); gap: 10px; }
.co-nav__brand {
  text-align: center;
  font-family: var(--font-heading);
  font-size: 1.05rem; font-weight: 700;
}
.co-nav__brand span { color: var(--primary); }
.co-nav__steps {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 0.78rem; font-weight: 600; color: var(--halal);
}
.co-nav__steps svg { color: var(--halal); }

.co-progress {
  height: 3px; background: var(--cream-dark);
  position: relative;
}
.co-progress__fill {
  position: absolute; top: 0; left: 0; bottom: 0;
  width: 33%;
  background: linear-gradient(90deg, var(--primary), #C8A24B);
  transition: width 0.4s ease;
}

/* ── 14.2 Page layout ── */
.checkout {
  flex: 1;
  max-width: 1280px; margin: 0 auto;
  width: 100%;
  padding: clamp(20px, 3vw, 40px) var(--pad-page) clamp(40px, 6vw, 80px);
}
.checkout__head { margin-bottom: clamp(20px, 3vw, 32px); }
.checkout__title {
  font-family: var(--font-heading);
  font-size: clamp(1.6rem, 3.4vw, 2.6rem);
  font-weight: 700; letter-spacing: -0.015em;
  line-height: 1.05; margin-bottom: 6px;
}
.checkout__subtitle {
  font-size: 0.95rem; color: var(--text-light);
  display: inline-flex; align-items: center; gap: 8px;
  flex-wrap: wrap;
}
.checkout__subtitle svg { color: var(--halal); }

.checkout__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 400px;
  gap: clamp(24px, 3vw, 48px);
  align-items: start;
}

/* ── 14.3 Alerts ── */
.co-alert {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 14px 18px;
  border-radius: var(--radius-md);
  margin-bottom: 16px;
  font-size: 0.88rem;
}
.co-alert svg { flex-shrink: 0; margin-top: 2px; }
.co-alert--error { background: var(--error-soft, rgba(211,47,47,0.08)); color: var(--primary); border-left: 3px solid var(--primary); }
.co-alert--warn { background: rgba(237,108,2,0.08); color: var(--text); border-left: 3px solid #ED6C02; }
.co-alert strong { font-weight: 700; }

/* ── 14.4 Form sections (cards numérotées + collapse) ── */
.checkout__form { display: flex; flex-direction: column; gap: 16px; }

.co-section {
  background: var(--white);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  transition: border-color 0.2s;
}
.co-section.is-active {
  border-color: var(--secondary);
  box-shadow: var(--shadow-sm);
}
.co-section.is-completed { border-color: var(--halal); }
/* État LOCKED : section future pas encore débloquée. Form caché, header
   visible mais grisé pour indiquer "à venir". Pas de bouton Modifier.
   Évite la pollution visuelle (chips Stripe / champs coords) avant que
   l'user ait validé l'étape précédente. */
.co-section.is-locked {
  border-color: var(--border);
  opacity: 0.6;
}
.co-section.is-locked .co-section__body { display: none; }
.co-section.is-locked .co-section__edit { display: none !important; }
.co-section.is-locked .co-section__head { cursor: not-allowed; }

.co-section__head {
  display: flex; align-items: center; gap: 14px;
  padding: 18px 22px;
  user-select: none;
}
.co-section__step {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--cream-dark); color: var(--text-light);
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-heading);
  font-weight: 700; font-size: 1rem;
  flex-shrink: 0;
  transition: all 0.2s;
}
.co-section.is-active .co-section__step { background: var(--secondary); color: var(--white); }
.co-section.is-completed .co-section__step { background: var(--halal); color: var(--white); }

.co-section__title {
  font-family: var(--font-heading);
  font-size: 1.15rem; font-weight: 700;
  letter-spacing: -0.01em;
  flex: 1;
}
.co-section__summary {
  font-size: 0.85rem; color: var(--text-light);
  margin-left: auto;
  display: none;
}
.co-section.is-completed .co-section__summary {
  display: block;
  margin-right: 10px;
  text-align: right;
}
.co-section.is-completed .co-section__summary strong { color: var(--text); font-weight: 600; }
/* Touch target ≥44px (rule §2) — bouton Modifier visible mais visuellement compact */
.co-section__edit {
  display: none;
  background: transparent;
  border: 1px solid var(--border-strong);
  border-radius: 100px;
  padding: 10px 16px;
  min-height: 44px;
  align-items: center;
  font-size: 0.82rem; font-weight: 600;
  color: var(--text);
  cursor: pointer;
  transition: all 0.15s;
}
.co-section.is-completed .co-section__edit { display: inline-flex; }
.co-section__edit:hover, .co-section__edit:focus-visible {
  background: var(--secondary); color: var(--white); border-color: var(--secondary);
  outline: none;
}
.co-section__edit:focus-visible { box-shadow: 0 0 0 2px var(--primary-soft); }

.co-section__body { padding: 0 22px 22px; }
.co-section.is-completed .co-section__body { display: none; }

/* Bouton "Continuer" dans chaque section — BUG-09 */
.co-section__next {
  display: none;
  width: 100%;
  margin-top: 20px;
  padding: 14px 22px;
  min-height: 50px;
  background: var(--halal); color: var(--white);
  border: none; border-radius: 100px;
  font-family: var(--font-heading);
  font-size: 0.98rem; font-weight: 700;
  letter-spacing: 0.02em;
  cursor: pointer;
  align-items: center; justify-content: center; gap: 8px;
  transition: all 0.2s cubic-bezier(0.32, 0.72, 0, 1);
  box-shadow: 0 3px 10px rgba(46,125,50,0.2);
}
.co-section__next.is-visible { display: flex; }
.co-section__next:hover, .co-section__next:focus-visible {
  background: var(--halal-dark);
  transform: translateY(-1px);
  box-shadow: 0 5px 16px rgba(46,125,50,0.3);
  outline: none;
}
.co-section__next:active { transform: translateY(0); }
.co-section__next:focus-visible { box-shadow: 0 0 0 3px var(--halal-soft), 0 5px 16px rgba(46,125,50,0.3); }

.co-section__hint {
  font-size: 0.85rem; color: var(--text-light);
  margin-bottom: 18px;
  display: flex; align-items: flex-start; gap: 10px;
  padding: 12px 14px;
  background: var(--cream);
  border-radius: var(--radius-sm);
  border-left: 3px solid var(--secondary);
}
.co-section__hint strong { color: var(--text); font-weight: 600; }
.co-section__hint svg { color: var(--text-light); flex-shrink: 0; margin-top: 2px; }

.co-cutoff {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 12px 14px;
  background: rgba(237,108,2,0.08);
  border-radius: var(--radius-sm);
  border-left: 3px solid #ED6C02;
  font-size: 0.82rem;
  margin-bottom: 16px;
}
.co-cutoff strong { color: var(--text); }
.co-cutoff svg { color: #ED6C02; flex-shrink: 0; margin-top: 2px; }
.co-cutoff--aid { background: rgba(195,32,48,0.07); border-left-color: var(--primary); }
.co-cutoff--aid svg { color: var(--primary); }

/* ── 14.5 Fields (labels + inputs) ── */
.co-field { margin-bottom: 18px; }
.co-field:last-child { margin-bottom: 0; }
.co-label {
  display: block;
  font-size: 0.78rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--text); margin-bottom: 10px;
}
.co-label__req { color: var(--primary); }
.co-label__optional {
  font-size: 0.7rem; color: var(--text-soft);
  text-transform: none; letter-spacing: 0; font-weight: 500;
}

.co-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
/* BUG-4 — Mobile : co-row en colonne unique (414px → ~178px/champ trop étroit) */
@media (max-width: 767px) {
  .co-row { grid-template-columns: 1fr; }
}
.co-input,
.co-textarea,
.co-select {
  width: 100%;
  padding: 13px 16px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--cream);
  font-family: inherit;
  font-size: 0.95rem;
  color: var(--text);
  transition: border-color 0.15s, background 0.15s;
}
.co-input:focus,
.co-textarea:focus,
.co-select:focus {
  outline: none;
  border-color: var(--secondary);
  background: var(--white);
}
.co-input::placeholder,
.co-textarea::placeholder { color: var(--text-soft); }
.co-textarea { resize: vertical; min-height: 80px; }
.co-helper {
  margin-top: 6px;
  font-size: 0.78rem; color: var(--text-light);
  display: flex; align-items: center; gap: 4px;
}
.co-helper svg { color: var(--text-soft); }

.co-checkbox {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 14px 16px;
  background: var(--cream);
  border-radius: var(--radius-md);
  cursor: pointer;
  font-size: 0.88rem;
  transition: background 0.15s;
}
.co-checkbox:hover { background: var(--cream-dark); }
.co-checkbox input {
  width: 18px; height: 18px;
  margin-top: 2px;
  accent-color: var(--secondary);
  flex-shrink: 0;
  cursor: pointer;
}

/* ── 14.6 Date cards (J+1 à J+7) ── */
.dates-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(120px, 100%), 1fr));
  gap: 8px;
}
.date-opt { position: relative; }
.date-opt input { position: absolute; opacity: 0; pointer-events: none; }
.date-opt__btn {
  display: block;
  padding: 14px 8px;
  border: 1.5px solid var(--border-strong);
  border-radius: var(--radius-md);
  background: var(--white);
  text-align: center;
  cursor: pointer;
  transition: all 0.15s;
  position: relative;
}
/* Audit v3 #6 : auditeur signale toujours 11.2/11.5px. Bump explicite à
   13px+ pour ne plus laisser d'ambiguïté. Conforme WCAG 12px+ mobile. */
.date-opt__hint {
  position: absolute; top: -7px; left: 50%; transform: translateX(-50%);
  background: #C8A24B; color: var(--white);
  padding: 2px 8px; border-radius: 100px;
  font-size: 0.75rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.04em;
  white-space: nowrap;
}
.date-opt__day {
  font-size: 0.85rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--text-light); margin-bottom: 4px;
}
.date-opt__num {
  font-family: var(--font-heading);
  font-size: 1.4rem; font-weight: 700;
  letter-spacing: -0.01em; line-height: 1;
}
.date-opt__month {
  font-size: 0.85rem; color: var(--text-light);
  margin-top: 4px;
}
.date-opt__btn:hover { border-color: var(--secondary); }
.date-opt input:checked + .date-opt__btn {
  border-color: var(--secondary);
  background: var(--secondary);
  color: var(--white);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.date-opt input:checked + .date-opt__btn .date-opt__day,
.date-opt input:checked + .date-opt__btn .date-opt__month { color: rgba(255,255,255,0.8); }

/* ── 14.7 Time slots groupés ── */
.slots-section { margin-top: 20px; }
.slots-section:first-child { margin-top: 0; }
.slots-period {
  font-size: 0.74rem; font-weight: 700;
  color: var(--text-light);
  text-transform: uppercase; letter-spacing: 0.1em;
  margin: 14px 0 8px;
  display: flex; align-items: center; gap: 8px;
}
.slots-period svg { color: var(--text-soft); }
.slots-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(80px, 100%), 1fr));
  gap: 6px;
}
.slot-opt { position: relative; }
.slot-opt input { position: absolute; opacity: 0; pointer-events: none; }
.slot-opt__btn {
  display: block;
  padding: 10px 6px;
  border: 1.5px solid var(--border);
  border-radius: 100px;
  background: var(--white);
  text-align: center;
  font-size: 0.85rem; font-weight: 600;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: all 0.15s;
}
.slot-opt__btn:hover { border-color: var(--secondary); background: var(--cream); }
.slot-opt input:checked + .slot-opt__btn {
  border-color: var(--secondary);
  background: var(--secondary);
  color: var(--white);
}
.slot-opt input:disabled + .slot-opt__btn {
  opacity: 0.35; pointer-events: none;
  text-decoration: line-through;
  background: var(--cream);
}

/* Slot saturé (créneau plein côté DB) — affiche un badge "Complet"
   par-dessus le bouton, désactive le clic. */
.slot-opt__sat {
  display: none;
}
.slot-opt.is-saturated .slot-opt__btn {
  opacity: 0.4;
  cursor: not-allowed;
  background: var(--cream);
  border-color: var(--border);
  color: var(--text-muted);
  text-decoration: line-through;
}
.slot-opt.is-saturated .slot-opt__sat {
  display: block;
  position: absolute;
  top: -8px; left: 50%; transform: translateX(-50%);
  background: var(--text-muted); color: var(--white);
  font-size: 0.62rem; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
  padding: 2px 6px; border-radius: 4px;
  pointer-events: none;
  white-space: nowrap;
}

/* Slot "trop tôt" (jour-même J0 + délai de prépa non respecté).
   Contrairement aux saturés (qui peuvent redevenir dispo si annulation),
   un slot passé ne reviendra jamais → on le masque complètement plutôt que
   de l'afficher grisé. UX plus propre : la grille montre uniquement les
   créneaux choisissables. */
.slot-opt.is-past { display: none; }

/* Section "Matin" ou "Après-midi" masquée si tous ses slots sont .is-past.
   Évite d'afficher un header orphelin ("MATIN" + icône soleil) sans
   aucun créneau dessous (cas commande tardive J0 où tout le matin est passé).
   Saturé ne déclenche PAS le masquage : un slot "Complet" reste pertinent à
   afficher (le client voit que ce créneau existe mais est plein).
   Support :has() : Safari 15.4+, Chrome 105+, Firefox 121+ — tous OK en 2026.
   Browsers anciens : règle ignorée → comportement actuel préservé. */
.slots-section:not(:has(.slot-opt:not(.is-past))) {
  display: none;
}

/* ── 14.8 Payment section (refonte UX : bloc fonctionnel) ──
   - Notice 1-ligne discrète (sans répétition "sécurisé")
   - CTA actionnable INTÉGRÉ dans la section (pas juste sticky récap)
   - Logos brand officiels SVG (pas du texte) */
.payment-notice {
  display: flex; align-items: center; gap: 8px;
  font-size: 0.84rem; color: var(--text-light);
  margin: 0 0 18px;
  padding: 10px 14px;
  background: var(--cream);
  border-radius: var(--radius-md);
  border-left: 3px solid var(--halal);
}
.payment-notice svg { color: var(--halal); flex-shrink: 0; }

/* CTA principal section paiement — gros bouton actionnable.
   Touch target ≥48px, font-variant-numeric pour stabilité du chiffre. */
.payment-cta {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%;
  padding: 16px 24px;
  min-height: 56px;
  background: var(--secondary); color: var(--white);
  border: none; border-radius: 100px;
  font-family: var(--font-heading);
  font-size: 1.05rem; font-weight: 700;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.32, 0.72, 0, 1);
  box-shadow: 0 4px 14px rgba(0,0,0,0.12);
  font-variant-numeric: tabular-nums;
}
.payment-cta:hover, .payment-cta:focus-visible {
  background: var(--primary);
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(211,47,47,0.25);
  outline: none;
}
.payment-cta:active { transform: translateY(0); }
.payment-cta:disabled {
  opacity: 0.5; cursor: not-allowed; transform: none; box-shadow: none;
  background: var(--text-light);
}
.payment-cta__arrow { transition: transform 0.2s; }
.payment-cta:hover .payment-cta__arrow { transform: translateX(4px); }

/* Logos brand — vraies images SVG */
.payment-brands {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
  padding: 12px 14px;
  background: var(--cream);
  border-radius: var(--radius-md);
}
.payment-brands__label {
  font-size: 0.72rem; color: var(--text-light);
  font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-right: 4px;
}
.payment-brand {
  display: inline-flex; align-items: center;
  border-radius: 4px;
  overflow: hidden;
  line-height: 0;  /* éviter espace baseline autour du SVG */
  transition: transform 0.15s;
}
.payment-brand:hover { transform: scale(1.05); }
.payment-brand svg { display: block; }

/* ── 14.9 Summary (right col, sticky) ── */
.checkout__summary {
  position: sticky;
  top: calc(64px + 24px);
  display: flex; flex-direction: column;
  gap: 16px;
}
.summary {
  background: var(--white);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  overflow: hidden;
}
.summary__head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 18px 22px;
  border-bottom: 1px solid var(--border);
}
.summary__title {
  font-family: var(--font-heading);
  font-size: 1.1rem; font-weight: 700;
  letter-spacing: -0.01em;
}
.summary__count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 26px; height: 26px;
  padding: 0 8px;
  background: var(--secondary); color: var(--white);
  border-radius: 100px;
  font-size: 0.8rem; font-weight: 700;
}

.summary__items {
  max-height: 320px;
  overflow-y: auto;
  padding: 4px 22px;
}
.summary__items::-webkit-scrollbar { width: 4px; }
.summary__items::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 4px; }

.summary__item {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px dashed var(--border);
}
.summary__item:last-child { border-bottom: none; }
.summary__img {
  width: 48px; height: 48px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--surface);
}
.summary__img img { width: 100%; height: 100%; object-fit: cover; }
.summary__info { min-width: 0; }
.summary__name {
  font-size: 0.85rem; font-weight: 600;
  display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical;
  overflow: hidden;
}
.summary__qty {
  font-size: 0.74rem; color: var(--text-light);
  font-variant-numeric: tabular-nums;
}
.summary__notes {
  font-size: 0.7rem; color: var(--text-light);
  font-style: italic;
  display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical;
  overflow: hidden;
}
.summary__notes::before { content: '✏️ '; }
.summary__line-total {
  font-family: var(--font-heading);
  font-size: 0.92rem; font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.summary__totals { padding: 14px 22px 18px; }
.summary__row {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 6px 0;
  font-size: 0.88rem;
}
.summary__row span:last-child { font-variant-numeric: tabular-nums; }
.summary__row--minor { font-size: 0.8rem; color: var(--text-light); }
.summary__free {
  color: var(--halal); font-weight: 700;
  display: inline-flex; align-items: center; gap: 4px;
}
.summary__free::before { content: '✓'; font-weight: 800; }
.summary__divider { border: none; border-top: 1px dashed var(--border); margin: 8px 0; }
.summary__row--total {
  font-family: var(--font-heading);
  font-size: 1.4rem; font-weight: 700;
  letter-spacing: -0.01em;
  padding: 12px 0 8px;
}
.summary__row--total span:last-child { color: var(--primary); font-size: 1.55rem; }

.summary__cta {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: calc(100% - 44px);
  margin: 0 22px 16px;
  padding: 18px 24px;
  background: var(--secondary); color: var(--white);
  border: none; border-radius: 100px;
  font-family: var(--font-body); font-weight: 700; font-size: 0.95rem;
  letter-spacing: 0.04em; text-transform: uppercase;
  box-shadow: var(--shadow-md);
  position: relative; overflow: hidden;
  transition: all 0.25s;
  cursor: pointer;
}
.summary__cta::before {
  content: ''; position: absolute; inset: 0;
  background: var(--primary);
  transform: translateX(-100%);
  transition: transform 0.35s ease;
}
.summary__cta:hover::before { transform: translateX(0); }
.summary__cta:hover { box-shadow: var(--shadow-lg); }
.summary__cta:disabled { opacity: 0.55; cursor: not-allowed; box-shadow: none; }
.summary__cta:disabled::before { display: none; }
.summary__cta > * { position: relative; z-index: 1; }
.summary__cta__icon { width: 16px; height: 16px; }

/* Trust signals INLINE au CTA (Baymard +18%) */
.summary__cta-trust {
  display: flex; flex-wrap: wrap; gap: 8px; row-gap: 6px;
  align-items: center; justify-content: center;
  padding: 0 22px 18px;
  font-size: 0.74rem; color: var(--text-light);
}
.summary__cta-trust__item {
  display: inline-flex; align-items: center; gap: 4px;
}
.summary__cta-trust__item svg { width: 12px; color: var(--halal); }
.summary__cta-trust__sep { color: var(--text-soft); }

/* Card pickup confirmé */
.summary__pickup {
  background: linear-gradient(135deg, var(--halal-soft), rgba(46,125,50,0.04));
  border: 1px solid rgba(46,125,50,0.2);
  border-radius: var(--radius-md);
  padding: 14px 18px;
  font-size: 0.85rem;
  display: flex; align-items: flex-start; gap: 12px;
}
.summary__pickup__icon {
  width: 38px; height: 38px; flex-shrink: 0;
  border-radius: 50%;
  background: var(--white); color: var(--halal);
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 6px rgba(46,125,50,0.15);
}
.summary__pickup-info { flex: 1; min-width: 0; }
.summary__pickup-info strong { display: block; font-weight: 700; margin-bottom: 2px; color: var(--text); }
.summary__pickup-info span { color: var(--text-light); font-size: 0.78rem; display: block; }
.summary__pickup-notes {
  display: block;
  margin-top: 8px;
  font-size: 0.78rem;
  color: var(--text);
  font-style: italic;
  line-height: 1.45;
  white-space: pre-line;
}
.summary__pickup-notes:empty,
.summary__pickup-notes[hidden] { display: none; }

/* Audit v4 #3 : liens CGV/Confidentialité inline encore trop petits.
   Nouvelle approche : retirer les liens du texte inline et les empiler en
   bloc séparé sous le texte, chacun avec min-height 44px (true WCAG tap
   target). Layout : texte "En passant commande, vous acceptez :" puis
   2 liens block-level alignés vertically. Plus de break line surprise. */
.summary__cgv {
  font-size: 0.85rem; color: var(--text-light);
  text-align: center; padding: 4px 4px; line-height: 1.6;
}
.summary__cgv__links {
  display: flex; flex-direction: column;
  gap: 4px; margin-top: 8px;
  align-items: center;
}
.summary__cgv a {
  color: var(--primary); font-weight: 600;
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 6px 12px;
  border-radius: 8px;
  transition: background 0.15s;
}
.summary__cgv a:hover, .summary__cgv a:focus-visible {
  text-decoration: underline;
  background: rgba(211,47,47,0.06);
}

/* ── 14.10 Footer minimal (focus tunnel) ── */
.co-footer {
  background: var(--secondary); color: rgba(255,255,255,0.6);
  padding: 28px var(--pad-page);
  text-align: center;
  font-size: 0.78rem;
  margin-top: auto;
}
.co-footer__brand {
  font-family: var(--font-heading);
  font-weight: 700; color: var(--white);
  margin-bottom: 6px;
}
.co-footer__brand span { color: var(--primary); }
.co-footer__inner {
  max-width: 600px; margin: 0 auto;
  display: flex; flex-direction: column; gap: 6px;
}
.co-footer__links {
  display: inline-flex; gap: 16px; justify-content: center;
  list-style: none; margin-top: 8px;
}
.co-footer__links a { color: rgba(255,255,255,0.6); transition: color 0.15s; }
.co-footer__links a:hover { color: var(--white); }

/* ── 14.11 Mobile sticky CTA cart variant pour checkout ── */
.mobile-cta--checkout .mobile-cta__total {
  font-family: var(--font-heading);
  font-size: 1.25rem; font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* ══════════════ 15. PAGE SUCCESS (refonte Sprint 5 — UX confirmation premium) ══════════════ */

/* ── 15.0 Body + nav variant OK ── */
.success-body { background: var(--cream); }
.co-nav__steps--ok { color: var(--halal); }
.co-nav__steps--ok svg { color: var(--halal); }

/* ── 15.1 Layout principal ── */
.success {
  max-width: 720px;
  margin: 0 auto;
  padding: 32px 20px 96px;
  display: grid;
  gap: 20px;
}

/* ── 15.2 Hero confirmation (focus émotionnel) ── */
.success-hero {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 24px;
  padding: 44px 28px 36px;
  text-align: center;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
  animation: success-rise 600ms cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes success-rise {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .success-hero { animation: none; }
  .success-hero__check__ring,
  .success-hero__check__tick { animation: none !important; }
}

.success-hero__check {
  width: 88px; height: 88px;
  margin: 0 auto 20px;
  border-radius: 50%;
  background: var(--halal-soft);
  color: var(--halal);
  display: grid; place-items: center;
}
.success-hero__check__ring {
  stroke-dasharray: 176; stroke-dashoffset: 176;
  animation: ring-draw 600ms 100ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.success-hero__check__tick {
  stroke-dasharray: 36; stroke-dashoffset: 36;
  animation: tick-draw 300ms 600ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
@keyframes ring-draw { to { stroke-dashoffset: 0; } }
@keyframes tick-draw { to { stroke-dashoffset: 0; } }

/* Badge "COMMANDE CONFIRMÉE" : couleur halal-dark (#1B5E20) au lieu de
   --halal (#2E7D32) → contraste 6.3:1 sur cream (vs 4.3:1 borderline).
   WCAG AA conforme pour texte petit/uppercase. */
.success-hero__label {
  font-size: 0.74rem; font-weight: 700; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--halal-dark);
  margin: 0 0 14px;
}
.success-hero__title {
  font-family: var(--font-heading);
  font-size: clamp(1.8rem, 4vw + 0.5rem, 2.6rem);
  font-weight: 800;
  line-height: 1.15;
  color: var(--secondary);
  margin: 0 0 16px;
}
.success-hero__title em {
  font-style: normal;
  color: var(--primary);
}
.success-hero__intro {
  font-size: 0.98rem;
  line-height: 1.6;
  color: var(--text);
  max-width: 480px;
  margin: 0 auto 16px;
}
.success-hero__intro strong { color: var(--secondary); font-weight: 700; }
.success-hero__email {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 0.85rem; color: var(--text-muted);
  margin: 0;
}
.success-hero__email strong { color: var(--text); font-weight: 600; }
.success-hero__email svg { color: var(--text-muted); flex-shrink: 0; }

/* ── 15.3 Pickup card (CTA download .ics + print) ── */
.pickup-card {
  background: linear-gradient(180deg, var(--halal-soft) 0%, var(--white) 100%);
  border: 1px solid rgba(46,125,50,0.18);
  border-radius: 20px;
  padding: 24px 24px 20px;
  display: grid;
  gap: 16px;
}
.pickup-card__head {
  display: flex; align-items: center; gap: 10px;
  margin: 0;
}
.pickup-card__icon {
  display: grid; place-items: center;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--halal); color: var(--white);
  flex-shrink: 0;
}
.pickup-card__title {
  font-family: var(--font-heading);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--secondary);
  margin: 0;
}

.pickup-card__when {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 16px 18px;
  text-align: center;
}
.pickup-card__when__date {
  font-family: var(--font-heading);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--secondary);
  text-transform: capitalize;
  margin: 0 0 6px;
  line-height: 1.3;
}
.pickup-card__when__slot {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  font-size: 0.92rem;
  color: var(--text);
  margin: 0;
}
.pickup-card__when__slot strong {
  color: var(--primary);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.pickup-card__when__slot svg { color: var(--text-muted); }

.pickup-card__where {
  text-align: center;
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--text);
}
.pickup-card__shop { font-weight: 700; color: var(--secondary); margin: 0 0 4px; }
.pickup-card__addr { color: var(--text); margin: 0 0 8px; }
.pickup-card__phone {
  display: inline-flex; align-items: center; gap: 6px;
  margin: 0;
}
.pickup-card__phone svg { color: var(--primary); }
.pickup-card__notes {
  margin: 0;
  padding: 12px 14px;
  background: var(--white);
  border: 1px dashed rgba(46,125,50,0.35);
  border-radius: var(--radius-md);
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--text);
  white-space: pre-line;
}
.pickup-card__phone a {
  color: var(--primary);
  font-weight: 600;
  text-decoration: none;
  font-variant-numeric: tabular-nums;
}
.pickup-card__phone a:hover { text-decoration: underline; }

.pickup-card__actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.pickup-action {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px 14px;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text);
  text-decoration: none;
  cursor: pointer;
  transition: all 180ms ease;
  font-family: inherit;
  /* Touch target ≥44px (§2 touch-target-size) */
  min-height: 44px;
}
.pickup-action:hover,
.pickup-action:focus-visible {
  border-color: var(--halal);
  color: var(--halal);
  background: var(--halal-soft);
}
.pickup-action svg { color: currentColor; }

.pickup-card__hint {
  display: flex; align-items: flex-start; gap: 8px;
  font-size: 0.82rem;
  color: var(--text-muted);
  line-height: 1.5;
  margin: 0;
  padding-top: 4px;
}
.pickup-card__hint svg { color: var(--halal); flex-shrink: 0; margin-top: 2px; }

/* ── 15.4 Section title commun ── */
.success-section-title {
  font-family: var(--font-heading);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--secondary);
  margin: 0 0 16px;
  padding: 0 4px;
}

/* ── 15.5 Timeline (Et après ?) ── */
.success-timeline {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 24px;
}
.timeline {
  list-style: none;
  margin: 0; padding: 0;
  display: grid;
  gap: 0;
  position: relative;
}
.timeline__step {
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: 14px;
  padding: 0 0 18px;
  position: relative;
}
.timeline__step:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 15px; top: 32px;
  width: 2px; height: calc(100% - 32px);
  background: var(--border);
  border-radius: 1px;
}
.timeline__step.is-done:not(:last-child)::before { background: var(--halal); }

.timeline__bullet {
  width: 32px; height: 32px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: var(--white);
  border: 2px solid var(--border);
  color: var(--text-muted);
  flex-shrink: 0;
  z-index: 1;
}
.timeline__step.is-done .timeline__bullet {
  background: var(--halal);
  border-color: var(--halal);
  color: var(--white);
}
.timeline__step.is-current .timeline__bullet {
  background: var(--primary-soft);
  border-color: var(--primary);
  color: var(--primary);
  animation: timeline-pulse 2s ease-in-out infinite;
}
@keyframes timeline-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(211,47,47,0.4); }
  50%      { box-shadow: 0 0 0 6px rgba(211,47,47,0); }
}
@media (prefers-reduced-motion: reduce) {
  .timeline__step.is-current .timeline__bullet { animation: none; }
}

.timeline__body { padding-top: 4px; }
.timeline__title {
  font-size: 0.95rem; font-weight: 600;
  color: var(--secondary);
  margin: 0 0 4px;
}
.timeline__step.is-done .timeline__title { color: var(--text); }
.timeline__step.is-current .timeline__title { color: var(--primary); }
.timeline__hint {
  font-size: 0.84rem;
  line-height: 1.5;
  color: var(--text-muted);
  margin: 0;
}

/* ── 15.6 Recap (compact) ── */
.success-recap {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 24px;
}
.recap-list {
  list-style: none;
  margin: 0 0 16px; padding: 0;
  display: grid;
  gap: 12px;
}
.recap-item {
  display: grid;
  grid-template-columns: 56px 1fr auto;
  gap: 14px;
  align-items: center;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}
.recap-item:last-child { border-bottom: none; padding-bottom: 0; }
.recap-item__img {
  width: 56px; height: 56px;
  border-radius: 10px;
  overflow: hidden;
  background: var(--cream);
  display: grid; place-items: center;
  font-size: 1.4rem;
}
.recap-item__img img { width: 100%; height: 100%; object-fit: cover; }
.recap-item__placeholder { color: var(--text-muted); }
.recap-item__info { min-width: 0; }
.recap-item__name {
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--secondary);
  margin: 0 0 2px;
  line-height: 1.3;
}
.recap-item__qty {
  font-size: 0.82rem;
  color: var(--text-muted);
  margin: 0;
}
.recap-item__notes {
  font-size: 0.78rem;
  color: var(--text-muted);
  font-style: italic;
  margin: 4px 0 0;
}
.recap-item__price {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--secondary);
  font-variant-numeric: tabular-nums;
  margin: 0;
}

.recap-totals {
  display: grid;
  gap: 6px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
  margin: 0;
}
.recap-totals__row {
  display: flex; justify-content: space-between;
  font-size: 0.92rem;
  color: var(--text);
  margin: 0;
}
.recap-totals__row dt, .recap-totals__row dd { margin: 0; }
.recap-totals__row dd { font-variant-numeric: tabular-nums; font-weight: 600; }
.recap-totals__row--minor {
  font-size: 0.82rem;
  color: var(--text-muted);
}
.recap-totals__row--minor dd { font-weight: 500; }
/* "Gratuit" en vert halal avec check : valeur ajoutée perçue par l'user */
.recap-totals__free {
  color: var(--halal);
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.recap-totals__row--total {
  font-family: var(--font-heading);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--secondary);
  padding-top: 10px;
  margin-top: 6px;
  border-top: 2px solid var(--secondary);
}
.recap-totals__row--total dd { color: var(--primary); font-size: 1.3rem; }

/* ── 15.7 Help / contact ── */
.success-help {
  background: var(--cream);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 24px;
}
.success-help__title {
  font-family: var(--font-heading);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--secondary);
  margin: 0 0 8px;
}
.success-help__intro {
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--text);
  margin: 0 0 16px;
}
.success-help__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.help-contact {
  display: flex; align-items: center; gap: 12px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px;
  text-decoration: none;
  color: var(--text);
  transition: all 180ms ease;
  min-height: 64px;
}
.help-contact:hover,
.help-contact:focus-visible {
  border-color: var(--primary);
  background: var(--primary-soft);
}
.help-contact__icon {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--primary-soft);
  color: var(--primary);
  display: grid; place-items: center;
  flex-shrink: 0;
}
.help-contact__text { display: grid; gap: 2px; min-width: 0; }
.help-contact__label {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.help-contact__value {
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--secondary);
  font-variant-numeric: tabular-nums;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── 15.8 Final CTAs ── */
.success-cta {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 8px;
}
.success-cta__primary {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  background: var(--primary);
  color: var(--white);
  border: none;
  border-radius: 14px;
  padding: 16px 20px;
  font-size: 1rem;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  font-family: inherit;
  transition: all 180ms ease;
  min-height: 48px;
  box-shadow: 0 2px 6px rgba(211,47,47,0.18);
}
.success-cta__primary:hover,
.success-cta__primary:focus-visible {
  background: var(--primary-dark);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(211,47,47,0.28);
}
.success-cta__ghost {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: transparent;
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 14px 20px;
  font-size: 0.95rem;
  font-weight: 600;
  text-decoration: none;
  font-family: inherit;
  transition: all 180ms ease;
  min-height: 44px;
}
.success-cta__ghost:hover,
.success-cta__ghost:focus-visible {
  border-color: var(--secondary);
  color: var(--secondary);
  background: var(--white);
}

/* ── 15.9 Pending state (webhook tarde) ── */
.success-pending {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 24px;
  padding: 56px 28px 40px;
  text-align: center;
}
.success-pending__spinner {
  width: 88px; height: 88px;
  margin: 0 auto 24px;
  border-radius: 50%;
  background: var(--primary-soft);
  color: var(--primary);
  display: grid; place-items: center;
}
.success-pending__spinner svg { animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .success-pending__spinner svg { animation: none; }
}

/* ── 15.9b RGPD form ── */
.rgpd-form { display: block; }
.rgpd-actions {
  display: grid;
  gap: 10px;
  margin-top: 8px;
}
.rgpd-action {
  display: flex; align-items: flex-start; gap: 12px;
  background: var(--white);
  border: 2px solid var(--border);
  border-radius: 14px;
  padding: 14px;
  cursor: pointer;
  transition: all 180ms ease;
}
.rgpd-action:hover {
  border-color: var(--primary);
  background: var(--primary-soft);
}
/* A11y N15 : focus visible quand l'user navigue au clavier. Le radio interne
   est positionné absolute mais reçoit le focus → on relaie via :focus-within. */
.rgpd-action:focus-within {
  border-color: var(--primary);
  outline: 3px solid var(--primary-soft);
  outline-offset: 2px;
}
.rgpd-action input[type="radio"] {
  margin-top: 2px;
  flex-shrink: 0;
  accent-color: var(--primary);
  width: 18px; height: 18px;
}
.rgpd-action input[type="radio"]:checked ~ .rgpd-action__body strong { color: var(--primary); }
.rgpd-action:has(input[type="radio"]:checked) {
  border-color: var(--primary);
  background: var(--primary-soft);
}
.rgpd-action__body { display: grid; gap: 4px; }
.rgpd-action__body strong {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--secondary);
}
.rgpd-action__body small {
  font-size: 0.82rem;
  color: var(--text-muted);
  line-height: 1.5;
}

/* ── 15.10 Tablet & desktop adjustements ── */
@media (min-width: 768px) {
  .success { padding: 48px 24px 96px; gap: 24px; }
  .success-hero { padding: 56px 40px 44px; }
  .pickup-card { padding: 28px 28px 24px; }
  .pickup-card__when__date { font-size: 1.3rem; }
  .pickup-card__actions { grid-template-columns: 1fr 1fr; }
  .success-cta {
    flex-direction: row;
    justify-content: center;
  }
  .success-cta__primary { flex: 1; max-width: 320px; }
  .success-cta__ghost { flex: 1; max-width: 240px; }
}

/* ── 15.11 Mobile small (≤560px) ── */
@media (max-width: 560px) {
  .pickup-card__actions { grid-template-columns: 1fr; }
  .success-help__row { grid-template-columns: 1fr; }
  .recap-item { grid-template-columns: 48px 1fr auto; gap: 10px; }
  .recap-item__img { width: 48px; height: 48px; }
}

/* ── Ticket de retrait (écran : masqué) ── */
.print-ticket { display: none; }

/* ── 15.12 Print (impression du ticket de retrait) ── */
@media print {
  .co-nav, .co-footer, .nav, .success-cta, .pickup-card__actions, .success-help,
  .success-timeline, .success-recap, .success-hero, .pickup-card { display: none !important; }
  body { background: white !important; margin: 0; padding: 0; }
  .success { padding: 0; max-width: 100%; }
  .print-ticket {
    display: block !important;
    width: 100%;
    padding: 0;
    color: black;
    font-size: 12pt;
    line-height: 1.4;
  }
  .print-ticket__title {
    font-size: 14pt; font-weight: 800; text-align: center;
    margin: 0 0 4px; text-transform: uppercase;
  }
  .print-ticket__order {
    text-align: center; font-size: 18pt; font-weight: 800;
    margin: 0 0 12px;
  }
  .print-ticket hr { border: none; border-top: 1px solid black; margin: 8px 0; }
  .print-ticket__row { margin: 4px 0; }
  .print-ticket__pickup { font-size: 13pt; margin: 8px 0; }
  .print-ticket__notes {
    margin: 8px 0; padding: 6px 8px;
    border: 1px dashed black; white-space: pre-line;
  }
  .print-ticket__items { list-style: none; padding: 0; margin: 0; }
  .print-ticket__items li {
    padding: 6px 0; border-bottom: 1px dotted #999;
    page-break-inside: avoid; break-inside: avoid;
  }
  .print-ticket__qty { display: inline-block; min-width: 70px; font-weight: 700; }
  .print-ticket__name { font-weight: 600; }
  .print-ticket__total { text-align: right; font-size: 14pt; margin: 12px 0; }
  .print-ticket__footer { margin-top: 8px; font-size: 9pt; color: #555; text-align: center; }
}

/* ══════════════ 18. RESPONSIVE ══════════════ */

/* ── Desktop (1280-1439) — produit ajuste cols ── */
@media (max-width: 1439px) {
  .product { grid-template-columns: 80px minmax(0, 1fr) 420px; gap: 32px; }
  .product--no-thumbs { grid-template-columns: minmax(0, 1fr) 420px; }
  .thumbs__btn { width: 80px; }
}

/* ── Desktop (1024-1279) ── */
@media (max-width: 1279px) {
  .shop-wrap { grid-template-columns: 200px 1fr; gap: 40px; }
  .grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
  .product { grid-template-columns: 72px minmax(0, 1fr) 380px; gap: 24px; }
  .product--no-thumbs { grid-template-columns: minmax(0, 1fr) 380px; }
  .thumbs__btn { width: 72px; }
}

/* ── Tablet (768-1023) — sidebar passe en horizontal ── */
@media (max-width: 1023px) {
  .shop-wrap { grid-template-columns: 1fr; gap: 24px; padding-top: 24px; }
  .sidebar {
    position: static;
    background: var(--white);
    border-radius: var(--radius-md);
    padding: 16px;
    box-shadow: var(--shadow-sm);
    overflow: hidden;
  }
  .sidebar__title { margin-bottom: 12px; }
  .sidebar__list {
    display: flex; gap: 8px;
    overflow-x: auto; scrollbar-width: none;
    scroll-snap-type: x proximity;
    margin: 0 -16px; padding: 0 16px;
    -webkit-overflow-scrolling: touch;
  }
  .sidebar__list::-webkit-scrollbar { display: none; }
  .sidebar__list li { flex-shrink: 0; }
  .sidebar__list a {
    padding: 8px 14px; border: 1px solid var(--border-strong); border-radius: 100px;
    background: var(--white);
    scroll-snap-align: start;
  }
  .sidebar__list a:hover { padding-left: 14px; border-color: var(--primary); }
  .sidebar__list a.is-active {
    background: var(--secondary); color: var(--white); border-color: var(--secondary);
  }
  .sidebar__list a.is-active::before { display: none; }
  .sidebar__count { display: none; }
  .sidebar__filter-block { margin-top: 12px; }
  .grid { grid-template-columns: repeat(3, 1fr); }
  .inspire { grid-template-columns: 1fr; }
  .inspire__img { display: none; }

  /* Cart/checkout — single col + summary statique */
  .shop-footer__inner { grid-template-columns: 1fr 1fr; }
  .cart-layout { grid-template-columns: 1fr; gap: 24px; }
  .cart-summary { position: static; }
  .checkout-grid { grid-template-columns: 1fr; }
  .checkout-summary { position: static; max-height: none; }
  /* BEM classes (checkout v2) : aussi en 1 col + summary statique pour éviter
     le chevauchement form / récap sur mobile/tablet (Sprint UX #1). */
  .checkout__layout { grid-template-columns: 1fr; }
  .checkout__summary { position: static; top: auto; }

  /* Produit : single col, dots remplacent thumbs verticaux */
  .product,
  .product--no-thumbs {
    grid-template-columns: 1fr;
    grid-template-areas: "hero" "info";
    gap: 24px; padding-top: 12px;
  }
  .thumbs { display: none; }
  .hero-img__dots { display: inline-flex; }
  /* IMPORTANT : position: relative pour que le __track absolu s'ancre sur .hero-img
     et NON sur le viewport (sinon le track fait 100vh et masque tout le contenu en-dessous).
     top: 0 pour annuler le top desktop (var(--nav-h)+36px) qui décalait l'image de 100px. */
  .hero-img { position: relative; top: 0; aspect-ratio: 1/1; }
  .info { padding-top: 0; }

  .story__inner { grid-template-columns: 1fr; }
  .story__deco { aspect-ratio: 16/9; max-height: 400px; }

  .bento__grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: minmax(160px, auto); }
  .bento__cell--1 { grid-column: span 2; grid-row: span 1; min-height: 320px; }
  .bento__cell--2 { grid-column: span 2; }
  .bento__cell--3, .bento__cell--4, .bento__cell--5 { grid-column: span 1; }
  /* Sans allergens : cell 3 + cell 5 partagent la dernière row en 2 cols (clean) */
  /* Avec allergens : cell 3 + cell 4 puis cell 5 span 2 (règle :has() globale s'applique) */
}

/* ── Tablet portrait / Mobile L (560-767) ── */
@media (max-width: 767px) {
  .nav__inner { padding: 0 16px; gap: 12px; }
  .nav__burger { display: flex; }
  .nav__links-wrap, .nav__links { display: none; }
  .nav__drawer { display: block; }
  .filter-bar { display: block; }

  .shop-hero { height: clamp(360px, 50vh, 500px); }
  .shop-hero__title { max-width: 100%; }
  .shop-hero__stats { gap: 20px; }

  .shop-wrap { padding-top: 16px; gap: 16px; }
  .sidebar { display: none; }

  .main__head { gap: 8px; }

  /* Audit v3 #2 (review H2) : padding-bottom UNIQUEMENT sur .grid (le parent
     direct des cards). Avant : aussi sur .shop-wrap → double padding 160px.
     `.shop-main` était dead code (jamais utilisé dans le markup). */
  .grid { grid-template-columns: repeat(2, 1fr); gap: 12px; padding-bottom: 80px; }
  .card__media { aspect-ratio: 1/1; }
  /* Mobile : on cache le CTA hover overlay (la card entière est tappable, le CTA permanent ajoute du bruit visuel) */
  .card__add-cta { display: none; }
  .card__body { padding: 12px 14px; }
  .card__category { font-size: 0.62rem; margin-bottom: 4px; }
  /* Description : 2 lignes avec ellipsis sur mobile (Sprint UX #9 — passé de 1
     à 2 lignes pour rendre plus d'info visible directement, tooltip natif
     `title` sur la card fournit la version complète). */
  .card__desc {
    display: -webkit-box;
    -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 0.76rem;
    margin-bottom: 8px;
    min-height: 0;
    line-height: 1.4;
  }
  .card__name { font-size: 0.98rem; line-height: 1.25; }
  .card__price-row { padding-top: 8px; }
  .card__badges { top: 8px; left: 8px; }
  .card__badge { padding: 3px 8px; font-size: 0.62rem; }

  .inspire { padding: 24px; }
  .pagination { gap: 4px; }
  /* Audit v4 M3 : bumped 40 → 44 (WCAG min). */
  .pagination__btn { min-width: 44px; height: 44px; }

  /* Sprint UX hotfix : panier accessible depuis TOUTES les pages mobile.
     .nav__cart reste 44x44 (WCAG touch target). margin-left: auto pour
     compenser la disparition de .nav__links-wrap (qui le poussait à droite
     en desktop). .fab-cart reste sur /boutique comme bonus visuel. */
  .fab-cart { display: inline-flex; }
  .nav__cart { margin-left: auto; }
  /* Self-link quand l'user est SUR /panier : opacité réduite + curseur default
     pour signaler "you are here" (review M1). */
  .nav__cart[aria-current="page"] {
    opacity: 0.55; pointer-events: none; cursor: default;
  }

  .shop-footer__inner { grid-template-columns: 1fr 1fr; }
  .shop-footer__bottom { flex-direction: column; gap: 6px; text-align: center; }

  /* Audit v4 M1 : `:has()` ne marchait pas fiablement (compat iOS Safari 15.0-15.3
     OU cache SW). Approche plus robuste : padding-bottom INCONDITIONNEL sur
     .shop-footer mobile. Trade-off : ~100px de gap inutile sur /contact
     (pas de sticky CTA), acceptable car footer est en bas absolu.
     Sur pages avec sticky (panier, produit) : la sticky recouvre uniquement
     le padding vide, pas les liens du footer__bottom. */
  .shop-footer { padding-bottom: calc(var(--cta-h) + 32px); }
  /* Cart : grid 2 rows asymétrique pour mobile L */
  .cart-page { padding: 12px var(--pad-page) var(--cta-h); }
  .cart-head { gap: 8px; padding-bottom: 14px; margin-bottom: 18px; }
  .cart-items__head { padding: 16px 18px; }
  .cart-items__title { font-size: 1.05rem; }
  .cart-item {
    grid-template-columns: 64px minmax(0, 1fr) auto;
    grid-template-areas:
      "media info remove"
      "media qty   total";
    gap: 14px;
    padding: 16px 18px;
    align-items: start;
  }
  .cart-item__media { width: 64px; height: 64px; grid-area: media; }
  .cart-item__info  { grid-area: info; }
  /* Touch targets ≥44×44 sur mobile (rule §2 touch-target-size).
     Anciennement 28-32px → mistap garantis avec doigt mouillé du boucher. */
  .cart-item__qty   { grid-area: qty; align-self: end; padding: 4px; }
  .cart-item__qty-btn { width: 36px; height: 36px; font-size: 1rem; }
  .cart-item__qty-val { min-width: 48px; padding: 0 6px; font-size: 0.9rem; }
  .cart-item__total { grid-area: total; align-self: end; font-size: 1.05rem; }
  /* X delete : silhouette 28px + hit-area 44×44 via padding wrapper */
  .cart-item__remove{
    grid-area: remove; align-self: start;
    width: 44px; height: 44px; padding: 8px;
  }
  .cart-item__remove svg { width: 16px; height: 16px; }
  .cart-item__name { font-size: 0.95rem; }
  .cart-item__cat  { font-size: 0.66rem; }
  .cart-item__notes,
  .cart-item__price-line { font-size: 0.74rem; }
  .cart-continue { width: 100%; justify-content: center; padding: 14px; }
  .summary-card { padding: 20px; }
  .summary-card__title { font-size: 1.05rem; }
  .summary-row--total { font-size: 1.3rem; }
  .summary-row--total span:last-child { font-size: 1.5rem; }
  /* Sur mobile : on cache le CTA desktop, la sticky bar fait le job */
  .summary-cta { display: none; }

  /* Checkout paiement : logos + CTA empilés, pas de débordement horizontal */
  .payment-cta { width: 100%; justify-content: center; }
  .payment-brands {
    flex-direction: column; align-items: flex-start;
    gap: 10px; padding: 12px;
  }
  .payment-brands__label { margin-right: 0; }
  .payment-brand svg { max-height: 22px; width: auto; }

  /* (anciennes règles .checkout-page/.checkout-section/.checkout-row/.checkout-slots/.success-page
     supprimées — refacto Sprint 4 + 5 utilise .checkout / .co-section / .co-row / .slots-grid / .success) */

  /* Produit mobile : main flex column + reorder pour mettre le décisionnel en haut
     Order : crumb → product (info) → bento (détails) → related (browse) → story → reviews */
  main { display: flex; flex-direction: column; }
  .crumb     { order: 0; margin-top: var(--nav-h); }
  .product   { order: 1; }
  .bento     { order: 2; }
  .related   { order: 3; }
  .story     { order: 4; margin-top: 0; }
  .reviews   { order: 5; }

  .crumb__inner { padding: 14px 16px 4px; font-size: 0.74rem; gap: 6px; }
  .back-link { display: none; }

  .product { padding: 8px 0 var(--cta-h); gap: 18px; }
  .info { padding: 4px var(--pad-page) 0; }

  .hero-img { aspect-ratio: 1/1; border-radius: 0; box-shadow: none; margin: 0; }
  .hero-img__top { top: 14px; left: 70px; right: 14px; }
  /* Audit v4 M2 : tap targets bumpés à 44px (étaient 38/40 sous WCAG). */
  .hero-img__action { width: 44px; height: 44px; }
  .hero-img__back { display: inline-flex; width: 44px; height: 44px; }
  /* Quick price chip masqué : redondant avec info__price column qui suit immédiatement */
  .hero-img__price-chip { display: none; }
  .hero-img__dots { bottom: 14px; }

  .info__category { margin-bottom: 8px; }
  .info__title { font-size: clamp(1.6rem, 6.5vw, 2rem); margin-bottom: 12px; }
  .info__meta { padding-bottom: 16px; margin-bottom: 16px; gap: 12px; font-size: 0.8rem; }
  .info__price-row { gap: 8px; }
  .info__price { font-size: clamp(1.9rem, 8vw, 2.4rem); }
  .info__price-tax { width: 100%; margin-left: 0; margin-top: 4px; font-size: 0.74rem; }
  .info__desc { padding-left: 12px; font-size: 0.92rem; margin: 16px 0 24px; }

  .config { margin-bottom: 16px; }
  .weight-grid { grid-template-columns: repeat(4, 1fr); gap: 6px; }
  .weight-opt__btn { padding: 12px 4px; font-size: 0.85rem; }
  .weight-custom { padding: 4px 4px 4px 12px; }
  .weight-custom__label { font-size: 0.78rem; }
  /* Audit v4 M2 : bumped 40 → 44 (WCAG minimum). Le wrapper stepper a
     déjà du padding, donc 44px buttons gardent un visuel correct. */
  .weight-custom__btn { width: 44px; height: 44px; }
  .weight-custom__input { width: 60px; font-size: 1.05rem; }

  .qty-row { padding: 14px 0; margin-bottom: 16px; }

  .cta-add { display: none; }
  .cta-block { margin-top: 16px; gap: 10px; }
  .pickup { padding: 8px 12px; font-size: 0.78rem; }
  .pickup__addr { display: none; } /* mobile : adresse cachée pour rester sur 1 ligne, l'user verra dans le footer */
  /* Trust strip mobile : wrap sur 2 lignes au lieu de scroll horizontal
     (review H3). Scroll horizontal cassait la guideline `horizontal-scroll`
     du skill UI/UX et tronquait visiblement le 3e badge ("Préparé..."). */
  .trust {
    flex-wrap: wrap;
    margin: 16px 0 0;
    padding: 16px 0 0;
    gap: 8px 10px;
    justify-content: flex-start;
  }
  .trust__item {
    flex: 1 1 calc(50% - 5px);
    font-size: 0.74rem;
    padding: 8px 10px;
    justify-content: center;
    white-space: nowrap;
  }

  /* Story : décor caché sur mobile, gradient bg + content centré
     Audit v4 C2 : ::before continuait à déborder 50px (right: -50px).
     Maintenant ancré à right: 0 → reste entièrement dans la boîte.
     Aussi : `overflow: clip` plus strict que `overflow: hidden` pour
     forcer le clipping même au niveau scrollWidth (Chrome 90+ Safari 16+). */
  .story { padding: 40px var(--pad-page); overflow: clip; }
  .story::before { width: 280px; height: 280px; top: -50px; right: 0; }
  .story__inner { grid-template-columns: 1fr; gap: 0; }
  .story__deco { display: none; } /* gain ~320px de scroll, le bg dark gradient suffit */
  .story__title { font-size: clamp(1.5rem, 6.5vw, 1.9rem); }
  .story__text { font-size: 0.92rem; margin-bottom: 20px; }
  .story__stats { grid-template-columns: 1fr 1fr 1fr; gap: 14px; padding-top: 20px; }
  .story__stat-val { font-size: 1.4rem; }

  /* Bento : 2 cols asymétrique, cells 1+2 full width, 3/4/5 demi */
  .bento { padding: 40px var(--pad-page); }
  .bento__head { margin-bottom: 24px; align-items: center; }
  .bento__head-main { flex: 1; min-width: 0; }
  .bento__sub { font-size: 0.88rem; flex-basis: 100%; order: 3; }
  .bento__toggle { display: inline-flex; order: 2; flex-shrink: 0; }
  .bento__grid.is-collapsed { display: none; }
  .bento__grid { grid-template-columns: 1fr 1fr; grid-auto-rows: minmax(140px, auto); gap: 10px; }
  .bento__cell--1 { grid-column: span 2; min-height: 220px; }
  .bento__cell--2 { grid-column: span 2; }
  .bento__cell--3, .bento__cell--4, .bento__cell--5 { grid-column: span 1; min-height: 180px; }
  /* Avec allergens (cell 4 rendue) : cell 5 prend toute la ligne pour combler.
     Sans allergens : cell 3 + cell 5 partagent la dernière row en 2 cols (clean). */
  .bento__grid:has(.bento__cell--4) .bento__cell--5 { grid-column: 1 / -1; }
  .bento__cell { padding: 18px; }
  .bento__cell-icon { width: 36px; height: 36px; margin-bottom: 12px; }
  .bento__cell-title { font-size: 1.05rem; }
  .bento__cell-text { font-size: 0.84rem; }
  .bento__hero-content { padding: 24px; }
  .bento__hero-title { font-size: 1.2rem; }
  .bento__hero-text { font-size: 0.85rem; }

  .related { padding: 40px var(--pad-page); }
  .related__head { gap: 12px; }
  .related__title { font-size: 1.4rem; }
  .related__grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }

  .mobile-cta { display: block; }
  .mobile-cta__thumb { display: block; }
}

/* ── Mobile S (375-559) ── */
@media (max-width: 559px) {
  :root { --gap-grid: 10px; --cta-h: calc(80px + var(--safe-bottom)); }
  .shop-hero { height: 360px; }
  .shop-hero__title { font-size: clamp(1.8rem, 8vw, 2.4rem); }
  .filter-bar__chip { font-size: 0.78rem; padding: 7px 12px; }
  .main__title { font-size: 1.4rem; }
  /* Footer : on garde 2 cols pour économiser de la verticalité (vs 1 col stack) */
  .shop-footer__inner { grid-template-columns: 1fr 1fr; gap: 20px; }
  .shop-footer__title { font-size: 0.65rem; }
  .shop-footer__addr, .shop-footer__hours, .shop-footer__links a { font-size: 0.82rem; }

  /* Produit S */
  .info__title { font-size: 1.45rem; line-height: 1.1; }
  .info__price { font-size: 1.95rem; }
  .weight-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .weight-opt__btn { padding: 14px 4px; font-size: 0.92rem; }
  .qty-stepper__btn { width: 38px; height: 38px; }
  .info__desc { font-size: 0.9rem; padding-left: 12px; }
  .story__stats { grid-template-columns: 1fr 1fr; }
  .story__stats > div:last-child { grid-column: 1 / -1; }
  .bento__cell { padding: 16px; }
  .bento__cell--1 { min-height: 240px; }
  .bento__cell-icon { width: 34px; height: 34px; margin-bottom: 10px; }
  .related__title, .bento__title { font-size: 1.4rem; }
  .related__grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .mobile-cta__thumb { display: none; }
  .mobile-cta__btn { padding: 13px 16px; font-size: 0.88rem; }
  .mobile-cta__qty-btn { width: 32px; height: 32px; font-size: 0.95rem; }
  .mobile-cta__qty-val { min-width: 26px; font-size: 0.95rem; }
}

/* ── Mobile XS (<375) ── */
@media (max-width: 374px) {
  :root { --pad-page: 12px; }
  .shop-hero { height: 320px; }
  .nav__logo { font-size: 0.95rem; }
  .grid { grid-template-columns: 1fr; }
  .card__media { aspect-ratio: 4/3; }

  /* Produit XS */
  .info__title { font-size: 1.3rem; }
  .info__price { font-size: 1.75rem; }
  .related__grid { grid-template-columns: 1fr; }
  .story__stats { grid-template-columns: 1fr; }
  .mobile-cta__qty { display: none; }
  .mobile-cta__btn { padding: 14px 18px; }
}

/* ── Print ── */
@media print {
  .nav, .filter-bar, .fab-cart, .card__add-cta, .filter-drawer, .mobile-cta, .hero-img__back { display: none !important; }
  .shop-hero { height: auto; padding: 24px 0; }
  .shop-hero__bg, .shop-hero__overlay { display: none; }
  .shop-hero__content { color: var(--text); }
  body { background: var(--white); }
  .product { grid-template-columns: 1fr; }
  .hero-img { box-shadow: none; }
  .story, .bento, .related { page-break-inside: avoid; }
}

/* ══════════════ 16. UI UTILITIES (modal confirm + toast) ══════════════
   Composants réutilisables vanilla CSS, pas de framework. Utilisés par
   /js/ui-utils.js (window.UI.confirm + window.UI.toast). */

/* ── Modal confirm ── */
.ui-modal-overlay {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(0, 0, 0, 0); /* fade to 0.55 sur .is-visible */
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  opacity: 0; pointer-events: none;
  transition: background 0.2s, opacity 0.2s;
  backdrop-filter: blur(0);
}
.ui-modal-overlay.is-visible {
  opacity: 1; pointer-events: auto;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(4px);
}
.ui-modal {
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: 28px 28px 24px;
  max-width: 420px; width: 100%;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
  transform: translateY(12px) scale(0.96);
  transition: transform 0.2s cubic-bezier(0.32, 0.72, 0, 1);
}
.ui-modal-overlay.is-visible .ui-modal { transform: translateY(0) scale(1); }
.ui-modal__title {
  font-family: var(--font-heading);
  font-size: 1.3rem; font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0 0 10px;
  color: var(--text);
}
.ui-modal__message {
  font-size: 0.95rem; line-height: 1.5;
  color: var(--text-light);
  margin: 0 0 24px;
}
.ui-modal__actions {
  display: flex; gap: 10px;
  flex-direction: row-reverse; /* primary à droite (convention iOS/macOS) */
  flex-wrap: wrap;
}
.ui-modal__btn {
  flex: 1; min-width: 120px; min-height: 48px;
  padding: 12px 20px;
  border-radius: 100px;
  font-family: inherit; font-size: 0.95rem; font-weight: 700;
  cursor: pointer;
  transition: transform 0.15s, background 0.18s, border-color 0.18s;
  border: 1.5px solid transparent;
  letter-spacing: 0.01em;
}
.ui-modal__btn:focus-visible { outline: 3px solid var(--primary); outline-offset: 2px; }
.ui-modal__btn:active { transform: scale(0.97); }
.ui-modal__btn--cancel {
  background: var(--white);
  color: var(--text);
  border-color: var(--border-strong);
}
.ui-modal__btn--cancel:hover { background: var(--cream); border-color: var(--secondary); }
.ui-modal__btn--confirm {
  background: var(--secondary);
  color: var(--white);
}
.ui-modal__btn--confirm:hover { background: #000; }
.ui-modal__btn--danger {
  background: var(--primary);
  color: var(--white);
}
.ui-modal__btn--danger:hover { background: var(--primary-dark); }
.ui-modal__btn--danger:focus-visible { outline-color: var(--primary-dark); }

/* ── Toast (auto-dismiss avec action optionnelle) ──
   Review M2 : position dépend de la présence d'une sticky CTA en bas.
   --toast-bottom-offset défini par body.cta-visible (page produit, panier
   avec items) pour empêcher le toast d'être recouvert par la mobile-cta. */
.ui-toast {
  position: fixed; left: 50%;
  bottom: calc(20px + var(--safe-bottom, 0px) + var(--toast-bottom-offset, 0px));
  transform: translate(-50%, calc(100% + 24px));
  z-index: 200;
  display: inline-flex; align-items: center; gap: 12px;
  max-width: calc(100vw - 32px); min-width: 280px;
  padding: 12px 12px 12px 18px;
  background: var(--secondary);
  color: var(--white);
  border-radius: 100px;
  box-shadow: 0 10px 32px rgba(0, 0, 0, 0.2);
  font-size: 0.92rem; font-weight: 500;
  opacity: 0;
  transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1), opacity 0.2s;
}
.ui-toast.is-visible {
  transform: translate(-50%, 0);
  opacity: 1;
}
.ui-toast--success { background: var(--halal, #2E7D32); }
.ui-toast--warn { background: #ED6C02; }
.ui-toast__message { flex: 1; line-height: 1.4; }
.ui-toast__action {
  background: rgba(255, 255, 255, 0.18);
  color: var(--white);
  border: none;
  padding: 8px 14px;
  border-radius: 100px;
  font-family: inherit; font-size: 0.85rem; font-weight: 700;
  cursor: pointer;
  letter-spacing: 0.02em;
  transition: background 0.15s, transform 0.1s;
  flex-shrink: 0;
}
.ui-toast__action:hover { background: rgba(255, 255, 255, 0.3); }
.ui-toast__action:focus-visible { outline: 2px solid var(--white); outline-offset: 1px; }
.ui-toast__action:active { transform: scale(0.96); }
.ui-toast__close {
  background: transparent; color: var(--white);
  border: none;
  width: 28px; height: 28px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 1.4rem; line-height: 1;
  cursor: pointer;
  border-radius: 50%;
  opacity: 0.7;
  transition: opacity 0.15s, background 0.15s;
  flex-shrink: 0;
}
.ui-toast__close:hover { opacity: 1; background: rgba(255, 255, 255, 0.12); }

@media (prefers-reduced-motion: reduce) {
  .ui-modal-overlay, .ui-modal, .ui-toast {
    transition: opacity 0.1s, background 0.1s;
    transform: none !important;
  }
}

/* ══════════════ 17. MAPS CONSENT (Audit v3 #8) ══════════════
   Styles partagés pour le placeholder Maps RGPD-compliant.
   Utilisé sur /contact (shop.css) et homepage (CSS inline équivalent). */
.maps-consent__placeholder {
  width: 100%; height: 100%;
  background: linear-gradient(135deg, #FAF7F2 0%, #F5F0E8 100%);
  display: grid; place-items: center;
  padding: 24px 16px;
}
.maps-consent__inner {
  text-align: center;
  max-width: 360px; width: 100%;
}
.maps-consent__icon { color: var(--primary); margin-bottom: 12px; }
.maps-consent__title {
  font-family: var(--font-heading); font-size: 1.15rem; font-weight: 700;
  color: var(--secondary); margin: 0 0 8px;
}
.maps-consent__desc {
  font-size: 0.85rem; line-height: 1.5;
  color: var(--text-light); margin: 0 0 14px;
}
.maps-consent__addr {
  font-size: 0.88rem; margin: 0 0 16px;
  color: var(--text); line-height: 1.5;
  /* Audit v3 #8 : adresse coupée — autoriser le wrap propre */
  word-break: break-word; overflow-wrap: anywhere;
}
.maps-consent__addr strong { color: var(--secondary); }
.maps-consent__btn {
  background: var(--primary);
  color: var(--white);
  border: none;
  padding: 12px 22px;
  border-radius: 100px;
  font-family: inherit;
  font-size: 0.9rem; font-weight: 600;
  cursor: pointer;
  transition: background 0.2s, transform 0.15s, box-shadow 0.2s;
  /* Audit v3 #8 : bouton 28px → 44px tap target compliant */
  min-height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
}
.maps-consent__btn:hover, .maps-consent__btn:focus-visible {
  background: var(--primary-dark);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(211,47,47,0.25);
}
.maps-consent__hint {
  margin: 12px 0 0;
  font-size: 0.78rem; line-height: 1.5;
}
/* Audit v4 L3 : "Ou ouvrir dans Google Maps" tap target 44px. */
.maps-consent__hint a {
  color: var(--text-light); text-decoration: underline;
  display: inline-flex; align-items: center;
  min-height: 44px; padding: 4px 8px;
}

/* ══════════════ 18. INSTALL BANNER (Sprint post-launch #3) ══════════════
   Banner PWA custom sticky bottom. S'affiche au-dessus de mobile-cta si
   présente via empiledment safe. Animations slide-up + fade. */
.install-banner {
  position: fixed; left: 16px; right: 16px;
  bottom: calc(16px + var(--safe-bottom, 0px) + var(--toast-bottom-offset, 0px));
  z-index: 150;
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
  border: 1px solid var(--border);
  padding: 14px 16px;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas:
    "icon body"
    "actions actions";
  gap: 10px 14px;
  opacity: 0;
  transform: translateY(120%);
  transition: opacity 0.25s, transform 0.32s cubic-bezier(0.32, 0.72, 0, 1);
  max-width: 480px;
  margin: 0 auto;
}
.install-banner.is-visible {
  opacity: 1; transform: translateY(0);
}
.install-banner__close {
  position: absolute; top: 6px; right: 8px;
  width: 32px; height: 32px;
  background: transparent; border: none;
  color: var(--text-light);
  font-size: 1.4rem; line-height: 1; cursor: pointer;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background 0.15s, color 0.15s;
}
.install-banner__close:hover, .install-banner__close:focus-visible {
  background: var(--surface); color: var(--text);
}
.install-banner__icon {
  grid-area: icon;
  width: 40px; height: 40px;
  border-radius: 10px;
  overflow: hidden;
  flex-shrink: 0;
}
.install-banner__icon img { width: 100%; height: 100%; object-fit: cover; }
.install-banner__body {
  grid-area: body;
  min-width: 0;
  padding-right: 28px; /* space for close button */
}
.install-banner__title {
  font-family: var(--font-heading);
  font-size: 0.98rem; font-weight: 700;
  margin: 0 0 2px;
  color: var(--text);
  letter-spacing: -0.005em;
}
.install-banner__hint {
  font-size: 0.82rem;
  color: var(--text-light);
  margin: 0; line-height: 1.4;
}
.install-banner__hint strong { color: var(--text); font-weight: 600; }
.install-banner__share {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 18px;
  background: var(--primary); color: var(--white);
  border-radius: 4px;
  vertical-align: middle;
  margin: 0 2px;
}
.install-banner__actions {
  grid-area: actions;
  display: flex; gap: 8px; justify-content: flex-end;
  margin-top: 4px;
}
.install-banner__btn {
  min-height: 44px;
  padding: 8px 18px;
  border-radius: 100px;
  font-family: inherit; font-size: 0.88rem; font-weight: 700;
  cursor: pointer;
  border: 1.5px solid transparent;
  transition: background 0.15s, transform 0.1s, border-color 0.15s;
  display: inline-flex; align-items: center; justify-content: center;
}
.install-banner__btn:active { transform: scale(0.97); }
.install-banner__btn--primary {
  background: var(--secondary); color: var(--white);
}
.install-banner__btn--primary:hover, .install-banner__btn--primary:focus-visible {
  background: #000;
}
.install-banner__btn--secondary {
  background: var(--white); color: var(--text);
  border-color: var(--border-strong);
}
.install-banner__btn--secondary:hover, .install-banner__btn--secondary:focus-visible {
  background: var(--cream); border-color: var(--secondary);
}

@media (prefers-reduced-motion: reduce) {
  .install-banner { transition: opacity 0.1s; transform: none !important; }
}

/* ══════════════ 19. REVIEWS (Sprint post-launch #2) ══════════════ */
.reviews {
  background: var(--cream);
  padding: clamp(40px, 6vw, 72px) var(--pad-page);
  border-top: 1px solid var(--border);
}
.reviews__inner {
  max-width: 880px;
  margin: 0 auto;
}
.reviews__header {
  text-align: center;
  margin-bottom: 28px;
}
.reviews__title {
  font-family: var(--font-heading);
  font-size: clamp(1.6rem, 4vw, 2.2rem);
  font-weight: 700;
  margin: 0 0 12px;
  letter-spacing: -0.01em;
}
.reviews__aggregate {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  font-size: 0.95rem;
  color: var(--text-light);
  margin: 0;
}
.reviews__stars {
  color: #C8A24B;
  font-size: 1.4rem;
  letter-spacing: 4px;
}
.reviews__count strong { color: var(--text); }

.reviews__list {
  display: grid;
  gap: 16px;
  margin: 24px 0 28px;
}
.review-item {
  background: var(--white);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  padding: 18px 20px;
}
.review-item__head {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 12px; flex-wrap: wrap;
  margin-bottom: 8px;
}
.review-item__author {
  font-weight: 700;
  color: var(--text);
}
.review-item__date {
  font-size: 0.82rem;
  color: var(--text-soft);
}
.review-item__stars {
  color: #C8A24B;
  font-size: 1.05rem;
  letter-spacing: 2px;
  margin: 0 0 8px;
}
.review-item__content {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--text);
  white-space: pre-wrap;
}

.reviews__cta {
  display: flex; align-items: center; gap: 8px;
  padding: 14px 28px;
  background: var(--secondary);
  color: var(--white);
  border: none;
  border-radius: 100px;
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 700;
  cursor: pointer;
  min-height: 48px;
  margin: 0 auto;
  width: fit-content;
  transition: background 0.15s, transform 0.15s;
}
.reviews__cta:hover, .reviews__cta:focus-visible {
  background: #000;
  transform: translateY(-1px);
}
.reviews__cta:active { transform: scale(0.97); }

/* ── Review form dialog ── */
.review-modal {
  border: none;
  border-radius: var(--radius-lg);
  padding: 0;
  max-width: 540px;
  width: calc(100% - 32px);
  max-height: 90vh;
  margin: auto;
  inset: 0;
  background: var(--white);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
}
.review-modal::backdrop {
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(4px);
}
.review-form {
  padding: 24px 24px 20px;
  overflow-y: auto;
  max-height: 90vh;
}
.review-form__head {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 12px;
  margin-bottom: 18px;
}
.review-form__title {
  font-family: var(--font-heading);
  font-size: 1.2rem; font-weight: 700;
  margin: 0;
  letter-spacing: -0.01em;
}
.review-form__close {
  width: 36px; height: 36px;
  background: transparent;
  border: none;
  color: var(--text-light);
  font-size: 1.6rem; line-height: 1;
  cursor: pointer;
  border-radius: 50%;
  flex-shrink: 0;
  transition: background 0.15s;
}
.review-form__close:hover, .review-form__close:focus-visible {
  background: var(--cream);
}
.review-form__rating { border: none; padding: 0; margin: 0 0 16px; }
.review-form__label {
  display: block;
  font-size: 0.85rem; font-weight: 600;
  margin-bottom: 6px;
  color: var(--text);
}
.review-form__label .req { color: var(--primary); }
.review-form__stars { display: inline-flex; gap: 4px; }
.review-form__star input { position: absolute; opacity: 0; pointer-events: none; }
.review-form__star span {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;
  font-size: 1.6rem;
  color: var(--border-strong);
  cursor: pointer;
  user-select: none;
  transition: color 0.15s, transform 0.15s;
}
/* Stars flex-reverse : DOM order 1→5, affiché visuellement [5★ 4★ 3★ 2★ 1★].
   Le sélecteur ~ cible les frères DOM APRÈS l'élément actif (= valeurs plus
   hautes = étoiles visuellement à GAUCHE). Résultat : survol/sélection de ★3
   colore les positions 1-2-3 depuis la gauche. */
.review-form__stars { flex-direction: row-reverse; justify-content: flex-end; }

/* Survol : étoile survolée + toutes celles à sa gauche (DOM après = valeur >) */
.review-form__star:hover span,
.review-form__star:hover ~ .review-form__star span { color: #C8A24B; }

/* Checked + focus-visible : même logique que le survol */
.review-form__star input:checked ~ span,
.review-form__star input:focus-visible ~ span,
.review-form__star:has(input:checked) ~ .review-form__star span,
.review-form__star:has(input:focus-visible) ~ .review-form__star span {
  color: #C8A24B;
}

.review-form__field { margin-bottom: 14px; }
.review-form__field input,
.review-form__field textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-md);
  font-family: inherit; font-size: 0.95rem;
  background: var(--white);
  min-height: 44px;
  color: var(--text);
}
.review-form__field input:focus,
.review-form__field textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(211, 47, 47, 0.1);
}
.review-form__field textarea {
  resize: vertical;
  min-height: 100px;
  line-height: 1.5;
}
.review-form__hint {
  display: block;
  font-size: 0.78rem;
  color: var(--text-light);
  margin-top: 4px;
}
.review-form__errors {
  background: rgba(211, 47, 47, 0.08);
  border-left: 3px solid var(--primary);
  color: var(--primary);
  padding: 10px 12px;
  border-radius: var(--radius-md);
  font-size: 0.88rem;
  margin: 8px 0;
  white-space: pre-line;
}
.review-form__actions {
  display: flex; gap: 8px; justify-content: flex-end;
  margin-top: 18px;
  border: none;
}
.review-form__btn {
  min-height: 44px;
  padding: 10px 22px;
  border-radius: 100px;
  font-family: inherit;
  font-size: 0.92rem;
  font-weight: 700;
  cursor: pointer;
  border: 1.5px solid transparent;
  transition: background 0.15s, transform 0.1s;
}
.review-form__btn:active { transform: scale(0.97); }
.review-form__btn--primary {
  background: var(--secondary);
  color: var(--white);
}
.review-form__btn--primary:hover, .review-form__btn--primary:focus-visible {
  background: #000;
}
.review-form__btn--primary:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.review-form__btn--secondary {
  background: var(--white);
  color: var(--text);
  border-color: var(--border-strong);
}
.review-form__btn--secondary:hover, .review-form__btn--secondary:focus-visible {
  background: var(--cream);
}

/* ══════════════ 20. POPUP AÏD AL-ADHA ══════════════
   Styles dans /css/aid-popup.css — chargé par index.ejs (homepage uniquement).
   La popup ne s'affiche pas sur les pages shop, cette section est intentionnellement vide. */