/* ============================================================
   SINGLE EVENT
   ============================================================ */

/* ── Layout ───────────────────────────────────────────────── */

/* Mêmes largeurs et mêmes écarts que la fiche projet : les variables globales de style.css
   (--vignettes-col: 6.8%, --media-col: 48%) sont surchargées ICI, comme single-project.css le
   fait de son côté — cette feuille n'est chargée que sur la fiche event, rien d'autre ne bouge.

   --vign-w : largeur d'UNE vignette en unités absolues, pour pouvoir servir de HAUTEUR (un %
   de hauteur se calculerait sur la hauteur du parent, pas sa largeur).
   --col-5 : hauteur de 5 vignettes + leurs 4 gouttières. L'affiche étant carrée, lui donner
   cette LARGEUR lui donne exactement cette HAUTEUR — c'est ce qui aligne son bas sur le bas de
   la colonne de vignettes. Une seule formule pour les deux : elles ne peuvent plus diverger.
   La fiche event n'a que 3 vignettes au maximum, mais la colonne réserve quand même 5 places
   (min-height) : c'est ce vide qui permet à « plus d'évènements par… » de descendre en bas. */
.single-event .project-acf {
  --vignettes-col: 10.5%;
  --vign-w: calc((100vw - 2 * var(--site-margin)) * 0.105);
  --col-5: calc(5 * var(--vign-w) + 4 * var(--grid-gap));
  --media-col: var(--col-5);
  display: flex; align-items: flex-start; gap: var(--grid-gap); width: 100%;
}
/* flex et non grid : `margin-top: auto` sur un enfant n'a d'effet qu'en flex. */
.event-vignettes            { width: var(--vignettes-col); min-height: var(--col-5); display: flex; flex-direction: column; gap: var(--grid-gap); position: sticky; top: 116px; order: -1; flex-shrink: 0; overflow: visible; max-height: none; }
.event-left                 { width: var(--media-col); display: flex; flex-direction: column; position: sticky; top: 116px; flex-shrink: 0; }
.event-right                { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; padding-top: 0; }

/* ── Vignettes : même traitement que la fiche projet ───────────────────────────
   Chaque bloc « similaires » se lit comme UNE vignette carrée (le slider n'en montre qu'une
   à la fois), on l'habille donc exactement comme .project-vignette : image en noir et blanc,
   libellé centré en blanc sur la carte, aplat orange au survol.
   `grid-column` neutralisé : hérité de style.css pour la grille d'origine, inerte mais
   trompeur en flex. `margin-top` remis à 0, le gap de la colonne s'en charge. */
.event-vignettes .similar-projects { position: relative; width: 100%; margin-top: 0; grid-column: auto; }

/* « plus d'évènements par … » en BAS de colonne, alignée sur le bas de l'affiche : le vide se
   crée au-dessus d'elle et non entre les autres.
   order: 1 en plus de margin-top: auto — dans le DOM elle est 2e (avant « à proximité »), or
   `margin-top: auto` ne pousse en bas que le DERNIER élément de la colonne. */
.event-vignettes .similar-projects--org { margin-top: auto; order: 1; }

/* Libellé de section posé SUR la vignette, à la place du titre noir qui la surplombait.
   pointer-events: none : sinon il intercepterait le clic destiné au lien qu'il recouvre. */
.event-vignettes .similar-title {
  position: absolute; inset: 0; z-index: 3; pointer-events: none; margin: 0;
  display: flex; align-items: center; justify-content: center;
  padding: 6px; text-align: center; color: #fff;
  font-family: "Gambetta", sans-serif; letter-spacing: 0.03em; font-size: 16px; line-height: 1.15;
}
/* Le titre de l'évènement (posé par le helper sur chaque vignette) ferait doublon avec le
   libellé de section : la vignette annonce une SÉLECTION, pas un évènement précis — même
   parti pris que « Plus de projets en … » sur la fiche projet. */
.event-vignettes .similar-item .vignette-label { display: none; }
/* Voile plein et non dégradé du bas : le libellé est centré, c'est au milieu qu'il faut du
   contraste. */
.event-vignettes .similar-item .vignette-overlay { background: rgba(0, 0, 0, 0.45); }
.event-vignettes .similar-item img { filter: grayscale(1); }
/* Le zoom au survol a été abandonné sur la fiche projet au profit de l'aplat orange. */
.event-vignettes .similar-item:hover img { transform: none; }
/* z-index 1 : au-dessus de l'image, sous le libellé (z-index 3), qui reste blanc net. */
.event-vignettes .similar-item::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: var(--color-main); opacity: 0; transition: opacity 0.25s; pointer-events: none;
}
.event-vignettes .similar-item:hover::after { opacity: 0.55; }
/* Flèche du slider en blanc : elle se pose désormais sur une vignette assombrie. */
.event-vignettes .similar-next,
.event-vignettes .similar-next:hover { color: #fff; }
/* ── Bandeau de statut (reporté / annulé / prolongé) ──────── */
.event-status-banner { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.event-status-badge  { font-family: "Archivo", sans-serif; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: #fff; padding: 4px 10px; }
.event-status-banner--reported  .event-status-badge { background: var(--color-main); }
.event-status-banner--cancelled .event-status-badge { background: var(--color-danger); }
.event-status-banner--prolonged .event-status-badge { background: var(--color-prolonged); }
.event-status-link  { font-family: "Archivo", sans-serif; font-size: 12px; font-weight: 700; color: var(--color-main); text-decoration: none; }
.event-status-link:hover { text-decoration: underline; }
.event-status-note  { font-family: "Archivo", sans-serif; font-size: 12px; color: var(--color-muted); }

/* ── Affiche ──────────────────────────────────────────────── */

.event-affiche-wrap        { position: relative; }
.event-affiche             { width: 100%; aspect-ratio: 1/1; object-fit: contain; display: block; }
.event-affiche-placeholder { width: 100%; aspect-ratio: 2/3; background: var(--color-fill); }
/* Bouton « Enregistrer » toujours visible en haut à droite de l'affiche.
   Spécificité renforcée pour battre le `.fav-btn { opacity: 0 }` de base (visible seulement au survol
   sur l'agenda/atlas). Ici on le veut visible en permanence, enregistré comme non enregistré. */
.event-affiche-wrap .event-fav-btn { top: 12px; right: 12px; opacity: 1; pointer-events: auto; }

/* ── Titre ────────────────────────────────────────────────── */

.event-titre { font-family: "Gambetta", sans-serif; letter-spacing: 0.03em; font-size: 28px; color: var(--color-text); font-weight: bold; margin: 0 0 20px; }

/* ── Meta ─────────────────────────────────────────────────── */

.event-meta-top  { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 4px; }
.event-type      { font-family: "Archivo", sans-serif; font-size: 13px; font-weight: 700; text-transform: uppercase; color: var(--color-text); }
.event-par       { font-family: "Archivo", sans-serif; font-size: 13px; font-weight: 200; color: var(--color-text); }
.event-logo      { height: 48px; width: auto; object-fit: contain; }
.event-organizer { font-family: "Archivo", sans-serif; font-size: 13px; font-weight: 700; text-transform: uppercase; color: var(--color-text); }

/* ── Données ──────────────────────────────────────────────── */

.event-info { display: flex; flex-direction: column; gap: 8px; width: 100%; }

/* ── Description ──────────────────────────────────────────── */

.event-description { font-family: "Archivo", sans-serif; font-size: 13px; font-weight: 200; color: var(--color-text); line-height: 1.6; text-align: justify; width: 100%; }

/* ── CTA + Retour ─────────────────────────────────────────── */

/* Signature CTA commune dans style.css ; ici la grande variante (13px) et la mise en page. */
.event-cta        { display: inline-block; font-size: 13px; font-weight: 500; padding: 12px 24px; text-decoration: none; margin-bottom: 16px; }
/* Alignés à DROITE de la colonne de texte. align-self et non margin-left: auto : .event-right
   est un flex column avec align-items: flex-start, c'est donc l'alignement transversal qui
   gouverne la position horizontale de ses enfants. */
.event-cta, .event-back { align-self: flex-end; }
.event-back       { font-family: "Archivo", sans-serif; font-size: 13px; font-weight: 500; color: var(--color-text); text-decoration: none; transition: color 0.2s, font-weight 0.1s; }
.event-back:hover { color: var(--color-main); font-weight: 700; }

/* ── Responsive ───────────────────────────────────────────── */

@media (max-width: 900px) {
  /* Ordre voulu : titre · photo · infos · s'inscrire · retour · vignettes.
     Le titre, les infos, le CTA et le retour vivent tous DANS .event-right, la photo est une
     colonne à part (.event-left) — impossible d'intercaler la photo entre le titre et les
     infos en réordonnant les 3 colonnes. display:contents fait disparaître .event-right de la
     mise en page : ses enfants deviennent des enfants directs de .project-acf, où `order` peut
     alors les entrelacer avec la photo et les vignettes. */
  /* Toutes ces règles sont préfixées .single-event (spécificité 0,2,0) pour battre SANS AMBIGUÏTÉ
     les règles de base en .event-* (0,1,0) — notamment .event-vignettes { position: sticky;
     order: -1 }, qui sinon collerait la colonne des vignettes EN HAUT, au-dessus du titre. */
  .single-event .project-acf { flex-direction: column; align-items: stretch; gap: 16px; }
  .single-event .event-right { display: contents; }
  /* flex: initial annule le flex: 1 / flex-shrink: 0 du desktop. */

  .single-event .event-status-banner { order: 1; }
  .single-event .event-titre         { order: 2; font-size: 20px; line-height: 1; margin: 0; }
  .single-event .event-left          { order: 3; width: 100%; position: static; flex: initial; }
  .single-event .event-meta-top      { order: 4; }
  .single-event .event-info          { order: 5; }
  .single-event .event-description   { order: 6; }
  /* align-self: stretch annule le flex-end du desktop : en mobile « S'inscrire » reste un
     bouton pleine largeur. Seul « retour à l'agenda » passe à droite. */
  /* text-align: center — le bouton occupe toute la largeur (align-self: stretch), son libellé
     serait sinon collé à gauche contre le padding. */
  .single-event .event-cta           { order: 7; margin: 0; align-self: stretch; text-align: center; }
  .single-event .event-back          { order: 8; align-self: flex-end; }
  /* L'affiche occupe TOUTE la largeur disponible, quel que soit son format : aspect-ratio
     annulé (le carré du desktop laissait des bandes vides autour d'une affiche portrait, que
     `contain` réduisait pour la faire tenir dans le carré) et hauteur laissée libre, donc
     calculée sur le ratio natif de l'image. Les marges du site viennent de .site-content. */
  .single-event .event-affiche { aspect-ratio: auto; height: auto; object-fit: contain; }
  /* La colonne verticale du desktop devient une rangée. min-height annulé : hérité, il
     creuserait un vide de 5 vignettes de haut sous la rangée. */
  .single-event .event-vignettes {
    order: 9; width: 100%; position: static; flex: initial; top: auto; min-height: 0;
    flex-direction: row; align-items: flex-start;
    gap: var(--grid-gap); max-height: none; overflow: visible;
  }
  /* Largeur figée à 1/5 (et non flex: 1) : la fiche event n'a que 3 vignettes, si elles
     s'étiraient pour remplir la ligne il n'y aurait plus de place pour décaler « par … » à
     droite. Cinq emplacements comme sur la fiche projet : les deux pages gardent la même
     taille de vignette. */
  .event-vignettes .similar-projects { flex: 0 0 calc((100% - 4 * var(--grid-gap)) / 5); min-width: 0; }
  /* Poussée à DROITE (et non en bas comme sur desktop) : le vide se forme avant elle.
     order: 1 conservé du desktop — elle doit rester la dernière de la rangée. */
  .event-vignettes .similar-projects--org { margin-top: 0; margin-left: auto; }

  /* Titre abrégé (data-short) : à 1/5 de largeur la vignette fait ~60px, « plus d'évènements
     par Machin » y serait illisible. Le texte long est masqué (font-size: 0 sur le conteneur)
     et le court rendu par ::before, qui devient l'élément flex centré sur la carte. */
  .event-vignettes .similar-title { font-size: 0; padding: 3px; }
  .event-vignettes .similar-title::before {
    content: attr(data-short);
    font-family: "Gambetta", sans-serif; letter-spacing: 0.03em; font-size: 11px; line-height: 1.1;
  }

  /* Les séparateurs du desktop scinderaient l'ordre : le `gap` de la colonne les remplace.
     `order: 10` en plus du display:none — ceinture et bretelles : promus en éléments flex par
     le display:contents de .event-right, ils n'ont pas d'order propre, donc order 0, ce qui
     les place AVANT le titre (order 2). S'ils redevenaient visibles, ils créeraient à nouveau
     un bloc de vide en haut de la fiche. Avec order 10 ils partiraient en fin, pas en tête. */
  .single-event .pair-separator { display: none; order: 10; }

}

@media (max-width: 600px) {
  /* Les 3 vignettes restent sur UNE ligne (demande explicite), pas 2 comme avant. */
  .event-titre { font-size: 18px; }
}