:root{
  /* Les couleurs du magasin, assombries juste ce qu'il faut pour porter du
     texte. Les valeurs d'origine (corail #F2696B, framboise #E1567E, vert
     #2FB37A, or #F5B02E) etaient des teintes d'aplat : posees sous du blanc
     ou lues sur du creme, elles plafonnaient entre 1,9:1 et 3,6:1, la ou il
     en faut 4,5. Chacune a ete redescendue par le chemin le plus court dans
     l'espace Lab — meme teinte, saturation a peine reduite — donc c'est bien
     le meme corail, le meme framboise, en plus dense.
     Les halos et ombres, eux, restent en rgba() clairs dans les regles :
     c'est la que vit la douceur de la maquette, et le contraste ne s'y joue
     pas. */
  --bg:#FFFBF7; --surface:#FFFFFF; --ink:#2A2230; --muted:#716870; --line:#F0E7E1;
  --coral:#C63F48; --berry:#C53C66; --green:#16854E; --gold:#A26801; --blue:#4165E0; --grape:#7C50E8;
  --grad:linear-gradient(135deg,#C63F48,#B93B76); --grad-fruit:linear-gradient(90deg,#F2696B,#F5B02E 45%,#2FB37A 100%);
  /* Version lisible du degrade fruite : `--grad-fruit` reste clair parce
     qu'il ne sert plus que de filet decoratif de 5 px sous les categories,
     ou aucun texte ne se pose. Le titre du heros, lui, est du texte. */
  --grad-fruit-ink:linear-gradient(90deg,#B8343C,#8A5B00 45%,#146B48 100%);
  --r:22px; --r-lg:30px; --shadow:0 18px 50px rgba(150,90,90,.12); --shadow-sm:0 8px 24px rgba(150,90,90,.10);
  --font:'Rubik','Heebo',system-ui,sans-serif; --display:'Secular One','Poppins',var(--font);
}
*{margin:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);font-family:var(--font);font-size:16px;line-height:1.55;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.wrap{max-width:1200px;margin:0 auto;padding:0 clamp(16px,4vw,34px)}
.btn{display:inline-flex;align-items:center;gap:9px;border:0;cursor:pointer;font-family:var(--font);font-weight:700;font-size:15px;padding:14px 26px;border-radius:999px;transition:transform .18s ease,box-shadow .18s ease}
.btn{position:relative;overflow:hidden}
/* Le reflet qui traverse le bouton occupait ::after ; il passe en
   ::before pour laisser la place a la fleche (voir « Fleches » plus
   bas). Les deux sont en position absolue : l'ordre ne change rien. */
.btn::before{content:"";position:absolute;top:0;left:-120%;width:60%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);transform:skewX(-18deg);transition:left .55s ease}
.btn:hover::before{left:140%}
.btn:hover{transform:translateY(-3px) scale(1.02)}
.btn:active{transform:translateY(-1px) scale(.99)}
.btn-primary{background:var(--grad);color:#fff;box-shadow:0 14px 32px rgba(225,86,126,.38),inset 0 1px 0 rgba(255,255,255,.38)}
.btn-primary:hover{box-shadow:0 20px 40px rgba(225,86,126,.48),inset 0 1px 0 rgba(255,255,255,.38)}
.btn-ghost{background:rgba(255,255,255,.78);color:var(--ink);border:0;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:0 10px 26px rgba(150,90,90,.14)}
.btn-ghost:hover{background:#fff;box-shadow:0 16px 34px rgba(150,90,90,.22)}
.btn-green{background:linear-gradient(135deg,#17884C,#116B57);color:#fff;box-shadow:0 12px 30px rgba(47,179,122,.32)}
.kicker{font-weight:700;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--berry)}
.h2{font-family:var(--display);font-size:clamp(26px,4vw,42px);line-height:1.08}
.section{padding:clamp(48px,7vw,88px) 0}
.center{text-align:center}

/* HEADER */
header{position:sticky;top:0;z-index:50;background:rgba(255,251,247,.82);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;gap:20px;height:74px}
/* L'embleme est dense (deux lignes de texte en arc) : sous ~50 px les
   mentions du pourtour deviennent illisibles. */
.nav .logo{height:52px}
.nav-links{display:flex;gap:6px;margin-inline-start:auto}
.nav-links a{padding:10px 14px;border-radius:12px;font-weight:600;font-size:14.5px;color:#4A414C;transition:background .15s,color .15s}
.nav-links a:hover{background:#FFF0EC;color:var(--coral)}
.nav-tools{display:flex;align-items:center;gap:10px}
.lang{display:flex;background:#fff;border:1px solid var(--line);border-radius:999px;overflow:hidden}
.lang button{border:0;background:transparent;cursor:pointer;font-family:var(--font);font-weight:700;font-size:13px;padding:8px 12px;color:var(--muted)}
.lang button.on{background:var(--grad);color:#fff}
.icon-btn{position:relative;width:44px;height:44px;border-radius:14px;background:#fff;border:1px solid var(--line);display:grid;place-items:center;cursor:pointer;font-size:19px;box-shadow:var(--shadow-sm)}
.cart-badge{position:absolute;top:-6px;inset-inline-end:-6px;min-width:20px;height:20px;padding:0 5px;border-radius:10px;background:var(--coral);color:#fff;font:800 11px/20px var(--font);text-align:center}
.burger{display:none}

/* HERO */
.hero{position:relative;overflow:hidden}
.hero-bg{position:absolute;inset:0;background:radial-gradient(58% 58% at 16% 10%,rgba(242,105,107,.34),transparent 62%),radial-gradient(54% 54% at 90% 18%,rgba(78,107,230,.28),transparent 62%),radial-gradient(70% 62% at 82% 102%,rgba(47,179,122,.32),transparent 62%),linear-gradient(160deg,#FBDBD1,#F6C7D5 52%,#DBEBDE)}
.hero-inner{position:relative;display:grid;grid-template-columns:1.05fr .95fr;gap:24px;align-items:center;padding:clamp(40px,6vw,84px) 0 clamp(30px,4vw,60px)}
.hero h1{font-family:var(--display);font-size:clamp(34px,6vw,66px);line-height:1.02;letter-spacing:-.01em}
.hero h1 .g{background:var(--grad-fruit-ink);-webkit-background-clip:text;background-clip:text;color:transparent}
/* Ce paragraphe est le seul #6A5F68 pose sur le degrade pastel du heros
   et non sur du blanc : il y tombait a 4,07:1. Ailleurs la teinte reste
   celle d'origine, elle y depasse 5,9:1. */
.hero p{margin-top:18px;font-size:clamp(15px,1.7vw,19px);color:#635861;max-width:30em}
.hero-cta{margin-top:28px;display:flex;gap:12px;flex-wrap:wrap}
.trust{margin-top:24px;display:flex;gap:10px;flex-wrap:wrap}
.trust span,.trust a{position:relative;display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:700;padding:7px 14px;border-radius:999px;border:none;box-shadow:0 4px 14px rgba(120,80,90,.10);transition:transform .28s cubic-bezier(.2,.8,.2,1),box-shadow .28s;animation:badgeIn .5s both}
.trust a{cursor:pointer}
.trust span:hover,.trust a:hover{transform:translateY(-3px) scale(1.04)}
.trust>:nth-child(1){background:#EAEFFF;color:#3a51b0;animation-delay:.05s}
.trust>:nth-child(1):hover{box-shadow:0 8px 20px rgba(74,97,205,.30)}
.trust>:nth-child(2){background:#E4F6EE;color:#0D7E51;animation-delay:.13s}
.trust>:nth-child(2):hover{box-shadow:0 8px 20px rgba(31,138,92,.28)}
.trust>:nth-child(3){background:#FEF3DC;color:#9C6307;animation-delay:.21s}
.trust>:nth-child(3):hover{box-shadow:0 8px 20px rgba(214,150,20,.30)}
.trust>:nth-child(4){background:#FDE7E7;color:#BC3D4D;animation-delay:.29s}
.trust>:nth-child(4):hover{box-shadow:0 8px 20px rgba(201,75,87,.30)}
@keyframes badgeIn{0%{opacity:0;transform:translateY(8px)}100%{opacity:1;transform:translateY(0)}}
.hero-art{position:relative;height:clamp(300px,40vw,470px)}
.hero-art .blob{position:absolute;inset:6% 4%;background:var(--grad);border-radius:46% 54% 58% 42%/48% 44% 56% 52%;filter:blur(2px);opacity:.14}
.hero-art img{position:absolute;filter:drop-shadow(0 24px 30px rgba(60,30,40,.22));animation:float 6s ease-in-out infinite}
.hero-art img{cursor:pointer}
.hero-art img:hover{transform:translateY(-10px) scale(1.05)!important;filter:drop-shadow(0 30px 34px rgba(60,30,40,.30))}
.hero-art img:nth-child(2){height:66%;left:29%;top:5%;z-index:3}
.hero-art img:nth-child(3){height:40%;left:3%;top:15%;animation-delay:.6s}
.hero-art img:nth-child(4){height:50%;left:61%;top:40%;z-index:2;animation-delay:1.2s}
.hero-art img:nth-child(5){height:37%;left:12%;top:61%;animation-delay:.9s}
.hero-art img:nth-child(6){height:36%;left:74%;top:1%;animation-delay:1.5s}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}

/* CATEGORIES */
.cats{display:grid;grid-template-columns:repeat(5,1fr);gap:16px}
.cat{position:relative;border-radius:var(--r);padding:22px 16px 18px;background:#fff;border:1px solid var(--line);box-shadow:var(--shadow-sm);cursor:pointer;overflow:hidden;text-align:center;transition:transform .22s cubic-bezier(.2,.8,.2,1),box-shadow .22s,border-color .22s}
.cat:hover{transform:translateY(-8px) scale(1.02)}
.cat .em{width:66px;height:66px;margin:0 auto;border-radius:20px;display:grid;place-items:center;font-size:33px;transition:transform .3s cubic-bezier(.2,.8,.2,1)}
.cat:hover .em{transform:translateY(-2px) scale(1.12) rotate(-7deg)}
.cat h3{margin-top:13px;font-size:17px}
.cat span{font-size:13px;color:var(--muted)}
.cat .bar{position:absolute;inset-inline:0;bottom:0;height:5px;background:var(--grad-fruit);transform:scaleX(0);transform-origin:center;transition:transform .25s}
.cat:hover .bar{transform:scaleX(1)}
.cat:nth-child(1){border-color:#F6C9C2}.cat:nth-child(1) .em{background:linear-gradient(135deg,#FFE3DD,#FFC7BE)}.cat:nth-child(1):hover{box-shadow:0 24px 46px rgba(242,105,107,.26)}
.cat:nth-child(2){border-color:#C7D2F7}.cat:nth-child(2) .em{background:linear-gradient(135deg,#DFE6FF,#C3D0FF)}.cat:nth-child(2):hover{box-shadow:0 24px 46px rgba(78,107,230,.24)}
.cat:nth-child(3){border-color:#DDD0F7}.cat:nth-child(3) .em{background:linear-gradient(135deg,#ECE3FF,#D9C8FF)}.cat:nth-child(3):hover{box-shadow:0 24px 46px rgba(139,92,246,.24)}
.cat:nth-child(4){border-color:#BFE7D3}.cat:nth-child(4) .em{background:linear-gradient(135deg,#D7F3E5,#BEE9D2)}.cat:nth-child(4):hover{box-shadow:0 24px 46px rgba(47,179,122,.24)}
.cat:nth-child(5){border-color:#F7E1B8}.cat:nth-child(5) .em{background:linear-gradient(135deg,#FFF0D2,#FFE0A8)}.cat:nth-child(5):hover{box-shadow:0 24px 46px rgba(245,176,46,.28)}

/* PRODUCT ROW */
.prow{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.pcard{background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow-sm);transition:transform .2s,box-shadow .2s;cursor:pointer}
.pcard:hover{transform:translateY(-6px);box-shadow:var(--shadow)}
.pcard .ph{position:relative;height:210px;display:grid;place-items:center;background:radial-gradient(circle at 50% 35%,#FFF3EF,#fff);overflow:hidden}
.pcard .ph img{height:88%;object-fit:contain;transition:transform .25s}
.pcard:hover .ph img{transform:scale(1.06)}
.pcard .tag{position:absolute;top:12px;inset-inline-start:12px;background:var(--grad);color:#fff;font:800 10px/1 var(--font);letter-spacing:.06em;text-transform:uppercase;padding:6px 10px;border-radius:8px}
.pcard .body{padding:15px 16px 17px}
.pcard .br{font:700 11px/1 var(--font);letter-spacing:.1em;text-transform:uppercase;color:var(--berry)}
.pcard .nm{margin-top:6px;font-weight:700;font-size:15.5px}
.pcard .ft{margin-top:12px;display:flex;align-items:center;justify-content:space-between}
.pcard .pr{font:800 19px/1 var(--font)}
.pcard .add{width:40px;height:40px;border-radius:12px;border:0;cursor:pointer;background:var(--grad);color:#fff;font-size:20px;display:grid;place-items:center}

/* BRANDS */
.brands{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;align-items:center}
.brands span{display:grid;place-items:center;height:64px;min-width:120px;padding:12px 22px;background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow-sm)}
.brands img{max-height:36px;max-width:120px;object-fit:contain}

/* REVIEWS */
.rev-wrap{display:grid;grid-template-columns:.9fr 1.1fr;gap:30px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(24px,4vw,44px);box-shadow:var(--shadow)}
.rev-score{font-family:var(--display);font-size:76px;line-height:1;color:var(--gold)}
.stars{color:var(--gold);font-size:26px;letter-spacing:3px}
.rev-cards{display:grid;gap:14px}
.rev-wrap--seul{grid-template-columns:1fr;text-align:center}
/* Annulation en ligne (legal.html#cancel) */
/* Lien d'evitement : invisible tant qu'on ne navigue pas au clavier */
.skip-link{position:absolute;inset-inline-start:12px;top:-80px;z-index:10000;background:var(--ink);color:#fff;
  padding:12px 18px;border-radius:12px;font-weight:700;text-decoration:none;transition:top .15s}
.skip-link:focus{top:12px}
main:focus{outline:none}
.hero-art img:focus-visible{outline:3px solid var(--ink);outline-offset:4px;border-radius:12px}
/* Information a la collecte (art. 11 de la loi sur la vie privee) */
.priv-note{font-size:12.5px;line-height:1.5;color:var(--muted);margin:10px 0 0}
.priv-note a{color:inherit;text-decoration:underline}
.lg-cancel{display:grid;gap:12px;max-width:420px;margin-top:10px}
.lg-cancel label{display:grid;gap:6px;font-weight:600;font-size:14px}
.lg-cancel input{padding:12px 14px;border:1.5px solid var(--line);border-radius:12px;font:inherit;background:#fff}
.lg-cancel input:focus-visible{outline:3px solid var(--ink);outline-offset:2px}
.lg-cancel .btn{justify-self:start}
.lg-cancel-msg{margin:0;font-weight:600;min-height:1.4em}
.lg-cancel-msg.is-ok{color:#1F7A4D}
.lg-cancel-msg.is-err{color:#B42318}
.rev-card{background:#FFFBF7;border:1px solid var(--line);border-radius:16px;padding:16px 18px}
.rev-card .who{display:flex;align-items:center;gap:10px;font-weight:700;font-size:14px}
.rev-card .av{width:34px;height:34px;border-radius:50%;background:var(--grad);color:#fff;display:grid;place-items:center;font-weight:800}
.rev-card p{margin-top:8px;font-size:13.5px;color:#6A5F68}

/* INFO */
.info-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:26px;align-items:stretch}
.info-card{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:clamp(22px,3vw,34px);box-shadow:var(--shadow-sm)}
.info-card .row{display:flex;gap:12px;align-items:flex-start;margin-top:14px;font-size:14.5px;color:#5D525C}
.info-card .row b{color:var(--ink)}

/* FOOTER */
footer{background:#2A2230;color:#EDE6EC;margin-top:20px}
.foot{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:26px;padding:52px 0 30px}
.foot h4{font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:#C9A9C4;margin-bottom:14px}
.foot a{display:block;color:#C6BCC6;font-size:14px;padding:5px 0}
.foot a:hover{color:#fff}
.foot .soc{display:flex;gap:10px;margin-top:14px}
.foot .soc a{width:40px;height:40px;border-radius:12px;background:rgba(255,255,255,.08);display:grid;place-items:center;font-size:18px}
.copy{border-top:1px solid rgba(255,255,255,.1);padding:18px 0;display:flex;flex-wrap:wrap;gap:10px;justify-content:space-between;font-size:12.5px;color:#9A8F98}

.reveal{opacity:0;transform:translateY(24px);transition:opacity .6s ease,transform .6s ease}
.reveal.in{opacity:1;transform:none}

@media(max-width:900px){
  .nav-links{display:none} .burger{display:grid} .hero-inner{grid-template-columns:1fr} .hero-art{display:none}
  .cats{grid-template-columns:repeat(2,1fr)} .prow{grid-template-columns:repeat(2,1fr)}
  .rev-wrap,.info-grid{grid-template-columns:1fr}
  .foot{grid-template-columns:1fr 1fr}
}

/* ==========================================================================
   BOUTIQUE (catalogue.html)
   ========================================================================== */
.nav-links a.active{background:#FFF0EC;color:var(--coral)}

/* Bandeau de tete de page (remplace le hero sur les pages interieures) */
.pagehead{padding:clamp(30px,5vw,54px) 0 clamp(18px,3vw,26px);
  background:radial-gradient(120% 140% at 50% -20%,rgba(242,105,107,.16),transparent 60%),
             linear-gradient(160deg,#FFF6F2,#FFF9F6 60%,#F5FBF7)}
.pagehead .h2{margin-top:6px}
.pagehead p{color:var(--muted);margin-top:10px;max-width:44em}

/* Barre de filtres — collante sous le header pour rester accessible en scroll */
.filters{position:sticky;top:66px;z-index:30;background:rgba(255,251,247,.92);
  backdrop-filter:blur(12px);border-bottom:1px solid var(--line);padding:14px 0}
.filters .row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.fsearch{flex:1 1 240px;min-width:200px;position:relative}
.fsearch input{width:100%;border:1px solid var(--line);background:#fff;border-radius:999px;
  padding:11px 44px 11px 18px;font:600 14px/1.2 var(--font);color:var(--ink);outline:none;
  transition:border-color .18s,box-shadow .18s}
.fsearch input:focus{border-color:var(--coral);box-shadow:0 0 0 4px rgba(242,105,107,.13)}
.fsearch::after{content:"🔎";position:absolute;inset-inline-end:16px;top:50%;transform:translateY(-50%);
  pointer-events:none;font-size:15px;opacity:.55}
select.fsel{appearance:none;border:1px solid var(--line);background:#fff;border-radius:999px;
  padding:11px 34px 11px 16px;font:700 13.5px/1 var(--font);color:var(--ink);cursor:pointer;outline:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);
  background-position:calc(100% - 18px) 50%,calc(100% - 13px) 50%;background-size:5px 5px,5px 5px;background-repeat:no-repeat;
  transition:border-color .18s,box-shadow .18s}
select.fsel:focus,select.fsel:hover{border-color:var(--coral)}
select.fsel.on{border-color:var(--coral);background-color:#FFF0EC;color:var(--coral)}
.freset{border:0;background:transparent;color:var(--muted);font:700 13px/1 var(--font);
  cursor:pointer;padding:11px 6px;text-decoration:underline;text-underline-offset:3px}
.freset:hover{color:var(--coral)}
.fcount{color:var(--muted);font-size:13.5px;font-weight:600;margin-inline-start:auto}
.fcount b{color:var(--ink)}

/* Grille produits : s'adapte toute seule, jamais de carte orpheline etiree */
.pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:18px;margin-top:26px}
.pcard{display:block;color:inherit}
.pcard .vols{display:flex;gap:5px;margin-top:8px;flex-wrap:wrap}
.pcard .vols span{font:700 10.5px/1 var(--font);color:var(--muted);background:#FBF4F1;
  border-radius:6px;padding:4px 7px}
.pcard .tag.new{background:linear-gradient(135deg,#17884C,#116B57)}
.pcard .pr small{font-weight:600;font-size:11.5px;color:var(--muted);margin-inline-end:3px}
.pcard .tbc{display:block;font:600 10px/1.2 var(--font);color:var(--gold);margin-top:3px}
.pempty{text-align:center;padding:70px 20px;color:var(--muted)}
.pempty div{font-size:44px;margin-bottom:12px}

@media(max-width:860px){
  .filters{top:60px}
  .fcount{width:100%;margin-inline-start:0}
  .nav-links{position:fixed;inset:64px 0 auto 0;background:#fff;flex-direction:column;
    padding:12px;border-bottom:1px solid var(--line);display:none;box-shadow:var(--shadow)}
  .nav-links.open{display:flex}
}

/* Visuel produit : les bouteilles SIX font 1618x3538 (tres hautes). Un
   `height:%` ne se resout pas dans la grille centree du cadre : l'image
   reprenait sa taille naturelle et debordait (235x515 dans un cadre de
   268x210), coupee par overflow:hidden. Des contraintes max-* garantissent
   que l'image tient TOUJOURS dans son cadre, quel que soit son format. */
.pcard .ph img{position:absolute;inset:14px;width:calc(100% - 28px);height:calc(100% - 28px);
  object-fit:contain;max-width:none;max-height:none}

/* --------------------------------------------------------------------------
   FILTRES SIMPLIFIES
   Une seule rangee visible par defaut : les categories en pastilles (c'est
   ce que le client cherche en premier). Volume et nicotine n'apparaissent
   QUE s'ils ont du sens pour la selection en cours — inutile de proposer
   "50 ml" quand on regarde des resistances.
   -------------------------------------------------------------------------- */
.filters .fbar{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.filters .fbar + .fbar{margin-top:11px}

/* ── La barre de filtres se replie ────────────────────────────────────────
   Elle est collante en haut de l'ecran : sur un portable 13 pouces, elle
   mangeait le premier rang de produits. On peut desormais la plier ; il ne
   reste qu'un bandeau fin avec le nombre de resultats et le bouton pour la
   rouvrir. Le choix est retenu d'une visite a l'autre.
   Le bouton n'existe qu'a partir de 701 px : en dessous, c'est le tiroir
   du telephone qui prend le relais. */
.fplier{display:none}
/* Dans la rangee d'en-tete, le compteur reste a gauche et c'est le bouton qui
   part a droite — l'inverse de son comportement au milieu des filtres. */
.fbar-tete{gap:12px}
.fbar-tete .fcount{margin-inline-start:0}
@media(min-width:701px){
  .fplier{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line);
    background:#fff;border-radius:999px;cursor:pointer;padding:9px 15px;
    font:700 13px/1 var(--font);color:#5A4F5C;margin-inline-start:auto;
    transition:border-color .18s,color .18s}
  .fplier:hover{border-color:var(--coral);color:var(--coral)}
  .fplier .chev{transition:transform .22s cubic-bezier(.2,.8,.2,1);font-size:10px}
  /* Le nombre de filtres actifs, visible seulement quand la barre est repliee :
     une liste filtree ne doit jamais passer pour une boutique vide. */
  .fplier-n{background:var(--grad);color:#fff;border-radius:999px;min-width:19px;
    height:19px;display:inline-grid;place-items:center;padding:0 5px;
    font:800 11px/1 var(--font)}
  .filters.replie .fplier .chev{transform:rotate(-90deg)}
  /* Replie : tout disparait sauf la premiere rangee, qui porte le bouton. */
  .filters.replie{padding:9px 0}
  .filters.replie .fbar:not(.fbar-tete),
  .filters.replie .fsub,
  .filters.replie .fsearch,
  .filters.replie .chips{display:none}
  .filters.replie .fbar-tete{margin-top:0}
  .filters.replie .fcount{margin-inline-start:0}
}
@media(prefers-reduced-motion:reduce){
  .fplier .chev{transition:none}
}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{border:1px solid var(--line);background:#fff;border-radius:999px;cursor:pointer;
  font:700 13.5px/1 var(--font);color:#5A4F5C;padding:11px 17px;display:inline-flex;
  align-items:center;gap:7px;transition:transform .2s cubic-bezier(.2,.8,.2,1),box-shadow .2s,background .2s,color .2s}
.chip:hover{transform:translateY(-2px);box-shadow:0 6px 16px rgba(150,90,90,.14);color:var(--coral)}
.chip.on{background:var(--grad);color:#fff;border-color:transparent;box-shadow:0 8px 20px rgba(225,86,126,.30)}
.chip .n{font-size:11px;font-weight:800;opacity:.62}
.chip.on .n{opacity:.85}
.chips.sm .chip{padding:8px 13px;font-size:12.5px}
.flab{font:700 11px/1 var(--font);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.fsub{padding-top:11px;border-top:1px dashed var(--line)}

/* Survol d'une carte : la bouteille detouree cede la place au visuel
   d'ambiance de la meme saveur (les deux images sont superposees). */
/* `contain` et non `cover` : les visuels d'ambiance sont en PORTRAIT (354x500,
   886x1100) alors que la vignette est en paysage. En `cover` le navigateur
   remplissait le cadre en rognant le haut et le bas — la bouteille etait
   coupee et on ne voyait qu'une tranche du flacon. */
/* MISE A JOUR 05/09/2026 — le cadrage est desormais un reglage par fiche
   (colonne `bg_cover`, modifiable depuis le site). Par defaut on REMPLIT le
   cadre : deux bandes blanches sur les cotes salissaient la carte. Les fiches
   dont la photo ne supporte pas le rognage portent `data-bg="entiere"`. */
.pcard .ph .bg{opacity:0;transition:opacity .32s ease;object-fit:cover;inset:0;
  width:100%;height:100%}
.pcard[data-bg="entiere"] .ph .bg{object-fit:contain}
.pcard:hover .ph .bg{opacity:1}
.pcard .ph .cut{transition:opacity .32s ease,transform .25s}
/* La disparition du visuel principal est conditionnee a la presence d'un
   SECOND visuel derriere (classe posee par catalogue.js). Sans cette
   condition, les 57 fiches qui n'ont qu'une image se vidaient au survol :
   le produit s'effacait et la carte devenait blanche. */
.pcard.has-bg:hover .ph .cut,
.pcard:has(.ph .bg):hover .ph .cut{opacity:0}
.pcard:hover .ph img.cut{transform:scale(1.06)}

/* --------------------------------------------------------------------------
   FICHE PRODUIT (produit.html)
   Le client ne veut PAS de bouteille posee sur du blanc : le visuel principal
   est l'image d'ambiance de la saveur, la bouteille detouree se superposant
   dessus. On retombe sur la detouree seule si la saveur n'a pas d'ambiance.
   -------------------------------------------------------------------------- */
.pdp{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(24px,4vw,52px);align-items:start}
.pdp-media{position:relative;border-radius:var(--r-lg);overflow:hidden;aspect-ratio:1/1;
  background:radial-gradient(circle at 50% 35%,#FFF3EF,#fff);box-shadow:var(--shadow)}
.pdp-media .amb{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* Visuel « entier » : le cadre epouse l'image (produit.js, cadrerAmbiance).
   4/5 en attendant qu'elle arrive ; et sur grand ecran on la borne a 78 % de
   la hauteur de la fenetre, pour qu'un portrait ne pousse pas le prix sous la
   ligne de flottaison. */
.pdp-media[data-bg="entiere"]{aspect-ratio:var(--ratio,4 / 5);
  width:min(100%, calc(78vh * var(--ratio-n, .8)));margin-inline:auto}
.pdp-media[data-bg="entiere"] .amb{object-fit:cover}
.pdp-media .cut{position:absolute;inset:8% 10%;width:80%;height:84%;object-fit:contain;
  filter:drop-shadow(0 26px 36px rgba(40,20,30,.42))}
.pdp-media .tag{position:absolute;top:16px;inset-inline-start:16px;z-index:2;
  background:linear-gradient(135deg,#17884C,#116B57);color:#fff;font:800 11px/1 var(--font);
  letter-spacing:.06em;text-transform:uppercase;padding:8px 13px;border-radius:9px;
  box-shadow:0 6px 18px rgba(0,0,0,.28)}
.pdp-back{display:inline-flex;align-items:center;gap:7px;color:var(--muted);font-weight:700;
  font-size:13.5px;margin-bottom:14px}
.pdp-back:hover{color:var(--coral)}
.pdp h1{font-family:var(--display);font-size:clamp(28px,3.6vw,44px);line-height:1.06;margin-top:6px}
.pdp .brandline{font:800 12px/1 var(--font);letter-spacing:.14em;text-transform:uppercase;color:var(--berry)}
.pdp .lead{color:#6A5F68;margin-top:14px;font-size:15.5px;max-width:36em}
.opt{margin-top:24px}
.opt .flab{display:block;margin-bottom:9px}
.priceline{margin-top:26px;display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.priceline .big{font-family:var(--display);font-size:40px;line-height:1}
.priceline .tbc{font-size:12.5px;font-weight:700;color:var(--gold)}
.pdp-actions{margin-top:20px;display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.qty{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:999px;background:#fff}
.qty button{border:0;background:transparent;cursor:pointer;font:800 17px/1 var(--font);
  color:var(--ink);padding:12px 15px}
.qty button:hover{color:var(--coral)}
.qty span{min-width:30px;text-align:center;font-weight:800}
.pdp-meta{margin-top:24px;display:flex;gap:9px;flex-wrap:wrap}
.pdp-meta span{font:700 11.5px/1 var(--font);padding:8px 13px;border-radius:999px;background:#F6F0EC;color:#6A5F68}
.pdp-meta .ok{background:#E4F6EE;color:#0D7E51}
@media(max-width:880px){ .pdp{grid-template-columns:1fr} }

/* --------------------------------------------------------------------------
   PANIER & COMMANDE (panier.html)
   -------------------------------------------------------------------------- */
.cart-grid{display:grid;grid-template-columns:1.5fr .95fr;gap:clamp(20px,3vw,38px);align-items:start}
.cart-line{display:grid;grid-template-columns:88px 1fr auto;gap:16px;align-items:center;
  background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:14px;
  box-shadow:var(--shadow-sm);margin-bottom:12px}
.cart-line .thumb{width:88px;height:88px;border-radius:16px;position:relative;overflow:hidden;
  background:radial-gradient(circle at 50% 35%,#FFF3EF,#fff)}
.cart-line .thumb img{position:absolute;inset:8px;width:calc(100% - 16px);height:calc(100% - 16px);
  object-fit:contain}
.cart-line .nm{font-weight:700;font-size:15.5px}
.cart-line .br{font:700 10.5px/1 var(--font);letter-spacing:.1em;text-transform:uppercase;color:var(--berry)}
.cart-line .var{margin-top:7px;display:flex;gap:6px;flex-wrap:wrap}
.cart-line .var span{font:700 10.5px/1 var(--font);color:var(--muted);background:#FBF4F1;
  border-radius:6px;padding:5px 8px}
.cart-line .right{text-align:end;display:flex;flex-direction:column;align-items:flex-end;gap:9px}
.cart-line .lt{font:800 17px/1 var(--font);white-space:nowrap}
.cart-line .rm{border:0;background:transparent;color:var(--muted);cursor:pointer;
  font:600 12px/1 var(--font);text-decoration:underline;text-underline-offset:3px}
.cart-line .rm:hover{color:var(--coral)}
.qty.sm button{padding:8px 12px;font-size:15px}
.qty.sm span{min-width:24px}

.panel{background:#fff;border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--shadow-sm);padding:20px}
/* min-width:0 : sans lui, la rangee des jours (« Quand ? ») imposait sa
   largeur a toute la colonne, et la page debordait au telephone. */
.summary{position:sticky;top:88px;min-width:0}
.summary h3{font-family:var(--display);font-size:20px}
.sline{display:flex;justify-content:space-between;align-items:baseline;margin-top:12px;font-size:14.5px}
.sline.total{margin-top:16px;padding-top:16px;border-top:1px solid var(--line);
  font-family:var(--display);font-size:24px}
.sline .free{color:var(--green);font-weight:800}
/* La remise de premiere commande, annoncee dans le panier (panier.js). */
.sline.welcome span{color:var(--green);font-weight:700}
.sum-note{margin-top:5px;font-size:12.5px;line-height:1.45;color:var(--muted)}

/* --------------------------------------------------------------------------
   TUNNEL DE COMMANDE PAR ETAPES (panier.js, 27/09/2026)
   Le fil du haut dit ou l'on en est ; chaque etape est un panneau qui
   s'ouvre, se replie en une ligne une fois faite, ou reste grise tant que
   la precedente n'a pas de reponse.
   -------------------------------------------------------------------------- */
.co-fil{list-style:none;margin:0 0 18px;padding:0;display:flex;gap:6px;counter-reset:none}
.co-fil li{flex:1;min-width:0;display:flex;align-items:center;gap:8px;padding:9px 10px;border-radius:14px;
  background:#fff;border:1px solid var(--line);color:var(--muted);font:700 12.5px/1.2 var(--font)}
.co-fil li i{flex:none;display:grid;place-items:center;width:24px;height:24px;border-radius:50%;
  font-style:normal;font-size:12px;background:#F4EEEA;color:var(--muted)}
.co-fil li span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.co-fil li.fait{color:var(--green);border-color:#CDEBDC;background:#F3FBF7}
.co-fil li.fait i{background:var(--green);color:#fff}
.co-fil li.ici{color:var(--ink);border-color:transparent;background:#FFF3EF;
  box-shadow:inset 0 0 0 2px rgba(198,63,72,.55)}
.co-fil li.ici i{background:var(--grad);color:#fff}
@media(max-width:520px){ .co-fil li{padding:8px 6px;gap:5px;font-size:11.5px} .co-fil li i{width:21px;height:21px} }

.co-step{margin-top:16px;transition:box-shadow .2s ease,border-color .2s ease}
.co-step.ouvert{border-color:rgba(198,63,72,.35);box-shadow:0 14px 34px rgba(198,63,72,.12)}
.co-step.verrou{opacity:.62}
.co-tete{display:flex;align-items:flex-start;gap:12px}
.co-num{flex:none;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;
  background:#F4EEEA;color:var(--muted);font:800 13px/1 var(--font)}
.co-step.ouvert .co-num{background:var(--grad);color:#fff;box-shadow:0 6px 14px rgba(197,60,102,.3)}
.co-step.fait .co-num{background:var(--green);color:#fff}
.co-titre{flex:1;min-width:0}
.co-titre h3{margin:4px 0 0}
.co-res{margin-top:4px;font-size:13px;color:var(--muted);font-weight:600;overflow-wrap:anywhere}
.co-lien{flex:none;border:0;background:none;cursor:pointer;color:var(--coral);font:800 13px/1 var(--font);
  padding:9px 4px;min-height:36px}
.co-lien:hover{text-decoration:underline}
.co-corps{margin-top:14px}
.co-corps .delopt + .delopt{margin-top:10px}
.co-suite{width:100%;justify-content:center;margin-top:16px}
.co-err{background:#FDE7E7;color:#a3323c;margin-top:12px}

/* Qui commande : connecte et membre du club, ou trois portes ouvertes. */
.co-compte{border-radius:16px;padding:12px 14px;margin-bottom:14px;
  background:linear-gradient(120deg,rgba(242,105,107,.07),rgba(124,80,232,.06));border:1px solid #F1DDE3}
.co-compte.ok{display:flex;align-items:center;justify-content:space-between;gap:10px;
  background:#F3FBF7;border-color:#CDEBDC}
.co-compte-l{display:flex;align-items:center;gap:10px;min-width:0}
.co-compte-l b{display:block;font-size:14.5px}
.co-compte-l span{display:block;font-size:12.5px;color:var(--green);font-weight:700}
/* `.co-compte-l .co-coche` et pas `.co-coche` seul : la regle au-dessus vise
   tous les <span> du bloc, et peignait la coche en vert sur fond vert. */
.co-compte-l .co-coche{flex:none;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;
  background:var(--green);color:#fff;font-size:15px;font-weight:800}
.co-porte{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.co-porte + .co-porte{margin-top:10px;padding-top:10px;border-top:1px dashed #EBD6DD}
.co-porte span{flex:1 1 180px;font-size:13.5px;color:#5D525C;line-height:1.45}
.co-porte b{color:var(--ink)}
.co-btn{padding:10px 16px;font-size:13.5px;flex:none}
.co-aide{margin:-4px 0 14px;font-size:12.5px;color:var(--muted);font-weight:600}
/* `hidden` doit gagner sur le `display` de la ligne : sans cela, « Maison /
   Travail / Autre » s'affichait meme case decochee. */
.retenir-nom[hidden]{display:none}

/* Choix du mode de reception : des cartes cliquables plutot que des boutons
   radio minuscules — c'est un choix structurant de la commande. */
.delopt{display:block;border:1px solid var(--line);border-radius:16px;padding:14px 16px;
  cursor:pointer;margin-top:10px;transition:border-color .18s,box-shadow .18s,background .18s}
.delopt:hover{border-color:var(--coral)}
.delopt.on{border-color:var(--coral);background:#FFF6F3;box-shadow:0 6px 18px rgba(242,105,107,.16)}
.delopt input{display:none}
.delopt .t{display:flex;justify-content:space-between;align-items:center;gap:10px}
.delopt .t b{font-size:14.5px}
.delopt .t .p{font-weight:800;font-size:14px;white-space:nowrap}
.delopt .d{color:var(--muted);font-size:12.5px;margin-top:4px}
/* « Livraison dans tout Israel — bientot disponible » : une annonce, pas un
   choix. Bord en pointilles, voile aux couleurs du site, et une pastille au
   degrade du magasin ; le curseur dit qu'on ne peut pas encore la prendre. */
.delopt.soon{position:relative;cursor:not-allowed;border-style:dashed;border-color:#E9C9D3;
  background:linear-gradient(120deg,rgba(242,105,107,.07),rgba(197,60,102,.06) 50%,rgba(124,80,232,.07))}
.delopt.soon:hover{border-color:#E9C9D3}
.delopt.soon .t b{color:#6E6470}
.soon-badge{flex:none;display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border-radius:999px;
  background:var(--grad);color:#fff;font:800 11px/1 var(--font);letter-spacing:.04em;white-space:nowrap;
  box-shadow:0 6px 14px rgba(197,60,102,.28)}
.soon-badge::before{content:"";width:6px;height:6px;border-radius:50%;background:#fff;opacity:.9;
  animation:pulseDot 2s infinite}
@media(prefers-reduced-motion:reduce){.soon-badge::before{animation:none}}

/* Quand ? — les creneaux du vrai magasin (services/creneaux.py). Un jour,
   puis une heure ; « des que possible » seulement quand quelqu'un prepare. */
.quand{margin-top:16px;padding-top:14px;border-top:1px dashed #EBD6DD}
.quand h4{margin:0 0 10px;font:800 15px/1.2 var(--font)}
.quand-info{margin:0 0 12px;font-size:13.5px;line-height:1.5;color:#5D525C}
.quand-info.ferme{background:#F4F0FF;color:#4B3A8C;border-radius:12px;padding:10px 12px;font-weight:600}
.quand-asap{display:block;width:100%;text-align:start;border:1px solid var(--line);border-radius:14px;
  padding:12px 14px;background:#fff;font:700 14px/1.35 var(--font);color:var(--ink);cursor:pointer;
  transition:border-color .18s,box-shadow .18s,background .18s}
.quand-asap.on{border-color:var(--coral);background:#FFF6F3;box-shadow:0 6px 18px rgba(242,105,107,.16)}
.quand-ou{margin:14px 0 8px;font:700 11.5px/1.3 var(--font);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.quand-jours{display:flex;gap:8px;overflow-x:auto;padding:2px 2px 6px;scrollbar-width:thin}
.quand-j{flex:none;min-width:84px;min-height:44px;border:1px solid var(--line);border-radius:12px;background:#fff;
  padding:8px 12px;cursor:pointer;font:700 13px/1.2 var(--font);color:var(--ink);white-space:nowrap}
.quand-j.on{border-color:var(--coral);background:var(--coral);color:#fff}
.quand-heures{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.quand-h{min-height:44px;min-width:72px;border:1px solid var(--line);border-radius:12px;background:#fff;padding:0 12px;
  cursor:pointer;font:700 14px/1 var(--font);color:var(--ink);font-variant-numeric:tabular-nums}
.quand-h.on{border-color:var(--coral);background:#FFF0EC;color:var(--coral);box-shadow:0 0 0 3px rgba(242,105,107,.15)}
.quand-j:hover,.quand-h:hover,.quand-asap:hover{border-color:var(--coral)}
.quand button:focus-visible{outline:2px solid var(--coral);outline-offset:2px}
.ok-quand{display:inline-block;margin-top:14px;padding:10px 16px;border-radius:14px;background:#F4F0FF;
  color:#4B3A8C;font-weight:800}

.fld{margin-top:12px}
.fld label{display:block;font:700 11.5px/1 var(--font);letter-spacing:.08em;
  text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.fld input,.fld textarea{width:100%;border:1px solid var(--line);border-radius:14px;background:#fff;
  padding:12px 15px;font:500 14.5px/1.4 var(--font);color:var(--ink);outline:none;
  transition:border-color .18s,box-shadow .18s}
.fld input:focus,.fld textarea:focus{border-color:var(--coral);box-shadow:0 0 0 4px rgba(242,105,107,.13)}
.fld.bad input,.fld.bad textarea{border-color:#E0555F;box-shadow:0 0 0 4px rgba(224,85,95,.14)}
.fld textarea{min-height:76px;resize:vertical}
.fld2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.notice{margin-top:16px;background:#FEF3DC;border-radius:14px;padding:13px 15px;
  font-size:13px;color:#7a5410;line-height:1.5}
.agecheck{display:flex;gap:10px;align-items:flex-start;margin-top:16px;font-size:13.5px;cursor:pointer}
.agecheck input{width:19px;height:19px;accent-color:var(--coral);margin-top:1px;flex:none}
.okbox{text-align:center;padding:56px 20px}
.okbox .big{font-size:64px;line-height:1}
.okbox .ref{display:inline-block;margin-top:14px;background:#E4F6EE;color:#0D7E51;
  font:800 15px/1 var(--font);padding:12px 20px;border-radius:999px}
@media(max-width:900px){
  .cart-grid{grid-template-columns:1fr}
  .summary{position:static}
  .cart-line{grid-template-columns:64px 1fr;gap:12px}
  .cart-line .thumb{width:64px;height:64px}
  .cart-line .right{grid-column:1/-1;flex-direction:row;justify-content:space-between;align-items:center}
}

/* Secular One est une police hebraique : ses glyphes latins accentues sont
   faux (le "À" de "À payer" sortait en "Á"). On garde donc Secular One pour
   l'hebreu, et Poppins prend la main pour le francais et l'anglais. */
:root{--display:'Poppins','Secular One',var(--font)}
html[lang="he"]{--display:'Secular One','Poppins',var(--font)}

/* --------------------------------------------------------------------------
   NOTRE MAGASIN (magasin.html)
   -------------------------------------------------------------------------- */
.infogrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px}
.infocard{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:22px;
  box-shadow:var(--shadow-sm);transition:transform .22s cubic-bezier(.2,.8,.2,1),box-shadow .22s}
.infocard:hover{transform:translateY(-5px);box-shadow:var(--shadow)}
.infocard .ic{width:52px;height:52px;border-radius:16px;display:grid;place-items:center;font-size:25px;margin-bottom:14px}
.infocard h3{font-family:var(--display);font-size:19px}
.infocard p,.infocard a.v{color:var(--muted);font-size:14px;margin-top:7px;display:block}
.infocard a.v:hover{color:var(--coral)}
.infocard .row{display:flex;justify-content:space-between;gap:12px;font-size:14px;
  padding:8px 0;border-bottom:1px dashed var(--line)}
.infocard .row:last-child{border-bottom:0}
.infocard .row b{font-weight:700}
.infocard .row.off span{color:var(--muted)}
.infogrid > :nth-child(1) .ic{background:#EAEFFF;color:#3a51b0}
.infogrid > :nth-child(2) .ic{background:#FEF3DC;color:#9C6307}
.infogrid > :nth-child(3) .ic{background:#E4F6EE;color:#0D7E51}
.infogrid > :nth-child(4) .ic{background:#FDE7E7;color:#BC3D4D}
.mapwrap{margin-top:20px;border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line);
  box-shadow:var(--shadow-sm);background:#fff}
.mapwrap iframe{display:block;width:100%;height:340px;border:0}

/* Les applis de guidage, sous le bouton de la fiche. La pastille de couleur
   sert a les reconnaitre d'un coup d'oeil ; le texte, lui, reste a l'encre. */
.nav-apps{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.nav-app{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 15px;
  border-radius:999px;border:1px solid var(--line);background:#fff;color:var(--ink);
  font-weight:700;font-size:13.5px;text-decoration:none;
  transition:border-color .18s,transform .18s}
.nav-app:hover{border-color:var(--ink);transform:translateY(-1px)}
.nav-app .pastille{width:12px;height:12px;border-radius:50%;flex:none}
.nav-app.waze .pastille{background:#33CCFF;box-shadow:inset 0 0 0 1px rgba(0,0,0,.12)}
.nav-app.plans .pastille{background:linear-gradient(135deg,#34C759,#0A84FF)}

/* La carte au toucher : a sa place, a sa taille, avant d'etre chargee. Rien
   ne saute quand l'iframe arrive. */
.carte{min-height:340px;display:flex;flex-direction:column}
.carte-choix{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:6px;padding:28px 20px;text-align:center;
  background:radial-gradient(circle at 50% 30%,#FDE9EC,transparent 62%),
             repeating-linear-gradient(0deg,transparent 0 23px,rgba(42,34,48,.05) 23px 24px),
             repeating-linear-gradient(90deg,transparent 0 23px,rgba(42,34,48,.05) 23px 24px),#FFF8F5}
.carte-pin{font-size:34px;line-height:1}
.carte-choix b{font-family:var(--display);font-size:19px;color:var(--ink)}
.carte-choix p{max-width:34em;color:var(--muted);font-size:13px;line-height:1.55}
.carte-btns{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:10px}
.carte-btns button,.carte-barre button{min-height:44px;padding:0 20px;border-radius:999px;
  border:1px solid var(--ink);background:#fff;color:var(--ink);
  font:700 14px/1 var(--font);cursor:pointer;transition:background .18s,color .18s}
.carte-btns button:hover,.carte-barre button:hover{background:var(--ink);color:#fff}
.carte-barre{display:flex;gap:8px;padding:10px;background:#fff;border-bottom:1px solid var(--line)}
.carte-barre button{min-height:38px;padding:0 16px;font-size:13px}
.carte-barre button.on{background:var(--ink);color:#fff}
.svc{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px;margin-top:22px}
.svc div{background:#fff;border:1px solid var(--line);border-radius:18px;padding:20px}
.svc .e{font-size:28px}
.svc h4{font-weight:800;font-size:15.5px;margin-top:10px}
.svc p{color:var(--muted);font-size:13.5px;margin-top:6px;line-height:1.5}

/* --------------------------------------------------------------------------
   AVIS (avis.html)
   -------------------------------------------------------------------------- */
.ratebox{display:flex;align-items:center;gap:26px;flex-wrap:wrap;background:#fff;
  border:1px solid var(--line);border-radius:var(--r-lg);padding:26px 30px;box-shadow:var(--shadow-sm)}
.ratebox .score{font-family:var(--display);font-size:58px;line-height:1}
.ratebox .stars{color:var(--gold);font-size:22px;letter-spacing:3px}
.ratebox .lab{color:var(--muted);font-size:13.5px;margin-top:5px}
.revgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:18px;margin-top:24px}
.revcard{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:22px;
  box-shadow:var(--shadow-sm);transition:transform .22s cubic-bezier(.2,.8,.2,1),box-shadow .22s}
.revcard:hover{transform:translateY(-5px);box-shadow:var(--shadow)}
.revcard .s{color:var(--gold);letter-spacing:2px;font-size:15px}
.revcard p{margin-top:11px;font-size:14.5px;line-height:1.6}
.revcard .who{margin-top:14px;display:flex;align-items:center;gap:10px}
.revcard .av{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;
  font:800 14px/1 var(--font);color:#fff;background:var(--grad)}
.revcard .who b{font-size:13.5px}
.phnote{margin-top:16px;background:#FEF3DC;border-radius:14px;padding:11px 15px;
  font-size:12.5px;color:#7a5410}
.revcta{margin-top:34px;border-radius:var(--r-lg);padding:clamp(28px,4vw,44px);text-align:center;
  background:linear-gradient(120deg,#C63F48,#B93B76 42%,#7C50E8 78%,#4165E0);color:#fff}
.revcta h2{font-family:var(--display);font-size:clamp(24px,3.4vw,34px)}
.revcta p{opacity:.92;margin-top:10px;max-width:34em;margin-inline:auto}

/* --------------------------------------------------------------------------
   A PROPOS (apropos.html) — histoire + marques
   -------------------------------------------------------------------------- */
.story{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(24px,4vw,48px);align-items:center}
.story p{color:#6A5F68;font-size:15.5px;line-height:1.72;margin-top:14px}
.story-art{position:relative;border-radius:var(--r-lg);overflow:hidden;aspect-ratio:4/3;
  background:radial-gradient(circle at 50% 35%,#FFF3EF,#fff);box-shadow:var(--shadow);
  display:grid;place-items:center}
.story-art img{max-width:76%;max-height:82%;object-fit:contain;
  filter:drop-shadow(0 20px 30px rgba(60,30,40,.22))}
.vals{display:grid;grid-template-columns:repeat(auto-fit,minmax(238px,1fr));gap:16px;margin-top:24px}
.val{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:22px;
  box-shadow:var(--shadow-sm);transition:transform .22s cubic-bezier(.2,.8,.2,1),box-shadow .22s}
.val:hover{transform:translateY(-5px);box-shadow:var(--shadow)}
.val .e{font-size:27px}
.val h4{font-weight:800;font-size:16px;margin-top:10px}
.val p{color:var(--muted);font-size:13.5px;margin-top:7px;line-height:1.55}
.brandgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(158px,1fr));gap:14px;margin-top:22px}
.brandcard{background:#fff;border:1px solid var(--line);border-radius:18px;padding:20px 14px;
  text-align:center;box-shadow:var(--shadow-sm);color:inherit;
  transition:transform .2s cubic-bezier(.2,.8,.2,1),box-shadow .2s,border-color .2s}
.brandcard:hover{transform:translateY(-5px);box-shadow:var(--shadow);border-color:var(--coral)}
.brandcard .lg{height:46px;display:grid;place-items:center}
.brandcard .lg img{max-height:46px;max-width:100%;object-fit:contain}
.brandcard .wm{font:800 19px/1 var(--display);letter-spacing:-.01em}
.brandcard .nm{margin-top:11px;font-weight:700;font-size:13.5px}
.brandcard .n{color:var(--muted);font-size:11.5px;margin-top:3px}
.brandcard.new{border-color:#B7E4CF;background:linear-gradient(160deg,#F3FBF7,#fff)}
.brandcard .newtag{display:inline-block;margin-top:8px;background:linear-gradient(135deg,#17884C,#116B57);
  color:#fff;font:800 9.5px/1 var(--font);letter-spacing:.08em;text-transform:uppercase;
  padding:5px 9px;border-radius:6px}
@media(max-width:880px){ .story{grid-template-columns:1fr} }

/* --------------------------------------------------------------------------
   REJOINDRE - club fidelite (rejoindre.html)
   Les regles affichees ici sont celles REELLEMENT appliquees par la caisse
   (1 point / 10 ID, VIP a 2 ans = -10%, anniversaire 30 ID, parrainage 20 ID).
   -------------------------------------------------------------------------- */
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px;margin-top:22px}
.step{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:22px;box-shadow:var(--shadow-sm)}
.step .num{width:34px;height:34px;border-radius:11px;background:var(--grad);color:#fff;
  display:grid;place-items:center;font:800 15px/1 var(--font)}
.step h4{font-weight:800;font-size:16px;margin-top:12px}
.step p{color:var(--muted);font-size:13.5px;margin-top:6px;line-height:1.55}
.perks{display:grid;grid-template-columns:repeat(auto-fit,minmax(238px,1fr));gap:16px;margin-top:22px}
.perk{border-radius:var(--r);padding:22px;border:1px solid transparent;
  transition:transform .22s cubic-bezier(.2,.8,.2,1),box-shadow .22s}
.perk:hover{transform:translateY(-5px);box-shadow:var(--shadow)}
.perk .e{font-size:27px}
.perk h4{font-weight:800;font-size:16.5px;margin-top:10px}
.perk p{font-size:13.5px;margin-top:7px;line-height:1.55;opacity:.86}
.perks > :nth-child(1){background:#EAEFFF;border-color:#C3CFF6;color:#2c3f8f}
.perks > :nth-child(2){background:#FDE7E7;border-color:#F5BDBD;color:#a3323c}
.perks > :nth-child(3){background:#FEF3DC;border-color:#F5D89A;color:#7a5410}
.perks > :nth-child(4){background:#E4F6EE;border-color:#B7E4CF;color:#15704a}
.tiers{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:22px}
.tier{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:24px;box-shadow:var(--shadow-sm)}
.tier.vip{background:linear-gradient(150deg,#2A2230,#3E3247);color:#F3ECF2;border-color:transparent}
.tier .badge{display:inline-block;font:800 10.5px/1 var(--font);letter-spacing:.1em;
  text-transform:uppercase;padding:7px 12px;border-radius:8px;background:#F6F0EC;color:#6A5F68}
.tier.vip .badge{background:linear-gradient(135deg,#F5B02E,#e09a17);color:#3a2a05}
.tier h3{font-family:var(--display);font-size:24px;margin-top:14px}
.tier p{font-size:14px;margin-top:9px;line-height:1.6;color:var(--muted)}
.tier.vip p{color:#CFC4CE}
.joinform{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  padding:clamp(22px,3vw,34px);box-shadow:var(--shadow);max-width:620px;margin:26px auto 0}
@media(max-width:700px){ .tiers{grid-template-columns:1fr} }

/* Fil Instagram reel : chaque vignette renvoie vers SON post, pas vers le
   profil. Les visuels sont copies en local car les URL du CDN Meta expirent. */

/* --------------------------------------------------------------------------
   STATUT D'OUVERTURE — pastille temps reel
   -------------------------------------------------------------------------- */
.shopstatus{display:inline-flex;align-items:center;gap:8px;border-radius:999px;
  padding:8px 15px;font:800 12.5px/1 var(--font);white-space:nowrap}
.shopstatus i{width:9px;height:9px;border-radius:50%;flex:none;display:block}
.shopstatus em{font-style:normal;font-weight:600;opacity:.72;font-size:11.5px}
.shopstatus.open{background:#E4F6EE;color:#15704a}
.shopstatus.open i{background:#2FB37A;box-shadow:0 0 0 0 rgba(47,179,122,.6);animation:pulseDot 2s infinite}
.shopstatus.closing{background:#FEF3DC;color:#8a5c0e}
.shopstatus.closing i{background:var(--gold)}
.shopstatus.soon{background:#EAEFFF;color:#3a51b0}
.shopstatus.soon i{background:var(--blue)}
.shopstatus.closed{background:#F4EFF2;color:#7A6E79}
.shopstatus.closed i{background:#B6A9B4}
/* Fermé pour une fête, le badge porte le nom de la fête ET l'heure de
   réouverture (« Chol HaMoed Sukkot · Reopens Monday at 10:00 ») : trop long
   pour une ligne de téléphone. Il passe à la ligne au lieu d'élargir la
   carte — avant, la page glissait sur le côté. */
.shopstatus{white-space:normal;flex-wrap:wrap;max-width:100%;row-gap:2px}
.shopstatus em{white-space:nowrap}
@keyframes pulseDot{
  0%{box-shadow:0 0 0 0 rgba(47,179,122,.55)}
  70%{box-shadow:0 0 0 7px rgba(47,179,122,0)}
  100%{box-shadow:0 0 0 0 rgba(47,179,122,0)}
}
/* Le jour en cours est mis en avant dans la grille d'horaires. */
.infocard .row.today{background:#FFF6F3;border-radius:8px;margin-inline:-6px;padding-inline:6px}
.infocard .row.today span,.infocard .row.today b{color:var(--coral)}

/* Grille d'horaires compacte dans la carte "Venez nous voir" de l'accueil. */
.hours-mini{margin-top:5px}
.hours-mini .row{display:flex;justify-content:space-between;gap:12px;align-items:baseline;
  padding:3px 0;font-size:13px;border:0}
.hours-mini .row b{font-weight:700;white-space:nowrap}
.hours-mini .row.off{opacity:.6}
.hours-mini .row.today b,.hours-mini .row.today span{color:var(--coral)}
/* Les jours de fete, le libelle s'allonge (« Today – Thursday 1/10 · Chol
   HaMoed Sukkot ») : il doit passer a la ligne plutot que d'elargir la carte
   et faire glisser la page sur le cote au telephone. Les heures, elles,
   restent d'un bloc. */
.info-card .row > div{min-width:0}
.hours-mini .row > span,.infocard .row > span{min-width:0;overflow-wrap:anywhere}
.infocard .row b{white-space:nowrap}

/* Offre de lot — reellement appliquee par /api/orders/create, donc annoncee. */
.pcard .pack{display:inline-flex;align-items:center;gap:5px;margin-top:8px;
  background:linear-gradient(135deg,#FEF3DC,#FDE9C7);color:#8a5c0e;
  font:800 10.5px/1 var(--font);padding:6px 9px;border-radius:8px}
.packbox{margin-top:18px;border-radius:16px;padding:16px 18px;
  background:linear-gradient(135deg,#FEF3DC,#FDE9C7);border:1px solid #F5D89A}
.packbox .t{font:800 14.5px/1.2 var(--font);color:#8a5c0e;display:flex;align-items:center;gap:8px}
.packbox .s{margin-top:6px;font:700 12.5px/1.4 var(--font);color:#9A680D}
.packbox .a{margin-top:6px;font-size:11.5px;color:#9A680D;opacity:.85}

/* Contenu enrichi de la fiche produit (argumentaire, specs, entretien). */
.pdp-extra{margin-top:30px;display:grid;gap:14px}
.pdp-block{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:18px 20px;
  box-shadow:var(--shadow-sm)}
.pdp-block h4{font:800 12px/1 var(--font);letter-spacing:.12em;text-transform:uppercase;
  color:var(--berry);margin-bottom:10px}
.pdp-block p{font-size:14.5px;line-height:1.65;color:#5A4F5C}
.pdp-block ul{list-style:none;margin-top:2px}
.pdp-block li{font-size:13.5px;line-height:1.6;color:#5A4F5C;padding-inline-start:16px;position:relative}
.pdp-block li::before{content:"•";position:absolute;inset-inline-start:0;color:var(--coral);font-weight:800}
.specrow{display:flex;justify-content:space-between;gap:12px;padding:7px 0;
  border-bottom:1px dashed var(--line);font-size:13.5px}
.specrow:last-child{border-bottom:0}
.specrow b{font-weight:700}

/* --------------------------------------------------------------------------
   CONSEILLER FLOTTANT + WHATSAPP (conseil.js)
   Present sur toutes les pages, sans appel serveur : les suggestions sortent
   du catalogue deja charge, donc instantanement.
   -------------------------------------------------------------------------- */
/* Le bouton d'aide se tient discret : une pastille avec sa seule icone,
   posee au-dessus du catalogue. Le texte ne se deplie qu'au survol (ou au
   clavier), pour ne pas manger l'ecran en permanence. `max-width` s'anime,
   contrairement a `width:auto` — d'ou cette valeur large plutot qu'une
   largeur exacte, qui aurait coupe la traduction la plus longue. */
.cs-fab{position:fixed;bottom:20px;inset-inline-end:20px;z-index:120;border:0;cursor:pointer;
  display:inline-flex;align-items:center;gap:0;padding:15px;border-radius:999px;
  background:var(--grad);color:#fff;font:800 13.5px/1 var(--font);
  box-shadow:0 14px 34px rgba(225,86,126,.42);
  transition:transform .2s cubic-bezier(.2,.8,.2,1),box-shadow .2s,padding .22s cubic-bezier(.2,.8,.2,1)}
.cs-fab:hover,.cs-fab:focus-visible{transform:translateY(-3px) scale(1.03);
  box-shadow:0 18px 42px rgba(225,86,126,.5);padding:15px 20px}
.cs-fab span{font-size:16px;line-height:1;flex:none}
.cs-fab b{max-width:0;overflow:hidden;white-space:nowrap;opacity:0;
  transition:max-width .26s cubic-bezier(.2,.8,.2,1),opacity .18s,margin .26s}
.cs-fab:hover b,.cs-fab:focus-visible b{max-width:16em;opacity:1;margin-inline-start:9px}
/* Au doigt il n'y a pas de survol : la pastille reste une pastille, et le
   panneau s'ouvre au clic comme avant. */
@media(hover:none){ .cs-fab b{display:none} }
.cs-panel{position:fixed;bottom:82px;inset-inline-end:20px;z-index:121;width:min(370px,calc(100vw - 32px));
  max-height:min(560px,calc(100vh - 120px));overflow:auto;background:#fff;border:1px solid var(--line);
  border-radius:var(--r-lg);box-shadow:0 26px 60px rgba(80,40,60,.28);padding:20px}
.cs-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
.cs-head b{font-family:var(--display);font-size:19px}
.cs-x{border:0;background:transparent;cursor:pointer;font-size:16px;color:var(--muted);padding:4px}
.cs-x:hover{color:var(--coral)}
.cs-sub{color:var(--muted);font-size:13px;margin-top:6px;line-height:1.5}
.cs-quick{margin-top:14px}
.cs-ask{display:flex;gap:8px;margin-top:14px}
.cs-ask input{flex:1;border:1px solid var(--line);border-radius:999px;padding:11px 16px;
  font:500 13.5px/1.2 var(--font);outline:none;min-width:0}
.cs-ask input:focus{border-color:var(--coral);box-shadow:0 0 0 4px rgba(242,105,107,.13)}
.cs-ask button{border:0;cursor:pointer;background:var(--grad);color:#fff;border-radius:50%;
  width:42px;height:42px;flex:none;font-size:17px}
.cs-out{margin-top:14px}
.cs-out p{font-size:13.5px;font-weight:700;margin-bottom:9px}
.cs-prods{display:grid;gap:8px}
.cs-prod{display:flex;align-items:center;gap:11px;border:1px solid var(--line);border-radius:14px;
  padding:8px 11px;color:inherit;transition:border-color .18s,transform .18s}
.cs-prod:hover{border-color:var(--coral);transform:translateX(2px)}
.cs-prod img{width:42px;height:42px;object-fit:contain;flex:none}
.cs-prod span{display:flex;flex-direction:column;gap:2px;min-width:0}
.cs-prod b{font-size:13px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cs-prod i{font-style:normal;font-size:11.5px;color:var(--muted)}
.cs-all{display:inline-block;margin-top:10px;font:700 12.5px/1 var(--font);color:var(--coral)}
.cs-btn{margin-top:10px;padding:10px 16px;font-size:13px}
.cs-wa{width:100%;justify-content:center;margin-top:16px;padding:12px}
.cs-note{margin-top:10px;font-size:10.5px;color:var(--muted);text-align:center;line-height:1.45}
@media(max-width:520px){
  .cs-panel{inset-inline:16px;width:auto;bottom:78px}
}

/* --------------------------------------------------------------------------
   EN-TETE SUR TELEPHONE
   Les trois langues et les quatre boutons prenaient 355 px, pour 328 de place
   sur un telephone de 360 : le logo, lui, etait ecrase a ZERO de large (la
   regle generale `img{max-width:100%}` le laissait fondre avec son lien). On
   le protege, et le choix de langue se replie sur la langue active — une
   pastille qui deroule les deux autres au toucher (shell.js).
   -------------------------------------------------------------------------- */
@media(max-width:520px){
  .nav{gap:10px}
  .nav > a:first-child{flex:none;display:block}
  .nav .logo{height:44px;width:auto;max-width:none}
  .nav-tools{gap:6px;margin-inline-start:auto}
  .lang{position:relative;overflow:visible;flex:none;border-radius:14px}
  .lang button{min-width:46px;min-height:44px;padding:0 10px;border-radius:13px}
  .lang:not(.ouvert) button:not(.on){display:none}
  .lang.ouvert{z-index:60}
  .lang.ouvert button:not(.on){position:absolute;inset-inline:0;
    top:calc(var(--rang,1) * 50px);background:#fff;color:var(--ink);
    border:1px solid var(--line);box-shadow:var(--shadow-sm)}
  .lang button.on::after{content:"▾";font-size:10px;margin-inline-start:3px;opacity:.85}
}

/* --------------------------------------------------------------------------
   RECHERCHE DANS LE HEADER + PANIER LATERAL
   -------------------------------------------------------------------------- */
.hs-box{position:absolute;inset-inline:0;top:100%;background:rgba(255,251,247,.98);
  backdrop-filter:blur(14px);border-bottom:1px solid var(--line);padding:14px clamp(16px,4vw,34px);
  display:none}
.hs-box.on{display:block}
.hs-box input{width:100%;max-width:640px;margin:0 auto;display:block;border:1px solid var(--line);
  border-radius:999px;padding:12px 20px;font:600 15px/1.2 var(--font);outline:none}
.hs-box input:focus{border-color:var(--coral);box-shadow:0 0 0 4px rgba(242,105,107,.13)}
header{position:sticky}

.dr-wrap{position:fixed;inset:0;z-index:200;pointer-events:none}
.dr-wrap.on{pointer-events:auto}
.dr-veil{position:absolute;inset:0;background:rgba(42,34,48,.45);opacity:0;transition:opacity .28s}
.dr-wrap.on .dr-veil{opacity:1}
.dr-panel{position:absolute;inset-block:0;inset-inline-end:0;width:min(400px,100vw);
  background:var(--bg);display:flex;flex-direction:column;box-shadow:-20px 0 60px rgba(80,40,60,.25);
  transform:translateX(100%);transition:transform .32s cubic-bezier(.2,.8,.2,1)}
html[dir="rtl"] .dr-panel{transform:translateX(-100%)}
.dr-wrap.on .dr-panel{transform:none}
.dr-head{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:18px 20px;border-bottom:1px solid var(--line)}
.dr-head b{font-family:var(--display);font-size:20px}
.dr-body{flex:1;overflow:auto;padding:16px 20px}
.dr-line{display:grid;grid-template-columns:52px 1fr auto;gap:12px;align-items:center;
  padding:11px 0;border-bottom:1px solid var(--line)}
.dr-line img{width:52px;height:52px;object-fit:contain}
.dr-info b{display:block;font-size:13.5px;font-weight:700}
.dr-info i{font-style:normal;font-size:11.5px;color:var(--muted)}
.dr-info .qty{margin-top:7px}
.dr-price{font:800 14.5px/1 var(--font);white-space:nowrap}
.dr-empty{text-align:center;padding:50px 10px;color:var(--muted)}
.dr-empty div{font-size:46px}
.dr-empty p{margin:10px 0 20px;font-size:14px}
.dr-foot{padding:18px 20px;border-top:1px solid var(--line);background:#fff;display:grid;gap:10px}
.dr-tot{display:flex;justify-content:space-between;align-items:baseline;
  font-family:var(--display);font-size:21px}
.dr-foot .btn{width:100%;justify-content:center}

/* Suivi de commande */
.track{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:20px;
  box-shadow:var(--shadow-sm);margin-top:22px}
.track h3{font-family:var(--display);font-size:19px}
.track .row2{display:flex;gap:9px;margin-top:12px;flex-wrap:wrap}
.track input{flex:1;min-width:180px;border:1px solid var(--line);border-radius:999px;
  padding:11px 17px;font:600 14px/1.2 var(--font);outline:none;text-transform:uppercase}
.track input:focus{border-color:var(--coral);box-shadow:0 0 0 4px rgba(242,105,107,.13)}
.track .res{margin-top:14px}

/* Ligne de panier heritee d'une ancienne version : plus commandable, on la
   signale clairement au lieu de la laisser disparaitre en silence. */
.cart-line.bad-line{border-color:#F5BDBD;background:#FFF8F8}
.line-warn{grid-column:1/-1;margin-top:8px;font:600 11.5px/1.4 var(--font);color:#a3323c}

/* --------------------------------------------------------------------------
   COMPTE CLIENT (compte.js) — icone profil a cote du panier
   -------------------------------------------------------------------------- */
.ac-panel{inset-inline-end:20px;bottom:auto;top:74px}
#acBtn{position:relative}
.ac-dot{position:absolute;top:-2px;inset-inline-end:-2px;width:10px;height:10px;border-radius:50%;
  background:var(--green);border:2px solid #fff}
.ac-form .fld:first-child{margin-top:4px}
.ac-go{width:100%;justify-content:center;margin-top:16px}
.ac-err{margin-top:12px;background:#FDE7E7;color:#a3323c;border-radius:12px;
  padding:10px 13px;font:600 12.5px/1.45 var(--font)}
.ac-switch{margin-top:14px;text-align:center;font-size:12.5px;color:var(--muted)}
.ac-switch button{border:0;background:transparent;cursor:pointer;color:var(--coral);
  font:800 12.5px/1 var(--font);text-decoration:underline;text-underline-offset:3px}
.ac-hi{font-size:15px;margin-top:6px}
.ac-hi b{font-family:var(--display);font-size:19px;display:block;margin-top:2px}
.ac-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:14px}
.ac-stats div{background:#FFF6F3;border-radius:14px;padding:11px 8px;text-align:center}
.ac-stats span{display:block;font:800 17px/1 var(--font);color:var(--coral)}
.ac-stats i{font-style:normal;font-size:10px;color:var(--muted);letter-spacing:.04em}
.ac-h{margin-top:20px;font:800 11.5px/1 var(--font);letter-spacing:.12em;
  text-transform:uppercase;color:var(--berry)}
.ac-habits{margin-top:10px;display:grid;gap:7px}
.ac-item{display:flex;align-items:center;gap:10px;border:1px solid var(--line);
  border-radius:13px;padding:8px 11px;color:inherit;transition:border-color .18s,transform .18s}
.ac-item:hover{border-color:var(--coral);transform:translateX(2px)}
.ac-item img{width:36px;height:36px;object-fit:contain;flex:none}
.ac-ph{font-size:24px;width:36px;text-align:center;flex:none}
.ac-item span{display:flex;flex-direction:column;min-width:0;flex:1}
.ac-item b{font-size:12.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ac-item i{font-style:normal;font-size:11px;color:var(--muted)}
.ac-item em{font-style:normal;font:800 10.5px/1 var(--font);color:var(--coral);white-space:nowrap}
.ac-none,.ac-load{color:var(--muted);font-size:12.5px;text-align:center;padding:14px 4px}
.ac-out{width:100%;margin-top:14px}

/* Suggestion personnalisee sur l'accueil */
.sugg{display:flex;align-items:center;gap:16px;flex-wrap:wrap;background:#fff;
  border:1px solid var(--line);border-radius:var(--r-lg);padding:18px 22px;
  box-shadow:var(--shadow-sm);margin-top:22px}
.sugg .k{font:800 10.5px/1 var(--font);letter-spacing:.14em;text-transform:uppercase;color:var(--berry)}
.sugg img{width:58px;height:58px;object-fit:contain;flex:none}
.sugg .txt{flex:1;min-width:170px}
.sugg .txt b{display:block;font-family:var(--display);font-size:19px;margin-top:3px}
.sugg .txt i{font-style:normal;font-size:12.5px;color:var(--muted)}


/* ══════════════════════════════════════════════════════════════════════════
   TÉLÉPHONE — relevé du 05/09/2026 sur iPhone (390 × 844)

   Trois défauts mesurés, corrigés ici et NULLE PART AILLEURS (tout est sous
   media query : l'affichage large ne bouge pas d'un pixel).

   1. Le premier produit du catalogue commençait à 787 px du haut — un écran
      entier de filtres avant la moindre bouteille. Ils passent dans un tiroir
      (voir assets/js/filtres-mobile.js).
   2. 240 textes sous 12 px : marque, contenance, badges. Illisibles à bout de
      bras, et c'est justement l'information qui fait choisir.
   3. 45 zones tactiles sous 44 px de haut — la taille en dessous de laquelle
      un doigt rate sa cible une fois sur trois.
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 700px) {

  /* ── La barre compacte, seule chose qui reste à l'écran ──────────────── */
  .fmob {
    position: sticky;
    top: 0;
    z-index: 30;
    background: rgba(255, 255, 255, .96);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--line);
    padding: 9px 0;
  }
  .fmob-in { display: flex; gap: 9px; align-items: center; }
  .fmob .fsearch { flex: 1; min-width: 0; }
  .fmob .fsearch input { width: 100%; min-height: 46px; font-size: 16px; }

  .fmob-b {
    flex: none;
    display: inline-flex; align-items: center; gap: 7px;
    min-height: 46px; padding: 0 16px;
    border: 1px solid var(--line); border-radius: 999px;
    background: #fff; color: var(--ink);
    font: 700 14px/1 var(--font); cursor: pointer;
  }
  .fmob-b.on { background: var(--grad); border-color: transparent; color: #fff; }
  .fmob-n {
    min-width: 20px; height: 20px; padding: 0 5px;
    border-radius: 999px; background: rgba(255, 255, 255, .3);
    display: grid; place-items: center;
    font: 800 11.5px/1 var(--font);
  }

  /* ── Le tiroir ───────────────────────────────────────────────────────── */
  .ftiroir-voile { position: fixed; inset: 0; z-index: 60; background: rgba(28, 18, 26, .45); }
  .filters.ftiroir {
    position: fixed;
    inset-inline: 0;
    bottom: 0;
    z-index: 61;
    max-height: 82vh;
    overflow: auto;
    /* `overscroll-behavior` empêche le catalogue de défiler derrière le
       tiroir quand on arrive au bout de la liste des filtres. */
    overscroll-behavior: contain;
    background: #fff;
    border-radius: 22px 22px 0 0;
    box-shadow: 0 -14px 44px rgba(43, 30, 42, .26);
    padding: 0 16px calc(16px + env(safe-area-inset-bottom));
    transform: translateY(100%);
    /* `visibility` en plus de la translation : sans elle le tiroir reste
       atteignable au clavier alors qu'il est hors de l'écran. */
    visibility: hidden;
    transition: transform .28s cubic-bezier(.2, .8, .2, 1), visibility .28s;
  }
  .filters.ftiroir.ouvert { transform: translateY(0); visibility: visible; }
  @media (prefers-reduced-motion: reduce) {
    .filters.ftiroir { transition: none; }
  }

  .ftiroir-tete {
    position: sticky; top: 0; z-index: 2;
    display: flex; align-items: center; justify-content: space-between;
    padding: 15px 0 11px; margin-bottom: 4px;
    background: #fff; border-bottom: 1px solid var(--line);
  }
  .ftiroir-titre { font: 700 17px/1.2 var(--font); }
  .ftiroir-x {
    width: 44px; height: 44px; border: 0; border-radius: 50%;
    background: var(--soft, #F6EEF0); color: var(--muted);
    font-size: 17px; cursor: pointer;
  }
  .ftiroir-pied {
    position: sticky; bottom: 0;
    display: flex; gap: 10px; align-items: center;
    padding: 12px 0 4px; margin-top: 14px;
    background: linear-gradient(180deg, rgba(255,255,255,0), #fff 24%);
  }
  .ftiroir-raz {
    border: 0; background: transparent; color: var(--muted);
    font: 700 14px/1 var(--font); min-height: 48px; padding: 0 12px; cursor: pointer;
  }
  .ftiroir-ok {
    flex: 1; border: 0; border-radius: 14px; min-height: 48px;
    background: var(--grad); color: #fff;
    font: 800 15px/1 var(--font); cursor: pointer;
  }
  /* Dans le tiroir, chaque groupe respire : c'est une liste de choix, plus
     une barre d'outils compressée. */
  .filters.ftiroir .fbar + .fbar { margin-top: 18px; }
  .filters.ftiroir .fsub { padding-top: 16px; }
  .filters.ftiroir .flab { display: block; width: 100%; margin-bottom: 9px; }
  .filters.ftiroir .fcount { display: none; }

  /* ── 44 px partout où l'on tape ──────────────────────────────────────── */
  .chip { min-height: 44px; padding: 11px 16px; }
  .chips.sm .chip { min-height: 44px; padding: 10px 15px; font-size: 13.5px; }
  select.fsel { min-height: 46px; font-size: 15px; }
  .freset { min-height: 44px; }

  /* ── Lisible à bout de bras ──────────────────────────────────────────── */
  /* Ces tailles ne sont pas de la coquetterie : la marque, la contenance et
     le prix sont exactement ce qui fait choisir entre deux flacons. */
  .pcard .br { font-size: 12.5px; }
  .pcard .pr small { font-size: 12.5px; }
  .pcard .vols, .pcard .pack { font-size: 12px; }
  .fam-dot { font-size: 12px; }
  .tag.new { font-size: 12px; padding: 5px 10px; }
  .tbc { font-size: 12px; }
  .chip .n { font-size: 12px; }

  /* `display:grid` sur la pastille battait la règle par défaut de [hidden] :
     le compteur affichait « 0 » au lieu de disparaître. */
  .fmob-n[hidden] { display: none; }

  /* ── Deux colonnes : 88 produits ne se parcourent pas un par écran ───── */
  /* Une seule fiche tenait à l'écran. Pour choisir, il faut comparer, donc
     voir au moins deux flacons en même temps. */
  .pgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px; margin-top: 16px; }
  .pcard .ph { height: 148px; }
  .pcard .body { padding: 11px 12px 13px; }
  .pcard .nm { font-size: 13.5px; margin-top: 4px; }
  .pcard .pr { font-size: 16.5px; }
  .pcard .ft { margin-top: 9px; gap: 8px; }
  .pcard .add { width: 34px; height: 34px; border-radius: 10px; font-size: 16px; }
  .pcard .vols { gap: 4px; }
  .pcard .tag { top: 8px; inset-inline-start: 8px; padding: 4px 8px; }

  /* ── Le champ de recherche ne doit pas faire zoomer l'écran ──────────── */
  /* iOS zoome automatiquement sur tout champ dont le texte fait moins de
     16 px, et ne dézoome jamais tout seul : la page reste de travers. */
  input, select, textarea { font-size: 16px; }
}

/* ==========================================================================
   FLECHES
   Elles etaient ecrites dans le texte — « לקנייה עכשיו → » — donc elles
   pointaient a droite meme en hebreu, ou l'on lit de droite a gauche : la
   fleche du bouton principal renvoyait visuellement en arriere. Et comme le
   caractere vivait dans la traduction, il fallait y penser dans les trois
   langues, a chaque nouvelle chaine.
   Elle est desormais posee par le CSS, sur un pseudo-element, et le
   dictionnaire ne contient plus que du texte. Le retournement est automatique
   parce que vsApplyI18n() ecrit dir="rtl" ou "ltr" sur <html> : le navigateur
   rebascule la regle tout seul, y compris quand on change de langue sans
   recharger la page.
   Le glyphe change plutot que d'etre retourne par transform : un caractere
   mis en miroir se dessine parfois de travers selon la police, alors que
   « ← » est un vrai glyphe dessine pour ce sens.
   ========================================================================== */
.fl::after,
.fl-seule::after{content:"\2192";display:inline-block;line-height:1}
[dir="rtl"] .fl::after,
[dir="rtl"] .fl-seule::after{content:"\2190"}
/* `.fl` suit un texte : il lui faut une respiration, posee en marge
   logique pour quelle bascule de cote elle aussi. `.fl-seule` est un
   bouton dont la fleche est tout le contenu (la pastille des cartes,
   l'envoi du conseiller) : elle y est deja centree, une marge la
   decalerait. */
.fl::after{margin-inline-start:.4em}
/* Sauf dans un conteneur flex, ou l'espacement vient deja du `gap`. */
.btn.fl::after,
.adb-cta.fl::after,
.acm-submit.fl::after{margin-inline-start:0}
/* Fleche de retour : elle montre le debut de la lecture, donc l'inverse. */
.fl-retour::before{content:"\2190";display:inline-block;line-height:1}
[dir="rtl"] .fl-retour::before{content:"\2192"}
.fl-retour:not(.pdp-back)::before{margin-inline-end:.4em}

/* ==========================================================================
   FOCUS CLAVIER
   Huit `outline:none` retiraient l'anneau du navigateur sur les champs et les
   listes, et une seule regle `:focus-visible` le remplacait, sur les icones
   sociales du pied de page. Qui navigue au clavier ne savait donc jamais ou
   il se trouvait. On remet un anneau unique, sur tous les controles.
   `:focus-visible` et non `:focus` : la souris ne declenche rien, le clavier
   toujours. L'anneau est encre plutot que corail : aucune couleur de la
   marque n'atteint 3:1 a la fois sur le creme, sur le pied de page sombre et
   sur les bandeaux coral — l'encre y arrive, et le blanc prend le relais sur
   les fonds sombres.
   ========================================================================== */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible{outline:3px solid var(--ink);outline-offset:2px}

/* Fonds sombres ou satures : l'anneau encre s'y noierait. */
footer a:focus-visible,
footer button:focus-visible,
.adband a:focus-visible,
.adband button:focus-visible,
.revcta a:focus-visible,
#csFab:focus-visible,
.cs-wa:focus-visible,
.btn-primary:focus-visible,
.btn-green:focus-visible{outline-color:#FFFFFF;outline-offset:3px}

/* ==========================================================================
   IMAGES
   Les balises <img> portent maintenant leurs dimensions reelles, pour que le
   navigateur reserve la place avant d'avoir telecharge le fichier. Ces
   attributs valent aussi largeur et hauteur CSS : sans le `auto` ci-dessous
   ils imposeraient la taille du fichier source (760 px pour un logo de
   marque) au lieu du cadrage prevu juste au-dessus. Le rapport, lui, reste
   connu : c'est tout ce qu'on cherchait.
   ========================================================================== */
.brands img,
.brandcard .lg img,
.story-art img{width:auto;height:auto}
.hero-art img{width:auto}

/* ==========================================================================
   ANNONCE « BIENTÔT » — la ligne en tête de chaque page (voir shell.js)
   Même nuit violette que l'affiche de l'accueil : les deux se reconnaissent.
   Au-dessus de l'en-tête, mais pas collante : elle part au premier défilement
   et laisse l'en-tête seul en haut de l'écran.
   ========================================================================== */
.annonce-bt{position:relative;display:flex;align-items:center;justify-content:center;
  min-height:40px;padding:6px 52px;background:#1E0F2B;color:#fff;
  font-size:14px;line-height:1.35;text-align:center}
.annonce-bt-lien{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:4px 10px;padding:4px 6px;border-radius:10px;color:inherit;text-decoration:none}
.annonce-bt-lien:hover .annonce-bt-marque{text-decoration:underline;text-underline-offset:3px}
.annonce-bt-points{display:inline-flex;gap:4px}
.annonce-bt-points i{width:9px;height:9px;border-radius:50%;background:var(--t);
  box-shadow:0 0 0 1.5px rgba(255,255,255,.28)}
.annonce-bt b{font-weight:600;color:#F7A8BF}
.annonce-bt-marque{font-family:var(--display);letter-spacing:.04em}
.annonce-bt-txt{color:rgba(255,255,255,.82)}
.annonce-bt-x{position:absolute;inset-inline-end:6px;top:50%;transform:translateY(-50%);
  width:40px;height:40px;border:0;border-radius:50%;background:transparent;
  color:#fff;font-size:22px;line-height:1;cursor:pointer}
.annonce-bt-x:hover{background:rgba(255,255,255,.12)}
.annonce-bt-lien:focus-visible,.annonce-bt-x:focus-visible{outline:2px solid #F7A8BF;outline-offset:2px}
@media (max-width:560px){
  .annonce-bt{font-size:13px;padding-inline:12px 48px}
  .annonce-bt-txt{display:none}
}