/* ============================================================
   LiB Connect - Theme Magazine Noir/Blanc
   Editorial / Fashion Journal Style
   ============================================================ */

/* -------------------------------------------------------
   1. CSS Custom Properties
   ------------------------------------------------------- */
:root {
  --noir: #000000;
  --blanc: #FFFFFF;
  --gris-50: #FAFAFA;
  --gris-100: #F5F5F5;
  --gris-200: #E5E5E5;
  --gris-300: #D4D4D4;
  --gris-400: #A3A3A3;
  --gris-500: #737373;
  --gris-600: #525252;
  --gris-700: #404040;
  --gris-800: #262626;
  --gris-900: #171717;
  --accent: #000000;
  --accent-light: #F5F5F5;
  --success: #16a34a;
  --success-light: #f0fdf4;
  --error: #dc2626;
  --error-light: #fef2f2;
  --info: #2563eb;
  --info-light: #eff6ff;

  --font-heading: 'Playfair Display', 'Georgia', serif;
  --font-body: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --shadow-sm: 0 1px 3px rgba(0,0,0,0.05);
  --shadow-md: 0 2px 8px rgba(0,0,0,0.08);
  --shadow-lg: 0 4px 16px rgba(0,0,0,0.1);
  --shadow-xl: 0 8px 30px rgba(0,0,0,0.12);

  --sidebar-width: 240px;
  --bottom-nav-height: 64px;
  --transition: 200ms ease;
}

/* -------------------------------------------------------
   2. Reset & Base
   ------------------------------------------------------- */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

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

body {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 14px;
  line-height: 1.6;
  color: var(--gris-700);
  background-color: var(--gris-50);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; cursor: pointer; }

button, a, input, select, textarea {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

button {
  cursor: pointer;
  border: none;
  background: none;
  font-family: inherit;
  font-size: inherit;
}

input, select, textarea {
  font-family: inherit;
  font-size: inherit;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  color: var(--gris-900);
  line-height: 1.2;
}

/* Force white headings inside dark backgrounds */
.landing-cta h1, .landing-cta h2, .landing-cta h3,
.landing-cta-banner h1, .landing-cta-banner h2, .landing-cta-banner h3,
.landing-app-section h1, .landing-app-section h2, .landing-app-section h3,
.landing-final-cta h1, .landing-final-cta h2, .landing-final-cta h3,
.landing-footer h1, .landing-footer h2, .landing-footer h3, .landing-footer h4,
.tarif-card-header h1, .tarif-card-header h2, .tarif-card-header h3 {
  color: var(--blanc);
}

/* -------------------------------------------------------
   3. Pages System
   ------------------------------------------------------- */
.page {
  display: none;
}

.page.active {
  display: block;
}

/* Public pages (landing, auth) are direct children of #app */
#app > .page {
  min-height: 100vh;
}

/* App pages inside main-content */
#main-content {
  flex: 1;
  min-height: 100vh;
  overflow-y: auto;
  background: var(--gris-50);
}

#main-content .page {
  padding: 32px 24px;
  padding-bottom: calc(32px + var(--bottom-nav-height) + 16px);
  max-width: 960px;
  margin: 0 auto;
}

/* -------------------------------------------------------
   4. App Layout (Sidebar + Main)
   ------------------------------------------------------- */
#app-layout {
  display: flex;
  min-height: 100vh;
}

/* -------------------------------------------------------
   5. Sidebar (Desktop >= 768px)
   ------------------------------------------------------- */
.sidebar {
  display: none;
  width: var(--sidebar-width);
  min-height: 100vh;
  background: var(--blanc);
  border-right: 1px solid var(--gris-200);
  flex-direction: column;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  z-index: 100;
}

.sidebar-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 24px 20px;
  border-bottom: 1px solid var(--gris-200);
}

.sidebar-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
}

.sidebar-brand {
  font-family: var(--font-heading);
  font-size: 24px;
  font-weight: 700;
  color: var(--noir);
  letter-spacing: 1px;
}

.sidebar-nav {
  flex: 1;
  padding: 16px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.sidebar-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  color: var(--gris-600);
  transition: all var(--transition);
  cursor: pointer;
}

.sidebar-link:hover {
  background: var(--gris-100);
  color: var(--gris-900);
}

.sidebar-link.active {
  background: var(--noir);
  color: var(--blanc);
}

.sidebar-link.active svg {
  stroke: var(--blanc);
}

.sidebar-link-logout {
  color: var(--error);
}

.sidebar-link-logout:hover {
  background: var(--error-light);
  color: var(--error);
}

.sidebar-footer {
  padding: 12px;
  border-top: 1px solid var(--gris-200);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.sidebar-user {
  padding: 8px 12px;
  font-size: 12px;
  color: var(--gris-500);
  font-weight: 500;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

/* -------------------------------------------------------
   6. Bottom Nav (Mobile < 768px)
   ------------------------------------------------------- */
.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: var(--bottom-nav-height);
  background: var(--blanc);
  border-top: 1px solid var(--gris-200);
  display: flex;
  align-items: center;
  justify-content: space-around;
  z-index: 200;
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

.bottom-nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 6px 0;
  font-size: 10px;
  font-weight: 500;
  color: var(--gris-400);
  transition: color var(--transition);
  flex: 1;
  -webkit-user-select: none;
  user-select: none;
  min-height: 44px;
  justify-content: center;
}

.bottom-nav-item svg {
  transition: stroke var(--transition);
}

.bottom-nav-item.active {
  color: var(--noir);
}

.bottom-nav-item.active svg {
  stroke: var(--noir);
}

/* -------------------------------------------------------
   7. Landing Page - Magazine Editorial
   ------------------------------------------------------- */
.landing {
  background: var(--blanc);
  min-height: 100vh;
}

.landing-wrapper {
  background: var(--blanc);
}

/* Landing Nav */
.landing-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: rgba(255,255,255,0.97);
  border-bottom: 1px solid var(--gris-200);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.landing-nav-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.landing-logo {
  display: flex;
  align-items: center;
  gap: 10px;
}

.landing-logo-img {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
}

.landing-logo-text {
  font-family: var(--font-heading);
  font-size: 24px;
  font-weight: 700;
  color: var(--noir);
  letter-spacing: 1px;
}

.landing-nav-logo {
  display: flex;
  align-items: center;
  gap: 10px;
}

.landing-nav-avatar-img {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
}

.landing-nav-brand {
  font-family: var(--font-heading);
  font-size: 24px;
  font-weight: 700;
  color: var(--noir);
  letter-spacing: 1px;
}

.landing-menu {
  display: none;
  gap: 32px;
}

.landing-menu-link {
  font-size: 13px;
  font-weight: 500;
  color: var(--gris-600);
  letter-spacing: 0.5px;
  text-transform: uppercase;
  transition: color var(--transition);
}

.landing-menu-link:hover {
  color: var(--noir);
}

.landing-nav-links {
  display: none;
  gap: 32px;
}

.landing-nav-link {
  font-size: 13px;
  font-weight: 500;
  color: var(--gris-600);
  letter-spacing: 0.5px;
  text-transform: uppercase;
  transition: color var(--transition);
}

.landing-nav-link:hover {
  color: var(--noir);
}

.landing-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.landing-nav-actions {
  display: flex;
  align-items: center;
  gap: 16px;
}

.landing-nav-login {
  font-size: 13px;
  font-weight: 500;
  color: var(--gris-700);
  display: none;
}

.landing-nav-cta {
  font-size: 13px;
  font-weight: 600;
  color: var(--blanc);
  background: var(--noir);
  padding: 8px 20px;
  letter-spacing: 0.5px;
}

/* Landing Burger (mobile) */
.landing-burger {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 8px;
  cursor: pointer;
  background: none;
  border: none;
}

.landing-burger span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--noir);
  transition: all 0.3s ease;
}

/* Landing Mobile Menu */
.landing-mobile-menu {
  display: none;
  position: fixed;
  top: 64px;
  left: 0;
  right: 0;
  background: var(--blanc);
  border-bottom: 1px solid var(--gris-200);
  padding: 16px 24px;
  flex-direction: column;
  gap: 12px;
  z-index: 99;
  box-shadow: var(--shadow-lg);
}

.landing-mobile-menu.open {
  display: flex;
}

.landing-mobile-link {
  font-size: 14px;
  font-weight: 500;
  color: var(--gris-600);
  padding: 8px 0;
  border-bottom: 1px solid var(--gris-100);
}

.landing-mobile-link:hover {
  color: var(--noir);
}

/* Landing Hero */
.landing-hero {
  padding: 100px 24px 60px;
  max-width: 1200px;
  margin: 0 auto;
}

/* Hero Slideshow */
.landing-hero-slideshow {
  position: relative;
  max-width: 100%;
  margin: 0;
  padding: 0;
  min-height: 85vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.hero-slides {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero-slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 1.5s ease-in-out;
  transform: scale(1.05);
  animation: heroSlideZoom 10s ease-in-out infinite alternate;
}

.hero-slide-active {
  opacity: 1;
}

@keyframes heroSlideZoom {
  0% { transform: scale(1); }
  100% { transform: scale(1.08); }
}

.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.35) 50%, rgba(0,0,0,0.65) 100%);
  z-index: 1;
}

.landing-hero-slideshow .landing-hero-content {
  position: relative;
  z-index: 2;
  max-width: 700px;
  text-align: center;
  padding: 40px 24px;
}

.landing-hero-slideshow .landing-date {
  color: #fff;
}

.landing-hero-slideshow .landing-title {
  color: #fff;
  font-size: 48px;
  text-shadow: 0 2px 20px rgba(0,0,0,0.3);
}

.hero-logo-circle {
  display: flex;
  justify-content: center;
  margin: 20px auto;
  overflow: hidden;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  margin-left: auto;
  margin-right: auto;
}

.hero-logo-img {
  width: 160px;
  height: 160px;
  border-radius: 50%;
  object-fit: cover;
  transform: scale(1.35);
  border: 2px solid rgba(255,255,255,0.2);
  box-shadow: 0 8px 32px rgba(0,0,0,0.4);
}

@media (max-width: 768px) {
  .hero-logo-img {
    width: 120px;
    height: 120px;
  }
}

.landing-hero-slideshow .landing-title-italic {
  color: #c19b64;
}

.landing-hero-slideshow .landing-subtitle {
  color: #fff;
  font-size: 16px;
  text-shadow: 0 1px 6px rgba(0,0,0,0.4);
}

/* Buttons for hero slideshow */
.btn-outline-light {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 28px;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  border-radius: 6px;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.3s;
  border: 2px solid #fff;
  color: #fff;
  background: rgba(255,255,255,0.15);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  text-shadow: 0 1px 4px rgba(0,0,0,0.4);
}

.btn-outline-light:hover {
  background: rgba(255,255,255,0.3);
  border-color: #fff;
}

.landing-hero-inner {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.landing-hero-content {
  max-width: 600px;
}

.landing-date {
  font-size: 12px;
  font-weight: 500;
  color: var(--gris-500);
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-bottom: 16px;
}

.landing-title {
  font-family: var(--font-heading);
  font-size: 40px;
  font-weight: 700;
  line-height: 1.1;
  color: var(--noir);
  margin-bottom: 20px;
}

.landing-title-line {
  display: block;
}

.landing-title-italic {
  font-family: var(--font-body);
  font-style: italic;
  font-weight: 300;
  letter-spacing: 1px;
}

.landing-hero-title {
  font-family: var(--font-heading);
  font-size: 40px;
  font-weight: 700;
  line-height: 1.1;
  color: var(--noir);
  margin-bottom: 20px;
}

.landing-hero-title em {
  font-style: italic;
  font-weight: 400;
}

.landing-subtitle {
  font-size: 16px;
  font-weight: 300;
  color: var(--gris-600);
  line-height: 1.7;
  margin-bottom: 32px;
}

.landing-hero-subtitle {
  font-size: 16px;
  font-weight: 300;
  color: var(--gris-600);
  line-height: 1.7;
  margin-bottom: 32px;
}

.landing-hero-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: 32px;
}

.btn-landing-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--noir);
  color: var(--blanc);
  padding: 14px 28px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.5px;
  transition: all var(--transition);
}

.btn-landing-primary:hover {
  opacity: 0.85;
  transform: translateY(-1px);
}

.btn-landing-secondary {
  display: inline-flex;
  align-items: center;
  padding: 14px 28px;
  font-size: 14px;
  font-weight: 500;
  color: var(--noir);
  border: 1px solid var(--noir);
  background: transparent;
  transition: all var(--transition);
}

.btn-landing-secondary:hover {
  background: var(--noir);
  color: var(--blanc);
}

.landing-hero-stats {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
}

.hero-stat-pill {
  font-size: 13px;
  color: var(--gris-600);
}

.hero-stat-pill strong {
  color: var(--noir);
  font-weight: 700;
}

.landing-hero-visual {
  display: flex;
  justify-content: center;
}

.hero-avatar-showcase {
  position: relative;
  width: 280px;
  height: 280px;
}

.hero-avatar-img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--gris-200);
}

/* Landing Stats Band */
.landing-stats {
  background: var(--noir);
  padding: 32px 24px;
}

.landing-stats-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  gap: 24px;
}

.landing-stat {
  text-align: center;
}

.landing-stat-number {
  display: block;
  font-family: var(--font-heading);
  font-size: 28px;
  font-weight: 700;
  color: var(--blanc);
  line-height: 1.2;
}

.landing-stat-label {
  display: block;
  font-size: 12px;
  font-weight: 500;
  color: var(--gris-400);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-top: 4px;
}

/* Landing Sections */
.landing-section {
  padding: 60px 24px;
  max-width: 1200px;
  margin: 0 auto;
}

.landing-section-alt {
  background: var(--gris-50);
}

.landing-section-inner {
  max-width: 1200px;
  margin: 0 auto;
}

.landing-section-tag {
  display: block;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 3px;
  color: var(--gris-500);
  margin-bottom: 12px;
}

.landing-section-label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 3px;
  color: var(--gris-500);
  margin-bottom: 12px;
}

.landing-section-title {
  font-family: var(--font-heading);
  font-size: 32px;
  font-weight: 700;
  color: var(--noir);
  margin-bottom: 12px;
}

.landing-section-desc {
  font-size: 15px;
  font-weight: 300;
  color: var(--gris-500);
  max-width: 600px;
  margin-bottom: 40px;
  line-height: 1.7;
}

.landing-section-subtitle {
  font-size: 15px;
  font-weight: 300;
  color: var(--gris-500);
  max-width: 600px;
  margin-bottom: 40px;
}

/* Concept Grid (landing) */
.landing-concepts {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}

/* Concept - Editorial / Journal Style */
.concept-premium {
  position: relative;
  background: #fff;
  padding: 80px 24px;
  overflow: hidden;
}

.concept-bg-glow { display: none; }

.concept-inner {
  max-width: 1100px;
  margin: 0 auto;
  text-align: center;
}

.concept-tag {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: #000;
  margin-bottom: 16px;
}

.concept-title {
  font-family: var(--font-heading);
  font-size: 38px;
  font-weight: 700;
  color: #000;
  margin-bottom: 16px;
}

.concept-title em {
  font-style: italic;
  font-weight: 400;
}

.concept-desc {
  font-size: 15px;
  color: #666;
  max-width: 520px;
  margin: 0 auto 48px;
  line-height: 1.8;
  font-weight: 300;
}

.concept-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  text-align: left;
  border: 1px solid #000;
}

/* Concept Cards - Journal */
.concept-card {
  position: relative;
  background: #fff;
  padding: 32px 24px;
  transition: all 0.3s;
  overflow: hidden;
  border-right: 1px solid #000;
}

.concept-card:last-child {
  border-right: none;
}

.concept-card:hover {
  background: #fafafa;
}

.concept-card-shine { display: none; }

.concept-card-number {
  font-family: var(--font-heading);
  font-size: 48px;
  font-weight: 700;
  color: #f0f0f0;
  line-height: 1;
  margin-bottom: 12px;
  position: absolute;
  top: 16px;
  right: 20px;
}

.concept-card-icon {
  width: auto;
  height: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border-radius: 0;
  margin-bottom: 16px;
}

.concept-card-icon svg {
  stroke: #000;
  stroke-width: 1;
}

.concept-card:hover .concept-card-icon {
  background: none;
  box-shadow: none;
}

.concept-card-name {
  font-family: var(--font-heading);
  font-size: 24px;
  font-weight: 700;
  color: #000;
  margin: 0 0 4px;
  text-transform: none;
}

.concept-card-count {
  font-size: 12px;
  color: #000;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin: 0 0 16px;
}

.concept-card-line {
  width: 30px;
  height: 2px;
  background: #000;
  margin-bottom: 16px;
}

.concept-card-desc {
  font-size: 14px;
  color: #666;
  line-height: 1.7;
  margin: 0 0 20px;
  font-weight: 300;
}

.concept-card-features {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.concept-card-features span {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #000;
  padding: 4px 10px;
  background: #fff;
  border: 1px solid #000;
  border-radius: 0;
  transition: all 0.3s;
}

.concept-card:hover .concept-card-features span {
  background: #000;
  color: #fff;
  border-color: #000;
}

/* Remove per-card color accents */
.concept-card-coiffure:hover,
.concept-card-bienetre:hover,
.concept-card-onglerie:hover,
.concept-card-barber:hover { border-color: transparent; }

.concept-card-bienetre .concept-card-icon,
.concept-card-onglerie .concept-card-icon,
.concept-card-barber .concept-card-icon { background: none; }

.concept-card-bienetre .concept-card-icon svg,
.concept-card-onglerie .concept-card-icon svg,
.concept-card-barber .concept-card-icon svg { stroke: #000; }

.concept-card-bienetre .concept-card-count,
.concept-card-onglerie .concept-card-count,
.concept-card-barber .concept-card-count { color: #000; }

.concept-card-bienetre .concept-card-line,
.concept-card-onglerie .concept-card-line,
.concept-card-barber .concept-card-line { background: #000; }

.concept-card-bienetre:hover .concept-card-icon,
.concept-card-onglerie:hover .concept-card-icon,
.concept-card-barber:hover .concept-card-icon { background: none; box-shadow: none; }

.concept-card-bienetre:hover .concept-card-features span,
.concept-card-onglerie:hover .concept-card-features span,
.concept-card-barber:hover .concept-card-features span { border-color: #000; background: #000; color: #fff; }

/* Responsive concept */
@media (max-width: 1023px) {
  .concept-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .concept-card {
    border-bottom: 1px solid #000;
  }
  .concept-card:nth-child(2n) {
    border-right: none;
  }
  .concept-card:nth-last-child(-n+2) {
    border-bottom: none;
  }
}

@media (max-width: 480px) {
  .concept-grid {
    grid-template-columns: 1fr 1fr;
  }
  .concept-card {
    padding: 20px 16px;
  }
  .concept-card-number {
    font-size: 36px;
  }
  .concept-title {
    font-size: 28px;
  }
}

@media (min-width: 1024px) {
  .concept-premium {
    padding: 100px 24px;
  }
  .concept-title {
    font-size: 44px;
  }
}

/* Keep old classes */
.landing-concept-card {
  background: var(--blanc);
  border: 1px solid var(--gris-200);
  padding: 32px 24px;
  transition: all var(--transition);
}

.landing-concept-card:hover {
  border-color: var(--gris-300);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.landing-concept-icon {
  margin-bottom: 16px;
  color: var(--noir);
}

.landing-concept-name {
  font-family: var(--font-heading);
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 4px;
}

.landing-concept-count {
  font-size: 13px;
  color: var(--gris-500);
  font-weight: 500;
  margin-bottom: 8px;
}

.landing-concept-desc {
  font-size: 14px;
  color: var(--gris-500);
  line-height: 1.6;
}

.concept-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}

.concept-card {
  background: var(--blanc);
  border: 1px solid var(--gris-200);
  padding: 32px 24px;
  transition: all var(--transition);
}

.concept-card:hover {
  border-color: var(--gris-300);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.concept-card-number {
  font-family: var(--font-heading);
  font-size: 36px;
  font-weight: 700;
  color: var(--gris-200);
  margin-bottom: 16px;
}

.concept-card h3 {
  font-family: var(--font-heading);
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 8px;
}

.concept-card p {
  font-size: 14px;
  color: var(--gris-500);
  line-height: 1.6;
}

.concept-card-icon {
  margin-bottom: 12px;
}

/* Landing CTA Section */
.landing-cta {
  background: var(--noir);
  padding: 60px 24px;
  text-align: center;
}

.landing-cta-inner {
  max-width: 600px;
  margin: 0 auto;
}

.landing-cta-title {
  font-family: var(--font-heading);
  font-size: 28px;
  font-weight: 700;
  color: var(--blanc);
  margin-bottom: 12px;
}

.landing-cta-desc {
  font-size: 15px;
  color: var(--gris-400);
  margin-bottom: 28px;
  line-height: 1.6;
}

/* ============================================================
   CTA Immersive - Premium Reservation Section
   ============================================================ */
.landing-cta-immersive {
  position: relative;
  background: #0a0a0a;
  padding: 80px 24px 60px;
  text-align: center;
  overflow: hidden;
}

.cta-imm-bg-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(193,155,100,0.12) 0%, rgba(193,155,100,0.04) 40%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}

.cta-imm-content {
  position: relative;
  z-index: 2;
  margin-bottom: 48px;
}

.cta-imm-tag {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: #c19b64;
  margin-bottom: 16px;
}

.cta-imm-title {
  font-family: var(--font-heading);
  font-size: 36px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 12px;
  letter-spacing: 0.5px;
}

.cta-imm-desc {
  font-size: 15px;
  color: #8a8a8a;
  max-width: 480px;
  margin: 0 auto;
  line-height: 1.6;
}

/* Carousel */
.cta-imm-carousel {
  position: relative;
  z-index: 2;
  margin-bottom: 24px;
}

.cta-imm-track {
  display: flex;
  justify-content: center;
  gap: 16px;
  perspective: 900px;
  padding: 20px 0;
}

/* Cards */
.cta-imm-card {
  position: relative;
  width: 160px;
  min-height: 200px;
  background: rgba(255,255,255,0.04);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(193,155,100,0.15);
  border-radius: 16px;
  padding: 28px 16px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  transition: all 0.5s cubic-bezier(0.23,1,0.32,1);
  cursor: pointer;
  transform: scale(0.88) translateY(10px);
  opacity: 0.5;
  filter: blur(1px);
}

.cta-imm-card:hover {
  opacity: 0.75;
  transform: scale(0.92) translateY(5px);
  filter: blur(0px);
}

.cta-imm-card-active {
  transform: scale(1) translateY(0);
  opacity: 1;
  filter: blur(0px);
  background: rgba(255,255,255,0.07);
  border-color: rgba(193,155,100,0.4);
  box-shadow: 0 0 40px rgba(193,155,100,0.12), 0 20px 60px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.08);
}

.cta-imm-card-glow {
  position: absolute;
  bottom: -20px;
  left: 50%;
  transform: translateX(-50%);
  width: 80%;
  height: 40px;
  background: radial-gradient(ellipse, rgba(193,155,100,0.2) 0%, transparent 70%);
  opacity: 0;
  transition: opacity 0.5s;
  pointer-events: none;
}

.cta-imm-card-active .cta-imm-card-glow {
  opacity: 1;
}

.cta-imm-card-icon {
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 4px;
}

.cta-imm-card-icon svg {
  stroke: #c19b64;
  filter: drop-shadow(0 0 8px rgba(193,155,100,0.3));
}

.cta-imm-card-active .cta-imm-card-icon svg {
  stroke: #d4af72;
  filter: drop-shadow(0 0 16px rgba(193,155,100,0.5));
}

.cta-imm-card-title {
  font-family: var(--font-heading);
  font-size: 16px;
  font-weight: 600;
  color: #e8e0d4;
  margin: 0;
}

.cta-imm-card-count {
  font-size: 11px;
  color: #777;
  margin: 0;
  letter-spacing: 0.5px;
}

.cta-imm-card-label {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: #555;
  margin-top: auto;
  padding-top: 8px;
  transition: color 0.4s;
}

.cta-imm-card-active .cta-imm-card-title {
  color: #fff;
}

.cta-imm-card-active .cta-imm-card-count {
  color: #b0a08a;
}

.cta-imm-card-active .cta-imm-card-label {
  color: #c19b64;
}

/* Nav arrows */
.cta-imm-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 32px;
  margin-top: 20px;
}

.cta-imm-nav-arrow {
  font-size: 28px;
  color: #555;
  cursor: pointer;
  transition: color 0.3s;
  user-select: none;
  line-height: 1;
}

.cta-imm-nav-arrow:hover {
  color: #c19b64;
}

.cta-imm-nav-text {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 4px;
  color: #c19b64;
}

/* Podium effect */
.cta-imm-podium {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: center;
  margin-top: -30px;
  margin-bottom: 32px;
  pointer-events: none;
}

.cta-imm-podium-ring {
  width: 320px;
  height: 60px;
  border-radius: 50%;
  border: 1px solid rgba(193,155,100,0.25);
  box-shadow: 0 0 30px rgba(193,155,100,0.1), 0 0 60px rgba(193,155,100,0.05);
  position: absolute;
}

.cta-imm-podium-ring-2 {
  width: 400px;
  height: 50px;
  border-color: rgba(0,210,211,0.15);
  box-shadow: 0 0 40px rgba(0,210,211,0.08), 0 0 80px rgba(0,210,211,0.03);
  top: 10px;
}

/* CTA Button */
.cta-imm-action {
  position: relative;
  z-index: 2;
  margin-top: 16px;
}

.cta-imm-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 40px;
  background: linear-gradient(135deg, #c19b64 0%, #a67c4a 100%);
  color: #0a0a0a;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 60px;
  border: none;
  cursor: pointer;
  transition: all 0.4s cubic-bezier(0.23,1,0.32,1);
  box-shadow: 0 4px 24px rgba(193,155,100,0.3), 0 0 60px rgba(193,155,100,0.1);
}

.cta-imm-btn:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 8px 40px rgba(193,155,100,0.4), 0 0 80px rgba(193,155,100,0.15);
  background: linear-gradient(135deg, #d4af72 0%, #c19b64 100%);
}

.cta-imm-btn svg {
  stroke: #0a0a0a;
  transition: transform 0.3s;
}

.cta-imm-btn:hover svg {
  transform: translateX(4px);
}

/* Responsive */
@media (max-width: 768px) {
  .landing-cta-immersive {
    padding: 60px 16px 48px;
  }
  .cta-imm-title {
    font-size: 28px;
  }
  .cta-imm-track {
    gap: 10px;
    flex-wrap: wrap;
    justify-content: center;
    padding: 20px 8px;
    overflow: hidden;
  }
  .cta-imm-card {
    min-width: 0;
    width: calc(50% - 8px);
    flex-shrink: 0;
  }
  .cta-imm-podium-ring {
    width: 240px;
    height: 45px;
  }
  .cta-imm-podium-ring-2 {
    width: 300px;
    height: 40px;
  }
  .cta-imm-btn {
    padding: 14px 32px;
    font-size: 13px;
  }
}

@media (max-width: 480px) {
  .cta-imm-title {
    font-size: 24px;
  }
  .cta-imm-card {
    width: calc(50% - 6px);
    min-height: 170px;
    padding: 20px 10px 14px;
  }
  .cta-imm-card-icon {
    width: 48px;
    height: 48px;
  }
  .cta-imm-card-icon svg {
    width: 36px;
    height: 36px;
  }
}

/* Landing App Section (new CTA) */
.landing-app-section {
  background: var(--noir);
  padding: 64px 24px;
  text-align: center;
}

.landing-app-section h2 {
  font-family: var(--font-heading);
  font-size: 28px;
  font-weight: 700;
  color: var(--blanc);
  margin-bottom: 12px;
}

.landing-app-section p {
  font-size: 15px;
  color: var(--gris-400);
  margin-bottom: 28px;
}

/* Why Grid */
.why-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}

.why-item {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}

.why-icon {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--gris-200);
}

.why-icon svg {
  stroke: var(--noir);
}

.why-text h4 {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  color: var(--gris-900);
  margin-bottom: 4px;
}

.why-text p {
  font-size: 13px;
  color: var(--gris-500);
}

/* Landing Formulas */
.landing-formulas {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

.landing-formulas-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

.landing-formula-card {
  background: var(--blanc);
  border: 1px solid var(--gris-200);
  padding: 28px 24px;
  position: relative;
  transition: all var(--transition);
}

.landing-formula-card:hover {
  box-shadow: var(--shadow-md);
}

.landing-formula-card.highlighted,
.landing-formula-card-featured {
  border: 2px solid var(--noir);
}

.landing-formula-badge {
  position: absolute;
  top: -1px;
  right: 20px;
  background: var(--noir);
  color: var(--blanc);
  font-size: 11px;
  font-weight: 600;
  padding: 4px 12px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.landing-formula-card.premium {
  background: var(--noir);
  color: var(--blanc);
  border-color: var(--noir);
}

.landing-formula-card.premium h3,
.landing-formula-card.premium .landing-formula-price,
.landing-formula-card.premium .landing-formula-desc,
.landing-formula-card.premium .landing-formula-sub,
.landing-formula-card.premium .landing-formula-price span,
.landing-formula-card.premium .landing-formula-price small {
  color: var(--blanc);
}

.landing-formula-card.premium .landing-formula-sub {
  color: var(--gris-300);
}

.landing-formula-card.premium .formula-features li,
.landing-formula-card.premium .landing-formula-features li {
  color: var(--gris-300);
}

.landing-formula-name {
  font-family: var(--font-heading);
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 4px;
}

.formula-card-header h3 {
  font-family: var(--font-heading);
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 4px;
}

.landing-formula-price {
  font-size: 18px;
  font-weight: 600;
  color: var(--noir);
  margin-bottom: 4px;
}

.landing-formula-price span,
.landing-formula-price small {
  font-size: 13px;
  font-weight: 400;
  color: var(--gris-500);
}

.landing-formula-sub {
  font-size: 13px;
  color: var(--gris-500);
  margin-bottom: 16px;
}

.landing-formula-desc {
  font-size: 13px;
  color: var(--gris-500);
  margin-bottom: 16px;
  margin-top: 8px;
}

.landing-formula-features {
  list-style: none;
  padding: 0;
}

.landing-formula-features li {
  font-size: 13px;
  color: var(--gris-600);
  padding: 4px 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.landing-formula-features li::before {
  content: '';
  width: 4px;
  height: 4px;
  background: var(--noir);
  border-radius: 50%;
  flex-shrink: 0;
}

.landing-formula-card.premium .landing-formula-features li::before {
  background: var(--blanc);
}

.formula-features {
  list-style: none;
  padding: 0;
}

.formula-features li {
  font-size: 13px;
  color: var(--gris-600);
  padding: 4px 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.formula-features li::before {
  content: '';
  width: 4px;
  height: 4px;
  background: var(--noir);
  border-radius: 50%;
  flex-shrink: 0;
}

.landing-formula-card.premium .formula-features li::before {
  background: var(--blanc);
}

.landing-formulas-cta {
  text-align: center;
  margin-top: 32px;
}

/* Testimonials - Premium Google Reviews */
.landing-temoignages {
  background: #0a0a0a;
  padding: 80px 24px;
  overflow: hidden;
}

.temo-inner {
  max-width: 1100px;
  margin: 0 auto;
}

.temo-header {
  text-align: center;
  margin-bottom: 48px;
}

.temo-tag {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: #c19b64;
  margin-bottom: 16px;
}

.temo-title {
  font-family: var(--font-heading);
  font-size: 34px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 20px;
}

.temo-title em {
  font-style: italic;
  color: #c19b64;
}

.temo-google-rating {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.temo-stars {
  display: flex;
  gap: 2px;
}

.temo-rating-text {
  font-size: 14px;
  font-weight: 600;
  color: #aaa;
}

/* Cards */
.temo-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}

.temo-card {
  background: rgba(255,255,255,0.05);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px;
  padding: 28px;
  transition: all 0.4s cubic-bezier(0.23,1,0.32,1);
}

.temo-card:hover {
  background: rgba(255,255,255,0.08);
  border-color: rgba(193,155,100,0.25);
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(0,0,0,0.3);
}

.temo-card-top {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}

.temo-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, #c19b64 0%, #a67c4a 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 700;
  color: #0a0a0a;
  flex-shrink: 0;
}

.temo-avatar-2 {
  background: linear-gradient(135deg, #4285F4 0%, #2b5faa 100%);
  color: #fff;
}

.temo-avatar-3 {
  background: linear-gradient(135deg, #34A853 0%, #1e7e34 100%);
  color: #fff;
}

.temo-author-info {
  flex: 1;
}

.temo-author-name {
  font-size: 15px;
  font-weight: 600;
  color: #fff;
  margin: 0;
}

.temo-author-role {
  font-size: 12px;
  color: #888;
  margin: 2px 0 0;
}

.temo-google-icon {
  flex-shrink: 0;
  opacity: 0.7;
}

.temo-stars-small {
  display: flex;
  gap: 1px;
  margin-bottom: 12px;
}

.temo-text {
  font-size: 14px;
  color: #ccc;
  line-height: 1.7;
  margin: 0 0 12px;
}

.temo-date {
  font-size: 12px;
  color: #666;
  margin: 0;
}

/* Keep old class for backwards compat */
.landing-testimonials {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

.landing-testimonial {
  background: var(--blanc);
  border: 1px solid var(--gris-200);
  padding: 24px;
  transition: all var(--transition);
}

.landing-testimonial:hover {
  box-shadow: var(--shadow-sm);
}

.landing-testimonial-text {
  font-size: 14px;
  font-style: italic;
  color: var(--gris-700);
  line-height: 1.6;
  margin-bottom: 12px;
}

.landing-testimonial-author {
  font-size: 13px;
  font-weight: 600;
  color: var(--gris-500);
}

.testimonials-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

.testimonial-card {
  background: var(--blanc);
  border: 1px solid var(--gris-200);
  padding: 24px;
  transition: all var(--transition);
}

.testimonial-card:hover {
  box-shadow: var(--shadow-sm);
}

.testimonial-stars {
  display: flex;
  gap: 2px;
  margin-bottom: 12px;
}

.testimonial-text {
  font-size: 14px;
  font-style: italic;
  color: var(--gris-700);
  line-height: 1.6;
  margin-bottom: 16px;
}

.testimonial-author {
  display: flex;
  align-items: center;
  gap: 12px;
}

.testimonial-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--gris-100);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 14px;
  color: var(--gris-600);
  flex-shrink: 0;
}

.testimonial-avatar-img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.testimonial-author strong {
  font-size: 14px;
  display: block;
}

.testimonial-author span {
  font-size: 12px;
  color: var(--gris-500);
}

/* CTA Banner */
.landing-cta-banner {
  background: var(--noir);
  padding: 48px 24px;
  margin: 0;
}

.cta-banner-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  text-align: center;
}

.cta-banner-avatar img {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid rgba(255,255,255,0.2);
}

.cta-banner-content h3 {
  font-family: var(--font-heading);
  font-size: 24px;
  color: var(--blanc);
  margin-bottom: 8px;
}

.cta-banner-content p {
  font-size: 14px;
  color: var(--gris-400);
}

.landing-cta-banner .btn-landing-primary {
  background: var(--blanc);
  color: var(--noir);
}

/* Final CTA */
.landing-final-cta {
  background: var(--noir);
  padding: 80px 24px;
  text-align: center;
}

.final-cta-inner {
  max-width: 600px;
  margin: 0 auto;
}

.final-cta-avatar img {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid rgba(255,255,255,0.2);
  margin: 0 auto 24px;
}

.landing-final-cta h2 {
  font-family: var(--font-heading);
  font-size: 32px;
  color: var(--blanc);
  margin-bottom: 16px;
}

.landing-final-cta p {
  font-size: 15px;
  color: var(--gris-400);
  margin-bottom: 32px;
}

.final-cta-actions .btn-landing-primary {
  background: var(--blanc);
  color: var(--noir);
}

.final-cta-note {
  margin-top: 16px;
  font-size: 13px;
  color: var(--gris-400);
}

.final-cta-note a {
  color: var(--gris-300);
  text-decoration: underline;
}

/* Landing Footer */
.landing-footer {
  background: var(--gris-900);
  padding: 48px 24px 24px;
}

.landing-footer-inner {
  max-width: 1200px;
  margin: 0 auto;
}

.landing-footer-brand {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
}

.landing-footer-logo {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
}

.landing-footer-name {
  font-family: var(--font-heading);
  font-size: 20px;
  font-weight: 700;
  color: var(--blanc);
}

.landing-footer-address {
  width: 100%;
  font-size: 13px;
  color: var(--gris-400);
  line-height: 1.6;
}

.landing-footer-top {
  display: flex;
  flex-direction: column;
  gap: 32px;
  margin-bottom: 32px;
}

.footer-brand-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

.footer-avatar-img {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
}

.footer-brand-name {
  font-family: var(--font-heading);
  font-size: 24px;
  font-weight: 700;
  color: var(--blanc);
}

.landing-footer-brand p {
  font-size: 13px;
  color: var(--gris-400);
}

.footer-brand-tagline {
  margin-top: 4px;
}

.landing-footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 24px;
}

.landing-footer-links a {
  font-size: 13px;
  color: var(--gris-300);
  transition: color var(--transition);
}

.landing-footer-links a:hover {
  color: var(--blanc);
}

.landing-footer-info {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}

.footer-col h4 {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--gris-400);
  margin-bottom: 8px;
}

.footer-col p,
.footer-col a {
  font-size: 13px;
  color: var(--gris-300);
  line-height: 1.6;
}

.footer-col a:hover {
  color: var(--blanc);
}

.landing-footer-copy {
  padding-top: 24px;
  border-top: 1px solid var(--gris-800);
}

.landing-footer-copy p {
  font-size: 12px;
  color: var(--gris-400);
  text-align: center;
  line-height: 1.8;
}

.landing-footer-bottom {
  padding-top: 24px;
  border-top: 1px solid var(--gris-800);
}

.landing-footer-bottom p {
  font-size: 12px;
  color: var(--gris-400);
  text-align: center;
}

/* -------------------------------------------------------
   7b. Contact / Footer Premium
   ------------------------------------------------------- */
.landing-contact {
  position: relative;
  background: #0a0a0a;
  padding: 80px 24px 0;
  overflow: hidden;
}

.contact-glow {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 500px;
  height: 300px;
  background: radial-gradient(ellipse, rgba(193,155,100,0.08) 0%, transparent 70%);
  pointer-events: none;
}

.contact-inner {
  max-width: 900px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
  position: relative;
  z-index: 1;
}

.contact-logo-wrap {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  overflow: hidden;
  margin-bottom: 20px;
}

.contact-logo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.35);
}

.contact-title {
  font-family: var(--font-heading);
  font-size: 32px;
  font-weight: 700;
  color: #fff;
  margin: 0 0 4px;
}

.contact-tagline {
  font-family: var(--font-body);
  font-size: 14px;
  color: #c19b64;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-weight: 500;
  margin: 0;
}

.contact-separator {
  width: 50px;
  height: 2px;
  background: linear-gradient(90deg, #c19b64, transparent);
  margin: 24px 0;
}

.contact-details {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-bottom: 32px;
}

.contact-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.contact-item svg {
  flex-shrink: 0;
  margin-top: 2px;
}

.contact-item-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #888;
  margin: 0 0 2px;
}

.contact-item-value {
  font-size: 15px;
  color: #ddd;
  line-height: 1.5;
  margin: 0;
}

.contact-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 36px;
  background: linear-gradient(135deg, #c19b64 0%, #a67c4a 100%);
  color: #0a0a0a;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 60px;
  transition: all 0.4s cubic-bezier(0.23,1,0.32,1);
  box-shadow: 0 4px 24px rgba(193,155,100,0.25);
}

.contact-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 40px rgba(193,155,100,0.35);
  background: linear-gradient(135deg, #d4af72 0%, #c19b64 100%);
}

.contact-btn svg {
  stroke: #0a0a0a;
}

/* Navigation links */
.contact-nav {
  padding: 32px 0;
}

.contact-nav-title {
  font-family: var(--font-heading);
  font-size: 18px;
  font-weight: 600;
  color: #fff;
  margin: 0 0 16px;
}

.contact-nav-link {
  display: block;
  font-size: 14px;
  color: #999;
  text-decoration: none;
  padding: 8px 0;
  transition: color 0.3s;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}

.contact-nav-link:hover {
  color: #c19b64;
}

/* Bottom bar */
.contact-bottom {
  border-top: 1px solid rgba(255,255,255,0.08);
  padding: 24px 0;
  margin-top: 48px;
}

.contact-bottom-inner {
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
}

.contact-copy {
  font-size: 12px;
  color: #555;
  margin: 0;
}

@media (min-width: 768px) {
  .landing-contact {
    padding: 100px 24px 0;
  }

  .contact-inner {
    grid-template-columns: 1fr;
    max-width: 1000px;
    text-align: center;
  }

  .contact-logo-wrap {
    margin: 0 auto 20px;
    width: 100px;
    height: 100px;
  }

  .contact-title {
    font-size: 40px;
  }

  .contact-separator {
    margin: 28px auto;
  }

  .contact-details {
    flex-direction: row;
    justify-content: center;
    gap: 48px;
    margin-bottom: 40px;
  }

  .contact-item {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 10px;
  }

  .contact-item svg {
    margin-top: 0;
  }

  .contact-btn {
    padding: 16px 48px;
    font-size: 15px;
  }

  .contact-nav {
    display: flex;
    justify-content: center;
    gap: 32px;
    padding: 32px 0 0;
    border-top: 1px solid rgba(255,255,255,0.06);
    border-left: none;
    padding-left: 0;
  }

  .contact-nav-title {
    display: none;
  }

  .contact-nav-link {
    display: inline;
    border-bottom: none;
    padding: 0;
    font-size: 13px;
    letter-spacing: 0.5px;
  }
}

/* -------------------------------------------------------
   8. Auth Page
   ------------------------------------------------------- */
.auth-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: var(--blanc);
}

.auth-screen {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: var(--blanc);
}

.auth-container {
  width: 100%;
  max-width: 420px;
}

.auth-header {
  text-align: center;
  margin-bottom: 32px;
}

.auth-back {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  color: var(--gris-500);
  margin-bottom: 24px;
  transition: color var(--transition);
}

.auth-back:hover {
  color: var(--noir);
}

.auth-logo {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: cover;
  margin: 0 auto 16px;
}

.auth-title {
  font-family: var(--font-heading);
  font-size: 28px;
  font-weight: 700;
  color: var(--noir);
}

.auth-card {
  width: 100%;
  max-width: 420px;
  border: 1px solid var(--gris-200);
  padding: 40px 32px;
}

.auth-card-header {
  text-align: center;
  margin-bottom: 32px;
}

.auth-avatar {
  width: 64px;
  height: 64px;
  margin: 0 auto 16px;
}

.auth-avatar img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

.auth-brand {
  font-family: var(--font-heading);
  font-size: 28px;
  font-weight: 700;
  color: var(--noir);
}

.auth-subtitle {
  font-size: 13px;
  color: var(--gris-500);
  margin-top: 4px;
}

/* Auth Tabs */
.auth-tabs {
  display: flex;
  position: relative;
  margin-bottom: 28px;
  border-bottom: 1px solid var(--gris-200);
}

.auth-tab {
  flex: 1;
  text-align: center;
  padding: 12px 0;
  font-size: 14px;
  font-weight: 500;
  color: var(--gris-400);
  cursor: pointer;
  transition: color var(--transition);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}

.auth-tab.active {
  color: var(--noir);
  border-bottom-color: var(--noir);
}

.auth-tab-indicator {
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 50%;
  height: 2px;
  background: var(--noir);
  transition: transform 0.25s ease;
}

/* Auth Forms */
.auth-form {
  display: block;
}

.auth-form.active {
  display: block;
}

.form-group {
  margin-bottom: 20px;
}

.form-label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--gris-500);
  margin-bottom: 6px;
}

.form-input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--gris-200);
  border-radius: 0;
  background: var(--blanc);
  font-size: 15px;
  color: var(--gris-900);
  outline: none;
  transition: border-color var(--transition);
}

.form-input:focus {
  border-color: var(--noir);
}

.form-input.input-error {
  border-color: var(--error);
}

.form-input-sm {
  padding: 6px 10px;
  font-size: 13px;
}

.form-select {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--gris-200);
  border-radius: 0;
  background: var(--blanc);
  font-size: 15px;
  color: var(--gris-900);
  outline: none;
  transition: border-color var(--transition);
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23737373'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
}

.form-select:focus {
  border-color: var(--noir);
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.form-row-3 {
  grid-template-columns: 1fr 1fr 1fr;
}

.form-section-title {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--gris-500);
  margin-top: 16px;
  margin-bottom: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--gris-200);
}

.form-checkboxes {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 16px;
}

.form-checkbox {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  color: var(--gris-700);
  cursor: pointer;
}

.form-checkbox input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--noir);
}

.auth-field {
  margin-bottom: 20px;
}

.auth-field label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--gris-500);
  margin-bottom: 6px;
}

.auth-input,
.auth-select {
  width: 100%;
  padding: 10px 0;
  border: none;
  border-bottom: 1px solid var(--gris-200);
  background: transparent;
  font-size: 15px;
  color: var(--gris-900);
  outline: none;
  transition: border-color var(--transition);
}

.auth-input:focus,
.auth-select:focus {
  border-bottom-color: var(--noir);
}

.auth-input.input-error,
.auth-select.input-error {
  border-bottom-color: var(--error);
}

.auth-field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.form-error {
  display: none;
  font-size: 12px;
  color: var(--error);
  margin-top: 4px;
}

.auth-btn {
  width: 100%;
  padding: 14px;
  background: var(--noir);
  color: var(--blanc);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.5px;
  margin-top: 8px;
  transition: opacity var(--transition);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: none;
  cursor: pointer;
}

.auth-btn:hover {
  opacity: 0.85;
}

.auth-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.btn-text { display: inline; }
.btn-loader {
  display: none;
  width: 18px;
  height: 18px;
  border: 2px solid rgba(255,255,255,0.3);
  border-top-color: var(--blanc);
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.auth-footer {
  margin-top: 24px;
  text-align: center;
}

.auth-back-link {
  font-size: 13px;
  color: var(--gris-500);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: color var(--transition);
}

.auth-back-link:hover {
  color: var(--noir);
}

/* -------------------------------------------------------
   9. Page Common
   ------------------------------------------------------- */
.page-content {
  /* Container inside each page */
}

.page-header {
  margin-bottom: 24px;
}

.page-title {
  font-family: var(--font-heading);
  font-size: 28px;
  font-weight: 700;
  color: var(--noir);
}

.page-date {
  font-size: 12px;
  font-weight: 500;
  color: var(--gris-500);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-top: 4px;
}

.section-title {
  font-family: var(--font-heading);
  font-size: 18px;
  font-weight: 600;
  color: var(--gris-900);
  margin-bottom: 16px;
}

.link {
  color: var(--noir);
  text-decoration: underline;
  font-weight: 500;
}

.link:hover {
  opacity: 0.7;
}

.text-muted {
  color: var(--gris-500);
}

/* -------------------------------------------------------
   10. Home Page
   ------------------------------------------------------- */
.home-page,
.home-wrapper {
  padding: 0;
}

.home-header {
  margin-bottom: 32px;
}

.home-header-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.home-date {
  font-size: 12px;
  font-weight: 500;
  color: var(--gris-500);
  text-transform: uppercase;
  letter-spacing: 1px;
}

.home-welcome {
  font-family: var(--font-heading);
  font-size: 28px;
  font-weight: 700;
  color: var(--noir);
  margin-top: 4px;
}

.home-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--noir);
  color: var(--blanc);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  flex-shrink: 0;
}

.home-section,
.home-quick-actions,
.home-upcoming {
  margin-bottom: 32px;
}

.welcome-banner {
  background: var(--blanc);
  border: 1px solid var(--gris-200);
  padding: 24px;
  margin-bottom: 24px;
}

/* Category Cards */
.category-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.category-grid-lg {
  gap: 16px;
}

.category-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 24px 16px;
  background: var(--blanc);
  border: 1px solid var(--gris-200);
  cursor: pointer;
  transition: all var(--transition);
  text-align: center;
}

.category-card:hover {
  border-color: var(--noir);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.category-card-lg {
  padding: 32px 20px;
}

.category-card-icon {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--noir);
}

.category-card-name {
  font-family: var(--font-heading);
  font-size: 16px;
  font-weight: 600;
  color: var(--gris-900);
}

.category-card-desc {
  font-size: 12px;
  color: var(--gris-500);
  line-height: 1.4;
}

/* Quick Actions */
.quick-actions {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.quick-action-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 20px 12px;
  background: var(--blanc);
  border: 1px solid var(--gris-200);
  cursor: pointer;
  transition: all var(--transition);
  min-height: 44px;
}

.quick-action-card:hover {
  border-color: var(--noir);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.quick-action-icon {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.quick-action-card span {
  font-size: 13px;
  font-weight: 500;
  color: var(--gris-700);
}

/* Next Booking Card */
.next-booking-card {
  margin-bottom: 8px;
}

.upcoming-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.upcoming-section {
  margin-bottom: 32px;
}

.booking-mini-card {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--blanc);
  border: 1px solid var(--gris-200);
  padding: 14px 16px;
}

.booking-preview {
  display: flex;
  align-items: center;
  gap: 16px;
  background: var(--blanc);
  border: 1px solid var(--gris-200);
  border-left: 3px solid var(--noir);
  padding: 16px;
  cursor: pointer;
  transition: border-color var(--transition);
}

.booking-preview:hover {
  border-color: var(--gris-300);
  border-left-color: var(--noir);
}

.booking-preview-icon {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--gris-100);
  flex-shrink: 0;
}

.booking-preview-center {
  flex: 1;
}

.booking-preview-center h3 {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  color: var(--gris-900);
}

.booking-preview-date {
  font-size: 13px;
  color: var(--gris-500);
}

.booking-preview-time {
  font-size: 12px;
  color: var(--gris-400);
}

/* -------------------------------------------------------
   11. Booking Flow (Multi-step)
   ------------------------------------------------------- */
.booking-page,
.booking-wrapper {
  padding: 0;
}

/* Booking Steps Indicator */
.booking-steps {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  margin-bottom: 28px;
  padding: 0 8px;
}

.step-indicator {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  flex: 1;
  position: relative;
}

.step-indicator::after {
  content: '';
  position: absolute;
  top: 14px;
  left: 50%;
  width: 100%;
  height: 2px;
  background: var(--gris-200);
  z-index: 0;
}

.step-indicator:last-child::after {
  display: none;
}

.step-num {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 12px;
  font-weight: 600;
  background: var(--gris-200);
  color: var(--gris-500);
  position: relative;
  z-index: 1;
  transition: all 0.3s ease;
}

.step-label {
  font-size: 10px;
  font-weight: 500;
  color: var(--gris-400);
  text-align: center;
  display: none;
}

.step-indicator.step-active .step-num {
  background: var(--noir);
  color: var(--blanc);
}

.step-indicator.step-active .step-label {
  color: var(--noir);
  font-weight: 600;
}

.step-indicator.step-done .step-num {
  background: var(--noir);
  color: var(--blanc);
}

.step-indicator.step-done::after {
  background: var(--noir);
}

/* Step Content */
.step-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}

.step-title {
  font-family: var(--font-heading);
  font-size: 22px;
  font-weight: 600;
  margin-bottom: 6px;
}

.step-subtitle {
  font-size: 14px;
  color: var(--gris-500);
  margin-bottom: 24px;
}

.step-content {
  margin-bottom: 24px;
}

/* Booking Header */
.booking-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.back-btn {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--gris-200);
  background: var(--blanc);
  color: var(--gris-700);
  cursor: pointer;
  transition: all var(--transition);
  min-height: 44px;
}

.back-btn:hover {
  border-color: var(--noir);
}

.booking-title {
  font-family: var(--font-heading);
  font-size: 20px;
  font-weight: 600;
  flex: 1;
}

.booking-step-label {
  font-size: 12px;
  font-weight: 500;
  color: var(--gris-500);
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* Progress Bar */
.progress-bar {
  height: 3px;
  background: var(--gris-200);
  margin-bottom: 28px;
}

.progress-fill {
  height: 100%;
  background: var(--noir);
  transition: width 0.3s ease;
}

.booking-content {
  margin-bottom: 24px;
}

/* Space Selection */
.spaces-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

.space-selection {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

/* Space Cards */
.spaces-scroll {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.space-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: var(--blanc);
  border: 1px solid var(--gris-200);
  padding: 20px;
  cursor: pointer;
  transition: all var(--transition);
}

.space-card:hover {
  border-color: var(--noir);
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}

.space-card-icon {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--gris-100);
  flex-shrink: 0;
  color: var(--noir);
}

.space-card-name {
  font-family: var(--font-heading);
  font-size: 16px;
  font-weight: 600;
  color: var(--gris-900);
}

.space-card-info {
  flex: 1;
}

.space-card-info h3 {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  color: var(--gris-900);
}

.space-card-info p {
  font-size: 13px;
  color: var(--gris-500);
}

.space-card-desc {
  font-size: 13px;
  color: var(--gris-500);
  line-height: 1.5;
}

.space-card-price {
  font-size: 12px;
  font-weight: 500;
  color: var(--gris-600);
  margin-top: 4px;
}

.space-card-arrow {
  color: var(--gris-400);
}

/* Space Tile */
.space-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.space-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 20px;
  background: var(--blanc);
  border: 1px solid var(--gris-200);
  cursor: pointer;
  transition: all var(--transition);
  text-align: center;
}

.space-tile:hover {
  border-color: var(--noir);
}

.space-tile.available {
  cursor: pointer;
}

.space-tile.unavailable {
  opacity: 0.5;
  cursor: not-allowed;
}

.space-tile.selected {
  border: 2px solid var(--noir);
  background: var(--gris-50);
}

/* Type Card */
.type-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px;
  background: var(--blanc);
  border: 1px solid var(--gris-200);
  cursor: pointer;
  transition: all var(--transition);
  position: relative;
}

.type-card:hover {
  border-color: var(--gris-300);
}

.type-card.selected {
  border: 2px solid var(--noir);
}

.type-card-check {
  position: absolute;
  top: 12px;
  right: 12px;
}

.type-card-icon {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--gris-100);
  flex-shrink: 0;
}

.type-card-label {
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 600;
}

.type-card-price {
  font-size: 14px;
  color: var(--gris-500);
  margin-top: 2px;
}

.type-card-price span {
  font-size: 12px;
}

/* Calendar */
.calendar-container,
.calendar-widget,
.calendar-wrapper {
  margin-top: 8px;
}

.calendar {
  background: var(--blanc);
  border: 1px solid var(--gris-200);
  padding: 20px;
}

.calendar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}

.calendar-month {
  font-family: var(--font-heading);
  font-size: 18px;
  font-weight: 600;
}

.calendar-nav {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--gris-200);
  background: var(--blanc);
  cursor: pointer;
  transition: all var(--transition);
  min-height: 44px;
}

.calendar-nav:hover {
  border-color: var(--noir);
}

.calendar-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  text-align: center;
  margin-bottom: 8px;
}

.calendar-weekdays span {
  font-size: 11px;
  font-weight: 600;
  color: var(--gris-400);
  text-transform: uppercase;
  padding: 6px 0;
}

.calendar-days-header {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  text-align: center;
  margin-bottom: 8px;
}

.calendar-day-name {
  font-size: 11px;
  font-weight: 600;
  color: var(--gris-400);
  text-transform: uppercase;
  padding: 6px 0;
}

.calendar-days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}

.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}

.calendar-day {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--transition);
  color: var(--gris-700);
  border-radius: 0;
  min-height: 36px;
}

.calendar-day-empty {
  cursor: default;
}

.calendar-day-disabled,
.calendar-day.disabled {
  color: var(--gris-300);
  cursor: default;
}

.calendar-day-today,
.calendar-day.today {
  font-weight: 700;
  color: var(--noir);
  border: 1px solid var(--noir);
}

.calendar-day-selected,
.calendar-day.selected {
  background: var(--noir);
  color: var(--blanc);
}

.calendar-day:not(.calendar-day-disabled):not(.calendar-day-empty):not(.calendar-day-selected):hover {
  background: var(--gris-100);
}

.calendar-cell {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--transition);
  color: var(--gris-700);
}

.calendar-cell.empty {
  cursor: default;
}

.calendar-cell.past {
  color: var(--gris-300);
  cursor: default;
}

.calendar-cell.today {
  font-weight: 700;
  color: var(--noir);
}

.calendar-cell.selected {
  background: var(--noir);
  color: var(--blanc);
}

.calendar-cell:not(.past):not(.empty):not(.selected):hover {
  background: var(--gris-100);
}

/* Duration Options */
.durations-list,
.duration-options {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.duration-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px;
  background: var(--blanc);
  border: 1px solid var(--gris-200);
  cursor: pointer;
  transition: all var(--transition);
}

.duration-card:hover:not(.duration-card-disabled) {
  border-color: var(--noir);
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}

.duration-card.available {
  cursor: pointer;
}

.duration-card.unavailable,
.duration-card-disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.duration-card.selected {
  border: 2px solid var(--noir);
  background: var(--gris-50);
}

.duration-card-info strong {
  display: block;
  font-family: var(--font-heading);
  font-size: 16px;
  font-weight: 600;
  color: var(--gris-900);
  margin-bottom: 2px;
}

.duration-card-info span {
  font-size: 13px;
  color: var(--gris-500);
}

.duration-card-price {
  font-size: 16px;
  font-weight: 600;
  color: var(--noir);
}

.duration-section-title {
  font-family: var(--font-heading);
  font-size: 16px;
  font-weight: 600;
  margin-top: 24px;
  margin-bottom: 12px;
  color: var(--gris-800);
}

/* Hour Slots */
.hour-slots-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.hour-slot {
  padding: 12px 8px;
  text-align: center;
  font-size: 13px;
  font-weight: 500;
  background: var(--blanc);
  border: 1px solid var(--gris-200);
  cursor: pointer;
  transition: all var(--transition);
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hour-slot:hover:not(.hour-slot-disabled):not(:disabled) {
  border-color: var(--noir);
}

.hour-slot.available {
  cursor: pointer;
}

.hour-slot.booked,
.hour-slot-disabled,
.hour-slot:disabled {
  background: var(--gris-100);
  color: var(--gris-300);
  cursor: not-allowed;
  text-decoration: line-through;
}

.hour-slot.selected {
  background: var(--noir);
  color: var(--blanc);
  border-color: var(--noir);
}

/* Time Slots (alt naming) */
.slots-container {
  margin-top: 8px;
}

.slots-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.slot-pill {
  padding: 12px 8px;
  text-align: center;
  font-size: 14px;
  font-weight: 500;
  background: var(--blanc);
  border: 1px solid var(--gris-200);
  cursor: pointer;
  transition: all var(--transition);
}

.slot-pill:hover:not(.unavailable) {
  border-color: var(--noir);
}

.slot-pill.selected {
  background: var(--noir);
  color: var(--blanc);
  border-color: var(--noir);
}

.slot-pill.in-range {
  background: var(--gris-100);
  border-color: var(--gris-300);
}

.slot-pill.unavailable {
  background: var(--gris-100);
  color: var(--gris-300);
  cursor: not-allowed;
  text-decoration: line-through;
}

.slots-help {
  text-align: center;
  font-size: 13px;
  color: var(--gris-500);
  margin-top: 12px;
}

/* Price Display */
.price-display {
  margin-top: 16px;
  padding: 16px;
  background: var(--blanc);
  border: 1px solid var(--gris-200);
}

.price-calc {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.price-hours {
  font-size: 14px;
  color: var(--gris-500);
}

.price-equals {
  color: var(--gris-400);
}

.price-total {
  font-size: 20px;
  font-weight: 700;
  color: var(--noir);
}

/* Confirmation / Summary Card */
.confirmation-card {
  background: var(--blanc);
  border: 1px solid var(--gris-200);
  padding: 24px;
}

.confirmation-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 0;
  border-bottom: 1px solid var(--gris-100);
}

.confirmation-row:last-child {
  border-bottom: none;
}

.confirmation-row-total {
  border-top: 2px solid var(--noir);
  margin-top: 8px;
  padding-top: 16px;
  border-bottom: none;
}

.confirmation-label {
  font-size: 13px;
  color: var(--gris-500);
  font-weight: 500;
}

.confirmation-value {
  font-size: 14px;
  font-weight: 500;
  color: var(--gris-900);
  text-align: right;
}

.confirmation-price {
  font-family: var(--font-heading);
  font-size: 22px;
  font-weight: 700;
  color: var(--noir);
}

.booking-summary {
  background: var(--blanc);
  border: 1px solid var(--gris-200);
  padding: 24px;
}

.summary-card {
  background: var(--blanc);
  border: 1px solid var(--gris-200);
  padding: 24px;
}

.summary-row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 8px 0;
}

.summary-icon {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--gris-100);
  flex-shrink: 0;
}

.summary-icon-small {
  width: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--gris-500);
}

.summary-info {
  display: flex;
  flex-direction: column;
}

.summary-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--gris-500);
}

.summary-value {
  font-size: 15px;
  font-weight: 500;
  color: var(--gris-900);
}

.summary-divider {
  height: 1px;
  background: var(--gris-200);
  margin: 4px 0;
}

.summary-total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 16px;
  margin-top: 8px;
  border-top: 1px solid var(--gris-200);
  font-size: 16px;
  font-weight: 600;
  color: var(--gris-900);
}

.summary-price {
  font-family: var(--font-heading);
  font-size: 24px;
  font-weight: 700;
}

/* Booking Nav (prev/next buttons) */
.booking-nav {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 24px;
}

.booking-footer {
  margin-top: 24px;
}

/* -------------------------------------------------------
   12. Bookings List Page
   ------------------------------------------------------- */
.bookings-page,
.bookings-wrapper {
  padding: 0;
}

.bookings-header {
  margin-bottom: 16px;
}

.bookings-section {
  margin-bottom: 32px;
}

/* Bookings Tabs */
.bookings-tabs {
  display: flex;
  position: relative;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--gris-200);
}

.bookings-tab {
  flex: 1;
  text-align: center;
  padding: 12px 0;
  font-size: 14px;
  font-weight: 500;
  color: var(--gris-400);
  cursor: pointer;
  transition: color var(--transition);
}

.bookings-tab.active {
  color: var(--noir);
}

.bookings-tab-indicator {
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 50%;
  height: 2px;
  background: var(--noir);
  transition: transform 0.25s ease;
}

/* Booking Cards */
.bookings-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.booking-card {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--blanc);
  border: 1px solid var(--gris-200);
  padding: 16px;
  transition: all var(--transition);
}

.booking-card:hover {
  box-shadow: var(--shadow-sm);
}

.booking-card-icon {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--gris-100);
  flex-shrink: 0;
}

.booking-card-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.booking-card-info strong {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  color: var(--gris-900);
}

.booking-card-info span {
  font-size: 12px;
  color: var(--gris-500);
}

.booking-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.booking-card-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.booking-card-center {
  flex: 1;
}

.booking-card-type {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  color: var(--gris-900);
}

.booking-card-date {
  font-size: 13px;
  color: var(--gris-500);
}

.booking-card-time {
  font-size: 12px;
  color: var(--gris-400);
}

.booking-card-right {
  text-align: right;
  flex-shrink: 0;
}

.booking-card-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  flex-shrink: 0;
}

/* Booking Status */
.booking-status {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 10px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.status-confirmed {
  background: var(--success-light);
  color: var(--success);
}

.status-completed {
  background: var(--gris-100);
  color: var(--gris-500);
}

.status-cancelled {
  background: var(--error-light);
  color: var(--error);
}

.status-pending {
  background: var(--info-light);
  color: var(--info);
}

.status-past {
  background: var(--gris-100);
  color: var(--gris-500);
}

/* Empty State */
.empty-booking,
.empty-state {
  text-align: center;
  padding: 32px 16px;
  background: var(--blanc);
  border: 1px solid var(--gris-200);
  font-size: 14px;
  color: var(--gris-500);
}

.empty-booking-icon,
.empty-state-icon {
  margin-bottom: 12px;
}

.empty-booking p,
.empty-state-text {
  font-size: 14px;
  color: var(--gris-500);
  margin-bottom: 16px;
}

/* -------------------------------------------------------
   13. Formulas Page
   ------------------------------------------------------- */
.formulas-page,
.formulas-wrapper {
  padding: 0;
}

.formulas-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}

.formulas-subtitle {
  font-size: 14px;
  color: var(--gris-500);
  margin-bottom: 24px;
}

.formulas-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

.formula-card {
  background: var(--blanc);
  border: 1px solid var(--gris-200);
  padding: 24px;
  position: relative;
  transition: all var(--transition);
}

.formula-card:hover {
  box-shadow: var(--shadow-md);
}

.formula-card.popular,
.formula-card-featured {
  border: 2px solid var(--noir);
}

.formula-badge {
  position: absolute;
  top: -1px;
  right: 20px;
  background: var(--noir);
  color: var(--blanc);
  font-size: 10px;
  font-weight: 600;
  padding: 4px 10px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.formula-header {
  margin-bottom: 12px;
}

.formula-name {
  font-family: var(--font-heading);
  font-size: 20px;
  font-weight: 700;
}

.formula-subtitle-text {
  font-size: 12px;
  color: var(--gris-500);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.formula-price {
  font-size: 16px;
  font-weight: 600;
  color: var(--noir);
  margin-bottom: 4px;
}

.formula-price small {
  font-size: 13px;
  font-weight: 400;
  color: var(--gris-500);
}

.formula-sub {
  font-size: 13px;
  color: var(--gris-500);
  margin-bottom: 16px;
}

.formulas-cta {
  text-align: center;
  margin-top: 28px;
  padding: 24px;
  background: var(--blanc);
  border: 1px solid var(--gris-200);
}

.formulas-cta p {
  font-size: 14px;
  color: var(--gris-500);
  margin-bottom: 12px;
}

/* Formulas Tarifs / Pricing Table */
.formulas-tarifs {
  margin-top: 32px;
}

.pricing-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--blanc);
  border: 1px solid var(--gris-200);
}

.pricing-table th {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--gris-500);
  padding: 12px 16px;
  text-align: left;
  border-bottom: 2px solid var(--gris-200);
  background: var(--gris-50);
}

.pricing-table td {
  font-size: 13px;
  color: var(--gris-700);
  padding: 10px 16px;
  border-bottom: 1px solid var(--gris-100);
}

.pricing-table tr:last-child td {
  border-bottom: none;
}

/* -------------------------------------------------------
   14. Profile Page
   ------------------------------------------------------- */
.profile-page,
.profile-wrapper {
  padding: 0;
}

.profile-card {
  background: var(--blanc);
  border: 1px solid var(--gris-200);
  padding: 24px;
  margin-bottom: 24px;
}

.profile-header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
}

.profile-avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--noir);
  color: var(--blanc);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 700;
  flex-shrink: 0;
}

.profile-header h2 {
  font-family: var(--font-heading);
  font-size: 22px;
  font-weight: 700;
}

.profile-name {
  font-family: var(--font-heading);
  font-size: 24px;
  font-weight: 700;
}

.profile-specialty {
  font-size: 14px;
  color: var(--gris-500);
  margin-top: 4px;
}

.profile-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  padding: 4px 12px;
  border: 1px solid var(--gris-200);
  font-size: 12px;
  font-weight: 500;
  color: var(--gris-600);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Formule Badge */
.formule-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 10px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

/* Profile Info */
.profile-info {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.profile-info-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 0;
  border-bottom: 1px solid var(--gris-100);
  font-size: 14px;
  color: var(--gris-800);
}

.profile-info-row:last-child {
  border-bottom: none;
}

.profile-info-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--gris-500);
}

/* Profile Edit */
.profile-edit {
  margin-top: 24px;
}

.profile-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Profile Menu */
.profile-menu {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.profile-menu-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  background: var(--blanc);
  border: 1px solid var(--gris-200);
  cursor: pointer;
  transition: background var(--transition);
  min-height: 44px;
}

.profile-menu-item:hover {
  background: var(--gris-50);
}

.profile-menu-icon {
  width: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.profile-menu-item span {
  flex: 1;
  font-size: 14px;
  font-weight: 500;
  color: var(--gris-700);
}

.profile-menu-item.logout span {
  color: var(--error);
}

/* -------------------------------------------------------
   15. Admin Page
   ------------------------------------------------------- */
.admin-page {
  padding: 0;
}

.admin-tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--gris-200);
  margin-bottom: 24px;
  overflow-x: auto;
}

.admin-tab {
  padding: 12px 20px;
  font-size: 14px;
  font-weight: 500;
  color: var(--gris-400);
  cursor: pointer;
  border: none;
  background: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: all var(--transition);
  white-space: nowrap;
  min-height: 44px;
}

.admin-tab:hover {
  color: var(--gris-700);
}

.admin-tab.active {
  color: var(--noir);
  border-bottom-color: var(--noir);
}

.admin-content {
  /* Tab content area */
}

.admin-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 20px;
}

.admin-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

/* Stats Grid */
.admin-stats-grid,
.stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-bottom: 24px;
}

.admin-stat-card,
.stat-card {
  background: var(--blanc);
  border: 1px solid var(--gris-200);
  padding: 20px;
  transition: all var(--transition);
}

.admin-stat-card:hover,
.stat-card:hover {
  box-shadow: var(--shadow-sm);
}

.admin-stat-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--gris-500);
  margin-bottom: 8px;
  display: block;
}

.admin-stat-value {
  font-family: var(--font-heading);
  font-size: 24px;
  font-weight: 700;
  color: var(--noir);
  display: block;
}

.stat-card .stat-number {
  font-family: var(--font-heading);
  font-size: 24px;
  font-weight: 700;
  color: var(--noir);
}

.stat-card .stat-label {
  font-size: 12px;
  color: var(--gris-500);
  margin-top: 4px;
}

/* Admin Space Grid */
.admin-spaces-grid,
.admin-space-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

.admin-space-card {
  background: var(--blanc);
  border: 1px solid var(--gris-200);
  padding: 20px;
  transition: all var(--transition);
}

.admin-space-card:hover {
  box-shadow: var(--shadow-sm);
}

.admin-space-card.inactive {
  opacity: 0.5;
  background: var(--gris-50);
}

.admin-space-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}

.admin-space-icon {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--gris-100);
  flex-shrink: 0;
}

.admin-space-header strong {
  font-size: 14px;
  color: var(--gris-900);
}

.admin-space-prices {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  font-size: 12px;
  color: var(--gris-600);
  margin-bottom: 12px;
  padding: 12px;
  background: var(--gris-50);
}

.admin-space-prices small {
  font-weight: 600;
  text-transform: uppercase;
  color: var(--gris-500);
  letter-spacing: 0.5px;
}

.admin-space-footer {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

/* Data Table */
.table-responsive {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.table,
.data-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--blanc);
  border: 1px solid var(--gris-200);
}

.table th,
.data-table th {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--gris-500);
  padding: 12px 16px;
  text-align: left;
  border-bottom: 2px solid var(--gris-200);
  background: var(--gris-50);
  white-space: nowrap;
}

.table td,
.data-table td {
  font-size: 13px;
  color: var(--gris-700);
  padding: 10px 16px;
  border-bottom: 1px solid var(--gris-100);
  vertical-align: middle;
}

.table tr:last-child td,
.data-table tr:last-child td {
  border-bottom: none;
}

.table tr:hover td,
.data-table tr:hover td {
  background: var(--gris-50);
}

.table-sm th,
.table-sm td {
  padding: 8px 12px;
  font-size: 12px;
}

/* Client Detail */
.client-detail {
  background: var(--blanc);
  border: 1px solid var(--gris-200);
  padding: 24px;
}

/* Toggle Switch */
.toggle-switch {
  position: relative;
  width: 44px;
  height: 24px;
  background: var(--gris-300);
  border-radius: 12px;
  cursor: pointer;
  transition: background 0.3s ease;
}

.toggle-switch.active {
  background: var(--noir);
}

.toggle-switch::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  background: var(--blanc);
  border-radius: 50%;
  transition: transform 0.3s ease;
}

.toggle-switch.active::after {
  transform: translateX(20px);
}

/* -------------------------------------------------------
   16. Confirmation Page (Success)
   ------------------------------------------------------- */
.confirmation-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 60vh;
  text-align: center;
  padding: 0;
}

.confirmation-content {
  margin-bottom: 32px;
}

.confirmation-checkmark {
  width: 80px;
  height: 80px;
  margin: 0 auto 24px;
  opacity: 0;
  transform: scale(0.5);
  transition: all 0.4s ease;
}

.confirmation-checkmark.animated {
  opacity: 1;
  transform: scale(1);
}

.checkmark-circle {
  stroke: var(--noir);
}

.checkmark-check {
  stroke: var(--noir);
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
}

.confirmation-checkmark.animated .checkmark-check {
  animation: drawCheck 0.5s 0.3s ease forwards;
}

@keyframes drawCheck {
  to { stroke-dashoffset: 0; }
}

.confirmation-title {
  font-family: var(--font-heading);
  font-size: 28px;
  font-weight: 700;
  margin-bottom: 8px;
}

.confirmation-text {
  font-size: 14px;
  color: var(--gris-500);
  max-width: 400px;
}

.confirmation-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  max-width: 300px;
}

/* -------------------------------------------------------
   17. Buttons (shared)
   ------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 24px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.3px;
  cursor: pointer;
  transition: all var(--transition);
  border: none;
  min-height: 44px;
}

.btn-primary,
.btn-dark {
  background: var(--noir);
  color: var(--blanc);
  border: none;
}

.btn-primary:hover,
.btn-dark:hover {
  opacity: 0.85;
}

.btn-secondary,
.btn-outline {
  background: transparent;
  color: var(--noir);
  border: 1px solid var(--noir);
}

.btn-secondary:hover,
.btn-outline:hover {
  background: var(--noir);
  color: var(--blanc);
}

.btn-outline-dark {
  background: transparent;
  color: var(--noir);
  border: 1.5px solid var(--noir);
}

.btn-outline-dark:hover {
  background: var(--noir);
  color: var(--blanc);
}

.btn-outline-light {
  background: rgba(255,255,255,0.15);
  color: #fff;
  border: 2px solid #fff;
}

.btn-outline-light:hover {
  background: rgba(255,255,255,0.3);
  border-color: #fff;
  color: #fff;
}

.btn-light {
  background: var(--blanc);
  color: var(--noir);
  border: none;
}

.btn-light:hover {
  opacity: 0.9;
}

.btn-gold {
  background: var(--noir);
  color: var(--blanc);
  border: none;
}

.btn-gold:hover {
  opacity: 0.85;
}

.btn-full {
  width: 100%;
}

.btn-sm,
.btn-small {
  padding: 8px 16px;
  font-size: 13px;
  min-height: 36px;
}

.btn-lg {
  padding: 14px 28px;
  font-size: 15px;
}

.btn-xl {
  padding: 16px 36px;
  font-size: 16px;
}

.btn-icon {
  padding: 8px;
  background: transparent;
  border: 1px solid var(--gris-200);
  min-height: 36px;
  min-width: 36px;
  font-size: 18px;
  color: var(--gris-600);
}

.btn-icon:hover {
  border-color: var(--noir);
  color: var(--noir);
}

.btn-disabled,
.btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.btn.loading {
  opacity: 0.6;
  cursor: not-allowed;
}

.btn-cancel,
.btn-danger {
  color: var(--error);
  border-color: var(--error);
}

.btn-cancel:hover,
.btn-danger:hover {
  background: var(--error);
  color: var(--blanc);
  border-color: var(--error);
}

.btn-edit {
  color: var(--info);
  border-color: var(--info);
}

.btn-edit:hover {
  background: var(--info);
  color: var(--blanc);
}

.btn-save {
  background: var(--noir);
  color: var(--blanc);
}

.btn-save:hover {
  opacity: 0.85;
}

.btn-delete {
  color: var(--error);
  border-color: var(--error);
}

.btn-delete:hover {
  background: var(--error);
  color: var(--blanc);
}

.btn-logout {
  color: var(--error);
  border: 1px solid var(--error);
  background: transparent;
}

.btn-logout:hover {
  background: var(--error);
  color: var(--blanc);
}

/* -------------------------------------------------------
   18. Badges
   ------------------------------------------------------- */
.badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 10px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.badge-outline {
  border: 1px solid var(--gris-300);
  color: var(--gris-600);
  background: transparent;
}

.badge-accent {
  background: var(--noir);
  color: var(--blanc);
}

.badge-dark {
  background: var(--gris-800);
  color: var(--blanc);
}

.badge-success,
.status-badge.status-confirmed {
  background: var(--success-light);
  color: var(--success);
}

.badge-error {
  background: var(--error-light);
  color: var(--error);
}

.badge-info {
  background: var(--info-light);
  color: var(--info);
}

.status-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 10px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

/* -------------------------------------------------------
   19. Toast Notifications
   ------------------------------------------------------- */
#toast-container {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
}

.toast {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 20px;
  background: var(--blanc);
  border: 1px solid var(--gris-200);
  box-shadow: var(--shadow-lg);
  max-width: 90vw;
  min-width: 280px;
  opacity: 0;
  transform: translateY(-20px);
  transition: all 0.3s ease;
  pointer-events: auto;
}

.toast-visible,
.toast.visible {
  opacity: 1;
  transform: translateY(0);
}

.toast.hiding {
  opacity: 0;
  transform: translateY(-20px);
}

.toast-icon {
  flex-shrink: 0;
  display: flex;
}

.toast-success {
  border-left: 3px solid var(--success);
}

.toast-error {
  border-left: 3px solid var(--error);
}

.toast-info {
  border-left: 3px solid var(--info);
}

.toast-success .toast-icon { color: var(--success); }
.toast-error .toast-icon { color: var(--error); }
.toast-info .toast-icon { color: var(--info); }

.toast-message {
  font-size: 13px;
  font-weight: 500;
  color: var(--gris-700);
}

/* -------------------------------------------------------
   20. Modal
   ------------------------------------------------------- */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,0.4);
  z-index: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  animation: fadeIn 0.2s ease;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.modal-overlay.visible {
  opacity: 1;
}

.modal-overlay.hiding {
  opacity: 0;
}

.modal {
  background: var(--blanc);
  border: 1px solid var(--gris-200);
  width: 100%;
  max-width: 520px;
  max-height: 90vh;
  overflow-y: auto;
  animation: slideUp 0.2s ease;
}

.modal-lg {
  max-width: 700px;
}

@keyframes slideUp {
  from { transform: translateY(20px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

.modal-container {
  background: var(--blanc);
  border: 1px solid var(--gris-200);
  width: 100%;
  max-width: 480px;
  max-height: 90vh;
  overflow-y: auto;
  transform: scale(0.95);
  transition: transform 0.2s ease;
}

.modal-overlay.visible .modal-container {
  transform: scale(1);
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  border-bottom: 1px solid var(--gris-200);
}

.modal-header h3 {
  font-family: var(--font-heading);
  font-size: 18px;
  font-weight: 600;
}

.modal-close {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gris-500);
  cursor: pointer;
}

.modal-body {
  padding: 24px;
}

.modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 16px 24px;
  border-top: 1px solid var(--gris-200);
}

.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--gris-200);
}

/* Modal Form */
.modal-form .form-group {
  margin-bottom: 16px;
}

.modal-form label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--gris-500);
  margin-bottom: 6px;
}

.modal-form input {
  width: 100%;
  padding: 10px 0;
  border: none;
  border-bottom: 1px solid var(--gris-200);
  background: transparent;
  font-size: 15px;
  color: var(--gris-900);
  outline: none;
}

.modal-form input:focus {
  border-bottom-color: var(--noir);
}

/* Contact Info in Modal */
.contact-info {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.contact-item {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.contact-item svg {
  flex-shrink: 0;
  margin-top: 2px;
}

.contact-item strong {
  display: block;
  font-size: 14px;
  margin-bottom: 2px;
}

.contact-item p {
  font-size: 13px;
  color: var(--gris-500);
  line-height: 1.5;
}

/* -------------------------------------------------------
   21. Loading & Spinner
   ------------------------------------------------------- */
.loading,
.loading-placeholder {
  text-align: center;
  padding: 32px;
  font-size: 14px;
  color: var(--gris-400);
}

.spinner,
.loading-spinner {
  width: 28px;
  height: 28px;
  border: 3px solid var(--gris-200);
  border-top-color: var(--noir);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
  margin: 24px auto;
}

/* -------------------------------------------------------
   22. Responsive - Desktop (>= 768px)
   ------------------------------------------------------- */
@media (min-width: 768px) {
  /* Show sidebar, hide bottom nav */
  .sidebar {
    display: flex;
  }

  #main-content {
    margin-left: var(--sidebar-width);
  }

  #main-content .page {
    padding: 40px 48px;
    padding-bottom: 40px;
  }

  .bottom-nav {
    display: none !important;
  }

  /* Landing burger hidden on desktop */
  .landing-burger {
    display: none;
  }

  /* Landing nav */
  .landing-menu {
    display: flex;
  }

  .landing-nav-links {
    display: flex;
  }

  .landing-nav-login {
    display: block;
  }

  /* Landing hero */
  .landing-hero {
    padding: 120px 48px 80px;
  }

  .landing-hero-slideshow {
    min-height: 90vh;
    padding: 0;
  }

  .landing-hero-slideshow .landing-title {
    font-size: 56px;
  }

  .landing-hero-inner {
    flex-direction: row;
    align-items: center;
    gap: 60px;
  }

  .landing-title {
    font-size: 56px;
  }

  .landing-hero-title {
    font-size: 56px;
  }

  .hero-avatar-showcase {
    width: 340px;
    height: 340px;
  }

  /* Sections */
  .landing-section {
    padding: 80px 48px;
  }

  .landing-section-title {
    font-size: 38px;
  }

  .landing-concepts {
    grid-template-columns: repeat(2, 1fr);
  }

  .concept-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .why-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 32px;
  }

  .landing-formulas {
    grid-template-columns: repeat(3, 1fr);
  }

  .landing-formulas-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .landing-testimonials {
    grid-template-columns: repeat(3, 1fr);
  }

  .temo-cards {
    grid-template-columns: repeat(3, 1fr);
  }

  .temo-title {
    font-size: 40px;
  }

  .testimonials-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .cta-banner-inner {
    flex-direction: row;
    text-align: left;
  }

  .cta-banner-content {
    flex: 1;
  }

  .landing-footer-top {
    flex-direction: row;
    justify-content: space-between;
  }

  .landing-footer-info {
    grid-template-columns: repeat(3, 1fr);
    gap: 48px;
  }

  /* Category & Home */
  .category-grid {
    grid-template-columns: repeat(4, 1fr);
  }

  .quick-actions {
    grid-template-columns: repeat(4, 1fr);
  }

  .spaces-scroll {
    flex-direction: row;
  }

  .space-card {
    flex: 1;
  }

  /* Booking */
  .spaces-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .space-selection {
    grid-template-columns: repeat(3, 1fr);
  }

  .space-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .hour-slots-grid {
    grid-template-columns: repeat(4, 1fr);
  }

  .slots-grid {
    grid-template-columns: repeat(4, 1fr);
  }

  .step-label {
    display: block;
  }

  /* Bookings */
  .bookings-tabs {
    max-width: 300px;
  }

  /* Formulas */
  .formulas-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Profile */
  .profile-card {
    max-width: 600px;
  }

  .profile-edit {
    max-width: 600px;
  }

  .profile-header-centered {
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
  }

  .profile-menu {
    max-width: 500px;
    margin: 0 auto;
  }

  /* Admin */
  .admin-stats-grid,
  .stats-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .admin-spaces-grid,
  .admin-space-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .admin-space-prices {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* -------------------------------------------------------
   23. Responsive - Large Desktop (>= 1024px)
   ------------------------------------------------------- */
@media (min-width: 1024px) {
  .landing-concepts {
    grid-template-columns: repeat(4, 1fr);
  }

  .landing-formulas-grid {
    grid-template-columns: repeat(4, 1fr);
  }

  .testimonials-grid {
    grid-template-columns: repeat(4, 1fr);
  }

  .landing-testimonials {
    grid-template-columns: repeat(3, 1fr);
  }

  .why-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .hour-slots-grid {
    grid-template-columns: repeat(6, 1fr);
  }

  .slots-grid {
    grid-template-columns: repeat(6, 1fr);
  }

  .formulas-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .admin-stats-grid,
  .stats-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .admin-spaces-grid,
  .admin-space-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .spaces-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* -------------------------------------------------------
   24. Responsive - XL Desktop (>= 1280px)
   ------------------------------------------------------- */
@media (min-width: 1280px) {
  .admin-stats-grid,
  .stats-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* -------------------------------------------------------
   25. Tarif Cards (replaces pricing table)
   ------------------------------------------------------- */
.tarif-cards-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

.tarif-card {
  background: var(--blanc);
  border: 1px solid var(--gris-200);
  border-radius: 12px;
  overflow: hidden;
}

.tarif-card-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 1.25rem;
  background: var(--noir);
  color: var(--blanc);
}

.tarif-card-header svg {
  flex-shrink: 0;
}

.tarif-card-header h3 {
  font-family: var(--font-heading);
  font-size: 1.1rem;
  font-weight: 600;
  margin: 0;
  color: var(--blanc);
}

.tarif-card-header h3 small {
  font-weight: 400;
  opacity: 0.7;
  font-size: 0.85em;
}

.tarif-card-body {
  padding: 0.75rem 1.25rem;
}

.tarif-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--gris-100);
}

.tarif-row:last-child {
  border-bottom: none;
}

.tarif-label {
  font-weight: 500;
  color: var(--gris-700);
  font-size: 0.9rem;
}

.tarif-prices {
  display: flex;
  gap: 0.75rem;
}

.tarif-price {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 52px;
  padding: 0.3rem 0.6rem;
  border-radius: 6px;
  font-weight: 600;
  font-size: 0.85rem;
  background: var(--gris-100);
  color: var(--noir);
}

.tarif-price.tarif-liber {
  background: var(--noir);
  color: var(--blanc);
}

.tarif-price.tarif-resident {
  background: var(--gris-700);
  color: var(--blanc);
}

.tarif-card-legend {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.25rem;
  border-top: 1px solid var(--gris-100);
  font-size: 0.75rem;
  color: var(--gris-500);
}

.tarif-legend-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 3px;
  background: var(--gris-100);
  border: 1px solid var(--gris-300);
}

.tarif-legend-dot.tarif-legend-liber {
  background: var(--noir);
  border-color: var(--noir);
}

.tarif-legend-dot.tarif-legend-resident {
  background: var(--gris-700);
  border-color: var(--gris-700);
}

/* -------------------------------------------------------
   26. Client Cards (replaces admin clients table)
   ------------------------------------------------------- */
.client-cards-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

.client-card {
  background: var(--blanc);
  border: 1px solid var(--gris-200);
  border-radius: 12px;
  overflow: hidden;
}

.client-card-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--gris-100);
}

.client-card-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--noir);
  color: var(--blanc);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.85rem;
  flex-shrink: 0;
}

.client-card-identity h4 {
  font-size: 1rem;
  font-weight: 600;
  margin: 0;
}

.client-card-identity .text-muted {
  font-size: 0.8rem;
  display: block;
  margin-top: 2px;
}

.client-card-body {
  padding: 1rem 1.25rem;
}

.client-card-info {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  margin-bottom: 0.75rem;
}

.client-card-info-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.client-card-label {
  font-size: 0.75rem;
  color: var(--gris-500);
  text-transform: uppercase;
  letter-spacing: 0.3px;
  font-weight: 500;
}

.client-card-formule {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--gris-100);
}

.client-card-formule .form-input {
  flex: 1;
  max-width: 180px;
}

.client-card-footer {
  padding: 0.75rem 1.25rem;
  border-top: 1px solid var(--gris-100);
}

/* -------------------------------------------------------
   27. Booking Mini Cards (modal + admin)
   ------------------------------------------------------- */
.booking-cards-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 0.75rem;
}

.booking-mini-card {
  background: var(--gris-50);
  border: 1px solid var(--gris-200);
  border-radius: 8px;
  padding: 0.75rem 1rem;
}

.booking-mini-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.5rem;
}

.booking-mini-header strong {
  font-size: 0.9rem;
}

.booking-mini-details {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
  font-size: 0.85rem;
  color: var(--gris-600);
}

.booking-mini-price {
  font-weight: 700;
  color: var(--noir);
}

/* -------------------------------------------------------
   28. Admin Booking Cards (replaces admin bookings table)
   ------------------------------------------------------- */
.admin-booking-cards {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.admin-booking-card {
  background: var(--blanc);
  border: 1px solid var(--gris-200);
  border-radius: 10px;
  overflow: hidden;
}

.admin-booking-card-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 1rem 1.25rem 0.5rem;
}

.admin-booking-card-client {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.admin-booking-card-client strong {
  font-size: 0.95rem;
}

.admin-booking-card-client .text-muted {
  font-size: 0.8rem;
}

.admin-booking-card-details {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
  padding: 0.5rem 1.25rem 1rem;
}

.admin-booking-detail-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.admin-booking-detail-label {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  color: var(--gris-500);
  font-weight: 500;
}

.admin-booking-price {
  font-weight: 700;
  font-size: 1.05rem;
}

/* Responsive: cards grids on larger screens */
@media (min-width: 768px) {
  .tarif-cards-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .client-cards-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .admin-booking-cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
  }
}

@media (min-width: 1024px) {
  .tarif-cards-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .client-cards-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .admin-booking-cards {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* -------------------------------------------------------
   29. Availability Check States
   ------------------------------------------------------- */
.availability-checking {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 2rem;
  font-size: 0.95rem;
  color: var(--gris-600);
  background: var(--gris-50);
  border: 1px solid var(--gris-200);
  border-radius: 12px;
  margin-top: 1.5rem;
}

.availability-ok {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0.75rem 1rem;
  margin-top: 1.5rem;
  margin-bottom: 1rem;
  background: var(--success-light);
  color: var(--success);
  border-radius: 8px;
  font-weight: 600;
  font-size: 0.9rem;
}

.availability-ok svg {
  flex-shrink: 0;
}

.availability-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.75rem;
  padding: 2.5rem 1.5rem;
  margin-top: 1.5rem;
  background: var(--error-light);
  border: 1px solid #fecaca;
  border-radius: 12px;
}

.availability-error svg {
  color: var(--error);
}

.availability-error h3 {
  color: var(--error);
  font-size: 1.1rem;
}

.availability-error p {
  color: var(--gris-600);
  font-size: 0.9rem;
  max-width: 400px;
}

/* Next available slots grid */
.next-slots-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.5rem;
  margin-top: 1rem;
}

.next-slot-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 1rem 1.25rem;
  background: var(--blanc);
  border: 2px solid var(--gris-200);
  border-radius: 10px;
  cursor: pointer;
  transition: all var(--transition);
}

.next-slot-card:hover {
  border-color: var(--noir);
  box-shadow: var(--shadow-md);
}

.next-slot-date {
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--gris-900);
  min-width: 0;
  flex: 1;
}

.next-slot-time {
  font-size: 0.9rem;
  color: var(--gris-600);
  font-weight: 500;
  white-space: nowrap;
}

.next-slot-duration {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  color: var(--gris-500);
  background: var(--gris-100);
  padding: 4px 8px;
  border-radius: 4px;
  white-space: nowrap;
}

@media (min-width: 768px) {
  .next-slots-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Video Popup */
.video-popup-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.85);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  animation: fadeIn 0.3s ease;
}

.video-popup-intro {
  position: relative;
  width: 90vw;
  max-width: 520px;
  background: var(--blanc);
  border-radius: 20px;
  overflow: visible;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  text-align: center;
}

.video-popup-intro.video-playing {
  max-width: none;
  width: auto;
  background: transparent;
  box-shadow: none;
  border-radius: 0;
}

.video-popup-close {
  position: absolute;
  top: -14px;
  right: -14px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--blanc);
  color: var(--noir);
  border: 2px solid var(--gris-200);
  font-size: 22px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  box-shadow: 0 2px 12px rgba(0,0,0,0.3);
  transition: all 0.2s ease;
}

.video-popup-close:hover {
  transform: scale(1.15);
  background: var(--error);
  color: var(--blanc);
  border-color: var(--error);
}

/* In video mode: bigger close button, top-right fixed */
.video-playing .video-popup-close {
  top: -20px;
  right: -20px;
  width: 44px;
  height: 44px;
  font-size: 24px;
  background: var(--blanc);
  border: none;
  box-shadow: 0 4px 16px rgba(0,0,0,0.5);
}

.video-popup-intro-content {
  padding: 3rem 2rem 2rem;
}

.video-popup-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--gris-100);
  color: var(--noir);
  margin-bottom: 1.25rem;
}

.video-popup-intro-content h2 {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--gris-900);
  margin-bottom: 0.75rem;
  line-height: 1.3;
}

.video-popup-intro-content p {
  font-size: 0.95rem;
  color: var(--gris-500);
  line-height: 1.6;
  margin-bottom: 2rem;
  max-width: 380px;
  margin-left: auto;
  margin-right: auto;
}

.video-play-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: var(--noir);
  color: var(--blanc);
  border: none;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
  animation: pulsePlay 2s ease infinite;
}

.video-play-btn svg {
  margin-left: 4px;
}

.video-play-btn:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 30px rgba(0, 0, 0, 0.4);
}

.video-play-label {
  display: block;
  margin-top: 0.75rem;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--gris-500);
}

@keyframes pulsePlay {
  0%, 100% { box-shadow: 0 4px 20px rgba(0,0,0,0.3), 0 0 0 0 rgba(0,0,0,0.2); }
  50% { box-shadow: 0 4px 20px rgba(0,0,0,0.3), 0 0 0 15px rgba(0,0,0,0); }
}

.video-popup-skip {
  padding: 1rem;
  font-size: 0.85rem;
  color: var(--gris-400);
  cursor: pointer;
  transition: color var(--transition);
}

.video-popup-skip:hover {
  color: var(--gris-700);
}

.video-popup-player {
  display: flex;
  justify-content: center;
  background: transparent;
  border-radius: 16px;
  overflow: hidden;
}

.video-popup-player video {
  display: block;
  max-width: 90vw;
  max-height: 85vh;
  border-radius: 16px;
}

.video-popup-player iframe {
  width: 90vw;
  max-width: 900px;
  aspect-ratio: 16 / 9;
  display: block;
  border-radius: 16px;
}

/* Video end CTA screen */
.video-end-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 3rem 2rem;
  min-width: 320px;
  animation: fadeIn 0.5s ease;
}

.video-end-cta h2 {
  font-family: var(--font-heading);
  font-size: 2rem;
  font-weight: 700;
  color: var(--blanc);
  margin-bottom: 0.75rem;
}

.video-end-cta p {
  font-size: 1rem;
  color: var(--gris-400);
  margin-bottom: 2.5rem;
  max-width: 400px;
}

.video-end-buttons {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  justify-content: center;
}

.btn-video-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 16px 32px;
  font-size: 1rem;
  font-weight: 600;
  font-family: var(--font-body);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.3s ease;
  min-width: 200px;
}

.btn-video-cta-primary {
  background: var(--blanc);
  color: var(--noir);
  border: 2px solid var(--blanc);
}

.btn-video-cta-primary:hover {
  background: transparent;
  color: var(--blanc);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(255, 255, 255, 0.2);
}

.btn-video-cta-outline {
  background: transparent;
  color: var(--blanc);
  border: 2px solid rgba(255, 255, 255, 0.4);
}

.btn-video-cta-outline:hover {
  border-color: var(--blanc);
  background: rgba(255, 255, 255, 0.1);
  transform: translateY(-2px);
}

@media (max-width: 767px) {
  .video-playing .video-popup-close {
    top: -16px;
    right: -4px;
  }

  .video-popup-player video {
    max-width: 95vw;
    border-radius: 12px;
  }

  .video-end-cta h2 {
    font-size: 1.5rem;
  }

  .video-end-buttons {
    flex-direction: column;
    width: 100%;
  }

  .btn-video-cta {
    min-width: auto;
    width: 100%;
  }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* LiBer Upsell Banner (before payment) */
.liber-upsell-banner {
  margin-top: 1rem;
  margin-bottom: 1rem;
  padding: 1.25rem;
  background: linear-gradient(135deg, #fef9c3 0%, #fef3c7 100%);
  border: 1px solid #fbbf24;
  border-radius: 12px;
}

.liber-upsell-content {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  margin-bottom: 1rem;
}

.liber-upsell-icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #f59e0b;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}

.liber-upsell-text strong {
  display: block;
  font-size: 0.95rem;
  color: #92400e;
  margin-bottom: 4px;
}

.liber-upsell-text p {
  font-size: 0.85rem;
  color: #78350f;
  line-height: 1.5;
  margin: 0;
}

.liber-upsell-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

/* LiBer Subscription */
.formula-subscribe-btn {
  margin-top: 1.25rem;
}

.formula-current-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 1.25rem;
  padding: 12px;
  background: var(--success-light);
  color: var(--success);
  font-weight: 600;
  font-size: 0.85rem;
  border-radius: 8px;
}

.liber-subscribe-recap {
  text-align: center;
  padding-bottom: 1.5rem;
  margin-bottom: 1.5rem;
  border-bottom: 1px solid var(--gris-100);
}

.liber-subscribe-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--noir);
  color: var(--blanc);
  margin-bottom: 1rem;
}

.liber-subscribe-recap h4 {
  font-family: var(--font-heading);
  font-size: 1.3rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
  color: var(--gris-900);
}

.liber-subscribe-price {
  font-size: 2rem;
  font-weight: 700;
  color: var(--noir);
  margin-bottom: 1rem;
}

.liber-subscribe-price small {
  font-size: 0.9rem;
  font-weight: 400;
  color: var(--gris-500);
}

.liber-subscribe-perks {
  list-style: none;
  text-align: left;
  max-width: 300px;
  margin: 0 auto;
}

.liber-subscribe-perks li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  font-size: 0.9rem;
  color: var(--gris-700);
}

.liber-subscribe-perks li svg {
  color: var(--success);
  flex-shrink: 0;
}

.liber-subscribe-payment h4 {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 1rem;
  color: var(--gris-900);
}

/* Video Upload Zone */
.admin-video-upload-zone {
  border: 2px dashed var(--gris-300);
  border-radius: 12px;
  padding: 2rem;
  text-align: center;
  cursor: pointer;
  transition: all var(--transition);
  margin-bottom: 1rem;
}

.admin-video-upload-zone:hover {
  border-color: var(--noir);
  background: var(--gris-50);
}

.upload-zone-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  color: var(--gris-500);
}

.upload-zone-content svg {
  color: var(--gris-400);
}

.upload-zone-content p {
  margin: 0;
}

.upload-progress-bar {
  height: 8px;
  background: var(--gris-200);
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 0.5rem;
}

.upload-progress-fill {
  height: 100%;
  background: var(--noir);
  border-radius: 4px;
  width: 0%;
  transition: width 0.3s ease;
}

.upload-progress-text {
  font-size: 0.85rem;
  color: var(--gris-600);
  text-align: center;
}

.admin-setting-separator {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 1rem 0;
  color: var(--gris-400);
  font-size: 0.8rem;
  text-transform: uppercase;
}

.admin-setting-separator::before,
.admin-setting-separator::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--gris-200);
}

.admin-video-current {
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--gris-100);
}

.admin-video-current iframe,
.admin-video-current video {
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 8px;
  margin-top: 0.5rem;
}

/* Admin Settings Section */
.admin-settings-section {
  margin-top: 2rem;
}

.admin-settings-title {
  font-family: var(--font-heading);
  font-size: 1.2rem;
  font-weight: 600;
  margin-bottom: 1rem;
  color: var(--gris-900);
}

.admin-setting-card {
  background: var(--blanc);
  border: 1px solid var(--gris-200);
  border-radius: 12px;
  overflow: hidden;
}

.admin-setting-header {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 1.25rem;
  border-bottom: 1px solid var(--gris-100);
}

.admin-setting-header svg {
  flex-shrink: 0;
  margin-top: 2px;
}

.admin-setting-header h4 {
  font-size: 1rem;
  font-weight: 600;
  margin: 0;
  color: var(--gris-900);
}

.admin-setting-header p {
  font-size: 0.8rem;
  color: var(--gris-500);
  margin-top: 4px;
}

.admin-setting-body {
  padding: 1.25rem;
}

.admin-setting-input-row {
  display: flex;
  gap: 0.5rem;
}

.admin-setting-input-row .form-input {
  flex: 1;
}

.admin-video-preview {
  margin-top: 1rem;
}

.admin-video-preview iframe,
.admin-video-preview video {
  margin-top: 0.5rem;
}

@media (max-width: 767px) {
  .admin-setting-input-row {
    flex-direction: column;
  }

  .video-popup-close {
    top: 8px;
    right: 8px;
  }
}

/* -------------------------------------------------------
   30. Stripe Payment Section
   ------------------------------------------------------- */
.stripe-payment-section {
  margin-top: 1.5rem;
  background: var(--blanc);
  border: 1px solid var(--gris-200);
  border-radius: 12px;
  padding: 1.5rem;
}

.payment-section-title {
  font-family: var(--font-heading);
  font-size: 1.1rem;
  font-weight: 600;
  margin-bottom: 1rem;
  color: var(--gris-900);
}

.stripe-card-wrapper {
  background: var(--gris-50);
  border: 1px solid var(--gris-200);
  border-radius: 8px;
  padding: 1rem;
  margin-bottom: 1rem;
  min-height: 80px;
}

.stripe-errors {
  color: var(--error);
  font-size: 0.85rem;
  margin-bottom: 0.75rem;
  min-height: 1.2em;
}

.stripe-secure-note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 1rem;
  font-size: 0.8rem;
  color: var(--gris-500);
}

.stripe-secure-note svg {
  color: var(--success);
}

.spinner-inline {
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255,255,255,0.3);
  border-top-color: var(--blanc);
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
  vertical-align: middle;
  margin-right: 6px;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* -------------------------------------------------------
   30. Print Styles
   ------------------------------------------------------- */
@media print {
  .sidebar,
  .bottom-nav,
  .landing-nav,
  .toast,
  #toast-container {
    display: none !important;
  }

  #main-content {
    margin-left: 0;
  }

  body {
    background: white;
  }
}