/* ==========================================================================
   Les Savons de Jadis — front v2 — pages/evenements.css
   Liste des événements (bascule liste / grille, pagination) et détail d'un événement.
   La pagination (.pages), la visionneuse, les vignettes (.vignette-photo, .mosaique) et la carte d'état
   (.etat) viennent du socle (partie 17).
   Sommaire : 1. Bascule  2. Carte d'événement  3. Liste et grille  4. Détail  5. Lieu et carte
   ========================================================================== */

/* 1. BASCULE LISTE / GRILLE -------------------------------------------------- */
.bascule { display: inline-flex; padding: 3px; border: 1.5px solid var(--trait-champ); border-radius: var(--r-pilule); background: var(--blanc); }
.bascule__bouton { display: inline-flex; align-items: center; gap: var(--e-2); min-height: var(--cible); padding: 0 var(--e-4); border-radius: var(--r-pilule); font-size: var(--fs-sm); font-weight: 600; color: var(--texte-moyen); transition: background-color var(--d-2) ease, color var(--d-2) ease; }
.bascule__bouton:hover { color: var(--texte); }
.bascule__bouton[aria-pressed="true"] { background: var(--texte); color: var(--blanc); }
.bascule__bouton:focus-visible { border-radius: var(--r-pilule); }
@media (max-width: 599px) { .bascule { display: none; } }

/* 2. CARTE D'ÉVÉNEMENT ------------------------------------------------------- */
/* Toute la carte est cliquable par le lien du titre (pseudo-élément étendu) */
.evt { position: relative; display: grid; border: 1px solid var(--trait); border-radius: var(--r-md); background: var(--blanc); overflow: hidden; transition: border-color var(--d-2) ease; }
.evt:hover { border-color: var(--vert); }
.evt__visuel { display: grid; place-items: center; aspect-ratio: 3 / 2; background: var(--gris-plateau); color: var(--trait-champ); overflow: hidden; }
.evt__visuel img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform var(--d-3) var(--ease-sortie); }
.evt__visuel .ico { width: 44px; height: 44px; stroke-width: 1.25; }
@media (hover: hover) and (pointer: fine) { .evt:hover .evt__visuel img { transform: scale(1.03); } }
.evt__corps { display: flex; flex-direction: column; align-items: flex-start; gap: var(--e-2); padding: var(--e-4) var(--e-5) var(--e-5); min-width: 0; }
.evt__etat { background: var(--vert-rosee); }
.evt__etat--cours { background: var(--or-pale); color: var(--or-brun); }
.evt__etat--passe { background: var(--gris-plateau); color: var(--texte-moyen); }
.evt__titre { font-size: var(--fs-lg); line-height: 1.2; }
.evt__titre a { outline: none; }
.evt__titre a::after { content: ""; position: absolute; inset: 0; border-radius: var(--r-md); }
.evt__titre a:focus-visible::after { outline: 3px solid var(--focus); outline-offset: -3px; }
.evt:hover .evt__titre a { text-decoration: underline; text-decoration-color: var(--or); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.evt__info { display: flex; align-items: flex-start; gap: var(--e-2); font-size: .9375rem; color: var(--texte-moyen); }
.evt__info .ico { margin-top: 3px; color: var(--or-brun); }
.evt__extrait { font-size: .9375rem; line-height: 1.6; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; }
.evt__suite { display: inline-flex; align-items: center; gap: var(--e-1); margin-top: auto; padding-top: var(--e-2); font-size: var(--fs-sm); font-weight: 600; color: var(--vert-profond); }
.evt__suite .ico { transition: transform var(--d-2) var(--ease-sortie); }
@media (hover: hover) and (pointer: fine) { .evt:hover .evt__suite .ico { transform: translateX(3px); } }
.evt--passe .evt__visuel img { filter: grayscale(.55); opacity: .85; }

/* 3. LISTE ET GRILLE --------------------------------------------------------- */
.evts { display: grid; gap: var(--e-5); }
.evts--grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); }
.evts--grid .evt { grid-template-rows: auto 1fr; }
@media (min-width: 600px) {
  .evts--list { gap: var(--e-4); }
  .evts--list .evt { grid-template-columns: clamp(180px, 26%, 300px) minmax(0, 1fr); }
  .evts--list .evt__visuel { position: relative; aspect-ratio: auto; min-height: 190px; }
  .evts--list .evt__visuel img { position: absolute; inset: 0; }
  .evts--list .evt__corps { padding: var(--e-5); }
}

/* 4. DÉTAIL D'UN ÉVÉNEMENT --------------------------------------------------- */
.evt-detail.section { padding-top: var(--e-4); }
.evt-detail__retour .ico { transition: transform var(--d-2) var(--ease-sortie); }
@media (hover: hover) and (pointer: fine) { .evt-detail__retour:hover .ico { transform: translateX(-3px); } }
.evt-detail__tete { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-3) var(--e-5); margin: var(--e-3) 0 var(--e-5); padding-bottom: var(--e-5); border-bottom: 1px solid var(--trait); }
.evt-detail__date { display: inline-flex; align-items: center; gap: var(--e-3); font-family: var(--font-titre); font-weight: 700; font-size: var(--fs-xl); line-height: 1.2; }
.evt-detail__date .ico { color: var(--or-brun); }
.evt-detail__lieu { display: inline-flex; align-items: center; gap: var(--e-2); color: var(--texte-moyen); }
.evt-detail__lieu .ico { color: var(--or-brun); }
.evt-detail__corps { display: grid; gap: var(--e-6); align-items: start; }
/* Photos insérées dans le texte au back-office : à leur taille réelle, bornées, côte à côte quand elles se suivent */
.evt-prose { max-width: none; }
.evt-prose > :not(img) { max-width: 68ch; }
.evt-prose img { display: inline-block; vertical-align: top; width: auto !important; height: auto !important; max-width: min(100%, 340px); max-height: 340px; margin: var(--e-1) var(--e-2) var(--e-1) 0; border-radius: var(--r-sm); background: var(--gris-plateau); }
.evt-prose > img + img { margin-top: var(--e-1); }
.evt-detail__photos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-3); }
.evt-detail__photos .vignette-photo { aspect-ratio: 1; }
.evt-detail__photos--seule { grid-template-columns: minmax(0, 1fr); max-width: 420px; }
.evt-detail__photos--seule .vignette-photo { aspect-ratio: auto; }
/* Photo seule : affichée à sa taille réelle, sans jamais dépasser la colonne */
.evt-detail__photos--seule .vignette-photo { width: auto; max-width: 100%; }
.evt-detail__photos--seule .vignette-photo img { width: auto; height: auto; max-width: 100%; }
@media (min-width: 900px) {
  .evt-detail__corps--photos { grid-template-columns: minmax(0, 1fr) minmax(280px, 420px); gap: clamp(2rem, 5vw, 4.5rem); }
}

/* 5. LIEU ET CARTE ----------------------------------------------------------- */
.evt-lieu__grille { display: grid; gap: var(--e-5); align-items: start; }
@media (min-width: 900px) { .evt-lieu__grille { grid-template-columns: minmax(240px, 1fr) minmax(0, 2fr); gap: var(--e-6); } .evt-lieu__grille--sans-carte { grid-template-columns: minmax(0, 1fr); } }
.evt-lieu__adresse { display: grid; grid-template-columns: auto 1fr; gap: var(--e-3); }
.evt-lieu__adresse > .ico { width: 28px; height: 28px; margin-top: 2px; color: var(--vert-profond); }
.evt-lieu__nom { font-family: var(--font-titre); font-weight: 700; font-size: var(--fs-lg); line-height: 1.25; }
.evt-lieu__itineraire { margin-top: var(--e-4); background: var(--blanc); }
.evt-lieu__carte { height: clamp(260px, 40vw, 380px); border-radius: var(--r-md); overflow: hidden; background: var(--gris-plateau); z-index: 0; }
.evt-lieu__carte .leaflet-popup-content { font-family: var(--font-texte); font-size: var(--fs-sm); }

@media (prefers-reduced-motion: reduce) { .evt__visuel img, .evt__suite .ico, .evt-detail__retour .ico { transition: none; } .evt:hover .evt__visuel img { transform: none; } }

/* Événement avec une seule image : elle accompagne la lecture du texte au lieu de laisser la colonne vide dessous */
@media (min-width: 1024px) { .evt-detail__photos--seule { position: sticky; top: calc(var(--entete-h, 96px) + var(--e-4)); } }
/* Une seule image : la colonne prend la largeur de l'image (jamais plus de 420 px) et se pose contre le texte */
@media (min-width: 900px) { .evt-detail__corps--photos:has(.evt-detail__photos--seule) { grid-template-columns: minmax(0, 46rem) auto; justify-content: start; } }
.evt-detail__photos--seule .vignette-photo img { height: auto; }