/* ============================================
   TO SALA EVENT - DESIGN SYSTEM CORPORATE RDC
   ============================================ */

/* ── Polices locales Helvetica ── */
@font-face {
  font-family: "Helvetica";
  src: url("fonts/helvetica-light-587ebe5a59211.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Helvetica";
  src: url("fonts/Helvetica.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Helvetica";
  src: url("fonts/Helvetica-Oblique.ttf") format("truetype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Helvetica";
  src: url("fonts/Helvetica-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Helvetica";
  src: url("fonts/Helvetica-BoldOblique.ttf") format("truetype");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Helvetica";
  src: url("fonts/helvetica-rounded-bold-5871d05ead8de.otf") format("opentype");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "HelveticaCompressed";
  src: url("fonts/helvetica-compressed-5871d14b6903a.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ── MODE CLAIR : accent bleu logo (jaune réservé au mode sombre) ── */
  --primary: #2563eb;
  --primary-dark: #1d4ed8;
  --primary-rgb: 37, 99, 235;
  --on-primary: #ffffff;
  --primary-text: #1e3a8a;
  --secondary: #3b82f6;
  --secondary-dark: #2563eb;
  --accent: #1e3a8a;
  --accent-light: #3b82f6;

  /* ── Tokens sémantiques — MODE CLAIR ── */
  --bg-base: #f8fafc;
  --bg-surface: #ffffff;
  --bg-surface-2: #f1f5f9;
  --bg-alt: #e8eef5;
  --bg-dark-section: #12100c; /* hero, footer, sections sombres */
  --bg-overlay: rgba(255, 255, 255, 0.75);
  --bg-card: rgba(255, 255, 255, 0.82);
  --bg-card-border: rgba(37, 99, 235, 0.14);

  --text-base: #111827;
  --text-muted: #6b7280;
  --text-soft: #9ca3af;
  --text-on-dark: #ffffff;
  --text-on-dark-muted: rgba(255, 255, 255, 0.72);

  --border: #e5e7eb;
  --border-strong: #d1d5db;

  /* ── Legacy aliases (rétro-compat) ── */
  --neutral-dark: var(--text-base);
  --neutral-light: var(--bg-base);
  --white: #ffffff;
  --black: #0f172a;

  /* ── Gradients ── */
  --gradient-signature: linear-gradient(135deg, #3b82f6 0%, #1e3a8a 100%);
  --gradient-gold: linear-gradient(135deg, #60a5fa 0%, #2563eb 100%);

  /* ── Ombres ── */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 24px rgba(0, 0, 0, 0.12);
  --shadow-xl: 0 20px 40px rgba(0, 0, 0, 0.15);
  --shadow-gold: 0 8px 24px rgba(37, 99, 235, 0.2), 0 4px 12px rgba(30, 58, 138, 0.1);

  /* ── Rayon, transitions ── */
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-xl: 32px;
  --transition: 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);

  /* ── Typographie ── */
  --font: "Helvetica", "Helvetica Neue", Arial, sans-serif;
  --font-display: "Helvetica", "Helvetica Neue", Arial, sans-serif;
  --font-compressed:
    "HelveticaCompressed", "Helvetica", "Helvetica Neue", Arial, sans-serif;

  /* ── Effets ── */
  --glow-green: 0 0 32px rgba(37, 99, 235, 0.35), 0 0 48px rgba(30, 58, 138, 0.15);

  /* ── Safe area ── */
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --touch-min: 44px;
}

/* ── MODE SOMBRE ── */
[data-theme="dark"] {
  /* ── Mode sombre : jaune / or logo (inchangé visuellement) ── */
  --primary: #fdd835;
  --primary-dark: #e6b800;
  --primary-rgb: 253, 216, 53;
  --on-primary: #1a1f35;
  --primary-text: #fcd34d;
  --secondary: #ffc107;
  --secondary-dark: #e6a800;
  --gradient-signature: linear-gradient(135deg, #fdd835 0%, #1e3a8a 100%);
  --gradient-gold: linear-gradient(135deg, #fdd835 0%, #ffc107 100%);
  --shadow-gold: 0 8px 24px rgba(var(--primary-rgb), 0.25);
  --glow-green: 0 0 32px rgba(var(--primary-rgb), 0.45);

  --bg-base: #0d0c0a;
  --bg-surface: #16140f;
  --bg-surface-2: #12100c;
  --bg-alt: #0f0e0a;
  --bg-dark-section: #080705;
  --bg-overlay: rgba(18, 16, 10, 0.88);
  --bg-card: rgba(22, 20, 14, 0.9);
  --bg-card-border: rgba(var(--primary-rgb), 0.2);

  --text-base: #f5f2e8;
  --text-muted: #94a3b8;
  --text-soft: #64748b;
  --border: rgba(255, 255, 255, 0.1);
  --border-strong: rgba(255, 255, 255, 0.18);

  --neutral-dark: var(--text-base);
  --neutral-light: var(--bg-base);
  --white: #0d0c0a;
  --black: #fffbeb;

  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 10px 24px rgba(0, 0, 0, 0.5);
  --shadow-xl: 0 20px 40px rgba(0, 0, 0, 0.6);
}

/* Reset & base */
*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
  overflow-x: hidden;
}
body {
  margin: 0;
  font-family: var(--font);
  font-size: clamp(15px, 2.5vw, 16px);
  line-height: 1.5;
  color: var(--text-base);
  background: var(--bg-base);
  min-height: 100vh;
  min-height: calc(100vh - var(--safe-bottom));
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  transition:
    background 0.35s var(--transition),
    color 0.35s var(--transition);
}
@media (max-width: 767px) {
  body {
    line-height: 1.47;
  }
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}
a {
  color: var(--accent);
  text-decoration: none;
  transition: color var(--transition);
}
a:hover {
  color: var(--accent-light);
}
button {
  font-family: inherit;
  cursor: pointer;
  border: none;
}
input,
select,
textarea {
  font-family: inherit;
  font-size: 1rem;
}

/* Skip link accessibilité */
.skip-link {
  position: absolute;
  top: -100px;
  left: 16px;
  padding: 12px 20px;
  background: var(--primary);
  color: var(--on-primary);
  font-weight: 600;
  z-index: 9999;
  border-radius: var(--radius-sm);
  transition: top 0.2s;
}
.skip-link:focus {
  top: 16px;
  outline: 2px solid var(--secondary);
  outline-offset: 2px;
}

/* Container */
.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding-left: max(16px, var(--safe-left));
  padding-right: max(16px, var(--safe-right));
}
@media (min-width: 480px) {
  .container {
    padding-left: max(20px, var(--safe-left));
    padding-right: max(20px, var(--safe-right));
  }
}
@media (min-width: 768px) {
  .container {
    padding-left: max(24px, var(--safe-left));
    padding-right: max(24px, var(--safe-right));
  }
}
@media (min-width: 1024px) {
  .container {
    padding-left: max(32px, var(--safe-left));
    padding-right: max(32px, var(--safe-right));
  }
}

/* ========== TYPOGRAPHY (fluid) ========== */
h1,
.h1 {
  font-size: clamp(1.75rem, 5vw, 3rem);
  line-height: 1.17;
  font-weight: 700;
  margin: 0 0 0.5em;
  color: var(--black);
}

h2,
.h2 {
  font-size: clamp(1.35rem, 3.5vw, 2rem);
  line-height: 1.25;
  font-weight: 600;
  margin: 0 0 0.75em;
  color: var(--black);
}

h3,
.h3 {
  font-size: clamp(1.125rem, 2.5vw, 1.5rem);
  line-height: 1.33;
  font-weight: 500;
  margin: 0 0 0.5em;
  color: var(--black);
}

p {
  margin: 0 0 1em;
  font-size: 16px;
  line-height: 1.5;
}
@media (max-width: 767px) {
  p {
    font-size: 15px;
    line-height: 1.47;
  }
}

/* ========== BUTTONS ========== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4em;
  box-sizing: border-box;
  padding: 12px 24px;
  font-size: 15px;
  line-height: 1.25;
  font-weight: 600;
  letter-spacing: 0.01em;
  border-radius: var(--radius-md);
  transition:
    transform var(--transition),
    box-shadow var(--transition),
    background var(--transition);
  min-height: 48px;
  min-width: 48px;
  max-width: 100%;
  text-align: center;
  white-space: normal;
  word-break: break-word;
  overflow-wrap: anywhere;
  flex-shrink: 1;
}
.btn:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-lg);
}
.btn:active {
  transform: translateY(0);
}
.btn:focus-visible {
  outline: 2px solid var(--secondary);
  outline-offset: 2px;
}

.btn-primary {
  background: var(--primary);
  color: var(--on-primary);
  box-shadow: var(--shadow-md);
}
.btn-primary:hover {
  background: var(--primary-dark);
  color: var(--on-primary);
  box-shadow: var(--shadow-xl);
}

.btn-secondary {
  background: var(--gradient-gold);
  color: #ffffff;
  box-shadow: var(--shadow-gold);
}
[data-theme="dark"] .btn-secondary {
  color: var(--neutral-dark);
}
.btn-secondary:hover {
  box-shadow: 0 12px 28px rgba(var(--primary-rgb), 0.35);
}

.btn-ghost {
  background: transparent;
  color: var(--neutral-dark);
  border: 2px solid currentColor;
}
.btn-ghost:hover {
  background: rgba(255, 255, 255, 0.1);
}

.btn-lg {
  padding: 16px 32px;
  font-size: 18px;
}
.btn-block {
  display: flex;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}
.btn-sm {
  min-height: 40px;
  min-width: 40px;
  padding: 8px 14px;
  font-size: 0.875rem;
}
.btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

/* ========== NAVBAR EXECUTIVE ========== */
.navbar {
  position: sticky;
  top: 0;
  z-index: 4000;
  background: rgba(26, 31, 53, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
  padding-top: var(--safe-top);
}
[data-theme="dark"] .navbar {
  background: rgba(15, 23, 42, 0.92);
}

.navbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1400px;
  margin: 0 auto;
  padding: 6px max(16px, var(--safe-left));
  padding-right: max(16px, var(--safe-right));
  gap: clamp(12px, 3vw, 24px);
}
@media (min-width: 768px) {
  .navbar-inner {
    padding-left: max(24px, var(--safe-left));
    padding-right: max(24px, var(--safe-right));
  }
}

/* Logo header : même emplacement pour les deux variantes thème (grille 1×1) */
.navbar .navbar-logo {
  display: grid !important;
  grid-template-columns: auto;
  grid-template-rows: auto;
  align-items: center;
  justify-items: start;
  flex-shrink: 0;
  text-decoration: none !important;
  line-height: 0;
  max-width: min(300px, 56vw);
  margin-right: 0.25rem;
  background: transparent;
  box-shadow: none;
}
.navbar .navbar-logo img.tosala-logo-light,
.navbar .navbar-logo img.tosala-logo-dark {
  grid-column: 1;
  grid-row: 1;
  height: auto !important;
  width: auto !important;
  max-height: 48px !important;
  max-width: 100%;
  object-fit: contain;
  object-position: left center;
  filter: none;
  background: transparent;
}
.navbar .navbar-logo img.tosala-logo-dark {
  display: none !important;
}
.navbar .navbar-logo img.tosala-logo-light {
  display: block !important;
}
[data-theme="dark"] .navbar .navbar-logo img.tosala-logo-light {
  display: none !important;
}
[data-theme="dark"] .navbar .navbar-logo img.tosala-logo-dark {
  display: block !important;
}
@media (min-width: 768px) {
  .navbar .navbar-logo img.tosala-logo-light,
  .navbar .navbar-logo img.tosala-logo-dark {
    max-height: 56px !important;
  }
  .navbar .navbar-logo {
    max-width: min(340px, 42vw);
  }
}
@media (max-width: 767px) {
  .navbar .navbar-logo img.tosala-logo-light,
  .navbar .navbar-logo img.tosala-logo-dark {
    max-height: 40px !important;
  }
  .navbar .navbar-logo {
    max-width: min(200px, 62vw);
  }
}

.navbar-toggle {
  display: none;
  position: relative;
  z-index: 3002;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 6px;
  width: 48px;
  height: 48px;
  background: rgba(255, 255, 255, 0.08);
  color: #f1f5f9;
  padding: 8px;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(255, 255, 255, 0.25);
  transition:
    color var(--transition),
    background var(--transition),
    border-color var(--transition);
  cursor: pointer;
}
.navbar-toggle:hover {
  color: var(--secondary);
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.4);
}
.navbar-toggle span {
  display: block;
  height: 2px;
  width: 100%;
  max-width: 24px;
  margin: 0 auto;
  background: currentColor;
  transition:
    transform var(--transition),
    opacity var(--transition);
}
.navbar-toggle[aria-expanded="true"] {
  color: #000;
  background: rgba(255, 255, 255, 0.95);
  border-color: rgba(0, 0, 0, 0.2);
}
.navbar-toggle[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}
.navbar-toggle[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}
.navbar-toggle[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}
@media (max-width: 1023px) {
  .navbar-toggle {
    display: flex;
  }
}

.navbar-menu {
  display: flex;
  align-items: center;
  gap: 8px;
}
@media (min-width: 1024px) {
  .navbar-inner {
    flex-wrap: wrap;
    row-gap: 10px;
  }
  .navbar-menu {
    flex: 1 1 auto;
    min-width: 0;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-content: center;
    gap: 6px 10px;
  }
  .navbar-menu .nav-link {
    padding: 8px 12px;
    font-size: 0.9rem;
    white-space: nowrap;
  }
  .navbar-menu .nav-auth {
    display: inline-flex;
    flex-wrap: nowrap;
    justify-content: flex-end;
    align-items: center;
    gap: 8px 10px;
    min-width: 0;
  }
  .navbar-menu .nav-auth .btn,
  .navbar-menu .nav-user-link {
    white-space: nowrap;
  }
}

/* Menu mobile : styles consolidés plus bas (section « 8. Menu mobile ») */

.nav-link {
  color: var(--neutral-light);
  font-weight: 500;
  padding: 10px 16px;
  border-radius: var(--radius-sm);
  transition:
    color var(--transition),
    transform var(--transition),
    box-shadow var(--transition);
  position: relative;
}
.nav-link:hover {
  color: var(--secondary);
  transform: scale(1.05);
}
.nav-link.active {
  color: var(--secondary);
  font-weight: 600;
}
.nav-link.active::after {
  content: "";
  position: absolute;
  bottom: 4px;
  left: 16px;
  right: 16px;
  height: 2px;
  background: var(--secondary);
  border-radius: 1px;
}
.nav-admin {
  color: var(--secondary);
  cursor: pointer;
}
.nav-admin:not(.hidden):hover {
  color: var(--secondary);
  opacity: 0.9;
}

.nav-user {
  font-weight: 500;
  color: var(--neutral-light);
}
.nav-user-link {
  color: var(--secondary);
  text-decoration: none;
  cursor: pointer;
  padding: 6px 10px;
  border-radius: 6px;
  transition:
    color 0.2s,
    background 0.2s;
}
.nav-user-link:hover {
  color: var(--secondary);
  background: rgba(255, 255, 255, 0.08);
}
.nav-auth {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
/* Connexion / Inscription visibles sur la navbar sombre */
.navbar .nav-auth .btn-ghost {
  color: var(--neutral-light);
  border-color: var(--neutral-light);
}
.navbar .nav-auth .btn-ghost:hover {
  color: var(--secondary);
  border-color: var(--secondary);
  background: rgba(255, 255, 255, 0.12);
}

/* Bouton Connexion : toujours noir (texte) sur fond clair pour lisibilité */
.navbar .nav-auth .btn-ghost[data-auth="login"],
.nav-auth .btn-ghost[data-auth="login"] {
  color: #000 !important;
  border-color: rgba(0, 0, 0, 0.4) !important;
  background: #fff !important;
}
.navbar .nav-auth .btn-ghost[data-auth="login"]:hover,
.nav-auth .btn-ghost[data-auth="login"]:hover {
  color: #000 !important;
  border-color: #000 !important;
  background: #f5f5f5 !important;
}
.navbar .nav-auth .btn-logout {
  color: var(--neutral-light);
  border-color: rgba(255, 255, 255, 0.4);
}
.navbar .nav-auth .btn-logout:hover {
  color: var(--secondary);
  border-color: var(--secondary);
  background: rgba(255, 255, 255, 0.12);
}

/* (anciens overrides supprimés — remplacés par le bloc navbar consolidé en bas) */

/* ========== HERO BANNER ========== */
.hero {
  position: relative;
  min-height: 75vh;
  min-height: 75dvh;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: max(60px, calc(40px + var(--safe-top)));
  padding-bottom: max(40px, calc(24px + var(--safe-bottom)));
  padding-left: var(--safe-left);
  padding-right: var(--safe-right);
  background: var(--gradient-signature);
  background-size: cover;
  overflow: hidden;
}
@media (min-width: 768px) {
  .hero {
    padding-top: max(100px, calc(60px + var(--safe-top)));
    padding-bottom: 60px;
  }
}
.hero--compact {
  padding-top: max(48px, calc(32px + var(--safe-top)));
  padding-bottom: max(24px, calc(16px + var(--safe-bottom)));
  align-items: center;
}
@media (min-width: 768px) {
  .hero--compact {
    padding-top: max(56px, calc(40px + var(--safe-top)));
    padding-bottom: 28px;
  }
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.04'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  opacity: 0.6;
  pointer-events: none;
}
.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(26, 31, 53, 0.3) 0%,
    rgba(26, 31, 53, 0.5) 100%
  );
  pointer-events: none;
}
.hero-content {
  position: relative;
  z-index: 1;
  text-align: center;
  padding: clamp(16px, 4vw, 20px) clamp(16px, 4vw, 24px) clamp(32px, 6vw, 48px);
  max-width: 100%;
  animation: heroFade 0.8s ease-out;
}
@keyframes heroFade {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.hero-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  margin-bottom: 24px;
}
.hero-logo {
  height: 200px;
  width: auto;
  margin: 0 auto 0;
  filter: drop-shadow(0 4px 20px rgba(0, 0, 0, 0.2));
}
@media (max-width: 767px) {
  .hero-logo {
    height: 120px;
  }
}

/* Animation visuelle 4 étapes à côté du logo */
.hero-steps-visual {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 4px 16px;
  margin-top: 20px;
  max-width: 420px;
}
.hero-step-connector {
  width: 24px;
  height: 2px;
  background: linear-gradient(90deg, var(--secondary), rgba(var(--primary-rgb), 0.4));
  border-radius: 1px;
  opacity: 0;
  animation:
    heroConnectorIn 0.4s ease-out forwards,
    heroConnectorShine 2.5s ease-in-out infinite 1.5s;
}
.hero-step-connector:nth-of-type(1) {
  animation-delay: 0.35s, 1.9s;
}
.hero-step-connector:nth-of-type(2) {
  animation-delay: 0.7s, 2.2s;
}
.hero-step-connector:nth-of-type(3) {
  animation-delay: 1.05s, 2.5s;
}
@keyframes heroConnectorIn {
  from {
    opacity: 0;
    transform: scaleX(0);
    transform-origin: left;
  }
  to {
    opacity: 0.9;
    transform: scaleX(1);
    transform-origin: left;
  }
}
@keyframes heroConnectorShine {
  0%,
  100% {
    opacity: 0.6;
    filter: brightness(1);
  }
  50% {
    opacity: 1;
    filter: brightness(1.4);
  }
}
.hero-step-item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  opacity: 0;
  transform: translateY(12px) scale(0.9);
  animation: heroStepIn 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
  cursor: pointer;
}
.hero-step-item:focus {
  outline: none;
}
.hero-step-item:focus-visible {
  outline: 2px solid var(--secondary);
  outline-offset: 4px;
  border-radius: 12px;
}
/* Zone de survol étendue pour garder le panneau visible quand la souris va vers le texte */
.hero-step-item::after {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  margin-left: -130px;
  width: 260px;
  bottom: -160px;
  z-index: 5;
}
.hero-step-item[data-step="1"] {
  animation-delay: 0.1s;
}
.hero-step-item[data-step="2"] {
  animation-delay: 0.45s;
}
.hero-step-item[data-step="3"] {
  animation-delay: 0.8s;
}
.hero-step-item[data-step="4"] {
  animation-delay: 1.15s;
}
@keyframes heroStepIn {
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
.hero-step-icon {
  position: relative;
  z-index: 1;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  border: 2px solid var(--secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--secondary);
  box-shadow: 0 0 16px rgba(var(--primary-rgb), 0.3);
  animation: heroStepIconCycle 5s ease-in-out infinite;
}
.hero-step-item[data-step="1"] .hero-step-icon {
  animation-delay: 0s;
}
.hero-step-item[data-step="2"] .hero-step-icon {
  animation-delay: -1.25s;
}
.hero-step-item[data-step="3"] .hero-step-icon {
  animation-delay: -2.5s;
}
.hero-step-item[data-step="4"] .hero-step-icon {
  animation-delay: -3.75s;
}
@keyframes heroStepIconCycle {
  0%,
  8% {
    transform: scale(1);
    box-shadow: 0 0 16px rgba(var(--primary-rgb), 0.3);
    border-color: var(--secondary);
    background: rgba(255, 255, 255, 0.2);
  }
  4% {
    transform: scale(1.18);
    box-shadow: 0 0 28px rgba(var(--primary-rgb), 0.8);
    border-color: #fff;
    background: rgba(255, 255, 255, 0.35);
  }
  25%,
  33% {
    transform: scale(1);
    box-shadow: 0 0 16px rgba(var(--primary-rgb), 0.3);
    border-color: var(--secondary);
    background: rgba(255, 255, 255, 0.2);
  }
  29% {
    transform: scale(1.18);
    box-shadow: 0 0 28px rgba(var(--primary-rgb), 0.8);
    border-color: #fff;
    background: rgba(255, 255, 255, 0.35);
  }
  50%,
  58% {
    transform: scale(1);
    box-shadow: 0 0 16px rgba(var(--primary-rgb), 0.3);
    border-color: var(--secondary);
    background: rgba(255, 255, 255, 0.2);
  }
  54% {
    transform: scale(1.18);
    box-shadow: 0 0 28px rgba(var(--primary-rgb), 0.8);
    border-color: #fff;
    background: rgba(255, 255, 255, 0.35);
  }
  75%,
  83% {
    transform: scale(1);
    box-shadow: 0 0 16px rgba(var(--primary-rgb), 0.3);
    border-color: var(--secondary);
    background: rgba(255, 255, 255, 0.2);
  }
  79% {
    transform: scale(1.18);
    box-shadow: 0 0 28px rgba(var(--primary-rgb), 0.8);
    border-color: #fff;
    background: rgba(255, 255, 255, 0.35);
  }
  100% {
    transform: scale(1);
    box-shadow: 0 0 16px rgba(var(--primary-rgb), 0.3);
  }
}
.hero-step-icon svg {
  width: 22px;
  height: 22px;
}
.hero-step-label {
  position: relative;
  z-index: 1;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: rgba(255, 255, 255, 0.95);
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
  animation: heroLabelCycle 5s ease-in-out infinite;
}
.hero-step-item[data-step="1"] .hero-step-label {
  animation-delay: 0s;
}
.hero-step-item[data-step="2"] .hero-step-label {
  animation-delay: -1.25s;
}
.hero-step-item[data-step="3"] .hero-step-label {
  animation-delay: -2.5s;
}
.hero-step-item[data-step="4"] .hero-step-label {
  animation-delay: -3.75s;
}
@keyframes heroLabelCycle {
  0%,
  8% {
    opacity: 0.9;
    transform: scale(1);
  }
  4% {
    opacity: 1;
    transform: scale(1.08);
    text-shadow: 0 0 12px rgba(var(--primary-rgb), 0.6);
  }
  25%,
  33% {
    opacity: 0.9;
    transform: scale(1);
  }
  29% {
    opacity: 1;
    transform: scale(1.08);
    text-shadow: 0 0 12px rgba(var(--primary-rgb), 0.6);
  }
  50%,
  58% {
    opacity: 0.9;
    transform: scale(1);
  }
  54% {
    opacity: 1;
    transform: scale(1.08);
    text-shadow: 0 0 12px rgba(var(--primary-rgb), 0.6);
  }
  75%,
  83% {
    opacity: 0.9;
    transform: scale(1);
  }
  79% {
    opacity: 1;
    transform: scale(1.08);
    text-shadow: 0 0 12px rgba(var(--primary-rgb), 0.6);
  }
  100% {
    opacity: 0.9;
    transform: scale(1);
  }
}

/* Panneau d'explication au survol de chaque étape */
.hero-step-detail {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translate(-50%, 12px);
  width: 240px;
  padding: 14px 16px;
  margin-top: 10px;
  background: rgba(26, 31, 53, 0.98);
  border: 1px solid rgba(var(--primary-rgb), 0.4);
  border-radius: var(--radius-md);
  color: var(--neutral-light);
  font-size: 0.8rem;
  line-height: 1.45;
  box-shadow:
    var(--shadow-xl),
    0 0 24px rgba(0, 0, 0, 0.3);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity 0.25s ease,
    visibility 0.25s ease,
    transform 0.25s ease;
  z-index: 20;
  text-align: left;
}
.hero-step-detail::before {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 8px solid transparent;
  border-bottom-color: rgba(var(--primary-rgb), 0.4);
}
.hero-step-item:hover .hero-step-detail,
.hero-step-item:focus .hero-step-detail,
.hero-step-item:focus-within .hero-step-detail {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 6px);
  pointer-events: auto;
}
.hero-step-detail strong {
  display: block;
  color: var(--secondary);
  font-size: 0.85rem;
  margin-bottom: 6px;
}
.hero-step-detail p {
  margin: 0;
  color: rgba(255, 255, 255, 0.9);
}
@media (max-width: 767px) {
  .hero-step-detail {
    width: 220px;
    padding: 12px 14px;
    font-size: 0.75rem;
  }
  .hero-step-detail strong {
    font-size: 0.8rem;
  }
}
@media (max-width: 599px) {
  .hero-step-detail {
    left: 50%;
    right: auto;
    transform: translate(-50%, 12px);
  }
  .hero-step-item:hover .hero-step-detail,
  .hero-step-item:focus .hero-step-detail,
  .hero-step-item:focus-within .hero-step-detail {
    transform: translate(-50%, 6px);
  }
  .hero-step-item::after {
    margin-left: -110px;
    width: 220px;
  }
}

@media (max-width: 767px) {
  .hero-steps-visual {
    margin-top: 16px;
    gap: 4px 10px;
    max-width: 100%;
  }
  .hero-step-connector {
    width: 16px;
  }
  .hero-step-icon {
    width: 36px;
    height: 36px;
  }
  .hero-step-icon svg {
    width: 18px;
    height: 18px;
  }
  .hero-step-label {
    font-size: 0.65rem;
  }
}
@media (max-width: 599px) {
  .hero-steps-visual {
    gap: 12px 8px;
  }
  .hero-step-connector {
    display: none;
  }
}

@media (max-width: 767px) {
  .hero-brand {
    margin-bottom: 16px;
  }
}

.hero-title {
  font-size: 4rem;
  line-height: 1.1;
  font-weight: 700;
  color: white;
  margin: 0 0 16px;
  text-shadow: 0 2px 20px rgba(0, 0, 0, 0.2);
}
@media (max-width: 767px) {
  .hero-title {
    font-size: 2rem;
  }
}

.hero-subtitle {
  font-size: 1.5rem;
  color: var(--secondary);
  margin: 0 0 32px;
  font-weight: 500;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.15);
}
@media (max-width: 767px) {
  .hero-subtitle {
    font-size: 1.1rem;
    margin-bottom: 24px;
  }
}

.hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: center;
}
.hero-cta .btn {
  min-height: 52px;
}

.hero-scroll {
  position: absolute;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%);
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.875rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.scroll-arrow {
  width: 24px;
  height: 24px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  animation: scrollBounce 2s ease-in-out infinite;
}
@keyframes scrollBounce {
  0%,
  100% {
    transform: rotate(45deg) translateY(0);
  }
  50% {
    transform: rotate(45deg) translateY(6px);
  }
}

/* ========== SECTIONS ========== */
.section {
  padding: clamp(40px, 8vw, 64px) 0;
  animation: sectionEnter 0.6s ease-out;
}
@media (min-width: 768px) {
  .section {
    padding: clamp(56px, 10vw, 80px) 0;
  }
}
@keyframes sectionEnter {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.section-alt {
  background: var(--white);
}
[data-theme="dark"] .section-alt {
  background: var(--neutral-light);
}
.section-title {
  text-align: center;
  margin-bottom: 48px;
}
.section-cta {
  text-align: center;
  margin-top: 40px;
}

/* ========== STEPS - DÉROULEMENT ========== */
.steps-section {
  overflow: hidden;
}
.steps-intro {
  text-align: center;
  max-width: 560px;
  margin: -24px auto 48px;
  font-size: 1.1rem;
  color: var(--accent);
  font-weight: 500;
}
.steps-timeline {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  align-items: start;
}
@media (max-width: 1023px) {
  .steps-timeline {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 599px) {
  .steps-timeline {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}
.steps-line {
  position: absolute;
  top: 48px;
  left: 12.5%;
  right: 12.5%;
  height: 3px;
  background: linear-gradient(90deg, var(--primary), var(--accent));
  border-radius: 2px;
  opacity: 0.25;
  animation: stepsLineDraw 1.2s ease-out 0.5s backwards;
}
@media (max-width: 1023px) {
  .steps-line {
    left: 12.5%;
    right: 12.5%;
    top: 44px;
  }
}
@media (max-width: 599px) {
  .steps-timeline {
    padding-left: 0;
  }
  .steps-line {
    left: 20px;
    right: auto;
    top: 32px;
    bottom: 32px;
    width: 3px;
    height: calc(100% - 64px);
    background: linear-gradient(180deg, var(--primary), var(--accent));
  }
  .step-card {
    text-align: left;
    padding-left: 56px;
    position: relative;
  }
  .step-number {
    left: 20px;
    transform: translateX(-50%);
  }
  .step-card .step-number {
    animation-delay: inherit;
  }
  .step-icon {
    margin: 16px auto;
  }
}
@keyframes stepsLineDraw {
  from {
    transform: scaleX(0);
    transform-origin: left center;
  }
  to {
    transform: scaleX(1);
    transform-origin: left center;
  }
}
@media (max-width: 599px) {
  @keyframes stepsLineDraw {
    from {
      transform: scaleY(0);
      transform-origin: center top;
    }
    to {
      transform: scaleY(1);
      transform-origin: center top;
    }
  }
}
.step-card {
  position: relative;
  text-align: center;
  padding: 24px 16px;
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  transition:
    transform var(--transition),
    box-shadow var(--transition);
  opacity: 0;
  transform: translateY(24px);
  animation: stepCardEnter 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}
.step-card[data-step="1"] {
  animation-delay: 0.1s;
}
.step-card[data-step="2"] {
  animation-delay: 0.35s;
}
.step-card[data-step="3"] {
  animation-delay: 0.6s;
}
.step-card[data-step="4"] {
  animation-delay: 0.85s;
}
.step-card:hover {
  transform: translateY(-6px);
  box-shadow:
    var(--shadow-xl),
    0 0 24px rgba(var(--primary-rgb), 0.12);
}
[data-theme="dark"] .step-card {
  background: var(--neutral-light);
}
@keyframes stepCardEnter {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.step-number {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--gradient-signature);
  color: white;
  font-size: 0.9rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-md);
  animation: stepNumberPop 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) backwards;
}
.step-card[data-step="1"] .step-number {
  animation-delay: 0.2s;
}
.step-card[data-step="2"] .step-number {
  animation-delay: 0.45s;
}
.step-card[data-step="3"] .step-number {
  animation-delay: 0.7s;
}
.step-card[data-step="4"] .step-number {
  animation-delay: 0.95s;
}
@keyframes stepNumberPop {
  from {
    transform: translateX(-50%) scale(0);
    opacity: 0;
  }
  to {
    transform: translateX(-50%) scale(1);
    opacity: 1;
  }
}
.step-icon {
  width: 64px;
  height: 64px;
  margin: 28px auto 16px;
  background: var(--gradient-signature);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  animation: stepIconPulse 2s ease-in-out infinite;
}
.step-icon svg {
  width: 32px;
  height: 32px;
}
.step-card[data-step="1"] .step-icon {
  animation-delay: 0s;
}
.step-card[data-step="2"] .step-icon {
  animation-delay: 0.2s;
}
.step-card[data-step="3"] .step-icon {
  animation-delay: 0.4s;
}
.step-card[data-step="4"] .step-icon {
  animation-delay: 0.6s;
}
@keyframes stepIconPulse {
  0%,
  100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(var(--primary-rgb), 0.4);
  }
  50% {
    transform: scale(1.03);
    box-shadow: 0 0 0 8px rgba(var(--primary-rgb), 0);
  }
}
.step-title {
  font-size: 1.125rem;
  font-weight: 600;
  margin: 0 0 8px;
  color: var(--black);
}
.step-desc {
  font-size: 0.9rem;
  margin: 0;
  line-height: 1.45;
  color: var(--accent);
  opacity: 0.9;
}

/* ========== EVENTS GRID & CARDS PREMIUM ========== */
.events-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 32px;
  align-items: start;
}

.event-card {
  position: relative;
  width: 100%;
  max-width: 300px;
  margin: 0 auto;
  min-height: 420px;
  height: auto;
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 2px solid transparent;
  background-clip: padding-box;
  box-shadow: var(--shadow-md);
  transition:
    transform var(--transition),
    box-shadow var(--transition);
  animation: cardEnter 0.5s ease-out backwards;
}
.event-card::before {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  padding: 2px;
  background: linear-gradient(135deg, var(--primary), var(--accent));
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}
[data-theme="dark"] .event-card {
  background: var(--neutral-light);
}
.page-events .events-grid .event-card,
#events-grid-home .event-card {
  cursor: pointer;
}
.event-card:hover {
  transform: translateY(-12px) scale(1.02);
  box-shadow:
    var(--shadow-xl),
    0 0 40px rgba(var(--primary-rgb), 0.15);
}
@keyframes cardEnter {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.event-card-badge {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 2;
  background: var(--gradient-gold);
  color: var(--neutral-dark);
  font-size: 0.75rem;
  font-weight: 700;
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
}

/* --- Badge type d'événement (Gratuit / Payant) --- */
.event-card-type-row {
  margin-bottom: 6px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}
.event-detail-badges-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.event-type-badge-wrap {
  line-height: 1;
}
.event-category-badge-wrap {
  line-height: 1;
}
.event-category-badge {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 999px;
  line-height: 1.4;
  white-space: nowrap;
  background: rgba(99, 102, 241, 0.1);
  color: #4338ca;
  border: 1px solid rgba(99, 102, 241, 0.28);
}
[data-theme="dark"] .event-category-badge {
  background: rgba(129, 140, 248, 0.12);
  color: #a5b4fc;
  border-color: rgba(129, 140, 248, 0.35);
}
.event-type-badge {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  padding: 4px 10px;
  border-radius: 999px;
  line-height: 1.4;
  white-space: nowrap;
}
.event-type-badge--gratuit {
  background: rgba(var(--primary-rgb), 0.12);
  color: #8a6500;
  border: 1px solid rgba(var(--primary-rgb), 0.35);
}
.event-type-badge--payant {
  background: rgba(30, 58, 138, 0.08);
  color: var(--accent);
  border: 1px solid rgba(30, 58, 138, 0.2);
}
[data-theme="dark"] .event-type-badge--gratuit {
  background: rgba(var(--primary-rgb), 0.18);
  color: #4ade80;
  border-color: rgba(var(--primary-rgb), 0.45);
}
[data-theme="dark"] .event-type-badge--payant {
  background: rgba(59, 130, 246, 0.15);
  color: #93c5fd;
  border-color: rgba(59, 130, 246, 0.35);
}

/* Badge PAYANT/GRATUIT en overlay coin supérieur gauche de l'image */
.event-card-type-overlay {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2;
  pointer-events: none;
}
.event-card-type-overlay .event-type-badge {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
[data-theme="dark"] .event-card-type-overlay .event-type-badge--payant {
  background: rgba(10, 20, 60, 0.72);
  color: #93c5fd;
  border-color: rgba(59, 130, 246, 0.5);
}
[data-theme="dark"] .event-card-type-overlay .event-type-badge--gratuit {
  background: rgba(0, 40, 20, 0.72);
  color: #4ade80;
  border-color: rgba(var(--primary-rgb), 0.55);
}
[data-theme="light"] .event-card-type-overlay .event-type-badge--payant {
  background: rgba(255, 255, 255, 0.88);
  color: var(--accent);
  border-color: rgba(30, 58, 138, 0.3);
}
[data-theme="light"] .event-card-type-overlay .event-type-badge--gratuit {
  background: rgba(255, 255, 255, 0.88);
  color: #8a6500;
  border-color: rgba(var(--primary-rgb), 0.4);
}

/* Prix / devise masqués en JS quand type = gratuit (.tier-price, .tier-field-currency[hidden]) */
.event-card-image {
  flex-shrink: 0;
  height: 180px;
  background: var(--gradient-signature);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 3rem;
  font-weight: 700;
  overflow: hidden;
  position: relative;
}
.event-card-image.event-card-image--has-cover {
  background: var(--neutral-dark);
  cursor: zoom-in;
  touch-action: manipulation;
}
.event-card-image .event-card-cover {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: cover;
  display: block;
  cursor: zoom-in;
  opacity: 0;
  transition: opacity 0.28s ease;
}
.event-card-image .event-card-cover.event-card-cover--loaded {
  opacity: 1;
}
.event-card-image.event-card-image--loading-cover::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.04) 0%,
    rgba(255, 255, 255, 0.14) 50%,
    rgba(255, 255, 255, 0.04) 100%
  );
  background-size: 200% 100%;
  animation: event-cover-shimmer 1.2s ease-in-out infinite;
}
@keyframes event-cover-shimmer {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}
.event-card-image .event-card-image-letter {
  position: relative;
  z-index: 1;
}

.event-detail-cover {
  max-width: 100%;
  width: 100%;
  max-height: 360px;
  overflow: hidden;
  border-radius: var(--radius-md);
  background: var(--neutral-dark);
  margin-left: auto;
  margin-right: auto;
}
.event-detail-cover-img {
  width: 100%;
  height: auto;
  max-height: 360px;
  object-fit: cover;
  display: block;
  vertical-align: middle;
}

.cover-preview-wrap,
.cover-preview {
  max-width: 280px;
}
.cover-preview-label {
  margin: 0 0 0.35rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--neutral-dark, #334155);
}
.cover-preview-img,
.cover-preview img {
  width: 100%;
  max-height: 160px;
  object-fit: cover;
  display: block;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(0, 0, 0, 0.1);
}

.event-cover-picker {
  display: block !important;
  visibility: visible !important;
  width: 100%;
  margin: 0.75rem 0 1.25rem !important;
}
.event-cover-picker__actions {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: stretch;
  margin-top: 0.65rem;
}
.event-cover-dropzone {
  position: relative;
  display: flex !important;
  align-items: center;
  justify-content: center;
  visibility: visible !important;
  opacity: 1 !important;
  min-height: 160px;
  width: 100%;
  border: 2px dashed #2563eb;
  border-radius: 12px;
  background: #eff6ff;
  cursor: pointer;
  overflow: hidden;
  transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
}
.event-cover-dropzone:hover,
.event-cover-dropzone:focus-within,
.event-cover-dropzone.event-cover-dropzone--over {
  border-color: #1d4ed8;
  background: #dbeafe;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.18);
}
.event-cover-dropzone--has-file {
  border-style: solid;
  background: #0f172a;
  min-height: 200px;
}
.event-cover-dropzone__input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
  opacity: 0;
}
.event-cover-file-input {
  display: block !important;
  position: static !important;
  width: 100% !important;
  max-width: 100%;
  height: auto !important;
  min-height: 44px !important;
  padding: 0.45rem 0.5rem !important;
  margin: 0 !important;
  opacity: 1 !important;
  clip: auto !important;
  overflow: visible !important;
  font-size: 1rem;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.18);
  border-radius: 8px;
  color: inherit;
  cursor: pointer;
}
.modal-content--event-create .create-event-form .event-cover-dropzone,
.create-event-form .event-cover-dropzone {
  display: flex !important;
  min-height: 160px !important;
}
.modal-content--event-create .create-event-form .event-cover-picker,
.create-event-form .event-cover-picker {
  display: block !important;
  visibility: visible !important;
  width: 100%;
  grid-column: 1 / -1;
}
.event-cover-dropzone__placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  min-height: 140px;
  padding: 1.25rem 1rem;
  text-align: center;
  color: #1e3a8a;
  pointer-events: none;
}
.event-cover-dropzone__placeholder[hidden] {
  display: none !important;
}
.event-cover-dropzone__placeholder strong {
  font-size: 1.1rem;
  color: #1e3a8a;
}
.event-cover-dropzone__placeholder span {
  font-size: 0.9rem;
  color: #334155;
  max-width: 22rem;
}
.event-cover-dropzone__icon {
  width: 48px;
  height: 48px;
  color: #2563eb;
  margin-bottom: 0.15rem;
}
.event-cover-dropzone__preview {
  display: block;
  position: absolute;
  inset: 0;
  z-index: 1;
}
.event-cover-dropzone__preview[hidden] {
  display: none !important;
}
.event-cover-dropzone__preview img,
.event-cover-dropzone__preview .cover-preview-img {
  width: 100%;
  height: 100%;
  max-height: none;
  object-fit: cover;
  display: block;
  border: 0;
  border-radius: 0;
}
[data-theme="dark"] .event-cover-dropzone {
  background: rgba(37, 99, 235, 0.2);
  border-color: #93c5fd;
}
[data-theme="dark"] .event-cover-dropzone__placeholder,
[data-theme="dark"] .event-cover-dropzone__placeholder strong {
  color: #e2e8f0;
}
[data-theme="dark"] .event-cover-dropzone__placeholder span {
  color: #cbd5e1;
}

.form-hint {
  display: block;
  font-size: 0.85rem;
  color: var(--neutral-dark);
  margin-top: 4px;
}
.event-card-body {
  position: relative;
  z-index: 1;
  padding: 24px;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  flex-shrink: 0;
  min-height: min-content;
  background: inherit;
}
.event-card-title {
  font-size: 1.25rem;
  font-weight: 600;
  margin: 0 0 8px;
  color: var(--black);
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.event-card-meta {
  font-size: 0.875rem;
  color: var(--accent);
  margin-bottom: 12px;
}
.event-card-creator,
.event-creator {
  font-size: 0.875rem;
  color: var(--text-muted, #555);
  margin: 0 0 12px;
}
.event-creator-label {
  color: var(--text-muted, #555);
}
.event-creator-link {
  color: var(--primary);
  font-weight: 600;
  text-decoration: none;
}
.event-creator-link:hover {
  text-decoration: underline;
}
.event-card-description {
  font-size: 0.875rem;
  color: var(--text-muted, #555);
  margin-bottom: 10px;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.event-detail-contact-title {
  display: block;
  margin-bottom: 8px;
  font-size: 1rem;
}
.event-detail-contact-icons {
  margin-top: 4px;
}
.btn-whatsapp {
  background: #25d366;
  color: #fff;
  border-color: #25d366;
}
.btn-whatsapp:hover {
  background: #20bd5a;
  border-color: #20bd5a;
  color: #fff;
}
.event-detail-description {
  font-size: 1rem;
  line-height: 1.5;
  color: var(--text);
  white-space: pre-wrap;
}
.event-card-price {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--primary);
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}
[data-theme="dark"] .event-card-price {
  border-top-color: rgba(255, 255, 255, 0.1);
}
.event-card-tiers {
  list-style: none;
  margin: auto 0 0;
  padding: 12px 0 0;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
[data-theme="dark"] .event-card-tiers {
  border-top-color: rgba(255, 255, 255, 0.1);
}
.event-card-tier {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  font-size: 0.9375rem;
  line-height: 1.35;
}
.event-card-tier-name {
  color: var(--text-muted, #64748b);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.event-card-tier-price {
  font-weight: 700;
  color: var(--primary);
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}
.event-card-cta {
  position: relative;
  z-index: 2;
  margin-top: 16px;
  flex-shrink: 0;
}
.event-card-cta .btn {
  width: 100%;
  position: relative;
  z-index: 1;
}

/* Lightbox plein écran : image de couverture des cartes événements */
.event-cover-lightbox {
  position: fixed;
  inset: 0;
  z-index: 10050;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: max(12px, env(safe-area-inset-top))
    max(12px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom))
    max(12px, env(safe-area-inset-left));
  box-sizing: border-box;
  background: rgba(0, 0, 0, 0.94);
  cursor: zoom-out;
}
.event-cover-lightbox[hidden] {
  display: none !important;
}
.event-cover-lightbox:not([hidden]) {
  display: flex;
}
.event-cover-lightbox-img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  cursor: default;
  -webkit-user-select: none;
  user-select: none;
}
.event-cover-lightbox-close {
  position: absolute;
  top: max(12px, env(safe-area-inset-top));
  right: max(12px, env(safe-area-inset-right));
  z-index: 1;
  width: 48px;
  height: 48px;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  font-size: 1.75rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.event-cover-lightbox-close:hover {
  background: rgba(255, 255, 255, 0.22);
}

/* Loading state */
.loading-cards {
  grid-column: 1 / -1;
  text-align: center;
  padding: 48px;
  color: var(--accent);
}
.loader {
  width: 48px;
  height: 48px;
  margin: 0 auto 16px;
  border: 3px solid var(--neutral-light);
  border-top-color: var(--secondary);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* ========== ADVANTAGES ========== */
.advantages-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 32px;
}
.advantage-card {
  background: var(--white);
  padding: 32px;
  border-radius: var(--radius-lg);
  text-align: center;
  box-shadow: var(--shadow-md);
  transition:
    transform var(--transition),
    box-shadow var(--transition);
}
[data-theme="dark"] .advantage-card {
  background: var(--neutral-light);
}
.advantage-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-xl);
}
.advantage-icon {
  width: 64px;
  height: 64px;
  margin: 0 auto 16px;
  background: var(--gradient-signature);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
}
.advantage-icon svg {
  width: 32px;
  height: 32px;
}
.advantage-card h3 {
  margin-bottom: 8px;
}
.advantage-card p {
  margin: 0;
  font-size: 0.95rem;
}

/* ========== CONTACT (index) ========== */
.contact-section {
  padding: clamp(32px, 6vw, 48px) 0;
}
.contact-intro {
  margin-bottom: 24px;
  max-width: 560px;
}
.contact-messages-table-wrap {
  overflow-x: auto;
  max-width: 100%;
}
.contact-message-cell {
  max-width: min(420px, 55vw);
  white-space: pre-wrap;
  word-break: break-word;
  font-size: 0.9rem;
  line-height: 1.45;
  vertical-align: top;
}

.contact-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  align-items: start;
  max-width: 560px;
}
@media (max-width: 767px) {
  .contact-layout {
    grid-template-columns: 1fr;
    gap: 24px;
  }
}
.contact-info {
  padding: 20px;
  background: rgba(var(--primary-rgb), 0.08);
  border-radius: var(--radius-md);
  border: 1px solid rgba(var(--primary-rgb), 0.2);
}
[data-theme="dark"] .contact-info {
  background: rgba(var(--primary-rgb), 0.12);
  border-color: rgba(var(--primary-rgb), 0.3);
}
.contact-info p {
  margin: 0 0 4px 0;
  font-size: 0.9rem;
}
.contact-email-label {
  margin-top: 16px !important;
}
.contact-link {
  display: inline-block;
  color: var(--primary);
  font-weight: 600;
  text-decoration: none;
  margin-top: 4px;
}
.contact-link:hover {
  text-decoration: underline;
}
.contact-form .form-group {
  margin-bottom: 16px;
}
.contact-form .form-group:last-of-type {
  margin-bottom: 20px;
}
.contact-form-status {
  margin-top: 12px;
  font-size: 0.9rem;
}
.contact-form .required {
  color: var(--primary);
}

/* ========== FOOTER ========== */
.footer {
  background: var(--neutral-dark);
  color: var(--neutral-light);
  padding: clamp(24px, 5vw, 32px) 0;
  padding-bottom: max(24px, calc(16px + var(--safe-bottom)));
  padding-left: var(--safe-left);
  padding-right: var(--safe-right);
  margin-top: clamp(40px, 10vw, 64px);
}
.footer-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: clamp(12px, 3vw, 16px);
}
@media (max-width: 479px) {
  .footer-inner {
    flex-direction: column;
    text-align: center;
  }
}
.footer-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: 600;
  font-size: 1.125rem;
}
.footer-brand img {
  border-radius: var(--radius-sm);
}
.footer-copy {
  margin: 0;
  font-size: 0.875rem;
  opacity: 0.9;
}
/* Mode sombre désactivé : bouton masqué */
.theme-toggle {
  display: none !important;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  color: #f1f5f9;
  font-size: 1.25rem;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.3);
  transition:
    background var(--transition),
    color var(--transition),
    border-color var(--transition);
}
.theme-toggle:hover {
  background: rgba(255, 255, 255, 0.22);
  color: var(--secondary);
  border-color: rgba(255, 255, 255, 0.5);
}
/* Thème clair : si le toggle est dans le hero/footer, garder une couleur lisible */
.navbar .theme-toggle {
  color: #f1f5f9;
}
.navbar .theme-toggle:hover {
  color: var(--secondary);
}
.theme-icon.moon {
  display: none;
}
[data-theme="dark"] .theme-icon.sun {
  display: none;
}
[data-theme="dark"] .theme-icon.moon {
  display: inline;
}

/* ========== MODAL ========== */
/* ── Modale — toujours au-dessus de tout (navbar 4000, dropdown 4100) ── */
body:has(.modal:not([hidden])),
body:has(.modal:not(.hidden)) {
  overflow: hidden;
}
.modal {
  position: fixed;
  inset: 0;
  z-index: 9500; /* au-dessus de la navbar (4000), des menus (4100) et de la bottom-nav (1050) */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
@media (min-width: 480px) {
  .modal {
    padding: 24px;
  }
}
.modal[hidden] {
  display: none !important;
  pointer-events: none;
}
.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 0;
  background: rgba(10, 14, 30, 0.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  animation: fadeIn 0.22s ease-out;
}
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.modal-content {
  position: relative;
  z-index: 2;
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: 28px 24px 24px;
  max-width: min(480px, calc(100vw - 32px));
  width: calc(100% - 32px);
  max-height: calc(100dvh - 48px);
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.35), 0 4px 16px rgba(0, 0, 0, 0.2);
  animation: modalSlide 0.28s cubic-bezier(0.22, 0.61, 0.36, 1);
}
@media (max-width: 479px) {
  .modal-content {
    width: calc(100% - 16px);
    max-width: none;
    max-height: calc(100dvh - 16px);
    max-height: calc(100vh - 16px);
    border-radius: var(--radius-md);
    padding: 24px 16px 20px;
  }
}
[data-theme="dark"] .modal-content {
  background: var(--neutral-light);
}
#add-event-for-user-modal:not(.hidden) .create-event-form {
  display: block !important;
}
#add-event-for-user-modal .modal-content {
  max-height: 90vh;
  overflow-y: auto;
}
.modal-content--event-create,
#mes-evenements-create-modal .modal-content,
#dashboard-create-event-modal .modal-content {
  max-width: min(920px, calc(100vw - 24px));
  width: calc(100% - 24px);
  max-height: min(94dvh, 94vh);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: 0;
}
.modal-header--event-create {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  flex-shrink: 0;
  position: sticky;
  top: 0;
  z-index: 12;
  padding: 20px 20px 14px;
  background: var(--white, #fff);
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
[data-theme="dark"] .modal-header--event-create {
  background: var(--neutral-light, #1a1f35);
  border-bottom-color: rgba(255, 255, 255, 0.1);
}
.modal-header--event-create .modal-header__text {
  flex: 1;
  min-width: 0;
}
.modal-header--event-create .modal-title {
  margin: 0;
  font-size: 1.35rem;
  line-height: 1.25;
  padding-right: 0.5rem;
}
.modal-header--event-create .modal-close {
  position: relative;
  top: auto;
  float: none;
  margin: 0;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  font-size: 1.75rem;
  background: rgba(0, 0, 0, 0.08);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
}
[data-theme="dark"] .modal-header--event-create .modal-close {
  background: rgba(255, 255, 255, 0.12);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
}
.modal-content--event-create .create-event-form {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 16px 20px 24px;
  -webkit-overflow-scrolling: touch;
}
.modal-content--event-create .create-event-form .form-group {
  margin-bottom: 1rem;
}
.modal-content--event-create .create-event-form label,
.modal-content--event-create .create-event-form .form-label-block {
  display: block;
  font-weight: 600;
  margin-bottom: 0.35rem;
  color: var(--text-base, #1a1f35);
}
.modal-content--event-create .create-event-form input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
.modal-content--event-create .create-event-form select,
.modal-content--event-create .create-event-form textarea,
.modal-content--event-create .create-event-form .form-control {
  width: 100%;
  min-height: 44px;
  font-size: 1rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid rgba(0, 0, 0, 0.18);
  border-radius: var(--radius-sm, 8px);
  background: var(--white, #fff);
  color: var(--text-base, #1a1f35);
}
[data-theme="dark"] .modal-content--event-create .create-event-form input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
[data-theme="dark"] .modal-content--event-create .create-event-form select,
[data-theme="dark"] .modal-content--event-create .create-event-form textarea,
[data-theme="dark"] .modal-content--event-create .create-event-form .form-control {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.18);
  color: rgba(255, 255, 255, 0.92);
}
.modal-content--event-create .create-event-form .form-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  margin-bottom: 0.5rem;
}
.modal-content--event-create .create-event-form .form-group.full {
  grid-column: 1 / -1;
}
.modal-content--event-create .tiers-editor,
.modal-content--event-create .tiers-editor-mes-evenements,
.modal-content--event-create .contacts-editor {
  width: 100%;
  max-width: 100%;
  overflow: visible;
}
.modal-content--event-create .tier-row {
  grid-template-columns: 1fr 1fr 1fr 1fr auto;
  gap: 10px;
  padding: 10px;
  background: rgba(0, 0, 0, 0.02);
  border-radius: var(--radius-sm, 8px);
  margin-bottom: 10px;
}
[data-theme="dark"] .modal-content--event-create .tier-row {
  background: rgba(255, 255, 255, 0.04);
}
@media (max-width: 767px) {
  .modal-content--event-create .tier-row {
    grid-template-columns: 1fr 1fr;
  }
  .modal-content--event-create .tier-row .tier-day-wrap {
    grid-column: 1 / -1;
  }
}
.modal-content--event-create .dashboard-actions {
  position: sticky;
  bottom: 0;
  z-index: 3;
  margin-top: 1rem;
  padding-top: 1rem;
  background: linear-gradient(to top, var(--white, #fff) 75%, transparent);
}
[data-theme="dark"] .modal-content--event-create .dashboard-actions {
  background: linear-gradient(to top, var(--neutral-light, #1a1f35) 75%, transparent);
}
#mes-evenements-create-modal:not(.hidden) .create-event-form,
#dashboard-create-event-modal:not(.hidden) .create-event-form,
#add-event-for-user-modal:not(.hidden) .create-event-form {
  display: block !important;
}

/* Création d'événement — plein écran sur mobile */
@media (max-width: 767px) {
  #mes-evenements-create-modal:not(.hidden),
  #dashboard-create-event-modal:not(.hidden),
  #add-event-for-user-modal:not(.hidden) {
    padding: 0;
    align-items: stretch;
    justify-content: stretch;
    overflow: hidden;
  }
  #mes-evenements-create-modal:not(.hidden) .modal-content,
  #dashboard-create-event-modal:not(.hidden) .modal-content,
  #add-event-for-user-modal:not(.hidden) .modal-content,
  .modal-content--event-create {
    width: 100%;
    max-width: 100%;
    height: 100%;
    max-height: 100dvh;
    max-height: 100vh;
    min-height: 100dvh;
    min-height: 100vh;
    margin: 0;
    border-radius: 0;
    box-shadow: none;
  }
  .modal-header--event-create {
    border-radius: 0;
    padding-top: max(14px, env(safe-area-inset-top, 0px));
    padding-left: max(16px, env(safe-area-inset-left, 0px));
    padding-right: max(16px, env(safe-area-inset-right, 0px));
  }
  .modal-content--event-create .create-event-form {
    padding-left: max(16px, env(safe-area-inset-left, 0px));
    padding-right: max(16px, env(safe-area-inset-right, 0px));
    padding-bottom: max(20px, env(safe-area-inset-bottom, 0px));
  }
  .modal-content--event-create .dashboard-actions {
    padding-bottom: max(8px, env(safe-area-inset-bottom, 0px));
  }
}

#event-detail-modal .modal-content {
  max-width: 560px;
  max-height: 90vh;
  overflow-y: auto;
}
#event-detail-modal.event-detail-modal--compact .modal-content {
  max-width: 420px;
  padding: 14px;
}
#event-detail-modal.event-detail-modal--compact .event-detail-modal-cover {
  max-height: 170px;
}
#event-detail-modal.event-detail-modal--compact
  #event-detail-modal-description {
  display: none !important;
}
#event-detail-modal.event-detail-modal--compact #event-detail-modal-tiers {
  max-height: 120px;
  overflow-y: auto;
  margin-bottom: 10px;
}
#event-detail-modal.event-detail-modal--compact
  .event-detail-modal-actions
  .btn {
  padding: 8px 12px;
  font-size: 0.88rem;
}
#event-detail-modal .event-detail-modal-cover {
  max-height: 240px;
}
  #event-detail-modal .event-detail-modal-actions,
#tournament-matches-modal .event-detail-modal-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  margin-top: 16px;
}

.event-detail-share {
  padding: 0.75rem 0 0;
  border-top: 1px solid var(--border-subtle, rgba(0, 0, 0, 0.08));
}
.event-detail-share-label {
  margin: 0 0 0.5rem;
  font-size: 0.875rem;
  color: var(--text-muted, #667085);
  font-weight: 500;
}
.event-detail-share-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.event-detail-share-inline {
  display: inline-flex;
  gap: 4px;
  align-items: center;
}

/* ══════════════════════════════════════════════════════════
   WONYASOFT — PAIEMENT MOBILE MONEY
   ══════════════════════════════════════════════════════════ */

/* ── Bouton Mobile Money (checkout) ── */
.btn-mm {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  background: linear-gradient(135deg, #0a8a44 0%, #0f6e37 100%);
  color: #fff;
  border: none;
  border-radius: var(--radius-md);
  font-weight: 600;
  font-size: 0.95rem;
  cursor: pointer;
  transition: opacity 0.18s, transform 0.12s;
  padding: 0.75rem 1.25rem;
}
.btn-mm:hover  { opacity: 0.9; transform: translateY(-1px); }
.btn-mm:active { opacity: 0.95; transform: none; }
.btn-mm-icon   { flex-shrink: 0; }

/* ── Section Mobile Money dans checkout ── */
.checkout-mm-divider {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 1.25rem 0 1rem;
  color: var(--text-muted);
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.checkout-mm-divider::before,
.checkout-mm-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border);
}

.checkout-steps-indicator {
  margin: 0 0 0.75rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.checkout-step[hidden] {
  display: none !important;
}

.checkout-payment-summary {
  margin-bottom: 1rem;
  padding: 0.85rem 1rem;
  border-radius: var(--radius-md);
  background: rgba(var(--primary-rgb), 0.06);
  border: 1px solid rgba(var(--primary-rgb), 0.15);
}

.checkout-payment-summary-label {
  margin: 0 0 0.35rem;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
}

.checkout-payment-summary-tickets,
.checkout-payment-summary-buyer {
  margin: 0 0 0.35rem;
  font-size: 0.9rem;
  line-height: 1.45;
}

.checkout-payment-summary-amount {
  margin: 0.5rem 0 0;
  font-size: 1.05rem;
}

.checkout-step-payment-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  margin-top: 1rem;
}

.checkout-step-payment-actions .btn {
  flex: 1;
  min-width: 8rem;
}

.account-panel-admin .social-admin-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

/* WonyaSoft — traçabilité paiements */
.mm-pay-status {
  display: inline-block;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.3;
}
.mm-pay-status--ok {
  background: rgba(10, 138, 68, 0.12);
  color: #0a7a3e;
}
.mm-pay-status--pending {
  background: rgba(234, 179, 8, 0.15);
  color: #a16207;
}
.mm-pay-status--failed {
  background: rgba(220, 38, 38, 0.1);
  color: #b91c1c;
}
.mm-pay-sub {
  font-size: 0.8rem;
  color: var(--text-muted);
}
.mm-pay-ref {
  font-size: 0.78rem;
}
.mm-pay-err {
  font-size: 0.8rem;
  color: #b91c1c;
  display: block;
  max-width: 14rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mm-pay-actions {
  white-space: nowrap;
}
.mm-pay-cancel-btn {
  font-size: 0.75rem;
  padding: 0.25rem 0.55rem;
  color: #b91c1c;
  border-color: rgba(185, 28, 28, 0.35);
}
.mm-pay-cancel-btn:hover {
  background: rgba(185, 28, 28, 0.08);
}

.checkout-phone-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}
.checkout-phone-country {
  min-width: 11rem;
  max-width: 100%;
}
.checkout-phone-national {
  flex: 1;
  min-width: 8rem;
  max-width: 100%;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(0, 0, 0, 0.15);
}
.checkout-mm-phone-input {
  width: 100%;
  max-width: 100%;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(0, 0, 0, 0.15);
  font-size: 1rem;
  letter-spacing: 0.03em;
}
[data-theme="dark"] .checkout-mm-phone-input {
  border-color: rgba(255, 255, 255, 0.18);
  background: var(--surface, #1a1a1a);
  color: var(--text, #f5f5f5);
}

.checkout-form-error {
  margin: 0.75rem 0 0;
  padding: 0.65rem 0.85rem;
  border-radius: var(--radius-sm);
  background: rgba(220, 38, 38, 0.1);
  border: 1px solid rgba(220, 38, 38, 0.35);
  color: #b91c1c;
  font-size: 0.9rem;
  line-height: 1.4;
}
.checkout-form-error[hidden] {
  display: none !important;
}
[data-theme="dark"] .checkout-form-error {
  background: rgba(248, 113, 113, 0.12);
  border-color: rgba(248, 113, 113, 0.35);
  color: #fca5a5;
}

/* ── Modale d'attente Mobile Money ── */
.tosala-mm-btn-redirect {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  font-weight: 700;
  font-size: 1rem;
  padding: 0.85rem 1.5rem;
  border-radius: var(--radius-md);
  text-decoration: none;
  box-shadow: 0 4px 18px rgba(99, 102, 241, 0.3);
}
.tosala-mm-redirect-wrap {
  width: 100%;
  margin: 0.5rem 0;
}

/* ── Modale d'attente Mobile Money ── */
.tosala-mm-modal .modal-content,
.tosala-mm-content {
  max-width: 420px;
  width: 100%;
  padding: 2rem 1.75rem;
  text-align: center;
  background: var(--bg-card, #fff);
  border-radius: var(--radius-lg, 16px);
}
.tosala-mm-screen {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.85rem;
}
.tosala-mm-op-badge {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  font-weight: 900;
  color: #fff;
  margin-bottom: 0.5rem;
  box-shadow: 0 4px 18px rgba(0,0,0,0.2);
}
.tosala-mm-op-badge-img {
  width: 64px;
  height: 64px;
  border-radius: 14px;
  object-fit: contain;
  margin-bottom: 0.5rem;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.18);
  border: 1px solid rgba(0, 0, 0, 0.08);
  background: #fff;
  padding: 4px;
}

/* Logos réseaux Mobile Money (M-Pesa, Airtel, Orange) */
.tosala-mm-operators {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: 0.65rem 1rem;
  margin: 0.25rem 0 0.85rem;
}
.tosala-mm-operators--checkout {
  margin: 0 0 1rem;
  padding: 0.65rem 0.5rem;
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.03);
  border: 1px solid var(--border);
}
[data-theme="dark"] .tosala-mm-operators--checkout {
  background: rgba(255, 255, 255, 0.04);
}
.tosala-mm-operator {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  min-width: 72px;
  opacity: 0.72;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.tosala-mm-operator.is-active {
  opacity: 1;
  transform: translateY(-2px);
}
.tosala-mm-operator-logo {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  object-fit: contain;
  background: #fff;
  border: 2px solid transparent;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
  padding: 3px;
}
.tosala-mm-operator.is-active .tosala-mm-operator-logo {
  border-color: var(--primary);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
}
.tosala-mm-operator-name {
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--text-muted);
  text-align: center;
  line-height: 1.2;
  max-width: 80px;
}
.tosala-mm-operator.is-active .tosala-mm-operator-name {
  color: var(--text);
}
.tosala-mm-detected-op {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  margin-bottom: 0.25rem;
}
.tosala-mm-detected-op-label {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--text);
}
.checkout-mm-operators-caption {
  margin: 0 0 0.5rem;
  font-size: 0.78rem;
  color: var(--text-muted);
  text-align: center;
  line-height: 1.35;
}
.tosala-mm-title {
  font-size: 1.2rem;
  font-weight: 700;
  margin: 0;
}
.tosala-mm-title--success { color: var(--primary); }
.tosala-mm-title--error   { color: #e53e3e; }
.tosala-mm-subtitle {
  margin: 0;
  font-size: 0.92rem;
  color: var(--text-muted);
}
.tosala-mm-phone {
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  margin: 0;
}
.tosala-mm-amount-row {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.tosala-mm-amount {
  display: inline-block;
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--primary);
}
.tosala-mm-hint {
  font-size: 0.85rem;
  color: var(--text-muted);
  max-width: 320px;
  margin: 0;
  line-height: 1.5;
}
.tosala-mm-ref {
  font-size: 0.75rem;
  color: var(--text-muted);
  margin: 0;
  font-family: monospace;
}

/* Pulsation téléphone */
.tosala-mm-pulse-wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0.5rem 0;
}
.tosala-mm-pulse {
  position: absolute;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: rgba(var(--primary-rgb), 0.18);
  animation: mm-pulse 2s ease-in-out infinite;
}
.tosala-mm-phone-icon {
  position: relative;
  color: var(--primary);
  z-index: 1;
}
@keyframes mm-pulse {
  0%   { transform: scale(0.8); opacity: 0.7; }
  50%  { transform: scale(1.2); opacity: 0.2; }
  100% { transform: scale(0.8); opacity: 0.7; }
}

/* Barre de progression */
.tosala-mm-progress {
  width: 100%;
  height: 4px;
  background: rgba(var(--primary-rgb), 0.12);
  border-radius: 999px;
  overflow: hidden;
  margin-top: 0.5rem;
}
.tosala-mm-progress-bar {
  height: 100%;
  width: 0%;
  background: var(--primary);
  border-radius: 999px;
  transition: width 1s linear;
}

/* Icônes succès / erreur / timeout */
.tosala-mm-check-icon,
.tosala-mm-error-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.25rem;
}
.tosala-mm-timeout-icon {
  font-size: 3rem;
  line-height: 1;
  margin-bottom: 0.25rem;
}

/* Spinner init */
.tosala-mm-spinner {
  width: 44px;
  height: 44px;
  border: 4px solid rgba(var(--primary-rgb), 0.18);
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: mm-spin 0.9s linear infinite;
}
@keyframes mm-spin { to { transform: rotate(360deg); } }

.tosala-mm-label {
  color: var(--text-muted);
  font-size: 0.9rem;
  margin: 0;
}

/* ── Responsive mobile ── */
@media (max-width: 480px) {
  .tosala-mm-content {
    padding: 1.5rem 1rem;
  }
}

/* Facture après réservation (liste / détail événement) */
#checkout-invoice-modal.modal {
  z-index: 2100;
}
.modal-content--checkout-invoice {
  max-width: min(960px, 96vw);
  width: 100%;
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.checkout-invoice-scroll {
  overflow-y: auto;
  flex: 1;
  min-height: 0;
  max-height: min(70vh, 640px);
  padding: 4px 0;
}
.checkout-invoice-scroll .ticket-invoice {
  margin: 0;
}
.checkout-invoice-hint {
  margin: 0 0 12px;
  line-height: 1.45;
}
.checkout-invoice-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  flex-shrink: 0;
}
[data-theme="dark"] .checkout-invoice-actions {
  border-top-color: rgba(255, 255, 255, 0.1);
}

/* Modal Réserver des billets (events) : bottom-sheet sur mobile */
@media (max-width: 767px) {
  #checkout-modal.modal {
    padding: 0;
    align-items: flex-end;
    justify-content: center;
  }
  #checkout-modal .modal-content {
    width: 100%;
    max-width: 100%;
    max-height: 94dvh;
    max-height: 94vh;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    padding: 8px 20px 24px;
    padding-bottom: max(24px, env(safe-area-inset-bottom, 24px));
    animation: modalSlideUp 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
  }
  @keyframes modalSlideUp {
    from { transform: translateY(100%); opacity: 0.6; }
    to   { transform: translateY(0);    opacity: 1; }
  }
  /* Poignée drag visuelle */
  #checkout-modal .modal-content::before {
    content: "";
    display: block;
    width: 40px;
    height: 4px;
    background: rgba(0, 0, 0, 0.15);
    border-radius: 2px;
    margin: 0 auto 16px;
  }
  [data-theme="dark"] #checkout-modal .modal-content::before {
    background: rgba(255, 255, 255, 0.18);
  }
  #checkout-invoice-modal.modal {
    padding: 0;
    align-items: stretch;
    justify-content: stretch;
  }
  #checkout-invoice-modal .modal-content--checkout-invoice {
    width: 100%;
    max-width: none;
    height: 100%;
    min-height: 100dvh;
    min-height: 100vh;
    max-height: none;
    border-radius: 0;
    padding: 20px 16px;
    padding-top: max(20px, env(safe-area-inset-top, 20px));
    padding-bottom: max(20px, env(safe-area-inset-bottom, 20px));
  }
  .checkout-invoice-scroll {
    max-height: none;
  }
}

/* Modal Vente / Réservation (event-manage) : mobile */
@media (max-width: 767px) {
  #event-manage-sell-modal.modal,
  #event-manage-prevente-modal.modal {
    align-items: flex-end;
    justify-content: center;
    padding: 0;
    padding-bottom: env(safe-area-inset-bottom, 0);
  }
  #event-manage-sell-modal .modal-content,
  #event-manage-prevente-modal .modal-content {
    width: 100%;
    max-width: 100%;
    margin: 0;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    max-height: min(92vh, 92dvh);
    padding: 20px 16px;
    padding-bottom: max(20px, env(safe-area-inset-bottom, 20px));
  }
  #event-manage-sell-modal .modal-title,
  #event-manage-prevente-modal .modal-title {
    font-size: 1.2rem;
    margin-bottom: 16px;
    padding-right: 48px;
  }
  #event-manage-sell-modal .create-event-form .form-row,
  #event-manage-prevente-modal .create-event-form .form-row {
    flex-direction: column;
    gap: 0;
  }
  #event-manage-sell-modal .create-event-form .form-group,
  #event-manage-prevente-modal .create-event-form .form-group {
    margin-bottom: 14px;
    width: 100%;
  }
  #event-manage-sell-modal .create-event-form input,
  #event-manage-sell-modal .create-event-form select,
  #event-manage-prevente-modal .create-event-form input,
  #event-manage-prevente-modal .create-event-form select {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }
  #event-manage-sell-modal .dashboard-actions,
  #event-manage-prevente-modal .form-actions {
    flex-direction: column;
    gap: 10px;
    margin-top: 8px;
  }
  #event-manage-sell-modal .dashboard-actions .btn,
  #event-manage-prevente-modal .form-actions .btn {
    width: 100%;
    justify-content: center;
    min-height: 48px;
  }
  .event-manage-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
  }
  .event-manage-actions .btn {
    width: 100%;
    justify-content: center;
    min-height: 48px;
    touch-action: manipulation;
    position: relative;
    z-index: 2;
  }
}
@media (max-width: 479px) {
  #event-manage-sell-modal .modal-content,
  #event-manage-prevente-modal .modal-content {
    padding: 16px 12px;
    padding-bottom: max(16px, env(safe-area-inset-bottom, 16px));
  }
  #event-manage-sell-modal .modal-title,
  #event-manage-prevente-modal .modal-title {
    font-size: 1.1rem;
  }
}
@keyframes modalSlide {
  from { opacity: 0; transform: translateY(16px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0)    scale(1); }
}
.modal-close {
  position: sticky;
  top: 0;
  float: right;
  margin: -4px -4px 12px 12px;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1;
  color: var(--text-base, #1a1f35);
  background: rgba(0, 0, 0, 0.07);
  border: none;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.18s, transform 0.12s;
  cursor: pointer;
  z-index: 20;
  outline: none;
}
.modal-close:hover {
  background: rgba(0, 0, 0, 0.14);
  transform: scale(1.1);
}
.modal-close:active {
  transform: scale(0.95);
}
.modal-close:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}
[data-theme="dark"] .modal-close {
  color: rgba(255, 255, 255, 0.9);
  background: rgba(255, 255, 255, 0.1);
}
[data-theme="dark"] .modal-close:hover {
  background: rgba(255, 255, 255, 0.2);
}
/* En-tête modale : titre + bouton fermer sur la même ligne */
.modal-content > .modal-close:first-child,
.modal-content > button.modal-close {
  float: right;
  position: relative;
  top: 0;
  margin: 0 0 0 auto;
  display: flex;
}
.modal-title {
  margin: 0 0 20px;
  font-size: 1.4rem;
  font-weight: 700;
  padding-right: 48px; /* évite chevauchement avec le bouton fermer */
}

/* Forms */
.form-group {
  margin-bottom: 20px;
}
.form-group label {
  display: block;
  font-weight: 500;
  margin-bottom: 8px;
  color: var(--black);
}
.form-group input:not([type="checkbox"]):not([type="radio"]):not([type="button"]):not([type="submit"]):not([type="hidden"]):not([type="file"]),
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 12px 16px;
  border: 2px solid rgba(0, 0, 0, 0.1);
  border-radius: var(--radius-sm);
  background: var(--white);
  color: var(--black);
  transition: border-color var(--transition);
}
[data-theme="dark"] .form-group input:not([type="checkbox"]):not([type="radio"]):not([type="button"]):not([type="submit"]):not([type="hidden"]):not([type="file"]),
[data-theme="dark"] .form-group select,
[data-theme="dark"] .form-group textarea {
  background: var(--neutral-dark);
  border-color: rgba(255, 255, 255, 0.15);
  color: var(--neutral-light);
}
.form-group input:not([type="checkbox"]):not([type="radio"]):not([type="button"]):not([type="submit"]):not([type="hidden"]):not([type="file"]):focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--primary);
}
.form-group input:not([type="checkbox"]):not([type="radio"])::placeholder {
  color: #94a3b8;
}

/* Radio / checkbox inline : radio + libellé côte à côte */
.checkbox-inline {
  display: inline-flex !important;
  align-items: center;
  gap: 0.55rem;
  margin: 0;
  font-weight: 500;
  cursor: pointer;
  line-height: 1.35;
  width: auto;
  max-width: 100%;
  color: var(--black, #1a1f35);
}
.checkbox-inline input[type="radio"],
.checkbox-inline input[type="checkbox"] {
  width: 1.15rem !important;
  height: 1.15rem !important;
  min-width: 1.15rem;
  min-height: 1.15rem;
  margin: 0 !important;
  padding: 0 !important;
  flex-shrink: 0;
  accent-color: var(--primary, #2563eb);
  cursor: pointer;
  border: none;
  background: transparent;
  box-shadow: none;
}
.radio-choice-group {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.25rem;
  align-items: center;
  margin-top: 0.5rem;
}
.radio-choice-group .checkbox-inline {
  flex: 0 1 auto;
  padding: 0.65rem 1rem;
  border: 1.5px solid var(--border, #e2e8f0);
  border-radius: 10px;
  background: var(--bg-surface, #fff);
  transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
}
[data-theme="dark"] .radio-choice-group .checkbox-inline {
  border-color: rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.04);
  color: inherit;
}
.radio-choice-group .checkbox-inline:has(input:checked) {
  border-color: var(--primary, #2563eb);
  box-shadow: 0 0 0 1px var(--primary, #2563eb);
  background: rgba(37, 99, 235, 0.06);
}
@media (max-width: 479px) {
  .radio-choice-group {
    flex-direction: column;
    align-items: stretch;
  }
  .radio-choice-group .checkbox-inline {
    width: 100%;
  }
}

/* ── Champ de formulaire unifié ── */
.form-control,
.event-manage-layout .stats-event-select,
.event-manage-layout .stats-export-format,
.event-manage-layout .input-filter-tickets,
.event-manage-layout .em-party-tlabel,
.event-manage-layout .em-party-tcap,
.event-manage-layout .form-group > input:not([type="hidden"]):not([type="radio"]):not([type="checkbox"]):not([type="button"]):not([type="submit"]),
.event-manage-layout .form-group > select,
.event-manage-layout .form-group > textarea,
.event-manage-layout .share-textarea {
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  min-height: 2.75rem;
  padding: 0.625rem 0.875rem;
  font-family: inherit;
  font-size: 0.9375rem;
  line-height: 1.4;
  color: var(--text-base);
  background-color: var(--bg-surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.05);
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    background-color 0.2s ease;
  -webkit-appearance: none;
  appearance: none;
  box-sizing: border-box;
}
.event-manage-layout .form-group > textarea,
.event-manage-layout .share-textarea,
textarea.form-control {
  min-height: 5.5rem;
  resize: vertical;
  line-height: 1.5;
}
.form-control::placeholder,
.event-manage-layout .form-group > input::placeholder,
.event-manage-layout .form-group > textarea::placeholder {
  color: var(--text-soft);
  opacity: 1;
}
.form-control:hover:not(:disabled):not(:read-only),
.event-manage-layout .stats-event-select:hover:not(:disabled),
.event-manage-layout .stats-export-format:hover:not(:disabled),
.event-manage-layout .input-filter-tickets:hover:not(:disabled),
.event-manage-layout .em-party-tlabel:hover:not(:disabled),
.event-manage-layout .em-party-tcap:hover:not(:disabled),
.event-manage-layout .form-group > input:hover:not(:disabled):not(:read-only),
.event-manage-layout .form-group > select:hover:not(:disabled),
.event-manage-layout .form-group > textarea:hover:not(:disabled) {
  border-color: rgba(var(--primary-rgb), 0.45);
}
.form-control:focus,
.event-manage-layout .stats-event-select:focus,
.event-manage-layout .stats-export-format:focus,
.event-manage-layout .input-filter-tickets:focus,
.event-manage-layout .em-party-tlabel:focus,
.event-manage-layout .em-party-tcap:focus,
.event-manage-layout .form-group > input:focus,
.event-manage-layout .form-group > select:focus,
.event-manage-layout .form-group > textarea:focus,
.event-manage-layout .share-textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow:
    0 0 0 3px rgba(var(--primary-rgb), 0.16),
    inset 0 1px 2px rgba(15, 23, 42, 0.05);
}
.form-control:disabled,
.event-manage-layout .form-group > input:disabled,
.event-manage-layout .form-group > select:disabled,
.event-manage-layout .form-group > textarea:disabled {
  opacity: 0.62;
  cursor: not-allowed;
  background-color: var(--bg-surface-2);
}
select.form-control,
.event-manage-layout .stats-event-select,
.event-manage-layout .stats-export-format,
.event-manage-layout .form-group > select {
  padding-right: 2.35rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2.25' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.7rem center;
  background-size: 1rem;
  cursor: pointer;
}
[data-theme="dark"] select.form-control,
[data-theme="dark"] .event-manage-layout .stats-event-select,
[data-theme="dark"] .event-manage-layout .stats-export-format,
[data-theme="dark"] .event-manage-layout .form-group > select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2.25' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}
[data-theme="dark"] .form-control,
[data-theme="dark"] .event-manage-layout .stats-event-select,
[data-theme="dark"] .event-manage-layout .stats-export-format,
[data-theme="dark"] .event-manage-layout .input-filter-tickets,
[data-theme="dark"] .event-manage-layout .em-party-tlabel,
[data-theme="dark"] .event-manage-layout .em-party-tcap,
[data-theme="dark"] .event-manage-layout .form-group > input:not([type="hidden"]):not([type="radio"]):not([type="checkbox"]),
[data-theme="dark"] .event-manage-layout .form-group > select,
[data-theme="dark"] .event-manage-layout .form-group > textarea,
[data-theme="dark"] .event-manage-layout .share-textarea {
  background-color: var(--bg-surface);
  border-color: rgba(255, 255, 255, 0.14);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2);
  color: var(--text-base);
}
[data-theme="dark"] .form-control[type="date"],
[data-theme="dark"] .form-control[type="time"],
[data-theme="dark"] .event-manage-layout input[type="date"],
[data-theme="dark"] .event-manage-layout input[type="time"] {
  color-scheme: dark;
}
.form-control[type="number"],
.event-manage-layout input[type="number"] {
  font-variant-numeric: tabular-nums;
}
.event-manage-layout .event-manage-event-picker label {
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--text-base);
}
.event-manage-layout .form-group label,
.event-manage-layout .form-label-block {
  display: block;
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--text-base);
  margin-bottom: 0.4rem;
}
.event-manage-layout .em-phone-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: stretch;
  margin-top: 0.35rem;
}
.event-manage-layout .em-phone-row .stats-event-select {
  flex: 0 1 11rem;
  min-width: min(11rem, 100%);
}
.event-manage-layout .em-phone-row .form-control {
  flex: 1 1 8rem;
}
.em-party-place-type-opt input[type="radio"] {
  width: 1.05rem;
  height: 1.05rem;
  margin: 0;
  accent-color: var(--primary);
  cursor: pointer;
  flex-shrink: 0;
}

.hidden {
  display: none !important;
}
.auth-form .btn,
.auth-form .btn-block {
  margin-top: 12px;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}
.auth-switch {
  text-align: center;
  margin-top: 16px;
  font-size: 0.9rem;
}
.auth-google-wrap {
  margin-top: 12px;
  width: 100%;
  max-width: 100%;
}
.auth-google-sep {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 8px 0 12px;
  color: var(--neutral-gray);
  font-size: 0.85rem;
}
.auth-google-sep::before,
.auth-google-sep::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: rgba(125, 125, 125, 0.35);
}
.auth-google-sep span {
  white-space: nowrap;
}
.auth-google-btn {
  display: flex;
  justify-content: stretch;
  align-items: stretch;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}
.auth-google-btn > div,
.auth-google-btn iframe,
.auth-google-btn [role="button"] {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box;
}
#auth-google-hint {
  display: none;
}
.auth-google-hint--visible {
  display: block !important;
  margin-top: 0.5rem;
  text-align: center;
}
#auth-modal .modal-content {
  max-width: min(420px, calc(100vw - 24px));
  width: calc(100% - 24px);
  box-sizing: border-box;
}
#auth-modal .auth-form,
#auth-modal .auth-google-wrap,
#auth-modal .auth-switch {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}
#auth-modal .auth-form .form-group,
#auth-modal .auth-form input,
#auth-modal .auth-form .btn {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}
#auth-modal .auth-form .btn {
  margin-top: 14px;
}
@media (max-width: 479px) {
  #auth-modal .modal-content {
    width: calc(100% - 16px);
    max-width: none;
    padding: 22px 16px 18px;
  }
  #auth-modal .auth-form .btn,
  #auth-modal .auth-google-btn {
    min-height: 48px;
  }
}

.modal .btn-block,
.checkout-step-payment-actions .btn-block {
  width: 100%;
  max-width: 100%;
}

.link-btn {
  background: none;
  border: none;
  color: var(--accent);
  text-decoration: underline;
  cursor: pointer;
  font-size: inherit;
}

/* ========== PAGE ENTER ANIMATION ========== */
.page-enter main {
  animation: pageEnter 0.6s ease-out;
}
@keyframes pageEnter {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ========== EVENTS PAGE (catalogue) ========== */
.page-events .hero {
  min-height: 40vh;
}
.page-events .hero-title {
  font-size: 2.5rem;
}
.page-events .hero-subtitle {
  font-size: 1.1rem;
}
.events-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 32px;
  align-items: center;
}
.events-filters input,
.events-filters select {
  padding: 12px 16px;
  border: 2px solid rgba(0, 0, 0, 0.1);
  border-radius: var(--radius-sm);
  min-width: 200px;
}
.events-list .events-grid {
  justify-content: center;
}

/* events.html : affichage mobile */
@media (max-width: 767px) {
  .page-events .hero {
    min-height: 35vh;
    min-height: 35dvh;
    padding-top: max(60px, calc(36px + var(--safe-top)));
    padding-bottom: 28px;
  }
  .page-events .hero-title {
    font-size: 1.5rem;
    line-height: 1.25;
  }
  .page-events .hero-subtitle {
    font-size: 0.9375rem;
  }
  .page-events .section.events-list {
    padding-top: 24px;
    padding-bottom: 32px;
  }
  .page-events .section-title {
    font-size: 1.25rem;
    margin-bottom: 16px;
  }
  .events-filters {
    margin-bottom: 20px;
    width: 100%;
  }
  .events-filters input,
  .events-filters select {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
    padding: 10px 14px;
  }
  .events-grid {
    grid-template-columns: 1fr;
    gap: 20px;
    width: 100%;
  }
  .events-grid .event-card {
    max-width: 100%;
    width: 100%;
    margin: 0;
    height: auto;
    min-height: 320px;
  }
  .events-grid .event-card-body {
    padding: 18px 16px;
  }
  .events-grid .event-card-title {
    font-size: 1.1rem;
  }
  .events-grid .event-card-image {
    height: 140px;
  }
  .events-grid .event-card-price {
    font-size: 1.25rem;
  }
  .page-events #event-detail {
    max-width: 100% !important;
    padding: 0;
  }
  .page-events #event-detail [data-event-title] {
    font-size: 1.25rem;
  }
  .page-events #event-detail .btn-lg {
    width: 100%;
    min-height: 48px;
  }
}
@media (max-width: 479px) {
  .page-events .hero-title {
    font-size: 1.35rem;
  }
  .events-grid .event-card {
    min-height: 280px;
  }
  .events-grid .event-card-image {
    height: 120px;
  }
}

/* ========== DASHBOARD EXECUTIF ========== */
.dashboard-layout {
  display: grid;
  grid-template-columns: 280px 1fr;
  min-height: calc(100vh - 80px);
}
.dashboard-layout-tabs {
  grid-template-columns: 1fr;
}
.dashboard-tabs {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 8px;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  margin-bottom: 24px;
  padding: 2px 0 4px;
  box-sizing: border-box;
}
.dashboard-tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex: 1 1 calc(25% - 8px);
  min-width: min(100%, 9.5rem);
  max-width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  font-size: clamp(0.72rem, 1.6vw, 0.875rem);
  font-weight: 600;
  line-height: 1.25;
  text-align: center;
  color: var(--neutral-dark);
  background: var(--white, #fff);
  border: 1.5px solid rgba(26, 31, 53, 0.12);
  border-radius: 10px;
  cursor: pointer;
  text-decoration: none;
  margin-bottom: 0;
  box-sizing: border-box;
  transition:
    background 0.2s,
    border-color 0.2s,
    color 0.2s,
    box-shadow 0.2s;
  -webkit-tap-highlight-color: transparent;
}
.dashboard-tab svg {
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  vertical-align: middle;
}
.dashboard-tab-label {
  line-height: inherit;
}
@media (min-width: 768px) {
  .dashboard-tab {
    white-space: normal;
    word-break: break-word;
    hyphens: auto;
  }
}
.dashboard-tab:hover {
  color: var(--primary);
  border-color: rgba(var(--primary-rgb), 0.45);
  background: rgba(var(--primary-rgb), 0.06);
}
.dashboard-tab.active {
  color: var(--on-primary);
  border-color: var(--primary);
  background: var(--primary);
  box-shadow: 0 2px 10px rgba(var(--primary-rgb), 0.28);
}
[data-theme="dark"] .dashboard-tab {
  color: #e2e8f0;
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.12);
}
[data-theme="dark"] .dashboard-tab:hover {
  color: #fff;
  background: rgba(var(--primary-rgb), 0.14);
  border-color: rgba(var(--primary-rgb), 0.5);
}
[data-theme="dark"] .dashboard-tab.active {
  color: var(--on-primary);
  background: var(--primary);
  border-color: var(--primary);
}
@media (min-width: 768px) and (max-width: 1199px) {
  .dashboard-tab {
    flex: 1 1 calc(33.333% - 8px);
    min-width: calc(33.333% - 8px);
  }
}
@media (max-width: 767px) {
  .dashboard-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 6px;
    padding-bottom: 10px;
    margin-bottom: 20px;
  }
  .dashboard-tabs::-webkit-scrollbar {
    display: none;
  }
  .dashboard-tab {
    flex: 0 0 auto;
    min-width: max-content;
    max-width: none;
    white-space: nowrap;
    scroll-snap-align: start;
    font-size: 0.8rem;
    padding: 10px 14px;
  }
}
@media (max-width: 479px) {
  .dashboard-tab {
    font-size: 0.76rem;
    padding: 9px 12px;
    min-height: 42px;
  }
}
@media (max-width: 1023px) {
  .dashboard-layout,
  .event-manage-layout {
    grid-template-columns: 1fr;
    min-height: 0;
    row-gap: 0;
    gap: 0;
    width: 100%;
    max-width: 100%;
  }
  .dashboard-sidebar {
    display: none;
  }
  .nav-dashboard-section {
    display: block;
  }
  .dashboard-main {
    padding-top: 0;
    padding-left: 16px;
    padding-right: 16px;
    padding-bottom: 24px;
    margin-top: 0;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }
  .dashboard-main .dashboard-title {
    margin-top: 0;
    margin-bottom: 16px;
    padding-top: 8px;
  }
}
@media (min-width: 1024px) {
  .navbar-menu > a.nav-dashboard-section {
    display: none !important;
  }
  .navbar-menu .nav-admin-menu:not(.hidden) {
    display: flex !important;
  }
  .nav-event-manage-mobile {
    display: none !important;
  }
  /* Page « Gérer l'événement » : pas de menu latéral sur desktop, les liens sont dans la nav */
  .event-manage-layout .event-manage-sidebar {
    display: none !important;
  }
  .event-manage-layout {
    grid-template-columns: 1fr;
  }
}
.dashboard-drawer-toggle,
.dashboard-drawer-overlay,
.dashboard-drawer {
  display: none !important;
}

.dashboard-sidebar {
  background: var(--neutral-dark);
  color: var(--neutral-light);
  padding: 24px 0;
  position: sticky;
  top: 72px;
  height: calc(100vh - 72px);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}
[data-theme="dark"] .dashboard-sidebar {
  background: #0f172a;
}
.dashboard-sidebar .nav-link {
  display: block;
  padding: 12px 24px;
  color: rgba(255, 255, 255, 0.85);
  border-radius: 0;
  border-left: 3px solid transparent;
}
.dashboard-sidebar .nav-link:hover {
  color: var(--secondary);
  background: rgba(255, 255, 255, 0.05);
}
.dashboard-sidebar .nav-link.active {
  color: var(--secondary);
  border-left-color: var(--secondary);
}
.dashboard-sidebar .nav-link::after {
  display: none;
}
.dashboard-sidebar-footer {
  margin-top: auto;
  padding: 16px 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.dashboard-sidebar-footer .btn-block {
  width: 100%;
  justify-content: center;
}
.dashboard-main {
  padding: 32px;
  background: var(--neutral-light);
  min-width: 0;
  max-width: 100%;
  overflow-x: clip;
  box-sizing: border-box;
}
[data-theme="dark"] .dashboard-main {
  background: var(--black);
}
.dashboard-section {
  display: none;
}
.dashboard-section.is-active {
  display: block;
}

.dashboard-title {
  margin-bottom: 32px;
}
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  gap: 10px;
  margin-bottom: 24px;
  width: 100%;
  max-width: 100%;
}
.kpi-card {
  background: var(--white);
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
  position: relative;
  overflow: hidden;
  min-width: 0;
}
[data-theme="dark"] .kpi-card {
  background: var(--neutral-light);
}
.kpi-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--gradient-gold);
}
.kpi-card h4 {
  margin: 0 0 2px;
  font-size: 0.65rem;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.25px;
  line-height: 1.2;
}
.kpi-card .value {
  font-size: clamp(0.95rem, 2.4vw, 1.25rem);
  font-weight: 700;
  color: var(--black);
  line-height: 1.25;
  margin: 0;
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: break-word;
  white-space: normal;
}
#stats #kpi-revenue,
.kpi-card #kpi-revenue,
.da-kpi-card #kpi-revenue {
  font-size: clamp(0.78rem, 1.8vw, 1.05rem);
  line-height: 1.35;
  white-space: normal;
  word-break: break-word;
}
.kpi-card-total-tickets::before {
  background: linear-gradient(90deg, var(--accent), var(--gradient-gold));
  height: 3px;
}

/* —— Data analytics (statistiques pro) —— */
.da-analytics-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px 24px;
  margin-bottom: 20px;
  padding: 20px 22px;
  border-radius: var(--radius-lg);
  background: linear-gradient(
    135deg,
    rgba(253, 216, 53, 0.12) 0%,
    rgba(255, 152, 0, 0.06) 45%,
    rgba(33, 150, 243, 0.05) 100%
  );
  border: 1px solid rgba(253, 216, 53, 0.22);
}
[data-theme="dark"] .da-analytics-header {
  background: linear-gradient(
    135deg,
    rgba(253, 216, 53, 0.08) 0%,
    rgba(255, 255, 255, 0.03) 100%
  );
  border-color: rgba(255, 255, 255, 0.08);
}
.da-analytics-eyebrow {
  margin: 0 0 4px;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--accent);
}
.da-analytics-title {
  margin: 0 0 8px;
  font-size: 1.35rem;
  font-weight: 800;
  line-height: 1.25;
  color: var(--black);
}
[data-theme="dark"] .da-analytics-title {
  color: #f1f5f9;
}
.da-analytics-summary {
  margin: 0;
  max-width: 720px;
  font-size: 0.92rem;
  line-height: 1.55;
  color: rgba(26, 31, 53, 0.72);
}
[data-theme="dark"] .da-analytics-summary {
  color: rgba(255, 255, 255, 0.65);
}
.da-analytics-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.da-badge {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.da-badge--fill {
  color: #1565c0;
  background: rgba(33, 150, 243, 0.12);
  border: 1px solid rgba(33, 150, 243, 0.25);
}
.da-badge--scan {
  color: #2e7d32;
  background: rgba(76, 175, 80, 0.12);
  border: 1px solid rgba(76, 175, 80, 0.28);
}
.da-badge--sold {
  color: #e65100;
  background: rgba(255, 152, 0, 0.12);
  border: 1px solid rgba(255, 152, 0, 0.28);
}
.da-badge--reserved {
  color: #9a3412;
  background: rgba(255, 152, 0, 0.16);
  border: 1px solid rgba(255, 152, 0, 0.35);
}
.da-table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.da-kpi-grid .da-kpi-card .da-kpi-hint {
  display: block;
  margin-top: 2px;
  font-size: 0.68rem;
  font-weight: 600;
  color: rgba(26, 31, 53, 0.48);
  line-height: 1.2;
}
[data-theme="dark"] .da-kpi-grid .da-kpi-card .da-kpi-hint {
  color: rgba(255, 255, 255, 0.45);
}
.da-charts-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 20px;
}
.da-charts-grid--compact {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.da-chart-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: 18px 18px 14px;
  min-width: 0;
}
[data-theme="dark"] .da-chart-card {
  background: var(--neutral-light);
}
.da-chart-card--wide {
  grid-column: 1 / -1;
}
.da-chart-title {
  margin: 0 0 4px;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--black);
}
[data-theme="dark"] .da-chart-title {
  color: #f1f5f9;
}
.da-chart-sub {
  margin: 0 0 12px;
  font-size: 0.78rem;
  color: rgba(26, 31, 53, 0.55);
}
[data-theme="dark"] .da-chart-sub {
  color: rgba(255, 255, 255, 0.5);
}
.da-chart-canvas-wrap {
  position: relative;
  height: 220px;
  width: 100%;
}
.da-chart-canvas-wrap--sm {
  height: 180px;
}
.da-chart-canvas-wrap--tall {
  height: 300px;
}
.da-insights-panel {
  margin-bottom: 28px;
  padding: 18px 20px;
  border-radius: var(--radius-lg);
  background: var(--white);
  box-shadow: var(--shadow-md);
  border-left: 4px solid var(--accent);
}
[data-theme="dark"] .da-insights-panel {
  background: var(--neutral-light);
}
.da-insights-title {
  margin: 0 0 12px;
  font-size: 1rem;
  font-weight: 700;
}
.da-insights-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.da-insight {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.88rem;
  line-height: 1.45;
  color: rgba(26, 31, 53, 0.82);
}
[data-theme="dark"] .da-insight {
  color: rgba(255, 255, 255, 0.78);
}
.da-insight-dot {
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  margin-top: 6px;
  border-radius: 50%;
  background: var(--accent);
}
.da-insight--success .da-insight-dot {
  background: #43a047;
}
.da-insight--warn .da-insight-dot {
  background: #fb8c00;
}
.da-insight--info .da-insight-dot {
  background: #1e88e5;
}
@media (max-width: 900px) {
  .da-charts-grid,
  .da-charts-grid--compact {
    grid-template-columns: 1fr;
  }
  .da-chart-card--wide {
    grid-column: auto;
  }
}

.chart-container {
  background: var(--white);
  padding: 24px;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  margin-bottom: 32px;
  height: 360px;
}
[data-theme="dark"] .chart-container {
  background: var(--neutral-light);
}
.chart-container h3 {
  margin: 0 0 20px;
  font-size: 1.125rem;
}

/* Bloc Stats event-manage : même rendu que #stats du dashboard */
.chart-container-auto {
  height: auto;
  min-height: 0;
}
#event-manage-section-stats .chart-container-auto.event-manage-tiers-chart,
#event-manage-section-stats .chart-container.chart-container-auto {
  padding: 24px;
  margin-bottom: 32px;
}
#event-manage-section-stats .stats-kpi-heading.section-title {
  margin-bottom: 20px;
  font-size: 1.25rem;
}
#event-manage-section-stats .stats-kpi-grid.kpi-grid,
#event-manage-section-stats .kpi-grid {
  gap: 10px;
  margin-bottom: 24px;
  width: 100%;
  max-width: 100%;
}
#statistiques {
  scroll-margin-top: 5.5rem;
  min-width: 0;
}
#event-manage-section-stats,
#stats {
  min-width: 0;
}

#statistiques .stats-stats-toolbar,
#stats .stats-stats-toolbar,
.stats-stats-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 12px;
}
#stats .stats-stats-toolbar .stats-event-select,
.stats-stats-toolbar .stats-event-select {
  min-width: 160px;
  max-width: min(100%, 420px);
}
#stats .stats-stats-toolbar .stats-export-report-btn,
.stats-stats-toolbar .stats-export-report-btn {
  flex-shrink: 0;
}

.stats-export-group {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
}
.stats-export-format {
  min-width: 140px;
  max-width: 100%;
}
#event-manage-section-stats .event-manage-stats-toolbar .stats-export-group,
.event-manage-stats-toolbar .stats-export-group {
  flex-shrink: 0;
}

#event-manage-section-stats .event-manage-stats-toolbar,
.event-manage-stats-toolbar {
  justify-content: space-between;
  align-items: center;
  width: 100%;
  margin-bottom: 1rem;
  gap: 12px 16px;
}
#event-manage-section-stats .event-manage-stats-toolbar .stats-kpi-heading,
.event-manage-stats-toolbar .stats-kpi-heading {
  margin-bottom: 0;
  flex: 1 1 auto;
  min-width: 0;
}

.stats-event-manage-block {
  background: var(--white);
  padding: 24px;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  margin-top: 24px;
}
[data-theme="dark"] .stats-event-manage-block {
  background: var(--neutral-light);
}
.stats-event-manage-block .section-title {
  margin: 0 0 8px;
  font-size: 1.125rem;
}
.stats-event-manage-block .mb-2 {
  margin-bottom: 12px;
}
.stats-event-manage-links .btn {
  margin-bottom: 16px;
  display: inline-block;
}
.stats-event-manage-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.stats-event-manage-list li {
  padding: 6px 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  font-size: 0.9375rem;
}
[data-theme="dark"] .stats-event-manage-list li {
  border-bottom-color: rgba(255, 255, 255, 0.08);
}
.stats-event-manage-list li:last-child {
  border-bottom: none;
}
.stats-event-manage-list a {
  font-weight: 600;
  color: var(--primary);
  text-decoration: none;
}
.stats-event-manage-list a:hover {
  text-decoration: underline;
}

.form-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
}
.form-row .form-group {
  margin-bottom: 0;
}
.dashboard-actions {
  margin-top: 24px;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: stretch;
  width: 100%;
  max-width: 100%;
}
.dashboard-actions .btn {
  flex: 0 1 auto;
  min-width: 0;
}
@media (max-width: 575px) {
  .dashboard-actions {
    flex-direction: column;
  }
  .dashboard-actions .btn {
    width: 100%;
    max-width: 100%;
  }
}

/* Mes événements : formulaire et bouton submit toujours cliquables */
#mes-evenements-create-form {
  position: relative;
  z-index: 1;
  pointer-events: auto;
}
#mes-evenements-submit-btn {
  min-height: 44px;
  min-width: 160px;
  pointer-events: auto;
  cursor: pointer;
}
@media (max-width: 767px) {
  #mes-evenements-submit-btn {
    min-height: 48px;
    padding: 12px 20px;
  }
}

/* Event form (create) */
.create-event-form .form-group {
  margin-bottom: 20px;
}
.create-event-form .form-group.full {
  grid-column: 1 / -1;
}
.tiers-editor {
  border: 2px dashed rgba(0, 0, 0, 0.15);
  border-radius: var(--radius-md);
  padding: 24px;
  margin-top: 16px;
}
[data-theme="dark"] .tiers-editor {
  border-color: rgba(255, 255, 255, 0.2);
}
.tier-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr auto;
  gap: 12px;
  align-items: end;
  margin-bottom: 12px;
}
@media (max-width: 767px) {
  .tier-row {
    grid-template-columns: 1fr 1fr auto;
  }
  .tier-row .form-group:first-child {
    grid-column: 1 / -1;
  }
}
.tier-row .btn-remove {
  min-width: 48px;
}
.tier-price-inline {
  display: flex;
  gap: 8px;
  align-items: center;
}
.tier-price-inline input {
  flex: 1;
  min-width: 80px;
}
.tier-price-inline select.tier-currency {
  width: auto;
  min-width: 72px;
}
.em-tm-match-tiers .tier-row {
  grid-template-columns: 1fr minmax(7rem, 9rem) 1fr 1fr 1fr auto;
}
@media (max-width: 767px) {
  .em-tm-match-tiers .tier-row {
    grid-template-columns: 1fr 1fr auto;
  }
}

/* ========== ACCOUNT PAGE (mes billets) ========== */
.tickets-list {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.ticket-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 24px;
  align-items: center;
  border: 2px solid transparent;
  background-clip: padding-box;
  position: relative;
}
.ticket-card::before {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  padding: 2px;
  background: linear-gradient(135deg, var(--primary), var(--accent));
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}
[data-theme="dark"] .ticket-card {
  background: var(--neutral-light);
}
@media (max-width: 767px) {
  .ticket-card {
    grid-template-columns: 1fr;
  }
}
.ticket-info {
  padding: 24px;
}
.ticket-info-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 4px;
}
.ticket-info-header h3 {
  margin: 0;
  flex: 1;
}
.btn-icon {
  flex-shrink: 0;
  padding: 6px 10px;
  font-size: 1.25rem;
  line-height: 1;
  min-width: auto;
}
.btn-ticket-preview:hover {
  opacity: 0.9;
}
.ticket-preview-qr {
  text-align: center;
  margin: 16px 0;
}
.ticket-preview-qr canvas {
  border-radius: var(--radius-sm);
}
.ticket-preview-code {
  margin: 16px 0 0;
  font-size: 1rem;
}
.ticket-preview-code code {
  font-family: ui-monospace, monospace;
  letter-spacing: 0.05em;
  padding: 4px 8px;
  background: var(--neutral-light);
  border-radius: var(--radius-sm);
}
[data-theme="dark"] .ticket-preview-code code {
  background: rgba(255, 255, 255, 0.1);
}

/* Modale billet type facture */
.modal-content-ticket-invoice {
  max-width: 480px;
}
.ticket-preview-invoice-paper {
  background: #fff;
  color: #1a1a1a;
  padding: 1.5rem;
  border-radius: 8px;
  border: 1px solid #e5e5e5;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}
[data-theme="dark"] .ticket-preview-invoice-paper {
  background: var(--neutral-light);
  border-color: rgba(255, 255, 255, 0.15);
  color: var(--white);
}
.ticket-preview-invoice-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.75rem;
  margin-bottom: 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 2px solid var(--primary);
}
.ticket-preview-header-main {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex: 1;
  min-width: 0;
}
.ticket-preview-logo-wrap {
  flex-shrink: 0;
}
.ticket-preview-logo {
  display: block;
  max-height: 44px;
  width: auto;
  max-width: min(200px, 42vw);
  object-fit: contain;
  object-position: left center;
}
.ticket-preview-brand strong {
  display: block;
  font-size: 1.1rem;
  color: var(--primary);
}
.ticket-preview-brand span {
  font-size: 0.8rem;
  color: var(--neutral-dark);
}
[data-theme="dark"] .ticket-preview-brand span {
  color: rgba(255, 255, 255, 0.7);
}
.ticket-preview-doc {
  font-size: 0.85rem;
  color: var(--neutral-dark);
}
.ticket-preview-invoice-event {
  margin-bottom: 1rem;
  padding: 0.75rem;
  background: rgba(var(--primary-rgb), 0.06);
  border-radius: 6px;
  border-left: 4px solid var(--primary);
}
.ticket-preview-cover-wrap {
  margin: 0 0 0.65rem;
  border-radius: 6px;
  overflow: hidden;
  line-height: 0;
}
.ticket-preview-cover {
  display: block;
  width: 100%;
  max-height: 200px;
  object-fit: cover;
  object-position: center;
}
.ticket-preview-invoice-event h3 {
  margin: 0 0 6px;
  font-size: 1.05rem;
}
.ticket-preview-invoice-event p {
  margin: 0 0 4px;
  font-size: 0.9rem;
  color: #444;
}
[data-theme="dark"] .ticket-preview-invoice-event p {
  color: rgba(255, 255, 255, 0.85);
}
.ticket-preview-invoice-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 1rem;
  font-size: 0.9rem;
}
.ticket-preview-invoice-table th,
.ticket-preview-invoice-table td {
  padding: 8px 10px;
  text-align: left;
  border-bottom: 1px solid #eee;
}
.ticket-preview-invoice-table th {
  background: rgba(0, 0, 0, 0.04);
  font-weight: 600;
}
[data-theme="dark"] .ticket-preview-invoice-table th {
  background: rgba(255, 255, 255, 0.08);
}
.ticket-preview-invoice-qr-row {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  flex-wrap: wrap;
  padding-top: 1rem;
  border-top: 1px solid #eee;
}
[data-theme="dark"] .ticket-preview-invoice-qr-row {
  border-top-color: rgba(255, 255, 255, 0.1);
}
.ticket-preview-code-block {
  flex: 1;
  min-width: 140px;
}
.ticket-preview-code-label {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--neutral-dark);
  margin-bottom: 4px;
}
.ticket-preview-code-value {
  display: inline-block;
  font-family: ui-monospace, monospace;
  font-size: 1rem;
  letter-spacing: 0.08em;
  padding: 8px 12px;
  background: rgba(0, 0, 0, 0.05);
  border: 1px solid #ddd;
  border-radius: 6px;
}
[data-theme="dark"] .ticket-preview-code-value {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.2);
}
.ticket-preview-code-hint {
  margin: 8px 0 0;
  font-size: 0.8rem;
  color: var(--neutral-dark);
}

.ticket-info h3 {
  margin: 0 0 8px;
}
.ticket-info p {
  margin: 0 0 4px;
  font-size: 0.9rem;
}
.ticket-verification-code {
  margin-top: 8px;
}
.ticket-verification-code code {
  font-family: ui-monospace, monospace;
  font-size: 1rem;
  letter-spacing: 0.05em;
  padding: 2px 6px;
  background: var(--neutral-light);
  border-radius: var(--radius-sm);
}
[data-theme="dark"] .ticket-verification-code code {
  background: rgba(255, 255, 255, 0.1);
}
.ticket-qr {
  padding: 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  background: var(--neutral-light);
}
[data-theme="dark"] .ticket-qr {
  background: rgba(255, 255, 255, 0.05);
}
.ticket-qr canvas,
.ticket-qr img {
  border-radius: var(--radius-sm);
}
.ticket-qr .btn {
  margin-top: 8px;
}

/* ========== Facture / Billet professionnel ========== */
.ticket-invoice-wrapper {
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
}
[data-theme="dark"] .ticket-invoice-wrapper {
  border-top-color: rgba(255, 255, 255, 0.15);
}
[data-theme="dark"] .ticket-invoice-page--ticket {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.12);
}
[data-theme="dark"] .ticket-invoice-summary-hint {
  background: rgba(var(--primary-rgb), 0.08);
  color: var(--text, #e8e8e8);
}
.ticket-invoice {
  background: #fff;
  color: #1a1a1a;
  max-width: 800px;
  margin: 0 auto;
  padding: 1rem 1.5rem 1.5rem;
  border: 1px solid #ddd;
  border-radius: 4px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  font-family: "Helvetica", "Helvetica Neue", Arial, sans-serif;
  font-size: 14px;
}

/* Une page logique par billet (plusieurs billets : récap puis 1 page / billet avec QR + code) */
.ticket-invoice-page {
  padding-bottom: 1.25rem;
  margin-bottom: 1.5rem;
  border-bottom: 1px dashed rgba(0, 0, 0, 0.12);
}
.ticket-invoice-page:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}
.ticket-invoice-page--ticket {
  background: #fafcfa;
  border-radius: 6px;
  padding: 1rem 1.25rem 1.25rem;
  border: 1px solid #e0e8e0;
}
.ticket-invoice-summary-hint {
  margin: 0.75rem 0 0;
  padding: 0.5rem 0.75rem;
  background: #faf8e8;
  border-radius: 4px;
  font-size: 0.9rem;
  line-height: 1.45;
}
.ticket-invoice-ticket-header {
  font-size: 0.85rem;
  color: #555;
  margin-bottom: 0.75rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid #e5e5e5;
}
.ticket-invoice-doc-mini {
  font-size: 0.8rem;
  color: #666;
  margin: 0 0 0.5rem;
}
.ticket-invoice-ticket-title {
  margin: 0 0 0.5rem;
  font-size: 1.05rem;
  color: #8a6500;
}
.ticket-invoice-ref {
  margin: 0 0 12px;
  font-size: 0.9rem;
}
.ticket-invoice-code-big {
  text-align: center;
  margin: 1rem 0;
  padding: 0.75rem;
  background: #fff;
  border: 2px dashed #8a6500;
  border-radius: 6px;
}
.ticket-invoice-code-big-label {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  color: #666;
  margin-bottom: 6px;
}
.ticket-invoice-code-big-value {
  font-family: ui-monospace, monospace;
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: #1a1a1a;
}
.ticket-invoice-qr-section--single {
  margin-top: 1rem;
  text-align: center;
}
.ticket-invoice-qr-section--single strong {
  display: block;
  margin-bottom: 8px;
  font-size: 0.85rem;
}
.ticket-invoice-page__qr .ticket-invoice-qr-canvas {
  margin-left: auto;
  margin-right: auto;
}
.ticket-invoice-footer--compact {
  margin-top: 1rem;
  padding-top: 0.75rem;
  font-size: 0.75rem;
  border-top: 1px solid #e5e5e5;
}
.ticket-invoice-footer--summary {
  margin-top: 1rem;
}

.ticket-invoice-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid #8a6500;
}
.ticket-invoice-logo-wrap {
  margin-bottom: 0.35rem;
}
.ticket-invoice-logo-wrap--ticket {
  margin-bottom: 0.4rem;
}
.ticket-invoice-logo {
  display: block;
  max-height: 52px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  object-position: left center;
}
.ticket-invoice-logo--small,
.ticket-invoice-logo-wrap--ticket .ticket-invoice-logo {
  max-height: 36px;
}
.ticket-invoice-for-pdf .ticket-invoice-logo {
  max-height: 46px;
}
.ticket-invoice-brand h2 {
  margin: 0 0 2px;
  font-size: 1.35rem;
  font-weight: 700;
  color: #8a6500;
}
.ticket-invoice-brand p {
  margin: 0;
  font-size: 0.8rem;
  color: #555;
}
.ticket-invoice-doc-info {
  text-align: right;
}
.ticket-invoice-doc-info .doc-type {
  font-size: 1.1rem;
  font-weight: 700;
  color: #1a1a1a;
  margin: 0 0 2px;
}
.ticket-invoice-doc-info .doc-number,
.ticket-invoice-doc-info .doc-date {
  font-size: 0.85rem;
  color: #555;
  margin: 0;
}
.ticket-invoice-event {
  margin-bottom: 0.75rem;
  padding: 0.5rem 0.75rem;
  background: #f8faf8;
  border-radius: 4px;
  border-left: 4px solid #8a6500;
}
.ticket-invoice-cover-wrap {
  margin: 0 0 0.5rem;
  border-radius: 4px;
  overflow: hidden;
  line-height: 0;
}
.ticket-invoice-cover {
  display: block;
  width: 100%;
  max-height: 180px;
  object-fit: cover;
  object-position: center;
}
.ticket-invoice-cover--small {
  max-height: 100px;
  margin-bottom: 0.35rem;
}
.ticket-invoice-page--ticket > .ticket-invoice-cover-wrap {
  margin-bottom: 0.4rem;
}
.ticket-invoice-for-pdf .ticket-invoice-cover {
  max-height: 160px;
}
.ticket-invoice-event h3 {
  margin: 0 0 4px;
  font-size: 1rem;
  color: #1a1a1a;
}
.ticket-invoice-event p {
  margin: 0 0 2px;
  font-size: 0.85rem;
  color: #444;
}
.ticket-invoice-table {
  width: 100%;
  max-width: 100%;
  border-collapse: collapse;
  margin-bottom: 0.5rem;
  table-layout: fixed;
}
.ticket-invoice-table th,
.ticket-invoice-table td {
  padding: 6px 8px;
  text-align: left;
  border-bottom: 1px solid #e5e5e5;
  overflow: hidden;
  word-wrap: break-word;
}
.ticket-invoice-table th:first-child,
.ticket-invoice-table td:first-child {
  width: 5%;
}
.ticket-invoice-table th:nth-child(2),
.ticket-invoice-table td:nth-child(2) {
  width: 20%;
}
.ticket-invoice-table th:nth-child(3),
.ticket-invoice-table td:nth-child(3) {
  width: 15%;
}
.ticket-invoice-table th:nth-child(4),
.ticket-invoice-table td:nth-child(4) {
  width: 16%;
}
.ticket-invoice-table th:nth-child(5),
.ticket-invoice-table td:nth-child(5) {
  width: 20%;
}
.ticket-invoice-table th:nth-child(6),
.ticket-invoice-table td:nth-child(6) {
  width: 24%;
}
.ticket-invoice-code-cell {
  font-family: ui-monospace, monospace;
  font-size: 0.85em;
  letter-spacing: 0.03em;
  word-break: break-all;
}
.ticket-invoice-table th {
  background: #f0f4f0;
  font-weight: 600;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: #333;
}
.ticket-invoice-table td {
  vertical-align: top;
}
.ticket-invoice-table tbody tr:last-child td {
  border-bottom: none;
}
.ticket-invoice-totals {
  text-align: right;
  margin-top: 0.5rem;
  padding: 0.5rem 10px;
  font-size: 1rem;
  font-weight: 700;
  color: #1a1a1a;
  border-top: 2px solid #8a6500;
}
.ticket-invoice-total-line + .ticket-invoice-total-line {
  margin-top: 0.4rem;
  padding-top: 0.4rem;
  border-top: 1px solid #e0e0e0;
}
.ticket-invoice-qr-section {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
  margin-top: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px solid #e5e5e5;
}
.ticket-invoice-qr-section > strong {
  width: 100%;
  margin-bottom: 0.25rem;
  font-size: 0.9rem;
  text-align: center;
}
.ticket-invoice-qr-item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.5rem 0.75rem;
  background: #fafafa;
  border-radius: 4px;
  border: 1px solid #eee;
  margin-left: auto;
  margin-right: auto;
}
.ticket-invoice-qr-item .qr-label {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  color: #666;
  margin-bottom: 4px;
}
.ticket-invoice-qr-item .qr-code-value {
  font-family: ui-monospace, monospace;
  font-size: 0.95rem;
  letter-spacing: 0.05em;
  padding: 4px 8px;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 4px;
}
.ticket-invoice-qr-canvas {
  min-width: 152px;
  min-height: 152px;
  width: 152px;
  height: 152px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border: 1px solid #eee;
  border-radius: 4px;
}
.ticket-invoice-qr-canvas img {
  width: 144px;
  height: 144px;
  min-width: 144px;
  min-height: 144px;
  display: block;
  object-fit: contain;
}
/* Largeur facture pour PDF A4, centrée sur la page */
.ticket-invoice-for-pdf {
  width: 190mm !important;
  max-width: 190mm !important;
  min-width: 190mm !important;
  box-sizing: border-box !important;
  padding: 6px 10px 10px !important;
  margin: 0 auto !important;
  position: relative !important;
  left: auto !important;
}
/* Conteneur page PDF : tout est centré */
.ticket-invoice-pdf-page {
  width: 210mm !important;
  min-height: 297mm !important;
  background: #fff !important;
  display: flex !important;
  justify-content: center !important;
  align-items: flex-start !important;
  padding: 0 !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  overflow: visible !important;
}
/* Forcer la visibilité des QR en capture PDF */
.ticket-invoice-for-pdf .ticket-invoice-qr-canvas,
.ticket-invoice-for-pdf .ticket-invoice-qr-section {
  visibility: visible !important;
  opacity: 1 !important;
}
.ticket-invoice-for-pdf .ticket-invoice-qr-canvas img {
  visibility: visible !important;
  opacity: 1 !important;
  width: 144px !important;
  height: 144px !important;
  min-width: 144px !important;
  min-height: 144px !important;
  display: block !important;
  background: #fff !important;
}
.ticket-invoice-for-pdf .ticket-invoice-header {
  margin-bottom: 0.5rem !important;
  padding-bottom: 0.4rem !important;
}
.ticket-invoice-for-pdf .ticket-invoice-event {
  margin-bottom: 0.5rem !important;
  padding: 0.4rem 0.6rem !important;
}
.ticket-invoice-for-pdf .ticket-invoice-table {
  margin-bottom: 0.4rem !important;
}
.ticket-invoice-for-pdf .ticket-invoice-table th,
.ticket-invoice-for-pdf .ticket-invoice-table td {
  padding: 4px 8px !important;
}
.ticket-invoice-for-pdf .ticket-invoice-totals {
  margin-top: 0.4rem !important;
  padding: 0.4rem 8px !important;
}
.ticket-invoice-for-pdf
  .ticket-invoice-total-line
  + .ticket-invoice-total-line {
  margin-top: 0.3rem !important;
  padding-top: 0.3rem !important;
}
.ticket-invoice-for-pdf .ticket-invoice-qr-section {
  margin-top: 0.5rem !important;
  padding-top: 0.5rem !important;
}
.ticket-invoice-for-pdf .ticket-invoice-footer {
  margin-top: 0.5rem !important;
  padding-top: 0.4rem !important;
}
.ticket-invoice-footer {
  margin-top: 0.75rem;
  padding-top: 0.5rem;
  border-top: 1px solid #e5e5e5;
  font-size: 0.8rem;
  color: #555;
  max-width: 100%;
  overflow-wrap: break-word;
}
.ticket-invoice-footer p {
  margin: 0 0 4px;
}
.ticket-preview-actions {
  margin-top: 1rem;
  padding-top: 0.75rem;
  border-top: 1px solid #eee;
}

/* Facture / billet : adaptation mobile */
@media (max-width: 767px) {
  .ticket-invoice-wrapper {
    margin-top: 1rem;
    padding-top: 1rem;
  }
  .ticket-invoice {
    padding: 0.75rem 0.75rem 1rem;
    font-size: 13px;
    margin-left: -2px;
    margin-right: -2px;
    max-width: none;
  }
  .ticket-invoice-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.35rem;
    margin-bottom: 0.5rem;
    padding-bottom: 0.4rem;
  }
  .ticket-invoice-brand h2 {
    font-size: 1.1rem;
  }
  .ticket-invoice-brand p {
    font-size: 0.7rem;
  }
  .ticket-invoice-doc-info {
    text-align: left;
  }
  .ticket-invoice-doc-info .doc-type {
    font-size: 0.95rem;
  }
  .ticket-invoice-doc-info .doc-number,
  .ticket-invoice-doc-info .doc-date {
    font-size: 0.75rem;
  }
  .ticket-invoice-event {
    padding: 0.4rem 0.5rem;
    margin-bottom: 0.5rem;
  }
  .ticket-invoice-event h3 {
    font-size: 0.9rem;
  }
  .ticket-invoice-event p {
    font-size: 0.75rem;
  }
  .ticket-invoice-client {
    font-size: 0.8rem;
    margin-bottom: 0.5rem;
  }
  .ticket-invoice-table {
    font-size: 0.7rem;
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .ticket-invoice-table th,
  .ticket-invoice-table td {
    padding: 4px 5px;
    font-size: 0.7rem;
  }
  .ticket-invoice-table th:first-child,
  .ticket-invoice-table td:first-child {
    width: 7%;
  }
  .ticket-invoice-table th:nth-child(2),
  .ticket-invoice-table td:nth-child(2) {
    width: 18%;
  }
  .ticket-invoice-table th:nth-child(3),
  .ticket-invoice-table td:nth-child(3) {
    width: 15%;
  }
  .ticket-invoice-table th:nth-child(4),
  .ticket-invoice-table td:nth-child(4) {
    width: 16%;
  }
  .ticket-invoice-table th:nth-child(5),
  .ticket-invoice-table td:nth-child(5) {
    width: 20%;
  }
  .ticket-invoice-table th:nth-child(6),
  .ticket-invoice-table td:nth-child(6) {
    width: 24%;
  }
  .ticket-invoice-totals {
    font-size: 0.9rem;
    padding: 0.4rem 6px;
    margin-top: 0.4rem;
  }
  .ticket-invoice-qr-section {
    gap: 0.5rem;
    margin-top: 0.4rem;
    padding-top: 0.4rem;
  }
  .ticket-invoice-qr-section > strong {
    font-size: 0.8rem;
  }
  .ticket-invoice-qr-item {
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.5rem;
  }
  .ticket-invoice-qr-item .qr-label {
    font-size: 0.65rem;
  }
  .ticket-invoice-qr-item .qr-code-value {
    font-size: 0.8rem;
    padding: 3px 6px;
  }
  .ticket-invoice-qr-canvas {
    min-width: 100px;
    min-height: 100px;
    width: 100px;
    height: 100px;
  }
  .ticket-invoice-qr-canvas img {
    width: 92px;
    height: 92px;
    min-width: 92px;
    min-height: 92px;
  }
  .ticket-invoice-footer {
    margin-top: 0.5rem;
    padding-top: 0.4rem;
    font-size: 0.7rem;
  }
  .ticket-invoice-footer p {
    margin: 0 0 2px;
  }
}

@media print {
  @page {
    size: 58mm auto;
    margin: 2mm;
  }
  .no-print {
    display: none !important;
  }
  .ticket-invoice-wrapper.no-print {
    display: block !important;
  }
  .ticket-invoice-wrapper .dashboard-actions {
    display: none !important;
  }
  .ticket-invoice {
    box-shadow: none;
    border: 1px solid #ccc;
    width: 54mm !important;
    max-width: 54mm !important;
    margin: 0 auto !important;
    font-size: 9px !important;
    line-height: 1.25 !important;
  }
  .ticket-invoice-page {
    padding: 2mm !important;
  }
  .ticket-invoice-header {
    grid-template-columns: 1fr !important;
    gap: 2mm !important;
  }
  .ticket-invoice-brand h2 {
    font-size: 11px !important;
  }
  .ticket-invoice-brand p,
  .ticket-invoice-doc-info .doc-type,
  .ticket-invoice-doc-info .doc-number,
  .ticket-invoice-doc-info .doc-date,
  .ticket-invoice-event p,
  .ticket-invoice-footer p {
    font-size: 8px !important;
  }
  .ticket-invoice-event h3 {
    font-size: 10px !important;
    line-height: 1.2 !important;
  }
  .ticket-invoice-cover-wrap {
    margin-bottom: 1.5mm !important;
  }
  .ticket-invoice-cover {
    max-height: 28mm !important;
    width: 100% !important;
    object-fit: cover !important;
  }
  .ticket-invoice-cover--small {
    max-height: 18mm !important;
  }
  .ticket-invoice-table {
    font-size: 7px !important;
    table-layout: fixed !important;
  }
  .ticket-invoice-table th,
  .ticket-invoice-table td {
    padding: 1.2mm 0.8mm !important;
    word-break: break-word !important;
  }
  .ticket-invoice-table th:nth-child(5),
  .ticket-invoice-table td:nth-child(5),
  .ticket-invoice-table th:nth-child(6),
  .ticket-invoice-table td:nth-child(6) {
    white-space: nowrap !important;
    font-size: 6.8px !important;
  }
  .ticket-invoice-code-big-value,
  .ticket-invoice-code-cell {
    font-size: 8px !important;
    letter-spacing: 0.02em !important;
  }
  .ticket-invoice-qr-canvas {
    min-width: 34mm !important;
    min-height: 34mm !important;
    width: 34mm !important;
    height: 34mm !important;
    padding: 0.8mm !important;
  }
  .ticket-invoice-qr-canvas img {
    width: 32mm !important;
    height: 32mm !important;
    min-width: 32mm !important;
    min-height: 32mm !important;
  }
  .ticket-invoice-page--summary {
    page-break-after: always;
  }
  .ticket-invoice-page--ticket {
    page-break-before: always;
    break-inside: avoid;
    page-break-after: always;
  }
  .ticket-invoice-page--ticket:last-child {
    page-break-after: auto;
  }
  .ticket-invoice-page--full {
    page-break-inside: avoid;
  }
}

.empty-state {
  text-align: center;
  padding: 64px 24px;
  color: var(--accent);
}
.empty-state p {
  font-size: 1.1rem;
  margin-bottom: 24px;
}

/* ========== ACCOUNT PAGE – Onglets ========== */
.account-tabs-section .container {
  max-width: 900px;
}
.account-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 28px;
  border-bottom: 2px solid rgba(26, 31, 53, 0.12);
  padding-bottom: 0;
}
[data-theme="dark"] .account-tabs {
  border-bottom-color: rgba(255, 255, 255, 0.15);
}
.account-tab-btn {
  padding: 12px 20px;
  font-size: 1rem;
  font-weight: 600;
  color: var(--neutral-dark);
  background: transparent;
  border: none;
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
  cursor: pointer;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  transition:
    color var(--transition),
    background var(--transition),
    border-color var(--transition);
}
.account-tab-btn:hover {
  color: var(--primary);
  background: rgba(var(--primary-rgb), 0.08);
}
.account-tab-btn.is-active {
  color: var(--primary);
  border-bottom-color: var(--primary);
  background: rgba(var(--primary-rgb), 0.06);
}
[data-theme="dark"] .account-tab-btn {
  color: var(--neutral-dark);
}
[data-theme="dark"] .account-tab-btn:hover {
  background: rgba(var(--primary-rgb), 0.12);
}
[data-theme="dark"] .account-tab-btn.is-active {
  background: rgba(var(--primary-rgb), 0.1);
}
@media (max-width: 767px) {
  .account-tabs {
    flex-wrap: nowrap;
    gap: 4px;
    margin-bottom: 20px;
  }
  .account-tab-btn {
    flex: 1;
    min-width: 0;
    padding: 10px 8px;
    font-size: 0.8rem;
    text-align: center;
  }
}
.account-panel {
  display: none;
  padding-top: 8px;
}
.account-panel.is-active {
  display: block;
}
.account-panel .section-title {
  text-align: left;
  margin-bottom: 16px;
  font-size: 1.25rem;
}
.account-qr-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 20px;
}
.account-qr-card {
  background: var(--white);
  border-radius: var(--radius-md);
  padding: 16px;
  text-align: center;
  box-shadow: var(--shadow-sm);
  border: 1px solid rgba(26, 31, 53, 0.08);
}
.account-qr-card .account-qr-card-title {
  font-size: 0.9rem;
  font-weight: 600;
  margin-bottom: 10px;
  line-height: 1.3;
}
.account-qr-card .account-qr-card-qr {
  margin-bottom: 10px;
}
.account-qr-card .account-qr-card-qr canvas,
.account-qr-card .account-qr-card-qr img {
  border-radius: var(--radius-sm);
}
.account-qr-card .btn {
  width: 100%;
  font-size: 0.85rem;
}
[data-theme="dark"] .account-qr-card {
  background: var(--neutral-light);
  border-color: rgba(255, 255, 255, 0.1);
}
.account-qr-grid .empty-state {
  grid-column: 1 / -1;
}

/* ========== ACCOUNT PAGE – Profil & Mes événements ========== */
.account-profile-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: 28px 32px;
  border: 1px solid rgba(26, 31, 53, 0.08);
}
[data-theme="dark"] .account-profile-card {
  background: var(--neutral-light);
  border-color: rgba(255, 255, 255, 0.08);
}
.account-profile-card .section-title {
  text-align: left;
  margin-bottom: 12px;
  font-size: 1.25rem;
}
.account-profile-card .section-intro {
  margin-bottom: 20px;
  font-size: 0.95rem;
  color: var(--neutral-dark);
  opacity: 0.9;
}
.account-events-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.account-events-list .event-manage-link {
  display: block;
  padding: 14px 18px;
  background: var(--neutral-light);
  border-radius: var(--radius-md);
  border: 1px solid rgba(26, 31, 53, 0.1);
  color: var(--neutral-dark);
  text-decoration: none;
  transition:
    background var(--transition),
    border-color var(--transition),
    box-shadow var(--transition);
  font-size: 1rem;
}
.account-events-list .event-manage-link:hover {
  background: rgba(var(--primary-rgb), 0.08);
  border-color: var(--primary);
  box-shadow: var(--shadow-sm);
  color: var(--primary-dark);
}
[data-theme="dark"] .account-events-list .event-manage-link {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.12);
}
[data-theme="dark"] .account-events-list .event-manage-link:hover {
  background: rgba(var(--primary-rgb), 0.15);
  border-color: var(--primary);
  color: var(--secondary);
}
.account-events-list .empty-state {
  padding: 32px 24px;
}
.account-events-list .empty-state .btn {
  margin-top: 8px;
}

/* ========== SOCIAL PROFILE (Instagram / TikTok style) ========== */
.page-account {
  background: var(--neutral-light);
}
[data-theme="dark"] .page-account {
  background: var(--neutral-dark);
}
.social-profile-header {
  padding: 88px 0 24px;
  background: linear-gradient(
    165deg,
    rgba(var(--primary-rgb), 0.08) 0%,
    transparent 55%
  );
  border-bottom: 1px solid rgba(26, 31, 53, 0.08);
}
[data-theme="dark"] .social-profile-header {
  border-bottom-color: rgba(255, 255, 255, 0.08);
  background: linear-gradient(
    165deg,
    rgba(var(--primary-rgb), 0.12) 0%,
    transparent 55%
  );
}
.social-profile-inner {
  max-width: 720px;
}
.social-profile-top {
  display: flex;
  align-items: center;
  gap: 28px;
  margin-bottom: 20px;
}
.social-profile-avatar-wrap {
  flex-shrink: 0;
}
.social-profile-avatar-ring {
  width: 96px;
  height: 96px;
  padding: 3px;
  border-radius: 50%;
  background: linear-gradient(
    135deg,
    #f09433,
    #e6683c,
    #dc2743,
    #cc2366,
    #bc1888
  );
  box-shadow: 0 4px 20px rgba(188, 24, 136, 0.25);
}
.social-profile-avatar.has-photo,
.social-profile-avatar img {
  padding: 0;
}
.social-profile-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}
.social-profile-avatar-btn {
  border: none;
  background: none;
  padding: 0;
  cursor: pointer;
  border-radius: 50%;
}
.social-profile-avatar-btn:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 3px;
}
.social-profile-avatar-edit-badge {
  position: absolute;
  bottom: 4px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: rgba(0, 0, 0, 0.65);
  color: #fff;
  padding: 2px 8px;
  border-radius: 999px;
  pointer-events: none;
}
.social-profile-avatar-ring {
  position: relative;
}
.account-profile-photo-edit {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 24px;
  padding: 18px;
  border-radius: var(--radius-md);
  border: 2px dashed rgba(26, 31, 53, 0.15);
  background: rgba(26, 31, 53, 0.03);
}
[data-theme="dark"] .account-profile-photo-edit {
  border-color: rgba(255, 255, 255, 0.15);
  background: rgba(255, 255, 255, 0.04);
}
.account-profile-photo-title {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
}
.account-profile-photo-picker {
  cursor: pointer;
  display: block;
}
.account-profile-photo-ring {
  flex-shrink: 0;
  position: relative;
}
.account-profile-photo-overlay {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 8px;
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.2;
  color: #fff;
  background: rgba(0, 0, 0, 0.45);
  opacity: 0;
  transition: opacity 0.2s ease;
}
.account-profile-photo-picker:hover .account-profile-photo-overlay,
.account-profile-photo-picker:focus-within .account-profile-photo-overlay {
  opacity: 1;
}
.account-profile-photo-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.social-followers-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 12px;
}
.social-follower-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: var(--radius-md);
  border: 1px solid rgba(26, 31, 53, 0.1);
  background: var(--white);
  text-decoration: none;
  color: inherit;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.social-follower-row:hover {
  border-color: var(--primary);
  box-shadow: var(--shadow-sm);
}
[data-theme="dark"] .social-follower-row {
  background: var(--neutral-light);
  border-color: rgba(255, 255, 255, 0.1);
}
.social-follower-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--primary);
  color: var(--on-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  flex-shrink: 0;
  overflow: hidden;
}
.social-follower-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.social-follower-info strong {
  display: block;
  font-size: 0.95rem;
}
.social-follower-info span {
  font-size: 0.85rem;
  color: var(--text-muted, #666);
}
.social-follow-btn.is-following {
  background: transparent;
  border-color: var(--primary);
  color: var(--primary);
}
.social-profile-avatar {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: var(--primary);
  color: var(--on-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.75rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  border: 3px solid var(--white);
  text-transform: uppercase;
}
[data-theme="dark"] .social-profile-avatar {
  border-color: var(--neutral-dark);
}
.social-profile-stats {
  display: flex;
  flex: 1;
  justify-content: space-around;
  gap: 12px;
  text-align: center;
}
.social-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.social-stat strong {
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--neutral-dark);
}
.social-stat span {
  font-size: 0.78rem;
  color: rgba(26, 31, 53, 0.65);
  text-transform: lowercase;
}
[data-theme="dark"] .social-stat strong {
  color: #f1f5f9;
}
[data-theme="dark"] .social-stat span {
  color: rgba(255, 255, 255, 0.55);
}
.social-profile-name {
  font-size: 1.15rem;
  font-weight: 700;
  margin: 0 0 2px;
  line-height: 1.3;
}
.social-profile-handle {
  font-size: 0.9rem;
  color: rgba(26, 31, 53, 0.55);
  margin: 0 0 10px;
  font-weight: 500;
}
[data-theme="dark"] .social-profile-handle {
  color: rgba(255, 255, 255, 0.5);
}
.social-profile-bio {
  font-size: 0.92rem;
  line-height: 1.5;
  margin: 0 0 8px;
  white-space: pre-wrap;
}
.social-profile-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 0.85rem;
  color: rgba(26, 31, 53, 0.7);
  margin-bottom: 14px;
}
[data-theme="dark"] .social-profile-meta {
  color: rgba(255, 255, 255, 0.6);
}
.social-profile-meta a {
  color: inherit;
  text-decoration: none;
}
.social-profile-meta a:hover {
  color: var(--primary);
  text-decoration: underline;
}
.public-profile-contact {
  margin: 0 0 14px;
}
.public-profile-contact-title {
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: rgba(26, 31, 53, 0.55);
  margin: 0 0 8px;
}
[data-theme="dark"] .public-profile-contact-title {
  color: rgba(255, 255, 255, 0.5);
}
.public-profile-contact-links,
.profile-contact-icons {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}
.profile-contact-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid rgba(26, 31, 53, 0.12);
  background: var(--white);
  color: var(--primary);
  text-decoration: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.profile-contact-icon:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
  border-color: var(--primary);
}
.profile-contact-icon--whatsapp {
  color: #25d366;
  border-color: rgba(37, 211, 102, 0.35);
}
.profile-contact-icon--facebook {
  color: #1877f2;
  border-color: rgba(24, 119, 242, 0.35);
}
.profile-contact-icon--instagram {
  color: #e4405f;
  border-color: rgba(228, 64, 95, 0.35);
}
.profile-contact-icon--tiktok {
  color: #010101;
  border-color: rgba(1, 1, 1, 0.2);
}
[data-theme="dark"] .profile-contact-icon--tiktok {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.2);
}
.profile-contact-icon--linkedin {
  color: #0a66c2;
  border-color: rgba(10, 102, 194, 0.35);
}
.profile-contact-icon--youtube {
  color: #ff0000;
  border-color: rgba(255, 0, 0, 0.3);
}
.profile-contact-icon--twitter {
  color: #000;
  border-color: rgba(0, 0, 0, 0.15);
}
[data-theme="dark"] .profile-contact-icon--twitter {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.2);
}
.profile-contact-icon--mail {
  color: #ea4335;
  border-color: rgba(234, 67, 53, 0.3);
}
.profile-contact-icon--tel {
  color: #34a853;
  border-color: rgba(52, 168, 83, 0.35);
}
[data-theme="dark"] .profile-contact-icon {
  background: var(--neutral-light);
  border-color: rgba(255, 255, 255, 0.12);
}
.social-profile-badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 0 0 10px;
}
.social-profile-badges[hidden] {
  display: none !important;
}
.profile-verified-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px 3px 6px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.2;
  color: #1d9bf0;
  background: rgba(29, 155, 240, 0.1);
  border: 1px solid rgba(29, 155, 240, 0.25);
}
.profile-verified-badge[hidden] {
  display: none !important;
}
.profile-verified-badge svg {
  flex-shrink: 0;
}
[data-theme="dark"] .profile-verified-badge {
  color: #58b9ff;
  background: rgba(29, 155, 240, 0.15);
  border-color: rgba(88, 185, 255, 0.3);
}
.social-profile-since {
  font-size: 0.85rem;
  color: rgba(26, 31, 53, 0.55);
  margin: 0;
}
[data-theme="dark"] .social-profile-since {
  color: rgba(255, 255, 255, 0.5);
}
.profile-verified-admin-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 500;
  cursor: pointer;
}
.social-profile-lang {
  font-size: 0.85rem;
  color: rgba(26, 31, 53, 0.6);
}
[data-theme="dark"] .social-profile-lang {
  color: rgba(255, 255, 255, 0.55);
}
.nav-notif-wrap {
  position: relative;
}
.nav-notif-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: inherit;
  cursor: pointer;
}
.nav-notif-btn:hover {
  background: rgba(26, 31, 53, 0.06);
}
.nav-notif-badge {
  position: absolute;
  top: 2px;
  right: 2px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: #e53935;
  color: #fff;
  font-size: 0.65rem;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
}
.nav-notif-panel {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  width: min(360px, 92vw);
  max-height: 420px;
  overflow: auto;
  background: var(--white);
  border: 1px solid rgba(26, 31, 53, 0.1);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  z-index: 4200;
  padding: 8px 0;
}
[data-theme="dark"] .nav-notif-panel {
  background: var(--neutral-light);
  border-color: rgba(255, 255, 255, 0.1);
}
.nav-notif-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 14px 10px;
  border-bottom: 1px solid rgba(26, 31, 53, 0.08);
}
.nav-notif-list {
  display: flex;
  flex-direction: column;
}
.nav-notif-item {
  display: block;
  padding: 10px 14px;
  text-decoration: none;
  color: inherit;
  border-bottom: 1px solid rgba(26, 31, 53, 0.06);
}
.nav-notif-item--unread {
  background: rgba(99, 102, 241, 0.08);
}
.nav-notif-item strong {
  display: block;
  font-size: 0.9rem;
  margin-bottom: 2px;
}
.nav-notif-item span {
  display: block;
  font-size: 0.82rem;
  color: var(--text-muted, #666);
  line-height: 1.4;
}
.nav-notif-item time {
  display: block;
  font-size: 0.72rem;
  color: var(--text-muted, #888);
  margin-top: 4px;
}
.nav-notif-empty {
  padding: 16px 14px;
  margin: 0;
  font-size: 0.9rem;
  color: var(--text-muted, #666);
}
.social-profile-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.social-profile-actions .btn {
  flex: 1;
  min-width: 0;
  justify-content: center;
  font-size: 0.88rem;
  padding: 8px 14px;
  border-radius: 10px;
  font-weight: 600;
}
.social-btn-share {
  flex: 0 0 auto !important;
  width: 42px;
  height: 42px;
  padding: 0 !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px !important;
  border: 1.5px solid rgba(26, 31, 53, 0.15);
}
[data-theme="dark"] .social-btn-share {
  border-color: rgba(255, 255, 255, 0.15);
}
.social-profile-tabs-wrap {
  position: sticky;
  top: 64px;
  z-index: 40;
  background: var(--neutral-light);
  border-bottom: 1px solid rgba(26, 31, 53, 0.1);
}
[data-theme="dark"] .social-profile-tabs-wrap {
  background: var(--neutral-dark);
  border-bottom-color: rgba(255, 255, 255, 0.1);
}
.social-profile-tabs {
  display: flex;
  justify-content: center;
  gap: 0;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
}
.social-tab-btn {
  flex: 1;
  max-width: 140px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 12px 8px 10px !important;
  border: none !important;
  border-bottom: 2px solid transparent !important;
  border-radius: 0 !important;
  margin-bottom: 0 !important;
  background: transparent !important;
  color: rgba(26, 31, 53, 0.45) !important;
  font-weight: 500 !important;
  transition:
    color 0.2s,
    border-color 0.2s;
}
.social-tab-btn svg {
  opacity: 0.55;
  transition: opacity 0.2s;
}
.social-tab-btn.is-active {
  color: var(--neutral-dark) !important;
  border-bottom-color: var(--neutral-dark) !important;
  background: transparent !important;
}
.social-tab-btn.is-active svg {
  opacity: 1;
}
[data-theme="dark"] .social-tab-btn {
  color: rgba(255, 255, 255, 0.4) !important;
}
[data-theme="dark"] .social-tab-btn.is-active {
  color: #f1f5f9 !important;
  border-bottom-color: #f1f5f9 !important;
}
.social-tab-label {
  font-size: 0.68rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.social-profile-content {
  padding-top: 0 !important;
}
.social-profile-content .container {
  max-width: 720px;
  padding-top: 4px;
}
.social-posts-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3px;
  margin-top: 4px;
}
.social-post-cell {
  position: relative;
  display: block;
  aspect-ratio: 1;
  overflow: hidden;
  background: rgba(26, 31, 53, 0.06);
  text-decoration: none;
  color: inherit;
}
.social-post-cell img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.35s ease;
}
.social-post-cell:hover img {
  transform: scale(1.06);
}
.social-post-letter {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  font-weight: 700;
  color: var(--primary);
  background: linear-gradient(
    145deg,
    rgba(var(--primary-rgb), 0.12),
    rgba(var(--primary-rgb), 0.04)
  );
}
.social-post-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 10px;
  background: linear-gradient(transparent 40%, rgba(0, 0, 0, 0.72));
  opacity: 0;
  transition: opacity 0.25s;
}
.social-post-cell:hover .social-post-overlay,
.social-post-cell:focus-visible .social-post-overlay {
  opacity: 1;
}
.social-post-overlay strong {
  font-size: 0.78rem;
  color: #fff;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.social-post-overlay span {
  font-size: 0.68rem;
  color: rgba(255, 255, 255, 0.8);
  margin-top: 2px;
}
.social-post-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  padding: 2px 8px;
  border-radius: 100px;
  font-size: 0.65rem;
  font-weight: 700;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  backdrop-filter: blur(4px);
}
.social-posts-grid .empty-state {
  grid-column: 1 / -1;
  padding: 48px 20px;
  text-align: center;
}
.social-tickets-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 8px;
}
.social-edit-card {
  margin-top: 8px;
}
.social-admin-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 1rem;
}
@media (max-width: 600px) {
  .social-profile-header {
    padding-top: 76px;
  }
  .social-profile-top {
    gap: 16px;
  }
  .social-profile-avatar-ring {
    width: 80px;
    height: 80px;
  }
  .social-profile-avatar {
    font-size: 1.4rem;
  }
  .social-stat strong {
    font-size: 1.1rem;
  }
  .social-stat span {
    font-size: 0.7rem;
  }
  .social-profile-actions .btn {
    font-size: 0.82rem;
  }
  .social-tab-label {
    display: none;
  }
  .social-tab-btn {
    max-width: none;
    padding: 14px 8px !important;
  }
}

/* ========== SCANNER PAGE ========== */
.scanner-page {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--neutral-dark);
  color: var(--neutral-light);
}
.scanner-page main#main {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding-top: 72px;
  padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px));
}
@media (min-width: 1024px) {
  .scanner-page main#main {
    padding-bottom: 0;
  }
}
.scanner-area {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: clamp(12px, 4vw, 24px);
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}
.scanner-event-picker {
  width: 100%;
  max-width: 400px;
  margin-bottom: 20px;
  text-align: left;
}
.scanner-event-picker label {
  display: block;
  margin-bottom: 8px;
  font-weight: 600;
}
.scanner-event-picker .form-control {
  width: 100%;
  padding: 10px 14px;
  border: 2px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.08);
  color: inherit;
  font-size: 1rem;
}
.scanner-event-picker .form-control:focus {
  outline: none;
  border-color: var(--primary);
}
.scanner-event-meta {
  margin-top: 8px;
  font-size: 0.875rem;
  opacity: 0.85;
}

/* ========== LOCALISATION ÉVÉNEMENT ========== */
.event-location {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 14px 16px;
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.event-location__icon {
  font-size: 1.25rem;
  line-height: 1;
  flex-shrink: 0;
}
.event-location__body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.event-location__label {
  font-weight: 600;
  line-height: 1.4;
}
.event-location__maps {
  font-size: 0.9rem;
  color: var(--primary);
  text-decoration: none;
}
.event-location__maps:hover {
  text-decoration: underline;
}
.event-location__map,
.event-geo-map iframe {
  display: block;
  width: 100%;
  height: 220px;
  border: 0;
  border-radius: var(--radius-md);
  margin-top: 12px;
}
.event-geo-picker__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}
.event-card-map-link {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  color: var(--primary);
  text-decoration: none;
  font-weight: 500;
  vertical-align: baseline;
}
.event-card-map-icon {
  display: inline-flex;
  line-height: 0;
}
.event-card-map-icon svg {
  width: 0.9em;
  height: 0.9em;
}
.event-card-map-link:hover {
  text-decoration: underline;
}
.event-detail-location .event-location,
.event-manage-location .event-location {
  background: var(--bg-surface, rgba(255, 255, 255, 0.06));
  border-color: var(--border, rgba(255, 255, 255, 0.12));
}
[data-theme="light"] .event-location {
  background: #f8fafc;
  border-color: #e2e8f0;
}

/* Onglets organisateur (Mes événements / Statistiques) */
.mes-organizer-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: -8px auto 24px;
  padding: 0 0 4px;
  position: relative;
  z-index: 2;
}
.mes-organizer-tab {
  display: inline-flex;
  align-items: center;
  padding: 10px 18px;
  border-radius: 999px;
  border: 1px solid var(--border, rgba(255, 255, 255, 0.15));
  background: var(--bg-surface, rgba(255, 255, 255, 0.06));
  color: inherit;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.95rem;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.mes-organizer-tab:hover {
  border-color: var(--primary);
  color: var(--primary);
}
.mes-organizer-tab.active {
  background: var(--primary);
  border-color: var(--primary);
  color: #111;
}
.mes-organizer-panel.hidden {
  display: none !important;
}
.scanner-video-container {
  position: relative;
  width: 100%;
  max-width: 400px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 0 0 4px var(--secondary);
}
.scanner-video-container video {
  width: 100%;
  display: block;
  background: #000;
}
.scanner-result {
  margin-top: 24px;
  padding: 20px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-md);
  max-width: 400px;
  width: 100%;
  text-align: center;
  min-height: 80px;
}
.scanner-result.success {
  background: rgba(34, 197, 94, 0.22);
  border: 2px solid #16a34a;
  color: inherit;
}
.scanner-result.error {
  background: rgba(220, 38, 38, 0.2);
  border: 2px solid #dc2626;
}
.scanner-result.warning {
  background: rgba(245, 158, 11, 0.25);
  border: 2px solid #d97706;
}
.scanner-result p {
  margin: 0;
  font-weight: 500;
}
.scanner-confirm {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  padding: 0.75rem 0.5rem;
}
.scanner-confirm-badge {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #16a34a;
  color: #fff;
  font-size: 1.75rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 0 0.35rem !important;
  line-height: 1;
}
.scanner-result.warning .scanner-confirm-badge {
  background: #d97706;
}
.scanner-confirm-title {
  font-size: 1.35rem;
  font-weight: 800 !important;
  letter-spacing: 0.02em;
  margin: 0 !important;
}
.scanner-confirm-event {
  font-size: 1.05rem;
  margin: 0.15rem 0 0 !important;
}
.scanner-confirm-meta,
.scanner-confirm-detail {
  font-size: 0.9rem;
  opacity: 0.95;
  margin: 0 !important;
  font-weight: 500 !important;
}
.scanner-confirm-msg {
  margin: 0.75rem 0 0.35rem !important;
  font-size: 0.95rem;
  line-height: 1.45;
  font-weight: 600 !important;
  max-width: 22rem;
}
.scanner-confirm-again {
  margin-top: 0.65rem;
}
.scanner-result--confirm {
  background: rgba(37, 99, 235, 0.16);
  border: 2px solid #2563eb;
}
.scanner-confirm-badge--ask {
  background: #2563eb !important;
  color: #fff !important;
  font-size: 1.5rem !important;
}
.scanner-confirm-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: center;
  margin-top: 0.75rem;
  width: 100%;
}
.scanner-confirm-actions .btn {
  min-height: 44px;
  min-width: 9rem;
}
.scanner-holder-form {
  width: 100%;
  max-width: 22rem;
  text-align: left;
  margin: 0.65rem 0 0;
}
.scanner-holder-intro {
  font-size: 0.9rem;
  margin: 0 0 0.75rem !important;
  font-weight: 500 !important;
  opacity: 0.95;
  line-height: 1.4;
}
.scanner-holder-form label {
  display: block;
  font-size: 0.8rem;
  font-weight: 700;
  margin: 0.55rem 0 0.25rem;
}
.scanner-holder-form .form-control {
  width: 100%;
}
.scanner-holder-optional {
  font-weight: 500;
  opacity: 0.7;
}
.scanner-holder-error {
  color: #b91c1c;
  font-size: 0.85rem;
  font-weight: 600;
  margin: 0.5rem 0 0 !important;
}
[data-theme="dark"] .scanner-holder-error {
  color: #fca5a5;
}
.scanner-hint {
  margin-top: 0.5rem;
  font-size: 0.875rem;
  opacity: 0.9;
}
/* Billets prévente : QR + nom événement uniquement */
.prevente-ticket-sheet {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.prevente-ticket {
  background: #fff;
  border: 1.5px solid #e2e8f0;
  border-radius: 12px;
  padding: 1.5rem 1.25rem;
  text-align: center;
  page-break-inside: avoid;
  break-inside: avoid;
}
.prevente-ticket-event {
  font-size: 1.25rem;
  font-weight: 800;
  color: #0f172a;
  margin: 0 0 1rem;
  line-height: 1.3;
}
.prevente-ticket-qr {
  display: flex;
  justify-content: center;
  margin: 0 auto;
}
.prevente-ticket-qr img {
  width: 200px;
  height: 200px;
  display: block;
  object-fit: contain;
}
.prevente-save-image-hint {
  flex: 1 0 100%;
  width: 100%;
  margin: 0 0 0.5rem;
  color: #0f172a;
  font-size: 0.95rem;
}
#event-manage-invoice-save-image:not([hidden]) {
  font-weight: 700;
  outline: 2px solid currentColor;
  outline-offset: 2px;
}
.tls-badge--prevente {
  display: inline-block;
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #0f172a;
  background: #fdd835;
  border-radius: 4px;
  padding: 0.12rem 0.4rem;
  margin-right: 0.4rem;
  vertical-align: middle;
}
.ticket-status-badge.ticket-status-prevente {
  background: #fdd835;
  color: #0f172a;
  font-weight: 800;
}
#event-manage-ticket-detail-modal .btn-ticket-save-image {
  font-weight: 700;
}
.ticket-list-summary--prevente {
  border-left: 3px solid #fdd835;
}
.ticket-list-summary--prevente .tls-line {
  align-items: center;
}
@media print {
  .prevente-ticket {
    border: none;
    box-shadow: none;
    page-break-after: always;
    padding: 8mm 4mm !important;
  }
  .prevente-ticket:last-child {
    page-break-after: auto;
  }
  .prevente-ticket-event {
    font-size: 14px !important;
    margin-bottom: 6mm !important;
  }
  .prevente-ticket-qr img {
    width: 40mm !important;
    height: 40mm !important;
  }
  .ticket-invoice-wrapper:has(.prevente-ticket-sheet) .ticket-invoice {
    width: 100% !important;
    max-width: none !important;
    border: none !important;
  }
}
.scanner-actions {
  margin-top: 24px;
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}
.scanner-manual {
  max-width: 400px;
  margin-left: auto;
  margin-right: auto;
}
.scanner-manual-label {
  margin: 0 0 8px;
  font-size: 0.95rem;
}
.scanner-code-form {
  display: flex;
  gap: 8px;
  align-items: stretch;
  flex-wrap: wrap;
}
.scanner-code-form input {
  flex: 1 1 160px;
  min-width: 0;
  width: 100%;
  padding: 10px 14px;
  border: 2px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.08);
  color: inherit;
  font-size: 1rem;
  font-family: ui-monospace, monospace;
  letter-spacing: 0.05em;
}
.scanner-code-form input::placeholder {
  opacity: 0.6;
}
.scanner-code-form input:focus {
  outline: none;
  border-color: var(--primary);
}

/* ========== BILLETTERIE MODAL (choix catégories) ========== */
.checkout-tiers {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-height: 60vh;
  overflow-y: auto;
}
.checkout-tier {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 16px;
  align-items: center;
  padding: 16px;
  background: var(--neutral-light);
  border-radius: var(--radius-md);
  border: 2px solid transparent;
  transition: border-color var(--transition);
}
[data-theme="dark"] .checkout-tier {
  background: rgba(255, 255, 255, 0.05);
}
.checkout-tier:focus-within {
  border-color: var(--primary);
}
.checkout-tier label {
  margin: 0;
  font-weight: 600;
}
.checkout-tier .price {
  color: var(--primary);
  font-weight: 700;
}
.checkout-tier input[type="number"] {
  width: 80px;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  border: 2px solid rgba(0, 0, 0, 0.1);
  text-align: center;
}
.checkout-totals {
  margin-top: 24px;
  padding-top: 24px;
  border-top: 2px solid rgba(0, 0, 0, 0.1);
  font-size: 1.25rem;
  font-weight: 700;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.checkout-total-line {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
}
[data-theme="dark"] .checkout-totals {
  border-top-color: rgba(255, 255, 255, 0.2);
}
.checkout-tier-currency {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(10, 102, 57, 0.12);
  color: #8a6500;
  vertical-align: middle;
}
.checkout-currency-hint {
  margin: 0 0 12px;
  padding: 10px 0 0;
  font-size: 0.8rem;
  line-height: 1.45;
  color: #555;
  border-top: 1px dashed rgba(0, 0, 0, 0.12);
}
[data-theme="dark"] .checkout-currency-hint {
  color: #bbb;
  border-top-color: rgba(255, 255, 255, 0.15);
}
.checkout-buyer-info {
  margin-top: 24px;
  padding-top: 24px;
  border-top: 2px solid rgba(0, 0, 0, 0.1);
}
[data-theme="dark"] .checkout-buyer-info {
  border-top-color: rgba(255, 255, 255, 0.2);
}
.checkout-buyer-info legend {
  font-weight: 600;
  font-size: 1rem;
  margin-bottom: 12px;
  padding: 0;
}
.checkout-buyer-info .form-group {
  margin-bottom: 12px;
}
.checkout-buyer-info .form-group:last-child {
  margin-bottom: 0;
}
.checkout-buyer-info .required {
  color: var(--error, #c00);
}
.checkout-reservation-pay-wrap {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 2px dashed rgba(180, 35, 24, 0.35);
}
.checkout-reservation-pay-alert {
  margin-bottom: 1rem;
  padding: 0;
  border: none;
  background: none;
  box-shadow: none;
}
[data-theme="dark"] .checkout-reservation-pay-alert {
  border: none;
  background: none;
  box-shadow: none;
}
.checkout-reservation-pay-alert__title {
  display: block;
  font-size: 1.05rem;
  font-weight: 800;
  color: #c62828;
  margin: 0 0 0.5rem;
  letter-spacing: 0.01em;
}
[data-theme="dark"] .checkout-reservation-pay-alert__title {
  color: #ff5252;
}
.checkout-reservation-pay-alert__text {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.55;
  color: #d32f2f;
  font-weight: 600;
}
[data-theme="dark"] .checkout-reservation-pay-alert__text {
  color: #ff6b6b;
}
.checkout-reservation-pay-alert__text strong,
.ticket-invoice-payby-warn strong {
  color: #b71c1c;
  font-weight: 800;
}
[data-theme="dark"] .checkout-reservation-pay-alert__text strong,
[data-theme="dark"] .ticket-invoice-payby-warn strong {
  color: #ff8a80;
}
.ticket-invoice-payby-warn {
  margin: 0.65rem 0;
  padding: 0;
  border: none;
  background: none;
  font-size: 0.9rem;
  line-height: 1.55;
  color: #d32f2f;
  font-weight: 600;
}
[data-theme="dark"] .ticket-invoice-payby-warn {
  background: none;
  border: none;
  color: #ff6b6b;
}
.event-manage-sell-pay-wrap {
  margin-top: 0.75rem;
}
.payment-methods {
  display: flex;
  gap: 12px;
  margin-top: 20px;
  flex-wrap: wrap;
}
.payment-method {
  flex: 1;
  min-width: 120px;
  padding: 16px;
  border: 2px solid rgba(0, 0, 0, 0.15);
  border-radius: var(--radius-md);
  background: var(--white);
  cursor: pointer;
  transition:
    border-color var(--transition),
    background var(--transition);
  text-align: center;
}
[data-theme="dark"] .payment-method {
  background: var(--neutral-light);
  border-color: rgba(255, 255, 255, 0.2);
}
.payment-method:hover,
.payment-method.selected {
  border-color: var(--primary);
  background: rgba(var(--primary-rgb), 0.08);
}
.payment-method .name {
  font-weight: 600;
  font-size: 0.9rem;
}
.payment-method .desc {
  font-size: 0.75rem;
  color: #64748b;
  margin-top: 4px;
}

/* ========== UTILITIES ========== */
.text-center {
  text-align: center;
}
.mt-1 {
  margin-top: 8px;
}
.mt-2 {
  margin-top: 16px;
}
.mt-3 {
  margin-top: 24px;
}
.mb-2 {
  margin-bottom: 16px;
}
.mb-3 {
  margin-bottom: 24px;
}
.mr-2 {
  margin-right: 8px;
}
.contacts-editor .contact-row {
  display: flex;
  gap: 8px;
  align-items: center;
}
.contacts-editor .contact-type-select {
  min-width: 120px;
  max-width: 140px;
}
.contacts-editor .contact-row .flex-1 {
  flex: 1;
  min-width: 0;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Progress bar (loader) */
.progress-bar {
  height: 4px;
  background: rgba(0, 0, 0, 0.1);
  border-radius: 2px;
  overflow: hidden;
  margin-top: 12px;
}
.progress-bar-fill {
  height: 100%;
  background: var(--gradient-gold);
  width: 30%;
  animation: progressIndeterminate 1.5s ease-in-out infinite;
}
@keyframes progressIndeterminate {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(400%);
  }
}

/* ========== RESPONSIVE EXECUTIVE (breakpoints) ========== */
@media (max-width: 359px) {
  .container {
    padding-left: max(12px, var(--safe-left));
    padding-right: max(12px, var(--safe-right));
  }
  .navbar-inner {
    padding-left: max(12px, var(--safe-left));
    padding-right: max(12px, var(--safe-right));
  }
  .hero-cta {
    flex-direction: column;
    width: 100%;
  }
  .hero-cta .btn {
    width: 100%;
  }
  .btn {
    min-height: var(--touch-min);
    padding: 12px 16px;
  }
  .btn-block,
  .auth-form .btn,
  .modal .btn-block,
  .checkout-step-payment-actions .btn,
  .scanner-code-form .btn {
    width: 100%;
    max-width: 100%;
  }
}
@media (max-width: 319px) {
  .container {
    padding-left: max(10px, var(--safe-left));
    padding-right: max(10px, var(--safe-right));
  }
  .btn-block {
    width: 100%;
    min-width: 0;
  }
}
@media (min-width: 375px) and (max-width: 767px) {
  .events-grid {
    grid-template-columns: 1fr;
  }
  .event-card {
    max-width: 100%;
  }
}
@media (min-width: 768px) {
  .events-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .section {
    padding: 80px 0;
  }
}
@media (min-width: 1024px) {
  .events-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .advantages-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .kpi-grid {
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  }
}
@media (min-width: 1440px) {
  .container {
    max-width: 1320px;
  }
  .navbar-inner {
    max-width: 1440px;
  }
}

/* Touch targets minimum 48px */
@media (pointer: coarse) {
  .nav-link {
    min-height: 48px;
    display: inline-flex;
    align-items: center;
  }
  .event-card-cta .btn {
    min-height: 48px;
  }
  .payment-method {
    min-height: 80px;
    justify-content: center;
    flex-direction: column;
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .event-card:hover {
    transform: none;
  }
  .btn:hover,
  .btn:active {
    transform: none;
  }
}

/* Focus visible (accessibilité) */
:focus-visible {
  outline: 2px solid var(--secondary);
  outline-offset: 2px;
}
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--secondary);
  outline-offset: 2px;
}

/* Print */
@media print {
  .navbar,
  .hero-scroll,
  .theme-toggle,
  .btn,
  .footer .theme-toggle,
  .modal-backdrop {
    display: none !important;
  }
  .hero {
    min-height: auto;
    padding: 48px 0;
  }
  body {
    background: white;
    color: #111;
  }
}

/* Hexagonal KPI variant (dashboard) */
.kpi-card.hexagon {
  clip-path: polygon(30% 0%, 70% 0%, 100% 50%, 70% 100%, 30% 100%, 0% 50%);
  padding: 32px 24px;
  text-align: center;
}
.kpi-card.hexagon::before {
  display: none;
}
.kpi-card.hexagon .value {
  font-size: 1.75rem;
}

/* Table responsive (dashboard events list) */
.dashboard-table {
  width: 100%;
  border-collapse: collapse;
}
.dashboard-table th,
.dashboard-table td {
  padding: 12px 16px;
  text-align: left;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}
[data-theme="dark"] .dashboard-table th,
[data-theme="dark"] .dashboard-table td {
  border-bottom-color: rgba(255, 255, 255, 0.1);
}
.dashboard-table th {
  font-weight: 600;
  color: var(--accent);
  font-size: 0.875rem;
  text-transform: uppercase;
}
.dashboard-table tr:hover {
  background: rgba(0, 0, 0, 0.02);
}
[data-theme="dark"] .dashboard-table tr:hover {
  background: rgba(255, 255, 255, 0.05);
}
.dashboard-table .btn-icon {
  min-width: 28px;
  width: 28px;
  height: 28px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95em;
  border: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.dashboard-table .btn-icon:hover {
  background: transparent;
  border: none;
  box-shadow: none;
  opacity: 0.8;
}
.dashboard-table .dashboard-table-actions {
  white-space: nowrap;
}
.dashboard-table .dashboard-table-actions .btn-icon + .btn-icon {
  margin-left: 4px;
}

/* Modale transfert événement (dashboard) */
.event-transfer-modal-content {
  max-width: 520px;
}
.event-transfer-summary {
  margin: 0 0 1rem;
  color: var(--text-muted, #5c6370);
  line-height: 1.5;
}
.event-transfer-options {
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 10px;
  padding: 0.75rem 1rem 0.85rem;
  margin: 0 0 1rem;
}
[data-theme="dark"] .event-transfer-options {
  border-color: rgba(255, 255, 255, 0.12);
}
.event-transfer-options-legend {
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--accent);
  padding: 0 0.25rem;
}
.event-transfer-option {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  margin-top: 0.55rem;
  cursor: pointer;
  line-height: 1.4;
}
.event-transfer-option input {
  margin-top: 0.2rem;
}
.event-transfer-search-field {
  position: relative;
}
.event-transfer-suggestions {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 30;
  max-height: 240px;
  overflow-y: auto;
  margin: 0;
  padding: 0;
  list-style: none;
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 10px;
  background: var(--surface, #fff);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.12);
}
[data-theme="dark"] .event-transfer-suggestions {
  border-color: rgba(255, 255, 255, 0.14);
  background: var(--surface, #1e1e1e);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45);
}
.event-transfer-suggestions.hidden {
  display: none;
}
.event-transfer-suggestion {
  display: block;
  width: 100%;
  text-align: left;
  padding: 0.7rem 0.85rem;
  border: none;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  background: transparent;
  cursor: pointer;
  transition: background 0.15s ease;
}
.event-transfer-suggestion:last-child {
  border-bottom: none;
}
.event-transfer-suggestion:hover,
.event-transfer-suggestion:focus-visible,
.event-transfer-suggestion.is-active {
  background: rgba(var(--accent-rgb, 0, 102, 204), 0.1);
  outline: none;
}
[data-theme="dark"] .event-transfer-suggestion {
  border-bottom-color: rgba(255, 255, 255, 0.08);
}
.event-transfer-suggestion-name {
  display: block;
  font-weight: 600;
  line-height: 1.35;
}
.event-transfer-suggestion-name mark,
.event-transfer-suggestion-email mark {
  background: rgba(var(--accent-rgb, 0, 102, 204), 0.22);
  color: inherit;
  padding: 0 0.1em;
  border-radius: 2px;
}
.event-transfer-suggestion-email {
  display: block;
  margin-top: 0.12rem;
  font-size: 0.85rem;
  color: var(--text-muted, #5c6370);
}
.event-transfer-suggestion-empty {
  padding: 0.85rem;
  color: var(--text-muted, #5c6370);
  font-size: 0.9rem;
}
.event-transfer-select {
  width: 100%;
  max-width: 100%;
}
.dashboard-events-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
}
.dashboard-events-creator-select {
  min-width: min(100%, 320px);
  max-width: 100%;
}
.dashboard-event-organizer {
  display: block;
  font-weight: 600;
  line-height: 1.35;
}
.dashboard-event-organizer-email {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.85rem;
  color: var(--text-muted, #5c6370);
}
.event-transfer-selected {
  margin: 0.75rem 0 0;
  padding: 0.65rem 0.75rem;
  border-radius: 8px;
  background: rgba(var(--accent-rgb, 0, 102, 204), 0.08);
  font-size: 0.92rem;
}
.event-transfer-modal-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1rem;
}

/* Table responsive : défilement horizontal et vertical */
.table-scroll-wrap,
.chart-container:has(.dashboard-table),
.dashboard-users-scroll {
  overflow-x: auto;
  overflow-y: auto;
  max-height: min(70vh, 420px);
  -webkit-overflow-scrolling: touch;
  scrollbar-width: auto;
  scrollbar-color: #5a5a5a #d0d0d0;
  scrollbar-gutter: stable;
}
.dashboard-users-scroll::-webkit-scrollbar,
.chart-container:has(.dashboard-table)::-webkit-scrollbar {
  width: 14px;
  height: 14px;
}
.dashboard-users-scroll::-webkit-scrollbar-track,
.chart-container:has(.dashboard-table)::-webkit-scrollbar-track {
  background: #d0d0d0;
  border-radius: 6px;
  border: 1px solid #b0b0b0;
}
.dashboard-users-scroll::-webkit-scrollbar-thumb,
.chart-container:has(.dashboard-table)::-webkit-scrollbar-thumb {
  background: #5a5a5a;
  border-radius: 6px;
  border: 2px solid #d0d0d0;
  min-height: 40px;
  min-width: 40px;
}
.dashboard-users-scroll::-webkit-scrollbar-thumb:hover,
.chart-container:has(.dashboard-table)::-webkit-scrollbar-thumb:hover {
  background: #404040;
}
.dashboard-users-scroll::-webkit-scrollbar-corner,
.chart-container:has(.dashboard-table)::-webkit-scrollbar-corner {
  background: #d0d0d0;
}
[data-theme="dark"] .dashboard-users-scroll,
[data-theme="dark"] .chart-container:has(.dashboard-table) {
  scrollbar-color: #64748b #1e293b;
}
[data-theme="dark"] .dashboard-users-scroll::-webkit-scrollbar-track,
[data-theme="dark"]
  .chart-container:has(.dashboard-table)::-webkit-scrollbar-track {
  background: #1e293b;
  border-color: #334155;
}
[data-theme="dark"] .dashboard-users-scroll::-webkit-scrollbar-thumb,
[data-theme="dark"]
  .chart-container:has(.dashboard-table)::-webkit-scrollbar-thumb {
  background: #64748b;
  border-color: #1e293b;
}
[data-theme="dark"] .dashboard-users-scroll::-webkit-scrollbar-thumb:hover,
[data-theme="dark"]
  .chart-container:has(.dashboard-table)::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}
[data-theme="dark"] .dashboard-users-scroll::-webkit-scrollbar-corner,
[data-theme="dark"]
  .chart-container:has(.dashboard-table)::-webkit-scrollbar-corner {
  background: #1e293b;
}
@media (max-width: 767px) {
  .dashboard-users-scroll,
  .chart-container:has(.dashboard-table) {
    margin-left: calc(-1 * max(16px, var(--safe-left)));
    margin-right: calc(-1 * max(16px, var(--safe-right)));
    padding-left: max(16px, var(--safe-left));
    padding-right: max(16px, var(--safe-right));
  }
}
.table-scroll-wrap {
  margin-left: calc(-1 * max(16px, var(--safe-left)));
  margin-right: calc(-1 * max(16px, var(--safe-right)));
  padding-left: max(16px, var(--safe-left));
  padding-right: max(16px, var(--safe-right));
}
@media (min-width: 768px) {
  .table-scroll-wrap {
    margin-left: 0;
    margin-right: 0;
    padding-left: 0;
    padding-right: 0;
  }
}
@media (max-width: 767px) {
  .dashboard-table {
    font-size: 0.875rem;
    min-width: 480px;
    display: table;
  }
  .dashboard-table th,
  .dashboard-table td {
    padding: 10px 8px;
  }
}
@media (max-width: 479px) {
  .dashboard-table {
    min-width: 360px;
  }
  .dashboard-table th,
  .dashboard-table td {
    padding: 8px 6px;
    font-size: 0.8125rem;
  }
}

/* Section Statistiques : grille 2×2 tablette + mobile, occupe toute la largeur */
@media (max-width: 1023px) {
  .dashboard-main #event-manage-section-stats .kpi-grid,
  .dashboard-main #stats .kpi-grid,
  .dashboard-main .dashboard-section .kpi-grid,
  #event-manage-section-stats .kpi-grid,
  #stats .kpi-grid,
  .dashboard-section .kpi-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 6px;
    margin-bottom: 0.6rem;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
  }
  .dashboard-main #event-manage-section-stats,
  .dashboard-main #stats,
  .dashboard-main .dashboard-section {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }
}
@media (max-width: 767px) {
  .dashboard-main #event-manage-section-stats .kpi-grid,
  .dashboard-main #stats .kpi-grid,
  .dashboard-main .dashboard-section .kpi-grid,
  #event-manage-section-stats .kpi-grid,
  #stats .kpi-grid,
  .dashboard-section .kpi-grid {
    gap: 4px;
    margin-bottom: 0.5rem;
  }
  #event-manage-section-stats .stats-kpi-heading.section-title,
  #event-manage-section-stats .section-title.stats-kpi-heading {
    font-size: 0.9375rem;
    margin-bottom: 6px;
  }
  .dashboard-section .kpi-card,
  #event-manage-section-stats .kpi-card,
  #stats .kpi-card {
    padding: 6px 5px;
    border-radius: 4px;
    min-height: 0;
  }
  .dashboard-section .kpi-card::before,
  #event-manage-section-stats .kpi-card::before,
  #stats .kpi-card::before {
    height: 1px;
  }
  .dashboard-section .kpi-card-total-tickets::before,
  #event-manage-section-stats .kpi-card-total-tickets::before {
    height: 2px;
  }
  .dashboard-section .kpi-card h4,
  #event-manage-section-stats .kpi-card h4,
  #stats .kpi-card h4 {
    font-size: 0.5rem;
    line-height: 1.1;
    margin-bottom: 1px;
    letter-spacing: 0.1px;
  }
  .dashboard-section .kpi-card .value,
  #event-manage-section-stats .kpi-card .value,
  #stats .kpi-card .value,
  .mes-organizer-panel .kpi-card .value {
    font-size: clamp(0.75rem, 3.6vw, 0.95rem);
    line-height: 1.2;
    overflow-wrap: anywhere;
    word-break: break-word;
  }
  }
}
@media (max-width: 479px) {
  #event-manage-section-stats .kpi-grid,
  #stats .kpi-grid,
  .dashboard-section .kpi-grid {
    gap: 3px;
    margin-bottom: 0.4rem;
  }
  .dashboard-section .kpi-card,
  #event-manage-section-stats .kpi-card,
  #stats .kpi-card {
    padding: 4px 3px;
  }
  .dashboard-section .kpi-card h4,
  #event-manage-section-stats .kpi-card h4,
  #stats .kpi-card h4 {
    font-size: 0.45rem;
  }
  .dashboard-section .kpi-card .value,
  #event-manage-section-stats .kpi-card .value,
  #stats .kpi-card .value {
    font-size: 0.7rem;
  }
}
/* Tableau des catégories (Statistiques) : scroll horizontal + 1ère colonne fixe sur mobile */
@media (max-width: 767px) {
  #event-manage-section-stats .chart-container {
    padding: 12px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  #event-manage-tiers-table.dashboard-table th:first-child,
  #event-manage-tiers-table.dashboard-table td:first-child {
    position: sticky;
    left: 0;
    z-index: 1;
    background: var(--white);
    box-shadow: 4px 0 8px -2px rgba(0, 0, 0, 0.08);
  }
  [data-theme="dark"] #event-manage-tiers-table.dashboard-table th:first-child,
  [data-theme="dark"] #event-manage-tiers-table.dashboard-table td:first-child {
    background: var(--neutral-light);
    box-shadow: 4px 0 8px -2px rgba(0, 0, 0, 0.2);
  }
}

/* Filtres liste billets (event-manage #tickets) */
.event-manage-tickets-filter .form-row {
  align-items: flex-end;
}
.event-manage-tickets-filter .input-filter-tickets {
  min-height: 2.75rem;
}
.event-manage-tickets-filter .form-group--search .input-filter-tickets {
  flex: 1 1 12rem;
  max-width: 100%;
}
@media (max-width: 767px) {
  .event-manage-tickets-filter .form-row {
    flex-direction: column;
    align-items: stretch;
  }
}

/* Liste billets : pas de clip horizontal (scroll sur chaque ligne .tls-line) */
@media (max-width: 1023px) {
  .tickets-print-area,
  #event-manage-tickets-list.tickets-print-area {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    overflow-x: visible;
  }
}
/* Cartes billets — layout responsive global */
.ticket-card {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  margin-bottom: 0.875rem;
  background: var(--bg-surface);
  overflow: hidden;
  transition: box-shadow 0.2s;
}
.ticket-card:hover { box-shadow: var(--shadow-md); }
[data-theme="dark"] .ticket-card { border-color: rgba(255,255,255,0.1); }
.ticket-card[data-ticket-status="sold"]     { border-left: 4px solid #16a34a; }
.ticket-card[data-ticket-status="reserved"] { border-left: 4px solid var(--primary); }
.ticket-card[data-ticket-status="expired"]  { border-left: 4px solid #94a3b8; }
.tc-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 10px 16px 8px;
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}
[data-theme="dark"] .tc-head { border-bottom-color: rgba(255,255,255,0.08); }
.tc-head-left { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tc-tier { font-size: 0.97rem; color: var(--text-base); }
.tc-price { font-size: 0.9rem; font-weight: 700; color: var(--primary); white-space: nowrap; }
.tc-body {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 12px 16px 14px;
}
.tc-details { flex: 1; min-width: 0; }
.tc-qr { flex-shrink: 0; }
.tc-qr canvas { display: block; border-radius: 8px; }
.tc-row {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-size: 0.875rem;
  line-height: 1.5;
  margin-bottom: 4px;
  flex-wrap: wrap;
  word-break: break-word;
}
.tc-lbl {
  flex-shrink: 0;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  min-width: 70px;
}
.tc-email { opacity: 0.72; font-size: 0.82em; }
.tc-code {
  font-family: monospace;
  font-size: 0.88em;
  background: var(--bg-surface-2);
  padding: 1px 5px;
  border-radius: 4px;
  letter-spacing: 0.06em;
}
.tc-notice {
  font-size: 0.8rem;
  border-radius: 6px;
  padding: 5px 10px;
  margin: 6px 0 8px;
  font-weight: 500;
}
.tc-notice--ok   { background: rgba(22,163,74,0.1); color: #15803d; }
[data-theme="dark"] .tc-notice--ok { background: rgba(74,222,128,0.12); color: #4ade80; }
.tc-notice--warn { background: rgba(148,163,184,0.18); color: #64748b; }
[data-theme="dark"] .tc-notice--warn { background: rgba(148,163,184,0.12); color: #94a3b8; }
.tc-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
  align-items: center;
}
/* ── Responsive billets ── */
@media (max-width: 640px) {
  .tc-body { flex-direction: column-reverse; align-items: center; padding: 12px 12px 14px; }
  .tc-qr { width: 100%; display: flex; justify-content: center; padding-top: 2px; }
  .tc-qr canvas { width: 96px !important; height: 96px !important; }
  .tc-row { font-size: 0.82rem; }
  .tc-lbl { min-width: 60px; font-size: 0.68rem; }
  .tc-actions .btn { font-size: 0.78rem; padding: 5px 9px; min-height: 36px; }
  .tc-head { padding: 8px 12px 7px; }
}
@media (max-width: 390px) {
  .tc-body { gap: 0.6rem; padding: 10px 10px 12px; }
  .tc-price { font-size: 0.82rem; }
  .tc-tier { font-size: 0.88rem; }
  .tc-actions { gap: 4px; }
  .tc-actions .btn { font-size: 0.73rem; padding: 4px 7px; }
}
@media (max-width: 767px) {
  .tickets-print-area .ticket-row,
  .ticket-row {
    flex-direction: column;
    align-items: stretch;
    gap: 0.75rem;
    padding: 0.75rem;
    margin-bottom: 0.5rem;
  }
}
@media (max-width: 479px) {
  .tickets-print-area .ticket-row,
  .ticket-row {
    padding: 0.6rem;
    gap: 0.5rem;
    font-size: 0.875rem;
  }
  .tickets-print-area .ticket-status-badge,
  .ticket-status-badge {
    font-size: 0.7rem;
    padding: 2px 6px;
  }
  .tickets-print-area .ticket-row .btn,
  .ticket-row .btn {
    font-size: 0.7rem;
    padding: 4px 6px;
  }
  .tickets-print-area .ticket-row .btn-icon.btn-ticket-preview,
  .ticket-row .btn-icon.btn-ticket-preview {
    min-width: 28px;
    width: 28px;
    height: 28px;
    font-size: 0.9rem;
  }
  .tickets-print-area .ticket-row .btn-sm,
  .ticket-row .btn-sm {
    font-size: 0.65rem;
    padding: 3px 5px;
  }
}

/* Dashboard section Utilisateurs : taille réduite sur mobile pour tout garder visible */
@media (max-width: 767px) {
  .dashboard-main .dashboard-title {
    font-size: 1.1rem;
    margin-bottom: 12px;
  }
  .dashboard-section h2,
  .dashboard-section #users-title {
    font-size: 1rem;
    margin-bottom: 6px;
  }
  .dashboard-section .dashboard-description {
    font-size: 0.75rem;
    line-height: 1.3;
    margin-bottom: 10px;
  }
  #add-user-block .btn,
  #add-user-block .dashboard-actions .btn {
    font-size: 0.75rem;
    padding: 6px 10px;
  }
  #user-add-event-block .btn,
  #user-events-btn-add {
    font-size: 0.75rem;
    padding: 6px 10px;
  }
  .add-user-form label,
  #add-user-form label,
  #edit-user-form label {
    font-size: 0.75rem;
  }
  .add-user-form input,
  .add-user-form select,
  #add-user-form input,
  #add-user-form select,
  #edit-user-form input,
  #edit-user-form select {
    font-size: 0.8125rem;
    padding: 5px 8px;
  }
  .dashboard-section .form-row {
    gap: 10px;
  }
  .dashboard-section .form-group {
    margin-bottom: 10px;
  }
  .chart-container:has(#dashboard-users-table) {
    padding: 10px;
  }
  #dashboard-users-table.dashboard-table {
    font-size: 0.75rem;
    min-width: 300px;
  }
  #dashboard-users-table.dashboard-table th,
  #dashboard-users-table.dashboard-table td {
    padding: 6px 5px;
    font-size: 0.7rem;
  }
  #dashboard-users-table.dashboard-table .btn-sm {
    font-size: 0.65rem;
    padding: 3px 5px;
  }
  #dashboard-users-table.dashboard-table .btn-icon {
    min-width: 28px;
    width: 28px;
    height: 28px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9em;
  }
  #dashboard-users-table.dashboard-table .dashboard-table-actions {
    white-space: nowrap;
  }
  #dashboard-users-table.dashboard-table
    .dashboard-table-actions
    .btn-icon
    + .btn-icon {
    margin-left: 4px;
  }
}
@media (max-width: 479px) {
  .dashboard-main .dashboard-title {
    font-size: 1rem;
  }
  .dashboard-section h2,
  .dashboard-section #users-title {
    font-size: 0.9375rem;
  }
  .dashboard-section .dashboard-description {
    font-size: 0.7rem;
  }
  #add-user-block .btn {
    font-size: 0.7rem;
    padding: 5px 8px;
  }
  #user-add-event-block .btn,
  #user-events-btn-add {
    font-size: 0.7rem;
    padding: 5px 8px;
  }
  #dashboard-users-table.dashboard-table th,
  #dashboard-users-table.dashboard-table td {
    padding: 5px 4px;
    font-size: 0.65rem;
  }
  #dashboard-users-table.dashboard-table .btn-sm {
    font-size: 0.6rem;
    padding: 2px 4px;
  }
}

/* Liste événements par utilisateur : 2 colonnes, détail au clic */
.user-events-hint {
  font-size: 0.875rem;
  opacity: 0.9;
}
.user-events-table-wrap .user-events-table.dashboard-table {
  min-width: 0;
  width: 100%;
}
.user-events-table thead th {
  text-align: left;
}
tr.user-event-summary {
  cursor: pointer;
}
tr.user-event-summary:hover td {
  background: rgba(0, 0, 0, 0.04);
}
[data-theme="dark"] tr.user-event-summary:hover td {
  background: rgba(255, 255, 255, 0.06);
}
.user-event-date-cell {
  white-space: nowrap;
}
.user-event-chevron {
  display: inline-block;
  margin-left: 6px;
  font-size: 0.75rem;
  opacity: 0.7;
}
tr.user-event-detail td.user-event-detail-td {
  padding-top: 0;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}
[data-theme="dark"] tr.user-event-detail td.user-event-detail-td {
  border-bottom-color: rgba(255, 255, 255, 0.1);
}
.user-event-detail-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  margin: 0 0 8px 0;
  background: rgba(var(--primary-rgb), 0.06);
  border-radius: var(--radius-md);
}
[data-theme="dark"] .user-event-detail-inner {
  background: rgba(var(--primary-rgb), 0.12);
}
.user-event-detail-actions {
  margin: 0;
}
.user-event-detail-body .user-event-detail-value {
  margin: 0 0 8px;
  font-weight: 600;
}
.user-event-detail-body .form-group label {
  margin-bottom: 4px;
  font-size: 0.8rem;
  opacity: 0.85;
}

/* Alert / toast */
.alert {
  padding: 16px 20px;
  border-radius: var(--radius-md);
  margin-bottom: 20px;
  font-weight: 500;
}
.alert-success {
  background: rgba(var(--primary-rgb), 0.15);
  color: var(--primary-dark);
  border: 1px solid var(--primary);
}
.alert-error {
  background: rgba(220, 38, 38, 0.15);
  color: #b91c1c;
  border: 1px solid #dc2626;
}
.alert-info {
  background: rgba(30, 58, 138, 0.15);
  color: var(--accent);
  border: 1px solid var(--accent);
}
[data-theme="dark"] .alert-success {
  background: rgba(var(--primary-rgb), 0.25);
}
[data-theme="dark"] .alert-error {
  background: rgba(220, 38, 38, 0.25);
}
[data-theme="dark"] .alert-info {
  background: rgba(30, 58, 138, 0.25);
}

/* Toasts : animation entrée/sortie */
.alert-toast {
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.18);
  z-index: 10050;
  opacity: 0;
  transform: translateX(-50%) translateY(10px);
  transition:
    opacity 0.35s ease,
    transform 0.35s ease;
  pointer-events: none;
}
.alert-toast-visible.alert-toast {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.alert-toast-out.alert-toast {
  opacity: 0;
  transition-duration: 0.28s;
}

/* Connexion réussie : bandeau bas, carte + coche */
.alert-toast-auth.alert-toast {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 18px 24px;
  border-radius: var(--radius-lg);
  border: none;
  border-left: 5px solid var(--primary);
  background: #fff;
  color: var(--neutral-dark);
  font-weight: 600;
  font-size: 1rem;
  box-shadow:
    0 -4px 24px rgba(0, 0, 0, 0.1),
    0 8px 28px rgba(var(--primary-rgb), 0.12);
}
.alert-toast-auth.alert-toast::before {
  content: "";
  display: block;
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  background: var(--primary);
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/%3E%3C/svg%3E")
    center / contain no-repeat;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/%3E%3C/svg%3E")
    center / contain no-repeat;
  border-radius: 50%;
}
[data-theme="dark"] .alert-toast-auth.alert-toast {
  background: var(--neutral-light);
  color: #f1f5f9;
  border-left-color: var(--primary);
  box-shadow:
    0 -4px 24px rgba(0, 0, 0, 0.35),
    0 8px 28px rgba(var(--primary-rgb), 0.15);
}
[data-theme="dark"] .alert-toast-auth.alert-toast::before {
  background: var(--primary);
}

/* Badge */
.badge {
  display: inline-block;
  padding: 4px 10px;
  font-size: 0.75rem;
  font-weight: 600;
  border-radius: 999px;
}
.badge-primary {
  background: var(--primary);
  color: var(--on-primary);
}
.badge-gold {
  background: var(--secondary);
  color: #ffffff;
}
[data-theme="dark"] .badge-gold {
  color: #1a1f35;
}
.badge-accent {
  background: var(--accent);
  color: white;
}

/* Divider */
.divider {
  height: 1px;
  background: rgba(0, 0, 0, 0.1);
  margin: 24px 0;
}
[data-theme="dark"] .divider {
  background: rgba(255, 255, 255, 0.15);
}

/* Card hover glow gold (reinforcement) */
.event-card:focus-within {
  box-shadow:
    var(--shadow-xl),
    0 0 40px rgba(var(--primary-rgb), 0.2);
}
.advantage-card:focus-within {
  box-shadow: var(--shadow-xl);
}

/* =========================================================
   REDESIGN MARKETING v2 — TO SALA EVENT
   ========================================================= */

/* ── Titres Helvetica — poids 800 (Rounded Bold) ── */
h1,
h2,
h3,
.hero-title,
.section-title,
.bento-title,
.step-v2-title,
.cta-finale-title {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -0.02em;
}

/* ── Labels compressés (badges, eyebrow) ── */
.section-eyebrow,
.event-category-badge,
.promo-slot-label,
.stat-label {
  font-family: var(--font-compressed);
  letter-spacing: 0.06em;
}

/* ── Section eyebrow label ── */
.section-eyebrow {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--primary-text);
  margin: 0 0 8px;
}
[data-theme="dark"] .section-eyebrow {
  color: var(--primary);
}

/* ── Focus-visible global ── */
:focus-visible {
  outline: 2px solid var(--secondary);
  outline-offset: 3px;
}

/* ──────────────────────────────────────────────────────────
   HERO V2
   ────────────────────────────────────────────────────────── */
.hero-v2 {
  position: relative;
  min-height: 70vh;
  min-height: 70dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: #12100c;
  padding-top: 100px;
  padding-bottom: 100px;
}
@media (max-width: 767px) {
  .hero-v2 {
    min-height: 55vh;
    min-height: 55dvh;
    padding-top: 80px;
    padding-bottom: 80px;
  }
}

/* Mesh gradient animé */
.hero-mesh {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(
      ellipse 80% 60% at 20% 40%,
      rgba(var(--primary-rgb), 0.35) 0%,
      transparent 60%
    ),
    radial-gradient(
      ellipse 60% 50% at 80% 20%,
      rgba(30, 58, 138, 0.4) 0%,
      transparent 60%
    ),
    radial-gradient(
      ellipse 50% 60% at 60% 80%,
      rgba(var(--primary-rgb), 0.26) 0%,
      transparent 60%
    );
  animation: meshMove 20s ease-in-out infinite alternate;
  pointer-events: none;
}
@keyframes meshMove {
  0% {
    background-position:
      0% 0%,
      100% 0%,
      60% 100%;
  }
  50% {
    background-position:
      30% 30%,
      70% 30%,
      40% 70%;
  }
  100% {
    background-position:
      10% 60%,
      90% 60%,
      50% 10%;
  }
}

/* Grain texture */
.hero-grain {
  position: absolute;
  inset: 0;
  opacity: 0.06;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 200px 200px;
}

.hero-content-v2 {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: 0 clamp(16px, 5vw, 48px);
  max-width: 800px;
  animation: heroFade 0.9s ease-out;
}

/* Eyebrow inside hero */
.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--primary);
  background: rgba(var(--primary-rgb), 0.12);
  border: 1px solid rgba(var(--primary-rgb), 0.3);
  padding: 6px 14px;
  border-radius: 100px;
  margin-bottom: 24px;
}
.hero-eyebrow-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--primary);
  animation: pulse 2s infinite;
}
@keyframes pulse {
  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.5;
    transform: scale(0.85);
  }
}

.hero-title-v2 {
  font-size: clamp(2.5rem, 7vw, 5rem);
  font-weight: 800;
  letter-spacing: -0.01em;
  color: #ffffff;
  line-height: 1.05;
  margin: 0 0 20px;
  text-shadow: 0 2px 40px rgba(0, 0, 0, 0.3);
}
.hero-title-accent {
  color: var(--primary);
  position: relative;
}

.hero-subtitle-v2 {
  font-size: clamp(1rem, 2vw, 1.35rem);
  color: rgba(255, 255, 255, 0.82);
  margin: 0 0 40px;
  font-weight: 400;
  line-height: 1.5;
}

.hero-cta-v2 {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: center;
}

/* BTN GLOW */
.btn-glow {
  box-shadow: none;
  transition:
    box-shadow 0.3s,
    transform 0.3s;
}
.btn-glow:hover {
  box-shadow: var(--glow-green);
  transform: translateY(-2px);
}

/* Hero ghost (transparent border blanc) */
.btn-hero-ghost {
  background: transparent;
  color: #ffffff;
  border: 2px solid rgba(255, 255, 255, 0.6);
  padding: calc(var(--touch-min, 44px) / 2 - 8px) 28px;
  border-radius: 100px;
  font-weight: 600;
  cursor: pointer;
  transition:
    background 0.3s,
    border-color 0.3s,
    color 0.3s;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.btn-hero-ghost:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: #fff;
}

/* Pills steps en bas du hero */
.hero-pills {
  position: absolute;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
  z-index: 2;
  padding: 0 16px;
}
.hero-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: 100px;
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.hero-pill svg {
  color: var(--primary);
  flex-shrink: 0;
}
.hero-pill-sep {
  color: rgba(255, 255, 255, 0.3);
  font-size: 0.85rem;
}

/* Scroll indicator v2 */
.hero-scroll-v2 {
  position: absolute;
  bottom: 32px;
  right: 32px;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hero-scroll-ring {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.3);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 6px;
  overflow: hidden;
}
.hero-scroll-dot {
  width: 4px;
  height: 8px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.8);
  animation: scrollBounce 1.4s ease-in-out infinite;
}
@keyframes scrollBounce {
  0%,
  100% {
    transform: translateY(0);
    opacity: 1;
  }
  60% {
    transform: translateY(8px);
    opacity: 0.3;
  }
}

@media (max-width: 767px) {
  .hero-pills {
    bottom: 80px;
  }
  .hero-scroll-v2 {
    display: none;
  }
}

/* ──────────────────────────────────────────────────────────
   NAVBAR SCROLL (transparent → opaque)
   ────────────────────────────────────────────────────────── */
.navbar {
  transition:
    background 0.4s ease,
    box-shadow 0.4s ease;
}
.navbar.navbar--transparent {
  background: transparent !important;
  box-shadow: none !important;
}
.navbar.navbar--scrolled {
  background: rgba(6, 13, 10, 0.95) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* Connexion pill : vert sur fond transparent */
.navbar .nav-auth .btn-ghost[data-auth="login"].nav-login-pill {
  color: var(--primary) !important;
  border-color: var(--primary) !important;
  background: transparent !important;
  border-radius: 100px;
}
.navbar .nav-auth .btn-ghost[data-auth="login"].nav-login-pill:hover {
  background: var(--primary) !important;
  color: var(--on-primary) !important;
}

/* Nav links uppercase avec underline hover */
.navbar-on-hero .nav-link {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.78rem;
}
.navbar-on-hero .nav-link::after {
  content: "";
  position: absolute;
  bottom: 4px;
  left: 16px;
  right: 16px;
  height: 2px;
  background: var(--primary);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease;
  border-radius: 1px;
}
.navbar-on-hero .nav-link:hover::after {
  transform: scaleX(1);
}

/* ──────────────────────────────────────────────────────────
   STEPS TIMELINE V2
   ────────────────────────────────────────────────────────── */
.steps-section-v2 {
  background: #f8fafc;
  padding: clamp(64px, 8vw, 120px) 0;
}
[data-theme="dark"] .steps-section-v2 {
  background: #16140f;
}

.steps-timeline-v2 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  margin-top: 56px;
  position: relative;
}
@media (max-width: 767px) {
  .steps-timeline-v2 {
    grid-template-columns: 1fr;
    gap: 0;
  }
}

.step-v2 {
  display: flex;
  flex-direction: column;
  gap: 16px;
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity 0.6s ease,
    transform 0.6s ease;
}
.step-v2.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.step-v2[data-step="2"] {
  transition-delay: 0.15s;
}
.step-v2[data-step="3"] {
  transition-delay: 0.3s;
}
.step-v2[data-step="4"] {
  transition-delay: 0.45s;
}

.step-v2-num-wrap {
  display: flex;
  align-items: center;
  gap: 0;
}
@media (max-width: 767px) {
  .step-v2-num-wrap {
    flex-direction: column;
    align-items: flex-start;
  }
}

.step-v2-circle {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--primary);
  color: var(--on-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  z-index: 1;
}
.step-v2-num {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.1rem;
}

.step-v2-track {
  flex: 1;
  height: 3px;
  background: rgba(var(--primary-rgb), 0.15);
  position: relative;
  overflow: hidden;
}
.step-v2-track-fill {
  height: 100%;
  width: 0;
  background: var(--primary);
  transition: width 1s ease 0.6s;
}
.step-v2.is-visible .step-v2-track-fill {
  width: 100%;
}
@media (max-width: 767px) {
  .step-v2-track {
    width: 3px;
    height: 40px;
    flex: none;
    margin-left: 22px;
  }
  .step-v2-track-fill {
    width: 100%;
    height: 0;
    transition: height 1s ease 0.6s;
  }
  .step-v2.is-visible .step-v2-track-fill {
    height: 100%;
    width: 100%;
  }
}

.step-v2-body {
  padding: 16px 24px 16px 0;
}
@media (max-width: 767px) {
  .step-v2-body {
    padding: 8px 0 8px 8px;
  }
}

.step-v2-icon {
  margin-bottom: 12px;
}
.step-v2-title {
  font-size: 1rem;
  font-weight: 700;
  margin: 0 0 6px;
  color: var(--neutral-dark);
}
[data-theme="dark"] .step-v2-title {
  color: #f1f5f9;
}
.step-v2-desc {
  font-size: 0.875rem;
  color: #6b7280;
  margin: 0;
  line-height: 1.5;
}
[data-theme="dark"] .step-v2-desc {
  color: #94a3b8;
}

/* ──────────────────────────────────────────────────────────
   CATEGORY FILTER CHIPS
   ────────────────────────────────────────────────────────── */
.category-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 20px 0 32px;
}
.cat-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 18px;
  border-radius: 100px;
  border: 1.5px solid #e2e8f0;
  background: transparent;
  color: #4b5563;
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  transition:
    background 0.2s,
    color 0.2s,
    border-color 0.2s,
    box-shadow 0.2s;
  white-space: nowrap;
  font-family: var(--font);
}
.cat-chip:hover {
  border-color: var(--primary);
  color: var(--primary);
}
.cat-chip--active {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--on-primary);
  font-weight: 600;
}
[data-theme="dark"] .cat-chip {
  border-color: rgba(255, 255, 255, 0.15);
  color: #94a3b8;
}
[data-theme="dark"] .cat-chip--active {
  color: var(--on-primary);
}

/* ──────────────────────────────────────────────────────────
   EVENT CARDS OVERLAY — GLASSMORPHISM
   ────────────────────────────────────────────────────────── */
.events-popular {
  background: #f8fafc;
}
[data-theme="dark"] .events-popular {
  background: #14120e;
}

/* Card glassmorphism */
.event-card {
  position: relative;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.5);
  box-shadow: var(--shadow-md);
  transition:
    transform 0.35s ease,
    box-shadow 0.35s ease;
}
[data-theme="dark"] .event-card {
  background: rgba(10, 20, 14, 0.7);
  border-color: rgba(255, 255, 255, 0.08);
}
.event-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-xl);
}
.event-card:hover .event-card-img {
  transform: scale(1.03);
}

/* Image 16/9 obligatoire */
.event-card-img-wrap {
  position: relative;
  aspect-ratio: 16/9;
  overflow: hidden;
}
.event-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
  display: block;
}
/* Overlay gradient sombre pour lisibilité */
.event-card-img-wrap::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.75) 0%,
    rgba(0, 0, 0, 0.1) 50%,
    transparent 100%
  );
  pointer-events: none;
}

/* Overlay texte en bas de l'image */
.event-card-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 2;
  padding: 12px 14px;
  background: rgba(0, 0, 0, 0.15);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.event-card-overlay-title {
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 700;
  color: #fff;
  margin: 0 0 2px;
  line-height: 1.2;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}
.event-card-overlay-meta {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.85);
  margin: 0;
}

/* Badge places restantes */
.places-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 3;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 100px;
  letter-spacing: 0.04em;
}
.places-badge--ok {
  background: rgba(var(--primary-rgb), 0.9);
  color: #fff;
}
.places-badge--low {
  background: rgba(251, 146, 60, 0.95);
  color: #fff;
}
.places-badge--critical {
  background: rgba(239, 68, 68, 0.95);
  color: #fff;
}

/* ──────────────────────────────────────────────────────────
   BENTO GRID — ADVANTAGES V2
   ────────────────────────────────────────────────────────── */
.advantages-section-v2 {
  background: #f8fafc;
}
[data-theme="dark"] .advantages-section-v2 {
  background: #14120e;
}

/* Stat counters */
.stat-counters {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  margin: 0 0 48px;
  flex-wrap: wrap;
}
.stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 0 32px;
}
.stat-num {
  font-family: var(--font-display);
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: 800;
  color: var(--primary);
  line-height: 1;
}
.stat-label {
  font-size: 0.75rem;
  font-weight: 500;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
[data-theme="dark"] .stat-label {
  color: #94a3b8;
}
.stat-sep {
  font-size: 2rem;
  color: rgba(var(--primary-rgb), 0.3);
  font-weight: 300;
  padding: 0;
}

.bento-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto;
  gap: 20px;
}
@media (min-width: 768px) {
  .bento-grid {
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: auto;
  }
  .bento-card--large {
    grid-column: 1;
    grid-row: 1 / 3;
  }
}
@media (max-width: 767px) {
  .bento-grid {
    grid-template-columns: 1fr 1fr;
  }
  .bento-card--large {
    grid-column: 1 / -1;
  }
}
@media (max-width: 479px) {
  .bento-grid {
    grid-template-columns: 1fr;
  }
}

.bento-card {
  padding: 28px 24px;
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.6);
  box-shadow: var(--shadow-sm);
  transition:
    box-shadow 0.3s,
    transform 0.3s;
  position: relative;
  overflow: hidden;
}
.bento-card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-4px);
}
[data-theme="dark"] .bento-card {
  background: rgba(10, 20, 14, 0.6);
  border-color: rgba(255, 255, 255, 0.07);
}

.bento-card--large {
  padding: 36px 32px;
}

.bento-icon-wrap {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: rgba(var(--primary-rgb), 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
  color: var(--primary);
}
.bento-card--large .bento-icon-wrap {
  width: 64px;
  height: 64px;
  margin-bottom: 20px;
}

.bento-title {
  font-size: 1.05rem;
  font-weight: 700;
  margin: 0 0 8px;
  color: var(--neutral-dark);
}
[data-theme="dark"] .bento-title {
  color: #f1f5f9;
}
.bento-card--large .bento-title {
  font-size: 1.3rem;
}

.bento-desc {
  font-size: 0.875rem;
  color: #6b7280;
  margin: 0;
  line-height: 1.55;
}
[data-theme="dark"] .bento-desc {
  color: #94a3b8;
}

.bento-tag {
  display: inline-block;
  margin-top: 20px;
  padding: 5px 12px;
  border-radius: 100px;
  background: rgba(var(--primary-rgb), 0.12);
  color: var(--primary);
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* ──────────────────────────────────────────────────────────
   CTA FINALE
   ────────────────────────────────────────────────────────── */
.cta-finale {
  position: relative;
  background: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%);
  overflow: hidden;
  padding: clamp(80px, 10vw, 140px) 0;
  text-align: center;
}
.cta-finale-blob {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.cta-finale-blob svg {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cta-finale-inner {
  position: relative;
  z-index: 1;
}
.cta-finale-title {
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: 800;
  color: #fff;
  margin: 0 0 16px;
  letter-spacing: -0.01em;
}
.cta-finale-sub {
  font-size: clamp(1rem, 2vw, 1.25rem);
  color: rgba(255, 255, 255, 0.85);
  margin: 0 0 40px;
}
.btn-cta-finale {
  background: #fff;
  color: var(--primary);
  border: none;
  padding: 18px 36px;
  border-radius: 100px;
  font-weight: 700;
  font-size: 1rem;
  font-family: var(--font-display);
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
  transition:
    transform 0.3s,
    box-shadow 0.3s;
}
.btn-cta-finale:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.2);
  color: var(--primary);
}

/* ──────────────────────────────────────────────────────────
   FOOTER V2
   ────────────────────────────────────────────────────────── */
.footer-v2 {
  background: #14120e;
  color: rgba(255, 255, 255, 0.75);
  font-size: 0.875rem;
}
.footer-v2-main {
  padding: 72px 0 48px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.footer-v2-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 48px;
}
@media (max-width: 1023px) {
  .footer-v2-grid {
    grid-template-columns: 1fr 1fr;
    gap: 32px;
  }
  .footer-col--brand {
    grid-column: 1 / -1;
  }
}
@media (max-width: 479px) {
  .footer-v2-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }
}

.footer-v2-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
  background: transparent;
}
.footer-v2-logo img,
.footer-logo-img {
  height: 70px;
  width: auto;
  object-fit: contain;
  filter: none;
  background: transparent;
}
.footer-v2-logo .tosala-logo-light {
  display: block;
}
.footer-v2-logo .tosala-logo-dark {
  display: none;
}
[data-theme="dark"] .footer-v2-logo .tosala-logo-light {
  display: none;
}
[data-theme="dark"] .footer-v2-logo .tosala-logo-dark {
  display: block;
}
.footer-v2-logo-text {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 700;
}
.logo-white {
  color: #fff;
}
.logo-green {
  color: var(--primary);
}

.footer-v2-tagline {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.55);
  line-height: 1.6;
  margin: 0 0 24px;
  max-width: 280px;
}

.footer-v2-social {
  display: flex;
  gap: 12px;
}
.footer-social-icon {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  transition:
    background 0.2s,
    color 0.2s;
}
.footer-social-icon:hover {
  background: var(--primary);
  color: var(--on-primary);
  border-color: var(--primary);
}

.footer-col-title {
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: #fff;
  margin: 0 0 20px;
}
.footer-col-links {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.footer-col-links a,
.footer-col-links span {
  color: rgba(255, 255, 255, 0.55);
  text-decoration: none;
  transition: color 0.2s;
  display: block;
}
.footer-col-links a:hover {
  color: var(--primary);
}

.footer-v2-bar {
  background: rgba(0, 0, 0, 0.3);
  padding: 18px 0;
}
.footer-v2-bar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  color: rgba(255, 255, 255, 0.45);
  font-size: 0.8rem;
}
.footer-v2-bar-inner a {
  color: rgba(255, 255, 255, 0.6);
  text-decoration: none;
}
.footer-v2-bar-inner a:hover {
  color: var(--primary);
}

/* ──────────────────────────────────────────────────────────
   PREFERS-REDUCED-MOTION
   ────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .hero-mesh,
  .hero-grain,
  .hero-eyebrow-dot,
  .hero-scroll-dot,
  .step-v2-track-fill,
  .step-v2 {
    animation: none !important;
    transition: none !important;
  }
  .step-v2 {
    opacity: 1;
    transform: none;
  }
  .step-v2-track-fill {
    width: 100%;
    height: 100%;
  }
}

/* ── Navbar logo texte bicolore ── */
.navbar-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}
.navbar-logo-text {
  font-family: var(--font-display, "Helvetica", sans-serif);
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1;
}
.navbar-logo .logo-white {
  color: #fff;
}
.navbar-logo .logo-green {
  color: var(--primary);
}

/* =========================================================
   SECTION ÉVÉNEMENTS — VITRINE STYLE MARKETPLACE
   ========================================================= */

/* Événements populaires : même base visuelle que "Tous les événements" */
.events-popular {
  background: #f8fafc !important;
  padding-top: 56px !important;
  padding-bottom: 80px;
}
[data-theme="dark"] .events-popular {
  background: #14120e !important;
}

/* Grid 3 colonnes bien espacées */
.events-popular .events-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
@media (max-width: 1023px) {
  .events-popular .events-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 599px) {
  .events-popular .events-grid {
    grid-template-columns: 1fr;
  }
}

/* CTA "Tous les événements" sur fond sombre */
.events-popular .section-cta .btn-primary {
  background: var(--primary);
  color: var(--on-primary);
  border-color: var(--primary);
}
.events-popular .section-cta .btn-primary:hover {
  box-shadow: var(--glow-green);
  transform: translateY(-2px);
}

/* Hero pills repositionnées pour le hero compact */
.hero-pills {
  bottom: 16px !important;
}
@media (max-width: 767px) {
  .hero-pills {
    display: none;
  }
}

/* Index : pas de carte « featured » pleine largeur — même gabarit pour tous les événements. */
.events-popular .event-card--featured {
  grid-column: auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
  max-height: none;
}

/* ── Hero Ticker — bande d'events à venir ── */
.hero-ticker {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 32px;
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 100px;
  padding: 8px 16px 8px 12px;
  overflow: hidden;
}
.hero-ticker-label {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  color: var(--primary);
  white-space: nowrap;
  flex-shrink: 0;
}
.hero-ticker-label svg {
  animation: tickerPulse 1.2s ease-in-out infinite;
}
@keyframes tickerPulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.3;
  }
}
.hero-ticker-track {
  overflow: hidden;
  flex: 1;
  position: relative;
  height: 1.3em;
}
.hero-ticker-inner {
  display: flex;
  gap: 48px;
  white-space: nowrap;
  animation: tickerScroll 60s linear infinite;
  position: absolute;
  left: 0;
  top: 0;
}
@keyframes tickerScroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}
.hero-ticker-item {
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.85);
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  transition: color 0.2s;
}
.hero-ticker-item:hover {
  color: var(--secondary);
}
.hero-ticker-item .ticker-sep {
  color: rgba(255, 255, 255, 0.3);
  margin: 0 6px;
}
.hero-ticker-placeholder {
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.4);
}
@media (max-width: 479px) {
  .hero-ticker {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-ticker-inner {
    animation: none;
  }
}

/* =========================================================
   STYLES GLOBAUX — APPLICATION COMPLÈTE
   ========================================================= */

/* ── Page hero compact (toutes les pages internes) ── */
.page-hero-v2 {
  position: relative;
  min-height: 220px;
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  overflow: hidden;
  background: #12100c;
  padding: 120px clamp(16px, 5vw, 48px) 40px;
}
@media (max-width: 767px) {
  .page-hero-v2 {
    min-height: 160px;
    padding: 96px 20px 28px;
  }
}
.page-hero-v2-mesh {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(
      ellipse 70% 80% at 10% 50%,
      rgba(var(--primary-rgb), 0.25) 0%,
      transparent 65%
    ),
    radial-gradient(
      ellipse 50% 60% at 90% 30%,
      rgba(30, 58, 138, 0.3) 0%,
      transparent 65%
    );
  pointer-events: none;
}
.page-hero-v2-grain {
  position: absolute;
  inset: 0;
  opacity: 0.05;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 200px 200px;
}
.page-hero-v2-content {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--container-max, 1200px);
  margin: 0 auto;
}
.page-hero-v2-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--primary);
  margin-bottom: 8px;
}
.page-hero-v2-title {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 4vw, 3rem);
  font-weight: 800;
  color: #fff;
  margin: 0 0 8px;
  line-height: 1.1;
  letter-spacing: -0.01em;
}
.page-hero-v2-sub {
  font-size: clamp(0.9rem, 1.5vw, 1.05rem);
  color: rgba(255, 255, 255, 0.7);
  margin: 0;
}

/* ── Section alt refresh ── */
.section-alt {
  background: #f8fafc;
}
[data-theme="dark"] .section-alt {
  background: #16140f;
}

/* ── Cards glassmorphism globales ── */
.card-container,
.account-profile-card,
.account-tickets-card {
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.5);
  box-shadow: var(--shadow-md);
}
[data-theme="dark"] .card-container,
[data-theme="dark"] .account-profile-card,
[data-theme="dark"] .account-tickets-card {
  background: rgba(10, 20, 14, 0.7);
  border-color: rgba(255, 255, 255, 0.08);
}

/* ── Focus visible unifié — un seul outline vert ── */
.btn:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 3px;
  box-shadow: none;
}

/* ── Form inputs refresh ── */
input,
textarea,
select {
  font-family: var(--font);
}

/* ── Section title refresh ── */
.section-title {
  font-family: var(--font-display);
}

/* ═══════════════════════════════════════════════════════
   ESPACE PUBLICITAIRE — PROMO SECTION
   ═══════════════════════════════════════════════════════ */

/* Ticker partenaires (barre défilante) */
.promo-ticker-bar {
  background: var(--bg-card);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  height: 40px;
  overflow: hidden;
  gap: 0;
}
[data-theme="dark"] .promo-ticker-bar {
  background: rgba(255, 255, 255, 0.03);
}
.promo-ticker-label {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--primary);
  padding: 0 16px;
  border-right: 1px solid var(--border);
  height: 100%;
  white-space: nowrap;
  background: rgba(var(--primary-rgb), 0.06);
}
.promo-ticker-track {
  flex: 1;
  overflow: hidden;
  height: 100%;
  display: flex;
  align-items: center;
}
.promo-ticker-inner {
  display: flex;
  gap: 0;
  white-space: nowrap;
  animation: promoTickerScroll 30s linear infinite;
  will-change: transform;
}
@keyframes promoTickerScroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}
@media (prefers-reduced-motion: reduce) {
  .promo-ticker-inner {
    animation: none;
  }
}
.promo-partner-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 28px;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-muted);
  border-right: 1px solid var(--border);
  height: 40px;
}
.promo-partner-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--primary);
  opacity: 0.6;
  flex-shrink: 0;
}

/* Section principale pub */
.promo-section {
  padding: 0 0 8px;
  background: var(--bg-base);
}

.promo-section .container {
  padding-top: 48px;
  padding-bottom: 48px;
}

.promo-section-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 32px;
}
.promo-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--primary);
  background: rgba(var(--primary-rgb), 0.08);
  border: 1px solid rgba(var(--primary-rgb), 0.25);
  border-radius: 999px;
  padding: 4px 12px;
  margin-bottom: 10px;
}
[data-theme="dark"] .promo-badge {
  background: rgba(var(--primary-rgb), 0.12);
  border-color: rgba(var(--primary-rgb), 0.35);
}
.promo-section-title {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 3vw, 2rem);
  font-weight: 800;
  color: var(--text-base);
  margin: 0 0 6px;
  line-height: 1.2;
}
.promo-section-sub {
  font-size: 0.92rem;
  color: var(--text-muted);
  margin: 0;
  max-width: 480px;
}
.promo-contact-cta {
  flex-shrink: 0;
  align-self: center;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}

/* Grille principale */
.promo-grid {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* ── Slot bannière leaderboard ── */
.promo-slot--leaderboard .promo-slot-inner--leaderboard {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  border: 1.5px dashed var(--border);
  background: var(--bg-card);
  padding: 20px 28px;
  display: flex;
  align-items: center;
  gap: 20px;
  min-height: 90px;
  transition: border-color 0.2s;
}
.promo-slot--leaderboard .promo-slot-inner--leaderboard:hover {
  border-color: var(--primary);
  border-style: solid;
}
.promo-slot-icon {
  flex-shrink: 0;
  color: var(--text-muted);
  opacity: 0.5;
}
.promo-slot-label {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--text-base);
  margin: 0 0 2px;
}
.promo-slot-size {
  font-size: 0.75rem;
  color: var(--text-muted);
  margin: 0 0 2px;
}
.promo-slot-reach {
  font-size: 0.75rem;
  color: var(--primary);
  font-weight: 600;
  margin: 0;
}
.promo-slot-btn {
  margin-left: auto;
  white-space: nowrap;
  flex-shrink: 0;
}
.promo-rotation-controls {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 10px;
  z-index: 12;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  pointer-events: none;
}
.promo-rotation-arrow,
.promo-rotation-dot {
  pointer-events: auto;
}
.promo-rotation-arrow {
  width: 30px;
  height: 30px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.55);
  color: #fff;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  line-height: 1;
}
.promo-rotation-dots {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.promo-rotation-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  border: 0;
  background: rgba(255, 255, 255, 0.45);
  cursor: pointer;
  padding: 0;
}
.promo-rotation-dot.is-active {
  width: 20px;
  background: var(--primary);
}
.promo-deco-circle {
  position: absolute;
  border-radius: 50%;
  opacity: 0.06;
  pointer-events: none;
}
.promo-deco-circle--1 {
  width: 180px;
  height: 180px;
  background: var(--primary);
  top: -60px;
  right: 120px;
}
.promo-deco-circle--2 {
  width: 100px;
  height: 100px;
  background: #3b82f6;
  bottom: -40px;
  right: 40px;
}

/* ── Rangée principale : vidéo + partenaires ── */
.promo-main-row {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 20px;
  align-items: stretch;
}
@media (max-width: 767px) {
  .promo-main-row {
    grid-template-columns: 1fr;
  }
}

/* ── Slot vidéo ── */
.promo-slot--video .promo-slot-inner--video {
  border-radius: var(--radius);
  overflow: hidden;
  border: 1.5px solid var(--border);
  background: var(--bg-card);
  display: flex;
  flex-direction: column;
  height: 100%;
}
.promo-video-placeholder {
  position: relative;
  flex: 1;
  min-height: 240px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  cursor: pointer;
  overflow: hidden;
  padding: 24px;
}
.promo-video-bg {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, #14120e 0%, #1e293b 50%, #1a1508 100%);
  z-index: 0;
}
[data-theme="light"] .promo-video-bg {
  background: linear-gradient(135deg, #1e3a8a 0%, #334155 50%, #3d3518 100%);
}
.promo-video-wave {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(
      ellipse 80% 50% at 50% 110%,
      rgba(var(--primary-rgb), 0.25) 0%,
      transparent 70%
    ),
    radial-gradient(
      ellipse 40% 30% at 80% 20%,
      rgba(59, 130, 246, 0.15) 0%,
      transparent 60%
    );
}
.promo-play-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(var(--primary-rgb), 0.9);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  box-shadow:
    0 0 0 12px rgba(var(--primary-rgb), 0.15),
    0 4px 24px rgba(var(--primary-rgb), 0.4);
  transition:
    transform 0.2s,
    background 0.2s;
  padding-left: 4px;
}
.promo-play-btn:hover {
  transform: translate(-50%, -50%) scale(1.1);
  background: var(--primary);
}
.promo-video-meta {
  position: relative;
  z-index: 2;
  text-align: center;
  pointer-events: none;
}
.promo-video-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--primary);
  background: rgba(var(--primary-rgb), 0.12);
  border: 1px solid rgba(var(--primary-rgb), 0.3);
  border-radius: 999px;
  padding: 3px 10px;
  margin-bottom: 8px;
}
.promo-video-title {
  color: #fff;
  font-weight: 700;
  font-size: 1rem;
  margin: 0 0 4px;
}
.promo-video-sub {
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.72rem;
  margin: 0;
}
.promo-video-player {
  position: relative;
  background: #000;
  overflow: visible;
  width: 100%;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.promo-video-player--autoplay {
  border-radius: 0;
}
.promo-video-el {
  width: 100%;
  max-width: 100%;
  height: auto;
  max-height: min(70vh, 560px);
  display: block;
  background: #000;
  object-fit: contain;
  object-position: center;
  flex-shrink: 0;
}
/* Badge PUB */
.promo-video-live-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: #fff;
  background: rgba(220, 50, 50, 0.85);
  border-radius: 4px;
  padding: 3px 8px;
  backdrop-filter: blur(4px);
  pointer-events: none;
}
.promo-video-live-badge svg {
  animation: livePulse 1.2s ease-in-out infinite;
}
/* Barre de contrôles toujours visible sous la vidéo */
.promo-video-controls {
  position: relative;
  z-index: 6;
  width: 100%;
  max-width: 100%;
  background: linear-gradient(180deg, #0f172a 0%, #111827 100%);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding: 8px 10px;
  box-sizing: border-box;
}
.promo-video-controls-row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: nowrap;
  width: 100%;
  min-width: 0;
}
.promo-video-ctrl-btn {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 1px;
  transition: background 0.15s, border-color 0.15s;
  padding: 0;
  position: relative;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
/* Un seul pictogramme visible selon l'état du bouton */
.promo-video-ctrl-btn .promo-video-icon {
  display: none !important;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}
.promo-video-ctrl-btn[data-state="paused"] .promo-video-icon--play,
.promo-video-ctrl-btn[data-state="playing"] .promo-video-icon--pause,
.promo-video-ctrl-btn[data-state="muted"] .promo-video-icon--muted,
.promo-video-ctrl-btn[data-state="unmuted"] .promo-video-icon--unmuted {
  display: block !important;
}
.promo-video-ctrl-skip {
  position: absolute;
  right: 2px;
  bottom: 1px;
  font-size: 0.55rem;
  font-weight: 800;
  line-height: 1;
  color: rgba(255, 255, 255, 0.85);
  pointer-events: none;
}
.promo-video-ctrl-btn:hover {
  background: rgba(255, 255, 255, 0.18);
  border-color: rgba(255, 255, 255, 0.35);
}
.promo-video-ctrl-btn--play {
  width: 42px;
  height: 42px;
  border-radius: 999px;
  background: rgba(var(--primary-rgb), 0.95);
  border-color: transparent;
  color: #0f172a;
}
.promo-video-ctrl-btn--play:hover {
  background: var(--primary);
  color: #0f172a;
}
.promo-video-progress-wrap {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 0 4px;
}
.promo-video-progress {
  width: 100%;
  height: 8px;
  accent-color: var(--primary, #fdd835);
  cursor: pointer;
  margin: 0;
}
.promo-video-time {
  font-size: 0.68rem;
  color: rgba(255, 255, 255, 0.65);
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.promo-video-player .promo-rotation-controls {
  top: 10px;
  bottom: auto;
  left: 8px;
  right: 8px;
  z-index: 8;
}
@media (max-width: 900px) {
  .promo-video-el {
    max-height: min(60vh, 480px);
  }
}
@media (max-width: 640px) {
  .promo-slot--video .promo-slot-inner--video {
    min-width: 0;
  }
  .promo-video-el {
    max-height: min(50vh, 360px);
  }
  .promo-video-controls {
    padding: 10px 8px 12px;
  }
  .promo-video-controls-row {
    display: grid;
    grid-template-columns: auto auto auto 1fr auto;
    grid-template-areas:
      "progress progress progress progress progress"
      "rew play fwd mute fs";
    gap: 8px 6px;
    align-items: center;
  }
  #promo-video-rewind {
    grid-area: rew;
  }
  #promo-video-playpause {
    grid-area: play;
    justify-self: center;
  }
  #promo-video-forward {
    grid-area: fwd;
  }
  .promo-video-progress-wrap {
    grid-area: progress;
    padding: 0;
    min-width: 0;
  }
  #promo-video-mute {
    grid-area: mute;
    justify-self: end;
  }
  #promo-video-fullscreen {
    grid-area: fs;
  }
  .promo-video-ctrl-btn {
    width: 40px;
    height: 40px;
  }
  .promo-video-ctrl-btn--play {
    width: 48px;
    height: 48px;
  }
  .promo-video-ctrl-btn .promo-video-icon {
    width: 18px;
    height: 18px;
  }
  .promo-video-progress {
    height: 10px;
  }
  .promo-video-time {
    font-size: 0.72rem;
    text-align: center;
  }
  .promo-video-live-badge {
    top: 8px;
    left: 8px;
    font-size: 0.6rem;
    padding: 2px 6px;
  }
  .promo-video-player .promo-rotation-controls {
    top: 8px;
  }
}
@media (max-width: 380px) {
  .promo-video-controls-row {
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    justify-items: center;
  }
  .promo-video-ctrl-btn {
    width: 36px;
    height: 36px;
  }
  .promo-video-ctrl-btn--play {
    width: 44px;
    height: 44px;
  }
  .promo-video-el {
    max-height: min(45vh, 280px);
  }
}
@keyframes livePulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.3;
  }
}
.promo-slot-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-top: 1px solid var(--border);
  background: var(--bg-card);
}

/* ── Colonne slots partenaires ── */
.promo-partners-col {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.promo-slot--partner .promo-slot-inner--partner {
  border-radius: var(--radius);
  padding: 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  border: 1.5px dashed var(--border);
  background: var(--bg-card);
  transition:
    border-color 0.2s,
    box-shadow 0.2s;
  cursor: default;
  flex: 1;
}
.promo-slot--partner .promo-slot-inner--partner:hover {
  border-color: var(--primary);
  border-style: solid;
  box-shadow: 0 2px 12px rgba(var(--primary-rgb), 0.1);
}
.promo-slot-inner--partner-1 {
  border-color: rgba(var(--primary-rgb), 0.3);
}
.promo-slot-inner--partner-2 {
  border-color: rgba(59, 130, 246, 0.3);
}
.promo-slot-inner--partner-3 {
  border-color: rgba(168, 85, 247, 0.3);
}
.promo-partner-icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: rgba(var(--primary-rgb), 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
}
.promo-slot-inner--partner-2 .promo-partner-icon {
  background: rgba(59, 130, 246, 0.08);
}
.promo-slot-inner--partner-3 .promo-partner-icon {
  background: rgba(168, 85, 247, 0.08);
}
.promo-partner-body {
  flex: 1;
  min-width: 0;
}
.promo-partner-body .promo-slot-label {
  font-size: 0.82rem;
}
.promo-partner-body .promo-slot-size {
  font-size: 0.7rem;
}

/* ── Bannière footer strip ── */
.promo-footer-strip {
  border-radius: var(--radius);
  overflow: hidden;
}
.promo-footer-strip-inner {
  background: linear-gradient(
    135deg,
    rgba(var(--primary-rgb), 0.08) 0%,
    rgba(59, 130, 246, 0.06) 100%
  );
  border: 1px solid rgba(var(--primary-rgb), 0.2);
  border-radius: var(--radius);
  padding: 18px 24px;
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
[data-theme="dark"] .promo-footer-strip-inner {
  background: linear-gradient(
    135deg,
    rgba(var(--primary-rgb), 0.1) 0%,
    rgba(59, 130, 246, 0.08) 100%
  );
  border-color: rgba(var(--primary-rgb), 0.25);
}
.promo-footer-strip-inner > svg {
  flex-shrink: 0;
  color: var(--primary);
}
.promo-footer-strip-inner > p {
  flex: 1;
  min-width: 200px;
  font-size: 0.88rem;
  color: var(--text-base);
  margin: 0;
}

/* ── Dashboard Promo admin ── */

.promo-admin-help {
  margin: 14px 0 18px;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-card);
}
.promo-admin-help-title {
  margin: 0 0 10px;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-base);
}
.promo-admin-help-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.promo-admin-help-item {
  border: 1px dashed var(--border);
  border-radius: 10px;
  padding: 10px;
  background: var(--bg-base);
}
.promo-admin-help-item strong {
  display: block;
  margin-bottom: 4px;
  color: var(--text-base);
}
.promo-admin-help-item p {
  margin: 0;
  font-size: 0.8rem;
  color: var(--text-muted);
}
.promo-admin-help-note {
  margin: 10px 0 0;
  font-size: 0.8rem;
  color: var(--text-muted);
}
.promo-slot-map {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 18px;
}
.promo-slot-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 18px;
}
.promo-slot-tab {
  text-align: center;
  border: 1px solid var(--border);
  background: var(--bg-card);
  border-radius: 999px;
  padding: 8px 12px;
  cursor: pointer;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-base);
  transition:
    border-color 0.15s,
    background 0.15s,
    color 0.15s;
}
.promo-slot-tab:hover {
  border-color: var(--primary);
}
.promo-slot-tab.is-active {
  border-color: var(--primary);
  background: rgba(var(--primary-rgb), 0.12);
  color: var(--primary);
}
.promo-slot-map-item {
  text-align: left;
  border: 1px solid var(--border);
  background: var(--bg-card);
  border-radius: 10px;
  padding: 10px 12px;
  cursor: pointer;
  transition:
    border-color 0.15s,
    transform 0.15s,
    background 0.15s;
}
.promo-slot-map-item:hover {
  border-color: var(--primary);
  background: rgba(var(--primary-rgb), 0.06);
  transform: translateY(-1px);
}
.promo-slot-map-item strong {
  display: block;
  font-size: 0.84rem;
  color: var(--text-base);
}
.promo-slot-map-item span {
  font-size: 0.72rem;
  color: var(--text-muted);
}
.promo-slot-map-item.is-active {
  border-color: var(--primary);
  background: rgba(var(--primary-rgb), 0.12);
}
@media (max-width: 900px) {
  .promo-admin-help-grid {
    grid-template-columns: 1fr;
  }
  .promo-slot-tabs {
    flex-direction: column;
  }
  .promo-slot-map {
    grid-template-columns: 1fr 1fr;
  }
}

/* ── Zone drag & drop upload ── */
.upload-drop-zone {
  position: relative;
  border: 2px dashed var(--border);
  border-radius: var(--radius-sm);
  padding: 28px 20px;
  text-align: center;
  cursor: pointer;
  transition:
    border-color 0.2s,
    background 0.2s;
  background: var(--bg-base);
  overflow: hidden;
}
.upload-drop-zone:hover,
.upload-drop-zone.drop-zone--over {
  border-color: var(--primary);
  background: rgba(var(--primary-rgb), 0.05);
}
.upload-drop-file-input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
  width: 100%;
  height: 100%;
  z-index: 2;
}
.upload-drop-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  pointer-events: none;
  color: var(--text-muted);
}
.upload-drop-label {
  font-size: 0.88rem;
  color: var(--text-base);
  margin: 0;
}
.upload-drop-hint {
  font-size: 0.75rem;
  color: var(--text-muted);
  margin: 0;
}
.upload-drop-progress {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  font-size: 0.8rem;
  color: var(--text-muted);
}
.upload-progress-bar {
  width: 0%;
  height: 4px;
  background: var(--primary);
  border-radius: 2px;
  transition: width 0.2s;
  min-width: 200px;
}
.promo-video-preview-el {
  width: 100%;
  max-height: 200px;
  border-radius: var(--radius-sm);
  object-fit: cover;
  display: block;
  background: #000;
}

/* Champ texte + bouton copier côte à côte */
.input-copy-wrap {
  display: flex;
  align-items: stretch;
  gap: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--bg-card);
  transition: border-color 0.18s;
}
.input-copy-wrap:focus-within {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.12);
}
.input-copy-wrap .form-control {
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  flex: 1;
  background: transparent;
}
.input-copy-btn {
  flex-shrink: 0;
  border: none !important;
  border-left: 1px solid var(--border) !important;
  border-radius: 0 !important;
  padding: 0 12px;
  color: var(--text-muted);
  background: transparent;
  transition:
    background 0.15s,
    color 0.15s;
}
.input-copy-btn:hover {
  background: rgba(var(--primary-rgb), 0.08);
  color: var(--primary);
}

.promo-admin-layout {
  display: grid;
  grid-template-columns: 400px 1fr;
  gap: 28px;
  align-items: start;
  margin-top: 20px;
}
@media (max-width: 900px) {
  .promo-admin-layout {
    grid-template-columns: 1fr;
  }
}
.promo-admin-list-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}
.badge-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--primary);
  color: var(--on-primary);
  font-size: 0.72rem;
  font-weight: 700;
}
.promo-slots-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.promo-slot-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  border-radius: var(--radius-sm);
  background: var(--bg-card);
  border: 1px solid var(--border);
  flex-wrap: wrap;
}
.promo-slot-row-info {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  min-width: 0;
}
.promo-row-thumb {
  width: 52px;
  height: 36px;
  object-fit: cover;
  border-radius: 5px;
  flex-shrink: 0;
}
.promo-row-thumb-placeholder {
  width: 52px;
  height: 36px;
  border-radius: 5px;
  background: var(--bg-base);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  flex-shrink: 0;
}
.promo-row-title {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text-base);
  margin: 0 0 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.promo-row-meta {
  font-size: 0.75rem;
  color: var(--text-muted);
  margin: 0;
}
.promo-slot-row-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.promo-status-badge {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 3px 8px;
  border-radius: 999px;
}
.badge-active {
  background: rgba(var(--primary-rgb), 0.1);
  color: var(--primary);
  border: 1px solid rgba(var(--primary-rgb), 0.3);
}
[data-theme="dark"] .badge-active {
  background: rgba(var(--primary-rgb), 0.15);
  color: #4ade80;
}
.badge-inactive {
  background: rgba(100, 100, 100, 0.1);
  color: var(--text-muted);
  border: 1px solid var(--border);
}
.promo-img-preview {
  margin-top: 8px;
}
.promo-extra-images-preview {
  margin-top: 8px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 10px;
}
.promo-extra-thumb-wrap {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 6px;
  background: var(--bg-base);
}
.promo-extra-thumb {
  width: 100%;
  height: 90px;
  object-fit: cover;
  border-radius: 6px;
  display: block;
  margin-bottom: 6px;
}
.btn-danger {
  background: rgba(180, 35, 24, 0.1);
  color: #b42318;
  border: 1px solid rgba(180, 35, 24, 0.25);
}
.btn-danger:hover {
  background: #b42318;
  color: #fff;
}
[data-theme="dark"] .btn-danger {
  background: rgba(220, 60, 50, 0.12);
  color: #f87171;
  border-color: rgba(220, 60, 50, 0.3);
}
[data-theme="dark"] .btn-danger:hover {
  background: #b42318;
  color: #fff;
}

/* ── Events list page (events.html) — fond cohérent ── */
.page-events .events-list {
  background: #f8fafc;
}
[data-theme="dark"] .page-events .events-list {
  background: #14120e;
}

/* ── Section événements similaires ── */
.similar-events-section {
  margin: 0 0 40px;
  padding: 0;
}
.similar-events-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.similar-events-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--text-base);
  margin: 0;
}
.similar-events-icon {
  display: flex;
  align-items: center;
  color: var(--primary);
}
.similar-events-tag {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(var(--primary-rgb), 0.1);
  color: var(--primary);
  border: 1px solid rgba(var(--primary-rgb), 0.3);
}
[data-theme="dark"] .similar-events-tag {
  background: rgba(var(--primary-rgb), 0.15);
  color: #4ade80;
  border-color: rgba(var(--primary-rgb), 0.4);
}
.similar-events-scroll {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 12px;
  scrollbar-width: thin;
  scrollbar-color: rgba(var(--primary-rgb), 0.3) transparent;
}
.similar-events-scroll::-webkit-scrollbar {
  height: 4px;
}
.similar-events-scroll::-webkit-scrollbar-track {
  background: transparent;
}
.similar-events-scroll::-webkit-scrollbar-thumb {
  background: rgba(var(--primary-rgb), 0.3);
  border-radius: 2px;
}
/* Cards dans la rangée similaire : largeur fixe + snap */
.similar-events-scroll .similar-event-card {
  flex: 0 0 260px;
  min-width: 260px;
  max-width: 260px;
  scroll-snap-align: start;
}
/* Image un peu plus petite pour les cards similaires */
.similar-events-scroll .similar-event-card .event-card-image {
  height: 145px;
}
.page-events .section-title {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3vw, 2.2rem);
}

/* ── Dashboard refresh ── */
.dashboard-title {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -0.01em;
}
.dashboard-tabs {
  border-bottom: none;
}

/* ── Account tabs refresh ── */
.account-tab-btn {
  font-family: var(--font);
}
.account-tab-btn.is-active {
  color: var(--primary);
  border-bottom-color: var(--primary);
}

/* ── Mes événements page ── */
.page-enter .hero--compact + .section {
  padding-top: 40px;
}

/* ── Scanner page refresh ── */
.scanner-page .navbar {
  background: #12100c;
  border-bottom: 1px solid rgba(var(--primary-rgb), 0.2);
}

/* ── Events.html grid refresh ── */
.events-list .events-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
@media (max-width: 1023px) {
  .events-list .events-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 599px) {
  .events-list .events-grid {
    grid-template-columns: 1fr;
  }
}
.events-list .event-card {
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(var(--primary-rgb), 0.08);
}
[data-theme="dark"] .events-list .event-card {
  background: rgba(10, 20, 14, 0.7);
  border-color: rgba(255, 255, 255, 0.07);
}

/* ── Category filter en dehors de events-popular aussi ── */
.events-list .category-filter {
  margin: 0 0 28px;
}

.events-list .price-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 16px;
}

/* ── Search input v2 ── */
.events-filters-v2 {
  margin-bottom: 16px;
}
.search-input-v2 {
  width: 100%;
  max-width: 480px;
  padding: 12px 20px;
  border-radius: 100px;
  border: 1.5px solid #e2e8f0;
  font-size: 0.95rem;
  font-family: var(--font);
  background: rgba(255, 255, 255, 0.9);
  transition:
    border-color 0.2s,
    box-shadow 0.2s;
  color: var(--neutral-dark);
}
.search-input-v2:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.12);
}
[data-theme="dark"] .search-input-v2 {
  background: rgba(10, 20, 14, 0.6);
  border-color: rgba(255, 255, 255, 0.15);
  color: #f1f5f9;
}
[data-theme="dark"] .search-input-v2::placeholder {
  color: rgba(255, 255, 255, 0.35);
}

/* ── Mes événements section principale ── */
.mes-evenements-section {
  background: #f8fafc;
  padding: 48px 0 80px;
}
[data-theme="dark"] .mes-evenements-section {
  background: #14120e;
}

/* ── Dashboard section fond cohérent ── */
.dashboard-layout {
  background: #f8fafc;
  min-height: calc(100vh - 220px);
}
[data-theme="dark"] .dashboard-layout {
  background: #14120e;
}

/* ── Event manage layout ── */
[data-theme="dark"] .dashboard-main {
  background: #14120e;
}

/* ── Account tabs section fond cohérent ── */
.account-tabs-section {
  background: #f8fafc;
  padding: 48px 0 80px;
}
[data-theme="dark"] .account-tabs-section {
  background: #14120e;
}

/* =========================================================
   NAVBAR REDESIGN COMPLET — OVERRIDE TOTAL
   ========================================================= */

/* 1. Base navbar — toujours sombre (overlay sur hero ou fond de page) */
.navbar {
  position: fixed !important;
  top: 0;
  left: 0;
  right: 0;
  z-index: 4000;
  padding-top: var(--safe-top, 0px);
  background: rgba(6, 13, 10, 0.95) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06) !important;
  transition:
    background 0.4s ease,
    box-shadow 0.4s ease !important;
}

/* Transparent au-dessus d'un hero */
.navbar.navbar--transparent {
  background: transparent !important;
  box-shadow: none !important;
}
.navbar.navbar--scrolled {
  background: rgba(6, 13, 10, 0.96) !important;
  box-shadow: 0 1px 24px rgba(0, 0, 0, 0.4) !important;
}

/* Thème clair : barre supérieure blanche */
[data-theme="light"] .navbar {
  background: #ffffff !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08) !important;
}
[data-theme="light"] .navbar.navbar--transparent {
  background: #ffffff !important;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08) !important;
}
[data-theme="light"] .navbar.navbar--scrolled {
  background: #ffffff !important;
  box-shadow: 0 2px 16px rgba(0, 0, 0, 0.08) !important;
}
[data-theme="light"] .navbar .navbar-toggle {
  background: rgba(0, 0, 0, 0.05) !important;
  color: #0f172a !important;
  border-color: rgba(0, 0, 0, 0.12) !important;
}
[data-theme="light"] .navbar .navbar-toggle:hover {
  background: rgba(0, 0, 0, 0.08) !important;
  border-color: rgba(0, 0, 0, 0.2) !important;
  color: var(--primary) !important;
}
[data-theme="light"] .navbar .navbar-toggle span {
  background: currentColor !important;
}

/* 2. Inner layout */
.navbar-inner {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 clamp(16px, 4vw, 40px);
  height: 68px;
  flex-wrap: nowrap !important;
  gap: 16px;
}
@media (max-width: 767px) {
  .navbar-inner {
    height: 60px;
  }
}

/* 3. Logo (texte ou image sans classes tosala — nav injecte tosala-logo-*) */
.navbar-logo {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  text-decoration: none !important;
  flex-shrink: 0;
}
.navbar-logo img:not(.tosala-logo-light):not(.tosala-logo-dark) {
  height: 90px !important;
  width: auto !important;
  object-fit: contain;
  border-radius: 0;
}
@media (max-width: 767px) {
  .navbar-logo img:not(.tosala-logo-light):not(.tosala-logo-dark) {
    height: 64px !important;
    width: auto !important;
  }
}
.navbar-logo-text {
  font-family: var(--font-display, "Helvetica", sans-serif) !important;
  font-size: 1.1rem !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  white-space: nowrap;
}
.navbar-logo .logo-white {
  color: #fff !important;
}
.navbar-logo .logo-green {
  color: var(--primary) !important;
}

/* 4. Burger (mobile) */
.navbar-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  background: rgba(255, 255, 255, 0.07) !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  border-radius: 10px !important;
  cursor: pointer;
  flex-shrink: 0;
  transition:
    background 0.2s,
    border-color 0.2s;
  padding: 0;
  position: relative;
  z-index: 3002; /* au-dessus du menu (3001) pour rester cliquable */
}
.navbar-toggle:hover {
  background: rgba(var(--primary-rgb), 0.15) !important;
  border-color: var(--primary) !important;
}
.navbar-toggle span {
  display: block;
  height: 2px;
  width: 20px;
  background: #fff !important;
  border-radius: 2px;
  transition:
    transform 0.3s,
    opacity 0.3s;
}
.navbar-toggle[aria-expanded="true"] {
  background: rgba(var(--primary-rgb), 0.2) !important;
  border-color: var(--primary) !important;
}
.navbar-toggle[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.navbar-toggle[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}
.navbar-toggle[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}
@media (max-width: 1023px) {
  .navbar-toggle {
    display: flex;
  }
}

/* 5. Menu desktop */
.navbar-menu {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-left: auto;
}
@media (min-width: 1024px) {
  .navbar-menu {
    flex: 1;
    justify-content: flex-end;
    flex-wrap: nowrap;
    gap: 0 2px;
    align-items: center;
  }
  .navbar-menu .nav-mon-espace:not(.hidden),
  .navbar-menu .nav-admin-menu:not(.hidden) {
    display: flex !important;
  }
}

/* ── Menu déroulant Mon espace ── */
.nav-dropdown {
  position: relative;
  display: flex;
  align-items: center;
}
.nav-dropdown-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  background: transparent;
  border: none;
  font-family: inherit;
  white-space: nowrap;
}
.nav-dropdown-chevron {
  flex-shrink: 0;
  transition: transform 0.2s ease;
  opacity: 0.75;
}
.nav-dropdown.is-open .nav-dropdown-chevron {
  transform: rotate(180deg);
}
.nav-dropdown-panel {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  min-width: 12.5rem;
  padding: 6px;
  border-radius: 12px;
  background: rgba(12, 18, 14, 0.98);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
  z-index: 4100;
}
[data-theme="light"] .nav-dropdown-panel {
  background: #ffffff;
  border-color: rgba(15, 23, 42, 0.12);
  box-shadow: 0 12px 40px rgba(15, 23, 42, 0.14);
}
.nav-dropdown.is-open .nav-dropdown-panel {
  display: block;
}
.nav-dropdown:not(.is-open) .nav-dropdown-panel,
.nav-dropdown-panel[hidden] {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}
.nav-dropdown:not(.is-open) .nav-dropdown-panel .nav-dropdown-item {
  display: none !important;
}
.nav-dropdown.is-open .nav-dropdown-panel .nav-dropdown-item:not(.hidden) {
  display: flex !important;
}
.navbar-menu > a[data-event-manage-section],
.navbar-menu > a.nav-dashboard-section {
  display: none !important;
}
.nav-dropdown-item {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 0.85rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.88) !important;
  text-decoration: none !important;
  transition: background 0.15s, color 0.15s;
  box-sizing: border-box;
}
.nav-dropdown-item::after {
  display: none !important;
}
.nav-dropdown-item:hover,
.nav-dropdown-item.active {
  background: rgba(var(--primary-rgb), 0.14) !important;
  color: #fff !important;
}
[data-theme="light"] .nav-dropdown-item {
  color: rgba(15, 23, 42, 0.88) !important;
}
[data-theme="light"] .nav-dropdown-item:hover,
[data-theme="light"] .nav-dropdown-item.active {
  color: var(--primary) !important;
  background: rgba(var(--primary-rgb), 0.1) !important;
}

/* Desktop : sous-menus Mon espace / Administration bien visibles */
@media (min-width: 1024px) {
  .navbar,
  .navbar-inner,
  .navbar-menu {
    overflow: visible;
  }
  .navbar-menu .nav-dropdown {
    overflow: visible;
  }
  .navbar-menu .nav-dropdown.is-open {
    z-index: 4150;
  }
  .navbar-menu .nav-dropdown.is-open > .nav-dropdown-panel {
    display: block !important;
    visibility: visible !important;
    pointer-events: auto !important;
    opacity: 1 !important;
  }
  .navbar-menu .nav-mon-espace .nav-dropdown-panel,
  .navbar-menu .nav-admin-menu .nav-dropdown-panel {
    left: auto;
    right: 0;
    transform: none;
    min-width: 13.5rem;
  }
  .navbar-menu .nav-dropdown.is-open > .nav-dropdown-panel .nav-dropdown-item:not(.hidden) {
    display: flex !important;
    visibility: visible !important;
    pointer-events: auto !important;
    opacity: 1 !important;
  }
  .navbar-menu .nav-dropdown.is-open > .nav-dropdown-panel .nav-dropdown-item.hidden {
    display: none !important;
  }
}

/* 6. Liens nav — TOUJOURS blancs (navbar est toujours sombre) */
.nav-link,
.nav-link.nav-dashboard-section,
.nav-link.nav-admin,
.nav-link.nav-create-event {
  color: rgba(255, 255, 255, 0.8) !important;
  font-size: 0.85rem !important;
  font-weight: 500 !important;
  padding: 8px 12px !important;
  border-radius: 6px !important;
  text-decoration: none !important;
  position: relative;
  transition: color 0.2s !important;
  transform: none !important;
  box-shadow: none !important;
  border: none !important;
}
.nav-link::after {
  content: "" !important;
  position: absolute !important;
  bottom: 2px !important;
  left: 12px !important;
  right: 12px !important;
  height: 2px !important;
  background: var(--primary) !important;
  border-radius: 1px !important;
  transform: scaleX(0) !important;
  transform-origin: left !important;
  transition: transform 0.25s ease !important;
}
.nav-link:hover {
  color: #fff !important;
  transform: none !important;
}
.nav-link:hover::after {
  transform: scaleX(1) !important;
}
.nav-link.active {
  color: var(--primary) !important;
  font-weight: 600 !important;
  background: rgba(var(--primary-rgb), 0.1) !important;
}
.nav-link.active::after {
  transform: scaleX(1) !important;
}

/* Thème clair : liens et auth lisibles sur fond blanc */
[data-theme="light"] .navbar .nav-link,
[data-theme="light"] .navbar .nav-link.nav-dashboard-section,
[data-theme="light"] .navbar .nav-link.nav-admin,
[data-theme="light"] .navbar .nav-link.nav-create-event {
  color: rgba(15, 23, 42, 0.82) !important;
}
[data-theme="light"] .navbar .nav-link:hover {
  color: #0f172a !important;
}
[data-theme="light"] .navbar .nav-link.active {
  color: var(--primary) !important;
  background: rgba(var(--primary-rgb), 0.1) !important;
}
[data-theme="light"] .navbar .nav-user-link {
  color: rgba(15, 23, 42, 0.88) !important;
}
[data-theme="light"] .navbar .nav-user-link:hover {
  color: #0f172a !important;
  background: rgba(0, 0, 0, 0.05) !important;
}
[data-theme="light"] .navbar .nav-user-link--icon {
  border-color: rgba(15, 23, 42, 0.18) !important;
}
[data-theme="light"] .navbar .nav-user-link--icon:hover {
  border-color: rgba(15, 23, 42, 0.35) !important;
  background: rgba(0, 0, 0, 0.04) !important;
}
[data-theme="light"] .navbar .nav-auth .btn-logout {
  color: rgba(15, 23, 42, 0.78) !important;
  border-color: rgba(15, 23, 42, 0.2) !important;
}
[data-theme="light"] .navbar .nav-auth .btn-logout:hover {
  color: #0f172a !important;
  border-color: rgba(15, 23, 42, 0.35) !important;
  background: rgba(0, 0, 0, 0.05) !important;
}
[data-theme="light"] .navbar .theme-toggle-btn {
  border-color: rgba(15, 23, 42, 0.2) !important;
  color: rgba(15, 23, 42, 0.85) !important;
  background: rgba(0, 0, 0, 0.03) !important;
}
[data-theme="light"] .navbar .theme-toggle-btn:hover {
  border-color: var(--primary) !important;
  color: var(--primary) !important;
  background: rgba(var(--primary-rgb), 0.1) !important;
}

/* 7. Boutons auth */
.nav-auth {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  gap: 8px;
  margin-left: 8px;
  min-width: 0;
}

/* Connexion — pill vert outline */
.navbar .nav-auth .btn-ghost[data-auth="login"],
.nav-auth .btn-ghost[data-auth="login"] {
  color: var(--primary) !important;
  border: 1.5px solid var(--primary) !important;
  background: transparent !important;
  border-radius: 100px !important;
  padding: 8px 20px !important;
  font-size: 0.85rem !important;
  font-weight: 600 !important;
  transition:
    background 0.2s,
    color 0.2s !important;
}
.navbar .nav-auth .btn-ghost[data-auth="login"]:hover,
.nav-auth .btn-ghost[data-auth="login"]:hover {
  background: var(--primary) !important;
  color: var(--on-primary) !important;
  border-color: var(--primary) !important;
}

/* Inscription — pill accent */
.navbar .nav-auth .btn-primary[data-auth="signup"],
.nav-auth .btn-primary[data-auth="signup"] {
  background: var(--primary) !important;
  color: var(--on-primary) !important;
  border-radius: 100px !important;
  padding: 8px 20px !important;
  font-size: 0.85rem !important;
  font-weight: 600 !important;
  border: none !important;
  box-shadow: none !important;
}
.navbar .nav-auth .btn-primary[data-auth="signup"]:hover,
.nav-auth .btn-primary[data-auth="signup"]:hover {
  background: var(--primary-dark) !important;
  box-shadow: var(--glow-green) !important;
  transform: translateY(-1px) !important;
}

/* ── Bouton Déconnexion (icône seule) ── */
.navbar .nav-auth .btn-logout,
.nav-auth .btn-logout {
  color: rgba(255, 255, 255, 0.75) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.22) !important;
  background: transparent !important;
  border-radius: 100px !important;
  padding: 7px 16px !important;
  font-size: 0.82rem !important;
  font-weight: 500 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  outline: none !important;
  box-shadow: none !important;
  flex-shrink: 0 !important;
}
.navbar .nav-auth .btn-logout--icon,
.nav-auth .btn-logout--icon {
  padding: 0 !important;
  min-width: 44px !important;
  min-height: 44px !important;
  width: 44px !important;
  height: 44px !important;
  border-radius: 12px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.navbar .nav-auth .btn-logout--icon .btn-logout-svg,
.nav-auth .btn-logout--icon .btn-logout-svg {
  display: block !important;
  flex-shrink: 0 !important;
}
.navbar .nav-auth .btn-logout:hover,
.nav-auth .btn-logout:hover {
  color: #fff !important;
  border-color: rgba(255, 255, 255, 0.45) !important;
  background: rgba(255, 255, 255, 0.08) !important;
}
.navbar .nav-auth .btn-logout:focus-visible,
.nav-auth .btn-logout:focus-visible {
  outline: 2px solid var(--primary) !important;
  outline-offset: 3px !important;
  box-shadow: none !important;
}

/* Éléments visibles uniquement dans le menu mobile (masqués sur desktop) */
.nav-mobile-only,
.nav-welcome,
.btn-logout-mobile {
  display: none !important;
}

/* ── Groupe profil + déconnexion (toujours sur une ligne en desktop) ── */
.nav-auth-cluster {
  display: inline-flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 8px !important;
  min-width: 0 !important;
  max-width: 100% !important;
}

/* ── Nom utilisateur (nav-user-link) ── */
.nav-user-link {
  display: inline-flex !important;
  align-items: center !important;
  color: rgba(255, 255, 255, 0.85) !important;
  font-weight: 500 !important;
  font-size: 0.85rem !important;
  padding: 6px 10px !important;
  border-radius: 8px !important;
  text-decoration: none !important;
  border: none !important;
  background: none !important;
  cursor: pointer !important;
  max-width: min(12rem, 36vw) !important;
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  flex: 0 1 auto !important;
}
.nav-user-link:hover {
  color: #fff !important;
  background: rgba(255, 255, 255, 0.08) !important;
}

/* Lien profil — icône personne seule */
.nav-user-link--icon {
  max-width: none !important;
  padding: 0 !important;
  min-width: 44px !important;
  min-height: 44px !important;
  width: 44px !important;
  height: 44px !important;
  border-radius: 12px !important;
  border: 1.5px solid rgba(255, 255, 255, 0.22) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}
.nav-user-link--icon .nav-user-svg {
  display: block !important;
  flex-shrink: 0 !important;
}
.nav-user-link--icon:hover {
  border-color: rgba(255, 255, 255, 0.45) !important;
  background: rgba(255, 255, 255, 0.08) !important;
}
.nav-user-link--icon:focus-visible {
  outline: 2px solid var(--primary) !important;
  outline-offset: 3px !important;
}

/* 8. Menu mobile — slide-in sombre */
@media (max-width: 1023px) {
  .navbar-menu {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    flex-wrap: nowrap !important;
    margin-left: 0 !important;
    flex: none !important;
    box-sizing: border-box !important;
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    left: auto !important;
    width: min(300px, 85vw) !important;
    max-width: 100% !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
    padding: calc(68px + env(safe-area-inset-top, 0px)) 16px
      max(28px, env(safe-area-inset-bottom, 0px)) !important;
    background: #14120e !important;
    border-left: 1px solid rgba(255, 255, 255, 0.08) !important;
    gap: 6px !important;
    transform: translateX(100%) !important;
    transition: transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
    box-shadow: -8px 0 40px rgba(0, 0, 0, 0.5) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    z-index: 3001 !important; /* au-dessus du backdrop (3000) et de la bottom-nav (1050) */
    will-change: transform !important;
  }
  .navbar-menu.is-open {
    transform: translateX(0) !important;
  }

  /* ── Règle prioritaire : tout élément .hidden dans le menu reste invisible ── */
  /* Spécificité 4 classes pour battre les règles display:flex à 3 classes */
  .navbar-menu .nav-link.nav-admin.hidden,
  .navbar-menu .nav-link.nav-dashboard-section.hidden,
  .navbar-menu .nav-link.nav-when-connected.hidden,
  .navbar-menu .nav-link.nav-create-event.hidden,
  /* Spécificité 3 classes pour les autres */
  .navbar-menu .nav-when-connected.hidden,
  .navbar-menu .nav-dashboard-section.hidden,
  .navbar-menu .nav-admin.hidden,
  .navbar-menu .nav-section-label.hidden,
  .navbar-menu .nav-link.hidden,
  .navbar-menu .hidden {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  /* ── Masquer Accueil (déjà dans la barre du bas) ; Créer un événement reste dans le menu si connecté ── */
  .navbar-menu .nav-link[data-nav-page="index"] {
    display: none !important;
  }

  /* ── Bandeau de bienvenue (mobile uniquement) ── */
  .nav-welcome {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 12px 14px !important;
    margin-bottom: 4px !important;
    border-radius: 12px !important;
    background: rgba(var(--primary-rgb), 0.08) !important;
    border: 1px solid rgba(var(--primary-rgb), 0.18) !important;
  }
  .nav-welcome-icon svg {
    color: var(--primary) !important;
  }
  .nav-welcome-name {
    font-weight: 600 !important;
    font-size: 0.95rem !important;
    /* Texte toujours clair : le panneau mobile est sombre quel que soit le thème */
    color: rgba(255, 255, 255, 0.95) !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    flex: 1 !important;
    min-width: 0 !important;
  }

  /* ── Bouton déconnexion étendu (mobile uniquement) ── */
  .btn-logout-mobile {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    width: 100% !important;
    min-height: 48px !important;
    border-radius: 12px !important;
    font-size: 0.94rem !important;
    font-weight: 500 !important;
    background: transparent !important;
    color: #e53e3e !important;
    border: 1.5px solid rgba(229, 62, 62, 0.35) !important;
    cursor: pointer !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
  }
  .btn-logout-mobile:hover {
    background: rgba(229, 62, 62, 0.08) !important;
    border-color: #e53e3e !important;
  }
  .btn-logout-mobile svg {
    color: #e53e3e !important;
    flex-shrink: 0 !important;
  }

  /* ── Masquer le cluster d'icônes desktop dans le menu mobile ── */
  .navbar-menu .nav-auth-cluster {
    display: none !important;
  }

  .navbar-menu .nav-link,
  .navbar-menu .nav-link.nav-dashboard-section,
  .navbar-menu .nav-link.nav-admin {
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 48px !important;
    padding: 12px 16px !important;
    box-sizing: border-box !important;
    color: rgba(255, 255, 255, 0.85) !important;
    border-radius: 10px !important;
    font-size: 0.95rem !important;
    font-weight: 500 !important;
    flex-shrink: 0 !important;
  }
  .navbar-menu .nav-link:hover,
  .navbar-menu .nav-link.active {
    background: rgba(var(--primary-rgb), 0.1) !important;
    color: #fff !important;
  }
  .navbar-menu .nav-link::after {
    display: none !important;
  }
  .navbar-menu .nav-link.active::after {
    display: none !important;
  }
  .navbar-menu .nav-link.active {
    color: var(--primary) !important;
    background: rgba(var(--primary-rgb), 0.12) !important;
  }
  .navbar-menu .nav-when-connected:not(.hidden),
  .navbar-menu .nav-admin:not(.hidden) {
    display: flex !important;
    width: 100% !important;
  }
  .navbar-menu .nav-dashboard-section:not(.nav-dropdown-item) {
    display: none !important;
  }

  .navbar-menu .nav-mon-espace:not(.hidden),
  .navbar-menu .nav-admin-menu:not(.hidden) {
    flex-direction: column !important;
    align-items: stretch !important;
    width: 100% !important;
    gap: 0 !important;
    border-radius: 12px !important;
    background: rgba(255, 255, 255, 0.04) !important;
    margin-bottom: 2px !important;
    overflow: visible !important;
    flex-shrink: 0 !important;
  }
  .navbar-menu .nav-mon-espace.is-open,
  .navbar-menu .nav-admin-menu.is-open {
    background: rgba(var(--primary-rgb), 0.1) !important;
    border: 1px solid rgba(var(--primary-rgb), 0.22) !important;
  }
  .navbar-menu .nav-dropdown {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    width: 100% !important;
    position: relative !important;
    overflow: visible !important;
    flex-shrink: 0 !important;
  }
  .navbar-menu .nav-dropdown-toggle {
    width: 100% !important;
    justify-content: space-between !important;
    min-height: 48px !important;
    padding: 12px 16px !important;
    border-radius: 0 !important;
    color: rgba(255, 255, 255, 0.92) !important;
    font-size: 0.95rem !important;
    font-weight: 600 !important;
    text-align: left !important;
  }
  .navbar-menu .nav-dropdown-toggle.is-active,
  .navbar-menu .nav-dropdown-toggle.active {
    color: var(--primary) !important;
    background: rgba(var(--primary-rgb), 0.08) !important;
  }
  .navbar-menu .nav-dropdown-toggle::after {
    display: none !important;
  }
  .navbar-menu .nav-dropdown-panel {
    position: static !important;
    transform: none !important;
    left: auto !important;
    top: auto !important;
    display: none !important;
    min-width: 0 !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 4px 8px 10px !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
    visibility: hidden !important;
    pointer-events: none !important;
    height: 0 !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: hidden !important;
    opacity: 0 !important;
  }
  .navbar-menu .nav-dropdown-panel[hidden] {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
    height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    overflow: hidden !important;
    opacity: 0 !important;
  }
  .navbar-menu .nav-dropdown.is-open > .nav-dropdown-panel {
    display: block !important;
    visibility: visible !important;
    pointer-events: auto !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
    opacity: 1 !important;
    padding: 4px 8px 10px !important;
    border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
  }
  .navbar-menu .nav-dropdown.is-open > .nav-dropdown-panel .nav-dropdown-item {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    align-items: center !important;
    width: 100% !important;
    min-height: 44px !important;
    padding: 10px 12px 10px 28px !important;
    font-size: 0.9rem !important;
    border-radius: 8px !important;
    color: rgba(255, 255, 255, 0.85) !important;
    position: relative !important;
    box-sizing: border-box !important;
    flex-shrink: 0 !important;
  }
  .navbar-menu .nav-dropdown.is-open > .nav-dropdown-panel .nav-dropdown-item::before {
    content: "" !important;
    position: absolute !important;
    left: 14px !important;
    top: 50% !important;
    width: 5px !important;
    height: 5px !important;
    margin-top: -2px !important;
    border-radius: 50% !important;
    background: rgba(var(--primary-rgb), 0.55) !important;
  }
  .navbar-menu .nav-dropdown:not(.is-open) .nav-dropdown-item {
    display: none !important;
  }
  .navbar-menu .nav-dropdown-item.active {
    color: var(--primary) !important;
    background: rgba(var(--primary-rgb), 0.14) !important;
    font-weight: 600 !important;
  }
  [data-theme="light"] .navbar-menu .nav-mon-espace:not(.hidden),
  [data-theme="light"] .navbar-menu .nav-admin-menu:not(.hidden) {
    background: rgba(0, 0, 0, 0.04) !important;
  }
  [data-theme="light"] .navbar-menu .nav-dropdown-toggle {
    color: rgba(15, 23, 42, 0.9) !important;
  }
  [data-theme="light"] .navbar-menu .nav-dropdown.is-open > .nav-dropdown-panel .nav-dropdown-item {
    color: rgba(15, 23, 42, 0.85) !important;
  }
  [data-theme="light"] .navbar-menu .nav-dropdown-panel {
    border-top-color: rgba(15, 23, 42, 0.08) !important;
  }

  /* ── OVERRIDE FINAL : .hidden bat tout — placé après toutes les règles display ── */
  .navbar-menu .nav-link.nav-admin.hidden,
  .navbar-menu .nav-link.nav-dashboard-section.hidden,
  .navbar-menu .nav-link.nav-when-connected.hidden,
  .navbar-menu .nav-when-connected.hidden,
  .navbar-menu .nav-dashboard-section.hidden,
  .navbar-menu .nav-admin.hidden,
  .navbar-menu .nav-section-label.hidden,
  .navbar-menu .nav-link.hidden,
  .navbar-menu .hidden {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  /* ── Séparateur de section dans le menu mobile ── */
  .navbar-menu .nav-section-label {
    display: block !important;
    font-size: 0.7rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.1em !important;
    color: var(--primary) !important;
    padding: 16px 14px 4px !important;
    opacity: 0.75 !important;
  }

  .navbar-menu .nav-auth {
    flex-direction: column !important;
    align-items: stretch !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-top: 16px !important;
    padding-top: 16px !important;
    border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
    gap: 10px !important;
    flex-shrink: 0 !important;
  }
  .navbar-menu .nav-auth .btn,
  .navbar-menu .nav-auth .btn-ghost,
  .navbar-menu .nav-auth .nav-user-link,
  .navbar-menu .nav-auth .theme-toggle-btn {
    width: 100% !important;
    max-width: 100% !important;
    justify-content: center !important;
    min-height: 48px !important;
    text-align: center !important;
    border-radius: 12px !important;
    box-sizing: border-box !important;
  }
  .navbar-menu .nav-auth .theme-toggle-btn {
    border: 1.5px solid rgba(255, 255, 255, 0.2) !important;
    color: rgba(255, 255, 255, 0.9) !important;
    background: rgba(255, 255, 255, 0.06) !important;
  }
  .navbar-menu .nav-auth .theme-toggle-btn .ti-label {
    display: inline !important;
  }
  .navbar-menu .nav-auth-cluster {
    flex-direction: column !important;
    align-items: stretch !important;
    width: 100% !important;
    gap: 10px !important;
  }
  .navbar-menu .nav-auth-cluster .nav-user-link:not(.nav-user-link--icon) {
    max-width: 100% !important;
    width: 100% !important;
    justify-content: center !important;
  }
  .navbar-menu .nav-auth-cluster .nav-user-link--icon {
    width: 44px !important;
    max-width: 44px !important;
    min-width: 44px !important;
    align-self: center !important;
  }
  .navbar-menu .nav-auth-cluster .btn-logout--icon {
    width: 44px !important;
    min-width: 44px !important;
    align-self: center !important;
  }
  /* Connexion en mobile : solide vert */
  .navbar-menu .nav-auth .btn-ghost[data-auth="login"] {
    color: var(--primary) !important;
    border: 1.5px solid var(--primary) !important;
    background: rgba(var(--primary-rgb), 0.08) !important;
  }

  [data-theme="light"] .navbar-menu {
    background: #ffffff !important;
    border-left-color: rgba(0, 0, 0, 0.08) !important;
    box-shadow: -8px 0 32px rgba(0, 0, 0, 0.1) !important;
  }
  [data-theme="light"] .navbar-menu .nav-link,
  [data-theme="light"] .navbar-menu .nav-link.nav-dashboard-section,
  [data-theme="light"] .navbar-menu .nav-link.nav-admin {
    color: rgba(15, 23, 42, 0.88) !important;
  }
  [data-theme="light"] .navbar-menu .nav-link:hover {
    background: rgba(var(--primary-rgb), 0.08) !important;
    color: var(--primary) !important;
  }
  [data-theme="light"] .navbar-menu .nav-link.active {
    color: var(--primary) !important;
    background: rgba(var(--primary-rgb), 0.12) !important;
  }
  [data-theme="light"] .navbar-menu .nav-auth {
    border-top-color: rgba(0, 0, 0, 0.08) !important;
  }
  [data-theme="light"] .navbar-menu .nav-auth .theme-toggle-btn {
    border-color: rgba(15, 23, 42, 0.18) !important;
    color: rgba(15, 23, 42, 0.88) !important;
    background: rgba(0, 0, 0, 0.03) !important;
  }
  [data-theme="light"] .nav-welcome-name {
    color: rgba(15, 23, 42, 0.95) !important;
  }

  /* Éléments réservés au menu mobile */
  .navbar-menu .nav-mobile-only,
  .navbar-menu .nav-welcome,
  .navbar-menu .btn-logout-mobile {
    display: flex !important;
  }

  .navbar-menu .nav-notif-wrap {
    position: relative !important;
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    margin: 4px 0 !important;
  }
  .navbar-menu .nav-notif-btn {
    width: 48px !important;
    height: 48px !important;
    border-radius: 12px !important;
    color: rgba(255, 255, 255, 0.9) !important;
  }
  .navbar-menu .nav-notif-panel {
    position: fixed !important;
    left: 16px !important;
    right: 16px !important;
    top: auto !important;
    bottom: calc(72px + env(safe-area-inset-bottom, 0px)) !important;
    width: auto !important;
    max-width: none !important;
    z-index: 4200 !important;
    display: none !important;
  }
  .navbar-menu .nav-notif-panel:not([hidden]) {
    display: block !important;
    visibility: visible !important;
    pointer-events: auto !important;
    opacity: 1 !important;
  }
  .navbar-menu .nav-notif-list,
  .navbar-menu .nav-notif-item {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .navbar-menu .nav-dropdown-toggle .nav-dropdown-chevron {
    margin-left: auto !important;
  }
  .navbar-menu .nav-admin-menu.hidden,
  .navbar-menu .nav-mon-espace.hidden {
    display: none !important;
  }
}

@media (max-width: 1023px) {
  .navbar-menu .nav-dropdown:not(.is-open) > .nav-dropdown-panel,
  .navbar-menu .nav-dropdown:not(.is-open) > .nav-dropdown-panel .nav-dropdown-item {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
  .navbar-menu .nav-dropdown.is-open > .nav-dropdown-panel .nav-dropdown-item:hover {
    background: rgba(var(--primary-rgb), 0.12) !important;
    color: #fff !important;
  }
}

/* 9. Dashboard — liens nav dans sidebar en blanc aussi */
.dashboard-sidebar .nav-link {
  color: rgba(255, 255, 255, 0.75) !important;
}
.dashboard-sidebar .nav-link:hover,
.dashboard-sidebar .nav-link.active {
  color: #fff !important;
}
.dashboard-sidebar-footer .btn {
  color: rgba(255, 255, 255, 0.7) !important;
}

/* 10. Ajout espace body pour navbar fixe */
body:not(.scanner-page) {
  padding-top: 0;
}
main#main {
  padding-top: 0;
}
/* Compenser la navbar fixe sur les pages sans hero */
.dashboard-layout,
.account-tabs-section + *,
.dashboard-layout-tabs {
  padding-top: 0;
}

/* ── Nav backdrop (mobile menu overlay) ── */
.nav-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: 3500; /* au-dessus du contenu mais sous le navbar (4000) */
  opacity: 0;
  transition: opacity 0.3s ease;
}
.nav-backdrop.is-visible {
  display: block;
  opacity: 1;
}
@media (min-width: 1024px) {
  .nav-backdrop {
    display: none !important;
  }
}

/* Ajuster les pages sans hero pour la navbar fixe */
.page-events .section.events-list,
.mes-evenements-section,
.account-tabs-section {
  padding-top: 80px;
}
/* .page-hero-v2, .hero-v2 : padding-top interne au hero */

/* ==========================================================
   THEME — Cohérence globale clair / sombre
   ========================================================== */

/* ── Base ── */
body {
  background: var(--bg-base);
  color: var(--text-base);
}
h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--text-base);
}

/* ── Sections ── */
.steps-section-v2,
.advantages-section-v2,
.section-alt,
.apropos-values,
.apropos-cta,
.contact-section {
  background: var(--bg-surface-2) !important;
  color: var(--text-base) !important;
}
.events-popular {
  background: #f8fafc !important;
}
[data-theme="light"] .events-popular {
  background: #f8fafc !important;
}
[data-theme="dark"] .events-popular {
  background: #14120e !important;
}

/* ── Cards & surfaces ── */
.event-card,
.ticket-card,
.form-card,
.card,
.apropos-value-card,
.apropos-team-card,
.settings-section,
.info-card,
.support-card,
.event-manage-card,
.bento-card {
  background: var(--bg-card) !important;
  border-color: var(--bg-card-border) !important;
  color: var(--text-base) !important;
}
.bento-card .bento-desc,
.bento-card p {
  color: var(--text-muted) !important;
}
.event-card-title,
.event-title,
.bento-title {
  color: var(--text-base) !important;
}

/* ── Textes atténués ── */
.event-card-meta,
.event-meta,
.event-location,
.event-date,
.ticket-meta,
.stat-label,
.step-v2-body p,
.footer-v2-tagline {
  color: var(--text-muted) !important;
}

/* ── Inputs ── */
input,
textarea,
select,
.form-input,
.form-select,
.search-input-v2,
.event-form-input,
.event-form-textarea,
.event-form-select {
  background: var(--bg-surface) !important;
  color: var(--text-base) !important;
  border-color: var(--border) !important;
}
input::placeholder,
textarea::placeholder,
.search-input-v2::placeholder {
  color: var(--text-soft) !important;
}
input:focus,
textarea:focus,
select:focus,
.form-input:focus,
.form-select:focus,
.search-input-v2:focus {
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.15) !important;
  outline: none;
}
label,
.form-label {
  color: var(--text-base) !important;
}

/* ── Category chips ── */
.cat-chip {
  background: var(--bg-surface) !important;
  border-color: var(--border) !important;
  color: var(--text-muted) !important;
}
.cat-chip:hover {
  border-color: var(--primary) !important;
  color: var(--primary) !important;
  background: rgba(var(--primary-rgb), 0.06) !important;
}
.cat-chip.active {
  background: var(--primary) !important;
  border-color: var(--primary) !important;
  color: var(--on-primary) !important;
}

/* ── Dashboard ── */
.dashboard-layout {
  background: var(--bg-base) !important;
}
.dashboard-sidebar {
  background: #12100c !important;
}
.dashboard-main {
  background: var(--bg-base) !important;
  color: var(--text-base) !important;
}
.dashboard-stat-card,
.dashboard-recent-card,
.table-container {
  background: var(--bg-surface) !important;
  border-color: var(--border) !important;
  color: var(--text-base) !important;
}
.dashboard-stat-card .stat-label,
.dashboard-stat-card .stat-change {
  color: var(--text-muted) !important;
}
table thead tr {
  background: var(--bg-surface-2) !important;
}
table thead th {
  color: var(--text-muted) !important;
  border-color: var(--border) !important;
}
table tbody tr {
  border-color: var(--border) !important;
}
table tbody td {
  color: var(--text-base) !important;
}
table tbody tr:hover {
  background: var(--bg-surface-2) !important;
}

/* ── Tabs ── */
.account-tabs-nav,
.tabs-nav {
  background: var(--bg-surface) !important;
  border-color: var(--border) !important;
}
.tab-btn,
.account-tab-btn {
  color: var(--text-muted) !important;
}
.tab-btn.active,
.account-tab-btn.active {
  color: var(--primary) !important;
  border-bottom-color: var(--primary) !important;
}
.tab-content,
.account-tab-pane {
  background: var(--bg-surface) !important;
  border-color: var(--border) !important;
}

/* ── Modales ── */
.modal-overlay {
  background: rgba(0, 0, 0, 0.65) !important;
}
.modal-content {
  background: var(--bg-surface) !important;
  border: 1px solid var(--border) !important;
}
.modal-header {
  border-color: var(--border) !important;
}
.modal-title,
.modal-body {
  color: var(--text-base) !important;
}

/* ── Page hero compact — toujours sombre ── */
.page-hero-v2 {
  background: var(--bg-dark-section) !important;
}
.page-hero-v2 .hero-eyebrow,
.page-hero-v2 .hero-title-v2,
.page-hero-v2 .hero-subtitle-v2 {
  color: #fff !important;
}

/* ── Footer — toujours sombre ── */
.footer-v2 {
  background: var(--bg-dark-section) !important;
  color: rgba(255, 255, 255, 0.72) !important;
}
.footer-v2 .footer-col-title {
  color: #fff !important;
}
.footer-v2 .footer-col-links a {
  color: rgba(255, 255, 255, 0.55) !important;
}
.footer-v2 .footer-col-links a:hover {
  color: var(--primary) !important;
}
.footer-v2-bar {
  border-top-color: rgba(255, 255, 255, 0.08) !important;
  color: rgba(255, 255, 255, 0.35) !important;
}

/* ── Bouton toggle thème (global) ── */
.theme-toggle-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: 1.5px solid rgba(255, 255, 255, 0.25);
  color: rgba(255, 255, 255, 0.8);
  border-radius: 100px;
  padding: 6px 14px;
  font-family: var(--font);
  font-size: 0.8rem;
  font-weight: 500;
  cursor: pointer;
  letter-spacing: 0.01em;
  white-space: nowrap;
  flex-shrink: 0;
}
.theme-toggle-btn:hover {
  border-color: var(--primary);
  color: var(--primary);
  background: rgba(var(--primary-rgb), 0.1);
}
.theme-toggle-btn .ti-moon,
.theme-toggle-btn .ti-sun {
  font-size: 0.95rem;
  line-height: 1;
}
[data-theme="dark"] .theme-toggle-btn .ti-sun {
  display: none;
}
[data-theme="light"] .theme-toggle-btn .ti-moon {
  display: none;
}

/* Mobile: label masqué, icône seule */
@media (max-width: 1023px) {
  .navbar .theme-toggle-btn .ti-label {
    display: none;
  }
  .navbar .theme-toggle-btn {
    padding: 7px 10px;
  }
}

/* ── Transitions douces lors du changement de thème ── */
body,
body * {
  transition:
    background-color 0.25s ease,
    border-color 0.25s ease,
    color 0.25s ease,
    box-shadow 0.25s ease;
}
/* Éléments où la transition serait gênante */
.hero-mesh,
.hero-grain,
img,
video,
.track-fill,
.hero-ticker-inner,
[class*="animate-"] {
  transition: none !important;
}

/* ==========================================================
   RESPONSIVE NATIF — Mobile-first complet
   ========================================================== */

/* ── 1. BARRE DE NAVIGATION MOBILE (bottom nav) ── */
.mobile-bottom-nav {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1050; /* sous le menu (3001) et le backdrop (3000) */
  background: var(--bg-dark-section);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(16px) saturate(1.6);
  -webkit-backdrop-filter: blur(16px) saturate(1.6);
}
[data-theme="light"] .mobile-bottom-nav {
  background: rgba(255, 255, 255, 0.95);
  border-top-color: var(--border);
  box-shadow: 0 -2px 16px rgba(0, 0, 0, 0.08);
}

.mobile-bottom-nav {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  justify-content: space-around;
}

.mbn-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 10px 4px 8px;
  text-decoration: none;
  color: rgba(255, 255, 255, 0.45);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  transition: color 0.2s;
  -webkit-tap-highlight-color: transparent;
  min-height: 56px;
}
[data-theme="light"] .mbn-item {
  color: var(--text-muted);
}
.mbn-item.active {
  color: var(--primary);
}
.mbn-item:active {
  opacity: 0.7;
}
.mbn-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  transition:
    background 0.2s,
    transform 0.15s;
}
.mbn-item.active .mbn-icon {
  background: rgba(var(--primary-rgb), 0.14);
  transform: translateY(-2px);
}
.mbn-item:active .mbn-icon {
  transform: scale(0.88);
}
.mbn-label {
  font-size: 0.65rem;
  line-height: 1;
}

/* Bouton Créer — accent */
.mbn-create .mbn-icon {
  background: var(--primary);
  color: #fff;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  box-shadow: 0 4px 14px rgba(var(--primary-rgb), 0.4);
  transform: translateY(-6px);
}
.mbn-create {
  color: var(--primary) !important;
}
.mbn-create:active .mbn-icon {
  transform: translateY(-6px) scale(0.88);
}

/* Masquer sur desktop */
@media (min-width: 1024px) {
  .mobile-bottom-nav {
    display: none !important;
  }
}

/* Espace pour que le contenu ne se cache pas sous la barre */
@media (max-width: 1023px) {
  body:not(.scanner-page) {
    padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px));
  }
  .footer-v2 {
    padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  }
}

/* ── 2. TYPOGRAPHIE FLUIDE ── */
.hero-title-v2 {
  font-size: clamp(2rem, 7vw, 4rem) !important;
  line-height: 1.12 !important;
}
.hero-subtitle-v2 {
  font-size: clamp(1rem, 3vw, 1.2rem) !important;
}
.section-title {
  font-size: clamp(1.5rem, 4vw, 2.4rem) !important;
}
.section-eyebrow {
  font-size: clamp(0.72rem, 2vw, 0.82rem) !important;
}
.bento-title {
  font-size: clamp(1rem, 3vw, 1.15rem) !important;
}
.stat-num {
  font-size: clamp(2rem, 6vw, 3rem) !important;
}
.page-hero-v2 .hero-title-v2 {
  font-size: clamp(1.6rem, 5vw, 2.8rem) !important;
}

/* ── 3. INPUTS — anti-zoom iOS (font-size 16px minimum) ── */
input,
textarea,
select,
.form-input,
.form-select,
.search-input-v2,
.event-form-input,
.event-form-textarea,
.event-form-select {
  font-size: max(16px, 1rem) !important;
}
@media (min-width: 768px) {
  input,
  textarea,
  select,
  .form-input,
  .form-select,
  .search-input-v2,
  .event-form-input,
  .event-form-textarea,
  .event-form-select {
    font-size: 0.95rem !important;
  }
}

/* ── 4. CATEGORY FILTER — scroll horizontal mobile ── */
.category-filter {
  display: flex !important;
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
  gap: 8px !important;
  padding-bottom: 4px !important;
  scrollbar-width: none !important;
}
.category-filter::-webkit-scrollbar {
  display: none !important;
}
.cat-chip {
  flex-shrink: 0 !important;
  scroll-snap-align: start;
  white-space: nowrap !important;
}

/* ── 5. CARDS — responsive naturel ── */
#events-grid-home,
#events-grid,
.events-grid {
  display: grid !important;
  grid-template-columns: repeat(
    auto-fill,
    minmax(min(280px, 100%), 1fr)
  ) !important;
  gap: clamp(12px, 3vw, 24px) !important;
}
.event-card {
  max-width: 100% !important;
  width: 100% !important;
}

/* ── 6. HERO — natif mobile ── */
@media (max-width: 767px) {
  /* Conteneur principal : compact, centré, sans débordement */
  .hero-v2 {
    min-height: auto !important;
    height: auto !important;
    padding: 72px 20px 32px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    overflow: hidden !important;
  }

  /* Contenu centré, une seule colonne */
  .hero-content-v2 {
    width: 100% !important;
    max-width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    gap: 0 !important;
  }

  /* Eyebrow : tag discret */
  .hero-eyebrow {
    font-size: 0.68rem !important;
    padding: 4px 12px !important;
    margin-bottom: 14px !important;
    letter-spacing: 0.08em !important;
  }
  .hero-eyebrow-dot {
    width: 5px !important;
    height: 5px !important;
  }

  /* Titre : fluid, aéré */
  .hero-title-v2 {
    font-size: clamp(1.3rem, 5.5vw, 1.75rem) !important;
    line-height: 1.2 !important;
    margin: 0 0 12px !important;
    letter-spacing: -0.01em !important;
  }
  .hero-title-v2 br {
    display: none !important;
  }

  /* Sous-titre : léger, lisible */
  .hero-subtitle-v2 {
    font-size: clamp(0.88rem, 3.5vw, 1rem) !important;
    color: rgba(255, 255, 255, 0.75) !important;
    margin: 0 0 24px !important;
    line-height: 1.5 !important;
    max-width: 90% !important;
  }

  /* CTAs : empilés, pleine largeur, touche agréable */
  .hero-cta-v2 {
    flex-direction: column !important;
    align-items: stretch !important;
    width: 100% !important;
    max-width: 340px !important;
    gap: 10px !important;
    margin: 0 auto !important;
  }
  .hero-cta-v2 .btn {
    width: 100% !important;
    min-height: 50px !important;
    font-size: 0.92rem !important;
    border-radius: 14px !important;
    justify-content: center !important;
  }
  .hero-cta-v2 .btn-hero-ghost {
    border-width: 1.5px !important;
    padding: 12px 20px !important;
  }

  /* Ticker "EN DIRECT" : compact, 1 ligne */
  .hero-ticker {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin-top: 20px !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
  }
  .hero-ticker-label {
    font-size: 0.58rem !important;
    padding: 3px 8px !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
  }
  .hero-ticker-track {
    flex: 1 !important;
    overflow: hidden !important;
    height: 1.2em !important;
  }
  .hero-ticker-item {
    font-size: 0.72rem !important;
  }
  .hero-ticker-inner {
    animation-duration: 70s !important;
  }

  /* Pills et scroll : masqués sur mobile */
  .hero-pills,
  .hero-scroll-v2 {
    display: none !important;
  }
}

/* Très petit écran (<360px) : ajustements supplémentaires */
@media (max-width: 359px) {
  .hero-v2 {
    padding: 68px 14px 24px !important;
  }
  .hero-title-v2 {
    font-size: 1.2rem !important;
  }
  .hero-cta-v2 {
    max-width: 100% !important;
  }
}

/* ── 7. STEPS V2 — vertical mobile ── */
@media (max-width: 767px) {
  .steps-timeline-v2 {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  .step-v2 {
    flex-direction: row !important;
    gap: 16px !important;
    padding: 16px !important;
    background: var(--bg-surface);
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
  }
  .step-v2-num-wrap {
    flex-direction: column !important;
    align-items: center !important;
    min-width: 48px !important;
  }
  .step-v2-track {
    display: none !important;
  }
  .step-v2-body {
    flex: 1 !important;
    text-align: left !important;
  }
  .step-v2-illus {
    display: none !important;
  }
}

/* ── 8. BENTO GRID — mobile 1 col ── */
@media (max-width: 767px) {
  .bento-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-areas: none !important;
    gap: 12px !important;
  }
  .bento-card,
  .bento-card--main {
    grid-column: 1 / -1 !important;
    grid-row: auto !important;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .bento-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 16px !important;
  }
  .bento-card--main {
    grid-column: 1 / -1 !important;
  }
}

/* ── 9. STAT COUNTERS — mobile centré ── */
@media (max-width: 767px) {
  .stat-counters {
    flex-direction: row !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 16px 32px !important;
    padding: 20px !important;
  }
  .stat-item {
    min-width: 80px !important;
    text-align: center !important;
  }
}

/* ── 10. FEATURED EVENT CARD — désactivé (grille uniforme sur l’index) ── */

/* ── 11. PAGE HERO COMPACT — mobile ── */
@media (max-width: 767px) {
  .page-hero-v2 {
    padding: 80px 16px 40px !important;
    text-align: center !important;
    min-height: auto !important;
  }
  .page-hero-v2 .hero-content-v2 {
    align-items: center !important;
  }
}

/* ── 12. DASHBOARD — mobile-first ── */
@media (max-width: 1023px) {
  .dashboard-layout {
    flex-direction: column !important;
    min-height: auto !important;
  }
  .dashboard-sidebar {
    display: none !important; /* remplacé par bottom nav */
  }
  .dashboard-main {
    padding: 16px !important;
    margin-top: 68px !important;
  }
  .dashboard-kpi-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
  }
  .dashboard-stat-card {
    padding: 16px 14px !important;
  }
  .dashboard-tabs {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }
  .dashboard-main .dashboard-tabs {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}
@media (max-width: 479px) {
  .dashboard-kpi-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ── 13. TABLEAUX — scroll horizontal mobile ── */
@media (max-width: 767px) {
  .table-container,
  .dashboard-table-wrap,
  .contact-messages-table-wrap {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    border-radius: var(--radius-sm) !important;
  }
  table {
    min-width: 520px !important;
    font-size: 0.82rem !important;
  }
  table th,
  table td {
    padding: 10px 10px !important;
    white-space: nowrap !important;
  }
}

/* ── 14. FORMULAIRES — mobile friendly ── */
@media (max-width: 767px) {
  .form-row,
  .event-form-row {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  .form-card,
  .event-form-card {
    padding: 20px 16px !important;
    border-radius: var(--radius-sm) !important;
  }
  .btn,
  .btn-lg {
    min-height: 48px !important;
    font-size: 0.92rem !important;
  }
}

/* ── 15. MODALES — bottom sheet sur mobile ── */
@media (max-width: 767px) {
  .modal-content:not(.modal-content--fullscreen) {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    top: auto !important;
    transform: none !important;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0 !important;
    max-height: 90svh !important;
    overflow-y: auto !important;
    padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px)) !important;
  }
  .modal-overlay {
    align-items: flex-end !important;
  }
}

/* ── 16. TABS ACCOUNT — scroll horizontal ── */
@media (max-width: 767px) {
  .account-tabs,
  .account-tabs-nav,
  .tabs-nav {
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none !important;
    gap: 0 !important;
  }
  .account-tabs::-webkit-scrollbar,
  .account-tabs-nav::-webkit-scrollbar {
    display: none !important;
  }
  .account-tab-btn,
  .tab-btn {
    flex-shrink: 0 !important;
    white-space: nowrap !important;
    font-size: 0.82rem !important;
    padding: 10px 14px !important;
  }
  .account-tabs-section {
    padding-top: 68px !important;
  }
}

/* ── 17. FOOTER V2 — mobile 1 col ── */
@media (max-width: 599px) {
  .footer-v2-grid {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
  .footer-v2-main {
    padding: 40px 16px 24px !important;
  }
}
@media (min-width: 600px) and (max-width: 1023px) {
  .footer-v2-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 24px 32px !important;
  }
}

/* ── 18. CTA FINALE — mobile ── */
@media (max-width: 767px) {
  .cta-finale {
    padding: 60px 16px !important;
    text-align: center !important;
  }
  .cta-finale-title {
    font-size: clamp(1.5rem, 6vw, 2.2rem) !important;
  }
}

/* ── 19. NAVBAR — masquer label thème sur mobile ── */
@media (max-width: 1023px) {
  .navbar .theme-toggle-btn .ti-label {
    display: none !important;
  }
  .navbar .nav-auth {
    gap: 8px !important;
  }
}

/* ── 20. TOUCH FEEDBACK — états actifs natifs ── */
.btn:active,
.event-card:active,
.cat-chip:active,
.mbn-item:active {
  -webkit-tap-highlight-color: transparent;
}
.btn:active {
  transform: scale(0.97);
}
.event-card:active {
  transform: scale(0.99) !important;
}
@media (hover: none) {
  /* Pas d'effets hover sur écrans tactiles */
  .event-card:hover {
    transform: none !important;
    box-shadow: var(--shadow-md) !important;
  }
  .btn:hover {
    filter: none;
  }
}

/* ── 21. SCROLL MOMENTUM (iOS) ── */
.category-filter,
.dashboard-tabs,
.account-tabs,
.account-tabs-nav,
.table-container,
.modal-content,
.navbar-menu {
  -webkit-overflow-scrolling: touch;
}

/* ── 22. CONTAINER — padding fluide ── */
.container {
  padding-inline: clamp(12px, 4vw, 40px) !important;
}

/* ── 23. SECTIONS — padding vertical fluide ── */
.events-popular,
.steps-section-v2,
.advantages-section-v2,
.cta-finale,
.contact-section {
  padding-top: clamp(40px, 8vw, 100px) !important;
  padding-bottom: clamp(40px, 8vw, 100px) !important;
}

/* ── 24. SCANNER — contenu sous la navbar standard ── */
.scanner-page {
  padding-bottom: 0 !important;
}
/* Masquer la barre du bas quand le menu latéral est ouvert */
body.menu-open .mobile-bottom-nav {
  display: none !important;
}

/* ── 25. IMAGES — toujours fluides ── */
img {
  max-width: 100%;
  height: auto;
}
.event-card-img-wrap img,
.event-card-image .event-card-cover {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: cover !important;
}
.event-card-image {
  width: 100% !important;
}

/* ── 26. TEXT WRAPPING SAFE ── */
h1,
h2,
h3,
h4,
h5,
h6,
.hero-title-v2,
.section-title {
  overflow-wrap: break-word;
  word-break: break-word;
  hyphens: auto;
}

/* ── 27. SELECTION COULEUR BRAND ── */
::selection {
  background: rgba(var(--primary-rgb), 0.25);
  color: var(--text-base);
}

/* ── 28. FOCUS VISIBLE — accessibilité ── */
:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 3px;
}
/* Supprimer l'outline natif du navigateur sur les éléments non-interactifs */
:focus:not(:focus-visible) {
  outline: none;
}

/* ══════════════════════════════════════════
   29. PROMO SLOTS — textes masqués + modal
   ══════════════════════════════════════════ */

/* Masquer les textes et boutons dans les slots */
.promo-slot .promo-slot-texts,
.promo-slot .promo-slot-btn,
.promo-slot .promo-partner-body,
.promo-slot .promo-slot-footer {
  display: none;
}

/* Rendre les slots cliquables */
.promo-slot {
  cursor: pointer;
}
.promo-slot .promo-slot-inner--leaderboard,
.promo-slot .promo-slot-inner--partner {
  cursor: pointer;
}

/* Centrer l'icône dans le leaderboard (plus de texte à côté) */
.promo-slot--leaderboard .promo-slot-content {
  justify-content: center;
  width: 100%;
}
.promo-slot--leaderboard .promo-slot-icon {
  opacity: 0.25;
}

/* Centrer l'icône partenaire */
.promo-slot--partner .promo-slot-inner--partner {
  justify-content: center;
}
.promo-partner-icon {
  opacity: 0.7;
}

/* ── Overlay "Voir les détails" ── */
.promo-slot-inner--leaderboard,
.promo-slot-inner--partner {
  position: relative;
  overflow: hidden;
}
.promo-slot-hover-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: rgba(var(--primary-rgb), 0.88);
  color: #fff;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  opacity: 0;
  transition: opacity 0.22s ease;
  border-radius: inherit;
  pointer-events: none;
}
.promo-slot-hover-overlay--video {
  background: rgba(0, 0, 0, 0.62);
  position: absolute;
  inset: 0 0 auto 0;
  height: 100%;
  border-radius: 0;
  z-index: 5;
}
.promo-slot:hover .promo-slot-hover-overlay,
.promo-slot:focus-visible .promo-slot-hover-overlay {
  opacity: 1;
}
/* Pour le slot vidéo, l'overlay est dans promo-slot-inner--video */
.promo-slot--video .promo-slot-inner--video {
  position: relative;
  overflow: hidden;
}
.promo-slot--video:hover .promo-slot-hover-overlay,
.promo-slot--video:focus-visible .promo-slot-hover-overlay {
  opacity: 1;
}
/* Pas d'overlay au survol quand une vidéo est en lecture (contrôles accessibles) */
.promo-slot--video:has(#promo-video-player:not([hidden])) .promo-slot-hover-overlay,
.promo-slot--video:has(#promo-video-player:not([hidden])):hover .promo-slot-hover-overlay,
.promo-slot--video:has(#promo-video-player:not([hidden])):focus-visible .promo-slot-hover-overlay,
.promo-slot--video.is-playing-video .promo-slot-hover-overlay,
.promo-slot--video.is-playing-video:hover .promo-slot-hover-overlay {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  display: none !important;
}

/* Indicateur discret (badge fixe) quand on ne survole pas */
.promo-slot::after {
  content: 'ℹ';
  position: absolute;
  top: 8px;
  right: 10px;
  font-size: 0.7rem;
  color: var(--text-muted);
  opacity: 0.4;
  pointer-events: none;
  transition: opacity 0.2s;
}
.promo-slot:hover::after {
  opacity: 0;
}
/* Les slots doivent être en position relative pour le ::after */
.promo-slot {
  position: relative;
}

/* ── Modal ── */
.promo-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 9000;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  backdrop-filter: blur(4px);
  animation: promo-modal-fadein 0.2s ease;
}
.promo-modal-backdrop[hidden] {
  display: none;
}
@keyframes promo-modal-fadein {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.promo-modal-panel {
  position: relative;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: calc(var(--radius) + 4px);
  max-width: 480px;
  width: 100%;
  box-shadow: 0 24px 60px rgba(0,0,0,0.35);
  animation: promo-modal-slidein 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes promo-modal-slidein {
  from { opacity: 0; transform: translateY(20px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.promo-modal-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--bg-base);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  z-index: 1;
}
.promo-modal-close:hover {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
}
.promo-modal-header {
  padding: 28px 28px 0;
}
.promo-modal-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--primary);
  background: rgba(var(--primary-rgb), 0.1);
  border: 1px solid rgba(var(--primary-rgb), 0.2);
  border-radius: 20px;
  padding: 4px 10px;
  margin-bottom: 12px;
}
.promo-modal-title {
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--text-base);
  margin: 0;
  line-height: 1.2;
}
.promo-modal-body {
  padding: 20px 28px 28px;
}
.promo-modal-meta {
  display: flex;
  gap: 16px;
  margin-bottom: 18px;
}
.promo-modal-meta-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  flex: 1;
  background: var(--bg-base);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 14px;
}
.promo-modal-meta-icon {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: rgba(var(--primary-rgb), 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--primary);
  flex-shrink: 0;
  margin-top: 1px;
}
.promo-modal-meta-icon--reach {
  background: rgba(34, 197, 94, 0.1);
  color: #22c55e;
}
.promo-modal-meta-label {
  font-size: 0.68rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0 0 2px;
}
.promo-modal-meta-value {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text-base);
  margin: 0;
}
.promo-modal-reach {
  color: #22c55e !important;
}
.promo-modal-desc {
  font-size: 0.9rem;
  color: var(--text-muted);
  line-height: 1.6;
  margin: 0 0 22px;
}
.promo-modal-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
  margin: 0 0 16px;
}
.promo-modal-gallery-item {
  margin: 0;
}
.promo-modal-gallery-item img {
  width: 100%;
  height: 110px;
  object-fit: cover;
  border-radius: 10px;
  border: 1px solid var(--border);
  display: block;
}
.promo-modal-owner-contact {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: rgba(37, 211, 102, 0.07);
  border: 1px solid rgba(37, 211, 102, 0.2);
  border-radius: var(--radius);
  padding: 10px 14px;
  margin-bottom: 14px;
}
.promo-modal-owner-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-muted);
  margin: 0;
  white-space: nowrap;
}
.btn-outline-wa {
  background: transparent;
  color: #25d366;
  border: 1.5px solid #25d366;
  font-size: 0.82rem;
  padding: 6px 14px;
  white-space: nowrap;
}
.btn-outline-wa:hover {
  background: #25d366;
  color: #fff;
}
.promo-modal-cta {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.promo-modal-cta .btn {
  flex: 1;
  justify-content: center;
  min-width: 120px;
}
@media (max-width: 480px) {
  .promo-modal-header,
  .promo-modal-body {
    padding-left: 18px;
    padding-right: 18px;
  }
  .promo-modal-meta {
    flex-direction: column;
    gap: 10px;
  }
  .promo-modal-owner-contact {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ── Checkout : sous-libellé palier (jour de match sport) ── */
.checkout-tier-sub {
  display: block;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--text-muted);
  margin-top: 0.2rem;
  line-height: 1.38;
}

/* ── Modal transfert billet depuis Mon compte ── */
.tosala-trf-panel {
  max-width: 428px;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-lg, 0 18px 50px rgba(0, 0, 0, 0.12));
}
[data-theme="dark"] .tosala-trf-panel {
  border-color: rgba(255, 255, 255, 0.09);
}
.tosala-trf-hero {
  margin-bottom: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--border);
}
.tosala-trf-eyebrow {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--primary);
  margin: 0 0 0.25rem;
}
.tosala-trf-title {
  margin-bottom: 0.25rem !important;
}
.tosala-trf-hint {
  margin: 0 !important;
  font-size: 0.875rem;
  color: var(--text-muted);
  line-height: 1.55;
}
.tosala-trf-event {
  font-size: 0.9rem;
  font-weight: 600;
  margin: 0 0 1rem;
  color: var(--text-base);
}

/* Sport / compétition — masqué (TOSALA_SPORT_UI_ENABLED dans app.js) */
.tosala-sport-ui-off option[value="sport"],
.tosala-sport-ui-off [data-cat="sport"],
.tosala-sport-ui-off #event-manage-section-tournament,
.tosala-sport-ui-off [data-event-manage-section="tournament"],
.tosala-sport-ui-off #mes-opt-sport-wrap,
.tosala-sport-ui-off .mes-opt-sport-create-only,
.tosala-sport-ui-off .tier-match-wrap {
  display: none !important;
}

/* ── Studio Fête / Tournoi — Gérer l’événement ── */
.text-muted {
  color: var(--text-muted);
  opacity: 0.92;
}
.em-studio-section {
  margin-bottom: 2rem;
  min-width: 0;
  max-width: 100%;
}
.em-studio-hero {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 0.95rem;
  flex-wrap: wrap;
}
.em-studio-hero-copy {
  flex: 1;
  min-width: min(420px, 100%);
}
.em-studio-lead {
  margin-bottom: 0;
  line-height: 1.55;
}
.em-studio-pill {
  flex-shrink: 0;
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  padding: 0.35rem 0.95rem;
  border-radius: 999px;
  text-transform: uppercase;
}
.em-studio-pill--rose {
  background: linear-gradient(
    135deg,
    rgba(var(--primary-rgb), 0.16),
    rgba(236, 72, 153, 0.18)
  );
  color: #be185d;
}
[data-theme="dark"] .em-studio-pill--rose {
  color: #f9a8d4;
}
.em-studio-pill--field {
  background: rgba(34, 197, 94, 0.15);
  color: #15803d;
}
[data-theme="dark"] .em-studio-pill--field {
  background: rgba(74, 222, 128, 0.12);
  color: #86efac;
}
.em-studio-status {
  min-height: 1.25em;
  margin-bottom: 0.75rem !important;
}
.em-studio-status--ok {
  color: #15803d;
  font-weight: 600;
}
.em-studio-status--err {
  color: #b91c1c;
  font-weight: 600;
}
[data-theme="dark"] .em-studio-status--ok {
  color: #4ade80;
}
[data-theme="dark"] .em-studio-status--err {
  color: #f87171;
}
.em-studio-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: 1rem;
}
.em-studio-card,
.em-studio-card-wide {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 1.25rem 1.35rem;
  box-shadow: var(--shadow-sm);
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  overflow-wrap: anywhere;
}
.em-studio-card-wide {
  margin-top: 1rem;
}
.em-studio-card-wide .form-control,
.em-studio-card-wide select.form-control,
.em-studio-card-wide textarea.form-control {
  max-width: 100%;
  min-width: 0;
}
.em-studio-table-scroll {
  overflow-x: auto;
  overflow-y: visible;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
  margin-top: 0.25rem;
  scrollbar-gutter: stable;
}
.em-studio-table-scroll .dashboard-table {
  margin-bottom: 0;
}
.em-studio-card-title {
  margin: 0 0 0.35rem;
  font-size: 1.05rem;
}
.em-studio-card-hint {
  margin: 0 0 1rem;
  font-size: 0.85rem;
  color: var(--text-muted);
  line-height: 1.45;
}
.em-studio-inline-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
.em-studio-form-row.form-row {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 9.5rem), 1fr));
  gap: 0.75rem;
}
.em-studio-form-row.em-studio-form-row--pair {
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
}
.em-studio-form-row.em-studio-form-row--triple {
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr);
}
.em-studio-form-row .form-group {
  min-width: 0;
}
.em-party-guest-add-wrap {
  align-self: flex-end;
}

.em-party-tables {
  list-style: none;
  padding: 0;
  margin: 0;
}
.em-party-tables-empty {
  padding: 0.875rem;
  margin: 0;
  border-radius: var(--radius-sm);
  background: rgba(var(--primary-rgb), 0.05);
}
.em-party-table-li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 3.75rem auto;
  gap: 0.5rem;
  align-items: center;
  margin-bottom: 0.65rem;
  padding: 0.65rem 0.85rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: rgba(var(--primary-rgb), 0.02);
}
[data-theme="dark"] .em-party-table-li {
  background: rgba(255, 255, 255, 0.03);
}
.em-party-tlabel {
  width: 100%;
  min-width: 0;
  flex: 1 1 auto;
  font-size: 0.95rem;
  min-height: 2.5rem;
  padding: 0.5rem 0.75rem;
}
.em-party-tcap {
  width: 3.75rem;
  max-width: 3.75rem;
  min-width: 3.75rem;
  flex: 0 0 3.75rem;
  min-height: 2.5rem;
  padding: 0.5rem 0.35rem;
  font-size: 0.875rem;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.em-party-tcap::-webkit-outer-spin-button,
.em-party-tcap::-webkit-inner-spin-button {
  margin: 0;
}

.em-party-table-li-actions {
  display: inline-flex;
  gap: 0.35rem;
  flex-shrink: 0;
}
.em-g-sub {
  margin-top: 6px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.45rem;
}
@media (max-width: 620px) {
  .em-party-table-li {
    grid-template-columns: minmax(0, 1fr) 3.75rem;
    grid-auto-flow: row dense;
  }
  .em-party-table-li-actions {
    grid-column: 1 / -1;
    justify-self: flex-end;
  }
  .em-g-sub {
    grid-template-columns: 1fr;
  }
}

.em-party-g-actions {
  white-space: nowrap;
  text-align: right;
}

.em-party-stats {
  margin: 0.5rem 0 0;
  font-size: 0.875rem;
}

.em-party-seating-map {
  display: grid;
  gap: 1rem;
}

.em-party-seating-empty {
  margin: 0;
  padding: 0.75rem;
}

.em-party-table-block {
  padding: 0.75rem 1rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: rgba(var(--primary-rgb), 0.03);
}

.em-party-table-block-title {
  margin: 0 0 0.5rem;
  font-size: 0.95rem;
  font-weight: 700;
}

.em-party-seats {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.em-party-seat {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 3.25rem;
  min-height: 3.25rem;
  padding: 0.35rem 0.5rem;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg-surface);
  cursor: pointer;
  font-size: 0.75rem;
  line-height: 1.2;
  transition: box-shadow 0.15s, border-color 0.15s;
}

.em-party-seat--free:hover {
  border-color: var(--primary);
  box-shadow: 0 0 0 2px rgba(var(--primary-rgb), 0.15);
}

.em-party-seat--occ {
  background: rgba(22, 163, 74, 0.12);
  border-color: rgba(22, 163, 74, 0.35);
  cursor: default;
}

.em-party-seat-num {
  font-weight: 700;
  color: var(--primary);
}

.em-party-seat-name {
  margin-top: 2px;
  max-width: 5.5rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-muted);
}

.em-party-qr-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
}

.em-party-qr-mini canvas,
.em-party-qr-mini img {
  display: block;
  border-radius: 6px;
}

.em-party-qr-code {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}

.em-party-qr-couple-badge {
  display: inline-block;
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--primary);
  margin-bottom: 0.2rem;
}

.em-party-plan-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.mes-opt-table-guests {
  min-width: 10rem;
  font-size: 0.875rem;
}

#mes-evt-type-wrap.mes-evt-type--mariage select[disabled] {
  opacity: 0.85;
  cursor: not-allowed;
}

.em-party-place-type {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.25rem;
  margin: 0 0 1rem;
  padding: 0.75rem 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: rgba(var(--primary-rgb), 0.04);
}

.em-party-place-type-legend {
  font-size: 0.85rem;
  font-weight: 700;
  padding: 0 0.35rem;
}

.em-party-place-type-opt {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  margin: 0;
}

#em-party-place-couple {
  margin-bottom: 0.5rem;
}

@media (max-width: 767px) {
  .em-studio-card,
  .em-studio-card-wide {
    padding: 1rem 1rem;
  }
  .em-studio-hero-copy {
    min-width: 0;
  }
  .em-studio-form-row.form-row,
  .em-studio-form-row.em-studio-form-row--pair,
  .em-studio-form-row.em-studio-form-row--triple {
    grid-template-columns: 1fr;
    gap: 0.65rem;
  }
  .em-studio-inline-head {
    flex-direction: column;
    align-items: stretch;
    gap: 0.65rem;
  }
  .em-studio-inline-head .btn {
    width: 100%;
    justify-content: center;
  }
  .em-party-place-type {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.65rem 0.75rem;
  }
  .em-party-guest-add-wrap {
    align-self: stretch !important;
    width: 100%;
  }
  .em-party-guest-add-wrap .btn {
    width: 100%;
    justify-content: center;
  }
  .em-studio-section .dashboard-actions {
    flex-direction: column;
    align-items: stretch;
  }
  .em-studio-section .dashboard-actions .btn {
    width: 100%;
    justify-content: center;
    margin-right: 0;
  }
  .em-tm-card {
    flex-direction: column;
    align-items: stretch;
    gap: 0.65rem;
    padding: 0.875rem 1rem;
  }
  .em-tm-card-actions {
    align-self: stretch;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: stretch;
  }
  .em-tm-card-actions .btn {
    flex: 1 1 auto;
    min-width: min(100%, 8rem);
    justify-content: center;
  }
  .em-party-seating-map {
    gap: 0.75rem;
  }
  .em-party-table-block {
    padding: 0.65rem 0.75rem;
  }
  .em-party-seat {
    min-width: 2.75rem;
    min-height: 2.75rem;
    font-size: 0.7rem;
  }
  .em-party-seat-name {
    max-width: 4.5rem;
  }
}
@media (max-width: 479px) {
  .em-studio-card,
  .em-studio-card-wide {
    padding: 0.875rem 0.75rem;
    border-radius: var(--radius-sm);
  }
  .em-studio-card-title {
    font-size: 0.975rem;
  }
  .em-studio-card-hint {
    font-size: 0.8125rem;
    margin-bottom: 0.75rem;
  }
  .em-studio-table-scroll .dashboard-table {
    min-width: 300px;
    font-size: 0.8125rem;
  }
  .em-studio-table-scroll .dashboard-table th,
  .em-studio-table-scroll .dashboard-table td {
    padding: 8px 6px;
  }
}

.em-tm-list {
  margin-top: 1rem;
  display: grid;
  gap: 0.65rem;
}
.em-tm-card {
  display: flex;
  align-items: stretch;
  gap: 0.875rem;
  justify-content: space-between;
  padding: 1rem 1.1rem;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  background: var(--bg-surface);
  transition: box-shadow 0.2s ease;
}
.em-tm-card:hover {
  box-shadow: var(--shadow-md);
}
.em-tm-card-copy {
  flex: 1;
  min-width: 0;
}
.em-tm-phase {
  font-size: 1rem;
  margin-bottom: 0.3rem !important;
  display: block;
}
.em-tm-when {
  margin: 0 0 0.22rem !important;
  font-size: 0.865rem;
  color: var(--text-muted);
}
.em-tm-duel {
  margin: 0 0 0.22rem !important;
  font-size: 0.93rem;
  font-weight: 600;
}
.em-tm-place {
  margin: 0 !important;
  font-size: 0.82rem;
}
.em-tm-card-actions {
  align-self: center;
  flex-shrink: 0;
}

/* Tournoi — accueil index */
.event-card--tournament .event-card-price--tournament {
  font-size: 0.9rem;
  color: var(--text-muted);
  font-weight: 600;
}
.modal-content--tournament-matches {
  max-width: 640px;
  max-height: min(90vh, 720px);
  overflow: auto;
}
.tm-public-matches-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.tm-public-match-card {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 1rem 1.1rem;
  background: var(--bg-surface);
}
.tm-public-match-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.5rem;
}
.tm-public-match-head h4 {
  margin: 0;
  font-size: 1rem;
}
.tm-public-match-badge {
  font-size: 0.75rem;
  font-weight: 700;
  padding: 0.2rem 0.55rem;
  border-radius: 100px;
  background: #f2f4f7;
  color: #475467;
  white-space: nowrap;
}
.tm-public-match-badge--open {
  background: rgba(var(--primary-rgb), 0.12);
  color: var(--primary);
}
.tm-public-match-badge--past {
  background: #f2f4f7;
  color: #94a3b8;
}
.tm-public-match-line {
  margin: 0 0 0.35rem;
  font-size: 0.875rem;
  color: var(--text-muted);
}
.tm-public-match-duel {
  margin: 0 0 0.35rem;
  font-size: 0.95rem;
}
.tm-public-match-venue {
  margin: 0 0 0.65rem;
  font-size: 0.82rem;
}
.tm-public-match-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.tm-public-match-card--past {
  opacity: 0.92;
  border-color: rgba(148, 163, 184, 0.45);
  background: rgba(242, 244, 247, 0.65);
}
[data-theme="dark"] .tm-public-match-card--past {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(148, 163, 184, 0.25);
}
.event-card-past-hint {
  color: #94a3b8;
  font-weight: 600;
}
.event-card-past-hint--all {
  color: #b42318;
}
.event-tournament-matches {
  margin: 1.25rem 0;
}
.em-tm-empty {
  margin-top: 0.85rem !important;
}

/* —— Affichage type grandes ligues (tournoi) —— */
.league-competition-strip {
  margin: -0.25rem 0 1rem;
  padding: 1rem 1.1rem 1.05rem;
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 55%, #334155 100%);
  color: #f8fafc;
}
.league-competition-strip .section-eyebrow {
  color: rgba(248, 250, 252, 0.72);
  margin-bottom: 0.25rem;
}
.league-competition-title {
  margin: 0 0 0.35rem;
  color: #fff;
  font-size: 1.35rem;
  letter-spacing: -0.02em;
}
.league-competition-meta {
  margin: 0;
  font-size: 0.875rem;
  color: rgba(248, 250, 252, 0.78);
}
.league-competition-hint {
  margin-top: 0;
}
.league-competition-block .league-competition-header h3 {
  margin: 0.15rem 0 0.35rem;
  font-size: 1.2rem;
}
.modal-content--tournament-matches {
  max-width: 720px;
}
.league-fixtures {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.league-matchday {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--bg-surface);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
.league-matchday-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.65rem 1rem;
  background: linear-gradient(90deg, #0f172a, #1e3a5f);
  color: #f8fafc;
}
.league-matchday-date {
  font-weight: 700;
  font-size: 0.9rem;
  text-transform: capitalize;
}
.league-matchday-badge {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.2rem 0.55rem;
  border-radius: 100px;
  background: rgba(255, 255, 255, 0.14);
  color: #e2e8f0;
  white-space: nowrap;
}
.league-fixture-list {
  display: flex;
  flex-direction: column;
}
.league-fixture {
  display: grid;
  grid-template-columns: minmax(4.5rem, auto) 1fr auto;
  gap: 0.65rem 1rem;
  align-items: center;
  padding: 0.85rem 1rem;
  border-top: 1px solid var(--border);
}
.league-fixture:first-child {
  border-top: none;
}
.league-fixture:nth-child(even) {
  background: rgba(15, 23, 42, 0.02);
}
.league-fixture--past {
  opacity: 0.82;
}
.league-fixture-status {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--text-muted);
}
.league-fixture--bookable .league-fixture-status {
  color: var(--primary);
}
.league-fixture--past .league-fixture-status {
  color: #94a3b8;
}
.league-fixture-meta {
  font-size: 0.78rem;
  color: var(--text-muted);
  margin-bottom: 0.35rem;
}
.league-fixture-teams {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 0.5rem 0.75rem;
  align-items: center;
}
.league-team {
  font-weight: 700;
  font-size: 0.95rem;
  line-height: 1.25;
}
.league-team--home {
  text-align: right;
}
.league-team--away {
  text-align: left;
}
.league-fixture-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 3rem;
}
.league-fixture-time {
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--primary);
  font-variant-numeric: tabular-nums;
}
.league-fixture-vs {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
}
.league-fixture-venue {
  margin-top: 0.25rem;
  font-size: 0.78rem;
  color: var(--text-muted);
}
.league-fixture-actions {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  align-items: stretch;
}
.league-fixture-btn {
  white-space: nowrap;
}
@media (max-width: 640px) {
  .league-fixture {
    grid-template-columns: 1fr;
    gap: 0.5rem;
  }
  .league-fixture-status {
    order: -1;
  }
  .league-fixture-actions {
    flex-direction: row;
    flex-wrap: wrap;
  }
  .league-team--home,
  .league-team--away {
    text-align: center;
  }
  .league-fixture-teams {
    text-align: center;
  }
}
[data-theme="dark"] .league-matchday-head {
  background: linear-gradient(90deg, #020617, #1e293b);
}
[data-theme="dark"] .league-fixture:nth-child(even) {
  background: rgba(255, 255, 255, 0.03);
}

/* —— Événement sportif simple (carte fixture) —— */
.event-card--sport-fixture {
  border-top: 3px solid #0f172a;
}
.event-card--sport-fixture .event-card-image--sport {
  background: linear-gradient(160deg, #0f172a 0%, #1e3a5f 100%);
  min-height: 4.5rem;
}
.event-card--tournament {
  border-top: 3px solid var(--primary);
}
.sport-fixture-teams {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 0.35rem 0.5rem;
  align-items: center;
  margin: 0.35rem 0 0.5rem;
  padding: 0.55rem 0.65rem;
  border-radius: var(--radius-sm);
  background: rgba(15, 23, 42, 0.06);
}
.sport-fixture-team {
  font-weight: 800;
  font-size: 0.88rem;
  line-height: 1.2;
}
.sport-fixture-team--home {
  text-align: right;
}
.sport-fixture-team--away {
  text-align: left;
}
.sport-fixture-vs {
  font-size: 0.7rem;
  font-weight: 800;
  text-transform: uppercase;
  color: var(--text-muted);
}
.sport-fixture-meta {
  font-weight: 500;
}
[data-theme="dark"] .sport-fixture-teams {
  background: rgba(255, 255, 255, 0.06);
}
[data-theme="dark"] .event-card--sport-fixture {
  border-top-color: #38bdf8;
}

/* Journées & pronostics */
.league-matchday-date-wrap {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.league-matchday-sub {
  font-size: 0.78rem;
  font-weight: 500;
  color: rgba(248, 250, 252, 0.75);
  text-transform: capitalize;
}
.em-tm-matchday {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--primary);
  margin-bottom: 0.2rem;
}
.em-tm-predictions-toggle {
  display: block;
  margin-top: 0.65rem;
  font-size: 0.9rem;
}
.league-prediction {
  margin-top: 0.65rem;
  padding-top: 0.65rem;
  border-top: 1px dashed var(--border);
}
.league-prediction-title {
  margin: 0 0 0.35rem;
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}
.league-prediction-meta {
  margin: 0 0 0.45rem;
  font-size: 0.78rem;
}
.league-prediction-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-bottom: 0.45rem;
}
.league-prediction-btn--active {
  border-color: var(--primary);
  background: rgba(var(--primary-rgb), 0.12);
  color: var(--primary);
}
.league-prediction-bar-row {
  display: grid;
  grid-template-columns: minmax(4rem, 1fr) 2fr auto;
  gap: 0.35rem 0.5rem;
  align-items: center;
  font-size: 0.75rem;
  margin-bottom: 0.25rem;
}
.league-prediction-bar-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.league-prediction-bar-track {
  height: 0.35rem;
  border-radius: 100px;
  background: rgba(15, 23, 42, 0.08);
  overflow: hidden;
}
.league-prediction-bar-fill {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--primary);
}
.league-prediction-bar-pct {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  min-width: 2rem;
  text-align: right;
}
.league-prediction-score {
  margin-top: 0.85rem;
  padding-top: 0.75rem;
  border-top: 1px dashed var(--border);
}
.league-prediction-score-title {
  margin: 0 0 0.45rem;
  font-size: 0.88rem;
  font-weight: 600;
}
.league-prediction-score-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem;
}
.league-prediction-score-team {
  flex: 0 0 auto;
  margin: 0;
}
.league-prediction-score-in {
  width: 4rem;
  min-height: 2.25rem;
  text-align: center;
  padding: 0.25rem 0.35rem;
}
.league-prediction-score-sep {
  font-weight: 700;
  opacity: 0.65;
}
.league-prediction-score-hint,
.league-prediction-score-current {
  margin: 0.45rem 0 0;
  font-size: 0.82rem;
}
.league-prediction-score-stats {
  margin-top: 0.55rem;
}
.league-prediction-score-stats-title {
  margin: 0 0 0.25rem;
  font-size: 0.8rem;
}
.league-prediction-score-stats-list {
  margin: 0;
  padding-left: 1.1rem;
  font-size: 0.82rem;
  color: var(--text-muted);
}
.league-prediction-recent {
  margin-top: 0.85rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--border);
}
.league-prediction-recent-title {
  margin: 0 0 0.5rem;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-muted);
}
.league-prediction-recent-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}
.league-prediction-recent-item {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.5rem;
  align-items: baseline;
  font-size: 0.84rem;
  padding: 0.45rem 0.55rem;
  border-radius: var(--radius-sm);
  background: rgba(var(--primary-rgb), 0.06);
}
.league-prediction-recent-author {
  font-weight: 600;
  color: var(--text);
}
.league-prediction-recent-pick {
  color: var(--text-muted);
}
.league-prediction-recent-more {
  margin-top: 0.5rem;
  width: 100%;
  justify-content: center;
}
.event-predictions-block .league-prediction {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 1rem;
  background: var(--bg-surface);
}
.em-tm-matchday-group {
  margin-bottom: 1.25rem;
}
.em-tm-matchday-group-title {
  margin: 0 0 0.5rem;
  font-size: 0.95rem;
  font-weight: 700;
}
.em-tm-result-badge {
  margin: 0.35rem 0 0;
  font-size: 0.9rem;
  color: var(--primary);
  font-weight: 600;
}
.em-tm-result-row {
  align-items: flex-end;
  gap: 0.5rem;
}
.em-tm-result-sep-wrap {
  flex: 0 0 auto;
  text-align: center;
}
.em-tm-result-sep {
  display: inline-block;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 2.4rem;
  color: var(--text-muted);
}
.em-tm-result-hint {
  margin-top: -0.25rem;
  margin-bottom: 0.75rem;
}
.em-tm-result-inline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.5rem;
  margin-top: 0.65rem;
  padding-top: 0.65rem;
  border-top: 1px dashed var(--border);
}
.em-tm-result-inline-label {
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  width: 100%;
}
.em-tm-result-home-in,
.em-tm-result-away-in {
  width: 4.2rem;
  min-width: 3.5rem;
  padding: 0.35rem 0.5rem;
  text-align: center;
}
.em-tm-result-inline-sep {
  font-weight: 700;
  color: var(--text-muted);
}
.league-fixture-score {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 3.5rem;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  background: rgba(var(--primary-rgb), 0.12);
  color: var(--primary);
  font-weight: 800;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
}
.em-tm-phases-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  list-style: none;
  margin: 0 0 0.85rem;
  padding: 0;
}
.em-tm-phases-empty {
  margin: 0;
  font-size: 0.9rem;
}
.em-tm-phase-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.3rem 0.45rem 0.3rem 0.65rem;
  border-radius: 100px;
  background: rgba(var(--primary-rgb), 0.1);
  border: 1px solid rgba(var(--primary-rgb), 0.22);
  font-size: 0.88rem;
  font-weight: 600;
}
.em-tm-phase-chip .btn {
  min-width: 1.75rem;
  padding: 0 0.35rem;
  line-height: 1.4;
}
.em-tm-phases-add-row {
  align-items: flex-end;
}
.em-tm-phases-add-btn-wrap .form-label.em-tm-phases-add-spacer {
  display: block;
  visibility: hidden;
  height: 0;
  margin: 0;
  padding: 0;
}

/* ==========================================================
   RESPONSIVE v3 — écrans étroits, tablettes, grands mobiles
   ========================================================== */

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  overflow-x: clip;
  max-width: 100vw;
}

main#main,
.section,
.container {
  max-width: 100%;
  min-width: 0;
}

.page-hero-v2-title {
  font-size: clamp(1.45rem, 5vw, 2.75rem) !important;
}

.page-hero-v2-sub,
.dashboard-description {
  font-size: clamp(0.9rem, 2.8vw, 1.05rem);
}

/* Badge rôle gérant dans Mes événements */
.mes-evt-role-badge {
  display: inline-block;
  margin-left: 0.35rem;
  padding: 0.1rem 0.45rem;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 600;
  vertical-align: middle;
  color: var(--primary);
  background: rgba(var(--primary-rgb), 0.12);
  border: 1px solid rgba(var(--primary-rgb), 0.22);
  white-space: nowrap;
}

/* Mes événements — tableau → cartes sur mobile */
.mes-evt-table-wrap {
  padding: clamp(8px, 3vw, 16px) !important;
}
.mes-evt-loading-row td {
  text-align: center;
  padding: 1.25rem !important;
  color: var(--accent, #64748b);
}
@media (max-width: 767px) {
  .mes-evt-table-scroll {
    overflow: visible;
  }
  .mes-evt-table {
    min-width: 0 !important;
    display: block;
    border: 0;
  }
  .mes-evt-table thead {
    display: none;
  }
  .mes-evt-table tbody {
    display: block;
  }
  .mes-evt-table tr {
    display: block;
    margin-bottom: 0.85rem;
    padding: 0.85rem 1rem;
    border: 1px solid var(--border, #e2e8f0);
    border-radius: var(--radius-md, 12px);
    background: var(--bg-surface, #fff);
    box-shadow: var(--shadow-sm, 0 1px 3px rgba(0, 0, 0, 0.06));
  }
  [data-theme="dark"] .mes-evt-table tr {
    border-color: rgba(255, 255, 255, 0.1);
    background: var(--bg-surface, #1e293b);
  }
  .mes-evt-table td {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.35rem 0 !important;
    border: 0 !important;
    white-space: normal !important;
    text-align: right;
    font-size: 0.875rem;
  }
  .mes-evt-table td::before {
    content: attr(data-label);
    font-weight: 600;
    color: var(--accent, #64748b);
    text-align: left;
    flex: 0 0 38%;
    max-width: 42%;
  }
  .mes-evt-table td.mes-evt-actions-cell {
    flex-direction: column;
    align-items: stretch;
    padding-top: 0.65rem !important;
    margin-top: 0.35rem;
    border-top: 1px solid var(--border, #e2e8f0) !important;
  }
  .mes-evt-table td.mes-evt-actions-cell::before {
    margin-bottom: 0.35rem;
  }
  .mes-evt-actions-cell .btn,
  .mes-evt-actions-cell .mes-evt-share-inline {
    width: 100%;
    justify-content: center;
  }
  .mes-evt-actions-cell .btn-sm {
    min-height: 40px;
  }
  #mes-evenements-create-form.create-event-form {
    padding: 1rem !important;
  }
  #mes-evenements-btn-add {
    width: 100%;
    justify-content: center;
  }
}

@media (max-width: 479px) {
  .scanner-result,
  .scanner-video-container,
  .scanner-manual {
    max-width: 100%;
  }
  .scanner-code-form .btn {
    flex: 1 1 100%;
    width: 100%;
  }
  .scanner-actions {
    width: 100%;
  }
  .scanner-actions .btn {
    flex: 1 1 calc(50% - 6px);
    min-width: 0;
  }
}

/* Compte — billets empilés sur petit écran */
@media (max-width: 767px) {
  .tickets-list,
  #account-tickets {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
  }
  .ticket-card {
    flex-direction: column !important;
    align-items: stretch !important;
  }
  .ticket-qr {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .ticket-info-header {
    flex-wrap: wrap;
    gap: 0.35rem;
  }
}

/* Formulaires création événement — pleine largeur */
@media (max-width: 1023px) {
  .create-event-form,
  .event-form-grid,
  .tiers-editor-mes-evenements,
  .contacts-editor {
    width: 100%;
    max-width: 100%;
  }
  .tier-row {
    grid-template-columns: 1fr !important;
  }
}

/* Modales et checkout — marges sûres */
@media (max-width: 767px) {
  .modal-content,
  .modal-content-ticket-invoice {
    width: calc(100vw - 16px) !important;
    max-width: calc(100vw - 16px) !important;
    margin-inline: 8px !important;
    max-height: calc(100dvh - 16px) !important;
  }
  /* Ne pas forcer 100dvh sur le scroll facture : ça poussait les boutons hors écran */
  #checkout-invoice-modal .modal-content--checkout-invoice {
    width: 100% !important;
    max-width: none !important;
    margin-inline: 0 !important;
    max-height: none !important;
  }
  #checkout-invoice-modal .checkout-invoice-scroll {
    width: auto !important;
    max-width: none !important;
    margin-inline: 0 !important;
    max-height: none !important;
    flex: 1 1 auto;
    min-height: 0;
  }
}

/* Footer — colonnes empilées */
@media (max-width: 767px) {
  .footer-v2-grid {
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
  }
}

/* Event cards — grille fluide */
@media (max-width: 479px) {
  .events-grid {
    grid-template-columns: 1fr !important;
    gap: 0.85rem !important;
  }
  .event-card {
    min-width: 0;
  }
}

.stats-revenue-projection-wrap {
  margin: 1.25rem 0 1.5rem;
}

/* Admin — projection revenus événement */
.event-revenue-projection {
  margin-top: 0.5rem;
  padding: 1rem 1.1rem;
  border-radius: var(--radius-md, 10px);
  border: 1px solid rgba(16, 24, 40, 0.1);
  background: linear-gradient(180deg, #f8fafc 0%, #f2f4f7 100%);
}
[data-theme="dark"] .event-revenue-projection {
  border-color: rgba(255, 255, 255, 0.1);
  background: linear-gradient(180deg, #1a1f2e 0%, #151922 100%);
}
.event-revenue-projection__title {
  margin: 0 0 0.35rem;
  font-size: 1rem;
  font-weight: 700;
}
.event-revenue-projection__hint {
  margin: 0 0 0.85rem;
}
.event-revenue-projection__seats {
  margin: 0 0 0.75rem;
  font-size: 0.92rem;
}
.event-revenue-projection__note {
  margin: 0 0 0.85rem;
  padding: 0.55rem 0.75rem;
  border-radius: var(--radius-sm, 8px);
  background: #fff8e6;
  color: #7a5b00;
  font-size: 0.88rem;
  border: 1px solid rgba(122, 91, 0, 0.15);
}
[data-theme="dark"] .event-revenue-projection__note {
  background: rgba(255, 200, 50, 0.08);
  color: #f5d27a;
}
.event-revenue-projection__block + .event-revenue-projection__block {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px dashed rgba(16, 24, 40, 0.12);
}
[data-theme="dark"] .event-revenue-projection__block + .event-revenue-projection__block {
  border-top-color: rgba(255, 255, 255, 0.12);
}
.event-revenue-projection__currency {
  margin: 0 0 0.5rem;
  font-weight: 700;
  font-size: 0.95rem;
}
.event-revenue-projection__tiers {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 0.75rem;
  font-size: 0.86rem;
}
.event-revenue-projection__tiers th,
.event-revenue-projection__tiers td {
  padding: 0.35rem 0.45rem;
  text-align: left;
  border-bottom: 1px solid rgba(16, 24, 40, 0.08);
}
[data-theme="dark"] .event-revenue-projection__tiers th,
[data-theme="dark"] .event-revenue-projection__tiers td {
  border-bottom-color: rgba(255, 255, 255, 0.08);
}
.event-revenue-projection__tiers th {
  font-weight: 600;
  color: #475467;
}
[data-theme="dark"] .event-revenue-projection__tiers th {
  color: #98a2b3;
}
.event-revenue-projection__split {
  list-style: none;
  margin: 0;
  padding: 0;
}
.event-revenue-projection__split li {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.4rem 0;
  font-size: 0.9rem;
  border-bottom: 1px solid rgba(16, 24, 40, 0.06);
}
[data-theme="dark"] .event-revenue-projection__split li {
  border-bottom-color: rgba(255, 255, 255, 0.06);
}
.event-revenue-projection__split li span {
  color: #475467;
}
[data-theme="dark"] .event-revenue-projection__split li span {
  color: #98a2b3;
}
.event-revenue-projection__split li strong {
  font-weight: 700;
  white-space: nowrap;
}
.event-revenue-projection__organizer {
  margin-top: 0.15rem;
  padding-top: 0.55rem !important;
  border-bottom: none !important;
  font-size: 0.95rem !important;
}
.event-revenue-projection__organizer strong {
  color: #027a48;
}
[data-theme="dark"] .event-revenue-projection__organizer strong {
  color: #6ce9a6;
}

.event-team-badge-card {
  max-width: 320px;
  text-align: center;
}
.event-team-badge-mission {
  font-size: 1.1rem;
  font-weight: 600;
  margin-bottom: 0.75rem;
}
.event-team-badge-qr-wrap {
  display: flex;
  justify-content: center;
  margin: 0.5rem 0 1rem;
}
.event-team-badge-qr-wrap canvas {
  border-radius: 12px;
  background: #fff;
  padding: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}
.event-team-badge-code {
  word-break: break-all;
  font-size: 0.75rem;
  opacity: 0.75;
}

/* ── Badge mission vertical (modèle carte accès) ── */
.mission-badge-page .mission-badge-container {
  max-width: 420px;
  margin: 0 auto;
  padding-top: 1rem;
  padding-bottom: 2rem;
}
.mission-badge-form-card {
  margin-bottom: 1.5rem;
}
.mission-badge-result-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin-top: 1.25rem;
}
.tosala-mission-badge {
  width: 280px;
  max-width: 100%;
  margin: 0 auto;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 16px 48px rgba(10, 22, 40, 0.28);
  background: #0a1628;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: #fff;
}
.tosala-mission-badge__slot {
  width: 44px;
  height: 10px;
  margin: 10px auto 0;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.22);
}
.tosala-mission-badge__header {
  padding: 14px 16px 12px;
  background: linear-gradient(135deg, #0a1628 0%, #122a4a 100%);
  position: relative;
  overflow: hidden;
}
.tosala-mission-badge__header::after {
  content: "";
  position: absolute;
  right: -8px;
  top: 8px;
  width: 90px;
  height: 70px;
  background: radial-gradient(circle at 20% 30%, rgba(100, 180, 255, 0.35) 2px, transparent 3px),
    radial-gradient(circle at 60% 50%, rgba(100, 180, 255, 0.25) 2px, transparent 3px),
    radial-gradient(circle at 40% 70%, rgba(100, 180, 255, 0.2) 2px, transparent 3px);
  opacity: 0.8;
  pointer-events: none;
}
.tosala-mission-badge__brand {
  display: flex;
  align-items: center;
  gap: 10px;
  position: relative;
  z-index: 1;
}
.tosala-mission-badge__logo {
  width: 36px;
  height: 36px;
  object-fit: contain;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.08);
  flex-shrink: 0;
}
.tosala-mission-badge__event-name {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1.2;
  text-transform: uppercase;
}
.tosala-mission-badge__event-sub {
  font-size: 0.62rem;
  opacity: 0.75;
  margin-top: 2px;
  letter-spacing: 0.04em;
}
.tosala-mission-badge__body {
  background: #ffffff;
  color: #0a1628;
  padding: 18px 16px 14px;
  text-align: center;
}
.tosala-mission-badge__access-label {
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: #3d4f66;
  margin-bottom: 4px;
}
.tosala-mission-badge__role {
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  line-height: 1.15;
  margin-bottom: 10px;
  word-break: break-word;
}
.tosala-mission-badge__name {
  font-size: 0.78rem;
  font-weight: 600;
  color: #334155;
  margin-bottom: 8px;
}
.tosala-mission-badge__dates {
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: #0a1628;
  padding-bottom: 10px;
  margin-bottom: 10px;
  border-bottom: 1px solid rgba(10, 22, 40, 0.12);
}
.tosala-mission-badge__qr-wrap {
  display: flex;
  justify-content: center;
  margin: 8px 0 10px;
}
.tosala-mission-badge__qr-wrap canvas {
  width: 148px !important;
  height: 148px !important;
  display: block;
}
.tosala-mission-badge__code {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: #0a1628;
}
.tosala-mission-badge__footer {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 10px 12px 14px;
  background: #0a1628;
  font-size: 0.48rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 1.35;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.88);
}
.tosala-mission-badge__shield {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin-top: 1px;
  opacity: 0.9;
}
.event-manage-share-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.event-manage-share-actions .form-control {
  flex: 1;
  min-width: 180px;
}
#event-manage-share-save {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding-left: 0.7rem;
  padding-right: 0.85rem;
  width: auto;
  min-width: auto;
}
.event-manage-share-save-label {
  font-size: 0.85rem;
  font-weight: 600;
}
@media (max-width: 480px) {
  .event-manage-share-save-label {
    display: none;
  }
  #event-manage-share-save {
    padding-left: 0;
    padding-right: 0;
  }
}

.event-team-qr-modal {
  position: fixed;
  inset: 0;
  z-index: 12000;
  background: rgba(15, 23, 42, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}
.event-team-qr-modal__box {
  background: var(--card-bg, #fff);
  border-radius: 16px;
  padding: 1.25rem 1.5rem 1.5rem;
  max-width: 320px;
  width: 100%;
  text-align: center;
  position: relative;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.2);
}
.event-team-qr-modal__close {
  position: absolute;
  top: 0.5rem;
  right: 0.75rem;
  border: none;
  background: transparent;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  color: inherit;
}
.event-team-qr-modal__box--badge {
  max-width: 360px;
}
.event-team-qr-modal__box--badge h3 {
  font-size: 0.95rem;
  margin: 0 1.5rem 0.75rem 0;
  text-align: left;
}
.event-team-qr-modal__box--badge .tosala-mission-badge,
.event-team-qr-modal__box--badge .tosala-team-badge {
  margin-top: 0.25rem;
}

/* ── Badge équipe (organisateur & gérants) ── */
.tosala-team-badge {
  width: 280px;
  max-width: 100%;
  margin: 0 auto;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 16px 48px rgba(30, 27, 75, 0.28);
  background: #1e1b4b;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: #fff;
  border: 2px solid rgba(255, 255, 255, 0.12);
}
.tosala-team-badge--owner {
  box-shadow: 0 16px 48px rgba(92, 61, 30, 0.35);
  border-color: rgba(212, 168, 83, 0.45);
}
.tosala-team-badge__ribbon {
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-align: center;
  padding: 7px 10px;
  background: linear-gradient(90deg, #4338ca 0%, #6366f1 100%);
  color: #fff;
}
.tosala-team-badge--owner .tosala-team-badge__ribbon {
  background: linear-gradient(90deg, #92400e 0%, #d4a853 55%, #b8860b 100%);
  color: #1a0f05;
}
.tosala-team-badge__header {
  padding: 14px 16px 12px;
  background: linear-gradient(135deg, #1e1b4b 0%, #312e81 100%);
  position: relative;
  overflow: hidden;
}
.tosala-team-badge--owner .tosala-team-badge__header {
  background: linear-gradient(135deg, #2d1b0e 0%, #5c3d1e 100%);
}
.tosala-team-badge__header::after {
  content: "";
  position: absolute;
  right: -8px;
  top: 8px;
  width: 90px;
  height: 70px;
  background: radial-gradient(circle at 20% 30%, rgba(167, 139, 250, 0.35) 2px, transparent 3px),
    radial-gradient(circle at 60% 50%, rgba(167, 139, 250, 0.25) 2px, transparent 3px);
  opacity: 0.8;
  pointer-events: none;
}
.tosala-team-badge--owner .tosala-team-badge__header::after {
  background: radial-gradient(circle at 20% 30%, rgba(212, 168, 83, 0.4) 2px, transparent 3px),
    radial-gradient(circle at 60% 50%, rgba(212, 168, 83, 0.28) 2px, transparent 3px);
}
.tosala-team-badge__brand {
  display: flex;
  align-items: center;
  gap: 10px;
  position: relative;
  z-index: 1;
}
.tosala-team-badge__logo {
  width: 36px;
  height: 36px;
  object-fit: contain;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.1);
  flex-shrink: 0;
}
.tosala-team-badge__event-name {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1.2;
  text-transform: uppercase;
}
.tosala-team-badge__event-sub {
  font-size: 0.62rem;
  opacity: 0.8;
  margin-top: 2px;
  letter-spacing: 0.04em;
}
.tosala-team-badge__body {
  background: #ffffff;
  color: #1e1b4b;
  padding: 18px 16px 14px;
  text-align: center;
  border-top: 3px solid #6366f1;
}
.tosala-team-badge--owner .tosala-team-badge__body {
  color: #2d1b0e;
  border-top-color: #d4a853;
}
.tosala-team-badge__access-label {
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: #6366f1;
  margin-bottom: 4px;
}
.tosala-team-badge--owner .tosala-team-badge__access-label {
  color: #b8860b;
}
.tosala-team-badge__role {
  font-size: 1.1rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  line-height: 1.2;
  margin-bottom: 10px;
  word-break: break-word;
}
.tosala-team-badge__name {
  font-size: 0.78rem;
  font-weight: 600;
  color: #475569;
  margin-bottom: 8px;
}
.tosala-team-badge__dates {
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: #1e1b4b;
  padding-bottom: 10px;
  margin-bottom: 10px;
  border-bottom: 1px solid rgba(30, 27, 75, 0.12);
}
.tosala-team-badge--owner .tosala-team-badge__dates {
  color: #2d1b0e;
  border-bottom-color: rgba(45, 27, 14, 0.12);
}
.tosala-team-badge__qr-wrap {
  display: flex;
  justify-content: center;
  margin: 8px 0 10px;
}
.tosala-team-badge__qr-wrap canvas {
  width: 148px !important;
  height: 148px !important;
  display: block;
  border: 2px solid rgba(99, 102, 241, 0.2);
  border-radius: 8px;
}
.tosala-team-badge--owner .tosala-team-badge__qr-wrap canvas {
  border-color: rgba(212, 168, 83, 0.35);
}
.tosala-team-badge__code {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: #1e1b4b;
}
.tosala-team-badge--owner .tosala-team-badge__code {
  color: #2d1b0e;
}
.tosala-team-badge__footer {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 10px 12px 14px;
  background: #1e1b4b;
  font-size: 0.48rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 1.35;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.9);
}
.tosala-team-badge--owner .tosala-team-badge__footer {
  background: linear-gradient(135deg, #2d1b0e 0%, #1a0f05 100%);
  color: rgba(255, 236, 200, 0.92);
}
.tosala-team-badge__icon {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin-top: 1px;
  opacity: 0.95;
}

.tier-day-access {
  grid-column: 1 / -1;
  margin-top: 0.25rem;
  padding-top: 0.5rem;
  border-top: 1px dashed rgba(0, 0, 0, 0.08);
}
.event-create-intro-fields {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(240px, 300px);
  column-gap: 16px;
  row-gap: 12px;
  align-items: start;
  margin-bottom: 0.5rem;
}
@media (min-width: 768px) {
  .event-create-intro-fields > .mes-evt-event-category-wrap,
  .event-create-intro-fields > .form-group.mes-evt-event-category-wrap {
    display: contents;
  }
  .event-create-intro-fields > .mes-evt-event-category-wrap > .form-label-block,
  .event-create-intro-fields > .form-group.mes-evt-event-category-wrap > .form-label-block {
    grid-column: 1 / -1;
    grid-row: 1;
  }
  .event-create-intro-fields > .mes-evt-event-category-wrap > .form-hint,
  .event-create-intro-fields > .form-group.mes-evt-event-category-wrap > .form-hint {
    grid-column: 1 / -1;
    grid-row: 2;
    margin-bottom: 0;
  }
  .event-create-intro-fields > .mes-evt-event-category-wrap > .event-category-select,
  .event-create-intro-fields > .form-group.mes-evt-event-category-wrap > .event-category-select {
    grid-column: 1;
    grid-row: 3;
    align-self: start;
  }
  .event-create-intro-fields > .event-multi-day-section {
    display: contents;
  }
  .event-create-intro-fields > .event-multi-day-section > .event-multi-day-field {
    grid-column: 2;
    grid-row: 3;
    align-self: start;
  }
  .event-create-intro-fields > .js-event-category-detail-wrap {
    grid-column: 1 / -1;
    grid-row: 4;
  }
  .event-create-intro-fields > .form-row {
    grid-column: 1 / -1;
    grid-row: 5;
  }
  .event-create-intro-fields > .event-cover-picker {
    grid-column: 1 / -1;
    grid-row: 6;
  }
  .event-create-intro-fields > .event-multi-day-section > .event-multi-day-days-panel {
    grid-column: 1 / -1;
    grid-row: 7;
  }
}
.event-create-intro-fields > .mes-evt-event-category-wrap,
.event-create-intro-fields > .form-group.mes-evt-event-category-wrap {
  margin-bottom: 0;
}
.event-create-intro-fields > .event-multi-day-section {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  min-width: 0;
}
.event-multi-day-days-panel {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  min-width: 0;
}
.event-multi-day-days-panel:empty {
  display: none;
}
.event-multi-day-section .js-event-days-preview {
  margin: 0;
}
.event-multi-day-section .js-event-days-picker-wrap {
  margin: 0;
  padding: 12px 14px;
  border-radius: var(--radius-sm, 8px);
  background: rgba(0, 0, 0, 0.02);
  border: 1px solid rgba(0, 0, 0, 0.08);
}
[data-theme="dark"] .event-multi-day-section .js-event-days-picker-wrap {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.1);
}
.event-multi-day-section .event-days-picker-title {
  margin-top: 0;
}
.event-category-select {
  width: 100%;
}
.event-multi-day-field {
  padding: 10px 12px;
  border-radius: var(--radius-sm, 8px);
  background: rgba(0, 0, 0, 0.03);
  border: 1px solid rgba(0, 0, 0, 0.08);
}
[data-theme="dark"] .event-multi-day-field {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.1);
}
.event-create-intro-fields > .js-event-category-detail-wrap {
  margin-bottom: 0;
}
.event-create-intro-fields > .form-row {
  margin-bottom: 0;
}
.event-create-intro-fields > .event-cover-picker {
  grid-column: 1 / -1;
  margin-bottom: 0;
}
.event-category-multi-day-check {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  font-weight: 600;
  line-height: 1.35;
  margin: 0;
  cursor: pointer;
}
.event-category-multi-day-check__body {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  min-width: 0;
}
.event-category-multi-day-check__title {
  display: block;
  line-height: 1.35;
}
.event-category-multi-day-check input[type="checkbox"] {
  margin-top: 0.15rem;
  flex-shrink: 0;
  width: 18px;
  height: 18px;
}
.event-category-multi-day-hint {
  display: block;
  margin: 0;
  padding: 0;
  font-size: 0.85rem;
  font-weight: 400;
  line-height: 1.45;
  color: var(--text-muted, #667085);
}
[data-theme="dark"] .event-category-multi-day-hint {
  color: rgba(255, 255, 255, 0.65);
}
@media (max-width: 767px) {
  .event-create-intro-fields {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  .event-create-intro-fields > .mes-evt-event-category-wrap,
  .event-create-intro-fields > .form-group.mes-evt-event-category-wrap {
    order: 1;
    display: block;
  }
  .event-create-intro-fields > .js-event-category-detail-wrap {
    order: 2;
  }
  .event-create-intro-fields > .form-row {
    order: 3;
  }
  .event-create-intro-fields > .event-cover-picker {
    order: 4;
    width: 100%;
  }
  .event-create-intro-fields > .event-multi-day-section {
    width: 100%;
    align-self: stretch;
    order: 5;
  }
}
.event-days-picker-title {
  display: block;
  font-weight: 600;
  margin: 0 0 0.25rem;
}
.event-days-picker-intro {
  margin: 0 0 0.75rem;
}
.event-days-picker {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.event-day-pick-row {
  display: grid;
  grid-template-columns: minmax(140px, 200px) 1fr;
  gap: 0.5rem 0.75rem;
  align-items: center;
  padding: 0.5rem 0.65rem;
  border-radius: var(--radius-sm, 8px);
  background: rgba(0, 0, 0, 0.02);
  border: 1px solid rgba(0, 0, 0, 0.06);
}
[data-theme="dark"] .event-day-pick-row {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.08);
}
.event-day-pick-check {
  display: flex;
  align-items: flex-start;
  gap: 0.45rem;
  margin: 0;
  font-weight: 500;
  line-height: 1.35;
}
.event-day-pick-check input[type="checkbox"] {
  margin-top: 0.15rem;
  flex-shrink: 0;
}
@media (max-width: 600px) {
  .event-day-pick-row {
    grid-template-columns: 1fr;
  }
}
.tier-day-picks {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  margin-top: 0.5rem;
}
.tier-day-pick {
  font-size: 0.85rem;
}
[data-theme="dark"] .tier-day-access {
  border-top-color: rgba(255, 255, 255, 0.12);
}

  display: inline-block;
  font-weight: 500;
  color: var(--text-muted, #475467);
}
.event-team-email-preview--warn {
  color: #b54708;
}