/* ===== style.css ===== */
/* =========================================================
   1. ROOT
========================================================= */
:root {
  --bg: #06101f;
  --bg-deep: #040b17;

  --surface: rgba(255, 255, 255, 0.06);
  --surface-strong: rgba(255, 255, 255, 0.08);
  --surface-soft: rgba(255, 255, 255, 0.04);

  --stroke: rgba(255, 255, 255, 0.10);
  --stroke-strong: rgba(255, 255, 255, 0.14);

  --text: #f6f8fc;
  --muted: #b7c2d3;
  --muted-2: #8e9bb0;

  --gradient: linear-gradient(135deg, #bceff3 0%, #c8d6f1 48%, #e0c2f2 100%);
  --gradient-soft: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.08) 0%,
    rgba(255, 255, 255, 0.04) 100%
  );

  --shadow-lg: 0 30px 90px rgba(0, 0, 0, 0.35);
  --shadow-md: 0 18px 50px rgba(0, 0, 0, 0.25);
  --shadow-sm: 0 12px 28px rgba(0, 0, 0, 0.20);

  --radius-xl: 4px;
  --radius-lg: 4px;
  --radius-md: 4px;
  --radius-sm: 4px;

  --container: 1380px;

  --space-1: 8px;
  --space-2: 12px;
  --space-3: 16px;
  --space-4: 20px;
  --space-5: 24px;
  --space-6: 28px;
  --space-7: 32px;
  --space-8: 40px;
  --space-9: 48px;
  --space-10: 56px;
  --space-11: 64px;
  --space-12: 72px;

  --transition: 0.28s ease;

  --role-president: #ffd580;
  --role-dg: #9bd4ff;
  --role-manager: #b7f0c1;
  --role-agent: #e8c3ff;
  --role-ambassadeur: #ffbe9b;
  --role-ambassadrice: #ff9fcb;
}


/* =========================================================
   2. BASE
========================================================= */
*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  min-height: 100vh;
  font-family: "Inter", sans-serif;
  color: var(--text);
  background: var(--bg);
  line-height: 1.5;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input,
textarea,
select {
  font: inherit;
}

button {
  border: 0;
  background: none;
  cursor: pointer;
}

img {
  display: block;
  max-width: 100%;
}

ul,
ol {
  list-style: none;
}


/* =========================================================
   3. LAYOUT / UTILITIES
========================================================= */
.container {
  width: min(calc(100% - 48px), var(--container));
  margin-inline: auto;
}

.advantages,
.performances,
.partners,
.organization,
.reviews,
.contact-cta {
  position: relative;
  padding: 62px 0 54px;
}

.performance-highlight,
.performance-card,
.sidebar-card,
.partner-featured,
.contact-card,
.marquee-card,
.advantages-spotlight,
.advantage-card,
.advantages-side-card {
  background: var(--gradient-soft);
  border: 1px solid var(--stroke);
  backdrop-filter: blur(14px);
  box-shadow: var(--shadow-md);
}

.section-heading {
  max-width: 920px;
  margin-bottom: 32px;
}

.section-kicker {
  display: inline-block;
  margin-bottom: 12px;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #cfe4ef;
}

.section-heading h2 {
  margin-bottom: 14px;
  font-family: "Poppins", sans-serif;
  font-size: clamp(2.2rem, 4vw, 3.2rem);
  line-height: 1.04;
  font-weight: 800;
}

.section-heading p {
  max-width: 820px;
  color: var(--muted);
  line-height: 1.8;
}

.card-list {
  display: grid;
  gap: 10px;
  margin-top: 16px;
}

.card-list li {
  position: relative;
  padding-left: 18px;
  color: #dce5ef;
  font-size: 0.95rem;
  line-height: 1.55;
}

.card-list li::before {
  content: "";
  position: absolute;
  top: 0.58em;
  left: 0;
  width: 7px;
  height: 7px;
  border-radius: 4px;
  background: var(--gradient);
}

.text-highlight,
.text-highlight-soft {
  display: inline;
  font-weight: 700;
  color: #f7fbff;
}

.text-highlight {
  padding: 0 0.16em;
  background: linear-gradient(
    135deg,
    rgba(188, 239, 243, 0.24),
    rgba(224, 194, 242, 0.24)
  );
  border-radius: 3px;
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.18);
}

.text-highlight-soft {
  color: #e9f4ff;
}


/* =========================================================
   4. GLOBAL COMPONENTS
========================================================= */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 58px;
  padding: 16px 22px;
  border-radius: 4px;
  font-weight: 700;
  text-align: center;
  transition: var(--transition);
  will-change: transform;
}

.button:hover {
  transform: translateY(-2px);
}

.button-primary {
  color: #09111d;
  background: var(--gradient);
  box-shadow: 0 18px 40px rgba(181, 220, 239, 0.16);
}

.button-primary:hover {
  box-shadow: 0 24px 55px rgba(181, 220, 239, 0.20);
}

.button-secondary {
  color: var(--text);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.button-secondary:hover {
  background: rgba(255, 255, 255, 0.07);
}

.button-tertiary {
  color: var(--text);
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.14);
}

.button-tertiary:hover {
  background: rgba(255, 255, 255, 0.05);
}

.button-discord {
  color: #eef3ff;
  background: linear-gradient(
    135deg,
    rgba(88, 101, 242, 0.35),
    rgba(88, 101, 242, 0.18)
  );
  border: 1px solid rgba(132, 146, 255, 0.35);
}

.button-discord:hover {
  background: linear-gradient(
    135deg,
    rgba(88, 101, 242, 0.46),
    rgba(88, 101, 242, 0.24)
  );
}

.metric-icon-box {
  width: 62px;
  height: 62px;
  flex-shrink: 0;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  color: #09111d;
  font-size: 1.25rem;
  background: var(--gradient);
  box-shadow: var(--shadow-sm);
}


/* =========================================================
   5. BACKGROUND EFFECTS
========================================================= */
.site-bg {
  position: fixed;
  inset: 0;
  z-index: -3;
  transform: scale(1.05);
  background:
    linear-gradient(rgba(4, 11, 23, 0.62), rgba(4, 11, 23, 0.88)),
    url("https://images.unsplash.com/photo-1521737604893-d14cc237f11d?auto=format&fit=crop&w=1800&q=80")
    center / cover no-repeat;
}

.site-overlay {
  position: fixed;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(circle at 15% 18%, rgba(126, 210, 231, 0.12), transparent 30%),
    radial-gradient(circle at 82% 20%, rgba(218, 182, 241, 0.12), transparent 28%),
    linear-gradient(180deg, rgba(5, 13, 24, 0.22) 0%, rgba(5, 13, 24, 0.74) 100%);
}

.site-glow {
  position: fixed;
  z-index: -1;
  border-radius: 4px;
  filter: blur(90px);
  opacity: 0.18;
  pointer-events: none;
}

.site-glow-one {
  top: 140px;
  left: -90px;
  width: 320px;
  height: 320px;
  background: #8de6f1;
}

.site-glow-two {
  top: 320px;
  right: -140px;
  width: 360px;
  height: 360px;
  background: #d6b1ff;
}


/* =========================================================
   6. HEADER
========================================================= */
.topbar {
  position: sticky;
  top: 0;
  z-index: 100;
  width: 100%;
  background: rgba(4, 10, 20, 0.58);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(18px);
}

.topbar-inner {
  min-height: 86px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.brand-logo {
  width: 60px;
  height: 60px;
  object-fit: contain;
  display: block;
}

.brand {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 14px;
}

.brand-mark {
  width: 58px;
  height: 58px;
  flex-shrink: 0;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  font-size: 1.6rem;
  color: #09111d;
  background: var(--gradient);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.25);
}

.brand-text {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.brand-name {
  color: var(--text);
  font-size: 1.2rem;
  font-family: "Poppins", sans-serif;
  font-weight: 800;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.brand-subtitle {
  color: var(--muted);
  font-size: 0.86rem;
}

.desktop-nav {
  display: none;
  align-items: center;
  gap: 28px;
}

.desktop-nav a {
  color: var(--muted);
  font-weight: 500;
  transition: var(--transition);
}

.desktop-nav a:hover {
  color: var(--text);
}

.nav-discord {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 12px 16px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.nav-discord:hover {
  background: rgba(255, 255, 255, 0.08);
}

.menu-button {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.menu-button i {
  font-size: 1.1rem;
}


/* =========================================================
   7. HERO
========================================================= */
.hero {
  padding: 72px 0 40px;
}

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(470px, 0.95fr);
  gap: 52px;
  align-items: start;
}

.hero-content {
  max-width: 820px;
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
  padding: 10px 16px;
  border-radius: 4px;
  color: #dbe5f2;
  font-weight: 500;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(10px);
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.hero-badge-logo {
  height: 18px;
  width: auto;
  display: block;
}

.hero-badge-dot {
  width: 8px;
  height: 8px;
  border-radius: 4px;
  background: linear-gradient(135deg, #aee9f0, #d9baf0);
  box-shadow: 0 0 16px rgba(191, 233, 245, 0.8);
}

.hero h1 {
  font-family: "Poppins", sans-serif;
  font-weight: 800;
  font-size: clamp(3.4rem, 5vw, 5.8rem);
  line-height: 1.08;
  letter-spacing: -0.045em;
  margin-bottom: 22px;
  padding-bottom: 0.08em;
  background: var(--gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.hero-description {
  max-width: 820px;
  margin-bottom: 30px;
  color: var(--muted);
  font-size: 1.1rem;
  line-height: 1.85;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 30px;
}

.hero-trustbar {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.trust-item {
  padding: 17px 18px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(10px);
}

.trust-item strong {
  display: block;
  margin-bottom: 4px;
  font-family: "Poppins", sans-serif;
  font-size: 1.2rem;
}

.trust-item span {
  color: var(--muted);
  font-size: 0.95rem;
}

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

.hero-panel-card {
  border-radius: 4px;
  padding: 28px;
}

.hero-panel-main {
  position: relative;
  overflow: hidden;
}

.hero-panel-main::before {
  content: "";
  position: absolute;
  top: -60px;
  right: -50px;
  width: 180px;
  height: 180px;
  border-radius: 4px;
  background: radial-gradient(
    circle,
    rgba(205, 181, 240, 0.22) 0%,
    rgba(205, 181, 240, 0) 72%
  );
}

.panel-label {
  display: inline-flex;
  margin-bottom: 18px;
  padding: 8px 12px;
  border-radius: 4px;
  color: var(--muted);
  font-size: 0.85rem;
  background: rgba(255, 255, 255, 0.08);
}

.panel-main-value {
  margin-bottom: 10px;
  font-family: "Poppins", sans-serif;
  font-size: clamp(2.8rem, 6vw, 4.6rem);
  line-height: 1;
  font-weight: 800;
  background: var(--gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.panel-main-text {
  max-width: 440px;
  margin-bottom: 24px;
  color: var(--muted);
  line-height: 1.7;
}

.panel-mini-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.panel-mini-card {
  padding: 15px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.panel-mini-title {
  display: block;
  margin-bottom: 6px;
  color: var(--muted-2);
  font-size: 0.82rem;
}

.panel-mini-card strong {
  font-size: 0.98rem;
  font-weight: 700;
}

.hero-panel-side {
  display: grid;
  gap: 12px;
}

.stacked-stat {
  padding: 17px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.stacked-stat-label {
  display: block;
  margin-bottom: 6px;
  color: var(--muted-2);
  font-size: 0.9rem;
}

.stacked-stat strong {
  font-family: "Poppins", sans-serif;
  font-size: 1.28rem;
  line-height: 1.2;
}


/* =========================================================
   AVANTAGES V2 — DESKTOP CLEAN / PREMIUM
========================================================= */

.advantages-v2 .section-heading {
  max-width: 900px;
  margin-bottom: 36px;
}

.advantages-pro-layout {
  display: grid;
  grid-template-columns: minmax(380px, 460px) minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}

.advantages-main-card,
.advantages-summary-card,
.advantages-card-pro,
.advantage-card-pro {
  position: relative;
  overflow: hidden;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.08) 0%,
    rgba(255, 255, 255, 0.04) 100%
  );
  border: 1px solid rgba(255, 255, 255, 0.10);
  backdrop-filter: blur(16px);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.28);
}

.advantages-main-card {
  padding: 30px;
  border-radius: 4px;
}

.advantages-main-card::before,
.advantages-summary-card::before,
.advantage-card-pro::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.05) 0%, transparent 32%),
    radial-gradient(circle at top right, rgba(200,214,241,0.14), transparent 32%);
}

.advantages-main-card > *,
.advantages-summary-card > *,
.advantage-card-pro > * {
  position: relative;
  z-index: 1;
}

.advantages-main-card h3 {
  margin-top: 6px;
  font-family: "Poppins", sans-serif;
  font-size: clamp(2rem, 2.6vw, 3rem);
  line-height: 1.02;
  letter-spacing: -0.035em;
}

.advantages-main-text {
  margin-top: 18px;
  color: var(--muted);
  line-height: 1.82;
  font-size: 1rem;
}

.advantages-main-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 22px;
}

.advantages-main-stats {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin-top: 24px;
}

.advantages-stat-card {
  padding: 18px 18px 17px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.advantages-stat-label {
  display: inline-block;
  margin-bottom: 8px;
  color: var(--muted-2);
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.advantages-stat-card strong {
  display: block;
  margin-bottom: 8px;
  font-family: "Poppins", sans-serif;
  font-size: 1.3rem;
  line-height: 1.12;
  color: var(--text);
}

.advantages-stat-card p {
  color: var(--muted);
  font-size: 0.93rem;
  line-height: 1.6;
}

.advantages-content {
  display: grid;
  gap: 20px;
}

.advantages-summary-card {
  padding: 24px;
  border-radius: 4px;
}

.advantages-summary-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 18px;
}

.advantages-summary-head h3 {
  max-width: 560px;
  font-family: "Poppins", sans-serif;
  font-size: 1.5rem;
  line-height: 1.12;
}

.advantages-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.advantages-summary-item {
  padding: 16px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.advantages-summary-item strong {
  display: block;
  margin-bottom: 6px;
  font-size: 0.98rem;
  line-height: 1.35;
  color: var(--text);
}

.advantages-summary-item span {
  display: block;
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.62;
}

.advantages-summary-note {
  margin-top: 16px;
  padding: 16px 18px;
  border-radius: 4px;
  color: #dfe7f3;
  line-height: 1.7;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.advantages-cards-pro {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.advantage-card-pro {
  display: grid;
  align-content: start;
  gap: 16px;
  min-height: 225px;
  padding: 22px;
  border-radius: 4px;
  transition:
    transform 0.28s ease,
    border-color 0.28s ease,
    box-shadow 0.28s ease;
}

.advantage-card-pro:hover {
  transform: translateY(-4px);
  border-color: rgba(255, 255, 255, 0.16);
  box-shadow: 0 24px 58px rgba(0, 0, 0, 0.32);
}

.advantage-card-pro .advantage-card-head {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.advantage-card-pro .metric-icon-box {
  width: 58px;
  height: 58px;
  border-radius: 4px;
  font-size: 1.12rem;
}

.advantage-card-pro .advantage-card-tag {
  margin-bottom: 8px;
}

.advantage-card-pro h3 {
  font-size: 1.08rem;
  line-height: 1.32;
  font-weight: 700;
}

.advantage-card-pro p {
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1.72;
}

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

@media (min-width: 1200px) {
  .advantages-main-card {
    position: sticky;
    top: 108px;
  }
}

@media (max-width: 1299px) {
  .advantages-pro-layout {
    grid-template-columns: minmax(340px, 420px) minmax(0, 1fr);
  }

  .advantages-summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .advantages-cards-pro {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 1099px) {
  .advantages-pro-layout {
    grid-template-columns: 1fr;
  }

  .advantages-main-card {
    position: static;
  }

  .advantages-summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .advantages-cards-pro {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 899px) {
  .advantages-main-card,
  .advantages-summary-card,
  .advantage-card-pro {
    border-radius: 4px;
  }

  .advantages-main-card,
  .advantages-summary-card {
    padding: 22px;
  }

  .advantages-main-card h3 {
    font-size: clamp(1.8rem, 8vw, 2.4rem);
  }

  .advantages-summary-head {
    display: grid;
    gap: 10px;
    align-items: start;
  }

  .advantages-summary-grid,
  .advantages-cards-pro {
    grid-template-columns: 1fr;
  }

  .advantage-card-pro {
    min-height: auto;
    padding: 20px;
  }
}

@media (max-width: 639px) {
  .advantages-main-pills .advantage-pill {
    width: 100%;
    justify-content: center;
  }

  .advantage-card-pro .metric-icon-box {
    width: 54px;
    height: 54px;
    border-radius: 4px;
    font-size: 1.05rem;
  }

  .advantage-card-pro h3 {
    font-size: 1rem;
  }

  .advantage-card-pro p,
  .advantages-summary-item span,
  .advantages-stat-card p {
    font-size: 0.92rem;
  }
}


/* =========================================================
   9. PERFORMANCES
========================================================= */
.performance-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(340px, 0.78fr);
  gap: 26px;
  align-items: start;
}

.performance-highlight {
  min-height: 100%;
  padding: 26px;
  border-radius: 4px;
}

.performance-highlight-top {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 22px;
}

.performance-highlight-head h3 {
  font-family: "Poppins", sans-serif;
  font-size: clamp(2.6rem, 7vw, 4rem);
  line-height: 1;
  letter-spacing: -0.04em;
}

.metric-eyebrow {
  display: block;
  margin-bottom: 4px;
  color: var(--muted-2);
  font-size: 0.85rem;
}

.performance-highlight-body h4 {
  margin-bottom: 10px;
  font-size: 1.25rem;
  font-weight: 700;
}

.performance-highlight-body p {
  color: var(--muted);
  line-height: 1.8;
}

.performance-highlight-footer {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 22px;
}

.mini-point {
  padding: 14px 16px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.mini-point-title {
  display: block;
  margin-bottom: 4px;
  color: var(--muted-2);
  font-size: 0.82rem;
}

.mini-point-value {
  font-weight: 600;
}

.performance-stack {
  display: grid;
  gap: 16px;
}

.performance-card {
  padding: 22px;
  border-radius: 4px;
}

.performance-card-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 14px;
}

.performance-card-value {
  display: flex;
  flex-direction: column;
}

.metric-number {
  font-family: "Poppins", sans-serif;
  font-size: 1.65rem;
  line-height: 1.05;
  font-weight: 800;
}

.metric-label {
  margin-top: 4px;
  color: var(--muted);
  font-size: 0.92rem;
}

.performance-card p {
  color: var(--muted);
  line-height: 1.7;
}

.sidebar-card {
  padding: 24px;
  border-radius: 4px;
}

.sidebar-card-kicker {
  display: inline-block;
  margin-bottom: 10px;
  color: var(--muted-2);
  font-size: 0.84rem;
}

.sidebar-card h3 {
  margin-bottom: 18px;
  font-family: "Poppins", sans-serif;
  font-size: 1.45rem;
  line-height: 1.15;
}

.insight-list {
  display: grid;
  gap: 16px;
}

.insight-list li {
  display: grid;
  gap: 6px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.insight-list li:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.insight-list strong {
  font-size: 1rem;
}

.insight-list span {
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1.7;
}


/* =========================================================
   10. PARTENAIRES
========================================================= */
.partner-showcase {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr);
  gap: 24px;
  align-items: start;
  margin-bottom: 28px;
}

.partner-featured {
  position: relative;
  overflow: hidden;
  padding: 28px;
  border-radius: 4px;
}

.partner-featured::after {
  content: "";
  position: absolute;
  top: -100px;
  right: -90px;
  width: 260px;
  height: 260px;
  border-radius: 4px;
  background: radial-gradient(
    circle,
    rgba(192, 234, 241, 0.18) 0%,
    rgba(192, 234, 241, 0) 70%
  );
}

.partner-featured-top {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 18px;
}

.partner-logo-box {
  width: 74px;
  height: 74px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  padding: 0;
}

.partner-logo-box.small {
  width: 58px;
  height: 58px;
  border-radius: 0;
  padding: 0;
}

.partner-logo-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  flex-shrink: 0;
  filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.16));
}

.metric-icon-image {
  display: block;
  width: 28px;
  height: 28px;
  object-fit: contain;
  object-position: center;
  flex-shrink: 0;
  filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.16));
}

.partner-heading {
  min-width: 0;
}

.partner-tag {
  display: inline-block;
  margin-bottom: 6px;
  color: var(--muted-2);
  font-size: 0.84rem;
}

.partner-heading h3 {
  font-family: "Poppins", sans-serif;
  font-size: 1.75rem;
  line-height: 1.1;
}

.partner-description {
  position: relative;
  z-index: 1;
  margin-bottom: 20px;
  color: var(--muted);
  line-height: 1.8;
}

.partner-benefits-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.benefit-pill {
  padding: 13px 14px;
  border-radius: 4px;
  text-align: center;
  font-size: 0.92rem;
  font-weight: 600;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.partner-marquee-top {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 14px;
}

.partner-marquee-top h3 {
  margin-bottom: 4px;
  font-family: "Poppins", sans-serif;
  font-size: 1.15rem;
  line-height: 1.15;
}

.partner-marquee-top span {
  color: var(--muted-2);
  font-size: 0.9rem;
  line-height: 1.4;
}

.partner-marquee-card {
  width: 440px;
  min-height: auto;
  padding: 22px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.partner-marquee-card p {
  color: var(--muted);
  line-height: 1.68;
  font-size: 0.95rem;
}

.partner-marquee-card .card-list {
  gap: 8px;
  margin-top: 14px;
}

.partner-marquee-card .card-list li {
  font-size: 0.93rem;
}

.card-note {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  color: #dfe7f3;
  font-size: 0.92rem;
  line-height: 1.6;
}


/* =========================================================
   11. MARQUEE SYSTEM
========================================================= */
.marquee-block {
  position: relative;
  overflow: hidden;
  padding: 6px 0;
  mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}

.marquee-track {
  display: flex;
  align-items: stretch;
  gap: 18px;
  width: max-content;
  will-change: transform;
}

.marquee-track-partners {
  animation: marquee-scroll 36s linear infinite;
}

.marquee-track-team {
  animation: marquee-scroll 46s linear infinite;
}

.marquee-track-reviews {
  animation: marquee-scroll 34s linear infinite;
}

.marquee-card {
  width: 390px;
  min-height: auto;
  padding: 24px;
  border-radius: 4px;
  flex: 0 0 auto;
}

@keyframes marquee-scroll {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}


/* =========================================================
   12. ORGANISATION - V2 PREMIUM
========================================================= */
.team-marquee-block {
  padding: 8px 0 12px;
  mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
}

.marquee-track-team {
  gap: 22px;
  animation: marquee-scroll 46s linear infinite;
}

.team-card {
  --team-accent: #dce9f7;
  --team-accent-solid: #c8d6f1;
  --team-title: #eef4ff;
  --team-bg: rgba(255, 255, 255, 0.06);
  --team-border: rgba(255, 255, 255, 0.12);
  --team-glow: rgba(200, 214, 241, 0.18);

  position: relative;
  width: 292px;
  min-height: 352px;
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  gap: 18px;
  padding: 20px;
  border-radius: 4px;
  overflow: hidden;
  isolation: isolate;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.10) 0%,
    rgba(255, 255, 255, 0.04) 100%
  );
  border: 1px solid rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(16px);
  box-shadow:
    0 18px 48px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease,
    border-color 0.3s ease;
}

.team-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.05) 0%, transparent 35%),
    radial-gradient(circle at 20% 0%, rgba(255, 255, 255, 0.08), transparent 34%);
  z-index: 0;
}

.team-card::after {
  content: "";
  position: absolute;
  top: -72px;
  right: -40px;
  width: 190px;
  height: 190px;
  border-radius: 4px;
  background: radial-gradient(circle, var(--team-glow) 0%, rgba(255, 255, 255, 0) 72%);
  z-index: 0;
}

.team-card > * {
  position: relative;
  z-index: 1;
}

.team-card:hover {
  transform: translateY(-6px);
  border-color: var(--team-border);
  box-shadow:
    0 24px 60px rgba(0, 0, 0, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.team-card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  min-height: 54px;
}

.team-kicker {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #d9e5f2;
}

.team-role-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  max-width: 135px;
  padding: 7px 10px;
  border-radius: 4px;
  font-size: 0.72rem;
  font-weight: 800;
  line-height: 1.15;
  text-align: center;
  color: var(--team-accent);
  background: var(--team-bg);
  border: 1px solid var(--team-border);
  word-break: break-word;
}

.team-avatar-wrap {
  display: flex;
  justify-content: center;
}

.team-avatar {
  position: relative;
  width: 92px;
  height: 92px;
  padding: 4px;
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.20) 0%,
    rgba(255, 255, 255, 0.05) 100%
  );
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.24);
}

.team-avatar img,
.team-avatar-fallback {
  position: absolute;
  inset: 4px;
  width: calc(100% - 8px);
  height: calc(100% - 8px);
  border-radius: 50%;
}

.team-avatar img {
  z-index: 2;
  object-fit: cover;
  border: 2px solid rgba(255, 255, 255, 0.08);
}

.team-avatar-fallback {
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 1;
  font-family: "Poppins", sans-serif;
  font-size: 1.8rem;
  font-weight: 800;
  color: #09111d;
  background: linear-gradient(135deg, #ffffff 0%, var(--team-accent-solid) 100%);
}

.team-avatar.is-text-fallback .team-avatar-fallback {
  display: flex;
}

.team-content {
  display: grid;
  align-content: start;
  gap: 10px;
  text-align: center;
}

.team-eyebrow {
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--team-accent-solid);
}

.team-content h3 {
  min-height: 66px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Poppins", sans-serif;
  font-size: 1.52rem;
  line-height: 1.1;
  letter-spacing: -0.02em;
  background: linear-gradient(135deg, #ffffff 0%, var(--team-title) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.team-description {
  min-height: 72px;
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.65;
}

.team-footer {
  display: flex;
  justify-content: center;
}

.team-footer-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 8px 12px;
  border-radius: 4px;
  font-size: 0.78rem;
  font-weight: 700;
  color: #eaf2fb;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.09);
}

.team-empty-state {
  display: grid;
  gap: 8px;
  padding: 24px;
  border-radius: 4px;
  text-align: center;
  background: var(--gradient-soft);
  border: 1px solid var(--stroke);
  box-shadow: var(--shadow-md);
}

.team-empty-state strong {
  color: var(--text);
  font-size: 1rem;
}

.team-empty-state span {
  color: var(--muted);
  line-height: 1.7;
}

/* Couleurs par rôle */
.team-role-president {
  --team-accent: #ffe7b6;
  --team-accent-solid: #ffd580;
  --team-title: #fff1d0;
  --team-bg: rgba(255, 213, 128, 0.12);
  --team-border: rgba(255, 213, 128, 0.28);
  --team-glow: rgba(255, 213, 128, 0.22);
}

.team-role-dg {
  --team-accent: #cce9ff;
  --team-accent-solid: #9bd4ff;
  --team-title: #dbf0ff;
  --team-bg: rgba(155, 212, 255, 0.12);
  --team-border: rgba(155, 212, 255, 0.28);
  --team-glow: rgba(155, 212, 255, 0.20);
}

.team-role-manager {
  --team-accent: #d8f7de;
  --team-accent-solid: #b7f0c1;
  --team-title: #e8fff0;
  --team-bg: rgba(183, 240, 193, 0.12);
  --team-border: rgba(183, 240, 193, 0.28);
  --team-glow: rgba(183, 240, 193, 0.20);
}

.team-role-agent {
  --team-accent: #efd8ff;
  --team-accent-solid: #e8c3ff;
  --team-title: #f5e8ff;
  --team-bg: rgba(232, 195, 255, 0.12);
  --team-border: rgba(232, 195, 255, 0.28);
  --team-glow: rgba(232, 195, 255, 0.20);
}

.team-role-ambassadeur {
  --team-accent: #ffd8c8;
  --team-accent-solid: #ffbe9b;
  --team-title: #ffe9de;
  --team-bg: rgba(255, 190, 155, 0.12);
  --team-border: rgba(255, 190, 155, 0.28);
  --team-glow: rgba(255, 190, 155, 0.20);
}

.team-role-ambassadrice {
  --team-accent: #ffd6e7;
  --team-accent-solid: #ff9fcb;
  --team-title: #ffe6f1;
  --team-bg: rgba(255, 159, 203, 0.12);
  --team-border: rgba(255, 159, 203, 0.28);
  --team-glow: rgba(255, 159, 203, 0.20);
}

.team-role-default {
  --team-accent: #dce9f7;
  --team-accent-solid: #c8d6f1;
  --team-title: #eef4ff;
  --team-bg: rgba(200, 214, 241, 0.12);
  --team-border: rgba(200, 214, 241, 0.24);
  --team-glow: rgba(200, 214, 241, 0.18);
}


/* =========================================================
   13. AVIS
========================================================= */
.review-card {
  width: 390px;
  min-height: 340px;
  height: 340px;
  display: grid;
  grid-template-rows: auto auto 1fr;
  gap: 14px;
  padding: 24px;
  border-radius: 4px;
}

.review-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  min-height: 64px;
  margin-bottom: 0;
}

.review-author {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  flex: 1;
}

.review-avatar {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.22);
}

.review-author-text {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.review-author-text h3 {
  margin: 0;
  font-family: "Poppins", sans-serif;
  font-size: 1.06rem;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.review-author-text span {
  color: var(--muted-2);
  font-size: 0.9rem;
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.stars {
  display: inline-flex;
  gap: 4px;
  color: #ffd978;
  flex-shrink: 0;
  align-self: flex-start;
  padding-top: 2px;
}

.review-card-title {
  margin: 0;
  min-height: 2.8em;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.4;
  color: var(--text);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.review-card p {
  margin: 0;
  color: var(--muted);
  line-height: 1.78;
  font-size: 0.95rem;
  display: -webkit-box;
  -webkit-line-clamp: 7;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.reviews-empty-state {
  display: flex;
}

.review-card-empty {
  width: 100%;
  min-height: auto;
  height: auto;
}

.marquee-track-static {
  animation: none !important;
  transform: none !important;
}


/* =========================================================
   14. CONTACT
========================================================= */
.contact-card {
  padding: 30px;
  border-radius: 4px;
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(280px, 0.55fr);
  align-items: center;
  gap: 32px;
}

.contact-copy h2 {
  margin-bottom: 14px;
  font-family: "Poppins", sans-serif;
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  line-height: 1.08;
}

.contact-copy p {
  max-width: 760px;
  color: var(--muted);
  line-height: 1.8;
}

.contact-infos {
  display: grid;
  gap: 12px;
  margin-top: 24px;
}

.contact-info-item {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #e4ebf5;
  padding: 14px 16px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.contact-info-item i {
  width: 18px;
  text-align: center;
  color: #d6e8f2;
}

.contact-actions {
  min-width: 260px;
  display: grid;
  gap: 14px;
}


/* =========================================================
   15. RESPONSIVE - LARGE DESKTOP
========================================================= */
@media (min-width: 1360px) {
  .container {
    width: min(calc(100% - 64px), var(--container));
  }

  .hero-grid {
    grid-template-columns: minmax(0, 1.65fr) minmax(500px, 0.95fr);
    gap: 56px;
  }

  .advantages-layout {
    grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr) minmax(340px, 0.8fr);
  }

  .performance-layout {
    grid-template-columns: minmax(0, 1.24fr) minmax(0, 1.02fr) minmax(360px, 0.8fr);
  }

  .partner-showcase {
    grid-template-columns: minmax(0, 1.18fr) minmax(0, 1fr);
  }

  .partner-marquee-card {
    width: 460px;
  }

  .marquee-track-partners {
    animation: marquee-scroll 36s linear infinite;
  }

  .marquee-track-team {
    animation: marquee-scroll 42s linear infinite;
  }

  .marquee-track-reviews {
    animation: marquee-scroll 34s linear infinite;
  }
}


/* =========================================================
   16. RESPONSIVE - TABLET
========================================================= */
@media (max-width: 1099px) {
  .topbar-inner {
    min-height: 84px;
  }

  .desktop-nav {
    display: none;
  }

  .menu-button {
    display: flex;
  }

  .hero {
    padding: 58px 0 32px;
  }

  .hero-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .hero-content {
    max-width: 100%;
  }

  .hero-panel-card {
    padding: 26px;
  }

  .advantages-layout {
    grid-template-columns: 1fr 1fr;
  }

  .advantages-side {
    grid-column: 1 / -1;
  }

  .advantages-grid {
    grid-template-columns: 1fr 1fr;
  }

  .performance-layout {
    grid-template-columns: 1fr 1fr;
  }

  .performance-sidebar {
    grid-column: 1 / -1;
  }

  .partner-showcase,
  .contact-card {
    grid-template-columns: 1fr;
  }

  .contact-actions {
    min-width: 100%;
  }

  .marquee-block {
    mask-image: none;
    -webkit-mask-image: none;
    overflow: hidden;
    padding-bottom: 0;
  }

  .marquee-card {
    width: 340px;
  }

  .review-card {
    width: 340px;
    min-height: 332px;
    height: 332px;
    padding: 22px;
  }

  .partner-marquee-card {
    width: 390px;
    padding: 21px;
  }

  .marquee-track,
  .marquee-track-partners,
  .marquee-track-team,
  .marquee-track-reviews {
    width: max-content;
  }

  .marquee-track-partners {
    animation: marquee-scroll 44s linear infinite;
  }

  .marquee-track-team {
    animation: marquee-scroll 48s linear infinite;
  }

  .marquee-track-reviews {
    animation: marquee-scroll 42s linear infinite;
  }
}

@media (min-width: 900px) {
  .desktop-nav {
    display: flex;
  }

  .menu-button {
    display: none;
  }
}


/* =========================================================
   17. RESPONSIVE - MOBILE
========================================================= */
@media (max-width: 899px) {
  .advantages,
  .performances,
  .partners,
  .organization,
  .reviews,
  .contact-cta {
    padding: 54px 0 46px;
  }

  .hero-actions {
    flex-direction: column;
  }

  .button {
    width: 100%;
  }

  .hero-trustbar {
    grid-template-columns: 1fr;
  }

  .panel-mini-grid {
    grid-template-columns: 1fr 1fr;
  }

  .performance-layout {
    grid-template-columns: 1fr;
    gap: 22px;
  }

  .performance-highlight-footer {
    grid-template-columns: 1fr;
  }

  .partner-benefits-grid {
    grid-template-columns: 1fr;
  }

  .marquee-block {
    mask-image: none;
    -webkit-mask-image: none;
    overflow: hidden;
    padding-bottom: 0;
  }

  .marquee-card {
    width: 300px;
  }

  .review-card {
    width: 300px;
    min-height: 320px;
    height: 320px;
    padding: 20px;
  }

  .review-card p {
    -webkit-line-clamp: 6;
  }

  .partner-marquee-card {
    width: 330px;
    padding: 20px;
  }

  .partner-marquee-card p {
    font-size: 0.94rem;
    line-height: 1.62;
  }

  .partner-marquee-card .card-list li {
    font-size: 0.91rem;
  }

  .marquee-track,
  .marquee-track-partners,
  .marquee-track-team,
  .marquee-track-reviews {
    width: max-content;
  }

  .marquee-track-partners {
    animation: marquee-scroll 52s linear infinite;
  }

  .marquee-track-team {
    animation: marquee-scroll 54s linear infinite;
  }

  .marquee-track-reviews {
    animation: marquee-scroll 50s linear infinite;
  }

  .review-top {
    flex-direction: row;
    align-items: flex-start;
  }

  .team-card {
    width: 272px;
    min-height: 334px;
    padding: 18px;
    gap: 16px;
  }

  .team-content h3 {
    min-height: 58px;
    font-size: 1.34rem;
  }

  .team-description {
    min-height: 64px;
    font-size: 0.88rem;
  }
}


/* =========================================================
   18. RESPONSIVE - SMALL MOBILE
========================================================= */
@media (max-width: 639px) {
  .container {
    width: min(calc(100% - 28px), var(--container));
  }

  .topbar-inner {
    min-height: 80px;
  }

  .brand-mark {
    width: 52px;
    height: 52px;
    border-radius: 4px;
    font-size: 1.45rem;
  }

  .brand-name {
    font-size: 1.08rem;
  }

  .hero {
    padding-top: 34px;
    padding-bottom: 22px;
  }

  .hero h1 {
    font-size: clamp(2.45rem, 11vw, 3.6rem);
  }

  .hero-description {
    font-size: 1rem;
    line-height: 1.75;
  }

  .hero-panel-card,
  .advantages-spotlight,
  .advantage-card,
  .advantages-side-card,
  .performance-highlight,
  .performance-card,
  .sidebar-card,
  .partner-featured,
  .marquee-card,
  .contact-card {
    border-radius: 4px;
  }

  .panel-mini-grid {
    grid-template-columns: 1fr;
  }

  .metric-icon-box {
    width: 56px;
    height: 56px;
    border-radius: 4px;
    font-size: 1.15rem;
  }

  .partner-logo-box {
    width: 66px;
    height: 66px;
    border-radius: 0;
    padding: 0;
  }

  .partner-logo-box.small {
    width: 54px;
    height: 54px;
    border-radius: 0;
    padding: 0;
  }

  .metric-icon-image {
    width: 24px;
    height: 24px;
  }

  .marquee-card {
    width: 286px;
    padding: 20px;
  }

  .review-card {
    width: 286px;
    min-height: 312px;
    height: 312px;
    padding: 18px;
    gap: 12px;
  }

  .review-top {
    gap: 12px;
    min-height: 58px;
  }

  .review-author-text h3 {
    font-size: 1rem;
  }

  .review-author-text span {
    font-size: 0.84rem;
  }

  .review-card-title {
    font-size: 0.96rem;
  }

  .review-card p {
    font-size: 0.9rem;
    line-height: 1.7;
    -webkit-line-clamp: 6;
  }

  .partner-marquee-card {
    width: 310px;
    padding: 18px;
  }

  .partner-marquee-top {
    gap: 12px;
    margin-bottom: 12px;
  }

  .partner-marquee-top h3 {
    font-size: 1.05rem;
  }

  .partner-marquee-top span {
    font-size: 0.86rem;
  }

  .partner-marquee-card p {
    font-size: 0.92rem;
  }

  .partner-marquee-card .card-list {
    gap: 7px;
    margin-top: 12px;
  }

  .partner-marquee-card .card-list li {
    font-size: 0.9rem;
  }

  .card-note {
    margin-top: 12px;
    padding-top: 12px;
    font-size: 0.88rem;
    line-height: 1.55;
  }

  .marquee-track-partners {
    animation: marquee-scroll 58s linear infinite;
  }

  .marquee-track-team {
    animation: marquee-scroll 60s linear infinite;
  }

  .marquee-track-reviews {
    animation: marquee-scroll 56s linear infinite;
  }

  .team-marquee-block {
    mask-image: none;
    -webkit-mask-image: none;
  }

  .team-card {
    width: 250px;
    min-height: 312px;
    padding: 16px;
    gap: 14px;
    border-radius: 4px;
  }

  .team-card-top {
    min-height: 48px;
  }

  .team-role-pill {
    max-width: 118px;
    min-height: 30px;
    padding: 6px 9px;
    font-size: 0.68rem;
  }

  .team-avatar {
    width: 78px;
    height: 78px;
  }

  .team-avatar-fallback {
    font-size: 1.45rem;
  }

  .team-content h3 {
    min-height: auto;
    font-size: 1.2rem;
  }

  .team-description {
    min-height: auto;
    font-size: 0.84rem;
    line-height: 1.55;
  }

  .team-footer-badge {
    min-height: 32px;
    font-size: 0.72rem;
  }
}

/* ===== mobile-menu.css ===== */
/* =========================================================
   MOBILE MENU - LiveSea Agency
   ========================================================= */

.menu-button {
  position: relative;
  z-index: 140;
}

.mobile-menu {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  background: rgba(4, 10, 20, 0.96);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.22);
  transition:
    max-height 0.35s ease,
    opacity 0.25s ease,
    visibility 0.25s ease;
  z-index: 130;
}

.mobile-nav {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  width: min(calc(100% - 28px), var(--container));
  margin: 0 auto;
  padding: 18px 20px 22px;
  box-sizing: border-box;
}

.mobile-nav > a,
.mobile-discord {
  width: 100%;
  min-height: 54px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  padding: 14px 16px;
  border-radius: 4px;
  box-sizing: border-box;
  color: var(--text);
  font-weight: 600;
  text-decoration: none;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  transition:
    background 0.25s ease,
    border-color 0.25s ease,
    transform 0.25s ease,
    box-shadow 0.25s ease;
}

.mobile-nav > a:hover,
.mobile-discord:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.12);
}

.mobile-nav > a:active,
.mobile-discord:active {
  transform: translateY(1px);
}

.mobile-discord {
  margin-top: 4px;
  background: linear-gradient(
    135deg,
    rgba(88, 101, 242, 0.35),
    rgba(88, 101, 242, 0.18)
  );
  border: 1px solid rgba(132, 146, 255, 0.35);
}

.mobile-discord:hover {
  background: linear-gradient(
    135deg,
    rgba(88, 101, 242, 0.42),
    rgba(88, 101, 242, 0.24)
  );
  border-color: rgba(150, 162, 255, 0.42);
  box-shadow: 0 10px 24px rgba(88, 101, 242, 0.14);
}

/* Menu ouvert */
.topbar.menu-open .mobile-menu {
  max-height: calc(100vh - 72px);
  overflow-y: auto;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* Scrollbar propre */
.topbar.menu-open .mobile-menu::-webkit-scrollbar {
  width: 8px;
}

.topbar.menu-open .mobile-menu::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.12);
  border-radius: 4px;
}

.topbar.menu-open .mobile-menu::-webkit-scrollbar-track {
  background: transparent;
}

.topbar.menu-open .menu-button {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.14);
}

.topbar.menu-open .menu-button i::before {
  content: "\f00d";
}

/* Zone utilisateur connecté dans le menu mobile */
.mobile-user-box {
  width: 100%;
  margin-top: 12px;
}

.mobile-user-box .discord-user-menu-wrap,
.mobile-user-box .discord-user-trigger,
.mobile-user-box .discord-user-dropdown {
  width: 100%;
  box-sizing: border-box;
}

/* Desktop */
@media (min-width: 900px) {
  .mobile-menu {
    display: none;
  }
}

/* Tablet / mobile */
@media (max-width: 899px) {
  .desktop-nav {
    display: none;
  }

  .menu-button {
    display: flex;
  }
}

/* Tablet */
@media (max-width: 768px) {
  .mobile-nav {
    width: calc(100% - 24px);
    padding: 16px 12px 18px;
    gap: 9px;
  }

  .mobile-nav > a,
  .mobile-discord {
    min-height: 52px;
    padding: 13px 14px;
    border-radius: 4px;
  }

  .topbar.menu-open .mobile-menu {
    max-height: calc(100vh - 68px);
  }
}

/* Small mobile */
@media (max-width: 480px) {
  .mobile-nav {
    width: calc(100% - 20px);
    padding: 14px 10px 16px;
    gap: 8px;
  }

  .mobile-nav > a,
  .mobile-discord {
    min-height: 50px;
    padding: 12px 13px;
    border-radius: 4px;
    font-size: 15px;
  }

  .topbar.menu-open .mobile-menu {
    max-height: calc(100vh - 64px);
  }
}

/* ===== session-menu.css ===== */
/* =========================================================
   SESSION MENU - LiveSea Agency
   ========================================================= */

/* =========================================================
   BASE
   ========================================================= */
.discord-user-menu-wrap {
  position: relative;
  width: 100%;
}

.contact-user-box {
  width: 100%;
}

.discord-user-trigger {
  width: 100%;
  min-height: 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 16px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 4px;
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.08),
    rgba(255, 255, 255, 0.04)
  );
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  color: #ffffff;
  cursor: pointer;
  text-align: left;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
  transition:
    transform 0.22s ease,
    border-color 0.22s ease,
    background 0.22s ease,
    box-shadow 0.22s ease;
}

.discord-user-trigger:hover {
  transform: translateY(-1px);
  border-color: rgba(255, 255, 255, 0.18);
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.11),
    rgba(255, 255, 255, 0.06)
  );
  box-shadow: 0 14px 35px rgba(0, 0, 0, 0.22);
}

.discord-user-trigger:focus-visible {
  outline: 2px solid rgba(180, 220, 255, 0.9);
  outline-offset: 2px;
}

/* =========================================================
   CONTENU DU BOUTON
   ========================================================= */
.discord-user-main {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  flex: 1;
}

.discord-user-avatar,
.discord-user-avatar-fallback {
  width: 42px;
  height: 42px;
  border-radius: 4px;
  flex-shrink: 0;
}

.discord-user-avatar {
  object-fit: cover;
  border: 2px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
}

.discord-user-avatar-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 800;
  color: #ffffff;
  border: 2px solid rgba(255, 255, 255, 0.12);
  background: linear-gradient(135deg, #5865f2, #9b87f5);
  box-shadow: 0 6px 18px rgba(88, 101, 242, 0.25);
}

.discord-user-meta {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  overflow: hidden;
}

.discord-user-display {
  font-size: 15px;
  font-weight: 700;
  color: #ffffff;
  line-height: 1.1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.discord-user-username {
  margin-top: 3px;
  font-size: 13px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.72);
  line-height: 1.1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.discord-user-chevron {
  flex-shrink: 0;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.72);
  transition: transform 0.22s ease, color 0.22s ease;
}

.discord-user-menu-wrap.open .discord-user-chevron {
  transform: rotate(180deg);
  color: rgba(255, 255, 255, 0.95);
}

/* =========================================================
   DROPDOWN
   ========================================================= */
.discord-user-dropdown {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  width: 100%;
  min-width: 100%;
  padding: 8px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  background: rgba(12, 18, 32, 0.94);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow:
    0 18px 45px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition:
    opacity 0.2s ease,
    visibility 0.2s ease,
    transform 0.2s ease;
  z-index: 1000;
}

.discord-user-menu-wrap.open .discord-user-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.discord-dropdown-item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 14px;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: #ffffff;
  text-decoration: none;
  text-align: left;
  font-size: 14px;
  font-weight: 600;
  transition:
    background 0.2s ease,
    color 0.2s ease,
    transform 0.2s ease;
}

.discord-dropdown-item:hover {
  background: rgba(255, 255, 255, 0.07);
  color: #ffffff;
}

.discord-dropdown-item:focus-visible {
  outline: 2px solid rgba(180, 220, 255, 0.9);
  outline-offset: 2px;
}

.discord-dropdown-item i {
  width: 18px;
  text-align: center;
  color: rgba(255, 255, 255, 0.78);
}

.discord-dropdown-item.logout {
  color: #ffcccc;
}

.discord-dropdown-item.logout i {
  color: #ffb1b1;
}

.discord-dropdown-item.logout:hover {
  background: rgba(255, 80, 80, 0.1);
  color: #ffffff;
}

.discord-dropdown-divider {
  height: 1px;
  margin: 6px 8px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 4px;
}

/* =========================================================
   BLOC MESSAGE D'ERREUR AUTH
   ========================================================= */
.auth-error-box {
  margin: 16px auto 0;
  max-width: 1200px;
  padding: 12px 16px;
  border-radius: 4px;
  border: 1px solid rgba(255, 77, 77, 0.35);
  background: rgba(255, 77, 77, 0.12);
  color: #ffd4d4;
  font-size: 14px;
  line-height: 1.5;
}

/* =========================================================
   HEADER DESKTOP
   ========================================================= */
.desktop-nav .discord-user-menu-wrap {
  width: 260px;
  flex-shrink: 0;
}

.desktop-nav .discord-user-trigger {
  min-height: 56px;
  padding: 10px 14px;
  border-radius: 4px;
}

.desktop-nav .discord-user-avatar,
.desktop-nav .discord-user-avatar-fallback {
  width: 38px;
  height: 38px;
}

.desktop-nav .discord-user-display {
  font-size: 14px;
}

.desktop-nav .discord-user-username {
  font-size: 12px;
}

/* =========================================================
   SECTION CONTACT
   ========================================================= */
.contact-actions {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.contact-actions .contact-user-box {
  width: 100%;
  max-width: 100%;
}

.contact-actions .button,
.contact-actions .discord-user-trigger {
  min-height: 60px;
}

.contact-actions .discord-user-trigger {
  border-radius: 4px;
}

.contact-actions .discord-user-dropdown {
  left: 0;
  right: auto;
  width: 100%;
  min-width: 100%;
}

/* =========================================================
   MENU MOBILE
   ========================================================= */
.mobile-user-box {
  width: 100%;
  margin-top: 12px;
}

.mobile-user-box .discord-user-menu-wrap {
  width: 100%;
}

.mobile-user-box .discord-user-trigger {
  width: 100%;
  box-sizing: border-box;
  justify-content: space-between;
}

.mobile-user-box .discord-user-main {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  min-width: 0;
  width: 100%;
  flex: 1;
  text-align: left;
}

.mobile-user-box .discord-user-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  min-width: 0;
  flex: 1;
  text-align: left;
}

.mobile-user-box .discord-user-display,
.mobile-user-box .discord-user-username {
  width: 100%;
  text-align: left;
}

.mobile-user-box .discord-user-avatar,
.mobile-user-box .discord-user-avatar-fallback {
  flex-shrink: 0;
}

.mobile-user-box .discord-user-chevron {
  margin-left: 12px;
  flex-shrink: 0;
}

.mobile-user-box .discord-user-dropdown {
  position: static;
  width: 100%;
  min-width: 100%;
  margin-top: 10px;
  transform: none;
  display: none;
  opacity: 1;
  visibility: visible;
  box-sizing: border-box;
}

.mobile-user-box .discord-user-menu-wrap.open .discord-user-dropdown {
  display: block;
}

/* =========================================================
   LARGE TABLET / SMALL LAPTOP
   ========================================================= */
@media (max-width: 1200px) {
  .desktop-nav .discord-user-menu-wrap {
    width: 240px;
  }

  .discord-user-trigger {
    min-height: 58px;
    padding: 11px 14px;
  }

  .discord-user-avatar,
  .discord-user-avatar-fallback {
    width: 40px;
    height: 40px;
  }
}

/* =========================================================
   TABLET
   ========================================================= */
@media (max-width: 992px) {
  .desktop-nav .discord-user-menu-wrap {
    display: none;
  }

  .discord-user-trigger {
    min-height: 58px;
  }

  .mobile-user-box {
    display: block;
  }
}

/* =========================================================
   MOBILE
   ========================================================= */
@media (max-width: 768px) {
  .discord-user-trigger {
    min-height: 56px;
    padding: 10px 14px;
    border-radius: 4px;
    gap: 12px;
  }

  .discord-user-main {
    gap: 10px;
  }

  .discord-user-avatar,
  .discord-user-avatar-fallback {
    width: 38px;
    height: 38px;
  }

  .discord-user-display {
    font-size: 14px;
  }

  .discord-user-username {
    font-size: 12px;
  }

  .discord-user-dropdown {
    border-radius: 4px;
    padding: 7px;
  }

  .discord-dropdown-item {
    padding: 12px 13px;
    border-radius: 4px;
    font-size: 13px;
  }

  .contact-actions {
    gap: 12px;
  }
}

/* =========================================================
   SMALL MOBILE
   ========================================================= */
@media (max-width: 480px) {
  .discord-user-trigger {
    min-height: 54px;
    padding: 10px 12px;
  }

  .discord-user-avatar,
  .discord-user-avatar-fallback {
    width: 36px;
    height: 36px;
  }

  .discord-user-display {
    font-size: 13px;
  }

  .discord-user-username {
    font-size: 11px;
  }

  .discord-user-chevron {
    font-size: 12px;
  }

  .discord-dropdown-item {
    font-size: 13px;
    padding: 11px 12px;
  }
}

/* ===== luminary-live-sea.css ===== */
/*
TemplateMo 621 Luminary
https://templatemo.com/tm-621-luminary
*/

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  --base-deep: #0F1115;
  --base-mid: #161A20;
  --base-soft: #1C2128;
  --slate-warm: #6B7280;
  --slate-light: #9CA3AF;
  --graphite: #2A2E35;
  --graphite-soft: #3D424A;
  --ivory: #E5E7EB;
  --ivory-muted: #C9CDD4;
  --silver: #B0B8C4;
  --panel-bg: rgba(22, 26, 32, 0.55);
  --panel-border: rgba(156, 163, 175, 0.08);
  --silk-ease: cubic-bezier(0.16, 1, 0.3, 1);
}

html { scroll-behavior: smooth; font-size: 16px; scroll-padding-top: 80px; }

body {
  font-family: 'Montserrat', sans-serif;
  background: var(--base-deep);
  color: var(--ivory);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* ── Grain ── */
.grain {
  position: fixed; inset: 0; pointer-events: none; z-index: 9999;
  opacity: 0.028; mix-blend-mode: overlay;
}

/* ── BG ── */
.atmosphere {
  position: fixed; inset: 0; z-index: 0;
  background: linear-gradient(180deg, #0F1115 0%, #161A20 35%, #1C2128 70%, #0D0F13 100%);
}

/* ── Nav ── */
.top-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 600;
  display: flex; justify-content: space-between; align-items: center;
  padding: 24px 40px;
  transition: background 0.8s var(--silk-ease), padding 0.8s var(--silk-ease);
}
.top-nav.scrolled {
  background: rgba(15, 17, 21, 0.85);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  padding: 16px 40px;
}
.nav-brand { font-size: 13px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ivory); text-decoration: none; }
.nav-brand span { font-weight: 300; color: var(--slate-warm); margin-left: 4px; }
.nav-links { display: flex; gap: 32px; list-style: none; align-items: center; }
.nav-links a {
  font-size: 10px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--slate-warm); text-decoration: none; position: relative; padding: 14px 0 6px;
  transition: color 0.8s var(--silk-ease);
}
.nav-links a::after {
  content: ''; position: absolute; top: 0; left: 50%;
  width: 6px; height: 6px;
  border-right: 1px solid var(--silver); border-bottom: 1px solid var(--silver);
  transform: translateX(-50%) rotate(45deg) translateY(-8px);
  opacity: 0; transition: transform 0.8s var(--silk-ease), opacity 0.6s var(--silk-ease);
  pointer-events: none;
}
.nav-links a:hover { color: var(--ivory); }
.nav-links a:hover::after { opacity: 0.7; transform: translateX(-50%) rotate(45deg) translateY(0); }
.nav-links a.active { color: var(--ivory-muted); }
.nav-links a.active::after { opacity: 0.4; transform: translateX(-50%) rotate(45deg) translateY(0); }
.nav-cta {
  padding: 10px 28px; border-radius: 4px; font-family: inherit;
  font-size: 10px; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase;
  background: linear-gradient(135deg, var(--silver), var(--slate-light));
  color: var(--base-deep); border: none; cursor: pointer; text-decoration: none;
  transition: transform 0.8s var(--silk-ease), box-shadow 0.8s var(--silk-ease);
}
.nav-cta:hover { transform: scale(1.03); box-shadow: 0 6px 30px rgba(176,184,196,0.15); }

/* ── Hamburger ── */
.nav-toggle {
  display: none; background: none; border: none; cursor: pointer;
  width: 32px; height: 24px; position: relative; padding: 0;
}
.toggle-bar {
  display: block; width: 100%; height: 1.5px; background: var(--ivory);
  position: absolute; left: 0;
  transition: transform 0.6s var(--silk-ease), top 0.6s var(--silk-ease);
}
.toggle-bar:nth-child(1) { top: 6px; }
.toggle-bar:nth-child(2) { top: 16px; }
.nav-toggle.active .toggle-bar:nth-child(1) { top: 11px; transform: rotate(45deg); }
.nav-toggle.active .toggle-bar:nth-child(2) { top: 11px; transform: rotate(-45deg); }

/* ── Mobile Menu ── */
.mobile-menu {
  position: fixed; inset: 0; z-index: 550;
  pointer-events: none; opacity: 0; visibility: hidden;
  transition: opacity 0.6s var(--silk-ease), visibility 0.6s var(--silk-ease);
}
.mobile-menu.open { opacity: 1; visibility: visible; pointer-events: auto; }
.mobile-menu-inner {
  position: absolute; inset: 0;
  background: rgba(15, 17, 21, 0.94);
  backdrop-filter: blur(40px); -webkit-backdrop-filter: blur(40px);
  display: flex; flex-direction: column; justify-content: center;
  padding: 100px 40px 60px; overflow-y: auto;
}
.mobile-menu-links { display: flex; flex-direction: column; flex: 1; justify-content: center; }
.mobile-menu-link {
  display: flex; align-items: baseline; gap: 16px;
  font-size: clamp(1.6rem, 5vw, 2.6rem); font-weight: 300; letter-spacing: -0.02em;
  color: var(--ivory); text-decoration: none; padding: 14px 0;
  border-bottom: 1px solid rgba(156,163,175,0.06); position: relative;
  opacity: 0; transform: translateY(20px);
  transition: opacity 0.3s ease, transform 0.3s ease, color 0.6s var(--silk-ease);
}
.mobile-menu.open .mobile-menu-link {
  opacity: 1; transform: translateY(0);
  transition: opacity 0.5s var(--silk-ease), transform 0.5s var(--silk-ease), color 0.6s var(--silk-ease);
}
.mobile-menu.open .mobile-menu-link:nth-child(1) { transition-delay: 0.06s; }
.mobile-menu.open .mobile-menu-link:nth-child(2) { transition-delay: 0.12s; }
.mobile-menu.open .mobile-menu-link:nth-child(3) { transition-delay: 0.18s; }
.mobile-menu.open .mobile-menu-link:nth-child(4) { transition-delay: 0.24s; }
.mobile-menu.open .mobile-menu-link:nth-child(5) { transition-delay: 0.30s; }
.mobile-menu.open .mobile-menu-link:nth-child(6) { transition-delay: 0.36s; }
.mobile-menu.open .mobile-menu-link:nth-child(7) { transition-delay: 0.42s; }
.mobile-menu-link::before {
  content: attr(data-index); font-size: 10px; font-weight: 500;
  letter-spacing: 0.15em; color: var(--slate-warm); opacity: 0.4;
  min-width: 24px; font-variant-numeric: tabular-nums;
}
.mobile-menu-footer {
  display: flex; justify-content: space-between; align-items: center;
  padding-top: 24px; border-top: 1px solid rgba(156,163,175,0.06);
  opacity: 0; transition: opacity 0.3s ease;
}
.mobile-menu.open .mobile-menu-footer {
  opacity: 1; transition: opacity 0.5s var(--silk-ease) 0.45s;
}
.mobile-menu-footer a {
  font-size: 10px; font-weight: 400; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--slate-warm); opacity: 0.4; text-decoration: none;
}
body.menu-open { overflow: hidden; }
body.menu-open .top-nav { background: rgba(15,17,21,0.95); backdrop-filter: blur(20px); }

/* ── Side Panels ── */
.side-panel {
  position: fixed; top: 50%; transform: translateY(-50%);
  width: 56px; z-index: 100;
  display: flex; flex-direction: column; align-items: center;
  gap: 14px; padding: 24px 0;
}
.side-panel.left { left: 20px; }
.side-panel.right { right: 20px; }
.side-label {
  writing-mode: vertical-rl; text-orientation: mixed;
  font-size: 9px; font-weight: 500; letter-spacing: 0.25em; text-transform: uppercase;
  color: var(--slate-warm); opacity: 0.5;
}
.side-track {
  width: 1px; height: 160px;
  background: rgba(156,163,175,0.06); position: relative; border-radius: 1px;
}
.side-track-fill {
  position: absolute; top: 0; left: 0; width: 100%; height: 0%;
  background: linear-gradient(to bottom, var(--silver), rgba(176,184,196,0.15));
  border-radius: 1px; transition: height 1.2s var(--silk-ease);
}
.side-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--slate-warm); opacity: 0.15;
  transition: opacity 0.8s var(--silk-ease), transform 0.8s var(--silk-ease), box-shadow 0.8s var(--silk-ease);
}
.side-dot.active {
  opacity: 0.8; background: var(--silver);
  box-shadow: 0 0 12px rgba(176,184,196,0.3); transform: scale(1.3);
}
.side-readout {
  font-size: 9px; font-weight: 400; letter-spacing: 0.1em;
  color: var(--slate-warm); opacity: 0.35;
  font-variant-numeric: tabular-nums;
}

/* ── Container ── */
.main { position: relative; z-index: 10; max-width: 1120px; margin: 0 auto; padding: 0 40px; }

/* ── Shared ── */
.section { padding: 120px 0; position: relative; }
.section-tag {
  font-size: 9px; font-weight: 600; letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--slate-warm); opacity: 0.6; margin-bottom: 20px;
}
.section-title {
  font-size: clamp(2rem, 4vw, 3rem); font-weight: 300;
  letter-spacing: -0.04em; line-height: 1.15; color: var(--ivory); margin-bottom: 20px;
}
.section-title strong { font-weight: 600; }
.section-body {
  font-size: 0.95rem; font-weight: 300; line-height: 1.8; color: var(--slate-light); max-width: 540px;
}
.section-center { text-align: center; }
.section-center .section-body { margin: 0 auto; }

.silk-divider { width: 100px; height: 1px; background: linear-gradient(90deg, transparent, var(--panel-border), transparent); margin: 0 auto; }

.btn-primary {
  display: inline-block; padding: 16px 44px; border-radius: 4px;
  background: linear-gradient(135deg, var(--silver), var(--slate-light));
  color: var(--base-deep); font-family: inherit; font-size: 11px; font-weight: 600;
  letter-spacing: 0.15em; text-transform: uppercase; border: none; cursor: pointer;
  text-decoration: none;
  transition: transform 0.8s var(--silk-ease), box-shadow 0.8s var(--silk-ease);
}
.btn-primary:hover { transform: scale(1.02); box-shadow: 0 8px 40px rgba(176,184,196,0.18); }
.btn-secondary {
  display: inline-block; padding: 16px 44px; border-radius: 4px; background: transparent;
  color: var(--ivory-muted); font-family: inherit; font-size: 11px; font-weight: 500;
  letter-spacing: 0.15em; text-transform: uppercase;
  border: 1px solid var(--panel-border); cursor: pointer; text-decoration: none;
  transition: transform 0.8s var(--silk-ease), border-color 0.8s var(--silk-ease), background 0.8s var(--silk-ease);
}
.btn-secondary:hover { transform: scale(1.02); border-color: rgba(156,163,175,0.2); background: rgba(156,163,175,0.04); }

/* ── Reveal ── */
.reveal {
  opacity: 0; transform: translateY(36px);
  transition: opacity 1.2s var(--silk-ease), transform 1.2s var(--silk-ease);
}
.reveal.visible { opacity: 1; transform: translateY(0); }
.reveal-d1 { transition-delay: 0.1s; }
.reveal-d2 { transition-delay: 0.2s; }
.reveal-d3 { transition-delay: 0.3s; }
.reveal-d4 { transition-delay: 0.4s; }

/* ══════════════════════════════════
   HERO
   ══════════════════════════════════ */
.hero {
  min-height: 100vh; display: flex; flex-direction: column;
  justify-content: center; align-items: center; text-align: center;
  padding: 120px 0 80px; position: relative;
}
.hero-grid {
  position: absolute; bottom: 0; left: 50%; height: 80%;
  width: 100vw; transform: translateX(-50%);
  z-index: 0; pointer-events: none;
  --mx: 50%; --my: 50%;
  background-image:
    linear-gradient(to right, rgba(156,163,175,0.22) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(156,163,175,0.22) 1px, transparent 1px);
  background-size: 120px 120px;
  background-position: center bottom;
  -webkit-mask-image:
    radial-gradient(circle 300px at var(--mx) var(--my), rgba(0,0,0,1) 0%, transparent 65%),
    linear-gradient(to bottom, transparent 0%, transparent 25%, rgba(0,0,0,0.1) 45%, rgba(0,0,0,0.25) 70%, rgba(0,0,0,0.4) 100%);
  mask-image:
    radial-gradient(circle 300px at var(--mx) var(--my), rgba(0,0,0,1) 0%, transparent 65%),
    linear-gradient(to bottom, transparent 0%, transparent 25%, rgba(0,0,0,0.1) 45%, rgba(0,0,0,0.25) 70%, rgba(0,0,0,0.4) 100%);
  -webkit-mask-composite: source-over;
  mask-composite: add;
}
.hero > *:not(.hero-grid) { position: relative; z-index: 1; }
.hero-badge {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 10px 24px; border-radius: 4px;
  background: var(--panel-bg); border: 1px solid var(--panel-border);
  backdrop-filter: blur(20px); margin-bottom: 40px;
  opacity: 0; transform: translateY(16px);
  animation: fadeUp 1.2s var(--silk-ease) 0.2s forwards;
}
.hero-badge-dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--silver);
  box-shadow: 0 0 8px rgba(176,184,196,0.4); animation: pulse 3s ease-in-out infinite;
}
.hero-badge span { font-size: 10px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--slate-light); }

.hero h1 {
  font-size: clamp(2.8rem, 6.5vw, 5.5rem); font-weight: 300;
  letter-spacing: -0.05em; line-height: 1;
  opacity: 0; transform: translateY(24px);
  animation: fadeUp 1.4s var(--silk-ease) 0.4s forwards;
}
.hero h1 em {
  font-style: normal; font-weight: 600;
  background: linear-gradient(135deg, var(--ivory), var(--silver), var(--slate-light));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.hero-sub {
  font-size: clamp(0.85rem, 1.2vw, 1rem); font-weight: 300; line-height: 1.7;
  color: var(--slate-light); max-width: 520px; margin: 28px auto 48px;
  opacity: 0; transform: translateY(16px);
  animation: fadeUp 1.4s var(--silk-ease) 0.6s forwards;
}
.hero-ctas {
  display: flex; gap: 14px;
  opacity: 0; transform: translateY(16px);
  animation: fadeUp 1.4s var(--silk-ease) 0.8s forwards;
}
.hero-metrics {
  display: flex; justify-content: center; gap: 56px; margin-top: 72px;
  opacity: 0; transform: translateY(16px);
  animation: fadeUp 1.4s var(--silk-ease) 1s forwards;
}
.metric { text-align: center; }
.metric-value {
  font-size: clamp(1.8rem, 3vw, 2.6rem); font-weight: 300; letter-spacing: -0.04em;
  color: var(--ivory); line-height: 1; font-variant-numeric: tabular-nums;
}
.metric-value span { font-size: 0.5em; font-weight: 400; color: var(--slate-warm); vertical-align: super; margin-left: 2px; }
.metric-label { font-size: 9px; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--slate-warm); margin-top: 8px; }

@keyframes fadeUp { to { opacity: 1; transform: translateY(0); } }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } }

/* ══════════════════════════════════
   LOGO TICKER
   ══════════════════════════════════ */
.logo-ticker {
  padding: 60px 0; border-top: 1px solid var(--panel-border); border-bottom: 1px solid var(--panel-border);
  overflow: hidden; position: relative; z-index: 10;
}
.logo-ticker-label {
  text-align: center; font-size: 9px; font-weight: 500; letter-spacing: 0.25em;
  text-transform: uppercase; color: var(--slate-warm); opacity: 0.5; margin-bottom: 32px;
}
.ticker-track {
  display: flex;
  width: max-content;
  transform: translate3d(0, 0, 0);
  animation: tickerScroll var(--ticker-duration, 34s) linear infinite;
  backface-visibility: hidden;
  will-change: auto;
}
.logo-ticker.ticker-in-view .ticker-track {
  animation-play-state: running;
  will-change: transform;
}
.logo-ticker.ticker-paused .ticker-track {
  animation-play-state: paused;
  will-change: auto;
}
@media (hover: hover) and (pointer: fine) {
  .logo-ticker:hover .ticker-track { animation-play-state: paused; }
}
.ticker-item {
  flex-shrink: 0; padding: 0 40px; display: flex; align-items: center;
  font-size: 14px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--slate-warm); opacity: 0.3;
  transition: opacity 0.6s var(--silk-ease);
}
.ticker-item:hover { opacity: 0.7; }
.ticker-dot { width: 4px; height: 4px; border-radius: 50%; background: var(--slate-warm); opacity: 0.2; margin: 0 40px; flex-shrink: 0; }

@keyframes tickerScroll { to { transform: translate3d(-50%, 0, 0); } }

/* ══════════════════════════════════
   FEATURE SHOWCASE
   ══════════════════════════════════ */
.feature {
  display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center;
  padding: 72px 0;
}
.feature.reverse { direction: rtl; }
.feature.reverse > * { direction: ltr; }

.feature-visual {
  position: relative; height: 320px; border-radius: 4px; overflow: hidden;
  background: var(--panel-bg); border: 1px solid var(--panel-border);
}
.feature-visual img {
  width: 100%; height: 100%; object-fit: cover; border-radius: inherit;
}
.feature-content {}
.feature-number {
  font-size: 3rem; font-weight: 200; letter-spacing: -0.04em;
  color: rgba(176,184,196,0.08); line-height: 1; margin-bottom: 12px;
  font-variant-numeric: tabular-nums;
}

/* ══════════════════════════════════
   PRICING
   ══════════════════════════════════ */
.pricing-toggle {
  display: flex; justify-content: center; align-items: center; gap: 16px;
  margin: 40px 0 56px;
}
.pricing-toggle-label {
  font-size: 11px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--slate-warm); transition: color 0.6s var(--silk-ease);
}
.pricing-toggle-label.active { color: var(--ivory); }
.toggle-switch {
  width: 48px; height: 26px; border-radius: 4px; background: var(--graphite);
  border: 1px solid var(--panel-border); position: relative; cursor: pointer;
  transition: background 0.6s var(--silk-ease);
}
.toggle-switch::after {
  content: ''; position: absolute; top: 3px; left: 3px;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--silver); transition: transform 0.6s var(--silk-ease);
}
.toggle-switch.annual::after { transform: translateX(22px); }
.save-badge {
  font-size: 9px; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--silver); opacity: 0; transition: opacity 0.4s var(--silk-ease);
}
.save-badge.show { opacity: 1; }

.pricing-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
}
.pricing-card {
  background: var(--panel-bg); border: 1px solid var(--panel-border); border-radius: 4px;
  padding: 44px 36px; backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  position: relative; overflow: hidden; display: flex; flex-direction: column;
  transition: transform 0.8s var(--silk-ease), box-shadow 0.8s var(--silk-ease);
}
.pricing-card::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  background: linear-gradient(160deg, rgba(210,215,220,0.02) 0%, transparent 40%);
  pointer-events: none; transition: opacity 0.8s var(--silk-ease); opacity: 0;
}
.pricing-card.featured {
  border-color: rgba(176,184,196,0.15);
  box-shadow: 0 0 60px rgba(176,184,196,0.04);
  padding-top: 60px;
}
.pricing-card.featured::before { opacity: 1; }
.pricing-card.featured .pricing-badge { display: inline-block; }

.pricing-badge {
  display: none; position: absolute; top: 12px; right: 20px;
  font-size: 8px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase;
  padding: 5px 14px; border-radius: 4px;
  background: rgba(176,184,196,0.1); border: 1px solid rgba(176,184,196,0.12);
  color: var(--silver);
}

.pricing-tier {
  font-size: 10px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--slate-warm); margin-bottom: 24px;
}

.pricing-prices { margin-bottom: 24px; }

.price-option {
  display: flex; align-items: baseline; justify-content: space-between;
  padding: 14px 0; border-bottom: 1px solid rgba(156,163,175,0.05);
  transition: opacity 0.6s var(--silk-ease);
  opacity: 0.35;
}
.price-option.active { opacity: 1; }

.price-option-left { display: flex; align-items: baseline; gap: 3px; }
.price-currency {
  font-size: 0.9rem; font-weight: 300; color: var(--slate-warm);
  transition: color 0.6s var(--silk-ease);
}
.price-amount {
  font-size: 2rem; font-weight: 300; letter-spacing: -0.04em; color: var(--slate-light);
  font-variant-numeric: tabular-nums;
  transition: font-size 0.6s var(--silk-ease), color 0.6s var(--silk-ease);
}
.price-period {
  font-size: 0.75rem; font-weight: 300; color: var(--slate-warm); margin-left: 2px;
  transition: color 0.6s var(--silk-ease);
}
.price-yearly {
  font-size: 0.72rem; font-weight: 400; color: var(--slate-warm);
  font-variant-numeric: tabular-nums;
  transition: color 0.6s var(--silk-ease);
}

/* Active state — emphasized */
.price-option.active .price-currency { color: var(--slate-light); }
.price-option.active .price-amount { font-size: 2.6rem; color: var(--ivory); }
.price-option.active .price-period { color: var(--slate-light); }
.price-option.active .price-yearly { color: var(--slate-light); }

.price-label {
  font-size: 8px; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--slate-warm); margin-bottom: 2px;
  transition: color 0.6s var(--silk-ease);
}
.price-option.active .price-label { color: var(--silver); }

.pricing-desc {
  font-size: 0.85rem; font-weight: 300; line-height: 1.6; color: var(--slate-light);
  margin-bottom: 28px; flex: 1;
}
.pricing-features { list-style: none; margin-bottom: 32px; }
.pricing-features li {
  font-size: 0.82rem; font-weight: 400; color: var(--slate-light);
  padding: 8px 0; border-bottom: 1px solid rgba(156,163,175,0.05);
  display: flex; align-items: center; gap: 10px;
}
.pricing-features li::before {
  content: ''; width: 4px; height: 4px; border-radius: 50%;
  background: var(--silver); opacity: 0.5; flex-shrink: 0;
}
.pricing-card .btn-primary, .pricing-card .btn-secondary { width: 100%; text-align: center; padding: 14px; }

/* ══════════════════════════════════
   TESTIMONIALS
   ══════════════════════════════════ */
.testimonials-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
  margin-top: 56px;
}
.testimonial-card {
  background: var(--panel-bg); border: 1px solid var(--panel-border);
  border-radius: 4px; padding: 36px; backdrop-filter: blur(20px);
  transition: transform 0.8s var(--silk-ease);
}
.testimonial-quote {
  font-size: 0.9rem; font-weight: 300; line-height: 1.75; color: var(--slate-light);
  margin-bottom: 24px; font-style: italic;
}
.testimonial-author { display: flex; align-items: center; gap: 12px; }
.testimonial-avatar {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--graphite); border: 1px solid var(--panel-border);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 600; color: var(--slate-warm);
}
.testimonial-name { font-size: 0.8rem; font-weight: 500; color: var(--ivory); }
.testimonial-role { font-size: 0.72rem; font-weight: 300; color: var(--slate-warm); margin-top: 2px; }
.testimonial-card:nth-child(2) { transform: translateY(24px); }

/* ══════════════════════════════════
   INTEGRATIONS
   ══════════════════════════════════ */
.integrations-grid {
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; margin-top: 56px;
}
.integration-item {
  background: var(--panel-bg); border: 1px solid var(--panel-border);
  border-radius: 4px; padding: 28px 16px; text-align: center;
  backdrop-filter: blur(16px);
  transition: transform 0.8s var(--silk-ease), border-color 0.8s var(--silk-ease);
}
.integration-icon {
  width: 40px; height: 40px; margin: 0 auto 12px;
  border-radius: 4px; background: var(--graphite); border: 1px solid var(--panel-border);
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; color: var(--slate-light);
}
.integration-name {
  font-size: 0.72rem; font-weight: 500; letter-spacing: 0.05em;
  color: var(--slate-light); text-transform: uppercase;
}

/* ══════════════════════════════════
   FAQ
   ══════════════════════════════════ */
.faq-list { max-width: 720px; margin: 48px auto 0; }
.faq-controls {
  display: flex; justify-content: flex-end; margin-bottom: 8px;
}
.faq-toggle-all {
  background: none; border: 1px solid var(--panel-border); border-radius: 4px;
  padding: 8px 20px; font-family: inherit;
  font-size: 9px; font-weight: 500; letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--slate-warm); cursor: pointer;
  transition: color 0.6s var(--silk-ease), border-color 0.6s var(--silk-ease);
}
.faq-toggle-all:hover { color: var(--ivory); border-color: rgba(156,163,175,0.2); }
.faq-item {
  border-bottom: 1px solid var(--panel-border); overflow: hidden;
}
.faq-question {
  width: 100%; background: none; border: none; padding: 24px 0;
  display: flex; justify-content: space-between; align-items: center;
  cursor: pointer; font-family: inherit;
  font-size: 0.95rem; font-weight: 400; color: var(--ivory);
  text-align: left;
  transition: color 0.6s var(--silk-ease);
}
.faq-question:hover { color: var(--silver); }
.faq-icon {
  width: 20px; height: 20px; position: relative; flex-shrink: 0; margin-left: 20px;
}
.faq-icon::before, .faq-icon::after {
  content: ''; position: absolute; background: var(--slate-warm);
  transition: transform 0.6s var(--silk-ease), opacity 0.4s ease;
}
.faq-icon::before { width: 12px; height: 1px; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.faq-icon::after { width: 1px; height: 12px; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.faq-item.open .faq-icon::after { transform: translate(-50%, -50%) rotate(90deg); opacity: 0; }

.faq-answer {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 1s var(--silk-ease);
}
.faq-answer-inner {
  overflow: hidden;
  padding: 0;
  font-size: 0.88rem; font-weight: 300; line-height: 1.8; color: var(--slate-light);
  transition: padding 0.8s var(--silk-ease);
}
.faq-item.open .faq-answer { grid-template-rows: 1fr; }
.faq-item.open .faq-answer-inner { padding: 0 0 24px; }

/* ══════════════════════════════════
   FOOTER CTA
   ══════════════════════════════════ */
.footer-cta { padding: 120px 0 80px; text-align: center; }
.footer-ctas { display: flex; justify-content: center; gap: 14px; margin-top: 40px; }
.footer-bar {
  display: flex; justify-content: space-between; align-items: center;
  padding-top: 40px; border-top: 1px solid rgba(156,163,175,0.06);
}
.footer-brand { font-size: 11px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--slate-light); opacity: 0.5; }
.footer-links { display: flex; gap: 28px; flex-wrap: wrap; }
.footer-links a {
  font-size: 10px; font-weight: 400; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--slate-light); opacity: 0.5; text-decoration: none;
  transition: opacity 0.6s var(--silk-ease);
}
.footer-links a:hover { opacity: 0.8; }
.footer-credit {
  font-size: 10px; font-weight: 400; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--slate-light); opacity: 0.5;
}
.footer-credit a {
  color: var(--slate-light); text-decoration: none; text-transform: none; letter-spacing: 0.05em;
  transition: opacity 0.6s var(--silk-ease);
}
.footer-credit a:hover { opacity: 0.8; }

/* ══════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════ */
@media (max-width: 1024px) {
  .main { padding: 0 32px; }
  .nav-links { display: none; }
  .nav-cta { display: none; }
  .nav-toggle { display: block; }
  .side-panel { display: none; }
  .feature { grid-template-columns: 1fr; gap: 40px; }
  .feature.reverse { direction: ltr; }
  .feature-visual { height: 260px; }
  .pricing-grid { grid-template-columns: 1fr; max-width: 440px; margin: 0 auto; }
  .testimonials-grid { grid-template-columns: 1fr; max-width: 520px; margin: 48px auto 0; }
  .testimonial-card:nth-child(2) { transform: none; }
  .integrations-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 768px) {
  .main { padding: 0 20px; }
  .top-nav { padding: 18px 20px; }
  .top-nav.scrolled { padding: 14px 20px; }
  .hero { min-height: 100svh; padding: 100px 0 60px; }
  .hero-metrics { flex-direction: column; gap: 28px; }
  .hero-ctas { flex-direction: column; align-items: center; }
  .btn-primary, .btn-secondary { width: 100%; max-width: 280px; text-align: center; }
  .section { padding: 80px 0; }
  .feature-visual { height: 240px; border-radius: 4px; }
  .pricing-card { padding: 32px 24px; border-radius: 4px; }
  .pricing-card.featured { padding-top: 52px; }
  .integrations-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-bar { flex-direction: column; gap: 20px; text-align: center; }
  .footer-links { flex-wrap: wrap; justify-content: center; }
  .footer-ctas { flex-direction: column; align-items: center; }
  .mobile-menu-inner { padding: 90px 20px 40px; }
}

@media (max-width: 420px) {
  .hero h1 { font-size: 2.4rem; }
  .section-title { font-size: 1.7rem; }
  .integrations-grid { grid-template-columns: repeat(2, 1fr); }
  .mobile-menu-link { font-size: 1.4rem; }
}

@media (max-height: 540px) and (orientation: landscape) {
  .hero { min-height: auto; padding: 80px 0 40px; }
  .hero-metrics { flex-direction: row; gap: 36px; margin-top: 40px; }
  .section { padding: 60px 0; }
  .mobile-menu-inner { padding: 64px 32px 24px; justify-content: flex-start; }
  .mobile-menu-link { font-size: 1.2rem; padding: 8px 0; }
}

@media (hover: hover) and (pointer: fine) {
  .pricing-card:hover { transform: scale(1.01); box-shadow: 0 12px 60px rgba(0,0,0,0.15); }
  .pricing-card:hover::before { opacity: 1; }
  .testimonial-card:hover { transform: scale(1.01); }
  .testimonial-card:nth-child(2):hover { transform: translateY(24px) scale(1.01); }
  .integration-item:hover { transform: scale(1.04); border-color: rgba(156,163,175,0.15); }
}
@media (hover: none) {
  .pricing-card:hover, .testimonial-card:hover, .integration-item:hover { transform: none; }
}

/* Focus */
.btn-primary:focus-visible, .btn-secondary:focus-visible,
.nav-links a:focus-visible, .nav-toggle:focus-visible,
.mobile-menu-link:focus-visible, .faq-question:focus-visible,
.toggle-switch:focus-visible, .faq-toggle-all:focus-visible {
  outline: 2px solid var(--silver); outline-offset: 3px;
}

/* ─────────────────────────────────────────────
   LiveSea Agency adaptation
   Keeps Luminary structure and motion while adding
   small brand/data rendering helpers.
───────────────────────────────────────────── */
.auth-error-box {
  position: fixed;
  top: 96px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2500;
  width: min(680px, calc(100% - 32px));
  padding: 16px 22px;
  border: 1px solid rgba(248,113,113,0.28);
  border-radius: 4px;
  background: rgba(28, 13, 17, 0.92);
  color: #fecaca;
  font-size: 13px;
  letter-spacing: 0.02em;
  backdrop-filter: blur(24px);
  box-shadow: 0 24px 80px rgba(0,0,0,0.34);
}

.nav-brand { white-space: nowrap; }
.nav-brand .brand-mark {
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 36px;
  margin-right: 0;
  border-radius: 50%;
  border: 0;
  background: transparent;
  overflow: hidden;
  vertical-align: middle;
}
.nav-brand .brand-mark img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-badge-logo {
  height: 14px;
  width: auto;
  opacity: 0.74;
  margin-left: 2px;
}
.hero-sub strong { color: var(--ivory); font-weight: 500; }
.hero-ctas { flex-wrap: wrap; }
.metric-label { min-height: 2.7em; }

.feature-visual::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 4px;
  background: radial-gradient(circle at 30% 20%, rgba(255,255,255,0.13), transparent 38%), linear-gradient(180deg, transparent, rgba(5,8,12,0.18));
  pointer-events: none;
}

.price-option-left .price-word {
  color: var(--ivory);
  font-size: clamp(1.65rem, 3vw, 2.35rem);
  font-weight: 300;
  letter-spacing: -0.04em;
  line-height: 1;
}
.price-option-left .price-word-small {
  color: var(--slate-light);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.live-team-card .testimonial-author { align-items: flex-start; }
.live-team-card .testimonial-quote { min-height: 128px; }
.live-team-card .team-meta-line {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}
.live-pill {
  display: inline-flex;
  align-items: center;
  border-radius: 4px;
  border: 1px solid var(--panel-border);
  background: rgba(156,163,175,0.04);
  padding: 7px 10px;
  color: var(--slate-light);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.testimonial-avatar.has-image {
  overflow: hidden;
  padding: 0;
  background: rgba(156,163,175,0.05);
}
.testimonial-avatar.has-image img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}
.testimonial-avatar.large {
  width: 54px;
  height: 54px;
}
.testimonial-stars {
  display: inline-flex;
  gap: 3px;
  margin-bottom: 18px;
  color: var(--silver);
  opacity: 0.8;
  font-size: 12px;
  letter-spacing: 0.06em;
}

.integrations-grid.partners-grid { margin-top: 56px; }
.integration-icon img {
  max-width: 34px;
  max-height: 34px;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: grayscale(1) brightness(1.18);
  opacity: 0.76;
}
.integration-item:hover .integration-icon img { opacity: 1; filter: grayscale(0) brightness(1.12); }

.footer-brand .footer-logo-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 4px;
  margin-right: 8px;
  background: var(--silver);
  box-shadow: 0 0 18px rgba(176,184,196,0.45);
}

.empty-card {
  max-width: 640px;
  margin: 40px auto 0;
}
.empty-card .testimonial-quote { min-height: auto; }

@media (max-width: 768px) {
  .nav-brand .brand-mark { width: 32px; height: 32px; margin-right: 0; }
  .hero-ctas .btn-primary,
  .hero-ctas .btn-secondary,
  .footer-ctas .btn-primary,
  .footer-ctas .btn-secondary { width: 100%; text-align: center; }
  .testimonial-avatar.large { width: 48px; height: 48px; }
}


/* ─────────────────────────────────────────────
   LiveSea compact Luminary optimisation
   Keeps the current Luminary theme, reduces mobile height,
   and turns team/reviews into smooth horizontal carousels.
───────────────────────────────────────────── */
.nav-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  line-height: 1;
}
.nav-brand .brand-mark { margin-right: 0; flex: 0 0 auto; }
.nav-brand .brand-copy {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.nav-brand .brand-line {
  display: block;
  white-space: nowrap;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ivory);
}
.nav-brand .brand-line span {
  font-weight: 300;
  color: var(--slate-warm);
  margin-left: 4px;
}
.nav-brand .brand-subline {
  display: none;
  margin-top: 5px;
  font-size: 8px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--slate-warm);
  opacity: 0.82;
}

.hero-live-proof {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 16px auto 0;
  padding: 8px 16px;
  border: 1px solid var(--panel-border);
  border-radius: 4px;
  background: rgba(22, 26, 32, 0.36);
  backdrop-filter: blur(18px);
  opacity: 0;
  transform: translateY(16px);
  animation: fadeUp 1.4s var(--silk-ease) 0.5s forwards;
}
.hero-live-proof span {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.24em;
  color: var(--slate-light);
  text-transform: uppercase;
}
.hero-live-proof img {
  display: block;
  height: 18px;
  width: auto;
  object-fit: contain;
  opacity: 0.88;
  filter: saturate(1.05) brightness(1.06);
}

.hero-metrics {
  position: relative;
  padding: 20px 28px;
  border: 1px solid var(--panel-border);
  border-radius: 4px;
  background: rgba(22, 26, 32, 0.38);
  backdrop-filter: blur(18px);
}
.hero-metrics::before {
  content: '';
  position: absolute;
  inset: 1px;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(135deg, rgba(255,255,255,0.055), transparent 42%, rgba(176,184,196,0.035));
}
.metric { position: relative; min-width: 0; }
.metric + .metric::before {
  content: '';
  position: absolute;
  left: -28px;
  top: 8px;
  width: 1px;
  height: calc(100% - 16px);
  background: var(--panel-border);
}
.metric-value { white-space: nowrap; }
.metric-label { min-height: 0; }

.luminary-carousel {
  position: relative;
  margin-top: 44px;
  padding: 0 54px;
}
.carousel-viewport {
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  cursor: grab;
}
.carousel-viewport::-webkit-scrollbar { display: none; }
.carousel-viewport.is-dragging {
  cursor: grabbing;
  scroll-behavior: auto;
}
.carousel-track {
  display: flex;
  gap: 20px;
  align-items: stretch;
  width: max-content;
}
.carousel-track .testimonial-card {
  flex: 0 0 min(360px, calc(100vw - 128px));
  scroll-snap-align: start;
  min-height: 100%;
}
.team-carousel .testimonial-card {
  flex-basis: min(360px, calc(100vw - 128px));
}
.reviews-carousel .testimonial-card {
  flex-basis: min(340px, calc(100vw - 128px));
}
.carousel-control {
  position: absolute;
  top: 50%;
  z-index: 3;
  width: 42px;
  height: 42px;
  transform: translateY(-50%);
  border-radius: 4px;
  border: 1px solid var(--panel-border);
  background: rgba(22, 26, 32, 0.72);
  color: var(--ivory-muted);
  font-family: inherit;
  font-size: 30px;
  line-height: 1;
  cursor: pointer;
  backdrop-filter: blur(20px);
  transition: transform 0.8s var(--silk-ease), background 0.8s var(--silk-ease), opacity 0.8s var(--silk-ease);
}
.carousel-control:hover { transform: translateY(-50%) scale(1.06); background: rgba(28, 33, 40, 0.88); }
.carousel-prev { left: 0; }
.carousel-next { right: 0; }
.carousel-dots {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  min-height: 8px;
  margin-top: 26px;
}
.carousel-dot {
  width: 6px;
  height: 6px;
  border: 0;
  border-radius: 4px;
  background: var(--slate-warm);
  opacity: 0.22;
  cursor: pointer;
  transition: width 0.6s var(--silk-ease), opacity 0.6s var(--silk-ease), background 0.6s var(--silk-ease);
}
.carousel-dot.active {
  width: 20px;
  opacity: 0.8;
  background: var(--silver);
}
.luminary-carousel .testimonial-card:nth-child(2) { transform: none; }
.luminary-carousel .testimonial-card:hover { transform: scale(1.01); }

@media (min-width: 1025px) {
  .luminary-carousel.team-carousel .carousel-track .testimonial-card { flex-basis: 336px; }
  .luminary-carousel.reviews-carousel .carousel-track .testimonial-card { flex-basis: 320px; }
}

@media (max-width: 1024px) {
  .testimonials-grid { display: grid; }
  .luminary-carousel { max-width: none; margin-left: calc(-1 * min(32px, 4vw)); margin-right: calc(-1 * min(32px, 4vw)); }
}

@media (max-width: 768px) {
  .top-nav {
    align-items: flex-start;
    padding: 16px 20px 12px;
  }
  .top-nav.scrolled { padding: 12px 20px; }
  .nav-brand .brand-line {
    font-size: 11px;
    letter-spacing: 0.18em;
  }
  .nav-brand .brand-subline { display: block; }
  .nav-brand .brand-mark { width: 32px; height: 32px; }
  .hero {
    min-height: auto;
    padding: 118px 0 42px;
  }
  .hero h1 {
    margin-top: 0;
    font-size: clamp(3rem, 14vw, 4.7rem);
  }
  .hero-live-proof {
    margin-top: 12px;
    padding: 7px 14px;
  }
  .hero-live-proof img { height: 16px; }
  .hero-sub {
    margin: 22px auto 30px;
    line-height: 1.62;
    max-width: 92%;
  }
  .hero-ctas {
    gap: 12px;
    margin-bottom: 0;
  }
  .hero-metrics {
    flex-direction: row;
    gap: 0;
    justify-content: space-between;
    width: 100%;
    margin-top: 38px;
    padding: 18px 10px;
    border-radius: 4px;
  }
  .metric { flex: 1 1 0; padding: 0 6px; }
  .metric + .metric::before {
    left: 0;
    top: 6px;
    height: calc(100% - 12px);
  }
  .metric-value { font-size: clamp(1.35rem, 7vw, 2rem); }
  .metric-value span { font-size: 0.48em; }
  .metric-label {
    font-size: 7.4px;
    letter-spacing: 0.15em;
    line-height: 1.45;
    margin-top: 8px;
  }
  .logo-ticker { padding: 34px 0; }
  .section { padding: 66px 0; }
  .section-tag { margin-bottom: 14px; }
  .section-title { margin-bottom: 14px; }
  .luminary-carousel {
    margin-top: 34px;
    padding: 0 18px 0 20px;
    margin-left: -20px;
    margin-right: -20px;
  }
  .carousel-track { gap: 14px; }
  .carousel-track .testimonial-card,
  .team-carousel .testimonial-card,
  .reviews-carousel .testimonial-card {
    flex-basis: min(84vw, 326px);
    padding: 26px 22px;
    border-radius: 4px;
  }
  .carousel-control {
    width: 38px;
    height: 38px;
    font-size: 28px;
  }
  .carousel-prev { left: 8px; }
  .carousel-next { right: 8px; }
  .carousel-dots { margin-top: 18px; }
  .live-team-card .testimonial-quote {
    min-height: 104px;
  }
}

@media (max-width: 420px) {
  .nav-brand { gap: 8px; }
  .nav-brand .brand-line {
    font-size: 10px;
    letter-spacing: 0.15em;
  }
  .nav-brand .brand-subline {
    font-size: 7.4px;
    letter-spacing: 0.18em;
  }
  .hero { padding-top: 112px; }
  .hero h1 { font-size: 2.75rem; }
  .hero-sub { font-size: 0.82rem; }
  .btn-primary, .btn-secondary {
    max-width: 100%;
    padding: 15px 24px;
  }
  .hero-metrics {
    padding: 16px 6px;
  }
  .metric-value { font-size: 1.45rem; }
  .metric-label {
    font-size: 6.8px;
    letter-spacing: 0.12em;
  }
  .carousel-track .testimonial-card,
  .team-carousel .testimonial-card,
  .reviews-carousel .testimonial-card {
    flex-basis: 82vw;
  }
}


/* ─────────────────────────────────────────────
   LiveSea performance pass 2026-05
   Cache-busted from PHP filemtime. Keeps Luminary base,
   removes heavy motion for team/reviews, and tightens mobile.
───────────────────────────────────────────── */
.nav-brand .brand-copy { display: block; min-width: 0; }
.nav-brand .brand-line { display: block; white-space: nowrap; }
.nav-brand .brand-subline { display: none !important; }

.hero h1 {
  white-space: nowrap;
  font-size: clamp(2.55rem, 7.5vw, 5.7rem);
  letter-spacing: -0.06em;
}
.hero h1 em { margin-left: 0.08em; }
.hero-live-proof {
  margin-top: 18px;
  padding: 9px 18px;
  gap: 14px;
}
.hero-live-proof span {
  display: inline-block;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--slate-light);
  opacity: 0.88;
}
.hero-live-proof img { height: 18px; }

/* Stats: desktop keeps the Luminary row, mobile returns to a clean stacked proof list. */
.hero-metrics { align-items: stretch; }
.metric { display: grid; align-content: center; }

/* Team + reviews: static rendering, no reveal/entry motion, no animated hover jumps. */
.no-motion-section .section-tag,
.no-motion-section .section-title,
.no-motion-section .section-body,
.no-motion-section .testimonial-card,
.static-carousel {
  opacity: 1 !important;
  transform: none !important;
  animation: none !important;
  transition: border-color 0.35s ease, background 0.35s ease, box-shadow 0.35s ease !important;
}
.static-carousel .carousel-viewport { scroll-behavior: smooth; }
.static-carousel .testimonial-card:nth-child(2),
.static-carousel .testimonial-card:hover,
.static-carousel .testimonial-card:nth-child(2):hover {
  transform: none !important;
}
.team-member-card,
.review-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.team-member-head { align-items: center; margin-bottom: 20px; }
.team-member-card .testimonial-name,
.review-card .testimonial-name {
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.team-member-card .testimonial-role,
.review-card .testimonial-role {
  margin-top: 4px;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.team-mission {
  margin: 0;
  min-height: 112px;
  font-style: normal;
}
.team-mission span {
  color: var(--ivory-muted);
  font-weight: 600;
  font-style: normal;
}
.review-card-top {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 20px;
}
.review-title {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ivory-muted);
}
.review-quote {
  flex: 1;
  margin-bottom: 24px;
  font-style: normal;
}
.team-meta-line { display: none !important; }

@media (max-width: 768px) {
  .top-nav { align-items: center; padding: 16px 20px; }
  .top-nav.scrolled { padding: 12px 20px; }
  .nav-brand .brand-line { font-size: 11px; letter-spacing: 0.18em; }
  .nav-brand .brand-subline { display: none !important; }
  .hero { padding: 112px 0 44px; }
  .hero h1 {
    white-space: nowrap;
    font-size: clamp(2.35rem, 11vw, 3.8rem);
    line-height: 0.98;
  }
  .hero-live-proof {
    margin-top: 14px;
    padding: 8px 15px;
    gap: 12px;
  }
  .hero-live-proof span { font-size: 8px; letter-spacing: 0.2em; }
  .hero-live-proof img { height: 16px; }
  .hero-sub {
    margin: 22px auto 28px;
    max-width: 94%;
  }
  .hero-metrics {
    flex-direction: column;
    gap: 0;
    width: min(330px, 100%);
    margin: 36px auto 0;
    padding: 4px 22px;
    border-radius: 4px;
  }
  .metric {
    padding: 18px 0;
    display: grid;
    grid-template-columns: 112px 1fr;
    align-items: center;
    text-align: left;
    column-gap: 16px;
  }
  .metric + .metric {
    border-top: 1px solid var(--panel-border);
  }
  .metric + .metric::before { display: none; }
  .metric-value { font-size: clamp(1.65rem, 8vw, 2.25rem); }
  .metric-label {
    margin-top: 0;
    font-size: 7.6px;
    line-height: 1.55;
    letter-spacing: 0.18em;
  }
  .section { padding: 62px 0; }
  .luminary-carousel { margin-top: 30px; }
  .team-mission { min-height: 118px; }
}

@media (max-width: 420px) {
  .nav-brand .brand-line { font-size: 10px; letter-spacing: 0.145em; }
  .hero { padding-top: 108px; }
  .hero h1 { font-size: clamp(2.1rem, 10.5vw, 2.85rem); }
  .hero-live-proof span { font-size: 7.5px; }
  .hero-live-proof img { height: 15px; }
  .hero-metrics {
    width: 100%;
    padding: 2px 18px;
  }
  .metric {
    grid-template-columns: 96px 1fr;
    column-gap: 12px;
    padding: 16px 0;
  }
  .metric-value { font-size: 1.7rem; }
  .metric-label { font-size: 7px; }
}


/* ─────────────────────────────────────────────
   LiveSea polish pass — structured cards, lighter radii,
   stable pagination, up-to-date avatar presentation.
───────────────────────────────────────────── */
:root {
  --ls-radius-card: 4px;
  --ls-radius-panel: 4px;
  --ls-radius-button: 4px;
}

/* Nav logo: perfectly round, same Luminary mark. */
.nav-brand .brand-mark {
  width: 36px;
  height: 36px;
  border-radius: 50% !important;
  overflow: hidden;
  flex: 0 0 36px;
  box-shadow: none;
}
.nav-brand .brand-mark img {
  border-radius: 50% !important;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Less rounded everywhere except avatars/logo. */
.btn-primary,
.btn-secondary,
.nav-cta,
.hero-live-proof,
.faq-toggle-all,
.mobile-menu-footer a,
.live-pill,
.save-badge,
.toggle-switch,
.price-option,
.carousel-control {
  border-radius: var(--ls-radius-button) !important;
}
.hero-metrics,
.feature-visual,
.pricing-card,
.testimonial-card,
.integration-item,
.faq-item,
.empty-card,
.auth-error-box,
.mobile-menu-inner {
  border-radius: var(--ls-radius-card) !important;
}
.integration-icon { border-radius: 4px !important; }
.testimonial-avatar,
.team-avatar,
.review-avatar { border-radius: 50% !important; }

/* Cleaner carousel geometry; avoids clipped cards and wrong-feeling progress. */
.luminary-carousel {
  padding: 0 46px;
  margin-top: 38px;
}
.carousel-viewport {
  border-radius: var(--ls-radius-card);
  scroll-padding-left: 0;
}
.carousel-track {
  gap: 16px;
  padding: 1px 0;
}
.carousel-track .testimonial-card,
.team-carousel .testimonial-card,
.reviews-carousel .testimonial-card {
  flex: 0 0 min(342px, calc(100vw - 128px));
  scroll-snap-align: start;
}
.carousel-control {
  width: 38px;
  height: 38px;
  font-size: 24px;
  display: grid;
  place-items: center;
}
.carousel-dots {
  gap: 7px;
  margin-top: 18px;
}
.carousel-dot {
  width: 7px;
  height: 4px;
  border-radius: 4px;
  opacity: 0.22;
}
.carousel-dot.active {
  width: 24px;
  opacity: 0.85;
}

/* Team: Avatar → Pseudo → Rôle → Mission small. */
.team-member-card {
  min-height: 286px;
  padding: 26px 24px;
  align-items: flex-start;
  justify-content: flex-start;
  text-align: left;
}
.team-avatar.large {
  width: 62px;
  height: 62px;
  margin-bottom: 18px;
  flex: 0 0 auto;
}
.team-pseudo {
  max-width: 100%;
  margin: 0;
  color: var(--ivory);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.02em;
  overflow-wrap: anywhere;
}
.team-role {
  margin: 8px 0 0;
  color: var(--slate-warm);
  font-size: 0.68rem;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}
.team-mission {
  margin: 20px 0 0;
  color: var(--slate-light);
  font-size: 0.82rem;
  font-weight: 300;
  line-height: 1.65;
  font-style: normal;
  min-height: 0;
}
.team-mission span {
  display: block;
  margin-bottom: 5px;
  color: var(--ivory-muted);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* Reviews: Avatar → Pseudo → Étoiles → Titre → Avis small. */
.review-card {
  min-height: 360px;
  padding: 26px 24px;
  align-items: flex-start;
  justify-content: flex-start;
  text-align: left;
}
.review-author-block {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  margin-bottom: 18px;
}
.review-avatar {
  width: 46px;
  height: 46px;
  flex: 0 0 46px;
}
.review-pseudo {
  margin: 0;
  color: var(--ivory);
  font-size: 0.92rem;
  font-weight: 700;
  line-height: 1.25;
  overflow-wrap: anywhere;
}
.review-stars {
  margin: 0 0 16px;
  color: var(--silver);
  font-size: 0.82rem;
  letter-spacing: 0.12em;
  line-height: 1;
}
.review-title {
  margin: 0 0 18px;
  color: var(--ivory-muted);
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.45;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}
.review-quote {
  margin: 0;
  color: var(--slate-light);
  font-size: 0.82rem;
  font-weight: 300;
  line-height: 1.68;
  font-style: normal;
}
.review-quote span {
  display: block;
  margin-bottom: 6px;
  color: var(--ivory-muted);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* Disable residual hover transforms on lightweight sections. */
.no-motion-section .testimonial-card:hover,
.no-motion-section .testimonial-card:nth-child(2):hover,
.no-motion-section .testimonial-card:nth-child(2) {
  transform: none !important;
}

@media (max-width: 768px) {
  .nav-brand .brand-mark {
    width: 32px;
    height: 32px;
    flex-basis: 32px;
  }
  .hero-metrics {
    border-radius: var(--ls-radius-card) !important;
  }
  .luminary-carousel {
    margin-left: 0;
    margin-right: 0;
    padding: 0 42px;
  }
  .carousel-track { gap: 14px; }
  .carousel-track .testimonial-card,
  .team-carousel .testimonial-card,
  .reviews-carousel .testimonial-card {
    flex-basis: min(74vw, 302px);
    padding: 22px 20px;
  }
  .carousel-prev { left: 0; }
  .carousel-next { right: 0; }
  .team-member-card { min-height: 278px; }
  .review-card { min-height: 342px; }
  .team-avatar.large {
    width: 56px;
    height: 56px;
    margin-bottom: 16px;
  }
  .team-pseudo { font-size: 0.94rem; }
  .team-role { font-size: 0.62rem; }
  .team-mission,
  .review-quote { font-size: 0.78rem; line-height: 1.62; }
  .section-center .section-body { max-width: 92%; }
}

@media (max-width: 420px) {
  .luminary-carousel { padding: 0 40px; }
  .carousel-track .testimonial-card,
  .team-carousel .testimonial-card,
  .reviews-carousel .testimonial-card {
    flex-basis: min(72vw, 286px);
  }
  .team-member-card { min-height: 268px; }
  .review-card { min-height: 330px; }
  .team-avatar.large { width: 52px; height: 52px; }
  .team-pseudo { font-size: 0.9rem; }
  .review-pseudo { font-size: 0.86rem; }
  .review-title { font-size: 0.7rem; }
}


/* ─────────────────────────────────────────────
   LiveSea master pass — centered cards + clean progress
   Applies after previous polish rules.
───────────────────────────────────────────── */
.nav-links .nav-auth-link {
  color: var(--ivory-muted);
}
.nav-links .nav-auth-link::after {
  opacity: 0.4;
}

/* Center every card header. */
.team-member-card {
  align-items: center !important;
  text-align: center !important;
  justify-content: flex-start !important;
  padding: 30px 26px 28px !important;
}
.team-avatar.large {
  margin: 0 auto 18px !important;
}
.team-pseudo,
.team-role {
  width: 100%;
  text-align: center;
}
.team-role {
  margin-top: 9px !important;
}
.team-mission {
  width: 100%;
  margin-top: 22px !important;
  padding-top: 18px;
  border-top: 1px solid rgba(156, 163, 175, 0.07);
  text-align: center;
}
.team-mission span {
  text-align: center;
}

.review-card {
  align-items: center !important;
  text-align: center !important;
  justify-content: flex-start !important;
  padding: 30px 26px 28px !important;
}
.review-author-block {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px !important;
  margin-bottom: 16px !important;
}
.review-pseudo,
.review-stars,
.review-title,
.review-quote,
.review-quote span {
  width: 100%;
  text-align: center;
}
.review-stars {
  justify-content: center;
  display: flex !important;
  margin-bottom: 16px !important;
}
.review-title {
  margin-bottom: 16px !important;
}
.review-quote {
  padding-top: 18px;
  border-top: 1px solid rgba(156, 163, 175, 0.07);
}

/* Replace dozens of dots with one compact, reliable progress control. */
.carousel-dots {
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: min(220px, 68%);
  margin: 20px auto 0 !important;
  min-height: 18px;
}
.carousel-progress {
  position: relative;
  flex: 1 1 auto;
  height: 4px;
  border-radius: 4px;
  overflow: hidden;
  background: rgba(156, 163, 175, 0.12);
}
.carousel-progress span {
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--progress, 0%);
  border-radius: inherit;
  background: linear-gradient(90deg, rgba(229,231,235,0.92), rgba(176,184,196,0.72));
  transition: width 0.28s var(--silk-ease);
}
.carousel-count {
  min-width: 38px;
  color: var(--slate-warm);
  font-size: 8px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-align: right;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
}
.carousel-dot { display: none !important; }

/* Better centering and less clipping on mobile. */
.carousel-track .testimonial-card,
.team-carousel .testimonial-card,
.reviews-carousel .testimonial-card {
  scroll-snap-align: center !important;
}
.carousel-control:disabled {
  opacity: 0.28 !important;
  pointer-events: none;
}

@media (max-width: 768px) {
  .luminary-carousel {
    padding: 0 38px !important;
  }
  .carousel-track .testimonial-card,
  .team-carousel .testimonial-card,
  .reviews-carousel .testimonial-card {
    flex-basis: min(76vw, 310px) !important;
  }
  .team-member-card,
  .review-card {
    padding: 26px 22px !important;
  }
  .carousel-dots {
    width: min(190px, 62%);
    margin-top: 18px !important;
  }
}

@media (max-width: 420px) {
  .luminary-carousel {
    padding: 0 36px !important;
  }
  .carousel-track .testimonial-card,
  .team-carousel .testimonial-card,
  .reviews-carousel .testimonial-card {
    flex-basis: min(75vw, 292px) !important;
  }
  .carousel-count { font-size: 7px; min-width: 34px; }
}


/* ─────────────────────────────────────────────
   LiveSea final master fix — compact radii, bottom controls,
   reliable progress, centered cards, no broken default avatars.
───────────────────────────────────────────── */
:root {
  --ls-radius-card: 4px;
  --ls-radius-panel: 4px;
  --ls-radius-button: 4px;
}

/* Global radius tightening: much cleaner, sharper premium UI. */
.btn-primary,
.btn-secondary,
.nav-cta,
.hero-live-proof,
.faq-toggle-all,
.mobile-menu-footer a,
.live-pill,
.save-badge,
.toggle-switch,
.price-option,
.carousel-control {
  border-radius: var(--ls-radius-button) !important;
}
.hero-metrics,
.feature-visual,
.pricing-card,
.testimonial-card,
.integration-item,
.faq-item,
.empty-card,
.auth-error-box,
.mobile-menu-inner,
.carousel-viewport {
  border-radius: var(--ls-radius-card) !important;
}
.integration-icon { border-radius: var(--ls-radius-button) !important; }
.testimonial-avatar,
.team-avatar,
.review-avatar,
.nav-brand .brand-mark,
.nav-brand .brand-mark img {
  border-radius: 50% !important;
}

/* Carousels: no side arrows anymore. Controls live cleanly under the card. */
.luminary-carousel {
  padding: 0 !important;
  margin-top: 34px !important;
}
.carousel-viewport {
  width: min(100%, 620px);
  margin: 0 auto;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: 0;
}
.carousel-track {
  gap: 16px !important;
  padding: 0 !important;
  align-items: stretch;
}
.carousel-track .testimonial-card,
.team-carousel .testimonial-card,
.reviews-carousel .testimonial-card {
  flex: 0 0 min(100%, 392px) !important;
  scroll-snap-align: center !important;
  scroll-snap-stop: always;
}
.carousel-footer {
  width: min(100%, 360px);
  margin: 16px auto 0;
  display: grid;
  grid-template-columns: 36px minmax(126px, 1fr) 36px;
  align-items: center;
  gap: 12px;
}
.carousel-control {
  position: static !important;
  inset: auto !important;
  transform: none !important;
  width: 36px !important;
  height: 36px !important;
  display: grid !important;
  place-items: center;
  padding: 0 !important;
  font-size: 22px !important;
  line-height: 1 !important;
  background: rgba(22, 26, 32, 0.68) !important;
}
.carousel-control:hover {
  transform: none !important;
  background: rgba(28, 33, 40, 0.9) !important;
}
.carousel-control:disabled {
  opacity: 0.26 !important;
  pointer-events: none;
}
.carousel-dots {
  display: grid !important;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 12px;
  width: 100% !important;
  min-height: 18px;
  margin: 0 !important;
}
.carousel-progress {
  position: relative;
  width: 100%;
  height: 4px;
  border-radius: 4px;
  overflow: hidden;
  background: rgba(156, 163, 175, 0.12);
}
.carousel-progress span {
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--progress, 0%);
  min-width: 8px;
  max-width: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, rgba(229,231,235,0.92), rgba(176,184,196,0.72));
  transition: width 0.22s var(--silk-ease);
}
.carousel-count {
  min-width: 38px;
  color: var(--slate-warm);
  font-size: 8px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-align: right;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
}
.carousel-dot { display: none !important; }

/* Team cards: Avatar / Discord pseudo / role / mission. Centered and compact. */
.team-member-card {
  min-height: 0 !important;
  padding: 28px 24px 26px !important;
  align-items: center !important;
  justify-content: flex-start !important;
  text-align: center !important;
}
.team-avatar.large {
  width: 64px !important;
  height: 64px !important;
  margin: 0 auto 18px !important;
  border: 1px solid rgba(176,184,196,0.18);
  background: rgba(156,163,175,0.07);
}
.team-pseudo {
  width: 100%;
  margin: 0 !important;
  text-align: center !important;
  font-size: 1rem !important;
  line-height: 1.25;
  letter-spacing: -0.02em;
}
.team-role {
  width: 100%;
  margin: 9px 0 0 !important;
  text-align: center !important;
  color: var(--slate-warm);
  font-size: 0.66rem !important;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: 0.17em;
  text-transform: uppercase;
}
.team-mission {
  width: 100%;
  min-height: 0 !important;
  margin: 22px 0 0 !important;
  padding-top: 18px;
  border-top: 1px solid rgba(156,163,175,0.07);
  text-align: center !important;
  color: var(--slate-light);
  font-size: 0.8rem !important;
  font-weight: 300;
  line-height: 1.58 !important;
}
.team-mission span {
  display: block;
  margin-bottom: 7px;
  text-align: center !important;
  color: var(--ivory-muted);
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

/* Reviews: no "L'avis" label, just the review text in a clean block. */
.review-card {
  min-height: 0 !important;
  padding: 28px 24px 28px !important;
  align-items: center !important;
  justify-content: flex-start !important;
  text-align: center !important;
}
.review-author-block {
  width: 100%;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center;
  gap: 12px !important;
  margin: 0 0 16px !important;
}
.review-avatar {
  width: 58px !important;
  height: 58px !important;
  flex: 0 0 58px !important;
  border: 1px solid rgba(176,184,196,0.18);
  background: rgba(156,163,175,0.07);
}
.review-pseudo {
  width: 100%;
  margin: 0 !important;
  color: var(--ivory);
  font-size: 0.96rem !important;
  font-weight: 700;
  line-height: 1.25;
  text-align: center !important;
  overflow-wrap: anywhere;
}
.review-stars {
  width: 100%;
  display: flex !important;
  justify-content: center;
  margin: 0 0 16px !important;
  color: var(--silver);
  font-size: 0.84rem !important;
  letter-spacing: 0.12em;
}
.review-title {
  width: 100%;
  margin: 0 0 18px !important;
  color: var(--ivory-muted);
  font-size: 0.76rem !important;
  font-weight: 700;
  line-height: 1.42;
  letter-spacing: 0.15em;
  text-align: center !important;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}
.review-quote {
  width: 100%;
  margin: 0 !important;
  padding-top: 18px;
  border-top: 1px solid rgba(156,163,175,0.07);
  color: var(--slate-light);
  font-size: 0.82rem !important;
  font-weight: 300;
  line-height: 1.62 !important;
  text-align: center !important;
  font-style: normal;
}
.review-quote span { display: none !important; }

.testimonial-avatar.has-image img,
.team-avatar.has-image img,
.review-avatar.has-image img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

@media (min-width: 769px) {
  .carousel-track .testimonial-card,
  .team-carousel .testimonial-card,
  .reviews-carousel .testimonial-card {
    flex-basis: min(100%, 388px) !important;
  }
}

@media (max-width: 768px) {
  .section { padding: 58px 0; }
  .luminary-carousel {
    margin-top: 30px !important;
  }
  .carousel-viewport {
    width: 100%;
  }
  .carousel-track {
    gap: 14px !important;
  }
  .carousel-track .testimonial-card,
  .team-carousel .testimonial-card,
  .reviews-carousel .testimonial-card {
    flex-basis: min(78vw, 330px) !important;
  }
  .carousel-footer {
    width: min(82vw, 310px);
    grid-template-columns: 34px minmax(120px, 1fr) 34px;
    gap: 10px;
    margin-top: 14px;
  }
  .carousel-control {
    width: 34px !important;
    height: 34px !important;
    font-size: 21px !important;
  }
  .team-member-card,
  .review-card {
    padding: 26px 22px !important;
  }
  .team-avatar.large {
    width: 60px !important;
    height: 60px !important;
  }
  .review-avatar {
    width: 54px !important;
    height: 54px !important;
    flex-basis: 54px !important;
  }
}

@media (max-width: 420px) {
  .carousel-track .testimonial-card,
  .team-carousel .testimonial-card,
  .reviews-carousel .testimonial-card {
    flex-basis: min(80vw, 312px) !important;
  }
  .carousel-footer {
    width: min(84vw, 292px);
  }
  .team-pseudo { font-size: 0.92rem !important; }
  .team-mission,
  .review-quote { font-size: 0.78rem !important; }
  .review-title { font-size: 0.7rem !important; }
}

/* Keep card hover cheap and predictable on mobile. */
.no-motion-section .testimonial-card,
.no-motion-section .testimonial-card:hover,
.no-motion-section .testimonial-card:nth-child(2),
.no-motion-section .testimonial-card:nth-child(2):hover {
  transform: none !important;
}

/* LiveSea menu/account polish: remove join CTA from nav and keep role links readable. */
.mobile-menu-link.secondary {
  font-size: clamp(1.1rem, 4vw, 1.55rem) !important;
  color: var(--ivory-muted);
}
.mobile-menu-link.secondary::before {
  opacity: 0.28;
}
.nav-auth-link {
  white-space: nowrap;
}


/* Home mobile menu final sizing: premium, smaller, less poster-like */
.mobile-menu-inner {
  justify-content: center !important;
  padding: 104px clamp(28px, 6vw, 48px) 52px !important;
}
.mobile-menu-links {
  flex: 0 0 auto !important;
  justify-content: center !important;
}
.mobile-menu-links-private {
  justify-content: flex-start !important;
}
.mobile-menu-link {
  padding: 14px 0 !important;
  font-size: clamp(1.18rem, 5.4vw, 1.72rem) !important;
  line-height: 1.1 !important;
  font-weight: 300 !important;
  letter-spacing: -0.025em !important;
}
.mobile-menu-link::before {
  min-width: 40px !important;
  font-size: 9px !important;
  letter-spacing: .18em !important;
}
.mobile-profile-card {
  padding: 12px !important;
  border-radius: var(--ls-radius-card, 4px) !important;
}
.mobile-profile-card img {
  width: 44px !important;
  height: 44px !important;
}
.mobile-menu-footer {
  margin-top: 44px !important;
}
.mobile-menu-footer a {
  font-size: 9px !important;
  letter-spacing: .16em !important;
}
@media (max-width: 420px) {
  .mobile-menu-inner {
    padding: 96px 28px 42px !important;
  }
  .mobile-menu-link {
    padding: 13px 0 !important;
    font-size: clamp(1.08rem, 6.2vw, 1.46rem) !important;
  }
  .mobile-menu-link::before {
    min-width: 36px !important;
    font-size: 8px !important;
  }
}

/* LiveSea v4 home mobile menu sizing + reliable overlay */
.mobile-menu {
  max-height: none !important;
  overflow: visible !important;
}
.mobile-menu.open {
  max-height: none !important;
  overflow: visible !important;
}
.mobile-menu-link {
  padding: 13px 0 !important;
  font-size: clamp(1.08rem, 5.4vw, 1.54rem) !important;
  line-height: 1.12 !important;
  letter-spacing: -0.022em !important;
}
.mobile-menu-link::before {
  min-width: 36px !important;
  font-size: 8px !important;
  letter-spacing: .18em !important;
}
.mobile-menu-footer a {
  font-size: 8px !important;
  letter-spacing: .17em !important;
}
.hero-badge-dot,
.quest-kicker::before,
.profile-kicker::before,
.admin-kicker::before,
.quest-admin-kicker::before,
.sidebar-card-kicker::before,
.section-kicker::before {
  background: linear-gradient(135deg, var(--silver), var(--slate-light)) !important;
  box-shadow: 0 0 0 5px rgba(176,184,196,0.10), 0 0 20px rgba(176,184,196,0.16) !important;
}

/* =========================================================
   Performance pass 2026-05: isolate homepage paints without visual changes
========================================================= */
.hero-grid,
.atmosphere,
.grain {
  contain: paint;
}

.logo-ticker,
.carousel-viewport {
  contain: layout paint;
}

.ticker-track {
  --ticker-duration: 34s;
}

.main > .section:not(.hero),
.main > .logo-ticker,
.main > .footer-cta {
  content-visibility: auto;
  contain-intrinsic-size: 1px 760px;
}

.feature,
.testimonial-card,
.faq-item,
.pricing-card {
  contain: layout paint style;
}

.carousel-viewport {
  overscroll-behavior-inline: contain;
  -webkit-overflow-scrolling: touch;
}

@media (hover: none), (pointer: coarse), (update: slow) {
  .hero-grid {
    --mx: 50% !important;
    --my: 32% !important;
  }

  .ticker-track {
    --ticker-duration: 48s;
  }

  .hero-badge-dot {
    animation: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ticker-track {
    animation: none !important;
    transform: none !important;
  }
}


/* =========================================================
   Desktop carousel visibility fix — show more team/review cards
   without changing the mobile layout.
========================================================= */
@media (min-width: 1025px) {
  .team-carousel,
  .reviews-carousel {
    width: min(980px, calc(100vw - 180px));
    max-width: 100%;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .team-carousel .carousel-viewport,
  .reviews-carousel .carousel-viewport {
    width: 100% !important;
    padding: 1px !important;
    border: 1px solid rgba(156, 163, 175, 0.05);
    background: rgba(15, 17, 21, 0.12);
  }

  .team-carousel .carousel-track,
  .reviews-carousel .carousel-track {
    gap: 18px !important;
  }

  .team-carousel .carousel-track .testimonial-card,
  .team-carousel .testimonial-card {
    flex-basis: 336px !important;
  }

  .reviews-carousel .carousel-track .testimonial-card,
  .reviews-carousel .testimonial-card {
    flex-basis: 344px !important;
  }

  .team-carousel .carousel-footer,
  .reviews-carousel .carousel-footer {
    width: min(440px, 48vw) !important;
    margin-top: 18px !important;
  }
}

/* Nav logo — show the full image as-is, without circular crop or frame. */
.top-nav .nav-brand .brand-mark,
.nav-brand .brand-mark {
  width: 50px !important;
  height: 50px !important;
  flex: 0 0 50px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  margin-right: 0 !important;
  overflow: visible !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  clip-path: none !important;
}

.top-nav .nav-brand .brand-mark img,
.nav-brand .brand-mark img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
  object-position: center !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  clip-path: none !important;
}

@media (max-width: 768px) {
  .top-nav .nav-brand .brand-mark,
  .nav-brand .brand-mark {
    width: 44px !important;
    height: 44px !important;
    flex-basis: 44px !important;
  }
}


/* ===== luminary-site-shell.css ===== */
/* =========================================================
   LiveSea Agency — global Luminary shell
   ---------------------------------------------------------
   One visual system for public, profile, quests, team, spin
   and admin pages: navigation, background, containers, cards,
   typography, tables, mobile menu and footer.
========================================================= */

:root {
  /* Home visual identity */
  --base-deep: #0F1115;
  --base-mid: #161A20;
  --base-soft: #1C2128;
  --slate-warm: #6B7280;
  --slate-light: #9CA3AF;
  --graphite: #2A2E35;
  --graphite-soft: #3D424A;
  --ivory: #E5E7EB;
  --ivory-muted: #C9CDD4;
  --silver: #B0B8C4;
  --panel-bg: rgba(22, 26, 32, 0.58);
  --panel-border: rgba(156, 163, 175, 0.10);
  --silk-ease: cubic-bezier(0.16, 1, 0.3, 1);

  /* Global page rhythm */
  --page-container-width: 1180px;
  --page-x-padding: clamp(18px, 4vw, 40px);
  --page-top-safe-space: clamp(108px, 10vw, 132px);
  --section-gap: clamp(18px, 3vw, 28px);
  --card-padding: clamp(18px, 3vw, 28px);
  --card-radius: 4px;
  --inner-radius: 3px;
  --button-radius: 3px;

  /* Compatibility aliases for legacy CSS files. */
  --ls-radius-card: var(--card-radius);
  --ls-radius-panel: var(--card-radius);
  --ls-radius-button: var(--button-radius);
  --ls-page-max: var(--page-container-width);
  --ls-page-pad-x: var(--page-x-padding);
  --ls-card-pad: var(--card-padding);
  --ls-card-padding: var(--card-padding);
  --ls-card-radius-clean: var(--card-radius);
  --ls-inner-radius-clean: var(--inner-radius);
  --ls-block-gap: var(--section-gap);
  --ls-nav-safe-space: var(--page-top-safe-space);
  --container: var(--page-container-width);
  --text: var(--ivory);
  --muted: var(--slate-light);
  --muted-2: var(--slate-warm);
  --stroke: var(--panel-border);
  --gradient: linear-gradient(135deg, var(--silver), var(--slate-light));
  --gradient-soft: linear-gradient(180deg, rgba(255,255,255,0.055), rgba(255,255,255,0.025));
  --shadow-md: 0 24px 80px rgba(0, 0, 0, 0.22);
  --transition: 0.28s ease;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--page-top-safe-space) - 16px);
}

html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

body.ls-app-page {
  min-height: 100vh;
  min-height: 100dvh;
  font-family: 'Montserrat', Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
  color: var(--ivory) !important;
  background: var(--base-deep) !important;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body.ls-app-page::before,
body.ls-app-page::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

body.ls-app-page::before {
  background:
    radial-gradient(circle at 16% 12%, rgba(176,184,196,0.065), transparent 30%),
    radial-gradient(circle at 84% 6%, rgba(124, 108, 205, 0.075), transparent 28%),
    linear-gradient(180deg, #0F1115 0%, #161A20 35%, #1C2128 70%, #0D0F13 100%);
}

body.ls-app-page::after {
  opacity: 0.10;
  background-image:
    linear-gradient(rgba(156,163,175,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(156,163,175,0.04) 1px, transparent 1px);
  background-size: 118px 118px;
  mask-image: linear-gradient(to bottom, rgba(0,0,0,0.9), rgba(0,0,0,0.12));
}

body.ls-app-page > * {
  position: relative;
  z-index: 1;
}

body.ls-app-page .atmosphere {
  display: block !important;
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(180deg, #0F1115 0%, #161A20 35%, #1C2128 70%, #0D0F13 100%);
}

body.ls-app-page .grain {
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: 0.022;
  mix-blend-mode: overlay;
}

/* =========================================================
   Header / navigation — same language as the home page
========================================================= */

.top-nav,
.top-nav.ls-shell-nav {
  position: fixed !important;
  top: 0;
  left: 0;
  right: 0;
  z-index: 700;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  width: 100%;
  padding: 24px 40px;
  border-bottom: 1px solid transparent;
  background: transparent;
  transition:
    padding 0.48s var(--silk-ease),
    background 0.48s var(--silk-ease),
    border-color 0.48s var(--silk-ease),
    box-shadow 0.48s var(--silk-ease);
}

.top-nav.ls-shell-nav,
.top-nav.scrolled,
body.menu-open .top-nav {
  padding: 16px 40px;
  background: rgba(15, 17, 21, 0.88);
  border-bottom-color: rgba(156, 163, 175, 0.065);
  box-shadow: 0 18px 50px rgba(0,0,0,0.20);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.top-nav .nav-brand,
.top-nav .nav-brand:visited {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  color: var(--ivory);
  text-decoration: none;
}

.top-nav .brand-mark {
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  overflow: hidden;
  border-radius: 50%;
  border: 0;
  padding: 0;
  background: transparent;
  box-shadow: none;
}

.top-nav .brand-mark img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  clip-path: circle(50% at 50% 50%);
}

.top-nav .brand-line {
  display: block;
  max-width: min(54vw, 320px);
  overflow: hidden;
  color: var(--ivory);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.2em;
  line-height: 1;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.top-nav .brand-line span {
  margin-left: 4px;
  color: var(--slate-warm);
  font-weight: 300;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: clamp(20px, 3vw, 32px);
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav-links a,
.nav-profile-dropdown a {
  text-decoration: none;
}

.nav-links > li > a {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 14px 0 6px;
  color: var(--slate-warm);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.18em;
  line-height: 1.2;
  text-transform: uppercase;
  transition: color 0.42s var(--silk-ease);
}

.nav-links > li > a::after {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  width: 6px;
  height: 6px;
  border-right: 1px solid var(--silver);
  border-bottom: 1px solid var(--silver);
  opacity: 0;
  pointer-events: none;
  transform: translateX(-50%) rotate(45deg) translateY(-8px);
  transition: transform 0.48s var(--silk-ease), opacity 0.34s var(--silk-ease);
}

.nav-links > li > a:hover,
.nav-links > li > a:focus-visible,
.nav-links > li > a.active,
.nav-links > li > a.is-active,
.nav-profile-dropdown a.active,
.nav-profile-dropdown a.is-active {
  color: var(--ivory-muted);
}

.nav-links > li > a:hover::after,
.nav-links > li > a:focus-visible::after,
.nav-links > li > a.active::after,
.nav-links > li > a.is-active::after {
  opacity: 0.68;
  transform: translateX(-50%) rotate(45deg) translateY(0);
}

.nav-auth-link {
  color: var(--ivory-muted) !important;
}

.nav-profile-menu {
  position: relative;
}

.nav-profile-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 42px;
  padding: 8px 12px 8px 8px;
  border: 1px solid var(--panel-border);
  border-radius: var(--button-radius);
  background: rgba(22,26,32,0.64);
  color: var(--ivory-muted);
  font-family: inherit;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color 0.28s var(--silk-ease), background 0.28s var(--silk-ease), transform 0.28s var(--silk-ease);
}

.nav-profile-pill:hover,
.nav-profile-pill:focus-visible,
.nav-profile-menu.open .nav-profile-pill {
  border-color: rgba(176,184,196,0.22);
  background: rgba(28,33,40,0.78);
}

.nav-profile-pill img {
  width: 26px;
  height: 26px;
  flex: 0 0 26px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid rgba(176,184,196,0.18);
}

.nav-profile-dropdown {
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  width: min(270px, calc(100vw - 32px));
  padding: 8px;
  border: 1px solid var(--panel-border);
  border-radius: var(--card-radius);
  background: rgba(15,17,21,0.96);
  box-shadow: 0 24px 70px rgba(0,0,0,0.34);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity 0.25s var(--silk-ease), transform 0.25s var(--silk-ease), visibility 0.25s;
}

.nav-profile-menu.open .nav-profile-dropdown,
.nav-profile-menu:focus-within .nav-profile-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.nav-profile-dropdown a {
  display: block;
  padding: 12px;
  border-radius: var(--inner-radius);
  color: var(--slate-light);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  line-height: 1.25;
  text-transform: uppercase;
  transition: background 0.22s var(--silk-ease), color 0.22s var(--silk-ease);
}

.nav-profile-dropdown a:hover,
.nav-profile-dropdown a:focus-visible {
  background: rgba(156,163,175,0.06);
  color: var(--ivory);
}

.nav-profile-dropdown a.logout {
  color: #fecaca;
}

.nav-toggle {
  display: none;
  position: relative;
  width: 34px;
  height: 28px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.toggle-bar {
  position: absolute;
  left: 1px;
  display: block;
  width: 32px;
  height: 1.5px;
  border-radius: 2px;
  background: var(--ivory);
  transition: transform 0.4s var(--silk-ease), top 0.4s var(--silk-ease), opacity 0.3s var(--silk-ease);
}

.toggle-bar:nth-child(1) { top: 8px; }
.toggle-bar:nth-child(2) { top: 18px; }
.nav-toggle.active .toggle-bar:nth-child(1) { top: 13px; transform: rotate(45deg); }
.nav-toggle.active .toggle-bar:nth-child(2) { top: 13px; transform: rotate(-45deg); }

.nav-toggle:focus-visible,
.nav-profile-pill:focus-visible,
.mobile-menu a:focus-visible,
.nav-links a:focus-visible,
.nav-brand:focus-visible,
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid rgba(176,184,196,0.86);
  outline-offset: 4px;
}

/* =========================================================
   Mobile menu
========================================================= */

.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 690;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 0.34s var(--silk-ease), transform 0.34s var(--silk-ease), visibility 0.34s;
}

.mobile-menu.open {
  pointer-events: auto;
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.mobile-menu-inner {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  max-width: 100%;
  padding: 104px var(--page-x-padding) calc(48px + env(safe-area-inset-bottom, 0px));
  overflow-x: hidden;
  overflow-y: auto;
  background: rgba(15,17,21,0.96);
  backdrop-filter: blur(34px);
  -webkit-backdrop-filter: blur(34px);
}

.mobile-profile-card {
  display: flex;
  align-items: center;
  gap: 14px;
  width: min(100%, 520px);
  margin: 0 0 28px;
  padding: 14px;
  border: 1px solid var(--panel-border);
  border-radius: var(--card-radius);
  background: rgba(22,26,32,0.54);
}

.mobile-profile-card img {
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid rgba(176,184,196,0.18);
}

.mobile-profile-card span {
  display: block;
  margin-bottom: 4px;
  color: var(--slate-warm);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.mobile-profile-card strong {
  display: block;
  min-width: 0;
  overflow: hidden;
  color: var(--ivory);
  font-size: 0.95rem;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mobile-menu-links {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: center;
  width: min(100%, 760px);
}

.mobile-menu-links-private {
  justify-content: flex-start;
}

.mobile-menu-link {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: 18px;
  min-width: 0;
  padding: 15px 0;
  border-bottom: 1px solid rgba(156,163,175,0.06);
  color: var(--ivory);
  text-decoration: none;
  font-size: clamp(1.35rem, 6.3vw, 2.45rem);
  font-weight: 300;
  letter-spacing: -0.04em;
  line-height: 1.08;
  opacity: 0;
  transform: translateY(14px);
  transition: color 0.25s var(--silk-ease), opacity 0.28s var(--silk-ease), transform 0.28s var(--silk-ease);
  overflow-wrap: anywhere;
}

.mobile-menu.open .mobile-menu-link {
  opacity: 1;
  transform: translateY(0);
}

.mobile-menu.open .mobile-menu-link:nth-child(1) { transition-delay: 0.04s; }
.mobile-menu.open .mobile-menu-link:nth-child(2) { transition-delay: 0.08s; }
.mobile-menu.open .mobile-menu-link:nth-child(3) { transition-delay: 0.12s; }
.mobile-menu.open .mobile-menu-link:nth-child(4) { transition-delay: 0.16s; }
.mobile-menu.open .mobile-menu-link:nth-child(5) { transition-delay: 0.20s; }
.mobile-menu.open .mobile-menu-link:nth-child(6) { transition-delay: 0.24s; }
.mobile-menu.open .mobile-menu-link:nth-child(7) { transition-delay: 0.28s; }

.mobile-menu-link::before {
  content: attr(data-index);
  min-width: 40px;
  color: var(--slate-warm);
  opacity: 0.48;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.18em;
  font-variant-numeric: tabular-nums;
}

.mobile-menu-link:hover,
.mobile-menu-link:focus-visible,
.mobile-menu-link.active,
.mobile-menu-link.is-active {
  color: var(--ivory-muted);
}

.mobile-menu-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: min(100%, 760px);
  padding-top: 24px;
  border-top: 1px solid rgba(156,163,175,0.06);
}

.mobile-menu-footer a {
  color: var(--slate-warm);
  text-decoration: none;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  opacity: 0.70;
}

body.menu-open {
  overflow: hidden;
  touch-action: none;
}

/* =========================================================
   Internal layout rhythm
========================================================= */

body.ls-app-page main,
body.ls-app-page .profile-page-v3,
body.ls-app-page .quest-page,
body.ls-app-page .admin-page,
body.ls-app-page .admin-page-v5,
body.ls-app-page .team-page,
body.ls-app-page .quest-admin-page-v2,
body.ls-app-page .quest-admin-final-page,
body.ls-app-page .spin-page,
body.ls-app-page .payment-calendar-page {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  max-width: none;
  margin: 0;
  padding: var(--page-top-safe-space) 0 0 !important;
  gap: var(--section-gap);
  overflow-x: clip;
}

body.ls-app-page .container {
  width: min(calc(100% - (var(--page-x-padding) * 2)), var(--page-container-width)) !important;
  max-width: var(--page-container-width) !important;
  margin-inline: auto !important;
  padding-inline: 0 !important;
}

body.ls-app-page main > section,
body.ls-app-page .profile-section,
body.ls-app-page .quest-hero,
body.ls-app-page .quest-state-section,
body.ls-app-page .quest-stats-section,
body.ls-app-page .quest-main-section,
body.ls-app-page .admin-access-section,
body.ls-app-page .admin-hero,
body.ls-app-page .admin-section,
body.ls-app-page .partners,
body.ls-app-page .performances,
body.ls-app-page .quest-admin-section,
body.ls-app-page .quest-admin-final-hero,
body.ls-app-page .quest-admin-final-queues-section,
body.ls-app-page .quest-admin-final-main-section,
body.ls-app-page .spin-hero,
body.ls-app-page .spin-machine-section,
body.ls-app-page .spin-ticket-rules-section,
body.ls-app-page .spin-history-section,
body.ls-app-page .team-hero,
body.ls-app-page .team-switcher-section,
body.ls-app-page .team-main-section,
body.ls-app-page .payment-calendar-hero,
body.ls-app-page .payment-calendar-section {
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

body.ls-app-page main > section + section {
  margin-top: 0 !important;
}

body.ls-app-page .admin-queues-grid,
body.ls-app-page .admin-workspace-grid,
body.ls-app-page .admin-detail-grid,
body.ls-app-page .admin-staff-grid,
body.ls-app-page .profile-hero-grid,
body.ls-app-page .profile-stats-grid,
body.ls-app-page .profile-content-grid,
body.ls-app-page .profile-metric-grid,
body.ls-app-page .profile-review-grid,
body.ls-app-page .quest-hero-grid,
body.ls-app-page .quest-main-grid,
body.ls-app-page .quest-card-grid,
body.ls-app-page .quest-admin-summary-grid,
body.ls-app-page .quest-admin-lanes-grid,
body.ls-app-page .quest-admin-workspace,
body.ls-app-page .quest-admin-focus-grid,
body.ls-app-page .quest-admin-final-top-grid,
body.ls-app-page .quest-admin-final-main-grid,
body.ls-app-page .quest-admin-final-queue-grid,
body.ls-app-page .spin-hero-grid,
body.ls-app-page .spin-rules-grid,
body.ls-app-page .spin-history-layout,
body.ls-app-page .team-top-grid,
body.ls-app-page .team-content-grid,
body.ls-app-page .payment-calendar-hero-grid {
  gap: var(--section-gap) !important;
}

/* =========================================================
   Cards / blocks / typography
========================================================= */

body.ls-app-page .profile-card,
body.ls-app-page .profile-metric-card,
body.ls-app-page .profile-stat-card,
body.ls-app-page .profile-review-card,
body.ls-app-page .profile-side-info-card,
body.ls-app-page .profile-note-box,
body.ls-app-page .profile-summary-box,
body.ls-app-page .profile-balance-highlight-card,
body.ls-app-page .quest-panel,
body.ls-app-page .quest-card,
body.ls-app-page .quest-mini-card,
body.ls-app-page .quest-stat-card,
body.ls-app-page .quest-side-info-card,
body.ls-app-page .spin-panel,
body.ls-app-page .spin-ticket-rule-card,
body.ls-app-page .admin-card,
body.ls-app-page .admin-metric-card,
body.ls-app-page .admin-user-card-row,
body.ls-app-page .admin-staff-card,
body.ls-app-page .admin-review-card,
body.ls-app-page .quest-admin-card,
body.ls-app-page .quest-admin-state-card,
body.ls-app-page .quest-admin-summary-card,
body.ls-app-page .quest-admin-request-card,
body.ls-app-page .quest-admin-focus-card,
body.ls-app-page .quest-admin-final-card,
body.ls-app-page .team-hero-card,
body.ls-app-page .team-switcher-card,
body.ls-app-page .team-roster-card,
body.ls-app-page .team-profile-shell,
body.ls-app-page .team-history-card,
body.ls-app-page [class*='state-card'],
body.ls-app-page [class*='side-info-card'] {
  min-width: 0 !important;
  max-width: 100% !important;
  padding: var(--card-padding) !important;
  overflow: hidden;
  border: 1px solid var(--panel-border) !important;
  border-radius: var(--card-radius) !important;
  background: var(--panel-bg) !important;
  box-shadow: var(--shadow-md) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
}

body.ls-app-page .profile-card > :first-child,
body.ls-app-page .quest-panel > :first-child,
body.ls-app-page .spin-panel > :first-child,
body.ls-app-page .admin-card > :first-child,
body.ls-app-page .quest-admin-card > :first-child,
body.ls-app-page .quest-admin-final-card > :first-child,
body.ls-app-page .team-hero-card > :first-child,
body.ls-app-page .team-switcher-card > :first-child,
body.ls-app-page .team-roster-card > :first-child,
body.ls-app-page .team-profile-shell > :first-child,
body.ls-app-page .team-history-card > :first-child {
  margin-top: 0 !important;
}

body.ls-app-page .profile-card > :last-child,
body.ls-app-page .quest-panel > :last-child,
body.ls-app-page .spin-panel > :last-child,
body.ls-app-page .admin-card > :last-child,
body.ls-app-page .quest-admin-card > :last-child,
body.ls-app-page .quest-admin-final-card > :last-child,
body.ls-app-page .team-hero-card > :last-child,
body.ls-app-page .team-switcher-card > :last-child,
body.ls-app-page .team-roster-card > :last-child,
body.ls-app-page .team-profile-shell > :last-child,
body.ls-app-page .team-history-card > :last-child {
  margin-bottom: 0 !important;
}

body.ls-app-page h1,
body.ls-app-page h2,
body.ls-app-page h3,
body.ls-app-page .admin-hero-title,
body.ls-app-page .quest-hero-title,
body.ls-app-page .profile-title,
body.ls-app-page .hero-title {
  max-width: 100%;
  color: var(--ivory) !important;
  font-family: 'Montserrat', sans-serif !important;
  letter-spacing: -0.045em;
  overflow-wrap: anywhere;
  text-wrap: balance;
}

body.ls-app-page h1 {
  font-size: clamp(2rem, 5vw, 3.35rem) !important;
  line-height: 1.04 !important;
}

body.ls-app-page h2 {
  font-size: clamp(1.34rem, 3vw, 2.05rem) !important;
  line-height: 1.12 !important;
}

body.ls-app-page h3 {
  font-size: clamp(1.02rem, 2vw, 1.34rem) !important;
  line-height: 1.18 !important;
}

body.ls-app-page p,
body.ls-app-page li,
body.ls-app-page td,
body.ls-app-page th,
body.ls-app-page label,
body.ls-app-page span {
  max-width: 100%;
}

body.ls-app-page p,
body.ls-app-page li,
body.ls-app-page .hero-description,
body.ls-app-page .profile-lead,
body.ls-app-page .quest-lead,
body.ls-app-page .quest-subtitle,
body.ls-app-page .admin-hero-text,
body.ls-app-page .quest-admin-lead,
body.ls-app-page .profile-muted-copy,
body.ls-app-page .quest-muted-copy {
  color: var(--slate-light) !important;
  font-family: 'Montserrat', sans-serif !important;
  font-size: clamp(0.88rem, 1.6vw, 0.98rem) !important;
  line-height: 1.72 !important;
}

body.ls-app-page strong {
  color: inherit;
}

/* Remove decorative labels and their dot/pill pseudo-elements. Functional status badges remain visible. */
.hero-badge,
.hero-badge-dot,
.section-kicker,
.section-tag,
.profile-kicker,
.quest-kicker,
.admin-kicker,
.quest-admin-kicker,
.sidebar-card-kicker,
.spin-result-kicker,
.team-kicker,
[class*='eyebrow'] {
  display: none !important;
}

.hero-badge::before,
.hero-badge::after,
.section-kicker::before,
.section-kicker::after,
.section-tag::before,
.section-tag::after,
.profile-kicker::before,
.profile-kicker::after,
.quest-kicker::before,
.quest-kicker::after,
.admin-kicker::before,
.admin-kicker::after,
.quest-admin-kicker::before,
.quest-admin-kicker::after,
.sidebar-card-kicker::before,
.sidebar-card-kicker::after,
.spin-result-kicker::before,
.spin-result-kicker::after,
.team-kicker::before,
.team-kicker::after {
  content: none !important;
  display: none !important;
}

body.ls-app-page .button,
body.ls-app-page .btn-primary,
body.ls-app-page .btn-secondary,
body.ls-app-page button:not(.nav-toggle):not(.nav-profile-pill),
body.ls-app-page input[type='submit'],
body.ls-app-page .admin-button,
body.ls-app-page .quest-button,
body.ls-app-page .profile-button,
body.ls-app-page .spin-button,
body.ls-app-page .mobile-discord,
body.ls-app-page .nav-discord {
  border-radius: var(--button-radius) !important;
  font-family: 'Montserrat', sans-serif !important;
}

body.ls-app-page .button-primary,
body.ls-app-page .btn-primary,
body.ls-app-page .admin-button-primary,
body.ls-app-page .quest-button-primary,
body.ls-app-page .profile-button-primary {
  border: 0 !important;
  background: linear-gradient(135deg, var(--silver), var(--slate-light)) !important;
  color: var(--base-deep) !important;
  box-shadow: 0 12px 38px rgba(176,184,196,0.12) !important;
}

body.ls-app-page .button-secondary,
body.ls-app-page .btn-secondary,
body.ls-app-page .admin-button-secondary,
body.ls-app-page .quest-button-secondary,
body.ls-app-page .profile-button-secondary {
  border: 1px solid var(--panel-border) !important;
  background: rgba(156,163,175,0.04) !important;
  color: var(--ivory-muted) !important;
}

body.ls-app-page input,
body.ls-app-page textarea,
body.ls-app-page select,
body.ls-app-page .profile-chip,
body.ls-app-page .profile-info-row,
body.ls-app-page .profile-ban-item,
body.ls-app-page .profile-balance-card,
body.ls-app-page .quest-info-row,
body.ls-app-page .quest-status-pill,
body.ls-app-page .quest-filter-button,
body.ls-app-page .quest-history-status,
body.ls-app-page .spin-chip,
body.ls-app-page .spin-ban-row,
body.ls-app-page .admin-role-badge,
body.ls-app-page .admin-mini-badge,
body.ls-app-page .admin-count-badge,
body.ls-app-page .quest-admin-badge,
body.ls-app-page .quest-admin-final-role-badge,
body.ls-app-page .team-panel-badge,
body.ls-app-page .team-unpaid-alert,
body.ls-app-page .team-paid-state {
  border-radius: var(--inner-radius) !important;
}

body.ls-app-page input,
body.ls-app-page textarea,
body.ls-app-page select {
  border: 1px solid var(--panel-border) !important;
  background: rgba(15,17,21,0.62) !important;
  color: var(--ivory) !important;
}

body.ls-app-page img[class*='avatar'],
body.ls-app-page .avatar,
body.ls-app-page .discord-user-avatar,
body.ls-app-page .profile-avatar,
body.ls-app-page .admin-user-avatar,
body.ls-app-page .team-switch-avatar,
body.ls-app-page .quest-avatar-image {
  border-radius: 50% !important;
  object-fit: cover;
}

/* =========================================================
   Tables: internal scroll only, never page-level horizontal scroll
========================================================= */

body.ls-app-page .admin-table-scroll,
body.ls-app-page .profile-table-scroll,
body.ls-app-page .quest-history-table-wrap,
body.ls-app-page .spin-history-table-wrap,
body.ls-app-page .team-table-wrap,
body.ls-app-page .admin-table-wrap,
body.ls-app-page .quest-admin-table-wrap,
body.ls-app-page .quest-admin-final-table-wrap {
  width: 100%;
  max-width: 100%;
  overflow-x: auto !important;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--inner-radius) !important;
}

body.ls-app-page .admin-queue-table-card,
body.ls-app-page .admin-table-card,
body.ls-app-page .quest-history-card,
body.ls-app-page .spin-history-card {
  overflow: hidden !important;
}

body.ls-app-page table,
body.ls-app-page .admin-table,
body.ls-app-page .admin-status-table,
body.ls-app-page .admin-queue-table,
body.ls-app-page .admin-history-table,
body.ls-app-page .admin-data-table,
body.ls-app-page .quest-history-table,
body.ls-app-page .quest-admin-table,
body.ls-app-page .spin-history-table,
body.ls-app-page .team-staff-table,
body.ls-app-page .team-roster-table,
body.ls-app-page .profile-payment-table {
  width: 100%;
  min-width: 720px;
  border-collapse: collapse !important;
  border-color: rgba(156,163,175,0.08) !important;
  table-layout: auto;
}

body.ls-app-page table th,
body.ls-app-page table td {
  padding: 12px 14px !important;
  border-color: rgba(156,163,175,0.08) !important;
  font-family: 'Montserrat', sans-serif !important;
  font-size: 0.82rem !important;
  line-height: 1.5 !important;
  vertical-align: middle;
}

body.ls-app-page table th {
  color: var(--slate-warm) !important;
  font-size: 0.68rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  white-space: nowrap;
}

body.ls-app-page table td {
  color: var(--ivory-muted) !important;
}

body.ls-app-page table td:not(.profile-payment-note-cell) {
  white-space: nowrap;
}

body.ls-app-page .profile-payment-note-cell,
body.ls-app-page .admin-review-message,
body.ls-app-page .quest-admin-request-card-meta {
  white-space: normal !important;
  overflow-wrap: anywhere;
}

body.ls-app-page .quest-reward-pill,
body.ls-app-page .quest-status-badge,
body.ls-app-page .admin-role-badge,
body.ls-app-page .admin-mini-badge,
body.ls-app-page .admin-count-badge,
body.ls-app-page .quest-admin-badge,
body.ls-app-page .quest-admin-final-role-badge,
body.ls-app-page .quest-admin-final-count-badge,
body.ls-app-page .team-panel-badge,
body.ls-app-page [class*='status-badge'],
body.ls-app-page [class*='status-pill'] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  max-width: 100%;
  padding: 6px 10px;
  font-size: 0.72rem !important;
  line-height: 1.25 !important;
  white-space: nowrap;
}

/* =========================================================
   Footer
========================================================= */

.ls-site-footer,
body.ls-app-page .ls-site-footer {
  width: 100% !important;
  margin: clamp(34px, 5vw, 62px) auto 0 !important;
  padding: clamp(34px, 5vw, 56px) 0 calc(44px + env(safe-area-inset-bottom, 0px)) !important;
  border-top: 1px solid rgba(156,163,175,0.08) !important;
  background: linear-gradient(180deg, rgba(255,255,255,0.018), rgba(255,255,255,0)) !important;
  text-align: center !important;
}

body.ls-app-page .ls-site-footer--compact {
  /* Footer visible juste après le contenu : pas de marge auto qui pousse le pied de page hors écran sur mobile. */
  margin-top: clamp(22px, 4vw, 42px) !important;
  padding-top: clamp(24px, 4vw, 38px) !important;
}

.ls-site-footer--home {
  margin-top: clamp(48px, 7vw, 90px) !important;
}

.ls-site-footer .footer-cta-content {
  width: min(calc(100% - (var(--page-x-padding) * 2)), 900px) !important;
  margin: 0 auto !important;
  padding: 0 !important;
}

.ls-site-footer .section-title {
  margin: 0 !important;
}

.ls-site-footer .section-body {
  margin: 16px auto 0 !important;
}

.ls-site-footer .footer-ctas {
  display: flex !important;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px !important;
  margin: clamp(26px, 4vw, 40px) auto 0 !important;
}

.ls-site-footer .footer-ctas .btn-primary,
.ls-site-footer .footer-ctas .btn-secondary {
  min-height: 54px !important;
}

.ls-site-footer .footer-bar,
body.ls-app-page .footer-bar {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: min(calc(100% - (var(--page-x-padding) * 2)), 1020px) !important;
  margin: clamp(32px, 5vw, 52px) auto 0 !important;
  padding-top: clamp(22px, 3vw, 30px) !important;
  border-top: 1px solid rgba(156,163,175,0.075) !important;
}

.ls-site-footer--compact .footer-bar,
body.ls-app-page .ls-site-footer--compact .footer-bar {
  margin-top: 0 !important;
  padding-top: 0 !important;
  border-top: 0 !important;
}

.ls-site-footer .footer-brand,
body.ls-app-page .footer-brand {
  display: block !important;
  color: rgba(222,230,242,0.56) !important;
  font-size: clamp(0.72rem, 1.8vw, 0.82rem) !important;
  font-weight: 800 !important;
  letter-spacing: 0.18em !important;
  line-height: 1.4 !important;
  text-align: center !important;
  text-transform: uppercase !important;
  white-space: normal !important;
}

.ls-site-footer .footer-links,
.ls-site-footer .footer-credit,
.ls-site-footer .footer-logo-dot {
  display: none !important;
}


/* Footer must stay visible even on pages that do not load the homepage reveal script. */
.ls-site-footer .reveal,
body.ls-app-page .ls-site-footer .reveal {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}

/* =========================================================
   Side panels and utility safeguards
========================================================= */

body.ls-app-page .side-panel {
  z-index: 90;
}

.auth-error-box {
  position: fixed;
  top: 96px;
  left: 50%;
  z-index: 2500;
  width: min(680px, calc(100% - 32px));
  padding: 16px 22px;
  transform: translateX(-50%);
  border: 1px solid rgba(248,113,113,0.28);
  border-radius: var(--card-radius);
  background: rgba(28, 13, 17, 0.92);
  color: #fecaca;
  font-size: 13px;
  letter-spacing: 0.02em;
  box-shadow: 0 24px 80px rgba(0,0,0,0.34);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
}

/* =========================================================
   Responsive
========================================================= */

@media (max-width: 1180px) {
  body.ls-app-page .side-panel {
    display: none !important;
  }
}

@media (max-width: 1024px) {
  :root {
    --page-x-padding: clamp(16px, 4vw, 28px);
    --page-top-safe-space: 112px;
    --section-gap: 18px;
    --card-padding: 18px;
  }

  .top-nav,
  .top-nav.ls-shell-nav,
  .top-nav.scrolled,
  body.menu-open .top-nav {
    padding: 16px 22px !important;
  }

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

  .nav-toggle {
    display: block !important;
  }
}

@media (max-width: 768px) {
  :root {
    --page-top-safe-space: 106px;
    --section-gap: 16px;
    --card-padding: 16px;
  }

  .top-nav,
  .top-nav.ls-shell-nav,
  .top-nav.scrolled,
  body.menu-open .top-nav {
    padding: 15px 18px !important;
  }

  .top-nav .brand-mark {
    width: 32px;
    height: 32px;
    flex-basis: 32px;
  }

  .top-nav .brand-line {
    font-size: 11px;
    letter-spacing: 0.17em;
  }

  .mobile-menu-inner {
    padding-top: 94px;
  }

  .mobile-profile-card {
    padding: 12px;
  }

  .mobile-profile-card img {
    width: 42px;
    height: 42px;
    flex-basis: 42px;
  }

  .mobile-menu-link {
    gap: 14px;
    padding: 13px 0;
    font-size: clamp(1.14rem, 6vw, 1.55rem);
  }

  .mobile-menu-link::before {
    min-width: 34px;
    font-size: 8px;
  }

  body.ls-app-page table,
  body.ls-app-page .admin-status-table,
  body.ls-app-page .admin-queue-table,
  body.ls-app-page .admin-history-table,
  body.ls-app-page .quest-history-table,
  body.ls-app-page .spin-history-table,
  body.ls-app-page .team-staff-table,
  body.ls-app-page .team-roster-table,
  body.ls-app-page .profile-payment-table {
    min-width: 680px;
  }

  body.ls-app-page table th,
  body.ls-app-page table td {
    padding: 10px 12px !important;
    font-size: 0.76rem !important;
  }

  body.ls-app-page table th {
    font-size: 0.62rem !important;
  }

  .ls-site-footer .footer-ctas {
    display: grid !important;
    width: min(100%, 420px) !important;
  }
}

@media (max-width: 420px) {
  :root {
    --page-x-padding: 14px;
    --page-top-safe-space: 100px;
    --card-padding: 15px;
  }

  .top-nav .brand-line {
    max-width: 64vw;
    font-size: 10px;
    letter-spacing: 0.14em;
  }

  .mobile-menu-footer {
    flex-wrap: wrap;
  }
}



/* =========================================================
   V27 — near-square radius system across the whole site
   ---------------------------------------------------------
   Loaded last intentionally: every visible block, card, menu,
   table wrapper, input and button follows a very restrained
   radius. Decorative circles such as avatars and the logo stay
   circular because they are imagery, not layout blocks.
========================================================= */

:root {
  --card-radius: 4px;
  --inner-radius: 3px;
  --button-radius: 3px;
  --radius-xl: 4px;
  --radius-lg: 4px;
  --radius-md: 3px;
  --radius-sm: 3px;
  --ls-radius-card: 4px;
  --ls-radius-panel: 4px;
  --ls-radius-button: 3px;
  --ls-card-radius-clean: 4px;
  --ls-inner-radius-clean: 3px;
  --spin-radius-xl: 4px;
  --spin-radius-lg: 4px;
  --spin-radius-md: 3px;
  --spin-radius-sm: 3px;
}

:where(
  .hero-card, .visual-frame, .feature-card, .pricing-card, .review-card, .contact-card,
  .footer-cta-content, .footer-bar,
  [class*='card'], [class*='panel'], [class*='shell'], [class*='box'],
  [class*='surface'], [class*='wrapper'], [class*='wrap'], [class*='tile'],
  [class*='module'], [class*='dropdown'], [class*='popover'], [class*='modal'],
  [class*='drawer'], [class*='menu'], [class*='table-card'], [class*='table-wrap'],
  table, thead, tbody, tr, th, td
) {
  border-radius: var(--card-radius) !important;
}

:where(
  a[class*='btn'], .btn-primary, .btn-secondary,
  button:not(.nav-toggle), input, textarea, select,
  [class*='button'], [class*='pill'], [class*='badge'], [class*='chip'],
  [class*='tag'], [class*='filter'], [class*='status'], [class*='alert'],
  [class*='notice'], [class*='row'], [class*='item'], [class*='field'],
  [class*='input'], [class*='stat'], [class*='metric']
) {
  border-radius: var(--inner-radius) !important;
}

:where(.nav-profile-dropdown, .nav-profile-menu, .mobile-menu, .mobile-menu-inner, .mobile-profile-card) {
  border-radius: var(--card-radius) !important;
}

:where(.top-nav .brand-mark, .top-nav .brand-mark img, img[class*='avatar'], .avatar, .discord-user-avatar, .profile-avatar, .admin-user-avatar, .team-switch-avatar, .quest-avatar-image, .review-avatar, .integration-icon.is-round) {
  border-radius: 50% !important;
}

:where(.progress-bar, .progress-fill, [class*='progress'], [class*='meter']) {
  border-radius: 2px !important;
}



/* Absolute radius clamp requested after V26: no rounded bubble blocks. */
body :where(
  section, article, aside, nav, header, footer, main, div, form, fieldset, legend,
  ul, ol, li, table, thead, tbody, tfoot, tr, th, td, figure, figcaption,
  img, video, canvas, iframe, details, summary
) {
  border-radius: var(--card-radius) !important;
}

body :where(
  a, button:not(.nav-toggle), input, textarea, select, label,
  [role='button'], [class*='btn'], [class*='button'], [class*='pill'],
  [class*='badge'], [class*='chip'], [class*='tag'], [class*='status']
) {
  border-radius: var(--inner-radius) !important;
}


body :where(.top-nav, main, .main, .ls-site-footer, .footer-cta, .mobile-menu) {
  border-radius: 0 !important;
}

body :where(.top-nav .brand-mark, .top-nav .brand-mark img, img[class*='avatar'], .avatar, .discord-user-avatar, .profile-avatar, .admin-user-avatar, .team-switch-avatar, .quest-avatar-image, .review-avatar, .profile-user-avatar, .admin-discord-avatar) {
  border-radius: 50% !important;
}

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


/* =========================================================
   V28: team referent column readable on mobile
========================================================= */
html body.ls-app-page .team-page .team-staff-table {
  min-width: 1100px !important;
  table-layout: fixed !important;
}

html body.ls-app-page .team-page .team-staff-table th:nth-child(1),
html body.ls-app-page .team-page .team-staff-table td:nth-child(1) {
  width: 380px !important;
  min-width: 380px !important;
  max-width: 380px !important;
}

html body.ls-app-page .team-page .team-staff-table th:nth-child(2),
html body.ls-app-page .team-page .team-staff-table td:nth-child(2) {
  width: 180px !important;
}

html body.ls-app-page .team-page .team-staff-table th:nth-child(3),
html body.ls-app-page .team-page .team-staff-table td:nth-child(3) {
  width: 128px !important;
}

html body.ls-app-page .team-page .team-staff-table th:nth-child(4),
html body.ls-app-page .team-page .team-staff-table td:nth-child(4),
html body.ls-app-page .team-page .team-staff-table th:nth-child(5),
html body.ls-app-page .team-page .team-staff-table td:nth-child(5) {
  width: 92px !important;
  text-align: center !important;
}

html body.ls-app-page .team-page .team-staff-table th:nth-child(6),
html body.ls-app-page .team-page .team-staff-table td:nth-child(6) {
  width: 140px !important;
}

html body.ls-app-page .team-page .team-staff-table th:nth-child(7),
html body.ls-app-page .team-page .team-staff-table td:nth-child(7) {
  width: 88px !important;
  text-align: right !important;
}

html body.ls-app-page .team-page .team-staff-table .team-table-identity {
  grid-template-columns: 42px minmax(0, 1fr) !important;
  gap: 12px !important;
}

html body.ls-app-page .team-page .team-staff-table .team-table-avatar {
  width: 42px !important;
  height: 42px !important;
}

html body.ls-app-page .team-page .team-staff-table .team-table-identity strong,
html body.ls-app-page .team-page .team-staff-table .team-table-identity small {
  overflow: visible !important;
  text-overflow: clip !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
}

html body.ls-app-page .team-page .team-staff-table .team-table-identity strong {
  font-size: 0.9rem !important;
  line-height: 1.2 !important;
}

html body.ls-app-page .team-page .team-staff-table .team-table-identity small {
  margin-top: 2px !important;
  font-size: 0.76rem !important;
  line-height: 1.25 !important;
}

@media (max-width: 640px) {
  html body.ls-app-page .team-page .team-staff-table {
    min-width: 1100px !important;
  }

  html body.ls-app-page .team-page .team-staff-table th:nth-child(1),
  html body.ls-app-page .team-page .team-staff-table td:nth-child(1) {
    width: 380px !important;
    min-width: 380px !important;
    max-width: 380px !important;
  }
}

/* =========================================================
   V30 — hard mobile navigation overlay fix
   ---------------------------------------------------------
   The generic body child layering must never downgrade the
   fixed mobile menu. Keep the nav/menu in their own top layer
   above every page card, table and internal component.
========================================================= */
body.ls-app-page > .top-nav,
html body.ls-app-page > nav.top-nav,
html body.ls-app-page > nav.top-nav.ls-shell-nav {
  position: fixed !important;
  top: 0 !important;
  right: 0 !important;
  left: 0 !important;
  z-index: 100200 !important;
  isolation: isolate !important;
}

body.ls-app-page > .mobile-menu,
html body.ls-app-page > #mobileMenu.mobile-menu {
  position: fixed !important;
  inset: 0 !important;
  z-index: 100100 !important;
  display: block !important;
  width: 100vw !important;
  width: 100dvw !important;
  height: 100vh !important;
  height: 100dvh !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  pointer-events: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  transform: none !important;
  border-radius: 0 !important;
  isolation: isolate !important;
  transition: opacity 0.22s var(--silk-ease), visibility 0.22s var(--silk-ease) !important;
}

body.ls-app-page > .mobile-menu.open,
html body.ls-app-page > #mobileMenu.mobile-menu.open {
  pointer-events: auto !important;
  visibility: visible !important;
  opacity: 1 !important;
  transform: none !important;
}

body.ls-app-page > .mobile-menu .mobile-menu-inner,
html body.ls-app-page > #mobileMenu.mobile-menu .mobile-menu-inner {
  position: fixed !important;
  inset: 0 !important;
  z-index: 1 !important;
  display: flex !important;
  width: 100vw !important;
  width: 100dvw !important;
  height: 100vh !important;
  height: 100dvh !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  padding: calc(94px + env(safe-area-inset-top, 0px)) var(--page-x-padding) calc(34px + env(safe-area-inset-bottom, 0px)) !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
  background:
    radial-gradient(circle at 18% 12%, rgba(176,184,196,0.08), transparent 30%),
    linear-gradient(180deg, rgba(15,17,21,0.992), rgba(15,17,21,0.972) 48%, rgba(13,15,19,0.992)) !important;
  backdrop-filter: blur(30px) !important;
  -webkit-backdrop-filter: blur(30px) !important;
  border-radius: 0 !important;
}

body.menu-open,
html.menu-open {
  overflow: hidden !important;
  overscroll-behavior: none !important;
}

body.menu-open main,
body.menu-open .profile-page-v3,
body.menu-open .quest-page,
body.menu-open .team-page,
body.menu-open .spin-page,
body.menu-open .admin-page,
body.menu-open .admin-page-v5,
body.menu-open .quest-admin-page-v2,
body.menu-open .quest-admin-final-page,
body.menu-open .ls-site-footer {
  pointer-events: none !important;
}

body.menu-open .mobile-menu,
body.menu-open .top-nav {
  pointer-events: auto !important;
}

@media (max-width: 1024px) {
  body.ls-app-page > .mobile-menu .mobile-menu-links,
  html body.ls-app-page > #mobileMenu.mobile-menu .mobile-menu-links {
    flex: 0 0 auto !important;
    justify-content: center !important;
    width: min(100%, 760px) !important;
    margin: auto 0 !important;
  }

  body.ls-app-page > .mobile-menu .mobile-menu-links-private,
  html body.ls-app-page > #mobileMenu.mobile-menu .mobile-menu-links-private {
    justify-content: flex-start !important;
    margin: 0 !important;
  }

  body.ls-app-page > .mobile-menu .mobile-menu-link,
  html body.ls-app-page > #mobileMenu.mobile-menu .mobile-menu-link {
    opacity: 0 !important;
    transform: translateY(10px) !important;
  }

  body.ls-app-page > .mobile-menu.open .mobile-menu-link,
  html body.ls-app-page > #mobileMenu.mobile-menu.open .mobile-menu-link {
    opacity: 1 !important;
    transform: translateY(0) !important;
  }
}

/* =========================================================
   V31 — Global avatar reset: round image only, no square frame
   ---------------------------------------------------------
   Every user/avatar visual across the site must render as a
   clean circle. The avatar itself can be circular, but it must
   not sit inside a visible bordered/padded square container.
========================================================= */
body.ls-app-page :where(
  .avatar,
  .discord-user-avatar,
  .discord-user-avatar-fallback,
  .profile-avatar,
  .profile-tiktok-avatar,
  .profile-tiktok-avatar-fallback,
  .profile-tiktok-suggestion-avatar,
  .profile-tiktok-suggestion-avatar-fallback,
  .profile-tiktok-selected-avatar,
  .profile-tiktok-selected-avatar-fallback,
  .quest-avatar-box,
  .quest-avatar-image,
  .quest-avatar-fallback,
  .team-staff-avatar,
  .team-avatar,
  .team-avatar-fallback,
  .team-table-avatar,
  .team-profile-avatar,
  .admin-avatar,
  .admin-user-avatar,
  .admin-discord-avatar,
  .team-switch-avatar,
  .quest-admin-avatar-mini,
  .quest-admin-avatar-large,
  .quest-admin-avatar-xl,
  .quest-admin-final-queue-avatar,
  .quest-admin-final-user-avatar,
  .testimonial-avatar,
  .review-avatar,
  img[class*='avatar']
) {
  border-radius: 4px !important;
  clip-path: circle(50% at 50% 50%) !important;
  overflow: hidden !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}

body.ls-app-page :where(
  .avatar:has(img),
  .discord-user-avatar:has(img),
  .profile-avatar:has(img),
  .profile-tiktok-avatar:has(img),
  .profile-tiktok-suggestion-avatar:has(img),
  .profile-tiktok-selected-avatar:has(img),
  .quest-avatar-box:has(img),
  .team-staff-avatar:has(img),
  .team-avatar:has(img),
  .team-table-avatar:has(img),
  .team-profile-avatar:has(img),
  .admin-avatar:has(img),
  .admin-user-avatar:has(img),
  .admin-discord-avatar:has(img),
  .team-switch-avatar:has(img),
  .quest-admin-avatar-mini:has(img),
  .quest-admin-avatar-large:has(img),
  .quest-admin-avatar-xl:has(img),
  .quest-admin-final-queue-avatar:has(img),
  .quest-admin-final-user-avatar:has(img),
  .testimonial-avatar:has(img),
  .review-avatar:has(img)
) {
  background: transparent !important;
}

body.ls-app-page :where(
  .avatar img,
  .discord-user-avatar img,
  .profile-avatar img,
  .profile-tiktok-avatar img,
  .profile-tiktok-suggestion-avatar img,
  .profile-tiktok-selected-avatar img,
  .quest-avatar-box img,
  .quest-avatar-image,
  .team-staff-avatar img,
  .team-avatar img,
  .team-table-avatar img,
  .team-profile-avatar img,
  .admin-avatar img,
  .admin-user-avatar img,
  .admin-discord-avatar img,
  .team-switch-avatar img,
  .quest-admin-avatar-mini img,
  .quest-admin-avatar-large img,
  .quest-admin-avatar-xl img,
  .quest-admin-final-queue-avatar img,
  .quest-admin-final-user-avatar img,
  .testimonial-avatar img,
  .review-avatar img,
  img[class*='avatar']
) {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  border-radius: 4px !important;
  clip-path: circle(50% at 50% 50%) !important;
  object-fit: cover !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  background: transparent !important;
}

body.ls-app-page :where(
  .team-avatar img,
  .team-avatar-fallback
) {
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
}

/* =========================================================
   V32 — Avatar means avatar: circle only, zero local frame
   ---------------------------------------------------------
   The previous reset missed the header/mobile-menu profile
   images because they were plain <img> tags without an avatar
   class. This final layer catches those cases and removes the
   remaining square profile-image frame from the mobile menu.
========================================================= */
html body.ls-app-page :where(
  .nav-profile-avatar,
  .mobile-profile-avatar,
  .mobile-profile-card > img,
  .nav-profile-pill > img,
  img[alt*="Avatar"],
  img[alt*="avatar"]
) {
  border-radius: 4px !important;
  clip-path: circle(50% at 50% 50%) !important;
  overflow: hidden !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  background: transparent !important;
  object-fit: cover !important;
}

html body.ls-app-page :where(
  .nav-profile-avatar,
  .mobile-profile-avatar,
  .mobile-profile-card > img,
  .nav-profile-pill > img
) {
  aspect-ratio: 1 / 1 !important;
  flex: 0 0 auto !important;
}

html body.ls-app-page .mobile-profile-card {
  padding: 0 !important;
  border: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

html body.ls-app-page .mobile-profile-card::before,
html body.ls-app-page .mobile-profile-card::after,
html body.ls-app-page :where(.profile-avatar, .quest-avatar-box, .team-table-avatar, .team-profile-avatar, .admin-avatar, .admin-user-avatar, .admin-discord-avatar, .quest-admin-avatar-mini, .quest-admin-avatar-large, .quest-admin-avatar-xl, .quest-admin-final-queue-avatar, .quest-admin-final-user-avatar, .testimonial-avatar, .review-avatar)::before,
html body.ls-app-page :where(.profile-avatar, .quest-avatar-box, .team-table-avatar, .team-profile-avatar, .admin-avatar, .admin-user-avatar, .admin-discord-avatar, .quest-admin-avatar-mini, .quest-admin-avatar-large, .quest-admin-avatar-xl, .quest-admin-final-queue-avatar, .quest-admin-final-user-avatar, .testimonial-avatar, .review-avatar)::after {
  display: none !important;
  content: none !important;
}


/* =========================================================
   V33 — Hard fixes: quest hero cleanup + stable mobile profile avatar
   ---------------------------------------------------------
   - Quests no longer show the decorative status chip stack.
   - The mobile menu profile avatar is a fixed small circle on every page,
     even when broad avatar resets are loaded above this layer.
========================================================= */
html body.ls-app-page #mobileMenu .mobile-profile-card,
html body.ls-app-page .mobile-menu .mobile-profile-card {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 12px !important;
  width: min(100%, 520px) !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 0 28px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
  transform: none !important;
}

html body.ls-app-page #mobileMenu .mobile-profile-avatar,
html body.ls-app-page #mobileMenu .mobile-profile-card > img.mobile-profile-avatar,
html body.ls-app-page .mobile-menu .mobile-profile-avatar {
  display: block !important;
  width: 44px !important;
  min-width: 44px !important;
  max-width: 44px !important;
  height: 44px !important;
  min-height: 44px !important;
  max-height: 44px !important;
  flex: 0 0 44px !important;
  aspect-ratio: 1 / 1 !important;
  object-fit: cover !important;
  object-position: center !important;
  border-radius: 4px !important;
  clip-path: circle(50% at 50% 50%) !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  overflow: hidden !important;
}

html body.ls-app-page #mobileMenu .mobile-profile-card > div {
  display: block !important;
  min-width: 0 !important;
  max-width: calc(100% - 56px) !important;
  overflow: hidden !important;
}

html body.ls-app-page #mobileMenu .mobile-profile-card span,
html body.ls-app-page #mobileMenu .mobile-profile-card strong {
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

@media (max-width: 640px) {
  html body.ls-app-page #mobileMenu .mobile-profile-avatar,
  html body.ls-app-page #mobileMenu .mobile-profile-card > img.mobile-profile-avatar,
  html body.ls-app-page .mobile-menu .mobile-profile-avatar {
    width: 42px !important;
    min-width: 42px !important;
    max-width: 42px !important;
    height: 42px !important;
    min-height: 42px !important;
    max-height: 42px !important;
    flex-basis: 42px !important;
  }
}

html body.ls-app-page .quest-page .quest-chips {
  display: none !important;
}


/* =========================================================
   V40 — Referent avatar: circle only, no visual wrapper
========================================================= */
html body.ls-app-page .profile-referent-avatar {
  width: 72px !important;
  height: 72px !important;
  min-width: 72px !important;
  min-height: 72px !important;
  max-width: 72px !important;
  max-height: 72px !important;
  aspect-ratio: 1 / 1 !important;
  border-radius: 4px !important;
  clip-path: circle(50% at 50% 50%) !important;
  overflow: hidden !important;
  background: transparent !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}

html body.ls-app-page .profile-referent-avatar img,
html body.ls-app-page .profile-referent-avatar-image {
  display: block !important;
  width: 72px !important;
  height: 72px !important;
  min-width: 72px !important;
  min-height: 72px !important;
  max-width: 72px !important;
  max-height: 72px !important;
  aspect-ratio: 1 / 1 !important;
  object-fit: cover !important;
  object-position: center !important;
  border-radius: 4px !important;
  clip-path: circle(50% at 50% 50%) !important;
  background: transparent !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

html body.ls-app-page .profile-referent-avatar::before,
html body.ls-app-page .profile-referent-avatar::after {
  display: none !important;
  content: none !important;
}

@media (max-width: 640px) {
  html body.ls-app-page .profile-referent-head {
    grid-template-columns: 60px minmax(0, 1fr) !important;
  }

  html body.ls-app-page .profile-referent-avatar,
  html body.ls-app-page .profile-referent-avatar img,
  html body.ls-app-page .profile-referent-avatar-image {
    width: 60px !important;
    height: 60px !important;
    min-width: 60px !important;
    min-height: 60px !important;
    max-width: 60px !important;
    max-height: 60px !important;
  }
}


/* =========================================================
   Admin queues: vertical scroll inside each block
   v69 performance + mobile usability
========================================================= */
body.ls-app-page .admin-queue-table-card .admin-table-scroll {
  overflow-x: auto !important;
  overflow-y: auto !important;
  max-height: clamp(340px, 56vh, 560px) !important;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

body.ls-app-page .admin-queue-table-card .admin-queue-table thead th {
  position: sticky;
  top: 0;
  z-index: 5;
}

body.ls-app-page .admin-queue-table-card {
  min-height: min(560px, 72vh);
}

@media (max-width: 768px) {
  body.ls-app-page .admin-queue-table-card {
    min-height: auto;
  }

  body.ls-app-page .admin-queue-table-card .admin-table-scroll {
    max-height: 58vh !important;
    min-height: 260px;
  }
}

/* v70 admin search table */
body.ls-app-page .admin-search-table-scroll {
  overflow-x: auto !important;
  overflow-y: auto !important;
  max-height: 62vh !important;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

body.ls-app-page .admin-search-results-table thead th {
  position: sticky;
  top: 0;
  z-index: 5;
}

@media (max-width: 768px) {
  body.ls-app-page .admin-search-table-scroll {
    max-height: 58vh !important;
  }
}

/* =========================================================
   V84 — TABLEAUX UNIFIÉS LIVESEA
   Même modèle visuel que Validation des quêtes sur tout le site :
   scroll vertical + horizontal, pas de traits verticaux, lignes stables,
   header sombre, texte léger, boutons d'action harmonisés.
========================================================= */
:root {
  --ls-table-bg: rgba(8, 12, 20, 0.84);
  --ls-table-border: rgba(218, 229, 245, 0.13);
  --ls-table-head-top: rgba(31, 41, 61, 0.96);
  --ls-table-head-bottom: rgba(20, 29, 45, 0.96);
  --ls-table-row-a: rgba(255, 255, 255, 0.014);
  --ls-table-row-b: rgba(255, 255, 255, 0.026);
  --ls-table-row-border: rgba(255, 255, 255, 0.06);
  --ls-table-text: #f2f6fd;
  --ls-table-muted: rgba(162, 176, 196, 0.86);
}

.admin-table-scroll,
.admin-table-wrap,
.profile-data-table-scroll,
.profile-table-scroll,
.quest-history-table-wrap,
.spin-history-table-wrap,
.team-table-wrap,
.quest-admin-table-wrap,
.quest-admin-compact-table-wrap,
.quest-admin-browser-table-wrap,
.quest-flat-table-shell {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: auto !important;
  overflow-y: auto !important;
  max-height: 560px !important;
  border: 1px solid var(--ls-table-border) !important;
  border-radius: 5px !important;
  background: var(--ls-table-bg) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
  overscroll-behavior: contain !important;
  -webkit-overflow-scrolling: touch !important;
  touch-action: pan-x pan-y !important;
  scrollbar-gutter: stable !important;
  scroll-behavior: auto !important;
}

.admin-table-scroll::-webkit-scrollbar,
.admin-table-wrap::-webkit-scrollbar,
.profile-data-table-scroll::-webkit-scrollbar,
.profile-table-scroll::-webkit-scrollbar,
.quest-history-table-wrap::-webkit-scrollbar,
.spin-history-table-wrap::-webkit-scrollbar,
.team-table-wrap::-webkit-scrollbar,
.quest-admin-table-wrap::-webkit-scrollbar,
.quest-admin-compact-table-wrap::-webkit-scrollbar,
.quest-admin-browser-table-wrap::-webkit-scrollbar,
.quest-flat-table-shell::-webkit-scrollbar {
  width: 7px !important;
  height: 8px !important;
}

.admin-table-scroll::-webkit-scrollbar-thumb,
.admin-table-wrap::-webkit-scrollbar-thumb,
.profile-data-table-scroll::-webkit-scrollbar-thumb,
.profile-table-scroll::-webkit-scrollbar-thumb,
.quest-history-table-wrap::-webkit-scrollbar-thumb,
.spin-history-table-wrap::-webkit-scrollbar-thumb,
.team-table-wrap::-webkit-scrollbar-thumb,
.quest-admin-table-wrap::-webkit-scrollbar-thumb,
.quest-admin-compact-table-wrap::-webkit-scrollbar-thumb,
.quest-admin-browser-table-wrap::-webkit-scrollbar-thumb,
.quest-flat-table-shell::-webkit-scrollbar-thumb {
  background: rgba(210, 222, 240, 0.26) !important;
  border-radius: 4px !important;
}

.admin-table-scroll::-webkit-scrollbar-track,
.admin-table-wrap::-webkit-scrollbar-track,
.profile-data-table-scroll::-webkit-scrollbar-track,
.profile-table-scroll::-webkit-scrollbar-track,
.quest-history-table-wrap::-webkit-scrollbar-track,
.spin-history-table-wrap::-webkit-scrollbar-track,
.team-table-wrap::-webkit-scrollbar-track,
.quest-admin-table-wrap::-webkit-scrollbar-track,
.quest-admin-compact-table-wrap::-webkit-scrollbar-track,
.quest-admin-browser-table-wrap::-webkit-scrollbar-track,
.quest-flat-table-shell::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.03) !important;
}

.admin-status-table,
.admin-queue-table,
.admin-data-table,
.admin-history-table,
.profile-data-table,
.profile-payment-table,
.quest-history-table,
.spin-history-table,
.team-staff-table,
.team-roster-table,
.quest-admin-table,
.quest-admin-compact-table,
.quest-admin-browser-table,
.quest-flat-table {
  width: max-content !important;
  min-width: 100% !important;
  border-collapse: collapse !important;
  border-spacing: 0 !important;
  background: transparent !important;
  color: var(--ls-table-text) !important;
  scroll-behavior: auto !important;
}

.admin-status-table { min-width: 1180px !important; }
.admin-queue-table { min-width: 760px !important; }
.admin-search-results-table { min-width: 1080px !important; }
.admin-data-table,
.admin-history-table { min-width: 900px !important; }
.profile-data-table { min-width: 760px !important; }
.profile-payment-table { min-width: 850px !important; }
.quest-history-table { min-width: 900px !important; }
.spin-history-table { min-width: 780px !important; }
.team-staff-table,
.team-roster-table { min-width: 820px !important; }
.quest-admin-table { min-width: 920px !important; }
.quest-admin-compact-table { min-width: 1120px !important; }
.quest-admin-browser-table { min-width: 1280px !important; }

.admin-status-table thead th,
.admin-queue-table thead th,
.admin-data-table thead th,
.admin-history-table thead th,
.profile-data-table thead th,
.profile-payment-table thead th,
.quest-history-table thead th,
.spin-history-table thead th,
.team-staff-table thead th,
.team-roster-table thead th,
.quest-admin-table thead th,
.quest-admin-compact-table thead th,
.quest-admin-browser-table thead th,
.quest-flat-table thead th {
  position: sticky !important;
  top: 0 !important;
  z-index: 5 !important;
  height: 48px !important;
  padding: 0 16px !important;
  text-align: left !important;
  vertical-align: middle !important;
  color: rgba(177, 190, 211, 0.9) !important;
  background: linear-gradient(180deg, var(--ls-table-head-top), var(--ls-table-head-bottom)) !important;
  border-right: 0 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.085) !important;
  font-size: 0.64rem !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
}

.admin-status-table tbody td,
.admin-queue-table tbody td,
.admin-data-table tbody td,
.admin-history-table tbody td,
.profile-data-table tbody td,
.profile-payment-table tbody td,
.quest-history-table tbody td,
.spin-history-table tbody td,
.team-staff-table tbody td,
.team-roster-table tbody td,
.quest-admin-table tbody td,
.quest-admin-compact-table tbody td,
.quest-admin-browser-table tbody td,
.quest-flat-table tbody td {
  height: 78px !important;
  padding: 10px 16px !important;
  vertical-align: middle !important;
  color: var(--ls-table-text) !important;
  border-right: 0 !important;
  border-bottom: 1px solid var(--ls-table-row-border) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  transform: none !important;
  transition: none !important;
  animation: none !important;
  box-shadow: none !important;
  outline: 0 !important;
}

.admin-status-table tbody tr:nth-child(odd) td,
.admin-queue-table tbody tr:nth-child(odd) td,
.admin-data-table tbody tr:nth-child(odd) td,
.admin-history-table tbody tr:nth-child(odd) td,
.profile-data-table tbody tr:nth-child(odd) td,
.profile-payment-table tbody tr:nth-child(odd) td,
.quest-history-table tbody tr:nth-child(odd) td,
.spin-history-table tbody tr:nth-child(odd) td,
.team-staff-table tbody tr:nth-child(odd) td,
.team-roster-table tbody tr:nth-child(odd) td,
.quest-admin-table tbody tr:nth-child(odd) td,
.quest-admin-compact-table tbody tr:nth-child(odd) td,
.quest-admin-browser-table tbody tr:nth-child(odd) td,
.quest-flat-table tbody tr:nth-child(odd) td {
  background: var(--ls-table-row-a) !important;
}

.admin-status-table tbody tr:nth-child(even) td,
.admin-queue-table tbody tr:nth-child(even) td,
.admin-data-table tbody tr:nth-child(even) td,
.admin-history-table tbody tr:nth-child(even) td,
.profile-data-table tbody tr:nth-child(even) td,
.profile-payment-table tbody tr:nth-child(even) td,
.quest-history-table tbody tr:nth-child(even) td,
.spin-history-table tbody tr:nth-child(even) td,
.team-staff-table tbody tr:nth-child(even) td,
.team-roster-table tbody tr:nth-child(even) td,
.quest-admin-table tbody tr:nth-child(even) td,
.quest-admin-compact-table tbody tr:nth-child(even) td,
.quest-admin-browser-table tbody tr:nth-child(even) td,
.quest-flat-table tbody tr:nth-child(even) td {
  background: var(--ls-table-row-b) !important;
}

.admin-status-table tbody tr:hover td,
.admin-status-table tbody tr:active td,
.admin-status-table tbody tr:focus td,
.admin-status-table tbody tr:focus-within td,
.admin-queue-table tbody tr:hover td,
.admin-queue-table tbody tr:active td,
.admin-queue-table tbody tr:focus td,
.admin-queue-table tbody tr:focus-within td,
.admin-data-table tbody tr:hover td,
.admin-data-table tbody tr:active td,
.admin-data-table tbody tr:focus td,
.admin-data-table tbody tr:focus-within td,
.admin-history-table tbody tr:hover td,
.admin-history-table tbody tr:active td,
.admin-history-table tbody tr:focus td,
.admin-history-table tbody tr:focus-within td,
.profile-data-table tbody tr:hover td,
.profile-data-table tbody tr:active td,
.profile-data-table tbody tr:focus td,
.profile-data-table tbody tr:focus-within td,
.profile-payment-table tbody tr:hover td,
.profile-payment-table tbody tr:active td,
.profile-payment-table tbody tr:focus td,
.profile-payment-table tbody tr:focus-within td,
.quest-history-table tbody tr:hover td,
.quest-history-table tbody tr:active td,
.quest-history-table tbody tr:focus td,
.quest-history-table tbody tr:focus-within td,
.spin-history-table tbody tr:hover td,
.spin-history-table tbody tr:active td,
.spin-history-table tbody tr:focus td,
.spin-history-table tbody tr:focus-within td,
.team-staff-table tbody tr:hover td,
.team-staff-table tbody tr:active td,
.team-staff-table tbody tr:focus td,
.team-staff-table tbody tr:focus-within td,
.team-roster-table tbody tr:hover td,
.team-roster-table tbody tr:active td,
.team-roster-table tbody tr:focus td,
.team-roster-table tbody tr:focus-within td,
.quest-admin-table tbody tr:hover td,
.quest-admin-table tbody tr:active td,
.quest-admin-table tbody tr:focus td,
.quest-admin-table tbody tr:focus-within td,
.quest-admin-compact-table tbody tr:hover td,
.quest-admin-compact-table tbody tr:active td,
.quest-admin-compact-table tbody tr:focus td,
.quest-admin-compact-table tbody tr:focus-within td,
.quest-admin-browser-table tbody tr:hover td,
.quest-admin-browser-table tbody tr:active td,
.quest-admin-browser-table tbody tr:focus td,
.quest-admin-browser-table tbody tr:focus-within td,
.quest-flat-table tbody tr:hover td,
.quest-flat-table tbody tr:active td,
.quest-flat-table tbody tr:focus td,
.quest-flat-table tbody tr:focus-within td {
  transform: none !important;
  transition: none !important;
  animation: none !important;
  box-shadow: none !important;
  outline: 0 !important;
  filter: none !important;
}

.admin-status-table tbody tr:nth-child(odd):hover td,
.admin-status-table tbody tr:nth-child(odd):active td,
.admin-status-table tbody tr:nth-child(odd):focus-within td,
.admin-queue-table tbody tr:nth-child(odd):hover td,
.admin-queue-table tbody tr:nth-child(odd):active td,
.admin-queue-table tbody tr:nth-child(odd):focus-within td,
.admin-data-table tbody tr:nth-child(odd):hover td,
.admin-data-table tbody tr:nth-child(odd):active td,
.admin-data-table tbody tr:nth-child(odd):focus-within td,
.admin-history-table tbody tr:nth-child(odd):hover td,
.admin-history-table tbody tr:nth-child(odd):active td,
.admin-history-table tbody tr:nth-child(odd):focus-within td,
.profile-data-table tbody tr:nth-child(odd):hover td,
.profile-data-table tbody tr:nth-child(odd):active td,
.profile-data-table tbody tr:nth-child(odd):focus-within td,
.profile-payment-table tbody tr:nth-child(odd):hover td,
.profile-payment-table tbody tr:nth-child(odd):active td,
.profile-payment-table tbody tr:nth-child(odd):focus-within td,
.quest-history-table tbody tr:nth-child(odd):hover td,
.quest-history-table tbody tr:nth-child(odd):active td,
.quest-history-table tbody tr:nth-child(odd):focus-within td,
.spin-history-table tbody tr:nth-child(odd):hover td,
.spin-history-table tbody tr:nth-child(odd):active td,
.spin-history-table tbody tr:nth-child(odd):focus-within td,
.team-staff-table tbody tr:nth-child(odd):hover td,
.team-staff-table tbody tr:nth-child(odd):active td,
.team-staff-table tbody tr:nth-child(odd):focus-within td,
.team-roster-table tbody tr:nth-child(odd):hover td,
.team-roster-table tbody tr:nth-child(odd):active td,
.team-roster-table tbody tr:nth-child(odd):focus-within td,
.quest-admin-table tbody tr:nth-child(odd):hover td,
.quest-admin-table tbody tr:nth-child(odd):active td,
.quest-admin-table tbody tr:nth-child(odd):focus-within td,
.quest-admin-compact-table tbody tr:nth-child(odd):hover td,
.quest-admin-compact-table tbody tr:nth-child(odd):active td,
.quest-admin-compact-table tbody tr:nth-child(odd):focus-within td,
.quest-admin-browser-table tbody tr:nth-child(odd):hover td,
.quest-admin-browser-table tbody tr:nth-child(odd):active td,
.quest-admin-browser-table tbody tr:nth-child(odd):focus-within td,
.quest-flat-table tbody tr:nth-child(odd):hover td,
.quest-flat-table tbody tr:nth-child(odd):active td,
.quest-flat-table tbody tr:nth-child(odd):focus-within td {
  background: var(--ls-table-row-a) !important;
}

.admin-status-table tbody tr:nth-child(even):hover td,
.admin-status-table tbody tr:nth-child(even):active td,
.admin-status-table tbody tr:nth-child(even):focus-within td,
.admin-queue-table tbody tr:nth-child(even):hover td,
.admin-queue-table tbody tr:nth-child(even):active td,
.admin-queue-table tbody tr:nth-child(even):focus-within td,
.admin-data-table tbody tr:nth-child(even):hover td,
.admin-data-table tbody tr:nth-child(even):active td,
.admin-data-table tbody tr:nth-child(even):focus-within td,
.admin-history-table tbody tr:nth-child(even):hover td,
.admin-history-table tbody tr:nth-child(even):active td,
.admin-history-table tbody tr:nth-child(even):focus-within td,
.profile-data-table tbody tr:nth-child(even):hover td,
.profile-data-table tbody tr:nth-child(even):active td,
.profile-data-table tbody tr:nth-child(even):focus-within td,
.profile-payment-table tbody tr:nth-child(even):hover td,
.profile-payment-table tbody tr:nth-child(even):active td,
.profile-payment-table tbody tr:nth-child(even):focus-within td,
.quest-history-table tbody tr:nth-child(even):hover td,
.quest-history-table tbody tr:nth-child(even):active td,
.quest-history-table tbody tr:nth-child(even):focus-within td,
.spin-history-table tbody tr:nth-child(even):hover td,
.spin-history-table tbody tr:nth-child(even):active td,
.spin-history-table tbody tr:nth-child(even):focus-within td,
.team-staff-table tbody tr:nth-child(even):hover td,
.team-staff-table tbody tr:nth-child(even):active td,
.team-staff-table tbody tr:nth-child(even):focus-within td,
.team-roster-table tbody tr:nth-child(even):hover td,
.team-roster-table tbody tr:nth-child(even):active td,
.team-roster-table tbody tr:nth-child(even):focus-within td,
.quest-admin-table tbody tr:nth-child(even):hover td,
.quest-admin-table tbody tr:nth-child(even):active td,
.quest-admin-table tbody tr:nth-child(even):focus-within td,
.quest-admin-compact-table tbody tr:nth-child(even):hover td,
.quest-admin-compact-table tbody tr:nth-child(even):active td,
.quest-admin-compact-table tbody tr:nth-child(even):focus-within td,
.quest-admin-browser-table tbody tr:nth-child(even):hover td,
.quest-admin-browser-table tbody tr:nth-child(even):active td,
.quest-admin-browser-table tbody tr:nth-child(even):focus-within td,
.quest-flat-table tbody tr:nth-child(even):hover td,
.quest-flat-table tbody tr:nth-child(even):active td,
.quest-flat-table tbody tr:nth-child(even):focus-within td {
  background: var(--ls-table-row-b) !important;
}

.admin-status-table td strong,
.admin-queue-table td strong,
.admin-data-table td strong,
.admin-history-table td strong,
.profile-data-table td strong,
.profile-payment-table td strong,
.quest-history-table td strong,
.spin-history-table td strong,
.team-staff-table td strong,
.team-roster-table td strong,
.quest-admin-table td strong,
.quest-admin-compact-table td strong,
.quest-admin-browser-table td strong,
.quest-flat-table td strong,
.admin-status-table td b,
.admin-queue-table td b,
.admin-data-table td b,
.admin-history-table td b,
.profile-data-table td b,
.profile-payment-table td b,
.quest-history-table td b,
.spin-history-table td b,
.team-staff-table td b,
.team-roster-table td b,
.quest-admin-table td b,
.quest-admin-compact-table td b,
.quest-admin-browser-table td b,
.quest-flat-table td b {
  color: var(--ls-table-text) !important;
  font-size: 0.88rem !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
  line-height: 1.15 !important;
}

.admin-status-table td small,
.admin-queue-table td small,
.admin-data-table td small,
.admin-history-table td small,
.profile-data-table td small,
.profile-payment-table td small,
.quest-history-table td small,
.spin-history-table td small,
.team-staff-table td small,
.team-roster-table td small,
.quest-admin-table td small,
.quest-admin-compact-table td small,
.quest-admin-browser-table td small,
.quest-flat-table td small,
.admin-table-subline,
.quest-flat-meta,
.quest-admin-table-subline {
  color: var(--ls-table-muted) !important;
  font-size: 0.73rem !important;
  font-weight: 500 !important;
  line-height: 1.2 !important;
}

.admin-table-empty,
.profile-table-empty,
.quest-table-empty,
.spin-table-empty {
  height: 92px !important;
  text-align: center !important;
  color: var(--ls-table-muted) !important;
  font-weight: 500 !important;
  background: rgba(255, 255, 255, 0.012) !important;
}

.admin-table-scroll .admin-avatar-small,
.admin-table-scroll .admin-avatar.admin-avatar-small,
.team-table-wrap .team-table-avatar,
.quest-admin-avatar-mini,
.quest-flat-avatar {
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  border-radius: 4px !important;
  overflow: hidden !important;
}

.admin-table-scroll .admin-avatar-small img,
.team-table-wrap .team-table-avatar img,
.quest-admin-avatar-mini img,
.quest-flat-avatar img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

.admin-table-scroll .admin-table-link,
.admin-table-scroll .admin-table-delete-button,
.admin-table-wrap .admin-table-link,
.admin-table-wrap .admin-table-delete-button,
.team-table-wrap .admin-table-link,
.profile-table-actions .button,
.profile-payment-table button,
.quest-flat-open,
.quest-admin-open-button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 70px !important;
  height: 34px !important;
  padding: 0 12px !important;
  margin: 0 !important;
  border-radius: 5px !important;
  border: 1px solid rgba(219, 231, 247, 0.16) !important;
  background: rgba(255, 255, 255, 0.045) !important;
  color: rgba(235, 243, 255, 0.96) !important;
  font-size: 0.74rem !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  box-shadow: none !important;
  outline: 0 !important;
  filter: none !important;
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
  animation: none !important;
  text-decoration: none !important;
  text-align: center !important;
  white-space: nowrap !important;
  cursor: pointer !important;
  touch-action: manipulation !important;
}

.admin-table-scroll .admin-table-link:hover,
.admin-table-scroll .admin-table-link:active,
.admin-table-scroll .admin-table-link:focus,
.admin-table-scroll .admin-table-delete-button:hover,
.admin-table-scroll .admin-table-delete-button:active,
.admin-table-scroll .admin-table-delete-button:focus,
.admin-table-wrap .admin-table-link:hover,
.admin-table-wrap .admin-table-link:active,
.admin-table-wrap .admin-table-link:focus,
.admin-table-wrap .admin-table-delete-button:hover,
.admin-table-wrap .admin-table-delete-button:active,
.admin-table-wrap .admin-table-delete-button:focus,
.team-table-wrap .admin-table-link:hover,
.team-table-wrap .admin-table-link:active,
.team-table-wrap .admin-table-link:focus,
.profile-payment-table button:hover,
.profile-payment-table button:active,
.profile-payment-table button:focus,
.quest-flat-open:hover,
.quest-flat-open:active,
.quest-flat-open:focus,
.quest-admin-open-button:hover,
.quest-admin-open-button:active,
.quest-admin-open-button:focus {
  background: rgba(255, 255, 255, 0.045) !important;
  color: rgba(235, 243, 255, 0.96) !important;
  border-color: rgba(219, 231, 247, 0.16) !important;
  box-shadow: none !important;
  outline: 0 !important;
  transform: none !important;
  transition: none !important;
  animation: none !important;
}

.admin-table-scroll .admin-table-delete-button,
.admin-table-wrap .admin-table-delete-button {
  border-color: rgba(248, 113, 113, 0.25) !important;
  background: rgba(248, 113, 113, 0.08) !important;
  color: #ffd0d0 !important;
}

.admin-table-status,
.quest-flat-status,
.profile-payment-status,
.admin-payment-paid,
.admin-payment-pending,
.admin-history-neutral {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 28px !important;
  max-width: 100% !important;
  padding: 0 9px !important;
  border-radius: 5px !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  background: rgba(255, 255, 255, 0.055) !important;
  color: rgba(235, 243, 255, 0.96) !important;
  font-size: 0.62rem !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  transform: none !important;
  transition: none !important;
  animation: none !important;
}

@media (max-width: 720px) {
  .admin-table-scroll,
  .admin-table-wrap,
  .profile-data-table-scroll,
  .profile-table-scroll,
  .quest-history-table-wrap,
  .spin-history-table-wrap,
  .team-table-wrap,
  .quest-admin-table-wrap,
  .quest-admin-compact-table-wrap,
  .quest-admin-browser-table-wrap,
  .quest-flat-table-shell {
    max-height: 560px !important;
  }

  .admin-status-table { min-width: 1120px !important; }
  .admin-queue-table { min-width: 720px !important; }
  .admin-search-results-table { min-width: 1040px !important; }
  .admin-data-table,
  .admin-history-table { min-width: 860px !important; }
  .profile-data-table { min-width: 720px !important; }
  .profile-payment-table { min-width: 800px !important; }
  .quest-history-table { min-width: 860px !important; }
  .spin-history-table { min-width: 740px !important; }
  .team-staff-table,
  .team-roster-table { min-width: 780px !important; }

  .admin-status-table thead th,
  .admin-queue-table thead th,
  .admin-data-table thead th,
  .admin-history-table thead th,
  .profile-data-table thead th,
  .profile-payment-table thead th,
  .quest-history-table thead th,
  .spin-history-table thead th,
  .team-staff-table thead th,
  .team-roster-table thead th,
  .quest-admin-table thead th,
  .quest-admin-compact-table thead th,
  .quest-admin-browser-table thead th,
  .quest-flat-table thead th {
    height: 46px !important;
    padding: 0 14px !important;
    font-size: 0.6rem !important;
    letter-spacing: 0.14em !important;
  }

  .admin-status-table tbody td,
  .admin-queue-table tbody td,
  .admin-data-table tbody td,
  .admin-history-table tbody td,
  .profile-data-table tbody td,
  .profile-payment-table tbody td,
  .quest-history-table tbody td,
  .spin-history-table tbody td,
  .team-staff-table tbody td,
  .team-roster-table tbody td,
  .quest-admin-table tbody td,
  .quest-admin-compact-table tbody td,
  .quest-admin-browser-table tbody td,
  .quest-flat-table tbody td {
    height: 76px !important;
    padding: 10px 14px !important;
  }
}

/* =========================================================
   V85 — TABLEAUX PRO SANS ARTEFACTS
   Un seul header continu, aucun coin arrondi entre colonnes,
   aucun overscroll visuel vide autour des tableaux.
========================================================= */
.admin-table-scroll,
.admin-table-wrap,
.profile-data-table-scroll,
.profile-table-scroll,
.quest-history-table-wrap,
.spin-history-table-wrap,
.team-table-wrap,
.quest-admin-table-wrap,
.quest-admin-compact-table-wrap,
.quest-admin-browser-table-wrap,
.quest-flat-table-shell {
  position: relative !important;
  isolation: isolate !important;
  contain: paint !important;
  overflow: auto !important;
  overscroll-behavior: none !important;
  overscroll-behavior-x: none !important;
  overscroll-behavior-y: none !important;
  -webkit-overflow-scrolling: auto !important;
  scroll-behavior: auto !important;
  scrollbar-gutter: auto !important;
  background-clip: padding-box !important;
  clip-path: inset(0 round 5px) !important;
}

.admin-status-table,
.admin-queue-table,
.admin-data-table,
.admin-history-table,
.profile-data-table,
.profile-payment-table,
.quest-history-table,
.spin-history-table,
.team-staff-table,
.team-roster-table,
.quest-admin-table,
.quest-admin-compact-table,
.quest-admin-browser-table,
.quest-flat-table {
  margin: 0 !important;
  border-collapse: collapse !important;
  border-spacing: 0 !important;
  border-radius: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  transform: none !important;
  transition: none !important;
  animation: none !important;
}

.admin-status-table thead,
.admin-queue-table thead,
.admin-data-table thead,
.admin-history-table thead,
.profile-data-table thead,
.profile-payment-table thead,
.quest-history-table thead,
.spin-history-table thead,
.team-staff-table thead,
.team-roster-table thead,
.quest-admin-table thead,
.quest-admin-compact-table thead,
.quest-admin-browser-table thead,
.quest-flat-table thead,
.admin-status-table thead tr,
.admin-queue-table thead tr,
.admin-data-table thead tr,
.admin-history-table thead tr,
.profile-data-table thead tr,
.profile-payment-table thead tr,
.quest-history-table thead tr,
.spin-history-table thead tr,
.team-staff-table thead tr,
.team-roster-table thead tr,
.quest-admin-table thead tr,
.quest-admin-compact-table thead tr,
.quest-admin-browser-table thead tr,
.quest-flat-table thead tr {
  border-radius: 0 !important;
  overflow: visible !important;
  background: linear-gradient(180deg, var(--ls-table-head-top), var(--ls-table-head-bottom)) !important;
  box-shadow: none !important;
}

.admin-status-table thead th,
.admin-queue-table thead th,
.admin-data-table thead th,
.admin-history-table thead th,
.profile-data-table thead th,
.profile-payment-table thead th,
.quest-history-table thead th,
.spin-history-table thead th,
.team-staff-table thead th,
.team-roster-table thead th,
.quest-admin-table thead th,
.quest-admin-compact-table thead th,
.quest-admin-browser-table thead th,
.quest-flat-table thead th {
  border-radius: 0 !important;
  border-top-left-radius: 0 !important;
  border-top-right-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  border-right: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  background: linear-gradient(180deg, var(--ls-table-head-top), var(--ls-table-head-bottom)) !important;
  background-clip: border-box !important;
  overflow: hidden !important;
}

.admin-status-table thead th:first-child,
.admin-queue-table thead th:first-child,
.admin-data-table thead th:first-child,
.admin-history-table thead th:first-child,
.profile-data-table thead th:first-child,
.profile-payment-table thead th:first-child,
.quest-history-table thead th:first-child,
.spin-history-table thead th:first-child,
.team-staff-table thead th:first-child,
.team-roster-table thead th:first-child,
.quest-admin-table thead th:first-child,
.quest-admin-compact-table thead th:first-child,
.quest-admin-browser-table thead th:first-child,
.quest-flat-table thead th:first-child,
.admin-status-table thead th:last-child,
.admin-queue-table thead th:last-child,
.admin-data-table thead th:last-child,
.admin-history-table thead th:last-child,
.profile-data-table thead th:last-child,
.profile-payment-table thead th:last-child,
.quest-history-table thead th:last-child,
.spin-history-table thead th:last-child,
.team-staff-table thead th:last-child,
.team-roster-table thead th:last-child,
.quest-admin-table thead th:last-child,
.quest-admin-compact-table thead th:last-child,
.quest-admin-browser-table thead th:last-child,
.quest-flat-table thead th:last-child {
  border-radius: 0 !important;
}

.admin-status-table tbody td,
.admin-queue-table tbody td,
.admin-data-table tbody td,
.admin-history-table tbody td,
.profile-data-table tbody td,
.profile-payment-table tbody td,
.quest-history-table tbody td,
.spin-history-table tbody td,
.team-staff-table tbody td,
.team-roster-table tbody td,
.quest-admin-table tbody td,
.quest-admin-compact-table tbody td,
.quest-admin-browser-table tbody td,
.quest-flat-table tbody td {
  border-right: 0 !important;
  border-left: 0 !important;
  border-radius: 0 !important;
  background-clip: border-box !important;
}

.admin-status-table tr,
.admin-queue-table tr,
.admin-data-table tr,
.admin-history-table tr,
.profile-data-table tr,
.profile-payment-table tr,
.quest-history-table tr,
.spin-history-table tr,
.team-staff-table tr,
.team-roster-table tr,
.quest-admin-table tr,
.quest-admin-compact-table tr,
.quest-admin-browser-table tr,
.quest-flat-table tr {
  border-radius: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
}

@supports (-webkit-touch-callout: none) {
  .admin-table-scroll,
  .admin-table-wrap,
  .profile-data-table-scroll,
  .profile-table-scroll,
  .quest-history-table-wrap,
  .spin-history-table-wrap,
  .team-table-wrap,
  .quest-admin-table-wrap,
  .quest-admin-compact-table-wrap,
  .quest-admin-browser-table-wrap,
  .quest-flat-table-shell {
    -webkit-overflow-scrolling: auto !important;
  }
}

/* =========================================================
   V86 — TEAM TABLES ALIGNÉES AU MODÈLE GLOBAL
   Même respiration avatar/texte que les tableaux admin :
   avatar jamais collé au pseudo, colonnes lisibles, lignes stables.
========================================================= */
html body.ls-app-page .team-page .team-table-wrap .team-table-identity {
  display: grid !important;
  grid-template-columns: 48px minmax(180px, 1fr) !important;
  align-items: center !important;
  column-gap: 18px !important;
  row-gap: 0 !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  color: inherit !important;
  text-decoration: none !important;
  transform: none !important;
  transition: none !important;
  animation: none !important;
  outline: 0 !important;
  box-shadow: none !important;
}

html body.ls-app-page .team-page .team-table-wrap .team-table-avatar {
  width: 46px !important;
  height: 46px !important;
  min-width: 46px !important;
  max-width: 46px !important;
  justify-self: start !important;
  flex: 0 0 46px !important;
  margin: 0 !important;
}

html body.ls-app-page .team-page .team-table-wrap .team-table-identity > span:last-child {
  display: block !important;
  min-width: 0 !important;
  max-width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
}

html body.ls-app-page .team-page .team-table-wrap .team-table-identity strong,
html body.ls-app-page .team-page .team-table-wrap .team-table-identity small {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  transform: none !important;
  transition: none !important;
  animation: none !important;
}

html body.ls-app-page .team-page .team-table-wrap .team-table-identity strong {
  font-size: 0.88rem !important;
  font-weight: 600 !important;
  line-height: 1.18 !important;
  letter-spacing: -0.015em !important;
}

html body.ls-app-page .team-page .team-table-wrap .team-table-identity small {
  margin-top: 3px !important;
  font-size: 0.73rem !important;
  font-weight: 500 !important;
  line-height: 1.2 !important;
}

/* Colonnes team : assez de place pour avatar + pseudo, sans coller au reste. */
html body.ls-app-page .team-page .team-staff-table {
  min-width: 1040px !important;
  table-layout: fixed !important;
}

html body.ls-app-page .team-page .team-roster-table {
  min-width: 860px !important;
  table-layout: fixed !important;
}

html body.ls-app-page .team-page .team-staff-table th:nth-child(1),
html body.ls-app-page .team-page .team-staff-table td:nth-child(1) {
  width: 320px !important;
  min-width: 320px !important;
  max-width: 320px !important;
}

html body.ls-app-page .team-page .team-roster-table th:nth-child(1),
html body.ls-app-page .team-page .team-roster-table td:nth-child(1),
html body.ls-app-page .team-page .team-roster-table .team-col-identity {
  width: 315px !important;
  min-width: 315px !important;
  max-width: 315px !important;
}

html body.ls-app-page .team-page .team-roster-table th:nth-child(2),
html body.ls-app-page .team-page .team-roster-table td:nth-child(2) {
  width: 220px !important;
  min-width: 220px !important;
  max-width: 220px !important;
}

html body.ls-app-page .team-page .team-roster-table th:nth-child(3),
html body.ls-app-page .team-page .team-roster-table td:nth-child(3) {
  width: 170px !important;
  min-width: 170px !important;
  max-width: 170px !important;
}

html body.ls-app-page .team-page .team-roster-table th:nth-child(4),
html body.ls-app-page .team-page .team-roster-table td:nth-child(4) {
  width: 118px !important;
  min-width: 118px !important;
  max-width: 118px !important;
  text-align: right !important;
}

/* Les lignes team gardent exactement le même état visuel, même au toucher. */
html body.ls-app-page .team-page .team-table-wrap tr:hover td,
html body.ls-app-page .team-page .team-table-wrap tr:active td,
html body.ls-app-page .team-page .team-table-wrap tr:focus td,
html body.ls-app-page .team-page .team-table-wrap tr:focus-within td,
html body.ls-app-page .team-page .team-table-wrap a:hover,
html body.ls-app-page .team-page .team-table-wrap a:active,
html body.ls-app-page .team-page .team-table-wrap a:focus {
  transform: none !important;
  transition: none !important;
  animation: none !important;
  box-shadow: none !important;
  outline: 0 !important;
  filter: none !important;
}

@media (max-width: 720px) {
  html body.ls-app-page .team-page .team-table-wrap .team-table-identity {
    grid-template-columns: 46px minmax(175px, 1fr) !important;
    column-gap: 18px !important;
  }

  html body.ls-app-page .team-page .team-table-wrap .team-table-avatar {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    max-width: 44px !important;
    flex-basis: 44px !important;
  }

  html body.ls-app-page .team-page .team-staff-table {
    min-width: 1000px !important;
  }

  html body.ls-app-page .team-page .team-roster-table {
    min-width: 840px !important;
  }

  html body.ls-app-page .team-page .team-staff-table th:nth-child(1),
  html body.ls-app-page .team-page .team-staff-table td:nth-child(1) {
    width: 310px !important;
    min-width: 310px !important;
    max-width: 310px !important;
  }

  html body.ls-app-page .team-page .team-roster-table th:nth-child(1),
  html body.ls-app-page .team-page .team-roster-table td:nth-child(1),
  html body.ls-app-page .team-page .team-roster-table .team-col-identity {
    width: 305px !important;
    min-width: 305px !important;
    max-width: 305px !important;
  }
}

/* =========================================================
   V95 — TABLEAUX / PAIEMENTS UNIFORMES SITEWIDE
   - Même largeur/hauteur pour PAYÉ, NON PAYÉ et les boutons de table.
   - États de paiement colorés partout de la même façon.
   - Aucun effet visuel au toucher/clic dans les lignes.
========================================================= */
html body.ls-app-page .admin-table-status.admin-payment-pending,
html body.ls-app-page .admin-table-status.admin-payment-paid,
html body.ls-app-page .profile-payment-status.profile-payment-status-unpaid,
html body.ls-app-page .profile-payment-status.profile-payment-status-paid,
html body.ls-app-page .payment-calendar-payment-status.payment-calendar-status-unpaid,
html body.ls-app-page .payment-calendar-payment-status.payment-calendar-status-paid,
html body.ls-app-page .team-history-card .admin-table-status.admin-payment-pending,
html body.ls-app-page .team-history-card .admin-table-status.admin-payment-paid {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 94px !important;
  min-height: 34px !important;
  padding: 0 12px !important;
  border-radius: 7px !important;
  border: 1px solid transparent !important;
  font-family: Montserrat, Inter, sans-serif !important;
  font-size: 0.72rem !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  letter-spacing: 0.055em !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
  transform: none !important;
  transition: none !important;
  animation: none !important;
}

html body.ls-app-page .admin-table-status.admin-payment-pending,
html body.ls-app-page .profile-payment-status.profile-payment-status-unpaid,
html body.ls-app-page .payment-calendar-payment-status.payment-calendar-status-unpaid,
html body.ls-app-page .team-history-card .admin-table-status.admin-payment-pending {
  color: #ffd5d5 !important;
  background: rgba(248, 113, 113, 0.12) !important;
  border-color: rgba(248, 113, 113, 0.30) !important;
}

html body.ls-app-page .admin-table-status.admin-payment-paid,
html body.ls-app-page .profile-payment-status.profile-payment-status-paid,
html body.ls-app-page .payment-calendar-payment-status.payment-calendar-status-paid,
html body.ls-app-page .team-history-card .admin-table-status.admin-payment-paid {
  color: #d9ffe8 !important;
  background: rgba(34, 197, 94, 0.13) !important;
  border-color: rgba(34, 197, 94, 0.31) !important;
}

html body.ls-app-page .admin-table-scroll .admin-table-button,
html body.ls-app-page .admin-table-wrap .admin-table-button,
html body.ls-app-page .admin-table-scroll .admin-table-link,
html body.ls-app-page .admin-table-wrap .admin-table-link,
html body.ls-app-page .admin-table-scroll .admin-table-delete-button,
html body.ls-app-page .admin-table-wrap .admin-table-delete-button,
html body.ls-app-page .quest-flat-table-shell .quest-flat-open,
html body.ls-app-page .quest-flat-table-shell .payment-calendar-gold-button,
html body.ls-app-page .quest-flat-table-shell .payment-calendar-danger-button,
html body.ls-app-page .payment-calendar-table-shell .payment-calendar-gold-button,
html body.ls-app-page .payment-calendar-table-shell .payment-calendar-danger-button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 36px !important;
  padding: 0 13px !important;
  border-radius: 7px !important;
  font-family: Montserrat, Inter, sans-serif !important;
  font-size: 0.75rem !important;
  font-weight: 850 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  transform: none !important;
  transition: none !important;
  animation: none !important;
}

html body.ls-app-page .admin-paid-creator-button {
  min-height: 36px !important;
  padding-inline: 14px !important;
  letter-spacing: 0.01em !important;
}

html body.ls-app-page .admin-table-scroll tr:hover td,
html body.ls-app-page .admin-table-scroll tr:active td,
html body.ls-app-page .admin-table-scroll tr:focus-within td,
html body.ls-app-page .admin-table-wrap tr:hover td,
html body.ls-app-page .admin-table-wrap tr:active td,
html body.ls-app-page .admin-table-wrap tr:focus-within td,
html body.ls-app-page .quest-flat-table-shell tr:hover td,
html body.ls-app-page .quest-flat-table-shell tr:active td,
html body.ls-app-page .quest-flat-table-shell tr:focus-within td {
  transform: none !important;
  transition: none !important;
  animation: none !important;
  box-shadow: none !important;
  filter: none !important;
}

/* Calendrier paiements : colonnes compactes et cohérentes avec les autres tableaux. */
html body.ls-app-page.payment-calendar-body .payment-calendar-current-table {
  min-width: 720px !important;
  table-layout: fixed !important;
}

html body.ls-app-page.payment-calendar-body .payment-calendar-current-table th:nth-child(1),
html body.ls-app-page.payment-calendar-body .payment-calendar-current-table td:nth-child(1) {
  width: 270px !important;
  min-width: 270px !important;
  max-width: 270px !important;
}

html body.ls-app-page.payment-calendar-body .payment-calendar-current-table th:nth-child(2),
html body.ls-app-page.payment-calendar-body .payment-calendar-current-table td:nth-child(2) {
  width: 200px !important;
  min-width: 200px !important;
  max-width: 200px !important;
}

html body.ls-app-page.payment-calendar-body .payment-calendar-current-table th:nth-child(3),
html body.ls-app-page.payment-calendar-body .payment-calendar-current-table td:nth-child(3) {
  width: 125px !important;
  min-width: 125px !important;
  max-width: 125px !important;
}

html body.ls-app-page.payment-calendar-body .payment-calendar-current-table th:nth-child(4),
html body.ls-app-page.payment-calendar-body .payment-calendar-current-table td:nth-child(4) {
  width: 125px !important;
  min-width: 125px !important;
  max-width: 125px !important;
  text-align: right !important;
}

html body.ls-app-page.payment-calendar-body .payment-calendar-current-table .payment-calendar-user-cell,
html body.ls-app-page.payment-calendar-body .payment-calendar-registrations-table .payment-calendar-user-cell {
  display: grid !important;
  grid-template-columns: 46px minmax(0, 1fr) !important;
  column-gap: 18px !important;
  align-items: center !important;
  min-width: 0 !important;
  max-width: 100% !important;
}

html body.ls-app-page.payment-calendar-body .payment-calendar-current-table .quest-flat-avatar,
html body.ls-app-page.payment-calendar-body .payment-calendar-registrations-table .quest-flat-avatar {
  width: 46px !important;
  height: 46px !important;
  min-width: 46px !important;
  max-width: 46px !important;
}

html body.ls-app-page.payment-calendar-body .payment-calendar-current-table td,
html body.ls-app-page.payment-calendar-body .payment-calendar-registrations-table td,
html body.ls-app-page.payment-calendar-body .payment-calendar-slots-table td {
  vertical-align: middle !important;
}

@media (max-width: 720px) {
  html body.ls-app-page.payment-calendar-body .payment-calendar-current-table {
    min-width: 690px !important;
  }

  html body.ls-app-page.payment-calendar-body .payment-calendar-current-table th:nth-child(1),
  html body.ls-app-page.payment-calendar-body .payment-calendar-current-table td:nth-child(1) {
    width: 255px !important;
    min-width: 255px !important;
    max-width: 255px !important;
  }

  html body.ls-app-page.payment-calendar-body .payment-calendar-current-table th:nth-child(2),
  html body.ls-app-page.payment-calendar-body .payment-calendar-current-table td:nth-child(2) {
    width: 190px !important;
    min-width: 190px !important;
    max-width: 190px !important;
  }

  html body.ls-app-page.payment-calendar-body .payment-calendar-current-table th:nth-child(3),
  html body.ls-app-page.payment-calendar-body .payment-calendar-current-table td:nth-child(3),
  html body.ls-app-page.payment-calendar-body .payment-calendar-current-table th:nth-child(4),
  html body.ls-app-page.payment-calendar-body .payment-calendar-current-table td:nth-child(4) {
    width: 122px !important;
    min-width: 122px !important;
    max-width: 122px !important;
  }

  html body.ls-app-page.payment-calendar-body .payment-calendar-current-table .payment-calendar-user-cell,
  html body.ls-app-page.payment-calendar-body .payment-calendar-registrations-table .payment-calendar-user-cell {
    grid-template-columns: 44px minmax(0, 1fr) !important;
    column-gap: 16px !important;
  }

  html body.ls-app-page.payment-calendar-body .payment-calendar-current-table .quest-flat-avatar,
  html body.ls-app-page.payment-calendar-body .payment-calendar-registrations-table .quest-flat-avatar {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    max-width: 44px !important;
  }
}

/* Unified LiveSea login-required state */
html body.ls-app-page .ls-connection-required-section {
  width: 100%;
  padding: clamp(86px, 13vw, 132px) 0 clamp(96px, 16vw, 180px);
}

html body.ls-app-page .ls-connection-required-section .container {
  width: min(100% - 36px, 1160px);
  margin-inline: auto;
}

html body.ls-app-page .ls-connection-required-card {
  width: 100%;
  background:
    linear-gradient(180deg, rgba(22, 26, 34, 0.86), rgba(15, 18, 24, 0.94)),
    radial-gradient(circle at 0% 0%, rgba(210, 218, 232, 0.07), transparent 38%);
  border: 1px solid rgba(185, 194, 213, 0.14);
  border-radius: 4px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.035),
    0 30px 80px rgba(0, 0, 0, 0.22);
  padding: clamp(28px, 5.2vw, 48px);
}

html body.ls-app-page .ls-connection-required-text {
  margin: 0 0 clamp(22px, 4.8vw, 34px);
  max-width: 820px;
  color: rgba(222, 227, 238, 0.76);
  font-family: 'Montserrat', 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: clamp(20px, 4.4vw, 34px);
  font-weight: 500;
  line-height: 1.55;
  letter-spacing: -0.03em;
}

html body.ls-app-page .ls-connection-required-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: clamp(62px, 10vw, 78px);
  padding: 16px 28px;
  border: 1px solid rgba(230, 236, 247, 0.48);
  border-radius: 6px;
  background: linear-gradient(135deg, #d9e0ea 0%, #b7c0cf 100%);
  color: #0e1219;
  font-family: 'Montserrat', 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: clamp(18px, 4vw, 30px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.035em;
  text-decoration: none;
  text-align: center;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.42), 0 18px 38px rgba(0, 0, 0, 0.2);
  transition: transform 180ms ease, border-color 180ms ease, filter 180ms ease;
}

html body.ls-app-page .ls-connection-required-button:hover,
html body.ls-app-page .ls-connection-required-button:focus-visible {
  border-color: rgba(255, 255, 255, 0.72);
  color: #0e1219;
  filter: brightness(1.04);
  transform: translateY(-1px);
  text-decoration: none;
}

@media (max-width: 640px) {
  html body.ls-app-page .ls-connection-required-section {
    padding: 86px 0 112px;
  }

  html body.ls-app-page .ls-connection-required-section .container {
    width: min(100% - 34px, 1160px);
  }

  html body.ls-app-page .ls-connection-required-card {
    border-radius: 8px;
    padding: 30px;
  }

  html body.ls-app-page .ls-connection-required-text {
    font-size: 24px;
    line-height: 1.6;
  }

  html body.ls-app-page .ls-connection-required-button {
    min-height: 64px;
    font-size: 20px;
  }
}

/* =========================================================
   Performance pass 2026-05: rendering containment and low-cost scrolling
   Keeps visual design intact; limits paint/reflow work on heavy app pages.
========================================================= */
:where(.admin-table-scroll, .admin-table-wrap, .profile-data-table-scroll, .profile-table-scroll, .quest-history-table-wrap, .spin-history-table-wrap, .team-table-wrap, .quest-admin-table-wrap, .quest-admin-compact-table-wrap, .quest-admin-browser-table-wrap, .quest-flat-table-shell) {
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  contain: paint;
}

:where(.nav-profile-dropdown, .mobile-menu, .mobile-menu-inner) {
  contain: paint;
}


@media (prefers-reduced-motion: reduce), (update: slow) {
  :where(.ticker-track, .hero-badge-dot) {
    animation: none !important;
  }

  :where(.top-nav, .mobile-menu, .mobile-menu-link, .nav-profile-dropdown, .side-track-fill, .side-dot) {
    transition-duration: 0.01ms !important;
  }
}

/* =========================================================
   Desktop hardening — private header avatar
   ---------------------------------------------------------
   Prevents the Discord/profile picture from expanding on
   desktop navigation while keeping the mobile menu untouched.
========================================================= */
@media (min-width: 901px) {
  html body.ls-app-page .top-nav .nav-profile-menu,
  html body.ls-app-page .top-nav .nav-links > .nav-profile-menu {
    display: flex !important;
    align-items: center !important;
    min-width: 0 !important;
  }

  html body.ls-app-page .top-nav .nav-profile-pill {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    width: auto !important;
    max-width: 220px !important;
    min-height: 42px !important;
    height: 42px !important;
    max-height: 42px !important;
    padding: 8px 12px 8px 8px !important;
    overflow: hidden !important;
    white-space: nowrap !important;
  }

  html body.ls-app-page .top-nav .nav-profile-pill > img,
  html body.ls-app-page .top-nav .nav-profile-pill > img.nav-profile-avatar,
  html body.ls-app-page .top-nav img.nav-profile-avatar {
    display: block !important;
    width: 26px !important;
    min-width: 26px !important;
    max-width: 26px !important;
    height: 26px !important;
    min-height: 26px !important;
    max-height: 26px !important;
    flex: 0 0 26px !important;
    aspect-ratio: 1 / 1 !important;
    object-fit: cover !important;
    object-position: center !important;
    border-radius: 4px !important;
    clip-path: circle(50% at 50% 50%) !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
  }

  html body.ls-app-page .top-nav .nav-profile-pill > span {
    display: inline-block !important;
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
}

/* =========================================================
   Desktop hardening — quests page layout
   ---------------------------------------------------------
   Loaded in the shell because it is the last stylesheet on
   private pages and must override global rhythm safely.
========================================================= */
@media (min-width: 981px) {
  html body.ls-app-page main.quest-page,
  html body.ls-app-page .quest-page {
    gap: clamp(18px, 2vw, 26px) !important;
    padding-top: clamp(92px, 7.2vw, 118px) !important;
  }

  html body.ls-app-page .quest-hero,
  html body.ls-app-page .quest-main-section {
    width: 100% !important;
  }

  html body.ls-app-page .quest-hero-grid {
    grid-template-columns: minmax(0, 1fr) !important;
    width: min(100%, 900px) !important;
    margin-inline: auto !important;
  }

  html body.ls-app-page .quest-hero-card,
  html body.ls-app-page .quest-tabs-card,
  html body.ls-app-page .quest-history-card {
    width: 100% !important;
  }

  html body.ls-app-page .quest-hero-top {
    align-items: center !important;
  }

  html body.ls-app-page .quest-avatar-box {
    width: 78px !important;
    height: 78px !important;
  }

  html body.ls-app-page .quest-identity-content h1 {
    font-size: clamp(1.75rem, 2.1vw, 2.25rem) !important;
    line-height: 1.05 !important;
  }

  html body.ls-app-page .quest-hero-actions {
    width: min(260px, 34vw) !important;
  }

  html body.ls-app-page .quest-main-grid {
    grid-template-columns: minmax(0, 1fr) !important;
    width: min(100%, 1120px) !important;
    margin-inline: auto !important;
  }

  html body.ls-app-page .quest-main-column {
    width: 100% !important;
  }

  html body.ls-app-page .quest-tabs-nav {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)) !important;
    gap: 12px !important;
    margin-top: 0 !important;
  }

  html body.ls-app-page .quest-tab-button {
    width: 100% !important;
    min-width: 0 !important;
  }

  html body.ls-app-page .quest-card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 16px !important;
  }
}

@media (min-width: 1280px) {
  html body.ls-app-page .quest-main-grid {
    width: min(100%, 1180px) !important;
  }

  html body.ls-app-page .quest-hero-grid {
    width: min(100%, 940px) !important;
  }
}

@media (max-width: 980px) {
  html body.ls-app-page .quest-main-grid,
  html body.ls-app-page .quest-hero-grid {
    width: 100% !important;
  }
}

@media (max-width: 860px) {
  html body.ls-app-page .quest-card-grid {
    grid-template-columns: 1fr !important;
  }
}


/* =========================================================
   FINAL FIX — Mes quêtes desktop layout
   ---------------------------------------------------------
   The quests dashboard must start directly under the fixed
   navigation on desktop. This block neutralizes old hero-like
   vertical spacing and keeps the layout professional on wide
   screens without changing the mobile rendering.
========================================================= */
@media (min-width: 981px) {
  html body.ls-app-page main.quest-page,
  html body.ls-app-page .quest-page {
    display: block !important;
    min-height: 0 !important;
    height: auto !important;
    padding: clamp(84px, 5.2vw, 104px) 0 56px !important;
    margin: 0 !important;
    gap: 0 !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    overflow-x: clip !important;
  }

  html body.ls-app-page .quest-page > section,
  html body.ls-app-page .quest-page .quest-hero,
  html body.ls-app-page .quest-page .quest-main-section {
    min-height: 0 !important;
    height: auto !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  html body.ls-app-page .quest-page .quest-main-section {
    margin-top: 18px !important;
  }

  html body.ls-app-page .quest-page .container {
    width: min(calc(100% - 80px), 1220px) !important;
    max-width: 1220px !important;
    margin-inline: auto !important;
    padding-inline: 0 !important;
  }

  html body.ls-app-page .quest-page .quest-hero-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    width: min(100%, 860px) !important;
    max-width: 860px !important;
    margin: 0 auto !important;
    gap: 0 !important;
  }

  html body.ls-app-page .quest-page .quest-hero-card {
    width: 100% !important;
    min-height: 0 !important;
    padding: 30px 34px !important;
  }

  html body.ls-app-page .quest-page .quest-hero-top {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 28px !important;
  }

  html body.ls-app-page .quest-page .quest-identity {
    min-width: 0 !important;
    flex: 1 1 auto !important;
  }

  html body.ls-app-page .quest-page .quest-avatar-box {
    width: 72px !important;
    height: 72px !important;
  }

  html body.ls-app-page .quest-page .quest-identity-content h1 {
    margin: 0 0 4px !important;
    font-size: clamp(1.65rem, 1.9vw, 2.15rem) !important;
    line-height: 1.06 !important;
  }

  html body.ls-app-page .quest-page .quest-subtitle {
    margin: 0 !important;
    font-size: 0.92rem !important;
    line-height: 1.45 !important;
  }

  html body.ls-app-page .quest-page .quest-hero-actions {
    width: 260px !important;
    max-width: 260px !important;
    flex: 0 0 260px !important;
  }

  html body.ls-app-page .quest-page .quest-main-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    width: min(100%, 1220px) !important;
    max-width: 1220px !important;
    margin: 0 auto !important;
    gap: 18px !important;
  }

  html body.ls-app-page .quest-page .quest-main-column {
    width: 100% !important;
    display: grid !important;
    gap: 18px !important;
  }

  html body.ls-app-page .quest-page .quest-tabs-card,
  html body.ls-app-page .quest-page .quest-history-card {
    width: 100% !important;
    min-height: 0 !important;
    padding: 22px !important;
  }

  html body.ls-app-page .quest-page .quest-tabs-nav {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 12px !important;
    margin: 0 0 20px !important;
  }

  html body.ls-app-page .quest-page .quest-tab-button {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 46px !important;
    padding: 10px 13px !important;
  }

  html body.ls-app-page .quest-page .quest-card-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 16px !important;
  }

  html body.ls-app-page .quest-page .quest-card {
    min-height: 100% !important;
  }
}

@media (min-width: 981px) and (max-width: 1280px) {
  html body.ls-app-page .quest-page .container {
    width: min(calc(100% - 56px), 1120px) !important;
  }

  html body.ls-app-page .quest-page .quest-main-grid {
    width: min(100%, 1120px) !important;
  }

  html body.ls-app-page .quest-page .quest-card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (min-width: 981px) and (max-width: 1100px) {
  html body.ls-app-page .quest-page .quest-tabs-nav {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 980px) {
  html body.ls-app-page main.quest-page,
  html body.ls-app-page .quest-page {
    display: flex !important;
  }
}


/* =========================================================
   ABSOLUTE FINAL FIX — Mes quêtes desktop no-gap
   This block is duplicated in quests.php as critical CSS so
   browser caching cannot keep the old oversized desktop gap.
========================================================= */
@media (min-width: 981px) {
  html body.ls-app-page main.quest-page,
  html body.ls-app-page .quest-page {
    display: block !important;
    min-height: 0 !important;
    height: auto !important;
    padding: 72px 0 48px !important;
    margin: 0 !important;
    gap: 0 !important;
    align-items: stretch !important;
    align-content: start !important;
    justify-content: flex-start !important;
    transform: none !important;
    overflow-x: clip !important;
  }

  html body.ls-app-page main.quest-page > .quest-hero,
  html body.ls-app-page main.quest-page > .quest-main-section,
  html body.ls-app-page .quest-page .quest-hero,
  html body.ls-app-page .quest-page .quest-main-section {
    display: block !important;
    width: 100% !important;
    min-height: 0 !important;
    height: auto !important;
    padding: 0 !important;
    margin: 0 !important;
    transform: none !important;
  }

  html body.ls-app-page main.quest-page > .quest-main-section,
  html body.ls-app-page .quest-page .quest-main-section {
    margin-top: 16px !important;
  }

  html body.ls-app-page .quest-page .container {
    width: min(calc(100% - 80px), 1220px) !important;
    max-width: 1220px !important;
    margin: 0 auto !important;
    padding: 0 !important;
    transform: none !important;
  }

  html body.ls-app-page .quest-page .quest-hero-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    width: min(100%, 860px) !important;
    max-width: 860px !important;
    margin: 0 auto !important;
    padding: 0 !important;
    gap: 0 !important;
    transform: none !important;
  }

  html body.ls-app-page .quest-page .quest-hero-card {
    width: 100% !important;
    min-height: 0 !important;
    height: auto !important;
    padding: 28px 34px !important;
    margin: 0 !important;
    transform: none !important;
  }

  html body.ls-app-page .quest-page .quest-hero-top {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 28px !important;
  }

  html body.ls-app-page .quest-page .quest-identity {
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }

  html body.ls-app-page .quest-page .quest-avatar-box {
    width: 72px !important;
    height: 72px !important;
  }

  html body.ls-app-page .quest-page .quest-identity-content h1 {
    margin: 0 0 4px !important;
    font-size: clamp(1.65rem, 1.9vw, 2.15rem) !important;
    line-height: 1.06 !important;
  }

  html body.ls-app-page .quest-page .quest-subtitle {
    margin: 0 !important;
    font-size: 0.92rem !important;
    line-height: 1.45 !important;
  }

  html body.ls-app-page .quest-page .quest-hero-actions {
    width: 260px !important;
    max-width: 260px !important;
    flex: 0 0 260px !important;
  }

  html body.ls-app-page .quest-page .quest-main-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    width: min(100%, 1220px) !important;
    max-width: 1220px !important;
    margin: 0 auto !important;
    padding: 0 !important;
    gap: 18px !important;
    transform: none !important;
  }

  html body.ls-app-page .quest-page .quest-main-column {
    width: 100% !important;
    display: grid !important;
    gap: 18px !important;
  }

  html body.ls-app-page .quest-page .quest-tabs-card,
  html body.ls-app-page .quest-page .quest-history-card {
    width: 100% !important;
    min-height: 0 !important;
    padding: 22px !important;
    margin: 0 !important;
  }

  html body.ls-app-page .quest-page .quest-tabs-nav {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 12px !important;
    margin: 0 0 20px !important;
  }

  html body.ls-app-page .quest-page .quest-tab-button {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 46px !important;
    padding: 10px 13px !important;
  }

  html body.ls-app-page .quest-page .quest-card-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 16px !important;
  }
}

@media (min-width: 981px) and (max-width: 1280px) {
  html body.ls-app-page .quest-page .container {
    width: min(calc(100% - 56px), 1120px) !important;
  }

  html body.ls-app-page .quest-page .quest-main-grid {
    width: min(100%, 1120px) !important;
  }

  html body.ls-app-page .quest-page .quest-card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (min-width: 981px) and (max-width: 1100px) {
  html body.ls-app-page .quest-page .quest-tabs-nav {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}


/* Professional spacing before compact footers on logged-in/application pages. */
body.ls-app-page .ls-site-footer--compact {
  margin-top: clamp(64px, 7vw, 104px) !important;
  padding-top: clamp(28px, 4vw, 46px) !important;
}

body.ls-app-page main.quest-page > .ls-site-footer--compact {
  margin-top: clamp(76px, 7vw, 118px) !important;
  padding-top: clamp(26px, 3.5vw, 44px) !important;
}

@media (max-width: 780px) {
  body.ls-app-page .ls-site-footer--compact,
  body.ls-app-page main.quest-page > .ls-site-footer--compact {
    margin-top: clamp(44px, 10vw, 72px) !important;
    padding-top: clamp(22px, 7vw, 34px) !important;
  }
}

/* =========================================================
   V31 — navigation logo polish
   ---------------------------------------------------------
   The top-left brand mark is intentionally a clean circular
   image: slightly larger, no visible wrapper, no square frame.
========================================================= */
.top-nav .nav-brand {
  gap: 12px;
}

.top-nav .brand-mark,
body :where(.top-nav .brand-mark) {
  width: 36px !important;
  height: 36px !important;
  flex: 0 0 36px !important;
  border: 0 !important;
  padding: 0 !important;
  border-radius: 50% !important;
  background: transparent !important;
  box-shadow: none !important;
  outline: 0 !important;
  overflow: hidden !important;
}

.top-nav .brand-mark img,
body :where(.top-nav .brand-mark img) {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  border: 0 !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  clip-path: circle(50% at 50% 50%);
  box-shadow: none !important;
}

@media (max-width: 720px) {
  .top-nav .brand-mark,
  body :where(.top-nav .brand-mark) {
    width: 32px !important;
    height: 32px !important;
    flex-basis: 32px !important;
  }
}


/* Nav logo — show the full image as-is, without circular crop or frame. */
body .top-nav .nav-brand .brand-mark {
  width: 50px !important;
  height: 50px !important;
  flex: 0 0 50px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  margin-right: 0 !important;
  overflow: visible !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  clip-path: none !important;
}

body .top-nav .nav-brand .brand-mark img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
  object-position: center !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  clip-path: none !important;
}

@media (max-width: 768px) {
  body .top-nav .nav-brand .brand-mark {
    width: 44px !important;
    height: 44px !important;
    flex-basis: 44px !important;
  }
}


/* ===== livesea-app.css ===== */
@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-latin-wght-normal.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

/* V8 — grille publique de l'équipe : toutes les fiches restent accessibles par
   le scroll naturel, sans carrousel ni carte partiellement hors écran. */
body:not(.ls-app-page) #team .public-team-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  width: min(100%, 1120px);
  margin: 28px auto 0;
}

body:not(.ls-app-page) #team .public-team-card {
  display: grid !important;
  grid-template-columns: 64px minmax(0, 1fr);
  align-items: start;
  gap: 14px;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 18px !important;
  text-align: left !important;
  transform: none !important;
}

body:not(.ls-app-page) #team .public-team-card .team-avatar {
  width: 64px !important;
  height: 64px !important;
  margin: 0 !important;
}

body:not(.ls-app-page) #team .public-team-copy {
  min-width: 0;
}

body:not(.ls-app-page) #team .public-team-card .team-pseudo,
body:not(.ls-app-page) #team .public-team-card .team-role,
body:not(.ls-app-page) #team .public-team-card .team-mission {
  min-height: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  text-align: left !important;
}

body:not(.ls-app-page) #team .public-team-card .team-pseudo {
  margin-top: 1px !important;
  overflow-wrap: anywhere;
}

body:not(.ls-app-page) #team .public-team-card .team-mission {
  margin-top: 13px !important;
  grid-column: 1 / -1;
}

@media (max-width: 900px) {
  body:not(.ls-app-page) #team .public-team-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 620px) {
  body:not(.ls-app-page) #team .public-team-grid {
    grid-template-columns: 1fr;
    gap: 10px;
    margin-top: 20px;
  }

  body:not(.ls-app-page) #team .public-team-card {
    grid-template-columns: 52px minmax(0, 1fr);
    gap: 11px;
    padding: 14px !important;
    border-radius: 4px !important;
  }

  body:not(.ls-app-page) #team .public-team-card .team-avatar {
    width: 52px !important;
    height: 52px !important;
  }

  body:not(.ls-app-page) #team .public-team-card .team-mission {
    margin-top: 10px !important;
    font-size: 0.82rem !important;
    line-height: 1.5 !important;
  }
}

@view-transition {
  navigation: auto;
}

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 180ms;
  animation-timing-function: ease-out;
}

:root {
  --ls-bg: #080b11;
  --ls-bg-soft: #0b1018;
  --ls-sidebar: #0a0e15;
  --ls-surface: #101722;
  --ls-surface-2: #141d2a;
  --ls-surface-3: #192433;
  --ls-border: #222e3f;
  --ls-border-strong: #33445b;
  --ls-text: #f4f7fb;
  --ls-text-soft: #c6d0dd;
  --ls-muted: #8f9db0;
  --ls-muted-2: #68778b;
  --ls-accent: #8ee8ff;
  --ls-accent-strong: #61d9f8;
  --ls-accent-soft: rgba(142, 232, 255, 0.11);
  --ls-violet: #c6b1ff;
  --ls-violet-soft: rgba(198, 177, 255, 0.11);
  --ls-success: #62dda0;
  --ls-success-soft: rgba(98, 221, 160, 0.12);
  --ls-warning: #ffd078;
  --ls-warning-soft: rgba(255, 208, 120, 0.12);
  --ls-danger: #ff8291;
  --ls-danger-soft: rgba(255, 130, 145, 0.12);
  --ls-radius-xs: 8px;
  --ls-radius-sm: 4px;
  --ls-radius-md: 4px;
  --ls-radius-lg: 4px;
  --ls-radius-xl: 4px;
  --ls-sidebar-width: 264px;
  --ls-content-max: 1420px;
  --ls-ease: cubic-bezier(0.2, 0.75, 0.25, 1);
  --ls-focus: 0 0 0 3px rgba(142, 232, 255, 0.26);

  /* Compatibilité avec les anciens composants pendant la migration visuelle. */
  --bg: var(--ls-bg);
  --bg-deep: var(--ls-bg);
  --surface: var(--ls-surface);
  --surface-strong: var(--ls-surface-2);
  --surface-soft: var(--ls-bg-soft);
  --stroke: var(--ls-border);
  --stroke-strong: var(--ls-border-strong);
  --text: var(--ls-text);
  --muted: var(--ls-muted);
  --muted-2: var(--ls-muted-2);
  --radius-xl: var(--ls-radius-xl);
  --radius-lg: var(--ls-radius-lg);
  --radius-md: var(--ls-radius-md);
  --radius-sm: var(--ls-radius-sm);
  --container: var(--ls-content-max);
  --gradient: linear-gradient(135deg, var(--ls-accent), var(--ls-violet));
  --gradient-soft: linear-gradient(135deg, var(--ls-accent-soft), var(--ls-violet-soft));
  --shadow-lg: none;
  --shadow-md: none;
  --shadow-sm: none;
  --transition: 180ms var(--ls-ease);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  min-width: 320px;
  scroll-behavior: smooth;
  scroll-padding-top: 92px;
  background: var(--ls-bg);
}

body {
  min-width: 320px;
  margin: 0;
  color: var(--ls-text);
  background:
    radial-gradient(circle at 75% -20%, rgba(120, 210, 255, 0.07), transparent 34rem),
    var(--ls-bg);
  font-family: "Inter", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1.55;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

body.is-drawer-open {
  overflow: hidden;
}

body.is-drawer-open .app-drawer {
  touch-action: pan-y;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input,
select,
textarea {
  font: inherit;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

button {
  color: inherit;
}

img {
  max-width: 100%;
}

::selection {
  color: #071016;
  background: var(--ls-accent);
}

:focus-visible {
  outline: 2px solid var(--ls-accent);
  outline-offset: 3px;
}

.grain,
.atmosphere,
.side-panel,
#livesea-internal-layout-critical {
  display: none !important;
}

.app-icon-sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.app-icon {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}


.app-toast {
  position: fixed;
  z-index: 1500;
  top: 18px;
  left: 50%;
  width: min(92vw, 680px);
  padding: 14px 18px;
  border: 1px solid var(--ls-border);
  border-radius: var(--ls-radius-md);
  background: var(--ls-surface-2);
  color: var(--ls-text);
  transform: translateX(-50%);
}

.app-toast--error {
  border-color: rgba(255, 130, 145, 0.35);
  background: #211319;
}

/* -------------------------------------------------------------------------- */
/* Application shell                                                          */
/* -------------------------------------------------------------------------- */

.app-sidebar {
  position: fixed;
  z-index: 800;
  inset: 0 auto 0 0;
  display: none;
  width: var(--ls-sidebar-width);
  padding: 20px 16px 16px;
  border-right: 1px solid var(--ls-border);
  background: var(--ls-sidebar);
}

.app-brand,
.marketing-brand {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  min-width: 0;
}

.app-brand {
  min-height: 58px;
  padding: 7px 10px;
  border-radius: var(--ls-radius-md);
}

.app-brand img,
.marketing-brand img {
  display: block;
  border-radius: 4px;
  object-fit: cover;
}

.app-brand > img {
  width: 44px !important;
  height: 44px !important;
  max-width: 44px !important;
  flex: 0 0 44px;
}

.marketing-brand > img {
  width: 42px !important;
  height: 42px !important;
  max-width: 42px !important;
  flex: 0 0 42px;
}

.app-brand-copy {
  display: grid;
  line-height: 1.05;
}

.app-brand-copy strong,
.marketing-brand strong {
  font-weight: 820;
  letter-spacing: -0.035em;
}

.app-brand-copy span {
  margin-top: 3px;
  color: var(--ls-muted);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.app-sidebar-scroll {
  min-height: 0;
  margin-top: 24px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}

.app-nav-label {
  margin: 24px 10px 8px;
  color: var(--ls-muted-2);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.app-nav-label:first-child {
  margin-top: 0;
}

.app-nav {
  display: grid;
  gap: 4px;
}

.app-nav-link,
.app-drawer-link {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 45px;
  border: 1px solid transparent;
  border-radius: var(--ls-radius-sm);
  color: var(--ls-muted);
  font-size: 0.89rem;
  font-weight: 680;
  transition: color 160ms ease, background 160ms ease, border-color 160ms ease;
}

.app-nav-link {
  padding: 10px 12px;
}

.app-nav-link:hover,
.app-drawer-link:hover {
  color: var(--ls-text);
  background: var(--ls-surface);
}

.app-nav-link.is-active,
.app-drawer-link.is-active {
  color: var(--ls-text);
  border-color: rgba(142, 232, 255, 0.17);
  background: var(--ls-accent-soft);
}

.app-nav-link.is-active::before {
  position: absolute;
  top: 12px;
  bottom: 12px;
  left: -17px;
  width: 3px;
  border-radius: 2px;
  background: var(--ls-accent);
  content: "";
}

.app-nav-link.is-active .app-icon,
.app-drawer-link.is-active .app-icon {
  color: var(--ls-accent);
}

.app-sidebar-footer {
  display: grid;
  gap: 7px;
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--ls-border);
}

.app-user-card {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) 18px;
  align-items: center;
  gap: 10px;
  padding: 9px;
  border-radius: var(--ls-radius-md);
  transition: background 160ms ease;
}

.app-user-card:hover {
  background: var(--ls-surface);
}

.app-user-card img,
.app-mobile-avatar img,
.app-drawer-user img {
  display: block;
  width: 100%;
  height: 100%;
  border: 1px solid var(--ls-border-strong);
  border-radius: 50%;
  object-fit: cover;
  background: var(--ls-surface-2);
}

.app-user-card > span,
.app-drawer-user > span {
  display: grid;
  min-width: 0;
}

.app-user-card strong,
.app-drawer-user strong {
  overflow: hidden;
  color: var(--ls-text);
  font-size: 0.82rem;
  font-weight: 750;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.app-user-card small,
.app-drawer-user small {
  overflow: hidden;
  margin-top: 2px;
  color: var(--ls-muted);
  font-size: 0.71rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.app-user-arrow {
  width: 16px;
  color: var(--ls-muted-2);
}

.app-logout-link,
.app-drawer-logout {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 40px;
  padding: 8px 12px;
  border-radius: var(--ls-radius-sm);
  color: var(--ls-muted);
  font-size: 0.78rem;
  font-weight: 680;
  transition: color 160ms ease, background 160ms ease;
}

.app-logout-link:hover,
.app-drawer-logout:hover {
  color: var(--ls-danger);
  background: var(--ls-danger-soft);
}

.app-login-button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 48px;
  padding: 11px 14px;
  border-radius: var(--ls-radius-sm);
  color: #071016;
  background: var(--ls-accent);
  font-size: 0.86rem;
  font-weight: 800;
}

.app-mobile-header {
  position: fixed;
  z-index: 780;
  inset: 0 0 auto;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) 42px;
  align-items: center;
  min-height: 66px;
  padding: max(8px, env(safe-area-inset-top)) 14px 8px;
  border-bottom: 1px solid rgba(34, 46, 63, 0.82);
  background: rgba(8, 11, 17, 0.94);
  backdrop-filter: blur(18px);
}

.app-icon-button {
  display: inline-grid;
  width: 42px;
  height: 42px;
  padding: 0;
  place-items: center;
  border: 1px solid var(--ls-border);
  border-radius: 4px;
  color: var(--ls-text-soft);
  background: var(--ls-surface);
  cursor: pointer;
  transition: color 160ms ease, background 160ms ease, border-color 160ms ease;
}

.app-icon-button:hover {
  color: var(--ls-text);
  border-color: var(--ls-border-strong);
  background: var(--ls-surface-2);
}

.app-mobile-title {
  display: grid;
  min-width: 0;
  padding: 0 12px;
  text-align: center;
  line-height: 1.1;
}

.app-mobile-title span {
  color: var(--ls-muted);
  font-size: 0.62rem;
  font-weight: 750;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.app-mobile-title strong {
  overflow: hidden;
  margin-top: 4px;
  font-size: 0.91rem;
  font-weight: 780;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.app-mobile-avatar {
  display: block;
  width: 38px;
  height: 38px;
  justify-self: end;
}

.app-mobile-login {
  justify-self: end;
  color: var(--ls-accent);
  font-size: 0.76rem;
  font-weight: 780;
}

.app-tabbar {
  position: fixed;
  z-index: 790;
  inset: auto 0 0;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  min-height: calc(70px + env(safe-area-inset-bottom));
  padding: 7px 8px calc(7px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--ls-border);
  background: rgba(8, 11, 17, 0.96);
  backdrop-filter: blur(20px);
}

.app-tabbar-link {
  position: relative;
  display: grid;
  min-width: 0;
  padding: 5px 2px 3px;
  place-items: center;
  align-content: center;
  gap: 4px;
  border: 0;
  border-radius: var(--ls-radius-sm);
  color: var(--ls-muted-2);
  background: transparent;
  font-size: 0.59rem;
  font-weight: 750;
  line-height: 1;
  cursor: pointer;
}

.app-tabbar-link .app-icon {
  width: 21px;
  height: 21px;
}

.app-tabbar-link span {
  overflow: hidden;
  max-width: 100%;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.app-tabbar-link.is-active {
  color: var(--ls-accent);
  background: var(--ls-accent-soft);
}

.app-tabbar-link.is-active::before {
  position: absolute;
  top: 0;
  left: 50%;
  width: 18px;
  height: 2px;
  border-radius: 2px;
  background: var(--ls-accent);
  content: "";
  transform: translateX(-50%);
}

/* Drawer partagé : menu d'app et menu marketing. */
.app-drawer-layer {
  position: fixed;
  z-index: 1200;
  inset: 0;
}

.app-drawer-layer[hidden] {
  display: none;
}

.app-drawer-backdrop {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: rgba(0, 0, 0, 0.62);
  opacity: 0;
  cursor: default;
  transition: opacity 220ms ease;
}

.app-drawer {
  position: absolute;
  inset: auto 0 0;
  max-height: min(88dvh, 760px);
  padding: 9px 16px calc(18px + env(safe-area-inset-bottom));
  border: 1px solid var(--ls-border-strong);
  border-width: 1px 0 0;
  border-radius: 4px 4px 0 0;
  background: #0d131d;
  overflow-y: auto;
  overscroll-behavior: contain;
  transform: translateY(104%);
  transition: transform 260ms var(--ls-ease);
}

.app-drawer-layer.is-open .app-drawer-backdrop {
  opacity: 1;
}

.app-drawer-layer.is-open .app-drawer {
  transform: translateY(0);
}

.app-drawer-handle {
  width: 38px;
  height: 4px;
  margin: 0 auto 13px;
  border-radius: 4px;
  background: var(--ls-border-strong);
}

.app-drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 2px 0 14px;
}

.app-drawer-header span {
  color: var(--ls-muted);
  font-size: 0.68rem;
  font-weight: 760;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.app-drawer-header h2 {
  margin: 2px 0 0;
  font-size: 1.35rem;
  letter-spacing: -0.035em;
}

.app-drawer-user {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) 20px;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
  padding: 12px;
  border: 1px solid var(--ls-border);
  border-radius: var(--ls-radius-md);
  background: var(--ls-surface);
}

.app-drawer-user img {
  width: 48px;
  height: 48px;
}

.app-drawer-nav {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.app-drawer-nav-label {
  grid-column: 1 / -1;
  padding: 2px 4px 0;
  color: var(--ls-muted-2);
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.app-drawer-nav-label--spaced {
  margin-top: 10px;
}

.app-drawer-link {
  min-height: 56px;
  padding: 11px 13px;
  border-color: var(--ls-border);
  background: rgba(255, 255, 255, 0.015);
  font-size: 0.8rem;
}

.app-drawer-footer {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--ls-border);
}

/* -------------------------------------------------------------------------- */
/* Marketing shell et page d'accueil                                          */
/* -------------------------------------------------------------------------- */

.marketing-header {
  position: fixed;
  z-index: 760;
  top: 16px;
  left: 50%;
  display: flex;
  width: min(calc(100% - 32px), 1240px);
  min-height: 66px;
  padding: 9px 10px 9px 14px;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  border: 1px solid rgba(51, 68, 91, 0.76);
  border-radius: 4px;
  background: rgba(10, 14, 21, 0.9);
  backdrop-filter: blur(18px);
  transform: translateX(-50%);
  transition: background 180ms ease, border-color 180ms ease;
}

.marketing-header.is-scrolled {
  border-color: var(--ls-border-strong);
  background: rgba(10, 14, 21, 0.98);
}

.marketing-brand {
  color: var(--ls-text);
  font-size: 0.95rem;
  letter-spacing: -0.02em;
}

.marketing-brand span {
  white-space: nowrap;
}

.marketing-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}

.marketing-nav a,
.marketing-login {
  padding: 10px 13px;
  border-radius: 4px;
  color: var(--ls-muted);
  font-size: 0.78rem;
  font-weight: 720;
  transition: color 160ms ease, background 160ms ease;
}

.marketing-nav a:hover {
  color: var(--ls-text);
  background: var(--ls-surface);
}

.marketing-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.marketing-login {
  min-width: 108px;
  color: #071016;
  background: var(--ls-accent);
  text-align: center;
}

.marketing-menu-button {
  display: none;
}

body:not(.ls-app-page) .main {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden;
}

body:not(.ls-app-page) .hero {
  position: relative;
  display: grid;
  width: min(100%, 1380px);
  min-height: min(920px, 100svh);
  margin: 0 auto;
  padding: clamp(142px, 14vw, 190px) clamp(22px, 5vw, 72px) 82px;
  align-content: center;
  overflow: visible;
}

body:not(.ls-app-page) .hero::before {
  position: absolute;
  z-index: -1;
  top: 90px;
  right: max(0px, 4vw);
  width: min(48vw, 620px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(142, 232, 255, 0.10), rgba(198, 177, 255, 0.035) 44%, transparent 70%);
  content: "";
  pointer-events: none;
}

.home-hero-layout {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(420px, 0.88fr);
  align-items: center;
  gap: clamp(44px, 7vw, 104px);
}

.home-hero-copy {
  min-width: 0;
}

.home-eyebrow,
.home-kicker {
  display: inline-flex !important;
  align-items: center;
  gap: 9px;
  color: var(--ls-accent);
  font-size: 0.72rem;
  font-weight: 820;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.home-eyebrow::before,
.home-kicker::before {
  width: 22px;
  height: 1px;
  background: currentColor;
  content: "";
}

body:not(.ls-app-page) .hero h1 {
  max-width: 820px;
  margin: 20px 0 23px !important;
  color: var(--ls-text) !important;
  font-family: inherit !important;
  font-size: clamp(3.35rem, 6vw, 5.8rem) !important;
  font-weight: 830 !important;
  line-height: 0.9 !important;
  letter-spacing: -0.075em !important;
  text-transform: none !important;
  white-space: normal !important;
  overflow-wrap: normal !important;
}

body:not(.ls-app-page) .hero h1 em {
  display: block;
  color: var(--ls-muted) !important;
  font-family: inherit !important;
  font-style: normal !important;
  font-weight: 540 !important;
}

body:not(.ls-app-page) .hero-sub {
  max-width: 680px;
  margin: 0 !important;
  color: var(--ls-text-soft) !important;
  font-size: clamp(1rem, 1.5vw, 1.16rem) !important;
  line-height: 1.72 !important;
}

body:not(.ls-app-page) .hero-sub strong {
  color: var(--ls-text);
  font-weight: 720;
}

body:not(.ls-app-page) .hero-ctas,
.home-cta-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 11px;
  margin-top: 31px;
}

.button,
.button-primary,
.button-secondary,
.btn-primary,
.btn-secondary {
  display: inline-flex !important;
  min-height: 48px !important;
  padding: 11px 17px !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 9px !important;
  border: 1px solid var(--ls-border-strong) !important;
  border-radius: var(--ls-radius-sm) !important;
  box-shadow: none !important;
  font-family: inherit !important;
  font-size: 0.84rem !important;
  font-weight: 780 !important;
  line-height: 1.15 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  cursor: pointer;
  transition: transform 140ms ease, color 160ms ease, background 160ms ease, border-color 160ms ease !important;
}

.button:hover,
.button-primary:hover,
.button-secondary:hover,
.btn-primary:hover,
.btn-secondary:hover {
  transform: translateY(-1px) !important;
}

.button:active,
.button-primary:active,
.button-secondary:active,
.btn-primary:active,
.btn-secondary:active {
  transform: translateY(0) scale(0.985) !important;
}

.button-primary,
.btn-primary,
.button--primary {
  border-color: var(--ls-accent) !important;
  color: #061017 !important;
  background: var(--ls-accent) !important;
}

.button-secondary,
.btn-secondary,
.button--secondary {
  color: var(--ls-text) !important;
  background: var(--ls-surface) !important;
}

.button-primary:hover,
.btn-primary:hover,
.button--primary:hover {
  border-color: #b5f2ff !important;
  background: #b5f2ff !important;
}

.button-secondary:hover,
.btn-secondary:hover,
.button--secondary:hover {
  border-color: var(--ls-border-strong) !important;
  background: var(--ls-surface-2) !important;
}

.hero-live-proof {
  display: none !important;
}

.portal-preview {
  position: relative;
  padding: 16px;
  border: 1px solid var(--ls-border-strong);
  border-radius: 4px;
  background: #0d131d;
}

.portal-preview::before {
  position: absolute;
  z-index: -1;
  inset: 16% -14% -12% 14%;
  border-radius: 4px;
  background: rgba(198, 177, 255, 0.08);
  filter: blur(46px);
  content: "";
}

.portal-preview-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 3px 2px 15px;
}

.portal-preview-user {
  display: flex;
  align-items: center;
  gap: 10px;
}

.portal-preview-user img {
  width: 40px;
  height: 40px;
  border-radius: 4px;
}

.portal-preview-user span {
  display: grid;
  line-height: 1.22;
}

.portal-preview-user strong {
  font-size: 0.79rem;
}

.portal-preview-user small,
.portal-preview-period {
  color: var(--ls-muted);
  font-size: 0.66rem;
}

.portal-preview-period {
  padding: 7px 9px;
  border: 1px solid var(--ls-border);
  border-radius: 4px;
  background: var(--ls-surface);
}

.portal-preview-balance {
  padding: 21px;
  border: 1px solid rgba(142, 232, 255, 0.18);
  border-radius: 4px;
  background: var(--ls-accent-soft);
}

.portal-preview-balance > span {
  color: var(--ls-muted);
  font-size: 0.69rem;
  font-weight: 700;
}

.portal-preview-balance strong {
  display: block;
  margin-top: 5px;
  font-size: clamp(1.7rem, 4vw, 2.4rem);
  letter-spacing: -0.055em;
}

.portal-preview-balance strong small {
  color: var(--ls-accent);
  font-size: 0.45em;
  letter-spacing: 0;
}

.portal-preview-progress {
  height: 7px;
  margin-top: 17px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.07);
  overflow: hidden;
}

.portal-preview-progress i {
  display: block;
  width: 72%;
  height: 100%;
  border-radius: inherit;
  background: var(--ls-accent);
}

.portal-preview-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 10px;
}

.portal-preview-card {
  min-height: 118px;
  padding: 15px;
  border: 1px solid var(--ls-border);
  border-radius: 4px;
  background: var(--ls-surface);
}

.portal-preview-card .app-icon {
  color: var(--ls-violet);
}

.portal-preview-card strong,
.portal-preview-card span {
  display: block;
}

.portal-preview-card strong {
  margin-top: 18px;
  font-size: 0.85rem;
}

.portal-preview-card span {
  margin-top: 4px;
  color: var(--ls-muted);
  font-size: 0.67rem;
}

body:not(.ls-app-page) .hero-metrics {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  width: 100% !important;
  margin: clamp(56px, 8vw, 94px) 0 0 !important;
  padding: 20px 0 0 !important;
  border-top: 1px solid var(--ls-border) !important;
  gap: 0 !important;
}

body:not(.ls-app-page) .metric {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: auto auto !important;
  align-content: center !important;
  align-items: center !important;
  justify-items: center !important;
  gap: 6px !important;
  min-width: 0 !important;
  min-width: 0;
  padding: 10px clamp(12px, 3vw, 28px) !important;
  border: 0 !important;
  border-right: 1px solid var(--ls-border) !important;
  background: transparent !important;
  box-shadow: none !important;
}

body:not(.ls-app-page) .metric:first-child {
  padding-left: 0 !important;
}

body:not(.ls-app-page) .metric:last-child {
  border-right: 0 !important;
}

body:not(.ls-app-page) .metric-value {
  color: var(--ls-text) !important;
  font-size: clamp(1.7rem, 3.2vw, 2.8rem) !important;
  font-weight: 800 !important;
  letter-spacing: -0.055em !important;
  white-space: nowrap !important;
}

body:not(.ls-app-page) .metric-label {
  width: 100% !important;
  margin-top: 3px;
  color: var(--ls-muted) !important;
  font-size: 0.74rem !important;
  line-height: 1.35 !important;
  text-align: center !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
}

body:not(.ls-app-page) .logo-ticker {
  width: min(calc(100% - 32px), 1240px) !important;
  margin: 0 auto !important;
  padding: 17px 0 !important;
  border: 1px solid var(--ls-border) !important;
  border-width: 1px 0 !important;
  background: transparent !important;
}

body:not(.ls-app-page) .logo-ticker-label {
  color: var(--ls-muted-2) !important;
  font-size: 0.65rem !important;
  font-weight: 760 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
}

body:not(.ls-app-page) .ticker-item {
  color: var(--ls-text-soft) !important;
  font-size: 0.8rem !important;
  font-weight: 680 !important;
}

body:not(.ls-app-page) .section {
  width: min(calc(100% - 40px), 1240px) !important;
  max-width: 1240px !important;
  min-height: 0 !important;
  margin: 0 auto !important;
  padding: clamp(82px, 10vw, 132px) 0 !important;
}

body:not(.ls-app-page) .feature {
  display: grid !important;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1fr) !important;
  min-height: 0 !important;
  margin: 0 0 22px !important;
  padding: 12px !important;
  align-items: center !important;
  gap: clamp(28px, 6vw, 82px) !important;
  border: 1px solid var(--ls-border) !important;
  border-radius: 4px !important;
  background: var(--ls-bg-soft) !important;
  box-shadow: none !important;
}

body:not(.ls-app-page) .feature.reverse .feature-visual {
  order: 2;
}

body:not(.ls-app-page) .feature-visual {
  min-height: 360px !important;
  border: 0 !important;
  border-radius: 4px !important;
  overflow: hidden !important;
}

body:not(.ls-app-page) .feature-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

body:not(.ls-app-page) .feature-content {
  padding: clamp(20px, 4vw, 52px) clamp(10px, 2vw, 28px) !important;
}

body:not(.ls-app-page) .feature-number {
  display: inline-grid !important;
  width: 36px !important;
  height: 36px !important;
  margin: 0 0 22px !important;
  place-items: center !important;
  border: 1px solid var(--ls-border-strong) !important;
  border-radius: 4px !important;
  color: var(--ls-accent) !important;
  background: var(--ls-surface) !important;
  font-size: 0.72rem !important;
  font-weight: 800 !important;
}

.section-title {
  color: var(--ls-text) !important;
  font-family: inherit !important;
  font-size: clamp(2rem, 4.2vw, 4.4rem) !important;
  font-weight: 620 !important;
  line-height: 1.02 !important;
  letter-spacing: -0.06em !important;
  text-transform: none !important;
}

.section-title strong {
  color: var(--ls-text) !important;
  font-weight: 830 !important;
}

.section-body {
  color: var(--ls-muted) !important;
  font-size: clamp(0.95rem, 1.3vw, 1.08rem) !important;
  line-height: 1.75 !important;
}

.silk-divider {
  width: min(calc(100% - 40px), 1240px) !important;
  height: 1px !important;
  margin: 0 auto !important;
  background: var(--ls-border) !important;
  opacity: 1 !important;
}

.testimonial-card,
.integration-item,
.faq-item {
  border: 1px solid var(--ls-border) !important;
  border-radius: var(--ls-radius-lg) !important;
  background: var(--ls-surface) !important;
  box-shadow: none !important;
}

.testimonial-card {
  padding: 25px !important;
}

.testimonial-avatar,
.team-avatar,
.review-avatar {
  border-color: var(--ls-border-strong) !important;
  border-radius: 50% !important;
}

.team-role,
.testimonial-role,
.review-quote,
.team-mission {
  color: var(--ls-muted) !important;
}

.testimonial-stars,
.review-stars {
  color: var(--ls-warning) !important;
}

.carousel-control {
  border: 1px solid var(--ls-border) !important;
  border-radius: 4px !important;
  color: var(--ls-text) !important;
  background: var(--ls-surface) !important;
}

.integrations-grid {
  gap: 11px !important;
}

.integration-item {
  padding: 22px 15px !important;
}

.integration-icon {
  border: 0 !important;
  background: transparent !important;
}

.integration-name {
  color: var(--ls-text-soft) !important;
  font-size: 0.78rem !important;
  font-weight: 720 !important;
}

.faq-list {
  max-width: 920px !important;
}

.faq-item {
  margin-bottom: 9px !important;
  padding: 0 !important;
  overflow: hidden;
}

.faq-question {
  min-height: 68px !important;
  padding: 18px 20px !important;
  color: var(--ls-text) !important;
  font-family: inherit !important;
  font-size: 0.94rem !important;
  font-weight: 720 !important;
}

.faq-answer-inner {
  padding: 0 20px 21px !important;
  color: var(--ls-muted) !important;
  line-height: 1.7 !important;
}

.faq-toggle-all {
  border: 1px solid var(--ls-border) !important;
  border-radius: 4px !important;
  color: var(--ls-text-soft) !important;
  background: var(--ls-surface) !important;
}

.home-cta {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  width: min(calc(100% - 40px), 1240px);
  margin: 32px auto 0;
  padding: clamp(34px, 6vw, 72px);
  align-items: center;
  gap: 36px;
  border: 1px solid rgba(142, 232, 255, 0.2);
  border-radius: 4px;
  background: var(--ls-accent-soft);
  overflow: hidden;
}

.home-cta h2 {
  max-width: 820px;
  margin: 18px 0 0;
  font-size: clamp(2rem, 4.5vw, 4.6rem);
  font-weight: 560;
  line-height: 1.02;
  letter-spacing: -0.06em;
}

.home-cta h2 strong {
  font-weight: 830;
}

.home-cta p {
  max-width: 660px;
  margin: 20px 0 0;
  color: var(--ls-text-soft);
}

.home-cta-mark {
  width: clamp(120px, 16vw, 190px);
  opacity: 0.9;
}

.site-footer {
  display: flex;
  width: min(calc(100% - 40px), 1240px);
  min-height: 86px;
  margin: 22px auto 0;
  padding: 18px 0;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  border-top: 1px solid var(--ls-border);
  color: var(--ls-muted);
  font-size: 0.72rem;
}

.site-footer-brand {
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--ls-text-soft);
  font-size: 0.78rem;
}

.site-footer-brand img {
  width: 32px !important;
  height: 32px !important;
  max-width: 32px !important;
  flex: 0 0 32px;
  border-radius: 4px;
  object-fit: cover;
}

.site-footer p {
  margin: 0;
}

.site-footer-status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.site-footer-status i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ls-success);
}

/* -------------------------------------------------------------------------- */
/* Pages connectées : base commune                                            */
/* -------------------------------------------------------------------------- */

body.ls-app-page {
  min-height: 100svh;
  background:
    radial-gradient(circle at 84% -10%, rgba(142, 232, 255, 0.055), transparent 30rem),
    var(--ls-bg);
}

/* Les anciennes feuilles contenaient des correctifs globaux en !important.
   Ces sélecteurs à identité forte garantissent que le nouveau shell reste
   réellement fixe et que le contenu ne dépend plus d'un calcul JavaScript. */
html body.ls-app-page > .app-sidebar {
  position: fixed !important;
  top: 0 !important;
  right: auto !important;
  bottom: 0 !important;
  left: 0 !important;
  width: var(--ls-sidebar-width) !important;
  height: 100dvh !important;
  min-height: 0 !important;
  max-height: none !important;
  margin: 0 !important;
  transform: none !important;
}

html body.ls-app-page > .app-mobile-header {
  position: fixed !important;
  top: 0 !important;
  right: 0 !important;
  bottom: auto !important;
  left: 0 !important;
  width: 100% !important;
  margin: 0 !important;
  transform: none !important;
}

html body.ls-app-page > .app-tabbar {
  position: fixed !important;
  top: auto !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  width: 100% !important;
  margin: 0 !important;
  transform: none !important;
}

html body.ls-app-page > main#contenu-principal {
  position: relative !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  width: 100% !important;
  min-height: 100svh !important;
  height: auto !important;
  margin: 0 !important;
  padding: 88px 16px calc(94px + env(safe-area-inset-bottom)) !important;
  transform: none !important;
}

html body.ls-app-page main#contenu-principal :where(h1) {
  max-width: 100% !important;
  font-size: clamp(1.75rem, 3vw, 2.5rem) !important;
  line-height: 1.08 !important;
  word-break: normal !important;
  overflow-wrap: break-word !important;
  white-space: normal !important;
}

body.ls-app-page > main {
  position: relative !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  min-height: 100svh !important;
  height: auto !important;
  margin: 0 !important;
  padding: 88px 16px calc(94px + env(safe-area-inset-bottom)) !important;
  overflow: visible !important;
  transform: none !important;
}

body.ls-app-page > main > :not(.site-footer) {
  position: relative;
  z-index: 1;
}

body.ls-app-page .container {
  width: min(100%, var(--ls-content-max)) !important;
  max-width: var(--ls-content-max) !important;
  margin-right: auto !important;
  margin-left: auto !important;
  padding-right: 0 !important;
  padding-left: 0 !important;
}

body.ls-app-page :where(
  .profile-hero,
  .profile-section,
  .quest-hero,
  .quest-main-section,
  .spin-hero,
  .spin-machine-section,
  .spin-history-section,
  .payment-calendar-hero,
  .payment-calendar-section,
  .admin-hero,
  .admin-section,
  .admin-main-section,
  .team-feedback-section,
  .team-switcher-section,
  .team-main-section,
  .quest-admin-section,
  .quest-admin-lanes-section,
  .quest-admin-final-hero,
  .quest-admin-final-queues-section,
  .quest-admin-final-main-section,
  .performances,
  .partners
) {
  width: 100% !important;
  min-height: 0 !important;
  height: auto !important;
  margin: 0 0 18px !important;
  padding: 0 !important;
  background: transparent !important;
  transform: none !important;
}

body.ls-app-page :where(
  .profile-hero-grid,
  .profile-main-grid,
  .quest-hero-grid,
  .quest-main-grid,
  .spin-hero-grid,
  .payment-calendar-hero-grid,
  .admin-top-grid,
  .team-top-grid,
  .quest-admin-workspace-grid,
  .quest-admin-final-top-grid,
  .quest-admin-final-main-grid
) {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  transform: none !important;
}

body.ls-app-page :where(
  .profile-card,
  .profile-state-card,
  .quest-panel,
  .quest-state-card,
  .quest-card,
  .spin-panel,
  .spin-state-panel,
  .payment-calendar-card,
  .payment-calendar-state-card,
  .admin-card,
  .admin-state-card,
  .quest-admin-card,
  .quest-admin-state-card,
  .quest-admin-focus-card,
  .quest-admin-subcard,
  .quest-admin-final-card,
  .quest-admin-final-state-card,
  .quest-admin-final-info-item,
  .quest-admin-final-action-card,
  .access-denied-card
) {
  border: 1px solid var(--ls-border) !important;
  border-radius: var(--ls-radius-lg) !important;
  background: var(--ls-surface) !important;
  background-image: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

body.ls-app-page :where(
  .profile-hero-card,
  .quest-hero-card,
  .spin-hero-card,
  .payment-calendar-identity-card,
  .admin-hero-card,
  .team-hero-card,
  .quest-admin-page-heading,
  .quest-admin-final-hero-card
) {
  border-color: rgba(142, 232, 255, 0.16) !important;
  background: linear-gradient(135deg, rgba(142, 232, 255, 0.065), rgba(16, 23, 34, 0.8)) !important;
}

body.ls-app-page :where(
  .profile-card,
  .quest-panel,
  .spin-panel,
  .payment-calendar-card,
  .admin-card,
  .quest-admin-card,
  .quest-admin-final-card
) {
  padding: clamp(18px, 2.5vw, 28px) !important;
}

body.ls-app-page :where(h1, h2, h3, h4) {
  color: var(--ls-text);
  font-family: inherit !important;
  letter-spacing: -0.035em;
}

body.ls-app-page :where(h1) {
  font-size: clamp(1.75rem, 3.2vw, 2.75rem) !important;
  font-weight: 820 !important;
  line-height: 1.05 !important;
}

body.ls-app-page :where(h2) {
  font-size: clamp(1.2rem, 2vw, 1.6rem) !important;
  font-weight: 770 !important;
  line-height: 1.18 !important;
}

body.ls-app-page :where(h3) {
  font-size: 1rem !important;
  font-weight: 740 !important;
}

body.ls-app-page :where(
  .profile-lead,
  .quest-lead,
  .hero-description,
  .profile-subtitle,
  .quest-subtitle,
  .payment-calendar-subtitle,
  .profile-muted-copy,
  .spin-muted-copy,
  .quest-admin-lead,
  .quest-admin-final-muted-copy
) {
  color: var(--ls-muted) !important;
  line-height: 1.65 !important;
}

body.ls-app-page :where(
  .profile-avatar,
  .quest-avatar-box,
  .spin-history-avatar,
  .payment-calendar-avatar,
  .admin-avatar,
  .team-table-avatar,
  .team-profile-avatar,
  .quest-flat-avatar,
  .quest-admin-avatar-xl,
  .quest-admin-final-user-avatar,
  .quest-admin-final-queue-avatar
) {
  border: 1px solid var(--ls-border-strong) !important;
  border-radius: 50% !important;
  background: var(--ls-surface-2) !important;
  box-shadow: none !important;
}

body.ls-app-page :where(
  .profile-chip,
  .profile-inline-pill,
  .profile-status-pill,
  .quest-status-badge,
  .quest-type-pill,
  .quest-cycle-pill,
  .quest-reward-pill,
  .quest-reward-pill-small,
  .spin-history-status,
  .payment-calendar-payment-status,
  .admin-role-badge,
  .admin-mini-badge,
  .admin-table-status,
  .quest-flat-status,
  .quest-admin-final-role-badge,
  .quest-admin-final-mini-badge,
  .admin-count-badge,
  .quest-admin-counter,
  .quest-admin-final-count-badge
) {
  min-height: 26px !important;
  padding: 5px 9px !important;
  border: 1px solid var(--ls-border) !important;
  border-radius: 4px !important;
  color: var(--ls-text-soft) !important;
  background: var(--ls-surface-2) !important;
  box-shadow: none !important;
  font-size: 0.68rem !important;
  font-weight: 730 !important;
  line-height: 1.1 !important;
}

body.ls-app-page :where(
  .profile-alert,
  .profile-global-alert,
  .quest-alert,
  .spin-alert,
  .payment-calendar-alert,
  .admin-alert,
  .quest-admin-alert,
  .quest-admin-final-alert,
  .team-feedback
) {
  padding: 14px 16px !important;
  border: 1px solid var(--ls-border) !important;
  border-radius: var(--ls-radius-sm) !important;
  color: var(--ls-text-soft) !important;
  background: var(--ls-surface-2) !important;
  box-shadow: none !important;
}

body.ls-app-page :where(
  .profile-alert-success,
  .quest-alert-success,
  .spin-alert-success,
  .payment-calendar-alert-success,
  .admin-alert-success,
  .quest-admin-alert-success,
  .quest-admin-final-alert-success
) {
  border-color: rgba(98, 221, 160, 0.28) !important;
  color: #baf4d3 !important;
  background: var(--ls-success-soft) !important;
}

body.ls-app-page :where(
  .profile-alert-error,
  .quest-alert-error,
  .spin-alert-error,
  .payment-calendar-alert-error,
  .admin-alert-error,
  .quest-admin-alert-error,
  .quest-admin-final-alert-error
) {
  border-color: rgba(255, 130, 145, 0.28) !important;
  color: #ffc0c8 !important;
  background: var(--ls-danger-soft) !important;
}

body.ls-app-page :where(
  .profile-input,
  .profile-textarea,
  .admin-input,
  .admin-textarea,
  .admin-select,
  .admin-search-input,
  .quest-admin-input,
  .quest-admin-select,
  .quest-admin-textarea,
  .quest-admin-final-search-input,
  .quest-admin-final-select,
  .quest-admin-final-textarea,
  input[type="text"],
  input[type="search"],
  input[type="number"],
  input[type="datetime-local"],
  select,
  textarea
) {
  width: 100%;
  min-height: 46px !important;
  padding: 10px 13px !important;
  border: 1px solid var(--ls-border) !important;
  border-radius: var(--ls-radius-sm) !important;
  outline: 0 !important;
  color: var(--ls-text) !important;
  background: var(--ls-bg-soft) !important;
  box-shadow: none !important;
  font-size: max(16px, 0.87rem) !important;
  transition: border-color 160ms ease, box-shadow 160ms ease !important;
}

body.ls-app-page :where(textarea) {
  min-height: 116px !important;
  resize: vertical;
}

body.ls-app-page :where(input, select, textarea):focus {
  border-color: var(--ls-accent-strong) !important;
  box-shadow: var(--ls-focus) !important;
}

body.ls-app-page :where(input, textarea)::placeholder {
  color: var(--ls-muted-2) !important;
  opacity: 1 !important;
}

body.ls-app-page :where(
  .profile-form-field label,
  .admin-form-field label,
  .admin-label,
  .quest-admin-form-field label,
  .quest-admin-final-label,
  .quest-admin-final-form-field label
) {
  color: var(--ls-text-soft) !important;
  font-size: 0.72rem !important;
  font-weight: 740 !important;
  letter-spacing: 0.02em !important;
  text-transform: none !important;
}

body.ls-app-page :where(
  .profile-data-table-scroll,
  .profile-table-scroll,
  .quest-history-table-wrap,
  .spin-history-table-wrap,
  .payment-calendar-table-shell,
  .quest-flat-table-shell,
  .team-table-wrap,
  .team-roster-table-wrap,
  .admin-table-wrap,
  .admin-table-scroll,
  .quest-admin-table-wrap,
  .quest-admin-final-table-wrap
) {
  position: relative;
  width: 100%;
  border: 1px solid var(--ls-border) !important;
  border-radius: var(--ls-radius-md) !important;
  background: var(--ls-bg-soft) !important;
  overflow: auto !important;
  overscroll-behavior: contain;
  scrollbar-color: var(--ls-border-strong) transparent;
  scrollbar-width: thin;
  box-shadow: none !important;
}

body.ls-app-page table {
  width: 100% !important;
  border-collapse: collapse !important;
  border-spacing: 0 !important;
  color: var(--ls-text-soft) !important;
  background: transparent !important;
  font-size: 0.78rem !important;
}

body.ls-app-page table th {
  padding: 12px 14px !important;
  border: 0 !important;
  border-bottom: 1px solid var(--ls-border) !important;
  color: var(--ls-muted) !important;
  background: var(--ls-surface-2) !important;
  font-size: 0.64rem !important;
  font-weight: 780 !important;
  letter-spacing: 0.07em !important;
  text-align: left !important;
  text-transform: uppercase !important;
  white-space: nowrap;
}

body.ls-app-page table td {
  padding: 13px 14px !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(34, 46, 63, 0.74) !important;
  background: transparent !important;
  vertical-align: middle !important;
}

body.ls-app-page table tbody tr:last-child td {
  border-bottom: 0 !important;
}

body.ls-app-page table tbody tr:hover td {
  background: rgba(142, 232, 255, 0.025) !important;
}

body.ls-app-page :where(
  .quest-tabs-nav,
  .admin-tabs,
  .profile-tabs
) {
  padding: 5px !important;
  border: 1px solid var(--ls-border) !important;
  border-radius: var(--ls-radius-md) !important;
  background: var(--ls-bg-soft) !important;
}

body.ls-app-page :where(.quest-tab-button) {
  min-height: 42px !important;
  padding: 9px 12px !important;
  border: 1px solid transparent !important;
  border-radius: 4px !important;
  color: var(--ls-muted) !important;
  background: transparent !important;
  box-shadow: none !important;
  font-size: 0.74rem !important;
  font-weight: 730 !important;
}

body.ls-app-page .quest-tab-button.active,
body.ls-app-page .quest-tab-button.is-active {
  border-color: var(--ls-border) !important;
  color: var(--ls-text) !important;
  background: var(--ls-surface-2) !important;
}

body.ls-app-page :where(
  .profile-metric-card,
  .spin-stat-box,
  .admin-metric-card,
  .admin-mini-stat,
  .quest-admin-final-stat-box,
  .payment-calendar-balance-inline,
  .profile-balance-highlight-card
) {
  border: 1px solid var(--ls-border) !important;
  border-radius: var(--ls-radius-md) !important;
  background: var(--ls-bg-soft) !important;
  box-shadow: none !important;
}

body.ls-app-page :where(
  .profile-note-box,
  .admin-note-box,
  .quest-admin-note-box,
  .quest-admin-final-note-box,
  .quest-admin-final-note-box-soft,
  .profile-info-row,
  .quest-info-row,
  .quest-detail-row,
  .quest-admin-balance-row,
  .quest-admin-final-balance-row
) {
  border-color: var(--ls-border) !important;
  border-radius: var(--ls-radius-sm) !important;
  background: var(--ls-bg-soft) !important;
  box-shadow: none !important;
}

body.ls-app-page :where(
  .admin-danger-button,
  .admin-warning-button,
  .admin-table-delete-button,
  .quest-admin-button-danger,
  .quest-admin-final-danger-button,
  .payment-calendar-danger-button
) {
  border-color: rgba(255, 130, 145, 0.28) !important;
  color: var(--ls-danger) !important;
  background: var(--ls-danger-soft) !important;
  box-shadow: none !important;
}

body.ls-app-page :where(
  .profile-pagination-link,
  .spin-pagination-link,
  .admin-pagination-link,
  .team-page-link,
  .payment-calendar-pager-button
) {
  border: 1px solid var(--ls-border) !important;
  border-radius: 4px !important;
  color: var(--ls-text-soft) !important;
  background: var(--ls-surface) !important;
  box-shadow: none !important;
}

body.ls-app-page :where(
  .profile-pagination-current,
  .spin-pagination-current,
  .admin-pagination-current,
  .team-page-current,
  .payment-calendar-pager-current
) {
  border-color: rgba(142, 232, 255, 0.28) !important;
  color: var(--ls-accent) !important;
  background: var(--ls-accent-soft) !important;
}

.site-footer--app {
  width: min(100%, var(--ls-content-max));
  min-height: 64px;
  margin-top: 44px;
}

/* Pages particulières. */
.spin-machine-card-featured,
.profile-balance-highlight-card {
  border-color: rgba(142, 232, 255, 0.21) !important;
  background: var(--ls-accent-soft) !important;
}

.spin-machine-window {
  border: 1px solid var(--ls-border) !important;
  border-radius: var(--ls-radius-md) !important;
  background: var(--ls-bg-soft) !important;
  box-shadow: none !important;
}

.spin-machine-item {
  border: 1px solid var(--ls-border) !important;
  border-radius: var(--ls-radius-sm) !important;
  background: var(--ls-surface) !important;
  box-shadow: none !important;
}

.spin-launch-button,
.payment-calendar-gold-button {
  border-color: var(--ls-accent) !important;
  border-radius: var(--ls-radius-sm) !important;
  color: #061017 !important;
  background: var(--ls-accent) !important;
  box-shadow: none !important;
}

.spin-result-dialog {
  border: 1px solid var(--ls-border-strong) !important;
  border-radius: var(--ls-radius-xl) !important;
  background: #0d131d !important;
  box-shadow: none !important;
}

.spin-result-backdrop {
  background: rgba(0, 0, 0, 0.72) !important;
  backdrop-filter: blur(6px) !important;
}

.quest-monthly-window,
.team-unpaid-alert {
  border: 1px solid rgba(255, 208, 120, 0.25) !important;
  border-radius: var(--ls-radius-md) !important;
  background: var(--ls-warning-soft) !important;
  box-shadow: none !important;
}

.access-denied-main {
  min-height: calc(100svh - 180px) !important;
  padding: 0 !important;
}

/* Couche d'autorité du design system. Le projet historique comportait des
   sélecteurs de compatibilité très spécifiques ; le préfixe du contenu évite
   toute régression visuelle sans modifier les composants métier. */
html body.ls-app-page main#contenu-principal :is(
  .profile-card,
  .profile-state-card,
  .quest-panel,
  .quest-state-card,
  .quest-card,
  .spin-panel,
  .spin-state-panel,
  .payment-calendar-card,
  .payment-calendar-state-card,
  .admin-card,
  .admin-state-card,
  .quest-admin-card,
  .quest-admin-state-card,
  .quest-admin-focus-card,
  .quest-admin-subcard,
  .quest-admin-final-card,
  .quest-admin-final-state-card,
  .quest-admin-final-info-item,
  .quest-admin-final-action-card,
  .access-denied-card
) {
  border: 1px solid var(--ls-border) !important;
  border-radius: var(--ls-radius-lg) !important;
  background: var(--ls-surface) !important;
  background-image: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

html body.ls-app-page main#contenu-principal :is(
  .profile-hero-card,
  .quest-hero-card,
  .spin-hero-card,
  .payment-calendar-identity-card,
  .admin-hero-card,
  .team-hero-card,
  .quest-admin-page-heading,
  .quest-admin-final-hero-card
) {
  border-color: rgba(142, 232, 255, 0.18) !important;
  background: linear-gradient(135deg, rgba(142, 232, 255, 0.07), var(--ls-surface) 72%) !important;
}

html body.ls-app-page main#contenu-principal :is(
  .profile-metric-card,
  .spin-stat-box,
  .admin-metric-card,
  .admin-mini-stat,
  .quest-admin-final-stat-box,
  .payment-calendar-balance-inline,
  .profile-balance-highlight-card
) {
  border: 1px solid var(--ls-border) !important;
  border-radius: var(--ls-radius-md) !important;
  background: var(--ls-bg-soft) !important;
  background-image: none !important;
  box-shadow: none !important;
}

html body.ls-app-page main#contenu-principal :is(
  .button,
  .button-primary,
  .button-secondary,
  .btn-primary,
  .btn-secondary
) {
  display: inline-flex !important;
  min-height: 48px !important;
  padding: 11px 17px !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 9px !important;
  border: 1px solid var(--ls-border-strong) !important;
  border-radius: var(--ls-radius-sm) !important;
  color: var(--ls-text) !important;
  background: var(--ls-surface) !important;
  background-image: none !important;
  box-shadow: none !important;
  font-size: 0.84rem !important;
  font-weight: 780 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

html body.ls-app-page main#contenu-principal :is(
  .button.button-primary,
  .btn-primary,
  .spin-launch-button,
  .payment-calendar-gold-button
) {
  border-color: var(--ls-accent) !important;
  color: #061017 !important;
  background: var(--ls-accent) !important;
}

html body.ls-app-page main#contenu-principal :is(
  .button.button-secondary,
  .btn-secondary
) {
  border-color: var(--ls-border-strong) !important;
  color: var(--ls-text) !important;
  background: var(--ls-surface) !important;
}

html body.ls-app-page main#contenu-principal :is(
  .profile-input,
  .profile-textarea,
  .admin-input,
  .admin-textarea,
  .admin-select,
  .admin-search-input,
  .quest-admin-input,
  .quest-admin-select,
  .quest-admin-textarea,
  .quest-admin-final-search-input,
  .quest-admin-final-select,
  .quest-admin-final-textarea,
  input[type="text"],
  input[type="search"],
  input[type="number"],
  input[type="datetime-local"],
  select,
  textarea
) {
  border: 1px solid var(--ls-border) !important;
  border-radius: var(--ls-radius-sm) !important;
  color: var(--ls-text) !important;
  background: var(--ls-bg-soft) !important;
  background-image: none !important;
  box-shadow: none !important;
}

html body.ls-app-page main#contenu-principal :is(
  .profile-data-table-scroll,
  .profile-table-scroll,
  .quest-history-table-wrap,
  .spin-history-table-wrap,
  .payment-calendar-table-shell,
  .quest-flat-table-shell,
  .team-table-wrap,
  .team-roster-table-wrap,
  .admin-table-wrap,
  .admin-table-scroll,
  .quest-admin-table-wrap,
  .quest-admin-final-table-wrap
) {
  border: 1px solid var(--ls-border) !important;
  border-radius: var(--ls-radius-md) !important;
  background: var(--ls-bg-soft) !important;
  box-shadow: none !important;
}

html body.ls-app-page main#contenu-principal :is(
  .profile-chip,
  .profile-inline-pill,
  .profile-status-pill,
  .quest-status-badge,
  .quest-type-pill,
  .quest-cycle-pill,
  .quest-reward-pill,
  .spin-history-status,
  .payment-calendar-payment-status,
  .admin-role-badge,
  .admin-mini-badge,
  .admin-table-status,
  .quest-flat-status,
  .quest-admin-final-role-badge,
  .quest-admin-final-mini-badge
) {
  border: 1px solid var(--ls-border) !important;
  border-radius: 4px !important;
  color: var(--ls-text-soft) !important;
  background: var(--ls-surface-2) !important;
  background-image: none !important;
  box-shadow: none !important;
}

html body.ls-app-page :is(
  .app-icon-button,
  .app-tabbar-link,
  .app-login-button,
  .app-nav-link,
  .app-drawer-link
) {
  border-radius: var(--ls-radius-sm) !important;
}

html body.ls-app-page button.app-icon-button.app-icon-button,
html body.ls-app-page button.app-tabbar-link.app-tabbar-link {
  border-radius: var(--ls-radius-sm) !important;
}

html body:not(.ls-app-page) :is(
  .app-icon-button,
  .app-login-button,
  .app-drawer-link
) {
  border-radius: var(--ls-radius-sm) !important;
}

/* -------------------------------------------------------------------------- */
/* Responsive                                                                 */
/* -------------------------------------------------------------------------- */

@media (min-width: 1100px) {
  body.ls-app-page {
    padding-left: var(--ls-sidebar-width);
  }

  .app-sidebar {
    display: flex !important;
    flex-direction: column;
  }

  .app-mobile-header,
  .app-tabbar {
    display: none !important;
  }

  body.ls-app-page > main {
    padding: clamp(32px, 4vw, 58px) clamp(28px, 4vw, 64px) 50px !important;
  }

  html body.ls-app-page > main#contenu-principal {
    padding: clamp(32px, 4vw, 58px) clamp(28px, 4vw, 64px) 50px !important;
  }

  body.ls-app-page :where(
    .profile-hero-card,
    .quest-hero-card,
    .payment-calendar-identity-card
  ) {
    max-width: none !important;
  }

  .app-drawer-layer[data-drawer-layer="appMenu"] {
    display: none !important;
  }
}

@media (max-width: 1099px) {
  .app-sidebar {
    display: none !important;
  }

  .app-mobile-header {
    display: grid !important;
  }

  .app-tabbar {
    display: grid !important;
  }

  body.ls-app-page .site-footer--app {
    padding-bottom: 8px;
  }

  body.ls-app-page :where(
    .profile-hero-grid,
    .profile-main-grid,
    .quest-hero-grid,
    .quest-main-grid,
    .spin-hero-grid,
    .payment-calendar-hero-grid,
    .admin-top-grid,
    .team-top-grid,
    .quest-admin-workspace-grid,
    .quest-admin-final-top-grid,
    .quest-admin-final-main-grid
  ) {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body.ls-app-page :where(.admin-sidebar, .admin-main-column) {
    width: 100% !important;
  }
}

@media (max-width: 900px) {
  .marketing-nav {
    display: none;
  }

  .marketing-menu-button {
    display: inline-grid;
  }

  .home-hero-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .portal-preview {
    width: min(100%, 620px);
    margin: 0 auto;
  }

  body:not(.ls-app-page) .hero {
    padding-top: 136px;
  }

  body:not(.ls-app-page) .feature,
  body:not(.ls-app-page) .feature.reverse {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 6px !important;
  }

  body:not(.ls-app-page) .feature.reverse .feature-visual {
    order: 0;
  }

  body:not(.ls-app-page) .feature-visual {
    min-height: 280px !important;
  }
}

@media (max-width: 720px) {
  :root {
    --ls-radius-lg: 4px;
    --ls-radius-xl: 4px;
  }

  html {
    scroll-padding-top: 78px;
  }

  body.ls-app-page > main {
    padding-right: 12px !important;
    padding-left: 12px !important;
  }

  html body.ls-app-page > main#contenu-principal {
    padding: 84px 12px calc(92px + env(safe-area-inset-bottom)) !important;
  }

  .app-mobile-header {
    padding-right: 12px;
    padding-left: 12px;
  }

  .app-drawer-nav {
    grid-template-columns: minmax(0, 1fr);
  }

  .marketing-header {
    top: 10px;
    width: calc(100% - 20px);
    min-height: 60px;
    border-radius: 4px;
  }

  .marketing-brand img {
    width: 38px !important;
    height: 38px !important;
    max-width: 38px !important;
    flex-basis: 38px;
  }

  .marketing-brand {
    font-size: 0.86rem;
  }

  .marketing-login {
    display: none;
  }

  body:not(.ls-app-page) .hero {
    min-height: 0;
    padding: 118px 18px 62px;
  }

  body:not(.ls-app-page) .hero h1 {
    font-size: clamp(3.2rem, 18vw, 5.4rem) !important;
  }

  body:not(.ls-app-page) .hero-ctas,
  .home-cta-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }

  body:not(.ls-app-page) .hero-ctas > *,
  .home-cta-actions > * {
    width: 100%;
  }

  .portal-preview {
    padding: 11px;
    border-radius: 4px;
  }

  .portal-preview-balance {
    padding: 17px;
  }

  .portal-preview-card {
    min-height: 104px;
    padding: 13px;
  }

  body:not(.ls-app-page) .hero-metrics {
    margin-top: 54px !important;
  }

  body:not(.ls-app-page) .metric {
    padding: 8px 10px !important;
  }

  body:not(.ls-app-page) .metric-value {
    font-size: clamp(1.35rem, 7vw, 2rem) !important;
  }

  body:not(.ls-app-page) .metric-label {
    font-size: 0.61rem !important;
    line-height: 1.25;
    letter-spacing: 0.03em !important;
    text-transform: none !important;
    white-space: normal !important;
    overflow-wrap: anywhere;
  }

  body:not(.ls-app-page) .section {
    width: min(calc(100% - 24px), 1240px) !important;
    padding: 74px 0 !important;
  }

  body:not(.ls-app-page) .feature {
    padding: 8px !important;
    border-radius: 4px !important;
  }

  body:not(.ls-app-page) .feature-visual {
    min-height: 220px !important;
    border-radius: 4px !important;
  }

  body:not(.ls-app-page) .feature-content {
    padding: 24px 13px 28px !important;
  }

  .section-title {
    font-size: clamp(2rem, 11vw, 3.2rem) !important;
  }

  .home-cta {
    grid-template-columns: minmax(0, 1fr);
    width: calc(100% - 24px);
    padding: 28px 20px;
    border-radius: 4px;
  }

  .home-cta-mark {
    display: none;
  }

  .site-footer {
    display: grid;
    width: calc(100% - 24px);
    min-height: 0;
    padding: 24px 0;
    justify-items: start;
    gap: 11px;
  }

  body.ls-app-page :where(
    .profile-card,
    .quest-panel,
    .spin-panel,
    .payment-calendar-card,
    .admin-card,
    .quest-admin-card,
    .quest-admin-final-card
  ) {
    padding: 17px !important;
  }

  body.ls-app-page :where(
    .profile-hero-top,
    .quest-hero-top,
    .payment-calendar-hero-top,
    .admin-hero-header,
    .team-staff-head,
    .quest-admin-detail-top,
    .quest-admin-final-user-header
  ) {
    align-items: flex-start !important;
    flex-direction: column !important;
    gap: 16px !important;
  }

  body.ls-app-page :where(
    .profile-hero-actions,
    .quest-hero-actions,
    .payment-calendar-hero-actions,
    .hero-actions,
    .admin-actions-inline,
    .profile-actions-inline,
    .quest-inline-actions,
    .quest-admin-actions,
    .quest-admin-action-buttons,
    .quest-admin-final-action-buttons
  ) {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    width: 100% !important;
    max-width: none !important;
    gap: 8px !important;
  }

  body.ls-app-page :where(
    .profile-hero-actions,
    .quest-hero-actions,
    .payment-calendar-hero-actions,
    .hero-actions,
    .admin-actions-inline,
    .profile-actions-inline,
    .quest-inline-actions,
    .quest-admin-actions,
    .quest-admin-action-buttons,
    .quest-admin-final-action-buttons
  ) > * {
    width: 100% !important;
  }

  body.ls-app-page :where(
    .profile-metrics-grid,
    .spin-stats-grid,
    .admin-metrics-grid,
    .admin-mini-stats,
    .quest-admin-final-stats-grid,
    .quest-admin-final-info-grid,
    .quest-admin-focus-grid
  ) {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  body.ls-app-page :where(
    .quest-tabs-nav,
    .admin-tabs,
    .profile-tabs
  ) {
    display: flex !important;
    width: 100% !important;
    padding: 4px !important;
    overflow-x: auto !important;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
  }

  body.ls-app-page .quest-tab-button {
    flex: 0 0 auto !important;
    min-width: max-content !important;
    scroll-snap-align: start;
  }

  body.ls-app-page table {
    min-width: 680px;
  }

  body.ls-app-page .payment-calendar-small-table,
  body.ls-app-page .payment-calendar-current-table {
    min-width: 560px;
  }
}

@media (max-width: 420px) {
  .app-tabbar {
    padding-right: 4px;
    padding-left: 4px;
  }

  .app-tabbar-link {
    font-size: 0.54rem;
  }

  .app-tabbar-link .app-icon {
    width: 20px;
    height: 20px;
  }

  .portal-preview-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .portal-preview-card {
    min-height: 88px;
  }

  .portal-preview-card strong {
    margin-top: 10px;
  }

  body.ls-app-page :where(
    .profile-metrics-grid,
    .spin-stats-grid,
    .admin-metrics-grid,
    .admin-mini-stats,
    .quest-admin-final-stats-grid,
    .quest-admin-final-info-grid,
    .quest-admin-focus-grid
  ) {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

@media (prefers-contrast: more) {
  :root {
    --ls-border: #43556f;
    --ls-border-strong: #647b99;
    --ls-muted: #b5c0cf;
  }
}

/* -------------------------------------------------------------------------- */
/* Mobile V3 — shell isolé, rythme unique et priorité sur les styles hérités  */
/* -------------------------------------------------------------------------- */

@media (max-width: 1099px) {
  html body.ls-app-page {
    --ls-mobile-header-height: calc(64px + env(safe-area-inset-top));
    --ls-mobile-tabbar-height: calc(70px + env(safe-area-inset-bottom));
    padding: 0 !important;
  }

  html body.ls-app-page > #lsMobileHeader.ls-mobile-header {
    position: fixed !important;
    z-index: 900 !important;
    inset: 0 0 auto !important;
    display: grid !important;
    grid-template-columns: 44px minmax(0, 1fr) 44px !important;
    width: 100% !important;
    height: var(--ls-mobile-header-height) !important;
    min-height: var(--ls-mobile-header-height) !important;
    margin: 0 !important;
    padding: calc(10px + env(safe-area-inset-top)) 14px 10px !important;
    border: 0 !important;
    border-bottom: 1px solid var(--ls-border) !important;
    border-radius: 0 !important;
    background: #090d14 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    transform: none !important;
    isolation: isolate;
  }

  #lsMobileHeader .app-mobile-title {
    display: flex !important;
    min-width: 0;
    padding: 0 10px !important;
    align-items: center;
    justify-content: center;
    text-align: center;
  }

  #lsMobileHeader .app-mobile-title span {
    display: none !important;
  }

  #lsMobileHeader .app-mobile-title strong {
    overflow: hidden;
    margin: 0 !important;
    color: var(--ls-text) !important;
    font-size: 0.94rem !important;
    font-weight: 790 !important;
    line-height: 1.1 !important;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  #lsMobileHeader .app-icon-button,
  #lsMobileHeader .app-mobile-avatar,
  #lsMobileHeader .app-mobile-avatar img {
    width: 40px !important;
    height: 40px !important;
    max-width: 40px !important;
  }

  #lsMobileHeader .app-mobile-avatar img {
    display: block;
    border: 1px solid var(--ls-border-strong);
    border-radius: 4px !important;
    object-fit: cover;
  }

  html body.ls-app-page > #lsMobileTabbar.ls-mobile-tabbar {
    position: fixed !important;
    z-index: 910 !important;
    inset: auto 0 0 !important;
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    width: 100% !important;
    height: var(--ls-mobile-tabbar-height) !important;
    min-height: var(--ls-mobile-tabbar-height) !important;
    margin: 0 !important;
    padding: 7px 6px calc(7px + env(safe-area-inset-bottom)) !important;
    border: 0 !important;
    border-top: 1px solid var(--ls-border) !important;
    border-radius: 0 !important;
    background: #090d14 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    transform: none !important;
  }

  #lsMobileTabbar .app-tabbar-link {
    display: grid !important;
    min-width: 0 !important;
    min-height: 52px !important;
    padding: 5px 2px 4px !important;
    place-items: center !important;
    align-content: center !important;
    gap: 4px !important;
    border: 0 !important;
    border-radius: 4px !important;
    color: var(--ls-muted) !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  #lsMobileTabbar .app-tabbar-link.is-active {
    color: var(--ls-accent) !important;
    background: var(--ls-accent-soft) !important;
  }

  html body.ls-app-page > main#contenu-principal {
    position: relative !important;
    inset: auto !important;
    display: grid !important;
    width: 100% !important;
    max-width: none !important;
    min-height: 100svh !important;
    height: auto !important;
    margin: 0 !important;
    padding: calc(var(--ls-mobile-header-height) + 16px) 14px calc(var(--ls-mobile-tabbar-height) + 22px) !important;
    align-content: start !important;
    gap: 16px !important;
    overflow-x: clip !important;
    transform: none !important;
  }

  html body.ls-app-page > main#contenu-principal > :where(section, footer) {
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
  }

  html body.ls-app-page > main#contenu-principal .container {
    width: 100% !important;
    max-width: 100% !important;
  }

  html body.ls-app-page > .ls-mobile-drawer-layer {
    position: fixed !important;
    z-index: 1400 !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100vh !important;
    height: 100dvh !important;
    margin: 0 !important;
  }

  html body > .ls-mobile-drawer-layer .app-drawer-backdrop {
    background: rgba(2, 4, 8, 0.76) !important;
    transition: opacity 200ms ease !important;
  }

  html body > .ls-mobile-drawer-layer > .ls-mobile-drawer {
    position: absolute !important;
    inset: 0 0 0 auto !important;
    display: flex !important;
    width: min(100%, 430px) !important;
    max-width: 430px !important;
    height: 100vh !important;
    height: 100dvh !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 14px calc(14px + env(safe-area-inset-bottom)) !important;
    flex-direction: column !important;
    border: 0 !important;
    border-left: 1px solid var(--ls-border-strong) !important;
    border-radius: 4px 0 0 4px !important;
    background: #0c121b !important;
    box-shadow: none !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    transform: translate3d(104%, 0, 0) !important;
    transition: transform 230ms var(--ls-ease) !important;
  }

  html body > .ls-mobile-drawer-layer.is-open > .ls-mobile-drawer {
    transform: translate3d(0, 0, 0) !important;
  }

  .ls-mobile-drawer .app-drawer-handle {
    display: none !important;
  }

  .ls-mobile-drawer .app-drawer-header {
    position: sticky;
    z-index: 3;
    top: 0;
    margin: 0 -14px 12px;
    padding: calc(14px + env(safe-area-inset-top)) 14px 13px !important;
    border-bottom: 1px solid var(--ls-border);
    background: #0c121b;
  }

  .ls-mobile-drawer .app-drawer-heading {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 11px;
  }

  .ls-mobile-drawer .app-drawer-brand-mark {
    display: block;
    width: 42px !important;
    height: 42px !important;
    max-width: 42px !important;
    flex: 0 0 42px;
    border: 1px solid var(--ls-border-strong);
    border-radius: 4px;
    object-fit: cover;
  }

  .ls-mobile-drawer .app-drawer-header h2 {
    margin-top: 1px;
    font-size: 1.08rem;
  }

  .ls-mobile-drawer .app-drawer-nav {
    display: block !important;
    padding: 5px !important;
    flex: 0 0 auto !important;
    border: 1px solid var(--ls-border) !important;
    border-radius: 4px !important;
    background: rgba(255, 255, 255, 0.018) !important;
    overflow: hidden;
  }

  .ls-mobile-drawer .app-drawer-nav-label {
    display: block;
    padding: 10px 10px 7px !important;
    color: var(--ls-muted) !important;
  }

  .ls-mobile-drawer .app-drawer-nav-label--spaced {
    margin: 6px -5px 0 !important;
    padding: 13px 15px 7px !important;
    border-top: 1px solid var(--ls-border);
  }

  .ls-mobile-drawer .app-drawer-link {
    min-height: 48px !important;
    margin: 1px 0 !important;
    padding: 9px 11px !important;
    border: 0 !important;
    border-radius: 4px !important;
    color: var(--ls-text-soft) !important;
    background: transparent !important;
    font-size: 0.84rem !important;
  }

  .ls-mobile-drawer .app-drawer-link:hover {
    color: var(--ls-text) !important;
    background: var(--ls-surface) !important;
  }

  .ls-mobile-drawer .app-drawer-link.is-active {
    color: var(--ls-text) !important;
    background: var(--ls-accent-soft) !important;
  }

  .ls-mobile-drawer .app-drawer-link .app-icon {
    width: 20px;
    height: 20px;
  }

  .ls-mobile-drawer .app-drawer-user {
    margin-bottom: 12px;
    border-radius: 4px;
  }

  .ls-mobile-drawer .app-drawer-footer {
    position: relative;
    bottom: auto;
    margin: auto -14px 0;
    padding: 14px 14px calc(14px + env(safe-area-inset-bottom));
    flex: 0 0 auto;
    border-top: 0;
    background: #0c121b;
  }

  .ls-mobile-drawer .app-drawer-footer .app-login-button {
    min-height: 52px;
    border-radius: 4px;
  }

  .ls-mobile-drawer .app-drawer-security-note {
    display: flex;
    margin: 10px 0 0;
    align-items: center;
    justify-content: center;
    gap: 7px;
    color: var(--ls-muted-2);
    font-size: 0.68rem;
  }

  .ls-mobile-drawer .app-drawer-security-note .app-icon {
    width: 14px;
    height: 14px;
    color: var(--ls-success);
  }
}

@media (max-width: 720px) {
  body:not(.ls-app-page) .hero {
    padding: 108px 16px 52px !important;
  }

  .home-hero-layout {
    gap: 32px !important;
  }

  .home-hero-copy {
    text-align: center;
  }

  .home-eyebrow {
    justify-content: center;
    font-size: 0.65rem !important;
    line-height: 1.35;
  }

  body:not(.ls-app-page) .hero h1 {
    max-width: 620px !important;
    margin: 18px auto 20px !important;
    font-size: clamp(2.05rem, 9.6vw, 2.75rem) !important;
    line-height: 1.01 !important;
    letter-spacing: -0.058em !important;
    text-wrap: balance;
  }

  body:not(.ls-app-page) .hero h1 em {
    margin-top: 3px;
  }

  body:not(.ls-app-page) .hero-sub {
    max-width: 560px;
    margin-right: auto !important;
    margin-left: auto !important;
    font-size: 0.96rem !important;
    line-height: 1.62 !important;
    text-wrap: pretty;
  }

  body:not(.ls-app-page) .hero-ctas {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    width: min(100%, 390px) !important;
    margin: 26px auto 0 !important;
    justify-items: stretch !important;
    gap: 10px !important;
  }

  body:not(.ls-app-page) .hero-ctas > * {
    width: 100% !important;
    max-width: none !important;
    min-height: 50px !important;
    margin: 0 !important;
    justify-content: center !important;
    text-align: center !important;
  }

  .portal-preview {
    width: 100% !important;
    margin: 0 auto !important;
  }

  html body.ls-app-page > main#contenu-principal {
    padding-right: 12px !important;
    padding-left: 12px !important;
    gap: 14px !important;
  }

  html body.ls-app-page main#contenu-principal :is(h1) {
    font-size: clamp(1.55rem, 7.5vw, 1.95rem) !important;
    line-height: 1.08 !important;
  }

  html body.ls-app-page main#contenu-principal :is(h2) {
    font-size: clamp(1.18rem, 5.8vw, 1.45rem) !important;
    line-height: 1.18 !important;
  }

  html body.ls-app-page main#contenu-principal :is(h3) {
    font-size: 1rem !important;
    line-height: 1.25 !important;
  }

  html body.ls-app-page main#contenu-principal :is(
    .admin-hero-text,
    .admin-section-note,
    .profile-lead,
    .quest-lead,
    .payment-calendar-subtitle,
    .quest-admin-lead
  ) {
    font-size: 0.9rem !important;
    line-height: 1.58 !important;
  }

  html body.ls-app-page main#contenu-principal :is(
    .profile-card,
    .quest-panel,
    .spin-panel,
    .payment-calendar-card,
    .admin-card,
    .quest-admin-card,
    .quest-admin-final-card
  ) {
    padding: 16px !important;
  }

  html body.ls-app-page main#contenu-principal :is(
    input[type="text"],
    input[type="search"],
    input[type="number"],
    input[type="datetime-local"],
    select
  ) {
    height: 48px !important;
    min-height: 48px !important;
    max-height: 48px !important;
    padding: 9px 12px !important;
  }

  html body.ls-app-page main#contenu-principal :is(
    .admin-section-head,
    .profile-section-head,
    .quest-section-head,
    .payment-calendar-section-head
  ) {
    margin: 0 0 11px !important;
  }

  html body.ls-app-page main#contenu-principal :is(
    .admin-payment-calendar-form,
    .admin-form-grid,
    .profile-form-grid,
    .quest-admin-form-grid
  ) {
    gap: 12px !important;
  }

  html body.ls-app-page main#contenu-principal :is(
    .quest-tabs-nav,
    .admin-tabs,
    .profile-tabs
  ) {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
  }

  html body.ls-app-page main#contenu-principal .quest-tab-button {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: max-content !important;
    scroll-snap-align: start;
  }
}

@media (max-width: 600px) {
  html body > .ls-mobile-drawer-layer .app-drawer-backdrop {
    background: #0c121b !important;
  }

  html body > .ls-mobile-drawer-layer > .ls-mobile-drawer {
    inset: 0 !important;
    width: 100% !important;
    max-width: none !important;
    border-left: 0 !important;
    border-radius: 0 !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html body > .ls-mobile-drawer-layer .app-drawer-backdrop,
  html body > .ls-mobile-drawer-layer > .ls-mobile-drawer {
    transition-duration: 0.01ms !important;
  }
}

/* -------------------------------------------------------------------------- */
/* V4 — écran de reconnexion unifié                                           */
/* -------------------------------------------------------------------------- */

html body.ls-app-page > main#contenu-principal:has(> .ls-auth-gate) {
  display: grid !important;
  grid-template-rows: minmax(0, 1fr) auto !important;
  min-height: 100svh !important;
  min-height: 100dvh !important;
  align-content: stretch !important;
}

html body.ls-app-page .ls-auth-gate {
  display: grid !important;
  width: 100% !important;
  min-width: 0 !important;
  padding: 0 !important;
  place-items: center !important;
}

html body.ls-app-page .ls-auth-gate > .container {
  width: min(100%, 960px) !important;
  max-width: 960px !important;
}

html body.ls-app-page .ls-auth-gate-card {
  display: grid !important;
  width: 100% !important;
  padding: 0 !important;
  grid-template-columns: minmax(250px, 0.8fr) minmax(0, 1.2fr) !important;
  border: 1px solid var(--ls-border-strong) !important;
  border-radius: 4px !important;
  background: #0d141e !important;
  box-shadow: none !important;
  overflow: hidden !important;
}

.ls-auth-gate-visual {
  position: relative;
  display: flex;
  min-height: 490px;
  padding: clamp(24px, 4vw, 38px);
  flex-direction: column;
  justify-content: space-between;
  border-right: 1px solid var(--ls-border);
  background:
    radial-gradient(circle at 22% 72%, rgba(142, 232, 255, 0.13), transparent 34%),
    #101a27;
  overflow: hidden;
}

.ls-auth-gate-visual::after {
  position: absolute;
  right: -54px;
  bottom: -62px;
  width: 190px;
  height: 190px;
  border: 1px solid rgba(142, 232, 255, 0.13);
  border-radius: 50%;
  content: "";
}

.ls-auth-gate-brand {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 11px;
  color: var(--ls-text-soft);
  font-size: 0.88rem;
}

.ls-auth-gate-brand img {
  display: block;
  width: 48px !important;
  height: 48px !important;
  max-width: 48px !important;
  border: 1px solid var(--ls-border-strong);
  border-radius: 4px;
  object-fit: cover;
}

.ls-auth-gate-shield {
  position: relative;
  z-index: 1;
  display: grid;
  width: 88px;
  height: 88px;
  border: 1px solid rgba(142, 232, 255, 0.26);
  border-radius: 4px;
  place-items: center;
  color: var(--ls-accent);
  background: rgba(142, 232, 255, 0.08);
  font-size: 2rem;
}

.ls-auth-gate-visual-copy {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 8px;
  max-width: 280px;
}

.ls-auth-gate-visual-copy strong {
  color: var(--ls-text);
  font-size: 1.12rem;
}

.ls-auth-gate-visual-copy span {
  color: var(--ls-muted);
  font-size: 0.8rem;
  line-height: 1.55;
}

.ls-auth-gate-content {
  display: flex;
  min-width: 0;
  padding: clamp(28px, 5vw, 54px);
  flex-direction: column;
  justify-content: center;
}

.ls-auth-gate-eyebrow {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  gap: 8px;
  color: var(--ls-accent);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.ls-auth-gate-eyebrow i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ls-success);
}

html body.ls-app-page main#contenu-principal .ls-auth-gate-content h1 {
  max-width: 520px !important;
  margin: 14px 0 15px !important;
  color: var(--ls-text) !important;
  font-size: clamp(2rem, 4vw, 3.15rem) !important;
  font-weight: 820 !important;
  line-height: 1.02 !important;
  letter-spacing: -0.055em !important;
  text-wrap: balance;
}

html body.ls-app-page .ls-auth-gate .ls-connection-required-text {
  max-width: 570px !important;
  margin: 0 !important;
  color: var(--ls-muted) !important;
  font-family: inherit !important;
  font-size: 0.92rem !important;
  font-weight: 470 !important;
  line-height: 1.65 !important;
  letter-spacing: 0 !important;
}

.ls-auth-gate-actions {
  display: grid;
  gap: 10px;
  margin-top: 26px;
}

html body.ls-app-page .ls-auth-gate .ls-connection-required-button {
  display: grid !important;
  width: 100% !important;
  min-height: 54px !important;
  padding: 12px 15px !important;
  grid-template-columns: 22px minmax(0, 1fr) 18px !important;
  align-items: center !important;
  gap: 10px !important;
  border: 1px solid rgba(142, 232, 255, 0.72) !important;
  border-radius: 4px !important;
  color: #071016 !important;
  background: var(--ls-accent) !important;
  box-shadow: none !important;
  font-family: inherit !important;
  font-size: 0.9rem !important;
  font-weight: 820 !important;
  line-height: 1.15 !important;
  letter-spacing: 0 !important;
  text-align: center !important;
}

html body.ls-app-page .ls-auth-gate .ls-connection-required-button:hover,
html body.ls-app-page .ls-auth-gate .ls-connection-required-button:focus-visible {
  color: #071016 !important;
  filter: brightness(1.04);
  transform: translateY(-1px);
}

.ls-auth-gate-home-link {
  display: inline-flex;
  min-height: 42px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 4px;
  color: var(--ls-text-soft);
  font-size: 0.78rem;
  font-weight: 700;
}

.ls-auth-gate-home-link:hover {
  color: var(--ls-text);
  background: var(--ls-surface);
}

.ls-auth-gate-assurances {
  display: flex;
  margin: 22px 0 0;
  padding: 18px 0 0;
  flex-wrap: wrap;
  gap: 10px 18px;
  border-top: 1px solid var(--ls-border);
  list-style: none;
}

.ls-auth-gate-assurances li {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--ls-muted-2);
  font-size: 0.69rem;
  font-weight: 650;
}

.ls-auth-gate-assurances i {
  color: var(--ls-success);
  font-size: 0.72rem;
}

.ls-auth-gate--suspended .ls-auth-gate-eyebrow,
.ls-auth-gate--suspended .ls-auth-gate-shield {
  color: var(--ls-warning);
}

.ls-auth-gate--suspended .ls-auth-gate-eyebrow i {
  background: var(--ls-warning);
}

.ls-auth-gate--suspended .ls-auth-gate-shield {
  border-color: rgba(255, 208, 120, 0.28);
  background: var(--ls-warning-soft);
}

.ls-auth-gate-reason {
  display: grid;
  gap: 5px;
  margin-top: 20px;
  padding: 12px 14px;
  border: 1px solid rgba(255, 208, 120, 0.22);
  border-radius: 4px;
  background: rgba(255, 208, 120, 0.07);
}

.ls-auth-gate-reason span {
  color: var(--ls-warning);
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.ls-auth-gate-reason strong {
  color: var(--ls-text-soft);
  font-size: 0.76rem;
  font-weight: 650;
  line-height: 1.45;
}

@media (max-width: 1099px) {
  html body.ls-app-page > main#contenu-principal:has(> .ls-auth-gate) {
    padding: calc(var(--ls-mobile-header-height) + 12px) 12px 14px !important;
    gap: 12px !important;
  }

  html body.ls-app-page > main#contenu-principal:has(> .ls-auth-gate) > .site-footer--app {
    padding-bottom: 0 !important;
  }
}

@media (max-width: 700px) {
  html body.ls-app-page .ls-auth-gate-card {
    grid-template-columns: minmax(0, 1fr) !important;
    border-radius: 4px !important;
  }

  .ls-auth-gate-visual {
    min-height: 0;
    padding: 16px 17px;
    flex-direction: row;
    align-items: center;
    border-right: 0;
    border-bottom: 1px solid var(--ls-border);
    background: #101a27;
  }

  .ls-auth-gate-brand {
    font-size: 0.8rem;
  }

  .ls-auth-gate-brand img {
    width: 40px !important;
    height: 40px !important;
    max-width: 40px !important;
    border-radius: 4px;
  }

  .ls-auth-gate-shield {
    width: 40px;
    height: 40px;
    margin-left: auto;
    border-radius: 4px;
    font-size: 1rem;
  }

  .ls-auth-gate-visual-copy,
  .ls-auth-gate-visual::after {
    display: none;
  }

  .ls-auth-gate-content {
    padding: 24px 18px 20px;
  }

  html body.ls-app-page main#contenu-principal .ls-auth-gate-content h1 {
    margin: 12px 0 13px !important;
    font-size: clamp(1.7rem, 8.2vw, 2.15rem) !important;
    line-height: 1.04 !important;
  }

  html body.ls-app-page .ls-auth-gate .ls-connection-required-text {
    font-size: 0.84rem !important;
    line-height: 1.58 !important;
  }

  .ls-auth-gate-actions {
    margin-top: 21px;
  }

  html body.ls-app-page .ls-auth-gate .ls-connection-required-button {
    min-height: 52px !important;
    font-size: 0.84rem !important;
  }

  .ls-auth-gate-assurances {
    margin-top: 17px;
    padding-top: 15px;
    justify-content: center;
  }

  html body.ls-app-page > main#contenu-principal:has(> .ls-auth-gate) > .site-footer--app {
    display: grid;
    min-height: 0;
    margin-top: 0;
    padding: 15px 0 4px !important;
    justify-items: center;
    gap: 8px;
    text-align: center;
  }

  html body.ls-app-page > main#contenu-principal:has(> .ls-auth-gate) > .site-footer--app .site-footer-status {
    display: none;
  }
}

@media (max-width: 360px) {
  .ls-auth-gate-content {
    padding: 20px 15px 17px;
  }

  .ls-auth-gate-assurances {
    display: grid;
    justify-content: start;
    gap: 8px;
  }
}

/* =========================================================
   LiveSea V6 — vitrine mobile compacte et roster Discord strict
   ========================================================= */
@media (max-width: 720px) {
  body:not(.ls-app-page) .section {
    width: min(calc(100% - 24px), 1240px) !important;
    padding-top: 48px !important;
    padding-bottom: 48px !important;
  }

  body:not(.ls-app-page) .section-title {
    max-width: 22ch !important;
    margin-right: auto !important;
    margin-left: auto !important;
    font-size: clamp(1.65rem, 7.4vw, 2rem) !important;
    line-height: 1.04 !important;
    letter-spacing: -0.048em !important;
    text-wrap: balance;
  }

  body:not(.ls-app-page) .section-body {
    font-size: 0.82rem !important;
    line-height: 1.58 !important;
  }

  body:not(.ls-app-page) #team {
    width: min(calc(100% - 24px), 1240px) !important;
    padding: 46px 0 !important;
  }

  body:not(.ls-app-page) #team > .section-title {
    max-width: 14ch !important;
    margin-bottom: 8px !important;
    font-size: clamp(1.55rem, 6.8vw, 1.85rem) !important;
    letter-spacing: -0.045em !important;
  }

  body:not(.ls-app-page) #team > .section-body {
    max-width: 31rem !important;
    padding: 0 8px !important;
    font-size: 0.76rem !important;
    line-height: 1.5 !important;
  }

  body:not(.ls-app-page) #team .team-carousel {
    margin-top: 18px !important;
  }

  body:not(.ls-app-page) #team .carousel-viewport {
    width: 100% !important;
    border-radius: 4px !important;
    scroll-snap-type: x mandatory !important;
    scroll-padding-inline: 0 !important;
    overscroll-behavior-inline: contain;
  }

  body:not(.ls-app-page) #team .carousel-track {
    width: 100% !important;
    min-width: 100% !important;
    gap: 10px !important;
  }

  body:not(.ls-app-page) #team .carousel-track .team-member-card,
  body:not(.ls-app-page) #team .team-member-card {
    display: grid !important;
    grid-template-columns: 58px minmax(0, 1fr) !important;
    grid-template-areas:
      "avatar name"
      "avatar role"
      "mission mission" !important;
    flex: 0 0 100% !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 17px !important;
    align-items: center !important;
    column-gap: 13px !important;
    row-gap: 3px !important;
    border-radius: 4px !important;
    text-align: left !important;
    overflow: hidden !important;
    scroll-snap-align: start !important;
    contain: layout paint style;
  }

  body:not(.ls-app-page) #team .team-avatar.large {
    grid-area: avatar !important;
    width: 58px !important;
    height: 58px !important;
    min-width: 58px !important;
    margin: 0 !important;
  }

  body:not(.ls-app-page) #team .team-pseudo {
    grid-area: name !important;
    width: auto !important;
    min-width: 0 !important;
    margin: 0 !important;
    color: var(--ls-text) !important;
    font-size: 0.9rem !important;
    line-height: 1.22 !important;
    text-align: left !important;
    overflow-wrap: anywhere !important;
  }

  body:not(.ls-app-page) #team .team-role {
    grid-area: role !important;
    width: auto !important;
    min-width: 0 !important;
    margin: 0 !important;
    font-size: 0.56rem !important;
    line-height: 1.3 !important;
    letter-spacing: 0.12em !important;
    text-align: left !important;
    overflow-wrap: anywhere !important;
  }

  body:not(.ls-app-page) #team .team-mission {
    display: block !important;
    grid-area: mission !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    min-height: 0 !important;
    margin: 12px 0 0 !important;
    padding: 11px 0 0 !important;
    border-top: 1px solid var(--ls-border) !important;
    font-size: 0.69rem !important;
    line-height: 1.48 !important;
    text-align: left !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
    hyphens: auto;
  }

  body:not(.ls-app-page) #team .team-mission span {
    display: inline !important;
    margin: 0 5px 0 0 !important;
    font-size: 0.56rem !important;
    letter-spacing: 0.09em !important;
    text-align: left !important;
  }

  body:not(.ls-app-page) #team .carousel-footer {
    width: min(100%, 270px) !important;
    margin-top: 11px !important;
    grid-template-columns: 34px minmax(110px, 1fr) 34px !important;
    gap: 9px !important;
  }

  body:not(.ls-app-page) #team .carousel-control {
    width: 34px !important;
    height: 34px !important;
    border-radius: 4px !important;
  }

  body:not(.ls-app-page) .silk-divider {
    width: calc(100% - 24px) !important;
  }
}

@media (max-width: 380px) {
  body:not(.ls-app-page) #team .carousel-track .team-member-card,
  body:not(.ls-app-page) #team .team-member-card {
    grid-template-columns: 50px minmax(0, 1fr) !important;
    padding: 14px !important;
    column-gap: 11px !important;
  }

  body:not(.ls-app-page) #team .team-avatar.large {
    width: 50px !important;
    height: 50px !important;
    min-width: 50px !important;
  }
}

/* -------------------------------------------------------------------------- */
/* V5 — interface applicative compacte, roster fiable et mobile sans débordement */
/* -------------------------------------------------------------------------- */

html.app-is-ready .app-drawer,
html.app-is-ready .app-drawer-backdrop {
  will-change: transform, opacity;
}

body.ls-app-page > main#contenu-principal > :where(section) {
  content-visibility: auto;
  contain-intrinsic-size: auto 560px;
}

body.ls-app-page :where(.quest-card, .admin-card) {
  contain: layout paint style;
}

.admin-discord-sync {
  display: grid;
  grid-template-columns: 8px minmax(0, 1fr) auto;
  margin-top: 17px;
  padding-top: 14px;
  align-items: center;
  gap: 10px;
  border-top: 1px solid var(--ls-border);
}

.admin-discord-sync-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ls-warning);
}

.admin-discord-sync.is-ok .admin-discord-sync-dot {
  background: var(--ls-success);
}

.admin-discord-sync > span:nth-child(2) {
  display: grid;
  min-width: 0;
}

.admin-discord-sync strong {
  color: var(--ls-text-soft);
  font-size: 0.74rem;
}

.admin-discord-sync small {
  margin-top: 2px;
  color: var(--ls-muted-2);
  font-size: 0.63rem;
}

.admin-discord-sync a {
  min-height: 34px;
  padding: 8px 10px;
  border: 1px solid var(--ls-border);
  border-radius: 4px;
  color: var(--ls-accent);
  font-size: 0.67rem;
  font-weight: 760;
}

/* Catalogue de quêtes : une hiérarchie courte, lisible et tactile. */
html body.ls-app-page main.quest-page {
  gap: 14px !important;
}

html body.ls-app-page .quest-page :where(.quest-hero, .quest-main-section) {
  margin: 0 !important;
}

html body.ls-app-page .quest-page .quest-hero-card {
  padding: 20px !important;
  border-radius: 4px !important;
}

html body.ls-app-page .quest-page .quest-hero-top {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 20px !important;
}

html body.ls-app-page .quest-page .quest-identity {
  display: flex !important;
  min-width: 0 !important;
  align-items: center !important;
  gap: 13px !important;
}

html body.ls-app-page .quest-page .quest-avatar-box {
  width: 54px !important;
  height: 54px !important;
  max-width: 54px !important;
  flex: 0 0 54px !important;
  border-radius: 4px !important;
  overflow: hidden !important;
}

html body.ls-app-page .quest-page .quest-avatar-box :where(img, .quest-avatar-fallback) {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

html body.ls-app-page .quest-page .quest-identity-content h1 {
  margin: 0 0 3px !important;
  font-size: clamp(1.15rem, 2.2vw, 1.55rem) !important;
  line-height: 1.12 !important;
}

html body.ls-app-page .quest-page .quest-subtitle {
  margin: 0 !important;
  color: var(--ls-muted) !important;
  font-size: 0.75rem !important;
  line-height: 1.4 !important;
}

html body.ls-app-page .quest-page .quest-hero-actions {
  display: flex !important;
  width: auto !important;
  max-width: none !important;
  flex: 0 0 auto !important;
  gap: 8px !important;
}

html body.ls-app-page .quest-page .quest-hero-actions .button {
  width: auto !important;
  min-height: 42px !important;
  padding: 9px 12px !important;
  font-size: 0.74rem !important;
}

html body.ls-app-page .quest-page .quest-tabs-card,
html body.ls-app-page .quest-page .quest-history-card {
  width: 100% !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 18px !important;
  border-radius: 4px !important;
}

html body.ls-app-page .quest-page .quest-main-grid,
html body.ls-app-page .quest-page .quest-main-column {
  display: grid !important;
  width: 100% !important;
  gap: 14px !important;
}

html body.ls-app-page .quest-page .quest-overview-strip {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  margin: 0 0 13px !important;
  border: 1px solid var(--ls-border) !important;
  border-radius: 4px !important;
  background: #0b111a !important;
  overflow: hidden !important;
}

html body.ls-app-page .quest-page .quest-overview-strip > div {
  display: grid !important;
  min-width: 0 !important;
  min-height: 58px !important;
  padding: 9px 11px !important;
  align-content: center !important;
  gap: 2px !important;
  border-right: 1px solid var(--ls-border) !important;
}

html body.ls-app-page .quest-page .quest-overview-strip > div:last-child {
  border-right: 0 !important;
}

html body.ls-app-page .quest-page .quest-overview-strip span {
  overflow: hidden !important;
  color: var(--ls-muted-2) !important;
  font-size: 0.59rem !important;
  font-weight: 720 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html body.ls-app-page .quest-page .quest-overview-strip strong {
  color: var(--ls-text) !important;
  font-size: 1rem !important;
  line-height: 1.1 !important;
}

html body.ls-app-page .quest-page .quest-tabs-nav {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 8px !important;
  margin: 0 0 17px !important;
  padding: 4px !important;
  border: 1px solid var(--ls-border) !important;
  border-radius: 4px !important;
  background: #0b111a !important;
}

html body.ls-app-page .quest-page .quest-tab-button {
  display: flex !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 40px !important;
  padding: 8px 10px !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  border: 0 !important;
  border-radius: 4px !important;
  color: var(--ls-muted) !important;
  background: transparent !important;
  box-shadow: none !important;
  font-size: 0.72rem !important;
}

html body.ls-app-page .quest-page .quest-tab-button.is-active {
  color: var(--ls-text) !important;
  background: var(--ls-surface-2) !important;
}

html body.ls-app-page .quest-page .quest-tab-button strong {
  display: inline-grid !important;
  min-width: 22px !important;
  height: 22px !important;
  padding: 0 6px !important;
  place-items: center !important;
  border-radius: 7px !important;
  color: var(--ls-muted) !important;
  background: rgba(255, 255, 255, 0.055) !important;
  font-size: 0.65rem !important;
}

html body.ls-app-page .quest-page .quest-tab-button.is-active strong {
  color: var(--ls-accent) !important;
  background: var(--ls-accent-soft) !important;
}

html body.ls-app-page .quest-page .quest-tab-intro {
  margin: 0 0 14px !important;
  padding: 0 2px !important;
}

html body.ls-app-page .quest-page .quest-tab-intro h3 {
  margin: 0 !important;
  font-size: 1rem !important;
}

html body.ls-app-page .quest-page .quest-tab-intro p {
  max-width: 760px !important;
  margin: 4px 0 0 !important;
  color: var(--ls-muted) !important;
  font-size: 0.75rem !important;
  line-height: 1.5 !important;
}

html body.ls-app-page .quest-page .quest-card-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 11px !important;
}

html body.ls-app-page .quest-page .quest-card {
  display: flex !important;
  min-width: 0 !important;
  min-height: 0 !important;
  padding: 15px !important;
  justify-content: flex-start !important;
  gap: 13px !important;
  border-radius: 4px !important;
  background: #0e1621 !important;
}

html body.ls-app-page .quest-page .quest-card-top,
html body.ls-app-page .quest-page .quest-card-main {
  display: block !important;
  width: 100% !important;
}

html body.ls-app-page .quest-page .quest-card-head {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: start !important;
  gap: 10px !important;
}

html body.ls-app-page .quest-page .quest-card-head h3 {
  margin: 0 !important;
  color: var(--ls-text) !important;
  font-size: 0.91rem !important;
  font-weight: 760 !important;
  line-height: 1.32 !important;
  letter-spacing: -0.025em !important;
}

html body.ls-app-page .quest-page .quest-card-tags {
  display: flex !important;
  margin: 8px 0 0 !important;
  gap: 6px !important;
}

html body.ls-app-page .quest-page :where(.quest-type-pill, .quest-cycle-pill, .quest-status-badge) {
  min-height: 24px !important;
  padding: 4px 7px !important;
  border-radius: 8px !important;
  font-size: 0.62rem !important;
  line-height: 1.15 !important;
}

html body.ls-app-page .quest-page .quest-card-details {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 7px !important;
  margin: 12px 0 0 !important;
}

html body.ls-app-page .quest-page .quest-detail-row {
  display: grid !important;
  min-width: 0 !important;
  min-height: 62px !important;
  padding: 9px 10px !important;
  align-content: start !important;
  gap: 4px !important;
  border: 1px solid rgba(255, 255, 255, 0.055) !important;
  border-radius: 4px !important;
  background: #0a1018 !important;
}

html body.ls-app-page .quest-page .quest-detail-row > span {
  color: var(--ls-muted-2) !important;
  font-size: 0.58rem !important;
  font-weight: 780 !important;
  letter-spacing: 0.07em !important;
}

html body.ls-app-page .quest-page .quest-detail-row > strong {
  color: var(--ls-text-soft) !important;
  font-size: 0.76rem !important;
  font-weight: 680 !important;
  line-height: 1.35 !important;
}

html body.ls-app-page .quest-page .quest-reward-pill {
  min-height: 25px !important;
  padding: 4px 7px !important;
  gap: 6px !important;
  border: 0 !important;
  border-radius: 8px !important;
  background: var(--ls-warning-soft) !important;
  box-shadow: none !important;
  font-size: 0.7rem !important;
}

html body.ls-app-page .quest-page .quest-card-footer {
  width: 100% !important;
  margin: auto 0 0 !important;
  padding: 12px 0 0 !important;
  border-top: 1px solid var(--ls-border) !important;
}

html body.ls-app-page .quest-page .quest-card-note {
  margin: 0 0 9px !important;
  padding: 9px 10px !important;
  gap: 8px !important;
  border: 0 !important;
  border-radius: 4px !important;
  color: var(--ls-muted) !important;
  background: rgba(255, 255, 255, 0.035) !important;
  font-size: 0.69rem !important;
  line-height: 1.42 !important;
}

html body.ls-app-page .quest-page :where(.quest-validation-form .button, .quest-button-disabled) {
  width: 100% !important;
  min-height: 42px !important;
  padding: 9px 12px !important;
  border-radius: 4px !important;
  font-size: 0.74rem !important;
}

html body.ls-app-page .quest-page .quest-section-head {
  margin: 0 0 10px !important;
}

html body.ls-app-page .quest-page .quest-history-table-wrap {
  margin: 0 !important;
  border-radius: 4px !important;
  background: #0b111a !important;
}

html body.ls-app-page .quest-page .quest-monthly-window {
  margin: 0 0 13px !important;
  padding: 12px !important;
  border-radius: 4px !important;
}

/* Vitrine : une seule carte entière à la fois sur téléphone, aucun profil coupé. */
body:not(.ls-app-page) #team {
  overflow: hidden !important;
}

body:not(.ls-app-page) #team > .section-title,
body:not(.ls-app-page) #team > .section-body {
  max-width: 760px !important;
  margin-right: auto !important;
  margin-left: auto !important;
  text-align: center !important;
}

body:not(.ls-app-page) #team .team-carousel {
  width: min(100%, 1040px) !important;
  max-width: 100% !important;
  margin-right: auto !important;
  margin-left: auto !important;
}

body:not(.ls-app-page) #team .carousel-viewport {
  width: 100% !important;
  max-width: 100% !important;
  padding: 0 !important;
  scroll-padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

body:not(.ls-app-page) #team .carousel-track {
  gap: 12px !important;
}

body:not(.ls-app-page) #team .team-member-card {
  min-height: 0 !important;
  padding: 22px 18px !important;
  border: 1px solid var(--ls-border) !important;
  border-radius: 4px !important;
  background: var(--ls-surface) !important;
  box-shadow: none !important;
}

body:not(.ls-app-page) #team .team-avatar.large {
  width: 66px !important;
  height: 66px !important;
  flex-basis: 66px !important;
}

body:not(.ls-app-page) #team .team-pseudo {
  margin-top: 13px !important;
  font-size: 0.95rem !important;
}

body:not(.ls-app-page) #team .team-role {
  margin-top: 5px !important;
  font-size: 0.6rem !important;
}

body:not(.ls-app-page) #team .team-mission {
  margin-top: 15px !important;
  padding-top: 14px !important;
  font-size: 0.74rem !important;
  line-height: 1.52 !important;
}

/* Les grands écrans gardent de vraies colonnes et les pages ne s'étirent pas. */
@media (min-width: 1100px) and (max-width: 1320px) {
  html body.ls-app-page .quest-page .quest-card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 1099px) {
  html body.ls-app-page > #lsMobileHeader.ls-mobile-header,
  html body.ls-app-page > #lsMobileTabbar.ls-mobile-tabbar {
    contain: layout paint style;
  }

  html body.ls-app-page > #lsMobileHeader.ls-mobile-header {
    grid-template-columns: 40px minmax(0, 1fr) 40px !important;
    padding-right: 12px !important;
    padding-left: 12px !important;
  }

  html body.ls-app-page > main#contenu-principal {
    max-width: 100vw !important;
  }

  html body.ls-app-page .quest-page .quest-card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  html body.ls-app-page .quest-page .quest-hero-actions .button:nth-child(3) {
    display: none !important;
  }

  html body.ls-app-page :where(.admin-table-scroll, .admin-table-wrap, .team-table-wrap, .quest-flat-table-shell) {
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 4px !important;
    overscroll-behavior-inline: contain;
  }
}

@media (max-width: 720px) {
  body:not(.ls-app-page) #team {
    padding: 48px 14px !important;
  }

  body:not(.ls-app-page) #team > .section-title {
    margin-bottom: 10px !important;
    font-size: clamp(1.65rem, 8vw, 2.05rem) !important;
    line-height: 1.04 !important;
    letter-spacing: -0.055em !important;
  }

  body:not(.ls-app-page) #team > .section-body {
    max-width: 34rem !important;
    font-size: 0.84rem !important;
    line-height: 1.56 !important;
  }

  body:not(.ls-app-page) #team .team-carousel {
    margin-top: 22px !important;
  }

  body:not(.ls-app-page) #team .carousel-track .team-member-card,
  body:not(.ls-app-page) #team .team-member-card {
    flex: 0 0 100% !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  body:not(.ls-app-page) #team .carousel-footer {
    width: min(100%, 300px) !important;
    margin-top: 12px !important;
  }

  html body.ls-app-page > main#contenu-principal {
    gap: 12px !important;
  }

  html body.ls-app-page > main#contenu-principal > :where(section) {
    margin-bottom: 0 !important;
  }

  html body.ls-app-page main#contenu-principal :is(
    .profile-card,
    .spin-panel,
    .payment-calendar-card,
    .admin-card,
    .quest-admin-card,
    .quest-admin-final-card
  ) {
    padding: 14px !important;
    border-radius: 4px !important;
  }

  html body.ls-app-page .quest-page .quest-hero-grid {
    display: none !important;
  }

  html body.ls-app-page .quest-page .quest-hero:has(.quest-alert) {
    display: block !important;
  }

  html body.ls-app-page .quest-page .quest-hero:not(:has(.quest-alert)) {
    display: none !important;
  }

  html body.ls-app-page .quest-page .quest-tabs-card {
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
  }

  html body.ls-app-page .quest-page .quest-overview-strip {
    margin-bottom: 10px !important;
    border-radius: 4px !important;
  }

  html body.ls-app-page .quest-page .quest-overview-strip > div {
    min-height: 52px !important;
    padding: 8px !important;
  }

  html body.ls-app-page .quest-page .quest-overview-strip span {
    font-size: 0.54rem !important;
  }

  html body.ls-app-page .quest-page .quest-tabs-nav {
    display: flex !important;
    width: 100% !important;
    margin: 0 0 13px !important;
    padding: 4px !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
  }

  html body.ls-app-page .quest-page .quest-tabs-nav::-webkit-scrollbar {
    display: none;
  }

  html body.ls-app-page .quest-page .quest-tab-button {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: max-content !important;
    min-height: 38px !important;
    scroll-snap-align: start;
  }

  html body.ls-app-page .quest-page .quest-tab-intro {
    margin-bottom: 11px !important;
    padding: 0 2px !important;
  }

  html body.ls-app-page .quest-page .quest-tab-intro p {
    font-size: 0.7rem !important;
  }

  html body.ls-app-page .quest-page .quest-card-grid {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 9px !important;
  }

  html body.ls-app-page .quest-page .quest-card {
    padding: 14px !important;
    gap: 11px !important;
    border-radius: 4px !important;
  }

  html body.ls-app-page .quest-page .quest-card-head {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  html body.ls-app-page .quest-page .quest-status-badge {
    width: max-content !important;
    max-width: 100% !important;
  }

  html body.ls-app-page .quest-page .quest-card-details {
    margin-top: 10px !important;
  }

  html body.ls-app-page .quest-page .quest-history-card {
    padding: 14px !important;
  }

  html body.ls-app-page .quest-page .quest-history-table-wrap {
    overflow: visible !important;
    border: 0 !important;
    background: transparent !important;
  }

  html body.ls-app-page .quest-page .quest-history-table {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  html body.ls-app-page .quest-page .quest-history-table thead {
    display: none !important;
  }

  html body.ls-app-page .quest-page .quest-history-table tbody {
    display: grid !important;
    gap: 9px !important;
  }

  html body.ls-app-page .quest-page .quest-history-table tbody tr {
    display: grid !important;
    padding: 4px 12px !important;
    border: 1px solid var(--ls-border) !important;
    border-radius: 4px !important;
    background: #0b111a !important;
  }

  html body.ls-app-page .quest-page .quest-history-table tbody td {
    display: grid !important;
    grid-template-columns: minmax(92px, 0.75fr) minmax(0, 1.25fr) !important;
    min-width: 0 !important;
    padding: 8px 0 !important;
    align-items: start !important;
    gap: 10px !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.055) !important;
    background: transparent !important;
    color: var(--ls-text-soft) !important;
    font-size: 0.7rem !important;
    line-height: 1.4 !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }

  html body.ls-app-page .quest-page .quest-history-table tbody td:last-child {
    border-bottom: 0 !important;
  }

  html body.ls-app-page .quest-page .quest-history-table tbody td[data-label]::before {
    color: var(--ls-muted-2) !important;
    content: attr(data-label);
    font-size: 0.6rem !important;
    font-weight: 780 !important;
    letter-spacing: 0.045em !important;
    text-transform: uppercase !important;
  }

  html body.ls-app-page .quest-page .quest-history-table .quest-history-empty {
    display: block !important;
    padding: 15px 2px !important;
    border: 0 !important;
    text-align: center !important;
  }

  html body.ls-app-page .admin-page-v5 .admin-hero-header,
  html body.ls-app-page .team-page .team-staff-head {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 10px !important;
  }

  html body.ls-app-page .admin-page-v5 .admin-hero-text {
    margin-top: 8px !important;
    font-size: 0.78rem !important;
    line-height: 1.5 !important;
  }

  html body.ls-app-page .admin-page-v5 .admin-hero-side {
    justify-self: start !important;
  }

  html body.ls-app-page .admin-page-v5 .admin-table-scroll:has(.admin-status-table) {
    overflow: visible !important;
    border: 0 !important;
    background: transparent !important;
  }

  html body.ls-app-page .admin-page-v5 .admin-status-table {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  html body.ls-app-page .admin-page-v5 .admin-status-table thead {
    display: none !important;
  }

  html body.ls-app-page .admin-page-v5 .admin-status-table tbody,
  html body.ls-app-page .admin-page-v5 .admin-status-table tbody tr {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  html body.ls-app-page .admin-page-v5 .admin-status-table tbody td {
    display: grid !important;
    min-width: 0 !important;
    min-height: 72px !important;
    padding: 11px !important;
    align-content: space-between !important;
    gap: 7px !important;
    border: 1px solid var(--ls-border) !important;
    border-radius: 4px !important;
    color: var(--ls-text) !important;
    background: var(--ls-surface) !important;
    font-size: 0.95rem !important;
    font-weight: 780 !important;
    line-height: 1.15 !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }

  html body.ls-app-page .admin-page-v5 .admin-status-table tbody td::before {
    color: var(--ls-muted-2) !important;
    content: attr(data-label);
    font-size: 0.57rem !important;
    font-weight: 760 !important;
    letter-spacing: 0.055em !important;
    line-height: 1.25 !important;
    text-transform: uppercase !important;
  }

  html body.ls-app-page .team-page .team-table-wrap {
    overflow: visible !important;
    border: 0 !important;
    background: transparent !important;
  }

  html body.ls-app-page .team-page :where(.team-staff-table, .team-roster-table) {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  html body.ls-app-page .team-page :where(.team-staff-table, .team-roster-table) thead {
    display: none !important;
  }

  html body.ls-app-page .team-page :where(.team-staff-table, .team-roster-table) tbody {
    display: grid !important;
    gap: 9px !important;
  }

  html body.ls-app-page .team-page :where(.team-staff-table, .team-roster-table) tbody tr {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    padding: 4px 11px !important;
    gap: 0 12px !important;
    border: 1px solid var(--ls-border) !important;
    border-radius: 4px !important;
    background: #0b111a !important;
  }

  html body.ls-app-page .team-page :where(.team-staff-table, .team-roster-table) tbody td {
    display: grid !important;
    min-width: 0 !important;
    padding: 9px 0 !important;
    align-content: start !important;
    gap: 5px !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
    background: transparent !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }

  html body.ls-app-page .team-page :where(.team-staff-table, .team-roster-table) tbody td:first-child {
    grid-column: 1 / -1 !important;
  }

  html body.ls-app-page .team-page :where(.team-staff-table, .team-roster-table) tbody td::before {
    color: var(--ls-muted-2) !important;
    content: attr(data-label);
    font-size: 0.56rem !important;
    font-weight: 760 !important;
    letter-spacing: 0.05em !important;
    text-transform: uppercase !important;
  }

  html body.ls-app-page .team-page :where(.team-staff-table, .team-roster-table) .team-table-identity {
    min-width: 0 !important;
  }
}

@media (max-width: 600px) {
  html body > .ls-mobile-drawer-layer > .ls-mobile-drawer {
    padding: 0 12px calc(12px + env(safe-area-inset-bottom)) !important;
    background: #090e16 !important;
    transition-duration: 200ms !important;
  }

  .ls-mobile-drawer .app-drawer-header {
    margin: 0 -12px 10px !important;
    padding: calc(11px + env(safe-area-inset-top)) 12px 10px !important;
    background: #090e16 !important;
  }

  .ls-mobile-drawer .app-drawer-user {
    min-height: 62px !important;
    margin: 0 0 10px !important;
    padding: 9px !important;
    border: 1px solid var(--ls-border) !important;
    border-radius: 4px !important;
    background: var(--ls-surface) !important;
  }

  .ls-mobile-drawer .app-drawer-nav {
    display: grid !important;
    padding: 0 !important;
    gap: 2px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    overflow: visible !important;
  }

  .ls-mobile-drawer .app-drawer-nav-label {
    padding: 9px 7px 5px !important;
  }

  .ls-mobile-drawer .app-drawer-nav-label--spaced {
    margin: 5px 0 0 !important;
    padding: 10px 7px 5px !important;
    border-top: 1px solid var(--ls-border) !important;
  }

  .ls-mobile-drawer .app-drawer-link {
    min-height: 46px !important;
    margin: 0 !important;
    padding: 8px 10px !important;
    border-radius: 4px !important;
  }

  .ls-mobile-drawer .app-drawer-footer {
    margin-right: -12px !important;
    margin-left: -12px !important;
    padding: 11px 12px calc(11px + env(safe-area-inset-bottom)) !important;
    background: #090e16 !important;
  }
}

@media (max-width: 360px) {
  html body.ls-app-page .quest-page .quest-card-details {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  html body.ls-app-page .quest-page .quest-history-table tbody td {
    grid-template-columns: minmax(78px, 0.7fr) minmax(0, 1.3fr) !important;
  }
}


/* V26 — Champs de recherche sans icône native ni décoration superflue. */
body.ls-app-page input[type="search"] {
  -webkit-appearance: none;
  appearance: none;
}

body.ls-app-page input[type="search"]::-webkit-search-decoration,
body.ls-app-page input[type="search"]::-webkit-search-cancel-button,
body.ls-app-page input[type="search"]::-webkit-search-results-button,
body.ls-app-page input[type="search"]::-webkit-search-results-decoration {
  display: none;
  -webkit-appearance: none;
}


/* ===== livesea-structure-v11.css ===== */
/*
 * LiveSea Agency — structure V11
 * Dernière couche visuelle, chargée après les feuilles historiques.
 * Elle fixe la hiérarchie, les débordements et la navigation sur tous les formats.
 */

:root {
  --ls-bg: #211a3a;
  --ls-bg-soft: #281f45;
  --ls-sidebar: #090f18;
  --ls-surface: #342a57;
  --ls-surface-2: #3d3164;
  --ls-surface-3: #111927;
  --ls-border: rgba(244, 194, 112, 0.17);
  --ls-border-strong: rgba(244, 194, 112, 0.34);
  --ls-text: #fffaf1;
  --ls-text-soft: #ded7e8;
  --ls-muted: #b0a7bf;
  --ls-muted-2: #857b96;
  --ls-accent: #f4c270;
  --ls-accent-strong: #ffd792;
  --ls-accent-soft: rgba(244, 194, 112, 0.12);
  --ls-violet: #b5a2ec;
  --ls-violet-soft: rgba(181, 162, 236, 0.12);
  --ls-success: #70d7a5;
  --ls-success-soft: rgba(112, 215, 165, 0.13);
  --ls-warning: #f4c270;
  --ls-warning-soft: rgba(244, 194, 112, 0.13);
  --ls-danger: #ff8c9b;
  --ls-danger-soft: rgba(255, 140, 155, 0.13);
  --ls-radius-xs: 8px;
  --ls-radius-sm: 4px;
  --ls-radius-md: 4px;
  --ls-radius-lg: 4px;
  --ls-radius-xl: 4px;
  --ls-focus: 0 0 0 3px rgba(244, 194, 112, 0.28);
  --ls-header-height: 72px;

  /* Alias des composants publics historiques. */
  --base-deep: var(--ls-bg);
  --base-mid: var(--ls-bg-soft);
  --ivory: var(--ls-text);
  --silver: var(--ls-text-soft);
  --slate-warm: var(--ls-muted);
  --champagne: var(--ls-accent);
  --champagne-light: var(--ls-accent-strong);
}

html {
  min-width: 320px;
  scroll-behavior: smooth;
  scroll-padding-top: 104px;
  background: var(--ls-bg);
}

html,
body {
  max-width: 100%;
  overflow-x: clip;
}

body {
  color: var(--ls-text);
  background: var(--ls-bg);
}

body.is-drawer-open {
  overflow: hidden !important;
}

:where(a, button, input, select, textarea):focus-visible {
  outline: 0;
  box-shadow: var(--ls-focus) !important;
}

:where(.main, .section, .feature, .feature-content, .feature-visual, .testimonial-card, .integration-item, .home-cta, .site-footer) {
  min-width: 0;
}

/* -------------------------------------------------------------------------- */
/* En-tête public                                                             */
/* -------------------------------------------------------------------------- */

.marketing-header {
  position: fixed !important;
  z-index: 900 !important;
  top: max(14px, env(safe-area-inset-top)) !important;
  left: 50% !important;
  display: flex !important;
  width: min(calc(100% - 32px), 1220px) !important;
  min-height: var(--ls-header-height) !important;
  margin: 0 !important;
  padding: 9px 10px 9px 12px !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 18px !important;
  border: 1px solid rgba(244, 194, 112, 0.23) !important;
  border-radius: 4px !important;
  background: rgba(9, 15, 24, 0.92) !important;
  box-shadow: 0 16px 46px rgba(8, 5, 20, 0.22) !important;
  backdrop-filter: blur(18px) saturate(125%) !important;
  transform: translateX(-50%) !important;
}

.marketing-header.is-scrolled {
  border-color: rgba(244, 194, 112, 0.4) !important;
  background: rgba(9, 15, 24, 0.98) !important;
}

.marketing-brand {
  display: inline-grid !important;
  grid-template-columns: 44px minmax(0, 1fr) !important;
  min-width: 0 !important;
  align-items: center !important;
  gap: 11px !important;
  color: var(--ls-text) !important;
}

.marketing-brand > img {
  width: 44px !important;
  height: 44px !important;
  max-width: 44px !important;
  border: 1px solid rgba(244, 194, 112, 0.2) !important;
  border-radius: 4px !important;
  object-fit: cover !important;
}

.marketing-brand-copy {
  display: grid !important;
  min-width: 0 !important;
  gap: 2px !important;
  line-height: 1.08 !important;
  white-space: nowrap !important;
}

.marketing-brand-copy strong {
  color: var(--ls-text) !important;
  font-size: 0.98rem !important;
  font-weight: 830 !important;
  letter-spacing: -0.035em !important;
}

.marketing-brand-copy small {
  color: var(--ls-accent) !important;
  font-size: 0.57rem !important;
  font-weight: 790 !important;
  letter-spacing: 0.11em !important;
  text-transform: uppercase !important;
}

.marketing-nav {
  display: flex !important;
  min-width: 0 !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 3px !important;
}

.marketing-nav a {
  min-height: 42px !important;
  padding: 11px 14px !important;
  border-radius: 4px !important;
  color: var(--ls-muted) !important;
  font-size: 0.77rem !important;
  font-weight: 720 !important;
}

.marketing-nav a:hover {
  color: var(--ls-text) !important;
  background: rgba(244, 194, 112, 0.09) !important;
}

.marketing-actions {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.marketing-login {
  display: inline-flex !important;
  min-width: 112px !important;
  min-height: 44px !important;
  padding: 10px 16px !important;
  align-items: center !important;
  justify-content: center !important;
  border: 1px solid var(--ls-accent) !important;
  border-radius: 4px !important;
  color: #201934 !important;
  background: var(--ls-accent) !important;
  font-size: 0.78rem !important;
  font-weight: 820 !important;
}

.marketing-menu-button {
  display: none !important;
}

.marketing-menu-label {
  font-size: 0.74rem;
  font-weight: 790;
}

/* -------------------------------------------------------------------------- */
/* Drawer commun : vrai panneau latéral, compact et scrollable                */
/* -------------------------------------------------------------------------- */

html body > .ls-mobile-drawer-layer {
  position: fixed !important;
  z-index: 2000 !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100dvh !important;
  overflow: hidden !important;
}

html body > .ls-mobile-drawer-layer[hidden] {
  display: none !important;
}

html body > .ls-mobile-drawer-layer > .app-drawer-backdrop {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  border: 0 !important;
  background: rgba(10, 7, 20, 0.72) !important;
  opacity: 0 !important;
  backdrop-filter: blur(5px) !important;
  transition: opacity 190ms ease !important;
}

html body > .ls-mobile-drawer-layer.is-open > .app-drawer-backdrop {
  opacity: 1 !important;
}

html body > .ls-mobile-drawer-layer > .ls-mobile-drawer {
  position: absolute !important;
  z-index: 2 !important;
  inset: 0 0 0 auto !important;
  display: flex !important;
  width: min(92vw, 420px) !important;
  height: 100dvh !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  flex-direction: column !important;
  border: 0 !important;
  border-left: 1px solid rgba(244, 194, 112, 0.22) !important;
  border-radius: 4px 0 0 4px !important;
  background: #090f18 !important;
  box-shadow: -24px 0 70px rgba(4, 2, 12, 0.36) !important;
  overflow: hidden !important;
  overscroll-behavior: contain !important;
  transform: translate3d(104%, 0, 0) !important;
  transition: transform 230ms cubic-bezier(0.2, 0.72, 0.2, 1) !important;
}

html body > .ls-mobile-drawer-layer.is-open > .ls-mobile-drawer {
  transform: translate3d(0, 0, 0) !important;
}

.ls-mobile-drawer .app-drawer-handle {
  display: none !important;
}

.ls-mobile-drawer .app-drawer-header {
  position: relative !important;
  display: flex !important;
  min-height: calc(82px + env(safe-area-inset-top)) !important;
  margin: 0 !important;
  padding: calc(14px + env(safe-area-inset-top)) 18px 14px !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 14px !important;
  border-bottom: 1px solid rgba(244, 194, 112, 0.14) !important;
  background: #090f18 !important;
}

.app-drawer-heading {
  display: grid !important;
  grid-template-columns: 44px minmax(0, 1fr) !important;
  min-width: 0 !important;
  align-items: center !important;
  gap: 11px !important;
}

.app-drawer-brand-mark {
  width: 44px !important;
  height: 44px !important;
  max-width: 44px !important;
  border: 1px solid rgba(244, 194, 112, 0.24) !important;
  border-radius: 4px !important;
  object-fit: cover !important;
}

.ls-mobile-drawer .app-drawer-header span {
  display: block !important;
  color: var(--ls-accent) !important;
  font-size: 0.59rem !important;
  font-weight: 820 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
}

.ls-mobile-drawer .app-drawer-header h2 {
  margin: 3px 0 0 !important;
  color: var(--ls-text) !important;
  font-size: 1.14rem !important;
  font-weight: 810 !important;
  line-height: 1.05 !important;
  letter-spacing: -0.035em !important;
}

.ls-mobile-drawer .app-drawer-header .app-icon-button {
  width: 44px !important;
  height: 44px !important;
  flex: 0 0 44px !important;
  border: 1px solid rgba(244, 194, 112, 0.22) !important;
  border-radius: 4px !important;
  color: var(--ls-accent) !important;
  background: rgba(244, 194, 112, 0.08) !important;
}

.app-drawer-intro {
  margin: 0 !important;
  padding: 16px 18px 2px !important;
  color: var(--ls-muted) !important;
  font-size: 0.78rem !important;
  line-height: 1.5 !important;
}

.ls-mobile-drawer .app-drawer-user {
  display: grid !important;
  grid-template-columns: 46px minmax(0, 1fr) 18px !important;
  min-height: 66px !important;
  margin: 14px 16px 2px !important;
  padding: 9px 11px !important;
  align-items: center !important;
  gap: 11px !important;
  border: 1px solid rgba(244, 194, 112, 0.16) !important;
  border-radius: 4px !important;
  background: rgba(244, 194, 112, 0.055) !important;
}

.ls-mobile-drawer .app-drawer-user img {
  width: 46px !important;
  height: 46px !important;
}

.ls-mobile-drawer .app-drawer-nav {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 14px 14px 18px !important;
  align-content: start !important;
  gap: 6px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
  scrollbar-width: thin !important;
  -webkit-overflow-scrolling: touch !important;
}

.ls-mobile-drawer .app-drawer-nav-label {
  grid-column: 1 !important;
  margin: 0 !important;
  padding: 3px 7px 6px !important;
  color: var(--ls-muted-2) !important;
  font-size: 0.58rem !important;
  font-weight: 820 !important;
  letter-spacing: 0.13em !important;
  text-transform: uppercase !important;
}

.ls-mobile-drawer .app-drawer-nav-label--spaced {
  margin-top: 9px !important;
  padding-top: 15px !important;
  border-top: 1px solid rgba(244, 194, 112, 0.12) !important;
}

.ls-mobile-drawer .app-drawer-link {
  position: relative !important;
  display: grid !important;
  grid-template-columns: 42px minmax(0, 1fr) 18px !important;
  width: 100% !important;
  min-height: 66px !important;
  margin: 0 !important;
  padding: 10px 11px !important;
  align-items: center !important;
  gap: 11px !important;
  border: 1px solid transparent !important;
  border-radius: 4px !important;
  color: var(--ls-text-soft) !important;
  background: transparent !important;
}

.ls-mobile-drawer .app-drawer-link:hover {
  border-color: rgba(244, 194, 112, 0.13) !important;
  background: rgba(244, 194, 112, 0.055) !important;
}

.ls-mobile-drawer .app-drawer-link.is-active {
  border-color: rgba(244, 194, 112, 0.25) !important;
  background: rgba(244, 194, 112, 0.1) !important;
}

.app-drawer-link-icon {
  display: grid !important;
  width: 42px !important;
  height: 42px !important;
  place-items: center !important;
  border: 1px solid rgba(244, 194, 112, 0.14) !important;
  border-radius: 4px !important;
  color: var(--ls-accent) !important;
  background: rgba(244, 194, 112, 0.055) !important;
}

.app-drawer-link-icon .app-icon {
  width: 19px !important;
  height: 19px !important;
}

.app-drawer-link-copy {
  display: grid !important;
  min-width: 0 !important;
  gap: 3px !important;
}

.app-drawer-link-copy strong {
  overflow: hidden !important;
  color: var(--ls-text) !important;
  font-size: 0.83rem !important;
  font-weight: 770 !important;
  line-height: 1.15 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.app-drawer-link-copy small {
  overflow: hidden !important;
  color: var(--ls-muted) !important;
  font-size: 0.66rem !important;
  font-weight: 540 !important;
  line-height: 1.22 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.app-drawer-link-chevron {
  display: grid !important;
  place-items: center !important;
  color: var(--ls-muted-2) !important;
}

.app-drawer-link-chevron .app-icon {
  width: 15px !important;
  height: 15px !important;
}

.ls-mobile-drawer .app-drawer-footer {
  display: grid !important;
  margin: auto 0 0 !important;
  padding: 12px 16px calc(14px + env(safe-area-inset-bottom)) !important;
  gap: 10px !important;
  border-top: 1px solid rgba(244, 194, 112, 0.14) !important;
  background: #090f18 !important;
}

.app-drawer-promo {
  display: grid !important;
  grid-template-columns: 34px minmax(0, 1fr) !important;
  padding: 10px 11px !important;
  align-items: center !important;
  gap: 10px !important;
  border: 1px solid rgba(244, 194, 112, 0.14) !important;
  border-radius: 4px !important;
  color: var(--ls-accent) !important;
  background: rgba(244, 194, 112, 0.055) !important;
}

.app-drawer-promo > .app-icon {
  width: 20px !important;
  height: 20px !important;
  justify-self: center !important;
}

.app-drawer-promo span {
  display: grid !important;
  min-width: 0 !important;
  gap: 2px !important;
}

.app-drawer-promo strong {
  color: var(--ls-text) !important;
  font-size: 0.74rem !important;
}

.app-drawer-promo small {
  color: var(--ls-muted) !important;
  font-size: 0.62rem !important;
  line-height: 1.35 !important;
}

.ls-mobile-drawer .app-login-button {
  min-height: 52px !important;
  padding: 12px 15px !important;
  border: 1px solid var(--ls-accent) !important;
  border-radius: 4px !important;
  color: #211a38 !important;
  background: var(--ls-accent) !important;
  font-size: 0.82rem !important;
  font-weight: 830 !important;
}

.ls-mobile-drawer .app-drawer-logout {
  min-height: 46px !important;
  border-radius: 4px !important;
}

/* -------------------------------------------------------------------------- */
/* Accueil public                                                             */
/* -------------------------------------------------------------------------- */

body:not(.ls-app-page) {
  color: var(--ls-text) !important;
  background: var(--ls-bg) !important;
}

body:not(.ls-app-page) .main {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
}

body:not(.ls-app-page) .main > :where(.section, .logo-ticker, .home-cta, .site-footer) {
  content-visibility: visible !important;
  contain: none !important;
}

body:not(.ls-app-page) .reveal {
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  transition: none !important;
}

body:not(.ls-app-page) :where(#hero, #features, #team, #testimonials, #integrations, #faq, #cta) {
  scroll-margin-top: 104px !important;
}

body:not(.ls-app-page) .hero {
  position: relative !important;
  display: grid !important;
  width: min(100%, 1380px) !important;
  min-height: 760px !important;
  margin: 0 auto !important;
  padding: 154px clamp(24px, 5vw, 72px) 82px !important;
  align-content: center !important;
  overflow: visible !important;
}

body:not(.ls-app-page) .hero::before {
  top: 112px !important;
  right: 4vw !important;
  width: min(46vw, 600px) !important;
  background: radial-gradient(circle, rgba(244, 194, 112, 0.09), rgba(181, 162, 236, 0.07) 44%, transparent 72%) !important;
}

/* Le contenu critique est visible dès le premier rendu : aucune attente
   d'animation avant de pouvoir lire le titre ou utiliser les boutons. */
body:not(.ls-app-page) :where(
  .home-eyebrow,
  .home-hero-copy h1,
  .home-hero-copy .hero-sub,
  .home-hero-copy .hero-ctas,
  .portal-preview,
  .hero-metrics
) {
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  animation: none !important;
}

.home-hero-layout {
  display: grid !important;
  grid-template-columns: minmax(0, 1.02fr) minmax(380px, 0.85fr) !important;
  align-items: center !important;
  gap: clamp(42px, 7vw, 96px) !important;
}

.home-hero-copy {
  min-width: 0 !important;
  text-align: left !important;
}

.home-eyebrow,
.home-kicker {
  color: var(--ls-accent) !important;
}

body:not(.ls-app-page) .hero h1 {
  max-width: 780px !important;
  margin: 20px 0 22px !important;
  color: var(--ls-text) !important;
  font-family: inherit !important;
  font-size: clamp(3.1rem, 5.6vw, 5.45rem) !important;
  font-weight: 830 !important;
  line-height: 0.94 !important;
  letter-spacing: -0.065em !important;
  overflow-wrap: normal !important;
}

body:not(.ls-app-page) .hero h1 em {
  display: block !important;
  color: var(--ls-accent) !important;
  font-style: normal !important;
  font-weight: 650 !important;
}

body:not(.ls-app-page) .hero-sub {
  max-width: 650px !important;
  color: var(--ls-text-soft) !important;
  font-size: clamp(0.98rem, 1.35vw, 1.12rem) !important;
  line-height: 1.7 !important;
}

body:not(.ls-app-page) .hero-ctas,
.home-cta-actions {
  display: flex !important;
  margin-top: 29px !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
}

body:not(.ls-app-page) :where(.button, .button-primary, .button-secondary, .btn-primary, .btn-secondary) {
  min-height: 50px !important;
  padding: 12px 18px !important;
  border-radius: 4px !important;
  font-size: 0.83rem !important;
}

body:not(.ls-app-page) :where(.button-primary, .btn-primary, .button--primary) {
  border-color: var(--ls-accent) !important;
  color: #211a38 !important;
  background: var(--ls-accent) !important;
}

body:not(.ls-app-page) :where(.button-primary, .btn-primary, .button--primary):hover {
  border-color: var(--ls-accent-strong) !important;
  color: #211a38 !important;
  background: var(--ls-accent-strong) !important;
}

body:not(.ls-app-page) :where(.button-secondary, .btn-secondary, .button--secondary) {
  border-color: rgba(244, 194, 112, 0.25) !important;
  color: var(--ls-text) !important;
  background: rgba(9, 15, 24, 0.52) !important;
}

body:not(.ls-app-page) :where(.button-secondary, .btn-secondary, .button--secondary):hover {
  border-color: rgba(244, 194, 112, 0.4) !important;
  color: var(--ls-text) !important;
  background: rgba(244, 194, 112, 0.1) !important;
}

.portal-preview {
  padding: 15px !important;
  border: 1px solid rgba(244, 194, 112, 0.24) !important;
  border-radius: 4px !important;
  background: #0d1521 !important;
  box-shadow: 0 28px 80px rgba(8, 5, 20, 0.22) !important;
}

.portal-preview-period,
.portal-preview-card,
.portal-preview-balance {
  border-color: rgba(244, 194, 112, 0.14) !important;
}

.portal-preview-progress i {
  background: var(--ls-accent) !important;
}

body:not(.ls-app-page) .hero-metrics {
  margin-top: clamp(52px, 7vw, 82px) !important;
  border-color: rgba(244, 194, 112, 0.15) !important;
}

body:not(.ls-app-page) .metric {
  border-color: rgba(244, 194, 112, 0.15) !important;
}

body:not(.ls-app-page) .logo-ticker {
  width: min(calc(100% - 40px), 1240px) !important;
  border-color: rgba(244, 194, 112, 0.15) !important;
}

body:not(.ls-app-page) .ticker-dot {
  background: var(--ls-accent) !important;
}

body:not(.ls-app-page) .section {
  width: min(calc(100% - 40px), 1240px) !important;
  max-width: 1240px !important;
  min-height: 0 !important;
  margin: 0 auto !important;
  padding: clamp(76px, 8vw, 112px) 0 !important;
  overflow: visible !important;
}

.section-title {
  max-width: 960px !important;
  margin: 0 !important;
  color: var(--ls-text) !important;
  font-family: inherit !important;
  font-size: clamp(2.15rem, 4.1vw, 4.25rem) !important;
  font-weight: 590 !important;
  line-height: 1.02 !important;
  letter-spacing: -0.055em !important;
  overflow-wrap: normal !important;
}

.section-title strong {
  color: var(--ls-accent) !important;
  font-weight: 830 !important;
}

.section-body {
  max-width: 740px !important;
  margin-top: 18px !important;
  color: var(--ls-muted) !important;
  font-size: clamp(0.92rem, 1.2vw, 1.04rem) !important;
  line-height: 1.7 !important;
}

.silk-divider {
  width: min(calc(100% - 40px), 1240px) !important;
  height: 1px !important;
  margin: 0 auto !important;
  background: rgba(244, 194, 112, 0.15) !important;
}

/* Méthode */
body:not(.ls-app-page) #features {
  display: grid !important;
  gap: 22px !important;
}

body:not(.ls-app-page) .feature,
body:not(.ls-app-page) .feature.reverse {
  display: grid !important;
  grid-template-columns: minmax(0, 0.94fr) minmax(0, 1.06fr) !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 10px !important;
  align-items: stretch !important;
  gap: clamp(24px, 4.4vw, 66px) !important;
  border: 1px solid rgba(244, 194, 112, 0.16) !important;
  border-radius: 4px !important;
  background: rgba(9, 15, 24, 0.58) !important;
  box-shadow: none !important;
  overflow: hidden !important;
}

body:not(.ls-app-page) .feature.reverse .feature-visual {
  order: 2 !important;
}

body:not(.ls-app-page) .feature-visual {
  width: 100% !important;
  min-height: 340px !important;
  height: auto !important;
  border-radius: 4px !important;
  overflow: hidden !important;
}

body:not(.ls-app-page) .feature-visual::after {
  background: linear-gradient(180deg, transparent 62%, rgba(9, 15, 24, 0.22)) !important;
}

body:not(.ls-app-page) .feature-visual img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

body:not(.ls-app-page) .feature-content {
  display: grid !important;
  padding: clamp(22px, 4vw, 48px) clamp(12px, 2vw, 26px) !important;
  align-content: center !important;
}

body:not(.ls-app-page) .feature-number {
  width: 38px !important;
  height: 38px !important;
  margin: 0 0 21px !important;
  border-color: rgba(244, 194, 112, 0.28) !important;
  color: var(--ls-accent) !important;
  background: rgba(244, 194, 112, 0.07) !important;
}

body:not(.ls-app-page) .feature .section-title {
  font-size: clamp(2rem, 3.4vw, 3.45rem) !important;
}

/* Équipe publique : grille verticale, jamais de carte partielle. */
body:not(.ls-app-page) #team {
  overflow: visible !important;
}

body:not(.ls-app-page) #team > .section-title,
body:not(.ls-app-page) #team > .section-body,
body:not(.ls-app-page) #testimonials > .section-title,
body:not(.ls-app-page) #integrations > .section-title,
body:not(.ls-app-page) #integrations > .section-body,
body:not(.ls-app-page) #faq > .section-title {
  margin-right: auto !important;
  margin-left: auto !important;
  text-align: center !important;
}

body:not(.ls-app-page) #team .public-team-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  width: 100% !important;
  max-width: 1120px !important;
  margin: 34px auto 0 !important;
  gap: 14px !important;
  overflow: visible !important;
}

body:not(.ls-app-page) #team .public-team-card {
  display: grid !important;
  grid-template-columns: 64px minmax(0, 1fr) !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 19px !important;
  align-items: start !important;
  gap: 14px !important;
  border: 1px solid rgba(244, 194, 112, 0.16) !important;
  border-radius: 4px !important;
  background: #101827 !important;
  transform: none !important;
  overflow: hidden !important;
}

body:not(.ls-app-page) #team .public-team-card .team-avatar {
  width: 64px !important;
  height: 64px !important;
  margin: 0 !important;
  border-color: rgba(244, 194, 112, 0.34) !important;
}

body:not(.ls-app-page) #team .public-team-copy {
  display: grid !important;
  min-width: 0 !important;
  align-content: start !important;
}

body:not(.ls-app-page) #team .team-pseudo {
  margin: 2px 0 0 !important;
  color: var(--ls-text) !important;
  font-size: 0.98rem !important;
  line-height: 1.15 !important;
  overflow-wrap: anywhere !important;
}

body:not(.ls-app-page) #team .team-role {
  margin: 6px 0 0 !important;
  color: var(--ls-accent) !important;
  font-size: 0.59rem !important;
  font-weight: 820 !important;
  letter-spacing: 0.13em !important;
  text-transform: uppercase !important;
}

body:not(.ls-app-page) #team .team-mission {
  grid-column: 1 / -1 !important;
  margin: 15px 0 0 !important;
  padding: 14px 0 0 !important;
  border-top: 1px solid rgba(244, 194, 112, 0.11) !important;
  color: var(--ls-muted) !important;
  font-size: 0.75rem !important;
  line-height: 1.52 !important;
  overflow-wrap: anywhere !important;
}

body:not(.ls-app-page) #team .team-mission span {
  color: var(--ls-text-soft) !important;
  font-size: 0.63rem !important;
  font-weight: 820 !important;
  letter-spacing: 0.09em !important;
  text-transform: uppercase !important;
}

/* Avis : cartes entières, snap précis, contrôles sous le contenu. */
body:not(.ls-app-page) .reviews-carousel {
  width: min(100%, 1120px) !important;
  max-width: 100% !important;
  margin: 34px auto 0 !important;
}

body:not(.ls-app-page) .reviews-carousel .carousel-viewport {
  width: 100% !important;
  max-width: 100% !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  scroll-padding-inline: 0 !important;
  scroll-snap-type: x mandatory !important;
  scrollbar-width: none !important;
}

body:not(.ls-app-page) .reviews-carousel .carousel-viewport::-webkit-scrollbar {
  display: none !important;
}

body:not(.ls-app-page) .reviews-carousel .carousel-track {
  display: flex !important;
  width: max-content !important;
  min-width: 100% !important;
  padding: 0 !important;
  gap: 14px !important;
  transform: none !important;
}

body:not(.ls-app-page) .reviews-carousel .review-card {
  flex: 0 0 calc((min(1120px, calc(100vw - 40px)) - 28px) / 3) !important;
  width: calc((min(1120px, calc(100vw - 40px)) - 28px) / 3) !important;
  min-width: 0 !important;
  min-height: 310px !important;
  margin: 0 !important;
  padding: 24px !important;
  border: 1px solid rgba(244, 194, 112, 0.16) !important;
  border-radius: 4px !important;
  background: var(--ls-surface) !important;
  scroll-snap-align: start !important;
  transform: none !important;
  overflow: hidden !important;
}

body:not(.ls-app-page) .review-avatar {
  border-color: rgba(244, 194, 112, 0.38) !important;
}

body:not(.ls-app-page) .review-pseudo,
body:not(.ls-app-page) .review-title {
  color: var(--ls-text) !important;
}

body:not(.ls-app-page) .review-stars {
  color: var(--ls-accent) !important;
}

body:not(.ls-app-page) .review-quote {
  color: var(--ls-text-soft) !important;
  overflow-wrap: anywhere !important;
}

body:not(.ls-app-page) .reviews-carousel .carousel-footer {
  display: grid !important;
  grid-template-columns: 44px minmax(120px, 280px) 44px !important;
  width: min(100%, 390px) !important;
  margin: 18px auto 0 !important;
  align-items: center !important;
  gap: 12px !important;
}

body:not(.ls-app-page) .carousel-control {
  width: 44px !important;
  height: 44px !important;
  border-color: rgba(244, 194, 112, 0.2) !important;
  color: var(--ls-text) !important;
  background: #101827 !important;
}

body:not(.ls-app-page) .carousel-progress {
  background: rgba(244, 194, 112, 0.12) !important;
}

body:not(.ls-app-page) .carousel-progress span {
  background: var(--ls-accent) !important;
}

body:not(.ls-app-page) .empty-card {
  width: min(100%, 760px) !important;
  margin: 32px auto 0 !important;
  border-color: rgba(244, 194, 112, 0.16) !important;
  background: #101827 !important;
}

/* Partenaires */
body:not(.ls-app-page) .integrations-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  width: min(100%, 1060px) !important;
  margin: 34px auto 0 !important;
  gap: 12px !important;
}

body:not(.ls-app-page) .integration-item {
  display: grid !important;
  min-height: 138px !important;
  padding: 19px 13px !important;
  place-items: center !important;
  align-content: center !important;
  gap: 10px !important;
  border-color: rgba(244, 194, 112, 0.15) !important;
  border-radius: 4px !important;
  background: rgba(9, 15, 24, 0.58) !important;
}

body:not(.ls-app-page) .integration-icon {
  width: 54px !important;
  height: 54px !important;
}

body:not(.ls-app-page) .integration-name {
  color: var(--ls-text-soft) !important;
}

/* FAQ */
body:not(.ls-app-page) #faq {
  overflow: visible !important;
}

body:not(.ls-app-page) .faq-list {
  display: grid !important;
  width: min(100%, 900px) !important;
  max-width: 900px !important;
  margin: 34px auto 0 !important;
  gap: 10px !important;
  overflow: visible !important;
}

body:not(.ls-app-page) .faq-controls {
  display: flex !important;
  min-height: 42px !important;
  margin: 0 0 2px !important;
  align-items: center !important;
  justify-content: flex-end !important;
}

body:not(.ls-app-page) .faq-toggle-all {
  min-height: 40px !important;
  padding: 8px 14px !important;
  border: 1px solid rgba(244, 194, 112, 0.22) !important;
  border-radius: 4px !important;
  color: var(--ls-accent) !important;
  background: rgba(244, 194, 112, 0.07) !important;
  font-size: 0.7rem !important;
  font-weight: 780 !important;
}

body:not(.ls-app-page) .faq-item {
  width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 1px solid rgba(244, 194, 112, 0.16) !important;
  border-radius: 4px !important;
  background: var(--ls-surface) !important;
  overflow: hidden !important;
}

body:not(.ls-app-page) .faq-question {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 38px !important;
  width: 100% !important;
  min-height: 70px !important;
  margin: 0 !important;
  padding: 16px 16px 16px 20px !important;
  align-items: center !important;
  gap: 14px !important;
  color: var(--ls-text) !important;
  font-size: 0.91rem !important;
  font-weight: 740 !important;
  line-height: 1.35 !important;
  text-align: left !important;
}

body:not(.ls-app-page) .faq-icon {
  position: relative !important;
  display: block !important;
  width: 38px !important;
  height: 38px !important;
  margin: 0 !important;
  border: 1px solid rgba(244, 194, 112, 0.17) !important;
  border-radius: 4px !important;
  background: rgba(244, 194, 112, 0.07) !important;
}

body:not(.ls-app-page) .faq-icon::before,
body:not(.ls-app-page) .faq-icon::after {
  background: var(--ls-accent) !important;
}

body:not(.ls-app-page) .faq-answer-inner {
  min-height: 0 !important;
  padding: 0 64px 0 20px !important;
  color: var(--ls-text-soft) !important;
  font-size: 0.82rem !important;
  line-height: 1.62 !important;
}

body:not(.ls-app-page) .faq-item.open .faq-answer-inner {
  padding-bottom: 19px !important;
}

/* CTA et footer */
.home-cta {
  position: relative !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  width: min(calc(100% - 40px), 1240px) !important;
  margin: 20px auto 0 !important;
  padding: clamp(40px, 6vw, 70px) !important;
  align-items: center !important;
  gap: 36px !important;
  border: 0 !important;
  border-radius: 4px !important;
  color: #201934 !important;
  background: var(--ls-accent) !important;
  box-shadow: none !important;
  overflow: hidden !important;
}

.home-cta::before,
.home-cta::after {
  display: none !important;
}

.home-cta-content {
  min-width: 0 !important;
}

.home-cta .home-kicker {
  color: rgba(32, 25, 52, 0.72) !important;
}

.home-cta h2 {
  max-width: 820px !important;
  margin: 16px 0 0 !important;
  color: #201934 !important;
  font-size: clamp(2.2rem, 4.35vw, 4.4rem) !important;
  font-weight: 560 !important;
  line-height: 1.01 !important;
  letter-spacing: -0.055em !important;
  overflow-wrap: normal !important;
}

.home-cta h2 strong {
  color: #201934 !important;
  font-weight: 830 !important;
}

.home-cta p {
  max-width: 680px !important;
  margin: 18px 0 0 !important;
  color: rgba(32, 25, 52, 0.75) !important;
  font-size: 0.95rem !important;
  line-height: 1.65 !important;
}

.home-cta .button--primary {
  border-color: #201934 !important;
  color: var(--ls-accent) !important;
  background: #201934 !important;
}

.home-cta .button--primary:hover {
  border-color: #2b2147 !important;
  color: var(--ls-accent-strong) !important;
  background: #2b2147 !important;
}

.home-cta .button--secondary {
  border-color: rgba(32, 25, 52, 0.28) !important;
  color: #201934 !important;
  background: transparent !important;
}

.home-cta .button--secondary:hover {
  border-color: rgba(32, 25, 52, 0.5) !important;
  color: #201934 !important;
  background: rgba(32, 25, 52, 0.08) !important;
}

.home-cta-mark {
  width: clamp(116px, 15vw, 178px) !important;
  opacity: 0.28 !important;
}

.site-footer {
  display: flex !important;
  width: min(calc(100% - 40px), 1240px) !important;
  min-height: 88px !important;
  margin: 22px auto 0 !important;
  padding: 20px 0 !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 20px !important;
  border-color: rgba(244, 194, 112, 0.15) !important;
  color: var(--ls-muted) !important;
}

.site-footer-brand {
  color: var(--ls-text-soft) !important;
}

.site-footer-status i {
  background: var(--ls-success) !important;
}

/* -------------------------------------------------------------------------- */
/* Application connectée : même thème, shell stable                           */
/* -------------------------------------------------------------------------- */

body.ls-app-page {
  color: var(--ls-text) !important;
  background: #171328 !important;
}

.app-sidebar {
  border-color: rgba(244, 194, 112, 0.14) !important;
  background: #090f18 !important;
}

.app-brand-copy span,
.app-nav-label,
.app-mobile-title span,
.app-tabbar-link {
  color: var(--ls-muted) !important;
}

.app-nav-link.is-active,
.app-tabbar-link.is-active {
  border-color: rgba(244, 194, 112, 0.22) !important;
  color: var(--ls-text) !important;
  background: var(--ls-accent-soft) !important;
}

.app-nav-link.is-active::before,
.app-tabbar-link.is-active::before {
  background: var(--ls-accent) !important;
}

.app-nav-link.is-active .app-icon,
.app-tabbar-link.is-active .app-icon {
  color: var(--ls-accent) !important;
}

.app-mobile-header {
  min-height: calc(66px + env(safe-area-inset-top)) !important;
  padding: calc(8px + env(safe-area-inset-top)) 14px 8px !important;
  border-color: rgba(244, 194, 112, 0.14) !important;
  background: rgba(9, 15, 24, 0.96) !important;
}

.app-mobile-header .app-icon-button,
.app-tabbar .app-tabbar-link {
  border-radius: 4px !important;
}

.app-mobile-header .app-icon-button {
  border-color: rgba(244, 194, 112, 0.2) !important;
  color: var(--ls-accent) !important;
  background: rgba(244, 194, 112, 0.07) !important;
}

.app-tabbar {
  border-color: rgba(244, 194, 112, 0.14) !important;
  background: rgba(9, 15, 24, 0.98) !important;
}

html body.ls-app-page > main#contenu-principal {
  min-width: 0 !important;
  overflow: visible !important;
}

html body.ls-app-page main#contenu-principal :is(
  .profile-card,
  .profile-hero-card,
  .quest-panel,
  .quest-card,
  .spin-panel,
  .payment-calendar-card,
  .payment-calendar-identity-card,
  .team-card,
  .team-staff-card,
  .admin-card,
  .admin-hero-card,
  .quest-admin-card,
  .quest-admin-final-card
) {
  border-color: rgba(244, 194, 112, 0.14) !important;
  background: #111927 !important;
  box-shadow: none !important;
}

html body.ls-app-page main#contenu-principal :is(input, select, textarea) {
  border-color: rgba(244, 194, 112, 0.17) !important;
  background: #0b121d !important;
}

html body.ls-app-page main#contenu-principal :is(
  .button-primary,
  .button.button-primary,
  .btn-primary,
  .spin-launch-button,
  .payment-calendar-gold-button
) {
  border-color: var(--ls-accent) !important;
  color: #211a38 !important;
  background: var(--ls-accent) !important;
}

/* -------------------------------------------------------------------------- */
/* Tablette                                                                    */
/* -------------------------------------------------------------------------- */

@media (max-width: 1099px) {
  body.ls-app-page > main#contenu-principal {
    padding-top: calc(84px + env(safe-area-inset-top)) !important;
  }

  body:not(.ls-app-page) .reviews-carousel .review-card {
    flex-basis: calc((min(1120px, calc(100vw - 40px)) - 14px) / 2) !important;
    width: calc((min(1120px, calc(100vw - 40px)) - 14px) / 2) !important;
  }
}

@media (max-width: 900px) {
  .marketing-nav {
    display: none !important;
  }

  .marketing-menu-button {
    display: inline-flex !important;
    width: auto !important;
    min-width: 88px !important;
    height: 46px !important;
    padding: 0 13px !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    border: 1px solid rgba(244, 194, 112, 0.22) !important;
    border-radius: 4px !important;
    color: var(--ls-accent) !important;
    background: rgba(244, 194, 112, 0.07) !important;
  }

  .home-hero-layout {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 42px !important;
  }

  body:not(.ls-app-page) .hero {
    min-height: 0 !important;
    padding-top: 142px !important;
  }

  .portal-preview {
    width: min(100%, 680px) !important;
  }

  body:not(.ls-app-page) .feature,
  body:not(.ls-app-page) .feature.reverse {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 0 !important;
  }

  body:not(.ls-app-page) .feature.reverse .feature-visual {
    order: 0 !important;
  }

  body:not(.ls-app-page) .feature-visual {
    min-height: 280px !important;
    max-height: 420px !important;
  }

  body:not(.ls-app-page) #team .public-team-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  body:not(.ls-app-page) .integrations-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

/* -------------------------------------------------------------------------- */
/* Mobile                                                                      */
/* -------------------------------------------------------------------------- */

@media (max-width: 720px) {
  :root {
    --ls-header-height: 62px;
  }

  html {
    scroll-padding-top: 86px !important;
  }

  .marketing-header {
    top: max(8px, env(safe-area-inset-top)) !important;
    width: calc(100% - 20px) !important;
    min-height: var(--ls-header-height) !important;
    padding: 7px 8px !important;
    gap: 8px !important;
    border-radius: 4px !important;
  }

  .marketing-brand {
    grid-template-columns: 40px minmax(0, 1fr) !important;
    gap: 9px !important;
  }

  .marketing-brand > img {
    width: 40px !important;
    height: 40px !important;
    max-width: 40px !important;
    border-radius: 4px !important;
  }

  .marketing-brand-copy strong {
    font-size: 0.88rem !important;
  }

  .marketing-brand-copy small {
    font-size: 0.5rem !important;
  }

  .marketing-login {
    display: none !important;
  }

  .marketing-menu-button {
    display: inline-grid !important;
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
    padding: 0 !important;
    place-items: center !important;
    flex: 0 0 44px !important;
  }

  .marketing-menu-label {
    display: none !important;
  }

  body:not(.ls-app-page) :where(#hero, #features, #team, #testimonials, #integrations, #faq, #cta) {
    scroll-margin-top: 86px !important;
  }

  body:not(.ls-app-page) .hero {
    width: 100% !important;
    min-height: 0 !important;
    padding: 112px 16px 54px !important;
  }

  .home-hero-layout {
    gap: 34px !important;
  }

  .home-hero-copy {
    text-align: center !important;
  }

  .home-eyebrow {
    justify-content: center !important;
    font-size: 0.62rem !important;
    letter-spacing: 0.1em !important;
  }

  body:not(.ls-app-page) .hero h1 {
    max-width: 560px !important;
    margin: 16px auto 18px !important;
    font-size: clamp(2.1rem, 9.5vw, 2.8rem) !important;
    line-height: 0.98 !important;
    letter-spacing: -0.06em !important;
    text-wrap: balance !important;
  }

  body:not(.ls-app-page) .hero-sub {
    max-width: 580px !important;
    margin: 0 auto !important;
    font-size: 0.91rem !important;
    line-height: 1.62 !important;
  }

  body:not(.ls-app-page) .hero-ctas {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    width: min(100%, 430px) !important;
    margin: 24px auto 0 !important;
    gap: 9px !important;
  }

  body:not(.ls-app-page) .hero-ctas > * {
    width: 100% !important;
  }

  .portal-preview {
    width: 100% !important;
    padding: 10px !important;
    border-radius: 4px !important;
  }

  .portal-preview-balance {
    padding: 17px !important;
  }

  .portal-preview-card {
    min-height: 108px !important;
    padding: 13px !important;
  }

  body:not(.ls-app-page) .hero-metrics {
    margin-top: 42px !important;
    padding-top: 16px !important;
  }

  body:not(.ls-app-page) .metric {
    padding: 7px 6px !important;
  }

  body:not(.ls-app-page) .metric-value {
    font-size: clamp(1.2rem, 6.5vw, 1.7rem) !important;
  }

  body:not(.ls-app-page) .metric-label {
    font-size: 0.56rem !important;
    line-height: 1.25 !important;
  }

  body:not(.ls-app-page) .logo-ticker {
    width: calc(100% - 24px) !important;
  }

  body:not(.ls-app-page) .section {
    width: calc(100% - 24px) !important;
    padding: 58px 0 !important;
  }

  .section-title {
    font-size: clamp(1.95rem, 9.2vw, 2.6rem) !important;
    line-height: 1.04 !important;
    text-wrap: balance !important;
  }

  .section-body {
    margin-top: 14px !important;
    font-size: 0.84rem !important;
    line-height: 1.58 !important;
  }

  .silk-divider {
    width: calc(100% - 24px) !important;
  }

  body:not(.ls-app-page) #features {
    gap: 14px !important;
  }

  body:not(.ls-app-page) .feature,
  body:not(.ls-app-page) .feature.reverse {
    padding: 7px !important;
    border-radius: 4px !important;
  }

  body:not(.ls-app-page) .feature-visual {
    min-height: 215px !important;
    height: 215px !important;
    border-radius: 4px !important;
  }

  body:not(.ls-app-page) .feature-content {
    padding: 23px 13px 27px !important;
  }

  body:not(.ls-app-page) .feature-number {
    width: 36px !important;
    height: 36px !important;
    margin-bottom: 18px !important;
  }

  body:not(.ls-app-page) .feature .section-title {
    font-size: clamp(1.85rem, 8.8vw, 2.45rem) !important;
  }

  body:not(.ls-app-page) #team .public-team-grid {
    grid-template-columns: minmax(0, 1fr) !important;
    margin-top: 24px !important;
    gap: 10px !important;
  }

  body:not(.ls-app-page) #team .public-team-card {
    grid-template-columns: 54px minmax(0, 1fr) !important;
    padding: 15px !important;
    gap: 11px !important;
    border-radius: 4px !important;
  }

  body:not(.ls-app-page) #team .public-team-card .team-avatar {
    width: 54px !important;
    height: 54px !important;
  }

  body:not(.ls-app-page) #team .team-mission {
    margin-top: 12px !important;
    padding-top: 12px !important;
    font-size: 0.72rem !important;
  }

  body:not(.ls-app-page) .reviews-carousel {
    margin-top: 24px !important;
  }

  body:not(.ls-app-page) .reviews-carousel .carousel-track {
    gap: 10px !important;
  }

  body:not(.ls-app-page) .reviews-carousel .review-card {
    flex-basis: calc(100vw - 24px) !important;
    width: calc(100vw - 24px) !important;
    min-height: 0 !important;
    padding: 20px !important;
    border-radius: 4px !important;
  }

  body:not(.ls-app-page) .reviews-carousel .carousel-footer {
    grid-template-columns: 42px minmax(100px, 1fr) 42px !important;
    width: min(100%, 330px) !important;
    margin-top: 14px !important;
  }

  body:not(.ls-app-page) .integrations-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    margin-top: 24px !important;
    gap: 9px !important;
  }

  body:not(.ls-app-page) .integration-item {
    min-height: 116px !important;
    padding: 15px 10px !important;
    border-radius: 4px !important;
  }

  body:not(.ls-app-page) .integration-icon {
    width: 46px !important;
    height: 46px !important;
  }

  body:not(.ls-app-page) .faq-list {
    margin-top: 24px !important;
    gap: 8px !important;
  }

  body:not(.ls-app-page) .faq-controls {
    justify-content: center !important;
  }

  body:not(.ls-app-page) .faq-item {
    border-radius: 4px !important;
  }

  body:not(.ls-app-page) .faq-question {
    grid-template-columns: minmax(0, 1fr) 36px !important;
    min-height: 64px !important;
    padding: 14px 12px 14px 15px !important;
    gap: 10px !important;
    font-size: 0.84rem !important;
  }

  body:not(.ls-app-page) .faq-icon {
    width: 36px !important;
    height: 36px !important;
    border-radius: 4px !important;
  }

  body:not(.ls-app-page) .faq-answer-inner {
    padding: 0 15px !important;
    font-size: 0.77rem !important;
    line-height: 1.55 !important;
  }

  body:not(.ls-app-page) .faq-item.open .faq-answer-inner {
    padding-bottom: 17px !important;
  }

  .home-cta {
    grid-template-columns: minmax(0, 1fr) !important;
    width: calc(100% - 24px) !important;
    margin-top: 8px !important;
    padding: 29px 18px !important;
    gap: 0 !important;
    border-radius: 4px !important;
  }

  .home-cta h2 {
    margin-top: 14px !important;
    font-size: clamp(2rem, 10.4vw, 2.85rem) !important;
    line-height: 1.02 !important;
    text-wrap: balance !important;
  }

  .home-cta h2 br {
    display: none !important;
  }

  .home-cta p {
    margin-top: 15px !important;
    font-size: 0.84rem !important;
    line-height: 1.55 !important;
  }

  .home-cta-actions {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    width: 100% !important;
    margin-top: 23px !important;
    gap: 9px !important;
  }

  .home-cta-actions > * {
    width: 100% !important;
  }

  .home-cta-mark {
    display: none !important;
  }

  .site-footer {
    display: grid !important;
    width: calc(100% - 24px) !important;
    min-height: 0 !important;
    padding: 24px 0 calc(26px + env(safe-area-inset-bottom)) !important;
    justify-items: start !important;
    gap: 10px !important;
  }

  .site-footer p {
    line-height: 1.45 !important;
  }

  html body.ls-app-page > main#contenu-principal {
    padding: calc(80px + env(safe-area-inset-top)) 12px calc(92px + env(safe-area-inset-bottom)) !important;
  }

  html body.ls-app-page main#contenu-principal :is(
    .profile-card,
    .profile-hero-card,
    .quest-panel,
    .quest-card,
    .spin-panel,
    .payment-calendar-card,
    .payment-calendar-identity-card,
    .team-card,
    .team-staff-card,
    .admin-card,
    .admin-hero-card,
    .quest-admin-card,
    .quest-admin-final-card
  ) {
    padding: 14px !important;
    border-radius: 4px !important;
  }
}

@media (max-width: 520px) {
  html body > .ls-mobile-drawer-layer > .ls-mobile-drawer {
    width: calc(100% - 12px) !important;
    border-radius: 4px 0 0 4px !important;
  }

  .ls-mobile-drawer .app-drawer-header {
    padding-right: 14px !important;
    padding-left: 14px !important;
  }

  .ls-mobile-drawer .app-drawer-nav {
    padding-right: 10px !important;
    padding-left: 10px !important;
  }

  .ls-mobile-drawer .app-drawer-footer {
    padding-right: 12px !important;
    padding-left: 12px !important;
  }
}

@media (max-width: 380px) {
  .marketing-brand-copy small {
    display: none !important;
  }

  body:not(.ls-app-page) .hero h1 {
    font-size: 2.15rem !important;
  }

  .section-title,
  body:not(.ls-app-page) .feature .section-title {
    font-size: 1.8rem !important;
  }

  .home-cta h2 {
    font-size: 1.9rem !important;
  }

  .app-drawer-link-copy small {
    white-space: normal !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto !important;
  }

  html body > .ls-mobile-drawer-layer > .ls-mobile-drawer,
  html body > .ls-mobile-drawer-layer > .app-drawer-backdrop {
    transition-duration: 1ms !important;
  }
}

@media (prefers-contrast: more) {
  :root {
    --ls-border: rgba(255, 215, 146, 0.34);
    --ls-border-strong: rgba(255, 215, 146, 0.64);
    --ls-muted: #d4cada;
  }
}


/* ===== livesea-polish-v12.css ===== */
/*
 * LiveSea Agency — polish V12
 * Cartes équipe inspirées des avis + navigation mobile allégée.
 * Cette feuille est volontairement chargée en dernier pour neutraliser les
 * anciennes variantes de cartes et garantir une composition stable.
 */

/* -------------------------------------------------------------------------- */
/* En-tête public : plus léger et plus discret                                */
/* -------------------------------------------------------------------------- */

body:not(.ls-app-page) .marketing-header {
  border-color: rgba(244, 194, 112, 0.18) !important;
  border-radius: 4px !important;
  background: rgba(9, 15, 24, 0.95) !important;
  box-shadow: 0 12px 34px rgba(7, 4, 18, 0.2) !important;
}

body:not(.ls-app-page) .marketing-header.is-scrolled {
  border-color: rgba(244, 194, 112, 0.28) !important;
  box-shadow: 0 10px 30px rgba(7, 4, 18, 0.25) !important;
}

body:not(.ls-app-page) .marketing-menu-button {
  border-color: transparent !important;
  color: var(--ls-accent) !important;
  background: rgba(244, 194, 112, 0.07) !important;
  box-shadow: inset 0 0 0 1px rgba(244, 194, 112, 0.12) !important;
}

body:not(.ls-app-page) .marketing-menu-button:hover {
  background: rgba(244, 194, 112, 0.12) !important;
}

body:not(.ls-app-page) .marketing-menu-button .app-icon {
  width: 19px !important;
  height: 19px !important;
}

/* -------------------------------------------------------------------------- */
/* Équipe publique : même clarté visuelle que les cartes d'avis               */
/* -------------------------------------------------------------------------- */

body:not(.ls-app-page) #team .public-team-grid {
  align-items: stretch !important;
}

body:not(.ls-app-page) #team .public-team-card {
  position: relative !important;
  inset: auto !important;
  display: flex !important;
  grid-template: none !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  min-height: 258px !important;
  margin: 0 !important;
  padding: 26px 22px 22px !important;
  flex: none !important;
  flex-basis: auto !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  gap: 0 !important;
  border: 1px solid rgba(244, 194, 112, 0.19) !important;
  border-radius: 4px !important;
  color: var(--ls-text) !important;
  background: linear-gradient(145deg, rgba(61, 49, 100, 0.97), rgba(49, 39, 82, 0.97)) !important;
  box-shadow: none !important;
  text-align: center !important;
  transform: none !important;
  translate: none !important;
  overflow: hidden !important;
  contain: layout paint style !important;
}

body:not(.ls-app-page) #team .public-team-card::before {
  position: absolute !important;
  inset: 0 22px auto !important;
  width: auto !important;
  height: 2px !important;
  border-radius: 0 0 4px 4px !important;
  background: linear-gradient(90deg, transparent, rgba(244, 194, 112, 0.76), transparent) !important;
  content: "" !important;
  opacity: 0.58 !important;
}

body:not(.ls-app-page) #team .public-team-card-head {
  position: static !important;
  inset: auto !important;
  display: flex !important;
  width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 13px !important;
  transform: none !important;
}

body:not(.ls-app-page) #team .public-team-card .team-avatar,
body:not(.ls-app-page) #team .public-team-card .team-avatar.large {
  position: static !important;
  inset: auto !important;
  display: block !important;
  width: 76px !important;
  min-width: 76px !important;
  max-width: 76px !important;
  height: 76px !important;
  min-height: 76px !important;
  max-height: 76px !important;
  margin: 0 !important;
  padding: 0 !important;
  flex: 0 0 76px !important;
  border: 2px solid rgba(244, 194, 112, 0.62) !important;
  border-radius: 50% !important;
  background: #111927 !important;
  box-shadow: 0 0 0 5px rgba(244, 194, 112, 0.055) !important;
  transform: none !important;
  translate: none !important;
  overflow: hidden !important;
}

body:not(.ls-app-page) #team .public-team-card .team-avatar img {
  position: static !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  transform: none !important;
}

body:not(.ls-app-page) #team .public-team-identity {
  position: static !important;
  inset: auto !important;
  display: grid !important;
  width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  justify-items: center !important;
  gap: 6px !important;
  transform: none !important;
}

body:not(.ls-app-page) #team .public-team-card .team-pseudo,
body:not(.ls-app-page) #team .public-team-card .team-role,
body:not(.ls-app-page) #team .public-team-card .team-mission {
  position: static !important;
  inset: auto !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  float: none !important;
  clear: both !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  grid-area: auto !important;
  grid-column: auto !important;
  grid-row: auto !important;
  place-self: auto !important;
  transform: none !important;
  translate: none !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  overflow-wrap: anywhere !important;
  word-break: normal !important;
}

body:not(.ls-app-page) #team .public-team-card .team-pseudo {
  margin: 0 !important;
  padding: 0 !important;
  color: var(--ls-text) !important;
  font-size: 1rem !important;
  font-weight: 820 !important;
  line-height: 1.22 !important;
  letter-spacing: -0.025em !important;
  text-align: center !important;
}

body:not(.ls-app-page) #team .public-team-card .team-role {
  margin: 0 !important;
  padding: 0 !important;
  color: var(--ls-accent) !important;
  font-size: 0.61rem !important;
  font-weight: 830 !important;
  line-height: 1.35 !important;
  letter-spacing: 0.15em !important;
  text-align: center !important;
  text-transform: uppercase !important;
}

body:not(.ls-app-page) #team .public-team-card-divider {
  position: static !important;
  display: block !important;
  width: 100% !important;
  height: 1px !important;
  margin: 20px 0 15px !important;
  padding: 0 !important;
  flex: 0 0 1px !important;
  border: 0 !important;
  background: rgba(244, 194, 112, 0.13) !important;
}

body:not(.ls-app-page) #team .public-team-card .team-mission {
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  color: var(--ls-text-soft) !important;
  font-size: 0.76rem !important;
  font-style: normal !important;
  font-weight: 420 !important;
  line-height: 1.55 !important;
  text-align: center !important;
}

body:not(.ls-app-page) #team .public-team-card .team-mission span {
  position: static !important;
  display: block !important;
  width: 100% !important;
  margin: 0 0 7px !important;
  padding: 0 !important;
  color: var(--ls-accent) !important;
  font-size: 0.59rem !important;
  font-weight: 830 !important;
  line-height: 1.2 !important;
  letter-spacing: 0.16em !important;
  text-align: center !important;
  text-transform: uppercase !important;
}

/* -------------------------------------------------------------------------- */
/* Drawer : navigation plate, compacte et immédiatement lisible               */
/* -------------------------------------------------------------------------- */

html body > .ls-mobile-drawer-layer > .ls-mobile-drawer {
  width: min(calc(100% - 18px), 390px) !important;
  border-left-color: rgba(244, 194, 112, 0.17) !important;
  border-radius: 4px 0 0 4px !important;
  box-shadow: -18px 0 54px rgba(4, 2, 12, 0.32) !important;
}

.ls-mobile-drawer .app-drawer-header {
  min-height: calc(74px + env(safe-area-inset-top)) !important;
  padding: calc(11px + env(safe-area-inset-top)) 14px 11px !important;
  gap: 11px !important;
}

.ls-mobile-drawer .app-drawer-header .app-drawer-heading {
  grid-template-columns: 38px minmax(0, 1fr) !important;
  gap: 10px !important;
}

.ls-mobile-drawer .app-drawer-brand-mark {
  width: 38px !important;
  height: 38px !important;
  max-width: 38px !important;
  border-radius: 4px !important;
}

.ls-mobile-drawer .app-drawer-header h2 {
  font-size: 1.02rem !important;
}

.ls-mobile-drawer .app-drawer-header .app-icon-button {
  width: 38px !important;
  height: 38px !important;
  flex-basis: 38px !important;
  border-color: transparent !important;
  border-radius: 4px !important;
  background: rgba(244, 194, 112, 0.07) !important;
  box-shadow: inset 0 0 0 1px rgba(244, 194, 112, 0.12) !important;
}

.ls-mobile-drawer .app-drawer-intro {
  padding: 13px 16px 5px !important;
  font-size: 0.72rem !important;
  line-height: 1.45 !important;
}

.ls-mobile-drawer .app-drawer-nav {
  padding: 9px 12px 14px !important;
  gap: 0 !important;
}

.ls-mobile-drawer .app-drawer-nav-label {
  padding: 8px 6px 7px !important;
}

.ls-mobile-drawer .app-drawer-link {
  grid-template-columns: 34px minmax(0, 1fr) 16px !important;
  min-height: 57px !important;
  padding: 8px 7px !important;
  gap: 9px !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(244, 194, 112, 0.09) !important;
  border-radius: 0 !important;
}

.ls-mobile-drawer .app-drawer-link:last-child {
  border-bottom-color: transparent !important;
}

.ls-mobile-drawer .app-drawer-link:hover,
.ls-mobile-drawer .app-drawer-link.is-active {
  border-bottom-color: rgba(244, 194, 112, 0.09) !important;
  border-radius: 4px !important;
  background: rgba(244, 194, 112, 0.075) !important;
}

.ls-mobile-drawer .app-drawer-link .app-drawer-link-icon {
  width: 34px !important;
  height: 34px !important;
  border: 0 !important;
  border-radius: 4px !important;
  background: transparent !important;
}

.ls-mobile-drawer .app-drawer-link.is-active .app-drawer-link-icon {
  background: rgba(244, 194, 112, 0.1) !important;
}

.ls-mobile-drawer .app-drawer-link-icon .app-icon {
  width: 18px !important;
  height: 18px !important;
}

.ls-mobile-drawer .app-drawer-link-copy {
  gap: 2px !important;
}

.ls-mobile-drawer .app-drawer-link-copy strong {
  font-size: 0.8rem !important;
}

.ls-mobile-drawer .app-drawer-link-copy small {
  font-size: 0.62rem !important;
}

.ls-mobile-drawer .app-drawer-footer {
  padding: 10px 14px calc(12px + env(safe-area-inset-bottom)) !important;
  gap: 8px !important;
}

.ls-mobile-drawer.marketing-drawer .app-drawer-promo {
  display: none !important;
}

.ls-mobile-drawer .app-login-button {
  min-height: 49px !important;
  border-radius: 4px !important;
}

/* -------------------------------------------------------------------------- */
/* Responsive                                                                 */
/* -------------------------------------------------------------------------- */

@media (max-width: 900px) {
  body:not(.ls-app-page) .marketing-header {
    width: calc(100% - 28px) !important;
    min-height: 62px !important;
    padding: 7px 8px 7px 10px !important;
    gap: 8px !important;
  }

  body:not(.ls-app-page) .marketing-menu-button {
    display: inline-grid !important;
    width: 42px !important;
    min-width: 42px !important;
    height: 42px !important;
    padding: 0 !important;
    place-items: center !important;
    flex: 0 0 42px !important;
    border-radius: 4px !important;
  }

  body:not(.ls-app-page) .marketing-menu-label {
    display: none !important;
  }
}

@media (max-width: 720px) {
  body:not(.ls-app-page) .marketing-header {
    top: max(9px, env(safe-area-inset-top)) !important;
    width: calc(100% - 24px) !important;
    min-height: 58px !important;
    padding: 6px 7px 6px 8px !important;
    border-radius: 4px !important;
  }

  body:not(.ls-app-page) .marketing-brand {
    grid-template-columns: 36px minmax(0, 1fr) !important;
    gap: 9px !important;
  }

  body:not(.ls-app-page) .marketing-brand > img {
    width: 36px !important;
    height: 36px !important;
    max-width: 36px !important;
    border-radius: 4px !important;
  }

  body:not(.ls-app-page) .marketing-brand-copy strong {
    font-size: 0.82rem !important;
  }

  body:not(.ls-app-page) .marketing-brand-copy small {
    font-size: 0.45rem !important;
    letter-spacing: 0.09em !important;
  }

  body:not(.ls-app-page) .marketing-menu-button {
    width: 38px !important;
    min-width: 38px !important;
    height: 38px !important;
    flex-basis: 38px !important;
    border-radius: 4px !important;
  }

  body:not(.ls-app-page) #team .public-team-grid {
    gap: 12px !important;
  }

  body:not(.ls-app-page) #team .public-team-card {
    min-height: 0 !important;
    padding: 22px 18px 20px !important;
    border-radius: 4px !important;
  }

  body:not(.ls-app-page) #team .public-team-card .team-avatar,
  body:not(.ls-app-page) #team .public-team-card .team-avatar.large {
    width: 68px !important;
    min-width: 68px !important;
    max-width: 68px !important;
    height: 68px !important;
    min-height: 68px !important;
    max-height: 68px !important;
    flex-basis: 68px !important;
  }

  body:not(.ls-app-page) #team .public-team-card-head {
    gap: 12px !important;
  }

  body:not(.ls-app-page) #team .public-team-card .team-pseudo {
    font-size: 0.96rem !important;
  }

  body:not(.ls-app-page) #team .public-team-card .team-role {
    font-size: 0.58rem !important;
  }

  body:not(.ls-app-page) #team .public-team-card-divider {
    margin: 17px 0 13px !important;
  }

  body:not(.ls-app-page) #team .public-team-card .team-mission {
    font-size: 0.73rem !important;
    line-height: 1.5 !important;
  }
}

@media (max-width: 380px) {
  html body > .ls-mobile-drawer-layer > .ls-mobile-drawer {
    width: calc(100% - 10px) !important;
  }

  body:not(.ls-app-page) .marketing-brand-copy small {
    display: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html body > .ls-mobile-drawer-layer > .ls-mobile-drawer,
  html body > .ls-mobile-drawer-layer > .app-drawer-backdrop {
    transition-duration: 1ms !important;
  }
}

/* -------------------------------------------------------------------------- */
/* V16 — Carrousel public de l’équipe, aligné sur celui des avis               */
/* -------------------------------------------------------------------------- */

body:not(.ls-app-page) #team .public-team-carousel {
  width: min(100%, 980px) !important;
  max-width: 100% !important;
  margin: 30px auto 0 !important;
}

body:not(.ls-app-page) #team .public-team-carousel .carousel-viewport {
  width: 100% !important;
  max-width: 100% !important;
  margin-inline: auto !important;
  padding: 1px !important;
  border: 1px solid rgba(244, 194, 112, 0.08) !important;
  border-radius: 4px !important;
  background: rgba(33, 26, 58, 0.2) !important;
  scroll-padding-inline: 0 !important;
  touch-action: pan-y pinch-zoom !important;
}

body:not(.ls-app-page) #team .public-team-carousel .carousel-track {
  display: flex !important;
  width: max-content !important;
  min-width: 100% !important;
  align-items: stretch !important;
  gap: 16px !important;
  padding: 0 !important;
}

body:not(.ls-app-page) #team .public-team-carousel .public-team-card {
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  min-height: 388px !important;
  height: auto !important;
  flex: 0 0 min(100%, 392px) !important;
  scroll-snap-align: center !important;
  scroll-snap-stop: always !important;
}

body:not(.ls-app-page) #team .public-team-carousel .public-team-card .team-mission {
  margin-top: auto !important;
}

body:not(.ls-app-page) #team .public-team-carousel .carousel-footer {
  margin-top: 16px !important;
}

body:not(.ls-app-page) #team .public-team-carousel[data-items="1"] .carousel-footer {
  display: none !important;
}

body:not(.ls-app-page) #team .public-team-carousel[data-items="1"] .carousel-viewport {
  width: min(100%, 392px) !important;
}

body:not(.ls-app-page) #team .public-team-carousel[data-items="1"] .carousel-track {
  min-width: 100% !important;
  justify-content: center !important;
}

.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

@media (min-width: 1025px) {
  body:not(.ls-app-page) #team .public-team-carousel .public-team-card {
    flex-basis: 336px !important;
    min-height: 360px !important;
  }
}

@media (max-width: 768px) {
  body:not(.ls-app-page) #team .public-team-carousel {
    width: 100% !important;
    margin-top: 24px !important;
  }

  body:not(.ls-app-page) #team .public-team-carousel .carousel-viewport {
    width: min(100%, 620px) !important;
    border-color: transparent !important;
    background: transparent !important;
  }

  body:not(.ls-app-page) #team .public-team-carousel .carousel-track {
    gap: 14px !important;
  }

  body:not(.ls-app-page) #team .public-team-carousel .public-team-card {
    flex-basis: min(100%, 392px) !important;
    min-height: 410px !important;
  }
}

@media (max-width: 420px) {
  body:not(.ls-app-page) #team .public-team-carousel .public-team-card {
    min-height: 390px !important;
    padding: 26px 20px 24px !important;
  }
}

/* -------------------------------------------------------------------------- */
/* V20 — Équipe publique strictement alignée sur le carrousel des avis         */
/* -------------------------------------------------------------------------- */

body:not(.ls-app-page) #team .team-reviews-carousel {
  width: min(100%, 1120px) !important;
  max-width: 100% !important;
  margin: 34px auto 0 !important;
}

body:not(.ls-app-page) #team .team-reviews-carousel .carousel-viewport {
  width: 100% !important;
  max-width: 100% !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  scroll-padding-inline: 0 !important;
  scroll-snap-type: x mandatory !important;
  scrollbar-width: none !important;
  touch-action: pan-y pinch-zoom !important;
}

body:not(.ls-app-page) #team .team-reviews-carousel .carousel-viewport::-webkit-scrollbar {
  display: none !important;
}

body:not(.ls-app-page) #team .team-reviews-carousel .carousel-track {
  display: flex !important;
  width: max-content !important;
  min-width: 100% !important;
  padding: 0 !important;
  gap: 14px !important;
  align-items: stretch !important;
  transform: none !important;
}

body:not(.ls-app-page) #team .team-reviews-carousel .team-review-card {
  position: relative !important;
  display: flex !important;
  width: calc((min(1120px, calc(100vw - 40px)) - 28px) / 3) !important;
  min-width: 0 !important;
  max-width: none !important;
  min-height: 310px !important;
  height: auto !important;
  margin: 0 !important;
  padding: 28px 24px !important;
  flex: 0 0 calc((min(1120px, calc(100vw - 40px)) - 28px) / 3) !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 0 !important;
  border: 1px solid rgba(244, 194, 112, 0.16) !important;
  border-radius: 4px !important;
  color: var(--ls-text) !important;
  background: var(--ls-surface) !important;
  box-shadow: none !important;
  text-align: center !important;
  scroll-snap-align: start !important;
  scroll-snap-stop: always !important;
  transform: none !important;
  overflow: hidden !important;
}

body:not(.ls-app-page) #team .team-reviews-carousel .team-review-card::before,
body:not(.ls-app-page) #team .team-reviews-carousel .team-review-card::after {
  display: none !important;
  content: none !important;
}

body:not(.ls-app-page) #team .team-reviews-carousel .review-author-block {
  width: 100% !important;
  display: flex !important;
  margin: 0 0 16px !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px !important;
}

body:not(.ls-app-page) #team .team-reviews-carousel .review-avatar {
  position: static !important;
  width: 58px !important;
  min-width: 58px !important;
  max-width: 58px !important;
  height: 58px !important;
  min-height: 58px !important;
  max-height: 58px !important;
  margin: 0 !important;
  flex: 0 0 58px !important;
  border: 1px solid rgba(244, 194, 112, 0.38) !important;
  border-radius: 50% !important;
  background: rgba(156, 163, 175, 0.07) !important;
  overflow: hidden !important;
}

body:not(.ls-app-page) #team .team-reviews-carousel .review-avatar img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  border-radius: 50% !important;
  object-fit: cover !important;
}

body:not(.ls-app-page) #team .team-reviews-carousel .review-pseudo {
  width: 100% !important;
  margin: 0 !important;
  color: var(--ls-text) !important;
  font-size: 0.96rem !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
  text-align: center !important;
  overflow-wrap: anywhere !important;
}

body:not(.ls-app-page) #team .team-reviews-carousel .team-review-role {
  width: 100% !important;
  margin: 0 0 16px !important;
  color: var(--ls-accent) !important;
  font-size: 0.76rem !important;
  font-weight: 800 !important;
  line-height: 1.42 !important;
  letter-spacing: 0.15em !important;
  text-align: center !important;
  text-transform: uppercase !important;
  overflow-wrap: anywhere !important;
}

body:not(.ls-app-page) #team .team-reviews-carousel .review-title {
  width: 100% !important;
  margin: 0 0 18px !important;
  color: var(--ls-text) !important;
  font-size: 0.76rem !important;
  font-weight: 700 !important;
  line-height: 1.42 !important;
  letter-spacing: 0.15em !important;
  text-align: center !important;
  text-transform: uppercase !important;
}

body:not(.ls-app-page) #team .team-reviews-carousel .review-quote {
  width: 100% !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 18px 0 0 !important;
  border-top: 1px solid rgba(244, 194, 112, 0.12) !important;
  color: var(--ls-text-soft) !important;
  font-size: 0.82rem !important;
  font-style: normal !important;
  font-weight: 300 !important;
  line-height: 1.62 !important;
  text-align: center !important;
  overflow-wrap: anywhere !important;
}

body:not(.ls-app-page) #team .team-reviews-carousel .carousel-footer {
  display: grid !important;
  grid-template-columns: 44px minmax(120px, 280px) 44px !important;
  width: min(100%, 390px) !important;
  margin: 18px auto 0 !important;
  align-items: center !important;
  gap: 12px !important;
}

body:not(.ls-app-page) #team .team-reviews-carousel[data-items="1"] .carousel-footer {
  display: none !important;
}

@media (max-width: 1024px) {
  body:not(.ls-app-page) #team .team-reviews-carousel .team-review-card {
    width: min(78vw, 330px) !important;
    flex-basis: min(78vw, 330px) !important;
  }
}

@media (max-width: 768px) {
  body:not(.ls-app-page) #team .team-reviews-carousel {
    width: 100% !important;
    margin-top: 30px !important;
  }

  body:not(.ls-app-page) #team .team-reviews-carousel .carousel-track {
    gap: 14px !important;
  }

  body:not(.ls-app-page) #team .team-reviews-carousel .team-review-card {
    width: min(86vw, 360px) !important;
    min-height: 330px !important;
    padding: 28px 24px !important;
    flex-basis: min(86vw, 360px) !important;
  }
}

@media (max-width: 420px) {
  body:not(.ls-app-page) #team .team-reviews-carousel .team-review-card {
    width: min(88vw, 340px) !important;
    min-height: 330px !important;
    padding: 26px 22px !important;
    flex-basis: min(88vw, 340px) !important;
  }

  body:not(.ls-app-page) #team .team-reviews-carousel .review-pseudo {
    font-size: 0.92rem !important;
  }

  body:not(.ls-app-page) #team .team-reviews-carousel .team-review-role,
  body:not(.ls-app-page) #team .team-reviews-carousel .review-title {
    font-size: 0.7rem !important;
  }

  body:not(.ls-app-page) #team .team-reviews-carousel .review-quote {
    font-size: 0.78rem !important;
  }
}

/* ========================================================================== */
/* V29 — icônes et avatars sans cadres décoratifs inutiles                    */
/* ========================================================================== */
html body.ls-app-page :where(
  .app-user-card img,
  .app-mobile-avatar img,
  .app-drawer-user img
) {
  border: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}

html body.ls-app-page :where(
  .app-drawer-brand-mark,
  .ls-auth-gate-brand img
) {
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}

html body.ls-app-page .ls-auth-gate-shield {
  display: grid !important;
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  place-items: center !important;
  font-size: 1.7rem !important;
}

html body.ls-app-page .ls-auth-gate--suspended .ls-auth-gate-shield {
  border: 0 !important;
  background: transparent !important;
}

@media (max-width: 700px) {
  html body.ls-app-page .ls-auth-gate-shield {
    width: 28px !important;
    height: 28px !important;
    margin-left: auto !important;
    font-size: 1.12rem !important;
  }
}

/* ===== livesea-consistency-v22.css intégré en V30 ===== */
/* LiveSea V22 — cohérence du menu mobile et des actions de tableaux */

:root {
  --ls-table-action-width: 120px;
  --ls-table-action-height: 38px;
  --ls-table-action-gap: 8px;
}

/* -------------------------------------------------------------------------- */
/* Menu mobile : panneau plein écran à bord droit, sans arrondi latéral.      */
/* -------------------------------------------------------------------------- */

html body > .ls-mobile-drawer-layer > .ls-mobile-drawer,
html body.ls-app-page > .ls-mobile-drawer-layer > .ls-mobile-drawer {
  border-radius: 0 !important;
}

/* -------------------------------------------------------------------------- */
/* Actions de tableaux : une seule dimension sur toute l'application.         */
/* -------------------------------------------------------------------------- */

body.ls-app-page :where(
  .admin-table-scroll,
  .admin-table-wrap,
  .admin-search-table-scroll,
  .quest-flat-table-shell,
  .payment-calendar-table-shell,
  .profile-table-scroll,
  .team-table-wrap
) :where(
  .admin-table-link,
  .admin-table-button,
  .admin-table-delete-button,
  .quest-admin-table-link,
  .quest-flat-open,
  .payment-calendar-gold-button,
  .payment-calendar-danger-button,
  .payment-calendar-static-button,
  .profile-payment-table button
) {
  inline-size: var(--ls-table-action-width) !important;
  min-inline-size: var(--ls-table-action-width) !important;
  max-inline-size: var(--ls-table-action-width) !important;
  block-size: var(--ls-table-action-height) !important;
  min-block-size: var(--ls-table-action-height) !important;
  max-block-size: var(--ls-table-action-height) !important;
  padding: 0 10px !important;
  margin: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  border-radius: 8px !important;
  font-size: 0.70rem !important;
  font-weight: 820 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  text-align: center !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  box-sizing: border-box !important;
  flex: 0 0 var(--ls-table-action-width) !important;
}

body.ls-app-page :where(
  .admin-table-scroll,
  .admin-table-wrap,
  .admin-search-table-scroll,
  .quest-flat-table-shell,
  .payment-calendar-table-shell,
  .profile-table-scroll,
  .team-table-wrap
) :where(
  .admin-table-action-form,
  .admin-inline-delete-form,
  .payment-calendar-inline-form
) {
  inline-size: var(--ls-table-action-width) !important;
  min-inline-size: var(--ls-table-action-width) !important;
  max-inline-size: var(--ls-table-action-width) !important;
  margin: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 var(--ls-table-action-width) !important;
}

/* La colonne paiement affiche deux commandes strictement identiques. */
body.ls-app-page .admin-payment-calendar-actions {
  display: flex !important;
  align-items: center !important;
  justify-content: start !important;
  gap: var(--ls-table-action-gap) !important;
  inline-size: max-content !important;
  min-inline-size: calc((var(--ls-table-action-width) * 2) + var(--ls-table-action-gap)) !important;
  margin: 0 !important;
}

body.ls-app-page .admin-payment-calendar-actions > :where(form, a, button, span) {
  margin: 0 !important;
}

body.ls-app-page .admin-payment-calendar-actions > .admin-table-status {
  inline-size: var(--ls-table-action-width) !important;
  min-inline-size: var(--ls-table-action-width) !important;
  max-inline-size: var(--ls-table-action-width) !important;
  block-size: var(--ls-table-action-height) !important;
  min-block-size: var(--ls-table-action-height) !important;
  max-block-size: var(--ls-table-action-height) !important;
  padding: 0 10px !important;
  border-radius: 8px !important;
  box-sizing: border-box !important;
}

body.ls-app-page .admin-payment-calendar-registrations-table th:last-child,
body.ls-app-page .admin-payment-calendar-registrations-table td:last-child {
  min-inline-size: calc((var(--ls-table-action-width) * 2) + var(--ls-table-action-gap) + 24px) !important;
}

/* Groupes d'actions présents dans les autres tableaux. */
body.ls-app-page :where(
  .quest-admin-action-buttons,
  .quest-admin-final-action-buttons,
  .profile-table-actions,
  .payment-calendar-slot-action
) {
  display: flex !important;
  align-items: center !important;
  gap: var(--ls-table-action-gap) !important;
  flex-wrap: wrap !important;
}

@media (max-width: 600px) {
  :root {
    --ls-table-action-width: 116px;
    --ls-table-action-height: 38px;
  }

  html body > .ls-mobile-drawer-layer > .ls-mobile-drawer,
  html body.ls-app-page > .ls-mobile-drawer-layer > .ls-mobile-drawer {
    border-radius: 0 !important;
  }
}

/* -------------------------------------------------------------------------- */
/* V22 — calendrier des paiements : deux actions réellement identiques.       */
/*                                                                            */
/* Ces contrôles n'utilisent volontairement plus les classes globales         */
/* .button/.button-primary/.admin-table-link. Cela évite que les règles        */
/* générales de l'application imposent une hauteur ou un padding différents.  */
/* -------------------------------------------------------------------------- */

html body.ls-app-page main#contenu-principal
.admin-payment-calendar-registrations-table
.admin-payment-calendar-actions {
  --ls-payment-action-width: 120px;
  --ls-payment-action-height: 38px;
  display: grid !important;
  grid-template-columns: repeat(2, var(--ls-payment-action-width)) !important;
  align-items: center !important;
  justify-content: start !important;
  gap: 8px !important;
  inline-size: max-content !important;
  min-inline-size: calc((var(--ls-payment-action-width) * 2) + 8px) !important;
  margin: 0 !important;
}

html body.ls-app-page main#contenu-principal
.admin-payment-calendar-registrations-table
.admin-payment-calendar-actions
.admin-payment-action-form {
  display: block !important;
  inline-size: var(--ls-payment-action-width) !important;
  min-inline-size: var(--ls-payment-action-width) !important;
  max-inline-size: var(--ls-payment-action-width) !important;
  block-size: var(--ls-payment-action-height) !important;
  min-block-size: var(--ls-payment-action-height) !important;
  max-block-size: var(--ls-payment-action-height) !important;
  margin: 0 !important;
  padding: 0 !important;
}

html body.ls-app-page main#contenu-principal
.admin-payment-calendar-registrations-table
.admin-payment-calendar-actions
.admin-payment-action-control {
  -webkit-appearance: none !important;
  appearance: none !important;
  box-sizing: border-box !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  inline-size: var(--ls-payment-action-width) !important;
  min-inline-size: var(--ls-payment-action-width) !important;
  max-inline-size: var(--ls-payment-action-width) !important;
  block-size: var(--ls-payment-action-height) !important;
  min-block-size: var(--ls-payment-action-height) !important;
  max-block-size: var(--ls-payment-action-height) !important;
  margin: 0 !important;
  padding: 0 12px !important;
  border: 1px solid transparent !important;
  border-radius: 7px !important;
  outline: 0 !important;
  box-shadow: none !important;
  font-family: Montserrat, Inter, system-ui, sans-serif !important;
  font-size: 0.75rem !important;
  font-weight: 800 !important;
  font-style: normal !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  text-align: center !important;
  text-decoration: none !important;
  text-transform: none !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: clip !important;
  cursor: pointer !important;
  transform: none !important;
  transition: background-color 140ms ease, border-color 140ms ease !important;
}

html body.ls-app-page main#contenu-principal
.admin-payment-calendar-registrations-table
.admin-payment-calendar-actions
.admin-payment-action-control--primary {
  color: #101428 !important;
  background: var(--ls-accent, #f5c56d) !important;
  border-color: var(--ls-accent, #f5c56d) !important;
}

html body.ls-app-page main#contenu-principal
.admin-payment-calendar-registrations-table
.admin-payment-calendar-actions
.admin-payment-action-control--secondary {
  color: rgba(244, 246, 252, 0.98) !important;
  background: rgba(255, 255, 255, 0.045) !important;
  border-color: rgba(219, 231, 247, 0.18) !important;
}

html body.ls-app-page main#contenu-principal
.admin-payment-calendar-registrations-table
.admin-payment-calendar-actions
.admin-payment-action-control--state {
  color: #d9ffe8 !important;
  background: rgba(34, 197, 94, 0.13) !important;
  border-color: rgba(34, 197, 94, 0.31) !important;
  cursor: default !important;
}

html body.ls-app-page main#contenu-principal
.admin-payment-calendar-registrations-table
.admin-payment-calendar-actions
.admin-payment-action-control:hover,
html body.ls-app-page main#contenu-principal
.admin-payment-calendar-registrations-table
.admin-payment-calendar-actions
.admin-payment-action-control:active,
html body.ls-app-page main#contenu-principal
.admin-payment-calendar-registrations-table
.admin-payment-calendar-actions
.admin-payment-action-control:focus {
  min-block-size: var(--ls-payment-action-height) !important;
  max-block-size: var(--ls-payment-action-height) !important;
  padding: 0 12px !important;
  transform: none !important;
  box-shadow: none !important;
}

html body.ls-app-page main#contenu-principal
.admin-payment-calendar-registrations-table
.admin-payment-calendar-actions
.admin-payment-action-control:focus-visible {
  outline: 2px solid rgba(245, 197, 109, 0.78) !important;
  outline-offset: 2px !important;
}

@media (max-width: 600px) {
  html body.ls-app-page main#contenu-principal
  .admin-payment-calendar-registrations-table
  .admin-payment-calendar-actions {
    --ls-payment-action-width: 116px;
    --ls-payment-action-height: 38px;
  }
}

/* V23 — états financiers annulés après départ Discord confirmé. */
.admin-payment-cancelled,
.profile-payment-status-cancelled,
.team-history-status.is-cancelled {
  color: #d5d0df !important;
  background: rgba(145, 136, 160, 0.16) !important;
  border-color: rgba(178, 168, 194, 0.34) !important;
}

/* ===== LiveSea V30 — cartes statistiques partagées ===== */
.ls-stat-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  width: 100%;
}

.ls-stat-card {
  --ls-stat-tone: 246, 193, 99;
  position: relative;
  min-width: 0;
  min-height: 154px;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  align-items: start;
  gap: 13px;
  padding: 19px;
  overflow: hidden;
  border-radius: 4px;
  color: #f8f5f0;
  background:
    radial-gradient(circle at 100% 0%, rgba(var(--ls-stat-tone), 0.10), transparent 42%),
    linear-gradient(145deg, rgba(39, 31, 70, 0.96), rgba(23, 31, 44, 0.98));
  border: 1px solid rgba(var(--ls-stat-tone), 0.26);
  box-shadow: 0 16px 38px rgba(3, 7, 15, 0.20);
}

.ls-stat-card::after {
  content: "";
  position: absolute;
  inset: auto -32px -40px auto;
  width: 105px;
  height: 105px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.035);
  pointer-events: none;
}

.ls-stat-card--primary { --ls-stat-tone: 111, 183, 255; }
.ls-stat-card--warning { --ls-stat-tone: 246, 193, 99; }
.ls-stat-card--success { --ls-stat-tone: 84, 207, 145; }
.ls-stat-card--accent  { --ls-stat-tone: 178, 132, 255; }
.ls-stat-card--danger  { --ls-stat-tone: 239, 109, 117; }

.ls-stat-card__icon {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  color: rgb(var(--ls-stat-tone));
  background: rgba(var(--ls-stat-tone), 0.13);
  border: 1px solid rgba(var(--ls-stat-tone), 0.26);
  font-size: 1rem;
}

.ls-stat-card__content {
  min-width: 0;
  display: grid;
  align-content: start;
  gap: 5px;
}

.ls-stat-card__label {
  color: rgb(var(--ls-stat-tone));
  font-size: 0.74rem;
  font-weight: 850;
  letter-spacing: 0.055em;
  line-height: 1.25;
  text-transform: uppercase;
}

.ls-stat-card__value {
  display: block;
  max-width: 100%;
  color: #fffaf2;
  font-size: clamp(1.45rem, 2.2vw, 2rem);
  font-weight: 850;
  line-height: 1.05;
  letter-spacing: -0.03em;
  overflow-wrap: anywhere;
}

.ls-stat-card__hint {
  color: #9da7ba;
  font-size: 0.77rem;
  line-height: 1.42;
}

/* La synthèse des quêtes utilise le composant partagé sans ancien conteneur visuel. */
html body.ls-app-page .quest-page .quest-overview-strip.ls-stat-grid {
  padding: 0 !important;
  margin: 0 0 18px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
}

html body.ls-app-page .quest-page .quest-overview-strip .ls-stat-card {
  min-width: 0 !important;
  border-right: 1px solid rgba(var(--ls-stat-tone), 0.26) !important;
}

@media (max-width: 980px) {
  .ls-stat-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 680px) {
  .ls-stat-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .ls-stat-card {
    min-height: 136px;
    grid-template-columns: 38px minmax(0, 1fr);
    gap: 10px;
    padding: 14px;
    border-radius: 4px;
  }

  .ls-stat-card__icon {
    width: 38px;
    height: 38px;
    border-radius: 4px;
    font-size: 0.9rem;
  }

  .ls-stat-card__label {
    font-size: 0.67rem;
    letter-spacing: 0.04em;
  }

  .ls-stat-card__value {
    font-size: clamp(1.15rem, 5.5vw, 1.55rem);
  }

  .ls-stat-card__hint {
    font-size: 0.69rem;
  }
}

@media (max-width: 390px) {
  .ls-stat-card {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .ls-stat-card__icon {
    width: 34px;
    height: 34px;
  }
}