/* APIA — Single Événement (/evenements/{slug}/) — S9.
   Dépendances : apia-enjeu.css (l-rail, c-enjeu-btn, c-arrow-list, c-renforcer).
   Tokens : var(--apia-bleu-nuit) #051d2e, var(--apia-bleu-marine) #001f5f,
            var(--apia-bleu) #0d58c9, var(--apia-bleu-ciel) #9ccdf8,
            var(--apia-bleu-clair) #ecf2fb, var(--apia-gris-bleu) #546d88, var(--apia-blanc) #fff.
   Rythme : gap racine 96 entre sections. Hero carte 1248. Rail contenu 1052. */

.apia-evenement { display: flex; flex-direction: column; gap: 96px; padding: 48px 16px 96px; }
.s-evt { margin: 0; }

/* ── 1. Fil d'ariane externe (nav au-dessus du hero) ───────────────────── */
.c-evt-crumb { margin: 0 0 -64px; }
.c-evt-crumb .l-rail { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; }
.c-evt-crumb a {
  display: inline-flex; align-items: center;
  font-weight: 500; font-size: 16px; line-height: 23px;
  color: var(--apia-gris-bleu); text-decoration: none;
}
.c-evt-crumb a:hover { color: var(--apia-bleu); }
.c-evt-crumb span[aria-current="page"] {
  font-weight: 500; font-size: 16px; line-height: 23px; color: #1c1c1c;
}
.c-evt-crumb__sep { display: inline-flex; align-items: center; color: var(--apia-gris-bleu); }
.c-evt-crumb__sep svg { width: 16px; height: 16px; display: block; }

/* ── 2. Hero — carte navy 1248 r28 ─────────────────────────────────────── */
.s-evt--hero { padding-inline: 0; }
.c-evt-hero {
  max-width: 1248px; margin-inline: auto;
  background: var(--apia-bleu-marine);
  border-radius: 28px; overflow: hidden;
  display: grid; grid-template-columns: 1fr 1fr;
  align-items: stretch; min-height: 440px;
}

/* Gauche */
.c-evt-hero__left {
  display: flex; flex-direction: column; gap: 20px; justify-content: center;
  padding: 56px 48px 56px 64px;
}

/* Fil d'ariane intégré dans la carte */
.c-evt-hero__crumb {
  display: flex; align-items: center; flex-wrap: wrap; gap: 4px; margin: 0 0 4px;
}
.c-evt-hero__crumb a {
  font-weight: 500; font-size: 16px; line-height: 23px;
  color: #9fb2c5; text-decoration: none;
}
.c-evt-hero__crumb a:hover { color: var(--apia-bleu-ciel); }
.c-evt-hero__crumb span[aria-current="page"] {
  font-weight: 500; font-size: 16px; line-height: 23px; color: #9fb2c5;
}
.c-evt-hero__crumb-sep { display: inline-flex; align-items: center; color: #9fb2c5; }
.c-evt-hero__crumb-sep svg { width: 16px; height: 16px; display: block; }

/* H1 */
.c-evt-hero__h1 {
  font-weight: 600; font-size: 48px; line-height: 52px;
  color: var(--apia-blanc); margin: 0;
}

/* Date */
.c-evt-hero__date {
  font-weight: 500; font-size: 16px; line-height: 23px;
  color: var(--apia-blanc); margin: 0;
}

/* Région */
.c-evt-hero__region {
  display: flex; align-items: center; gap: 6px; margin: 0;
  font-weight: 500; font-size: 16px; line-height: 24px;
  color: var(--apia-bleu-ciel);
}
.c-evt-hero__region svg { flex: 0 0 16px; width: 16px; height: 16px; }

/* Bouton Participer */
.c-evt-hero__btn { align-self: flex-start; }

/* C5 : etat « Evenement passe » en remplacement du CTA. Meme gabarit que le bouton du hero mais NON
   interactif. Bleu ciel sur le marine du hero = 9,2:1. */
.c-evt-past {
  align-self: flex-start; display: inline-flex; align-items: center; margin: 0;
  font-family: var(--apia-font); font-weight: 600; font-size: 16px; line-height: 23px;
  color: var(--apia-bleu-ciel); background: var(--apia-bleu-ciel-15);
  border: 1px solid var(--apia-bleu-ciel); border-radius: 999px; padding: 10px 20px;
}

/* Droite — panneau bleu uni ; porte l'image à la une (cover) si présente. Plus de pyramide CSS :
   le visuel (avec ou sans signature graphique) est porté directement par l'image à la une. */
.c-evt-hero__right {
  position: relative; background: var(--apia-bleu); overflow: hidden;
}
.c-evt-hero__img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: block; margin: 0;
}
.c-evt-hero__img.brxe-image { position: absolute !important; }

/* ── 3-4. Corps 2 colonnes (texte + side) ────────────────────────────────── */
.c-evt-body { display: grid; grid-template-columns: 1fr 340px; gap: 48px; align-items: start; }
.c-evt-body__main { display: flex; flex-direction: column; gap: 48px; }
.c-evt-body__side { display: flex; flex-direction: column; gap: 24px; }

/* À propos */
.c-evt-body__about { display: flex; flex-direction: column; gap: 24px; }
.c-evt-about__title {
  font-weight: 600; font-size: 28px; line-height: 32px;
  color: var(--apia-bleu-nuit); margin: 0;
}
.c-evt-about__text { font-weight: 500; font-size: 16px; line-height: 23px; color: var(--apia-gris-bleu); }
.c-evt-about__text p { margin: 0 0 16px; }
.c-evt-about__text p:last-child { margin-bottom: 0; }

/* Thumbnail (colonne droite, anti-vide : masqué si absent) */
.c-evt-thumb-wrap {
  border-radius: 28px; overflow: hidden;
  line-height: 0; /* supprime le gap sous l'img */
}
.c-evt-thumb {
  display: block; width: 100%; height: 167px;
  object-fit: cover; margin: 0;
}
figure.c-evt-thumb { margin: 0; }

/* ── 5. Informations pratiques ────────────────────────────────────────────── */
.c-evt-infos { display: flex; flex-direction: column; gap: 24px; }
.c-evt-infos__title {
  font-weight: 600; font-size: 28px; line-height: 32px;
  color: var(--apia-bleu-nuit); margin: 0;
}

/* ── 6. c-share ── deplace dans apia-social.css (composant partage) ── */

/* ── 7. CTA Membre (c-evt-mcta, rail 1052) ───────────────────────────────── */
.c-evt-mcta {
  background: var(--apia-bleu-nuit); border-radius: 28px; overflow: hidden;
  display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; min-height: 399px;
}
.c-evt-mcta__content {
  display: flex; flex-direction: column; gap: 24px; justify-content: center;
  padding: 48px 48px 48px 64px; align-items: flex-start;
}
.c-evt-mcta__title {
  font-weight: 600; font-size: 33px; line-height: 36px;
  color: var(--apia-blanc); margin: 0;
}
.c-evt-mcta__sub {
  font-weight: 500; font-size: 16px; line-height: 23px;
  color: var(--apia-bleu-ciel); margin: 0;
}
/* Puces arrow sur fond sombre */
.c-evt-mcta__content .c-arrow-list li { color: var(--apia-bleu-clair); }
.c-evt-mcta__content .c-arrow-list li svg { color: var(--apia-bleu-ciel); }

/* Colonne media : image + pyramide */
.c-evt-mcta__media {
  position: relative; overflow: hidden; background: var(--apia-bleu);
}
.c-evt-mcta__media::before {
  content: ""; position: absolute; inset: 0;
  background-image: var(--evt-pyr-url, none);
  background-repeat: no-repeat;
  background-position: bottom right;
  background-size: auto 75%;
  opacity: 0.5; z-index: 0;
}
.c-evt-mcta__img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: block; z-index: 1;
}
/* Surcharger position:static forcée par Bricks sur les images shortcode */
.c-evt-mcta__img.brxe-image { position: absolute !important; }

/* ── Responsive ≤991px ──────────────────────────────────────────────────── */
@media (max-width: 991px) {
  .apia-evenement { gap: 56px; padding: 32px 16px 56px; }
  .c-evt-crumb { margin-bottom: -40px; }
  .c-evt-hero { grid-template-columns: 1fr; min-height: 0; }
  .c-evt-hero__left { padding: 40px 24px; }
  .c-evt-hero__right { min-height: 200px; }
  .c-evt-hero__h1 { font-size: 33px; line-height: 38px; }
  .c-evt-body { grid-template-columns: 1fr; gap: 32px; }
  .c-evt-about__title, .c-evt-infos__title { font-size: 23px; line-height: 28px; }
  .c-evt-mcta { grid-template-columns: 1fr; min-height: 0; }
  .c-evt-mcta__content { padding: 40px 24px; order: 2; }
  .c-evt-mcta__media { min-height: 240px; order: 1; }
  .c-evt-mcta__img.brxe-image { position: absolute !important; }
}

/* ── Responsive ≤600px ──────────────────────────────────────────────────── */
@media (max-width: 600px) {
  .c-evt-hero__h1 { font-size: 28px; line-height: 33px; }
  .c-evt-mcta__title { font-size: 28px; line-height: 33px; }
}