:root {
  --ink: #21211d;
  --ink-2: #1a1a17;
  --paper: #efebe1;
  --paper-2: #ddd8cc;
  --acid: #82ca81;
  --acid-deep: #6fb86f;
  --line: rgba(239, 235, 225, .18);
  --display: "Mona Sans", Arial, Helvetica, sans-serif;
  --pad: clamp(1rem, 3vw, 3.2rem);
  --radius: .595rem;
  --display-tracking: -.052em;
  --display-leading: .80;
  --display-word-spacing: -.01em;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--ink); }
body {
  margin: 0;
  min-width: 320px;
  overflow-x: hidden;
  color: var(--paper);
  background: var(--ink);
  font-family: var(--display);
  font-weight: 500;
  -webkit-font-smoothing: antialiased;
}
body.dialog-open { overflow: hidden; }
a { color: inherit; }
button, input, select, textarea { font: inherit; }
button { color: inherit; }
img { display: block; max-width: 100%; }
::selection { background: var(--acid); color: var(--ink); }

.skip-link {
  position: fixed;
  z-index: 1000;
  top: .75rem;
  left: .75rem;
  padding: .75rem 1rem;
  background: var(--acid);
  color: var(--ink);
  transform: translateY(-150%);
  transition: transform .2s ease;
}
.skip-link:focus { transform: none; }
.skip-link { border-radius: .385rem; }
.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;
}

.site-header {
  position: fixed;
  z-index: 100;
  inset: 0 0 auto 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: .7rem;
  padding: 1rem var(--pad);
  pointer-events: none;
}
.site-header > * { pointer-events: auto; }
.mini-nav {
  display: flex;
  align-items: center;
  gap: .45rem;
  padding: .45rem;
  border: 1px solid rgba(242,239,230,.14);
  background: rgba(40,39,36,.92);
  color: var(--paper);
  backdrop-filter: blur(14px);
  border-radius: .595rem;
  transition: background-color .25s ease, opacity .25s ease, box-shadow .25s ease;
  box-shadow: 0 10px 32px rgba(0,0,0,.18);
}
.mini-nav > a,
.work-nav-toggle {
  border: 1px solid rgba(242,239,230,.08);
  background: rgba(242,239,230,.04);
  text-decoration: none;
  padding: .7rem .95rem;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  cursor: pointer;
  border-radius: .455rem;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease, transform .18s ease;
}
.mini-nav > a:hover,
.work-nav-toggle:hover,
.work-nav-toggle[aria-expanded="true"] { background: var(--acid); color: var(--ink); border-color: var(--acid); transform: translateY(-1px); }
.work-nav { position: relative; }
.work-nav-menu {
  position: absolute;
  top: calc(100% + .55rem);
  left: 0;
  min-width: 16rem;
  display: grid;
  gap: .3rem;
  padding: .45rem;
  background: rgba(40,39,36,.96);
  border: 1px solid rgba(242,239,230,.14);
  border-radius: .7rem;
  opacity: 0;
  transform: translateY(-.6rem);
  pointer-events: none;
  transition: .2s ease;
  box-shadow: 0 16px 40px rgba(0,0,0,.25);
}
.work-nav.is-open .work-nav-menu { opacity: 1; transform: none; pointer-events: auto; }
.work-nav-menu a {
  padding: .75rem .82rem;
  color: var(--paper);
  text-decoration: none;
  font-size: .76rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  border-radius: .504rem;
}
.work-nav-menu a:hover { background: var(--acid); color: var(--ink); }
.work-nav-menu a { border-radius: .504rem; }
.site-header.is-scrolled .mini-nav {
  background: rgba(40,39,36,.55);
  box-shadow: 0 10px 38px rgba(0,0,0,.16);
}

.hero {
  min-height: 100svh;
  display: grid;
  grid-template-rows: 1fr auto;
  padding: clamp(7rem, 11vw, 10rem) var(--pad) var(--pad);
  background: var(--ink);
  color: var(--paper);
  position: relative;
  overflow: hidden;
}
.hero::before,
.hero::after {
  content: none;
}
.hero-center {
  display: grid;
  place-items: center;
  position: relative;
  z-index: 1;
}
.hero-statement {
  width: min(100%, 86rem);
  text-align: center;
  transform: none;
  position: relative;
  isolation: isolate;
}
.title-band { width: fit-content; max-width: 100%; }
.title-band--main {
  background: var(--paper);
  color: var(--ink);
  padding: .7rem 1.25rem .85rem;
  border-radius: 0 0 .245rem .245rem;
}
.title-band--accent {
  background: var(--acid);
  color: var(--ink);
  padding: .55rem 1rem .65rem;
  border-radius: .245rem;
}
.title-band--hero {
  margin-inline: auto;
  width: min(100%, 72rem);
  background: transparent;
  padding: 0;
}
.title-band--hero h1 {
  position: relative;
  isolation: isolate;
  margin: 0 auto;
  max-width: 18ch;
  font-size: clamp(3rem, 7.3vw, 8rem);
  line-height: var(--display-leading);
  letter-spacing: var(--display-tracking);
  word-spacing: var(--display-word-spacing);
  font-kerning: none;
  font-variant-ligatures: none;
  font-feature-settings: "kern" 0, "liga" 0;
  font-weight: 800;
  text-transform: uppercase;
  color: var(--paper);
}
.title-band--hero-accent { margin: 1.15rem auto 0; transform: none; border-radius: .455rem; }
.title-band--hero-accent p {
  margin: 0;
  font-size: clamp(1rem, 2vw, 1.65rem);
  letter-spacing: -.02em;
  font-weight: 700;
}

.hero-name-mark {
  position: relative;
  display: inline-block;
  vertical-align: baseline;
  line-height: inherit;
  letter-spacing: inherit;
  word-spacing: inherit;
  color: var(--ink);
}
.hero-name-mark::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: .075em -.085em -.025em;
  background: var(--acid);
  border-radius: .091em;
  pointer-events: none;
}
.hero-name-mark--enzo::before { inset-inline: -.105em -.09em; }
.hero-name-mark--fraiche::before { inset-inline: -.09em -.105em; }
.hero-logo-overlay {
  position: absolute;
  z-index: 3;
  width: 154%;
  max-width: none;
  left: 50%;
  top: 48%;
  transform: translate(-50%, -50%) rotate(-7deg);
  pointer-events: none;
  filter: brightness(0) invert(1) drop-shadow(0 10px 22px rgba(0,0,0,.2));
}


.text-highlight {
  display: inline;
  padding: 0 .08em .016em;
  border-radius: .091em;
  background: rgba(130,202,129,.98);
  color: inherit;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
.hero-bottom {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
  padding-top: clamp(3rem, 8vh, 6rem);
  border-top: 1px solid rgba(242,239,230,.25);
}
.hero-bottom p { margin: 0; max-width: 42rem; font-weight: 300; font-size: clamp(.95rem, 1.3vw, 1.15rem); }
.hero-bottom a {
  display: inline-flex;
  gap: .75rem;
  align-items: center;
  white-space: nowrap;
  color: var(--paper);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: .25rem;
}
.hero-bottom a span { font-size: 1.5em; }

.intro {
  min-height: 56svh;
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  justify-items: center;
  gap: 1.5rem;
  padding: clamp(4.5rem, 9vw, 7.5rem) var(--pad);
  background: var(--acid);
  color: var(--ink);
  text-align: center;
}
.intro-label {
  align-self: center;
  margin: 0;
  font-size: .76rem;
  letter-spacing: .13em;
  font-weight: 800;
}
.intro-copy { max-width: 52rem; }
.intro-copy p {
  margin: 0;
  font-size: clamp(1.35rem, 2.3vw, 2.35rem);
  line-height: 1.35;
  letter-spacing: -.02em;
  font-weight: 300;
  text-align: center;
  overflow: visible;
}
.intro-copy strong { font-weight: 800; }

.portfolio { background: var(--ink); }
.category { position: relative; overflow: hidden; padding-bottom: clamp(4rem, 8vw, 8rem); background: var(--ink); color: var(--paper); }
.category--inverse { background: var(--ink); color: var(--paper); }
.category-marquee-heading { padding-top: 0; overflow: hidden; }
.category-marquee {
  width: 100%;
  overflow: hidden;
  border-top: 1px solid rgba(242,239,230,.28);
  border-bottom: 1px solid rgba(242,239,230,.28);
  background: rgba(242,239,230,.08);
  color: var(--paper);
}
.category-marquee + .category-marquee { background: var(--acid); color: var(--ink); }
.category--inverse .category-marquee { border-color: rgba(242,239,230,.28); }
.category-marquee-track {
  display: flex;
  width: max-content;
  will-change: transform;
  animation: marquee-forward 48s linear infinite;
}
.category-marquee--reverse .category-marquee-track { animation-name: marquee-reverse; animation-duration: 56s; }
.category-marquee-group { display: flex; flex-shrink: 0; }
.category-marquee span {
  flex-shrink: 0;
  padding: .18em .32em .21em;
  font-size: clamp(2.24rem, 5.32vw, 6.3rem);
  line-height: .86;
  letter-spacing: -.075em;
  font-weight: 800;
  white-space: nowrap;
  text-transform: uppercase;
}
@keyframes marquee-forward { to { transform: translateX(-50%); } }
@keyframes marquee-reverse { from { transform: translateX(-50%); } to { transform: translateX(0); } }
.category-heading-meta { margin-left: var(--pad); margin-top: -.1rem; border-radius: 0 0 .315rem .315rem; }
.category-heading--reverse .category-heading-meta { margin-left: auto; margin-right: var(--pad); }
.category-heading-meta p {
  margin: 0;
  font-size: clamp(.82rem, 1.1vw, 1.1rem);
  font-weight: 800;
  letter-spacing: .05em;
}
.category-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.5rem var(--pad) 1rem;
}
.category-toolbar > p {
  margin: 0;
  opacity: .68;
  font-size: .78rem;
  letter-spacing: .035em;
  color: inherit;
}
.rail-controls { display: none; }
.rail-controls button {
  width: 2.6rem;
  height: 2.6rem;
  display: grid;
  place-items: center;
  border: 1px solid currentColor;
  background: transparent;
  cursor: pointer;
  border-radius: 999px;
  transition: .18s ease;
}
.rail-controls button:hover { background: var(--acid); color: var(--ink); border-color: var(--acid); transform: translateY(-2px); }
.rail {
  display: block;
  width: 100%;
  overflow: hidden;
  padding: 1.25rem var(--pad) 2.2rem;
}
.rail-track {
  display: flex;
  gap: clamp(.8rem, 1.4vw, 1.35rem);
  width: max-content;
  will-change: transform;
}
.rail::-webkit-scrollbar { display: none; }
.visual-card {
  flex: 0 0 clamp(14.2rem, 21vw, 23rem);
  height: clamp(21rem, 35vw, 34rem);
  position: relative;
  padding: 0;
  border: 0;
  background: transparent;
  overflow: hidden;
  scroll-snap-align: start;
  cursor: none;
  isolation: isolate;
  transform-origin: center;
  border-radius: var(--radius);
  transition: transform .32s cubic-bezier(.2,.75,.2,1), filter .32s ease;
}
.visual-card:hover { transform: scale(1.055); z-index: 5; filter: saturate(1.04); }
.visual-card:focus-visible { outline: 4px solid var(--acid); outline-offset: 4px; }
.visual-card img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.rail--tickets .visual-card {
  flex-basis: clamp(24rem, 48vw, 54rem);
  height: clamp(13rem, 24vw, 25rem);
  border-radius: .77rem;
  background: transparent;
  padding: 0;
  overflow: hidden;
}
.rail--tickets .visual-card img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: transparent;
  border-radius: .77rem;
}
.visual-placeholder {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  padding: 1.5rem;
  background: var(--ink);
  color: var(--paper);
  border: 1px solid currentColor;
  cursor: default;
}
.category--inverse .visual-placeholder { background: var(--paper); color: var(--ink); }
.visual-placeholder--cream { background: var(--paper-2); color: var(--ink); }
.visual-placeholder strong { font-size: clamp(1rem, 2vw, 1.6rem); letter-spacing: .08em; }
.visual-placeholder p { margin: 0; font-size: clamp(2.2rem, 4vw, 4.6rem); line-height: .86; letter-spacing: -.06em; font-weight: 800; }
.visual-placeholder--logo { justify-content: center; align-items: center; background: var(--acid); }
.visual-placeholder--logo img { width: 80%; height: 80%; object-fit: contain; filter: invert(14%); }

.ticket-section { background: var(--ink); color: var(--paper); padding-top: clamp(5rem, 10vw, 9rem); }
.ticket-menu {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(13rem, .6fr);
  gap: clamp(2rem, 6vw, 7rem);
  padding: 0 var(--pad) clamp(5rem, 10vw, 9rem);
}
.ticket-menu-kicker { margin: 0 0 1.4rem; font-size: .75rem; letter-spacing: .15em; font-weight: 800; }
.ticket-menu h2 {
  margin: 0;
  max-width: 18ch;
  font-size: clamp(3rem, 6.5vw, 7.2rem);
  line-height: .86;
  letter-spacing: -.07em;
  font-weight: 800;
}
.ticket-menu-heading { color: var(--acid); }
.ticket-menu nav { display: grid; align-content: end; }
.ticket-menu nav a {
  display: flex;
  justify-content: space-between;
  padding: .95rem .2rem;
  border-bottom: 1px solid rgba(242,239,230,.28);
  text-decoration: none;
  text-transform: uppercase;
  font-size: .85rem;
  font-weight: 700;
}
.ticket-menu nav a::after { content: "↗"; }
.ticket-menu nav a:hover { padding-left: .8rem; background: rgba(130,202,129,.14); }
.ticket-menu nav .ticket-menu-cta { margin-top: .8rem; padding-inline: .85rem; background: var(--acid); color: var(--ink); border: 0; border-radius: .56rem; }
.ticket-menu nav .ticket-menu-cta:hover { color: var(--ink); background: var(--acid); }
.ticket-toolbar { border-top: 1px solid rgba(242,239,230,.28); }
.ticket-booking {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  gap: clamp(2rem, 8vw, 9rem);
  padding: clamp(6rem, 11vw, 10rem) var(--pad);
  background: var(--acid);
}
.ticket-booking-copy h3 {
  margin: 0 0 1.8rem;
  max-width: 12ch;
  font-size: clamp(2.7rem, 5.8vw, 6.4rem);
  line-height: .87;
  letter-spacing: -.07em;
  font-weight: 800;
  color: var(--ink);
}
.ticket-booking-copy > p:last-child { max-width: 34rem; line-height: 1.5; font-weight: 300; }
.ticket-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.2rem 1rem; align-content: start; }
.form-field { display: grid; gap: .45rem; }
.form-field--wide { grid-column: 1 / -1; }
.form-field label { font-size: .72rem; letter-spacing: .09em; font-weight: 800; text-transform: uppercase; }
.form-field input,
.form-field select,
.form-field textarea {
  width: 100%;
  border: 0;
  border-bottom: 0;
  border-radius: .56rem;
  background: rgba(242,239,230,.43);
  color: var(--ink);
  padding: .9rem .75rem;
  outline: none;
}
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus { background: var(--paper); }
.form-field textarea { resize: vertical; min-height: 10rem; }
.ticket-submit {
  grid-column: 1 / -1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border: 0;
  background: var(--ink);
  color: var(--paper);
  padding: 1rem 1.1rem;
  text-transform: uppercase;
  font-weight: 800;
  cursor: pointer;
  border-radius: .56rem;
}
.ticket-submit:hover { background: var(--paper); color: var(--ink); }
.form-note { grid-column: 1 / -1; margin: -.3rem 0 0; font-size: .75rem; opacity: .7; }

.contact {
  padding: clamp(6rem, 12vw, 12rem) var(--pad) clamp(4rem, 7vw, 7rem);
  background: var(--ink);
  color: var(--paper);
}
.contact-label { margin: 0 0 4rem; font-size: .74rem; letter-spacing: .15em; font-weight: 800; }
.contact-heading .title-band--main h2 {
  margin: 0;
  font-size: clamp(3.2rem, 8.5vw, 9.5rem);
  line-height: .84;
  letter-spacing: -.075em;
  font-weight: 800;
}
.contact-heading .title-band--accent p { margin: 0; font-weight: 800; font-size: clamp(1.1rem, 2.6vw, 2.2rem); }
.contact-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 2rem;
  margin-top: clamp(4rem, 8vw, 7rem);
  padding-top: 1.4rem;
  border-top: 1px solid rgba(242,239,230,.3);
}
.contact-links { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; }
.contact-links a { color: var(--paper); text-decoration: none; font-size: clamp(1rem, 2vw, 1.45rem); }
.contact-links a:hover { color: var(--acid); }
.contact-row button {
  border: 1px solid var(--paper);
  border-radius: .56rem;
  background: transparent;
  color: var(--paper);
  padding: .75rem 1rem;
  cursor: pointer;
}
.contact-row button:hover { background: var(--acid); color: var(--ink); border-color: var(--acid); }
footer {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.2rem var(--pad);
  background: var(--ink-2);
  color: var(--paper);
  border-top: 1px solid rgba(242,239,230,.2);
  font-size: .72rem;
  letter-spacing: .04em;
  text-transform: uppercase;
}
footer p { margin: 0; }

.cursor {
  position: fixed;
  z-index: 150;
  left: 0;
  top: 0;
  width: 4.1rem;
  height: 4.1rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--acid);
  color: var(--ink);
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, -50%) scale(.55);
  transition: opacity .16s ease, transform .16s ease;
  mix-blend-mode: normal;
}
.cursor span { font-size: .62rem; letter-spacing: .14em; font-weight: 800; }
.cursor.is-visible { opacity: 1; transform: translate(-50%, -50%) scale(1); }

.lightbox {
  width: min(94vw, 90rem);
  height: min(92svh, 58rem);
  padding: 0;
  border: 0;
  background: var(--ink);
  color: var(--paper);
  overflow: hidden;
}
.lightbox::backdrop { background: rgba(0,0,0,.82); backdrop-filter: blur(6px); }
.lightbox-close {
  position: absolute;
  z-index: 2;
  top: .8rem;
  right: .8rem;
  width: 3rem;
  height: 3rem;
  border: 1px solid rgba(242,239,230,.45);
  background: var(--ink);
  color: var(--paper);
  font-size: 2rem;
  cursor: pointer;
  border-radius: .525rem;
}
.lightbox-close:hover { background: var(--acid); color: var(--ink); border-color: var(--acid); }
.lightbox-layout { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(18rem, .6fr); height: 100%; }
.lightbox-media { display: grid; place-items: center; min-width: 0; padding: 1.2rem; background: #111; overflow: auto; }
.lightbox-media img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: .77rem; }
.lightbox-info { display: flex; flex-direction: column; justify-content: flex-end; gap: 1rem; padding: clamp(2rem, 4vw, 4rem); border-left: 1px solid rgba(242,239,230,.18); }
.lightbox-category { margin: 0; color: var(--acid); text-transform: uppercase; letter-spacing: .1em; font-size: .72rem; font-weight: 800; }
.lightbox-info h2 { margin: 0; font-size: clamp(2.2rem, 4vw, 4.8rem); line-height: .9; letter-spacing: -.06em; }
.lightbox-description { margin: 0; line-height: 1.55; font-weight: 300; }
.lightbox-meta { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .8rem; }
.lightbox-meta span { border: 1px solid rgba(242,239,230,.25); padding: .45rem .6rem; font-size: .68rem; text-transform: uppercase; letter-spacing: .06em; border-radius: .42rem; }

/* Une seule métrique typographique pour tous les grands titres. */
.title-band--hero h1,
.category-marquee span,
.visual-placeholder p,
.ticket-menu h2,
.ticket-booking-copy h3,
.contact-heading .title-band--main h2,
.lightbox-info h2 {
  line-height: var(--display-leading);
  letter-spacing: var(--display-tracking);
  word-spacing: var(--display-word-spacing);
  font-kerning: none;
  font-variant-ligatures: none;
  font-feature-settings: "kern" 0, "liga" 0;
}

.reveal { opacity: 0; transform: translateY(2rem); transition: opacity .65s ease, transform .65s ease; }
.reveal.is-visible { opacity: 1; transform: none; }

@media (max-width: 900px) {
  .site-header { align-items: center; }
  .mini-nav > a:nth-of-type(2) { display: none; }
  .intro { grid-template-columns: 1fr; min-height: auto; }
  .intro-label { align-self: auto; }
  .ticket-menu, .ticket-booking { grid-template-columns: 1fr; }
  .ticket-menu nav { margin-top: 1rem; }
  .lightbox-layout { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr) auto; }
  .lightbox-info { padding: 1.5rem; border-left: 0; border-top: 1px solid rgba(242,239,230,.18); max-height: 38vh; }
  .lightbox-description { display: none; }
}

@media (max-width: 680px) {
  :root { --pad: 1rem; }
  .site-header { padding-top: .7rem; }
  .mini-nav { gap: .28rem; }
  .mini-nav > a { display: none; }
  .mini-nav > a:last-child { display: block; }
  .hero-logo-overlay { width: 162%; }
  .hero { min-height: 92svh; padding-top: 6.6rem; }
  .title-band--hero h1 { font-size: clamp(2.9rem, 15vw, 5.2rem); }
  .hero-bottom { align-items: flex-start; flex-direction: column; gap: 1.5rem; }
  .intro-copy p { font-size: clamp(1.2rem, 4.6vw, 1.55rem); }
  .category-marquee span { font-size: clamp(1.96rem, 10.5vw, 3.64rem); }
  .category-toolbar > p { max-width: 65%; }
  .visual-card { flex-basis: 62vw; height: 94vw; }
  .rail--tickets .visual-card { flex-basis: 78vw; height: 38vw; min-height: 11.5rem; }
  .ticket-menu h2 { font-size: clamp(2.8rem, 13vw, 5rem); }
  .ticket-form { grid-template-columns: 1fr; }
  .form-field--wide, .ticket-submit, .form-note { grid-column: auto; }
  .contact-heading .title-band--main h2 { font-size: clamp(3rem, 15vw, 5.5rem); }
  .contact-row { align-items: flex-start; flex-direction: column; }
  footer { flex-direction: column; }
  .cursor { display: none; }
  .visual-card { cursor: pointer; }
  .work-nav-menu { position: fixed; left: 1rem; right: 1rem; top: 4.9rem; min-width: 0; }
}

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


/* === V5 — passe de finition globale === */
:root {
  --section-curve: clamp(2.9rem, 4.1vw, 4.65rem);
  --category-inset: clamp(1.25rem, 9.4vw, 9.8rem);
  --category-meta-height: clamp(2.3rem, 2.8vw, 2.8rem);
  --panel-gap: clamp(3.8rem, 7vw, 7rem);
}

/* Navigation : plus nette, plus régulière et légèrement plus compacte. */
.mini-nav {
  gap: .38rem;
  padding: .38rem;
  border-radius: .62rem;
  box-shadow: 0 12px 34px rgba(0,0,0,.16);
}
.mini-nav > a,
.work-nav-toggle {
  min-height: 2.35rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .62rem .9rem;
  border-radius: .44rem;
}

/* Hero : nom sans surlignage, texte crème et logo exactement vert. */
.hero-name-mark {
  color: var(--paper);
}
.hero-name-mark::before {
  content: none;
}
.hero-logo-overlay {
  width: 154%;
  top: 48%;
  filter: drop-shadow(0 10px 22px rgba(0,0,0,.16));
}
.hero-bottom {
  padding-top: clamp(2.6rem, 6.5vh, 5rem);
}

/* Bloc présentation : silhouette propre et respiration constante. */
.intro {
  position: relative;
  z-index: 3;
  min-height: clamp(27rem, 52svh, 40rem);
  padding: clamp(5rem, 8vw, 7rem) var(--pad);
  border-radius: var(--section-curve);
  overflow: hidden;
}
.intro-label {
  line-height: 1.2;
}
.intro-copy {
  width: min(100%, 54rem);
}

/* Architecture des catégories. */
.category:not(.ticket-section) {
  padding-bottom: 0;
  background: var(--acid);
}
.category-marquee-heading {
  overflow: visible;
}
.category:not(.ticket-section) .category-marquee {
  overflow: hidden;
}
.category:not(.ticket-section) .category-marquee:first-of-type {
  background: var(--ink);
  border-radius: var(--section-curve) var(--section-curve) 0 0;
}
.category:not(.ticket-section) .category-marquee + .category-marquee {
  background: var(--acid);
  color: var(--ink);
  border-radius: 0 0 var(--section-curve) var(--section-curve);
}

/* Sous-titre de catégorie : même position, même hauteur, même couleur partout. */
.category-heading-meta,
.category-heading--reverse .category-heading-meta {
  position: relative;
  z-index: 5;
  display: flex;
  align-items: center;
  width: fit-content;
  max-width: calc(100% - (2 * var(--category-inset)));
  min-height: var(--category-meta-height);
  height: var(--category-meta-height);
  margin: 0 0 calc(-1 * var(--category-meta-height)) var(--category-inset);
  padding: 0;
  background: transparent;
  color: var(--paper);
  border-radius: 0;
  box-shadow: none;
}
.category-heading-meta p {
  margin: 0;
  color: inherit;
  font-size: clamp(.78rem, .95vw, 1rem);
  line-height: 1;
  letter-spacing: .055em;
  font-weight: 800;
  white-space: nowrap;
}

/* Bloc galerie : courbe supérieure régulière et alignement des petits textes. */
.category-content {
  position: relative;
  z-index: 2;
  margin-top: -1px;
  padding-top: var(--category-meta-height);
  padding-bottom: var(--panel-gap);
  overflow: hidden;
  background: var(--ink);
  color: var(--paper);
  border-radius: var(--section-curve) var(--section-curve) 0 0;
}
.category-toolbar {
  min-height: 4.1rem;
  padding: 1.2rem var(--category-inset) .9rem;
}
.category-toolbar > p {
  opacity: .78;
  line-height: 1.35;
}
.rail {
  padding-top: 1rem;
  padding-bottom: 2.35rem;
}
.rail-track {
  align-items: stretch;
}
.visual-card {
  border-radius: .64rem;
}

/* Tickets : même logique de sous-titre et même grille d'alignement. */
.ticket-section {
  padding-top: clamp(5rem, 8.5vw, 8rem);
}
.category-heading-meta--ticket {
  margin-bottom: clamp(2.3rem, 4vw, 3.6rem);
}
.ticket-menu {
  padding: 0 var(--category-inset) clamp(4.8rem, 8vw, 7.5rem);
}
.ticket-toolbar {
  padding-inline: var(--category-inset);
}
.ticket-booking {
  position: relative;
  z-index: 2;
  margin-top: clamp(3rem, 5vw, 5rem);
  border-radius: var(--section-curve);
  overflow: hidden;
}

/* Lightbox : la création tient toujours entièrement dans l'écran. */
.lightbox {
  width: min(96vw, 100rem);
  height: min(94svh, 62rem);
  max-width: 100rem;
  max-height: 94svh;
  border-radius: .72rem;
}
.lightbox-layout {
  grid-template-columns: minmax(0, 1fr) clamp(15rem, 23vw, 22rem);
  min-width: 0;
  min-height: 0;
}
.lightbox-media {
  min-width: 0;
  min-height: 0;
  padding: clamp(.55rem, 1.15vw, 1rem);
  overflow: hidden;
}
.lightbox-media img {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.lightbox-info {
  min-width: 0;
  min-height: 0;
  padding: clamp(1.4rem, 2.7vw, 2.8rem);
  overflow: hidden;
}
.lightbox-info h2 {
  font-size: clamp(1.8rem, 3vw, 3.8rem);
}

/* Contact : format plus court, sans vide inutile. */
.contact {
  padding: clamp(3.5rem, 6vw, 5.8rem) var(--pad) clamp(2.8rem, 4.2vw, 4.2rem);
}
.contact-label {
  margin-bottom: clamp(1.6rem, 2.8vw, 2.5rem);
}
.contact-heading .title-band--main {
  padding: .52rem .92rem .64rem;
}
.contact-heading .title-band--main h2 {
  max-width: 15ch;
  font-size: clamp(2.55rem, 6vw, 6.6rem);
  line-height: .88;
}
.contact-heading .title-band--accent {
  padding: .48rem .82rem .56rem;
}
.contact-heading .title-band--accent p {
  font-size: clamp(1rem, 1.8vw, 1.65rem);
}
.contact-row {
  margin-top: clamp(2rem, 3.5vw, 3.35rem);
}

/* Interactions et accessibilité, sans déplacer la mise en page. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid var(--acid);
  outline-offset: 3px;
}

@media (max-width: 900px) {
  :root {
    --category-inset: clamp(1rem, 5vw, 2.5rem);
  }
  .lightbox {
    width: 96vw;
    height: 94svh;
  }
  .lightbox-layout {
    display: grid;
    grid-template: minmax(0, 1fr) / minmax(0, 1fr);
  }
  .lightbox-media {
    grid-area: 1 / 1;
    padding: .6rem;
  }
  .lightbox-info {
    display: none;
  }
  .ticket-menu,
  .ticket-booking {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 680px) {
  :root {
    --section-curve: clamp(2.15rem, 10vw, 3.35rem);
    --category-inset: 1rem;
    --category-meta-height: 2.35rem;
    --panel-gap: 4rem;
  }
  .mini-nav {
    max-width: calc(100vw - 1rem);
  }
  .hero-logo-overlay {
    width: 162%;
  }
  .intro {
    min-height: auto;
    padding-block: 4.5rem;
  }
  .category-heading-meta,
  .category-heading--reverse .category-heading-meta {
    max-width: calc(100% - 2rem);
    margin-left: 1rem;
  }
  .category-heading-meta p {
    font-size: clamp(.61rem, 2.55vw, .74rem);
    letter-spacing: .035em;
  }
  .category-toolbar {
    min-height: 3.7rem;
    padding-top: 1rem;
  }
  .category-toolbar > p {
    max-width: 78%;
    font-size: .72rem;
  }
  .ticket-menu {
    padding-inline: 1rem;
  }
  .ticket-booking {
    margin-top: 2.5rem;
  }
  .contact-heading .title-band--main h2 {
    font-size: clamp(2.35rem, 11vw, 4.2rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  .category-marquee-track,
  .rail-track {
    transform: none !important;
  }
}


/* === V6 — bandeaux droits et cartouches sous les titres === */

/* Suppression des traits et de tous les arrondis sur les deux grands bandeaux. */
.category-marquee,
.category:not(.ticket-section) .category-marquee,
.category:not(.ticket-section) .category-marquee:first-of-type,
.category:not(.ticket-section) .category-marquee + .category-marquee {
  border: 0 !important;
  border-radius: 0 !important;
}

/* Le sous-titre devient un vrai rectangle accroché sous le grand titre. */
.category-heading-meta,
.category-heading--reverse .category-heading-meta {
  position: relative;
  z-index: 6;
  display: flex;
  align-items: center;
  width: fit-content;
  max-width: calc(100% - (2 * var(--category-inset)));
  min-height: var(--category-meta-height);
  height: var(--category-meta-height);
  margin: 0 0 calc(-1 * var(--category-meta-height)) var(--category-inset);
  padding: 0 clamp(.9rem, 1.4vw, 1.25rem);
  background: var(--acid);
  color: var(--ink);
  border: 0;
  border-radius: 0 0 .72rem .72rem;
  box-shadow: none;
}
.category-heading-meta p {
  color: var(--ink);
}

/* Le bloc sombre démarre sous le cartouche, sans trait de séparation. */
.category-content {
  margin-top: 0;
  padding-top: calc(var(--category-meta-height) + .45rem);
  border-top: 0;
}

/* Le cartouche Tickets reprend exactement la même construction. */
.category-heading-meta--ticket {
  margin: 0 0 clamp(2.3rem, 4vw, 3.6rem) var(--category-inset);
  background: var(--acid);
  color: var(--ink);
  border-radius: 0 0 .72rem .72rem;
}

/* Aucun trait décoratif autour des outils de galerie. */
.ticket-toolbar,
.category-toolbar,
.category-content {
  border-top: 0 !important;
  border-bottom: 0 !important;
}

@media (max-width: 680px) {
  .category-heading-meta,
  .category-heading--reverse .category-heading-meta,
  .category-heading-meta--ticket {
    max-width: calc(100% - 2rem);
    margin-left: 1rem;
    margin-right: 0;
    padding-inline: .75rem;
    border-radius: 0 0 .55rem .55rem;
  }
  .category-content {
    padding-top: calc(var(--category-meta-height) + .35rem);
  }
}

/* === Nouveaux visuels — affichage panoramique intégral === */
.visual-card.visual-card--landscape-full {
  flex-basis: clamp(27rem, 43vw, 48rem);
  height: auto;
  aspect-ratio: 2048 / 1448;
  align-self: center;
  background: #111;
}
.visual-card.visual-card--landscape-full img {
  object-fit: contain;
  background: #111;
}

@media (max-width: 680px) {
  .visual-card.visual-card--landscape-full {
    flex-basis: 88vw;
    height: auto;
  }
}


/* === V7 — ajustements tickets et contact === */
.ticket-menu h2,
.ticket-menu-heading {
  max-width: 24ch;
  font-size: clamp(2.24rem, 5.32vw, 6.3rem);
}

.contact {
  padding-top: clamp(2rem, 3.2vw, 3.25rem);
}
.contact-heading {
  display: grid;
  justify-items: center;
  text-align: center;
}
.contact-heading .title-band--main {
  width: 100%;
  margin-inline: auto;
  padding: 0;
  background: transparent;
  color: var(--paper);
  border-radius: 0;
}
.contact-heading .title-band--main h2 {
  margin-inline: auto;
}
.contact-heading .title-band--accent {
  margin: .85rem auto 0;
}

@media (max-width: 680px) {
  .ticket-menu h2,
  .ticket-menu-heading {
    font-size: clamp(1.96rem, 10.5vw, 3.64rem);
  }
  .contact {
    padding-top: 1.75rem;
  }
}

/* === V8 — bandeau Tickets, coins arrondis et aperçu intégral === */
.ticket-section {
  padding-top: 0;
}

.ticket-section .category-marquee:first-of-type {
  background: var(--ink);
  color: var(--paper);
}
.ticket-section .category-marquee + .category-marquee {
  background: var(--acid);
  color: var(--ink);
}
.ticket-section .category-heading-meta--ticket {
  margin-top: 0;
}

/* Les tickets gardent leur format complet avec des coins nettement arrondis. */
.rail--tickets .visual-card,
.rail--tickets .visual-card img {
  border-radius: clamp(.95rem, 1.35vw, 1.4rem);
}
.rail--tickets .visual-card {
  overflow: hidden;
}
.rail--tickets .visual-card img {
  clip-path: inset(0 round clamp(.95rem, 1.35vw, 1.4rem));
}

/* Les affiches s'ouvrent entièrement, dans un aperçu volontairement plus petit. */
.lightbox.lightbox--poster {
  width: min(88vw, 82rem);
  height: min(88svh, 54rem);
}
.lightbox.lightbox--poster .lightbox-media img {
  width: auto;
  height: auto;
  max-width: 86%;
  max-height: 86%;
  object-fit: contain;
}

@media (max-width: 900px) {
  .lightbox.lightbox--poster {
    width: 92vw;
    height: 88svh;
  }
  .lightbox.lightbox--poster .lightbox-media img {
    max-width: 90%;
    max-height: 90%;
  }
}


/* === V9 — finition du bandeau Tickets et lightbox au format du média === */
/* Le bandeau vert des tickets reprend exactement les coins inférieurs arrondis des autres catégories. */
.ticket-section .category-marquee-heading {
  overflow: visible;
}
.ticket-section .category-marquee {
  overflow: hidden;
}
.ticket-section .category-marquee:first-of-type {
  border-radius: var(--section-curve) var(--section-curve) 0 0;
}
.ticket-section .category-marquee + .category-marquee {
  border-radius: 0 0 var(--section-curve) var(--section-curve);
}

/* La fenêtre d'aperçu épouse le ratio exact de chaque média : portrait pour les affiches, paysage pour les tickets. */
.lightbox.lightbox--media-shaped {
  width: var(--lightbox-width, min(88vw, 62rem));
  height: var(--lightbox-height, min(84svh, 52rem));
  max-width: 92vw;
  max-height: 88svh;
  padding: 0;
  background: #111;
  overflow: hidden;
  border-radius: .72rem;
}
.lightbox.lightbox--media-shaped.lightbox--landscape {
  border-radius: clamp(.95rem, 1.35vw, 1.4rem);
}
.lightbox.lightbox--media-shaped .lightbox-layout {
  display: block;
  width: 100%;
  height: 100%;
}
.lightbox.lightbox--media-shaped .lightbox-media {
  width: 100%;
  height: 100%;
  padding: 0;
  overflow: hidden;
  background: #111;
  border-radius: inherit;
}
.lightbox.lightbox--media-shaped .lightbox-media img {
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  object-fit: contain;
  border-radius: inherit;
}
.lightbox.lightbox--media-shaped .lightbox-info {
  display: none;
}
.lightbox.lightbox--media-shaped .lightbox-close {
  top: .65rem;
  right: .65rem;
  width: 2.7rem;
  height: 2.7rem;
  background: rgba(40,39,36,.84);
  backdrop-filter: blur(10px);
}

@media (max-width: 680px) {
  .lightbox.lightbox--media-shaped {
    max-width: 94vw;
    max-height: 86svh;
  }
  .lightbox.lightbox--media-shaped .lightbox-close {
    top: .45rem;
    right: .45rem;
    width: 2.45rem;
    height: 2.45rem;
  }
}


/* === V10 — raccord exact du bandeau Tickets === */
/* Le bloc Tickets reprend le même raccord vert/noir arrondi que les autres catégories. */
.ticket-section {
  background: var(--acid);
}

.ticket-section .ticket-menu,
.ticket-section .ticket-toolbar,
.ticket-section > .rail--tickets {
  background: var(--ink);
  color: var(--paper);
}

.ticket-section .ticket-menu {
  position: relative;
  z-index: 2;
  margin-top: -1px;
  padding-top: clamp(4.8rem, 8vw, 7.5rem);
  border-radius: var(--section-curve) var(--section-curve) 0 0;
}

/* On conserve aussi les coins inférieurs du bandeau vert lui-même. */
.ticket-section .category-marquee + .category-marquee {
  border-radius: 0 0 var(--section-curve) var(--section-curve);
}

/* === V11 — bloc Tickets calé exactement sur les autres catégories === */
/* Le bandeau reste droit : l'arrondi visible vient, comme ailleurs, du bloc sombre qui remonte dessus. */
.ticket-section,
.ticket-section .category-marquee-heading {
  background: var(--acid);
}
.ticket-section .category-marquee,
.ticket-section .category-marquee:first-of-type,
.ticket-section .category-marquee + .category-marquee {
  border: 0 !important;
  border-radius: 0 !important;
}

/* Le petit cartouche 05 descend dans la partie sombre avec exactement les mêmes dimensions et le même décalage. */
.ticket-section .category-heading-meta--ticket {
  position: relative;
  z-index: 6;
  display: flex;
  align-items: center;
  width: fit-content;
  max-width: calc(100% - (2 * var(--category-inset)));
  min-height: var(--category-meta-height);
  height: var(--category-meta-height);
  margin: 0 0 calc(-1 * var(--category-meta-height)) var(--category-inset) !important;
  padding: 0 clamp(.9rem, 1.4vw, 1.25rem);
  background: var(--acid);
  color: var(--ink);
  border: 0;
  border-radius: 0 0 .72rem .72rem;
  box-shadow: none;
}

/* La zone sombre reprend exactement l'amorce arrondie et la hauteur de raccord des autres blocs. */
.ticket-section .ticket-menu {
  position: relative;
  z-index: 2;
  margin-top: 0;
  padding: calc(var(--category-meta-height) + .45rem) var(--category-inset) clamp(4.8rem, 8vw, 7.5rem);
  overflow: hidden;
  background: var(--ink);
  color: var(--paper);
  border-radius: var(--section-curve) var(--section-curve) 0 0;
}

@media (max-width: 680px) {
  .ticket-section .category-heading-meta--ticket {
    max-width: calc(100% - 2rem);
    margin-left: 1rem !important;
    margin-right: 0 !important;
    padding-inline: .75rem;
    border-radius: 0 0 .55rem .55rem;
  }
  .ticket-section .ticket-menu {
    padding-top: calc(var(--category-meta-height) + .35rem);
    padding-inline: 1rem;
  }
}


/* === V12 — ajout affiche cinéma et ajustements de proportions === */
/* Le contenu « Tickets sur mesure » respire davantage sous le bandeau déroulant. */
.ticket-section .ticket-menu {
  padding-top: calc(var(--category-meta-height) + clamp(2rem, 3.5vw, 3.5rem));
}

/* Le bloc de réservation est environ deux fois plus compact, sans réduire la lisibilité du formulaire. */
.ticket-booking {
  gap: clamp(1.25rem, 4vw, 4.5rem);
  padding: clamp(3rem, 5.5vw, 5rem) var(--pad);
}
.ticket-booking-copy h3 {
  max-width: 16ch;
  font-size: clamp(1.6rem, 2.9vw, 3.2rem);
  margin-bottom: 1rem;
}
.ticket-booking-copy > p:last-child {
  max-width: 30rem;
  font-size: .92rem;
}
.ticket-form {
  gap: .85rem .8rem;
}
.form-field textarea {
  min-height: 6rem;
}

@media (max-width: 680px) {
  .ticket-section .ticket-menu {
    padding-top: calc(var(--category-meta-height) + 1.75rem);
  }
  .ticket-booking {
    padding-block: 2.5rem;
  }
  .ticket-booking-copy h3 {
    font-size: clamp(1.55rem, 7vw, 2.25rem);
  }
}


/* === V13 — hero raccourci et réservation rééquilibrée === */
/* Le premier bloc vert apparaît dès le bas du premier écran. */
.hero {
  min-height: 86svh;
  grid-template-rows: 1fr;
  padding-bottom: clamp(1.5rem, 3.5vh, 3rem);
}
.hero-center {
  align-content: center;
}

/* La réservation devient un panneau plus contenu, avec les mêmes grands arrondis que le premier bloc vert. */
.ticket-booking {
  width: auto;
  max-width: 94rem;
  margin: clamp(3rem, 5vw, 5rem) auto 0;
  margin-inline: var(--pad);
  padding: clamp(2.35rem, 4vw, 3.9rem);
  gap: clamp(1.5rem, 4.5vw, 5rem);
  border-radius: var(--section-curve);
}
.ticket-booking-copy h3 {
  max-width: 12ch;
  margin-bottom: 1.25rem;
  font-size: clamp(3rem, 6vw, 7rem);
}
.ticket-booking-copy > p:last-child {
  max-width: 27rem;
  font-size: .9rem;
}
.ticket-form {
  gap: .72rem .75rem;
}
.form-field textarea {
  min-height: 5.25rem;
}

@media (min-width: 100rem) {
  .ticket-booking {
    margin-inline: auto;
  }
}

@media (max-width: 680px) {
  .hero {
    min-height: 84svh;
    padding-bottom: 1.25rem;
  }
  .ticket-booking {
    margin-inline: .8rem;
    padding: 2rem 1.2rem;
    border-radius: clamp(1.8rem, 10vw, 3rem);
  }
  .ticket-booking-copy h3 {
    max-width: 13ch;
    font-size: clamp(2.65rem, 12vw, 4.4rem);
  }
}

/* === V14 — restauration du bloc de réservation d’origine === */
.ticket-booking {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  width: auto;
  max-width: none;
  margin: clamp(3rem, 5vw, 5rem) 0 0;
  padding: clamp(6rem, 11vw, 10rem) var(--pad);
  gap: clamp(2rem, 8vw, 9rem);
  overflow: hidden;
  background: var(--acid);
  border-radius: var(--section-curve);
}
.ticket-booking-copy h3 {
  margin: 0 0 1.8rem;
  max-width: 12ch;
  font-size: clamp(2.7rem, 5.8vw, 6.4rem);
  line-height: .87;
  letter-spacing: -.07em;
  font-weight: 800;
  color: var(--ink);
}
.ticket-booking-copy > p:last-child {
  max-width: 34rem;
  font-size: inherit;
  line-height: 1.5;
  font-weight: 300;
}
.ticket-form {
  gap: 1.2rem 1rem;
}
.form-field textarea {
  min-height: 10rem;
}

@media (max-width: 900px) {
  .ticket-booking {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 680px) {
  .ticket-booking {
    margin: 2.5rem 0 0;
    padding: clamp(6rem, 11vw, 10rem) var(--pad);
    border-radius: var(--section-curve);
  }
  .ticket-booking-copy h3 {
    max-width: 12ch;
    font-size: clamp(2.7rem, 5.8vw, 6.4rem);
  }
}


/* === Correctifs portfolio Enzo — juillet 2026 === */
.cursor { display: none !important; }
.visual-card { cursor: pointer !important; }

.hero-signature-link {
  cursor: pointer;
}
.hero-signature-link:hover,
.hero-signature-link:focus-visible {
  filter: brightness(1.02);
}
.hero-signature-link:focus-visible {
  outline: 4px solid var(--acid);
  outline-offset: .18rem;
  border-radius: .35rem;
}

.intro-copy--profile {
  cursor: pointer;
  border-radius: 1rem;
  padding: 1rem 1.25rem;
  transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease;
}
.intro-copy--profile:hover,
.intro-copy--profile:focus-visible {
  background: rgba(242,239,230,.34);
  box-shadow: 0 14px 32px rgba(0,0,0,.10);
  transform: translateY(-2px);
  outline: none;
}

.profile-discover {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--acid);
  padding: 0;
  font: inherit;
  font-size: clamp(1rem, 2vw, 1.45rem);
  cursor: pointer;
}
.profile-discover:hover,
.profile-discover:focus-visible {
  color: var(--paper);
  outline: none;
}

.lightbox-media img {
  border-radius: 1rem;
}


/* === V5 — bouton de fermeture compact et carré === */
.lightbox-close,
.lightbox.lightbox--media-shaped .lightbox-close {
  display: grid;
  place-items: center;
  box-sizing: border-box;
  flex: 0 0 auto;
  width: 2.25rem;
  min-width: 2.25rem;
  max-width: 2.25rem;
  height: 2.25rem;
  min-height: 2.25rem;
  max-height: 2.25rem;
  aspect-ratio: 1 / 1;
  padding: 0;
  line-height: 1;
  font-size: 1.45rem;
  border-radius: .42rem;
}

@media (max-width: 680px) {
  .lightbox-close,
  .lightbox.lightbox--media-shaped .lightbox-close {
    width: 2.1rem;
    min-width: 2.1rem;
    max-width: 2.1rem;
    height: 2.1rem;
    min-height: 2.1rem;
    max-height: 2.1rem;
    aspect-ratio: 1 / 1;
    padding: 0;
    font-size: 1.3rem;
    border-radius: .38rem;
  }
}

/* === Correctifs animations mobile et curseur desktop — juillet 2026 === */

/* Sur mobile, les bandeaux de texte avancent 30 % moins vite. */
@media (max-width: 680px) {
  .category-marquee-track {
    animation-duration: 68.6s;
  }

  .category-marquee--reverse .category-marquee-track {
    animation-duration: 80s;
  }

  .cursor {
    display: none !important;
  }

  .visual-card {
    cursor: pointer !important;
    touch-action: manipulation;
  }
}

/* Sur ordinateur, le curseur natif laisse place au rond vert sur les affiches. */
@media (min-width: 681px) and (hover: hover) and (pointer: fine) {
  .cursor {
    display: grid !important;
  }

  .visual-card[data-lightbox-src] {
    cursor: none !important;
  }
}


/* =========================================================
   DIRECTION ARTISTIQUE FINALE — MONA SANS / GRIS + KAKI
   ========================================================= */

html {
  background: var(--ink);
}

body {
  background: var(--ink);
  color: var(--paper);
  font-family: "Mona Sans", Arial, Helvetica, sans-serif;
  font-weight: 500;
  font-style: normal;
  font-stretch: 100%;
  font-synthesis: none;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.hero,
.portfolio,
.category,
.category--inverse,
.ticket-section,
.contact {
  background: var(--ink);
}

footer {
  background: var(--ink-2);
}

/* Navigation adaptée au nouveau gris profond. */
.mini-nav {
  background: rgba(33, 33, 29, .93);
  border-color: rgba(239, 235, 225, .13);
}
.site-header.is-scrolled .mini-nav {
  background: rgba(33, 33, 29, .62);
}
.work-nav-menu {
  background: rgba(33, 33, 29, .97);
  border-color: rgba(239, 235, 225, .13);
}

/* Accent kaki global. */
::selection {
  background: var(--acid);
  color: var(--ink);
}

/* Corps / titres secondaires : Mona Sans Medium. */
body,
button,
input,
select,
textarea,
.mini-nav,
.work-nav-menu,
.intro-copy,
.category-heading-meta,
.category-toolbar,
.ticket-menu nav,
.ticket-form,
.contact-links,
footer {
  font-family: "Mona Sans", Arial, Helvetica, sans-serif;
}

.mini-nav > a,
.work-nav-toggle,
.work-nav-menu a,
.intro-label,
.category-heading-meta p,
.category-toolbar > p,
.ticket-menu-kicker,
.ticket-menu nav a,
.form-field label,
.contact-label,
.lightbox-category,
footer,
.cursor span {
  font-weight: 500;
  font-style: normal;
  font-stretch: 100%;
  font-synthesis: none;
  font-variation-settings: "wght" 500, "wdth" 100;
  letter-spacing: .025em;
}

.intro-copy p,
.ticket-booking-copy > p:last-child,
.lightbox-description,
.contact-links a,
.hero-bottom p,
.form-field input,
.form-field select,
.form-field textarea {
  font-weight: 500;
  font-style: normal;
  font-stretch: 100%;
  font-synthesis: none;
  font-variation-settings: "wght" 500, "wdth" 100;
}

/*
  GROS TITRES = Mona Sans Expanded Black Italic, sans synthèse navigateur.
  Black = 900 / Expanded = 125 / Italic réel via font-style italic.
*/
.title-band--hero h1,
.category-marquee span,
.visual-placeholder p,
.ticket-menu h2,
.ticket-booking-copy h3,
.contact-heading .title-band--main h2,
.lightbox-info h2 {
  font-family: "Mona Sans", Arial, Helvetica, sans-serif;
  font-weight: 900;
  font-style: italic;
  font-stretch: 125%;
  font-synthesis: none;
  font-optical-sizing: auto;
  font-variation-settings: "wght" 900, "wdth" 125;
  line-height: .80;
  letter-spacing: -.052em;
  word-spacing: -.012em;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures contextual;
  font-feature-settings: normal;
}

/* Hero plus dense pour tirer parti de la chasse Expanded. */
.hero {
  background: var(--ink);
  color: var(--paper);
}
.hero-statement {
  position: relative;
  width: min(100%, 94rem);
  overflow: visible;
}
.title-band--hero {
  width: min(100%, 88rem);
}
.title-band--hero h1 {
  max-width: 14.9ch;
  font-size: clamp(3rem, 7.15vw, 8.35rem);
  line-height: .79;
  letter-spacing: -.052em;
  color: var(--paper);
}

/* Le nom garde le geste graphique kaki. */
.hero-name-mark::before {
  background: var(--acid);
}

/* Tagline libre, kaki et volontairement en travers du grand titre. */
.title-band--hero-accent {
  position: absolute;
  z-index: 12;
  left: 52%;
  top: 63%;
  width: max-content;
  max-width: min(72vw, 38rem);
  margin: 0;
  padding: 0;
  background: transparent;
  color: var(--acid);
  border-radius: 0;
  transform: translate(-50%, -50%) rotate(-7deg);
  transform-origin: center;
  pointer-events: none;
}

.title-band--hero-accent p,
.hero-tagline {
  display: inline-block;
  margin: 0;
  padding: .05em .08em;
  background: transparent;
  color: var(--acid);
  font-family: "Mona Sans", Arial, Helvetica, sans-serif;
  font-weight: 700;
  font-style: italic;
  font-stretch: 112.5%;
  font-synthesis: none;
  font-variation-settings: "wght" 700, "wdth" 112.5;
  font-size: clamp(1.05rem, 1.85vw, 1.75rem);
  line-height: .92;
  letter-spacing: -.04em;
  text-wrap: balance;
  white-space: nowrap;
  text-shadow: 0 .08em .22em rgba(0, 0, 0, .32);
}

/* Sections kaki : contraste lisible avec le nouveau fond. */
.intro,
.ticket-booking {
  background: var(--acid);
  color: var(--ink);
}
.text-highlight {
  background: rgba(239, 235, 225, .55);
  color: var(--ink);
}
.category-marquee + .category-marquee,
.title-band--accent,
.ticket-menu nav .ticket-menu-cta,
.cursor {
  background: var(--acid);
  color: var(--ink);
}

/* Champs et interactions légèrement réaccordés. */
.form-field input,
.form-field select,
.form-field textarea {
  background: rgba(239, 235, 225, .46);
}
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  background: var(--paper);
}

@media (max-width: 900px) {
  .title-band--hero h1 {
    max-width: 11.6ch;
    font-size: clamp(3rem, 12.4vw, 6.25rem);
    line-height: .78;
    letter-spacing: -.055em;
  }

  .title-band--hero-accent {
    left: 51%;
    top: 66%;
    max-width: 82vw;
    transform: translate(-50%, -50%) rotate(-8deg);
  }

  .title-band--hero-accent p,
  .hero-tagline {
    font-size: clamp(.95rem, 3.7vw, 1.3rem);
    white-space: normal;
  }
}

@media (max-width: 680px) {
  .title-band--hero h1 {
    font-size: clamp(2.85rem, 13vw, 5.6rem);
    line-height: .77;
  }

  .title-band--hero-accent {
    left: 50%;
    top: 68%;
    width: min(82vw, 19rem);
  }

  .hero-tagline {
    line-height: .9;
  }
}


/* =========================================================
   AJUSTEMENTS — 13/08/2026
   Vert initial + gris 6 % moins profond + tagline sous le hero
   + header Mona Sans Bold
   ========================================================= */

/* Le vert d'origine du site. */
:root {
  --acid: #82ca81;
  --acid-deep: #6fb86f;
}

/* Header : Mona Sans Bold, non italique, largeur normale. */
.site-header,
.site-header .mini-nav,
.site-header .mini-nav > a,
.site-header .work-nav-toggle,
.site-header .work-nav-menu,
.site-header .work-nav-menu a {
  font-family: "Mona Sans", Arial, Helvetica, sans-serif;
  font-weight: 700;
  font-style: normal;
  font-stretch: 100%;
  font-synthesis: none;
  font-variation-settings: "wght" 700, "wdth" 100;
}

/* Phrase remise sous le grand titre, comme dans la composition initiale. */
.title-band--hero-accent {
  position: relative;
  z-index: 2;
  left: auto;
  top: auto;
  width: fit-content;
  max-width: calc(100% - 2rem);
  margin: 1.15rem auto 0;
  padding: .55rem 1rem .65rem;
  background: var(--acid);
  color: var(--ink);
  border-radius: .455rem;
  transform: none;
  pointer-events: auto;
}

.title-band--hero-accent p,
.hero-tagline {
  display: block;
  margin: 0;
  padding: 0;
  background: transparent;
  color: var(--ink);
  font-family: "Mona Sans", Arial, Helvetica, sans-serif;
  font-weight: 500;
  font-style: normal;
  font-stretch: 100%;
  font-synthesis: none;
  font-variation-settings: "wght" 500, "wdth" 100;
  font-size: clamp(1rem, 2vw, 1.65rem);
  line-height: 1.02;
  letter-spacing: -.025em;
  white-space: normal;
  text-shadow: none;
}

@media (max-width: 900px) {
  .title-band--hero-accent {
    position: relative;
    left: auto;
    top: auto;
    width: fit-content;
    max-width: calc(100% - 1.5rem);
    margin: 1rem auto 0;
    transform: none;
  }

  .title-band--hero-accent p,
  .hero-tagline {
    font-size: clamp(.95rem, 3.7vw, 1.25rem);
    line-height: 1.02;
  }
}

@media (max-width: 680px) {
  .title-band--hero-accent {
    left: auto;
    top: auto;
    width: fit-content;
    max-width: calc(100% - 1rem);
    transform: none;
  }
}


/* AJUSTEMENT V3 — tagline sans bloc */
.title-band--hero-accent {
  padding: 0;
  background: transparent;
  color: var(--acid);
  border-radius: 0;
}

.title-band--hero-accent p,
.hero-tagline {
  padding: 0;
  background: transparent;
  color: var(--acid);
}


/* =========================================================
   AJUSTEMENTS V4 — TYPOGRAPHIES FINALES
   13/08/2026
   ========================================================= */

/* Présentation : Mona Sans Regular, en majuscules. */
.intro-copy,
.intro-copy p,
.intro-copy strong,
.intro-copy .text-highlight {
  font-family: "Mona Sans", Arial, Helvetica, sans-serif;
  font-weight: 400;
  font-style: normal;
  font-stretch: 100%;
  font-synthesis: none;
  font-optical-sizing: auto;
  font-variation-settings: "wght" 400, "wdth" 100;
}

.intro-copy p {
  line-height: 1.03;
  letter-spacing: -.04em;
  word-spacing: -.012em;
  text-transform: uppercase;
}

/* Sous-titres numérotés : Mona Sans Expanded ExtraBold, romain. */
.category-heading-meta p,
.category-heading-meta--ticket p {
  font-family: "Mona Sans", Arial, Helvetica, sans-serif;
  font-weight: 800;
  font-style: normal;
  font-stretch: 125%;
  font-synthesis: none;
  font-optical-sizing: auto;
  font-variation-settings: "wght" 800, "wdth" 125;
  letter-spacing: -.015em;
}

/* Header complet : Mona Sans Expanded ExtraBold, romain. */
.site-header,
.site-header .mini-nav,
.site-header .mini-nav > a,
.site-header .work-nav,
.site-header .work-nav-toggle,
.site-header .work-nav-menu,
.site-header .work-nav-menu a {
  font-family: "Mona Sans", Arial, Helvetica, sans-serif;
  font-weight: 800;
  font-style: normal;
  font-stretch: 125%;
  font-synthesis: none;
  font-optical-sizing: auto;
  font-variation-settings: "wght" 800, "wdth" 125;
}

.site-header .mini-nav > a,
.site-header .work-nav-toggle,
.site-header .work-nav-menu a {
  letter-spacing: -.01em;
}

/* =========================================================
   AJUSTEMENTS V5 — FINITIONS TYPO / TICKETS / CONTACT
   13/08/2026
   ========================================================= */

/* Plus aucun rectangle derrière « Graphiste » et « Directeur Artistique ». */
.intro-copy strong {
  background: transparent;
  box-shadow: none;
  padding: 0;
  border-radius: 0;
  color: inherit;
}

/* Évite les césures indésirables demandées dans les grands titres. */
.nowrap {
  white-space: nowrap;
}

/* Le premier grand titre Tickets garde « POUR VOS » ensemble. */
.ticket-menu-heading {
  text-wrap: balance;
}

/* Le second titre Tickets est légèrement réduit et garde les groupes clés ensemble. */
.ticket-booking-copy h3 {
  font-size: clamp(2.45rem, 5.15vw, 5.75rem);
  line-height: .80;
  text-wrap: balance;
}

/* Même geste que la petite phrase du hero : libre, vert, sans cartouche. */
.contact-tagline {
  width: fit-content;
  max-width: 100%;
  margin-top: 1.05rem;
  padding: 0;
  background: transparent;
  color: var(--acid);
}

.contact-tagline p {
  margin: 0;
  padding: 0;
  background: transparent;
  color: var(--acid);
  font-family: "Mona Sans", Arial, Helvetica, sans-serif;
  font-weight: 500;
  font-style: normal;
  font-stretch: 100%;
  font-synthesis: none;
  font-variation-settings: "wght" 500, "wdth" 100;
  font-size: clamp(1rem, 2vw, 1.65rem);
  line-height: 1.02;
  letter-spacing: -.025em;
}

@media (max-width: 900px) {
  .ticket-booking-copy h3 {
    font-size: clamp(2.3rem, 9vw, 4.75rem);
  }

  .contact-tagline p {
    font-size: clamp(.95rem, 3.7vw, 1.25rem);
  }
}

@media (max-width: 680px) {
  .ticket-booking-copy h3 {
    font-size: clamp(2.05rem, 10.5vw, 4rem);
  }
}

/* =========================================================
   AJUSTEMENTS V6 — PETITS TEXTES EN MONA SANS EXPANDED MEDIUM
   13/08/2026
   ========================================================= */

/*
  Petits textes secondaires / informatifs :
  Mona Sans Medium (500) + Expanded (125), non italique.
  Les gros titres, le header et les sous-titres numérotés conservent
  leurs réglages V4/V5 respectifs.
*/
.intro-label,
.category-toolbar > p,
.ticket-menu-kicker,
.contact-label,
.form-field label,
.form-note,
.lightbox-category,
.lightbox-meta span,
footer,
footer p,
.contact-links,
.contact-links a,
.contact-links span,
.profile-discover,
.contact-row > button[data-copy-email] {
  font-family: "Mona Sans", Arial, Helvetica, sans-serif;
  font-weight: 500;
  font-style: normal;
  font-stretch: 125%;
  font-synthesis: none;
  font-optical-sizing: auto;
  font-variation-settings: "wght" 500, "wdth" 125;
}

/* Conserve le caractère discret de ces informations malgré la chasse élargie. */
.intro-label,
.ticket-menu-kicker,
.contact-label,
.form-field label,
.lightbox-category,
.lightbox-meta span,
footer {
  letter-spacing: .02em;
}

.category-toolbar > p,
.form-note {
  letter-spacing: -.005em;
}

.contact-links,
.contact-links a,
.contact-links span,
.profile-discover,
.contact-row > button[data-copy-email] {
  letter-spacing: -.015em;
}

/* =========================================================
   GLASS NEON EDIT — 13/08/2026
   Remplace uniquement l'ancien accent vert par un verre néon.
   Géométries, courbes, tailles, espacements et animations conservés.
   ========================================================= */

:root {
  /* L'ancien vert devient un accent lumineux froid, sans aplat coloré. */
  --acid: #eef8ff;
  --acid-deep: #d8ddff;

  --glass-neon-bg:
    radial-gradient(circle at 18% 10%, rgba(255,255,255,.18), transparent 34%),
    radial-gradient(circle at 84% 82%, rgba(188,155,255,.09), transparent 36%),
    linear-gradient(135deg, rgba(255,255,255,.105), rgba(255,255,255,.035) 46%, rgba(169,218,255,.075) 76%, rgba(255,255,255,.045));
  --glass-neon-bg-soft:
    linear-gradient(135deg, rgba(255,255,255,.12), rgba(255,255,255,.045) 52%, rgba(181,214,255,.075));
  --glass-neon-line: rgba(235,248,255,.30);
  --glass-neon-line-hot: rgba(181,224,255,.48);
  --glass-neon-shadow:
    0 0 0 1px rgba(154,215,255,.10),
    0 10px 34px rgba(81,158,255,.11),
    0 0 30px rgba(180,142,255,.07),
    inset 0 1px 0 rgba(255,255,255,.28),
    inset 0 -1px 0 rgba(174,209,255,.10);
  --glass-neon-shadow-large:
    0 0 0 1px rgba(155,217,255,.11),
    0 24px 80px rgba(74,148,255,.12),
    0 0 54px rgba(188,142,255,.08),
    inset 0 1px 0 rgba(255,255,255,.30),
    inset 0 -1px 0 rgba(163,204,255,.11);
}

/* Sélection : même famille visuelle, sans revenir à un aplat vert. */
::selection {
  background: rgba(204,231,255,.30);
  color: var(--paper);
}

/* Les deux grands panneaux anciennement verts deviennent du verre néon.
   Aucun border-radius n'est redéfini : les courbes existantes restent exactes. */
.intro,
.ticket-booking {
  background: var(--glass-neon-bg) !important;
  color: var(--paper) !important;
  border: 0;
  box-shadow: var(--glass-neon-shadow-large);
  -webkit-backdrop-filter: blur(26px) saturate(145%);
  backdrop-filter: blur(26px) saturate(145%);
}

.ticket-booking-copy h3 {
  color: var(--paper) !important;
}

/* Grands bandeaux anciennement verts : même hauteur et même silhouette. */
.category-marquee + .category-marquee,
.ticket-section .category-marquee + .category-marquee {
  background: var(--glass-neon-bg-soft) !important;
  color: var(--paper) !important;
  border: 0 !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.18),
    inset 0 -1px 0 rgba(155,206,255,.11),
    0 0 34px rgba(98,164,255,.08);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  backdrop-filter: blur(20px) saturate(140%);
}

/* Petits cartouches numérotés : on garde leurs coins inférieurs existants. */
.category-heading-meta,
.category-heading--reverse .category-heading-meta,
.category-heading-meta--ticket,
.ticket-section .category-heading-meta--ticket {
  background: var(--glass-neon-bg-soft) !important;
  color: var(--paper) !important;
  border: 0 !important;
  box-shadow: var(--glass-neon-shadow) !important;
  -webkit-backdrop-filter: blur(18px) saturate(145%);
  backdrop-filter: blur(18px) saturate(145%);
}

.category-heading-meta p,
.category-heading-meta--ticket p {
  color: var(--paper) !important;
}

/* CTA / états interactifs : mêmes formes, remplissage remplacé par du verre. */
.skip-link,
.mini-nav > a:hover,
.work-nav-toggle:hover,
.work-nav-toggle[aria-expanded="true"],
.work-nav-menu a:hover,
.rail-controls button:hover,
.ticket-menu nav .ticket-menu-cta,
.ticket-menu nav .ticket-menu-cta:hover,
.contact-row button:hover,
.lightbox-close:hover {
  background: var(--glass-neon-bg-soft) !important;
  color: var(--paper) !important;
  border-color: var(--glass-neon-line-hot) !important;
  box-shadow: var(--glass-neon-shadow);
  -webkit-backdrop-filter: blur(16px) saturate(145%);
  backdrop-filter: blur(16px) saturate(145%);
}

/* Le hover de la liste Tickets avait encore un voile vert semi-transparent. */
.ticket-menu nav a:hover {
  background: rgba(218,236,255,.075) !important;
}

/* Placeholders de logo : même carte, traitement glass au lieu du vert. */
.visual-placeholder--logo {
  background: var(--glass-neon-bg) !important;
  color: var(--paper) !important;
  border: 1px solid var(--glass-neon-line);
  box-shadow: var(--glass-neon-shadow);
  -webkit-backdrop-filter: blur(18px) saturate(145%);
  backdrop-filter: blur(18px) saturate(145%);
}

.visual-placeholder--logo img {
  filter: grayscale(1) brightness(2.1) contrast(.78) drop-shadow(0 0 12px rgba(171,222,255,.46));
}

/* L'ancien logo vert du hero devient une signature lumineuse neutre. */
.hero-logo-overlay {
  filter:
    grayscale(1)
    brightness(2.2)
    contrast(.78)
    drop-shadow(0 0 8px rgba(177,225,255,.62))
    drop-shadow(0 0 20px rgba(192,154,255,.28)) !important;
}

/* Les anciens textes / contours verts passent en néon froid, sans vert. */
.title-band--hero-accent,
.title-band--hero-accent p,
.hero-tagline,
.ticket-menu-heading,
.contact-tagline,
.contact-tagline p,
.profile-discover,
.lightbox-category,
.contact-links a:hover {
  color: var(--acid) !important;
}

/* Focus et contours : halo néon à la place du vert. */
.visual-card:focus-visible,
.hero-signature-link:focus-visible,
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline-color: rgba(198,231,255,.88) !important;
  filter: drop-shadow(0 0 9px rgba(121,194,255,.38));
}

/* Le curseur est masqué dans cette version du site, mais son style reste cohérent
   s'il est réactivé plus tard. */
.cursor {
  background: var(--glass-neon-bg-soft) !important;
  color: var(--paper) !important;
  border: 1px solid var(--glass-neon-line-hot);
  box-shadow: var(--glass-neon-shadow);
  -webkit-backdrop-filter: blur(16px) saturate(145%);
  backdrop-filter: blur(16px) saturate(145%);
}

/* Sécurité : le pseudo-surlignage du nom reste désactivé comme dans la version finale.
   S'il est réactivé, il héritera lui aussi du verre au lieu du vert. */
.hero-name-mark::before {
  background: var(--glass-neon-bg-soft) !important;
  box-shadow: var(--glass-neon-shadow);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
}

/* Compatibilité navigateurs sans backdrop-filter : jamais d'aplat vert de secours. */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .intro,
  .ticket-booking,
  .category-marquee + .category-marquee,
  .category-heading-meta,
  .category-heading--reverse .category-heading-meta,
  .category-heading-meta--ticket,
  .ticket-section .category-heading-meta--ticket,
  .skip-link,
  .mini-nav > a:hover,
  .work-nav-toggle:hover,
  .work-nav-toggle[aria-expanded="true"],
  .work-nav-menu a:hover,
  .rail-controls button:hover,
  .ticket-menu nav .ticket-menu-cta,
  .contact-row button:hover,
  .lightbox-close:hover,
  .visual-placeholder--logo,
  .cursor {
    background: rgba(54,61,70,.86) !important;
  }
}

/* =========================================================
   LIQUID GLASS V2 — 14/08/2026
   Verre plus dense et organique, irisations localisées.
   Les grands bandeaux défilants restent sans fond clair :
   seuls leurs bords reçoivent le traitement liquid glass.
   ========================================================= */

:root {
  --liquid-line: rgba(242, 250, 255, .62);
  --liquid-line-soft: rgba(221, 239, 255, .26);
  --liquid-cyan: rgba(73, 214, 255, .72);
  --liquid-blue: rgba(91, 132, 255, .62);
  --liquid-violet: rgba(180, 104, 255, .66);
  --liquid-pink: rgba(255, 104, 207, .52);
  --liquid-mint: rgba(92, 255, 215, .42);

  --liquid-surface:
    radial-gradient(110% 135% at 8% 0%, rgba(255,255,255,.25) 0%, rgba(255,255,255,.075) 28%, transparent 56%),
    radial-gradient(85% 105% at 96% 102%, rgba(128,91,255,.14) 0%, transparent 58%),
    radial-gradient(62% 90% at 78% 4%, rgba(64,209,255,.12) 0%, transparent 60%),
    linear-gradient(145deg, rgba(255,255,255,.115), rgba(255,255,255,.032) 43%, rgba(255,255,255,.065) 72%, rgba(255,255,255,.025));

  --liquid-surface-soft:
    radial-gradient(100% 120% at 5% 0%, rgba(255,255,255,.18), transparent 48%),
    radial-gradient(72% 100% at 100% 100%, rgba(161,99,255,.095), transparent 60%),
    linear-gradient(145deg, rgba(255,255,255,.085), rgba(255,255,255,.025) 56%, rgba(93,201,255,.045));

  --liquid-rim-shadow:
    inset 0 1px 0 rgba(255,255,255,.74),
    inset 0 -1px 0 rgba(130,202,255,.34),
    inset 1px 0 0 rgba(255,255,255,.18),
    inset -1px 0 0 rgba(179,123,255,.24),
    0 0 0 1px rgba(226,244,255,.19),
    0 0 16px rgba(75,201,255,.17),
    0 0 34px rgba(153,91,255,.12),
    0 12px 38px rgba(0,0,0,.16);

  --liquid-rim-shadow-strong:
    inset 0 1px 0 rgba(255,255,255,.92),
    inset 0 -1px 1px rgba(75,211,255,.42),
    inset 1px 0 0 rgba(255,255,255,.24),
    inset -1px 0 0 rgba(213,103,255,.28),
    0 0 0 1px rgba(232,247,255,.26),
    0 0 18px rgba(51,210,255,.24),
    0 0 46px rgba(152,93,255,.17),
    0 18px 56px rgba(0,0,0,.20);
}

/* ---------- Surface liquid glass : gros panneaux ---------- */
.intro,
.ticket-booking {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--liquid-surface) !important;
  color: var(--paper) !important;
  border: 0 !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.68),
    inset 0 -1px 0 rgba(75,214,255,.22),
    0 0 0 1px rgba(225,244,255,.16),
    0 0 58px rgba(72,202,255,.13),
    0 0 100px rgba(166,95,255,.10),
    0 28px 90px rgba(0,0,0,.18) !important;
  -webkit-backdrop-filter: blur(38px) saturate(185%) contrast(108%);
  backdrop-filter: blur(38px) saturate(185%) contrast(108%);
}

.intro::before,
.ticket-booking::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -16%;
  pointer-events: none;
  background:
    radial-gradient(32% 26% at 8% 24%, rgba(51,218,255,.22), transparent 72%),
    radial-gradient(30% 28% at 91% 18%, rgba(215,92,255,.18), transparent 74%),
    radial-gradient(36% 32% at 72% 92%, rgba(83,119,255,.16), transparent 76%);
  filter: blur(24px);
  opacity: .9;
}

.intro::after,
.ticket-booking::after {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(110deg, transparent 0 9%, rgba(255,255,255,.16) 13%, transparent 18% 72%, rgba(255,255,255,.075) 78%, transparent 84%),
    linear-gradient(180deg, rgba(255,255,255,.09), transparent 18%, transparent 82%, rgba(85,207,255,.055));
  mix-blend-mode: screen;
  opacity: .72;
}

.intro > *,
.ticket-booking > * { position: relative; z-index: 1; }

/* ---------- Bandeaux défilants : LIQUID GLASS SUR LES BORDS UNIQUEMENT ---------- */
.category-marquee,
.category:not(.ticket-section) .category-marquee,
.category:not(.ticket-section) .category-marquee:first-of-type,
.category:not(.ticket-section) .category-marquee + .category-marquee,
.ticket-section .category-marquee,
.ticket-section .category-marquee:first-of-type,
.ticket-section .category-marquee + .category-marquee {
  position: relative;
  isolation: isolate;
  background: transparent !important;
  color: var(--paper) !important;
  border: 0 !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.72),
    inset 0 2px 0 rgba(77,216,255,.18),
    inset 0 -1px 0 rgba(255,255,255,.52),
    inset 0 -2px 0 rgba(188,100,255,.20),
    0 -1px 18px rgba(68,215,255,.11),
    0 1px 22px rgba(180,87,255,.10) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

.category-marquee::before,
.category-marquee::after {
  content: "";
  position: absolute;
  z-index: 4;
  left: 0;
  right: 0;
  height: 2px;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    rgba(255,255,255,.12) 0%,
    var(--liquid-cyan) 12%,
    rgba(255,255,255,.86) 24%,
    var(--liquid-blue) 42%,
    var(--liquid-violet) 61%,
    rgba(255,255,255,.80) 76%,
    var(--liquid-pink) 89%,
    rgba(255,255,255,.18) 100%
  );
  filter: saturate(125%);
  opacity: .82;
}

.category-marquee::before {
  top: 0;
  box-shadow:
    0 0 7px rgba(255,255,255,.34),
    0 0 17px rgba(60,214,255,.22),
    0 0 31px rgba(126,98,255,.12);
}

.category-marquee::after {
  bottom: 0;
  transform: scaleX(-1);
  box-shadow:
    0 0 7px rgba(255,255,255,.28),
    0 0 18px rgba(187,89,255,.20),
    0 0 30px rgba(57,211,255,.10);
}

.category-marquee span { color: var(--paper) !important; }

/* ---------- Cartouches / rectangles arrondis : verre liquide plus marqué ---------- */
.category-heading-meta,
.category-heading--reverse .category-heading-meta,
.category-heading-meta--ticket,
.ticket-section .category-heading-meta--ticket,
.title-band--accent:not(.title-band--hero-accent),
.ticket-menu nav .ticket-menu-cta,
.skip-link,
.visual-placeholder--logo {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--liquid-surface-soft) !important;
  color: var(--paper) !important;
  border: 1px solid rgba(232,247,255,.34) !important;
  box-shadow: var(--liquid-rim-shadow-strong) !important;
  -webkit-backdrop-filter: blur(28px) saturate(190%) contrast(106%);
  backdrop-filter: blur(28px) saturate(190%) contrast(106%);
}

.category-heading-meta::before,
.category-heading-meta--ticket::before,
.title-band--accent:not(.title-band--hero-accent)::before,
.ticket-menu nav .ticket-menu-cta::before,
.skip-link::before,
.visual-placeholder--logo::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -45% -20%;
  pointer-events: none;
  background:
    radial-gradient(30% 45% at 14% 42%, rgba(59,221,255,.25), transparent 74%),
    radial-gradient(34% 48% at 87% 56%, rgba(216,83,255,.19), transparent 76%),
    radial-gradient(20% 38% at 60% 5%, rgba(255,255,255,.24), transparent 72%);
  filter: blur(12px);
  opacity: .9;
}

.category-heading-meta::after,
.category-heading-meta--ticket::after,
.title-band--accent:not(.title-band--hero-accent)::after,
.ticket-menu nav .ticket-menu-cta::after,
.skip-link::after,
.visual-placeholder--logo::after {
  content: "";
  position: absolute;
  z-index: 2;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background:
    linear-gradient(116deg, rgba(255,255,255,.22), transparent 18% 72%, rgba(181,109,255,.10)),
    radial-gradient(80% 36% at 50% 0%, rgba(255,255,255,.18), transparent 72%);
  mix-blend-mode: screen;
}

.category-heading-meta > *,
.category-heading-meta--ticket > *,
.title-band--accent:not(.title-band--hero-accent) > *,
.ticket-menu nav .ticket-menu-cta > *,
.skip-link > *,
.visual-placeholder--logo > * { position: relative; z-index: 3; }

/* ---------- Navigation et menus arrondis ---------- */
.mini-nav,
.work-nav-menu {
  border-color: rgba(230,246,255,.28) !important;
  background: rgba(31,32,33,.48) !important;
  box-shadow: var(--liquid-rim-shadow) !important;
  -webkit-backdrop-filter: blur(30px) saturate(180%) contrast(105%);
  backdrop-filter: blur(30px) saturate(180%) contrast(105%);
}

.mini-nav > a,
.work-nav-toggle,
.work-nav-menu a {
  border-color: rgba(226,245,255,.17) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.16),
    inset 0 -1px 0 rgba(91,194,255,.06);
}

.mini-nav > a:hover,
.work-nav-toggle:hover,
.work-nav-toggle[aria-expanded="true"],
.work-nav-menu a:hover {
  background: var(--liquid-surface-soft) !important;
  color: var(--paper) !important;
  border-color: rgba(239,250,255,.48) !important;
  box-shadow: var(--liquid-rim-shadow-strong) !important;
  -webkit-backdrop-filter: blur(24px) saturate(190%);
  backdrop-filter: blur(24px) saturate(190%);
}

/* ---------- Boutons circulaires / contrôles ---------- */
.rail-controls button,
.contact-row button,
.lightbox-close,
.cursor {
  background: rgba(255,255,255,.035) !important;
  color: var(--paper) !important;
  border-color: rgba(234,248,255,.35) !important;
  box-shadow: var(--liquid-rim-shadow) !important;
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
}

.rail-controls button:hover,
.contact-row button:hover,
.lightbox-close:hover {
  background: var(--liquid-surface-soft) !important;
  border-color: rgba(244,252,255,.58) !important;
  box-shadow: var(--liquid-rim-shadow-strong) !important;
}

/* ---------- Champs et CTA de formulaire : contours liquid glass ---------- */
.form-field input,
.form-field select,
.form-field textarea {
  background: rgba(255,255,255,.055) !important;
  color: var(--paper) !important;
  border: 1px solid rgba(225,244,255,.27) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.16),
    inset 0 -1px 0 rgba(77,208,255,.07),
    0 0 0 1px rgba(137,209,255,.035),
    0 8px 26px rgba(0,0,0,.08) !important;
  -webkit-backdrop-filter: blur(18px) saturate(170%);
  backdrop-filter: blur(18px) saturate(170%);
}

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  background: rgba(255,255,255,.085) !important;
  border-color: rgba(239,250,255,.54) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.35),
    0 0 0 1px rgba(86,213,255,.16),
    0 0 18px rgba(68,213,255,.16),
    0 0 34px rgba(179,92,255,.10) !important;
}

.form-field input::placeholder,
.form-field textarea::placeholder { color: rgba(239,235,225,.52); }

.ticket-submit {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: rgba(22,23,23,.52) !important;
  color: var(--paper) !important;
  border: 1px solid rgba(232,247,255,.32) !important;
  box-shadow: var(--liquid-rim-shadow) !important;
  -webkit-backdrop-filter: blur(22px) saturate(180%);
  backdrop-filter: blur(22px) saturate(180%);
}
.ticket-submit:hover {
  background: var(--liquid-surface-soft) !important;
  color: var(--paper) !important;
  box-shadow: var(--liquid-rim-shadow-strong) !important;
}

/* ---------- Petits halos colorés sur les bordures des cartes arrondies,
              sans voiler les créations ---------- */
.visual-card,
.rail--tickets .visual-card {
  box-shadow:
    inset 0 0 0 1px rgba(234,247,255,.09),
    0 0 0 1px rgba(94,208,255,.025),
    0 10px 28px rgba(0,0,0,.10);
}
.visual-card:hover {
  box-shadow:
    inset 0 0 0 1px rgba(243,251,255,.20),
    0 0 12px rgba(65,211,255,.08),
    0 0 24px rgba(174,90,255,.05),
    0 14px 34px rgba(0,0,0,.16);
}

/* ---------- Suppression de tout reliquat d'aplat clair sur les bandeaux ---------- */
.category-marquee + .category-marquee,
.ticket-section .category-marquee + .category-marquee {
  background-color: transparent !important;
  background-image: none !important;
}

/* ---------- Fallback sans backdrop-filter ---------- */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .intro,
  .ticket-booking,
  .category-heading-meta,
  .category-heading-meta--ticket,
  .title-band--accent:not(.title-band--hero-accent),
  .ticket-menu nav .ticket-menu-cta,
  .mini-nav,
  .work-nav-menu,
  .form-field input,
  .form-field select,
  .form-field textarea,
  .ticket-submit {
    background: rgba(42,45,49,.82) !important;
  }
  .category-marquee,
  .category-marquee + .category-marquee {
    background: transparent !important;
  }
}

/* =========================================================
   LIQUID GLASS V3 — 14/08/2026
   Correction demandée : aucun fond clair sur les textes défilants.
   Le centre des bandeaux reste totalement transparent ;
   seules les lueurs liquid glass vivent sur les bords.
   ========================================================= */

.category-marquee,
.category:not(.ticket-section) .category-marquee,
.category:not(.ticket-section) .category-marquee:first-of-type,
.category:not(.ticket-section) .category-marquee + .category-marquee,
.ticket-section .category-marquee,
.ticket-section .category-marquee:first-of-type,
.ticket-section .category-marquee + .category-marquee {
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

.category-marquee::before,
.category-marquee::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 3px;
  pointer-events: none;
  opacity: .98;
  background:
    linear-gradient(90deg,
      rgba(255,255,255,.04) 0%,
      rgba(120,233,255,.72) 14%,
      rgba(255,255,255,.95) 25%,
      rgba(96,150,255,.82) 42%,
      rgba(181,111,255,.84) 60%,
      rgba(255,145,219,.72) 78%,
      rgba(255,255,255,.72) 88%,
      rgba(255,255,255,.06) 100%);
}

.category-marquee::before {
  top: 0;
  box-shadow:
    0 0 8px rgba(255,255,255,.30),
    0 0 16px rgba(93,219,255,.30),
    0 0 26px rgba(113,117,255,.16),
    0 0 38px rgba(197,99,255,.12);
}

.category-marquee::after {
  bottom: 0;
  transform: scaleX(-1);
  box-shadow:
    0 0 8px rgba(255,255,255,.24),
    0 0 16px rgba(255,137,215,.24),
    0 0 26px rgba(93,219,255,.16),
    0 0 38px rgba(121,111,255,.10);
}

.category-marquee span {
  color: rgba(244, 242, 236, .96) !important;
  text-shadow:
    0 1px 0 rgba(255,255,255,.05),
    0 0 10px rgba(255,255,255,.04);
}

/* =========================================================
   LIQUID GLASS V4 — 14/08/2026
   Fix demandé : suppression totale du fond derrière les titres défilants.
   ========================================================= */

/* Le conteneur de la zone des bandeaux ne doit plus porter de fond clair. */
.category,
.category--inverse,
.category:not(.ticket-section),
.category-marquee-heading {
  background: var(--ink) !important;
}

/* Le wrapper des deux bandeaux reste transparent pour ne montrer que le fond sombre global. */
.category-marquee-heading,
.category-marquee-track,
.category-marquee-group {
  background: transparent !important;
}

/* Les deux bandeaux eux-mêmes n'ont aucun fond : seulement les lueurs sur les bords. */
.category-marquee,
.category:not(.ticket-section) .category-marquee,
.category:not(.ticket-section) .category-marquee:first-of-type,
.category:not(.ticket-section) .category-marquee + .category-marquee,
.ticket-section .category-marquee,
.ticket-section .category-marquee:first-of-type,
.ticket-section .category-marquee + .category-marquee {
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

/* Texte clair et lisible, sans aplat derrière. */
.category-marquee span {
  color: rgba(244, 241, 233, .94) !important;
  text-shadow: 0 0 1px rgba(255,255,255,.04);
}

/* =========================================================
   LIQUID GLASS V5 — 14/08/2026
   - Les lignes des bandeaux défilants sont rentrées pour ne pas casser
     la forme arrondie aux extrémités.
   - Le cartouche 01/02/03... n'a plus de ligne sur le haut.
   ========================================================= */

/* 1) Gros titres défilants : on rentre les traits haut/bas pour laisser respirer l'arrondi latéral. */
.category-marquee::before,
.category-marquee::after {
  left: clamp(1.15rem, 4.2vw, 4.5rem) !important;
  right: clamp(1.15rem, 4.2vw, 4.5rem) !important;
  border-radius: 999px !important;
}

@media (max-width: 680px) {
  .category-marquee::before,
  .category-marquee::after {
    left: 1rem !important;
    right: 1rem !important;
  }
}

/* 2) Cartouche 01 — suppression totale de la ligne du haut pour l'intégrer au bandeau. */
.category-heading-meta,
.category-heading--reverse .category-heading-meta,
.category-heading-meta--ticket,
.ticket-section .category-heading-meta--ticket {
  border-top-color: transparent !important;
  box-shadow:
    inset 0 -1px 1px rgba(75,211,255,.34),
    inset 1px 0 0 rgba(255,255,255,.20),
    inset -1px 0 0 rgba(213,103,255,.22),
    0 0 0 1px rgba(232,247,255,.14),
    0 0 18px rgba(51,210,255,.18),
    0 0 42px rgba(152,93,255,.12),
    0 18px 56px rgba(0,0,0,.18) !important;
}

/* On enlève aussi le reflet accroché au bord supérieur. */
.category-heading-meta::after,
.category-heading-meta--ticket::after {
  background:
    linear-gradient(116deg, rgba(255,255,255,.18), transparent 18% 72%, rgba(181,109,255,.10)),
    radial-gradient(70% 40% at 50% 120%, rgba(255,255,255,.10), transparent 72%) !important;
}


/* =========================================================
   AJUSTEMENTS CIBLÉS — 14/08/2026
   Uniquement : traits, cartouches numérotés, position hero et petits textes tickets.
   ========================================================= */

/* Traits des bandeaux défilants légèrement plus fins. */
.category-marquee::before,
.category-marquee::after {
  height: 1px !important;
}

/* Cartouches 01…05 : aucune ligne ni reflet sur le bord supérieur. */
.category-heading-meta,
.category-heading--reverse .category-heading-meta,
.category-heading-meta--ticket,
.ticket-section .category-heading-meta--ticket {
  border-top: 0 !important;
  box-shadow:
    inset 0 -1px 1px rgba(75,211,255,.34),
    inset 1px 0 0 rgba(255,255,255,.20),
    inset -1px 0 0 rgba(213,103,255,.22),
    0 0 18px rgba(51,210,255,.18),
    0 0 42px rgba(152,93,255,.12),
    0 18px 56px rgba(0,0,0,.18) !important;
}

.category-heading-meta::after,
.category-heading-meta--ticket::after {
  background: radial-gradient(70% 40% at 50% 120%, rgba(255,255,255,.10), transparent 72%) !important;
}

/* Le bloc de présentation principal remonte légèrement. */
.hero-statement {
  transform: translateY(-2.5vh);
}

/* Liens Tickets + texte de réservation : même Mona Sans Expanded Medium que les autres sous-textes. */
.ticket-menu nav a,
.ticket-booking-copy > p:last-child {
  font-family: "Mona Sans", Arial, Helvetica, sans-serif;
  font-weight: 500;
  font-style: normal;
  font-stretch: 125%;
  font-synthesis: none;
  font-optical-sizing: auto;
  font-variation-settings: "wght" 500, "wdth" 125;
}

.ticket-booking-copy > p:last-child {
  letter-spacing: -.005em;
}

@media (max-width: 680px) {
  .hero-statement {
    transform: translateY(-1.5vh);
  }
}

/* =========================================================
   MODE JOUR / NUIT — 14/08/2026
   Sélecteur liquid glass en haut à droite + inversion claire du site.
   Le mode nuit existant reste strictement le thème par défaut.
   ========================================================= */

/* ---------- Sélecteur de thème ---------- */
.theme-switch {
  --theme-switch-pad: .28rem;
  position: fixed;
  z-index: 160;
  top: 1rem;
  right: var(--pad);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  width: 10.1rem;
  padding: var(--theme-switch-pad);
  border: 1px solid rgba(232,247,255,.24);
  border-radius: .72rem;
  background:
    radial-gradient(110% 150% at 0% 0%, rgba(255,255,255,.15), transparent 52%),
    radial-gradient(90% 130% at 100% 100%, rgba(172,103,255,.11), transparent 62%),
    rgba(28,29,29,.48);
  color: var(--paper);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.40),
    inset 0 -1px 0 rgba(90,202,255,.10),
    0 0 0 1px rgba(117,209,255,.055),
    0 10px 34px rgba(0,0,0,.20),
    0 0 28px rgba(86,201,255,.08),
    0 0 42px rgba(174,99,255,.07);
  -webkit-backdrop-filter: blur(28px) saturate(185%);
  backdrop-filter: blur(28px) saturate(185%);
  isolation: isolate;
  overflow: hidden;
  pointer-events: auto;
}

.theme-switch::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: var(--theme-switch-pad);
  bottom: var(--theme-switch-pad);
  left: var(--theme-switch-pad);
  width: calc(50% - var(--theme-switch-pad));
  border: 1px solid rgba(240,250,255,.34);
  border-radius: .48rem;
  background:
    linear-gradient(135deg, rgba(255,255,255,.18), rgba(255,255,255,.055) 55%, rgba(107,206,255,.08)),
    radial-gradient(90% 120% at 100% 100%, rgba(183,106,255,.13), transparent 62%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.40),
    0 0 16px rgba(69,211,255,.12),
    0 0 30px rgba(174,93,255,.08);
  transition: transform .42s cubic-bezier(.2,.8,.2,1), background-color .3s ease, border-color .3s ease;
}

html[data-theme="light"] .theme-switch::before {
  transform: translateX(100%);
}

.theme-switch__option {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .42rem;
  min-width: 0;
  padding: .56rem .58rem;
  border: 0;
  border-radius: .48rem;
  background: transparent;
  color: inherit;
  cursor: pointer;
  font-family: "Mona Sans", Arial, Helvetica, sans-serif;
  font-size: .68rem;
  font-weight: 800;
  font-style: normal;
  font-stretch: 125%;
  font-synthesis: none;
  font-variation-settings: "wght" 800, "wdth" 125;
  letter-spacing: .01em;
  opacity: .56;
  transition: opacity .22s ease, transform .22s ease;
}

.theme-switch__option[aria-pressed="true"] { opacity: 1; }
.theme-switch__option:hover { opacity: 1; transform: translateY(-1px); }
.theme-switch__option:focus-visible { outline: 2px solid currentColor !important; outline-offset: -2px; filter: none !important; }

.theme-switch__icon {
  position: relative;
  display: block;
  flex: 0 0 auto;
  width: .84rem;
  height: .84rem;
}

.theme-switch__icon--moon {
  border: 1.7px solid currentColor;
  border-radius: 50%;
}
.theme-switch__icon--moon::after {
  content: "";
  position: absolute;
  width: .68rem;
  height: .68rem;
  top: -.16rem;
  right: -.17rem;
  border-radius: 50%;
  background: rgba(30,31,31,.94);
  transition: background-color .35s ease;
}

.theme-switch__icon--sun {
  border: 1.6px solid currentColor;
  border-radius: 50%;
  transform: scale(.66);
  box-shadow:
    0 -.72rem 0 -.34rem currentColor,
    0 .72rem 0 -.34rem currentColor,
    .72rem 0 0 -.34rem currentColor,
    -.72rem 0 0 -.34rem currentColor,
    .51rem .51rem 0 -.34rem currentColor,
    -.51rem -.51rem 0 -.34rem currentColor,
    .51rem -.51rem 0 -.34rem currentColor,
    -.51rem .51rem 0 -.34rem currentColor;
}

/* ---------- Variables du mode jour ---------- */
html[data-theme="light"] {
  --ink: #f4f2ec;
  --ink-2: #e9e5dc;
  --paper: #20211d;
  --paper-2: #34352f;
  --line: rgba(32,33,29,.15);
  --acid: #596075;
  --acid-deep: #43495c;

  --glass-neon-bg:
    radial-gradient(circle at 16% 8%, rgba(255,255,255,.96), transparent 36%),
    radial-gradient(circle at 88% 84%, rgba(166,142,255,.11), transparent 42%),
    linear-gradient(135deg, rgba(255,255,255,.82), rgba(255,255,255,.52) 46%, rgba(180,222,255,.20) 78%, rgba(255,255,255,.62));
  --glass-neon-bg-soft:
    linear-gradient(135deg, rgba(255,255,255,.88), rgba(255,255,255,.56) 54%, rgba(183,219,255,.20));
  --glass-neon-line: rgba(31,42,52,.14);
  --glass-neon-line-hot: rgba(80,119,153,.24);

  --liquid-line: rgba(31,41,50,.22);
  --liquid-line-soft: rgba(42,73,94,.13);
  --liquid-cyan: rgba(16, 169, 210, .58);
  --liquid-blue: rgba(63, 97, 222, .46);
  --liquid-violet: rgba(138, 70, 219, .48);
  --liquid-pink: rgba(218, 62, 164, .38);
  --liquid-mint: rgba(19, 173, 137, .34);

  --liquid-surface:
    radial-gradient(110% 135% at 8% 0%, rgba(255,255,255,.98) 0%, rgba(255,255,255,.63) 30%, transparent 58%),
    radial-gradient(85% 105% at 96% 102%, rgba(128,91,255,.10) 0%, transparent 58%),
    radial-gradient(62% 90% at 78% 4%, rgba(64,189,230,.11) 0%, transparent 60%),
    linear-gradient(145deg, rgba(255,255,255,.76), rgba(255,255,255,.38) 45%, rgba(255,255,255,.66) 74%, rgba(255,255,255,.36));

  --liquid-surface-soft:
    radial-gradient(100% 120% at 5% 0%, rgba(255,255,255,.96), transparent 49%),
    radial-gradient(72% 100% at 100% 100%, rgba(151,92,225,.08), transparent 60%),
    linear-gradient(145deg, rgba(255,255,255,.80), rgba(255,255,255,.48) 56%, rgba(77,178,218,.10));

  --liquid-rim-shadow:
    inset 0 1px 0 rgba(255,255,255,.98),
    inset 0 -1px 0 rgba(75,166,202,.18),
    inset 1px 0 0 rgba(255,255,255,.64),
    inset -1px 0 0 rgba(155,101,213,.14),
    0 0 0 1px rgba(46,67,82,.09),
    0 12px 36px rgba(33,42,49,.08),
    0 0 30px rgba(91,158,191,.08);

  --liquid-rim-shadow-strong:
    inset 0 1px 0 rgba(255,255,255,1),
    inset 0 -1px 0 rgba(62,170,210,.22),
    inset 1px 0 0 rgba(255,255,255,.72),
    inset -1px 0 0 rgba(166,89,214,.16),
    0 0 0 1px rgba(39,60,76,.11),
    0 14px 40px rgba(31,40,48,.10),
    0 0 34px rgba(82,164,202,.09),
    0 0 44px rgba(148,92,208,.06);
}

/* ---------- Inversion générale ---------- */
html[data-theme="light"],
html[data-theme="light"] body,
html[data-theme="light"] .hero,
html[data-theme="light"] .portfolio,
html[data-theme="light"] .category,
html[data-theme="light"] .category--inverse,
html[data-theme="light"] .category:not(.ticket-section),
html[data-theme="light"] .category-marquee-heading,
html[data-theme="light"] .ticket-section,
html[data-theme="light"] .contact {
  background: var(--ink) !important;
  color: var(--paper) !important;
}

html[data-theme="light"] footer {
  background: var(--ink-2) !important;
  color: var(--paper) !important;
}

html[data-theme="light"] .ticket-section .ticket-menu,
html[data-theme="light"] .ticket-section .ticket-toolbar,
html[data-theme="light"] .ticket-section > .rail--tickets {
  background: var(--ink) !important;
  color: var(--paper) !important;
}

html[data-theme="light"] .title-band--hero h1,
html[data-theme="light"] .category-marquee span,
html[data-theme="light"] .category-heading-meta p,
html[data-theme="light"] .category-heading-meta--ticket p,
html[data-theme="light"] .ticket-menu h2,
html[data-theme="light"] .ticket-menu-heading,
html[data-theme="light"] .contact-heading .title-band--main h2,
html[data-theme="light"] .contact-links a,
html[data-theme="light"] .category-toolbar > p,
html[data-theme="light"] .ticket-menu nav a,
html[data-theme="light"] .intro-label,
html[data-theme="light"] .contact-label,
html[data-theme="light"] .ticket-menu-kicker,
html[data-theme="light"] footer {
  color: var(--paper) !important;
}

/* Les grands panneaux deviennent une plaque de verre blanc, sans perdre les irisations. */
html[data-theme="light"] .intro,
html[data-theme="light"] .ticket-booking {
  background: var(--liquid-surface) !important;
  color: var(--paper) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.98),
    inset 0 -1px 0 rgba(59,155,193,.15),
    0 0 0 1px rgba(39,58,72,.08),
    0 24px 70px rgba(33,42,49,.08),
    0 0 70px rgba(64,184,221,.07),
    0 0 110px rgba(141,87,203,.05) !important;
}

html[data-theme="light"] .intro::after,
html[data-theme="light"] .ticket-booking::after {
  opacity: .34;
  mix-blend-mode: multiply;
}

html[data-theme="light"] .ticket-booking-copy h3,
html[data-theme="light"] .ticket-booking-copy > p:last-child,
html[data-theme="light"] .intro-copy,
html[data-theme="light"] .intro-copy p,
html[data-theme="light"] .intro-copy strong {
  color: var(--paper) !important;
}

/* Reflets des bandeaux : plus fins et plus élégants sur fond blanc. */
html[data-theme="light"] .category-marquee::before,
html[data-theme="light"] .category-marquee::after {
  opacity: .64;
  filter: saturate(108%);
}

html[data-theme="light"] .category-marquee span {
  color: rgba(32,33,29,.93) !important;
  text-shadow: 0 1px 0 rgba(255,255,255,.55) !important;
}

/* Cartouches et surfaces liquid glass. */
html[data-theme="light"] .category-heading-meta,
html[data-theme="light"] .category-heading--reverse .category-heading-meta,
html[data-theme="light"] .category-heading-meta--ticket,
html[data-theme="light"] .ticket-section .category-heading-meta--ticket,
html[data-theme="light"] .title-band--accent:not(.title-band--hero-accent),
html[data-theme="light"] .ticket-menu nav .ticket-menu-cta,
html[data-theme="light"] .visual-placeholder--logo {
  background: var(--liquid-surface-soft) !important;
  color: var(--paper) !important;
  border-color: rgba(36,55,70,.12) !important;
  box-shadow: var(--liquid-rim-shadow-strong) !important;
}

html[data-theme="light"] .category-heading-meta,
html[data-theme="light"] .category-heading--reverse .category-heading-meta,
html[data-theme="light"] .category-heading-meta--ticket,
html[data-theme="light"] .ticket-section .category-heading-meta--ticket {
  border-top: 0 !important;
}

/* Header : verre blanc très légèrement fumé. */
html[data-theme="light"] .mini-nav,
html[data-theme="light"] .work-nav-menu {
  background: rgba(255,255,255,.66) !important;
  color: var(--paper) !important;
  border-color: rgba(28,35,40,.10) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.98),
    0 10px 34px rgba(28,35,40,.09),
    0 0 28px rgba(77,174,210,.06) !important;
}

html[data-theme="light"] .site-header.is-scrolled .mini-nav {
  background: rgba(255,255,255,.52) !important;
}

html[data-theme="light"] .mini-nav > a,
html[data-theme="light"] .work-nav-toggle,
html[data-theme="light"] .work-nav-menu a {
  color: var(--paper) !important;
  border-color: rgba(32,41,48,.09) !important;
  background: rgba(255,255,255,.22) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.72) !important;
}

html[data-theme="light"] .mini-nav > a:hover,
html[data-theme="light"] .work-nav-toggle:hover,
html[data-theme="light"] .work-nav-toggle[aria-expanded="true"],
html[data-theme="light"] .work-nav-menu a:hover,
html[data-theme="light"] .ticket-menu nav .ticket-menu-cta,
html[data-theme="light"] .ticket-menu nav .ticket-menu-cta:hover {
  background: var(--liquid-surface-soft) !important;
  color: var(--paper) !important;
  border-color: rgba(61,104,132,.18) !important;
  box-shadow: var(--liquid-rim-shadow-strong) !important;
}

/* Formulaire et boutons. */
html[data-theme="light"] .form-field input,
html[data-theme="light"] .form-field select,
html[data-theme="light"] .form-field textarea {
  background: rgba(255,255,255,.62) !important;
  color: var(--paper) !important;
  border-color: rgba(31,42,50,.12) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.96),
    0 7px 24px rgba(33,42,49,.055) !important;
}

html[data-theme="light"] .form-field input:focus,
html[data-theme="light"] .form-field select:focus,
html[data-theme="light"] .form-field textarea:focus {
  background: rgba(255,255,255,.90) !important;
  border-color: rgba(63,126,158,.28) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,1),
    0 0 0 1px rgba(55,144,180,.08),
    0 0 24px rgba(63,164,202,.10) !important;
}

html[data-theme="light"] .form-field input::placeholder,
html[data-theme="light"] .form-field textarea::placeholder {
  color: rgba(32,33,29,.43);
}

html[data-theme="light"] .ticket-submit {
  background: rgba(32,33,29,.92) !important;
  color: #f6f4ee !important;
  border-color: rgba(32,33,29,.88) !important;
  box-shadow: 0 12px 32px rgba(32,33,29,.13) !important;
}

html[data-theme="light"] .ticket-submit:hover {
  background: #11120f !important;
  color: #fffdf8 !important;
}

html[data-theme="light"] .rail-controls button,
html[data-theme="light"] .contact-row button,
html[data-theme="light"] .cursor {
  background: rgba(255,255,255,.56) !important;
  color: var(--paper) !important;
  border-color: rgba(31,42,50,.13) !important;
  box-shadow: var(--liquid-rim-shadow) !important;
}

/* Le logo du hero devient sombre sur fond clair. */
html[data-theme="light"] .hero-logo-overlay {
  filter:
    grayscale(1)
    brightness(.28)
    contrast(1.18)
    drop-shadow(0 0 7px rgba(84,177,213,.16))
    drop-shadow(0 0 18px rgba(151,92,202,.10)) !important;
}

html[data-theme="light"] .hero-name-mark::before {
  background: var(--liquid-surface-soft) !important;
  box-shadow: var(--liquid-rim-shadow) !important;
}

html[data-theme="light"] .title-band--hero-accent,
html[data-theme="light"] .title-band--hero-accent p,
html[data-theme="light"] .hero-tagline,
html[data-theme="light"] .ticket-menu-heading,
html[data-theme="light"] .contact-tagline,
html[data-theme="light"] .contact-tagline p,
html[data-theme="light"] .profile-discover,
html[data-theme="light"] .lightbox-category,
html[data-theme="light"] .contact-links a:hover {
  color: var(--acid) !important;
}

/* Aperçu média également décliné en mode jour. */
html[data-theme="light"] .lightbox.lightbox--media-shaped,
html[data-theme="light"] .lightbox.lightbox--media-shaped .lightbox-media {
  background: #f7f5ef !important;
}

html[data-theme="light"] .lightbox-close,
html[data-theme="light"] .lightbox.lightbox--media-shaped .lightbox-close {
  background: rgba(255,255,255,.80) !important;
  color: var(--paper) !important;
  border-color: rgba(32,41,48,.14) !important;
  box-shadow: 0 8px 24px rgba(31,39,45,.10) !important;
}

/* Le switch lui-même s'inverse sans devenir plat. */
html[data-theme="light"] .theme-switch {
  background:
    radial-gradient(110% 150% at 0% 0%, rgba(255,255,255,.98), transparent 52%),
    radial-gradient(90% 130% at 100% 100%, rgba(149,91,209,.09), transparent 62%),
    rgba(255,255,255,.62);
  color: var(--paper);
  border-color: rgba(31,43,52,.11);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,1),
    0 10px 32px rgba(32,41,48,.09),
    0 0 28px rgba(59,170,211,.055),
    0 0 42px rgba(145,87,203,.045);
}

html[data-theme="light"] .theme-switch::before {
  border-color: rgba(41,65,80,.12);
  background:
    linear-gradient(135deg, rgba(255,255,255,.94), rgba(255,255,255,.58) 58%, rgba(109,194,226,.12)),
    radial-gradient(90% 120% at 100% 100%, rgba(160,91,211,.09), transparent 62%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,1),
    0 7px 20px rgba(33,42,49,.08),
    0 0 22px rgba(65,166,203,.07);
}

html[data-theme="light"] .theme-switch__icon--moon::after {
  background: rgba(248,247,242,.96);
}

/* Transition courte uniquement sur les grandes surfaces : fluide, sans ralentir les rails. */
html,
body,
.hero,
.portfolio,
.category,
.ticket-section,
.contact,
footer,
.intro,
.ticket-booking,
.mini-nav,
.work-nav-menu,
.theme-switch {
  transition: background-color .36s ease, color .28s ease, border-color .28s ease, box-shadow .36s ease;
}

@media (max-width: 680px) {
  .theme-switch {
    --theme-switch-pad: .24rem;
    top: .7rem;
    right: .7rem;
    width: 4.85rem;
    border-radius: .62rem;
  }

  .theme-switch__option {
    padding: .52rem .38rem;
  }

  .theme-switch__label { display: none; }
  .theme-switch__icon { width: .79rem; height: .79rem; }
}

@media (prefers-reduced-motion: reduce) {
  .theme-switch::before,
  .theme-switch__option,
  html,
  body,
  .hero,
  .portfolio,
  .category,
  .ticket-section,
  .contact,
  footer,
  .intro,
  .ticket-booking,
  .mini-nav,
  .work-nav-menu,
  .theme-switch {
    transition: none !important;
  }
}


/* =========================================================
   LIQUID GLASS V3 — reflets extérieurs + mode jour graphite
   14/08/2026
   - Nuit : halo extérieur irisé plus visible autour du verre.
   - Jour : reflets entièrement argent / gris / graphite / noir.
   - Aucun changement de structure ou d'interaction.
   ========================================================= */

:root {
  --liquid-outer-glow:
    0 0 0 1px rgba(238,249,255,.20),
    0 0 10px rgba(255,255,255,.12),
    0 0 24px rgba(59,214,255,.22),
    0 0 48px rgba(159,91,255,.16),
    0 18px 58px rgba(0,0,0,.24);

  --liquid-outer-glow-strong:
    0 0 0 1px rgba(244,252,255,.32),
    0 0 12px rgba(255,255,255,.18),
    0 0 28px rgba(55,217,255,.30),
    0 0 58px rgba(173,82,255,.22),
    0 22px 72px rgba(0,0,0,.30);
}

/* ---------- NUIT : le reflet dépasse désormais réellement du contour ---------- */
.mini-nav,
.work-nav-menu,
.theme-switch,
.rail-controls button,
.contact-row button,
.lightbox-close,
.cursor,
.ticket-submit,
.form-field input,
.form-field select,
.form-field textarea,
.category-heading-meta,
.category-heading-meta--ticket,
.title-band--accent:not(.title-band--hero-accent),
.ticket-menu nav .ticket-menu-cta,
.visual-placeholder--logo,
.hero-name-mark::before {
  box-shadow:
    var(--liquid-rim-shadow),
    0 0 8px rgba(255,255,255,.08),
    0 0 22px rgba(58,215,255,.15),
    0 0 44px rgba(169,87,255,.10) !important;
}

.category-heading-meta,
.category-heading-meta--ticket,
.title-band--accent:not(.title-band--hero-accent),
.ticket-menu nav .ticket-menu-cta,
.visual-placeholder--logo,
.theme-switch {
  box-shadow:
    var(--liquid-rim-shadow-strong),
    0 0 9px rgba(255,255,255,.11),
    0 0 28px rgba(54,216,255,.20),
    0 0 54px rgba(171,83,255,.15) !important;
}

/* Conserve l'absence de ligne supérieure des cartouches 01… */
.category-heading-meta,
.category-heading--reverse .category-heading-meta,
.category-heading-meta--ticket,
.ticket-section .category-heading-meta--ticket {
  border-top: 0 !important;
  box-shadow:
    inset 0 -1px 1px rgba(75,211,255,.34),
    inset 1px 0 0 rgba(255,255,255,.20),
    inset -1px 0 0 rgba(213,103,255,.22),
    0 0 8px rgba(255,255,255,.08),
    0 0 24px rgba(51,210,255,.24),
    0 0 50px rgba(152,93,255,.16),
    0 18px 56px rgba(0,0,0,.18) !important;
}

/* Gros panneaux : halo extérieur qui s'étend au-delà de la plaque. */
.intro,
.ticket-booking {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.68),
    inset 0 -1px 0 rgba(75,214,255,.22),
    0 0 0 1px rgba(225,244,255,.16),
    0 0 12px rgba(255,255,255,.08),
    0 0 42px rgba(72,202,255,.22),
    0 0 92px rgba(166,95,255,.15),
    0 30px 96px rgba(0,0,0,.22) !important;
}

/* Bandeaux : liseré lumineux + diffusion extérieure des deux côtés. */
.category-marquee,
.category:not(.ticket-section) .category-marquee,
.category:not(.ticket-section) .category-marquee:first-of-type,
.category:not(.ticket-section) .category-marquee + .category-marquee,
.ticket-section .category-marquee,
.ticket-section .category-marquee:first-of-type,
.ticket-section .category-marquee + .category-marquee {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.62),
    inset 0 -1px 0 rgba(255,255,255,.46),
    0 -1px 10px rgba(255,255,255,.08),
    0 -2px 28px rgba(63,216,255,.22),
    0 2px 30px rgba(177,84,255,.18),
    0 0 52px rgba(108,146,255,.09) !important;
}

.category-marquee::before {
  box-shadow:
    0 -1px 7px rgba(255,255,255,.44),
    0 -2px 18px rgba(60,214,255,.32),
    0 -3px 38px rgba(126,98,255,.18),
    0 2px 10px rgba(255,255,255,.14) !important;
}

.category-marquee::after {
  box-shadow:
    0 1px 7px rgba(255,255,255,.38),
    0 2px 20px rgba(187,89,255,.28),
    0 3px 38px rgba(57,211,255,.17),
    0 -2px 10px rgba(255,255,255,.11) !important;
}

/* =========================================================
   MODE JOUR — argent / graphite / noir uniquement
   ========================================================= */
html[data-theme="light"] {
  --acid: #3f403d;
  --acid-deep: #20211f;

  --glass-neon-line: rgba(18,18,18,.22);
  --glass-neon-line-hot: rgba(0,0,0,.38);

  --liquid-line: rgba(18,18,18,.34);
  --liquid-line-soft: rgba(42,42,42,.18);
  --liquid-cyan: rgba(22,22,22,.78);
  --liquid-blue: rgba(74,74,74,.68);
  --liquid-violet: rgba(118,118,118,.72);
  --liquid-pink: rgba(32,32,32,.62);
  --liquid-mint: rgba(188,188,188,.66);

  --glass-neon-bg:
    radial-gradient(circle at 12% 4%, rgba(255,255,255,.99), transparent 34%),
    radial-gradient(circle at 86% 86%, rgba(30,30,30,.10), transparent 44%),
    linear-gradient(138deg, rgba(255,255,255,.90), rgba(236,236,233,.66) 46%, rgba(74,74,72,.12) 78%, rgba(255,255,255,.72));

  --glass-neon-bg-soft:
    radial-gradient(90% 130% at 6% 0%, rgba(255,255,255,.98), transparent 50%),
    radial-gradient(76% 110% at 100% 100%, rgba(22,22,22,.10), transparent 61%),
    linear-gradient(140deg, rgba(255,255,255,.88), rgba(232,232,228,.54) 54%, rgba(58,58,56,.10));

  --liquid-surface:
    radial-gradient(112% 138% at 7% -2%, rgba(255,255,255,1) 0%, rgba(255,255,255,.72) 28%, transparent 58%),
    radial-gradient(86% 108% at 98% 102%, rgba(17,17,17,.13) 0%, transparent 58%),
    radial-gradient(62% 88% at 78% 3%, rgba(116,116,116,.13) 0%, transparent 62%),
    linear-gradient(145deg, rgba(255,255,255,.82), rgba(232,232,228,.44) 45%, rgba(255,255,255,.72) 72%, rgba(82,82,79,.08));

  --liquid-surface-soft:
    radial-gradient(102% 122% at 4% -2%, rgba(255,255,255,1), transparent 50%),
    radial-gradient(76% 104% at 102% 102%, rgba(16,16,16,.12), transparent 61%),
    linear-gradient(145deg, rgba(255,255,255,.88), rgba(229,229,225,.54) 56%, rgba(58,58,56,.10));

  --liquid-rim-shadow:
    inset 0 1px 0 rgba(255,255,255,1),
    inset 0 -1px 0 rgba(0,0,0,.20),
    inset 1px 0 0 rgba(255,255,255,.78),
    inset -1px 0 0 rgba(18,18,18,.16),
    0 0 0 1px rgba(0,0,0,.12),
    0 0 9px rgba(255,255,255,.82),
    0 0 24px rgba(20,20,20,.14),
    0 14px 38px rgba(0,0,0,.11);

  --liquid-rim-shadow-strong:
    inset 0 1px 0 rgba(255,255,255,1),
    inset 0 -1px 1px rgba(0,0,0,.26),
    inset 1px 0 0 rgba(255,255,255,.88),
    inset -1px 0 0 rgba(12,12,12,.20),
    0 0 0 1px rgba(0,0,0,.17),
    0 0 10px rgba(255,255,255,.95),
    0 0 30px rgba(17,17,17,.18),
    0 0 56px rgba(0,0,0,.10),
    0 20px 54px rgba(0,0,0,.14);

  --liquid-outer-glow:
    0 0 0 1px rgba(0,0,0,.12),
    0 0 8px rgba(255,255,255,.96),
    0 0 22px rgba(24,24,24,.15),
    0 0 42px rgba(0,0,0,.09),
    0 16px 48px rgba(0,0,0,.12);

  --liquid-outer-glow-strong:
    0 0 0 1px rgba(0,0,0,.18),
    0 0 9px rgba(255,255,255,1),
    0 0 28px rgba(20,20,20,.20),
    0 0 58px rgba(0,0,0,.13),
    0 22px 64px rgba(0,0,0,.15);
}

/* Panneaux jour : zones réfléchissantes fumées et argentées. */
html[data-theme="light"] .intro::before,
html[data-theme="light"] .ticket-booking::before {
  background:
    radial-gradient(34% 28% at 8% 22%, rgba(255,255,255,.92), transparent 72%),
    radial-gradient(30% 28% at 91% 18%, rgba(22,22,22,.15), transparent 74%),
    radial-gradient(38% 34% at 72% 94%, rgba(96,96,96,.18), transparent 76%) !important;
  filter: blur(27px) grayscale(1) !important;
  opacity: .96 !important;
}

html[data-theme="light"] .intro::after,
html[data-theme="light"] .ticket-booking::after {
  background:
    linear-gradient(110deg, transparent 0 8%, rgba(255,255,255,.82) 13%, transparent 19% 70%, rgba(36,36,36,.10) 78%, transparent 85%),
    linear-gradient(180deg, rgba(255,255,255,.62), transparent 19%, transparent 81%, rgba(0,0,0,.08)) !important;
  mix-blend-mode: overlay !important;
  opacity: .60 !important;
}

html[data-theme="light"] .intro,
html[data-theme="light"] .ticket-booking {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,1),
    inset 0 -1px 0 rgba(0,0,0,.16),
    0 0 0 1px rgba(0,0,0,.10),
    0 0 10px rgba(255,255,255,.96),
    0 0 38px rgba(38,38,38,.16),
    0 0 86px rgba(0,0,0,.09),
    0 28px 76px rgba(0,0,0,.13) !important;
}

/* Bandeaux jour : bord chromé noir / argent avec halo extérieur visible. */
html[data-theme="light"] .category-marquee,
html[data-theme="light"] .category:not(.ticket-section) .category-marquee,
html[data-theme="light"] .ticket-section .category-marquee {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.92),
    inset 0 -1px 0 rgba(16,16,16,.24),
    0 -1px 8px rgba(255,255,255,.94),
    0 -2px 25px rgba(22,22,22,.18),
    0 2px 26px rgba(0,0,0,.14),
    0 0 48px rgba(50,50,50,.10) !important;
}

html[data-theme="light"] .category-marquee::before,
html[data-theme="light"] .category-marquee::after {
  background: linear-gradient(
    90deg,
    rgba(255,255,255,.28) 0%,
    rgba(18,18,18,.82) 12%,
    rgba(255,255,255,.98) 25%,
    rgba(82,82,82,.78) 43%,
    rgba(16,16,16,.88) 61%,
    rgba(232,232,232,.96) 76%,
    rgba(44,44,44,.80) 89%,
    rgba(255,255,255,.36) 100%
  ) !important;
  filter: grayscale(1) contrast(112%) !important;
  opacity: .92 !important;
}

html[data-theme="light"] .category-marquee::before {
  box-shadow:
    0 -1px 6px rgba(255,255,255,1),
    0 -2px 19px rgba(0,0,0,.22),
    0 -4px 40px rgba(40,40,40,.13),
    0 2px 9px rgba(255,255,255,.68) !important;
}

html[data-theme="light"] .category-marquee::after {
  box-shadow:
    0 1px 6px rgba(255,255,255,.96),
    0 2px 19px rgba(0,0,0,.24),
    0 4px 40px rgba(26,26,26,.13),
    0 -2px 9px rgba(255,255,255,.58) !important;
}

/* Cartouches / boutons jour : reflet noir fumé dans le verre + halo externe. */
html[data-theme="light"] .category-heading-meta::before,
html[data-theme="light"] .category-heading-meta--ticket::before,
html[data-theme="light"] .title-band--accent:not(.title-band--hero-accent)::before,
html[data-theme="light"] .ticket-menu nav .ticket-menu-cta::before,
html[data-theme="light"] .visual-placeholder--logo::before {
  background:
    radial-gradient(32% 46% at 12% 38%, rgba(255,255,255,.98), transparent 72%),
    radial-gradient(35% 50% at 90% 60%, rgba(14,14,14,.19), transparent 76%),
    radial-gradient(22% 40% at 60% 2%, rgba(78,78,78,.18), transparent 72%) !important;
  filter: blur(13px) grayscale(1) !important;
  opacity: .98 !important;
}

html[data-theme="light"] .category-heading-meta::after,
html[data-theme="light"] .category-heading-meta--ticket::after,
html[data-theme="light"] .title-band--accent:not(.title-band--hero-accent)::after,
html[data-theme="light"] .ticket-menu nav .ticket-menu-cta::after,
html[data-theme="light"] .visual-placeholder--logo::after {
  background:
    linear-gradient(118deg, rgba(255,255,255,.72), transparent 20% 70%, rgba(20,20,20,.14)),
    radial-gradient(74% 46% at 50% 105%, rgba(0,0,0,.11), transparent 72%) !important;
  mix-blend-mode: overlay !important;
}

html[data-theme="light"] .category-heading-meta,
html[data-theme="light"] .category-heading--reverse .category-heading-meta,
html[data-theme="light"] .category-heading-meta--ticket,
html[data-theme="light"] .ticket-section .category-heading-meta--ticket {
  border-top: 0 !important;
  border-left-color: rgba(0,0,0,.14) !important;
  border-right-color: rgba(0,0,0,.14) !important;
  border-bottom-color: rgba(0,0,0,.20) !important;
  box-shadow:
    inset 0 -1px 1px rgba(0,0,0,.25),
    inset 1px 0 0 rgba(255,255,255,.96),
    inset -1px 0 0 rgba(18,18,18,.13),
    0 0 8px rgba(255,255,255,1),
    0 0 25px rgba(24,24,24,.18),
    0 0 50px rgba(0,0,0,.10),
    0 18px 48px rgba(0,0,0,.12) !important;
}

/* Navigation / switch : verre blanc fumé, contours noirs et lueur argentée externe. */
html[data-theme="light"] .mini-nav,
html[data-theme="light"] .work-nav-menu,
html[data-theme="light"] .theme-switch {
  background:
    radial-gradient(105% 155% at 0% 0%, rgba(255,255,255,.99), transparent 54%),
    radial-gradient(95% 140% at 100% 100%, rgba(12,12,12,.09), transparent 64%),
    rgba(245,245,241,.72) !important;
  border-color: rgba(0,0,0,.16) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,1),
    inset 0 -1px 0 rgba(0,0,0,.12),
    0 0 0 1px rgba(255,255,255,.72),
    0 0 8px rgba(255,255,255,1),
    0 0 24px rgba(24,24,24,.16),
    0 0 46px rgba(0,0,0,.09),
    0 14px 36px rgba(0,0,0,.12) !important;
}

html[data-theme="light"] .theme-switch::before {
  border-color: rgba(0,0,0,.19) !important;
  background:
    linear-gradient(135deg, rgba(255,255,255,.98), rgba(226,226,222,.64) 56%, rgba(40,40,38,.12)),
    radial-gradient(90% 120% at 100% 100%, rgba(0,0,0,.12), transparent 62%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,1),
    inset 0 -1px 0 rgba(0,0,0,.16),
    0 0 7px rgba(255,255,255,1),
    0 0 20px rgba(12,12,12,.18),
    0 8px 24px rgba(0,0,0,.12) !important;
}

html[data-theme="light"] .mini-nav > a,
html[data-theme="light"] .work-nav-toggle,
html[data-theme="light"] .work-nav-menu a {
  border-color: rgba(0,0,0,.11) !important;
  background: rgba(255,255,255,.30) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.96),
    0 0 8px rgba(255,255,255,.72),
    0 0 15px rgba(0,0,0,.06) !important;
}

html[data-theme="light"] .mini-nav > a:hover,
html[data-theme="light"] .work-nav-toggle:hover,
html[data-theme="light"] .work-nav-toggle[aria-expanded="true"],
html[data-theme="light"] .work-nav-menu a:hover,
html[data-theme="light"] .ticket-menu nav .ticket-menu-cta,
html[data-theme="light"] .ticket-menu nav .ticket-menu-cta:hover {
  border-color: rgba(0,0,0,.22) !important;
  box-shadow:
    var(--liquid-rim-shadow-strong),
    0 0 9px rgba(255,255,255,1),
    0 0 26px rgba(18,18,18,.18),
    0 0 46px rgba(0,0,0,.09) !important;
}

/* Champs / boutons : même chrome noir-argent, y compris en focus. */
html[data-theme="light"] .form-field input,
html[data-theme="light"] .form-field select,
html[data-theme="light"] .form-field textarea,
html[data-theme="light"] .rail-controls button,
html[data-theme="light"] .contact-row button,
html[data-theme="light"] .lightbox-close,
html[data-theme="light"] .cursor {
  border-color: rgba(0,0,0,.15) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,1),
    inset 0 -1px 0 rgba(0,0,0,.10),
    0 0 7px rgba(255,255,255,.92),
    0 0 18px rgba(0,0,0,.10),
    0 10px 28px rgba(0,0,0,.08) !important;
}

html[data-theme="light"] .form-field input:focus,
html[data-theme="light"] .form-field select:focus,
html[data-theme="light"] .form-field textarea:focus {
  border-color: rgba(0,0,0,.28) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,1),
    inset 0 -1px 0 rgba(0,0,0,.14),
    0 0 0 1px rgba(0,0,0,.08),
    0 0 9px rgba(255,255,255,1),
    0 0 25px rgba(0,0,0,.14) !important;
}

html[data-theme="light"] .ticket-submit {
  border: 1px solid rgba(0,0,0,.72) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.16),
    0 0 0 1px rgba(255,255,255,.30),
    0 0 10px rgba(255,255,255,.86),
    0 0 26px rgba(0,0,0,.20),
    0 14px 36px rgba(0,0,0,.18) !important;
}

/* Logo hero : aucune irisation colorée résiduelle en jour. */
html[data-theme="light"] .hero-logo-overlay {
  filter:
    grayscale(1)
    brightness(.24)
    contrast(1.22)
    drop-shadow(0 0 7px rgba(255,255,255,.95))
    drop-shadow(0 0 18px rgba(0,0,0,.16)) !important;
}

html[data-theme="light"] .hero-name-mark::before {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,1),
    inset 0 -1px 0 rgba(0,0,0,.20),
    0 0 7px rgba(255,255,255,1),
    0 0 23px rgba(18,18,18,.18),
    0 0 44px rgba(0,0,0,.10) !important;
}

/* Mobile : halos légèrement contenus pour rester nets sur petit écran. */
@media (max-width: 680px) {
  .theme-switch,
  .mini-nav,
  .work-nav-menu,
  .category-heading-meta,
  .category-heading-meta--ticket,
  .title-band--accent:not(.title-band--hero-accent) {
    filter: drop-shadow(0 0 9px rgba(86,201,255,.08));
  }

  html[data-theme="light"] .theme-switch,
  html[data-theme="light"] .mini-nav,
  html[data-theme="light"] .work-nav-menu,
  html[data-theme="light"] .category-heading-meta,
  html[data-theme="light"] .category-heading-meta--ticket,
  html[data-theme="light"] .title-band--accent:not(.title-band--hero-accent) {
    filter: drop-shadow(0 0 8px rgba(0,0,0,.10));
  }
}

/* =========================================================
   AJUSTEMENT BANDEAUX DÉROULANTS — CROQUIS 14/08/2026
   - raccord latéral continu avec courbes qui descendent aux bords
   - cartouche numéroté intégré dans la ligne, sans trait supérieur
   - traits plus fins et plus discrets
   ========================================================= */

:root {
  --marquee-outline-width: .7px;
  --marquee-outline-color: rgba(224, 240, 248, .34);
  --marquee-outline-glow-cyan: rgba(62, 214, 255, .18);
  --marquee-outline-glow-violet: rgba(159, 91, 255, .14);
  --marquee-side-drop: clamp(2.15rem, 2.55vw, 3.05rem);
  --marquee-tab-radius: clamp(.58rem, .72vw, .82rem);
}

/* Les liserés des deux bandeaux deviennent plus fins. */
.category-marquee::before,
.category-marquee::after {
  height: var(--marquee-outline-width) !important;
  opacity: .68 !important;
  box-shadow:
    0 0 4px rgba(255,255,255,.16),
    0 0 11px var(--marquee-outline-glow-cyan),
    0 0 18px var(--marquee-outline-glow-violet) !important;
}

/*
  Le bas du second bandeau est redessiné par le raccord ci-dessous.
  Cela évite qu'une ligne traverse le dessus du cartouche 01 / 02 / etc.
*/
.category-marquee--reverse::after {
  opacity: 0 !important;
  box-shadow: none !important;
}

.category-marquee-heading {
  position: relative;
  overflow: visible !important;
  --meta-left: var(--category-inset);
  --meta-right: calc(var(--category-inset) + 28rem);
}

/*
  Deux bras partent du cartouche vers les bords de l'écran.
  Leurs coordonnées sont mises à jour en JS pour suivre exactement
  la largeur réelle de chaque libellé.
*/
.category-marquee-heading::before,
.category-marquee-heading::after {
  content: "";
  position: absolute;
  z-index: 5;
  top: 100%;
  height: var(--marquee-side-drop);
  pointer-events: none;
  border-top: var(--marquee-outline-width) solid var(--marquee-outline-color);
  filter:
    drop-shadow(0 0 3px rgba(255,255,255,.12))
    drop-shadow(0 0 8px var(--marquee-outline-glow-cyan))
    drop-shadow(0 0 13px var(--marquee-outline-glow-violet));
}

/* Côté gauche : la ligne monte doucement depuis le bord puis rejoint le cartouche. */
.category-marquee-heading::before {
  left: 0;
  width: max(0px, var(--meta-left));
  border-left: var(--marquee-outline-width) solid var(--marquee-outline-color);
  border-top-left-radius: var(--marquee-side-drop);
}

/* Côté droit : même logique en miroir, avec une descente arrondie au bord. */
.category-marquee-heading::after {
  left: var(--meta-right);
  right: 0;
  border-right: var(--marquee-outline-width) solid var(--marquee-outline-color);
  border-top-right-radius: var(--marquee-side-drop);
}

/* Le petit cartouche devient le "creux" de la ligne : côtés + bas uniquement. */
.category-heading-meta,
.category-heading--reverse .category-heading-meta,
.category-heading-meta--ticket,
.ticket-section .category-heading-meta--ticket {
  z-index: 7 !important;
  overflow: hidden;
  border-top: 0 !important;
  border-left: var(--marquee-outline-width) solid var(--marquee-outline-color) !important;
  border-right: var(--marquee-outline-width) solid var(--marquee-outline-color) !important;
  border-bottom: var(--marquee-outline-width) solid var(--marquee-outline-color) !important;
  border-radius: 0 0 var(--marquee-tab-radius) var(--marquee-tab-radius) !important;
  box-shadow:
    inset 0 -1px 0 rgba(255,255,255,.10),
    inset 1px 0 0 rgba(255,255,255,.07),
    inset -1px 0 0 rgba(184,106,255,.08),
    0 0 5px rgba(255,255,255,.08),
    0 0 14px rgba(51,210,255,.16),
    0 0 27px rgba(152,93,255,.11),
    0 14px 42px rgba(0,0,0,.16) !important;
}

/* On neutralise le reflet supérieur pour laisser la jonction réellement ouverte. */
.category-heading-meta::after,
.category-heading-meta--ticket::after {
  background:
    radial-gradient(72% 38% at 50% 118%, rgba(255,255,255,.09), transparent 74%) !important;
}

/* Version jour : même dessin, ligne plus neutre et plus précise. */
html[data-theme="light"] {
  --marquee-outline-color: rgba(18, 22, 25, .20);
  --marquee-outline-glow-cyan: rgba(0, 104, 145, .09);
  --marquee-outline-glow-violet: rgba(53, 43, 89, .07);
}

html[data-theme="light"] .category-heading-meta,
html[data-theme="light"] .category-heading--reverse .category-heading-meta,
html[data-theme="light"] .category-heading-meta--ticket,
html[data-theme="light"] .ticket-section .category-heading-meta--ticket {
  border-top: 0 !important;
  border-left: var(--marquee-outline-width) solid var(--marquee-outline-color) !important;
  border-right: var(--marquee-outline-width) solid var(--marquee-outline-color) !important;
  border-bottom: var(--marquee-outline-width) solid var(--marquee-outline-color) !important;
  box-shadow:
    inset 0 -1px 0 rgba(0,0,0,.11),
    inset 1px 0 0 rgba(255,255,255,.76),
    inset -1px 0 0 rgba(0,0,0,.05),
    0 0 5px rgba(255,255,255,.78),
    0 0 15px rgba(0,0,0,.08),
    0 10px 30px rgba(0,0,0,.07) !important;
}

@media (max-width: 680px) {
  :root {
    --marquee-outline-width: .65px;
    --marquee-side-drop: 2rem;
    --marquee-tab-radius: .58rem;
  }

  .category-marquee-heading::before,
  .category-marquee-heading::after {
    filter:
      drop-shadow(0 0 2px rgba(255,255,255,.10))
      drop-shadow(0 0 6px var(--marquee-outline-glow-cyan));
  }
}


/* =========================================================
   CORRECTION BANDEAUX — 14/08/2026 · V2
   Référence croquis :
   - aucune ligne au-dessus du premier gros titre
   - une seule ligne entre les deux gros titres
   - la ligne basse se place AU NIVEAU DU HAUT du cartouche 01/02/...
     et s'interrompt naturellement au-dessus du cartouche
   ========================================================= */

/* 1) On ne garde PAS de trait en haut du premier bandeau. */
.category-marquee-heading > .category-marquee:first-of-type::before {
  opacity: 0 !important;
  box-shadow: none !important;
}

/* 2) Ligne du milieu : une seule occurrence, donc plus fine et nette.
      On garde le bas du premier bandeau et on masque le haut du second. */
.category-marquee-heading > .category-marquee:first-of-type::after {
  opacity: .68 !important;
}

.category-marquee-heading > .category-marquee--reverse::before {
  opacity: 0 !important;
  box-shadow: none !important;
}

/* 3) Le bas du second bandeau est toujours construit par les deux bras
      arrondis + le cartouche, pas par une ligne droite qui le traverserait. */
.category-marquee-heading > .category-marquee--reverse::after {
  opacity: 0 !important;
  box-shadow: none !important;
}

/* 4) IMPORTANT : la ligne basse remonte au niveau du HAUT du cartouche.
      --meta-top est mesuré précisément en JS. */
.category-marquee-heading::before,
.category-marquee-heading::after {
  top: var(--meta-top, calc(100% - 2.55rem)) !important;
}

/* Le raccord garde un trait très fin, comme sur le croquis. */
:root {
  --marquee-outline-width: .6px;
}

@media (max-width: 680px) {
  :root { --marquee-outline-width: .55px; }
}

/* =========================================================
   BANDEAUX DÉROULANTS — VERSION SIMPLE
   Demande : UNE SEULE ligne, exactement entre les deux titres.
   Aucun trait au-dessus, aucun trait en dessous, aucun bras latéral.
   La ligne centrale conserve le rendu liquid glass / néon subtil.
   ========================================================= */

/* Aucun contour porté par le bloc global. */
.category-marquee-heading::before,
.category-marquee-heading::after {
  content: none !important;
  display: none !important;
}

/* On neutralise tous les traits des deux bandeaux. */
.category-marquee-heading > .category-marquee::before,
.category-marquee-heading > .category-marquee::after {
  content: none !important;
  display: none !important;
  opacity: 0 !important;
  box-shadow: none !important;
  filter: none !important;
}

/* UNE SEULE ligne : bord inférieur du premier titre = séparation centrale. */
.category-marquee-heading > .category-marquee:first-of-type {
  position: relative;
  overflow: visible !important;
}

.category-marquee-heading > .category-marquee:first-of-type::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  z-index: 8 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: auto !important;
  height: 1px !important;
  opacity: 1 !important;
  pointer-events: none !important;
  border: 0 !important;
  border-radius: 999px !important;
  transform: none !important;
  filter: none !important;
  background: linear-gradient(
    90deg,
    rgba(255,255,255,.08) 0%,
    rgba(112,224,255,.58) 16%,
    rgba(247,252,255,.90) 31%,
    rgba(126,166,255,.70) 48%,
    rgba(181,119,255,.72) 67%,
    rgba(255,166,226,.52) 84%,
    rgba(255,255,255,.08) 100%
  ) !important;
  box-shadow:
    0 0 3px rgba(255,255,255,.32),
    0 0 9px rgba(83,211,255,.28),
    0 0 18px rgba(129,109,255,.18),
    0 0 26px rgba(199,101,255,.10) !important;
}

/* Le second titre ne porte aucun trait : la séparation n'est donc jamais doublée. */
.category-marquee-heading > .category-marquee--reverse::before,
.category-marquee-heading > .category-marquee--reverse::after {
  content: none !important;
  display: none !important;
}

/* Les cartouches 01 / 02 / ... gardent leur glass, mais ne génèrent plus
   aucune ligne de raccord autour des deux grands titres. */
.category-heading-meta,
.category-heading--reverse .category-heading-meta,
.category-heading-meta--ticket,
.ticket-section .category-heading-meta--ticket {
  position: relative;
  border-top: 0 !important;
}

/* Mode jour : même ligne centrale, plus sombre mais toujours glass. */
html[data-theme="light"] .category-marquee-heading > .category-marquee:first-of-type::after {
  background: linear-gradient(
    90deg,
    rgba(20,25,28,.08) 0%,
    rgba(28,102,132,.44) 18%,
    rgba(20,28,32,.62) 34%,
    rgba(70,82,128,.50) 52%,
    rgba(91,68,126,.48) 70%,
    rgba(98,61,93,.36) 86%,
    rgba(20,25,28,.08) 100%
  ) !important;
  box-shadow:
    0 0 3px rgba(255,255,255,.64),
    0 0 8px rgba(0,73,105,.15),
    0 0 16px rgba(62,49,104,.10) !important;
}

/* =========================================================
   FIX DÉFINITIF — UNE SEULE LIGNE ENTRE LES 2 MARQUEES
   14/08/2026
   Les anciennes lignes visibles venaient aussi des vrais borders
   de .category-marquee, pas seulement des pseudo-éléments.
   ========================================================= */

/* Supprime physiquement TOUS les borders natifs des deux grands bandeaux. */
.category-marquee-heading > .category-marquee,
.category-marquee-heading > .category-marquee:first-of-type,
.category-marquee-heading > .category-marquee--reverse {
  border-top: 0 !important;
  border-bottom: 0 !important;
  outline: 0 !important;
}

/* Neutralise tous les éventuels traits hérités autour du bloc global. */
.category-marquee-heading {
  border-top: 0 !important;
  border-bottom: 0 !important;
  outline: 0 !important;
}

.category-marquee-heading::before,
.category-marquee-heading::after,
.category-marquee-heading > .category-marquee::before,
.category-marquee-heading > .category-marquee::after {
  content: none !important;
  display: none !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  filter: none !important;
}

/* La seule séparation autorisée : un pseudo-élément au bas du 1er titre. */
.category-marquee-heading > .category-marquee:first-of-type {
  position: relative;
  overflow: visible !important;
}

.category-marquee-heading > .category-marquee:first-of-type::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  z-index: 20 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: -0.5px !important;
  width: 100% !important;
  height: 1px !important;
  pointer-events: none !important;
  opacity: 1 !important;
  border: 0 !important;
  outline: 0 !important;
  border-radius: 999px !important;
  transform: none !important;
  background: linear-gradient(
    90deg,
    rgba(255,255,255,.10) 0%,
    rgba(125,224,255,.60) 16%,
    rgba(247,252,255,.92) 31%,
    rgba(129,169,255,.72) 49%,
    rgba(183,123,255,.73) 68%,
    rgba(255,170,228,.54) 84%,
    rgba(255,255,255,.10) 100%
  ) !important;
  box-shadow:
    0 0 2px rgba(255,255,255,.28),
    0 0 8px rgba(95,213,255,.25),
    0 0 16px rgba(142,111,255,.17),
    0 0 24px rgba(202,107,255,.09) !important;
  filter: none !important;
}

/* Le second bandeau ne doit JAMAIS recréer une ligne. */
.category-marquee-heading > .category-marquee--reverse::before,
.category-marquee-heading > .category-marquee--reverse::after {
  content: none !important;
  display: none !important;
}

/* Variante jour : toujours une seule ligne, avec un verre plus sombre. */
html[data-theme="light"] .category-marquee-heading > .category-marquee,
html[data-theme="light"] .category-marquee-heading > .category-marquee:first-of-type,
html[data-theme="light"] .category-marquee-heading > .category-marquee--reverse {
  border-top: 0 !important;
  border-bottom: 0 !important;
}

html[data-theme="light"] .category-marquee-heading > .category-marquee:first-of-type::after {
  background: linear-gradient(
    90deg,
    rgba(20,25,28,.08) 0%,
    rgba(28,102,132,.44) 18%,
    rgba(20,28,32,.62) 34%,
    rgba(70,82,128,.50) 52%,
    rgba(91,68,126,.48) 70%,
    rgba(98,61,93,.36) 86%,
    rgba(20,25,28,.08) 100%
  ) !important;
  box-shadow:
    0 0 3px rgba(255,255,255,.58),
    0 0 8px rgba(0,73,105,.14),
    0 0 16px rgba(62,49,104,.09) !important;
}

/* Dernier verrou : les traits haut/bas venaient des inset box-shadows
   appliqués aux bandeaux eux-mêmes. On les supprime aussi. */
.category-marquee-heading > .category-marquee,
.category-marquee-heading > .category-marquee:first-of-type,
.category-marquee-heading > .category-marquee--reverse {
  box-shadow: none !important;
  filter: none !important;
}

html[data-theme="light"] .category-marquee-heading > .category-marquee,
html[data-theme="light"] .category-marquee-heading > .category-marquee:first-of-type,
html[data-theme="light"] .category-marquee-heading > .category-marquee--reverse {
  box-shadow: none !important;
  filter: none !important;
}

/* Verrou de spécificité : annule les anciens inset shadows V3, plus spécifiques. */
html[data-theme] body main .category-marquee-heading.category-marquee-heading > .category-marquee.category-marquee[class],
html[data-theme] body .category-marquee-heading.category-marquee-heading > .category-marquee.category-marquee[class] {
  border-top: 0 !important;
  border-bottom: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  filter: none !important;
}

/* Le trait qui pouvait encore sembler être "au-dessus" du 1er marquee
   venait du bord inférieur du panneau glass précédent (#about .intro).
   On garde la matière glass et son halo, mais sans liseré inférieur net. */
html[data-theme] body .intro.intro {
  border-bottom: 0 !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.50),
    0 0 12px rgba(255,255,255,.06),
    0 0 42px rgba(72,202,255,.16),
    0 0 92px rgba(166,95,255,.11),
    0 30px 96px rgba(0,0,0,.20) !important;
}

html[data-theme="light"] body .intro.intro {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.90),
    0 0 10px rgba(255,255,255,.78),
    0 0 34px rgba(38,38,38,.11),
    0 28px 76px rgba(0,0,0,.10) !important;
}

/* =========================================================
   VRAI RENDU DEMANDÉ — ligne du bas intégrée au petit titre
   - 1 seule ligne entre les 2 grands titres
   - 1 ligne en haut du contenu, derrière le cartouche 01 / 02 / 03 / 04...
   - cartouche intégré visuellement à la ligne du bas
   - même traitement pour tous les headers de catégorie
   ========================================================= */

/* On garde les deux grands titres sans autre trait que la séparation centrale. */
.category-marquee-heading {
  position: relative !important;
  overflow: visible !important;
}

.category-marquee-heading > .category-marquee,
.category-marquee-heading > .category-marquee:first-of-type,
.category-marquee-heading > .category-marquee--reverse {
  position: relative !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  filter: none !important;
}

/* Ligne du milieu = seule séparation entre les 2 textes déroulants. */
.category-marquee-heading > .category-marquee:first-of-type::after {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  height: 1px !important;
  z-index: 20 !important;
  pointer-events: none !important;
  background: linear-gradient(
    90deg,
    rgba(255,255,255,.10) 0%,
    rgba(125,224,255,.62) 16%,
    rgba(247,252,255,.94) 31%,
    rgba(129,169,255,.74) 49%,
    rgba(183,123,255,.74) 68%,
    rgba(255,170,228,.56) 84%,
    rgba(255,255,255,.10) 100%
  ) !important;
  box-shadow:
    0 0 2px rgba(255,255,255,.28),
    0 0 8px rgba(95,213,255,.25),
    0 0 16px rgba(142,111,255,.17),
    0 0 24px rgba(202,107,255,.09) !important;
}

.category-marquee-heading > .category-marquee--reverse::before,
.category-marquee-heading > .category-marquee--reverse::after {
  content: none !important;
  display: none !important;
}

/* Le bloc contenu redessine la ligne du bas sur toute la largeur.
   Le cartouche vient par-dessus, donc la ligne paraît intégrée à lui. */
.category-content {
  position: relative !important;
  z-index: 2 !important;
  margin-top: 0 !important;
  padding-top: calc(var(--category-meta-height) + .9rem) !important;
  overflow: hidden !important;
  border-top: 0 !important;
}

.category-content::before {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  top: 0 !important;
  height: 1px !important;
  z-index: 1 !important;
  pointer-events: none !important;
  background: linear-gradient(
    90deg,
    rgba(255,255,255,.10) 0%,
    rgba(125,224,255,.62) 16%,
    rgba(247,252,255,.94) 31%,
    rgba(129,169,255,.74) 49%,
    rgba(183,123,255,.74) 68%,
    rgba(255,170,228,.56) 84%,
    rgba(255,255,255,.10) 100%
  ) !important;
  box-shadow:
    0 0 2px rgba(255,255,255,.28),
    0 0 8px rgba(95,213,255,.25),
    0 0 16px rgba(142,111,255,.17),
    0 0 24px rgba(202,107,255,.09) !important;
}

/* Le petit titre 01 / 02 / 03 / ... est visuellement intégré à la ligne du bas. */
.category-heading-meta,
.category-heading--reverse .category-heading-meta,
.category-heading-meta--ticket,
.ticket-section .category-heading-meta--ticket {
  position: relative !important;
  z-index: 6 !important;
  display: inline-flex !important;
  align-items: center !important;
  width: fit-content !important;
  max-width: calc(100% - (2 * var(--category-inset))) !important;
  min-height: var(--category-meta-height) !important;
  height: var(--category-meta-height) !important;
  margin: 0 0 calc(-1 * var(--category-meta-height)) var(--category-inset) !important;
  padding: 0 clamp(1rem, 1.45vw, 1.35rem) !important;
  background: linear-gradient(180deg, rgba(57,59,67,.88) 0%, rgba(28,29,33,.95) 100%) !important;
  color: var(--paper) !important;
  border: 1px solid rgba(182,232,255,.52) !important;
  border-radius: .2rem .2rem .92rem .92rem !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.26),
    0 0 0 1px rgba(93,190,255,.06),
    0 0 10px rgba(132,215,255,.20),
    0 0 22px rgba(135,116,255,.16),
    0 10px 28px rgba(0,0,0,.22) !important;
  backdrop-filter: blur(12px) saturate(1.05) !important;
  -webkit-backdrop-filter: blur(12px) saturate(1.05) !important;
}

/* Tous les cartouches restent alignés à gauche, comme sur la référence. */
.category-heading--reverse .category-heading-meta,
.ticket-section .category-heading-meta--ticket {
  margin-left: var(--category-inset) !important;
  margin-right: 0 !important;
}

.category-heading-meta p,
.category-heading-meta--ticket p {
  margin: 0 !important;
  color: var(--paper) !important;
  font-size: clamp(.78rem, .95vw, 1rem) !important;
  line-height: 1 !important;
  letter-spacing: .03em !important;
  font-weight: 800 !important;
  white-space: nowrap !important;
}

/* Même logique en mode jour, avec un glass plus clair. */
html[data-theme="light"] .category-content::before,
html[data-theme="light"] .category-marquee-heading > .category-marquee:first-of-type::after {
  background: linear-gradient(
    90deg,
    rgba(20,25,28,.08) 0%,
    rgba(28,102,132,.44) 18%,
    rgba(20,28,32,.62) 34%,
    rgba(70,82,128,.50) 52%,
    rgba(91,68,126,.48) 70%,
    rgba(98,61,93,.36) 86%,
    rgba(20,25,28,.08) 100%
  ) !important;
  box-shadow:
    0 0 3px rgba(255,255,255,.58),
    0 0 8px rgba(0,73,105,.14),
    0 0 16px rgba(62,49,104,.09) !important;
}

html[data-theme="light"] .category-heading-meta,
html[data-theme="light"] .category-heading--reverse .category-heading-meta,
html[data-theme="light"] .category-heading-meta--ticket,
html[data-theme="light"] .ticket-section .category-heading-meta--ticket {
  background: linear-gradient(180deg, rgba(248,249,252,.78) 0%, rgba(224,226,233,.92) 100%) !important;
  color: var(--ink) !important;
  border-color: rgba(108,145,176,.42) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.80),
    0 0 10px rgba(255,255,255,.24),
    0 0 18px rgba(88,100,136,.10),
    0 10px 24px rgba(0,0,0,.08) !important;
}

html[data-theme="light"] .category-heading-meta p,
html[data-theme="light"] .category-heading-meta--ticket p {
  color: var(--ink) !important;
}

@media (max-width: 680px) {
  .category-content {
    padding-top: calc(var(--category-meta-height) + .75rem) !important;
  }

  .category-heading-meta,
  .category-heading--reverse .category-heading-meta,
  .category-heading-meta--ticket,
  .ticket-section .category-heading-meta--ticket {
    margin-left: 1rem !important;
    max-width: calc(100% - 2rem) !important;
    padding-inline: .85rem !important;
  }

  .category-heading-meta p,
  .category-heading-meta--ticket p {
    font-size: .72rem !important;
  }
}

/* =========================================================
   AJUSTEMENT FINAL — ligne pile au niveau du haut du cartouche
   + bordure du cartouche affinée
   ========================================================= */

/* Remonte très légèrement la ligne pour qu'elle prolonge exactement
   le bord supérieur des cartouches 01 / 02 / 03 / 04... */
.category-content::before {
  top: -1px !important;
  height: .75px !important;
}

/* Cartouches plus fins : bord discret, glass conservé. */
.category-heading-meta,
.category-heading--reverse .category-heading-meta,
.category-heading-meta--ticket,
.ticket-section .category-heading-meta--ticket {
  border-width: .65px !important;
  border-color: rgba(182,232,255,.46) !important;
  border-radius: .16rem .16rem .82rem .82rem !important;
  box-shadow:
    inset 0 .65px 0 rgba(255,255,255,.22),
    0 0 0 .5px rgba(93,190,255,.045),
    0 0 8px rgba(132,215,255,.16),
    0 0 18px rgba(135,116,255,.12),
    0 9px 24px rgba(0,0,0,.18) !important;
}

html[data-theme="light"] .category-heading-meta,
html[data-theme="light"] .category-heading--reverse .category-heading-meta,
html[data-theme="light"] .category-heading-meta--ticket,
html[data-theme="light"] .ticket-section .category-heading-meta--ticket {
  border-width: .65px !important;
  border-color: rgba(108,145,176,.34) !important;
  box-shadow:
    inset 0 .65px 0 rgba(255,255,255,.72),
    0 0 8px rgba(255,255,255,.18),
    0 0 14px rgba(88,100,136,.08),
    0 8px 20px rgba(0,0,0,.07) !important;
}

/* =========================================================
   V3 — CONTINUITÉ PARFAITE LIGNE / CARTOUCHE
   La ligne du bas est désormais attachée directement au bord haut
   du cartouche : même Y, même épaisseur, même liseré glass.
   ========================================================= */

:root {
  --category-glass-stroke: .5px;
  --category-glass-edge: rgba(196, 231, 255, .58);
}

/* L'ancienne ligne appartenant au bloc de contenu est supprimée :
   c'est elle qui se retrouvait au niveau du BAS du cartouche. */
.category-content::before,
html[data-theme="light"] .category-content::before {
  content: none !important;
  display: none !important;
}

/* Le cartouche devient la référence géométrique de la ligne.
   Sa bordure et les deux prolongements utilisent exactement
   la même épaisseur. */
.category-heading-meta,
.category-heading--reverse .category-heading-meta,
.category-heading-meta--ticket,
.ticket-section .category-heading-meta--ticket {
  --meta-stroke: var(--category-glass-stroke);
  --meta-edge: var(--category-glass-edge);
  position: relative !important;
  overflow: visible !important;
  isolation: isolate !important;
  border: var(--meta-stroke) solid var(--meta-edge) !important;
  border-radius: .12rem .12rem .76rem .76rem !important;
  background: linear-gradient(180deg, rgba(54,57,63,.86) 0%, rgba(27,28,32,.94) 100%) !important;
  box-shadow:
    0 0 7px rgba(126,213,255,.13),
    0 0 16px rgba(132,111,255,.10),
    0 8px 22px rgba(0,0,0,.17) !important;
  backdrop-filter: blur(12px) saturate(1.04) !important;
  -webkit-backdrop-filter: blur(12px) saturate(1.04) !important;
}

/* Les deux morceaux de ligne partent exactement du bord haut du cartouche.
   Ils remplacent toute autre ligne sous les gros titres. */
.category-heading-meta::before,
.category-heading-meta::after,
.category-heading-meta--ticket::before,
.category-heading-meta--ticket::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  top: calc(-1 * var(--meta-stroke)) !important;
  height: var(--meta-stroke) !important;
  background: var(--meta-edge) !important;
  border: 0 !important;
  border-radius: 0 !important;
  pointer-events: none !important;
  z-index: -1 !important;
  box-shadow:
    0 0 5px rgba(126,213,255,.13),
    0 0 12px rgba(132,111,255,.08) !important;
}

.category-heading-meta::before,
.category-heading-meta--ticket::before {
  right: calc(100% + var(--meta-stroke)) !important;
  width: 100vw !important;
}

.category-heading-meta::after,
.category-heading-meta--ticket::after {
  left: calc(100% + var(--meta-stroke)) !important;
  width: 100vw !important;
}

/* Le contenu reste sous le cartouche, mais sans aucune ligne propre. */
.category-content {
  border-top: 0 !important;
  box-shadow: none !important;
}

/* Mode jour : même géométrie, seule la teinte change. */
html[data-theme="light"] .category-heading-meta,
html[data-theme="light"] .category-heading--reverse .category-heading-meta,
html[data-theme="light"] .category-heading-meta--ticket,
html[data-theme="light"] .ticket-section .category-heading-meta--ticket {
  --meta-edge: rgba(92, 125, 151, .42);
  background: linear-gradient(180deg, rgba(248,249,252,.78) 0%, rgba(225,227,233,.91) 100%) !important;
  border: var(--meta-stroke) solid var(--meta-edge) !important;
  box-shadow:
    0 0 6px rgba(255,255,255,.18),
    0 0 14px rgba(83,96,127,.07),
    0 7px 18px rgba(0,0,0,.06) !important;
}

html[data-theme="light"] .category-heading-meta::before,
html[data-theme="light"] .category-heading-meta::after,
html[data-theme="light"] .category-heading-meta--ticket::before,
html[data-theme="light"] .category-heading-meta--ticket::after {
  background: var(--meta-edge) !important;
  box-shadow:
    0 0 4px rgba(255,255,255,.18),
    0 0 10px rgba(83,96,127,.06) !important;
}

/* =========================================================
   V4 — retour à la forme précédente
   - ligne pleine largeur jusqu'aux extrémités
   - même hauteur que le haut du cartouche
   - petits bords arrondis du panneau restaurés
   - même épaisseur pour la ligne et le contour
   ========================================================= */

:root {
  --category-glass-stroke: .5px;
  --category-glass-edge: rgba(196, 231, 255, .56);
}

/* On supprime les prolongements collés au cartouche :
   on revient à la ligne pleine largeur de la version précédente. */
.category-heading-meta::before,
.category-heading-meta::after,
.category-heading-meta--ticket::before,
.category-heading-meta--ticket::after,
html[data-theme="light"] .category-heading-meta::before,
html[data-theme="light"] .category-heading-meta::after,
html[data-theme="light"] .category-heading-meta--ticket::before,
html[data-theme="light"] .category-heading-meta--ticket::after {
  content: none !important;
  display: none !important;
}

/* Le cartouche reste fin, avec exactement la même épaisseur que la ligne. */
.category-heading-meta,
.category-heading--reverse .category-heading-meta,
.category-heading-meta--ticket,
.ticket-section .category-heading-meta--ticket {
  border: var(--category-glass-stroke) solid var(--category-glass-edge) !important;
  border-radius: .16rem .16rem .82rem .82rem !important;
  box-shadow:
    0 0 7px rgba(126,213,255,.12),
    0 0 16px rgba(132,111,255,.09),
    0 8px 22px rgba(0,0,0,.16) !important;
}

/* On restaure la vraie ligne horizontale sur toute la largeur du panneau.
   Comme elle est à l'intérieur du panneau arrondi et overflow:hidden,
   elle récupère automatiquement les petites extrémités arrondies. */
.category-content {
  position: relative !important;
  overflow: hidden !important;
  border-radius: var(--section-curve) var(--section-curve) 0 0 !important;
  box-shadow: none !important;
}

.category-content::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  top: calc(-1 * var(--category-glass-stroke)) !important;
  height: var(--category-glass-stroke) !important;
  z-index: 1 !important;
  pointer-events: none !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: linear-gradient(
    90deg,
    rgba(255,255,255,.10) 0%,
    rgba(125,224,255,.62) 16%,
    rgba(247,252,255,.94) 31%,
    rgba(129,169,255,.74) 49%,
    rgba(183,123,255,.74) 68%,
    rgba(255,170,228,.56) 84%,
    rgba(255,255,255,.10) 100%
  ) !important;
  box-shadow:
    0 0 2px rgba(255,255,255,.24),
    0 0 7px rgba(95,213,255,.22),
    0 0 14px rgba(142,111,255,.14),
    0 0 20px rgba(202,107,255,.08) !important;
}

/* Le bloc de contenu garde la même structure qu'avant : juste sous le cartouche. */
.category-content {
  padding-top: calc(var(--category-meta-height) + .9rem) !important;
}

html[data-theme="light"] .category-heading-meta,
html[data-theme="light"] .category-heading--reverse .category-heading-meta,
html[data-theme="light"] .category-heading-meta--ticket,
html[data-theme="light"] .ticket-section .category-heading-meta--ticket {
  border: var(--category-glass-stroke) solid rgba(92, 125, 151, .42) !important;
  box-shadow:
    0 0 6px rgba(255,255,255,.18),
    0 0 14px rgba(83,96,127,.07),
    0 7px 18px rgba(0,0,0,.06) !important;
}

html[data-theme="light"] .category-content::before {
  background: linear-gradient(
    90deg,
    rgba(20,25,28,.08) 0%,
    rgba(28,102,132,.44) 18%,
    rgba(20,28,32,.62) 34%,
    rgba(70,82,128,.50) 52%,
    rgba(91,68,126,.48) 70%,
    rgba(98,61,93,.36) 86%,
    rgba(20,25,28,.08) 100%
  ) !important;
  box-shadow:
    0 0 3px rgba(255,255,255,.50),
    0 0 8px rgba(0,73,105,.13),
    0 0 14px rgba(62,49,104,.08) !important;
}

/* =========================================================
   V5 — axe strictement identique au bord haut du cartouche
   On garde la forme de V4, mais la ligne n'est plus portée par
   le bloc dessous : elle est portée par le cartouche lui-même,
   exactement sur le même axe que son bord supérieur.
   ========================================================= */

:root {
  --category-glass-stroke: .5px;
  --category-glass-edge: rgba(196, 231, 255, .56);
}

/* On neutralise la ligne du panneau qui paraissait visuellement trop basse. */
.category-content::before,
html[data-theme="light"] .category-content::before {
  content: none !important;
  display: none !important;
}

/* On garde la même forme de panneau qu'avant. */
.category-content {
  position: relative !important;
  overflow: hidden !important;
  border-radius: var(--section-curve) var(--section-curve) 0 0 !important;
  padding-top: calc(var(--category-meta-height) + .9rem) !important;
}

/* Cartouche fin, même épaisseur que la ligne. */
.category-heading-meta,
.category-heading--reverse .category-heading-meta,
.category-heading-meta--ticket,
.ticket-section .category-heading-meta--ticket {
  --meta-stroke: var(--category-glass-stroke);
  --meta-edge: var(--category-glass-edge);
  position: relative !important;
  z-index: 6 !important;
  overflow: visible !important;
  isolation: isolate !important;
  border: var(--meta-stroke) solid var(--meta-edge) !important;
  border-radius: .16rem .16rem .82rem .82rem !important;
  box-shadow:
    0 0 7px rgba(126,213,255,.12),
    0 0 16px rgba(132,111,255,.09),
    0 8px 22px rgba(0,0,0,.16) !important;
}

/* La ligne part du cartouche, sur le même axe que son bord haut, vers les 2 côtés. */
.category-heading-meta::before,
.category-heading-meta::after,
.category-heading-meta--ticket::before,
.category-heading-meta--ticket::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  top: calc(-1 * var(--meta-stroke)) !important;
  height: var(--meta-stroke) !important;
  pointer-events: none !important;
  z-index: -1 !important;
  border: 0 !important;
  background: linear-gradient(
    90deg,
    rgba(255,255,255,.10) 0%,
    rgba(125,224,255,.62) 16%,
    rgba(247,252,255,.94) 31%,
    rgba(129,169,255,.74) 49%,
    rgba(183,123,255,.74) 68%,
    rgba(255,170,228,.56) 84%,
    rgba(255,255,255,.10) 100%
  ) !important;
  box-shadow:
    0 0 2px rgba(255,255,255,.24),
    0 0 7px rgba(95,213,255,.22),
    0 0 14px rgba(142,111,255,.14),
    0 0 20px rgba(202,107,255,.08) !important;
}

.category-heading-meta::before,
.category-heading-meta--ticket::before {
  right: calc(100% + var(--meta-stroke)) !important;
  width: 120vw !important;
}

.category-heading-meta::after,
.category-heading-meta--ticket::after {
  left: calc(100% + var(--meta-stroke)) !important;
  width: 120vw !important;
}

/* Variante claire. */
html[data-theme="light"] .category-heading-meta,
html[data-theme="light"] .category-heading--reverse .category-heading-meta,
html[data-theme="light"] .category-heading-meta--ticket,
html[data-theme="light"] .ticket-section .category-heading-meta--ticket {
  --meta-edge: rgba(92, 125, 151, .42);
  border: var(--meta-stroke) solid var(--meta-edge) !important;
  box-shadow:
    0 0 6px rgba(255,255,255,.18),
    0 0 14px rgba(83,96,127,.07),
    0 7px 18px rgba(0,0,0,.06) !important;
}

html[data-theme="light"] .category-heading-meta::before,
html[data-theme="light"] .category-heading-meta::after,
html[data-theme="light"] .category-heading-meta--ticket::before,
html[data-theme="light"] .category-heading-meta--ticket::after {
  background: linear-gradient(
    90deg,
    rgba(20,25,28,.08) 0%,
    rgba(28,102,132,.44) 18%,
    rgba(20,28,32,.62) 34%,
    rgba(70,82,128,.50) 52%,
    rgba(91,68,126,.48) 70%,
    rgba(98,61,93,.36) 86%,
    rgba(20,25,28,.08) 100%
  ) !important;
  box-shadow:
    0 0 3px rgba(255,255,255,.50),
    0 0 8px rgba(0,73,105,.13),
    0 0 14px rgba(62,49,104,.08) !important;
}

/* =========================================================
   V6 — la ligne file bien sur toute la largeur de la page
   tout en restant sur le même axe que le bord haut du cartouche.
   ========================================================= */

/* On remplace la logique gauche/droite par une seule ligne continue
   derrière le cartouche, sur toute la largeur. */
.category-heading-meta::before,
.category-heading-meta--ticket::before,
html[data-theme="light"] .category-heading-meta::before,
html[data-theme="light"] .category-heading-meta--ticket::before {
  content: none !important;
  display: none !important;
}

.category-heading-meta::after,
.category-heading-meta--ticket::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  top: calc(-1 * var(--meta-stroke)) !important;
  left: -100vw !important;
  width: 220vw !important;
  height: var(--meta-stroke) !important;
  pointer-events: none !important;
  z-index: -1 !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: linear-gradient(
    90deg,
    rgba(255,255,255,.10) 0%,
    rgba(125,224,255,.62) 16%,
    rgba(247,252,255,.94) 31%,
    rgba(129,169,255,.74) 49%,
    rgba(183,123,255,.74) 68%,
    rgba(255,170,228,.56) 84%,
    rgba(255,255,255,.10) 100%
  ) !important;
  box-shadow:
    0 0 2px rgba(255,255,255,.24),
    0 0 7px rgba(95,213,255,.22),
    0 0 14px rgba(142,111,255,.14),
    0 0 20px rgba(202,107,255,.08) !important;
}

html[data-theme="light"] .category-heading-meta::after,
html[data-theme="light"] .category-heading-meta--ticket::after {
  background: linear-gradient(
    90deg,
    rgba(20,25,28,.08) 0%,
    rgba(28,102,132,.44) 18%,
    rgba(20,28,32,.62) 34%,
    rgba(70,82,128,.50) 52%,
    rgba(91,68,126,.48) 70%,
    rgba(98,61,93,.36) 86%,
    rgba(20,25,28,.08) 100%
  ) !important;
  box-shadow:
    0 0 3px rgba(255,255,255,.50),
    0 0 8px rgba(0,73,105,.13),
    0 0 14px rgba(62,49,104,.08) !important;
}

/* =========================================================
   V7 — contour du cartouche affiné + extrémités arrondies
   - ligne et contour utilisent STRICTEMENT la même épaisseur
   - ligne pleine largeur
   - petits retours arrondis aux deux extrémités
   ========================================================= */

:root {
  --category-glass-stroke: .4px;
  --category-glass-edge: rgba(196, 231, 255, .54);
  --category-line-end-depth: 10px;
  --category-line-end-radius: 14px;
}

/* Le cartouche garde sa forme mais avec un contour plus fin.
   Aucun second liseré ne vient épaissir visuellement la bordure. */
.category-heading-meta,
.category-heading--reverse .category-heading-meta,
.category-heading-meta--ticket,
.ticket-section .category-heading-meta--ticket {
  --meta-stroke: var(--category-glass-stroke);
  --meta-edge: var(--category-glass-edge);
  border: var(--meta-stroke) solid var(--meta-edge) !important;
  border-radius: .16rem .16rem .82rem .82rem !important;
  box-shadow:
    0 0 5px rgba(126,213,255,.08),
    0 0 12px rgba(132,111,255,.07),
    0 7px 20px rgba(0,0,0,.15) !important;
}

/* On neutralise l'ancien trait plein avant de le redessiner proprement. */
.category-heading-meta::before,
.category-heading-meta--ticket::before,
html[data-theme="light"] .category-heading-meta::before,
html[data-theme="light"] .category-heading-meta--ticket::before {
  content: none !important;
  display: none !important;
}

/* Une seule forme : ligne sur 100vw + petits retours arrondis aux extrémités.
   Son bord haut est exactement sur le même axe que le bord haut du cartouche. */
.category-heading-meta::after,
.category-heading-meta--ticket::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  top: calc(-1 * var(--meta-stroke)) !important;
  left: calc(-1 * var(--category-inset)) !important;
  width: 100vw !important;
  height: var(--category-line-end-depth) !important;
  pointer-events: none !important;
  z-index: -1 !important;
  box-sizing: border-box !important;
  background: transparent !important;
  border-top: var(--meta-stroke) solid var(--meta-edge) !important;
  border-left: var(--meta-stroke) solid var(--meta-edge) !important;
  border-right: var(--meta-stroke) solid var(--meta-edge) !important;
  border-bottom: 0 !important;
  border-radius: var(--category-line-end-radius) var(--category-line-end-radius) 0 0 !important;
  box-shadow:
    0 0 4px rgba(126,213,255,.07),
    0 0 10px rgba(132,111,255,.055) !important;
}

/* Mode jour : même géométrie et même épaisseur. */
html[data-theme="light"] .category-heading-meta,
html[data-theme="light"] .category-heading--reverse .category-heading-meta,
html[data-theme="light"] .category-heading-meta--ticket,
html[data-theme="light"] .ticket-section .category-heading-meta--ticket {
  --meta-edge: rgba(92,125,151,.38);
  border: var(--meta-stroke) solid var(--meta-edge) !important;
  box-shadow:
    0 0 5px rgba(255,255,255,.13),
    0 0 11px rgba(83,96,127,.055),
    0 6px 18px rgba(0,0,0,.055) !important;
}

html[data-theme="light"] .category-heading-meta::after,
html[data-theme="light"] .category-heading-meta--ticket::after {
  background: transparent !important;
  border-top: var(--meta-stroke) solid var(--meta-edge) !important;
  border-left: var(--meta-stroke) solid var(--meta-edge) !important;
  border-right: var(--meta-stroke) solid var(--meta-edge) !important;
  border-bottom: 0 !important;
  box-shadow:
    0 0 4px rgba(255,255,255,.12),
    0 0 9px rgba(83,96,127,.05) !important;
}

@media (max-width: 680px) {
  .category-heading-meta::after,
  .category-heading-meta--ticket::after {
    left: -1rem !important;
    width: 100vw !important;
    height: 8px !important;
    border-radius: 11px 11px 0 0 !important;
  }
}

/* =========================================================
   V8 — micro-ajustements finaux
   - trait sous le 2e marquee légèrement épaissi
   - arrondis latéraux plus amples
   - courbe qui démarre plus loin des extrémités, donc plus près du centre
   ========================================================= */

:root {
  /* Le contour du cartouche reste fin comme en V7. */
  --category-glass-stroke: .4px;

  /* La ligne sous le second titre gagne juste un peu de présence. */
  --category-bottom-line-stroke: .65px;

  /* Arrondi nettement plus ample qu'en V7 (10/14px). */
  --category-line-end-depth: 30px;
  --category-line-end-radius: 30px;
}

/* La ligne garde exactement le même axe horizontal qu'avant,
   mais possède sa propre épaisseur et des courbes plus longues. */
.category-heading-meta::after,
.category-heading-meta--ticket::after {
  top: calc(-1 * var(--meta-stroke)) !important;
  height: var(--category-line-end-depth) !important;
  border-top-width: var(--category-bottom-line-stroke) !important;
  border-left-width: var(--category-bottom-line-stroke) !important;
  border-right-width: var(--category-bottom-line-stroke) !important;
  border-style: solid !important;
  border-color: var(--meta-edge) !important;
  border-bottom: 0 !important;
  border-radius: var(--category-line-end-radius) var(--category-line-end-radius) 0 0 !important;
  box-shadow:
    0 0 4px rgba(126,213,255,.085),
    0 0 11px rgba(132,111,255,.065) !important;
}

html[data-theme="light"] .category-heading-meta::after,
html[data-theme="light"] .category-heading-meta--ticket::after {
  border-top-width: var(--category-bottom-line-stroke) !important;
  border-left-width: var(--category-bottom-line-stroke) !important;
  border-right-width: var(--category-bottom-line-stroke) !important;
  border-style: solid !important;
  border-color: var(--meta-edge) !important;
  border-bottom: 0 !important;
  box-shadow:
    0 0 4px rgba(255,255,255,.14),
    0 0 10px rgba(83,96,127,.055) !important;
}

@media (max-width: 680px) {
  .category-heading-meta::after,
  .category-heading-meta--ticket::after {
    height: 20px !important;
    border-radius: 20px 20px 0 0 !important;
  }
}

/* =========================================================
   V9 — MODE JOUR : ligne noire fine + titres 01/02/03... noirs
   Le mode nuit reste strictement inchangé.
   ========================================================= */

html[data-theme="light"] .category-heading-meta,
html[data-theme="light"] .category-heading--reverse .category-heading-meta,
html[data-theme="light"] .category-heading-meta--ticket,
html[data-theme="light"] .ticket-section .category-heading-meta--ticket {
  --meta-edge: rgba(24, 24, 22, .62) !important;
  border-color: rgba(24, 24, 22, .45) !important;
}

/* Le trait sous le second titre déroulant devient noir et fin en mode jour. */
html[data-theme="light"] .category-heading-meta::after,
html[data-theme="light"] .category-heading-meta--ticket::after {
  border-top-width: .5px !important;
  border-left-width: .5px !important;
  border-right-width: .5px !important;
  border-color: rgba(24, 24, 22, .62) !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
}

/* Titres 01 / 02 / 03 / ... en noir en mode jour. */
html[data-theme="light"] .category-heading-meta p,
html[data-theme="light"] .category-heading-meta--ticket p {
  color: #181816 !important;
}

/* =========================================================
   V10 — MODE JOUR : trait noir / argenté bien visible
   Même géométrie que le mode nuit, mais en noir / silver.
   ========================================================= */

html[data-theme="light"] .category-heading-meta,
html[data-theme="light"] .category-heading--reverse .category-heading-meta,
html[data-theme="light"] .category-heading-meta--ticket,
html[data-theme="light"] .ticket-section .category-heading-meta--ticket {
  --meta-edge: rgba(28, 28, 26, .72) !important;
  border-color: rgba(28, 28, 26, .50) !important;
}

/* Le trait jour reprend bien la forme du trait nuit,
   avec une lecture noire / argentée plus visible. */
html[data-theme="light"] .category-heading-meta::after,
html[data-theme="light"] .category-heading-meta--ticket::after {
  background: linear-gradient(
    90deg,
    rgba(24,24,22,.06) 0%,
    rgba(98,98,94,.22) 14%,
    rgba(170,170,166,.42) 30%,
    rgba(34,34,32,.68) 50%,
    rgba(166,166,162,.40) 70%,
    rgba(92,92,88,.22) 86%,
    rgba(24,24,22,.06) 100%
  ) !important;
  border-top-width: .5px !important;
  border-left-width: .5px !important;
  border-right-width: .5px !important;
  border-style: solid !important;
  border-color: rgba(28, 28, 26, .72) !important;
  border-bottom: 0 !important;
  box-shadow:
    0 0 0 .35px rgba(255,255,255,.18),
    0 0 4px rgba(145,145,140,.10) !important;
}

/* Les titres 01 / 02 / 03 restent bien noirs. */
html[data-theme="light"] .category-heading-meta p,
html[data-theme="light"] .category-heading-meta--ticket p {
  color: #181816 !important;
}

/* =========================================================
   V11 — FIX RÉEL DU TRAIT EN MODE JOUR
   Le pseudo-élément était derrière le fond du cartouche (z-index négatif),
   donc invisible en thème clair. On le remet au-dessus, sans toucher
   à la géométrie validée du mode nuit.
   ========================================================= */

html[data-theme="light"] .category-heading-meta,
html[data-theme="light"] .category-heading--reverse .category-heading-meta,
html[data-theme="light"] .category-heading-meta--ticket,
html[data-theme="light"] .ticket-section .category-heading-meta--ticket {
  --meta-edge: rgba(30, 30, 28, .68) !important;
}

html[data-theme="light"] .category-heading-meta::after,
html[data-theme="light"] .category-heading-meta--ticket::after {
  content: "" !important;
  display: block !important;
  z-index: 0 !important;
  background: transparent !important;
  border-top: .6px solid rgba(28, 28, 26, .72) !important;
  border-left: .6px solid rgba(92, 92, 88, .52) !important;
  border-right: .6px solid rgba(92, 92, 88, .52) !important;
  border-bottom: 0 !important;
  box-shadow:
    0 -0.35px 0 rgba(255,255,255,.42),
    0 0 3px rgba(120,120,116,.12) !important;
}

/* Le texte reste au-dessus du trait qui passe pile sur le bord haut. */
html[data-theme="light"] .category-heading-meta p,
html[data-theme="light"] .category-heading-meta--ticket p {
  position: relative !important;
  z-index: 2 !important;
  color: #181816 !important;
}

/* =========================================================
   V12 — MICRO-CORRECTION MODE JOUR
   Supprime uniquement le voile gris sous le trait :
   la forme, l'épaisseur, les arrondis et la position restent inchangés.
   ========================================================= */
html[data-theme="light"] .category-heading-meta::after,
html[data-theme="light"] .category-heading-meta--ticket::after {
  background: transparent !important;
  box-shadow: none !important;
  mix-blend-mode: normal !important;
  filter: none !important;
  opacity: 1 !important;
}

/* =========================================================
   CORRECTION FINALE — 15/08/2026
   - Cartouches 01 / 02 / 03 / 04 / 05 : aucun halo extérieur.
   - Suppression du pseudo-reflet flouté qui débordait du cartouche.
   - Ligne au-dessus du cartouche = même traitement que la séparation
     entre les deux titres déroulants.
   - Texte de présentation = Mona Sans Expanded Bold (700 / 125%).
   ========================================================= */

/* Mona Sans Expanded Bold : poids 700 + largeur 125%. */
.intro-copy,
.intro-copy p,
.intro-copy strong,
.intro-copy .text-highlight {
  font-family: "Mona Sans", Arial, Helvetica, sans-serif !important;
  font-weight: 700 !important;
  font-style: normal !important;
  font-stretch: 125% !important;
  font-synthesis: none !important;
  font-optical-sizing: auto !important;
  font-variation-settings: "wght" 700, "wdth" 125 !important;
}

/* Une seule épaisseur de référence pour la séparation, la ligne basse et le contour. */
:root {
  --category-clean-stroke: 1.8px;
  --category-clean-edge: rgba(196, 231, 255, .54);
  --category-clean-line: linear-gradient(
    90deg,
    rgba(255,255,255,.10) 0%,
    rgba(125,224,255,.62) 16%,
    rgba(247,252,255,.94) 31%,
    rgba(129,169,255,.74) 49%,
    rgba(183,123,255,.74) 68%,
    rgba(255,170,228,.56) 84%,
    rgba(255,255,255,.10) 100%
  );
  --category-clean-line-shadow:
    0 0 2px rgba(255,255,255,.28),
    0 0 8px rgba(95,213,255,.25),
    0 0 16px rgba(142,111,255,.17),
    0 0 24px rgba(202,107,255,.09);
}

html[data-theme="light"] {
  --category-clean-edge: rgba(30, 30, 28, .68);
  --category-clean-line: linear-gradient(
    90deg,
    rgba(20,25,28,.08) 0%,
    rgba(28,102,132,.44) 18%,
    rgba(20,28,32,.62) 34%,
    rgba(70,82,128,.50) 52%,
    rgba(91,68,126,.48) 70%,
    rgba(98,61,93,.36) 86%,
    rgba(20,25,28,.08) 100%
  );
  --category-clean-line-shadow:
    0 0 3px rgba(255,255,255,.58),
    0 0 8px rgba(0,73,105,.14),
    0 0 16px rgba(62,49,104,.09);
}

/* Ligne de séparation entre les deux titres déroulants. */
.category-marquee-heading > .category-marquee:first-of-type::after,
html[data-theme="light"] .category-marquee-heading > .category-marquee:first-of-type::after {
  height: var(--category-clean-stroke) !important;
  background: var(--category-clean-line) !important;
  border: 0 !important;
  box-shadow: var(--category-clean-line-shadow) !important;
  filter: none !important;
  opacity: 1 !important;
}

/* Cartouches numérotés : contour seul, aucune ombre/lueur externe. */
.category-heading-meta,
.category-heading--reverse .category-heading-meta,
.category-heading-meta--ticket,
.ticket-section .category-heading-meta--ticket,
html[data-theme="light"] .category-heading-meta,
html[data-theme="light"] .category-heading--reverse .category-heading-meta,
html[data-theme="light"] .category-heading-meta--ticket,
html[data-theme="light"] .ticket-section .category-heading-meta--ticket {
  --meta-stroke: var(--category-clean-stroke) !important;
  --meta-edge: var(--category-clean-edge) !important;
  border: var(--category-clean-stroke) solid var(--category-clean-edge) !important;
  box-shadow: none !important;
  filter: none !important;
}

/* Le vieux reflet flouté était la source du halo autour du cartouche.
   Il est supprimé uniquement ici, sans toucher aux autres éléments glass. */
.category-heading-meta::before,
.category-heading-meta--ticket::before,
html[data-theme="light"] .category-heading-meta::before,
html[data-theme="light"] .category-heading-meta--ticket::before {
  content: none !important;
  display: none !important;
  background: none !important;
  box-shadow: none !important;
  filter: none !important;
}

/* Ligne au-dessus des 01 / 02 / 03... : copie de la ligne de séparation.
   Sa lueur appartient à la ligne seulement, jamais au cartouche. */
.category-heading-meta::after,
.category-heading-meta--ticket::after,
html[data-theme="light"] .category-heading-meta::after,
html[data-theme="light"] .category-heading-meta--ticket::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  top: calc(-1 * var(--category-clean-stroke)) !important;
  left: calc(-1 * var(--category-inset)) !important;
  width: 100vw !important;
  height: var(--category-clean-stroke) !important;
  z-index: -1 !important;
  pointer-events: none !important;
  background: var(--category-clean-line) !important;
  border: 0 !important;
  border-radius: 999px !important;
  box-shadow: var(--category-clean-line-shadow) !important;
  filter: none !important;
  clip-path: none !important;
  opacity: 1 !important;
}

/* =========================================================
   AJUSTEMENT FINAL — 15/08/2026
   GROS BLOCS GLASS (intro + tickets)
   - contour plus visible et plus premium
   - rendu plus "glass"
   - légère remontée visuelle
   - lueur extérieure plus présente
   ========================================================= */

:root {
  --feature-panel-stroke: 1.35px;
  --feature-panel-lift: -.85rem;
}

.intro,
.ticket-booking {
  transform: translateY(var(--feature-panel-lift)) !important;
  border: var(--feature-panel-stroke) solid rgba(236, 246, 255, .32) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.90),
    inset 0 -1px 0 rgba(88,214,255,.28),
    inset 1px 0 0 rgba(255,255,255,.18),
    inset -1px 0 0 rgba(205,126,255,.20),
    0 0 0 1px rgba(242,248,255,.10),
    0 0 18px rgba(255,255,255,.08),
    0 0 44px rgba(72,202,255,.18),
    0 0 86px rgba(166,95,255,.15),
    0 28px 90px rgba(0,0,0,.22) !important;
}

.intro::before,
.ticket-booking::before {
  inset: -18% !important;
  opacity: 1 !important;
  filter: blur(28px) saturate(110%) !important;
}

.intro::after,
.ticket-booking::after {
  opacity: .86 !important;
}

html[data-theme="light"] .intro,
html[data-theme="light"] .ticket-booking {
  transform: translateY(var(--feature-panel-lift)) !important;
  border: var(--feature-panel-stroke) solid rgba(42, 56, 66, .18) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,1),
    inset 0 -1px 0 rgba(92,136,162,.16),
    inset 1px 0 0 rgba(255,255,255,.84),
    inset -1px 0 0 rgba(74,84,98,.10),
    0 0 0 1px rgba(255,255,255,.80),
    0 0 14px rgba(255,255,255,.66),
    0 0 36px rgba(68,84,98,.12),
    0 0 68px rgba(124,142,158,.10),
    0 24px 72px rgba(18,25,30,.10) !important;
}

html[data-theme="light"] .intro::before,
html[data-theme="light"] .ticket-booking::before {
  opacity: .98 !important;
  filter: blur(29px) grayscale(.12) !important;
}

html[data-theme="light"] .intro::after,
html[data-theme="light"] .ticket-booking::after {
  opacity: .70 !important;
}

@media (max-width: 900px) {
  :root {
    --feature-panel-lift: -.55rem;
  }

  .intro,
  .ticket-booking,
  html[data-theme="light"] .intro,
  html[data-theme="light"] .ticket-booking {
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.86),
      inset 0 -1px 0 rgba(88,214,255,.22),
      0 0 0 1px rgba(236,246,255,.10),
      0 0 28px rgba(72,202,255,.14),
      0 0 56px rgba(166,95,255,.11),
      0 18px 48px rgba(0,0,0,.18) !important;
  }

  html[data-theme="light"] .intro,
  html[data-theme="light"] .ticket-booking {
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.96),
      inset 0 -1px 0 rgba(92,136,162,.14),
      0 0 0 1px rgba(255,255,255,.76),
      0 0 26px rgba(68,84,98,.10),
      0 18px 48px rgba(18,25,30,.08) !important;
  }
}