/* Polices Playfair/Inter retirées : inutilisées (le design n'utilise que Poppins, chargée dans le layout).
   Un @import ici = requête render-blocking CHAÎNÉE (shop.css doit d'abord se télécharger). */

/* ============================================================================
   Shop — design system premium, inspiré d'une direction artistique naturelle.
   (Override "Fashion Editorial" appliqué en fin de fichier — DA-A.)
   ============================================================================ */

/* ============================================================================
   Tokens consolidés — ce bloc :root est la COUCHE DE DEFAUT du design system.
   (avant : 4 blocs :root empiles en cascade a differents endroits du fichier,
   dont le dernier, "Pink & Grey", gagnait sur les couleurs). Valeurs reprises
   telles quelles depuis la resolution finale — aucun changement visuel.

   POURQUOI GARDER CES VALEURS ICI alors que /cms pilote la palette ?
   Le CMS ne fait que SURCHARGER : layouts/main.php injecte un seul <style>
   :root{...} APRES ce fichier, avec uniquement les tokens configures pour le
   store (couleurs + dimensions logo/menu). C'est donc une couche de defaut,
   indispensable :
     - un store qui n'a jamais ouvert l'onglet Palette n'a pas de ligne
       cms_theme -> AUCUNE injection -> sans ces valeurs, site blanc/casse ;
     - si la lecture DB echoue, le site reste correct ;
     - beaucoup de tokens ici (rayons, ombres, polices, alias) ne sont PAS
       exposes dans /cms et n'existent que la.
   Les couleurs de marque (--c-pink*, --c-silver*) et les dimensions d'en-tete
   (--logo-h/--header-h/--nav-fz) sont surchargeables depuis /cms ;
   --c-accent/--c-gold/--c-primary restent des alias pour ne pas casser les
   ~680 references existantes dans ce fichier.
   ============================================================================ */
:root{
  /* --- Fonds & neutres --- */
  --c-bg:        #FFFFFF;
  --c-surface:   #FFFFFF;
  --c-soft:      #F7F7F9;
  --c-soft-2:    #F0F1F3;
  --c-ink:       #232529;
  --c-ink-2:     #565A61;
  --c-muted:     #767B82;
  --c-line:      #E6E7EA;

  /* --- Couleurs de marque (Pink & Grey) --- */
  --c-pink:        #A4226B;
  --c-pink-dk:     #7C1450;
  --c-pink-soft:   #FBEAF3;
  --c-pink-tint:   #F2D2E2;
  --c-silver:      #BCBEC0;
  --c-silver-dk:   #8A8F96;
  --c-star:        #E8A93C;

  /* --- Alias historiques (references utilisees dans tout le fichier) --- */
  --c-accent:        var(--c-pink);
  --c-accent-dk:     var(--c-pink-dk);
  --c-primary:       var(--c-pink);
  --c-primary-hover: var(--c-pink-dk);
  --c-gold:          var(--c-silver);

  /* --- Bandeau du haut (announcement-bar desktop + topbar-mobile) ---
     Degrade a 3 arrets. --c-topbar-from-rgb duplique la 1ere couleur en
     triplet "r,g,b" car les voiles decoratifs du bandeau sont en rgba() et
     ne peuvent pas consommer un hex. Ces 5 valeurs sont surchargees par le
     <style> injecte depuis /cms (layouts/main.php). */
  --c-topbar-from:     #A4226B;
  --c-topbar-mid:      #3D2233;
  --c-topbar-to:       #232529;
  --c-topbar-text:     #E7E8EA;
  --c-topbar-from-rgb: 164,34,107;

  /* --- Etats --- */
  --c-danger:    #A6433A;
  --c-success:   #4F7A4A;

  /* Century Gothic d'abord (installé nativement Windows/Mac), fallback URW/Jost puis génériques */
  --ff-display: "Poppins", "Helvetica Neue", Arial, sans-serif;
  --ff-body:    "Poppins", "Helvetica Neue", Arial, sans-serif;
  --ff-eyebrow: "Poppins", "Helvetica Neue", Arial, sans-serif;

  --r-sm: 2px; --r-md: 4px; --r-lg: 6px; --r-pill: 999px;
  --sh-1: 0 1px 2px rgba(21,18,13,.04);
  --sh-2: 0 12px 32px rgba(21,18,13,.08);

  --sp-section: 5rem;
  --transition: .3s cubic-bezier(.2,.6,.2,1);
}

*{box-sizing:border-box}
html,body{background:#FFFFFF;color:var(--c-ink);font-family:var(--ff-body);font-weight:400;-webkit-font-smoothing:antialiased;overflow-x:hidden;max-width:100%}
/* Poppins : poids harmonieux — body en 400, headings en 600/700 */
body,p,li,td,th,a,span,label{font-weight:400}
button,.btn{font-weight:500}
h1,h2,h3,h4,h5,h6{font-weight:600}
strong,b{font-weight:600}
input,textarea,select,.form-control,.form-select{font-weight:400}
/* Fond de page : pilote par le jeton --c-bg (onglet Palette de /cms, champ
   "Fond de page"). Sans cette declaration le reglage existait mais ne
   s'appliquait nulle part — le navigateur peignait son blanc par defaut. */
body{min-height:100vh;display:flex;flex-direction:column;margin:0;background:var(--c-bg)}
main{flex:1 0 auto;outline:none}
img,video,svg{max-width:100%;height:auto}
/* iOS : toute font-size < 16px déclenche le zoom auto sur focus — on force 16px */
@media (max-width:576px){
  input[type="text"],input[type="email"],input[type="tel"],input[type="password"],input[type="search"],input[type="number"],input[type="date"],textarea,select{
    font-size:16px !important;
  }
}

a{color:inherit}
a:hover{color:var(--c-accent-dk)}

/* Accessibilité : skip-link (lecteurs d'écran + clavier) */
.skip-link{position:absolute;left:-1000px;top:0;background:var(--c-ink);color:#fff;padding:.75rem 1rem;z-index:9999;border-radius:0 0 var(--r-md) 0}
.skip-link:focus{left:0;color:#fff;outline:3px solid var(--c-gold);outline-offset:2px}

/* Focus visible global : clavier only, ne gêne pas la souris */
*:focus-visible{outline:2px solid var(--c-accent);outline-offset:2px;border-radius:3px}
.btn:focus-visible,.btn:focus{outline:3px solid rgba(110,122,58,.35);outline-offset:2px;box-shadow:none}

/* Barre recherche mobile */
.bar-search-mobile{background:#fff;border-top:1px solid var(--c-line)}
.bar-search-mobile[hidden]{display:none !important}
.bar-search-mobile.open{display:block !important}
.bar-search-mobile .form-control{background:var(--c-bg);border:1px solid var(--c-line)}
.bar-search-mobile .form-control:focus{background:#fff;border-color:var(--c-ink);box-shadow:none}

.bg-surface{background:var(--c-surface) !important}
.page-title{font-family:var(--ff-display);font-weight:600;letter-spacing:-.01em;margin-bottom:1rem}
.section-title{font-family:var(--ff-display);font-weight:600;font-size:1.8rem;letter-spacing:-.01em;margin:0}
.section-head{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:1.25rem;gap:1rem}
.section-more{color:var(--c-ink-2);text-decoration:none;font-size:.95rem;white-space:nowrap}
.section-more:hover{color:var(--c-accent-dk)}

/* ===== Header ===== */
.site-header{position:sticky;top:0;z-index:1040;background:var(--c-surface);border-bottom:1px solid var(--c-line)}
.site-header .bar-top{background:var(--c-ink);color:#fff}
.site-header .bar-top .text-muted{color:rgba(255,255,255,.60) !important}
.site-header .bar-top a:hover{color:#fff;text-decoration:underline}
.topbar-sep{color:rgba(255,255,255,.25)}
.topbar-phone{display:inline-flex;align-items:center;gap:.4rem;font-weight:500}
.topbar-phone .bi{color:var(--c-gold);font-size:.9rem}
.topbar-free{display:inline-flex;align-items:center;gap:.4rem;color:var(--c-topbar-text)}
.topbar-free .bi{color:var(--c-gold)}
.topbar-free strong{color:#fff;font-weight:600}
.topbar-socials{display:inline-flex;align-items:center;gap:.5rem}
.topbar-socials a{width:28px;height:28px;border-radius:50%;border:1px solid rgba(255,255,255,.18);display:inline-flex;align-items:center;justify-content:center;color:var(--c-topbar-text);transition:.15s;font-size:.85rem}
.topbar-socials a:hover{background:#fff;color:var(--c-ink);border-color:#fff;text-decoration:none}

/* Social icons dans la barre principale (à côté du panier) */
.header-socials{display:inline-flex;align-items:center;gap:.35rem;padding-right:.25rem;border-right:1px solid var(--c-line);margin-right:.25rem}
.header-socials a{width:34px;height:34px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;color:var(--c-ink-2);transition:.15s;font-size:1rem}
.header-socials a:hover{background:var(--c-bg);color:var(--c-ink)}

/* Barre info mobile (tel + livraison gratuite) */
.bar-info-mobile{background:var(--c-ink);color:var(--c-topbar-text);padding:.4rem 0;font-size:.78rem;border-bottom:1px solid rgba(255,255,255,.06)}
.bar-info-mobile .mobile-phone{color:#fff;text-decoration:none;font-weight:500;display:inline-flex;align-items:center;gap:.3rem}
.bar-info-mobile .mobile-phone .bi{color:var(--c-gold)}
.bar-info-mobile .mobile-free{display:inline-flex;align-items:center;gap:.3rem}
.bar-info-mobile .mobile-free .bi{color:var(--c-gold)}
.bar-info-mobile .mobile-socials{display:inline-flex;align-items:center;gap:.35rem;flex-shrink:0}
.bar-info-mobile .mobile-socials a{width:26px;height:26px;border-radius:50%;border:1px solid rgba(255,255,255,.18);display:inline-flex;align-items:center;justify-content:center;color:var(--c-topbar-text);transition:.15s;font-size:.8rem}
.bar-info-mobile .mobile-socials a:hover{background:#fff;color:var(--c-ink);border-color:#fff;text-decoration:none}
@media (max-width:480px){
  .bar-info-mobile .mobile-free{display:none} /* priorise phone + socials sur très petit écran */
  .bar-info-mobile .mobile-socials a{width:24px;height:24px;font-size:.75rem}
}
@media (max-width:360px){
  .bar-info-mobile .mobile-socials{gap:.25rem}
  .bar-info-mobile .mobile-socials a{width:22px;height:22px;font-size:.7rem}
}
.brand-text{font-family:var(--ff-display);font-weight:600;font-size:1.4rem;letter-spacing:-.01em}
.brand{display:inline-flex;align-items:center;flex:0 0 auto;min-width:0;max-width:280px}
.brand-logo{
  display:block;
  height:var(--logo-h,52px);       /* pilotable depuis /cms (Palette) ; 52px = valeur historique */
  max-height:var(--logo-h,52px);
  width:auto;
  max-width:100%;
  object-fit:contain;
  object-position:left center;
}

/* Header : distribution flex équilibrée */
.site-header .bar-main > .container-xxl{
  min-height:72px;
}
.icon-link{color:var(--c-ink);text-decoration:none;font-size:1.2rem;position:relative;display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;transition:background .15s ease;background:transparent;border:0}
.icon-link:hover{color:var(--c-ink);background:var(--c-bg)}
.cart-count{position:absolute;top:2px;right:2px;background:var(--c-ink);color:#fff;font-size:.62rem;padding:1px 5px;min-width:16px;height:16px;line-height:14px;text-align:center;border-radius:999px;font-weight:600;border:2px solid #fff}

.search-form{max-width:560px;margin:0 auto;position:relative;flex:1 1 auto;min-width:0}
.search-form .input-group .form-control{border:1px solid var(--c-line);padding:.55rem .9rem;background:var(--c-bg);font-size:.92rem;height:42px}
.search-form .input-group .form-control:focus{background:#fff;box-shadow:none;border-color:var(--c-ink)}
.search-form .btn-dark{background:var(--c-ink);border-color:var(--c-ink);padding-inline:.9rem;height:42px}
.search-suggest{position:absolute;left:0;right:0;top:calc(100% + 4px);background:#fff;border:1px solid var(--c-line);border-radius:var(--r-md);box-shadow:var(--sh-2);max-height:380px;overflow:auto;z-index:10;display:none}
.search-suggest.open{display:block}
.search-suggest a{display:flex;align-items:center;gap:.75rem;padding:.6rem 1rem;text-decoration:none;color:inherit;border-bottom:1px solid var(--c-line)}
.search-suggest a:last-child{border-bottom:0}
.search-suggest a:hover{background:var(--c-bg)}
.search-suggest img{width:44px;height:44px;object-fit:cover;border-radius:var(--r-sm)}

/* ===== Mega menu ===== */
.bar-nav{border-top:1px solid var(--c-line);background:#fff}
.nav-top-list{list-style:none;margin:0;padding:0;display:flex;gap:1.5rem;flex-wrap:wrap}
.nav-top-list > li{position:relative;padding:.9rem 0}
.nav-top-list > li > a{color:var(--c-ink);text-decoration:none;font-weight:500;font-size:.95rem;letter-spacing:.01em;padding:.25rem 0;border-bottom:2px solid transparent;transition:border-color .2s}
.nav-top-list > li > a:hover,
.nav-top-list > li > a.active{color:var(--c-ink);border-bottom-color:var(--c-ink)}
.nav-top-list > li.has-children > a::after{content:"";display:inline-block;margin-left:.35rem;border:solid var(--c-muted);border-width:0 2px 2px 0;padding:3px;transform:rotate(45deg);vertical-align:middle}
.nav-top-list > li > .mega{position:absolute;top:100%;left:-1rem;background:#fff;border:1px solid var(--c-line);box-shadow:var(--sh-2);border-radius:var(--r-md);padding:1.25rem;width:860px;max-width:94vw;display:none;z-index:20}
.nav-top-list > li.has-children:hover > .mega{display:block}
.mega-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}
.mega-col{min-width:0}

.mega-cats .mega-cat{display:flex;flex-direction:column;align-items:center;text-align:center;gap:.5rem;padding:.75rem .5rem;border-radius:var(--r-md);color:var(--c-ink);text-decoration:none;transition:background .15s}
.mega-cats .mega-cat:hover{background:var(--c-bg);color:var(--c-accent-dk)}
.mega-cat__img{width:64px;height:64px;border-radius:50%;border:1px solid var(--c-line);overflow:hidden;display:flex;align-items:center;justify-content:center;background:#fff}
.mega-cat__img img{width:100%;height:100%;object-fit:cover}
.mega-cat__label{font-size:.85rem;font-weight:500;line-height:1.25}

/* ===== Hero — pleine largeur, hauteur bornée pour ne jamais dominer l'écran ===== */
.hero{background:var(--c-ink);overflow:hidden}
.hero .carousel,
.hero .carousel-inner,
.hero .carousel-item{width:100%;background:var(--c-ink)}
/* Cadre 16:9 sur toutes tailles — l'image remplit le cadre (cover), recadrage centré */
.hero .carousel-item{
  aspect-ratio:16/9;
  min-height:0;
  overflow:hidden;
  background:var(--c-ink);
}
.hero-slide{display:block;width:100%;height:100%;background:var(--c-ink);position:relative}
.hero-img{
  display:block;width:100%;height:100%;
  object-fit:cover;        /* remplit tout le slide — recadrage centré si l'image n'est pas 16:9 */
  object-position:center;  /* garde le centre visible (zone sûre pour le sujet/texte) */
  background:var(--c-ink);      /* fallback pendant le chargement */
}

.hero .carousel-control-prev,
.hero .carousel-control-next{width:6%;opacity:.6;z-index:2}
.hero .carousel-control-prev:hover,
.hero .carousel-control-next:hover{opacity:1}
.hero .carousel-indicators{margin-bottom:.75rem;z-index:2}
.hero .carousel-indicators [data-bs-target]{width:28px;height:3px;border-radius:2px;background:rgba(255,255,255,.7)}
.hero .carousel-indicators .active{background:#fff}

/* 16:9 natif partout — l'admin impose l'upload à 1920×1080 (ratio 16:9) */
@media (max-width:1199px){
  .hero .carousel-control-prev,.hero .carousel-control-next{width:8%}
}
@media (max-width:767px){
  .hero .carousel-control-prev,.hero .carousel-control-next{width:10%}
}
@media (max-width:575px){
  .hero .carousel-item{aspect-ratio:16/9}
}
@media (max-width:399px){
  .hero .carousel-item{aspect-ratio:16/9}
}

/* ===== Categories tiles (legacy, encore utilisé ailleurs) ===== */
.cat-tile{display:flex;flex-direction:column;align-items:center;text-align:center;text-decoration:none;color:var(--c-ink);padding:1rem;border-radius:var(--r-md);transition:background .2s}
.cat-tile:hover{background:#fff;box-shadow:var(--sh-1);color:var(--c-ink)}
.cat-tile__img{width:88px;height:88px;border-radius:50%;overflow:hidden;background:var(--c-surface);border:1px solid var(--c-line);display:flex;align-items:center;justify-content:center;margin-bottom:.75rem}
.cat-tile__img img{width:100%;height:100%;object-fit:cover}
.cat-tile__label{font-size:.9rem;font-weight:500}

/* ===== Categories — slider horizontal élégant ===== */
.cat-slider__nav{
  width:40px;height:40px;border-radius:50%;
  border:1px solid var(--c-line);background:#fff;color:var(--c-ink);
  display:inline-flex;align-items:center;justify-content:center;
  cursor:pointer;transition:.15s;
}
.cat-slider__nav:hover{background:var(--c-ink);color:#fff;border-color:var(--c-ink)}
.cat-slider__nav:disabled{opacity:.3;cursor:not-allowed;pointer-events:none}

.cat-slider{
  position:relative;
  margin-inline:calc(var(--bs-gutter-x, 1.5rem) * -.5);
  overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 12px, #000 calc(100% - 12px), transparent 100%);
          mask-image:linear-gradient(90deg, transparent 0, #000 12px, #000 calc(100% - 12px), transparent 100%);
}
.cat-slider__track{
  display:flex;gap:1rem;padding:.5rem calc(var(--bs-gutter-x, 1.5rem) * .5);
  overflow-x:auto;scroll-behavior:smooth;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.cat-slider__track::-webkit-scrollbar{display:none}
.cat-slider__card{
  position:relative;
  flex:0 0 280px;             /* largeur fixe par item */
  aspect-ratio:4/5;
  border-radius:var(--r-lg);
  overflow:hidden;
  background:var(--c-ink);
  color:#fff;text-decoration:none;
  isolation:isolate;
  box-shadow:var(--sh-1);
  scroll-snap-align:start;
  transition:transform .3s ease, box-shadow .3s ease;
}
.cat-slider__card:hover{transform:translateY(-3px);box-shadow:var(--sh-2);color:#fff}

.cat-slider__media{position:absolute;inset:0;margin:0;background:linear-gradient(135deg,var(--c-ink) 0%,var(--c-ink-2) 100%)}
.cat-slider__media img{width:100%;height:100%;object-fit:cover;object-position:center;transition:transform .6s cubic-bezier(.2,.6,.2,1);filter:saturate(.92)}
.cat-slider__card:hover .cat-slider__media img{transform:scale(1.06);filter:saturate(1.05)}

.cat-slider__overlay{
  position:absolute;inset:0;z-index:2;
  display:flex;align-items:flex-end;justify-content:space-between;gap:.6rem;
  padding:1rem 1.15rem;
  background:linear-gradient(180deg, rgba(30,27,22,0) 55%, rgba(30,27,22,.5) 82%, rgba(30,27,22,.88) 100%);
}
.cat-slider__meta{min-width:0;flex:1}
.cat-slider__title{font-family:var(--ff-display);font-weight:600;font-size:1.15rem;line-height:1.15;letter-spacing:-.01em;margin:0 0 .2rem;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.25)}
.cat-slider__count{margin:0;font-size:.78rem;color:rgba(255,255,255,.78)}
.cat-slider__index{
  position:absolute;top:.85rem;left:.95rem;z-index:3;
  font-family:var(--ff-display);font-weight:600;font-size:.72rem;
  color:rgba(255,255,255,.82);letter-spacing:.1em;
  background:rgba(0,0,0,.3);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  padding:.15rem .5rem;border-radius:999px;
  border:1px solid rgba(255,255,255,.18);
}
.cat-slider__arrow{
  flex-shrink:0;width:36px;height:36px;border-radius:50%;
  background:rgba(255,255,255,.92);color:var(--c-ink);
  display:inline-flex;align-items:center;justify-content:center;
  transition:transform .3s ease, background .3s ease;
}
.cat-slider__card:hover .cat-slider__arrow{transform:translateX(3px);background:#fff}

@media (max-width:767.98px){
  .cat-slider__card{flex:0 0 220px}
  .cat-slider__title{font-size:1rem}
  .cat-slider__nav{width:36px;height:36px}
}
@media (max-width:479.98px){
  .cat-slider__card{flex:0 0 180px}
  .cat-slider__overlay{padding:.75rem .85rem}
}

/* ===== Produits en promotion — slider horizontal ===== */
.promo-slider{
  position:relative;
  margin-inline:calc(var(--bs-gutter-x, 1.5rem) * -.5);
}
.promo-slider__track{
  display:flex; gap:1rem;
  padding:.5rem calc(var(--bs-gutter-x, 1.5rem) * .5);
  overflow-x:auto; scroll-behavior:smooth;
  scroll-snap-type:x proximity;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.promo-slider__track::-webkit-scrollbar{ display:none; }
.promo-slider__item{
  flex:0 0 260px; max-width:260px;
  scroll-snap-align:start;
}
@media (max-width:767.98px){
  .promo-slider__item{ flex:0 0 62vw; max-width:62vw; }
}
/* Images produits DANS les carrousels (promo accueil + "Vous pourriez aussi aimer") :
   affichees ENTIERES (contain), non recadrees. Specificite (0,2,1) > les regles cover. */
.promo-slider .product-card__img img{
  object-fit:contain !important;
  padding:.4rem;
}

/* ===== Categories — grille éditoriale premium (legacy) ===== */
.cat-editorial__eyebrow{display:inline-block;font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--c-accent-dk);margin-bottom:.3rem;font-weight:600}
.cat-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  grid-auto-rows:320px;
  gap:1rem;
}
/* Rythme asymétrique : 1er item prend 2 colonnes, 2 lignes (hero) */
.cat-grid > .cat-editorial__card:first-child{grid-column:span 2;grid-row:span 2}
/* 2e item prend aussi 2 lignes pour la bande supérieure equilibrée */
.cat-grid > .cat-editorial__card:nth-child(2){grid-column:span 2}

.cat-editorial__card{
  position:relative;
  display:block;
  overflow:hidden;
  border-radius:var(--r-lg);
  text-decoration:none;
  color:#fff;
  background:var(--c-ink);
  isolation:isolate;
  box-shadow:var(--sh-1);
  transition:transform .35s ease, box-shadow .35s ease;
}
.cat-editorial__card:hover{transform:translateY(-3px);box-shadow:var(--sh-2);color:#fff}

.cat-editorial__media{
  position:absolute;inset:0;margin:0;
  background:linear-gradient(135deg,var(--c-ink) 0%,var(--c-ink-2) 100%);
}
.cat-editorial__media img{
  width:100%;height:100%;object-fit:cover;object-position:center;
  transition:transform .7s cubic-bezier(.2,.6,.2,1), filter .35s ease;
  filter:saturate(.95);
}
.cat-editorial__card:hover .cat-editorial__media img{transform:scale(1.06);filter:saturate(1.05) brightness(1.03)}

/* Overlay dégradé en bas + contenu */
.cat-editorial__overlay{
  position:absolute;inset:0;z-index:2;
  display:flex;align-items:flex-end;justify-content:space-between;
  padding:1.25rem 1.35rem;
  background:linear-gradient(180deg, rgba(30,27,22,0) 55%, rgba(30,27,22,.45) 80%, rgba(30,27,22,.85) 100%);
  gap:.75rem;
}
.cat-editorial__meta{min-width:0;flex:1}
.cat-editorial__title{
  font-family:var(--ff-display);
  font-weight:600;font-size:1.35rem;line-height:1.15;letter-spacing:-.01em;
  margin:0 0 .25rem;color:#fff;
  text-shadow:0 1px 2px rgba(0,0,0,.25);
}
.cat-editorial__count{
  margin:0;font-size:.8rem;color:rgba(255,255,255,.78);
  letter-spacing:.02em;
}

.cat-editorial__index{
  position:absolute;top:1rem;left:1.1rem;z-index:3;
  font-family:var(--ff-display);font-weight:600;font-size:.78rem;
  color:rgba(255,255,255,.82);letter-spacing:.1em;
  background:rgba(0,0,0,.25);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  padding:.2rem .55rem;border-radius:999px;
  border:1px solid rgba(255,255,255,.18);
}

.cat-editorial__arrow{
  flex-shrink:0;
  width:42px;height:42px;border-radius:50%;
  background:rgba(255,255,255,.92);color:var(--c-ink);
  display:inline-flex;align-items:center;justify-content:center;
  transition:transform .3s ease, background .3s ease;
}
.cat-editorial__card:hover .cat-editorial__arrow{transform:translateX(4px);background:#fff}

/* Hero card (1er item) — titre plus grand */
.cat-grid > .cat-editorial__card:first-child .cat-editorial__title{font-size:2rem}
.cat-grid > .cat-editorial__card:first-child .cat-editorial__overlay{padding:1.6rem 1.75rem}
.cat-grid > .cat-editorial__card:first-child .cat-editorial__arrow{width:50px;height:50px}
.cat-grid > .cat-editorial__card:first-child .cat-editorial__arrow svg{width:22px;height:22px}

/* === Responsive === */
@media (max-width:1199.98px){
  .cat-grid{grid-template-columns:repeat(3,1fr);grid-auto-rows:280px}
  .cat-grid > .cat-editorial__card:first-child{grid-column:span 2;grid-row:span 2}
  .cat-grid > .cat-editorial__card:nth-child(2){grid-column:span 1}
}
@media (max-width:767.98px){
  .cat-grid{grid-template-columns:1fr 1fr;grid-auto-rows:220px;gap:.75rem}
  .cat-grid > .cat-editorial__card:first-child,
  .cat-grid > .cat-editorial__card:nth-child(2){grid-column:span 2;grid-row:span 1}
  .cat-grid > .cat-editorial__card:first-child{grid-row:span 2}
  .cat-editorial__title{font-size:1.05rem}
  .cat-grid > .cat-editorial__card:first-child .cat-editorial__title{font-size:1.5rem}
  .cat-editorial__overlay{padding:.9rem 1rem}
  .cat-editorial__index{top:.6rem;left:.7rem;font-size:.7rem}
  .cat-editorial__arrow{width:36px;height:36px}
  .cat-editorial__arrow svg{width:16px;height:16px}
}
@media (max-width:479.98px){
  .cat-grid{grid-template-columns:1fr;grid-auto-rows:200px}
  .cat-grid > .cat-editorial__card:first-child,
  .cat-grid > .cat-editorial__card:nth-child(2){grid-column:span 1}
  .cat-grid > .cat-editorial__card:first-child{grid-row:span 1;grid-auto-rows:260px}
}

/* ===== Product card ===== */
.product-card{background:var(--c-surface);border:1px solid var(--c-line);border-radius:var(--r-md);overflow:hidden;transition:transform .25s ease,box-shadow .25s ease;display:flex;flex-direction:column;height:100%}
.product-card:hover{transform:translateY(-2px);box-shadow:var(--sh-2)}
.product-card__img{display:block;position:relative;aspect-ratio:4/5;background:var(--c-bg);overflow:hidden}
.product-card__img img{width:100%;height:100%;object-fit:cover;transition:transform .35s ease}
.product-card:hover .product-card__img img{transform:scale(1.03)}
.product-card__body{padding:.9rem 1rem 1rem;flex:1;display:flex;flex-direction:column;gap:.35rem}
.product-card__title{font-size:.95rem;font-weight:500;margin:0;line-height:1.3;max-height:2.6em;overflow:hidden}
.product-card__title a{color:inherit;text-decoration:none}
.product-card__title a:hover{color:var(--c-accent-dk)}
.product-card__prices{display:flex;align-items:baseline;gap:.5rem;margin-top:auto}
.price{font-weight:600;font-size:1.05rem}
.price-old{color:var(--c-muted);text-decoration:line-through;font-size:.85rem}
.badge-chip{position:absolute;top:.75rem;left:.75rem;background:var(--c-ink);color:#fff;font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;padding:.2rem .55rem;border-radius:var(--r-pill)}
.badge-chip--promo{background:var(--c-danger)}
.badge-chip--top{left:auto;right:.75rem;background:var(--c-gold)}
.wish-btn{position:absolute;bottom:.6rem;right:.6rem;width:36px;height:36px;border-radius:50%;border:none;background:rgba(255,255,255,.9);backdrop-filter:blur(6px);color:var(--c-ink);display:flex;align-items:center;justify-content:center;cursor:pointer}
.wish-btn.active{background:var(--c-ink);color:#fff}

.stars{color:var(--c-gold);letter-spacing:-.05em;font-size:.85rem;display:inline-flex;align-items:center}
.product-card__rate{display:inline-flex;align-items:center;gap:.3rem}
.product-card__rate-num{font-size:.78rem;color:var(--c-ink-2);font-weight:600}

/* ===== Product card — variantes pilotees par le CMS (view_variant) ===== */
/* Variante "epuree" : image + titre + prix, sans badges/note/CTA de survol.
   Rendu plus aere, oriente catalogue haut de gamme. */
.product-card--minimal{border-color:transparent;background:transparent}
.product-card--minimal:hover{box-shadow:none;transform:none}
.product-card--minimal .product-card__badges,
.product-card--minimal .product-card__quickadd,
.product-card--minimal .product-card__rate,
.product-card--minimal .product-card__cta-mobile{display:none}
.product-card--minimal .product-card__img{border-radius:var(--r-md);border:1px solid var(--c-line)}
.product-card--minimal .product-card__body{padding:.7rem .2rem 0;text-align:center;gap:.25rem}
.product-card--minimal .product-card__prices{justify-content:center}

/* Variante "superposee" : titre + prix en surimpression sur l'image, revele en
   degrade bas. La carte devient une seule tuile-image. */
.product-card--overlay{position:relative;border:none;background:none}
.product-card--overlay:hover{box-shadow:var(--sh-2)}
.product-card--overlay .product-card__img{aspect-ratio:3/4;border-radius:var(--r-md)}
.product-card--overlay .product-card__body{position:absolute;left:0;right:0;bottom:0;padding:1.6rem .9rem .8rem;z-index:2;background:linear-gradient(to top,rgba(0,0,0,.72),rgba(0,0,0,.25) 55%,transparent);color:#fff}
.product-card--overlay .product-card__title a{color:#fff}
.product-card--overlay .price{color:#fff}
.product-card--overlay .price-old{color:rgba(255,255,255,.7)}
.product-card--overlay .product-card__rate-num{color:#fff}
.product-card--overlay .product-card__cta-mobile{display:none}

/* Variante "compacte" : textes/paddings reduits, pour catalogues a fort volume
   (epicerie, pieces detachees, accessoires...) ou l'on veut voir un maximum de
   references d'un coup d'oeil. */
.product-card--compact .product-card__body{padding:.55rem .6rem .65rem;gap:.2rem}
.product-card--compact .product-card__title{font-size:.82rem;line-height:1.25;max-height:2.5em}
.product-card--compact .price{font-size:.92rem}
.product-card--compact .price-old{font-size:.75rem}
.product-card--compact .product-card__quickadd,
.product-card--compact .product-card__rate{display:none}

/* ===== Modeles de grille produit auto-contenus (pilotes par le CMS : layout) ===== */
/* "Grille 5 colonnes" : 2 sur mobile -> 4 sur tablette -> 5 sur desktop.
   Volontairement en CSS grid natif (pas Bootstrap row-cols-5) pour ne dependre
   d'aucune version. Les .col Bootstrap deviennent de simples items de grille. */
.pg-grid-5{display:grid;grid-template-columns:repeat(2,1fr);gap:.6rem}
@media (min-width:768px){.pg-grid-5{grid-template-columns:repeat(4,1fr);gap:.75rem}}
@media (min-width:992px){.pg-grid-5{grid-template-columns:repeat(5,1fr)}}
.pg-grid-5 > .col{width:auto;max-width:none;padding:0;flex:none}

/* "Liste" : chaque produit sur une ligne pleine largeur, image a gauche + infos
   a droite. Ergonomie type marketplace / comparateur (electronique, high-tech).
   La presentation horizontale est portee par le conteneur -> fonctionne quel
   que soit le style de carte choisi. */
.pg-prodlist{display:flex;flex-direction:column;gap:.75rem}
.pg-prodlist > .col{width:100%;max-width:none;padding:0;flex:none}
.pg-prodlist .product-card{flex-direction:row;align-items:stretch}
.pg-prodlist .product-card__img{flex:0 0 34%;max-width:180px;aspect-ratio:1/1}
.pg-prodlist .product-card__body{flex:1;justify-content:center;padding:.75rem 1rem}
.pg-prodlist .product-card__title{font-size:1rem;max-height:none}
.pg-prodlist .product-card__cta-mobile{display:none}
@media (max-width:575px){
  .pg-prodlist .product-card__img{flex-basis:38%}
  .pg-prodlist .product-card__body{padding:.6rem .7rem}
}

/* "Mosaique" (masonry) : colonnes a hauteurs libres, facon Pinterest. Les
   images gardent leur ratio naturel (pas de recadrage) -> effet decale.
   Domaine : mode, deco, bijoux, art, photo. */
.pg-masonry{column-count:2;column-gap:.75rem}
@media (min-width:768px){.pg-masonry{column-count:3;column-gap:1rem}}
@media (min-width:1200px){.pg-masonry{column-count:4}}
.pg-masonry > .col{width:auto;max-width:none;padding:0;display:block;break-inside:avoid;margin-bottom:.9rem}
.pg-masonry .product-card__img{aspect-ratio:auto;height:auto}
.pg-masonry .product-card__img img{height:auto;object-fit:contain}

/* "Bento" : grille a tailles mixtes, la 1re vignette occupe un grand bloc 2x2.
   Domaine : concept stores, tech/lifestyle, mise en avant editoriale. */
.pg-bento{display:grid;grid-template-columns:repeat(2,1fr);gap:.7rem;grid-auto-flow:dense}
@media (min-width:768px){.pg-bento{grid-template-columns:repeat(4,1fr);gap:.9rem}}
.pg-bento > .col{width:auto;max-width:none;padding:0}
.pg-bento .product-card{height:100%}
.pg-bento .product-card__img{aspect-ratio:auto;flex:1;min-height:0}
.pg-bento > .col:first-child{grid-column:span 2;grid-row:span 2}
@media (max-width:767.98px){.pg-bento > .col:first-child{grid-row:span 1}}

/* Slider "apercu" : grandes cartes + accroche mandatory (une carte principale,
   la suivante depasse pour inviter au defilement). Domaine : storytelling produit. */
.promo-slider--peek .promo-slider__track{scroll-snap-type:x mandatory}
.promo-slider--peek .promo-slider__item{flex-basis:340px;max-width:340px;scroll-snap-align:center}
@media (max-width:767.98px){.promo-slider--peek .promo-slider__item{flex-basis:82vw;max-width:82vw}}

/* Slider "2 rangees" : defilement horizontal sur deux lignes -> deux fois plus
   de references visibles sans allonger la page. Domaine : marketplace, fort volume. */
.promo-slider--rows2 .promo-slider__track{display:grid;grid-auto-flow:column;grid-template-rows:repeat(2,1fr);grid-auto-columns:240px;align-items:stretch}
.promo-slider--rows2 .promo-slider__item{max-width:none}
@media (max-width:767.98px){.promo-slider--rows2 .promo-slider__track{grid-auto-columns:60vw}}

/* Carte "editoriale" : grande image + titre centre en police d'affichage, epure.
   Domaine : mode premium, cosmetique, maison. */
.product-card--editorial{border:none;background:none}
.product-card--editorial:hover{box-shadow:none;transform:none}
.product-card--editorial .product-card__img{aspect-ratio:3/4;border-radius:var(--r-md);border:1px solid var(--c-line)}
.product-card--editorial .product-card__badges,
.product-card--editorial .product-card__quickadd,
.product-card--editorial .product-card__rate,
.product-card--editorial .product-card__cta-mobile{display:none}
.product-card--editorial .product-card__body{text-align:center;padding:.85rem .3rem 0;gap:.3rem}
.product-card--editorial .product-card__title{font-family:var(--ff-display);font-weight:500;font-size:1.05rem}
.product-card--editorial .product-card__prices{justify-content:center}

/* Carte "encadree" : cadre fin qui se teinte au survol, sans effet de levitation.
   Domaine : artisanat, bijoux, produits haut de gamme unitaires. */
.product-card--bordered{border:1.5px solid var(--c-line);border-radius:var(--r-md);box-shadow:none}
.product-card--bordered:hover{transform:none;box-shadow:none;border-color:var(--c-accent)}

/* ===== Categories — presentations pilotees par le CMS (view_variant) ===== */
/* "Grandes cartes" : grille de tuiles plein-image avec titre superpose */
.cat-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:1rem}
.cat-card{position:relative;display:block;border-radius:var(--r-md);overflow:hidden;aspect-ratio:4/3;background:var(--c-soft);text-decoration:none;box-shadow:var(--sh-1)}
.cat-card__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .4s ease}
.cat-card:hover .cat-card__img{transform:scale(1.05)}
.cat-card__body{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.25rem;padding:1rem;text-align:center;background:linear-gradient(to top,rgba(0,0,0,.55),rgba(0,0,0,.12) 60%,rgba(0,0,0,.28));color:#fff}
.cat-card__title{font-family:var(--ff-display);font-weight:600;font-size:1.15rem;line-height:1.2;text-shadow:0 1px 8px rgba(0,0,0,.4)}
.cat-card__count{font-size:.8rem;opacity:.9;letter-spacing:.02em}
@media (max-width:575px){.cat-cards{grid-template-columns:repeat(2,1fr);gap:.6rem}.cat-card__title{font-size:.98rem}}

/* "Pastilles compactes" : rangee horizontale de vignettes rondes + libelle */
.cat-pills{display:flex;gap:1.1rem;overflow-x:auto;padding:.4rem .1rem 1rem;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.cat-pills::-webkit-scrollbar{display:none}
.cat-pill{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:.55rem;width:96px;text-decoration:none;color:var(--c-ink)}
.cat-pill__media{width:82px;height:82px;border-radius:50%;overflow:hidden;background:var(--c-soft);border:1px solid var(--c-line);display:flex;align-items:center;justify-content:center;transition:transform .25s ease,box-shadow .25s ease}
.cat-pill__media img{width:100%;height:100%;object-fit:cover}
.cat-pill:hover .cat-pill__media{transform:translateY(-2px);box-shadow:var(--sh-2);border-color:var(--c-accent)}
.cat-pill__label{font-size:.82rem;font-weight:500;text-align:center;line-height:1.25;max-height:2.5em;overflow:hidden}
@media (max-width:575px){.cat-pill{width:80px}.cat-pill__media{width:68px;height:68px}}

/* ===== Shop / Filters ===== */
.shop-title{font-family:var(--ff-display);font-weight:600;letter-spacing:-.01em;margin:0}
.shop-header{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;flex-wrap:wrap}
.chip{display:inline-flex;padding:.4rem .9rem;background:#fff;border:1px solid var(--c-line);border-radius:var(--r-pill);color:var(--c-ink);text-decoration:none;font-size:.85rem}
.chip:hover{background:var(--c-ink);color:#fff;border-color:var(--c-ink)}
.filters{background:#fff;border:1px solid var(--c-line);border-radius:var(--r-md);padding:1.25rem;position:sticky;top:160px}
.filter-block{padding:1rem 0;border-bottom:1px solid var(--c-line)}
.filter-block:last-child{border-bottom:0}
.filter-title{font-weight:600;font-size:.85rem;letter-spacing:.05em;text-transform:uppercase;color:var(--c-ink-2);margin-bottom:.75rem}

/* ===== Pagination (legacy, non utilisée depuis l'infinite scroll) ===== */
.pagination .page-link{color:var(--c-ink);border:1px solid var(--c-line);margin:0 2px;border-radius:var(--r-md)}
.pagination .page-item.active .page-link{background:var(--c-ink);color:#fff;border-color:var(--c-ink)}
.pagination .page-link:hover{background:var(--c-bg);border-color:var(--c-ink)}

/* ===== Infinite scroll (boutique/catégorie) ===== */
.shop-inf{margin-top:2.5rem;text-align:center;color:var(--c-ink-2)}
.shop-inf__sentinel{height:1px;width:100%}
.shop-inf__loader{display:inline-flex;align-items:center;gap:.6rem;padding:.75rem 1.25rem;background:#fff;border:1px solid var(--c-line);border-radius:var(--r-pill);font-size:.88rem;box-shadow:var(--sh-1)}
.shop-inf__loader[hidden]{display:none}
.shop-inf__spinner{width:16px;height:16px;border:2px solid var(--c-line);border-top-color:var(--c-ink);border-radius:50%;animation:shopInfSpin .7s linear infinite}
@keyframes shopInfSpin{to{transform:rotate(360deg)}}
.shop-inf__end{padding:1.5rem 0;font-size:.85rem;color:var(--c-muted);letter-spacing:.05em;text-transform:uppercase}
.shop-inf__end[hidden]{display:none}
.shop-inf__error{padding:1rem;background:#FDF5F3;border:1px solid #f3d6d0;border-radius:var(--r-md);display:inline-flex;align-items:center;justify-content:center;gap:.4rem;color:var(--c-danger);font-size:.88rem}
.shop-inf__error[hidden]{display:none}

/* Anim d'entrée des cartes chargées dynamiquement */
.shop-inf__new{animation:shopInfIn .35s cubic-bezier(.2,.6,.2,1) both}
@keyframes shopInfIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* ===== Product detail (pd-*) ===== */
.pd-wrap{background:var(--c-bg)}
.pd-gallery{display:grid;grid-template-columns:96px minmax(0,1fr);gap:1rem;align-items:start}
.pd-gallery.pd-gallery--solo{grid-template-columns:1fr}
@media (max-width:991px){ .pd-gallery,.pd-gallery.pd-gallery--solo{grid-template-columns:1fr} }

.pd-thumbs-v{display:flex;flex-direction:column;gap:.6rem;max-height:720px;overflow:auto;padding-right:2px}
.pd-thumbs-v::-webkit-scrollbar{width:4px}
.pd-thumbs-v::-webkit-scrollbar-thumb{background:var(--c-line);border-radius:2px}
.pd-thumbs-h{display:none;gap:.5rem;margin-top:.75rem;overflow-x:auto;padding-bottom:.25rem}
@media (max-width:991px){ .pd-thumbs-v{display:none} .pd-thumbs-h{display:flex} }

.pd-thumb{flex:0 0 92px;width:92px;aspect-ratio:1/1;height:auto;border:1px solid var(--c-line);border-radius:var(--r-md);overflow:hidden;background:#fff;padding:0;cursor:pointer;position:relative;transition:.15s}
.pd-thumb:hover{border-color:var(--c-muted)}
.pd-thumb.active{border-color:var(--c-ink);box-shadow:0 0 0 2px #fff inset}
.pd-thumb img{width:100%;height:100%;object-fit:contain;display:block;padding:4px}
@media (max-width:991px){ .pd-thumb{width:76px;flex:0 0 76px} }

/* Zone image principale : grande, carrée (norme e-commerce),
   object-fit: contain pour ne JAMAIS rogner le produit. */
.pd-main{position:relative;background:#fff;border:1px solid var(--c-line);border-radius:var(--r-lg);overflow:hidden;aspect-ratio:1/1;box-shadow:var(--sh-1);width:100%;max-width:760px;margin-inline:auto}
/* Si image seule, centre et laisse respirer */
.pd-gallery--solo .pd-main{margin-inline:auto}
.pd-main img{width:100%;height:100%;object-fit:contain;padding:1.25rem;cursor:zoom-in;transition:transform .4s ease;background:linear-gradient(180deg,#fff,var(--c-soft))}
.pd-main.zoomed img{cursor:zoom-out;transform:scale(1.6);padding:0}
.pd-nav{position:absolute;top:50%;transform:translateY(-50%);width:42px;height:42px;border-radius:50%;border:0;background:rgba(255,255,255,.92);box-shadow:var(--sh-1);display:flex;align-items:center;justify-content:center;font-size:1.15rem;color:var(--c-ink);cursor:pointer;transition:.15s}
.pd-nav:hover{background:#fff;transform:translateY(-50%) scale(1.05)}
.pd-nav--prev{left:12px}
.pd-nav--next{right:12px}

.pd-info{position:sticky;top:130px}
@media (max-width:991px){ .pd-info{position:static;padding-bottom:5.5rem} }

.pd-eyebrow{display:inline-block;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--c-accent-dk);text-decoration:none;font-weight:600;margin-bottom:.35rem}
.pd-eyebrow:hover{color:var(--c-accent);text-decoration:underline}
.pd-title{font-family:var(--ff-display);font-weight:600;letter-spacing:-.015em;font-size:1.6rem;line-height:1.2;margin:0 0 .5rem}
.pd-sub{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem;margin-bottom:.5rem}
.pd-meta{color:var(--c-muted);font-size:.8rem}
.pd-tag{background:var(--c-danger);color:#fff;font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;padding:.15rem .5rem;border-radius:var(--r-pill)}
.pd-rate-block{display:inline-flex;align-items:center;gap:.35rem}
.pd-rate-block .stars{font-size:.95rem}
.pd-rate-num{font-weight:600;color:var(--c-ink);font-size:.85rem}
.pd-sales{display:inline-flex;align-items:center;gap:.3rem;color:var(--c-success);font-size:.82rem;font-weight:500}
.pd-sales .bi{font-size:.88rem}

.pd-prices{display:flex;align-items:baseline;gap:.75rem;margin:.25rem 0 .65rem;flex-wrap:wrap}
.price-main{font-family:var(--ff-display);font-size:1.55rem;font-weight:600;color:var(--c-ink);letter-spacing:-.01em}
.price-old{color:var(--c-muted);text-decoration:line-through;font-size:.9rem}
.price-save{background:var(--c-danger);color:#fff;font-size:.72rem;padding:.15rem .5rem;border-radius:var(--r-pill);font-weight:600;letter-spacing:.03em}

.pd-short{color:var(--c-ink-2);line-height:1.5;margin-bottom:.35rem;font-size:.9rem}
.pd-sep{border:0;border-top:1px solid var(--c-line);margin:.75rem 0}

.pd-option-group{margin:.65rem 0}
.pd-option-group .form-label{font-size:.85rem;margin-bottom:.3rem}
.pd-option-values{display:flex;flex-wrap:wrap;gap:.35rem}
.pd-option-value{cursor:pointer;position:relative}
.pd-option-value input{position:absolute;opacity:0;pointer-events:none}
.pd-option-value span{display:inline-block;padding:.4rem .85rem;border:1px solid var(--c-line);border-radius:var(--r-pill);background:#fff;font-size:.82rem;color:var(--c-ink);transition:.15s;user-select:none}
.pd-option-value:hover span{border-color:var(--c-ink-2)}
.pd-option-value input:checked + span{background:var(--c-ink);color:#fff;border-color:var(--c-ink);box-shadow:0 2px 6px rgba(30,27,22,.1)}

.pd-qty-row{display:flex;gap:.5rem;align-items:stretch;margin-top:.75rem}
.pd-qty-row .qty{flex:0 0 auto}
.pd-qty-row .pd-cta{flex:1;min-height:44px;font-size:.95rem}

.qty{display:inline-flex;align-items:center;border:1px solid var(--c-line);border-radius:var(--r-pill);overflow:hidden;background:#fff}
.qty .btn{border:0;border-radius:0;width:34px;height:44px;padding:0;font-size:1rem}
.qty .btn:hover{background:var(--c-bg)}
/* padding:0 OBLIGATOIRE. Le champ porte .form-control de Bootstrap, qui impose
   .75rem de marge interne de CHAQUE cote : sur une largeur de 42px il ne reste
   que 18px pour le chiffre, moins la fleche native du type="number" (~16px).
   La quantite devenait invisible, rognee entre le remplissage et le compteur.
   On retire donc les deux. */
.qty input{width:42px;height:44px;padding:0;border:0;background:transparent;text-align:center;font-weight:600;font-size:.95rem;-moz-appearance:textfield;appearance:textfield}
.qty input::-webkit-outer-spin-button,
.qty input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.qty input:focus{outline:none}

.pd-wish{font-size:.85rem;padding:.25rem 0}
.pd-wish.active{color:var(--c-danger)}
.pd-wish.active .bi-heart::before{content:"\f417"}

/* Description inline, juste après la CTA — clé de conversion */
.pd-inline-desc__lead{color:var(--c-ink);font-weight:500;margin-bottom:.5rem;font-size:.92rem;line-height:1.55}
.pd-inline-desc__lead p:last-child{margin-bottom:0}
.pd-inline-desc{margin-top:.75rem;padding-top:.75rem;border-top:1px solid var(--c-line)}
.pd-inline-desc__title{font-family:var(--ff-display);font-weight:600;font-size:1rem;margin:0 0 .4rem;letter-spacing:-.01em}
.pd-inline-desc__body{font-size:.88rem;line-height:1.55;color:var(--c-ink-2);max-height:7.5em;overflow:hidden;position:relative;transition:max-height .25s ease}
.pd-inline-desc__body.is-open{max-height:none}
.pd-inline-desc__body:not(.is-open)::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2.4em;background:linear-gradient(180deg,transparent,#fff)}
.pd-inline-desc__body p{margin:0 0 .5rem}
.pd-inline-desc__body img{max-width:100%;height:auto;border-radius:var(--r-sm)}
.pd-inline-desc__body ul{padding-left:1.1rem;margin:.25rem 0}
.pd-inline-desc__toggle{border:0;background:none;padding:.25rem 0;margin-top:.35rem;color:var(--c-ink);font-size:.82rem;font-weight:600;cursor:pointer}
.pd-inline-desc__toggle:hover{color:var(--c-accent-dk)}
.pd-inline-desc__toggle .less{display:none}
.pd-inline-desc__toggle.is-open .more{display:none}
.pd-inline-desc__toggle.is-open .less{display:inline}
/* PDDESC:DEBUT — description longue : un mode par appareil (/cms > Page produit,
   product_description_display). Ne vise que .pd-desc : sans reglage, la fiche
   garde le balisage d'origine et les regles ci-dessus seules.
   Modes : full (entiere), folded (debut + « Lire plus »), accordion (titre seul).
   Mobile = moins de 992 px, la largeur ou la fiche passe sur une colonne. */
.pd-desc .pd-inline-desc__body{max-height:var(--pd-desc-max,7.5em)}
.pd-desc .pd-inline-desc__body.is-open{max-height:none}
.pd-desc .pd-inline-desc__body:not(.is-open)::after{height:min(2.4em,50%)}
.pd-desc__head{display:none;width:100%;align-items:center;justify-content:space-between;gap:.75rem;padding:.15rem 0;border:0;background:none;color:inherit;font:inherit;letter-spacing:inherit;text-align:start;cursor:pointer}
.pd-desc__head svg{flex-shrink:0;transition:transform .2s ease}
.pd-desc.is-expanded .pd-desc__head svg{transform:rotate(180deg)}
.pd-desc__head:focus-visible{outline:2px solid var(--c-gold,#999);outline-offset:3px}
/* Contenu court (shop.js) : rien a replier. */
.pd-desc--short .pd-inline-desc__body{max-height:none}
.pd-desc--short .pd-inline-desc__body::after{display:none}
.pd-desc--short .pd-inline-desc__toggle{display:none}
@media (min-width:992px){
  .pd-desc--d-full .pd-inline-desc__body{max-height:none}
  .pd-desc--d-full .pd-inline-desc__body::after{display:none}
  .pd-desc--d-full .pd-inline-desc__toggle,
  .pd-desc--d-accordion .pd-inline-desc__toggle,
  .pd-desc--d-accordion .pd-desc__label{display:none}
  .pd-desc--d-accordion .pd-desc__head{display:flex}
  .pd-desc--d-accordion .pd-inline-desc__body{max-height:none}
  .pd-desc--d-accordion .pd-inline-desc__body::after{display:none}
  .pd-desc--d-accordion:not(.is-expanded) .pd-inline-desc__body{display:none}
  .pd-desc--d-accordion:not(.is-expanded) .pd-inline-desc__title{margin-bottom:0}
}
@media (max-width:991.98px){
  .pd-desc--m-full .pd-inline-desc__body{max-height:none}
  .pd-desc--m-full .pd-inline-desc__body::after{display:none}
  .pd-desc--m-full .pd-inline-desc__toggle,
  .pd-desc--m-accordion .pd-inline-desc__toggle,
  .pd-desc--m-accordion .pd-desc__label{display:none}
  .pd-desc--m-accordion .pd-desc__head{display:flex}
  .pd-desc--m-accordion .pd-inline-desc__body{max-height:none}
  .pd-desc--m-accordion .pd-inline-desc__body::after{display:none}
  .pd-desc--m-accordion:not(.is-expanded) .pd-inline-desc__body{display:none}
  .pd-desc--m-accordion:not(.is-expanded) .pd-inline-desc__title{margin-bottom:0}
}
/* PDDESC:FIN */

.pd-assurances{list-style:none;padding:.85rem 1rem;margin:.85rem 0 0;background:#fff;border:1px solid var(--c-line);border-radius:var(--r-md);display:grid;grid-template-columns:1fr 1fr;gap:.55rem .85rem}
@media (max-width:576px){ .pd-assurances{grid-template-columns:1fr;gap:.5rem} }
.pd-assurances li{display:flex;gap:.55rem;align-items:flex-start}
.pd-assurances .bi{color:var(--c-accent);font-size:1.05rem;flex-shrink:0;line-height:1.2}
.pd-assurances strong{display:block;font-size:.8rem;font-weight:600;line-height:1.25}
.pd-assurances small{color:var(--c-muted);font-size:.72rem;line-height:1.2}

.pd-share{display:flex;align-items:center;gap:.35rem;margin-top:.65rem}
.pd-share a, .pd-share button{width:32px;height:32px;border-radius:50%;border:1px solid var(--c-line);background:#fff;color:var(--c-ink);display:inline-flex;align-items:center;justify-content:center;transition:.15s;cursor:pointer;font-size:.85rem}
.pd-share a:hover, .pd-share button:hover{background:var(--c-ink);color:#fff;border-color:var(--c-ink)}

/* Tabs (infos complémentaires, compact) */
.pd-tablist{border:0;gap:.25rem}
.pd-tablist .nav-link{color:var(--c-ink-2);font-weight:500;border:0;border-bottom:2px solid transparent;border-radius:0;padding:.55rem 1rem;background:transparent;font-size:.9rem}
.pd-tablist .nav-link:hover{color:var(--c-ink);border-color:var(--c-line)}
.pd-tablist .nav-link.active{color:var(--c-ink);border-color:var(--c-ink);background:transparent}
.pd-tabpanels{background:#fff;border:1px solid var(--c-line);border-top:0;border-radius:0 0 var(--r-md) var(--r-md);padding:1rem 1.25rem}
.pd-rich{line-height:1.6;color:var(--c-ink-2);font-size:.9rem}
.pd-rich img{max-width:100%;height:auto;border-radius:var(--r-sm)}
.pd-rich ul{padding-left:1.1rem;margin:0}
.pd-rich h2,.pd-rich h3,.pd-rich h4{color:var(--c-ink);font-family:var(--ff-display);margin:.75rem 0 .35rem}
/* Descriptions collees depuis un autre site (marketplace…) : des largeurs figees
   en pixels (style="width:533px") depassaient de l'ecran sur mobile, texte coupe
   a droite (fiche 250, 30/09/2026). Aucun element ne depasse sa colonne, un mot
   trop long passe a la ligne. Sans effet sur un texte ordinaire : mesure par
   tmp/test_description_debordement.php. */
.pd-rich *,.pd-shortdesc *{max-width:100%}
.pd-rich,.pd-shortdesc{overflow-wrap:break-word}

/* Sticky mobile bar */
.pd-sticky-bar{position:fixed;bottom:0;left:0;right:0;background:#fff;border-top:1px solid var(--c-line);padding:.65rem .85rem;display:flex;align-items:center;gap:.75rem;z-index:1030;box-shadow:0 -6px 20px rgba(30,27,22,.06)}
.pd-sticky-info{flex:1;min-width:0}
.pd-sticky-cta{padding:.65rem 1.5rem}

/* ===== Cart ===== */
.card-block{background:#fff;border:1px solid var(--c-line);border-radius:var(--r-md);padding:1.5rem}
.cart-list{background:#fff;border:1px solid var(--c-line);border-radius:var(--r-md);overflow:hidden}
/* ===== Complements proposes dans le panier (cross-sell) ===== */
.cart-addons{border:1px solid var(--c-line);border-radius:var(--r-md);overflow:hidden;background:#fff}
.cart-addons__head{display:flex;align-items:baseline;justify-content:space-between;gap:.75rem;padding:.8rem 1rem;border-bottom:1px solid var(--c-line);background:var(--c-soft)}
.cart-addons__title{font-weight:700;font-size:.95rem;color:var(--c-ink)}
.cart-addons__hint{font-size:.78rem;color:var(--c-muted)}
.cart-addon{display:grid;grid-template-columns:56px 1fr auto auto;gap:.9rem;align-items:center;padding:.75rem 1rem;border-bottom:1px solid var(--c-line)}
.cart-addon:last-child{border-bottom:0}
.cart-addon__media img{width:56px;height:56px;object-fit:cover;border-radius:var(--r-sm);display:block}
.cart-addon__label{font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;font-weight:700;color:var(--c-accent,#a97e4f)}
.cart-addon__name{font-size:.9rem;font-weight:600;color:var(--c-ink);text-decoration:none;line-height:1.25}
.cart-addon__name:hover{text-decoration:underline}
.cart-addon__price{font-weight:700;font-size:.95rem;white-space:nowrap}
.cart-addon__old{display:block;font-weight:400;font-size:.78rem;color:var(--c-muted);text-decoration:line-through}
.cart-addon__cta{margin:0}
@media (max-width:575.98px){
  /* Le prix passe sous le nom : a 56px d'image, quatre colonnes ecrasent le
     libelle du produit au point de le rendre illisible. */
  .cart-addon{grid-template-columns:48px 1fr auto;row-gap:.35rem}
  .cart-addon__media img{width:48px;height:48px}
  .cart-addon__price{grid-column:2;grid-row:2;text-align:left}
  .cart-addon__cta{grid-column:3;grid-row:1 / span 2}
}

.cart-row{display:grid;grid-template-columns:84px 1fr auto auto auto auto;gap:1rem;align-items:center;padding:1rem 1.25rem;border-bottom:1px solid var(--c-line)}
.cart-row:last-child{border-bottom:0}
.cart-row__img img{width:84px;height:84px;object-fit:cover;border-radius:var(--r-sm)}
.cart-row__title{font-weight:500;text-decoration:none;color:var(--c-ink);display:block}
.cart-row__title:hover{color:var(--c-accent-dk)}
.cart-row__price{color:var(--c-ink-2)}
.cart-row__total{font-weight:600}
@media (max-width:768px){
  .cart-row{grid-template-columns:72px 1fr auto;row-gap:.5rem}
  .cart-row__qty,.cart-row__price,.cart-row__total{grid-column:2 / span 2}
  .cart-row__remove{grid-column:3;justify-self:end}
}

.summary{background:#fff;border:1px solid var(--c-line);border-radius:var(--r-md);padding:1.5rem}
.summary-title{font-family:var(--ff-display);font-weight:600;margin:0 0 1rem}
.summary .d-flex{padding:.25rem 0}

/* ===== Checkout ===== */
.pay-opt{display:flex;align-items:center;gap:.5rem;padding:.9rem 1rem;border:1px solid var(--c-line);border-radius:var(--r-md);background:#fff;cursor:pointer;height:100%;transition:.15s}
.pay-opt input{accent-color:var(--c-ink)}
.pay-opt:has(input:checked){border-color:var(--c-ink);background:var(--c-bg)}
.success-ring{width:90px;height:90px;border-radius:50%;background:var(--c-success);color:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:3rem}

/* ===== Account ===== */
.account-nav{background:#fff;border:1px solid var(--c-line);border-radius:var(--r-md);padding:.5rem;display:flex;flex-direction:column}
.account-nav__link{padding:.7rem 1rem;color:var(--c-ink);text-decoration:none;border-radius:var(--r-sm);font-size:.95rem}
.account-nav__link:hover{background:var(--c-bg);color:var(--c-ink)}
.account-nav__link.active{background:var(--c-ink);color:#fff}
.stat-card{background:#fff;border:1px solid var(--c-line);border-radius:var(--r-md);padding:1.25rem}
.stat-card__num{font-family:var(--ff-display);font-size:2rem;font-weight:600;line-height:1}
.stat-card__label{color:var(--c-muted);font-size:.85rem;margin-top:.25rem}
.status-chip{display:inline-block;padding:.2rem .65rem;border-radius:var(--r-pill);color:#fff;font-size:.75rem}

/* ===== Footer ===== */
.site-footer{background:var(--c-ink);color:rgba(255,255,255,.84);margin-top:4rem}
.site-footer a{color:rgba(255,255,255,.84);text-decoration:none;transition:color .15s}
.site-footer a:hover{color:#fff;text-decoration:none}

/* Bande "benefits" — bandeau clair en tête de footer */
.footer-top{background:var(--c-ink);border-bottom:1px solid rgba(255,255,255,.06)}
.footer-benefits{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;padding:1.5rem 0}
.footer-benefit{display:flex;align-items:center;gap:.85rem;padding:.5rem .25rem}
.footer-benefit i{font-size:1.5rem;color:var(--c-gold);flex-shrink:0;line-height:1}
.footer-benefit strong{display:block;font-size:.9rem;color:#fff;font-weight:600;line-height:1.2}
.footer-benefit span{display:block;font-size:.78rem;color:rgba(255,255,255,.62);margin-top:.15rem}

/* Bloc principal */
.footer-main{padding:3rem 0 2rem}
.footer-logo-link{display:inline-block;margin-bottom:1rem}
.footer-logo{height:56px;width:auto;display:block}
.footer-tagline{color:rgba(255,255,255,.62);font-size:.9rem;line-height:1.6;margin-bottom:1.25rem;max-width:28rem}

.footer-contact{margin:0;display:flex;flex-direction:column;gap:.55rem}
.footer-contact li{display:flex;align-items:flex-start;gap:.65rem;font-size:.88rem;color:rgba(255,255,255,.84);line-height:1.4}
.footer-contact li i{color:var(--c-gold);font-size:.95rem;margin-top:.15rem;flex-shrink:0;width:1rem;text-align:center}
.footer-contact a{color:rgba(255,255,255,.84)}
.footer-contact a:hover{color:#fff}

.footer-h{letter-spacing:.08em;text-transform:uppercase;font-size:.78rem;color:#fff;font-weight:600;margin-bottom:1rem;position:relative;padding-bottom:.6rem}
.footer-h::after{content:"";position:absolute;left:0;bottom:0;width:32px;height:2px;background:var(--c-gold);border-radius:2px}

.footer-links{margin:0;display:flex;flex-direction:column;gap:.5rem}
.footer-links li{font-size:.88rem}
.footer-links a{display:inline-flex;align-items:center;color:rgba(255,255,255,.70)}
.footer-links a::before{content:"";width:0;height:1px;background:var(--c-gold);margin-right:0;transition:all .2s ease}
.footer-links a:hover{color:#fff}
.footer-links a:hover::before{width:10px;margin-right:.5rem}

.footer-socials{display:flex;gap:.6rem;flex-wrap:wrap}
.footer-socials a{width:38px;height:38px;border-radius:50%;border:1px solid rgba(255,255,255,.15);display:inline-flex;align-items:center;justify-content:center;color:rgba(255,255,255,.84);transition:.2s;font-size:1rem;background:rgba(255,255,255,.03)}
.footer-socials a:hover{background:var(--c-gold);color:var(--c-ink);border-color:var(--c-gold);transform:translateY(-2px);text-decoration:none}

/* Barre copyright */
.footer-bottom{border-top:1px solid rgba(255,255,255,.08);padding:1.1rem 0;background:rgba(0,0,0,.15);color:rgba(255,255,255,.62)}
.footer-bottom .small{color:rgba(255,255,255,.62)}
.text-muted-2{color:var(--c-muted)}
.footer-payments{flex-wrap:wrap}
.pay-badge{display:inline-flex;align-items:center;gap:.3rem;padding:.3rem .6rem;border-radius:var(--r-pill);background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);color:rgba(255,255,255,.84);font-size:.75rem}
.pay-badge i{color:var(--c-gold);font-size:.85rem}

/* ===== Benefits ===== */
.benefits .display-6{color:var(--c-accent)}

/* ===== Breadcrumb ===== */
.breadcrumb-wrap{background:transparent;padding:.65rem 0 0}
.breadcrumb-wrap .breadcrumb{font-size:.8rem;margin-bottom:0}

/* ===== Buttons override ===== */
.btn-dark{background:var(--c-ink);border-color:var(--c-ink)}
.btn-dark:hover{background:var(--c-accent-dk);border-color:var(--c-accent-dk)}
.btn-outline-dark{color:var(--c-ink);border-color:var(--c-ink)}
.btn-outline-dark:hover{background:var(--c-ink);border-color:var(--c-ink)}
.rounded-pill{border-radius:var(--r-pill) !important}

/* ===== Empty state ===== */
.empty-state{background:#fff;border:1px dashed var(--c-line);border-radius:var(--r-md)}

/* ===== Toasts ===== */
.toast-host .toast{background:#fff;border:1px solid var(--c-line);border-radius:var(--r-md);box-shadow:var(--sh-2)}

/* ============================================================================
   RESPONSIVE MOBILE — audit et corrections zero-bug
   ============================================================================ */

/* === Tablette (<992px) === */
@media (max-width:991.98px){
  .container-xxl{padding-inline:1rem}
  .page-title{font-size:1.5rem}
  .section-title{font-size:1.35rem}
  .shop-title{font-size:1.3rem}
  .section-head{flex-wrap:wrap;gap:.5rem;align-items:baseline}

  /* Filtres catalogue : plus de sticky encombrant sur tablette/mobile */
  .filters{position:static !important;top:auto !important;padding:1rem}

  /* Produit : info plus en sticky mobile */
  .pd-info{position:static !important;top:auto !important;padding-bottom:5.5rem}

  /* Pagination : wrap sur plusieurs lignes */
  .pagination{flex-wrap:wrap;gap:4px}
  .pagination .page-item .page-link{padding:.35rem .6rem;font-size:.85rem}
}

/* === Mobile (<768px) === */
@media (max-width:767.98px){
  /* Header — compaction logo + icônes, hauteur réduite */
  .site-header .bar-main > .container-xxl{padding-block:.55rem;gap:.5rem;min-height:60px}
  .brand-text{font-size:1.1rem}
  .brand{max-width:160px}
  .brand-logo{height:38px;max-height:38px}
  .icon-link{width:36px;height:36px;font-size:1.1rem}
  .cart-count{top:0;right:0}

  /* Breadcrumb — compact + wrap */
  .breadcrumb-wrap{padding:.5rem 0 0}
  .breadcrumb-wrap .breadcrumb{flex-wrap:wrap;row-gap:.15rem;font-size:.75rem}

  /* Section spacing */
  .section.py-5{padding-top:2rem !important;padding-bottom:2rem !important}
  .section.py-4{padding-top:1.25rem !important;padding-bottom:1.25rem !important}

  /* Hero */
  .hero .carousel-control-prev,.hero .carousel-control-next{width:12%}

  /* Cards produits — grille 2 cols confortable, typographie compacte */
  .product-card__body{padding:.6rem .7rem .75rem;gap:.25rem}
  .product-card__title{font-size:.85rem;max-height:2.3em}
  .price{font-size:.95rem}
  .price-old{font-size:.78rem}
  .product-card__prices{gap:.35rem}
  .badge-chip{top:.45rem;left:.45rem;padding:.15rem .4rem;font-size:.62rem}
  .badge-chip--top{left:auto;right:.45rem}
  .wish-btn{width:30px;height:30px;bottom:.4rem;right:.4rem}

  /* Tiles catégories */
  .cat-tile{padding:.6rem}
  .cat-tile__img{width:68px;height:68px;margin-bottom:.5rem}
  .cat-tile__label{font-size:.78rem}

  /* Fiche produit */
  .pd-wrap{padding-top:.5rem}
  .pd-main{max-width:100%;border-radius:var(--r-md)}
  .pd-main img{padding:.85rem}
  .pd-nav{width:36px;height:36px;font-size:1rem}
  .pd-title{font-size:1.25rem}
  .price-main{font-size:1.35rem}
  .pd-option-value span{padding:.35rem .75rem;font-size:.8rem}
  .qty .btn{width:36px;height:42px}
  .qty input{width:40px;height:42px}
  .pd-qty-row{flex-wrap:nowrap}
  .pd-qty-row .pd-cta{min-height:42px;font-size:.9rem;padding-inline:.6rem}
  .pd-cta .bi{display:none}
  .pd-assurances{padding:.7rem;grid-template-columns:1fr 1fr;gap:.4rem .6rem}
  .pd-assurances strong{font-size:.74rem}
  .pd-assurances small{font-size:.68rem}
  .pd-tablist{overflow-x:auto;flex-wrap:nowrap;white-space:nowrap;padding-bottom:2px}
  .pd-tablist::-webkit-scrollbar{display:none}
  .pd-tabpanels{padding:.85rem 1rem}

  /* Pages d'authentification */
  .auth .card-block,.card-block{padding:1.1rem}

  /* Panier — cart-row : photo + titre + actions alignés proprement */
  .cart-row{grid-template-columns:68px 1fr auto;column-gap:.75rem;row-gap:.35rem;padding:.85rem}
  .cart-row__img img{width:68px;height:68px}
  .cart-row__title{font-size:.92rem}
  .cart-row__qty{grid-column:1 / span 2;grid-row:2}
  .cart-row__price{display:none}
  .cart-row__total{grid-column:3;grid-row:2;align-self:center;text-align:right;font-size:.95rem}
  .cart-row__remove{grid-column:3;grid-row:1;align-self:start;justify-self:end}
  .cart-row__remove .bi{font-size:1.1rem}

  /* Résumé panier / checkout : prend toute la place, scroll naturel */
  .summary{padding:1rem}
  .summary-title{font-size:1rem}

  /* Checkout — bloc paiement pleine largeur */
  .pay-opt{padding:.7rem .85rem;font-size:.9rem}

  /* Compte — nav horizontal scroll */
  .account-nav{flex-direction:row;overflow-x:auto;gap:.25rem;padding:.4rem;flex-wrap:nowrap}
  .account-nav__link{flex:0 0 auto;white-space:nowrap;padding:.55rem .85rem;font-size:.85rem}
  .account-nav__link i{margin-right:.35rem}

  /* Footer mobile/tablette */
  .site-footer{margin-top:2.5rem}
  .footer-benefits{grid-template-columns:repeat(2,1fr);gap:.5rem;padding:1rem 0}
  .footer-benefit{padding:.4rem .25rem}
  .footer-benefit i{font-size:1.25rem}
  .footer-benefit strong{font-size:.82rem}
  .footer-benefit span{font-size:.72rem}
  .footer-main{padding:2rem 0 1.5rem}
  .footer-logo{height:48px}
  .footer-tagline{max-width:none}
  .footer-socials{justify-content:flex-start}
  .footer-payments{justify-content:flex-start}

  /* Alerts */
  .alert{font-size:.9rem}

  /* Mini hacks de sécurité : rien ne déborde en X */
  .row{--bs-gutter-x:1rem}
}

/* === Petit mobile (<576px) === */
@media (max-width:575.98px){
  :root{ --r-lg: 14px; }

  /* Header : toolbar encore plus fine */
  .site-header .bar-main > .container-xxl{gap:.4rem}
  .brand-text{font-size:1.05rem}
  .brand{max-width:130px}
  .brand-logo{height:34px;max-height:34px}

  /* Hero plus bas */
  .hero .carousel-indicators [data-bs-target]{width:22px;height:3px}

  /* 1 colonne pour les grandes rows sur XS */
  .shop-header{gap:.25rem}

  /* Produit — titre compact */
  .pd-title{font-size:1.15rem;line-height:1.2}
  .pd-prices{gap:.55rem}
  .pd-assurances{grid-template-columns:1fr}
  .pd-tablist .nav-link{padding:.5rem .8rem;font-size:.85rem}

  /* Sticky CTA mobile — laisser respirer le bas */
  .pd-sticky-bar{padding:.55rem .7rem;gap:.55rem}
  .pd-sticky-bar .small{font-size:.72rem}
  .pd-sticky-cta{padding:.55rem 1.1rem;font-size:.85rem}

  /* Cart row en XS : titre + qté + total sur 2 lignes clean */
  .cart-row__total{font-size:.9rem}

  /* Express checkout — card encore plus serré */
  .ex-title{font-size:1.35rem}
  .ex-card{padding:.85rem .9rem}
  .ex-step__title{font-size:.9rem}

  /* Tableaux compte : scroll horizontal */
  .table-responsive{margin:0 -.5rem;padding:0 .5rem}

  /* Checkout payment options : 1 col */
  .pay-opt{font-size:.88rem}

  /* Filtres shop : 2 col pour prix min/max */
  .filter-block{padding:.65rem 0}
  .filter-title{font-size:.78rem}

  /* Page titles */
  .page-title{font-size:1.3rem}
  .section-title{font-size:1.15rem}

  /* Empty state compact */
  .empty-state{padding:1.5rem 1rem !important}
  .empty-state .display-4{font-size:2rem}

  /* 404 */
  .display-1{font-size:3rem}

  /* Footer — compact sur petit mobile */
  .footer-benefits{grid-template-columns:1fr 1fr;gap:.25rem}
  .footer-benefit{gap:.6rem}
  .footer-main{padding:1.5rem 0 1rem}
  .footer-logo{height:42px}
  .pay-badge{padding:.25rem .5rem;font-size:.7rem}
}

/* === Très petit mobile (<380px) === */
@media (max-width:379.98px){
  .brand-text{font-size:.95rem}
  .brand{max-width:110px}
  .brand-logo{height:30px;max-height:30px}
  .btn{font-size:.85rem}
  .hero .carousel-control-prev,.hero .carousel-control-next{display:none}
}

/* Touch targets minimums (WCAG 2.5.5) */
@media (pointer:coarse){
  .btn, .btn-sm, .icon-link, .pd-thumb, .pd-option-value, .account-nav__link,
  .nav-link, .form-select, .page-link {
    min-height:42px;
  }
  .qty .btn{min-height:40px}
}

/* Reduce motion respect utilisateur */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important}
}

/* ============================================================================
   FASHION EDITORIAL OVERRIDE — DA-A « Black Ivory + Cognac »
   - Pure CSS, ordre de cascade en LAST POSITION (gagne sur tout ce qui précède).
   - Aucun nouveau sélecteur introduit : tout cible le markup déjà rendu.
   - Aucun état JS modifié (.active, .show, .is-active, .is-done, .is-invalid…).
   (Tokens de ce bloc consolidés dans l'unique :root en tete de fichier.)
   ============================================================================ */

/* --- Body & poids — l'ancien CSS forçait 700 partout : on revient à 400 --- */
html, body{
  font-family: var(--ff-body);
  font-weight: 400;
  letter-spacing: .005em;
  color: var(--c-ink);
}
body, p, li, td, th, a, span, label, button, .btn{ font-weight: 400; }
strong, b{ font-weight: 600; }
input, textarea, select, .form-control, .form-select{ font-weight: 400; }

/* --- Hiérarchie typographique éditoriale --------------------------------- */
h1, h2, h3, h4, h5, h6,
.brand-text,
.page-title, .section-title, .shop-title,
.pd-title, .price-main,
.summary-title, .stat-card__num,
.cat-editorial__title, .cat-slider__title,
.pd-inline-desc__title, .ex-title{
  font-family: var(--ff-display);
  font-weight: 500;
  letter-spacing: -.01em;
  color: var(--c-ink);
}
h1, .page-title, .pd-title{ font-weight: 500; }
.section-title, .shop-title{ font-size: 2rem; letter-spacing: -.015em; }
.brand-text{ font-weight: 600; letter-spacing: .04em; text-transform: uppercase; font-size: 1.2rem; }

/* Eyebrow / micro-typo uppercase — la signature fashion */
.pd-eyebrow,
.cat-editorial__eyebrow,
.filter-title,
.footer-h,
.section-more,
.badge-chip,
.stat-card__label,
.chip,
.account-nav__link,
.pd-tablist .nav-link,
.pd-option-value span,
.form-label,
.breadcrumb,
.topbar-phone, .topbar-free{
  font-family: var(--ff-eyebrow);
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.footer-h{ font-size: .72rem; letter-spacing: .14em; }
.filter-title{ font-size: .72rem; letter-spacing: .15em; }
.pd-eyebrow{ font-size: .68rem; letter-spacing: .14em; }
.section-more{ font-size: .72rem; letter-spacing: .14em; }
.section-more:hover{ color: var(--c-ink); text-decoration: underline; text-underline-offset: 3px; }

/* --- Header --------------------------------------------------------------- */
.site-header{ box-shadow: none; }
.site-header .bar-top{ font-size: .78rem; letter-spacing: .04em; }
/* Hauteur de barre pilotable depuis /cms (Palette) ; 84px = valeur historique desktop */
.site-header .bar-main > .container-xxl{ min-height: var(--header-h, 84px); }
.bar-nav{ background: #fff; border-top: 1px solid var(--c-line); }

.nav-top-list{ gap: 2.25rem; justify-content: center; }
.nav-top-list > li > a{
  font-family: var(--ff-eyebrow);
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-size: var(--nav-fz, .78rem);   /* pilotable depuis /cms (Palette) ; .78rem = valeur historique */
  border-bottom: 1px solid transparent;
  padding: .35rem 0;
}
.nav-top-list > li > a:hover,
.nav-top-list > li > a.active{ border-bottom-color: var(--c-ink); }
.nav-top-list > li.has-children > a::after{ border-color: var(--c-ink-2); }

.search-form .input-group .form-control{
  background: #fff;
  border: 1px solid var(--c-line);
  border-radius: 0;
  height: 44px;
  padding: .55rem .9rem;
}
.search-form .btn-dark{
  border-radius: 0;
  height: 44px;
  background: var(--c-ink);
  border-color: var(--c-ink);
}
.search-suggest{ border-radius: 4px; }

.icon-link{ color: var(--c-ink); }
.icon-link:hover{ background: var(--c-bg); }
.cart-count{ background: var(--c-ink); border-radius: var(--r-pill); }

/* --- Boutons : rectangulaires, uppercase, signature mode ----------------- */
.btn{
  border-radius: 2px;
  font-family: var(--ff-eyebrow);
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-size: .8rem;
  padding: .85rem 1.6rem;
  transition: background-color var(--transition), color var(--transition), border-color var(--transition);
}
.btn-lg{ font-size: .85rem; padding: 1rem 2rem; }
.btn-sm{ font-size: .7rem; padding: .5rem 1rem; letter-spacing: .12em; }
.btn-dark, .btn-primary{
  background: var(--c-ink);
  border: 1px solid var(--c-ink);
  color: #fff;
}
.btn-dark:hover, .btn-primary:hover{
  background: transparent;
  color: var(--c-ink);
  border-color: var(--c-ink);
}
.btn-outline-dark{
  background: transparent;
  border: 1px solid var(--c-ink);
  color: var(--c-ink);
}
.btn-outline-dark:hover{ background: var(--c-ink); color: #fff; }

/* Conserve le pill quand explicitement demandé (chips, qty, filter chips) */
.rounded-pill{ border-radius: var(--r-pill) !important; }
.chip{ border-radius: var(--r-pill); padding: .55rem 1.05rem; font-size: .72rem; letter-spacing: .12em; background: #fff; border: 1px solid var(--c-line); color: var(--c-ink); }
.chip:hover{ background: var(--c-ink); color: #fff; border-color: var(--c-ink); }

/* --- Section heads : éditoriaux, séparateur fin -------------------------- */
.section-head{
  margin-bottom: 2rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--c-line);
  align-items: baseline;
}

/* --- Hero : indicators barre 1px, plus magazine -------------------------- */
.hero .carousel-indicators [data-bs-target]{
  width: 22px; height: 1px;
  background: rgba(255,255,255,.45);
  margin: 0 6px;
  border: 0;
}
.hero .carousel-indicators .active{
  background: #fff;
  width: 36px;
}

/* --- Catégories sliders --------------------------------------------------- */
.cat-slider__card{ border-radius: 2px; box-shadow: none; }
.cat-slider__card:hover{ box-shadow: 0 18px 40px rgba(21,18,13,.12); }
.cat-slider__title{ font-family: var(--ff-display); font-weight: 500; letter-spacing: -.01em; }
.cat-slider__count{ letter-spacing: .12em; text-transform: uppercase; font-size: .68rem; }
.cat-slider__index{ letter-spacing: .15em; }

.cat-editorial__card{ border-radius: 2px; box-shadow: none; }
.cat-editorial__card:hover{ box-shadow: 0 18px 40px rgba(21,18,13,.12); }
.cat-editorial__title{ font-family: var(--ff-display); font-weight: 500; }
.cat-editorial__count{ letter-spacing: .12em; text-transform: uppercase; }

.cat-tile{ border-radius: 2px; }
.cat-tile__label{ font-size: .8rem; letter-spacing: .04em; }

/* --- Product card : éditorial (image dominante, sans bordure) ------------ */
.product-card{
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
.product-card:hover{ transform: none; box-shadow: none; }
.product-card__img{
  aspect-ratio: 3/4;
  background: var(--c-bg);
  border-radius: 0;
  overflow: hidden;
}
.product-card__img img{
  transition: transform .8s cubic-bezier(.2,.6,.2,1);
}
.product-card:hover .product-card__img img{ transform: scale(1.04); }
.product-card__body{
  padding: .9rem .25rem 1rem;
  background: transparent;
  gap: .3rem;
}
.product-card__title{
  font-size: .85rem;
  font-weight: 500;
  letter-spacing: .015em;
  line-height: 1.4;
}
.product-card__title a:hover{
  color: var(--c-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.product-card__rate-num{ font-weight: 500; font-size: .72rem; }
.stars{ font-size: .78rem; }

.price{
  font-family: var(--ff-eyebrow);
  font-weight: 600;
  font-size: .92rem;
  letter-spacing: .03em;
  color: var(--c-ink);
}
.price-old{ font-size: .8rem; color: var(--c-muted); }

/* Badges minimalistes (defaut blanc bordé, promo en ink plein) */
.badge-chip{
  background: #fff;
  color: var(--c-ink);
  border: 1px solid var(--c-line);
  font-size: .65rem;
  font-weight: 500;
  letter-spacing: .12em;
  padding: .25rem .6rem;
  top: 1rem; left: 1rem;
  border-radius: 0;
}
.badge-chip--promo{ background: var(--c-ink); color: #fff; border-color: var(--c-ink); }
.badge-chip--top{ background: var(--c-gold); color: var(--c-ink); border-color: var(--c-gold); left: auto; right: 1rem; }

/* Wishlist : visible au hover seulement (desktop), toujours sur mobile via @media */
.wish-btn{
  background: transparent;
  width: 32px; height: 32px;
  bottom: 1rem; right: 1rem;
  color: var(--c-ink);
  opacity: 0;
  backdrop-filter: none;
  transition: opacity .25s ease, background .15s ease, color .15s ease;
}
.product-card:hover .wish-btn,
.wish-btn.active,
.wish-btn:focus-visible{ opacity: 1; }
.wish-btn:hover{ background: rgba(255,255,255,.92); }
.wish-btn.active{ background: transparent; color: var(--c-accent-dk); }
@media (hover: none){
  .wish-btn{ opacity: 1; background: rgba(255,255,255,.92); }
}

/* --- Fiche produit : page éditoriale ------------------------------------ */
.pd-wrap{ background: var(--c-bg); }
.pd-eyebrow{ color: var(--c-ink-2); }
.pd-title{ font-size: 2rem; line-height: 1.1; font-weight: 500; }
.price-main{ font-family: var(--ff-display); font-weight: 500; font-size: 1.6rem; letter-spacing: -.01em; }
.price-save{
  background: transparent;
  color: var(--c-accent-dk);
  border: 1px solid var(--c-accent-dk);
  font-size: .68rem;
  letter-spacing: .12em;
  font-weight: 500;
  border-radius: 0;
  padding: .2rem .5rem;
}
.pd-tag{ border-radius: 0; letter-spacing: .12em; }

.pd-main{
  background: var(--c-bg);
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
.pd-main img{
  background: transparent;
  padding: 1.75rem;
}
.pd-thumb{ border-radius: 0; }
.pd-thumb.active{ border-color: var(--c-ink); box-shadow: none; }
.pd-nav{ border-radius: 50%; box-shadow: var(--sh-1); }

.pd-option-value span{
  border-radius: 0;
  padding: .55rem 1rem;
  font-family: var(--ff-eyebrow);
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: .72rem;
  font-weight: 500;
  border-color: var(--c-line);
}
.pd-option-value input:checked + span{
  background: var(--c-ink);
  color: #fff;
  border-color: var(--c-ink);
  box-shadow: none;
}

.qty{ border-radius: 0; border-color: var(--c-line); }
.qty .btn{ border-radius: 0; padding: 0; letter-spacing: 0; font-size: 1rem; }
.qty input{ font-weight: 500; }

.pd-cta{
  border-radius: 2px !important;
  font-size: .8rem !important;
  letter-spacing: .14em;
  padding: 1rem 1.5rem !important;
  min-height: 48px;
}

.pd-tablist{ border-bottom: 1px solid var(--c-line); }
.pd-tablist .nav-link{
  font-family: var(--ff-eyebrow);
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: .72rem;
  font-weight: 500;
  padding: .85rem 1.2rem;
  border-bottom: 1px solid transparent;
}
.pd-tablist .nav-link.active{
  border-bottom-color: var(--c-ink);
  background: transparent;
}
.pd-tabpanels{ border-radius: 0 0 4px 4px; }

.pd-assurances{
  border-radius: 0;
  border-color: var(--c-line);
}
.pd-assurances .bi{ color: var(--c-accent); }

.pd-share a, .pd-share button{ border-radius: 0; border-color: var(--c-line); }

.pd-inline-desc{ border-top-color: var(--c-line); }
.pd-inline-desc__title{ font-family: var(--ff-display); font-weight: 500; font-size: 1.05rem; }
.pd-inline-desc__toggle{
  font-family: var(--ff-eyebrow);
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: .72rem;
}

.pd-sticky-bar{
  border-top: 1px solid var(--c-line);
  box-shadow: 0 -8px 24px rgba(21,18,13,.06);
}
.pd-sticky-cta{ border-radius: 2px !important; letter-spacing: .12em; }

/* --- Cards génériques (cart, summary, filters, account, empty) ----------- */
.card-block,
.cart-list,
.summary,
.filters,
.stat-card,
.empty-state,
.account-nav,
.pd-tabpanels,
.shop-inf__loader{
  border-radius: 2px;
  border-color: var(--c-line);
  box-shadow: none;
}
.summary-title{ font-size: 1.1rem; letter-spacing: -.01em; }

.cart-row{ border-bottom-color: var(--c-line); }
.cart-row__img img{ border-radius: 0; }
.cart-row__title{ font-weight: 500; }
.cart-row__title:hover{
  color: var(--c-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.cart-row__total{ font-weight: 600; font-family: var(--ff-eyebrow); letter-spacing: .02em; }

/* --- Account ------------------------------------------------------------- */
.account-nav__link{
  border-radius: 0;
  font-family: var(--ff-eyebrow);
  text-transform: uppercase;
  letter-spacing: .1em;
  font-size: .78rem;
  font-weight: 500;
}
.account-nav__link.active{ background: var(--c-ink); color: #fff; }
.stat-card__num{ font-family: var(--ff-display); font-weight: 500; font-size: 2rem; }
.stat-card__label{ font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--c-muted); }
.status-chip{ letter-spacing: .08em; text-transform: uppercase; font-size: .68rem; font-weight: 500; }

/* --- Forms (cohérents partout) ------------------------------------------ */
.form-control, .form-select{
  border-radius: 2px;
  border-color: var(--c-line);
  background: #fff;
  font-size: .92rem;
  padding: .7rem .9rem;
}
.form-control:focus, .form-select:focus{
  border-color: var(--c-ink);
  background: #fff;
  box-shadow: none;
}
.form-label{
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .12em;
  font-weight: 500;
  color: var(--c-ink-2);
  margin-bottom: .35rem;
}

/* --- Pay options (checkout) ---------------------------------------------- */
.pay-opt{
  border-radius: 2px;
  background: #fff;
  border-color: var(--c-line);
}
.pay-opt:has(input:checked){
  border-color: var(--c-ink);
  background: var(--c-bg);
}

/* --- Express checkout (override des styles inline du fichier .php) ------ */
.ex-wrap{ background: linear-gradient(180deg, var(--c-bg), #fff 60%); }
.ex-badge{
  background: var(--c-ink);
  border-radius: 0;
  letter-spacing: .14em;
  padding: .3rem .7rem;
}
.ex-title{ font-family: var(--ff-display); font-weight: 500; font-size: 2.1rem; letter-spacing: -.015em; }
.ex-sub{ color: var(--c-ink-2); }
.ex-card{
  border-radius: 2px;
  box-shadow: none;
  padding: 1.5rem 1.75rem;
  border-color: var(--c-line);
}
.ex-step__title{ font-family: var(--ff-display); font-weight: 500; }
.ex-step__num{ font-family: var(--ff-eyebrow); }
.ex-summary{ border-radius: 2px; box-shadow: none; }
.ex-cta{ border-radius: 2px !important; }

/* --- Footer raffinements -------------------------------------------------- */
.footer-h::after{
  width: 24px;
  height: 1px;
  background: var(--c-gold);
}
.footer-links a{ font-size: .85rem; }
.footer-tagline{ font-size: .88rem; }
.pay-badge{ border-radius: 0; letter-spacing: .08em; }
.footer-benefit strong{ font-weight: 600; letter-spacing: .02em; }
.footer-benefit span{ letter-spacing: .04em; }

/* --- Breadcrumb minimaliste ---------------------------------------------- */
.breadcrumb-wrap .breadcrumb{
  font-size: .68rem;
  color: var(--c-ink-2);
  letter-spacing: .12em;
}
.breadcrumb-item.active{ color: var(--c-ink); font-weight: 600; }
.breadcrumb-item + .breadcrumb-item::before{
  color: var(--c-muted);
  content: "·";
  padding: 0 .65rem;
}

/* --- Pagination ----------------------------------------------------------- */
.pagination .page-link{
  border-radius: 0;
  border-color: var(--c-line);
  color: var(--c-ink);
  font-family: var(--ff-eyebrow);
  font-size: .8rem;
  letter-spacing: .04em;
}
.pagination .page-item.active .page-link{ background: var(--c-ink); border-color: var(--c-ink); }

/* --- Alerts / toast ------------------------------------------------------- */
.alert{ border-radius: 4px; border-left-width: 2px; }
.toast-host .toast{ border-radius: 4px; }

/* --- Espacements de sections (homepage rythme magazine) ----------------- */
.section.py-5{ padding-block: var(--sp-section) !important; }
@media (max-width: 991.98px){ .section.py-5{ padding-block: 3rem !important; } }
@media (max-width: 575.98px){ .section.py-5{ padding-block: 2.25rem !important; } }

/* --- Liens dans le rich content (description fiche produit) ------------- */
.pd-rich a, .pd-inline-desc__body a{
  color: var(--c-ink);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}
.pd-rich a:hover, .pd-inline-desc__body a:hover{ color: var(--c-accent-dk); }

/* --- Adaptations responsives spécifiques au layer fashion --------------- */
@media (max-width: 991.98px){
  .nav-top-list{ gap: 1.25rem; }
  .site-header .bar-main > .container-xxl{ min-height: 72px; }
}
@media (max-width: 767.98px){
  .section-title, .shop-title{ font-size: 1.5rem; }
  .pd-title{ font-size: 1.5rem; }
  .price-main{ font-size: 1.35rem; }
  .ex-title{ font-size: 1.6rem; }
  .product-card__title{ font-size: .82rem; }
  .price{ font-size: .88rem; }
  .btn{ padding: .75rem 1.25rem; font-size: .76rem; letter-spacing: .12em; }
  .btn-lg{ padding: .85rem 1.5rem; font-size: .78rem; }
  .nav-top-list > li > a{ font-size: .72rem; letter-spacing: .1em; }
  .stat-card__num{ font-size: 1.6rem; }
}
@media (max-width: 575.98px){
  .section-title, .shop-title{ font-size: 1.3rem; }
  .pd-title{ font-size: 1.35rem; }
  .ex-title{ font-size: 1.4rem; }
  .footer-h{ font-size: .68rem; }
}

/* ============================================================================
   HOME PREMIUM LAYER — DA-PinkAndGrey
   Hero v2 (Ken Burns + progress bars) · Trust strip · Brand promise · Reveal
   Tout est additif : aucune règle existante n'est modifiée.
   ============================================================================ */

/* --- Hero v2 ------------------------------------------------------------- */
.hero.hero--premium{ position:relative; background:var(--c-ink); }
.hero.hero--premium .carousel-item{
  position:relative;
  transition:opacity .9s ease, transform .9s ease;
}
.hero.hero--premium .carousel-item .hero-img{
  transform:scale(1.005);
  transition:transform 7s linear;
  will-change:transform;
}
@media (prefers-reduced-motion: no-preference){
  .hero.hero--premium .carousel-item.active .hero-img{ transform:scale(1.06); }
}
.hero.hero--premium .hero-vignette{
  position:absolute; inset:0; pointer-events:none; z-index:1;
  background:
    radial-gradient(120% 80% at 50% 100%, rgba(0,0,0,.28), transparent 55%),
    linear-gradient(180deg, rgba(0,0,0,.05) 0%, rgba(0,0,0,0) 30%, rgba(0,0,0,.18) 100%);
}

/* Caption (rendue uniquement quand slide.texte ou slide.button_title) */
.hero.hero--premium .hero-caption{
  position:absolute; inset:auto 0 0 0; z-index:2;
  display:flex; justify-content:flex-start;
  padding:clamp(1rem, 4vw, 3rem) clamp(1rem, 4vw, 3.5rem) clamp(2rem, 5vw, 4rem);
  pointer-events:none;
}
.hero.hero--premium .hero-caption__inner{
  pointer-events:auto;
  max-width:640px;
  background:linear-gradient(180deg, rgba(30,27,22,.0) 0%, rgba(30,27,22,.55) 100%);
  padding:1rem 1.25rem 1.25rem;
  border-radius:var(--r-md);
  -webkit-backdrop-filter:blur(2px);
  backdrop-filter:blur(2px);
}
.hero.hero--premium .hero-caption__text{
  color:#fff; font-size:clamp(.9rem,1.15vw,1.05rem); line-height:1.45;
  margin-bottom:.9rem;
  text-shadow:0 1px 2px rgba(0,0,0,.3);
}
.hero.hero--premium .hero-caption__text *{ color:#fff !important; margin:0 0 .35rem; }
.hero.hero--premium .hero-caption__text h1,
.hero.hero--premium .hero-caption__text h2{
  font-family:var(--ff-display); font-weight:500;
  font-size:clamp(1.3rem,3vw,2.4rem); line-height:1.1; letter-spacing:-.015em;
  margin-bottom:.5rem;
}

.btn-hero{
  background:#fff; color:var(--c-ink);
  padding:.75rem 1.4rem;
  font-family:var(--ff-eyebrow); font-size:.74rem;
  letter-spacing:.16em; text-transform:uppercase;
  display:inline-flex; align-items:center; gap:.5rem;
  border:0; transition:transform .25s ease, background .25s ease, color .25s ease;
}
.btn-hero:hover{ background:var(--c-ink); color:#fff; transform:translateY(-1px); }
.btn-hero svg{ transition:transform .25s ease; }
.btn-hero:hover svg{ transform:translateX(3px); }

/* Flèches premium — flottantes, glassmorphism subtil */
.hero.hero--premium .carousel-control-prev,
.hero.hero--premium .carousel-control-next{ display:none; }
.hero-arrow{
  position:absolute; top:50%; transform:translateY(-50%);
  width:48px; height:48px; border-radius:50%;
  background:rgba(255,255,255,.92); border:0; color:var(--c-ink);
  display:inline-flex; align-items:center; justify-content:center;
  z-index:3; cursor:pointer; box-shadow:0 6px 20px rgba(0,0,0,.18);
  transition:transform .25s ease, background .25s ease, opacity .25s ease;
  opacity:.85;
}
.hero-arrow:hover{ background:#fff; opacity:1; transform:translateY(-50%) scale(1.06); }
.hero-arrow:focus-visible{ outline:2px solid var(--c-gold); outline-offset:3px; }
.hero-arrow--prev{ left:clamp(.75rem, 2vw, 1.5rem); }
.hero-arrow--next{ right:clamp(.75rem, 2vw, 1.5rem); }
@media (max-width:575.98px){
  .hero-arrow{ width:38px; height:38px; box-shadow:0 4px 12px rgba(0,0,0,.18); }
  .hero-arrow svg{ width:16px; height:16px; }
}

/* Progress bars — remplace les indicateurs Bootstrap */
.hero-progress{
  position:absolute; left:50%; transform:translateX(-50%);
  bottom:clamp(.85rem, 2.4vw, 1.6rem);
  z-index:3; display:flex; gap:.5rem;
  padding:.45rem .65rem; border-radius:999px;
  background:rgba(0,0,0,.28); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
}
.hero-progress__bar{
  position:relative; width:38px; height:3px; padding:0;
  background:rgba(255,255,255,.32); border:0; border-radius:999px;
  cursor:pointer; overflow:hidden; transition:width .35s ease, background .25s ease;
}
.hero-progress__bar:hover{ background:rgba(255,255,255,.55); }
.hero-progress__bar.is-active{ width:64px; background:rgba(255,255,255,.32); }
.hero-progress__fill{
  position:absolute; inset:0; width:0; height:100%;
  background:#fff; border-radius:999px;
}
.hero-progress__bar.is-active .hero-progress__fill{
  animation:heroFill 6s linear forwards;
}
@keyframes heroFill{ from{ width:0; } to{ width:100%; } }
@media (prefers-reduced-motion: reduce){
  .hero-progress__bar.is-active .hero-progress__fill{ animation:none; width:100%; }
}
@media (max-width:575.98px){
  .hero-progress__bar{ width:24px; }
  .hero-progress__bar.is-active{ width:42px; }
}

/* --- Trust strip --------------------------------------------------------- */
.trust-strip{
  background:#fff;
  border-bottom:1px solid var(--c-line);
  position:relative; z-index:2;
}
.trust-strip__list{
  list-style:none; margin:0; padding:1rem 0;
  display:grid; grid-template-columns:repeat(4, 1fr); gap:.5rem;
}
.trust-strip__item{
  display:flex; align-items:center; gap:.85rem;
  padding:.4rem .6rem;
  border-right:1px solid var(--c-line);
  min-width:0;
}
.trust-strip__item:last-child{ border-right:0; }
.trust-strip__ico{
  flex-shrink:0; width:38px; height:38px; border-radius:50%;
  background:var(--c-bg); color:var(--c-accent-dk);
  display:inline-flex; align-items:center; justify-content:center;
  font-size:1.05rem;
  border:1px solid var(--c-line);
}
.trust-strip__txt{ display:flex; flex-direction:column; min-width:0; line-height:1.2; }
.trust-strip__txt strong{
  font-family:var(--ff-eyebrow);
  font-size:.74rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--c-ink); font-weight:600;
}
.trust-strip__sub{
  font-size:.78rem; color:var(--c-ink-2); margin-top:.15rem;
  letter-spacing:0; text-transform:none;
}
@media (max-width:991.98px){
  .trust-strip__list{ grid-template-columns:repeat(2,1fr); padding:.75rem 0; }
  .trust-strip__item:nth-child(2){ border-right:0; }
  .trust-strip__item:nth-child(-n+2){ border-bottom:1px solid var(--c-line); padding-bottom:.6rem; margin-bottom:.3rem; }
}
@media (max-width:480px){
  .trust-strip__list{ padding:.6rem 0; gap:.25rem; }
  .trust-strip__item{ padding:.35rem .35rem; gap:.6rem; }
  .trust-strip__ico{ width:32px; height:32px; font-size:.95rem; }
  .trust-strip__txt strong{ font-size:.66rem; letter-spacing:.08em; }
  .trust-strip__sub{ font-size:.7rem; }
}

/* --- Eyebrow promo (variant rouge subtil) ------------------------------- */
.cat-editorial__eyebrow--promo{ color:var(--c-danger); }

/* --- Brand promise — bandeau éditorial premium -------------------------- */
.brand-promise{
  background:linear-gradient(180deg, var(--c-bg) 0%, var(--c-soft) 100%);
  padding:clamp(3rem, 7vw, 6rem) 0;
  border-top:1px solid var(--c-line);
  border-bottom:1px solid var(--c-line);
  position:relative; overflow:hidden;
}
.brand-promise::before{
  content:""; position:absolute;
  top:-120px; right:-120px; width:340px; height:340px; border-radius:50%;
  background:radial-gradient(circle, rgba(179,142,93,.12), transparent 65%);
  pointer-events:none;
}
.brand-promise::after{
  content:""; position:absolute;
  bottom:-160px; left:-100px; width:380px; height:380px; border-radius:50%;
  background:radial-gradient(circle, rgba(140,90,74,.08), transparent 65%);
  pointer-events:none;
}
.brand-promise__grid{
  display:grid; grid-template-columns:1.05fr 1fr; gap:clamp(2rem,5vw,4.5rem);
  align-items:center; position:relative; z-index:1;
}
.brand-promise__title{
  font-family:var(--ff-display); font-weight:500;
  font-size:clamp(1.6rem, 3.4vw, 2.6rem); line-height:1.12;
  letter-spacing:-.015em;
  margin:.3rem 0 1rem; color:var(--c-ink);
}
.brand-promise__lede{
  font-size:1.02rem; line-height:1.65; color:var(--c-ink-2);
  max-width:48ch; margin:0 0 1.6rem;
}
.brand-promise__cta{
  padding:.85rem 1.5rem; gap:.55rem;
  display:inline-flex; align-items:center;
  font-family:var(--ff-eyebrow); font-size:.74rem;
  letter-spacing:.16em; text-transform:uppercase;
}
.brand-promise__cta svg{ transition:transform .25s ease; }
.brand-promise__cta:hover svg{ transform:translateX(3px); }

.brand-promise__pillars{
  list-style:none; margin:0; padding:0;
  display:flex; flex-direction:column; gap:1.4rem;
}
.brand-promise__pillars li{
  display:grid; grid-template-columns:auto 1fr; gap:1.1rem; align-items:start;
  padding:1.1rem 1.2rem;
  background:#fff; border:1px solid var(--c-line); border-radius:var(--r-md);
  transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.brand-promise__pillars li:hover{
  transform:translateY(-2px);
  box-shadow:var(--sh-2);
  border-color:transparent;
}
.brand-promise__num{
  font-family:var(--ff-display); font-weight:500;
  font-size:1.45rem; color:var(--c-gold);
  line-height:1; letter-spacing:.02em;
  border-right:1px solid var(--c-line);
  padding-right:1rem;
  align-self:stretch;
  display:flex; align-items:center;
}
.brand-promise__pillars h3{
  font-family:var(--ff-display); font-weight:500;
  font-size:1.05rem; letter-spacing:-.005em;
  margin:0 0 .25rem; color:var(--c-ink);
}
.brand-promise__pillars p{
  margin:0; font-size:.9rem; color:var(--c-ink-2); line-height:1.5;
}
@media (max-width:991.98px){
  .brand-promise__grid{ grid-template-columns:1fr; gap:2rem; }
}

/* --- Benefits (bottom) — refonte plus premium --------------------------- */
.benefits{ background:#fff; }
.benefits-row{ row-gap:1.5rem !important; }
.benefits-col{
  padding:1.6rem 1rem !important;
  border-right:1px solid var(--c-line);
  transition:background .25s ease;
}
.benefits-col:last-child{ border-right:0; }
.benefits-col:hover{ background:var(--c-bg); }
.benefits-col i{
  font-size:1.7rem; color:var(--c-accent-dk);
  display:inline-flex; align-items:center; justify-content:center;
  width:54px; height:54px; border-radius:50%;
  background:var(--c-bg); border:1px solid var(--c-line);
  margin-bottom:.85rem;
}
.benefits-col h6{
  font-family:var(--ff-eyebrow); font-size:.78rem;
  letter-spacing:.12em; text-transform:uppercase; font-weight:600;
  margin:0 0 .35rem;
}
.benefits-col p{
  font-size:.85rem; color:var(--c-ink-2); margin:0;
}
@media (max-width:767.98px){
  .benefits-col{ border-right:0; padding:1.1rem .75rem !important; }
  .benefits-col:nth-child(odd){ border-right:1px solid var(--c-line); }
  .benefits-col i{ width:46px; height:46px; font-size:1.3rem; margin-bottom:.6rem; }
}

/* --- Reveal animations (IntersectionObserver) --------------------------- */
@media (prefers-reduced-motion: no-preference){
  [data-reveal]{ opacity:0; transform:translateY(18px); transition:opacity .7s ease, transform .7s cubic-bezier(.2,.6,.2,1); }
  [data-reveal].is-visible{ opacity:1; transform:none; }
  .reveal-stagger > .col{ opacity:0; transform:translateY(14px); transition:opacity .55s ease, transform .55s cubic-bezier(.2,.6,.2,1); transition-delay:var(--rd, 0ms); }
  .reveal-stagger.is-visible > .col{ opacity:1; transform:none; }
}

/* ============================================================================
   HEADER PREMIUM LAYER — DA-PinkAndGrey
   Announcement bar (rotative) · Sticky compact · Search pill
   Hamburger animé · Cart pulse · Mega menu animé · Nav mobile éditorial
   Tout est additif et ne remplace rien.
   ============================================================================ */

/* --- Announcement bar (remplace bar-top desktop) ------------------------ */
.announcement-bar{
  background:linear-gradient(90deg, var(--c-topbar-from) 0%, var(--c-topbar-mid) 50%, var(--c-topbar-to) 100%);
  color:var(--c-topbar-text);
  font-size:.78rem;
  letter-spacing:.04em;
  border-bottom:1px solid rgba(255,255,255,.06);
  position:relative;
  overflow:hidden;
}
.announcement-bar::before{
  content:""; position:absolute; inset:0;
  background:linear-gradient(90deg, transparent 0, rgba(179,142,93,.08) 50%, transparent 100%);
  pointer-events:none;
}
.announcement-bar__row{
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:1.25rem;
  padding:.55rem 0;
  position:relative; z-index:1;
}
.announcement-bar__phone{
  color:#fff; text-decoration:none;
  display:inline-flex; align-items:center; gap:.45rem;
  font-weight:500; font-size:.78rem;
  transition:color .2s ease;
}
.announcement-bar__phone .bi{ color:var(--c-gold); font-size:.85rem; }
.announcement-bar__phone:hover{ color:var(--c-gold); text-decoration:none; }

.announcement-bar__center{ position:relative; min-height:1.4em; text-align:center; overflow:hidden; }
.announcement-rot{ list-style:none; margin:0; padding:0; position:relative; height:1.4em; }
.announcement-rot__item{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center; gap:.55rem;
  font-size:.78rem; color:var(--c-topbar-text);
  opacity:0; transform:translateY(8px);
  transition:opacity .5s ease, transform .5s ease;
  pointer-events:none;
}
.announcement-rot__item.is-active{ opacity:1; transform:none; }
.announcement-rot__item .bi{ color:var(--c-gold); font-size:.85rem; }
.announcement-rot__item strong{ color:#fff; font-weight:600; letter-spacing:.02em; }

.announcement-bar__right{ display:inline-flex; align-items:center; gap:.85rem; }
.announcement-bar__right .topbar-sep{ display:inline-block; width:1px; height:14px; background:rgba(255,255,255,.18); }
.announcement-bar__link{
  color:var(--c-topbar-text); text-decoration:none;
  font-size:.76rem; font-weight:500;
  display:inline-flex; align-items:center; gap:.35rem;
  transition:color .2s ease;
}
.announcement-bar__link:hover{ color:#fff; text-decoration:none; }
.announcement-bar__link .bi{ font-size:.9rem; color:var(--c-gold); }
.announcement-bar__link--cta{
  border:1px solid rgba(179,142,93,.5);
  border-radius:999px;
  padding:.2rem .7rem;
  color:#fff;
}
.announcement-bar__link--cta:hover{
  background:var(--c-gold); border-color:var(--c-gold); color:var(--c-ink);
}

/* --- Site header sticky compact mode ------------------------------------ */
.site-header{ transition:box-shadow .25s ease, background-color .25s ease; }
.site-header.is-scrolled{ box-shadow:0 4px 20px rgba(30,27,22,.06); }
.site-header.is-scrolled .bar-main > .container-xxl{ padding-block:.5rem; min-height:64px; }
.site-header.is-scrolled .brand-logo{ height:40px !important; max-height:40px !important; transition:height .25s ease; }
.site-header.is-scrolled .announcement-bar{ max-height:0; overflow:hidden; padding:0; border-bottom:0; transition:max-height .35s ease, padding .35s ease; }
.site-header.is-scrolled .announcement-bar__row{ padding-block:0; }
.announcement-bar{ max-height:80px; transition:max-height .35s ease; }

/* --- Search pill ------------------------------------------------------- */
.search-form--pill{ max-width:640px; margin-inline:auto; }
.search-pill{
  position:relative;
  display:flex; align-items:center;
  background:var(--c-bg);
  border:1px solid var(--c-line);
  border-radius:999px;
  padding:.3rem .35rem .3rem 1rem;
  height:46px;
  min-height:46px;
  flex:0 0 auto;
  transition:border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
/* Bloque toute transition de hauteur du conteneur de la pill au scroll */
.site-header .bar-main > .container-xxl,
.site-header .bar-main{ transition:none !important; }
.site-header .search-form,
.site-header .search-pill{ transition-property:border-color, background, box-shadow !important; }
.search-pill:focus-within{
  background:#fff;
  border-color:var(--c-ink);
  box-shadow:0 6px 22px rgba(30,27,22,.06);
}
.search-pill__ico{ font-size:1rem; color:var(--c-ink-2); flex-shrink:0; margin-right:.5rem; }
.search-pill__input{
  flex:1; min-width:0;
  border:0; background:transparent; outline:0;
  font-family:var(--ff-body); font-size:.92rem;
  font-weight:500;
  padding:0; height:100%;
  color:var(--c-ink);
}
.search-pill__input::placeholder{ color:var(--c-muted); font-weight:400; letter-spacing:.005em; }
.search-pill__submit{
  flex-shrink:0;
  background:var(--c-ink); color:#fff;
  border:0; border-radius:999px;
  padding:.5rem 1.1rem;
  font-family:var(--ff-eyebrow); font-size:.7rem;
  font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  display:inline-flex; align-items:center; gap:.45rem;
  cursor:pointer; transition:background .2s ease, transform .2s ease;
  height:38px;
}
.search-pill__submit:hover{ background:var(--c-accent-dk); transform:translateX(1px); }
.search-pill__submit--icon{ padding:.5rem; width:38px; height:38px; justify-content:center; }
.search-pill__submit--icon .bi{ font-size:1rem; }

/* Search suggest — overlay sous le pill */
.search-form--pill .search-suggest{
  top:calc(100% + 8px);
  border-radius:var(--r-md);
  border:1px solid var(--c-line);
  box-shadow:0 12px 32px rgba(30,27,22,.08);
  overflow:hidden;
}

/* --- Hamburger animé --------------------------------------------------- */
.hamburger{
  width:42px; height:42px; padding:0;
  background:transparent; border:0;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:50%;
  transition:background .2s ease;
  cursor:pointer;
  flex-shrink:0;
}
.hamburger:hover{ background:var(--c-bg); }
.hamburger__lines{
  position:relative; width:22px; height:16px;
  display:inline-block;
}
.hamburger__lines span{
  position:absolute; left:0; right:0; height:2px;
  background:var(--c-ink); border-radius:2px;
  transition:transform .3s ease, opacity .25s ease, top .3s ease;
}
.hamburger__lines span:nth-child(1){ top:2px; }
.hamburger__lines span:nth-child(2){ top:7px; }
.hamburger__lines span:nth-child(3){ top:12px; }
.hamburger.is-active .hamburger__lines span:nth-child(1){ top:7px; transform:rotate(45deg); }
.hamburger.is-active .hamburger__lines span:nth-child(2){ opacity:0; }
.hamburger.is-active .hamburger__lines span:nth-child(3){ top:7px; transform:rotate(-45deg); }

/* --- Cart count pulse ------------------------------------------------- */
.cart-count.is-filled{ background:var(--c-danger); border-color:#fff; }
.cart-count.is-pulse{ animation:cartPulse .5s ease; }
@keyframes cartPulse{
  0%{ transform:scale(1); }
  50%{ transform:scale(1.35); }
  100%{ transform:scale(1); }
}
/* Badge du panier lisible (02/10/2026). Avant : chiffre de 9,9 px dans une
   pastille de 16 px, et un « 0 » sombre affiche panier vide. Desormais 12 px
   gras dans une pastille de 20 px, posee sur l'angle de l'icone, et masquee
   tant que le panier est vide — .is-filled est pose par le serveur, puis tenu
   a jour par shop.js a chaque changement du compteur. */
.icon-link--cart .cart-count{
  top:-2px; right:-6px;
  min-width:20px; height:20px; padding:0 5px;
  font-size:.75rem; font-weight:700; line-height:16px;
  font-variant-numeric:tabular-nums; letter-spacing:0;
  box-shadow:0 2px 6px rgba(20,18,14,.22);
}
.icon-link--cart .cart-count:not(.is-filled){ display:none; }

/* --- Icon link refinement (panier hover) ------------------------------ */
.icon-link--cart .bi{ transition:transform .25s ease; }
.icon-link--cart:hover .bi{ transform:translateY(-2px); }

/* --- Nav top : underline animé ---------------------------------------- */
.nav-top-list > li > a{ position:relative; }
.nav-top-list > li > a::before{
  content:""; position:absolute; left:0; right:0; bottom:-2px;
  height:1px; background:var(--c-ink);
  transform-origin:left center;
  transform:scaleX(0); transition:transform .35s cubic-bezier(.2,.6,.2,1);
}
.nav-top-list > li > a:hover::before,
.nav-top-list > li > a.active::before{ transform:scaleX(1); }
/* Override l'ancien border-bottom (qui faisait le même job en moins fluide) */
.nav-top-list > li > a:hover,
.nav-top-list > li > a.active{ border-bottom-color:transparent !important; }

/* --- Mega menu : entrée animée + footer link ------------------------- */
.nav-top-list > li > .mega{
  display:block;
  opacity:0; visibility:hidden;
  transform:translateY(8px);
  transition:opacity .25s ease, transform .25s ease, visibility .25s;
  pointer-events:none;
}
.nav-top-list > li.has-children:hover > .mega,
.nav-top-list > li.has-children:focus-within > .mega{
  opacity:1; visibility:visible; transform:none;
  pointer-events:auto;
}
.mega-cats .mega-cat{ transition:background .15s ease, transform .25s ease; }
.mega-cats .mega-cat:hover{ transform:translateY(-2px); }
.mega-cats .mega-cat__img{ transition:border-color .2s ease, box-shadow .25s ease; }
.mega-cats .mega-cat:hover .mega-cat__img{
  border-color:var(--c-gold);
  box-shadow:0 6px 18px rgba(179,142,93,.18);
}
.mega-foot{
  margin-top:1rem; padding-top:1rem; border-top:1px solid var(--c-line);
  display:flex; justify-content:flex-end;
}
.mega-foot__link{
  display:inline-flex; align-items:center; gap:.5rem;
  color:var(--c-ink); text-decoration:none;
  font-family:var(--ff-eyebrow); font-size:.72rem;
  letter-spacing:.14em; text-transform:uppercase;
  transition:color .2s ease, gap .2s ease;
}
.mega-foot__link:hover{ color:var(--c-accent-dk); gap:.75rem; text-decoration:none; }

/* --- Header socials (à côté du panier) — affinement ------------------- */
.header-socials{
  display:inline-flex !important;
  align-items:center;
  gap:.25rem;
  padding:0;
  border:0;
  margin-right:.25rem;
}
.header-socials a{
  width:36px; height:36px; border-radius:50%;
  color:var(--c-ink-2);
  display:inline-flex !important;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  background:transparent;
  transition:background .2s ease, color .2s ease, transform .25s ease;
}
.header-socials a:hover{ background:var(--c-bg); color:var(--c-ink); transform:translateY(-1px); }
.header-socials a > svg,
.header-socials a > i.bi{
  font-size:1.05rem !important;
  line-height:1 !important;
  display:inline-block !important;
  width:18px; height:18px;
  pointer-events:none;
}
.header-socials a > .hs-letter{ font-size:.95rem; font-weight:600; line-height:1; }
/* Mobile : la version `bar-info-mobile` reprend les socials sous le header */
@media (max-width:767.98px){ .header-socials{ display:none !important; } }

/* --- Bar info mobile : refinement (pas de border-bottom — duplication) - */
.bar-info-mobile{
  font-size:.74rem;
  letter-spacing:.02em;
}
.bar-info-mobile .mobile-phone .bi,
.bar-info-mobile .mobile-free .bi{ font-size:.85rem; }

/* --- Offcanvas nav mobile — éditorial premium ------------------------ */
.nav-mobile{ width:88vw; max-width:380px; background:#fff; }
.nav-mobile .offcanvas-header{
  border-bottom:1px solid var(--c-line);
  padding:1rem 1.25rem;
  display:flex; align-items:center; justify-content:space-between;
}
.nav-mobile .offcanvas-body{ padding:1.25rem; }
.nav-mobile__list{ display:flex; flex-direction:column; gap:.15rem; }
.nav-mobile__link{
  display:flex; align-items:center; gap:.85rem;
  padding:.85rem 1rem;
  color:var(--c-ink); text-decoration:none;
  border-radius:var(--r-md);
  font-weight:500; font-size:.95rem;
  transition:background .15s ease, color .15s ease;
}
.nav-mobile__link:hover{ background:var(--c-bg); color:var(--c-accent-dk); }
.nav-mobile__link .bi{ font-size:1.1rem; color:var(--c-ink-2); width:24px; text-align:center; }
.nav-mobile__eyebrow{
  font-family:var(--ff-eyebrow);
  font-size:.7rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--c-ink-2);
  margin:1.25rem 0 .6rem;
  padding-inline:1rem;
  font-weight:600;
}
.nav-mobile__cats{ display:flex; flex-direction:column; gap:.25rem; }
.nav-mobile__cat{
  display:grid; grid-template-columns:auto 1fr auto;
  align-items:center; gap:.85rem;
  padding:.7rem 1rem;
  background:transparent;
  color:var(--c-ink); text-decoration:none;
  border-radius:var(--r-md);
  transition:background .15s ease;
}
.nav-mobile__cat:hover{ background:var(--c-bg); color:var(--c-ink); text-decoration:none; }
.nav-mobile__cat-img{
  width:38px; height:38px; border-radius:50%;
  border:1px solid var(--c-line); overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  background:#fff;
  flex-shrink:0;
}
.nav-mobile__cat-img img{ width:100%; height:100%; object-fit:cover; }
.nav-mobile__cat-label{ font-size:.92rem; font-weight:500; line-height:1.2; }
.nav-mobile__cat .bi{ color:var(--c-muted); font-size:.85rem; }

/* Mobile : compact mode — réduit la place du header au scroll */
@media (max-width:991.98px){
  .site-header.is-scrolled .bar-main > .container-xxl{ padding-block:.45rem; min-height:56px; }
  .site-header.is-scrolled .brand-logo{ height:30px !important; max-height:30px !important; }
  .site-header.is-scrolled .bar-info-mobile{ display:none !important; }
}

/* ============================================================================
   FOOTER PREMIUM LAYER — DA-PinkAndGrey
   Filet or accent · Benefits cards · Logo glow · Socials premium
   Back-to-top + WhatsApp flottants
   ============================================================================ */

/* --- Filet accent or au-dessus du footer ------------------------------- */
.site-footer{ position:relative; }
.footer-accent{
  display:block; width:100%; height:3px;
  background:linear-gradient(90deg, transparent 0%, var(--c-gold) 30%, var(--c-gold) 70%, transparent 100%);
  opacity:.7;
}

/* --- Footer benefits — cards plus tactiles --------------------------- */
.footer-benefits{ padding:1.6rem 0 !important; gap:.75rem !important; align-items:stretch; }
.footer-benefit{
  padding:.85rem .95rem !important;
  border-radius:var(--r-md);
  background:rgba(255,255,255,.025);
  border:1px solid rgba(255,255,255,.05);
  transition:transform .28s cubic-bezier(.2,.6,.2,1), background .25s ease, border-color .25s ease;
  align-items:center;
}
.footer-benefit:hover{
  transform:translateY(-2px);
  background:rgba(179,142,93,.08);
  border-color:rgba(179,142,93,.25);
}
/* Icône en cercle — supplante la règle legacy `.footer-benefit i` */
.footer-benefit > i.bi{
  flex-shrink:0;
  width:42px !important;
  height:42px !important;
  border-radius:50%;
  background:rgba(179,142,93,.14);
  border:1px solid rgba(179,142,93,.3);
  display:inline-flex !important;
  align-items:center;
  justify-content:center;
  font-size:1.15rem !important;
  line-height:1 !important;
  color:var(--c-gold);
  margin:0;
  padding:0;
}
.footer-benefit > div{ min-width:0; flex:1; }

/* --- Footer brand col : ornement subtil ------------------------------- */
.footer-brand-col{ position:relative; }
.footer-brand-col::before{
  content:""; position:absolute;
  top:-30px; left:-30px; width:180px; height:180px; border-radius:50%;
  background:radial-gradient(circle, rgba(179,142,93,.12), transparent 65%);
  pointer-events:none;
}
.footer-logo{ filter:drop-shadow(0 4px 18px rgba(179,142,93,.18)); }
/* Force le logo store en blanc pur quand on utilise la version coloriée */
.footer-logo.footer-logo--white{
  filter:brightness(0) invert(1) drop-shadow(0 4px 18px rgba(179,142,93,.18));
  -webkit-filter:brightness(0) invert(1) drop-shadow(0 4px 18px rgba(179,142,93,.18));
}

/* --- Footer socials : bordure améliorée -------------------------------- */
.footer-socials{ margin-top:1.25rem; gap:.5rem !important; display:flex; flex-wrap:wrap; }
.footer-socials a{
  width:40px !important; height:40px !important;
  font-size:1.05rem !important;
  background:rgba(255,255,255,.04) !important;
  display:inline-flex !important;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  transition:transform .25s ease, background .25s ease, border-color .25s ease, color .25s ease !important;
}
.footer-socials a:hover{ transform:translateY(-3px) rotate(-3deg) !important; }
.footer-socials a > svg,
.footer-socials a > i.bi{
  width:18px; height:18px;
  font-size:1.05rem !important;
  line-height:1 !important;
  display:inline-block !important;
  pointer-events:none;
}
/* Topbar socials : SVG 14px adaptés à la barre fine */
.topbar-socials a > svg,
.topbar-socials a > i.bi{
  width:14px; height:14px;
  font-size:.85rem !important;
  line-height:1 !important;
  display:inline-block !important;
}
/* Mobile bar-info-mobile socials : SVG 14px */
.bar-info-mobile .mobile-socials a > svg,
.bar-info-mobile .mobile-socials a > i.bi{
  width:14px; height:14px;
  font-size:.8rem !important;
  line-height:1 !important;
  display:inline-block !important;
}

/* --- Footer bottom : grille lisible ----------------------------------- */
.footer-bottom__row{
  display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center;
  gap:1rem .75rem;
}
.footer-bottom__copy{
  color:rgba(255,255,255,.62); font-size:.78rem; letter-spacing:.04em;
}
.footer-payments{
  display:inline-flex; align-items:center; flex-wrap:wrap; gap:.45rem;
}
.footer-payments__label{
  font-family:var(--ff-eyebrow);
  font-size:.66rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--c-muted);
  margin-right:.25rem;
}
.pay-badge{
  transition:background .2s ease, border-color .2s ease, transform .2s ease;
}
.pay-badge:hover{
  background:rgba(179,142,93,.14);
  border-color:rgba(179,142,93,.4);
  transform:translateY(-1px);
}

/* --- Back to top flottant -------------------------------------------- */
.back-to-top{
  position:fixed; right:1rem; bottom:5rem;
  width:46px; height:46px; border-radius:50%;
  background:var(--c-ink); color:#fff; border:0;
  display:none; align-items:center; justify-content:center;
  z-index:1050; cursor:pointer;
  box-shadow:0 8px 24px rgba(30,27,22,.18);
  transition:opacity .25s ease, transform .25s ease, background .25s ease;
  opacity:0; transform:translateY(8px);
}
.back-to-top.is-visible{ display:inline-flex; opacity:1; transform:none; }
.back-to-top:hover{ background:var(--c-accent-dk); transform:translateY(-3px); }
.back-to-top:focus-visible{ outline:3px solid var(--c-gold); outline-offset:3px; }

/* --- WhatsApp flottant ------------------------------------------------ */
.float-wa{
  position:fixed; right:1rem; bottom:1rem;
  background:#25D366; color:#fff;
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.7rem 1rem .7rem .85rem;
  border-radius:999px;
  text-decoration:none;
  box-shadow:0 10px 30px rgba(37,211,102,.45), 0 4px 10px rgba(0,0,0,.15);
  z-index:1051;
  transition:transform .25s ease, box-shadow .25s ease, background .25s ease;
}
.float-wa:hover{
  background:#1FB855; color:#fff; text-decoration:none;
  transform:translateY(-2px);
  box-shadow:0 14px 36px rgba(37,211,102,.55), 0 4px 12px rgba(0,0,0,.18);
}
.float-wa .bi{ font-size:1.4rem; line-height:1; }
.float-wa__label{
  font-family:var(--ff-eyebrow);
  font-size:.74rem; letter-spacing:.1em; text-transform:uppercase;
  font-weight:600;
  white-space:nowrap;
}
.float-wa__pulse{
  position:absolute; inset:0; border-radius:999px;
  background:#25D366; opacity:.55; pointer-events:none;
  animation:waPulse 2.4s cubic-bezier(.2,.6,.2,1) infinite;
}
@keyframes waPulse{
  0%{ transform:scale(1); opacity:.55; }
  70%{ transform:scale(1.4); opacity:0; }
  100%{ transform:scale(1.4); opacity:0; }
}
@media (prefers-reduced-motion: reduce){
  .float-wa__pulse{ animation:none; opacity:0; }
}

/* Quand back-to-top est visible, on évite le chevauchement avec WA mobile */
@media (max-width:767.98px){
  .float-wa{ padding:.6rem .85rem; }
  .float-wa__label{ display:none; }
  .float-wa{ width:50px; height:50px; padding:0; justify-content:center; }
  .float-wa .bi{ font-size:1.5rem; }
  .back-to-top{ width:42px; height:42px; right:1rem; bottom:4.5rem; }
}

/* --- Texte muted secondaire ------------------------------------------- */
.text-muted-2{ color:var(--c-muted) !important; }

/* ============================================================================
   PRODUCT CARD PREMIUM LAYER — DA-PinkAndGrey
   Hover overlay quickadd · Wish toujours visible · Badges éditoriaux
   Animation success ajout · Image cross-fade
   ============================================================================ */

.product-card{ position:relative; isolation:isolate; }
.product-card__img{ position:relative; }
.product-card__img-link{ display:block; width:100%; height:100%; }
.product-card__img-link img{ width:100%; height:100%; object-fit:cover; }

/* Badges container : empile haut-gauche */
.product-card__badges{
  position:absolute; top:.85rem; left:.85rem;
  display:flex; flex-direction:column; gap:.35rem;
  z-index:2;
  pointer-events:none;
}
.product-card__badges .badge-chip{
  position:static !important; pointer-events:auto;
  display:inline-flex; align-items:center; gap:.3rem;
  font-family:var(--ff-eyebrow); font-weight:600;
  font-size:.62rem; letter-spacing:.14em; text-transform:uppercase;
  padding:.3rem .55rem;
  background:#fff; color:var(--c-ink); border:1px solid var(--c-line);
  border-radius:0;
  backdrop-filter:none;
  box-shadow:0 2px 6px rgba(30,27,22,.04);
  transition:transform .25s ease;
}
.product-card:hover .product-card__badges .badge-chip{ transform:translateY(-1px); }
.badge-chip--promo{ background:var(--c-danger) !important; color:#fff !important; border-color:var(--c-danger) !important; }
.badge-chip--top{ background:var(--c-gold) !important; color:var(--c-ink) !important; border-color:var(--c-gold) !important; }
.badge-chip--top .bi{ font-size:.68rem; }
.badge-chip--new{ background:var(--c-ink) !important; color:#fff !important; border-color:var(--c-ink) !important; }

/* Wish bouton — toujours visible top-right */
.product-card .wish-btn{
  position:absolute; top:.75rem; right:.75rem; bottom:auto; left:auto;
  width:36px; height:36px; border-radius:50%;
  background:rgba(255,255,255,.92);
  border:1px solid var(--c-line);
  color:var(--c-ink-2);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; opacity:1;
  transition:transform .25s ease, background .25s ease, color .25s ease, border-color .25s ease;
  z-index:2;
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
}
.product-card .wish-btn:hover{
  background:#fff; color:var(--c-danger); border-color:var(--c-danger);
  transform:scale(1.06);
}
.product-card .wish-btn.active{
  background:var(--c-danger); color:#fff; border-color:var(--c-danger);
}
.product-card .wish-btn.active .bi{ animation:wishPop .35s cubic-bezier(.2,.6,.2,1); }
@keyframes wishPop{
  0%{ transform:scale(.7); }
  50%{ transform:scale(1.25); }
  100%{ transform:scale(1); }
}

/* Quickadd overlay (desktop hover) */
.product-card__quickadd{
  position:absolute; left:0; right:0; bottom:0;
  margin:0; padding:.65rem;
  background:linear-gradient(180deg, rgba(30,27,22,0) 0%, rgba(30,27,22,.85) 90%);
  z-index:2;
  opacity:0; transform:translateY(8px);
  transition:opacity .25s ease, transform .3s ease;
  pointer-events:none;
}
.product-card:hover .product-card__quickadd,
.product-card:focus-within .product-card__quickadd{
  opacity:1; transform:none; pointer-events:auto;
}
.product-card__quickadd-btn{
  width:100%;
  background:#fff; color:var(--c-ink); border:0; border-radius:999px;
  padding:.6rem 1rem;
  display:inline-flex; align-items:center; justify-content:center; gap:.45rem;
  font-family:var(--ff-eyebrow);
  font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; font-weight:600;
  cursor:pointer;
  transition:background .2s ease, color .2s ease, transform .2s ease;
}
.product-card__quickadd-btn:hover{
  background:var(--c-ink); color:#fff; transform:translateY(-1px);
}
.product-card__quickadd-btn .bi{ font-size:.95rem; }

/* État loading + success */
.product-card__quickadd-btn.is-loading{ pointer-events:none; opacity:.85; }
.product-card__quickadd-btn.is-loading .bi{ animation:spin .8s linear infinite; }
.product-card__quickadd-btn.is-loading .bi::before{ content:"\F130"; } /* arrow-clockwise */
.product-card__quickadd-btn.is-success{
  background:var(--c-success); color:#fff;
}
.product-card__quickadd-btn.is-success .bi::before{ content:"\F26B"; } /* check-lg */
@keyframes spin{ to{ transform:rotate(360deg); } }

/* Sur mobile (pas de hover) : on cache l'overlay et on garde le CTA en bas */
@media (max-width:767.98px){
  .product-card__quickadd{ display:none; }
  .product-card .wish-btn{ width:32px; height:32px; top:.55rem; right:.55rem; }
  .product-card__badges{ top:.55rem; left:.55rem; gap:.25rem; }
  .product-card__badges .badge-chip{ padding:.22rem .45rem; font-size:.58rem; }
}
@media (min-width:768px){
  /* Sur desktop : on cache le CTA mobile (sécurité) */
  .product-card__cta-mobile{ display:none !important; }
}

/* Hover image plus marqué */
.product-card__img-link img{ transition:transform .8s cubic-bezier(.2,.6,.2,1), filter .35s ease; }
.product-card:hover .product-card__img-link img{ transform:scale(1.05); filter:brightness(.96); }

/* Title link : transition couleur */
.product-card__title a{ transition:color .2s ease; }

/* Stars (utilisées dans la card et ailleurs) — taille uniforme */
.product-card .stars i{ color:var(--c-gold); font-size:.78rem; }
.product-card .stars i.bi-star{ color:var(--c-line); }

/* Focus visible accessibilité */
.product-card .wish-btn:focus-visible,
.product-card__quickadd-btn:focus-visible{
  outline:2px solid var(--c-gold); outline-offset:3px;
}

/* ============================================================================
   PRODUCT DETAIL PREMIUM LAYER — DA-PinkAndGrey
   Prices · ETA · Qty pill · CTA principal · Trustlets · Sticky bar premium
   ============================================================================ */

/* --- Prices block --------------------------------------------------- */
.pd-prices{ display:flex; align-items:baseline; flex-wrap:wrap; gap:.65rem; margin-block:1rem; }
.price-save{
  background:var(--c-danger); color:#fff;
  font-family:var(--ff-eyebrow);
  font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; font-weight:600;
  padding:.25rem .55rem; border-radius:0;
  display:inline-flex; align-items:center;
}
.price-save--anim{ animation:priceSavePulse 2.6s ease-in-out infinite; }
@keyframes priceSavePulse{
  0%,100%{ box-shadow:0 0 0 0 rgba(178,74,58,.45); }
  50%{ box-shadow:0 0 0 8px rgba(178,74,58,0); }
}
@media (prefers-reduced-motion: reduce){ .price-save--anim{ animation:none; } }
.price-saved-amt{
  flex-basis:100%;
  font-size:.85rem; color:var(--c-success);
  font-weight:500;
  margin-top:.2rem;
}
.price-saved-amt strong{ color:var(--c-success); font-weight:600; }

/* --- Delivery ETA pill block --------------------------------------- */
.pd-eta{
  margin-top:1rem;
  background:linear-gradient(180deg, var(--c-soft) 0%, var(--c-bg) 100%);
  border:1px solid var(--c-line);
  border-left:3px solid var(--c-gold);
  border-radius:var(--r-md);
  padding:.85rem 1rem;
  display:flex; flex-direction:column; gap:.45rem;
}
.pd-eta__line{
  display:flex; align-items:center; gap:.6rem;
  font-size:.88rem; color:var(--c-ink-2); line-height:1.3;
}
.pd-eta__line .bi{
  flex-shrink:0;
  width:30px; height:30px; border-radius:50%;
  background:rgba(179,142,93,.14);
  color:var(--c-accent-dk);
  display:inline-flex; align-items:center; justify-content:center;
  font-size:.95rem;
}
.pd-eta__line strong{ color:var(--c-ink); font-weight:600; }

/* --- Qty pill ------------------------------------------------------- */
.pd-qty-row--premium{
  display:flex; gap:.75rem; align-items:stretch;
  flex-wrap:wrap;
}
.qty-pill{
  display:inline-flex; align-items:center;
  background:#fff; border:1px solid var(--c-line);
  border-radius:999px;
  padding:.25rem; gap:.15rem;
  height:50px;
  flex-shrink:0;
}
.qty-pill__btn{
  width:38px; height:38px; border-radius:50%;
  background:transparent; border:0; color:var(--c-ink);
  display:inline-flex; align-items:center; justify-content:center;
  cursor:pointer;
  transition:background .15s ease, color .15s ease;
}
.qty-pill__btn:hover{ background:var(--c-bg); }
.qty-pill__btn:active{ transform:scale(.95); }
.qty-pill__input{
  width:42px; padding:0; border:0; background:transparent;
  text-align:center; font-weight:600; font-family:var(--ff-eyebrow);
  font-size:.95rem; letter-spacing:.04em;
  color:var(--c-ink);
  -moz-appearance:textfield;
}
.qty-pill__input::-webkit-outer-spin-button,
.qty-pill__input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
.qty-pill__input:focus{ outline:0; }

/* --- CTA principal -------------------------------------------------- */
.pd-cta--main{
  flex:1; min-width:200px; height:50px;
  display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  font-family:var(--ff-eyebrow);
  font-size:.78rem; letter-spacing:.16em; text-transform:uppercase; font-weight:600;
  padding:.9rem 1.5rem;
  background:var(--c-ink); color:#fff; border:0;
  position:relative; overflow:hidden;
  transition:background .25s ease, transform .25s ease, box-shadow .25s ease;
}
.pd-cta--main:hover{
  background:var(--c-accent-dk); color:#fff;
  transform:translateY(-1px);
  box-shadow:0 10px 22px rgba(30,27,22,.22);
}
.pd-cta--main:active{ transform:translateY(0); }
.pd-cta--main::before{
  content:""; position:absolute; inset:0;
  background:linear-gradient(120deg, transparent 30%, rgba(255,255,255,.18) 50%, transparent 70%);
  transform:translateX(-100%);
  transition:transform .6s ease;
}
.pd-cta--main:hover::before{ transform:translateX(100%); }
.pd-cta__icon{
  display:inline-flex; align-items:center; justify-content:center;
  font-size:1.05rem; transition:transform .25s ease;
}
.pd-cta--main:hover .pd-cta__icon{ transform:rotate(-8deg) scale(1.05); }

.pd-buynow{
  height:46px;
  font-family:var(--ff-eyebrow);
  font-size:.74rem; letter-spacing:.16em; text-transform:uppercase; font-weight:600;
}

/* --- Trustlets sous le CTA (réassurance compacte) ------------------- */
.pd-trustlets{
  list-style:none; margin:1rem 0 0; padding:.85rem .5rem;
  display:flex; flex-wrap:wrap; gap:.5rem 1rem;
  border-top:1px solid var(--c-line);
  border-bottom:1px solid var(--c-line);
  font-size:.78rem; color:var(--c-ink-2);
}
.pd-trustlets li{ display:inline-flex; align-items:center; gap:.4rem; }
.pd-trustlets .bi{ color:var(--c-success); font-size:.95rem; }

/* --- Sticky bar mobile premium ------------------------------------- */
.pd-sticky-bar.pd-sticky-bar--premium{
  display:none;
  position:fixed; left:0; right:0; bottom:0;
  background:rgba(255,255,255,.97);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  border-top:1px solid var(--c-line);
  padding:.6rem .85rem;
  z-index:1045;
  align-items:center; gap:.7rem;
  box-shadow:0 -8px 24px rgba(30,27,22,.08);
}
.pd-sticky-bar.is-visible{ display:flex; }
/* Variante « Achetez maintenant » : bouton unique pleine largeur */
.pd-sticky-bar--cta{ padding:.6rem .85rem calc(.6rem + env(safe-area-inset-bottom, 0px)); }
.pd-sticky-cta--full{ flex:1 1 auto; width:100%; justify-content:center; gap:.5rem; font-weight:600; }
.pd-sticky-thumb{
  flex-shrink:0; width:46px; height:46px; border-radius:var(--r-md);
  overflow:hidden; background:var(--c-bg);
  border:1px solid var(--c-line);
}
.pd-sticky-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.pd-sticky-info{ flex:1; min-width:0; }
.pd-sticky-name{
  font-family:var(--ff-display); font-weight:500;
  font-size:.85rem; line-height:1.2; color:var(--c-ink);
}
.pd-sticky-prices{ display:flex; align-items:baseline; gap:.4rem; margin-top:.1rem; }
.pd-sticky-price{
  font-family:var(--ff-eyebrow); font-weight:600; font-size:.88rem;
  letter-spacing:.02em; color:var(--c-ink);
}
.pd-sticky-old{
  font-size:.75rem; color:var(--c-muted); text-decoration:line-through;
}
.pd-sticky-cta{
  flex-shrink:0;
  height:42px; padding:0 1.1rem;
  font-family:var(--ff-eyebrow);
  font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; font-weight:600;
  display:inline-flex; align-items:center; gap:.4rem;
}
.pd-sticky-cta .bi{ font-size:.95rem; }
@media (max-width:380px){
  .pd-sticky-thumb{ width:40px; height:40px; }
  .pd-sticky-cta{ padding:0 .85rem; font-size:.68rem; }
}

/* --- Gallery zoom transitions polished ---------------------------- */
#pdMain{ transition:transform .35s cubic-bezier(.2,.6,.2,1); cursor:zoom-in; }
#pdMainWrap.zoomed #pdMain{ transform:scale(1.7); cursor:zoom-out; }

/* --- pd-share : refinement -------------------------------------- */
.pd-share{ display:flex; align-items:center; gap:.5rem; margin-top:1.25rem; padding-top:1rem; border-top:1px solid var(--c-line); }
.pd-share a, .pd-share button{
  width:36px; height:36px; border-radius:50%;
  border:1px solid var(--c-line); background:#fff; color:var(--c-ink-2);
  display:inline-flex; align-items:center; justify-content:center;
  cursor:pointer; text-decoration:none;
  transition:background .2s ease, color .2s ease, border-color .2s ease, transform .25s ease;
}
.pd-share a:hover, .pd-share button:hover{
  background:var(--c-ink); color:#fff; border-color:var(--c-ink);
  transform:translateY(-2px);
}
.pd-share .bi{ font-size:1rem; }

/* ============================================================================
   HEADER REFINEMENT — Mega menu polish + Search overlay full-width
   ============================================================================ */

/* --- Search clear button (X) ----------------------------------------- */
.search-pill__clear{
  flex-shrink:0;
  width:30px; height:30px; border-radius:50%;
  background:transparent; border:0; color:var(--c-ink-2);
  display:none; align-items:center; justify-content:center;
  cursor:pointer; margin-right:.25rem;
  transition:background .15s ease, color .15s ease;
}
.search-pill__clear[hidden]{ display:none !important; }
.search-pill__clear:not([hidden]){ display:inline-flex; }
.search-pill__clear:hover{ background:var(--c-bg); color:var(--c-ink); }

/* --- Search overlay -------------------------------------------------- */
.search-overlay{
  position:fixed; inset:0;
  display:none; z-index:1060;
  align-items:flex-start; justify-content:center;
}
.search-overlay.is-open{ display:flex; }
.search-overlay[hidden]{ display:none !important; }
.search-overlay__backdrop{
  position:absolute; inset:0;
  background:rgba(20,18,14,.45);
  -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
  opacity:0; transition:opacity .25s ease;
}
.search-overlay.is-open .search-overlay__backdrop{ opacity:1; }
.search-overlay__panel{
  position:relative;
  margin-top:120px; width:min(720px, 92vw);
  background:#fff;
  border:1px solid var(--c-line);
  border-radius:var(--r-md);
  box-shadow:0 24px 60px rgba(30,27,22,.18);
  overflow:hidden;
  opacity:0; transform:translateY(-12px);
  transition:opacity .25s ease, transform .25s ease;
}
.search-overlay.is-open .search-overlay__panel{ opacity:1; transform:none; }

.search-overlay__head{
  display:flex; align-items:center; justify-content:space-between;
  padding:.75rem 1.1rem; border-bottom:1px solid var(--c-line);
  background:var(--c-bg);
}
.search-overlay__eyebrow{
  font-family:var(--ff-eyebrow);
  font-size:.7rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--c-ink-2); font-weight:600;
}
.search-overlay__close{
  width:30px; height:30px; border-radius:50%;
  background:transparent; border:0; color:var(--c-ink-2);
  display:inline-flex; align-items:center; justify-content:center;
  cursor:pointer;
  transition:background .15s ease, color .15s ease;
}
.search-overlay__close:hover{ background:#fff; color:var(--c-ink); }

.search-overlay__body{ max-height:60vh; overflow:auto; }

/* --- État vide --------------------------------------------------------- */
.search-empty{ padding:1.25rem 1.25rem 1rem; }
.search-empty__title{
  font-family:var(--ff-display); font-weight:500;
  font-size:1.1rem; letter-spacing:-.005em;
  margin:.25rem 0 .85rem; color:var(--c-ink);
}
.search-empty__chips{
  display:flex; flex-wrap:wrap; gap:.5rem;
  margin-bottom:1.1rem;
}
.search-chip{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.4rem .75rem .4rem .4rem;
  background:var(--c-bg); border:1px solid var(--c-line);
  border-radius:999px;
  color:var(--c-ink); text-decoration:none;
  font-size:.82rem; font-weight:500;
  transition:background .2s ease, color .2s ease, border-color .2s ease, transform .2s ease;
}
.search-chip:hover{
  background:var(--c-ink); color:#fff; border-color:var(--c-ink);
  transform:translateY(-1px); text-decoration:none;
}
.search-chip__img{
  width:24px; height:24px; border-radius:50%;
  background:#fff; overflow:hidden;
  display:inline-flex; align-items:center; justify-content:center;
  flex-shrink:0;
}
.search-chip__img img{ width:100%; height:100%; object-fit:cover; }

.search-empty__hint{
  display:flex; align-items:center; gap:.55rem;
  padding:.7rem .85rem;
  background:rgba(179,142,93,.08);
  border:1px solid rgba(179,142,93,.22);
  border-radius:var(--r-md);
  font-size:.82rem; color:var(--c-ink-2);
}
.search-empty__hint .bi{ color:var(--c-gold); font-size:1rem; }

/* --- Suggestions list (override des règles globales legacy) ----------- */
.search-overlay .search-suggest{
  position:static !important; left:auto !important; right:auto !important; top:auto !important;
  border:0 !important; border-radius:0 !important; box-shadow:none !important;
  max-height:none !important; overflow:visible !important; display:none !important;
  background:transparent !important;
}
.search-overlay .search-suggest.open{ display:block !important; }
.search-overlay .search-suggest a{
  padding:.7rem 1.1rem;
  border-bottom:1px solid var(--c-line);
  transition:background .15s ease;
  position:relative;
}
.search-overlay .search-suggest a:last-child{ border-bottom:0; }
.search-overlay .search-suggest a:hover,
.search-overlay .search-suggest a.is-active{
  background:var(--c-bg);
}
.search-overlay .search-suggest img{
  width:48px !important; height:48px !important;
  border-radius:var(--r-md) !important;
  object-fit:cover !important;
}
.search-overlay .search-suggest a > span{ display:flex; flex-direction:column; gap:.15rem; min-width:0; flex:1; }
.search-overlay .search-suggest a > span::first-line{ /* */ }
.search-overlay .search-suggest a small{
  color:var(--c-accent-dk);
  font-family:var(--ff-eyebrow); font-weight:600;
  font-size:.78rem; letter-spacing:.04em;
}

/* --- Footer "Voir tous" --------------------------------------------- */
.search-overlay__foot{
  border-top:1px solid var(--c-line);
  background:var(--c-bg);
  padding:.65rem 1.1rem;
}
.search-overlay__seeall{
  display:inline-flex; align-items:center; gap:.5rem;
  color:var(--c-ink); text-decoration:none;
  font-family:var(--ff-eyebrow); font-size:.72rem;
  letter-spacing:.16em; text-transform:uppercase; font-weight:600;
  transition:gap .2s ease, color .2s ease;
}
.search-overlay__seeall:hover{ color:var(--c-accent-dk); gap:.75rem; text-decoration:none; }

/* Body scroll lock when overlay open */
body.search-locked{ overflow:hidden; }

/* --- Mega menu : polish supplémentaire ------------------------------- */
.nav-top-list > li > .mega{
  /* Largeur élargie + grille en 5 cols pour donner plus d'air */
  width:960px;
}
.mega-grid{ grid-template-columns:repeat(5, 1fr) !important; gap:1rem; }
@media (max-width:1199.98px){
  .nav-top-list > li > .mega{ width:780px; }
  .mega-grid{ grid-template-columns:repeat(4, 1fr) !important; }
}
.mega-cats .mega-cat{
  padding:.85rem .5rem !important;
  position:relative;
}
.mega-cats .mega-cat__img{
  width:72px; height:72px;
  transition:transform .35s cubic-bezier(.2,.6,.2,1);
}
.mega-cats .mega-cat:hover .mega-cat__img{ transform:scale(1.06); }
.mega-cats .mega-cat__label{
  font-family:var(--ff-display); font-weight:500;
  font-size:.88rem; letter-spacing:-.005em;
  margin-top:.45rem;
}
.mega-cats .mega-cat::after{
  content:""; position:absolute; left:50%; bottom:-6px;
  width:0; height:1px; background:var(--c-gold);
  transform:translateX(-50%);
  transition:width .3s ease;
}
.mega-cats .mega-cat:hover::after{ width:32px; }

/* --- Mobile : search overlay adapté ---------------------------------- */
@media (max-width:991.98px){
  .search-overlay__panel{ margin-top:80px; width:94vw; }
  .search-overlay__body{ max-height:70vh; }
}

/* ============================================================================
   GLOBAL OVERRIDES (V2) — fond blanc global, cards plus grandes,
   border-radius, photos non croppées, layout produit, etc.
   Bloc à la fin pour overrider tout l'existant.
   ============================================================================ */

/* --- Fond global blanc --------------------------------------------- */
html, body{ background:#FFFFFF !important; }
main, .pd-wrap, .ex-wrap{ background:#FFFFFF !important; }
.bg-surface{ background:#FFFFFF !important; }
.section.bg-surface{ background:var(--c-soft) !important; } /* nuance très légère pour distinguer les sections */

/* --- Border-radius cards produit ------------------------------------ */
.product-card{
  border-radius:18px !important;
  background:#fff !important;
  border:1px solid var(--c-line) !important;
  overflow:hidden !important;
  box-shadow:0 1px 2px rgba(20,18,14,.04) !important;
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease !important;
}
.product-card:hover{
  transform:translateY(-3px) !important;
  box-shadow:0 12px 30px rgba(20,18,14,.08) !important;
  border-color:var(--c-line) !important;
}
.product-card__img{
  border-radius:0 !important;
  aspect-ratio:1/1 !important;
  background:var(--c-soft) !important;
  padding:14px !important;
}
.product-card__img-link{ border-radius:14px; overflow:hidden; }
.product-card__img-link img,
.product-card__img > a img,
.product-card__img > img{
  width:100% !important; height:100% !important;
  object-fit:contain !important;       /* PAS de crop : adaptation auto */
  object-position:center !important;
  background:#fff;
  border-radius:14px;
}
.product-card:hover .product-card__img-link img,
.product-card:hover .product-card__img img{
  transform:scale(1.03) !important;    /* zoom léger sans crop */
}
.product-card__body{
  padding:14px 18px 18px !important;
  background:#fff !important;
}
.product-card__title{
  font-family:var(--ff-display);
  font-size:1rem !important;
  font-weight:600 !important;
  line-height:1.35 !important;
  letter-spacing:-.005em !important;
  margin:0 0 .35rem !important;
  max-height:2.7em !important;
  overflow:hidden !important;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
}
.product-card__title a{ color:var(--c-ink) !important; text-decoration:none; }
.product-card__title a:hover{ color:var(--c-accent-dk) !important; }
.product-card__prices{ margin-top:.4rem !important; gap:.65rem !important; }
.price{ font-family:var(--ff-display); font-weight:700 !important; font-size:1.1rem !important; letter-spacing:0 !important; color:var(--c-ink) !important; }
.price-old{ font-size:.92rem !important; color:var(--c-ink-2) !important; } /* contraste WCAG AA sur blanc (>=4.5:1) */

/* Badges aux coins arrondis */
.product-card__badges{ top:1rem !important; left:1rem !important; }
.product-card__badges .badge-chip{
  border-radius:999px !important;
  padding:.32rem .7rem !important;
  font-size:.66rem !important;
  letter-spacing:.1em !important;
  border:0 !important;
}
.product-card .wish-btn{
  border-radius:50% !important;
  top:1rem !important; right:1rem !important;
  background:#fff !important;
  border:1px solid var(--c-line) !important;
  box-shadow:0 1px 4px rgba(20,18,14,.06) !important;
}

/* --- Border-radius cards catégories --------------------------------- */
.cat-slider__card{ border-radius:22px !important; }
.cat-editorial__card{ border-radius:22px !important; }

/* --- Sections : fond blanc + spacing ------------------------------- */
.section.py-5{ background:transparent; }

/* --- Trust strip : fond blanc épuré ------------------------------- */
.trust-strip{ background:#fff; border-top:1px solid var(--c-line); }

/* --- Brand promise : fond très léger ----------------------------- */
.brand-promise{
  background:linear-gradient(180deg, #fff 0%, var(--c-soft) 100%) !important;
  border-top:1px solid var(--c-line) !important;
  border-bottom:1px solid var(--c-line) !important;
}
.brand-promise__pillars li{
  background:#fff !important;
  border:1px solid var(--c-line) !important;
}

/* --- Benefits (bottom) : fond blanc -------------------------------- */
.benefits{ background:#fff; }
.benefits-col i{ background:var(--c-soft) !important; border-color:var(--c-line) !important; }

/* --- Footer benefit cards en blanc-ink (footer reste foncé) ------- */
/* (rien à changer : footer est volontairement sombre) */

/* --- Quick-add overlay (cards) : couleur cohérente ------------------ */
.product-card__quickadd{
  background:linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.95) 90%) !important;
}
.product-card__quickadd-btn{
  background:var(--c-ink) !important;
  color:#fff !important;
}
.product-card__quickadd-btn:hover{
  background:var(--c-accent-dk) !important;
}

/* --- Border-radius homogène pour panels divers ------------------- */
.ex-card, .ex-summary, .pd-tabs .pd-tabpanels, .pd-eta{ border-radius:14px !important; }
.brand-promise__pillars li{ border-radius:14px !important; }
.search-pill{ border-radius:999px !important; }

/* --- Menu mobile : catégories épurées (sans images) --------------- */
.nav-mobile__eyebrow{
  display:flex; justify-content:space-between; align-items:baseline;
  font-family:var(--ff-eyebrow);
  font-size:.7rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--c-ink-2);
  margin:1.25rem 0 .6rem;
  padding:0 1rem;
  font-weight:600;
}
.nav-mobile__see-all{
  color:var(--c-accent-dk); text-decoration:none;
  font-size:.66rem; letter-spacing:.14em; font-weight:600;
}
.nav-mobile__see-all:hover{ color:var(--c-ink); text-decoration:underline; }

.nav-mobile__cats{
  display:flex; flex-direction:column;
  gap:0;
  background:#fff;
  border:1px solid var(--c-line);
  border-radius:14px;
  overflow:hidden;
}
.nav-mobile__cats li + li .nav-mobile__cat{
  border-top:1px solid var(--c-line);
}
.nav-mobile__cat{
  display:grid;
  grid-template-columns:auto 1fr auto auto;
  align-items:center;
  gap:.85rem;
  padding:.95rem 1.1rem;
  background:transparent !important;
  color:var(--c-ink) !important; text-decoration:none;
  border-radius:0 !important;
  transition:background .15s ease, padding-left .15s ease;
}
.nav-mobile__cat:hover, .nav-mobile__cat:active{
  background:var(--c-soft) !important;
  padding-left:1.4rem;
  text-decoration:none;
}
.nav-mobile__cat-dot{
  display:inline-block; width:6px; height:6px; border-radius:50%;
  background:var(--c-gold);
  flex-shrink:0;
}
.nav-mobile__cat:hover .nav-mobile__cat-dot{ background:var(--c-ink); }
.nav-mobile__cat-label{
  font-family:var(--ff-display);
  font-size:.95rem; font-weight:500;
  color:var(--c-ink);
  line-height:1.3;
  min-width:0;
}
.nav-mobile__cat-count{
  font-family:var(--ff-eyebrow);
  font-size:.66rem; font-weight:600; letter-spacing:.08em;
  color:var(--c-ink-2);
  background:var(--c-soft);
  padding:.2rem .55rem;
  border-radius:999px;
}
.nav-mobile__cat-chev{
  color:var(--c-muted) !important; font-size:.85rem !important;
  transition:transform .2s ease, color .2s ease;
}
.nav-mobile__cat:hover .nav-mobile__cat-chev{
  color:var(--c-ink) !important; transform:translateX(2px);
}
/* Override des anciennes règles avec image (redondance pour s'assurer) */
.nav-mobile__cat-img{ display:none !important; }

/* --- Topbar mobile (au-dessus du header principal) ----------------- */
.topbar-mobile{
  background:linear-gradient(90deg, var(--c-topbar-from) 0%, var(--c-topbar-mid) 50%, var(--c-topbar-to) 100%);
  color:var(--c-topbar-text);
  font-size:.74rem;
  letter-spacing:.02em;
  border-bottom:1px solid rgba(255,255,255,.06);
}
.topbar-mobile__row{
  display:flex; align-items:center; gap:.7rem;
  padding:.5rem 1rem;
  flex-wrap:nowrap;
  overflow:hidden;
}
.topbar-mobile__phone{
  color:#fff !important; text-decoration:none;
  display:inline-flex; align-items:center; gap:.35rem;
  font-weight:500; flex-shrink:0;
}
.topbar-mobile__phone .bi{ color:var(--c-gold); font-size:.85rem; }
.topbar-mobile__free{
  display:inline-flex; align-items:center; gap:.35rem;
  color:var(--c-topbar-text); flex-shrink:0;
  font-size:.7rem; padding-left:.5rem; border-left:1px solid rgba(255,255,255,.18);
}
.topbar-mobile__free .bi{ color:var(--c-gold); }
.topbar-mobile__free strong{ color:#fff; font-weight:600; }
.topbar-mobile__spacer{ flex:1; }
.topbar-mobile__socials{
  display:inline-flex; align-items:center; gap:.3rem; flex-shrink:0;
}
.topbar-mobile__socials a{
  width:24px; height:24px; border-radius:50%;
  border:1px solid rgba(255,255,255,.18);
  display:inline-flex; align-items:center; justify-content:center;
  color:var(--c-topbar-text) !important; text-decoration:none;
  transition:background .2s ease, color .2s ease, border-color .2s ease;
}
.topbar-mobile__socials a:hover{
  background:#fff; color:var(--c-ink) !important; border-color:#fff;
}
.topbar-mobile__socials a > svg,
.topbar-mobile__socials a > i.bi{
  width:13px; height:13px; font-size:.75rem !important; line-height:1 !important;
}
.topbar-mobile__account{
  display:inline-flex; align-items:center; gap:.3rem;
  padding:.25rem .55rem;
  background:rgba(179,142,93,.18);
  color:#fff !important; text-decoration:none;
  border:1px solid rgba(179,142,93,.4);
  border-radius:999px;
  font-size:.7rem; font-weight:500;
  flex-shrink:0;
  transition:background .2s ease, border-color .2s ease;
}
.topbar-mobile__account:hover{
  background:var(--c-gold); border-color:var(--c-gold); color:var(--c-ink) !important;
}
.topbar-mobile__account .bi{ font-size:.78rem; }

/* Très petit mobile : on resserre encore */
@media (max-width:399.98px){
  .topbar-mobile{ font-size:.68rem; }
  .topbar-mobile__row{ padding:.4rem .75rem; gap:.45rem; }
  .topbar-mobile__free{ display:none; }       /* libère la place */
  .topbar-mobile__account span{ display:none; } /* icône seule */
  .topbar-mobile__account{ padding:.25rem .35rem; }
}

/* --- Variants : chips d'options + valeurs --------------------------- */
.pd-variants{ margin:1rem 0; display:flex; flex-direction:column; gap:1rem; }
.pd-variants__group{ }
.pd-variants__head{
  display:flex; justify-content:space-between; align-items:baseline;
  margin-bottom:.5rem; gap:.75rem;
}
.pd-variants__label{
  font-family:var(--ff-eyebrow); font-weight:600;
  font-size:.74rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--c-ink);
}
.pd-variants__selected{
  font-size:.85rem; color:var(--c-ink-2); font-weight:500;
}
.pd-variants__chips{
  display:flex; flex-wrap:wrap; gap:.45rem;
}
.pd-variants__chip{
  display:inline-flex; align-items:center; gap:.35rem;
  padding:.55rem 1rem;
  font-family:var(--ff-body);
  font-size:.88rem; font-weight:500; line-height:1;
  background:#fff; color:var(--c-ink);
  border:1.5px solid var(--c-line); border-radius:999px;
  cursor:pointer;
  transition:background .2s ease, border-color .2s ease, color .2s ease, transform .15s ease;
}
.pd-variants__chip:hover{
  border-color:var(--c-ink-2);
  background:var(--c-soft);
}
.pd-variants__chip.is-selected{
  background:var(--c-ink); color:#fff; border-color:var(--c-ink);
  transform:translateY(-1px);
  box-shadow:0 4px 10px rgba(20,18,14,.14);
}
.pd-variants__chip:focus-visible{
  outline:2px solid var(--c-gold); outline-offset:3px;
}
.pd-variants__chip.is-disabled{
  opacity:.4; cursor:not-allowed; pointer-events:none;
  text-decoration:line-through;
}
/* ---- Pastille image d'une valeur d'option (ex. couleur) ---- */
.pd-variants__chip--img{ padding:.25rem; }   /* image seule (sans texte) → tuile compacte */
.pd-variants__swatch{
  width:46px; height:46px; flex:0 0 auto;
  border-radius:999px; object-fit:cover; display:block;
  background:var(--c-soft); border:1px solid rgba(20,18,14,.10);
}
.pd-variants__chip.is-selected .pd-variants__swatch{
  border-color:rgba(255,255,255,.65);
}
.pd-variants__hint{
  margin-top:.25rem;
  font-size:.82rem; color:var(--c-ink-2);
  padding:.55rem .85rem;
  background:var(--c-soft);
  border:1px dashed var(--c-line);
  border-radius:10px;
  display:none;
}
.pd-variants__hint:not(:empty){ display:block; }
.pd-variants__hint.is-ok{ background:rgba(79,122,74,.08); border-color:rgba(79,122,74,.25); border-style:solid; color:var(--c-success); }
.pd-variants__hint.is-warn{ background:rgba(179,142,93,.08); border-color:rgba(179,142,93,.25); border-style:solid; color:var(--c-accent-dk); }
.pd-variants__hint.is-err{ background:#FDF5F3; border-color:rgba(178,74,58,.3); border-style:solid; color:var(--c-danger); }

/* --- Express checkout inline (fiche produit) ---------------------- */
.pd-express{
  margin-top:1rem;
  padding:1.25rem 1.25rem 1.1rem;
  background:var(--c-soft);
  border:1px solid var(--c-line);
  border-radius:14px;
  box-shadow:0 1px 2px rgba(20,18,14,.04);
}
.pd-express__head{ margin-bottom:1rem; }
.pd-express__eyebrow{
  display:inline-flex; align-items:center; gap:.4rem;
  background:var(--c-ink); color:#fff;
  padding:.32rem .8rem; border-radius:999px;
  font-family:var(--ff-eyebrow);
  font-size:.66rem; letter-spacing:.16em; text-transform:uppercase; font-weight:600;
}
.pd-express__eyebrow .bi{ color:var(--c-gold); font-size:.85rem; }
.pd-express__sub{
  margin:.6rem 0 0; font-size:.85rem; color:var(--c-ink-2);
}
.pd-express__field{ margin-bottom:.85rem; }
.pd-express__field .form-label{
  display:block;
  font-family:var(--ff-eyebrow);
  font-size:.7rem; letter-spacing:.12em; text-transform:uppercase;
  font-weight:600; color:var(--c-ink-2); margin-bottom:.35rem;
}
.pd-express__field .form-control{
  width:100%; padding:.7rem .9rem;
  background:#fff; border:1px solid var(--c-line); border-radius:10px;
  font-size:.95rem; font-family:var(--ff-body);
  transition:border-color .2s ease, box-shadow .2s ease;
}
.pd-express__field .form-control:focus{
  border-color:var(--c-ink); box-shadow:0 0 0 3px rgba(30,27,22,.06); outline:none;
}
.pd-express__field .form-control.is-invalid{
  border-color:var(--c-danger);
  background:#FDF5F3;
  box-shadow:0 0 0 3px rgba(178,74,58,.08);
}
.pd-express__field textarea.form-control{ min-height:64px; resize:vertical; }
.pd-express__inputwrap{ position:relative; }
.pd-express__prefix{
  position:absolute; left:.85rem; top:50%; transform:translateY(-50%);
  font-weight:600; color:var(--c-ink); font-size:.95rem;
  font-family:var(--ff-eyebrow); letter-spacing:.04em;
  pointer-events:none;
}
.pd-express__inputwrap::after{
  content:""; position:absolute; left:3.05rem; top:50%; transform:translateY(-50%);
  width:1px; height:18px; background:var(--c-line);
}
.pd-express__inputwrap .form-control{ padding-left:3.4rem !important; }
.pd-express__err{
  display:none; font-size:.78rem; color:var(--c-danger); margin-top:.3rem;
}
.pd-express__err.is-visible{ display:block; }
.pd-express__cta{
  width:100%; min-height:52px;
  margin-top:.4rem;
}
.pd-express__cta.is-loading{ opacity:.85; pointer-events:none; }
.pd-express__cta.is-loading .pd-cta__icon i{
  display:inline-block;
  animation:spin .8s linear infinite;
}
.pd-express__reassure{
  display:flex; align-items:center; gap:.5rem;
  margin:1rem 0 0; padding:.7rem .85rem;
  background:rgba(79,122,74,.08);
  border:1px solid rgba(79,122,74,.18);
  border-radius:10px;
  font-size:.8rem; color:var(--c-ink-2); text-align:left;
}
.pd-express__reassure .bi{ color:var(--c-success); font-size:.95rem; }

/* --- Nav mobile : socials en haut du menu offcanvas --------------- */
.nav-mobile__socials{
  display:flex; gap:.5rem; flex-wrap:wrap;
  padding:.85rem 1rem;
  margin:0 0 1rem;
  background:var(--c-soft);
  border:1px solid var(--c-line);
  border-radius:14px;
  justify-content:flex-start;
}
.nav-mobile__socials a{
  width:42px; height:42px; border-radius:50%;
  background:#fff;
  border:1px solid var(--c-line);
  color:var(--c-ink);
  display:inline-flex !important;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  transition:background .2s ease, color .2s ease, transform .2s ease, border-color .2s ease;
}
.nav-mobile__socials a:hover{
  background:var(--c-ink); color:#fff; border-color:var(--c-ink);
  transform:translateY(-2px);
}
.nav-mobile__socials a > svg,
.nav-mobile__socials a > i.bi{
  width:18px; height:18px;
  font-size:1.05rem !important;
  line-height:1 !important;
  display:inline-block !important;
  pointer-events:none;
}



/* ============================================================================
   V3 OVERRIDES — Hero 600px / cover image / caption transparent / divers
   ============================================================================ */

/* Hero : hauteur fixe 600px desktop, adaptable mobile */
.hero.hero--premium .carousel-item,
.hero .carousel-item{
  aspect-ratio:auto !important;
  height:600px !important;
  min-height:600px !important;
}
@media (max-width:991.98px){
  .hero.hero--premium .carousel-item,
  .hero .carousel-item{ height:420px !important; min-height:420px !important; }
}
@media (max-width:575.98px){
  .hero.hero--premium .carousel-item,
  .hero .carousel-item{ height:340px !important; min-height:340px !important; }
}
.hero-img{
  object-fit:contain !important;        /* image entiere visible — aucun crop */
  object-position:center !important;
  background:var(--c-ink);
}

/* Caption : fond transparent (pas de blur ni overlay flou) */
.hero.hero--premium .hero-caption__inner{
  background:transparent !important;
  -webkit-backdrop-filter:none !important;
  backdrop-filter:none !important;
  padding:0 !important;
}
.hero.hero--premium .hero-caption__text{
  background:transparent !important;
  text-shadow:0 2px 8px rgba(0,0,0,.55), 0 1px 2px rgba(0,0,0,.5);
}
.hero.hero--premium .hero-caption__text *{
  background:transparent !important;
}

/* Catégories slider : titre blanc + suppression numérotation */
.cat-slider__title{ color:#fff !important; }
.cat-slider__index{ display:none !important; }
.cat-editorial__index{ display:none !important; }

/* Espacements section TIGHT */
.section.py-5{ padding-block:1.75rem !important; }
@media (max-width:991.98px){ .section.py-5{ padding-block:1.25rem !important; } }
@media (max-width:575.98px){ .section.py-5{ padding-block:1rem !important; } }
.brand-promise{ padding:2rem 0 !important; }
@media (max-width:991.98px){ .brand-promise{ padding:1.5rem 0 !important; } }

/* Card produit : photo cover (couvre l'espace) */
.product-card__img{ aspect-ratio:1/1 !important; padding:0 !important; background:var(--c-soft) !important; }
.product-card__img-link img,
.product-card__img > a img,
.product-card__img > img{
  object-fit:cover !important;
  object-position:center !important;
  border-radius:0 !important;
}
.product-card__img-link{ border-radius:0 !important; }

/* Wishlist heart : supprimé de la card produit */
.product-card .wish-btn{ display:none !important; }

/* Détail produit : photo CONTAIN (s'ajuste sans crop) */
#pdMain,
.pd-main img{
  object-fit:contain !important;
  object-position:center !important;
}
#pdMain{
  width:100% !important;
  height:100% !important;
  padding:1rem !important;
  aspect-ratio:auto !important;
}

/* Galerie produit "stacked" : photo principale + thumbnails sous (pas à côté) */
.pd-gallery.pd-gallery--stacked{
  display:block !important;
  grid-template-columns:1fr !important;
}
.pd-thumbs-h.pd-thumbs-h--below{
  display:flex !important;
  gap:.6rem;
  margin-top:.85rem;
  overflow-x:auto;
  padding-bottom:.25rem;
}
.pd-thumbs-h--below .pd-thumb{
  width:80px; aspect-ratio:3/4; height:auto; flex-shrink:0;
  border:2px solid transparent;
  border-radius:10px; overflow:hidden;
  background:var(--c-soft); padding:0;
  cursor:pointer;
  transition:border-color .2s ease;
}
.pd-thumbs-h--below .pd-thumb img{
  width:100%; height:100%;
  object-fit:contain !important; object-position:center;
  padding:.25rem; display:block;
}
.pd-thumbs-h--below .pd-thumb.active{ border-color:var(--c-ink); }
.pd-thumbs-h--below .pd-thumb:hover{ border-color:var(--c-ink-2); }
.pd-gallery--stacked .pd-main{
  width:100%; aspect-ratio:1/1; overflow:hidden;
  border-radius:14px; background:var(--c-soft);
  position:relative;
}
.pd-gallery--stacked #pdMain{
  width:100% !important; height:100% !important;
  object-fit:contain !important; object-position:center !important;
  aspect-ratio:auto !important;
}

/* WhatsApp flottant : au-dessus de back-to-top + desktop SANS label */
.float-wa{
  bottom:5.2rem !important;       /* au-dessus du back-to-top (1rem + ~46px + gap) */
  right:1rem !important;
}
.back-to-top{
  bottom:1rem !important;
  right:1rem !important;
}
@media (min-width:768px){
  /* Desktop : icône seule, pas de label */
  .float-wa{
    width:52px !important; height:52px !important;
    padding:0 !important;
    justify-content:center !important;
  }
  .float-wa__label{ display:none !important; }
  .float-wa .bi{ font-size:1.55rem !important; }
}

/* ===== Bottom nav mobile : raccourcis ===== */
.bottom-nav{
  position:fixed; left:0; right:0; bottom:0;
  background:#fff;
  border-top:1px solid var(--c-line);
  display:flex; justify-content:space-around; align-items:stretch;
  z-index:1040;
  padding:.25rem .25rem env(safe-area-inset-bottom, .25rem);
  box-shadow:0 -4px 18px rgba(20,18,14,.08);
}
.bottom-nav__item{
  flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:.15rem;
  padding:.5rem .25rem;
  background:transparent; border:0;
  color:var(--c-ink-2); text-decoration:none;
  font-size:.66rem; font-weight:500;
  position:relative;
  transition:color .15s ease;
  min-width:0;
}
.bottom-nav__item .bi{ font-size:1.25rem; line-height:1; }
.bottom-nav__item:hover, .bottom-nav__item:focus-visible{ color:var(--c-ink); text-decoration:none; }
.bottom-nav__item.is-active{ color:var(--c-ink); }
.bottom-nav__item.is-active .bi{ color:var(--c-gold); }
.bottom-nav__item.is-active::before{
  content:""; position:absolute; top:0; left:25%; right:25%; height:2px;
  background:var(--c-gold); border-radius:0 0 2px 2px;
}
.bottom-nav__badge{
  position:absolute; top:.2rem; right:calc(50% - 24px);
  background:var(--c-danger); color:#fff;
  font-size:.75rem; font-weight:700;
  min-width:20px; height:20px; padding:0 5px; border-radius:999px;
  display:inline-flex; align-items:center; justify-content:center;
  border:2px solid #fff;
  line-height:1; font-variant-numeric:tabular-nums;
  box-shadow:0 2px 6px rgba(20,18,14,.2);
}

/* On laisse de la place en bas du body sur mobile pour ne pas masquer le footer */
@media (max-width:991.98px){
  body{ padding-bottom:60px; }
  /* Décale les flottants au-dessus de la bottom-nav */
  .float-wa{ bottom:calc(60px + 4.4rem) !important; }
  .back-to-top{ bottom:calc(60px + 1rem) !important; }
  .ex-sticky-mobile, .pd-sticky-bar.pd-sticky-bar--premium.is-visible{ bottom:60px !important; }
}

/* ============================================================================
   V4 — short desc, meta-row, secondary CTA, inline search, filters cats only,
        reveal delay, mega-cat children expand, sections lede
   ============================================================================ */

/* Short description sous le prix */
.pd-shortdesc{
  margin:.6rem 0 .8rem;
  font-size:.95rem; line-height:1.55; color:var(--c-ink-2);
  padding:.6rem .85rem;
  border-left:3px solid var(--c-gold);
  background:rgba(179,142,93,.06);
  border-radius:0 8px 8px 0;
}
.pd-shortdesc *{ margin:0 0 .35rem; }
.pd-shortdesc *:last-child{ margin-bottom:0; }
/* Variante : short description déplacée APRÈS les options, juste au-dessus de l'express checkout */
.pd-shortdesc--prebuy{ margin-top:1rem; }
/* Variante : short description SOUS le formulaire (au-dessus de la description longue) */
.pd-shortdesc--postform{ margin-top:1.2rem; }

/* Ligne meta (ventes + ref) sous express checkout, avant description */
.pd-meta-row{
  list-style:none; padding:.7rem 0; margin:1rem 0 .5rem;
  display:flex; flex-wrap:wrap; gap:.6rem 1.2rem; align-items:center;
  font-size:.85rem; color:var(--c-ink-2);
  border-top:1px solid var(--c-line);
  border-bottom:1px solid var(--c-line);
}
.pd-meta-row li{ display:inline-flex; align-items:center; gap:.4rem; }
.pd-meta-row .pd-sales .bi{ color:var(--c-success); }
.pd-meta-row .pd-meta{
  font-family:var(--ff-eyebrow); letter-spacing:.06em; font-weight:600;
  font-size:.78rem; text-transform:uppercase; color:var(--c-ink);
}

/* ===== Produits complementaires (onglet /cms "Produits liés") =====
   Proposes sous le bloc d'achat, jamais coches par defaut. La ligne s'eclaire
   quand elle est retenue pour que le client voie ce qu'il ajoute au total. */
.pd-addons{
  margin:1rem 0 .5rem;
  padding:.9rem 1rem;
  border:1px solid var(--c-line);
  border-radius:var(--r-card, 12px);
  background:var(--c-surface-2, #fafafa);
}
.pd-addons__head{
  display:flex; align-items:baseline; gap:.6rem; margin-bottom:.7rem;
}
.pd-addons__title{
  font-family:var(--ff-heading); font-weight:700; font-size:.98rem; color:var(--c-ink);
}
.pd-addons__hint{
  font-size:.72rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:var(--c-ink-2);
}

.pd-addon{
  padding:.6rem .7rem;
  border:1px solid var(--c-line);
  border-radius:10px;
  background:#fff;
}
.pd-addon__main{ display:flex; align-items:center; gap:.75rem; }
.pd-addon + .pd-addon{ margin-top:.5rem; }
.pd-addon--on{ border-color:var(--c-primary); box-shadow:0 0 0 2px rgba(var(--c-primary-rgb, 0 0 0), .12); }
/* Coche sans option choisie : la commande est bloquee, on le montre. */
.pd-addon--needs-variant{ border-color:var(--c-danger, #dc2626); }
.pd-addon--needs-variant .pd-addon__variant{ border-color:var(--c-danger, #dc2626); }

/* Le choix d'option n'apparait qu'une fois la case cochee : on ne demande
   au client de choisir que s'il a manifeste son interet. */
.pd-addon__choice{ display:none; margin:.6rem 0 .1rem; padding-left:calc(20px + .75rem); }
.pd-addon--on .pd-addon__choice{ display:block; }
.pd-addon__choice-lbl{
  font-size:.75rem; font-weight:700; letter-spacing:.03em; text-transform:uppercase;
  color:var(--c-ink-2);
}

/* Pastilles d'options du complement : meme principe que le produit principal
   (un groupe par type d'option), en plus compact. */
.pd-addon__group + .pd-addon__group{ margin-top:.55rem; }
.pd-addon__group-head{ display:flex; align-items:baseline; gap:.4rem; margin-bottom:.3rem; }
.pd-addon__group-sel{ font-size:.75rem; color:var(--c-ink-2); }
.pd-addon__chips{ display:flex; flex-wrap:wrap; gap:.35rem; }
.pd-addon__chip{
  border:1px solid var(--c-line); background:#fff; color:var(--c-ink);
  border-radius:var(--r-pill, 999px); cursor:pointer;
  font-size:.8rem; font-weight:600; padding:.32rem .7rem; line-height:1.3;
  transition:border-color .15s ease, background .15s ease, color .15s ease;
}
.pd-addon__chip:hover{ border-color:var(--c-ink); }
.pd-addon__chip.is-selected{ background:var(--c-ink); border-color:var(--c-ink); color:#fff; }
.pd-addon__chip:focus-visible{ outline:2px solid var(--c-primary); outline-offset:2px; }
/* ---- Pastille image d'une valeur d'option du complement (ex. couleur) ----
   Meme grammaire que .pd-variants__chip--img sur le produit principal, en un
   cran plus petit : le complement est secondaire, il ne doit pas concurrencer
   visuellement le choix principal. Le nom reste lisible au survol (title) et
   dans l'en-tete du groupe une fois selectionne. */
.pd-addon__chip--img{ padding:.2rem; display:inline-flex; }
.pd-addon__swatch{
  width:40px; height:40px; flex:0 0 auto;
  border-radius:999px; object-fit:cover; display:block;
  background:var(--c-soft); border:1px solid rgba(20,18,14,.10);
}
.pd-addon__chip.is-selected .pd-addon__swatch{ border-color:rgba(255,255,255,.65); }
.pd-addon__choice-hint{
  margin-top:.35rem; font-size:.75rem; font-weight:600; color:var(--c-danger, #dc2626);
}
.pd-addon__choice-hint[hidden]{ display:none !important; }

.pd-addon__pick{ flex:0 0 auto; display:inline-flex; cursor:pointer; margin:0; }
.pd-addon__check{ width:20px; height:20px; cursor:pointer; accent-color:var(--c-primary); }

.pd-addon__media{ flex:0 0 auto; display:block; width:52px; height:52px; }
.pd-addon__media img,
.pd-addon__media--empty{
  width:52px; height:52px; object-fit:cover;
  border-radius:8px; border:1px solid var(--c-line); background:var(--c-surface-2, #f1f1f1);
  display:block;
}

.pd-addon__body{ flex:1 1 auto; min-width:0; }
.pd-addon__label{
  font-size:.72rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
  color:var(--c-primary); margin-bottom:.1rem;
}
.pd-addon__name{ font-size:.9rem; font-weight:600; color:var(--c-ink); line-height:1.25; }
.pd-addon__variant{ max-width:280px; font-size:.85rem; }

.pd-addon__price{
  flex:0 0 auto; font-weight:700; font-size:.95rem; color:var(--c-ink); white-space:nowrap;
}
/* Remise achat groupe : signalee pres du prix pour que le client comprenne
   pourquoi le montant baisse quand il coche. */
.pd-addon__deal{
  flex:0 0 auto; white-space:nowrap;
  font-size:.7rem; font-weight:800; letter-spacing:.03em;
  padding:.12rem .4rem; border-radius:999px;
  color:#fff; background:var(--c-success, #4F7A4A);
}

@media (max-width: 480px){
  .pd-addon__variant{ max-width:100%; }
  .pd-addon__choice{ padding-left:0; }
}

/* Bouton "Ajouter au panier" outline sous Commander maintenant */
.pd-cta--secondary{
  width:100%; min-height:48px;
  font-family:var(--ff-eyebrow); font-size:.78rem;
  letter-spacing:.14em; text-transform:uppercase; font-weight:600;
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
}
.pd-cta--secondary:hover{
  background:var(--c-ink) !important; color:#fff !important;
  border-color:var(--c-ink) !important;
}

/* Recherche : autocomplete inline (panneau attaché à l'input, pas de modal) */
.search-overlay{ display:none !important; }
body.search-locked{ overflow:auto !important; }

.search-form{ position:relative; }
.search-suggest-inline{
  position:absolute; left:0; right:0; top:calc(100% + 6px);
  background:#fff; border:1px solid var(--c-line);
  border-radius:14px; box-shadow:0 12px 30px rgba(30,27,22,.14);
  z-index:1050; max-height:60vh; overflow:auto;
  display:none;
}
.search-suggest-inline.is-open{ display:block; }
.search-suggest-inline a{
  display:flex; align-items:center; gap:.7rem;
  padding:.55rem .85rem;
  text-decoration:none; color:var(--c-ink);
  border-bottom:1px solid var(--c-line);
}
.search-suggest-inline a:last-child{ border-bottom:0; }
.search-suggest-inline a:hover,
.search-suggest-inline a.is-active{ background:var(--c-soft); }
.search-suggest-inline a img{
  width:42px; height:42px; flex-shrink:0;
  object-fit:cover; border-radius:8px; background:var(--c-soft);
}
.search-suggest-inline a > span{ display:flex; flex-direction:column; min-width:0; flex:1; }
.search-suggest-inline a small{ color:var(--c-muted); font-size:.78rem; margin-top:.1rem; }
.search-suggest-inline__empty{
  padding:1rem; text-align:center; color:var(--c-muted); font-size:.85rem;
}

/* Boutique : filtres — on n'affiche que la catégorie */
.filters .filter-block{ display:none; }
.filters .filter-block--cats{ display:block !important; }
.filters .filters__cats{
  list-style:none; padding:0; margin:0;
  display:flex; flex-direction:column; gap:.15rem;
}
.filters .filters__cats a{
  display:flex; align-items:center; justify-content:space-between;
  padding:.55rem .75rem; border-radius:8px;
  text-decoration:none; color:var(--c-ink-2); font-size:.92rem;
  transition:background .15s ease, color .15s ease;
}
.filters .filters__cats a:hover{ background:var(--c-soft); color:var(--c-ink); }
.filters .filters__cats a.is-active{ background:var(--c-ink); color:#fff; font-weight:600; }
.filters .filters__cats__count{ font-size:.75rem; color:var(--c-muted); }
.filters .filters__cats a.is-active .filters__cats__count{ color:rgba(255,255,255,.7); }
.filters form > .d-grid{ display:none !important; }

/* Reveal-on-scroll : delai réduit (l'utilisateur trouvait ça trop long) */
[data-reveal]{ transition-duration:.3s !important; }
[data-reveal].is-visible{ transition-delay:0s !important; }
.reveal-stagger > .col{ transition-delay:0s !important; }

/* Mega menu : catégorie parent avec sous-catégories → bouton qui déplie */
.mega-cat--has-children{ position:relative; }
.mega-subcats{
  display:none;
  list-style:none; margin:.4rem 0 0; padding:.5rem 0 0;
  border-top:1px dashed var(--c-line);
}
.mega-cat--has-children.is-open .mega-subcats{ display:block; }
.mega-subcats a{
  display:block; padding:.3rem .25rem;
  font-size:.82rem; color:var(--c-ink-2);
  text-decoration:none;
}
.mega-subcats a:hover{ color:var(--c-ink); }

/* Mobile : sous-catégories déroulables dans le offcanvas */
.nav-mobile__cat-chev{ transition:transform .2s ease; }
.nav-mobile__cat--open .nav-mobile__cat-chev{ transform:rotate(90deg); }
.nav-mobile__subcats{
  list-style:none; padding:0;
  margin:0 0 .35rem 1.6rem;
  border-left:2px solid var(--c-line);
  display:none;
}
.nav-mobile__cat--open + .nav-mobile__subcats{ display:block; }
.nav-mobile__subcats a{
  display:block; padding:.45rem .75rem;
  text-decoration:none; color:var(--c-ink-2);
  font-size:.88rem;
}
.nav-mobile__subcats a:hover{ background:var(--c-soft); color:var(--c-ink); }

/* Sous-titre des sections home */
.section-sub,
.section-lede{
  font-size:.92rem; color:var(--c-ink-2);
  margin-top:.25rem; margin-bottom:0;
  max-width:48rem; margin-inline:auto;
}

/* Hero caption : aucun fond/blur (texte avec ombre forte) */
.hero.hero--premium .hero-caption__inner{
  background:transparent !important;
  -webkit-backdrop-filter:none !important;
  backdrop-filter:none !important;
  padding:0 !important;
}
.hero.hero--premium .hero-caption__text,
.hero.hero--premium .hero-caption__text *{
  background:transparent !important;
  text-shadow:0 2px 10px rgba(0,0,0,.6), 0 1px 3px rgba(0,0,0,.55);
}

/* ===== Search inline (dropdown autocomplete) — pas de modal ===== */
.search-overlay{
  position:absolute !important;
  inset:auto !important;
  width:100%; max-width:640px;
  pointer-events:none;
  background:transparent !important;
}
.search-overlay__backdrop{ display:none !important; }
.search-overlay.is-open{ pointer-events:auto; }
body.search-locked{ overflow:auto !important; }   /* annulation du body lock */

/* Le panel devient un dropdown sous l'input pill */
.search-form{ position:relative; }
.search-form .search-overlay{
  position:absolute !important;
  top:calc(100% + 6px) !important;
  left:0 !important;
  right:0 !important;
  width:100% !important;
  max-width:none !important;
  z-index:100;
  display:none;
}
.search-form .search-overlay.is-open{ display:block; }
.search-form .search-overlay__panel{
  margin:0 !important;
  width:100% !important;
  max-width:none !important;
  background:#fff !important;
  border:1px solid var(--c-line) !important;
  border-radius:14px !important;
  box-shadow:0 10px 28px rgba(20,18,14,.10) !important;
  opacity:1 !important; transform:none !important;
  max-height:60vh; overflow:hidden;
}
.search-overlay__head{ display:none; }   /* pas d'eyebrow ni close */
.search-overlay__body{ max-height:55vh !important; overflow:auto; padding:.5rem 0; }
.search-empty{ padding:.85rem 1rem .65rem; }
.search-empty__title{ font-size:.95rem; margin:.1rem 0 .55rem; }
.search-empty__hint{ display:none; }   /* hint inline trop dense en dropdown */

/* Reveal au scroll : accéléré */
[data-reveal]{ transition-duration:.25s !important; transform:translateY(8px) !important; }
[data-reveal].is-visible{ transform:none !important; transition-delay:0s !important; }
.reveal-stagger > .col{ transition-duration:.2s !important; transition-delay:0s !important; transform:translateY(6px) !important; }
.reveal-stagger.is-visible > .col{ transform:none !important; }

/* ===== Catégories : expand sous-catégories ===== */
/* Mobile : sub-cats hidden par défaut */
.nav-mobile__subcats{
  list-style:none; margin:0; padding:.4rem 0 .6rem 2rem;
  display:none;
  border-top:1px solid var(--c-line);
}
.nav-mobile__cat--has-children.is-open + .nav-mobile__subcats,
li.is-open > .nav-mobile__subcats{ display:block; }
.nav-mobile__cat--has-children .nav-mobile__cat-chev{
  transition:transform .25s ease;
}
.nav-mobile__cat--has-children.is-open .nav-mobile__cat-chev{
  transform:rotate(90deg);
}
.nav-mobile__subcats li{ padding:.35rem 0; }
.nav-mobile__subcats a{
  display:block; color:var(--c-ink); text-decoration:none;
  font-size:.9rem; padding:.4rem .75rem;
  border-radius:6px;
  transition:background .15s ease;
}
.nav-mobile__subcats a:hover, .nav-mobile__subcats a:focus-visible{ background:var(--c-soft); }
.nav-mobile__cat--has-children{
  width:100%; text-align:left;
  background:transparent; border:0;
  cursor:pointer;
}

/* Desktop mega-menu : sub-cats au hover du parent */
.mega-subcats{
  list-style:none; margin:.5rem 0 0; padding:0;
  display:none;
  background:var(--c-soft);
  border:1px solid var(--c-line);
  border-radius:10px;
}
.mega-col.is-open .mega-subcats,
.mega-col:focus-within .mega-subcats{ display:block; }
.mega-subcats li{ border-bottom:1px solid var(--c-line); }
.mega-subcats li:last-child{ border-bottom:0; }
.mega-subcats a{
  display:block; padding:.55rem .85rem;
  color:var(--c-ink); text-decoration:none;
  font-size:.85rem;
  transition:background .15s ease;
}
.mega-subcats a:hover{ background:#fff; color:var(--c-accent-dk); }
.mega-cat--btn{
  background:transparent; border:0;
  width:100%; text-align:left; cursor:pointer;
  display:flex; align-items:center; gap:.6rem;
}
.mega-cat__chev{ font-size:.8rem; color:var(--c-ink-2); transition:transform .25s ease; }
.mega-col.is-open .mega-cat__chev{ transform:rotate(180deg); }

/* ============================================================================
   V4 OVERRIDES — Photo card produit ajustée SANS crop + galerie produit recadrée
   ============================================================================ */

/* Card produit : photo entièrement visible (sans crop) sur la surface complète */
.product-card__img{
  aspect-ratio:1/1 !important;
  background:var(--c-soft) !important;
  padding:8px !important;     /* léger pour aérer si le ratio diffère */
  overflow:hidden !important;
}
.product-card__img-link{
  display:block !important;
  width:100% !important;
  height:100% !important;
  border-radius:10px !important;
  overflow:hidden !important;
  background:#fff !important;
}
.product-card__img-link img,
.product-card__img > a img,
.product-card__img > img{
  width:100% !important;
  height:100% !important;
  object-fit:contain !important;     /* PAS de crop : photo intégrale */
  object-position:center !important;
  background:#fff !important;
  border-radius:0 !important;
  display:block !important;
}
.product-card:hover .product-card__img-link img{
  transform:scale(1.03) !important;  /* zoom léger sans crop */
}

/* Galerie détail produit : photo principale plus compacte (col-lg-5 active) */
.pd-gallery--stacked .pd-main{
  aspect-ratio:1/1 !important;
  background:var(--c-soft) !important;
  border-radius:14px !important;
  overflow:hidden !important;
}
.pd-gallery--stacked #pdMain{
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;       /* détail produit : couvre l'espace (demande utilisateur précédente) */
  object-position:center !important;
  aspect-ratio:auto !important;
}
/* Thumbnails sous photo : taille un peu plus modeste */
.pd-thumbs-h.pd-thumbs-h--below .pd-thumb{
  width:64px !important;
  height:64px !important;
}

/* Col info produit : un peu plus d'air à l'intérieur */
.col-lg-7 .pd-info{ padding-right:.25rem; }

/* ============================================================================
   V5 — Express inline RTL : grid 2 cols + qty inline avec CTA
   ============================================================================ */

/* Grid 2 colonnes pour les champs */
.pd-express__grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:.75rem 1rem;
  margin-bottom:1rem;
}
@media (max-width:575.98px){
  .pd-express__grid{ grid-template-columns:1fr; gap:.6rem; }
}
.pd-express__grid .pd-express__field{ margin-bottom:0; }

/* Texts arabes : alignement à droite */
.pd-express[dir="rtl"] .form-control,
.pd-express[dir="rtl"] .form-select{ text-align:right; }
/* Téléphone forcé en LTR pour saisie naturelle des chiffres */
.pd-express[dir="rtl"] #pdxTel{ text-align:left; direction:ltr; }

/* Labels arabes : eyebrow style propre RTL */
.pd-express[dir="rtl"] .form-label{
  display:block; text-align:right;
  font-family:var(--ff-eyebrow);
  font-size:.72rem; letter-spacing:.04em;
  font-weight:600; color:var(--c-ink-2);
  margin-bottom:.35rem;
}
.pd-express[dir="rtl"] .pd-express__eyebrow,
.pd-express[dir="rtl"] .pd-express__sub{ text-align:right; display:block; }

/* Ligne qty + CTA — qty à gauche en LTR, à droite en RTL (côté début logique) */
.pd-express__cta-row{
  display:flex; align-items:stretch; gap:.7rem;
  margin-top:.4rem;
}
.pd-express__cta-row .qty-pill{ flex-shrink:0; height:54px; }
.pd-express__cta-row .pd-express__cta{
  flex:1 1 auto;
  margin-top:0 !important;
  min-height:54px;
}
@media (max-width:399.98px){
  .pd-express__cta-row{ gap:.5rem; }
  .pd-express__cta-row .qty-pill{ height:48px; }
  .pd-express__cta-row .pd-express__cta{ min-height:48px; }
}

/* ============================================================================
   V6 — Image principale détail produit : ajustée à la surface totale (sans crop)
   ============================================================================ */
.pd-gallery--stacked .pd-main{
  width:100% !important;
  aspect-ratio:1/1 !important;
  background:#fff !important;
  border:1px solid var(--c-line) !important;
  border-radius:14px !important;
  overflow:hidden !important;
  position:relative !important;
}
.pd-gallery--stacked #pdMain{
  width:100% !important;
  height:100% !important;
  object-fit:contain !important;       /* ajustée à la surface, sans crop */
  object-position:center !important;
  display:block !important;
  background:#fff !important;
  aspect-ratio:auto !important;
  padding:.5rem !important;            /* léger air autour */
}

/* ============================================================================
   V7 — Card produit : surface totale remplie SANS crop (fond flou + contain)
   ============================================================================ */
.product-card__img{
  position:relative !important;
  aspect-ratio:1/1 !important;
  background:var(--c-soft) !important;
  padding:0 !important;
  overflow:hidden !important;
  isolation:isolate;
}
/* Fond flou (.product-card__img-bg) retiré : depuis object-fit:cover il était recouvert
   (jamais visible) mais re-téléchargeait l'image → DOM + 1 requête/card en moins. */
.product-card__img-link{
  position:relative !important;
  z-index:1 !important;
  display:block !important;
  width:100% !important;
  height:100% !important;
  border-radius:0 !important;
  overflow:hidden !important;
  background:transparent !important;
}
.product-card__img-link img,
.product-card__img > a img,
.product-card__img > img{
  width:100% !important;
  height:100% !important;
  object-fit:contain !important;       /* PHOTO ENTIÈRE — aucun crop */
  object-position:center !important;
  background:transparent !important;
  border-radius:0 !important;
  display:block !important;
}
/* Hover : la photo zoom subtilement */
.product-card:hover .product-card__img-link img{ transform:scale(1.04) !important; }

/* Badges et quickadd doivent rester au-dessus du fond flou */
.product-card__badges, .product-card__quickadd, .product-card .wish-btn{
  z-index:2 !important;
}

/* ============================================================================
   V8 — Boutons Express checkout : border-radius pleinement arrondi
   ============================================================================ */

/* Tous les CTA express (page principale + inline produit + sticky mobile) */
.ex-cta,
.ex-cta--secondary,
.pd-express__cta,
.pd-express__addcart,
.pd-cta.pd-cta--main,
.pd-cta.pd-cta--secondary,
#ex-submit,
#pdxSubmit,
#pdxAddCart,
#exStickyMobileCta,
.ex-sticky-mobile__cta{
  border-radius:999px !important;
}

/* Inputs et selects de l'express checkout : border-radius arrondi propre */
.pd-express .form-control,
.pd-express .form-select,
.ex-card .form-control,
.ex-card .form-select{
  border-radius:12px !important;
}

/* Textarea : un peu plus carré pour la lecture */
.pd-express textarea.form-control,
.ex-card textarea.form-control{
  border-radius:12px !important;
}

/* Qty pill express : fully rounded */
.pd-express__cta-row .qty-pill,
.ex-step .qty-pill{
  border-radius:999px !important;
}
.pd-express__cta-row .qty-pill__btn,
.ex-step .qty-pill__btn{
  border-radius:50% !important;
}

/* Bouton sticky mobile bar express */
.ex-sticky-mobile__cta,
.pd-sticky-cta,
#pdStickyCta{
  border-radius:999px !important;
}

/* Card du form express : coins doux */
.ex-card{
  border-radius:18px !important;
}
.ex-summary,
.ex-summary-mobile-wrap,
.ex-recap{
  border-radius:14px !important;
}

/* ============================================================================
   V9 FINAL — Card produit : aspect-ratio 3/4, ZERO padding, photo en COVER (remplit le cadre)
   ============================================================================ */
.product-card__img{
  aspect-ratio:3/4 !important;
  padding:0 !important;
  background:var(--c-soft) !important;
  position:relative !important;
  overflow:hidden !important;
  border-radius:0 !important;
}
.product-card__img-link{
  width:100% !important;
  height:100% !important;
  padding:0 !important;
  margin:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  position:relative !important;
  z-index:1 !important;
  display:block !important;
}
.product-card__img-link img,
.product-card__img > a img,
.product-card__img > img{
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;        /* option B : remplit le cadre 3/4 → fond flou jamais visible */
  object-position:center !important;
  padding:0 !important;
  margin:0 !important;
  border-radius:0 !important;
  display:block !important;
  background:transparent !important;
}

/* ============================================================================
   V10 — Mega menu desktop : SANS images de catégories (texte uniquement)
   ============================================================================ */

/* Sécurité : si une image survit dans le DOM, on la masque */
.mega-cat__img{ display:none !important; }

/* Layout texte propre */
.mega-col--text .mega-cat,
.mega-col--text .mega-cat--btn{
  display:flex !important;
  flex-direction:row !important;
  align-items:center !important;
  gap:.5rem !important;
  padding:.65rem .85rem !important;
  text-align:left !important;
  border-radius:8px !important;
  background:transparent !important;
  border:0;
  cursor:pointer;
  width:100%;
  transition:background .15s ease, color .15s ease;
}
.mega-col--text .mega-cat:hover,
.mega-col--text .mega-cat--btn:hover,
.mega-col--text.mega-col.is-open .mega-cat--btn{
  background:var(--c-soft) !important;
  color:var(--c-accent-dk) !important;
}
.mega-col--text .mega-cat__label{
  font-family:var(--ff-display);
  font-weight:500;
  font-size:.92rem;
  letter-spacing:-.005em;
  line-height:1.25;
  color:var(--c-ink);
  margin:0 !important;
}
.mega-col--text::after{
  /* filet doré sous l'item au hover */
  content:""; display:block; height:1px; background:transparent;
  transition:background .25s ease;
}
.mega-col--text:hover::after{ background:var(--c-gold); }

/* Le mega-grid passe en colonnes plus serrées maintenant qu'il n'y a plus d'images */
.mega-grid{
  display:grid !important;
  grid-template-columns:repeat(3, 1fr) !important;
  gap:.4rem 1.25rem !important;
}
@media (max-width:1199.98px){
  .mega-grid{ grid-template-columns:repeat(2, 1fr) !important; }
}

/* Largeur du mega panel : un peu réduite en mode texte */
.nav-top-list > li > .mega.mega-cats{ width:560px !important; max-width:90vw; padding:1rem !important; }
@media (max-width:1199.98px){
  .nav-top-list > li > .mega.mega-cats{ width:460px !important; }
}

/* Sub-catégories : décalées sous le parent en mode texte */
.mega-col--text .mega-subcats{
  margin-top:.25rem !important;
  margin-left:.5rem !important;
}

/* ============================================================================
   V11 — Photo principale détail produit : aspect-ratio 3/4 + ajustement complet
   ============================================================================ */
.pd-gallery--stacked .pd-main{
  aspect-ratio:3/4 !important;
  width:100% !important;
  height:auto !important;
  background:#fff !important;
  border:1px solid var(--c-line) !important;
  border-radius:14px !important;
  overflow:hidden !important;
  position:relative !important;
  padding:0 !important;
}
.pd-gallery--stacked #pdMain{
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;        /* ajuste complètement : remplit la surface 3/4 */
  object-position:center !important;
  display:block !important;
  background:#fff !important;
  padding:0 !important;
  margin:0 !important;
  aspect-ratio:auto !important;
}

/* V12 — Short description : petit padding à gauche */
.pd-shortdesc{
  padding-left:1rem !important;
  padding-inline-start:1rem !important;
  border-left:3px solid var(--c-primary, #C39348) !important;
  border-inline-start:3px solid var(--c-primary, #C39348) !important;
  margin-top:.5rem !important;
}

/* ============================================================================
   V13 — Lightbox détail produit (remplace le zoom inline)
   ============================================================================ */

/* Désactive l'ancien comportement zoom */
#pdMainWrap.zoomed #pdMain,
#pdMain.zoomed,
#pdMainWrap #pdMain{
  transform:none !important;
  transform-origin:initial !important;
}
#pdMain{ cursor:zoom-in; }

/* Lightbox overlay */
.pd-lightbox{
  position:fixed; inset:0;
  display:none;
  align-items:center; justify-content:center;
  background:rgba(15,12,8,.92);
  z-index:2000;
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  padding:2rem clamp(1rem, 4vw, 5rem);
  animation:pdLbFade .25s ease;
}
.pd-lightbox.is-open{ display:flex; }
@keyframes pdLbFade{ from{ opacity:0; } to{ opacity:1; } }

.pd-lightbox__img{
  max-width:100%;
  max-height:92vh;
  width:auto; height:auto;
  display:block;
  object-fit:contain;
  border-radius:6px;
  box-shadow:0 30px 80px rgba(0,0,0,.55);
  cursor:zoom-out;
}

.pd-lightbox__close{
  position:absolute; top:1rem; right:1rem;
  width:42px; height:42px; border-radius:50%;
  background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.18);
  color:#fff; font-size:1.6rem; line-height:1;
  display:inline-flex; align-items:center; justify-content:center;
  cursor:pointer;
  transition:background .2s ease, transform .2s ease;
}
.pd-lightbox__close:hover{ background:rgba(255,255,255,.2); transform:scale(1.05); }

.pd-lightbox__nav{
  position:absolute; top:50%; transform:translateY(-50%);
  width:48px; height:48px; border-radius:50%;
  background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.18);
  color:#fff;
  display:inline-flex; align-items:center; justify-content:center;
  cursor:pointer;
  transition:background .2s ease, transform .2s ease;
}
.pd-lightbox__nav:hover{ background:rgba(255,255,255,.2); }
.pd-lightbox__nav--prev{ left:1rem; }
.pd-lightbox__nav--next{ right:1rem; }

/* ============================================================================
   V15 — Header desktop : menu inline (.bar-nav-inline) + recherche popup (.search-popup)
   ============================================================================ */
.bar-nav-inline{ align-items:center; justify-content:center; overflow:visible; min-width:0; }
.bar-nav-inline .nav-top-list{ flex-wrap:nowrap; margin:0; }
.bar-nav-inline .nav-top-list > li{ padding:.4rem 0; }

.search-popup{ position:fixed; inset:0; z-index:1090; }
.search-popup__backdrop{ position:absolute; inset:0; background:rgba(20,18,14,.5); opacity:0; transition:opacity .2s ease; -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px); }
.search-popup.is-open .search-popup__backdrop{ opacity:1; }
.search-popup__panel{
  position:relative; max-width:640px; margin:9vh auto 0;
  background:#fff; border-radius:16px; box-shadow:0 30px 80px rgba(20,18,14,.28);
  padding:1.4rem 1.4rem 1.2rem;
  opacity:0; transform:translateY(-8px); transition:opacity .2s ease, transform .2s ease;
}
.search-popup.is-open .search-popup__panel{ opacity:1; transform:none; }
.search-popup__close{
  position:absolute; top:.7rem; right:.7rem; width:38px; height:38px; border-radius:50%;
  border:1px solid var(--c-line); background:#fff; color:var(--c-ink);
  display:inline-flex; align-items:center; justify-content:center; cursor:pointer; transition:.15s;
}
.search-popup__close:hover{ background:var(--c-ink); color:#fff; }
.search-popup__panel .search-form{ margin-top:.2rem; position:relative; }
.search-popup__pop{ margin-top:1.1rem; }
.search-popup__pop .cat-editorial__eyebrow{ display:block; margin-bottom:.6rem; }
@media (max-width:575.98px){ .search-popup__panel{ margin-top:70px; width:94vw; padding:1rem; } }
@media (max-width:575.98px){
  .pd-lightbox{ padding:1rem; }
  .pd-lightbox__nav{ width:40px; height:40px; }
  .pd-lightbox__close{ width:38px; height:38px; }
}

/* ============================================================================
   V14 — Agrandir la typographie de l'express checkout (page + inline produit)
   ============================================================================ */

/* Labels eyebrow */
.pd-express .form-label,
.ex-card .form-label,
.ex-step .form-label{
  font-size:.85rem !important;
  letter-spacing:.05em !important;
}

/* Inputs et selects */
.pd-express .form-control,
.pd-express .form-select,
.ex-card .form-control,
.ex-card .form-select{
  font-size:1.05rem !important;
  padding:.85rem 1rem !important;
  min-height:50px !important;
}
.pd-express textarea.form-control,
.ex-card textarea.form-control{
  min-height:80px !important;
  font-size:1.02rem !important;
}

/* Placeholders un peu plus lisibles */
.pd-express .form-control::placeholder,
.ex-card .form-control::placeholder{
  font-size:.98rem !important;
}

/* Titres et eyebrow du bloc express */
.pd-express__eyebrow,
.ex-badge{
  font-size:.85rem !important;
  padding:.35rem .95rem !important;
  letter-spacing:.14em !important;
}
.pd-express__sub,
.ex-sub{
  font-size:1rem !important;
}
.ex-title{
  font-size:clamp(1.7rem, 3.4vw, 2.2rem) !important;
}

/* Boutons CTA — texte plus visible */
.pd-express__cta,
.pd-express__addcart,
.ex-cta,
#pdxSubmit,
#pdxAddCart,
#ex-submit{
  font-size:.92rem !important;
  letter-spacing:.12em !important;
  min-height:54px !important;
  padding:.95rem 1.5rem !important;
}
.pd-express__cta .pd-cta__label,
.ex-cta__label{
  font-size:.92rem !important;
}

/* Préfixe téléphone (page express) */
.ex-input-prefix{
  font-size:1.05rem !important;
}

/* Récap totaux dans express */
.ex-recap__total strong{
  font-size:1.6rem !important;
}
.ex-recap__line{
  font-size:.98rem !important;
}
.ex-recap__title{
  font-size:.92rem !important;
}

/* Status / erreur sous champs */
.pd-express__err,
.ex-field-status{
  font-size:.88rem !important;
}

/* Réassurance verte sous le CTA */
.ex-reassure,
.pd-express__reassure{
  font-size:.92rem !important;
}

/* Stepper visuel */
.ex-stepper__label{
  font-size:.78rem !important;
  letter-spacing:.14em !important;
}
.ex-stepper__num{
  width:36px !important; height:36px !important;
  font-size:.88rem !important;
}

/* Qty pill express : un peu plus large */
.pd-express__cta-row .qty-pill,
.ex-step .qty-pill{
  height:54px !important;
}
.qty-pill__input{
  font-size:1.05rem !important;
  width:50px !important;
}

/* ============================================================================
   V15 — Header mobile : panier caché + logo centré
   ============================================================================ */
@media (max-width:991.98px){
  /* Cache l'icône panier sur mobile (≤991px) */
  .site-header .bar-main .icon-link--cart{
    display:none !important;
  }

  /* Logo centré : on positionne le brand au centre via flex */
  .site-header .bar-main > .container-xxl{
    position:relative;
    justify-content:flex-start;
  }
  .site-header .bar-main .brand{
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%, -50%);
    margin:0;
    pointer-events:auto;
    z-index:2;
  }
  .site-header .bar-main .brand .brand-logo{
    margin:0 auto;
    display:block;
  }
  /* Le bouton hamburger à gauche et les icônes à droite restent en place */
  .site-header .bar-main .hamburger{ z-index:3; }
  .site-header .bar-main .ms-auto{ z-index:3; }
}

/* ============================================================================
   V16 — Couleur primaire des boutons #C39348 + hover noir + fix overflow CTA
   ============================================================================ */

/* Fix overflow du CTA express (ne déborde plus de son container) */
.pd-express{ overflow:visible; }
.pd-express__cta-row{
  width:100% !important;
  max-width:100% !important;
  flex-wrap:nowrap !important;
  min-width:0;
}
.pd-express__cta-row .pd-express__cta{
  flex:1 1 0 !important;
  min-width:0 !important;
  padding:.85rem .9rem !important;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.pd-express__cta .pd-cta__label{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.pd-express__addcart{
  width:100% !important;
  max-width:100% !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
}

/* === Boutons primaires : --c-primary/--c-primary-hover consolidés dans
   l'unique :root en tete de fichier (alias de --c-pink/--c-pink-dk). === */

/* Boutons CTA principaux du site */
.btn.btn-dark,
.btn-dark,
.pd-cta--main,
.pd-express__cta,
#pdxSubmit,
.ex-cta,
#ex-submit,
.brand-promise__cta,
.btn-hero,
.search-pill__submit,
.pd-sticky-cta,
#pdStickyCta,
.ex-sticky-mobile__cta,
#exStickyMobileCta,
.thx-help,
.product-card__quickadd-btn,
.qty-pill__btn,
.cat-slider__nav:hover,
.hero-arrow,
.back-to-top{
  background-color:var(--c-primary) !important;
  border-color:var(--c-primary) !important;
  color:#fff !important;
  transition:background-color .25s ease, border-color .25s ease, color .25s ease, transform .2s ease, box-shadow .25s ease !important;
}
.btn.btn-dark:hover,
.btn-dark:hover,
.pd-cta--main:hover,
.pd-express__cta:hover,
#pdxSubmit:hover,
.ex-cta:hover:not(:disabled),
#ex-submit:hover,
.brand-promise__cta:hover,
.btn-hero:hover,
.search-pill__submit:hover,
.pd-sticky-cta:hover,
#pdStickyCta:hover,
.ex-sticky-mobile__cta:hover,
#exStickyMobileCta:hover,
.thx-help:hover,
.product-card__quickadd-btn:hover,
.qty-pill__btn:hover,
.hero-arrow:hover,
.back-to-top:hover{
  background-color:var(--c-primary-hover) !important;
  border-color:var(--c-primary-hover) !important;
  color:#fff !important;
}

/* Boutons OUTLINE / secondary : bordure or, texte or → hover plein noir */
.btn.btn-outline-dark,
.btn-outline-dark,
.pd-cta--secondary,
.pd-express__addcart,
#pdxAddCart,
.pd-buynow,
.cat-slider__nav,
.btn-outline-light{
  background:#fff !important;
  border:1.5px solid var(--c-primary) !important;
  color:var(--c-primary) !important;
  transition:background-color .25s ease, border-color .25s ease, color .25s ease, transform .2s ease !important;
}
.btn.btn-outline-dark:hover,
.btn-outline-dark:hover,
.pd-cta--secondary:hover,
.pd-express__addcart:hover,
#pdxAddCart:hover,
.pd-buynow:hover,
.cat-slider__nav:hover,
.btn-outline-light:hover{
  background-color:var(--c-primary-hover) !important;
  border-color:var(--c-primary-hover) !important;
  color:#fff !important;
}

/* Variants chip sélectionné = ink → garde le noir comme état "sélectionné" */
.pd-variants__chip.is-selected{
  background:var(--c-primary-hover) !important;
  border-color:var(--c-primary-hover) !important;
  color:#fff !important;
}

/* WhatsApp flottant : conserve sa couleur native verte (n'est pas un CTA standard) */
.float-wa,
.float-wa:hover{
  background:#25D366 !important;
  border-color:#25D366 !important;
  color:#fff !important;
}
.float-wa:hover{ background:#1FB855 !important; border-color:#1FB855 !important; }

/* ============================================================================
   V17 — Bulle compteur panier dans le menu mobile (offcanvas)
   ============================================================================ */
.nav-mobile__link--cart{
  position:relative;
}
.nav-mobile__badge{
  margin-left:auto;
  min-width:24px;
  height:24px;
  padding:0 .55rem;
  background:var(--c-soft-2);
  color:var(--c-ink);
  border:1px solid var(--c-line);
  border-radius:999px;
  font-family:var(--ff-eyebrow);
  font-weight:700;
  font-size:.78rem;
  letter-spacing:.04em;
  line-height:22px;
  text-align:center;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  transition:background .25s ease, color .25s ease, border-color .25s ease;
}
.nav-mobile__badge.is-filled{
  background:var(--c-primary, #C39348);
  color:#fff;
  border-color:var(--c-primary, #C39348);
}
.nav-mobile__badge.is-pulse{
  animation:cartPulse .5s ease;
}
/* Si keyframes cartPulse n'existe pas déjà */
@keyframes cartPulse{
  0%{ transform:scale(1); }
  50%{ transform:scale(1.35); }
  100%{ transform:scale(1); }
}

/* V18 — Bouton "Commander" de la card produit en <a> redirige vers le détail */
a.product-card__quickadd-btn{
  text-decoration:none !important;
}
a.product-card__quickadd-btn:hover{
  text-decoration:none !important;
}

/* ============================================================================
   V19 — Express checkout : MAXIMISER la typographie (labels, inputs, boutons)
   ============================================================================ */

/* Labels (au-dessus des champs) */
.pd-express .form-label,
.ex-card .form-label,
.ex-step .form-label,
.pd-express[dir="rtl"] .form-label{
  font-size:1.05rem !important;
  font-weight:600 !important;
  letter-spacing:.02em !important;
  margin-bottom:.5rem !important;
  text-transform:none !important;
}

/* Inputs / selects / textareas */
.pd-express .form-control,
.pd-express .form-select,
.ex-card .form-control,
.ex-card .form-select{
  font-size:1.2rem !important;
  font-weight:500 !important;
  padding:1.1rem 1.15rem !important;
  min-height:60px !important;
  line-height:1.3 !important;
}
.pd-express textarea.form-control,
.ex-card textarea.form-control{
  font-size:1.15rem !important;
  min-height:96px !important;
  line-height:1.45 !important;
}

/* Placeholders */
.pd-express .form-control::placeholder,
.pd-express .form-select::placeholder,
.ex-card .form-control::placeholder{
  font-size:1.1rem !important;
  opacity:.85;
}

/* Eyebrow / titre du bloc */
.pd-express__eyebrow,
.ex-badge{
  font-size:1rem !important;
  padding:.45rem 1.1rem !important;
  letter-spacing:.1em !important;
  font-weight:700 !important;
}
.pd-express__sub,
.ex-sub{ font-size:1.12rem !important; }
.ex-title{ font-size:clamp(2rem, 4vw, 2.6rem) !important; }

/* Boutons CTA (Commander, Acheter, etc.) */
.pd-express__cta,
.pd-express__addcart,
.ex-cta,
#pdxSubmit,
#pdxAddCart,
#ex-submit{
  font-size:1.1rem !important;
  font-weight:700 !important;
  letter-spacing:.06em !important;
  min-height:64px !important;
  padding:1rem 1.5rem !important;
}
.pd-express__cta .pd-cta__label,
.ex-cta__label{
  font-size:1.1rem !important;
  font-weight:700 !important;
}
.pd-express__cta .bi,
.pd-express__addcart .bi,
.ex-cta .bi{ font-size:1.3rem !important; }

/* Préfixe téléphone */
.ex-input-prefix{ font-size:1.2rem !important; font-weight:700 !important; }

/* Récap totaux */
.ex-recap__total strong{ font-size:2rem !important; }
.ex-recap__total span{ font-size:.95rem !important; }
.ex-recap__line{ font-size:1.1rem !important; }
.ex-recap__title{ font-size:1.05rem !important; }

/* Erreurs et statuts */
.pd-express__err,
.ex-field-status{ font-size:1rem !important; }

/* Réassurance */
.ex-reassure,
.pd-express__reassure{ font-size:1.05rem !important; }

/* Stepper visuel */
.ex-stepper__label{ font-size:.92rem !important; letter-spacing:.06em !important; }
.ex-stepper__num{
  width:44px !important; height:44px !important;
  font-size:1.05rem !important; font-weight:700 !important;
}

/* Qty pill — encore plus visible */
.pd-express__cta-row .qty-pill,
.ex-step .qty-pill{
  height:64px !important;
  padding-inline:.5rem !important;
}
.qty-pill__input{
  font-size:1.3rem !important;
  width:60px !important;
  font-weight:700 !important;
}
.qty-pill__btn{
  width:42px !important; height:42px !important;
}
.qty-pill__btn svg{ width:18px !important; height:18px !important; }

/* ============================================================================
   V20 — Boutons express checkout : réduire padding pour ergonomie
   ============================================================================ */

/* CTA principaux et secondaires : padding réduit, hauteur compacte */
.pd-express__cta,
.pd-express__addcart,
.ex-cta,
#pdxSubmit,
#pdxAddCart,
#ex-submit{
  padding:.55rem 1rem !important;
  min-height:48px !important;
  font-size:.98rem !important;
  letter-spacing:.04em !important;
}
.pd-express__cta .pd-cta__label,
.ex-cta__label{
  font-size:.98rem !important;
}
.pd-express__cta .bi,
.pd-express__addcart .bi,
.ex-cta .bi{
  font-size:1.05rem !important;
}

/* Qty pill alignée à la nouvelle hauteur compacte */
.pd-express__cta-row .qty-pill,
.ex-step .qty-pill{
  height:48px !important;
  padding-inline:.25rem !important;
}
.qty-pill__input{
  font-size:1.05rem !important;
  width:42px !important;
}
.qty-pill__btn{
  width:34px !important;
  height:34px !important;
}
.qty-pill__btn svg{
  width:14px !important;
  height:14px !important;
}

/* Sticky mobile CTA — même rythme compact */
.ex-sticky-mobile__cta,
.pd-sticky-cta,
#pdStickyCta,
#exStickyMobileCta{
  padding:.55rem 1.1rem !important;
  min-height:44px !important;
  font-size:.92rem !important;
}

/* ============================================================================
   V21 — Express checkout : contenu des champs en RTL
   ============================================================================ */

/* Champs en RTL — UNIQUEMENT sur la page express arabe (.ex-card) ou si .pd-express
   est explicitement marqué dir="rtl". La fiche produit (.pd-express sans dir) reste LTR. */
.pd-express[dir="rtl"] .form-control,
.pd-express[dir="rtl"] .form-select,
.pd-express[dir="rtl"] textarea.form-control,
.ex-card .form-control,
.ex-card .form-select,
.ex-card textarea.form-control,
.ex-card[dir="rtl"] .form-control,
.ex-card[dir="rtl"] .form-select,
.ex-card[dir="rtl"] textarea.form-control{
  direction:rtl !important;
  text-align:right !important;
  unicode-bidi:plaintext !important;
}

/* Téléphone : RTL global mais chiffres lus naturellement (plaintext bidi) */
.pd-express[dir="rtl"] #pdxTel,
.ex-card #ex-tel{
  direction:rtl !important;
  text-align:right !important;
  unicode-bidi:plaintext !important;
}

/* Placeholders RTL (page express arabe / pd-express opt-in RTL uniquement) */
.pd-express[dir="rtl"] .form-control::placeholder,
.pd-express[dir="rtl"] .form-select::placeholder,
.ex-card .form-control::placeholder{
  text-align:right !important;
  direction:rtl !important;
}

/* V22 — Eyebrow express checkout centré (titre "أدخل معلوماتك لإتمام الطلب") */
.pd-express__head{
  text-align:center !important;
}
.pd-express__eyebrow{
  display:inline-flex !important;
  justify-content:center;
  align-items:center;
  margin:0 auto !important;
  white-space:normal !important;
  text-align:center !important;
}
.pd-express[dir="rtl"] .pd-express__head,
.pd-express[dir="rtl"] .pd-express__eyebrow{ text-align:center !important; }

/* ex-badge (page /express) centré */
.ex-badge{
  display:inline-flex !important;
  justify-content:center;
  align-items:center;
  margin:0 auto !important;
}
.text-center .ex-badge{ margin-inline:auto !important; }

/* ============================================================================
   V23 — Bloc totaux dans l'express checkout inline (sous gouvernorat)
   ============================================================================ */
.pd-express__totals{
  margin:1rem 0;
  padding:.95rem 1.1rem;
  background:var(--c-soft);
  border:1px solid var(--c-line);
  border-radius:14px;
  font-family:var(--ff-body);
}
.pd-express__totals-line{
  display:flex; justify-content:space-between; align-items:baseline;
  padding:.3rem 0;
  font-size:1rem;
}
.pd-express__totals-label{
  color:var(--c-ink-2);
  font-weight:500;
}
.pd-express__totals-val{
  color:var(--c-ink);
  font-weight:700;
  font-size:1.05rem;
}
.pd-express__totals-shipping{
  font-weight:500;
  color:var(--c-ink-2);
  font-size:.92rem;
}
.pd-express__totals-total{
  display:flex; justify-content:space-between; align-items:baseline;
  margin-top:.5rem; padding-top:.7rem;
  border-top:2px solid var(--c-line);
}
.pd-express__totals-total > span{
  font-family:var(--ff-eyebrow);
  font-weight:700;
  font-size:.95rem;
  letter-spacing:.06em;
  color:var(--c-ink);
}
.pd-express__totals-total > strong{
  font-family:var(--ff-display);
  font-weight:800;
  font-size:1.5rem;
  letter-spacing:-.005em;
  color:var(--c-primary, #C39348);
}

/* RTL : alignement correct */
.pd-express[dir="rtl"] .pd-express__totals,
.pd-express[dir="rtl"] .pd-express__totals-line,
.pd-express[dir="rtl"] .pd-express__totals-total{
  direction:rtl !important;
}

/* V24 — Livraison gratuite : couleur verte */
.pd-express__totals-shipping.pd-express__totals--free{
  color:var(--c-success, #4F7A4A) !important;
  font-weight:700 !important;
}

/* ============================================================================
   V25 — Hauteur unifiée 50px : CTA "إشتري الآن" + qty +/- buttons
   ============================================================================ */

/* CTA principal de l'express : 50px de haut */
.pd-express__cta,
.pd-express__addcart,
.ex-cta,
#pdxSubmit,
#pdxAddCart,
#ex-submit{
  min-height:50px !important;
  height:50px !important;
  padding:.5rem 1rem !important;
}

/* Qty pill : container 50px + boutons internes plein hauteur */
.pd-express__cta-row .qty-pill,
.ex-step .qty-pill,
.qty.qty-pill{
  height:50px !important;
  padding:0 !important;
  align-items:stretch !important;
}
.qty-pill__btn{
  width:50px !important;
  height:50px !important;
  padding:0 !important;
  border-radius:50% !important;
  flex-shrink:0;
}
.qty-pill__input{
  height:50px !important;
}

/* V26 — Icône téléphone des topbars en BLANC (desktop + mobile) */
.announcement-bar__phone .bi,
.topbar-mobile__phone .bi{
  color:#fff !important;
}

/* V27 — Pages CMS (À Propos, CGV, Politique) : typographie de lecture */
.cms-body{
  font-size:1.02rem;
  line-height:1.7;
  color:var(--c-ink-2);
}
.cms-body p{ margin:0 0 1rem; }
.cms-body .cms-h2{
  font-family:var(--ff-display);
  font-size:1.5rem; font-weight:700;
  color:var(--c-ink);
  margin:1.6rem 0 .8rem;
  letter-spacing:-.005em;
}
.cms-body .cms-h3{
  font-family:var(--ff-display);
  font-size:1.2rem; font-weight:700;
  color:var(--c-ink);
  margin:1.4rem 0 .6rem;
  padding-left:.85rem;
  border-left:3px solid var(--c-primary, #C39348);
}
.cms-body .cms-h4{
  font-size:1.05rem; font-weight:700;
  color:var(--c-ink);
  margin:1rem 0 .4rem;
}
.cms-body .cms-list{
  margin:0 0 1.2rem;
  padding-left:1.4rem;
}
.cms-body .cms-list li{ margin-bottom:.4rem; }
.cms-body a{
  color:var(--c-primary, #C39348);
  text-decoration:underline;
  text-underline-offset:3px;
}
.cms-body a:hover{ color:var(--c-ink); }
.cms-body strong{ color:var(--c-ink); }

/* V28 — Mega menu desktop : version 'simple' (sous-cat directes sous le label) */
.mega.mega-cats--simple{
  width:280px !important;
  max-width:92vw;
  padding:.75rem !important;
}
.mega-subcats--block{
  list-style:none; padding:0; margin:0;
}
.mega-subcats--block li{
  border-bottom:1px solid var(--c-line);
}
.mega-subcats--block li:last-child{ border-bottom:0; }
.mega-subcats--block li > a{
  display:block; padding:.55rem .75rem;
  color:var(--c-ink) !important; text-decoration:none;
  border-radius:6px;
  transition:background .15s ease;
}
.mega-subcats--block li > a:hover{
  background:var(--c-soft);
  color:var(--c-accent-dk) !important;
}
.mega-subcats__inner{
  list-style:none; padding-left:1rem; margin:.25rem 0 .5rem;
  border-left:2px solid var(--c-line);
}
.mega-subcats__inner li > a{
  display:block;
  padding:.4rem .65rem;
  font-size:.88rem;
  color:var(--c-ink-2) !important;
}
.mega-subcats__inner li > a:hover{ background:var(--c-soft); color:var(--c-ink) !important; }

/* V29 — Footer bottom row centré + lien Utopia */
.footer-bottom__row--centered{
  justify-content:center !important;
  text-align:center !important;
}
.footer-bottom__copy a{
  color:#fff !important;
  text-decoration:underline;
  text-underline-offset:3px;
}
.footer-bottom__copy a:hover{
  color:var(--c-primary, #C39348) !important;
}

/* ============================================================
   PINK & GREY — Palette de marque.
   Source : logo « PINK & grey » → rose framboise + gris argent.
   Hiérarchie ergonomique :
     ROSE  = action (CTA, liens primaires)
     GRIS  = structure / décor (icônes, filets, séparateurs)
     AMBRE = notation (étoiles) uniquement — convention universelle
   Contrastes WCAG : blanc/rose ≈ 7:1 (AA), charbon/blanc ≈ 13:1 (AAA).
   (Tokens de cette palette consolidés dans l'unique :root en tete de
   fichier — pilotables depuis /cms, onglet Palette.)
   ============================================================ */

/* ===== Avis clients (fiche produit) ===== */
.pd-reviews{ margin-top:1.5rem; }
.pd-reviews__summary{
  display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:1.25rem;
  padding:1rem; background:var(--c-soft); border:1px solid var(--c-line); border-radius:var(--r-lg);
  margin-bottom:1rem;
}
.pd-reviews__score{ display:flex; align-items:baseline; gap:.15rem; }
.pd-reviews__score strong{ font-size:2rem; font-weight:700; color:var(--c-ink); line-height:1; }
.pd-reviews__score span{ font-size:.9rem; color:var(--c-muted); }
.pd-reviews__bars{ display:flex; flex-direction:column; gap:.25rem; min-width:0; }
.pd-reviews__bar{ display:flex; align-items:center; gap:.5rem; font-size:.75rem; color:var(--c-muted); }
.pd-reviews__bar-lbl{ width:2rem; flex-shrink:0; }
.pd-reviews__bar-track{ flex:1; height:6px; background:var(--c-soft-2); border-radius:999px; overflow:hidden; }
.pd-reviews__bar-fill{ display:block; height:100%; background:var(--c-star); }
.pd-reviews__bar-n{ width:1.5rem; text-align:right; flex-shrink:0; }
.pd-reviews__total{ font-size:.85rem; color:var(--c-muted); white-space:nowrap; }

.pd-reviews__list{ list-style:none; padding:0; margin:0 0 1rem; display:flex; flex-direction:column; gap:.85rem; }
.pd-review{ padding:.85rem 1rem; border:1px solid var(--c-line); border-radius:var(--r-md); background:var(--c-surface); }
.pd-review__head{ display:flex; align-items:center; gap:.6rem; flex-wrap:wrap; margin-bottom:.35rem; }
.pd-review__author{ font-size:.92rem; color:var(--c-ink); }
.pd-review__verified{
  font-size:.7rem; font-weight:600; color:var(--c-success);
  background:rgba(79,122,74,.1); padding:.15rem .45rem; border-radius:999px;
}
.pd-review__stars{ margin-left:auto; color:var(--c-star); font-size:.9rem; letter-spacing:.05em; }
.pd-review__text{ margin:0 0 .35rem; font-size:.9rem; line-height:1.55; color:var(--c-ink-2); }
.pd-review__date{ font-size:.72rem; color:var(--c-muted); }
.pd-reviews__empty{ font-size:.9rem; color:var(--c-muted); margin-bottom:1rem; }

.pd-reviews__toggle{ font-size:.88rem; padding:.5rem 1.25rem; }
.pd-reviews__form{ margin-top:1rem; display:flex; flex-direction:column; gap:.65rem; }
.pd-reviews__stars-pick{ display:flex; gap:.2rem; }
.pd-star{
  background:none; border:0; padding:0 .1rem; cursor:pointer;
  font-size:1.75rem; line-height:1; color:var(--c-star);
}
.pd-star:hover{ transform:scale(1.1); }
.pd-reviews__row{ display:grid; grid-template-columns:1fr 1fr; gap:.65rem; }
.pd-reviews__hint{ font-size:.72rem; color:var(--c-muted); margin-top:-.3rem; }
.pd-reviews__actions{ display:flex; align-items:center; gap:.85rem; flex-wrap:wrap; }
.pd-reviews__msg{ font-size:.85rem; }
.pd-reviews__msg.is-ok{ color:var(--c-success); }
.pd-reviews__msg.is-err{ color:var(--c-danger); }

@media (max-width:575.98px){
  .pd-reviews__summary{ grid-template-columns:1fr; gap:.75rem; }
  .pd-reviews__row{ grid-template-columns:1fr; }
}

/* Étoiles de notation : forcer l'ambre (ne pas griser ni rosir) */
.stars,
.stars i,
.product-card .stars i,
.pd-rating .stars i{ color:var(--c-star) !important; }

/* ===== Blocs metier CMS : Prestations / Tarifs / Horaires ===== */
/* Prestations : grille de cartes icone + intitule + prix */
.cms-presta{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1rem}
.cms-presta__item{display:flex;gap:.9rem;align-items:flex-start;background:var(--c-surface);border:1px solid var(--c-line);border-radius:var(--r-md);padding:1rem 1.1rem;transition:box-shadow .2s,transform .2s}
.cms-presta__item:hover{box-shadow:var(--sh-2);transform:translateY(-2px)}
.cms-presta__icon{flex:0 0 auto;width:40px;height:40px;display:inline-flex;align-items:center;justify-content:center;border-radius:10px;background:var(--c-pink-soft);color:var(--c-accent)}
.cms-presta__icon svg{width:22px;height:22px}
.cms-presta__body{flex:1;min-width:0}
.cms-presta__head{display:flex;justify-content:space-between;align-items:baseline;gap:.6rem}
.cms-presta__title{font-size:1rem;font-weight:600;margin:0}
.cms-presta__price{font-weight:700;color:var(--c-accent);white-space:nowrap}
.cms-presta__text{font-size:.88rem;color:var(--c-ink-2);margin:.3rem 0 0;line-height:1.5}

/* Tarifs : colonnes de forfaits */
.cms-pricing{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1.2rem;align-items:stretch}
.cms-plan{position:relative;display:flex;flex-direction:column;background:var(--c-surface);border:1px solid var(--c-line);border-radius:var(--r-md);padding:1.6rem 1.3rem;text-align:center}
.cms-plan--featured{border-color:var(--c-accent);box-shadow:0 10px 30px rgba(0,0,0,.08);transform:translateY(-4px)}
.cms-plan__badge{position:absolute;top:-.8rem;left:50%;transform:translateX(-50%);background:var(--c-accent);color:#fff;font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;padding:.25rem .8rem;border-radius:var(--r-pill);font-weight:600;white-space:nowrap}
.cms-plan__name{font-size:1.15rem;font-weight:600;margin:0 0 .5rem}
.cms-plan__price{font-size:2rem;font-weight:700;color:var(--c-ink);line-height:1}
.cms-plan__period{font-size:.85rem;font-weight:500;color:var(--c-muted)}
.cms-plan__features{list-style:none;margin:1.1rem 0;padding:0;text-align:left;flex:1}
.cms-plan__features li{position:relative;padding:.35rem 0 .35rem 1.6rem;font-size:.9rem;color:var(--c-ink-2);border-bottom:1px solid var(--c-soft-2)}
.cms-plan__features li:before{content:"✓";position:absolute;left:0;color:var(--c-success);font-weight:700}
.cms-plan__cta{display:inline-block;margin-top:auto;padding:.7rem 1.4rem;border-radius:var(--r-pill);background:var(--c-ink);color:#fff;text-decoration:none;font-weight:600;transition:background .2s}
.cms-plan__cta:hover{background:var(--c-accent);color:#fff}
.cms-plan--featured .cms-plan__cta{background:var(--c-accent)}
@media (max-width:575.98px){.cms-plan--featured{transform:none;margin-top:.8rem}}

/* Horaires : lignes jour / plage, jour courant surligne */
.cms-hours{max-width:520px;margin:0 auto;border:1px solid var(--c-line);border-radius:var(--r-md);overflow:hidden}
.cms-hours__row{display:flex;justify-content:space-between;align-items:center;padding:.7rem 1.1rem;border-bottom:1px solid var(--c-soft-2)}
.cms-hours__row:last-child{border-bottom:0}
.cms-hours__row.is-today{background:var(--c-pink-soft)}
.cms-hours__day{font-weight:500}
.cms-hours__today{font-size:.68rem;text-transform:uppercase;letter-spacing:.06em;color:var(--c-accent);font-weight:700;margin-left:.4rem}
.cms-hours__val{font-weight:600}
.cms-hours__val.is-closed{color:var(--c-muted);font-weight:500}
.cms-hours__note{max-width:520px;margin:.8rem auto 0;text-align:center;font-size:.82rem;color:var(--c-muted)}

/* ===== Blocs metier CMS (lot 2) : Menu prix / RDV / Carte / Equipe ===== */
/* Menu / carte des prix : nom ... prix, avec pointilles de liaison */
.cms-menucard{max-width:720px;margin:0 auto;display:flex;flex-direction:column;gap:.2rem}
.cms-mc__row{display:flex;align-items:baseline;gap:.4rem;padding:.55rem 0;border-bottom:1px dashed var(--c-line)}
.cms-mc__row:last-child{border-bottom:0}
.cms-mc__main{display:flex;flex-direction:column;flex:0 1 auto}
.cms-mc__name{font-weight:600}
.cms-mc__desc{font-size:.82rem;color:var(--c-muted)}
.cms-mc__dots{flex:1;border-bottom:2px dotted var(--c-line);transform:translateY(-3px);min-width:20px}
.cms-mc__price{font-weight:700;color:var(--c-accent);white-space:nowrap}

/* Prise de RDV : bloc CTA centre */
.cms-booking{max-width:720px;margin:0 auto;text-align:center;background:var(--c-pink-soft);border:1px solid var(--c-pink-tint);border-radius:var(--r-md);padding:2rem 1.5rem}
.cms-booking__title{font-family:var(--ff-display);font-weight:600;font-size:1.5rem;margin:0 0 .5rem}
.cms-booking__text{color:var(--c-ink-2);margin:0 0 1.2rem;line-height:1.6}
.cms-booking__actions{display:flex;flex-wrap:wrap;gap:.6rem;justify-content:center}
.cms-booking__btn{display:inline-flex;align-items:center;gap:.4rem;padding:.7rem 1.3rem;border-radius:var(--r-pill);text-decoration:none;font-weight:600;border:1px solid transparent}
.cms-booking__btn--primary{background:var(--c-ink);color:#fff}
.cms-booking__btn--primary:hover{background:var(--c-accent);color:#fff}
.cms-booking__btn--wa{background:#25d366;color:#fff}
.cms-booking__btn--call{background:#fff;color:var(--c-ink);border-color:var(--c-line)}

/* Carte / localisation : iframe + panneau d'infos */
.cms-map{display:grid;grid-template-columns:1fr;gap:1rem}
@media (min-width:768px){.cms-map{grid-template-columns:1.6fr 1fr;align-items:stretch}}
.cms-map__frame{position:relative;border-radius:var(--r-md);overflow:hidden;min-height:280px;border:1px solid var(--c-line)}
.cms-map__frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.cms-map__info{display:flex;flex-direction:column;justify-content:center;gap:.7rem;background:var(--c-surface);border:1px solid var(--c-line);border-radius:var(--r-md);padding:1.4rem}
.cms-map__addr{margin:0;font-weight:500;line-height:1.5}
.cms-map__phone{margin:0}
.cms-map__phone a{color:var(--c-ink);text-decoration:none}
.cms-map__dir{display:inline-flex;align-items:center;gap:.45rem;align-self:flex-start;margin-top:.3rem;padding:.6rem 1.2rem;border-radius:var(--r-pill);background:var(--c-ink);color:#fff;text-decoration:none;font-weight:600}
.cms-map__dir:hover{background:var(--c-accent);color:#fff}

/* Notre equipe : grille de cartes photo */
.cms-team{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:1.2rem}
.cms-team__card{display:flex;flex-direction:column;align-items:center;text-align:center;gap:.4rem;text-decoration:none;color:inherit}
.cms-team__photo{width:120px;height:120px;border-radius:50%;overflow:hidden;background:var(--c-soft);display:flex;align-items:center;justify-content:center;box-shadow:var(--sh-1);transition:transform .2s,box-shadow .2s}
.cms-team__card:hover .cms-team__photo{transform:translateY(-3px);box-shadow:var(--sh-2)}
.cms-team__photo img{width:100%;height:100%;object-fit:cover}
.cms-team__photo--empty{font-size:2.4rem;font-weight:700;color:var(--c-accent);background:var(--c-pink-soft)}
.cms-team__name{font-weight:600;margin-top:.3rem}
.cms-team__role{font-size:.82rem;color:var(--c-muted)}

/* ===== Blocs conversion CMS (lot 3) : Shop the look / Comparatif / Collections / Garanties ===== */
/* Shop the look : image + pastilles cliquables positionnees en % */
.cms-shoplook{position:relative;border-radius:var(--r-md);overflow:hidden;line-height:0}
.cms-shoplook__img{width:100%;height:auto;display:block}
.cms-shoplook__dot{position:absolute;transform:translate(-50%,-50%);width:26px;height:26px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;z-index:2}
.cms-shoplook__pulse{width:16px;height:16px;border-radius:50%;background:#fff;border:2px solid var(--c-accent);box-shadow:0 0 0 0 rgba(164,34,107,.5);animation:shoplookPulse 2s infinite}
@keyframes shoplookPulse{0%{box-shadow:0 0 0 0 rgba(164,34,107,.5)}70%{box-shadow:0 0 0 12px rgba(164,34,107,0)}100%{box-shadow:0 0 0 0 rgba(164,34,107,0)}}
.cms-shoplook__tip{position:absolute;bottom:130%;left:50%;transform:translateX(-50%);background:var(--c-ink);color:#fff;font-size:.75rem;line-height:1.2;white-space:nowrap;padding:.35rem .6rem;border-radius:6px;opacity:0;pointer-events:none;transition:opacity .18s}
.cms-shoplook__dot:hover .cms-shoplook__tip{opacity:1}

/* Tableau comparatif */
.cms-compare__wrap{overflow-x:auto}
.cms-compare{width:100%;border-collapse:collapse;min-width:480px;background:var(--c-surface);border:1px solid var(--c-line);border-radius:var(--r-md);overflow:hidden}
.cms-compare th,.cms-compare td{padding:.75rem 1rem;text-align:center;border-bottom:1px solid var(--c-soft-2)}
.cms-compare thead th{background:var(--c-soft);font-weight:600}
.cms-compare thead th:first-child{background:transparent}
.cms-compare__label{text-align:left;font-weight:500;color:var(--c-ink-2)}
.cms-compare tbody tr:last-child th,.cms-compare tbody tr:last-child td{border-bottom:0}
.cms-compare__yes{color:var(--c-success);font-weight:700;font-size:1.1rem}
.cms-compare__no{color:var(--c-muted)}

/* Collections en vedette */
.cms-collections{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1rem}
.cms-collection{position:relative;display:block;border-radius:var(--r-md);overflow:hidden;aspect-ratio:3/2;text-decoration:none;box-shadow:var(--sh-1)}
.cms-collection__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .4s ease}
.cms-collection:hover .cms-collection__img{transform:scale(1.05)}
.cms-collection__body{position:absolute;inset:0;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-end;gap:.3rem;padding:1.2rem;background:linear-gradient(to top,rgba(0,0,0,.6),rgba(0,0,0,.05) 65%);color:#fff}
.cms-collection__title{font-family:var(--ff-display);font-weight:600;font-size:1.35rem;text-shadow:0 1px 8px rgba(0,0,0,.4)}
.cms-collection__cta{font-size:.72rem;text-transform:uppercase;letter-spacing:.12em;font-weight:600;border-bottom:1px solid rgba(255,255,255,.6);padding-bottom:2px}

/* Garanties : bande illustree. Separateurs via "gap-divider" (1px sur fond
   ligne) -> pas de bordure orpheline quand les tuiles passent a la ligne. */
.cms-guarantees{display:flex;flex-wrap:wrap;justify-content:center;gap:1px;border:1px solid var(--c-line);border-radius:var(--r-md);background:var(--c-soft-2);overflow:hidden}
.cms-guarantee{flex:1 1 200px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:.4rem;padding:1.4rem 1rem;background:var(--c-surface)}
.cms-guarantee__icon{width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;background:var(--c-pink-soft);color:var(--c-accent)}
.cms-guarantee__icon svg{width:24px;height:24px}
.cms-guarantee__title{font-weight:600}
.cms-guarantee__text{font-size:.82rem;color:var(--c-muted);line-height:1.4}
@media (max-width:575px){.cms-guarantee{flex-basis:calc(50% - 1px)}}

/* Ligne d'upload simple (panneaux Shop the look) */
.cms-upload-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}

/* ===== Blocs contenu/marque CMS (lot 4) : UGC / Marques / Timeline / Articles / Accordeon ===== */
/* UGC / Instagram */
.cms-ugc__handle{display:inline-flex;align-items:center;gap:.4rem;margin-top:.4rem;color:var(--c-accent);text-decoration:none;font-weight:600;font-size:.9rem}
.cms-ugc{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:.5rem}
.cms-ugc__item{position:relative;display:block;aspect-ratio:1/1;overflow:hidden;border-radius:8px;background:var(--c-soft)}
.cms-ugc__item img{width:100%;height:100%;object-fit:cover;transition:transform .3s}
.cms-ugc__item:hover img{transform:scale(1.06)}
.cms-ugc__ov{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#fff;font-size:1.5rem;background:rgba(0,0,0,.28);opacity:0;transition:opacity .2s}
.cms-ugc__item:hover .cms-ugc__ov{opacity:1}

/* Logos marques : bandeau qui defile en boucle */
.cms-brands{overflow:hidden;position:relative;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.cms-brands__track{display:flex;align-items:center;gap:3rem;width:max-content;animation:brandsScroll 30s linear infinite}
.cms-brands:hover .cms-brands__track{animation-play-state:paused}
@keyframes brandsScroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.cms-brands__logo{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;height:56px}
.cms-brands__logo img{max-height:56px;width:auto;object-fit:contain;filter:grayscale(1);opacity:.7;transition:filter .2s,opacity .2s}
.cms-brands__logo:hover img{filter:grayscale(0);opacity:1}

/* ==========================================================================
   Logos marques reglables (plan catalogue, lot 8) : partials/brands_block.php.
   N'agit que sur les blocs regles ; le bandeau d'origine (.cms-brands) reste
   tel quel. ⚠ Copie a l'identique dans follow/assets/css/cms.css (apercu de
   /cms) : tmp/test_bloc_marques.php compare les deux blocs.
   ========================================================================== */
/* BRB:DEBUT */
.brb{--brb-h:56px;--brb-w:150px;--brb-gap:3rem}
.brb--sz-s{--brb-h:40px;--brb-w:112px;--brb-gap:2rem}
.brb--sz-l{--brb-h:80px;--brb-w:200px;--brb-gap:3.5rem}
.brb__item{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:.5rem;min-width:0;color:var(--c-ink,#232529);text-decoration:none !important}
.brb__item:focus-visible{outline:2px solid currentColor;outline-offset:4px;border-radius:6px}
.brb__logo{display:flex;align-items:center;justify-content:center;box-sizing:border-box;height:var(--brb-h);max-width:var(--brb-w);transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
.brb__logo img{display:block;max-height:100%;max-width:100%;width:auto;height:auto;object-fit:contain;filter:grayscale(1);opacity:.7;transition:filter .2s,opacity .2s}
.brb--color .brb__logo img,.brb__item:hover .brb__logo img,.brb__item:focus-visible .brb__logo img{filter:none;opacity:1}
.brb__word{font-weight:700;font-size:calc(var(--brb-h) * .32);line-height:1.15;letter-spacing:.02em;text-align:center;overflow-wrap:anywhere;opacity:.8;transition:opacity .2s}
.brb__item:hover .brb__word{opacity:1}
.brb__name{max-width:var(--brb-w);font-size:.82rem;font-weight:600;line-height:1.25;text-align:center;overflow-wrap:anywhere}
.brb__item:hover .brb__logo{transform:translateY(-2px)}
/* Formes : un cadre autour du logo */
.brb--sh-circle .brb__logo,.brb--sh-rounded .brb__logo,.brb--sh-square .brb__logo,.brb--sh-card .brb__logo{background:var(--c-surface,#fff);border:1px solid var(--c-line,#e5e7eb)}
.brb--sh-circle .brb__logo,.brb--sh-square .brb__logo{width:calc(var(--brb-h) * 1.9);height:calc(var(--brb-h) * 1.9);max-width:none;padding:calc(var(--brb-h) * .34)}
.brb--sh-circle .brb__logo{border-radius:50%}
.brb--sh-square .brb__logo{border-radius:0}
.brb--sh-rounded .brb__logo,.brb--sh-card .brb__logo{width:var(--brb-w);height:calc(var(--brb-h) * 1.55);max-width:none;padding:calc(var(--brb-h) * .24) calc(var(--brb-h) * .3);border-radius:14px}
.brb--sh-card .brb__logo{box-shadow:0 6px 18px rgba(0,0,0,.06)}
.brb--sh-card .brb__item:hover .brb__logo{box-shadow:0 12px 28px rgba(0,0,0,.1)}
/* Nom en toutes lettres dans un rond ou un carre : plus petit, 3 lignes au plus */
.brb--sh-circle .brb__word,.brb--sh-square .brb__word{font-size:calc(var(--brb-h) * .24);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
/* Bandeau defilant : deux moities identiques ; la marge de fin egale l'ecart,
   pour que -50 % tombe pile sur le debut de la seconde moitie (sans saut). */
@keyframes brbScroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.brb--marquee{overflow:hidden;position:relative;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.brb--marquee .brb__track{display:flex;align-items:flex-start;gap:var(--brb-gap);padding-right:var(--brb-gap);width:max-content;animation:brbScroll 30s linear infinite}
.brb--marquee:hover .brb__track{animation-play-state:paused}
.brb--marquee .brb__item{flex:0 0 auto}
@media (prefers-reduced-motion:reduce){
  .brb--marquee{-webkit-mask-image:none;mask-image:none}
  .brb--marquee .brb__track{animation:none;width:auto;padding-right:0;flex-wrap:wrap;justify-content:center}
  .brb--marquee .brb__item[aria-hidden="true"]{display:none}
}
/* Grille : rangees centrees de tuiles de meme largeur. En flex et non en grille :
   avec peu de marques, une grille auto-fill les calait a gauche. */
.brb--grid{display:flex;flex-wrap:wrap;justify-content:center;align-items:flex-start;gap:1.75rem 1.25rem}
.brb--grid .brb__item{flex:0 1 var(--brb-w)}
@media (max-width:575.98px){.brb--grid .brb__item{flex-basis:calc(50% - .75rem)}}
/* Carrousel : moteur des carrousels de produits (.promo-slider, shop.js) */
.brb--carousel .promo-slider__track{align-items:flex-start;gap:var(--brb-gap)}
.brb--carousel .promo-slider__item{flex:0 0 auto;max-width:none}
/* Noms seuls */
.brb--names{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;align-items:baseline;gap:.5rem 2rem}
.brb--names .brb__item--word{display:inline;font-weight:700;font-size:calc(var(--brb-h) * .38);letter-spacing:.02em;opacity:.75;transition:opacity .2s}
.brb--names .brb__item--word:hover,.brb--names .brb__item--word:focus-visible{opacity:1}
/* BRB:FIN */
/* Boutique filtree par marque (plan catalogue, lot 8) : pastille retirable */
.chip.chip--brand{align-items:center;gap:.6rem;letter-spacing:.02em;font-size:.85rem;background:var(--c-ink);border-color:var(--c-ink);color:#fff}
.chip.chip--brand strong{font-weight:700}
.chip.chip--brand .bi{font-size:.75rem;opacity:.8}
.chip.chip--brand:hover{background:#fff;color:var(--c-ink)}

/* Timeline / notre histoire */
.cms-timeline{max-width:720px;margin:0 auto;position:relative;padding-left:2rem}
.cms-timeline:before{content:"";position:absolute;left:7px;top:6px;bottom:6px;width:2px;background:var(--c-line)}
.cms-tl__item{position:relative;padding:0 0 1.6rem .4rem}
.cms-tl__item:last-child{padding-bottom:0}
.cms-tl__dot{position:absolute;left:-2rem;top:4px;width:16px;height:16px;border-radius:50%;background:var(--c-accent);border:3px solid var(--c-bg);box-shadow:0 0 0 1px var(--c-accent)}
.cms-tl__year{font-weight:700;color:var(--c-accent);font-size:.85rem;letter-spacing:.05em}
.cms-tl__title{font-size:1.05rem;font-weight:600;margin:.15rem 0 .2rem}
.cms-tl__text{color:var(--c-ink-2);font-size:.9rem;line-height:1.55;margin:0}

/* Articles / blog */
.cms-articles{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1.4rem}
.cms-article{display:flex;flex-direction:column;background:var(--c-surface);border:1px solid var(--c-line);border-radius:var(--r-md);overflow:hidden;text-decoration:none;color:inherit;transition:box-shadow .2s,transform .2s}
.cms-article:hover{box-shadow:var(--sh-2);transform:translateY(-2px)}
.cms-article__media{display:block;aspect-ratio:16/10;overflow:hidden;background:var(--c-soft)}
.cms-article__media img{width:100%;height:100%;object-fit:cover;transition:transform .35s}
.cms-article:hover .cms-article__media img{transform:scale(1.04)}
.cms-article__body{display:flex;flex-direction:column;gap:.35rem;padding:1rem 1.1rem 1.2rem}
.cms-article__date{font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;color:var(--c-muted);font-weight:600}
.cms-article__title{font-family:var(--ff-display);font-weight:600;font-size:1.1rem;line-height:1.3}
.cms-article__excerpt{font-size:.88rem;color:var(--c-ink-2);line-height:1.5}
.cms-article__more{margin-top:.3rem;font-size:.82rem;font-weight:600;color:var(--c-accent)}

/* Accordeon */
.cms-accordion{max-width:760px;margin:0 auto;border:1px solid var(--c-line);border-radius:var(--r-md);overflow:hidden}
.cms-acc__item{border-bottom:1px solid var(--c-soft-2)}
.cms-acc__item:last-child{border-bottom:0}
.cms-acc__head{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:1rem 1.2rem;font-weight:600;cursor:pointer;list-style:none;background:var(--c-surface)}
.cms-acc__head::-webkit-details-marker{display:none}
.cms-acc__head:hover{background:var(--c-soft)}
.cms-acc__chev{flex:0 0 auto;font-size:1.3rem;line-height:1;color:var(--c-accent);transition:transform .2s}
.cms-acc__item[open] .cms-acc__chev{transform:rotate(45deg)}
.cms-acc__body{padding:0 1.2rem 1.1rem;color:var(--c-ink-2);line-height:1.6;font-size:.92rem}

/* ===== Blocs attraction CMS (lot 5) : Livraison gratuite / Mur d'avis ===== */
/* Barre livraison gratuite */
.cms-freeship{display:flex;align-items:center;justify-content:center;gap:.6rem;background:#eafaf1;border:1px solid #b7e4c7;color:#166534;border-radius:var(--r-md);padding:.85rem 1.2rem;font-weight:600;text-align:center;flex-wrap:wrap}
.cms-freeship svg{color:#22a35a;flex:0 0 auto}

/* Mur d'avis clients */
.cms-reviews{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1.1rem}
.cms-review{margin:0;display:flex;flex-direction:column;gap:.6rem;background:var(--c-surface);border:1px solid var(--c-line);border-radius:var(--r-md);padding:1.2rem 1.3rem}
.cms-review__stars{color:var(--c-star);font-size:.95rem}
.cms-review__text{margin:0;font-size:.95rem;line-height:1.6;color:var(--c-ink);font-style:italic}
.cms-review__text:before{content:"\201C";color:var(--c-pink-tint);font-size:1.6rem;line-height:0;vertical-align:-.3em;margin-right:.15rem}
.cms-review__foot{display:flex;flex-direction:column;gap:.15rem;margin-top:auto}
.cms-review__author{font-weight:600;font-size:.9rem;display:inline-flex;align-items:center;gap:.35rem}
.cms-review__badge{color:var(--c-success)}
.cms-review__prod{font-size:.8rem;color:var(--c-muted);text-decoration:none}
.cms-review__prod:hover{color:var(--c-accent);text-decoration:underline}

/* ===== Bloc Diaporama d'images (imageslider) : 4 styles ===== */
.cms-slides{position:relative}
.cms-slides__viewport{overflow:hidden;border-radius:var(--r-md)}
.cms-slides__track{display:flex;transition:transform .55s cubic-bezier(.16,1,.3,1)}
.cms-slide{position:relative;flex:0 0 100%;min-width:0}
.cms-slide__media{display:block;line-height:0}
.cms-slide__media img{width:100%;height:100%;object-fit:cover;display:block}
.cms-slide__cap{position:absolute;left:0;right:0;bottom:0;display:flex;flex-direction:column;align-items:flex-start;gap:.6rem;padding:1.4rem 1.6rem;background:linear-gradient(to top,rgba(0,0,0,.6),rgba(0,0,0,0) 75%);color:#fff}
.cms-slide__caption{font-family:var(--ff-display);font-weight:600;font-size:clamp(1.1rem,3vw,1.8rem);text-shadow:0 1px 10px rgba(0,0,0,.4);max-width:70%}
.cms-slide__btn{display:inline-block;padding:.55rem 1.3rem;border-radius:var(--r-pill);background:#fff;color:var(--c-ink);text-decoration:none;font-weight:600;font-size:.9rem}
.cms-slide__btn:hover{background:var(--c-accent);color:#fff}

/* Fleches + points */
.cms-slides__nav{position:absolute;top:50%;transform:translateY(-50%);z-index:3;width:42px;height:42px;border-radius:50%;border:0;background:rgba(255,255,255,.9);color:var(--c-ink);font-size:1.5rem;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:var(--sh-1);transition:background .15s}
.cms-slides__nav:hover{background:#fff}
.cms-slides__nav--prev{left:12px}
.cms-slides__nav--next{right:12px}
.cms-slides__dots{position:absolute;left:0;right:0;bottom:12px;display:flex;justify-content:center;gap:8px;z-index:3}
.cms-slides__dot{width:9px;height:9px;border-radius:50%;border:0;background:rgba(255,255,255,.55);cursor:pointer;padding:0;transition:background .2s,transform .2s}
.cms-slides__dot.is-active{background:#fff;transform:scale(1.25)}

/* Style "plein largeur" (bannieres) */
.cms-slides--full .cms-slide__media,.cms-slides--full .cms-slide__media img{aspect-ratio:21/9;height:auto}
/* Mobile : MEME ratio que le desktop. Un ratio different ici rognait l'image
   (object-fit:cover) alors que /cms annonce une seule taille a respecter :
   21/9 -> 3/2 coupait environ 36% de la largeur. Le bloc "hero" garde son
   cadrage portrait, c'est un plein-ecran ou le recadrage est voulu. */
@media (max-width:767.98px){.cms-slides--full .cms-slide__media,.cms-slides--full .cms-slide__media img{aspect-ratio:21/9}}

/* Style "fondu enchaine" : slides empiles, opacite */
.cms-slides--fade .cms-slides__track{display:block;position:relative}
.cms-slides--fade .cms-slide{position:absolute;inset:0;opacity:0;transition:opacity .6s ease;pointer-events:none}
.cms-slides--fade .cms-slide.is-active{opacity:1;position:relative;pointer-events:auto}
.cms-slides--fade .cms-slide__media,.cms-slides--fade .cms-slide__media img{aspect-ratio:21/9;height:auto}
/* Mobile : meme ratio que le desktop (cf. commentaire du style "plein largeur"). */
@media (max-width:767.98px){.cms-slides--fade .cms-slide__media,.cms-slides--fade .cms-slide__media img{aspect-ratio:21/9}}

/* Style "carrousel de cartes" : defilement horizontal, plusieurs visibles */
.cms-slides--cards .cms-slides__viewport{overflow-x:auto;scroll-behavior:smooth;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;border-radius:0}
.cms-slides--cards .cms-slides__viewport::-webkit-scrollbar{display:none}
.cms-slides--cards .cms-slides__track{display:flex;gap:1rem;transition:none}
.cms-slides--cards .cms-slide{flex:0 0 clamp(240px,42%,360px);scroll-snap-align:start}
.cms-slides--cards .cms-slide__media{border-radius:var(--r-md);overflow:hidden}
.cms-slides--cards .cms-slide__media,.cms-slides--cards .cms-slide__media img{aspect-ratio:4/5;height:auto}
.cms-slides--cards .cms-slide__cap{background:none;position:static;color:var(--c-ink);padding:.7rem .2rem 0}
.cms-slides--cards .cms-slide__caption{font-size:1rem;text-shadow:none;max-width:none}
.cms-slides--cards .cms-slide__btn{background:var(--c-ink);color:#fff}

/* Style "galerie + miniatures" : grande image + bande de vignettes */
.cms-slides--thumbs .cms-slide__media,.cms-slides--thumbs .cms-slide__media img{aspect-ratio:16/10;height:auto}
.cms-slides__thumbs{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:12px}
.cms-slides__thumb{width:70px;height:52px;border-radius:8px;overflow:hidden;border:2px solid transparent;background:none;padding:0;cursor:pointer;opacity:.65;transition:opacity .2s,border-color .2s}
.cms-slides__thumb img{width:100%;height:100%;object-fit:cover}
.cms-slides__thumb.is-active{opacity:1;border-color:var(--c-accent)}

/* Style "hero" : diaporama pleine largeur en haut de l'accueil */
.cms-slides--hero .cms-slides__viewport{border-radius:0}
.cms-slides--hero.cms-slides--full .cms-slide__media,.cms-slides--hero.cms-slides--full .cms-slide__media img,
.cms-slides--hero.cms-slides--fade .cms-slide__media,.cms-slides--hero.cms-slides--fade .cms-slide__media img{aspect-ratio:16/6;height:auto}
@media (max-width:767.98px){.cms-slides--hero .cms-slide__media,.cms-slides--hero .cms-slide__media img{aspect-ratio:4/5 !important}}
.cms-slides--hero .cms-slide__caption{font-size:clamp(1.3rem,4vw,2.4rem)}

/* Forme "spotlight" : titre centre en grand par-dessus l'image assombrie. */
.cms-slides--hero.cms-slides--spotlight .cms-slide__media,
.cms-slides--hero.cms-slides--spotlight .cms-slide__media img{aspect-ratio:16/6;height:auto}
/* Spotlight hors hero (bloc diaporama) : ratio propre + portrait sur mobile. */
.cms-slides--spotlight:not(.cms-slides--hero) .cms-slide__media,
.cms-slides--spotlight:not(.cms-slides--hero) .cms-slide__media img{aspect-ratio:16/7;height:auto}
/* Mobile : meme ratio que le desktop. 16/7 -> 4/5 coupait ~65% de la largeur. */
@media (max-width:767.98px){.cms-slides--spotlight:not(.cms-slides--hero) .cms-slide__media,.cms-slides--spotlight:not(.cms-slides--hero) .cms-slide__media img{aspect-ratio:16/7}}
.cms-slides--spotlight .cms-slide__cap{inset:0;align-items:center;justify-content:center;text-align:center;background:linear-gradient(rgba(0,0,0,.35),rgba(0,0,0,.5));padding:2rem}
.cms-slides--spotlight .cms-slide__caption{max-width:82%;font-size:clamp(1.6rem,5vw,3rem);line-height:1.1}
.cms-slides--spotlight .cms-slide__cap{gap:1rem}

/* Forme "split" : image d'un cote, panneau texte de l'autre (sur fond plein). */
.cms-slides--split .cms-slide{display:grid;grid-template-columns:1fr 1fr;background:var(--c-surface)}
.cms-slides--split .cms-slide__media,
.cms-slides--split .cms-slide__media img{aspect-ratio:4/3;height:100%}
.cms-slides--split .cms-slide__cap{position:static;background:var(--c-surface);color:var(--c-ink);justify-content:center;align-items:flex-start;text-align:left;gap:1rem;padding:clamp(1.2rem,4vw,3rem)}
.cms-slides--split .cms-slide__caption{color:var(--c-ink);text-shadow:none;font-family:var(--ff-display);font-size:clamp(1.3rem,3vw,2.2rem);max-width:none}
.cms-slides--split .cms-slide__btn{background:var(--c-ink);color:#fff}
.cms-slides--split .cms-slide__btn:hover{background:var(--c-accent);color:#fff}
@media (max-width:767.98px){
  .cms-slides--split .cms-slide{grid-template-columns:1fr}
  .cms-slides--hero.cms-slides--split .cms-slide__media,
  .cms-slides--hero.cms-slides--split .cms-slide__media img{aspect-ratio:16/10 !important}
}

/* ===== Blocs sectoriels A1 : Fiche technique / Guide tailles / Labels / Criteres ===== */
/* Fiche technique (libelle ... valeur) */
.cms-specs{max-width:720px;margin:0 auto;border:1px solid var(--c-line);border-radius:var(--r-md);overflow:hidden}
.cms-specs__row{display:flex;justify-content:space-between;gap:1rem;padding:.7rem 1.1rem;border-bottom:1px solid var(--c-soft-2)}
.cms-specs__row:last-child{border-bottom:0}
.cms-specs__row:nth-child(odd){background:var(--c-soft)}
.cms-specs__label{color:var(--c-ink-2);font-weight:500}
.cms-specs__value{font-weight:600;text-align:right}

/* Guide des tailles */
.cms-sizeguide__wrap{overflow-x:auto;max-width:820px;margin:0 auto}
.cms-sizeguide{width:100%;border-collapse:collapse;min-width:420px;background:var(--c-surface);border:1px solid var(--c-line);border-radius:var(--r-md);overflow:hidden}
.cms-sizeguide th,.cms-sizeguide td{padding:.7rem 1rem;text-align:center;border-bottom:1px solid var(--c-soft-2)}
.cms-sizeguide thead th{background:var(--c-ink);color:#fff;font-weight:600}
.cms-sizeguide thead th:first-child{background:transparent}
.cms-sizeguide__label{text-align:left;font-weight:500;color:var(--c-ink-2);background:var(--c-soft)}
.cms-sizeguide tbody tr:last-child th,.cms-sizeguide tbody tr:last-child td{border-bottom:0}
.cms-sizeguide__note{max-width:820px;margin:.7rem auto 0;text-align:center;font-size:.82rem;color:var(--c-muted)}

/* Labels / badges */
.cms-labels{display:flex;flex-wrap:wrap;justify-content:center;gap:.7rem}
.cms-label{display:inline-flex;align-items:center;gap:.45rem;padding:.5rem 1rem;border-radius:var(--r-pill);background:var(--c-pink-soft);border:1px solid var(--c-pink-tint);font-weight:600;font-size:.88rem}
.cms-label__icon{display:inline-flex;color:var(--c-accent)}
.cms-label__icon svg{width:18px;height:18px}

/* Navigation par critere */
.cms-criteria{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:.9rem}
.cms-criteria__tile{display:flex;flex-direction:column;align-items:center;gap:.4rem;text-align:center;padding:1.3rem 1rem;border:1px solid var(--c-line);border-radius:var(--r-md);background:var(--c-surface);text-decoration:none;color:inherit;transition:transform .2s,box-shadow .2s,border-color .2s}
.cms-criteria__tile:hover{transform:translateY(-2px);box-shadow:var(--sh-2);border-color:var(--c-accent)}
.cms-criteria__icon{width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;background:var(--c-pink-soft);color:var(--c-accent)}
.cms-criteria__icon svg{width:24px;height:24px}
.cms-criteria__title{font-weight:600}
.cms-criteria__sub{font-size:.8rem;color:var(--c-muted)}

/* ===== Blocs sectoriels A2 : Nuancier / Recette / Etat produit ===== */
/* Nuancier */
.cms-swatches{display:flex;flex-wrap:wrap;justify-content:center;gap:1.1rem}
.cms-swatch{display:flex;flex-direction:column;align-items:center;gap:.4rem;text-decoration:none;color:inherit}
.cms-swatch__dot{width:46px;height:46px;border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 1px var(--c-line);transition:transform .2s,box-shadow .2s}
.cms-swatch:hover .cms-swatch__dot{transform:scale(1.1);box-shadow:0 0 0 2px var(--c-accent)}
.cms-swatch__label{font-size:.8rem;font-weight:500}

/* Recette / tuto */
.cms-recipe{display:grid;grid-template-columns:1fr;gap:1.4rem;max-width:900px;margin:0 auto}
@media (min-width:768px){.cms-recipe{grid-template-columns:1fr 1.3fr;align-items:start}}
.cms-recipe__media{border-radius:var(--r-md);overflow:hidden}
.cms-recipe__media img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/3}
.cms-recipe__meta{display:flex;gap:1.2rem;color:var(--c-ink-2);font-weight:600;font-size:.9rem;margin-bottom:.6rem}
.cms-recipe__h{font-family:var(--ff-display);font-weight:600;font-size:1.1rem;margin:1rem 0 .5rem}
.cms-recipe__ings{margin:0;padding-left:1.1rem;color:var(--c-ink-2);line-height:1.7}
.cms-recipe__steps{margin:0;padding-left:1.3rem;color:var(--c-ink-2);line-height:1.7}
.cms-recipe__steps li{margin-bottom:.4rem}

/* Etat produit (grading) */
.cms-grading{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1rem}
.cms-grade{display:flex;flex-direction:column;align-items:flex-start;gap:.4rem;padding:1.2rem 1.3rem;border:1px solid var(--c-line);border-radius:var(--r-md);background:var(--c-surface)}
.cms-grade__badge{display:inline-flex;align-items:center;justify-content:center;min-width:34px;height:34px;padding:0 .5rem;border-radius:8px;background:var(--c-ink);color:#fff;font-weight:700}
.cms-grade__title{font-weight:600;font-size:1.02rem}
.cms-grade__text{font-size:.88rem;color:var(--c-ink-2);line-height:1.5}

/* ===== En-tete configurable (reglage « En-tete du site » dans /cms) =====
   header_layout_config() (shop_helper.php) pose sur .site-header :
     hdr-grid           moteur en grille — toutes les dispositions SAUF l'historique
                        (logo a gauche + loupe), qui garde son flex d'origine ;
     hdr-l-{layout}     classic | stacked | center | split ;
     hdr-s-{pos|icon}   emplacement de la barre de recherche ;
     hdr-w-{largeur}    compact | normal | large ;
     hdr-a-{alignement} alignement du menu.
   L'ancienne version plaçait le logo « au centre » par des marges automatiques
   dans un flex : elles se partageaient l'espace libre avec celle des icones, et
   le logo tombait au premier tiers de la ligne. Ici, le logo centre occupe la
   colonne du milieu d'une grille dont les deux colonnes laterales sont EGALES
   (1fr / 1fr) : il est au centre exact, quelle que soit la largeur des icones.
   Tout est borne a 992 px et plus : sous ce seuil, l'en-tete mobile (logo
   centre en absolu, hamburger, icones) reste celui d'origine. */

/* Largeur de la barre (jeton unique, decline par emplacement) */
.site-header{ --hdr-search-w:300px; }
.site-header.hdr-w-compact{ --hdr-search-w:210px; }
.site-header.hdr-w-large{ --hdr-search-w:440px; }
.site-header.hdr-s-main_center{ --hdr-search-w:520px; }
.site-header.hdr-s-main_center.hdr-w-compact{ --hdr-search-w:380px; }
.site-header.hdr-s-main_center.hdr-w-large{ --hdr-search-w:720px; }
.site-header.hdr-s-below{ --hdr-search-w:640px; }
.site-header.hdr-s-below.hdr-w-compact{ --hdr-search-w:420px; }
.site-header.hdr-s-below.hdr-w-large{ --hdr-search-w:100%; }

@media (min-width: 992px) {
  .site-header.hdr-grid .bar-main > .container-xxl{
    display:grid !important; align-items:center;
    column-gap:1.5rem !important; row-gap:.15rem !important;
  }
  /* justify-self:start : sans lui la boite du lien s'etire sur toute sa colonne,
     et un clic dans le vide a cote du logo ramenerait a l'accueil. */
  .site-header.hdr-grid .brand{ grid-area:logo; justify-self:start; }
  .site-header.hdr-grid .bar-nav-inline{ grid-area:nav; min-width:0; }
  .site-header.hdr-grid .hdr-search{ grid-area:search; }
  .site-header.hdr-grid .hdr-icons{ grid-area:icons; justify-self:end; min-width:0; }
  /* Un menu trop long passe a la ligne au lieu de deborder sur ses voisins. */
  .site-header.hdr-grid .bar-nav-inline .nav-top-list{ flex-wrap:wrap; row-gap:.1rem; }

  /* -- classic : logo | menu | icones (le menu reste a cote du logo) -------- */
  .hdr-grid.hdr-l-classic .bar-main > .container-xxl{
    grid-template-columns:auto minmax(0,1fr) auto;
    grid-template-areas:"logo nav icons";
  }
  .hdr-grid.hdr-l-classic.hdr-s-main_left .bar-main > .container-xxl{
    grid-template-columns:auto minmax(0,var(--hdr-search-w)) minmax(0,1fr) auto;
    grid-template-areas:"logo search nav icons";
  }
  .hdr-grid.hdr-l-classic.hdr-s-below .bar-main > .container-xxl{
    grid-template-areas:"logo nav icons" "search search search";
  }

  /* -- stacked : logo | . | icones, puis le menu sur toute la largeur ------- */
  .hdr-l-stacked .bar-main > .container-xxl{
    grid-template-columns:auto minmax(0,1fr) auto;
    grid-template-areas:"logo . icons" "nav nav nav";
  }
  .hdr-l-stacked.hdr-s-main_left .bar-main > .container-xxl{ grid-template-areas:"logo search icons" "nav nav nav"; }
  .hdr-l-stacked.hdr-s-nav_left  .bar-main > .container-xxl{ grid-template-areas:"logo . icons" "search nav nav"; }
  .hdr-l-stacked.hdr-s-nav_right .bar-main > .container-xxl{ grid-template-areas:"logo . icons" "nav nav search"; }
  .hdr-l-stacked.hdr-s-below     .bar-main > .container-xxl{ grid-template-areas:"logo . icons" "nav nav nav" "search search search"; }

  /* Recherche AU CENTRE de la ligne du logo (classic ou stacked) : colonnes
     laterales egales, la barre est centree sur la page et non entre deux
     elements de largeurs differentes. Classic : le menu passe dessous. */
  .hdr-grid.hdr-l-classic.hdr-s-main_center .bar-main > .container-xxl,
  .hdr-l-stacked.hdr-s-main_center .bar-main > .container-xxl{
    grid-template-columns:minmax(auto,1fr) minmax(0,var(--hdr-search-w)) minmax(auto,1fr);
    grid-template-areas:"logo search icons" "nav nav nav";
  }

  /* -- center : . | LOGO | icones, puis le menu ------------------------------ */
  .hdr-l-center .bar-main > .container-xxl{
    grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
    grid-template-areas:". logo icons" "nav nav nav";
  }
  .hdr-l-center.hdr-s-main_left .bar-main > .container-xxl{ grid-template-areas:"search logo icons" "nav nav nav"; }
  .hdr-l-center.hdr-s-nav_left  .bar-main > .container-xxl{ grid-template-areas:". logo icons" "search nav ."; }
  .hdr-l-center.hdr-s-nav_right .bar-main > .container-xxl{ grid-template-areas:". logo icons" ". nav search"; }
  .hdr-l-center.hdr-s-below     .bar-main > .container-xxl{ grid-template-areas:". logo icons" "nav nav nav" "search search search"; }

  /* -- split : menu | LOGO | icones, sur une seule ligne --------------------- */
  .hdr-l-split .bar-main > .container-xxl{
    grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
    grid-template-areas:"nav logo icons";
  }
  .hdr-l-split.hdr-s-below .bar-main > .container-xxl{ grid-template-areas:"nav logo icons" "search search search"; }

  /* Logo au centre : la boite ET l'image (calee a gauche dans sa boite sinon). */
  .site-header.hdr-l-center .brand, .site-header.hdr-l-split .brand{ justify-self:center; }
  .site-header.hdr-l-center .brand-logo, .site-header.hdr-l-split .brand-logo{ object-position:center; }

  /* Barre de recherche dans une cellule de la grille */
  .site-header.hdr-grid .hdr-search{ width:var(--hdr-search-w); max-width:100%; }
  /* Colonne a la largeur de la barre : la barre la remplit (ordre de source = gagne). */
  .site-header.hdr-s-main_center .hdr-search,
  .site-header.hdr-l-classic.hdr-s-main_left .hdr-search{ width:100%; }
  .site-header.hdr-s-main_center .hdr-search{ justify-self:center; }
  .site-header.hdr-s-below .hdr-search{ justify-self:center; margin-top:.35rem; }
  .site-header.hdr-s-main_left .hdr-search, .site-header.hdr-s-nav_left .hdr-search{ justify-self:start; }
  .site-header.hdr-s-nav_right .hdr-search{ justify-self:end; }
}

/* Alignement du menu (toutes dispositions, historique comprise : sans reglage,
   la classe vaut hdr-a-center, soit exactement le centrage d'origine). */
.site-header.hdr-a-left .bar-nav-inline{ justify-content:flex-start; }
.site-header.hdr-a-right .bar-nav-inline{ justify-content:flex-end; }

/* Bouton d'action facultatif de l'en-tete */
.header-cta {
  align-items: center; gap: .4rem; padding: .5rem 1.1rem; border-radius: var(--r-pill);
  background: var(--c-pink); color: #fff; font-weight: 600; font-size: .88rem;
  text-decoration: none; white-space: nowrap; transition: background .15s, transform .15s;
}
.header-cta:hover { background: var(--c-pink-dk); color: #fff; transform: translateY(-1px); }

/* ===== Recherche en barre (reglage "Recherche" dans /cms > En-tete du site) =====
   La pilule est concue pour la fenetre de recherche (46px) : ramenee ici a la
   hauteur d'une barre de menu. `margin:0` annule le `margin:0 auto` de
   .search-form, qui la centrerait au milieu du menu. */
.site-header .search-form--bar{ flex:0 1 auto; min-width:0; margin:0; }
.site-header .search-form--bar .search-pill{ width:100%; height:42px; min-height:42px; }
.site-header .search-form--bar .search-pill__submit--icon{ width:34px; height:34px; }
/* « Pres des icones » : rendue dans leur groupe, elle cede de la place la
   premiere quand la ligne se resserre — jamais les icones. */
.site-header .hdr-icons .search-form--bar{ flex:0 1 var(--hdr-search-w); width:var(--hdr-search-w); min-width:150px; margin-right:.35rem; }
.search-form--mobile{ max-width:none; margin:0 auto; }

/* ===== Barre de tri de la liste (haut a gauche) ===== */
.shop-toolbar{ display:flex; align-items:center; flex-wrap:wrap; gap:.5rem .75rem; margin:0 0 1.1rem; }
.shop-toolbar__label{ font-size:.82rem; color:var(--c-muted); display:inline-flex; align-items:center; gap:.35rem; margin:0; }
.shop-toolbar__select{
  appearance:auto; min-width:200px; max-width:100%;
  border:1px solid var(--c-line); border-radius:var(--r-pill, 999px);
  background:var(--c-surface, #fff); color:var(--c-ink);
  padding:.45rem 2rem .45rem .9rem; font-size:.88rem; font-weight:500; cursor:pointer;
}
.shop-toolbar__select:focus{ outline:2px solid var(--c-pink); outline-offset:2px; }

/* ===== Pagination numerotee (reglage "Chargement des produits" dans /cms) ===== */
.shop-pager{ display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:.5rem; margin:2.25rem 0 .5rem; }
.shop-pager__list{ display:flex; align-items:center; gap:.35rem; list-style:none; margin:0; padding:0; }
.shop-pager__num, .shop-pager__step{
  display:inline-flex; align-items:center; justify-content:center; gap:.35rem;
  min-width:40px; height:40px; padding:0 .75rem; border-radius:var(--r-pill, 999px);
  border:1px solid var(--c-line); background:var(--c-surface, #fff); color:var(--c-ink);
  font-weight:600; font-size:.88rem; text-decoration:none;
  font-variant-numeric:tabular-nums;
  transition:border-color .15s ease, background .15s ease, color .15s ease;
}
.shop-pager__num:hover, .shop-pager__step:hover{ border-color:var(--c-ink); color:var(--c-ink); }
.shop-pager__num.is-current{ background:var(--c-ink); border-color:var(--c-ink); color:#fff; cursor:default; }
.shop-pager__step.is-disabled{ opacity:.4; pointer-events:none; }
.shop-pager__gap{ color:var(--c-muted); padding:0 .15rem; }
@media (max-width:575.98px){ .shop-pager__step span{ display:none; } }

/* ===== Boutons des cartes (reglage "Boutons des cartes produit" dans /cms) =====
   Mode « les deux » : empiles. Cote a cote, « AJOUTER AU PANIER » en capitales
   espacees ne tient pas dans une carte de 260px. Le bouton panier prend un
   style secondaire pour que l'oeil distingue les deux actions. */
.product-card__cart-form{ margin:0; width:100%; }
.product-card__quickadd--both{ display:flex; flex-direction:column; gap:.4rem; }
.product-card__quickadd--both .product-card__cart-form .product-card__quickadd-btn{
  background:rgba(255,255,255,.14); color:#fff; border:1px solid rgba(255,255,255,.75);
}
.product-card__quickadd--both .product-card__cart-form .product-card__quickadd-btn:hover{ background:#fff; color:var(--c-ink); }
.product-card__cta-mobile-wrap{ display:flex; flex-direction:column; gap:.4rem; }
/* Les styles de carte qui masquent deja le bouton mobile masquent aussi son
   conteneur : sinon il resterait un espace vide sous le prix. */
.product-card--minimal .product-card__cta-mobile-wrap,
.product-card--overlay .product-card__cta-mobile-wrap,
.product-card--editorial .product-card__cta-mobile-wrap,
.pg-prodlist .product-card__cta-mobile-wrap{ display:none; }

/* ===== Precommande (onglet "Precommandes & alertes" dans /cms) ===== */
.badge-chip--preorder{ background:var(--c-pink) !important; color:#fff !important; border-color:var(--c-pink) !important; }
/* Precommande « en rupture » (/cms, 03/10/2026) : rouge franc, comme le bandeau
   de la fiche (alert-danger) — la couleur « danger » du theme peut etre rose. */
.badge-chip--oos{ background:var(--bs-danger, #dc3545) !important; color:#fff !important; border-color:var(--bs-danger, #dc3545) !important; }
/* La meme mention sous le prix, la ou le style de carte masque les pastilles
   (editorial) : ailleurs, la pastille suffit. */
.product-card__oos{ display:none; color:var(--bs-danger, #dc3545); font-weight:700; margin-top:.2rem; }
.product-card--editorial .product-card__oos{ display:block; }
.product-card__preorder{ color:var(--c-pink-dk, var(--c-pink)); font-weight:600; margin-top:.2rem; }
.pd-preorder-banner{
  display:flex; align-items:flex-start; gap:.6rem;
  padding:.65rem .9rem; border-radius:var(--r-md, 10px);
  background:var(--c-pink-soft, #f5f5f5); border:1px solid var(--c-pink-tint, var(--c-line));
  color:var(--c-ink);
}
.pd-preorder-banner > .bi{ color:var(--c-pink); font-size:1.15rem; line-height:1.3; }
/* Prix masque (plan catalogue, lot 4) : texte a la place du montant. */
.product-card__prices--hidden .price--hidden{ font-size:.85rem; font-weight:600; color:var(--c-muted, #6b7280); font-style:italic; }
.pd-prices--hidden .price-main--hidden{ font-size:1.05rem; font-weight:600; color:var(--c-muted, #6b7280); font-style:italic; }
.pd-express__price-note{
  display:flex; align-items:flex-start; gap:.55rem; margin:.25rem 0 .9rem;
  padding:.7rem .9rem; border-radius:var(--r-md, 10px);
  background:var(--c-soft, #f7f7f7); border:1px dashed var(--c-line); color:var(--c-ink); font-size:.92rem;
}
.pd-express__price-note > .bi{ color:var(--c-pink); line-height:1.35; }
.thx-item__total--hidden{ font-style:italic; font-weight:500; color:var(--c-muted, #6b7280); }
/* Commande express desactivee (plan catalogue, lot 5) : quantite + « Ajouter au
   panier » dans la meme rangee que l'express, sans le cadre du formulaire. */
.pd-cartonly{ margin-top:.75rem; }
.pd-cartonly .pd-cartonly__cta .bi{ margin-right:.45rem; }
/* #pdxAddCart est style en bouton SECONDAIRE (contour) par son identifiant :
   ici c'est l'action principale, elle prend l'aspect du bouton principal. */
#pdCartOnly #pdxAddCart{
  background-color:var(--c-primary) !important;
  border-color:var(--c-primary) !important;
  color:#fff !important;
}
#pdCartOnly #pdxAddCart:hover{
  background-color:var(--c-primary-hover) !important;
  border-color:var(--c-primary-hover) !important;
  color:#fff !important;
}
.thx-totals--hidden .thx-line{ justify-content:flex-start; color:var(--c-ink); font-weight:500; }

/* ===== Alerte de disponibilite (fiche d'un produit indisponible) ===== */
.pd-stock-alert{
  margin-top:1rem; padding:1rem; border-radius:var(--r-md, 10px);
  border:1px solid var(--c-line); background:var(--c-surface, #fff);
}
.pd-stock-alert__head{ display:flex; align-items:center; gap:.45rem; color:var(--c-ink); }
.pd-stock-alert__head .bi{ color:var(--c-pink); }
.pd-stock-alert__hint{ color:var(--c-muted); margin:.35rem 0 .75rem; }
.pd-stock-alert__form{ display:grid; gap:.55rem; }
.pd-stock-alert__rule{ color:var(--c-muted); font-size:.78rem; margin-top:-.2rem; }
.pd-stock-alert__msg{ padding:.5rem .7rem; border-radius:var(--r-sm, 6px); }
.pd-stock-alert__msg.is-ok{ background:#ecfdf5; color:#065f46; }
.pd-stock-alert__msg.is-error{ background:#fef2f2; color:#991b1b; }

/* ===== Formulaire de precommande (parcours « Formulaire » choisi dans /cms) ===== */
.pd-preorder-form{
  margin-top:1rem; padding:1rem; border-radius:var(--r-md, 10px);
  border:1px solid var(--c-pink-tint, var(--c-line)); background:var(--c-surface, #fff);
}
.pd-preorder-form__head{ display:flex; align-items:center; gap:.45rem; color:var(--c-ink); }
.pd-preorder-form__head .bi{ color:var(--c-pink); }
.pd-preorder-form__intro{ color:var(--c-muted); margin:.35rem 0 .8rem; }
.pd-preorder-form__grid{ display:grid; grid-template-columns:1fr 1fr; gap:.6rem .75rem; }
.pd-preorder-form__field{ display:flex; flex-direction:column; gap:.25rem; margin:0; font-size:.85rem; font-weight:600; color:var(--c-ink); }
.pd-preorder-form__field--wide{ grid-column:1 / -1; }
.pd-preorder-form__field b{ font-weight:700; }
.pd-preorder-form__field small{ font-weight:400; }
.pd-preorder-form__foot{ display:flex; align-items:flex-end; gap:.75rem; margin-top:.85rem; }
.pd-preorder-form__qty{ display:flex; flex-direction:column; gap:.25rem; margin:0; flex:0 0 96px; font-size:.85rem; font-weight:600; color:var(--c-ink); }
.pd-preorder-form__submit{ flex:1 1 auto; }
.pd-preorder-form__msg{ margin-top:.7rem; padding:.55rem .75rem; border-radius:var(--r-sm, 6px); }
.pd-preorder-form__msg.is-ok{ background:#ecfdf5; color:#065f46; }
.pd-preorder-form__msg.is-ko{ background:#fef2f2; color:#991b1b; }
/* Champ piege contre les robots : hors ecran, jamais affiche au visiteur. */
.pd-hp{ position:absolute !important; left:-9999px !important; width:1px; height:1px; overflow:hidden; }
@media (max-width:575.98px){
  .pd-preorder-form__grid{ grid-template-columns:1fr; }
  .pd-preorder-form__foot{ flex-wrap:wrap; }
  .pd-preorder-form__submit{ flex-basis:100%; }
}

/* Visibilite d'un bloc CMS selon l'appareil (reglage "Afficher sur" dans /cms).
   Le contenu reste dans la page (referencement inchange), seul l'affichage est
   filtre. Meme seuil que le reste du theme : 768px. */
@media (max-width:767.98px){ .pg-only-desktop{display:none !important} }
@media (min-width:768px){ .pg-only-mobile{display:none !important} }

/* ===== Durcissement responsive transversal des blocs CMS =====
   Corrige les cas limites d'affichage sur petits ecrans (debordements,
   infobulles hors cadre, paddings trop genereux). N'affecte que les blocs CMS. */
/* Valeurs longues (fiche technique / horaires / menu prix) : autorise le retour
   a la ligne et empeche le texte de pousser hors de la ligne. */
.cms-specs__value,.cms-hours__val,.cms-mc__price{min-width:0;overflow-wrap:anywhere}
.cms-specs__label,.cms-hours__day,.cms-mc__name{min-width:0;overflow-wrap:anywhere}
/* Titres de blocs superposes sur image : jamais de debordement horizontal. */
.cms-collection__title,.cms-slide__caption,.cms-banner__title,.cms-split__title{overflow-wrap:anywhere}
@media (max-width:575.98px){
  /* Infobulle "shop the look" : elle peut sortir du cadre pres des bords -> on
     la laisse s'enrouler et on borne sa largeur a la fenetre. */
  .cms-shoplook__tip{white-space:normal;max-width:60vw;width:max-content}
  /* Blocs "encadres" centres : on resserre les paddings pour gagner de la place. */
  .cms-booking,.cms-news{padding:1.5rem 1.15rem}
  .cms-countdown{padding:1.5rem 1rem}
  .cms-wa,.cms-promo{padding:1.25rem 1.15rem}
  /* Compte a rebours : cellules un peu plus compactes pour tenir sur une ligne. */
  .cms-countdown__cell{min-width:58px}
  /* Menu prix : sur mobile, nom au-dessus, prix en dessous (les pointilles de
     liaison n'ont plus de sens et cassaient la lecture sur 2 lignes). */
  .cms-mc__dots{display:none}
  /* Barre garanties : icone + titre + texte plus ramasses. */
  .cms-guarantee{padding:1.1rem .7rem}
}

/* ---- Pink & Grey : ajustements composants (barres d'en-tête + footer) ----
   Les sélecteurs ci-dessous (placés après les règles de base, même spécificité)
   neutralisent les tons crème/or résiduels et injectent le rose de marque. */

/* Announcement-bar + topbar mobile : texte pilote depuis /cms (etait fige) */
.announcement-bar,
.topbar-mobile{ color:var(--c-topbar-text); }
.announcement-rot__item,
.announcement-bar__link,
.topbar-mobile__free{ color:var(--c-topbar-text); }
/* Voile décoratif : teinte de la 1ere couleur du degrade (rgba -> triplet RGB) */
.announcement-bar::before{
  background:linear-gradient(90deg, transparent 0, rgba(var(--c-topbar-from-rgb), .10) 50%, transparent 100%);
}
/* Pastille CTA : bordure neutre, hover rose plein */
.announcement-bar__link--cta{ border-color:rgba(255,255,255,.35); }
.announcement-bar__link--cta:hover{ background:var(--c-pink); border-color:var(--c-pink); color:#fff; }
/* Bouton compte (topbar mobile) : fond/bordure teintes de la couleur du bandeau */
.topbar-mobile__account{ background:rgba(var(--c-topbar-from-rgb), .16); border-color:rgba(var(--c-topbar-from-rgb), .45); }

/* Footer : accents de marque en rose (filets, ticks, hover socials) */
.footer-h::after,
.footer-links a::before{ background:var(--c-pink); }
/* hover socials : le fond de base est en !important (l.2119) → !important requis ici */
.footer-socials a:hover{ background:var(--c-pink) !important; border-color:var(--c-pink) !important; color:#fff !important; }
/* Lueurs du logo footer : or → rose discret */
.footer-brand-col::before{ background:radial-gradient(circle, rgba(164,34,107,.10), transparent 65%); }
.footer-logo{ filter:drop-shadow(0 4px 18px rgba(164,34,107,.16)); }
.footer-logo.footer-logo--white{
  filter:brightness(0) invert(1) drop-shadow(0 4px 18px rgba(164,34,107,.16));
  -webkit-filter:brightness(0) invert(1) drop-shadow(0 4px 18px rgba(164,34,107,.16));
}

/* ============================================================================
   PWA — banniere d'installation personnalisee
   ============================================================================ */
/* Bouton flottant, ancre en BAS A GAUCHE : la droite est occupee par les
   toasts (.toast-host) et le bas pleine largeur par la barre d'achat mobile
   de la fiche produit (.pd-sticky-bar, z-index 1030) — d'ou le retrait
   vertical sous 992px pour ne pas la recouvrir. */
.pwa-install{
  position:fixed; left:1rem; bottom:1rem; z-index:1040;
  display:flex; flex-direction:column; align-items:flex-start; gap:.5rem;
  transform:translateY(140%); opacity:0;
  transition:transform .35s cubic-bezier(.2,.7,.2,1), opacity .3s ease;
}
.pwa-install[hidden]{ display:none !important; }
.pwa-install.is-visible{ transform:translateY(0); opacity:1; }

.pwa-install__fab{
  display:inline-flex; align-items:center; gap:.5rem;
  border:0; border-radius:999px; cursor:pointer;
  background:var(--c-ink); color:#fff;
  font-weight:700; font-size:.85rem; padding:.7rem 1.05rem;
  box-shadow:0 8px 24px rgba(0,0,0,.28);
  transition:transform .18s ease, box-shadow .18s ease;
}
.pwa-install__fab:hover{ transform:translateY(-2px); box-shadow:0 12px 30px rgba(0,0,0,.34); }
.pwa-install__fab svg{ flex:0 0 auto; }

/* Bulle explicative : ouverte au clic sur iOS (pas d'API d'installation), et
   disponible partout comme repli si l'invite native ne se declenche pas. */
.pwa-install__bubble{
  position:relative;
  width:min(320px, calc(100vw - 2rem));
  display:flex; align-items:center; gap:.7rem;
  padding:.75rem .85rem;
  background:var(--c-ink); color:#fff;
  border:1px solid rgba(255,255,255,.12);
  border-radius:14px; box-shadow:0 12px 34px rgba(0,0,0,.35);
}
.pwa-install__bubble[hidden]{ display:none !important; }
.pwa-install__icon{ width:40px; height:40px; border-radius:10px; flex:0 0 auto; background:#fff; }
.pwa-install__txt{ display:flex; flex-direction:column; min-width:0; flex:1; line-height:1.25; }
.pwa-install__title{ font-size:.9rem; font-weight:700; }
.pwa-install__sub{ font-size:.76rem; opacity:.75; }
.pwa-install__btn{
  flex:0 0 auto; border:0; border-radius:999px; cursor:pointer;
  background:var(--c-pink, #A4226B); color:#fff;
  font-weight:700; font-size:.82rem; padding:.5rem 1rem;
  transition:filter .2s ease;
}
.pwa-install__btn:hover{ filter:brightness(1.1); }
.pwa-install__btn[hidden]{ display:none !important; }
.pwa-install__close{
  position:absolute; top:2px; right:6px;
  border:0; background:transparent; color:#fff; opacity:.55;
  font-size:1.35rem; line-height:1; cursor:pointer; padding:0 .15rem;
}
.pwa-install__close:hover{ opacity:1; }

@media (max-width:991.98px){
  /* Au-dessus de la barre d'achat mobile de la fiche produit */
  .pwa-install{ bottom:calc(4.5rem + env(safe-area-inset-bottom, 0px)); }
}
@media (max-width:480px){
  .pwa-install{ left:.75rem; }
  .pwa-install__fab{ padding:.62rem .85rem; font-size:.8rem; }
  .pwa-install__fab-lbl{ display:none; }   /* pastille seule : moins d'emprise */
  .pwa-install__title{ font-size:.86rem; }
  .pwa-install__sub{ font-size:.72rem; }
}

/* ===== Packs d'offre (offres quantite) — pilotes depuis Follow ===== */
.pdx-packs{ margin:.65rem 0 1.1rem; }
.pdx-offers__head{ display:flex; flex-direction:column; gap:3px; margin-bottom:.7rem; }
.pdx-offers__badge{
  display:inline-flex; align-items:center; gap:7px; align-self:flex-start;
  font-size:.82rem; font-weight:800; letter-spacing:.01em; color:var(--c-ink);
  padding:5px 11px 5px 9px; border-radius:999px;
  background:linear-gradient(135deg,var(--c-pink-soft),var(--c-pink-tint)); border:1px solid rgba(200,169,126,.5);
}
.pdx-offers__badge svg{ color:var(--c-accent,#c8a97e); }
.pdx-offers__hint{ font-size:.76rem; line-height:1.4; color:var(--c-ink-2,#6b6257); }
.pdx-offers__list{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(148px,1fr));
  gap:.6rem; padding-top:11px;
}
.pdx-offer{
  position:relative; display:flex; flex-direction:column; gap:5px;
  padding:.7rem .75rem .8rem; border:1.6px solid var(--c-border,#e6e0d8); border-radius:14px;
  background:#fff; cursor:pointer; text-align:left; font-family:inherit;
  transition:border-color .15s, box-shadow .15s, transform .12s, background .15s;
}
.pdx-offer:hover{ border-color:var(--c-accent,#c8a97e); transform:translateY(-2px); box-shadow:0 8px 20px rgba(42,37,28,.08); }
.pdx-offer.is-best{ border-color:var(--c-accent,#c8a97e); background:linear-gradient(180deg,var(--c-soft),#fff 60%); }
.pdx-offer.is-active{ border-color:var(--c-ink); box-shadow:0 0 0 3px rgba(200,169,126,.22); }
.pdx-offer__ribbon{
  position:absolute; top:-11px; left:50%; transform:translateX(-50%); white-space:nowrap;
  font-size:.63rem; font-weight:800; letter-spacing:.03em; text-transform:uppercase;
  color:#fff; padding:3px 11px; border-radius:999px;
  background:linear-gradient(135deg,var(--c-accent),var(--c-accent-dk)); box-shadow:0 4px 10px rgba(176,137,95,.45);
}
.pdx-offer__head{ display:flex; align-items:center; justify-content:space-between; gap:6px; }
.pdx-offer__qty{ font-size:.82rem; color:var(--c-ink-2,#6b6257); font-weight:600; }
.pdx-offer__qty b{ font-size:1.05rem; color:var(--c-ink); font-weight:800; }
.pdx-offer__pct{
  font-size:.72rem; font-weight:800; color:#1a7f4b;
  background:#e7f5ec; padding:2px 7px; border-radius:999px;
}
.pdx-offer__prices{ display:flex; align-items:baseline; flex-wrap:wrap; gap:6px; }
.pdx-offer__now{ font-size:1.18rem; font-weight:800; color:var(--c-ink); line-height:1.1; }
.pdx-offer__old{ font-size:.8rem; color:var(--c-muted); text-decoration:line-through; }
.pdx-offer__unit{ font-size:.72rem; color:var(--c-ink-2,#6b6257); }
.pdx-offer__save{ font-size:.75rem; color:#1a7f4b; font-weight:600; }
.pdx-offer__save b{ font-weight:800; }
.pdx-offer__free{ display:inline-flex; align-items:center; gap:5px; font-size:.72rem; font-weight:700; color:#0e7490; }
.pdx-offer.is-active::after{
  content:"\2713"; position:absolute; top:8px; right:9px;
  width:18px; height:18px; line-height:18px; text-align:center; font-size:11px; font-weight:700;
  background:var(--c-ink); color:#fff; border-radius:50%;
}
.pdx-offer.is-best.is-active::after{ top:9px; right:9px; }

/* ===== CMS — blocs contenu (bandeau / avantages) + grille categories ===== */
/* Grille categories (layout "editorial") : reutilise la carte eprouvee du slider */
.cms-catgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem}
@media (min-width:768px){ .cms-catgrid{grid-template-columns:repeat(3,1fr)} }
@media (min-width:992px){ .cms-catgrid{grid-template-columns:repeat(4,1fr)} }
.cms-catgrid .cat-slider__card{flex:initial;width:auto;min-width:0}

/* Barre d'avantages (reassurance) */
.cms-benefits{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:1rem}
@media (min-width:768px){ .cms-benefits{grid-template-columns:repeat(4,1fr)} }
.cms-benefit{display:flex;align-items:flex-start;gap:.8rem;padding:1rem 1.05rem;background:#fff;border:1px solid var(--c-line,#e6e0d8);border-radius:var(--r-md,12px)}
.section.bg-surface .cms-benefit{background:var(--c-surface,#f7f3ee)}
.cms-benefit__icon{flex:0 0 auto;width:44px;height:44px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:var(--c-surface,#f7f3ee);color:var(--c-accent-dk,#a97e4f)}
.section.bg-surface .cms-benefit__icon{background:#fff}
.cms-benefit__icon svg{width:22px;height:22px}
.cms-benefit__body{min-width:0}
.cms-benefit__title{font-size:.95rem;font-weight:600;margin:0 0 .15rem;color:var(--c-ink)}
.cms-benefit__text{font-size:.82rem;margin:0;color:var(--c-ink-2,#6b6257);line-height:1.35}

/* Bandeau promo (image pleine largeur + texte + bouton) */
.cms-banner{position:relative;display:block;overflow:hidden;border-radius:var(--r-lg,18px);background:var(--c-ink);color:#fff;text-decoration:none;isolation:isolate;box-shadow:var(--sh-1);min-height:260px}
.cms-banner--compact{min-height:180px}
.cms-banner--tall{min-height:420px}
.cms-banner__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;z-index:0}
.cms-banner__scrim{position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(20,17,13,.9) 0%,rgba(20,17,13,.4) 55%,rgba(20,17,13,0) 100%)}
.cms-banner--right .cms-banner__scrim{background:linear-gradient(270deg,rgba(20,17,13,.9) 0%,rgba(20,17,13,.4) 55%,rgba(20,17,13,0) 100%)}
.cms-banner--center .cms-banner__scrim{background:linear-gradient(0deg,rgba(20,17,13,.72) 0%,rgba(20,17,13,.4) 60%,rgba(20,17,13,.28) 100%)}
.cms-banner__inner{position:relative;z-index:2;max-width:560px;padding:2.2rem 2.4rem;display:flex;flex-direction:column;align-items:flex-start;gap:.55rem;justify-content:center;min-height:260px}
.cms-banner--tall .cms-banner__inner{min-height:420px}
.cms-banner--compact .cms-banner__inner{min-height:180px}
.cms-banner--center .cms-banner__inner{margin:0 auto;align-items:center;text-align:center}
.cms-banner--right .cms-banner__inner{margin-left:auto}
.cms-banner__eyebrow{font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;font-weight:600;color:var(--c-accent,#c8a97e)}
.cms-banner__title{font-family:var(--ff-display,inherit);font-weight:700;font-size:clamp(1.5rem,3vw,2.2rem);line-height:1.1;margin:0;color:#fff}
.cms-banner__text{font-size:1rem;margin:0;color:rgba(255,255,255,.9);line-height:1.4;max-width:46ch}
.cms-banner__cta{margin-top:.5rem}
@media (max-width:575.98px){
  .cms-banner__inner{padding:1.5rem 1.4rem;max-width:100%;align-items:flex-start;text-align:left}
  .cms-banner--center .cms-banner__inner{align-items:center;text-align:center}
  .cms-banner__scrim,
  .cms-banner--right .cms-banner__scrim,
  .cms-banner--center .cms-banner__scrim{background:linear-gradient(0deg,rgba(20,17,13,.82) 0%,rgba(20,17,13,.45) 70%,rgba(20,17,13,.25) 100%)}
}

/* ===== CMS — ticker / compte a rebours / avis / produit a la une / bandeau double ===== */
/* Bandeau d'annonce defilant */
.cms-ticker{overflow:hidden;background:var(--c-ink);color:#fff;padding:.6rem 0}
.cms-ticker.bg-surface{background:var(--c-accent-dk,#a97e4f)}
.cms-ticker__track{display:inline-flex;align-items:center;white-space:nowrap;will-change:transform;animation:cms-ticker-scroll 28s linear infinite}
.cms-ticker--slow .cms-ticker__track{animation-duration:44s}
.cms-ticker--fast .cms-ticker__track{animation-duration:16s}
.cms-ticker:hover .cms-ticker__track{animation-play-state:paused}
.cms-ticker__item{font-size:.85rem;font-weight:600;letter-spacing:.02em;padding:0 1rem;text-transform:uppercase}
.cms-ticker__sep{opacity:.55;font-size:.6rem}
@keyframes cms-ticker-scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* Compte a rebours */
.cms-countdown{text-align:center;background:var(--c-ink);color:#fff;border-radius:var(--r-lg,18px);padding:2rem 1.25rem;box-shadow:var(--sh-1)}
.cms-countdown__eyebrow{display:inline-block;font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--c-accent,#c8a97e);font-weight:600;margin-bottom:.35rem}
.cms-countdown__title{font-family:var(--ff-display,inherit);font-weight:700;font-size:clamp(1.4rem,3vw,2rem);margin:0 0 .3rem;color:#fff}
.cms-countdown__lede{font-size:.95rem;color:rgba(255,255,255,.82);margin:0 0 1.1rem}
.cms-countdown__timer{display:inline-flex;gap:.6rem;justify-content:center;flex-wrap:wrap}
.cms-countdown__cell{min-width:66px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);border-radius:12px;padding:.6rem .4rem}
.cms-countdown__num{display:block;font-size:1.7rem;font-weight:800;line-height:1;font-variant-numeric:tabular-nums}
.cms-countdown__lbl{display:block;font-size:.66rem;text-transform:uppercase;letter-spacing:.08em;color:rgba(255,255,255,.7);margin-top:.35rem}
.cms-countdown__expired{font-size:1.1rem;font-weight:700;color:var(--c-accent,#c8a97e)}
.cms-countdown__cta{margin-top:1.2rem}

/* Avis clients */
.cms-testis{display:grid;grid-template-columns:1fr;gap:1rem}
@media (min-width:640px){ .cms-testis{grid-template-columns:repeat(2,1fr)} }
@media (min-width:992px){ .cms-testis{grid-template-columns:repeat(3,1fr)} }
.cms-testi{margin:0;background:#fff;border:1px solid var(--c-line,#e6e0d8);border-radius:var(--r-md,12px);padding:1.25rem}
.section.bg-surface .cms-testi{background:var(--c-surface,#f7f3ee)}
.cms-testi__stars{font-size:.95rem;letter-spacing:2px;margin-bottom:.5rem}
.cms-testi__stars span{color:var(--c-line)}
.cms-testi__stars span.is-on{color:#e6b800}
.cms-testi__text{margin:0 0 .6rem;font-size:.92rem;line-height:1.5;color:var(--c-ink);font-style:italic}
.cms-testi__name{font-size:.82rem;font-weight:700;color:var(--c-ink-2,#6b6257)}
.cms-testi__name::before{content:"— "}

/* Produit a la une */
.cms-featured{display:grid;grid-template-columns:1fr;gap:1.25rem;align-items:center}
@media (min-width:768px){ .cms-featured{grid-template-columns:1fr 1fr;gap:2rem} }
.cms-featured__media{display:block;border-radius:var(--r-lg,18px);overflow:hidden;background:#fff;border:1px solid var(--c-line,#e6e0d8);aspect-ratio:1/1}
.cms-featured__media img{width:100%;height:100%;object-fit:cover;object-position:center;transition:transform .5s ease}
.cms-featured__media:hover img{transform:scale(1.04)}
.cms-featured__title{font-family:var(--ff-display,inherit);font-weight:700;font-size:clamp(1.4rem,3vw,2.1rem);line-height:1.1;margin:.2rem 0 .5rem;color:var(--c-ink)}
.cms-featured__price{font-size:1.3rem;font-weight:700;color:var(--c-ink);margin-bottom:.6rem}
.cms-featured__old{font-size:.95rem;color:var(--c-muted);text-decoration:line-through;font-weight:500;margin-left:.4rem}
.cms-featured__desc{font-size:.95rem;line-height:1.55;color:var(--c-ink-2,#6b6257);margin:0 0 1.1rem}
.cms-featured__cta{align-self:flex-start}

/* Bandeau double */
.cms-split{display:grid;grid-template-columns:1fr;gap:1rem}
@media (min-width:768px){ .cms-split{grid-template-columns:1fr 1fr} }
.cms-split__half{position:relative;display:block;overflow:hidden;border-radius:var(--r-lg,18px);min-height:240px;background:var(--c-ink);color:#fff;text-decoration:none;isolation:isolate;box-shadow:var(--sh-1)}
.cms-split__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;z-index:0;transition:transform .5s ease}
.cms-split__half:hover .cms-split__img{transform:scale(1.05)}
.cms-split__scrim{position:absolute;inset:0;z-index:1;background:linear-gradient(0deg,rgba(20,17,13,.75) 0%,rgba(20,17,13,.3) 60%,rgba(20,17,13,.12) 100%)}
.cms-split__inner{position:relative;z-index:2;height:100%;min-height:240px;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-end;gap:.4rem;padding:1.5rem 1.6rem}
.cms-split__title{font-family:var(--ff-display,inherit);font-weight:700;font-size:clamp(1.25rem,2.4vw,1.7rem);margin:0;color:#fff}
.cms-split__text{font-size:.9rem;margin:0;color:rgba(255,255,255,.9)}
.cms-split__cta{display:inline-flex;align-items:center;gap:6px;margin-top:.3rem;font-size:.82rem;font-weight:700;color:#fff;border-bottom:1px solid rgba(255,255,255,.5);padding-bottom:2px}

/* ===== CMS — FAQ / etapes / video / texte libre ===== */
/* FAQ (accordeon natif <details>) */
.cms-faq{max-width:820px;margin:0 auto}
.cms-faq__item{border:1px solid var(--c-line,#e6e0d8);border-radius:var(--r-md,12px);margin-bottom:.6rem;background:#fff;overflow:hidden}
.section.bg-surface .cms-faq__item{background:var(--c-surface,#f7f3ee)}
.cms-faq__q{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1rem 1.15rem;font-weight:600;font-size:.98rem;color:var(--c-ink)}
.cms-faq__q::-webkit-details-marker{display:none}
.cms-faq__ico{flex:0 0 auto;width:18px;height:18px;position:relative}
.cms-faq__ico::before,.cms-faq__ico::after{content:"";position:absolute;background:var(--c-accent-dk,#a97e4f);border-radius:2px;transition:transform .25s ease}
.cms-faq__ico::before{top:8px;left:0;width:18px;height:2px}
.cms-faq__ico::after{top:0;left:8px;width:2px;height:18px}
.cms-faq__item[open] .cms-faq__ico::after{transform:scaleY(0)}
.cms-faq__a{padding:0 1.15rem 1.1rem;font-size:.92rem;line-height:1.55;color:var(--c-ink-2,#6b6257)}

/* Etapes (comment commander) */
.cms-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr;gap:1.4rem 1rem}
@media (min-width:640px){ .cms-steps{grid-template-columns:repeat(2,1fr)} }
@media (min-width:900px){ .cms-steps{grid-template-columns:repeat(4,1fr)} }
.cms-step{position:relative;text-align:center;padding:1.6rem 1rem 1.25rem;background:#fff;border:1px solid var(--c-line,#e6e0d8);border-radius:var(--r-md,12px)}
.section.bg-surface .cms-step{background:var(--c-surface,#f7f3ee)}
.cms-step__num{position:absolute;top:-14px;left:50%;transform:translateX(-50%);width:28px;height:28px;border-radius:50%;background:var(--c-ink);color:#fff;font-size:.85rem;font-weight:800;display:flex;align-items:center;justify-content:center}
.cms-step__icon{display:inline-flex;color:var(--c-accent-dk,#a97e4f);margin:.4rem 0 .5rem}
.cms-step__icon svg{width:30px;height:30px}
.cms-step__title{font-size:1rem;font-weight:700;margin:0 0 .3rem;color:var(--c-ink)}
.cms-step__text{font-size:.85rem;line-height:1.45;margin:0;color:var(--c-ink-2,#6b6257)}

/* Video responsive (ratio via padding-top) */
.cms-video{position:relative;width:100%;border-radius:var(--r-lg,18px);overflow:hidden;background:#000;box-shadow:var(--sh-1)}
.cms-video::before{content:"";display:block;padding-top:56.25%}
.cms-video--4-3::before{padding-top:75%}
.cms-video--1-1::before{padding-top:100%}
.cms-video--9-16::before{padding-top:177.78%}
.cms-video--9-16{max-width:420px;margin:0 auto}
.cms-video iframe,.cms-video video{position:absolute;inset:0;width:100%;height:100%;border:0}

/* Texte libre */
.cms-richtext{max-width:820px;margin:0 auto;font-size:1rem;line-height:1.65;color:var(--c-ink)}
.cms-richtext h1,.cms-richtext h2,.cms-richtext h3{font-family:var(--ff-display,inherit);color:var(--c-ink);margin:1.2em 0 .5em;line-height:1.2}
.cms-richtext p{margin:0 0 1em}
.cms-richtext a{color:var(--c-accent-dk,#a97e4f)}
.cms-richtext img{max-width:100%;height:auto;border-radius:var(--r-md,12px)}
.cms-richtext ul,.cms-richtext ol{margin:0 0 1em 1.2em}

/* Galerie / Lookbook */
.cms-gallery{display:grid;grid-template-columns:repeat(2,1fr);gap:.6rem}
@media (min-width:640px){ .cms-gallery{grid-template-columns:repeat(3,1fr)} }
@media (min-width:992px){ .cms-gallery{grid-template-columns:repeat(4,1fr)} }
.cms-gallery__item{display:block;position:relative;overflow:hidden;border-radius:var(--r-md,12px);aspect-ratio:1/1;background:var(--c-surface,#f7f3ee)}
.cms-gallery__item img{width:100%;height:100%;object-fit:cover;object-position:center;transition:transform .5s ease}
a.cms-gallery__item:hover img{transform:scale(1.06)}

/* Newsletter */
.cms-news{max-width:640px;margin:0 auto;text-align:center;background:var(--c-surface,#f7f3ee);border:1px solid var(--c-line,#e6e0d8);border-radius:var(--r-lg,18px);padding:2rem 1.5rem}
.section.bg-surface .cms-news{background:#fff}
.cms-news__title{font-family:var(--ff-display,inherit);font-weight:700;font-size:clamp(1.3rem,2.6vw,1.8rem);margin:.2rem 0 .4rem;color:var(--c-ink)}
.cms-news__lede{font-size:.95rem;color:var(--c-ink-2,#6b6257);margin:0 0 1.1rem}
.cms-news__form{display:flex;gap:.5rem;max-width:440px;margin:0 auto;flex-wrap:wrap}
.cms-news__input{flex:1 1 200px;min-width:0;padding:.7rem 1rem;border:1px solid var(--c-line,#e6e0d8);border-radius:var(--r-pill,999px);font-size:.95rem;background:#fff}
.cms-news__input:focus{outline:none;border-color:var(--c-accent,#c8a97e)}
.cms-news__btn{flex:0 0 auto;white-space:nowrap}
.cms-news__msg{margin-top:.7rem;font-size:.88rem;font-weight:600}
.cms-news__msg.is-ok{color:#1a7f4b}
.cms-news__msg.is-error{color:#c0392b}

/* ===== CMS — confiance / WhatsApp / onglets / stats ===== */
/* Bande de confiance / logos */
.cms-trust{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:1.5rem 2.5rem}
.cms-trust__item{display:inline-flex;align-items:center;justify-content:center;height:54px}
.cms-trust__item img{max-height:54px;max-width:140px;width:auto;object-fit:contain;filter:grayscale(1);opacity:.7;transition:filter .3s ease,opacity .3s ease}
a.cms-trust__item:hover img{filter:grayscale(0);opacity:1}

/* CTA WhatsApp */
.cms-wa{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1.2rem;background:linear-gradient(135deg,var(--c-soft),var(--c-soft-2));border:1px solid var(--c-line,#e6e0d8);border-radius:var(--r-lg,18px);padding:1.6rem 1.8rem}
.section.bg-surface .cms-wa{background:#fff}
.cms-wa__body{min-width:0;flex:1 1 260px}
.cms-wa__title{font-family:var(--ff-display,inherit);font-weight:700;font-size:clamp(1.2rem,2.4vw,1.6rem);margin:0 0 .25rem;color:var(--c-ink)}
.cms-wa__lede{font-size:.92rem;color:var(--c-ink-2,#6b6257);margin:0}
.cms-wa__btn{flex:0 0 auto;display:inline-flex;align-items:center;gap:.6rem;background:#25d366;color:#fff;font-weight:700;font-size:1rem;text-decoration:none;padding:.75rem 1.4rem;border-radius:var(--r-pill,999px);box-shadow:0 6px 18px rgba(37,211,102,.35);transition:transform .15s ease,box-shadow .15s ease}
.cms-wa__btn:hover{color:#fff;transform:translateY(-2px);box-shadow:0 10px 24px rgba(37,211,102,.45)}

/* Onglets produits */
.cms-tabs__nav{display:flex;flex-wrap:wrap;gap:.4rem;margin-bottom:1.2rem;border-bottom:1px solid var(--c-line,#e6e0d8)}
.cms-tabs__btn{border:0;background:transparent;font-family:inherit;font-size:.95rem;font-weight:600;color:var(--c-ink-2,#6b6257);padding:.6rem 1rem;cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px;transition:color .2s}
.cms-tabs__btn:hover{color:var(--c-ink)}
.cms-tabs__btn.is-active{color:var(--c-ink);border-bottom-color:var(--c-accent-dk,#a97e4f)}
.cms-tabs__panel{display:none}
.cms-tabs__panel.is-active{display:block;animation:cms-fadein .3s ease}
@keyframes cms-fadein{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* Statistiques animees */
.cms-stats{display:grid;grid-template-columns:repeat(2,1fr);gap:1.2rem;text-align:center}
@media (min-width:768px){ .cms-stats{grid-template-columns:repeat(4,1fr)} }
.cms-stat__num{font-family:var(--ff-display,inherit);font-weight:800;font-size:clamp(1.8rem,4vw,2.6rem);line-height:1;color:var(--c-ink);font-variant-numeric:tabular-nums}
.cms-stat__suffix{color:var(--c-accent-dk,#a97e4f)}
.cms-stat__label{margin-top:.4rem;font-size:.85rem;color:var(--c-ink-2,#6b6257);font-weight:500}

/* Vente Flash (produits + compte a rebours) */
.cms-flash__head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:1.2rem}
.cms-flash__badge{display:inline-block;background:#e2554e;color:#fff;font-size:.72rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase;padding:4px 10px;border-radius:999px}
.cms-flash__title{font-family:var(--ff-display,inherit);font-weight:700;font-size:clamp(1.3rem,2.6vw,1.9rem);margin:.4rem 0 .1rem;color:var(--c-ink)}
.cms-flash__lede{font-size:.9rem;color:var(--c-ink-2,#6b6257);margin:0}
.cms-flash__more{text-align:center;margin-top:1.4rem}
/* Compte a rebours variante "inline" (en-tete compact, pas le grand bloc sombre) */
.cms-countdown--inline{background:transparent;box-shadow:none;padding:0;border-radius:0;text-align:right}
.cms-countdown--inline .cms-countdown__timer{gap:.4rem}
.cms-countdown--inline .cms-countdown__cell{min-width:52px;background:var(--c-ink);color:#fff;padding:.45rem .3rem;border:0}
.cms-countdown--inline .cms-countdown__num{font-size:1.25rem}
.cms-countdown--inline .cms-countdown__lbl{color:rgba(255,255,255,.7);font-size:.6rem;margin-top:.2rem}
.cms-countdown--inline .cms-countdown__expired{color:#e2554e;font-size:1rem}

/* Code promo (ticket copiable) */
.cms-promo{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1.2rem;background:repeating-linear-gradient(135deg,#fff,#fff 12px,var(--c-soft) 12px,var(--c-soft) 24px);border:2px dashed var(--c-accent,#c8a97e);border-radius:var(--r-lg,18px);padding:1.4rem 1.6rem}
.section.bg-surface .cms-promo{background:#fff}
.cms-promo__info{min-width:0;flex:1 1 240px}
.cms-promo__eyebrow{display:inline-block;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--c-accent-dk,#a97e4f)}
.cms-promo__title{font-family:var(--ff-display,inherit);font-weight:700;font-size:clamp(1.1rem,2.2vw,1.5rem);margin:.2rem 0;color:var(--c-ink)}
.cms-promo__sub{font-size:.9rem;color:var(--c-ink-2,#6b6257);margin:0}
.cms-promo__exp{color:#c0392b;font-weight:600}
.cms-promo__codewrap{display:inline-flex;align-items:center;gap:.7rem;flex-wrap:wrap}
.cms-promo__badge{background:#e2554e;color:#fff;font-weight:800;font-size:.9rem;padding:.35rem .7rem;border-radius:8px}
.cms-promo__code{display:inline-flex;align-items:center;gap:.7rem;background:var(--c-ink);color:#fff;border:0;border-radius:10px;padding:.6rem .5rem .6rem 1rem;cursor:pointer;font-family:inherit}
.cms-promo__code-val{font-size:1.1rem;font-weight:800;letter-spacing:.06em}
.cms-promo__copy{font-size:.78rem;font-weight:700;background:rgba(255,255,255,.16);padding:.35rem .7rem;border-radius:7px;transition:background .2s}
.cms-promo__code:hover .cms-promo__copy{background:rgba(255,255,255,.28)}
.cms-promo__code.is-copied .cms-promo__copy{background:#22c55e;color:#fff}

/* Reseaux sociaux */
.cms-social{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:.8rem}
.cms-social__item{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;background:var(--c-surface,#f7f3ee);color:var(--c-ink);border:1px solid var(--c-line,#e6e0d8);transition:transform .2s,background .2s,color .2s}
.cms-social__item:hover{transform:translateY(-3px);background:var(--c-ink);color:#fff}

/* Annonce fermable */
.cms-announce{font-size:.88rem;font-weight:600;color:#fff;background:var(--c-ink)}
.cms-announce--accent{background:var(--c-accent-dk,#a97e4f)}
.cms-announce--red{background:#c0392b}
.cms-announce--green{background:#1a7f4b}
.cms-announce__inner{display:flex;align-items:center;justify-content:center;gap:1rem;padding:.6rem 2.4rem;position:relative;text-align:center}
.cms-announce__text{flex:1 1 auto}
.cms-announce__link{color:#fff;text-decoration:underline;font-weight:700;margin-left:.3rem}
.cms-announce__close{position:absolute;right:.6rem;top:50%;transform:translateY(-50%);background:none;border:0;color:rgba(255,255,255,.85);font-size:22px;line-height:1;cursor:pointer;padding:0 .3rem}
.cms-announce__close:hover{color:#fff}

/* Separateur */
.cms-sep{display:flex;align-items:center;justify-content:center}
.cms-sep--sm{margin:.6rem 0}
.cms-sep--md{margin:1.4rem 0}
.cms-sep--lg{margin:2.6rem 0}
.cms-sep--line{border-top:1px solid var(--c-line,#e6e0d8)}
.cms-sep__mark{color:var(--c-accent,#c8a97e);font-size:15px;letter-spacing:1px}
.cms-sep--diamond::before,.cms-sep--diamond::after{content:"";flex:1;max-width:130px;height:1px;background:var(--c-line,#e6e0d8);margin:0 14px}

/* Produits recemment vus */
.cms-recent{display:grid;grid-template-columns:repeat(2,1fr);gap:.8rem}
@media (min-width:640px){ .cms-recent{grid-template-columns:repeat(3,1fr)} }
@media (min-width:992px){ .cms-recent{grid-template-columns:repeat(5,1fr)} }
.cms-recent__card{display:flex;flex-direction:column;text-decoration:none;color:var(--c-ink)}
.cms-recent__media{display:block;aspect-ratio:1/1;border-radius:var(--r-md,12px);overflow:hidden;background:var(--c-surface,#f7f3ee);border:1px solid var(--c-line,#e6e0d8)}
.cms-recent__media img{width:100%;height:100%;object-fit:cover;transition:transform .35s}
.cms-recent__card:hover .cms-recent__media img{transform:scale(1.05)}
.cms-recent__name{font-size:.82rem;margin-top:.4rem;line-height:1.3;max-height:2.6em;overflow:hidden}
.cms-recent__price{font-size:.9rem;font-weight:700;margin-top:.15rem}

/* Avant / apres */
.cms-ba{position:relative;max-width:820px;margin:0 auto;border-radius:var(--r-lg,18px);overflow:hidden;box-shadow:var(--sh-1);line-height:0}
.cms-ba__img{display:block;width:100%;height:auto}
.cms-ba__img--before{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;will-change:clip-path}
.cms-ba__handle{position:absolute;top:0;bottom:0;width:2px;background:#fff;transform:translateX(-50%);pointer-events:none;box-shadow:0 0 0 1px rgba(0,0,0,.12)}
.cms-ba__handle span{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:34px;height:34px;border-radius:50%;background:#fff;box-shadow:0 2px 8px rgba(0,0,0,.25)}
.cms-ba__range{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize}
.cms-ba__lbl{position:absolute;bottom:12px;font-size:.72rem;font-weight:700;color:#fff;background:rgba(20,17,13,.6);padding:3px 9px;border-radius:999px;line-height:1}
.cms-ba__lbl--b{left:12px}
.cms-ba__lbl--a{right:12px}

/* Achetez ensemble */
.cms-bundle{display:flex;flex-wrap:wrap;align-items:center;gap:1.5rem;justify-content:space-between;background:var(--c-surface,#f7f3ee);border:1px solid var(--c-line,#e6e0d8);border-radius:var(--r-lg,18px);padding:1.4rem}
.section.bg-surface .cms-bundle{background:#fff}
.cms-bundle__items{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;flex:1 1 auto}
.cms-bundle__plus{font-size:1.4rem;font-weight:300;color:var(--c-ink-2,#6b6257)}
.cms-bundle__prod{display:flex;flex-direction:column;align-items:center;text-align:center;text-decoration:none;color:var(--c-ink);width:110px}
.cms-bundle__media{display:block;width:100px;height:100px;border-radius:var(--r-md,12px);overflow:hidden;background:#fff;border:1px solid var(--c-line,#e6e0d8)}
.cms-bundle__media img{width:100%;height:100%;object-fit:cover}
.cms-bundle__name{font-size:.75rem;margin-top:.35rem;line-height:1.25;max-height:2.5em;overflow:hidden}
.cms-bundle__price{font-size:.82rem;font-weight:700;margin-top:.1rem}
.cms-bundle__side{flex:0 0 auto;text-align:center}
.cms-bundle__total{margin-bottom:.6rem}
.cms-bundle__total span{display:block;font-size:.75rem;color:var(--c-ink-2,#6b6257)}
.cms-bundle__total strong{font-size:1.4rem;color:var(--c-ink)}

/* Compte a rebours de livraison */
.cms-dcd{display:flex;align-items:center;gap:.7rem;justify-content:center;background:#eafaf1;border:1px solid #b7e4c7;color:#166534;border-radius:var(--r-md,12px);padding:.8rem 1.2rem;font-weight:600;font-size:.95rem;text-align:center;flex-wrap:wrap}
.cms-dcd__icon{color:#22a35a;flex:0 0 auto}

/* ============================================================================
   Mega-menu premium — menu « header » pilote depuis /cms (3 niveaux)
   ----------------------------------------------------------------------------
   Uniquement les jetons du theme (--c-pink*, --c-ink*, --c-line, --ff-*) : la
   palette reglee dans /cms s'applique d'elle-meme.
   L'ouverture au survol est en CSS, avec des delais d'intention : 80 ms avant
   d'ouvrir (un simple passage de souris n'ouvre rien), 120 ms avant le fondu de
   fermeture. Fonctionne sans JS. Attention : ce fondu ne garde PAS le panneau atteignable :
   pointer-events bascule a none des que l'item n'est plus survole. C'est shop.js
   qui le garde ouvert 350 ms apres la sortie (diagonale, espace sous le menu) et
   pose un pont (.mm-pont) de l'item au panneau. Il ajoute aussi Echap, le
   tactile, aria-expanded et le voile de page.
   Classes neuves (mm-*) : les anciennes regles .mega* restent sans effet ici.
   ============================================================================ */
.site-header .bar-main{ position:relative; }
.nav-top-list > li.has-mega{ position:static; }

/* Declencheur : le chevron pivote a l'ouverture */
.nav-top-list > li[data-mm] > .mm-trigger::after{ transition:transform .25s ease, border-color .2s ease; }
.nav-top-list > li[data-mm]:hover > .mm-trigger::after,
.nav-top-list > li[data-mm].is-open > .mm-trigger::after{ transform:rotate(225deg) translate(-2px,-2px); border-color:var(--c-pink); }
.nav-top-list > li[data-mm]:hover > .mm-trigger,
.nav-top-list > li[data-mm].is-open > .mm-trigger{ color:var(--c-pink); }

/* Etats communs panneau / deroulant */
.mm-panel, .mm-drop{
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .18s ease .12s, transform .24s ease .12s, visibility 0s linear .36s;
}
li[data-mm]:hover > .mm-panel, li[data-mm].is-open > .mm-panel, li[data-mm]:focus-within > .mm-panel,
li[data-mm]:hover > .mm-drop,  li[data-mm].is-open > .mm-drop,  li[data-mm]:focus-within > .mm-drop{
  opacity:1; visibility:visible; pointer-events:auto;
  transition:opacity .22s ease .08s, transform .3s cubic-bezier(.2,.7,.2,1) .08s, visibility 0s linear .08s;
}
/* Echap : ferme meme si la souris est encore dessus (retire au prochain survol) */
li[data-mm].mm-suppressed > .mm-panel, li[data-mm].mm-suppressed > .mm-drop{
  opacity:0 !important; visibility:hidden !important; pointer-events:none !important;
}

/* ---- Grand panneau (pleine largeur, sous la barre) ---- */
.mm-panel{
  position:absolute; left:0; right:0; top:100%; z-index:30;
  background:var(--c-surface, #fff);
  border-top:1px solid var(--c-line);
  box-shadow:0 28px 56px -18px rgba(21,18,13,.18), 0 2px 6px rgba(21,18,13,.04);
  transform:translateY(-8px);
}
li[data-mm]:hover > .mm-panel, li[data-mm].is-open > .mm-panel, li[data-mm]:focus-within > .mm-panel{ transform:none; }
/* Filet de marque qui se deploie a l'ouverture */
.mm-panel::before{
  content:""; position:absolute; left:0; right:0; top:-1px; height:2px;
  background:linear-gradient(90deg, var(--c-pink), var(--c-pink-tint, #F2D2E2) 60%, transparent);
  transform:scaleX(0); transform-origin:left center;
  transition:transform .6s cubic-bezier(.2,.7,.2,1) .1s;
}
li[data-mm]:hover > .mm-panel::before, li[data-mm].is-open > .mm-panel::before, li[data-mm]:focus-within > .mm-panel::before{ transform:scaleX(1); }
/* Pont invisible : traverser la marge sous le lien sans fermer le panneau */
.mm-panel::after{ content:""; position:absolute; left:0; right:0; bottom:100%; height:16px; }
/* Pont sous l'item (cree et dimensionne par shop.js) : de l'item au panneau,
   sur la largeur du menu. Inerte tant que le panneau n'est pas ouvert. */
.mm-pont{ position:absolute; z-index:30; pointer-events:none; }
li[data-mm].is-open:not(.mm-suppressed) > .mm-pont{ pointer-events:auto; }

.mm-panel__inner{
  display:grid; grid-template-columns:minmax(0,1fr); gap:2.75rem;
  padding:2rem 0 1.6rem;
  max-height:min(72vh, 680px); overflow:auto; overscroll-behavior:contain;
}
.mm-panel__inner.has-feature{ grid-template-columns:minmax(0,1fr) minmax(240px, 300px); }
.mm-panel__head{ display:flex; align-items:baseline; gap:.85rem; margin-bottom:1.5rem; }
.mm-eyebrow{
  font-family:var(--ff-eyebrow); font-size:.64rem; font-weight:600;
  letter-spacing:.22em; text-transform:uppercase; color:var(--c-pink);
}
.mm-panel__title{
  font-family:var(--ff-display); font-size:1.4rem; font-weight:600; letter-spacing:-.015em;
  color:var(--c-ink); text-decoration:none; transition:color .2s ease;
}
.mm-panel__title:hover{ color:var(--c-pink); }

/* Colonnes : un sous-element et ses liens */
.mm-cols{ display:grid; grid-template-columns:repeat(auto-fill, minmax(168px, 1fr)); gap:1.9rem 2.25rem; }
.mm-col{ min-width:0; }
.mm-col__title{
  position:relative; display:inline-block; max-width:100%;
  font-family:var(--ff-eyebrow); font-size:.74rem; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; color:var(--c-ink);
  text-decoration:none; padding-bottom:.6rem; margin-bottom:.75rem;
  transition:color .2s ease;
}
.mm-col__title::after{
  content:""; position:absolute; left:0; bottom:0; width:22px; height:2px;
  background:var(--c-pink); border-radius:2px; transition:width .35s cubic-bezier(.2,.7,.2,1);
}
.mm-col__title:hover{ color:var(--c-pink); }
.mm-col__title:hover::after{ width:100%; }
.mm-col__list{ list-style:none; margin:0; padding:0; display:grid; gap:.05rem; }
.mm-col__list a, .mm-links a{
  display:inline-flex; align-items:center; gap:0; padding:.34rem 0;
  color:var(--c-ink-2); font-size:.9rem; line-height:1.35; text-decoration:none;
  transition:color .18s ease, gap .2s ease;
}
.mm-col__list a::before, .mm-links a::before{
  content:""; width:0; height:1px; background:currentColor; transition:width .2s ease;
}
.mm-col__list a:hover, .mm-links a:hover{ color:var(--c-pink); gap:.5rem; }
.mm-col__list a:hover::before, .mm-links a:hover::before{ width:12px; }
.mm-col__more a{ color:var(--c-pink); font-weight:500; font-size:.8rem; letter-spacing:.02em; }
/* Colonne « a la une » : les sous-elements sans liens, en tete et mis en avant */
.mm-col--featured{ padding-right:1.25rem; border-right:1px solid var(--c-line); }
.mm-col__list--featured{ gap:.15rem; }
.mm-col__list--featured a{ color:var(--c-ink); font-size:.98rem; font-weight:500; padding:.4rem 0; }

/* Sans sous-liens : liste en colonnes, ou vignettes si les categories ont des images */
.mm-links{ list-style:none; margin:0; padding:0; columns:4 180px; column-gap:2.25rem; }
.mm-links li{ break-inside:avoid; }
.mm-links a{ font-size:.95rem; color:var(--c-ink); padding:.42rem 0; }
.mm-tiles{ display:grid; grid-template-columns:repeat(auto-fill, minmax(128px, 1fr)); gap:1.1rem; }
.mm-tile{ display:flex; flex-direction:column; gap:.6rem; color:var(--c-ink); text-decoration:none; }
.mm-tile__img{ display:block; aspect-ratio:4/5; border-radius:var(--r-lg); overflow:hidden; background:var(--c-soft); }
.mm-tile__img img{ width:100%; height:100%; object-fit:cover; transition:transform .7s cubic-bezier(.2,.7,.2,1); }
.mm-tile:hover .mm-tile__img img{ transform:scale(1.06); }
.mm-tile__label{ font-size:.86rem; font-weight:500; transition:color .2s ease; }
.mm-tile:hover .mm-tile__label{ color:var(--c-pink); }
/* Menu « Toutes les marques » : des LOGOS, pas des photos — montres entiers
   (contain), au format paysage, sur fond blanc cerne ; une marque sans logo
   ecrit son nom dans la case. */
.mm-tiles--logos{ grid-template-columns:repeat(auto-fill, minmax(118px, 1fr)); gap:.9rem; }
.mm-tiles--logos .mm-tile__img{ aspect-ratio:3/2; display:flex; align-items:center; justify-content:center; padding:.8rem;
  background:#fff; border:1px solid var(--c-line); transition:border-color .2s ease, box-shadow .2s ease; }
.mm-tiles--logos .mm-tile__img img{ object-fit:contain; }
.mm-tiles--logos .mm-tile:hover .mm-tile__img{ border-color:var(--c-ink-2); box-shadow:0 6px 18px rgba(20,18,14,.08); }
.mm-tiles--logos .mm-tile:hover .mm-tile__img img{ transform:scale(1.04); }
.mm-tile__word{ font-family:var(--ff-display); font-size:1rem; font-weight:600; text-align:center; line-height:1.2; color:var(--c-ink); word-break:break-word; }

/* Apparition echelonnee des colonnes */
.mm-col, .mm-tile, .mm-links > li{
  opacity:0; transform:translateY(6px);
  transition:opacity .3s ease, transform .4s cubic-bezier(.2,.7,.2,1);
  transition-delay:calc(var(--mm-i, 0) * 30ms + 90ms);
}
li[data-mm]:hover .mm-col, li[data-mm].is-open .mm-col, li[data-mm]:focus-within .mm-col,
li[data-mm]:hover .mm-tile, li[data-mm].is-open .mm-tile, li[data-mm]:focus-within .mm-tile,
li[data-mm]:hover .mm-links > li, li[data-mm].is-open .mm-links > li, li[data-mm]:focus-within .mm-links > li{ opacity:1; transform:none; }

.mm-panel__foot{ margin-top:1.75rem; padding-top:1.1rem; border-top:1px solid var(--c-line); }
.mm-all{
  display:inline-flex; align-items:center; gap:.6rem;
  font-family:var(--ff-eyebrow); font-size:.7rem; font-weight:600;
  letter-spacing:.18em; text-transform:uppercase; color:var(--c-ink); text-decoration:none;
  transition:color .2s ease;
}
.mm-all svg{ transition:transform .25s ease; }
.mm-all:hover{ color:var(--c-pink); }
.mm-all:hover svg{ transform:translateX(4px); }

/* Carte « collection » (image de la categorie racine) */
.mm-feature{
  /* Hauteur fixe et collante : etiree sur toute la hauteur des colonnes, la carte
     cachait son texte sous la zone visible des qu'un catalogue etait long. */
  position:sticky; top:0; align-self:start; display:block; height:clamp(260px, 50vh, 440px);
  border-radius:var(--r-lg); overflow:hidden; background:var(--c-soft);
  color:#fff; text-decoration:none;
}
.mm-feature img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .9s cubic-bezier(.2,.7,.2,1); }
.mm-feature:hover img{ transform:scale(1.05); }
.mm-feature__shade{ position:absolute; inset:0; background:linear-gradient(180deg, rgba(20,18,14,0) 38%, rgba(20,18,14,.74)); }
.mm-feature__txt{ position:absolute; left:1.3rem; right:1.3rem; bottom:1.25rem; display:flex; flex-direction:column; gap:.3rem; }
.mm-eyebrow--light{ color:rgba(255,255,255,.86); }
.mm-feature__title{ font-family:var(--ff-display); font-size:1.3rem; font-weight:600; letter-spacing:-.01em; line-height:1.2; }
.mm-feature__cta{ display:inline-flex; align-items:center; gap:.45rem; margin-top:.35rem; font-size:.72rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase; }
.mm-feature:hover .mm-feature__cta svg{ transform:translateX(3px); }
.mm-feature__cta svg{ transition:transform .25s ease; }

/* ---- Deroulant compact (carte sous le lien) ---- */
.mm-drop{
  position:absolute; top:calc(100% + 12px); left:50%; z-index:30;
  min-width:232px; max-width:320px; padding:.5rem;
  background:var(--c-surface, #fff); border:1px solid var(--c-line); border-radius:12px;
  box-shadow:0 20px 44px -14px rgba(21,18,13,.22), 0 2px 6px rgba(21,18,13,.04);
  transform:translate(calc(-50% + var(--mm-shift, 0px)), -6px);
}
li[data-mm]:hover > .mm-drop, li[data-mm].is-open > .mm-drop, li[data-mm]:focus-within > .mm-drop{ transform:translate(calc(-50% + var(--mm-shift, 0px)), 0); }
.mm-drop::before{   /* pointe, toujours sous le lien meme si la carte a ete decalee */
  content:""; position:absolute; top:-6px; left:calc(50% - var(--mm-shift, 0px));
  width:11px; height:11px; background:var(--c-surface, #fff);
  border-left:1px solid var(--c-line); border-top:1px solid var(--c-line);
  transform:translateX(-50%) rotate(45deg);
}
.mm-drop::after{ content:""; position:absolute; left:0; right:0; bottom:100%; height:16px; }
.mm-drop__list{ list-style:none; margin:0; padding:0; }
.mm-drop__list a{
  display:flex; align-items:center; justify-content:space-between; gap:.75rem;
  padding:.56rem .75rem; border-radius:8px;
  color:var(--c-ink); font-size:.9rem; text-decoration:none;
  transition:background .15s ease, color .15s ease;
}
.mm-drop__list a::after{ content:"\203A"; font-size:1.05rem; line-height:1; color:var(--c-pink); opacity:0; transform:translateX(-4px); transition:opacity .15s ease, transform .2s ease; }
.mm-drop__list a:hover, .mm-drop__list a:focus-visible{ background:var(--c-pink-soft, #FBEAF3); color:var(--c-pink-dk, #7C1450); }
.mm-drop__list a:hover::after, .mm-drop__list a:focus-visible::after{ opacity:1; transform:none; }
.mm-drop__all{
  display:block; margin:.35rem .25rem 0; padding:.65rem .5rem .3rem;
  border-top:1px solid var(--c-line);
  font-family:var(--ff-eyebrow); font-size:.68rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  color:var(--c-ink); text-decoration:none; transition:color .2s ease;
}
.mm-drop__all:hover{ color:var(--c-pink); }

/* Voile discret sur la page quand le grand panneau est ouvert (classe posee par
   shop.js). Ancre comme le panneau (top:100% de la barre) : jamais de mesure en
   JS — une hauteur d'en-tete lue a l'ouverture etait fausse de 8 px tant que les
   polices n'etaient pas chargees, et laissait une bande grise sous le menu. */
.site-header .bar-main::after{
  content:""; position:absolute; left:0; right:0; top:100%; height:100vh; z-index:29;
  background:rgba(20,18,14,.18); pointer-events:none;
  opacity:0; visibility:hidden; transition:opacity .25s ease .12s, visibility 0s linear .37s;
}
.site-header.mm-open .bar-main::after{ opacity:1; visibility:visible; transition:opacity .25s ease .08s, visibility 0s linear .08s; }

@media (max-width:1199.98px){
  .mm-panel__inner.has-feature{ grid-template-columns:minmax(0,1fr) 230px; gap:2rem; }
  .mm-cols{ grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:1.6rem 1.75rem; }
}
@media (prefers-reduced-motion: reduce){
  .mm-panel, .mm-drop, .mm-panel::before, .mm-col, .mm-tile, .mm-links > li, .site-header .bar-main::after{ transition-duration:.01ms !important; transition-delay:0s !important; }
  .mm-panel, .mm-drop{ transform:none !important; }
  .mm-tile__img img, .mm-feature img{ transition:none !important; }
}

/* ---- Ouverture AU CLIC (/cms > Palette > En-tete du site > « Ouverture du menu »,
   cms_theme.header_menu_open = 'click') : classe hdr-mm-click sur #siteHeader.
   Le survol et le focus n'ouvrent plus rien : seul .is-open, pose par shop.js au
   clic, montre un panneau. Regles AJOUTEES : celles du survol ci-dessus restent
   intactes, et sans le reglage rien ne change. Mesure sur primepara (08/10/2026) :
   au survol, longer le menu ouvrait 5 a 6 panneaux, et descendre du logo vers la
   page laissait un panneau sous la souris. ---- */
.site-header.hdr-mm-click li[data-mm]:not(.is-open) > .mm-panel,
.site-header.hdr-mm-click li[data-mm]:not(.is-open) > .mm-drop{
  opacity:0 !important; visibility:hidden !important; pointer-events:none !important;
}
.site-header.hdr-mm-click li[data-mm]:not(.is-open) > .mm-panel{ transform:translateY(-8px) !important; }
.site-header.hdr-mm-click li[data-mm]:not(.is-open) > .mm-drop{ transform:translate(calc(-50% + var(--mm-shift, 0px)), -6px) !important; }
.site-header.hdr-mm-click li[data-mm]:not(.is-open) > .mm-panel::before{ transform:scaleX(0) !important; }
.site-header.hdr-mm-click li[data-mm]:not(.is-open) .mm-col,
.site-header.hdr-mm-click li[data-mm]:not(.is-open) .mm-tile,
.site-header.hdr-mm-click li[data-mm]:not(.is-open) .mm-links > li{ opacity:0 !important; transform:translateY(6px) !important; }
/* Le chevron dit « ouvert » : il ne pivote plus au simple survol. */
.site-header.hdr-mm-click .nav-top-list > li[data-mm]:not(.is-open):hover > .mm-trigger::after{ transform:rotate(45deg); border-color:var(--c-ink-2); }
/* Un clic hors du grand panneau le ferme SANS activer ce qui est dessous (un lien
   de la page) : le voile recoit ce clic. Au survol, il reste traversable, comme avant. */
.site-header.hdr-mm-click.mm-open .bar-main::after{ pointer-events:auto; cursor:default; }

/* ---- Menu mobile : 3e niveau de l'accordeon ---- */
.nav-mobile__sublink{
  display:flex; align-items:center; justify-content:space-between; gap:.5rem;
  width:100%; padding:.4rem .75rem; border:0; background:none; border-radius:6px;
  color:var(--c-ink); font-size:.9rem; text-align:left; cursor:pointer;
  transition:background .15s ease;
}
.nav-mobile__sublink:hover, .nav-mobile__sublink:focus-visible{ background:var(--c-soft); }
.nav-mobile__cat--open.nav-mobile__sublink{ color:var(--c-pink); font-weight:500; }
.nav-mobile__subcats--l3{ padding:.15rem 0 .35rem 1rem; border-top:0; margin-left:.75rem; border-left:2px solid var(--c-pink-tint, #F2D2E2); }
.nav-mobile__subcats--l3 a{ font-size:.86rem; color:var(--c-ink-2); }

/* ============================================================================
   Espace client — icone de l'en-tete et page « Se connecter / Creer un compte »
   (/connexion et /inscription : les deux formulaires cote a cote)
   ============================================================================ */
.icon-link--account svg{ transition:transform .25s ease; }
.icon-link--account:hover svg{ transform:translateY(-1px); }
.icon-avatar{
  display:inline-flex; align-items:center; justify-content:center;
  width:28px; height:28px; border-radius:50%;
  background:var(--c-pink); color:#fff; font-size:.78rem; font-weight:600; line-height:1;
  box-shadow:0 0 0 2px var(--c-surface, #fff), 0 0 0 3px var(--c-pink-tint, #F2D2E2);
}

.auth-portal{ padding:3.5rem 0 4.5rem; background:linear-gradient(180deg, var(--c-soft) 0%, var(--c-surface, #fff) 62%); }
.auth-portal__head{ text-align:center; max-width:640px; margin:0 auto 2.5rem; }
.auth-portal__eyebrow{ font-family:var(--ff-eyebrow); font-size:.68rem; font-weight:600; letter-spacing:.22em; text-transform:uppercase; color:var(--c-pink); }
.auth-portal__title{ font-family:var(--ff-display); font-weight:600; font-size:clamp(1.8rem, 3vw, 2.4rem); letter-spacing:-.02em; margin:.45rem 0 .5rem; color:var(--c-ink); }
.auth-portal__lede{ color:var(--c-ink-2); margin:0; }
.auth-switch{ display:none; }

.auth-portal__grid{
  display:grid; grid-template-columns:minmax(0, 1fr) auto minmax(0, 1.28fr);
  gap:2rem; align-items:start; max-width:1100px; margin:0 auto;
}
.auth-card{
  position:relative; background:var(--c-surface, #fff);
  border:1px solid var(--c-line); border-radius:16px;
  padding:2.25rem 2rem 2rem;
  box-shadow:0 18px 48px -26px rgba(21,18,13,.18);
  transition:box-shadow .3s ease, border-color .3s ease;
}
.auth-card::before{   /* filet de marque sur la carte mise en avant */
  content:""; position:absolute; left:2rem; right:2rem; top:-1px; height:3px; border-radius:0 0 3px 3px;
  background:linear-gradient(90deg, var(--c-pink), var(--c-pink-tint, #F2D2E2));
  opacity:0; transition:opacity .3s ease;
}
.auth-card.is-focus{ border-color:var(--c-pink-tint, #F2D2E2); box-shadow:0 26px 60px -28px rgba(21,18,13,.3); }
.auth-card.is-focus::before{ opacity:1; }
.auth-card__icon{
  display:inline-flex; align-items:center; justify-content:center; width:48px; height:48px;
  border-radius:14px; background:var(--c-pink-soft, #FBEAF3); color:var(--c-pink); margin-bottom:1rem;
}
.auth-card__title{ font-family:var(--ff-display); font-size:1.35rem; font-weight:600; letter-spacing:-.01em; margin:0 0 .35rem; color:var(--c-ink); }
.auth-card__lede{ color:var(--c-ink-2); font-size:.92rem; margin:0 0 1.3rem; }
.auth-card__error{
  background:#fdf1f0; border:1px solid #f2cbc6; color:var(--c-danger);
  border-radius:10px; padding:.7rem .9rem; font-size:.88rem; margin-bottom:1rem;
}
.auth-card__error p{ margin:0; }
.auth-card__error p + p{ margin-top:.25rem; }
.auth-perks{ list-style:none; margin:0 0 1.35rem; padding:0; display:grid; gap:.55rem; }
.auth-perks li{ display:flex; align-items:center; gap:.65rem; font-size:.88rem; color:var(--c-ink); }
.auth-perks svg{ flex:0 0 auto; color:var(--c-pink); }

.auth-form{ display:grid; gap:.85rem; }
.auth-form__grid{ display:grid; grid-template-columns:1fr 1fr; gap:.75rem; }
.auth-form__full{ grid-column:1 / -1; }
.auth-form .form-control{ border-radius:10px; border-color:var(--c-line); background:#fff; }
.auth-form .form-control:focus{ border-color:var(--c-pink); box-shadow:0 0 0 .2rem var(--c-pink-soft, #FBEAF3); }
.auth-form .form-floating > label{ color:var(--c-muted); }
.auth-pw{ position:relative; }
.auth-pw .form-control{ padding-right:3.1rem; }
/* Le libelle flottant s'arrete avant le bouton « oeil » (sinon « Mot de passe
   (6 car. min) » passait dessous) ; au-dela, points de suspension. Il faut aussi
   le borner a la largeur du champ : sans right/max-width, un libelle absolu prend
   la largeur de son texte, et la marge s'ajoute APRES le texte au lieu de le couper. */
.auth-pw > label{ right:0; max-width:100%; padding-right:3.3rem; }
.auth-pw__toggle{
  position:absolute; top:50%; right:.55rem; transform:translateY(-50%); z-index:3;
  width:38px; height:38px; border:0; border-radius:9px; background:transparent; color:var(--c-muted);
  display:inline-flex; align-items:center; justify-content:center; cursor:pointer;
  transition:background .15s ease, color .15s ease;
}
.auth-pw__toggle:hover, .auth-pw__toggle:focus-visible{ background:var(--c-soft); color:var(--c-ink); }
.auth-pw__toggle .auth-pw__off{ display:none; }
.auth-pw__toggle.is-shown .auth-pw__on{ display:none; }
.auth-pw__toggle.is-shown .auth-pw__off{ display:inline; }
.auth-form__row{ display:flex; justify-content:flex-end; margin-top:-.25rem; }
.auth-link{ font-size:.85rem; color:var(--c-ink-2); text-decoration:underline; text-underline-offset:3px; }
.auth-link:hover{ color:var(--c-pink); }
.auth-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  width:100%; min-height:52px; margin-top:.25rem; padding:0 1.25rem;
  border:0; border-radius:999px; background:var(--c-ink); color:#fff;
  font-weight:600; letter-spacing:.02em;
  box-shadow:0 12px 26px -14px rgba(21,18,13,.55);
  transition:background .2s ease, transform .15s ease;
}
.auth-btn:hover{ background:var(--c-pink); color:#fff; }
.auth-btn:active{ transform:translateY(1px); }
.auth-btn svg{ transition:transform .2s ease; }
.auth-btn:hover svg{ transform:translateX(3px); }
.auth-card--register .auth-btn{ background:var(--c-pink); }
.auth-card--register .auth-btn:hover{ background:var(--c-pink-dk); }
.auth-portal__or{
  align-self:stretch; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.75rem;
  color:var(--c-muted); font-size:.74rem; letter-spacing:.16em; text-transform:uppercase;
}
.auth-portal__or::before, .auth-portal__or::after{ content:""; flex:1; width:1px; background:linear-gradient(180deg, transparent, var(--c-line), transparent); }

@media (max-width:991.98px){
  .auth-portal{ padding:2rem 0 3rem; }
  .auth-portal__head{ margin-bottom:1.4rem; }
  .auth-switch{ display:inline-flex; margin-top:1.25rem; padding:4px; gap:2px; border-radius:999px; background:var(--c-soft); border:1px solid var(--c-line); }
  .auth-switch__btn{ padding:.55rem 1.15rem; border-radius:999px; font-size:.86rem; font-weight:500; color:var(--c-ink-2); text-decoration:none; transition:background .2s ease, color .2s ease, box-shadow .2s ease; }
  .auth-switch__btn:hover{ color:var(--c-ink); }
  .auth-switch__btn.is-active{ background:var(--c-surface, #fff); color:var(--c-ink); box-shadow:0 2px 8px rgba(21,18,13,.1); }
  .auth-portal__grid{ grid-template-columns:1fr; gap:1rem; max-width:560px; }
  .auth-portal__or{ flex-direction:row; }
  .auth-portal__or::before, .auth-portal__or::after{ height:1px; width:auto; background:linear-gradient(90deg, transparent, var(--c-line), transparent); }
  .auth-card{ padding:1.6rem 1.25rem 1.4rem; scroll-margin-top:96px; }
  .auth-card::before{ left:1.25rem; right:1.25rem; }
}
@media (max-width:575.98px){ .auth-form__grid{ grid-template-columns:1fr; } }

/* ==========================================================================
   Liens sociaux : apparence choisie dans /cms > Reseaux sociaux (lot 7)
   N'agit QUE sur les zones reglees (partials/social_links.php) : sans reglage,
   chaque zone garde son balisage et ses styles d'origine (topbar-socials,
   footer-socials, nav-mobile__socials, cms-social).
   ⚠ Copie a l'identique dans follow/assets/css/cms.css (apercu de /cms) :
   tmp/test_reseaux_formats.php compare les deux blocs.
   ========================================================================== */
/* SOC:DEBUT */
.soc{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem}
.soc--al-left{justify-content:flex-start}
.soc--al-center{justify-content:center}
.soc--al-right{justify-content:flex-end}
.soc__a{--soc-s:40px;--soc-i:19px;--soc-bg:var(--c-primary,#232529);--soc-fg:#fff;--soc-ic:var(--c-primary,#232529);
  display:inline-flex;align-items:center;justify-content:center;gap:.45rem;box-sizing:border-box;
  width:var(--soc-s);height:var(--soc-s);min-width:var(--soc-s);padding:0;border-radius:50%;
  border:1.5px solid transparent;line-height:1;text-decoration:none !important;
  transition:background .2s ease,color .2s ease,border-color .2s ease,transform .2s ease}
.soc__a svg{width:var(--soc-i);height:var(--soc-i);flex:0 0 auto;display:block;pointer-events:none}
button.soc__a{-webkit-appearance:none;appearance:none;font:inherit;cursor:pointer}
.soc__a[hidden]{display:none !important}
.soc__a:hover{transform:translateY(-2px)}
.soc__a:focus-visible{outline:2px solid currentColor;outline-offset:2px}
.soc__ini{font-weight:700;font-size:calc(var(--soc-s) * .4)}
.soc__lbl{white-space:nowrap}
/* Tailles : XS 24 · S 32 · M 40 · L 48 · XL 64 */
.soc--xs .soc__a{--soc-s:24px;--soc-i:13px}
.soc--s .soc__a{--soc-s:32px;--soc-i:16px}
.soc--m .soc__a{--soc-s:40px;--soc-i:19px}
.soc--l .soc__a{--soc-s:48px;--soc-i:23px}
.soc--xl .soc__a{--soc-s:64px;--soc-i:30px}
/* Formes */
.soc--circle .soc__a{border-radius:50%}
.soc--rounded .soc__a{border-radius:26%}
.soc--square .soc__a{border-radius:0}
.soc--icon .soc__a{--soc-i:calc(var(--soc-s) * .6);background:none !important;border-color:transparent !important}
.soc--label .soc__a{width:auto;padding:0 calc(var(--soc-s) * .42);border-radius:999px;font-size:calc(var(--soc-s) * .34);font-weight:600}
/* Couleurs */
.soc--brand .soc__a{background:var(--soc-bg);color:var(--soc-fg)}
.soc--brand.soc--icon .soc__a{color:var(--soc-ic)}
.soc--brand_hover .soc__a{background:transparent;color:inherit;border-color:currentColor}
.soc--brand_hover .soc__a:hover{background:var(--soc-bg);color:var(--soc-fg);border-color:var(--soc-ic)}
.soc--brand_hover.soc--icon .soc__a:hover{color:var(--soc-ic)}
.soc--theme .soc__a{background:var(--c-primary,#232529);color:#fff}
.soc--theme.soc--icon .soc__a{color:var(--c-primary,#232529)}
.soc--outline .soc__a{background:transparent;color:inherit;border-color:currentColor}
.soc--black .soc__a{background:#111;color:#fff}
.soc--black.soc--icon .soc__a{color:#111}
.soc--white .soc__a{background:#fff;color:#111}
.soc--white.soc--icon .soc__a{color:#fff}
/* Couleurs officielles des marques (fond, glyphe sur ce fond, couleur seule) */
.soc__a--facebook{--soc-bg:#1877F2;--soc-ic:#1877F2}
.soc__a--instagram{--soc-bg:radial-gradient(circle at 30% 107%,#fdf497 0%,#fdf497 5%,#fd5949 45%,#d6249f 60%,#285AEB 90%);--soc-ic:#E4405F}
.soc__a--tiktok{--soc-bg:#000;--soc-ic:#000}
.soc__a--whatsapp{--soc-bg:#25D366;--soc-ic:#25D366}
.soc__a--x{--soc-bg:#000;--soc-ic:#000}
.soc__a--youtube{--soc-bg:#FF0000;--soc-ic:#FF0000}
.soc__a--pinterest{--soc-bg:#E60023;--soc-ic:#E60023}
.soc__a--snapchat{--soc-bg:#FFFC00;--soc-fg:#000;--soc-ic:#000}
.soc__a--linkedin{--soc-bg:#0A66C2;--soc-ic:#0A66C2}
.soc__a--threads{--soc-bg:#000;--soc-ic:#000}
.soc__a--telegram{--soc-bg:#26A5E4;--soc-ic:#26A5E4}
.soc__a--messenger{--soc-bg:#0084FF;--soc-ic:#0084FF}
/* Zones : place et couleur de texte de chacune (celles de l'aspect d'origine) */
.soc-z--topbar{display:inline-flex;color:var(--c-topbar-text)}
.soc-z--topbar_mobile{display:inline-flex;flex-wrap:nowrap;gap:.3rem;flex-shrink:0;color:var(--c-topbar-text)}
.soc-z--topbar_mobile .soc__a{--soc-s:24px !important;--soc-i:13px}
.soc-z--topbar_mobile.soc--icon .soc__a{--soc-i:16px}
.soc-z--topbar_mobile.soc--label .soc__a{width:var(--soc-s);padding:0}
.soc-z--topbar_mobile .soc__lbl{display:none}
.soc-z--menu{padding:.85rem 1rem;margin:0 0 1rem;background:var(--c-soft);border:1px solid var(--c-line);border-radius:14px;color:var(--c-ink)}
.soc-z--footer{margin-top:1.25rem;color:rgba(255,255,255,.84)}
.soc-z--block{justify-content:center;gap:.8rem;color:var(--c-ink)}
.soc-z--block.soc--al-left{justify-content:flex-start}
.soc-z--block.soc--al-right{justify-content:flex-end}
.soc-z--share{color:var(--c-ink)}
/* Bloc « Reseaux sociaux » (plan catalogue, lot 7) : disposition, espacement,
   survol, identifiant. Classes posees seulement quand un reglage est choisi. */
.soc.soc--gap-sm{gap:.35rem}
.soc.soc--gap-lg{gap:1.25rem}
.soc--hov-none .soc__a:hover,.soc--hov-none .soc__item:hover .soc__a{transform:none}
.soc--hov-grow .soc__a:hover,.soc--hov-grow .soc__item:hover .soc__a{transform:scale(1.12)}
.soc__item{display:inline-flex;align-items:center;gap:.65rem;min-width:0;box-sizing:border-box;color:inherit;text-decoration:none !important;
  border-radius:14px;transition:background .2s ease,border-color .2s ease,box-shadow .2s ease,transform .2s ease}
.soc__item:focus-visible{outline:2px solid currentColor;outline-offset:3px}
.soc__item:hover .soc__a{transform:translateY(-2px)}
.soc--brand_hover .soc__item:hover .soc__a{background:var(--soc-bg);color:var(--soc-fg);border-color:var(--soc-ic)}
.soc--brand_hover.soc--icon .soc__item:hover .soc__a{color:var(--soc-ic)}
.soc--white .soc__item{color:#fff}
.soc__txt{display:flex;flex-direction:column;min-width:0;line-height:1.25;text-align:left}
.soc__name{font-weight:600;font-size:.95rem}
.soc__handle{font-size:.8rem;opacity:.7;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.soc__go{display:inline-flex;margin-left:auto;opacity:.45;transition:transform .2s ease,opacity .2s ease}
.soc__item:hover .soc__go{opacity:.9;transform:translateX(2px)}
.soc__cta{display:inline-block;margin-top:.2rem;padding:.3rem .95rem;border:1px solid currentColor;border-radius:999px;font-size:.78rem;font-weight:600;line-height:1.3;transition:background .2s ease,color .2s ease,border-color .2s ease}
.soc__item:hover .soc__cta{background:var(--c-ink,#232529);border-color:var(--c-ink,#232529);color:#fff}
.soc--white .soc__item:hover .soc__cta{background:#fff;border-color:#fff;color:#111}
/* Avec les noms : icone + nom (+ identifiant), en ligne */
.soc.soc--lay-names{gap:.75rem 1.5rem}
.soc.soc--lay-names.soc--gap-sm{gap:.4rem .9rem}
.soc.soc--lay-names.soc--gap-lg{gap:1.1rem 2.25rem}
/* Liste : une ligne par reseau */
.soc.soc--lay-list{flex-direction:column;flex-wrap:nowrap;align-items:stretch;gap:.5rem;width:100%;max-width:26rem}
.soc.soc--lay-list.soc--gap-sm{gap:.25rem}
.soc.soc--lay-list.soc--gap-lg{gap:.9rem}
.soc-z--block.soc--lay-list{margin-inline:auto}
.soc-z--block.soc--lay-list.soc--al-left{margin-left:0}
.soc-z--block.soc--lay-list.soc--al-right{margin-right:0}
.soc--lay-list .soc__item{display:flex;padding:.55rem .8rem;background:var(--c-surface,#fff);border:1px solid var(--c-line,#e5e7eb)}
.soc--lay-list .soc__item:hover{border-color:currentColor}
/* Cartes : de 9,5 a 12,5 rem, centrees, avec un bouton d'action. En flex et
   non en grille : une grille auto-fit compte ses colonnes sur la largeur MAXI
   (une seule colonne sur mobile), et etire des cartes trop peu nombreuses. */
.soc.soc--lay-cards{flex-wrap:wrap;align-items:stretch;gap:1rem;width:100%}
.soc.soc--lay-cards.soc--gap-sm{gap:.5rem}
.soc.soc--lay-cards.soc--gap-lg{gap:1.6rem}
.soc--lay-cards .soc__item{flex:1 1 9.5rem;max-width:12.5rem;flex-direction:column;justify-content:flex-start;gap:.55rem;padding:1.15rem .8rem 1rem;text-align:center;
  background:var(--c-surface,#fff);border:1px solid var(--c-line,#e5e7eb);border-radius:16px}
.soc--lay-cards .soc__item:hover{transform:translateY(-3px);box-shadow:0 10px 24px rgba(0,0,0,.08)}
.soc--hov-none.soc--lay-cards .soc__item:hover{transform:none}
.soc--lay-cards .soc__txt{align-items:center;text-align:center;max-width:100%}
.soc--lay-cards .soc__handle{max-width:100%}
.soc--white.soc--lay-list .soc__item,.soc--white.soc--lay-cards .soc__item{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.25)}
/* Texte d'accroche au-dessus des liens */
.soc-intro{max-width:40rem;margin:0 auto .9rem;text-align:center;color:var(--c-muted,#6b7280);font-size:.98rem;line-height:1.55}
.soc-intro--left{margin-left:0;text-align:left}
.soc-intro--right{margin-right:0;text-align:right}
/* SOC:FIN */

/* Boutons de partage regles dans /cms (lot 8) : meme place que .pd-share,
   qui reste l'aspect d'origine tant que rien n'est regle. */
.pd-share2{display:flex;align-items:center;flex-wrap:wrap;gap:.5rem;margin-top:1.25rem;padding-top:1rem;border-top:1px solid var(--c-line)}
/* Messenger : lien d'application (fb-messenger://), sans effet sur ordinateur */
@media (hover:hover) and (pointer:fine){ .soc__a--messenger{display:none !important} }
/* Bloc « Partager cette page » : texte et boutons alignes selon le reglage du bloc */
.cms-share{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem}
.cms-share--al-center{justify-content:center}
.cms-share--al-left{justify-content:flex-start}
.cms-share--al-right{justify-content:flex-end}