/* ========================================================
   L’ASSORTIMENT — STYLE GLOBAL (version rangée)
  
   Sommaire (numéroté + sous-sections alphabétiques) :
     01. Variables
     02. Reset & bases
     03. Utilitaires généraux
     04. Header (structure, états, responsive)
     05. Nav catégories + Méga-menu
     06. Héros (bannières)
     07. Main & Accroche
     08. Grille produits
     09. Boutons
     10. Panier (drawer) + Page panier
     11. Formulaires
     12. Barre livraison offerte
     13. Checkout (récap) (classique + simple)
     14. Footer & Prefooter
     15. Drawer mobile (menu)
     16. Modale Coffret (lot)
     17. Accueil (grille de choix)
     18. Animations (générales)
     19. Accessibilité — Sous-titre Pâtisserie (fondu au scroll)
     20. PAGE TABLETTE — réduire l’écart Titre ↔ Sous-titre
     21. Carte infos — style pro minimal + style CGV
     22. Tablette: Pile titre/sous-titre mobile
     23. Rapproche Instagram ↔ Panier (mobile)
     24. Mini (mobile) — titre/sous-titre équilibrés + panier toujours visible
     25. Sous-titre plus petit en état initial (pas en scroll)
     26. GLOBAL FIX – pages sans hero : plus d'énorme vide
     27. Correctifs globaux mobile (version finale propre)
     28. MOBILE — style home menu collection
======================================================== */

/* ===================== 01. VARIABLES ===================== */
/* 01.A — Palette + container */
:root{
  --white:#fff; --blanc:#fdfdfd;
  --gris-perle:#ececec;
  --doré:#c7a86c;
  --chocolat:#4a2c2a;
  --texte:#333; --text:#222;
  --muted:#6b6b6b;
  --black:#0b0b0b;
  --container:1160px;

  /* 01.B — Héros (hauteurs/pos) */
  --hero-min:520px;
  --hero-vh:100svh;
  --hero-obj:center 28%;
  --hero-top-pad:clamp(72px,10vh,120px);
}


/* ================== 02. RESET & BASES ==================== */
/* 02.A — Reset générique */
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
img{display:block;max-width:100%}

/* 02.B — Liens + focus */
a{color:var(--doré);text-decoration:none;transition:color .25s}
a:hover{text-decoration:underline}
:focus-visible{outline:2px solid var(--doré);outline-offset:2px}

/* 02.C — Typo + layout de base */
body{
  font-family:'Lato',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  background:var(--blanc);color:var(--texte);line-height:1.6;
}
body.no-scroll{overflow:hidden}
h1,h2,h3{font-family:'Cormorant Garamond',serif;color:var(--chocolat)}
h2{font-size:1.8rem;margin-bottom:1rem;text-align:center}
h3{font-size:1.3rem;margin-bottom:.5rem}
p{font-size:1rem;margin-bottom:1rem}
.container{max-width:var(--container);margin:0 auto;padding:0 16px}

/* ============== 03. UTILITAIRES GÉNÉRAUX ================ */
/* 03.A — Respect accessibilité/motion */
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}

/* ========================= 04. HEADER ========================= */
/* 04.A — Base */
.header-chic{
  position:fixed;top:0;left:0;right:0;z-index:1000;
  background:var(--blanc);
  border-bottom:1px solid var(--gris-perle);
  transition:background .25s,box-shadow .25s,backdrop-filter .25s;
  overflow:visible; /* laisse dépasser le mega-menu */
}
.header-chic .top-bar{
  position:relative;display:flex;align-items:center;justify-content:space-between;
  padding-block:14px;min-height:84px;
  transition:min-height .22s ease,padding .22s ease;
}

/* 04.B — État scroll (condensed) */
.header-chic.header-condensed{
  background:rgba(255,255,255,.9)!important;
  backdrop-filter:saturate(140%) blur(8px)!important;
  -webkit-backdrop-filter:saturate(140%) blur(8px)!important;
  box-shadow:0 2px 14px rgba(0,0,0,.06)!important;
}
.header-chic.header-condensed:hover{background:rgba(255,255,255,.9)!important}

/* 04.C — Logo + titres */
.logo{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);text-align:center;padding-inline:24px;max-width:min(92vw,980px)}
.titre-assortiment{font-family:'Cormorant Garamond',serif;font-weight:700;font-size:2.2rem;line-height:1.06;letter-spacing:1.5px;text-transform:uppercase;margin:0 0 .2rem}
.sous-titre-assortiment{font-family:'Lato',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;font-weight:500;font-size:.9rem;letter-spacing:6px;text-transform:uppercase;margin-top:.3rem}

/* 04.D — Liens gauche/droite + instagram */
.nav-left ul,.header-right{display:flex;align-items:center;gap:1.1rem;list-style:none}
.nav-left a,.header-right a,.instagram-link{display:inline-flex;align-items:center;height:38px;line-height:1;font-weight:600;color:var(--chocolat);padding:.35rem .6rem;border-radius:6px}
.nav-left a:hover,.header-right a:hover,.instagram-link:hover{color:var(--doré);text-decoration:none}
.instagram-link{gap:.4rem}
.instagram-link i{font-size:1.2rem;color:inherit}

/* 04.E — Panier (header) */
header.header-chic .panier-link{position:relative;font-weight:700;line-height:1;font-size:0;padding:.35rem .6rem}
header.header-chic .panier-link::before{content:"\f290";font:900 1.25rem/1 "Font Awesome 6 Free";display:inline-block;color:currentColor}
header.header-chic .panier-link::after{content:"Panier";font-size:1rem;margin-left:8px;color:currentColor}
header.header-chic .panier-link #cartCount{position:absolute;top:-6px;left:18px;min-width:18px;height:18px;padding:0 6px;border-radius:999px;background:#fff;color:#222;font-size:.75rem;font-weight:700;line-height:18px;display:inline-flex;align-items:center;justify-content:center;box-shadow:0 0 0 1px rgba(0,0,0,.08)}

/* 04.F — Overlay sur pages avec hero */
.has-hero:not(.scrolled) .header-chic{background:transparent;border:0;box-shadow:none}
.has-hero:not(.scrolled) .header-chic .titre-assortiment,
.has-hero:not(.scrolled) .header-chic .sous-titre-assortiment,
.has-hero:not(.scrolled) .header-chic a,
.has-hero:not(.scrolled) .header-chic i,
.has-hero:not(.scrolled) .header-chic .panier-link::after,
.has-hero:not(.scrolled) .header-chic .panier-link::before{color:#fff;text-shadow:0 2px 12px rgba(0,0,0,.35)}
.has-hero:not(.scrolled) .header-chic:hover{
  background:rgba(255,255,255,.5);
  backdrop-filter:saturate(140%) blur(8px);
  -webkit-backdrop-filter:saturate(140%) blur(8px);
  box-shadow:0 2px 14px rgba(0,0,0,.06);
}
.has-hero.scrolled .header-chic{background:rgba(255,255,255,.9);backdrop-filter:saturate(140%) blur(8px);-webkit-backdrop-filter:saturate(140%) blur(8px);box-shadow:0 2px 14px rgba(0,0,0,.06)}
.has-hero.scrolled .header-chic .titre-assortiment,
.has-hero.scrolled .header-chic .sous-titre-assortiment,
.has-hero.scrolled .header-chic a,
.has-hero.scrolled .header-chic i,
.has-hero.scrolled .header-chic .panier-link::after,
.has-hero.scrolled .header-chic .panier-link::before{color:var(--chocolat);text-shadow:none}

/* 04.G — Home : header transparent */
html body.home:not(.scrolled) header.header-chic,
html body.home:not(.scrolled) header.header-chic .top-bar{background:transparent;box-shadow:none}
html body.home:not(.scrolled) header.header-chic:hover,
html body.home:not(.scrolled) header.header-chic:hover .top-bar{background:rgba(255,255,255,.5);backdrop-filter:saturate(140%) blur(8px);-webkit-backdrop-filter:saturate(140%) blur(8px);box-shadow:0 2px 14px rgba(0,0,0,.06)}
html body.home.scrolled header.header-chic,
html body.home.scrolled header.header-chic .top-bar{background:rgba(255,255,255,.9);backdrop-filter:saturate(140%) blur(8px);-webkit-backdrop-filter:saturate(140%) blur(8px);box-shadow:0 2px 14px rgba(0,0,0,.06)}

/* 04.H — Sécurité visuelle */
.header-chic::after{display:none!important;height:0!important}

/* 04.I — Grille desktop */
@media (min-width:1025px){
  .header-chic .top-bar{display:grid;grid-template-columns:1fr auto 1fr;align-items:center}
  .header-chic .logo{position:static;transform:none;margin:0 auto;text-align:center}
  .nav-left,.header-right{justify-self:stretch;display:flex;justify-content:center;gap:1.4rem}
}

/* 04.J — Mobile / tablette */
.menu-btn{display:none;background:transparent;border:1px solid var(--gris-perle);width:40px;height:40px;border-radius:8px;align-items:center;justify-content:center;cursor:pointer}
.menu-btn i{font-size:18px;color:var(--chocolat)}
@media (max-width:1024px){
  .header-chic .logo{position:static;transform:none;text-align:center;padding-inline:16px}
  .header-chic .top-bar{padding-block:10px;min-height:64px}
  body.scrolled .header-chic .top-bar{padding-block:8px;min-height:56px}
  .menu-btn{display:inline-flex}
  .nav-left{display:none}
  .header-right{gap:.75rem}
  .instagram-link span{display:none}
  header.header-chic .panier-link::after{display:none}
  header.header-chic .panier-link #cartCount{top:-4px;right:-8px;left:auto}
}

/* 04.K — Hover patch → texte brun (UNIQUEMENT si .has-hero et pas scrollé) */
.has-hero:not(.scrolled) header.header-chic:hover{
  background: rgba(255,255,255,.9) !important;
  backdrop-filter: saturate(140%) blur(8px) !important;
  -webkit-backdrop-filter: saturate(140%) blur(8px) !important;
  box-shadow: 0 2px 14px rgba(0,0,0,.06) !important;
}
.has-hero:not(.scrolled) header.header-chic:hover .titre-assortiment,
.has-hero:not(.scrolled) header.header-chic:hover .sous-titre-assortiment,
.has-hero:not(.scrolled) header.header-chic:hover a,
.has-hero:not(.scrolled) header.header-chic:hover i,
.has-hero:not(.scrolled) header.header-chic:hover .panier-link::after,
.has-hero:not(.scrolled) header.header-chic:hover .panier-link::before{
  color: var(--chocolat) !important;
  text-shadow: none !important;
}

/* 04.M — Fondu uniquement du titre au scroll */
.header-chic.header-condensed .titre-assortiment{
  opacity:0!important;transform:none!important;visibility:visible!important;max-height:none!important;margin:inherit!important;pointer-events:none!important
}
.header-chic.header-condensed .sous-titre-assortiment{
  opacity:1!important;transform:none!important;visibility:visible!important;max-height:none!important;pointer-events:auto!important
}
.header-chic.header-condensed .top-bar{transition:none!important}

/* 04.N — Règles combinées desktop scrolled/condensed */
@media (min-width:1025px){
  /* Barre + grille + hauteur */
  body.scrolled header.header-chic .top-bar,
  header.header-chic.header-condensed .top-bar{
    display:grid!important;grid-template-columns:1fr auto 1fr!important;
    align-items:center!important;position:relative!important;min-height:84px!important;padding-block:14px!important;
    padding-inline:clamp(20px,3vw,48px)!important;
    max-width:min(var(--container),1200px)!important;margin-inline:auto!important;padding-inline:32px!important;
  }
  /* Menus */
  body.scrolled header.header-chic .nav-left,
  header.header-chic.header-condensed .nav-left{grid-column:1!important;justify-self:start!important;z-index:1!important}
  body.scrolled header.header-chic .header-right,
  header.header-chic.header-condensed .header-right{grid-column:3!important;justify-self:end!important;z-index:1!important}
  /* Logo */
  body.scrolled header.header-chic .logo,
  header.header-chic.header-condensed .logo{
    grid-column:2!important;justify-self:center!important;display:flex!important;align-items:center!important;text-align:center!important;
    margin:0!important;transform:none!important;position:static!important;isolation:isolate
  }
  /* Masque H1 */
  body.scrolled header.header-chic .titre-assortiment,
  header.header-chic.header-condensed .titre-assortiment{
    position:absolute!important;width:1px!important;height:1px!important;margin:0!important;padding:0!important;border:0!important;
    clip:rect(0 0 0 0)!important;clip-path:inset(50%)!important;overflow:hidden!important;white-space:nowrap!important;opacity:0!important
  }
  /* Ligne unifiée */
  body.scrolled header.header-chic .sous-titre-assortiment,
  header.header-chic.header-condensed .sous-titre-assortiment{
    display:inline-flex!important;align-items:center!important;height:38px!important;line-height:38px!important;margin:0!important;padding:0 .6rem!important;white-space:nowrap!important
  }
  /* Hauteur des liens */
  body.scrolled header.header-chic .nav-left > ul > li > a,
  header.header-chic.header-condensed .nav-left > ul > li > a,
  body.scrolled header.header-chic .header-right a,
  header.header-chic.header-condensed .header-right a,
  body.scrolled header.header-chic .instagram-link,
  header.header-chic.header-condensed .instagram-link{
    height:38px!important;line-height:38px!important;display:inline-flex!important;align-items:center!important
  }
  /* Resets logo texte */
  body.scrolled header.header-chic .logo .titre-assortiment,
  body.scrolled header.header-chic .logo .sous-titre-assortiment{transform:none!important}
}

/* 04.O' — Desktop : compression réelle au scroll (remplace la hauteur 84px de 04.O) */
@media (min-width:1025px){
  body.scrolled header.header-chic .top-bar,
  header.header-chic.header-condensed .top-bar{
    min-height:60px !important;
    padding-block:8px !important;
  }
}

/* 04.P — Pages “base” : cacher Titre + Sous-titre en scroll */
body.scrolled header.header-chic.header--base .titre-assortiment,
body.scrolled header.header-chic.header--base .sous-titre-assortiment{
  position:absolute!important;width:1px!important;height:1px!important;margin:0!important;padding:0!important;border:0!important;
  clip:rect(0 0 0 0)!important;clip-path:inset(50%)!important;overflow:hidden!important;white-space:nowrap!important;opacity:0!important
}

/* 04.U — Centrage horizontal de la barre d’étapes */
.steps{
  max-width: var(--container);
  margin-left: auto;
  margin-right: auto;
  padding-left: 16px;
  padding-right: 16px;
}

/* 04.V petit espace sous le header fixe (on garde ce coussin) */
body.body--offset .steps{ margin-top: 8px !important; }



/* ===================== 05. NAV + MÉGA-MENU ===================== */

/* 05.A — Barre des catégories */
.nav-categories{position:sticky;top:0;z-index:900;background:#fff;border-bottom:1px solid rgba(199,168,108,.25);box-shadow:0 2px 6px rgba(0,0,0,.05);padding:.5rem 0}
.nav-categories ul{list-style:none;display:flex;justify-content:center;gap:2rem}
.nav-categories a{display:inline-flex;align-items:center;padding:.35rem .6rem;border-radius:6px;text-transform:uppercase;font-weight:600;color:var(--chocolat);font-size:.95rem}
.nav-categories a:hover{background:rgba(199,168,108,.08);color:var(--doré)}

/* 05.B — Panneau méga-menu (accessibilité) */
.mega-menu{
  position:absolute;top:calc(100% + 6px);left:50%;transform:translateX(-50%) translateY(0);
  display:block;opacity:0;visibility:hidden;pointer-events:none;
  background:#fff;border:1px solid rgba(0,0,0,.08);border-radius:14px;box-shadow:0 10px 26px rgba(0,0,0,.12);
  min-width:260px;max-width:min(92vw,520px);padding:6px;
}
.mega-menu .mega-item{display:block;height:40px;line-height:40px;padding:0 14px;margin:2px;border-radius:8px;font-weight:700;font-size:.95rem;letter-spacing:.02em;color:var(--chocolat);text-decoration:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mega-menu .mega-item:hover,.mega-menu .mega-item:focus-visible{background:rgba(0,0,0,.04);outline:none}

/* 05.C — Desktop : hover/focus */
@media (hover:hover) and (pointer:fine) and (min-width:1025px) {
  .has-mega-menu:hover > .mega-menu,
  .has-mega-menu:focus-within > .mega-menu,
  .has-mega-menu > .mega-menu:hover {
    opacity:1; visibility:visible; pointer-events:auto;
    transform:translateX(-50%) translateY(0);
    transition:opacity .16s ease, transform .16s ease;
  }
}

/* 05.D — Mobile : ouverture au clic */
@media (max-width:1024px){
  .has-mega-menu .mega-menu{position:fixed;top:64px;left:50%;transform:translateX(-50%);min-width:min(92vw,280px);max-width:min(92vw,420px);border-radius:14px;z-index:5000}
  .has-mega-menu.open>.mega-menu{opacity:1;visibility:visible;pointer-events:auto}
}

/* 05.E — Caret du lien hôte */
.has-mega-menu>.nav-link{position:relative;padding-right:22px}
.has-mega-menu>.nav-link::after{content:"";position:absolute;right:6px;top:50%;transform:translateY(-40%);width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-top:6px solid currentColor;opacity:.9;transition:transform .18s ease,opacity .18s ease}
@media (hover:hover) and (pointer:fine){.has-mega-menu:hover>.nav-link::after{transform:translateY(-60%) rotate(180deg);opacity:1}}
.has-mega-menu.open>.nav-link::after{transform:translateY(-60%) rotate(180deg);opacity:1}
@media (min-width:1025px){.has-mega-menu .mega-trigger{display:none!important}}
@media (max-width:1024px){.has-mega-menu .mega-trigger{background:transparent;border:0;padding:0;width:auto;height:auto;color:inherit;line-height:inherit}}

/* 05.F — Hôte (positionnement) */
.has-mega-menu{position:relative}

/* 05.G — Panneau (desktop, compact & translucide) */
.has-mega-menu > .mega-menu{
  top:calc(100% + 4px)!important; left:0!important; transform:none!important;
  width:max-content!important; min-width:0!important; max-width:none!important;
  padding:6px!important; border-radius:8px!important;
  background:rgba(255,255,255,.88)!important;
  backdrop-filter:saturate(140%) blur(10px)!important; -webkit-backdrop-filter:saturate(140%) blur(10px)!important;
  border:1px solid rgba(0,0,0,.08)!important; box-shadow:0 8px 22px rgba(0,0,0,.12)!important;
}

/* 05.H — Items */
.has-mega-menu > .mega-menu .mega-item{
  height:36px!important; line-height:36px!important; padding:0 12px!important; margin:2px!important;
  border-radius:6px!important; font-weight:600!important; font-size:.95rem!important; letter-spacing:.005em!important;
  color:var(--chocolat)!important; white-space:nowrap!important; overflow:hidden!important; text-overflow:ellipsis!important; text-decoration:none!important;
}
.has-mega-menu > .mega-menu .mega-item:hover,
.has-mega-menu > .mega-menu .mega-item:focus-visible{background:rgba(0,0,0,.05)!important; outline:none!important}

/* 05.I — Pont anti-trou (desktop) — FIX z-index + hauteur */
@media (min-width:1025px){
  .has-mega-menu{ position:relative; } /* déjà présent, on confirme */

  /* Le pont comble juste le vide sous le lien, derrière le menu */
  .has-mega-menu::after{
    content:"";
    position:absolute;
    left:-14px; right:-14px;
    top:100%;
    height:10px;              /* ← 34px → 10px */
    pointer-events:auto;      /* garde l’effet “anti-trou” */
    z-index:1;                /* ← derrière le panneau */
  }

  /* Le panneau passe devant, capte les clics partout */
  .has-mega-menu > .mega-menu{
    z-index:2;                /* ← au-dessus du pont */
  }

  /* Garde l’ouverture au survol du pont et du panneau */
  .has-mega-menu:hover > .mega-menu,
  .has-mega-menu > .mega-menu:hover{
    opacity:1; visibility:visible; pointer-events:auto;
  }
}


/* 05.J — Mobile/tablette (centrage + largeur) */
@media (max-width:1024px){
  .has-mega-menu > .mega-menu{
    left:50%!important; transform:translateX(-50%)!important;
    min-width:min(92vw,320px)!important; max-width:min(92vw,360px)!important
  }
}

/* ========================= 06. HERO ========================= */

/* 06.A — Cadres héros (zéro fond / zéro voile) — version safe */
#cookiesHero,
#tabletteHero {
  position: relative;
  width: 100vw;
  left: 50%;
  transform: translateX(-50%);
  height: auto;
  min-height: 0;
  margin: 0;
  overflow: hidden;
}

#cookiesHero::before,
#tabletteHero::before {
  content: none;
}

/* 06.B — image plein cadre (avec fallback) */
#cookiesHero .banner-img,
#tabletteHero .banner-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--hero-obj);
  display: block;
}

/* 06.C — Recadrages spécifiques */
#cookiesHero .banner-img { object-position: 60% 25% !important; }
#tabletteHero .banner-img { object-position: 20% 50% !important; }

@media (max-width: 1024px) {
  #cookiesHero .banner-img { object-position: 55% 46% !important; }
  #tabletteHero .banner-img { object-position: 35% 34% !important; }
}

/* 06.D — Mobile : plein écran fluide (corrigé) */
@media (max-width: 600px) {
  #cookiesHero,
  #tabletteHero {
    padding-top: calc(env(safe-area-inset-top, 0px));
    padding-bottom: calc(env(safe-area-inset-bottom, 0px));
  }
  #cookiesHero .banner-img { object-position: 55% 46% !important; }
  #tabletteHero .banner-img { object-position: 50% 60% !important; }

  .scroll-caret { bottom: 18px; }
}

/* 06.E — ancrage (OK) */
.banniere-tablette,
.cookies-hero {
  position: relative;
}

/* 06.F — Titres héros */
.hero-title-plain {
  position: absolute;
  left: 50%;
  top: 44vh;
  transform: translateX(-50%);
  margin: 0;
  text-align: center;
  font-family: "Cormorant Garamond", serif;
  font-weight: 700;
  font-size: clamp(2rem, 6vw, 4.2rem);
  line-height: 1.05;
  color: #fff;
  text-shadow: 0 2px 18px rgba(0, 0, 0, .35);
  pointer-events: none;
}
.sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.hero-title-chip {
  position: absolute;
  left: 50%;
  bottom: 18vh;
  transform: translateX(-50%);
  padding: .35em .9em;
  border-radius: 999px;
  color: #fff;
  font-family: "Cormorant Garamond", serif;
  font-weight: 700;
  font-size: clamp(1.1rem, 2.4vw, 1.6rem);
  background: rgba(0, 0, 0, .18);
  border: 1px solid rgba(255, 255, 255, .28);
  backdrop-filter: saturate(140%) blur(5px);
}

/* 06.G — Caret + label */
.scroll-label {
  position: absolute;
  left: 50%;
  bottom: 58px;
  transform: translateX(-50%);
  color: rgba(255, 255, 255, .75);
  font-weight: 600;
  font-size: .95rem;
  letter-spacing: .4px;
  text-shadow: 0 1px 4px rgba(0, 0, 0, .25);
  pointer-events: none;
}
.scroll-caret {
  position: absolute;
  left: 50%;
  bottom: 28px;
  transform: translateX(-50%);
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 0;
  margin: 0;
  line-height: 1;
  appearance: none;
  -webkit-appearance: none;
  font-size: 22px;
  color: rgba(255, 255, 255, .55);
  cursor: pointer;
  opacity: .95;
  transition: transform .18s ease, color .18s ease, opacity .18s ease;
  z-index: 10;
}
.scroll-caret::after { content: ""; position: absolute; inset: -14px -18px; }
.scroll-caret i { display: block; }
.scroll-caret:hover,
.scroll-caret:focus-visible {
  color: rgba(255, 255, 255, .9);
  transform: translateX(-50%) translateY(2px);
  outline: none;
}
@media (prefers-reduced-motion: reduce) {
  .scroll-caret { transition: none; }
}
@keyframes heroFade {
  to { opacity: 1; transform: translateX(-50%) translateY(0); }
}
.discover-cta {
  position: absolute;
  left: 50%;
  bottom: 20px;
  transform: translateX(-50%);
  z-index: 5;
}
.discover--icon {
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  line-height: 1;
  cursor: pointer;
  color: #2b241f;
  position: relative;
}
.discover--icon::after {
  content: "";
  position: absolute;
  inset: -14px -18px;
}
.discover--icon .caret {
  display: block;
  opacity: .9;
  transition: transform .18s ease, opacity .18s ease;
}
.discover--icon:hover .caret {
  transform: translateY(2px);
  opacity: 1;
}
.has-hero .discover--icon { color: #2b241f; }

/* 06.H — H1 des bannières + micro-anim */
.banniere-tablette .banner-copy h1,
.banniere-cookies .banner-copy h1 {
  position: absolute;
  left: 50%;
  top: 44vh;
  transform: translateX(-50%);
  margin: 0;
  padding: 0;
  text-align: center;
  pointer-events: none;
  font-family: "Cormorant Garamond", serif;
  font-weight: 700;
  font-size: clamp(2.2rem, 6vw, 4.4rem);
  line-height: 1.05;
  letter-spacing: .01em;
  color: #fff;
  text-shadow: 0 1px 8px rgba(0, 0, 0, .28);
  opacity: 0;
  transform: translateX(-50%) translateY(6px);
  animation: heroFade .7s ease .2s forwards;
}
@media (prefers-reduced-motion: reduce) {
  .banniere-tablette .banner-copy h1,
  .banniere-cookies .banner-copy h1 {
    animation: none;
    opacity: 1;
    transform: translateX(-50%);
  }
}

/* 06.I — hauteurs unifiées */
:root { --hero-h-desktop: 540px; }



@supports (height: 100dvh) {
  #cookiesHero,
  #tabletteHero { height: 100dvh !important; }
}
@supports not (height: 100dvh) {
  @supports (height: 100lvh) {
    #cookiesHero,
    #tabletteHero { height: 100lvh !important; }
  }
  @supports not (height: 100lvh) {
    #cookiesHero,
    #tabletteHero { height: 100svh !important; }
  }
}

/* 06.J - Plancher identique */
#cookiesHero,
#tabletteHero {
  min-height: 520px !important;
}

/* 06.K — Ajustement bannière centré téléphone */
@media (max-width: 600px) {

  /* 06.L - bannière cookies : recadrage plus centré et zoom léger */
  #cookiesHero .banner-img {
    object-position: 50% 50% !important;  /* centre vertical et horizontal */
    object-fit: cover;                    /* garde le remplissage plein écran */
    transform: scale(1.05);               /* zoom léger pour éviter les bandes */
  }

  /* 06.M - garde le bouton caret visible et mieux placé */
  .scroll-caret {
    bottom: 14px;
    font-size: 20px;
  }

  /* 06.N - si le texte ou h1 doit être lisible au-dessus */
  .banniere-cookies .banner-copy h1 {
    top: 38vh;                      /* remonte un peu le titre */
    font-size: clamp(1.8rem, 5vw, 2.8rem);
    line-height: 1.1;
    text-shadow: 0 1px 6px rgba(0,0,0,0.4);
  }
}

/* ================ 07. MAIN & ACCROCHE ==================== */
/* 07.A — Main */
main{padding:2rem 3rem;max-width:1200px;margin:auto}
main h1{font-size:2.2rem;text-align:center;margin:2rem 0}

/* 07.B — Accroche */
.accroche-site{text-align:center;margin:2rem auto 1.5rem;line-height:1.5;font-weight:400}
.accroche-site .accroche-bas{display:block;margin-top:.5rem;font-weight:600}

/* ================== 08. GRILLE PRODUITS ================== */

/* 08.A — Grille + cartes (base) */
.grid-articles{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:28px;align-items:stretch;padding:0 2rem
}
.grid-articles article{
  display:flex;flex-direction:column;gap:12px;padding:18px;border-radius:16px;
  background:#fff;height:100%;box-shadow:0 1px 0 rgba(0,0,0,.04);border:1px solid var(--gris-perle)
}

/* 08.B — Image + titres + CTA */
.grid-articles article a{
  order:1;display:block;border-radius:14px;overflow:hidden;aspect-ratio:1/1;margin:0 0 12px;position:relative
}
.grid-articles article a img{width:100%;height:100%;object-fit:cover;border-radius:12px}
.grid-articles article h3{
  order:2;margin:0 0 8px;text-align:center;font-weight:700;
  font-size:clamp(1.15rem,.9rem + 1vw,1.7rem);line-height:1.15;min-height:3.2em;
  display:flex;align-items:flex-end;justify-content:center;text-wrap:balance
}
.grid-articles article p{order:3;margin:0;margin-top:auto;text-align:center;min-height:1.6em}

/* 08.C — CTA cartes */
.grid-articles article a.btn,
.grid-articles article .btn,
.grid-articles article button.btn,
.grid-articles article .add-to-cart{
  order:4;
  display:flex !important;justify-content:center !important;align-items:center !important;
  width:100% !important;margin:10px 0 0 !important;padding:.9rem 1.5rem !important;
  aspect-ratio:auto !important;border-radius:40px !important;overflow:visible !important;box-sizing:border-box
}

/* 08.D — Badge produit */
.prod-badge{
  position:absolute;top:10px;left:10px;z-index:2;display:inline-block;padding:.32rem .56rem;
  background:rgba(255,255,255,.96);border:1px solid rgba(0,0,0,.14);border-radius:4px;
  font:700 .78rem/1 "Lato",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  letter-spacing:.08em;text-transform:uppercase;color:#222;
  box-shadow:0 1px 3px rgba(0,0,0,.06);user-select:none;pointer-events:none
}
.prod-badge--new{color:#222;border-color:rgba(0,0,0,.20)}
.prod-badge--limited{color:var(--chocolat);border-color:var(--doré)}
.prod-badge--oos{color:#b3261e;border-color:#b3261e}

/* 08.E — État rupture */
.btn.is-disabled,button[disabled]{
  background:#e9e9e9!important;color:#777!important;cursor:not-allowed!important;
  transform:none!important;border-color:#e9e9e9!important;opacity:.95
}
.is-oos a img{filter:saturate(.3) contrast(.95)}
@media (max-width:520px){
  .prod-badge{top:8px;left:8px;padding:.28rem .5rem;font-size:.74rem}
}

/* 08.F — Galerie produit (coffret) */
@media (max-width:640px){.product-gallery img.coffret-img{padding:8px}}
.product-gallery img.coffret-img{
  display:block;width:100%;aspect-ratio:1/1;object-fit:contain;object-position:top;
  background:#fff;padding:10px;border-radius:12px
}

/* 08.G — Affinages grille */
.grid-articles article{gap:6px}
.grid-articles article a{margin:0 0 6px !important}
.grid-articles article h3{margin:2px 0 4px;min-height:2.4em;line-height:1.12}

/* ==================== 09. BOUTONS (panier + quantité) ==================== */

/* 09.A — Boutons primaires / secondaires */
/* Primaires */
.btn,
.btn-commande,
.btn-commande-full{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:var(--chocolat);
  color:#fff;
  padding:.7rem 1.5rem;
  border:0;
  border-radius:30px;
  font:inherit;
  font-size:1rem;
  cursor:pointer;
  transition:background .25s, transform .15s;
}
.btn:hover,
.btn-commande:hover,
.btn-commande-full:hover{
  background:var(--doré);
  transform:translateY(-2px);
}
.btn-commande{font-weight:700;gap:8px}

/* Secondaire */
.btn-secondaire{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:transparent;
  color:var(--chocolat);
  border:2px solid var(--chocolat);
  padding:.65rem 1.2rem;
  border-radius:30px;
  font-weight:600;
  transition:background .25s, color .25s;
}
.btn-secondaire:hover{background:var(--chocolat);color:#fff}

/* 09.B — Variantes & largeur */
/* Largeur pleine (opt-in) */
.btn--full{width:100%}

/* 09.C — Alligne quantité + CTA (fiche produit) */
.qty-cta{
  display:flex;
  align-items:center;
  gap:12px;
}

/* 09.D Quantité — bloc compact */
.qty-box,
.quantite-box{
  display:inline-flex;
  align-items:center;
  height:38px;
  background:#fff;
  border:1px solid #d7d2cc;
  border-radius:6px;
  overflow:hidden;
}
.qty-btn,
.quantite-box button{
  all:unset;
  display:flex;
  align-items:center;
  justify-content:center;
  width:38px;
  height:38px;
  cursor:pointer;
  font-size:18px;
  font-weight:600;
  color:var(--chocolat);
  transition:background .2s;
}
.qty-btn:hover,
.quantite-box button:hover{background:#f3f0ed}

.qty-input,
.input-qte{
  width:52px;
  height:100%;
  border:none;
  border-left:1px solid #e5e2de;
  border-right:1px solid #e5e2de;
  background:transparent;
  text-align:center;
  font-size:16px;
  font-weight:600;
  color:var(--chocolat);
  outline:none;
  font-variant-numeric:tabular-nums;
  appearance:textfield;      /* modernes */
  -moz-appearance:textfield; /* Firefox (ancien) */
}

/* 09.E Masque les flèches WebKit */
.qty-input::-webkit-outer-spin-button,
.qty-input::-webkit-inner-spin-button,
.input-qte::-webkit-outer-spin-button,
.input-qte::-webkit-inner-spin-button{
  -webkit-appearance:none;
  margin:0;
}

/* =================== 10. PANIER (drawer + page) =================== */
/* 10.A — Overlay + drawer */
.overlay-panier{position:fixed;inset:0;background:rgba(0,0,0,.5);display:none;z-index:6000}
.overlay-panier.actif{display:block}
.popup-panier{
  position:fixed;top:0;right:-500px;width:500px;height:100%;
  background:#fff;box-shadow:-4px 0 15px rgba(0,0,0,.1);
  display:flex;flex-direction:column;padding:1rem;z-index:6001;
  transition:right .35s
}
.popup-panier[hidden]{display:none}
.popup-panier.ouvert{right:0}

/* 10.B — Header drawer */
.popup-header{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--gris-perle);padding-bottom:.8rem;margin-bottom:1rem}
.close-panier{
  all:unset;box-sizing:border-box;width:36px;height:36px;display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--gris-perle);border-radius:50%;background:#fff;color:#666;cursor:pointer;font-size:20px;line-height:1;
  transition:background .15s,border-color .15s,transform .05s
}
.close-panier:hover{background:#efefef;border-color:#d8d8d8;color:#333}
.close-panier:active{transform:translateY(1px)}
.close-panier:focus-visible{outline:2px solid var(--doré);outline-offset:2px}

/* 10.C — Liste + total */
.liste-produits{flex:1;overflow-y:auto;margin-bottom:1.5rem;padding:0 .25rem}
.total-section,.total-ligne{border-top:2px solid var(--gris-perle);padding-top:.8rem;text-align:right;color:var(--chocolat);font-weight:700}
.total-section{font-size:1.1rem}
.footer-panier{display:flex;flex-direction:column;gap:10px;padding-top:15px}

.ligne-panier{display:flex;gap:15px;padding:15px 0;border-bottom:1px solid #ddd}
.ligne-img{width:64px;height:64px;object-fit:cover;border-radius:6px}
.ligne-droite{flex:1;display:flex;flex-direction:column;gap:6px}
.ligne-nom{margin:0;font-weight:700;color:var(--chocolat)}
.ligne-prix{font-weight:700;margin:2px 0}
.ligne-actions{display:flex;align-items:center;gap:12px}


/* 10.D — Page panier dédiée */
#page-cart{max-width:1000px;margin:0 auto;display:grid;gap:16px}
#page-cart .ligne-panier{
  display:grid!important;grid-template-columns:96px 1fr auto;align-items:center;gap:16px;
  border:1px solid var(--gris-perle)!important;border-radius:12px!important;padding:12px 16px!important;background:#fff
}
#page-cart .ligne-img{width:96px;height:96px;border-radius:8px}
#page-cart .ligne-actions{justify-self:end}
#page-cart-total{max-width:1000px;margin:12px auto 24px}
#page-cart-total .btn-commande-full{width:100%;max-width:680px;margin:0 auto;display:block}
@media (max-width:768px){
  #page-cart .ligne-panier{grid-template-columns:72px 1fr}
  #page-cart .ligne-img{width:72px;height:72px}
}

/* 10.E — Bouton supprimer (sobre) */
.ligne-actions .btn-supp{
  all:unset;display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:34px;border-radius:6px;color:#6b625e;cursor:pointer;line-height:1;
  transition:color .2s,background .2s,transform .1s
}
.ligne-actions .btn-supp i{font-size:15px;opacity:.9}
.ligne-actions .btn-supp:hover{background:rgba(0,0,0,.05);color:#3b3735}
.ligne-actions .btn-supp:active{transform:scale(.94);background:rgba(0,0,0,.07)}
.ligne-actions .btn-supp:focus-visible{outline:2px solid rgba(0,0,0,.25);outline-offset:2px}

/* 10.F — Offset global si header fixe (pages sans hero) */
body.body--offset{padding-top:var(--header-h,88px)!important}

/* 10.G — Récap (panier + livraison) */


.recap-list{list-style:none;margin:0 0 1.2rem;padding:0}
.recap-row{display:flex;justify-content:space-between;align-items:center;padding:6px 0;font-size:.95rem;color:#333}
.recap-row+.recap-row{border-top:1px solid #f2f2f2}
.recap-label{font-weight:500}
.recap-value{font-weight:600}
.recap-muted{color:#777;font-weight:400}
.recap-total{font-size:1.05rem;font-weight:700;color:#111}

.cs-validate,#toPayment{
  display:block;width:100%;padding:12px 0;background:#111;color:#fff;
  font-family:"Lato",sans-serif;font-weight:700;border:none;border-radius:8px;cursor:pointer;transition:background .2s ease
}
.cs-validate:hover,.cs-validate:focus,#toPayment:hover,#toPayment:focus{background:#333}
.cs-note{margin-top:10px;font-size:.85rem;color:#666;text-align:center}

@media (max-width:768px){
  .recap-card{position:static;max-width:none;margin-top:24px}
}

/* ==================== 11. FORMULAIRES (compact) ==================== */
/* champs texte (dans form) */
form input:not([type="checkbox"]):not([type="radio"]),
form textarea,form select{
  width:100%;padding:.6rem;border:1px solid var(--gris-perle);border-radius:6px;margin:0;font:inherit
}
form input:focus,form textarea:focus,form select:focus{
  border-color:var(--doré);box-shadow:0 0 0 2px rgba(199,168,108,.15);outline:0
}

/* Message de statut du formulaire de contact */
#contactStatus.contact-status {
  display: block;
  margin-top: 8px;
  font-size: 0.95rem;
}

#contactStatus.contact-status.info {
  color: #555;
}

#contactStatus.contact-status.success {
  color: #2e7d32; /* vert propre */
}

#contactStatus.contact-status.error {
  color: #b3261e; /* rouge erreur */
}


/* ============ 12. BARRE LIVRAISON OFFERTE ================ */
/* Barre & texte */
.free-ship-bar{margin:10px 0 0}
.fs-track{position:relative;height:10px;border-radius:999px;background:#eee;overflow:hidden}
.fs-fill{height:100%;width:0;border-radius:999px;background:linear-gradient(90deg,#c7a86c,#4a2c2a);transition:width .35s}
.fs-text{margin-top:8px;font-size:.95rem;text-align:center;color:var(--chocolat);font-weight:700}
.fs-text .muted{font-weight:600;color:var(--muted)}

/* =========== 13. CHECKOUT (classique + simple) =========== */
/* 13.A — Étapes & layout */
.checkout{max-width:var(--container);margin:0 auto;padding:2rem 1rem}
.steps{display:flex;justify-content:center;gap:18px;margin:18px auto 8px}
.step{padding:6px 12px;border-bottom:2px solid #ddd;color:#999}
.step.current{border-color:var(--doré);color:var(--chocolat);font-weight:700}
.step.done{border-color:var(--chocolat);color:var(--chocolat)}
.checkout-main{display:grid;grid-template-columns:2fr 1fr;gap:20px;align-items:start;margin-bottom:20px}
@media (max-width:900px){.checkout-main{grid-template-columns:1fr}}
.address-block,.shipping-block{border:1px solid var(--gris-perle);border-radius:12px;background:#fff;padding:16px;margin-bottom:18px}
.address-block h2,.shipping-block h2{margin-bottom:12px;font-size:1.2rem;color:var(--chocolat)}
.address-block label{display:grid;gap:6px;margin-bottom:12px}
.address-block input{border:1px solid var(--gris-perle);border-radius:8px;padding:10px;font:inherit}

/* 13.B — Récap collant */
.summary-card{position:sticky;top:90px;border:1px solid var(--gris-perle);border-radius:12px;padding:16px;background:#fff;height:max-content}
.summary-card h3{margin:0 0 12px}
.summary-card ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.summary-item{display:grid;grid-template-columns:80px 1fr auto auto;gap:14px;align-items:center;padding:12px 0;border-bottom:1px solid #eee}
.summary-item img{width:80px;height:80px;border-radius:8px;object-fit:cover}
.summary-line{display:flex;justify-content:space-between;margin-top:6px}
.total-row{border-top:2px solid var(--gris-perle);padding-top:10px;margin-top:8px;font-weight:700;color:var(--chocolat)}

/* 13.C — Options de livraison */
.ship-option{display:block;cursor:pointer}
.ship-option+.ship-option{margin-top:12px}
.ship-option input[type="radio"]{position:absolute;opacity:0;pointer-events:none}
.option-card{display:grid;grid-template-columns:28px 1fr auto;align-items:center;gap:12px;padding:14px 16px;border:1px solid #ddd;border-radius:10px;background:#fafafa;transition:background .15s,border-color .15s,box-shadow .15s}
.option-card .icon{font-size:20px}
.option-card .desc strong{display:block;font-weight:800;color:var(--chocolat);font-size:1.05rem}
.option-card .desc p{margin:4px 0 0;color:#6b6b6b;font-size:.95rem}
.option-card .price{font-weight:800;color:var(--chocolat);white-space:nowrap;padding-left:12px}
.ship-option input[type="radio"]:checked+.option-card{background:#fff;border-color:var(--doré);box-shadow:0 0 0 2px rgba(199,168,108,.12)}

/* 13.D — Checkout “simple” */
.checkout-simple{max-width:1160px;margin:28px auto 48px;padding:0 16px;display:grid;grid-template-columns:minmax(0,1fr) 420px;gap:40px;align-items:start}
@media (max-width:1000px){.checkout-simple{grid-template-columns:1fr;gap:28px}}
.cs-card{background:transparent;border:0;padding:0}
.cs-title{margin:0 0 18px;text-transform:uppercase;letter-spacing:.08em;font-weight:800;font-size:2rem;color:#1f1f1f}
.cs-label{margin:18px 0 6px;color:#6e6e6e;font-size:.96rem}
.cs-input{width:100%;border:none;border-bottom:2px solid #1f1f1f;border-radius:0;padding:10px 0;background:transparent;font:inherit;color:#222}
.cs-input::placeholder{color:#b7b7b7}
.cs-input:focus{outline:none;border-bottom-color:var(--doré)}
.cs-radio-line,.civilite{display:flex;gap:28px;flex-wrap:wrap;align-items:center}
.cs-radio input,.civilite input{width:18px;height:18px;accent-color:#1f1f1f;transform:translateY(1px)}
.recap-card{position:sticky;top:88px;background:#fff;padding:0;border:1px solid #e6e6e6;border-radius:0;box-shadow:none;align-self:start}
.recap-card h3{margin:0;padding:18px 20px;border-bottom:1px solid #e6e6e6;text-transform:uppercase;letter-spacing:.08em;font-weight:800;font-size:1.45rem;color:#1f1f1f}
.recap-list{list-style:none;margin:0;padding:0}
.recap-row{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-top:1px solid #e6e6e6}
.recap-row:first-child{border-top:none}
.recap-label{color:#2a2a2a}
.recap-value{font-weight:800;color:#1f1f1f}
.recap-muted{color:#8e8e8e;font-style:italic;font-weight:500}
.recap-total{font-size:1.25rem}
.shipping-block{margin-top:26px;background:#fff;border:1px solid #e7e7e7;border-radius:10px;padding:16px}
.shipping-block h2{font-family:'Cormorant Garamond',serif;font-weight:700;font-size:1.25rem;margin:0 0 10px;color:var(--chocolat);text-transform:uppercase;letter-spacing:.06em}

/* 13.E — Ajustements */
.checkout-left .shipping-block{margin-top:0;margin-bottom:18px}
/* (Note: .popup-panier{z-index:6001} reste dans le bloc 11 “Panier”) */

/* 13.F - Livraison — décoller la case CGV du bord droit du récap */
.recap-card .accept-cgv{
  display:flex;                /* aligne case + texte proprement */
  align-items:flex-start;
  gap:.6rem;                   /* espace entre la case et le texte */
  padding-left:12px;           /* décale l’ensemble vers l’intérieur */
  margin-top:6px;
}

.recap-card .accept-cgv input[type="checkbox"]{
  flex:0 0 auto;
  margin-top:.15rem;           /* petit alignement vertical */
}

/* un peu plus d’air sur mobile */
@media (max-width: 640px){
  .recap-card .accept-cgv{ padding-left:14px; gap:.7rem; }
}

/* ============== 14. FOOTER & PREFooter =================== */

/* 14.A — Prefooter banner + USP (base) */
.prefooter-banner{background:var(--black);color:var(--white);padding:22px 0;margin-top:3rem}
.usp-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr)}
.usp-item{display:flex;align-items:center;gap:12px;padding:14px 18px;position:relative}
.usp-item+.usp-item::before{content:"";position:absolute;left:0;top:22%;bottom:22%;width:1px;background:rgba(255,255,255,.18)}
.usp-item i{font-size:22px;opacity:.95}
.usp-title{display:block;font-weight:700;font-size:16px}
.usp-sub{display:block;font-size:13px;opacity:.9;margin-top:3px}
@media (max-width:960px){.usp-list{grid-template-columns:1fr 1fr}.usp-item+.usp-item::before{display:none}.usp-item{border-top:1px solid rgba(255,255,255,.12)}.usp-item:nth-child(1){border-top:none}.usp-title{font-size:15px}}
@media (max-width:520px){.usp-list{grid-template-columns:1fr}.usp-item{padding:12px 2px}.usp-title{font-size:14px}.usp-sub{font-size:12px}}

/* 14.B — Footer (base) */
.footer{background:#eee;color:var(--text);padding:20px 0 26px;border-top:1px solid #e5e5e5}

/* 14.C — Footer : liens / social / états */
.footer-links{display:flex;justify-content:center;align-items:center;gap:12px;margin:6px auto 10px;flex-wrap:wrap}
.footer-links a{text-decoration:none;font-size:15px;color:var(--doré)}
.footer-links a:hover{text-decoration:underline}
.footer-links .dot{color:#cfcfcf}
.footer-social{display:inline-flex;align-items:center;gap:8px;color:var(--text);text-decoration:none;margin:2px auto 12px;justify-content:center}
.footer-social i{font-size:18px}
.footer-social:hover{opacity:.85}

/* 14.D — Footer : copyright */
.copyright{text-align:center;font-size:14px;color:var(--muted);margin:0}

/* 14.E — PREFOOTER — 3 colonnes égales, traits fixes */
:root{
  --pf-bg: #fffdf8;
  --pf-text: #2b211a;
  --pf-dim: #7a6a5c;
  --pf-rule: rgba(43,33,26,.18);
}
.line-prefooter{
  background: var(--pf-bg);
  color: var(--pf-text);
  border-top: 1px solid rgba(43,33,26,.12);
  padding: clamp(18px, 3vw, 28px) 0;
}
.line-prefooter .container{
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 clamp(16px,3vw,24px);
}

/* 14.F — Grille principale */
.line-usp{
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  align-items: center;
  gap: 0;
  list-style: none;
  margin: 0;
  padding: 0;
}
.line-usp::before,
.line-usp::after{
  content:"";
  position:absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 60%;
  background: var(--pf-rule);
  pointer-events: none;
}
.line-usp::before{ left: 33.3333%; }
.line-usp::after { left: 66.6666%; }

/* 14.G — Items */
.line-usp__item{
  padding: 8px clamp(18px, 2.5vw, 28px);
  display: grid;
  grid-template-columns: 22px 1fr;
  grid-template-rows: auto auto;
  column-gap: 12px;
  align-items: center;
  justify-self: center;
  text-align: left;
}
.line-usp__item > i{
  grid-column: 1;
  grid-row: 1 / span 2;
  align-self: center;
  font-size: 16px;
  opacity: .9;
}

/* 14.H — Textes */
.line-usp .t1,
.line-usp .t2,
.line-usp .note{
  grid-column: 2;
  display: block;
  margin: 0;
}
.line-usp .t1{
  font-family: "Cormorant Garamond", serif;
  font-weight: 700;
  font-size: clamp(16px, 1.65vw, 18px);
  line-height: 1.15;
}
.line-usp .t2{
  margin-top: 4px;
  font: 400 14px/1.35 "Lato", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--pf-dim);
}
.line-usp .note{
  margin-top: 4px;
  font: 600 12px/1.2 "Lato", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  text-transform: uppercase;
  letter-spacing: .4px;
  color: var(--pf-dim);
}

/* 14.I — Tablette : 2 colonnes, trait central */
@media (min-width: 601px) and (max-width: 900px){
  .line-usp{
    grid-template-columns: repeat(2, minmax(0,1fr));
  }
  .line-usp::before{
    left: 50%;
    display: block;
  }
  .line-usp::after{ display: none; }
  .line-usp__item{
    padding: 12px clamp(16px, 2.5vw, 24px);
    grid-template-columns: 24px 1fr;
    column-gap: 14px;
  }
  .line-usp__item > i{ font-size: 18px; }
  .line-usp .t1{ font-size: clamp(16px, 2vw, 20px); }
  .line-usp .t2{ font-size: 14px; }
  .line-usp .note{ font-size: 12px; }
}

/* 14.J — Mobile : 1 colonne, filets horizontaux */
@media (max-width: 600px){
  .line-usp{
    grid-template-columns: 1fr;
  }
  .line-usp::before,
  .line-usp::after{ display: none; }
  .line-usp__item{
    grid-template-columns: 22px 1fr;
    padding: 12px 0;
    border-bottom: 1px solid var(--pf-rule);
  }
  .line-usp__item:last-child{ border-bottom: 0; }
  .line-usp .t1{ font-size: clamp(16px, 5vw, 18px); }
  .line-usp .t2{ font-size: 14px; }
  .line-usp .note{ font-size: 12px; }
  .line-usp__item > i{ font-size: 16px; }
}

/* 14.K — Padding conteneur <900px */
@media (max-width: 900px){
  .line-prefooter .container{
    padding: 0 clamp(18px, 4vw, 28px);
  }
}


/* ============== 15. DRAWER MOBILE (menu collection) ================= */
/* 15— Structure menu collection */
.drawer-overlay{position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:1200;display:none}
.site-drawer{position:fixed;inset:0 auto 0 0;width:min(86vw,360px);background:var(--white);border-right:1px solid var(--gris-perle);box-shadow:4px 0 22px rgba(0,0,0,.18);transform:translateX(-100%);transition:transform .25s;z-index:1201;display:flex;flex-direction:column}
.site-drawer.open{transform:translateX(0)}
.drawer-header{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid var(--gris-perle)}
.drawer-close{background:transparent;border:1px solid var(--gris-perle);width:36px;height:36px;border-radius:8px;cursor:pointer}
.drawer-nav{padding:10px 8px 18px;overflow-y:auto}
.drawer-nav ul{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.drawer-nav a{display:block;padding:10px 12px;border-radius:8px;color:var(--chocolat);font-weight:600}
.drawer-nav a:hover{background:rgba(199,168,108,.08);color:var(--doré)}

/* === 16. MODALE COFFRET (lot) — bloc consolidé (valeurs finales) === */
/* Conteneur & carte */
.lot-overlay[hidden],.lot-modal[hidden]{display:none}
@keyframes lotFade{from{opacity:0}to{opacity:1}}
.lot-overlay{
  position:fixed; inset:0;
  background:rgba(20,16,14,.38);
  backdrop-filter:blur(3px) saturate(120%);
  -webkit-backdrop-filter:blur(3px) saturate(120%);
  z-index:6001;
  animation:lotFade .18s ease;
}
.lot-modal{
  position:fixed; inset:0; z-index:6002;
  display:grid; place-items:center;
  padding:max(12px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left));
  overflow:auto; -webkit-overflow-scrolling:touch;
}
.lot-card{
  width:min(860px,92vw);
  max-height:min(92dvh,780px);
  background:#fff;
  border:1px solid var(--gris-perle);
  border-radius:16px;
  display:flex; flex-direction:column;
  box-shadow:0 12px 32px rgba(0,0,0,.18);
  overflow:hidden;
}
.lot-header{
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 18px;
  border-bottom:1px solid var(--gris-perle);
}
#lotTitle{
  font-family:'Cormorant Garamond',serif;
  font-weight:700; font-size:1.8rem; margin:0; color:var(--chocolat);
}
.lot-help{
  padding:10px 16px;
  border-bottom:1px solid var(--gris-perle);
  color:var(--texte); font-size:.98rem;
}
#lotRule{margin:0; padding:8px 16px 0; color:#6e625e; font-size:.96rem}
.lot-grid{
  padding:16px;
  display:grid; gap:14px;
  grid-template-columns:repeat(3,1fr);
  overflow:auto; flex:1 1 auto; -webkit-overflow-scrolling:touch;
}
@media (max-width:680px){.lot-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:420px){.lot-grid{grid-template-columns:1fr}}
.lot-item{
  border:1px solid var(--gris-perle);
  border-radius:14px;
  padding:10px; text-align:center; background:linear-gradient(180deg,#ffffff 0%,#fafafa 100%);
  transition:transform .15s ease, box-shadow .2s ease, border-color .2s ease;
}
.lot-item:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 22px rgba(0,0,0,.10);
  border-color:rgba(0,0,0,.12);
}
.lot-item img{width:96px; height:96px; object-fit:cover; border-radius:10px; margin:0 auto 8px}
.lot-name{font-weight:800; color:var(--chocolat); margin:6px 0 0}
.lot-qty{
  display:flex; align-items:center; justify-content:center;
  gap:8px; margin-top:8px; max-width:220px; margin-inline:auto;
}
.lot-qty .lot-minus,
.lot-qty .lot-plus{
  width:44px; height:44px;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:999px; border:1px solid var(--gris-perle); background:#fff;
  color:var(--chocolat); font-size:20px; font-weight:800; cursor:pointer;
  transition:background .15s, border-color .15s, transform .05s;
}
.lot-qty .lot-minus:hover,
.lot-qty .lot-plus:hover{background:#f2f2f2}
.lot-qty .lot-minus:disabled,
.lot-qty .lot-plus:disabled{opacity:.45; cursor:not-allowed}
.lot-input{
  width:70px; height:44px; padding:0; text-align:center;
  border:1px solid var(--gris-perle); border-radius:10px;
  font-weight:800; font-variant-numeric:tabular-nums; background:#fff;
}
.lot-close{
  --size:36px; width:var(--size); height:var(--size);
  border:1px solid var(--gris-perle); border-radius:999px; background:#fff;
  display:inline-flex; align-items:center; justify-content:center;
  cursor:pointer; position:relative;
  transition:background .2s, border-color .2s, transform .08s;
}
.lot-close::before,.lot-close::after{
  content:""; position:absolute; inset:0; margin:auto;
  width:16px; height:2px; border-radius:2px; background:var(--chocolat);
}
.lot-close::before{transform:rotate(45deg)}
.lot-close::after{transform:rotate(-45deg)}
.lot-close:hover{background:#f4f4f4}
.lot-close:active{transform:scale(.96)}
.lot-footer{
  position:sticky; bottom:0;
  background:rgba(255,255,255,.92);
  backdrop-filter:saturate(140%) blur(6px);
  -webkit-backdrop-filter:saturate(140%) blur(6px);
  box-shadow:0 -8px 20px rgba(0,0,0,.10);
  border-top:1px solid var(--gris-perle);
  padding:14px 16px;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
}
.lot-remaining{color:var(--chocolat); font-weight:700}
.lot-actions .btn-commande{min-width:260px; padding:.9rem 1.4rem; border-radius:999px}
.lot-actions .btn-commande:disabled{background:#e9e9e9; color:#777; transform:none}
.lot-modal button:focus-visible{outline:2px solid var(--doré); outline-offset:2px}
@media (prefers-reduced-motion:reduce){
  .lot-item, .lot-qty .lot-minus, .lot-qty .lot-plus{transition:none}
}

/* ================= 17. ACCUEIL Collection (grille de choix) ================= */

/* 17.A — Conteneur + titre */
.home-choices{max-width:1160px;margin:-36px auto 40px;padding:0 16px}
.choices-title{font-weight:700;font-size:1.6rem;color:var(--chocolat);text-align:center;margin:0 0 14px}

/* 17.B — Grille (base desktop) */
.home-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px;grid-auto-rows:160px;align-items:stretch}

/* 17.C — Tuiles : base + image + overlay + hover */
.tile{position:relative;display:block;height:100%;border:1px solid var(--gris-perle);border-radius:14px;overflow:hidden;background:#f6f6f6}
.tile img{width:100%;height:100%;object-fit:cover;display:block;transform:scale(1);transform-origin:center;transition:transform .4s ease-out;will-change:transform}
.tile::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 40%,rgba(0,0,0,.35))}
.tile:hover img,.tile:focus-visible img{transform:scale(1.08);transition-duration:6s}

/* 17.D — Label de tuile (base) */
.tile-label{position:absolute;left:12px;right:12px;bottom:12px;background:#fff;color:var(--chocolat);font-weight:800;text-align:center;border:1px solid var(--gris-perle);border-radius:999px;padding:10px 14px}

/* 17.E — Placement des tuiles (layout) */
.tile--left{grid-column:1;grid-row:1 / span 3}
.tile--mid1{grid-column:2;grid-row:1}
.tile--mid2{grid-column:2;grid-row:2}
.tile--mid3{grid-column:2;grid-row:3}
.tile--right{grid-column:3;grid-row:1 / span 3}

/* 17.F — Responsive ≤1024px (scroll-snap horizontal) */
@media (max-width:1024px){
  .home-grid{grid-template-columns:1fr 1fr 1fr;grid-auto-rows:160px;overflow-x:auto;-webkit-overflow-scrolling:touch;scroll-snap-type:x proximity}
  .tile{scroll-snap-align:start}
}

/* 17.G — Responsive ≤960px (2 colonnes) */
@media (max-width:960px){
  .home-grid{grid-template-columns:1fr 1fr;grid-auto-rows:160px}
  .tile--right{grid-column:1 / span 2;grid-row:4 / span 3}
}

/* 17.H — Responsive ≤560px (grille plus haute) */
@media (max-width:560px){
  .home-grid{grid-template-columns:repeat(3,minmax(240px,1fr));grid-auto-rows:180px}
}

/* 17.I — Labels visuels (verre dépoli) */
.home-grid .tile-label{
  position:absolute;left:12px;right:12px;bottom:12px;max-width:86%;margin-inline:auto;
  padding:12px 18px;border-radius:999px;
  background:linear-gradient(180deg,rgba(255,255,255,.86),rgba(255,255,255,.72));
  backdrop-filter:saturate(140%) blur(6px);-webkit-backdrop-filter:saturate(140%) blur(6px);
  border:1px solid rgba(0,0,0,.12);box-shadow:0 8px 24px rgba(0,0,0,.18);
  color:#1f1f1f;font-weight:800;letter-spacing:.02em;line-height:1.15;text-shadow:none;
  transition:background .25s ease,transform .18s ease,border-color .25s ease,box-shadow .25s ease;
  will-change:transform,background
}

/* 17.J — Label : hover/focus */
.tile:hover .tile-label,.tile:focus-visible .tile-label{
  background:linear-gradient(180deg,rgba(255,255,255,.96),rgba(255,255,255,.84));
  border-color:rgba(0,0,0,.18);box-shadow:0 10px 28px rgba(0,0,0,.22);transform:translateY(-2px)
}

/* 17.K — Focus sur tuile */
.home-grid .tile:focus-visible{outline:2px solid var(--doré);outline-offset:3px}

/* 17.L — Mobile ≤560px : label compact */
@media (max-width:560px){.home-grid .tile-label{padding:10px 14px;font-size:.95rem}}

/* 17.M — Carte notice (tuile d’info) */
.tile--notice{background:transparent;border:none;display:flex;align-items:stretch;box-shadow:none;overflow:visible}
.tile--notice .notice-inner{
  display:block;width:100%;padding:16px 18px;border-radius:18px;
  background:linear-gradient(180deg,#f6f6f6 0%,#ededed 45%,#e0e0e0 100%);
  border:1px solid rgba(0,0,0,.12);
  box-shadow:0 6px 18px rgba(0,0,0,.15),inset 0 1px 0 rgba(255,255,255,.7);
  color:#2a2a2a
}
.tile--notice .notice-inner strong{display:block;font-size:1.08rem;color:#1f1f1f;margin-bottom:4px}
.tile--notice .notice-inner p{margin:0;line-height:1.35}
.tile--notice .notice-inner:hover{
  background:linear-gradient(180deg,#fafafa 0%,#efefef 45%,#e4e4e4 100%);
  box-shadow:0 8px 22px rgba(0,0,0,.18),inset 0 1px 0 rgba(255,255,255,.75)
}

/* 17.N — Accessibilité : réduction des animations */
@media (prefers-reduced-motion:reduce){
  .home-grid .tile-label{transition:none;transform:none}
  .tile--notice .notice-inner{transition:none}
}


/* 17.O — FORCE STACK EN TABLETTE/PHONE SEULEMENT */
@media (max-width: 1024px){
  /* 1) La grille devient une colonne, point. */
  .home-choices .home-grid{
    display: flex !important;
    flex-direction: column !important;
    gap: 24px !important;
    padding-inline: 14px !important;
  }

  /* 2) Chaque bloc prend toute la largeur et casse toute mise en page précédente. */
  .home-choices .home-grid > *{
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    grid-column: 1 / -1 !important;
  }

  /* 3) Tuiles: bloc propre, grand, arrondi. */
  .home-choices .home-grid a.tile{
    position: relative !important;
    display: block !important;
    border-radius: 18px !important;
    overflow: hidden !important;
    box-shadow: 0 6px 18px rgba(0,0,0,.08) !important;
    background: #f7f7f5 !important;
  }
  .home-choices .home-grid a.tile img{
    display: block !important;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 16/9 !important;   /* visuels plus grands */
    object-fit: cover !important;
  }

  /* 4) Étiquette centrée, jamais coupée. */
  .home-choices .home-grid a.tile .tile-label{
    position: absolute !important;
    left: 50% !important;
    bottom: 14px !important;
    transform: translateX(-50%) !important;
    max-width: calc(100% - 32px) !important;
    padding: 10px 18px !important;
    border-radius: 999px !important;
    text-align: center !important;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    z-index: 1 !important;
  }

  /* 5) Carte info (tmid) = pleine largeur aussi. */
  .home-choices .home-grid .info-pro,
  .home-choices .home-grid .tmid{
    border-radius: 14px !important;
    padding: 14px 16px !important;
  }
}

/* ======================= 18. ANIMATIONS (générales) ======================= */
/* FadeUp titres */
@keyframes fadeUp{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.titre-assortiment,.sous-titre-assortiment{
  opacity:0;transform:translateY(6px);
  animation:fadeUp .8s cubic-bezier(.2,.7,.2,1) forwards
}
.titre-assortiment{animation-delay:.10s}
.sous-titre-assortiment{animation-delay:.30s}

/* ==================== 19. ALIGNEMENT ICÔNES — BLOC UNIFIÉ (desktop + mobile) ==================== */
/* 19.A — Variables desktop (état initial / scroll) */
:root{
  /* Sous-titre — icônes fruits */
  --tab-nudge:    16px; /* Tablette 22×34 */
  --mango-nudge:   7px; /* Mangue */
  --lemon-nudge:   7px; /* Citron */
  --cookie-nudge:  5px; /* Cookie */

  /* Header (hauteurs par défaut) — laisses ces valeurs si ailleurs tu les recalcules */
  --header-h-desktop:84px;
  --header-h-mobile:64px;
}
body.scrolled{
  --tab-nudge:     3px;
  --mango-nudge:   0.5px;
  --lemon-nudge:   1px;
  --cookie-nudge: -1px;
}

/* 19.B — Ligne du sous-titre unifiée */
.sous-titre-assortiment{
  display:inline-flex; align-items:baseline; line-height:1; gap:.55ch; transform:none !important;
}

/* 19.C — Conteneurs icônes du sous-titre (ne shrink pas) */
.sous-titre-assortiment .tab-icon,
.sous-titre-assortiment .sig-mango,
.sous-titre-assortiment .sig-lemon,
.sous-titre-assortiment .sig-cookie{
  display:inline-flex; align-items:baseline; flex:0 0 auto;
}

/* 19.D — Tablette (icône) : ajuster taille */
.sous-titre-assortiment .tab-icon svg{
  width: 1.6em;   /* ← avant 1.15em */
  height: auto;
  transform: translateY(var(--tab-nudge));
  transform-origin: center;
}


/* 19.E — Mangue : nudge desktop */
.sous-titre-assortiment .sig-mango{ display:inline-grid; place-items:center; line-height:0; }
.sous-titre-assortiment .sig-mango .mango-icon{
  width:1.15em; height:1.15em; vertical-align:middle;
  transform:translateY(var(--mango-nudge)); transform-origin:center;
}

/* 19.F — Citron : nudge desktop + affinages SVG optionnels */
.sous-titre-assortiment .sig-lemon{ display:inline-grid; place-items:center; line-height:0; }
.sous-titre-assortiment .sig-lemon .lemon-icon{
  width:1.15em; height:1.15em; vertical-align:middle;
  transform:translateY(var(--lemon-nudge)); transform-origin:center;
}
@media (prefers-reduced-motion:reduce){ .sig-lemon .lemon-icon *{ animation:none; } }

/* 19.G — Cookie : nudge desktop */
.sous-titre-assortiment .sig-cookie .cookie-icon{
  transform:translateY(var(--cookie-nudge)); transform-origin:center;
}

/* 19.H — MOBILE/TABLETTE (contrôle dessin) */
@media (max-width:1024px){
  /* 0) Variables mobiles (état initial + après scroll) */
  :root{
    /* Dessins du sous-titre — état initial */
    --tab-m-init:    -15px;
    --mango-m-init:   -8px;
    --lemon-m-init:   -8px;
    --cookie-m-init:  -7px;

    /* Dessins du sous-titre — après scroll (header condensé) */
    --tab-m-scroll:    -2px;
    --mango-m-scroll:   0px;
    --lemon-m-scroll:   0px;
    --cookie-m-scroll:  0px;

    /* Icônes à droite (Instagram / Panier) */
    --insta-m-init:   4px;   /* + descend / − monte */
    --cart-m-init:    1px;
    --insta-m-scroll: 2px;
    --cart-m-scroll:  0px;

    /* Tailles (optionnel) */
    --insta-size-m: 1.25rem;
    --cart-size-m:  1.25rem;
  }

  /* Sélecteurs d’état (mapping init/scroll → variables courantes) */
  :root{
    --tab-m:    var(--tab-m-init);
    --mango-m:  var(--mango-m-init);
    --lemon-m:  var(--lemon-m-init);
    --cookie-m: var(--cookie-m-init);
    --insta-m:  var(--insta-m-init);
    --cart-m:   var(--cart-m-init);
  }
  body.scrolled{
    --tab-m:    var(--tab-m-scroll);
    --mango-m:  var(--mango-m-scroll);
    --lemon-m:  var(--lemon-m-scroll);
    --cookie-m: var(--cookie-m-scroll);
    --insta-m:  var(--insta-m-scroll);
    --cart-m:   var(--cart-m-scroll);
  }

  /* 1) Grille header mobile/tablette (burger | centre | droite) */
  .header-chic .top-bar{
    display:grid;
    grid-template-columns:44px 1fr auto;
    align-items:center;
    gap:10px;
    min-height:64px;
    padding:10px 12px;
  }
  .nav-left{ display:none; }
  .menu-btn{
    grid-column:1/2;
    width:40px; height:40px;
    display:inline-flex; align-items:center; justify-content:center;
  }

  /* 2) Logo/texte — H1 visible au départ, masqué seulement au scroll */
  .logo{
    grid-column:2/3;
    position:static; transform:none; margin:0;
    display:flex; justify-content:center; text-align:center;
  }
  .titre-assortiment{
    position:static; width:auto; height:auto;
    clip:auto; clip-path:none; overflow:visible;
    margin:0 0 .05rem;
  }
  body.scrolled .titre-assortiment,
  .header-chic.header-condensed .titre-assortiment{
    position:absolute; width:1px; height:1px; margin:0; padding:0; border:0;
    clip:rect(0 0 0 0); clip-path:inset(50%); overflow:hidden; white-space:nowrap;
  }

  /* 3) Sous-titre (ligne et nudges “additionnels” mobiles) */
  .sous-titre-assortiment{
    display:inline-flex; align-items:center; height:40px; line-height:40px;
    margin:0; padding:0 .6rem; white-space:nowrap; overflow:visible; text-overflow:ellipsis;
  }
  /* Addition des nudges desktop + mobile via calc() */
  .sous-titre-assortiment .tab-icon svg{
    transform: translateY(calc(var(--tab-nudge, 0px) + var(--tab-m, 0px)));
  }
  .sous-titre-assortiment .sig-mango .mango-icon{
    transform: translateY(calc(var(--mango-nudge, 0px) + var(--mango-m, 0px)));
  }
  .sous-titre-assortiment .sig-lemon .lemon-icon{
    transform: translateY(calc(var(--lemon-nudge, 0px) + var(--lemon-m, 0px)));
  }
  .sous-titre-assortiment .sig-cookie .cookie-icon{
    transform: translateY(calc(var(--cookie-nudge, 0px) + var(--cookie-m, 0px)));
  }

  /* 4) Zone droite (Insta + Panier) + nudges verticaux */
  .header-right{
    grid-column:3/4;
    display:inline-flex; align-items:center; gap:.75rem;
    justify-self:end;
  }
  .header-right a, .instagram-link, .panier-link, .menu-btn{
    height:40px; line-height:40px;
    display:inline-flex; align-items:center;
  }
  .instagram-link i{
    font-size: var(--insta-size-m);
    transform: translateY(var(--insta-m));
  }
  .panier-link{ position:relative; }
  .panier-link::before{
    font-size: var(--cart-size-m); line-height:1;
    transform: translateY(var(--cart-m));
  }
  .panier-link #cartCount{
    position:absolute; top:-6px; right:-6px; left:auto;
  }
}

/* ==================== 20. PAGE TABLETTE — réduire l’écart Titre ↔ Sous-titre ==================== */
/* Ajustement */
body.page-tablette .header-chic .titre-assortiment{margin-bottom:.05rem !important}
body.page-tablette .header-chic .sous-titre-assortiment{margin-top:0 !important;line-height:1}

/* ==================== 21. Carte infos — style pro minimal + style CGV ==================== */
/* 21.A — Carte infos */
.info-pro{background:#fff;border:1px solid #e9e3df;border-radius:12px;padding:16px 18px;max-width:520px;margin-inline:auto;color:#2a2a2a;font-size:16px}
.info-pro__head{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.info-pro__icon{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:#faf5e6;border:1px solid #efe5c9;color:#866a21;font-size:.9rem;flex:0 0 26px}
.info-pro__title{font-weight:700;letter-spacing:.2px;line-height:1.25}
.info-pro__row{display:flex;gap:12px;padding:8px 0;border-top:1px solid #f2edea}
.info-pro__row:first-of-type{border-top:1px solid #f2edea}
.info-pro .k{min-width:110px;color:#6b6764}
.info-pro .v{font-weight:700;color:#2a2a2a}
@media (max-width:720px){.info-pro{padding:14px;border-radius:10px}.info-pro .k{min-width:96px}.info-pro__title{font-size:1rem}}

/* 21.B — Pages légales (CGV header + keypoints) */
.privacy{max-width:900px;margin:0 auto;padding:24px 16px}
.privacy-table{display:grid;grid-template-columns:1.35fr 1fr;background:#fff;border:1px solid var(--gris-perle);border-radius:12px;overflow:hidden}
.privacy-table>div{padding:12px 14px;font-size:1rem;line-height:1.45;color:var(--texte);border-bottom:1px solid #eee}
.privacy-table>div:nth-child(odd){border-right:1px solid #eee}
.privacy-table>div:nth-child(-n+2){background:linear-gradient(#fafafa,#f2f2f2);font-weight:700;color:var(--chocolat);border-bottom:1px solid #e6e6e6}
.privacy-table>div:nth-child(4n+3),.privacy-table>div:nth-child(4n+4){background:#fffdf8}
@media (max-width:700px){
  .privacy-table{grid-template-columns:1fr}
  .privacy-table>div:nth-child(odd){border-right:none}
  .privacy-table>div:nth-child(-n+2){position:sticky;top:calc(var(--header-h-mobile) + 8px);z-index:1}
  @media (min-width:1025px){.privacy-table>div:nth-child(-n+2){top:calc(var(--header-h-desktop) + 8px)}}
  .privacy-table>div:nth-child(4n+1),.privacy-table>div:nth-child(4n+2){background:#fff}
  .privacy-table>div:nth-child(4n+3),.privacy-table>div:nth-child(4n+4){background:#fffdf8}
}

/* 21.C - CGV — header + keypoints ===== */
.cgv-head{
  text-align:center;
  padding:clamp(14px,4vw,28px) 0 8px;
}
.cgv-head h1{
  margin:0 0 10px;
  font-family:"Cormorant Garamond",serif;
  font-weight:700;
  font-size:clamp(1.9rem,2.6vw,2.8rem);
  color:var(--chocolat);
  letter-spacing:.3px;
}
.cgv-keypoints{
  display:flex; flex-wrap:wrap; gap:10px; justify-content:center;
  margin:8px auto 0; padding:0 6px; max-width:980px;
}
.cgv-pill{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.55rem .85rem; border-radius:999px;
  background:linear-gradient(180deg,#fff,#faf8f3);
  border:1px solid rgba(43,33,26,.16);
  box-shadow:0 1px 0 rgba(255,255,255,.6) inset;
  color:var(--chocolat); font-weight:700; font-size:.98rem;
  white-space:nowrap;
}
.cgv-pill i{opacity:.9}

/* 21.D - CGV — alerte artisanale ===== */
.cgv-alert{
  display:flex; align-items:flex-start; gap:.6rem;
  margin:10px 0 0; padding:12px 14px;
  border:1px solid #efe5c9; border-radius:10px;
  background:#fffdf5; color:#2a2a2a; font-size:.98rem;
}
.cgv-alert i{color:#866a21; margin-top:2px}
.cgv-alert strong{color:var(--chocolat)}

/* Responsive */
@media (max-width:640px){
  .cgv-pill{font-size:.95rem}
  .cgv-alert{font-size:.95rem}
}


/* états cascade */
.reveal{
  opacity:0; transform:translateY(8px);
  will-change: opacity, transform;
}
.reveal.in{
  opacity:1; transform:none;
  transition: opacity var(--t,520ms) cubic-bezier(.22,.61,.36,1),
              transform var(--t,520ms) cubic-bezier(.22,.61,.36,1);
  transition-delay: var(--d,0ms);
}
@media (prefers-reduced-motion: reduce){
  .reveal{opacity:1; transform:none; transition:none;}
}

/* ======== 22. Tablette: Pile titre/sous-titre mobile ============ */

@media (max-width:1024px){
  /* Pile verticalement le bloc logo */
  .header-chic .logo{
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:center !important;
    text-align:center !important;
  }
  /* H1 visible à l’état initial */
  .header-chic .titre-assortiment{
    display:block !important;           /* empêche l’alignement côte à côte */
    margin:0 0 .05rem !important;
  }
  }

/* ========= 23. Rapproche Instagram ↔ Panier (mobile) ======== */
@media (max-width:1024px){
  .header-chic .top-bar{ column-gap:4px !important; }

  .header-chic .header-right{
    display:flex !important;
    align-items:center !important;
    gap:4px !important;           /* ← espace réduit */
    margin-right:2px !important;
  }

  /* Insta : icône seule, padding serré */
  .header-chic .instagram-link span{ display:none !important; }
  .header-chic .instagram-link{
    padding:0 .25rem !important;
  }
  .header-chic .instagram-link i{
    font-size:1.2rem !important;
  }

  /* Panier : collé à Insta, pas de marge superflue */
  .header-chic .panier-link{
    margin-left:0 !important;
    padding:0 .25rem !important;
    display:inline-flex !important;
    align-items:center !important;
    font-size:0 !important; /* si le texte "Panier" existe, on le compacte */
  }
  /* si tu utilises l’icône via ::before, garde une taille cohérente */
  .header-chic .panier-link::before{
    font-size:1.3rem !important;
    line-height:1 !important;
  }

  /* Badge quantité bien positionné et serré */
  .header-chic .panier-link #cartCount{
    top:-6px !important;
    right:-6px !important;
    left:auto !important;
  }
}

/* 24 — Mini (mobile) — titre/sous-titre équilibrés + panier toujours visible */
@media (max-width:1024px){
  /* grille compacte: burger | centre | droite */
  .mini-page .header-chic .top-bar{
    display:grid !important;
    grid-template-columns:44px 1fr auto !important;
    align-items:center !important;
    column-gap:6px !important;
  }

  /* titre un peu plus présent */
  .mini-page .header-chic .titre-assortiment{
    font-size:clamp(1.2rem,4.2vw,1.55rem) !important;
    line-height:1.1 !important;
    margin-bottom:2px !important;
  }

  /* 25. sous-titre plus petit en état initial (pas en scroll) */
  .mini-page .header-chic .sous-titre-assortiment{
    font-size:clamp(.62rem,2vw,.78rem) !important;
    line-height:1.15 !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    text-align:center !important;
  }

  /* au scroll: aligné aux menus, un peu plus lisible */
  body.scrolled .mini-page .header-chic .sous-titre-assortiment{
    display:inline-flex !important;
    align-items:center !important;
    height:38px !important; line-height:38px !important;
    font-size:clamp(.7rem,2.2vw,.9rem) !important;
    max-width:60vw !important;
    margin:0 !important; padding:0 .5rem !important;
  }

  /* zone droite compacte */
  .mini-page .header-chic .header-right{
    display:flex !important; align-items:center !important; gap:8px !important; flex-shrink:0 !important;
  }
  .mini-page .header-chic .instagram-link span{ display:none !important; }

  /* ——— PANIER: icône toujours visible, même si le texte est masqué ——— */
  .mini-page .header-chic .panier-link{
    display:inline-flex !important; align-items:center !important; justify-content:center !important;
    font-size:0 !important;        /* cache le mot "Panier" en mobile */
    position:relative !important; visibility:visible !important; opacity:1 !important;
  }
  .mini-page .header-chic .panier-link::before{
    content:"\f290" !important;    /* FA: shopping-basket (solide) */
    font-family:"Font Awesome 6 Free" !important;
    font-weight:900 !important;
    font-size:1.35rem !important;
    line-height:1 !important;
    display:inline-block !important;
    visibility:visible !important; opacity:1 !important;
  }
  .mini-page .header-chic .panier-link::after{ display:none !important; } /* coupe tout texte résiduel */

  /* badge quantité fixé */
  .mini-page .header-chic .panier-link #cartCount{
    position:absolute !important; top:-6px !important; right:-6px !important; left:auto !important;
    font-size:.75rem !important;
  }
}

/* ====== 26.GLOBAL FIX – pages sans hero : plus d'énorme vide ====== */
/* 26.A — Header compact */
/* 1) header compact par défaut sur les pages sans hero */
body:not(.has-hero){
  --header-h-desktop: 60px;
  --header-h-mobile: 56px;
}

body:not(.has-hero) header.header-chic .top-bar{
  min-height: 60px !important;
  padding-block: 8px !important;
}
@media (max-width:1024px){
  body:not(.has-hero) header.header-chic .top-bar{
    min-height: 56px !important;
    padding-block: 8px !important;
  }
}

/* 26.B — Contenu collé sous header */
/* 2) le contenu démarre pile sous le header (plus de +12/+14px) */
body:not(.has-hero) main{
  padding-top: var(--header-h-mobile) !important;
}
@media (min-width:1025px){
  body:not(.has-hero) main{
    padding-top: var(--header-h-desktop) !important;
  }
}

/* 26.D — Fil d’Ariane */
/* 4) en tête de page : pas de marge supplémentaire inutile */
nav[aria-label="Fil d’Ariane"]{ margin-top:0 !important; }


/* ======= 27 - Correctifs globaux mobile (version finale propre) ====== */
/* 1) Fiche produit responsive */
@media (max-width:900px){
  #product{
    grid-template-columns:1fr !important;
    gap:18px !important;
  }
  .product-gallery figure img{
    width:100% !important;
    height:auto !important;
    object-fit:cover !important;
  }
}

/* 2) HEADER mobile général */
@media (max-width:1024px){
  .header-chic .top-bar{
    display:grid !important;
    grid-template-columns:44px 1fr auto !important; /* burger | centre | droite */
    align-items:center !important;
    column-gap:6px !important;
  }

  /* titre global */
  .header-chic .titre-assortiment{
    font-size:clamp(1.15rem,4vw,1.5rem) !important;
    line-height:1.1 !important;
    margin-bottom:2px !important;
  }

  /* sous-titre réduit par défaut (état initial) */
  .header-chic .sous-titre-assortiment{
    font-size:clamp(.6rem,2vw,.8rem) !important;
    line-height:1.2 !important;
    text-align:center !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
  }

  /* zone droite : Insta + Panier rapprochés */
  .header-chic .header-right{
    display:flex !important;
    align-items:center !important;
    gap:8px !important;
    flex-shrink:0 !important;
  }
  .header-chic .instagram-link span{display:none !important;} /* icône seule */
  .header-chic .panier-link{
    display:inline-flex !important;
    align-items:center !important;
    font-size:0 !important; /* masque le mot “Panier” */
  }
  .header-chic .panier-link i{
    font-size:1.3rem !important;
  }

  /* Au scroll : fond semi-transparent, sous-titre aligné aux menus */
  body.scrolled .header-chic{
    background:rgba(255,255,255,.9) !important;
    box-shadow:0 2px 12px rgba(0,0,0,.08);
    backdrop-filter:blur(8px) saturate(140%);
  }
  body.scrolled .header-chic .sous-titre-assortiment{
    display:inline-flex !important;
    align-items:center !important;
    height:38px !important;
    line-height:38px !important;
    max-width:60vw !important;
    font-size:clamp(.7rem,2.3vw,.9rem) !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    white-space:nowrap !important;
    margin:0 !important;
    padding:0 .5rem !important;
  }
}

/* 3) Panier (drawer mobile) */
@media (max-width:640px){
  .popup-panier{
    right:auto !important;
    left:0 !important;
    width:100vw !important;
    max-width:100vw !important;
    height:100dvh !important;
    top:0 !important;
    bottom:0 !important;
    background:#fff !important;
    padding:env(safe-area-inset-top) 12px env(safe-area-inset-bottom) 12px !important;
    transform:translateX(100%);
    transition:transform .35s ease !important;
    display:flex;
    flex-direction:column;
    z-index:2000 !important;
  }
  .popup-panier.ouvert{transform:translateX(0);}
  .overlay-panier{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.4);
    z-index:1500;
    display:none !important;
  }
  .overlay-panier.actif{display:block !important;}
  .overlay-panier[hidden]{display:none !important;}
  .liste-produits{
    flex:1 1 auto;
    overflow-y:auto !important;
    -webkit-overflow-scrolling:touch;
  }
  .total-section,.footer-panier{
    flex-shrink:0;
  }
}


/* MOBILE — pastille 1 ligne, centrée, sans coupure */
@media (max-width:1024px){
  .home-choices .home-grid a.tile{ position: relative; }

  .home-choices .home-grid a.tile .tile-label{
    position: absolute;
    left: 50%;
    bottom: 14px;
    transform: translateX(-50%);          /* centre réel */
    width: fit-content;                    /* largeur = contenu */
    max-width: calc(100% - 24px);          /* borné à la tuile */
    box-sizing: border-box;

    display: flex;
    justify-content: center;
    align-items: center;

    white-space: nowrap;                   /* 1 ligne */
    overflow: visible;                     /* pas d'ellipsis */
    text-overflow: clip;

    padding: 8px 14px;
    font-size: min(3.6vw, 1rem);           /* ↓ rétrécit automatiquement en mobile */
    line-height: 1.2;
    z-index: 3;                            /* au-dessus de l’overlay */
  }

  /* Overlay sous le label (sinon il “mange” le texte) */
  .home-choices .home-grid a.tile::after{ z-index: 1; }
}

/* Sécurité écrans étroits (≤380px) : encore un cran */
@media (max-width:380px){
  .home-choices .home-grid a.tile .tile-label{
    padding: 8px 12px;
    font-size: min(3.4vw, .95rem);
  }
}

/* ======= 28 - MOBILE — style home menu collection ====== */

@media (max-width:1024px){
  .home-choices .home-grid a.tile{ position: relative !important; }

  .home-choices .home-grid a.tile .tile-label{
    position: absolute !important;
    bottom: 14px !important;
    right: auto !important;
    left: 50% !important;
    transform: translateX(-50%) !important;

    white-space: nowrap !important;
    width: fit-content !important;
    max-width: calc(100% - 24px) !important;

    padding: 8px 16px !important;
    font-size: clamp(.84rem, 3.6vw, 1.02rem) !important;
    z-index: 3 !important;
  }

  .home-choices .home-grid a.tile::after{ z-index: 1 !important; }
}





/* ===== Avis clients ===== */

.section-avis {
  border-top: 1px solid var(--gris-perle);
  border-bottom: 1px solid var(--gris-perle);
  background: #fff;
  margin: 22px 0 30px;
  padding: 16px 0 14px;
}

.section-avis__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 8px;
}

.section-avis__title {
  margin: 0;
  font-size: 1.6rem;
  letter-spacing: 0.02em;
}

/* Flèches + bande */
.avis-wrapper {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 340px; /* Hauteur fixe = on supprime toute raison d’avoir un scrollbar */
}

/* Bande horizontale des avis */
.avis-strip {
  flex: 1;
  display: flex;
  gap: 18px;
  overflow-x: auto;
  overflow-y: hidden;    /* empêche toute barre verticale */
  height: 100%;          /* même hauteur que le wrapper */
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}

/* Cartes */
.avis-card {
  flex: 0 0 auto;
  width: 320px;
  height: 100%;          /* cartes calées sur la hauteur */
  border-radius: 16px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.08);
}

.avis-card img {
  display: block;
  width: 100%;
  height: 100%;          /* remplissage propre */
  object-fit: cover;     /* pas de débordement */
}

/* Flèches */
.avis-arrow {
  cursor: pointer;
  border: none;
  background: transparent;
  padding: 0 4px;
  min-width: 32px;

  display: flex;
  align-items: center;
  justify-content: center;

  font-size: 2.2rem;
  line-height: 1;
  color: #6b3026;
}

.avis-arrow:hover {
  color: #3f1a12;
}

/* Mobile */
@media (max-width: 640px) {
  .section-avis {
    margin: 18px 0 24px;
    padding: 12px 0 10px;
  }

  .section-avis__title {
    font-size: 1.4rem;
  }

  .avis-wrapper {
    height: 260px; /* plus compact sur mobile */
    gap: 8px;
  }

  .avis-strip {
    gap: 12px;
  }

  .avis-card {
    width: 260px;
  }

  .avis-arrow {
    font-size: 1.8rem;
    min-width: 26px;
  }
}