/* Layout: a printed play programme. Sticky masthead, wide stage-like hero, then left-aligned "acts". */
:root {
  --bg: #f5f4f3;
  --surface: #ffffff;
  --ink: #231f20;
  --muted: #5e5758;
  --line: #ddd8d6;
  --accent: #c8102e;      /* rideau */
  --spot: #f2b134;        /* projecteur */
  --on-accent: #ffffff;
  --stage: #231f20;       /* noir du logo */
  --on-stage: #f4f1f0;
  --ph-bg: #fff4d6;
  --ph-ink: #7a5300;
  --f-display: "Playfair Display", Georgia, "Times New Roman", serif;
  --f-body: "Work Sans", "Helvetica Neue", Arial, system-ui, sans-serif;
  --step-0: 1rem; --step-1: 1.25rem; --step-2: 1.6rem; --step-3: 2.2rem; --step-4: clamp(2.4rem, 6vw, 4.4rem);
  --gut-l: max(clamp(20px, 5vw, 48px), env(safe-area-inset-left, 0px));
  --gut-r: max(clamp(20px, 5vw, 48px), env(safe-area-inset-right, 0px));
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --bg: #171415; --surface: #221e1f; --ink: #f1eeed; --muted: #b3aaa9; --line: #3a3435;
  --accent: #ff4d63; --spot: #f6c35b; --on-accent: #1a0306; --stage: #0d0b0b; --on-stage: #f1eeed;
  --ph-bg: #3a2c08; --ph-ink: #ffd98a; color-scheme: dark; } }
:root[data-theme="dark"] {
  --bg: #171415; --surface: #221e1f; --ink: #f1eeed; --muted: #b3aaa9; --line: #3a3435;
  --accent: #ff4d63; --spot: #f6c35b; --on-accent: #1a0306; --stage: #0d0b0b; --on-stage: #f1eeed;
  --ph-bg: #3a2c08; --ph-ink: #ffd98a; color-scheme: dark; }

* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--f-body); font-size: 1.0625rem; line-height: 1.6; }
a { color: inherit; }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible { outline: 3px solid var(--spot); outline-offset: 2px; }
h1, h2, h3 { font-family: var(--f-display); font-weight: 700; line-height: 1.12; text-wrap: balance; margin: 0; letter-spacing: 0; }
p { margin: 0; }
.wrap { max-width: 1200px; margin: 0 auto; padding-left: var(--gut-l); padding-right: var(--gut-r); }
.eyebrow { font-size: .78rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
.ph { background: var(--ph-bg); color: var(--ph-ink); padding: 0 .3em; border-radius: 3px; font-style: italic; }

/* Masthead */
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 10; background: var(--surface); }
.top { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 5; background: var(--surface); border-bottom: 1px solid var(--line); }
.top .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 14px; flex-wrap: wrap; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.brand-mark { width: 44px; color: var(--ink); display: block; line-height: 0; }
.brand-mark svg { width: 100%; height: auto; display: block; }
.logo-glyph { fill: var(--surface); }
.brand-name { font-family: var(--f-display); font-weight: 800; font-size: 1.15rem; letter-spacing: .02em; }
.brand-sub { display: block; font-size: .72rem; color: var(--muted); letter-spacing: .08em; text-transform: uppercase; font-family: var(--f-body); font-weight: 500; }
.nav { display: flex; gap: 4px; flex-wrap: wrap; }
@media (max-width: 560px) { .top .wrap { gap: 10px; } .nav { flex-wrap: nowrap; overflow-x: auto; width: 100%; scrollbar-width: none; } .nav { gap: 0; justify-content: space-between; } .top .nav a { white-space: nowrap; padding: 6px 7px; font-size: .86rem; } }
.nav a { text-decoration: none; padding: 8px 12px; border-radius: 999px; font-weight: 500; font-size: .95rem; }
.nav a:hover { background: var(--bg); }
.nav a[aria-current="page"] { background: var(--ink); color: var(--bg); }

/* Hero */
.hero { background: var(--stage); color: var(--on-stage); position: relative; overflow: hidden; }
.hero::after { content: ""; position: absolute; inset: -40% -10% auto auto; width: 70%; aspect-ratio: 1; max-width: 100%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--spot) 45%, transparent), transparent 70%); pointer-events: none; }
.hero .wrap { position: relative; z-index: 1; padding-block: clamp(56px, 10vw, 112px); display: grid; gap: 24px; }
.hero h1 { font-size: var(--step-4); max-width: 16ch; }
.hero h1 em { font-style: normal; color: var(--spot); }
.hero p.lead { font-size: var(--step-1); max-width: 52ch; color: color-mix(in srgb, var(--on-stage) 85%, transparent); }
.hero .eyebrow { color: var(--spot); }
.btns { display: flex; gap: 12px; flex-wrap: wrap; }
.btn { display: inline-block; text-decoration: none; font-weight: 600; padding: 12px 22px; border-radius: 999px; border: 2px solid transparent; cursor: pointer; font: inherit; font-weight: 600; }
.btn-primary { background: var(--accent); color: var(--on-accent); }
.btn-primary:hover { filter: brightness(1.08); }
.btn-ghost { border-color: currentColor; color: inherit; background: transparent; }

/* Sections */
.section { padding-block: clamp(48px, 8vw, 88px); }
.section + .section { border-top: 1px solid var(--line); }
.section-head { display: grid; gap: 10px; margin-bottom: 36px; max-width: 62ch; }
.section-head h2 { font-size: var(--step-3); }
.section-head p { color: var(--muted); }
.page-title { padding-block: clamp(40px, 7vw, 72px) 0; }
.page-title h1 { font-size: var(--step-4); max-width: 18ch; margin-top: 10px; }
.page-title p { margin-top: 16px; font-size: var(--step-1); color: var(--muted); max-width: 58ch; }

.grid { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 24px; display: grid; gap: 10px; align-content: start; min-width: 0; }
.card h3 { font-size: var(--step-1); }
.card p { color: var(--muted); }
.tag { font-size: .75rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }

/* Programme (the theatrical detail) */
.programme { display: grid; gap: 0; border-top: 2px solid var(--ink); }
.act { display: grid; grid-template-columns: 9rem 1fr; gap: 20px; padding-block: 22px; border-bottom: 1px solid var(--line); }
.act-n { white-space: nowrap; font-family: var(--f-display); font-weight: 800; font-size: 1.05rem; color: var(--accent); letter-spacing: .04em; text-transform: uppercase; }
.act h3 { font-size: var(--step-1); margin-bottom: 4px; }
.act p { color: var(--muted); max-width: 62ch; }
@media (max-width: 560px) { .act { grid-template-columns: 1fr; gap: 6px; } }

.split { display: grid; gap: 40px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); align-items: start; }
.split > * { min-width: 0; }
.prose { display: grid; gap: 16px; max-width: 64ch; }
.prose h2 { font-size: var(--step-2); }
.quote { font-family: var(--f-display); font-size: var(--step-2); line-height: 1.25; border-left: 4px solid var(--spot); padding-left: 20px; }

.list-check { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.list-check li { padding-left: 28px; position: relative; }
.list-check li::before { content: ""; position: absolute; left: 0; top: .55em; width: 14px; height: 14px; border-radius: 50%; background: var(--spot); }

.band { background: var(--accent); color: var(--on-accent); }
.band .wrap { padding-block: 44px; display: flex; gap: 20px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.band h2 { font-size: var(--step-2); max-width: 26ch; }
.band .btn { background: var(--on-accent); color: var(--accent); }

/* Contact */
form { display: grid; gap: 16px; }
label { display: grid; gap: 6px; font-weight: 500; font-size: .95rem; }
input, textarea, select { font: inherit; padding: 12px 14px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); width: 100%; }
textarea { min-height: 140px; resize: vertical; }
.row2 { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); }
.form-msg { font-weight: 500; color: var(--accent); }
.info { display: grid; gap: 18px; }
.info dt { font-size: .75rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.info dd { margin: 4px 0 0; font-size: 1.05rem; }

/* Chiffres, références, témoignages, FAQ */
.stats { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); }
.stat { border-top: 2px solid var(--ink); padding-top: 12px; display: grid; gap: 4px; }
.stat b { font-family: var(--f-display); font-size: var(--step-3); font-variant-numeric: tabular-nums; color: var(--accent); }
.stat span { color: var(--muted); font-size: .95rem; }
.logos { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); }
.logo-slot { border: 1px dashed var(--line); border-radius: 10px; min-height: 72px; display: grid; place-items: center; color: var(--muted); font-size: .85rem; text-align: center; padding: 8px; }
.testis { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.testi { margin: 0; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 24px; display: grid; gap: 14px; align-content: space-between; }
.testi blockquote { margin: 0; font-size: 1.05rem; }
.testi figcaption { font-size: .9rem; color: var(--muted); }
.faq { display: grid; gap: 0; border-top: 2px solid var(--ink); max-width: 820px; }
.faq details { border-bottom: 1px solid var(--line); padding-block: 16px; }
.faq summary { cursor: pointer; font-weight: 600; font-size: 1.05rem; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 20px; }
.faq summary::-webkit-details-marker, .fiche summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: none; width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--line); display: grid; place-items: center; color: var(--accent); font-size: 1.3rem; font-weight: 400; transition: transform .25s ease; }
.faq details[open] summary::after { transform: rotate(45deg); }
.fiche summary { list-style: none; }
.fiche summary::after { content: " +"; color: var(--accent); }
.fiche details[open] summary::after { content: " −"; }
.faq details p { margin-top: 10px; color: var(--muted); max-width: 64ch; }
.sessions { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.table-wrap { overflow-x: auto; }
.sessions th, .sessions td { text-align: left; padding: 12px 10px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.sessions th { font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.nl { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 10px; }
.nl input { width: auto; flex: 1 1 200px; padding: 10px 12px; }
.nl .btn { padding: 10px 18px; }

/* Photos, produits */
.hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .28; filter: grayscale(.3); }
.photo { margin: 0; display: grid; gap: 8px; }
.photo img { width: 100%; border-radius: 14px; display: block; aspect-ratio: 3 / 2; object-fit: cover; }
.photo figcaption { font-size: .9rem; color: var(--muted); }
.product { display: grid; gap: 32px 48px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); align-items: start; }
.product > * { min-width: 0; }
.product-head { display: grid; gap: 10px; }
.product-head h2 { font-size: var(--step-3); }
.product-sub { font-size: var(--step-1); color: var(--muted); }
.facts { margin: 12px 0 0; display: grid; gap: 0; border-top: 2px solid var(--ink); }
.facts > div { display: grid; grid-template-columns: 7rem 1fr; gap: 12px; padding-block: 10px; border-bottom: 1px solid var(--line); }
.facts dt { font-size: .75rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); padding-top: .2em; }
.facts dd { margin: 0; font-weight: 500; }
.chips { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.chips li { border: 1px solid var(--line); background: var(--surface); border-radius: 999px; padding: 6px 14px; font-size: .92rem; }
.band-festival { background: var(--stage); color: var(--on-stage); }
.band-festival .eyebrow { color: var(--spot); }
.band-festival p { color: color-mix(in srgb, var(--on-stage) 85%, transparent); }

.gallery { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.gallery img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 12px; display: block; }
.video-split { align-items: center; }
.video-box { justify-self: center; width: min(100%, 340px); aspect-ratio: 9 / 16; border-radius: 16px; overflow: hidden; background: var(--stage); max-width: 100%; }
.video-box iframe { width: 100%; height: 100%; border: 0; display: block; }
.video-poster { position: relative; display: block; width: 100%; height: 100%; color: var(--on-stage); text-decoration: none; }
.video-poster img { width: 100%; height: 100%; object-fit: cover; opacity: .55; display: block; }
.video-poster span { position: absolute; inset: auto 0 0 0; padding: 20px; font-weight: 600; background: linear-gradient(transparent, rgba(0,0,0,.7)); }
.video-poster b { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 72px; height: 72px; border-radius: 50%; background: var(--accent); color: var(--on-accent); display: grid; place-items: center; font-size: 1.6rem; }

.fiches { display: grid; gap: 16px; margin-top: 32px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.fiche h3 { font-size: 1.1rem; }
.fiche .fiche-pub { font-size: .9rem; }
.fiche details { border-top: 1px solid var(--line); padding-top: 8px; }
.fiche summary { cursor: pointer; font-weight: 600; font-size: .9rem; color: var(--ink); }
.fiche details ul { margin: 8px 0 0; padding-left: 18px; color: var(--muted); font-size: .92rem; display: grid; gap: 4px; }
.card-link { text-decoration: none; transition: border-color .15s; }
.card-link:hover { border-color: var(--ink); }
.note { border-color: var(--spot); }

footer { background: var(--stage); color: var(--on-stage); font-size: .92rem; }
footer .wrap { padding-block: 40px; display: flex; flex-wrap: wrap; gap: 24px; justify-content: space-between; }
footer a { color: var(--on-stage); }
footer .muted { color: color-mix(in srgb, var(--on-stage) 70%, transparent); }

@media (prefers-reduced-motion: no-preference) {
  .hero h1, .hero .lead, .hero .btns { animation: rise .7s ease-out both; }
  .hero .lead { animation-delay: .08s; } .hero .btns { animation-delay: .16s; }
  @keyframes rise { from { transform: translateY(12px); } to { transform: none; } }
}

/* ===== Effets « waouh » ===== */
.curtain { position: fixed; inset: 0; z-index: 100; pointer-events: none; display: none; }
.js-wow .curtain.on { display: block; }
.curtain i { position: absolute; top: 0; bottom: 0; width: 51%; background:
  repeating-linear-gradient(90deg, rgba(0,0,0,.28) 0 6px, rgba(255,255,255,.06) 14px, rgba(0,0,0,.22) 30px, rgba(0,0,0,.05) 44px, rgba(0,0,0,.28) 56px), #a00d25;
  box-shadow: inset 0 -40px 60px rgba(0,0,0,.35); transition: transform 1.4s cubic-bezier(.7,0,.2,1); }
.curtain i:first-child { left: 0; transform-origin: left; }
.curtain i:nth-child(2) { right: 0; transform-origin: right; }
.curtain b { position: absolute; top: 50%; left: 50%; width: 120px; transform: translate(-50%,-50%); color: #231f20; transition: opacity .5s; }
.curtain b svg { width: 100%; height: auto; display: block; filter: drop-shadow(0 6px 24px rgba(0,0,0,.5)); }
.curtain b .logo-glyph { fill: #fff; }
.curtain.open i:first-child { transform: translateX(-100%) scaleX(.6); }
.curtain.open i:nth-child(2) { transform: translateX(100%) scaleX(.6); }
.curtain.open b { opacity: 0; }

.hero.hero-wow { min-height: min(92vh, 860px); display: grid; align-items: center; --mx: 70%; --my: 30%; }
.hero.hero-wow .hero-img { opacity: .42; }
.hero.hero-wow::after { inset: 0; width: auto; aspect-ratio: auto; max-width: none;
  background: radial-gradient(circle 420px at var(--mx) var(--my), color-mix(in srgb, var(--spot) 38%, transparent), transparent 70%),
              radial-gradient(ellipse at 50% 120%, rgba(0,0,0,.6), transparent 60%); transition: background .1s; }
.hero-wow h1 { font-size: clamp(2.5rem, 6.6vw, 5rem); max-width: 15ch; }
.w { display: inline-block; }
.scroll-cue { font-size: .8rem; letter-spacing: .2em; text-transform: uppercase; opacity: .7; }

.marquee { background: var(--accent); color: var(--on-accent); overflow: hidden; padding-block: 18px; }
.marquee-track { display: flex; width: max-content; gap: 0; }
.marquee span { font-family: var(--f-display); font-weight: 800; font-size: clamp(1.3rem, 3vw, 2rem); white-space: nowrap; padding-right: 1.2em; }
.marquee span::after { content: "·"; margin-left: 1.2em; color: var(--spot); }

.gallery img, .photo img { transition: transform .6s ease, filter .6s ease; }
.gallery { overflow: hidden; }
.gallery img:hover, .photo img:hover { transform: scale(1.04); filter: saturate(1.15); }
.card { transition: transform .3s ease, box-shadow .3s ease, border-color .15s; }
.card:hover { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(0,0,0,.08); }

@media (prefers-reduced-motion: no-preference) {
  .hero-wow .hero-img { animation: kenburns 22s ease-in-out infinite alternate; }
  @keyframes kenburns { from { transform: scale(1); } to { transform: scale(1.12) translate(-1.5%, -1%); } }
  .js-wow .hero-wow h1 .w { opacity: 0; transform: translateY(.6em) rotate(2deg); animation: word .8s cubic-bezier(.2,.7,.2,1) forwards; animation-delay: calc(var(--i) * 90ms + var(--d, 0ms)); }
  @keyframes word { to { opacity: 1; transform: none; } }
  .marquee-track { animation: marquee 32s linear infinite; }
  @keyframes marquee { to { transform: translateX(-50%); } }
  .js-wow [data-reveal] { opacity: 0; transform: translateY(28px); transition: opacity .8s ease, transform .8s cubic-bezier(.2,.7,.2,1); transition-delay: calc(var(--i, 0) * 80ms); }
  .js-wow [data-reveal].in { opacity: 1; transform: none; }
  .scroll-cue { animation: cue 2s ease-in-out infinite; }
  @keyframes cue { 50% { transform: translateY(6px); } }
}
@media (prefers-reduced-motion: reduce) { .marquee-track { flex-wrap: wrap; width: auto; } .marquee-track span[aria-hidden] { display: none; } }

/* ===== wow x10 ===== */
/* Rideau : lambrequin, trois coups, changements de décor */
.curtain u { position: absolute; left: 0; right: 0; top: 0; height: 9vh; min-height: 48px; z-index: 2;
  background: repeating-radial-gradient(ellipse at 50% -40%, #7a0a1c 0 18px, #b0102b 30px, #7a0a1c 46px), #8d0c22;
  box-shadow: 0 10px 30px rgba(0,0,0,.45); border-bottom: 4px solid var(--spot); transition: transform 1s ease .6s; }
.curtain b { z-index: 3; width: auto; display: grid; justify-items: center; gap: 18px; opacity: 0; }
.curtain b svg { width: 120px; }
.curtain b em { display: flex; gap: 14px; }
.curtain b em s { width: 12px; height: 12px; border-radius: 50%; background: rgba(255,255,255,.25); transition: background .1s, box-shadow .1s; }
.curtain b .c-title { color: #f4f1f0; font-family: var(--f-display); font-weight: 700; letter-spacing: .25em; text-transform: uppercase; font-size: .75rem; white-space: nowrap; }
.curtain.grand b { opacity: 1; }
.curtain.grand.open b { opacity: 0; }
.curtain.knock-1 em s:nth-child(1), .curtain.knock-2 em s:nth-child(-n+2), .curtain.knock-3 em s { background: var(--spot); box-shadow: 0 0 18px var(--spot); }
.curtain.shake i { animation: thump .18s ease-out; }
@keyframes thump { 30% { margin-top: 6px; } }
.curtain.open u { transform: translateY(-110%); }
.curtain:not(.grand) u { display: none; }
.curtain.fast i { transition-duration: .55s; }
.curtain.closing i { transition-timing-function: cubic-bezier(.6,0,.4,1); }

.curtain.wait { pointer-events: auto; }
.c-btns { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-top: 10px; transition: opacity .3s; }
.curtain:not(.wait) .c-btns { opacity: 0; pointer-events: none; }
.c-sound { font: inherit; font-weight: 600; font-size: 1.05rem; padding: 14px 28px; border-radius: 999px; border: 0; background: var(--spot); color: #231f20; cursor: pointer; box-shadow: 0 8px 30px rgba(0,0,0,.35); }
.c-sound:hover { filter: brightness(1.06); }
.c-skip { font: inherit; font-size: .9rem; background: none; border: 0; color: rgba(255,255,255,.8); text-decoration: underline; cursor: pointer; padding: 6px; }
.js-wow.waiting .hero-wow h1 .w { animation-play-state: paused; }
.sound-toggle { position: fixed; right: max(16px, env(safe-area-inset-right, 0px)); bottom: max(16px, env(safe-area-inset-bottom, 0px)); z-index: 50; font: inherit; font-size: .85rem; font-weight: 600; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); cursor: pointer; box-shadow: 0 4px 14px rgba(0,0,0,.12); }


/* Barre du haut */
.top { transition: background .4s ease, border-color .4s ease, color .4s ease, box-shadow .4s ease; }
.top .wrap { transition: padding .35s ease; }
.js-wow .top { background: color-mix(in srgb, var(--surface) 78%, transparent); -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4); }
.js-wow .top.scrolled .wrap { padding-block: 8px; }
.js-wow .top.scrolled { box-shadow: 0 6px 24px rgba(0,0,0,.08); }
.js-wow.home .top:not(.scrolled) { background: transparent; border-color: transparent; color: #f4f1f0; -webkit-backdrop-filter: none; backdrop-filter: none; }
.js-wow.home .top:not(.scrolled) .brand-sub { color: rgba(244,241,240,.75); }
.js-wow.home .top:not(.scrolled) .nav a:hover { background: rgba(255,255,255,.12); }
.js-wow.home .top:not(.scrolled) .nav a[aria-current="page"] { background: var(--spot); color: #231f20; }
.js-wow.home .top:not(.scrolled) .brand-mark { color: #f4f1f0; }
.js-wow.home .top:not(.scrolled) .logo-glyph { fill: #231f20; }
.js-wow.home .hero-wow { margin-top: calc(-1 * var(--hh, 77px)); padding-top: var(--hh, 77px); }
/* Logo en pièce 3D */
.brand { perspective: 500px; }
.brand-mark { position: relative; transform-style: preserve-3d; }
.coin { position: relative; display: block; transform-style: preserve-3d; transition: transform .25s linear; }
.coin > svg { position: relative; backface-visibility: hidden; }
.coin .coin-edge, .coin .coin-back { position: absolute; inset: 0; }
.coin .coin-edge svg, .coin .coin-back svg { width: 100%; height: auto; display: block; }
.coin .coin-edge { color: color-mix(in srgb, currentColor 70%, #c8102e); filter: brightness(.7); }
.coin .coin-back { transform: rotateY(180deg) translateZ(3px); backface-visibility: hidden; }
.coin > svg { transform: translateZ(3px); }
.brand:hover .coin-spin { animation: flip 1s cubic-bezier(.4,0,.2,1); }
.coin-spin { transform-style: preserve-3d; display: block; }
@keyframes flip { to { transform: rotateY(360deg); } }
.brand-mark { filter: drop-shadow(0 4px 6px rgba(0,0,0,.25)); }
.nav a { position: relative; }
.nav a:not([aria-current])::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 4px; height: 2px; border-radius: 2px; background: var(--spot); transform: scaleX(0); transition: transform .3s ease; }
.nav a:not([aria-current]):hover::after { transform: scaleX(1); }
.top-progress { position: absolute; left: 0; bottom: -1px; height: 3px; width: 100%; transform-origin: left; transform: scaleX(var(--sp, 0)); background: linear-gradient(90deg, var(--accent), var(--spot)); pointer-events: none; }
.top { position: sticky; }
@media (prefers-reduced-motion: reduce) { .brand:hover .coin-spin { animation: none; } }


/* Hero en scène 3D */
.hero.hero-wow { perspective: 1100px; perspective-origin: 50% 45%; }
.stage3d { position: absolute; inset: 0; transform-style: preserve-3d; will-change: transform; transition: transform .25s ease-out; }
.stage3d .hero-slides { transform: translateZ(-280px) scale(1.26); }
.stage3d .beams { transform: translateZ(-140px) scale(1.13); }
.drape { position: absolute; top: -6%; bottom: -6%; width: 15%; z-index: 1; transform: translateZ(70px) scale(.94);
  background: repeating-linear-gradient(90deg, rgba(0,0,0,.35) 0 5px, rgba(255,255,255,.07) 12px, rgba(0,0,0,.28) 24px, rgba(0,0,0,.05) 34px, rgba(0,0,0,.35) 44px), #8f0b22;
  filter: drop-shadow(0 0 30px rgba(0,0,0,.7)); }
.drape.l { left: -4%; clip-path: polygon(0 0, 100% 0, 70% 38%, 42% 58%, 62% 100%, 0 100%); }
.drape.r { right: -4%; clip-path: polygon(0 0, 100% 0, 100% 100%, 38% 100%, 58% 58%, 30% 38%); }
.valance { position: absolute; left: -6%; right: -6%; top: -4%; height: 13%; z-index: 1; transform: translateZ(90px) scale(.92);
  background: repeating-radial-gradient(ellipse at 50% -40%, #6e0918 0 16px, #a50f28 28px, #6e0918 42px), #8d0c22;
  border-bottom: 3px solid var(--spot); -webkit-mask: radial-gradient(60px 26px at 60px 100%, transparent 98%, #000) 0 0 / 120px 100% repeat-x; mask: radial-gradient(60px 26px at 60px 100%, transparent 98%, #000) 0 0 / 120px 100% repeat-x; }
.rampe { position: absolute; left: 0; right: 0; bottom: 0; height: 18px; z-index: 1; transform: translateZ(60px);
  background: radial-gradient(circle at 50% 100%, rgba(255,214,130,.95) 0 3px, rgba(255,190,90,.35) 6px, transparent 14px) 0 100% / 56px 18px repeat-x;
  box-shadow: 0 -30px 60px -10px rgba(255,190,90,.25); }
.hero-wow > .wrap { position: relative; z-index: 2; transition: transform .25s ease-out; will-change: transform; }
.hero-wow .scroll-cue { margin-bottom: 18px; }
@media (max-width: 700px) { .drape { width: 12%; } .valance { height: 8%; } }
@media (prefers-reduced-motion: no-preference) {
  @media (pointer: coarse) { .stage3d { animation: sway 9s ease-in-out infinite alternate; } @keyframes sway { from { transform: rotateY(-3deg) rotateX(1deg); } to { transform: rotateY(3deg) rotateX(-1deg); } } }
  .rampe { animation: flicker 3s steps(1) infinite; }
  @keyframes flicker { 0%, 100% { opacity: 1; } 47% { opacity: .85; } 48% { opacity: 1; } 73% { opacity: .92; } }
}

/* Projecteurs et diaporama */
.hero-slides { position: absolute; inset: 0; overflow: hidden; }
.hero.hero-wow .hero-slides .hero-img { opacity: 0; transition: opacity 1.6s ease; }
.hero.hero-wow .hero-slides .hero-img.on { opacity: .42; }
.hero-slides::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(20,16,17,.78), rgba(20,16,17,.35) 60%, transparent); }
.beams { position: absolute; inset: 0; pointer-events: none; z-index: 0; mix-blend-mode: screen; overflow: hidden; }
.beams i { position: absolute; top: -10%; width: 34vw; height: 130%; transform-origin: 50% 0;
  background: linear-gradient(to bottom, rgba(255,226,160,.2), rgba(255,226,160,.03) 70%, transparent);
  clip-path: polygon(44% 0, 56% 0, 100% 100%, 0 100%); filter: blur(6px); }
.beams i:first-child { left: 8%; transform: rotate(-18deg); }
.beams i:last-child { right: 8%; transform: rotate(18deg); }

/* Texte qui s'allume au défilement */
.statement { background: var(--stage); color: var(--on-stage); padding-block: clamp(80px, 14vw, 180px); }
.statement .eyebrow { color: var(--spot); margin-bottom: 20px; }
.big-reveal { font-family: var(--f-display); font-weight: 700; font-size: clamp(1.8rem, 4.6vw, 3.6rem); line-height: 1.12; max-width: 22ch; letter-spacing: -.01em; }
.js-wow .big-reveal .w { color: color-mix(in srgb, var(--on-stage) 18%, transparent); transition: color .3s ease, text-shadow .3s ease; }
.js-wow .big-reveal .w.lit { color: var(--on-stage); }
.js-wow .big-reveal .w.lit.hot { color: var(--spot); text-shadow: 0 0 24px color-mix(in srgb, var(--spot) 50%, transparent); }

/* Galerie horizontale */
.hscroll { background: var(--bg); }
.hs-sticky { padding-block: clamp(48px, 8vw, 88px); }
.hs-head { width: 100%; margin-bottom: 28px; display: grid; gap: 10px; }
.hs-head h2 { font-size: var(--step-3); }
.hs-track { display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; padding-left: var(--gut-l); padding-right: var(--gut-r); padding-bottom: 8px; }
.hs-track figure { margin: 0; flex: 0 0 auto; scroll-snap-align: start; display: grid; gap: 10px; }
.hs-track img { height: min(58vh, 440px); max-width: 82vw; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 16px; display: block; }
.hs-track figcaption { font-family: var(--f-display); font-weight: 700; font-size: 1.1rem; }
.hs-track figcaption::before { content: "✦ "; color: var(--accent); }
@media (min-width: 760px) and (prefers-reduced-motion: no-preference) {
  .js-wow .hscroll { height: 320vh; }
  .js-wow .hs-sticky { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; justify-content: center; overflow: hidden; padding-block: 90px 40px; }
  .js-wow .hs-track { overflow: visible; will-change: transform; scroll-snap-type: none; padding-left: max(var(--gut-l), calc((100vw - 1120px) / 2 + 16px)); }
}

/* Cartes programmes en 3D */
.prog { position: relative; overflow: hidden; will-change: transform; }
.prog-n { font-family: var(--f-display); font-style: italic; font-weight: 700; font-size: 3.4rem; line-height: 1; color: var(--accent); }
.prog::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .3s;
  background: radial-gradient(circle 160px at var(--gx, 50%) var(--gy, 50%), color-mix(in srgb, var(--spot) 30%, transparent), transparent 70%); }
.prog:hover::after { opacity: 1; }


/* Fil des actes */
.programme { position: relative; }
.js-wow .programme::before { content: ""; position: absolute; left: 0; top: 0; width: 3px; height: 100%; background: var(--accent); transform-origin: top; transform: scaleY(var(--p, 0)); }
.js-wow .programme .act { padding-left: 18px; }

/* Bandeau de fin */
.marquee-out { background: var(--stage); padding-block: 26px; border-top: 1px solid color-mix(in srgb, var(--on-stage) 15%, transparent); }
.marquee-out span { font-size: clamp(1.6rem, 4vw, 2.8rem); font-style: italic; font-weight: 600; color: color-mix(in srgb, var(--on-stage) 80%, transparent); }
.marquee-out span::after { -webkit-text-stroke: 0; }
@media (prefers-reduced-motion: no-preference) {
  .marquee-out .marquee-track { animation-direction: reverse; animation-duration: 70s; }
  .beams i:first-child { animation: swayL 7s ease-in-out infinite alternate; }
  .beams i:last-child { animation: swayR 8s ease-in-out infinite alternate; }
  @keyframes swayL { from { transform: rotate(-24deg); } to { transform: rotate(-6deg); } }
  @keyframes swayR { from { transform: rotate(22deg); } to { transform: rotate(6deg); } }
}
@media (prefers-reduced-motion: reduce) { .beams, .marquee-out { display: none; } }

/* ===== Style Tesla : plein écran, épuré ===== */

.tesla, .panel { position: relative; min-height: 100vh; min-height: 100svh; overflow: hidden; color: #fff; text-align: center; scroll-snap-align: start; background: #111; }
.hero.hero-wow.tesla { display: flex; perspective: none; }
.hero.hero-wow.tesla::after { inset: 0; width: auto; max-width: none; aspect-ratio: auto; background: linear-gradient(to bottom, rgba(0,0,0,.82), rgba(0,0,0,.62) 36%, rgba(0,0,0,.22) 56%, rgba(0,0,0,0) 70%, rgba(0,0,0,.6)); }
.hero.hero-wow.tesla .hero-slides .hero-img.on { opacity: 1; }
.tesla .hero-slides::after { display: none; }
.tesla > .wrap, .panel > .wrap { position: relative; z-index: 1; width: 100%; min-height: inherit; display: flex; flex-direction: column; justify-content: space-between; align-items: center; padding-top: calc(var(--hh, 77px) + 4vh); padding-bottom: 6vh; }
.tesla h1, .panel h2 { font-family: var(--f-body); font-weight: 500; font-size: clamp(2.1rem, 4.6vw, 3.4rem); letter-spacing: -.01em; line-height: 1.1; max-width: 20ch; margin-inline: auto; text-shadow: 0 2px 20px rgba(0,0,0,.35); }
.tesla h1 em { font-style: normal; color: #fff; }
.tesla .lead, .panel .lead { margin: 12px auto 0; font-size: 1.05rem; color: rgba(255,255,255,.92); max-width: 46ch; text-shadow: 0 1px 3px rgba(0,0,0,.8), 0 1px 14px rgba(0,0,0,.6); }
.panel .eyebrow { color: rgba(255,255,255,.85); margin-bottom: 8px; }
.t-bottom { display: grid; justify-items: center; gap: 18px; width: 100%; }
.t-bottom .btns { justify-content: center; gap: 22px; width: 100%; }
.btn.t-light, .btn.t-dark { min-width: min(100%, 264px); border-radius: 4px; padding: 11px 24px; font-size: .92rem; font-weight: 500; text-align: center; border: 0; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transition: background .2s; }
.btn.t-light { background: rgba(244,244,244,.82); color: #171a20; }
.btn.t-light:hover { background: rgba(255,255,255,.95); }
.btn.t-dark { background: rgba(23,26,32,.78); color: #fff; }
.btn.t-dark:hover { background: rgba(23,26,32,.92); }
.t-chev { width: 14px; height: 14px; border-right: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(45deg); opacity: .8; }
.panel-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.08); transition: transform 1.6s cubic-bezier(.2,.7,.2,1); }
.panel.in-view .panel-img { transform: scale(1); }
.panel::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(0,0,0,.82), rgba(0,0,0,.62) 36%, rgba(0,0,0,.22) 56%, rgba(0,0,0,0) 70%, rgba(0,0,0,.6)); pointer-events: none; }
.js-wow.home .top:not(.scrolled) .nav a[aria-current="page"] { background: rgba(255,255,255,.18); color: #fff; }
@media (max-width: 600px) { .t-bottom .btns { flex-direction: column; align-items: center; gap: 12px; } .btn.t-light, .btn.t-dark { width: min(100%, 320px); } }
@media (prefers-reduced-motion: no-preference) {
  .hero-wow.tesla .hero-img { animation: none; }
  .hero.hero-wow.tesla .hero-slides .hero-img { transition: opacity 1.8s ease; }
  .t-chev { animation: chev 2s ease-in-out infinite; }
  @keyframes chev { 50% { transform: translateY(6px) rotate(45deg); } }
  .js-wow .tesla h1 .w { transform: translateY(.4em); }
}
@media (prefers-reduced-motion: reduce) { .panel-img { transform: none; } }

/* Programmes : une seule scène collante, les photos se fondent l'une dans l'autre */
.pstage { position: relative; height: 320vh; background: #0d0b0b; color: #fff; text-align: center; }
.ps-sticky { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.ps-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.08); transition: opacity 1.1s ease, transform 6s ease-out; }
.ps-img.on { opacity: 1; transform: scale(1); }
.ps-sticky::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to bottom, rgba(0,0,0,.82), rgba(0,0,0,.62) 36%, rgba(0,0,0,.22) 56%, rgba(0,0,0,0) 70%, rgba(0,0,0,.65)); }
.ps-sticky > .wrap { position: relative; z-index: 1; height: 100%; display: flex; flex-direction: column; justify-content: space-between; align-items: center; padding-top: calc(var(--hh, 77px) + 4vh); padding-bottom: 6vh; }
.ps-texts { display: grid; width: 100%; }
.ps-text { grid-area: 1 / 1; opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s ease; pointer-events: none; }
.ps-text.on { opacity: 1; transform: none; transition-delay: .25s; }
.ps-text h2 { font-family: var(--f-body); font-weight: 500; font-size: clamp(2.1rem, 4.6vw, 3.4rem); letter-spacing: -.01em; line-height: 1.1; text-shadow: 0 2px 20px rgba(0,0,0,.35); }
.ps-text .eyebrow { color: rgba(255,255,255,.85); margin-bottom: 8px; }
.ps-text .lead { margin: 12px auto 0; font-size: 1.05rem; color: rgba(255,255,255,.92); max-width: 46ch; text-shadow: 0 1px 3px rgba(0,0,0,.8), 0 1px 14px rgba(0,0,0,.6); }
.ps-dots { display: flex; gap: 18px; }
.ps-dots span { display: grid; gap: 6px; justify-items: center; font-size: .75rem; letter-spacing: .12em; color: rgba(255,255,255,.55); transition: color .4s; }
.ps-dots span.on { color: #fff; }
.ps-dots i { width: 56px; height: 2px; background: rgba(255,255,255,.25); overflow: hidden; position: relative; }
.ps-dots i::after { content: ""; position: absolute; inset: 0; background: var(--spot); transform-origin: left; transform: scaleX(var(--f, 0)); }
/* Boutons */
.btn.t-light, .btn.t-dark { border-radius: 999px; min-width: min(100%, 240px); padding: 14px 28px; font-size: .95rem; font-weight: 600; letter-spacing: .01em; transition: transform .25s ease, box-shadow .25s ease, background .25s ease, color .25s ease; }
.btn.t-light { background: var(--accent); color: #fff; box-shadow: 0 10px 30px -8px color-mix(in srgb, var(--accent) 75%, transparent); }
.btn.t-light:hover { background: var(--accent); transform: translateY(-2px); box-shadow: 0 16px 36px -8px color-mix(in srgb, var(--accent) 90%, transparent); }
.btn.t-dark { background: rgba(255,255,255,.08); color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.85); }
.btn.t-dark:hover { background: #fff; color: #171a20; transform: translateY(-2px); }
/* Fiches de formation façon coulisses */
.fiches .fiche { position: relative; overflow: hidden; background: #1c1819; border-color: #2f292a; color: #f1eeed; transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease; }
.fiches .fiche::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: var(--accent); }
.fiches-tt .fiche::before { background: var(--spot); }
.fiches .fiche h3 { color: #fff; }
.fiches .fiche p { color: rgba(241,238,237,.72); }
.fiches .fiche .tag { color: var(--spot); }
.fiches .fiche .fiche-pub b { color: #fff; }
.fiches .fiche details { border-top-color: #3a3334; }
.fiches .fiche summary { color: #fff; }
.fiches .fiche details ul { color: rgba(241,238,237,.72); }
.fiches .fiche:hover { transform: translateY(-6px); border-color: var(--accent); box-shadow: 0 20px 40px -18px color-mix(in srgb, var(--accent) 70%, transparent); }
.fiches-tt .fiche:hover { border-color: var(--spot); box-shadow: 0 20px 40px -18px color-mix(in srgb, var(--spot) 70%, transparent); }
@media (max-width: 600px) { .pstage { height: 300vh; } }
@media (prefers-reduced-motion: reduce) { .pstage { height: auto; } .ps-sticky { position: relative; } }

/* ===== Noir élégant : le site entier passe en noir, accents rouge rideau et or projecteur ===== */
html:root:root:root {
  --bg: #0b0a0a; --surface: #151213; --ink: #f3efee; --muted: #a9a09f; --line: #2a2425;
  --accent: #d9183b; --spot: #d6c2a1; --on-accent: #ffffff; --stage: #050404; --on-stage: #f3efee;
  --ph-bg: #3a2c08; --ph-ink: #ffd98a; --gold-line: color-mix(in srgb, #d6c2a1 20%, transparent);
  color-scheme: dark;
}
.section + .section { border-top-color: var(--gold-line); }
.eyebrow { color: var(--spot); }
.card, .testi { background: linear-gradient(180deg, #181415, #120f10); border-color: var(--line); transition: border-color .3s, transform .3s, box-shadow .3s; }
.card:hover { border-color: var(--gold-line); box-shadow: 0 18px 40px -24px rgba(214,194,161,.25); }
.programme, .faq, .facts { border-top-color: var(--spot); }
.stat { border-top-color: var(--spot); }
.stat b { color: var(--spot); }
.page-title { background: radial-gradient(ellipse at 50% -20%, rgba(217,24,59,.16), transparent 60%); }
.top { background: rgba(11,10,10,.82); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-bottom-color: var(--gold-line); }
.nav a[aria-current="page"] { background: var(--ink); color: var(--bg); }
.sound-toggle { background: rgba(21,18,19,.9); box-shadow: 0 4px 18px rgba(0,0,0,.5); }
footer { border-top: 1px solid var(--gold-line); }
.page-title .eyebrow { color: var(--spot); }
@media (prefers-reduced-motion: no-preference) { .hero.hero-wow.tesla .hero-slides .hero-img.on { animation: heroPush 16s cubic-bezier(.2,.6,.2,1) forwards; } @keyframes heroPush { from { transform: scale(1.14); } to { transform: scale(1); } } }
.video-poster { background: radial-gradient(ellipse at 50% 40%, #2a1416, #050404 70%); }
/* Hero : fondu plus rapide, chaque photo arrive en léger zoom arrière */
.hero.hero-wow.tesla .hero-slides .hero-img { transition: opacity 1s ease, transform 4.6s cubic-bezier(.2,.6,.2,1); transform: scale(1.12); }
.hero.hero-wow.tesla .hero-slides .hero-img.on { transform: scale(1); }

/* Titres des pages : plus compacts, mots qui se lèvent, trait doré qui se dessine */
.page-title { padding-block: clamp(36px, 6vw, 64px) 0; }
.page-title h1 { font-size: clamp(2rem, 4.4vw, 3.3rem); max-width: 20ch; }
.page-title h1::after { content: ""; display: block; width: 72px; height: 3px; margin-top: 18px; background: linear-gradient(90deg, var(--accent), var(--spot)); transform-origin: left; transform: scaleX(0); transition: transform .9s cubic-bezier(.2,.7,.2,1) .5s; }
.page-title h1.in::after, .page-title h1:not(.wsplit)::after { transform: scaleX(1); }
.page-title p { font-size: 1.1rem; }
@media (prefers-reduced-motion: no-preference) {
  .js-wow .wsplit .w { display: inline-block; opacity: 0; transform: translateY(.7em) rotateX(-50deg); filter: blur(6px); transform-origin: 50% 100%;
    transition: opacity .7s ease, transform .8s cubic-bezier(.2,.7,.2,1), filter .7s ease; transition-delay: calc(var(--i) * 60ms); }
  .js-wow .wsplit.in .w { opacity: 1; transform: none; filter: none; }
  .js-wow .page-title p:not(.eyebrow) { opacity: 0; transform: translateY(14px); transition: opacity .8s ease .45s, transform .8s ease .45s; }
  .js-wow .page-title.in p:not(.eyebrow) { opacity: 1; transform: none; }
  .js-wow .page-title .eyebrow { opacity: 0; letter-spacing: .5em; transition: opacity .8s ease, letter-spacing 1.1s cubic-bezier(.2,.7,.2,1); }
  .js-wow .page-title.in .eyebrow { opacity: 1; letter-spacing: .14em; }
  .js-wow .fiches .fiche h3 { background: linear-gradient(90deg, var(--spot), var(--spot)) no-repeat 0 100% / 0 2px; transition: background-size .4s ease; padding-bottom: 2px; }
  .js-wow .fiches .fiche:hover h3 { background-size: 100% 2px; }
}
@media (max-width: 560px) { .top .nav a { padding: 6px 4px; font-size: .78rem; letter-spacing: 0; } }

/* Financement TFP */
.tfp { background: linear-gradient(135deg, #140f10, #0b0a0a 60%); }
.tfp .wrap { display: grid; gap: 28px; }
@media (min-width: 860px) { .tfp .wrap { grid-template-columns: 1.1fr 1fr; align-items: center; gap: 56px; } }
.tfp h2 { font-size: var(--step-3); }
.tfp h2 em { font-style: italic; color: var(--spot); }
.tfp-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; counter-reset: s; border-top: 2px solid var(--spot); }
.tfp-steps li { counter-increment: s; display: grid; grid-template-columns: 3rem 1fr; gap: 14px; padding-block: 16px; border-bottom: 1px solid var(--line); }
.tfp-steps li::before { content: "0" counter(s); font-family: var(--f-display); font-weight: 800; font-size: 1.4rem; color: var(--spot); line-height: 1.2; }
.tfp-steps b { display: block; }
.tfp-steps span { color: var(--muted); font-size: .95rem; }
.tfp .prose { display: grid; gap: 16px; }

/* Cas clients */
.case { display: grid; gap: 0; border-top: 2px solid var(--spot); }
.case-row { display: grid; grid-template-columns: 10rem 1fr; gap: 20px; padding-block: 22px; border-bottom: 1px solid var(--line); }
.case-row h3 { font-size: 1.05rem; color: var(--spot); text-transform: uppercase; letter-spacing: .08em; font-family: var(--f-body); font-weight: 600; }
.case-row p { color: var(--muted); max-width: 64ch; }
@media (max-width: 640px) { .case-row { grid-template-columns: 1fr; gap: 6px; } }
.case-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 16px; margin-top: 8px; }
.case-kpis div { border: 1px solid var(--gold-line); border-radius: 14px; padding: 18px; display: grid; gap: 4px; }
.case-kpis b { font-family: var(--f-display); font-size: 1.8rem; color: var(--spot); }
.case-kpis span { color: var(--muted); font-size: .9rem; }

/* Bouton WhatsApp (affiché seulement quand WHATSAPP est rempli) */
.wa { position: fixed; left: max(16px, env(safe-area-inset-left, 0px)); bottom: max(16px, env(safe-area-inset-bottom, 0px)); z-index: 50; width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; background: #25d366; color: #fff; box-shadow: 0 8px 24px -6px rgba(37,211,102,.6); transition: transform .25s; }
.wa:hover { transform: scale(1.08); }
.wa svg { width: 28px; height: 28px; fill: currentColor; }

/* ===== Configurateur ===== */
.cfg-sec { background: radial-gradient(ellipse 60% 70% at 85% 10%, rgba(214,194,161,.07), transparent 70%); }
.cfg { position: relative; border: 1px solid var(--gold-line); border-radius: 22px; padding: clamp(22px, 4vw, 44px); background: linear-gradient(180deg, #141112, #0d0b0b); max-width: 920px; overflow: hidden; }
.cfg-bar { height: 2px; background: var(--line); margin-bottom: 28px; border-radius: 2px; overflow: hidden; }
.cfg-bar i { display: block; height: 100%; width: 25%; background: var(--accent); transition: width .7s cubic-bezier(.16,1,.3,1); }
.cfg[data-step="2"] .cfg-bar i { width: 50%; } .cfg[data-step="3"] .cfg-bar i { width: 75%; } .cfg[data-step="4"] .cfg-bar i { width: 100%; background: var(--spot); }
.cfg-q, .cfg-res { display: none; }
.cfg[data-step="1"] [data-n="1"], .cfg[data-step="2"] [data-n="2"], .cfg[data-step="3"] [data-n="3"], .cfg[data-step="4"] [data-n="4"] { display: grid; gap: 14px; animation: cfgIn .6s cubic-bezier(.16,1,.3,1); }
@keyframes cfgIn { from { opacity: 0; transform: translateY(14px); } }
.cfg-k { font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--spot); font-weight: 600; }
.cfg h3 { font-size: clamp(1.3rem, 2.6vw, 1.8rem); }
.chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.chip { font: inherit; font-size: .95rem; color: var(--ink); background: rgba(255,255,255,.03); border: 1px solid color-mix(in srgb, var(--spot) 30%, transparent); border-radius: 999px; padding: 11px 18px; cursor: pointer; transition: background .25s, border-color .25s, transform .25s; }
.chip:hover { border-color: var(--spot); transform: translateY(-2px); }
.chip.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.cfg-cards { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.cfg-card { border: 1px solid var(--line); border-top: 3px solid var(--accent); border-radius: 14px; padding: 18px; display: grid; gap: 6px; background: #181415; }
.cfg-card.tt { border-top-color: var(--spot); }
.cfg-card .tag { color: var(--spot); }
.cfg-card p { color: var(--muted); font-size: .95rem; }
.cfg .btns { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }
.cfg .btn-ghost { background: transparent; color: var(--ink); }
.cfg-note { color: var(--muted); font-size: .9rem; }

/* Vidéo : affiche élégante, ou vraie vidéo qui se met en pause hors écran */
.video-box { border: 1px solid var(--gold-line); box-shadow: 0 30px 60px -30px rgba(0,0,0,.8); }
.video-box video { width: 100%; height: 100%; object-fit: cover; display: block; background: #000; }
.video-poster { background: radial-gradient(ellipse 80% 60% at 50% 35%, rgba(217,24,59,.28), transparent 70%), radial-gradient(ellipse at 50% 100%, rgba(214,194,161,.10), transparent 60%), #070606; overflow: hidden; }
.video-poster i { position: absolute; left: 50%; top: 30%; width: 46%; transform: translate(-50%, -50%); opacity: .12; color: #fff; }
.video-poster i svg { width: 100%; height: auto; display: block; }
.video-poster b { top: 56%; width: 84px; height: 84px; font-size: 1.7rem; padding-left: 6px; box-shadow: 0 0 0 0 rgba(217,24,59,.6); transition: transform .3s ease; }
.video-poster:hover b { transform: translate(-50%,-50%) scale(1.08); }
.video-poster span { text-align: center; padding: 26px 20px; background: none; font-size: .95rem; letter-spacing: .04em; color: var(--spot); }
@media (prefers-reduced-motion: no-preference) { .video-poster b { animation: pulse 2.4s ease-out infinite; } @keyframes pulse { 70% { box-shadow: 0 0 0 22px rgba(217,24,59,0); } 100% { box-shadow: 0 0 0 0 rgba(217,24,59,0); } } }

/* ===== Rideau bordeaux, ouverture lente et feutrée ===== */
.curtain i { background: repeating-linear-gradient(90deg, rgba(0,0,0,.45) 0 7px, rgba(255,255,255,.05) 17px, rgba(0,0,0,.30) 33px, rgba(255,255,255,.025) 47px, rgba(0,0,0,.45) 62px), #4c0915;
  box-shadow: inset 0 -70px 100px rgba(0,0,0,.55), inset 0 60px 80px rgba(0,0,0,.35); transition: transform 2.8s cubic-bezier(.65,0,.12,1); }
.curtain i:first-child { border-right: 1px solid color-mix(in srgb, var(--spot) 30%, transparent); }
.curtain i:nth-child(2) { border-left: 1px solid color-mix(in srgb, var(--spot) 30%, transparent); }
.curtain.open i:first-child { transform: translateX(-100%) scaleX(.75); }
.curtain.open i:nth-child(2) { transform: translateX(100%) scaleX(.75); }
.curtain u { background: repeating-radial-gradient(ellipse at 50% -40%, #3a0610 0 18px, #5c0b1b 30px, #3a0610 46px), #45081a; border-bottom: 1px solid color-mix(in srgb, var(--spot) 45%, transparent); transition: transform 1.6s cubic-bezier(.65,0,.12,1) 1s; }
.curtain b { transition: opacity 1s ease; }
.curtain.fast i { transition-duration: 1.2s; transition-timing-function: cubic-bezier(.65,0,.12,1); }
.curtain.closing i { transition-duration: 1s; transition-timing-function: cubic-bezier(.55,0,.25,1); }
.curtain.knock-1 em s:nth-child(1), .curtain.knock-2 em s:nth-child(-n+2), .curtain.knock-3 em s { background: var(--spot); box-shadow: 0 0 14px color-mix(in srgb, var(--spot) 70%, transparent); }

/* ===== Scène finale : le salut sous le projecteur, puis le rideau se ferme ===== */
.finale { position: relative; background: #000; }
.fn-sticky { position: relative; overflow: hidden; height: 100vh; height: 100svh; }
.fn-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
.fn-spot { position: absolute; inset: 0; pointer-events: none; }
.fn-top { position: absolute; left: 0; right: 0; top: calc(var(--hh, 77px) + 3vh); text-align: center; z-index: 2; }
.fn-l, .fn-r { position: absolute; top: 0; bottom: 0; width: 51%; z-index: 3; display: none;
  background: repeating-linear-gradient(90deg, rgba(0,0,0,.55) 0 8px, rgba(255,255,255,.07) 18px, rgba(0,0,0,.40) 36px, rgba(255,255,255,.03) 52px, rgba(0,0,0,.55) 66px), #141112;
  box-shadow: inset 0 -80px 100px rgba(0,0,0,.6), inset 0 60px 80px rgba(0,0,0,.5); }
.fn-l { left: 0; border-right: 1px solid color-mix(in srgb, var(--spot) 35%, transparent); } .fn-r { right: 0; border-left: 1px solid color-mix(in srgb, var(--spot) 35%, transparent); }
.fn-cap { position: absolute; inset: 0; z-index: 4; display: none; place-content: center; text-align: center; gap: 14px; padding-inline: 20px; }
.fn-cap h2 { font-size: clamp(2rem, 5vw, 3.8rem); color: #f3efee; text-shadow: 0 4px 30px rgba(0,0,0,.5); }
.fn-cap .eyebrow, .fn-top .eyebrow { color: var(--spot); }
@media (prefers-reduced-motion: no-preference) {
  .js-wow .finale { height: 260vh; }
  .js-wow .fn-sticky { position: sticky; top: 0; }
  .js-wow .fn-img { transform: scale(calc(1.18 - var(--a, 0) * .18)); filter: brightness(calc(.35 + var(--a, 0) * .65)); }
  .js-wow .fn-spot { background: radial-gradient(ellipse calc(20% + var(--a, 0) * 60%) calc(25% + var(--a, 0) * 70%) at 50% 52%, transparent 0 55%, rgba(0,0,0,.88) 100%); }
  .js-wow .fn-top { opacity: calc(var(--a, 0) * (1 - var(--c, 0) * 2)); }
  .js-wow .fn-l, .js-wow .fn-r { display: block; }
  .js-wow .fn-l { transform: translateX(calc((var(--c, 0) - 1) * 100%)); }
  .js-wow .fn-r { transform: translateX(calc((1 - var(--c, 0)) * 100%)); }
  .js-wow .fn-cap { display: grid; opacity: var(--t, 0); transform: translateY(calc((1 - var(--t, 0)) * 24px)); }
}

/* ===== v15 : entrée des titres de page en trois temps ===== */
.page-title { position: relative; overflow: hidden; }
.page-title::before { content: ""; position: absolute; left: 50%; top: -30%; width: 120vw; height: 160%; transform: translateX(-50%); pointer-events: none;
  background: radial-gradient(ellipse 40% 45% at 30% 30%, rgba(214,194,161,.10), transparent 70%); }
.page-title > .wrap { position: relative; }
@media (prefers-reduced-motion: no-preference) {
  .js-wow .page-title::before { opacity: 0; transform: translateX(-60%) scale(.6); transition: opacity 1.6s ease, transform 2.2s cubic-bezier(.16,1,.3,1); }
  .js-wow .page-title.in::before { opacity: 1; transform: translateX(-50%) scale(1); }
  .js-wow .page-title .eyebrow { opacity: 1; letter-spacing: .14em; display: inline-flex; align-items: center; gap: 12px; clip-path: inset(0 100% 0 0); transition: clip-path 1.1s cubic-bezier(.77,0,.18,1) .1s; }
  .js-wow .page-title .eyebrow::before { content: ""; width: 28px; height: 1px; background: var(--accent); }
  .js-wow .page-title.in .eyebrow { clip-path: inset(0 0 0 0); }
  .js-wow .page-title h1.wsplit .wi { transform: translateY(115%) skewY(6deg); transition: transform 1.25s cubic-bezier(.16,1,.3,1); transition-delay: calc(.35s + var(--i) * 70ms); }
  .js-wow .page-title h1.wsplit.in .wi { transform: none; }
  .js-wow .page-title p:not(.eyebrow) { opacity: 0; transform: translateY(18px); clip-path: inset(0 0 100% 0); transition: opacity 1s ease 1s, transform 1.2s cubic-bezier(.16,1,.3,1) 1s, clip-path 1.4s cubic-bezier(.16,1,.3,1) 1s; }
  .js-wow .page-title.in p:not(.eyebrow) { opacity: 1; transform: none; clip-path: inset(0 0 -10% 0); }
  .page-title h1::after { transition-delay: 1.1s; }
}

/* ===== v13 : mouvements plus fins ===== */
@media (prefers-reduced-motion: no-preference) {
  /* Mots qui montent derrière une ligne invisible */
  .js-wow .wsplit .w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .14em; margin-bottom: -.14em; opacity: 1; transform: none; filter: none; transition: none; }
  .js-wow .wsplit .wi { display: inline-block; transform: translateY(110%) rotate(4deg); transform-origin: 0 100%; transition: transform 1.05s cubic-bezier(.16,1,.3,1); transition-delay: calc(var(--i) * 45ms); }
  .js-wow .wsplit.in .wi { transform: none; }
  .js-wow .page-title p:not(.eyebrow) { transition-delay: .35s; }
  .js-wow [data-reveal] { transition-timing-function: cubic-bezier(.16,1,.3,1); transition-duration: 1s; }

  /* Hero : en descendant, le texte s'éloigne et la photo recule */
  .hero.hero-wow.tesla > .wrap { transform: translateY(calc(var(--hq, 0) * 30vh)); opacity: calc(1 - var(--hq, 0) * 1.6); }
  .hero.hero-wow.tesla .hero-slides { transform: scale(calc(1 + var(--hq, 0) * .12)); transform-origin: 50% 30%; }

  /* Programmes : chaque photo s'ouvre comme un rideau, depuis le centre */
  .ps-img { opacity: 1; transform: scale(1.06); clip-path: inset(0 50% 0 50%); z-index: 0; transition: clip-path 0s linear 1.3s, transform 6s ease-out; }
  .ps-img.on { clip-path: inset(0 0 0 0); z-index: 1; transform: scale(1); transition: clip-path 1.3s cubic-bezier(.77,0,.18,1), transform 6s ease-out; }
  .ps-sticky::after { z-index: 2; }
  .ps-sticky > .wrap { z-index: 3; }
  .ps-text { transform: none; transition: opacity .5s ease; }
  .ps-text .wsplit .wi, .ps-text h2.wsplit .wi { transform: translateY(110%); }
  .ps-text.on h2.wsplit .wi { transform: none; transition-delay: calc(.35s + var(--i) * 60ms); }
  .ps-text .eyebrow, .ps-text .lead { opacity: 0; transform: translateY(12px); transition: opacity .6s ease, transform .8s cubic-bezier(.16,1,.3,1); }
  .ps-text.on .eyebrow { opacity: 1; transform: none; transition-delay: .25s; }
  .ps-text.on .lead { opacity: 1; transform: none; transition-delay: .7s; }

  /* Galerie : les photos grandissent légèrement au survol */
  .hs-track figure { overflow: hidden; border-radius: 16px; }
  .hs-track img { transition: transform 1.2s cubic-bezier(.16,1,.3,1); }
  .hs-track figure:hover img { transform: scale(1.05); }
}

/* Fin de page : appel élégant, plus de bande rouge */
.band { position: relative; overflow: hidden; background: radial-gradient(ellipse 70% 90% at 50% 0%, rgba(217,24,59,.22), transparent 70%), #070606; color: var(--on-stage); border-top: 1px solid var(--gold-line); border-bottom: 1px solid var(--gold-line); text-align: center; }
.band .wrap { padding-block: clamp(72px, 12vw, 140px); flex-direction: column; justify-content: center; gap: 32px; }
.band h2 { font-size: clamp(1.7rem, 3.8vw, 3rem); max-width: 24ch; margin-inline: auto; font-weight: 600; line-height: 1.15; }
.band .btn { background: var(--accent); color: #fff; padding: 15px 34px; box-shadow: 0 14px 40px -10px rgba(217,24,59,.7); transition: transform .25s ease, box-shadow .25s ease; }
.band-btns { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.band .btn.btn-wa { background: transparent; color: var(--on-stage); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--on-stage) 55%, transparent); display: inline-flex; align-items: center; gap: 10px; }
.band .btn.btn-wa:hover { box-shadow: inset 0 0 0 1.5px var(--on-stage); background: rgba(255,255,255,.05); }
.btn-wa svg { width: 20px; height: 20px; fill: currentColor; }
.top-progress { height: 1px; background: var(--spot); opacity: .7; }
.page-title h1::after { background: var(--accent); width: 56px; height: 2px; }
.band .btn:hover { transform: translateY(-2px); box-shadow: 0 20px 48px -10px rgba(217,24,59,.85); }
.band::before { content: ""; position: absolute; left: 50%; top: 0; width: 1px; height: clamp(36px, 6vw, 70px); background: linear-gradient(var(--spot), transparent); }