/* ============================================================================
   AGENDA DES SPECTACLES — feuille de style
   Thème repris des captures fournies (bordeaux / cabaret poétique).
   Modifie les variables ci-dessous pour changer les couleurs/polices partout
   d'un coup.
   ============================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,600;0,700;1,600&family=Poppins:wght@400;500;600;700&display=swap');

.agenda-root {
  --agenda-primary: #7a1420;
  --agenda-primary-dark: #4f0d15;
  --agenda-primary-soft: rgba(122, 20, 32, .08);
  --agenda-accent: #c9a13b;
  --agenda-bg: #ffffff;
  --agenda-bg-alt: #f6f4f2;
  --agenda-text: #2a2626;
  --agenda-text-light: #6d6666;
  --agenda-border: #e7e0e0;
  --agenda-radius: 10px;
  --agenda-shadow: 0 4px 18px rgba(60, 20, 20, .10);
  --agenda-shadow-hover: 0 10px 28px rgba(60, 20, 20, .18);
  --agenda-font-heading: 'Playfair Display', Georgia, serif;
  --agenda-font-body: 'Poppins', Arial, sans-serif;

  font-family: var(--agenda-font-body);
  color: var(--agenda-text);
  box-sizing: border-box;
  /* Les points de rupture ci-dessous réagissent à la largeur RÉELLE de ce
     bloc une fois inséré dans ta page (colonne de contenu WordPress),
     plutôt qu'à la largeur de la fenêtre du navigateur : sur un site avec
     une colonne de contenu étroite, l'agenda passe donc en mode "mobile"
     même sur un grand écran, au lieu de rester compressé en 3 colonnes. */
  container-type: inline-size;
}
/* Empêche le bloc de s'étirer sur toute la largeur si la page WordPress qui
   l'accueille n'a pas de colonne de contenu déjà centrée (ex: modèle de page
   "pleine largeur"), et le centre automatiquement. Si le bloc est déjà
   inséré dans une colonne plus étroite que 1100px (cas le plus fréquent),
   cette règle n'a aucun effet visible. Change la valeur ci-dessous pour
   ajuster la largeur maximale.
   Sélecteur doublé (.agenda-root.agenda-root) + !important : certains
   thèmes appliquent leurs propres marges/largeurs sur les blocs de contenu
   avec une spécificité plus forte qu'une simple classe ; ce doublage
   augmente notre spécificité sans dépendre de la structure HTML du thème. */
.agenda-root.agenda-root {
  max-width: 1100px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  float: none !important;
}
.agenda-root *, .agenda-root *::before, .agenda-root *::after { box-sizing: inherit; }
.agenda-root a { text-decoration: none; color: inherit; }
.agenda-root img { max-width: 100%; display: block; }
.agenda-root ul { list-style: none; margin: 0; padding: 0; }

/* Ton thème WordPress applique ses propres marges par défaut sur <p> et les
   titres (souvent via une règle du type ".entry-content p" qui est plus
   "forte" que les miennes) : ça ne se voit pas dans l'aperçu de l'éditeur
   (qui ne charge pas ce CSS de thème), mais ça décale l'affichage une fois
   la page publiée. On neutralise ça une bonne fois pour toutes ici, pour
   TOUS les <p>/titres/listes à l'intérieur de l'agenda, quel que soit le
   thème utilisé. Les marges volontaires (ex: sous le titre d'une carte)
   sont ensuite remises explicitement, elles aussi protégées par !important. */
.agenda-root p,
.agenda-root h1, .agenda-root h2, .agenda-root h3,
.agenda-root h4, .agenda-root h5, .agenda-root h6,
.agenda-root ul, .agenda-root ol, .agenda-root li {
  margin: 0 !important;
  padding: 0 !important;
}

.agenda-hidden { display: none !important; }
.agenda-empty {
  text-align: center;
  color: var(--agenda-text-light);
  font-style: italic;
}
/* sélecteur préfixé par .agenda-root : passe devant le reset général
   ".agenda-root p" juste au-dessus (même spécificité + !important sinon,
   c'est l'ordre d'apparition qui déciderait, donc mieux vaut trancher net) */
.agenda-root .agenda-empty { padding: 24px !important; }

/* ---------------------------------------------------------------------------
   Titres de section
--------------------------------------------------------------------------- */
.agenda-section-title {
  font-family: var(--agenda-font-heading);
  font-weight: 700;
  font-size: 1.6rem;
  color: var(--agenda-primary);
  text-align: center;
}
.agenda-root .agenda-section-title { margin: 0 0 10px !important; }

/* ---------------------------------------------------------------------------
   CARTE spectacle (accueil + agenda complet)
--------------------------------------------------------------------------- */
.agenda-cards {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 980px;
  margin: 0 auto;
}

.agenda-card {
  position: relative; /* indispensable : sert de repère à .agenda-card__link
                          (position:absolute) pour qu'il ne couvre QUE cette
                          carte, au lieu de toute la page */
  display: grid;
  grid-template-columns: 190px 1fr 280px;
  align-items: stretch;
  background: var(--agenda-bg);
  border: 1px solid var(--agenda-border);
  border-radius: var(--agenda-radius);
  overflow: hidden;
  box-shadow: var(--agenda-shadow);
  transition: box-shadow .25s ease, transform .25s ease;
}
.agenda-card:hover { box-shadow: var(--agenda-shadow-hover); transform: translateY(-2px); }

/* -- vignette + volet date (effet de recouvrement gauche -> droite) -- */
.agenda-card__thumb {
  position: relative;
  min-height: 108px;
  overflow: hidden;
  display: block;
  background: var(--agenda-bg-alt);
}
.agenda-card__thumb img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.agenda-card__date-panel {
  position: absolute;
  inset: 0 auto 0 0;
  z-index: 1;
  width: 46%;
  min-width: 104px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding: 6px 4px;
  color: #fff;
  text-align: center;
  background: linear-gradient(135deg, var(--agenda-primary) 0%, var(--agenda-primary-dark) 100%);
  transform-origin: left center;
  transition: width .38s cubic-bezier(.4,0,.2,1), padding .38s ease;
}
.agenda-card__date-day {
  font-family: var(--agenda-font-heading);
  font-size: 2.1rem;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: lining-nums;
  transition: font-size .38s ease;
}
.agenda-card__date-month {
  margin-top: 3px;
  font-size: .82rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  line-height: 1.2;
  white-space: nowrap;
}
.agenda-card__date-year {
  font-size: .72rem;
  opacity: .85;
  line-height: 1.2;
}
.agenda-card__date-time {
  font-size: .8rem;
  font-weight: 600;
  margin-top: 8px;
  opacity: .95;
}
.agenda-card__date-time::before { content: "🕒 "; }

/* effet de recouvrement au survol : le volet s'agrandit de gauche à droite.
   Déclenché au survol de TOUTE la carte (.agenda-card) et non du seul thumb :
   un lien invisible recouvre toute la carte pour la rendre cliquable, donc
   le survol de la vignette est en réalité un survol de ce lien — il faut
   donc que la règle :hover parte d'un ancêtre commun (.agenda-card). */
@media (hover: hover) and (pointer: fine) {
  .agenda-card:hover .agenda-card__date-panel {
    width: 100%;
    padding: 6px 18px;
  }
  .agenda-card:hover .agenda-card__date-day { font-size: 2.5rem; }
}
/* sur tactile : pas de hover, le volet reste assez large pour être lisible */
@media (hover: none), (pointer: coarse) {
  .agenda-card__date-panel { width: 60%; }
}

/* -- texte central -- */
.agenda-card__body {
  padding: 8px 18px;
  display: flex;
  flex-direction: column;
  gap: 0;
  justify-content: flex-start;
}
.agenda-card__title {
  font-family: var(--agenda-font-heading);
  font-weight: 700;
  font-size: 1.3rem;
  color: var(--agenda-text);
  line-height: 1.2;
}
/* 1/2 interligne du résumé (line-height .8rem * 1.35 ≈ 17px) sous le titre.
   Préfixé par .agenda-root pour passer devant le reset général plus haut. */
.agenda-root .agenda-card__title { margin: 0 0 9px !important; }
/* si un sous-titre (title2) suit, on resserre l'écart titre/sous-titre et
   c'est le sous-titre qui porte l'espacement avant le résumé à sa place. */
.agenda-root .agenda-card__title:has(+ .agenda-card__title2) { margin-bottom: 2px !important; }
.agenda-card__title2 {
  font-family: var(--agenda-font-body);
  font-size: .78rem;
  font-weight: 600;
  color: var(--agenda-text);
  line-height: 1.3;
}
.agenda-root .agenda-card__title2 { margin: 0 0 9px !important; }
.agenda-card__summary {
  font-size: .8rem;
  color: var(--agenda-text-light);
  line-height: 1.35;
  /* limite à 4 lignes, coupe avec "…" au-delà */
  display: -webkit-box;
  -webkit-line-clamp: 4;
  line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.agenda-root .agenda-card__summary { margin: 0 !important; }
.agenda-card__badge {
  align-self: flex-start;
  /* 1 interligne complet du résumé au-dessus du badge */
  margin-top: 17px !important;
  padding-top: 0;
  font-size: .7rem;
  font-weight: 600;
  color: var(--agenda-primary);
  text-transform: uppercase;
  letter-spacing: .03em;
}

/* -- lieu (colonne droite) --
   Le picto 📍 est positionné dans une "gouttière" à gauche (padding-left)
   au lieu d'être collé au texte du lieu : ainsi "Espace Loire", la rue et
   la ville démarrent tous à la même position horizontale, alignés entre
   eux, plutôt que d'être alignés sur le picto. */
.agenda-card__location {
  position: relative;
  /* padding-top calé sur la hauteur du titre (Vue1) pour que "Espace Loire"
     démarre à la même hauteur que la 1ère ligne du résumé, pas le titre.
     Suppose un titre sur une seule ligne : si un titre est exceptionnellement
     long et passe sur 2 lignes, l'alignement sera légèrement décalé pour
     cette carte-là. */
  padding: 42px 16px 8px 30px;
  background: var(--agenda-bg-alt);
  border-left: 1px solid var(--agenda-border);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 2px;
  font-size: .85rem;
}
.agenda-card__location-icon {
  position: absolute;
  left: 12px;
  top: 43px;
  color: var(--agenda-primary);
}
.agenda-card__venue {
  font-weight: 600;
  color: var(--agenda-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.agenda-card__address { color: var(--agenda-text-light); line-height: 1.3; }
.agenda-card__map-link {
  margin-top: 3px;
  font-weight: 600;
  font-size: .76rem;
  color: var(--agenda-primary);
  text-decoration: underline;
}

/* la carte entière est cliquable via un lien invisible */
.agenda-card__link {
  position: absolute;
  inset: 0;
  z-index: 2;
}

/* ---------------------------------------------------------------------------
   Responsive cartes
--------------------------------------------------------------------------- */
@container (max-width: 860px) {
  .agenda-card { grid-template-columns: 190px 1fr; }
  .agenda-card__location {
    grid-column: 1 / -1;
    border-left: none;
    border-top: 1px solid var(--agenda-border);
    flex-direction: row;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px 10px;
  }
}
@container (max-width: 560px) {
  .agenda-card { grid-template-columns: 1fr; }
  .agenda-card__thumb { min-height: 150px; }
  .agenda-card__location { grid-column: auto; }

  /* Mobile UNIQUEMENT (ne touche pas au bureau) : chaque évènement réduit
     d'environ moitié en hauteur — image, volet date, titre/résumé et bloc
     lieu tous redimensionnés de façon cohérente. Le petit picto 📍 devant
     le lieu est retiré (le texte du lieu démarre directement au padding). */
  .agenda-card__thumb { min-height: 80px; }
  .agenda-card__date-panel { padding: 2px 4px; }
  .agenda-card__date-day { font-size: 1.35rem; }
  .agenda-card__date-month { font-size: .56rem; margin-top: 1px; }
  .agenda-card__date-year { font-size: .5rem; }
  .agenda-card__date-time { font-size: .54rem; margin-top: 2px; }
  .agenda-card__body { padding: 5px 12px; }
  .agenda-card__title { font-size: .92rem; }
  .agenda-root .agenda-card__title { margin: 0 0 2px !important; }
  .agenda-root .agenda-card__title:has(+ .agenda-card__title2) { margin-bottom: 1px !important; }
  .agenda-card__title2 { font-size: .6rem; }
  .agenda-root .agenda-card__title2 { margin: 0 0 2px !important; }
  .agenda-card__summary {
    font-size: .66rem;
    -webkit-line-clamp: 2;
    line-clamp: 2;
  }
  .agenda-card__badge { font-size: .58rem; }
  .agenda-root .agenda-card__badge { margin-top: 6px !important; }
  .agenda-card__location {
    padding: 6px 12px;
    font-size: .68rem;
    gap: 1px 8px;
  }
  .agenda-card__location-icon { display: none; }
  .agenda-card__map-link { font-size: .62rem; margin-top: 1px; }

  /* Les cartes étant devenues nettement plus basses, un espace plus généreux
     entre elles aide à bien distinguer chaque évènement les uns des autres. */
  .agenda-cards { gap: 22px; }

  /* Thème couleur par carte, dérivé de la couleur dominante de l'image de
     CHAQUE évènement (calculé en JS, voir extractCardTheme/renderHome dans
     agenda.js, qui pose --agenda-card-bg-light/--agenda-card-bg-dark en
     style inline sur chaque .agenda-card). Bloc titre/résumé/badge = teinte
     claire, bloc lieu/adresse/ville = même teinte légèrement plus foncée —
     ça aide à voir d'un coup d'œil où commence et où finit chaque
     évènement dans la liste. Valeur de repli (2e argument de var()) =
     couleurs neutres habituelles, utilisée tant que le JS n'a pas encore
     calculé la couleur (chargement image) ou si l'extraction échoue
     (image d'un autre domaine sans CORS, etc.) : aucune carte ne reste
     donc jamais sans fond. */
  .agenda-card__body { background: var(--agenda-card-bg-light, var(--agenda-bg)); }
  .agenda-card__location { background: var(--agenda-card-bg-dark, var(--agenda-bg-alt)); }
}

/* ---------------------------------------------------------------------------
   ACCUEIL "VEDETTE" — N prochains spectacles, visuel portrait (snippet-06)
--------------------------------------------------------------------------- */
.agenda-highlights {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
  gap: 36px;
}
.agenda-highlight-card {
  display: flex;
  flex-direction: column;
  background: var(--agenda-bg);
  border: 1px solid var(--agenda-border);
  border-radius: var(--agenda-radius);
  box-shadow: var(--agenda-shadow);
  padding: 42px 24px;
}
.agenda-highlight-card__title {
  font-family: var(--agenda-font-heading);
  font-weight: 700;
  font-size: 1.725rem;
  text-transform: uppercase;
  line-height: 1.25;
  width: 100%;
  /* Toujours la hauteur de 2 lignes, même si le titre tient sur 1 seule,
     pour que tout ce qui suit (image, lieu, date...) démarre à la même
     hauteur d'une carte à l'autre. Si un titre dépasse 2 lignes, il est
     tronqué avec des points de suspension plutôt que de décaler la carte. */
  min-height: calc(1.725rem * 1.25 * 2);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.agenda-root .agenda-highlight-card__title,
.agenda-root .agenda-highlight-card__title2 { color: var(--agenda-primary) !important; }
.agenda-root .agenda-highlight-card__title { margin: 0 0 6px !important; }
.agenda-highlight-card__title2 {
  font-family: var(--agenda-font-body);
  font-size: 1.17rem;
  font-weight: 600;
  width: 100%;
  line-height: 1.3;
  /* Toujours affiché (même vide, voir agenda.js) et toujours la même
     hauteur (1 ligne) -> alignement identique avec ou sans sous-titre. */
  min-height: calc(1.17rem * 1.3);
  overflow: hidden;
}
.agenda-root .agenda-highlight-card__title2 { margin: 0 0 12px !important; }
.agenda-highlight-card__row {
  display: flex;
  align-items: center;
  gap: 30px;
}
.agenda-highlight-card__image {
  flex: 0 0 auto;
  width: 210px;
  aspect-ratio: 250 / 300;
  border-radius: 9px;
  overflow: hidden;
  background: var(--agenda-bg-alt);
  display: block;
}
.agenda-highlight-card__image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.agenda-highlight-card__body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.agenda-highlight-card__venue {
  font-size: 1.23rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .01em;
  color: var(--agenda-text);
  line-height: 1.35;
  width: 100%;
  /* Toujours la hauteur de 2 lignes, même si le nom du lieu tient sur 1
     seule -> le reste de la carte (date, heure, bouton) démarre à la même
     hauteur d'une carte à l'autre. */
  min-height: calc(1.23rem * 1.35 * 2);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.agenda-highlight-card__city {
  font-size: 1.17rem;
  font-weight: 500;
  color: var(--agenda-text-light);
  line-height: 1.35;
  width: 100%;
  /* Même principe que le lieu : hauteur de 2 lignes toujours réservée. */
  min-height: calc(1.17rem * 1.35 * 2);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.agenda-root .agenda-highlight-card__venue { margin: 0 !important; }
.agenda-root .agenda-highlight-card__city { margin: 0 0 15px !important; }
.agenda-highlight-card__date {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.agenda-highlight-card__date-top,
.agenda-highlight-card__date-year {
  display: block;
  font-size: 1.38rem;
  font-weight: 600;
  color: var(--agenda-text);
  line-height: 1.3;
}
.agenda-highlight-card__time {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 1.22rem;
  font-weight: 700;
  color: var(--agenda-primary);
  background: var(--agenda-primary-soft);
  padding: 6px 18px;
  border-radius: 999px;
  line-height: 1.4;
}
.agenda-root .agenda-highlight-card__date { margin: 0 !important; }
.agenda-root .agenda-highlight-card__date:not(:has(+ .agenda-highlight-card__time)) { margin: 0 0 24px !important; }
.agenda-root .agenda-highlight-card__time { margin: 4px 0 24px !important; }
.agenda-highlight-card__btn {
  margin-top: 4px;
  display: inline-block;
  background: var(--agenda-primary);
  font-weight: 700;
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .02em;
  padding: 8px 18px;
  border-radius: 6px;
}
.agenda-root .agenda-highlight-card__btn,
.agenda-root .agenda-highlight-card__btn:hover,
.agenda-root .agenda-highlight-card__btn:visited { color: #fff !important; }
.agenda-highlight-card__btn:hover { background: var(--agenda-primary-dark); }

@container (max-width: 500px) {
  /* Piège trouvé : la grille (ligne juste au-dessus, hors de ce bloc mobile)
     impose une largeur MINIMALE de 360px par carte (`minmax(360px, 1fr)`),
     ce qui forçait la carte à dépasser la largeur réelle de l'écran sur
     téléphone (donc tout paraissait énorme/à moitié coupé), quelle que soit
     la taille de l'image à l'intérieur. */
  /* Sur mobile, 2 cartes cote à cote (sur le modèle demandé par Sylvain,
     capture d'écran à l'appui) plutôt qu'une seule pleine largeur — tout le
     contenu (image, titre, lieu, ville, date, bouton) est redimensionné en
     conséquence pour tenir dans une colonne deux fois plus étroite. */
  .agenda-highlights { grid-template-columns: repeat(2, 1fr); gap: 18px 12px; }
  .agenda-highlight-card { padding: 10px 8px 14px; }
  .agenda-highlight-card__row { flex-direction: column; align-items: center; gap: 8px; }
  .agenda-highlight-card__image { width: 100%; max-width: none; margin: 0; }
  .agenda-highlight-card__title {
    font-size: .82rem;
    min-height: calc(.82rem * 1.25 * 2);
  }
  .agenda-root .agenda-highlight-card__title { margin: 8px 0 3px !important; }
  .agenda-highlight-card__title2 {
    font-size: .66rem;
    min-height: calc(.66rem * 1.3);
  }
  .agenda-root .agenda-highlight-card__title2 { margin: 0 0 6px !important; }
  .agenda-highlight-card__venue {
    font-size: .72rem;
    min-height: calc(.72rem * 1.35 * 2);
  }
  .agenda-highlight-card__city {
    font-size: .66rem;
    min-height: calc(.66rem * 1.35 * 2);
  }
  .agenda-root .agenda-highlight-card__city { margin: 0 0 8px !important; }
  .agenda-highlight-card__date-top,
  .agenda-highlight-card__date-year { font-size: .78rem; }
  .agenda-root .agenda-highlight-card__date:not(:has(+ .agenda-highlight-card__time)) { margin: 0 0 10px !important; }
  .agenda-highlight-card__time { font-size: .66rem; padding: 3px 9px; gap: 3px; }
  .agenda-root .agenda-highlight-card__time { margin: 3px 0 10px !important; }
  .agenda-highlight-card__btn { font-size: .58rem; padding: 5px 10px; }
}

/* ---------------------------------------------------------------------------
   AGENDA COMPLET — liste groupée par mois
--------------------------------------------------------------------------- */
.agenda-full { max-width: 980px; margin: 0 auto; }

.agenda-toolbar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 22px;
  padding-bottom: 14px;
  border-bottom: 2px solid var(--agenda-border);
}
.agenda-toolbar__nav { display: flex; gap: 8px; }
.agenda-toolbar__btn {
  border: 1px solid var(--agenda-border);
  background: var(--agenda-bg);
  padding: 6px 14px;
  border-radius: 999px;
  font-size: .82rem;
  font-weight: 600;
  color: var(--agenda-primary);
  cursor: pointer;
}
.agenda-toolbar__btn:hover { background: var(--agenda-primary-soft); }

.agenda-month-group { margin-bottom: 48px; }
.agenda-month-title {
  font-family: var(--agenda-font-heading);
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--agenda-text);
  text-transform: capitalize;
  border-bottom: 1px solid var(--agenda-border);
}
.agenda-root .agenda-month-title { padding-bottom: 8px !important; margin-bottom: 14px !important; }

.agenda-pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 24px;
  padding-top: 18px;
  border-top: 1px solid var(--agenda-border);
}
.agenda-pager__btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: none;
  background: none;
  padding: 6px 2px;
  font-family: var(--agenda-font-heading);
  font-size: .95rem;
  font-weight: 600;
  color: var(--agenda-primary);
  cursor: pointer;
}
.agenda-pager__btn:hover { text-decoration: underline; }
.agenda-pager__btn--prev { justify-self: start; }
.agenda-pager__btn--next { justify-self: end; margin-left: auto; }
.agenda-pager__arrow { font-size: 1.1rem; line-height: 1; }

.agenda-row {
  position: relative;
  display: grid;
  grid-template-columns: 64px 1fr auto;
  align-items: center;
  gap: 16px;
  padding: 12px 6px;
  border-bottom: 1px solid var(--agenda-border);
  transition: background .2s ease;
}
.agenda-row:hover { background: var(--agenda-primary-soft); }
.agenda-row__badge {
  width: 56px; height: 56px;
  border-radius: 8px;
  background: var(--agenda-primary);
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.agenda-row__badge-weekday { font-size: .62rem; text-transform: uppercase; opacity: .85; }
.agenda-row__badge-day { font-family: var(--agenda-font-heading); font-size: 1.3rem; font-weight: 700; font-variant-numeric: lining-nums; }
.agenda-row__badge-month { font-size: .6rem; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; opacity: .85; margin-top: 2px; }
.agenda-row__main { min-width: 0; }
.agenda-row__date {
  display: block;
  font-size: .78rem;
  color: var(--agenda-text);
  font-weight: 600;
  /* pas de text-transform:capitalize ici : la majuscule du mois est déjà
     posée côté JS, pour ne pas capitaliser aussi le "au" d'une plage de dates */
}
.agenda-row__title {
  font-family: var(--agenda-font-heading);
  font-weight: 700;
  font-size: 1.2rem;
  color: var(--agenda-primary);
}
.agenda-root .agenda-row__title { margin: 2px 0 4px !important; }
.agenda-root .agenda-row__title:has(+ .agenda-row__title2) { margin-bottom: 1px !important; }
.agenda-row__title2 {
  font-family: var(--agenda-font-body);
  font-size: .78rem;
  font-weight: 600;
  color: var(--agenda-primary);
}
.agenda-root .agenda-row__title2 { margin: 0 0 4px !important; }
.agenda-row__meta { font-size: .82rem; color: var(--agenda-text-light); }
.agenda-row__venue { font-weight: 700; color: var(--agenda-text); }
.agenda-row__summary {
  font-size: .82rem;
  color: var(--agenda-text-light);
  line-height: 1.4;
  /* texte affiché en entier, sans troncature ni points de suspension */
}
.agenda-root .agenda-row__summary { margin: 4px 0 0 !important; }
.agenda-row__tag {
  font-size: .78rem;
  font-style: italic;
  color: var(--agenda-text-light);
}
.agenda-root .agenda-row__tag { margin: 4px 0 0 !important; }
.agenda-row__thumb {
  width: 184px; height: 132px;
  border-radius: 6px;
  overflow: hidden;
  background: var(--agenda-bg-alt);
  display: none;
  /* alignée sur le titre du spectacle plutôt que centrée sur toute la ligne
     (qui inclut la petite ligne de date au-dessus du titre) */
  align-self: start;
  margin-top: 30px;
}
.agenda-row__thumb img { width: 100%; height: 100%; object-fit: cover; }
@container (min-width: 640px) { .agenda-row__thumb { display: block; } }

.agenda-row__link { position: absolute; inset: 0; }

@container (max-width: 480px) {
  .agenda-row { grid-template-columns: 48px 1fr; }
  .agenda-row__badge { width: 44px; height: 44px; }
  .agenda-row__badge-day { font-size: 1.05rem; }
}

/* ---------------------------------------------------------------------------
   PROCHAINES DATES (widget pour une fiche spectacle)
--------------------------------------------------------------------------- */
.agenda-show-dates { max-width: 760px; }
.agenda-show-dates .agenda-row__badge { background: var(--agenda-primary); }

/* ---------------------------------------------------------------------------
   HEADER fiche spectacle (haut de page détail)
--------------------------------------------------------------------------- */
.agenda-show-header {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 24px;
  align-items: center;
  margin: 0 auto 28px;
  /* même largeur que le texte détaillé en dessous (.agenda-show-header__description)
     et que le bloc du bas (.agenda-show-footer), et centré (margin auto)
     plutôt que collé à gauche, pour que les 3 blocs forment une seule
     colonne centrée dans la page au lieu d'être collés à gauche dans le
     conteneur (qui peut être plus large qu'eux). */
  max-width: 760px;
}
.agenda-show-header__image {
  border-radius: var(--agenda-radius);
  overflow: hidden;
  box-shadow: var(--agenda-shadow);
}
.agenda-show-header__image img { width: 100%; height: 100%; object-fit: cover; }
.agenda-show-header__meta { display: flex; flex-direction: column; gap: 8px; }
.agenda-show-header__date {
  font-family: var(--agenda-font-heading);
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--agenda-primary);
  /* pas de text-transform:capitalize ici, même raison que .agenda-row__date */
}
.agenda-show-header__date--soon { color: var(--agenda-text-light); font-style: italic; font-weight: 600; }
.agenda-show-header__time { font-size: .95rem; color: var(--agenda-text-light); }
.agenda-show-header__badge {
  align-self: flex-start;
  margin-top: 6px;
  padding: 5px 12px;
  border: 1px solid var(--agenda-primary);
  border-radius: 999px;
  font-size: .74rem;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--agenda-primary);
}
@container (max-width: 640px) {
  .agenda-show-header { grid-template-columns: 1fr; text-align: center; }
  .agenda-show-header__badge { align-self: center; }
}

/* -- texte détaillé (champ "description" d'agenda-data.js) -- */
.agenda-show-header__description {
  max-width: 760px;
  margin: 0 auto 28px;
  font-size: .95rem;
  line-height: 1.7;
  color: var(--agenda-text);
}
.agenda-root .agenda-show-header__description p { margin: 0 0 14px !important; }
.agenda-root .agenda-show-header__description p:last-child { margin-bottom: 0 !important; }

/* ---------------------------------------------------------------------------
   FOOTER fiche spectacle (résumé + carte, bas de page détail)
--------------------------------------------------------------------------- */
.agenda-show-footer {
  max-width: 760px;
  margin: 32px auto;
  border: 1px solid var(--agenda-border);
  border-radius: var(--agenda-radius);
  overflow: hidden;
  box-shadow: var(--agenda-shadow);
  background: var(--agenda-bg);
}
.agenda-show-footer__cal {
  padding: 14px 20px;
  border-bottom: 1px solid var(--agenda-border);
  position: relative;
}
.agenda-show-footer__cal-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--agenda-primary);
  color: var(--agenda-primary);
  background: none;
  padding: 8px 16px;
  border-radius: 6px;
  font-size: .85rem;
  font-weight: 600;
  cursor: pointer;
}
.agenda-show-footer__cal-btn:hover { background: var(--agenda-primary-soft); }
.agenda-show-footer__cal-menu {
  position: absolute;
  top: 100%; left: 20px;
  margin-top: 4px;
  background: #fff;
  border: 1px solid var(--agenda-border);
  border-radius: 6px;
  box-shadow: var(--agenda-shadow-hover);
  z-index: 5;
  min-width: 200px;
}
.agenda-show-footer__cal-menu a {
  display: block;
  padding: 10px 14px;
  font-size: .84rem;
}
.agenda-show-footer__cal-menu a:hover { background: var(--agenda-bg-alt); }

.agenda-show-footer__details {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  padding: 20px;
}
.agenda-show-footer__block h4 {
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--agenda-primary);
}
.agenda-root .agenda-show-footer__block h4 { margin: 0 0 8px !important; }
.agenda-show-footer__block p { font-size: .88rem; line-height: 1.45; }
.agenda-root .agenda-show-footer__block p { margin: 0 0 4px !important; }
.agenda-show-footer__map-link {
  display: inline-block;
  margin-top: 6px;
  font-size: .8rem;
  font-weight: 600;
  color: var(--agenda-primary);
  text-decoration: underline;
}
.agenda-show-footer__map {
  border-top: 1px solid var(--agenda-border);
}
.agenda-show-footer__map iframe {
  width: 100%;
  height: 220px;
  border: 0;
  display: block;
}
@container (max-width: 560px) {
  .agenda-show-footer__details { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------------------
   Loader discret pendant l'init JS
--------------------------------------------------------------------------- */
.agenda-loading {
  padding: 30px;
  text-align: center;
  color: var(--agenda-text-light);
  font-size: .85rem;
}

/* ---------------------------------------------------------------------------
   PAGE HISTORIQUE — spectacles déjà joués (snippet-07)
--------------------------------------------------------------------------- */
/* Bloc dédié à cette page uniquement (grâce à [data-agenda-view="history"]) :
   un peu plus large que les 1100px des 6 autres vues, pour laisser respirer
   la bande de vignettes du haut (~4-5 vignettes visibles à taille fixe).
   Sélecteur à spécificité supérieure à ".agenda-root.agenda-root" (ligne ~46)
   pour le remplacer proprement sur cette page-là seulement. Ceci n'a d'effet
   que si la colonne de contenu de ta page WordPress est elle-même assez
   large : si elle est plus étroite, pense à passer le bloc HTML personnalisé
   en alignement "pleine largeur" dans l'éditeur Gutenberg (icône
   d'alignement dans la barre d'outils du bloc), sans quoi cette valeur reste
   sans effet visible (comme pour le 1100px de base). */
.agenda-root.agenda-root[data-agenda-view="history"] {
  max-width: 1300px !important;
}
.agenda-history {
  display: flex;
  flex-direction: column;
  gap: 44px;
}
/* Bande 1 (vignettes) : pleine largeur de la page. */
.agenda-history__top {
  container-type: inline-size;
}
/* Bande 2 (photos) : même largeur que la bande 1 (bord droit aligné avec
   la flèche droite du haut). */
.agenda-history__bottom {
  container-type: inline-size;
  width: 100%;
}

/* Carrousel générique (vignettes en haut, photos en bas) */
.agenda-carousel { position: relative; }
.agenda-carousel__viewport {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  /* Marge horizontale généreuse pour laisser la place aux flèches (plus
     grosses désormais) sans qu'elles ne recouvrent la 1ère/dernière image. */
  padding: 4px 60px;
}
.agenda-carousel__viewport::-webkit-scrollbar { display: none; }
/* Cliquer-glisser à la souris (en plus des flèches) : voir initCarousels()
   dans agenda.js pour la logique de glisser. */
.agenda-carousel__viewport { cursor: grab; }
.agenda-carousel__viewport--dragging { cursor: grabbing; user-select: none; }
.agenda-carousel__item {
  flex: 0 0 calc((100% - 32px) / 3);
  scroll-snap-align: start;
}
@container (max-width: 620px) {
  .agenda-carousel__item { flex-basis: calc((100% - 16px) / 2); }
}
@container (max-width: 380px) {
  .agenda-carousel__item { flex-basis: 85%; }
}
.agenda-carousel__btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--agenda-bg);
  border: 1px solid var(--agenda-border);
  box-shadow: var(--agenda-shadow);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  line-height: 1;
  color: var(--agenda-primary);
  cursor: pointer;
  z-index: 2;
  padding: 0;
}
/* Insérées à l'intérieur des bandes (pas à cheval sur le bord) pour bien
   rester visibles/cliquables même sur une bande pleine largeur. */
.agenda-carousel__btn--prev { left: 4px; }
.agenda-carousel__btn--next { right: 4px; }
.agenda-carousel__btn:hover { background: var(--agenda-primary-soft); }

/* Variante "flèches à l'extérieur du cadre" (bande du haut) : les flèches
   ne recouvrent plus du tout les vignettes, elles prennent leur propre
   place de part et d'autre du carrousel plutôt que d'être superposées. */
.agenda-carousel--outside {
  display: flex;
  align-items: center;
  gap: 14px;
}
.agenda-carousel--outside .agenda-carousel__viewport {
  flex: 1 1 auto;
  min-width: 0; /* indispensable pour qu'un enfant flex avec overflow ne déborde pas */
  padding: 4px 2px;
}
.agenda-carousel--outside .agenda-carousel__btn {
  position: static;
  transform: none;
  flex: 0 0 auto;
}

/* Bande du haut : vignettes cliquables, pleine largeur, sans titre */
.agenda-history__tile {
  display: block;
  /* Largeur fixe (dimensions actuelles inchangées) : la bande s'élargit,
     ça ajoute simplement plus de vignettes visibles côte à côte plutôt que
     d'agrandir chaque vignette. */
  flex: 0 0 210px;
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
  font-family: inherit;
}
.agenda-history__tile-image {
  display: block;
  aspect-ratio: 250 / 300;
  border-radius: 9px;
  overflow: hidden;
  background: var(--agenda-bg-alt);
  box-shadow: var(--agenda-shadow);
  transition: box-shadow .15s ease, transform .15s ease;
}
.agenda-history__tile-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.agenda-history__tile:hover .agenda-history__tile-image,
.agenda-history__tile:focus-visible .agenda-history__tile-image {
  box-shadow: var(--agenda-shadow-hover);
  transform: translateY(-2px);
}

/* Bande du bas : nom du spectacle sélectionné + carrousel de photos */
.agenda-history__placeholder { text-align: center; padding: 26px 0; }
.agenda-history__banner {
  background: var(--agenda-primary);
  color: #fff;
  border-radius: var(--agenda-radius);
  padding: 16px 28px;
  margin: 0 0 20px;
  text-align: center;
}
.agenda-history__banner h3 {
  margin: 0;
  font-family: var(--agenda-font-heading);
  font-weight: 700;
  font-size: 1.6rem;
  color: #fff;
}
.agenda-history__photo {
  display: block;
  margin: 0;
}
.agenda-history__photo-image {
  display: block;
  aspect-ratio: 4 / 3;
  border-radius: 9px;
  overflow: hidden;
  background: var(--agenda-bg-alt);
}
.agenda-history__photo-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.agenda-history__photo-caption {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 2px;
  padding: 8px 2px 0;
}
.agenda-history__photo-place {
  font-size: .82rem;
  font-weight: 700;
  color: var(--agenda-text);
  line-height: 1.3;
}
.agenda-history__photo-date {
  font-size: .76rem;
  color: var(--agenda-text-light);
  line-height: 1.3;
}

/* Bande du bas, spectacle SANS photo : liste (date, ville, lieu) de toutes
   ses représentations passées, au-dessus du message "Aucune photo...". */
.agenda-history__events-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0 0 6px;
}
.agenda-history__events-item {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  text-align: center;
  gap: 4px 12px;
  padding: 12px 18px;
  background: var(--agenda-bg-alt);
  border-radius: var(--agenda-radius);
  font-size: .88rem;
}
.agenda-history__events-date {
  font-weight: 700;
  color: var(--agenda-primary);
}
.agenda-history__events-place {
  color: var(--agenda-text-light);
}

/* Mobile UNIQUEMENT (ne touche pas à la version bureau) : sur un écran
   étroit, tout rétrécit — vignettes de la bande du haut (~2,5 visibles
   côte à côte au lieu de 210px fixe) et bande du bas (titre, photos,
   textes) dans son ensemble. */
@container (max-width: 620px) {
  .agenda-history__tile { flex: 0 0 95px; }
  .agenda-history__banner { padding: 10px 16px; margin: 0 0 14px; }
  .agenda-history__banner h3 { font-size: .95rem; }
  /* Le mot "Spectacle" n'est pas affiché sur mobile, seul le titre reste. */
  .agenda-history__banner-prefix { display: none; }
  .agenda-history__photo-caption { padding: 6px 2px 0; gap: 1px; }
  .agenda-history__photo-place { font-size: .72rem; }
  .agenda-history__photo-date { font-size: .66rem; }
  .agenda-history__events-item { padding: 8px 12px; font-size: .78rem; gap: 2px 8px; }
  /* Messages "Clique sur un spectacle..." et "Aucune photo..." : texte
     réduit pour tenir sur 2 lignes sur un écran de téléphone. */
  .agenda-history__bottom .agenda-empty { font-size: .78rem; }
  .agenda-root .agenda-history__bottom .agenda-empty { padding: 16px !important; }
  .agenda-history__placeholder { padding: 18px 0; }
}