:root {
  --orange: #ffd15e;
  --brown: #754a48;
  --placeholder: white;
  --paper: #ffffff;
  /* Le header occupe désormais tout le premier écran. */
  --content-width: 920px;
  --gap: 14px;
  --header-height: 100dvh;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: auto;
  scroll-snap-type: y proximity;
  scroll-padding-top: 0;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--brown);
  font-family: "Barlow Condensed", "Arial Narrow", Arial, sans-serif;
  font-weight: 400;
  letter-spacing: 0.02em;
}

img {
  display: block;
  width: 100%;
  height: 100%;
}

a {
  color: inherit;
}



.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* =========================
   HEADER
   ========================= */

.site-header {
  position: absolute;
  inset: 0 0 auto 0;
  z-index: 100;
  min-height: var(--header-height);
  height: 100dvh;
  background: var(--orange);
  scroll-snap-align: start;
}

.menu-toggle {
  position: fixed;
  top: 10px;
  right: 12px;
  z-index: 102;
  width: 32px;
  height: 37px;
  border: 0;
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.55);
  cursor: pointer;
  padding: 8px 6px;
}

.menu-toggle span:not(.sr-only) {
  display: block;
  height: 2px;
  margin: 4px 0;
  background: var(--brown);
  transition: transform .2s ease, opacity .2s ease;
}

.main-menu {
  position: fixed;
  top: 55px;
  right: 12px;
  width: 180px;
  padding: 8px 0;
  display: flex;
  flex-direction: column;
  background: rgba(255, 255, 255, 0.97);
  border-radius: 5px;
  box-shadow: 0 8px 24px rgba(65, 38, 38, .16);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity .2s ease, transform .2s ease, visibility .2s;
}

.main-menu.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.main-menu a {
  padding: 9px 16px;
  text-decoration: none;
  text-transform: uppercase;
  font-size: 17px;
  line-height: 1;
}

.main-menu a:hover,
.main-menu a:focus-visible {
  background: var(--orange);
  outline: none;
}

/* =========================
   GENERAL
   ========================= */

main {
  padding-top: var(--header-height);
}

.section {
  width: min(var(--content-width), calc(100% - 80px));
  margin: 0 auto;
  padding: 60px 0;
}

/*
  Sur ordinateur, chaque grande section après Programme occupe
  environ un écran complet. Le scroll-snap permet de passer
  naturellement à la section suivante/précédente.
*/
.section:not(.programme-section) {
  min-height: 100dvh;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.programme-section {
  width: 100%;
  margin: 0;
  padding: 0;
}

.programme-day {
  position: relative;
  min-height: 100dvh;
  width: min(1040px, calc(100% - 140px));
  margin: 0 auto;
  padding: 5vh 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  scroll-snap-align: start;
}

.day-title {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  margin: 0;
  font-size: clamp(30px, 3vw, 44px);
  line-height: 1;
  font-weight: 400;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Comme dans la maquette d'origine :
   vendredi et dimanche à gauche, samedi à droite. */
#vendredi-11 .day-title,
#dimanche-13 .day-title {
  right: calc(100% + 18px);
}

#samedi-12 .day-title {
  left: calc(100% + 18px);
}

.day-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  align-items: center;
  width: 100%;
  margin: 0 auto;
}

.day-grid-2 {
  max-width: 980px;
}

.day-grid-4 {
  max-width: 900px;
}

.program-card {
  position: relative;
  aspect-ratio: 1;
  min-width: 0;
  overflow: hidden;
  background: var(--placeholder);
}

.program-card img,
.media-square img,
.support-logo img {
  object-fit: cover;
}

/* =========================
   INFOS PRATIQUES
   ========================= */

.info-layout,
.about-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px;
  align-items: start;
}

.media-square {
  aspect-ratio: 1;
  overflow: hidden;
  background: var(--placeholder);
}

.info-map-square iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.text-block {
  font-size: 13px;
  line-height: 1.12;
}

.text-block p {
  margin: 0 0 16px;
}

.text-block strong {
  font-weight: 400;
}

/* =========================
   CONTACT
   ========================= */

.contact-section {
  padding-top: 70px;
  padding-bottom: 60px;
}

.contact-content {
  width: max-content;
  margin: 0 auto;
  font-size: 18px;
  line-height: 1.05;
}

.contact-content p {
  margin: 0;
}

.contact-content a {
  text-decoration: none;
}

/* =========================
   À PROPOS
   ========================= */

.about-section {
  padding-top: 60px;
}

.about-layout {
  align-items: center;
}

.about-text {
  padding-right: 4px;
}

.about-image {
  order: 2;
}

/* =========================
   SOUTIEN
   ========================= */

.soutien-section {
  padding-top: 75px;
  padding-bottom: 75px;
}

.support-intro {
  margin: 0 auto 34px;
  text-align: center;
  font-size: 20px;
  line-height: 1.12;
}

.support-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}

.support-logo {
  display: block;
  aspect-ratio: 1;
  overflow: hidden;
  background: var(--placeholder);
}

.support-logo img {
  object-fit: contain;
}

/* Barre de navigation inférieure */
.site-footer {
  min-height: 96px;
  padding: 28px 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--orange);
  scroll-snap-align: end;
}

.footer-nav {
  width: min(1100px, 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(22px, 4vw, 58px);
  flex-wrap: wrap;
}

.footer-nav a {
  color: var(--brown);
  text-decoration: none;
  text-transform: uppercase;
  font-size: clamp(18px, 2vw, 27px);
  line-height: 1;
  transition: opacity 180ms ease, transform 180ms ease;
}

.footer-nav a:hover,
.footer-nav a:focus-visible {
  opacity: 0.65;
  transform: translateY(-2px);
  outline: none;
}

/* =========================
   MOBILE
   ========================= */

@media (max-width: 650px) {
  html {
    scroll-snap-type: y proximity;
  }

  .section:not(.programme-section) {
    min-height: auto;
    scroll-snap-stop: normal;
    display: block;
  }

  :root {
    --header-height: 100dvh;
    --gap: 14px;
  }

  .section {
    width: min(620px, calc(100% - 32px));
  }

  .section h1,
  .section h2,
  /*
    Sur mobile, chaque journée reste un bloc distinct.
    Les images passent à une seule colonne et le scroll-snap devient plus doux.
  */
  .programme-day {
    min-height: auto;
    width: min(620px, calc(100% - 32px));
    padding: 52px 0;
    display: block;
    scroll-snap-stop: normal;
  }

  .day-title {
    position: static;
    transform: none;
    margin: 0 0 24px;
    text-align: center;
    font-size: 27px;
  }

  #vendredi-11 .day-title,
  #samedi-12 .day-title,
  #dimanche-13 .day-title {
    left: auto;
    right: auto;
  }

  .day-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .program-card {
    width: 100%;
  }

  .info-layout,
  .about-layout {
    display: flex;
    flex-direction: column;
    gap: 14px;
  }

  .about-image {
    order: 0;
  }

  .about-text {
    order: 1;
  }

  .text-block {
    font-size: 16px;
  }

  .contact-content {
    font-size: 20px;
  }

  .support-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .support-intro {
    font-size: 19px;
  }
}

@media (min-width: 651px) {
  .main-menu {
    right: 16px;
  }
}

/* Réduction des animations si l'utilisateur le demande */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .main-menu,
  .menu-toggle span {
    transition: none;
  }
}

@media (min-width: 651px) {
  #infos,
  #contact,
  #a-propos,
  #soutien {
    padding-top: 8vh;
    padding-bottom: 8vh;
  }

  #infos h2,
  #contact h2,
  #a-propos h2,
  #soutien h2 {
    width: 100%;
    margin-bottom: 5vh;
    text-align: center;
  }
}


@media (min-width: 651px) and (max-height: 800px) {
  .programme-day {
    padding-top: 3vh;
    padding-bottom: 3vh;
  }

  .day-grid-4 {
    max-width: min(760px, 86vh);
  }
}

/* Tous les titres principaux ont exactement la même taille */
.programme-main-title,
#infos h2,
#contact h2,
#a-propos h2,
#soutien h2 {
  font-size: clamp(42px, 5vw, 64px);
  line-height: 0.95;
  font-weight: 400;
  text-align: center;
  text-transform: uppercase;
}

@media (max-width: 650px) {
  .programme-main-title,
  #infos h2,
  #contact h2,
  #a-propos h2,
  #soutien h2 {
    font-size: clamp(36px, 11vw, 48px);
  }
}

/* Texte superposé sur les images du Programme */
.card-caption {
  position: absolute;
  inset: auto 0 0 0;
  min-height: 42%;
  padding: 18% 22px 20px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  color: #fff;
  pointer-events: none;

  /* Transparent en haut → 90 % opaque en bas */
  background: linear-gradient(
    to bottom,
    rgba(117, 74, 72, 0) 0%,
    rgba(117, 74, 72, 0.18) 30%,
    rgba(117, 74, 72, 0.62) 67%,
    rgba(117, 74, 72, 0.90) 100%
  );
}

.family-activities-caption {
  inset: 0;
  min-height: 100%;
  padding: 22px;
  justify-content: space-between;
  background: linear-gradient(
    to bottom,
    rgba(117, 74, 72, 0.20) 0%,
    rgba(117, 74, 72, 0.40) 50%,
    rgba(117, 74, 72, 0.78) 67%,
    rgba(117, 74, 72, 0.96) 100%
  );
}

.family-activities-top,
.family-activities-bottom {
  display: flex;
  flex-direction: column;
}

.family-activities-top {
  transform: none;
}

.card-caption p {
  margin: 0;
  font-size: clamp(24px, 2.3vw, 36px);
  line-height: 0.95;
  font-weight: 500;
  text-transform: uppercase;
}

.card-caption p + p {
  margin-top: 10px;
}

.card-caption span {
  margin-top: 6px;
  font-size: clamp(22px, 2vw, 30px);
  line-height: 1.05;
  text-transform: uppercase;
}

@media (max-width: 650px) {
  .card-caption {
    min-height: 40%;
    padding: 17% 18px 16px;
  }

  .family-activities-caption {
    padding: 18px;
  }

  .card-caption p {
    font-size: clamp(24px, 8vw, 34px);
  }

  .card-caption span {
    font-size: 26px;
  }
}

/* v10 — Animation du cartouche au survol */
.card-caption {
  transform-origin: bottom center;
  transition:
    min-height 320ms ease,
    padding 320ms ease,
    background 320ms ease;
}

.card-caption p,
.card-caption span {
  transform-origin: left bottom;
  transition:
    transform 320ms ease,
    font-size 320ms ease;
}

@media (hover: hover) and (pointer: fine) {
  .program-card:hover .card-caption {
    min-height: 48%;
    padding-bottom: 26px;
    background: linear-gradient(
      to bottom,
      rgba(117, 74, 72, 0) 0%,
      rgba(117, 74, 72, 0.22) 27%,
      rgba(117, 74, 72, 0.68) 64%,
      rgba(117, 74, 72, 0.92) 100%
    );
  }

  .program-card:hover .family-activities-caption {
    background: linear-gradient(
      to bottom,
      rgba(117, 74, 72, 0.24) 0%,
      rgba(117, 74, 72, 0.48) 27%,
      rgba(117, 74, 72, 0.84) 64%,
      rgba(117, 74, 72, 0.98) 100%
    );
  }

  .program-card:hover .card-caption p {
    transform: scale(1.08);
  }

  .program-card:hover .card-caption span {
    transform: scale(1.06);
  }
}

@media (prefers-reduced-motion: reduce) {
  .card-caption,
  .card-caption p,
  .card-caption span {
    transition: none;
  }
}

@media (max-width: 650px) {
  .site-footer {
    min-height: auto;
    padding: 28px 18px;
  }

  .footer-nav {
    gap: 14px 24px;
  }

  .footer-nav a {
    font-size: 18px;
  }
}

/* v12 — Apparition du header en fondu au chargement */
.site-header {
  opacity: 0;
  animation: headerFadeIn 1200ms ease-out 120ms forwards;
}

@keyframes headerFadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-header {
    opacity: 1;
    animation: none;
  }
}

/* v14 — "Programme" fait partie du même écran que le vendredi */
.programme-main-title {
  position: absolute;
  top: 6vh;
  left: 50%;
  width: 100%;
  margin: 0;
  transform: translateX(-50%);
  text-align: center;
  font-size: clamp(42px, 5vw, 64px);
  line-height: 0.95;
  font-weight: 400;
  text-transform: uppercase;
  pointer-events: none;
}

#vendredi-11 {
  padding-top: 15vh;
}

@media (max-width: 650px) {
  .programme-main-title {
    position: static;
    width: 100%;
    margin: 0 0 34px;
    transform: none;
    font-size: clamp(36px, 11vw, 48px);
    pointer-events: auto;
  }

  #vendredi-11 {
    padding-top: 52px;
  }
}

/* v15 — Le scroll desktop est piloté par le JS écran par écran.
   On coupe le snap CSS sur desktop pour éviter une seconde correction visuelle. */
@media (min-width: 651px) {
  html {
    scroll-snap-type: none;
  }
}

/* v17 — Hauteur dynamique selon la fenêtre */
@supports not (height: 100dvh) {
  :root {
    --header-height: 100vh;
  }

  .site-header {
    height: 100vh;
    min-height: 100vh;
  }

  .section:not(.programme-section),
  .programme-day {
    min-height: 100vh;
  }
}


/* =========================================================
   v18 — Détail d'un événement directement dans son carré
   ========================================================= */

.program-card {
  position: relative;
}

.event-card-toggle {
  position: absolute;
  inset: 0;
  z-index: 3;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.program-card.is-expanded .event-card-toggle {
  pointer-events: none;
}

.event-card-detail {
  position: absolute;
  inset: 0;
  z-index: 5;

  padding: clamp(24px, 3vw, 38px);

  display: flex;
  align-items: flex-end;

  color: #fff;
  background: rgba(117, 74, 72, 0.96);

  opacity: 0;
  visibility: hidden;
  transform: scale(0.985);

  transition:
    opacity 260ms ease,
    transform 260ms ease,
    visibility 260ms ease;
}

.program-card.is-expanded .event-card-detail {
  opacity: 1;
  visibility: visible;
  transform: scale(1);
}

.event-card-detail-content {
  width: 100%;
}

.event-card-detail h3 {
  margin: 0 0 14px;
  font-size: clamp(26px, 2.5vw, 40px);
  line-height: 0.95;
  font-weight: 500;
  text-transform: uppercase;
}

.event-card-detail p {
  margin: 0 0 24px;
  font-size: clamp(24px, 2vw, 32px);
  line-height: 1.15;
  text-transform: none;
}

.event-card-detail a {
  display: inline-block;

  color: #fff;
  font-size: clamp(26px, 1.8vw, 34px);
  line-height: 1;
  text-transform: uppercase;
  text-decoration: none;
}

.event-card-detail a:hover,
.event-card-detail a:focus-visible {
  text-decoration: underline;
  text-underline-offset: 5px;
}

.event-card-close {
  position: absolute;
  z-index: 2;
  right: 12px;
  bottom: 12px;

  border: 0;
  width: 70px;
  height: 70px;
  padding: 0;

  color: #4a2d2c;
  background: transparent;

  font: inherit;
  font-size: 62px;
  line-height: 1;

  cursor: pointer;
}

.event-card-close:hover,
.event-card-close:focus-visible {
  transform: scale(1.1);
}

/* Quand le détail est ouvert, le cartouche de base est masqué. */
.program-card.is-expanded .card-caption {
  opacity: 0;
}

.card-caption {
  transition:
    min-height 320ms ease,
    padding 320ms ease,
    background 320ms ease,
    opacity 180ms ease;
}

@media (max-width: 650px) {
  .event-card-detail {
    padding: 24px 20px 20px;
  }

  .event-card-close {
    right: 10px;
    bottom: 10px;
    width: 80px;
    height: 80px;
    font-size: 70px;
  }

  .event-card-detail h3 {
    font-size: clamp(27px, 8vw, 36px);
  }

  .event-card-detail p {
    font-size: 26px;
  }

  .event-card-detail a {
    font-size: 30px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .event-card-detail,
  .event-card-detail a,
  .event-card-close {
    transition: none;
  }
}


/* v19 — Jours centrés au-dessus des images */
.day-title {
  position: static;
  top: auto;
  left: auto;
  right: auto;
  transform: none;

  width: 100%;
  margin: 0 0 clamp(15px, 2vh, 28px);

  text-align: center;
  font-size: clamp(30px, 3vw, 44px);
  line-height: 1;
  font-weight: 400;
  text-transform: uppercase;
  white-space: nowrap;
}

#vendredi-11 .day-title,
#samedi-12 .day-title,
#dimanche-13 .day-title {
  position: static;
  left: auto;
  right: auto;
  transform: none;
  width: 100%;
  text-align: center;
}


/* v20 — Textes Infos pratiques, Contact et Soutien agrandis */
#infos .text-block {
  font-size: clamp(18px, 1.55vw, 24px);
  line-height: 1.18;
}

#contact .contact-content {
  font-size: clamp(24px, 2.1vw, 32px);
  line-height: 1.12;
}

#soutien .support-intro {
  font-size: clamp(24px, 2.1vw, 32px);
  line-height: 1.18;
}

@media (max-width: 650px) {
  #infos .text-block {
    font-size: clamp(17px, 4.8vw, 21px);
  }

  #contact .contact-content {
    font-size: clamp(21px, 6vw, 27px);
  }

  #soutien .support-intro {
    font-size: clamp(21px, 6vw, 27px);
  }
}


/* v21 — Hamburger plus grand + Soutien mieux contenu dans l'écran */

/* Hamburger principal */
.menu-toggle {
  width: 44px;
  height: 50px;
  padding: 10px 8px;
  border-radius: 8px;
}

.menu-toggle span:not(.sr-only) {
  height: 3px;
  margin: 5px 0;
}

/* Si la page événement utilise un autre hamburger */
.event-menu-toggle {
  width: 58px;
  height: 70px;
}

/* Soutien : réduire un peu la hauteur interne pour éviter que le footer affleure */
#soutien {
  min-height: calc(100dvh - 24px);
  padding-top: 6vh;
  padding-bottom: 6vh;
  justify-content: center;
}

#soutien .support-intro {
  margin-bottom: clamp(20px, 3vh, 34px);
}

#soutien .support-grid {
  gap: clamp(8px, 1.1vw, 12px);
}

/* Sur écrans moins hauts, compacter davantage la section Soutien */
@media (min-width: 651px) and (max-height: 820px) {
  #soutien {
    min-height: calc(100dvh - 36px);
    padding-top: 4vh;
    padding-bottom: 4vh;
  }

  #soutien h2 {
    margin-bottom: 3vh;
  }

  #soutien .support-intro {
    margin-bottom: 2.5vh;
    font-size: clamp(21px, 1.8vw, 28px);
  }

  #soutien .support-grid {
    max-width: 92%;
    margin: 0 auto;
  }
}

@media (max-width: 650px) {
  .menu-toggle {
    width: 42px;
    height: 48px;
  }

  #soutien {
    min-height: auto;
    padding-top: 48px;
    padding-bottom: 48px;
  }
}


/* v22 — Soutien tient entièrement dans UN écran desktop */
@media (min-width: 651px) {
  #soutien {
    box-sizing: border-box;
    height: 100dvh;
    min-height: 0;
    max-height: 100dvh;

    padding-top: clamp(24px, 3.5vh, 42px);
    padding-bottom: clamp(32px, 4.5vh, 54px);

    overflow: hidden;
    justify-content: center;
  }

  #soutien h2 {
    margin-top: 0;
    margin-bottom: clamp(18px, 2.5vh, 30px);
  }

  #soutien .support-intro {
    margin-top: 0;
    margin-bottom: clamp(16px, 2.2vh, 26px);
    font-size: clamp(20px, 1.65vw, 27px);
    line-height: 1.12;
  }

  #soutien .support-grid {
    width: min(900px, 88%);
    max-height: 52vh;
    margin: 0 auto;
    gap: clamp(7px, 0.9vw, 11px);
  }

  #soutien .support-grid img {
    max-height: 24vh;
    object-fit: contain;
  }
}

/* Écrans desktop particulièrement bas */
@media (min-width: 651px) and (max-height: 760px) {
  #soutien {
    padding-top: 18px;
    padding-bottom: 28px;
  }

  #soutien h2 {
    margin-bottom: 14px;
  }

  #soutien .support-intro {
    margin-bottom: 14px;
    font-size: clamp(18px, 1.45vw, 23px);
  }

  #soutien .support-grid {
    max-height: 48vh;
  }

  #soutien .support-grid img {
    max-height: 21vh;
  }
}


/* v23 — Un peu plus d'interligne dans Soutien */
@media (min-width: 651px) {
  #soutien .support-intro {
    line-height: 1.28;
  }
}

@media (min-width: 651px) and (max-height: 760px) {
  #soutien .support-intro {
    line-height: 1.24;
  }
}


/* =========================================================
   v24 — Carrousels automatiques sur la 1re ligne du samedi
   ========================================================= */

.event-image-carousel {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
}

.event-image-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: scale(1.015);
  transition: opacity 700ms ease, transform 900ms ease;
}

.event-image-slide.is-active {
  opacity: 1;
  transform: scale(1);
}

.event-image-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Le cartouche et le détail restent au-dessus des images. */
.program-card .card-caption {
  position: absolute;
  z-index: 2;
}

.program-card .event-card-toggle {
  z-index: 4;
}

.program-card .event-card-detail {
  z-index: 9;
}

.program-card.is-expanded .event-image-dots {
  opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
  .event-image-slide {
    transition: none;
  }
}

/* v25 — Samedi : 3 carrousels en première ligne + 2 cases dessous */
@media (min-width: 651px) {
  #samedi-12 .day-grid-4 { width: min(1100px, 94%); max-width: 1100px; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: clamp(12px, 1.35vw, 20px); }
  #samedi-12 .day-grid-4 > .program-card:nth-child(1),
  #samedi-12 .day-grid-4 > .program-card:nth-child(2),
  #samedi-12 .day-grid-4 > .program-card:nth-child(3) { grid-column: span 2; }
  #samedi-12 .day-grid-4 > .program-card:nth-child(4) { grid-column: 2 / span 2; }
  #samedi-12 .day-grid-4 > .program-card:nth-child(5) { grid-column: 4 / span 2; }
}
@media (max-width: 650px) { #samedi-12 .day-grid-4 { grid-template-columns: 1fr; } }


/* =========================================================
   v26 — Samedi : les 2 cases du bas ont la taille du vendredi
   ========================================================= */

@media (min-width: 651px) {
  #samedi-12 .day-grid-4 {
    width: 100%;
    max-width: 980px;
    margin-left: auto;
    margin-right: auto;

    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 18px;
  }

  /* Première ligne : 3 cases plus petites */
  #samedi-12 .day-grid-4 > .program-card:nth-child(1),
  #samedi-12 .day-grid-4 > .program-card:nth-child(2),
  #samedi-12 .day-grid-4 > .program-card:nth-child(3) {
    grid-column: span 2;
  }

  /* Deuxième ligne : chacune prend exactement la moitié
     de la même largeur utilisée par les 2 images du vendredi. */
  #samedi-12 .day-grid-4 > .program-card:nth-child(4) {
    grid-column: 1 / span 3;
  }

  #samedi-12 .day-grid-4 > .program-card:nth-child(5) {
    grid-column: 4 / span 3;
  }
}


/* =========================================================
   v27 — Description des événements scrollable dans la carte
   ========================================================= */

.event-card-detail-content {
  width: 100%;
  max-height: 100%;
  display: flex;
  flex-direction: column;
}

.event-card-detail h3 {
  flex-shrink: 0;
}

.event-card-detail p {
  margin: 0 0 24px;
  font-size: clamp(24px, 2vw, 32px);
  line-height: 1.25;
  text-transform: none;

  max-height: clamp(100px, 18vh, 180px);
  overflow-y: auto;
  overflow-x: hidden;

  padding-right: 12px;
  -webkit-overflow-scrolling: touch;

  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.65) transparent;
}

.event-card-detail p::-webkit-scrollbar {
  width: 5px;
}

.event-card-detail p::-webkit-scrollbar-track {
  background: transparent;
}

.event-card-detail p::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.65);
  border-radius: 10px;
}

.event-card-detail p::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.9);
}

.event-card-detail a {
  flex-shrink: 0;
}

@media (max-width: 650px) {
  .event-card-detail p {
    max-height: 180px;
    font-size: 26px;
    line-height: 1.3;
  }

}


/* =========================================================
   v28 — Corrections desktop + mobile
   ========================================================= */

/* PROGRAMME — titre environ +20 % */
.programme-main-title {
  font-size: clamp(50px, 6vw, 77px) !important;
}

@media (max-width: 650px) {
  .programme-main-title {
    font-size: clamp(43px, 13vw, 58px) !important;
  }
}

/* HEADER — ratio 2481 × 1275, sans recadrage, haut collé */
.site-header {
  width: 100%;
  height: auto !important;
  min-height: 0 !important;
  aspect-ratio: 2481 / 1275;
  background:
    radial-gradient(
      ellipse at center,
      rgba(0, 0, 0, 0) 52%,
      rgba(0, 0, 0, 0.04) 74%,
      rgba(0, 0, 0, 0.18) 100%
    ),
    url("assets/header.png") no-repeat center top / 100% 100% !important;
}

main {
  padding-top: calc(100vw * 1275 / 2481) !important;
}

.main-menu a {
  font-size: clamp(19px, 1.6vw, 24px);
}

.menu-toggle {
  width: 48px;
  height: 54px;
}

.menu-toggle span:not(.sr-only) {
  height: 3px;
  margin: 5px 0;
}

/* EVENT-CARD-DETAIL — sans h3, fond moins opaque, zone intérieure scrollable */
.event-card-detail h3 {
  display: none !important;
}

.event-card-detail {
  background: rgba(117, 74, 72, 1) !important;
  align-items: stretch;
}

.event-card-detail-content {
  width: calc(100% - 90px);
  max-height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 0;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.65) transparent;
}

.event-card-detail p {
  max-height: none !important;
  overflow: visible !important;
  padding-right: 0 !important;
  margin: 0 0 22px;
  line-height: 1.3;
}

.event-card-detail-content::-webkit-scrollbar {
  width: 5px;
}

.event-card-detail-content::-webkit-scrollbar-track {
  background: transparent;
}

.event-card-detail-content::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.65);
  border-radius: 10px;
}

.event-card-detail-content::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.9);
}

/* CARROUSELS — pastilles masquées, aucune variation d'échelle */
.event-image-dots,
.event-image-dot {
  display: none !important;
}

.event-image-slide {
  transform: none !important;
  transition: opacity 650ms ease !important;
}

.event-image-slide.is-active {
  transform: none !important;
}

.event-image-carousel,
.event-image-slide,
.event-image-slide img {
  width: 100%;
  height: 100%;
}

.event-image-slide img {
  object-fit: cover;
}

/* FADE-IN discret, une seule fois au premier passage */
img.fade-on-view {
  opacity: 0;
  transition: opacity 650ms ease;
}

img.fade-on-view.is-visible {
  opacity: 1;
}

/* À PROPOS — image 2:3 + texte agrandi */
#a-propos .about-image {
  aspect-ratio: 2 / 3;
}

#a-propos .about-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#a-propos .about-text {
  font-size: clamp(20px, 1.7vw, 27px);
  line-height: 1.22;
}

@media (max-width: 650px) {
  #a-propos .about-text {
    font-size: clamp(18px, 5.2vw, 23px);
    line-height: 1.25;
  }
}

/* CONTACT — centré, label puis adresse à la ligne */
#contact .contact-content {
  width: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(30px, 4vh, 52px);
  text-align: center;
}

#contact .contact-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

#contact .contact-label {
  font-size: clamp(24px, 2vw, 31px);
  line-height: 1;
}

#contact .contact-link {
  display: inline-block;
  width: fit-content;
  color: var(--brown);
  font-size: clamp(26px, 2.35vw, 36px);
  line-height: 1.05;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
  transform: scale(1);
  transition: transform 220ms ease, text-decoration-color 180ms ease;
}

#contact .contact-link:hover,
#contact .contact-link:focus-visible {
  transform: scale(1.07);
  text-decoration-color: currentColor;
}

@media (max-width: 650px) {
  #contact .contact-content {
    gap: 30px;
  }

  #contact .contact-label {
    font-size: clamp(21px, 6vw, 26px);
  }

  #contact .contact-link {
    font-size: clamp(22px, 6.6vw, 29px);
    width: 100%;
    max-width: 100%;
    overflow-wrap: anywhere;
  }
}

/* MOBILE — mouvement vertical uniquement à zoom 100 % */
@media (max-width: 650px) {
  html,
  body {
    width: 100%;
    max-width: 100%;
    overflow-x: clip;
    overscroll-behavior-x: none;
  }

  body {
    touch-action: pan-y pinch-zoom;
  }

  main,
  section,
  .programme-section,
  .programme-day,
  .day-grid,
  .program-card,
  .info-layout,
  .about-layout,
  .support-grid,
  .site-footer {
    max-width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  img.fade-on-view {
    opacity: 1;
    transition: none;
  }
}


/* =========================================================
   v29 — Infos pratiques : repère GPS + adresse Google Maps
   ========================================================= */

.info-map-square {
  position: relative;
  display: block;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}

.info-map-square img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Repère GPS centré dans l'image */
.gps-marker {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 4;

  width: clamp(44px, 5vw, 70px);
  height: clamp(44px, 5vw, 70px);

  transform: translate(-50%, -50%);

  color: #fff;
  filter: drop-shadow(0 3px 8px rgba(0, 0, 0, 0.28));

  pointer-events: none;

  transition:
    transform 220ms ease,
    filter 220ms ease;
}

.gps-marker svg {
  display: block;
  width: 100%;
  height: 100%;
  fill: currentColor;
}

.info-map-square:hover .gps-marker,
.info-map-square:focus-visible .gps-marker {
  transform: translate(-50%, -50%) scale(1.08);
  filter: drop-shadow(0 5px 10px rgba(0, 0, 0, 0.35));
}

.info-map-square:focus-visible {
  outline: 2px solid var(--brown);
  outline-offset: 4px;
}

/* Adresse cliquable */
.practical-address-link {
  display: inline-block;

  color: inherit;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 5px;
  text-decoration-thickness: 1px;

  transform: scale(1);
  transform-origin: left center;

  transition:
    transform 200ms ease,
    text-decoration-color 180ms ease;
}

.practical-address-link:hover,
.practical-address-link:focus-visible {
  transform: scale(1.05);
  text-decoration-color: currentColor;
}

@media (max-width: 650px) {
  .gps-marker {
    width: clamp(48px, 15vw, 68px);
    height: clamp(48px, 15vw, 68px);
  }

  .practical-address-link {
    transform-origin: left center;
  }
}