/* =========================================================
   Maison Sans Gluten — by Pharmacie Saint Michel
   Feuille de style principale
   Direction : "étiquette d'apothicaire" — crème, vert officine,
   filets dorés, sceau circulaire repris du logo.
   ========================================================= */

/* ---------- 1. Tokens ---------- */
:root{
  --vert:#23503F;
  --vert-clair:#3B7A62;
  --sauge:#8FA893;
  --sauge-pale:#DDE5DC;
  --creme:#FAF4EA;
  --creme-2:#F5EDE0;
  --beige:#F1E7D7;
  --or:#B8893F;
  --or-clair:#D9B978;
  --bleu:#1F5F7A;          /* rappel "pharmacie" */
  --bleu-pale:#E6F0F4;
  --encre:#1D2620;
  --gris:#6E7A70;
  --gris-clair:#B6BEB6;
  --blanc:#FFFFFF;
  --rouge:#A8382F;
  --ambre:#8A6412;

  --r-s:4px;
  --r-m:10px;
  --r-l:20px;
  --r-full:999px;

  --ombre-s:0 1px 2px rgba(35,80,63,.06);
  --ombre-m:0 6px 24px -12px rgba(35,80,63,.28);
  --ombre-l:0 24px 60px -30px rgba(35,80,63,.45);

  --gouttiere:clamp(16px,4vw,40px);
  --large:1240px;
  --etroit:720px;

  --t-rapide:.18s cubic-bezier(.4,0,.2,1);
  --t-normal:.32s cubic-bezier(.4,0,.2,1);

  --h-header:74px;
}

/* ---------- 2. Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--h-header) + 20px)}
body{
  margin:0;
  background:var(--creme);
  color:var(--encre);
  font-family:"Karla",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:16.5px;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block;height:auto}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:none;padding:0}
ul,ol{margin:0;padding:0;list-style:none}
table{border-collapse:collapse;width:100%}
hr{border:none;border-top:1px solid var(--sauge-pale);margin:32px 0}

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

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  [data-aos]{opacity:1!important;transform:none!important}
}

/* ---------- 3. Typographie ---------- */
h1,h2,h3,h4{
  font-family:"Fraunces","Cormorant Garamond",Georgia,serif;
  font-weight:500;
  line-height:1.14;
  letter-spacing:-.012em;
  color:var(--vert);
  margin:0 0 .5em;
  font-variation-settings:"SOFT" 20,"WONK" 0;
}
h1{font-size:clamp(2.1rem,5.4vw,3.6rem)}
h2{font-size:clamp(1.7rem,3.6vw,2.6rem)}
h3{font-size:clamp(1.15rem,2vw,1.45rem)}
h4{font-size:1.05rem}
p{margin:0 0 1em;max-width:70ch}
.lead{font-size:1.09rem;color:var(--gris);max-width:62ch}
.script{font-family:"Fraunces",serif;font-style:italic;font-variation-settings:"WONK" 1}

/* ---------- 4. Utilitaires de mise en page ---------- */
.wrap{width:100%;max-width:var(--large);margin-inline:auto;padding-inline:var(--gouttiere)}
.wrap-etroit{width:100%;max-width:var(--etroit);margin-inline:auto;padding-inline:var(--gouttiere)}
.section{padding:clamp(48px,7vw,86px) 0}
.section--creme{background:var(--creme-2)}
.section--beige{background:var(--beige)}
.section--vert{background:var(--vert);color:var(--creme)}
.section--vert h2,.section--vert h3{color:var(--creme)}
.grille{display:grid;gap:clamp(16px,2.4vw,26px)}
.g-2{grid-template-columns:repeat(2,1fr)}
.g-3{grid-template-columns:repeat(3,1fr)}
.g-4{grid-template-columns:repeat(4,1fr)}
.flex{display:flex;gap:14px;align-items:center}
.flex-entre{display:flex;gap:14px;align-items:center;justify-content:space-between}
.centre{text-align:center}
.centre p,.centre .lead{margin-inline:auto}
.muet{color:var(--gris)}
.petit{font-size:.88rem}
.cache{display:none!important}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* Titre de section : filet doré + sceau discret */
.titre-section{margin-bottom:clamp(26px,4vw,44px)}
.titre-section .filet{
  display:block;width:52px;height:1px;background:var(--or);margin-bottom:18px;position:relative;
}
.titre-section .filet::after{
  content:"";position:absolute;right:-13px;top:-4px;width:9px;height:9px;
  border:1px solid var(--or);border-radius:50%;background:var(--creme);
}
.titre-section.centre .filet{margin-inline:auto}
.titre-section.centre .filet::after{right:calc(50% - 31px)}

/* ---------- 5. Boutons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:13px 24px;border-radius:var(--r-full);
  font-weight:700;font-size:.95rem;letter-spacing:.005em;
  border:1px solid transparent;
  transition:background var(--t-rapide),color var(--t-rapide),border-color var(--t-rapide),transform var(--t-rapide);
  text-align:center;line-height:1.2;
}
.btn:active{transform:translateY(1px)}
.btn i,.btn svg{width:18px;height:18px;flex:none}
.btn-primaire{background:var(--vert);color:var(--creme)}
.btn-primaire:hover{background:var(--vert-clair)}
.btn-or{background:var(--or);color:#fff}
.btn-or:hover{background:#a37733}
.btn-ligne{border-color:var(--vert);color:var(--vert)}
.btn-ligne:hover{background:var(--vert);color:var(--creme)}
.btn-clair{background:var(--creme);color:var(--vert)}
.btn-clair:hover{background:#fff}
.btn-bleu{background:var(--bleu);color:#fff}
.btn-bleu:hover{background:#17495e}
.btn-sm{padding:9px 16px;font-size:.85rem}
.btn-lg{padding:16px 32px;font-size:1rem}
.btn-bloc{width:100%}
.btn[disabled],.btn[aria-disabled="true"]{opacity:.5;pointer-events:none}
.lien-souligne{color:var(--vert);font-weight:700;border-bottom:1px solid var(--or);padding-bottom:2px}
.lien-souligne:hover{color:var(--or)}

/* ---------- 6. En-tête ---------- */
.bandeau-annonce{
  background:var(--vert);color:var(--sauge-pale);
  font-size:.82rem;text-align:center;padding:8px var(--gouttiere);
}
.bandeau-annonce strong{color:#fff}
.site-header{
  position:sticky;top:0;z-index:60;background:rgba(250,244,234,.96);
  backdrop-filter:saturate(1.4) blur(10px);
  border-bottom:1px solid var(--sauge-pale);
}
.header-in{display:flex;align-items:center;gap:18px;height:var(--h-header)}
.marque{display:flex;align-items:center;gap:11px;flex:none}
.marque img{width:52px;height:52px;border-radius:50%}
.marque-txt{display:flex;flex-direction:column;line-height:1.05}
.marque-nom{font-family:"Fraunces",serif;font-size:1.06rem;color:var(--vert);font-weight:600}
.marque-by{display:flex;align-items:center;gap:5px;font-size:.66rem;color:var(--gris);letter-spacing:.02em}
.marque-by img{width:15px;height:15px;border-radius:0}

.nav-principale{margin-inline:auto;display:flex;gap:4px}
.nav-principale a{
  padding:9px 13px;border-radius:var(--r-full);font-size:.94rem;font-weight:600;color:var(--encre);
  transition:background var(--t-rapide),color var(--t-rapide);
}
.nav-principale a:hover{background:var(--sauge-pale);color:var(--vert)}
.nav-principale a[aria-current="page"]{color:var(--vert);background:var(--sauge-pale)}
.actions-header{display:flex;align-items:center;gap:6px;flex:none}
.ico-btn{
  width:42px;height:42px;border-radius:50%;display:grid;place-items:center;color:var(--vert);
  position:relative;transition:background var(--t-rapide);
}
.ico-btn:hover{background:var(--sauge-pale)}
.ico-btn i,.ico-btn svg{width:21px;height:21px}
.pastille{
  position:absolute;top:3px;right:2px;min-width:19px;height:19px;padding:0 5px;
  background:var(--or);color:#fff;border-radius:var(--r-full);
  font-size:.68rem;font-weight:700;display:grid;place-items:center;line-height:1;
}
.pastille[hidden]{display:none}
.burger{display:none}

/* Recherche déroulante */
.barre-recherche{
  border-top:1px solid var(--sauge-pale);background:var(--creme);
  display:none;padding:14px 0;
}
.barre-recherche.ouverte{display:block}
.barre-recherche form{display:flex;gap:10px;max-width:640px;margin-inline:auto}
.barre-recherche input{flex:1}

/* Menu mobile */
.menu-mobile{
  position:fixed;inset:0;z-index:90;background:var(--creme);
  transform:translateX(-100%);transition:transform var(--t-normal);
  display:flex;flex-direction:column;padding:20px var(--gouttiere) 40px;overflow-y:auto;
}
.menu-mobile.ouvert{transform:none}
.menu-mobile nav a{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:15px 4px;border-bottom:1px solid var(--sauge-pale);
  font-family:"Fraunces",serif;font-size:1.22rem;color:var(--vert);
}
.menu-mobile nav a i{width:18px;height:18px;color:var(--or)}

/* ---------- 7. Hero ---------- */
.hero{position:relative;background:var(--creme);overflow:hidden;padding:clamp(40px,6vw,74px) 0 clamp(48px,7vw,86px)}
.hero::before{
  content:"";position:absolute;right:-14%;top:-28%;width:min(760px,86vw);aspect-ratio:1;
  border-radius:50%;background:radial-gradient(circle at 40% 40%,#fff 0%,var(--creme-2) 42%,transparent 72%);
  z-index:0;
}
.hero-in{position:relative;z-index:1;display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,5vw,64px);align-items:center}
.hero-kicker{
  display:inline-flex;align-items:center;gap:8px;color:var(--vert);
  border:1px solid var(--sauge);border-radius:var(--r-full);
  padding:6px 15px;font-size:.83rem;font-weight:700;background:#fff;margin-bottom:20px;
}
.hero-kicker i{width:15px;height:15px;color:var(--or)}
.hero h1{margin-bottom:.35em}
.hero h1 .script{color:var(--or);display:block;font-size:1.06em;font-weight:400}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.hero-preuves{display:flex;flex-wrap:wrap;gap:22px;margin-top:34px;padding-top:26px;border-top:1px solid var(--sauge-pale)}
.hero-preuve{display:flex;align-items:center;gap:10px;font-size:.9rem;font-weight:600;color:var(--vert)}
.hero-preuve i{width:19px;height:19px;color:var(--or)}

/* Sceau : signature graphique reprise du logo */
.sceau{position:relative;width:min(430px,84vw);aspect-ratio:1;margin-inline:auto;display:grid;place-items:center}
.sceau::before,.sceau::after{content:"";position:absolute;border-radius:50%;pointer-events:none}
.sceau::before{inset:0;border:1px solid var(--or-clair)}
.sceau::after{inset:16px;border:6px solid var(--sauge-pale)}
.sceau img{width:86%;border-radius:50%;position:relative;z-index:1}
.sceau-note{
  position:absolute;bottom:2%;left:50%;transform:translateX(-50%);z-index:2;
  background:#fff;border:1px solid var(--sauge-pale);border-radius:var(--r-full);
  padding:8px 17px;font-size:.8rem;font-weight:700;color:var(--vert);
  display:flex;align-items:center;gap:8px;white-space:nowrap;box-shadow:var(--ombre-m);
}
.sceau-note i{width:16px;height:16px;color:var(--bleu)}

/* ---------- 8. Bandeau confiance ---------- */
.confiance{background:var(--vert);color:var(--sauge-pale);padding:26px 0}
.confiance .grille{gap:20px}
.confiance-item{display:flex;gap:13px;align-items:flex-start}
.confiance-item i{width:24px;height:24px;color:var(--or-clair);flex:none;margin-top:2px}
.confiance-item strong{display:block;color:#fff;font-size:.97rem;line-height:1.3}
.confiance-item span{font-size:.83rem;opacity:.82}

/* ---------- 9. Cartes catégorie ---------- */
.carte-cat{
  position:relative;display:block;background:var(--blanc);border:1px solid var(--sauge-pale);
  border-radius:var(--r-m);overflow:hidden;transition:border-color var(--t-rapide),box-shadow var(--t-rapide);
}
.carte-cat:hover{border-color:var(--sauge);box-shadow:var(--ombre-m)}
.carte-cat .vignette{aspect-ratio:4/3;background:var(--beige);display:grid;place-items:center;overflow:hidden}
.carte-cat .vignette img{width:100%;height:100%;object-fit:cover}
.carte-cat .vignette i{width:38px;height:38px;color:var(--sauge);stroke-width:1.2}
.carte-cat-corps{padding:15px 17px}
.carte-cat h3{font-size:1.06rem;margin:0 0 3px}
.carte-cat span{font-size:.83rem;color:var(--gris)}

/* ---------- 10. Carte produit ---------- */
.carte-produit{
  display:flex;flex-direction:column;background:var(--blanc);
  border:1px solid var(--sauge-pale);border-radius:var(--r-m);overflow:hidden;
  transition:border-color var(--t-rapide),box-shadow var(--t-rapide);position:relative;height:100%;
}
.carte-produit:hover{border-color:var(--sauge);box-shadow:var(--ombre-m)}
.cp-media{position:relative;aspect-ratio:1;background:var(--beige);overflow:hidden}
.cp-media img{width:100%;height:100%;object-fit:cover;transition:transform var(--t-normal)}
.carte-produit:hover .cp-media img{transform:scale(1.035)}
.cp-media .placeholder{width:100%;height:100%;display:grid;place-items:center;color:var(--sauge)}
.cp-media .placeholder i{width:40px;height:40px;stroke-width:1.1}
.cp-etiquettes{position:absolute;top:10px;left:10px;display:flex;flex-direction:column;gap:6px;z-index:2}
.etiquette{
  font-size:.7rem;font-weight:700;padding:4px 10px;border-radius:var(--r-full);
  background:var(--vert);color:#fff;line-height:1.4;
}
.etiquette--promo{background:var(--rouge)}
.etiquette--neuf{background:var(--or)}
.etiquette--rupture{background:var(--gris)}
.cp-fav{
  position:absolute;top:10px;right:10px;z-index:2;width:36px;height:36px;border-radius:50%;
  background:rgba(255,255,255,.94);display:grid;place-items:center;color:var(--vert);
  transition:color var(--t-rapide),background var(--t-rapide);
}
.cp-fav:hover{background:#fff;color:var(--rouge)}
.cp-fav.actif{color:var(--rouge)}
.cp-fav.actif i{fill:currentColor}
.cp-fav i{width:18px;height:18px}
.cp-corps{padding:15px 16px 17px;display:flex;flex-direction:column;flex:1;gap:7px}
.cp-marque{font-size:.75rem;color:var(--or);font-weight:700;letter-spacing:.03em}
.cp-nom{font-family:"Fraunces",serif;font-size:1.02rem;color:var(--vert);line-height:1.28;margin:0}
.cp-poids{font-size:.8rem;color:var(--gris)}
.cp-labels{display:flex;flex-wrap:wrap;gap:5px}
.mini-label{
  font-size:.68rem;color:var(--vert);border:1px solid var(--sauge-pale);
  background:var(--creme);border-radius:var(--r-s);padding:2px 7px;display:flex;align-items:center;gap:4px;
}
.mini-label i{width:11px;height:11px}
.cp-bas{margin-top:auto;display:flex;align-items:flex-end;justify-content:space-between;gap:10px;padding-top:6px}
.prix{font-family:"Fraunces",serif;font-size:1.22rem;font-weight:600;color:var(--vert);line-height:1.1}
.prix-barre{font-size:.86rem;color:var(--gris);text-decoration:line-through;display:block;font-family:"Karla",sans-serif;font-weight:400}
.cp-ajout{
  width:44px;height:44px;border-radius:50%;background:var(--vert);color:var(--creme);
  display:grid;place-items:center;flex:none;transition:background var(--t-rapide);
}
.cp-ajout:hover{background:var(--or)}
.cp-ajout i{width:20px;height:20px}

/* ---------- 11. Boutique : filtres ---------- */
.boutique-grille{display:grid;grid-template-columns:268px 1fr;gap:clamp(20px,3vw,38px);align-items:start}
.filtres{
  background:var(--blanc);border:1px solid var(--sauge-pale);border-radius:var(--r-m);
  padding:20px;position:sticky;top:calc(var(--h-header) + 16px);
}
.filtre-bloc{padding-bottom:16px;margin-bottom:16px;border-bottom:1px solid var(--sauge-pale)}
.filtre-bloc:last-child{border:none;margin-bottom:0;padding-bottom:0}
.filtre-bloc h4{margin:0 0 11px;font-family:"Karla",sans-serif;font-size:.83rem;font-weight:700;color:var(--gris);letter-spacing:.04em}
.case{display:flex;align-items:center;gap:9px;padding:4px 0;font-size:.92rem;cursor:pointer}
.case input{width:17px;height:17px;accent-color:var(--vert);flex:none;cursor:pointer}
.case span{flex:1}
.case .nb{color:var(--gris);font-size:.8rem}
.prix-range{display:flex;gap:9px;align-items:center}
.prix-range input{width:100%}
.barre-outils{
  display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;
  padding-bottom:18px;margin-bottom:22px;border-bottom:1px solid var(--sauge-pale);
}
.btn-filtres-mobile{display:none}
.pagination{display:flex;justify-content:center;gap:7px;margin-top:38px;flex-wrap:wrap}
.pagination button{
  min-width:42px;height:42px;padding:0 12px;border-radius:var(--r-s);border:1px solid var(--sauge-pale);
  background:var(--blanc);font-weight:600;transition:all var(--t-rapide);
}
.pagination button:hover:not([disabled]){border-color:var(--vert);color:var(--vert)}
.pagination button.actif{background:var(--vert);color:var(--creme);border-color:var(--vert)}
.pagination button[disabled]{opacity:.4;cursor:not-allowed}
.puces-actives{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}
.puce{
  display:inline-flex;align-items:center;gap:7px;background:var(--sauge-pale);color:var(--vert);
  border-radius:var(--r-full);padding:5px 12px;font-size:.83rem;font-weight:600;
}
.puce i{width:13px;height:13px}

/* ---------- 12. Formulaires ---------- */
.champ{display:block;margin-bottom:16px}
.champ > span,.label{display:block;font-size:.86rem;font-weight:700;color:var(--vert);margin-bottom:6px}
.champ .aide{font-size:.79rem;color:var(--gris);font-weight:400;margin-top:5px;display:block}
input[type=text],input[type=tel],input[type=email],input[type=password],input[type=number],
input[type=search],input[type=date],input[type=datetime-local],input[type=url],select,textarea{
  width:100%;padding:12px 14px;background:var(--blanc);
  border:1px solid var(--gris-clair);border-radius:var(--r-s);
  transition:border-color var(--t-rapide),box-shadow var(--t-rapide);
}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--vert);box-shadow:0 0 0 3px rgba(35,80,63,.12)}
input[aria-invalid="true"],select[aria-invalid="true"]{border-color:var(--rouge)}
textarea{min-height:120px;resize:vertical}
select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236E7A70' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 13px center;padding-right:38px}
.erreur-champ{color:var(--rouge);font-size:.81rem;font-weight:600;margin-top:5px;display:none}
.erreur-champ.visible{display:block}
fieldset{border:none;padding:0;margin:0 0 16px}
legend{font-size:.86rem;font-weight:700;color:var(--vert);margin-bottom:8px;padding:0}
.radio-carte{
  display:flex;gap:12px;align-items:flex-start;padding:14px;border:1px solid var(--gris-clair);
  border-radius:var(--r-s);cursor:pointer;background:var(--blanc);transition:border-color var(--t-rapide),background var(--t-rapide);
}
.radio-carte:hover{border-color:var(--sauge)}
.radio-carte input{margin-top:3px;accent-color:var(--vert);width:18px;height:18px;flex:none}
.radio-carte.choisi{border-color:var(--vert);background:var(--sauge-pale)}
.radio-carte strong{display:block;font-size:.96rem}
.radio-carte span{font-size:.84rem;color:var(--gris)}

/* ---------- 13. Panier tiroir ---------- */
.voile{
  position:fixed;inset:0;background:rgba(29,38,32,.5);z-index:80;
  opacity:0;visibility:hidden;transition:opacity var(--t-normal),visibility var(--t-normal);
}
.voile.visible{opacity:1;visibility:visible}
.tiroir{
  position:fixed;top:0;right:0;height:100%;width:min(420px,100%);z-index:85;
  background:var(--creme);display:flex;flex-direction:column;
  transform:translateX(102%);transition:transform var(--t-normal);box-shadow:var(--ombre-l);
}
.tiroir.ouvert{transform:none}
.tiroir-tete{display:flex;align-items:center;justify-content:space-between;padding:18px 20px;border-bottom:1px solid var(--sauge-pale)}
.tiroir-tete h3{margin:0;font-size:1.2rem}
.tiroir-corps{flex:1;overflow-y:auto;padding:18px 20px}
.tiroir-pied{padding:18px 20px;border-top:1px solid var(--sauge-pale);background:var(--blanc)}
.ligne-panier{display:flex;gap:13px;padding:13px 0;border-bottom:1px solid var(--sauge-pale)}
.ligne-panier:last-child{border:none}
.lp-img{width:72px;height:72px;border-radius:var(--r-s);background:var(--beige);object-fit:cover;flex:none}
.lp-corps{flex:1;min-width:0}
.lp-nom{font-weight:700;font-size:.92rem;line-height:1.3;margin:0 0 3px;color:var(--vert)}
.lp-meta{font-size:.79rem;color:var(--gris)}
.qte{display:inline-flex;align-items:center;border:1px solid var(--gris-clair);border-radius:var(--r-full);overflow:hidden;background:#fff}
.qte button{width:32px;height:32px;display:grid;place-items:center;color:var(--vert)}
.qte button:hover{background:var(--sauge-pale)}
.qte button i{width:15px;height:15px}
.qte input{width:42px;text-align:center;border:none;padding:0;height:32px;background:transparent}
.qte input:focus{box-shadow:none}
.supprimer{color:var(--gris);display:inline-flex;align-items:center;gap:5px;font-size:.81rem}
.supprimer:hover{color:var(--rouge)}
.supprimer i{width:14px;height:14px}
.total-ligne{display:flex;justify-content:space-between;padding:6px 0;font-size:.94rem}
.total-ligne.fort{font-weight:700;font-size:1.16rem;color:var(--vert);border-top:1px solid var(--sauge-pale);margin-top:9px;padding-top:13px}
.total-ligne.fort span:last-child{font-family:"Fraunces",serif}

/* ---------- 14. Fiche produit ---------- */
.produit-haut{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,54px);align-items:start}
.galerie-principale{
  aspect-ratio:1;background:var(--beige);border-radius:var(--r-m);overflow:hidden;
  border:1px solid var(--sauge-pale);position:relative;
}
.galerie-principale img{width:100%;height:100%;object-fit:cover}
.galerie-vignettes{display:flex;gap:10px;margin-top:12px;flex-wrap:wrap}
.galerie-vignettes button{
  width:74px;height:74px;border-radius:var(--r-s);overflow:hidden;border:1px solid var(--sauge-pale);background:var(--beige);
}
.galerie-vignettes button.actif{border-color:var(--vert);border-width:2px}
.galerie-vignettes img{width:100%;height:100%;object-fit:cover}
.badge-certifie{
  display:inline-flex;align-items:center;gap:10px;background:var(--sauge-pale);color:var(--vert);
  border:1px solid var(--sauge);border-radius:var(--r-full);padding:8px 16px;font-weight:700;font-size:.88rem;
}
.badge-certifie i{width:19px;height:19px;color:var(--vert)}
.onglets{display:flex;gap:4px;border-bottom:1px solid var(--sauge-pale);margin-bottom:22px;overflow-x:auto}
.onglets button{
  padding:12px 18px;font-weight:700;font-size:.93rem;color:var(--gris);white-space:nowrap;
  border-bottom:2px solid transparent;margin-bottom:-1px;
}
.onglets button.actif{color:var(--vert);border-color:var(--or)}
.panneau[hidden]{display:none}
.table-nutrition{background:var(--blanc);border:1px solid var(--sauge-pale);border-radius:var(--r-m);overflow:hidden}
.table-nutrition th,.table-nutrition td{padding:11px 16px;text-align:left;border-bottom:1px solid var(--sauge-pale);font-size:.92rem}
.table-nutrition thead th{background:var(--creme-2);font-size:.82rem;color:var(--gris)}
.table-nutrition tr:last-child td{border-bottom:none}
.table-nutrition td:last-child{text-align:right;font-weight:700;color:var(--vert)}
.fil-ariane{display:flex;flex-wrap:wrap;gap:7px;font-size:.85rem;color:var(--gris);padding:18px 0}
.fil-ariane a:hover{color:var(--vert)}
.fil-ariane i{width:13px;height:13px;opacity:.6}

/* ---------- 15. Avis ---------- */
.carte-avis{background:var(--blanc);border:1px solid var(--sauge-pale);border-radius:var(--r-m);padding:20px}
.etoiles{display:inline-flex;gap:2px;color:var(--or)}
.etoiles i{width:15px;height:15px;fill:currentColor}

.avis-auteur{font-weight:700;color:var(--vert);font-size:.93rem}

/* ---------- 16. Étapes / guide ---------- */
.etape{display:flex;gap:18px;align-items:flex-start;padding:20px 0;border-bottom:1px solid var(--sauge-pale)}
.etape:last-child{border:none}
.etape-num{
  width:44px;height:44px;border-radius:50%;border:1px solid var(--or);color:var(--or);
  display:grid;place-items:center;font-family:"Fraunces",serif;font-size:1.1rem;flex:none;background:var(--creme);
}
.encadre{
  background:var(--bleu-pale);border-left:3px solid var(--bleu);border-radius:0 var(--r-s) var(--r-s) 0;
  padding:17px 20px;margin:22px 0;
}
.encadre h4{color:var(--bleu);margin-bottom:6px;font-family:"Karla",sans-serif;font-size:.98rem}
.encadre p{margin:0;font-size:.94rem}

/* ---------- 17. Bloc pharmacie ---------- */
.bloc-pharmacie{
  display:grid;grid-template-columns:150px 1fr;gap:clamp(20px,4vw,44px);align-items:center;
  background:var(--blanc);border:1px solid var(--sauge-pale);border-radius:var(--r-l);
  padding:clamp(24px,4vw,44px);
}
.bloc-pharmacie .logo-ph{width:130px;margin-inline:auto}

/* ---------- 18. Blog ---------- */
.carte-article{
  display:flex;flex-direction:column;background:var(--blanc);border:1px solid var(--sauge-pale);
  border-radius:var(--r-m);overflow:hidden;height:100%;transition:border-color var(--t-rapide),box-shadow var(--t-rapide);
}
.carte-article:hover{border-color:var(--sauge);box-shadow:var(--ombre-m)}
.carte-article .vignette{aspect-ratio:16/10;background:var(--beige);overflow:hidden}
.carte-article .vignette img{width:100%;height:100%;object-fit:cover}
.carte-article .corps{padding:18px;display:flex;flex-direction:column;gap:8px;flex:1}
.carte-article h3{margin:0;font-size:1.1rem}
.meta-article{font-size:.81rem;color:var(--gris)}
.article-contenu{font-size:1.04rem;line-height:1.75}
.article-contenu h2{margin-top:1.6em;font-size:1.6rem}
.article-contenu h3{margin-top:1.3em}
.article-contenu ul{list-style:disc;padding-left:1.2em;margin:0 0 1em}
.article-contenu li{margin-bottom:.4em}

/* ---------- 19. Pied de page ---------- */
.site-footer{background:var(--vert);color:var(--sauge-pale);padding:clamp(40px,6vw,66px) 0 0;margin-top:auto}
.footer-grille{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:clamp(24px,4vw,44px)}
.site-footer h4{color:#fff;font-family:"Karla",sans-serif;font-size:.92rem;letter-spacing:.03em;margin-bottom:14px}
.site-footer a{color:var(--sauge-pale);font-size:.92rem}
.site-footer a:hover{color:#fff;text-decoration:underline;text-underline-offset:3px}
.site-footer li{margin-bottom:9px}
.footer-marque img{width:78px;border-radius:50%;margin-bottom:14px}
.footer-caution{
  display:flex;align-items:center;gap:12px;background:rgba(255,255,255,.07);
  border-radius:var(--r-m);padding:13px 15px;margin-top:18px;
}
.footer-caution img{width:34px;flex:none;filter:brightness(0) invert(1);opacity:.9}
.footer-caution span{font-size:.81rem;line-height:1.45}
.reseaux{display:flex;gap:10px;margin-top:16px}
.reseaux a{
  width:42px;height:42px;border-radius:50%;border:1px solid rgba(255,255,255,.28);
  display:grid;place-items:center;transition:background var(--t-rapide),border-color var(--t-rapide);
}
.reseaux a:hover{background:rgba(255,255,255,.14);border-color:#fff}
.reseaux i{width:19px;height:19px}
.footer-contact li{display:flex;gap:10px;align-items:flex-start;font-size:.92rem}
.footer-contact i{width:17px;height:17px;color:var(--or-clair);flex:none;margin-top:4px}
.footer-bas{
  border-top:1px solid rgba(255,255,255,.14);margin-top:38px;padding:20px 0;
  display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;font-size:.83rem;
}
.footer-bas nav{display:flex;flex-wrap:wrap;gap:18px}

/* ---------- 20. Flottants ---------- */
.wa-flottant{
  position:fixed;right:18px;bottom:18px;z-index:70;width:58px;height:58px;border-radius:50%;
  background:#25D366;color:#fff;display:grid;place-items:center;box-shadow:var(--ombre-l);
  transition:transform var(--t-rapide);
}
.wa-flottant:hover{transform:scale(1.06)}
.wa-flottant i,.wa-flottant svg{width:29px;height:29px}
.haut-page{
  position:fixed;right:20px;bottom:88px;z-index:69;width:44px;height:44px;border-radius:50%;
  background:var(--vert);color:var(--creme);display:grid;place-items:center;
  opacity:0;visibility:hidden;transition:opacity var(--t-rapide),visibility var(--t-rapide);
}
.haut-page.visible{opacity:1;visibility:visible}

/* ---------- 21. Notifications ---------- */
.zone-toast{position:fixed;top:calc(var(--h-header) + 14px);right:16px;z-index:200;display:flex;flex-direction:column;gap:10px;max-width:340px}
.toast{
  display:flex;gap:11px;align-items:flex-start;background:var(--blanc);border:1px solid var(--sauge-pale);
  border-left:3px solid var(--vert);border-radius:var(--r-s);padding:13px 15px;box-shadow:var(--ombre-l);
  animation:toast-in .28s cubic-bezier(.4,0,.2,1);font-size:.9rem;
}
.toast.erreur{border-left-color:var(--rouge)}
.toast.erreur i{color:var(--rouge)}
.toast i{width:19px;height:19px;color:var(--vert);flex:none;margin-top:2px}
@keyframes toast-in{from{opacity:0;transform:translateX(24px)}to{opacity:1;transform:none}}

/* ---------- 22. États ---------- */
.squelette{background:linear-gradient(90deg,var(--creme-2) 25%,var(--beige) 50%,var(--creme-2) 75%);background-size:200% 100%;animation:pulse 1.4s infinite;border-radius:var(--r-m)}
@keyframes pulse{from{background-position:200% 0}to{background-position:-200% 0}}
.squelette-carte{height:330px}
.vide{
  text-align:center;padding:56px 20px;background:var(--blanc);
  border:1px dashed var(--sauge);border-radius:var(--r-m);
}
.vide i{width:42px;height:42px;color:var(--sauge);stroke-width:1.2;margin-bottom:12px}
.vide h3{margin-bottom:6px}
.vide p{margin-inline:auto}

/* ---------- 23. Divers ---------- */
.carte{background:var(--blanc);border:1px solid var(--sauge-pale);border-radius:var(--r-m);padding:clamp(18px,3vw,28px)}
.accordeon-item{border-bottom:1px solid var(--sauge-pale)}
.accordeon-tete{
  width:100%;display:flex;justify-content:space-between;align-items:center;gap:16px;
  padding:18px 2px;text-align:left;font-family:"Fraunces",serif;font-size:1.07rem;color:var(--vert);
}
.accordeon-tete i{width:19px;height:19px;flex:none;transition:transform var(--t-rapide);color:var(--or)}
.accordeon-tete[aria-expanded="true"] i{transform:rotate(45deg)}
.accordeon-corps{padding:0 2px 20px;max-width:75ch}
.accordeon-corps[hidden]{display:none}
.carte-pack{
  background:linear-gradient(160deg,var(--blanc) 0%,var(--creme-2) 100%);
  border:1px solid var(--sauge);border-radius:var(--r-l);padding:26px;display:flex;flex-direction:column;gap:12px;height:100%;
}
.carte-pack ul{display:flex;flex-direction:column;gap:8px;margin:6px 0 4px}
.carte-pack li{display:flex;gap:9px;align-items:flex-start;font-size:.92rem}
.carte-pack li i{width:16px;height:16px;color:var(--or);flex:none;margin-top:4px}
.etat{display:inline-flex;align-items:center;gap:7px;padding:5px 12px;border-radius:var(--r-full);font-size:.82rem;font-weight:700}
.etat--en_attente{background:#FBF0D8;color:var(--ambre)}
.etat--confirmee{background:var(--bleu-pale);color:var(--bleu)}
.etat--preparation{background:#EDE7F6;color:#5B3F8C}
.etat--expediee{background:#E3F0E9;color:var(--vert-clair)}
.etat--livree{background:var(--sauge-pale);color:var(--vert)}
.etat--annulee,.etat--retour{background:#F7E2E0;color:var(--rouge)}
.suivi-piste{display:flex;flex-direction:column;gap:0;margin:24px 0}
.suivi-pas{display:flex;gap:16px;padding-bottom:22px;position:relative}
.suivi-pas:not(:last-child)::before{content:"";position:absolute;left:17px;top:38px;bottom:0;width:1px;background:var(--sauge-pale)}
.suivi-pas .rond{
  width:35px;height:35px;border-radius:50%;border:1px solid var(--sauge);background:var(--creme);
  display:grid;place-items:center;flex:none;color:var(--sauge);z-index:1;
}
.suivi-pas.fait .rond{background:var(--vert);border-color:var(--vert);color:#fff}
.suivi-pas .rond i{width:16px;height:16px}
.carte-map{border:1px solid var(--sauge-pale);border-radius:var(--r-m);overflow:hidden;height:340px}
.carte-map iframe{width:100%;height:100%;border:0}

/* ---------- 24. Responsive ---------- */
@media (max-width:1080px){
  .nav-principale a{padding:9px 10px;font-size:.9rem}
  .footer-grille{grid-template-columns:1fr 1fr}
}
@media (max-width:900px){
  .g-4{grid-template-columns:repeat(3,1fr)}
  .hero-in{grid-template-columns:1fr;text-align:center}
  .hero .lead,.hero p{margin-inline:auto}
  .hero-actions,.hero-preuves{justify-content:center}
  .sceau{order:-1;width:min(330px,74vw)}
  .produit-haut{grid-template-columns:1fr}
  .bloc-pharmacie{grid-template-columns:1fr;text-align:center}
  .bloc-pharmacie p{margin-inline:auto}
  .boutique-grille{grid-template-columns:1fr}
  .filtres{
    position:fixed;inset:auto 0 0 0;z-index:86;max-height:82vh;overflow-y:auto;
    border-radius:var(--r-l) var(--r-l) 0 0;transform:translateY(102%);
    transition:transform var(--t-normal);box-shadow:var(--ombre-l);
  }
  .filtres.ouvert{transform:none}
  .btn-filtres-mobile{display:inline-flex}
}
@media (max-width:760px){
  .nav-principale{display:none}
  .burger{display:grid}
  .g-3,.g-4{grid-template-columns:repeat(2,1fr)}
  .confiance .grille{grid-template-columns:repeat(2,1fr)}
  .marque img{width:44px;height:44px}
  .marque-nom{font-size:.96rem}
  .footer-grille{grid-template-columns:1fr}
  .zone-toast{left:16px;right:16px;max-width:none}
  :root{--h-header:66px}
}
@media (max-width:480px){
  .g-2,.g-3,.g-4{grid-template-columns:1fr}
  .grille.produits{grid-template-columns:repeat(2,1fr);gap:12px}
  .cp-corps{padding:12px}
  .cp-nom{font-size:.93rem}
  .prix{font-size:1.06rem}
  .cp-ajout{width:38px;height:38px}
  .btn{padding:12px 18px}
  .marque-by{display:none}
}

/* ---------- 25. Impression (bon de livraison) ---------- */
@media print{
  .site-header,.site-footer,.wa-flottant,.haut-page,.bandeau-annonce,.tiroir,.voile{display:none!important}
  body{background:#fff}
  .carte{border:1px solid #999;box-shadow:none}
}

/* =========================================================
   26. Refonte UI — en-tête, recherche, rayons, mobile,
       aperçu rapide, visionneuse, barre d'achat
   ========================================================= */

/* ---------- Bandeau d'annonce ---------- */
.annonce-in{display:flex;align-items:center;justify-content:center;gap:26px;flex-wrap:wrap}
.bandeau-annonce span{display:inline-flex;align-items:center;gap:7px}
.bandeau-annonce i{width:14px;height:14px;color:var(--or-clair)}

/* ---------- En-tête ---------- */
.site-header{transition:box-shadow var(--t-normal),background var(--t-normal)}
.site-header.compact{box-shadow:0 1px 0 var(--sauge-pale),0 10px 30px -22px rgba(35,80,63,.5)}
.marque img{transition:transform var(--t-normal)}
.marque:hover img{transform:rotate(-4deg) scale(1.04)}

.lien-rayons{
  display:inline-flex;align-items:center;gap:6px;padding:9px 13px;border-radius:var(--r-full);
  font-size:.94rem;font-weight:600;color:var(--encre);font-family:inherit;
  transition:background var(--t-rapide),color var(--t-rapide);
}
.lien-rayons:hover,.lien-rayons.ouvert{background:var(--sauge-pale);color:var(--vert)}
.lien-rayons i{width:15px;height:15px;transition:transform var(--t-rapide)}
.lien-rayons.ouvert i{transform:rotate(180deg)}

/* ---------- Panneau des rayons ---------- */
.rayons{
  border-top:1px solid var(--sauge-pale);background:var(--blanc);
  box-shadow:0 22px 40px -28px rgba(35,80,63,.55);
  animation:descendre .22s cubic-bezier(.4,0,.2,1);
}
@keyframes descendre{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
.rayons-grille{
  display:grid;grid-template-columns:repeat(4,1fr);gap:8px;
  max-width:var(--large);margin-inline:auto;padding:22px var(--gouttiere);
}
.rayon{
  display:flex;align-items:center;gap:12px;padding:11px 13px;border-radius:var(--r-m);
  border:1px solid transparent;transition:background var(--t-rapide),border-color var(--t-rapide);
}
.rayon:hover{background:var(--creme);border-color:var(--sauge-pale)}
.rayon-ico{
  width:40px;height:40px;border-radius:50%;background:var(--creme-2);display:grid;place-items:center;
  color:var(--vert);flex:none;
}
.rayon-ico i{width:19px;height:19px;stroke-width:1.5}
.rayon strong{font-size:.92rem;font-weight:600;color:var(--encre);line-height:1.25}
.rayons-pied{
  display:flex;gap:22px;flex-wrap:wrap;background:var(--creme-2);border-top:1px solid var(--sauge-pale);
  padding:13px var(--gouttiere);
}
.rayons-pied{justify-content:center}
.rayons-pied a{display:inline-flex;align-items:center;gap:8px;font-size:.89rem;font-weight:600;color:var(--vert)}
.rayons-pied a:hover{color:var(--or)}
.rayons-pied i{width:16px;height:16px;color:var(--or)}

/* ---------- Recherche ---------- */
.champ-recherche{position:relative;flex:1;display:block}
.champ-recherche i{
  position:absolute;left:14px;top:50%;transform:translateY(-50%);
  width:18px;height:18px;color:var(--gris);pointer-events:none;
}
.champ-recherche input{padding-left:42px;border-radius:var(--r-full)}
.barre-recherche form{gap:10px}
.suggestions{
  max-width:640px;margin:10px auto 0;background:var(--blanc);
  border:1px solid var(--sauge-pale);border-radius:var(--r-m);overflow:hidden;box-shadow:var(--ombre-m);
}
.suggestion{display:flex;align-items:center;gap:12px;padding:10px 14px;border-bottom:1px solid var(--sauge-pale)}
.suggestion:last-child{border-bottom:none}
.suggestion:hover{background:var(--creme)}
.suggestion img,.suggestion-vignette{
  width:46px;height:46px;border-radius:var(--r-s);object-fit:cover;background:var(--beige);flex:none;
  display:grid;place-items:center;color:var(--sauge);
}
.suggestion strong{display:block;font-size:.93rem;color:var(--vert);line-height:1.3}
.suggestion-tout{justify-content:center;background:var(--creme-2);font-weight:700;color:var(--vert);font-size:.9rem}
.suggestion-tout i{width:16px;height:16px}
.suggestion-vide{padding:16px;margin:0;text-align:center;color:var(--gris);font-size:.9rem}

/* ---------- Boutons : finitions ---------- */
.btn-primaire{box-shadow:0 8px 18px -12px rgba(35,80,63,.9)}
.btn-primaire:hover{box-shadow:0 12px 24px -12px rgba(35,80,63,.85)}
.btn-wa{background:#25D366;color:#fff}
.btn-wa:hover{background:#1eb757}
.ico-marque{flex:none}
.reseaux a .ico-marque{color:currentColor}

/* ---------- Carte produit : aperçu rapide ---------- */
.cp-cadre{position:relative;overflow:hidden}
.cp-apercu{
  position:absolute;left:10px;right:10px;bottom:10px;z-index:2;
  display:flex;align-items:center;justify-content:center;gap:7px;
  background:rgba(255,255,255,.95);color:var(--vert);border-radius:var(--r-full);
  padding:9px 14px;font-size:.83rem;font-weight:700;
  opacity:0;transform:translateY(8px);transition:opacity var(--t-rapide),transform var(--t-rapide),background var(--t-rapide);
}
.cp-apercu i{width:15px;height:15px}
.cp-apercu:hover{background:#fff}
.carte-produit:hover .cp-apercu,.carte-produit:focus-within .cp-apercu{opacity:1;transform:none}
@media (hover:none){
  .cp-apercu{opacity:1;transform:none;background:rgba(255,255,255,.92)}
}

/* ---------- Modale du site ---------- */
.modale-site{
  position:fixed;inset:0;z-index:150;background:rgba(29,38,32,.62);
  display:none;padding:18px;overflow-y:auto;backdrop-filter:blur(3px);
}
.modale-site.ouverte{display:block}
.modale-boite{
  position:relative;background:var(--creme);border-radius:var(--r-l);max-width:840px;
  margin:5vh auto;box-shadow:var(--ombre-l);animation:monter .26s cubic-bezier(.4,0,.2,1);
}
@keyframes monter{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.modale-fermer{
  position:absolute;top:12px;right:12px;z-index:3;width:38px;height:38px;border-radius:50%;
  background:rgba(255,255,255,.94);display:grid;place-items:center;color:var(--vert);box-shadow:var(--ombre-s);
}
.modale-fermer i{width:19px;height:19px}
.modale-contenu{padding:clamp(18px,3vw,28px)}
.apercu{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,3vw,28px);align-items:start}
.apercu-media{aspect-ratio:1;background:var(--beige);border-radius:var(--r-m);overflow:hidden}
.apercu-media img{width:100%;height:100%;object-fit:cover}

/* ---------- Visionneuse ---------- */
.visionneuse{position:relative;display:flex;align-items:center;justify-content:center;gap:12px}
.visionneuse img{max-height:76vh;border-radius:var(--r-m);object-fit:contain;background:var(--beige)}
.vis-nav{
  width:44px;height:44px;border-radius:50%;background:var(--blanc);color:var(--vert);
  display:grid;place-items:center;flex:none;box-shadow:var(--ombre-m);
}
.vis-nav i{width:20px;height:20px}
.galerie-principale img{cursor:zoom-in}
.loupe{
  position:absolute;right:12px;bottom:12px;width:42px;height:42px;border-radius:50%;
  background:rgba(255,255,255,.94);color:var(--vert);display:grid;place-items:center;box-shadow:var(--ombre-s);
}
.loupe i{width:19px;height:19px}

/* ---------- Barre d'achat fixe ---------- */
.barre-achat{
  position:fixed;left:0;right:0;bottom:0;z-index:65;background:var(--blanc);
  border-top:1px solid var(--sauge-pale);box-shadow:0 -12px 30px -24px rgba(35,80,63,.7);
  transform:translateY(102%);transition:transform var(--t-normal);
}
.barre-achat.visible{transform:none}
.barre-achat-in{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:11px 0}
.ba-produit{display:flex;align-items:center;gap:12px;min-width:0}
.ba-produit img{width:46px;height:46px;border-radius:var(--r-s);object-fit:cover;background:var(--beige);flex:none}
.ba-produit strong{font-size:.9rem;color:var(--vert);display:block;line-height:1.25}
.ba-produit .prix{font-size:1.02rem}

/* ---------- Produits vus récemment ---------- */
.bande-vus{
  display:flex;gap:12px;overflow-x:auto;padding-bottom:8px;
  scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
}
.carte-vue{
  display:flex;align-items:center;gap:11px;flex:0 0 auto;width:255px;scroll-snap-align:start;
  background:var(--blanc);border:1px solid var(--sauge-pale);border-radius:var(--r-m);padding:10px;
  transition:border-color var(--t-rapide);
}
.carte-vue:hover{border-color:var(--sauge)}
.carte-vue img,.vue-vide{
  width:56px;height:56px;border-radius:var(--r-s);object-fit:cover;background:var(--beige);flex:none;
  display:grid;place-items:center;color:var(--sauge);
}
.carte-vue strong{font-size:.88rem;color:var(--vert);line-height:1.3}

/* ---------- Progression de lecture ---------- */
.progression-lecture{
  position:fixed;top:0;left:0;height:3px;width:0;z-index:100;
  background:linear-gradient(90deg,var(--or),var(--vert));
}

/* ---------- Barre de navigation mobile ---------- */
.barre-mobile{display:none}
.menu-mobile .menu-titre{
  font-size:.78rem;color:var(--gris);letter-spacing:.04em;margin:0 0 8px;font-weight:700;
}
.menu-mobile .rayons-grille{grid-template-columns:1fr 1fr;padding:0;gap:6px;max-width:none}
.menu-mobile .rayon{background:var(--blanc);border-color:var(--sauge-pale);padding:9px}
.menu-mobile .rayon-ico{width:34px;height:34px}
.menu-mobile .rayon strong{font-size:.83rem}

@media (max-width:900px){
  .rayons-grille{grid-template-columns:repeat(2,1fr)}
  .apercu{grid-template-columns:1fr}
  .apercu-media{max-width:280px;margin-inline:auto}
}

@media (max-width:760px){
  body{padding-bottom:68px}
  .barre-mobile{
    display:grid;grid-template-columns:repeat(5,1fr);
    position:fixed;left:0;right:0;bottom:0;z-index:75;
    background:rgba(250,244,234,.97);backdrop-filter:blur(10px);
    border-top:1px solid var(--sauge-pale);padding-bottom:env(safe-area-inset-bottom);
  }
  .bm-item{
    display:flex;flex-direction:column;align-items:center;gap:3px;padding:9px 4px 8px;
    font-size:.68rem;font-weight:600;color:var(--gris);background:none;border:none;font-family:inherit;
  }
  .bm-item.actif{color:var(--vert)}
  .bm-ico{position:relative;display:grid;place-items:center}
  .bm-ico i{width:21px;height:21px}
  .bm-item .pastille{top:-5px;right:-9px;min-width:17px;height:17px;font-size:.63rem}
  .wa-flottant{bottom:84px;width:52px;height:52px}
  .wa-flottant .ico-marque{width:26px;height:26px}
  .haut-page{bottom:146px}
  .barre-achat{bottom:68px}
  .annonce-in{gap:0}
  .annonce-sep{display:none}
  .modale-boite{margin:2vh auto}
}

@media (max-width:480px){
  .barre-achat-in{padding:9px 0}
  .ba-produit strong{max-width:34vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .carte-vue{width:220px}
}

/* =========================================================
   27. Corrections après revue du rendu
   ========================================================= */
.nav-principale a,.lien-rayons{white-space:nowrap}
.nav-principale{gap:2px}
.site-footer .btn-wa{white-space:nowrap}
.footer-contact li{align-items:flex-start}

@media (max-width:1180px){
  .nav-principale a,.lien-rayons{padding:9px 9px;font-size:.89rem}
  .marque-by{display:none}
  .marque img{width:46px;height:46px}
}
@media (max-width:980px){
  .nav-principale{display:none}
  .burger{display:grid}
}
@media (max-width:760px){
  .bandeau-annonce .annonce-sep{display:none}
  .bandeau-annonce{font-size:.79rem}
}
@media (max-width:560px){
  .confiance .grille{grid-template-columns:1fr;gap:14px}
  .confiance-item{align-items:center}
  .hero-preuves{gap:12px 20px;justify-content:flex-start;text-align:left}
  .hero-preuve{font-size:.85rem}
}

/* =========================================================
   28. Miroir des règles d'icônes.
   Lucide remplace <i data-lucide> par <svg> : les mêmes
   règles doivent viser svg pour garder les bonnes tailles.
   ========================================================= */
.btn svg{width:18px;height:18px;flex:none}
.ico-btn svg{width:21px;height:21px}
.menu-mobile nav a svg{width:18px;height:18px;color:var(--or)}
.hero-kicker svg{width:15px;height:15px;color:var(--or)}
.hero-preuve svg{width:19px;height:19px;color:var(--or)}
.sceau-note svg{width:16px;height:16px;color:var(--bleu)}
.confiance-item svg{width:24px;height:24px;color:var(--or-clair);flex:none;margin-top:2px}
.carte-cat .vignette svg{width:38px;height:38px;color:var(--sauge);stroke-width:1.2}
.cp-media .placeholder svg{width:40px;height:40px;stroke-width:1.1}
.cp-fav.actif svg{fill:currentColor}
.cp-fav svg{width:18px;height:18px}
.mini-label svg{width:11px;height:11px}
.cp-ajout svg{width:20px;height:20px}
.puce svg{width:13px;height:13px}
.qte button svg{width:15px;height:15px}
.supprimer svg{width:14px;height:14px}
.badge-certifie svg{width:19px;height:19px;color:var(--vert)}
.fil-ariane svg{width:13px;height:13px;opacity:.6}
.etoiles svg{width:15px;height:15px;fill:currentColor}

.reseaux svg{width:19px;height:19px}
.footer-contact svg{width:17px;height:17px;color:var(--or-clair);flex:none;margin-top:4px}
.wa-flottant svg{width:29px;height:29px}
.toast.erreur svg{color:var(--rouge)}
.toast svg{width:19px;height:19px;color:var(--vert);flex:none;margin-top:2px}
.vide svg{width:42px;height:42px;color:var(--sauge);stroke-width:1.2;margin-bottom:12px}
.accordeon-tete svg{width:19px;height:19px;flex:none;transition:transform var(--t-rapide);color:var(--or)}
.accordeon-tete[aria-expanded="true"] svg{transform:rotate(45deg)}
.carte-pack li svg{width:16px;height:16px;color:var(--or);flex:none;margin-top:4px}
.suivi-pas .rond svg{width:16px;height:16px}
.bandeau-annonce svg{width:14px;height:14px;color:var(--or-clair)}
.lien-rayons svg{width:15px;height:15px;transition:transform var(--t-rapide)}
.lien-rayons.ouvert svg{transform:rotate(180deg)}
.rayon-ico svg{width:19px;height:19px;stroke-width:1.5}
.rayons-pied svg{width:16px;height:16px;color:var(--or)}
.champ-recherche svg{position:absolute;left:14px;top:50%;transform:translateY(-50%);
  width:18px;height:18px;color:var(--gris);pointer-events:none;}
.suggestion-tout svg{width:16px;height:16px}
.cp-apercu svg{width:15px;height:15px}
.modale-fermer svg{width:19px;height:19px}
.vis-nav svg{width:20px;height:20px}
.loupe svg{width:19px;height:19px}
@media (max-width:760px){
  .bm-ico svg{width:21px;height:21px}
}

/* =========================================================
   29. Notifications : en bas à gauche, pour ne pas couvrir
       le tiroir du panier ni la barre mobile.
   ========================================================= */
.zone-toast{top:auto;right:auto;left:20px;bottom:24px;max-width:340px}
@media (max-width:760px){
  .zone-toast{left:14px;right:14px;bottom:82px;max-width:none}
}

/* Page 404 : rayons sur deux colonnes, plus lisibles */
#rayons-404{grid-template-columns:repeat(2,1fr);text-align:left}
@media (max-width:560px){ #rayons-404{grid-template-columns:1fr} }

/* =========================================================
   30. Apparition au défilement (remplace AOS)
   ========================================================= */
[data-aos]{
  opacity:0;transform:translateY(20px);
  transition:opacity .62s cubic-bezier(.2,.7,.3,1),transform .62s cubic-bezier(.2,.7,.3,1);
  will-change:opacity,transform;
}
[data-aos="fade-in"]{transform:none}
[data-aos].vu{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  [data-aos]{opacity:1!important;transform:none!important;transition:none}
}

/* =========================================================
   31. Passe UI/UX : lisibilité, cibles tactiles, alignements
   ---------------------------------------------------------
   Échelle des plans (z-index) utilisée dans tout le site :
     10 barre d'achat produit · 60 en-tête · 65 boutons flottants
     75 barre mobile · 80 voile · 85 tiroir panier · 90 menu mobile
     100 progression de lecture · 150 modale · 200 notifications
   ========================================================= */

/* ---------- Cartes catégorie : hauteur égale, texte contenu ---------- */
.carte-cat{display:flex;flex-direction:column;height:100%}
.carte-cat-corps{display:flex;flex-direction:column;gap:4px;flex:1}
.carte-cat-corps span{
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;line-height:1.45;
}

/* ---------- Avis : cartes alignées, auteur en bas ---------- */
.carte-avis{display:flex;flex-direction:column;height:100%}
.carte-avis blockquote{flex:1}
.carte-avis figcaption{margin-top:auto;padding-top:6px}
.etoiles{gap:3px;align-items:center}
.etoiles svg{width:15px;height:15px;stroke-width:1.5}
.etoiles svg.etoile-pleine{fill:currentColor}
.etoiles svg.etoile-vide{fill:none;opacity:.32}
.etoiles-txt{font-size:.8rem;color:var(--gris);margin-left:6px;font-weight:700}

/* ---------- Cartes article et produit : hauteurs homogènes ---------- */
.grille > .carte-article,.grille > .carte-produit,.grille > .carte-pack{height:100%}
.carte-article .corps span.petit{
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
.cp-nom{
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  min-height:2.6em;
}

/* ---------- Bloc « Premiers pas » aligné en haut ---------- */
.bloc-guide{align-items:start}

/* ---------- Cibles tactiles : 44 px minimum ---------- */
.ico-btn{width:44px;height:44px}
.cp-fav{width:40px;height:40px}
.qte button{width:40px;height:40px}
.qte input{height:40px;width:46px}
.pagination button{min-width:44px;height:44px}
.supprimer{min-height:32px;display:inline-flex;align-items:center}
.accordeon-tete{min-height:56px}
.case{min-height:34px;cursor:pointer}
.carte-cat,.carte-produit a,.rayon,.suggestion,.carte-vue{cursor:pointer}

/* ---------- Pied de page : liens avec icônes ---------- */
.footer-liens li{margin-bottom:2px}
.footer-liens a{
  display:flex;align-items:center;gap:10px;padding:7px 0;
  transition:color var(--t-rapide),transform var(--t-rapide);
}
.footer-liens a:hover{text-decoration:none;color:#fff}
.footer-liens svg{
  width:16px;height:16px;flex:none;color:var(--or-clair);opacity:.85;
}
.footer-liens a:hover svg{opacity:1}
.footer-bas nav{gap:20px}

/* ---------- Focus visible aussi sur fond vert ---------- */
.site-footer :focus-visible,.confiance :focus-visible,.section--vert :focus-visible{
  outline-color:var(--or-clair);
}

/* ---------- Réservation d'espace : pas de saut au chargement ---------- */
.grille.produits{min-height:120px}
.suggestion img,.lp-img,.ba-produit img{background:var(--beige)}

/* ---------- Barre d'achat au-dessus du contenu, sous l'en-tête ---------- */
.barre-achat{z-index:64}

/* ---------- Responsive : paliers 1440 / 1024 / 768 / 375 ---------- */
@media (max-width:1024px){
  .g-4{grid-template-columns:repeat(3,1fr)}
  .footer-grille{grid-template-columns:1fr 1fr;gap:28px}
  .apercu-media{max-width:320px}
}
@media (max-width:820px){
  .g-3{grid-template-columns:repeat(2,1fr)}
  .g-4{grid-template-columns:repeat(2,1fr)}
  .bloc-guide{gap:26px}
}
@media (max-width:640px){
  body{font-size:16px}
  .lead{font-size:1.02rem}
  .footer-grille{grid-template-columns:1fr;gap:26px}
  .footer-bas{flex-direction:column;align-items:flex-start;gap:10px}
  .footer-bas nav{gap:14px}
  .tiroir{width:100%}
  .cp-nom{min-height:0}
}
@media (max-width:400px){
  .grille.produits{gap:10px}
  .cp-corps{padding:11px}
  .etiquette{font-size:.66rem;padding:3px 8px}
}

/* =========================================================
   32. Corrections issues de l'audit (375 px et 1440 px)
   ========================================================= */
html{overflow-x:hidden}

/* Contraste du texte secondaire porté au-dessus de 4,5:1 */
:root{--gris:#5A665C}

/* En-tête mobile : recherche et favoris sont déjà dans la barre du bas */
@media (max-width:760px){
  .masque-mobile{display:none}
  .actions-header{gap:2px}
  .header-in{gap:10px}
}

/* Zones cliquables du pied de page plus confortables */
.footer-liens a{padding:9px 0;min-height:40px}
.footer-bas nav a{display:inline-flex;align-items:center;min-height:40px;padding:2px 0}
.footer-contact a{display:inline-flex;align-items:center;min-height:34px}
.reseaux a{width:44px;height:44px}

/* Liens de texte : cible plus large sans casser le rythme */
.lien-souligne{display:inline-flex;align-items:center;min-height:34px}

/* =========================================================
   33. Mobile et tablette : hiérarchie de l'accueil,
       en-tête compact, bouton WhatsApp discret
   ========================================================= */

/* ---------- Tablette : le sceau reste à droite plus longtemps ---------- */
@media (min-width:761px) and (max-width:900px){
  /* La tablette garde deux colonnes : il y a la place */
  .hero-in{grid-template-columns:1.08fr .92fr;text-align:left;gap:28px;align-items:center}
  .hero .lead,.hero p{margin-inline:0}
  .hero-actions,.hero-preuves{justify-content:flex-start}
  .sceau{order:0;width:min(300px,40vw);margin:0 0 0 auto}
  .sceau-note{font-size:.74rem;padding:7px 13px}
  .confiance .grille{grid-template-columns:repeat(2,1fr)}
}

/* ---------- Mobile : le titre passe avant l'image ---------- */
@media (max-width:760px){
  :root{--h-header:60px}

  .hero{padding:26px 0 38px}
  .hero-kicker{margin-bottom:14px;font-size:.78rem;padding:5px 13px}
  .hero h1{font-size:clamp(1.95rem,8vw,2.5rem)}
  .hero .lead{font-size:1rem}
  .hero-actions{margin-top:20px;width:100%}
  .hero-actions .btn{flex:1;min-width:190px}
  .hero-preuves{margin-top:24px;padding-top:20px;justify-content:center}

  /* Le sceau vient après le texte, en plus petit */
  .sceau{order:0;width:min(250px,62vw);margin:30px auto 0}
  .sceau::after{inset:11px;border-width:4px}
  .sceau-note{
    position:static;transform:none;margin:14px auto 0;
    display:inline-flex;box-shadow:none;font-size:.78rem;padding:7px 14px;
  }

  /* En-tête plus bas et mieux réparti */
  .marque img{width:38px;height:38px}
  .marque-nom{font-size:.94rem}
  .header-in{gap:8px}
  .bandeau-annonce{padding:6px var(--gouttiere);font-size:.76rem}

  /* Bouton WhatsApp : plus petit, effacé au défilement vers le bas */
  .wa-flottant{
    width:48px;height:48px;right:14px;bottom:80px;
    box-shadow:0 8px 20px -8px rgba(37,211,102,.75);
    transition:transform var(--t-normal),opacity var(--t-normal);
  }
  .wa-flottant .ico-marque{width:24px;height:24px}
  .wa-flottant.replie{opacity:0;transform:translateY(72px) scale(.85);pointer-events:none}
  .haut-page{bottom:138px;width:40px;height:40px}
  body.sans-flottants .wa-flottant,
  body.sans-flottants .haut-page{opacity:0;pointer-events:none}

  /* Barre du bas : lecture plus nette */
  .barre-mobile{
    box-shadow:0 -8px 24px -20px rgba(35,80,63,.9);
    border-top:1px solid var(--sauge-pale);
  }
  .bm-item{font-size:.66rem;letter-spacing:.01em;padding:8px 2px 7px;position:relative}
  .bm-item.actif::before{
    content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);
    width:26px;height:2px;background:var(--or);border-radius:0 0 3px 3px;
  }
  .bm-ico svg{width:22px;height:22px}
}

@media (max-width:400px){
  .hero-actions .btn{width:100%}
  .bm-item{font-size:.62rem}
  .marque-nom{font-size:.88rem}
}

/* Tablette : trois produits par ligne, l'espace est là */
@media (min-width:620px) and (max-width:1000px){
  .boutique-grille .grille.produits,
  .section .grille.produits{grid-template-columns:repeat(3,1fr)}
  .grille.produits .cp-corps{padding:12px 13px}
  .grille.produits .cp-nom{font-size:.95rem}
}

/* =========================================================
   34. Correctifs signalés sur mobile
   ========================================================= */

/* Panier et menu collés au bord droit : sans le menu de navigation
   (masqué sur mobile), plus rien ne les poussait à droite. */
.actions-header{margin-left:auto}

/* Cartes rayon compactes sur mobile : vignette à gauche, texte à droite */
@media (max-width:640px){
  .carte-cat{flex-direction:row;align-items:center;gap:12px;padding:10px}
  .carte-cat .vignette{
    width:74px;height:74px;aspect-ratio:auto;flex:none;border-radius:var(--r-s);overflow:hidden;
  }
  .carte-cat .vignette img{width:100%;height:100%;object-fit:cover}
  .carte-cat-corps{padding:0;gap:2px}
  .carte-cat h3{font-size:.97rem;line-height:1.25}
  .carte-cat-corps span{-webkit-line-clamp:2;font-size:.8rem}
}
@media (max-width:400px){
  .carte-cat .vignette{width:62px;height:62px}
  .carte-cat h3{font-size:.92rem}
  .carte-cat-corps span{-webkit-line-clamp:1}
}

/* Les rayons occupent toute la largeur sur mobile : deux colonnes
   coupaient les titres. Les produits, eux, restent sur deux colonnes. */
@media (max-width:640px){
  #grille-categories,#rayons-404{grid-template-columns:1fr}
  .carte-cat-corps span{-webkit-line-clamp:2}
}

/* Texte d'introduction d'un rayon */
.texte-rayon{
  max-width:70ch;color:var(--gris);font-size:.98rem;line-height:1.7;
  border-left:2px solid var(--or);padding-left:16px;margin-top:14px;
}

/* =========================================================
   35. Fil d'Ariane redessiné + finitions mobile / tablette
   ========================================================= */

/* ---------- Fil d'Ariane ---------- */
.fil-ariane{
  display:flex;align-items:center;
  column-gap:9px;row-gap:2px;
  padding:15px 0;
  font-size:.86rem;line-height:1.5;
  color:var(--gris);
}
.fil-ariane a{color:var(--gris);transition:color var(--t-rapide)}
.fil-ariane a:hover{color:var(--vert)}
/* La page courante, dernier maillon : en vert et non cliquable */
.fil-ariane > span:last-child{color:var(--vert);font-weight:600}
/* Le chevron : fin, discret, aligné sur la ligne du texte */
.fil-ariane svg,
.fil-ariane i{
  width:13px;height:13px;flex:none;
  color:var(--gris-clair);opacity:1;
  stroke-width:2.4;
  align-self:center;
  transform:translateY(.5px);
}

/* Sur petit écran, le fil défile latéralement au lieu de passer à la ligne */
@media (max-width:600px){
  .fil-ariane{
    flex-wrap:nowrap;white-space:nowrap;
    overflow-x:auto;-webkit-overflow-scrolling:touch;
    scrollbar-width:none;padding:12px 0;
  }
  .fil-ariane::-webkit-scrollbar{display:none}
  .fil-ariane > *{flex:none}
}

/* ---------- Anti-débordement horizontal ---------- */
svg,video,iframe{max-width:100%}
.grille > *{min-width:0}
.flex > svg,.flex-entre > svg{flex:none}
h1,h2,h3,h4,p,li,td,th,dd,dt,.cp-nom,.lp-nom{overflow-wrap:break-word}

/* ---------- Tableau nutrition sur petit écran ---------- */
@media (max-width:520px){
  .table-nutrition{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .table-nutrition th,.table-nutrition td{padding:10px 12px;font-size:.88rem}
}

/* ---------- Fiche produit : galerie et actions ---------- */
@media (max-width:760px){
  .produit-haut{gap:24px}
  .galerie-vignettes button{width:58px;height:58px}
  /* Le bouton « Ajouter au panier » prend toute la largeur sous la quantité */
  .produit-haut .btn-lg{flex:1 1 100%}
  .produit-haut .btn-ligne{flex:1 1 100%;justify-content:center}
}

/* ---------- Modales plein écran sur mobile ---------- */
@media (max-width:600px){
  .modale-fond{padding:10px}
  .modale-boite{max-width:none;margin:0 auto;max-height:94vh;overflow-y:auto}
}

/* ---------- Tablette : le panier et la commande restent lisibles ---------- */
@media (min-width:601px) and (max-width:980px){
  .table-nutrition th,.table-nutrition td{padding:11px 14px}
  .bande-vus .carte-vue{width:240px}
}

/* ---------- Zones tactiles minimales ---------- */
@media (hover:none){
  .qte button{min-width:40px;min-height:40px}
  .galerie-vignettes button{min-width:44px;min-height:44px}
  .onglets button{min-height:44px}
}

/* =========================================================
   36. Passe finale — accessibilité, cohérence des paliers
       responsive, finitions d'interface.
       Ce bloc est le dernier du fichier : à spécificité
       égale, c'est lui qui l'emporte. Il sert donc à
       trancher les paliers qui se contredisaient plus haut.
   ========================================================= */

/* ---------- 36.1 « Aller au contenu » enfin utilisable ----------
   Le lien existait sur chaque page mais gardait la classe
   .sr-only même au clavier : il restait invisible, donc
   inutilisable. Il apparaît maintenant dès qu'il reçoit le
   focus, puis disparaît. */
a.sr-only:focus,
a.sr-only:focus-visible{
  position:fixed;top:12px;left:12px;z-index:300;
  width:auto;height:auto;margin:0;padding:12px 22px;
  overflow:visible;clip:auto;clip-path:none;white-space:nowrap;
  background:var(--vert);color:var(--creme);
  border-radius:var(--r-full);font-weight:700;
  box-shadow:var(--ombre-l);outline:2.5px solid var(--or);outline-offset:3px;
}

/* ---------- 36.2 L'attribut hidden gagne toujours ----------
   Un élément marqué hidden qui reçoit ensuite un display
   (grid, flex…) réapparaît. Cette règle ferme la porte
   une fois pour toutes. */
[hidden]{display:none !important}

/* ---------- 36.3 Menu mobile hors du parcours clavier ----------
   Fermé, il était seulement décalé hors de l'écran : la
   tabulation continuait de traverser ses liens, invisibles.
   Une personne au clavier se retrouvait perdue. */
.menu-mobile{
  visibility:hidden;
  transition:transform var(--t-normal),visibility var(--t-normal);
}
.menu-mobile.ouvert{visibility:visible}

/* ---------- 36.4 Anneau de focus net sur les champs ----------
   input:focus retirait l'outline ; il ne restait qu'une ombre
   très pâle, sous le seuil de visibilité. */
input:focus-visible,
select:focus-visible,
textarea:focus-visible{
  outline:2.5px solid var(--or);
  outline-offset:2px;
  border-color:var(--vert);
  box-shadow:none;
}

/* ---------- 36.5 Boutons désactivés lisibles ---------- */
.btn:disabled,.btn[disabled],
.cp-ajout:disabled,.cp-ajout[disabled]{
  opacity:.45;cursor:not-allowed;pointer-events:none;
}

/* ---------- 36.6 Un seul palier par largeur ----------
   Les sections 24, 31 et 33 se recouvraient : sous 480 px,
   la règle « 2 colonnes » écrite plus bas dans le fichier
   annulait la règle « 1 colonne » écrite plus haut. Résultat :
   les avis et les blocs de réassurance restaient à deux
   colonnes sur un petit téléphone. */
@media (max-width:760px){
  /* Deux colonnes de texte côte à côte sur un téléphone :
     illisible. Une seule, désormais. */
  .g-2{grid-template-columns:1fr}
  .bloc-guide{grid-template-columns:1fr;gap:30px}
}
@media (max-width:640px){
  .g-3{grid-template-columns:1fr}
  .g-4{grid-template-columns:repeat(2,1fr)}
  /* Le catalogue garde deux colonnes : c'est la façon
     habituelle de parcourir des produits au pouce. */
  .grille.produits{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:480px){
  .g-4{grid-template-columns:1fr}
  .grille.produits{grid-template-columns:repeat(2,1fr)}
}

/* ---------- 36.7 Tablette : 761 → 980 px ----------
   Zone laissée de côté jusqu'ici : le menu principal est déjà
   masqué, mais la barre du bas ne s'affiche qu'en dessous de
   760 px. Toute la navigation repose donc sur le seul bouton
   burger : il doit se voir. */
@media (min-width:761px) and (max-width:980px){
  .burger{background:var(--sauge-pale);color:var(--vert)}
  .burger:hover{background:var(--sauge)}
  .wa-flottant{bottom:22px}
  .haut-page{bottom:94px}
  .tiroir{width:min(430px,92vw)}
  .footer-grille{grid-template-columns:1fr 1fr;gap:30px}
}

/* ---------- 36.8 iPhone : barre d'accueil ----------
   Sans cette réserve, les boutons flottants se posent sur la
   barre grise du bas et deviennent difficiles à toucher. */
@media (max-width:760px){
  .wa-flottant{bottom:calc(80px + env(safe-area-inset-bottom))}
  .haut-page{bottom:calc(138px + env(safe-area-inset-bottom))}
  .zone-toast{bottom:calc(82px + env(safe-area-inset-bottom))}
}

/* ---------- 36.9 Finitions ---------- */
/* Reflet gris de iOS au toucher remplacé par la couleur de la
   marque : l'appui devient lisible au lieu d'être terne. */
a,button,.bm-item,.rayon,.carte-cat{-webkit-tap-highlight-color:rgba(35,80,63,.14)}
::selection{background:var(--or-clair);color:var(--encre)}
html{scrollbar-width:thin;scrollbar-color:var(--sauge) transparent}
.fil-ariane a{display:inline-flex;align-items:center;min-height:32px}

/* ---------- 36.10 Très grands écrans ----------
   Au-delà de 1600 px, le contenu restait coincé dans une
   colonne de 1240 px au milieu d'un grand vide. */
@media (min-width:1600px){
  :root{--large:1340px}
  .hero-in{gap:76px}
  .sceau{width:min(470px,84vw)}
}

/* ---------- 36.11 Impression : adresses lisibles ----------
   Sur une facture ou une fiche imprimée, un lien souligné sans
   son adresse ne sert à rien. */
@media print{
  .barre-mobile,.menu-mobile,.zone-toast,.modale-site{display:none !important}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:.8em;color:#555}
  body{padding-bottom:0}
}

/* ---------- 36.12 Le sceau garde sa signature lisible ----------
   La pastille « Conseil pharmacien inclus » était posée à
   l'intérieur du cercle, bas centré : elle recouvrait
   exactement la mention « by Pharmacie Saint Michel —
   Dr S. Benderdouche » gravée dans le logo. La caution la
   plus forte du site était donc masquée par une étiquette.
   Elle descend maintenant sous le sceau, où elle prolonge
   le cercle au lieu de le cacher. */
.sceau{padding-bottom:34px;aspect-ratio:auto}
.sceau::before{inset:0 0 34px 0}
.sceau::after{inset:16px 16px 50px 16px}
.sceau-note{bottom:0;transform:translate(-50%,0)}

@media (min-width:761px) and (max-width:900px){
  .sceau-note{font-size:.74rem;padding:7px 13px}
}
@media (max-width:760px){
  /* Sur mobile la pastille est déjà en flux normal (section 33) :
     on rend au sceau sa réserve d'origine. */
  .sceau{padding-bottom:0}
  .sceau::before{inset:0}
  .sceau::after{inset:11px}
}