/* =========================================================
   EVENTS PAGE — mobile first
   Breakpoints: 768 / 820 / 992 / 1200
========================================================= */

.page-events .eventsPage {
  padding: 28px 0 72px;
}

/* -------- Tabs (3 boutons) -------- */
.eventsPage__tabs {
  display: grid;
  gap: 12px;
  justify-content: center;
  margin: 14px 0 18px;
}

@media (min-width: 768px) {
  .eventsPage__tabs {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    margin: 18px 0 24px;
  }
}

.eventsTab {
  min-width: 220px;
}

@media (min-width: 820px) {
  .eventsTab {
    min-width: 240px;
  }
}

.eventsTab.is-active {
  border: 3px solid #0b0b0b;
  transform: translateY(1px);
}

/* -------- Header (Titre + dropdown) -------- */
/* .eventsPage__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin: 20px 0 40px;
} */

.eventsPage__title {
  margin: 0;
  line-height: 1.05;
  letter-spacing: .02em;
}

/* Dropdown wrapper */
.eventsPage__filter {
  position: relative;
  flex: 0 0 auto;
}

/* Bouton gold (si tu ajoutes btn-gold c’est ok aussi) */
.eventsPage__filterBtn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 10px;
  border: 0;
  cursor: pointer;

  /* look “gold” par défaut */
  background: linear-gradient(180deg, #f4d36a, #e4b536);
  color: #1a1a1a;
  font-weight: 600;

  box-shadow:
    0 10px 18px rgba(0, 0, 0, .14),
    inset 0 1px 0 rgba(255, 255, 255, .35);
}

.eventsPage__filterBtn::after {
  content: "▾";
  font-size: 12px;
  transform: translateY(-1px);
  opacity: .85;
}

.eventsPage__filterMenu {
  position: absolute;
  right: 0;
  top: calc(100% + 10px);
  min-width: 160px;
  z-index: 50;

  background: rgba(12, 12, 12, .92);
  color: #fff;
  border-radius: 14px;
  padding: 10px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, .35);

  backdrop-filter: blur(6px);
}

.eventsPage__filterMenu button {
  width: 100%;
  text-align: left;
  border: 0;
  background: transparent;
  color: inherit;
  padding: 10px 12px;
  border-radius: 10px;
  cursor: pointer;
  font-weight: 400;
  opacity: .9;
}

.eventsPage__filterMenu button:hover {
  background: rgba(255, 255, 255, .08);
  opacity: 1;
}

.eventsPage__filterMenu button.is-active {
  background: rgba(255, 255, 255, .12);
  opacity: 1;
}

/* -------- Grid container -------- */
.page-events [data-events-grid] {
  display: grid;
  gap: 18px;
}

/* états */
.eventsPage__grid.is-loading {
  opacity: .65;
  pointer-events: none;
}

.eventsPage__empty {
  text-align: center;
  padding: 26px 0;
}

/* =========================================================
   Cards — base (shadow/rounded)
========================================================= */

.event-card--stage,
.voyage-card,
.conf-card {
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 14px 30px rgba(0, 0, 0, .16);
}

/* =========================================================
   STAGES — Cards (1 col jusqu'à 1199px, 2 col seulement >=1200px)
   Objectif : cards + grosses, + gap, contenu respirant,
   meta sur 1 ligne (prix / date / lieu), titres centrés mobile/tablette
========================================================= */

/* ---------- Head (titre + filtre) ---------- */
.eventsPage__head {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  margin: 40px 0 40px;
  text-align: center;
}

/* ---------- Grid (base = 1 colonne) ---------- */
.page-events [data-events-grid] {
  display: grid;
  grid-template-columns: 1fr;
  gap: 44px;
  padding-inline: 14px;
  justify-items: center;
  margin-inline: auto;
}

/* Tablette 768+ : toujours 1 colonne, mais carte + large + un peu plus de respiration */
@media (min-width: 768px) {
  .page-events [data-events-grid] {
    gap: 52px;
    padding-inline: 18px;
  }
}

/* Tablette 820+ : idem, un poil plus large */
@media (min-width: 820px) {
  .page-events [data-events-grid] {
    gap: 56px;
    padding-inline: 20px;
  }
}

/* Large tablette 992+ : idem, on prépare le look desktop */
@media (min-width: 992px) {
  .page-events [data-events-grid] {
    gap: 60px;
    padding-inline: 24px;
  }
}

/* Desktop only (>=1200) : 2 colonnes */
@media (min-width: 1200px) {
  .page-events [data-events-grid] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 72px;
    /* + gros gap desktop */
    max-width: 1160px;
    /* évite l'étalement */
    padding-inline: 0;
    justify-items: stretch;
  }
}

/* ---------- Card base ---------- */
.event-card--stage {
  width: 100%;
  max-width: 520px;
  /* mobile */
  border-radius: 16px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 10px 26px rgba(0, 0, 0, .12);
}

/* Tablettes : la carte grandit mais reste en 1 colonne */
@media (min-width: 768px) {
  .event-card--stage {
    max-width: 640px;
  }
}

@media (min-width: 820px) {
  .event-card--stage {
    max-width: 680px;
  }
}

@media (min-width: 992px) {
  .event-card--stage {
    max-width: 720px;
  }
}

/* Desktop (2 colonnes) : cards un peu plus larges */
@media (min-width: 1200px) {
  .event-card--stage {
    max-width: none;
    /* la colonne gère */
  }
}

/* ---------- Media ---------- */
.event-card--stage .event-card__media {
  aspect-ratio: 4 / 3;
  overflow: hidden;
}

.event-card--stage .event-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ---------- Body spacing ---------- */
.event-card--stage .event-card__body {
  padding: 18px 18px 22px;
  display: grid;
  gap: 30px;
}

/* Titres + texte */
.event-card--stage .event-card__h4 {
  margin: 0;
  line-height: 1.25;
}

.event-card--stage .event-card__p {
  margin: 0;
  /* font-size: 16px; */
  line-height: 1.45;
  opacity: .85;
}

/* Centrage mobile + tablettes (puis desktop reprend normal si tu veux) */
@media (max-width: 1199px) {

  .event-card--stage .event-card__h4,
  .event-card--stage .event-card__p {
    text-align: center;
    max-width: 40ch;
    margin-inline: auto;
  }
}

@media (min-width: 768px) {
  .event-card--stage .event-card__body {
    gap: 40px;
  }
}

@media (min-width: 820px) {
  .event-card--stage .event-card__body {
    gap: 45px;
  }
}

@media (min-width: 992px) {
  .event-card--stage .event-card__body {
    gap: 50px;
  }
}

@media (min-width: 1200px) {
  .event-card--stage .event-card__body {
    gap: 30px;
  }
}

/* =========================================================
   STAGES — META (mobile special + >=768 sur 1 ligne)
   Objectifs :
   - Mobile : city gauche / date droite (même ligne)
            price en dessous à droite
   - >=768 : city gauche / date milieu / price droite (1 ligne)
========================================================= */

/* Base meta (mobile-first) */
/* =========================================================
   STAGES — META
   Mobile :
   - city gauche / date droite
   - price dessous gauche
   >=768 :
   - city gauche / date centre / price droite (1 ligne)
========================================================= */

/* Base mobile-first */
.event-card--stage .event-card__meta{
  display: grid;
  grid-template-columns: 1fr 1fr;
  row-gap: 8px;
  column-gap: 14px;
  align-items: center;

  font-size: 15px;
  opacity: .92;
}

.event-card--stage .event-meta{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

  .event-card--stage .event-meta--city{
    grid-column: 1;
    justify-self: start;
  }

  .event-card--stage .event-meta--date{
    grid-column: 2;
    justify-self: end;
  }

  .event-card--stage .event-meta--price{
    grid-column: 1;
    justify-self: start;
    font-weight: 700;
  }

/* ===== >=768 : tout sur 1 ligne ===== */
@media (min-width: 768px){

  .event-card--stage .event-card__meta{
    grid-template-columns: 1fr 1fr 1fr;
    row-gap: 0;
    column-gap: 28px;
  }

  .event-card--stage .event-meta--city{  grid-column: 1; justify-self: start; }
  .event-card--stage .event-meta--date{  grid-column: 2; justify-self: center; }
  .event-card--stage .event-meta--price{ grid-column: 3; justify-self: end; font-weight: 700; }
}

/* >=768 : tout sur 1 ligne (city / date / price) */
@media (min-width: 768px){
  .event-card--stage .event-card__meta{
    grid-template-columns: 1fr 1fr 1fr;
    row-gap: 0;
    column-gap: 28px;
  }

  .event-card--stage .event-meta--city{  grid-column: 1; justify-self: start; }
  .event-card--stage .event-meta--date{  grid-column: 2; justify-self: center; }
  .event-card--stage .event-meta--price{ grid-column: 3; justify-self: end; font-weight: 700; }
}

/* Icônes */
.event-card--stage .event-icon{
  width: 18px;
  height: 18px;
  object-fit: contain;
  flex-shrink: 0;
}

/* Tes tailles meta/icon par breakpoints (inchangées, mais ciblées proprement) */
@media (min-width: 768px){
  .event-card--stage .event-card__meta{ font-size: 22px; }
  .event-card--stage .event-icon{ width: 22px; height: 22px; }
}
@media (min-width: 820px){
  .event-card--stage .event-card__meta{ font-size: 26px; }
  .event-card--stage .event-icon{ width: 28px; height: 28px; }
}
@media (min-width: 992px){
  .event-card--stage .event-card__meta{ font-size: 28px; }
  .event-card--stage .event-icon{ width: 30px; height: 30px; }
}
@media (min-width: 1200px){
  .event-card--stage .event-card__p{ font-size: 16px; }
  .event-card--stage .event-card__meta{ font-size: 16px; }
  .event-card--stage .event-icon{ width: 20px; height: 20px; }
}

/* ---------- CTA ---------- */
.event-card--stage .event-card__cta {
  justify-self: center;
  margin-top: 6px;
}


/* =========================================================
   VOYAGES — Grande carte + cartes secondaires
   ─ Grande carte : BLOCK (pas flex) → images + corps en flux
     normal, zéro risque de chevauchement desktop
   ─ Petites cartes : flex-col pour bouton aligné en bas
   ─ Mobile/tablette : même largeur que les petites,
     tout centré, respiration accrue
   ─ Desktop : pleine largeur, img gauche + stack droite,
     description|lieux 2 colonnes
   Mobile/tablette :
     - grande carte : même largeur que les petites
     - img principale pleine largeur, 2 petites dessous côte à côte
     - tout le texte centré
   Desktop (>=1200) :
     - grande carte pleine largeur (grid-column: 1/-1)
     - img gauche grande, stack 2 droite
     - description | lieux 2 colonnes
   Boutons toujours en bas (flex body + margin-top: auto)
========================================================= */

/* ---- img commune ---- */
.voyage-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Prix bleu + gras (toutes cartes voyage) */
.voyage-card__price {
  color: var(--btn-blue, #395679);
  font-weight: 700;
  white-space: nowrap;
}

/* Dates gras + gris — centré mobile, gauche desktop */
.voyage-card .voyage-card__dates {
  margin: 0;
  font-weight: 700;
  color: #8e8e8e;
  text-align: center;
}

@media (min-width: 1200px) {
  .voyage-card .voyage-card__dates {
    text-align: left;
  }
}

/* ═══════════════════════════════════════════
   GRANDE CARTE — voyage-card--featured
═══════════════════════════════════════════ */

/* BLOCK (pas flex) — images et corps s'empilent en flux normal,
   aucun risque de chevauchement desktop */
.voyage-card--featured {
  width: 100%;
  /* Mobile/tablette : même largeur que les petites cartes */
  max-width: 520px;
  margin: 0 auto;
}

@media (min-width: 768px) { .voyage-card--featured { max-width: 640px; } }
@media (min-width: 820px) { .voyage-card--featured { max-width: 680px; } }
@media (min-width: 992px) { .voyage-card--featured { max-width: 720px; } }

@media (min-width: 1200px) {
  .voyage-card--featured {
    grid-column: 1 / -1;
    max-width: none;
    margin: 0;
  }
}

/* ── Zone images ────────────────────────────────────
   Mobile : colonne — principale (16:9) + stack 2 (côte à côte)
   Desktop : grille 2 cols — principale gauche, stack droite
──────────────────────────────────────────────────── */
.voyage-card__images {
  padding: 10px 10px 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

@media (min-width: 768px) { .voyage-card__images { padding: 12px 12px 0; gap: 10px; } }
@media (min-width: 992px) { .voyage-card__images { padding: 14px 14px 0; } }

@media (min-width: 1200px) {
  .voyage-card__images {
    display: grid;
    grid-template-columns: 3fr 2fr;
    grid-template-rows: 1fr;
    gap: 10px;
    padding: 14px 14px 0;
    /* pas de height fixe → hauteur déterminée par l'aspect-ratio
       de l'image principale, corps TOUJOURS en dessous */
    align-items: stretch;
  }
}

/* Image principale */
.voyage-card__media--main {
  display: block;
  overflow: hidden;
  border-radius: 10px;
  flex-shrink: 0;
  aspect-ratio: 16 / 9;
}

@media (min-width: 1200px) {
  .voyage-card__media--main {
    aspect-ratio: 16 / 8;   /* ratio 2:1 → hauteur naturelle ~290px */
    flex-shrink: 0;
    width: 100%;
    height: auto;
    border-radius: 12px;
  }
}

/* Stack des 2 images */
.voyage-card__images-stack {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

@media (min-width: 768px) { .voyage-card__images-stack { gap: 10px; } }

@media (min-width: 1200px) {
  .voyage-card__images-stack {
    display: flex;
    flex-direction: column;
    gap: 10px;
    /* s'étire à la hauteur de l'image principale via align-items:stretch */
  }
}

/* Images 2 & 3 */
.voyage-card__media--secondary,
.voyage-card__media--tertiary {
  display: block;
  overflow: hidden;
  border-radius: 10px;
  aspect-ratio: 4 / 3;
}

@media (min-width: 1200px) {
  .voyage-card__media--secondary,
  .voyage-card__media--tertiary {
    aspect-ratio: auto;
    flex: 1;
    min-height: 0;
    border-radius: 12px;
  }
}

/* ── Corps de la grande carte ──────────────────────
   flex-column pour que le CTA soit toujours en bas
──────────────────────────────────────────────────── */
.voyage-card--featured .voyage-card__body {
  /* pas de flex:1 — la carte est block, le corps suit le flux */
  padding: 18px 18px 24px;
  display: flex;
  flex-direction: column;
  gap: 35px;   /* respiration mobile */
}

@media (min-width: 1200px) {
  .voyage-card--featured .voyage-card__body {
    padding: 20px 26px 26px;
    gap: 20px;
  }
}

/* Titre + prix */
.voyage-card--featured .voyage-card__top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
}

.voyage-card--featured .voyage-card__h3 { margin: 0; line-height: 1.15; }

/* Départ / Arrivée : gras + gris */
.voyage-card__travel {
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-align: center;
}

@media (min-width: 1200px) {
  .voyage-card__travel {
    flex-direction: row;
    justify-content: space-between;
    text-align: left;
  }
}

/* ── Méta : prix, dates, départ, arrivée ─────────────────────────
   Même logique que conf/stages :
   mobile=15px  768=22px  820=26px  992=28px  1200=16px
──────────────────────────────────────────────────────────────── */
.voyage-card--featured .voyage-card__price,
.voyage-card--featured .voyage-card__dates,
.voyage-card__depart,
.voyage-card__arrivee,
.voyage-card--secondary .voyage-card__price,
.voyage-card--secondary .voyage-card__dates {
  font-size: 15px;
}

.voyage-card__depart,
.voyage-card__arrivee {
  margin: 0;
  font-weight: 700;
  color: #8e8e8e;
}

@media (min-width: 768px) {
  .voyage-card--featured .voyage-card__price,
  .voyage-card--featured .voyage-card__dates,
  .voyage-card__depart,
  .voyage-card__arrivee,
  .voyage-card--secondary .voyage-card__price,
  .voyage-card--secondary .voyage-card__dates  { font-size: 22px; }
}

@media (min-width: 820px) {
  .voyage-card--featured .voyage-card__price,
  .voyage-card--featured .voyage-card__dates,
  .voyage-card__depart,
  .voyage-card__arrivee,
  .voyage-card--secondary .voyage-card__price,
  .voyage-card--secondary .voyage-card__dates  { font-size: 26px; }
}

@media (min-width: 992px) {
  .voyage-card--featured .voyage-card__price,
  .voyage-card--featured .voyage-card__dates,
  .voyage-card__depart,
  .voyage-card__arrivee,
  .voyage-card--secondary .voyage-card__price,
  .voyage-card--secondary .voyage-card__dates  { font-size: 28px; }
}

@media (min-width: 1200px) {
  .voyage-card--featured .voyage-card__price,
  .voyage-card--featured .voyage-card__dates,
  .voyage-card__depart,
  .voyage-card__arrivee,
  .voyage-card--secondary .voyage-card__price,
  .voyage-card--secondary .voyage-card__dates  { font-size: 16px; }
}

/* ── Description + Lieux : 1 col / 2 col desktop ── */
.voyage-card__content {
  display: grid;
  gap: 30px;
}

@media (min-width: 1200px) {
  .voyage-card__content {
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: start;
  }

  /* Description toujours col 1, lieux toujours col 2 */
  .voyage-card__description { grid-column: 1; }
  .voyage-card__lieux        { grid-column: 2; }
}

/* ── Body text : hérite 16px du body, pas d'override tablette ── */
.voyage-card__description {
  line-height: 1.65;
  opacity: .85;
  text-align: center;
}

.voyage-card__description p { margin: 0 0 6px; }
.voyage-card__description p:last-child { margin-bottom: 0; }

@media (min-width: 1200px) {
  .voyage-card__description { font-size: 16px; text-align: left; }
}

.voyage-card__lieux { text-align: center; }

.voyage-card__lieux-title {
  margin: 0 0 5px;
  font-weight: 600;
}

/* Bullets centrés mobile : list-style none + pseudo "• " */
.voyage-card__lieux-list {
  margin: 0;
  padding: 0;
  list-style: none;
  line-height: 1.9;
  opacity: .85;
}

.voyage-card__lieux-list li::before { content: "• "; }

@media (min-width: 1200px) {
  /* lieux à droite — puces inline à gauche du texte (pseudo-element) */
  .voyage-card__lieux { text-align: right; }
  .voyage-card__lieux-title { font-size: 16px; text-align: right; }

  .voyage-card__lieux-list {
    font-size: 16px;
    list-style: none;
    padding-left: 0;
    text-align: right;
  }

  .voyage-card__lieux-list li::before { content: "• "; }
}

/* CTA grande carte */
.voyage-card--featured .voyage-card__cta {
  align-self: center;
  margin-top: 6px;
}

/* ═══════════════════════════════════════════
   CARTES SECONDAIRES — voyage-card--secondary
═══════════════════════════════════════════ */

/* flex-column pour que les boutons s'alignent entre cartes */
.voyage-card--secondary {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 520px;
  margin: 0 auto;
}

@media (min-width: 768px)  { .voyage-card--secondary { max-width: 640px; } }
@media (min-width: 820px)  { .voyage-card--secondary { max-width: 680px; } }
@media (min-width: 992px)  { .voyage-card--secondary { max-width: 720px; } }
@media (min-width: 1200px) { .voyage-card--secondary { max-width: none; margin: 0; } }

/* ── Galerie avec prev/next ── */
.voyage-card--secondary .voyage-card__gallery {
  flex-shrink: 0;
  padding: 10px 10px 0;
}

@media (min-width: 768px) {
  .voyage-card--secondary .voyage-card__gallery { padding: 12px 12px 0; }
}

.voyage-card--secondary .voyage-card__slides {
  position: relative;
  overflow: hidden;
  border-radius: 10px;
  aspect-ratio: 4 / 3;
}

/* Chaque slide positionnée absolument, fade sur is-active */
.voyage-card__slide {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
}

.voyage-card__slide.is-active {
  opacity: 1;
  pointer-events: auto;
}

/* Boutons prev / next */
.voyage-card__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 30px;
  height: 30px;
  padding: 0 0 2px;      /* centrage visuel de la flèche */
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  font-size: 22px;
  line-height: 1;
  background: rgba(255, 255, 255, .88);
  color: #222;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .2);
  backdrop-filter: blur(3px);
  transition: background .18s;
  user-select: none;
}

.voyage-card__nav:hover { background: #fff; }
.voyage-card__nav--prev { left: 8px; }
.voyage-card__nav--next { right: 8px; }

/* Corps carte secondaire */
.voyage-card--secondary .voyage-card__body {
  flex: 1;
  padding: 16px 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 30px;   /* respiration entre les éléments */
}

.voyage-card--secondary .voyage-card__top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
}

.voyage-card--secondary .voyage-card__h3 {
  margin: 0;
  line-height: 1.2;
}

/* price + dates : gérés dans le bloc méta ci-dessus */

.voyage-card--secondary .voyage-card__p {
  margin: 0;
  line-height: 1.5;
  opacity: .9;
  text-align: center;
}

@media (min-width: 1200px) {
  .voyage-card--secondary .voyage-card__h3 { font-size: 22px; }
  .voyage-card--secondary .voyage-card__p  { font-size: 16px; }
}

/* CTA secondaire — toujours en bas */
.voyage-card--secondary .voyage-card__cta {
  align-self: center;
  margin-top: auto;
}

/* =========================================================
   CONFÉRENCES — CSS (mobile first) — MAQUETTE
   - h4 : on ne touche pas au font-size
   - p : on ne définit PAS de font-size sauf desktop = 16px
   - meta font-size : 15 (mobile), 22 (768), 26 (820), 28 (992)
   - mobile : ville gauche + date droite ; prix dessous gauche
   - >=768 : ville gauche / date centre / prix droite (1 ligne)
   - desktop >=1200 : carte horizontale (1 colonne), bouton DANS le body, en bas à droite
   - cartes même hauteur en desktop (hauteur + clamp)
========================================================= */

/* Card */
.conf-card{
  width: 100%;
  max-width: 520px;
  margin-inline: auto;

  border-radius: 16px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 10px 26px rgba(0,0,0,.12);

  display: grid;
  grid-template-columns: 1fr;
}

/* Assure 1 conf = 1 ligne dans la grille (desktop) */
@media (min-width: 1200px){
  .page-events [data-events-grid] .conf-card{ grid-column: 1 / -1; }
}

/* Media */
.conf-card__media{
  display: block;
  aspect-ratio: 16 / 10;
  overflow: hidden;
}
.conf-card__img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Body : on passe en flex pour pouvoir "pousser" le bouton en bas */
.conf-card__body{
  padding: 18px 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 30px; /* mobile */
}

/* ============ META ============ */
.conf-card__meta{
  --meta-size: 15px;
  --icon-size: 18px;

  display: grid;
  grid-template-columns: 1fr auto;
  row-gap: 10px;
  column-gap: 14px;
  align-items: center;

  font-size: var(--meta-size);
  color: #1B1B1B;
  opacity: .92;
}

.conf-meta{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.conf-icon{
  width: var(--icon-size);
  height: var(--icon-size);
  object-fit: contain;
  flex-shrink: 0;
}

/* Mobile : ville gauche / date droite / prix dessous gauche */
.conf-meta--city{  grid-column: 1; justify-self: start; }
.conf-meta--date{  grid-column: 2; justify-self: end; }
.conf-meta--price{ grid-column: 1; justify-self: start; font-weight: 600; }

/* Titres + texte centrés hors desktop */
.conf-card__h4,
.conf-card__p{
  text-align: center;
  margin: 0;
}

/* Bouton (dans body) : centré mobile/tablette */
.conf-card__btn{
  margin-top: auto;          /* pousse vers le bas du body */
  align-self: center;        /* centré */
}

/* ============ BREAKPOINTS ============ */
@media (min-width: 768px){
  .conf-card{ max-width: 640px; }
  .conf-card__body{ gap: 35px; }

  .conf-card__meta{
    --meta-size: 22px;
    --icon-size: 22px;

    /* >=768 : 1 ligne : ville / date / prix */
    grid-template-columns: 1fr 1fr 1fr;
    row-gap: 0;
    column-gap: 28px;
  }

  .conf-meta--city{  grid-column: 1; justify-self: start; }
  .conf-meta--date{  grid-column: 2; justify-self: center; }
  .conf-meta--price{ grid-column: 3; justify-self: end; }
}

@media (min-width: 820px){
  .conf-card{ max-width: 680px; }
  .conf-card__body{ gap: 40px; }

  .conf-card__meta{
    --meta-size: 26px;
    --icon-size: 24px;
    column-gap: 32px;
  }
}

@media (min-width: 992px){
  .conf-card{ max-width: 720px; }
  .conf-card__body{ gap: 45px; }

  .conf-card__meta{
    --meta-size: 28px;
    --icon-size: 24px;
    column-gap: 36px;
  }
}

/* ============ DESKTOP (>=1200) ============ */
@media (min-width: 1200px){

  .conf-card{
    max-width: 1160px;
    border-radius: 18px;

    /* carte horizontale (2 colonnes : image / body) */
    grid-template-columns: 480px 1fr;
    align-items: stretch;

    /* toutes même hauteur */
    height: 360px;
  }

  .conf-card__media{
    aspect-ratio: auto;
    height: 100%;
  }

  .conf-card__body{
    padding: 22px;
    gap: 30px;
    height: 100%;
  }

  /* p desktop = 16px (seule définition) */
  .conf-card__p{ font-size: 16px; }

  /* Texte à gauche uniquement en desktop */
  .conf-card__h4,
  .conf-card__p{
    text-align: left;
    margin-inline: 0;
    max-width: 68ch;
  }

  /* Clamp pour égaliser la hauteur des cartes */
  .conf-card__p{
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    overflow: hidden;
  }

  /* Bouton en bas à droite (dans body) */
  .conf-card__btn{
    align-self: flex-end;
  }

  /* Icon size desktop (sans toucher au font-size meta de tes breakpoints) */
  .conf-card__meta{
    --meta-size: 16px;
    --icon-size: 20px;
  }
}

/* =========================================================
   Petites finitions (liens)
========================================================= */

.event-card__link,
.voyage-card__media,
.conf-card__media {
  text-decoration: none;
  color: inherit;
  display: block;
}

.event-card__link:focus-visible,
.voyage-card__media:focus-visible,
.conf-card__media:focus-visible {
  outline: 3px solid rgba(0, 0, 0, .75);
  outline-offset: 3px;
  border-radius: 16px;
}