/* ============================================================
   FESTIVAL ROMANTIQUE DU LOIR — feuille de style
   Phase UX : structure, hiérarchie, comportements.
   Aucun parti pris graphique — la phase UI se fera ici même,
   pour l'essentiel dans le bloc TOKENS ci-dessous.
   ============================================================ */

/* ------------------------------------------------------------
   1. TOKENS
   ------------------------------------------------------------ */
:root{
  /* Couleurs */
  --ink:        #111111;
  --ink-soft:   #4A4A4A;
  --ink-mute:   #767676;   /* contraste AA sur blanc : 4.54:1 */
  --line:       #E3E3E1;
  --line-soft:  #EFEFED;
  --bg:         #FFFFFF;
  --bg-alt:     #F6F6F4;
  --slot-line:  #C9C9C5;

  /* Typographie */
  --font-ui: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;

  /* Trame */
  --gutter: clamp(1.25rem, 5vw, 5rem);
  --maxw: 1320px;
  --stack: clamp(3.5rem, 8vw, 7.5rem);   /* rythme vertical entre sections */
  --header-h: 68px;
}

/* ------------------------------------------------------------
   2. BASE
   ------------------------------------------------------------ */
*,*::before,*::after{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
}

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-ui);
  font-size:16px;
  line-height:1.6;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,h4,p,ul,ol,dl,dd,figure{ margin:0; }
ul{ list-style:none; padding:0; }
a{ color:inherit; }

.wrap{ max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter); }

/* ------------------------------------------------------------
   3. ACCESSIBILITÉ
   ------------------------------------------------------------ */
:focus-visible{
  outline:2px solid var(--ink);
  outline-offset:3px;
  border-radius:2px;
}

.skip-link{
  position:absolute; left:var(--gutter); top:.5rem;
  transform:translateY(-200%);
  background:var(--ink); color:#fff;
  padding:.75rem 1.25rem; font-size:.875rem; font-weight:600;
  text-decoration:none; z-index:200;
}
.skip-link:focus{ transform:translateY(0); }

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

/* ------------------------------------------------------------
   4. ÉCHELLE TYPOGRAPHIQUE
   Hiérarchie portée par la taille et la graisse uniquement.
   ------------------------------------------------------------ */
.t-display{ font-size:clamp(2.75rem, 8.5vw, 6.5rem);  font-weight:600; line-height:.94;  letter-spacing:-.03em; }
.t-h2     { font-size:clamp(1.75rem, 4vw, 3.25rem);   font-weight:600; line-height:1.05; letter-spacing:-.02em; }
.t-h3     { font-size:clamp(1.25rem, 2.4vw, 1.75rem); font-weight:600; line-height:1.15; letter-spacing:-.015em; }
.t-lead   { font-size:clamp(1.0625rem, 1.6vw, 1.375rem); font-weight:400; line-height:1.5; color:var(--ink-soft); }
.t-body   { font-size:1rem;     font-weight:400; line-height:1.6;  color:var(--ink-soft); }
.t-meta   { font-size:.9375rem; font-weight:500; line-height:1.45; }
.t-eyebrow{ font-size:.75rem;   font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-mute); }

/* ------------------------------------------------------------
   5. COMPOSANTS
   ------------------------------------------------------------ */

/* Label — catégorie, édition, statut. Lisible sans recours à la couleur. */
.label{
  display:inline-block;
  font-size:.6875rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  padding:.375rem .625rem; border:1px solid var(--ink); border-radius:2px;
  line-height:1; white-space:nowrap;
}
.label--strong{ background:var(--ink); color:#fff; }

/* Action — cible tactile ≥ 44 px */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:48px; padding:.75rem 1.75rem;
  font-size:.9375rem; font-weight:600; letter-spacing:.02em;
  text-decoration:none; border:1px solid var(--ink); border-radius:2px;
  transition:background-color .15s ease, color .15s ease;
}
.btn--primary{ background:var(--ink); color:#fff; }
.btn--primary:hover{ background:#000; }
.btn--ghost{ background:transparent; color:var(--ink); }
.btn--ghost:hover{ background:var(--ink); color:#fff; }
.btn--sm{ min-height:44px; padding:.625rem 1.25rem; font-size:.875rem; }

/* Réserve d'image — remplacée par les visuels en phase UI */
.media-slot{
  position:relative;
  background:var(--bg-alt);
  border:1px dashed var(--slot-line);
}

/* ------------------------------------------------------------
   6. EN-TÊTE ET NAVIGATION
   ------------------------------------------------------------ */
.site-header{
  position:fixed; inset:0 0 auto 0; z-index:100;
  background:rgba(255,255,255,.94);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.header-inner{
  display:flex; align-items:center; gap:clamp(1rem, 3vw, 3rem);
  min-height:var(--header-h);
}

.brand{
  font-size:.9375rem; font-weight:600; letter-spacing:-.01em;
  text-decoration:none; line-height:1.2; white-space:nowrap;
  margin-right:auto;
}
@media (max-width: 380px){ .brand{ font-size:.875rem; } }

/* --- Desktop : liste horizontale, CTA collé à droite --- */
.nav-desktop ul{ display:flex; align-items:center; gap:clamp(.875rem, 1.9vw, 2rem); }
.nav-desktop a{
  display:inline-block; padding:.5rem 0;
  font-size:.875rem; font-weight:500; text-decoration:none; white-space:nowrap;
  border-bottom:1px solid transparent;
}
.nav-desktop a:hover{ border-bottom-color:var(--ink); }

.header-cta{ flex-shrink:0; }

/* --- Bouton burger --- */
.burger{
  display:none;
  width:48px; height:48px; margin-right:-12px;
  align-items:center; justify-content:center;
  background:none; border:0; cursor:pointer; color:var(--ink);
}
.burger-bars{ display:block; width:24px; height:12px; position:relative; }
.burger-bars::before,
.burger-bars::after{
  content:''; position:absolute; left:0; width:24px; height:1.5px; background:currentColor;
  transition:transform .2s ease, top .2s ease;
}
.burger-bars::before{ top:0; }
.burger-bars::after{ top:10px; }
.burger[aria-expanded="true"] .burger-bars::before{ top:5px; transform:rotate(45deg); }
.burger[aria-expanded="true"] .burger-bars::after{ top:5px; transform:rotate(-45deg); }

/* --- Mobile : panneau plein écran, entrées réparties sur toute la hauteur --- */
.nav-mobile{
  position:fixed;
  inset:0;
  height:100vh;
  height:100dvh;          /* évite la barre d'adresse mobile */
  width:100%;
  z-index:150;            /* au-dessus de l'en-tête */
  background:var(--bg);
  display:none;
  flex-direction:column;
}
.nav-mobile[data-open="true"]{ display:flex; }
.nav-mobile[hidden]{ display:none; }

/* Barre supérieure du panneau : rappel du titre + fermeture */
.nav-mobile-top{
  flex:0 0 auto;
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  min-height:var(--header-h);
  padding-inline:var(--gutter);
  border-bottom:1px solid var(--line);
}
.nav-mobile-top .brand{ margin-right:0; }

.nav-close{
  width:48px; height:48px; margin-right:-12px;
  display:inline-flex; align-items:center; justify-content:center;
  background:none; border:0; cursor:pointer; color:var(--ink);
}
.nav-close-cross{ position:relative; display:block; width:22px; height:22px; }
.nav-close-cross::before,
.nav-close-cross::after{
  content:''; position:absolute; top:50%; left:0;
  width:22px; height:1.5px; background:currentColor;
}
.nav-close-cross::before{ transform:rotate(45deg); }
.nav-close-cross::after{ transform:rotate(-45deg); }

/* Corps : occupe le reste de la hauteur, défile si l'écran est trop court */
.nav-mobile-body{
  flex:1 1 auto;
  min-height:0;
  overflow-y:auto;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  display:flex; flex-direction:column;
  padding:0 var(--gutter) 1.5rem;
}
.nav-mobile-body nav{ flex:1 1 auto; display:flex; min-height:0; }

/* Grille : rangées égales, jamais sous 56 px — pas de croissance imprévisible */
.nav-mobile-body ul{
  flex:1 1 auto; width:100%;
  display:grid;
  grid-auto-rows:minmax(56px, 1fr);
}
.nav-mobile-body li{
  display:flex; align-items:stretch;
  border-top:1px solid var(--line-soft);
}
.nav-mobile-body li:first-child{ border-top:0; }
.nav-mobile-body a{
  display:flex; align-items:center;
  width:100%;
  font-size:clamp(1.125rem, 4.5vw, 1.5rem); font-weight:500; letter-spacing:-.01em;
  text-decoration:none;
}
.nav-mobile-body .btn{
  flex:0 0 auto;          /* ne s'étire jamais */
  height:56px; min-height:56px;
  width:100%;
  margin-top:1.5rem;
  font-size:.9375rem;
}

@media (max-width: 960px){
  .nav-desktop,
  .header-cta{ display:none; }
  .burger{ display:inline-flex; }
}

/* ------------------------------------------------------------
   7. HERO
   ------------------------------------------------------------ */
.hero{
  position:relative;
  min-height:100svh;
  padding-top:var(--header-h);
  display:flex; flex-direction:column; justify-content:flex-end;
  overflow:hidden;
  color:#FFFFFF;
}

/* Image de fond + dégradé foncé vers transparent, du bas vers le haut.
   Le dégradé couvre toute la hauteur : il assombrit la zone de texte
   sans masquer le haut du tableau. */
.hero-media{
  position:absolute; inset:0; z-index:0;
  background-image:
    linear-gradient(to top,
      rgba(12,14,20,.88) 0%,
      rgba(12,14,20,.72) 32%,
      rgba(12,14,20,.38) 62%,
      rgba(12,14,20,.12) 85%,
      rgba(12,14,20,0) 100%),
    url("images/hero-nympheas.jpg");
  background-size:cover, cover;
  background-position:center, center 40%;
  background-repeat:no-repeat, no-repeat;
}
.hero-content{
  position:relative; z-index:1;
  width:100%;
  padding-bottom:clamp(2.5rem, 6vh, 5rem);
}
.hero-label{ margin-bottom:1.5rem; }
.hero-content h1{ margin-bottom:1.5rem; white-space:nowrap; }
/* Les dates suivent la courbe du titre sur mobile, puis se figent à 20 px
   dès 571 px de large, tandis que le titre continue de croître jusqu'à 48 px.
   L'écart de hiérarchie s'ouvre donc à mesure que l'écran s'élargit. */
.hero-dates{
  font-size:clamp(.875rem, 3.5vw, 1.25rem); font-weight:500; letter-spacing:-.01em; line-height:1.2;
  margin-bottom:.75rem;
}
.hero-places{ max-width:52ch; margin-bottom:2rem; }
.hero-actions{ display:flex; flex-wrap:wrap; gap:.75rem; }

.hero-scroll{
  position:absolute; right:var(--gutter); bottom:clamp(2.5rem, 6vh, 5rem); z-index:1;
  font-size:.75rem; font-weight:500; letter-spacing:.12em; text-transform:uppercase;
  color:rgba(255,255,255,.82); text-decoration:none;
  display:inline-flex; align-items:center; gap:.5rem; min-height:44px;
}
@media (max-width: 700px){ .hero-scroll{ display:none; } }

/* --- Inversion des couleurs sur l'image --- */
.hero-places{ color:rgba(255,255,255,.9); }
.hero .label{ color:#fff; border-color:rgba(255,255,255,.65); }

.hero .btn--primary{ background:#fff; color:var(--ink); border-color:#fff; }
.hero .btn--primary:hover{ background:rgba(255,255,255,.86); border-color:rgba(255,255,255,.86); }
.hero .btn--ghost{ color:#fff; border-color:rgba(255,255,255,.65); }
.hero .btn--ghost:hover{ background:#fff; color:var(--ink); border-color:#fff; }

/* Le liseré de focus noir deviendrait invisible sur l'image */
.hero :focus-visible{ outline-color:#fff; }

/* ------------------------------------------------------------
   8. SECTION AVANT-SCÈNE
   ------------------------------------------------------------ */
.avant{ padding-block:var(--stack); border-top:1px solid var(--line); }
.avant-grid{
  display:grid; grid-template-columns:1fr 1fr;
  gap:clamp(2rem, 5vw, 5rem); align-items:center;
}
.avant-media{ aspect-ratio:4/5; }
.avant-labels{ display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:1.5rem; }
.avant-body h2{ margin-bottom:1rem; }
.avant-pitch{ margin-bottom:2rem; max-width:44ch; }

.avant-info{
  display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:1.5rem 2rem;
  padding-block:1.75rem; margin-bottom:2rem;
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
}
.avant-info dt{
  font-size:.75rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink-mute); margin-bottom:.375rem;
}
.avant-info dd{ font-size:1rem; font-weight:500; line-height:1.4; }
.avant-info dd small{ display:block; font-size:.875rem; font-weight:400; color:var(--ink-soft); }

.avant-cast{ margin-bottom:2rem; }
.avant-cast h3{
  font-size:.75rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink-mute); margin-bottom:.875rem;
}
.avant-cast ul{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:.5rem 2rem; }
.avant-cast li{ font-size:.9375rem; line-height:1.4; }
.avant-cast .instrument{ color:var(--ink-mute); }

@media (max-width: 900px){
  .avant-grid{ grid-template-columns:1fr; }
  .avant-media{ aspect-ratio:16/10; order:-1; }
}
@media (max-width: 560px){
  .avant-info{ grid-template-columns:1fr; }
  .avant-cast ul{ grid-template-columns:1fr; }
}

/* ------------------------------------------------------------
   9. SECTION PROGRAMMATION
   ------------------------------------------------------------ */
.programme{ padding-block:var(--stack); border-top:1px solid var(--line); }
.programme-head{ margin-bottom:clamp(2.5rem, 5vw, 4rem); }
.programme-head h2{ max-width:16ch; }

.event{ border-top:1px solid var(--line); }
.event:last-of-type{ border-bottom:1px solid var(--line); }

.event-link{
  display:grid;
  /* visuel · date · contenu · étiquette */
  grid-template-columns:minmax(220px,300px) minmax(120px,150px) minmax(0,1fr) minmax(150px,180px);
  gap:clamp(1.25rem, 3vw, 2.5rem);
  align-items:start;
  padding-block:clamp(1.75rem, 3vw, 2.5rem);
  text-decoration:none;
  transition:background-color .15s ease;
}
.event-link:hover{ background:var(--bg-alt); }
.event-link:hover .event-title{ text-decoration:underline; text-underline-offset:4px; }

/* Réserve d'image des cartes concert, en 3/2 paysage */
.event-media{ aspect-ratio:3/2; width:100%; }

.event-date{ font-size:1rem; font-weight:600; line-height:1.3; }
.event-date .day{
  display:block; font-weight:400; font-size:.875rem; color:var(--ink-mute);
  text-transform:uppercase; letter-spacing:.08em; margin-bottom:.25rem;
}
.event-date .hour{ display:block; font-weight:400; font-size:.9375rem; color:var(--ink-soft); margin-top:.375rem; }

.event-title{ margin-bottom:.625rem; }
.event-desc{ max-width:62ch; }
.event-venue{ margin-top:.875rem; font-size:.875rem; font-weight:500; color:var(--ink-mute); }

.event-aside{ display:flex; flex-direction:column; align-items:flex-start; gap:1rem; }
.event-cta{ font-size:.875rem; font-weight:600; border-bottom:1px solid var(--ink); padding-bottom:2px; }

@media (max-width: 1080px){
  .event-link{ grid-template-columns:minmax(200px,280px) minmax(0,1fr); }
  .event-media{ grid-row:1 / span 3; grid-column:1; }
  .event-date{ grid-column:2; }
  .event-aside{
    grid-column:2;
    flex-direction:row; align-items:center; justify-content:space-between; width:100%;
  }
}
@media (max-width: 700px){
  .event-link{ grid-template-columns:1fr; gap:1rem; }
  .event-media{ grid-row:auto; grid-column:auto; aspect-ratio:16/9; }
  .event-date{ grid-column:auto; }
  .event-aside{ grid-column:auto; margin-top:.25rem; }
}

.programme-foot{ margin-top:clamp(2.5rem, 5vw, 4rem); display:flex; flex-wrap:wrap; gap:.75rem; }

/* ------------------------------------------------------------
   10. PIED DE PAGE
   ------------------------------------------------------------ */
.site-footer{ padding-block:var(--stack) 3rem; border-top:1px solid var(--line); background:var(--bg-alt); }
.footer-grid{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:2.5rem; margin-bottom:4rem; }
.footer-grid h2{
  font-size:.75rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink-mute); margin-bottom:1rem;
}
.footer-grid li + li{ margin-top:.625rem; }
.footer-grid a{ font-size:.9375rem; text-decoration:none; border-bottom:1px solid transparent; }
.footer-grid a:hover{ border-bottom-color:var(--ink); }

.footer-partners{ padding-top:2rem; border-top:1px solid var(--line); }
.footer-partners:first-child{ padding-top:0; border-top:0; }
.footer-partners .media-slot{ height:88px; margin-top:1rem; }
.footer-legal{ margin-top:2.5rem; font-size:.8125rem; color:var(--ink-mute); }

@media (max-width: 780px){ .footer-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (max-width: 460px){ .footer-grid{ grid-template-columns:1fr; } }

/* ------------------------------------------------------------
   11. PAGE ÉVÉNEMENT
   ------------------------------------------------------------ */

/* Fil d'Ariane */
.breadcrumb{ padding-top:calc(var(--header-h) + clamp(1.5rem, 3vw, 2.5rem)); }
.breadcrumb ol{ display:flex; flex-wrap:wrap; align-items:center; gap:.5rem; list-style:none; padding:0; margin:0; }
.breadcrumb li{ font-size:.8125rem; font-weight:500; color:var(--ink-mute); }
.breadcrumb a{ text-decoration:none; border-bottom:1px solid transparent; }
.breadcrumb a:hover{ border-bottom-color:var(--ink-mute); }
.breadcrumb li[aria-current]{ color:var(--ink); }
.breadcrumb .sep{ color:var(--ink-mute); }

/* En-tête de l'événement */
.event-header{ padding-block:clamp(1.5rem, 3vw, 2.5rem) clamp(2.5rem, 5vw, 4rem); }
.event-header .labels{ display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:1.5rem; }
.event-header h1{ max-width:18ch; margin-bottom:1.25rem; }
.event-header .t-h1{ font-size:clamp(2rem, 5.5vw, 4rem); font-weight:600; line-height:1; letter-spacing:-.025em; }
.event-header .standfirst{ max-width:52ch; }
.event-hero-media{ aspect-ratio:21/9; margin-top:clamp(2rem, 4vw, 3rem); }

/* Corps : colonne de lecture + colonne pratique */
.event-page{ padding-bottom:var(--stack); }
.event-layout{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(280px, 360px);
  gap:clamp(2.5rem, 6vw, 6rem);
  align-items:start;
}
@media (max-width: 900px){
  .event-layout{ grid-template-columns:1fr; gap:3rem; }
}

/* Blocs de contenu */
.block{ padding-top:clamp(2.5rem, 5vw, 4rem); border-top:1px solid var(--line); }
.block:first-child{ padding-top:0; border-top:0; }
.block + .block{ margin-top:clamp(2.5rem, 5vw, 4rem); }
.block > h2{
  font-size:clamp(1.5rem, 3vw, 2.125rem);
  font-weight:600; line-height:1.1; letter-spacing:-.02em;
  color:var(--ink);
  margin-bottom:1.75rem;
}

/* Texte de lecture */
.prose{ max-width:64ch; }
.prose p{ font-size:1.0625rem; line-height:1.65; color:var(--ink-soft); }
.prose p + p{ margin-top:1.125rem; }
.prose p:first-child{ font-size:1.1875rem; color:var(--ink); }

/* Liste des œuvres */
.works{ counter-reset:work; }
.works li{ padding-block:1.5rem; border-top:1px solid var(--line-soft); }
.works li:first-child{ border-top:0; padding-top:0; }
.works .composer{
  display:block;
  font-size:.8125rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-mute); margin-bottom:.5rem;
}
.works .work-title{ font-size:1.125rem; font-weight:600; line-height:1.35; letter-spacing:-.01em; }
.works .work-title em{ font-style:italic; font-weight:500; }
.works .work-note{ margin-top:.625rem; font-size:.9375rem; line-height:1.55; color:var(--ink-soft); max-width:60ch; }

/* Bloc ensemble */
.ensemble{ display:grid; grid-template-columns:minmax(0,300px) minmax(0,1fr); gap:clamp(1.5rem, 3vw, 2.5rem); align-items:start; }
.ensemble-media{ aspect-ratio:3/2; }
.ensemble-name{
  font-size:1.1875rem; font-weight:600; line-height:1.25; letter-spacing:-.01em;
  margin-bottom:1rem;
}
.ensemble .prose{ max-width:56ch; }
.link-external{
  display:inline-flex; align-items:center; gap:.5rem;
  margin-top:1.5rem; min-height:44px;
  font-size:.9375rem; font-weight:600; text-decoration:none;
  border-bottom:1px solid var(--ink); padding-bottom:2px;
}
@media (max-width: 620px){
  .ensemble{ grid-template-columns:1fr; }
}

/* Distribution */
.cast{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:1rem 2.5rem; max-width:64ch; }
.cast li{ padding-bottom:1rem; border-bottom:1px solid var(--line-soft); }
.cast .name{ display:block; font-size:1rem; font-weight:600; line-height:1.35; }
.cast .role{ display:block; font-size:.9375rem; color:var(--ink-mute); margin-top:.125rem; }
.cast .affiliation{ display:block; font-size:.8125rem; color:var(--ink-mute); margin-top:.375rem; }
@media (max-width: 560px){ .cast{ grid-template-columns:1fr; } }

/* Colonne pratique */
.practical{
  position:sticky; top:calc(var(--header-h) + 1.5rem);
  border:1px solid var(--line);
  padding:clamp(1.5rem, 2.5vw, 2rem);
}
@media (max-width: 900px){ .practical{ position:static; } }
.practical h2{
  font-size:1.25rem; font-weight:600; line-height:1.2; letter-spacing:-.015em;
  color:var(--ink);
  margin-bottom:1.5rem;
}
.practical dl > div + div{ margin-top:1.125rem; padding-top:1.125rem; border-top:1px solid var(--line-soft); }
.practical dt{ font-size:.75rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-mute); margin-bottom:.25rem; }
.practical dd{ font-size:1rem; font-weight:500; line-height:1.4; }
.practical dd small{ display:block; font-size:.875rem; font-weight:400; color:var(--ink-soft); margin-top:.125rem; }
.practical .btn{ width:100%; margin-top:1.75rem; }
.practical .practical-note{ margin-top:1rem; font-size:.8125rem; line-height:1.5; color:var(--ink-mute); }

/* Barre de réservation persistante (mobile) */
.booking-bar{
  position:fixed; left:0; right:0; bottom:0; z-index:90;
  display:none; align-items:center; gap:1rem;
  padding:.75rem var(--gutter);
  padding-bottom:calc(.75rem + env(safe-area-inset-bottom));
  background:var(--bg); border-top:1px solid var(--line);
}
.booking-bar .booking-info{ font-size:.8125rem; line-height:1.35; color:var(--ink-mute); }
.booking-bar .booking-info strong{ display:block; color:var(--ink); font-size:.9375rem; }
.booking-bar .btn{ margin-left:auto; flex:0 0 auto; }
@media (max-width: 900px){ .booking-bar{ display:flex; } }

/* Marge basse pour ne pas passer sous la barre de réservation */
@media (max-width: 900px){ .site-footer{ padding-bottom:6rem; } }

/* ------------------------------------------------------------
   12. TITRES DE NIVEAU 2 — Playfair Display Medium 500 Italic
   Placé en fin de feuille pour couvrir toutes les déclarations
   de graisse antérieures. Point d'entrée unique pour la phase UI.
   ------------------------------------------------------------ */
h2,
.t-h2,
.block > h2,
.practical h2,
.footer-grid h2,
.footer-partners h2{
  font-family:var(--font-display);
  font-weight:500;
  font-style:italic;
}

/* Playfair a des chasses plus larges qu'Inter :
   le crénage négatif calé sur la sans-serif est relâché. */
.t-h2,
.block > h2{ letter-spacing:-.005em; line-height:1.1; }
.practical h2{ letter-spacing:0; }

/* ------------------------------------------------------------
   13. TITRES DE NIVEAU 1 — tout le site
   .t-display : H1 du hero de l'accueil.
   .t-h1      : H1 des pages événement.
   ------------------------------------------------------------ */
h1,
.t-display,
.event-header .t-h1{
  font-family:var(--font-display);
  font-weight:600;
  font-style:normal;
  letter-spacing:-.01em;   /* le crénage calé sur Inter tassait les empattements */
}
.t-display{ line-height:.98; }            /* Playfair a des jambages plus longs */
.event-header .t-h1{ line-height:1.02; }

/* Titre d'accueil sur une seule ligne : la taille doit désormais suivre
   la largeur de fenêtre pour que les 27 signes tiennent sans déborder.
   Plafond à 48 px, atteint vers 775 px de large — donc bien avant 1235 px,
   au-delà duquel la valeur ne bouge plus. */
.t-display{ font-size:clamp(1.25rem, 6.2vw, 3rem); }

/* ------------------------------------------------------------
   14. PAGE DE LISTE — Programmation
   ------------------------------------------------------------ */
.page-header{ padding-block:clamp(1.5rem, 3vw, 2.5rem) clamp(2.5rem, 5vw, 4rem); }
.page-header h1{
  font-size:clamp(2rem, 5.5vw, 4rem);
  line-height:1.02;
  max-width:14ch;
  margin-bottom:1.5rem;
}
.page-header .standfirst{ max-width:56ch; }
.page-header .page-meta{
  display:flex; flex-wrap:wrap; gap:.5rem 2rem;
  margin-top:1.75rem; padding-top:1.5rem; border-top:1px solid var(--line);
  font-size:.9375rem; font-weight:500; color:var(--ink-mute);
}

/* La liste reprend telle quelle celle de l'accueil, sans son filet
   d'ouverture ni son retrait supérieur : elle suit déjà l'en-tête de page. */
.programme--page{ padding-top:0; border-top:0; }

/* ------------------------------------------------------------
   15. PAGE INFOS PRATIQUES — les lieux
   ------------------------------------------------------------ */
.venue{ padding-block:clamp(2.5rem, 5vw, 4rem); border-top:1px solid var(--line); }
.venue:first-of-type{ border-top:0; padding-top:0; }

.venue-head{ margin-bottom:clamp(1.5rem, 3vw, 2.25rem); }
.venue-head h2{ margin-bottom:.625rem; }
.venue-address{ font-size:1rem; font-weight:500; color:var(--ink-soft); }

/* Visuel et carte côte à côte */
.venue-grid{
  display:grid; grid-template-columns:repeat(2, minmax(0,1fr));
  gap:clamp(1rem, 2.5vw, 2rem);
  margin-bottom:clamp(1.75rem, 3vw, 2.5rem);
}
/* Hauteur alignée sur celle de la carte voisine. `contain` garantit
   qu'aucun visuel n'est recadré, les six n'ayant pas tous la même
   orientation ; les portraits apparaissent centrés, entiers. */
.venue-media{
  width:100%; height:400px;
  display:block; object-fit:contain;
  background:var(--bg-alt);
}
@media (max-width: 780px){
  .venue-grid{ grid-template-columns:1fr; }
  .venue-media{ height:300px; }
}

/* Informations d'accès, en trois colonnes */
.venue-access{
  display:grid; grid-template-columns:repeat(3, minmax(0,1fr));
  gap:1.5rem clamp(1.5rem, 3vw, 3rem);
  margin-bottom:clamp(1.75rem, 3vw, 2.5rem);
}
.venue-access dt{
  font-size:.75rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink-mute); margin-bottom:.375rem;
}
.venue-access dd{ margin:0; font-size:.9375rem; line-height:1.55; color:var(--ink-soft); }
@media (max-width: 780px){ .venue-access{ grid-template-columns:1fr; gap:1.25rem; } }

/* Carte Google Maps intégrée */
.mapouter{ position:relative; text-align:right; width:100%; height:400px; }
.gmap_canvas{ overflow:hidden; background:none !important; width:100%; height:400px; }
.gmap_iframe{
  height:400px !important; width:100%;
  border:1px solid var(--line); display:block;
  filter:grayscale(1);
}
@media (max-width: 780px){
  .mapouter, .gmap_canvas{ height:300px; }
  .gmap_iframe{ height:300px !important; }
}

/* ------------------------------------------------------------
   16. PAGE LE FESTIVAL — éditorial
   ------------------------------------------------------------ */
.edito{ padding-block:clamp(2.5rem, 6vw, 5rem) clamp(4rem, 10vw, 9rem); }
.edito-inner{ max-width:62rem; margin-inline:auto; text-align:center; }

.edito-inner > h2{ margin-bottom:clamp(1.75rem, 4vw, 3rem); }

.edito-kicker{
  font-family:var(--font-display);
  font-style:italic; font-weight:500;
  font-size:clamp(1.125rem, 2.6vw, 1.875rem);
  line-height:1.3; letter-spacing:-.005em;
  max-width:24ch; margin:0 auto clamp(2.5rem, 5vw, 4rem);
}

.edito-text{
  font-family:var(--font-display);
  font-style:italic; font-weight:400;
  font-size:clamp(1.0625rem, 1.9vw, 1.4375rem);
  line-height:1.62; letter-spacing:-.003em;
  color:var(--ink);
  max-width:34em; margin-inline:auto;
}
.edito-text p + p{ margin-top:1.6em; }

.edito-sign{
  margin-top:clamp(3rem, 6vw, 5rem);
  font-size:.9375rem; font-weight:500; color:var(--ink-mute);
}

/* --- Reveal au défilement : chaque ligne se dénoue d'un flou de 24 px --- */
.line{ display:block; }
[data-reveal].is-ready .line{
  filter:blur(24px);
  opacity:.08;
  will-change:filter, opacity;
}
/* Sans JavaScript, ou si l'utilisateur limite les animations,
   le texte reste lisible d'emblée. */
@media (prefers-reduced-motion: reduce){
  [data-reveal].is-ready .line{ filter:none !important; opacity:1 !important; }
}

/* --- Section équipe --- */
.equipe{ padding-block:clamp(3rem, 6vw, 5rem); border-top:1px solid var(--line); }
.equipe > h2{ margin-bottom:clamp(2rem, 4vw, 3.5rem); }

.equipe-grid{
  display:grid; grid-template-columns:repeat(2, minmax(0,1fr));
  gap:clamp(2rem, 5vw, 4.5rem);
}
@media (max-width: 780px){ .equipe-grid{ grid-template-columns:1fr; gap:3rem; } }

.membre-media{ aspect-ratio:4/5; width:100%; margin-bottom:1.5rem; }
@media (max-width: 780px){ .membre-media{ aspect-ratio:3/2; } }

.membre-nom{
  font-size:1.25rem; font-weight:600; line-height:1.25; letter-spacing:-.01em;
  margin-bottom:1rem;   /* comblait auparavant l'espace laissé par la fonction */
}
.membre .prose{ max-width:46ch; }

/* ------------------------------------------------------------
   17. PAGE CONTACT — formulaire
   ------------------------------------------------------------ */
.contact-layout{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(260px, 340px);
  gap:clamp(2.5rem, 6vw, 6rem); align-items:start;
  padding-bottom:var(--stack);
}
@media (max-width: 900px){ .contact-layout{ grid-template-columns:1fr; gap:3rem; } }

.form-note{ font-size:.875rem; color:var(--ink-mute); margin-bottom:2rem; }

.field{ margin-bottom:1.5rem; }
.field-row{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:1.5rem; }
@media (max-width: 560px){ .field-row{ grid-template-columns:1fr; gap:0; } }

.field label{
  display:block; margin-bottom:.5rem;
  font-size:.8125rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
}
.field .req{ color:var(--ink-mute); font-weight:400; }

.field input,
.field textarea{
  width:100%;
  font-family:var(--font-ui); font-size:1rem; line-height:1.5; color:var(--ink);
  background:var(--bg);
  border:1px solid var(--line);
  border-radius:2px;
  padding:.875rem 1rem;
  min-height:52px;
}
.field textarea{ min-height:200px; resize:vertical; }
.field input:hover,
.field textarea:hover{ border-color:var(--ink-mute); }
.field input:focus,
.field textarea:focus{ outline:2px solid var(--ink); outline-offset:1px; border-color:var(--ink); }

/* L'état invalide ne repose pas sur la seule couleur : le trait s'épaissit */
.field input:not(:placeholder-shown):invalid,
.field textarea:not(:placeholder-shown):invalid{ border-color:#B3261E; border-width:2px; }

.form-actions{ margin-top:2rem; display:flex; flex-wrap:wrap; align-items:center; gap:1.25rem; }
.form-status{ font-size:.875rem; color:var(--ink-soft); }

/* Colonne latérale de contact direct */
.contact-aside{ border:1px solid var(--line); padding:clamp(1.5rem, 2.5vw, 2rem); }
.contact-aside h2{ font-size:1.25rem; margin-bottom:1.25rem; }
.contact-aside dt{
  font-size:.75rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-mute); margin-bottom:.25rem;
}
.contact-aside dd{ margin:0 0 1.125rem; font-size:1rem; font-weight:500; }
.contact-aside dd:last-child{ margin-bottom:0; }
.contact-aside a{ text-decoration:none; border-bottom:1px solid var(--ink); }