/* ==========================================================================
   LE KENNEDY — feuille de style
   Vert PMU, orange pari, crème de comptoir.
   ========================================================================== */

:root {
  --green-950: #04241a;
  --green-900: #062d21;
  --green-800: #0a3d2c;
  --green-700: #0e5a40;
  --green-600: #0e7a56;
  --green-500: #13986b;
  --cream: #f7f2e3;
  --cream-2: #efe6d2;
  --orange: #ff7a1a;
  --orange-2: #ff9a3d;
  --gold: #f6c445;
  --ink: #08251b;
  --display: 'Anton', 'Arial Narrow', Impact, sans-serif;
  --sans: 'Archivo', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --radius: 20px;
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  background: #041d15;
  color-scheme: dark;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background:
    radial-gradient(80% 50% at 50% 0%, rgba(19, 152, 107, .18), transparent 70%),
    linear-gradient(180deg, #052a1f, #041d15 55%, #031711);
  color: var(--cream);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  min-height: 100dvh;
  overscroll-behavior-y: none;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: .05;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/></filter><rect width='140' height='140' filter='url(%23n)'/></svg>");
}

img, svg { max-width: 100%; }

button, input { font: inherit; }

.skip {
  position: absolute;
  left: -999px;
  top: 8px;
  z-index: 999;
  background: var(--cream);
  color: var(--ink);
  padding: 10px 14px;
  border-radius: 10px;
  font-weight: 700;
}
.skip:focus { left: 8px; }

/* ---------------------------------------------------------------- topbar */

.topbar {
  position: sticky;
  top: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  gap: clamp(10px, 2vw, 22px);
  padding: calc(11px + env(safe-area-inset-top)) clamp(14px, 3vw, 30px) 11px;
  background: rgba(4, 30, 23, .82);
  backdrop-filter: blur(16px) saturate(1.2);
  border-bottom: 1px solid rgba(247, 242, 227, .09);
}

.brand-wrap {
  position: relative;
  display: flex;
  align-items: center;
  flex: 0 0 auto;
}

.brand {
  display: flex;
  align-items: center;
  gap: 11px;
  text-decoration: none;
  color: inherit;
  flex: 0 0 auto;
}

.brand__badge {
  position: relative;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 13px;
  background: linear-gradient(160deg, #13986b, #0b6247 70%);
  color: #fdf8ea;
  font-family: var(--display);
  font-size: 21px;
  letter-spacing: .01em;
  transform: rotate(-2deg);
  box-shadow: 0 8px 20px -8px rgba(19, 152, 107, .9), inset 0 1px 0 rgba(255, 255, 255, .3), inset 0 0 0 1px rgba(247, 242, 227, .22);
}

.brand__badge--small { width: 30px; height: 30px; font-size: 13px; border-radius: 9px; }

.brand__count {
  position: absolute;
  top: -3px;
  left: 40px;
  width: 11px;
  height: 11px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #e63946;
  font-size: 0;
  line-height: 0;
  box-shadow: 0 0 0 2px #04241a, 0 2px 6px rgba(0, 0, 0, .45);
  cursor: pointer;
}
.brand__count.is-pop { animation: countPop .38s ease; }
.brand__count:active { transform: scale(.92); }
.brand__count[hidden] { display: none; }
@keyframes countPop {
  0% { transform: scale(.4); }
  60% { transform: scale(1.25); }
  100% { transform: scale(1); }
}

.brand__text { display: grid; gap: 2px; }
.brand__text strong {
  font-family: var(--display);
  font-size: 19px;
  font-weight: 400;
  letter-spacing: .02em;
  line-height: 1;
}
.brand__text small {
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(247, 242, 227, .55);
  font-weight: 600;
}

.live {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: 6px;
  padding: 7px 13px;
  border-radius: 999px;
  border: 1px solid rgba(247, 242, 227, .12);
  background: rgba(247, 242, 227, .04);
  font-size: 12px;
  color: rgba(247, 242, 227, .8);
  white-space: nowrap;
}
.live strong { color: var(--cream); font-weight: 800; }
.live__dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: #4ade80;
  box-shadow: 0 0 0 0 rgba(74, 222, 128, .6);
  animation: pulseDot 2.4s infinite;
}
.live__sep { opacity: .3; }
.live__beers { color: rgba(247, 242, 227, .65); }

.userzone { margin-left: auto; display: flex; align-items: center; gap: 8px; }

.me { display: flex; align-items: center; gap: 9px; }

.me__av {
  width: 40px; height: 40px;
  border-radius: 50%;
  overflow: hidden;
  background: rgba(19, 152, 107, .25);
  border: 1.5px solid rgba(247, 242, 227, .25);
  flex: 0 0 auto;
  display: grid; place-items: end center;
}
.me__av svg { width: 130%; height: auto; margin-bottom: -14%; }

.me__txt { display: grid; gap: 1px; line-height: 1.1; }
.me__txt strong { font-size: 13px; font-weight: 800; }
.me__txt small { font-size: 10px; color: rgba(247, 242, 227, .55); letter-spacing: .04em; }
.me__txt small.is-live { color: #7ee2a8; }

.iconbtn {
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border-radius: 10px;
  border: 1px solid rgba(247, 242, 227, .16);
  background: rgba(247, 242, 227, .05);
  color: var(--cream);
  cursor: pointer;
  font-size: 15px;
  transition: .16s;
}
.iconbtn:hover { background: rgba(247, 242, 227, .13); }

/* ---------------------------------------------------------------- boutons */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 16px;
  border: 1px solid transparent;
  border-radius: 11px;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  transition: transform .16s ease, filter .16s ease, background .16s ease, box-shadow .16s;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn:focus-visible { outline: 3px solid rgba(255, 122, 26, .55); outline-offset: 2px; }

.btn--primary {
  background: linear-gradient(180deg, var(--orange-2), var(--orange));
  color: #2a1000;
  box-shadow: 0 10px 24px -10px rgba(255, 122, 26, .9), inset 0 1px 0 rgba(255, 255, 255, .4);
}
.btn--primary:hover { filter: brightness(1.06); }

.btn--ghost {
  background: rgba(247, 242, 227, .07);
  color: var(--cream);
  border-color: rgba(247, 242, 227, .18);
}
.btn--ghost:hover { background: rgba(247, 242, 227, .14); }

.btn--cream { background: var(--cream); color: var(--ink); }

.btn--danger {
  background: rgba(255, 90, 70, .12);
  color: #ffb4a6;
  border-color: rgba(255, 90, 70, .38);
}
.btn--danger:hover { background: rgba(255, 90, 70, .2); }

.btn--big { padding: 15px 24px; font-size: 14px; border-radius: 13px; }
.btn[disabled] { opacity: .55; pointer-events: none; }

.pulse { animation: pulseBtn 2.6s infinite; }
@keyframes pulseBtn {
  0%, 100% { box-shadow: 0 10px 24px -10px rgba(255, 122, 26, .9), 0 0 0 0 rgba(255, 122, 26, .45); }
  50% { box-shadow: 0 10px 28px -10px rgba(255, 122, 26, .9), 0 0 0 7px rgba(255, 122, 26, 0); }
}

/* ---------------------------------------------------------------- ticker */

.ticker {
  position: relative;
  z-index: 5;
  overflow: hidden;
  background: linear-gradient(180deg, #ff8a2b, #ef721a);
  color: #2a1000;
  border-bottom: 1px solid rgba(0, 0, 0, .25);
}
.ticker__track {
  display: flex;
  gap: 46px;
  width: max-content;
  padding: 8px 0;
  white-space: nowrap;
  animation: tickerMove 42s linear infinite;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.ticker__item { display: flex; align-items: center; gap: 10px; }
.ticker__item b {
  background: #2a1000;
  color: #ffd9b0;
  padding: 2px 7px;
  border-radius: 5px;
  font-size: 9.5px;
  letter-spacing: .12em;
}
.ticker__item::after { content: "✦"; opacity: .5; margin-left: 36px; }
@keyframes tickerMove { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---------------------------------------------------------------- wrapper */

.wrap {
  width: min(1280px, 100%);
  margin: 0 auto;
  padding: clamp(14px, 2.4vw, 28px) clamp(12px, 2.6vw, 30px) clamp(16px, 2vw, 26px);
  position: relative;
  z-index: 2;
}

/* ================================================================= SCÈNE */

.scene {
  --av: clamp(118px, 14.4vw, 212px);
  position: relative;
  height: clamp(560px, 76vh, 840px);
  height: clamp(500px, calc(100svh - 285px), 860px);
  border-radius: clamp(18px, 2vw, 30px);
  overflow: hidden;
  isolation: isolate;
  background: #06291e;
  box-shadow:
    0 40px 90px -40px rgba(0, 0, 0, .95),
    inset 0 0 0 1px rgba(247, 242, 227, .13),
    inset 0 -60px 90px -40px rgba(0, 0, 0, .6);
}

/* --- mur ---------------------------------------------------------------- */
.wall {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(110% 62% at 50% -12%, rgba(255, 196, 100, .26), transparent 60%),
    linear-gradient(180deg, #10583f 0%, #0b4531 38%, #062c20 100%);
}
.wall::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(90deg, rgba(0, 0, 0, .16) 0 2px, rgba(255, 255, 255, .025) 2px 108px);
  mask-image: linear-gradient(180deg, #000 20%, transparent 78%);
  opacity: .8;
}
.wall::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 46%;
  background:
    repeating-linear-gradient(90deg, rgba(0, 0, 0, .2) 0 2px, rgba(255, 255, 255, .03) 2px 130px),
    linear-gradient(180deg, #0a4633, #05251a);
  border-top: 3px solid rgba(247, 242, 227, .13);
  box-shadow: 0 -10px 26px rgba(0, 0, 0, .35) inset;
  opacity: .55;
}

.lamp {
  position: absolute;
  left: 50%;
  top: -10%;
  width: 78%;
  height: 78%;
  transform: translateX(-50%);
  background: radial-gradient(closest-side, rgba(255, 210, 140, .22), transparent 72%);
  pointer-events: none;
}

/* --- néon --------------------------------------------------------------- */
.neon {
  position: absolute;
  left: clamp(18px, 4.4%, 60px);
  top: 5.5%;
  display: grid;
  gap: 7px;
  transform: rotate(-1.6deg);
  z-index: 2;
}
.neon__word {
  font-family: var(--display);
  font-size: clamp(52px, 6.6vw, 96px);
  line-height: .82;
  letter-spacing: .015em;
  color: #fdf8ea;
  text-shadow:
    0 0 4px #fff,
    0 0 16px rgba(255, 224, 160, .9),
    0 0 46px rgba(255, 150, 40, .7),
    0 0 90px rgba(255, 90, 0, .45);
  animation: flicker 11s infinite;
}
.neon__sub {
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: .3em;
  color: #ffd9a3;
  text-shadow: 0 0 12px rgba(255, 150, 50, .9);
  padding-left: 3px;
}
@keyframes flicker {
  0%, 18%, 22%, 25%, 53%, 57%, 100% { opacity: 1; }
  20%, 24%, 55% { opacity: .84; }
}

/* --- horloge ------------------------------------------------------------ */
.clock {
  position: absolute;
  left: 50%;
  top: 6%;
  transform: translateX(-50%);
  width: clamp(64px, 7vw, 92px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: #f2ead8;
  padding: 6px;
  box-shadow:
    0 12px 24px rgba(0, 0, 0, .45),
    inset 0 0 0 2px #0a3d2c,
    0 0 0 3px rgba(247, 242, 227, .16);
  z-index: 2;
}
.clock__face {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, #fffdf6 0 62%, #efe6d2 63% 100%);
  box-shadow: inset 0 0 0 1px rgba(10, 61, 44, .2);
}
.clock__face::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    linear-gradient(90deg, transparent 48.6%, rgba(10, 61, 44, .35) 49%, rgba(10, 61, 44, .35) 51%, transparent 51.4%),
    linear-gradient(0deg, transparent 48.6%, rgba(10, 61, 44, .35) 49%, rgba(10, 61, 44, .35) 51%, transparent 51.4%);
  opacity: .5;
}
.clock__hand {
  position: absolute;
  left: 50%;
  bottom: 50%;
  transform-origin: 50% 100%;
  background: #0a3d2c;
  border-radius: 3px;
}
.clock__hand--h { width: 4px; height: 26%; transform: translateX(-50%) rotate(312deg); }
.clock__hand--m { width: 3px; height: 36%; transform: translateX(-50%) rotate(282deg); background: #0e5a40; }
.clock__pin {
  position: absolute;
  left: 50%; top: 50%;
  width: 7px; height: 7px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: var(--orange);
}

/* --- télé --------------------------------------------------------------- */
.tv {
  position: absolute;
  right: clamp(14px, 3.4%, 48px);
  top: 2.1%;
  width: clamp(168px, 17vw, 244px);
  z-index: 2;
  filter: drop-shadow(0 18px 22px rgba(0, 0, 0, .5));
}
.tv__screen {
  position: relative;
  aspect-ratio: 16 / 10;
  border-radius: 12px;
  overflow: hidden;
  border: 7px solid #15211d;
  background:
    linear-gradient(180deg, #8fd0a6 0 34%, #4f9a6c 34% 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12), inset 0 0 30px rgba(0, 30, 15, .45);
}
.tv__screen::after {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(0deg, rgba(0, 0, 0, .13) 0 1px, transparent 1px 3px);
  opacity: .55;
  pointer-events: none;
}
.tv__turf {
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .07) 0 2px, transparent 2px 18px);
}
.tv__rail {
  position: absolute;
  left: 0; right: 0;
  top: 30%;
  height: 5px;
  background: repeating-linear-gradient(90deg, #f7f2e3 0 5px, #d9cdb4 5px 10px);
  opacity: .8;
}
.tv__horses i {
  position: absolute;
  left: 8%;
  top: var(--y);
  width: 12px;
  height: 6px;
  border-radius: 3px;
  background: var(--cream);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .2);
  animation: race 3.4s linear infinite;
  animation-delay: var(--d);
}
.tv__horses i:nth-child(2n) { background: #ffd166; }
.tv__horses i:nth-child(3n) { background: #ff7a1a; }
.tv__horses i:nth-child(4n) { background: #67e8f9; }
@keyframes race {
  from { transform: translateX(0) scaleX(1); }
  50% { transform: translateX(180px) scaleX(1.1); }
  to { transform: translateX(360px) scaleX(1); }
}
.tv__osd {
  position: absolute;
  left: 7px; bottom: 6px;
  display: flex; align-items: center; gap: 5px;
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(4, 20, 14, .72);
  color: #d6ffe7;
  font-size: 7.5px;
  font-weight: 700;
  letter-spacing: .08em;
}
.tv__rec {
  width: 5px; height: 5px; border-radius: 50%;
  background: #ff4d4d;
  animation: pulseDot 1.4s infinite;
}
.tv__foot {
  width: 38%;
  height: 7px;
  margin: 0 auto;
  border-radius: 0 0 6px 6px;
  background: #0d1714;
}

/* --- ardoise ------------------------------------------------------------ */
.menu {
  position: absolute;
  right: clamp(6px, 2.2%, 30px);
  top: 31.5%;
  width: clamp(96px, 10vw, 142px);
  display: grid;
  gap: 3px;
  padding: 9px 10px 11px;
  background: linear-gradient(170deg, #16211d, #0b1411);
  border: 5px solid #6d4225;
  border-radius: 3px;
  transform: rotate(2deg);
  box-shadow: 0 12px 22px rgba(0, 0, 0, .45), inset 0 0 0 1px rgba(247, 242, 227, .09);
  z-index: 1;
  font-size: clamp(6.5px, .62vw, 9px);
  color: #e9e2cd;
}
.menu__title {
  font-size: .82em;
  letter-spacing: .14em;
  color: #ffc46b;
  border-bottom: 1px dashed rgba(247, 242, 227, .25);
  padding-bottom: 3px;
  margin-bottom: 2px;
}
.menu span { display: flex; justify-content: space-between; gap: 6px; }
.menu b { font-weight: 600; opacity: .9; }
.menu i { font-style: normal; color: #a7e8c4; }

/* --- table -------------------------------------------------------------- */
.table {
  position: absolute;
  left: -4%;
  right: -4%;
  bottom: -12%;
  height: 56%;
  z-index: 1;
  pointer-events: none;
}
.table__surface {
  position: absolute;
  inset: 0;
  border-radius: 50% 50% 0 0 / 20% 20% 0 0;
  background:
    repeating-linear-gradient(90deg, rgba(0, 0, 0, .11) 0 3px, rgba(255, 255, 255, .02) 3px 54px),
    radial-gradient(90% 120% at 50% 0%, #96643c 0%, #7c4c2b 32%, #5f371d 70%, #4a2a15 100%);
  box-shadow:
    inset 0 16px 34px rgba(0, 0, 0, .5),
    inset 0 -20px 60px rgba(0, 0, 0, .4),
    0 -14px 34px rgba(0, 0, 0, .38);
}
.table__surface::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    radial-gradient(70% 60% at 50% 8%, rgba(255, 214, 160, .22), transparent 62%),
    repeating-linear-gradient(90deg, rgba(0, 0, 0, .1) 0 3px, rgba(255, 255, 255, .022) 3px 54px);
  pointer-events: none;
}
.table__edge {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 7%;
  background: linear-gradient(180deg, #3a2010, #1c0f07);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  opacity: .9;
}

.table__props { position: absolute; inset: 0; }

.prop { position: absolute; }

.prop--trivet {
  left: 73%;
  bottom: 34%;
  width: 120px;
  height: 46px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(0, 0, 0, .28), transparent 70%);
  transform: rotate(-4deg);
}

.mug { position: relative; display: block; width: 54px; height: 78px; }
.mug__glass {
  position: absolute;
  inset: 12px 4px 0 4px;
  border-radius: 4px 4px 8px 8px;
  background: linear-gradient(180deg, rgba(255, 233, 175, .95) 0 22%, #f2b23c 24%, #d98c1e 100%);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .5), inset 4px 0 6px rgba(255, 255, 255, .35), 0 8px 14px rgba(0, 0, 0, .35);
  overflow: hidden;
}
.mug__glass::after {
  content: "";
  position: absolute;
  left: 8px; bottom: 6px;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .55);
  box-shadow: 0 -14px 0 -1px rgba(255, 255, 255, .45), 12px -24px 0 -1px rgba(255, 255, 255, .4);
}
.mug__foam {
  position: absolute;
  left: 1px; right: 1px; top: 4px;
  height: 22px;
  border-radius: 10px;
  background:
    radial-gradient(circle at 20% 80%, #fffaf0 0 8px, transparent 9px),
    radial-gradient(circle at 48% 66%, #fffaf0 0 10px, transparent 11px),
    radial-gradient(circle at 78% 80%, #fffaf0 0 8px, transparent 9px),
    #fffaf0;
  box-shadow: 0 3px 8px rgba(0, 0, 0, .18);
}
.mug__handle {
  position: absolute;
  right: -11px; top: 26px;
  width: 18px; height: 30px;
  border: 5px solid rgba(255, 255, 255, .55);
  border-left: 0;
  border-radius: 0 12px 12px 0;
}
.mug--qrt { transform: scale(.72) rotate(6deg); }
.prop--mug-a { left: 24%; bottom: 22%; transform: rotate(-5deg); }
.prop--mug-b { left: 81%; bottom: 28%; }

.prop--nuts { left: 64%; bottom: 25%; width: 74px; height: 40px; }
.nuts__bowl {
  position: absolute; inset: auto 0 0 0;
  height: 30px;
  border-radius: 50% 50% 46% 46% / 60% 60% 40% 40%;
  background: linear-gradient(180deg, #f0e4c8, #cbb68e);
  box-shadow: 0 6px 12px rgba(0, 0, 0, .35), inset 0 -6px 10px rgba(0, 0, 0, .18);
}
.nuts__n1, .nuts__n2, .nuts__n3 {
  position: absolute;
  width: 8px; height: 6px;
  border-radius: 50%;
  background: #b98246;
  box-shadow: inset 0 -1px 2px rgba(0, 0, 0, .3);
}
.nuts__n1 { left: 18px; bottom: 32px; transform: rotate(20deg); }
.nuts__n2 { left: 34px; bottom: 34px; transform: rotate(-15deg); }
.nuts__n3 { left: 48px; bottom: 30px; transform: rotate(40deg); }

.prop--paper {
  left: 32%;
  bottom: 18%;
  width: 120px;
  height: 74px;
  padding: 7px 9px;
  background: linear-gradient(160deg, #f5ecd7, #e2d3b1);
  border-radius: 2px;
  transform: rotate(-7deg);
  box-shadow: 0 10px 18px rgba(0, 0, 0, .4);
  color: #0a3d2c;
  display: grid;
  gap: 4px;
  align-content: start;
  font-family: var(--sans);
}
.paper__title {
  font-family: var(--display);
  font-size: 11px;
  letter-spacing: .01em;
  border-bottom: 1px solid rgba(10, 61, 44, .35);
  padding-bottom: 2px;
}
.paper__line { height: 2px; background: rgba(10, 61, 44, .22); border-radius: 2px; }
.paper__line--short { width: 55%; }
.paper__horse {
  position: absolute;
  right: 8px; bottom: 6px;
  font-family: var(--display);
  font-size: 22px;
  color: #c1121f;
  transform: rotate(4deg);
}

.prop--beermat {
  left: 50%;
  bottom: 27%;
  width: 88px;
  height: 88px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 28%, #169a6d, #0a4b36 72%);
  border: 2px solid rgba(247, 242, 227, .6);
  display: grid;
  place-items: center;
  align-content: center;
  gap: 1px;
  text-align: center;
  transform: translateX(-50%) rotate(-6deg);
  box-shadow: 0 8px 18px rgba(0, 0, 0, .4), inset 0 0 0 3px rgba(247, 242, 227, .08);
  opacity: .95;
}
.beermat__small {
  font-family: var(--sans);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: rgba(247, 242, 227, .85);
  line-height: 1;
}
.beermat__big {
  font-family: var(--display);
  font-size: 22px;
  line-height: .9;
  letter-spacing: .02em;
  color: #fdf8ea;
}

/* --- sièges ------------------------------------------------------------- */
.seats {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}

.seat {
  position: absolute;
  width: calc(var(--av) * var(--scale, 1));
  transform: translateX(-50%);
  pointer-events: auto;
  transition: left .55s cubic-bezier(.2, .9, .3, 1), bottom .55s cubic-bezier(.2, .9, .3, 1), width .45s ease;
  animation: seatIn .6s cubic-bezier(.18, 1.3, .4, 1) both;
}
@keyframes seatIn {
  from { opacity: 0; transform: translateX(-50%) translateY(26px) scale(.86); }
  to { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
}
.seat.is-leaving {
  animation: seatOut .45s ease forwards;
  pointer-events: none;
}
@keyframes seatOut {
  to { opacity: 0; transform: translateX(-50%) translateY(18px) scale(.9); }
}

.seat__btn {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  position: relative;
}
.seat__av {
  width: 100%;
  filter: drop-shadow(0 16px 14px rgba(0, 0, 0, .38));
  transition: transform .22s ease, filter .22s ease;
  animation: bob 6s ease-in-out infinite;
}
.seat__av svg { display: block; width: 100%; height: auto; }
.seat:nth-child(2n) .seat__av { animation-delay: -1.4s; }
.seat:nth-child(3n) .seat__av { animation-delay: -2.7s; }
@keyframes bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}
.seat__btn:hover .seat__av,
.seat__btn:focus-visible .seat__av {
  transform: translateY(-6px) scale(1.03);
  filter: drop-shadow(0 22px 18px rgba(0, 0, 0, .45)) drop-shadow(0 0 18px rgba(255, 196, 107, .35));
}
.seat__btn:focus-visible { outline: 3px solid rgba(255, 196, 107, .8); outline-offset: 6px; border-radius: 16px; }

.seat__tag {
  position: absolute;
  left: 50%;
  top: calc(100% - 2px);
  transform: translateX(-50%);
  display: grid;
  justify-items: center;
  gap: 3px;
  padding: 6px 11px 7px;
  max-width: 140px;
  border-radius: 9px;
  background: rgba(4, 32, 24, .86);
  border: 1px solid rgba(247, 242, 227, .18);
  box-shadow: 0 8px 16px rgba(0, 0, 0, .4);
  backdrop-filter: blur(4px);
}
.seat__name {
  font-size: 12px;
  font-weight: 800;
  color: var(--cream);
  line-height: 1;
  max-width: 118px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.seat__bubble {
  position: absolute;
  left: 50%;
  bottom: calc(100% - 2px);
  transform: translateX(-50%) translateY(6px) scale(.94);
  transform-origin: 50% 100%;
  width: max-content;
  max-width: 190px;
  padding: 7px 11px;
  border-radius: 12px;
  background: var(--cream);
  color: #0a3d2c;
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.25;
  text-align: center;
  box-shadow: 0 12px 24px rgba(0, 0, 0, .4);
  opacity: 0;
  pointer-events: none;
  transition: opacity .22s ease, transform .22s ease;
  z-index: 5;
}
.seat__bubble::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 100%;
  transform: translateX(-50%);
  border: 7px solid transparent;
  border-top-color: var(--cream);
}
.seat__bubble b { display: block; font-size: 9px; letter-spacing: .08em; text-transform: uppercase; color: #0e7a56; margin-bottom: 2px; }
.seat.is-talking .seat__bubble { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }

.seat__spark {
  position: absolute;
  left: 50%;
  top: 40%;
  font-size: 20px;
  pointer-events: none;
  animation: sparkUp 1s ease forwards;
}
@keyframes sparkUp {
  from { opacity: 1; transform: translate(-50%, 0) scale(.7); }
  to { opacity: 0; transform: translate(-50%, -46px) scale(1.25); }
}

.empty {
  position: absolute;
  left: 50%;
  top: 62%;
  transform: translate(-50%, -50%) rotate(-1.2deg);
  z-index: 6;
  display: grid;
  justify-items: center;
  gap: 2px;
  padding: 14px 22px 16px;
  border-radius: 14px;
  border: 1px solid rgba(10, 61, 44, .18);
  background: linear-gradient(165deg, #fffdf5, #efe6d2);
  color: #0a3d2c;
  cursor: pointer;
  box-shadow: 0 18px 36px -16px rgba(0, 0, 0, .75), inset 0 1px 0 #fff;
  transition: transform .18s ease, box-shadow .18s ease;
}
.empty:hover {
  transform: translate(-50%, -50%) rotate(-1.2deg) translateY(-3px);
  box-shadow: 0 24px 44px -16px rgba(0, 0, 0, .8), inset 0 1px 0 #fff;
}
.empty.is-hidden { display: none; }
.empty__icon { font-size: 18px; line-height: 1; }
.empty__title {
  font-family: var(--display);
  font-size: 17px;
  letter-spacing: .01em;
  text-transform: uppercase;
  line-height: 1.1;
}
.empty__sub {
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #0e7a56;
}

.scene__hint {
  position: absolute;
  left: 50%;
  bottom: 9px;
  transform: translateX(-50%);
  z-index: 5;
  margin: 0;
  padding: 6px 13px;
  border-radius: 999px;
  background: rgba(4, 24, 18, .55);
  border: 1px solid rgba(247, 242, 227, .12);
  backdrop-filter: blur(6px);
  color: rgba(247, 242, 227, .62);
  font-size: 10.5px;
  letter-spacing: .04em;
  white-space: nowrap;
  pointer-events: none;
}

/* ---------------------------------------------------------------- pitch */

.pitch {
  max-width: 780px;
  margin: clamp(48px, 7vw, 86px) auto 0;
  text-align: center;
}
.pitch__kicker {
  margin: 0 0 14px;
  color: var(--orange-2);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .24em;
  text-transform: uppercase;
}
.pitch__title {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(46px, 7.4vw, 92px);
  font-weight: 400;
  line-height: .9;
  text-transform: uppercase;
  color: var(--cream);
}
.pitch__title em { font-style: normal; color: var(--orange); }
.pitch__text {
  margin: 22px auto 0;
  max-width: 560px;
  font-size: clamp(14px, 1.3vw, 16.5px);
  line-height: 1.6;
  color: rgba(247, 242, 227, .72);
}
.pitch__cta {
  margin-top: 28px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.pitch__note { font-size: 11px; color: rgba(247, 242, 227, .42); letter-spacing: .03em; }

/* ---------------------------------------------------------------- étapes */

.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: clamp(50px, 7vw, 90px);
}
.step {
  position: relative;
  padding: 24px 22px 26px;
  border-radius: var(--radius);
  background: linear-gradient(170deg, rgba(14, 90, 64, .38), rgba(6, 45, 33, .28));
  border: 1px solid rgba(247, 242, 227, .1);
  overflow: hidden;
}
.step::after {
  content: "";
  position: absolute;
  right: -40px; top: -40px;
  width: 130px; height: 130px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 122, 26, .18), transparent);
}
.step__num {
  display: block;
  font-family: var(--display);
  font-size: 13px;
  letter-spacing: .12em;
  color: var(--orange-2);
  margin-bottom: 12px;
}
.step h3 {
  margin: 0 0 8px;
  font-size: 16.5px;
  font-weight: 800;
  letter-spacing: -.01em;
}
.step p { margin: 0; font-size: 13px; line-height: 1.55; color: rgba(247, 242, 227, .62); }

/* ---------------------------------------------------------------- bandeau */

.band {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 26px;
  margin-top: clamp(46px, 6vw, 76px);
  padding: clamp(26px, 4vw, 46px);
  border-radius: var(--radius);
  background:
    radial-gradient(90% 160% at 100% 0%, rgba(255, 255, 255, .5), transparent 55%),
    linear-gradient(135deg, #ffb066, #ff7a1a 55%, #f26a0c);
  color: #2a1000;
  box-shadow: 0 30px 60px -30px rgba(255, 122, 26, .55);
}
.band h2 {
  margin: 0 0 8px;
  font-family: var(--display);
  font-size: clamp(26px, 3.6vw, 44px);
  font-weight: 400;
  line-height: .95;
  text-transform: uppercase;
}
.band p { margin: 0; font-size: 13.5px; color: rgba(42, 16, 0, .72); max-width: 420px; }
.band .btn { flex: 0 0 auto; }

body.is-member .marketing { display: none; }

/* ---------------------------------------------------------------- chat */

.chat {
  margin-top: clamp(14px, 2vw, 22px);
  padding: clamp(16px, 2.2vw, 24px);
  border-radius: var(--radius);
  background: linear-gradient(170deg, rgba(14, 90, 64, .34), rgba(6, 45, 33, .3));
  border: 1px solid rgba(247, 242, 227, .1);
}
.chat__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.chat__title { display: flex; align-items: center; gap: 10px; }
.chat__title h2 {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(20px, 2.6vw, 30px);
  font-weight: 400;
  text-transform: uppercase;
  line-height: 1;
}
.chat__hint { margin: 0; font-size: 10px; color: rgba(247, 242, 227, .38); }
.chat__list {
  display: grid;
  gap: 7px;
  max-height: 250px;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: 4px;
  scrollbar-width: thin;
  scrollbar-color: rgba(247, 242, 227, .2) transparent;
}
.chat__msg {
  padding: 8px 11px;
  border-radius: 11px;
  background: rgba(4, 24, 18, .42);
  border: 1px solid rgba(247, 242, 227, .07);
}
.chat__meta { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 2px; }
.chat__who { font-size: 11px; font-weight: 800; color: #ffc46b; }
.chat__when { font-size: 9px; color: rgba(247, 242, 227, .32); }
.chat__text { margin: 0; font-size: 13px; line-height: 1.4; color: rgba(247, 242, 227, .88); overflow-wrap: anywhere; }
.chat__empty {
  margin: 4px 0 0;
  padding: 18px 10px;
  text-align: center;
  font-size: 12px;
  color: rgba(247, 242, 227, .4);
  border: 1px dashed rgba(247, 242, 227, .12);
  border-radius: 11px;
}
.chat__form { display: flex; gap: 8px; margin-top: 12px; }
.chat__form input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 11px 14px;
  border-radius: 11px;
  border: 1.5px solid rgba(247, 242, 227, .14);
  background: rgba(4, 24, 18, .55);
  color: var(--cream);
  font: inherit;
  font-size: 13px;
}
.chat__form input::placeholder { color: rgba(247, 242, 227, .32); }
.chat__form input:focus {
  outline: none;
  border-color: var(--orange);
  box-shadow: 0 0 0 3px rgba(255, 122, 26, .15);
}
/* Le chat et les plaques de prénom sont réservés aux membres. */
body:not(.is-member) .chat { display: none; }
body:not(.is-member) .seat__tag { display: none; }

@media (min-width: 901px) {
  .seats--dense .seat__tag {
    opacity: 0;
    transform: translateX(-50%) translateY(5px);
    pointer-events: none;
    transition: opacity .16s ease, transform .16s ease;
  }
  .seats--dense .seat:hover .seat__tag,
  .seats--dense .seat:focus-within .seat__tag {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

/* ---------------------------------------------------------------- footer */

.foot {
  position: relative;
  z-index: 2;
  display: grid;
  justify-items: center;
  gap: 10px;
  padding: clamp(26px, 4vh, 42px) 22px calc(clamp(30px, 4vh, 46px) + env(safe-area-inset-bottom));
  border-top: 1px solid rgba(247, 242, 227, .08);
  text-align: center;
}
.foot__line {
  margin: 0;
  font-size: clamp(16px, 1.7vw, 22px);
  font-weight: 600;
  letter-spacing: -.01em;
  color: rgba(247, 242, 227, .78);
}
.foot__line em { font-style: normal; color: var(--orange-2); }
.foot__legal {
  margin: 0;
  max-width: 640px;
  font-size: 10px;
  line-height: 1.6;
  color: rgba(247, 242, 227, .3);
}

/* ================================================================= MODALE */

.modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: calc(clamp(10px, 2.5vw, 26px) + env(safe-area-inset-top)) clamp(10px, 2.5vw, 26px) calc(clamp(10px, 2.5vw, 26px) + env(safe-area-inset-bottom));
  visibility: hidden;
  opacity: 0;
  transition: opacity .2s ease, visibility .2s;
}
.modal.is-open { visibility: visible; opacity: 1; }
.modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(2, 16, 12, .74);
  backdrop-filter: blur(7px);
}
.modal__card {
  position: relative;
  width: min(920px, 100%);
  max-height: min(92vh, 900px);
  overflow: auto;
  border-radius: 26px;
  background: var(--cream);
  color: var(--ink);
  box-shadow: 0 50px 100px -30px rgba(0, 0, 0, .8), inset 0 0 0 1px rgba(255, 255, 255, .6);
  transform: translateY(10px) scale(.985);
  transition: transform .24s cubic-bezier(.2, 1.2, .4, 1);
  scrollbar-width: thin;
  scrollbar-color: rgba(10, 61, 44, .35) transparent;
}
.modal.is-open .modal__card { transform: translateY(0) scale(1); }
.modal__close {
  position: absolute;
  right: 14px;
  top: 14px;
  z-index: 4;
  width: 36px; height: 36px;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(10, 61, 44, .16);
  background: rgba(10, 61, 44, .06);
  color: #0a3d2c;
  font-size: 14px;
  cursor: pointer;
  transition: .16s;
}
.modal__close:hover { background: rgba(10, 61, 44, .14); }
.modal__body { padding: clamp(22px, 3.4vw, 40px); }

/* --- vue connexion ------------------------------------------------------ */
.auth {
  display: grid;
  grid-template-columns: .82fr 1fr;
  gap: clamp(22px, 3vw, 40px);
  align-items: stretch;
}
.auth__art {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  min-height: 380px;
  padding: 26px 22px;
  background:
    radial-gradient(90% 70% at 50% 0%, rgba(255, 190, 100, .3), transparent 60%),
    linear-gradient(180deg, #0e5a40, #052a1f);
  color: var(--cream);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.auth__neon {
  font-family: var(--display);
  font-size: 62px;
  line-height: .82;
  color: #fdf8ea;
  text-shadow: 0 0 4px #fff, 0 0 18px rgba(255, 214, 150, .9), 0 0 50px rgba(255, 140, 30, .6);
  transform: rotate(-2deg);
}
.auth__sub {
  font-size: 9px;
  letter-spacing: .26em;
  font-weight: 800;
  color: #ffd9a3;
  margin-top: 6px;
}
.auth__quote {
  position: relative;
  z-index: 2;
  margin: 0;
  font-size: 15px;
  line-height: 1.45;
  font-weight: 600;
}
.auth__quote span { color: #ffc46b; }
.auth__peek {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 0;
  margin: 0 -12px -30px;
  position: relative;
  z-index: 1;
}
.auth__peek svg { width: 33%; height: auto; filter: drop-shadow(0 10px 10px rgba(0, 0, 0, .4)); }
.auth__peek svg:nth-child(2) { margin: 0 -6%; z-index: 2; width: 38%; }

.auth__form { display: flex; flex-direction: column; }
.auth h2 {
  margin: 0 0 6px;
  font-family: var(--display);
  font-size: clamp(28px, 3.4vw, 38px);
  font-weight: 400;
  line-height: 1;
  text-transform: uppercase;
  color: #0a3d2c;
}
.auth__lead { margin: 0 0 20px; font-size: 13px; line-height: 1.5; color: rgba(10, 61, 44, .62); }

.tabs {
  display: flex;
  gap: 4px;
  padding: 4px;
  border-radius: 12px;
  background: rgba(10, 61, 44, .07);
  margin-bottom: 18px;
}
.tabs button {
  flex: 1;
  padding: 9px 10px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: rgba(10, 61, 44, .62);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  cursor: pointer;
  transition: .16s;
}
.tabs button.is-active {
  background: #fffdf7;
  color: #0a3d2c;
  box-shadow: 0 3px 10px rgba(10, 61, 44, .14);
}

.field { display: grid; gap: 6px; margin-bottom: 13px; }
.field label { font-size: 10.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: rgba(10, 61, 44, .55); }
.field input {
  width: 100%;
  padding: 12px 14px;
  border-radius: 11px;
  border: 1.5px solid rgba(10, 61, 44, .16);
  background: #fffdf7;
  color: #0a2a1e;
  font-size: 14px;
  font-weight: 600;
  transition: .16s;
}
.field input::placeholder { color: rgba(10, 61, 44, .3); font-weight: 500; }
.field input:focus {
  outline: none;
  border-color: var(--orange);
  box-shadow: 0 0 0 4px rgba(255, 122, 26, .15);
}
.field__hint { font-size: 10.5px; color: rgba(10, 61, 44, .45); }

.form__error {
  display: none;
  margin: 4px 0 10px;
  padding: 9px 12px;
  border-radius: 9px;
  background: rgba(230, 57, 70, .1);
  border: 1px solid rgba(230, 57, 70, .3);
  color: #b4232f;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
}
.form__error.is-on { display: block; }

.auth__foot { margin-top: auto; padding-top: 16px; font-size: 11px; color: rgba(10, 61, 44, .45); line-height: 1.5; }

/* --- éditeur d'avatar --------------------------------------------------- */
.editor__head { margin-bottom: 18px; }
.editor__head h2 {
  margin: 0 0 4px;
  font-family: var(--display);
  font-size: clamp(26px, 3.2vw, 36px);
  font-weight: 400;
  text-transform: uppercase;
  line-height: 1;
  color: #0a3d2c;
}
.editor__head p { margin: 0; font-size: 12.5px; color: rgba(10, 61, 44, .55); }

.editor {
  display: grid;
  grid-template-columns: minmax(200px, 290px) 1fr;
  gap: clamp(18px, 2.6vw, 32px);
  align-items: start;
}

.editor__stage {
  position: sticky;
  top: 0;
  display: grid;
  justify-items: center;
  gap: 10px;
  padding: 16px 14px 14px;
  border-radius: 18px;
  background:
    radial-gradient(90% 70% at 50% 0%, rgba(255, 196, 100, .22), transparent 65%),
    linear-gradient(180deg, #0d533c, #062c20);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1);
}
.editor__preview {
  width: min(236px, 100%);
  filter: drop-shadow(0 18px 16px rgba(0, 0, 0, .4));
}
.editor__preview svg { display: block; width: 100%; height: auto; }
.editor__stage .btn { width: 100%; background: rgba(247, 242, 227, .14); border-color: rgba(247, 242, 227, .28); }
.editor__stage .btn:hover { background: rgba(247, 242, 227, .24); }
.editor__hint { margin: 0; font-size: 10.5px; color: rgba(247, 242, 227, .5); text-align: center; }

.editor__controls {
  display: flex;
  gap: clamp(14px, 2.2vw, 26px);
  align-items: flex-start;
}
.editor__col {
  flex: 1 1 0;
  min-width: 0;
  display: grid;
  gap: 15px;
  align-content: start;
}
.group { display: grid; gap: 7px; }
.group__label {
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: rgba(10, 61, 44, .5);
}
.chips { display: flex; flex-wrap: wrap; gap: 5px; }
.chip {
  padding: 7px 10px;
  border-radius: 8px;
  border: 1.5px solid rgba(10, 61, 44, .14);
  background: #fffdf7;
  color: rgba(10, 61, 44, .72);
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  transition: .14s;
  white-space: nowrap;
}
.chip:hover { border-color: rgba(10, 61, 44, .3); }
.chip.is-active {
  background: #0a3d2c;
  border-color: #0a3d2c;
  color: #f7f2e3;
  box-shadow: 0 4px 10px -4px rgba(10, 61, 44, .6);
}

.swatches { display: flex; flex-wrap: wrap; gap: 7px; }
.swatch {
  position: relative;
  width: 27px; height: 27px;
  padding: 0;
  border-radius: 50%;
  border: 2px solid rgba(10, 61, 44, .14);
  cursor: pointer;
  transition: .14s;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .35);
}
.swatch:hover { transform: scale(1.1); }
.swatch.is-active {
  border-color: #0a3d2c;
  box-shadow: 0 0 0 2px #f7f2e3, 0 0 0 4px #0a3d2c;
}
.swatch.is-active::after {
  content: "✓";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 12px;
  font-weight: 900;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .5);
}

.modal__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid rgba(10, 61, 44, .12);
}
.btn--notif {
  white-space: normal;
  max-width: 280px;
  text-align: left;
  line-height: 1.25;
}
.modal__foot .btn--ghost { background: rgba(10, 61, 44, .06); color: #0a3d2c; border-color: rgba(10, 61, 44, .16); }
.modal__foot .btn--ghost:hover { background: rgba(10, 61, 44, .12); }
.modal__foot .spacer { flex: 1; }


/* --- carnet du patron ---------------------------------------------------- */
.admin__head { margin-bottom: 4px; }
.admin__head h2 {
  margin: 0 0 4px;
  font-family: var(--display);
  font-size: clamp(26px, 3.2vw, 36px);
  font-weight: 400;
  text-transform: uppercase;
  line-height: 1;
  color: #0a3d2c;
}
.admin__head p { margin: 0; font-size: 12.5px; color: rgba(10, 61, 44, .55); }
.admin__list { display: grid; gap: 8px; margin-top: 18px; }
.admin__row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  border-radius: 12px;
  border: 1px solid rgba(10, 61, 44, .12);
  background: #fffdf7;
}
.admin__av {
  width: 40px; height: 40px;
  border-radius: 50%;
  overflow: hidden;
  background: rgba(14, 90, 64, .12);
  display: grid;
  place-items: end center;
  flex: 0 0 auto;
}
.admin__av svg { width: 132%; height: auto; margin-bottom: -15%; }
.admin__txt { display: grid; gap: 2px; min-width: 0; }
.admin__name {
  font-size: 14px;
  font-weight: 800;
  color: #0a3d2c;
  line-height: 1.1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.admin__meta { font-size: 10px; color: rgba(10, 61, 44, .5); }
.admin__meta.is-present { color: #0e7a56; font-weight: 700; }
.admin__del {
  margin-left: auto;
  flex: 0 0 auto;
  height: 32px;
  min-width: 32px;
  padding: 0 9px;
  border-radius: 9px;
  border: 1px solid rgba(230, 57, 70, .28);
  background: rgba(230, 57, 70, .07);
  color: #b4232f;
  font-size: 14px;
  font-weight: 900;
  cursor: pointer;
  transition: .15s;
}
.admin__del:hover { background: rgba(230, 57, 70, .14); }
.admin__del.is-armed { background: #e63946; border-color: #e63946; color: #fff; }
.admin__empty {
  padding: 30px 18px;
  text-align: center;
  border-radius: 14px;
  border: 1px dashed rgba(10, 61, 44, .2);
  color: rgba(10, 61, 44, .55);
  font-size: 13px;
}
.admin__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid rgba(10, 61, 44, .12);
}
.admin__clear {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 13px;
  border-radius: 10px;
  border: 1px solid rgba(230, 57, 70, .3);
  background: rgba(230, 57, 70, .07);
  color: #b4232f;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
  transition: .15s;
}
.admin__clear:hover { background: rgba(230, 57, 70, .14); }
.admin__clear.is-armed { background: #e63946; border-color: #e63946; color: #fff; }
.admin__foot .btn--ghost { background: rgba(10, 61, 44, .06); color: #0a3d2c; border-color: rgba(10, 61, 44, .16); }


/* --- éditeur : aperçu figé, seules les options défilent --- */
.modal__card--editor {
  height: min(92vh, 660px);
  height: min(92dvh, 660px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.modal__card--editor .modal__body {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.modal__card--editor .editor__head { flex: 0 0 auto; }
.modal__card--editor .editor {
  flex: 1 1 auto;
  min-height: 0;
  align-items: stretch;
}
.modal__card--editor .editor__stage {
  position: static;
  height: 100%;
  align-content: center;
}
.modal__card--editor .editor__controls {
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding-right: 4px;
  scrollbar-width: thin;
  scrollbar-color: rgba(10, 61, 44, .35) transparent;
}
.modal__card--editor .modal__foot {
  flex: 0 0 auto;
  margin-top: 14px;
  padding-top: 14px;
}

/* ---------------------------------------------------------------- snackbar */

.snackbar {
  position: fixed;
  left: 50%;
  bottom: calc(22px + env(safe-area-inset-bottom));
  z-index: 200;
  transform: translate(-50%, 24px);
  opacity: 0;
  pointer-events: none;
  padding: 12px 18px;
  border-radius: 12px;
  background: #0a3d2c;
  color: var(--cream);
  font-size: 13px;
  font-weight: 600;
  box-shadow: 0 20px 40px -12px rgba(0, 0, 0, .8), inset 0 0 0 1px rgba(247, 242, 227, .14);
  transition: opacity .25s ease, transform .25s cubic-bezier(.2, 1.2, .4, 1);
  max-width: min(90vw, 460px);
  text-align: center;
}
.snackbar.is-on { opacity: 1; transform: translate(-50%, 0); }

/* ---------------------------------------------------------------- anim divers */

@keyframes pulseDot {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(74, 222, 128, .55); }
  50% { opacity: .7; box-shadow: 0 0 0 5px rgba(74, 222, 128, 0); }
}

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

/* ================================================================= RESPONSIVE */

@media (max-width: 1080px) {
  .live { display: none; }
  .brand__text small { display: none; }
}

@media (max-width: 900px) {
  .scene { --av: clamp(96px, 15vw, 150px); height: clamp(500px, 64vh, 620px); }
  .menu, .clock { display: none; }
  .neon { top: 6%; }
  .tv { top: 2.4%; width: clamp(140px, 24vw, 200px); }
  .steps { grid-template-columns: 1fr; }
  .band { flex-direction: column; align-items: flex-start; }
  .auth { grid-template-columns: 1fr; }
  .auth__art { display: none; }
  .editor { grid-template-columns: 1fr; }
  .editor__stage { position: static; grid-template-columns: 130px 1fr; align-items: center; }
  .editor__preview { width: 130px; }
  .editor__stage .btn { align-self: end; }
  .editor__hint { grid-column: 1 / -1; }
}

@media (max-width: 720px) {
  .topbar { gap: 10px; padding: calc(9px + env(safe-area-inset-top)) 12px 9px; }
  .brand__badge { width: 38px; height: 38px; font-size: 17px; border-radius: 11px; }
  .brand__count { left: 33px; top: -3px; }
  .brand__text strong { font-size: 16px; }
  .me__txt { display: none; }
  .me { gap: 6px; }
  .me__av { width: 34px; height: 34px; }
  .iconbtn { display: none; }
  .iconbtn--gold { display: grid; }
  .me .btn { padding: 10px 11px; font-size: 11px; }
  .iconbtn { width: 30px; height: 30px; font-size: 13px; }
  .userzone .btn--primary { padding: 10px 12px; font-size: 11px; }

  .wrap { padding: 10px 10px 40px; }
  .scene { height: auto; padding-top: 112px; border-radius: 18px; }
  .wall { height: 100%; }
  .wall::after { display: none; }
  .neon { top: 12px; left: 14px; }
  .neon__word { font-size: 40px; }
  .neon__sub { font-size: 7px; letter-spacing: .22em; }
  .tv { width: 112px; right: 12px; top: 12px; }
  .tv__screen { border-width: 4px; border-radius: 8px; }
  .tv__osd { font-size: 5.5px; padding: 1px 4px; left: 4px; bottom: 4px; }
  .tv__foot { height: 4px; }

  .seats {
    position: relative;
    inset: auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px 6px;
    padding: 4px 10px 22px;
  }
  .seat {
    position: static !important;
    width: calc((100% - 12px) / 3) !important;
    transform: none !important;
    animation: none;
  }
  .seat__btn { display: grid; justify-items: center; }
  .seat__av { width: 100%; }
  .seat__tag { position: relative; top: auto; left: auto; transform: none; margin-top: -4px; max-width: 100%; }
  .seat__bubble { bottom: calc(100% - 6px); }
  .empty {
    position: relative;
    left: auto;
    top: auto;
    transform: none;
    margin: 6px auto 22px;
    width: max-content;
    max-width: 88%;
  }
  .empty:hover { transform: translateY(-3px); }
  .scene__hint { position: relative; left: auto; bottom: auto; transform: none; margin: 0 auto 12px; width: max-content; max-width: 92%; white-space: normal; text-align: center; }

  .table { position: relative; height: 120px; left: -3%; right: -3%; bottom: -6px; margin-top: -6px; }
  .prop--paper, .prop--trivet { display: none; }
  .prop--beermat { transform: translateX(-50%) rotate(-6deg) scale(.72); bottom: 24%; }
  .prop--mug-a { left: 12%; bottom: 20%; transform: scale(.62) rotate(-5deg); transform-origin: bottom left; }
  .prop--mug-b { left: 72%; bottom: 24%; transform: scale(.56); }
  .prop--nuts { left: 42%; bottom: 22%; transform: scale(.7); transform-origin: bottom center; }

  .pitch { margin-top: 40px; }
  .pitch__title { font-size: clamp(42px, 13vw, 64px); }
  .steps { margin-top: 40px; gap: 10px; }
  .step { padding: 20px 18px; }
  .band { padding: 24px 20px; }
  .foot { padding: 34px 18px 42px; }
  .modal__card { border-radius: 20px; max-height: 94vh; }
  .modal__body { padding: 22px 16px; }
  .modal__close { right: 10px; top: 10px; }
  .editor__stage { grid-template-columns: 104px 1fr; padding: 12px; }
  .editor__preview { width: 104px; }
  .editor__controls { flex-direction: column; }
  .modal__card--editor { height: min(94dvh, 900px); }
  .modal__card--editor .editor {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  .modal__card--editor .editor__stage {
    flex: 0 0 auto;
    height: auto;
  }
  .modal__card--editor .editor__controls {
    flex: 1 1 auto;
    overflow-y: auto;
    padding-right: 2px;
  }
  .modal__foot { flex-wrap: wrap; }
  .modal__foot .btn { flex: 1; }
  .modal__foot .btn.btn--bell { flex: 0 0 42px; }
  .field input { font-size: 16px; }
  .chat { margin-top: 12px; padding: 14px; }
  .chat__hint { display: none; }
  .chat__head { align-items: center; }
  .chat__list { max-height: 210px; }
  .chat__form input { font-size: 16px; }
  .chat__form .btn { padding: 11px 13px; }
}

@media (max-width: 372px) {
  .seat { width: calc((100% - 6px) / 2) !important; }
  .userzone .btn--primary { font-size: 10px; padding: 9px 9px; }
}

/* iOS / Android : en mode app installée, on ne laisse pas la barre d'état
   manger le logo, et on coupe le backdrop-filter qui floute l'en-tête. */
@media (display-mode: standalone) {
  .topbar {
    background: #062d21;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    padding-top: max(18px, calc(12px + env(safe-area-inset-top)));
  }
}

/* mode capture / reduced motion forcé */
.no-anim *, .no-anim *::before, .no-anim *::after {
  animation: none !important;
  transition: none !important;
}

/* --- bouton cloche notifications ----------------------------------------- */
.modal__foot .btn--bell {
  flex: 0 0 42px;
  width: 42px;
  min-width: 42px;
  height: 42px;
  padding: 0;
  border-radius: 50%;
  display: grid;
  place-items: center;
}
.btn--bell svg { width: 20px; height: 20px; display: block; }
.btn--bell.is-on { color: #0e7a56; border-color: rgba(14, 122, 86, .35); background: rgba(14, 122, 86, .1); }
.btn--bell[disabled] { opacity: .55; }

/* --- petits ajouts ------------------------------------------------------- */
.iconbtn--gold {
  color: var(--gold);
  border-color: rgba(246, 196, 69, .42);
  background: rgba(246, 196, 69, .08);
}
.iconbtn--gold:hover { background: rgba(246, 196, 69, .18); }
.admin__tag {
  margin-left: 6px;
  padding: 2px 6px;
  border-radius: 5px;
  background: rgba(246, 196, 69, .28);
  color: #7a5a10;
  font-size: 8.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  vertical-align: 1px;
}