/* =========================================================
   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:          #14110F;
  --ink-2:        #1D1917;
  --ink-3:        #2A2422;

  /* 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);

  /* 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); }
.section--ink{
  background:var(--ink);
  color:var(--on-ink);
}
.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; }

/* ---------- 4. Typography ---------- */
.eyebrow{
  font-family:var(--f-sans);
  font-size:12px;
  font-weight:600;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--blood);
  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(--on-paper-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(--on-paper-muted);
  font-style:italic;
  margin-top:var(--s-7);
  padding-left:var(--s-4);
  border-left:2px solid var(--rule-paper);
  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(--ink); --btn-fg: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(20,17,15,.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; text-decoration:none;
  color:var(--on-ink); flex:none; line-height: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:140px clamp(72px,12vh,120px);
  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(20,17,15,.82) 0%, rgba(20,17,15,.42) 34%, rgba(20,17,15,.72) 72%, rgba(20,17,15,.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;
  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); }

.scroll-cue{
  position:absolute; left:50%; bottom:var(--s-5);
  transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:var(--s-2);
  color:var(--on-ink-muted); text-decoration:none;
  font-size:10.5px; letter-spacing:.24em; text-transform:uppercase;
  padding:var(--s-2);
}
.scroll-cue__line{
  width:1px; height:40px;
  background:linear-gradient(180deg, transparent, var(--coral));
  animation:cue 2.4s ease-in-out infinite;
}
@keyframes cue{ 0%,100%{ opacity:.25; transform:scaleY(.6); } 50%{ opacity:1; transform:scaleY(1); } }

/* ---------- 8. Marquee ---------- */
.marquee{
  background:var(--coral);
  color:#1B1207;
  border-block:2px solid var(--ink);
  overflow:hidden;
  padding-block:var(--s-3);
}
.marquee-track{
  display:flex; align-items:center; gap:var(--s-5);
  white-space:nowrap; width:max-content;
  animation:slide 38s linear infinite;
  font-family:var(--f-display);
  font-size:clamp(20px,3vw,32px);
  text-transform:uppercase;
  letter-spacing:.02em;
}
.marquee-track .dot{ font-size:.5em; opacity:.6; }
@keyframes slide{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

/* ---------- 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(--on-paper-muted); }
.edito-copy strong{ color:var(--on-paper); font-weight:600; }

.stats{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:var(--s-4);
  margin-top:var(--s-7);
  padding-top:var(--s-6);
  border-top:2px solid var(--ink);
}
.stats li{ display:flex; flex-direction:column; }
.stats-num{
  font-family:var(--f-display); font-size:clamp(38px,6vw,58px);
  line-height:.9; color:var(--violet);
  font-variant-numeric:tabular-nums;
}
.stats-label{
  font-size:12px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--on-paper-muted); margin-top:var(--s-2);
}

.edito-media{
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:var(--s-4);
}
.edito-fig{ margin:0; overflow:hidden; background:var(--ink-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); }
.edito-fig--a{ grid-column:1 / 7; aspect-ratio:3/2; }
.edito-fig--b{ grid-column:1 / 4; aspect-ratio:1/1; margin-top:var(--s-2); }
.edito-fig--c{ grid-column:4 / 7; aspect-ratio:2/3; margin-top:calc(var(--s-6) * -1); }

/* ---------- 10. Distribution ---------- */
.cast{
  display:grid;
  grid-template-columns:repeat(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-ink);
}
.cast-list li:first-child{ border-top:1px solid var(--rule-ink); }
.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(--on-ink-muted);
}
.cast-photo{ margin:0; }
.cast-photo img{ width:100%; }
.cast-photo figcaption{
  margin-top:var(--s-3);
  font-size:13px; color:var(--on-ink-muted);
  font-family:var(--f-serif); font-style:italic;
}

/* ---------- 11. Chronologie ---------- */
.timeline{ position:relative; margin-top:var(--s-6); }
.timeline::before{
  content:""; position:absolute;
  left:calc(var(--tl-col, 150px) - 1px); top:8px; bottom:8px;
  width:2px; background:var(--rule-paper);
}
.timeline-item{
  --tl-pad:var(--s-6);
  position:relative;
  display:grid;
  grid-template-columns:var(--tl-col,150px) minmax(0,1fr);
  gap:clamp(20px,4vw,48px);
  padding-block:var(--tl-pad);
}
.timeline-item::before{
  content:""; position:absolute;
  left:calc(var(--tl-col,150px) - 7px); top:calc(var(--tl-pad) + 8px);
  width:14px; height:14px; border-radius:50%;
  background:var(--paper); border:3px solid var(--violet);
  transition:background var(--t-base) var(--e-out), transform var(--t-base) var(--e-out);
}
.timeline-item:nth-child(3n)::before{ border-color:var(--coral); }
.timeline-item:nth-child(3n+2)::before{ border-color:var(--blood); }
.timeline-item:hover::before{ background:var(--violet); transform:scale(1.2); }
.timeline-year{
  font-family:var(--f-display);
  font-size:clamp(24px,3.4vw,34px);
  line-height:1; text-transform:uppercase;
  color:var(--on-paper);
  padding-right:var(--s-5);
  text-align:right;
  font-variant-numeric:tabular-nums;
}
.timeline-body h3{
  font-family:var(--f-display);
  font-size:clamp(20px,2.6vw,26px);
  text-transform:uppercase;
  margin-bottom:var(--s-3);
  color:var(--violet);
}
.timeline-item:nth-child(3n) .timeline-body h3{ color:var(--blood); }
.timeline-item:nth-child(3n+2) .timeline-body h3{ color:var(--ink); }
.timeline-body p{
  margin:0; max-width:58ch;
  color:var(--on-paper-muted);
  font-family:var(--f-serif); font-size:17px; line-height:1.6;
}

/* ---------- 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(--ink-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(--on-ink-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(--ink-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(--ink-2);
  border:1px solid var(--rule-ink);
  border-radius:var(--radius-lg);
  transition:transform var(--t-base) var(--e-out), border-color var(--t-base) var(--e-out), background var(--t-base) var(--e-out);
}
.format-card:hover{ transform:translateY(-4px); border-color:rgba(224,137,79,.5); background:var(--ink-3); }
.format-kicker{
  font-size:11.5px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--sage); 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(--coral); margin:0 0 var(--s-5);
  font-variant-numeric:tabular-nums;
}
.format-list{ border-top:1px solid var(--rule-ink); }
.format-list li{
  padding-block:var(--s-3);
  border-bottom:1px solid var(--rule-ink);
  font-size:15px; color:var(--on-ink-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;
}
.format-card--accent{
  background:linear-gradient(160deg, rgba(78,59,147,.42), var(--ink-2) 62%);
  border-color:rgba(122,102,196,.42);
}
.format-link{
  margin-top:auto; padding-top:var(--s-5);
  display:inline-flex; align-items:center; gap:var(--s-2);
  color:var(--coral); 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(--ink); }
.tour-row{
  display:grid;
  grid-template-columns:110px minmax(0,1fr) auto;
  gap:var(--s-5);
  align-items:center;
  padding-block:var(--s-5);
  border-bottom:1px solid var(--rule-paper);
  transition:background var(--t-fast) var(--e-out);
}
.tour-row:hover{ background:rgba(20,17,15,.04); }
.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(--on-paper-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(--blood); line-height:1.25;
}
.tour-month i{ font-style:normal; color:var(--on-paper-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(--on-paper-muted); }
.tour-action{ justify-self:end; }
.tag{
  display:inline-block; padding:8px var(--s-4);
  border:1px dashed var(--rule-paper);
  font-size:11.5px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--on-paper-muted); border-radius:var(--radius);
}
.tour-row--feature{
  background:linear-gradient(90deg, rgba(224,137,79,.16), transparent 70%);
  border-bottom-color:var(--ink);
}
.tour-row--feature:hover{ background:linear-gradient(90deg, rgba(224,137,79,.24), transparent 70%); }

.tour-aside{
  position:sticky; top:110px;
  background:var(--paper-3);
  border:1px solid var(--rule-paper);
  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(--on-paper-muted); margin-bottom:var(--s-4);
}
.tour-aside-text strong{ color:var(--on-paper); }

/* ---------- 16. Contact ---------- */
.section--contact{ background:var(--ink-2); }
.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(--on-ink-muted);
  max-width:46ch;
  margin:var(--s-5) 0 var(--s-6);
  line-height:1.6;
}
.contact-card{
  background:var(--ink);
  border:1px solid var(--rule-ink);
  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(--sage); 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-ink);
}
.contact-links svg{ width:22px; height:22px; flex:none; color:var(--coral); }
.contact-links a{
  color:var(--on-ink); 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(--coral); border-bottom-color:var(--coral); }

/* ---------- 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-height: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-figure figcaption{
  color:var(--on-ink-muted); font-size:14px; text-align:center;
  font-family:var(--f-serif); font-style:italic;
}
.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){
  :root{ --tl-col:96px; }
  .header-cta{ display:none; }
  .burger{ display:block; }
  .nav{
    position:fixed; inset:76px 0 auto 0;
    background:rgba(20,17,15,.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; }
  .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); }
  .scroll-cue{ display:none; }

  .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; }
  :root{ --tl-col:76px; }
  .brand-sub{ display:none; }
  .hero-title{ font-size:clamp(76px,25vw,140px); }
  .hero-actions .btn{ width:100%; }
  .stats{ grid-template-columns:1fr; gap:var(--s-5); }
  .stats li{ flex-direction:row; align-items:baseline; gap:var(--s-3); }
  .stats-num{ font-size:38px; min-width:64px; }
  .edito-media{ gap:var(--s-2); }
  .edito-fig--c{ margin-top:0; }
  .cast{ grid-template-columns:1fr; }
  .timeline-item{ --tl-pad:var(--s-5); }
  .timeline-year{ font-size:20px; padding-right:var(--s-4); }
  .tour-row{
    grid-template-columns:88px 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; }
  .marquee-track{ animation:none; }
  .hero-media img{ transform:none; }
}

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