/* =========================================================
   FEET — Une histoire des danses jazz
   Design system + styles
   Palette derived from the show poster:
   warm paper, ink black, coral, violet, sage, oxblood.
   ========================================================= */

/* ---------- 1. Tokens ---------- */
:root{
  /* Surfaces */
  --paper:        #E9E3D7;
  --paper-2:      #E1DACB;
  --paper-3:      #F4F0E7;
  --ink:          #1B1714;
  --ink-2:        #241F1C;
  --ink-3:        #302A27;

  /* Brand accents (from the poster) */
  --coral:        #E0894F;
  --coral-soft:   #EFA972;
  --violet:       #4E3B93;
  --violet-light: #9385D6;
  --sage:         #A9AE93;
  --blood:        #8E3A34;

  /* Text */
  --on-paper:        #14110F;
  --on-paper-muted:  #574F48;
  --on-ink:          #F4F0E7;
  --on-ink-muted:    #B3A99F;

  /* Lines */
  --rule-paper: rgba(20,17,15,.16);
  --rule-ink:   rgba(244,240,231,.18);

  /* Type */
  --f-display: "Anton", "Haettenschweiler", "Arial Narrow", system-ui, sans-serif;
  --f-serif:   "Fraunces", Georgia, "Times New Roman", serif;
  --f-sans:    "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* Spacing scale (4/8 rhythm) */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px;
  --s-9: 96px; --s-10: 128px;

  /* Layout */
  --shell: 1200px;
  --gutter: clamp(20px, 5vw, 56px);
  --radius: 2px;
  --radius-lg: 4px;

  /* Motion */
  --e-out: cubic-bezier(.16,.84,.44,1);
  --e-in:  cubic-bezier(.5,0,.75,0);
  --t-fast: 160ms;
  --t-base: 240ms;
  --t-slow: 420ms;

  /* Elevation */
  --sh-1: 0 1px 2px rgba(20,17,15,.10), 0 4px 12px rgba(20,17,15,.06);
  --sh-2: 0 2px 6px rgba(20,17,15,.12), 0 16px 40px rgba(20,17,15,.14);
  --sh-3: 0 24px 70px rgba(20,17,15,.34);

  /* Tokens contextuels — valeur par défaut = surface claire.
     Redéfinis par .section--paper / .section--ink : c'est ce qui permet
     à une section de changer de surface sans retoucher ses composants. */
  --surface: var(--paper);   --surface-2: var(--paper-3);
  --fg: var(--on-paper);     --fg-muted: var(--on-paper-muted);
  --rule: var(--rule-paper); --accent-ink: var(--blood);
  --accent-card: linear-gradient(160deg, rgba(147,133,214,.24), var(--paper-3) 62%);
  --accent-card-border: rgba(78,59,147,.34);

  /* Z-index scale */
  --z-base: 0; --z-raised: 10; --z-sticky: 40; --z-header: 100; --z-modal: 1000;
}

/* ---------- 2. Reset & base ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:96px;
}
body{
  margin:0;
  background:var(--paper);
  color:var(--on-paper);
  font-family:var(--f-sans);
  font-size:17px;
  line-height:1.65;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; height:auto; }
a{ color:inherit; }
button{ font:inherit; color:inherit; }
h1,h2,h3,h4{ margin:0; line-height:1.12; }
p{ margin:0 0 1.1em; }
ul,ol{ margin:0; padding:0; list-style:none; }

::selection{ background:var(--coral); color:var(--ink); }

:focus-visible{
  outline:3px solid var(--coral);
  outline-offset:3px;
  border-radius:2px;
}
.section--ink :focus-visible{ outline-color:var(--coral-soft); }

.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;
}

.skip-link{
  position:absolute; left:var(--s-4); top:-100px; z-index:var(--z-modal);
  background:var(--ink); color:var(--on-ink);
  padding:var(--s-3) var(--s-5); font-weight:600; text-decoration:none;
  transition:top var(--t-fast) var(--e-out);
}
.skip-link:focus{ top:var(--s-4); }

/* ---------- 3. Layout primitives ---------- */
.shell{
  width:100%;
  max-width:var(--shell);
  margin-inline:auto;
  padding-inline:var(--gutter);
}
.section{
  padding-block:clamp(64px, 10vw, 128px);
  position:relative;
}
.section--paper{
  background:var(--paper); color:var(--on-paper);
  --surface:var(--paper);   --surface-2:var(--paper-3);
  --fg:var(--on-paper);     --fg-muted:var(--on-paper-muted);
  --rule:var(--rule-paper); --accent-ink:var(--blood);
  --accent-card:linear-gradient(160deg, rgba(147,133,214,.24), var(--paper-3) 62%);
  --accent-card-border:rgba(78,59,147,.34);
}
.section--ink{
  background:var(--ink); color:var(--on-ink);
  --surface:var(--ink);   --surface-2:var(--ink-2);
  --fg:var(--on-ink);     --fg-muted:var(--on-ink-muted);
  --rule:var(--rule-ink); --accent-ink:var(--coral);
  --accent-card:linear-gradient(160deg, rgba(78,59,147,.42), var(--ink-2) 62%);
  --accent-card-border:rgba(122,102,196,.42);
}
.section--ink::before{
  /* subtle grain on dark surfaces */
  content:"";
  position:absolute; inset:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
  opacity:.05; pointer-events:none; mix-blend-mode:screen;
}
.section--ink > *{ position:relative; z-index:1; }

/* Raccord entre deux sections voisines de MÊME surface (ex. Distribution
   puis Vidéos, toutes deux sur l'encre). Sans ça, les deux marges pleines se
   suivent et font une bande vide de deux hauteurs de marge. Chacune réduit
   la sienne de moitié : le raccord fait alors la hauteur d'une marge normale.
   Les classes sont posées par script.js d'après les sections RÉELLEMENT
   visibles — c'est de l'espacement, pas de la couleur : la surface, elle,
   reste déclarée dans SECTIONS. */
.section--seam-after{  padding-bottom:clamp(32px, 5vw, 64px); }
.section--seam-before{
  /* Les marges sont en vw, donc fractionnaires : la frontière entre les deux
     blocs peut tomber entre deux pixels et laisser passer un filet du fond de
     page. Le 1 px de recouvrement l'en empêche. */
  margin-top:-1px;
  padding-top:calc(clamp(32px, 5vw, 64px) + 1px);
}

/* ---------- 4. Typography ---------- */
.eyebrow{
  font-family:var(--f-sans);
  font-size:12px;
  font-weight:600;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--accent-ink);
  margin:0 0 var(--s-4);
  display:flex; align-items:center; gap:var(--s-3);
}
.eyebrow::after{
  content:""; height:1px; flex:1; max-width:80px;
  background:currentColor; opacity:.45;
}
.eyebrow--light{ color:var(--coral); }

.h2{
  font-family:var(--f-display);
  font-weight:400;
  font-size:clamp(34px, 6.2vw, 64px);
  letter-spacing:-.005em;
  line-height:1.06;
  text-transform:uppercase;
}
.section-head{ max-width:min(100%, 760px); margin-bottom:clamp(40px,6vw,72px); }
.section-head .h2{ max-width:none; text-wrap:balance; }
.section-intro{
  font-family:var(--f-serif);
  font-size:clamp(17px,2vw,20px);
  color:var(--fg-muted);
  max-width:52ch;
  margin-top:var(--s-5);
  line-height:1.6;
}
.section-head--light .section-intro{ color:var(--on-ink-muted); }

.lede{
  font-family:var(--f-serif);
  font-size:clamp(20px,2.6vw,26px);
  line-height:1.45;
  font-weight:400;
  letter-spacing:-.01em;
}
.note{
  font-size:14px;
  color:var(--fg-muted);
  font-style:italic;
  margin-top:var(--s-7);
  padding-left:var(--s-4);
  border-left:2px solid var(--rule);
  max-width:60ch;
}

/* ---------- 5. Buttons ---------- */
.btn{
  --btn-bg:var(--ink);
  --btn-fg:var(--on-ink);
  display:inline-flex; align-items:center; justify-content:center;
  gap:var(--s-2);
  min-height:48px;
  padding:var(--s-3) var(--s-6);
  background:var(--btn-bg);
  color:var(--btn-fg);
  font-family:var(--f-sans);
  font-size:14px; font-weight:600;
  letter-spacing:.09em; text-transform:uppercase;
  text-decoration:none;
  border:2px solid var(--btn-bg);
  border-radius:var(--radius);
  cursor:pointer;
  transition:background var(--t-fast) var(--e-out),
             color var(--t-fast) var(--e-out),
             border-color var(--t-fast) var(--e-out),
             transform var(--t-fast) var(--e-out),
             box-shadow var(--t-base) var(--e-out);
  will-change:transform;
}
.btn svg{ width:18px; height:18px; fill:currentColor; flex:none; }
.btn:hover{ transform:translateY(-2px); box-shadow:var(--sh-2); }
.btn:active{ transform:translateY(0); box-shadow:none; }

.btn--accent{ --btn-bg:var(--coral); --btn-fg:#1B1207; }
.btn--accent:hover{ --btn-bg:var(--coral-soft); }
.btn--dark{ --btn-bg:var(--fg,var(--ink)); --btn-fg:var(--surface,var(--on-ink)); }
.btn--dark:hover{ --btn-bg:var(--violet); border-color:var(--violet); }
.btn--ghost{
  --btn-bg:transparent; --btn-fg:var(--on-ink);
  border-color:rgba(244,240,231,.5);
  backdrop-filter:blur(6px);
}
.btn--ghost:hover{ --btn-bg:rgba(244,240,231,.14); border-color:var(--on-ink); }
.btn--sm{ min-height:44px; padding:var(--s-2) var(--s-5); font-size:12.5px; }
.btn--lg{ min-height:56px; padding:var(--s-4) var(--s-7); font-size:15px; }
.btn--block{ display:flex; width:100%; }

/* ---------- 6. Header ---------- */
.site-header{
  position:fixed; inset:0 0 auto 0;
  z-index:var(--z-header);
  transition:background var(--t-base) var(--e-out),
             box-shadow var(--t-base) var(--e-out),
             border-color var(--t-base) var(--e-out);
  border-bottom:1px solid transparent;
}
.site-header.is-stuck{
  background:rgba(27,23,20,.92);
  backdrop-filter:blur(14px) saturate(1.2);
  border-bottom-color:var(--rule-ink);
  box-shadow:0 6px 30px rgba(0,0,0,.28);
}
.header-inner{
  display:flex; align-items:center; gap:var(--s-6);
  min-height:76px;
}
.brand{
  display:flex; flex-direction:column; justify-content:center;
  text-decoration:none;
  color:var(--on-ink); flex:none; line-height:1;
  /* Le logo est un lien : il lui faut une zone tactile de 44 px, que le
     texte seul (28 px) n'atteint pas. */
  min-height:44px; padding-block:var(--s-1);
}
.brand-mark{
  font-family:var(--f-display);
  font-size:28px; letter-spacing:.02em; text-transform:uppercase;
}
.brand-sub{
  font-size:9.5px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--coral); font-weight:600; margin-top:3px;
}
.nav{ margin-left:auto; }
.nav-list{ display:flex; gap:var(--s-5); align-items:center; }
.nav-list a{
  position:relative;
  color:var(--on-ink);
  text-decoration:none;
  font-size:13.5px; font-weight:500;
  letter-spacing:.05em;
  white-space:nowrap;
  padding:var(--s-2) 2px;
  display:inline-block;
  opacity:.86;
  transition:opacity var(--t-fast) var(--e-out);
}
.nav-list a::after{
  content:""; position:absolute; left:0; right:0; bottom:0;
  height:2px; background:var(--coral);
  transform:scaleX(0); transform-origin:left;
  transition:transform var(--t-base) var(--e-out);
}
.nav-list a:hover{ opacity:1; }
.nav-list a:hover::after,
.nav-list a.is-active::after{ transform:scaleX(1); }
.nav-list a.is-active{ opacity:1; }

.header-cta{ flex:none; }
.nav-cta{ display:none; }

.burger{
  display:none;
  width:48px; height:48px;
  background:none; border:0; cursor:pointer;
  padding:12px; margin-left:auto;
}
.burger span{
  display:block; height:2px; background:var(--on-ink);
  border-radius:2px; margin:4px 0;
  transition:transform var(--t-base) var(--e-out), opacity var(--t-fast) var(--e-out);
}
.burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(6px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }

.scroll-progress{
  position:absolute; left:0; bottom:-1px; height:2px;
  width:100%; transform:scaleX(0); transform-origin:left;
  background:linear-gradient(90deg,var(--coral),var(--violet-light));
}

/* ---------- 7. Hero ---------- */
.hero{
  position:relative;
  min-height:100svh;
  display:flex; align-items:flex-end;
  padding-block:clamp(104px,13vh,140px) clamp(64px,10vh,112px);
  color:var(--on-ink);
  background:var(--ink);
  overflow:hidden;
  isolation:isolate;
}
.hero-media{ position:absolute; inset:0; z-index:-1; }
.hero-media img{
  width:100%; height:100%; object-fit:cover; object-position:center 38%;
  transform:scale(1.06);
  animation:heroZoom 16s var(--e-out) forwards;
}
@keyframes heroZoom{ to{ transform:scale(1); } }
.hero-scrim{
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(27,23,20,.82) 0%, rgba(27,23,20,.42) 34%, rgba(27,23,20,.72) 72%, rgba(27,23,20,.96) 100%),
    radial-gradient(120% 80% at 15% 60%, rgba(78,59,147,.34), transparent 60%),
    radial-gradient(90% 70% at 85% 20%, rgba(224,137,79,.20), transparent 60%);
}
.hero-inner{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,300px);
  gap:clamp(32px,6vw,80px);
  align-items:end;
}
.hero-title{
  font-family:var(--f-display);
  font-weight:400;
  font-size:clamp(96px, 21vw, 260px);
  line-height:.86;
  letter-spacing:-.015em;
  text-transform:uppercase;
  margin:var(--s-2) 0 var(--s-4);
  color:var(--paper-3);
  text-shadow:0 18px 60px rgba(0,0,0,.5);
}
.hero-tagline{
  font-family:var(--f-display);
  font-size:clamp(24px,4.4vw,46px);
  line-height:1.1;
  text-transform:uppercase;
  letter-spacing:.005em;
  margin:0 0 var(--s-5);
  color:var(--paper-3);
}
.hero-tagline em{ font-style:normal; color:var(--coral); }
.hero-lede{
  font-family:var(--f-serif);
  font-size:clamp(17px,2vw,21px);
  line-height:1.55;
  max-width:44ch;
  color:rgba(244,240,231,.9);
  margin-bottom:var(--s-6);
}
.hero-lede strong{ color:var(--paper-3); font-weight:600; }
.hero-actions{ display:flex; flex-wrap:wrap; gap:var(--s-3); margin-bottom:var(--s-6); }
.hero-meta{
  display:flex; flex-wrap:wrap; gap:var(--s-3) var(--s-6);
  padding-top:var(--s-5);
  border-top:1px solid var(--rule-ink);
  font-size:13px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--on-ink-muted);
}
.hero-meta strong{
  font-family:var(--f-display); font-weight:400;
  font-size:20px; color:var(--coral); margin-right:6px;
  letter-spacing:.01em;
}

.hero-poster{
  margin:0;
  align-self:center;
  transform:rotate(-2.2deg);
  box-shadow:var(--sh-3);
  border:6px solid var(--paper-3);
  transition:transform var(--t-slow) var(--e-out);
}
.hero-poster:hover{ transform:rotate(0deg) translateY(-6px); }

/* ---------- 9. Édito ---------- */
.edito{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  gap:clamp(32px,6vw,80px);
  align-items:start;
}
.edito-copy p{ max-width:56ch; }
.edito-copy p:not(.lede){ color:var(--fg-muted); }
.edito-copy strong{ color:var(--fg); font-weight:600; }

.edito-media{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:var(--s-4);
  align-items:start;
}
.edito-fig{ margin:0; overflow:hidden; background:var(--surface-2); }
.edito-fig img{
  width:100%; height:100%; object-fit:cover;
  transition:transform var(--t-slow) var(--e-out);
}
.edito-fig:hover img{ transform:scale(1.04); }
/* Grille franche : la grande photo occupe la largeur, les deux suivantes se
   partagent la ligne à hauteur égale. Bords alignés des deux côtés. */
.edito-fig--a{ grid-column:1 / -1; aspect-ratio:3/2; }
.edito-fig--b,
.edito-fig--c{ aspect-ratio:4/5; }

/* ---------- 10. Distribution ---------- */
.cast{
  display:grid;
  grid-template-columns:repeat(var(--cast-cols,2),minmax(0,1fr)) minmax(0,1.25fr);
  gap:clamp(28px,5vw,64px);
  align-items:start;
}
.cast-title{
  font-family:var(--f-sans);
  font-size:12px; font-weight:700;
  letter-spacing:.24em; text-transform:uppercase;
  display:inline-block;
  padding:6px var(--s-3);
  margin-bottom:var(--s-5);
  color:#14110F;
}
.cast-title--violet{ background:var(--violet-light); }
.cast-title--sage{ background:var(--sage); }
.cast-list li{
  padding-block:var(--s-4);
  border-bottom:1px solid var(--rule);
}
.cast-list li:first-child{ border-top:1px solid var(--rule); }
.cast-name{
  display:block;
  font-family:var(--f-display);
  font-size:clamp(21px,2.6vw,28px);
  text-transform:uppercase; letter-spacing:.005em;
  line-height:1.14;
}
.cast-role{
  display:block; margin-top:4px;
  font-family:var(--f-serif); font-style:italic;
  font-size:15px; color:var(--fg-muted);
}
.cast-photo{ margin:0; }
.cast-photo img{ width:100%; }

/* ---------- 12. Vidéos ---------- */
.videos{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(20px,3vw,36px);
}
.video-card--wide{ grid-column:1 / -1; }
.video-facade{
  position:relative; display:block; width:100%;
  padding:0; border:0; background:var(--surface-2);
  cursor:pointer; overflow:hidden;
  aspect-ratio:16/9;
  border-radius:var(--radius-lg);
}
.video-facade img{
  width:100%; height:100%; object-fit:cover;
  transition:transform var(--t-slow) var(--e-out), filter var(--t-base) var(--e-out);
  filter:saturate(.92) brightness(.86);
}
.video-facade:hover img{ transform:scale(1.03); filter:saturate(1) brightness(1); }
.video-play{
  position:absolute; inset:auto auto 50% 50%;
  transform:translate(-50%,50%);
  width:72px; height:72px; border-radius:50%;
  background:var(--coral); color:#1B1207;
  display:grid; place-items:center;
  box-shadow:0 10px 34px rgba(0,0,0,.45);
  transition:transform var(--t-base) var(--e-out), background var(--t-base) var(--e-out);
}
.video-play svg{ width:30px; height:30px; fill:currentColor; margin-left:3px; }
.video-facade:hover .video-play{ transform:translate(-50%,50%) scale(1.08); background:var(--coral-soft); }
.video-facade iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.video-meta{ padding-top:var(--s-4); }
.video-meta h3{
  font-family:var(--f-display); font-size:20px; text-transform:uppercase;
  margin-bottom:var(--s-1);
}
.video-meta p{ margin:0; font-size:14.5px; color:var(--fg-muted); }

/* ---------- 13. Galerie (masonry en colonnes) ---------- */
.gallery{
  columns:4;
  column-gap:var(--s-2);
  padding-inline:var(--s-2);
}
.gallery-item{
  position:relative; display:block; width:100%;
  padding:0; border:0; margin:0 0 var(--s-2);
  background:var(--surface-2); cursor:pointer; overflow:hidden;
  break-inside:avoid;
}
.gallery-item img{
  width:100%; height:auto;
  transition:transform var(--t-slow) var(--e-out), filter var(--t-base) var(--e-out);
  filter:saturate(.9);
}
.gallery-item::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, transparent 55%, rgba(20,17,15,.55));
  opacity:0; transition:opacity var(--t-base) var(--e-out);
}
.gallery-item:hover img{ transform:scale(1.05); filter:saturate(1.05); }
.gallery-item:hover::after{ opacity:1; }
.gallery-item .zoom{
  position:absolute; right:12px; bottom:12px;
  width:36px; height:36px; border-radius:50%;
  background:var(--paper-3); color:var(--ink);
  display:grid; place-items:center;
  opacity:0; transform:translateY(6px);
  transition:opacity var(--t-base) var(--e-out), transform var(--t-base) var(--e-out);
  z-index:1;
}
.gallery-item .zoom svg{ width:18px; height:18px; }
.gallery-item:hover .zoom,
.gallery-item:focus-visible .zoom{ opacity:1; transform:translateY(0); }
@media (max-width:1100px){ .gallery{ columns:3; } }
@media (max-width:760px){ .gallery{ columns:2; } }

/* ---------- 14. Formats ---------- */
.formats{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(16px,2.5vw,28px);
}
.format-card{
  display:flex; flex-direction:column;
  padding:clamp(24px,3vw,36px);
  background:var(--surface-2);
  border:1px solid var(--rule);
  border-radius:var(--radius-lg);
  transition:transform var(--t-base) var(--e-out), border-color var(--t-base) var(--e-out);
}
.format-card:hover{ transform:translateY(-4px); border-color:var(--coral); }
.format-kicker{
  font-size:11.5px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--accent-ink); font-weight:600; margin-bottom:var(--s-4);
}
.format-title{
  font-family:var(--f-display); font-size:clamp(24px,3vw,30px);
  text-transform:uppercase; margin-bottom:var(--s-3);
}
.format-duration{
  font-family:var(--f-display);
  font-size:clamp(34px,5vw,46px); line-height:1;
  color:var(--accent-ink); margin:0 0 var(--s-5);
  font-variant-numeric:tabular-nums;
}
.format-list{ border-top:1px solid var(--rule); }
.format-list li{
  padding-block:var(--s-3);
  border-bottom:1px solid var(--rule);
  font-size:15px; color:var(--fg-muted);
  display:flex; align-items:center; gap:var(--s-3);
}
.format-list li::before{
  content:""; width:5px; height:5px; border-radius:50%;
  background:var(--coral); flex:none;
}
/* Le dégradé suit la surface : sur fond clair, un violet pâle sur papier ;
   sur fond sombre, le violet profond d'origine. Codé en dur, il produisait
   du texte sombre sur une carte sombre dès que la section passait au clair. */
.format-card--accent{
  background:var(--accent-card);
  border-color:var(--accent-card-border);
}
.format-link{
  margin-top:auto; padding-top:var(--s-5);
  display:inline-flex; align-items:center; gap:var(--s-2);
  color:var(--accent-ink); text-decoration:none;
  font-size:13px; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  min-height:44px;
}
.format-link svg{ width:18px; height:18px; transition:transform var(--t-base) var(--e-out); }
.format-link:hover svg{ transform:translateX(4px); }

/* ---------- 15. Tournée ---------- */
.tour{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,300px);
  gap:clamp(32px,5vw,64px);
  align-items:start;
}
.tour-list{ border-top:2px solid var(--fg); }
.tour-row{
  display:grid;
  /* max-content : une date sur plusieurs jours (« 11 → 14 ») dépasse une
     largeur fixe et venait chevaucher le nom du lieu. */
  grid-template-columns:minmax(110px,max-content) minmax(0,1fr) auto;
  gap:var(--s-5);
  align-items:center;
  padding-block:var(--s-5);
  border-bottom:1px solid var(--rule);
  transition:background var(--t-fast) var(--e-out);
}
.tour-row:hover{ background:rgba(128,128,128,.09); }
.tour-date{ display:flex; align-items:baseline; gap:var(--s-2); }
.tour-day{
  font-family:var(--f-display);
  font-size:clamp(30px,4vw,40px); line-height:1;
  font-variant-numeric:tabular-nums;
  display:inline-flex; align-items:baseline; gap:2px;
}
.tour-day .to{ font-style:normal; font-size:.5em; color:var(--fg-muted); padding-inline:1px; }
.tour-month{
  display:flex; flex-direction:column;
  font-size:12px; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:var(--accent-ink); line-height:1.25;
}
.tour-month i{ font-style:normal; color:var(--fg-muted); font-weight:500; letter-spacing:.1em; }
.tour-where h3{
  font-family:var(--f-display);
  font-size:clamp(20px,2.4vw,26px); text-transform:uppercase;
  line-height:1.14;
}
.tour-where p{ margin:4px 0 0; font-size:14.5px; color:var(--fg-muted); }
.tour-action{ justify-self:end; }
.tag{
  display:inline-block; padding:8px var(--s-4);
  border:1px dashed var(--rule);
  font-size:11.5px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--fg-muted); border-radius:var(--radius);
}
.tour-row--feature{
  background:linear-gradient(90deg, rgba(224,137,79,.16), transparent 70%);
  border-bottom-color:var(--fg);
}
.tour-row--feature:hover{ background:linear-gradient(90deg, rgba(224,137,79,.24), transparent 70%); }

.tour-aside{
  position:sticky; top:110px;
  background:var(--surface-2);
  border:1px solid var(--rule);
  padding:var(--s-4);
  box-shadow:var(--sh-1);
}
.tour-poster{ margin:0 0 var(--s-4); }
.tour-aside-text{
  font-family:var(--f-serif); font-size:15.5px;
  color:var(--fg-muted); margin-bottom:var(--s-4);
}
.tour-aside-text strong{ color:var(--fg); }

/* ---------- 16. Contact ---------- */
.contact{
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:clamp(32px,6vw,80px);
  align-items:center;
}
.contact-lede{
  font-family:var(--f-serif);
  font-size:clamp(17px,2vw,20px);
  color:var(--fg-muted);
  max-width:46ch;
  margin:var(--s-5) 0 var(--s-6);
  line-height:1.6;
}
.contact-card{
  background:var(--surface-2);
  border:1px solid var(--rule);
  border-left:4px solid var(--coral);
  padding:clamp(28px,4vw,40px);
  border-radius:var(--radius-lg);
}
.contact-org{
  font-family:var(--f-display); font-size:26px;
  text-transform:uppercase; margin-bottom:var(--s-1);
}
.contact-person{
  font-family:var(--f-serif); font-style:italic;
  color:var(--accent-ink); font-size:17px; margin-bottom:var(--s-5);
}
.contact-links li{
  display:flex; align-items:center; gap:var(--s-3);
  padding-block:var(--s-3);
  border-top:1px solid var(--rule);
}
.contact-links svg{ width:22px; height:22px; flex:none; color:var(--accent-ink); }
.contact-links a{
  color:var(--fg); text-decoration:none;
  font-size:15.5px; word-break:break-word;
  min-height:44px; display:flex; align-items:center;
  border-bottom:1px solid transparent;
  transition:color var(--t-fast) var(--e-out), border-color var(--t-fast) var(--e-out);
}
.contact-links a:hover{ color:var(--accent-ink); border-bottom-color:var(--accent-ink); }

/* ---------- 17. Footer ---------- */
.site-footer{
  background:var(--ink);
  color:var(--on-ink-muted);
  padding-block:var(--s-8) var(--s-6);
  border-top:1px solid var(--rule-ink);
}
.footer-inner{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:var(--s-6);
  align-items:start;
}
.brand-mark--footer{ color:var(--paper-3); font-size:40px; display:block; }
.footer-brand p{
  margin:var(--s-2) 0 0; font-size:12px;
  letter-spacing:.2em; text-transform:uppercase; color:var(--coral);
}
.footer-nav{ display:flex; flex-wrap:wrap; gap:var(--s-2) var(--s-5); justify-content:flex-end; }
.footer-nav a{
  color:var(--on-ink-muted); text-decoration:none; font-size:14px;
  /* min-width en plus de min-height : « Dates » ne fait que 37 px de large,
     sous le seuil tactile. La zone déborde sans décaler le texte. */
  min-height:44px; min-width:44px;
  display:inline-flex; align-items:center;
  transition:color var(--t-fast) var(--e-out);
}
.footer-nav a:hover{ color:var(--coral); }
.footer-legal{
  grid-column:1 / -1;
  margin:0; padding-top:var(--s-5);
  border-top:1px solid var(--rule-ink);
  font-size:12.5px;
}

/* ---------- 18. Lightbox ---------- */
.lightbox{
  position:fixed; inset:0; z-index:var(--z-modal);
  background:rgba(10,8,7,.94);
  backdrop-filter:blur(8px);
  display:grid; place-items:center;
  padding:clamp(16px,4vw,48px);
  opacity:0;
  transition:opacity var(--t-base) var(--e-out);
}
.lightbox[hidden]{ display:none; }
.lightbox.is-open{ opacity:1; }
.lightbox-figure{
  margin:0; max-width:min(1200px,92vw); max-height:82vh;
  display:flex; flex-direction:column; align-items:center; gap:var(--s-3);
}
.lightbox-figure img{
  max-width:100%; max-height:74vh; object-fit:contain;
  box-shadow:var(--sh-3);
  transition:opacity var(--t-fast) var(--e-out);
}
.lightbox-close,
.lightbox-nav{
  position:absolute;
  width:52px; height:52px;
  display:grid; place-items:center;
  background:rgba(244,240,231,.08);
  border:1px solid rgba(244,240,231,.22);
  color:var(--on-ink);
  border-radius:50%; cursor:pointer;
  transition:background var(--t-fast) var(--e-out), transform var(--t-fast) var(--e-out);
}
.lightbox-close svg,.lightbox-nav svg{ width:24px; height:24px; }
.lightbox-close:hover,.lightbox-nav:hover{ background:rgba(244,240,231,.2); }
.lightbox-close:active,.lightbox-nav:active{ transform:scale(.94); }
.lightbox-close{ top:clamp(12px,3vw,28px); right:clamp(12px,3vw,28px); }
.lightbox-nav--prev{ left:clamp(8px,2vw,28px); top:50%; margin-top:-26px; }
.lightbox-nav--next{ right:clamp(8px,2vw,28px); top:50%; margin-top:-26px; }
.lightbox-counter{
  position:absolute; bottom:clamp(12px,3vw,28px); left:50%;
  transform:translateX(-50%);
  margin:0; font-size:12px; letter-spacing:.18em;
  color:var(--on-ink-muted); font-variant-numeric:tabular-nums;
}
body.is-locked{ overflow:hidden; }

/* ---------- 19. Reveal animation ---------- */
.reveal{
  opacity:0;
  transform:translateY(24px);
  transition:opacity 700ms var(--e-out), transform 700ms var(--e-out);
  transition-delay:calc(var(--d,0) * 90ms);
}
.reveal.is-in{ opacity:1; transform:none; }

/* ---------- 20. Responsive ---------- */
@media (max-width:1180px){
  .header-inner{ gap:var(--s-5); }
  .nav-list{ gap:var(--s-4); }
  .nav-list a{ font-size:12.5px; letter-spacing:.03em; }
  .hero-inner{ grid-template-columns:minmax(0,1fr) minmax(0,240px); }
}
@media (max-width:1040px){
  .header-cta{ display:none; }
}

@media (max-width:900px){
  .header-cta{ display:none; }
  .burger{ display:block; }
  .nav{
    position:fixed; inset:76px 0 auto 0;
    background:rgba(27,23,20,.98);
    backdrop-filter:blur(16px);
    border-bottom:1px solid var(--rule-ink);
    padding:var(--s-4) var(--gutter) var(--s-6);
    transform:translateY(-12px);
    opacity:0; visibility:hidden; pointer-events:none;
    transition:opacity var(--t-base) var(--e-out), transform var(--t-base) var(--e-out), visibility var(--t-base);
    max-height:calc(100svh - 76px); overflow-y:auto;
  }
  .nav.is-open{ opacity:1; visibility:visible; transform:none; pointer-events:auto; }
  /* La page mentions légales n'a pas de menu déroulant : sa nav réduite
     (un seul lien) reste en place, sinon elle disparaîtrait sur mobile. */
  .nav--plain{
    position:static; padding:0; background:none; backdrop-filter:none;
    border:0; opacity:1; visibility:visible; transform:none;
    pointer-events:auto; max-height:none; overflow:visible;
  }
  .nav--plain .nav-list{ flex-direction:row; }
  .nav--plain .nav-list a{ font-size:13.5px; padding:var(--s-2) 0; border:0; }
  .nav-list{ flex-direction:column; align-items:stretch; gap:0; }
  .nav-list a{
    display:block; font-size:17px; padding:var(--s-4) 0;
    border-bottom:1px solid var(--rule-ink);
  }
  .nav-list a::after{ display:none; }
  .nav-cta{ display:flex; margin-top:var(--s-5); }

  .hero{ min-height:auto; padding-block:104px var(--s-8); }
  .hero-inner{ grid-template-columns:1fr; }
  .hero-media img{ object-position:center 32%; }
  .hero-poster{ max-width:240px; margin-top:var(--s-7); }

  .edito{ grid-template-columns:1fr; }
  .cast{ grid-template-columns:1fr 1fr; }
  .cast-photo{ grid-column:1 / -1; }
  .videos{ grid-template-columns:1fr; }
  .formats{ grid-template-columns:1fr; }
  .tour{ grid-template-columns:1fr; }
  .tour-aside{ position:static; max-width:420px; }
  .contact{ grid-template-columns:1fr; }
  .footer-inner{ grid-template-columns:1fr; }
  .footer-nav{ justify-content:flex-start; }
}

@media (max-width:640px){
  body{ font-size:16px; }
  .brand-sub{ display:none; }
  .hero-title{ font-size:clamp(76px,25vw,140px); }
  .hero-actions .btn{ width:100%; }
  .cast{ grid-template-columns:1fr; }
  .tour-row{
    grid-template-columns:minmax(76px,max-content) minmax(0,1fr);
    row-gap:var(--s-3);
  }
  .tour-action{ grid-column:1 / -1; justify-self:start; }
  .lightbox-nav{ width:46px; height:46px; }
}

/* ---------- 21. Reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
  .reveal{ opacity:1; transform:none; }
  .hero-media img{ transform:none; }
}

/* ---------- 22. Print ---------- */
@media print{
  .site-header,.lightbox,.video-play,.footer-nav{ display:none !important; }
  body{ background:#fff; color:#000; }
  .section--ink{ background:#fff; color:#000; }
  .reveal{ opacity:1; transform:none; }
}

/* ---------- 23. Replis quand le CMS vide un bloc ----------
   Ces variantes sont posées par script.js : une mise en page à deux colonnes
   doit redevenir une colonne pleine quand la seconde n'a plus de contenu,
   sinon il reste un vide inexpliqué à droite. */
.tour--full{ grid-template-columns:minmax(0,1fr); }
.contact--full{ grid-template-columns:minmax(0,1fr); }
.contact--full .contact-lede{ max-width:60ch; }

/* Le collage éditorial est calibré pour 3 images ; avec 1 ou 2 on retombe
   sur une grille simple plutôt que sur une composition bancale. */
.edito-media--simple .edito-fig{ grid-column:auto; aspect-ratio:4/5; }
.edito-media--simple .edito-fig:only-child{ grid-column:1 / -1; aspect-ratio:3/2; }

/* ---------- 24. Réseaux sociaux ----------
   Liens en icône seule : le nom de la plateforme est porté par aria-label,
   et la zone cliquable fait 44 px même si le glyphe en fait 20. */
.socials-row,
.hero-socials,
.footer-socials{
  display:flex; flex-wrap:wrap; gap:var(--s-2);
  list-style:none; margin:0; padding:0;
}
.hero-socials a,
.footer-socials a{
  display:grid; place-items:center;
  width:44px; height:44px;
  border-radius:50%;
  color:var(--on-ink);
  border:1px solid rgba(244,240,231,.28);
  transition:background var(--t-fast) var(--e-out),
             border-color var(--t-fast) var(--e-out),
             color var(--t-fast) var(--e-out),
             transform var(--t-fast) var(--e-out);
}
.hero-socials svg,
.footer-socials svg{ width:20px; height:20px; fill:currentColor; }
.hero-socials a:hover,
.footer-socials a:hover{
  background:var(--coral); border-color:var(--coral);
  color:#1B1207; transform:translateY(-2px);
}
.hero-socials{ margin-top:var(--s-5); }
.footer-socials{ margin-top:var(--s-5); }

/* ---------- 25. Page mentions légales ---------- */
.nav--plain{ margin-left:auto; }
.legal{
  display:grid;
  gap:var(--s-6);
  max-width:70ch;
}
.legal-block h2{
  font-family:var(--f-sans);
  font-size:13px; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--accent-ink);
  margin-bottom:var(--s-3);
}
.legal-block p{
  margin:0;
  font-family:var(--f-serif);
  font-size:16.5px; line-height:1.7;
  color:var(--fg-muted);
}
body[data-page="legal"] .section{ padding-top:calc(76px + clamp(48px,7vw,96px)); }