/* =====================================================================
   ELISSA BAKERY — BOUTIQUE B2B
   Feuille de style principale
   ===================================================================== */

:root{
  /* ---- Socle : la gamme chocolat du logo ---- */
  --noir:        #140C08;
  --espresso:    #2A1A11;
  --cacao:       #46291A;
  --cuivre:      #C86A38;
  --cuivre-sombre:#A9522A;
  --cuivre-clair:#F0B183;

  /* ---- Accents : la couleur vient des emballages que vend la maison ---- */
  --miel:        #F2A93B;   /* jaune Blue Bead / vanille   */
  --framboise:   #D4426A;   /* fruits rouges, promotions   */
  --bleu:        #1B4F7C;   /* bleu Blue Bead              */
  --bleu-clair:  #2E8BC0;
  --pistache:    #6EA84F;   /* WhatsApp, disponibilité     */

  /* ---- Fonds et texte ---- */
  --ivoire:      #FFFCF8;
  --creme:       #FDF4EA;
  --sable:       #F7E9D8;
  --sable-fonce: #EBD7C0;
  --texte:       #2B1A10;
  --texte-doux:  #7A6354;
  --ligne:       rgba(43,26,16,.12);
  --ligne-forte: rgba(43,26,16,.26);
  --succes:      #2F7D5E;
  --alerte:      #B03A2E;

  /* ---- Formes : arrondies, pour une lecture plus douce ---- */
  --rayon:   12px;
  --rayon-l: 22px;
  --rayon-pilule: 999px;
  --ombre:   0 2px 6px rgba(43,26,16,.05), 0 14px 34px -22px rgba(43,26,16,.4);
  --ombre-h: 0 4px 10px rgba(43,26,16,.07), 0 30px 60px -28px rgba(43,26,16,.5);
  --ombre-cuivre: 0 14px 30px -14px rgba(200,106,56,.55);

  /* ---- Typographie ---- */
  --display: "Bebas Neue", "Haettenschweiler", Impact, sans-serif;
  --titre:   "Montserrat", "Helvetica Neue", Arial, sans-serif;
  --texte-f: "Poppins", "Helvetica Neue", Arial, sans-serif;
  --mono:    "Montserrat", "Helvetica Neue", Arial, sans-serif;

  /* ---- Rythme ---- */
  --souple:  cubic-bezier(.22,1,.36,1);
  --conteneur: 1280px;
  --gouttiere: clamp(18px, 4vw, 48px);
}

*,*::before,*::after{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; overflow-x:clip; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  overflow-x:clip; /* le menu mobile hors écran ne doit jamais créer de barre horizontale */
  background:var(--ivoire);
  color:var(--texte);
  font-family:var(--texte-f);
  font-size:15.5px;
  line-height:1.7;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; }

/* Bebas Neue : condensé, capitales, très haut. Il lui faut de l'interlettrage
   et une interligne serrée, sinon il se lit comme une enseigne mal réglée. */
h1,h2{ font-family:var(--display); font-weight:400; line-height:.94; margin:0 0 .35em;
       letter-spacing:.015em; text-transform:uppercase; }
h1{ font-size:clamp(2.6rem, 6vw, 4.6rem); }
h2{ font-size:clamp(2rem, 4.2vw, 3.2rem); }
h3,h4{ font-family:var(--titre); font-weight:600; line-height:1.25; margin:0 0 .5em; letter-spacing:-.005em; }
h3{ font-size:clamp(1.05rem, 1.8vw, 1.3rem); }
/* L'accent en italique : Poppins vient adoucir le bloc de capitales. */
h1 em, h2 em{ font-family:var(--texte-f); font-style:italic; font-weight:300;
              text-transform:none; letter-spacing:-.01em; font-size:.82em; }
p{ margin:0 0 1em; }

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

.conteneur{ width:100%; max-width:var(--conteneur); margin:0 auto; padding-inline:var(--gouttiere); }
.saut-contenu{ position:absolute; left:-9999px; }
.saut-contenu:focus{ left:12px; top:12px; z-index:999; background:var(--espresso); color:var(--ivoire); padding:10px 16px; }

/* ---------------------------------------------------------------
   ÉLÉMENTS DE TYPOGRAPHIE SIGNATURE
   --------------------------------------------------------------- */
.surtitre{
  font-family:var(--mono);
  font-size:.7rem;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--cuivre);
  margin:0 0 .9rem;
  display:flex; align-items:center; gap:.7rem;
}
.surtitre::after{ content:""; flex:1; height:1px; background:var(--ligne); max-width:120px; }
.surtitre--centre{ justify-content:center; }
.surtitre--centre::before{ content:""; flex:1; height:1px; background:var(--ligne); max-width:70px; }
.surtitre--centre::after{ max-width:70px; }

.donnee{ font-family:var(--mono); font-size:.72rem; letter-spacing:.06em; }

/* ---------------------------------------------------------------
   BOUTONS
   --------------------------------------------------------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  padding:.92rem 1.8rem;
  font-family:var(--titre);
  font-size:.74rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase;
  border:1px solid transparent; border-radius:var(--rayon-pilule);
  cursor:pointer; text-align:center;
  transition:background .3s var(--souple), color .3s, border-color .3s,
             transform .3s var(--souple), box-shadow .3s var(--souple);
}
.btn:hover{ transform:translateY(-2px); box-shadow:var(--ombre-h); }
.btn:active{ transform:translateY(0); }
.btn--principal{ background:var(--espresso); color:var(--ivoire); }
.btn--principal:hover{ background:var(--cacao); }
.btn--cuivre{ background:linear-gradient(120deg, var(--cuivre) 0%, var(--miel) 130%); color:#fff; }
.btn--cuivre:hover{ background:linear-gradient(120deg, var(--cuivre-sombre) 0%, var(--cuivre) 120%); box-shadow:var(--ombre-cuivre); }
.btn--contour{ border-color:var(--ligne-forte); color:var(--espresso); background:transparent; }
.btn--contour:hover{ border-color:var(--espresso); background:var(--espresso); color:var(--ivoire); }
.btn--clair{ border-color:rgba(251,248,244,.4); color:var(--ivoire); }
.btn--clair:hover{ background:var(--ivoire); color:var(--espresso); border-color:var(--ivoire); }
/* WhatsApp : bouton sombre, glyphe vert — la reconnaissance sans le bloc criard. */
.btn--wa{ background:var(--espresso); color:var(--ivoire); }
.btn--wa svg{ color:#3FD07A; }
.btn--wa:hover{ background:var(--cacao); }
/* Sur la fiche produit, WhatsApp est l'action secondaire : contour, pas bloc plein. */
.produit .btn--wa{ background:transparent; color:var(--texte); border:1px solid var(--ligne-forte); }
.produit .btn--wa:hover{ background:var(--sable); border-color:var(--espresso); }
.btn--bloc{ width:100%; }
.btn--petit{ padding:.6rem 1rem; font-size:.68rem; }
.btn[disabled]{ opacity:.45; pointer-events:none; }

.lien-fleche{
  font-family:var(--mono); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--cuivre); display:inline-flex; align-items:center; gap:.5rem;
  border-bottom:1px solid transparent; padding-bottom:2px; transition:.25s;
}
.lien-fleche:hover{ border-color:var(--cuivre); gap:.85rem; }

/* ---------------------------------------------------------------
   EN-TÊTE
   --------------------------------------------------------------- */
.bandeau{
  background:var(--espresso); color:rgba(251,248,244,.82);
  font-family:var(--mono); font-size:.68rem; letter-spacing:.1em;
  padding:.55rem 0;
}
.bandeau .conteneur{ display:flex; align-items:center; justify-content:space-between; gap:1.5rem; }
.bandeau__texte{ overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.bandeau__liens{ display:flex; gap:1.4rem; flex-shrink:0; }
.bandeau a:hover{ color:var(--cuivre-clair); }
@media (max-width:820px){ .bandeau__liens{ display:none; } .bandeau .conteneur{ justify-content:center; } }

.entete{
  position:sticky; top:0; z-index:60;
  background:rgba(251,248,244,.92);
  backdrop-filter:saturate(160%) blur(12px);
  border-bottom:1px solid var(--ligne);
  transition:box-shadow .3s;
}
.entete.est-collee{ box-shadow:0 10px 30px -22px rgba(36,23,16,.6); }
.entete__grille{
  display:grid; grid-template-columns:auto 1fr auto;
  align-items:center; gap:clamp(1rem,3vw,2.5rem);
  padding-block:clamp(.8rem,1.6vw,1.15rem);
}
.logo{ display:block; }
/* max-width:none indispensable : dans une piste de grille « auto »,
   le max-width:100% global fait collapser l'image à 0 de large. */
.logo img{ height:clamp(38px,4.6vw,54px); width:auto; max-width:none; }

.nav-principale{ display:flex; justify-content:center; }
.nav-principale ul{ display:flex; gap:clamp(1rem,2.2vw,2rem); list-style:none; margin:0; padding:0; }
.nav-principale a{
  font-size:.78rem; letter-spacing:.13em; text-transform:uppercase; font-weight:400;
  padding:.4rem 0; position:relative; white-space:nowrap;
}
.nav-principale a::after{
  content:""; position:absolute; left:0; right:100%; bottom:0; height:1px;
  background:var(--cuivre); transition:right .3s;
}
.nav-principale a:hover::after,.nav-principale a[aria-current]::after{ right:0; }

/* ---- Sous-menu du catalogue ---- */
.a-sous-menu{ position:relative; }
.a-sous-menu > a{ display:inline-flex; align-items:center; gap:.35rem; }
.a-sous-menu .chevron{
  width:13px; height:13px; fill:none; stroke:currentColor; stroke-width:1.6;
  stroke-linecap:round; stroke-linejoin:round; transition:transform .3s;
}
.a-sous-menu:hover .chevron, .a-sous-menu:focus-within .chevron{ transform:rotate(180deg); }
.sous-menu{
  position:absolute; top:100%; left:50%; transform:translate(-50%, 12px);
  padding-top:1.1rem; min-width:340px; z-index:60;
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .28s ease, transform .28s cubic-bezier(.22,1,.36,1);
}
.a-sous-menu:hover .sous-menu, .a-sous-menu:focus-within .sous-menu{
  opacity:1; visibility:visible; pointer-events:auto; transform:translate(-50%, 0);
}
.sous-menu__panneau{
  background:var(--espresso); color:var(--ivoire);
  border:1px solid rgba(192,113,74,.3);
  box-shadow:0 34px 60px -30px rgba(23,16,12,.6);
  padding:.6rem 0 0;
}
.sous-menu ul{ display:block; list-style:none; margin:0; padding:0; }
.sous-menu li{ display:block; }
.sous-menu li a{
  display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:.9rem;
  padding:.72rem 1.4rem; text-transform:none; letter-spacing:.01em; font-size:.9rem;
  color:var(--ivoire); white-space:normal; transition:background .2s, color .2s;
}
.sous-menu li a::after{ display:none; }
.sous-menu li a:hover{ background:rgba(192,113,74,.14); }
.sous-menu__num{ font-family:var(--mono); font-size:.66rem; color:var(--cuivre-clair); }
.sous-menu__nb{
  font-family:var(--mono); font-size:.66rem; color:rgba(251,248,244,.42);
  border:1px solid rgba(251,248,244,.16); border-radius:999px; padding:.05rem .45rem;
}
.sous-menu__tout{
  display:block; padding:.85rem 1.4rem; margin-top:.4rem;
  border-top:1px solid rgba(251,248,244,.12);
  font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; color:var(--cuivre-clair);
}
.sous-menu__tout::after{ display:none; }
.sous-menu__tout:hover{ background:rgba(192,113,74,.14); }

.entete__actions{ display:flex; align-items:center; gap:.35rem; }
.icone-btn{
  width:44px; height:44px; display:grid; place-items:center;
  background:none; border:none; cursor:pointer; position:relative; border-radius:50%;
  transition:background .2s;
}
.icone-btn:hover{ background:var(--sable); }
.icone-btn svg{ width:21px; height:21px; stroke:var(--texte); fill:none; stroke-width:1.4; }
.pastille{
  position:absolute; top:5px; right:4px; min-width:18px; height:18px; padding:0 4px;
  background:var(--cuivre); color:#fff; border-radius:9px;
  font-family:var(--mono); font-size:.62rem; display:grid; place-items:center; line-height:1;
}
.burger{ display:none; }
@media (max-width:1000px){
  .entete__grille{ grid-template-columns:auto 1fr auto; }
  .nav-principale{ display:none; }
  .burger{ display:grid; }
}

/* Recherche déroulante */
.barre-recherche{
  border-top:1px solid var(--ligne); background:var(--sable);
  max-height:0; overflow:hidden; transition:max-height .35s ease;
}
.barre-recherche.est-ouverte{ max-height:120px; }
.barre-recherche form{ display:flex; gap:.6rem; padding-block:1rem; }
.barre-recherche input{ flex:1; }

/* Menu mobile */
.menu-mobile{
  position:fixed; inset:0; z-index:80;
  visibility:hidden; background:var(--espresso); color:var(--ivoire);
  transform:translateX(100%); transition:transform .4s cubic-bezier(.5,0,.2,1);
  display:flex; flex-direction:column; padding:1.2rem var(--gouttiere) 2rem; overflow-y:auto;
}
.menu-mobile.est-ouvert{ transform:translateX(0); visibility:visible; }
@media (min-width:981px){ .menu-mobile{ display:none; } }
.menu-mobile__haut{ display:flex; justify-content:space-between; align-items:center; margin-bottom:2.5rem; }
.menu-mobile__haut img{ height:42px; }
.menu-mobile .icone-btn svg{ stroke:var(--ivoire); }
.menu-mobile .icone-btn:hover{ background:rgba(251,248,244,.1); }
.menu-mobile nav ul{ list-style:none; margin:0; padding:0; }
.menu-mobile nav a{
  display:block; padding:.9rem 0; border-bottom:1px solid rgba(251,248,244,.12);
  font-family:var(--display); font-size:1.5rem;
}
.menu-mobile__pied{ margin-top:auto; padding-top:2rem; font-family:var(--mono); font-size:.72rem; letter-spacing:.08em; color:rgba(251,248,244,.6); }
.menu-mobile__pied a{ color:var(--cuivre-clair); }

/* ---------------------------------------------------------------
   SLIDER D'ACCUEIL  (« rev slider »)
   --------------------------------------------------------------- */
.slider{
  position:relative; background:var(--espresso); color:var(--ivoire);
  overflow:hidden; isolation:isolate;
}
.slider__piste{ position:relative; min-height:clamp(480px,72vh,720px); }
.slide{
  position:absolute; inset:0; opacity:0; visibility:hidden;
  transition:opacity .9s ease, visibility .9s;
}
.slide.est-active{ opacity:1; visibility:visible; }

/* Fond d'ambiance : le visuel produit, très flouté, sert de matière colorée. */
.slide__ambiance{
  position:absolute; inset:-8%; z-index:-2;
  background-size:cover; background-position:center;
  filter:blur(46px) saturate(.85); opacity:.42; transform:scale(1.1);
}
.slide.est-active .slide__ambiance{ animation:kenburns 12s ease-out forwards; }
@keyframes kenburns{ from{ transform:scale(1.1); } to{ transform:scale(1.22); } }
.slide__voile{
  position:absolute; inset:0; z-index:-1;
  background:
    radial-gradient(120% 80% at 12% 50%, rgba(23,16,12,.92) 0%, rgba(23,16,12,.72) 45%, rgba(23,16,12,.55) 100%),
    linear-gradient(0deg, rgba(23,16,12,.5), rgba(23,16,12,.5));
}

.slide__grille{
  position:relative; height:100%;
  display:grid; grid-template-columns:1.06fr .94fr;
  gap:clamp(2rem,5vw,4.5rem); align-items:center;
  padding-block:clamp(2.8rem,7vh,4.5rem);
}
.slide__contenu{ display:flex; flex-direction:column; justify-content:center; }

/* Le produit, présenté comme une planche de catalogue et non en fond perdu. */
.slide__visuel{ position:relative; opacity:0; transform:translateY(30px) scale(.97);
  transition:opacity .9s cubic-bezier(.22,1,.36,1), transform .9s cubic-bezier(.22,1,.36,1); }
.slide.est-active .slide__visuel{ opacity:1; transform:none; transition-delay:.3s; }
.slide__visuel img{
  width:100%; max-width:460px; margin-left:auto;
  aspect-ratio:1/1; object-fit:cover; display:block;
  border:1px solid rgba(251,248,244,.16);
  box-shadow:0 40px 80px -40px rgba(0,0,0,.9);
}
.slide__visuel::after{
  content:""; position:absolute; right:-14px; bottom:-14px;
  width:min(460px,100%); height:100%;
  border:1px solid rgba(192,113,74,.55); pointer-events:none; z-index:-1;
}
@media (max-width:900px){
  .slide__grille{ grid-template-columns:1fr; }
  .slide__visuel{ display:none; }
  .slide__ambiance{ opacity:.5; filter:blur(38px) saturate(.9); }
  .slide__voile{ background:
    radial-gradient(130% 70% at 50% 42%, rgba(23,16,12,.82) 0%, rgba(23,16,12,.9) 100%),
    linear-gradient(0deg, rgba(23,16,12,.45), rgba(23,16,12,.45)); }
  .slider__piste{ min-height:clamp(420px,64vh,540px); }
}
.slide__surtitre,.slide__titre,.slide__texte,.slide__actions{
  opacity:0; transform:translateY(26px);
  transition:opacity .8s cubic-bezier(.22,1,.36,1), transform .8s cubic-bezier(.22,1,.36,1);
}
.slide.est-active .slide__surtitre{ opacity:1; transform:none; transition-delay:.25s; }
.slide.est-active .slide__titre  { opacity:1; transform:none; transition-delay:.42s; }
.slide.est-active .slide__texte  { opacity:1; transform:none; transition-delay:.58s; }
.slide.est-active .slide__actions{ opacity:1; transform:none; transition-delay:.72s; }

.slide__surtitre{
  font-family:var(--mono); font-size:.7rem; letter-spacing:.28em; text-transform:uppercase;
  color:var(--cuivre-clair); margin-bottom:1.4rem;
  display:flex; align-items:center; gap:.9rem;
}
.slide__surtitre::before{ content:""; width:40px; height:1px; background:var(--cuivre); }
.slide__titre{
  font-family:var(--display); font-size:clamp(2.4rem,6vw,4.6rem); line-height:1.02;
  font-weight:400; margin:0 0 1.2rem;
}
.slide__titre em{ display:block; font-style:italic; color:var(--cuivre-clair); }
.slide__texte{ font-size:clamp(.98rem,1.4vw,1.12rem); color:rgba(251,248,244,.8); max-width:46ch; margin-bottom:2.2rem; }
.slide__actions{ display:flex; flex-wrap:wrap; gap:.8rem; }

.slider__fleche{
  position:absolute; top:50%; transform:translateY(-50%); z-index:5;
  width:52px; height:52px; display:grid; place-items:center;
  background:rgba(251,248,244,.08); border:1px solid rgba(251,248,244,.25);
  border-radius:50%; cursor:pointer; transition:.25s;
}
.slider__fleche:hover{ background:var(--cuivre); border-color:var(--cuivre); }
.slider__fleche svg{ width:18px; height:18px; stroke:var(--ivoire); fill:none; stroke-width:1.6; }
.slider__fleche--prec{ left:clamp(10px,2vw,28px); }
.slider__fleche--suiv{ right:clamp(10px,2vw,28px); }
@media (max-width:760px){ .slider__fleche{ display:none; } }

.slider__puces{
  position:absolute; bottom:clamp(20px,4vh,38px); left:50%; transform:translateX(-50%);
  z-index:5; display:flex; gap:.75rem;
}
.slider__puce{
  width:34px; height:3px; background:rgba(251,248,244,.28);
  border:none; padding:0; cursor:pointer; position:relative; overflow:hidden;
}
.slider__puce span{ position:absolute; inset:0; background:var(--cuivre); transform:scaleX(0); transform-origin:left; }
.slider__puce.est-active span{ animation:remplir 7s linear forwards; }
@keyframes remplir{ from{ transform:scaleX(0); } to{ transform:scaleX(1); } }

@media (prefers-reduced-motion: reduce){
  .slide.est-active .slide__fond{ animation:none; transform:scale(1.06); }
  .slider__puce.est-active span{ animation:none; transform:scaleX(1); }
  .slide__surtitre,.slide__titre,.slide__texte,.slide__actions{ transition:none; opacity:1; transform:none; }
}

/* ---------------------------------------------------------------
   BANDE D'ARGUMENTS
   --------------------------------------------------------------- */
.arguments{ background:var(--espresso); color:var(--ivoire); border-top:1px solid rgba(251,248,244,.1); }
.arguments__grille{
  display:grid; grid-template-columns:repeat(4,1fr);
  padding-block:clamp(1.6rem,3vw,2.4rem);
}
.argument{ display:flex; gap:1rem; padding-inline:clamp(.8rem,2vw,1.8rem); border-left:1px solid rgba(251,248,244,.12); }
.argument:first-child{ border-left:none; padding-left:0; }
.argument svg{ width:26px; height:26px; stroke:var(--cuivre-clair); fill:none; stroke-width:1.2; flex-shrink:0; margin-top:3px; }
.argument h3{ font-family:var(--texte-f); font-size:.82rem; letter-spacing:.1em; text-transform:uppercase; margin:0 0 .25rem; font-weight:500; }
.argument p{ margin:0; font-size:.82rem; color:rgba(251,248,244,.62); line-height:1.5; }
@media (max-width:960px){
  .arguments__grille{ grid-template-columns:repeat(2,1fr); gap:1.6rem 0; }
  .argument:nth-child(odd){ border-left:none; padding-left:0; }
}
@media (max-width:520px){
  .arguments__grille{ grid-template-columns:1fr; gap:1.3rem; }
  .argument{ border-left:none; padding-left:0; }
}

/* ---------------------------------------------------------------
   SECTIONS
   --------------------------------------------------------------- */
.section{ padding-block:clamp(3.5rem,8vw,6.5rem); }
.section--sable{ background:var(--sable); }
.section--serre{ padding-block:clamp(2.5rem,5vw,4rem); }
.section__entete{ display:flex; align-items:flex-end; justify-content:space-between; gap:2rem; margin-bottom:clamp(2rem,4vw,3.2rem); }
.section__entete p{ color:var(--texte-doux); max-width:52ch; margin:0; }
.section__entete--centre{ flex-direction:column; align-items:center; text-align:center; }
@media (max-width:720px){ .section__entete{ flex-direction:column; align-items:flex-start; } }

/* ---------------------------------------------------------------
   CATÉGORIES
   --------------------------------------------------------------- */
.categories{ display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:1px; background:var(--ligne); border:1px solid var(--ligne); }
.categorie{
  background:var(--ivoire); padding:clamp(1.5rem,2.6vw,2.2rem);
  display:flex; flex-direction:column; gap:.5rem; min-height:170px;
  transition:background .3s, color .3s;
}
.categorie:hover{ background:var(--espresso); color:var(--ivoire); }
.categorie__num{ font-family:var(--mono); font-size:.68rem; letter-spacing:.16em; color:var(--cuivre); }
.categorie h3{ margin:0; font-size:1.22rem; }
.categorie p{ margin:0; font-size:.82rem; color:var(--texte-doux); line-height:1.5; }
.categorie:hover p{ color:rgba(251,248,244,.6); }
.categorie__compte{ margin-top:auto; font-family:var(--mono); font-size:.68rem; letter-spacing:.1em; color:var(--texte-doux); }
.categorie:hover .categorie__compte{ color:var(--cuivre-clair); }

/* ---------------------------------------------------------------
   FICHE PRODUIT (carte) — élément signature
   --------------------------------------------------------------- */
.grille-produits{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(255px,1fr));
  gap:clamp(1.2rem,2.4vw,2rem);
}
.produit-carte{
  background:var(--ivoire); border:1px solid var(--ligne);
  display:flex; flex-direction:column; position:relative;
  transition:border-color .3s, box-shadow .3s, transform .3s;
}
.produit-carte:hover{ border-color:var(--ligne-forte); box-shadow:var(--ombre-h); transform:translateY(-3px); }
.produit-carte__media{ position:relative; aspect-ratio:1/1; overflow:hidden; background:var(--sable); }
.produit-carte__media img{ width:100%; height:100%; object-fit:cover; transition:transform .7s cubic-bezier(.22,1,.36,1); }
.produit-carte:hover .produit-carte__media img{ transform:scale(1.05); }
.produit-carte__etiquettes{ position:absolute; top:12px; left:12px; display:flex; flex-direction:column; gap:6px; z-index:2; }
.etiquette{
  font-family:var(--mono); font-size:.6rem; letter-spacing:.14em; text-transform:uppercase;
  padding:.35rem .6rem; background:var(--espresso); color:var(--ivoire);
}
.etiquette--promo{ background:var(--cuivre); }
.etiquette--rupture{ background:var(--texte-doux); }

.produit-carte__corps{ padding:1.15rem 1.2rem 1.3rem; display:flex; flex-direction:column; flex:1; }
.produit-carte__marque{ font-family:var(--mono); font-size:.63rem; letter-spacing:.18em; text-transform:uppercase; color:var(--cuivre); margin-bottom:.45rem; }
.produit-carte__nom{ font-family:var(--titre); font-weight:600; font-size:1rem; line-height:1.35; margin:0 0 .8rem; letter-spacing:-.01em; }
.produit-carte__nom a:hover{ color:var(--cuivre); }

/* Bandeau de données professionnel : la signature du catalogue */
.fiche-donnees{
  display:grid; grid-template-columns:1fr 1fr;
  border-top:1px solid var(--ligne); border-bottom:1px solid var(--ligne);
  margin-bottom:1rem;
}
.fiche-donnees div{ padding:.55rem .1rem; }
.fiche-donnees div + div{ border-left:1px solid var(--ligne); padding-left:.75rem; }
.fiche-donnees dt{ font-family:var(--mono); font-size:.58rem; letter-spacing:.14em; text-transform:uppercase; color:var(--texte-doux); margin-bottom:.15rem; }
.fiche-donnees dd{ margin:0; font-family:var(--mono); font-size:.76rem; color:var(--texte); }

.produit-carte__prix{ display:flex; align-items:baseline; gap:.6rem; margin-bottom:1rem; }
/* Le bandeau de données se cale en bas : les cartes restent alignées
   même quand un nom de produit passe sur deux lignes. */
.produit-carte .fiche-donnees{ margin-top:auto; }
.prix{ font-family:var(--display); font-size:1.85rem; font-weight:400; letter-spacing:.02em; color:var(--cuivre-sombre); line-height:1; }
.prix small{ font-family:var(--texte-f); font-size:.68rem; letter-spacing:.1em; text-transform:uppercase; color:var(--texte-doux); }
.prix--barre{ font-family:var(--mono); font-size:.85rem; color:var(--texte-doux); text-decoration:line-through; }
.produit-carte__actions{ display:grid; grid-template-columns:1fr auto; gap:.5rem; }
.produit-carte__actions .btn--wa{ padding-inline:.85rem; }
.produit-carte__actions .btn--wa svg{ width:17px; height:17px; }

/* ---------------------------------------------------------------
   ENCART ENTREPRISES
   --------------------------------------------------------------- */
.encart-pro{
  background:var(--espresso); color:var(--ivoire);
  display:grid; grid-template-columns:1.05fr .95fr; align-items:center;
}
.encart-pro__texte{ padding:clamp(2.5rem,5vw,4.5rem); }
.encart-pro__texte h2{ color:var(--ivoire); }
.encart-pro__texte h2 em{ font-style:italic; color:var(--cuivre-clair); }
.encart-pro__texte p{ color:rgba(251,248,244,.72); max-width:48ch; }
.encart-pro__liste{ list-style:none; margin:0 0 2rem; padding:0; display:grid; gap:.7rem; }
.encart-pro__liste li{ display:flex; gap:.75rem; align-items:flex-start; font-size:.9rem; color:rgba(251,248,244,.82); }
.encart-pro__liste li::before{ content:"—"; color:var(--cuivre); flex-shrink:0; }
.encart-pro__actions{ display:flex; flex-wrap:wrap; gap:.8rem; }
.encart-pro__media{ align-self:stretch; min-height:340px; background-size:cover; background-position:center; }
@media (max-width:900px){
  .encart-pro{ grid-template-columns:1fr; }
  .encart-pro__media{ min-height:260px; order:-1; }
}

/* ---------------------------------------------------------------
   MARQUES
   --------------------------------------------------------------- */
.marques{ display:flex; flex-wrap:wrap; justify-content:center; gap:clamp(1.5rem,5vw,4rem); align-items:center; }
.marques span{
  font-family:var(--display); font-size:clamp(1.5rem,3vw,2.3rem); letter-spacing:.06em;
  color:var(--texte-doux); opacity:.7;
}
.marques span.marques__logo{
  opacity:1; width:clamp(96px,14vw,150px); height:clamp(56px,7vw,80px);
  display:grid; place-items:center;
}
.marques__logo img{ max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain; }

/* ---------------------------------------------------------------
   BOUTIQUE : filtres + liste
   --------------------------------------------------------------- */
.entete-page{ background:var(--sable); padding-block:clamp(2.2rem,5vw,3.6rem); border-bottom:1px solid var(--ligne); }
.entete-page h1{ margin:0 0 .3rem; }
.entete-page p{ margin:0; color:var(--texte-doux); max-width:60ch; }

.ariane{ margin-bottom:1rem; }
.ariane ol{ list-style:none; display:flex; flex-wrap:wrap; gap:.5rem; margin:0; padding:0; font-family:var(--mono); font-size:.68rem; letter-spacing:.1em; text-transform:uppercase; color:var(--texte-doux); }
.ariane li + li::before{ content:"/"; margin-right:.5rem; color:var(--ligne-forte); }
.ariane a:hover{ color:var(--cuivre); }

.boutique{ display:grid; grid-template-columns:250px minmax(0,1fr); gap:clamp(1.8rem,4vw,3.5rem); align-items:start; }
/* minmax(0,…) : sans cela, la rangée de pastilles défilantes impose sa
   largeur intrinsèque à la colonne et pousse le tri hors de l'écran. */
@media (max-width:900px){ .boutique{ grid-template-columns:minmax(0,1fr); } }

.filtres{ position:sticky; top:110px; }
.filtres__bloc{ margin-bottom:2.2rem; }
.filtres__bloc h3{ font-family:var(--texte-f); font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; padding-bottom:.7rem; border-bottom:1px solid var(--ligne-forte); margin-bottom:.9rem; }
.filtres ul{ list-style:none; margin:0; padding:0; display:grid; gap:.15rem; }
.filtres li a{ display:flex; justify-content:space-between; gap:1rem; padding:.42rem 0; font-size:.9rem; color:var(--texte-doux); transition:color .2s, padding .2s; }
.filtres li a:hover{ color:var(--cuivre); padding-left:.35rem; }
.filtres li a[aria-current]{ color:var(--espresso); font-weight:500; }
.filtres li a span{ font-family:var(--mono); font-size:.68rem; color:var(--ligne-forte); }

@media (max-width:900px){
  /* Sur mobile, les familles deviennent une rangée de pastilles défilantes :
     le catalogue reste visible sans avoir à faire défiler toute la colonne. */
  .filtres{ position:static; margin-bottom:.5rem; }
  .filtres__bloc{ margin-bottom:1.2rem; }
  .filtres__bloc:not(:first-child){ display:none; }
  .filtres ul{
    display:flex; gap:.5rem; overflow-x:auto; padding-bottom:.6rem;
    scrollbar-width:none; -ms-overflow-style:none;
    margin-inline:calc(var(--gouttiere) * -1); padding-inline:var(--gouttiere);
  }
  .filtres ul::-webkit-scrollbar{ display:none; }
  .filtres li a{
    white-space:nowrap; border:1px solid var(--ligne); padding:.5rem .85rem;
    background:var(--ivoire); font-size:.84rem;
  }
  .filtres li a:hover{ padding-left:.85rem; }
  .filtres li a[aria-current]{ background:var(--espresso); color:var(--ivoire); border-color:var(--espresso); }
  .filtres li a[aria-current] span{ color:rgba(251,248,244,.55); }
}

.barre-outils{ display:flex; justify-content:space-between; align-items:center; gap:1.5rem; flex-wrap:wrap; padding-bottom:1.2rem; margin-bottom:1.8rem; border-bottom:1px solid var(--ligne); }
.barre-outils__compte{ font-family:var(--mono); font-size:.72rem; letter-spacing:.1em; color:var(--texte-doux); }

.pagination{ display:flex; gap:.4rem; justify-content:center; margin-top:3rem; flex-wrap:wrap; }
.pagination a,.pagination span{
  min-width:42px; height:42px; display:grid; place-items:center; padding-inline:.6rem;
  border:1px solid var(--ligne); font-family:var(--mono); font-size:.78rem; transition:.2s;
}
.pagination a:hover{ border-color:var(--espresso); }
.pagination .est-active{ background:var(--espresso); color:var(--ivoire); border-color:var(--espresso); }

/* ---------------------------------------------------------------
   PAGE PRODUIT
   --------------------------------------------------------------- */
.produit{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,4.5rem); align-items:start; }
@media (max-width:880px){ .produit{ grid-template-columns:1fr; } }
.produit__media{ position:relative; }
.produit__media img{ width:100%; aspect-ratio:1/1; object-fit:cover; border:1px solid var(--ligne); background:var(--sable); display:block; }

/* Réassurance sous le visuel : occupe la colonne et répond aux objections d'achat. */
.reassurance{ list-style:none; margin:1.6rem 0 0; padding:0; display:grid; gap:1px; background:var(--ligne); border:1px solid var(--ligne); }
.reassurance li{ display:grid; grid-template-columns:auto 1fr; gap:.95rem; align-items:start; padding:1rem 1.2rem; background:var(--ivoire); }
.reassurance svg{ width:21px; height:21px; fill:none; stroke:var(--cuivre); stroke-width:1.3; stroke-linecap:round; stroke-linejoin:round; margin-top:.15rem; }
.reassurance strong{ display:block; font-size:.74rem; letter-spacing:.14em; text-transform:uppercase; font-weight:500; margin-bottom:.2rem; }
.reassurance span{ display:block; font-size:.85rem; color:var(--texte-doux); line-height:1.55; }
.produit__marque{ font-family:var(--mono); font-size:.7rem; letter-spacing:.2em; text-transform:uppercase; color:var(--cuivre); margin-bottom:.7rem; }
.produit h1{ margin-bottom:.6rem; }
.produit__accroche{ font-family:var(--display); font-style:italic; font-size:1.15rem; color:var(--texte-doux); margin-bottom:1.6rem; }
.produit__prix-bloc{ display:flex; align-items:baseline; gap:1rem; flex-wrap:wrap; padding-block:1.3rem; border-block:1px solid var(--ligne); margin-bottom:1.6rem; }
.produit__prix-bloc .prix{ font-size:2.3rem; }
.produit__kilo{ font-family:var(--mono); font-size:.76rem; letter-spacing:.06em; color:var(--texte-doux); }

.specs{ display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--ligne); border:1px solid var(--ligne); margin-bottom:1.8rem; }
.specs > div{ background:var(--ivoire); padding:.85rem 1rem; }
.specs dt{ font-family:var(--mono); font-size:.6rem; letter-spacing:.16em; text-transform:uppercase; color:var(--texte-doux); margin-bottom:.25rem; }
.specs dd{ margin:0; font-size:.92rem; }

.achat{ display:flex; gap:.7rem; align-items:stretch; flex-wrap:wrap; margin-bottom:1rem; }
.compteur{ display:flex; border:1px solid var(--ligne-forte); }
.compteur button{ width:44px; background:none; border:none; cursor:pointer; font-size:1.1rem; color:var(--texte-doux); transition:.2s; }
.compteur button:hover{ background:var(--sable); color:var(--espresso); }
.compteur input{ width:58px; border:none; text-align:center; font-family:var(--mono); font-size:.95rem; background:transparent; -moz-appearance:textfield; }
.compteur input::-webkit-outer-spin-button,.compteur input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
.achat .btn{ flex:1; min-width:180px; }

.parfums{ display:flex; flex-wrap:wrap; gap:.4rem; margin-bottom:1.6rem; }
.parfums span{ font-family:var(--mono); font-size:.68rem; letter-spacing:.08em; padding:.35rem .7rem; border:1px solid var(--ligne); color:var(--texte-doux); }

.onglets{ margin-top:clamp(3rem,6vw,5rem); border-top:1px solid var(--ligne); }
.onglets__liste{ display:flex; gap:2rem; border-bottom:1px solid var(--ligne); overflow-x:auto; }
.onglets__liste button{
  background:none; border:none; padding:1.1rem 0; cursor:pointer; white-space:nowrap;
  font-size:.76rem; letter-spacing:.16em; text-transform:uppercase; color:var(--texte-doux);
  border-bottom:2px solid transparent; margin-bottom:-1px; transition:.25s;
}
.onglets__liste button[aria-selected="true"]{ color:var(--espresso); border-color:var(--cuivre); }
.onglet-panneau{ padding-top:1.8rem; max-width:75ch; }
.onglet-panneau[hidden]{ display:none; }

/* ---------------------------------------------------------------
   PANIER & COMMANDE
   --------------------------------------------------------------- */
.mise-en-page-panier{ display:grid; grid-template-columns:1fr 380px; gap:clamp(1.8rem,4vw,3.2rem); align-items:start; }
@media (max-width:940px){ .mise-en-page-panier{ grid-template-columns:1fr; } }

.tableau-panier{ width:100%; border-collapse:collapse; }
.tableau-panier th{
  text-align:left; font-family:var(--mono); font-size:.62rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--texte-doux); font-weight:400; padding-bottom:.9rem; border-bottom:1px solid var(--ligne-forte);
}
.tableau-panier td{ padding-block:1.1rem; border-bottom:1px solid var(--ligne); vertical-align:middle; }
.ligne-produit{ display:flex; gap:1rem; align-items:center; }
.ligne-produit img{ width:76px; height:76px; object-fit:cover; border:1px solid var(--ligne); flex-shrink:0; }
.ligne-produit strong{ font-family:var(--display); font-size:1.02rem; font-weight:500; display:block; }
.ligne-produit .donnee{ color:var(--texte-doux); }
.tableau-panier .col-droite{ text-align:right; }
.supprimer{ background:none; border:none; cursor:pointer; color:var(--texte-doux); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; transition:color .2s; }
.supprimer:hover{ color:var(--alerte); }
@media (max-width:680px){
  .tableau-panier thead{ display:none; }
  .tableau-panier tr{ display:grid; grid-template-columns:1fr auto; gap:.4rem 1rem; padding-block:1.1rem; border-bottom:1px solid var(--ligne); }
  .tableau-panier td{ border:none; padding:0; }
  .tableau-panier td:first-child{ grid-column:1/-1; }
}

.recap{ background:var(--sable); border:1px solid var(--ligne); padding:clamp(1.4rem,2.5vw,2rem); position:sticky; top:110px; }
.recap h3{ font-family:var(--texte-f); font-size:.74rem; letter-spacing:.18em; text-transform:uppercase; padding-bottom:.9rem; border-bottom:1px solid var(--ligne-forte); }
.recap__ligne{ display:flex; justify-content:space-between; gap:1rem; padding-block:.55rem; font-size:.92rem; }
.recap__ligne span:last-child{ font-family:var(--mono); font-size:.88rem; }
.recap__total{ display:flex; justify-content:space-between; align-items:baseline; gap:1rem; margin-top:.8rem; padding-top:1rem; border-top:1px solid var(--ligne-forte); }
.recap__total strong{ font-family:var(--display); font-size:1.7rem; font-weight:500; }
.recap .btn{ margin-top:1.3rem; }
.recap__note{ font-size:.78rem; color:var(--texte-doux); margin-top:1rem; line-height:1.5; }
@media (max-width:940px){ .recap{ position:static; } }

/* ---------------------------------------------------------------
   FORMULAIRES
   --------------------------------------------------------------- */
.champ{ margin-bottom:1.15rem; }
.champ label{ display:block; font-family:var(--mono); font-size:.64rem; letter-spacing:.14em; text-transform:uppercase; color:var(--texte-doux); margin-bottom:.45rem; }
.champ .requis{ color:var(--cuivre); }
input[type=text],input[type=email],input[type=tel],input[type=password],input[type=number],input[type=search],input[type=url],select,textarea{
  width:100%; padding:.8rem .95rem; font-family:var(--texte-f); font-size:.95rem;
  background:var(--ivoire); border:1px solid var(--ligne-forte); border-radius:var(--rayon);
  color:var(--texte); transition:border-color .2s, box-shadow .2s;
}
select{ appearance:none; background-image:url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236F5B4D' stroke-width='1.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right .8rem center; background-size:18px; padding-right:2.4rem; }
textarea{ min-height:120px; resize:vertical; }
input:focus,select:focus,textarea:focus{ outline:none; border-color:var(--cuivre); box-shadow:0 0 0 3px rgba(192,113,74,.13); }
.grille-champs{ display:grid; grid-template-columns:1fr 1fr; gap:0 1.1rem; }
@media (max-width:640px){ .grille-champs{ grid-template-columns:1fr; } }
.aide{ font-size:.78rem; color:var(--texte-doux); margin-top:.35rem; }

.bloc-formulaire{ background:var(--ivoire); border:1px solid var(--ligne); padding:clamp(1.4rem,3vw,2.2rem); margin-bottom:1.4rem; }
.bloc-formulaire h3{ font-family:var(--texte-f); font-size:.74rem; letter-spacing:.18em; text-transform:uppercase; margin-bottom:1.4rem; padding-bottom:.8rem; border-bottom:1px solid var(--ligne); }
.bloc-formulaire h3 em{ font-family:var(--mono); font-style:normal; color:var(--cuivre); margin-right:.6rem; }

.choix{ display:grid; gap:.6rem; }
.choix label{
  display:flex; gap:.8rem; align-items:flex-start; padding:.9rem 1rem;
  border:1px solid var(--ligne-forte); cursor:pointer; transition:.2s;
  font-family:var(--texte-f); font-size:.92rem; letter-spacing:normal; text-transform:none; color:var(--texte); margin:0;
}
.choix label:hover{ border-color:var(--cuivre); }
.choix input:checked + span{ font-weight:500; }
.choix label:has(input:checked){ border-color:var(--cuivre); background:rgba(192,113,74,.05); }
.choix small{ display:block; color:var(--texte-doux); font-size:.78rem; }

.alerte{ padding:.9rem 1.1rem; margin-bottom:1.4rem; border-left:3px solid; font-size:.92rem; }
.alerte--ok{ background:rgba(47,125,94,.08); border-color:var(--succes); color:#1F5A42; }
.alerte--ko{ background:rgba(176,58,46,.07); border-color:var(--alerte); color:#8A2C22; }
.alerte--info{ background:rgba(192,113,74,.08); border-color:var(--cuivre); color:var(--cacao); }

/* ---------------------------------------------------------------
   CONFIRMATION
   --------------------------------------------------------------- */
.confirmation{ max-width:660px; margin:0 auto; text-align:center; }
.confirmation__ref{
  font-family:var(--mono); font-size:1.05rem; letter-spacing:.14em;
  display:inline-block; padding:.7rem 1.4rem; border:1px dashed var(--ligne-forte); margin-bottom:1.8rem;
}
.confirmation__actions{ display:flex; gap:.8rem; justify-content:center; flex-wrap:wrap; margin-top:2rem; }
.recap-commande{ text-align:left; border:1px solid var(--ligne); margin-top:2.5rem; }
.recap-commande h3{ padding:1rem 1.2rem; margin:0; background:var(--sable); font-family:var(--texte-f); font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; }
.recap-commande table{ width:100%; border-collapse:collapse; }
.recap-commande td{ padding:.75rem 1.2rem; border-bottom:1px solid var(--ligne); font-size:.9rem; }
.recap-commande tr:last-child td{ border-bottom:none; font-weight:500; }
.recap-commande .col-droite{ text-align:right; font-family:var(--mono); font-size:.86rem; white-space:nowrap; width:1%; }

/* ---------------------------------------------------------------
   ÉTAT VIDE
   --------------------------------------------------------------- */
.vide{ text-align:center; padding-block:clamp(3rem,8vw,5rem); }
.vide svg{ width:52px; height:52px; stroke:var(--ligne-forte); fill:none; stroke-width:1; margin-bottom:1.2rem; }
.vide h2{ margin-bottom:.5rem; }
.vide p{ color:var(--texte-doux); max-width:44ch; margin:0 auto 1.8rem; }

/* ---------------------------------------------------------------
   CONTENU ÉDITORIAL
   --------------------------------------------------------------- */
.prose{ max-width:70ch; }
.prose h3{ margin-top:2rem; }
.prose ul{ padding-left:1.2rem; }
.prose li{ margin-bottom:.4rem; }
.prose a{ color:var(--cuivre); border-bottom:1px solid var(--cuivre-clair); }

/* ---------------------------------------------------------------
   PIED DE PAGE
   --------------------------------------------------------------- */
.pied{ background:var(--noir); color:rgba(251,248,244,.7); padding-block:clamp(3rem,6vw,4.5rem) 0; margin-top:auto; }
.pied__grille{ display:grid; grid-template-columns:1.5fr 1fr 1fr 1.3fr; gap:clamp(1.8rem,4vw,3rem); padding-bottom:3rem; }
@media (max-width:900px){ .pied__grille{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .pied__grille{ grid-template-columns:1fr; } }
.pied img{ height:52px; width:auto; margin-bottom:1.2rem; }
.pied h4{ font-family:var(--texte-f); font-size:.68rem; letter-spacing:.2em; text-transform:uppercase; color:var(--ivoire); margin-bottom:1.1rem; }
.pied ul{ list-style:none; margin:0; padding:0; display:grid; gap:.55rem; }
.pied a{ font-size:.88rem; transition:color .2s; }
.pied a:hover{ color:var(--cuivre-clair); }
.pied p{ font-size:.88rem; line-height:1.7; }
.pied__contact li{ display:flex; gap:.7rem; font-size:.88rem; }
.pied__contact svg{ width:16px; height:16px; stroke:var(--cuivre); fill:none; stroke-width:1.5; flex-shrink:0; margin-top:5px; }
.pied__bas{
  border-top:1px solid rgba(251,248,244,.12); padding-block:1.5rem;
  display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap;
  font-family:var(--mono); font-size:.68rem; letter-spacing:.08em; color:rgba(251,248,244,.45);
}

/* ---------------------------------------------------------------
   BOUTON WHATSAPP FLOTTANT
   --------------------------------------------------------------- */
.wa-flottant{
  position:fixed; right:18px; bottom:18px; z-index:70;
  width:56px; height:56px; border-radius:50%; background:var(--espresso);
  border:1px solid rgba(192,113,74,.55);
  display:grid; place-items:center; box-shadow:0 14px 34px -12px rgba(23,16,12,.75);
  transition:transform .25s, background .25s;
}
.wa-flottant:hover{ transform:scale(1.06); background:var(--cacao); }
.wa-flottant svg{ width:28px; height:28px; fill:#3FD07A; }

/* ---------------------------------------------------------------
   RÉVÉLATION AU DÉFILEMENT
   --------------------------------------------------------------- */
.reveler{ opacity:0; transform:translateY(22px); transition:opacity .7s ease, transform .7s cubic-bezier(.22,1,.36,1); }
.reveler.est-visible{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){ .reveler{ opacity:1; transform:none; transition:none; } }

body{ display:flex; flex-direction:column; min-height:100vh; }
main{ flex:1; }

/* =====================================================================
   COUCHE COULEUR & FLUIDITÉ
   Ajoutée après le socle : ces règles priment sur celles du dessus.
   Principe : la couleur vient des emballages que vend la maison —
   le bleu Blue Bead, le jaune vanille, le rouge des fruits — et sert à
   guider l'œil, jamais à décorer au hasard.
   ===================================================================== */

::selection{ background:var(--miel); color:var(--espresso); }
html{ scroll-padding-top:120px; }
body{ background:var(--ivoire); }

/* ---------- Surtitres : Montserrat capitales, pastille cuivre ---------- */
.surtitre{
  font-family:var(--titre); font-weight:700; font-size:.68rem; letter-spacing:.22em;
  color:var(--cuivre-sombre);
}
.surtitre::after, .surtitre--centre::before{ background:linear-gradient(90deg, var(--cuivre) 0%, transparent 100%); height:2px; }
.donnee, .lien-fleche{ font-family:var(--titre); font-weight:600; }
.lien-fleche{ color:var(--cuivre-sombre); }
.lien-fleche:hover{ border-color:var(--cuivre); }

/* ---------- Bandeau et en-tête ---------- */
.bandeau{
  background:linear-gradient(90deg, var(--espresso) 0%, var(--cacao) 55%, var(--espresso) 100%);
  font-family:var(--titre); font-weight:500; font-size:.7rem; letter-spacing:.06em;
  border-bottom:2px solid var(--cuivre);
}
.nav-principale a, .icone-btn, .sous-menu a{ font-family:var(--titre); font-weight:600; }
.nav-principale a{ letter-spacing:.08em; font-size:.76rem; }
.pastille{ background:var(--framboise); color:#fff; font-family:var(--titre); font-weight:700; }

/* ---------- Slider ---------- */
.slide__voile{
  background:
    radial-gradient(90% 70% at 78% 30%, rgba(46,139,192,.30) 0%, transparent 62%),
    radial-gradient(70% 60% at 8% 82%, rgba(242,169,59,.24) 0%, transparent 60%),
    linear-gradient(102deg, rgba(20,12,8,.95) 0%, rgba(20,12,8,.86) 42%, rgba(20,12,8,.6) 100%);
}
.slide__surtitre{ font-family:var(--titre); font-weight:700; letter-spacing:.24em; color:var(--miel); }
.slide__titre{ letter-spacing:.02em; }
.slide__titre em{ color:var(--cuivre-clair); }
.slide__texte{ font-size:1.02rem; color:rgba(255,252,248,.86); }
.slide__visuel img{ border-radius:var(--rayon-l); border-color:rgba(255,252,248,.22); }
.slide__visuel::after{ border-radius:var(--rayon-l); border-color:var(--miel); }
.slider__puce{ border-radius:var(--rayon-pilule); overflow:hidden; }
.slider__fleche{ border-radius:var(--rayon-pilule); backdrop-filter:blur(6px); transition:background .3s var(--souple), transform .3s var(--souple); }
.slider__fleche:hover{ background:var(--cuivre); border-color:var(--cuivre); transform:scale(1.08); }

/* ---------- Bande d'arguments : un liseré de couleur par promesse ---------- */
.arguments{ background:linear-gradient(180deg, var(--espresso) 0%, var(--noir) 100%); }
.argument{ position:relative; }
.argument h3{ font-family:var(--titre); font-weight:700; font-size:.78rem; letter-spacing:.12em; }
.argument:nth-child(1) svg{ stroke:var(--miel); }
.argument:nth-child(2) svg{ stroke:var(--pistache); }
.argument:nth-child(3) svg{ stroke:var(--bleu-clair); }
.argument:nth-child(4) svg{ stroke:var(--cuivre-clair); }

/* ---------- Sections ---------- */
.section--sable{ background:linear-gradient(180deg, var(--creme) 0%, var(--sable) 100%); }

/* ---------- Catégories : une couleur par famille ---------- */
/* Six familles : trois par rangée sur grand écran, jamais d'orpheline. */
.categories{
  background:transparent; border:none; gap:clamp(.8rem,1.4vw,1.1rem);
  grid-template-columns:repeat(3,1fr);
}
@media (max-width:900px){ .categories{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .categories{ grid-template-columns:1fr; } }
.categorie{
  border:1px solid var(--ligne); border-radius:var(--rayon-l);
  position:relative; overflow:hidden; isolation:isolate;
  transition:transform .35s var(--souple), box-shadow .35s var(--souple), border-color .35s;
}
/* Le liseré supérieur porte la couleur de la famille. */
.categorie::before{
  content:""; position:absolute; inset:0 0 auto 0; height:4px;
  background:var(--teinte, var(--cuivre)); transition:height .35s var(--souple);
}
/* Halo diffus dans l'angle, sans arête visible. */
.categorie::after{
  content:""; position:absolute; inset:auto -10% -30% auto; width:260px; height:260px;
  background:radial-gradient(circle at 65% 70%, var(--teinte, var(--cuivre)) 0%, transparent 68%);
  opacity:.14; transition:transform .5s var(--souple), opacity .35s; z-index:-1;
}
.categorie:nth-child(6n+1){ --teinte:var(--cuivre); }
.categorie:nth-child(6n+2){ --teinte:var(--miel); }
.categorie:nth-child(6n+3){ --teinte:var(--framboise); }
.categorie:nth-child(6n+4){ --teinte:var(--bleu-clair); }
.categorie:nth-child(6n+5){ --teinte:var(--pistache); }
.categorie:nth-child(6n+6){ --teinte:var(--bleu); }
.categorie:hover{
  background:var(--ivoire); color:var(--texte);
  transform:translateY(-6px); box-shadow:var(--ombre-h); border-color:var(--teinte);
}
.categorie:hover::before{ height:7px; }
.categorie:hover::after{ transform:scale(1.25); opacity:.26; }
.categorie:hover p{ color:var(--texte-doux); }
.categorie__num{ font-family:var(--display); font-size:1.5rem; letter-spacing:.04em; color:var(--teinte, var(--cuivre)); line-height:1; }
.categorie h3{ font-size:1.1rem; }
.categorie__compte{
  margin-top:auto; align-self:flex-start; font-family:var(--titre); font-weight:600;
  font-size:.64rem; letter-spacing:.1em; text-transform:uppercase;
  padding:.28rem .7rem; border-radius:var(--rayon-pilule);
  background:color-mix(in srgb, var(--teinte, var(--cuivre)) 14%, transparent);
  color:color-mix(in srgb, var(--teinte, var(--cuivre)) 78%, var(--espresso));
}
.categorie:hover .categorie__compte{ color:color-mix(in srgb, var(--teinte) 80%, var(--espresso)); }

/* ---------- Cartes produits ---------- */
.produit-carte{ border-radius:var(--rayon-l); overflow:hidden; background:var(--ivoire); }
.produit-carte:hover{ transform:translateY(-6px); border-color:var(--cuivre-clair); }
.produit-carte__media{ background:var(--creme); }
.produit-carte__marque{ font-family:var(--titre); font-weight:700; color:var(--bleu); }
.etiquette{
  font-family:var(--titre); font-weight:700; border-radius:var(--rayon-pilule);
  padding:.34rem .75rem; box-shadow:0 6px 16px -8px rgba(43,26,16,.6);
}
.etiquette--promo{ background:var(--framboise); }
.etiquette--rupture{ background:var(--bleu); }
.produit-carte__etiquettes .etiquette:not(.etiquette--promo):not(.etiquette--rupture){
  background:var(--miel); color:var(--espresso);
}

/* Le bandeau de données : fond crème, chiffres au cuivre */
.fiche-donnees{
  background:var(--creme); border:1px solid var(--ligne); border-radius:var(--rayon);
  padding:.15rem .3rem; margin-bottom:1.1rem;
}
.fiche-donnees div + div{ border-left:1px solid var(--sable-fonce); }
.fiche-donnees dt{ font-family:var(--titre); font-weight:700; font-size:.55rem; }
.fiche-donnees dd{ font-family:var(--titre); font-weight:600; font-size:.78rem; color:var(--espresso); }
.prix small{ font-family:var(--titre); font-weight:600; }
.prix--barre{ font-family:var(--titre); font-weight:500; color:var(--framboise); opacity:.75; }

/* ---------- Encart entreprises ---------- */
.encart-pro{ border-radius:var(--rayon-l); overflow:hidden; position:relative; }
.encart-pro__texte{
  background:
    radial-gradient(80% 90% at 0% 0%, rgba(27,79,124,.42) 0%, transparent 62%),
    radial-gradient(70% 80% at 100% 100%, rgba(242,169,59,.2) 0%, transparent 60%),
    var(--espresso);
}
.encart-pro__liste li::before{ content:"✓"; color:var(--pistache); font-weight:700; }

/* ---------- Boutique ---------- */
.entete-page{ background:linear-gradient(135deg, var(--creme) 0%, var(--sable) 100%); border-bottom:none; }
.ariane{ font-family:var(--titre); font-weight:600; }
.filtres__bloc h3{ font-family:var(--titre); font-weight:700; letter-spacing:.14em; }
.filtres li a{ border-radius:var(--rayon-pilule); padding:.42rem .8rem; transition:all .28s var(--souple); }
.filtres li a:hover{ background:var(--creme); color:var(--cuivre-sombre); padding-left:.8rem; }
.filtres li a[aria-current]{ background:var(--espresso); color:var(--ivoire); }
.filtres li a[aria-current] span{ color:var(--miel); }
.barre-outils__compte{ font-family:var(--titre); font-weight:600; }
.barre-outils select, .champ select, .champ input, .champ textarea{ border-radius:var(--rayon); }
.pagination a, .pagination span{ border-radius:var(--rayon-pilule); font-family:var(--titre); font-weight:600; }
.pagination a:hover{ background:var(--cuivre); border-color:var(--cuivre); color:#fff; }

/* ---------- Fiche produit ---------- */
.produit__media img, .produit__galerie img{ border-radius:var(--rayon-l); }
.specs{ background:var(--creme); border-radius:var(--rayon); border:1px solid var(--ligne); }
.specs dt{ font-family:var(--titre); font-weight:700; }
.specs dd{ font-family:var(--titre); font-weight:600; }
.parfums span{ border-radius:var(--rayon-pilule); font-family:var(--titre); font-weight:600; background:var(--creme); transition:all .28s var(--souple); }
.parfums span:hover{ background:var(--miel); border-color:var(--miel); color:var(--espresso); }
.compteur{ border-radius:var(--rayon-pilule); overflow:hidden; }
.compteur button{ transition:background .25s, color .25s; }
.compteur button:hover{ background:var(--cuivre); color:#fff; }
.onglets button{ font-family:var(--titre); font-weight:600; transition:color .25s, border-color .25s; }
.onglets button[aria-selected="true"]{ color:var(--cuivre-sombre); border-color:var(--cuivre); }
.reassurance li{ color:var(--texte-doux); }

/* ---------- Panier, formulaires, alertes ---------- */
.recap{ background:linear-gradient(160deg, var(--creme) 0%, var(--sable) 100%); border-radius:var(--rayon-l); border-color:var(--sable-fonce); }
.recap__total strong{ font-family:var(--display); font-size:2.1rem; color:var(--cuivre-sombre); letter-spacing:.02em; }
.recap__ligne span:last-child{ font-family:var(--titre); font-weight:600; }
.ligne-produit img{ border-radius:var(--rayon); }
.bloc-formulaire{ border-radius:var(--rayon-l); background:var(--ivoire); border:1px solid var(--ligne); }
.bloc-formulaire h2{ font-family:var(--titre); font-weight:700; font-size:.82rem; letter-spacing:.16em; text-transform:uppercase; }
.champ label{ font-family:var(--titre); font-weight:600; }
.champ input:focus, .champ textarea:focus, .champ select:focus{ border-color:var(--cuivre); box-shadow:0 0 0 4px rgba(200,106,56,.14); }
.choix label{ border-radius:var(--rayon); transition:all .28s var(--souple); }
.choix label:hover{ border-color:var(--cuivre-clair); background:var(--creme); }
.choix input:checked + span, .choix label:has(input:checked){ border-color:var(--cuivre); background:var(--creme); }
.alerte{ border-radius:var(--rayon); font-family:var(--texte-f); }
.alerte--ok{ border-left:4px solid var(--pistache); }
.alerte--ko{ border-left:4px solid var(--framboise); }
.alerte--info{ border-left:4px solid var(--bleu-clair); }
.confirmation__ref{ border-radius:var(--rayon-pilule); font-family:var(--titre); font-weight:700; border-color:var(--cuivre); color:var(--cuivre-sombre); }
.recap-commande{ border-radius:var(--rayon-l); overflow:hidden; }
.recap-commande h3{ background:var(--creme); font-family:var(--titre); font-weight:700; }

/* ---------- Pied de page ---------- */
.pied{ background:linear-gradient(180deg, var(--espresso) 0%, var(--noir) 100%); }
.pied h4{ font-family:var(--titre); font-weight:700; letter-spacing:.16em; font-size:.7rem; text-transform:uppercase; color:var(--miel); }
.pied__contact svg{ stroke:var(--miel); }
.pied__bas{ font-family:var(--titre); font-weight:500; font-size:.72rem; }
.pied a:hover{ color:var(--miel); }

/* ---------- Bouton WhatsApp flottant ---------- */
.wa-flottant{
  background:linear-gradient(135deg, #25D366 0%, #128C7E 100%);
  box-shadow:0 12px 30px -10px rgba(18,140,126,.75);
  transition:transform .35s var(--souple), box-shadow .35s var(--souple);
}
.wa-flottant:hover{ transform:scale(1.08) translateY(-2px); box-shadow:0 18px 38px -10px rgba(18,140,126,.85); }

/* ---------- Fluidité générale ---------- */
a, button, .categorie, .produit-carte, .etiquette{ -webkit-tap-highlight-color:transparent; }
.reveler{ transition:opacity .75s var(--souple), transform .75s var(--souple); }
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
}

/* Accroche produit : Poppins en italique léger, plus lisible que le condensé. */
.produit__accroche{
  font-family:var(--texte-f); font-style:italic; font-weight:300;
  font-size:1.05rem; color:var(--texte-doux); text-transform:none; letter-spacing:0;
}
/* Titre de fiche produit : un cran plus bas que le H1 de page. */
.produit h1{ font-size:clamp(2.2rem,3.6vw,3.1rem); }

/* =====================================================================
   SLIDER — MODE « VISUEL SEUL »
   L'affiche produit occupe toute la scène, le lien se pose dessous.
   Rien d'autre : les visuels d'Elissa portent déjà leur message.
   ===================================================================== */
/* ---------------------------------------------------------------
   1. Les quatre ambiances de pâtisserie
   Chaque diapositive reçoit sa couleur : elle habille toute la
   largeur de l'écran, l'affiche produit se pose au centre.
   --------------------------------------------------------------- */
.ambiance--caramel  { --amb:#E8A13A; --amb-2:#B9541F; --amb-fond:#3A1E0E; }
.ambiance--framboise{ --amb:#E4657F; --amb-2:#8E1F3E; --amb-fond:#33121C; }
.ambiance--pistache { --amb:#9BC56B; --amb-2:#2F6127; --amb-fond:#16220F; }
.ambiance--glacage  { --amb:#63B6DF; --amb-2:#1B4F7C; --amb-fond:#0F2233; }

.slide--image .slide__ambiance{ opacity:.42; filter:blur(58px) saturate(1.5); }
.slide--image .slide__voile{
  background:
    radial-gradient(120% 95% at 50% 8%,  color-mix(in srgb, var(--amb) 34%, transparent) 0%, transparent 58%),
    radial-gradient(85% 70% at 8% 92%,   color-mix(in srgb, var(--amb-2) 55%, transparent) 0%, transparent 62%),
    radial-gradient(85% 70% at 92% 88%,  color-mix(in srgb, var(--amb) 26%, transparent) 0%, transparent 60%),
    linear-gradient(168deg,
      color-mix(in srgb, var(--amb-2) 42%, var(--amb-fond)) 0%,
      var(--amb-fond) 46%,
      var(--noir) 100%);
}

/* ---------------------------------------------------------------
   2. Décor plein écran : le disque « assiette », l'arc de glaçage
   et la poussière de sucre. Purement CSS, aucune image à charger.
   --------------------------------------------------------------- */
.slide__decor{ position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:0; }

/* Le disque : l'assiette sur laquelle l'affiche est posée. */
.slide__disque{
  position:absolute; left:50%; top:48%; transform:translate(-50%,-50%) scale(.86);
  width:min(74vw, 780px); aspect-ratio:1/1; border-radius:50%;
  background:radial-gradient(circle at 38% 32%,
             color-mix(in srgb, var(--amb) 30%, transparent) 0%,
             color-mix(in srgb, var(--amb-2) 22%, transparent) 55%,
             transparent 72%);
  opacity:0; transition:opacity 1.1s var(--souple), transform 1.4s var(--souple);
}
.slide.est-active .slide__disque{ opacity:1; transform:translate(-50%,-50%) scale(1); }

/* L'arc : un trait de glaçage qui traverse toute la largeur. */
.slide__arc{
  position:absolute; left:-12%; right:-12%; top:50%; height:min(78vw,860px);
  transform:translateY(-46%);
  border-radius:50%;
  border:1px solid color-mix(in srgb, var(--amb) 42%, transparent);
  border-bottom-color:transparent; border-left-color:transparent;
  opacity:0; transition:opacity 1.3s var(--souple) .2s;
}
.slide.est-active .slide__arc{ opacity:.7; }

/* Les grains : une poussière de sucre, à peine perceptible. */
/* Poussière de sucre : deux trames de points, effacées au centre pour
   ne jamais gêner la lecture de l'affiche. */
.slide__grains{
  position:absolute; inset:0; opacity:.85;
  background-image:
    radial-gradient(circle, color-mix(in srgb, var(--amb) 85%, transparent) 1.8px, transparent 2px),
    radial-gradient(circle, rgba(255,252,248,.6) 1.3px, transparent 1.6px);
  background-size:64px 64px, 101px 101px;
  background-position:0 0, 31px 44px;
  -webkit-mask-image:radial-gradient(105% 85% at 50% 50%, transparent 34%, #000 76%);
          mask-image:radial-gradient(105% 85% at 50% 50%, transparent 34%, #000 76%);
}

/* Vermicelles de décor : les vraies couleurs d'un plan de travail de
   pâtisserie. Deux couches inclinées, dessinées en ombres portées. */
.slide__grains::before,
.slide__grains::after{
  content:""; position:absolute; width:15px; height:5px; border-radius:999px;
  opacity:0; transition:opacity 1.2s var(--souple) .35s;
}
.slide__grains::before{
  left:9%; top:24%; transform:rotate(-24deg); background:var(--miel);
  box-shadow:
     92px  118px 0 var(--framboise),
    -34px  212px 0 var(--pistache),
     146px 318px 0 var(--ivoire),
     18px  402px 0 var(--bleu-clair),
     168px  46px 0 var(--cuivre-clair),
     62px  486px 0 var(--framboise);
}
.slide__grains::after{
  right:9%; top:30%; transform:rotate(31deg); background:var(--bleu-clair);
  box-shadow:
    -104px  96px 0 var(--miel),
     28px  208px 0 var(--ivoire),
    -152px 312px 0 var(--framboise),
    -46px  398px 0 var(--pistache),
    -178px  38px 0 var(--miel),
    -70px  470px 0 var(--cuivre-clair);
}
.slide.est-active .slide__grains::before,
.slide.est-active .slide__grains::after{ opacity:.9; }

/* ---------------------------------------------------------------
   3. La scène : pleine largeur, l'affiche au centre
   --------------------------------------------------------------- */
.slide__vitrine{
  position:relative; z-index:1; height:100%; width:100%;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:clamp(1.1rem,2.2vw,1.7rem);
  padding-inline:var(--gouttiere);
  /* La marge basse réserve la place des puces sous le bouton. */
  padding-block:clamp(1.8rem,4vh,3rem) clamp(4.6rem,7.5vh,5.8rem);
}
.slide__cadre{
  display:block; position:relative; max-width:100%; flex:0 0 auto; min-height:0;
  border-radius:clamp(16px,2vw,26px); overflow:hidden;
  border:1px solid color-mix(in srgb, var(--amb) 45%, transparent);
  box-shadow:0 46px 90px -40px rgba(0,0,0,.92),
             0 0 0 10px color-mix(in srgb, var(--amb) 10%, transparent);
  opacity:0; transform:translateY(28px) scale(.97);
  transition:opacity .85s var(--souple), transform .85s var(--souple), box-shadow .45s var(--souple);
}
.slide.est-active .slide__cadre{ opacity:1; transform:none; transition-delay:.12s; }
/* height:auto + max-height : le cadre épouse exactement l'image,
   sinon la boîte se contracte et rogne le bas du visuel. */
.slide__cadre img{
  display:block; width:auto; height:auto;
  max-width:100%; max-height:clamp(270px, 54vh, 520px);
}
a.slide__cadre:hover{
  transform:translateY(-4px);
  box-shadow:0 54px 100px -36px rgba(0,0,0,.95),
             0 0 0 14px color-mix(in srgb, var(--amb) 16%, transparent);
}

.slide__lien, .slide__legende{
  opacity:0; transform:translateY(16px);
  transition:opacity .8s var(--souple), transform .8s var(--souple);
}
.slide.est-active .slide__lien,
.slide.est-active .slide__legende{ opacity:1; transform:none; transition-delay:.34s; }
/* Le bouton prend la couleur de l'ambiance. */
/* Le teinte foncée domine : le libellé blanc reste lisible sur les
   quatre ambiances, y compris la pistache et la framboise. */
.slide__lien.btn--cuivre{
  background:linear-gradient(118deg, var(--amb-2) 0%,
             color-mix(in srgb, var(--amb) 55%, var(--amb-2)) 100%);
  color:#fff; border:1px solid color-mix(in srgb, var(--amb) 60%, transparent);
  box-shadow:0 16px 34px -16px rgba(0,0,0,.8);
}
.slide__lien.btn--cuivre:hover{
  background:linear-gradient(118deg, var(--amb) 0%, var(--amb-2) 120%);
  border-color:color-mix(in srgb, var(--amb) 85%, transparent);
  box-shadow:0 20px 42px -14px color-mix(in srgb, var(--amb) 75%, transparent);
}
.slide__legende{
  margin:0; font-family:var(--titre); font-weight:600; font-size:.82rem;
  letter-spacing:.14em; text-transform:uppercase; color:rgba(255,252,248,.8);
}

/* Puces et flèches prennent aussi la teinte du moment. */
.slide--image ~ .slider__puces{ bottom:26px; }
.slider__puce.est-active span{ background:var(--amb, var(--cuivre)); }

@media (max-width:900px){
  .slide__cadre img{ max-height:clamp(230px, 42vh, 340px); }
  .slide__vitrine{ gap:1rem; }
  .slide__disque{ width:118vw; }
  .slide__grains{ background-size:48px 48px, 78px 78px; opacity:.55; }
  /* Les vermicelles encombreraient un écran étroit. */
  .slide__grains::before, .slide__grains::after{ display:none; }
}

/* La piste se resserre quand toutes les diapositives sont en visuel seul. */
/* Sans la bande de promesses juste dessous, la scène peut respirer. */
.slider--vitrine .slider__piste{ min-height:clamp(460px,72vh,700px); }
@media (max-width:900px){ .slider--vitrine .slider__piste{ min-height:clamp(380px,60vh,520px); } }

/* La bande de promesses en bas de page : un liseré la sépare des marques. */
.arguments{ border-top:2px solid var(--cuivre); }

/* =====================================================================
   BANNIÈRE D'ACCUEIL
   Une image large, un voile dégradé, un texte posé dessus.
   ===================================================================== */
.banniere{
  position:relative; display:block; overflow:hidden;
  border-radius:var(--rayon-l);
  transition:transform .4s var(--souple), box-shadow .4s var(--souple);
}
a.banniere:hover{ transform:translateY(-4px); box-shadow:var(--ombre-h); }
.banniere img{
  display:block; width:100%; height:clamp(230px,34vw,400px);
  object-fit:cover; transition:transform .8s var(--souple);
}
a.banniere:hover img{ transform:scale(1.04); }
.banniere__contenu{
  position:absolute; inset:0;
  display:flex; flex-direction:column; align-items:flex-start; justify-content:center;
  gap:.2rem; padding:clamp(1.6rem,4vw,3.4rem);
  color:var(--ivoire);
  background:linear-gradient(96deg,
    rgba(20,12,8,.92) 0%, rgba(20,12,8,.78) 38%,
    rgba(20,12,8,.34) 68%, rgba(20,12,8,.08) 100%);
}
.banniere__contenu .surtitre{ color:var(--miel); margin-bottom:.5rem; }
.banniere__contenu .surtitre::after{ background:linear-gradient(90deg, var(--miel) 0%, transparent 100%); }
.banniere__contenu h2{ color:var(--ivoire); margin:0 0 .5rem; max-width:16ch; }
.banniere__contenu h2 em{ color:var(--cuivre-clair); }
.banniere__texte{ margin:0 0 1.2rem; max-width:44ch; color:rgba(255,252,248,.82); font-size:.95rem; }
.banniere__contenu .btn{ pointer-events:none; }

@media (max-width:640px){
  .banniere img{ height:clamp(260px,58vw,320px); }
  .banniere__contenu{
    background:linear-gradient(180deg, rgba(20,12,8,.35) 0%, rgba(20,12,8,.9) 62%);
    justify-content:flex-end;
  }
  .banniere__contenu h2{ max-width:none; }
}