/* =====================================================================
   KRIPTON CLUB — STYLE COMMUN
   Valeurs reprises de la charte « Kripton Club ».
   Trois univers : data-theme="club" (défaut) · "villa" · "table".
   ===================================================================== */

/* ---------- 1. Polices (fichiers dans assets/fonts) ---------- */
@font-face { font-family: "Unbounded"; src: url("assets/fonts/Unbounded-Variable-latin.woff2") format("woff2"); font-weight: 200 900; font-display: swap; }
@font-face { font-family: "Tilt Neon"; src: url("assets/fonts/TiltNeon-Regular-latin.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Sora"; src: url("assets/fonts/Sora-Variable-latin.woff2") format("woff2"); font-weight: 100 800; font-display: swap; }
@font-face { font-family: "Cinzel"; src: url("assets/fonts/Cinzel-Variable-latin.woff2") format("woff2"); font-weight: 400 900; font-display: swap; }
@font-face { font-family: "Josefin Sans"; src: url("assets/fonts/JosefinSans-Variable-latin.woff2") format("woff2"); font-weight: 100 700; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("assets/fonts/JetBrainsMono-Variable-latin.woff2") format("woff2"); font-weight: 100 800; font-display: swap; }
@font-face { font-family: "Allura"; src: url("assets/fonts/Allura-Regular-latin.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Lora"; src: url("assets/fonts/Lora-Variable-latin.woff2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Lora"; src: url("assets/fonts/Lora-Italic-Variable-latin.woff2") format("woff2"); font-weight: 400 700; font-style: italic; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("assets/fonts/Poppins-400-latin.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("assets/fonts/Poppins-500-latin.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("assets/fonts/Poppins-600-latin.woff2") format("woff2"); font-weight: 600 700; font-display: swap; }

/* ---------- 2. Tokens ---------- */
:root {
  color-scheme: dark;

  /* Couleurs fixes de la marque */
  --kripton-vert: #8cf60c;
  --kripton-menthe: #1cf48f;
  --kripton-cyan: #00dcd6;
  --uv: #3a12c2;
  --feu: #ff4d12;
  --neon-rose: #ff2ea6;
  --electrique: #2f8cff;
  --or: #ffc21a;
  --creme: #fbf1dc;
  --or-pale: #f1e1bc;
  --argent: #c8ccd2;
  --ambre: #c98a3a;
  --degrade-kripton: linear-gradient(135deg, var(--kripton-vert), var(--kripton-menthe), var(--kripton-cyan));

  /* Familles */
  --font-affiche: "Unbounded", "Arial Black", sans-serif;
  --font-neon: "Tilt Neon", "Unbounded", sans-serif;
  --font-texte: "Sora", system-ui, sans-serif;
  --font-villa: "Cinzel", Georgia, serif;
  --font-villa-infos: "Josefin Sans", "Sora", sans-serif;
  --font-villa-script: "Allura", cursive;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Espacements (base 4px) et coupe diamant */
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-6: 24px;
  --space-8: 32px; --space-12: 48px; --space-16: 64px; --space-24: 96px;
  --coupe-sm: 8px; --coupe-md: 16px; --coupe-lg: 28px;
  --radius-sm: 4px; --radius-full: 9999px;
  --ombre-carte: 0 24px 48px -16px #000000cc;

  --gouttiere: 16px;
  --largeur: 1240px;
}

/* Univers « club » (valeurs par défaut) */
:root, [data-theme="club"] {
  --fond: #07040f;
  --fond-section: #100825;
  --fond-carte: #1b1036;
  --trait: #3a2b63;
  --trait-fort: #7a68b8;
  --encre: #f5f1ff;
  --encre-douce: #b9aedb;
  --accent: var(--kripton-vert);
  --on-accent: #07040f;
  --halo-salle: 0 0 160px 40px #3a12c288;
  --focus-ring: 0 0 0 2px #07040f, 0 0 0 4px #8cf60c;
  --font-titre: var(--font-affiche);
  --font-label: var(--font-mono);
  --font-nav: var(--font-mono);
  --titre-graisse: 900;
  --label-espace: 0.22em;
  --nav-espace: 0.26em;
}

/* Univers « villa » : La Villa Sukka */
[data-theme="villa"] {
  --fond: #0a0907;
  --fond-section: #14110c;
  --fond-carte: #1d1912;
  --trait: #3a3226;
  --trait-fort: #8a7b62;
  --encre: #fbf1dc;
  --encre-douce: #c9b99a;
  --accent: var(--creme);
  --on-accent: #0a0907;
  --halo-salle: 0 0 160px 40px #c98a3a44;
  --focus-ring: 0 0 0 2px #0a0907, 0 0 0 4px #fbf1dc;
  --font-titre: var(--font-villa);
  --font-label: var(--font-villa-infos);
  --font-nav: var(--font-villa-infos);
  --titre-graisse: 500;
  --label-espace: 0.24em;
  --nav-espace: 0.24em;
}

/* Univers « table » : La Table du Kripton — sa DA : crème et ivoire, Lora et Poppins, terracotta et or */
[data-theme="table"] {
  --fond: #f7f1e6;
  --fond-section: #efe5d4;
  --fond-carte: #fffaf1;
  --trait: #e2d4bd;
  --trait-fort: #b9a585;
  --encre: #2a211a;
  --encre-douce: #6b5c4d;
  --accent: #b4532a;
  --on-accent: #fff8ee;
  --or-table: #b8893a;
  --halo-salle: none;
  --focus-ring: 0 0 0 2px #f7f1e6, 0 0 0 4px #b4532a;
  --font-texte: "Poppins", "Sora", system-ui, sans-serif;
  --font-titre: "Lora", Georgia, "Times New Roman", serif;
  --font-label: "Poppins", "Sora", system-ui, sans-serif;
  --font-nav: "Poppins", "Sora", system-ui, sans-serif;
  --titre-graisse: 600;
  --label-espace: 0.16em;
  --nav-espace: 0.04em;
}

/* ---------- 3. Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 120px; }
body {
  margin: 0;
  background: var(--fond);
  color: var(--encre);
  font-family: var(--font-texte);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
[hidden] { display: none !important; }
img { max-width: 100%; display: block; }
a { color: inherit; }
button { font: inherit; color: inherit; }
h1, h2, h3, h4 { margin: 0; text-wrap: balance; }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
::selection { background: var(--accent); color: var(--on-accent); }
:focus-visible { outline: none; box-shadow: var(--focus-ring); }

.wrap { width: 100%; max-width: var(--largeur); margin-inline: auto; padding-inline: var(--gouttiere); }
@media (min-width: 720px) { :root { --gouttiere: 32px; } }

.section { padding-block: var(--space-16); background: var(--fond); color: var(--encre); position: relative; }
.section--alt { background: var(--fond-section); }
@media (min-width: 960px) { .section { padding-block: var(--space-24); } }

.skip { position: absolute; left: -999px; top: 8px; z-index: 100; background: var(--accent); color: var(--on-accent); padding: 8px 16px; font-weight: 700; }
.skip:focus { left: 8px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- 4. Éléments communs ---------- */
.eyebrow {
  display: inline-flex; align-items: center; gap: var(--space-3);
  font-family: var(--font-label); font-size: 11px; font-weight: 600;
  letter-spacing: var(--label-espace); text-transform: uppercase; color: var(--accent);
}
.eyebrow::before { content: ""; width: 28px; height: 1px; background: currentColor; }

.h-section {
  font-family: var(--font-titre); font-weight: var(--titre-graisse);
  font-size: clamp(2rem, 8vw, 4rem); line-height: 0.98; letter-spacing: -0.015em;
  text-transform: uppercase; margin-top: var(--space-3);
}
.h-section .contour { -webkit-text-stroke: 1.5px var(--encre); color: transparent; }
.h-section .accent { color: var(--accent); }
[data-theme="villa"] .h-section, [data-theme="table"] .h-section { text-transform: none; letter-spacing: 0; line-height: 1.05; }

.lead { color: var(--encre-douce); max-width: 60ch; margin-top: var(--space-4); }
.tete-section { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: var(--space-6); margin-bottom: var(--space-8); }
.tete-section > div { min-width: 0; }

/* Coupe diamant */
.coupe-sm { clip-path: polygon(var(--coupe-sm) 0, 100% 0, 100% calc(100% - var(--coupe-sm)), calc(100% - var(--coupe-sm)) 100%, 0 100%, 0 var(--coupe-sm)); }
.coupe-md { clip-path: polygon(var(--coupe-md) 0, 100% 0, 100% calc(100% - var(--coupe-md)), calc(100% - var(--coupe-md)) 100%, 0 100%, 0 var(--coupe-md)); }
.coupe-lg { clip-path: polygon(var(--coupe-lg) 0, 100% 0, 100% calc(100% - var(--coupe-lg)), calc(100% - var(--coupe-lg)) 100%, 0 100%, 0 var(--coupe-lg)); }

/* Boutons */
.btn {
  --btn-fond: var(--accent); --btn-encre: var(--on-accent); --btn-sous: var(--fond);
  position: relative; isolation: isolate;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: 48px; padding: 0 var(--space-6);
  font-family: var(--font-label); font-size: 12px; font-weight: 600; line-height: 1.1;
  letter-spacing: var(--label-espace); text-transform: uppercase; text-decoration: none; text-align: center;
  color: var(--btn-encre); background: var(--btn-fond); border: 0; cursor: pointer;
  clip-path: polygon(var(--coupe-sm) 0, 100% 0, 100% calc(100% - var(--coupe-sm)), calc(100% - var(--coupe-sm)) 100%, 0 100%, 0 var(--coupe-sm));
  transition: transform .2s ease, filter .2s ease;
}
.btn:hover { transform: translateY(-1px); filter: brightness(1.1); }
.btn:focus-visible { clip-path: none; box-shadow: var(--focus-ring); }
.btn--soiree { --btn-fond: var(--soiree, var(--accent)); }
.btn--contour { --btn-fond: var(--trait-fort); --btn-encre: var(--encre); }
.btn--contour::before {
  content: ""; position: absolute; inset: 1px; z-index: -1; background: var(--btn-sous);
  clip-path: polygon(calc(var(--coupe-sm) - 0.4px) 0, 100% 0, 100% calc(100% - var(--coupe-sm) + 0.4px), calc(100% - var(--coupe-sm) + 0.4px) 100%, 0 100%, 0 calc(var(--coupe-sm) - 0.4px));
}
.btn--contour:hover { --btn-fond: var(--encre); filter: none; }
.prochaine .btn--contour, .resa__carte .btn--contour, .service .btn--contour, .galerie__vide .btn--contour, .horaires__univers .btn--contour { --btn-sous: var(--fond-carte); }
.navette .btn--contour, .soiree-ligne .btn--contour { --btn-sous: var(--fond-section); }
.btn--petit { min-height: 40px; padding: 0 var(--space-4); font-size: 11px; }
.btn--icone { width: 40px; padding: 0; justify-content: center; }
.btn--icone svg { width: 17px; height: 17px; }
.btn .fleche { transition: transform .2s ease; }
.btn:hover .fleche { transform: translateX(3px); }
.boutons { display: flex; flex-wrap: wrap; gap: var(--space-3); }

/* Étiquette */
.tag {
  display: inline-flex; align-items: center; gap: 6px; align-self: flex-start;
  padding: 4px 12px; border-radius: var(--radius-full);
  font-family: var(--font-label); font-size: 10px; font-weight: 600; letter-spacing: var(--label-espace); text-transform: uppercase;
  color: var(--encre); box-shadow: inset 0 0 0 1px var(--trait-fort); white-space: nowrap;
}
.tag::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--soiree, var(--accent)); }
.tag--plein { background: var(--soiree, var(--accent)); color: var(--on-accent); box-shadow: none; }
.tag--plein::before { background: var(--on-accent); }

/* Date façon flyer : SAMEDI 17 OCTOBRE */
.date-flyer { font-family: var(--font-texte); font-weight: 300; letter-spacing: 0.04em; text-transform: uppercase; line-height: 1.2; }
.date-flyer b { font-weight: 800; color: var(--soiree, var(--accent)); }

/* Titre néon */
.neon {
  font-family: var(--font-neon); font-weight: 400; line-height: 1.1;
  color: var(--soiree, var(--accent));
  text-shadow: 0 0 2px currentColor, 0 0 10px currentColor, 0 0 32px currentColor;
}
.neon--allume { animation: allumage 1.4s steps(1, end) 1; }
@keyframes allumage { 0% { opacity: .2; } 12% { opacity: 1; } 18% { opacity: .35; } 26% { opacity: 1; } 34% { opacity: .6; } 40%, 100% { opacity: 1; } }

/* Numéros à recopier */
.numero { font-family: var(--font-texte); font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: 0.02em; user-select: all; }

/* ---------- 5. Bandeau d'annonce ---------- */
.annonce {
  display: block; padding: 10px var(--gouttiere); text-align: center; text-decoration: none;
  background: var(--uv); color: var(--encre);
  font-size: 13px; font-weight: 600; line-height: 1.4;
}
.annonce:hover { text-decoration: underline; }

/* ---------- 6. En-tête ---------- */
.entete {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50;
  background: color-mix(in srgb, var(--fond) 88%, transparent);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  box-shadow: inset 0 -1px 0 var(--trait);
  transition: background-color .3s ease;
}
@supports not (background: color-mix(in srgb, red 50%, blue)) { .entete { background: var(--fond); } }
/* Club : fond du premier prototype, halo bordeaux à gauche et fines lignes verticales */
.entete[data-theme="club"] {
  background-image:
    radial-gradient(45% 160% at 0% 100%, #7a1a4a40, transparent 70%),
    repeating-linear-gradient(90deg, transparent 0 159px, #ffffff08 159px 160px);
}
.entete__barre { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); min-height: 60px; }
.entete__logo { display: flex; align-items: center; height: 34px; flex: none; }
.entete__logo img { height: 100%; width: auto; }
.entete__logo .logo-villa, .entete__logo .logo-table { display: none; }
.entete[data-theme="villa"] .logo-club, .entete[data-theme="table"] .logo-club { display: none; }
.entete[data-theme="villa"] .logo-villa { display: block; height: 40px; }
.entete[data-theme="table"] .logo-table { display: block; }
.logo-table { font-family: var(--font-texte); font-weight: 700; font-size: 15px; letter-spacing: 0.02em; white-space: nowrap; align-self: center; }
.entete__liens { display: none; gap: clamp(16px, 2.2vw, 36px); }
.entete__liens a {
  font-family: var(--font-nav); font-size: 12px; font-weight: 500; letter-spacing: var(--nav-espace);
  text-transform: uppercase; text-decoration: none; color: var(--encre); padding: 8px 0; white-space: nowrap;
  transition: color .2s ease;
}
.entete__liens a:hover { color: var(--accent); }
.entete__actions { display: flex; align-items: center; gap: var(--space-3); }
.burger {
  display: inline-flex; flex-direction: column; justify-content: center; gap: 6px;
  width: 44px; height: 44px; padding: 0 10px; background: none; border: 0; cursor: pointer;
}
.burger span { display: block; height: 2px; background: var(--encre); transition: transform .25s ease, opacity .25s ease; }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(4px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { transform: translateY(-4px) rotate(-45deg); }
@media (min-width: 1080px) { .entete__liens { display: flex; } .burger { display: none; } }
/* Petits téléphones (320–374 px) : tout tient sur la barre, burger compris */
@media (max-width: 374px) {
  .entete__barre { gap: var(--space-2); }
  .entete__logo { height: 26px; }
  .entete[data-theme="villa"] .logo-villa { height: 34px; }
  .entete[data-theme="table"] .entete__logo { height: auto; }
  .entete[data-theme="table"] .logo-table { font-size: 15px; line-height: 1.05; white-space: normal; max-width: 7.5em; }
  .entete__actions { gap: var(--space-1); }
  .entete__actions .btn--petit { padding-inline: 10px; letter-spacing: .1em; }
}

.menu-mobile { border-top: 1px solid var(--trait); padding-block: var(--space-4) var(--space-6); }
.menu-mobile ul { display: grid; gap: 2px; }
.menu-mobile a {
  display: block; padding: 12px 0; text-decoration: none;
  font-family: var(--font-titre); font-weight: var(--titre-graisse); font-size: 22px; text-transform: uppercase;
}
.entete[data-theme="villa"] .menu-mobile a, .entete[data-theme="table"] .menu-mobile a { text-transform: none; }

.menu-mobile__lieux { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); margin-top: var(--space-4); padding-top: var(--space-4); border-top: 1px solid var(--trait); }
.menu-mobile__lieux span { width: 100%; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--encre-douce); }
.entete .menu-mobile .menu-mobile__lieux a { padding: 6px 0; font-family: var(--font-mono); font-weight: 600; font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--encre); }

/* ---------- 7a. Les 4 grandes cases de l'arrivée ---------- */
.portes { position: relative; isolation: isolate; overflow: hidden; padding-block: var(--space-4) var(--space-8); }
.portes::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(55% 70% at 0% 0%, #7a1a4a59, transparent 70%),
    radial-gradient(45% 60% at 100% 100%, #3a12c240, transparent 70%),
    repeating-linear-gradient(90deg, transparent 0 159px, #ffffff08 159px 160px);
}
.portes__tete { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 16px; margin-bottom: var(--space-4); }
.portes__titre, .portes__sous {
  font-family: var(--font-mono); font-size: 11px; font-weight: 500; line-height: 1.5;
  letter-spacing: 0.26em; text-transform: uppercase;
}
.portes__titre { color: var(--encre); }
.portes__titre span, .portes__sous { color: var(--encre-douce); }
.portes__grille { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
@media (min-width: 720px) { .portes__grille { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } .portes { padding-block: var(--space-6) var(--space-12); } }

.porte {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; flex-direction: column; justify-content: space-between; gap: var(--space-4);
  min-height: clamp(190px, 28svh, 250px);
  padding: 14px; text-decoration: none; color: var(--encre); background: var(--fond-carte);
  clip-path: polygon(var(--coupe-md) 0, 100% 0, 100% calc(100% - var(--coupe-md)), calc(100% - var(--coupe-md)) 100%, 0 100%, 0 var(--coupe-md));
}
@media (min-width: 720px) { .porte { min-height: clamp(380px, 58svh, 560px); padding: 22px; } }
.porte__img {
  position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover;
  filter: saturate(1.05) brightness(0.8);
  transition: transform .9s cubic-bezier(.2, .7, .2, 1), filter .4s ease;
}
.porte::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, #00000073 0%, transparent 28%, transparent 42%, #000000e0 100%);
}
.porte::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  box-shadow: inset 0 0 0 1px #ffffff1f, inset 0 -3px 0 transparent; transition: box-shadow .3s ease;
}
.porte:hover::before, .porte:focus-visible::before { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 60%, transparent), inset 0 -3px 0 var(--accent); }
.porte:hover .porte__img, .porte:focus-visible .porte__img { transform: scale(1.06); filter: saturate(1.15) brightness(0.9); }
.porte:focus-visible { box-shadow: none; outline: 2px solid var(--accent); outline-offset: -4px; }

.porte__haut { display: flex; justify-content: space-between; align-items: center; }
.porte__num { font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: 0.2em; color: var(--accent); }
.porte__fleche {
  display: grid; place-items: center; width: 34px; height: 34px; border-radius: var(--radius-full);
  border: 1px solid #ffffff40; background: #00000040; font-size: 15px; line-height: 1;
  transition: background-color .25s ease, color .25s ease, border-color .25s ease, transform .25s ease;
}
.porte:hover .porte__fleche { background: var(--accent); color: var(--on-accent); border-color: var(--accent); transform: translateX(2px); }
.porte__bas { display: grid; gap: 6px; }
.porte__type {
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--accent); line-height: 1.4;
}
.porte__nom {
  font-family: var(--font-titre); font-weight: var(--titre-graisse); line-height: 1.02;
  font-size: clamp(1.1rem, 4.6vw, 1.9rem); overflow-wrap: anywhere; text-wrap: balance;
}
.porte[data-theme="club"] .porte__nom { text-transform: uppercase; }
.porte__nom { font-size: clamp(1.5rem, 7vw, 2.1rem); }
.porte[data-theme="villa"] .porte__nom { font-size: clamp(1.7rem, 8vw, 2.4rem); }
@media (min-width: 720px) { .porte__nom { font-size: clamp(1.3rem, 2.5vw, 2.1rem); } .porte[data-theme="villa"] .porte__nom { font-size: clamp(1.5rem, 2.9vw, 2.4rem); } }
.porte__info {
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 400; letter-spacing: 0.1em; text-transform: uppercase;
  color: #ffffffcc; line-height: 1.5;
}
/* Case sans photo (en attendant les vraies photos) */
.porte--sans-photo {
  background:
    radial-gradient(90% 60% at 20% 15%, #4a3426, transparent 70%),
    radial-gradient(70% 50% at 100% 100%, #2a1d15, transparent 70%),
    repeating-linear-gradient(135deg, #ffffff05 0 1px, transparent 1px 12px),
    #120e0b;
}
.porte__filigrane {
  position: absolute; z-index: -1; left: 10px; right: 0; top: 24%; pointer-events: none;
  font-family: var(--font-titre); font-weight: 800; font-size: clamp(2.6rem, 12vw, 4.2rem); line-height: .9;
  color: #ffffff0f; text-transform: uppercase; letter-spacing: -0.02em; word-spacing: 100vw; white-space: normal;
}
@media (min-width: 960px) {
  .porte__type, .porte__info { font-size: 11px; }
  .porte__fleche { width: 40px; height: 40px; }
}

/* ---------- 7b. L'entrée du site : voir « L'ENTRÉE » en fin de fichier ---------- */
.essentiel { padding-top: var(--space-12); }
.essentiel__prochaine { margin-bottom: var(--space-12); }
.essentiel__prochaine:empty { display: none; }
.en-bref__tete { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-4); margin-bottom: var(--space-4); }
.lien-fleche { font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent); text-decoration: none; }
.lien-fleche:hover { text-decoration: underline; }
.en-bref { display: grid; gap: var(--space-2); }
@media (min-width: 760px) { .en-bref { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); } }
.en-bref__soiree {
  display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: var(--space-4); align-items: center; padding: 10px;
  background: var(--fond-carte); color: var(--encre); text-decoration: none; border-left: 3px solid var(--soiree);
  transition: background-color .2s ease, transform .2s ease;
}
.en-bref__soiree:hover { background: color-mix(in srgb, var(--soiree) 14%, var(--fond-carte)); transform: translateY(-2px); }
.en-bref__soiree img, .en-bref__sans { width: 64px; height: 84px; object-fit: cover; background: var(--fond-section); }
.en-bref__infos { display: grid; gap: 2px; min-width: 0; }
.en-bref__date { font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--soiree); }
.en-bref__soiree strong { font-family: var(--font-affiche); font-weight: 800; text-transform: uppercase; font-size: 17px; line-height: 1.1; overflow-wrap: anywhere; }
.en-bref__lieu { font-size: 12px; color: var(--encre-douce); }

/* ---------- Aftermovies ---------- */
.video { margin: 0; }
.video__lecture {
  position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; padding: 0; border: 0; overflow: hidden; background: #000; cursor: pointer;
  clip-path: polygon(var(--coupe-md) 0, 100% 0, 100% calc(100% - var(--coupe-md)), calc(100% - var(--coupe-md)) 100%, 0 100%, 0 var(--coupe-md));
}
.video__lecture img { width: 100%; height: 100%; object-fit: cover; filter: brightness(.7); transition: transform .6s ease, filter .3s ease; }
.video__lecture:hover img, .video__lecture:focus-visible img { transform: scale(1.04); filter: brightness(.85); }
/* L'affiche est le flyer de la soirée : le flyer entier, posé sur son propre reflet flouté */
.video__flou { position: absolute; inset: -12%; background-size: cover; background-position: center; filter: blur(26px) brightness(.45) saturate(1.3); transform: scale(1.1); }
.video__lecture img.video__flyer { position: relative; object-fit: contain; filter: none; }
.video__lecture:hover img.video__flyer, .video__lecture:focus-visible img.video__flyer { transform: scale(1.02); filter: brightness(1.05); }
.video__play {
  position: absolute; left: 50%; top: 50%; width: 72px; height: 72px; transform: translate(-50%, -50%); border-radius: 50%;
  background: var(--accent); box-shadow: 0 0 0 8px color-mix(in srgb, var(--accent) 28%, transparent), 0 0 40px var(--accent);
}
.video__play::before { content: ""; position: absolute; left: 55%; top: 50%; transform: translate(-50%, -50%); border-left: 22px solid var(--on-accent); border-top: 14px solid transparent; border-bottom: 14px solid transparent; }
.video:not(.video--grande) .video__play { width: 52px; height: 52px; }
.video:not(.video--grande) .video__play::before { border-left-width: 16px; border-top-width: 10px; border-bottom-width: 10px; }
.video figcaption { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px var(--space-4); margin-top: var(--space-3); }
.video figcaption strong { font-family: var(--font-affiche); font-weight: 800; text-transform: uppercase; font-size: 17px; }
.video--grande figcaption strong { font-size: clamp(1.2rem, 3vw, 1.6rem); }
.video figcaption span { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--encre-douce); }
.video__cadre { aspect-ratio: 16 / 9; background: #000; }
.video__lecteur { display: block; width: 100%; height: 100%; border: 0; }
.videos { display: grid; gap: var(--space-6); margin-top: var(--space-8); }
@media (min-width: 720px) { .videos { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.aftermovie-bientot {
  position: relative; display: grid; align-items: end; min-height: 300px; overflow: hidden; background: #000;
  clip-path: polygon(var(--coupe-lg) 0, 100% 0, 100% calc(100% - var(--coupe-lg)), calc(100% - var(--coupe-lg)) 100%, 0 100%, 0 var(--coupe-lg));
}
@media (min-width: 720px) { .aftermovie-bientot { aspect-ratio: 21 / 9; min-height: 0; } }
.aftermovie-bientot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: brightness(.38) saturate(1.2); }
.aftermovie-bientot__texte { position: relative; display: grid; gap: var(--space-3); justify-items: start; max-width: 560px; padding: var(--space-8) var(--space-6); }
@media (min-width: 720px) { .aftermovie-bientot__texte { padding: var(--space-12); } }
.aftermovie-bientot h3 { font-family: var(--font-affiche); font-weight: 900; text-transform: uppercase; font-size: clamp(1.6rem, 5vw, 2.6rem); line-height: 1; }
.aftermovie-bientot p { color: #ffffffcc; }

/* ---------- Réserver ailleurs, espaces de réservation des lieux ---------- */
.resa-ailleurs { margin-top: var(--space-8); max-width: 820px; }
.resa-ailleurs__liens { display: grid; gap: var(--space-2); margin-top: var(--space-3); }
@media (min-width: 640px) { .resa-ailleurs__liens { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.resa-ailleurs__lien {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px var(--space-3); align-items: center; padding: 14px 16px;
  background: var(--fond-carte); border: 1px solid var(--trait); color: var(--encre); text-decoration: none; transition: border-color .2s ease;
}
.resa-ailleurs__lien:hover { border-color: var(--accent); }
.resa-ailleurs__lien strong { font-family: var(--font-titre); font-weight: var(--titre-graisse); font-size: 15px; }
.resa-ailleurs__lien[data-theme="club"] strong { text-transform: uppercase; font-size: 13px; }
.resa-ailleurs__lien small { grid-column: 1; color: var(--encre-douce); font-size: 12px; }
.resa-ailleurs__lien span { grid-column: 2; grid-row: 1 / span 2; color: var(--accent); font-size: 18px; }
.section--resa { background: linear-gradient(180deg, var(--fond-section), var(--fond)); }
.privatiser { margin-top: var(--space-16); padding-top: var(--space-12); border-top: 1px solid var(--trait); }
.privatiser__titre { font-family: var(--font-villa); font-weight: 500; font-size: clamp(1.8rem, 6vw, 2.8rem); line-height: 1.1; margin-top: var(--space-2); }

/* ---------- 7. Hero ---------- */
.hero { position: relative; overflow: hidden; padding-block: var(--space-8) var(--space-16); }
.hero::before {
  content: ""; position: absolute; inset: -20% -10% auto -10%; height: 120%; pointer-events: none;
  background:
    radial-gradient(40% 50% at 85% 30%, color-mix(in srgb, var(--soiree, var(--uv)) 38%, transparent), transparent 70%),
    radial-gradient(45% 55% at 10% 70%, #3a12c266, transparent 70%);
}
.hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image: linear-gradient(#ffffff08 1px, transparent 1px), linear-gradient(90deg, #ffffff08 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: linear-gradient(180deg, #000 30%, transparent);
  mask-image: linear-gradient(180deg, #000 30%, transparent);
}
.hero .wrap { position: relative; z-index: 1; display: grid; gap: var(--space-12); }
@media (min-width: 1000px) { .hero .wrap { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); align-items: center; } .hero { padding-block: var(--space-16) var(--space-24); } }

.hero__titre {
  font-family: var(--font-affiche); font-weight: 900; text-transform: uppercase;
  font-size: clamp(3rem, 13.5vw, 6.4rem); line-height: 0.86; letter-spacing: -0.02em; margin-top: var(--space-4);
}
.hero__titre span { display: block; white-space: nowrap; }
.hero__titre .contour { -webkit-text-stroke: 2px var(--encre); color: transparent; }
.hero__titre .diamant { display: inline-block; width: 0.55em; height: auto; vertical-align: 0.06em; margin-left: 0.12em; }
.hero__accroche { color: var(--encre-douce); max-width: 46ch; margin-top: var(--space-6); font-size: 17px; }
.chiffres { display: flex; flex-wrap: wrap; gap: var(--space-6) var(--space-8); margin-top: var(--space-8); padding-top: var(--space-6); border-top: 1px solid var(--trait); }
.chiffre { display: flex; flex-direction: column; gap: 2px; }
.chiffre__valeur { font-family: var(--font-affiche); font-weight: 800; font-size: 26px; line-height: 1; font-variant-numeric: tabular-nums; }
.chiffre__valeur small { font-size: 14px; font-weight: 600; margin-left: 2px; }
.chiffre__label { font-family: var(--font-label); font-size: 10px; font-weight: 600; letter-spacing: var(--label-espace); text-transform: uppercase; color: var(--encre-douce); }
.hero .boutons { margin-top: var(--space-8); }

/* Carte « Prochaine soirée » */
.prochaine {
  position: relative; background: color-mix(in srgb, var(--fond-carte) 82%, transparent);
  padding: var(--space-4); display: grid; gap: var(--space-4);
  grid-template-columns: minmax(0, 38%) minmax(0, 1fr); align-items: start;
  clip-path: polygon(var(--coupe-lg) 0, 100% 0, 100% calc(100% - var(--coupe-lg)), calc(100% - var(--coupe-lg)) 100%, 0 100%, 0 var(--coupe-lg));
}
.prochaine::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--soiree, var(--accent)); }
@media (min-width: 560px) { .prochaine { padding: var(--space-6); gap: var(--space-6); } }
.prochaine__flyer { margin: 0; aspect-ratio: 9 / 16; overflow: hidden; background: var(--fond); cursor: zoom-in; padding: 0; border: 0; }
.prochaine__flyer img { width: 100%; height: 100%; object-fit: cover; }
.prochaine__flyer--large { grid-column: 1 / -1; aspect-ratio: 16 / 9; }
.prochaine__infos { display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; }
.prochaine__infos .date-flyer { font-size: 13px; }
@media (min-width: 560px) { .prochaine__infos .date-flyer { font-size: 16px; } }
.prochaine__titre { font-family: var(--font-titre); font-weight: var(--titre-graisse); text-transform: uppercase; font-size: clamp(1.6rem, 6.5vw, 2.6rem); line-height: 0.95; overflow-wrap: anywhere; }
.prochaine__sous { font-family: var(--font-label); font-size: 11px; font-weight: 600; letter-spacing: var(--label-espace); text-transform: uppercase; color: var(--encre-douce); }
.artistes { font-size: 13px; color: var(--encre-douce); line-height: 1.5; }
.artistes b { color: var(--soiree, var(--accent)); font-weight: 700; }
.compte {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px;
  padding-block: var(--space-3); border-block: 1px solid var(--trait); margin-top: var(--space-1);
}
.compte div { text-align: center; }
.compte strong { display: block; font-family: var(--font-affiche); font-weight: 800; font-size: clamp(1.15rem, 5vw, 1.9rem); line-height: 1; color: var(--soiree, var(--accent)); font-variant-numeric: tabular-nums; }
.compte span { display: block; margin-top: 4px; font-size: 9px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--encre-douce); }
.compte--direct { grid-template-columns: 1fr; }
.compte--direct strong { font-size: 1.1rem; }
.horaire-ligne { font-size: 13px; color: var(--encre-douce); font-variant-numeric: tabular-nums; }
.prochaine .boutons { margin-top: var(--space-1); }
@media (max-width: 559px) { .prochaine .boutons { grid-column: 1 / -1; } .prochaine .boutons .btn { flex: 1 1 200px; } }
.prochaine .boutons { grid-column: 1 / -1; }
.prochaine > .s-actions { grid-column: 1 / -1; margin-top: var(--space-1); gap: var(--space-3); }
.prochaine > .s-actions .btn--icone { width: 48px; min-height: 48px; }
@media (max-width: 559px) { .prochaine > .s-actions > .btn--soiree { flex: 1 1 100%; } .prochaine > .s-actions > a.btn--contour { flex: 1 1 auto; } }
/* Plusieurs soirées dans la semaine : une ligne par soirée */
.prochaine--semaine { grid-template-columns: minmax(0, 1fr); }
.prochaine__tete { display: grid; gap: var(--space-3); justify-items: start; }
.prochaine__tete .compte { width: 100%; margin-top: 0; }
.prochaine--semaine .compte strong { font-size: clamp(1.1rem, 4.4vw, 1.6rem); }
.sh-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-4); }
.sh { display: grid; grid-template-columns: minmax(0, 24%) minmax(0, 1fr); gap: var(--space-4); align-items: start; padding-top: var(--space-4); border-top: 1px solid var(--trait); }
.sh:first-child { padding-top: 0; border-top: 0; }
.sh__flyer--vide { display: grid; place-items: center; aspect-ratio: 9 / 16; padding: 10px; background: var(--fond); color: var(--soiree); text-align: center; text-decoration: none; font-family: var(--font-affiche); font-weight: 900; font-size: 13px; text-transform: uppercase; overflow-wrap: anywhere; }
.sh__infos { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-width: 0; }
.sh__infos .date-flyer { font-size: 13px; }
.sh__titre { font-family: var(--font-titre); font-weight: var(--titre-graisse); text-transform: uppercase; font-size: clamp(1.15rem, 4.6vw, 1.55rem); line-height: 1; overflow-wrap: anywhere; }
.sh__titre a { color: inherit; text-decoration: none; }
.sh__titre a:hover { color: var(--soiree); }
.sh .s-actions { margin-top: 4px; gap: 6px; }
@media (max-width: 459px) { .sh__vip { display: none; } }
.sh__live { display: inline-flex; align-items: center; gap: 6px; padding: 3px 8px; background: var(--soiree); color: var(--on-accent); font-family: var(--font-label); font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.sh__live::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; animation: allumage 2.4s infinite; }
@media (min-width: 560px) { .sh { gap: var(--space-6); } .sh-liste { gap: var(--space-6); } .sh:not(:first-child) { padding-top: var(--space-6); } }
.prochaine__vide { grid-column: 1 / -1; padding: var(--space-8) var(--space-2); text-align: center; color: var(--encre-douce); }

/* ---------- 8. Bandeau défilant ---------- */
.bandeau {
  overflow: hidden; background: var(--degrade-kripton); color: #07040f;
  font-family: var(--font-affiche); font-size: 14px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
}
.bandeau__piste { display: flex; width: max-content; animation: defile 34s linear infinite; }
.bandeau__piste span { padding: 14px 18px; white-space: nowrap; }
.bandeau__piste span::after { content: "✦"; margin-left: 36px; font-size: 11px; }
@keyframes defile { to { transform: translateX(-50%); } }

/* ---------- 9. Le club ---------- */
.club { display: grid; gap: var(--space-12); }
@media (min-width: 960px) { .club { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; } }
.club__photos { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); }
.club__photos button { padding: 0; border: 0; background: var(--fond-carte); overflow: hidden; cursor: zoom-in; }
.club__photos img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.club__photos button:hover img { transform: scale(1.04); }
.club__photos .grande { grid-column: 1 / -1; aspect-ratio: 16 / 10; }
.club__photos .petite { aspect-ratio: 4 / 5; }
.club__texte p { color: var(--encre-douce); font-size: 17px; max-width: 54ch; margin-top: var(--space-6); }
.bars { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-6); }
.bars li {
  padding: 10px 16px; background: var(--fond-carte);
  font-family: var(--font-affiche); font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  clip-path: polygon(var(--coupe-sm) 0, 100% 0, 100% calc(100% - var(--coupe-sm)), calc(100% - var(--coupe-sm)) 100%, 0 100%, 0 var(--coupe-sm));
}
.bars li::before { content: "◆"; color: var(--kripton-vert); margin-right: 8px; font-size: 9px; vertical-align: 2px; }

/* Les espaces du club (Pandora, Platinium, Bar Oval, Snack) */
.club-espaces__tete { display: grid; gap: var(--space-6); align-items: end; }
@media (min-width: 960px) { .club-espaces__tete { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--space-12); } }
.club-espaces__intro { color: var(--encre-douce); font-size: 17px; line-height: 1.6; max-width: 52ch; }
.espaces-club { display: grid; gap: var(--space-3); margin-top: var(--space-12); }
@media (min-width: 640px) { .espaces-club { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .espaces-club { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.espace-club {
  position: relative; display: flex; flex-direction: column; gap: 10px; min-width: 0; min-height: 220px; padding: 26px 22px 24px; overflow: hidden;
  background: linear-gradient(160deg, color-mix(in srgb, var(--fond-carte) 100%, transparent), color-mix(in srgb, var(--fond-carte) 70%, var(--fond)));
  clip-path: polygon(var(--coupe-sm) 0, 100% 0, 100% calc(100% - var(--coupe-sm)), calc(100% - var(--coupe-sm)) 100%, 0 100%, 0 var(--coupe-sm));
  transition: transform .35s cubic-bezier(.2, .8, .2, 1), background .35s ease;
}
.espace-club::before { content: ""; position: absolute; inset: auto -30% -60% auto; width: 220px; height: 220px; border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--kripton-vert) 26%, transparent), transparent); opacity: .35; transition: opacity .35s ease, transform .5s ease; }
.espace-club:hover { transform: translateY(-4px); }
.espace-club:hover::before { opacity: .8; transform: scale(1.15); }
.espace-club__num { position: absolute; top: 14px; right: 18px; font-family: var(--font-affiche); font-weight: 900; font-size: 44px; line-height: 1; color: transparent; -webkit-text-stroke: 1px color-mix(in srgb, var(--encre) 28%, transparent); }
.espace-club__accroche { padding-right: 72px; font-family: var(--font-label); font-size: 11px; font-weight: 600; letter-spacing: var(--label-espace); text-transform: uppercase; color: var(--kripton-vert); }
.espace-club__nom { margin-top: auto; font-family: var(--font-affiche); font-weight: 800; font-size: clamp(1.35rem, 4.6vw, 1.7rem); line-height: 1.05; text-transform: uppercase; overflow-wrap: anywhere; }
.espace-club p { position: relative; color: var(--encre-douce); font-size: 15px; line-height: 1.55; }

/* ---------- 10. Agenda ---------- */
.filtres { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.filtre {
  min-height: 40px; padding: 0 16px; background: transparent; border: 1px solid var(--trait-fort); cursor: pointer;
  font-family: var(--font-label); font-size: 11px; font-weight: 600; letter-spacing: var(--label-espace); text-transform: uppercase; color: var(--encre);
}
.filtre:hover { border-color: var(--encre); }
.filtre[aria-pressed="true"] { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }

.agenda { display: flex; flex-direction: column; border-top: 1px solid var(--trait); }
.soiree-ligne {
  display: grid; grid-template-columns: 58px 60px minmax(0, 1fr); gap: var(--space-4); align-items: center;
  padding-block: var(--space-6); border-bottom: 1px solid var(--trait); position: relative;
}
.soiree-ligne::before {
  content: ""; position: absolute; left: calc(-1 * var(--gouttiere)); top: 0; bottom: 0; width: 3px;
  background: var(--soiree, var(--accent)); opacity: 0; transition: opacity .25s ease;
}
.soiree-ligne:hover::before { opacity: 1; }
.soiree-ligne__date { font-family: var(--font-affiche); text-transform: uppercase; line-height: 0.95; }
.soiree-ligne__date .jour-nom { display: block; font-size: 10px; font-weight: 600; letter-spacing: 0.14em; color: var(--encre-douce); margin-bottom: 4px; }
.soiree-ligne__date .jour { display: block; font-size: 34px; font-weight: 900; color: var(--soiree, var(--accent)); font-variant-numeric: tabular-nums; }
.soiree-ligne__date .mois { display: block; font-size: 11px; font-weight: 700; letter-spacing: 0.1em; margin-top: 4px; }
.soiree-ligne__flyer { padding: 0; border: 0; background: var(--fond-carte); aspect-ratio: 9 / 16; overflow: hidden; cursor: zoom-in; }
.soiree-ligne__flyer img { width: 100%; height: 100%; object-fit: cover; }
.soiree-ligne__corps { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.soiree-ligne__titre { font-family: var(--font-titre); font-weight: var(--titre-graisse); text-transform: uppercase; font-size: clamp(1.4rem, 5.5vw, 2.2rem); line-height: 1; overflow-wrap: anywhere; transition: color .2s ease; }
.soiree-ligne:hover .soiree-ligne__titre { color: var(--soiree, var(--accent)); }
.soiree-ligne__promesses { font-family: var(--font-label); font-size: 10.5px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; line-height: 1.6; }
.soiree-ligne__meta { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); align-items: center; font-size: 13px; color: var(--encre-douce); font-variant-numeric: tabular-nums; }
.soiree-ligne__actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: var(--space-2); }
@media (min-width: 860px) {
  .soiree-ligne { grid-template-columns: 96px 72px minmax(0, 1fr) auto; gap: var(--space-6); }
  .soiree-ligne__date .jour { font-size: 52px; }
  .soiree-ligne__actions { grid-column: auto; justify-content: flex-end; }
}
.vide { padding: var(--space-12) 0; color: var(--encre-douce); text-align: center; }

/* ---------- 11. Réservations (aperçu) ---------- */
.resa { display: grid; gap: var(--space-4); }
@media (min-width: 760px) { .resa { grid-template-columns: 1fr 1fr; } }
.resa__carte {
  position: relative; overflow: hidden; display: flex; flex-direction: column; gap: var(--space-4);
  padding: var(--space-8) var(--space-6); background: var(--fond-carte); min-height: 260px;
  clip-path: polygon(var(--coupe-md) 0, 100% 0, 100% calc(100% - var(--coupe-md)), calc(100% - var(--coupe-md)) 100%, 0 100%, 0 var(--coupe-md));
}
.resa__carte::after { content: ""; position: absolute; right: -80px; top: -80px; width: 240px; height: 240px; border-radius: 50%; background: radial-gradient(closest-side, var(--halo, #3a12c288), transparent); pointer-events: none; }
.resa__carte--vip { --halo: #ffc21a40; }
.resa__titre { font-family: var(--font-affiche); font-weight: 900; text-transform: uppercase; font-size: clamp(1.8rem, 6vw, 2.6rem); line-height: 1; }
.resa__carte p { color: var(--encre-douce); max-width: 40ch; }
.resa__carte .btn { margin-top: auto; align-self: flex-start; }
.resa__note { margin-top: var(--space-6); font-size: 13px; color: var(--encre-douce); }

/* ---------- 12. Galerie ---------- */
.onglets { display: flex; gap: 2px; border-bottom: 1px solid var(--trait); margin-bottom: var(--space-8); overflow-x: auto; scrollbar-width: none; }
.onglets::-webkit-scrollbar { display: none; }
.onglet {
  flex: none; padding: 14px 18px; background: none; border: 0; cursor: pointer; position: relative;
  font-family: var(--font-label); font-size: 11px; font-weight: 600; letter-spacing: var(--label-espace); text-transform: uppercase; color: var(--encre-douce);
}
.onglet:hover { color: var(--encre); }
.onglet[aria-selected="true"] { color: var(--accent); }
.onglet[aria-selected="true"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--accent); }
.onglet .nb { color: var(--encre-douce); margin-left: 6px; }

.albums { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--space-4); }
.album { padding: 0; border: 0; background: var(--fond-carte); text-align: left; cursor: pointer; display: flex; flex-direction: column; }
.album__img { aspect-ratio: 4 / 3; overflow: hidden; }
.album__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.album:hover .album__img img { transform: scale(1.04); }
.album__infos { padding: var(--space-4); display: flex; justify-content: space-between; gap: var(--space-3); align-items: baseline; }
.album__titre { font-family: var(--font-affiche); font-weight: 700; font-size: 15px; text-transform: uppercase; }
.album__nb { font-size: 12px; color: var(--encre-douce); white-space: nowrap; }

.mur { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
@media (min-width: 720px) { .mur { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-4); } }
.mur__item { margin: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.mur__img {
  display: block; padding: 0; border: 0; width: 100%; aspect-ratio: 9 / 16; overflow: hidden; background: var(--fond-carte); cursor: zoom-in;
  clip-path: polygon(var(--coupe-md) 0, 100% 0, 100% calc(100% - var(--coupe-md)), calc(100% - var(--coupe-md)) 100%, 0 100%, 0 var(--coupe-md));
  transition: transform .25s ease;
}
.mur__img img { width: 100%; height: 100%; object-fit: cover; }
.mur__item:hover .mur__img { transform: translateY(-4px); }
.mur__item figcaption { font-size: 12px; line-height: 1.5; color: var(--encre-douce); }

.galerie__vide { display: grid; gap: var(--space-4); justify-items: start; padding: var(--space-8); background: var(--fond-carte); max-width: 640px; }
.galerie__vide p { color: var(--encre-douce); }
.droit-image { margin-top: var(--space-8); font-size: 12px; color: var(--encre-douce); }

/* ---------- 13. La Villa Sukka ---------- */
.villa { overflow: hidden; }
.villa::before { content: ""; position: absolute; right: -10%; top: 10%; width: 60%; height: 70%; pointer-events: none; background: radial-gradient(closest-side, #c98a3a2e, transparent); }
.villa .wrap { position: relative; display: grid; gap: var(--space-12); }
@media (min-width: 960px) { .villa .wrap { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; } }
.villa__mono { width: 96px; height: auto; margin-bottom: var(--space-4); }
.villa__titre { font-family: var(--font-villa); font-weight: 500; font-size: clamp(2.4rem, 9vw, 4.2rem); line-height: 1; }
.villa__phrase { font-family: var(--font-villa-script); font-size: clamp(2rem, 7vw, 2.8rem); line-height: 1.1; color: var(--or-pale); text-shadow: 0 0 18px #c98a3a99; margin-top: var(--space-4); }
.villa__texte { color: var(--encre-douce); margin-top: var(--space-6); max-width: 46ch; }
.villa__offre { display: flex; flex-wrap: wrap; gap: 6px 0; margin-top: var(--space-6); font-family: var(--font-villa-infos); font-size: 13px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; }
.villa__offre li:not(:last-child)::after { content: "·"; margin: 0 12px; color: var(--encre-douce); }
.villa__horaires { margin-top: var(--space-8); padding: var(--space-6); background: var(--creme); color: #0a0907; display: grid; gap: 4px; max-width: 420px; }
.villa__horaires strong { font-family: var(--font-villa-infos); font-size: 12px; letter-spacing: 0.24em; text-transform: uppercase; }
.villa__horaires span { font-family: var(--font-villa); font-size: 22px; font-weight: 600; }
.villa__ancien { margin-top: var(--space-3); font-family: var(--font-villa-infos); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--encre-douce); }
.villa .boutons { margin-top: var(--space-8); }
.villa__droite { display: grid; gap: var(--space-8); min-width: 0; }
.villa__flyers { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); align-items: start; }
.villa__flyers button { padding: 0; border: 0; background: var(--fond-carte); cursor: zoom-in; overflow: hidden; }
.villa__flyers img { width: 100%; height: auto; }
.a-venir h3 { font-family: var(--font-villa-infos); font-size: 12px; font-weight: 600; letter-spacing: 0.24em; text-transform: uppercase; color: var(--encre-douce); margin-bottom: var(--space-4); }
.a-venir ul { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); }
.a-venir li { padding: var(--space-4); background: var(--fond-carte); box-shadow: inset 0 0 0 1px var(--trait); display: grid; gap: 4px; }
.a-venir strong { font-family: var(--font-villa); font-size: 20px; font-weight: 600; line-height: 1.15; }
.a-venir span { font-size: 12px; color: var(--encre-douce); }

/* ---------- 14. La Table du Kripton ---------- */
.table__tete { display: grid; gap: var(--space-8); margin-bottom: var(--space-8); }
@media (min-width: 960px) { .table__tete { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: end; } }
.table__provisoire { font-size: 11px; color: var(--encre-douce); margin-top: var(--space-3); }
.horaires-mini { display: grid; gap: var(--space-2); font-size: 14px; font-variant-numeric: tabular-nums; }
.horaires-mini div { display: flex; justify-content: space-between; gap: var(--space-4); padding-bottom: var(--space-2); border-bottom: 1px solid var(--trait); }
.horaires-mini dt { color: var(--encre-douce); }
.horaires-mini dd { margin: 0; font-weight: 600; text-align: right; }
.appel { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-4); margin-top: var(--space-4); }
.appel .numero { font-size: 18px; }

.rubriques { display: flex; gap: var(--space-2); overflow-x: auto; padding-bottom: var(--space-3); margin-bottom: var(--space-4); scrollbar-width: thin; }
.rubrique-btn {
  flex: none; min-height: 40px; padding: 0 14px; border: 1px solid var(--trait-fort); background: transparent; cursor: pointer;
  font-size: 12px; font-weight: 600; letter-spacing: 0.06em; color: var(--encre);
}
.rubrique-btn:hover { border-color: var(--encre); }
.rubrique-btn[aria-pressed="true"] { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.carte { background: var(--fond-carte); padding: var(--space-2) var(--space-6); }
.carte__ligne { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-2) var(--space-6); padding-block: var(--space-4); border-bottom: 1px dashed var(--trait); align-items: baseline; }
.carte__ligne:last-child { border-bottom: 0; }
.carte__nom { font-weight: 700; }
.carte__detail { display: block; font-size: 13px; color: var(--encre-douce); font-style: italic; margin-top: 2px; }
.carte__degre { display: inline-block; margin-left: 8px; padding: 1px 7px; border: 1px solid var(--trait-fort); border-radius: 999px; font-size: 11px; font-weight: 600; font-style: normal; letter-spacing: 0.04em; line-height: 1.5; color: var(--encre-douce); white-space: nowrap; vertical-align: 2px; font-variant-numeric: tabular-nums; }
.carte__prix { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px var(--space-4); font-variant-numeric: tabular-nums; text-align: right; }
.carte__prix span { white-space: nowrap; }
.carte__prix small { color: var(--encre-douce); font-size: 12px; margin-right: 6px; }
@media (max-width: 520px) {
  .carte { padding-inline: var(--space-4); }
  .carte__ligne { padding-block: var(--space-3); }
  .carte__ligne--multi { grid-template-columns: 1fr; }
  .carte__ligne--multi .carte__prix { justify-content: flex-start; text-align: left; }
}
.mention-alcool { margin-top: var(--space-4); font-size: 12px; color: var(--encre-douce); }

/* ---------- 15. Services ---------- */
.services { display: grid; gap: var(--space-4); }
@media (min-width: 960px) { .services { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); } .services.services--seul { grid-template-columns: minmax(0, 1fr); } }
.service {
  background: var(--fond-carte); padding: var(--space-8) var(--space-6); display: flex; flex-direction: column; gap: var(--space-4);
  clip-path: polygon(var(--coupe-md) 0, 100% 0, 100% calc(100% - var(--coupe-md)), calc(100% - var(--coupe-md)) 100%, 0 100%, 0 var(--coupe-md));
}
.service__titre { font-family: var(--font-affiche); font-weight: 900; text-transform: uppercase; font-size: clamp(1.8rem, 6vw, 2.6rem); line-height: 1; }
.service > p { color: var(--encre-douce); }
.service__photo { width: calc(100% + 2 * var(--space-6)); max-width: none; margin: calc(-1 * var(--space-8)) calc(-1 * var(--space-6)) 0; aspect-ratio: 16 / 9; object-fit: cover; object-position: center 40%; }
/* Villa : happy hour et produits locaux */
.happy {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2) var(--space-4); margin-top: var(--space-8);
  padding: var(--space-4) var(--space-6); border: 1px solid var(--ambre); color: var(--encre);
}
.happy__titre { font-family: var(--font-villa); font-size: 22px; color: var(--ambre); }
.happy__quand { font-family: var(--font-villa-infos); font-size: 12px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; }
.happy ul { display: flex; flex-wrap: wrap; gap: 4px 16px; font-family: var(--font-villa-infos); font-size: 13px; letter-spacing: 0.08em; }
.local { margin-top: var(--space-12); padding-top: var(--space-8); border-top: 1px solid var(--trait); text-align: center; }
.local h3 { font-family: var(--font-villa); font-weight: 500; font-size: clamp(1.5rem, 6vw, 2.4rem); color: var(--ambre); }
.local p { max-width: 60ch; margin: var(--space-3) auto 0; color: var(--encre-douce); }
[data-theme="villa"] .carte__titre { color: var(--ambre); }
.service[data-theme="villa"] .service__titre { font-family: var(--font-villa); font-weight: 500; text-transform: none; }
.etiquettes { display: flex; flex-wrap: wrap; gap: 6px; }
.etiquettes li {
  padding: 6px 12px; border: 1px solid var(--trait-fort); border-radius: var(--radius-full);
  font-family: var(--font-label); font-size: 11px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--encre);
}
/* Villa : la liste des événements privés */
.evenements { display: grid; gap: var(--space-4); margin-top: var(--space-8); }
@media (min-width: 760px) { .evenements { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.evenements__groupe {
  padding: var(--space-6); background: var(--fond-carte); border: 1px solid var(--trait);
  clip-path: polygon(var(--coupe-md) 0, 100% 0, 100% calc(100% - var(--coupe-md)), calc(100% - var(--coupe-md)) 100%, 0 100%, 0 var(--coupe-md));
}
.evenements__groupe h3 {
  font-family: var(--font-villa-infos); font-size: 12px; font-weight: 600; letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--or-pale); margin-bottom: var(--space-4);
}
.evenements__groupe ul { display: grid; gap: 2px; }
.evenements__groupe li { font-family: var(--font-villa); font-size: 19px; line-height: 1.35; padding: 6px 0; border-bottom: 1px solid var(--trait); }
.evenements__groupe li:last-child { border-bottom: 0; }
.navettes__liste { display: grid; gap: var(--space-3); margin-top: var(--space-6); }
@media (min-width: 720px) { .navettes__liste { grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); grid-auto-flow: column; } }
.navette {
  position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; min-width: 0; padding: 22px 22px 20px;
  background: linear-gradient(160deg, color-mix(in srgb, var(--or) 14%, var(--fond-section)), var(--fond-section) 60%);
  box-shadow: inset 0 3px 0 var(--or);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--coupe-sm)), calc(100% - var(--coupe-sm)) 100%, 0 100%);
  transition: transform .3s cubic-bezier(.2, .8, .2, 1);
}
.navette:hover { transform: translateY(-3px); }
.navette__nom { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-affiche); font-weight: 700; font-size: 15px; text-transform: uppercase; letter-spacing: 0.04em; }
.navette__pin { width: 18px; height: 18px; flex: none; fill: var(--or); }
.navette__tel { font-size: clamp(1.35rem, 5vw, 1.6rem); color: var(--encre); text-decoration: none; }
.navette__places { font-size: 12px; color: var(--or); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
.navette .btn { margin-top: 6px; }

/* ---------- 16. Infos pratiques ---------- */
.infos { display: grid; gap: var(--space-12); }
@media (min-width: 960px) { .infos { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); } }
.info-bloc { display: grid; gap: var(--space-2); padding-bottom: var(--space-6); border-bottom: 1px solid var(--trait); }
.info-bloc + .info-bloc { margin-top: var(--space-6); }
.info-label { font-family: var(--font-label); font-size: 10px; font-weight: 600; letter-spacing: var(--label-espace); text-transform: uppercase; color: var(--encre-douce); }
.info-valeur { font-family: var(--font-affiche); font-weight: 700; font-size: 18px; line-height: 1.3; }
.info-sous { color: var(--encre-douce); font-size: 14px; }
.horaires { display: grid; gap: var(--space-4); }
@media (min-width: 640px) { .horaires { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.horaires__univers { padding: var(--space-6); background: var(--fond-carte); color: var(--encre); }
.horaires__univers h3 { font-family: var(--font-titre); font-weight: var(--titre-graisse); font-size: 18px; line-height: 1.15; margin-bottom: var(--space-4); }
[data-theme="club"].horaires__univers h3 { text-transform: uppercase; }
.horaires__univers dl { margin: 0; display: grid; gap: var(--space-3); font-size: 14px; font-variant-numeric: tabular-nums; }
.horaires__univers dt { color: var(--encre-douce); font-size: 12px; }
.horaires__univers dd { margin: 0; font-weight: 700; }
.reseaux { display: flex; flex-wrap: wrap; gap: var(--space-2); }

/* ---------- 17. Pied de page ---------- */
.pied { padding-block: var(--space-16) var(--space-8); border-top: 1px solid var(--trait); background: var(--fond); }
.pied__grille { display: grid; gap: var(--space-8); grid-template-columns: 1fr 1fr; }
@media (min-width: 860px) { .pied__grille { grid-template-columns: 2fr 1fr 1fr 1fr; } }
.pied__marque { grid-column: 1 / -1; display: grid; gap: var(--space-4); }
@media (min-width: 860px) { .pied__marque { grid-column: auto; } }
.pied__marque img { width: 180px; height: auto; }
.pied__marque p { color: var(--encre-douce); font-size: 14px; max-width: 34ch; }
.pied h4 { font-family: var(--font-label); font-size: 10px; font-weight: 600; letter-spacing: var(--label-espace); text-transform: uppercase; color: var(--accent); margin-bottom: var(--space-4); }
.pied ul { display: grid; gap: var(--space-3); }
.pied ul a { color: var(--encre-douce); text-decoration: none; font-size: 14px; }
.pied ul a:hover { color: var(--encre); }
/* Le vrai logo du Kripton, en grand, pour signer le bas de page */
.pied__geant { margin-top: var(--space-12); display: flex; justify-content: center; user-select: none; }
.pied__geant img { display: block; width: 100%; max-width: 1040px; height: auto; filter: drop-shadow(0 0 28px rgba(28, 244, 143, .14)); }
/* Le pied de la Villa et de La Table : leur nom, leur écriture, leurs couleurs */
.pied__logo { display: inline-flex; align-items: center; gap: 14px; }
.pied__marque .pied__mono { width: 62px; height: auto; }
.pied__nom { font-family: var(--font-titre); font-size: 26px; line-height: 1.05; color: var(--encre); }
.pied__logo--villa .pied__nom { font-family: var(--font-villa); font-weight: 500; letter-spacing: .05em; text-transform: uppercase; font-size: 22px; }
.pied__logo--table .pied__nom { font-family: "Lora", Georgia, serif; font-weight: 600; font-size: 28px; }
.pied__logo--table .pied__nom em { font-style: italic; font-weight: 500; color: var(--accent); }
.pied__geant-villa { display: grid; justify-items: center; text-align: center; line-height: 1; padding-block: 8px; }
.pied__geant-script { position: relative; z-index: 1; margin-bottom: -.28em; font-family: var(--font-villa-script); font-size: clamp(2rem, 6.5vw, 4.6rem); color: #e3b46f; text-shadow: 0 2px 18px #0a0907; }
.pied__geant-nom { font-family: var(--font-villa); font-weight: 500; font-size: clamp(2.3rem, 10.5vw, 8.4rem); letter-spacing: .05em; text-transform: uppercase; background: linear-gradient(180deg, #fbf1dc 10%, #c98a3a 95%); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 30px #c98a3a2e); white-space: nowrap; }
.pied__geant-table { display: block; text-align: center; font-family: "Lora", Georgia, serif; font-weight: 600; font-size: clamp(2.4rem, 10vw, 8rem); line-height: 1; color: var(--encre); white-space: nowrap; }
.pied__geant-table em { font-style: italic; font-weight: 500; color: var(--accent); }
.pied__bas { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-4); margin-top: var(--space-8); padding-top: var(--space-6); border-top: 1px solid var(--trait); font-size: 12px; color: var(--encre-douce); }
.pied__bas nav { display: flex; flex-wrap: wrap; gap: var(--space-4); }
.pied__bas a { color: var(--encre-douce); }

/* ---------- 18. Visionneuse et message ---------- */
.visionneuse { position: fixed; inset: 0; z-index: 200; background: #000000ee; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; padding: calc(env(safe-area-inset-top, 0px) + 8px) 8px calc(env(safe-area-inset-bottom, 0px) + 12px); }
.visionneuse__haut { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); color: #f5f1ff; font-size: 13px; padding: 4px 8px; }
.visionneuse__img { display: grid; place-items: center; min-height: 0; overflow: hidden; touch-action: pan-y; }
/* La photo tient toujours dans l'écran, en portrait comme en paysage (la hauteur de l'écran moins la barre du haut et les flèches) */
.visionneuse__img img { width: auto; height: auto; max-width: 100%; max-height: calc(100vh - 150px); max-height: calc(100dvh - 150px); object-fit: contain; user-select: none; -webkit-user-drag: none; }
.visionneuse__nav { display: flex; justify-content: center; gap: var(--space-3); padding-top: 8px; }
.visionneuse button { min-width: 48px; min-height: 48px; background: #1b1036; color: #f5f1ff; border: 1px solid #7a68b8; cursor: pointer; font-size: 18px; }
.visionneuse button:hover { background: #3a12c2; }

.message {
  position: fixed; left: 50%; bottom: calc(env(safe-area-inset-bottom, 0px) + 20px); transform: translateX(-50%); z-index: 210;
  max-width: calc(100% - 32px); padding: 14px 20px; background: var(--fond-carte); color: var(--encre);
  box-shadow: inset 0 0 0 1px var(--accent), 0 16px 40px -8px #000; font-size: 14px; font-weight: 600;
}

/* ---------- 18b. Passage d'une page à l'autre ----------
   Un rideau aux couleurs et au logo de l'univers d'arrivée monte, la page change,
   puis le rideau se lève et le contenu remonte doucement. */
html[data-passage="club"] {
  --passage-fond:
    radial-gradient(60% 50% at 0% 100%, #7a1a4a73, transparent 70%),
    radial-gradient(50% 45% at 100% 0%, #3a12c266, transparent 70%),
    repeating-linear-gradient(90deg, transparent 0 159px, #ffffff0a 159px 160px), #07040f;
  --passage-logo: url("assets/logos/kripton-logo.svg"); --passage-taille: min(64vw, 320px) auto;
  --passage-trait: #8cf60c; --passage-texte: "";
}
html[data-passage="villa"] {
  --passage-fond: #0a0907;
  --passage-logo: url("assets/logos/villa-sukka-monogramme.png"); --passage-taille: 84px auto;
  --passage-trait: #c98a3a55; --passage-texte: "";
}
html[data-passage="table"] {
  --passage-fond: radial-gradient(60% 50% at 50% 50%, #fffaf1, transparent 75%), #f2e8d7;
  --passage-logo: none; --passage-taille: auto;
  --passage-trait: #b4532a; --passage-texte: "La Table du Kripton";
}
html[data-passage="table"] body::after { font-family: "Lora", Georgia, serif; font-style: italic; font-weight: 500; }
html[data-passage] body::before {
  content: ""; position: fixed; inset: 0; z-index: 2000; pointer-events: none;
  background: var(--passage-fond);
  box-shadow: 0 -3px 0 var(--passage-trait), 0 3px 0 var(--passage-trait);
  transform: translateY(102%);
}
html[data-passage] body::after {
  content: var(--passage-texte); position: fixed; inset: 0; z-index: 2001; pointer-events: none;
  display: grid; place-items: center; padding: 16px; text-align: center;
  background: var(--passage-logo) center / var(--passage-taille) no-repeat;
  font-family: var(--font-texte); font-weight: 700; font-size: clamp(1.6rem, 7vw, 2.6rem); color: var(--passage-trait);
  opacity: 0; transform: scale(.92);
}
html.passage-depart body::before { transform: translateY(0); transition: transform .5s cubic-bezier(.76, 0, .24, 1); }
html.passage-depart body::after { opacity: 1; transform: scale(1); transition: opacity .25s ease .25s, transform .6s cubic-bezier(.2, .7, .2, 1) .2s; }
html.passage-depart { cursor: progress; }
html.passage-arrivee body::before { transform: translateY(0); }
html.passage-arrivee body::after { opacity: 1; transform: scale(1); }
html.passage-arrivee.passage-ouvre body::before { transform: translateY(-102%); transition: transform .75s cubic-bezier(.76, 0, .24, 1) .12s; }
html.passage-arrivee.passage-ouvre body::after { opacity: 0; transform: translateY(-40px) scale(1.04); transition: opacity .3s ease, transform .5s ease; }
/* le contenu remonte pendant que le rideau se lève */
html.passage-arrivee main { opacity: 0; transform: translateY(28px); }
html.passage-arrivee.passage-ouvre main { opacity: 1; transform: none; transition: opacity .7s ease .35s, transform .9s cubic-bezier(.2, .7, .2, 1) .3s; }
/* sécurité : si le script ne tourne pas, la page s'ouvre quand même au bout de 2,5 s */
html.passage-arrivee body::before { animation: passage-secours-rideau .5s ease 2.5s forwards; }
html.passage-arrivee body::after { animation: passage-secours-cache .3s ease 2.5s forwards; }
html.passage-arrivee main { animation: passage-secours-fondu .3s ease 2.5s forwards; }
html.passage-arrivee.passage-ouvre body::before, html.passage-arrivee.passage-ouvre body::after, html.passage-arrivee.passage-ouvre main { animation: none; }
@keyframes passage-secours-rideau { to { transform: translateY(-102%); } }
@keyframes passage-secours-fondu { to { opacity: 1; transform: none; } }
@keyframes passage-secours-cache { to { opacity: 0; } }

/* ---------- 18c. Plan de la salle (réservation) ---------- */
.plan { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
.plan > * { min-width: 0; }
@media (min-width: 760px) {
  .plan { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); align-items: start; column-gap: var(--space-6); }
  .plan__legende { grid-column: 1 / -1; }
  .plan__cote { position: sticky; top: 140px; }
}
.plan__legende { display: flex; flex-wrap: wrap; gap: 6px; }
.plan__filtre {
  display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px; cursor: pointer;
  background: transparent; border: 1px solid var(--trait-fort); color: var(--encre);
  font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase;
}
.plan__filtre i { width: 10px; height: 10px; border-radius: 50%; background: var(--c, var(--encre)); box-shadow: 0 0 8px var(--c, transparent); }
.plan__filtre small { font-size: 10px; letter-spacing: 0.06em; text-transform: none; color: var(--encre-douce); }
.plan__filtre[aria-pressed="true"] { border-color: var(--c, var(--accent)); background: color-mix(in srgb, var(--c, var(--accent)) 16%, transparent); }
.plan__cadre {
  position: relative; overflow: hidden; background: #050308; border: 1px solid var(--trait);
  clip-path: polygon(var(--coupe-md) 0, 100% 0, 100% calc(100% - var(--coupe-md)), calc(100% - var(--coupe-md)) 100%, 0 100%, 0 var(--coupe-md));
}
.plan__cadre--zoom { overflow: auto; max-height: 78svh; overscroll-behavior: contain; }
.plan__salle { position: relative; width: 100%; user-select: none; -webkit-user-select: none; container-type: inline-size; }
/* Le nom de la soirée en haut du plan et le nom sur la cabine DJ (changent à chaque soirée) */
.plan__titre { position: absolute; left: 4%; right: 4%; transform: translateY(-50%); text-align: center; pointer-events: none; z-index: 1; }
.plan__titre span {
  display: inline-block; max-width: 100%; padding-bottom: .9cqw; border-bottom: .35cqw solid #ffb36bcc;
  font-family: var(--font-affiche); font-weight: 800; text-transform: uppercase; line-height: 1.1;
  font-size: 18px; font-size: min(6.4cqw, calc(88cqw / var(--n, 10)));
  color: #fff4e6; text-shadow: 0 0 1.2cqw #ff9a3c, 0 0 3.5cqw #ff6a00aa;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.plan__cabine {
  position: absolute; transform: translate(-50%, -50%); z-index: 1; pointer-events: none; width: 11cqw; text-align: center;
  font-family: var(--font-affiche); font-weight: 800; text-transform: uppercase; line-height: 1.05; overflow-wrap: anywhere;
  font-size: 8px; font-size: min(2.6cqw, calc(12cqw / var(--n, 6)));
  color: #ffe6c7; text-shadow: 0 0 .8cqw #ff8a1a, 0 0 2cqw #ff6a00aa;
}
.plan__cabine small { display: block; font-size: 1.15em; }
.plan__cadre--zoom .plan__salle { width: 210%; }
.plan__salle img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.plan__repere {
  position: absolute; transform: translate(-50%, -50%); pointer-events: none; white-space: nowrap;
  font-family: var(--font-mono); font-size: 9px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: #ffd9a8;
  text-shadow: 0 0 8px #ff8a1a;
}
.point {
  --taille: 20px;
  position: absolute; transform: translate(-50%, -50%); z-index: 1;
  width: var(--taille); height: var(--taille); padding: 0; border-radius: 50%; cursor: pointer;
  display: grid; place-items: center; border: 2px solid var(--c); background: #0b0812eb; color: #fff;
  font-family: var(--font-mono); font-size: 9px; font-weight: 700; letter-spacing: 0;
  box-shadow: 0 0 0 2px #000000a6, 0 0 12px 1px color-mix(in srgb, var(--c) 75%, transparent);
  transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease, opacity .25s ease;
}
.point span { display: none; }
@media (min-width: 560px) { .point { --taille: 28px; } .point span { display: block; } }
.plan__cadre--zoom .point { --taille: 32px; }
.plan__cadre--zoom .point span { display: block; font-size: 10px; }
.point[data-statut="libre"] { animation: point-halo 2.6s ease-in-out infinite; }
@keyframes point-halo { 50% { box-shadow: 0 0 0 2px #000000a6, 0 0 20px 4px color-mix(in srgb, var(--c) 85%, transparent); } }
.point:hover, .point:focus-visible { transform: translate(-50%, -50%) scale(1.18); z-index: 3; outline: none; }
.point:focus-visible { box-shadow: 0 0 0 2px #000, 0 0 0 4px #fff, 0 0 16px 4px var(--c); }
.point[aria-pressed="true"] {
  z-index: 4; background: var(--c); color: #07040f; transform: translate(-50%, -50%) scale(1.3); animation: none;
  box-shadow: 0 0 0 2px #fff, 0 0 0 5px #000000b3, 0 0 28px 8px var(--c);
}
.point[aria-pressed="true"]::after {
  content: ""; position: absolute; inset: -8px; border-radius: 50%; border: 2px solid var(--c); pointer-events: none;
  animation: point-onde 1.6s ease-out infinite;
}
@keyframes point-onde { from { transform: scale(.8); opacity: 1; } to { transform: scale(1.9); opacity: 0; } }
.point[data-statut="reserve"], .point[data-statut="ferme"] {
  border-color: #5c566a; background: #16121e; color: #7d768c; cursor: not-allowed; box-shadow: 0 0 0 2px #000000b3;
}
.point[data-statut="reserve"]::before, .point[data-statut="ferme"]::before {
  content: ""; position: absolute; left: 18%; right: 18%; top: 50%; height: 2px; background: #8b8499; transform: rotate(-45deg);
}
.plan__salle[data-filtre="vip"] .point:not([data-type="vip"]),
.plan__salle[data-filtre="standard"] .point:not([data-type="standard"]),
.plan__salle[data-filtre="haute"] .point:not([data-type="haute"]),
.plan__salle[data-filtre="tables"] .point[data-type="vip"] { opacity: .3; animation: none; }
.plan__cote { display: grid; gap: var(--space-4); align-content: start; }
.plan__zoom { justify-self: start; }
.plan__fiche {
  padding: var(--space-4) var(--space-6); background: var(--fond-section);
  border: 1px solid var(--c, var(--trait)); box-shadow: 0 0 32px -12px var(--c, transparent);
  clip-path: polygon(var(--coupe-sm) 0, 100% 0, 100% calc(100% - var(--coupe-sm)), calc(100% - var(--coupe-sm)) 100%, 0 100%, 0 var(--coupe-sm));
}
.plan__invite { color: var(--encre-douce); font-size: 14px; }
.plan__fiche-type { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--c); }
.plan__fiche-nom { font-family: var(--font-affiche); font-weight: 900; text-transform: uppercase; font-size: 24px; line-height: 1.05; margin-top: 4px; }
.plan__fiche-zone { color: var(--encre-douce); font-size: 13px; margin-top: 4px; }
.plan__fiche-statut { margin-top: var(--space-3); font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--kripton-vert); }
.plan__fiche-statut[data-statut="choisi"] { color: var(--c); }
.plan__fiche-statut[data-statut="reserve"], .plan__fiche-statut[data-statut="ferme"] { color: #ff6b6b; }
.plan__conditions { display: grid; gap: 4px; margin-top: var(--space-3); }
.plan__conditions li { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.04em; padding-left: 16px; position: relative; }
.plan__conditions li::before { content: ""; position: absolute; left: 0; top: .55em; width: 6px; height: 6px; background: var(--c); transform: rotate(45deg); }
.plan__liste { display: grid; gap: var(--space-3); }
.plan__groupe-titre { display: flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--encre-douce); margin-bottom: 6px; }
.plan__groupe-titre i { width: 8px; height: 8px; border-radius: 50%; background: var(--c); box-shadow: 0 0 8px var(--c); }
.plan__puces { display: flex; flex-wrap: wrap; gap: 6px; }
.puce {
  min-width: 44px; min-height: 40px; padding: 0 10px; cursor: pointer; border: 1px solid color-mix(in srgb, var(--c) 60%, transparent);
  background: transparent; color: var(--encre); font-family: var(--font-mono); font-size: 12px; font-weight: 600;
}
.puce:hover { border-color: var(--c); }
.puce[aria-pressed="true"] { background: var(--c); color: #07040f; border-color: var(--c); box-shadow: 0 0 16px -2px var(--c); }
.puce[data-statut="reserve"], .puce[data-statut="ferme"] { border-color: var(--trait); color: #6f6880; text-decoration: line-through; cursor: not-allowed; }

/* Page soirée : le plan à gauche, les types d'emplacement à droite */
.plan-soiree { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
@media (min-width: 860px) { .plan-soiree { grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); align-items: start; } .plan-soiree__cote { position: sticky; top: 140px; } }
.plan-soiree .plan__cadre { max-width: 620px; }
.plan-soiree__cote { display: grid; gap: var(--space-4); align-content: start; }
.plan-soiree__type {
  display: grid; gap: var(--space-3); justify-items: start; padding: var(--space-4) var(--space-6);
  background: var(--fond-carte); border-left: 3px solid var(--c); box-shadow: -12px 0 32px -20px var(--c);
}
.plan-soiree__type .plan__groupe-titre { margin: 0; color: var(--encre); }
a.point { text-decoration: none; }

/* ---------- 18d. Choix des bouteilles (réservation) ---------- */
.bouteilles-liste { display: grid; }
.bt {
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: var(--space-3);
  padding: 10px 0; border-bottom: 1px dashed var(--trait);
}
.bt__nom { font-weight: 600; font-size: 15px; line-height: 1.3; }
.bt__nom small { font-weight: 400; font-size: 12px; color: var(--encre-douce); white-space: nowrap; }
.bt__prix { font-family: var(--font-mono); font-size: 14px; font-weight: 600; white-space: nowrap; }
.bt__qte { display: inline-flex; align-items: center; gap: 4px; }
.bt__qte button {
  width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--trait-fort); background: transparent; color: var(--encre);
  font-size: 18px; line-height: 1; cursor: pointer; display: grid; place-items: center;
}
.bt__qte button[data-plus] { border-color: var(--accent); color: var(--accent); }
.bt__qte button:hover:not(:disabled) { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.bt__qte button:disabled { opacity: .3; cursor: default; }
.bt__qte output { min-width: 22px; text-align: center; font-family: var(--font-mono); font-weight: 700; }
.bt--choisie .bt__nom { color: var(--accent); }
.panier {
  position: sticky; bottom: 10px; z-index: 5; display: grid; gap: 6px; margin-top: var(--space-4);
  padding: 12px 16px; background: #0b0812f5; border: 1px solid var(--accent);
  box-shadow: 0 0 0 1px #000, 0 12px 32px -8px #000, 0 0 24px -10px var(--accent);
}
.panier[data-ok="false"] { border-color: #ff6b6b; box-shadow: 0 0 0 1px #000, 0 12px 32px -8px #000, 0 0 24px -10px #ff6b6b; }
.panier__total { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-4); font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; }
.panier__total strong { font-family: var(--font-affiche); font-size: 20px; letter-spacing: 0; color: var(--accent); }
.panier__ligne { display: flex; justify-content: space-between; font-size: 13px; color: var(--encre-douce); }
.panier__conditions { display: flex; flex-wrap: wrap; gap: 4px 16px; font-family: var(--font-mono); font-size: 11.5px; }
.panier__conditions li[data-ok="true"] { color: var(--kripton-vert); }
.panier__conditions li[data-ok="false"] { color: #ff8a8a; }

/* ---------- 18e. Carte des bouteilles d'une soirée (façon carte du club) ---------- */
.carte-bouteilles { display: grid; gap: var(--space-8); }
@media (min-width: 760px) { .carte-bouteilles { display: block; columns: 2; column-gap: var(--space-12); } .carte-bouteilles__cat { break-inside: avoid; margin-bottom: var(--space-8); } }
.carte-bouteilles__cat h3 {
  font-family: var(--font-mono); font-size: 13px; font-weight: 700; letter-spacing: 0.32em; text-transform: uppercase;
  color: var(--kripton-vert); padding-bottom: 8px; margin-bottom: 6px; border-bottom: 1px solid var(--trait-fort);
}
.bouteille-ligne { display: flex; align-items: baseline; gap: 8px; padding: 6px 0; }
.bouteille-ligne__nom { font-weight: 700; font-size: 15px; }
.bouteille-ligne__nom small { font-weight: 400; font-size: 12px; color: var(--encre-douce); margin-left: 4px; }
.bouteille-ligne__points { flex: 1; min-width: 16px; border-bottom: 2px dotted #ffffff2e; transform: translateY(-4px); }
.bouteille-ligne__prix { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ---------- 19. Moins d'animations ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* =====================================================================
   PAGES VILLA ET TABLE
   ===================================================================== */

/* ---------- Haut de page Villa ---------- */
.vhero { position: relative; overflow: hidden; padding-block: var(--space-12) var(--space-16); background: var(--fond); }
.vhero::before { content: ""; position: absolute; right: -15%; top: -10%; width: 80%; height: 110%; pointer-events: none; background: radial-gradient(closest-side, #c98a3a3d, transparent); }
.vhero__grille { position: relative; display: grid; gap: var(--space-12); }
@media (min-width: 960px) { .vhero__grille { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); align-items: center; } .vhero { padding-block: var(--space-16) var(--space-24); } }
.vhero__titre { font-size: clamp(2.8rem, 12vw, 5.6rem); }
.vhero .appel { margin-top: var(--space-6); }
.vhero__carte { display: grid; gap: var(--space-6); padding: var(--space-6); background: var(--fond-carte); box-shadow: inset 0 0 0 1px var(--trait), 0 0 120px 10px #c98a3a22; }
@media (min-width: 960px) { .vhero__carte { padding: var(--space-8); } }
.vhero__carte .villa__horaires { margin-top: 0; max-width: none; }
.vhero__carte .villa__horaires span { font-size: clamp(26px, 6vw, 34px); }
.vhero__carte .villa__offre { margin-top: 0; }
.vhero__carte .villa__ancien { margin-top: 0; }

.bandeau--villa { background: var(--creme); color: #0a0907; font-family: var(--font-villa-infos); font-weight: 600; font-size: 13px; letter-spacing: 0.26em; }
.bandeau--villa .bandeau__piste span::after { content: "·"; font-size: 16px; }

/* Offre du bar */
.offres { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); margin-block: var(--space-8); }
@media (min-width: 760px) { .offres { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.offre { padding: var(--space-6) var(--space-4); background: var(--fond-carte); box-shadow: inset 0 0 0 1px var(--trait); text-align: center; }
.offre__nom { font-family: var(--font-villa); font-size: 20px; font-weight: 600; line-height: 1.15; }
/* Une case qui mène aux produits de la carte, plus bas */
.offre--lien { padding: 0; }
.offre__btn { display: grid; justify-items: center; gap: 6px; width: 100%; height: 100%; padding: var(--space-6) var(--space-4); border: 0; background: transparent; color: inherit; font: inherit; cursor: pointer; transition: background-color .25s ease, box-shadow .25s ease; }
.offre__btn:hover, .offre__btn:focus-visible { background: color-mix(in srgb, var(--accent) 7%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, #c98a3a 70%, transparent); }
.offre__voir { font-family: var(--font-villa-infos, var(--font-label)); font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: #c98a3a; opacity: .85; }
.sous-titre { font-family: var(--font-label); font-size: 12px; font-weight: 600; letter-spacing: var(--label-espace); text-transform: uppercase; color: var(--encre-douce); margin-bottom: var(--space-4); }

/* Billard */
.billard { display: grid; gap: var(--space-6); padding: var(--space-8) var(--space-6); background: var(--fond-carte); box-shadow: inset 0 0 0 1px var(--trait); position: relative; overflow: hidden; }
@media (min-width: 760px) { .billard { grid-template-columns: minmax(0, 1fr) auto; align-items: center; padding: var(--space-12); } }
.billard::after { content: ""; position: absolute; right: -60px; bottom: -60px; width: 220px; height: 220px; border-radius: 50%; border: 1px solid var(--trait-fort); box-shadow: 0 0 0 28px var(--fond-carte), 0 0 0 29px var(--trait); pointer-events: none; opacity: .6; }
.billard p { color: var(--encre-douce); margin-top: var(--space-3); position: relative; }
.billard .boutons { position: relative; z-index: 1; }

/* Infos en deux colonnes */
.info-grille { display: grid; gap: var(--space-8); margin-top: var(--space-8); }
@media (min-width: 860px) { .info-grille { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); align-items: start; } }

/* ---------- Haut de page Table ---------- */
.thero { position: relative; overflow: hidden; padding-block: var(--space-12) var(--space-16); background: var(--fond); }
.thero::before { content: ""; position: absolute; left: -20%; top: -30%; width: 90%; height: 120%; pointer-events: none; background: radial-gradient(closest-side, #efe6da14, transparent); }
.thero__grille { position: relative; display: grid; gap: var(--space-12); }
@media (min-width: 960px) { .thero__grille { grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); align-items: end; } .thero { padding-block: var(--space-16) var(--space-24); } }
.thero__titre { font-family: var(--font-texte); font-weight: 700; font-size: clamp(2.6rem, 11vw, 5.4rem); line-height: 0.98; letter-spacing: -0.03em; margin-top: var(--space-4); }
.thero__titre span { display: block; color: var(--encre-douce); font-weight: 300; }
.thero .lead { font-size: 17px; }
.thero .boutons { margin-top: var(--space-8); }
.carte-horaires { padding: var(--space-6); background: var(--fond-carte); }
.carte-horaires h2 { font-family: var(--font-label); font-size: 11px; font-weight: 600; letter-spacing: var(--label-espace); text-transform: uppercase; color: var(--encre-douce); margin-bottom: var(--space-4); }

/* Carte complète : un titre par rubrique */
.carte__rubrique + .carte__rubrique { margin-top: var(--space-6); }
.carte__titre { font-family: var(--font-titre); font-weight: var(--titre-graisse); font-size: 18px; padding-top: var(--space-4); padding-bottom: var(--space-2); border-bottom: 1px solid var(--trait-fort); }
[data-theme="villa"] .carte__titre { font-size: 22px; }
.allergenes { margin-top: var(--space-8); padding: var(--space-6); background: var(--fond-carte); max-width: 640px; display: grid; gap: var(--space-2); }
.allergenes p { color: var(--encre-douce); font-size: 14px; }

.vhero .boutons { margin-top: var(--space-8); }

/* =====================================================================
   ÉTAPE 2 : RÉSERVATIONS, SOIRÉE, GALERIE, PAGES LÉGALES
   ===================================================================== */

/* ---------- En-tête de page simple ---------- */
.page-tete { padding-block: var(--space-12) var(--space-8); position: relative; overflow: hidden; }
.page-tete::before { content: ""; position: absolute; right: -10%; top: -40%; width: 70%; height: 160%; pointer-events: none; background: radial-gradient(closest-side, #3a12c255, transparent); }
.page-tete .wrap { position: relative; }
.page-tete h1 { font-family: var(--font-titre); font-weight: var(--titre-graisse); text-transform: uppercase; font-size: clamp(2.4rem, 10vw, 5rem); line-height: 0.95; letter-spacing: -0.015em; margin-top: var(--space-3); }
.page-tete .lead { font-size: 17px; }

/* ---------- Formulaire de réservation ---------- */
.formulaire { display: grid; gap: var(--space-6); max-width: 820px; }
.etape { margin: 0; padding: var(--space-6); border: 0; background: var(--fond-carte); min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
@media (min-width: 720px) { .etape { padding: var(--space-8); } }
.etape legend { float: left; width: 100%; padding: 0; margin-bottom: var(--space-2); font-family: var(--font-affiche); font-weight: 800; font-size: 18px; text-transform: uppercase; letter-spacing: 0.02em; }
.etape legend span { color: var(--accent); margin-right: var(--space-2); }
.etape legend b { font-weight: inherit; }
.etape legend + * { clear: both; }
.choix-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: var(--space-2); }
.choix { position: relative; display: flex; flex-direction: column; gap: 2px; padding: var(--space-4); background: var(--fond-section); box-shadow: inset 0 0 0 1px var(--trait); cursor: pointer; }
.choix:hover { box-shadow: inset 0 0 0 1px var(--trait-fort); }
.choix input { position: absolute; opacity: 0; inset: 0; cursor: pointer; margin: 0; }
.choix strong { font-weight: 700; font-size: 15px; }
.choix small { color: var(--encre-douce); font-size: 12px; }
.choix:has(input:checked) { box-shadow: inset 0 0 0 2px var(--accent); background: color-mix(in srgb, var(--accent) 10%, var(--fond-section)); }
.choix:has(input:focus-visible) { box-shadow: var(--focus-ring); }
.choix:has(input:disabled) { opacity: .45; cursor: not-allowed; }
.choix__prix { font-family: var(--font-affiche); font-weight: 800; font-size: 18px; color: var(--or); margin-top: var(--space-2); font-variant-numeric: tabular-nums; }

.champs { display: grid; gap: var(--space-4); }
@media (min-width: 640px) { .champs--2 { grid-template-columns: 1fr 1fr; } }
.champ { display: grid; gap: 6px; min-width: 0; }
.champ label, .champ .champ__label, .champ__titre { font-size: 13px; font-weight: 600; }
.choix-ligne { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.choix--court { flex: 1 1 200px; }
/* Nombre de personnes d'un geste (réservation au restaurant) */
#resa-quand-personnes:not(:empty) { margin-top: var(--space-4); }
.nombres { display: grid; grid-template-columns: repeat(auto-fill, minmax(48px, 1fr)); gap: var(--space-2); }
.nombre { min-height: 48px; padding: 0 8px; font: inherit; font-size: 17px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--encre);
  background: var(--fond-section); border: 0; border-radius: var(--radius-sm); box-shadow: inset 0 0 0 1px var(--trait-fort); cursor: pointer; transition: background-color .2s, box-shadow .2s, transform .15s; }
.nombre:hover { box-shadow: inset 0 0 0 1px var(--encre); }
.nombre:active { transform: scale(.96); }
.nombre:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.nombre[aria-pressed="true"] { background: var(--accent); color: var(--on-accent); box-shadow: inset 0 0 0 1px var(--accent); }
.nombre--plus { grid-column: span 2; font-size: 14px; letter-spacing: .02em; }
.nombres + input { margin-top: var(--space-2); }
.cases { display: flex; flex-wrap: wrap; gap: var(--space-2); }

.champ .aide { font-size: 12px; color: var(--encre-douce); }
.champ input, .champ select, .champ textarea {
  width: 100%; min-height: 48px; padding: 12px 14px; font: inherit; font-size: 16px;
  color: var(--encre); background: var(--fond-section); border: 1px solid var(--trait-fort); border-radius: var(--radius-sm);
}
.champ textarea { min-height: 110px; resize: vertical; }
.champ input:focus-visible, .champ select:focus-visible, .champ textarea:focus-visible { outline: none; border-color: var(--accent); box-shadow: var(--focus-ring); }
.champ [aria-invalid="true"] { border-color: var(--feu); }
.erreur { color: #ff8a65; font-size: 13px; font-weight: 600; }
.case { display: flex; gap: var(--space-3); align-items: flex-start; font-size: 14px; color: var(--encre-douce); }
.case input { width: 22px; height: 22px; margin: 2px 0 0; accent-color: var(--accent); flex: none; }
.case a { color: var(--encre); }
.case.case--puce {
  display: inline-flex; flex-direction: row; align-items: center; gap: 8px; padding: 8px 14px; cursor: pointer;
  border: 1px solid var(--trait-fort); border-radius: var(--radius-full); color: var(--encre); font-size: 14px; font-weight: 500;
}
.champ .case.case--puce input { width: 18px; height: 18px; min-height: 0; margin: 0; padding: 0; border-radius: 4px; }
.case.case--puce:has(input:checked) { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent); }
.piege { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.info-encadre { padding: var(--space-4); background: var(--fond-section); box-shadow: inset 0 0 0 1px var(--trait); font-size: 14px; color: var(--encre-douce); }
.info-encadre strong { color: var(--encre); }
.resume-erreurs { padding: var(--space-4); background: #ff4d1214; box-shadow: inset 0 0 0 1px var(--feu); }
.resume-erreurs ul { list-style: disc; padding-left: 20px; margin-top: var(--space-2); font-size: 14px; }
.succes { padding: var(--space-8) var(--space-6); background: var(--fond-carte); box-shadow: inset 0 0 0 2px var(--accent); display: grid; gap: var(--space-4); max-width: 820px; }
.succes h2 { font-family: var(--font-affiche); font-weight: 900; font-size: clamp(1.6rem, 6vw, 2.4rem); text-transform: uppercase; line-height: 1; }
.succes p { color: var(--encre-douce); }
.succes dl { display: grid; grid-template-columns: auto 1fr; gap: 6px var(--space-4); margin: 0; font-size: 14px; }
.succes dt { color: var(--encre-douce); }
.succes dd { margin: 0; font-weight: 600; }
.note-apercu { font-size: 12px; color: var(--or); }

/* ---------- Page d'une soirée ---------- */
.s-hero { padding-block: var(--space-8) var(--space-16); position: relative; overflow: hidden; }
.s-hero::before { content: ""; position: absolute; inset: -20% -20% auto auto; width: 90%; height: 120%; pointer-events: none; background: radial-gradient(closest-side, color-mix(in srgb, var(--soiree, var(--uv)) 34%, transparent), transparent); }
.s-hero .wrap { position: relative; display: grid; gap: var(--space-8); }
@media (min-width: 900px) { .s-hero .wrap { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); align-items: start; } }
.s-hero--large .wrap { grid-template-columns: 1fr; }
.s-flyer { padding: 0; border: 0; background: var(--fond-carte); cursor: zoom-in; width: 100%; max-width: 460px; justify-self: center; }
.s-flyer img { width: 100%; height: auto; }
.s-hero--large .s-flyer { max-width: none; }
.s-infos { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; }
.s-infos .date-flyer { font-size: clamp(16px, 4vw, 22px); }
.s-titre { font-family: var(--font-titre); font-weight: var(--titre-graisse); text-transform: uppercase; font-size: clamp(2.6rem, 12vw, 6rem); line-height: 0.9; letter-spacing: -0.02em; overflow-wrap: anywhere; }
[data-theme="villa"] .s-titre { text-transform: none; letter-spacing: 0; }
.s-infos .artistes { font-size: 16px; }
.s-promesses { font-family: var(--font-label); font-size: 12px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; line-height: 1.8; }
.s-meta { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.s-partage { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; padding-top: var(--space-4); border-top: 1px solid var(--trait); }
.s-partage .info-label { width: 100%; }
.s-lien { flex: 1 1 220px; min-width: 0; min-height: 40px; padding: 8px 12px; font: inherit; font-size: 13px; color: var(--encre-douce); background: var(--fond-section); border: 1px solid var(--trait); border-radius: var(--radius-sm); }
.formules { display: grid; gap: var(--space-2); }
.formule { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-1) var(--space-4); padding: var(--space-4); background: var(--fond-carte); }
.formule__nom { font-weight: 700; }
.formule__contenu { grid-column: 1; font-size: 13px; color: var(--encre-douce); }
.formule__prix { grid-column: 2; grid-row: 1 / span 2; align-self: center; font-family: var(--font-affiche); font-weight: 800; color: var(--or); font-variant-numeric: tabular-nums; }

/* ---------- Galerie ---------- */
.galerie-filtres { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-6); }

/* ---------- Pages légales ---------- */
.texte-legal { max-width: 72ch; display: grid; gap: var(--space-4); }
.texte-legal h2 { font-family: var(--font-affiche); font-weight: 800; font-size: 18px; text-transform: uppercase; letter-spacing: 0.02em; margin-top: var(--space-8); }
.texte-legal p, .texte-legal li { color: var(--encre-douce); }
.texte-legal strong { color: var(--encre); }
.texte-legal ul { list-style: disc; padding-left: 22px; display: grid; gap: 6px; }
.texte-legal dl { margin: 0; display: grid; grid-template-columns: minmax(0, 200px) minmax(0, 1fr); gap: 8px var(--space-4); }
.texte-legal dt { color: var(--encre-douce); font-size: 14px; }
.texte-legal dd { margin: 0; font-weight: 600; }
@media (max-width: 560px) { .texte-legal dl { grid-template-columns: 1fr; } .texte-legal dd { margin-bottom: 8px; } }
.a-confirmer { background: #ffc21a26; color: var(--or); padding: 0 4px; font-weight: 600; }

/* ---------- Chaque lieu : les rubriques de son accueil (une page chacune) ---------- */
.espace-nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
@media (min-width: 860px) { .espace-nav { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } }
.espace-lien {
  position: relative; display: grid; align-content: end; gap: 4px; min-height: 132px; padding: 16px 16px 18px; text-decoration: none; color: var(--encre);
  background: var(--fond-carte); box-shadow: inset 0 0 0 1px var(--trait);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--coupe-sm)), calc(100% - var(--coupe-sm)) 100%, 0 100%);
  transition: box-shadow .2s ease, transform .2s ease;
}
@media (min-width: 860px) { .espace-lien { min-height: 168px; padding: 22px; } }
.espace-lien::after { content: "→"; position: absolute; top: 14px; right: 16px; color: var(--accent); font-size: 18px; transition: transform .2s ease; }
.espace-lien:hover, .espace-lien:focus-visible { box-shadow: inset 0 0 0 1px var(--accent); outline: none; }
.espace-lien:hover::after { transform: translateX(4px); }
.espace-lien__num { position: absolute; top: 16px; left: 16px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .2em; color: var(--accent); }
.espace-lien strong { font-family: var(--font-titre); font-weight: var(--titre-graisse); font-size: clamp(13px, 3.6vw, 26px); text-transform: uppercase; line-height: 1.05; overflow-wrap: normal; hyphens: manual; }
.espace-lien span:last-child { font-size: 13px; color: var(--encre-douce); }
/* La page en cours, dans le menu */
.entete__liens a[aria-current="page"] { color: var(--accent); }
.menu-mobile a[aria-current="page"] { color: var(--accent); }
/* Menu long (Kripton Club, 8 rubriques) : plus serré sur les écrans moyens, menu repliable en dessous */
@media (min-width: 1080px) and (max-width: 1439px) {
  .entete--long .entete__liens { gap: clamp(12px, 1.4vw, 22px); }
  .entete--long .entete__liens a { font-size: 11px; letter-spacing: .16em; }
}
@media (min-width: 1080px) and (max-width: 1239px) {
  .entete--long .entete__liens { display: none; }
  .entete--long .burger { display: inline-flex; }
}

/* =====================================================================
   ANIMATIONS : donner envie
   ===================================================================== */
/* Les blocs apparaissent en glissant pendant qu'on descend (classe posée par site.js) */
.reveal {
  opacity: 0; transform: translateY(28px) scale(.985); filter: blur(6px);
  transition: opacity .9s cubic-bezier(.2, .7, .2, 1), transform .9s cubic-bezier(.2, .7, .2, 1), filter .9s ease;
  transition-delay: calc(var(--i, 0) * 80ms);
}
.reveal.est-visible { opacity: 1; transform: none; filter: none; }

/* Les grands titres se dévoilent de bas en haut à l'arrivée sur la page */
@keyframes kr-titre { from { clip-path: inset(100% -10% -30% -10%); transform: translateY(40%); opacity: 0; } to { clip-path: inset(-30% -10% -30% -10%); transform: none; opacity: 1; } }
@keyframes kr-monte { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.hero__titre > span, .vhero__titre, .thero__titre, .page-tete h1, .villa__mono {
  animation: kr-titre 1.1s cubic-bezier(.2, .7, .2, 1) both;
}
.hero__titre > span:nth-child(2) { animation-delay: .12s; }
.hero .eyebrow, .page-tete .eyebrow, .vhero .eyebrow, .thero .eyebrow { animation: kr-monte .8s cubic-bezier(.2, .7, .2, 1) .05s both; }
.hero__accroche, .villa__phrase, .villa__texte, .thero .lead, .hero .chiffres, .hero .boutons, .vhero .boutons, .thero .boutons, .thero .appel {
  animation: kr-monte .9s cubic-bezier(.2, .7, .2, 1) .25s both;
}
.hero .boutons, .vhero .boutons, .thero .boutons { animation-delay: .38s; }
/* Arrivée par le rideau : les titres attendent qu'il se lève */
html.passage-arrivee .hero__titre > span, html.passage-arrivee .vhero__titre, html.passage-arrivee .thero__titre, html.passage-arrivee .page-tete h1 { animation-delay: .55s; }

/* Les tuiles des rubriques : elles se soulèvent au survol */
.espace-lien { transition: box-shadow .25s ease, transform .35s cubic-bezier(.2, .7, .2, 1), background-color .25s ease; }
.espace-lien:hover, .espace-lien:focus-visible { transform: translateY(-4px); background: color-mix(in srgb, var(--accent) 8%, var(--fond-carte)); }
.soiree-ligne { transition: transform .35s cubic-bezier(.2, .7, .2, 1), box-shadow .3s ease; }
.soiree-ligne:hover { transform: translateX(4px); }

/* Le menu : un trait vert qui se dessine sous le lien survolé, et sous la page en cours */
.entete__liens a { position: relative; }
.entete__liens a::after {
  content: ""; position: absolute; left: 0; right: var(--nav-espace, .2em); bottom: 2px; height: 1px; background: var(--accent);
  transform: scaleX(0); transform-origin: left; transition: transform .35s cubic-bezier(.2, .7, .2, 1);
}
.entete__liens a:hover::after, .entete__liens a[aria-current="page"]::after { transform: scaleX(1); }
/* Le menu du téléphone : les liens arrivent en cascade */
.menu-mobile:not([hidden]) li, .menu-mobile:not([hidden]) .menu-mobile__lieux { animation: kr-monte .5s cubic-bezier(.2, .7, .2, 1) both; }
.menu-mobile li:nth-child(2) { animation-delay: .04s; } .menu-mobile li:nth-child(3) { animation-delay: .08s; }
.menu-mobile li:nth-child(4) { animation-delay: .12s; } .menu-mobile li:nth-child(5) { animation-delay: .16s; }
.menu-mobile li:nth-child(6) { animation-delay: .2s; } .menu-mobile li:nth-child(7) { animation-delay: .24s; }
.menu-mobile li:nth-child(8) { animation-delay: .28s; } .menu-mobile .menu-mobile__lieux { animation-delay: .32s; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; filter: none; transition: none; }
  .hero__titre > span, .vhero__titre, .thero__titre, .page-tete h1, .villa__mono, .hero .eyebrow, .page-tete .eyebrow, .vhero .eyebrow, .thero .eyebrow,
  .hero__accroche, .villa__phrase, .villa__texte, .thero .lead, .hero .chiffres, .hero .boutons, .vhero .boutons, .thero .boutons, .thero .appel,
  .menu-mobile li, .menu-mobile .menu-mobile__lieux, .entree__diamant, .entree__marque, .entree__titre, .entree__devise, .entree .porte, .entree__pied { animation: none; }
  .espace-lien:hover, .soiree-ligne:hover { transform: none; }
}

/* ---------- Aftermovies : aperçu muet en boucle, format vertical (vidéo de téléphone) ---------- */
.video__boucle { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: brightness(.78); }
.video__son {
  position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); padding: 6px 12px; white-space: nowrap;
  font-family: var(--font-mono); font-size: 10px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: #fff; background: #0009;
}
.video--grande figcaption .eyebrow { width: 100%; }
.video--grande figcaption .lien-fleche { margin-left: auto; }
.video--verticale .video__lecture, .video--verticale .video__cadre {
  aspect-ratio: 9 / 16; width: auto; height: min(78svh, 760px, calc((100vw - 2 * var(--gouttiere)) * 1.7778)); margin-inline: auto;
}
.video--verticale .video__lecteur { object-fit: cover; }
@media (min-width: 860px) {
  .video--grande.video--verticale { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-12); align-items: end; }
  .video--grande.video--verticale .video__lecture, .video--grande.video--verticale .video__cadre { margin: 0; }
  .video--grande.video--verticale figcaption { display: grid; gap: var(--space-3); justify-items: start; padding-bottom: var(--space-8); }
  .video--grande.video--verticale figcaption strong { font-size: clamp(2rem, 4vw, 3.4rem); line-height: 1; }
  .video--grande.video--verticale figcaption .lien-fleche { margin: var(--space-4) 0 0; }
}
.videos .video--verticale .video__lecture { width: 100%; height: auto; }
/* Tous les aftermovies dans la même mise en scène, l'un sous l'autre, en alternant les côtés */
.aftermovies-liste { display: grid; gap: clamp(56px, 10vw, 128px); }
/* Un aftermovie à l'horizontale : la même légende qu'à la verticale (surtitre, grand titre, date, artistes) */
.video--grande figcaption { display: grid; gap: var(--space-3); justify-items: start; margin-top: var(--space-6); }
.video--grande figcaption strong { font-size: clamp(1.8rem, 4.4vw, 3.2rem); line-height: 1; }
.video--grande figcaption .lien-fleche { margin: var(--space-2) 0 0; }
@media (min-width: 860px) { .video--grande.video--inverse:not(.video--verticale) figcaption { justify-items: end; text-align: right; } }
.video__artistes { margin: 0; width: 100%; }
@media (min-width: 860px) {
  .video--grande.video--verticale.video--inverse { grid-template-columns: minmax(0, 1fr) auto; }
  .video--grande.video--verticale.video--inverse .video__lecture, .video--grande.video--verticale.video--inverse .video__cadre { order: 2; }
  .video--grande.video--verticale.video--inverse figcaption { justify-items: end; text-align: right; }
  .video--grande.video--verticale figcaption .video__artistes { font-size: 15px; }
}

/* =====================================================================
   L'ENTRÉE DU SITE : écran presque noir, sans menu, trois petits carrés au centre
   Arrivée : le diamant s'allume, les carrés basculent en place l'un après l'autre.
   Survol : le carré s'incline vers la souris, son contour lumineux tourne.
   Choix : le carré s'agrandit jusqu'à remplir l'écran (site.js), puis le lieu s'ouvre.
   ===================================================================== */
@property --kr-angle { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.page-entree { background: #050309; }
.entree {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: 100svh; display: grid; grid-template-rows: auto minmax(0, 1fr) auto;
  background: radial-gradient(60% 45% at 50% 42%, #1b1030 0%, transparent 70%), #050309;
}
/* Poussière de lumière qui dérive très lentement derrière les carrés */
.entree::before {
  content: ""; position: absolute; inset: -20%; z-index: -1; pointer-events: none; opacity: .5;
  background:
    radial-gradient(2px 2px at 20% 30%, #8cf60c80, transparent 60%), radial-gradient(1.5px 1.5px at 70% 20%, #ffffff60, transparent 60%),
    radial-gradient(2px 2px at 80% 70%, #c98a3a80, transparent 60%), radial-gradient(1.5px 1.5px at 35% 80%, #ffffff50, transparent 60%),
    radial-gradient(1px 1px at 55% 55%, #1cf48f70, transparent 60%), radial-gradient(1.5px 1.5px at 10% 60%, #ffffff40, transparent 60%);
  background-size: 420px 420px; animation: kr-poussiere 60s linear infinite;
}
@keyframes kr-poussiere { to { transform: translate3d(-420px, -210px, 0); } }

.entree__tete { display: grid; justify-items: center; gap: 10px; padding: calc(env(safe-area-inset-top, 0px) + 28px) var(--gouttiere) 6px; text-align: center; }
.entree__diamant { width: 62px; height: auto; margin-bottom: 4px; }
.entree__marque { font-family: var(--font-mono); font-size: 11px; letter-spacing: .36em; text-transform: uppercase; color: #ffffff8c; }
.entree__titre { font-family: var(--font-mono); font-size: clamp(17px, 4.8vw, 20px); font-weight: 700; line-height: 1.35; letter-spacing: .2em; text-transform: uppercase; color: var(--encre); text-wrap: balance; text-shadow: 0 0 24px #8cf60c26; }
.entree__devise { font-size: 16px; color: #ffffff8c; max-width: 34ch; text-wrap: balance; }
/* L'en-tête et les trois carrés forment un seul bloc, au milieu de l'écran (plus de grand vide entre eux) */
.entree { grid-template-rows: minmax(0, .8fr) auto auto minmax(0, 1fr) auto; }
.entree__tete { grid-row: 2; }
.entree__lieux { grid-row: 3; }
.entree__pied { grid-row: 5; }
.entree__devise:empty { display: none; }

/* Les trois carrés : deux puis un sur téléphone, trois en ligne sur ordinateur */
.entree__lieux {
  --cote: min(43vw, 30svh, 210px);
  display: grid; grid-template-columns: repeat(2, var(--cote)); gap: 14px;
  justify-content: center; align-content: center; padding: 18px var(--gouttiere) 28px; perspective: 900px;
}
.entree__lieux .porte:nth-child(3) { grid-column: 1 / -1; justify-self: center; width: var(--cote); }
@media (min-width: 760px) {
  .entree__lieux { --cote: clamp(210px, 19vw, 280px); grid-template-columns: repeat(3, var(--cote)); gap: clamp(18px, 2.4vw, 34px); }
  .entree__lieux .porte:nth-child(3) { grid-column: auto; }
}
.entree .porte {
  --rx: 0deg; --ry: 0deg;
  position: relative; isolation: isolate; aspect-ratio: 1 / 1; width: 100%; min-height: 0; padding: 14px;
  display: grid; place-items: center; text-align: center; overflow: visible; clip-path: none;
  background: #0b0811; border-radius: 3px; text-decoration: none; color: var(--encre);
  transform: perspective(900px) rotateX(var(--rx)) rotateY(var(--ry)); transform-style: preserve-3d;
  transition: transform .45s cubic-bezier(.2, .7, .2, 1), opacity .5s ease, filter .5s ease;
  animation: kr-carre-arrive 1.1s cubic-bezier(.2, .8, .2, 1) backwards;
}
.entree .porte:nth-child(1) { animation-delay: .45s; }
.entree .porte:nth-child(2) { animation-delay: .6s; }
.entree .porte:nth-child(3) { animation-delay: .75s; }
@keyframes kr-carre-arrive {
  0% { opacity: 0; transform: perspective(900px) translateY(40px) rotateX(38deg) scale(.86); filter: blur(8px); }
  60% { opacity: 1; filter: blur(0); }
  100% { opacity: 1; transform: perspective(900px) rotateX(0) rotateY(0) scale(1); filter: blur(0); }
}
/* Contour lumineux qui tourne (couleur du lieu) */
.entree .porte::before {
  content: ""; position: absolute; inset: -1px; z-index: -1; border-radius: 4px; pointer-events: none; padding: 1px;
  background: conic-gradient(from var(--kr-angle), transparent 0 62%, var(--accent) 78%, transparent 92%), linear-gradient(#ffffff1f, #ffffff1f);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
  animation: kr-tour 6s linear infinite; opacity: .55; transition: opacity .4s ease; box-shadow: none;
}
.entree .porte:nth-child(2)::before { animation-delay: -2s; }
.entree .porte:nth-child(3)::before { animation-delay: -4s; }
@keyframes kr-tour { to { --kr-angle: 360deg; } }
/* Halo de la couleur du lieu sous le carré */
.entree .porte::after {
  content: ""; position: absolute; inset: 12% 8% -10%; z-index: -2; pointer-events: none; border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--accent) 45%, transparent), transparent);
  filter: blur(26px); opacity: .18; transition: opacity .5s ease;
}
.entree .porte__img { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; object-fit: cover; border-radius: 3px; opacity: .3; filter: grayscale(.3) brightness(.7); transition: opacity .5s ease, filter .5s ease, transform 1.2s cubic-bezier(.2, .7, .2, 1); }
.entree .porte--sans-photo { background: radial-gradient(90% 70% at 30% 20%, #3a2a1f, transparent 70%), #120e0b; }
.entree .porte__filigrane { position: absolute; inset: auto 0 18% 0; z-index: -1; text-align: center; font-size: clamp(2rem, 9vw, 3.4rem); color: #ffffff0d; transform: none; }
.entree .porte__bas { display: grid; justify-items: center; gap: 6px; transform: translateZ(30px); text-shadow: 0 2px 14px #000; }
.entree .porte__type { font-size: 9px; letter-spacing: .24em; color: var(--accent); }
.entree .porte__nom { font-size: clamp(1.05rem, 5.2vw, 1.55rem); line-height: 1.02; text-wrap: balance; }
.entree .porte[data-theme="villa"] .porte__nom { font-size: clamp(1.2rem, 5.8vw, 1.8rem); }
.entree .porte__info { font-size: 8.5px; letter-spacing: .12em; color: #ffffff8c; line-height: 1.5; }
.entree .porte__entrer {
  position: absolute; right: 10px; bottom: 10px; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
  font-size: 0; color: var(--on-accent); background: var(--accent); transform: translateZ(40px) scale(.9); opacity: .9; transition: transform .35s ease, opacity .35s ease;
}
.entree .porte__entrer span { font-size: 14px; }
@media (max-width: 759px) { .entree .porte__entrer { display: none; } }
@media (min-width: 760px) {
  .entree__tete { padding-top: clamp(32px, 6vh, 64px); gap: 12px; }
  .entree__diamant { width: 88px; }
  .entree__marque { font-size: 13px; letter-spacing: .42em; }
  .entree__titre { font-size: clamp(24px, 2.4vw, 34px); letter-spacing: .24em; }
  .entree__devise { font-size: 19px; max-width: none; }
  .entree .porte { padding: 22px; }
  .entree .porte__nom { font-size: clamp(1.4rem, 2vw, 2rem); }
  .entree .porte[data-theme="villa"] .porte__nom { font-size: clamp(1.6rem, 2.3vw, 2.3rem); }
  .entree .porte__type { font-size: 10px; }
  .entree .porte__info { font-size: 10px; }
  .entree .porte__entrer {
    left: 50%; right: auto; bottom: -18px; width: auto; height: 36px; padding: 0 18px; border-radius: 0; gap: 8px; display: inline-flex; align-items: center;
    font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: .24em; text-transform: uppercase;
    transform: translate(-50%, 8px) translateZ(40px); opacity: 0;
  }
  .entree .porte__entrer span { font-size: 13px; }
}
/* Survol et clavier : le carré se soulève, s'incline, s'allume */
.entree .porte:hover, .entree .porte:focus-visible { --lift: 1; }
.entree .porte:hover, .entree .porte:focus-visible { transform: perspective(900px) rotateX(var(--rx)) rotateY(var(--ry)) translateY(-8px) scale(1.04); }
.entree .porte:hover::before, .entree .porte:focus-visible::before { opacity: 1; animation-duration: 2.4s; }
.entree .porte:hover::after, .entree .porte:focus-visible::after { opacity: .55; }
.entree .porte:hover .porte__img, .entree .porte:focus-visible .porte__img { opacity: .7; filter: none; transform: scale(1.08); }
@media (min-width: 760px) {
  .entree .porte:hover .porte__entrer, .entree .porte:focus-visible .porte__entrer { opacity: 1; transform: translate(-50%, 0) translateZ(40px); }
}
.entree .porte:focus-visible { outline: 2px solid var(--accent); outline-offset: 6px; }
.entree__lieux:hover .porte:not(:hover) { opacity: .55; filter: saturate(.6); }

/* Arrivée de l'en-tête de l'entrée */
@keyframes kr-lueur { 0%, 100% { filter: drop-shadow(0 0 12px #1cf48f40); } 50% { filter: drop-shadow(0 0 28px #1cf48f99); } }
@keyframes kr-diamant { 0% { opacity: 0; transform: translateY(-14px) scale(.6) rotate(-12deg); } 60% { opacity: 1; } 100% { opacity: 1; transform: none; } }
.entree__diamant { animation: kr-diamant 1s cubic-bezier(.2, .8, .2, 1) backwards, kr-lueur 4s ease-in-out 1.2s infinite; }
.entree__marque { animation: kr-monte .8s cubic-bezier(.2, .7, .2, 1) .15s backwards; }
.entree__titre { animation: kr-lettres 1.2s cubic-bezier(.2, .7, .2, 1) .25s backwards; }
@keyframes kr-lettres { from { opacity: 0; letter-spacing: .9em; filter: blur(6px); } to { opacity: 1; filter: none; } }
.entree__devise { animation: kr-monte .8s cubic-bezier(.2, .7, .2, 1) .35s backwards; }
.entree__pied { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 18px; padding: 14px var(--gouttiere) calc(env(safe-area-inset-bottom, 0px) + 16px); font-size: 12px; color: #ffffff73; text-align: center; animation: kr-monte .8s ease 1.1s backwards; }
.entree__pied a { color: #ffffff8c; }

/* Le carré choisi grandit jusqu'à remplir l'écran (clone posé par site.js) */
.entree-zoom {
  position: fixed; z-index: 3000; margin: 0; border-radius: 3px; overflow: hidden; pointer-events: none;
  background: #0b0811 center / cover no-repeat;
  transition: top .7s cubic-bezier(.76, 0, .24, 1), left .7s cubic-bezier(.76, 0, .24, 1), width .7s cubic-bezier(.76, 0, .24, 1), height .7s cubic-bezier(.76, 0, .24, 1), border-radius .7s ease;
}
.entree-zoom[data-theme="table"] { background-color: #f2e8d7; }
.entree-zoom[data-theme="villa"] { background-color: #0a0907; }
.entree-zoom::after { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 60% at 50% 50%, transparent, #000000b3); }
.entree-zoom.est-plein { top: 0 !important; left: 0 !important; width: 100vw !important; height: 100vh !important; border-radius: 0; }
.entree__lieux--choix .porte:not(.est-choisie) { opacity: 0; transform: perspective(900px) translateY(20px) scale(.9); transition: opacity .4s ease, transform .5s ease; }
.entree--sortie .entree__tete, .entree--sortie .entree__pied { opacity: 0; transition: opacity .35s ease; }

@media (prefers-reduced-motion: reduce) {
  .entree::before, .entree .porte, .entree .porte::before, .entree__diamant, .entree__marque, .entree__titre, .entree__devise, .entree__pied { animation: none; }
  .entree .porte { transition: none; }
}

/* =====================================================================
   BLOCS AJOUTÉS DEPUIS L'ADMIN (titre, texte, photo, bouton)
   ===================================================================== */
.blocs-zone:empty { display: none; }
.bloc--alt { background: var(--fond-section); }
.bloc--accent { background: radial-gradient(120% 140% at 0% 0%, color-mix(in srgb, var(--accent) 18%, transparent) 0%, transparent 60%), var(--fond-section); }
.bloc__grille { display: grid; gap: var(--space-8); align-items: center; }
@media (min-width: 860px) {
  .bloc--image-gauche .bloc__grille, .bloc--image-droite .bloc__grille { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-12); }
}
.bloc__image { margin: 0; overflow: hidden; border-radius: var(--radius-sm); box-shadow: 0 0 0 1px var(--trait), 0 30px 60px -30px #000c; }
.bloc__image img { display: block; width: 100%; height: auto; transition: transform 1.2s cubic-bezier(.2, .7, .2, 1); }
.bloc__image:hover img { transform: scale(1.03); }
.bloc--image-pleine .bloc__image img { max-height: 72vh; object-fit: cover; }
.bloc__texte { display: grid; gap: var(--space-4); justify-items: start; max-width: 68ch; }
.bloc__corps { display: grid; gap: var(--space-3); color: var(--encre-douce); font-size: clamp(16px, 1.5vw, 18px); line-height: 1.65; }
.bloc__corps p { margin: 0; }
.bloc .boutons { margin-top: var(--space-2); }
@media (prefers-reduced-motion: reduce) { .bloc__image img { transition: none; } .bloc__image:hover img { transform: none; } }

/* =====================================================================
   KRIPTON CLUB : L'ARRIVÉE (la salle en fond, une punchline)
   ===================================================================== */
.hero--vivant { isolation: isolate; }
.hero--vivant::before, .hero--vivant::after { z-index: 1; }
.hero--vivant .wrap { z-index: 2; }
.hero__fond { position: absolute; inset: 0; z-index: 0; overflow: hidden; background: var(--fond); }
.hero__fond img, .hero__fond video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 30%; filter: saturate(1.2) contrast(1.05); }
.hero__fond img { animation: kr-respire 22s ease-in-out infinite alternate; }
.hero__fond video { opacity: 0; transition: opacity 1.4s ease; }
.hero__fond--video video { opacity: 1; }
.hero__fond--video img { opacity: 0; transition: opacity 1.4s ease; }
.hero__fond::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--fond) 55%, transparent) 0%, color-mix(in srgb, var(--fond) 78%, transparent) 40%, color-mix(in srgb, var(--fond) 92%, transparent) 70%, var(--fond) 100%);
}
@media (min-width: 1000px) {
  .hero__fond::after {
    background:
      linear-gradient(90deg, var(--fond) 0%, color-mix(in srgb, var(--fond) 86%, transparent) 34%, color-mix(in srgb, var(--fond) 45%, transparent) 68%, color-mix(in srgb, var(--fond) 65%, transparent) 100%),
      linear-gradient(0deg, var(--fond) 0%, transparent 30%);
  }
}
@keyframes kr-respire { from { transform: scale(1.04); } to { transform: scale(1.14) translate(-1.5%, -1%); } }
.hero__punch {
  margin-top: var(--space-6); font-family: var(--font-affiche); font-weight: 800; text-transform: uppercase;
  font-size: clamp(1.35rem, 5.6vw, 2.3rem); line-height: 1.02; letter-spacing: -0.01em;
}
.hero__punch .accent { color: var(--accent); text-shadow: 0 0 24px color-mix(in srgb, var(--accent) 55%, transparent); }
.hero--vivant .hero__accroche { color: color-mix(in srgb, var(--encre) 82%, transparent); margin-top: var(--space-4); }
.hero--vivant .chiffres { border-top-color: #ffffff26; }
.hero__punch { animation: kr-monte .8s cubic-bezier(.2, .7, .2, 1) .2s both; }
@media (prefers-reduced-motion: reduce) { .hero__fond img { animation: none; } .hero__punch { animation: none; } }

/* =====================================================================
   LA VILLA SUKKA : PLUS DE VIBE, PLUS SIMPLE
   ===================================================================== */
.vhero--vivant { min-height: min(88svh, 820px); display: grid; align-items: center; isolation: isolate; }
.vhero--vivant::before { z-index: 0; }
.vhero__fond { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none;
  background: radial-gradient(70% 55% at 50% 0%, #2a1f12, transparent 70%), radial-gradient(60% 50% at 50% 100%, #1d140a, transparent 70%), var(--fond); }
.vhero__fond--photo { background-size: cover; background-position: center; }
.vhero__fond--photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, #0a0907b3, #0a0907e6 60%, #0a0907); }
/* Lumières chaudes qui respirent, comme des bougies au bar */
.vhero__fond i { position: absolute; z-index: 1; width: 46vmax; height: 46vmax; border-radius: 50%; filter: blur(30px); opacity: .55; mix-blend-mode: screen;
  background: radial-gradient(closest-side, #c98a3a66, transparent); animation: kr-bougie 7s ease-in-out infinite alternate; }
.vhero__fond i:nth-child(1) { left: -12vmax; top: -10vmax; }
.vhero__fond i:nth-child(2) { right: -14vmax; top: 10%; background: radial-gradient(closest-side, #f1e1bc40, transparent); animation-duration: 9s; animation-delay: -3s; }
.vhero__fond i:nth-child(3) { left: 30%; bottom: -24vmax; background: radial-gradient(closest-side, #8a4b1f55, transparent); animation-duration: 11s; animation-delay: -6s; }
@keyframes kr-bougie { 0% { transform: translate(0, 0) scale(1); opacity: .45; } 40% { opacity: .65; } 100% { transform: translate(3vmax, 2vmax) scale(1.12); opacity: .5; } }
.vhero__simple { position: relative; z-index: 2; display: grid; justify-items: center; text-align: center; }
.vhero__simple .villa__mono { width: 120px; margin-bottom: var(--space-6); filter: drop-shadow(0 0 30px #c98a3a55); }
.vhero__simple .eyebrow::before { display: none; }
.vhero__simple .villa__titre { margin-top: var(--space-3); }
.vhero__simple .villa__phrase { margin-top: var(--space-3); }
.vhero__ouvert { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 4px 10px; margin-top: var(--space-6);
  font-family: var(--font-villa-infos); font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--encre-douce); }
.vhero__ouvert b { font-family: var(--font-villa); font-size: 20px; letter-spacing: .02em; color: var(--encre); font-weight: 600; text-transform: none; }
.vhero__ouvert i { font-style: normal; color: var(--trait-fort); }
.vhero__simple .boutons { justify-content: center; margin-top: var(--space-8); }
.vhero__simple .villa__ancien { margin-top: var(--space-6); }
@media (prefers-reduced-motion: reduce) { .vhero__fond i { animation: none; } }

.villa-esprit__grille { display: grid; gap: var(--space-8); align-items: center; }
@media (min-width: 900px) { .villa-esprit__grille { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-16); } }
.villa-esprit .villa__texte { font-size: 17px; }
.villa-esprit__liste { counter-reset: esprit; display: grid; }
.villa-esprit__liste li { counter-increment: esprit; display: flex; align-items: baseline; gap: var(--space-4); padding: var(--space-4) 0; border-bottom: 1px solid var(--trait);
  font-family: var(--font-villa); font-size: clamp(1.4rem, 5vw, 2rem); line-height: 1.1; transition: padding .3s ease, color .3s ease; }
.villa-esprit__liste li::before { content: counter(esprit, decimal-leading-zero); font-family: var(--font-villa-infos); font-size: 11px; letter-spacing: .2em; color: var(--ambre); }
.villa-esprit__liste li:hover { padding-left: var(--space-2); color: var(--or-pale); }
.billard__boules { position: relative; width: 140px; height: 90px; justify-self: center; }
.billard__boules i { position: absolute; width: 46px; height: 46px; border-radius: 50%; box-shadow: inset -6px -8px 14px #0008, 0 10px 20px -8px #000; }
.billard__boules i:nth-child(1) { left: 0; top: 30px; background: radial-gradient(circle at 35% 30%, #fff 0 6%, #c62b2b 16% 100%); }
.billard__boules i:nth-child(2) { left: 46px; top: 0; background: radial-gradient(circle at 35% 30%, #fff 0 6%, #1d1d1d 16% 100%); }
.billard__boules i:nth-child(3) { left: 92px; top: 34px; background: radial-gradient(circle at 35% 30%, #fff 0 6%, #e9c33a 16% 100%); }
.villa-portes__grille { display: grid; gap: var(--space-4); }
@media (min-width: 760px) { .villa-portes__grille { grid-template-columns: 1fr 1fr; } }
.villa-porte { position: relative; display: grid; gap: var(--space-3); padding: var(--space-8) var(--space-6); text-decoration: none; color: var(--encre);
  background: linear-gradient(160deg, #1d1912, #120f0a); box-shadow: inset 0 0 0 1px var(--trait); overflow: hidden; transition: box-shadow .3s ease, transform .3s ease; }
.villa-porte::after { content: ""; position: absolute; right: -40px; top: -40px; width: 180px; height: 180px; border-radius: 50%; background: radial-gradient(closest-side, #c98a3a40, transparent); transition: transform .5s ease; }
.villa-porte:hover { box-shadow: inset 0 0 0 1px var(--ambre); transform: translateY(-3px); }
.villa-porte:hover::after { transform: scale(1.5); }
.villa-porte strong { font-family: var(--font-villa); font-weight: 500; font-size: clamp(1.8rem, 6vw, 2.6rem); line-height: 1.05; }
.villa-porte > span:not(.eyebrow):not(.villa-porte__fleche) { color: var(--encre-douce); max-width: 34ch; }
.villa-porte__fleche { position: absolute; right: var(--space-6); bottom: var(--space-6); font-size: 22px; color: var(--ambre); transition: transform .3s ease; }
.villa-porte:hover .villa-porte__fleche { transform: translateX(4px); }
.villa-portes__acces { margin-top: var(--space-6); }

/* =====================================================================
   LA TABLE DU KRIPTON : UN SITE DE RESTAURANT
   Crème et ivoire, Lora pour les titres, Poppins pour le texte,
   terracotta et or ; boutons arrondis, photos en arche, carte classique.
   ===================================================================== */
[data-theme="table"] { color-scheme: light; }
body[data-theme="table"] { background: var(--fond); }
[data-theme="table"] .btn { clip-path: none; border-radius: 999px; text-transform: none; letter-spacing: .02em; font-size: 14px; font-weight: 500; padding: 0 26px; }
[data-theme="table"] .btn:focus-visible { clip-path: none; }
[data-theme="table"] .btn--contour { --btn-fond: transparent; --btn-encre: var(--encre); box-shadow: inset 0 0 0 1.5px currentColor; }
[data-theme="table"] .btn--contour::before { display: none; }
[data-theme="table"] .btn--contour:hover { --btn-fond: var(--encre); --btn-encre: var(--fond); }
[data-theme="table"] .btn--petit { font-size: 13px; padding: 0 18px; }
[data-theme="table"] .eyebrow::before { background: var(--or-table); }
.entete[data-theme="table"] { background: color-mix(in srgb, #f7f1e6 90%, transparent); }
.entete[data-theme="table"] .logo-table { font-family: "Lora", Georgia, serif; font-weight: 600; font-size: 20px; letter-spacing: 0; color: var(--encre); text-decoration: none; }
.entete[data-theme="table"] .entete__liens a { font-size: 14px; text-transform: none; }
.entete[data-theme="table"] .menu-mobile a { font-family: "Lora", Georgia, serif; }
/* Le pied de page reste sombre sous La Table : le logo du Kripton y garde son éclat */
[data-theme="table"] .pied { --fond: #1f1813; --fond-section: #2a211a; --fond-carte: #2a211a; --trait: #3d3127; --trait-fort: #8a7660; --encre: #f7f1e6; --encre-douce: #c8b9a5; --accent: #e0a26a; --on-accent: #1f1813; background: var(--fond); color: var(--encre); }
[data-theme="table"] .pied .btn--contour { --btn-encre: var(--encre); }
/* Ailleurs sur fond sombre (l'entrée, le menu d'un autre lieu, les horaires du club) : La Table en version claire sur sombre */
.entree .porte[data-theme="table"], .menu-mobile__lieux a[data-theme="table"] { --encre: #f7f1e6; --accent: #e0a26a; --on-accent: #1f1813; }
body:not([data-theme="table"]) .horaires__univers[data-theme="table"] { --fond-carte: #f7f1e6; --encre: #2a211a; --encre-douce: #6b5c4d; }

[data-theme="table"] .page-tete::before { background: radial-gradient(closest-side, #b8893a26, transparent); }
[data-theme="table"] .page-tete h1 { text-transform: none; letter-spacing: -0.01em; font-size: clamp(2.4rem, 9vw, 4.4rem); }
[data-theme="table"] .h-section { font-size: clamp(2rem, 7vw, 3.4rem); }

.tr-surtitre { display: inline-flex; align-items: center; gap: 12px; font-family: var(--font-label); font-size: 12px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--accent); }
.tr-surtitre::before { content: ""; width: 26px; height: 1px; background: var(--or-table); }
.tr-titre { font-family: "Lora", Georgia, serif; font-weight: 600; font-size: clamp(2.8rem, 12vw, 5.6rem); line-height: .98; letter-spacing: -0.02em; margin-top: var(--space-4); }
.tr-titre em, .tr-h2 em { font-style: italic; font-weight: 500; color: var(--accent); }
.tr-h2 { font-family: "Lora", Georgia, serif; font-weight: 600; font-size: clamp(2rem, 7vw, 3.2rem); line-height: 1.05; letter-spacing: -0.01em; margin-top: var(--space-3); }
.tr-texte { color: var(--encre-douce); font-size: 17px; line-height: 1.7; max-width: 58ch; }

/* Haut de page : le texte, et la photo dans une arche */
.tr-hero { position: relative; overflow: hidden; padding-block: var(--space-8) var(--space-16); }
.tr-hero::before { content: ""; position: absolute; inset: auto -20% -40% auto; width: 70%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(closest-side, #b8893a22, transparent); pointer-events: none; }
.tr-hero__grille { position: relative; display: grid; gap: var(--space-12); align-items: center; }
@media (min-width: 960px) { .tr-hero__grille { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: var(--space-16); } .tr-hero { padding-block: var(--space-16) var(--space-24); } }
.tr-accroche { font-family: "Lora", Georgia, serif; font-style: italic; font-size: clamp(1.2rem, 4.4vw, 1.6rem); line-height: 1.4; color: var(--encre-douce); margin-top: var(--space-6); max-width: 30ch; }
.tr-hero .boutons { margin-top: var(--space-8); }
.tr-ouvert { display: flex; align-items: center; gap: 10px; margin-top: var(--space-6); font-size: 14px; font-weight: 500; }
.tr-ouvert:empty { display: none; }
.tr-ouvert__point { width: 9px; height: 9px; border-radius: 50%; background: #4f8a3a; box-shadow: 0 0 0 4px #4f8a3a26; animation: kr-pouls 2.4s ease-in-out infinite; }
.tr-ouvert__point--ferme { background: var(--trait-fort); box-shadow: none; animation: none; }
@keyframes kr-pouls { 50% { box-shadow: 0 0 0 7px #4f8a3a14; } }
.tr-hero__photo { margin: 0; position: relative; aspect-ratio: 4 / 5; max-width: 520px; width: 100%; justify-self: center; border-radius: 999px 999px 18px 18px; overflow: hidden;
  box-shadow: 0 40px 80px -40px #5a3a1f80, 0 0 0 10px var(--fond), 0 0 0 11px var(--trait); }
.tr-hero__photo img { width: 100%; height: 100%; object-fit: cover; animation: kr-respire 24s ease-in-out infinite alternate; }
.tr-hero__vide { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; gap: 4px;
  background: radial-gradient(80% 60% at 50% 30%, #e7a96f, transparent 70%), radial-gradient(70% 60% at 50% 100%, #8f3c1c, transparent 75%), linear-gradient(180deg, #c9673a, #9d4524); color: #fff8ee; }
.tr-hero__vide span { font-family: "Lora", Georgia, serif; font-style: italic; font-size: clamp(3rem, 12vw, 5rem); line-height: 1; }
.tr-hero__vide small { font-size: 12px; letter-spacing: .3em; text-transform: uppercase; }
.tr-hero__vide::after { content: ""; position: absolute; inset: 14px; border-radius: 999px 999px 10px 10px; border: 1px solid #fff8ee66; }

/* L'essentiel : midi, soir, téléphone */
.tr-bande { background: var(--encre); color: var(--fond); }
.tr-bande__grille { display: grid; gap: var(--space-6); padding-block: var(--space-8); }
@media (min-width: 760px) { .tr-bande__grille { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.tr-bande__item { display: grid; gap: 4px; }
.tr-bande__label { font-size: 11px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: #e0a26a; }
.tr-bande__valeur { font-family: "Lora", Georgia, serif; font-size: 19px; color: #f7f1e6; text-decoration: none; }
.tr-bande__valeur b { font-family: var(--font-texte); font-weight: 600; font-size: 15px; margin-left: 6px; }

/* La maison */
.tr-maison__grille { display: grid; gap: var(--space-8); }
@media (min-width: 900px) { .tr-maison__grille { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: var(--space-16); align-items: start; } }
.tr-piliers { display: grid; gap: var(--space-4); margin-top: var(--space-8); }
@media (min-width: 560px) { .tr-piliers { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.tr-piliers li { display: grid; gap: 4px; padding: var(--space-6) var(--space-4); text-align: center; background: var(--fond-carte); border-radius: 16px; box-shadow: 0 0 0 1px var(--trait); }
.tr-pilier__icone { font-size: 22px; color: var(--accent); }
.tr-piliers strong { font-family: "Lora", Georgia, serif; font-size: 20px; font-weight: 600; }
.tr-piliers span:last-child { font-size: 14px; color: var(--encre-douce); }

/* Nos suggestions */
.tr-entete-section { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: var(--space-4); margin-bottom: var(--space-8); }
[data-theme="table"] .lien-fleche { font-family: var(--font-texte); font-size: 14px; font-weight: 500; letter-spacing: .02em; text-transform: none; color: var(--accent); }
.tr-plats { display: grid; gap: var(--space-6); grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); }
.tr-plat { display: grid; gap: 6px; align-content: start; color: var(--encre); text-decoration: none; }
.tr-plat__img { position: relative; aspect-ratio: 4 / 3; border-radius: 18px; overflow: hidden; background: var(--fond-carte); box-shadow: 0 0 0 1px var(--trait); margin-bottom: var(--space-3); }
.tr-plat__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
.tr-plat:hover .tr-plat__img img { transform: scale(1.05); }
.tr-plat__img--vide { aspect-ratio: auto; height: 120px; }
.tr-plat__img--vide .tr-plat__lettre { font-size: 52px; }
/* Des rangées toujours pleines : le nombre de colonnes suit le nombre de plats en photo */
@media (min-width: 700px) {
  .tr-plats[data-n="1"] { grid-template-columns: minmax(0, 560px); }
  .tr-plats[data-n="2"], .tr-plats[data-n="4"], .tr-plats[data-n="6"], .tr-plats[data-n="8"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tr-plats[data-n="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .tr-plats[data-n="4"], .tr-plats[data-n="8"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .tr-plats[data-n="6"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* Sur téléphone : les suggestions défilent du doigt */
@media (max-width: 699px) {
  .tr-plats:has(> .tr-plat) { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 78%; gap: var(--space-4); overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; scrollbar-width: none; margin-inline: calc(-1 * var(--gouttiere)); padding: 0 var(--gouttiere) var(--space-2); scroll-padding-inline: var(--gouttiere); }
  .tr-plats::-webkit-scrollbar { display: none; }
  .tr-plats > .tr-plat { scroll-snap-align: start; }
}
.tr-plat__lettre { position: absolute; inset: 0; display: grid; place-items: center; font-family: "Lora", Georgia, serif; font-style: italic; font-size: 72px; color: var(--accent); background: radial-gradient(circle at 50% 40%, #fffaf1, #efe5d4); }
.tr-plat__rubrique { font-size: 11px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--or-table); }
.tr-plat__nom { font-family: "Lora", Georgia, serif; font-size: 22px; font-weight: 600; line-height: 1.15; }
.tr-plat__desc { color: var(--encre-douce); font-size: 14px; line-height: 1.5; }
.tr-plat__prix { font-weight: 600; color: var(--accent); margin-top: 2px; }
.tr-bientot { display: grid; gap: var(--space-6); justify-items: start; padding: var(--space-8); background: var(--fond-carte); border-radius: 20px; box-shadow: 0 0 0 1px var(--trait); }
.tr-bientot--carte { margin-top: var(--space-4); }

/* Réserver : la bande terracotta */
.tr-reserver { position: relative; overflow: hidden; background: var(--accent); color: #fff8ee; padding-block: var(--space-16); }
.tr-reserver::before { content: ""; position: absolute; right: -10%; top: -60%; width: 50%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(closest-side, #ffffff26, transparent); pointer-events: none; }
.tr-reserver__grille { position: relative; display: grid; gap: var(--space-8); align-items: end; }
@media (min-width: 900px) { .tr-reserver__grille { grid-template-columns: minmax(0, 1fr) auto; } }
.tr-reserver .tr-surtitre { color: #ffe3c7; }
.tr-reserver .tr-surtitre::before { background: #ffe3c7; }
.tr-reserver .tr-h2 em { color: #ffe3c7; }
.tr-reserver p { margin-top: var(--space-4); color: #fff8eecc; max-width: 46ch; }
.tr-reserver .btn { --btn-fond: #fff8ee; --btn-encre: var(--accent); }
.tr-reserver .btn--contour { --btn-fond: transparent; --btn-encre: #fff8ee; }
.tr-reserver .btn--contour:hover { --btn-fond: #fff8ee; --btn-encre: var(--accent); }

/* Nous trouver */
.tr-trouver__grille { display: grid; gap: var(--space-12); }
/* La Table : questions fréquentes (restaurant, repas, horaires) */
.tr-faq__grille { display: grid; gap: var(--space-8); }
@media (min-width: 900px) { .tr-faq__grille { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: var(--space-16); align-items: start; } }
.tr-faq__liste { display: grid; gap: 10px; }
.tr-faq details { background: var(--fond-carte); border-radius: 14px; box-shadow: inset 0 0 0 1px var(--trait); transition: box-shadow .25s; }
.tr-faq details[open] { box-shadow: inset 0 0 0 1px var(--trait-fort); }
.tr-faq summary { position: relative; display: block; padding: 18px 52px 18px 20px; cursor: pointer; list-style: none; font-family: "Lora", Georgia, serif; font-weight: 600; font-size: clamp(1.05rem, 4vw, 1.2rem); line-height: 1.3; }
.tr-faq summary::-webkit-details-marker { display: none; }
.tr-faq summary::after { content: "+"; position: absolute; right: 18px; top: 50%; translate: 0 -50%; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%;
  font-family: var(--font-texte); font-size: 18px; color: var(--accent); box-shadow: inset 0 0 0 1px var(--trait-fort); transition: rotate .25s; }
.tr-faq details[open] summary::after { rotate: 45deg; }
.tr-faq summary:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: 14px; }
.tr-faq details p { margin: 0; padding: 0 20px 18px; color: var(--encre-douce); font-size: 16px; line-height: 1.65; }
.tr-faq details p a { color: var(--accent); font-weight: 600; }
@media (min-width: 900px) { .tr-trouver__grille { grid-template-columns: 1fr 1fr; align-items: start; } }
.tr-horaires { display: grid; margin-top: var(--space-6); max-width: 460px; }
.tr-horaires div { display: flex; justify-content: space-between; gap: var(--space-4); padding: 14px 0; border-bottom: 1px solid var(--trait); }
.tr-horaires dt { color: var(--encre-douce); }
.tr-horaires dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }
.tr-adresse { display: grid; gap: var(--space-2); padding: var(--space-8); background: var(--fond-carte); border-radius: 20px; box-shadow: 0 0 0 1px var(--trait); }
.tr-adresse__label { font-size: 11px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--accent); }
.tr-adresse__valeur { font-family: "Lora", Georgia, serif; font-size: 22px; }
.tr-adresse__sous { color: var(--encre-douce); font-size: 14px; }
.tr-adresse .boutons { margin-top: var(--space-4); }

/* La carte : en-tête, onglets Cuisine / Boissons */
.tr-page-tete { padding-block: var(--space-12) var(--space-6); text-align: center; background: radial-gradient(60% 80% at 50% 0%, #b8893a1f, transparent 70%); }
.tr-page-tete .wrap { display: grid; justify-items: center; }
.tr-onglets { display: inline-flex; gap: 4px; margin-top: var(--space-8); padding: 4px; border-radius: 999px; background: var(--fond-section); box-shadow: inset 0 0 0 1px var(--trait); }
.tr-onglets button { min-height: 44px; padding: 0 22px; border: 0; border-radius: 999px; background: none; color: var(--encre-douce); font: 500 15px/1 var(--font-texte); cursor: pointer; transition: background .25s ease, color .25s ease; }
.tr-onglets button[aria-selected="true"] { background: var(--encre); color: var(--fond); }
.tr-menu { padding-top: var(--space-6); }
.tr-menu__rubriques { position: sticky; top: calc(env(safe-area-inset-top, 0px) + 61px); z-index: 5; display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none;
  margin: 0 calc(-1 * var(--gouttiere)) var(--space-6); padding: 10px var(--gouttiere); background: color-mix(in srgb, var(--fond) 92%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.tr-menu__rubriques:empty { display: none; }
.tr-menu__rubriques::-webkit-scrollbar { display: none; }
.tr-menu__rubriques a { flex: none; padding: 8px 16px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--trait-fort); color: var(--encre); text-decoration: none; font-size: 14px; font-weight: 500; }
.tr-menu__rubriques a:hover { background: var(--encre); color: var(--fond); box-shadow: none; }
.tr-menu__section { max-width: 820px; margin: 0 auto var(--space-12); scroll-margin-top: 140px; }
.tr-menu__titre { display: flex; align-items: center; gap: var(--space-4); margin-bottom: var(--space-4); font-family: "Lora", Georgia, serif; font-style: italic; font-weight: 500; font-size: clamp(1.8rem, 6vw, 2.4rem); color: var(--accent); }
.tr-menu__titre::before, .tr-menu__titre::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--or-table)); }
.tr-menu__titre::after { background: linear-gradient(90deg, var(--or-table), transparent); }
.tr-menu__note { max-width: 560px; margin: calc(-1 * var(--space-2)) auto var(--space-6); text-align: center; font-family: "Lora", Georgia, serif; font-style: italic; font-size: 15px; line-height: 1.5; color: var(--encre-douce); }
.tr-menu__plats { display: grid; }
.plat { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); padding: var(--space-4) 0; border-bottom: 1px dashed var(--trait); scroll-margin-top: 140px; }
.plat--photo { grid-template-columns: 76px minmax(0, 1fr); align-items: start; }
.plat__photo { padding: 0; border: 0; cursor: zoom-in; width: 76px; height: 76px; border-radius: 50%; overflow: hidden; background: var(--fond-section); box-shadow: 0 0 0 3px var(--fond), 0 0 0 4px var(--trait); }
.plat__photo img { width: 100%; height: 100%; object-fit: cover; }
.plat__ligne { display: flex; align-items: baseline; gap: var(--space-3); }
.plat__nom { font-family: "Lora", Georgia, serif; font-size: 19px; font-weight: 600; line-height: 1.25; min-width: 0; overflow-wrap: anywhere; }
.plat__points { flex: 1; min-width: 20px; border-bottom: 1px dotted var(--trait-fort); transform: translateY(-4px); }
.plat__prix { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 2px 12px; min-width: 0; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--encre); }
.plat__prix small { font-size: 12px; font-weight: 400; color: var(--encre-douce); margin-right: 4px; }
.plat__desc { margin-top: 4px; color: var(--encre-douce); font-size: 14px; line-height: 1.55; max-width: 60ch; }
.plat__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.plat__tag { padding: 3px 10px; border-radius: 999px; font-size: 11px; font-weight: 600; letter-spacing: .04em; background: var(--fond-section); color: var(--encre-douce); }
.plat__tag--une { background: var(--accent); color: var(--on-accent); }
.plat__tag--vegetarien { background: #e3ecd7; color: #3f6630; }
.plat__tag--maison, .plat__tag--local { background: #f3e3c3; color: #7a5520; }
.plat__tag--nouveau { background: #2a211a; color: #f7f1e6; }
.plat__tag--epice { background: #f6d9cf; color: #9a3412; }
.plat--une { position: relative; padding-inline: var(--space-4); margin-inline: calc(-1 * var(--space-4)); background: linear-gradient(90deg, #b4532a0d, transparent); border-radius: 12px; }
[data-theme="table"] .allergenes { max-width: 820px; margin: var(--space-8) auto 0; border-radius: 16px; background: var(--fond-carte); box-shadow: 0 0 0 1px var(--trait); }
[data-theme="table"] .carte { border-radius: 20px; box-shadow: 0 0 0 1px var(--trait); max-width: 900px; margin-inline: auto; }
[data-theme="table"] .rubriques { max-width: 900px; margin-inline: auto; }
[data-theme="table"] .rubrique-btn { border-radius: 999px; font-family: var(--font-texte); }
[data-theme="table"] .carte__titre { font-family: "Lora", Georgia, serif; font-style: italic; font-size: 24px; color: var(--accent); border-bottom-color: var(--or-table); }
[data-theme="table"] .carte__nom { font-family: "Lora", Georgia, serif; font-weight: 600; font-size: 17px; }
[data-theme="table"] .mention-alcool { text-align: center; }
.tr-hero .tr-titre, .tr-hero .tr-surtitre, .tr-accroche, .tr-hero .boutons, .tr-ouvert { animation: kr-monte .8s cubic-bezier(.2, .7, .2, 1) both; }
.tr-hero .tr-titre { animation-delay: .08s; } .tr-accroche { animation-delay: .18s; } .tr-hero .boutons { animation-delay: .28s; } .tr-ouvert { animation-delay: .36s; }
.tr-hero__photo { animation: kr-arche 1.1s cubic-bezier(.2, .7, .2, 1) .1s both; }
@keyframes kr-arche { from { clip-path: inset(100% 0 0 0 round 999px 999px 18px 18px); } to { clip-path: inset(0 0 0 0 round 999px 999px 18px 18px); } }
@media (prefers-reduced-motion: reduce) {
  .tr-hero .tr-titre, .tr-hero .tr-surtitre, .tr-accroche, .tr-hero .boutons, .tr-ouvert, .tr-hero__photo, .tr-hero__photo img, .tr-ouvert__point { animation: none; }
}

/* Ajustements */
[data-theme="table"] .annonce { background: var(--encre); color: var(--fond); }
/* La Villa garde ses couleurs partout : or et noir chaud, jamais le violet du club */
[data-theme="villa"] .annonce { background: linear-gradient(90deg, #2a2116, #3a2c18 50%, #2a2116); color: #f1d9ad; box-shadow: inset 0 -1px 0 #c98a3a66; }
[data-theme="villa"] .page-tete::before { background: radial-gradient(closest-side, #c98a3a26, transparent); }
[data-theme="villa"] .visionneuse button { background: #1d1912; border-color: #8a7b62; color: #fbf1dc; }
[data-theme="villa"] .visionneuse button:hover { background: #3a2c18; }
[data-theme="table"] .visionneuse button { background: #2a211a; border-color: #8a7660; color: #f7f1e6; }
[data-theme="table"] .visionneuse button:hover { background: #3d3127; }
.entete[data-theme="table"] .logo-table, .entete[data-theme="table"] a.logo-table { text-decoration: none; }
.tr-plats > .tr-bientot { grid-column: 1 / -1; max-width: 640px; }
@media (max-width: 959px) { .tr-hero__photo { max-width: min(100%, 340px); } }
.villa-esprit__liste { padding: 0; margin: 0; list-style: none; }
.villa-esprit .h-section { font-size: clamp(2rem, 6vw, 3.2rem); }
.hero--vivant::before { opacity: .7; }
.hero__fond::after {
  background: linear-gradient(180deg, color-mix(in srgb, var(--fond) 40%, transparent) 0%, color-mix(in srgb, var(--fond) 66%, transparent) 40%, color-mix(in srgb, var(--fond) 86%, transparent) 72%, var(--fond) 100%);
}
@media (min-width: 1000px) {
  .hero__fond::after {
    background:
      linear-gradient(90deg, var(--fond) 0%, color-mix(in srgb, var(--fond) 80%, transparent) 32%, color-mix(in srgb, var(--fond) 30%, transparent) 66%, color-mix(in srgb, var(--fond) 50%, transparent) 100%),
      linear-gradient(0deg, var(--fond) 0%, transparent 28%);
  }
}
.entete[data-theme="table"] .entete__logo { text-decoration: none; color: var(--encre); }
/* La Table : les titres de formulaire et d'infos prennent la police de la maison */
body[data-theme="table"] :is(.etape legend, .info-valeur, .succes h2, .texte-legal h2, .resa__titre, .service__titre, .navette__nom, .album__titre, .chiffre__valeur, .compte strong, .choix__prix, .formule__prix) {
  font-family: var(--font-titre); font-weight: 600; text-transform: none; letter-spacing: 0;
}
body[data-theme="table"] .etape legend { font-size: 22px; }
body[data-theme="table"] .info-valeur { font-size: 20px; line-height: 1.3; }

/* La Table : les formules sur l'accueil (prix dans une pastille, comme sur la carte imprimée) */
.tr-formules__liste { display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.tr-formule {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); min-width: 0; padding: 16px 16px 16px 20px;
  border-radius: 16px; background: var(--fond-carte); box-shadow: 0 0 0 1px var(--trait); color: var(--encre); text-decoration: none;
  transition: transform .3s cubic-bezier(.2, .8, .2, 1), box-shadow .3s ease;
}
.tr-formule:hover { transform: translateY(-3px); box-shadow: 0 0 0 1px var(--or-table), 0 14px 30px -18px #2a211a66; }
.tr-formule__texte { display: grid; gap: 4px; min-width: 0; }
.tr-formule__texte strong { font-family: "Lora", Georgia, serif; font-weight: 600; font-size: 19px; }
.tr-formule__texte span { color: var(--encre-douce); font-size: 14px; line-height: 1.45; }
.tr-formule__prix { flex: none; display: flex; align-items: center; justify-content: center; gap: 1px; width: 64px; height: 64px; border-radius: 50%; background: var(--accent); color: var(--on-accent);
  font-family: "Lora", Georgia, serif; font-weight: 600; line-height: 1; letter-spacing: -0.02em; }
.tr-formule__prix b { font-weight: 600; font-size: 22px; }
.tr-formule__prix small { font-size: 13px; transform: translateY(-5px); }

/* =====================================================================
   ACCUEIL DU CLUB : les soirées en affiches, privatiser, venir au Kripton
   (idées reprises des grands clubs : l'agenda en premier, une carte par soirée
   avec ses genres, sa date et deux boutons ; les infos pratiques en blocs)
   ===================================================================== */
.semaine__tete { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: var(--space-4); margin-bottom: var(--space-8); }
.evts { display: grid; gap: var(--space-6) var(--space-4); grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); }
@media (max-width: 699px) {
  .evts { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 74%; gap: var(--space-4); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory;
    scrollbar-width: none; margin-inline: calc(-1 * var(--gouttiere)); padding: 0 var(--gouttiere) var(--space-2); scroll-padding-inline: var(--gouttiere); }
  .evts::-webkit-scrollbar { display: none; }
  .evt { scroll-snap-align: start; }
}
.evt { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.evt__affiche { position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden; background: var(--fond-carte); text-decoration: none;
  clip-path: polygon(var(--coupe-md) 0, 100% 0, 100% calc(100% - var(--coupe-md)), calc(100% - var(--coupe-md)) 100%, 0 100%, 0 var(--coupe-md)); }
.evt__affiche img { width: 100%; height: 100%; object-fit: cover; object-position: top; transition: transform .7s cubic-bezier(.2, .7, .2, 1), filter .4s ease; }
.evt:hover .evt__affiche img { transform: scale(1.05); filter: saturate(1.15); }
.evt__affiche::after { content: ""; position: absolute; inset: 0; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--soiree) 40%, transparent); pointer-events: none; }
.evt__sans { position: absolute; inset: 0; display: grid; place-items: center; padding: 16px; text-align: center; font-family: var(--font-affiche); font-weight: 900; text-transform: uppercase; color: var(--soiree); }
.evt__jour { position: absolute; top: 12px; left: 12px; display: grid; justify-items: center; min-width: 52px; padding: 6px 8px 7px; background: var(--fond); color: var(--encre);
  font-family: var(--font-label); font-size: 10px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; box-shadow: inset 0 -3px 0 var(--soiree); }
.evt__jour b { font-family: var(--font-affiche); font-size: 24px; font-weight: 900; letter-spacing: 0; line-height: 1; }
.evt__complet { position: absolute; right: 12px; bottom: 12px; padding: 6px 10px; background: var(--encre); color: var(--fond); font-family: var(--font-label); font-size: 10px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.evt__genres { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.evt__genres span { padding: 3px 8px; border: 1px solid color-mix(in srgb, var(--soiree) 55%, transparent); color: var(--encre); font-family: var(--font-label); font-size: 10px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.evt__date { color: var(--encre-douce); font-size: 14px; }
.evt__date::first-letter { text-transform: uppercase; }
.evt__titre { font-family: var(--font-affiche); font-weight: 800; font-size: 18px; line-height: 1.15; text-transform: uppercase; overflow-wrap: anywhere; }
.evt__titre a { color: inherit; text-decoration: none; }
.evt__titre a:hover { color: var(--soiree); }
.evt__boutons { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; padding-top: 4px; }

.privatiser-bande { position: relative; isolation: isolate; overflow: hidden; padding-block: clamp(72px, 12vw, 140px); }
.privatiser-bande__img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transform: scale(1.06); transition: transform 1.2s ease; }
.privatiser-bande::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(100deg, var(--fond) 8%, color-mix(in srgb, var(--fond) 78%, transparent) 46%, color-mix(in srgb, var(--fond) 35%, transparent)); }
.privatiser-bande:hover .privatiser-bande__img { transform: scale(1.02); }
.privatiser-bande__contenu { display: grid; gap: var(--space-4); justify-items: start; }
.privatiser-bande__contenu > * { max-width: 620px; }
.privatiser-bande__texte { color: var(--encre-douce); font-size: 17px; line-height: 1.6; }

.venir__grille { display: grid; gap: var(--space-3); margin-top: var(--space-8); }
@media (min-width: 640px) { .venir__grille { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .venir__grille { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.venir__bloc { display: flex; flex-direction: column; gap: 8px; min-width: 0; padding: 24px 22px; background: var(--fond-carte);
  clip-path: polygon(var(--coupe-sm) 0, 100% 0, 100% calc(100% - var(--coupe-sm)), calc(100% - var(--coupe-sm)) 100%, 0 100%, 0 var(--coupe-sm)); }
.venir__icone { display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 6px; border-radius: 50%; background: color-mix(in srgb, var(--kripton-vert) 14%, transparent); }
.venir__icone svg { width: 22px; height: 22px; fill: var(--kripton-vert); }
.venir__bloc h3 { font-family: var(--font-affiche); font-weight: 800; font-size: 16px; text-transform: uppercase; letter-spacing: .02em; }
.venir__bloc p { color: var(--encre-douce); font-size: 15px; line-height: 1.55; }
.venir__sous { font-size: 13px !important; }
.venir__bloc .boutons { margin-top: auto; padding-top: 8px; }
.venir__horaires { display: grid; gap: 6px; margin: 0; }
.venir__horaires div { display: flex; justify-content: space-between; gap: 12px; padding-bottom: 6px; border-bottom: 1px solid var(--trait); font-size: 14px; }
.venir__horaires dt { color: var(--encre-douce); }
.venir__horaires dd { margin: 0; font-weight: 600; white-space: nowrap; }

/* Menu du club : quatre raccourcis en haut (prochaine soirée, réserver, privatiser, appeler) */
.menu-mobile__raccourcis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin-bottom: var(--space-4); animation: kr-monte .5s cubic-bezier(.2, .7, .2, 1) both; }
.entete .menu-mobile .menu-mobile__raccourcis a { display: grid; gap: 4px; min-width: 0; padding: 12px 14px; background: var(--fond-carte); color: var(--encre); text-decoration: none;
  font-family: var(--font-affiche); font-weight: 800; font-size: 13px; line-height: 1.15; letter-spacing: 0; text-transform: uppercase; overflow-wrap: anywhere;
  clip-path: polygon(var(--coupe-sm) 0, 100% 0, 100% calc(100% - var(--coupe-sm)), calc(100% - var(--coupe-sm)) 100%, 0 100%, 0 var(--coupe-sm)); }
.entete .menu-mobile .menu-mobile__raccourcis a:first-child { background: var(--accent); color: var(--on-accent); }
.menu-mobile__raccourcis small { font-family: var(--font-label); font-size: 9px; font-weight: 600; letter-spacing: .18em; opacity: .75; }
@media (min-width: 1000px) { .menu-mobile__raccourcis { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* La Table : l'ardoise du jour (façon ardoise de bistrot) */
.tr-jour { padding-block: var(--space-12); }
.tr-ardoise {
  position: relative; max-width: 760px; margin-inline: auto; padding: 30px clamp(20px, 5vw, 44px) 28px; border-radius: 22px; overflow: hidden;
  background: radial-gradient(120% 80% at 20% 0%, #3a3027, #241d17 70%); color: #f7f1e6;
  box-shadow: 0 0 0 6px #8a6a44, 0 0 0 8px #5b4630, 0 30px 60px -30px #2a211a99;
}
.tr-ardoise::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .07;
  background-image: repeating-linear-gradient(115deg, #fff 0 1px, transparent 1px 7px); }
.tr-ardoise__tete { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 6px 16px; padding-bottom: 14px; border-bottom: 1px dashed #f7f1e655; }
.tr-ardoise__sur { font-family: "Lora", Georgia, serif; font-style: italic; font-size: clamp(1.6rem, 6vw, 2.1rem); color: #f3c98b; }
.tr-ardoise__date { font-size: 12px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: #f7f1e6b3; }
.tr-ardoise__date::first-letter { text-transform: uppercase; }
.tr-ardoise__plats { display: grid; gap: 14px; margin: 18px 0 0; }
.tr-ardoise__plats div { display: grid; grid-template-columns: 86px minmax(0, 1fr); gap: 12px; align-items: baseline; }
.tr-ardoise__plats dt { font-size: 11px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: #f3c98b; }
.tr-ardoise__plats dd { margin: 0; font-family: "Lora", Georgia, serif; font-size: clamp(1.15rem, 4.4vw, 1.4rem); line-height: 1.3; }
.tr-ardoise__formules { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.tr-ardoise__formules span { display: grid; gap: 2px; padding: 10px 14px; border-radius: 12px; background: #f7f1e612; box-shadow: inset 0 0 0 1px #f7f1e626; font-size: 15px; }
.tr-ardoise__formules b { font-family: "Lora", Georgia, serif; font-weight: 600; color: #f3c98b; }
.tr-ardoise__formules small { color: #f7f1e6a6; font-size: 12px; line-height: 1.35; }
.tr-ardoise .boutons { margin-top: 22px; }
.tr-ardoise .btn--contour { --btn-encre: #f7f1e6; }
.tr-ardoise--compacte { margin-bottom: var(--space-12); }

/* =====================================================================
   INTERACTIONS : « Ce soir », agenda et partage, stories, affiches 3D
   ===================================================================== */
/* Le bandeau « CE SOIR » / « EN CE MOMENT » */
.direct { position: relative; z-index: 51; display: flex; align-items: center; justify-content: center; gap: 8px 10px; flex-wrap: wrap; padding: 9px var(--gouttiere);
  background: linear-gradient(90deg, var(--soiree, var(--accent)), color-mix(in srgb, var(--soiree, var(--accent)) 70%, #fff), var(--soiree, var(--accent)));
  background-size: 200% 100%; animation: kr-direct-fond 6s linear infinite; color: #07040f; text-decoration: none; font-size: 13px; line-height: 1.2; }
@keyframes kr-direct-fond { to { background-position: -200% 0; } }
.direct b { font-family: var(--font-label); font-size: 11px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; }
.direct__titre { font-family: var(--font-affiche); font-weight: 800; text-transform: uppercase; letter-spacing: .02em; }
.direct__heure { font-weight: 600; opacity: .85; }
.direct__point { width: 9px; height: 9px; border-radius: 50%; background: #07040f; box-shadow: 0 0 0 0 #07040f88; animation: kr-direct 1.4s ease-out infinite; }
.direct--en-cours .direct__point { background: #ff1f3d; box-shadow: 0 0 0 0 #ff1f3d; }
@keyframes kr-direct { 70% { box-shadow: 0 0 0 9px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
.direct__fleche { transition: transform .2s ease; } .direct:hover .direct__fleche { transform: translateX(4px); }
@media (max-width: 479px) { .direct__fleche { display: none; } .direct { gap: 6px 8px; } }
.porte__live { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; margin-bottom: 6px; padding: 4px 9px; background: var(--kripton-vert); color: #07040f;
  font-family: var(--font-label); font-size: 9.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.porte__live i { width: 7px; height: 7px; border-radius: 50%; background: #ff1f3d; animation: kr-direct 1.4s ease-out infinite; }

/* Ajouter à mon agenda / Envoyer à mes potes */
.s-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: var(--space-4); }
.s-actions .btn { gap: 8px; }
.s-actions svg { width: 16px; height: 16px; fill: currentColor; flex: none; }
.s-actions--petit { margin-top: var(--space-3); }
/* Le choix de l'agenda s'ouvre sous les boutons, dans la page : jamais coupé par le bord d'une carte */
.s-actions { align-items: flex-start; }
.s-agenda__menu { flex: 1 1 100%; max-width: 360px; display: grid; padding: 6px; background: var(--fond-section); box-shadow: 0 0 0 1px var(--trait-fort); animation: kr-monte .25s ease both; }
.s-agenda__menu[hidden] { display: none; }
.s-agenda__menu a { display: grid; gap: 2px; padding: 12px 14px; color: var(--encre); text-decoration: none; font-weight: 600; font-size: 14px; }
.s-agenda__menu a:hover { background: color-mix(in srgb, var(--accent) 14%, transparent); }
.s-agenda__menu small { font-weight: 400; font-size: 12px; color: var(--encre-douce); }

/* Les bulles de stories */
.stories-section { padding: var(--space-8) 0 0; }
.stories-section__titre { display: block; margin-bottom: var(--space-3); font-family: var(--font-label); font-size: 11px; font-weight: 600; letter-spacing: var(--label-espace); text-transform: uppercase; color: var(--encre-douce); }
.stories-galerie { margin-top: var(--space-6); }
.stories-rangee { display: flex; gap: 14px; overflow-x: auto; scrollbar-width: none; padding: 4px 2px 6px; margin-inline: -2px; overscroll-behavior-x: contain; }
.stories-rangee::-webkit-scrollbar { display: none; }
/* Les stories Instagram : une vignette verticale par story, anneau aux couleurs d'Instagram (gris une fois vue) */
.ig-story { position: relative; flex: none; width: clamp(96px, 26vw, 132px); aspect-ratio: 9 / 16; padding: 4px; border: 0; border-radius: 15px; cursor: pointer;
  background: linear-gradient(45deg, #feda75, #fa7e1e 30%, #d62976 60%, #962fbf 80%, #4f5bd5); transition: transform .3s cubic-bezier(.2, .7, .2, 1); }
.ig-story:hover { transform: translateY(-3px); }
.ig-story--vue { background: color-mix(in srgb, var(--encre) 28%, transparent); }
.ig-story__img { display: block; width: 100%; height: 100%; overflow: hidden; border-radius: 11px; background: #000; box-shadow: 0 0 0 2px var(--fond); }
.ig-story__img img, .ig-story__img video { width: 100%; height: 100%; object-fit: cover; display: block; }
.ig-story__lecture { position: absolute; top: 10px; right: 10px; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: #0008; color: #fff; font-size: 9px; font-style: normal; }
.ig-story__quand { position: absolute; left: 4px; right: 4px; bottom: 4px; padding: 18px 8px 7px; border-radius: 0 0 11px 11px; background: linear-gradient(transparent, #000c); color: #fff; font-size: 11px; font-weight: 600; text-align: left; }
.ig-suivre { flex: none; display: grid; align-content: center; justify-items: center; gap: 4px; width: clamp(96px, 26vw, 132px); aspect-ratio: 9 / 16; border-radius: 14px; border: 1px dashed var(--trait-fort); color: var(--encre); text-decoration: none; text-align: center; padding: 8px; }
.ig-suivre:hover { border-color: var(--accent); }
.ig-suivre__rond { width: 46px; height: 46px; border-radius: 50%; overflow: hidden; padding: 2px; background: linear-gradient(45deg, #feda75, #fa7e1e 30%, #d62976 60%, #962fbf 80%, #4f5bd5); }
.ig-suivre__rond img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; border: 2px solid var(--fond); }
.ig-suivre small { font-size: 11px; color: var(--encre-douce); text-transform: uppercase; letter-spacing: .14em; margin-top: 6px; }
.ig-suivre b { font-size: 12px; overflow-wrap: anywhere; }
.stories__lien { position: absolute; z-index: 4; left: 50%; bottom: calc(env(safe-area-inset-bottom, 0px) + 22px); transform: translateX(-50%); padding: 8px 14px; border-radius: 999px; background: #fffffff0; color: #111; font-size: 13px; font-weight: 700; text-decoration: none; white-space: nowrap; }
.story-bulle { flex: none; display: grid; justify-items: center; gap: 6px; width: 84px; padding: 0; border: 0; background: none; color: var(--encre); cursor: pointer; }
.story-bulle__anneau { position: relative; display: block; width: 76px; height: 76px; padding: 3px; border-radius: 50%;
  background: conic-gradient(from 210deg, var(--kripton-vert), var(--kripton-cyan, #00dcd6), var(--neon-rose, #ff2ea6), var(--feu, #ff4d12), var(--kripton-vert)); transition: transform .25s ease; }
.story-bulle:hover .story-bulle__anneau, .story-bulle:focus-visible .story-bulle__anneau { transform: scale(1.06) rotate(-4deg); }
.story-bulle__anneau img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; border: 3px solid var(--fond); }
.story-bulle--vue .story-bulle__anneau { background: var(--trait-fort); }
.story-bulle__lecture { position: absolute; right: 0; bottom: 0; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--accent); color: var(--on-accent); font-size: 10px; font-style: normal; box-shadow: 0 0 0 3px var(--fond); }
.story-bulle__nom { width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; text-align: center; }

/* Le lecteur plein écran */
html.stories-ouvertes { overflow: hidden; }
.stories { position: fixed; inset: 0; z-index: 10050; display: grid; place-items: center; background: #000; animation: kr-stories-entree .28s cubic-bezier(.2, .8, .2, 1) both; touch-action: none; user-select: none; -webkit-user-select: none; }
@keyframes kr-stories-entree { from { opacity: 0; transform: scale(.94); } }
.stories--sortie { animation: kr-stories-sortie .22s ease both; }
@keyframes kr-stories-sortie { to { opacity: 0; transform: translateY(40px) scale(.96); } }
.stories__cadre { position: relative; width: min(100vw, calc(100svh * 9 / 16)); height: min(100svh, calc(100vw * 16 / 9)); max-height: 100svh; overflow: hidden; background: #0b0814; outline: none; }
@media (min-width: 700px) { .stories__cadre { border-radius: 16px; height: min(94svh, 900px); width: calc(min(94svh, 900px) * 9 / 16); } }
.stories__media { position: absolute; inset: 0; display: grid; place-items: center; }
.stories__media img, .stories__media video { width: 100%; height: 100%; object-fit: cover; animation: kr-ken 6s ease-out both; }
.stories__media video { animation: none; }
@keyframes kr-ken { from { transform: scale(1.08); } to { transform: scale(1); } }
.stories__cadre::before { content: ""; position: absolute; inset: 0 0 auto; z-index: 1; height: 140px; background: linear-gradient(#000b, transparent); pointer-events: none; }
.stories__cadre::after { content: ""; position: absolute; inset: auto 0 0; z-index: 1; height: 160px; background: linear-gradient(transparent, #000c); pointer-events: none; }
.stories__barres { position: absolute; z-index: 3; top: calc(env(safe-area-inset-top, 0px) + 10px); left: 10px; right: 10px; display: flex; gap: 4px; }
.stories__barres span { flex: 1; height: 3px; border-radius: 3px; background: #ffffff4d; overflow: hidden; }
.stories__barres i { display: block; height: 100%; background: #fff; transform-origin: left; transform: scaleX(0); }
.stories__tete { position: absolute; z-index: 3; top: calc(env(safe-area-inset-top, 0px) + 22px); left: 12px; right: 8px; display: flex; align-items: center; gap: 10px; color: #fff; }
.stories__avatar { flex: none; width: 36px; height: 36px; padding: 2px; border-radius: 50%; background: conic-gradient(var(--kripton-vert), var(--neon-rose, #ff2ea6), var(--kripton-vert)); }
.stories__avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.stories__titre { display: grid; min-width: 0; margin-right: auto; line-height: 1.2; }
.stories__titre b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--font-affiche); font-size: 13px; text-transform: uppercase; }
.stories__titre small { font-size: 11px; opacity: .8; }
.stories__btn { position: relative; z-index: 4; width: 40px; height: 40px; border: 0; border-radius: 50%; background: #0006; color: #fff; font-size: 16px; cursor: pointer; }
.stories__legende { position: absolute; z-index: 3; left: 16px; right: 16px; bottom: calc(env(safe-area-inset-bottom, 0px) + 22px); color: #fff; font-size: 15px; font-weight: 600; text-shadow: 0 1px 8px #000; }
.stories__zone { position: absolute; z-index: 2; top: 80px; bottom: 0; padding: 0; border: 0; background: transparent; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.stories__zone--avant { left: 0; width: 34%; } .stories__zone--apres { right: 0; width: 66%; }

/* Les affiches qui s'inclinent */
.evt__affiche, .prochaine__flyer, .soiree-ligne__flyer, .s-flyer, .mur__img { --rx: 0deg; --ry: 0deg; transition: transform .45s cubic-bezier(.2, .8, .2, 1); will-change: transform; }
.incline { transform: perspective(900px) rotateX(var(--rx)) rotateY(var(--ry)) scale(1.02); transition: transform .08s linear; }
.incline::before { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; mix-blend-mode: screen;
  background: radial-gradient(circle at var(--gx, 50%) var(--gy, 50%), color-mix(in srgb, var(--soiree, var(--accent)) 55%, #fff) 0%, transparent 46%); opacity: .45; }
.prochaine__flyer, .soiree-ligne__flyer, .s-flyer, .mur__img { position: relative; }
@media (prefers-reduced-motion: reduce) {
  .direct, .direct__point, .porte__live i { animation: none; }
  .stories, .stories__media img { animation: none; }
  .incline { transform: none; }
}

/* =====================================================================
   OUVERTURE DU KRIPTON : le logo et un chargement, sans photo
   ===================================================================== */
.chargement { position: relative; display: block; width: 160px; height: 3px; border-radius: 3px; overflow: hidden; background: #ffffff1f; }
.chargement i { position: absolute; top: 0; bottom: 0; left: 0; width: 34%; border-radius: 3px; background: #8cf60c; box-shadow: 0 0 12px #8cf60c; animation: kr-chargement 1s cubic-bezier(.6, 0, .3, 1) infinite; }
@keyframes kr-chargement { from { transform: translateX(-110%); } to { transform: translateX(310%); } }
.entree-zoom--logo {
  display: grid; place-content: center; justify-items: center; gap: 30px;
  background: radial-gradient(60% 50% at 0% 100%, #7a1a4a73, transparent 70%), radial-gradient(50% 45% at 100% 0%, #3a12c266, transparent 70%), #07040f;
}
.entree-zoom--logo::after { display: none; }
.entree-zoom__logo { width: min(64vw, 320px); height: auto; opacity: 0; transform: scale(.9); transition: opacity .35s ease .3s, transform .6s cubic-bezier(.2, .7, .2, 1) .25s; }
.entree-zoom--logo .chargement { opacity: 0; transition: opacity .3s ease .45s; }
.entree-zoom--logo.est-plein .entree-zoom__logo { opacity: 1; transform: none; }
.entree-zoom--logo.est-plein .chargement { opacity: 1; }
/* Le rideau du club : le logo, et la même barre de chargement dessous */
html[data-passage="club"] body::after {
  background:
    var(--passage-logo) center / var(--passage-taille) no-repeat,
    linear-gradient(#8cf60c, #8cf60c) calc(50% - 56px) calc(50% + 62px) / 54px 3px no-repeat,
    linear-gradient(#ffffff1f, #ffffff1f) 50% calc(50% + 62px) / 160px 3px no-repeat;
}
html.passage-depart[data-passage="club"] body::after, html.passage-arrivee[data-passage="club"]:not(.passage-ouvre) body::after {
  animation: kr-chargement-rideau 1s cubic-bezier(.6, 0, .3, 1) infinite;
}
html.passage-arrivee[data-passage="club"]:not(.passage-ouvre) body::after { animation: kr-chargement-rideau 1s cubic-bezier(.6, 0, .3, 1) infinite, passage-secours-cache .3s ease 2.5s forwards; }
@keyframes kr-chargement-rideau {
  from { background-position: center, calc(50% - 56px) calc(50% + 62px), 50% calc(50% + 62px); }
  to { background-position: center, calc(50% + 56px) calc(50% + 62px), 50% calc(50% + 62px); }
}
/* La Villa : sobre. Fond uni, petit monogramme, un fin trait doré qui file dessous */
.entree-zoom--villa { display: grid; place-content: center; justify-items: center; gap: 22px; background: #0a0907; }
.entree-zoom--villa::after { display: none; }
.entree-zoom__mono { width: 84px; height: auto; opacity: 0; transform: translateY(6px); transition: opacity .45s ease .3s, transform .7s cubic-bezier(.2, .7, .2, 1) .25s; }
.entree-zoom--villa .chargement { opacity: 0; transition: opacity .3s ease .5s; }
.entree-zoom--villa.est-plein .entree-zoom__mono { opacity: 1; transform: none; }
.entree-zoom--villa.est-plein .chargement { opacity: 1; }
.chargement--or { width: 72px; height: 1px; background: #c98a3a33; }
.chargement--or i { background: #c98a3a; box-shadow: none; }
html[data-passage="villa"] body::after {
  background:
    var(--passage-logo) center / var(--passage-taille) no-repeat,
    linear-gradient(#c98a3a, #c98a3a) calc(50% - 24px) calc(50% + 50px) / 24px 1px no-repeat,
    linear-gradient(#c98a3a33, #c98a3a33) 50% calc(50% + 50px) / 72px 1px no-repeat;
}
html.passage-depart[data-passage="villa"] body::after, html.passage-arrivee[data-passage="villa"]:not(.passage-ouvre) body::after {
  animation: kr-chargement-villa 1.1s cubic-bezier(.6, 0, .3, 1) infinite;
}
html.passage-arrivee[data-passage="villa"]:not(.passage-ouvre) body::after { animation: kr-chargement-villa 1.1s cubic-bezier(.6, 0, .3, 1) infinite, passage-secours-cache .3s ease 2.5s forwards; }
@keyframes kr-chargement-villa {
  from { background-position: center, calc(50% - 24px) calc(50% + 50px), 50% calc(50% + 50px); }
  to { background-position: center, calc(50% + 24px) calc(50% + 50px), 50% calc(50% + 50px); }
}
@media (prefers-reduced-motion: reduce) { .chargement i, html[data-passage="club"] body::after, html[data-passage="villa"] body::after { animation: none !important; } }

/* =====================================================================
   LIEU FERMÉ DEPUIS L'ADMIN (Réglages)
   Ses pages restent visitables ; en haut, un message à sa direction
   artistique : néon et coins coupés pour le club, cadre doré, monogramme et
   écriture manuscrite pour la Villa, carte crème et Lora pour La Table.
   ===================================================================== */
.ferme-lieu { position: relative; isolation: isolate; overflow: hidden; padding-block: clamp(40px, 8vw, 88px); text-align: center; background: var(--fond); color: var(--encre); }
.ferme-lieu--plein { min-height: min(82svh, 820px); display: grid; align-content: center; }
.ferme-lieu--compact { padding-block: 18px; }
.ferme-lieu .wrap { display: grid; justify-items: center; gap: var(--space-8); }
.ferme-lieu__cadre { position: relative; width: min(100%, 680px); animation: kr-monte .9s cubic-bezier(.2, .7, .2, 1) .1s both; }
.ferme-lieu--compact .ferme-lieu__cadre { width: min(100%, 860px); }
.ferme-lieu__dedans { position: relative; display: grid; justify-items: center; gap: 14px; padding: clamp(32px, 7vw, 56px) clamp(20px, 5vw, 48px); }
.ferme-lieu--compact .ferme-lieu__dedans { gap: 6px; padding: 16px 20px; }
.ferme-lieu__sur { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-label); font-size: 12px; font-weight: 600; letter-spacing: var(--label-espace, .3em); text-transform: uppercase; color: var(--accent); }
.ferme-lieu--compact .ferme-lieu__sur { font-size: 11px; }
.ferme-lieu__titre { font-family: var(--font-titre); font-weight: var(--titre-graisse); font-size: clamp(2.3rem, 10.5vw, 4.4rem); line-height: 1; text-wrap: balance; overflow-wrap: anywhere; }
.ferme-lieu__ligne { max-width: 60ch; font-size: 15px; font-weight: 500; line-height: 1.45; color: var(--encre); overflow-wrap: anywhere; }
.ferme-lieu__message { max-width: 44ch; font-size: 17px; line-height: 1.55; color: var(--encre-douce); overflow-wrap: anywhere; }
.ferme-lieu__filet { display: block; width: 64px; height: 1px; background: currentColor; opacity: .35; }
.ferme-lieu__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 24px; margin-top: 6px; }
.ferme-lieu__lien { font-family: var(--font-label); font-size: 12px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--encre); text-decoration: none; padding: 8px 0 4px; border-bottom: 1px solid color-mix(in srgb, var(--accent) 70%, transparent); transition: color .25s ease, border-color .25s ease; }
.ferme-lieu__lien:hover { color: var(--accent); border-color: var(--accent); }
.ferme-lieu__autres { width: min(100%, 680px); margin-top: 0; }
.ferme__autres { display: grid; gap: var(--space-3); width: 100%; max-width: 580px; margin-top: var(--space-8); }
.ferme__autres .resa-ailleurs__liens { margin-top: 0; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); text-align: left; }

/* Club : la nuit, le néon vert, les coins coupés, un voyant « fermé » qui clignote */
.ferme-lieu[data-theme="club"] { background: radial-gradient(70% 55% at 50% 0%, #8cf60c1c, transparent 70%), radial-gradient(80% 60% at 50% 100%, #3a12c240, transparent 72%), var(--fond); }
.ferme-lieu[data-theme="club"] .ferme-lieu__cadre { padding: 1px; background: linear-gradient(135deg, #8cf60c, #1cf48f 50%, #00dcd6); clip-path: polygon(22px 0, 100% 0, 100% calc(100% - 22px), calc(100% - 22px) 100%, 0 100%, 0 22px); filter: drop-shadow(0 0 22px #8cf60c33); }
.ferme-lieu[data-theme="club"] .ferme-lieu__dedans { background: radial-gradient(90% 80% at 50% 0%, #1b1036, #0b0716 70%); clip-path: polygon(21.6px 0, 100% 0, 100% calc(100% - 21.6px), calc(100% - 21.6px) 100%, 0 100%, 0 21.6px); }
.ferme-lieu--compact[data-theme="club"] .ferme-lieu__cadre, .ferme-lieu--compact[data-theme="club"] .ferme-lieu__dedans { clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px); }
.ferme-lieu[data-theme="club"] .ferme-lieu__titre { text-transform: uppercase; letter-spacing: -0.015em; }
.ferme-lieu[data-theme="club"] .ferme-lieu__titre .accent { color: var(--accent); text-shadow: 0 0 26px color-mix(in srgb, var(--accent) 55%, transparent); }
.ferme-lieu__diamant { width: 52px; height: auto; animation: kr-diamant .9s cubic-bezier(.2, .7, .2, 1) .15s both, kr-lueur 3.2s ease-in-out 1.2s infinite; }
.ferme-lieu__sur--ferme::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex: none; }
.ferme-lieu[data-theme="club"] .ferme-lieu__sur--ferme { color: #ff4d73; }
.ferme-lieu[data-theme="club"] .ferme-lieu__sur--ferme::before { box-shadow: 0 0 10px #ff2e5a; animation: kr-voyant 2.4s steps(1, end) infinite; }
.ferme-lieu[data-theme="club"] .ferme-lieu__filet { width: 90px; height: 2px; opacity: 1; background: linear-gradient(90deg, transparent, #8cf60c, transparent); }
@keyframes kr-voyant { 0%, 100% { opacity: 1; } 8% { opacity: .2; } 12% { opacity: 1; } 55% { opacity: 1; } 58% { opacity: .35; } 61% { opacity: 1; } }

/* La Villa : noir chaud, double cadre doré, monogramme, Cinzel et écriture manuscrite */
.ferme-lieu[data-theme="villa"] { background: radial-gradient(120% 75% at 50% 0%, #2a2116 0%, #0a0907 64%); }
.ferme-lieu[data-theme="villa"] .ferme-lieu__dedans { border: 1px solid #c98a3a; outline: 1px solid #c98a3a59; outline-offset: -8px; background: #0a090799; }
.ferme-lieu--compact[data-theme="villa"] .ferme-lieu__dedans { outline-offset: -5px; }
.ferme-lieu__mono { width: 74px; height: auto; margin-bottom: 4px; }
.ferme-lieu[data-theme="villa"] .ferme-lieu__sur { color: #c98a3a; font-family: var(--font-villa-infos); letter-spacing: .32em; }
.ferme-lieu[data-theme="villa"] .ferme-lieu__titre { font-family: var(--font-villa); font-weight: 500; letter-spacing: .03em; font-size: clamp(2.1rem, 9.5vw, 4rem); }
.ferme-lieu__script { font-family: var(--font-villa-script); font-size: clamp(1.9rem, 7.5vw, 2.7rem); line-height: 1.1; color: #e3b46f; margin-top: -4px; }
.ferme-lieu[data-theme="villa"] .ferme-lieu__message { font-family: var(--font-villa-infos); font-weight: 300; letter-spacing: .02em; }
.ferme-lieu[data-theme="villa"] .ferme-lieu__lien { font-family: var(--font-villa-infos); border-color: #c98a3a; }
.ferme-lieu[data-theme="villa"] .ferme-lieu__ligne { font-family: var(--font-villa-infos); font-weight: 400; letter-spacing: .02em; font-size: 16px; }

/* La Table : la carte crème, le filet doré aux coins arrondis, Lora et la terracotta */
.ferme-lieu[data-theme="table"] { background: radial-gradient(70% 60% at 50% 0%, #b8893a1f, transparent 70%), var(--fond); }
.ferme-lieu[data-theme="table"] .ferme-lieu__dedans { background: #fffaf1; border: 1px solid var(--or-table, #b8893a); border-radius: 26px; box-shadow: 0 18px 50px #2a211a14; }
.ferme-lieu--compact[data-theme="table"] .ferme-lieu__dedans { border-radius: 16px; }
.ferme-lieu[data-theme="table"] .ferme-lieu__sur { letter-spacing: .26em; }
.ferme-lieu[data-theme="table"] .ferme-lieu__titre { font-weight: 600; }
.ferme-lieu[data-theme="table"] .ferme-lieu__titre em { display: block; font-style: italic; font-weight: 500; color: var(--accent); }
.ferme-lieu[data-theme="table"] .ferme-lieu__filet { color: var(--or-table, #b8893a); opacity: 1; width: 48px; }
.ferme-lieu[data-theme="table"] .ferme-lieu__message { font-family: var(--font-titre); font-style: italic; font-size: 18px; }
.ferme-lieu[data-theme="table"] .ferme-lieu__ligne { font-family: var(--font-titre); font-style: italic; font-weight: 500; font-size: 16px; }

/* Lieu fermé : la page entière n'est que le logo et le message (ni menu, ni pied, ni bandeau) */
.page-fermee .entete, .page-fermee .pied, .page-fermee #annonce, .page-fermee .direct { display: none !important; }
.page-fermee main { min-height: 100svh; display: grid; }
.ferme-lieu--plein { min-height: 100svh; }
.ferme-lieu__logo { display: block; width: auto; max-width: min(280px, 70%); max-height: 140px; height: auto; object-fit: contain; margin-bottom: 6px; }
.ferme-lieu__logo--club { width: min(260px, 72%); max-height: none; filter: drop-shadow(0 0 22px #8cf60c40); animation: kr-monte .9s cubic-bezier(.2, .7, .2, 1) .15s both; }
.ferme-lieu__accueil { font-family: var(--font-label); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--encre-douce); text-decoration: none; opacity: .7; }
.ferme-lieu__accueil:hover { opacity: 1; color: var(--encre); }
.visuellement-cache { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Le gérant modifie la page d'un lieu fermé : un rappel en haut */
.ferme-rappel { padding: 10px var(--gouttiere); text-align: center; font-size: 13px; font-weight: 600; background: #ff2e5a26; box-shadow: inset 0 -1px 0 #ff2e5a80; color: var(--encre); }

/* L'entrée : la porte d'un lieu fermé reste, un peu dans l'ombre */
.entree .porte--fermee .porte__img { opacity: .18; filter: grayscale(.75) brightness(.6); }
.porte__ferme { display: inline-flex; align-items: center; gap: 6px; margin-top: 2px; padding: 4px 8px; border: 1px solid #ffffff4d; background: #00000073; font-family: var(--font-label); font-size: 8.5px; font-weight: 600; letter-spacing: .1em; line-height: 1.35; text-transform: uppercase; color: #fff; max-width: 100%; text-align: center; }
.porte__ferme::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #ff4d73; box-shadow: 0 0 8px #ff2e5a; }
@media (min-width: 760px) { .porte__ferme { font-size: 10px; } }

/* L'entrée avec un ou deux lieux ouverts : les carrés restent centrés */
.entree__lieux[data-nb="1"] { grid-template-columns: var(--cote); }
@media (min-width: 760px) { .entree__lieux[data-nb="2"] { grid-template-columns: repeat(2, var(--cote)); } }
.entree__lieux[data-nb="0"] { display: grid; grid-template-columns: minmax(0, 1fr); }
.entree__ferme { display: grid; justify-items: center; gap: 10px; padding: 40px 0; text-align: center; color: #ffffffb3; }
.entree__ferme-sur { font-family: var(--font-mono); font-size: 12px; font-weight: 600; letter-spacing: .3em; text-transform: uppercase; color: var(--accent); }

/* Le pied avec moins de colonnes (lieux fermés) */
@media (min-width: 860px) {
  .pied__grille[data-colonnes="2"] { grid-template-columns: 2fr 1fr 1fr; }
  .pied__grille[data-colonnes="1"] { grid-template-columns: 2fr 1fr; }
}
@media (prefers-reduced-motion: reduce) { .ferme-lieu__cadre, .ferme-lieu__diamant, .ferme-lieu__sur--ferme::before { animation: none !important; } }

/* =====================================================================
   COMMANDE AU QR CODE (Villa, La Table) : prix à toucher, barre du bas, panier, suivi
   ===================================================================== */
.cmd-info { display: flex; align-items: center; gap: 12px; margin: var(--space-4) 0; padding: 12px 14px; border-radius: 14px; font-size: 14px; line-height: 1.4;
  background: color-mix(in srgb, var(--accent) 12%, var(--fond-carte)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 45%, transparent); }
.cmd-info__plus { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--accent); color: var(--on-accent); font-weight: 700; font-size: 18px; }
.cmd-prix { position: relative; display: inline-flex; align-items: baseline; gap: 4px; padding: 5px 10px 5px 26px !important; border-radius: 99px; cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 55%, transparent); transition: background-color .2s, box-shadow .2s, transform .15s; }
.cmd-prix::before { content: "+"; position: absolute; left: 9px; top: 50%; translate: 0 -52%; font-weight: 700; font-size: 15px; color: var(--accent); }
.cmd-prix:hover { background: color-mix(in srgb, var(--accent) 12%, transparent); }
.cmd-prix:active { transform: scale(.95); }
.cmd-prix:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.cmd-prix[data-qte] { background: var(--accent); color: var(--on-accent); box-shadow: none; }
.cmd-prix[data-qte]::before { color: var(--on-accent); }
.cmd-prix[data-qte] small { color: inherit; opacity: .8; }
.cmd-prix[data-qte]::after { content: attr(data-qte); position: absolute; top: -8px; right: -6px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 99px; display: grid; place-items: center;
  background: var(--encre); color: var(--fond); font-size: 11px; font-weight: 700; line-height: 1; }
.cmd-prix--ajoute { animation: cmd-ajout .35s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes cmd-ajout { 40% { transform: scale(1.12); } }
.cmd-on .carte__prix, .cmd-on .plat__prix { gap: 8px; }

.cmd-barre { position: fixed; z-index: 60; left: 0; right: 0; bottom: 0; padding: 10px var(--gouttiere) calc(env(safe-area-inset-bottom, 0px) + 10px); pointer-events: none; }
.cmd-barre__btn { pointer-events: auto; display: flex; align-items: center; gap: 12px; width: min(100%, 560px); margin: 0 auto; min-height: 58px; padding: 8px 18px 8px 10px; border: 0; border-radius: 99px; cursor: pointer;
  background: var(--accent); color: var(--on-accent); font: inherit; font-weight: 600; box-shadow: 0 12px 30px #0006; animation: cmd-monte .35s cubic-bezier(.2, .8, .2, 1); }
@keyframes cmd-monte { from { transform: translateY(120%); } }
.cmd-barre__n { display: grid; place-items: center; min-width: 40px; height: 40px; padding: 0 8px; border-radius: 99px; background: var(--on-accent); color: var(--accent); font-weight: 800; font-size: 16px; }
.cmd-barre__txt { flex: 1; text-align: left; }
.cmd-barre__total { font-variant-numeric: tabular-nums; font-weight: 700; }
.cmd-barre__voir { opacity: .85; font-size: 14px; }
.cmd-barre[data-statut="prete"] .cmd-barre__btn { background: #2fbf71; color: #fff; animation: cmd-pulse 1.4s ease-in-out infinite; }
.cmd-barre[data-statut="prete"] .cmd-barre__n { color: #2fbf71; background: #fff; }
@keyframes cmd-pulse { 50% { box-shadow: 0 0 0 10px #2fbf7133, 0 12px 30px #0006; } }
body.cmd-barre-visible { padding-bottom: 90px; }

.cmd-fond { position: fixed; inset: 0; z-index: 70; background: #000a; }
.cmd-feuille { position: fixed; z-index: 71; left: 0; right: 0; bottom: 0; max-height: 92dvh; overflow-y: auto; overscroll-behavior: contain; width: min(100%, 560px); margin: 0 auto;
  padding: 18px var(--gouttiere) calc(env(safe-area-inset-bottom, 0px) + 22px); border-radius: 22px 22px 0 0; background: var(--fond-section, var(--fond)); color: var(--encre);
  box-shadow: 0 -10px 40px #0007; transform: translateY(105%); transition: transform .28s cubic-bezier(.2, .8, .2, 1); outline: none; }
.cmd-feuille--ouverte { transform: none; }
html.cmd-ouverte { overflow: hidden; }
.cmd-feuille__tete { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.cmd-feuille__tete h2 { font-family: var(--font-titre); font-weight: var(--titre-graisse); font-size: 24px; line-height: 1.1; margin: 0; }
.cmd-fermer { width: 40px; height: 40px; border: 0; border-radius: 50%; background: var(--fond-carte); color: var(--encre); font-size: 16px; cursor: pointer; box-shadow: inset 0 0 0 1px var(--trait); }
.cmd-lignes { list-style: none; margin: 0; padding: 0; }
.cmd-ligne { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 10px; align-items: center; padding: 10px 0; border-bottom: 1px dashed var(--trait); }
.cmd-ligne__nom { font-weight: 600; } .cmd-ligne__nom small { font-weight: 400; color: var(--encre-douce); }
.cmd-ligne__prix { min-width: 64px; text-align: right; font-variant-numeric: tabular-nums; }
.cmd-qte { display: inline-flex; align-items: center; gap: 4px; }
.cmd-qte button { width: 36px; height: 36px; border: 0; border-radius: 50%; background: var(--fond-carte); color: var(--encre); font-size: 18px; cursor: pointer; box-shadow: inset 0 0 0 1px var(--trait-fort); }
.cmd-qte output { min-width: 22px; text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; }
.cmd-total { display: flex; justify-content: space-between; align-items: baseline; padding: 14px 0 6px; font-size: 17px; }
.cmd-total strong { font-size: 22px; font-variant-numeric: tabular-nums; }
.cmd-form { display: grid; gap: 12px; margin-top: 8px; }
.cmd-champ { display: grid; gap: 6px; font-size: 13px; font-weight: 600; }
.cmd-champ small { font-weight: 400; color: var(--encre-douce); }
.cmd-champ input { width: 100%; min-height: 50px; padding: 12px 14px; font: inherit; font-size: 16px; font-weight: 400; color: var(--encre); background: var(--fond-carte); border: 1px solid var(--trait-fort); border-radius: 12px; }
.cmd-aide { font-size: 13px; line-height: 1.5; color: var(--encre-douce); margin: 0; }
.cmd-erreur { margin: 0; padding: 10px 12px; border-radius: 10px; background: #d9363e22; color: var(--encre); font-size: 14px; box-shadow: inset 3px 0 0 #d9363e; }
.cmd-envoyer { width: 100%; justify-content: center; min-height: 56px; font-size: 16px; }
.cmd-feuille .piege { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

.cmd-suivi { display: grid; justify-items: center; gap: 6px; text-align: center; padding: 6px 0 4px; }
.cmd-suivi__sur { font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--encre-douce); }
.cmd-suivi__num { font-family: var(--font-titre); font-weight: var(--titre-graisse); font-size: clamp(64px, 22vw, 92px); line-height: 1; color: var(--accent); font-variant-numeric: tabular-nums; }
.cmd-suivi__nom { font-size: 20px; font-weight: 600; }
.cmd-etapes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; width: 100%; list-style: none; margin: 14px 0 4px; padding: 0; counter-reset: e; }
.cmd-etapes li { display: grid; justify-items: center; gap: 6px; font-size: 13px; color: var(--encre-douce); }
.cmd-etapes i { display: block; width: 100%; height: 6px; border-radius: 99px; background: var(--trait); }
.cmd-etapes .fait i { background: var(--accent); }
.cmd-etapes .encours i { background: linear-gradient(90deg, var(--accent), var(--accent) 40%, var(--trait) 40%); background-size: 250% 100%; animation: cmd-charge 1.2s linear infinite; }
.cmd-etapes .encours, .cmd-etapes .fait { color: var(--encre); font-weight: 600; }
@keyframes cmd-charge { from { background-position: 100% 0; } to { background-position: 0 0; } }
.cmd-suivi[data-statut="prete"] .cmd-etapes li:last-child i { background: #2fbf71; animation: none; }
.cmd-suivi__msg { margin: 6px 0 0; font-size: 17px; line-height: 1.45; max-width: 30ch; }
.cmd-suivi[data-statut="prete"] .cmd-suivi__msg { font-size: 20px; font-weight: 700; color: #2fbf71; }
.cmd-detail { width: 100%; margin-top: 12px; text-align: left; border-radius: 12px; background: var(--fond-carte); box-shadow: inset 0 0 0 1px var(--trait); }
.cmd-detail summary { padding: 12px 14px; cursor: pointer; font-size: 14px; font-weight: 600; }
.cmd-detail ul { list-style: none; margin: 0; padding: 0 14px 10px; }
.cmd-detail li { display: flex; justify-content: space-between; gap: 10px; padding: 4px 0; font-size: 14px; }
.cmd-detail li small { color: var(--encre-douce); }
.cmd-detail__note { margin: 0; padding: 0 14px 12px; font-size: 13px; font-style: italic; color: var(--encre-douce); }
.cmd-suivi__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 14px; }
@media (prefers-reduced-motion: reduce) { .cmd-feuille { transition: none; } .cmd-barre__btn, .cmd-prix--ajoute, .cmd-etapes .encours i, .cmd-barre[data-statut="prete"] .cmd-barre__btn { animation: none; } }
/* Plusieurs commandes depuis le même téléphone : une carte par commande, prêtes d'abord */
.cmd-suivis { display: grid; gap: 12px; }
.cmd-suivi--compacte { justify-items: stretch; text-align: left; gap: 4px; padding: 14px 16px; border-radius: 16px; background: var(--fond-carte); box-shadow: inset 0 0 0 1px var(--trait); }
.cmd-suivi--compacte .cmd-suivi__num { font-size: 44px; }
.cmd-suivi--compacte .cmd-suivi__msg { max-width: none; font-size: 15px; }
.cmd-suivi--compacte .cmd-etapes { margin: 8px 0 2px; }
.cmd-suivi--compacte .cmd-suivi__actions { justify-content: flex-start; margin-top: 8px; }
.cmd-suivi--compacte[data-statut="prete"] { box-shadow: inset 0 0 0 2px #2fbf71; }
.cmd-suivi--compacte[data-statut="prete"] .cmd-suivi__msg { font-size: 17px; }
.cmd-finies { margin-top: 14px; border-radius: 12px; background: var(--fond-carte); box-shadow: inset 0 0 0 1px var(--trait); }
.cmd-finies summary { padding: 12px 14px; cursor: pointer; font-size: 14px; font-weight: 600; }
.cmd-finies ul { list-style: none; margin: 0; padding: 0 14px 12px; display: grid; gap: 6px; }
.cmd-finies li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; font-size: 14px; color: var(--encre-douce); }
.cmd-finies li b { color: var(--encre); }
.cmd-aide--centre { text-align: center; margin: 8px 0; }
.cmd-suivi__actions--bas { display: flex; justify-content: center; margin-top: 16px; }
.cmd-barre__n--num { width: auto; padding: 0 12px; white-space: nowrap; }
/* Message de l'équipe au client (plus en stock, proposition) et ses réponses */
.cmd-prix--epuise { position: relative; opacity: .5; text-decoration: line-through; }
.cmd-prix--epuise::after { content: attr(data-epuise); margin-left: 6px; font-size: 11px; font-weight: 700; text-decoration: none; display: inline-block; padding: 1px 6px; border-radius: 99px; background: var(--trait); color: var(--encre); }
.cmd-msg { width: 100%; display: grid; gap: 8px; margin-top: 10px; padding: 12px 14px; border-radius: 14px; text-align: left; background: color-mix(in srgb, var(--accent) 10%, var(--fond-carte)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 40%, transparent); }
.cmd-msg--attente { background: color-mix(in srgb, #ffb020 16%, var(--fond-carte)); box-shadow: inset 0 0 0 2px #ffb020; }
.cmd-msg__titre { font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--encre-douce); }
.cmd-msg p { margin: 0; font-size: 16px; line-height: 1.4; }
.cmd-msg__manque b { text-decoration: line-through; text-decoration-color: #e0484f; }
.cmd-msg__texte { font-weight: 600; }
.cmd-msg__rep { font-size: 14px !important; color: var(--encre-douce); }
.cmd-msg__actions { display: flex; flex-wrap: wrap; gap: 8px; }
.cmd-msg__repondre { display: flex; gap: 6px; }
.cmd-msg__repondre input { flex: 1; min-width: 0; min-height: 44px; padding: 0 12px; border: 1px solid var(--trait-fort); border-radius: 10px; background: var(--fond-carte); color: var(--encre); font: inherit; font-size: 16px; }
.cmd-lien { padding: 0; border: 0; background: none; color: inherit; font: inherit; font-size: 14px; text-decoration: underline; cursor: pointer; justify-self: start; }
.cmd-lien--danger { color: #e0484f; }
.cmd-suivi[data-statut="attente"] .cmd-suivi__msg { font-weight: 700; color: #d98b00; }
.cmd-detail__indispo span { text-decoration: line-through; opacity: .6; }
.cmd-detail em { font-style: normal; font-size: 11px; font-weight: 700; margin-left: 4px; padding: 1px 6px; border-radius: 99px; background: var(--trait); }
.cmd-ajout-info { margin: 0 0 12px; padding: 10px 12px; border-radius: 12px; background: color-mix(in srgb, var(--accent) 14%, var(--fond-carte)); font-size: 14px; }
.cmd-barre[data-statut="attente"] .cmd-barre__btn { background: #ffb020; color: #1f1400; animation: cmd-pulse 1.4s ease-in-out infinite; }
.cmd-barre[data-statut="attente"] .cmd-barre__n { color: #1f1400; background: #fff3d6; }
.cmd-barre[data-statut="ajout"] .cmd-barre__btn { box-shadow: 0 0 0 3px var(--on-accent), 0 12px 30px #0006; }
/* Horaires : un jour fermé, en retrait */
.horaire--ferme dd { color: var(--encre-douce); font-weight: 500; font-style: italic; }
.horaire--ferme dt { opacity: .75; }
.cmd-info--ferme { text-align: left; background: var(--fond-carte); box-shadow: inset 0 0 0 1px var(--trait); color: var(--encre-douce); }
.cmd-info--ferme .cmd-info__plus { background: var(--trait); color: var(--encre); font-family: Georgia, serif; font-style: italic; }

/* ---------- Navettes : réservation en ligne ---------- */
.navette-resa { display: grid; gap: var(--space-8); }
.navette-resa__tete { display: grid; gap: var(--space-3); max-width: 62ch; }
.navette-resa .succes ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; color: var(--encre-douce); }
.navette-resa .succes ul b { color: var(--encre); }
.navette .navette__resa { margin-top: var(--space-3); }

/* ---------- Commande à une table numérotée, « Appeler un serveur » ---------- */
.cmd-info__table { display: inline-block; padding: 1px 8px; border-radius: 99px; background: var(--accent); color: var(--on-accent); font-weight: 700; }
.cmd-retrait { margin: 0; padding: 0; border: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.cmd-retrait legend { margin-bottom: 6px; font-size: 13px; font-weight: 600; }
.cmd-retrait__choix { position: relative; display: block; cursor: pointer; }
.cmd-retrait__choix input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.cmd-retrait__choix span { display: grid; gap: 2px; height: 100%; padding: 12px; border-radius: 12px; background: var(--fond-carte); box-shadow: inset 0 0 0 1px var(--trait-fort); font-size: 14px; }
.cmd-retrait__choix small { font-size: 12px; color: var(--encre-douce); }
.cmd-retrait__choix input:checked + span { box-shadow: inset 0 0 0 2px var(--accent); background: color-mix(in srgb, var(--accent) 12%, var(--fond-carte)); }
.cmd-retrait__choix input:focus-visible + span { box-shadow: var(--focus-ring); }
.cmd-appel { position: fixed; z-index: 61; right: 14px; bottom: calc(env(safe-area-inset-bottom, 0px) + 16px); display: inline-flex; align-items: center; gap: 8px; min-height: 52px; padding: 0 18px 0 14px;
  border: 0; border-radius: 99px; background: var(--encre); color: var(--fond); font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; box-shadow: 0 10px 28px #0005; transition: transform .2s, background-color .2s; }
.cmd-appel:active { transform: scale(.96); }
.cmd-appel:focus-visible { outline: none; box-shadow: var(--focus-ring), 0 10px 28px #0005; }
.cmd-appel__ico { font-size: 20px; line-height: 1; }
.cmd-appel[data-etat="attente"] { background: #ffb020; color: #1f1400; animation: cmd-pulse 1.4s ease-in-out infinite; }
.cmd-appel[data-etat="arrive"] { background: #2fbf71; color: #fff; }
body.cmd-barre-visible .cmd-appel { bottom: calc(env(safe-area-inset-bottom, 0px) + 84px); }
html.cmd-ouverte .cmd-appel { visibility: hidden; }
.cmd-motifs { display: grid; gap: 8px; margin: 14px 0; }
.cmd-motif { display: grid; gap: 2px; min-height: 58px; padding: 10px 16px; border: 0; border-radius: 14px; text-align: left; cursor: pointer; font: inherit; color: var(--encre);
  background: var(--fond-carte); box-shadow: inset 0 0 0 1px var(--trait-fort); }
.cmd-motif b { font-size: 16px; }
.cmd-motif small { font-size: 12px; color: var(--encre-douce); }
.cmd-motif:hover, .cmd-motif:focus-visible { box-shadow: inset 0 0 0 2px var(--accent); outline: none; }
.cmd-motif:disabled { opacity: .5; }
.cmd-appel-etat { display: grid; gap: 4px; margin-top: 10px; padding: 14px 16px; border-radius: 14px; }
.cmd-appel-etat strong { font-size: 18px; }
.cmd-appel-etat--attente { background: #ffb02026; box-shadow: inset 0 0 0 1px #ffb020; }
.cmd-appel-etat--arrive { background: #2fbf7126; box-shadow: inset 0 0 0 1px #2fbf71; }
@media (prefers-reduced-motion: reduce) { .cmd-appel[data-etat="attente"] { animation: none; } }

/* ---------- Carte des bouteilles : fermée tant que le QR du club n'est pas scanné ---------- */
.carte-verrou { display: grid; justify-items: center; gap: var(--space-3); max-width: 560px; margin: 0 auto; padding: var(--space-8) var(--space-6); text-align: center;
  background: var(--fond-carte); box-shadow: inset 0 0 0 1px var(--trait); border-radius: 18px; }
.carte-verrou__ico { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; font-size: 28px; background: color-mix(in srgb, var(--accent) 16%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 50%, transparent); }
.carte-verrou h3 { font-family: var(--font-affiche); font-weight: 900; text-transform: uppercase; font-size: clamp(1.3rem, 5vw, 1.8rem); line-height: 1.05; }
.carte-verrou p { color: var(--encre-douce); max-width: 42ch; }
.carte-verrou--erreur { box-shadow: inset 0 0 0 1px #ff6b81; }
.carte-verrou--erreur p { color: var(--encre); }