/* ============ Bio Mellal — Premium ============ */
:root{
  --vert-fonce:#1c3f24;
  --vert:#237a3c;
  --vert-clair:#e8f0e6;
  --creme:#f6f1e7;
  --creme-fonce:#efe7d7;
  --or:#b8933d;
  --encre:#20241e;
  --gris:#6d6f66;
  --blanc:#ffffff;
  --rayon:14px;
  --ombre:0 10px 40px rgba(28,63,36,.10);
  --transition:.35s cubic-bezier(.22,.61,.36,1);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:'Jost',sans-serif;color:var(--encre);background:var(--blanc);line-height:1.65;font-size:16.5px}
.slider{margin-top:-86px;padding-top:86px}
h1,h2,h3,h4,.serif{font-family:'Marcellus',serif;font-weight:400;line-height:1.2}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
ul{list-style:none}
button{font-family:inherit;cursor:pointer}
.container{width:min(1200px,92%);margin-inline:auto}

/* ---------- annonce ---------- */
.topbar{background:var(--vert-fonce);color:#e9f3ea;text-align:center;font-size:.8rem;letter-spacing:.18em;text-transform:uppercase;padding:.55rem 1rem}

/* ---------- header ---------- */
header.site{position:sticky;top:12px;z-index:50;margin:12px auto 0;width:min(1200px,96%);border-radius:18px;background:rgba(255,255,255,.55);backdrop-filter:blur(18px) saturate(1.5);-webkit-backdrop-filter:blur(18px) saturate(1.5);border:1px solid rgba(255,255,255,.65);box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 12px 32px rgba(28,63,36,.12)}
header.site .nav{padding:.65rem 1.4rem}
.nav{display:flex;align-items:center;justify-content:space-between;gap:2rem;padding:.9rem 0}
.nav .logo img{height:58px;width:auto}
.nav nav{display:flex;gap:2.2rem}
.nav nav a{font-size:.86rem;letter-spacing:.16em;text-transform:uppercase;position:relative;padding:.3rem 0;color:var(--encre)}
.nav nav a::after{content:"";position:absolute;left:0;bottom:0;width:0;height:1.5px;background:var(--or);transition:width var(--transition)}
.nav nav a:hover::after,.nav nav a.actif::after{width:100%}
.nav-actions{display:flex;align-items:center;gap:1.1rem}
.btn-panier{position:relative;background:none;border:none;display:flex;align-items:center;gap:.5rem;font-size:.86rem;letter-spacing:.1em;text-transform:uppercase}
.btn-panier svg{width:22px;height:22px}
.badge{position:absolute;top:-8px;right:-12px;background:var(--or);color:#fff;font-size:.68rem;min-width:18px;height:18px;border-radius:50%;display:grid;place-items:center;padding:0 4px}
.burger{display:none;background:none;border:none}
.burger svg{width:26px;height:26px}
@media(max-width:840px){
  .nav nav{display:none;position:absolute;top:100%;left:0;right:0;background:#fff;flex-direction:column;gap:0;border-bottom:1px solid #eee7d8;box-shadow:var(--ombre)}
  .nav nav.ouvert{display:flex}
  .nav nav a{padding:1rem 5%;border-top:1px solid #f2ecdf}
  .burger{display:block}
}

/* ---------- slider accueil ---------- */
.slider{position:relative;height:min(78vh,640px);min-height:440px;overflow:hidden;background:var(--vert-fonce)}
.slide{position:absolute;inset:0;background-image:var(--img-d);background-size:cover;background-position:center right;background-repeat:no-repeat;opacity:0;transform:scale(1.06);transition:opacity 1s ease,transform 6s ease;display:flex;align-items:center;pointer-events:none}
.slide.actif{opacity:1;transform:scale(1);pointer-events:auto;z-index:1}
.slide-voile{position:absolute;inset:0;background:linear-gradient(90deg,rgba(28,63,36,.13) 0%,rgba(28,63,36,.05) 45%,transparent 75%)}
.slide-contenu{position:relative;max-width:560px;margin-left:calc((100% - min(1200px,92%))/2);padding:2.2rem 2.4rem;border-radius:22px;background:rgba(255,255,255,.30);backdrop-filter:blur(18px) saturate(1.5);-webkit-backdrop-filter:blur(18px) saturate(1.5);border:1px solid rgba(255,255,255,.55);box-shadow:inset 0 1px 0 rgba(255,255,255,.65),inset 0 -1px 0 rgba(255,255,255,.15),0 18px 44px rgba(20,40,25,.22)}
.slide-contenu .surtitre{animation:monter .8s .15s both}
.slide-titre{font-family:'Marcellus',serif;font-size:clamp(2rem,4.4vw,3.2rem);color:var(--vert-fonce);margin-bottom:1rem;animation:monter .8s .3s both;text-shadow:0 1px 0 rgba(255,255,255,.4)}
.slide-contenu p{color:#33402f;max-width:42ch;margin-bottom:1.8rem;font-size:1.05rem;animation:monter .8s .45s both}
.slide-contenu .btn{animation:monter .8s .6s both}
@keyframes monter{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
.slider-nav{position:absolute;bottom:26px;left:0;right:0;z-index:2;display:flex;justify-content:center;align-items:center;gap:1.2rem}
.slider-nav .fleche{width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.6);background:rgba(255,255,255,.35);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);color:var(--vert-fonce);font-size:1rem;transition:var(--transition);box-shadow:inset 0 1px 0 rgba(255,255,255,.7)}
.slider-nav .fleche:hover{background:var(--vert-fonce);color:#fff;border-color:var(--vert-fonce)}
.points{display:flex;gap:.55rem}
.points button{width:10px;height:10px;border-radius:50%;border:none;background:rgba(28,63,36,.25);transition:var(--transition)}
.points button.actif{background:var(--or);transform:scale(1.25)}
@media(max-width:840px){
  /* image verticale dédiée : produit visible en haut, texte en bas */
  /* empilement vertical : photo en haut, carte de texte dessous (aucun chevauchement) */
  .slide{display:flex;flex-direction:column;justify-content:flex-end;align-items:stretch;background-image:none;background-color:#f6f1e7}
  .slide::before{content:"";flex:1 1 auto;min-height:130px;margin:78px 4% .4rem;
    background-image:var(--img-m);background-size:contain;background-position:center bottom;background-repeat:no-repeat}
  .slide-voile{background:linear-gradient(to top,rgba(246,241,231,.98) 26%,rgba(246,241,231,.75) 42%,transparent 62%)}
  .slide-contenu{flex:0 0 auto;margin:0 4% 1.5rem;max-width:none;width:92%;padding:1.2rem 1.3rem;background:rgba(255,255,255,.6);border-radius:18px}
  .slide-titre{font-size:clamp(1.6rem,6.4vw,2.2rem);margin-bottom:.5rem}
  .slide-contenu .surtitre{margin-bottom:.5rem;font-size:.7rem;letter-spacing:.2em}
  .slide-contenu p{font-size:.92rem;margin-bottom:1rem;max-width:none}
  .slider-nav{bottom:auto;top:calc(50% - 46px);justify-content:space-between;padding-inline:.5rem;gap:0}
  .slider-nav .points{display:none}
  .slider-nav .fleche{width:36px;height:36px;background:rgba(255,255,255,.75)}
}

/* ---------- ruban défilant ---------- */
.ruban{background:rgba(28,63,36,.88);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);color:#e9f3ea;overflow:hidden;padding:1rem 0;border-block:1px solid rgba(255,255,255,.14);box-shadow:inset 0 1px 0 rgba(255,255,255,.12)}
.ruban-piste{display:flex;width:max-content;animation:defiler 30s linear infinite;gap:0}
.ruban span{display:inline-flex;align-items:center;gap:2.4rem;padding-right:2.4rem;font-family:'Marcellus',serif;font-size:1.02rem;letter-spacing:.22em;text-transform:uppercase;white-space:nowrap}
.ruban i{color:var(--or);font-style:normal;font-size:.8rem}
@keyframes defiler{to{transform:translateX(-50%)}}
.ruban:hover .ruban-piste{animation-play-state:paused}

/* ---------- choix du poids ---------- */
.poids-mini{display:flex;gap:.4rem;flex-wrap:wrap;margin:.2rem 0 .2rem}
.poids-mini button{border:1px solid #ddd3bd;background:#fff;border-radius:999px;padding:.28rem .8rem;font-size:.78rem;letter-spacing:.05em;color:var(--gris);transition:var(--transition)}
.poids-mini button:hover{border-color:var(--vert);color:var(--vert)}
.poids-mini button.actif{background:var(--vert-fonce);border-color:var(--vert-fonce);color:#fff}
.poids-mini button.epuise,.poids-choix button.epuise{opacity:.45;cursor:not-allowed;text-decoration:line-through}
.epuise-tag{background:#8d8d8d !important}
.poids-choix{display:flex;gap:.7rem;flex-wrap:wrap}
.poids-choix button{border:1px solid #ddd3bd;background:#fff;border-radius:12px;padding:.7rem 1.3rem;display:flex;flex-direction:column;align-items:center;gap:.15rem;transition:var(--transition);min-width:104px}
.poids-choix button b{font-family:'Marcellus',serif;font-weight:400;font-size:1.05rem;color:var(--encre)}
.poids-choix button span{font-size:.85rem;color:var(--gris)}
.poids-choix button:hover{border-color:var(--vert);transform:translateY(-2px)}
.poids-choix button.actif{border-color:var(--vert-fonce);background:var(--vert-clair);box-shadow:0 4px 14px rgba(28,63,36,.12)}
.poids-choix button.actif b{color:var(--vert-fonce)}
.opt-choix button{padding:.55rem 1.15rem;min-width:0}
.opt-choix button b{font-size:.98rem}

/* ---------- hero ---------- */
.hero{background:linear-gradient(120deg,var(--creme) 45%,#fdfaf3);overflow:hidden}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;align-items:center;min-height:540px;gap:2rem}
.hero-txt{padding:4rem 0}
.surtitre{display:inline-flex;align-items:center;gap:.6rem;color:var(--vert);font-size:.8rem;letter-spacing:.28em;text-transform:uppercase;margin-bottom:1.2rem}
.surtitre::before{content:"";width:34px;height:1px;background:var(--or)}
.hero h1{font-size:clamp(2.3rem,4.6vw,3.7rem);color:var(--vert-fonce);margin-bottom:1.2rem}
.hero p{color:var(--gris);max-width:46ch;margin-bottom:2rem;font-size:1.06rem}
.hero-img{position:relative;height:100%;min-height:420px}
.hero-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:right center}
@media(max-width:840px){
  .hero-grid{grid-template-columns:1fr;min-height:0}
  .hero-txt{padding:3rem 0 1rem}
  .hero-img{min-height:300px;margin:0 -5% ;order:2}
}

/* ---------- boutons ---------- */
.btn{display:inline-flex;align-items:center;gap:.7rem;background:rgba(28,63,36,.92);color:#fff;padding:.95rem 2.2rem;border:1px solid rgba(255,255,255,.18);border-radius:999px;font-size:.84rem;letter-spacing:.18em;text-transform:uppercase;transition:var(--transition);box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 6px 18px rgba(28,63,36,.22)}
.btn:hover{background:var(--vert);border-color:var(--vert);transform:translateY(-2px)}
.btn.ghost{background:transparent;color:var(--vert-fonce)}
.btn.ghost:hover{background:var(--vert-fonce);color:#fff}
.btn.or{background:var(--or);border-color:var(--or)}
.btn.or:hover{filter:brightness(1.08)}
.btn:disabled{opacity:.55;cursor:not-allowed;transform:none}

/* ---------- sections ---------- */
section{padding:5rem 0}
.sect-head{text-align:center;max-width:620px;margin:0 auto 3.2rem}
.sect-head h2{font-size:clamp(1.8rem,3.2vw,2.5rem);color:var(--vert-fonce);margin-top:.6rem}
.sect-head p{color:var(--gris);margin-top:.8rem}

/* ---------- catégories ---------- */
.cats{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:1.4rem}
.cat-card{position:relative;border-radius:var(--rayon);overflow:hidden;background:var(--creme);aspect-ratio:4/4.6;display:flex;flex-direction:column;justify-content:flex-end;transition:var(--transition);box-shadow:0 2px 14px rgba(28,63,36,.06)}
.cat-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.cat-card:hover img{transform:scale(1.06)}
.cat-card:hover{box-shadow:var(--ombre);transform:translateY(-4px)}
.cat-card .voile{position:absolute;inset:0;background:linear-gradient(to top,rgba(28,63,36,.35),transparent 55%)}
.cat-card .lbl{position:relative;color:#fff;margin:.7rem;padding:.85rem 1.2rem;display:flex;justify-content:space-between;align-items:center;border-radius:14px;background:rgba(255,255,255,.22);backdrop-filter:blur(14px) saturate(1.4);-webkit-backdrop-filter:blur(14px) saturate(1.4);border:1px solid rgba(255,255,255,.45);box-shadow:inset 0 1px 0 rgba(255,255,255,.5)}
.cat-card .lbl h3{font-size:1.25rem}
.cat-card .lbl span{font-size:1.2rem;transition:transform var(--transition)}
.cat-card:hover .lbl span{transform:translateX(5px)}

/* ---------- produits ---------- */
.grille{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:1.6rem}
.prod{background:rgba(255,255,255,.62);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.7);border-radius:var(--rayon);overflow:hidden;transition:var(--transition);display:flex;flex-direction:column;box-shadow:inset 0 1px 0 rgba(255,255,255,.85),0 8px 24px rgba(28,63,36,.07)}
.prod:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.85),var(--ombre);transform:translateY(-4px);border-color:rgba(255,255,255,.9)}
.prod-img{position:relative;background:#fff;aspect-ratio:1;overflow:hidden;display:block}
@supports not (aspect-ratio: 1){ .prod-img{height:0;padding-bottom:100%} }
.prod-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:center;padding:7%;transition:transform .6s ease;background:#fff}
.prod:hover .prod-img img{transform:scale(1.04)}
.prod-tag{position:absolute;top:12px;left:12px;background:var(--or);color:#fff;font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;padding:.28rem .7rem;border-radius:999px}
.prod-corps{padding:1.2rem 1.3rem 1.4rem;display:flex;flex-direction:column;gap:.45rem;flex:1}
.prod-cat{font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--or)}
.prod h3{font-size:1.18rem;color:var(--vert-fonce)}
.prod h3 a:hover{color:var(--vert)}
.prod-prix{font-size:1.05rem;color:var(--encre);margin-top:auto}
.prod-prix small{color:var(--gris);font-size:.8rem}
.prod .btn{margin-top: .9rem;justify-content:center;padding:.75rem 1rem;font-size:.78rem}

/* ---------- bandeau valeurs ---------- */
.valeurs{background:var(--creme);border-block:1px solid #eee7d8}
.val-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:2rem;text-align:center}
.val h4{color:var(--vert-fonce);margin:.7rem 0 .3rem;font-size:1.1rem}
.val p{color:var(--gris);font-size:.92rem}
.val .ico{width:52px;height:52px;margin:0 auto;border-radius:50%;background:var(--vert-clair);display:grid;place-items:center;color:var(--vert)}
.val .ico svg{width:24px;height:24px}

/* ---------- à propos ---------- */
.apropos{display:grid;grid-template-columns:1fr 1fr;gap:3.5rem;align-items:center}
.apropos-img{border-radius:var(--rayon);overflow:hidden;box-shadow:var(--ombre);background:var(--creme)}
.apropos-img img{display:block;width:100%;height:auto}
.apropos h2{font-size:clamp(1.7rem,3vw,2.3rem);color:var(--vert-fonce);margin:.6rem 0 1rem}
.apropos p{color:var(--gris);margin-bottom:1rem}
@media(max-width:840px){.apropos{grid-template-columns:1fr}}

/* ---------- newsletter ---------- */
.news{background:var(--vert-fonce);color:#fff;text-align:center}
.news h2{font-size:clamp(1.6rem,3vw,2.2rem)}
.news p{color:#cfe0d0;margin:.8rem auto 2rem;max-width:52ch}
.news form{display:flex;gap:.7rem;justify-content:center;flex-wrap:wrap}
.news input{padding:.95rem 1.4rem;border-radius:999px;border:1px solid rgba(255,255,255,.3);background:rgba(255,255,255,.08);color:#fff;min-width:min(340px,80vw);font-family:inherit;font-size:.95rem}
.news input::placeholder{color:#a9c3ab}

/* ---------- footer ---------- */
footer{background:#15291a;color:#b9cbba;font-size:.95rem}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:2.5rem;padding:4rem 0 3rem}
.foot-grid img{height:64px;margin-bottom:1rem;filter:brightness(0) invert(.95)}
.foot-grid h4{color:#fff;font-size:1.02rem;margin-bottom:1.1rem;letter-spacing:.08em}
.foot-grid a{display:block;padding:.28rem 0;transition:color var(--transition)}
.foot-grid a:hover{color:var(--or)}
.foot-bas{border-top:1px solid rgba(255,255,255,.09);padding:1.3rem 0;display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;font-size:.85rem;color:#8fa690}
@media(max-width:840px){.foot-grid{grid-template-columns:1fr 1fr}}

/* ---------- boutique : filtres ---------- */
.filtres{display:flex;gap:.6rem;flex-wrap:wrap;justify-content:center;margin-bottom:2.8rem}
.filtres button{background:transparent;border:1px solid #d9d2c0;border-radius:999px;padding:.55rem 1.4rem;font-size:.82rem;letter-spacing:.12em;text-transform:uppercase;color:var(--gris);transition:var(--transition)}
.filtres button:hover{border-color:var(--vert);color:var(--vert)}
.filtres button.actif{background:var(--vert-fonce);border-color:var(--vert-fonce);color:#fff}

/* ---------- page titre ---------- */
.page-titre{background:var(--creme);text-align:center;padding:3.6rem 0;border-bottom:1px solid #eee7d8}
.page-titre h1{font-size:clamp(2rem,4vw,2.8rem);color:var(--vert-fonce)}
.fil{font-size:.82rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gris);margin-top:.7rem}
.fil a:hover{color:var(--or)}

/* ---------- recherche ---------- */
.btn-recherche{background:none;border:none;padding:6px;line-height:0;color:var(--vert-fonce);cursor:pointer;transition:var(--transition)}
.btn-recherche svg{width:21px;height:21px}
.btn-recherche:hover{color:var(--or);transform:scale(1.08)}
#recherche{position:fixed;inset:0;z-index:200;background:rgba(20,32,22,.42);backdrop-filter:blur(4px);
  display:flex;justify-content:center;align-items:flex-start;padding:8vh 4% 4%;
  opacity:0;visibility:hidden;transition:opacity .25s ease,visibility .25s}
#recherche.ouvert{opacity:1;visibility:visible}
.rech-boite{width:min(620px,100%);background:#fff;border-radius:20px;overflow:hidden;
  box-shadow:0 24px 60px rgba(20,40,25,.3);transform:translateY(-12px);transition:transform .28s ease}
#recherche.ouvert .rech-boite{transform:none}
.rech-haut{display:flex;align-items:center;gap:.7rem;padding:.9rem 1.1rem;border-bottom:1px solid #eee7d8}
.rech-haut svg{width:20px;height:20px;color:var(--gris);flex:0 0 auto}
.rech-haut input{flex:1;border:none;outline:none;font-family:inherit;font-size:1.05rem;color:var(--encre);background:none;padding:.2rem 0}
.rech-haut input::-webkit-search-cancel-button{display:none}
.rech-haut button{background:none;border:none;font-size:1.1rem;color:var(--gris);cursor:pointer;padding:.2rem .4rem;line-height:1}
.rech-haut button:hover{color:var(--encre)}
#rech-resultats{max-height:min(60vh,520px);overflow-y:auto;-webkit-overflow-scrolling:touch}
.rech-aide,.rech-nb{padding:1.1rem 1.2rem;color:var(--gris);font-size:.92rem;margin:0}
.rech-nb{padding-bottom:.4rem;font-size:.82rem;letter-spacing:.04em;text-transform:uppercase}
.rech-ligne{display:flex;align-items:center;gap:.9rem;padding:.6rem 1.2rem;text-decoration:none;color:inherit;transition:background .15s}
.rech-ligne:hover{background:var(--creme)}
.rech-ligne img{width:52px;height:52px;object-fit:contain;background:#fff;border:1px solid #eee7d8;border-radius:10px;padding:4px;flex:0 0 auto}
.rech-txt{flex:1;min-width:0;display:flex;flex-direction:column}
.rech-txt b{font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rech-txt small{color:var(--gris);font-size:.8rem}
.rech-prix{color:var(--vert-fonce);font-size:.92rem;white-space:nowrap}
@media(max-width:840px){
  #recherche{padding:0;align-items:stretch}
  .rech-boite{width:100%;border-radius:0;display:flex;flex-direction:column}
  .rech-haut{padding-top:calc(.9rem + env(safe-area-inset-top))}
  #rech-resultats{max-height:none;flex:1}
}

/* ---------- fiche produit ---------- */
.fiche{display:grid;grid-template-columns:1fr 1fr;gap:3.5rem;align-items:start}
.fiche-media{position:sticky;top:110px}
.fiche-img{position:relative;border-radius:var(--rayon);overflow:hidden;background:#fff;border:1px solid #eee7d8;aspect-ratio:1}
.fiche-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;padding:6%}
.fiche-img img.permute{animation:apparait .35s ease}
@keyframes apparait{from{opacity:0;transform:scale(.97)}to{opacity:1;transform:none}}
/* vignettes : même cadrage que la photo principale (contain, fond blanc, carré) */
.fiche-vignettes{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:.8rem}
.fiche-vignettes button{position:relative;width:80px;aspect-ratio:1;padding:0;overflow:hidden;background:#fff;border:1px solid #eee7d8;border-radius:14px;cursor:pointer;transition:var(--transition)}
.fiche-vignettes button img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;padding:8%}
.fiche-vignettes button:hover{border-color:var(--vert);transform:translateY(-2px)}
.fiche-vignettes button.actif{border-color:var(--vert-fonce);box-shadow:0 3px 12px rgba(28,63,36,.16)}
.fiche h1{font-size:clamp(1.8rem,3.4vw,2.6rem);color:var(--vert-fonce);margin:.4rem 0 1rem}
.fiche .prix{font-size:1.6rem;color:var(--encre);margin-bottom:1.4rem}
.fiche .prix small{font-size:.95rem;color:var(--gris)}
.fiche .desc{color:var(--gris);margin-bottom:2rem;max-width:60ch}
.fiche .desc p{margin:0 0 .85rem;line-height:1.75}
.fiche .desc p:last-child{margin-bottom:0}
.qte{display:inline-flex;align-items:center;border:1px solid #d9d2c0;border-radius:999px;overflow:hidden;margin-right:1rem;vertical-align:middle}
.qte button{background:none;border:none;width:44px;height:48px;font-size:1.2rem;color:var(--vert-fonce)}
.qte input{width:52px;text-align:center;border:none;font-size:1.05rem;font-family:inherit;background:transparent}
.fiche-meta{margin-top:2rem;border-top:1px solid #eee7d8;padding-top:1.4rem;font-size:.92rem;color:var(--gris)}
.fiche-meta b{color:var(--encre)}
@media(max-width:840px){
  .fiche{grid-template-columns:1fr}
  .fiche-media{position:relative;top:auto;width:min(100%,58vh);margin-inline:auto}
  .fiche-vignettes{justify-content:center}
  .fiche-vignettes button{width:66px}
}
@supports not (aspect-ratio: 1){
  .fiche-img{height:0;padding-bottom:100%}
}

/* ---------- panier ---------- */
.panier-grid{display:grid;grid-template-columns:1.5fr 1fr;gap:3rem;align-items:start}
@media(max-width:900px){.panier-grid{grid-template-columns:1fr}}
.ligne{display:grid;grid-template-columns:90px 1fr auto;gap:1.2rem;align-items:center;padding:1.2rem 0;border-bottom:1px solid #eee7d8}
.ligne img{width:90px;height:90px;object-fit:contain;padding:4px;border-radius:10px;background:#fff;border:1px solid #f0ead9}
.ligne h3{font-size:1.08rem;color:var(--vert-fonce)}
.ligne .prix-u{color:var(--gris);font-size:.9rem}
.ligne .droite{text-align:right;display:flex;flex-direction:column;gap:.5rem;align-items:flex-end}
.suppr{background:none;border:none;color:#b0503f;font-size:.82rem;letter-spacing:.06em;text-decoration:underline}
.resume{background:rgba(246,241,231,.75);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.7);border-radius:var(--rayon);padding:2rem;box-shadow:inset 0 1px 0 rgba(255,255,255,.8)}
.resume h3{color:var(--vert-fonce);font-size:1.3rem;margin-bottom:1.2rem}
.resume .lig{display:flex;justify-content:space-between;padding:.5rem 0;color:var(--gris)}
.resume .tot{border-top:1px solid #ddd3bd;margin-top:.7rem;padding-top:1rem;font-size:1.15rem;color:var(--encre);font-weight:500}
.vide{text-align:center;padding:4rem 0;color:var(--gris)}

/* ---------- formulaire ---------- */
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem}
.form-grid .plein{grid-column:1/-1}
label{font-size:.82rem;letter-spacing:.12em;text-transform:uppercase;color:var(--gris);display:block;margin-bottom:.4rem}
input[type=text],input[type=tel],input[type=email],textarea,select{width:100%;padding:.85rem 1.1rem;border:1px solid #d9d2c0;border-radius:10px;font-family:inherit;font-size:.98rem;background:#fff;transition:border-color var(--transition)}
input:focus,textarea:focus{outline:none;border-color:var(--vert)}
textarea{resize:vertical;min-height:90px}
.note-cod{background:var(--vert-clair);border:1px solid #cfe0d0;border-radius:10px;padding:1rem 1.2rem;font-size:.92rem;color:var(--vert-fonce);margin:1.2rem 0}
.msg-ok{background:var(--vert-clair);border:1px solid var(--vert);color:var(--vert-fonce);padding:1.4rem;border-radius:10px;text-align:center;margin-top:1rem}

/* ---------- divers ---------- */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s ease}
.reveal.vu{opacity:1;transform:none}
.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(120%);background:rgba(28,63,36,.85);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.3);color:#fff;padding:.9rem 1.8rem;border-radius:999px;font-size:.9rem;letter-spacing:.06em;transition:transform .4s ease;z-index:99;box-shadow:inset 0 1px 0 rgba(255,255,255,.35),var(--ombre)}
.toast.visible{transform:translateX(-50%)}

/* ============ Version arabe (RTL) ============ */
.btn-langue{background:transparent;border:1px solid #d9d2c0;border-radius:999px;width:38px;height:38px;font-size:.95rem;font-weight:500;color:var(--vert-fonce);transition:var(--transition);font-family:'Tajawal','Jost',sans-serif}
.btn-langue:hover{background:var(--vert-fonce);color:#fff;border-color:var(--vert-fonce)}

html[dir="rtl"] body,
html[dir="rtl"] input, html[dir="rtl"] select, html[dir="rtl"] textarea, html[dir="rtl"] button{font-family:'Tajawal','Jost',sans-serif}
html[dir="rtl"] h1, html[dir="rtl"] h2, html[dir="rtl"] h3, html[dir="rtl"] h4,
html[dir="rtl"] .serif, html[dir="rtl"] .slide-titre{font-family:'Tajawal',serif;font-weight:700}
html[dir="rtl"] body{letter-spacing:0}
html[dir="rtl"] .nav nav a, html[dir="rtl"] .topbar, html[dir="rtl"] .surtitre,
html[dir="rtl"] .btn, html[dir="rtl"] .prod-cat, html[dir="rtl"] .prod-tag,
html[dir="rtl"] .filtres button, html[dir="rtl"] label, html[dir="rtl"] .fil,
html[dir="rtl"] .ruban span{letter-spacing:0}

/* Slider en arabe — NE PAS inverser la mise en page.
   Les 4 visuels sont composés avec les produits à droite et une zone laissée
   libre à gauche pour la carte de texte. Si on bascule la carte à droite
   (réflexe RTL), elle recouvre les produits et la gauche reste vide.
   On garde donc le même cadrage qu'en français : seul le texte devient RTL. */
/* .slide est un conteneur flex : en RTL la carte se colle au bord droit,
   les marges n'y peuvent rien. On remet donc la DISPOSITION en ltr (la carte
   repart à gauche, sur la zone libre du visuel) et on redonne le sens rtl
   au seul contenu texte de la carte. */
html[dir="rtl"] .slide{background-position:center right;direction:ltr}
html[dir="rtl"] .slide-contenu{direction:rtl;text-align:right;
  margin-left:calc((100% - min(1200px,92%))/2);margin-right:0}
@media(max-width:840px){
  html[dir="rtl"] .slide-contenu{margin:0 4% 1.5rem}
}

/* flèches et détails directionnels */
html[dir="rtl"] .cat-card .lbl span{transform:scaleX(-1)}
html[dir="rtl"] .cat-card:hover .lbl span{transform:scaleX(-1) translateX(5px)}
html[dir="rtl"] .badge{right:auto;left:-12px}
html[dir="rtl"] .prod-tag{left:auto;right:12px}
/* Ruban défilant en arabe.
   En RTL, la piste (2× la largeur du texte) déborde vers la GAUCHE : la fenêtre
   visible montre son extrémité droite. L'animation translateX(-50%) la poussait
   alors hors champ — d'autant plus vite que l'écran est étroit, d'où un ruban
   vide sur mobile. On remet donc la GÉOMÉTRIE de la piste en ltr (identique au
   français) et on redonne le sens rtl au texte de chaque bloc. */
html[dir="rtl"] .ruban-piste{direction:ltr;animation-direction:normal}
html[dir="rtl"] .ruban-piste > span{direction:rtl}
/* flèches du slider : en arabe « suivant » va vers la gauche */
html[dir="rtl"] .slider-nav .fleche{transform:scaleX(-1)}

/* tailles arabes légèrement ajustées */
html[dir="rtl"] .slide-titre{font-size:clamp(2rem,4.4vw,3.2rem)}
html[dir="rtl"] .hero h1{font-size:clamp(2rem,4.2vw,3.2rem)}

/* ---------- mode de réception + banque ---------- */
.choix-mode{display:flex;gap:.7rem;flex-wrap:wrap}
.mode-opt{display:flex;align-items:center;gap:.5rem;border:1px solid #d9d2c0;border-radius:12px;padding:.7rem 1.2rem;cursor:pointer;font-size:.95rem;letter-spacing:0;text-transform:none;color:var(--encre);transition:var(--transition);flex:1;min-width:180px}
.mode-opt:hover{border-color:var(--vert)}
.mode-opt.actif{border-color:var(--vert-fonce);background:var(--vert-clair);box-shadow:0 4px 14px rgba(28,63,36,.10)}
.mode-opt input{accent-color:var(--vert-fonce)}
.mode-opt small{color:var(--vert);font-weight:500}
.carte-banque{background:var(--creme);border:1px solid #e2d9c2;border-radius:12px;padding:1.1rem 1.4rem;margin-top:1rem;text-align:start;display:inline-block}
.carte-banque h4{color:var(--vert-fonce);font-size:1rem;margin-bottom:.6rem}
.carte-banque table{border-collapse:collapse}
.carte-banque td{padding:.2rem .8rem .2rem 0;font-size:.95rem;color:var(--gris)}
.carte-banque td b{color:var(--encre)}

/* ---------- verre liquide : compléments ---------- */
@media(max-width:840px){
  header.site{top:8px;width:94%}
  .nav nav{border-radius:0 0 16px 16px;overflow:hidden;background:rgba(255,255,255,.92);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
  .slider{margin-top:-92px;padding-top:92px}
  .slide-contenu{padding:1.6rem 1.5rem}
}
.filtres button{background:rgba(255,255,255,.55);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.news input{backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
@supports not (backdrop-filter: blur(1px)){
  header.site{background:rgba(255,255,255,.92)}
  .slide-contenu{background:rgba(246,241,231,.9)}
  .cat-card .lbl{background:rgba(28,63,36,.55)}
  .prod{background:#fff}
}

/* ============ Dynamique premium ============ */

/* barre de progression de lecture */
#progression{position:fixed;top:0;left:0;height:3px;width:0;background:linear-gradient(90deg,var(--or),#e2c06a);z-index:200;transition:width .1s linear;border-radius:0 3px 3px 0}

/* header intelligent */
header.site{transition:transform .45s cubic-bezier(.22,.61,.36,1),box-shadow .3s,background .3s}
header.site.cache{transform:translateY(-130%)}
header.site.reduit .nav .logo img{height:44px}
header.site.reduit{box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 16px 40px rgba(28,63,36,.18)}
.nav .logo img{transition:height .3s ease}

/* Ken Burns sur la diapo active */
@keyframes kenburns{from{transform:scale(1)}to{transform:scale(1.07)}}
.slide.actif{animation:kenburns 9s ease-out both}

/* titre du slider mot par mot */
.slide-titre .mot{display:inline-block;opacity:0;transform:translateY(.6em) rotate(2deg);animation:mot-monte .7s cubic-bezier(.22,.61,.36,1) forwards}
@keyframes mot-monte{to{opacity:1;transform:none}}

/* reflet balayant les boutons */
.btn{position:relative;overflow:hidden}
.btn::after{content:"";position:absolute;top:0;left:-80%;width:50%;height:100%;background:linear-gradient(105deg,transparent,rgba(255,255,255,.35),transparent);transform:skewX(-20deg);transition:left .6s ease}
.btn:hover::after{left:130%}

/* trait doré animé sous les titres de section */
.sect-head h2{position:relative;padding-bottom:.9rem}
.sect-head h2::after{content:"";position:absolute;left:50%;bottom:0;transform:translateX(-50%);width:0;height:2px;background:var(--or);transition:width .8s cubic-bezier(.22,.61,.36,1) .2s}
.sect-head.vu h2::after{width:64px}

/* apparition en cascade */
.reveal{transition-duration:.6s}

/* badge panier : pulsation à l'ajout */
@keyframes badge-pop{0%{transform:scale(1)}40%{transform:scale(1.6)}100%{transform:scale(1)}}
.badge.pop{animation:badge-pop .5s cubic-bezier(.22,.61,.36,1)}

/* image volante vers le panier */
.vol-panier{position:fixed;z-index:300;border-radius:12px;object-fit:cover;pointer-events:none;box-shadow:0 12px 30px rgba(28,63,36,.35);transition:all .8s cubic-bezier(.5,-0.1,.3,1)}

/* retour en haut */
#haut{position:fixed;bottom:22px;inset-inline-end:22px;width:46px;height:46px;border-radius:50%;background:rgba(28,63,36,.88);backdrop-filter:blur(10px);color:#fff;border:1px solid rgba(255,255,255,.3);font-size:1.1rem;z-index:90;opacity:0;transform:translateY(16px);pointer-events:none;transition:.35s;box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 8px 22px rgba(28,63,36,.25)}
#haut.visible{opacity:1;transform:none;pointer-events:auto}
#haut:hover{background:var(--or)}

/* survol des cartes : légère rotation 3D */
.prod{transform-style:preserve-3d;will-change:transform}
.prod:hover .prod-img img{transform:scale(1.04)}

/* mouvement réduit : on coupe tout */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
  .ruban-piste{animation:none}
}

/* ============ Raffinement mobile ============ */
@media(max-width:840px){
  body{font-size:16px}
  .topbar{font-size:.66rem;letter-spacing:.1em;padding:.45rem .8rem}
  /* header compact : icônes seulement */
  header.site{top:8px;margin-top:8px}
  header.site .nav{padding:.5rem .9rem;gap:.8rem}
  .nav .logo img{height:42px}
  header.site.reduit .nav .logo img{height:36px}
  .btn-panier span[data-i18n="panier"]{display:none}
  .btn-panier svg{width:24px;height:24px}
  .btn-langue{width:34px;height:34px;font-size:.85rem}
  .nav-actions{gap:.8rem}
  /* sections plus denses */
  section{padding:3.2rem 0}
  .sect-head{margin-bottom:2rem}
  /* slider */
  .slider{height:auto;min-height:0;aspect-ratio:9/14;max-height:90vh;margin-top:-74px;padding-top:0}
  .slider-nav .fleche{width:38px;height:38px}
  .slide-contenu{padding:1.4rem 1.3rem;border-radius:18px}
  .slide-contenu p{font-size:.95rem;margin-bottom:1.2rem}
  .slide-contenu .btn{padding:.8rem 1.6rem;font-size:.78rem}
  .ruban span{font-size:.85rem;letter-spacing:.14em;gap:1.6rem;padding-right:1.6rem}
}

@media(max-width:640px){
  /* grilles : 2 colonnes de cartes compactes */
  .grille{grid-template-columns:repeat(2,minmax(0,1fr));gap:.8rem}
  .prod-corps{padding:.8rem .85rem 1rem;gap:.3rem}
  .prod h3{font-size:.98rem}
  .prod-cat{font-size:.62rem}
  .prod-prix{font-size:.92rem}
  .prod-prix small{font-size:.72rem}
  .prod .btn{padding:.62rem .5rem;font-size:.68rem;letter-spacing:.1em;gap:.3rem}
  .prod-tag{font-size:.58rem;padding:.2rem .55rem;top:8px}
  .poids-mini{gap:.3rem}
  .poids-mini button{padding:.34rem .6rem;font-size:.72rem}
  /* catégories : 2 colonnes moins hautes */
  .cats{grid-template-columns:repeat(2,minmax(0,1fr));gap:.8rem}
  .cat-card{aspect-ratio:4/3.4}
  .cat-card .lbl{margin:.5rem;padding:.6rem .9rem}
  .cat-card .lbl h3{font-size:1.02rem}
  /* filtres boutique : rangée défilante */
  .filtres{flex-wrap:nowrap;overflow-x:auto;justify-content:flex-start;padding:.2rem .2rem .6rem;margin-inline:-4%;padding-inline:4%;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .filtres::-webkit-scrollbar{display:none}
  .filtres button{flex:0 0 auto;padding:.5rem 1.1rem}
  /* fiche produit */
  .fiche h1{font-size:1.7rem}
  .fiche .prix{font-size:1.35rem}
  .poids-choix{gap:.5rem}
  .poids-choix button{min-width:calc(33.5% - .5rem);padding:.6rem .4rem}
  .qte{margin-inline-end:0;width:100%;justify-content:space-between;margin-bottom:.8rem}
  .qte button{width:52px}
  #btn-ajout{width:100%;justify-content:center}
  /* panier */
  .ligne{grid-template-columns:70px 1fr;gap:.8rem}
  .ligne img{width:70px;height:70px}
  .ligne .droite{grid-column:1/-1;flex-direction:row;justify-content:space-between;align-items:center;text-align:start;border-top:1px dashed #eee7d8;padding-top:.6rem}
  .resume{padding:1.4rem 1.1rem}
  .form-grid{grid-template-columns:1fr}
  .choix-mode{flex-direction:column}
  .mode-opt{min-width:0}
  /* newsletter */
  .news form{flex-direction:column;align-items:stretch}
  .news input{min-width:0;width:100%}
  .news .btn{justify-content:center}
  /* pied de page : 1 colonne aérée */
  .foot-grid{grid-template-columns:1fr 1fr;gap:1.6rem;padding:2.8rem 0 2rem}
  .foot-grid > div:first-child{grid-column:1/-1}
  .foot-grid img{height:52px}
  .foot-bas{flex-direction:column;align-items:center;gap:.3rem;text-align:center}
  /* divers */
  #haut{width:42px;height:42px;bottom:16px;inset-inline-end:14px}
  .page-titre{padding:2.4rem 0}
  .apropos{gap:1.8rem}
  .msg-ok{padding:1rem}
  .carte-banque{display:block}
}

/* éviter le zoom iOS au focus des champs */
@media(max-width:840px){
  input[type=text],input[type=tel],input[type=email],input[type=password],select,textarea{font-size:16px}
}

/* ---------- bulle WhatsApp ---------- */
#whatsapp{position:fixed;bottom:22px;inset-inline-start:22px;z-index:90;display:flex;align-items:center;gap:.55rem;background:#25d366;color:#fff;border-radius:999px;padding:.7rem 1.1rem;font-size:.9rem;font-weight:500;box-shadow:0 10px 26px rgba(37,211,102,.4);transition:var(--transition)}
#whatsapp:hover{transform:translateY(-3px) scale(1.03);box-shadow:0 14px 32px rgba(37,211,102,.5)}
#whatsapp svg{flex:0 0 auto}
@keyframes wa-pulse{0%,100%{box-shadow:0 10px 26px rgba(37,211,102,.4)}50%{box-shadow:0 10px 26px rgba(37,211,102,.4),0 0 0 12px rgba(37,211,102,.12)}}
#whatsapp{animation:wa-pulse 2.6s ease-in-out infinite}
@media(max-width:640px){
  #whatsapp{bottom:16px;inset-inline-start:14px;padding:.65rem}
  #whatsapp span{display:none}
}

/* ---------- suivi de commande ---------- */
.carte-suivi{background:rgba(255,255,255,.75);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.8);border-radius:var(--rayon);padding:1.8rem;box-shadow:0 8px 26px rgba(28,63,36,.08)}
.cs-tete{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:.4rem;margin-bottom:1.6rem}
.cs-tete b{font-family:'Marcellus';font-size:1.3rem;color:var(--vert-fonce)}
.cs-tete span{color:var(--gris);font-size:.9rem}
.chrono{display:flex;align-items:flex-start;justify-content:space-between}
.etape{display:flex;flex-direction:column;align-items:center;gap:.35rem;flex:0 0 auto;width:82px;text-align:center}
.etape .rond{width:34px;height:34px;border-radius:50%;border:2px solid #d9d2c0;background:#fff;display:grid;place-items:center;color:#fff;font-size:.85rem;transition:.4s}
.etape.faite .rond{background:var(--vert);border-color:var(--vert)}
.etape.actuelle .rond{box-shadow:0 0 0 6px rgba(35,122,60,.15)}
.etape .etq{font-size:.78rem;color:var(--gris);line-height:1.2}
.etape.faite .etq{color:var(--vert-fonce);font-weight:500}
.etape .edate{font-size:.68rem;color:var(--or)}
.lien-etape{flex:1;height:2px;background:#e4dcc8;margin-top:16px;border-radius:2px}
.lien-etape.fait{background:var(--vert)}
.suivi-annule{text-align:center;padding:.6rem 0}
.suivi-annule p{color:var(--gris);margin-top:.6rem;font-size:.92rem}
.carte-suivi .statut{border-radius:999px;padding:.3rem .9rem;font-size:.8rem}
.carte-suivi .s-nouvelle{background:#fdf0d3;color:#8a6410}.carte-suivi .s-livree{background:#dcf2df;color:#1e6b32}
.carte-suivi .s-annulee{background:#fadfda;color:#a8402f}.carte-suivi .s-retournee{background:#ffe3c9;color:#9a5b16}
/* jauge « livraison offerte » dans le panier */
.barre-liv{margin:.8rem 0 1rem;padding:.75rem .9rem;border-radius:14px;
  background:linear-gradient(180deg,#fbf8f1,#f4efe2);border:1px solid #e8dfc8}
.barre-liv p{margin:0 0 .55rem;font-size:.88rem;color:var(--encre);text-align:center;line-height:1.4}
.barre-liv p b{color:var(--vert-fonce);font-weight:600}
.bl-piste{height:9px;border-radius:99px;background:#e4dcc7;overflow:hidden;
  box-shadow:inset 0 1px 2px rgba(0,0,0,.07)}
.bl-piste span{display:block;height:100%;border-radius:99px;
  background:linear-gradient(90deg,var(--or),#d8b96a);
  transition:width .5s cubic-bezier(.22,.61,.36,1)}
.barre-liv.atteint{background:linear-gradient(180deg,#eef6ec,#e3f0e0);border-color:#c3ddbd}
.barre-liv.atteint p{color:#1e6b32;font-weight:500}
.barre-liv.atteint .bl-piste span{background:linear-gradient(90deg,#3f8b4f,#5aa869)}
html[dir="rtl"] .bl-piste span{margin-inline-start:auto}

.cs-suivi{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:.3rem .7rem;
  margin-top:1.1rem;padding:.75rem 1.1rem;border:1px dashed var(--vert);border-radius:14px;
  background:var(--vert-clair);text-align:center}
.cs-suivi-etq{font-size:.82rem;letter-spacing:.06em;text-transform:uppercase;color:var(--vert-fonce)}
.cs-suivi b{font-size:1.06rem;color:var(--encre);letter-spacing:.06em;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;user-select:all}
.cs-ligne{display:flex;justify-content:space-between;padding:.35rem 0;border-bottom:1px dashed #eee7d8;font-size:.95rem;color:var(--gris)}
.cs-ligne span:last-child{color:var(--encre)}
.cs-total{border-bottom:none;font-size:1.1rem;font-weight:500;border-top:2px solid var(--vert-fonce);margin-top:.4rem;padding-top:.7rem}
.cs-total span{color:var(--vert-fonce) !important}
@media(max-width:640px){
  .etape{width:64px}
  .etape .etq{font-size:.66rem}
}

/* ---------- coupon ---------- */
.zone-coupon{margin:1.1rem 0}
.coupon-rangee{display:flex;gap:.5rem}
.coupon-rangee input{flex:1}
.mini-coupon{padding:.6rem 1.2rem;font-size:.74rem;white-space:nowrap}
#coupon-msg{font-size:.85rem;margin-top:.4rem;min-height:1.1em}

/* ---------- images produits sur mobile ---------- */
@media(max-width:640px){
  #fiche{padding-block:.4rem}
  .prod-img img{padding:5%}
  .fiche-img img{padding:4%}
  .cat-card{aspect-ratio:1/1}
  .cat-card img{object-position:center}
}
@media(max-width:400px){
  .grille{gap:.6rem}
  .prod-corps{padding:.7rem .7rem .9rem}
  .prod h3{font-size:.92rem}
}

/* points de repère du slider sous l'image, sur mobile */
@media(max-width:640px){
  .slide-contenu{margin-bottom:2.6rem;padding:1.15rem 1.2rem}
  .slide-contenu .btn{padding:.72rem 1.4rem;font-size:.74rem}
}