/* ========================================================================
   ÉDITIONS — RÈGLES COMMUNES 2016 → prochaines années
   Aucune règle par artiste ou par image : copier un événement HTML suffit.
   1. Introduction   2. Événements   3. Archives   4. Tablette et mobile
   ======================================================================== */
.edition-page { font-family: var(--font-text); }
.edition-page *, .edition-page *::before, .edition-page *::after { box-sizing: border-box; }

/* 1 — INTRODUCTION. Année verticale et deux colonnes conservées sur desktop. */
.intro { position: relative; background: var(--paper); }
.intro #etoile img { width: 220px; padding: 10px; }
.date { position: fixed; margin-left: 50px; }
/* Chevron historique : la rotation de la date oriente » vers le haut.
   Visible aussi au focus clavier sur le lien de retour en haut de page. */
.date p::after { content: '»'; position: absolute; opacity: 0; transition: opacity 180ms ease; }
.date a:hover p::after, .date a:focus-visible p::after { opacity: 1; }
.date p { font-size: 150px; font-weight: 100; color: black; }
.rotatation { transform: translate(-40%) rotate(-90deg); }
.rotatation a { text-decoration: none; }
.descriptifEdition { margin: 80px 50px 50px 220px; columns: 2 250px; column-gap: 30px; }
.descriptifEdition h1 { column-span: all; font-size: clamp(20px, 2vw, 25px); margin-bottom: 0.5em; line-height: 1.3; text-align: justify; }
.descriptifEdition p { font-size: clamp(18px, 1.4vw, 20px); font-weight: 100; line-height: 1.5; margin-bottom: 20px; text-align: justify; }
.titre_2025, .edition-document { text-align: center; font-size: 20px; margin: 12px var(--page-gutter); }

/* 2 — ÉVÉNEMENTS. L'ordre HTML décide de l'alternance image/texte sur desktop.
   Pour les images : proportions originales, hauteur limitée, aucun recadrage. */
.section_globale { margin-top: 160px; }
.section_globale_10ans { margin-top: 0; }
.conteneurPerf { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: var(--event-gap); margin: 70px 50px 50px 220px; }
.conteneurPerf > * { min-width: 0; }
.conteneurPerf > .divText:only-child { grid-column: 1 / -1; max-width: 75ch; justify-self: center; }
.titre { text-transform: uppercase; text-align: center; font-size: var(--title-size); font-weight: 400; padding-inline: var(--page-gutter); }
.titre span { font-size: inherit; font-weight: 700; }
.sousTitre { text-align: center; font-size: var(--title-size); font-weight: 400; font-style: italic; padding-inline: var(--page-gutter); }
.margin-2025 { margin-top: 3%; }
.divText { width: 100%; font-size: var(--text-size); line-height: 1.5; }
.divText p { margin: 0 0 1rem; text-align: justify; }
.divText span { font-weight: 100; font-size: inherit; }
.divText .bold { font-weight: 700; }
.divText .sousTitre { margin-bottom: 20px; }
.horaires_seances { text-align: center; font-size: var(--text-size); line-height: 1.5; margin: 1rem 0; }
.event-media { width: 100%; min-width: 0; margin: 0; }
.event-media > img { display: block; width: 100%; height: auto; max-height: 680px; object-fit: contain; }
/* Variante facultative pour une affiche verticale, sans ajouter de règle par ID. */
.event-media--portrait > img { max-height: 560px; }
.event-media figcaption { font-size: 0.875rem; margin-top: 8px; text-align: center; }

/* 3 — ARCHIVES. La ligne se répartit sur plusieurs rangées si nécessaire. */
/* Main personnalisée sur toute la frise, y compris les chiffres et les liens.
   Déclaration explicite pour ne pas dépendre du curseur hérité du navigateur. */
#annees, #annees a, #annees p { cursor: url('../cursor-hand-mini2.png'), pointer; }
#annees { margin: 70px var(--page-gutter) 40px; }
.an { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 24px; }
.an .paraA { width: auto; margin: 0; }
.an a { display: block; padding: 10px; color: black; text-decoration: none; }
.an p { font: 100 clamp(22px, 2.2vw, 30px) var(--font-text); }
.an a[aria-current='page'] { text-decoration: underline; text-underline-offset: 6px; }

/* 4 — TABLETTE / MOBILE. Une colonne et des marges communes pour texte et photo.
   La largeur de lecture est limitée, jamais à 50 % avec un padding fixe. */
@media (max-width: 1000px) {
  .date { position: relative; margin: 16px 0; text-align: center; }
  .date p { font-size: 50px; }
  .rotatation { transform: none; }
  .descriptifEdition { margin: 35px auto; padding: 0 var(--page-gutter); max-width: 840px; }
  .section_globale, .section_globale_10ans { margin-top: 64px; }
  .conteneurPerf { grid-template-columns: minmax(0, 1fr); width: calc(100% - 2 * var(--page-gutter)); max-width: 640px; margin: 28px auto 55px; gap: 24px; }
  .titre { margin-bottom: 20px; }
  .sousTitre { margin-bottom: 24px; }
  .event-media > img, .swiper-slide img { max-height: 620px; }
}
@media (max-width: 700px) {
  .descriptifEdition { columns: 1; }
  .descriptifEdition h1, .descriptifEdition p, .divText p { text-align: justify; }
  .section_globale { margin-top: 52px; }
  .event-media > img, .swiper-slide img { max-height: 520px; }
  .divText, .horaires_seances { overflow-wrap: anywhere; }
}



/* Responsive : descriptions justifiées, titres et infos pratiques centrés.
   L'alternance desktop reste celle du fichier HTML. */
@media (max-width: 1000px) {
  .descriptifEdition p, .divText, .divText p { text-align: justify; }
  .descriptifEdition h1, .titre, .sousTitre, .horaires_seances,
  .titre_2025, .edition-document, .event-media figcaption { text-align: center; }
  .conteneurPerf > .sousTitre { width: 100%; padding-inline: 0; margin-bottom: 0; }
}