/* accueil.css — home page (approved mockup « La nuit de l'arène »). */

/* ============ HERO ============ */
.hero { position: relative; min-height: min(100svh, 980px); display: grid; align-items: end; overflow: hidden; isolation: isolate; }
.hero__photo { position: absolute; inset: 0; z-index: -3; }
.hero__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; transform: scale(1.08); will-change: transform; }
/* Overlay measured 2026-10-22 (Chrome, 1440 and 390 px): cream hero text ≥ 7.2:1 against the BRIGHTEST pixel behind it. Re-measure if the hero photo changes. */
.hero__voile { position: absolute; inset: 0; z-index: -2; background:
  linear-gradient(90deg, color-mix(in oklab, var(--nuit) 80%, transparent) 0%, color-mix(in oklab, var(--nuit) 52%, transparent) 45%, color-mix(in oklab, var(--nuit) 10%, transparent) 78%),
  linear-gradient(180deg, color-mix(in oklab, var(--nuit) 60%, transparent) 0%, color-mix(in oklab, var(--nuit) 25%, transparent) 26%, color-mix(in oklab, var(--nuit) 72%, transparent) 58%, var(--nuit) 100%),
  radial-gradient(120% 70% at 50% 100%, color-mix(in oklab, var(--bordeaux) 55%, transparent), transparent 60%); }
#poussiere { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; pointer-events: none; }
.hero__contenu { padding-block: calc(var(--nav-h) + var(--space-3xl)) var(--space-2xl); display: grid; gap: var(--space-m); justify-items: start; }
.hero__logo { width: clamp(110px, 14vw, 170px); height: auto; filter: var(--ombre-logo); }
.hero h1 { font-size: var(--step-hero); text-shadow: var(--ombre-texte); }
.hero h1 .l1 { display: block; }
.hero h1 .l2 { display: block; color: transparent; -webkit-text-stroke: var(--trait-moyen) var(--creme); font-size: .52em; letter-spacing: .02em; margin-top: .08em; }
.hero__meta { display: flex; flex-wrap: wrap; gap: var(--space-s) var(--space-l); align-items: center; }
.hero__meta .jour { font: 800 var(--step-2)/1 var(--f-display); text-transform: uppercase; letter-spacing: .04em; text-shadow: var(--ombre-texte-fine); }
.hero__meta .sep { width: 28px; height: var(--trait-moyen); background: var(--rouge); }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-s); }
.hero .eyebrow { color: var(--creme); text-shadow: var(--ombre-texte-fine); }
.defiler { position: absolute; right: var(--gutter-r); bottom: var(--space-l); font: 700 var(--step-mini)/1 var(--f-texte); letter-spacing: .3em; text-transform: uppercase; writing-mode: vertical-rl; color: var(--sable); display: flex; align-items: center; gap: .8rem; }
.defiler::after { content: ""; width: var(--trait-fin); height: 56px; background: linear-gradient(var(--sable), transparent); }
@media (max-width: 560px) {
  .hero__meta { gap: .4rem 1rem; }
  .hero__meta .jour { font-size: var(--step-1); }
  .hero__meta .sep { width: 12px; }
  .defiler { display: none; }
  .hero__actions .btn { flex: 1 1 100%; }
}

/* ============ SOIRÉES ============ */
.soirees { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-s); }
@media (max-width: 900px) { .soirees { grid-template-columns: 1fr; } }
.soiree { position: relative; border-radius: var(--rayon); overflow: hidden; background: var(--carte); min-height: 440px; display: flex; flex-direction: column; justify-content: end; text-decoration: none; isolation: isolate; border: var(--trait-fin) solid var(--trait); transition: border-color var(--duree-2) var(--ease-3); }
.soiree--squelette { border: 0; }
.soiree img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform var(--duree-3) var(--ease-out-3); }
.soiree::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, transparent 12%, color-mix(in oklab, var(--nuit) 78%, transparent) 46%, color-mix(in oklab, var(--nuit) 96%, transparent) 72%); }
a.soiree:hover { border-color: var(--rouge); }
a.soiree:hover img { transform: scale(1.06); }
.soiree__corps { padding: var(--space-m); display: grid; gap: .55rem; }
.soiree__date { font: 700 var(--step--1)/1 var(--f-texte); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--creme); }
.soiree__jour { font: 900 var(--step-5)/.85 var(--f-display); text-transform: uppercase; }
.soiree__nom { font: 700 var(--step-0)/1.25 var(--f-texte); }
.soiree__prog { color: var(--sable); font-size: var(--step--1); }
.soiree__statut { justify-self: start; font: 700 var(--step-mini)/1 var(--f-texte); letter-spacing: var(--track-label); text-transform: uppercase; padding: .45em .6em; border-radius: var(--rayon-fin); background: var(--carte-2); color: var(--sable); }
.soiree__statut--complet { background: var(--trait); color: var(--creme); }
.soiree__cta { margin-top: .4rem; display: inline-flex; align-items: center; gap: .5em; font: 700 var(--step-petit)/1 var(--f-texte); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--creme); }
.soiree__cta::after { content: "→"; color: var(--rouge); transition: transform var(--duree-1) var(--ease-out-3); }
a.soiree:hover .soiree__cta::after { transform: translateX(4px); }
.places { display: grid; gap: .4rem; margin-top: .3rem; }
.places__barre { height: 6px; background: var(--carte-2); border-radius: var(--rayon-fin); overflow: hidden; }
.places__barre i { display: block; height: 100%; background: var(--rouge); transform-origin: left; width: var(--p); }
.places__txt { display: flex; justify-content: space-between; font: 600 var(--step-petit)/1 var(--f-texte); letter-spacing: .06em; color: var(--sable); font-variant-numeric: tabular-nums; }
.soirees__vide { grid-column: 1 / -1; position: relative; overflow: hidden; isolation: isolate; min-height: 360px; display: grid; align-content: end; gap: var(--space-s); padding: var(--space-xl) var(--space-l); border-radius: var(--rayon); border: var(--trait-fin) solid var(--trait); }
.soirees__vide img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.soirees__vide::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, color-mix(in oklab, var(--nuit) 92%, transparent), color-mix(in oklab, var(--nuit) 55%, transparent)); }
.soirees__vide h3 { font: 900 var(--step-5)/.9 var(--f-display); text-transform: uppercase; margin: 0; max-width: 16ch; }
.soirees__vide p { margin: 0; color: var(--sable); max-width: 50ch; }

/* ============ RÉCIT ÉPINGLÉ ============ */
.recit { position: relative; height: 420vh; }
.recit::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 30vh; z-index: 2; pointer-events: none; background: linear-gradient(var(--nuit), transparent); }
.recit__scene { position: sticky; top: 0; height: 100svh; overflow: hidden; display: grid; align-items: center; isolation: isolate; }
.recit__fonds img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; z-index: -2; will-change: opacity, transform; }
.recit__fonds picture:first-child img { opacity: 1; }
.recit__scene::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, color-mix(in oklab, var(--nuit) 88%, transparent) 0%, color-mix(in oklab, var(--nuit) 45%, transparent) 55%, color-mix(in oklab, var(--nuit) 10%, transparent) 100%); }
.recit__texte { display: grid; gap: var(--space-m); max-width: 640px; }
.recit__horloge { font: 900 var(--step-horloge)/.85 var(--f-display); font-variant-numeric: tabular-nums; color: var(--creme); }
.recit__etapes { position: relative; min-height: 9.5em; }
.etape { position: absolute; inset: 0 auto auto 0; opacity: 0; transform: translateY(20px); transition: opacity .5s var(--ease-3), transform .6s var(--ease-out-3); }
.etape:first-child { opacity: 1; transform: none; }
.etape h3 { font: 900 var(--step-3)/1 var(--f-display); text-transform: uppercase; margin: 0 0 .5rem; }
.etape p { margin: 0; color: var(--sable); max-width: 46ch; }
.recit__ligne { display: flex; gap: 6px; }
.recit__ligne i { flex: 1; height: 3px; background: var(--trait); border-radius: var(--rayon-fin); overflow: hidden; position: relative; }
.recit__ligne i b { position: absolute; inset: 0; background: var(--rouge); transform: scaleX(0); transform-origin: left; }
/* Without JS/GSAP the story is a plain readable list. */
html:not(.anim) .recit { height: auto; }
html:not(.anim) .recit::before { display: none; }
html:not(.anim) .recit__scene { position: relative; height: auto; padding-block: var(--space-3xl); }
html:not(.anim) .recit__etapes { min-height: 0; display: grid; gap: var(--space-m); }
html:not(.anim) .etape { position: static; opacity: 1; transform: none; }
html:not(.anim) .recit__horloge, html:not(.anim) .recit__ligne { display: none; }

/* ============ ÉPREUVES ============ */
.epreuves { position: relative; overflow: hidden; }
.rail { display: flex; gap: var(--space-s); padding-left: var(--gutter); will-change: transform; }
.rail:focus-visible { outline-offset: -3px; }
.epreuve { flex: 0 0 clamp(260px, 32vw, 420px); aspect-ratio: 3 / 4; border-radius: var(--rayon); overflow: hidden; position: relative; isolation: isolate; border: var(--trait-fin) solid var(--trait); margin: 0; }
.epreuve img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1; }
.epreuve::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, transparent 50%, color-mix(in oklab, var(--nuit) 90%, transparent)); }
.epreuve div { position: absolute; inset: auto 0 0 0; padding: var(--space-s); }
.epreuve h3 { font: 900 var(--step-3)/.9 var(--f-display); text-transform: uppercase; margin: 0; }
.epreuve p { margin: .35rem 0 0; color: var(--sable); font-size: var(--step--1); }
html:not(.anim) .rail, .rail.defilable { overflow-x: auto; scroll-snap-type: x mandatory; padding-right: var(--gutter-r); scrollbar-width: thin; }
html:not(.anim) .epreuve, .rail.defilable .epreuve { scroll-snap-align: start; }
@media (max-width: 760px) { .rail { overflow-x: auto; scroll-snap-type: x mandatory; padding-right: var(--gutter-r); } .epreuve { scroll-snap-align: start; flex-basis: 78vw; } }

/* ============ BRACELETS ============ */
.section-bracelets { overflow: clip; }
.apercu-billets { display: grid; grid-template-columns: 1.1fr .9fr; gap: var(--space-2xl); align-items: center; }
.apercu-billets__texte { display: grid; gap: var(--space-s); justify-items: start; }
@media (max-width: 900px) { .apercu-billets { grid-template-columns: 1fr; } }
.pile-bracelets { display: grid; gap: 14px; transform: rotate(-6deg); }
.pile-bracelets svg { width: 100%; max-width: 560px; height: auto; filter: drop-shadow(0 10px 18px color-mix(in oklab, var(--nuit) 60%, transparent)); }

/* ============ GALERIE ============ */
.galerie-accueil { columns: 3 260px; column-gap: var(--space-s); }
.galerie-accueil img { width: 100%; margin-bottom: var(--space-s); border-radius: var(--rayon); break-inside: avoid; }

/* Reduced motion: everything visible at rest, shader frozen (handled in JS). */
@media (prefers-reduced-motion: reduce) {
  .hero__photo img { transform: none; }
  .recit { height: auto; }
  .recit__scene { position: relative; height: auto; padding-block: var(--space-3xl); }
  .recit__etapes { min-height: 0; display: grid; gap: var(--space-m); }
  .etape { position: static; opacity: 1; transform: none; }
  .recit__horloge, .recit__ligne { display: none; }
  .rail { overflow-x: auto; scroll-snap-type: x mandatory; padding-right: var(--gutter-r); }
}

/* Intro: pure CSS, runs at first paint (~0.7 s total, no JS wait, no flash). Off for reduced motion (no html.anim). */
@keyframes hero-monte { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes hero-logo { from { opacity: 0; transform: scale(.85) rotate(-8deg); } to { opacity: 1; transform: none; } }
html.anim .hero__logo { animation: hero-logo .55s var(--ease-out-3, ease-out) both; }
html.anim :is(.hero h1 .l1, .hero h1 .l2, .hero__meta > *, .hero__actions > *, .hero .eyebrow) { animation: hero-monte .45s var(--ease-out-3, ease-out) both; }
html.anim .hero h1 .l1 { animation-delay: .08s; }
html.anim .hero h1 .l2 { animation-delay: .16s; }
html.anim :is(.hero__meta > *, .hero__actions > *, .hero .eyebrow) { animation-delay: .24s; }