/* ==========================================================================
   FICHE EVENEMENT
   Panneau billetterie sticky au defilement (>=1024px) : demande client du
   2026-08-18, qui REVIENT sur le refus du sticky exprime le 2026-07-02.
   Rayon unique 5px sur tout le site (demande client).
   ========================================================================== */

.ll-evt { display: block; }

/* PIEGE : sans box-sizing:border-box, le padding s AJOUTE a la max-width
   (1360 + 80 = 1440) : l enveloppe deborde et son contenu tombe a 40 au lieu
   de 72,5, soit un axe different des sections en blocs natifs de la page. */
.ll-evt__wrap,
.ll-evt__wrap * { box-sizing: border-box; }
.ll-evt__wrap {
  max-width: calc(1280px + 2 * var(--ll-marge));
  margin-inline: auto;
  padding-inline: var(--ll-marge);
}

/* ==================================================================== HERO */
.ll-hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: clamp(520px, 76vh, 800px);
  background: var(--wp--preset--color--encre);
  overflow: hidden;
}
.ll-hero__fond { position: absolute; inset: 0; }
.ll-hero__img { width: 100%; height: 100%; object-fit: cover; object-position: center 28%; display: block; }

/* Le voile porte toute la lisibilite. DEUX couches :
   - horizontale, dense du cote du texte et transparente du cote de l image ;
   - verticale, qui ancre le bas de la composition.
   La couche horizontale est indispensable : le titre remonte des qu un message
   d etat ou un second bouton s ajoute, et retombait alors a 2,91 de contraste. */
.ll-hero__voile {
  position: absolute;
  inset: 0;
  background:
    /* Couche horizontale : dense mais COURTE, elle ne sert qu a porter le texte
       et s eteint vite pour rendre l image au reste du cadre. */
    linear-gradient(to right,
      rgba(10, 12, 16, 0.86) 0%,
      rgba(10, 12, 16, 0.62) 22%,
      rgba(10, 12, 16, 0.20) 52%,
      rgba(10, 12, 16, 0.04) 78%,
      rgba(10, 12, 16, 0) 100%),
    /* Couche verticale : nettement allegee, elle ancre le bas sans l effacer. */
    linear-gradient(to bottom,
      rgba(10, 12, 16, 0.05) 0%,
      rgba(10, 12, 16, 0.12) 40%,
      rgba(10, 12, 16, 0.28) 75%,
      rgba(10, 12, 16, 0.40) 100%);
}
.ll-hero__contenu {
  position: relative;
  width: 100%;
  padding-block: clamp(48px, 8vw, 90px) clamp(26px, 3.4vw, 46px);
}
/* Halo local sous le bloc texte : il rend la lisibilite SANS rassombrir tout
   le cadre. Tres large et sans arete, donc invisible en tant que forme — on
   evite la « boite » posee sur la photo. */
.ll-hero__contenu::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(115% 88% at 6% 76%,
    rgba(10, 12, 16, 0.66) 0%,
    rgba(10, 12, 16, 0.40) 34%,
    rgba(10, 12, 16, 0.14) 56%,
    rgba(10, 12, 16, 0) 72%);
}
.ll-hero__grille { position: relative; z-index: 1; }
.ll-hero__grille {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.06fr);
  gap: clamp(24px, 3.6vw, 52px);
  align-items: end;
}

.ll-hero__gauche > * { margin-block: 0; }
.ll-hero__type {
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--wp--preset--color--projecteur);
  margin-bottom: 14px;
}
.ll-hero__titre {
  font-family: var(--wp--preset--font-family--titre);
  font-size: clamp(2.35rem, 5.6vw, 4.35rem);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.03em;
  color: var(--wp--preset--color--projecteur);
  text-shadow: 0 2px 26px rgba(0, 0, 0, 0.55);
}
.ll-hero__filet {
  display: block;
  width: 74px;
  height: 4px;
  background: var(--wp--preset--color--projecteur);
  border-radius: 5px;
  margin-block-start: 22px;
}
.ll-hero__etat {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  background: var(--wp--preset--color--projecteur);
  color: var(--wp--preset--color--encre);
  padding: 7px 15px;
  border-radius: 5px;
  margin-bottom: 16px;
}
.ll-hero__report {
  margin-block-start: 16px;
  color: #fff;
  font-weight: 500;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.7);
}

/* Message libre (complet / annule / reporte).
   Pas de lisere d accent : c est le badge d etat au-dessus qui porte la couleur.
   Le message se distingue par sa matiere de verre, pas par un contour colore. */
.ll-hero__message {
  margin-block-start: 20px;
  max-width: 64ch;
  padding: 16px 20px;
  background-color: rgba(11, 13, 17, 0.44);
  background-image: linear-gradient(150deg,
    rgba(255, 255, 255, 0.13) 0%,
    rgba(255, 255, 255, 0.04) 44%,
    rgba(255, 255, 255, 0) 78%);
  backdrop-filter: blur(22px) saturate(160%);
  -webkit-backdrop-filter: blur(22px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 5px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.15),
    0 20px 44px -22px rgba(0, 0, 0, 0.7);
}
.ll-hero__message > * { margin-block: 0; color: #fff; font-weight: 500; line-height: 1.55; }
.ll-hero__message > * + * { margin-block-start: 8px; }
.ll-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-block-start: 28px;
}

/* Dalle de verre des informations.
   Volontairement SANS bordure coloree : la profondeur vient du degrade,
   du reflet interne en haut et de l ombre portee, pas d un contour. */
.ll-hero__panneau {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(18px, 2vw, 26px) 0;
  background-color: rgba(11, 13, 17, 0.46);
  background-image: linear-gradient(158deg,
    rgba(255, 255, 255, 0.15) 0%,
    rgba(255, 255, 255, 0.05) 36%,
    rgba(255, 255, 255, 0) 70%);
  backdrop-filter: blur(28px) saturate(168%);
  -webkit-backdrop-filter: blur(28px) saturate(168%);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 5px;
  padding: clamp(20px, 2.2vw, 30px) clamp(8px, 1vw, 14px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.17),
    0 30px 70px -28px rgba(0, 0, 0, 0.78);
}
.ll-hero__case {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  padding-inline: clamp(14px, 1.5vw, 22px);
  min-width: 0;
}
.ll-hero__case:not(:nth-child(3n + 1)) {
  border-inline-start: 1px solid rgba(255, 255, 255, 0.09);
}
.ll-hero__case-txt { min-width: 0; }
.ll-picto { width: 26px; height: 26px; flex: none; margin-top: 1px; }
.ll-hero__label {
  display: block;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--wp--preset--color--projecteur);
  margin-bottom: 4px;
}
.ll-hero__valeur {
  margin: 0;
  color: #fff;
  font-weight: 500;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

/* --------------------------------------------------- ETAT REPORTE (orange)
   L orange est une couleur SEMANTIQUE d information, distincte du jaune de
   marque. On teinte la matiere (badge plein, verre ambre, texte clair) sans
   revenir a un contour colore.
   Texte ENCRE sur orange (7,14) et orange CLAIR sur fond sombre (10,63) :
   du blanc sur l orange ne vaudrait que 2,67 et serait illisible. */
.ll-evt--reporte .ll-hero__etat {
  background: var(--wp--preset--color--report);
  color: var(--wp--preset--color--encre);
}
.ll-evt--annule .ll-hero__etat {
  background: var(--wp--preset--color--annule);
  color: var(--wp--preset--color--blanc);
}
.ll-evt--complet .ll-hero__etat {
  background: var(--wp--preset--color--complet);
  color: var(--wp--preset--color--encre);
}
.ll-evt--reporte .ll-hero__message {
  background-color: rgba(116, 57, 11, 0.50);
  background-image: linear-gradient(150deg,
    rgba(255, 214, 168, 0.20) 0%,
    rgba(255, 214, 168, 0.06) 44%,
    rgba(255, 255, 255, 0) 78%);
  border-color: rgba(247, 180, 114, 0.22);
  box-shadow:
    inset 0 1px 0 rgba(255, 214, 168, 0.24),
    0 20px 44px -22px rgba(0, 0, 0, 0.7);
}
.ll-evt--reporte .ll-hero__report {
  color: var(--wp--preset--color--report-clair);
  font-weight: 700;
}
.ll-evt--reporte .ll-carte__etat,
.ll-carte__etat--reporte {
  background: var(--wp--preset--color--report);
  color: var(--wp--preset--color--encre);
}

/* Placement, rappele dans le panneau billetterie (il conditionne assis/debout) */
.ll-panneau__place { font-weight: 500; }
.ll-panneau__place .ll-panneau__soustitre { display: block; margin-bottom: 5px; }

/* ======================================================== BANDEAU PREVENTE */
.ll-pv {
  background: var(--wp--preset--color--projecteur);
  color: var(--wp--preset--color--encre);
  padding-block: clamp(18px, 2.2vw, 26px);
}
.ll-pv__grille {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 18px 32px;
}
.ll-pv__gauche > *, .ll-pv__droite > * { margin-block: 0; }
.ll-pv__kicker {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.72;
  margin-bottom: 5px;
}
.ll-pv__prix {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 12px;
  font-family: var(--wp--preset--font-family--titre);
}
.ll-pv__prix strong { font-size: clamp(1.6rem, 3vw, 2.2rem); font-weight: 700; letter-spacing: -0.02em; }
.ll-pv__barre { font-size: 1.05rem; opacity: 0.55; }
.ll-pv__eco {
  font-family: var(--wp--preset--font-family--corps);
  font-size: 0.8125rem;
  font-weight: 700;
  background: var(--wp--preset--color--encre);
  color: var(--wp--preset--color--projecteur);
  padding: 5px 11px;
  border-radius: 5px;
}
.ll-pv__droite { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; text-align: right; }
.ll-pv__limite { font-size: var(--wp--preset--font-size--petit); }
.ll-pv__compte {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border: 1px solid rgba(14, 16, 20, 0.28);
  border-radius: 5px;
  padding: 6px 12px;
}
.ll-pv .ll-btn--primaire {
  background: var(--wp--preset--color--encre);
  color: var(--wp--preset--color--projecteur);
}
.ll-pv .ll-btn--primaire:hover { background: #fff; color: var(--wp--preset--color--encre); }

/* =================================================================== CORPS */
.ll-evt__corps { padding-block: clamp(44px, 6vw, 84px) clamp(48px, 7vw, 96px); }
.ll-evt__grille {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 372px;
  gap: clamp(32px, 4.5vw, 68px);
  align-items: start;
}
.ll-evt__principal > :first-child { margin-block-start: 0; }
.ll-evt__h2 {
  font-family: var(--wp--preset--font-family--titre);
  font-size: var(--wp--preset--font-size--titre);
  font-weight: 700;
  letter-spacing: -0.018em;
  margin: 0 0 20px;
}
.ll-evt__principal .ll-prose + .ll-evt__h2,
.ll-evt__principal .ll-decouvrir + .ll-evt__h2,
.ll-evt__principal .ll-video + .ll-evt__h2 { margin-block-start: 48px; }

.ll-evt__principal .ll-prose + .ll-video { margin-block-start: 48px; }
.ll-evt__visuel-second { margin: 40px 0 0; }
.ll-evt__visuel-img { display: block; width: 100%; height: auto; border-radius: 5px; }

/* Encart "decouvrir l artiste" */
.ll-decouvrir {
  margin-block-start: 36px;
  padding: clamp(22px, 2.4vw, 30px);
  background-image: linear-gradient(135deg, #FFFCF2 0%, var(--wp--preset--color--creme) 58%);
  border: 1px solid var(--wp--preset--color--brume);
  border-radius: 5px;
}
.ll-decouvrir > * { margin-block: 0; }
.ll-decouvrir__kicker {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--wp--preset--color--projecteur-profond);
  margin-bottom: 8px;
}
.ll-decouvrir__txt {
  font-family: var(--wp--preset--font-family--titre);
  font-size: var(--wp--preset--font-size--sous-titre);
  font-weight: 700;
  letter-spacing: -0.015em;
  margin-bottom: 16px;
}

.ll-seances { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.ll-seances__item {
  position: relative;
  margin: 0;
  padding: 15px 18px 15px 40px;
  background: var(--wp--preset--color--blanc);
  border: 1px solid var(--wp--preset--color--brume);
  border-radius: 5px;
  font-weight: 500;
}
/* Repere discret plutot qu un lisere : une pastille pleine, alignee sur le texte. */
.ll-seances__item::before {
  content: "";
  position: absolute;
  inset-inline-start: 18px;
  inset-block-start: 1.15em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--wp--preset--color--projecteur);
}
.ll-seances__item::first-letter { text-transform: uppercase; }
.ll-seances__item.is-passee { opacity: 0.5; }
.ll-seances__item.is-passee::before { background: var(--wp--preset--color--brume); }

/* ================================================================= PANNEAU */
/* Panneau billetterie en NOIR : second ancrage sombre de la page, la ou se
   joue la conversion. Il porte la classe .ll-sombre, donc les titres et les
   liens du theme basculent deja ; le reste est repris ici explicitement. */
.ll-panneau {
  background-color: var(--wp--preset--color--encre);
  background-image: linear-gradient(168deg,
    rgba(255, 255, 255, 0.06) 0%,
    rgba(255, 255, 255, 0.015) 40%,
    rgba(255, 255, 255, 0) 72%);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 5px;
  padding: clamp(24px, 2.4vw, 32px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.10),
    0 26px 60px -30px rgba(0, 0, 0, 0.6);
  color: var(--wp--preset--color--blanc);
}
.ll-panneau .ll-panneau__mention { color: var(--wp--preset--color--projecteur); }
.ll-panneau .ll-panneau__soustitre,
.ll-panneau .ll-tarifs__titre { color: rgba(255, 255, 255, 0.58); }
.ll-panneau .ll-tarifs__ligne { border-bottom-color: rgba(255, 255, 255, 0.12); }
.ll-panneau .ll-tarifs__ligne dt { color: rgba(255, 255, 255, 0.72); }
.ll-panneau .ll-tarifs__ligne dd { color: var(--wp--preset--color--blanc); }
.ll-panneau .ll-tarifs--vedette {
  background-image: linear-gradient(150deg, rgba(251, 211, 76, 0.14) 0%, rgba(251, 211, 76, 0.04) 62%);
  border-color: rgba(251, 211, 76, 0.28);
}
.ll-panneau .ll-tarifs--vedette .ll-tarifs__titre { color: var(--wp--preset--color--projecteur); }
.ll-panneau .ll-tarifs--vedette .ll-tarifs__ligne dd { color: var(--wp--preset--color--projecteur); }
.ll-panneau .ll-panneau__lieu { border-top-color: rgba(255, 255, 255, 0.12); }
.ll-panneau .ll-panneau__adresse { color: rgba(255, 255, 255, 0.78); }
.ll-panneau .ll-panneau__adresse strong { color: var(--wp--preset--color--blanc); }
.ll-panneau .ll-panneau__ferme {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.16);
  color: rgba(255, 255, 255, 0.76);
}
.ll-panneau .ll-panneau__place { color: var(--wp--preset--color--blanc); }
/* Boutons plateformes : version claire sur fond sombre. */
.ll-panneau .ll-btn--contour {
  color: var(--wp--preset--color--blanc);
  border-color: rgba(255, 255, 255, 0.24);
  background: rgba(255, 255, 255, 0.04);
}
.ll-panneau .ll-btn--contour:hover {
  background: var(--wp--preset--color--projecteur);
  color: var(--wp--preset--color--encre);
  border-color: var(--wp--preset--color--projecteur);
}
.ll-panneau > * { margin-block: 0; }
.ll-panneau > * + * { margin-block-start: 24px; }
.ll-panneau__titre {
  font-family: var(--wp--preset--font-family--titre);
  font-size: var(--wp--preset--font-size--titre-mineur);
  font-weight: 700;
  letter-spacing: -0.018em;
}
.ll-panneau__mention {
  font-family: var(--wp--preset--font-family--titre);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--wp--preset--color--projecteur-profond);
  margin-block-start: 4px !important;
}
.ll-panneau__gratuit {
  display: inline-block;
  background: var(--wp--preset--color--projecteur);
  color: var(--wp--preset--color--encre);
  font-weight: 700;
  padding: 9px 18px;
  border-radius: 5px;
}
.ll-panneau__soustitre {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--wp--preset--color--graphite);
  margin: 0 0 12px;
}
.ll-panneau__ferme {
  padding: 14px 16px;
  border: 1px dashed var(--wp--preset--color--brume);
  border-radius: 5px;
  color: var(--wp--preset--color--graphite);
  background: var(--wp--preset--color--creme);
  font-size: var(--wp--preset--font-size--petit);
}
/* Variante en div : le message libre peut compter plusieurs paragraphes. */
div.ll-panneau__ferme > * { margin-block: 0; }
div.ll-panneau__ferme > * + * { margin-block-start: 8px; }
.ll-panneau__lieu { border-top: 1px solid var(--wp--preset--color--brume); padding-top: 22px; }
.ll-panneau__adresse { margin: 0 0 10px; line-height: 1.55; }
.ll-lien { font-weight: 600; font-size: var(--wp--preset--font-size--petit); }

/* Grilles tarifaires */
.ll-tarifs { margin: 0; }
.ll-tarifs + .ll-tarifs { margin-block-start: 20px; }
.ll-tarifs--vedette {
  background-image: linear-gradient(150deg, #FFFAE8 0%, #FFFDF6 62%);
  border: 1px solid #F0E3B8;
  border-radius: 5px;
  padding: 18px 20px;
}
.ll-tarifs__titre {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--wp--preset--color--graphite);
  margin: 0 0 10px;
}
.ll-tarifs--vedette .ll-tarifs__titre { color: var(--wp--preset--color--projecteur-profond); }
.ll-tarifs__liste { margin: 0; display: grid; gap: 2px; }
.ll-tarifs__ligne {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px dotted var(--wp--preset--color--brume);
}
.ll-tarifs__ligne:last-child { border-bottom: 0; }
.ll-tarifs__ligne dt { margin: 0; color: var(--wp--preset--color--graphite); font-size: var(--wp--preset--font-size--petit); }
.ll-tarifs__ligne dd { margin: 0; font-weight: 700; white-space: nowrap; }
.ll-tarifs--vedette .ll-tarifs__ligne dd { color: var(--wp--preset--color--projecteur-profond); }

.ll-panneau__plateformes { display: grid; gap: 9px; }
.ll-panneau__plateformes .ll-panneau__soustitre { margin-bottom: 3px; }

/* ================================================================= BOUTONS */
.ll-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 24px;
  border-radius: 5px;
  font-weight: 600;
  font-size: var(--wp--preset--font-size--corps);
  line-height: 1.2;
  text-decoration: none;
  border: 1px solid transparent;
  transition: background-color var(--ll-transition), color var(--ll-transition), border-color var(--ll-transition);
}
.ll-btn--primaire { background: var(--wp--preset--color--projecteur); color: var(--wp--preset--color--encre); }
.ll-btn--primaire:hover { background: #fff; color: var(--wp--preset--color--encre); }
.ll-btn--fantome {
  background-color: rgba(11, 13, 17, 0.34);
  background-image: linear-gradient(150deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0.04) 62%);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.22);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
}
.ll-btn--fantome:hover { background: #fff; color: var(--wp--preset--color--encre); border-color: #fff; }
.ll-btn--video::before {
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 5px 0 5px 8px;
  border-color: transparent transparent transparent currentColor;
}
.ll-btn--contour {
  background: transparent;
  color: var(--wp--preset--color--encre);
  border-color: var(--wp--preset--color--brume);
  font-size: var(--wp--preset--font-size--petit);
  padding: 11px 18px;
  justify-content: flex-start;
}
.ll-btn--contour:hover { border-color: var(--wp--preset--color--projecteur); background: var(--wp--preset--color--creme); }

/* Air AUTOUR de la section (demande client) : marge sous le titre et au-dessus
   des boutons. L air INTERNE des cartes, lui, a ete resserre. */
.ll-suite > .wp-block-heading { margin-block-end: clamp(38px, 4.4vw, 62px) !important; }
.ll-suite > .ll-actions { margin-block-start: clamp(40px, 4.6vw, 64px) !important; }

/* Les deux boutons de bas de section */
.ll-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}
.ll-btn--ligne {
  background: transparent;
  color: var(--wp--preset--color--encre);
  border-color: var(--wp--preset--color--encre);
  border-width: 1px;
}
.ll-btn--ligne:hover {
  background: var(--wp--preset--color--encre);
  color: var(--wp--preset--color--blanc);
}
.ll-btn--pdf svg { width: 19px; height: 19px; flex: none; }

/* ============================================================ PARTENAIRES */
.ll-partenaires {
  background: var(--wp--preset--color--blanc);
  padding-block: clamp(64px, 7vw, 112px);
}
.ll-partenaires__titre {
  font-family: var(--wp--preset--font-family--titre);
  font-size: var(--wp--preset--font-size--titre-majeur);
  font-weight: 700;
  letter-spacing: -0.02em;
  text-align: center;
  margin: 0;
}
.ll-partenaires__filet {
  display: block;
  width: 72px;
  height: 4px;
  border-radius: 5px;
  background: var(--wp--preset--color--projecteur);
  margin: 20px auto clamp(38px, 4.2vw, 58px);
}

.ll-plaques { list-style: none; margin: 0; padding: 0; }

/* ---------------------------------------------- BANDE A DEFILEMENT CONTINU
   PIEGE : l ecart entre plaques doit etre porte par CHAQUE plaque en
   margin-inline-end, jamais par un `gap` du conteneur. Avec un `gap`, la
   couture entre la fin d une serie et le debut de la suivante saute d un
   ecart et le raccord se voit a chaque tour. */
.ll-bande {
  overflow: hidden;
  padding-block: 6px;
  /* Les bords s estompent : la bande semble venir de plus loin que l ecran. */
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 5%, #000 95%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 5%, #000 95%, transparent 100%);
}
.ll-bande__piste {
  display: flex;
  width: max-content;
  will-change: transform;
}
.ll-bande__piste > .ll-plaque {
  flex: 0 0 clamp(230px, 24vw, 292px);
  margin-inline-end: clamp(18px, 2vw, 26px);
}

@media (prefers-reduced-motion: no-preference) {
  @keyframes llBande {
    from { transform: translate3d(0, 0, 0); }
    /* Une serie sur N : le motif se referme exactement sur lui-meme. */
    to   { transform: translate3d(calc(-100% / var(--ll-series, 3)), 0, 0); }
  }
  .ll-bande__piste { animation: llBande 46s linear infinite; }
  .ll-bande:hover .ll-bande__piste,
  .ll-bande:focus-within .ll-bande__piste { animation-play-state: paused; }
}

/* Sans animation, la bande reste consultable au doigt et au clavier. */
@media (prefers-reduced-motion: reduce) {
  .ll-bande { overflow-x: auto; }
}

.ll-plaques.ll-carrousel__piste > .ll-plaque { flex: 0 0 clamp(230px, 25%, 292px); scroll-snap-align: start; }
.ll-plaque { margin: 0; display: flex; }
.ll-plaque__lien {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 4px;
  width: 100%;
  padding: 30px 22px 26px;
  text-decoration: none;
  color: inherit;
  background: var(--wp--preset--color--blanc);
  border: 1px solid var(--wp--preset--color--brume);
  border-radius: 5px;
  transition: border-color var(--ll-transition), box-shadow var(--ll-transition), transform var(--ll-transition);
}
a.ll-plaque__lien:hover {
  border-color: var(--wp--preset--color--projecteur);
  box-shadow: var(--ll-ombre-portee);
  transform: translateY(-3px);
}
/* Zone de logo a hauteur FIXE : les logos ont des hauteurs calculees
   differentes, sans cette zone les noms ne s alignent pas d une plaque a l autre. */
.ll-plaque__visuel {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 88px;
  width: 100%;
  margin-bottom: 18px;
}
.ll-plaque__logo {
  width: auto;
  max-width: 100%;
  object-fit: contain;
  display: block;
}
.ll-plaque__nom {
  font-weight: 600;
  text-align: center;
  line-height: 1.35;
}
.ll-plaque__hote {
  font-size: var(--wp--preset--font-size--petit);
  color: var(--wp--preset--color--graphite);
}

@media (max-width: 599.98px) {
  .ll-plaques.ll-carrousel__piste > .ll-plaque { flex: 0 0 76%; }
  .ll-plaque__visuel { height: 78px; }
}

/* ============================================== CARTES DE LA PROGRAMMATION */

/* Voile leger sur le visuel : il pose les pastilles et donne de la profondeur
   sans eteindre l affiche du spectacle. */
.ll-carte__voile {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(to bottom,
    rgba(10, 12, 16, 0.30) 0%,
    rgba(10, 12, 16, 0.10) 38%,
    rgba(10, 12, 16, 0.06) 70%,
    rgba(10, 12, 16, 0.20) 100%);
}

/* Pastilles : une seule par carte, l etat prime sur la prevente.
   Couleurs calculees pour le texte qu elles portent — l encre ne passe pas
   sur le rouge (3,5), c est donc du blanc. */
.ll-carte__pastille {
  position: absolute;
  inset-block-start: 14px;
  inset-inline-start: 14px;
  z-index: 2;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  padding: 7px 12px;
  border-radius: 5px;
  box-shadow: 0 6px 18px -8px rgba(0, 0, 0, 0.55);
}
.ll-carte__pastille--prevente { background: var(--wp--preset--color--projecteur); color: var(--wp--preset--color--encre); }
.ll-carte__pastille--reporte  { background: var(--wp--preset--color--report);     color: var(--wp--preset--color--encre); }
.ll-carte__pastille--annule   { background: var(--wp--preset--color--annule);     color: var(--wp--preset--color--blanc); }
.ll-carte__pastille--complet  { background: var(--wp--preset--color--complet);    color: var(--wp--preset--color--encre); }

/* ------------------------------------------------------------- CARROUSEL */
.ll-carrousel { position: relative; }
.ll-carrousel__piste {
  display: flex;
  gap: clamp(18px, 2vw, 26px);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  /* Pas de compensation horizontale : elle decalait la premiere carte de 2px
     et cassait l axe commun avec le titre et l en-tete. */
  padding: 4px 0 18px;
  margin: -4px 0 -6px;
  scrollbar-width: thin;
  overscroll-behavior-x: contain;
}
.ll-carrousel__piste > .ll-carte {
  flex: 0 0 clamp(248px, 30%, 330px);
  scroll-snap-align: start;
}
.ll-carrousel__piste:focus-visible {
  outline: 2px solid var(--wp--preset--color--projecteur-profond);
  outline-offset: 4px;
}
.ll-carrousel__fleche {
  position: absolute;
  inset-block-start: 38%;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  padding: 0;
  border: 1px solid var(--wp--preset--color--brume);
  border-radius: 5px;
  background: var(--wp--preset--color--blanc);
  color: var(--wp--preset--color--encre);
  cursor: pointer;
  box-shadow: 0 10px 26px -12px rgba(14, 16, 20, 0.45);
  transition: background-color var(--ll-transition), color var(--ll-transition), border-color var(--ll-transition), opacity var(--ll-transition);
}
.ll-carrousel__fleche svg { width: 22px; height: 22px; }
.ll-carrousel__fleche--prec { inset-inline-start: -14px; }
.ll-carrousel__fleche--suiv { inset-inline-end: -14px; }
.ll-carrousel__fleche:hover:not(:disabled) {
  background: var(--wp--preset--color--projecteur);
  border-color: var(--wp--preset--color--projecteur);
}
.ll-carrousel__fleche:disabled { opacity: 0.32; cursor: default; }

@media (max-width: 1279.98px) {
  .ll-carrousel__fleche--prec { inset-inline-start: 2px; }
  .ll-carrousel__fleche--suiv { inset-inline-end: 2px; }
}
@media (max-width: 599.98px) {
  .ll-carrousel__piste > .ll-carte { flex: 0 0 82%; }
  .ll-carrousel__fleche { display: none; }
}

/* ============================================================== RESPONSIVE */
@media (max-width: 1023.98px) {
  .ll-evt__grille { grid-template-columns: minmax(0, 1fr); }
  .ll-evt__panneau { order: -1; }
  .ll-hero__grille { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .ll-hero { min-height: 0; }
  .ll-hero__contenu { padding-block: clamp(118px, 24vw, 230px) clamp(24px, 3vw, 36px); }
  .ll-hero__panneau { margin-block-start: 24px; }

  /* Le texte n est plus cantonne a gauche : le degrade horizontal ne le couvre
     plus et le sur-titre tombait a 2,70. Voile PLUS DENSE et vertical ici. */
  .ll-hero__voile {
    background:
      linear-gradient(to bottom,
        rgba(10, 12, 16, 0.22) 0%,
        rgba(10, 12, 16, 0.57) 9%,
        rgba(10, 12, 16, 0.69) 26%,
        rgba(10, 12, 16, 0.72) 60%,
        rgba(10, 12, 16, 0.78) 100%);
  }
  /* Le halo est cale sur la composition desktop (texte en bas a gauche).
     En mobile le texte occupe toute la largeur des le haut : on le recentre. */
  .ll-hero__contenu::before {
    background: radial-gradient(140% 76% at 50% 46%,
      rgba(10, 12, 16, 0.34) 0%,
      rgba(10, 12, 16, 0.16) 46%,
      rgba(10, 12, 16, 0) 78%);
  }
}

@media (max-width: 781.98px) {
  .ll-hero__panneau { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ll-hero__case:not(:nth-child(3n + 1)) { border-inline-start: 0; }
  .ll-hero__case:not(:nth-child(2n + 1)) { border-inline-start: 1px solid rgba(255, 255, 255, 0.13); }
  .ll-pv__grille { flex-direction: column; align-items: flex-start; }
  .ll-pv__droite { text-align: left; }
}

@media (max-width: 599.98px) {
  .ll-hero__panneau { grid-template-columns: minmax(0, 1fr); gap: 14px 0; }
  .ll-hero__case { border-inline-start: 0 !important; padding-inline: 0; }
  .ll-hero__case + .ll-hero__case { border-top: 1px solid rgba(255, 255, 255, 0.13); padding-top: 14px; }
  .ll-hero__actions .ll-btn { flex: 1 1 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .ll-btn { transition: none; }
}

/* ==========================================================================
   ANIMATIONS
   Regle de securite : TOUT est enferme dans (prefers-reduced-motion: no-preference).
   Si la requete ne s applique pas, aucune regle d opacite n existe et le contenu
   reste visible. On ne pose JAMAIS opacity:0 en dehors d une animation.
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {

  @keyframes llMonte {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: none; }
  }
  @keyframes llFondu {
    from { opacity: 0; }
    to   { opacity: 1; }
  }
  /* Respiration lente de l image : l immersion sans mouvement brusque. */
  @keyframes llAmpleur {
    from { transform: scale(1.07); }
    to   { transform: scale(1); }
  }
  @keyframes llFilet {
    from { transform: scaleX(0); }
    to   { transform: scaleX(1); }
  }

  .ll-hero__img { animation: llAmpleur 1900ms cubic-bezier(.16, .7, .28, 1) both; }
  .ll-hero__voile { animation: llFondu 900ms ease-out both; }

  .ll-hero__etat    { animation: llMonte 620ms cubic-bezier(.2, .7, .3, 1) 120ms both; }
  .ll-hero__type    { animation: llMonte 620ms cubic-bezier(.2, .7, .3, 1) 180ms both; }
  .ll-hero__titre   { animation: llMonte 760ms cubic-bezier(.2, .7, .3, 1) 250ms both; }
  .ll-hero__filet   { animation: llFilet 620ms cubic-bezier(.2, .7, .3, 1) 520ms both; transform-origin: left center; }
  .ll-hero__message { animation: llMonte 700ms cubic-bezier(.2, .7, .3, 1) 400ms both; }
  .ll-hero__report  { animation: llMonte 700ms cubic-bezier(.2, .7, .3, 1) 460ms both; }
  .ll-hero__actions { animation: llMonte 700ms cubic-bezier(.2, .7, .3, 1) 540ms both; }
  .ll-hero__panneau { animation: llMonte 820ms cubic-bezier(.2, .7, .3, 1) 620ms both; }

  /* Les cases entrent une a une, apres la dalle. */
  .ll-hero__case { animation: llFondu 520ms ease-out both; }
  .ll-hero__case:nth-child(1) { animation-delay: 760ms; }
  .ll-hero__case:nth-child(2) { animation-delay: 820ms; }
  .ll-hero__case:nth-child(3) { animation-delay: 880ms; }
  .ll-hero__case:nth-child(4) { animation-delay: 940ms; }
  .ll-hero__case:nth-child(5) { animation-delay: 1000ms; }
  .ll-hero__case:nth-child(6) { animation-delay: 1060ms; }

  .ll-pv__grille > * { animation: llMonte 700ms cubic-bezier(.2, .7, .3, 1) 780ms both; }

  /* Reveal au defilement : progressive enhancement, aucun JS.
     Hors support, les regles n existent pas et tout reste visible. */
  @supports (animation-timeline: view()) {
    .ll-evt__principal > *,
    .ll-evt__panneau,
    .ll-suite > *,
    .ll-grille > .ll-carte {
      animation: llMonte linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 38%;
    }
  }

  .ll-carte__lien { transition: transform var(--ll-transition), box-shadow var(--ll-transition), border-color var(--ll-transition); }
  .ll-btn, .ll-carte__img { transition: transform var(--ll-transition), background-color var(--ll-transition), color var(--ll-transition), border-color var(--ll-transition); }
  .ll-evt__hero-visuel:hover .ll-evt__hero-img,
  .ll-carte__lien:hover .ll-carte__img { transform: scale(1.03); }
  .ll-carte__visuel { overflow: hidden; }
}

/* ------------------------------------------- MENTION DE REPORT DATE
   Un report dont la nouvelle date est connue n est PLUS une alerte : le
   spectacle s affiche normalement. Donc aucune teinte orange et aucune
   bordure coloree ici, seulement de la matiere. Cote hero la mention
   reutilise .ll-hero__message, qui retrouve son verre neutre des lors que
   la classe .ll-evt--reporte n est plus posee : rien a ajouter.
   Texte a 0,92 et non 0,76 : la lecon du mois des cartes vaut ici aussi,
   un blanc trop translucide ne garantit rien. */
.ll-panneau__report {
  margin-block: 16px 0;
  padding: 14px 16px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 5px;
  background-color: rgba(255, 255, 255, 0.06);
  background-image: linear-gradient(150deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.03) 46%, rgba(255, 255, 255, 0) 80%);
}
.ll-panneau__report > * {
  margin-block: 0;
  color: rgba(255, 255, 255, 0.92);
  font-size: var(--wp--preset--font-size--petit);
  line-height: 1.6;
}

/* =========================================== MESSAGE TEMPORAIRE (fiche)
   Bandeau COLLE en bas du viewport, refermable pour la session.
   z-index 50 : SOUS l overlay du menu mobile (60) -- un message ne doit
   jamais recouvrir un menu ouvert.

   COULEUR (demande client 2026-08-17) : fond ORANGE et non plus noir, qui
   ne captait pas l oeil. Orange #E8862A = la couleur d INFORMATION deja
   posee pour l etat \"Reporte\" ; le rouge #C0392B est reserve a \"Annule\",
   l employer ici brouillerait le code visuel du site.
   Contrastes mesures : encre sur orange 7,14 -- blanc sur orange 2,67,
   donc JAMAIS de blanc ici. Bouton en aplat encre, texte blanc (19,04).
*/
.ll-msg {
  position: fixed;
  z-index: 50;
  left: 0;
  right: 0;
  bottom: 0;
  /* Le rembourrage reprend --ll-marge : le bord de la carte tombe alors
     EXACTEMENT sur l axe de la page (72,5 en desktop, 20 en mobile). */
  padding: 10px var(--ll-marge) 0;
  pointer-events: none;
}
.ll-msg[hidden] { display: none; }
.ll-msg__inner {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: 1280px;
  margin-inline: auto;
  /* --ll-msg-inset : pose par le script quand un petit element flottant
     (le bouton de re-consentement) empiete sur le bord gauche. Le bandeau
     RESTE colle en bas, seul le contenu se decale. */
  padding: 9px 12px 9px calc(12px + var(--ll-msg-inset, 0px));
  border: 1px solid rgba(14, 16, 20, 0.14);
  border-radius: 5px 5px 0 0;
  background-color: var(--wp--preset--color--report);
  background-image: linear-gradient(158deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.04) 42%, transparent 76%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 -22px 50px -26px rgba(0, 0, 0, 0.55);
  pointer-events: auto;
}
/* Pastille plutot qu un trait lateral (retour client \"cliche IA\"). */
.ll-msg__pastille {
  flex: none;
  width: 8px;
  height: 8px;
  margin-top: 7px;
  border-radius: 50%;
  background: var(--wp--preset--color--encre);
}
.ll-msg__corps { flex: 1; min-width: 0; }
.ll-msg__texte {
  margin: 0;
  color: var(--wp--preset--color--encre);
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.5;
}
/* Le bouton primaire du site est jaune sur encre : sur l orange il serait
   illisible (1,84). On inverse en aplat encre + texte blanc. */
.ll-msg__lien.ll-btn--primaire {
  margin-top: 10px;
  background: var(--wp--preset--color--encre);
  color: #fff;
}
.ll-msg__lien.ll-btn--primaire:hover {
  background: #fff;
  color: var(--wp--preset--color--encre);
}
.ll-msg__fermer {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid rgba(14, 16, 20, 0.24);
  border-radius: 5px;
  background: rgba(14, 16, 20, 0.1);
  color: var(--wp--preset--color--encre);
  cursor: pointer;
}
.ll-msg__fermer[hidden] { display: none; }
.ll-msg__fermer svg { width: 18px; height: 18px; display: block; }
.ll-msg__fermer:hover { background: rgba(14, 16, 20, 0.2); }
.ll-msg__fermer:focus-visible { outline: 2px solid var(--wp--preset--color--encre); outline-offset: 2px; }

@media (max-width: 599.98px) {
  .ll-msg { padding: 8px var(--ll-marge) 0; }
  .ll-msg__inner { padding: 8px 10px 8px calc(10px + var(--ll-msg-inset, 0px)); gap: 10px; }
  /* La croix est la seule sortie d un bandeau qui occupe 20 % du viewport
     en mobile : zone tactile plus confortable. */
  .ll-msg__fermer { width: 40px; height: 40px; }
  .ll-msg__texte { font-size: 0.875rem; }
  .ll-msg__lien { width: 100%; }
}

/* Entree enfermee dans prefers-reduced-motion : hors de cette requete,
   aucune regle d opacite n existe et le bandeau est visible d emblee. */
@media (prefers-reduced-motion: no-preference) {
  .ll-msg__inner { animation: llMsgMonte 460ms cubic-bezier(.2, .7, .3, 1) both; }
  @keyframes llMsgMonte {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: none; }
  }
}

@media print { .ll-msg { display: none; } }

/* ============================ GRILLE ET CARROUSEL EN CARTES-AFFICHES
   Le bloc laloco/grille-evenements rend desormais la MEME carte que
   l accueil et que les archives par genre (.ll-aff). L ancienne .ll-carte
   etait le seul modele divergent du site ; ses regles sont devenues mortes
   et ont ete laissees en place le temps de la recette. */
.ll-grille {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(14px, 1.6vw, 22px);
  margin: 0;
  padding: 0;
  list-style: none;
}
.ll-grille__item { margin: 0; }
.ll-carrousel__piste > .ll-grille__item {
  flex: 0 0 clamp(228px, 27%, 300px);
  scroll-snap-align: start;
}

@media (max-width: 1023.98px) {
  .ll-grille { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 767.98px) {
  .ll-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 599.98px) {
  .ll-carrousel__piste > .ll-grille__item { flex: 0 0 68%; }
}

@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .ll-grille > .ll-grille__item {
      animation: llMonte linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 38%;
    }
    /* Pas d animation au defilement dans un carrousel : la piste bouge deja. */
    .ll-carrousel__piste > .ll-grille__item { animation: none; }
  }
}

/* --------------------------------------------------------------- VIDEO
   Lecteur YouTube integre au corps de la fiche, cible de l ancre #video
   posee sur le bouton du hero. Le son est coupe par l URL du lecteur
   (mute=1), pas par le CSS. Carte ENCRE (demande client : un fond qui
   fait ressortir la video), titre blanc DANS la carte, au-dessus du
   lecteur. Matiere du site : aplat + reflet, jamais de bordure coloree. */

/* L en-tete est STICKY (top 0, z 60, 100px desktop / 61px mobile) : une ancre
   calee sur le seul viewport glisserait le titre SOUS lui. On vise donc
   en-tete reel + 32px de marge blanche. Vaut aussi pour la billetterie. */
#video,
#billetterie,
#seances { scroll-margin-block-start: calc(var(--ll-entete-h, 100px) + 32px); }

.ll-video {
  padding: clamp(20px, 2.2vw, 28px);
  background-color: var(--wp--preset--color--encre);
  background-image: linear-gradient(152deg,
    rgba(255, 255, 255, 0.07) 0%,
    rgba(255, 255, 255, 0.02) 44%,
    rgba(255, 255, 255, 0) 76%);
  border-radius: 5px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.09),
    0 28px 58px -32px rgba(14, 16, 20, 0.55);
}

.ll-video .ll-evt__h2 {
  color: var(--wp--preset--color--blanc);
  margin: 0 0 16px;
}

.ll-video__cadre {
  aspect-ratio: 16 / 9;
  background-color: #000000;
  border-radius: 5px;
  overflow: hidden;
}

.ll-video__iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

/* ------------------------------------------- PANNEAU STICKY (2026-08-18)
   Demande client : la billetterie suit le defilement en desktop. La grille
   est deja en align-items:start, condition du sticky en enfant de grille.
   Rien sous 1024px : le panneau y passe AVANT le contenu (order:-1) et
   epinglerait un bloc de pleine largeur. */

@media (min-width: 1024px) {
  .ll-evt__panneau {
    position: sticky;
    top: 24px;
  }
}
/* ------------------------------------------ PLAQUES PLATEFORMES (2026-08-18)
   Demande client : dans le panneau, les plateformes en 2 colonnes avec les
   logos, comme dans le mega menu. Plaques claires par logo (les encres vont
   du noir pur au gris clair : sur le panneau sombre, la moitie serait
   invisible). Un nombre impair : la derniere plaque prend toute la largeur. */

.ll-panneau__plaques {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-block-start: 14px;
}

.ll-panneau__plaques > :last-child:nth-child(odd) { grid-column: 1 / -1; }

.ll-panneau__plaque {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 8px 12px;
  border-radius: 5px;
  background: var(--wp--preset--color--creme);
  text-decoration: none;
  transition: background var(--ll-transition), transform var(--ll-transition);
}

.ll-panneau__plaque:hover,
.ll-panneau__plaque:focus-visible {
  background: var(--wp--preset--color--blanc);
  transform: translateY(-2px);
}

.ll-panneau__logo {
  width: auto;
  max-width: 100%;
  object-fit: contain;
}

.ll-panneau__plaque-nom {
  color: var(--wp--preset--color--encre);
  font-size: 0.8125rem;
  font-weight: 600;
}

/* -------------------------------------------- DISTRIBUTION (2026-08-18)
   Champ wysiwyg des credits (musiciens, production), affiche 8px sous
   l iframe video, fond jaune tres clair, petit corps en 8pt : la taille
   deja employee par les credits dans les contenus migres. */

.ll-distribution {
  padding: 14px 18px;
  background-color: #FEF6D8;
  border-radius: 5px;
  color: var(--wp--preset--color--encre);
  font-size: 8pt;
  line-height: 1.6;
}

.ll-video + .ll-distribution--seule { margin-block-start: 8px; }

.ll-distribution--seule { margin-block-start: 28px; }

.ll-distribution > :first-child { margin-block-start: 0; }
.ll-distribution > :last-child { margin-block-end: 0; }
.ll-distribution p { margin-block: 0 6px; }
.ll-distribution ul { margin-block: 6px 8px; padding-inline-start: 18px; }
.ll-distribution li { margin-block: 0 3px; }

/* Les classes de taille du contenu migre (has-small-font-size, sub) ne
   doivent pas contredire le corps du bloc : tout herite des 8pt. */
/* !important : le coeur pose les classes has-*-font-size en !important. */
.ll-distribution *,
.ll-distribution [class*="-font-size"] { font-size: inherit !important; }

.ll-evt__principal .ll-distribution + .ll-evt__h2 { margin-block-start: 48px; }

/* Pastilles de regime d une seance (public Tout public et scolaire) :
   QUI en aplat encre, TARIF en jaune projecteur. Rayon 5px, comme tout. */
.ll-seances__pastilles {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-block-start: 8px;
}

.ll-seances__pastille {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 5px;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.ll-seances__pastille--qui {
  background: var(--wp--preset--color--encre);
  color: var(--wp--preset--color--blanc);
}

.ll-seances__pastille--tarif {
  background: var(--wp--preset--color--projecteur);
  color: var(--wp--preset--color--encre);
}