/* ═══════════════════════════════════════════════════════════════════════════
   BANDEAU « NEXT EVENT » — LES 10 STYLES
   ═══════════════════════════════════════════════════════════════════════════

   Cette feuille est chargée par DEUX surfaces :
     · index.html  — la vitrine, où le bandeau s'affiche pour de vrai ;
     · site.html   — le back office, où la galerie montre les 10 styles.

   ⚠ C'est VOLONTAIREMENT un fichier partagé, et pas deux copies. Le piège
   maison est documenté (skill gca-vitrine, invariant 4) : quand deux endroits
   écrivent le même rendu, n'en corriger qu'un revient à ne rien corriger, et
   l'aperçu du back office finit par mentir sur ce que voit le visiteur. Ici,
   la galerie affiche EXACTEMENT les règles de production.

   Elle contient DEUX parties :
     1. la STRUCTURE de base (.event-bar, ses 3 zones, le notch iOS, le gabarit
        mobile en 2 lignes avec son marquee) — déplacée depuis index.html le
        24/08/2026, sans une ligne réécrite : ces règles portent des correctifs
        mesurés au banc, on les DÉPLACE, on ne les « range » pas au passage ;
     2. les 10 STYLES, tous préfixés `[data-style="…"]` — donc plus spécifiques
        que la base, et sans effet tant qu'aucun style n'est choisi.

   ⚠ La hauteur réelle du bandeau reste mesurée en JS dans index.html et
   propagée par --event-bar-height : le CSS ne peut pas la connaître (elle
   dépend du texte, du wrap et du notch).

   ⚠ Chargée en `media="print" onload="this.media='all'"` sur la vitrine : le
   bandeau est `display:none` jusqu'à ce que le JS le révèle, APRÈS l'aller-
   retour vers public-agenda. Il n'y a donc aucun flash possible, et la feuille
   ne dispute pas le premier rendu.

   Variables lues (posées par le JS sur l'élément) :
     --eb-bg      couleur de fond choisie dans le back office
     --eb-accent  couleur d'accent choisie dans le back office
   ═══════════════════════════════════════════════════════════════════════════ */

/* ═══ 1. STRUCTURE DE BASE ═══════════════════════════════════════════════ */

/* ── Bandeau "Next Event" ── 3 zones : [left] [center] [right] ──
   z-index: 150 — au-dessus du header (100)
   La hauteur réelle est mesurée en JS et propagée via --event-bar-height */
:root { --event-bar-height: 0px; }
.event-bar {
  display: none;
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 150;
  /* Fond et encre passent par des variables posées en JS (--eb-bg /
     --eb-accent / --eb-fg). Avant, le JS écrivait `bar.style.background` en
     inline : un style inline gagne sur TOUTE règle de feuille, donc aucun
     des 10 styles n'aurait pu proposer autre chose qu'un aplat. */
  background: var(--eb-bg, #111010);
  color: var(--eb-fg, #fff);
  text-decoration: none;
  font-family: 'Inter', system-ui, sans-serif;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0,0,0,.18);
  /* PWA iOS standalone : le notch recouvre top:0 → on pousse le contenu sous le notch.
     offsetHeight (mesuré en JS) inclut ce padding, donc --event-bar-height reste correct. */
  padding-top: env(safe-area-inset-top, 0px);
}
.event-bar.is-visible { display: block; }

/* Shine animé qui traverse la barre (lent, discret) */
.event-bar::after {
  content: ''; position: absolute; top: 0; left: -40%;
  width: 40%; height: 100%;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.08) 50%, transparent 100%);
  animation: barShine 7s ease-in-out infinite;
  pointer-events: none;
}
@keyframes barShine {
  0%, 30%   { left: -40%; }
  70%, 100% { left: 140%; }
}

.event-bar__inner {
  position: relative; z-index: 1;
  max-width: 1200px; margin: 0 auto;
  padding: 12px 20px;
}
.event-bar__row-main {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
}
.event-bar__left   { display: flex; align-items: center; gap: 10px; flex-shrink: 0; min-width: 0; }
.event-bar__center { display: flex; align-items: baseline; gap: 10px; flex: 1; min-width: 0; overflow: hidden; }
.event-bar__right  { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }

/* Live pulse dot */
.event-bar__pulse {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: 'Space Grotesk', monospace;
  font-weight: 700; font-size: 10px;
  letter-spacing: .18em; text-transform: uppercase;
  color: rgba(255,255,255,.85);
  white-space: nowrap;
}
.event-bar__pulse::before {
  content: ''; width: 7px; height: 7px; border-radius: 50%;
  background: #ff5a5a;
  box-shadow: 0 0 0 0 rgba(255,90,90,.7);
  animation: barPulse 2s ease-in-out infinite;
  flex-shrink: 0;
}
@keyframes barPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255,90,90,.7); transform: scale(1); }
  50%      { box-shadow: 0 0 0 8px rgba(255,90,90,0); transform: scale(1.15); }
}

/* Date pill */
.event-bar__date {
  font-family: 'Space Grotesk', monospace;
  font-weight: 700; font-size: 11px;
  letter-spacing: .14em; text-transform: uppercase;
  background: rgba(255,255,255,.14);
  padding: 5px 11px; border-radius: 4px;
  white-space: nowrap;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}

/* Titre (event name) — tronque si trop long */
.event-bar__title {
  font-weight: 700; font-size: 14px;
  letter-spacing: -.005em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  min-width: 0;
}

/* Venue / lineup — info secondaire */
.event-bar__meta {
  font-size: 12px; font-weight: 400;
  opacity: .68;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Prix */
.event-bar__price {
  font-size: 11px; font-weight: 500;
  opacity: .9; white-space: nowrap;
  padding-right: 4px;
}
.event-bar__price strong {
  font-weight: 800; font-size: 13px; letter-spacing: -.01em;
}

/* CTA */
.event-bar__cta {
  background: #fff; color: #000;
  padding: 8px 16px; border-radius: 4px;
  font-size: 11px; font-weight: 800;
  letter-spacing: .12em; text-transform: uppercase;
  white-space: nowrap;
  display: inline-flex; align-items: center; gap: 6px;
  transition: transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s;
  box-shadow: 0 2px 6px rgba(0,0,0,.12);
  flex-shrink: 0;
}
.event-bar__cta-arrow {
  display: inline-block;
  transition: transform .25s cubic-bezier(.2,.8,.2,1);
}

/* Hover : le bandeau entier réagit */
.event-bar[href]:hover .event-bar__cta {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(255,255,255,.25);
}
.event-bar[href]:hover .event-bar__cta-arrow {
  transform: translateX(3px);
}

/* Décale TOUS les éléments fixés en haut quand le bandeau est visible */
body.event-bar-active .header,
body.event-bar-active .progress {
  top: var(--event-bar-height);
}
/* Quand l'event bar est visible, c'est ELLE qui gère le notch → le header retrouve son padding normal */
body.event-bar-active .header {
  padding-top: 12px;
}

/* ── Breakpoints ── */
/* Desktop confortable : tout s'affiche */

/* Tablette : on masque le "NEXT" label, garde la pulse sans texte */
@media (max-width: 900px) {
  .event-bar__pulse {
    font-size: 0; /* cache le texte, garde la pulse */
    gap: 0;
  }
  .event-bar__meta { font-size: 11px; }
}

/* Desktop : on cache la ligne 2 mobile (les détails sont inline) */
@media (min-width: 701px) {
  .event-bar__details { display: none; }
}

/* Mobile : bascule en flex column, ligne 1 = info + CTA, ligne 2 = détails */
@media (max-width: 700px) {
  .event-bar__inner {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 9px 14px 10px;
  }
  .event-bar__row-main {
    display: flex; align-items: center; gap: 10px;
    width: 100%;
  }
  .event-bar__left {
    flex-shrink: 0;
    gap: 8px;
  }
  .event-bar__center {
    flex: 1; min-width: 0;
    align-items: center;
  }
  .event-bar__right {
    flex-shrink: 0;
  }
  .event-bar__date {
    font-size: 9px; padding: 3px 7px; letter-spacing: .1em;
  }
  .event-bar__title {
    font-size: 13px; min-width: 0;
  }
  .event-bar__cta {
    padding: 7px 12px; font-size: 10px; letter-spacing: .08em;
  }

  /* Ligne 2 : détails discrets (venue · lineup · prix) avec marquee si overflow */
  .event-bar__details {
    position: relative;
    width: 100%;
    font-size: 10px; opacity: .65;
    font-weight: 400; letter-spacing: .02em;
    overflow: hidden;
  }
  /* ⚠ Le fondu des deux bords ne s'applique QUE pendant le défilement. Il
     était inconditionnel : une ligne de détails qui tenait très bien dans la
     largeur voyait quand même sa première lettre s'effacer (« Brique House »
     lu « rique House »). Mesuré au navigateur le 24/08/2026 — invisible à la
     relecture, parce que le voile est exactement ce qu'on veut QUAND ça
     défile. `is-scrolling` est posée par le JS de la vitrine, qui a déjà
     mesuré le débordement. */
  .event-bar__details.is-scrolling {
    mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
  }
  .event-bar__details-track {
    display: inline-flex; align-items: center;
    gap: 6px;
    white-space: nowrap;
    padding-left: 2px;
  }
  /* Quand le contenu déborde, on active le marquee et on duplique le track */
  .event-bar__details.is-scrolling .event-bar__details-track {
    animation: detailsMarquee var(--marquee-duration, 18s) linear infinite;
  }
  .event-bar__details.is-scrolling .event-bar__details-track-clone {
    display: inline-flex;
  }
  .event-bar__details-track-clone {
    display: none;
    align-items: center; gap: 6px;
    white-space: nowrap;
    padding-left: 24px; /* écart visuel entre les 2 copies */
  }
  @keyframes detailsMarquee {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
  }
  /* Pause au tap/hover (pour lire à loisir) */
  .event-bar__details:hover .event-bar__details-track,
  .event-bar__details:active .event-bar__details-track {
    animation-play-state: paused;
  }
  /* Respect prefers-reduced-motion */
  @media (prefers-reduced-motion: reduce) {
    .event-bar__details.is-scrolling .event-bar__details-track {
      animation: none;
    }
    .event-bar__details {
      mask-image: none; -webkit-mask-image: none;
      text-overflow: ellipsis;
    }
  }

  .event-bar__details-sep {
    opacity: .4; flex-shrink: 0;
  }
  .event-bar__details strong {
    opacity: 1; font-weight: 700;
  }

  /* Desktop meta/price cachés en mobile (remplacés par la ligne détails) */
  .event-bar__meta-desktop { display: none; }
  .event-bar__price-desktop { display: none; }
}

/* Très petit : on resserre */
@media (max-width: 380px) {
  .event-bar__title { font-size: 12px; }
  .event-bar__details { font-size: 9px; }
}

/* ═══ 2. LES 10 STYLES ═══════════════════════════════════════════════════ */

.event-bar {
  --eb-bg:     #111010;
  --eb-accent: #ffffff;
  --eb-fg:     #ffffff;
}

/* Éléments optionnels rendus par le JS : ils n'existent que si le back office
   les a remplis. Par défaut ils sont neutres — chaque style les habille. */
.event-bar__flag {
  display: inline-flex; align-items: center;
  font-family: 'Space Grotesk', ui-monospace, monospace;
  font-weight: 800; font-size: 9px;
  letter-spacing: .16em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 3px;
  background: var(--eb-accent); color: #0B0B0B;
  white-space: nowrap; flex-shrink: 0;
}
.event-bar__countdown {
  display: inline-flex; align-items: baseline; gap: 4px;
  font-family: 'Space Grotesk', ui-monospace, monospace;
  font-weight: 800; font-size: 12px;
  letter-spacing: .04em;
  white-space: nowrap; flex-shrink: 0;
  color: var(--eb-accent);
}
.event-bar__countdown small {
  font-size: 9px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; opacity: .7;
}

/* ⚠ Le séparateur « · » de la ligne de détails est stylé ICI, au niveau de
   base, et son écartement est une MARGE — pas un `gap`.
   Corrigé le 24/08/2026 après mesure au navigateur : le `gap` posé sur
   `.event-bar__details-track` ne pouvait pas marcher, et une première
   correction l'a pourtant cru. Le track n'a que DEUX enfants directs — le
   contenu et son clone de défilement — tandis que les séparateurs sont à
   l'intérieur du contenu. Le `gap` les écartait donc l'un de l'autre, jamais
   les morceaux de texte : « Lille·w/ ESCU » restait collé.
   Second effet du même oubli : tout le style du séparateur vivait dans le
   gabarit mobile, donc sur desktop il sortait à pleine opacité au lieu de
   s'effacer derrière le texte. */
.event-bar__details-sep { opacity: .4; flex-shrink: 0; margin: 0 6px; }

/* ───────────────────────────────────────────────────────────────────────────
   1. CLASSIC — « Nuit sobre »
   Le bandeau actuel, conservé tel quel et posé ici comme référence : aplat
   sombre, pastille de date translucide, CTA blanc. C'est la ligne de base
   contre laquelle les neuf autres se comparent.
   ─────────────────────────────────────────────────────────────────────────── */
.event-bar[data-style="classic"] { background: var(--eb-bg); }
.event-bar[data-style="classic"] .event-bar__cta { background: var(--eb-accent); color: #0B0B0B; }

/* ───────────────────────────────────────────────────────────────────────────
   2. TICKET — « Contremarque »
   Le bandeau EST un billet : encoches de perforation aux deux bouts, filets
   pointillés entre les zones, monospace. On ne lit plus « une info » mais
   « un billet », et le CTA devient le talon qu'on détache.
   ─────────────────────────────────────────────────────────────────────────── */
.event-bar[data-style="ticket"] {
  background:
    radial-gradient(circle at 0 50%,   transparent 0 9px, var(--eb-bg) 9px) left / 51% 100% no-repeat,
    radial-gradient(circle at 100% 50%, transparent 0 9px, var(--eb-bg) 9px) right / 51% 100% no-repeat;
}
.event-bar[data-style="ticket"] .event-bar__inner {
  padding-left: 30px; padding-right: 30px;
}
.event-bar[data-style="ticket"] .event-bar__left {
  border-right: 1px dashed rgba(255,255,255,.28);
  padding-right: 14px;
}
.event-bar[data-style="ticket"] .event-bar__right {
  border-left: 1px dashed rgba(255,255,255,.28);
  padding-left: 14px;
}
.event-bar[data-style="ticket"] .event-bar__date {
  background: none; border: 1px dashed rgba(255,255,255,.5);
  border-radius: 0; font-family: ui-monospace, monospace;
}
.event-bar[data-style="ticket"] .event-bar__title {
  font-family: 'Space Grotesk', ui-monospace, monospace;
  letter-spacing: .01em;
}
.event-bar[data-style="ticket"] .event-bar__cta {
  background: var(--eb-accent); color: #0B0B0B;
  border-radius: 2px;
  box-shadow: 3px 3px 0 rgba(0,0,0,.35);
}
@media (max-width: 700px) {
  .event-bar[data-style="ticket"] .event-bar__inner { padding-left: 22px; padding-right: 22px; }
  .event-bar[data-style="ticket"] .event-bar__left  { padding-right: 10px; }
  .event-bar[data-style="ticket"] .event-bar__right { padding-left: 10px; }
}

/* ───────────────────────────────────────────────────────────────────────────
   3. MARQUEE — « Enseigne », en verre (24/08/2026)
   Deux guirlandes d'ampoules courent en haut et en bas, et la ligne de détails
   (venue · lineup · prix), normalement réservée au mobile, reste visible sur
   desktop. Le mouvement attrape l'œil sans bouger le texte principal.

   Le fond est un VERRE : la story défile derrière lui, floutée et saturée, avec
   un reflet spéculaire en haut et un liseré de lumière sur les deux arêtes.
   C'est le seul des dix styles qui laisse voir la page — et ça a du sens ici :
   une enseigne est un objet posé DEVANT une scène, pas un bandeau collé.

   ⚠ TROIS GARDES, et aucune n'est décorative :
   1. Le voile teinté (74 % de --eb-bg) n'est pas négociable. Sans lui, le texte
      passerait sur une photo de club arbitraire : le flou brouille les formes,
      il ne garantit AUCUN contraste. C'est le voile qui le garantit, le flou
      ne fait qu'éviter la bouillie derrière.
   2. `backdrop-filter` sur un élément `position: fixed` au-dessus d'un carrousel
      en scroll-snap est le cas le plus cher qui soit — il se repeint à chaque
      frame de défilement. D'où un rayon MODESTE (14 px) : monter à 30 fait
      joli sur une capture et hache le scroll au doigt. Le blur est rationné
      dans ce projet, ici il est payé une fois, sur une bande de 60 px de haut.
   3. Sans `backdrop-filter`, sans `color-mix`, ou si le visiteur a demandé
      moins de transparence, le style retombe sur un APLAT opaque. Un verre qui
      ne floute pas n'est pas un verre : c'est du texte blanc sur une photo.
   ─────────────────────────────────────────────────────────────────────────── */
.event-bar[data-style="marquee"] {
  /* Trois couches, du dessus vers le dessous :
     · le reflet spéculaire, concentré sur le tiers haut (une vitre prend la
       lumière par le haut — plus bas, ce serait un dégradé décoratif) ;
     · une dérive très douce de l'accent, qui donne au verre une teinte au lieu
       d'un gris ;
     · le voile teinté, qui est ce qui rend le texte lisible. */
  background:
    linear-gradient(180deg, rgba(255,255,255,.17) 0%, rgba(255,255,255,.05) 38%, transparent 62%),
    /* Une ombre douce par le bas — l'épaisseur de la vitre, pas un correctif :
       la lisibilité de la ligne 2 est traitée là où elle se pose, par sa
       propre plaque (voir plus bas). Opacifier TOUT le bandeau pour sauver une
       ligne de 11 px revenait à supprimer le verre pour garder son reflet :
       mesuré, il fallait monter le voile à plus de 82 % — à ce niveau la story
       ne transparaît plus, et le style n'a plus de raison d'être. */
    linear-gradient(0deg, rgba(0,0,0,.20) 0%, transparent 50%),
    linear-gradient(100deg, color-mix(in srgb, var(--eb-accent) 12%, transparent) 0%, transparent 55%),
    color-mix(in srgb, var(--eb-bg) 76%, transparent);
  backdrop-filter: blur(14px) saturate(165%);
  -webkit-backdrop-filter: blur(14px) saturate(165%);
  border-top: 3px solid transparent;
  border-bottom: 3px solid transparent;
  /* Les deux `inset` sont les arêtes de la vitre : lumière en haut, ombre
     portée en bas. C'est ce qui donne une ÉPAISSEUR au verre — sans elles, la
     translucidité se lit comme une opacité ratée. */
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.30),
    inset 0 -1px 0 rgba(0,0,0,.28),
    0 6px 26px rgba(0,0,0,.28);
}
.event-bar[data-style="marquee"]::before {
  content: ''; position: absolute; inset: 0;
  pointer-events: none; z-index: 2;
  background:
    repeating-linear-gradient(90deg, var(--eb-accent) 0 6px, transparent 6px 18px) top    / 24px 3px repeat-x,
    repeating-linear-gradient(90deg, var(--eb-accent) 0 6px, transparent 6px 18px) bottom / 24px 3px repeat-x;
  animation: ebBulbs 1.1s steps(4) infinite;
  opacity: .9;
}
@keyframes ebBulbs { to { background-position: top 0 left 24px, bottom 0 left -24px; } }
.event-bar[data-style="marquee"] .event-bar__title {
  text-transform: uppercase; letter-spacing: .06em; font-weight: 800;
}
/* La pastille de date est le second morceau de verre — un verre posé sur le
   verre, donc plus clair et plus net que lui. */
.event-bar[data-style="marquee"] .event-bar__date {
  background: rgba(255,255,255,.16);
  border: 1px solid rgba(255,255,255,.22);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.28);
}
/* ⚠ Le BOUTON, lui, reste un APLAT PLEIN. Un bouton en verre sur un fond en
   verre perd son affordance : c'est le seul élément qu'on doit reconnaître
   comme cliquable en un coup d'œil, et le contraste est ce qui le dit. */
.event-bar[data-style="marquee"] .event-bar__cta {
  background: var(--eb-accent); color: #0B0B0B;
  text-shadow: none;
  box-shadow: 0 2px 10px rgba(0,0,0,.35);
}
/* Le texte passe sur une image floutée : une ombre courte le décolle du fond
   dans le cas défavorable (photo claire sous le voile sombre). */
.event-bar[data-style="marquee"] .event-bar__title,
.event-bar[data-style="marquee"] .event-bar__meta,
.event-bar[data-style="marquee"] .event-bar__details {
  text-shadow: 0 1px 2px rgba(0,0,0,.45);
}
/* ⚠ Sur un APLAT, une info secondaire à .68 d'opacité est un gris élégant. Sur
   du VERRE, c'est du texte qu'on ne lit plus : le fond n'est plus une couleur
   connue mais ce que la photo veut bien laisser passer. Mesuré au banc, ces
   deux lignes remontent à .9 — elles restent visiblement secondaires face au
   titre en 700, sans dépendre de la chance. */
.event-bar[data-style="marquee"] .event-bar__meta,
.event-bar[data-style="marquee"] .event-bar__details { opacity: .9; }
/* ⚠ La ligne 2 porte sa PROPRE plaque, et c'est ce qui rend le verre possible.
   Elle est en 11 px : le seuil de contraste qui s'applique à elle est celui du
   texte courant (4,5:1), le plus exigeant, alors qu'elle est posée sur ce que
   la photo veut bien laisser passer. Mesuré au banc sur une scène claire, sans
   plaque : 3,77:1 même avec un voile général à 82 %. Avec elle, le fond de
   cette ligne ne dépend plus du hasard — et le bandeau peut redescendre à 76 %
   de voile, donc redevenir du verre. */
.event-bar[data-style="marquee"] .event-bar__details {
  background: rgba(0,0,0,.42);
  border-radius: 5px;
  padding: 1px 9px 2px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}
/* La ligne de détails n'est plus mobile-only : c'est elle qui « défile ». */
@media (min-width: 701px) {
  .event-bar[data-style="marquee"] .event-bar__details {
    display: block;
    width: 100%; margin-top: 4px;
    font-size: 11px; opacity: .9;
    overflow: hidden;
  }
  .event-bar[data-style="marquee"] .event-bar__details.is-scrolling {
    mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%);
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%);
  }
  .event-bar[data-style="marquee"] .event-bar__inner { display: flex; flex-direction: column; gap: 2px; }
  .event-bar[data-style="marquee"] .event-bar__meta-desktop { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .event-bar[data-style="marquee"]::before { animation: none; }
}
/* ── Replis du verre ────────────────────────────────────────────────────────
   Chacun ramène un APLAT OPAQUE, jamais un demi-verre. Le voile seul, sans le
   flou, laisserait passer les formes de la photo derrière le texte. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .event-bar[data-style="marquee"] {
    background: var(--eb-bg);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 4px 20px rgba(0,0,0,.18);
  }
}
@supports not (background: color-mix(in srgb, red 50%, blue)) {
  .event-bar[data-style="marquee"] {
    background: var(--eb-bg);
    backdrop-filter: none; -webkit-backdrop-filter: none;
  }
}
/* Le visiteur a demandé moins de transparence : on la lui retire vraiment. */
@media (prefers-reduced-transparency: reduce) {
  .event-bar[data-style="marquee"] {
    background: var(--eb-bg);
    backdrop-filter: none; -webkit-backdrop-filter: none;
  }
  .event-bar[data-style="marquee"] .event-bar__date {
    background: rgba(255,255,255,.14); border-color: transparent;
  }
}

/* ───────────────────────────────────────────────────────────────────────────
   4. FLYER — « Affiche »
   Le vocabulaire des affiches de soirée : bloc de date en aplat d'accent,
   titre en capitales serrées, angles vifs, aucun arrondi. Le bandeau cesse
   d'être un composant d'interface pour devenir un morceau d'affiche.
   ─────────────────────────────────────────────────────────────────────────── */
.event-bar[data-style="flyer"] { background: var(--eb-bg); }
.event-bar[data-style="flyer"] .event-bar__inner { padding-top: 0; padding-bottom: 0; }
.event-bar[data-style="flyer"] .event-bar__row-main { min-height: 46px; }
.event-bar[data-style="flyer"] .event-bar__date {
  background: var(--eb-accent); color: #0B0B0B;
  border-radius: 0; font-weight: 800;
  padding: 6px 12px; letter-spacing: .1em;
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
.event-bar[data-style="flyer"] .event-bar__title {
  font-size: 17px; font-weight: 800;
  text-transform: uppercase; letter-spacing: -.03em;
  /* ⚠ PAS de `transform: scaleX()` pour resserrer les capitales : la
     transformation change le RENDU sans rendre la place qu'elle libère, donc
     un trou reste entre le titre et le lieu (vu au navigateur le 24/08/2026).
     Le resserrement passe par letter-spacing, qui est pris en compte par la
     mise en page. */
}
.event-bar[data-style="flyer"] .event-bar__meta { text-transform: uppercase; letter-spacing: .08em; font-size: 10px; }
.event-bar[data-style="flyer"] .event-bar__cta {
  background: transparent; color: var(--eb-fg);
  border: 2px solid var(--eb-accent); border-radius: 0;
  box-shadow: none;
}
.event-bar[data-style="flyer"] .event-bar__pulse::before { background: var(--eb-accent); }
@media (max-width: 700px) {
  .event-bar[data-style="flyer"] .event-bar__title { font-size: 14px; }
  .event-bar[data-style="flyer"] .event-bar__inner { padding-top: 8px; padding-bottom: 9px; }
}

/* ───────────────────────────────────────────────────────────────────────────
   5. COUNTDOWN — « J-N »
   Le compte à rebours prend la place de la pastille de date et devient le
   premier élément lu. Il ne s'affiche que si une vraie date est renseignée
   dans le back office : sans date, ce style retombe sur l'affichage normal.
   ─────────────────────────────────────────────────────────────────────────── */
.event-bar[data-style="countdown"] { background: var(--eb-bg); }
.event-bar[data-style="countdown"] .event-bar__countdown {
  font-size: 20px; line-height: 1;
  padding: 4px 12px 5px; border-radius: 5px;
  background: var(--eb-accent); color: #0B0B0B;
  align-items: baseline;
}
.event-bar[data-style="countdown"] .event-bar__countdown small { opacity: .78; color: inherit; }
.event-bar[data-style="countdown"] .event-bar__date {
  background: none; padding-left: 0; padding-right: 0; opacity: .72;
}
.event-bar[data-style="countdown"] .event-bar__cta { background: var(--eb-accent); color: #0B0B0B; }
@media (max-width: 700px) {
  .event-bar[data-style="countdown"] .event-bar__countdown { font-size: 16px; padding: 3px 8px 4px; }
}

/* ───────────────────────────────────────────────────────────────────────────
   6. DUOTONE — « Maison »
   Reprend la grammaire de la vitrine (écrans artistes) : dégradé de l'accent
   vers le noir, grain léger, titre en crème. Le bandeau appartient enfin au
   même monde graphique que la page sur laquelle il est posé.
   ─────────────────────────────────────────────────────────────────────────── */
.event-bar[data-style="duotone"] {
  background:
    linear-gradient(100deg,
      color-mix(in srgb, var(--eb-accent) 78%, #000) 0%,
      color-mix(in srgb, var(--eb-accent) 30%, #0B0B0B) 42%,
      var(--eb-bg) 100%);
  color: #F7F4EC;
}
.event-bar[data-style="duotone"]::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  opacity: .16; mix-blend-mode: overlay;
  background-image: radial-gradient(rgba(255,255,255,.9) .5px, transparent .5px);
  background-size: 3px 3px;
}
.event-bar[data-style="duotone"] .event-bar__title { color: #F7F4EC; letter-spacing: -.01em; }
.event-bar[data-style="duotone"] .event-bar__date {
  background: rgba(247,244,236,.16); border: 1px solid rgba(247,244,236,.22);
}
.event-bar[data-style="duotone"] .event-bar__cta { background: #F7F4EC; color: #0B0B0B; }
/* Sans color-mix (Safari < 16.2), on retombe sur un dégradé simple plutôt que
   sur un fond transparent — un bandeau illisible vaut moins qu'un dégradé plat. */
@supports not (background: color-mix(in srgb, red 50%, blue)) {
  .event-bar[data-style="duotone"] {
    background: linear-gradient(100deg, var(--eb-accent) 0%, var(--eb-bg) 70%);
  }
}

/* ───────────────────────────────────────────────────────────────────────────
   7. MINIMAL — « Filet »
   Une seule ligne fine, 34 px, verre sombre et filet d'accent en bas. Le CTA
   n'est plus une pilule mais un mot souligné. À choisir quand le bandeau doit
   informer sans jamais voler la vedette au premier écran de la story.
   ─────────────────────────────────────────────────────────────────────────── */
.event-bar[data-style="minimal"] {
  background: color-mix(in srgb, var(--eb-bg) 88%, transparent);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--eb-accent);
  box-shadow: none;
}
.event-bar[data-style="minimal"]::after { display: none; }   /* pas de shine ici */
.event-bar[data-style="minimal"] .event-bar__inner { padding: 6px 20px; }
.event-bar[data-style="minimal"] .event-bar__pulse::before { width: 5px; height: 5px; animation: none; box-shadow: none; }
.event-bar[data-style="minimal"] .event-bar__date {
  background: none; padding: 0; font-size: 10px; opacity: .8;
}
.event-bar[data-style="minimal"] .event-bar__title { font-size: 12px; font-weight: 600; }
.event-bar[data-style="minimal"] .event-bar__meta  { font-size: 11px; opacity: .55; }
.event-bar[data-style="minimal"] .event-bar__cta {
  background: none; color: var(--eb-fg);
  padding: 2px 0; border-radius: 0; box-shadow: none;
  border-bottom: 1px solid var(--eb-accent);
  letter-spacing: .08em;
}
.event-bar[data-style="minimal"][href]:hover .event-bar__cta { box-shadow: none; }
@media (max-width: 700px) {
  .event-bar[data-style="minimal"] .event-bar__inner { padding: 6px 14px; }
  .event-bar[data-style="minimal"] .event-bar__details { font-size: 9px; }
}
@supports not (background: color-mix(in srgb, red 50%, blue)) {
  .event-bar[data-style="minimal"] { background: var(--eb-bg); }
}

/* ───────────────────────────────────────────────────────────────────────────
   8. URGENCE — « Dernières places »
   Liseré d'accent qui bat sur le bord gauche, pastille d'état (« DERNIÈRES
   PLACES », « COMPLET », « GUEST LIST »). Le seul style qui annonce une
   RARETÉ — à ne sortir que quand c'est vrai, sinon il s'use.
   ─────────────────────────────────────────────────────────────────────────── */
.event-bar[data-style="urgence"] {
  background: var(--eb-bg);
  border-left: 4px solid var(--eb-accent);
}
.event-bar[data-style="urgence"]::before {
  content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 4px;
  margin-left: -4px;
  background: var(--eb-accent);
  animation: ebUrgence 1.8s ease-in-out infinite;
  pointer-events: none;
}
@keyframes ebUrgence { 0%,100% { opacity: 1; } 50% { opacity: .35; } }
.event-bar[data-style="urgence"] .event-bar__flag {
  background: var(--eb-accent); color: #0B0B0B;
  /* ⚠ La pastille NE clignote PAS : c'est du TEXTE, et un texte à 35 %
     d'opacité une seconde sur deux est illisible la moitié du temps. Le
     battement est porté par le liseré, qui ne porte aucune information. */
}
.event-bar[data-style="urgence"] .event-bar__pulse::before {
  background: var(--eb-accent);
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--eb-accent) 70%, transparent);
}
.event-bar[data-style="urgence"] .event-bar__cta {
  background: var(--eb-accent); color: #0B0B0B; font-weight: 800;
}
@media (prefers-reduced-motion: reduce) {
  .event-bar[data-style="urgence"]::before { animation: none; }
}

/* ───────────────────────────────────────────────────────────────────────────
   9. DEGRADE — « Dégradé lent »
   Un dégradé de trois teintes dérivées de l'accent, qui dérive très lentement
   (18 s). Le mouvement est sous le seuil de la distraction : on ne le voit pas
   bouger, on remarque juste que le bandeau est vivant.
   ─────────────────────────────────────────────────────────────────────────── */
.event-bar[data-style="degrade"] {
  background: linear-gradient(115deg,
    var(--eb-bg) 0%,
    color-mix(in srgb, var(--eb-accent) 55%, var(--eb-bg)) 35%,
    color-mix(in srgb, var(--eb-accent) 20%, #000) 65%,
    var(--eb-bg) 100%);
  background-size: 260% 100%;
  animation: ebDrift 18s ease-in-out infinite alternate;
}
@keyframes ebDrift { from { background-position: 0% 50%; } to { background-position: 100% 50%; } }
.event-bar[data-style="degrade"] .event-bar__date {
  background: rgba(255,255,255,.18); border: 1px solid rgba(255,255,255,.16);
}
.event-bar[data-style="degrade"] .event-bar__cta {
  background: rgba(255,255,255,.14); color: var(--eb-fg);
  border: 1px solid rgba(255,255,255,.5);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
@media (prefers-reduced-motion: reduce) {
  .event-bar[data-style="degrade"] { animation: none; background-size: 100% 100%; }
}
@supports not (background: color-mix(in srgb, red 50%, blue)) {
  .event-bar[data-style="degrade"] {
    background: linear-gradient(115deg, var(--eb-bg) 0%, var(--eb-accent) 50%, var(--eb-bg) 100%);
    background-size: 260% 100%;
  }
}

/* ───────────────────────────────────────────────────────────────────────────
   10. PAPIER — « Kraft »
   Le seul style CLAIR. Fond papier, texte encre, tampon d'accent : il tranche
   violemment avec la story sombre, ce qui est exactement l'effet recherché
   pour un événement de jour, un vide-grenier, une date associative.
   ⚠ Ce style IGNORE la couleur de fond du formulaire — sinon un fond sombre
   hérité d'un bandeau précédent donnerait de l'encre noire sur du noir.
   ─────────────────────────────────────────────────────────────────────────── */
.event-bar[data-style="papier"] {
  background: #F3EAD8;
  color: #191309;
  box-shadow: 0 3px 14px rgba(25,19,9,.16);
  border-bottom: 1px solid rgba(25,19,9,.14);
}
.event-bar[data-style="papier"]::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  opacity: .5;
  background-image: radial-gradient(rgba(25,19,9,.10) .6px, transparent .6px);
  background-size: 4px 4px;
}
.event-bar[data-style="papier"]::after {
  background: linear-gradient(90deg, transparent 0%, rgba(25,19,9,.05) 50%, transparent 100%);
}
.event-bar[data-style="papier"] .event-bar__pulse { color: rgba(25,19,9,.75); }
.event-bar[data-style="papier"] .event-bar__date {
  background: var(--eb-accent); color: #F7F4EC;
  border-radius: 2px; transform: rotate(-1.5deg);
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
.event-bar[data-style="papier"] .event-bar__title { color: #191309; }
.event-bar[data-style="papier"] .event-bar__meta,
.event-bar[data-style="papier"] .event-bar__details { color: #191309; opacity: .62; }
.event-bar[data-style="papier"] .event-bar__price { color: #191309; }
.event-bar[data-style="papier"] .event-bar__cta {
  background: #191309; color: #F3EAD8;
  border-radius: 2px; box-shadow: 2px 2px 0 var(--eb-accent);
}
.event-bar[data-style="papier"] .event-bar__flag { background: #191309; color: #F3EAD8; }
.event-bar[data-style="papier"] .event-bar__countdown { color: #191309; }
.event-bar[data-style="papier"][href]:hover .event-bar__cta { box-shadow: 4px 4px 0 var(--eb-accent); }

/* ───────────────────────────────────────────────────────────────────────────
   MOBILE : la zone de gauche n'a de la place que pour DEUX pastilles
   Mesuré au navigateur le 24/08/2026 sur 390 px : « J-12 » + « 28 SEPT. 2026 »
   + le titre + le bouton, et le titre tombe à deux lettres ; avec la pastille
   « DERNIÈRES PLACES » à la place du compte à rebours, c'est le bandeau ENTIER
   qui déborde — la zone de gauche est en `flex-shrink: 0`, donc rien ne cède.
   C'est la DATE qui s'efface : « J-12 » la dit autrement, « DERNIÈRES PLACES »
   la rend secondaire, et le nom de la soirée, lui, doit rester lisible.
   ⚠ Un navigateur sans `:has()` ignore simplement ces règles et retrouve le
   comportement précédent — jamais pire.
   ─────────────────────────────────────────────────────────────────────────── */
@media (max-width: 700px) {
  .event-bar__left:has(.event-bar__countdown) .event-bar__date,
  .event-bar__left:has(.event-bar__flag) .event-bar__date { display: none; }
  .event-bar__flag { font-size: 8px; padding: 3px 7px; letter-spacing: .12em; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   APERÇU DU BACK OFFICE
   Le même bandeau, sorti de son `position: fixed` pour tenir dans une carte.
   ⚠ Ces règles ne servent QUE dans site.html — elles ne peuvent pas atteindre
   la vitrine, qui n'ajoute jamais la classe `--preview`.
   ═══════════════════════════════════════════════════════════════════════════ */
.event-bar--preview {
  position: relative; top: auto; left: auto; right: auto;
  z-index: 0;
  display: block;
  padding-top: 0;                 /* pas de notch dans une carte */
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(16,24,40,.10);
}
.event-bar--preview.is-visible { display: block; }