/*
Theme Name:  Lama Festival
Theme URI:   https://festilama.org
Author:      Mezzanotte 34
Description: Thème sur-mesure pour le Festival du Film de Lama — 32e édition 2026
Version:     1.0.0
Requires at least: 6.0
Requires PHP: 8.0
License:     GPLv2 or later
Text Domain: lama-festival
Tags: custom-background, custom-header, custom-menu, featured-images, responsive-layout
*/

/* ───────────────────────────────────────────
   TYPOGRAPHIES
   Mattone  → titres, sections, cartes, boutons
   Karrik   → corps de texte, méta, footer, nav
─────────────────────────────────────────── */
@font-face {
  font-family: 'Mattone';
  src: url('fonts/Mattone-Regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Mattone';
  src: url('fonts/Mattone-Bold.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Mattone';
  src: url('fonts/Mattone-Black.otf') format('opentype');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Karrik';
  src: url('fonts/Karrik-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Karrik';
  src: url('fonts/Karrik-Italic.ttf') format('truetype');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

/* ───────────────────────────────────────────
   VARIABLES
─────────────────────────────────────────── */
:root {
  --color-beige: #F9D5B1;
  --color-orange: #E35210;
  --color-dark: #1d1d1b;
  --color-dark-blue: #262B5C;
  --color-white: #f7f6f6;
  --color-light-blue: #BBE3F4;
  --color-footer: #1d1d1b;

  --font-titre: 'Mattone', serif;
  --font-texte: 'Karrik', sans-serif;
  --font-main: 'Mattone', serif;
  /* alias pour compat */

  --radius: 20px;
  --radius-sm: 6px;
  --transition: 0.2s ease;

  /* font size */
  --size-xs: 13px;
  --size-sm: 15px;
  --size-regular: 16px;

  /* mattone */
  --size-title: 40px;
  --size-title-sm: 28px;
  --size-subtitle: 18px;
  --size-card-title: 15px;

  /* ───────────────────────────────────────────
     ÉCHELLE DE Z-INDEX CENTRALISÉE
     Évite les collisions entre les zones de contenu
     (montagne), le header et les éléments qui doivent
     réellement passer au-dessus de tout (menu, popups).
  ─────────────────────────────────────────── */
  --z-content-front: 5;
  /* .sunset-zone > * (passe au-dessus de la montagne) */
  --z-content-black: 10;
  /* .black-zone (passe au-dessus de la montagne) */
  --z-header: 100;
  /* header sticky */
  --z-popup: 9999;
  /* popup inscription */
  --z-menu-overlay: 99998;
  /* voile derrière le menu offcanvas */
  --z-menu-panel: 99999;
  /* panneau du menu offcanvas — toujours au-dessus de tout */
}


/* ───────────────────────────────────────────
   HIÉRARCHIE TYPOGRAPHIQUE
─────────────────────────────────────────── */
h1,
h2,
h3,
.site-nav a,
.carte h4,
.jury-carte strong,
.rencontre-carte__date,
.jour-titre,
.section-label,
.bandeau-appel,
.btn,
.jour-tab,
.site-header__edition,
.article-carte__date,
.carte__heure,
.tarif-item__prix,
.action-carte__date,
.squadra-item strong,
.participation-bloc h2,
.page-simple__inner h1,
.page-simple__content h2,
.page-simple__content h3 {
  font-family: var(--font-titre);
}

/* Corps de texte, méta → Karrik */
.carte__meta,
.carte__lieu,
.jury-carte span,
.rencontre-carte__role,
.hebergement-item,
.transport-col,
.article-carte p,
.action-carte p,
.site-footer__brand address,
.site-footer__col ul li a,
.site-footer__bottom,
p,
small,
address,
li {
  font-family: var(--font-texte);
}

/* ───────────────────────────────────────────
   RESET & BASE
─────────────────────────────────────────── */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font-texte);
  background-color: var(--color-dark);
  color: var(--color-white);
  font-size: var(--size-regular);
  line-height: 1.5;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

p {
  text-align: justify;
}

/* ───────────────────────────────────────────
   LAYOUT
─────────────────────────────────────────── */
.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ───────────────────────────────────────────
   HEADER
   Fond beige, nav colonne gauche,
   logo centré, édition droite
─────────────────────────────────────────── */
.site-header {
  background: transparent;
  padding: 20px 0;
  position: sticky;
  top: 0;
  z-index: var(--z-header);
}

.site-header::after {
  content: '';
  position: absolute;
  bottom: -32px;
  left: 0;
  width: 100%;
  height: 32px;
  pointer-events: none;
  z-index: 1;
}

.site-header__inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
}

.site-header__inner .menu-toggle {
  justify-self: start;
}

.site-header__inner .site-header__logo {
  justify-self: center;
}

.site-header__inner .site-header__edition {
  justify-self: end;
}

.site-nav {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.site-nav a {
  font-size: var(--size-regular);
  font-weight: 600;
  text-transform: lowercase;
  letter-spacing: 0.02em;
  color: var(--color-dark);
}

.site-nav a.active,
.site-nav a:hover {
  color: var(--color-orange);
}

.site-header__logo img,
.site-header__logo strong {
  height: 30px;
  width: auto;
}

/* Logo long : visible desktop, masqué mobile */
.site-header__logo .logo-long {
  display: block;
}

.site-header__logo .logo-court-noir {
  height: 30px;
  width: auto;
}

.site-header__edition {
  font-size: var(--size-regular);
  font-weight: 700;
  text-align: right;
  white-space: nowrap;
  color: var(--color-dark)
}

.site-header__edition .separator {
  margin: 0 6px;
  color: var(--color-dark);
}

.site-header__edition .dates {
  color: var(--color-orange);
}

/* ───────────────────────────────────────────
   MENU OFF-CANVAS
─────────────────────────────────────────── */
.menu-toggle {
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font-titre);
  font-size: var(--size-regular);
  font-weight: 600;
  text-transform: lowercase;
  letter-spacing: 0.02em;
  color: var(--color-dark);
  padding: 8px 0;
  transition: color var(--transition);
}

.menu-toggle:hover {
  color: var(--color-orange);
}

.menu-overlay {
  position: fixed !important;
  inset: 0 !important;
  background: rgba(0, 0, 0, 0.6);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease;
  z-index: var(--z-menu-overlay) !important;
  /* isolation:isolate force la création d'un contexte d'empilement propre
     à cet élément : même si un ancêtre (wrapper de page, effet de scroll,
     etc.) crée son propre contexte, le voile reste comparé au niveau
     racine et ne peut plus être "avalé" par le contenu. */
  isolation: isolate;
}

.menu-overlay.is-open {
  opacity: 1;
  visibility: visible;
}

.menu-offcanvas {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 360px;
  max-width: 85vw;
  background: var(--color-dark);
  color: var(--color-white);
  z-index: var(--z-menu-panel) !important;
  isolation: isolate;
  transform: translateX(-100%);
  transition: transform 0.35s ease;
  display: flex;
  flex-direction: column;
  padding: 40px 32px;
  box-sizing: border-box;
  height: 100vh !important;
  height: 100dvh !important;
  margin: 0 !important;
}

.menu-offcanvas.is-open {
  transform: translateX(0);
}

.menu-offcanvas__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 32px;
}

.menu-offcanvas__edition {
  font-family: var(--font-titre);
  font-size: var(--size-regular);
  font-weight: 400;
  white-space: nowrap;
  color: var(--color-white);
}

@media (min-width: 769px) {
  .menu-offcanvas__edition {
    display: none;
  }

  .menu-offcanvas__top {
    justify-content: flex-end;
  }
}

.menu-offcanvas__edition .separator {
  margin: 0 6px;
  color: var(--color-white);
}

.menu-offcanvas__edition .dates {
  color: var(--color-orange);
}

.menu-offcanvas__close {
  align-self: auto;
  flex-shrink: 0;
  background: none;
  border: none;
  font-size: 32px;
  line-height: 1;
  cursor: pointer;
  color: var(--color-white);
  transition: color var(--transition);
}

.menu-offcanvas__close:hover {
  color: var(--color-orange);
}

.menu-offcanvas__nav {
  display: flex;
  flex-direction: column;
  gap: 28px;
  flex-grow: 1;
}

.menu-offcanvas__nav a {
  font-family: var(--font-titre);
  font-size: 28px;
  font-weight: 600;
  text-transform: lowercase;
  letter-spacing: 0.02em;
  color: var(--color-white);
  transition: color var(--transition);
}

.menu-offcanvas__nav a.active,
.menu-offcanvas__nav a:hover {
  color: var(--color-orange);
}

.menu-offcanvas__logo {
  text-align: center;
  margin-top: auto;
  padding-top: 32px;
}

.menu-offcanvas__logo a {
  display: inline-block;
}

.menu-offcanvas__logo img {
  max-width: 160px;
  width: 100%;
  height: auto;
}

@media (max-width: 768px) {
  .menu-offcanvas {
    width: 100%;
    max-width: 100%;
    padding: 32px 24px;
  }

}

/* ───────────────────────────────────────────
   BANDEAU APPEL
─────────────────────────────────────────── */
.bandeau-appel {
  background: var(--color-orange);
  color: var(--color-white);
  text-align: center;
  padding: 10px 24px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* ───────────────────────────────────────────
   SYSTÈME COUCHER DE SOLEIL + MONTAGNE STICKY
   Architecture :
     .sunset-zone     → dégradé + contenu avant la montagne
     .mountain-sticky → SVG montagne collé en bas
     .black-zone      → zone sombre après la montagne
─────────────────────────────────────────── */

/* ── Zone dégradé ── */
.sunset-zone {
  position: relative;
  background: linear-gradient(to bottom, var(--sunset-color-1, var(--color-beige)) 5%, var(--sunset-color-2, var(--color-orange)) 64%);
  /* display:flow-root crée un nouveau contexte de formatage de bloc :
     le margin-top du premier enfant ne peut plus "remonter" hors de
     .sunset-zone et créer un espace vide entre le header et la 1ère
     section de contenu (bug classique de fusion de marges). */
  display: flow-root;
}

/* Tout le contenu avant la montagne passe par-dessus elle au scroll */
.sunset-zone>*:not(.mountain-sticky) {
  position: relative;
  z-index: var(--z-content-front);
}

/* Textes sur le dégradé — contraste auto-adaptatif, fonctionne quelle
   que soit la longueur de page ou les couleurs choisies dans les tranches */
.sunset-zone .section-label,
.sunset-zone h1,
.sunset-zone h2,
.sunset-zone p {
  color: #fff !important;
  mix-blend-mode: difference;
}

/* ── Montagne sticky ──
   Reste collée en bas de l'écran pendant le scroll dans .sunset-zone,
   puis glisse naturellement avec .black-zone (z-index inférieur).
   margin-top négatif = la montagne remonte dans le flux et le contenu
   (z-index 5) peut passer visuellement au-dessus sans espace vide. */
.mountain-sticky {
  position: sticky;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 1;
  line-height: 0;
  pointer-events: none;
  transform: translateY(100%);
  will-change: transform;
  /* Ratio SVG : 546.95 / 1706.37 ≈ 32vw — tire la montagne vers le haut */
  margin-top: -32vw;
}

.mountain-sticky svg {
  display: block;
  width: 100%;
  height: auto;
}

/* ── Contenu par-dessus la montagne ──
   Position absolue au bas de .sunset-zone (qui est déjà position:relative).
   z-index 5 : passe au-dessus de la montagne (z-index 1)
   mais ne modifie pas la hauteur du flux. */
.mountain-over {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: var(--z-content-front);
  pointer-events: auto;
}

/* ── Zone noire après la montagne ── */
.black-zone {
  position: relative;
  z-index: var(--z-content-black);
  /* passe AU-DESSUS de la montagne (z-index 1) */
  background: var(--color-dark);
  color: var(--color-white);
}

.black-zone h1,
.black-zone h2,
.black-zone p,
.black-zone .section-label {
  color: var(--color-white);
}

.black-zone h3 {
  color: var(--color-light-blue);
}

/* ───────────────────────────────────────────
   BANDEAU PARTENAIRES (page d'accueil)
─────────────────────────────────────────── */
.partenaires-bandeau {
  padding: 40px 0;
  margin-top: 2rem;
}

/* Fenêtre visible du slider (masque les pages hors-champ) */
.partenaires-bandeau__viewport {
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.partenaires-bandeau__viewport::-webkit-scrollbar {
  display: none;
}

/* Piste : les pages se placent toujours côte à côte
   (jamais de retour à la ligne ici), c'est ce qui permet
   de faire glisser horizontalement d'une page à l'autre */
.partenaires-bandeau__logos {
  display: flex;
  flex-wrap: nowrap;
}

/* À l'intérieur d'une page en revanche, les logos
   retournent à la ligne + sont centrés (y compris la
   dernière ligne incomplète) */
.partenaires-bandeau__page {
  flex: 0 0 100%;
  width: 100%;
  scroll-snap-align: start;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 40px;
}

/* 5 logos max par ligne (desktop) — largeur calculée pour que
   le 6e logo passe toujours à la ligne suivante */
.partenaires-bandeau__logo {
  display: flex;
  justify-content: center;
  flex: 0 0 calc(20% - 32px);
}

/* Cadre fixe : garantit que chaque logo garde ses proportions
   (pas de déformation) quelle que soit sa taille d'origine */
.partenaires-bandeau__logo-frame {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 140px;
  height: 70px;
}

.partenaires-bandeau__logo-frame img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

/* Points de pagination du slider */
.partenaires-bandeau__dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 20px;
}

.partenaires-bandeau__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: none;
  padding: 0;
  background: rgba(255, 255, 255, 0.35);
  cursor: pointer;
  transition: background var(--transition);
}

.partenaires-bandeau__dot.is-active {
  background: var(--color-orange);
}

@media (max-width: 600px) {
  .partenaires-bandeau__page {
    gap: 24px;
  }

  /* 3 logos max par ligne (mobile), plus gros */
  .partenaires-bandeau__logo {
    flex: 0 0 calc(33.333% - 16px);
  }

  .partenaires-bandeau__logo-frame {
    width: 100px;
    height: 60px;
  }
}

/* ───────────────────────────────────────────
   BUTTONS
─────────────────────────────────────────── */
.btn {
  display: inline-block;
  padding: 10px 20px;
  border-radius: var(--radius-sm);
  font-weight: 700;
  font-size: var(--size-sm);
  text-transform: lowercase;
  cursor: pointer;
  transition: opacity var(--transition);
  border: none;
  font-family: var(--font-titre);
}

.btn:hover {
  opacity: 0.85;
}

.btn--primary {
  background: var(--color-orange);
  color: var(--color-white);
}

.btn--outline {
  background: transparent;
  border: 2px solid var(--color-dark);
  color: var(--color-dark);
}

.btn--small {
  padding: 6px 14px;
  font-size: var(--size-xs);
}

.btn--white {
  background: var(--color-white);
  color: var(--color-dark);
}

/* Lien règlement dans les blocs de participation — même style que texte consent */
.participation-bloc .btn--outline.btn--small {
  font-family: var(--font-texte);
  font-size: var(--size-sm);
  font-weight: 400;
  color: #888;
  line-height: 1.6;
  letter-spacing: 0;
  text-transform: none;
  border: none;
  background: transparent;
  padding: 0;
  display: inline;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
  margin-bottom: 0;
}

/* ───────────────────────────────────────────
   BADGES
─────────────────────────────────────────── */
.badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: var(--size-sm);
  font-weight: 700;
  text-transform: lowercase;
}

.badge--competition {
  background: transparent;
  color: var(--color-orange) !important;
  font-family: var(--font-texte);
  font-weight: 700;
  font-size: var(--size-xs);
  padding: 2px 8px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.badge--complet {
  background: var(--color-dark);
  color: var(--color-white);
}

.badge--president {
  background: var(--color-orange);
  color: var(--color-white);
}

/* ───────────────────────────────────────────
   SECTION LABELS
─────────────────────────────────────────── */
.section-label {
  font-size: var(--size-subtitle);
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin: 40px 0 16px;
  color: var(--color-dark);
}

/* Mot de la présidente — accueil : 14px */
.accueil-mot-pres .section-label {
  font-size: var(--size-subtitle);
  text-transform: none;
  letter-spacing: 0;
}

.nos-actions-intro~.section-label {
  color: var(--color-white) !important;
}

/* ───────────────────────────────────────────
   CARTES FILMS / ATELIERS
─────────────────────────────────────────── */
.cartes-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
}

.carte {
  background: var(--color-white);
  border-radius: var(--radius);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  justify-content: space-between;
}

.carte--film.carte--competition {
  background: var(--color-orange);
  color: var(--color-white);
}

.carte--film.carte--competition .btn {
  background: var(--color-white);
  color: var(--color-dark);
}

.carte--film.carte--dark {
  background: var(--color-dark);
  color: var(--color-white);
}

.carte h4 {
  font-size: 16px;
  font-weight: 800;
  line-height: 1.2;
}

.carte p {
  color: var(--color-dark);
}

.carte__meta {
  font-size: 14px;
  color: var(--color-dark);
}

.carte__lieu {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.carte__heure {
  font-size: 16px;
  font-weight: 800;
}

/* ───────────────────────────────────────────
   ONGLETS JOURS
─────────────────────────────────────────── */
.jours-tabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 24px 0;
}

.jour-tab {
  padding: 8px 16px;
  border-radius: var(--radius-sm);
  background: transparent;
  border: 2px solid var(--color-dark);
  font-family: var(--font-main);
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  transition: all var(--transition);
  text-transform: uppercase;
}

.jour-tab--active,
.jour-tab:hover {
  background: var(--color-dark);
  color: var(--color-white);
}

/* Grand titre du jour — ex "25 JUILLET" en fond dark */
.jour-titre {
  font-size: clamp(28px, 5vw, 52px);
  font-weight: 800;
  text-transform: uppercase;
  margin: 24px 0 32px;
  background: var(--color-dark);
  color: var(--color-white);
  display: inline-block;
  padding: 8px 20px;
  border-radius: var(--radius-sm);
}

.jour-contenu {
  display: none;
}

.jour-contenu--visible {
  display: block;
}

/* ───────────────────────────────────────────
   JURYS
─────────────────────────────────────────── */
.jury-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 16px;
  margin-bottom: 32px;
}

.jury-carte {
  background: var(--color-orange);
  color: var(--color-white);
  border-radius: var(--radius);
  padding: 24px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-start;
  min-height: 200px;
}

.jury-carte--president {
  position: relative;
}

.jury-carte--light {
  background: var(--color-light-blue);
  color: var(--color-dark);
}

.jury-carte img {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  object-fit: cover;
}

.jury-carte strong {
  font-size: 18px;
  font-weight: 800;
}

.jury-carte span {
  font-size: 12px;
  color: var(--color-dark);
  text-transform: uppercase;
}

/* ───────────────────────────────────────────
   RENCONTRES
─────────────────────────────────────────── */
.rencontres-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 16px;
}

.rencontre-carte {
  background: var(--color-white);
  border-radius: var(--radius);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  color: var(--color-dark);
}

.rencontre-carte__date {
  font-size: 28px;
  font-weight: 800;
}

.rencontre-carte__heure {
  font-size: 13px;
  font-weight: 700;
}

.rencontre-carte img {
  width: 100%;
  height: 120px;
  object-fit: cover;
  border-radius: var(--radius-sm);
  margin: 8px 0;
}

.rencontre-carte__role {
  font-size: 11px;
  text-transform: uppercase;
  color: var(--color-dark);
}

/* ───────────────────────────────────────────
   HOME GALLERY
─────────────────────────────────────────── */
/* ───────────────────────────────────────────
   CARROUSEL GÉNÉRIQUE (.lama-carousel)
   Utilisé sur : page Festival (photos) et page Accueil (affiches)
   Navigation : boutons < > et scroll horizontal natif
─────────────────────────────────────────── */
.lama-carousel {
  position: relative;
  overflow: hidden;
  padding: 0 0 32px;
}

.lama-carousel__track {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: 4px;
}

.lama-carousel__track::-webkit-scrollbar {
  display: none;
}

.lama-carousel__slide {
  flex-shrink: 0;
  scroll-snap-align: start;
  border-radius: var(--radius);
  overflow: hidden;
  line-height: 0;
}

/* Carrousel festival : marges latérales sur le TRACK (pas le wrapper)
   pour que overflow:hidden ne rogne pas les slides en début/fin de scroll */
#carousel-festival {
  padding-left: 0;
  padding-right: 0;
}

#carousel-festival .lama-carousel__track {
  padding-left: 24px;
  padding-right: 24px;
  scroll-padding-inline-start: 24px;
}

#carousel-festival .lama-carousel__slide {
  width: auto;
}

#carousel-festival .lama-carousel__slide img {
  height: 260px;
  width: auto;
  object-fit: cover;
}

/* Carrousel accueil : affiches */
.gallery-affiches.lama-carousel__track {}

.gallery-affiches img {
  height: 240px;
  width: auto;
  border-radius: var(--radius);
  flex-shrink: 0;
}

/* Boutons < > — toujours visibles si le carrousel peut scroller */
.lama-carousel__btn {
  position: absolute;
  top: 50%;
  transform: translateY(calc(-50% - 16px));
  background: rgba(29, 29, 27, .75);
  color: var(--color-white);
  border: none;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .2s, opacity .2s;
}

.lama-carousel__btn:hover {
  background: var(--color-orange);
}

.lama-carousel__btn--prev {
  left: 12px;
}

.lama-carousel__btn--next {
  right: 12px;
}

/* Caché uniquement quand rien à scroller dans cette direction
   (JS ajoute .is-at-start / .is-at-end) */
.lama-carousel__btn--prev.is-at-start,
.lama-carousel__btn--next.is-at-end {
  opacity: .25;
  pointer-events: none;
}

/* Caché si le carrousel n'a pas besoin de scroll du tout */
.lama-carousel.no-scroll .lama-carousel__btn {
  display: none;
}


/* ───────────────────────────────────────────
   FORMULAIRES
─────────────────────────────────────────── */
.participation-bloc {
  margin-bottom: 60px;
}

.participation-bloc h2 {
  font-size: var(--size-subtitle);
  font-weight: 800;
  text-transform: uppercase;
  margin-bottom: 0;
  color: var(--color-white);
}

.container-bloc__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}

.lama-reglement-link {
  font-family: var(--font-texte);
  font-size: 12px;
  font-weight: 700;
  color: inherit;
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
}

.lama-reglement-link:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.form-ferme,
.form-bientot {
  display: none;
}



/* ───────────────────────────────────────────
   PRESSE
─────────────────────────────────────────── */
.articles-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 16px;
}

.article-carte {
  background: var(--color-white);
  border-radius: var(--radius);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.article-carte__date {
  font-size: 12px;
  font-weight: 700;
  color: var(--color-orange);
}

.article-carte h3 {
  font-size: 16px;
  font-weight: 800;
}

.article-carte p {
  font-size: 13px;
  color: var(--color-dark);
  line-height: 1.6;
}

.article-carte__lien {
  margin-top: auto;
  font-size: 13px;
  font-weight: 700;
  color: var(--color-orange);
}

.revues-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin-bottom: 40px;
}

.revue-carte {
  background: var(--color-beige);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  display: flex;
  flex-direction: column;
}

.revue-carte__body {
  flex: 1;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.revue-carte h3 {
  font-size: var(--size-subtitle);
  font-weight: 800;
  margin: 0;
  color: var(--color-dark) !important;
}

.revue-carte__media {
  font-size: var(--size-sm);
  font-weight: 700;
  color: var(--color-dark) !important;
}

.revue-carte__extrait {
  font-size: var(--size-regular);
  color: var(--color-dark) !important;
  line-height: 1.6;
  flex: 1;
  margin: 0;
}

.revue-carte__footer {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-top: auto;
  padding-top: 16px;
}

.revue-carte__date {
  font-size: var(--size-regular);
  color: var(--color-dark);
  font-weight: 600;
}

.revue-carte__lien {
  font-size: var(--size-sm);
  font-weight: 700;
  color: var(--color-dark) !important;
  text-decoration: none;
  flex-shrink: 0;
}

.revue-carte__lien:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.revue-carte__img {
  width: 100%;
  height: 160px;
  object-fit: cover;
  border-radius: var(--radius-sm);
  display: block;
  flex-shrink: 0;
}

/* ══ Carrousels page presse ══════════════════════════════════════════ */

/* Annule les styles image du slide générique */
.presse-carousel__slide {
  line-height: normal;
  overflow: visible;
  display: flex;
  flex-direction: column;
}

/* Communiqués : 3 visibles, même proportion que l'ancienne grille 4 col */
.presse-communiques-carousel .presse-carousel__slide {
  width: calc(33.333% - 8px);
  min-width: calc(33.333% - 8px);
}

.presse-communiques-carousel .action-carte {
  flex: 1;
  height: 100%;
}

/* Revues : 2 visibles, identique à l'ancienne revues-grid */
.presse-revues-carousel .presse-carousel__slide {
  width: calc(50% - 8px);
  min-width: calc(50% - 8px);
}

.presse-revues-carousel .revue-carte {
  flex: 1;
  height: 100%;
}

.presse-revues-label {
  color: var(--color-white) !important;
}

/* Responsive */
@media (max-width: 900px) {
  .presse-communiques-carousel .presse-carousel__slide {
    width: calc(50% - 8px);
    min-width: calc(50% - 8px);
  }
}

@media (max-width: 600px) {

  .presse-communiques-carousel .presse-carousel__slide,
  .presse-revues-carousel .presse-carousel__slide {
    width: 85%;
    min-width: 85%;
  }
}

/* ───────────────────────────────────────────
   ACCRÉDITATION PRESSE
─────────────────────────────────────────── */
.accred-bloc {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  align-items: stretch;
  margin-top: 40px;
}

.accred-bloc__card {
  background: var(--color-light-blue);
  border-radius: var(--radius);
  padding: 28px;
  display: flex;
  flex-direction: column;
}

.accred-bloc__card h3 {
  font-size: 2rem;
  font-weight: 800;
  margin-bottom: 12px;
  color: var(--color-dark);
}

.accred-bloc__footer {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-top: auto;
  padding-top: 20px;
}

.accred-bloc__date {
  font-size: 14px;
  color: var(--color-dark) !important;
  font-weight: 600;
  margin: 0;
}

.accred-bloc__lien {
  font-size: 14px;
  font-weight: 700;
  color: var(--color-dark);
  text-decoration: none;
  flex-shrink: 0;
}

.accred-bloc__lien:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.accred-bloc__img {
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: cover;
  border-radius: var(--radius);
  display: block;
}

/* ───────────────────────────────────────────
   INFOS PRATIQUES — TRANSPORTS & HÉBERGEMENTS
─────────────────────────────────────────── */
.transports-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-bottom: 48px;
}

.transport-col {
  background: var(--color-white);
  border-radius: var(--radius);
  padding: 24px;
}

.transport-col h3 {
  font-weight: 800;
  margin-bottom: 12px;
  text-transform: uppercase;
  font-size: 14px;
}

.hebergements-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.hebergement-ville h4 {
  font-weight: 800;
  color: var(--color-orange);
  margin-bottom: 8px;
}

.hebergement-item {
  font-size: 13px;
  margin-bottom: 4px;
}

/* ───────────────────────────────────────────
   INFOS PRATIQUES — SUR PLACE LAYOUT
─────────────────────────────────────────── */
.surplace-layout {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 48px;
  align-items: start;
}

.surplace-lieux {
  min-width: 0;
}

.surplace-sticky {
  position: sticky;
  top: 100px;
  align-self: start;
}

.surplace-sticky__inner {
  background: var(--color-beige);
  border-radius: var(--radius);
  padding: 28px 24px;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
}

.surplace-sticky__inner div p {
  color: var(--color-dark);
}

/* Caché sur desktop */
.surplace-sticky--mobile-only {
  display: none;
}

.lieu-fiche {
  margin-bottom: 24px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.lieu-fiche__img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  display: block;
  border-radius: var(--radius);
}

.lieu-fiche__body {
  background: var(--color-white);
  border-radius: var(--radius);
  padding: 20px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
  color: var(--color-dark);
}

.lieu-fiche__body div,
.lieu-fiche__body p,
.lieu-fiche__body [style*="opacity"] {
  color: var(--color-dark) !important;
  opacity: 1 !important;
  mix-blend-mode: normal !important;
}

.lieu-fiche__body h3 {
  font-size: 18px;
  font-weight: 800;
  margin-bottom: 10px;
  color: var(--color-dark) !important;
}

.tarifs-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 16px;
}

/* Mercatu prend toute la largeur */
.tarif-item--mercatu {
  grid-column: 1 / -1;
}

.tarif-item {
  background: var(--color-orange);
  border-radius: var(--radius-sm);
  padding: 14px 12px;
  text-align: center;
}

.tarif-item__prix {
  font-size: 26px;
  font-weight: 900;
  color: var(--color-dark);
  line-height: 1;
  margin-bottom: 4px;
}

.tarif-item__label {
  font-size: 11px;
  color: var(--color-dark);
  line-height: 1.3;
}

.plan-village-img {
  width: 50%;
}

@media (max-width: 600px) {
  .plan-village-img {
    width: 100%;
  }
}


/* ───────────────────────────────────────────
   ACTIONS
─────────────────────────────────────────── */
.actions-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.action-carte {
  background: var(--color-white);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  display: flex;
  flex-direction: row;
  align-items: stretch;
  min-height: 15rem;
  width: 100%;
}

.action-carte__content {
  flex: 1;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.action-carte h3 {
  font-size: var(--size-card-title);
  font-weight: 800;
  margin: 0;
  color: var(--color-dark);
}

.action-carte__excerpt {
  font-size: 13px;
  color: var(--color-dark);
  line-height: 1.5;
  margin: 0;
  flex: 1;
}

.action-carte p {
  font-size: var(--size-regular);
  color: var(--color-dark);
  line-height: 1.5;
  margin: 0;
}

.action-carte__footer {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-top: auto;
  padding-top: 12px;
}

.action-carte__date {
  font-size: 12px;
  color: var(--color-dark);
  font-weight: 600;
  margin: 0;
}

.action-carte__lien {
  font-size: var(--size-sm);
  font-weight: 700;
  color: var(--color-dark);
  text-decoration: none;
  flex-shrink: 0;
}

.action-carte__lien:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.action-carte__img {
  width: 200px;
  min-height: 160px;
  object-fit: cover;
  flex-shrink: 0;
  border-radius: 0 var(--radius) var(--radius) 0;
  display: block;
}

.presse-actualite-carte {
  flex-direction: column;
  height: fit-content;
  width: 100%;
}

.presse-actualite-carte .action-carte__content {
  width: 100%;
}

.action-carte--cta {
  background: var(--color-orange);
  color: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 18px;
  font-weight: 800;
  padding: 20px;
  min-height: 200px;
}

/* ───────────────────────────────────────────
   EQUIPE (A SQUADRA)
─────────────────────────────────────────── */
.squadra-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px 48px;
}

.squadra-item {
  font-size: 14px;
  padding: 4px 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.squadra-item strong {
  color: var(--color-light-blue);
}

.squadra-extra {
  margin-top: 24px;
}

/* ───────────────────────────────────────────
   FOOTER — NOIR #1d1d1b SANS DÉGRADÉ
   La transition visuelle est assurée par
   .section-montagne qui se termine en #1A1A2E
   juste au-dessus du footer.
─────────────────────────────────────────── */
.site-footer {
  background: var(--color-footer);
  color: var(--color-white);
  padding: 10px 0 32px;
  position: relative;
  z-index: 2;
}

/* ── Footer : 4 colonnes sur une ligne ──
   brand (logo+adresse) | pages-a | pages-b | réseaux */
.site-footer__inner {
  display: grid;
  grid-template-columns: auto 1fr 1fr auto;
  grid-template-areas: "brand  pages-a  pages-b  reseaux";
  gap: 40px;
  align-items: start;
  margin-bottom: 48px;
}

.site-footer__brand {
  grid-area: brand;
}

.site-footer__col--reseaux {
  grid-area: reseaux;
}

.site-footer__col--reseaux ul,
.site-footer__col--reseaux div {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.site-footer__col--pages-a {
  grid-area: pages-a;
}

.site-footer__col--pages-b {
  grid-area: pages-b;
}

/* Pages : liste verticale */
.footer-pages-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  list-style: none;
}

/* Mentions légales — espacement entre les liens */
.footer-legal-links {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}

.site-footer__brand .logo {
  height: 60px;
  width: auto;
  max-width: 240px;
  margin-bottom: 16px;
}

.site-footer__brand address {
  font-style: normal;
  font-size: var(--size-sm);
  color: var(--color-white);
  line-height: 1.9;
}

.site-footer__col h4 {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 16px;
  color: var(--color-white);
}

.site-footer__col ul {
  list-style: none;
}

.site-footer__col ul li {
  margin-bottom: 8px;
}

.site-footer__col ul li a {
  font-size: var(--size-sm);
  color: var(--color-white);
  text-decoration: none;
  transition: opacity var(--transition), color var(--transition);
}

.site-footer__col ul li a:hover {
  opacity: 1;
  color: var(--color-orange);
}

.site-footer__bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding-top: 24px;
  display: flex;
  justify-content: space-between;
  align-items: start;
  font-size: 12px;
  color: var(--color-white);
  flex-wrap: wrap;
  gap: 16px;
}

.site-footer__bottom span {
  text-align: left;
}

.footer-legal-links {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
}

.site-footer__bottom a {
  color: inherit;
  text-decoration: none;
}

.site-footer__bottom a:hover {
  opacity: 1;
  color: var(--color-orange);
}

/* ───────────────────────────────────────────
   PAGE PROGRAMME CACHÉ / TERMINÉ
─────────────────────────────────────────── */
.programme-bientot {
  text-align: center;
  padding: 80px 24px;
}

.programme-bientot h1 {
  font-size: 36px;
  font-weight: 800;
  margin-bottom: 16px;
}

.programme-bientot p {
  font-size: 18px;
  opacity: 0.7;
}

/* ───────────────────────────────────────────
   404
─────────────────────────────────────────── */
.page-404 {
  min-height: 60vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 80px 24px;
  color: var(--color-white);
}

.page-404 h1 {
  font-size: 80px;
  font-weight: 800;
}

.page-404 p {
  font-size: 16px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 32px;
}

/* ───────────────────────────────────────────
   POPUP INSCRIPTION ATELIER
─────────────────────────────────────────── */
#popup-inscription {
  display: none;
  position: fixed;
  inset: 0;
  z-index: var(--z-popup);
}

#popup-inscription.is-open {
  display: block;
}

.popup-overlay {
  position: absolute;
  inset: 0;
  background: rgba(26, 26, 46, 0.75);
  backdrop-filter: blur(4px);
}

.popup-box {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: var(--color-beige);
  border-radius: var(--radius);
  padding: 40px 36px 36px;
  width: 100%;
  max-width: 480px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
}

.popup-close {
  position: absolute;
  top: 16px;
  right: 16px;
  background: none;
  border: none;
  font-size: 18px;
  cursor: pointer;
  opacity: .4;
}

.popup-close:hover {
  opacity: 1;
}

.popup-box h2 {
  font-size: 22px;
  font-weight: 800;
  margin-bottom: 4px;
  font-family: var(--font-titre);
}

.popup-atelier-nom {
  font-size: 13px;
  font-weight: 700;
  color: var(--color-orange);
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-bottom: 24px;
}

.popup-form label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 16px;
}

.popup-form input,
.popup-form textarea {
  padding: 10px 14px;
  border: 2px solid rgba(0, 0, 0, .12);
  border-radius: var(--radius-sm);
  font-family: var(--font-main);
  font-size: 14px;
  background: #f7f6f6;
  transition: border-color var(--transition);
  width: 100%;
}

.popup-form input:focus,
.popup-form textarea:focus {
  outline: none;
  border-color: var(--color-orange);
}

.popup-form textarea {
  resize: vertical;
  min-height: 80px;
}

.popup-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.req {
  color: var(--color-orange);
}

.opt {
  font-weight: 400;
  opacity: .5;
  font-size: 11px;
}

.popup-feedback {
  font-size: 13px;
  font-weight: 600;
  min-height: 20px;
  margin-bottom: 12px;
  border-radius: var(--radius-sm);
  padding: 0;
}

.popup-feedback--error {
  color: #c62828;
  background: #ffebee;
  padding: 10px 14px;
}

.popup-submit {
  width: 100%;
  padding: 14px;
  font-size: 14px;
}

.btn--inscrit {
  background: #2e7d32 !important;
  cursor: default;
}

.popup-success {
  text-align: center;
  padding: 32px 0;
}

.popup-success-icon {
  font-size: 56px;
  color: var(--color-orange);
  line-height: 1;
  margin-bottom: 16px;
}

.popup-success-msg {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.6;
}

/* ───────────────────────────────────────────
   PAGE SIMPLE (mentions légales, crédits...)
─────────────────────────────────────────── */
.page-simple {
  padding-top: 60px;
  padding-bottom: 100px;
}

.page-simple__inner {
  max-width: 720px;
  margin: 0 auto;
}

.page-simple__inner h1 {
  font-size: var(--size-title);
  font-weight: 800;
  margin-bottom: 48px;
  padding-bottom: 20px;
  border-bottom: 3px solid var(--color-orange);
}

.page-simple__content h2 {
  font-size: var(--size-title-sm);
  font-weight: 800;
  margin-top: 40px;
  margin-bottom: 12px;
}

.page-simple__content h3 {
  font-size: var(--size-subtitle);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-top: 28px;
  margin-bottom: 10px;
  color: var(--color-orange);
}

.page-simple__content p {
  font-size: var(--size-regular);
  line-height: 1.6;
  color: var(--color-dark);
  margin-bottom: 16px;
}

.page-simple__content ul {
  margin: 0 0 16px 20px;
}

.page-simple__content ul li {
  font-size: 14px;
  line-height: 1.8;
  color: var(--color-dark);
  margin-bottom: 6px;
}

.page-simple__content table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  margin-bottom: 24px;
}

.page-simple__content th {
  background: var(--color-dark);
  color: var(--color-white);
  padding: 10px 14px;
  text-align: left;
  font-weight: 700;
}

.page-simple__content td {
  padding: 10px 14px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  vertical-align: top;
  line-height: 1.6;
}

.page-simple__content tr:nth-child(even) td {
  background: rgba(0, 0, 0, 0.02);
}

.page-simple__content hr {
  border: none;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  margin: 48px 0;
}

.page-simple__content a {
  color: var(--color-orange);
  text-decoration: underline;
}

/* ───────────────────────────────────────────
   RESPONSIVE
─────────────────────────────────────────── */
@media (max-width: 900px) {
  .cartes-grid {
    grid-template-columns: repeat(2, 1fr);
  }

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

  .transports-grid {
    grid-template-columns: 1fr;
  }

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

  .revues-grid {
    grid-template-columns: 1fr;
  }

  .accred-bloc {
    grid-template-columns: 1fr;
  }

  .squadra-grid {
    grid-template-columns: 1fr;
  }

  .site-footer__inner {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "brand       brand"
      "pages-a     pages-b"
      "reseaux     reseaux";
    gap: 32px;
  }

  .tarifs-grid {
    grid-template-columns: 1fr;
  }

  .surplace-layout {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .surplace-sticky {
    position: static;
    order: -1;
  }
}

@media (max-width: 600px) {

  .site-header__inner {
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }

  .site-header__inner .site-header__logo {
    justify-self: end;
  }

  .site-header__edition {
    display: none;
  }

  m .site-header__logo .logo-court-noir {
    height: 30px;
  }

  .cartes-grid {
    grid-template-columns: 1fr;
  }

  .actions-grid {
    grid-template-columns: 1fr;
  }

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

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

  .hebergements-grid {
    grid-template-columns: 1fr;
  }

  .site-footer__inner {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "brand       brand"
      "pages-a     pages-b"
      "reseaux     reseaux";
  }

  /* Bottom : colonne simple sur mobile */
  .site-footer__bottom {
    flex-direction: column;
    gap: 8px;
  }

  .footer-legal-links {
    flex-direction: column;
    gap: 6px;
  }

  .popup-box {
    padding: 32px 20px 24px;
  }

  .popup-row {
    grid-template-columns: 1fr;
  }

  /* Montagne mobile : zoom + positionnement plus haut */
  .mountain-sticky {
    overflow: hidden;
  }

  .mountain-sticky svg {
    width: 440%;
    margin-left: -170%;
    height: auto;
  }

  /* Infos pratiques Layout Tarifs Billetterie */
  .surplace-layout {
    grid-template-columns: 1fr;
  }

  .surplace-sticky {
    position: static;
  }

  /* Cache tarifs dans avant sur mobile */
  #tab-surplace-avant .surplace-sticky {
    display: none;
  }

  /* Montre le bloc mobile-only dans apres */
  .surplace-sticky--mobile-only {
    display: block;
  }

  #tab-surplace-apres .surplace-sticky {
    display: none;
  }
}

/* ───────────────────────────────────────────
   CARTES PROGRAMMATION PAR CATÉGORIE
─────────────────────────────────────────── */

/* Activités (ateliers) — blanc */
.carte--activite {
  background: var(--color-white);
  color: var(--color-dark);
}

/* Documentaires — beige */
.carte--documentaire {
  background: var(--color-beige);
  color: var(--color-dark);
}

.carte--documentaire .btn {
  background: var(--color-white);
  color: var(--color-dark);
}

/* Ligne réalisateur | durée | pays en noir + badge compétition en bout de ligne
   (neutralise le mix-blend-mode / couleur blanche forcée par .sunset-zone p,
   qui s'applique sinon à tout <p>, y compris ici) */
.carte--documentaire .carte__meta {
  color: #000 !important;
  mix-blend-mode: normal !important;
}

.carte--documentaire .carte__meta .badge--competition {
  margin-left: 4px;
  mix-blend-mode: normal !important;
}

/* Fictions — bleu clair */
.carte--fiction {
  background: var(--color-light-blue);
  color: var(--color-dark);
}

.carte--fiction.carte--competition {
  background: var(--color-light-blue);
  color: var(--color-dark);
}

/* Pack courts-métrages — bleu clair */
.carte--courts {
  background: var(--color-light-blue);
  color: var(--color-dark);
}

.carte--courts .btn {
  background: var(--color-light-blue);
  color: var(--color-dark);
}

/* Jury documentaire */
.jury-carte--orange {
  background: var(--color-orange);
  color: var(--color-white);
}

/* Rencontre du jour actif — beige */
.rencontre-carte--active {
  background: var(--color-beige, #f5f0e8);
}

/* Date rencontre — même style que h4 film */
.rencontre-carte__date {
  font-size: 16px;
  font-weight: 800;
  line-height: 1.2;
  color: var(--color-dark);
}

/* =============================================================
   LAMA FESTIVAL — CSS Formulaires Forminator
   ============================================================= */

:root {
  --f-display: 'Mattone', serif;
  --f-body: 'Karrik', sans-serif;
  --orange: var(--color-orange);
  --black: var(--color-dark);
  --white: var(--color-white);
  --dark: #1d1d1b;
  --grey: #888888;
  --border: #E0D9CE;

  /* Taille fixe de la card recto (ratio 317/375) */
  --recto-w: 360px;
  --recto-h: calc(var(--recto-w) * 375 / 317);
  /* ≈ 426px */
}

.form-hide-label label {
  display: none !important;
}


/* ════════════════════════════════════════════════════════════
   1. RESET COMMUN
   ════════════════════════════════════════════════════════════ */

.forminator-ui,
.lama-fslot,
.lama-sidebar-consent {
  font-family: var(--f-body);
}

.forminator-ui .forminator-row,
.lama-fslot .forminator-row {
  margin-bottom: 0;
}

.forminator-ui .forminator-field,
.lama-fslot .forminator-field {
  margin-bottom: 0;
  padding-bottom: 20px;
}

/* Labels — Karrik bold noir */
.forminator-ui .forminator-label,
.lama-fslot .forminator-label,
.lama-sidebar-consent .forminator-label {
  display: block;
  font-family: var(--f-body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 5px;
  color: var(--black);
}

.forminator-ui .forminator-required,
.lama-fslot .forminator-required {
  color: var(--orange);
  margin-left: 2px;
}

/* Inputs / textarea — Karrik italic orange */
.forminator-ui .forminator-input,
.forminator-ui .forminator-textarea,
.lama-fslot .forminator-input,
.lama-fslot .forminator-textarea {
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 1.5px solid var(--border);
  border-radius: 0;
  padding: 5px 0 8px;
  font-family: var(--f-body);
  font-size: 14px;
  font-style: italic;
  color: var(--orange);
  outline: none;
  transition: border-color 0.2s;
  box-shadow: none;
  -webkit-appearance: none;
  appearance: none;
}

.forminator-ui .forminator-input:focus,
.forminator-ui .forminator-textarea:focus,
.lama-fslot .forminator-input:focus,
.lama-fslot .forminator-textarea:focus {
  border-bottom-color: var(--orange);
}

.forminator-ui .forminator-input::placeholder,
.forminator-ui .forminator-textarea::placeholder,
.lama-fslot .forminator-input::placeholder,
.lama-fslot .forminator-textarea::placeholder {
  color: #CBBFB4;
  font-style: italic;
}

.forminator-ui .forminator-textarea,
.lama-fslot .forminator-textarea {
  resize: vertical;
  min-height: 90px !important;
}

/* Erreurs champ */
.forminator-ui .forminator-error-message,
.lama-fslot .forminator-error-message {
  font-size: 11px;
  font-family: var(--f-body);
  color: #c0392b;
  margin-top: 4px;
  display: none;
  background: rgba(192, 57, 43, 0.07);
  border: 1px solid #c0392b;
  border-radius: 4px;
  padding: 4px 8px;
  line-height: 1.4;
}

.forminator-ui .forminator-error-message:not(:empty),
.lama-fslot .forminator-error-message:not(:empty) {
  display: block;
}

/* Row interne du champ name-1 (prénom | nom côte à côte) — règle globale */
.forminator-field-name>.forminator-row,
.forminator-field-name .forminator-row {
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 0 24px !important;
  width: 100% !important;
}

.forminator-field-name .forminator-col {
  flex: 1 1 0 !important;
  padding: 0 !important;
  width: auto !important;
  max-width: none !important;
  float: none !important;
}

/* Les forminator-col révélés comme grid items — reset largeur Forminator */
.lama-film-grid>.forminator-col,
.lama-fgrid-2>.forminator-col,
.lama-jury-grid>.forminator-col,
.accred-verso-grid>.forminator-col {
  width: auto !important;
  max-width: none !important;
  padding: 0 !important;
}

/* Bouton natif : invisible mais interactable pour jQuery/Forminator
   display:none empêche l'event delegation jQuery de fonctionner */
.forminator-custom-form-181 .forminator-row-last,
.forminator-custom-form-183 .forminator-row-last,
.forminator-custom-form-185 .forminator-row-last,
.forminator-custom-form-186 .forminator-row-last {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  clip: rect(0, 0, 0, 0) !important;
}

.forminator-edit-module {
  display: none;
}


/* ════════════════════════════════════════════════════════════
   2. MESSAGE DE RÉPONSE — même style que les erreurs champ, en vert
   ════════════════════════════════════════════════════════════ */

/* Masquer le message Forminator natif dans le form — affiché via .lama-msg-slot/.lama-msg-portal */
.forminator-ui .forminator-response-message {
  display: none !important;
}

/* Base commune slot + portail */
.lama-msg-slot,
.lama-msg-portal {
  display: none;
}

/* Message success : même gabarit que .forminator-error-message mais vert */
.lama-msg-slot .forminator-response-message.forminator-success,
.lama-msg-portal .forminator-response-message.forminator-success {
  display: block;
  font-size: 11px;
  font-family: var(--f-body);
  color: #1e7e34;
  margin-top: 4px;
  background: rgba(30, 126, 52, 0.07);
  border: 1px solid #1e7e34;
  border-radius: 4px;
  padding: 4px 8px;
  line-height: 1.4;
}

/* Message d'erreur global masqué — les erreurs sont déjà sous chaque champ */
.lama-msg-slot .forminator-response-message.forminator-error,
.lama-msg-portal .forminator-response-message.forminator-error {
  display: none !important;
}

/* Portail visible quand alimenté */
.lama-msg-portal:not(:empty) {
  display: block;
  margin-bottom: 10px;
}


/* ════════════════════════════════════════════════════════════
   3. CHECKBOX — carré arrondi, contour noir, sans fond, 22px
   ════════════════════════════════════════════════════════════ */

.forminator-ui .forminator-checkbox__wrapper {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.forminator-ui .forminator-checkbox input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}

.forminator-ui .forminator-checkbox-box {
  width: 22px;
  height: 22px;
  min-width: 22px;
  border: 2px solid var(--black);
  border-radius: 5px;
  background: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  margin-top: 1px;
  transition: border-color 0.15s, background 0.15s;
}

.forminator-ui .forminator-checkbox-box:hover {
  border-color: var(--orange);
}

.forminator-ui .forminator-checkbox.forminator-is_checked .forminator-checkbox-box,
.forminator-ui .forminator-checkbox input[type="checkbox"]:checked~.forminator-checkbox-box {
  background: var(--orange);
  border-color: var(--orange);
}

.forminator-ui .forminator-checkbox.forminator-is_checked .forminator-checkbox-box::after,
.forminator-ui .forminator-checkbox input[type="checkbox"]:checked~.forminator-checkbox-box::after {
  content: '';
  width: 10px;
  height: 6px;
  border-left: 2.5px solid #f7f6f6;
  border-bottom: 2.5px solid #f7f6f6;
  transform: rotate(-45deg) translateY(-1px);
  display: block;
}

.forminator-ui .forminator-consent__label p,
.lama-sidebar-consent .forminator-consent__label p {
  font-size: var(--size-sm);
  font-family: var(--f-body);
  color: var(--black);
  line-height: 1.6;
  margin: 0;
}


/* ════════════════════════════════════════════════════════════
   3b. BADGE STATUT dans les h2 (jusqu'au / ouverture / fermé)
   Hérite la police/graisse/taille du h2 parent
   ════════════════════════════════════════════════════════════ */

.lama-form-statut {
  font-size: inherit;
  font-weight: inherit;
  font-family: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  line-height: inherit;
  color: var(--white);
}


/* ════════════════════════════════════════════════════════════
   3c. CONSENT — même design que les checkboxes standard
   ════════════════════════════════════════════════════════════ */

.forminator-ui .forminator-field-consent .forminator-checkbox__wrapper,
.lama-sidebar-consent .forminator-checkbox__wrapper {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.forminator-ui .forminator-field-consent input[type="checkbox"],
.lama-sidebar-consent input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}

.forminator-ui .forminator-field-consent .forminator-checkbox-box,
.lama-sidebar-consent .forminator-checkbox-box {
  width: 22px;
  height: 22px;
  min-width: 22px;
  border: 2px solid var(--black);
  border-radius: 5px;
  background: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  margin-top: 1px;
  transition: border-color 0.15s, background 0.15s;
}

.forminator-ui .forminator-field-consent .forminator-checkbox-box:hover,
.lama-sidebar-consent .forminator-checkbox-box:hover {
  border-color: var(--color-orange);
}


.forminator-ui .forminator-field-consent .forminator-is_checked .forminator-checkbox-box,
.forminator-ui .forminator-field-consent input[type="checkbox"]:checked~.forminator-checkbox-box,
.lama-sidebar-consent .forminator-is_checked .forminator-checkbox-box,
.lama-sidebar-consent input[type="checkbox"]:checked~.forminator-checkbox-box {
  background: var(--color-orange);
  border-color: var(--color-orange);
}

.forminator-ui .forminator-field-consent .forminator-is_checked .forminator-checkbox-box::after,
.forminator-ui .forminator-field-consent input[type="checkbox"]:checked~.forminator-checkbox-box::after,
.lama-sidebar-consent .forminator-is_checked .forminator-checkbox-box::after,
.lama-sidebar-consent input[type="checkbox"]:checked~.forminator-checkbox-box::after {
  content: '';
  width: 10px;
  height: 6px;
  border-left: 2.5px solid #f7f6f6;
  border-bottom: 2.5px solid #f7f6f6;
  transform: rotate(-45deg) translateY(-1px);
  display: block;
}

/* ════════════════════════════════════════════════════════════
   4. BOUTONS
   ════════════════════════════════════════════════════════════ */

.lama-btn {
  display: inline-block;
  padding: 7px 16px;
  font-family: var(--f-body);
  font-size: var(--size-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: 20px;
  cursor: pointer;
  text-align: center;
  transition: background 0.18s, color 0.18s, border-color 0.18s, transform 0.12s;
  line-height: 1;
  border: 2px solid transparent;
  white-space: nowrap;
}

.lama-btn:active {
  transform: translateY(1px);
}

.lama-btn--orange {
  background: var(--color-orange);
  color: var(--color-dark);
  border-color: var(--color-dark);
}

.lama-btn--orange:hover,
.lama-btn--orange:active {
  background: var(--color-dark);
  color: var(--color-orange);
  border-color: var(--color-orange);
}

.lama-btn--ghost {
  background: var(--color-white);
  color: var(--color-dark);
  border-color: var(--color-dark);
}

.lama-btn--ghost:hover,
.lama-btn--ghost:active {
  background: var(--color-dark);
  color: var(--color-white);
  border-color: var(--color-white);
}


/* ════════════════════════════════════════════════════════════
   5. LAYOUT COMMUN — wrapper + sidebar
   ════════════════════════════════════════════════════════════ */

.lama-form-wrapper {
  display: flex;
  gap: 20px;
  align-items: flex-start;
}

.lama-form-card {
  flex: 1;
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  padding: 28px 32px;
}

/* .lama-form-sidebar conservé pour compatibilité mais redirigé via footer */
.lama-form-sidebar {
  display: none;
  /* remplacé par .lama-film-footer */
}

/* Sous-titre sidebar (nom du formulaire en Karrik) */
.lama-sidebar-sub {
  font-family: var(--f-body);
  font-size: var(--size-regular);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-white) !important;
  margin: 0 0 4px;
  line-height: 1.3;
}

/* Texte d'instructions — même taille que le texte consent, couleur héritée du contexte */
.lama-sidebar-instructions {
  font-family: var(--f-body);
  font-size: 12px;
  font-weight: 400;
  color: inherit;
  line-height: 1.6;
  margin: 0;
}

/* "en orange" dans les instructions accréditation */
.lama-instr-orange {
  color: var(--orange);
  font-style: italic;
}

.lama-sidebar-consent .forminator-row {
  display: block !important;
}

.lama-btns {
  display: flex;
  flex-direction: row;
  gap: 8px;
}

.lama-btns .lama-btn {
  width: auto;
}

.lama-form-heading {
  margin-bottom: 22px;
}

.lama-form-heading__title {
  font-family: var(--f-display);
  font-size: var(--size-card-title);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--black);
  display: block;
  line-height: 1.1;
}

.lama-form-heading__sub {
  font-family: var(--f-display);
  font-size: var(--size-xs);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--orange);
  display: block;
  margin-top: 3px;
}

.lama-sep {
  border: none;
  border-top: 1px solid var(--border);
  margin: 4px 0 20px;
}


/* ════════════════════════════════════════════════════════════
   SLOTS — système commun de placement des champs
   ════════════════════════════════════════════════════════════ */

/* Source masquée — position hors écran mais formulaire rendu normalement pour Forminator */
.lama-film-src {
  position: fixed;
  left: -9999px;
  top: 0;
  width: 1px;
  opacity: 0;
  pointer-events: none;
  overflow: hidden;
}

/* Slot receveur : hérite les styles de champ normaux */
.lama-fslot {
  min-height: 0;
}

.lama-fslot .forminator-field {
  padding-bottom: 20px;
}

/* Grille de base films : 3 colonnes */
.lama-film-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0 20px;
  align-items: start;
}

/* Rangée 2 colonnes qui s'étale sur 3 col */
.lama-frow-2 {
  grid-column: 1 / -1;
}

/* Grille interne 2 colonnes */
.lama-fgrid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 20px;
  align-items: start;
}

/* Grille jury : 2 colonnes */
.lama-jury-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 24px;
  align-items: start;
}

/* Champ name-1 : pleine largeur dans la grille */
.lama-jury-grid .lama-fslot--name,
.accred-verso-grid .lama-fslot--name {
  grid-column: 1 / -1;
  width: 100%;
  box-sizing: border-box;
  overflow: hidden;
}

/* Toutes les rows et cols intermédiaires → reset total */
.lama-fslot--name .forminator-row,
.lama-fslot--name [class*="forminator-col"] {
  padding: 0 !important;
  margin: 0 !important;
  float: none !important;
  box-sizing: border-box !important;
}

/* La row externe (col-12 wrapper) → block, largeur totale */
.lama-fslot--name>.forminator-row {
  display: block !important;
  width: 100% !important;
}

.lama-fslot--name>.forminator-row>[class*="forminator-col"] {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
}

/* La row interne du champ name-1 (forminator-no-margin) → flex côte à côte
   Même gap que les autres paires de champs dans la grille (24px) */
.lama-fslot--name .forminator-field-name [data-multiple="true"],
.lama-fslot--name [data-multiple="true"] {
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 0 24px !important;
  width: 100% !important;
}

/* Les deux cols prénom / nom → même largeur, 0 padding */
.lama-fslot--name [data-multiple="true"]>[class*="forminator-col"] {
  flex: 1 1 0 !important;
  width: 0 !important;
  max-width: none !important;
  min-width: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}

.lama-fslot--name .forminator-field {
  padding-bottom: 20px;
}

/* Motivations jury : pleine largeur */
.lama-jury-grid .lama-col-full {
  grid-column: 1 / -1;
}

/* Grille verso accréditation : 2 colonnes */
.accred-verso-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 24px;
  align-items: start;
  flex: 1;
}

/* Message de réponse Forminator :
   - Masqué dans le formulaire (déplacé par JS dans .lama-msg-slot)
   - Dans le slot : visible seulement si erreur, masqué si succès vide */
.lama-msg-slot .forminator-response-message.forminator-success:empty,
.lama-msg-slot .forminator-response-message.forminator-success:not(:has(*)):not([style*="display"]) {
  display: none;
}

.lama-msg-slot:not(:has(.forminator-response-message:not(:empty))) {
  display: none;
}

/* ════════════════════════════════════════════════════════════
   6. GRILLES FILMS (181 / 183) — deux cards distinctes

   Card 1 — .lama-film-card-1 :
     Grille 3 colonnes de base
     L1 : titre(1/1) | année(1/2) | durée(1/3)     → 3 col naturelles
     L2 : nom-réal(2/1) | prénom-réal(2/2)          → sous-grille 2 col
     L3 : cadre(3/1) | lien(3/2)                    → sous-grille 2 col
     L4 : mdp(4/1) | vide(4/2)                      → sous-grille 2 col

   Card 2 — .lama-film-card-2 :
     Grille 3 colonnes de base
     L1 : synopsis(1/1 → span 3)                    → pleine largeur
     L2 : équipe(2/1) | contact(2/2)                → sous-grille 2 col
     L3 : adresse(3/1) | email(3/2) | tel(3/3)      → 3 col naturelles
   ════════════════════════════════════════════════════════════ */

/* Wrapper deux cards films côte à côte + sidebar */
.lama-film-wrapper {
  display: flex;
  gap: 20px;
  align-items: flex-start;
}

/* Wrapper neutre pour le form film (rendu directement dans le flux) */
.lama-film-ui,
.lama-jury-ui,
.accred-form-ui {
  display: block;
}

/* Flex des deux cards créé par JS dans le <form> */
.lama-film-cards-flex {
  display: flex;
  gap: 20px;
  align-items: flex-start;
}

/* Chacune des deux cards */
.lama-film-card-1,
.lama-film-card-2 {
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  padding: 28px 32px;
}

/* Card 1 : flex pour prendre 55% */
.lama-film-card-1 {
  flex: 0 0 55%;
}

/* Card 2 : flex pour prendre le reste */
.lama-film-card-2 {
  flex: 1;
}

/* Les cartes film sont maintenant créées par JS dans le <form>.
   Le form lui-même est display:block ; la grille est sur .lama-film-grid. */

/* Sous-grilles 2 col (wrappées par JS) */
.lama-grid-2 {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 20px;
}

/* Pleine largeur (synopsis) */
.lama-col-full {
  grid-column: 1 / -1;
}

/* Séparateur dans la grille */
.lama-film-sep {
  grid-column: 1 / -1;
  border: none;
  border-top: 1px solid var(--border);
  margin: 4px 0 20px;
  height: 0;
}

/* Boutons sous les deux cards */
.lama-film-actions {
  display: flex;
  gap: 10px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}

.lama-film-actions .lama-btn {
  width: auto;
  flex: 0 0 auto;
}

/* Sidebar films — consent + message seulement (pas de boutons) */
/* Pied de formulaire film — sous les cards */
.lama-film-footer {
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.black-zone .participation-bloc .lama-sidebar-instructions,
.black-zone .participation-bloc .lama-sidebar-instructions *,
.black-zone .participation-bloc .lama-sidebar-consent,
.black-zone .participation-bloc .lama-sidebar-consent * {
  color: var(--color-white);
}

.black-zone .participation-bloc .forminator-checkbox-box {
  border-color: var(--color-white);
}

.participation-bloc:nth-of-type(n+1) .forminator-checkbox-box:hover {
  border-color: var(--color-orange);
}

.lama-footer-text {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Consent au-dessus, boutons sur la même ligne en dessous */
.lama-footer-consent-btns {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}

.lama-footer-consent-btns .lama-sidebar-consent {
  width: 100%;
}

.lama-footer-consent-btns .lama-btns {
  width: auto;
}

.lama-film-footer .lama-sidebar-consent .forminator-row,
.lama-film-footer .lama-sidebar-consent .forminator-field-consent .forminator-row {
  display: block !important;
}

/* ════════════════════════════════════════════════════════════
   7. GRILLE JURY (185) — 2 col × 3 lignes + motivations full
   ════════════════════════════════════════════════════════════ */

/* Form 185 : la grille est sur .lama-jury-grid (créée dans le form par JS) */

.lama-jury-motiv {
  grid-column: 1 / -1;
}


/* ════════════════════════════════════════════════════════════
   8. ACCRÉDITATION — cards recto et verso de même hauteur
   ════════════════════════════════════════════════════════════ */

.accred-outer {
  display: flex;
  gap: 20px;
  align-items: flex-start;
}

/* Les deux cards sont dans .accred-cards-area en flex stretch */
.accred-cards-area {
  display: flex;
  gap: 12px;
  align-items: stretch;
  /* même hauteur */
  flex: 1;
}

.accred-card-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

/* Recto : largeur fixe, hauteur héritée de align-items:stretch */
.accred-card-col:first-child {
  flex: 0 0 var(--recto-w);
}

.accred-card-col--verso {
  flex: 1;
  align-items: stretch;
}

/* Tag Recto / Verso */
.accred-card-tag {
  font-family: var(--f-body);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: #f7f6f6;
  border: 1.5px solid #f7f6f6;
  border-radius: 20px;
  padding: 3px 14px;
  align-self: center;
  flex-shrink: 0;
}

/* ── Card RECTO — fond blanc, textes centrés ── */
.accred-card-recto {
  width: 100%;
  /* hérite la largeur du col */
  min-height: var(--recto-h);
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  flex: 1;
  /* s'étire pour matcher le verso */
}

.accred-card-recto__body {
  flex: 1;
  padding: 28px 24px 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.accred-card-recto__name {
  font-family: var(--f-display);
  font-size: 18px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--black);
  line-height: 1.1;
}

.accred-card-recto__dates {
  font-family: var(--f-body);
  font-size: 11px;
  font-weight: 400;
  color: var(--grey);
  letter-spacing: 0.06em;
  margin-top: 6px;
}

.accred-card-recto__edition {
  font-family: var(--f-display);
  font-size: 84px;
  font-weight: 700;
  color: var(--black);
  line-height: 1;
  margin-top: auto;
  padding-top: 10px;
  text-align: center;
}

.accred-card-recto__edition sup {
  font-size: 0.28em;
  vertical-align: super;
  font-weight: 700;
  font-family: var(--f-display);
}

/* Logo entre 32e et sélecteur de type */
.accred-card-recto__logo {
  padding: 16px 24px;
  display: flex;
  justify-content: center;
  width: 100%;
}

.accred-card-recto__logo img {
  height: 48px;
  width: auto;
  opacity: 1;
  display: block;
}

/* Sélecteur de type */
.accred-type-selector {
  position: relative;
}

.accred-type-dropdown {
  position: absolute;
  bottom: 100%;
  left: 0;
  right: 0;
  background: var(--dark);
  overflow: hidden;
  display: none;
  z-index: 20;
  border-radius: 8px 8px 0 0;
}

.accred-type-dropdown.is-open {
  display: block;
}

.accred-type-option {
  display: block;
  width: 100%;
  padding: 12px 20px;
  background: transparent;
  color: rgba(255, 255, 255, 0.6);
  font-family: var(--f-main);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  cursor: pointer;
  text-align: left;
  transition: background 0.15s, color 0.15s;
}

.accred-type-option:last-child {
  border-bottom: none;
}

.accred-type-option:hover {
  color: #1d1d1b;
  background: #f7f6f6c5;
}

.accred-type-option.is-active {
  color: #1d1d1b;
  background: #f7f6f6;
}

.accred-type-btn {
  display: block;
  width: 100%;
  padding: 16px 20px;
  color: #1d1d1b;
  background: var(--accred-color, var(--orange));
  font-family: var(--font-main);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border: none;
  cursor: pointer;
  text-align: center;
  transition: filter 0.15s;
}

.accred-type-btn:hover {
  filter: brightness(0.88);
}

[data-accred-type="presse"] {
  --accred-color: #E35210;
}

[data-accred-type="invite"] {
  --accred-color: #BBE3F4;
}

[data-accred-type="partenaire"] {
  --accred-color: #F9D5B1;
}

[data-accred-type="habitant"] {
  --accred-color: #1d1d1b;
}

/* ── Card VERSO — même hauteur que recto via flex stretch ── */
.accred-card-verso {
  width: 100%;
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: 14px;
  padding: 24px 28px;
  display: flex;
  flex-direction: column;
  flex: 1;
  /* s'étire pour matcher le recto */
}

.accred-card-verso .accred-verso-title {
  font-family: var(--f-display);
  font-size: 18px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--black) !important;
  mix-blend-mode: normal !important;
  margin: 0 0 18px;
  flex-shrink: 0;
}

/*
  Grille verso accréditation :
  L1 : nom(1/1)       | prénom(1/2)
  L2 : email(2/1)     | tel(2/2)
  L3 : structure(3/1) | fonction(3/2)
*/
/* Form 186 : la grille est sur .accred-verso-grid (créée dans le form par JS) */

/* Le select-1 et row-last sont masqués par JS ; garder en fallback CSS */
.accred-form-ui .forminator-row-last {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  clip: rect(0, 0, 0, 0) !important;
}

/* Cacher select-1 et Select2 sans display:none (Forminator appelle .offset() dessus) */
.accred-form-ui [id="select-1"],
.accred-form-ui .forminator-row:has([name="select-1"]),
.accred-form-ui #select-1,
.accred-form-ui .select2-container {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  clip: rect(0, 0, 0, 0) !important;
}

/* Logo en bas du verso */
.accred-verso-footer {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
  flex-shrink: 0;
}

.accred-verso-footer img {
  height: 24px;
  width: auto;
  opacity: 1;
  display: block;
}

/* Sidebar accréditation */
/* .accred-sidebar : désormais remplacé par .lama-film-footer */
.accred-sidebar {
  display: none;
}

/* Select2 dans le verso */
.accred-card-verso .select2-container.forminator-select {
  width: 100% !important;
}

.accred-card-verso .select2-selection--single {
  border: none !important;
  border-bottom: 1.5px solid var(--border) !important;
  border-radius: 0 !important;
  background: transparent !important;
  height: auto !important;
  padding: 5px 0 8px !important;
  box-shadow: none !important;
}

.accred-card-verso .select2-selection__rendered {
  color: var(--orange) !important;
  font-size: 14px !important;
  font-family: var(--f-body) !important;
  font-style: italic !important;
  padding-left: 0 !important;
  line-height: 1.5 !important;
}

.accred-card-verso .select2-selection__placeholder {
  color: #CBBFB4 !important;
  font-style: italic !important;
}

.accred-card-verso .select2-selection__arrow {
  top: 50% !important;
  transform: translateY(-50%) !important;
  right: 0 !important;
}

.accred-card-verso .forminator-icon-chevron-down {
  color: var(--orange) !important;
}

.select2-dropdown {
  border: 1.5px solid var(--border) !important;
  border-radius: 6px !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.07) !important;
  font-family: var(--f-body) !important;
}

.select2-results__option {
  font-size: 13px !important;
  font-family: var(--f-body) !important;
  padding: 10px 16px !important;
  color: var(--black) !important;
}

.select2-results__option--highlighted {
  background: var(--orange) !important;
  color: #f7f6f6 !important;
}


/* ════════════════════════════════════════════════════════════
   9. RESPONSIVE
   ════════════════════════════════════════════════════════════ */

@media (max-width: 1100px) {
  :root {
    --recto-w: 290px;
  }
}

@media (max-width: 900px) {
  .lama-film-wrapper {
    flex-direction: column;
  }

  .lama-film-cards-flex {
    flex-direction: column;
  }

  .lama-film-card-1,
  .lama-film-card-2 {
    flex: none;
    width: 100%;
  }

  .accred-cards-area {
    flex-direction: column;
    align-items: stretch;
  }

  :root {
    --recto-w: 100%;
    --recto-h: auto;
  }

  .accred-card-recto {
    min-height: 340px;
  }

  .accred-verso-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 767px) {

  .lama-form-wrapper,
  .accred-outer {
    flex-direction: column;
  }

  .lama-film-footer {
    flex-direction: column;
  }

  .lama-footer-consent-btns {
    flex-wrap: wrap;
  }

  .lama-msg-slot {
    width: 100%;
  }

  .lama-jury-grid {
    grid-template-columns: 1fr;
  }

  .sunset-zone main .container .jour-contenu .jour-contenu--visible h2 .prog-section-titre:nth-of-type(2) {
    color: var(--color-white) !important;
  }
}

@media (max-width: 480px) {

  .lama-form-card,
  .lama-film-card-1,
  .lama-film-card-2 {
    padding: 28px 18px;
    /* border-radius: var(--radius-sm); */
  }

  .accred-card-recto,
  .accred-card-verso {
    border-radius: 8px;
  }

  .accred-card-verso {
    padding: 18px 16px;
  }

  .lama-grid-2 {
    grid-template-columns: 1fr;
  }

  .lama-film-grid {
    display: flex;
    flex-direction: column;
  }

  .lama-fgrid-2 {
    display: flex;
    flex-direction: column;
  }

  .forminator-row,
  .lama-frow-2 {
    width: 100%;
  }
}

/* ════════════════════════════════════════════════════════════
   PROGRAMME — TYPOGRAPHIES & STRUCTURE
   ════════════════════════════════════════════════════════════ */

/* Titres de section ateliers / documentaires / fictions
   Spécificité renforcée pour battre .sunset-zone h2 */
.prog-section-titre,
.sunset-zone .prog-section-titre {
  font-family: var(--font-titre);
  font-weight: 400;
  /* Mattone Regular */
  font-size: 16px;
  margin: 28px 0 14px;
  color: #fff;
  mix-blend-mode: difference;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Header ligne : titre du jour + lien téléchargement */
.programme-jour-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 24px;
}

@media (max-width: 600px) {
  .programme-jour-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .programme-jour-titre {
    font-size: var(--size-title);
  }
}

.programme-jour-titre {
  font-family: var(--font-titre);
  font-weight: 700;
  /* Mattone Bold */
  font-size: clamp(22px, 3.5vw, 36px);
  color: var(--color-white) !important;
  text-transform: none;
  margin-bottom: 0;
}

.lama-dl-link {
  font-family: var(--font-texte);
  font-size: 14px;
  font-weight: 700;
  color: var(--color-white);
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
}

.lama-dl-link:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* CTA liens texte (adhérer, voir prog) */
.lama-cta-link {
  font-family: var(--font-texte);
  font-size: var(--size-sm);
  font-weight: 700;
  text-decoration: none;
  display: inline-block;
  white-space: nowrap;
}

.lama-cta-link:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.lama-cta-link--orange {
  color: var(--color-orange);
}

.lama-cta-link--dark {
  color: var(--color-dark);
}

.lama-cta-link--white {
  color: var(--color-white);
}

.lama-cta-link--light-blue {
  color: var(--color-light-blue);
}

.lama-cta-link--beige {
  color: var(--color-beige);
}

/* ════════════════════════════════════════════════════════════
   CARTES PROGRAMME — NOUVEAU LAYOUT
   ════════════════════════════════════════════════════════════ */

/* Corps de carte : titre + méta/description */
.carte__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Pied de carte : lieu+heure à gauche, CTA à droite */
.carte__footer {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-top: 12px;
  gap: 8px;
}

.carte__footer-left {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.carte__footer-right {
  flex-shrink: 0;
}

/* Ligne lieu + badge compétition */
.carte__lieu-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
}

/* CTA texte dans les cartes */
.carte__cta {
  font-family: var(--font-texte);
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
  text-transform: lowercase;
  cursor: pointer;
  white-space: nowrap;
}

.carte__cta:hover {
  text-decoration: underline;
  text-underline-offset: 2px;
}

.carte__cta--noir {
  color: var(--color-dark);
}

.carte__cta--orange {
  color: var(--color-orange);
}

/* "complet" pour ateliers en orange */
.carte__complet {
  font-family: var(--font-texte);
  font-size: 12px;
  font-weight: 700;
  color: var(--color-orange);
  text-transform: lowercase;
}

/* Heure */
.carte__heure {
  font-size: 16px;
  font-weight: 800;
  font-family: var(--font-titre);
  line-height: 1;
  margin-top: 2px;
}

/* ════════════════════════════════════════════════════════════
   CAROUSEL CARTES (scroll horizontal)
   ════════════════════════════════════════════════════════════ */
.cartes-scroll {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding-bottom: 4px;
}

.cartes-scroll::-webkit-scrollbar {
  display: none;
}

.cartes-scroll .carte {
  flex: 0 0 240px;
  scroll-snap-align: start;
}

/* Grille reste pour affichage unique */
.cartes-grid .carte {
  min-height: 0;
}

/* ════════════════════════════════════════════════════════════
   ONGLETS JOURS — style épuré
   ════════════════════════════════════════════════════════════ */
.jours-tabs {
  margin-bottom: 32px;
}

.jour-tab {
  color: var(--color-white);
  border-color: var(--color-white);
}

.jour-tab--active,
.jour-tab:hover {
  background: var(--color-white);
  color: var(--color-dark);
  border-color: var(--color-white);
}

/* Header page programmation : titre + télécharger */
.prog-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 32px;
  gap: 16px;
}

.prog-header h1 {
  color: var(--color-white);
}

@media (max-width: 600px) {
  .prog-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
}

/* ────────────────────────────────────────
   CARTE — texte descriptif (ateliers + meta films)
──────────────────────────────────────── */
.carte__desc {
  font-size: 14px;
  line-height: 1.5;
  color: var(--color-dark);
}



/* Réduction margin des prog-section-titre imbriqués */
.jour-contenu .prog-section-titre:first-child {
  margin-top: 16px;
}

/* ════════════════════════════════════════════════════════════
   PAGE FESTIVAL — GRILLES
   ════════════════════════════════════════════════════════════ */

/* Histoire : texte gauche, image droite */
.festival-histoire-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: start;
}

/* Association : texte gauche (align-top), vidéo droite */
.festival-asso-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: start;
}

/* Mobile — image histoire passe sous le texte, vidéo sous le texte asso */
@media (max-width: 768px) {
  .festival-histoire-grid {
    grid-template-columns: 1fr;
  }

  .festival-histoire-image {
    order: 2;
  }

  .festival-asso-grid {
    grid-template-columns: 1fr;
  }

  .festival-asso-video {
    order: 2;
  }
}

/* Mot de la présidente — page festival (texte blanc) */
.festival-mot-pres,
.festival-mot-pres p,
.festival-mot-pres * {
  color: var(--color-white) !important;
}

/* ════════════════════════════════════════════════════════════
   PAGE FESTIVAL — sous-titres en majuscules
   ════════════════════════════════════════════════════════════ */
.festival-histoire-grid .section-label,
.festival-mot-section .section-label {
  text-transform: uppercase !important;
  letter-spacing: 0.12em;
}

/* ════════════════════════════════════════════════════════════
   PAGE INFOS PRATIQUES — ONGLETS
   ════════════════════════════════════════════════════════════ */
.infos-tab {
  display: inline-block;
  padding: 10px 20px;
  border-radius: 14px;
  font-family: var(--font-titre);
  font-size: var(--size-sm);
  font-weight: 700;
  text-transform: lowercase;
  cursor: pointer;
  transition: background var(--transition), color var(--transition);
  border: 2px solid var(--color-white);
  background: transparent;
  color: var(--color-white);
}

.infos-tab:hover {
  background: var(--color-white);
  color: var(--color-dark);
  border-color: var(--color-white);
}

.infos-tab--active {
  background: var(--color-dark-blue);
  color: var(--color-white);
  border-color: var(--color-dark-blue);
}

.infos-tab--active:hover {
  background: var(--color-dark-blue);
  color: var(--color-white);
}

/* ════════════════════════════════════════════════════════════
   PAGE INFOS PRATIQUES — TITRES DE SECTION
   (Transports / Restauration / Hébergements)
   ════════════════════════════════════════════════════════════ */
.infos-section-titre {
  font-family: var(--font-titre);
  font-weight: 700;
  font-size: var(--size-title-sm);
  color: var(--color-white) !important;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 0 0 24px;
}

/* ════════════════════════════════════════════════════════════
   PAGE INFOS PRATIQUES — TRANSPORTS
   ════════════════════════════════════════════════════════════ */
.transport-sous-titre {
  font-family: var(--font-titre);
  font-weight: 400;
  /* Mattone Regular */
  font-size: var(--size-card-title);
  color: var(--color-dark);
  text-transform: none;
  margin-bottom: 10px;
}

.transport-texte,
.transport-texte p,
.transport-texte li {
  font-size: var(--size-regular);
  line-height: 1.6;
  color: var(--color-dark);
}

/* ════════════════════════════════════════════════════════════
   PAGE INFOS PRATIQUES — VILLAGES & ÉTABLISSEMENTS
   Layout CSS columns : les villages s'enchaînent dans les
   colonnes, un nouveau village commence sur la colonne suivante
   grâce à break-inside:avoid.
   ════════════════════════════════════════════════════════════ */
.etablissements-colonnes {
  display: block;
  /* On remplace le flex */
  column-count: 5;
  /* 5 colonnes pour le rendu desktop */
  column-gap: 32px;
  column-fill: balance;
  margin-bottom: 48px;
}

/* Keep multi-column flow for long villages (do not lock a whole village to one column). */
.etablissements-colonnes .etablissements-village {
  display: contents;
}

.village-titre,
.etablissement-item {
  break-inside: avoid;
  page-break-inside: avoid;
  -webkit-column-break-inside: avoid;
  display: inline-block;
  width: 100%;
}

.village-titre {
  break-inside: avoid;
  break-after: avoid-column;
  page-break-inside: avoid;
  page-break-after: avoid;
  -webkit-column-break-inside: avoid;
  -webkit-column-break-after: avoid;
  display: block;
  width: 100%;
  font-family: var(--font-titre);
  font-weight: 700;
  font-size: var(--size-subtitle);
  color: var(--color-white) !important;
  text-transform: none;
  margin-bottom: 12px;
}

.etablissements-colonnes .village-titre+.etablissement-item {
  break-before: avoid-column;
  page-break-before: avoid;
  -webkit-column-break-before: avoid;
}

.village-start-group {
  break-inside: avoid;
  page-break-inside: avoid;
  -webkit-column-break-inside: avoid;
  display: inline-block;
  width: 100%;
}

.etablissements-colonnes>.village-titre:first-child {
  margin-top: 0;
}

.etablissement-item {
  break-inside: avoid-column;
  page-break-inside: avoid;
  -webkit-column-break-inside: avoid;
  display: block;
  width: 100%;
  margin-bottom: 10px;
  line-height: 1.6;
}

.etablissements-village>.etablissement-item:last-of-type {
  margin-bottom: 35px;
  /* 10px (normal) + 24px (espace entre sections) */
}

.etablissement-item--last {
  margin-bottom: 34px;
  /* 10px (normal) + 24px (espace entre sections) */
}

.etablissement-nom {
  font-size: var(--size-regular);
  font-weight: 600;
}

/* Responsive établissements */
@media (max-width: 900px) {
  .etablissements-colonnes {
    column-count: 3;
  }
}

@media (max-width: 600px) {
  .etablissements-colonnes {
    column-count: 1;
    /* Repasse sur 1 seule colonne sur mobile */
  }
}

.etablissement-nom--orange {
  color: var(--color-beige);
}

.etablissement-nom--blue {
  color: var(--color-light-blue);
}

.etablissement-tel {
  font-size: var(--size-regular);
  color: var(--color-white);
}

.etablissement-infos {
  font-size: var(--size-sm);
  color: var(--color-white);
}

/* Responsive établissements */
@media (max-width: 900px) {
  .etablissements-village {
    flex: 0 0 calc(50% - 16px);
  }
}

@media (max-width: 600px) {
  .etablissements-village {
    flex: 0 0 100%;
  }
}

/* ════════════════════════════════════════════════════════════
   PAGE INFOS PRATIQUES — OVERRIDES SUPPLÉMENTAIRES
   ════════════════════════════════════════════════════════════ */

/* Guinguette texte blanc */
.guinguette-texte,
.guinguette-texte p {
  color: var(--color-white) !important;
}

/* Titres section "sur place" en majuscules */
#tab-surplace-avant .section-label,
#tab-surplace-apres .section-label {
  text-transform: uppercase;
}

/* lieu-fiche "places" en gras */
.lieu-fiche__body p strong {
  font-weight: 900;
}

.lieu-fiche__body p .places-label {
  font-weight: 900;
}

/* Tarifs & Billetterie section-labels en sombre */
.surplace-sticky__inner .section-label {
  color: var(--color-dark);
}

.surplace-sticky__inner [style*="opacity:.6"],
.surplace-sticky__inner [style*="opacity:.8"] {
  opacity: 1 !important;
  color: var(--color-dark) !important;
}

/* Guinguette header avec lien à droite */
.guinguette-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}

.guinguette-header .infos-section-titre {
  margin-bottom: 0;
}

/* Transport card lien horaires en orange */
.transport-col .lama-cta-link--orange {
  color: var(--color-orange);
}

/* Presse section labels — 14px */
.presse-section-label {
  font-size: var(--size-subtitle) !important;
}

.actions-grid+.presse-section-label {
  color: var(--color-white) !important;
}

.accueil-actions-grid+a:hover,
.accueil-actions-label+a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Nos actions label — blanc */
.accueil-actions-label {
  color: var(--color-white) !important;
}

/* Mot de la présidente accueil */
.accueil-mot-pres-label {
  font-size: 14px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
}

/* ════════════════════════════════════════════════════════════
   FOOTER — TITRES COLONNES & LIENS LÉGAUX
   ════════════════════════════════════════════════════════════ */
.footer-col-titre {
  font-family: var(--font-titre);
  font-weight: 700;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.footer-legal-link {
  font-family: var(--font-titre);
  font-weight: 400;
  font-size: 12px;
  text-transform: none;
  letter-spacing: 0;
}

/* ════════════════════════════════════════════════════════════
   PARTICIPER — RÈGLEMENT LINKS + DIVERS
   ════════════════════════════════════════════════════════════ */

/* Form 1 (court-métrage, sunset first) → règlement orange */
.sunset-zone .participation-bloc:first-of-type .lama-reglement-link {
  color: var(--color-orange);
}

/* Form 2 (documentaire, sunset 2nd) → règlement bleu clair */
.sunset-zone .participation-bloc:not(:first-of-type) .lama-reglement-link {
  color: var(--color-light-blue);
}

/* Form 3 (jury, black first) → règlement bleu clair */
.black-zone .participation-bloc:first-of-type .lama-reglement-link {
  color: var(--color-light-blue);
}

/* Form 4 (accréditation, black last) → règlement orange */
.black-zone .participation-bloc:last-of-type .lama-reglement-link {
  color: var(--color-orange);
}

/* Error message consent form 1 → texte blanc */
.sunset-zone .participation-bloc:first-of-type .forminator-field-consent .forminator-error-message,
.sunset-zone .participation-bloc:first-of-type .lama-sidebar-consent .forminator-error-message {
  color: var(--color-white) !important;
  background: rgba(255, 255, 255, 0.1) !important;
  border-color: rgba(255, 255, 255, 0.4) !important;
}

/* Masquer les champs HTML Forminator (paragraphe d'instructions) */
.forminator-field.forminator-merge-tags,
[data-field="html-1"],
.forminator-ui .forminator-field--description,
.forminator-ui .forminator-description,
.forminator-ui .forminator-row--description,
.forminator-ui .forminator-helper {
  display: none !important;
}

/* Exception : visible dans le slot instructions */
.lama-sidebar-instructions .forminator-field.forminator-merge-tags,
.lama-sidebar-instructions [data-field^="html-"] {
  display: block !important;
}

.lama-sidebar-instructions p {
  color: var(--color-white);
  font-size: var(--size-sm);
  line-height: 1.7;
  margin: 0;
}

/* ═══════════════════════════════════════════════════════════
   SINGLE PAGES — COMMUNIQUÉ & ACTION
   Lien retour en noir, card blanche pour le contenu
════════════════════════════════════════════════════════════ */

/* ── Conteneur page ── */
.single-page-container {
  padding-top: 48px;
  padding-bottom: 48px;
  max-width: 800px;
}

/* ── Lien retour (< Presse / < Nos actions) — toujours en noir ── */
.single-back-link {
  display: inline-block;
  margin-bottom: 24px;
  font-family: var(--font-titre);
  font-size: 13px;
  font-weight: 700;
  color: var(--color-white);
  text-decoration: none;
}

.single-back-link:hover {
  opacity: 0.7;
}

/* ── Card blanche (single + page-simple) ── */
.single-card {
  background: #ffffff;
  border-radius: var(--radius);
  padding: 40px 40px 36px;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
}

/* ── Date (orange, uppercase) ── */
.single-card__date {
  font-size: 12px;
  font-weight: 700;
  color: var(--color-orange) !important;
  margin: 0;
  font-family: var(--font-titre);
  letter-spacing: 0.04em;
}

/* date orange dans single-action — force sur fond de card blanche */
.single-card__meta-row .single-card__date {
  color: var(--color-orange) !important;
}

/* ── Titre ── */
.single-card__title {
  font-size: 36px;
  font-weight: 800;
  margin-bottom: 20px;
  line-height: 1.15;
  color: var(--color-dark) !important;
}

/* ── Ligne date + lieu sur la même ligne (single-action) ── */
.single-card__meta-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 28px;
}

/* ── Lieu — font-titre, en noir, aligné à droite ── */
.single-card__lieu {
  font-size: 13px;
  font-weight: 700;
  color: var(--color-dark) !important;
  margin: 0;
  font-family: var(--font-titre);
  text-align: right;
}

/* ── Contenu éditorial — noir plein ── */
.single-card__content {
  font-size: 15px;
  line-height: 1.9;
  color: var(--color-dark) !important;
  margin-bottom: 32px;
}

.single-card__content--dark,
.single-card__content--dark p,
.single-card__content--dark li,
.single-card__content--dark * {
  color: var(--color-dark) !important;
  opacity: 1 !important;
}

/* ── Body avec image flottante (single-action) ── */
.single-card__body {
  overflow: hidden;
  margin-bottom: 32px;
}

.single-card__img-float {
  float: right;
  width: 45%;
  max-width: 340px;
  object-fit: cover;
  border-radius: var(--radius);
  margin: 4px 0 24px 32px;
}

/* ── Galerie photos supplémentaires ── */
.single-card__gallery {
  display: grid;
  gap: 16px;
  margin-top: 40px;
}

.single-card__gallery--two {
  grid-template-columns: 1fr 1fr;
}

.single-card__gallery--one {
  grid-template-columns: 1fr;
}

.single-card__gallery-img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius);
  display: block;
}

/* ── Liens de téléchargement — Karrik, noir, soulignés au hover, sans bouton ── */
.single-card__downloads {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 8px;
}

.communique-dl-link {
  font-family: var(--font-texte);
  font-size: 14px;
  font-weight: 700;
  color: var(--color-dark);
  text-decoration: none;
  display: inline-block;
}

.communique-dl-link:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ── Page simple — card autour du contenu ── */
.page-simple__card {
  margin-top: 0;
}

.page-simple__card .page-simple__content p,
.page-simple__card .page-simple__content li,
.page-simple__card .page-simple__content * {
  color: var(--color-dark);
}

/* ── Responsive single cards ── */
@media (max-width: 600px) {
  .single-card {
    padding: 24px 20px;
  }

  .single-card__title {
    font-size: 26px;
  }

  .single-card__meta-row {
    flex-direction: column;
    gap: 4px;
  }

  .single-card__lieu {
    text-align: left;
  }

  .single-card__img-float {
    float: none;
    width: 100%;
    max-width: 100%;
    margin: 0 0 20px 0;
  }

  .single-card__gallery--two {
    grid-template-columns: 1fr;
  }
}


/* ═══════════════════════════════════════════════════════════
   PAGE NOS ACTIONS — LAYOUT SPÉCIFIQUE
   Card blanche + image en dessous, CTA orange conditionnelle
════════════════════════════════════════════════════════════ */

/* ── Intro texte — noir plein ── */
.nos-actions-intro,
.nos-actions-intro p {
  font-size: var(--size-regular);
  color: var(--color-white);
  margin-bottom: 48px;
  line-height: 1.7;
}

/* ── Wrapper item (card + image empilées) ── */
.action-page-item {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* ── Card blanche ── */
.action-page-card {
  background: #ffffff;
  border-radius: var(--radius);
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  text-decoration: none;
  color: var(--color-dark);
  transition: box-shadow var(--transition);
  flex: 1;
  min-height: 160px;
}

.action-page-card:hover {
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
}

/* ── Partie haute : titre + extrait ── */
.action-page-card__body {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.action-page-card__title {
  font-family: var(--font-titre);
  font-size: 15px;
  font-weight: 800;
  color: var(--color-dark);
  margin: 0;
  line-height: 1.25;
  text-align: left;
}

.action-page-card__excerpt {
  font-family: var(--font-texte);
  font-size: var(--size-sm);
  color: var(--color-dark) !important;
  line-height: 1.55;
  margin: 0;
}

/* ── Pied de card : date gauche, lien droite — sans séparateur ── */
.action-page-card__footer {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-top: auto;
  padding-top: 10px;
  border-top: none;
}

.action-page-card__date {
  font-family: var(--font-titre);
  font-size: 11px;
  font-weight: 700;
  color: var(--color-orange);
  letter-spacing: 0.03em;
}

.action-page-card__lien {
  font-family: var(--font-texte);
  font-size: var(--size-xs);
  font-weight: 700;
  color: var(--color-dark);
  text-decoration: none;
  flex-shrink: 0;
}

.action-page-card:hover .action-page-card__lien {
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ── Image sous la card ── */
.action-page-img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius);
  display: block;
  flex-shrink: 0;
}

/* ── Card CTA orange — même hauteur que les cards articles ── */
.action-page-cta {
  background: var(--color-orange);
  border-radius: var(--radius);
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 160px;
  height: 100%;
  text-decoration: none;
  transition: filter var(--transition);
  box-sizing: border-box;
}

.action-page-cta:hover {
  filter: brightness(0.92);
}

.action-page-cta__title {
  font-family: var(--font-titre);
  font-size: 14px;
  font-weight: 700;
  color: var(--color-dark);
  line-height: 1.3;
  display: block;
  align-self: flex-start;
}

.action-page-cta__more {
  font-family: var(--font-titre);
  font-size: 13px;
  font-weight: 700;
  color: var(--color-dark);
  display: block;
  align-self: flex-end;
}

/* ── Responsive ── */
@media (max-width: 900px) {
  .action-page-item {
    gap: 6px;
  }
}

@media (max-width: 600px) {
  .action-page-card {
    min-height: 140px;
  }

  .action-page-cta {
    min-height: 140px;
  }

  /* ── Accueil actions : carte 50/50 sur mobile ── */
  .accueil-actions-grid .action-carte__content {
    flex: 1 1 50%;
    min-width: 0;
  }

  .accueil-actions-grid .action-carte__img {
    width: 50%;
    min-height: unset;
    flex-shrink: 0;
  }

  /* ── Accueil actions : footer carte en colonne sur mobile ── */
  .accueil-actions-grid .action-carte__footer {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .accueil-actions-grid .action-carte__excerpt {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
}


/* ════════════════════════════════════════════════════════════
   PAGE PROGRAMMATION — OVERRIDES SPÉCIFIQUES
   Scope : .prog-header, .jours-tabs (avant montagne)
           .rencontres-grid, .jurys  (après montagne)
   ════════════════════════════════════════════════════════════ */


/* ── Onglets jours ── */
.jours-tabs .jour-tab {
  color: var(--color-white);
  border-color: var(--color-white);
  background: transparent;
}

.jours-tabs .jour-tab--active,
.jours-tabs .jour-tab:hover {
  background: var(--color-white);
  color: var(--color-dark);
  border-color: var(--color-white);
}


/* ════════════════════════════════════════════════════════════
   RENCONTRES SOUS LE PLATANE
   Portrait, bordure blanche/transparente → active fond blanc texte noir
   ════════════════════════════════════════════════════════════ */

.rencontres-grid .rencontre-carte {
  background: transparent;
  border: 1.5px solid var(--color-white);
  box-shadow: none;
  border-radius: var(--radius);
  padding: 18px 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 0;
  min-height: 260px;
  color: var(--color-white);
}

/* Date : 21.79px */
.rencontres-grid .rencontre-carte__date {
  font-size: 21.79px;
  font-weight: 800;
  line-height: 1.1;
  color: var(--color-white);
  margin-bottom: 2px;
}

/* Heure : 14px, très proche de la date */
.rencontres-grid .rencontre-carte__heure {
  font-size: 14px;
  font-weight: 700;
  color: var(--color-white);
  margin-bottom: 0;
}

/* Image éventuelle entre heure et nom */
.rencontres-grid .rencontre-carte img {
  width: 100%;
  height: 90px;
  object-fit: cover;
  border-radius: var(--radius-sm);
  margin-top: 12px;
  margin-bottom: 0;
}

/* Grand espace : margin-top auto pousse le nom vers le bas */
.rencontres-grid .rencontre-carte strong {
  font-family: var(--font-titre);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.15;
  color: var(--color-white);
  margin-top: auto;
  display: block;
}

/* Fonction : uppercase, 14px, proche du nom */
.rencontres-grid .rencontre-carte__role {
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--color-white);
  margin-top: 3px;
  display: block;
}

/* Film : italic 14px, proche de la fonction */
.rencontres-grid .rencontre-carte em {
  font-size: 14px !important;
  font-style: italic;
  color: var(--color-white);
  margin-top: 4px;
  display: block;
}

/* Active : fond blanc, bordure sombre, texte noir */
.rencontres-grid .rencontre-carte--active {
  background: var(--color-white);
  border-color: var(--color-dark);
}

.rencontres-grid .rencontre-carte--active .rencontre-carte__date,
.rencontres-grid .rencontre-carte--active .rencontre-carte__heure,
.rencontres-grid .rencontre-carte--active strong,
.rencontres-grid .rencontre-carte--active .rencontre-carte__role,
.rencontres-grid .rencontre-carte--active em {
  color: var(--color-dark);
}


/* ════════════════════════════════════════════════════════════
   JURYS — même hauteur que les rencontres, layout portrait
   ════════════════════════════════════════════════════════════ */

.jurys .jury-carte {
  min-height: 260px;
  border-radius: var(--radius);
  padding: 18px 16px 20px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
}

/* ── Jury documentaire → fond beige ── */
.jurys .jury-carte--orange {
  background: var(--color-beige);
  color: var(--color-dark);
}

/* ── Jury courts → fond bleu clair (déjà via --light) ── */
.jurys .jury-carte--light {
  background: var(--color-light-blue);
  color: var(--color-dark);
}

/* ── Badge "Président•e du jury" → texte simple Karrik centré, noir, 14px ── */
.jurys .jury-carte .badge--president {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
  font-family: var(--font-texte);
  font-size: 14px;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: var(--color-dark);
  align-self: center;
  text-align: center;
  line-height: 1.4;
}

/* Spacer invisible pour pousser nom/fonction/film en bas
   (works pour cards avec ET sans badge président) */
.jurys .jury-carte::after {
  content: '';
  display: block;
  flex: 1;
}

/* ── Nom : Mattone Bold 18px, line-height serré ── */
.jurys .jury-carte strong {
  font-family: var(--font-titre);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.1;
  color: var(--color-dark);
  display: block;
  margin-bottom: 0;
  order: 10;
}

/* ── Fonction : Karrik, uppercase, 14px, très proche du nom ── */
.jurys .jury-carte span:not(.badge):not(.badge--president) {
  font-family: var(--font-texte);
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--color-dark);
  display: block;
  margin-top: 3px;
  order: 11;
}

/* ── Film : Karrik italic 14px, line-height serré ── */
.jurys .jury-carte em {
  font-family: var(--font-texte);
  font-size: 14px !important;
  font-style: italic;
  color: var(--color-dark);
  display: block;
  margin-top: 4px;
  line-height: 1.2;
  order: 12;
}

/* Pas de photo dans ce layout */
.jurys .jury-carte img {
  display: none;
}


/* ════════════════════════════════════════════════════════════
   RESPONSIVE MOBILE — CORRECTIONS GLOBALES
   ════════════════════════════════════════════════════════════ */

/* ── Grilles accueil (remplacent les inline styles de front-page.twig) ── */
.accueil-recap-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: start;
  margin-bottom: 32px;
}

.accueil-edition-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: start;
}

.accueil-actions-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  clear: both;
}

/* ── Vidéo association — fluide desktop et mobile ──
   Le wrapper inline du template a aspect-ratio:16/9.
   On force l'iframe à remplir ce wrapper en 100%×100%. */
.festival-asso-video {
  width: 100%;
}

.festival-asso-video>div {
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius);
  overflow: hidden;
}

.festival-asso-video iframe,
.festival-asso-video video,
.festival-asso-video embed {
  width: 100%;
  height: 100%;
  display: block;
  border: none;
}

/* ════════════════════════════════════════════════════════════
   @media ≤ 600px
   ════════════════════════════════════════════════════════════ */
@media (max-width: 600px) {

  /* ── Accueil : image recap/édition passe en dessous ── */
  .accueil-recap-grid {
    grid-template-columns: 1fr;
  }

  .accueil-recap-grid img {
    order: 2;
  }

  .accueil-edition-grid {
    grid-template-columns: 1fr;
  }

  .accueil-edition-grid>div:last-child {
    order: 2;
  }

  /* ── Accueil : actions une par ligne ── */
  .accueil-actions-grid {
    grid-template-columns: 1fr;
  }

  /* ── Page participer : règlement passe sous le titre ── */
  .container-bloc__header {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }

  /* ── Carrousels programmation : padding pour ne pas couper les cards ── */
  .cartes-scroll {
    padding-left: 24px;
    padding-right: 24px;
    scroll-padding-inline-start: 24px;
    margin-left: -24px;
    margin-right: -24px;
    /* compense le padding du .container parent */
  }

  /* ── Montagne : taille et position normales (comme desktop) ── */
  .mountain-sticky {
    overflow: visible;
  }

  .mountain-sticky svg {
    width: 100%;
    margin-left: 0;
    height: auto;
  }

  /* ── Activités : blanc sur mobile (fond sombre) ── */
  .jour-contenu .prog-section-titre:first-child,
  .sunset-zone .jour-contenu .prog-section-titre:first-child {
    color: var(--color-white);
  }

  /* ── Festival : section association pleine largeur ── */
  .festival-asso-grid {
    gap: 32px;
  }
}

/* ════════════════════════════════════════════════════════════
   JURY & RENCONTRES — SCROLL HORIZONTAL SI DÉBORDEMENT
   Les grilles (jury-grid, rencontres-grid) restent en auto-fill
   sur desktop. Quand elles débordent, le wrapper active le scroll.
   ════════════════════════════════════════════════════════════ */
.grid-scroll-wrapper {
  overflow-x: auto;
  overflow-y: visible;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
  /* Padding latéral pour que la dernière carte ne soit pas coupée */
  padding-bottom: 8px;
}

.grid-scroll-wrapper::-webkit-scrollbar {
  display: none;
}

/* Les grilles à l'intérieur ne wrappent plus : toutes les cartes
   sur une seule ligne, largeur minimale fixe par carte. */
.grid-scroll-wrapper .jury-grid,
.grid-scroll-wrapper .rencontres-grid {
  display: flex;
  flex-wrap: nowrap;
  gap: 16px;
  width: max-content;
  min-width: 100%;
}

/* Largeur fixe par carte pour un scroll propre */
.grid-scroll-wrapper .jury-carte {
  flex: 0 0 180px;
  width: 180px;
}

.grid-scroll-wrapper .rencontre-carte {
  flex: 0 0 160px;
  width: 160px;
}