/**
 * BWA - Calendrier promotionnel : front.
 * Design repris de la maquette « Calendrier Carrière Distribution » (composants
 * v2) : angles droits, photos noir et blanc, accent teal #55898d, fond sombre
 * #202b36 sous le bandeau, typographie Poppins.
 */

#wrapper > .breadcrumb__wrapper, #content-wrapper .page-header{
  display: none !important;
}

#wrapper {
  overflow-x:  hidden;
}

.bwa-promo-calendar-page {
  --bwa-background: #ffffff;
  --bwa-foreground: #202b36;
  --bwa-muted: #6b7480;
  --bwa-border: #e4e6e9;

  /* Accent maison de la maquette v2. */
  --bwa-primary: #55898d;
  --bwa-primary-soft: #7fb3b6;
  --bwa-primary-deep: #33605f;
  --bwa-primary-foreground: #ffffff;

  /* Fond sombre du corps de page (chapô + grille) et des popups. */
  --bwa-dark: #202b36;
  --bwa-dark-soft: #2a3745;
  --bwa-on-dark: #f4f6f7;
  --bwa-on-dark-muted: rgba(244, 246, 247, 0.72);
  --bwa-dark-border: rgba(255, 255, 255, 0.16);

  --bwa-shadow-soft: 0 2px 14px rgba(0, 0, 0, 0.06);
  --bwa-shadow-accent: 0 6px 28px rgba(85, 137, 141, 0.28);

  margin-right: calc(50% - 50vw);
  margin-left: calc(50% - 50vw);
  background: var(--bwa-background);
  color: var(--bwa-foreground);
  font-family: Poppins, Arial, sans-serif;
}

.bwa-promo-calendar-empty {
  margin: 0 auto;
  max-width: 780px;
  padding: 72px 20px;
  text-align: center;
}

.bwa-promo-calendar {
  position: relative;
  min-height: 80vh;
}

/* ---------------------------------------------------------------- Intro -- */

.bwa-promo-calendar-intro {
  margin: 0;
  padding: 0;
}

/*
 * Bandeau de titre : la maquette v2 pose une photo de lattes de bois sombres
 * derrière le logo. Le fichier n'étant pas obligatoire (cf. README), le
 * dégradé + les lattes CSS ci-dessous servent de repli fidèle. `isolation`
 * garde le mix-blend du grain à l'intérieur du bandeau.
 */
.bwa-promo-calendar-intro-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background-color: var(--bwa-dark);
  background-image:
    linear-gradient(
      180deg,
      rgba(10, 16, 22, 0.5) 0%,
      rgba(10, 16, 22, 0.18) 42%,
      rgba(10, 16, 22, 0.6) 100%
    ),
    repeating-linear-gradient(
      90deg,
      #2c3a48 0 34px,
      #243140 34px 37px,
      #1a232e 37px 71px
    );
}

/* Photo de lattes déposée dans views/img/ : elle remplace les lattes CSS. */
.bwa-promo-calendar-intro-hero.has-photo {
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

/* Grain : même texture fractale que la maquette, en surimpression. */
.bwa-promo-calendar-intro-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  opacity: 0.45;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
  pointer-events: none;
}

.bwa-promo-calendar-intro-hero-inner {
  position: relative;
  z-index: 2;
  margin: 0 auto;
  max-width: 1024px;
  padding: 32px 16px;
  text-align: center;
}

.bwa-promo-calendar-intro-hero-inner:empty {
  display: none;
}

/* Logo « RDV » centré, comme dans la maquette (224px, 320px à partir de 640px). */
.bwa-promo-calendar-intro-logo {
  display: block;
  margin: 0 auto;
  width: 224px;
  max-width: 100%;
  height: auto;
  filter: drop-shadow(0 10px 35px rgba(0, 0, 0, 0.15));
}

/* Titre conservé pour le SEO et les lecteurs d'écran quand le logo est affiché. */
.bwa-promo-calendar-sr-only {
  position: absolute !important;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  white-space: nowrap;
}

.bwa-promo-calendar-intro h1 {
  margin: 0;
  color: #ffffff;
  font-size: clamp(30px, 5vw, 56px);
  font-weight: 300;
  letter-spacing: 0.02em;
  line-height: 1.1;
  text-shadow: 0 10px 35px rgba(0, 0, 0, 0.25);
}

/* ---------------------------------- Bandeau compte à rebours (dans le hero) */

/*
 * La maquette v2 place le compte à rebours sous le logo, à même le bandeau :
 * plus de bande sable intermédiaire.
 */
.bwa-promo-calendar-band {
  margin-top: 40px;
  text-align: center;
}

.bwa-promo-calendar-band-title {
  margin: 0 0 16px;
  color: var(--bwa-primary-soft);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.3em;
  text-transform: uppercase;
}

.bwa-promo-calendar-band-empty {
  margin: 0;
  color: var(--bwa-on-dark-muted);
  font-size: 14px;
  font-weight: 300;
  letter-spacing: 0.05em;
}

.bwa-promo-calendar-countdown {
  display: flex;
  justify-content: center;
  gap: 8px;
}

.bwa-promo-calendar-countdown-unit {
  min-width: 64px;
  padding: 12px;
  border: 1px solid var(--bwa-dark-border);
  background: var(--bwa-dark);
}

.bwa-promo-calendar-countdown-value {
  display: block;
  color: var(--bwa-on-dark);
  font-size: 26px;
  font-weight: 300;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.bwa-promo-calendar-countdown-label {
  display: block;
  margin-top: 4px;
  color: var(--bwa-on-dark-muted);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

/* ------------------------------------------ Corps de page (fond sombre) -- */

.bwa-promo-calendar-main {
  background: var(--bwa-dark);
  color: var(--bwa-on-dark);
}

/* Chapô : bloc centré sur le fond sombre (max-w-5xl / px-4 py-8 de la maquette). */
.bwa-promo-calendar-intro-text {
  margin: 0 auto;
  max-width: 1024px;
  padding: 32px 16px;
  text-align: center;
}

.bwa-promo-calendar-intro-text p {
  margin: 0;
  color: var(--bwa-on-dark);
  font-size: 14px;
  font-weight: 300;
  line-height: 1.625;
}

/* Le chapo coule d'un seul bloc : dans la maquette c'est un paragraphe unique
   en `whitespace-pre-line`, ou les sauts de ligne ne creusent aucun interligne.
   Les lignes restent ainsi calees sur la grille du texte, ce dont depend la
   troncature ci-dessous. */
.bwa-promo-calendar-intro-text p + p {
  margin-top: 0;
}

/* Chapo tronque a 3 lignes tant que « En savoir plus » n'a pas ete clique.
   La classe est posee par le JS : sans JS le texte reste entier. */
.bwa-promo-calendar-intro-copy.is-clamped {
  overflow: hidden;
  max-height: calc(14px * 1.625 * 3);
}

.bwa-promo-calendar-intro-copy.is-clamped.is-expanded {
  overflow: visible;
  max-height: none;
}

/* « En savoir plus » : dans la maquette c'est un lien en gras souligne pose
   dans le chapo apres un simple <br>. On reprend donc la taille, l'interligne
   et la couleur du texte, sans marge ni habillage de bouton. */
.bwa-promo-calendar-intro-more {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--bwa-on-dark);
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.625;
  text-align: center;
  text-decoration: underline;
  cursor: pointer;
  transition: opacity 0.3s ease;
  margin-top: 10px;
}

.bwa-promo-calendar-intro-more[hidden] {
  display: none;
}

/* La maquette ne prevoit pas de survol sur ce lien : on reprend l'opacite du
   CTA « Toutes les offres » plutot qu'un changement de couleur. */
.bwa-promo-calendar-intro-more:hover,
.bwa-promo-calendar-intro-more:focus {
  color: var(--bwa-on-dark);
  opacity: 0.9;
  text-decoration: underline;
}

.bwa-promo-calendar-intro-more:focus-visible {
  outline: 2px solid var(--bwa-primary);
  outline-offset: 3px;
}

/* CTA « Toutes les offres » sous le chapô. */
.bwa-promo-calendar-intro-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 24px;
  padding: 12px 24px;
  background: var(--bwa-primary);
  box-shadow: var(--bwa-shadow-accent);
  color: var(--bwa-primary-foreground);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.15em;
  /* `text-xs` de la maquette : 12px sur 16px d'interligne. */
  line-height: 16px;
  text-decoration: none;
  text-transform: uppercase;
  transition: opacity 0.3s ease;
}

.bwa-promo-calendar-intro-cta:hover,
.bwa-promo-calendar-intro-cta:focus {
  color: var(--bwa-primary-foreground);
  opacity: 0.9;
  text-decoration: none;
}

/* ----------------------------------------------------------------- Grille -- */

.bwa-promo-calendar-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 0 auto;
  max-width: 1290px;
  padding: 16px 16px 128px;
}

.bwa-promo-calendar-card {
  position: relative;
  display: block;
  box-sizing: border-box;
  width: 100%;
  margin: 0;
  padding: 0;
  aspect-ratio: 1 / 1;
  min-width: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: center;
  animation: bwa-card-in 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: calc(var(--bwa-index, 0) * 15ms);
  perspective: 1000px;
  /* Le balayage horizontal est capte par le JS ; le scroll vertical passe.
     La seconde declaration preserve le zoom a deux doigts la ou elle est
     comprise, et est simplement ignoree ailleurs. */
  touch-action: pan-y;
  touch-action: pan-y pinch-zoom;
}

.bwa-promo-calendar-card:focus-visible {
  outline: 2px solid var(--bwa-primary);
  outline-offset: 3px;
}

/* ------------------------------------------------------- Pastilles de case */

/*
 * Date (et heure sur les cases verrouillées) groupées en haut à droite, comme
 * dans la maquette ; « Terminée » / « Nouveau ! » en haut à gauche.
 */
.bwa-promo-calendar-card-badges {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 4px;
  max-width: calc(100% - 16px);
}

.bwa-promo-calendar-card-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.55);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.14);
  color: #fff;
  font-size: 11px;
  font-weight: 300;
  letter-spacing: 0.15em;
  line-height: 1.2;
  text-transform: uppercase;
  white-space: nowrap;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

/*
 * Case encore disponible : la pastille de date passe en accent, comme le
 * `highlight` de la maquette. Les cases expirées gardent la pastille sombre.
 */
.bwa-promo-calendar-card.is-open .bwa-promo-calendar-card-badge-date {
  background: var(--bwa-primary);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

/* Pastilles de gauche : « Terminée » et « Nouveau ! » ne coexistent jamais. */
.bwa-promo-calendar-card-badge-done,
.bwa-promo-calendar-card-badge-new {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 30;
  display: none;
  max-width: calc(60% - 12px);
  overflow: hidden;
  text-overflow: ellipsis;
}

.bwa-promo-calendar-card.is-expired .bwa-promo-calendar-card-badge-done {
  display: inline-flex;
}

/* « Nouveau ! » : pastille blanche sur la case courante, encore ouverte. */
.bwa-promo-calendar-card-badge-new {
  background: #ffffff;
  color: var(--bwa-dark);
  font-weight: 600;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.bwa-promo-calendar-card.is-open[data-current="1"] .bwa-promo-calendar-card-badge-new {
  display: inline-flex;
}

/*
 * Deux pastilles sur une même ligne : sur les cases étroites (2 à 5 colonnes
 * selon le viewport) on les resserre pour éviter le chevauchement. La taille
 * nominale revient dès que la grille est au large.
 */
.bwa-promo-calendar-card.is-expired .bwa-promo-calendar-card-badges,
.bwa-promo-calendar-card.is-open[data-current="1"] .bwa-promo-calendar-card-badges,
.bwa-promo-calendar-card.is-locked .bwa-promo-calendar-card-badges,
.bwa-promo-calendar-card.is-next .bwa-promo-calendar-card-badges {
  max-width: calc(55% - 10px);
}

.bwa-promo-calendar-card.is-expired .bwa-promo-calendar-card-badge,
.bwa-promo-calendar-card.is-open[data-current="1"] .bwa-promo-calendar-card-badge,
.bwa-promo-calendar-card.is-locked .bwa-promo-calendar-card-badge,
.bwa-promo-calendar-card.is-next .bwa-promo-calendar-card-badge {
  padding: 3px 6px;
  font-size: 9px;
  letter-spacing: 0.08em;
}

@media (min-width: 1280px) {
  .bwa-promo-calendar-card.is-expired .bwa-promo-calendar-card-badge,
  .bwa-promo-calendar-card.is-open[data-current="1"] .bwa-promo-calendar-card-badge,
  .bwa-promo-calendar-card.is-locked .bwa-promo-calendar-card-badge,
  .bwa-promo-calendar-card.is-next .bwa-promo-calendar-card-badge {
    padding: 4px 8px;
    font-size: 11px;
    letter-spacing: 0.15em;
  }
}

/* --------------------------------------------- Cases révélées (retournables) */

.bwa-promo-calendar-card.is-open,
.bwa-promo-calendar-card.is-expired {
  cursor: pointer;
  background: unset !important;
  padding: 0 !important;
}

.bwa-promo-calendar-card-flip {
  position: relative;
  z-index: 10;
  display: block;
  width: 100%;
  height: 100%;
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
  transform-style: preserve-3d;
}

/*
 * Le retournement est reserve aux appareils a pointeur fin : sur tactile un
 * simple tap declenche le `:hover` collant, la case pivotait donc a l'ouverture
 * de la popup et laissait apparaitre le titre de la face avant en miroir.
 */
@media (hover: hover) and (pointer: fine) {
  .bwa-promo-calendar-card:hover .bwa-promo-calendar-card-flip,
  .bwa-promo-calendar-card:focus-visible .bwa-promo-calendar-card-flip {
    transform: rotateY(180deg);
  }

  .bwa-promo-calendar-card:hover .bwa-promo-calendar-card-face-front,
  .bwa-promo-calendar-card:focus-visible .bwa-promo-calendar-card-face-front {
    opacity: 0;
  }

  .bwa-promo-calendar-card:hover .bwa-promo-calendar-card-face-back,
  .bwa-promo-calendar-card:focus-visible .bwa-promo-calendar-card-face-back {
    opacity: 1;
  }
}

/*
 * Equivalent tactile du survol : `is-flipped` est posee par front.js sur un
 * balayage horizontal de la case. Volontairement hors media query, pour couvrir
 * aussi les portables tactiles ou `hover: hover` reste vrai.
 */
.bwa-promo-calendar-card.is-flipped .bwa-promo-calendar-card-flip {
  transform: rotateY(180deg);
}

.bwa-promo-calendar-card.is-flipped .bwa-promo-calendar-card-face-front {
  opacity: 0;
}

.bwa-promo-calendar-card.is-flipped .bwa-promo-calendar-card-face-back {
  opacity: 1;
}

.bwa-promo-calendar-card-face {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--bwa-dark);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  /*
   * Bascule des faces : le `backface-visibility` ci-dessus suffit a l'arret,
   * mais il n'est pas reevalue pendant la rotation sur mobile — la face avant
   * restait peinte toute la duree du geste, la face arriere n'apparaissant qu'au
   * repaint final. On echange donc les faces a l'opacite, sans fondu (0s), au
   * moment ou la case est de profil : avec l'easing du flip
   * (cubic-bezier(0.22, 1, 0.36, 1)), les 90 degres sont atteints a 13 % de la
   * course, soit 65 ms sur les 500 ms. Le delai vaut dans les deux sens.
   */
  transition: opacity 0s linear 65ms;
}

.bwa-promo-calendar-card-face-back {
  transform: rotateY(180deg);
  opacity: 0;
}

/*
 * Les enfants d'une face obtiennent leur propre couche de composition (l'image
 * porte un `filter`, le titre un `transform` anime) et echappent alors au
 * `backface-visibility` de la face sur WebKit / Chrome : sans ce rappel, le
 * titre de la face cachee reste peint, a l'envers, par-dessus l'autre face.
 */
.bwa-promo-calendar-card-face > * {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.bwa-promo-calendar-card-face img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(100%);
  transition: filter 0.3s ease;
}

/*
 * Passent en couleur : la case courante (dernière ouverte) et les cases
 * terminées. Les cases ouvertes qui ne sont plus la case courante restent en
 * noir et blanc.
 */
.bwa-promo-calendar-card.is-open .bwa-promo-calendar-card-face img,
.bwa-promo-calendar-card[data-current="1"] .bwa-promo-calendar-card-face img {
  filter: none;
}

.bwa-promo-calendar-card-placeholder {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, #3d4c5a, #202b36);
}

.bwa-promo-calendar-card-veil {
  position: absolute;
  inset: 0;
  background: rgba(15, 21, 28, 0.1);
  transition: background-color 0.3s ease;
}

.bwa-promo-calendar-card-veil.is-strong {
  background: rgba(0, 0, 0, 0.65);
}

@media (hover: hover) and (pointer: fine) {
  .bwa-promo-calendar-card:hover .bwa-promo-calendar-card-face-front .bwa-promo-calendar-card-veil,
  .bwa-promo-calendar-card:focus-visible .bwa-promo-calendar-card-face-front .bwa-promo-calendar-card-veil {
    background: rgba(15, 21, 28, 0.6);
  }
}

.bwa-promo-calendar-card-name {
  position: relative;
  z-index: 10;
  padding: 0 12px;
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.1em;
  line-height: 1.3;
  text-transform: uppercase;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.bwa-promo-calendar-card-name.is-visible {
  font-size: 14px;
  font-weight: 300;
  letter-spacing: 0.15em;
  opacity: 1;
  transform: none;
}

@media (hover: hover) and (pointer: fine) {
  .bwa-promo-calendar-card:hover .bwa-promo-calendar-card-face-front .bwa-promo-calendar-card-name,
  .bwa-promo-calendar-card:focus-visible .bwa-promo-calendar-card-face-front .bwa-promo-calendar-card-name {
    opacity: 1;
    transform: none;
  }
}

/*
 * Liseré scintillant de la case du jour : la maquette v2 le déplace de la
 * prochaine case vers la case courante, encore ouverte.
 */
.bwa-promo-calendar-card.is-open[data-current="1"] .bwa-promo-calendar-card-shine {
  display: block;
}

/* ------------------------------------------------------- Cases verrouillées */

.bwa-promo-calendar-card.is-locked,
.bwa-promo-calendar-card.is-next {
  cursor: not-allowed;
}

/* ------------------------------------------------- Prochaine case à ouvrir */

/* Dégradé teal de la maquette v2 (8fc0c3 → 55898d → 33605f). */
.bwa-promo-calendar-card.is-surprise {
  background: radial-gradient(
    120% 120% at 20% 10%,
    var(--bwa-primary-soft) 0%,
    var(--bwa-primary) 45%,
    var(--bwa-primary-deep) 100%
  );
}

/* Liseré blanc tournant : réservé à la case du jour (cf. plus haut). */
.bwa-promo-calendar-card-shine {
  position: absolute;
  display: none;
  inset: -3px;
  z-index: 0;
  overflow: hidden;
}

.bwa-promo-calendar-card-shine > span {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 200%;
  aspect-ratio: 1 / 1;
  background: conic-gradient(
    from 0deg,
    transparent 0deg,
    rgba(255, 255, 255, 0.15) 40deg,
    rgba(255, 255, 255, 1) 70deg,
    rgba(255, 255, 255, 0.15) 100deg,
    transparent 150deg,
    transparent 180deg,
    rgba(255, 255, 255, 0.15) 220deg,
    rgba(255, 255, 255, 1) 250deg,
    rgba(255, 255, 255, 0.15) 280deg,
    transparent 330deg
  );
  transform: translate(-50%, -50%);
  animation: bwa-shine-spin 3.5s linear infinite;
}

.bwa-promo-calendar-card.is-next::after {
  position: absolute;
  inset: 0;
  z-index: 30;
  box-sizing: border-box;
  content: "";
  border: 1px solid rgba(255, 255, 255, 0.45);
  pointer-events: none;
}

.bwa-promo-calendar-card-teaser {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 12px;
  color: #fff;
  font-size: clamp(14px, 2.4vw, 18px);
  font-weight: 700;
  letter-spacing: 0.12em;
  line-height: 1.35;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.35);
  text-transform: uppercase;
}

/*
 * Case « surprise » : typographie de la maquette v2 — 30 px (36 px à partir de
 * 640 px), gras, `tracking-widest` à 0.1em et ombre portée sur la forme des
 * lettres plutôt qu'un `text-shadow`. Sous 640 px la taille reste fluide pour
 * que le mot tienne dans une case de grille à deux colonnes.
 */
.bwa-promo-calendar-card-teaser.is-surprise {
  padding: 0 12px;
  font-size: clamp(20px, 7vw, 30px);
  letter-spacing: 0.1em;
  line-height: 1;
  text-indent: 0.1em;
  filter: drop-shadow(0 1px 8px rgba(0, 0, 0, 0.35));
  text-shadow: none;
}

/*
 * Case « surprise » : habillage anime repris de `SurpriseCardV2` et de
 * `liquid-aurora-v2` de la maquette (mode `compact` : tailles en %, flous
 * divises par 4, morphing accelere de 2,5x). Trois couches empilees sous le mot
 * SURPRISE (z-index 20) : le lisere conique tournant (z 0), le degrade teal
 * (z 10), puis les blobs par-dessus.
 */

/* Le lisere est clippe a la carte : seul le filet de 1 px laisse par le panneau
   interieur reste visible, comme le `-inset-[2px]` / `inset-[1px]` de la maquette. */
.bwa-promo-calendar-card.is-surprise {
  overflow: hidden;
  border: 1px solid var(--bwa-primary);
}

/* La surprise garde l'etat `next` pour heriter de son habillage, mais pas de son
   lisere blanc : la maquette lui donne une bordure teal et le filet anime. */
.bwa-promo-calendar-card.is-surprise.is-next::after {
  content: none;
}

.bwa-promo-calendar-card.is-surprise .bwa-promo-calendar-card-shine {
  display: block;
  inset: -2px;
}

.bwa-promo-calendar-card.is-surprise .bwa-promo-calendar-card-shine > span {
  animation-duration: 5s;
}

/* Panneau interieur : reprend le degrade teal de la carte et masque le lisere. */
.bwa-promo-calendar-card-aurora {
  position: absolute;
  inset: 1px;
  z-index: 10;
  overflow: hidden;
  background: radial-gradient(
    120% 120% at 20% 10%,
    var(--bwa-primary-soft) 0%,
    var(--bwa-primary) 45%,
    var(--bwa-primary-deep) 100%
  );
}

/* L'aurore elle-meme : base ambree et blobs, le tout a 60 % comme la maquette. */
.bwa-promo-calendar-card-blobs {
  position: absolute;
  inset: 0;
  display: block;
  overflow: hidden;
  background: #c08a4e;
  opacity: 0.6;
}

.bwa-promo-calendar-card-blobs > span {
  position: absolute;
  display: block;
  animation-name: bwa-blob-morph;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}

.bwa-promo-calendar-card-blobs > span:nth-child(1) {
  right: -15%;
  top: -10%;
  height: 120%;
  width: 60%;
  opacity: 0.9;
  filter: blur(20px);
  background: radial-gradient(circle at 60% 50%, #6f8299, transparent 72%);
  animation-duration: 2.8s;
  animation-direction: normal;
}

.bwa-promo-calendar-card-blobs > span:nth-child(2) {
  left: -15%;
  top: -30%;
  height: 70%;
  width: 80%;
  opacity: 0.8;
  filter: blur(21px);
  background: radial-gradient(circle at 50% 60%, #6b7987, transparent 70%);
  animation-duration: 3.2s;
  animation-direction: reverse;
}

.bwa-promo-calendar-card-blobs > span:nth-child(3) {
  left: 38%;
  top: -35%;
  height: 70%;
  width: 70%;
  opacity: 0.7;
  filter: blur(23px);
  background: radial-gradient(circle at 50% 60%, #243a48, transparent 68%);
  animation-duration: 3s;
  animation-direction: normal;
}

.bwa-promo-calendar-card-blobs > span:nth-child(4) {
  left: -12%;
  top: 25%;
  height: 80%;
  width: 70%;
  opacity: 0.85;
  filter: blur(21px);
  background: radial-gradient(circle at 55% 50%, #b0a28d, transparent 70%);
  animation-duration: 3.6s;
  animation-direction: reverse;
}

.bwa-promo-calendar-card-blobs > span:nth-child(5) {
  left: 30%;
  top: 15%;
  height: 95%;
  width: 75%;
  opacity: 0.9;
  filter: blur(19px);
  background: radial-gradient(circle at 50% 50%, #be8955, transparent 68%);
  animation-duration: 2.6s;
  animation-direction: normal;
}

.bwa-promo-calendar-card-blobs > span:nth-child(6) {
  bottom: -30%;
  left: 34%;
  height: 70%;
  width: 60%;
  opacity: 0.9;
  filter: blur(20px);
  background: radial-gradient(circle at 50% 40%, #be8955, transparent 70%);
  animation-duration: 3.4s;
  animation-direction: reverse;
}

.bwa-promo-calendar-card-blobs > span:nth-child(7) {
  left: -8%;
  top: 35%;
  height: 70%;
  width: 55%;
  opacity: 0.7;
  filter: blur(21px);
  background: radial-gradient(circle at 50% 50%, #be8955, transparent 70%);
  animation-duration: 3s;
  animation-direction: normal;
}

.bwa-promo-calendar-card-blobs > span:nth-child(8) {
  left: 6%;
  bottom: -20%;
  height: 55%;
  width: 50%;
  opacity: 0.65;
  filter: blur(23px);
  background: radial-gradient(circle at 50% 40%, #be8955, transparent 70%);
  animation-duration: 3.2s;
  animation-direction: reverse;
}

.bwa-promo-calendar-card-blobs > span:nth-child(9) {
  bottom: -25%;
  right: -5%;
  height: 60%;
  width: 60%;
  opacity: 0.7;
  filter: blur(23px);
  background: radial-gradient(circle at 50% 50%, #6f8299, transparent 70%);
  animation-duration: 3.8s;
  animation-direction: normal;
}

/* Renfort orange puis brillance : les deux calques `compact` de la maquette. Ils
   y sont poses apres les blobs ; ::before etant insere en premier enfant, c'est
   le z-index qui retablit l'ordre de peinture. */
.bwa-promo-calendar-card-blobs::before,
.bwa-promo-calendar-card-blobs::after {
  position: absolute;
  inset: 0;
  content: "";
}

.bwa-promo-calendar-card-blobs::before {
  z-index: 1;
  background: radial-gradient(
    circle at 45% 55%,
    #e0a25e 0%,
    rgba(190, 137, 85, 0.75) 40%,
    transparent 78%
  );
  opacity: 0.85;
  mix-blend-mode: screen;
}

.bwa-promo-calendar-card-blobs::after {
  z-index: 2;
  background: radial-gradient(
    120% 80% at 30% 8%,
    rgba(255, 255, 255, 0.55) 0%,
    rgba(255, 255, 255, 0.15) 35%,
    transparent 70%
  );
  mix-blend-mode: soft-light;
}

@keyframes bwa-blob-morph {
  0% {
    transform: rotate(0deg) scale(1) translate(0, 0);
    border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
  }
  25% {
    transform: rotate(90deg) scale(1.3) translate(28%, -18%);
    border-radius: 40% 60% 70% 30% / 40% 70% 30% 60%;
  }
  50% {
    transform: rotate(180deg) scale(0.85) translate(-22%, 22%);
    border-radius: 70% 30% 50% 50% / 30% 60% 40% 70%;
  }
  75% {
    transform: rotate(270deg) scale(1.25) translate(18%, 26%);
    border-radius: 35% 65% 40% 60% / 65% 35% 60% 40%;
  }
  100% {
    transform: rotate(360deg) scale(1) translate(0, 0);
    border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
  }
}

/* Une fois sa date atteinte, la surprise s'ouvre : elle redevient cliquable. */
.bwa-promo-calendar-card.is-surprise[data-openable] {
  cursor: pointer;
}

/* ------------------------------------------------- En savoir plus (fond clair) */

.bwa-promo-calendar-more {
  background: var(--bwa-background);
  color: var(--bwa-foreground);
  scroll-margin-top: 32px;
}

.bwa-promo-calendar-more-inner {
  margin: 0 auto;
  max-width: 1024px;
  padding: 48px 16px;
  text-align: center;
}

.bwa-promo-calendar-more h2 {
  margin: 0;
  color: var(--bwa-foreground);
  font-family: "Libre Caslon Display", Georgia, "Times New Roman", serif;
  font-size: 32px;
  font-weight: 400;
  line-height: 1.2;
}

.bwa-promo-calendar-more p {
  margin: 20px 0 0;
  color: var(--bwa-muted);
  font-size: 14px;
  font-weight: 300;
  line-height: 1.75;
}

/* ------------------------------------------------------------------ Popup -- */

.bwa-promo-calendar-modal[hidden] {
  display: none;
}

.bwa-promo-calendar-modal {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 15px;
  font-family: Poppins, Arial, sans-serif;
}

.bwa-promo-calendar-modal-overlay {
  position: absolute;
  inset: 0;
  background: rgba(15, 21, 28, 0.4);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  animation: bwa-fade-in 0.35s ease-out both;
}

/* Panneau sombre de la maquette v2 (#202b36, sans bordure). */
.bwa-promo-calendar-modal-panel {
  position: relative;
  max-height: 88vh;
  width: 100%;
  max-width: 512px;
  overflow-y: auto;
  background: var(--bwa-dark);
  box-shadow: 0 2px 14px rgba(0, 0, 0, 0.35);
  color: #ffffff;
  animation: bwa-panel-in 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.bwa-promo-calendar-modal-close {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 10;
  display: grid;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.25);
  background: rgba(0, 0, 0, 0.45);
  color: #ffffff;
  cursor: pointer;
  place-items: center;
  transition: background-color 0.2s ease;
}

.bwa-promo-calendar-modal-close:hover {
  background: rgba(0, 0, 0, 0.7);
}

.bwa-promo-calendar-modal-media {
  position: relative;
  aspect-ratio: 4 / 3;
  width: 100%;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.3);
}

.bwa-promo-calendar-modal-media:empty {
  display: none;
}

.bwa-promo-calendar-modal-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /*filter: grayscale(100%);*/
  transition: filter 0.3s ease;
}

/* Même règle que la grille : couleur pour la case courante et les terminées. */
.bwa-promo-calendar-modal-media.is-current img {
  filter: none;
}

/* Visuel de la case surprise : dégradé teal, sans photo. */
.bwa-promo-calendar-modal-media-aurora {
  position: absolute;
  inset: 0;
  display: block;
  background: radial-gradient(
    120% 120% at 20% 10%,
    var(--bwa-primary-soft) 0%,
    var(--bwa-primary) 45%,
    var(--bwa-primary-deep) 100%
  );
}

.bwa-promo-calendar-modal-body {
  padding: 32px 24px;
}

.bwa-promo-calendar-modal-eyebrow {
  margin: 0;
  color: var(--bwa-primary-soft);
  font-size: 12px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
}

.bwa-promo-calendar-modal-eyebrow:empty {
  display: none;
}

.bwa-promo-calendar-modal-title {
  margin: 12px 0 0;
  color: #ffffff;
  font-size: 24px;
  font-weight: 300;
  letter-spacing: -0.01em;
  line-height: 1.25;
}

/*
 * Identite du domaine sous le titre : « Y Clerget — Bourgogne, Cote de Beaune.
 * Appellations : Volnay. » La liste des appellations etant longue, elle reste
 * sur sa propre ligne pour ne pas casser le `tracking` de 0.3em du chapeau.
 */
.bwa-promo-calendar-modal-meta {
  margin: 8px 0 0;
  color: var(--bwa-on-dark-muted);
  font-size: 14px;
  font-weight: 300;
  line-height: 1.5;
}

.bwa-promo-calendar-modal-meta:empty {
  display: none;
}

.bwa-promo-calendar-modal-description {
  color: rgba(255, 255, 255, 0.7);
  font-size: 14px;
  font-weight: 300;
  line-height: 1.75;
}

.bwa-promo-calendar-modal-description:empty {
  display: none;
}

.bwa-promo-calendar-all-offert {
  background: var(--bwa-primary);
  font-size: 14px;
  text-transform: uppercase;
  padding: 15px;
  font-weight: 600;
  color: #ffffff;
  margin: 0 auto;
  width: 220px;
  display: block;
  text-align: center;
  letter-spacing: 0.9px;
}

.bwa-promo-calendar-modal-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 32px;
  padding: 13px 28px;
  background: var(--bwa-primary);
  color: #ffffff;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.18em;
  line-height: 1;
  text-decoration: none;
  text-transform: uppercase;
  transition: transform 0.3s ease, box-shadow 0.3s ease, opacity 0.3s ease;
}

.bwa-promo-calendar-modal-cta:hover,
.bwa-promo-calendar-modal-cta:focus {
  color: #ffffff;
  text-decoration: none;
}

.bwa-promo-calendar-modal-cta:hover {
  box-shadow: var(--bwa-shadow-accent);
  transform: translateY(-2px);
}

.bwa-promo-calendar-modal-cta[hidden] {
  display: none;
}

.bwa-promo-calendar-modal-cta.is-disabled {
  background: rgba(255, 255, 255, 0.18);
  color: rgba(255, 255, 255, 0.75);
  cursor: not-allowed;
  pointer-events: none;
  transform: none;
}

body.bwa-promo-calendar-modal-open {
  overflow: hidden;
}

/* ------------------------------------------------------------ Animations -- */

@keyframes bwa-card-in {
  from {
    opacity: 0;
    transform: translateY(14px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes bwa-fade-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes bwa-panel-in {
  from {
    opacity: 0;
    transform: translateY(24px) scale(0.985);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes bwa-shine-spin {
  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

/* -------------------------------------------------------------- Responsive */

@media (min-width: 640px) {
  .bwa-promo-calendar-intro-hero-inner {
    padding: 48px 24px 40px;
  }

  .bwa-promo-calendar-intro-logo {
    width: 320px;
  }

  .bwa-promo-calendar-intro-text {
    padding: 40px 24px;
  }

  .bwa-promo-calendar-intro-text p {
    font-size: 16px;
  }

  .bwa-promo-calendar-intro-copy.is-clamped {
    max-height: calc(16px * 1.625 * 2);
  }

  .bwa-promo-calendar-intro-more {
    font-size: 16px;
  }

  .bwa-promo-calendar-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    /*padding-top: 40px;*/
    padding-right: 24px;
    padding-left: 24px;
  }

  .bwa-promo-calendar-card-teaser.is-surprise {
    font-size: 36px;
  }

  .bwa-promo-calendar-countdown {
    gap: 16px;
  }

  .bwa-promo-calendar-countdown-unit {
    min-width: 80px;
    padding: 12px 16px;
  }

  .bwa-promo-calendar-countdown-value {
    font-size: 30px;
  }

  .bwa-promo-calendar-more-inner {
    padding: 64px 24px;
  }

  .bwa-promo-calendar-more p {
    font-size: 16px;
  }

  .bwa-promo-calendar-modal-body {
    padding: 40px 36px;
  }
}

@media (min-width: 1024px) {
  .bwa-promo-calendar-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
  .bwa-promo-calendar-intro-hero-inner {
    padding-top: 32px;
    padding-bottom: 32px;
  }

  .bwa-promo-calendar-band {
    margin-top: 32px;
  }

  .bwa-promo-calendar-card-name {
    font-size: 13px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .bwa-promo-calendar-card,
  .bwa-promo-calendar-card-shine > span,
  .bwa-promo-calendar-card-blobs > span,
  .bwa-promo-calendar-modal-overlay,
  .bwa-promo-calendar-modal-panel {
    animation: none;
  }

  .bwa-promo-calendar-card-flip,
  .bwa-promo-calendar-card-face,
  .bwa-promo-calendar-card-veil,
  .bwa-promo-calendar-card-name,
  .bwa-promo-calendar-card-face img,
  .bwa-promo-calendar-modal-cta,
  .bwa-promo-calendar-modal-media img {
    transition: none;
  }

  .bwa-promo-calendar-card:hover .bwa-promo-calendar-card-flip,
  .bwa-promo-calendar-card:focus-visible .bwa-promo-calendar-card-flip {
    transform: none;
  }
}