/* --------------------------------------------------------------------------
   BANDEAU PUBLICITAIRE
   Occupe l'emplacement de l'ancien flux Instagram sur la page d'accueil.
   Les visuels defilent seuls, et sont pilotes depuis la caisse.

   Deux natures de visuel cohabitent :
   - « design » : une affiche composee en HTML/CSS. Elle se traduit dans les
     trois langues, reste nette a toutes les tailles et ne pese rien.
   - « image »  : un fichier televerse depuis la caisse, affiche tel quel.

   Regle de cout tenue partout : on n'anime que `transform` et `opacity`.
   -------------------------------------------------------------------------- */

.adband-sec{padding-top:8px}

.adband{position:relative;border-radius:var(--r-lg);overflow:hidden;
  aspect-ratio:1000/300;min-height:190px;
  box-shadow:0 22px 50px rgba(90,40,70,.16);background:#F7EFEA}
@media(max-width:640px){ .adband{aspect-ratio:4/3;min-height:0} }

/* Les affiches sont empilees ; seule l'active est opaque. Pas de `display`
   qui casserait la transition, ni de `left` qui forcerait une mise en page. */
.adb-slide{position:absolute;inset:0;opacity:0;pointer-events:none;
  transition:opacity .7s ease;display:grid;text-decoration:none;color:inherit}
.adb-slide.on{opacity:1;pointer-events:auto}

/* Visuel televerse : il remplit le cadre. */
.adb-slide.img img{width:100%;height:100%;object-fit:cover;display:block}

/* ------------------------------------------------------ AFFICHES COMPOSEES */
/* `grid-template-rows: minmax(0,1fr)` est indispensable : sans lui la rangee
   est en `auto`, une hauteur en pourcentage sur les enfants ne contraint rien,
   et c'est la taille NATURELLE du flacon (616 px) qui fixe la hauteur — le
   visuel debordait de moitie hors du bandeau. */
.adb-art{position:relative;display:grid;grid-template-columns:1.15fr .85fr;
  grid-template-rows:minmax(0,1fr);align-items:center;height:100%;overflow:hidden}
@media(max-width:640px){ .adb-art{grid-template-columns:1fr} }

.adb-txt{position:relative;z-index:2;padding:clamp(18px,3vw,40px);min-height:0;
  display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:8px}
.adb-kick{font:800 10.5px/1 var(--font);letter-spacing:.16em;text-transform:uppercase;
  padding:6px 12px;border-radius:999px;background:rgba(255,255,255,.22);
  border:1px solid rgba(255,255,255,.34);color:#fff}
.adb-h{font-family:var(--display);font-size:clamp(22px,3.4vw,42px);line-height:1.06;
  color:#fff;margin:0;text-shadow:0 2px 18px rgba(40,10,30,.22)}
.adb-p{font:600 clamp(12.5px,1.25vw,15px)/1.5 var(--font);color:rgba(255,255,255,.92);
  max-width:30em;margin:0}
.adb-cta{margin-top:6px;display:inline-flex;align-items:center;gap:8px;
  background:#fff;color:var(--ink);border-radius:999px;
  padding:11px 20px;font:800 13px/1 var(--font);
  box-shadow:0 12px 28px rgba(30,10,25,.24);
  transition:transform .22s cubic-bezier(.16,1,.3,1),box-shadow .22s}
.adb-slide:hover .adb-cta{transform:translateY(-2px);box-shadow:0 18px 36px rgba(30,10,25,.3)}

/* Cote visuel : les flacons, poses en biais. */
.adb-vis{position:relative;height:100%;min-height:0;overflow:hidden;
  display:grid;place-items:center}
/* Calage en absolu, comme sur les vignettes du catalogue : `.adb-vis` a
   maintenant une hauteur definie, mais sa propre rangee de grille est en
   `auto` — une hauteur en pourcentage y serait a nouveau sans effet et le
   flacon deborderait par le bas. */
.adb-vis img{position:absolute;inset:7% 8%;width:84%;height:86%;object-fit:contain;
  filter:drop-shadow(0 18px 34px rgba(30,10,30,.34))}
@media(max-width:640px){ .adb-vis{display:none} }

/* Fonds : degrades radiaux, jamais de `filter: blur()` plein cadre. */
.adb-six{background:
  radial-gradient(52% 74% at 78% 28%,rgba(255,255,255,.26),transparent 66%),
  radial-gradient(46% 70% at 12% 88%,rgba(245,176,46,.30),transparent 68%),
  linear-gradient(122deg,#7C3AED 0%,#C0399B 52%,#C63F48 100%)}
.adb-club{background:
  radial-gradient(50% 72% at 84% 20%,rgba(255,255,255,.24),transparent 66%),
  radial-gradient(46% 68% at 10% 92%,rgba(255,255,255,.16),transparent 68%),
  linear-gradient(122deg,#C63F48 0%,#B93B76 46%,#A66E12 100%)}
.adb-conseil{background:
  radial-gradient(52% 74% at 80% 24%,rgba(255,255,255,.22),transparent 66%),
  radial-gradient(44% 66% at 14% 90%,rgba(47,179,122,.30),transparent 68%),
  linear-gradient(122deg,#167A5E 0%,#1C7F9B 54%,#4165E0 100%)}

/* ------------------------------------------------------ AFFICHE BIENVENUE
   -15 % sur la premiere commande. Le chiffre occupe la colonne du visuel,
   en Secular One, comme un tampon : on le lit avant le reste. */
.adb-bienvenue{background:
  radial-gradient(50% 72% at 84% 22%,rgba(255,255,255,.26),transparent 66%),
  radial-gradient(46% 68% at 8% 94%,rgba(245,176,46,.28),transparent 68%),
  linear-gradient(122deg,#C63F48 0%,#C53C66 48%,#7C50E8 100%)}
.adb-pct{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;color:#fff}
.adb-pct b{font-family:var(--display);font-weight:400;font-size:clamp(64px,10vw,138px);line-height:.9;
  letter-spacing:-.02em;text-shadow:0 18px 40px rgba(60,10,40,.35);transform:rotate(-4deg)}
.adb-pct b small{font-size:.46em;margin-inline-start:4px;vertical-align:.62em}
.adb-pct span{font:800 clamp(11px,1.1vw,14px)/1.2 var(--font);letter-spacing:.14em;text-transform:uppercase;
  padding:6px 12px;border-radius:999px;background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.34)}
.adb-slide:hover .adb-pct b{transform:rotate(-4deg) scale(1.04);transition:transform .3s ease}
@media(prefers-reduced-motion:reduce){ .adb-slide:hover .adb-pct b{transform:rotate(-4deg)} }
/* « −15% » se lit de gauche a droite dans les trois langues : sans cela,
   l'hebreu retournait le signe moins de l'autre cote (« 15% — »). */
.adb-pct b{direction:ltr;unicode-bidi:isolate}
/* Au telephone, comme pour les autres affiches, la colonne du visuel
   disparait : le titre dit deja « 15 % ». */
@media(max-width:640px){ .adb-pct{display:none} }

/* --------------------------------------------------------- AFFICHE BIENTOT
   Nuit profonde plutot que degrade vif : les trois autres affiches sont
   lumineuses, celle-ci annonce ce qui n'est pas encore la. Les six cases
   portent seules la couleur — ce sont elles qu'on doit regarder. */
.adb-bientot{background:
  radial-gradient(48% 70% at 86% 12%,rgba(197,60,102,.42),transparent 70%),
  radial-gradient(44% 64% at 6% 96%,rgba(124,80,232,.40),transparent 70%),
  #1E0F2B}
.adb-bientot .adb-kick{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.26)}
/* Le nom de la marque en mot-symbole : large, espace, sans ombre portee. */
.adb-bientot .adb-h{font-size:clamp(30px,5vw,62px);letter-spacing:.06em;text-shadow:none}
.adb-bientot .adb-p{color:rgba(255,255,255,.78)}

/* Les six gouts. `grid-template-rows` fixe : sans lui, une composition plus
   longue que les autres etirerait sa rangee et la grille se decalerait. */
.adb-gouts{list-style:none;margin:0;padding:clamp(14px,2.4vw,30px);
  padding-inline-start:0;height:100%;min-height:0;box-sizing:border-box;
  display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(2,1fr);
  gap:clamp(6px,.9vw,11px);position:relative;z-index:2}
.adb-gouts li{position:relative;min-width:0;display:flex;flex-direction:column;justify-content:flex-end;
  padding:clamp(8px,1.1vw,14px);border-radius:14px;
  background:
    radial-gradient(90% 70% at 20% 0%,rgba(255,255,255,.22),transparent 60%),
    var(--teinte);
  color:var(--encre);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.14),0 10px 22px rgba(10,4,16,.32)}
/* Le flacon se tient debout au bout de la case ; le texte garde l'autre
   cote. En hebreu, `inset-inline-end` le met a gauche. */
.adb-gouts img{position:absolute;inset-inline-end:4%;bottom:7%;height:84%;width:auto;max-width:34%;
  object-fit:contain;pointer-events:none;
  filter:drop-shadow(0 8px 10px rgba(10,4,16,.38));transition:transform .3s ease}
.adb-slide:hover .adb-gouts img{transform:translateY(-4px)}
.adb-g-txt{position:relative;z-index:1;max-width:66%;display:flex;flex-direction:column;gap:3px}
/* Le nom passe a la ligne ENTRE les mots plutot que d'etre coupe :
   « Tropical S… » ne disait pas le gout, « Tropic / al Sky » non plus. */
.adb-gouts b{font-family:var(--display);font-weight:400;
  font-size:clamp(13px,1.25vw,17px);line-height:1.05;overflow-wrap:break-word;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.adb-g-txt span{font:600 clamp(9.5px,.85vw,11px)/1.3 var(--font);opacity:.86;overflow-wrap:break-word;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* Le moment de l'affiche : les cases s'allument une a une quand elle
   apparait. Transform et opacity seulement — la regle de ce fichier. */
.adb-slide.on .adb-gouts li{animation:adbAllume .55s cubic-bezier(.2,.8,.2,1) both}
.adb-slide.on .adb-gouts li:nth-child(2){animation-delay:.08s}
.adb-slide.on .adb-gouts li:nth-child(3){animation-delay:.16s}
.adb-slide.on .adb-gouts li:nth-child(4){animation-delay:.24s}
.adb-slide.on .adb-gouts li:nth-child(5){animation-delay:.32s}
.adb-slide.on .adb-gouts li:nth-child(6){animation-delay:.40s}
@keyframes adbAllume{from{opacity:0;transform:translateY(10px) scale(.96)}to{opacity:1;transform:none}}

/* Sur telephone, la place manque pour six noms : les cases deviennent une
   rangee de six flacons sous le texte. Les noms restent lus par les
   lecteurs d'ecran (masques a l'oeil seulement), et la page bientot.html
   les donne en grand. */
@media(max-width:640px){
  .adb-bientot .adb-txt{padding-bottom:6px}
  .adb-gouts{height:auto;padding:0 18px 18px;grid-template-columns:repeat(6,1fr);
    grid-template-rows:auto;gap:5px}
  .adb-gouts li{min-height:64px;padding:0;border-radius:10px}
  .adb-gouts img{inset-inline:0;margin-inline:auto;bottom:6%;max-width:86%;height:88%}
  .adb-g-txt{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
}

/* Motif discret, pour que l'aplat ne soit pas nu. */
.adb-art::before{content:"";position:absolute;inset:0;opacity:.14;pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.9) 1px,transparent 1px);
  background-size:22px 22px}

/* Anneau lumineux qui respire derriere le produit. */
.adb-vis::before{content:"";position:absolute;width:74%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.30),transparent 68%);
  animation:adbBreathe 7s ease-in-out infinite}
@keyframes adbBreathe{0%,100%{transform:scale(.94);opacity:.7}50%{transform:scale(1.06);opacity:1}}

/* --------------------------------------------------------------- COMMANDES */
.adb-dots{position:absolute;bottom:14px;inset-inline-start:50%;transform:translateX(-50%);
  display:flex;gap:7px;z-index:5}
.adb-dots button{width:8px;height:8px;padding:0;border:0;border-radius:999px;cursor:pointer;
  background:rgba(255,255,255,.45);transition:width .3s,background .3s}
.adb-dots button.on{width:26px;background:#fff}

.adb-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:5;
  width:36px;height:36px;border:0;border-radius:50%;cursor:pointer;
  background:rgba(255,255,255,.2);color:#fff;font-size:16px;
  display:grid;place-items:center;opacity:0;transition:opacity .25s,background .2s}
.adband:hover .adb-nav{opacity:1}
.adb-nav:hover{background:rgba(255,255,255,.38)}
.adb-nav.prev{inset-inline-start:12px}
.adb-nav.next{inset-inline-end:12px}

/* Jauge de progression : elle montre quand la vue va changer. */
.adb-bar{position:absolute;bottom:0;inset-inline-start:0;height:3px;width:100%;
  background:rgba(255,255,255,.5);transform-origin:left;z-index:4}
html[dir="rtl"] .adb-bar{transform-origin:right}

@media(prefers-reduced-motion:reduce){
  .adb-vis::before,.adb-bar,.adb-slide.on .adb-gouts li{animation:none}
  .adb-gouts img{transition:none}
  .adb-slide{transition:none}
}