/* ============================================================
   AJOUTS SITE COMPLET — méga-menu, débordements, pages internes
   ============================================================ */

.saut{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--vert);color:#fff;padding:12px 20px;border-radius:0 0 12px 0;font-weight:700;
}
.saut:focus{left:0}

/* ---------- navigation : méga-menu ---------- */
.nav__in{position:relative}
.nav__links>li{position:static}
.nav__links>li>a{display:flex;align-items:center;gap:6px}
.nav__chev{width:15px;height:15px;transition:transform .25s}
.nav__mega-parent:hover .nav__chev,
.nav__mega-parent:focus-within .nav__chev{transform:rotate(180deg)}
.nav__links>li>a[aria-current]{background:var(--t-vert);color:var(--vert-d)}

.mega{
  position:absolute;left:0;right:0;top:100%;z-index:60;
  background:var(--card);border-top:1px solid var(--trait);
  box-shadow:0 26px 50px -30px rgba(26,39,52,.45);
  opacity:0;visibility:hidden;transform:translateY(-10px);
  transition:opacity .22s ease, transform .28s cubic-bezier(.2,.9,.3,1.1), visibility .22s;
}
.nav__mega-parent:hover>.mega,
.nav__mega-parent:focus-within>.mega,
.mega:hover{opacity:1;visibility:visible;transform:translateY(0)}
.mega__in{
  display:grid;grid-template-columns:1fr minmax(240px,300px);
  gap:clamp(18px,2.4vw,32px);padding-top:30px;padding-bottom:34px;align-items:start;
}
.mega__titre{
  font-family:var(--sans);font-size:11.5px;font-weight:800;letter-spacing:.18em;
  text-transform:uppercase;color:var(--gris-2);margin-bottom:14px;grid-column:1/-1;
}
.mega__rayons{display:grid;grid-template-columns:1fr 1fr;gap:4px 8px}
.mega__rayon{
  display:flex;gap:14px;align-items:center;padding:15px 16px;border-radius:18px;
  transition:background .22s, transform .22s;
}
.mega__rayon:hover{background:var(--t-vert);transform:translateX(3px)}
.mega__ic{
  width:42px;height:42px;border-radius:50%;background:var(--ic);color:#fff;
  display:grid;place-items:center;flex:none;
}
.mega__ic svg{width:22px;height:22px;fill:currentColor}
.mega__rayon b{display:block;font-family:var(--disp);font-weight:600;font-size:16px;color:var(--encre);line-height:1.2}
.mega__rayon i{display:block;font-style:normal;font-size:13px;color:var(--gris);margin-top:2px}
.mega__tout{
  grid-column:1/-1;margin-top:8px;
  display:inline-flex;align-items:center;gap:9px;padding:11px 12px;
  font-family:var(--disp);font-weight:600;font-size:15.5px;color:var(--vert-d);
  transition:gap .22s;
}
.mega__tout:hover{gap:15px}
.mega__tout svg{width:16px;height:16px}

.mega__vedette{
  display:block;background:var(--t-menthe);border-radius:22px;padding:20px 22px 24px;
  transition:transform .25s cubic-bezier(.2,.9,.3,1.2);
}
.mega__vedette:hover{transform:translateY(-4px)}
.mega__etiq{
  display:inline-block;background:var(--ic-rose);color:#fff;border-radius:999px;
  padding:5px 12px;font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
}
.mega__vedette img{width:62%;margin:6px auto 12px}
.mega__vedette--photo{background:var(--t-ciel)}
.mega__vedette--photo img{width:100%;border-radius:14px;aspect-ratio:16/9;object-fit:cover;margin:14px 0 12px}
.mega__vedette b{display:block;font-family:var(--disp);font-weight:600;font-size:17px;color:var(--encre);line-height:1.2}
.mega__vedette i{display:block;font-style:normal;font-size:13.5px;color:var(--gris);margin-top:5px}

/* ---------- navigation mobile ---------- */
.nav__burger{
  display:none;width:44px;height:44px;border:0;background:transparent;
  flex-direction:column;justify-content:center;gap:5px;cursor:pointer;padding:0 10px;
}
.nav__burger span{display:block;height:2.5px;border-radius:2px;background:var(--encre);transition:transform .3s, opacity .2s}
.nav__burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
.nav__burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav__burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}
.menu-mobile{
  border-top:1px solid var(--trait);background:var(--card);
  max-height:min(70vh,560px);overflow-y:auto;padding:18px 0 26px;
}
.menu-mobile a{
  display:block;padding:12px 0;font-family:var(--disp);font-weight:500;font-size:18px;
  border-bottom:1px solid var(--trait);
}
.menu-mobile .mega__titre{margin:22px 0 6px}
.menu-mobile .mega__titre:first-child{margin-top:0}
@media (max-width:1080px){
  .nav__burger{display:flex;margin-left:auto}
  .nav__links{display:none}
}
@media (min-width:1081px){.menu-mobile{display:none !important}}

/* ---------- débordements : le visuel sort du cadre ---------- */
/* le fond arrondi devient une couche à part, ce qui laisse les produits déborder */
.cadre__fond{position:absolute;inset:0;z-index:0;border-radius:var(--rond);overflow:hidden}

.hero__box{overflow:visible;background:none}
.hero__box::before{display:none}
.hero__box .cadre__fond{background:linear-gradient(118deg, #7ED4F6 0%, #9DE9CE 48%, #E4F58A 100%)}
.hero__box .cadre__fond::after{
  content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse 55% 70% at 22% 42%, rgba(255,255,255,.55), transparent 70%);
}
/* Le flacon dépasse en haut du bloc.
   La colonne démarre plus haut que le bloc, grâce à une marge négative sur un élément
   étiré ; son overflow:hidden coupe les côtés sans créer de défilement horizontal. */
.hero__cans{
  align-self:stretch;position:relative;padding-bottom:0;z-index:3;
  min-height:clamp(230px,26vw,340px);
  margin-top:calc(-1 * clamp(60px,8vw,102px));
  overflow:visible;
}
.hero__cans img{
  position:absolute;left:50%;bottom:0;
  width:auto;max-width:none;height:100%;
  transform:translateX(-50%);z-index:3;
}
@keyframes flot{
  0%,100%{transform:translate(-50%,0) rotate(0)}
  50%    {transform:translate(-50%,-14px) rotate(-1.2deg)}
}

.agenda__box{overflow:visible;background:none}
.agenda__box::before{display:none}
.agenda__box .cadre__fond{background:linear-gradient(126deg, #7ED4F6 0%, #A8E4F7 55%, #C9F0E4 100%)}
.agenda__box .cadre__fond::after{
  content:'';position:absolute;width:340px;height:340px;left:-120px;top:-140px;
  background:rgba(255,255,255,.5);border-radius:50%;
}
/* Le téléphone est dimensionné par sa largeur : il remplit sa colonne sans être
   rogné sur les côtés, et dépasse en haut parce qu'il est plus haut que le bloc.
   Calé sur le bord droit du bloc plutôt que centré, la main garde toute sa marge. */
.agenda__ph{margin-top:0;overflow:visible;min-height:clamp(300px,34vw,460px)}
.agenda__ph img{
  position:absolute;right:0;left:auto;bottom:0;transform:none;
  width:min(100%,620px);max-width:none;height:auto;
  animation-name:tel-droite;
}
/* le centrage n'étant plus dans le transform, l'animation n'a plus à le reprendre */
@keyframes tel-droite{
  0%,100%{transform:translateY(0) rotate(0)}
  50%    {transform:translateY(-16px) rotate(-1.6deg)}
}
.agenda__notif{top:8%;left:6%}

@media (max-width:900px){
  .hero__cans{min-height:clamp(190px,42vw,290px);margin-top:calc(-1 * clamp(40px,12vw,64px))}
  .agenda__ph{min-height:clamp(320px,92vw,440px)}
  /* calée en bas à droite : centrée, la main était rognée et remontait sur le bouton */
  .agenda__ph img{width:min(86%,320px);right:0;left:auto;transform:none;animation-name:tel-droite}
}

/* ---------- en-tête de page interne ---------- */
.chapeau{padding:clamp(10px,1.6vw,20px) var(--gut) 0}
.chapeau__box{
  position:relative;max-width:var(--maxw);margin:0 auto;
  color:var(--sur-vif);padding:clamp(30px,4vw,56px) clamp(24px,4vw,56px);
  display:grid;grid-template-columns:1.32fr .68fr;gap:clamp(20px,3vw,44px);align-items:center;
}
.chapeau__box>*:not(.cadre__fond){position:relative;z-index:2}
.chapeau__box .cadre__fond{background:var(--fond)}
.chapeau h1{font-size:clamp(34px,5.2vw,64px);margin:12px 0 14px}
/* La colonne de texte occupe la place laissée vide entre le titre et le visuel.
   Le paragraphe suit, sinon le vide se déplacerait simplement à l’intérieur du bloc. */
.chapeau p{font-size:clamp(16px,1.4vw,19px);max-width:min(60ch,100%);color:#204458;font-weight:500}
.chapeau .kick{color:#0A5670}
.chapeau__visuel{position:relative;justify-self:center}
.chapeau__visuel img{
  width:min(100%,290px);
  margin:clamp(4px,0.6vw,10px) auto;
  position:relative;z-index:3;filter:drop-shadow(0 26px 30px rgba(16,60,80,.26));
}
@media (max-width:820px){
  .chapeau__box{grid-template-columns:1fr}
  .chapeau__visuel{display:none}
}

/* fil d'Ariane */
.fil{padding:18px var(--gut) 0;max-width:var(--maxw);margin:0 auto;font-size:13.5px;color:var(--gris)}
.fil a:hover{color:var(--vert-d);text-decoration:underline;text-underline-offset:3px}
.fil i{font-style:normal;opacity:.6;margin:0 6px}

/* ---------- filtres du catalogue ---------- */
.filtres{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-bottom:clamp(28px,3.4vw,44px)}
.filtre{
  border:2px solid var(--trait);background:var(--card);color:var(--encre);
  border-radius:999px;padding:10px 20px;font-family:var(--disp);font-weight:500;font-size:15.5px;
  cursor:pointer;transition:background .22s,border-color .22s,color .22s,transform .22s;
}
.filtre:hover{transform:translateY(-2px);border-color:var(--c)}
.filtre[aria-pressed="true"]{background:var(--c);border-color:var(--c);color:#14242F}
.filtre--tous{--c:var(--vert)}
.filtre--tous[aria-pressed="true"]{color:var(--sur-couleur)}

/* ---------- grille catalogue ---------- */
.catalogue{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,1.8vw,22px)}
.article{
  display:flex;flex-direction:column;background:var(--card);border:2px solid var(--trait);
  border-radius:clamp(18px,2.2vw,26px);overflow:hidden;
  transition:transform .28s cubic-bezier(.2,.9,.3,1.2), box-shadow .28s, border-color .28s;
}
.article:hover{transform:translateY(-6px);box-shadow:var(--ombre);border-color:var(--c)}
.article__scene{position:relative;aspect-ratio:1;display:grid;place-items:center;background:var(--tc)}
.article__tache{
  position:absolute;inset:14% 12%;background:var(--c);opacity:.5;
  border-radius:52% 48% 44% 56% / 48% 44% 56% 52%;
  transition:transform .5s cubic-bezier(.2,.9,.3,1.2);
}
.article:hover .article__tache{transform:scale(1.07) rotate(-7deg)}
.article__scene img{position:relative;width:76%;transition:transform .4s cubic-bezier(.2,.9,.3,1.2)}
.article:hover .article__scene img{transform:translateY(-8px) scale(1.05)}
.article__corps{padding:16px 18px 20px;display:flex;flex-direction:column;gap:6px;flex:1}
.article__cat{font-size:11.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--cd)}
.article__corps h3{font-family:var(--disp);font-weight:600;font-size:17px;line-height:1.22}
.article__fmt{margin-top:auto;padding-top:8px;font-size:13.5px;color:var(--gris);font-weight:600}
.article[hidden]{display:none}
@media (max-width:900px){.catalogue{grid-template-columns:1fr 1fr}}

.compteur{text-align:center;margin-top:clamp(26px,3vw,40px);font-size:15px;color:var(--gris)}

/* ---------- blocs de texte ---------- */
.prose{max-width:70ch;margin:0 auto}
.prose p{margin-bottom:20px;font-size:17.5px;line-height:1.7;color:var(--encre-2)}
.prose h2{font-size:clamp(26px,3.2vw,38px);margin:44px 0 16px}
.prose h3{font-size:clamp(20px,2.2vw,25px);margin:32px 0 12px}
.prose ul{margin:0 0 24px 0;list-style:none;display:flex;flex-direction:column;gap:11px}
.prose ul li{display:flex;gap:12px;font-size:17px;color:var(--encre-2)}
.prose ul li::before{content:'';flex:none;width:9px;height:9px;border-radius:50%;background:var(--vert);margin-top:9px}
.prose strong{color:var(--encre)}

/* deux colonnes texte + visuel */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:clamp(26px,4vw,64px);align-items:center}
.duo--inverse .duo__txt{order:2}
.duo__visuel{position:relative;border-radius:var(--rond);background:var(--tc);min-height:clamp(280px,32vw,420px)}
.duo__visuel img{
  position:absolute;left:50%;bottom:0;transform:translateX(-50%);
  height:114%;width:auto;max-width:none;z-index:3;
  filter:drop-shadow(0 22px 28px rgba(26,39,52,.22));
}
.duo__visuel--photo{overflow:hidden}
.duo__visuel--photo img{position:static;transform:none;height:100%;width:100%;object-fit:cover;filter:none}
@media (max-width:860px){
  .duo{grid-template-columns:1fr}
  .duo--inverse .duo__txt{order:0}
}

/* ---------- chiffres ---------- */
.chiffres{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(12px,1.6vw,20px)}
.chiffre{background:var(--tc);border-radius:clamp(18px,2.2vw,26px);padding:clamp(22px,2.6vw,32px);text-align:center}
.chiffre b{display:block;font-family:var(--disp);font-weight:600;font-size:clamp(30px,3.6vw,46px);color:var(--cd);line-height:1}
.chiffre span{display:block;margin-top:8px;font-size:14.5px;color:var(--encre-2);font-weight:600}
@media (max-width:820px){.chiffres{grid-template-columns:1fr 1fr}}

/* ---------- étapes numérotées ---------- */
.pas{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,2vw,22px)}
.pas__it{background:var(--card);border:2px solid var(--trait);border-radius:clamp(18px,2.2vw,26px);padding:clamp(22px,2.6vw,30px);display:flex;flex-direction:column;gap:10px}
.pas__n{width:46px;height:46px;border-radius:50%;background:var(--ic);color:#fff;display:grid;place-items:center;font-family:var(--disp);font-weight:600;font-size:21px;margin-bottom:6px}
.pas__it h3{font-family:var(--disp);font-size:19px}
.pas__it p{font-size:15px;color:var(--gris)}
@media (max-width:820px){.pas{grid-template-columns:1fr}}

/* ---------- formulaire ---------- */
.form{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.champ{display:flex;flex-direction:column;gap:7px;min-width:0}
.champ--large{grid-column:1/-1}
.champ label{font-size:14px;font-weight:700;color:var(--encre-2)}
.champ input,.champ select,.champ textarea{
  width:100%;min-width:0;
  font:inherit;font-size:16px;padding:14px 16px;border-radius:14px;
  border:2px solid var(--trait);background:var(--card);color:var(--encre);
  transition:border-color .2s;
}
.champ input:focus,.champ select:focus,.champ textarea:focus{outline:none;border-color:var(--vert)}
.champ textarea{min-height:150px;resize:vertical}
.form__pied{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:16px;align-items:center;justify-content:space-between}
.form__note{font-size:13.5px;color:var(--gris);max-width:44ch}
@media (max-width:700px){.form{grid-template-columns:1fr}}

/* ---------- cartes contact / enseignes ---------- */
.contacts{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,2vw,22px)}
.contact-c{background:var(--tc);border-radius:clamp(18px,2.2vw,26px);padding:clamp(24px,2.8vw,32px);display:flex;flex-direction:column;gap:12px}
.contact-c h3{font-family:var(--disp);font-size:20px}
.contact-c p{font-size:15px;color:var(--encre-2)}
.contact-c a{font-weight:700;color:var(--cd)}
.contact-c a:hover{text-decoration:underline;text-underline-offset:3px}
@media (max-width:860px){.contacts{grid-template-columns:1fr}}

.enseignes{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:clamp(12px,1.6vw,18px)}
.enseigne{
  background:var(--card);border:2px solid var(--trait);border-radius:18px;
  padding:20px 22px;display:flex;flex-direction:column;gap:5px;
  transition:transform .25s, border-color .25s;
}
.enseigne:hover{transform:translateY(-4px);border-color:var(--vert)}
.enseigne b{font-family:var(--disp);font-weight:600;font-size:17px}
.enseigne span{font-size:13.5px;color:var(--gris)}

/* ---------- questions fréquentes ---------- */
.faq{max-width:760px;margin:0 auto;display:flex;flex-direction:column;gap:10px}
.faq details{
  background:var(--card);border:2px solid var(--trait);border-radius:18px;
  padding:4px 22px;transition:border-color .22s;
}
.faq details[open]{border-color:var(--vert)}
.faq summary{
  cursor:pointer;list-style:none;padding:18px 0;
  font-family:var(--disp);font-weight:600;font-size:17.5px;
  display:flex;justify-content:space-between;gap:16px;align-items:center;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:'';flex:none;width:11px;height:11px;
  border-right:2.5px solid var(--vert);border-bottom:2.5px solid var(--vert);
  transform:rotate(45deg) translateY(-3px);transition:transform .25s;
}
.faq details[open] summary::after{transform:rotate(-135deg) translateY(2px)}
.faq p{padding:0 0 20px;font-size:16px;color:var(--encre-2);line-height:1.65}

/* ---------- ruban de rassurance ---------- */
.ruban{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(12px,1.6vw,20px)}
.ruban__it{display:flex;gap:13px;align-items:center}
.ruban__ic{width:44px;height:44px;border-radius:50%;background:var(--ic);color:#fff;display:grid;place-items:center;flex:none}
.ruban__ic svg{width:22px;height:22px;fill:currentColor}
.ruban__it b{display:block;font-family:var(--disp);font-weight:600;font-size:16px;line-height:1.2}
.ruban__it span{display:block;font-size:13.5px;color:var(--gris)}
@media (max-width:860px){.ruban{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.ruban{grid-template-columns:1fr}}

/* visuel de remplacement quand le packshot manque encore */
.article__ph{position:relative;width:40%;color:#fff;opacity:.9}
.article__ph svg{width:100%;height:auto;fill:currentColor}

/* ============================================================
   FICHES PRODUITS
   ============================================================ */

.chapeau.fiche .chapeau__box{grid-template-columns:1.02fr .98fr;align-items:center}
.fiche__usage{font-weight:700;margin-bottom:18px}
.fiche__atouts{list-style:none;display:flex;flex-direction:column;gap:10px;margin:0 0 24px}
.fiche__atouts li{display:flex;gap:11px;font-size:16px;color:#204458;font-weight:500;line-height:1.45}
.fiche__atouts li::before{
  content:'';flex:none;width:20px;height:20px;margin-top:2px;border-radius:50%;
  background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%232B8438'%3E%3Cpath d='M20.3 6.4a1.3 1.3 0 0 0-1.8 0L9.7 15.2l-4.2-4.2a1.3 1.3 0 1 0-1.8 1.8l5.1 5.1c.5.5 1.3.5 1.8 0l9.7-9.7c.5-.5.5-1.3 0-1.8Z'/%3E%3C/svg%3E") center/13px no-repeat;
}
/* Contenance, référence et EAN : une seule ligne, en retrait.
   Ce sont des informations de contrôle, pas des arguments de vente. */
.fiche__ref{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 18px;
  margin-bottom:22px;font-size:12.5px;line-height:1.5;flex-wrap:nowrap;
}
.fiche__ref>div{display:flex;align-items:baseline;gap:6px;white-space:nowrap}
@media (max-width:900px){.fiche__ref{flex-wrap:wrap}}
.fiche__ref dt{font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#4A6B7C}
.fiche__ref dd{font-weight:700;color:var(--sur-vif)}

.fiche__visuel{align-self:center}
/* Le packshot est l'argument principal de la fiche : on lui laisse toute la largeur
   de sa colonne. Le plafond reste sous les 508 px de la colonne pour que l'image
   ne vienne pas mordre sur les deux boutons d'achat, qui tiennent tout juste sur une ligne. */
.fiche__visuel img{width:min(100%,470px)}
.vues{display:flex;gap:8px;justify-content:center;margin-top:6px;position:relative;z-index:3}
.vues__b{
  border:2px solid rgba(18,48,63,.2);background:rgba(255,255,255,.8);color:var(--sur-vif);
  border-radius:999px;padding:8px 16px;font-family:var(--disp);font-weight:500;font-size:14px;cursor:pointer;
  transition:background .2s,border-color .2s;
}
.vues__b:hover{background:#fff}
.vues__b[aria-pressed="true"]{background:var(--sur-vif);border-color:var(--sur-vif);color:#fff}
.vues:empty{display:none}

.fiche__grille{display:grid;grid-template-columns:1.25fr .75fr;gap:clamp(28px,4vw,60px);align-items:start}
.fiche__col>.t3{margin-bottom:22px}
.pas--fiche{grid-template-columns:1fr;gap:12px}
.pas--fiche .pas__it{flex-direction:row;align-items:flex-start;gap:16px;padding:20px 22px}
.pas--fiche .pas__n{margin-bottom:0;flex:none;width:40px;height:40px;font-size:19px}
.pas--fiche p{font-size:16px;color:var(--encre-2);line-height:1.55}

.fiche__reco{list-style:none;display:flex;flex-direction:column;gap:12px;margin-bottom:22px}
.fiche__reco li{
  display:flex;gap:11px;font-size:15.5px;color:var(--encre-2);line-height:1.5;
  padding-bottom:12px;border-bottom:1px solid var(--trait);
}
.fiche__reco li:last-child{border-bottom:0;padding-bottom:0}
.fiche__reco li::before{content:'';flex:none;width:8px;height:8px;margin-top:9px;border-radius:50%;background:var(--vert)}

.avis{border-radius:14px;padding:11px 15px;font-size:13px;line-height:1.5}
.avis--poison{background:var(--t-corail);color:var(--encre)}
.avis--poison a{font-weight:800;color:var(--corail-d)}
/* mention discrète : l'information est utile mais ne doit pas peser
   autant que les conseils d'usage situés juste au-dessus */
.avis--fin{
  background:var(--t-soleil);color:var(--soleil-d);
  margin-top:12px;padding:9px 14px;border-radius:12px;
  font-size:13px;font-weight:700;line-height:1.4;
}
.fiche__note{font-size:14.5px;color:var(--gris);border-left:3px solid var(--trait);padding-left:16px}

.catalogue--3{grid-template-columns:repeat(3,1fr)}
.article__fin{
  align-self:flex-start;background:var(--t-soleil);color:var(--soleil-d);
  border-radius:999px;padding:4px 10px;font-size:11px;font-weight:800;
  letter-spacing:.04em;text-transform:uppercase;
}

@media (max-width:900px){
  .chapeau.fiche .chapeau__box{grid-template-columns:1fr}
  .chapeau.fiche .chapeau__visuel{display:block;order:-1}
  .fiche__grille{grid-template-columns:1fr}
  .catalogue--3{grid-template-columns:1fr 1fr}
}
@media (max-width:560px){.catalogue--3{grid-template-columns:1fr}}

.eco{display:inline-block;background:var(--vert);color:#fff;border-radius:999px;padding:3px 11px;font-size:12px;font-weight:800;letter-spacing:.04em;vertical-align:2px}

/* Les attributs width/height des <img> évitent le saut de mise en page au chargement,
   mais le navigateur les applique aussi comme hauteur imposée. Sans height:auto,
   une image dont le CSS ne fixe que la largeur se retrouve étirée. */
.article__scene img,
.prod__scene img,
.chapeau__visuel img,
.fiche__visuel img,
.mega__vedette img{height:auto}

/* ---------- boutons d'achat en ligne ---------- */
/* Les boutons se partagent la rangee sans jamais retrecir sous leur contenu :
   le plus long passe a la ligne plutot que de deborder de sa pastille. */
.achats{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:12px}
.achats .btn{flex:1 1 auto;justify-content:center;padding:14px 18px;font-size:15px;white-space:nowrap}
.btn--amazon{background:#FF9900;color:#16202B;border-color:#FF9900}
.btn--bol{background:#0A5AC8;color:#FFFFFF;border-color:#0A5AC8}
.btn--carte svg{fill:currentColor;width:16px;height:16px}
.achats__magasin{
  display:inline-block;font-size:14.5px;font-weight:700;color:var(--sur-vif);
  text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1.5px;
  opacity:.8;transition:opacity .2s;
}
.achats__magasin:hover{opacity:1}
@media (max-width:400px){.achats{flex-direction:column}.achats .btn{flex:none;width:100%}}

/* ============================================================
   ARTICLES DU BLOG
   ============================================================ */
.art{position:relative}
.art__media{
  position:relative;max-width:var(--maxw);margin:clamp(10px,1.6vw,20px) auto 0;
  padding:0 var(--gut);
}
.art__media img{
  width:100%;height:clamp(200px,30vw,380px);object-fit:cover;
  border-radius:var(--rond);
}
.art__tete{
  position:relative;z-index:2;max-width:820px;
  margin-top:calc(-1 * clamp(30px,4vw,64px));
  background:var(--card);border-radius:clamp(22px,3vw,34px);
  padding:clamp(26px,3.4vw,44px) clamp(24px,3.4vw,44px) clamp(22px,2.8vw,34px);
  box-shadow:var(--ombre);
}
.art__tete .etiq{
  display:inline-block;background:var(--c);color:#14242F;
  border-radius:999px;padding:6px 14px;font-size:12px;font-weight:800;
  letter-spacing:.06em;text-transform:uppercase;margin-bottom:14px;
}
.art__tete h1{font-size:clamp(28px,3.8vw,46px);margin-bottom:16px}
.art__chapo{font-size:clamp(17px,1.6vw,20px);color:var(--encre-2);line-height:1.55;margin-bottom:14px}

/* Icônes dessinées au trait plutôt qu'en aplat : un siphon en aplat devient
   une masse illisible, alors qu'au trait la forme du tuyau se lit tout de suite.
   Le sélecteur est composé pour l'emporter sur le fill:currentColor des pastilles. */
.rayon__ic svg.ic-trait,
.mega__ic svg.ic-trait,
.tuile__ic svg.ic-trait{
  fill:none;stroke:currentColor;stroke-width:2.3;
  stroke-linecap:round;stroke-linejoin:round;
}
.ic-trait .fin{stroke-width:2.1}

/* ---------- label Ecocert sur la carte produit ---------- */
/* Pastille blanche : la marque Ecocert est verte, elle passerait mal sur les
   fonds pastel colorés des scènes produits. */
.article__eco{
  position:absolute;top:10px;right:10px;z-index:2;
  width:46px;height:46px;border-radius:50%;background:#fff;
  display:grid;place-items:center;box-shadow:0 2px 9px rgba(16,32,44,.16);
}
.article__eco img{width:30px;height:auto}
/* neutralise l'animation de survol héritée de .article__scene img */
.article:hover .article__eco img{transform:none}
@media (max-width:560px){
  .article__eco{width:38px;height:38px;top:8px;right:8px}
  .article__eco img{width:25px}
}

/* ---------- enseignes : grille de logos ---------- */
.logos{display:grid;grid-template-columns:repeat(auto-fill,minmax(148px,1fr));gap:clamp(10px,1.4vw,16px)}
/* fond blanc figé : les logos des enseignes sont dessinés pour du blanc, ils
   deviennent illisibles si la carte suit le thème sombre. */
.logo-e{
  background:#fff;border:2px solid rgba(16,32,44,.12);border-radius:18px;
  aspect-ratio:3/2;display:grid;place-items:center;padding:12px 16px;
  transition:transform .25s cubic-bezier(.2,.9,.3,1.2), border-color .25s, box-shadow .25s;
}
.logo-e:hover{transform:translateY(-4px);border-color:var(--vert);box-shadow:var(--ombre)}
.logo-e img{width:100%;height:auto;max-height:100%;object-fit:contain}

/* ---------- blog : navigation latérale, grille, pagination ---------- */
.blog{display:grid;grid-template-columns:238px minmax(0,1fr);gap:clamp(22px,3vw,46px);align-items:start}
/* la colonne suit la lecture ; top calé sous la barre de navigation collante */
.cote{position:sticky;top:100px}
.cote__t{font-family:var(--disp);font-weight:600;font-size:15px;letter-spacing:.02em;color:var(--gris);margin:0 0 12px 4px}
.cote__l{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:3px}
.cote__a{
  --c:var(--trait);--tc:rgba(127,140,150,.16);
  display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  padding:9px 13px;border-radius:11px;font-weight:600;font-size:15px;
  color:var(--encre-2);border-left:3px solid transparent;
  transition:background .2s, border-color .2s, color .2s;
}
.cote__a b{font-weight:700;font-size:12.5px;color:var(--gris)}
.cote__a:hover{background:rgba(127,140,150,.13);border-left-color:var(--c)}
.cote__a.est-actif{background:var(--tc);border-left-color:var(--c);color:var(--encre)}
.cote__a.est-actif b{color:var(--encre-2)}
.cote__enc{margin-top:22px;background:var(--t-vert);border-radius:16px;padding:18px 18px 20px}
.cote__enc b{font-family:var(--disp);font-weight:600;font-size:16px;display:block;margin-bottom:6px}
.cote__enc p{font-size:14px;color:var(--encre-2);margin:0 0 10px}
.cote__enc a{font-weight:700;font-size:14.5px;color:var(--vert-d)}
.cote__enc a:hover{text-decoration:underline;text-underline-offset:3px}

/* Trois colonnes plutôt que quatre : la grille vit dans une colonne réduite. */
.astuces.astuces--3{grid-template-columns:repeat(3,1fr)}

.pagi{display:flex;align-items:center;justify-content:center;gap:clamp(10px,1.6vw,20px);margin-top:clamp(28px,3.4vw,44px);flex-wrap:wrap}
.pagi__b{font-family:var(--disp);font-weight:600;font-size:15px;color:var(--encre-2);padding:9px 15px;border-radius:999px;border:2px solid var(--trait)}
a.pagi__b:hover{border-color:var(--vert);color:var(--vert-d)}
.pagi__b.est-inactif{opacity:.38}
.pagi__n{display:flex;gap:6px}
.pagi__n a,.pagi__n span{
  min-width:38px;height:38px;display:grid;place-items:center;border-radius:50%;
  font-family:var(--disp);font-weight:600;font-size:15px;color:var(--encre-2);
}
.pagi__n a:hover{background:rgba(127,140,150,.13)}
.pagi__n .est-actif{background:var(--encre);color:#fff}

@media (max-width:1180px){.astuces.astuces--3{grid-template-columns:1fr 1fr}}
@media (max-width:900px){
  .blog{grid-template-columns:1fr}
  .cote{position:static}
  .cote__l{flex-direction:row;flex-wrap:wrap;gap:7px}
  .cote__a{border-left:0;border:2px solid var(--trait);border-radius:999px;padding:7px 14px}
  .cote__a:hover,.cote__a.est-actif{border-color:var(--c)}
  .cote__enc{margin-top:18px}
}
@media (max-width:560px){.astuces.astuces--3{grid-template-columns:1fr}}

/* ---------- bannière à visuel « en main » ---------- */
/* Le visuel repose sur l'arête basse du cadre et vient jusqu'à son bord droit :
   les marges négatives valent exactement les paddings de .chapeau__box, donc
   l'image affleure le bord sans jamais dépasser du cadre. Le dégagement en haut
   empêche la main de toucher le haut du bloc coloré. */
.chapeau--main .chapeau__visuel{align-self:end;justify-self:end;width:100%}
/* Réglé par la hauteur et non la largeur : les quatre visuels ont des rapports
   différents (main simple ou deux mains), seule une hauteur commune donne le même
   débordement d'une page à l'autre.

   Les marges négatives dépassent les paddings du cadre, donc le visuel sort du
   bloc par le haut seulement : la marge basse ne rattrape pas tout le padding du cadre,
   il reste donc un jeu sous le visuel, qui ne touche pas l'arête. Le dépassement
   haut reste sous le fil d'Ariane : il ne doit jamais atteindre la navigation, qui
   est collante. Au défilement le visuel passe dessous (nav en z-index 70, visuel
   en z-index 2), ce qui est le comportement voulu. */
/* max-width:none : la règle globale img{max-width:100%} sinon rabote la largeur
     sans toucher la hauteur imposée ici, et écrase le visuel le plus large. */
.chapeau--main .chapeau__visuel img{
  display:block;height:clamp(290px,35.2vw,450px);width:auto;max-width:none;
  margin-top:calc(-1 * clamp(30px,7.6vw,90px));
  margin-right:calc(-1 * clamp(24px,4vw,56px));
  margin-bottom:calc(-1 * clamp(30px,4vw,56px) + clamp(12px,1.4vw,20px));
  margin-left:auto;
  filter:drop-shadow(0 24px 30px rgba(16,60,80,.24));
}
@media (max-width:820px){
  /* .chapeau__visuel est masqué sous 820px : rien à recadrer ici. */
  .chapeau--main .chapeau__visuel img{margin:0 auto}
}

/* « Où trouver nos produits » : sur ce visuel l'avant-bras sort par le bas de
   l'image (312 px opaques sur l'arête basse du fichier). Laisser un jeu ferait
   flotter une coupe nette en plein air ; le visuel repose donc sur l'arête, où
   la coupe se confond avec le bord du cadre. La hauteur compense le jeu retiré
   pour que la bannière garde la même hauteur que les trois autres. */
.chapeau--pose .chapeau__visuel img{
  height:clamp(302px,36.6vw,468px);
  margin-bottom:calc(-1 * clamp(30px,4vw,56px));
}

/* Animation au défilement. Le script n'écrit que --ay et --ar : la composition du
   transform reste ici, ce qui préserve le translateX(-50%) qui centre le visuel. */
.duo__visuel img[data-anim]{
  transform:translateX(-50%) translateY(var(--ay,0px)) rotate(var(--ar,0deg)) scale(var(--as,1));
  transform-origin:50% 100%;will-change:transform;
}
@media (prefers-reduced-motion:reduce){
  .duo__visuel img[data-anim]{transform:translateX(-50%) !important}
}

/* ---------- documents joints à la fiche produit ---------- */
.fiche__docs{margin-top:20px;padding-top:18px;border-top:1px solid var(--trait);display:flex;flex-direction:column;gap:10px}
.fiche__docs>b{font-size:11.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--gris)}
.doc{display:flex;align-items:center;gap:10px;font-weight:600;font-size:15px;color:var(--encre)}
.doc:hover{color:var(--vert-d);text-decoration:underline;text-underline-offset:3px}
.doc svg{flex:none;width:17px;height:17px;fill:currentColor;opacity:.55}
.doc i{font-style:normal;font-size:12.5px;font-weight:600;color:var(--gris)}


.champ select{height:58px}

/* ============================================================
   Où acheter ce produit : onglets et cartes marchands
   ============================================================ */
.onglets{display:flex;justify-content:center;gap:8px;flex-wrap:wrap;margin-bottom:clamp(22px,2.6vw,34px)}
.onglet{
  border:2px solid var(--trait);background:var(--card);color:var(--encre);
  border-radius:999px;padding:11px 22px;font-family:var(--disp);font-weight:500;font-size:15.5px;
  cursor:pointer;transition:background .22s,border-color .22s,color .22s,transform .22s;
}
.onglet:hover{transform:translateY(-2px);border-color:var(--vert)}
.onglet[aria-selected="true"]{background:var(--vert);border-color:var(--vert);color:var(--sur-couleur)}
.panneau__chapo,.panneau__vide{text-align:center;color:var(--gris);font-size:16px;max-width:640px;margin:0 auto clamp(18px,2.2vw,28px)}
.panneau__vide{margin-bottom:0}
.ventes{display:grid;grid-template-columns:repeat(auto-fill,minmax(256px,1fr));gap:clamp(12px,1.6vw,18px)}
.vente{
  display:grid;grid-template-columns:84px minmax(0,1fr) auto;grid-template-rows:auto auto;column-gap:14px;row-gap:4px;align-items:center;
  background:var(--card);border:2px solid var(--trait);border-radius:18px;padding:14px 16px;
  transition:transform .25s cubic-bezier(.2,.9,.3,1.2), border-color .25s, box-shadow .25s;
}
.vente:hover{transform:translateY(-4px);border-color:var(--c,var(--vert));box-shadow:var(--ombre)}
/* logo sur blanc figé, comme .logo-e : les logos sont dessinés pour du blanc */
.vente__logo{grid-row:1/3;background:#fff;border:1px solid rgba(16,32,44,.1);border-radius:12px;display:grid;place-items:center;padding:8px;aspect-ratio:3/2}
.vente__logo img{width:100%;height:auto;max-height:100%;object-fit:contain}
.vente__nom{grid-column:2;grid-row:1;font-family:var(--disp);font-weight:600;font-size:17px;color:var(--encre);line-height:1.2}
.vente__prix{grid-column:3;grid-row:1;font-family:var(--disp);font-weight:700;font-size:18px;color:var(--encre);white-space:nowrap;align-self:start}
.vente__nom small{font-family:var(--sans);font-size:11px;font-weight:800;letter-spacing:.1em;color:var(--gris);margin-left:6px;vertical-align:middle}
.vente__cta{grid-column:2/4;grid-row:2;display:inline-flex;align-items:center;gap:6px;font-weight:700;font-size:14.5px;color:var(--cd,var(--vert-d))}
.panneau__note{text-align:center;font-size:13px;color:var(--gris-2);max-width:640px;margin:clamp(14px,1.8vw,20px) auto 0}
.vente__cta svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.vente:hover .vente__cta{text-decoration:underline;text-underline-offset:3px}
.panneau__cta{text-align:center;margin-top:clamp(24px,3vw,36px)}
@media (max-width:480px){.ventes{grid-template-columns:1fr}}

/* ---------- carte des points de vente (« Où nous trouver ») ---------- */
.loc__form{max-width:760px;margin:0 auto clamp(16px,2vw,24px)}
.loc__label{display:block;font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--gris);margin-bottom:8px}
.loc__champ{display:flex;gap:10px;flex-wrap:wrap}
.loc__input{
  flex:1 1 220px;height:58px;border:2px solid var(--trait);border-radius:999px;padding:0 22px;
  font-size:16.5px;background:var(--card);color:var(--encre);
}
.loc__input:focus{outline:none;border-color:var(--vert)}
.loc__champ .btn{padding:14px 22px;font-size:15.5px}
.loc__geo{color:var(--vert-d);border-color:var(--vert)}
.loc__geo:hover{background:var(--vert);color:var(--sur-couleur)}
.loc__filtre{text-align:center;font-weight:700;color:var(--encre-2);margin:0 0 12px}
.loc__filtre a{color:var(--vert-d);font-weight:600;text-decoration:underline;text-underline-offset:3px;margin-left:8px}
.loc__avis{text-align:center;font-size:14px;color:var(--gris);max-width:640px;margin:0 auto clamp(18px,2.2vw,26px)}
.loc__etat{text-align:center;font-weight:600;color:var(--encre-2);margin:0 0 14px;min-height:1.4em}
.loc__grille{display:grid;grid-template-columns:minmax(280px,400px) minmax(0,1fr);gap:clamp(14px,2vw,22px);align-items:stretch}
.loc__liste{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;max-height:560px;overflow:auto}
.loc__it{
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:12px;align-items:center;
  background:var(--card);border:2px solid var(--trait);border-radius:16px;padding:12px 14px;cursor:pointer;
  transition:border-color .2s;
}
.loc__it:hover,.loc__it.est-actif{border-color:var(--vert)}
.loc__it img{width:56px;height:38px;object-fit:contain;background:#fff;border-radius:8px;padding:4px;border:1px solid rgba(16,32,44,.1)}
.loc__it b{display:block;font-family:var(--disp);font-weight:600;font-size:16px;line-height:1.2}
.loc__it span{display:block;font-size:13.5px;color:var(--gris);margin-top:2px}
.loc__it i{font-style:normal;font-weight:700;font-size:13px;color:var(--vert-d);white-space:nowrap}
.loc__vide{padding:28px 18px;text-align:center;color:var(--gris);font-size:15px;background:var(--t-vert);border-radius:16px}
.loc__carte{min-height:560px;border-radius:clamp(18px,2.2vw,26px);overflow:hidden;background:var(--t-vert);border:2px solid var(--trait);position:relative;z-index:0}
.loc__pop{font-family:var(--sans);font-size:14px;line-height:1.4}
.loc__pop b{display:block;font-family:var(--disp);font-size:15px;margin-bottom:2px}
.loc__pop a{display:inline-block;margin-top:6px;color:var(--vert-d);font-weight:700}
.loc__credit{text-align:center;font-size:12.5px;color:var(--gris-2);margin:12px 0 0}
.loc__credit a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.leaflet-container{font-family:var(--sans)}
.leaflet-popup-content-wrapper{border-radius:14px}
@media (max-width:860px){
  .loc__grille{grid-template-columns:1fr}
  .loc__carte{min-height:380px;order:-1}
  .loc__liste{max-height:none}
}
#ou-acheter,#carte{scroll-margin-top:96px}

/* ---------- recherche : loupe de la navigation ---------- */
/* Le bouton vit dans la barre, entre les liens et les langues ; le panneau se
   pose sous la barre, cale sur le bord droit du contenu, comme le mega-menu. */
.recherche{position:static}
.recherche__b{
  width:42px;height:42px;border:0;border-radius:50%;background:transparent;color:var(--encre);
  display:grid;place-items:center;cursor:pointer;transition:background .2s,color .2s;
}
.recherche__b:hover,.recherche__b[aria-expanded="true"]{background:var(--t-vert);color:var(--vert-d)}
.recherche__b svg,.recherche__champ svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round}
.recherche__panneau{
  position:absolute;right:var(--gut);top:100%;z-index:60;
  width:min(560px,calc(100vw - 2*var(--gut)));
  background:var(--card);border:1px solid var(--trait);border-top:0;border-radius:0 0 22px 22px;
  box-shadow:0 26px 50px -30px rgba(26,39,52,.45);padding:14px 14px 10px;
}
.recherche__champ{position:relative}
.recherche__champ svg{position:absolute;left:17px;top:50%;transform:translateY(-50%);color:var(--gris);pointer-events:none}
.recherche__input{
  width:100%;height:52px;border:2px solid var(--trait);border-radius:999px;padding:0 20px 0 46px;
  font-size:16px;background:var(--blanc);color:var(--encre);
}
.recherche__input:focus{outline:none;border-color:var(--vert)}
.recherche__input::-webkit-search-cancel-button{-webkit-appearance:none}
.recherche__res{list-style:none;margin:8px 0 0;padding:0;max-height:min(60vh,460px);overflow:auto}
.recherche__res a{display:grid;grid-template-columns:52px minmax(0,1fr) auto;gap:12px;align-items:center;padding:8px 10px;border-radius:14px}
.recherche__res a:hover,.recherche__res a.est-actif{background:var(--t-vert)}
.recherche__res img,.recherche__ic{width:52px;height:52px;border-radius:10px;flex:none}
.recherche__res img{object-fit:contain;background:#fff;border:1px solid rgba(16,32,44,.1)}
.recherche__ic{background:var(--t-ciel);color:var(--ciel-d);display:grid;place-items:center}
.recherche__ic svg{width:24px;height:24px;fill:currentColor}
.recherche__res b{display:block;font-family:var(--disp);font-weight:600;font-size:15.5px;line-height:1.2;color:var(--encre)}
.recherche__res i{display:block;font-style:normal;font-size:13px;color:var(--gris);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.recherche__res small{font-size:10.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--gris-2)}
.recherche__vide{font-size:14px;color:var(--gris);padding:12px 10px 6px;margin:0}
@media (max-width:1080px){
  .recherche{margin-left:auto}
  .nav__burger{margin-left:0}
  .recherche__res a{grid-template-columns:44px minmax(0,1fr)}
  .recherche__res small{display:none}
  .recherche__res img,.recherche__ic{width:44px;height:44px}
}
#ou-acheter-magasins{scroll-margin-top:100px}
.panneau .loc{margin-top:clamp(22px,2.8vw,36px)}