:root {
  --ink: #282724;
  --ink-2: #181816;
  --paper: #f2efe6;
  --paper-2: #e8e3d7;
  --acid: #82ca81;
  --line: rgba(40, 39, 36, .25);
  --display: "Bricolage Grotesque", Arial, Helvetica, sans-serif;
  --pad: clamp(1rem, 3vw, 3.2rem);
  --radius: .595rem;
  --display-tracking: -.075em;
  --display-leading: .86;
  --display-word-spacing: .035em;
}

* { 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;
  }
}