:root{
  --primary:#0f4c81;
  --primary-d:#083866;
  --accent:#ff6b35;
  --gold:#ffb800;
  --bg:#f8fafc;
  --card:#ffffff;
  --border:#e2e8f0;
  --text:#1e293b;
  --muted:#64748b;
  --success:#059669;
  --danger:#dc2626;
  --shadow:0 2px 8px rgba(15,76,129,0.08);
  --shadow-h:0 8px 24px rgba(15,76,129,0.15);
  --radius:12px;
}
*{box-sizing:border-box;margin:0;padding:0}
/* ── Accessibilité : focus visible pour clavier (WCAG AA) ── */
:focus{outline:none}
:focus-visible{outline:2.5px solid #ffb800;outline-offset:2px;border-radius:6px}
.btn-hero:focus-visible,.prod-card:focus-visible,.cat-card:focus-visible{outline-offset:4px;outline-color:#ffb800}
/* Skip link pour navigation clavier (Tab → "Aller au contenu") */
.skip-link{position:absolute;top:-100px;left:8px;background:#0f4c81;color:#fff;padding:10px 16px;border-radius:8px;font-weight:600;font-size:14px;text-decoration:none;z-index:10000;transition:top .2s}
.skip-link:focus{top:8px;color:#fff}
/* Tap highlight discret sur mobile */
a,button{-webkit-tap-highlight-color:rgba(15,76,129,.15)}
/* sr-only — pour lecteurs d'écran uniquement */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
body{
  font-family:system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  background:var(--bg);
  color:var(--text);
  line-height:1.5;
  min-height:100vh;
  overflow-x:hidden; /* Évite tout scroll horizontal accidentel (ex: titre italic qui déborde) */
}
html{overflow-x:hidden}
a{color:var(--primary);text-decoration:none}
a:hover{color:var(--primary-d)}
img{max-width:100%;display:block}

/* HEADER classique (fallback pour pages produit/cat/etc) */
.site-header{
  position:sticky;top:0;z-index:100;
  background:#fff;
  border-bottom:1px solid var(--border);
  padding:10px 16px;
  display:flex;align-items:center;gap:12px;
  box-shadow:0 1px 3px rgba(0,0,0,.04);
}
.site-logo{display:flex;align-items:center;gap:8px;flex:1;font-size:18px;color:var(--text);font-weight:600}
.site-logo strong{color:var(--primary);font-weight:800}

/* ── HEADER MINIMAL ÉDITORIAL (style 49north) — transparent sur hero, devient solide au scroll ── */
.site-header--minimal{
  position:fixed;top:0;left:0;right:0;z-index:100;
  background:transparent;border-bottom:1px solid rgba(255,255,255,.12);
  padding:18px 32px;
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  box-shadow:none;
  transition:background .4s ease,backdrop-filter .4s ease,border-color .4s ease,padding .3s ease;
}
.site-header--minimal.is-scrolled{
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  border-bottom-color:var(--border);
  padding:12px 32px;
  box-shadow:0 1px 0 rgba(0,0,0,.04);
}
.site-header--minimal .site-logo{flex:0 0 auto;display:flex;align-items:center}
.site-header--minimal .site-logo img{height:38px;transition:opacity .3s ease}
/* Swap automatique entre logo blanc (sur hero transparent) et logo vert (sur header scrolled) */
.site-header--minimal .logo-light{display:inline-block}
.site-header--minimal .logo-dark{display:none}
.site-header--minimal.is-scrolled .logo-light{display:none}
.site-header--minimal.is-scrolled .logo-dark{display:inline-block}
/* Nav centrale */
.hdr-nav{display:flex;gap:32px;flex:1;justify-content:center}
.hdr-nav a{
  color:rgba(255,255,255,.9);font-size:13px;font-weight:500;
  text-transform:uppercase;letter-spacing:1.2px;
  text-decoration:none;transition:color .2s,opacity .2s;
  position:relative;padding:6px 0;
}
.hdr-nav a::after{
  content:'';position:absolute;left:0;bottom:0;height:1px;width:0;
  background:currentColor;transition:width .25s ease;
}
.hdr-nav a:hover::after{width:100%}
.site-header--minimal.is-scrolled .hdr-nav a{color:var(--text)}
.hdr-actions{display:flex;align-items:center;gap:10px;flex:0 0 auto}
.site-header--minimal .hdr-search-btn,
.site-header--minimal .hdr-cart{
  background:transparent;border:1px solid rgba(255,255,255,.25);
  color:#fff;width:42px;height:42px;
  transition:all .25s;
}
.site-header--minimal.is-scrolled .hdr-search-btn,
.site-header--minimal.is-scrolled .hdr-cart{
  border-color:var(--border);color:var(--text);
}
.site-header--minimal .hdr-search-btn:hover,
.site-header--minimal .hdr-cart:hover{
  background:rgba(255,255,255,.15);
}
.site-header--minimal.is-scrolled .hdr-search-btn:hover,
.site-header--minimal.is-scrolled .hdr-cart:hover{
  background:var(--bg);
}
/* Burger button (3 lignes qui se transforment en X) */
.hdr-burger{
  width:42px;height:42px;background:transparent;border:1px solid rgba(255,255,255,.25);
  border-radius:10px;cursor:pointer;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:5px;padding:0;
  transition:all .25s;
}
.hdr-burger span{
  display:block;width:18px;height:1.5px;background:#fff;
  transition:transform .35s cubic-bezier(.65,0,.35,1),opacity .25s;
  transform-origin:center;
}
.site-header--minimal.is-scrolled .hdr-burger{border-color:var(--border)}
.site-header--minimal.is-scrolled .hdr-burger span{background:var(--text)}
.hdr-burger:hover{background:rgba(255,255,255,.12)}
.site-header--minimal.is-scrolled .hdr-burger:hover{background:var(--bg)}
.hdr-burger.is-open span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.hdr-burger.is-open span:nth-child(2){opacity:0}
.hdr-burger.is-open span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

/* Sur mobile, on cache la nav centrale et on garde juste le burger */
@media(max-width:899px){
  .site-header--minimal{padding:14px 20px}
  .site-header--minimal.is-scrolled{padding:10px 20px}
  .hdr-nav{display:none}
  .site-header--minimal .hdr-search-btn{display:none} /* la recherche est dans le menu burger */
}

/* ═══════════════════════════════════════════════════════════
 * FULLSCREEN MENU PREMIUM (style 49north / Awwwards)
 * Panneaux qui descendent en cascade + preview image hover
 * Texte qui slide-up à la Marquee / Awwwards
 * ═══════════════════════════════════════════════════════════ */
.fs-menu{
  position:fixed;inset:0;z-index:1100;
  pointer-events:none;visibility:hidden;
}
.fs-menu.is-open{visibility:visible;pointer-events:auto}

/* 4 panneaux qui glissent d'en haut avec delays différents (effet "curtain") */
.fs-menu-panels{position:absolute;inset:0;display:flex;z-index:0}
.fs-panel{
  flex:1;height:100%;
  background:#0a2540;
  transform:translateY(-100%);
  transition:transform .85s cubic-bezier(.77,0,.18,1) var(--d, 0s);
}
.fs-panel:nth-child(1){background:#0a2540}
.fs-panel:nth-child(2){background:#0f4c81}
.fs-panel:nth-child(3){background:#0a2540}
.fs-panel:nth-child(4){background:#083866}
.fs-menu.is-open .fs-panel{transform:translateY(0)}
/* Fermeture : delays inversés (panel 4 part en premier) */
.fs-menu:not(.is-open) .fs-panel{transition-delay:calc(.15s - var(--d, 0s))}

.fs-menu-inner{
  position:relative;height:100%;z-index:2;
  display:flex;flex-direction:column;justify-content:space-between;
  padding:100px 60px 36px;color:#fff;
  overflow-y:auto;
  opacity:0;transition:opacity .3s ease .45s;
}
.fs-menu.is-open .fs-menu-inner{opacity:1}

/* Bouton fermer : croix dessinée avec 2 spans qui se rejoignent */
.fs-menu-close{
  position:absolute;top:28px;right:48px;
  width:52px;height:52px;border-radius:50%;
  background:transparent;border:1px solid rgba(255,255,255,.25);
  color:#fff;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:all .3s cubic-bezier(.65,0,.35,1);
  opacity:0;transform:scale(.4) rotate(-90deg);z-index:10;
}
.fs-menu.is-open .fs-menu-close{opacity:1;transform:scale(1) rotate(0deg);transition-delay:.6s}
.fs-menu-close span{
  position:absolute;width:18px;height:1.5px;background:#fff;
  transition:transform .3s,background .25s;
}
.fs-menu-close span:nth-child(1){transform:rotate(45deg)}
.fs-menu-close span:nth-child(2){transform:rotate(-45deg)}
.fs-menu-close:hover{border-color:#ffb800;transform:rotate(90deg) scale(1.08)}
.fs-menu-close:hover span{background:#ffb800}

/* Layout 2 colonnes : liens à gauche, preview image à droite */
.fs-menu-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:80px;
  flex:1;align-items:center;
  max-width:1400px;margin:0 auto;width:100%;
}

/* Nav links */
.fs-menu-nav{display:flex;flex-direction:column;gap:0}
.fs-link{
  display:grid;grid-template-columns:50px 1fr 30px;gap:24px;align-items:center;
  color:#fff;text-decoration:none;
  padding:18px 0;border-bottom:1px solid rgba(255,255,255,.08);
  opacity:0;transform:translateX(-30px);
  transition:opacity .6s ease,transform .6s cubic-bezier(.22,.61,.36,1),color .2s,border-color .25s;
  position:relative;
}
.fs-menu.is-open .fs-link{opacity:1;transform:translateX(0)}
.fs-link[data-i="0"]{transition-delay:.55s}
.fs-link[data-i="1"]{transition-delay:.62s}
.fs-link[data-i="2"]{transition-delay:.69s}
.fs-link[data-i="3"]{transition-delay:.76s}
.fs-link[data-i="4"]{transition-delay:.83s}
.fs-link[data-i="5"]{transition-delay:.90s}
.fs-link[data-i="6"]{transition-delay:.97s}
.fs-link:hover{border-bottom-color:rgba(255,184,0,.4);color:#ffb800}

.fs-num{
  font-size:13px;font-weight:500;
  color:rgba(255,255,255,.35);
  font-family:ui-monospace,'Cascadia Code',monospace;letter-spacing:1.5px;
  transition:color .2s;
}
.fs-link:hover .fs-num{color:#ffb800}

/* Texte du menu : flow naturel (plus de wrap overflow qui coupait les accents/jambages)
   Hover : couleur dorée + italic léger, transition smooth */
.fs-text-wrap{
  position:relative;display:inline-block;
  line-height:1.2;
}
.fs-text{
  font-size:clamp(32px,5.5vw,72px);
  font-weight:900;line-height:1.2;
  letter-spacing:-2px;
  display:inline-block;
  transition:color .25s ease,transform .35s cubic-bezier(.65,0,.35,1);
}
.fs-text-clone{display:none} /* Plus utilisé — on garde le HTML pour compat */
.fs-link:hover .fs-text,
.fs-link--toggle:hover .fs-text{
  color:#ffb800;
  transform:translateX(8px);
}

/* Flèche à droite qui apparaît au hover */
.fs-arrow{
  font-size:24px;font-weight:300;opacity:0;
  transform:translateX(-15px);
  transition:opacity .3s,transform .35s cubic-bezier(.65,0,.35,1),color .2s;
}
.fs-link:hover .fs-arrow{opacity:1;transform:translateX(0);color:#ffb800}

/* Bouton toggle (Nutrition) : style identique à .fs-link mais c'est un <button> */
.fs-link--toggle{
  background:transparent;border:none;
  font-family:inherit;color:inherit;width:100%;text-align:left;
  cursor:pointer;padding:18px 0;
}
/* Flèche + qui devient × quand le sous-menu est ouvert */
.fs-arrow--toggle{
  opacity:1;transform:none;font-size:28px;font-weight:300;
  transition:transform .35s cubic-bezier(.65,0,.35,1),color .2s;
  display:inline-block;line-height:1;
}
.fs-link-group.is-expanded .fs-arrow--toggle{transform:rotate(45deg);color:#ffb800}
.fs-link--toggle[aria-expanded="true"] .fs-text{color:#ffb800}

/* Group container : permet le sous-menu de prendre place sous le bouton */
.fs-link-group{
  display:flex;flex-direction:column;
  opacity:0;transform:translateX(-30px);
  transition:opacity .6s ease,transform .6s cubic-bezier(.22,.61,.36,1);
}
.fs-menu.is-open .fs-link-group{opacity:1;transform:translateX(0)}
/* Delays par position pour s'aligner avec le stagger des .fs-link */
.fs-link-group[data-i="0"]{transition-delay:.55s}
.fs-link-group[data-i="1"]{transition-delay:.62s}
.fs-link-group[data-i="2"]{transition-delay:.69s}
.fs-link-group[data-i="3"]{transition-delay:.76s}
.fs-link-group[data-i="4"]{transition-delay:.83s}

/* ─────────────────────────────────────────────────────────────
   DRILL-DOWN : clic sur Nutrition/Objectif → sous-menu en plein écran
   avec stagger reveal des items (vague gauche → droite, haut → bas).
─────────────────────────────────────────────────────────────── */

/* fs-menu-nav devient le repère pour le sous-menu absolute */
.fs-menu-nav{position:relative;}

/* Quand drilled : nav ancrée en haut du menu-grid (sinon le sous-menu plus long
   que le menu racine déborde sous le footer Contact). Le preview image disparaît
   et le footer du menu s'efface aussi pour focus 100% catégories. */
.fs-menu-nav.is-drilled{align-self:start}
.fs-menu-nav.is-drilled ~ .fs-menu-preview{opacity:0;pointer-events:none;transition:opacity .3s ease}
/* Masque le footer Contact/Lieu/Site quand on est dans un sous-menu */
.fs-menu .fs-menu-inner:has(.fs-menu-nav.is-drilled) .fs-menu-footer{
  opacity:0;pointer-events:none;
  transition:opacity .3s ease;
}

/* Sous-menu : TOUJOURS rendu (sinon display:none casse les transitions),
   mais hors-flux (position:absolute) et invisible/inerte tant qu'on n'est pas drilled.
   Décalé légèrement vers le bas pour ne pas chevaucher le bouton close en haut à droite. */
.fs-submenu{
  position:absolute;top:0;left:0;right:0;
  display:flex;flex-direction:column;gap:0;
  pointer-events:none;
  z-index:5;
}
.fs-menu-nav.is-drilled .fs-link-group.is-expanded .fs-submenu{
  pointer-events:auto;
}

/* Mode drill-down : sortie des items du menu racine (slide gauche + fade) */
.fs-menu-nav.is-drilled .fs-link,
.fs-menu-nav.is-drilled .fs-link-group:not(.is-expanded){
  opacity:0;transform:translateX(-40px);pointer-events:none;
  transition:opacity .35s ease,transform .4s cubic-bezier(.65,0,.35,1);
  transition-delay:0s;
}
/* Le bouton toggle du groupe actif disparaît (on est rentré dedans) */
.fs-menu-nav.is-drilled .fs-link-group.is-expanded .fs-link--toggle{
  opacity:0;transform:translateX(-40px);pointer-events:none;
  transition:opacity .3s ease,transform .35s cubic-bezier(.65,0,.35,1);
}

/* Liens du sous-menu : invisibles par défaut, animent vers visible quand drilled.
   Typo légèrement plus compacte que le menu racine pour caser 8 items + back btn. */
.fs-submenu a{
  display:grid;grid-template-columns:50px 1fr 30px;gap:24px;align-items:center;
  color:#fff;text-decoration:none;
  padding:14px 0;border-bottom:1px solid rgba(255,255,255,.08);
  font-size:clamp(22px,3.5vw,42px);
  font-weight:900;letter-spacing:-1.2px;line-height:1.15;
  opacity:0;transform:translateX(-60px);
  transition:opacity .55s ease,transform .65s cubic-bezier(.22,.61,.36,1),color .2s,border-color .25s;
}
.fs-menu-nav.is-drilled .fs-link-group.is-expanded .fs-submenu a{
  opacity:1;transform:translateX(0);
}
/* Stagger : .2s de décalage entre chaque item (vague verticale très visible) */
.fs-submenu a[data-j="0"]{transition-delay:.30s}
.fs-submenu a[data-j="1"]{transition-delay:.50s}
.fs-submenu a[data-j="2"]{transition-delay:.70s}
.fs-submenu a[data-j="3"]{transition-delay:.90s}
.fs-submenu a[data-j="4"]{transition-delay:1.10s}
.fs-submenu a[data-j="5"]{transition-delay:1.30s}
.fs-submenu a[data-j="6"]{transition-delay:1.50s}
.fs-submenu a[data-j="7"]{transition-delay:1.70s}
.fs-submenu a[data-j="8"]{transition-delay:1.90s}
.fs-submenu a[data-j="9"]{transition-delay:2.10s}
.fs-submenu a:hover{color:#ffb800;border-bottom-color:rgba(255,184,0,.4)}
/* Pastille à gauche (remplace le numéro du menu racine) */
.fs-submenu a::before{
  content:'';display:block;width:6px;height:6px;border-radius:50%;
  background:rgba(255,255,255,.35);
  transition:background .2s,transform .25s;
  justify-self:center;
}
.fs-submenu a:hover::before{background:#ffb800;transform:scale(1.4)}
/* Flèche → à droite, apparaît au hover */
.fs-submenu a::after{
  content:'→';font-size:22px;font-weight:300;opacity:0;
  transform:translateX(-15px);
  transition:opacity .3s,transform .35s cubic-bezier(.65,0,.35,1),color .2s;
}
.fs-submenu a:hover::after{opacity:1;transform:translateX(0);color:#ffb800}

/* Bouton "← Retour" en tête du sous-menu, animé en premier */
.fs-submenu-back{
  display:inline-flex;align-items:center;gap:10px;
  background:transparent;border:none;cursor:pointer;
  color:rgba(255,255,255,.55);font-family:inherit;
  font-size:13px;font-weight:500;letter-spacing:1.5px;text-transform:uppercase;
  padding:0 0 18px 0;margin-bottom:8px;
  opacity:0;transform:translateX(-60px);
  transition:opacity .55s ease,transform .65s cubic-bezier(.22,.61,.36,1),color .2s;
  transition-delay:.10s;
  align-self:flex-start;
}
.fs-menu-nav.is-drilled .fs-link-group.is-expanded .fs-submenu-back{
  opacity:1;transform:translateX(0);
}
.fs-submenu-back:hover{color:#ffb800}
.fs-submenu-back .fs-back-arrow{
  font-size:18px;line-height:1;transition:transform .25s cubic-bezier(.65,0,.35,1);
}
.fs-submenu-back:hover .fs-back-arrow{transform:translateX(-4px)}

/* Mobile : typo plus compacte */
@media(max-width:899px){
  .fs-submenu a{
    grid-template-columns:20px 1fr 24px;gap:16px;
    font-size:clamp(22px,7vw,32px);
    padding:14px 0;letter-spacing:-1px;
  }
  .fs-submenu a::after{font-size:18px}
  .fs-submenu-back{font-size:12px;padding-bottom:14px}
}

/* Preview image qui change selon le hover du lien */
.fs-menu-preview{
  position:relative;aspect-ratio:4/5;max-height:70vh;
  border-radius:8px;overflow:hidden;
  opacity:0;transform:scale(.95);
  transition:opacity .8s ease 1.1s,transform .8s cubic-bezier(.22,.61,.36,1) 1.1s;
  background:#0a2540;
}
.fs-menu.is-open .fs-menu-preview{opacity:1;transform:scale(1)}
.fs-preview-default,.fs-preview-hover{
  position:absolute;inset:0;
  background-size:cover;background-position:center;
  transition:opacity .5s ease;
}
.fs-preview-hover{opacity:0}
.fs-preview-hover.is-active{opacity:1}
/* Léger zoom continu sur l'image preview */
.fs-preview-default{animation:slowZoomPreview 12s ease-in-out infinite alternate}
@keyframes slowZoomPreview{
  0%{transform:scale(1)}
  100%{transform:scale(1.08)}
}

/* Footer du menu : 3 colonnes contact / lieu / suivre */
.fs-menu-footer{
  border-top:1px solid rgba(255,255,255,.08);
  padding-top:24px;margin-top:32px;
  display:grid;grid-template-columns:repeat(3,1fr);gap:32px;
  color:rgba(255,255,255,.55);
  font-size:13px;
  opacity:0;transform:translateY(20px);
  transition:opacity .6s ease 1.2s,transform .6s ease 1.2s;
}
.fs-menu.is-open .fs-menu-footer{opacity:1;transform:translateY(0)}
.fs-footer-label{
  display:block;font-size:11px;letter-spacing:2px;text-transform:uppercase;
  color:rgba(255,255,255,.4);margin-bottom:8px;font-weight:600;
}
.fs-menu-footer a{color:rgba(255,255,255,.8);text-decoration:none;border-bottom:1px solid rgba(255,255,255,.2);transition:color .2s,border-color .2s}
.fs-menu-footer a:hover{color:#ffb800;border-bottom-color:#ffb800}

/* Mobile : pas de preview, layout 1 colonne */
@media(max-width:899px){
  .fs-menu-inner{padding:80px 24px 28px}
  .fs-menu-close{top:20px;right:24px;width:44px;height:44px}
  .fs-menu-grid{grid-template-columns:1fr;gap:0}
  .fs-menu-preview{display:none}
  .fs-text{font-size:clamp(28px,9vw,48px);letter-spacing:-1px}
  .fs-num{font-size:11px}
  .fs-link{grid-template-columns:38px 1fr 26px;gap:16px;padding:14px 0}
  .fs-menu-footer{grid-template-columns:1fr;gap:14px;padding-top:18px;margin-top:22px}
}
.hdr-search-btn,.hdr-cart{
  background:var(--bg);border:1px solid var(--border);
  width:42px;height:42px;border-radius:10px;
  display:flex;align-items:center;justify-content:center;
  font-size:18px;cursor:pointer;color:var(--text);
  position:relative;
}
.hdr-search-btn:hover,.hdr-cart:hover{background:var(--border)}
.hdr-cart-count{
  position:absolute;top:-4px;right:-4px;
  background:var(--accent);color:#fff;
  font-size:11px;font-weight:700;
  min-width:18px;height:18px;padding:0 4px;
  border-radius:9px;
  display:flex;align-items:center;justify-content:center;
}

/* SEARCH POPUP */
.search-pop{
  position:sticky;top:62px;z-index:99;
  background:#fff;border-bottom:1px solid var(--border);
  padding:10px 16px;
  box-shadow:0 4px 12px rgba(0,0,0,.06);
}
.search-pop input{
  width:100%;padding:12px 16px;
  border:1.5px solid var(--border);border-radius:10px;
  font-size:16px;font-family:inherit;outline:none;
}
.search-pop input:focus{border-color:var(--primary)}
.search-results{margin-top:8px;max-height:60vh;overflow-y:auto}
.search-result{
  padding:10px 12px;border-radius:8px;cursor:pointer;
  display:flex;gap:10px;align-items:center;
  border-bottom:1px solid #f1f5f9;
}
.search-result:hover{background:var(--bg)}
.search-result img{width:40px;height:40px;border-radius:6px;object-fit:cover}
.search-result-info{flex:1;min-width:0}
.search-result-name{font-size:14px;font-weight:600;color:var(--text)}
.search-result-price{font-size:13px;color:var(--primary);font-weight:700}

/* ─────────────────────────────────────────────
 * ANIMATIONS / SCROLL REVEAL
 * ───────────────────────────────────────────── */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .8s cubic-bezier(.4,0,.2,1),transform .8s cubic-bezier(.4,0,.2,1)}
.reveal.is-visible{opacity:1;transform:none}
.reveal-delay-1{transition-delay:.1s}.reveal-delay-2{transition-delay:.2s}.reveal-delay-3{transition-delay:.3s}.reveal-delay-4{transition-delay:.4s}
/* Quand GSAP gère les animations, on neutralise le reveal CSS (sinon ça se cumule) */
body.gsap-active .reveal{opacity:1;transform:none;transition:none}
@media(prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  .shape,.sparkle,.shimmer-bg,.brand-marquee-track{animation:none !important}
}

/* HERO PRO — page d'accueil ultra stylée avec carousel photo */
.hero-pro{
  position:relative;
  padding:80px 20px 90px;
  background:#0a2540;
  color:#fff;
  overflow:hidden;
  isolation:isolate;
  min-height:560px;
}
/* Carousel d'images de fond — 5 photos qui se croisent en fade toutes les 6s */
.hero-bg-carousel{position:absolute;inset:0;z-index:0}
.hero-bg-img{
  position:absolute;inset:0;
  background-size:cover;background-position:center;
  opacity:0;transition:opacity 1.6s ease-in-out,transform 10s linear;
  transform:scale(1.06);
}
.hero-bg-img.is-active{opacity:.55;transform:scale(1.12);animation:slowZoom 10s linear forwards}
@keyframes slowZoom{from{transform:scale(1.06)}to{transform:scale(1.18)}}
/* Voile sombre + dégradé bleu pour garder le texte lisible par-dessus les photos */
.hero-pro::after{
  content:'';position:absolute;inset:0;z-index:1;
  background:
    linear-gradient(135deg,rgba(15,76,129,.85) 0%,rgba(8,56,102,.75) 50%,rgba(10,37,64,.92) 100%);
}
.hero-content{position:relative;z-index:3 !important}
.hero-bg-shapes{z-index:2 !important}
/* Couche de scintillement global sur le hero */
.hero-pro::before{
  content:'';position:absolute;inset:0;
  background:
    radial-gradient(2px 2px at 23% 18%,#fff,transparent 50%),
    radial-gradient(1px 1px at 47% 72%,#ffe08a,transparent 50%),
    radial-gradient(2px 2px at 84% 32%,#ff8c42,transparent 50%),
    radial-gradient(1.5px 1.5px at 12% 88%,#10D9A8,transparent 50%),
    radial-gradient(1px 1px at 67% 21%,#fff,transparent 50%),
    radial-gradient(2px 2px at 91% 81%,#ffb800,transparent 50%),
    radial-gradient(1px 1px at 35% 49%,#fff,transparent 50%),
    radial-gradient(1.5px 1.5px at 78% 56%,#fff,transparent 50%);
  opacity:.85;
  animation:sparkleTwinkle 4s ease-in-out infinite;
  pointer-events:none;
}
@keyframes sparkleTwinkle{
  0%,100%{opacity:.85;transform:translateY(0)}
  50%{opacity:.4;transform:translateY(-6px)}
}
.hero-bg-shapes{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.shape{position:absolute;border-radius:50%;filter:blur(40px);opacity:.35}
.shape-1{width:280px;height:280px;background:#ff6b35;top:-60px;right:-60px;animation:float 20s ease-in-out infinite}
.shape-2{width:220px;height:220px;background:#ffb800;bottom:-40px;left:-40px;animation:float 25s ease-in-out infinite reverse}
.shape-3{width:160px;height:160px;background:#10D9A8;top:40%;left:50%;transform:translate(-50%,-50%);animation:float 30s ease-in-out infinite}
@keyframes float{
  0%,100%{transform:translate(0,0)}
  50%{transform:translate(20px,-30px)}
}
.hero-content{position:relative;z-index:1;max-width:900px;margin:0 auto;text-align:center}
.hero-badge{
  display:inline-block;padding:6px 14px;
  background:rgba(255,255,255,.15);backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.2);
  border-radius:999px;font-size:12px;font-weight:600;
  margin-bottom:20px;letter-spacing:.3px;
}
.hero-title{
  font-size:38px;line-height:1.1;font-weight:900;
  margin-bottom:14px;letter-spacing:-.5px;
}
.hero-accent{
  background:linear-gradient(135deg,#ffb800,#ff6b35);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
}
.hero-sub{font-size:16px;opacity:.92;margin-bottom:28px;max-width:520px;margin-left:auto;margin-right:auto;line-height:1.5}
.hero-cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-bottom:32px}
.btn-hero{
  padding:14px 26px;border-radius:12px;font-weight:700;font-size:15px;
  text-decoration:none;display:inline-flex;align-items:center;gap:8px;
  transition:transform .15s,box-shadow .2s;
  border:none;cursor:pointer;
}
.btn-hero-primary{
  background:linear-gradient(135deg,#fff,#fef3e0);color:var(--primary-d);
  box-shadow:0 8px 24px rgba(255,184,0,.4),0 2px 8px rgba(0,0,0,.2);
  position:relative;overflow:hidden;
  animation:ctaPulse 2.4s ease-in-out infinite;
}
.btn-hero-primary::after{
  content:'';position:absolute;top:0;left:-100%;width:60%;height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,184,0,.6),transparent);
  animation:shineSweep 3s infinite;
}
@keyframes ctaPulse{
  0%,100%{box-shadow:0 8px 24px rgba(255,184,0,.4),0 2px 8px rgba(0,0,0,.2)}
  50%{box-shadow:0 12px 36px rgba(255,184,0,.7),0 4px 12px rgba(255,107,53,.3)}
}
@keyframes shineSweep{
  0%{left:-100%}
  60%,100%{left:200%}
}
.btn-hero-primary:hover{transform:translateY(-3px) scale(1.02);box-shadow:0 16px 40px rgba(255,184,0,.6),0 6px 14px rgba(0,0,0,.3);color:var(--primary-d)}
.btn-hero-ghost{background:rgba(255,255,255,.1);color:#fff;border:1px solid rgba(255,255,255,.3);backdrop-filter:blur(10px)}
.btn-hero-ghost:hover{background:rgba(255,255,255,.18);color:#fff;transform:translateY(-2px)}
.hero-trust{display:flex;gap:24px;justify-content:center;flex-wrap:wrap;font-size:13px;opacity:.9}
.trust-item{display:flex;align-items:center;gap:6px}
@media(max-width:520px){
  .hero-pro{padding:40px 20px 50px}
  .hero-title{font-size:28px}
  .hero-sub{font-size:14px}
  .hero-cta{flex-direction:column;align-items:stretch}
  .btn-hero{justify-content:center}
  .hero-trust{flex-direction:column;gap:8px}
}

/* USPs (bandeau sous le hero) */
.usps{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:12px;
  padding:20px 16px;
  background:#fff;
  border-bottom:1px solid var(--border);
}
.usp{display:flex;gap:12px;align-items:center;padding:8px}
.usp-icon{font-size:32px;line-height:1;flex-shrink:0}
.usp-text{display:flex;flex-direction:column;gap:2px;font-size:13px}
.usp-text strong{font-weight:700;color:var(--text)}
.usp-text span{color:var(--muted);font-size:12px;line-height:1.3}

/* Section header (utilisé pour Catégories, Featured, Catalogue) */
.section-header{margin-bottom:16px}
.section-header h2{font-size:20px;font-weight:800;margin-bottom:4px}
.section-header p{font-size:13px;color:var(--muted)}

/* ═══════════════════════════════════════════════════════════
 * HERO 49NORTH — fond bleu SDR + photo de fond subtile (première version)
 * "Pure" top-left + "Énergie" bottom-right — derrière la photo centrale
 * Photo verticale centrale qui cycle 4 images en fondu (3s)
 * ═══════════════════════════════════════════════════════════ */
.hero-49n{
  position:relative;
  min-height:100vh;
  /* Photo de fond : Cirque de Cilaos au lever du soleil — La Réunion 974
     Très discrète (style première version) + gradient bleu plus opaque (+20% sombre) */
  background:
    linear-gradient(135deg,rgba(8,28,52,.94) 0%,rgba(12,60,103,.90) 50%,rgba(6,40,74,.96) 100%),
    url('/uploads/perso/cirque-cilaos.jpg') center/cover no-repeat;
  color:#fff;
  padding:140px 48px 100px;
  display:flex;flex-direction:column;
  overflow:hidden;
  isolation:isolate;
}
/* Halos colorés subtils + grain léger (touche premium) */
.hero-49n::before{
  content:'';position:absolute;inset:0;z-index:0;
  background:
    radial-gradient(600px circle at 15% 25%,rgba(255,184,0,.14),transparent 55%),
    radial-gradient(500px circle at 85% 75%,rgba(255,107,53,.12),transparent 55%);
  pointer-events:none;
}
/* Vignettage léger pour focus centre */
.hero-49n::after{
  content:'';position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(ellipse at center,transparent 40%,rgba(10,37,64,.45) 100%);
}

/* Eyebrow : descendu sous le header pour éviter conflit avec cart/burger */
.hero-49n-eyebrow{
  position:absolute;top:100px;right:48px;
  font-size:12px;font-weight:600;letter-spacing:2.5px;text-transform:uppercase;
  color:rgba(255,255,255,.85);
  font-family:ui-monospace,'Cascadia Code','Roboto Mono',monospace;
  z-index:5;
}
@media(max-width:899px){.hero-49n-eyebrow{top:80px;right:20px}}

/* Stage : conteneur du titre + photo, prend la majorité de l'écran */
.hero-49n-stage{
  flex:1;position:relative;
  min-height:60vh;
  z-index:1;
}

/* Titre serif géant : positions absolues, 2 mots aux coins opposés */
.hero-49n-title{
  position:absolute;inset:0;
  font-family:'Cormorant Garamond',Georgia,serif;
  font-weight:500;line-height:.9;letter-spacing:-2px;
  margin:0;padding:0;pointer-events:none;
}
.hero-49n-word{
  position:absolute;
  font-size:clamp(100px,19vw,280px);
  font-weight:500;line-height:.9;
  z-index:5; /* DEVANT la photo (z=2) — les mots débordent par-dessus la photo */
  white-space:nowrap;
  text-shadow:0 8px 40px rgba(10,37,64,.5);
  will-change:transform,opacity,clip-path;
  pointer-events:none;
}
/* "Pure" — top-left, blanc.
   Animation : slide depuis la gauche + mask reveal (clip-path) gauche→droite,
   avec petit motion vertical pour éviter l'effet "barre qui glisse". */
.hero-49n-word--left{
  top:10%;left:-2vw;
  color:#fff;
  opacity:0;
  animation:pureSweepIn 1.6s cubic-bezier(.22,.61,.36,1) .5s forwards;
}
@keyframes pureSweepIn{
  0%{
    opacity:0;
    transform:translateX(-18vw) translateY(-20px);
    clip-path:inset(0 100% 0 0);
    filter:blur(8px);
  }
  40%{opacity:1;filter:blur(0)}
  100%{
    opacity:1;
    transform:translateX(0) translateY(0);
    clip-path:inset(0 0 0 0);
    filter:blur(0);
  }
}

/* "Énergie" — bottom-right, doré italic.
   Animation : slide depuis la droite + mask reveal droite→gauche,
   léger délai pour effet séquentiel (Pure puis Énergie). */
.hero-49n-word--right{
  bottom:10%;right:-2vw;
  color:#ffb800;
  font-style:italic;
  opacity:0;
  animation:energySweepIn 1.6s cubic-bezier(.22,.61,.36,1) 1.0s forwards;
}
@keyframes energySweepIn{
  0%{
    opacity:0;
    transform:translateX(18vw) translateY(20px);
    clip-path:inset(0 0 0 100%);
    filter:blur(8px);
  }
  40%{opacity:1;filter:blur(0)}
  100%{
    opacity:1;
    transform:translateX(0) translateY(0);
    clip-path:inset(0 0 0 0);
    filter:blur(0);
  }
}
.hero-49n-dot{color:#ff6b35}

/* Photo verticale centrale — z-index 2 (derrière les mots qui débordent par-dessus) */
.hero-49n-photo{
  position:absolute;left:50%;top:50%;
  transform:translate(-50%,-50%);
  width:clamp(280px,30vw,480px);
  aspect-ratio:3/4;
  z-index:2;
  overflow:hidden;
  border-radius:28px;
  box-shadow:0 32px 100px rgba(0,0,0,.5),0 12px 24px rgba(0,0,0,.3);
  /* Effet "ouverture rideau depuis le centre" au chargement initial
     `round 28px` dans inset() préserve les coins arrondis (sinon clip-path écrase le border-radius) */
  clip-path:inset(50% 50% 50% 50% round 28px);
  animation:heroPhotoReveal 1.6s cubic-bezier(.77,0,.18,1) .6s forwards;
}
@keyframes heroPhotoReveal{
  0%{clip-path:inset(50% 50% 50% 50% round 28px)}
  100%{clip-path:inset(0 round 28px)}
}

/* ─────────────────────────────────────────────────────────────
   Cycle des 4 images : transitions SPECTACULAIRES
   Chaque image entre par une direction différente (rideau qui balaie)
   + zoom Ken Burns lent sur l'image active (effet cinéma)
─────────────────────────────────────────────────────────────── */
.hero-49n-img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;
  opacity:0;z-index:1;
  transform:scale(1.06);
  filter:brightness(.92) saturate(1.1);
  transition:opacity 1.4s cubic-bezier(.77,0,.18,1);
  will-change:opacity,transform,clip-path;
}
.hero-49n-img.is-active{
  opacity:1;
  z-index:2;
  /* 2 anims en parallèle : reveal directionnel (1.4s) + Ken Burns (6s) */
}

/* Reveal directionnel par index (cycle des 4 directions) */
.hero-49n-img:nth-child(1).is-active{
  animation:heroImgRevealTop 1.4s cubic-bezier(.77,0,.18,1) forwards,
            heroKenBurnsTL 6s ease-in-out forwards;
}
.hero-49n-img:nth-child(2).is-active{
  animation:heroImgRevealRight 1.4s cubic-bezier(.77,0,.18,1) forwards,
            heroKenBurnsTR 6s ease-in-out forwards;
}
.hero-49n-img:nth-child(3).is-active{
  animation:heroImgRevealBottom 1.4s cubic-bezier(.77,0,.18,1) forwards,
            heroKenBurnsBR 6s ease-in-out forwards;
}
.hero-49n-img:nth-child(4).is-active{
  animation:heroImgRevealLeft 1.4s cubic-bezier(.77,0,.18,1) forwards,
            heroKenBurnsBL 6s ease-in-out forwards;
}

/* Rideau directionnel (clip-path balaie depuis un bord)
   `round 28px` préserve les coins arrondis pendant et après le reveal */
@keyframes heroImgRevealTop{
  0%{clip-path:inset(100% 0 0 0 round 28px)}
  100%{clip-path:inset(0 round 28px)}
}
@keyframes heroImgRevealRight{
  0%{clip-path:inset(0 0 0 100% round 28px)}
  100%{clip-path:inset(0 round 28px)}
}
@keyframes heroImgRevealBottom{
  0%{clip-path:inset(0 0 100% 0 round 28px)}
  100%{clip-path:inset(0 round 28px)}
}
@keyframes heroImgRevealLeft{
  0%{clip-path:inset(0 100% 0 0 round 28px)}
  100%{clip-path:inset(0 round 28px)}
}

/* Ken Burns : zoom lent + léger pan vers un coin différent par image */
@keyframes heroKenBurnsTL{
  0%{transform:scale(1.06) translate(0,0)}
  100%{transform:scale(1.18) translate(2%,2%)}
}
@keyframes heroKenBurnsTR{
  0%{transform:scale(1.06) translate(0,0)}
  100%{transform:scale(1.18) translate(-2%,2%)}
}
@keyframes heroKenBurnsBR{
  0%{transform:scale(1.06) translate(0,0)}
  100%{transform:scale(1.18) translate(-2%,-2%)}
}
@keyframes heroKenBurnsBL{
  0%{transform:scale(1.06) translate(0,0)}
  100%{transform:scale(1.18) translate(2%,-2%)}
}

/* Footer du hero : sous-titre à gauche + CTA à droite */
.hero-49n-footer{
  display:flex;align-items:flex-end;justify-content:space-between;
  gap:24px;flex-wrap:wrap;margin-top:auto;padding-top:40px;
  position:relative;z-index:4;
}
/* Variante centrée : juste le CTA scintillant au milieu */
.hero-49n-footer--cta{
  justify-content:center;align-items:center;
}
.hero-49n-footer--cta .btn-hero{
  width:auto;display:inline-flex;align-items:center;justify-content:center;
}
.hero-49n-subtitle{
  font-size:14px;letter-spacing:.5px;
  color:rgba(255,255,255,.9);max-width:380px;line-height:1.5;
  opacity:0;animation:fadeUpSimple .9s ease 1.2s forwards;
}
.hero-49n-cta{
  display:inline-flex;align-items:center;gap:12px;
  color:#fff;text-decoration:none;
  font-size:13px;font-weight:600;letter-spacing:2px;text-transform:uppercase;
  padding:14px 0;border-bottom:1px solid rgba(255,255,255,.5);
  transition:gap .25s,color .25s,border-color .25s;
  opacity:0;animation:fadeUpSimple .9s ease 1.4s forwards;
}
.hero-49n-cta:hover{gap:22px;color:#ffb800;border-bottom-color:#ffb800}
.hero-49n-cta span{transition:transform .25s}
.hero-49n-cta:hover span{transform:translateX(4px)}
@keyframes fadeUpSimple{
  from{opacity:0;transform:translateY(16px)}
  to{opacity:1;transform:translateY(0)}
}

/* Scroll cue version claire (déjà blanche par défaut, garde la classe pour compat) */
.scroll-cue--light{color:rgba(255,255,255,.7) !important}
.scroll-cue--light:hover{color:#fff !important}
.scroll-cue--light .scroll-cue-line{
  background:linear-gradient(to bottom,rgba(255,255,255,0),rgba(255,255,255,.7));
}

/* Mobile : positions absolues conservées mais plus serrées */
@media(max-width:899px){
  .hero-49n{padding:110px 24px 60px;min-height:95vh}
  .hero-49n-eyebrow{top:80px;right:20px;font-size:10px;letter-spacing:1.5px}
  .hero-49n-stage{min-height:65vh}
  .hero-49n-word{font-size:clamp(56px,20vw,130px)}
  .hero-49n-word--left{left:0;top:18%}
  .hero-49n-word--right{right:0;bottom:18%}
  .hero-49n-photo{width:50vw;border-radius:20px}
  .hero-49n-footer{flex-direction:column;align-items:flex-start;gap:16px;padding-top:20px}
}
@media(max-width:480px){
  .hero-49n-word{font-size:clamp(48px,22vw,90px)}
  .hero-49n-photo{width:55vw}
}

/* ─────────────────────────────────────────────────────────
 * STYLES ÉDITORIAUX (style 49north — ANCIEN hero, gardé pour compat)
 * ───────────────────────────────────────────────────────── */

/* Eyebrow : petit label en haut de section, courrier mono */
.eyebrow{
  display:inline-block;font-size:12px;font-weight:600;
  letter-spacing:2px;text-transform:uppercase;
  color:var(--accent);
  font-family:ui-monospace,'Cascadia Code','Roboto Mono',monospace;
  margin-bottom:14px;
}

/* HERO ÉDITORIAL — texte plus minimal, plus aéré, position bottom-left */
.hero-pro--editorial{
  min-height:100vh;
  padding:120px 32px 100px;
  display:flex;flex-direction:column;justify-content:flex-end;
}
.hero-content--editorial{
  max-width:900px;margin:0;text-align:left;
}
.hero-pro--editorial .hero-badge{
  background:transparent;backdrop-filter:none;
  border:none;border-left:2px solid rgba(255,255,255,.6);
  border-radius:0;padding:4px 0 4px 14px;
  font-size:13px;font-weight:600;letter-spacing:1.5px;
  text-transform:uppercase;opacity:.95;margin-bottom:24px;
}
.hero-title--editorial{
  font-size:clamp(48px,9vw,120px);
  line-height:.95;font-weight:900;
  letter-spacing:-2.5px;margin-bottom:24px;
}
.hero-line{display:block}
.hero-sub--editorial{
  font-size:clamp(15px,2vw,18px);
  max-width:540px;margin-bottom:36px;
  opacity:.92;line-height:1.55;
}
.hero-pro--editorial .btn-hero{padding:18px 32px;font-size:14px;letter-spacing:1.2px;text-transform:uppercase}

/* Scroll cue (ligne + texte "Le projet" en bas du hero) */
.scroll-cue{
  position:absolute;bottom:28px;left:50%;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:10px;
  color:rgba(255,255,255,.7);text-decoration:none;
  font-size:11px;letter-spacing:2px;text-transform:uppercase;font-weight:500;
  z-index:5;
}
.scroll-cue:hover{color:#fff}
.scroll-cue-line{
  display:block;width:1px;height:40px;
  background:linear-gradient(to bottom,rgba(255,255,255,0),rgba(255,255,255,.7));
  animation:scrollCueAnim 2s ease-in-out infinite;
  transform-origin:top;
}
@keyframes scrollCueAnim{
  0%,100%{transform:scaleY(.4);opacity:.5}
  50%{transform:scaleY(1);opacity:1}
}
.scroll-cue-text{font-family:ui-monospace,'Cascadia Code','Roboto Mono',monospace}
@media(max-width:599px){
  .hero-pro--editorial{padding:100px 20px 80px}
  .hero-title--editorial{letter-spacing:-1.2px;font-size:42px}
  .scroll-cue-text{display:none}
}

/* MANIFESTO SECTION — full-bleed image + text overlay parallax */
.manifesto-section{
  position:relative;
  padding:140px 32px;
  color:#fff;overflow:hidden;
  isolation:isolate;
  min-height:80vh;
  display:flex;align-items:center;
}
.manifesto-bg{
  position:absolute;inset:-10%;
  background-size:cover;background-position:center;
  will-change:transform;z-index:-2;
}
.manifesto-overlay{
  position:absolute;inset:0;z-index:-1;
  background:linear-gradient(135deg,rgba(10,37,64,.85) 0%,rgba(15,76,129,.7) 50%,rgba(8,56,102,.92) 100%);
}
.manifesto-content{max-width:780px;margin:0 auto;text-align:center}
.manifesto-content .eyebrow{color:#ffb800}
.manifesto-title{
  font-size:clamp(36px,6vw,76px);line-height:1.05;
  font-weight:900;letter-spacing:-1.5px;margin-bottom:24px;
}
.manifesto-title em{
  font-style:italic;font-weight:300;
  background:linear-gradient(135deg,#ffb800,#ff6b35);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
}
.manifesto-lead{
  font-size:clamp(15px,1.8vw,19px);line-height:1.6;
  opacity:.92;margin-bottom:36px;
}
.manifesto-cta{
  display:inline-flex;align-items:center;gap:10px;
  color:#fff;text-decoration:none;
  font-size:14px;font-weight:600;letter-spacing:1.5px;text-transform:uppercase;
  padding:18px 0;border-bottom:1px solid rgba(255,255,255,.3);
  transition:gap .25s,border-color .25s;
}
.manifesto-cta:hover{gap:18px;border-color:#ffb800;color:#fff}
.manifesto-cta span{transition:transform .25s}
.manifesto-cta:hover span{transform:translateX(4px)}

/* CAT BLOCKS ÉDITORIAUX (alternés gauche/droite) */
.cats-editorial{
  padding:100px 32px;background:#fff;
  max-width:1280px;margin:0 auto;
}
.cats-editorial-intro{
  max-width:680px;margin:0 auto 80px;text-align:center;
}
.cats-editorial-intro h2{
  font-size:clamp(32px,5vw,60px);line-height:1.1;
  font-weight:900;letter-spacing:-1.2px;
}
.cat-block{
  display:grid;grid-template-columns:1fr 1fr;gap:80px;
  align-items:center;margin-bottom:120px;
}
.cat-block:last-child{margin-bottom:0}
.cat-block--right{grid-template-columns:1fr 1fr;direction:rtl}
.cat-block--right > *{direction:ltr}
.cat-block-img{
  display:block;aspect-ratio:4/5;overflow:hidden;
  border-radius:8px;background:#f8fafc;position:relative;
  text-decoration:none;
}
.cat-block-img img{
  width:100%;height:100%;object-fit:cover;
  transition:transform .8s cubic-bezier(.2,.8,.2,1);
}
.cat-block-img:hover img{transform:scale(1.08)}
.cat-block-img::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(135deg,transparent 60%,rgba(15,76,129,.1));
  opacity:0;transition:opacity .3s;
}
.cat-block-img:hover::after{opacity:1}
.cat-block-text{padding:0 20px}
.cat-num{
  font-family:ui-monospace,'Cascadia Code',monospace;
  font-size:13px;font-weight:600;
  color:var(--accent);letter-spacing:2px;
  display:block;margin-bottom:12px;
}
.cat-block-text h3{
  font-size:clamp(32px,5vw,52px);line-height:1.05;
  font-weight:900;letter-spacing:-1px;
  margin-bottom:20px;color:var(--text);
}
.cat-block-text p{
  font-size:17px;line-height:1.65;
  color:var(--muted);margin-bottom:24px;max-width:420px;
}
.cat-block-cta{
  display:inline-flex;align-items:center;gap:8px;
  font-size:14px;font-weight:600;letter-spacing:1.5px;
  text-transform:uppercase;color:var(--text);
  padding:14px 0;border-bottom:1px solid var(--text);
  text-decoration:none;
  transition:gap .25s,color .25s,border-color .25s;
}
.cat-block-cta:hover{gap:14px;color:var(--accent);border-bottom-color:var(--accent)}
@media(max-width:899px){
  .cats-editorial{padding:60px 20px}
  .cats-editorial-intro{margin-bottom:50px}
  .cat-block,.cat-block--right{grid-template-columns:1fr;gap:30px;margin-bottom:60px;direction:ltr}
  .cat-block-text{padding:0;text-align:left}
}

/* Header catalog plus éditorial */
.catalog-header{flex-direction:column;align-items:flex-start;gap:8px;margin-bottom:32px}
.catalog-section{padding:80px 32px;background:var(--bg)}
.catalog-section h2{font-size:clamp(32px,5vw,52px);font-weight:900;letter-spacing:-1px;line-height:1.05}
@media(max-width:899px){.catalog-section{padding:60px 20px}}

/* Header h-scroll plus éditorial */
.h-scroll-header{margin-bottom:50px}
.h-scroll-header h2{font-size:clamp(32px,5vw,52px);font-weight:900;letter-spacing:-1px;line-height:1.05;margin-bottom:8px}
@media(max-width:899px){.h-scroll-header h2{font-size:28px}}

/* ═══════════════════════════════════════════════════════════
 * FICHE PRODUIT PREMIUM (style 49north : galerie respirée + serif)
 * ═══════════════════════════════════════════════════════════ */
.product-page-premium{
  max-width:1400px;margin:0 auto;
  padding:120px 48px 80px;
  position:relative;
}
/* Halo doré subtil en arrière-plan derrière la galerie */
.product-page-premium::before{
  content:'';position:absolute;top:80px;left:8%;
  width:520px;height:520px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,184,0,.10) 0%,transparent 70%);
  z-index:-1;pointer-events:none;filter:blur(40px);
}
.breadcrumb{
  font-size:12px;color:var(--muted);letter-spacing:1px;text-transform:uppercase;
  font-family:ui-monospace,'Cascadia Code','Roboto Mono',monospace;
  margin-bottom:48px;display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  opacity:0;transform:translateY(8px);
  animation:productFadeIn .7s cubic-bezier(.22,.61,.36,1) .1s forwards;
}
.breadcrumb a{color:var(--muted);text-decoration:none;transition:color .25s}
.breadcrumb a:hover{color:var(--accent)}
.breadcrumb-sep{opacity:.35;font-size:14px}
.breadcrumb-current{color:var(--text);font-weight:600;letter-spacing:.5px}
@keyframes productFadeIn{to{opacity:1;transform:translateY(0)}}

/* Layout 2 colonnes : galerie 60% / infos 40% sur desktop */
.product-layout{
  display:grid;grid-template-columns:1.4fr 1fr;gap:80px;
  align-items:flex-start;
}
.product-gallery{
  position:sticky;top:120px;
  opacity:0;transform:translateX(-30px);
  animation:productSlideIn 1s cubic-bezier(.22,.61,.36,1) .3s forwards;
}
@keyframes productSlideIn{to{opacity:1;transform:translateX(0)}}
.product-gallery-main{
  aspect-ratio:4/5;
  background:linear-gradient(135deg,#f8fafc 0%,#eef2f7 100%);
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;
  border-radius:28px;
  box-shadow:0 24px 60px rgba(8,28,52,.10),0 4px 16px rgba(8,28,52,.04);
  position:relative;
  transition:transform .5s cubic-bezier(.22,.61,.36,1);
}
.product-gallery-main:hover{transform:translateY(-4px)}
.product-gallery-main img{
  width:100%;height:100%;object-fit:contain;padding:40px;
  transition:opacity .35s ease,transform .9s cubic-bezier(.2,.8,.2,1);
  /* Si l'image fail, le alt text reste mais sera caché par color:transparent */
  color:transparent;font-size:0;
}
.product-gallery-thumbs{
  display:flex;gap:12px;margin-top:18px;flex-wrap:wrap;
}
.product-thumb{
  width:72px;height:72px;
  background:linear-gradient(135deg,#f8fafc,#eef2f7);
  border:1.5px solid transparent;border-radius:14px;
  cursor:pointer;padding:8px;
  transition:border-color .25s,transform .25s,box-shadow .25s;
  overflow:hidden;
}
.product-thumb img{width:100%;height:100%;object-fit:contain;color:transparent;font-size:0}
.product-thumb.is-active{
  border-color:var(--accent);
  box-shadow:0 6px 16px rgba(255,184,0,.18);
}
.product-thumb:hover{border-color:var(--text);transform:translateY(-2px)}

/* Infos colonne droite */
.product-info-col{
  padding:0;
  opacity:0;transform:translateX(30px);
  animation:productSlideInRight 1s cubic-bezier(.22,.61,.36,1) .4s forwards;
}
@keyframes productSlideInRight{to{opacity:1;transform:translateX(0)}}
.product-eyebrow{
  display:inline-block;font-size:11px;font-weight:700;
  letter-spacing:2.5px;text-transform:uppercase;
  color:var(--accent);
  font-family:ui-monospace,'Cascadia Code','Roboto Mono',monospace;
  margin-bottom:24px;
  padding-bottom:6px;border-bottom:2px solid rgba(255,184,0,.3);
}
.product-name{
  font-family:'Cormorant Garamond',Georgia,serif;
  font-size:clamp(34px,5vw,64px);line-height:1.05;
  font-weight:500;letter-spacing:-1.5px;
  margin-bottom:24px;color:var(--text);
}
.product-short{
  font-size:16px;line-height:1.7;
  color:var(--muted);margin-bottom:36px;
  max-width:520px;
}
.product-price-line{
  display:flex;align-items:baseline;justify-content:space-between;
  gap:16px;flex-wrap:wrap;margin-bottom:36px;
  padding-bottom:32px;border-bottom:1px solid var(--border);
}
.product-price{
  font-family:'Cormorant Garamond',Georgia,serif;
  font-size:54px;font-weight:500;color:var(--text);
  letter-spacing:-1.5px;line-height:1;
}
.product-price-currency{
  font-size:28px;font-weight:500;color:var(--accent);
  font-family:inherit;font-style:italic;
}
.product-stock{
  font-size:11px;font-weight:700;letter-spacing:2px;text-transform:uppercase;
  font-family:ui-monospace,'Cascadia Code','Roboto Mono',monospace;
  padding:6px 12px;border-radius:999px;
}
.product-stock.is-in{color:#059669;background:rgba(5,150,105,.10)}
.product-stock.is-out{color:#dc2626;background:rgba(220,38,38,.10)}

/* Bouton "Ajouter au panier" travaillé */
.product-add-btn{
  width:100%;display:flex;align-items:center;justify-content:center;gap:14px;
  padding:22px 24px;
  background:var(--text);color:#fff;border:none;
  border-radius:14px;
  font-family:inherit;font-size:13px;font-weight:700;letter-spacing:1.8px;
  text-transform:uppercase;cursor:pointer;
  transition:background .25s,transform .15s,gap .25s,box-shadow .25s;
  position:relative;overflow:hidden;
  box-shadow:0 4px 14px rgba(8,28,52,.15);
}
.product-add-btn:hover{box-shadow:0 8px 28px rgba(255,184,0,.30)}
.product-add-btn::before{
  content:'';position:absolute;inset:0;
  background:linear-gradient(135deg,var(--primary),var(--accent));
  opacity:0;transition:opacity .35s;
}
.product-add-btn:hover{gap:22px}
.product-add-btn:hover::before{opacity:1}
.product-add-btn > *{position:relative;z-index:1}
.product-add-btn:active{transform:scale(.98)}
.product-add-btn:disabled{background:var(--muted);cursor:not-allowed;opacity:.6}
.product-add-btn:disabled::before{display:none}
.product-add-icon{font-size:18px}
.product-add-arrow{transition:transform .25s}
.product-add-btn:hover .product-add-arrow{transform:translateX(4px)}

/* Perks : 3 lignes courtes en dessous du bouton */
.product-perks{
  list-style:none;padding:0;margin:32px 0 0;
  display:flex;flex-direction:column;gap:14px;
}
.product-perks li{
  font-size:13px;color:var(--text);font-weight:500;
  display:flex;align-items:center;gap:14px;
  padding:10px 0;border-bottom:1px solid rgba(0,0,0,.04);
}
.product-perks li:last-child{border-bottom:none}
.product-perks li span{
  font-size:16px;flex-shrink:0;
  width:32px;height:32px;display:inline-flex;align-items:center;justify-content:center;
  background:rgba(255,184,0,.10);border-radius:50%;
}

/* Section description (sous le fold) */
.product-description{
  max-width:880px;margin:120px auto 0;
  padding-top:60px;border-top:1px solid var(--border);
}
.product-description .eyebrow{margin-bottom:14px}
.product-description h2{
  font-family:'Cormorant Garamond',Georgia,serif;
  font-size:clamp(32px,5vw,56px);font-weight:500;
  letter-spacing:-1.5px;line-height:1.1;margin-bottom:36px;
}
.product-desc-body{
  font-size:17px;line-height:1.75;color:var(--text);
}
.product-desc-body p{margin-bottom:20px}
.product-desc-body strong{font-weight:700;color:var(--text)}
.product-desc-body ul,.product-desc-body ol{padding-left:24px;margin-bottom:20px}
.product-desc-body li{margin-bottom:10px}
.product-desc-body h2,.product-desc-body h3,.product-desc-body h4{
  font-family:'Cormorant Garamond',Georgia,serif;
  font-weight:500;letter-spacing:-.5px;
  margin:36px 0 16px;color:var(--text);
}
.product-desc-body h2{font-size:32px}
.product-desc-body h3{font-size:26px}
.product-desc-body h4{font-size:22px}

/* ─── Animation scroll : chaque bloc (p/h2/h3/ul/etc.) arrive en alternance
   gauche/droite quand il entre dans le viewport (IntersectionObserver) ─── */
.product-desc-body > *{
  opacity:0;
  transform:translateX(-60px);
  transition:opacity .8s cubic-bezier(.22,.61,.36,1),
             transform .9s cubic-bezier(.22,.61,.36,1);
  will-change:transform,opacity;
}
.product-desc-body > *:nth-child(even){
  transform:translateX(60px); /* éléments pairs : viennent de la droite */
}
.product-desc-body > *.is-revealed{
  opacity:1;
  transform:translateX(0);
}

/* Mobile : colonne unique, gallery au-dessus */
@media(max-width:899px){
  .product-page-premium{padding:90px 20px 60px}
  .product-page-premium::before{width:300px;height:300px;left:0;top:60px}
  .breadcrumb{margin-bottom:24px;font-size:10px}
  .product-layout{grid-template-columns:1fr;gap:40px}
  .product-gallery{position:relative;top:auto}
  .product-gallery-main{border-radius:20px}
  .product-thumb{width:60px;height:60px;border-radius:10px}
  .product-name{font-size:clamp(28px,7vw,40px);letter-spacing:-1px}
  .product-price{font-size:42px}
  .product-price-currency{font-size:22px}
  .product-add-btn{padding:18px 20px;font-size:12px}
  .product-description{margin-top:60px;padding-top:40px}
}

/* ═══════════════════════════════════════════════════════════
 * BOUTIQUE — grille premium minimaliste (style 49north)
 * ═══════════════════════════════════════════════════════════ */
.boutique-wrap{
  max-width:1600px;margin:0 auto;
  /* Le hero bleu prend déjà la place en haut, on réduit le padding-top */
  padding:60px 48px 80px;
}
/* ═══════════════════════════════════════════════════════════
   HERO BLEU BOUTIQUE — fond cirque cilaos + titre morphing infini
   + particules dorées flottantes + sweep doré permanent
═══════════════════════════════════════════════════════════ */
.boutique-blue-hero{
  position:relative;
  min-height:62vh;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:140px 48px 80px;
  background:
    linear-gradient(135deg,rgba(8,28,52,.94) 0%,rgba(12,60,103,.90) 50%,rgba(6,40,74,.96) 100%),
    url('/uploads/perso/cirque-cilaos.jpg') center/cover no-repeat;
  color:#fff;
  overflow:hidden;
  isolation:isolate;
}
/* Vignettage + halos colorés subtils (style hero home) */
.boutique-blue-hero::before{
  content:'';position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(700px circle at 20% 30%,rgba(255,184,0,.14),transparent 55%),
    radial-gradient(600px circle at 80% 70%,rgba(255,107,53,.10),transparent 55%);
}
.boutique-blue-hero::after{
  content:'';position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(ellipse at center,transparent 40%,rgba(8,28,52,.45) 100%);
}

/* ─── Particules dorées qui flottent en ambiance (10 spans) ─── */
.boutique-particles{position:absolute;inset:0;z-index:1;pointer-events:none}
.boutique-particles span{
  position:absolute;display:block;
  width:4px;height:4px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,200,80,.9),rgba(255,184,0,0));
  opacity:0;
  animation:particleFloat 12s linear infinite;
}
/* 12 particules positionnées + delays + tailles variées */
.boutique-particles span:nth-child(1) {left:8%; top:80%;width:3px;height:3px;animation-delay:0s;   animation-duration:14s}
.boutique-particles span:nth-child(2) {left:18%;top:70%;width:5px;height:5px;animation-delay:1.5s; animation-duration:11s}
.boutique-particles span:nth-child(3) {left:28%;top:90%;width:2px;height:2px;animation-delay:3s;   animation-duration:13s}
.boutique-particles span:nth-child(4) {left:42%;top:75%;width:4px;height:4px;animation-delay:5s;   animation-duration:15s}
.boutique-particles span:nth-child(5) {left:55%;top:85%;width:3px;height:3px;animation-delay:2s;   animation-duration:12s}
.boutique-particles span:nth-child(6) {left:68%;top:78%;width:5px;height:5px;animation-delay:6.5s; animation-duration:14s}
.boutique-particles span:nth-child(7) {left:78%;top:88%;width:2px;height:2px;animation-delay:4s;   animation-duration:11s}
.boutique-particles span:nth-child(8) {left:88%;top:72%;width:4px;height:4px;animation-delay:7s;   animation-duration:13s}
.boutique-particles span:nth-child(9) {left:15%;top:95%;width:3px;height:3px;animation-delay:8.5s; animation-duration:15s}
.boutique-particles span:nth-child(10){left:48%;top:92%;width:5px;height:5px;animation-delay:9s;   animation-duration:12s}
.boutique-particles span:nth-child(11){left:72%;top:96%;width:3px;height:3px;animation-delay:10s;  animation-duration:14s}
.boutique-particles span:nth-child(12){left:92%;top:90%;width:4px;height:4px;animation-delay:11s;  animation-duration:13s}
@keyframes particleFloat{
  0%   {opacity:0;transform:translateY(0) translateX(0)}
  10%  {opacity:1}
  90%  {opacity:1}
  100% {opacity:0;transform:translateY(-100vh) translateX(40px)}
}

/* ─── Titre boutique : "La" fixe + mot rotatif ─── */
.boutique-title-rotate{
  position:relative;z-index:5;
  font-family:'Cormorant Garamond',Georgia,serif;
  font-size:clamp(56px,11vw,180px);
  font-weight:500;line-height:.95;letter-spacing:-3px;
  margin:0;color:#fff;text-align:center;
  text-shadow:0 8px 40px rgba(8,28,52,.6);
  display:flex;align-items:baseline;justify-content:center;
  gap:.25em;flex-wrap:wrap;
  /* Reveal initial */
  opacity:0;animation:boutiqueTitleFadeIn 1.2s cubic-bezier(.22,.61,.36,1) .3s forwards;
}
@keyframes boutiqueTitleFadeIn{to{opacity:1}}
.bt-static{display:inline-block}

/* Conteneur du mot rotatif : prend la largeur du ghost word (= performance.)
   pour éviter que le layout saute quand le mot change */
.bt-rotate-wrap{
  position:relative;display:inline-block;
  vertical-align:baseline;
  overflow:visible;
  perspective:450px;                 /* perspective rapprochée = 3D franchement marquée */
  perspective-origin:50% 50%;
}
/* Ghost : invisible mais prend la place pour fixer la largeur du wrap */
.bt-ghost{
  position:relative !important;
  visibility:hidden;
  opacity:1 !important;
  transform:none !important;
  animation:none !important;
}
/* Chaque mot : empilé en absolu, italic doré plein — ROTATION 3D EN CONTINU (toujours visible) */
.bt-word{
  position:absolute;left:0;top:0;
  font-style:italic;
  color:#ffb800;
  -webkit-text-fill-color:#ffb800;
  text-shadow:0 3px 24px rgba(255,184,0,.45),0 1px 2px rgba(120,80,0,.5);
  white-space:nowrap;line-height:1;
  backface-visibility:hidden;
  transform-origin:50% 50%;
  opacity:0;
  transition:opacity .6s ease;       /* fondu doux au changement de mot */
}
.bt-word.is-active{
  opacity:1;
  animation:bt3dTurn 5s ease-in-out infinite;   /* le mot PIVOTE dans l'espace, en boucle */
}
.bt-word.is-leaving{ opacity:0; }
/* Rotation 3D continue : avec la perspective rapprochée, les bords avancent/reculent franchement */
@keyframes bt3dTurn{
  0%   { transform:rotateY(-22deg) rotateX(7deg); }
  50%  { transform:rotateY(22deg) rotateX(-7deg); }
  100% { transform:rotateY(-22deg) rotateX(7deg); }
}
/* Accessibilité : pas de rotation 3D si l'utilisateur réduit les animations */
@media (prefers-reduced-motion: reduce){
  .bt-word.is-active{animation:none;transform:none}
}
@keyframes btWordShine{
  0%   {background-position:100% 0}
  50%  {background-position:-100% 0}
  100% {background-position:-300% 0}
}

/* ─── Indicateur "Explorer" en bas du hero ─── */
.boutique-scroll-cue{
  position:absolute;bottom:30px;left:50%;
  transform:translateX(-50%);z-index:5;
  display:flex;flex-direction:column;align-items:center;gap:8px;
  color:rgba(255,255,255,.7);text-decoration:none;
  font-size:11px;letter-spacing:3px;text-transform:uppercase;
  font-family:ui-monospace,'Cascadia Code',monospace;
  opacity:0;animation:boutiqueTitleFadeIn 1s ease 1.4s forwards;
  transition:color .25s;
}
.boutique-scroll-cue:hover{color:#ffb800}
.cue-line{
  width:1px;height:40px;
  background:linear-gradient(to bottom,rgba(255,255,255,.7),transparent);
  animation:cueLinePulse 2.2s ease-in-out infinite;
}
.boutique-scroll-cue:hover .cue-line{
  background:linear-gradient(to bottom,#ffb800,transparent);
}
@keyframes cueLinePulse{
  0%,100%{transform:scaleY(1);opacity:.7}
  50%    {transform:scaleY(1.4);opacity:1}
}

/* Filtres : barre + bouton "Filtrer" qui ouvre un panel animé en dessous */
.boutique-filters{
  display:flex;align-items:center;justify-content:space-between;
  gap:16px;margin-bottom:0;flex-wrap:wrap;
  padding-bottom:20px;border-bottom:1px solid var(--border);
}

/* Bouton "Filtrer" — épuré, icône + texte + chevron */
.filter-toggle{
  display:inline-flex;align-items:center;gap:10px;
  background:transparent;color:var(--text);
  border:1px solid var(--border);border-radius:999px;
  padding:9px 18px;
  font-family:inherit;font-size:13px;font-weight:600;letter-spacing:.5px;
  cursor:pointer;text-transform:uppercase;
  transition:border-color .2s,color .2s,background .2s,transform .25s;
}
.filter-toggle:hover{border-color:var(--text);background:var(--text);color:#fff}
.filter-toggle-icon{display:inline-flex;align-items:center;line-height:0}
.filter-toggle-chevron{
  font-size:10px;line-height:1;
  transition:transform .35s cubic-bezier(.65,0,.35,1);
}
.filter-toggle.is-open{background:var(--text);color:#fff;border-color:var(--text)}
.filter-toggle.is-open .filter-toggle-chevron{transform:rotate(180deg)}

/* Pill "filtre actif" — au milieu de la barre */
.boutique-active-filter{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;flex:1;justify-content:center;
}
.active-filter-pill{
  display:inline-flex;align-items:center;gap:10px;
  background:var(--accent);color:#fff;
  padding:7px 6px 7px 16px;border-radius:999px;
  font-size:12px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;
  animation:filterPillIn .4s cubic-bezier(.34,1.56,.64,1) forwards;
}
@keyframes filterPillIn{
  from{opacity:0;transform:translateY(-8px) scale(.9)}
  to  {opacity:1;transform:translateY(0) scale(1)}
}
.active-filter-clear{
  display:inline-flex;align-items:center;justify-content:center;
  width:22px;height:22px;border-radius:50%;
  background:rgba(255,255,255,.22);color:#fff;border:none;
  cursor:pointer;font-size:14px;line-height:1;padding:0;
  transition:background .2s,transform .25s;
}
.active-filter-clear:hover{background:rgba(0,0,0,.3);transform:rotate(90deg)}

/* ─────────────────────────────────────────────────────────────
   PANEL FILTRES : drawer qui s'ouvre en dessous de la barre
   max-height animation + opacity, items stagger reveal
─────────────────────────────────────────────────────────────── */
.filter-panel{
  max-height:0;overflow:hidden;
  opacity:0;
  transition:max-height .65s cubic-bezier(.77,0,.18,1),
             opacity .35s ease,
             margin .4s ease;
  margin:0 0 0 0;
}
.filter-panel.is-open{
  max-height:1200px;
  opacity:1;
  margin:0 0 36px 0;
  transition:max-height .8s cubic-bezier(.77,0,.18,1),
             opacity .5s ease .1s,
             margin .4s ease;
}
.filter-panel-inner{
  padding:32px 0 20px;
  display:flex;flex-direction:column;gap:28px;
  border-bottom:1px solid var(--border);
}

/* Bouton "Tous les produits" en grand — proéminent en haut du panel */
.filter-all{
  display:inline-flex;align-items:center;gap:14px;
  align-self:flex-start;
  background:transparent;color:var(--text);
  border:none;cursor:pointer;
  font-family:'Cormorant Garamond',Georgia,serif;
  font-size:clamp(32px,4.5vw,52px);font-weight:500;letter-spacing:-1.5px;
  padding:0;line-height:1;
  opacity:0;transform:translateX(-40px);
  transition:opacity .6s ease,transform .7s cubic-bezier(.22,.61,.36,1),color .2s;
}
.filter-panel.is-open .filter-all{
  opacity:1;transform:translateX(0);
  transition-delay:.15s;
}
.filter-all-icon{
  display:inline-flex;color:var(--accent);
  font-size:28px;line-height:1;
  transition:transform .3s cubic-bezier(.34,1.56,.64,1);
}
.filter-all:hover{color:var(--accent)}
.filter-all:hover .filter-all-icon{transform:rotate(180deg) scale(1.15)}

/* Groupes Nutrition / Objectif */
.filter-group{
  display:flex;flex-direction:column;gap:14px;
  opacity:0;transform:translateY(20px);
  transition:opacity .6s ease,transform .7s cubic-bezier(.22,.61,.36,1);
}
.filter-panel.is-open .filter-group{opacity:1;transform:translateY(0)}
.filter-panel.is-open .filter-group[data-i="0"]{transition-delay:.25s}
.filter-panel.is-open .filter-group[data-i="1"]{transition-delay:.40s}

.filter-group-label{
  font-size:11px;font-weight:700;letter-spacing:2.5px;text-transform:uppercase;
  color:var(--muted);
  font-family:ui-monospace,'Cascadia Code','Roboto Mono',monospace;
}
.filter-group-chips{
  display:flex;flex-wrap:wrap;gap:8px;
}

/* Chips : pill avec stagger reveal */
.filter-chip{
  background:transparent;color:var(--text);
  border:1px solid var(--border);
  padding:9px 18px;border-radius:999px;
  font-family:inherit;font-size:13px;font-weight:500;letter-spacing:.3px;
  cursor:pointer;white-space:nowrap;
  opacity:0;transform:translateX(-20px);
  transition:opacity .5s ease,transform .55s cubic-bezier(.22,.61,.36,1),
             background .2s,border-color .2s,color .2s;
}
.filter-panel.is-open .filter-chip{opacity:1;transform:translateX(0)}
/* Stagger : delays par data-j (0 à 7) — appliqués depuis le start de chaque groupe */
.filter-panel.is-open .filter-group[data-i="0"] .filter-chip[data-j="0"]{transition-delay:.30s}
.filter-panel.is-open .filter-group[data-i="0"] .filter-chip[data-j="1"]{transition-delay:.35s}
.filter-panel.is-open .filter-group[data-i="0"] .filter-chip[data-j="2"]{transition-delay:.40s}
.filter-panel.is-open .filter-group[data-i="0"] .filter-chip[data-j="3"]{transition-delay:.45s}
.filter-panel.is-open .filter-group[data-i="0"] .filter-chip[data-j="4"]{transition-delay:.50s}
.filter-panel.is-open .filter-group[data-i="0"] .filter-chip[data-j="5"]{transition-delay:.55s}
.filter-panel.is-open .filter-group[data-i="0"] .filter-chip[data-j="6"]{transition-delay:.60s}
.filter-panel.is-open .filter-group[data-i="0"] .filter-chip[data-j="7"]{transition-delay:.65s}
.filter-panel.is-open .filter-group[data-i="1"] .filter-chip[data-j="0"]{transition-delay:.45s}
.filter-panel.is-open .filter-group[data-i="1"] .filter-chip[data-j="1"]{transition-delay:.50s}
.filter-panel.is-open .filter-group[data-i="1"] .filter-chip[data-j="2"]{transition-delay:.55s}
.filter-panel.is-open .filter-group[data-i="1"] .filter-chip[data-j="3"]{transition-delay:.60s}
.filter-panel.is-open .filter-group[data-i="1"] .filter-chip[data-j="4"]{transition-delay:.65s}
.filter-panel.is-open .filter-group[data-i="1"] .filter-chip[data-j="5"]{transition-delay:.70s}
.filter-panel.is-open .filter-group[data-i="1"] .filter-chip[data-j="6"]{transition-delay:.75s}
.filter-panel.is-open .filter-group[data-i="1"] .filter-chip[data-j="7"]{transition-delay:.80s}

.filter-chip:hover{border-color:var(--text);background:var(--text);color:#fff}
.filter-chip.is-active{
  background:var(--accent);color:#fff;border-color:var(--accent);
  font-weight:700;
}
/* Sort select épuré (remplace le <select> Woo moche) */
.sort-select{
  background:transparent;border:none;
  color:var(--text);font-family:inherit;font-size:13px;
  font-weight:600;letter-spacing:.3px;text-transform:uppercase;
  padding:8px 24px 8px 4px;cursor:pointer;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 12 12'><path fill='%23000' d='M6 8.5L1.5 4h9z'/></svg>");
  background-repeat:no-repeat;background-position:right 4px center;
  width:auto;
}
.sort-select:focus{outline:none;color:var(--accent)}

/* Grille premium : 2 col mobile, 3 col desktop, 4 col XL */
.boutique-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:32px 24px;
}
@media(min-width:768px){.boutique-grid{grid-template-columns:repeat(3,1fr);gap:60px 32px}}
@media(min-width:1280px){.boutique-grid{grid-template-columns:repeat(4,1fr);gap:80px 40px}}

/* Card boutique minimaliste : image + nom + prix, c'est TOUT
   Reveal au scroll : slide depuis les côtés en alternance + sweep doré scintillant */
.boutique-card{
  text-decoration:none;color:var(--text);
  display:flex;flex-direction:column;gap:14px;
  position:relative;
  /* État initial : invisible, décalé depuis la gauche (cards index pair) */
  opacity:0;
  transform:translateX(-70px);
  transition:opacity .8s cubic-bezier(.22,.61,.36,1),
             transform 1s cubic-bezier(.22,.61,.36,1);
  transition-delay:calc(var(--i, 0) * 60ms);
}
/* Cards index impair : arrivent depuis la droite (alternance) */
.boutique-card:nth-child(even){
  transform:translateX(70px);
}
.boutique-card.is-revealed{
  opacity:1;
  transform:translateX(0);
}
.boutique-card.skeleton{
  height:380px;
  background:linear-gradient(90deg,#eef2f7 0%,#f8fafc 50%,#eef2f7 100%);
  background-size:200% 100%;animation:shimmer 1.5s infinite;
  border-radius:24px;opacity:1;transform:none;
}
.bc-img-wrap{
  position:relative;aspect-ratio:4/5;
  background:#f6f7f9;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  border-radius:24px;
  isolation:isolate;
}
/* Sweep doré scintillant qui balaie l'image après reveal (effet "highlight") */
.bc-img-wrap::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(110deg,
    transparent 25%,
    rgba(255,255,255,.55) 45%,
    rgba(255,184,0,.45) 50%,
    rgba(255,255,255,.55) 55%,
    transparent 75%);
  transform:translateX(-120%) skewX(-8deg);
  pointer-events:none;
  z-index:3;
  opacity:0;
  mix-blend-mode:overlay;
}
.boutique-card.is-revealed .bc-img-wrap::after{
  animation:cardShineSweep 1.4s cubic-bezier(.22,.61,.36,1) forwards;
  animation-delay:calc(var(--i, 0) * 60ms + .35s);
}
@keyframes cardShineSweep{
  0%   {transform:translateX(-120%) skewX(-8deg);opacity:0}
  15%  {opacity:1}
  85%  {opacity:1}
  100% {transform:translateX(120%) skewX(-8deg);opacity:0}
}
.bc-img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:contain;padding:18px;
  transition:opacity .5s ease,transform .8s cubic-bezier(.2,.8,.2,1);
}
.bc-img-2{opacity:0}
.boutique-card:hover .bc-img-1{opacity:0;transform:scale(1.05)}
.boutique-card:hover .bc-img-2{opacity:1;transform:scale(1.05)}
/* Si pas de 2ème image : juste un zoom léger au hover */
.boutique-card:hover .bc-img-1:only-child{opacity:1;transform:scale(1.07)}
.bc-placeholder{font-size:48px;color:#cbd5e1}
.bc-badge{
  position:absolute;top:12px;left:12px;z-index:2;
  font-size:10px;font-weight:700;letter-spacing:1px;
  padding:5px 10px;border-radius:0;
  text-transform:uppercase;
}
.bc-badge-sale{background:var(--accent);color:#fff}
.bc-badge-out{background:#1e293b;color:#fff}
/* Hover CTA : "Voir le produit" en fondu sur l'image */
.bc-hover-cta{
  position:absolute;bottom:14px;left:50%;transform:translateX(-50%) translateY(20px);
  background:var(--text);color:#fff;
  font-size:12px;font-weight:600;letter-spacing:1px;text-transform:uppercase;
  padding:10px 18px;
  opacity:0;transition:opacity .3s,transform .35s cubic-bezier(.22,.61,.36,1);
  white-space:nowrap;
}
.boutique-card:hover .bc-hover-cta{opacity:1;transform:translateX(-50%) translateY(0)}
.bc-info{padding:0 4px}
.bc-name{
  font-size:14px;font-weight:500;line-height:1.4;
  color:var(--text);margin-bottom:6px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  min-height:39px;
}
.bc-price{
  font-size:15px;font-weight:700;color:var(--text);
}
.bc-price-was{
  font-size:13px;color:var(--muted);
  text-decoration:line-through;font-weight:400;margin-right:8px;
}
.boutique-error{
  grid-column:1/-1;text-align:center;padding:60px 20px;
  color:#dc2626;
}
.boutique-empty{
  text-align:center;padding:80px 20px;color:var(--muted);
}
.boutique-empty p{margin-bottom:20px;font-size:16px}
.boutique-empty .btn-hero{display:inline-block;width:auto}
/* Mobile : hero bleu plus compact + padding wrap réduit */
@media(max-width:899px){
  .boutique-blue-hero{
    min-height:55vh;
    padding:110px 20px 70px;
    overflow:hidden; /* clip si le titre déborde quand même */
  }
  .boutique-title-rotate{
    font-size:clamp(34px,9.5vw,68px);
    letter-spacing:-1.5px;
    max-width:100%;
    flex-wrap:wrap;
  }
  .bt-rotate-wrap{display:inline-block;max-width:100%}
  .bt-word{font-size:inherit}
  .boutique-scroll-cue{bottom:20px;font-size:10px;letter-spacing:2.5px}
  .cue-line{height:30px}
  .boutique-wrap{padding:40px 20px 60px}
  .boutique-filters{gap:10px}
  .filter-toggle{padding:8px 14px;font-size:12px}
  .boutique-active-filter{order:3;flex-basis:100%;justify-content:flex-start;margin-top:6px}
  .active-filter-pill{font-size:11px;padding:6px 4px 6px 12px}
  .filter-panel.is-open{margin-bottom:24px}
  .filter-panel-inner{padding:20px 0 14px;gap:20px}
  .filter-all{font-size:clamp(28px,7vw,40px);gap:10px}
  .filter-all-icon{font-size:22px}
  .filter-chip{padding:7px 14px;font-size:12px}
  .boutique-grid{gap:24px 16px}
}

/* ═══════════════════════════════════════════════════════════
 * MARQUEE PRODUITS — défilement horizontal infini en boucle
 * 8 best-sellers WC, dupliqués 2× pour boucle sans coupure
 * ═══════════════════════════════════════════════════════════ */
.marquee-section{
  padding:100px 0 120px;
  background:#fff;
}
.marquee-header{
  display:flex;align-items:flex-end;justify-content:space-between;gap:24px;
  padding:0 48px;margin-bottom:48px;flex-wrap:wrap;
  max-width:1600px;margin-left:auto;margin-right:auto;
}
.marquee-header h2{
  font-size:clamp(36px,5vw,64px);line-height:1.05;
  font-weight:900;letter-spacing:-1.5px;margin-top:6px;
}
.marquee-cta{
  display:inline-flex;align-items:center;gap:10px;
  color:var(--text);text-decoration:none;
  font-size:14px;font-weight:600;letter-spacing:1.5px;text-transform:uppercase;
  padding:14px 0;border-bottom:1px solid var(--text);
  transition:gap .25s,color .25s,border-color .25s;
}
.marquee-cta:hover{gap:18px;color:var(--accent);border-bottom-color:var(--accent)}
.marquee-cta span{transition:transform .25s}
.marquee-cta:hover span{transform:translateX(4px)}

/* Conteneur marquee : largeur 100vw + mask fade sur les bords */
.marquee{
  width:100%;overflow:hidden;
  mask-image:linear-gradient(to right,transparent,#000 5%,#000 95%,transparent);
  -webkit-mask-image:linear-gradient(to right,transparent,#000 5%,#000 95%,transparent);
}
.marquee-track{
  display:flex;gap:24px;
  width:max-content;
  animation:marqueeScroll 35s linear infinite;
  will-change:transform;
}
.marquee:hover .marquee-track{animation-play-state:paused}
@keyframes marqueeScroll{
  0%{transform:translateX(0)}
  100%{transform:translateX(-50%)} /* boucle parfaite car set dupliqué */
}

/* Card produit dans le marquee : 260px, image carrée 1:1, nom + prix */
.marquee-card{
  flex:0 0 260px;width:260px;
  background:#fff;border:1px solid var(--border);
  border-radius:12px;overflow:hidden;
  text-decoration:none;color:var(--text);
  display:flex;flex-direction:column;
  transition:transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s,border-color .3s;
}
.marquee-card:hover{
  transform:translateY(-6px);
  box-shadow:0 16px 40px rgba(15,76,129,.15);
  border-color:rgba(255,184,0,.5);
  color:var(--text);
}
.marquee-card.skeleton{
  height:380px;
  background:linear-gradient(90deg,#eef2f7 0%,#f8fafc 50%,#eef2f7 100%);
  background-size:200% 100%;animation:shimmer 1.5s infinite;border:none;
}
.marquee-card .mc-img{
  width:100%;aspect-ratio:1/1;background:#f8fafc;
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;
}
.marquee-card .mc-img img{
  width:100%;height:100%;object-fit:contain;padding:20px;
  transition:transform .5s cubic-bezier(.2,.8,.2,1);
}
.marquee-card:hover .mc-img img{transform:scale(1.08)}
.marquee-card .mc-info{
  padding:16px 18px 20px;
  display:flex;flex-direction:column;gap:8px;flex:1;
  border-top:1px solid var(--border);
}
.marquee-card .mc-brand{
  font-size:10px;font-weight:700;letter-spacing:1.5px;
  color:var(--accent);text-transform:uppercase;
}
.marquee-card .mc-name{
  font-size:14px;font-weight:600;line-height:1.3;
  color:var(--text);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  min-height:36px;
}
.marquee-card .mc-price{
  font-size:17px;font-weight:800;color:var(--primary);margin-top:auto;
}
.marquee-card .mc-price-was{font-size:12px;color:var(--muted);text-decoration:line-through;font-weight:500;margin-right:6px}

/* Mobile : cards plus petites, gap réduit, anim plus rapide */
@media(max-width:899px){
  .marquee-section{padding:60px 0 80px}
  .marquee-header{padding:0 20px;margin-bottom:32px}
  .marquee-track{gap:16px;animation-duration:25s}
  .marquee-card{flex:0 0 200px;width:200px}
  .marquee-card .mc-info{padding:12px 14px 16px}
  .marquee-card .mc-name{font-size:13px;min-height:34px}
  .marquee-card .mc-price{font-size:15px}
}

/* ── HORIZONTAL SCROLL SECTION (gardé pour compat / pages internes futur) ── */
.h-scroll-section{
  position:relative;
  padding:60px 0 80px;
  background:linear-gradient(180deg,#fff 0%,var(--bg) 100%);
  overflow:hidden;
}
.h-scroll-header{padding:0 24px;margin-bottom:36px;max-width:1200px;margin-left:auto;margin-right:auto}
.h-scroll-header h2{font-size:32px;font-weight:900;margin-bottom:6px;letter-spacing:-.5px}
.h-scroll-header p{color:var(--muted);font-size:14px}
.h-scroll-hint{color:var(--accent);font-weight:600;display:inline-block}
.h-scroll-wrap{position:relative}
.h-scroll-track{
  display:flex;gap:24px;padding:0 24px;
  will-change:transform;
}
.h-scroll-card{
  flex:0 0 340px;height:480px;
  background:#fff;border:1px solid var(--border);border-radius:18px;
  overflow:hidden;display:flex;flex-direction:column;
  text-decoration:none;color:var(--text);
  transition:transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s;
  position:relative;box-shadow:0 8px 24px rgba(15,76,129,.08);
}
.h-scroll-card:hover{transform:translateY(-6px);box-shadow:0 16px 40px rgba(15,76,129,.2);color:var(--text)}
.h-scroll-card.skeleton{
  background:linear-gradient(90deg,#eef2f7 0%,#f8fafc 50%,#eef2f7 100%);
  background-size:200% 100%;animation:shimmer 1.5s infinite;border:none;
}
.h-scroll-card .img-wrap{
  flex:1;background:#f8fafc;display:flex;align-items:center;justify-content:center;
  position:relative;overflow:hidden;
}
.h-scroll-card .img-wrap img{
  width:100%;height:100%;object-fit:contain;padding:24px;
  transition:transform .5s cubic-bezier(.2,.8,.2,1);
}
.h-scroll-card:hover .img-wrap img{transform:scale(1.08)}
.h-scroll-card .badge-corner{
  position:absolute;top:14px;left:14px;
  background:var(--accent);color:#fff;
  padding:5px 12px;border-radius:8px;
  font-size:11px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;
  box-shadow:0 4px 12px rgba(255,107,53,.4);
}
.h-scroll-card .info{padding:18px 20px 22px;background:#fff;border-top:1px solid var(--border)}
.h-scroll-card .brand-tag{
  display:inline-block;font-size:10px;font-weight:800;letter-spacing:1.5px;
  color:var(--accent);text-transform:uppercase;margin-bottom:6px;
}
.h-scroll-card .name{font-size:15px;font-weight:700;line-height:1.3;margin-bottom:10px;min-height:40px}
.h-scroll-card .bottom{display:flex;align-items:center;justify-content:space-between}
.h-scroll-card .price{font-size:20px;font-weight:900;color:var(--primary)}
.h-scroll-card .price.was{font-size:13px;color:var(--muted);text-decoration:line-through;font-weight:500;margin-right:6px}
.h-scroll-card .add-btn{
  width:42px;height:42px;border-radius:12px;
  background:linear-gradient(135deg,var(--primary),var(--primary-d));color:#fff;
  border:none;font-size:22px;font-weight:700;cursor:pointer;
  display:flex;align-items:center;justify-content:center;line-height:1;
  transition:transform .15s,box-shadow .2s;flex-shrink:0;
  box-shadow:0 4px 12px rgba(15,76,129,.3);
}
.h-scroll-card .add-btn:hover{transform:scale(1.1) rotate(90deg);box-shadow:0 8px 20px rgba(15,76,129,.5)}
.h-scroll-card .add-btn:disabled{background:var(--muted);cursor:not-allowed;opacity:.6;box-shadow:none}
/* Indicateur de progression du scroll horizontal */
.h-scroll-progress{
  position:absolute;left:24px;right:24px;bottom:28px;
  height:3px;background:rgba(15,76,129,.12);
  border-radius:2px;overflow:hidden;
}
.h-scroll-progress span{
  display:block;height:100%;width:30%;
  background:linear-gradient(90deg,var(--primary),var(--accent));
  border-radius:2px;transition:transform .15s linear;
  transform-origin:left;
}
/* MOBILE (<900px) : fallback overflow-x natif avec snap (pas de pin GSAP) */
@media(max-width:899px){
  .h-scroll-section{padding:30px 0 50px}
  .h-scroll-header h2{font-size:24px}
  .h-scroll-hint{display:none}
  .h-scroll-wrap{overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .h-scroll-wrap::-webkit-scrollbar{display:none}
  .h-scroll-track{padding:0 16px 16px}
  .h-scroll-card{flex:0 0 280px;height:420px;scroll-snap-align:start}
  .h-scroll-progress{display:none}
}

/* Featured legacy (gardé pour compat, mais on utilise h-scroll-section maintenant) */
.featured-section{padding:24px 16px;background:linear-gradient(180deg,#fff,var(--bg))}

/* Trust band : chiffres clés avec compteur animé */
.trust-band{
  position:relative;
  display:flex;justify-content:space-around;
  padding:40px 20px;
  background:
    radial-gradient(circle at 20% 50%,rgba(255,184,0,.15),transparent 50%),
    radial-gradient(circle at 80% 50%,rgba(255,107,53,.12),transparent 50%),
    linear-gradient(135deg,var(--primary),var(--primary-d));
  color:#fff;text-align:center;gap:20px;flex-wrap:wrap;
  overflow:hidden;
}
.trust-band::before{
  content:'';position:absolute;top:0;left:-100%;width:50%;height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.08),transparent);
  animation:shimmer-band 8s linear infinite;
}
@keyframes shimmer-band{
  0%{left:-100%}
  100%{left:200%}
}
.trust-stat{position:relative;z-index:1}
.trust-stat strong{
  display:block;font-size:36px;font-weight:900;line-height:1;margin-bottom:6px;
  background:linear-gradient(135deg,#ffe08a,#ffb800);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
}
.trust-stat span{font-size:12px;opacity:.85;text-transform:uppercase;letter-spacing:.8px;font-weight:600}

/* Marquee de marques */
.brand-marquee{
  background:#fff;border-top:1px solid var(--border);border-bottom:1px solid var(--border);
  padding:14px 0;overflow:hidden;position:relative;
  mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);
}
.brand-marquee-track{
  display:flex;gap:50px;align-items:center;
  animation:marquee 30s linear infinite;
  white-space:nowrap;width:max-content;
}
.brand-marquee-item{
  font-size:18px;font-weight:800;color:var(--muted);
  letter-spacing:1px;text-transform:uppercase;
  transition:color .2s;flex-shrink:0;
}
.brand-marquee-item:hover{color:var(--primary)}
.brand-marquee-item .dot{color:var(--accent);margin:0 8px;font-size:12px;vertical-align:middle}
@keyframes marquee{
  from{transform:translateX(0)}
  to{transform:translateX(-50%)}
}

/* Install CTA bottom (banner conditionnelle) */
.install-cta{
  position:fixed;bottom:14px;left:14px;right:14px;
  z-index:200;
  background:linear-gradient(135deg,var(--accent),#ff8c42);
  color:#fff;border-radius:14px;
  box-shadow:0 12px 32px rgba(255,107,53,.4),0 4px 12px rgba(0,0,0,.2);
  animation:slideUpFade .4s cubic-bezier(.175,.885,.32,1.275);
}
@keyframes slideUpFade{from{transform:translateY(120%);opacity:0}to{transform:none;opacity:1}}
.install-cta-content{display:flex;align-items:center;gap:12px;padding:12px 14px}
.install-cta-icon{font-size:32px;flex-shrink:0}
.install-cta-text{flex:1;display:flex;flex-direction:column;line-height:1.2;min-width:0}
.install-cta-text strong{font-size:14px;font-weight:700}
.install-cta-text span{font-size:12px;opacity:.92}
.btn-install{
  background:#fff;color:var(--accent);
  border:none;padding:10px 16px;border-radius:10px;
  font-family:inherit;font-size:13px;font-weight:700;cursor:pointer;
  flex-shrink:0;
}
.btn-install:hover{background:#fef2ed}
.install-dismiss{background:transparent;border:none;color:#fff;cursor:pointer;font-size:18px;opacity:.8;padding:4px;flex-shrink:0}
.install-dismiss:hover{opacity:1}

/* Footer refondé (style 49north : grosse typo, beaucoup d'air, scroll-reveal) */
.site-footer{
  margin-top:0;padding:120px 48px 48px;
  background:#0a2540;color:#a8b6c8;
  position:relative;overflow:hidden;
}
.site-footer::before{
  content:'';position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,184,0,.4),transparent);
}
.footer-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:60px;
  max-width:1400px;margin:0 auto 80px;
  align-items:flex-start;
}
.footer-grid h4{
  color:#fff;font-size:11px;font-weight:600;
  letter-spacing:2px;text-transform:uppercase;
  margin-bottom:20px;
  font-family:ui-monospace,'Cascadia Code',monospace;
}
.footer-grid h4::before{content:'— ';color:rgba(255,184,0,.7)}
.footer-grid p{
  font-size:16px;margin-bottom:8px;line-height:1.5;
  color:rgba(255,255,255,.85);font-weight:300;
}
.footer-grid a{
  color:rgba(255,255,255,.85);text-decoration:none;
  position:relative;display:inline-block;
  transition:color .25s;
}
.footer-grid a::after{
  content:'';position:absolute;left:0;bottom:-2px;
  height:1px;width:0;background:#ffb800;
  transition:width .25s ease;
}
.footer-grid a:hover{color:#fff}
.footer-grid a:hover::after{width:100%}
.footer-mini{
  text-align:center;padding-top:32px;
  border-top:1px solid rgba(255,255,255,.08);
  color:rgba(255,255,255,.4);font-size:12px;letter-spacing:.5px;
}
@media(max-width:899px){
  .site-footer{padding:60px 24px 32px}
  .footer-grid{gap:40px;margin-bottom:40px}
  .footer-grid p{font-size:15px}
}

/* SECTIONS */
.cats-section,.catalog-section{padding:20px 16px}
.cats-section h2,.catalog-section h2{font-size:18px;font-weight:700;margin-bottom:14px}

/* CATÉGORIES */
.cats-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(140px,1fr));
  gap:10px;
}
.cat-card{
  background:var(--card);border:1px solid var(--border);
  border-radius:var(--radius);padding:14px 10px;
  text-align:center;cursor:pointer;
  transition:transform .15s,box-shadow .15s;
  text-decoration:none;color:var(--text);
}
.cat-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-h)}
.cat-card.active{border-color:var(--primary);background:rgba(15,76,129,.05)}
.cat-icon{font-size:28px;margin-bottom:6px}
.cat-name{font-size:13px;font-weight:600;line-height:1.2}
.cat-count{font-size:11px;color:var(--muted);margin-top:4px}
.cat-skeleton{height:90px;background:linear-gradient(90deg,#eef2f7 0%,#f8fafc 50%,#eef2f7 100%);border-radius:var(--radius);animation:shimmer 1.5s infinite}

/* CATALOG GRID */
.catalog-header{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:14px}
.catalog-count{font-size:13px;color:var(--muted)}
.catalog-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:12px;
}
@media(min-width:640px){.catalog-grid{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1024px){.catalog-grid{grid-template-columns:repeat(4,1fr)}}

.prod-card{
  background:var(--card);border:1px solid var(--border);
  border-radius:var(--radius);overflow:hidden;
  display:flex;flex-direction:column;
  text-decoration:none;color:var(--text);
  transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s,border-color .25s;
  position:relative;
  will-change:transform;
}
.prod-card::before{
  content:'';position:absolute;inset:0;
  background:linear-gradient(135deg,rgba(255,184,0,.08),rgba(255,107,53,.05));
  opacity:0;transition:opacity .25s;pointer-events:none;border-radius:inherit;z-index:0;
}
.prod-card:hover{
  transform:translateY(-4px) scale(1.015);
  box-shadow:0 16px 40px rgba(15,76,129,.18),0 4px 12px rgba(15,76,129,.1);
  border-color:rgba(255,184,0,.4);
  color:var(--text);
}
.prod-card:hover::before{opacity:1}
.prod-card>*{position:relative;z-index:1}
.prod-card.tilt-active{transition:transform .1s}
/* L'image se rapproche légèrement au hover (effet "zoom" subtil) */
.prod-card .prod-img-wrap img{transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.prod-card:hover .prod-img-wrap img{transform:scale(1.06)}
.prod-img-wrap{aspect-ratio:1;background:#f8fafc;display:flex;align-items:center;justify-content:center;overflow:hidden}
.prod-img-wrap img{width:100%;height:100%;object-fit:contain}
.prod-img-placeholder{font-size:42px;color:#cbd5e1}
.prod-info{padding:10px;flex:1;display:flex;flex-direction:column}
.prod-name{font-size:13px;font-weight:600;line-height:1.3;margin-bottom:6px;min-height:34px}
.prod-bottom{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:8px}
.prod-price{font-size:15px;font-weight:800;color:var(--primary)}
.prod-price.was{color:var(--muted);font-weight:500;font-size:12px;text-decoration:line-through}
.prod-sale-badge{
  position:absolute;top:8px;left:8px;
  background:var(--accent);color:#fff;
  font-size:10px;font-weight:700;
  padding:3px 8px;border-radius:6px;
}
.prod-out-badge{
  position:absolute;top:8px;left:8px;
  background:var(--muted);color:#fff;
  font-size:10px;font-weight:700;
  padding:3px 8px;border-radius:6px;
}
.prod-add-btn{
  background:var(--primary);color:#fff;border:none;
  width:32px;height:32px;border-radius:8px;
  font-size:18px;cursor:pointer;line-height:1;
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
}
.prod-add-btn:hover{background:var(--primary-d)}
.prod-add-btn:disabled{background:var(--muted);cursor:not-allowed}
.prod-skeleton{
  aspect-ratio:.8;
  background:linear-gradient(90deg,#eef2f7 0%,#f8fafc 50%,#eef2f7 100%);
  background-size:200% 100%;
  border-radius:var(--radius);
  animation:shimmer 1.5s infinite;
}
@keyframes shimmer{
  0%{background-position:200% 0}
  100%{background-position:-200% 0}
}

/* FOOTER */
.site-footer{
  margin-top:40px;padding:24px 16px;
  background:#1e293b;color:#cbd5e1;
  text-align:center;font-size:13px;
}
.site-footer a{color:#cbd5e1;text-decoration:underline}
.footer-mini{margin-top:6px;color:#64748b;font-size:11px}

/* Confettis quand on ajoute au panier (luxe touch) */
.confetti-piece{
  position:fixed;width:10px;height:10px;
  pointer-events:none;z-index:9998;
  border-radius:2px;
  animation:confettiFly 1.2s ease-out forwards;
}
@keyframes confettiFly{
  0%{transform:translate(0,0) rotate(0deg);opacity:1}
  100%{transform:translate(var(--cx),var(--cy)) rotate(var(--cr));opacity:0}
}

/* Hover ascenseur sur les chips catégories */
.cat-card{position:relative;overflow:hidden}
.cat-card::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(135deg,rgba(15,76,129,.08),transparent);
  opacity:0;transition:opacity .2s;
}
.cat-card:hover::after{opacity:1}
.cat-card:hover .cat-icon{transform:scale(1.15) rotate(-3deg);transition:transform .3s cubic-bezier(.2,.8,.2,1)}
.cat-icon{transition:transform .3s}

/* USPs : icône qui pulse subtilement */
.usp-icon{animation:gentlePulse 4s ease-in-out infinite}
.usp:nth-child(2) .usp-icon{animation-delay:1.3s}
.usp:nth-child(3) .usp-icon{animation-delay:2.6s}
@keyframes gentlePulse{
  0%,100%{transform:scale(1)}
  50%{transform:scale(1.08)}
}

/* ── BACK TO TOP — bouton flottant qui apparaît après 600px de scroll */
.back-to-top{
  position:fixed;bottom:20px;right:20px;z-index:90;
  width:48px;height:48px;border-radius:50%;
  background:#0f4c81;color:#fff;border:none;
  font-size:22px;font-weight:700;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 8px 24px rgba(15,76,129,.4),0 2px 8px rgba(0,0,0,.15);
  opacity:0;transform:scale(.6) translateY(20px);
  transition:opacity .3s,transform .3s cubic-bezier(.175,.885,.32,1.275);
  pointer-events:none;
}
.back-to-top.is-visible{opacity:1;transform:scale(1) translateY(0);pointer-events:auto}
.back-to-top:hover{background:#083866;transform:scale(1.08) translateY(0);box-shadow:0 12px 32px rgba(15,76,129,.5)}
.back-to-top:focus-visible{outline:2.5px solid #ffb800;outline-offset:3px}
@media(max-width:520px){
  .back-to-top{bottom:14px;right:14px;width:44px;height:44px}
}

/* ── CURSOR GLOW (desktop only) — halo bleu qui suit la souris */
.cursor-glow{
  position:fixed;top:0;left:0;
  width:380px;height:380px;
  pointer-events:none;z-index:9990;
  background:radial-gradient(circle,rgba(15,76,129,.18) 0%,rgba(255,107,53,.08) 30%,transparent 60%);
  border-radius:50%;
  transform:translate(-50%,-50%) scale(.4);
  opacity:0;
  transition:opacity .4s ease,transform .25s ease;
  mix-blend-mode:multiply;
  filter:blur(8px);
  will-change:transform,opacity;
}
.cursor-glow.is-active{opacity:1;transform:translate(-50%,-50%) scale(1)}
.cursor-glow.is-hover-cta{transform:translate(-50%,-50%) scale(1.6);background:radial-gradient(circle,rgba(255,184,0,.4) 0%,rgba(255,107,53,.2) 30%,transparent 60%)}
@media(hover:none){.cursor-glow{display:none}}

/* ── LOADING BAR (top) — fine ligne dorée qui s'anime pendant les requêtes */
.page-progress{
  position:fixed;top:0;left:0;height:3px;width:0;
  background:linear-gradient(90deg,#ffb800,#ff6b35,#10D9A8);
  z-index:9999;
  box-shadow:0 0 12px rgba(255,184,0,.7);
  transition:width .35s cubic-bezier(.2,.8,.2,1),opacity .4s;
  opacity:0;border-radius:0 2px 2px 0;
}
.page-progress.is-loading{opacity:1}

/* ── SplitText : préparation pour effet "letters fly in" */
.split-char{display:inline-block;will-change:transform,opacity}

/* TOAST */
.toast{
  position:fixed;bottom:20px;left:50%;transform:translateX(-50%);
  background:#1e293b;color:#fff;
  padding:12px 18px;border-radius:10px;
  font-size:14px;font-weight:500;
  display:none;z-index:999;
  box-shadow:0 8px 24px rgba(0,0,0,.25);
  max-width:90vw;
}
.toast.show{display:block;animation:toastIn .25s}
@keyframes toastIn{from{transform:translateX(-50%) translateY(20px);opacity:0}to{transform:translateX(-50%) translateY(0);opacity:1}}

/* Vide */
.empty-state{
  text-align:center;padding:40px 20px;
  color:var(--muted);font-size:14px;
  grid-column:1/-1;
}

/* ═══════════════════════════════════════════════════════════
 * v1.1.0 — APP SHELL : barre de navigation du bas (mobile)
 *          + refonte PANIER & COMMANDE premium + a11y
 * ═══════════════════════════════════════════════════════════ */

/* ─── BARRE DU BAS (mobile only, verre dépoli, safe-area iPhone) ─── */
.bottom-nav{
  position:fixed;left:0;right:0;bottom:0;z-index:1000;
  display:none; /* visible uniquement en mobile (media query plus bas) */
  align-items:stretch;justify-content:space-around;
  padding:6px 6px calc(6px + env(safe-area-inset-bottom));
  background:rgba(255,255,255,.82);
  backdrop-filter:blur(22px) saturate(1.4);-webkit-backdrop-filter:blur(22px) saturate(1.4);
  border-top:1px solid rgba(8,28,52,.08);
  box-shadow:0 -6px 24px rgba(8,28,52,.06);
}
.bnav-item{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  padding:8px 4px 4px;
  background:transparent;border:none;cursor:pointer;
  color:var(--muted);text-decoration:none;font-family:inherit;
  -webkit-tap-highlight-color:transparent;position:relative;
  transition:color .25s ease;
}
.bnav-item::before{ /* indicateur d'onglet actif (petit trait doré en haut) */
  content:'';position:absolute;top:0;left:50%;transform:translateX(-50%) scaleX(0);
  width:26px;height:3px;border-radius:0 0 3px 3px;background:var(--gold);
  transition:transform .3s cubic-bezier(.34,1.56,.64,1);
}
.bnav-icon{position:relative;display:inline-flex;align-items:center;justify-content:center}
.bnav-icon svg{width:24px;height:24px;display:block;transition:transform .3s cubic-bezier(.34,1.56,.64,1)}
.bnav-label{font-size:10.5px;font-weight:600;letter-spacing:.2px}
.bnav-item:active .bnav-icon svg{transform:scale(.86)}
.bnav-item.is-active{color:var(--primary)}
.bnav-item.is-active::before{transform:translateX(-50%) scaleX(1)}
.bnav-item.is-active .bnav-icon svg{transform:translateY(-1px)}
.bnav-badge{
  position:absolute;top:-7px;right:-10px;
  min-width:17px;height:17px;padding:0 4px;
  background:var(--accent);color:#fff;
  font-size:10px;font-weight:800;line-height:17px;text-align:center;
  border-radius:9px;border:1.5px solid #fff;
  box-shadow:0 2px 6px rgba(255,107,53,.45);
}
.bnav-badge[hidden]{display:none}
@keyframes bnavPulse{0%{transform:scale(1)}40%{transform:scale(1.35)}100%{transform:scale(1)}}
.bnav-badge.pulse{animation:bnavPulse .5s cubic-bezier(.34,1.56,.64,1)}
@media(max-width:899px){
  .bottom-nav{display:flex}
  body{padding-bottom:calc(64px + env(safe-area-inset-bottom))}
  .back-to-top{bottom:calc(74px + env(safe-area-inset-bottom))}
  .toast{bottom:calc(76px + env(safe-area-inset-bottom))}
  .install-cta{bottom:calc(74px + env(safe-area-inset-bottom))}
}

/* ─── PAGE PANIER premium ─── */
.cart-page{max-width:760px;margin:0 auto;padding:120px 24px 80px}
@media(max-width:899px){.cart-page{padding:88px 18px 40px}}
.cart-head{margin-bottom:32px}
.cart-title{
  font-family:'Cormorant Garamond',Georgia,serif;
  font-size:clamp(40px,7vw,72px);font-weight:500;letter-spacing:-2px;line-height:1;color:var(--text);
}
.cart-title em{font-style:italic;color:var(--gold)}
.cart-count-line{
  margin-top:8px;font-size:12px;letter-spacing:2px;text-transform:uppercase;color:var(--muted);
  font-family:ui-monospace,'Cascadia Code',monospace;
}
.cart-items{display:flex;flex-direction:column;gap:14px}
.cart-item{
  display:flex;gap:16px;align-items:center;
  background:var(--card);border:1px solid var(--border);border-radius:18px;padding:14px;
  box-shadow:0 2px 10px rgba(8,28,52,.04);
  transition:box-shadow .25s,transform .35s,opacity .35s;
}
.cart-item:hover{box-shadow:0 10px 30px rgba(8,28,52,.08)}
.cart-item.removing{opacity:0;transform:translateX(40px)}
.cart-item-img{
  width:84px;height:84px;flex-shrink:0;border-radius:12px;overflow:hidden;
  background:linear-gradient(135deg,#f8fafc,#eef2f7);
  display:flex;align-items:center;justify-content:center;
}
.cart-item-img img{width:100%;height:100%;object-fit:contain;padding:8px}
.cart-item-main{flex:1;min-width:0}
.cart-item-name{
  font-size:15px;font-weight:600;line-height:1.35;color:var(--text);margin-bottom:6px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.cart-item-unit{font-size:13px;color:var(--muted)}
.cart-item-right{display:flex;flex-direction:column;align-items:flex-end;gap:10px;flex-shrink:0}
.cart-item-line{font-weight:800;color:var(--primary);font-size:16px;font-variant-numeric:tabular-nums}
.qty-stepper{display:inline-flex;align-items:center;gap:2px;border:1px solid var(--border);border-radius:999px;padding:3px;background:#fff}
.qty-btn{
  width:30px;height:30px;border-radius:50%;border:none;background:transparent;cursor:pointer;
  color:var(--text);font-size:18px;line-height:1;display:flex;align-items:center;justify-content:center;
  transition:background .2s,color .2s;
}
.qty-btn:hover{background:var(--primary);color:#fff}
.qty-val{min-width:26px;text-align:center;font-weight:700;font-variant-numeric:tabular-nums}
.cart-rm{
  background:transparent;border:none;cursor:pointer;color:var(--muted);
  font-size:12px;letter-spacing:.3px;display:inline-flex;align-items:center;gap:5px;
  transition:color .2s;padding:2px 0;
}
.cart-rm:hover{color:var(--danger)}
.cart-rm svg{width:13px;height:13px}
.cart-summary{
  position:sticky;bottom:16px;margin-top:24px;
  background:var(--card);border:1px solid var(--border);border-radius:20px;padding:22px;
  box-shadow:0 14px 40px rgba(8,28,52,.12);
}
.cart-summary-row{display:flex;justify-content:space-between;align-items:center;font-size:14px;color:var(--muted);margin-bottom:10px}
.cart-summary-total{display:flex;justify-content:space-between;align-items:baseline;padding-top:14px;margin-bottom:18px;border-top:1px solid var(--border)}
.cart-summary-total span{font-size:13px;text-transform:uppercase;letter-spacing:1.5px;color:var(--muted);font-family:ui-monospace,monospace}
.cart-summary-total strong{font-family:'Cormorant Garamond',Georgia,serif;font-size:40px;font-weight:600;color:var(--text);letter-spacing:-1px;font-variant-numeric:tabular-nums}
.cart-summary-total strong .cur{font-style:italic;color:var(--gold);font-size:24px}
.cart-checkout-btn{
  width:100%;display:flex;align-items:center;justify-content:center;gap:12px;
  padding:18px 22px;border:none;border-radius:14px;cursor:pointer;text-decoration:none;
  background:var(--text);color:#fff;
  font-family:inherit;font-size:13px;font-weight:700;letter-spacing:1.8px;text-transform:uppercase;
  position:relative;overflow:hidden;box-shadow:0 6px 18px rgba(8,28,52,.18);
  transition:gap .25s,box-shadow .25s;
}
.cart-checkout-btn::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,var(--primary),var(--gold));opacity:0;transition:opacity .35s}
.cart-checkout-btn:hover{gap:20px;box-shadow:0 12px 30px rgba(255,184,0,.3);color:#fff}
.cart-checkout-btn:hover::before{opacity:1}
.cart-checkout-btn>*{position:relative;z-index:1}
.cart-reassure{display:flex;justify-content:center;gap:18px;margin-top:14px;flex-wrap:wrap}
.cart-reassure span{font-size:11px;color:var(--muted);display:inline-flex;align-items:center;gap:5px}
.cart-reassure svg{width:13px;height:13px;color:var(--gold)}
.cart-empty{text-align:center;padding:70px 20px}
.cart-empty-ico{width:80px;height:80px;margin:0 auto 22px;color:var(--border)}
.cart-empty-ico svg{width:100%;height:100%}
.cart-empty h2{font-family:'Cormorant Garamond',Georgia,serif;font-size:34px;font-weight:500;color:var(--text);margin-bottom:10px}
.cart-empty p{color:var(--muted);margin-bottom:26px}

/* ─── PAGE COMMANDE premium ─── */
.checkout-page{max-width:760px;margin:0 auto;padding:120px 24px 80px}
@media(max-width:899px){.checkout-page{padding:88px 18px 40px}}
.checkout-title{font-family:'Cormorant Garamond',Georgia,serif;font-size:clamp(40px,7vw,68px);font-weight:500;letter-spacing:-2px;line-height:1;margin-bottom:8px;color:var(--text)}
.checkout-title em{font-style:italic;color:var(--gold)}
.checkout-steps{font-size:12px;letter-spacing:2px;text-transform:uppercase;color:var(--muted);font-family:ui-monospace,monospace;margin-bottom:34px}
.checkout-card{background:var(--card);border:1px solid var(--border);border-radius:20px;padding:24px;margin-bottom:18px;box-shadow:0 2px 10px rgba(8,28,52,.04)}
.checkout-card h3{font-size:12px;letter-spacing:2px;text-transform:uppercase;color:var(--muted);font-family:ui-monospace,monospace;margin-bottom:18px;display:flex;align-items:center;gap:10px}
.checkout-card h3 .step-num{width:22px;height:22px;border-radius:50%;background:var(--primary);color:#fff;font-size:11px;display:inline-flex;align-items:center;justify-content:center;font-family:inherit}
.field{margin-bottom:16px}
.field:last-child{margin-bottom:0}
.field label{display:block;font-size:12px;font-weight:600;color:var(--text);margin-bottom:7px;letter-spacing:.2px}
.field input,.field select,.field textarea{
  width:100%;padding:13px 15px;border:1.5px solid var(--border);border-radius:12px;
  font-family:inherit;font-size:15px;color:var(--text);background:#fdfdfe;
  transition:border-color .2s,box-shadow .2s,background .2s;
}
.field input::placeholder,.field textarea::placeholder{color:#aab4c0}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--gold);background:#fff;box-shadow:0 0 0 4px rgba(255,184,0,.12)}
.field-row{display:grid;grid-template-columns:1fr 1.8fr;gap:12px}
.field.has-error input,.field.has-error select{border-color:var(--danger);box-shadow:0 0 0 4px rgba(220,38,38,.10)}
.field-msg{color:var(--danger);font-size:12px;margin-top:6px;display:none}
.field.has-error .field-msg{display:block}
.checkout-recap-row{display:flex;justify-content:space-between;font-size:14px;padding:7px 0;color:var(--text)}
.checkout-recap-row .q{color:var(--muted)}
.checkout-recap-total{display:flex;justify-content:space-between;align-items:baseline;border-top:1px solid var(--border);margin-top:8px;padding-top:12px}
.checkout-recap-total span{font-size:12px;text-transform:uppercase;letter-spacing:1.5px;color:var(--muted);font-family:ui-monospace,monospace}
.checkout-recap-total strong{font-family:'Cormorant Garamond',Georgia,serif;font-size:32px;font-weight:600;color:var(--primary);font-variant-numeric:tabular-nums}
.checkout-submit{
  width:100%;display:flex;align-items:center;justify-content:center;gap:12px;margin-top:6px;
  padding:18px 22px;border:none;border-radius:14px;cursor:pointer;
  background:var(--text);color:#fff;font-family:inherit;font-size:13px;font-weight:700;letter-spacing:1.8px;text-transform:uppercase;
  position:relative;overflow:hidden;box-shadow:0 6px 18px rgba(8,28,52,.18);transition:gap .25s,box-shadow .25s;
}
.checkout-submit::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,var(--primary),var(--gold));opacity:0;transition:opacity .35s}
.checkout-submit:hover:not(:disabled){gap:20px;box-shadow:0 12px 30px rgba(255,184,0,.3)}
.checkout-submit:hover:not(:disabled)::before{opacity:1}
.checkout-submit:disabled{opacity:.6;cursor:wait}
.checkout-submit>*{position:relative;z-index:1}
.checkout-note{text-align:center;color:var(--muted);font-size:12px;margin-top:12px}
.order-done{max-width:560px;margin:0 auto;padding:120px 24px;text-align:center}
.order-done-check{width:84px;height:84px;margin:0 auto 22px;border-radius:50%;background:rgba(5,150,105,.12);display:flex;align-items:center;justify-content:center;animation:donepop .55s cubic-bezier(.34,1.56,.64,1)}
.order-done-check svg{width:42px;height:42px;color:var(--success)}
@keyframes donepop{from{transform:scale(.4);opacity:0}to{transform:scale(1);opacity:1}}
.order-done h1{font-family:'Cormorant Garamond',Georgia,serif;font-size:44px;font-weight:500;color:var(--text);margin-bottom:12px}
.order-done p{color:var(--muted);margin-bottom:10px}
.order-num{font-weight:700;color:var(--text)}

/* ─── Icône SVG dans le header (remplace les emojis 🔍 🛒) ─── */
.hdr-ico{width:20px;height:20px;display:block;pointer-events:none}

/* ─── prefers-reduced-motion : on coupe tout le superflu ─── */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.05ms !important;scroll-behavior:auto !important;
  }
  .boutique-particles,.hero-pro::before,.hero-pro::after,.hero-49n-img,.bt-word,.brand-marquee-track,.marquee-track{animation:none !important}
}