/* ============================================================
   WAKATI — Thème visuel 2026 « Lagon & Laiton »
   ------------------------------------------------------------
   Feuille chargée APRÈS les styles d'origine de chaque page :
   elle ne fait que redéfinir l'apparence. Aucun identifiant,
   aucune classe utilisée par le JavaScript n'est renommé, le
   backend (API Vercel, Supabase, admin) n'est pas concerné.
   Structure de la page d'accueil :
   header fixe + recherche centrale, héro carrousel, tuiles
   catégories, carrousel produits, panneaux éditoriaux empilés
   au scroll, bloc « univers » à colonne collante.
   ============================================================ */

:root{
  --w-ink:#0F1F22;        /* nuit de lagon : textes, fonds sombres */
  --w-ink-2:#18322F;
  --w-lagoon:#0F5C5A;     /* action principale */
  --w-lagoon-2:#167A75;
  --w-sand:#F4EEE4;       /* fond éditorial */
  --w-sand-2:#E8DECD;
  --w-brass:#A8834C;      /* filets, accents premium */
  --w-coral:#D9623B;      /* promotions uniquement */
  --w-paper:#FFFFFF;
  --w-muted:#5D6A6B;
  --w-line:rgba(15,31,34,.12);
  --w-sans:"Jost","Helvetica Neue",Arial,sans-serif;
  --w-serif:"Cormorant Garamond",Georgia,serif;
  --w-ease:cubic-bezier(.25,.1,.25,1);
  --w-hdr:76px;

  /* Les variables historiques pointent vers la nouvelle palette :
     tout le CSS existant (panier, compte, fiches) suit automatiquement. */
  --font:var(--w-sans);
  --navy:var(--w-ink);
  --navy-deep:#0A1618;
  --lagoon:var(--w-lagoon);
  --lagoon-light:#9CC9C3;
  --sand:var(--w-sand);
  --coral:var(--w-coral);
  --coral-strong:#B84B27;
  --ink:var(--w-ink);
  --paper:var(--w-paper);
  --line:var(--w-line);
}

html{scroll-padding-top:calc(var(--w-hdr) + 8px);}
body{font-family:var(--w-sans); color:var(--w-ink); font-weight:400; letter-spacing:.005em;}
h1,h2,h3,.display,.mono{font-family:var(--w-sans);}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms !important; transition-duration:.01ms !important; scroll-behavior:auto !important;}
}

/* ---------- Typographie commune ---------- */
.w-eyebrow{display:block; font-size:.72rem; font-weight:500; letter-spacing:.22em; text-transform:uppercase; color:var(--w-brass);}
.w-title{font-weight:500; font-size:clamp(1.5rem,2.6vw,2.25rem); line-height:1.15; letter-spacing:-.01em; color:var(--w-ink); margin:0;}
.w-title em{font-family:var(--w-serif); font-style:italic; font-weight:500; font-size:1.12em;}
.w-lead{color:var(--w-muted); line-height:1.7; font-size:1rem; max-width:60ch;}
/* Boutons : voile clair qui glisse de gauche à droite au survol (1 s) */
.w-btn,.w-hero .hm .hm-btn,.add-cart-btn,.btn-primary{position:relative; overflow:hidden; isolation:isolate;}
.w-btn::before,.w-hero .hm .hm-btn::before,.add-cart-btn::before,.btn-primary::before{content:""; position:absolute; inset:0; z-index:-1; background:currentColor; opacity:.14; transform:translateX(-101%); transition:transform .6s cubic-bezier(.56,0,0,.99); pointer-events:none;}
.w-btn{display:inline-flex; align-items:center; gap:10px; padding:12px 24px; border-radius:999px; background:var(--w-lagoon); color:#fff; font-size:.9rem; font-weight:500; letter-spacing:.02em; border:1px solid var(--w-lagoon); transition:background .3s var(--w-ease), color .3s var(--w-ease), border-color .3s var(--w-ease); cursor:pointer;}
.w-btn.ghost{background:transparent; color:var(--w-ink); border-color:var(--w-ink);}
.w-btn.light{background:#fff; color:var(--w-ink); border-color:#fff;}
/* Liens texte : soulignement qui se trace de gauche à droite (0,6 s) */
.w-link{display:inline-flex; align-items:center; gap:8px; font-size:.88rem; font-weight:500; color:var(--w-ink); padding:2px 0 3px; background:linear-gradient(currentColor,currentColor) 0 100% / 0 1px no-repeat; transition:background-size .6s ease-out;}
.w-link::after{content:"→";}
button.w-link{border:0; font-family:inherit; cursor:pointer; background-color:transparent;}
@media (hover:hover) and (min-width:1024px){
  .w-btn:hover::before,.w-hero .hm:hover .hm-btn::before,.add-cart-btn:hover::before,.btn-primary:hover::before{transform:translateX(0); transition-duration:1s;}
  .w-btn:hover{background:var(--w-ink); border-color:var(--w-ink);}
  .w-btn.ghost:hover{background:transparent; color:var(--w-ink);}
  .w-btn.light:hover{background:#fff; color:var(--w-ink);}
  .w-link:hover,.w-article:hover .w-link{background-size:100% 1px;}
}

/* Apparition au scroll (classe posée par wakati-ui.js) */
[data-reveal]{opacity:0; transform:translateY(28px); transition:opacity .9s var(--w-ease), transform .9s var(--w-ease);}
[data-reveal].is-in{opacity:1; transform:none;}
.no-js [data-reveal]{opacity:1; transform:none;}

/* ============================================================
   HEADER — logo à gauche, recherche centrale, actions à droite
   ============================================================ */
.site-header{position:sticky; top:0; z-index:60; background:rgba(255,255,255,.96); backdrop-filter:saturate(1.4) blur(10px); -webkit-backdrop-filter:saturate(1.4) blur(10px); border-bottom:1px solid transparent; transition:border-color .3s, box-shadow .3s, transform .45s var(--w-ease);}
/* Le header s'efface quand on descend, revient dès qu'on remonte */
.site-header.is-hidden{transform:translateY(-100%); box-shadow:none;}
.site-header.is-scrolled{border-bottom-color:var(--w-line); box-shadow:0 6px 24px rgba(15,31,34,.06);}
.site-header .hdr-inner{max-width:1600px; height:var(--w-hdr); padding:0 28px; grid-template-columns:auto 1fr auto; gap:28px;}
.site-header .hdr-left{gap:10px;}
.site-header .hdr-center{justify-self:start; gap:12px;}
.site-header .hdr-center img{height:34px;}
.site-header .hdr-center .brand{font-size:1.5rem; font-weight:500; letter-spacing:.16em; text-transform:uppercase;}
.site-header .hdr-center .brand small{font-family:var(--w-sans); font-size:.56rem; letter-spacing:.32em; font-weight:400; color:var(--w-brass); margin-top:4px;}
.hdr-searchbar{justify-self:center; width:min(100%,560px); display:flex; align-items:center; gap:12px; padding:10px 2px; background:none; border:0; border-bottom:1px solid var(--w-ink); color:var(--w-muted); font-size:.95rem; text-align:left; cursor:text;}
.hdr-searchbar svg{width:19px; height:19px; stroke:var(--w-ink); stroke-width:1.6; fill:none; flex:0 0 19px;}
.site-header .icon-btn{border-radius:50%;}
.site-header .icon-btn svg{stroke-width:1.5;}
.hdr-cart-badge{background:var(--w-lagoon);}
.hdr-nav{border-top:1px solid var(--w-line);}
.hdr-nav-inner{max-width:1600px; margin:0 auto; padding:0 28px; display:flex; gap:34px; justify-content:center; overflow-x:auto; scrollbar-width:none;}
.hdr-nav-inner::-webkit-scrollbar{display:none;}
.hdr-nav button{position:relative; background:none; padding:14px 0; font-size:.86rem; font-weight:400; color:var(--w-ink); white-space:nowrap; letter-spacing:.03em;}
.hdr-nav button::after{content:""; position:absolute; left:0; right:0; bottom:8px; height:1px; background:currentColor; transform:scaleX(0); transform-origin:left; transition:transform .35s var(--w-ease);}
.hdr-nav button:hover::after{transform:scaleX(1);}
.hdr-nav .is-promo{color:var(--w-coral);}
.site-header #hdr-search-btn{display:none;}
@media(max-width:900px){
  :root{--w-hdr:62px;}
  .site-header .hdr-inner{grid-template-columns:auto 1fr auto; gap:6px; padding:0 8px;}
  .site-header .hdr-center{justify-self:center;}
  .site-header .hdr-center .brand{font-size:1.15rem; letter-spacing:.12em;}
  .site-header .hdr-center img{height:28px;}
  .hdr-searchbar{display:none;}
  .site-header #hdr-search-btn{display:flex;}
  .hdr-nav-inner{justify-content:flex-start; gap:24px; padding:0 16px;}
}

/* Menu tiroir + recherche */
/* Le tiroir reste clair (fond blanc défini dans index.html) */
.m-item,.sub-item{font-family:var(--w-sans); font-weight:400; letter-spacing:.02em;}
.drawer-head .d-title,.sub-title{font-family:var(--w-sans); letter-spacing:.18em; text-transform:uppercase; font-size:.85rem;}
.see-all{background:var(--w-ink); color:#fff; font-family:var(--w-sans); font-weight:500;}
.search-inner input{border-radius:999px; border-color:var(--w-ink); padding:14px 22px;}
.promo-banner{background:var(--w-ink);}
.promo-banner-track{font-weight:400; letter-spacing:.12em; text-transform:uppercase; font-size:.75rem;}

/* ============================================================
   HÉRO — carrousel plein cadre (translate3d + autoplay)
   Les 4 modules administrables (#hm-1…#hm-4) deviennent des slides.
   ============================================================ */
.w-hero{position:relative; max-width:none; padding:0; margin:0; overflow:hidden; background:var(--w-ink);}
.w-hero .home-mods{display:flex; max-width:none; margin:0; padding:0; gap:0; grid-template-columns:none; grid-template-rows:none; height:clamp(420px,57vh,580px); transition:transform .8s var(--w-ease); will-change:transform; touch-action:pan-y;}
.w-hero.is-dragging .home-mods{transition:none;}
.w-hero .hm{flex:0 0 100%; height:100%; min-height:0; border-radius:0; position:relative; overflow:hidden; display:block; cursor:pointer; grid-column:auto; grid-row:auto; aspect-ratio:auto;}
.w-hero .hm img.hm-bg{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transform:scale(1.08); transition:transform 7s linear;}
.w-hero .hm.is-active img.hm-bg{transform:scale(1);}
.w-hero .hm .hm-shade{position:absolute; inset:0; background:linear-gradient(90deg, rgba(10,22,24,.72) 0%, rgba(10,22,24,.25) 48%, rgba(10,22,24,0) 70%), linear-gradient(0deg, rgba(10,22,24,.45), rgba(10,22,24,0) 40%);}
.w-hero .hm .hm-inner{position:absolute; left:clamp(24px,7vw,120px); bottom:clamp(56px,14vh,140px); top:auto; right:auto; transform:none; display:flex; flex-direction:column; align-items:flex-start; gap:16px; max-width:520px; text-align:left; padding:0;}
.w-hero .hm .hm-inner > *{opacity:0; transform:translateY(18px); transition:opacity .7s var(--w-ease), transform .7s var(--w-ease);}
.w-hero .hm.is-active .hm-inner > *{opacity:1; transform:none;}
.w-hero .hm.is-active .hm-inner > *:nth-child(2){transition-delay:.12s;}
.w-hero .hm.is-active .hm-inner > *:nth-child(3){transition-delay:.24s;}
.w-hero .hm.is-active .hm-inner > *:nth-child(4){transition-delay:.36s;}
.w-hero .hm .w-slide-eyebrow{font-size:.74rem; letter-spacing:.26em; text-transform:uppercase; color:#E4CFA6;}
.w-hero .hm .w-slide-title{font-size:clamp(1.9rem,4vw,3.3rem); line-height:1.05; font-weight:400; color:#fff; letter-spacing:-.01em;}
.w-hero .hm .w-slide-title em{font-family:var(--w-serif); font-style:italic;}
.w-hero .hm .hm-logo{max-height:64px; max-width:240px; width:auto; filter:brightness(0) invert(1); margin:0;}
.w-hero .hm .hm-btn{position:static; display:inline-flex; padding:12px 26px; border-radius:999px; background:#fff; color:var(--w-ink); font-size:.88rem; font-weight:500; letter-spacing:.03em; border:1px solid #fff; transition:background .3s, color .3s;}
.w-hero .hm .promo-eyebrow{font-size:.74rem; letter-spacing:.26em; text-transform:uppercase; color:#F2A487; position:static;}
.w-hero .hm .promo-title{font-size:clamp(1.9rem,4vw,3.3rem); line-height:1.05; font-weight:400; color:#fff; position:static;}
.w-hero .hm .promo-tag{position:absolute; top:28px; right:28px; left:auto; z-index:2; background:var(--w-coral); color:#fff; font-weight:500; font-size:1rem; border-radius:999px; padding:10px 16px;}
.w-hero .hm.light .hm-shade{background:linear-gradient(90deg, rgba(255,255,255,.75), rgba(255,255,255,0) 65%);}
.w-hero .hm.light .w-slide-title,.w-hero .hm.light .promo-title{color:var(--w-ink);}
.w-hero .hm.light .hm-logo{filter:none;}
.w-hero .hm.light .hm-btn{background:var(--w-ink); color:#fff; border-color:var(--w-ink);}
/* Slide « Nouveautés » : le mini-slider existant occupe toute la slide */
.w-hero .hm.mod4 .hm-slider{position:absolute; inset:0; height:100%; border-radius:0;}
.w-hero .hm.mod4 .hm-slide{position:absolute; inset:0;}
.w-hero .hm.mod4 .hm-slide .hm-inner{opacity:1;}
.w-hero .hm.mod4 .hm-logo-txt{font-size:clamp(1.6rem,3.4vw,2.8rem) !important; color:#fff; font-weight:400;}
.w-hero .hm .nouv-badge{position:absolute; z-index:3; left:clamp(24px,7vw,120px); top:auto; bottom:calc(clamp(56px,14vh,140px) + 70px); background:none; color:#E4CFA6; padding:0; font-size:.74rem; letter-spacing:.26em; text-transform:uppercase; font-weight:400; border-radius:0;}
.w-hero .hm-dots{left:clamp(24px,7vw,120px); right:auto; bottom:clamp(28px,7vh,64px); transform:none;}

.w-hero-ui{position:absolute; left:0; right:0; bottom:28px; z-index:5; display:flex; align-items:center; justify-content:flex-end; gap:18px; padding:0 clamp(24px,4vw,56px); pointer-events:none;}
.w-hero-dots{display:flex; gap:10px; pointer-events:auto;}
.w-hero-dots button{position:relative; width:42px; height:2px; padding:0; background:rgba(255,255,255,.35); overflow:hidden; border-radius:2px;}
.w-hero-dots button::after{content:""; position:absolute; inset:0; background:#fff; transform:scaleX(0); transform-origin:left;}
.w-hero-dots button.is-active::after{animation:w-progress var(--w-autoplay,6s) linear forwards;}
.w-hero.is-paused .w-hero-dots button.is-active::after{animation-play-state:paused;}
@keyframes w-progress{to{transform:scaleX(1);}}
.w-hero-arrows{display:flex; gap:8px; pointer-events:auto;}
.w-hero-arrows button{width:44px; height:44px; border-radius:50%; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.5); color:#fff; display:flex; align-items:center; justify-content:center; transition:background .3s;}
.w-hero-arrows button:hover{background:rgba(255,255,255,.3);}
.w-hero-arrows svg{width:18px; height:18px; stroke:currentColor; fill:none; stroke-width:1.6;}
@media(max-width:700px){
  .w-hero .home-mods{height:76vh; min-height:480px;}
  .w-hero .hm .hm-shade{background:linear-gradient(0deg, rgba(10,22,24,.82) 0%, rgba(10,22,24,.2) 55%, rgba(10,22,24,0) 80%);}
  .w-hero .hm .hm-inner{left:22px; right:22px; bottom:84px;}
  .w-hero-ui{justify-content:space-between; bottom:24px;}
  .w-hero-arrows{display:none;}
}

/* ============================================================
   SECTIONS — gabarit commun
   ============================================================ */
#site-screen section.w-sec{max-width:none; padding:clamp(56px,8vw,112px) 0; margin:0;}
.w-wrap{max-width:1440px; margin:0 auto; padding:0 clamp(16px,4vw,56px);}
.w-sec-head{display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin-bottom:clamp(28px,4vw,48px);}
.w-sec-head .w-eyebrow{margin-bottom:12px;}

/* Tuiles catégories plein écran
   - ordinateur : accordéon — la tuile survolée passe de 1/3 à 1/2 de la largeur,
     son titre remonte et le bouton « Découvrir » surgit par le bas ;
   - smartphone : chaque tuile est collante (100vh) et la suivante glisse par-dessus,
     le bouton reste visible en bas. */
.w-tiles{--w-tile-ease:cubic-bezier(.56,0,0,.99); background:var(--w-paper);}
.w-tile{position:relative; display:block; overflow:hidden; background:var(--w-ink); cursor:pointer; text-align:center; padding:0; border:0; width:100%; color:#fff;}
.w-tile img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;}
.w-tile::before{content:""; position:absolute; inset:0; z-index:1; background:linear-gradient(0deg, rgba(10,22,24,.62), rgba(10,22,24,0) 45%); pointer-events:none;}
.w-tile-body{position:absolute; z-index:2; left:16px; right:16px; bottom:40px; display:flex; flex-direction:column; align-items:center; gap:18px;}
.w-tile-label{font-size:clamp(1.25rem,2vw,1.75rem); font-weight:500; line-height:1.25; letter-spacing:.005em; text-shadow:0 1px 12px rgba(0,0,0,.25);}
.w-tile-label small{display:block; font-size:.68rem; font-weight:400; letter-spacing:.22em; text-transform:uppercase; color:#E4CFA6; margin-bottom:8px;}
.w-tile-cta{position:relative; overflow:hidden; display:flex; align-items:center; justify-content:center; width:min(312px,100%); height:52px; background:#000; color:#fff; font-size:.8rem; letter-spacing:.14em; text-transform:uppercase;}
.w-tile-cta::before{content:""; position:absolute; inset:0; background:#fff; opacity:.2; transform:translateX(-100%); transition:transform .6s var(--w-tile-ease);}
@media (min-width:1024px){
  .w-tiles{display:flex; gap:8px; height:100vh; min-height:560px; max-height:1000px;}
  .w-tile{flex:1 1 0; min-width:0; transition:flex-grow 1s var(--w-tile-ease);}
  .w-tile:hover,.w-tile:focus-visible{flex-grow:2;}
  /* Au repos le bouton est sous le cadre : le titre est seul en bas */
  .w-tile-body{transform:translateY(70px); transition:transform .6s var(--w-tile-ease);}
  .w-tile-cta{opacity:0; transform:translateY(60px); transition:opacity .6s ease-out, transform .6s var(--w-tile-ease);}
  .w-tile:hover .w-tile-body,.w-tile:focus-visible .w-tile-body{transform:none;}
  .w-tile:hover .w-tile-cta,.w-tile:focus-visible .w-tile-cta{opacity:1; transform:none;}
  .w-tile-cta:hover::before{transform:translateX(0); transition-duration:1s;}
}
@media (max-width:1023px){
  .w-tiles{display:grid; grid-template-columns:1fr; row-gap:160px; padding:0;}
  .w-tile{position:sticky; top:0; height:100vh; height:100svh;}
  .w-tile-body{left:16px; right:16px; bottom:24px;}
  .w-tile-cta{width:100%;}
}

/* Intro éditoriale (équivalent du H1 d'accueil) */
.w-intro{text-align:center; max-width:780px; margin:0 auto;}
.w-intro h1{font-size:clamp(1.6rem,3vw,2.6rem); font-weight:400; line-height:1.2; margin:14px 0 16px;}
.w-intro h1 em{font-family:var(--w-serif); font-style:italic;}
.w-intro p{color:var(--w-muted); line-height:1.75;}

/* ============================================================
   PRODUITS DU MOMENT — rail horizontal avec flèches
   ============================================================ */
#site-screen .featured-section{max-width:none; padding:clamp(56px,8vw,104px) clamp(16px,4vw,56px); background:var(--w-sand);}
.featured-head{text-align:left; padding:0; max-width:1440px; margin:0 auto 32px; display:flex; justify-content:space-between; align-items:flex-end; gap:16px;}
.featured-head .eyebrow{color:var(--w-brass); font-size:.72rem; letter-spacing:.22em; text-transform:uppercase; display:block; margin-bottom:12px;}
#site-screen .featured-head h2{text-transform:none; font-weight:500; font-size:clamp(1.5rem,2.6vw,2.25rem); letter-spacing:-.01em;}
.featured-grid{max-width:1440px; margin:0 auto; display:flex; gap:20px; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; scroll-behavior:smooth; padding-bottom:4px;}
.featured-grid::-webkit-scrollbar{display:none;}
.featured-grid > *{flex:0 0 calc((100% - 60px)/4); scroll-snap-align:start;}
@media(max-width:1100px){.featured-grid > *{flex-basis:calc((100% - 40px)/3);}}
@media(max-width:860px){.featured-grid > *{flex-basis:78%;}}
.featured-card{border-radius:0; box-shadow:none; background:#fff; transition:none;}
.featured-card:hover{transform:none; box-shadow:none;}
.featured-media{background:#fff; overflow:hidden;}
.featured-media img{transition:transform .6s;}
@media (hover:hover) and (min-width:1024px){
  .featured-card:hover .featured-media img,.card:hover .card-media img,.w-article:hover .w-article-media img{transform:scale(1.05); transition:transform .6s ease-out;}
}
.featured-eyebrow{font-family:var(--w-sans); font-weight:500; color:var(--w-brass); letter-spacing:.2em;}
.featured-name{font-weight:500;}
.featured-price{font-weight:500;}
.w-rail-arrows{display:flex; gap:8px;}
.w-rail-arrows button{width:44px; height:44px; border-radius:50%; border:1px solid var(--w-ink); background:transparent; color:var(--w-ink); display:flex; align-items:center; justify-content:center; transition:background .3s, color .3s;}
.w-rail-arrows button:hover{background:var(--w-ink); color:#fff;}
.w-rail-arrows svg{width:18px; height:18px; stroke:currentColor; fill:none; stroke-width:1.6;}

/* ============================================================
   CATALOGUE
   ============================================================ */
#site-screen section#catalogue{max-width:1440px; padding:clamp(56px,8vw,104px) clamp(16px,4vw,56px);}
#site-screen .section-head{max-width:720px;}
#site-screen .section-head .eyebrow{color:var(--w-brass); font-size:.72rem; letter-spacing:.22em; text-transform:uppercase; display:block; margin-bottom:12px;}
#site-screen .section-head h2{text-transform:none; font-weight:500; font-size:clamp(1.5rem,2.6vw,2.25rem); letter-spacing:-.01em;}
#site-screen .section-head p{color:var(--w-muted); line-height:1.75;}
.gender-toggle{gap:0; border-bottom:1px solid var(--w-line);}
.gender-btn{border:0; border-radius:0; background:transparent; font-weight:400; padding:14px 22px; position:relative; color:var(--w-muted);}
.gender-btn::after{content:""; position:absolute; left:14px; right:14px; bottom:-1px; height:2px; background:var(--w-ink); transform:scaleX(0); transition:transform .35s var(--w-ease);}
.gender-btn.active,.gender-btn:hover{background:transparent; color:var(--w-ink); border-color:transparent;}
.gender-btn.active::after{transform:scaleX(1);}
.cc-btn{border-radius:999px; font-weight:400;}
.grid{gap:clamp(12px,1.6vw,24px);}
.card{border:0; border-radius:0; background:transparent; transition:none;}
.card:hover{transform:none; box-shadow:none;}
.card-media{background:var(--w-sand) !important; border-radius:0;}
.card-media img{mix-blend-mode:multiply; transition:transform .6s var(--w-ease);}
.card:hover .card-media img{transform:scale(1.05);}
.card-body{padding:16px 2px 4px;}
.card-brand{font-family:var(--w-sans); color:var(--w-brass); font-weight:500; letter-spacing:.2em;}
.card-title{font-weight:500; font-family:var(--w-sans);}
.card-price{font-weight:500; font-family:var(--w-sans);}
.spec-pill{border-radius:999px; background:transparent; border:1px solid var(--w-line);}
.add-cart-btn{border-radius:999px; background:var(--w-ink); font-weight:500; letter-spacing:.02em; transition:background .3s;}
.add-cart-btn:hover{background:var(--w-lagoon);}
.card-tag,.promo-tag{border-radius:999px; font-weight:500;}
.catalog-pagination button{border-radius:999px;}
.catalog-pagination button.active{background:var(--w-ink); border-color:var(--w-ink);}
.filter-drawer .fd-apply{border-radius:999px; background:var(--w-lagoon);}
.fd-chip{border-radius:999px;}
.fd-chip.active{background:var(--w-ink); border-color:var(--w-ink);}

/* ============================================================
   PANNEAUX ÉDITORIAUX EMPILÉS (position:sticky, CSS pur)
   Chaque panneau 100vh se colle en haut ; le suivant glisse
   par-dessus. Un index 01/02/03 suit le panneau actif.
   ============================================================ */
#site-screen section.w-stack{max-width:none; padding:0; margin:0; position:relative; background:var(--w-ink);}
/* Index vertical collé au bord droit, texte tourné à 90° (lecture de bas en haut) */
.w-stack-index{position:sticky; top:96px; z-index:4; height:0; pointer-events:none;}
.w-stack-index ol{list-style:none; margin:0 0 0 auto; padding:0; display:flex; flex-direction:column; gap:22px; pointer-events:auto; width:max-content; margin-right:clamp(10px,1.4vw,22px);}
.w-stack-index button{display:flex; align-items:center; gap:10px; background:none; padding:0; color:rgba(15,31,34,.45); font-size:.74rem; letter-spacing:.18em; writing-mode:vertical-rl; transform:rotate(180deg);}
.w-stack-index .lbl{max-height:0; overflow:hidden; white-space:nowrap; text-transform:uppercase; transition:max-height .6s var(--w-ease), opacity .4s; opacity:0;}
.w-stack-index li.is-active button{color:var(--w-ink); font-weight:500;}
.w-stack-index li.is-active .lbl{max-height:260px; opacity:1;}
.w-stack-index li.is-active .num::after{content:"·"; margin-top:8px; display:inline-block;}
.w-panel{position:sticky; top:0; height:100vh; min-height:560px; display:grid; grid-template-columns:1fr 1fr; overflow:hidden; background:var(--w-sand);}
.w-panel:nth-of-type(2n){background:#EFE6D7;}
.w-panel-media{position:relative; overflow:hidden;}
.w-panel-media img{width:100%; height:100%; object-fit:cover;}
.w-panel-body{display:flex; flex-direction:column; justify-content:center; gap:22px; padding:clamp(32px,6vw,110px);}
.w-panel-body h2{font-size:clamp(1.6rem,3vw,2.7rem); font-weight:400; line-height:1.12; letter-spacing:-.01em; margin:0;}
.w-panel-body h2 em{font-family:var(--w-serif); font-style:italic;}
.w-panel-body p{color:var(--w-muted); line-height:1.75; margin:0; max-width:46ch;}
.w-panel-thumb{width:clamp(160px,18vw,300px); aspect-ratio:1/1; object-fit:cover; margin-top:8px;}
.w-panel-ctas{display:flex; gap:12px; flex-wrap:wrap; align-items:center;}
@media(max-width:860px){
  .w-panel{grid-template-columns:1fr; grid-template-rows:46% 54%; height:100svh;}
  .w-panel-body{padding:26px 22px 32px; gap:14px; justify-content:flex-start;}
  .w-panel-thumb{display:none;}
  .w-stack-index{display:none;}
}

/* ============================================================
   POINTS FORTS (étapes « Comment ça marche »)
   ============================================================ */
#site-screen section.w-highlights{background:var(--w-paper);}
.steps{gap:0; border-top:1px solid var(--w-line);}
.step{border-top:0; border-right:1px solid var(--w-line); padding:32px clamp(16px,2vw,32px) 8px;}
.step:last-child{border-right:0;}
.step .num{font-family:var(--w-serif); font-style:italic; font-size:2.4rem; color:var(--w-brass); font-weight:500;}
.step h3{font-weight:500; font-size:1.1rem; margin:14px 0 10px;}
.step p{color:var(--w-muted); line-height:1.7;}
@media(max-width:900px){.step{border-right:0; border-bottom:1px solid var(--w-line);}}

/* ============================================================
   LIVRAISON & SAV
   ============================================================ */
#site-screen section#zones{max-width:none; padding:0; margin:0;}
.zones{border-radius:0; background:var(--w-ink); padding:clamp(56px,8vw,104px) clamp(16px,6vw,120px); position:relative; overflow:hidden;}
.zones::before{content:""; position:absolute; inset:0; background:url(/hero-beach.jpg) center/cover; opacity:.18;}
.zones > *{position:relative;}
.zones h2{font-weight:400 !important; font-size:clamp(1.6rem,3vw,2.6rem) !important;}
.zones .eyebrow{letter-spacing:.22em !important; text-transform:uppercase; font-size:.72rem;}
.zone-card{background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.16); border-radius:0; backdrop-filter:blur(6px);}
.zone-card h3{font-weight:500;}
#site-screen section#sav{max-width:1440px; padding:clamp(56px,8vw,104px) clamp(16px,4vw,56px);}
.sav-icon{border-radius:50%; background:var(--w-sand); }
.sav-icon svg{stroke:var(--w-lagoon);}
.sav-card{border-radius:0; background:var(--w-sand); color:var(--w-ink);}
.sav-card h3{color:var(--w-ink); font-weight:500;}
.sav-card p{color:var(--w-muted);}
.btn-primary{border-radius:999px; background:var(--w-lagoon); font-weight:500; letter-spacing:.02em; transition:background .3s;}
.btn-primary:hover{background:var(--w-ink);}
.btn-ghost{border-radius:999px;}

/* ============================================================
   UNIVERS WAKATI — colonne gauche collante, articles à droite
   ============================================================ */
#site-screen section.w-world{background:var(--w-sand);}
.w-world-grid{display:grid; grid-template-columns:minmax(260px,1fr) 2fr; gap:clamp(32px,6vw,96px); align-items:start;}
.w-world-aside{position:sticky; top:64px; display:flex; flex-direction:column; align-items:flex-start; gap:18px;}
.w-world-list{display:flex; flex-direction:column; gap:clamp(32px,5vw,64px);}
.w-article{display:grid; grid-template-columns:1.1fr 1fr; gap:clamp(20px,3vw,40px); align-items:center;}
.w-article:nth-child(2n){grid-template-columns:1fr 1.1fr;}
.w-article:nth-child(2n) .w-article-media{order:2;}
.w-article-media{overflow:hidden; aspect-ratio:4/3; display:block;}
.w-article-media img{width:100%; height:100%; object-fit:cover; transition:transform .6s var(--w-ease);}
.w-article:hover .w-article-media img{transform:scale(1.05);}
.w-article h3{font-size:1.3rem; font-weight:500; margin:10px 0 12px; line-height:1.3;}
.w-article p{color:var(--w-muted); line-height:1.7; margin:0 0 18px;}
@media(max-width:900px){
  .w-world-grid{grid-template-columns:1fr;}
  .w-world-aside{position:static;}
  .w-article,.w-article:nth-child(2n){grid-template-columns:1fr;}
  .w-article:nth-child(2n) .w-article-media{order:0;}
}

/* Bandeau retrait boutique (équivalent « trouvez une boutique ») */
.w-store{display:grid; grid-template-columns:1fr 1fr; min-height:420px; background:var(--w-ink); color:#fff;}
.w-store-media img{width:100%; height:100%; object-fit:cover;}
.w-store-body{padding:clamp(40px,6vw,96px); display:flex; flex-direction:column; justify-content:center; gap:18px;}
.w-store-body h2{font-weight:400; font-size:clamp(1.5rem,2.6vw,2.3rem); margin:0; color:#fff;}
.w-store-body p{color:rgba(255,255,255,.72); line-height:1.7; margin:0; max-width:46ch;}
@media(max-width:800px){.w-store{grid-template-columns:1fr;} .w-store-media{aspect-ratio:16/10;}}

/* FAQ */
#site-screen section#faq{max-width:1100px; padding:clamp(56px,8vw,104px) clamp(16px,4vw,56px);}
.faq-q{font-weight:400; font-size:1.05rem;}
.faq-q .plus{color:var(--w-ink); font-weight:300; font-size:1.5rem;}
.faq-a{color:var(--w-muted); font-size:.95rem;}

/* ============================================================
   FOOTER
   ============================================================ */
footer{background:var(--w-ink); padding:clamp(56px,7vw,96px) clamp(16px,4vw,56px) 32px; color:rgba(255,255,255,.66);}
.footer-inner{max-width:1440px; gap:clamp(24px,4vw,64px);}
footer h3{font-family:var(--w-sans); font-weight:400; font-size:.75rem; letter-spacing:.22em; text-transform:uppercase; color:#E4CFA6;}
footer .logo-text{font-size:1.4rem; letter-spacing:.18em; text-transform:uppercase; font-weight:500;}
footer ul a{transition:color .3s;}
footer ul a:hover{color:#fff;}
.foot-bottom{max-width:1440px; margin-left:auto; margin-right:auto; border-top-color:rgba(255,255,255,.12);}
.social-link{border-radius:999px;}
.whatsapp-fab{background:var(--w-lagoon);}
.cart-fab{background:var(--w-ink);}
.cart-fab-badge{background:var(--w-coral);}

/* Bandeau cookies, toasts, modales publiques */
.cookie-btn{border-radius:999px;}
.cookie-btn.primary{background:var(--w-lagoon);}
.modal-box{border-radius:0;}
#splash{background:var(--w-ink) !important;}
#splash .s-mark{border-top-color:var(--w-brass) !important;}
#splash .s-name{font-family:var(--w-sans); font-weight:400 !important; letter-spacing:.4em !important;}

/* ============================================================
   PAGES SECONDAIRES (a-propos, conseils, contact, mouvements…)
   et FICHE PRODUIT (/montre/…, rendue par api/montre.js)
   ============================================================ */
body.w-page{background:var(--w-paper);}
body.w-page .topbar{background:rgba(255,255,255,.96); color:var(--w-ink); border-bottom:1px solid var(--w-line); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); padding:0 28px; height:var(--w-hdr); display:flex; align-items:center; justify-content:space-between; position:sticky; top:0; z-index:50;}
body.w-page .topbar a,body.w-page .topbar .logo{color:var(--w-ink);}
body.w-page .topbar .logo{font-weight:500; letter-spacing:.16em; text-transform:uppercase; font-size:1.3rem;}
body.w-page .topbar .logo small{color:var(--w-brass); letter-spacing:.32em; font-weight:400;}
body.w-page .topbar a.back{font-size:.88rem; border-bottom:1px solid currentColor; opacity:1;}
body.w-page h1{font-weight:400; letter-spacing:-.01em;}
body.w-page h2,body.w-page h3{font-weight:500;}
body.w-page .footer{background:var(--w-ink); padding:40px 24px; letter-spacing:.02em;}
body.w-page .brand{color:var(--w-brass); font-weight:500; letter-spacing:.24em;}
body.w-page .main-img{border:0; border-radius:0; background:var(--w-sand);}
body.w-page .main-img img{mix-blend-mode:multiply;}
body.w-page .thumbs img{border-radius:0; background:var(--w-sand); border-color:transparent;}
body.w-page .thumbs img.active{border-color:var(--w-ink); border-width:1px;}
body.w-page .price{font-weight:500;}
body.w-page .btn-buy{border-radius:999px; background:var(--w-ink); font-weight:500; letter-spacing:.03em; padding:17px;}
body.w-page .btn-buy:hover{background:var(--w-lagoon); transform:none;}
body.w-page .btn-secondary{border-radius:999px; color:var(--w-ink); border-color:var(--w-ink);}
body.w-page .btn-secondary:hover{background:var(--w-ink); color:#fff;}
body.w-page .pill{border-radius:999px;}
body.w-page .pill.in{background:rgba(15,92,90,.1); color:var(--w-lagoon);}
body.w-page .reassure .r-ico{border-radius:50%; background:var(--w-sand); color:var(--w-lagoon);}
body.w-page .desc{border:0; border-radius:0; background:var(--w-sand);}
body.w-page .specs h2,body.w-page .suggest h2{border-bottom:1px solid var(--w-line); font-weight:500;}
body.w-page .scard{border:0; border-radius:0; padding:0; background:transparent;}
body.w-page .scard:hover{transform:none; box-shadow:none;}
body.w-page .scard-img{background:var(--w-sand); overflow:hidden;}
body.w-page .scard-img img{mix-blend-mode:multiply; transition:transform .6s var(--w-ease);}
body.w-page .scard:hover .scard-img img{transform:scale(1.05);}
body.w-page .scard-brand{color:var(--w-brass);}
body.w-page .scard-name{margin-top:10px;}
body.w-page .dot.active{border-color:var(--w-ink);}
body.w-page .badge-off{border-radius:999px;}
body.w-page .crumbs{max-width:1200px;}
body.w-page .wrap{max-width:1200px;}