/* ══════════════════════════════════════════════════════════════════════
   FLASH APÉRO — CATALOGUE EN CARTES
   Ce fichier vient APRÈS style.css et ne touche qu'au catalogue.
   Le header, le hero, le pied de page et le tiroir du panier restent
   pilotés par style.css : ne rien y redéfinir.
   ══════════════════════════════════════════════════════════════════════ */
:root{ --t:255,46,136 }

/* la colonne sommaire, à gauche du catalogue seulement */
.cat{display:grid;grid-template-columns:1fr;gap:26px;max-width:var(--wrap);margin:0 auto;padding:0 20px}

@media(min-width:1040px){ .cat{grid-template-columns:224px 1fr;gap:34px} }
.somm{display:none}
@media(min-width:1040px){
  .somm{display:block;position:sticky;top:calc(var(--hdr-h) + 14px);align-self:start}
}
.somm__t{font-size:11px;letter-spacing:1.8px;text-transform:uppercase;color:var(--faint);
  font-weight:800;margin:0 0 10px;padding-left:6px}
.somm ul{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.somm a{display:flex;align-items:center;gap:11px;min-height:50px;padding:8px 13px;
  border-radius:12px;text-decoration:none;color:var(--muted);font-weight:800;font-size:14.5px;
  border:1px solid transparent;transition:background .14s,color .14s}
.somm a:hover{background:rgba(255,255,255,.05);color:var(--cream)}
.somm a:focus-visible{outline:3px solid var(--yellow);outline-offset:2px}
.somm a em{font-style:normal;font-size:11px;letter-spacing:1px;color:var(--faint);
  width:20px;text-align:center;flex:0 0 auto;font-weight:800}
.somm a[aria-current="true"]{background:var(--pink-btn);color:#fff;border-color:var(--pink)}
.somm a[aria-current="true"] em{color:rgba(255,255,255,.72)}
.somm__f{margin-top:20px;padding-top:16px;border-top:1px solid var(--line);
  font-size:12.5px;color:var(--faint)}


/* ── Le sommaire est centré verticalement dans la fenêtre, plus collé en haut.
   L'entrée active ne s'aplatit plus en rose : un néon traverse la ligne. ── */
/* Le sommaire occupe toute la hauteur visible sous l'en-tête et centre son
   contenu à l'intérieur. C'est ce qui donne exactement la même marge en haut
   et en bas, sans transform — un sticky translaté sort de son conteneur. */
@media(min-width:1040px){
  .somm{
    position:sticky;
    top:var(--hdr-h);
    height:calc(100dvh - var(--hdr-h));
    margin-top:0;padding:12px 0;
    display:flex;flex-direction:column;justify-content:center;
    overflow-y:auto;scrollbar-width:none
  }
  .somm::-webkit-scrollbar{display:none}
  .somm__t{flex:0 0 auto}
  .somm ul{flex:0 0 auto}
  .somm__f{flex:0 0 auto}
}

/* une section de catalogue */
.sec{scroll-margin-top:calc(var(--hdr-h) + 14px);padding:10px 0 40px}
.sec__h{display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap;margin:0 0 4px}
.sec h2{font-family:'Anton',sans-serif;font-weight:400;text-transform:uppercase;
  font-size:clamp(25px,3.6vw,36px);line-height:1.03;margin:0}
.sec__c{font-size:12.5px;color:var(--faint);font-weight:800;letter-spacing:1.2px;text-transform:uppercase}
.sec__l{color:var(--muted);font-size:14.5px;margin:0 0 20px;max-width:760px}
.sec__l b{color:var(--yellow)}

/* le rappel de ce qui est inclus dans la formule — c'est une liste, pas un choix */
.rappel{margin:0 0 20px;padding:14px 16px;border-left:3px solid var(--yellow);
  background:rgba(255,212,71,.06);border-radius:0 12px 12px 0;font-size:13.5px;color:var(--muted)}
.rappel b{color:var(--cream)}
.rappel span{color:var(--faint);font-size:12.5px}

/* ══════════ LA CARTE — un seul template, deux tailles ══════════ */
.grid{display:grid;gap:20px;
  grid-template-columns:repeat(auto-fill,minmax(min(300px,100%),1fr))}
.grid--sm{grid-template-columns:repeat(auto-fill,minmax(min(210px,100%),1fr))}
@media(max-width:480px){.grid--sm{grid-template-columns:repeat(2,1fr);gap:12px}}

.c{position:relative;border-radius:24px;background:var(--ink-2);isolation:isolate;--ang:0deg}
/* Le néon est STATIQUE par défaut : 50 bordures animées en continu vident la
   batterie. Il se met à tourner au survol et au focus clavier. */
.c::before{content:'';position:absolute;inset:-2px;border-radius:26px;z-index:0;
  background:conic-gradient(from var(--ang),
    rgba(var(--t),0) 0deg,rgba(var(--t),0) 200deg,
    rgb(var(--t)) 268deg,#FFD447 300deg,rgb(var(--t)) 330deg,rgba(var(--t),0) 360deg);
  padding:2px;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude}
.c:hover::before,.c:focus-within::before{animation:tour 3.6s linear infinite}
.c::after{content:'';position:absolute;inset:-1px;border-radius:25px;z-index:0;pointer-events:none;
  box-shadow:0 0 18px -4px rgba(var(--t),.45),0 0 40px -12px rgba(var(--t),.28)}
@property --ang{syntax:'<angle>';initial-value:0deg;inherits:false}
@keyframes tour{to{--ang:360deg}}

.c__in{position:relative;z-index:1;border-radius:22px;overflow:hidden;background:var(--ink-2);
  display:flex;flex-direction:column;height:100%}
.c__vis{position:relative;flex:0 0 auto;height:300px;
  background:#0a0410 url('../img/p/fond-marque.webp') center/cover no-repeat}
.grid--sm .c__vis{height:170px}
@media(max-width:480px){.grid--sm .c__vis{height:140px}}
.c__vis::after{content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(6,5,10,0) 56%,rgba(6,5,10,.5) 80%,var(--ink-2) 100%)}
.c__vis img{position:absolute;left:50%;bottom:5%;transform:translateX(-50%);
  height:82%;width:auto;max-width:84%;object-fit:contain;z-index:2;
  filter:drop-shadow(0 0 24px rgba(var(--t),.5)) drop-shadow(0 12px 20px rgba(0,0,0,.8))}
.c__vis--todo{display:grid;place-items:center}
.c__vis--todo span{position:relative;z-index:2;display:grid;place-items:center;
  width:58%;aspect-ratio:1;border:2px dashed rgba(255,46,136,.55);border-radius:50%;
  font-size:9.5px;letter-spacing:1.4px;text-transform:uppercase;color:var(--muted);
  font-weight:800;text-align:center;line-height:1.35;padding:10px;background:rgba(6,5,10,.5)}
.raccourcis{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 20px}
.raccourcis a{display:inline-flex;align-items:center;gap:8px;min-height:48px;padding:0 18px;
  border:1px solid rgba(255,46,136,.4);border-radius:999px;text-decoration:none;
  color:var(--cream);font-weight:800;font-size:13.5px;background:rgba(255,46,136,.08);
  transition:background .14s}
.raccourcis a:hover{background:rgba(255,46,136,.18)}
.raccourcis a:focus-visible{outline:3px solid var(--yellow);outline-offset:2px}
.raccourcis em{font-style:normal;color:var(--yellow);font-size:16px}
.c__b{padding:16px 16px 15px;display:flex;flex-direction:column;flex:1}
.c__t{font-size:21px;min-height:44px;display:flex;align-items:flex-start}
.grid--sm .c__t{font-size:17px;min-height:38px}
.c__d{margin:6px 0 0;font-size:12.5px;color:var(--muted);line-height:1.45}
.c__d b{color:var(--yellow);font-weight:800}
.c__f{margin-top:auto;padding-top:14px}
.px{display:inline-block;font-family:'Anton',sans-serif;font-size:26px;line-height:1;
  background:var(--yellow);color:#120E04;border-radius:11px;padding:10px 13px 8px;min-width:80px;text-align:center}
.grid--sm .px{font-size:22px;padding:8px 11px 7px;min-width:68px}
.px sup{font-size:13px;vertical-align:super;margin-left:2px}
.px--tbc{background:transparent;color:var(--yellow);border:1px dashed rgba(255,212,71,.55);
  font-family:'Manrope',sans-serif;font-size:12.5px;font-weight:800;padding:12px 13px;letter-spacing:.4px}
.cta{display:block;width:100%;margin-top:12px;border:0;cursor:pointer;
  font-family:'Manrope',sans-serif;font-weight:800;font-size:13.5px;letter-spacing:1.4px;
  text-transform:uppercase;color:#fff;background:var(--pink-btn);border-radius:999px;min-height:48px;
  box-shadow:0 0 22px -10px rgba(255,46,136,.9);transition:transform .12s ease}
.cta:active{transform:scale(.97)}
.cta:disabled{background:#241E30;color:var(--faint);box-shadow:none;cursor:not-allowed}
.cta:focus-visible{outline:3px solid var(--yellow);outline-offset:3px}
.c__n{margin:10px 0 0;font-size:10.5px;color:var(--faint);line-height:1.4}
.c__n b{color:var(--yellow);font-weight:800}

/* ---- le sélecteur à deux segments, sous le titre ---- */
.seg{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:4px;margin:8px 0 2px;
  background:#16121F;border:1px solid var(--line);border-radius:999px;padding:4px}
.seg button{min-height:44px;border:0;border-radius:999px;background:transparent;cursor:pointer;
  font-family:inherit;font-weight:800;font-size:13px;color:var(--muted);line-height:1.1;
  padding:0 8px;transition:background .14s,color .14s}
.grid--sm .seg button{font-size:12px}
.seg button:hover{color:var(--cream)}
.seg button[aria-checked="true"]{background:var(--pink-btn);color:#fff}
.seg button:focus-visible{outline:3px solid var(--yellow);outline-offset:-2px}

/* Bouteilles hautes et fines : on remplit davantage la carte. */
.zoom .c__vis img{height:95%;max-width:92%;bottom:2%}
.zoom .grid--sm .c__vis img{height:92%}

/* teintes par catégorie : le halo change, le décor reste le même */
.t-alcool{--t:255,46,136}
.t-soft{--t:255,212,71}
.t-snack{--t:255,212,71}
.t-depan{--t:120,180,255}


.evin{margin:30px 0 0;padding:15px 17px;border:1px solid var(--line);border-radius:14px;
  color:var(--faint);font-size:12.5px}
.note{margin:0 0 20px;padding:13px 16px;border-left:3px solid var(--pink);
  background:rgba(255,46,136,.07);border-radius:0 12px 12px 0;font-size:13.5px;color:var(--muted)}
.note b{color:var(--cream)}
.anote{border-left-color:var(--yellow);background:rgba(255,212,71,.07);margin:22px 0 0}
.anote b{color:var(--yellow)}
.anote ul{margin:8px 0 0;padding-left:18px}
.anote li{margin:3px 0}


/* ══════════ ÉCRAN DE COMPOSITION ══════════ */
.ov{position:fixed;inset:0;z-index:200;display:none;background:rgba(3,2,6,.82);
  backdrop-filter:blur(6px);padding:16px;overflow-y:auto}
.ov:not([hidden]){display:block}
.mod{max-width:720px;margin:24px auto 40px;background:var(--ink-2);border:1px solid rgba(255,46,136,.35);
  border-radius:22px;overflow:hidden;box-shadow:0 30px 90px -20px #000}
.mod__h{display:flex;align-items:flex-start;gap:14px;padding:18px 20px;border-bottom:1px solid var(--line);
  background:rgba(255,46,136,.07);position:sticky;top:0;z-index:2;backdrop-filter:blur(8px)}
.mod__h h2{font-size:22px;flex:1}
.mod__h p{margin:5px 0 0;font-size:13px;color:var(--muted)}
.mod__x{width:44px;height:44px;flex:0 0 auto;border-radius:50%;border:1px solid var(--line);
  background:transparent;color:var(--cream);font-size:20px;cursor:pointer;line-height:1}
.mod__x:hover{background:rgba(255,255,255,.08)}
.mod__x:focus-visible{outline:3px solid var(--yellow);outline-offset:2px}
.mod__b{padding:18px 20px 8px}
.mod__t{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:0 0 12px}
.mod__t h3{font-size:17px}
.mod__cpt{font-size:12px;font-weight:800;letter-spacing:1px;text-transform:uppercase;color:var(--faint)}
.mod__cpt.full{color:var(--green)}
.mopts{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(200px,100%),1fr));gap:9px;margin:0 0 24px}
.mopt{position:relative}
.mopt input{position:absolute;opacity:0;width:1px;height:1px}
.mopt span{display:flex;align-items:center;gap:10px;min-height:56px;padding:8px 13px;cursor:pointer;
  border:1px solid var(--line);border-radius:14px;font-size:14px;font-weight:800;color:var(--muted);
  background:#15101F;transition:.14s;line-height:1.2}
.mopt span::before{content:'';width:20px;height:20px;flex:0 0 auto;border-radius:6px;
  border:2px solid rgba(255,255,255,.28);transition:.14s}
.mopt.rond span::before{border-radius:50%}
.mopt span:hover{color:var(--cream);border-color:rgba(255,46,136,.45)}
.mopt input:checked+span{color:#fff;border-color:var(--pink);background:rgba(255,46,136,.18)}
.mopt input:checked+span::before{background:var(--pink);border-color:var(--pink);
  box-shadow:inset 0 0 0 3px var(--ink-2)}
.mopt input:focus-visible+span{outline:3px solid var(--yellow);outline-offset:2px}
.mopt input:disabled+span{opacity:.38;cursor:not-allowed}
.mod__f{position:sticky;bottom:0;display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  padding:14px 20px calc(14px + env(safe-area-inset-bottom));
  border-top:1px solid var(--line);background:rgba(12,9,19,.97);backdrop-filter:blur(8px)}
.mod__r{flex:1;min-width:180px;font-size:12.5px;color:var(--muted);line-height:1.4}
.mod__r b{color:var(--cream)}
.mod__ok{border:0;cursor:pointer;font-family:inherit;font-weight:800;font-size:14px;letter-spacing:1.3px;
  text-transform:uppercase;color:#fff;background:var(--pink-btn);border-radius:999px;
  min-height:54px;padding:0 26px;box-shadow:0 0 24px -8px rgba(255,46,136,.9)}
.mod__ok:disabled{background:#2A2436;color:var(--faint);box-shadow:none;cursor:not-allowed}
.mod__ok:focus-visible{outline:3px solid var(--yellow);outline-offset:3px}
@media(max-width:520px){.mod{margin:8px auto 30px}.mod__ok{flex:1 1 100%}}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .c::before{background:rgb(var(--t))}
  *,*::before,*::after{animation:none!important;transition:none!important}
}


/* ══════════════════════════════════════════════════════════════════════
   INTRO NÉON — REFAITE
   Trois raisons au saccade de la version précédente : le logo était animé
   en `filter: blur()` et `brightness()`, l'anneau portait un box-shadow
   animé, et le centrage dépendait de la hauteur d'une colonne qui
   contenait aussi une ligne de texte.
   Ici : les anneaux sont DANS la scène, donc centrés sur le logo par
   construction ; on n'anime plus que `transform` et `opacity`, les deux
   seules propriétés que le navigateur sait composer sans repeindre.
   ══════════════════════════════════════════════════════════════════════ */
.intro{
  position:fixed;inset:0;z-index:120;background:var(--ink);
  display:grid;place-items:center;cursor:pointer;overflow:hidden;
  animation:v3-sortie 2.5s ease both
}
@keyframes v3-sortie{0%,80%{opacity:1}100%{opacity:0;visibility:hidden}}

/* La scène fait exactement la taille du logo : tout ce qu'elle contient
   est donc centré dessus, quelle que soit la fenêtre. */
.intro__scene{
  position:relative;width:min(300px,34vmin);aspect-ratio:1;
  display:grid;place-items:center
}
.intro__logo{
  position:relative;z-index:2;width:100%;height:auto;aspect-ratio:1;border-radius:50%;
  animation:v3-logo 1.1s cubic-bezier(.16,.84,.28,1) both;
  will-change:transform,opacity
}
@keyframes v3-logo{
  0%  {opacity:0;transform:scale(.84)}
  60% {opacity:1;transform:scale(1.015)}
  100%{opacity:1;transform:scale(1)}
}

/* Le halo ne fait que respirer en opacité : aucun flou animé. */
.intro__halo{
  position:absolute;z-index:1;width:190%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,rgba(255,46,136,.5),rgba(255,46,136,.12) 45%,transparent 68%);
  filter:blur(26px);
  animation:v3-halo 1.6s ease-out both;
  will-change:opacity
}
@keyframes v3-halo{0%{opacity:0}45%{opacity:.9}100%{opacity:.6}}

/* Trois anneaux identiques, décalés dans le temps : l'onde s'étale au lieu
   de sauter. Ils partent au bord du logo et vont chercher de la marge. */
.intro__ring{
  position:absolute;z-index:1;width:118%;aspect-ratio:1;border-radius:50%;
  border:2px solid var(--pink);
  box-shadow:0 0 26px rgba(255,46,136,.55), inset 0 0 18px rgba(255,46,136,.28);
  opacity:0;
  animation:v3-onde 2.1s cubic-bezier(.17,.75,.22,1) both;
  will-change:transform,opacity
}
.intro__ring--1{animation-delay:.06s}
.intro__ring--2{animation-delay:.34s;border-width:1.5px;opacity:0}
.intro__ring--3{animation-delay:.62s;border-width:1px;opacity:0}
@keyframes v3-onde{
  0%  {opacity:0;   transform:scale(.94)}
  14% {opacity:.95; transform:scale(1.04)}
  55% {opacity:.42; transform:scale(1.52)}
  100%{opacity:0;   transform:scale(2.05)}
}

/* On neutralise les deux ondes en pseudo-éléments de l'ancienne intro :
   sinon chaque anneau en porte deux de plus, avec une autre chorégraphie. */
.intro__ring::before,.intro__ring::after{display:none;animation:none;content:none}

.intro__word{
  position:absolute;left:0;right:0;top:calc(50% + min(150px,17vmin) + 34px);
  /* l'ancienne règle sortait le texte de l'écran : width:100vw et margin-left:-50vw */
  width:auto;margin:0;
  text-align:center;
  font-size:clamp(11px,1.5vw,15px);font-weight:800;letter-spacing:.34em;
  text-transform:uppercase;color:var(--cream);
  animation:v3-mot .7s cubic-bezier(.2,.8,.2,1) .8s both
}
@keyframes v3-mot{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

.intro__skip{
  position:absolute;bottom:34px;left:0;right:0;text-align:center;
  font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(247,244,238,.45);animation:v3-mot .7s ease 1.1s both
}

@media (prefers-reduced-motion:reduce){
  .intro,.intro__logo,.intro__halo,.intro__ring,.intro__word,.intro__skip{animation:none}
  .intro__ring--1{opacity:.9}
  .intro__halo{opacity:.6}
}

/* La composition de la formule se lit de loin, et les softs comptent
   autant que le paquet : ils sont en jaune tous les deux. */
.grid .c__d{font-size:15px;line-height:1.5}
.grid--sm .c__d{font-size:12.5px}
.c__d b{color:var(--yellow);font-weight:800}

/* La bande de réassurance passe de quatre à cinq colonnes : « À la porte »
   a été ajouté, et style.css la fige à quatre. */
.assur__grid{grid-template-columns:repeat(5,1fr)}
@media(max-width:1180px){ .assur__grid{grid-template-columns:repeat(3,1fr)} }
@media(max-width:860px){  .assur__grid{grid-template-columns:repeat(2,1fr)} }
@media(max-width:520px){  .assur__grid{grid-template-columns:1fr} }

/* ══════════════════════════════════════════════════════════════════════
   L'EN-TÊTE — logo, sept catégories réparties, et un seul bouton d'appel.
   Le bouton « Composer ma commande » a été retiré : il faisait doublon
   avec le catalogue qui commence deux écrans plus bas.
   ══════════════════════════════════════════════════════════════════════ */
.hdr__in{gap:22px;align-items:center}
.hdr__logo{width:104px;height:104px}
@media(min-width:861px){
  .hdr__nav{flex:1 1 auto;min-width:0;margin-left:0;gap:0;
    display:flex;align-items:center;justify-content:space-evenly;flex-wrap:nowrap}
}
.hdr__right{flex:0 0 auto;margin-left:0}

/* Le lien d'appel, en rose : c'est la seule action de l'en-tête. */
.telpink{
  display:inline-flex;flex-direction:column;align-items:center;justify-content:center;
  padding:9px 22px;border-radius:14px;text-decoration:none;line-height:1.15;
  background:var(--pink-btn);color:#fff;white-space:nowrap;min-height:56px;
  box-shadow:0 0 34px -10px rgba(255,46,136,.9);
  transition:transform .14s cubic-bezier(.2,.8,.3,1),box-shadow .22s ease}
.telpink small{font-size:9.5px;letter-spacing:.22em;text-transform:uppercase;opacity:.85;font-weight:800}
.telpink b{font-size:18px;letter-spacing:.02em;white-space:nowrap}
.telpink:hover{transform:translateY(-2px);box-shadow:0 0 46px -8px rgba(255,46,136,1)}
.telpink:active{transform:scale(.98)}
.telpink:focus-visible{outline:3px solid var(--yellow);outline-offset:3px}

/* ── Le liseré néon et le fond rose de survol ──
   Le libellé est dans un <span> : le liseré est porté par ce span, il passe
   donc AU-DESSUS du fond rose du lien et RESTE SOUS le texte. Sans ce span,
   le fond du lien recouvrirait le liseré. ── */
.navlink{
  position:relative;overflow:hidden;white-space:nowrap;
  padding:12px 16px;border-radius:12px;background:transparent;
  transition:background .2s ease,color .2s ease
}
.navlink:hover,.navlink:focus-visible{
  color:#fff;background:rgba(255,46,136,.20);
  box-shadow:inset 0 0 0 1px rgba(255,46,136,.42)
}
.navlink>span:first-child{position:relative;z-index:1;isolation:isolate;display:inline-block}
.navlink>span:first-child::before{
  content:'';position:absolute;z-index:-1;pointer-events:none;
  top:-320%;bottom:-320%;left:-260%;width:150%;
  /* cœur rose : une bande claire effacerait le libellé */
  background:linear-gradient(100deg,
    rgba(255,46,136,0) 0%, rgba(255,46,136,.55) 40%,
    rgba(255,110,170,.62) 54%, rgba(255,46,136,.48) 68%, rgba(255,46,136,0) 100%);
  transform:skewX(-22deg);filter:blur(5px);opacity:0
}
.navlink:hover>span:first-child::before,
.navlink:focus-visible>span:first-child::before{
  animation:v3-liser 1.15s cubic-bezier(.36,.64,.3,1) both}
@keyframes v3-liser{
  0%  {left:-260%; opacity:0}
  10% {opacity:1}
  90% {opacity:1}
  100%{left:320%;  opacity:0}
}
/* Le badge doré n'hérite ni de l'ombre du texte ni du liseré. */
.navlink .excl{text-shadow:none;position:relative;z-index:2}

/* le soulignement jaune ne sert plus qu'à dire où l'on est */
.navlink::after{bottom:6px;left:0;right:100%}
.navlink:hover::after{right:100%}
.navlink[aria-current="true"]{color:#fff;background:rgba(255,46,136,.14)}
.navlink[aria-current="true"]::after{left:16px;right:16px;box-shadow:0 0 12px var(--yellow)}

@media(max-width:1440px){
  .hdr__in{gap:14px;padding:10px 16px}
  .hdr__logo{width:86px;height:86px}
  .navlink{font-size:13px;letter-spacing:.03em;padding:12px 12px}
  .navlink[aria-current="true"]::after{left:12px;right:12px}
  .telpink{padding:8px 16px;min-height:50px}
  .telpink b{font-size:16px}
}
@media(max-width:1180px){
  .hdr__logo{width:74px;height:74px}
  .navlink{font-size:12px;padding:13px 9px}
  .navlink[aria-current="true"]::after{left:9px;right:9px}
  .telpink{padding:7px 13px}
  .telpink b{font-size:15px}
}
@media (prefers-reduced-motion:reduce){
  .navlink:hover>span:first-child::before,
  .navlink:focus-visible>span:first-child::before{animation:none;opacity:0}
}

/* Sous 620 px, on rend à style.css ses valeurs mobiles : sinon nos réglages
   de 1360 px les écrasent et volent 12 px de largeur là où il n'y en a plus. */
@media(max-width:620px){
  .hdr__logo{width:62px;height:62px}
  .hdr__in{gap:12px;padding:10px 14px}
  .telbox b{font-size:15px}
}

/* Le badge « Exclusivité », en doré, posé à côté du lien.
   Le soulignement du lien épouse le texte seul, pas le badge. */
.navlink--excl::after{display:none}
.navlink--excl>span:first-child{position:relative}
.navlink--excl>span:first-child::after{
  content:"";position:absolute;left:0;right:100%;bottom:-6px;height:2px;
  background:var(--yellow);transition:right .2s ease}
/* l'entrée Vody se souligne comme les autres quand elle est active */
.navlink--excl[aria-current="true"]>span:first-child::after{right:0;box-shadow:0 0 12px var(--yellow)}

.excl{
  display:inline-flex;align-items:center;flex:0 0 auto;
  font-family:'Manrope',system-ui,sans-serif;font-weight:800;
  font-size:9px;letter-spacing:1.1px;text-transform:uppercase;line-height:1;
  padding:5px 8px 4px;border-radius:999px;color:#1A1206;white-space:nowrap;
  background:linear-gradient(120deg,#F7D774,#FFF0B8 42%,#E0AE3C 78%,#FFE08A);
  box-shadow:0 0 14px -4px rgba(255,212,71,.8);
  border:1px solid rgba(255,240,184,.55)
}
/* Dans l'en-tête : le lien et le badge forment un couple insécable. */
.navlink--excl{display:inline-flex;align-items:center;gap:7px;white-space:nowrap}
.navlink--excl .excl{margin:0}
@media(max-width:1360px){ .navlink--excl .excl{font-size:8.5px;padding:4px 7px 3px} }
@media(max-width:1180px){ .navlink--excl .excl{display:none} }

/* Dans le sommaire : le badge est poussé à droite de la ligne. */
.somm a{gap:8px}
.somm a .excl{margin-left:auto;font-size:8.5px;padding:4px 7px 3px}
.somm a[aria-current="true"] .excl{box-shadow:none}

/* Sur le titre de section : plus gros, aligné sur la ligne de base. */
.excl--h2{font-size:11px;padding:6px 10px 5px;margin-left:12px;vertical-align:middle;
  transform:translateY(-3px)}

/* ══════════════════════════════════════════════════════════════════════
   AJOUTS DU 29/07 — packs Vody, Red Bull, sommaire centré
   ══════════════════════════════════════════════════════════════════════ */

/* Les visuels des packs Vody sont déjà composés : on les affiche en entier,
   sans le fond de marque, sinon on superpose deux décors. */
.c__vis--plein{background:#0a0410}
.c__vis--plein::after{background:linear-gradient(180deg,rgba(6,5,10,0) 62%,rgba(6,5,10,.45) 84%,var(--ink-2) 100%)}
.c__vis--plein img{height:88%;max-width:94%;bottom:6%}

/* Le lien de renvoi vers la page dédiée */
.lienfort{color:var(--yellow);font-weight:800;text-decoration:none;
  border-bottom:1px solid rgba(255,212,71,.4);white-space:nowrap}
.lienfort:hover{border-bottom-color:var(--yellow)}
.lienfort:focus-visible{outline:3px solid var(--yellow);outline-offset:3px}

/* ── Le sommaire est centré verticalement dans la fenêtre, plus collé en haut.
   L'entrée active ne s'aplatit plus en rose : un néon traverse la ligne. ── */
.somm a{position:relative;overflow:hidden;isolation:isolate;
  border:1px solid transparent;background:transparent}
/* la traînée de néon : elle balaie la ligne, elle ne la remplit pas */
.somm a::before{
  content:'';position:absolute;inset:0;z-index:-1;border-radius:12px;
  background:linear-gradient(100deg,
    transparent 0%, rgba(255,46,136,0) 30%,
    rgba(255,46,136,.55) 48%, rgba(255,212,71,.45) 56%,
    rgba(255,46,136,0) 74%, transparent 100%);
  background-size:260% 100%;background-position:130% 0;
  transition:background-position .55s cubic-bezier(.22,.75,.25,1),opacity .3s ease;
  opacity:0
}
.somm a:hover{color:var(--cream);background:transparent}
.somm a:hover::before{opacity:1;background-position:-30% 0}
/* le trait de gauche s'allume, c'est lui qui dit « vous êtes ici » */
.somm a::after{
  content:'';position:absolute;left:0;top:12%;bottom:12%;width:3px;border-radius:3px;
  background:var(--pink);box-shadow:0 0 12px var(--pink);
  transform:scaleY(0);transform-origin:center;
  transition:transform .28s cubic-bezier(.2,.8,.3,1)
}
.somm a:hover::after{transform:scaleY(.5)}
.somm a[aria-current="true"]{
  background:rgba(255,46,136,.10);color:#fff;border-color:rgba(255,46,136,.42);
  box-shadow:inset 0 0 22px -12px var(--pink)
}
.somm a[aria-current="true"]::after{transform:scaleY(1)}
.somm a[aria-current="true"]::before{opacity:.55;background-position:-30% 0}
.somm a[aria-current="true"] em{color:var(--yellow)}
@media (prefers-reduced-motion:reduce){
  .somm a::before{transition:none}
  .somm a::after{transition:none}
}

/* ══════════════════════════════════════════════════════════════════════
   PAGE ÉDITORIALE — fiche produit Vody
   ══════════════════════════════════════════════════════════════════════ */
.fil{padding:14px 0 0;font-size:12.5px;color:var(--faint)}
.fil a{color:var(--muted);text-decoration:none}
.fil a:hover{color:var(--yellow)}
.art{max-width:820px}
.art h1{font-family:'Anton',sans-serif;font-weight:400;text-transform:uppercase;
  font-size:clamp(28px,4.6vw,46px);line-height:1.04;margin:0 0 22px}
.art h2{font-family:'Anton',sans-serif;font-weight:400;text-transform:uppercase;
  font-size:clamp(21px,2.9vw,30px);line-height:1.1;margin:44px 0 14px;
  padding-top:22px;border-top:1px solid var(--line)}
.art h3{font-family:'Manrope',system-ui,sans-serif;font-weight:800;text-transform:none;
  font-size:18px;letter-spacing:0;margin:28px 0 10px;color:var(--cream)}
.art p{color:var(--muted);font-size:16px;line-height:1.72;margin:0 0 16px}
.art p b{color:var(--cream)}
.art a{color:var(--yellow)}
.chapo{font-size:18px!important;color:var(--cream)!important;line-height:1.62!important;
  padding:18px 20px;border-left:3px solid var(--pink);background:rgba(255,46,136,.07);
  border-radius:0 14px 14px 0;margin-bottom:26px!important}
.encart{padding:15px 18px;border-left:3px solid var(--yellow);background:rgba(255,212,71,.07);
  border-radius:0 14px 14px 0;font-size:14.5px!important}
.tbl{width:100%;border-collapse:collapse;margin:0 0 20px;font-size:14.5px}
.tbl th,.tbl td{text-align:left;padding:11px 13px;border-bottom:1px solid var(--line);color:var(--muted)}
.tbl th{font-size:11px;letter-spacing:1.4px;text-transform:uppercase;color:var(--faint);font-weight:800}
.tbl td:first-child{color:var(--cream);font-weight:700}
.qa{border:1px solid var(--line);border-radius:14px;background:var(--ink-2);margin:0 0 10px;overflow:hidden}
.qa>summary{list-style:none;cursor:pointer;padding:16px 18px;font-weight:800;font-size:15.5px;
  min-height:56px;display:flex;align-items:center}
.qa>summary::-webkit-details-marker{display:none}
.qa>summary::after{content:'+';margin-left:auto;color:var(--pink);font-size:20px}
.qa[open]>summary::after{content:'–'}
.qa>summary:hover{background:rgba(255,255,255,.04)}
.qa>summary:focus-visible{outline:3px solid var(--yellow);outline-offset:-3px}
.qa p{margin:0;padding:0 18px 18px;font-size:15px}
.art .grid{margin:0 0 20px}

/* Une carte sans photo garde le décor de marque, sans rien annoncer. */
.c__vis--vide::before{
  content:'';position:absolute;inset:0;z-index:1;
  background:radial-gradient(circle at 50% 62%, rgba(255,46,136,.22), transparent 62%)}

/* ══════════════════════════════════════════════════════════════════════
   LA FENÊTRE D'ACCUEIL DE L'OFFRE DU MOMENT — 30/07/2026

   z-index 105 : au-dessus de la page et du tiroir du panier (90), mais
   SOUS le portail d'âge (110) et l'intro néon (120). Même si un jour un
   enchaînement inattendu les faisait cohabiter, la fenêtre resterait
   derrière — elle ne peut pas masquer la question de la majorité.

   Les couleurs et les gabarits sont ceux de la section « Offres du
   moment » : cadre doré, pastille dorée, fond des cartes. Rien de neuf.
   Le bouton plein est en --pink-btn (#D62E88) et JAMAIS en --pink
   (#FF2E88), qui ne tient pas le contraste avec du blanc.
   ══════════════════════════════════════════════════════════════════════ */
.offrepop{position:fixed;inset:0;z-index:105;display:grid;place-items:center;padding:16px}
.offrepop[hidden]{display:none}
.offrepop__veil{position:absolute;inset:0;background:rgba(3,2,6,.86)}

.offrepop__bx{
  position:relative;z-index:1;width:100%;max-width:420px;
  display:flex;flex-direction:column;overflow:hidden;
  max-height:calc(100vh - 32px);
  max-height:calc(100dvh - 32px);
  border-radius:22px;border:1px solid rgba(255,212,71,.34);
  background:
    radial-gradient(120% 140% at 0% 0%, rgba(255,212,71,.09), transparent 60%),
    var(--ink-2);
  box-shadow:0 40px 100px -40px rgba(255,46,136,.6);
  animation:fa-pop .22s ease both
}

.offrepop__x{
  position:absolute;top:10px;right:10px;z-index:3;
  width:44px;height:44px;border-radius:50%;cursor:pointer;line-height:1;
  border:1px solid var(--line);background:rgba(6,5,10,.74);color:var(--cream);
  font-size:17px;font-family:inherit
}
.offrepop__x:hover{background:rgba(255,255,255,.14)}
.offrepop__x:focus-visible{outline:3px solid var(--yellow);outline-offset:2px}

/* Le flyer. La hauteur est FIXE : la place est réservée avant que l'image
   arrive, la fenêtre ne saute donc pas au chargement. object-fit:contain
   ne déforme jamais — un flyer très large comme un flyer très haut entre
   entier dans ce cadre, quitte à laisser du fond de part et d'autre. */
.offrepop__vis{
  flex:0 0 auto;height:clamp(140px,29vh,250px);
  background:#0a0410;overflow:hidden;
  border-bottom:1px solid var(--line)
}
.offrepop__vis[hidden]{display:none}
/* ⚠️ On donne à l'image la TAILLE DU CADRE, et c'est object-fit:contain qui
   la met à l'échelle. Écrire max-height:100% ne suffisait pas : le
   pourcentage ne se résolvait pas et un flyer portrait de 700 × 1100
   débordait du cadre en se faisant rogner en haut et en bas. */
.offrepop__vis img{
  width:100%;height:100%;max-width:100%;
  object-fit:contain;object-position:center
}

/* Seul le contenu défile, jamais la page derrière. */
.offrepop__b{padding:18px;overflow:auto}

.offrepop__badge{
  display:inline-block;margin:0 0 10px;padding:6px 12px 5px;border-radius:999px;
  font-family:'Anton',sans-serif;font-size:11px;letter-spacing:1.7px;
  text-transform:uppercase;color:#3A2A00;
  background:linear-gradient(180deg,#FFE79A,#FFD447)
}
.offrepop__badge[hidden]{display:none}

.offrepop__t{
  font-family:'Anton',sans-serif;font-weight:400;text-transform:uppercase;
  letter-spacing:.02em;font-size:clamp(19px,5vw,25px);line-height:1.12;
  color:var(--cream);margin:0
}
.offrepop__d{margin:9px 0 0;color:var(--muted);font-size:14px;line-height:1.5}
.offrepop__c{margin:8px 0 0;color:var(--yellow);font-size:13px;font-weight:800;line-height:1.45}
.offrepop__d[hidden],.offrepop__c[hidden],.offrepop__evin[hidden]{display:none}

/* La contrepartie sur les boissons sans alcool. Elle n'est pas décorative :
   c'est la condition posée par l'article L3323-1. */
.offrepop__evin{
  margin:11px 0 0;padding:10px 13px;border-left:3px solid var(--yellow);
  border-radius:0 10px 10px 0;background:rgba(255,212,71,.07);
  color:var(--yellow-soft);font-size:12.5px;line-height:1.45
}

/* Le message sanitaire reprend la mise en forme du pied de page. Deux
   niveaux de sélecteur, sinon la règle mobile de mobile.css, chargée plus
   tard, reprendrait la main sur les marges. */
.offrepop .sanitaire{margin-top:14px;padding:11px 13px;font-size:11.5px;text-align:left}

.offrepop__ok{
  display:flex;align-items:center;justify-content:center;text-align:center;
  width:100%;min-height:54px;margin:14px 0 0;border:0;border-radius:999px;
  cursor:pointer;text-decoration:none;
  background:var(--pink-btn);color:#fff;
  font-family:inherit;font-weight:800;font-size:15px;letter-spacing:.07em;
  text-transform:uppercase;
  box-shadow:0 0 34px -8px rgba(255,46,136,.85)
}
.offrepop__ok:hover{color:#fff;background:#C42879}
.offrepop__ok:focus-visible{outline:3px solid var(--yellow);outline-offset:3px}

.offrepop__non{
  display:block;width:100%;min-height:44px;margin:8px 0 0;
  border:0;background:none;cursor:pointer;font-family:inherit;
  font-size:13px;font-weight:700;color:var(--faint);text-decoration:underline
}
.offrepop__non:hover{color:var(--muted)}
.offrepop__non:focus-visible{outline:3px solid var(--yellow);outline-offset:2px;border-radius:10px}

/* ⚠️ La cible tactile fait 48 px de haut sur toute la largeur, et la case
   elle-même 24 px. Le portail d'âge de ce site a déjà eu une case de
   13 × 17 px : on ne refait pas cette erreur. */
.offrepop__case{
  display:flex;align-items:center;gap:12px;min-height:48px;
  margin:10px 0 0;padding:6px 2px;cursor:pointer;
  color:var(--muted);font-size:13px;line-height:1.35
}
.offrepop__case input{
  flex:0 0 auto;width:24px;height:24px;margin:0;cursor:pointer;
  accent-color:var(--pink-btn)
}
.offrepop__case input:focus-visible{outline:3px solid var(--yellow);outline-offset:3px}
.offrepop__case:hover{color:var(--cream)}

@media (prefers-reduced-motion:reduce){
  .offrepop__bx{animation:none}
}

/* ── Le flyer sur la carte de l'offre, dans la page ──
   Le cadre garde exactement les dimensions fixées par style.css et
   mobile.css : on ne change que le fond (le décor de marque n'a rien à
   faire derrière un flyer) et la façon dont l'image s'y pose. */
.offrec__vis--flyer{background:#0a0410}
.offrec__vis--flyer img{
  position:static;transform:none;left:auto;bottom:auto;
  width:100%;height:100%;max-width:100%;object-fit:contain
}
/* Sur grand écran le flyer mérite un peu plus de place. mobile.css ne
   contient que des max-width de 900 px : cette règle ne l'atteint jamais. */
@media(min-width:901px){
  .offrec__vis--flyer{width:132px;height:132px}
}

/* ══════════════════════════════════════════════════════════════════════════
   UNE CARTE DONT LE PRODUIT EST ÉPUISÉ CE SOIR
   Ajouté le 31/07/2026, en même temps que l'écran « État du service » qui
   permet enfin au gérant de signaler une rupture depuis son téléphone.

   La carte reste lisible et à sa place : on ne fait pas disparaître un
   produit momentanément indisponible, sinon le client croit s'être trompé de
   site. On l'estompe, et c'est le bouton qui dit pourquoi.
   ══════════════════════════════════════════════════════════════════════════ */
.c--out .c__vis{opacity:.38;filter:grayscale(1)}
.c--out .c__t,
.c--out .c__d,
.c--out .px{opacity:.55}
.c--out .cta{
  background:transparent;color:var(--muted);border:1px solid var(--line);
  cursor:not-allowed;letter-spacing:.02em
}
.c--out .cta:hover{filter:none}