/* ============================================================
   French Coffee Shop Gambetta — Bordeaux
   Feuille de style principale
   ============================================================ */

:root{
  --cream:      #FEFDFB;
  --cream-2:    #FCF5EE;
  --dark:       #2C2E2D;
  --dark-soft:  #3A3D3B;
  --tan:        #DDB892;
  --tan-dark:   #C39A72;
  --sage:       #D0D5D2;
  --text:       #333333;
  --muted:      #6E6E6E;
  --line:       #E7E2DB;
  --white:      #FFFFFF;

  --maxw: 1280px;
  --pad: clamp(1.25rem, 4vw, 4rem);
  --header-h: 86px;

  --font-body: "Alegreya Sans", "Helvetica Neue", Arial, sans-serif;
  --font-script: "Courgette", "Segoe Script", cursive;
  --font-logo: "Pacifico", "Brush Script MT", cursive;

  --radius: 10px;
  --shadow: 0 10px 30px rgba(44,46,45,.08);
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--cream);
  color:var(--text);
  font-family:var(--font-body);
  font-size:1.0625rem;
  line-height:1.65;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit}
button{font-family:inherit}
[hidden]{display:none!important}

/* ---------- Typo ---------- */
h1,h2,h3,h4{
  font-family:var(--font-body);
  font-weight:900;
  color:var(--dark);
  text-transform:uppercase;
  letter-spacing:-.01em;
  line-height:1.02;
  margin:0;
}
h1{font-size:clamp(2.6rem,7vw,5rem)}
h2{font-size:clamp(1.9rem,4.4vw,3.25rem)}
h3{font-size:clamp(1.1rem,2vw,1.4rem);letter-spacing:0;text-transform:none;font-weight:800}
p{margin:0 0 1.1em}
p:last-child{margin-bottom:0}
.script{font-family:var(--font-script);font-weight:600;text-transform:none;letter-spacing:0;font-weight:600}

/* ---------- Layout ---------- */
.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad)}
.section{padding-block:clamp(3.5rem,7vw,6.5rem)}
.section--cream{background:var(--cream-2)}
.section--dark{background:var(--dark);color:#EDE8E1}
.section--dark h2,.section--dark h3{color:var(--white)}
.section--tight{padding-block:clamp(2.5rem,5vw,4rem)}

.grid{display:grid;gap:clamp(1.25rem,2.5vw,2rem)}
.grid-2{grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr))}
.grid-3{grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr))}
.grid-4{grid-template-columns:repeat(auto-fit,minmax(min(100%,215px),1fr))}
.split{display:grid;grid-template-columns:1fr;gap:clamp(2rem,4vw,4rem);align-items:center}
@media(min-width:900px){.split{grid-template-columns:1fr 1fr}.split--wide-text{grid-template-columns:.85fr 1.15fr}}

/* ---------- Titre de section ---------- */
.title-center{text-align:center;margin-bottom:clamp(2rem,4vw,3.25rem)}
.title-center .rule{width:160px;height:2px;background:var(--tan);margin:1.5rem auto 0;border:0}
.title-center .script{display:block;font-size:clamp(1.5rem,3vw,2.1rem);color:var(--dark);margin-top:1.25rem}

.title-rule{display:flex;align-items:center;gap:1.5rem;margin-bottom:clamp(1.75rem,3vw,2.75rem)}
.title-rule::after{content:"";flex:1;height:1px;background:var(--tan)}

/* ---------- Boutons & liens ---------- */
.btn{
  display:inline-flex;align-items:center;gap:.6rem;
  font-weight:800;font-size:.95rem;letter-spacing:.02em;text-transform:uppercase;
  text-decoration:none;padding:.85rem 1.6rem;border-radius:6px;border:2px solid var(--dark);
  background:var(--dark);color:var(--white);
  transition:background .2s ease,color .2s ease,border-color .2s ease,transform .2s ease;
  cursor:pointer;
}
.btn:hover{background:var(--tan-dark);border-color:var(--tan-dark);transform:translateY(-2px)}
.btn--ghost{background:transparent;color:var(--dark)}
.btn--ghost:hover{background:var(--dark);color:var(--white);border-color:var(--dark)}
.btn--light{background:transparent;color:var(--white);border-color:var(--white)}
.btn--light:hover{background:var(--white);color:var(--dark);border-color:var(--white)}

.link-arrow{
  display:inline-flex;align-items:center;gap:.75rem;
  font-weight:800;text-transform:uppercase;font-size:.95rem;letter-spacing:.02em;
  text-decoration:none;color:inherit;
}
.link-arrow svg{transition:transform .25s ease}
.link-arrow:hover svg{transform:translateX(6px)}
.link-list{display:flex;flex-wrap:wrap;gap:1.5rem 2.75rem;margin-top:1.75rem}

/* ---------- Header ---------- */
.header{
  position:fixed;inset:0 0 auto 0;z-index:100;
  background:var(--dark);
  transition:background .3s ease;
}
.header__inner{
  max-width:100%;padding-inline:clamp(1rem,3vw,2rem);
  height:var(--header-h);display:flex;align-items:center;justify-content:space-between;gap:1rem;
}
.logo{display:flex;flex-direction:column;align-items:center;text-decoration:none;line-height:1;flex:0 0 auto}
.logo__mark{font-family:var(--font-logo);font-size:2rem;color:var(--white);letter-spacing:-.01em;transform:rotate(-3deg)}
.logo__sub{
  font-weight:900;font-size:.62rem;letter-spacing:.13em;color:var(--white);
  text-transform:uppercase;margin-top:.1rem;
}
.logo img{height:52px;width:auto}

.header__actions{display:flex;align-items:center;gap:.75rem}
.header .btn{padding:.7rem 1.2rem;font-size:.82rem}
.burger{
  width:52px;height:44px;border:2px solid rgba(255,255,255,.6);border-radius:6px;background:transparent;
  display:flex;flex-direction:column;justify-content:center;align-items:center;gap:5px;cursor:pointer;
}
.burger span{display:block;width:22px;height:2px;background:var(--white);transition:transform .25s,opacity .2s}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* Menu plein écran */
.menu{
  position:fixed;inset:0;z-index:99;background:var(--dark);
  padding:calc(var(--header-h) + 2rem) var(--pad) 3rem;
  overflow-y:auto;
  opacity:0;visibility:hidden;transform:translateY(-12px);
  transition:opacity .3s ease,transform .3s ease,visibility .3s;
}
.menu.is-open{opacity:1;visibility:visible;transform:none}
.menu__grid{max-width:var(--maxw);margin-inline:auto;display:grid;gap:2.5rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr))}
.menu a{text-decoration:none;color:var(--white);display:block}
.menu__head{font-weight:900;text-transform:uppercase;font-size:1.15rem;letter-spacing:.01em;margin-bottom:.9rem;color:var(--white)}
.menu__head:hover,.menu li a:hover{color:var(--tan)}
.menu ul{list-style:none;margin:0;padding:0;display:grid;gap:.55rem}
.menu li a{color:#D8D3CC;font-size:1rem;transition:color .2s}
.menu__socials{display:flex;gap:1rem;margin-top:2.5rem}

/* ---------- Fil d'ariane ---------- */
.crumb{font-size:.9rem;letter-spacing:.06em;color:var(--muted);padding-top:calc(var(--header-h) + 2.25rem)}
.crumb a{text-decoration:none}
.crumb a:hover{color:var(--tan-dark)}

/* ---------- Hero ---------- */
.hero{
  position:relative;min-height:min(88vh,760px);
  display:flex;align-items:center;justify-content:center;text-align:center;
  color:var(--white);padding:calc(var(--header-h) + 3rem) var(--pad) 4rem;
  background:var(--dark);overflow:hidden;
}
.hero__bg{position:absolute;inset:0;object-fit:cover;width:100%;height:100%}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(44,46,45,.55),rgba(44,46,45,.25) 45%,rgba(44,46,45,.6))}
.hero__inner{position:relative;z-index:2;max-width:900px}
.hero h1{color:var(--white);font-size:clamp(2.5rem,8vw,5.5rem)}
.hero__script{font-family:var(--font-script);font-weight:400;font-size:clamp(1.6rem,4vw,2.6rem);margin:.5rem 0 0}
.hero__kicker{
  display:inline-block;font-weight:800;text-transform:uppercase;letter-spacing:.22em;font-size:.8rem;
  border:1px solid rgba(255,255,255,.55);border-radius:999px;padding:.45rem 1.1rem;margin-bottom:1.5rem;
}
.hero .btn{margin-top:2.25rem}

.page-head{padding:calc(var(--header-h) + 3.5rem) 0 0;text-align:center}
.page-head .rule{width:160px;height:2px;background:var(--tan);border:0;margin:1.5rem auto 0}
.page-head .script{display:block;font-family:var(--font-script);font-weight:600;font-size:clamp(1.4rem,3vw,2rem);margin-top:1.25rem;color:var(--dark)}

/* ---------- Bandeau infos ---------- */
.infobar{background:var(--dark);color:#EDE8E1}
.infobar__inner{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:1rem 2.5rem;
  padding-block:1.35rem;text-align:center;
}
.infobar strong{color:var(--white)}
.infobar span{display:inline-flex;align-items:center;gap:.6rem;font-size:.98rem}
.infobar a{color:var(--tan);text-decoration:none;font-weight:700}
.infobar a:hover{text-decoration:underline}

/* ---------- Cartes ---------- */
.card{background:var(--white);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column;box-shadow:var(--shadow)}
.card--flat{background:transparent;box-shadow:none}
.card__media{position:relative;aspect-ratio:1/1;overflow:hidden;background:var(--sage)}
.card__media img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.card:hover .card__media img{transform:scale(1.04)}
.card__body{padding:1.25rem 1.35rem 1.6rem}
.card--flat .card__body{padding-inline:0}
.card__body h3{margin-bottom:.55rem}
.card__body .u{width:76px;height:2px;background:var(--tan);margin:.35rem 0 .85rem}
.card__body p{color:var(--muted);font-size:1rem}
.card__date{font-size:.9rem;color:var(--muted);margin-top:.75rem}

/* Cartes visuelles pleine image (En ce moment) */
.promo{
  position:relative;border-radius:var(--radius);overflow:hidden;aspect-ratio:7/5;
  display:block;color:var(--white);text-decoration:none;
  box-shadow:var(--shadow);
}
.promo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s ease}

.promo:hover img{transform:scale(1.05)}
.promo__txt{position:relative;z-index:2;padding:1.75rem}
.promo__txt strong{display:block;font-weight:900;text-transform:uppercase;font-size:clamp(1.3rem,2.4vw,1.75rem);line-height:1.05}
.promo__txt em{font-family:var(--font-script);font-style:normal;font-weight:600;font-size:1.35rem;display:block;margin-top:.35rem}

/* Vignettes catégories */
.cats{display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(1.5rem,4vw,3.5rem);margin-bottom:3rem}
.cats a{text-decoration:none;text-align:center;display:grid;gap:.75rem;justify-items:center}
.cats img{width:88px;height:88px;border-radius:10px;object-fit:cover}
.cats span{font-weight:800;color:var(--dark)}
.cats a:hover span{color:var(--tan-dark)}

/* Note encadrée */
.note{
  border:1px solid var(--tan);background:var(--cream-2);border-radius:var(--radius);
  padding:1.5rem 1.75rem;max-width:720px;margin-inline:auto;text-align:left;
}

/* ---------- Produits ---------- */
.product__media{position:relative;aspect-ratio:1/1;border-radius:var(--radius);overflow:hidden;background:var(--sage)}
.product__media img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.product:hover .product__media img{transform:scale(1.05)}
.product h3{margin-top:1rem;display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}
.product .u{width:76px;height:2px;background:var(--tan);margin:.5rem 0 .8rem}
.product p{color:var(--muted);font-size:1rem}
.leaf{color:#5F9E4A;font-size:1rem}

/* ---------- Composeur de boisson ---------- */
.builder{background:var(--dark);color:#EDE8E1;border-radius:var(--radius);padding:clamp(1.75rem,4vw,3rem);margin-top:clamp(2rem,4vw,3rem)}
.builder h3{color:var(--white);text-transform:uppercase;font-weight:900;font-size:clamp(1.4rem,3vw,2rem);text-align:center;margin-bottom:2.5rem}
.builder__step{display:grid;gap:1rem;padding-block:1.75rem;border-top:1px solid rgba(255,255,255,.18)}
.builder__step:first-of-type{border-top:0;padding-top:0}
.builder__label{display:flex;align-items:center;gap:.85rem;font-weight:900;text-transform:uppercase;letter-spacing:.04em;color:var(--white);font-size:.95rem}
.builder__num{
  width:30px;height:30px;border-radius:50%;border:2px solid var(--tan);color:var(--tan);
  display:grid;place-items:center;font-size:.9rem;flex:0 0 auto;
}
.chips{display:flex;flex-wrap:wrap;gap:.65rem}
.chip{
  border:1px solid rgba(255,255,255,.3);border-radius:999px;padding:.5rem 1.15rem;
  font-size:.95rem;background:transparent;color:#EDE8E1;cursor:pointer;transition:.2s;
}
.chip:hover{border-color:var(--tan);color:var(--tan)}
.chip.is-active{background:var(--tan);border-color:var(--tan);color:var(--dark);font-weight:700}
.builder__result{
  margin-top:1.75rem;padding-top:1.75rem;border-top:1px solid rgba(255,255,255,.18);
  text-align:center;font-family:var(--font-script);font-size:clamp(1.5rem,3.5vw,2.2rem);color:var(--tan);
}
.builder__note{text-align:center;font-size:.92rem;color:#B9B4AD;margin-top:.75rem}

/* ---------- Timeline ---------- */
.timeline{display:grid;gap:clamp(2rem,4vw,3.5rem);grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr))}
.tl__year{font-size:clamp(2.2rem,5vw,3.25rem);font-weight:900;color:var(--dark);margin:1.25rem 0 .5rem}
.tl img{border-radius:var(--radius);aspect-ratio:16/10;object-fit:cover;width:100%}
.tl p{color:var(--muted)}

/* ---------- Engagements ---------- */
.pledge{display:grid;gap:clamp(2rem,4vw,3.5rem)}
.pledge__item{display:grid;gap:1.5rem;align-items:start}
@media(min-width:820px){
  .pledge__item{grid-template-columns:440px 1fr;gap:3rem}
  .pledge__item:nth-child(even){grid-template-columns:1fr 440px}
  .pledge__item:nth-child(even) .pledge__media{order:2}
}
.pledge__media img{border-radius:var(--radius);aspect-ratio:4/3;object-fit:cover;width:100%}
.pledge h3{text-transform:uppercase;font-weight:900;font-size:clamp(1.2rem,2.4vw,1.6rem);margin-bottom:.5rem}
.pledge .u{width:76px;height:2px;background:var(--tan);margin:.75rem 0 1.1rem}

/* ---------- Horaires ---------- */
.hours{list-style:none;margin:0;padding:0;max-width:460px}
.hours li{display:flex;justify-content:space-between;gap:1rem;padding:.7rem 0;border-bottom:1px solid var(--line)}
.hours li:last-child{border-bottom:0}
.hours li.is-today{font-weight:800;color:var(--dark)}
.hours li.is-today::after{content:"aujourd’hui";font-weight:600;font-size:.8rem;color:var(--tan-dark);text-transform:uppercase;letter-spacing:.08em;margin-left:.75rem}
.hours span:first-child{color:var(--muted)}
.hours li.is-today span:first-child{color:var(--dark)}

/* ---------- Services ---------- */
.tags{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.25rem;padding:0;list-style:none}
.tags li{border:1px solid var(--line);background:var(--white);border-radius:999px;padding:.45rem 1.05rem;font-size:.95rem;color:var(--dark)}

/* ---------- Carte Google ---------- */
.map{border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);background:var(--sage)}
.map iframe{display:block;width:100%;height:clamp(320px,45vh,480px);border:0}

/* ---------- Chiffre clé ---------- */
.bignum{font-size:clamp(3.5rem,9vw,6rem);font-weight:900;color:var(--tan);line-height:.9}

/* ---------- Socials ---------- */
.socials{display:flex;gap:1rem;align-items:center;flex-wrap:wrap}
.socials a{
  width:44px;height:44px;border-radius:50%;display:grid;place-items:center;
  border:1px solid rgba(255,255,255,.28);color:var(--white);transition:.2s;
}
.socials a:hover{background:var(--tan);border-color:var(--tan);color:var(--dark)}
.socials--dark a{border-color:var(--line);color:var(--dark)}
.socials--dark a:hover{background:var(--dark);border-color:var(--dark);color:var(--white)}
.socials svg{width:20px;height:20px;fill:currentColor}

/* ---------- Footer ---------- */
.footer{background:var(--dark);color:#C9C4BD;padding-block:clamp(3rem,5vw,4.5rem) 2rem;font-size:1rem}
.footer__grid{display:grid;gap:2.5rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr))}
.footer h4{color:var(--white);font-size:1rem;letter-spacing:.02em;margin-bottom:.9rem}
.footer a{text-decoration:none;color:#C9C4BD;transition:color .2s}
.footer a:hover{color:var(--tan)}
.footer ul{list-style:none;margin:0;padding:0;display:grid;gap:.55rem}
.footer__brand{display:grid;gap:1.25rem;align-content:start}
.footer__bottom{
  margin-top:3rem;padding-top:1.5rem;border-top:1px solid rgba(255,255,255,.14);
  display:flex;flex-wrap:wrap;gap:.75rem 2rem;justify-content:space-between;font-size:.9rem;color:#9C9791;
}
.footer__legal{display:flex;flex-wrap:wrap;gap:1.5rem}
.mangerbouger{width:100%;text-align:center;font-size:.82rem;color:#8B8781;margin-top:1.5rem}

/* ---------- Divers ---------- */
.lead{font-size:clamp(1.05rem,1.7vw,1.2rem)}
.muted{color:var(--muted)}
.center{text-align:center}
.mt-2{margin-top:2rem}
.rounded{border-radius:var(--radius);overflow:hidden}
.ratio-43 img{aspect-ratio:4/3;object-fit:cover;width:100%}
.ratio-11 img{aspect-ratio:1/1;object-fit:cover;width:100%}
.skip{position:absolute;left:-9999px}
.skip:focus{left:1rem;top:1rem;z-index:200;background:var(--white);padding:.75rem 1rem;border-radius:6px}

@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
}

/* ---------- Ajustements ---------- */
.page-head--sub{padding-top:2.5rem}
.only-xs{display:none}
@media(max-width:640px){
  :root{--header-h:74px}
  .hide-xs{display:none}
  .only-xs{display:inline}
  .header .btn{padding:.6rem .9rem;font-size:.72rem;letter-spacing:.01em}
  .logo img{height:42px}
  .logo__mark{font-size:1.6rem}
  .logo__sub{font-size:.55rem}
  .burger{width:46px;height:40px}
  .hero{min-height:78vh}
  .infobar__inner{flex-direction:column;gap:.6rem}
  .cats{gap:1.5rem}
  .cats img{width:74px;height:74px}
  .footer__bottom{flex-direction:column}
}
@media(max-width:400px){
  .header .btn .only-xs{font-size:.68rem}
}

/* ============================================================
   CARTE — prix, listes, composeur de boisson
   ============================================================ */

/* --- Lignes de produits avec prix --- */
.menu-list{list-style:none;margin:0;padding:0;display:grid;gap:.15rem}
.menu-line{display:flex;align-items:baseline;gap:.75rem;padding:.7rem 0;border-bottom:1px dashed var(--line)}
.menu-line:last-child{border-bottom:0}
.menu-line__name{font-weight:700;color:var(--dark)}
.menu-line__desc{color:var(--muted);font-size:.95rem;font-weight:400}
.menu-line__dots{flex:1;border-bottom:1px dotted #CFC8BE;transform:translateY(-.25rem);min-width:1.5rem}
.menu-line__price{font-weight:800;color:var(--dark);white-space:nowrap;font-variant-numeric:tabular-nums}
.menu-line__price span{color:var(--muted);font-weight:600;font-size:.85rem;margin-right:.2rem}
.section--dark .menu-line{border-color:rgba(255,255,255,.14)}
.section--dark .menu-line__name,.section--dark .menu-line__price{color:var(--white)}
.section--dark .menu-line__desc{color:#B9B4AD}

.size-head{display:flex;justify-content:flex-end;gap:2.25rem;padding-bottom:.6rem;border-bottom:2px solid var(--tan);margin-bottom:.4rem}
.size-head span{font-weight:900;font-size:.8rem;letter-spacing:.12em;color:var(--tan-dark);text-transform:uppercase;min-width:3.2rem;text-align:right}

.price-tag{
  display:inline-flex;align-items:baseline;gap:.4rem;border:2px solid var(--tan);border-radius:8px;
  padding:.35rem .8rem;font-weight:800;color:var(--dark);font-variant-numeric:tabular-nums;
}
.price-tag b{font-size:.72rem;letter-spacing:.1em;color:var(--tan-dark)}
.price-row{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:.9rem}

/* --- Grille de saveurs (chips statiques) --- */
.flavors{display:flex;flex-wrap:wrap;gap:.5rem;padding:0;margin:.9rem 0 0;list-style:none}
.flavors li{
  border:1px solid var(--line);background:var(--white);border-radius:999px;
  padding:.45rem 1rem;font-size:.95rem;color:var(--dark);
}
.section--cream .flavors li{background:var(--white)}
.section--dark .flavors li{background:transparent;border-color:rgba(255,255,255,.25);color:#EDE8E1}
.flavors li b{color:var(--tan-dark);font-weight:800;font-size:.8rem;margin-left:.35rem}

.subtitle{font-weight:900;text-transform:uppercase;letter-spacing:.06em;font-size:.85rem;color:var(--tan-dark);margin:0 0 .5rem}

/* ============================================================
   LE COMPOSEUR (mixer)
   ============================================================ */
.mixer{
  --mx:#DDB892;
  --mx-glow:rgba(221,184,146,.22);
  --mx-dim:rgba(221,184,146,.16);
  --mx-shadow:rgba(221,184,146,.28);
  --mx-ring:rgba(221,184,146,.45);
  --mx-wash:rgba(221,184,146,.10);
  position:relative;border-radius:18px;overflow:hidden;color:#EDE8E1;
  background:
    radial-gradient(120% 80% at 12% 0%, var(--mx-glow), transparent 55%),
    radial-gradient(100% 90% at 100% 100%, rgba(208,213,210,.14), transparent 60%),
    var(--dark);
  box-shadow:0 24px 60px rgba(44,46,45,.22);
  border:1px solid rgba(255,255,255,.08);
}
.mixer__head{padding:clamp(1.75rem,4vw,2.75rem) clamp(1.5rem,4vw,3rem) 0;text-align:center}
.mixer__head h3{
  color:var(--white);text-transform:uppercase;font-weight:900;letter-spacing:-.01em;
  font-size:clamp(1.5rem,3.4vw,2.4rem);margin:0;
}
.mixer__head p{font-family:var(--font-script);font-size:clamp(1.2rem,2.4vw,1.6rem);color:var(--mx);margin:.4rem 0 0}

.mixer__body{padding:clamp(1.25rem,3vw,2.5rem) clamp(1.25rem,4vw,3rem) clamp(1.5rem,3vw,2.5rem);display:grid;gap:1.5rem}

.step{border:0;margin:0;padding:0}
.step__legend{
  display:flex;align-items:center;gap:.8rem;margin-bottom:.9rem;
  font-weight:900;text-transform:uppercase;letter-spacing:.05em;font-size:.95rem;color:var(--white);
}
.step__num{
  width:28px;height:28px;border-radius:50%;display:grid;place-items:center;flex:0 0 auto;
  background:var(--mx-dim);border:1.5px solid var(--mx);color:var(--mx);
  font-size:.85rem;font-weight:900;transition:.3s;
}
.step.is-done .step__num{background:var(--mx);color:var(--dark)}
.step.is-done .step__num::before{content:"✓"}
.step.is-done .step__num span{display:none}
.step__hint{margin-left:auto;font-weight:600;text-transform:none;letter-spacing:0;font-size:.85rem;color:#9C978F}

.opts{display:flex;flex-wrap:wrap;gap:.6rem}
.opt{
  position:relative;display:inline-flex;align-items:center;gap:.55rem;
  border:1.5px solid rgba(255,255,255,.22);background:rgba(255,255,255,.03);color:#EDE8E1;
  border-radius:12px;padding:.7rem 1.1rem;font-size:1rem;font-weight:600;cursor:pointer;
  transition:transform .18s ease,border-color .2s,background .2s,color .2s,box-shadow .2s;
}
.opt:hover{transform:translateY(-2px);border-color:var(--mx);color:var(--white)}
.opt:focus-visible{outline:2px solid var(--mx);outline-offset:3px}
.opt small{font-size:.78rem;color:var(--mx);font-weight:800;letter-spacing:.02em}
.opt.is-on{
  background:var(--mx);border-color:var(--mx);color:var(--dark);font-weight:800;
  box-shadow:0 8px 22px var(--mx-shadow);
}
.opt.is-on small{color:rgba(44,46,45,.7)}
.opt.is-on::after{
  content:"";position:absolute;inset:-3px;border-radius:14px;border:1.5px solid var(--mx-ring);
  animation:pop .45s ease;
}
@keyframes pop{from{transform:scale(.86);opacity:0}to{transform:scale(1);opacity:1}}
.opt--xl{padding:.9rem 1.6rem;font-size:1.15rem;font-weight:800}

.veg{
  display:inline-flex;align-items:center;gap:.65rem;cursor:pointer;
  font-size:.95rem;color:#D8D3CC;user-select:none;
}
.veg input{appearance:none;width:20px;height:20px;border-radius:6px;border:1.5px solid rgba(255,255,255,.35);cursor:pointer;transition:.2s;flex:0 0 auto}
.veg input:checked{background:var(--mx);border-color:var(--mx)}
.veg input:checked::after{content:"✓";display:grid;place-items:center;height:100%;color:var(--dark);font-size:.8rem;font-weight:900}
.veg b{color:var(--mx);font-weight:800}

/* --- Résultat --- */
.mixer__out{
  border-top:1px solid rgba(255,255,255,.12);
  background:rgba(0,0,0,.22);
  padding:clamp(1.25rem,3vw,2rem) clamp(1.25rem,4vw,3rem);
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem 2rem;
  position:sticky;bottom:0;backdrop-filter:blur(6px);
}
.mixer__label{font-size:.75rem;letter-spacing:.16em;text-transform:uppercase;color:#9C978F;font-weight:800;margin:0 0 .35rem}
.mixer__name{display:flex;flex-wrap:wrap;align-items:center;gap:.45rem;min-height:2.4rem}
.tok{
  display:inline-flex;align-items:center;
  font-family:var(--font-body);font-weight:900;text-transform:uppercase;letter-spacing:-.01em;
  font-size:clamp(1.15rem,2.6vw,1.9rem);color:var(--white);
  animation:tokIn .38s cubic-bezier(.2,.9,.3,1.4) both;
}
.tok--sep{color:var(--mx);font-weight:400;font-size:1.1rem;opacity:.8;animation:none}
.tok--ghost{color:#6C6862;font-weight:700;text-transform:none;font-size:1.05rem;letter-spacing:0;animation:none}
.tok--veg{
  font-size:.7rem;letter-spacing:.1em;background:rgba(155,208,126,.16);color:#9BD07E;
  border:1px solid rgba(155,208,126,.4);border-radius:999px;padding:.25rem .6rem;
}
@keyframes tokIn{from{opacity:0;transform:translateY(14px) scale(.92)}to{opacity:1;transform:none}}

.mixer__price{
  font-weight:900;font-size:clamp(1.8rem,4vw,2.8rem);color:var(--mx);
  font-variant-numeric:tabular-nums;line-height:1;white-space:nowrap;
}
.mixer__price small{display:block;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:#9C978F;font-weight:800;margin-bottom:.3rem}
.mixer.is-ready .mixer__out{background:var(--mx-wash)}
.mixer__ready{
  display:none;align-items:center;gap:.5rem;font-size:.78rem;font-weight:900;letter-spacing:.12em;
  text-transform:uppercase;color:var(--dark);background:var(--mx);border-radius:999px;padding:.35rem .85rem;
}
.mixer.is-ready .mixer__ready{display:inline-flex;animation:pop .4s ease}

.mixer__reset{
  background:none;border:0;color:#9C978F;font-size:.85rem;text-decoration:underline;
  cursor:pointer;padding:0;margin-top:.5rem;
}
.mixer__reset:hover{color:var(--mx)}

@media(max-width:640px){
  .mixer__out{flex-direction:column;align-items:flex-start;position:static}
  .mixer__price{align-self:flex-end}
}

/* ============================================================
   CARROUSELS
   ============================================================ */
.carou{position:relative}
.carou__track{
  display:grid;grid-auto-flow:column;
  grid-auto-columns:calc((100% - 2*clamp(1.25rem,2.5vw,2rem)) / 3);
  gap:clamp(1.25rem,2.5vw,2rem);
  overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;
  padding-bottom:.5rem;scrollbar-width:none;-ms-overflow-style:none;
}
.carou__track::-webkit-scrollbar{display:none}
.carou__track > *{scroll-snap-align:start}
@media(max-width:1000px){.carou__track{grid-auto-columns:calc((100% - clamp(1.25rem,2.5vw,2rem)) / 2)}}
@media(max-width:640px){.carou__track{grid-auto-columns:88%}}

.carou__nav{display:flex;justify-content:center;gap:.9rem;margin-top:1.75rem}
.carou__btn{
  width:48px;height:48px;border-radius:50%;border:1.5px solid var(--dark);background:transparent;
  color:var(--dark);display:grid;place-items:center;cursor:pointer;transition:.2s;
}
.carou__btn:hover{background:var(--dark);color:var(--white)}
.carou__btn:disabled{opacity:.28;cursor:default}
.carou__btn:disabled:hover{background:transparent;color:var(--dark)}
.carou__btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.section--dark .carou__btn{border-color:rgba(255,255,255,.6);color:var(--white)}
.section--dark .carou__btn:hover{background:var(--white);color:var(--dark)}

/* --- Valeurs (convivialité / générosité / gourmandise) --- */
.values{display:grid;gap:1.5rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));margin-top:2.5rem}
.value{text-align:center;padding:1.75rem 1.25rem;border:1px solid var(--line);border-radius:var(--radius);background:var(--white)}
.value h3{font-family:var(--font-script);text-transform:none;font-weight:600;font-size:clamp(1.6rem,3vw,2.1rem);color:var(--tan-dark);letter-spacing:0}
.value p{color:var(--muted);font-size:.98rem;margin-top:.5rem}

/* ============================================================
   V2 — alignement sur le site national + expérience « QR à table »
   ============================================================ */

/* --- Hero : mêmes valeurs que le national --- */
.hero{min-height:min(72vh,660px);padding:calc(var(--header-h) + 2rem) var(--pad) 3rem}
.hero::after{background:linear-gradient(180deg,rgba(44,46,45,.34),rgba(44,46,45,.12) 45%,rgba(44,46,45,.42))}
.hero h1{color:var(--cream-2);font-size:clamp(1.85rem,4.9vw,4.4rem);line-height:1;letter-spacing:-.005em}
.hero__script{color:var(--cream-2);margin:.35rem 0 0;font-size:clamp(1.15rem,2.8vw,2.5rem);line-height:1.2}
.hero__kicker{display:none}
.hero .btn{margin-top:2rem}
@media(max-width:640px){.hero{min-height:66vh}}

/* --- Accès rapide sous le hero (client assis en terrasse) --- */
.quick{background:var(--cream-2);border-bottom:1px solid var(--line)}
.quick__inner{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line)}
@media(max-width:640px){.quick__inner{grid-template-columns:repeat(2,1fr)}}
.quick a{
  background:var(--cream-2);text-decoration:none;color:var(--dark);
  display:flex;flex-direction:column;align-items:center;gap:.5rem;
  padding:1.35rem .75rem;transition:background .2s,color .2s;
}
.quick a:hover{background:var(--white);color:var(--tan-dark)}
.quick svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.quick span{font-weight:800;text-transform:uppercase;font-size:.78rem;letter-spacing:.06em;text-align:center}

/* --- La French Fidélité : bandeau clair comme le national --- */
.fid{background:var(--cream-2)}
.fid__inner{
  display:grid;gap:clamp(1.5rem,4vw,3.5rem);align-items:center;
  grid-template-columns:1fr;
}
@media(min-width:820px){.fid__inner{grid-template-columns:190px 1fr}}
.fid__phone{width:150px;max-width:100%;margin-inline:auto;display:block}
.fid h2{margin-bottom:0}

/* --- Services : plus de pastilles encadrées --- */
.services{
  list-style:none;margin:1.75rem 0 0;padding:0;
  display:grid;gap:.85rem 2rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr));
}
.services li{display:flex;align-items:center;gap:.65rem;color:var(--dark);font-weight:600;font-size:1rem}
.services li::before{
  content:"";width:7px;height:7px;border-radius:50%;background:var(--tan);flex:0 0 auto;
}

/* --- On parle de nous : cartes modernes --- */
.press{display:grid;gap:clamp(1.25rem,2.5vw,2rem);grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr))}
.press__item{
  position:relative;border-radius:14px;overflow:hidden;background:var(--dark);
  display:flex;flex-direction:column;justify-content:flex-end;min-height:340px;
  color:var(--white);text-decoration:none;box-shadow:var(--shadow);
  transition:transform .3s ease,box-shadow .3s ease;
}
.press__item:hover{transform:translateY(-6px);box-shadow:0 22px 46px rgba(44,46,45,.22)}
.press__item img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.press__item:hover img{transform:scale(1.06)}
.press__item::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(44,46,45,.1) 30%,rgba(44,46,45,.92))}
.press__txt{position:relative;z-index:2;padding:1.6rem}
.press__src{
  display:inline-block;font-size:.68rem;font-weight:900;letter-spacing:.14em;text-transform:uppercase;
  color:var(--dark);background:var(--tan);border-radius:999px;padding:.28rem .7rem;margin-bottom:.75rem;
}
.press__txt h3{color:var(--white);font-size:1.05rem;line-height:1.3;text-transform:none;font-weight:800}
.press__date{font-size:.85rem;color:#B9B4AD;margin-top:.6rem}

/* ============================================================
   MENU INTERACTIF
   ============================================================ */
.menubar{
  position:sticky;top:var(--header-h);z-index:60;
  background:rgba(254,253,251,.94);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.menubar__inner{display:flex;align-items:center;gap:1rem;padding-block:.75rem}
.menubar__tabs{display:flex;gap:.4rem;overflow-x:auto;scrollbar-width:none;flex:1}
.menubar__tabs::-webkit-scrollbar{display:none}
.menubar__tabs a{
  white-space:nowrap;text-decoration:none;color:var(--muted);font-weight:800;
  text-transform:uppercase;font-size:.78rem;letter-spacing:.05em;
  padding:.55rem .9rem;border-radius:999px;transition:.2s;
}
.menubar__tabs a:hover{color:var(--dark);background:var(--cream-2)}
.menubar__tabs a.is-current{background:var(--dark);color:var(--white)}

.search{position:relative;flex:0 0 auto;width:min(260px,42vw)}
.search input{
  width:100%;border:1.5px solid var(--line);background:var(--white);border-radius:999px;
  padding:.6rem 2.4rem .6rem 1rem;font:inherit;font-size:.95rem;color:var(--dark);
}
.search input:focus{outline:none;border-color:var(--tan);box-shadow:0 0 0 3px rgba(221,184,146,.25)}
.search svg{position:absolute;right:.85rem;top:50%;transform:translateY(-50%);width:16px;height:16px;
  fill:none;stroke:var(--muted);stroke-width:2;stroke-linecap:round;pointer-events:none}
@media(max-width:640px){
  .menubar__inner{flex-direction:column;align-items:stretch;gap:.6rem}
  .search{width:100%}
}
.menu-empty{display:none;text-align:center;color:var(--muted);padding:2rem 0}
body.is-filtering .menu-empty.is-on{display:block}
body.is-filtering section.is-hidden,body.is-filtering .menu-line.is-hidden,
body.is-filtering .product.is-hidden{display:none}

/* --- Mise en avant --- */
.hot{
  display:inline-flex;align-items:center;gap:.3rem;font-size:.66rem;font-weight:900;letter-spacing:.1em;
  text-transform:uppercase;background:var(--tan);color:var(--dark);border-radius:999px;
  padding:.2rem .55rem;margin-left:.5rem;vertical-align:middle;
}
.menu-line{transition:background .2s;border-radius:8px;padding-inline:.5rem;margin-inline:-.5rem}
.menu-line:hover{background:var(--cream-2)}
.section--cream .menu-line:hover{background:var(--white)}
.veg-note{font-size:.85rem;color:#5F9E4A;font-weight:700;display:block;margin-top:.15rem}

/* --- Bandeau final « prêt à commander » --- */
.order-cta{
  background:var(--dark);color:#EDE8E1;border-radius:16px;
  padding:clamp(1.75rem,4vw,2.75rem);text-align:center;
  background-image:radial-gradient(90% 120% at 50% 0%,rgba(221,184,146,.2),transparent 60%);
}
.order-cta h3{color:var(--white);text-transform:uppercase;font-weight:900;font-size:clamp(1.35rem,3vw,2rem)}
.order-cta p{color:#B9B4AD;max-width:520px;margin:.9rem auto 0}

.opt > span{display:block;text-align:left}
.opt em{font-style:normal;font-weight:600;font-size:.72rem;color:var(--mx);display:block;margin-top:.1rem;letter-spacing:.01em}
.opt.is-on em{color:rgba(44,46,45,.65)}

/* ============================================================
   V3 — Hero diaporama (comme la bannière du site national)
   ============================================================ */
.hero{min-height:min(78vh,700px)}
.hero__slides{position:absolute;inset:0;overflow:hidden}
.hero__slides img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity 1.4s ease;
  transform:scale(1.06);
}
.hero__slides img.is-on{opacity:1;animation:heroZoom 9s ease-out forwards}
@keyframes heroZoom{from{transform:scale(1.09)}to{transform:scale(1)}}
.hero__dots{
  position:absolute;left:50%;bottom:1.75rem;transform:translateX(-50%);z-index:3;
  display:flex;gap:.55rem;
}
.hero__dots button{
  width:9px;height:9px;border-radius:50%;border:0;padding:0;cursor:pointer;
  background:rgba(252,245,238,.45);transition:.25s;
}
.hero__dots button.is-on{background:var(--cream-2);width:26px;border-radius:999px}
@media(prefers-reduced-motion:reduce){
  .hero__slides img.is-on{animation:none;transform:none}
}
.header .btn{white-space:nowrap}
@media(max-width:640px){
  .hero__dots{bottom:1.1rem}
  .header .btn{padding:.55rem .8rem;font-size:.68rem;letter-spacing:0}
}

/* ============================================================
   V4 — carrousel pleine largeur + fidélité aux proportions du national
   ============================================================ */

/* --- Carrousel pleine largeur (desktop) --- */
.carou--full{width:100vw;max-width:100vw;margin-left:calc(50% - 50vw)}
.carou--full .carou__track{
  padding-inline:var(--pad);
  scroll-padding-inline:var(--pad);
  grid-auto-columns:clamp(300px,30vw,540px);
  gap:clamp(1rem,1.6vw,1.5rem);
}
.carou--full .promo{aspect-ratio:16/10;border-radius:14px}
@media(max-width:1000px){.carou--full .carou__track{grid-auto-columns:min(68vw,460px)}}
@media(max-width:640px){.carou--full .carou__track{grid-auto-columns:86vw}}

/* les flèches restent alignées sur le contenu */
.carou--full .carou__nav{margin-top:1.5rem}

/* --- La French Fidélité : proportions exactes du national --- */
.fid{background:var(--white);padding-block:clamp(3.5rem,7vw,100px)}
.fid__inner{grid-template-columns:1fr;gap:2rem;align-items:center}
@media(min-width:900px){
  .fid__inner{grid-template-columns:150px 1fr;gap:100px}
}
.fid__phone{width:150px;margin:0;display:block}
@media(max-width:899px){.fid__phone{margin-inline:auto}}
.fid h2{font-size:clamp(2rem,4vw,48px)}
.fid p{max-width:940px}

/* ============================================================
   V5 — pied de page compact
   ============================================================ */
.footer{padding-block:clamp(2.25rem,4vw,3rem) 1.25rem;font-size:.95rem}
.footer__grid{gap:1.75rem 2.5rem}
.footer h4{margin-bottom:.6rem;font-size:.95rem}
.footer ul{gap:.4rem}
.footer__brand{gap:.85rem}
.footer__brand .logo img{height:44px}
.footer .socials{gap:.6rem;margin-top:.25rem}
.footer .socials a{width:36px;height:36px}
.footer .socials svg{width:17px;height:17px}
.footer__bottom{margin-top:1.75rem;padding-top:1rem;font-size:.85rem}
.mangerbouger{margin-top:.9rem;font-size:.78rem}

/* horaires compacts, sans filets */
.hours--compact{max-width:none}
.hours--compact li{
  border:0;padding:.25rem 0;gap:1.25rem;
  display:flex;justify-content:space-between;align-items:baseline;
}
.hours--compact li.is-today::after{content:none}
.hours--compact span:first-child{color:#C9C4BD}
.hours--compact span:last-child{color:var(--white);font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}

/* ============================================================
   Signature Webza Digital
   ============================================================ */
.credit-row{text-align:center;margin:1.1rem 0 0}
.credit{
  display:inline-flex;align-items:center;gap:.6rem;
  text-decoration:none;opacity:.85;transition:opacity .25s ease;
}
.credit:hover,.credit:focus-visible{opacity:1}
.credit__by,.credit__name{
  font-size:.72rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
  white-space:nowrap;line-height:1;
}
.credit__by{color:#8B8781}
.credit__name{color:var(--tan);transition:color .25s ease}
.credit:hover .credit__name{color:var(--cream-2)}
.credit__mark{
  width:22px;height:22px;border-radius:50%;display:block;flex:0 0 auto;
  transition:transform .25s ease;
}
.credit:hover .credit__mark{transform:scale(1.1)}
@media(max-width:400px){
  .credit{gap:.45rem}
  .credit__by,.credit__name{font-size:.66rem;letter-spacing:.12em}
}

/* ============================================================
   MENU UNIQUE — style « carte au QR code »
   ============================================================ */
.mtabs{
  position:sticky;top:var(--header-h);z-index:70;
  background:rgba(254,253,251,.96);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
}
.mtabs__scroll{
  display:flex;gap:.5rem;overflow-x:auto;scrollbar-width:none;
  padding:.85rem var(--pad);scroll-padding-inline:var(--pad);
}
.mtabs__scroll::-webkit-scrollbar{display:none}
.mtabs a{
  white-space:nowrap;text-decoration:none;flex:0 0 auto;
  border:1.5px solid var(--line);border-radius:999px;background:var(--white);
  padding:.55rem 1.05rem;font-size:.9rem;font-weight:700;color:var(--dark);
  transition:background .2s,color .2s,border-color .2s,transform .2s;
}
.mtabs a:hover{border-color:var(--tan)}
.mtabs a.is-current{background:var(--dark);border-color:var(--dark);color:var(--white)}

.msearch{padding:0 var(--pad) .85rem;position:relative}
.msearch input{
  width:100%;border:1.5px solid var(--line);background:var(--white);border-radius:999px;
  padding:.7rem 2.6rem .7rem 1.1rem;font:inherit;font-size:.95rem;color:var(--dark);
}
.msearch input:focus{outline:none;border-color:var(--tan);box-shadow:0 0 0 3px rgba(221,184,146,.25)}
.msearch svg{position:absolute;right:calc(var(--pad) + .9rem);top:50%;transform:translateY(-60%);
  width:17px;height:17px;fill:none;stroke:var(--muted);stroke-width:2;stroke-linecap:round;pointer-events:none}

.msec{padding-block:clamp(2rem,4vw,3rem);scroll-margin-top:calc(var(--header-h) + 130px)}
.msec:nth-child(even){background:var(--cream-2)}
.msec__head{display:flex;align-items:baseline;gap:1rem;margin-bottom:.35rem}
.msec__head h2{font-size:clamp(1.5rem,3.4vw,2.1rem)}
.msec__note{color:var(--muted);font-size:.98rem;margin:0 0 1.5rem;max-width:70ch}

.mitems{display:grid;gap:0;grid-template-columns:1fr}
@media(min-width:900px){.mitems{grid-template-columns:1fr 1fr;column-gap:clamp(2rem,4vw,4rem)}}

.mitem{
  display:grid;grid-template-columns:84px 1fr;gap:1rem;align-items:start;
  padding:1.05rem 0;border-bottom:1px solid var(--line);
}
@media(max-width:420px){.mitem{grid-template-columns:70px 1fr;gap:.85rem}}
.mitem:last-child{border-bottom:0}
.msec:nth-child(even) .mitem{border-color:#EDE5DA}
.mitem__name{font-weight:800;color:var(--dark);font-size:1.02rem;line-height:1.25}
.mitem__desc{color:var(--muted);font-size:.93rem;margin:.3rem 0 0;line-height:1.45}
.mitem__price{margin:.5rem 0 0;font-weight:800;color:var(--dark);font-variant-numeric:tabular-nums;font-size:.98rem}
.mitem__price s{color:var(--muted);font-weight:600;text-decoration:none;font-size:.82rem;margin-right:.15rem}
.mitem__price em{font-style:normal;color:var(--muted);font-weight:600;font-size:.82rem;margin:0 .15rem 0 .55rem}
.mitem__tags{display:flex;flex-wrap:wrap;gap:.35rem;margin-top:.5rem}
.mtag{
  font-size:.72rem;font-weight:700;border-radius:999px;padding:.2rem .6rem;
  background:var(--cream-2);color:var(--dark);border:1px solid var(--line);
}
.msec:nth-child(even) .mtag{background:var(--white)}
.mtag--veg{background:rgba(95,158,74,.1);border-color:rgba(95,158,74,.35);color:#4C8A3B}
.mtag--hot{background:var(--tan);border-color:var(--tan);color:var(--dark)}
.mitem__thumb{
  width:84px;height:84px;border-radius:12px;object-fit:cover;display:block;flex:0 0 auto;
  background:var(--sage);
}
@media(max-width:420px){.mitem__thumb{width:70px;height:70px}}

/* bandeau promotionnel inséré dans la liste */
.mbanner{
  grid-column:1/-1;margin:1.5rem 0;border-radius:16px;overflow:hidden;
  background:var(--dark);color:#EDE8E1;display:grid;grid-template-columns:1fr;
  background-image:radial-gradient(100% 130% at 100% 0%,rgba(221,184,146,.22),transparent 60%);
}
.mbanner__in{padding:clamp(1.4rem,3vw,2rem)}
.mbanner__kicker{
  display:inline-block;font-size:.68rem;font-weight:900;letter-spacing:.14em;text-transform:uppercase;
  background:var(--tan);color:var(--dark);border-radius:999px;padding:.24rem .65rem;margin-bottom:.75rem;
}
.mbanner h3{color:var(--white);text-transform:none;font-size:clamp(1.15rem,2.4vw,1.5rem);font-weight:800;line-height:1.25}
.mbanner p{color:#B9B4AD;font-size:.95rem;margin:.5rem 0 0;max-width:52ch}
.mbanner .btn{margin-top:1.1rem;padding:.65rem 1.2rem;font-size:.8rem}

/* choix (arômes, perles…) */
.mchoice{grid-column:1/-1;margin:.5rem 0 1.5rem}
.mchoice h4{font-size:.78rem;font-weight:900;letter-spacing:.1em;text-transform:uppercase;color:var(--tan-dark);margin:0 0 .6rem}

.msec__foot{
  margin:1.5rem 0 0;padding:.9rem 1.1rem;border:1px solid var(--tan);border-radius:10px;
  background:rgba(221,184,146,.12);color:var(--dark);font-size:.95rem;
}
.msec__foot strong{font-weight:800}
.mchoice h4{margin-top:.5rem}

/* ============================================================
   MA COMMANDE — ajout d'articles + bulle flottante
   ============================================================ */
.mitem{grid-template-columns:84px 1fr auto}
@media(max-width:420px){.mitem{grid-template-columns:70px 1fr auto;gap:.7rem}}

.madd{
  align-self:center;flex:0 0 auto;
  width:38px;height:38px;border-radius:50%;cursor:pointer;
  border:1.5px solid var(--dark);background:transparent;color:var(--dark);
  display:grid;place-items:center;transition:.18s;
}
.madd:hover{background:var(--dark);color:var(--white);transform:scale(1.08)}
.madd:active{transform:scale(.94)}
.madd svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round}
.madd.is-added{background:var(--tan);border-color:var(--tan);color:var(--dark)}
.mitem__qty{
  display:none;min-width:20px;height:20px;border-radius:999px;background:var(--tan);color:var(--dark);
  font-size:.72rem;font-weight:900;align-items:center;justify-content:center;padding:0 .35rem;
  margin-left:.4rem;vertical-align:middle;
}
.mitem.has-qty .mitem__qty{display:inline-flex}

/* --- bulle flottante --- */
.cart{position:fixed;right:1.25rem;bottom:1.25rem;z-index:90;display:flex;flex-direction:column;align-items:flex-end;gap:.75rem}
.cart__fab{
  position:relative;border:0;cursor:pointer;border-radius:999px;
  background:var(--dark);color:var(--cream-2);
  padding:.9rem 1.25rem;display:inline-flex;align-items:center;gap:.6rem;
  font-weight:800;font-size:.9rem;letter-spacing:.02em;
  box-shadow:0 14px 34px rgba(44,46,45,.32);
  transform:translateY(120%);opacity:0;pointer-events:none;
  transition:transform .35s cubic-bezier(.2,.9,.3,1.2),opacity .3s,background .2s;
}
.cart.has-items .cart__fab{transform:none;opacity:1;pointer-events:auto}
.cart__fab:hover{background:#3A3D3B}
.cart__fab svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.cart__count{
  background:var(--tan);color:var(--dark);border-radius:999px;
  min-width:22px;height:22px;display:grid;place-items:center;padding:0 .4rem;
  font-size:.78rem;font-weight:900;
}
.cart__fab.pulse{animation:cartPulse .45s ease}
@keyframes cartPulse{0%{transform:scale(1)}45%{transform:scale(1.12)}100%{transform:scale(1)}}

.cart__panel{
  width:min(360px,calc(100vw - 2.5rem));max-height:min(62vh,520px);
  background:var(--dark);color:#EDE8E1;border-radius:16px;overflow:hidden;
  box-shadow:0 24px 60px rgba(44,46,45,.4);
  display:none;flex-direction:column;
}
.cart.is-open .cart__panel{display:flex;animation:cartIn .3s ease}
@keyframes cartIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.cart__head{
  padding:1.1rem 1.25rem .85rem;border-bottom:1px solid rgba(255,255,255,.12);
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
}
.cart__head h3{color:var(--white);font-size:1rem;text-transform:uppercase;font-weight:900;letter-spacing:.04em}
.cart__close{background:none;border:0;color:#9C978F;font-size:1.5rem;line-height:1;cursor:pointer;padding:0 .2rem}
.cart__close:hover{color:var(--white)}
.cart__list{list-style:none;margin:0;padding:.5rem .75rem;overflow-y:auto;flex:1}
.cart__list li{
  display:flex;align-items:center;gap:.75rem;padding:.6rem .5rem;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.cart__list li:last-child{border-bottom:0}
.cart__name{flex:1;font-size:.95rem;line-height:1.3;color:#EDE8E1}
.cart__qty{display:flex;align-items:center;gap:.4rem;flex:0 0 auto}
.cart__qty button{
  width:26px;height:26px;border-radius:50%;border:1px solid rgba(255,255,255,.3);
  background:transparent;color:#EDE8E1;cursor:pointer;font-size:1rem;line-height:1;
  display:grid;place-items:center;transition:.15s;
}
.cart__qty button:hover{background:var(--tan);border-color:var(--tan);color:var(--dark)}
.cart__qty b{min-width:1.2rem;text-align:center;font-weight:900;color:var(--white)}
.cart__foot{padding:.9rem 1.25rem 1.15rem;border-top:1px solid rgba(255,255,255,.12)}
.cart__hint{font-size:.82rem;color:#B9B4AD;margin:0 0 .75rem;line-height:1.4}
.cart__clear{background:none;border:0;color:#9C978F;font-size:.85rem;text-decoration:underline;cursor:pointer;padding:0}
.cart__clear:hover{color:var(--tan)}
.cart__empty{padding:1.5rem 1.25rem;color:#9C978F;font-size:.92rem;text-align:center}

@media(max-width:640px){
  .cart{right:.9rem;bottom:.9rem;left:.9rem;align-items:stretch}
  .cart__fab{justify-content:center}
  .cart__panel{width:auto}
}

/* bouton d'ajout dans le composeur */
.mixer__add{
  display:none;margin-top:.75rem;border:0;cursor:pointer;border-radius:8px;
  background:var(--mx);color:var(--dark);font-weight:800;font-size:.82rem;
  text-transform:uppercase;letter-spacing:.04em;padding:.6rem 1.1rem;transition:.2s;
}
.mixer.is-ready .mixer__add{display:inline-block}
.mixer__add:hover{background:var(--cream-2)}

/* ============================================================
   V6 — hero plein écran (ordinateur et téléphone)
   ============================================================ */
.hero{
  min-height:100vh;              /* repli navigateurs anciens */
  min-height:100svh;             /* hauteur réelle sur mobile, sans la barre d'URL */
  max-height:none;
  padding-top:calc(var(--header-h) + 1rem);
  padding-bottom:4.5rem;
}
@supports not (height: 100svh){
  @media(max-width:900px){.hero{min-height:calc(100vh - 1px)}}
}
.hero__dots{bottom:2.25rem}
@media(max-width:640px){.hero__dots{bottom:1.5rem}}

/* ============================================================
   V7 — carrousel « En ce moment » : auto, sans flèches
   ============================================================ */
.carou__nav{display:none}

.carou--full .carou__track{
  gap:clamp(1rem,1.8vw,1.75rem);
  padding-block:1.5rem;             /* respiration pour le soulèvement */
  align-items:center;
}
.carou--full .promo{
  aspect-ratio:16/10;border-radius:18px;
  opacity:1;filter:none;transform:translateY(0);
  transition:transform .5s cubic-bezier(.22,.9,.28,1), box-shadow .45s ease;
  box-shadow:0 12px 30px rgba(44,46,45,.16);
  will-change:transform;
}
.carou--full .promo.is-active{
  transform:translateY(-8px);
  box-shadow:0 28px 58px rgba(44,46,45,.26);
}
.carou--full .promo.is-near{transform:translateY(0)}
@media(prefers-reduced-motion:reduce){
  .carou--full .promo{transform:none;transition:none}
}

/* points + barre de progression */
.carou__dots{
  display:flex;justify-content:center;align-items:center;gap:.5rem;margin-top:1.5rem;
}
.carou__dot{
  position:relative;width:10px;height:10px;padding:0;border:0;border-radius:999px;cursor:pointer;
  background:rgba(44,46,45,.2);transition:width .4s ease,background .3s ease;overflow:hidden;
}
.carou__dot:hover{background:rgba(44,46,45,.45)}
.carou__dot.is-on{width:46px;background:rgba(44,46,45,.16)}
.carou__dot i{
  position:absolute;inset:0;display:block;width:0;border-radius:999px;
  background:var(--dark);
}
.carou__dot.is-on i{width:100%;transition:width var(--carou-delay,5000ms) linear}
.carou.is-paused .carou__dot.is-on i{transition:none}
.section--dark .carou__dot{background:rgba(255,255,255,.25)}
.section--dark .carou__dot.is-on{background:rgba(255,255,255,.18)}
.section--dark .carou__dot i{background:var(--cream-2)}

/* ============================================================
   V8 — accueil interactif : moins de texte, plus de mouvement
   ============================================================ */

/* --- apparition au scroll --- */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.8,.3,1)}
.reveal.is-in{opacity:1;transform:none}
.reveal[data-d="1"]{transition-delay:.09s}
.reveal[data-d="2"]{transition-delay:.18s}
.reveal[data-d="3"]{transition-delay:.27s}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}

/* --- « Envie de quoi ? » : grandes tuiles --- */
.envie{display:grid;gap:clamp(.75rem,1.5vw,1.25rem);grid-template-columns:repeat(2,1fr)}
@media(min-width:700px){.envie{grid-template-columns:repeat(3,1fr)}}
.envie a{
  position:relative;display:block;border-radius:18px;overflow:hidden;text-decoration:none;
  aspect-ratio:3/4;color:var(--white);box-shadow:0 12px 30px rgba(44,46,45,.14);
  transition:transform .4s cubic-bezier(.2,.8,.3,1),box-shadow .4s ease;
}
@media(min-width:900px){.envie a{aspect-ratio:4/5}}
.envie a:hover{transform:translateY(-8px);box-shadow:0 28px 60px rgba(44,46,45,.3)}
.envie img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.2,.8,.3,1)}
.envie a:hover img{transform:scale(1.09)}
.envie a::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(44,46,45,0) 35%,rgba(44,46,45,.85))}
.envie__txt{position:relative;z-index:2;height:100%;display:flex;flex-direction:column;justify-content:flex-end;padding:1.15rem}
.envie__txt strong{
  display:block;font-weight:900;text-transform:uppercase;letter-spacing:-.005em;
  font-size:clamp(1.05rem,2.1vw,1.4rem);line-height:1.1;
}
.envie__txt span{
  display:inline-flex;align-items:center;gap:.4rem;margin-top:.5rem;
  font-size:.78rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--tan);
  transform:translateY(6px);opacity:0;transition:.35s ease;
}
.envie a:hover .envie__txt span{transform:none;opacity:1}

/* --- bande défilante de photos --- */
.strip{overflow:hidden;padding-block:clamp(2rem,4vw,3rem);background:var(--dark)}
.strip__row{display:flex;gap:1rem;width:max-content;animation:stripScroll 46s linear infinite}
.strip:hover .strip__row{animation-play-state:paused}
.strip__row img{
  height:clamp(150px,18vw,230px);width:auto;border-radius:14px;object-fit:cover;display:block;
  opacity:.92;transition:transform .4s ease,opacity .4s ease;
}
.strip__row img:hover{transform:scale(1.05);opacity:1}
@keyframes stripScroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.strip__row{animation:none}}
.strip__label{
  text-align:center;color:var(--tan);font-family:var(--font-script);
  font-size:clamp(1.4rem,3vw,2rem);margin:0 0 1.5rem;
}

/* --- chiffres animés --- */
.stats{display:grid;gap:clamp(1.25rem,3vw,2.5rem);grid-template-columns:repeat(2,1fr);text-align:center}
@media(min-width:820px){.stats{grid-template-columns:repeat(4,1fr)}}
.stat b{
  display:block;font-weight:900;font-size:clamp(2.2rem,5vw,3.4rem);color:var(--dark);
  line-height:1;font-variant-numeric:tabular-nums;letter-spacing:-.02em;
}
.stat span{display:block;margin-top:.5rem;font-size:.85rem;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.1em}
.section--dark .stat b{color:var(--tan)}
.section--dark .stat span{color:#B9B4AD}

/* --- bloc court « notre shop » --- */
.punch{
  position:relative;border-radius:20px;overflow:hidden;min-height:clamp(300px,42vw,440px);
  display:flex;align-items:flex-end;color:var(--white);
}
.punch img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.punch::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(44,46,45,.1) 30%,rgba(44,46,45,.8))}
.punch__txt{position:relative;z-index:2;padding:clamp(1.5rem,4vw,2.75rem);max-width:640px}
.punch__txt h2{color:var(--white)}
.punch__txt p{margin:.9rem 0 1.5rem;font-size:clamp(1rem,1.8vw,1.15rem);color:#EDE8E1}

/* la carte n'a plus de recherche : les onglets seuls, un peu plus aérés */
.mtabs__scroll{padding-block:1rem}

/* ancrage des sections aligné sur la barre d'onglets (sans champ de recherche) */
.msec{scroll-margin-top:calc(var(--header-h) + 72px)}
@media(max-width:640px){.msec{scroll-margin-top:calc(var(--header-h) + 66px)}}

/* ============================================================
   LES THÉS — bloc visuel repris du chevalet en boutique
   ============================================================ */
.teabox{
  grid-column:1/-1;margin:1.75rem 0 .5rem;border-radius:18px;overflow:hidden;
  background:#33513C;color:#F2EFE9;
  padding:clamp(1.5rem,4vw,2.75rem);
  box-shadow:0 18px 44px rgba(44,46,45,.18);
}
.teabox__head{text-align:center;margin-bottom:clamp(1.5rem,3vw,2.25rem)}
.teabox__head h3{
  color:#fff;text-transform:uppercase;font-weight:900;letter-spacing:-.01em;
  font-size:clamp(1.6rem,4vw,2.6rem);margin:0;
}
.teabox__head p{
  margin:.45rem 0 0;font-size:.82rem;font-weight:800;letter-spacing:.12em;
  text-transform:uppercase;color:#BFD3C4;
}
.teas{display:grid;gap:clamp(.6rem,1.4vw,1rem);grid-template-columns:repeat(2,1fr)}
@media(min-width:760px){.teas{grid-template-columns:repeat(3,1fr)}}
.tea{
  border-radius:14px;padding:1rem .85rem;text-align:center;min-height:118px;
  display:flex;flex-direction:column;justify-content:center;gap:.35rem;
  transition:transform .3s cubic-bezier(.2,.8,.3,1),box-shadow .3s ease;
}
.tea:hover{transform:translateY(-4px) scale(1.02);box-shadow:0 14px 30px rgba(0,0,0,.25)}
.tea__type,.tea__flav{
  font-size:.6rem;font-weight:800;letter-spacing:.11em;text-transform:uppercase;opacity:.85;line-height:1.2;
}
.tea__name{
  font-family:var(--font-script);font-weight:700;line-height:1.05;
  font-size:clamp(1.15rem,2.6vw,1.5rem);
}
.tea--light{color:#2C2E2D}
.tea--dark{color:#FFFFFF}

.teabox__foot{
  display:flex;flex-wrap:wrap;justify-content:center;gap:.6rem 2rem;
  margin-top:clamp(1.25rem,3vw,2rem);padding-top:1.1rem;
  border-top:1px solid rgba(255,255,255,.18);
}
.teabox__foot span{
  display:inline-flex;align-items:center;gap:.5rem;
  font-size:.72rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:#BFD3C4;
}
.teabox__foot svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* ============================================================
   V9 — lisibilité de la carte sur téléphone (iPhone 15 & co)
   ============================================================ */
.mitem__price em:first-child{margin-left:0}
.mitem__price em{margin:0 .2rem 0 .75rem}

@media(max-width:640px){
  .mitem{
    position:relative;
    grid-template-columns:76px 1fr;
    gap:.9rem;padding:.95rem 0;align-items:start;
  }
  .mitem__thumb{width:76px;height:76px;border-radius:11px}
  .mitem > div{padding-right:2.9rem}
  .madd{
    position:absolute;right:0;bottom:.95rem;
    width:32px;height:32px;align-self:auto;
  }
  .madd svg{width:15px;height:15px}
  .mitem__name{font-size:.97rem;line-height:1.25}
  .mitem__desc{font-size:.85rem;margin-top:.2rem;line-height:1.4}
  .mitem__price{font-size:.93rem;margin-top:.35rem}
  .mitem__price em{font-size:.72rem;margin:0 .15rem 0 .6rem}
  .mitem__tags{gap:.28rem;margin-top:.4rem}
  .mtag{font-size:.65rem;padding:.15rem .5rem;line-height:1.35}
  .mitem__qty{min-width:18px;height:18px;font-size:.66rem}

  /* en-tête de section plus compact */
  .msec{padding-block:1.75rem}
  .msec__head h2{font-size:1.5rem}
  .msec__note{font-size:.9rem;margin-bottom:1.1rem;line-height:1.45}
  .msec__foot{font-size:.88rem;padding:.75rem .9rem}

  /* onglets : plus de choix visibles d'un coup */
  .mtabs__scroll{padding-block:.75rem;gap:.4rem}
  .mtabs a{font-size:.8rem;padding:.45rem .8rem}

  /* listes de saveurs plus légères */
  .flavors{gap:.35rem}
  .flavors li{font-size:.82rem;padding:.32rem .7rem}
  .mchoice h4{font-size:.72rem}
}
@media(max-width:380px){
  .mitem{grid-template-columns:66px 1fr;gap:.75rem}
  .mitem__thumb{width:66px;height:66px}
  .mitem > div{padding-right:2.6rem}
}

/* ============================================================
   FENÊTRE DE PERSONNALISATION (arômes, saveurs, perles…)
   ============================================================ */
.omodal{
  position:fixed;inset:0;z-index:120;display:none;
  align-items:flex-end;justify-content:center;
}
.omodal.is-open{display:flex}
@media(min-width:640px){.omodal{align-items:center}}
.omodal__bg{position:absolute;inset:0;background:rgba(20,21,20,.55);backdrop-filter:blur(3px);animation:fadeIn .25s ease}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.omodal__box{
  position:relative;z-index:2;width:min(520px,100%);max-height:88vh;
  background:var(--dark);color:#EDE8E1;border-radius:20px 20px 0 0;
  display:flex;flex-direction:column;overflow:hidden;
  box-shadow:0 -10px 50px rgba(0,0,0,.4);
  animation:sheetUp .32s cubic-bezier(.2,.9,.3,1.05);
}
@media(min-width:640px){
  .omodal__box{border-radius:20px;animation:popIn .28s cubic-bezier(.2,.9,.3,1.15)}
}
@keyframes sheetUp{from{transform:translateY(100%)}to{transform:none}}
@keyframes popIn{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:none}}

.omodal__head{
  display:flex;align-items:flex-start;gap:1rem;justify-content:space-between;
  padding:1.35rem 1.35rem 1rem;border-bottom:1px solid rgba(255,255,255,.12);
}
.omodal__head h3{color:var(--white);text-transform:none;font-size:1.15rem;font-weight:800;line-height:1.25}
.omodal__head p{margin:.3rem 0 0;font-size:.85rem;color:#9C978F}
.omodal__close{background:none;border:0;color:#9C978F;font-size:1.6rem;line-height:1;cursor:pointer;padding:0 .2rem}
.omodal__close:hover{color:var(--white)}

.omodal__body{padding:1.1rem 1.35rem;overflow-y:auto;flex:1;display:grid;gap:1.35rem}
.ogroup__label{
  display:flex;align-items:center;gap:.6rem;margin-bottom:.7rem;
  font-size:.75rem;font-weight:900;letter-spacing:.11em;text-transform:uppercase;color:var(--white);
}
.ogroup__req{
  font-size:.62rem;font-weight:900;letter-spacing:.08em;border-radius:999px;padding:.16rem .5rem;
  background:var(--tan);color:var(--dark);
}
.ogroup__opt{font-size:.68rem;font-weight:700;letter-spacing:.06em;color:#9C978F;text-transform:none}
.ochips{display:flex;flex-wrap:wrap;gap:.45rem}
.ochip{
  border:1.5px solid rgba(255,255,255,.24);background:rgba(255,255,255,.03);color:#EDE8E1;
  border-radius:999px;padding:.5rem 1rem;font-size:.9rem;cursor:pointer;transition:.18s;
}
.ochip:hover{border-color:var(--tan);color:var(--white)}
.ochip.is-on{background:var(--tan);border-color:var(--tan);color:var(--dark);font-weight:800}
.ochip b{font-weight:800;font-size:.74rem;margin-left:.3rem;opacity:.85}

.omodal__foot{
  padding:1rem 1.35rem 1.35rem;border-top:1px solid rgba(255,255,255,.12);
  display:grid;gap:.6rem;background:rgba(0,0,0,.18);
}
.obtn{
  width:100%;border:0;border-radius:10px;cursor:pointer;padding:.85rem 1.2rem;
  font-weight:900;font-size:.9rem;letter-spacing:.03em;text-transform:uppercase;
  background:var(--tan);color:var(--dark);transition:.2s;
}
.obtn:hover{background:var(--cream-2)}
.obtn:disabled{opacity:.4;cursor:not-allowed}
.obtn--ghost{
  background:transparent;color:#C9C4BD;border:1.5px solid rgba(255,255,255,.25);
  text-transform:none;letter-spacing:0;font-weight:700;font-size:.88rem;
}
.obtn--ghost:hover{background:rgba(255,255,255,.08);color:var(--white)}
.omodal__hint{margin:0;text-align:center;font-size:.78rem;color:#9C978F}

/* pastilles plus compactes sur téléphone : tout tient sur une ligne */
@media(max-width:640px){
  .mtag{font-size:.63rem;padding:.14rem .45rem;letter-spacing:-.005em;white-space:nowrap}
  .mtag--veg{font-size:.6rem}
  .mitem__tags{gap:.25rem}
}
@media(max-width:380px){
  .mtag{font-size:.6rem}
  .mtag--veg{font-size:.57rem}
}

/* ---------- V10 : sous-groupes de catégorie (Fraîcheur) ---------- */
.mgroup{grid-column:1/-1;margin:1.9rem 0 .3rem;padding-top:1.4rem;border-top:1px solid rgba(44,46,45,.1)}
.mgroup:first-child{margin-top:0;padding-top:0;border-top:0}
.mgroup h3{font-family:"Alegreya Sans",system-ui,sans-serif;font-size:1.35rem;font-weight:800;margin:0;color:var(--dark)}
.mgroup p{margin:.25rem 0 0;font-size:.9rem;color:rgba(44,46,45,.62);max-width:60ch}
.mgroup + .mitem{padding-top:1rem}
@media(max-width:640px){
  .mgroup{margin:1.5rem 0 .2rem;padding-top:1.1rem}
  .mgroup h3{font-size:1.15rem}
  .mgroup p{font-size:.83rem}
}

/* ---------- V11 : les composeurs frappé & bubble tea ---------- */
.mixer--frappe{
  --mx:#F0B274;
  --mx-glow:rgba(240,178,116,.24);
  --mx-dim:rgba(240,178,116,.16);
  --mx-shadow:rgba(240,178,116,.30);
  --mx-ring:rgba(240,178,116,.45);
  --mx-wash:rgba(240,178,116,.10);
  background:
    radial-gradient(120% 80% at 12% 0%, rgba(240,178,116,.26), transparent 55%),
    radial-gradient(100% 90% at 100% 100%, rgba(198,124,74,.20), transparent 60%),
    #34281F;
  box-shadow:0 24px 60px rgba(52,40,31,.28);
}
.mixer--bubble{
  --mx:#8FD4B4;
  --mx-glow:rgba(143,212,180,.24);
  --mx-dim:rgba(143,212,180,.16);
  --mx-shadow:rgba(143,212,180,.30);
  --mx-ring:rgba(143,212,180,.45);
  --mx-wash:rgba(143,212,180,.10);
  background:
    radial-gradient(120% 80% at 12% 0%, rgba(143,212,180,.24), transparent 55%),
    radial-gradient(100% 90% at 100% 100%, rgba(94,160,196,.18), transparent 60%),
    #1F2E2A;
  box-shadow:0 24px 60px rgba(31,46,42,.30);
}
.mixer__actions{display:flex;align-items:center;flex-wrap:wrap;gap:.7rem 1.2rem;margin-top:.7rem}
.mixer__actions .mixer__reset{margin-top:0}
.mixer__actions .mixer__add{margin-top:0}

/* ============================================================
   V12 — en-tête (position · logo · menu) et menu plein écran
   ============================================================ */
.header__inner{display:grid;grid-template-columns:1fr auto 1fr;align-items:center}
.header__inner .logo{justify-self:center}
.hicon{
  justify-self:start;display:inline-flex;align-items:center;gap:.55rem;cursor:pointer;
  border:1.5px solid rgba(255,255,255,.45);border-radius:999px;background:transparent;
  color:var(--white);text-decoration:none;padding:.62rem 1.1rem;
  font-weight:900;font-size:.76rem;letter-spacing:.09em;text-transform:uppercase;
  transition:border-color .25s ease,background .25s ease,color .25s ease,transform .25s ease;
}
.hicon:hover{border-color:var(--tan);background:rgba(221,184,146,.12);color:var(--tan);transform:translateY(-1px)}
.hicon svg{flex:0 0 auto}
.header__inner .burger{
  justify-self:end;width:auto;height:auto;flex-direction:column;gap:4px;
  padding:.78rem .95rem;border-radius:999px;border:1.5px solid rgba(255,255,255,.45);
}
.header__inner .burger span{width:20px;transition:transform .3s cubic-bezier(.2,.9,.3,1.2),opacity .2s,width .3s}
.header__inner .burger span:nth-child(2){width:13px;align-self:flex-end}
.header__inner .burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.header__inner .burger[aria-expanded="true"] span:nth-child(2){opacity:0;width:20px}
.header__inner .burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg);width:20px}

@media(max-width:860px){
  .hicon--pin span{display:none}
  .hicon--pin{padding:.72rem .8rem}
}

/* ---------- menu plein écran ---------- */
.menu{
  background:
    radial-gradient(120% 90% at 85% 0%, rgba(221,184,146,.16), transparent 55%),
    radial-gradient(90% 70% at 0% 100%, rgba(208,213,210,.10), transparent 60%),
    var(--dark);
  padding:calc(var(--header-h) + 3vh) var(--pad) 3rem;
}
.menu__steam{
  position:absolute;inset:auto 0 0 0;height:55%;pointer-events:none;
  background:radial-gradient(60% 100% at 50% 100%, rgba(221,184,146,.10), transparent 70%);
}
.menu__in{max-width:var(--maxw);margin-inline:auto;display:flex;flex-direction:column;min-height:100%;justify-content:center;gap:clamp(2rem,5vh,3.5rem)}
.menu__list{list-style:none;margin:0;padding:0;display:grid;gap:clamp(.1rem,1vh,.4rem)}
.menu__list li{
  border-bottom:1px solid rgba(255,255,255,.09);
  opacity:0;transform:translateY(22px);
}
.menu.is-open .menu__list li{
  animation:menuIn .55s cubic-bezier(.2,.9,.3,1.15) forwards;
  animation-delay:calc(var(--i) * 60ms + 90ms);
}
@keyframes menuIn{to{opacity:1;transform:none}}
.menu__list a{
  display:flex;align-items:center;gap:clamp(.9rem,2vw,1.6rem);
  padding:clamp(.7rem,2vh,1.15rem) .2rem;color:var(--white);text-decoration:none;
  position:relative;transition:color .3s ease,padding-left .3s ease;
}
.menu__list em{
  font-style:normal;font-weight:800;font-size:.72rem;letter-spacing:.16em;
  color:var(--tan);opacity:.55;flex:0 0 auto;transition:opacity .3s ease;
}
.menu__list span{
  font-weight:900;text-transform:uppercase;letter-spacing:-.015em;line-height:1;
  font-size:clamp(1.9rem,6.2vw,4.2rem);
}
.menu__list svg{
  width:34px;height:14px;margin-left:auto;color:var(--tan);
  opacity:0;transform:translateX(-14px);transition:opacity .3s ease,transform .3s ease;flex:0 0 auto;
}
.menu__list a:hover,.menu__list a:focus-visible{color:var(--tan);padding-left:clamp(.4rem,1.4vw,1rem)}
.menu__list a:hover em,.menu__list a:focus-visible em{opacity:1}
.menu__list a:hover svg,.menu__list a:focus-visible svg{opacity:1;transform:none}
.menu__foot{
  display:flex;align-items:center;gap:1.4rem;flex-wrap:wrap;
  opacity:0;transform:translateY(18px);
}
.menu.is-open .menu__foot{animation:menuIn .55s cubic-bezier(.2,.9,.3,1.15) forwards;animation-delay:.45s}
.menu__follow{
  font-weight:900;text-transform:uppercase;letter-spacing:.14em;font-size:.78rem;color:#9C978F;
}
.menu__foot .menu__socials{margin-top:0}
@media(max-width:640px){
  .menu__list span{font-size:clamp(1.6rem,8.5vw,2.6rem)}
  .menu__list svg{width:26px}
}

/* ---------- hero : défilement plus vivant ---------- */
.hero__slides img{transition:opacity .9s ease}
.hero__slides img.is-on{animation:heroZoom 5.4s ease-out forwards}
.hero__slides img.is-on.z-b{animation-name:heroZoomB}
.hero__slides img.is-on.z-c{animation-name:heroZoomC}
@keyframes heroZoomB{from{transform:scale(1) translate3d(-1.4%,0,0)}to{transform:scale(1.10) translate3d(1.4%,0,0)}}
@keyframes heroZoomC{from{transform:scale(1.10) translate3d(0,1.2%,0)}to{transform:scale(1) translate3d(0,-1.2%,0)}}
@media(prefers-reduced-motion:reduce){
  .hero__slides img.is-on,.hero__slides img.is-on.z-b,.hero__slides img.is-on.z-c{animation:none;transform:none}
}

/* ---------- coup de cœur : fond taupe, texte marron ---------- */
.mtag--hot,.tag--hot,.badge--hot{
  background:var(--tan)!important;border-color:var(--tan)!important;color:#5A3B24!important;font-weight:800;
}

/* ============================================================
   V13 — fenêtre de choix : pastilles et boutons plus appétissants
   ============================================================ */
.ochips{gap:.55rem}
.ochip{
  position:relative;overflow:hidden;
  border:1.5px solid rgba(221,184,146,.30);
  background:linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.02));
  color:#F2EDE6;padding:.62rem 1.15rem;font-size:.92rem;font-weight:600;
  box-shadow:0 2px 0 rgba(0,0,0,.18);
  transition:transform .18s cubic-bezier(.2,.9,.3,1.3),border-color .2s,background .2s,color .2s,box-shadow .2s;
}
.ochip::before{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(120deg, transparent 30%, rgba(255,255,255,.22) 50%, transparent 70%);
  transform:translateX(-120%);transition:transform .55s ease;
}
.ochip:hover{
  transform:translateY(-2px);border-color:var(--tan);color:#fff;
  background:linear-gradient(180deg, rgba(221,184,146,.20), rgba(221,184,146,.07));
  box-shadow:0 6px 16px rgba(221,184,146,.18);
}
.ochip:hover::before{transform:translateX(120%)}
.ochip:active{transform:translateY(0)}
.ochip.is-on{
  background:linear-gradient(180deg,#EBC9A4,var(--tan));
  border-color:#EBC9A4;color:#4A3120;font-weight:900;
  box-shadow:0 8px 20px rgba(221,184,146,.34), inset 0 1px 0 rgba(255,255,255,.5);
  transform:translateY(-1px);
}
.ochip.is-on::after{
  content:"✓";margin-left:.45rem;font-weight:900;font-size:.8rem;
}
.ochip b{
  margin-left:.4rem;padding:.1rem .38rem;border-radius:999px;font-size:.7rem;font-weight:800;
  background:rgba(221,184,146,.20);color:var(--tan);opacity:1;
}
.ochip.is-on b{background:rgba(74,49,32,.16);color:#4A3120}

.omodal__foot{
  padding:1rem 1.35rem calc(1.35rem + env(safe-area-inset-bottom, 0px));
  background:linear-gradient(180deg, rgba(0,0,0,.10), rgba(0,0,0,.30));
}
.obtn{
  position:relative;overflow:hidden;border-radius:14px;padding:1rem 1.2rem;font-size:.95rem;
  background:linear-gradient(180deg,#EFCFAA,var(--tan));color:#3A2515;
  box-shadow:0 10px 26px rgba(221,184,146,.30), inset 0 1px 0 rgba(255,255,255,.55);
  transition:transform .18s cubic-bezier(.2,.9,.3,1.3),box-shadow .2s,filter .2s;
}
.obtn:hover:not(:disabled){transform:translateY(-2px);filter:brightness(1.05);box-shadow:0 14px 32px rgba(221,184,146,.42), inset 0 1px 0 rgba(255,255,255,.6);background:linear-gradient(180deg,#F3D7B6,#E4C29C)}
.obtn:active:not(:disabled){transform:translateY(0)}
.obtn:disabled{opacity:.45;box-shadow:none;filter:grayscale(.35)}
.obtn--ghost{
  background:transparent;color:#CFC9C1;border:1.5px solid rgba(255,255,255,.22);
  box-shadow:none;border-radius:14px;padding:.85rem 1.2rem;
}
.obtn--ghost:hover{background:rgba(255,255,255,.09);color:var(--white);border-color:rgba(255,255,255,.4);box-shadow:none;filter:none}

/* ============================================================
   V14 — horaires du pied de page : fins, tous les jours nommés
   ============================================================ */
.hours--fine{max-width:none;display:grid;gap:.5rem}
.hours--fine li{
  display:block;padding:0;border:0;line-height:1.5;
}
.hours--fine .hours__days{
  display:inline;color:#B9B4AD;font-size:.82rem;letter-spacing:.01em;
}
.hours--fine .hours__days span{display:inline}
.hours--fine .hours__days span + span::before{
  content:"";display:inline-block;width:1px;height:.72em;vertical-align:-.04em;
  background:rgba(221,184,146,.45);margin:0 .42rem;
}
.hours--fine b{
  display:block;margin-top:.12rem;
  font-weight:800;font-size:.9rem;color:var(--cream-2);
  font-variant-numeric:tabular-nums;letter-spacing:.01em;
}
.hours--fine li.is-today b{color:var(--tan)}
.hours--fine li.is-today .hours__days{color:var(--cream-2)}
.hours--fine li.is-today::after{content:none}
@media(min-width:900px){
  .hours--fine .hours__days{font-size:.8rem}
}

/* ---------- V15 : proportions du hero et encadrés carrés comme le site de base ---------- */
.hero h1{font-size:clamp(1.85rem,4.9vw,4.4rem)}
.hero__script{font-size:clamp(1.15rem,2.8vw,2.5rem);margin-top:.35rem}
.hicon,.header__inner .burger{border-radius:10px;border-width:2px}
.hicon{padding:.6rem 1.05rem}
.header__inner .burger{padding:.72rem .85rem}
@media(max-width:860px){
  .hicon--pin{padding:.62rem .68rem}
}

/* ---------- V16 : titres de section sur une ligne au téléphone ---------- */
@media(max-width:640px){
  .title-center h2{font-size:clamp(1.05rem,5.2vw,1.7rem);line-height:1.15;white-space:nowrap;letter-spacing:-.01em}
  .title-center .rule{width:110px;margin-top:1rem}
}

/* ---------- V16b : « Le French de Gambetta » — photo assombrie pour la lisibilité ---------- */
.punch::after{
  background:
    linear-gradient(180deg, rgba(28,29,28,.30) 0%, rgba(28,29,28,.62) 55%, rgba(20,21,20,.86) 100%),
    linear-gradient(90deg, rgba(20,21,20,.55) 0%, rgba(20,21,20,.18) 60%, transparent 100%);
}
.punch__txt h2,.punch__txt p{text-shadow:0 2px 14px rgba(0,0,0,.45)}

/* ---------- V17 : livraison Uber Eats + goodies ---------- */
.deliv{display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1fr);gap:clamp(1.75rem,5vw,4rem);align-items:center}
.deliv__img{width:100%;height:auto;object-fit:contain;border-radius:18px;display:block;box-shadow:0 18px 44px rgba(44,46,45,.14)}
@media(max-width:820px){.deliv{grid-template-columns:1fr}.deliv__img{max-width:360px;margin:0 auto}}

/* ---------- V18 : prix en promotion ---------- */
.mitem__price--promo{display:flex;align-items:baseline;gap:.55rem}
.mitem__price--promo s{color:var(--muted);font-weight:500;text-decoration-thickness:1px}
.mitem__price--promo b{color:#B4462F;font-weight:800}
.mtag--promo{background:#B4462F;color:#fff}

/* ============================================================
   V19 — composeur flottant + thés cliquables
   ============================================================ */
body.no-scroll{overflow:hidden}

.omodal{
  position:fixed;inset:0;z-index:120;display:none;
  align-items:flex-end;justify-content:center;
}
.omodal.is-open{display:flex}
@media(min-width:700px){.omodal{align-items:center;padding:2rem 1rem}}
.omodal__bg{
  position:absolute;inset:0;background:rgba(18,19,18,.62);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  animation:oFade .22s ease;
}
@keyframes oFade{from{opacity:0}to{opacity:1}}
@keyframes oUp{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
@keyframes oPop{from{opacity:0;transform:scale(.94) translateY(14px)}to{opacity:1;transform:none}}
@keyframes oShake{10%,90%{transform:translateX(-3px)}30%,70%{transform:translateX(5px)}50%{transform:translateX(-5px)}}
@keyframes oTick{from{stroke-dashoffset:26}to{stroke-dashoffset:0}}

.omodal__box{
  position:relative;z-index:2;width:100%;max-width:560px;
  max-height:92vh;display:flex;flex-direction:column;
  background:var(--white);color:var(--dark);
  border-radius:24px 24px 0 0;overflow:hidden;
  box-shadow:0 -18px 60px rgba(0,0,0,.34);
  animation:oUp .3s cubic-bezier(.2,.9,.28,1.05);
}
@media(min-width:700px){
  .omodal__box{border-radius:24px;box-shadow:0 30px 80px rgba(0,0,0,.34);animation:oPop .28s cubic-bezier(.2,.9,.28,1.08)}
}
.omodal__box.pop{animation:oPop .18s ease}

.omodal__close{
  position:absolute;top:.85rem;right:.85rem;z-index:3;
  width:34px;height:34px;border-radius:999px;cursor:pointer;
  background:rgba(255,255,255,.9);border:1px solid rgba(44,46,45,.12);
  display:grid;place-items:center;color:var(--dark);
  transition:background .2s ease,transform .2s ease;
}
.omodal__close:hover{background:var(--dark);color:var(--white);transform:rotate(90deg)}
.omodal__close svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round}

.omodal__head{
  display:grid;grid-template-columns:78px 1fr;gap:1rem;align-items:center;
  padding:1.2rem 3.2rem 1.1rem 1.35rem;
  border-bottom:1px solid #EFE8DE;background:var(--cream);
}
.omodal__photo{width:78px;height:78px;border-radius:16px;object-fit:cover;display:block;background:var(--sage)}
.omodal__id h3{margin:0;font-size:1.18rem;font-weight:800;line-height:1.2;text-transform:none;color:var(--dark)}
.omodal__id p{margin:.3rem 0 0;font-size:.86rem;line-height:1.4;color:var(--muted)}

.omodal__body{
  padding:1.15rem 1.35rem 1.5rem;overflow-y:auto;flex:1;
  display:grid;gap:1.35rem;-webkit-overflow-scrolling:touch;
}
.ogroup{position:relative}
.ogroup.shake{animation:oShake .45s ease}
.ogroup__label{
  display:flex;align-items:center;gap:.5rem;margin:0 0 .6rem;
  font-size:.95rem;font-weight:800;color:var(--dark);text-transform:none;letter-spacing:0;
}
.ogroup__step{
  width:21px;height:21px;border-radius:999px;flex:0 0 auto;
  display:grid;place-items:center;font-size:.72rem;font-weight:800;
  background:var(--dark);color:var(--white);transition:background .25s ease;
}
.ogroup.is-done .ogroup__step{background:#4F7A52}
.ogroup__ttl{flex:1 1 auto}
.ogroup__req,.ogroup__opt{
  font-size:.64rem;font-weight:800;letter-spacing:.07em;text-transform:uppercase;
  padding:.18rem .45rem;border-radius:999px;flex:0 0 auto;
}
.ogroup__req{background:#F2E4DC;color:#A24E30}
.ogroup__opt{background:#EFEDE7;color:#8A857D}
.ogroup__tick{
  width:16px;height:16px;flex:0 0 auto;fill:none;stroke:#4F7A52;stroke-width:2.6;
  stroke-linecap:round;stroke-linejoin:round;opacity:0;
  stroke-dasharray:26;stroke-dashoffset:26;
}
.ogroup.is-done .ogroup__tick{opacity:1;animation:oTick .35s ease forwards}
.ogroup.is-done .ogroup__req,.ogroup.is-done .ogroup__opt{display:none}

.ochips{display:flex;flex-wrap:wrap;gap:.5rem}
.ochip{
  display:inline-flex;align-items:center;gap:.35rem;
  padding:.55rem .85rem;border-radius:999px;cursor:pointer;
  border:1.5px solid #E2DACE;background:var(--white);color:var(--dark);
  font-size:.88rem;font-weight:600;line-height:1;
  transition:border-color .16s ease,background .16s ease,color .16s ease,transform .12s ease;
}
.ochip::before{content:none}
.ochip:hover{border-color:var(--tan);transform:translateY(-1px)}
.ochip:active{transform:scale(.96)}
.ochip.is-on{background:var(--dark);border-color:var(--dark);color:var(--white);font-weight:800}
.ochip b{font-weight:700;font-size:.76rem;opacity:.7}
.ochip.is-on b{opacity:.85}
.ogroup--size .ochips{display:grid;grid-template-columns:1fr 1fr;gap:.6rem}
.ochip--size{
  justify-content:center;flex-direction:column;gap:.2rem;
  padding:.8rem .6rem;border-radius:16px;font-size:1.02rem;font-weight:800;
}
.ochip--size b{font-size:.84rem;font-weight:700}

.omodal__foot{
  padding:.95rem 1.35rem calc(1.1rem + env(safe-area-inset-bottom));
  border-top:1px solid #EFE8DE;background:var(--white);
  box-shadow:0 -10px 24px rgba(44,46,45,.05);
}
.omodal__sum{
  display:flex;align-items:baseline;justify-content:space-between;gap:1rem;
  margin-bottom:.7rem;
}
.omodal__sumtxt{font-size:.86rem;color:var(--dark);font-weight:600;line-height:1.35}
.omodal__sumtxt.is-todo{color:#A24E30;font-weight:700}
.omodal__price{font-size:1.22rem;font-weight:800;white-space:nowrap;font-variant-numeric:tabular-nums}
.omodal__btns{display:flex;gap:.6rem;flex-wrap:wrap}
.obtn{
  flex:1 1 auto;min-height:50px;padding:.85rem 1.2rem;border:0;border-radius:14px;
  background:var(--dark);color:var(--white);font-weight:800;font-size:.95rem;cursor:pointer;
  transition:transform .12s ease,opacity .2s ease,background .2s ease;
}
.obtn:hover{background:#1E201F}
.obtn:active{transform:scale(.98)}
.obtn:disabled{opacity:.35;cursor:not-allowed}
.obtn--ghost{
  flex:0 1 auto;background:transparent;color:var(--muted);
  border:1.5px solid #E2DACE;font-weight:700;
}
.obtn--ghost:hover{background:#F6F1E9;color:var(--dark)}
@media(prefers-reduced-motion:reduce){
  .omodal__box,.omodal__bg,.ogroup.shake,.ogroup.is-done .ogroup__tick{animation:none}
}

/* --- les thés : deux par deux, cartes cliquables --- */
.teas{grid-template-columns:repeat(2,1fr)!important}
.tea{
  position:relative;padding-right:3rem;
  transition:transform .2s ease,box-shadow .2s ease;
}
.tea:hover{transform:translateY(-2px);box-shadow:0 12px 26px rgba(0,0,0,.22)}
.tea__price{
  display:block;margin-top:.5rem;font-weight:800;font-size:.9rem;
  font-variant-numeric:tabular-nums;opacity:.92;
}
.madd--card{
  position:absolute;right:.7rem;bottom:.7rem;
  background:rgba(255,255,255,.92);border-color:transparent;color:#2C2E2D;
}
.tea--dark .madd--card{background:rgba(255,255,255,.9)}
.madd--card:hover{background:#fff;color:#000}

/* V19b — neutralise les anciennes pastilles (V13) */
.ochip{
  position:relative;overflow:visible;
  border:1.5px solid #E2DACE;background:var(--white);color:var(--dark);
  padding:.55rem .85rem;font-size:.88rem;font-weight:600;box-shadow:none;
}
.ochip::before,.ochip::after,.ochip.is-on::after,.ochip:hover::before{content:none!important;display:none!important}
.ochip:hover{
  transform:translateY(-1px);border-color:var(--tan);color:var(--dark);
  background:var(--white);box-shadow:0 4px 12px rgba(44,46,45,.08);
}
.ochip.is-on{
  background:var(--dark);border-color:var(--dark);color:var(--white);
  font-weight:800;box-shadow:0 6px 16px rgba(44,46,45,.22);transform:none;
}
.ochip b{
  margin-left:.35rem;padding:.1rem .4rem;border-radius:999px;
  font-size:.72rem;font-weight:700;background:#F3EDE4;color:#8A7A63;opacity:1;
}
.ochip.is-on b{background:rgba(255,255,255,.18);color:#fff}
.ochip--size{
  flex-direction:column;justify-content:center;gap:.25rem;
  padding:.85rem .6rem;border-radius:16px;font-size:1.05rem;font-weight:800;
}
.ochip--size b{margin-left:0;font-size:.85rem}
.omodal__foot{
  padding:.95rem 1.35rem calc(1.1rem + env(safe-area-inset-bottom,0px));
  background:var(--white);border-top:1px solid #EFE8DE;
}
.obtn{text-transform:none;letter-spacing:0}

/* ============================================================
   V20 — composeur : ambiance French Coffee Shop (sombre + taupe)
   ============================================================ */
.omodal__box{
  background:linear-gradient(178deg,#333634 0%,#2A2C2B 55%,#242625 100%);
  color:var(--cream-2);
  box-shadow:0 -22px 70px rgba(0,0,0,.5);
}
@media(min-width:700px){.omodal__box{box-shadow:0 34px 90px rgba(0,0,0,.5)}}

.omodal__head{
  background:linear-gradient(120deg,rgba(221,184,146,.16),rgba(221,184,146,.04));
  border-bottom:1px solid rgba(221,184,146,.22);
}
.omodal__photo{box-shadow:0 8px 22px rgba(0,0,0,.35);background:#3A3D3B}
.omodal__id h3{color:#FFFFFF}
.omodal__id p{color:#B7B0A6}

.omodal__close{
  background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.16);color:#F2EDE6;
}
.omodal__close:hover{background:var(--tan);border-color:var(--tan);color:#2C2E2D}

.omodal__body{background:transparent}
.ogroup__label{color:#F5F0E8}
.ogroup__step{background:var(--tan);color:#2C2E2D}
.ogroup.is-done .ogroup__step{background:#8FBF7A;color:#1F2620}
.ogroup__req{background:rgba(221,184,146,.18);color:var(--tan)}
.ogroup__opt{background:rgba(255,255,255,.08);color:#A29B91}
.ogroup__tick{stroke:#8FBF7A}

.ochip{
  border:1.5px solid rgba(221,184,146,.32);
  background:rgba(255,255,255,.045);
  color:#F0EBE3;
  box-shadow:none;
}
.ochip:hover{
  border-color:var(--tan);color:#FFFFFF;
  background:rgba(221,184,146,.14);
  box-shadow:0 5px 14px rgba(0,0,0,.25);
}
.ochip.is-on{
  background:linear-gradient(180deg,#EBC9A4,var(--tan));
  border-color:#EBC9A4;color:#3A2818;font-weight:800;
  box-shadow:0 7px 18px rgba(221,184,146,.30);
}
.ochip b{background:rgba(221,184,146,.16);color:var(--tan)}
.ochip.is-on b{background:rgba(58,40,24,.16);color:#3A2818}

/* pastilles de saveur colorées */
.ochip--flav{border-color:color-mix(in srgb, var(--fc) 55%, transparent)}
.ochip__dot{
  width:11px;height:11px;border-radius:999px;background:var(--fc);
  display:inline-block;flex:0 0 auto;order:-1;margin-right:.1rem;
  box-shadow:0 0 0 2px rgba(255,255,255,.14);
}
.ochip--flav:hover{
  border-color:var(--fc);
  background:color-mix(in srgb, var(--fc) 20%, transparent);
  color:#fff;
}
.ochip--flav.is-on{
  background:var(--fc);border-color:var(--fc);color:var(--ft);
  box-shadow:0 8px 20px color-mix(in srgb, var(--fc) 45%, transparent);
}
.ochip--flav.is-on .ochip__dot{background:var(--ft);box-shadow:0 0 0 2px color-mix(in srgb, var(--ft) 25%, transparent)}
.ochip--flav.is-on b{background:rgba(0,0,0,.16);color:inherit}

/* tuiles de taille */
.ochip--size{
  border-color:rgba(221,184,146,.35);
  background:rgba(255,255,255,.05);
}
.ochip--size.is-on{background:linear-gradient(180deg,#EBC9A4,var(--tan));color:#3A2818}

.omodal__foot{
  background:rgba(0,0,0,.28);
  border-top:1px solid rgba(221,184,146,.20);
  box-shadow:none;
}
.omodal__sumtxt{color:#EDE7DE}
.omodal__sumtxt.is-todo{color:var(--tan)}
.omodal__price{color:#FFFFFF}
.obtn{
  background:linear-gradient(180deg,#EBC9A4,var(--tan));color:#33220F;
  box-shadow:0 8px 20px rgba(221,184,146,.26);
}
.obtn:hover{background:linear-gradient(180deg,#F2D6B6,#E4C29C);color:#33220F}
.obtn:disabled{background:rgba(255,255,255,.12);color:#8E8880;box-shadow:none}
.obtn--ghost{
  background:transparent;border:1.5px solid rgba(221,184,146,.35);color:#CFC7BB;box-shadow:none;
}
.obtn--ghost:hover{background:rgba(221,184,146,.12);color:#FFFFFF}

/* V20b — plus de pastilles rondes avant les noms */
.ochip__dot{display:none!important}
.ochip__emo{font-style:normal;font-size:1.02em;line-height:1;margin-right:.05rem;flex:0 0 auto}

/* ============================================================
   V21 — Les thés : lignes alignées, saveurs en couleur
   ============================================================ */
.teas{
  display:grid!important;gap:.55rem;
  grid-template-columns:1fr!important;
}
@media(min-width:820px){.teas{grid-template-columns:1fr 1fr!important;column-gap:.9rem}}

.tea{
  position:relative;display:grid;align-items:center;
  grid-template-columns:4px minmax(0,1fr) auto 38px;
  gap:.85rem;padding:.7rem .8rem .7rem .7rem;
  background:rgba(255,255,255,.055)!important;
  border:1px solid rgba(255,255,255,.09);
  border-radius:14px;text-align:left;color:#F2EFE9;
  transition:background .2s ease,border-color .2s ease,transform .2s ease;
  min-height:66px;
}
.tea:hover{
  background:rgba(255,255,255,.10)!important;
  border-color:color-mix(in srgb, var(--tc) 55%, transparent);
  transform:none;box-shadow:none;
}
.tea__bar{
  width:4px;height:100%;min-height:38px;border-radius:99px;
  background:var(--tc);display:block;align-self:stretch;
}
.tea__txt{display:flex;flex-direction:column;gap:.15rem;min-width:0}
.tea__name{
  font-family:var(--font-display,inherit);
  font-size:1rem;font-weight:700;line-height:1.2;color:var(--tt);
  letter-spacing:.005em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.tea__meta{
  font-size:.74rem;letter-spacing:.05em;text-transform:uppercase;
  color:#A8B4A6;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.tea__price{
  font-size:.9rem;font-weight:800;color:#EFEAE1;
  font-variant-numeric:tabular-nums;white-space:nowrap;
}
.tea__type,.tea__flav{display:none}
.madd--card{
  position:static;justify-self:end;
  width:34px;height:34px;
  background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.18);color:#F2EFE9;
}
.madd--card:hover{background:var(--tc);border-color:var(--tc);color:#fff}
.teabox__head p{margin-top:.35rem}
.tea__bar{background:var(--tt)!important}
.tea:hover{border-color:color-mix(in srgb, var(--tt) 50%, transparent)}
.madd--card:hover{background:var(--tt);border-color:var(--tt);color:#1E2A20}

/* V22 — prix promo barré + section Goodies sans vide */
.mitem__price--promo s{
  text-decoration:line-through!important;
  text-decoration-color:currentColor;text-decoration-thickness:1.5px;
  font-size:.9rem;
}
#goodies .mitems{grid-template-columns:1fr!important;max-width:640px}
#goodies{padding-bottom:clamp(1.5rem,3vw,2.25rem)}

/* V23 — les thés dans la fenêtre : cartes colorées */
.ochips--cards{display:grid!important;grid-template-columns:1fr;gap:.5rem}
@media(min-width:560px){.ochips--cards{grid-template-columns:1fr 1fr}}
.ocard{
  display:grid;grid-template-columns:4px minmax(0,1fr);gap:.7rem;align-items:center;
  padding:.65rem .8rem;min-height:60px;cursor:pointer;text-align:left;
  background:rgba(255,255,255,.05);border:1.5px solid rgba(255,255,255,.10);
  border-radius:14px;color:#F2EFE9;
  transition:background .18s ease,border-color .18s ease,transform .12s ease;
}
.ocard:hover{
  background:rgba(255,255,255,.10);
  border-color:color-mix(in srgb, var(--tt) 55%, transparent);
  transform:translateY(-1px);
}
.ocard:active{transform:scale(.985)}
.ocard__bar{width:4px;height:100%;min-height:34px;border-radius:99px;background:var(--tt);align-self:stretch}
.ocard__txt{display:flex;flex-direction:column;gap:.12rem;min-width:0}
.ocard__name{font-size:.95rem;font-weight:700;line-height:1.2;color:var(--tt);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ocard__meta{font-size:.68rem;letter-spacing:.05em;text-transform:uppercase;color:#A29B91;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ocard.is-on{
  background:color-mix(in srgb, var(--tt) 22%, transparent);
  border-color:var(--tt);
  box-shadow:0 6px 18px color-mix(in srgb, var(--tt) 30%, transparent);
}
.ocard.is-on .ocard__name{color:#fff}
.ocard.is-on .ocard__meta{color:#DDD7CE}

/* V23b — la fenêtre ne doit jamais deborder de l'ecran (barre d'URL mobile) */
.omodal__box{
  max-height:92vh;
  max-height:92dvh;
}
@media(max-width:699px){
  .omodal{align-items:flex-end;padding-top:env(safe-area-inset-top,0px)}
  .omodal__box{max-height:86dvh}
}
.omodal__head{position:sticky;top:0;z-index:3;flex:0 0 auto}
.omodal__body{min-height:0;overscroll-behavior:contain}
.omodal__foot{flex:0 0 auto}
.omodal__close{position:absolute;top:.7rem;right:.7rem;z-index:5}

/* V23c — securite iOS : la fenetre reste toujours entierement visible */
.omodal{
  align-items:flex-end;
  padding:0;
  height:100%;
  height:100dvh;
}
@media(min-width:700px){.omodal{align-items:center;padding:2rem 1rem}}
.omodal__box{
  max-height:calc(100% - 2.5rem);
  margin-top:auto;
}
@media(min-width:700px){.omodal__box{max-height:calc(100dvh - 4rem);margin-top:0}}

/* V24 — element inclus dans une formule */
.ogroup__inc{
  font-size:.64rem;font-weight:800;letter-spacing:.07em;text-transform:uppercase;
  padding:.18rem .45rem;border-radius:999px;flex:0 0 auto;
  background:rgba(143,191,122,.20);color:#9FD08A;
}
.ogroup--fixed .ogroup__step{background:#8FBF7A;color:#1F2620}
.ochip--fixed{cursor:default!important;opacity:1}
.ochip--fixed:hover{transform:none;box-shadow:0 6px 16px rgba(44,46,45,.22)}

/* ============================================================
   V25 — écran « Ma commande »
   ============================================================ */
.cart__see{
  display:block;width:100%;margin:.6rem 0 .5rem;padding:.8rem 1rem;
  border:0;border-radius:12px;cursor:pointer;font-weight:800;font-size:.92rem;
  background:linear-gradient(180deg,#EBC9A4,var(--tan));color:#33220F;
  transition:transform .12s ease,filter .2s ease;
}
.cart__see:hover{filter:brightness(1.05)}
.cart__see:active{transform:scale(.98)}

.oscreen{
  position:fixed;inset:0;z-index:200;display:none;flex-direction:column;
  background:linear-gradient(178deg,#333634 0%,#2A2C2B 55%,#242625 100%);
  color:var(--cream-2);
}
.oscreen.is-open{display:flex}
.oscreen__bar{
  display:grid;grid-template-columns:40px 1fr auto;align-items:center;gap:.6rem;
  padding:calc(.8rem + env(safe-area-inset-top,0px)) 1rem .8rem;
  border-bottom:1px solid rgba(221,184,146,.22);
  background:linear-gradient(120deg,rgba(221,184,146,.16),rgba(221,184,146,.04));
  flex:0 0 auto;
}
.oscreen__bar h2{
  margin:0;font-size:1.1rem;font-weight:800;color:#fff;text-transform:none;letter-spacing:0;
}
.oscreen__back{
  width:38px;height:38px;border-radius:999px;cursor:pointer;display:grid;place-items:center;
  background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.16);color:#F2EDE6;
}
.oscreen__back svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.oscreen__clear{
  background:transparent;border:1.5px solid rgba(221,184,146,.35);color:#CFC7BB;
  border-radius:999px;padding:.42rem .8rem;font-size:.76rem;font-weight:700;cursor:pointer;
}
.oscreen__clear:hover{background:rgba(221,184,146,.12);color:#fff}
.oscreen__scroll{flex:1 1 auto;overflow-y:auto;padding:1rem;min-height:0;-webkit-overflow-scrolling:touch}
.oscreen__list{list-style:none;margin:0;padding:0;display:grid;gap:.6rem;max-width:720px;margin-inline:auto}
.oscreen__empty{text-align:center;color:#A29B91;padding:2.5rem 0}
.oscreen__note{
  max-width:720px;margin:1.2rem auto 0;text-align:center;
  font-size:.82rem;color:#A29B91;line-height:1.5;
}

.oline{
  display:grid;grid-template-columns:64px minmax(0,1fr) auto 30px;
  gap:.8rem;align-items:center;padding:.7rem;
  background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.09);border-radius:16px;
}
.oline__img{width:64px;height:64px;border-radius:12px;object-fit:cover;display:block;background:#3A3D3B}
.oline__img--none{background:rgba(255,255,255,.06)}
.oline__txt{min-width:0}
.oline__name{margin:0;font-size:.98rem;font-weight:800;color:#FFF;line-height:1.25}
.oline__opt{margin:.2rem 0 0;font-size:.8rem;color:var(--tan);line-height:1.35}
.oline__price{margin:.25rem 0 0;font-size:.82rem;color:#A29B91;font-variant-numeric:tabular-nums}
.oline__qty{display:flex;align-items:center;gap:.15rem}
.oline__qty button{
  width:30px;height:30px;border-radius:999px;cursor:pointer;font-size:1rem;line-height:1;
  background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.18);color:#F2EFE9;
}
.oline__qty button:hover{background:var(--tan);border-color:var(--tan);color:#33220F}
.oline__qty b{min-width:22px;text-align:center;font-variant-numeric:tabular-nums;font-size:.95rem}
.oline__del{
  width:28px;height:28px;border-radius:999px;cursor:pointer;display:grid;place-items:center;
  background:transparent;border:1px solid rgba(255,255,255,.14);color:#9C978F;
}
.oline__del:hover{background:#B4462F;border-color:#B4462F;color:#fff}
.oline__del svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round}
@media(max-width:420px){
  .oline{grid-template-columns:54px minmax(0,1fr) auto;gap:.6rem;padding:.6rem}
  .oline__img{width:54px;height:54px}
  .oline__del{grid-column:3;justify-self:end;margin-top:.4rem}
  .oline__qty{grid-column:3;grid-row:1}
}
.oscreen__foot{
  display:flex;align-items:baseline;justify-content:space-between;gap:1rem;
  padding:1rem 1.2rem calc(1.2rem + env(safe-area-inset-bottom,0px));
  border-top:1px solid rgba(221,184,146,.20);background:rgba(0,0,0,.28);flex:0 0 auto;
}
.oscreen__foot span{font-size:.86rem;color:#CFC7BB;font-weight:600}
.oscreen__total{font-size:1.3rem;font-weight:800;color:#fff;font-variant-numeric:tabular-nums}

/* ============================================================
   V26 — logos réseaux : toujours lisibles
   ============================================================ */
/* le logo suit toujours la couleur du texte, jamais de fill fige */
.socials a svg{fill:currentColor;color:inherit}

/* fond clair : logo fonce -- fond fonce : logo blanc. Les deux changent ensemble. */
.socials a,
.socials a:link,
.socials a:visited{background:transparent;border-color:rgba(255,255,255,.28);color:#FFFFFF}
.socials a:hover,
.socials a:focus,
.socials a:focus-visible,
.socials a:active{
  background:var(--tan)!important;border-color:var(--tan)!important;color:#2C2E2D!important;
}
.socials--dark a,
.socials--dark a:link,
.socials--dark a:visited{background:transparent;border-color:var(--line);color:var(--dark)}
.socials--dark a:hover,
.socials--dark a:focus,
.socials--dark a:focus-visible,
.socials--dark a:active{background:var(--dark)!important;border-color:var(--dark)!important;color:#FFFFFF!important}

/* ecran tactile : aucun effet colle apres un tap, le logo reste intact */
@media(hover:none){
  .socials a:hover,.socials a:focus,.socials a:focus-visible,.socials a:active{
    background:transparent!important;border-color:rgba(255,255,255,.28)!important;color:#FFFFFF!important;
  }
  .socials--dark a:hover,.socials--dark a:focus,
  .socials--dark a:focus-visible,.socials--dark a:active{
    background:transparent!important;border-color:var(--line)!important;color:var(--dark)!important;
  }
}

/* menu plein ecran : plus d'air entre les entrees sur telephone */
@media(max-width:760px){
  .menu__list{gap:.45rem}
  .menu__list a{padding:1.1rem .2rem}
  .menu__list span{font-size:clamp(1.75rem,6.4vw,2.6rem);line-height:1.06}
  .menu__socials{margin-top:2rem}
}
@media(max-width:760px) and (max-height:700px){
  .menu__list{gap:.3rem}
  .menu__list a{padding:.85rem .2rem}
  .menu__list span{font-size:1.55rem}
}

/* V27 — Uber Eats : sur telephone la photo fait office de titre */
@media(max-width:820px){
  .deliv > div > h2{display:none}
  .deliv > div > .rule{display:none}
}

/* V28 — groupes a choix multiple */
.ogroup__multi{
  font-size:.6rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  padding:.16rem .42rem;border-radius:999px;flex:0 0 auto;
  background:rgba(255,255,255,.09);color:#BDB6AC;margin-right:.1rem;
}

/* V29 — prix et pastilles sur la meme ligne */
.mitem__bottom{
  display:flex;align-items:center;flex-wrap:wrap;
  gap:.4rem .7rem;margin-top:.5rem;
}
.mitem__bottom .mitem__price{margin:0;flex:0 0 auto}
.mitem__bottom .mitem__tags{margin-top:0;flex:1 1 auto;min-width:0}
@media(max-width:520px){
  .mitem__bottom{gap:.3rem .5rem}
}

/* ---------- V30 : ecran "Ma commande" — options plus lisibles,
   croix en haut a droite, quantite en bas a droite ---------- */
.oscreen__list .oline{
  grid-template-columns:76px minmax(0,1fr) auto;
  grid-template-rows:auto auto;
  align-items:start;gap:.55rem .85rem;padding:.85rem;
}
.oscreen__list .oline__img{grid-column:1;grid-row:1 / 3;align-self:center;width:76px;height:76px}
.oscreen__list .oline__txt{grid-column:2;grid-row:1 / 3;align-self:center}
.oscreen__list .oline__del{grid-column:3;grid-row:1;justify-self:end;align-self:start;margin:0}
.oscreen__list .oline__qty{grid-column:3;grid-row:2;justify-self:end;align-self:end;margin:0}
.oscreen__list .oline__name{font-size:1.06rem;line-height:1.2}
.oscreen__list .oline__opt{
  margin:.3rem 0 0;font-size:1rem;font-weight:600;color:#F0E6D8;line-height:1.4;
}
.oscreen__list .oline__price{margin:.35rem 0 0;font-size:.86rem}
.oscreen__list .oline__del{width:30px;height:30px}
.oscreen__list .oline__del svg{width:14px;height:14px}
@media(max-width:420px){
  .oscreen__list .oline{grid-template-columns:64px minmax(0,1fr) auto;gap:.5rem .7rem;padding:.7rem}
  .oscreen__list .oline__img{width:64px;height:64px}
  .oscreen__list .oline__name{font-size:1rem}
  .oscreen__list .oline__opt{font-size:.96rem}
}

/* ---------- V31 : menu plein écran — aérer l'espace entre les mots ---------- */
.menu__list span{word-spacing:.16em}
@media(max-width:640px){
  .menu__list span{word-spacing:.12em}
}

/* ---------- V32 : cartes d'options (thés, grands crus) — la ligne de detail
   peut passer sur 2 lignes plutot que d'etre coupee ---------- */
.ocard__meta{
  white-space:normal;overflow:visible;text-overflow:clip;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;line-height:1.3;
}

/* ---------- V33 : groupe d'options imposé (chantilly automatique) ---------- */
.ogroup.is-forced .ochip{cursor:default}
.ogroup.is-forced .ochip:hover{transform:none}
.ogroup.is-forced .ogroup__opt{
  background:rgba(122,155,111,.18);color:#9FCB90;border-color:rgba(122,155,111,.35);
}

/* deploy webza 2026-09-09 */