/*
 * LiveSea Agency — V40 Harmonized UI
 * Couche finale commune à toutes les pages.
 * Objectif : interface sombre, compacte, quasi carrée et mobile-first.
 */

:root {
  --radius-card: 4px;
  --radius-control: 4px;
  --radius-small: 4px;
  --radius-icon: 6px;
  --radius-avatar: 50%;

  --bg-page: #080e16;
  --bg-section: #101827;
  --bg-card: #171f2e;
  --bg-card-alt: #1c2334;
  --bg-control: #211a3a;
  --bg-control-hover: #2a2147;

  --border-default: rgba(245, 190, 95, 0.22);
  --border-strong: rgba(245, 190, 95, 0.38);
  --border-purple: rgba(151, 101, 214, 0.35);

  --text-primary: #f5f3f7;
  --text-secondary: #aaa4b8;
  --text-muted: #817b91;

  --accent-gold: #f5bf65;
  --accent-gold-hover: #ffd17f;
  --accent-purple: #6b4aa0;
  --accent-purple-deep: #342654;
  --accent-success: #6fd49a;
  --accent-danger: #e8819b;
  --accent-warning: #f5bf65;

  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 12px;
  --spacing-lg: 16px;
  --spacing-xl: 24px;

  --control-height: 42px;
  --tap-size: 44px;
  --content-max: 1420px;
  --ls-table-action-width: 120px;
  --ls-table-action-height: 40px;
  --ls-table-action-gap: 8px;
  --transition-fast: 140ms ease;
  --focus-ring: 0 0 0 3px rgba(245, 191, 101, 0.28);

  /* Aliases historiques : toutes les feuilles anciennes convergent ici. */
  --card-radius: var(--radius-card);
  --inner-radius: var(--radius-control);
  --button-radius: var(--radius-control);
  --radius-xl: var(--radius-card);
  --radius-lg: var(--radius-card);
  --radius-md: var(--radius-card);
  --radius-sm: var(--radius-small);
  --ls-radius-xs: var(--radius-small);
  --ls-radius-sm: var(--radius-small);
  --ls-radius-md: var(--radius-card);
  --ls-radius-lg: var(--radius-card);
  --ls-radius-xl: var(--radius-card);
  --ls-radius-card: var(--radius-card);
  --ls-radius-panel: var(--radius-card);
  --ls-radius-button: var(--radius-control);
  --ls-card-radius-clean: var(--radius-card);
  --ls-inner-radius-clean: var(--radius-control);
  --spin-radius-xl: var(--radius-card);
  --spin-radius-lg: var(--radius-card);
  --spin-radius-md: var(--radius-control);
  --spin-radius-sm: var(--radius-control);

  --ls-bg: var(--bg-page);
  --ls-bg-soft: #0c1320;
  --ls-sidebar: #070d15;
  --ls-surface: var(--bg-section);
  --ls-surface-2: var(--bg-card);
  --ls-surface-3: var(--bg-card-alt);
  --ls-border: var(--border-default);
  --ls-border-strong: var(--border-strong);
  --ls-text: var(--text-primary);
  --ls-text-soft: #d5d0dd;
  --ls-muted: var(--text-secondary);
  --ls-muted-2: var(--text-muted);
  --ls-accent: var(--accent-gold);
  --ls-accent-strong: var(--accent-gold-hover);
  --ls-accent-soft: rgba(245, 191, 101, 0.10);
  --ls-violet: #ad90e7;
  --ls-violet-soft: rgba(107, 74, 160, 0.20);
  --ls-success: var(--accent-success);
  --ls-success-soft: rgba(111, 212, 154, 0.12);
  --ls-warning: var(--accent-warning);
  --ls-warning-soft: rgba(245, 191, 101, 0.12);
  --ls-danger: var(--accent-danger);
  --ls-danger-soft: rgba(232, 129, 155, 0.12);
  --ls-focus: var(--focus-ring);

  --bg: var(--bg-page);
  --bg-deep: #050a11;
  --surface: var(--bg-section);
  --surface-strong: var(--bg-card);
  --surface-soft: #0c1320;
  --stroke: var(--border-default);
  --stroke-strong: var(--border-strong);
  --text: var(--text-primary);
  --muted: var(--text-secondary);
  --muted-2: var(--text-muted);
  --shadow-lg: none;
  --shadow-md: none;
  --shadow-sm: none;
}

/* -------------------------------------------------------------------------- */
/* Fond, typographie et sécurité de mise en page                               */
/* -------------------------------------------------------------------------- */

html {
  min-width: 320px;
  max-width: 100%;
  background: var(--bg-page) !important;
  overflow-x: clip;
  scroll-padding-top: 88px;
}

body {
  min-width: 320px;
  max-width: 100%;
  color: var(--text-primary) !important;
  background: var(--bg-page) !important;
  overflow-x: clip !important;
  font-family: "Inter", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1.48;
}

body.ls-app-page {
  background:
    linear-gradient(180deg, rgba(43, 31, 72, 0.20), transparent 240px),
    var(--bg-page) !important;
}

body * {
  min-width: 0;
}

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

p,
small,
span,
strong,
label,
th,
td,
a,
button {
  overflow-wrap: anywhere;
}

::selection {
  color: #11141c;
  background: var(--accent-gold);
}

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--accent-gold) !important;
  outline-offset: 2px !important;
  box-shadow: var(--focus-ring) !important;
}

:where(button, input, select, textarea, a) {
  transition:
    color var(--transition-fast),
    background-color var(--transition-fast),
    border-color var(--transition-fast),
    opacity var(--transition-fast),
    transform var(--transition-fast);
}

/* -------------------------------------------------------------------------- */
/* Verrou global des arrondis                                                 */
/* -------------------------------------------------------------------------- */

html body :where(
  section, article, aside, nav, header, footer, main, div, form, fieldset,
  ul, ol, li, table, thead, tbody, tfoot, tr, th, td, figure, figcaption,
  details, summary, dialog,
  [class*="card"], [class*="panel"], [class*="box"], [class*="shell"],
  [class*="wrapper"], [class*="wrap"], [class*="tile"], [class*="module"],
  [class*="modal"], [class*="dialog"], [class*="drawer"], [class*="dropdown"],
  [class*="popover"], [class*="menu"], [class*="table"]
) {
  border-radius: var(--radius-card) !important;
}

html body :where(
  a, button, input, select, textarea, label,
  [role="button"], [class*="button"], [class*="btn"], [class*="badge"],
  [class*="chip"], [class*="pill"], [class*="tag"], [class*="status"],
  [class*="filter"], [class*="alert"], [class*="notice"]
) {
  border-radius: var(--radius-control) !important;
}

html body :where(
  .admin-kpi-icon,
  .ls-stat-card__icon,
  .team-stat-icon,
  .team-empty-icon,
  .spin-result-icon,
  .spin-prize-icon,
  .quest-mini-icon,
  .quest-card-icon,
  .quest-admin-final-empty-selection-icon,
  .payment-slot-icon,
  .payment-calendar-icon,
  .app-drawer-link-icon,
  [class*="icon-box"],
  [class*="icon-wrap"],
  [class*="icon-container"]
) {
  border-radius: var(--radius-icon) !important;
}

html body :where(
  .avatar,
  [class*="avatar"] img,
  img[class*="avatar"],
  .profile-avatar,
  .admin-avatar,
  .team-table-avatar,
  .team-switch-avatar,
  .testimonial-avatar,
  .review-avatar,
  .app-mobile-avatar,
  .app-user-card img,
  .app-drawer-user img
) {
  border-radius: var(--radius-avatar) !important;
}

html body :where(
  .top-nav,
  main,
  .main,
  .app-sidebar,
  .app-mobile-header,
  .app-tabbar,
  .site-footer,
  .mobile-menu,
  .app-drawer-backdrop
) {
  border-radius: 0 !important;
}

/* -------------------------------------------------------------------------- */
/* Structure commune de l’application                                        */
/* -------------------------------------------------------------------------- */

html body.ls-app-page > main#contenu-principal {
  width: 100% !important;
  max-width: 100% !important;
  overflow: visible !important;
  padding-bottom: 40px !important;
}

html body.ls-app-page main#contenu-principal :where(.container) {
  width: min(calc(100% - 28px), var(--content-max)) !important;
  margin-inline: auto !important;
}

html body.ls-app-page main#contenu-principal :where(
  .admin-section,
  .profile-section,
  .quest-main-section,
  .quest-admin-section,
  .quest-admin-final-section,
  .spin-section,
  .payment-calendar-section,
  .team-main-section,
  .team-feedback-section,
  .team-overview-section
) {
  min-height: 0 !important;
  margin: 0 !important;
  padding-block: var(--spacing-md) !important;
}

html body.ls-app-page main#contenu-principal :where(
  .admin-card,
  .admin-hero-card,
  .admin-kpi-card,
  .admin-metric-card,
  .profile-card,
  .profile-hero-card,
  .profile-metric-card,
  .profile-stat-card,
  .profile-account-card,
  .quest-panel,
  .quest-card,
  .quest-mini-card,
  .quest-stat-card,
  .quest-admin-card,
  .quest-admin-request-card,
  .quest-admin-summary-card,
  .quest-admin-focus-card,
  .quest-admin-final-card,
  .quest-admin-final-stat-box,
  .spin-panel,
  .spin-prize-card,
  .spin-history-card,
  .payment-calendar-card,
  .payment-slot-card,
  .payment-calendar-state-card,
  .team-overview-card,
  .team-card,
  .team-stat-card,
  .team-staff-card,
  .team-history-card,
  .team-assignment-card,
  .ls-stat-card,
  .ls-auth-gate
) {
  height: auto !important;
  min-height: 0 !important;
  border: 1px solid var(--border-default) !important;
  border-radius: var(--radius-card) !important;
  color: var(--text-primary) !important;
  background:
    linear-gradient(145deg, rgba(49, 37, 76, 0.44), rgba(23, 31, 46, 0.96)),
    var(--bg-card) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

html body.ls-app-page main#contenu-principal :where(
  .admin-card,
  .admin-hero-card,
  .profile-card,
  .profile-hero-card,
  .quest-panel,
  .quest-card,
  .quest-admin-card,
  .quest-admin-final-card,
  .spin-panel,
  .payment-calendar-card,
  .team-overview-card,
  .team-card,
  .team-history-card,
  .team-assignment-card,
  .ls-auth-gate
) {
  padding: var(--spacing-lg) !important;
}

html body.ls-app-page main#contenu-principal :where(
  .admin-kpi-card,
  .admin-metric-card,
  .profile-metric-card,
  .profile-stat-card,
  .profile-account-stat,
  .quest-mini-card,
  .quest-stat-card,
  .quest-admin-summary-card,
  .quest-admin-focus-card,
  .quest-admin-final-stat-box,
  .team-stat-card,
  .ls-stat-card
) {
  padding: var(--spacing-md) !important;
}

html body.ls-app-page main#contenu-principal :where(
  .admin-card::before,
  .admin-card::after,
  .admin-kpi-card::before,
  .admin-kpi-card::after,
  .profile-card::before,
  .profile-card::after,
  .quest-card::before,
  .quest-card::after,
  .spin-panel::before,
  .spin-panel::after,
  .payment-calendar-card::before,
  .payment-calendar-card::after,
  .team-stat-card::before,
  .team-stat-card::after,
  .ls-stat-card::before,
  .ls-stat-card::after
) {
  border-radius: var(--radius-card) !important;
  opacity: 0.45;
}

html body.ls-app-page main#contenu-principal :where(
  .admin-section-head,
  .admin-card-head,
  .profile-section-head,
  .quest-section-head,
  .quest-admin-card-head,
  .quest-admin-final-card-head,
  .payment-calendar-card-head,
  .team-panel-head
) {
  min-height: 0 !important;
  margin: 0 0 var(--spacing-md) !important;
  gap: var(--spacing-sm) !important;
  align-items: center !important;
}

html body.ls-app-page main#contenu-principal :where(
  h1, h2, h3, h4
) {
  margin-top: 0 !important;
  color: var(--text-primary) !important;
  text-wrap: balance;
}

html body.ls-app-page main#contenu-principal h1 {
  font-size: clamp(1.55rem, 3.2vw, 2.25rem) !important;
  line-height: 1.08 !important;
  letter-spacing: -0.025em !important;
}

html body.ls-app-page main#contenu-principal h2 {
  font-size: clamp(1.15rem, 2.4vw, 1.55rem) !important;
  line-height: 1.18 !important;
}

html body.ls-app-page main#contenu-principal h3 {
  font-size: clamp(0.98rem, 2vw, 1.18rem) !important;
  line-height: 1.22 !important;
}

html body.ls-app-page main#contenu-principal :where(
  p,
  small,
  .admin-section-note,
  .admin-hero-text,
  .profile-lead,
  .quest-lead,
  .quest-hero-description,
  .team-panel-head p,
  .payment-calendar-card p
) {
  color: var(--text-secondary) !important;
}

html body.ls-app-page main#contenu-principal :where(
  .admin-section-note,
  .admin-hero-text,
  .profile-lead,
  .quest-lead,
  .quest-hero-description,
  .team-panel-head p
) {
  max-width: 72ch !important;
  margin-top: var(--spacing-xs) !important;
  font-size: 0.84rem !important;
  line-height: 1.45 !important;
}

/* -------------------------------------------------------------------------- */
/* Cartes statistiques : référence visuelle de la capture                     */
/* -------------------------------------------------------------------------- */

html body.ls-app-page main#contenu-principal :where(
  .admin-kpi-grid,
  .ls-stat-grid,
  .profile-stats-grid,
  .profile-metrics-grid,
  .admin-metrics-grid,
  .team-stats-grid,
  .quest-hero-mini-grid,
  .quest-stats-grid
) {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: var(--spacing-md) !important;
}

html body.ls-app-page main#contenu-principal :where(.admin-kpi-card, .ls-stat-card, .team-stat-card) {
  position: relative !important;
  display: grid !important;
  grid-template-columns: 40px minmax(0, 1fr) !important;
  align-items: start !important;
  align-content: start !important;
  gap: 10px !important;
  overflow: hidden !important;
}

html body.ls-app-page main#contenu-principal :where(.admin-kpi-icon, .ls-stat-card__icon, .team-stat-icon) {
  display: inline-flex !important;
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  min-height: 40px !important;
  align-items: center !important;
  justify-content: center !important;
  border: 1px solid currentColor !important;
  border-radius: var(--radius-icon) !important;
  background: rgba(255, 255, 255, 0.035) !important;
  box-shadow: none !important;
  font-size: 0.95rem !important;
}

html body.ls-app-page main#contenu-principal :where(.admin-kpi-content, .ls-stat-card__content, .team-stat-copy) {
  display: grid !important;
  align-content: start !important;
  gap: 3px !important;
}

html body.ls-app-page main#contenu-principal :where(.admin-kpi-label, .ls-stat-card__label, .team-stat-card dt) {
  color: #d9d2e4 !important;
  font-size: 0.70rem !important;
  font-weight: 850 !important;
  line-height: 1.18 !important;
  letter-spacing: 0.045em !important;
  text-transform: uppercase !important;
}

html body.ls-app-page main#contenu-principal :where(
  .admin-kpi-content > strong,
  .ls-stat-card__value,
  .team-stat-card dd
) {
  margin: 0 !important;
  color: #fffaf2 !important;
  font-size: clamp(1.32rem, 2.2vw, 1.85rem) !important;
  font-weight: 850 !important;
  line-height: 1.02 !important;
  letter-spacing: -0.03em !important;
}

html body.ls-app-page main#contenu-principal :where(
  .admin-kpi-content > small,
  .ls-stat-card__hint,
  .team-stat-card small
) {
  margin-top: 2px !important;
  color: var(--text-secondary) !important;
  font-size: 0.72rem !important;
  line-height: 1.34 !important;
}

/* -------------------------------------------------------------------------- */
/* Boutons et actions                                                         */
/* -------------------------------------------------------------------------- */

html body :where(
  button,
  a.button,
  a[class*="-button"],
  a[class*="btn"],
  [role="button"],
  input[type="submit"],
  input[type="button"],
  .payment-calendar-static-button
) {
  min-height: var(--control-height) !important;
  max-height: none !important;
  padding: 0 14px !important;
  gap: 8px !important;
  border: 1px solid transparent !important;
  border-radius: var(--radius-control) !important;
  box-shadow: none !important;
  font-size: 0.82rem !important;
  font-weight: 800 !important;
  line-height: 1.1 !important;
  text-align: center !important;
  text-decoration: none !important;
  white-space: nowrap;
  transform: none !important;
}

html body :where(
  .button-primary,
  .button.button-primary,
  .button--primary,
  .btn-primary,
  .spin-launch-button,
  .payment-calendar-gold-button,
  .payment-calendar-quick-action.is-primary,
  .quest-admin-search-button,
  .quest-admin-final-search-button
) {
  color: #171421 !important;
  border-color: var(--accent-gold) !important;
  background: var(--accent-gold) !important;
}

html body :where(
  .button-primary,
  .button.button-primary,
  .button--primary,
  .btn-primary,
  .spin-launch-button,
  .payment-calendar-gold-button,
  .payment-calendar-quick-action.is-primary,
  .quest-admin-search-button,
  .quest-admin-final-search-button
):hover:not(:disabled):not(.is-disabled) {
  color: #11131a !important;
  border-color: var(--accent-gold-hover) !important;
  background: var(--accent-gold-hover) !important;
}

html body :where(
  .button-secondary,
  .button.button-secondary,
  .button--secondary,
  .btn-secondary,
  .admin-table-link,
  .admin-table-button,
  .quest-admin-table-link,
  .quest-flat-open,
  .payment-calendar-static-button,
  .profile-quick-link,
  .team-page-link,
  .spin-pagination-link,
  .quest-validation-pager-button
) {
  color: var(--text-primary) !important;
  border-color: var(--border-purple) !important;
  background: var(--accent-purple-deep) !important;
}

html body :where(
  .button-secondary,
  .button.button-secondary,
  .button--secondary,
  .btn-secondary,
  .admin-table-link,
  .admin-table-button,
  .quest-admin-table-link,
  .quest-flat-open,
  .payment-calendar-static-button,
  .profile-quick-link,
  .team-page-link,
  .spin-pagination-link,
  .quest-validation-pager-button
):hover:not(:disabled):not(.is-disabled) {
  border-color: rgba(181, 146, 235, 0.62) !important;
  background: #443267 !important;
}

html body :where(
  .admin-danger-button,
  .admin-warning-button,
  .admin-table-delete-button,
  .quest-admin-button-danger,
  .quest-admin-final-danger-button,
  .payment-calendar-danger-button,
  .button-danger,
  .button-delete,
  [class*="danger-button"],
  [class*="delete-button"],
  [class*="reject-button"]
) {
  color: #fff2f5 !important;
  border-color: rgba(232, 129, 155, 0.44) !important;
  background: #512337 !important;
}

html body :where(
  .admin-danger-button,
  .admin-warning-button,
  .admin-table-delete-button,
  .quest-admin-button-danger,
  .quest-admin-final-danger-button,
  .payment-calendar-danger-button,
  .button-danger,
  .button-delete,
  [class*="danger-button"],
  [class*="delete-button"],
  [class*="reject-button"]
):hover:not(:disabled):not(.is-disabled) {
  border-color: var(--accent-danger) !important;
  background: #642a42 !important;
}

html body :where(
  button,
  a.button,
  a[class*="-button"],
  a[class*="btn"],
  [role="button"],
  input[type="submit"],
  input[type="button"]
):active:not(:disabled):not(.is-disabled) {
  filter: brightness(0.94);
}

html body :where(
  button.is-loading,
  a.button.is-loading,
  a[class*="-button"].is-loading,
  [role="button"].is-loading
) {
  position: relative !important;
  color: transparent !important;
  pointer-events: none !important;
}

html body :where(
  button.is-loading,
  a.button.is-loading,
  a[class*="-button"].is-loading,
  [role="button"].is-loading
)::after {
  content: "" !important;
  position: absolute !important;
  width: 14px !important;
  height: 14px !important;
  border: 2px solid var(--text-primary) !important;
  border-right-color: transparent !important;
  border-radius: 50% !important;
  animation: livesea-control-spin 700ms linear infinite !important;
}

html body :where(
  .button-primary.is-loading,
  .button.button-primary.is-loading,
  .button--primary.is-loading,
  .btn-primary.is-loading,
  .spin-launch-button.is-loading,
  .payment-calendar-gold-button.is-loading
)::after {
  border-color: #171421 !important;
  border-right-color: transparent !important;
}

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

html body :where(
  button:disabled,
  input:disabled,
  select:disabled,
  textarea:disabled,
  .is-disabled,
  [aria-disabled="true"]
) {
  cursor: not-allowed !important;
  opacity: 0.48 !important;
  filter: saturate(0.45);
  pointer-events: none;
}

html body :where(.is-loading, [aria-busy="true"]) {
  cursor: progress !important;
  opacity: 0.72 !important;
}

html body :where(.app-icon-button, .carousel-control, .faq-toggle-all, .admin-stepper-btn) {
  width: var(--tap-size) !important;
  min-width: var(--tap-size) !important;
  height: var(--tap-size) !important;
  min-height: var(--tap-size) !important;
  padding: 0 !important;
}

/* -------------------------------------------------------------------------- */
/* Formulaires                                                                */
/* -------------------------------------------------------------------------- */

html body :where(
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
  select,
  textarea,
  .admin-input,
  .admin-select,
  .admin-search-input,
  .admin-stepper-input,
  .quest-admin-input,
  .quest-admin-select,
  .quest-admin-textarea,
  .quest-admin-final-select,
  .quest-admin-final-textarea,
  .profile-textarea
) {
  width: 100%;
  min-height: var(--control-height) !important;
  padding: 9px 11px !important;
  border: 1px solid var(--border-default) !important;
  border-radius: var(--radius-control) !important;
  color: var(--text-primary) !important;
  background: var(--bg-control) !important;
  box-shadow: none !important;
}

html body textarea {
  min-height: 96px !important;
  max-height: 320px;
  resize: vertical;
}

html body :where(input, textarea):-webkit-autofill,
html body :where(input, textarea):-webkit-autofill:hover,
html body :where(input, textarea):-webkit-autofill:focus {
  -webkit-text-fill-color: var(--text-primary) !important;
  box-shadow: 0 0 0 1000px var(--bg-control) inset !important;
  caret-color: var(--text-primary) !important;
}

html body :where(input, select, textarea)::placeholder {
  color: #7f788e !important;
  opacity: 1;
}

html body :where(input, select, textarea):hover:not(:disabled) {
  border-color: rgba(245, 190, 95, 0.34) !important;
  background: var(--bg-control-hover) !important;
}

html body :where(input, select, textarea):focus {
  border-color: var(--accent-gold) !important;
  background: #251d40 !important;
  outline: 0 !important;
  box-shadow: var(--focus-ring) !important;
}

html body :where(
  input[aria-invalid="true"],
  select[aria-invalid="true"],
  textarea[aria-invalid="true"],
  .has-error input,
  .has-error select,
  .has-error textarea,
  .is-error input,
  .is-error select,
  .is-error textarea
) {
  border-color: var(--accent-danger) !important;
  box-shadow: 0 0 0 2px rgba(232, 129, 155, 0.16) !important;
}

html body :where(
  input[aria-invalid="false"],
  select[aria-invalid="false"],
  textarea[aria-invalid="false"],
  .is-valid input,
  .is-valid select,
  .is-valid textarea
) {
  border-color: rgba(111, 212, 154, 0.56) !important;
}

html body :where(
  .admin-label,
  .profile-form-field > label,
  .quest-admin-label,
  .quest-admin-final-label,
  .payment-calendar-label,
  label:not([class*="rating"])
) {
  color: #d8d2e0 !important;
  font-size: 0.76rem !important;
  font-weight: 750 !important;
  line-height: 1.25 !important;
}

html body :where(
  .admin-form-grid,
  .profile-form-grid,
  .quest-admin-form-grid,
  .quest-admin-final-form-grid,
  .payment-calendar-form,
  form[class*="grid"]
) {
  gap: var(--spacing-md) !important;
}

/* -------------------------------------------------------------------------- */
/* Badges, statuts, alertes et notifications                                  */
/* -------------------------------------------------------------------------- */

html body :where(
  [class*="-badge"],
  .profile-chip,
  .profile-member-since-chip,
  .profile-role-pill,
  .profile-status-pill,
  .quest-cycle-pill,
  .quest-history-type-pill,
  .quest-reward-pill,
  .quest-type-pill,
  .admin-table-status,
  .carousel-live-status,
  .payment-calendar-payment-status,
  .profile-account-status,
  .profile-payment-status,
  .quest-history-status,
  .quest-monthly-window-status,
  .quest-validation-status,
  .spin-history-status,
  .team-history-status,
  .site-footer-status
) {
  min-height: 26px !important;
  padding: 4px 8px !important;
  border: 1px solid transparent !important;
  border-radius: var(--radius-small) !important;
  box-shadow: none !important;
  font-size: 0.70rem !important;
  font-weight: 800 !important;
  line-height: 1.15 !important;
  white-space: nowrap;
}

html body :where(
  .app-toast,
  [class*="alert"],
  [class*="notice"],
  .admin-note-box,
  .profile-note-box,
  .quest-card-note
) {
  padding: 10px 12px !important;
  border: 1px solid var(--border-default) !important;
  border-radius: var(--radius-card) !important;
  box-shadow: none !important;
  line-height: 1.4 !important;
}

html body :where(.is-success, .alert-success, .profile-alert-success) {
  color: #dffff0 !important;
  border-color: rgba(111, 212, 154, 0.38) !important;
  background: rgba(44, 101, 71, 0.34) !important;
}

html body :where(.is-error, .alert-error, .profile-alert-error, .quest-admin-alert-error) {
  color: #fff1f4 !important;
  border-color: rgba(232, 129, 155, 0.44) !important;
  background: rgba(97, 39, 58, 0.42) !important;
}

/* -------------------------------------------------------------------------- */
/* Tableaux et listes                                                         */
/* -------------------------------------------------------------------------- */

html body.ls-app-page main#contenu-principal :where(
  .admin-table-scroll,
  .admin-table-wrap,
  .admin-search-table-scroll,
  .quest-admin-table-wrap,
  .quest-admin-browser-table-wrap,
  .quest-history-table-wrap,
  .profile-table-scroll,
  .profile-data-table-scroll,
  .payment-calendar-table-shell,
  .team-table-wrap
) {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  overflow-x: auto !important;
  overflow-y: visible;
  overscroll-behavior-inline: contain;
  border: 1px solid var(--border-default) !important;
  border-radius: var(--radius-card) !important;
  background: rgba(8, 14, 22, 0.34) !important;
  box-shadow: none !important;
  scrollbar-width: thin;
  scrollbar-color: var(--accent-purple) transparent;
}

html body.ls-app-page main#contenu-principal table {
  width: 100% !important;
  border-collapse: collapse !important;
  border-spacing: 0 !important;
  border-radius: var(--radius-card) !important;
  background: transparent !important;
}

html body.ls-app-page main#contenu-principal :where(th, td) {
  height: auto !important;
  padding: 9px 10px !important;
  border-bottom: 1px solid rgba(151, 101, 214, 0.18) !important;
  vertical-align: middle !important;
  text-align: left;
  font-size: 0.79rem !important;
  line-height: 1.35 !important;
}

html body.ls-app-page main#contenu-principal th {
  color: #cbc3d7 !important;
  background: rgba(40, 31, 69, 0.76) !important;
  font-size: 0.68rem !important;
  font-weight: 850 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
}

html body.ls-app-page main#contenu-principal tbody tr:last-child td {
  border-bottom: 0 !important;
}

html body.ls-app-page main#contenu-principal tbody tr:hover td {
  background: rgba(107, 74, 160, 0.10) !important;
}

html body.ls-app-page main#contenu-principal :where(
  .admin-queue-table-card,
  .admin-table-card,
  .quest-admin-table-card,
  .profile-data-card,
  .team-history-card
) {
  min-height: 0 !important;
  height: auto !important;
}

html body.ls-app-page main#contenu-principal :where(
  .admin-queue-table-card .admin-table-scroll,
  .quest-admin-browser-table-wrap,
  .payment-registration-scroll
) {
  max-height: none !important;
}

/* -------------------------------------------------------------------------- */
/* Navigation application                                                     */
/* -------------------------------------------------------------------------- */

html body.ls-app-page .app-sidebar {
  border-right: 1px solid var(--border-default) !important;
  background: #070d15 !important;
  box-shadow: none !important;
}

html body.ls-app-page :where(.app-nav-link, .app-drawer-link, .app-tabbar-link) {
  border: 1px solid transparent !important;
  border-radius: var(--radius-control) !important;
  box-shadow: none !important;
}

html body.ls-app-page :where(.app-nav-link, .app-drawer-link):hover {
  border-color: rgba(151, 101, 214, 0.26) !important;
  background: rgba(107, 74, 160, 0.13) !important;
}

html body.ls-app-page :where(.app-nav-link, .app-drawer-link, .app-tabbar-link).is-active {
  color: var(--text-primary) !important;
  border-color: var(--border-default) !important;
  background: rgba(245, 191, 101, 0.09) !important;
}

html body.ls-app-page .app-nav-link.is-active::before {
  width: 2px !important;
  border-radius: 0 !important;
  background: var(--accent-gold) !important;
}

html body.ls-app-page .app-tabbar {
  border-top: 1px solid var(--border-default) !important;
  background: rgba(7, 13, 21, 0.98) !important;
  box-shadow: none !important;
  backdrop-filter: blur(12px) !important;
}

html body.ls-app-page .app-tabbar-link {
  position: relative !important;
  min-height: 58px !important;
  padding: 7px 4px 6px !important;
  background: transparent !important;
}

html body.ls-app-page .app-tabbar-link.is-active {
  border-color: rgba(245, 191, 101, 0.12) !important;
  background: rgba(245, 191, 101, 0.10) !important;
}

html body.ls-app-page .app-tabbar-link.is-active::before {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: 50% !important;
  width: 28px !important;
  height: 3px !important;
  border-radius: 0 !important;
  background: var(--accent-gold) !important;
  transform: translateX(-50%) !important;
}

html body.ls-app-page .app-mobile-header {
  border-bottom: 1px solid var(--border-default) !important;
  background: rgba(7, 13, 21, 0.97) !important;
  box-shadow: none !important;
  backdrop-filter: blur(12px) !important;
}

html body.ls-app-page .app-mobile-header .app-icon-button {
  color: var(--accent-gold) !important;
  border-color: var(--border-default) !important;
  background: rgba(245, 191, 101, 0.06) !important;
}

html body > .ls-mobile-drawer-layer > .ls-mobile-drawer {
  border-radius: 0 !important;
  border-left: 1px solid var(--border-default) !important;
  background: #090f18 !important;
  box-shadow: none !important;
}

html body .ls-mobile-drawer .app-drawer-link-copy small {
  display: none !important;
}

html body .ls-mobile-drawer .app-drawer-link {
  min-height: 46px !important;
  padding: 7px 9px !important;
}

/* -------------------------------------------------------------------------- */
/* Modales et composants dynamiques                                           */
/* -------------------------------------------------------------------------- */

html body :where(
  .spin-result-dialog,
  dialog,
  [role="dialog"],
  [class*="modal-content"],
  [class*="dialog-content"]
) {
  border: 1px solid var(--border-default) !important;
  border-radius: var(--radius-card) !important;
  background: var(--bg-card) !important;
  box-shadow: 0 18px 52px rgba(0, 0, 0, 0.34) !important;
}

html body .app-drawer-backdrop {
  min-height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
}

html body :where(
  .spin-result-modal,
  [class*="modal-backdrop"],
  .app-drawer-backdrop
) {
  background: rgba(2, 5, 10, 0.78) !important;
  backdrop-filter: blur(4px) !important;
}

/* -------------------------------------------------------------------------- */
/* Page publique : même langage visuel, sans dégrader le contenu marketing    */
/* -------------------------------------------------------------------------- */

html body:not(.ls-app-page) {
  color: var(--text-primary) !important;
  background:
    linear-gradient(180deg, rgba(45, 32, 76, 0.26), transparent 520px),
    var(--bg-page) !important;
}

html body:not(.ls-app-page) .hero {
  min-height: 0 !important;
  height: auto !important;
  padding: clamp(104px, 12vw, 150px) 0 clamp(46px, 7vw, 76px) !important;
}

html body:not(.ls-app-page) .marketing-header {
  width: min(calc(100% - 24px), 1220px) !important;
  min-height: 64px !important;
  padding: 8px 10px !important;
  border: 1px solid var(--border-default) !important;
  border-radius: var(--radius-card) !important;
  background: rgba(7, 13, 21, 0.95) !important;
  box-shadow: none !important;
}

html body:not(.ls-app-page) :where(
  .hero-card,
  .metric,
  .feature,
  .feature-visual,
  .public-team-card,
  .review-card,
  .team-review-card,
  .integration-item,
  .faq-item,
  .home-cta,
  .contact-card,
  .empty-card
) {
  min-height: 0 !important;
  height: auto !important;
  border: 1px solid var(--border-default) !important;
  border-radius: var(--radius-card) !important;
  background:
    linear-gradient(145deg, rgba(49, 37, 76, 0.42), rgba(23, 31, 46, 0.96)),
    var(--bg-card) !important;
  box-shadow: none !important;
}

html body:not(.ls-app-page) :where(
  .feature,
  .public-team-card,
  .review-card,
  .team-review-card,
  .integration-item,
  .faq-item
) {
  padding: var(--spacing-lg) !important;
}

html body:not(.ls-app-page) :where(
  .section,
  .advantages,
  .performances,
  .partners,
  .organization,
  .reviews,
  .contact-cta
) {
  min-height: 0 !important;
  padding-block: clamp(38px, 6vw, 68px) !important;
}

html body:not(.ls-app-page) :where(
  .button,
  .button-primary,
  .button-secondary,
  .button--primary,
  .button--secondary,
  .btn-primary,
  .btn-secondary
) {
  min-height: var(--tap-size) !important;
  padding-inline: 16px !important;
}

html body:not(.ls-app-page) .faq-question {
  min-height: var(--tap-size) !important;
  padding: 10px 0 !important;
}

html body:not(.ls-app-page) .site-footer {
  border-top: 1px solid var(--border-default) !important;
  background: #070d15 !important;
}

/* -------------------------------------------------------------------------- */
/* Mobile                                                                     */
/* -------------------------------------------------------------------------- */

@media (max-width: 1099px) {
  html body.ls-app-page > main#contenu-principal {
    padding-top: calc(76px + env(safe-area-inset-top)) !important;
    padding-bottom: calc(92px + env(safe-area-inset-bottom)) !important;
  }

  html body.ls-app-page main#contenu-principal :where(.container) {
    width: min(calc(100% - 24px), 900px) !important;
  }
}

@media (max-width: 900px) {
  html body.ls-app-page main#contenu-principal :where(
    .admin-kpi-grid,
    .ls-stat-grid,
    .profile-stats-grid,
    .profile-metrics-grid,
    .admin-metrics-grid,
    .team-stats-grid,
    .quest-hero-mini-grid,
    .quest-stats-grid
  ) {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }

  html body.ls-app-page main#contenu-principal :where(
    .admin-workspace,
    .admin-detail-grid,
    .admin-staff-layout,
    .profile-hero-grid,
    .profile-balance-grid,
    .quest-hero-grid,
    .quest-main-grid,
    .quest-admin-hero-grid,
    .quest-admin-workspace,
    .quest-admin-final-grid,
    .payment-calendar-grid,
    .payment-calendar-hero-main,
    .team-overview-card,
    .team-workspace,
    .team-assignment-grid
  ) {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 720px) {
  :root {
    --control-height: 44px;
    --ls-table-action-height: 44px;
  }

  html body.ls-app-page > main#contenu-principal {
    padding-right: 0 !important;
    padding-left: 0 !important;
  }

  html body.ls-app-page main#contenu-principal :where(.container) {
    width: calc(100% - 20px) !important;
  }

  html body.ls-app-page main#contenu-principal :where(
    .admin-card,
    .admin-hero-card,
    .profile-card,
    .profile-hero-card,
    .quest-panel,
    .quest-card,
    .quest-admin-card,
    .quest-admin-final-card,
    .spin-panel,
    .payment-calendar-card,
    .team-overview-card,
    .team-card,
    .team-history-card,
    .team-assignment-card,
    .ls-auth-gate
  ) {
    padding: 12px !important;
  }

  html body.ls-app-page main#contenu-principal :where(
    .admin-section,
    .profile-section,
    .quest-main-section,
    .quest-admin-section,
    .quest-admin-final-section,
    .spin-section,
    .payment-calendar-section,
    .team-main-section,
    .team-feedback-section,
    .team-overview-section
  ) {
    padding-block: 8px !important;
  }

  html body :where(
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
    select,
    textarea
  ) {
    font-size: 16px !important;
  }

  html body :where(
    button,
    a.button,
    a[class*="-button"],
    a[class*="btn"],
    [role="button"],
    input[type="submit"],
    input[type="button"],
    .payment-calendar-static-button
  ) {
    min-height: var(--tap-size) !important;
  }

  html body.ls-app-page main#contenu-principal :where(
    .admin-form-grid,
    .profile-form-grid,
    .quest-admin-form-grid,
    .quest-admin-final-form-grid,
    .payment-calendar-form,
    form[class*="grid"]
  ) {
    grid-template-columns: 1fr !important;
  }

  html body.ls-app-page main#contenu-principal :where(.admin-section-head, .profile-section-head, .quest-section-head, .team-panel-head) {
    align-items: flex-start !important;
  }

  html body.ls-app-page main#contenu-principal :where(.admin-actions-inline, .profile-actions-inline, .quest-inline-actions) {
    gap: 8px !important;
  }

  html body.ls-app-page main#contenu-principal :where(.admin-actions-inline, .profile-actions-inline, .quest-inline-actions) > * {
    width: auto !important;
    max-width: 100% !important;
  }

  /* Le tableau de créneaux devient une petite carte par ligne. */
  html body.ls-app-page .admin-payment-calendar-table {
    min-width: 0 !important;
  }

  html body.ls-app-page .admin-payment-calendar-table thead {
    display: none !important;
  }

  html body.ls-app-page .admin-payment-calendar-table,
  html body.ls-app-page .admin-payment-calendar-table tbody {
    display: block !important;
    width: 100% !important;
  }

  html body.ls-app-page .admin-payment-calendar-table :where(tr, td) {
    width: 100% !important;
  }

  html body.ls-app-page .admin-payment-calendar-table tr {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 0 !important;
    margin: 8px !important;
    width: calc(100% - 16px) !important;
    border: 1px solid var(--border-purple) !important;
    border-radius: var(--radius-card) !important;
    background: var(--bg-card) !important;
  }

  html body.ls-app-page .admin-payment-calendar-table td {
    padding: 9px !important;
    border: 0 !important;
    border-right: 1px solid rgba(151, 101, 214, 0.16) !important;
    text-align: center !important;
  }

  html body.ls-app-page .admin-payment-calendar-table td:nth-child(1) { grid-column: 1 !important; }
  html body.ls-app-page .admin-payment-calendar-table td:nth-child(2) { grid-column: 2 !important; }
  html body.ls-app-page .admin-payment-calendar-table td:nth-child(3) { grid-column: 3 !important; border-right: 0 !important; }

  html body.ls-app-page .admin-payment-calendar-table tr:has(td:nth-child(4)) td:nth-child(4) {
    grid-column: 1 / -1 !important;
    border-top: 1px solid rgba(151, 101, 214, 0.16) !important;
    border-right: 0 !important;
  }

  html body.ls-app-page .admin-payment-calendar-table td:nth-child(1)::before,
  html body.ls-app-page .admin-payment-calendar-table td:nth-child(2)::before,
  html body.ls-app-page .admin-payment-calendar-table td:nth-child(3)::before {
    display: block;
    margin-bottom: 2px;
    color: var(--text-muted);
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }

  html body.ls-app-page .admin-payment-calendar-table td:nth-child(1)::before { content: "Date"; }
  html body.ls-app-page .admin-payment-calendar-table td:nth-child(2)::before { content: "Heure"; }
  html body.ls-app-page .admin-payment-calendar-table td:nth-child(3)::before { content: "Inscrits"; }

  html body:not(.ls-app-page) .hero {
  min-height: 0 !important;
  height: auto !important;
  padding: clamp(104px, 12vw, 150px) 0 clamp(46px, 7vw, 76px) !important;
}

html body:not(.ls-app-page) .marketing-header {
    top: max(8px, env(safe-area-inset-top)) !important;
    width: calc(100% - 16px) !important;
    min-height: 58px !important;
  }

  html body:not(.ls-app-page) :where(.section, .advantages, .performances, .partners, .organization, .reviews, .contact-cta) {
    padding-block: 34px !important;
  }
}

@media (max-width: 520px) {
  html body.ls-app-page main#contenu-principal :where(.admin-kpi-card, .ls-stat-card, .team-stat-card) {
    grid-template-columns: 34px minmax(0, 1fr) !important;
    gap: 8px !important;
    padding: 10px !important;
  }

  html body.ls-app-page main#contenu-principal :where(.admin-kpi-icon, .ls-stat-card__icon, .team-stat-icon) {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    min-height: 34px !important;
    font-size: 0.82rem !important;
  }

  html body.ls-app-page main#contenu-principal :where(.admin-kpi-label, .ls-stat-card__label, .team-stat-card dt) {
    font-size: 0.62rem !important;
    letter-spacing: 0.025em !important;
  }

  html body.ls-app-page main#contenu-principal :where(
    .admin-kpi-content > strong,
    .ls-stat-card__value,
    .team-stat-card dd
  ) {
    font-size: clamp(1.08rem, 5vw, 1.4rem) !important;
  }

  html body.ls-app-page main#contenu-principal :where(
    .admin-kpi-content > small,
    .ls-stat-card__hint,
    .team-stat-card small
  ) {
    font-size: 0.64rem !important;
    line-height: 1.28 !important;
  }

  html body.ls-app-page .app-mobile-title span {
    display: none !important;
  }

  html body.ls-app-page .app-tabbar-link {
    min-height: 56px !important;
    font-size: 0.66rem !important;
  }

  html body.ls-app-page .app-tabbar-link .app-icon {
    width: 21px !important;
    height: 21px !important;
  }

  html body:not(.ls-app-page) :where(.feature, .public-team-card, .review-card, .team-review-card, .integration-item, .faq-item) {
    padding: 12px !important;
  }
}

@media (max-width: 360px) {
  html body.ls-app-page main#contenu-principal :where(
    .admin-kpi-grid,
    .ls-stat-grid,
    .team-stats-grid
  ) {
    gap: 7px !important;
  }

  html body.ls-app-page main#contenu-principal :where(.admin-kpi-card, .ls-stat-card, .team-stat-card) {
    grid-template-columns: 30px minmax(0, 1fr) !important;
    gap: 6px !important;
    padding: 8px !important;
  }

  html body.ls-app-page main#contenu-principal :where(.admin-kpi-icon, .ls-stat-card__icon, .team-stat-icon) {
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    min-height: 30px !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;
  }
}

@media (prefers-contrast: more) {
  :root {
    --border-default: rgba(245, 190, 95, 0.46);
    --border-purple: rgba(181, 146, 235, 0.56);
    --text-secondary: #c9c3d2;
  }
}