/*
 * LiveSea Agency — V41 Structure & Readability polish
 * Corrections ciblées après validation mobile :
 * - suppression des doubles conteneurs décoratifs ;
 * - marges latérales constantes ;
 * - avis créateurs lisibles ;
 * - FAQ compacte ;
 * - CTA jaune restauré ;
 * - cartes d'application détachées des bords.
 */

:root {
  --page-gutter: 20px;
  --page-gutter-mobile: 16px;
  --page-inset: 40px;
  --page-inset-mobile: 32px;
  --section-gap: 16px;
  --card-padding: 16px;
  --card-padding-mobile: 14px;
}

/* -------------------------------------------------------------------------- */
/* Marges et structure globales                                               */
/* -------------------------------------------------------------------------- */

html body.ls-app-page main#contenu-principal :where(.container) {
  width: min(calc(100% - var(--page-inset)), 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
) {
  padding-block: 10px !important;
}

html body.ls-app-page main#contenu-principal :where(
  .admin-workspace,
  .admin-detail-grid,
  .admin-staff-layout,
  .profile-hero-grid,
  .profile-main-grid,
  .profile-balance-grid,
  .quest-hero-grid,
  .quest-main-grid,
  .quest-admin-hero-grid,
  .quest-admin-workspace,
  .quest-admin-final-grid,
  .spin-layout,
  .payment-calendar-grid,
  .team-workspace,
  .team-assignment-grid
) {
  gap: var(--section-gap) !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
) {
  width: 100% !important;
  margin: 0 !important;
  padding: var(--card-padding) !important;
}

/* -------------------------------------------------------------------------- */
/* Écran de connexion : un seul bloc utile, aucun cadre clair périphérique    */
/* -------------------------------------------------------------------------- */

html body.ls-app-page > main#contenu-principal:has(> .ls-auth-gate) {
  display: grid !important;
  grid-template-rows: auto auto !important;
  min-height: 100dvh !important;
  padding-bottom: 20px !important;
  align-content: start !important;
  gap: 14px !important;
}

html body.ls-app-page main#contenu-principal > .ls-auth-gate,
html body.ls-app-page main#contenu-principal .ls-auth-gate {
  width: 100% !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 18px 0 4px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

html body.ls-app-page .ls-auth-gate > .container {
  width: min(calc(100% - var(--page-inset)), 840px) !important;
  max-width: 840px !important;
  margin-inline: auto !important;
}

html body.ls-app-page .ls-auth-gate-card {
  width: 100% !important;
  margin: 0 !important;
  border: 1px solid var(--border-strong) !important;
  background: #0d151f !important;
}

html body.ls-app-page .ls-auth-gate-eyebrow {
  display: none !important;
}

html body.ls-app-page .ls-auth-gate-visual {
  background: #101a27 !important;
}

html body.ls-app-page .ls-auth-gate-shield {
  color: var(--accent-gold) !important;
  border-color: rgba(245, 191, 101, 0.24) !important;
  background: rgba(245, 191, 101, 0.07) !important;
}

html body.ls-app-page .ls-auth-gate-content {
  padding: clamp(24px, 4vw, 42px) !important;
}

html body.ls-app-page main#contenu-principal .ls-auth-gate-content h1 {
  margin: 0 0 14px !important;
}

html body.ls-app-page .ls-auth-gate .ls-connection-required-button {
  border-color: var(--accent-gold) !important;
  color: #171421 !important;
  background: var(--accent-gold) !important;
}

html body.ls-app-page .ls-auth-gate-assurances li {
  min-height: 38px !important;
  padding: 8px 10px !important;
  border: 1px solid rgba(170, 164, 184, 0.15) !important;
  border-radius: var(--radius-control) !important;
  background: rgba(255, 255, 255, 0.025) !important;
}

html body.ls-app-page .app-mobile-login {
  width: auto !important;
  max-width: 92px !important;
  padding: 6px 2px !important;
  white-space: nowrap !important;
  overflow-wrap: normal !important;
  color: var(--accent-gold) !important;
  font-size: 0.78rem !important;
}

/* -------------------------------------------------------------------------- */
/* Page publique : marges latérales homogènes                                 */
/* -------------------------------------------------------------------------- */

html body:not(.ls-app-page) :where(
  .marketing-header,
  .logo-ticker,
  .silk-divider,
  .section,
  .home-cta,
  .site-footer
) {
  width: min(calc(100% - var(--page-inset)), 1240px) !important;
  margin-inline: auto !important;
}

html body:not(.ls-app-page) .hero {
  width: min(calc(100% - var(--page-inset)), 1380px) !important;
}

html body:not(.ls-app-page) .section {
  padding-block: clamp(48px, 7vw, 88px) !important;
}

/* -------------------------------------------------------------------------- */
/* Avis créateurs                                                             */
/* -------------------------------------------------------------------------- */

html body:not(.ls-app-page) #testimonials {
  overflow: visible !important;
}

html body:not(.ls-app-page) #testimonials > .section-title {
  max-width: 760px !important;
}

html body:not(.ls-app-page) .reviews-carousel,
html body:not(.ls-app-page) #testimonials > .empty-card {
  margin-top: 28px !important;
}

html body:not(.ls-app-page) .reviews-carousel .review-card {
  min-height: 0 !important;
  padding: 18px !important;
  background:
    linear-gradient(145deg, rgba(53, 39, 82, 0.38), rgba(16, 24, 39, 0.98)),
    var(--bg-card) !important;
}

html body:not(.ls-app-page) .review-author-block {
  display: grid !important;
  grid-template-columns: 54px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 12px !important;
}

html body:not(.ls-app-page) .review-avatar,
html body:not(.ls-app-page) .testimonial-avatar {
  width: 54px !important;
  height: 54px !important;
  min-width: 54px !important;
  min-height: 54px !important;
}

html body:not(.ls-app-page) .review-pseudo {
  margin: 0 !important;
  font-size: 1rem !important;
  line-height: 1.2 !important;
}

html body:not(.ls-app-page) .review-role,
html body:not(.ls-app-page) .testimonial-role,
html body:not(.ls-app-page) .review-subtitle {
  margin: 3px 0 0 !important;
  color: var(--text-secondary) !important;
  font-size: 0.76rem !important;
}

html body:not(.ls-app-page) .review-stars {
  margin: 13px 0 8px !important;
  font-size: 0.9rem !important;
  letter-spacing: 0.08em !important;
}

html body:not(.ls-app-page) .review-title {
  margin: 0 0 8px !important;
  font-size: 0.78rem !important;
  color: var(--accent-gold) !important;
}

html body:not(.ls-app-page) .review-quote {
  margin: 0 !important;
  color: #d8d3df !important;
  font-size: 0.84rem !important;
  line-height: 1.58 !important;
}

html body:not(.ls-app-page) #testimonials > .empty-card {
  padding: 18px !important;
}

html body:not(.ls-app-page) #testimonials > .empty-card .testimonial-quote {
  margin: 0 !important;
  color: var(--text-secondary) !important;
  font-size: 0.86rem !important;
  font-style: normal !important;
  line-height: 1.55 !important;
  text-align: left !important;
}

/* -------------------------------------------------------------------------- */
/* FAQ : cartes propres, réponses lisibles, aucun grand bloc vide             */
/* -------------------------------------------------------------------------- */

html body:not(.ls-app-page) .faq-list {
  width: min(100%, 920px) !important;
  margin-top: 28px !important;
  gap: 12px !important;
}

html body:not(.ls-app-page) .faq-controls {
  min-height: 40px !important;
  margin-bottom: 0 !important;
}

html body:not(.ls-app-page) .faq-toggle-all {
  min-width: 116px !important;
  min-height: 40px !important;
}

html body:not(.ls-app-page) .faq-item {
  padding: 0 !important;
  background: #101827 !important;
}

html body:not(.ls-app-page) .faq-question {
  min-height: 62px !important;
  padding: 11px 12px 11px 16px !important;
  grid-template-columns: minmax(0, 1fr) 42px !important;
  gap: 12px !important;
  font-size: 0.88rem !important;
  line-height: 1.35 !important;
}

html body:not(.ls-app-page) .faq-icon {
  width: 42px !important;
  height: 42px !important;
}

html body:not(.ls-app-page) .faq-answer-inner {
  padding: 0 16px !important;
  color: #c8c2d1 !important;
  font-size: 0.82rem !important;
  line-height: 1.58 !important;
}

html body:not(.ls-app-page) .faq-item.open .faq-answer-inner {
  padding-bottom: 16px !important;
}

/* -------------------------------------------------------------------------- */
/* CTA : fond jaune restauré, texte sombre et contraste fort                  */
/* -------------------------------------------------------------------------- */

html body:not(.ls-app-page) .home-cta {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  margin-top: 20px !important;
  padding: clamp(32px, 5vw, 58px) !important;
  gap: 28px !important;
  border: 1px solid rgba(255, 220, 150, 0.55) !important;
  color: #21192f !important;
  background: var(--accent-gold) !important;
  box-shadow: none !important;
}

html body:not(.ls-app-page) .home-cta :where(.home-kicker, h2, h2 strong, p) {
  color: #21192f !important;
  opacity: 1 !important;
}

html body:not(.ls-app-page) .home-cta .home-kicker {
  font-weight: 850 !important;
}

html body:not(.ls-app-page) .home-cta h2 {
  margin-top: 12px !important;
  font-size: clamp(2rem, 4.2vw, 4rem) !important;
  line-height: 1.02 !important;
}

html body:not(.ls-app-page) .home-cta p {
  margin-top: 14px !important;
  max-width: 650px !important;
  font-size: 0.92rem !important;
  line-height: 1.55 !important;
}

html body:not(.ls-app-page) .home-cta .button--primary {
  color: var(--accent-gold) !important;
  border-color: #21192f !important;
  background: #21192f !important;
}

html body:not(.ls-app-page) .home-cta .button--secondary {
  color: #21192f !important;
  border-color: rgba(33, 25, 47, 0.38) !important;
  background: rgba(255, 255, 255, 0.14) !important;
}

html body:not(.ls-app-page) .home-cta-mark {
  opacity: 0.18 !important;
}

/* -------------------------------------------------------------------------- */
/* Profil : blocs séparés du bord et hauteur adaptée au contenu               */
/* -------------------------------------------------------------------------- */

html body.ls-app-page .profile-hero-grid {
  align-items: start !important;
}

html body.ls-app-page .profile-hero-card,
html body.ls-app-page .profile-balance-highlight-card {
  min-height: 0 !important;
  height: auto !important;
}

html body.ls-app-page .profile-hero-card .profile-hero-top {
  align-items: flex-start !important;
}

html body.ls-app-page .profile-hero-actions {
  width: min(100%, 280px) !important;
  gap: 10px !important;
}

html body.ls-app-page .profile-balance-highlight-card h2 {
  margin-bottom: 10px !important;
}

html body.ls-app-page .profile-balance-highlight-text {
  margin: 10px 0 0 !important;
  line-height: 1.5 !important;
}

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

@media (max-width: 720px) {
  html body.ls-app-page main#contenu-principal :where(.container) {
    width: calc(100% - var(--page-inset-mobile)) !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
  ) {
    padding: var(--card-padding-mobile) !important;
  }

  html body.ls-app-page main#contenu-principal > .ls-auth-gate,
  html body.ls-app-page main#contenu-principal .ls-auth-gate {
    padding: 14px 0 2px !important;
  }

  html body.ls-app-page .ls-auth-gate > .container {
    width: calc(100% - var(--page-inset-mobile)) !important;
  }

  html body.ls-app-page .ls-auth-gate-card {
    grid-template-columns: 1fr !important;
  }

  html body.ls-app-page .ls-auth-gate-visual {
    min-height: 0 !important;
    padding: 14px !important;
  }

  html body.ls-app-page .ls-auth-gate-content {
    padding: 20px 16px 17px !important;
  }

  html body.ls-app-page main#contenu-principal .ls-auth-gate-content h1 {
    font-size: clamp(1.72rem, 8vw, 2.08rem) !important;
  }

  html body.ls-app-page .ls-auth-gate-assurances {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  html body.ls-app-page .ls-auth-gate-assurances li {
    justify-content: center !important;
    font-size: 0.68rem !important;
    text-align: center !important;
  }

  html body:not(.ls-app-page) :where(
    .marketing-header,
    .logo-ticker,
    .silk-divider,
    .section,
    .home-cta,
    .site-footer
  ) {
    width: calc(100% - var(--page-inset-mobile)) !important;
  }

  html body:not(.ls-app-page) .hero {
    width: calc(100% - var(--page-inset-mobile)) !important;
    padding-right: 0 !important;
    padding-left: 0 !important;
  }

  html body:not(.ls-app-page) .section {
    padding-block: 42px !important;
  }

  html body:not(.ls-app-page) .reviews-carousel .carousel-track {
    gap: 12px !important;
  }

  html body:not(.ls-app-page) .reviews-carousel .review-card {
    flex: 0 0 100% !important;
    width: 100% !important;
    padding: 16px !important;
  }

  html body:not(.ls-app-page) .reviews-carousel .carousel-footer {
    grid-template-columns: 44px minmax(90px, 1fr) 44px !important;
    width: 100% !important;
  }

  html body:not(.ls-app-page) .faq-list {
    width: 100% !important;
    margin-top: 24px !important;
  }

  html body:not(.ls-app-page) .faq-controls {
    justify-content: flex-end !important;
  }

  html body:not(.ls-app-page) .faq-question {
    min-height: 62px !important;
    padding: 10px 10px 10px 14px !important;
    font-size: 0.84rem !important;
  }

  html body:not(.ls-app-page) .home-cta {
    grid-template-columns: 1fr !important;
    padding: 26px 18px !important;
    gap: 16px !important;
  }

  html body:not(.ls-app-page) .home-cta h2 {
    font-size: clamp(1.9rem, 9vw, 2.65rem) !important;
  }

  html body:not(.ls-app-page) .home-cta h2 br {
    display: none !important;
  }

  html body:not(.ls-app-page) .home-cta-actions {
    display: grid !important;
    grid-template-columns: 1fr !important;
    margin-top: 20px !important;
  }

  html body:not(.ls-app-page) .home-cta-actions > * {
    width: 100% !important;
  }

  html body:not(.ls-app-page) .home-cta-mark {
    display: none !important;
  }

  html body.ls-app-page .profile-hero-card .profile-hero-top,
  html body.ls-app-page .profile-identity {
    align-items: flex-start !important;
  }

  html body.ls-app-page .profile-hero-actions {
    width: 100% !important;
  }

  html body.ls-app-page .profile-chip-row-member-since {
    margin-top: 10px !important;
  }

  html body.ls-app-page .profile-member-since-chip {
    width: auto !important;
    min-height: 36px !important;
  }
}

@media (max-width: 420px) {
  html body:not(.ls-app-page) .review-author-block {
    grid-template-columns: 48px minmax(0, 1fr) !important;
  }

  html body:not(.ls-app-page) .review-avatar,
  html body:not(.ls-app-page) .testimonial-avatar {
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    min-height: 48px !important;
  }

  html body.ls-app-page .ls-auth-gate-assurances {
    grid-template-columns: 1fr !important;
  }
}

html body:not(.ls-app-page) .review-author-copy {
  min-width: 0 !important;
}

/* Derniers correctifs de rendu validés sur viewport mobile. */
html body.ls-app-page:has(main#contenu-principal > .ls-auth-gate),
html body.ls-app-page:has(main#contenu-principal > .ls-auth-gate) > main#contenu-principal {
  background: var(--bg-page) !important;
}

html body:not(.ls-app-page) .faq-question {
  white-space: normal !important;
  overflow-wrap: break-word !important;
  word-break: normal !important;
}

/* ========================================================================== */
/* V42 — Avis créateurs + FAQ : rendu propre, complet, structuré             */
/* ========================================================================== */

html body:not(.ls-app-page) #testimonials .reviews-carousel {
  width: min(100%, 980px) !important;
}

html body:not(.ls-app-page) #testimonials .reviews-carousel .carousel-viewport {
  overflow-y: visible !important;
}

html body:not(.ls-app-page) #testimonials .reviews-carousel .carousel-track {
  align-items: stretch !important;
}

html body:not(.ls-app-page) #testimonials .reviews-carousel .review-card {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  text-align: left !important;
  min-height: 0 !important;
  height: auto !important;
  overflow: visible !important;
  padding: 22px !important;
  border: 1px solid rgba(244, 194, 112, 0.18) !important;
  border-radius: 4px !important;
  background:
    linear-gradient(145deg, rgba(53, 39, 82, 0.34), rgba(16, 24, 39, 0.98)),
    #101827 !important;
  box-shadow: none !important;
}

html body:not(.ls-app-page) #testimonials .review-author-block {
  width: 100% !important;
  display: grid !important;
  grid-template-columns: 60px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 14px !important;
  margin: 0 0 14px !important;
}

html body:not(.ls-app-page) #testimonials .review-author-copy {
  min-width: 0 !important;
  display: grid !important;
  gap: 4px !important;
}

html body:not(.ls-app-page) #testimonials .review-avatar,
html body:not(.ls-app-page) #testimonials .testimonial-avatar {
  position: relative !important;
  display: grid !important;
  place-items: center !important;
  width: 60px !important;
  height: 60px !important;
  min-width: 60px !important;
  min-height: 60px !important;
  border: 1px solid rgba(244, 194, 112, 0.38) !important;
  border-radius: 50% !important;
  overflow: hidden !important;
  background: linear-gradient(145deg, rgba(67, 49, 102, 0.95), rgba(18, 26, 43, 0.96)) !important;
}

html body:not(.ls-app-page) #testimonials .review-avatar img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

html body:not(.ls-app-page) #testimonials .review-avatar-fallback {
  display: none !important;
  width: 100% !important;
  height: 100% !important;
  place-items: center !important;
  color: var(--text-primary) !important;
  font-size: 1.05rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.03em !important;
}

html body:not(.ls-app-page) #testimonials .review-avatar.no-image .review-avatar-fallback,
html body:not(.ls-app-page) #testimonials .review-avatar:not(.has-image) .review-avatar-fallback {
  display: grid !important;
}

html body:not(.ls-app-page) #testimonials .review-pseudo {
  width: auto !important;
  margin: 0 !important;
  color: var(--text-primary) !important;
  font-size: 1.14rem !important;
  font-weight: 800 !important;
  line-height: 1.18 !important;
  text-align: left !important;
  overflow: visible !important;
}

html body:not(.ls-app-page) #testimonials .review-subtitle {
  margin: 0 !important;
  color: var(--text-secondary) !important;
  font-size: 0.84rem !important;
  line-height: 1.35 !important;
  text-align: left !important;
}

html body:not(.ls-app-page) #testimonials .review-stars {
  width: auto !important;
  display: flex !important;
  justify-content: flex-start !important;
  align-items: center !important;
  gap: 0 !important;
  margin: 0 0 12px !important;
  color: var(--accent-gold) !important;
  font-size: 0.98rem !important;
  letter-spacing: 0.1em !important;
}

html body:not(.ls-app-page) #testimonials .review-stars-empty {
  color: rgba(244, 194, 112, 0.32) !important;
}

html body:not(.ls-app-page) #testimonials .review-title {
  width: auto !important;
  margin: 0 0 12px !important;
  color: var(--accent-gold) !important;
  font-size: 0.85rem !important;
  font-weight: 800 !important;
  line-height: 1.35 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  text-align: left !important;
}

html body:not(.ls-app-page) #testimonials .review-quote {
  width: auto !important;
  margin: 0 !important;
  padding-top: 14px !important;
  border-top: 1px solid rgba(244, 194, 112, 0.1) !important;
  color: #e2ddea !important;
  font-size: 0.94rem !important;
  font-weight: 400 !important;
  line-height: 1.72 !important;
  text-align: left !important;
  font-style: normal !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  display: block !important;
}

html body:not(.ls-app-page) #testimonials .review-quote br {
  display: block !important;
  content: '' !important;
  margin-top: 4px !important;
}

html body:not(.ls-app-page) #testimonials .carousel-footer {
  margin-top: 16px !important;
}

html body:not(.ls-app-page) #faq .faq-list {
  gap: 12px !important;
}

html body:not(.ls-app-page) #faq .faq-item {
  overflow: hidden !important;
  border: 1px solid rgba(244, 194, 112, 0.14) !important;
  border-radius: 4px !important;
}

html body:not(.ls-app-page) #faq .faq-question {
  text-align: left !important;
  align-items: center !important;
  font-size: 0.94rem !important;
  font-weight: 700 !important;
}

html body:not(.ls-app-page) #faq .faq-answer {
  background: linear-gradient(180deg, rgba(11, 18, 31, 0.04), rgba(11, 18, 31, 0.16)) !important;
}

html body:not(.ls-app-page) #faq .faq-answer-inner {
  padding: 0 16px 16px !important;
  font-size: 0.9rem !important;
  line-height: 1.68 !important;
}

@media (max-width: 900px) {
  html body:not(.ls-app-page) #testimonials .reviews-carousel .review-card {
    flex: 0 0 calc((min(980px, calc(100vw - 48px)) - 14px) / 2) !important;
    width: calc((min(980px, calc(100vw - 48px)) - 14px) / 2) !important;
  }
}

@media (max-width: 720px) {
  html body:not(.ls-app-page) #testimonials .reviews-carousel .review-card {
    flex: 0 0 100% !important;
    width: 100% !important;
    padding: 18px !important;
  }

  html body:not(.ls-app-page) #testimonials .review-author-block {
    grid-template-columns: 56px minmax(0, 1fr) !important;
    gap: 12px !important;
  }

  html body:not(.ls-app-page) #testimonials .review-avatar,
  html body:not(.ls-app-page) #testimonials .testimonial-avatar {
    width: 56px !important;
    height: 56px !important;
    min-width: 56px !important;
    min-height: 56px !important;
  }

  html body:not(.ls-app-page) #testimonials .review-pseudo {
    font-size: 1.05rem !important;
  }

  html body:not(.ls-app-page) #testimonials .review-quote {
    font-size: 0.9rem !important;
    line-height: 1.68 !important;
  }

  html body:not(.ls-app-page) #faq .faq-question {
    font-size: 0.88rem !important;
    line-height: 1.38 !important;
  }

  html body:not(.ls-app-page) #faq .faq-answer-inner {
    font-size: 0.84rem !important;
    line-height: 1.62 !important;
  }
}

/* ========================================================================== */
/* V43 — Avis alignés sur l'équipe + gouttières cohérentes sur l'application */
/* ========================================================================== */

:root {
  --app-shell-gutter: 20px;
  --app-shell-gutter-mobile: 16px;
}

/* -------------------------------------------------------------------------- */
/* Avis créateurs : exactement le même système de carte que l'équipe         */
/* -------------------------------------------------------------------------- */

html body:not(.ls-app-page) #testimonials .creator-reviews-carousel {
  width: min(100%, 1120px) !important;
  max-width: 100% !important;
  margin: 34px auto 0 !important;
  padding: 0 !important;
}

html body:not(.ls-app-page) #testimonials .creator-reviews-carousel .carousel-viewport {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !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;
}

html body:not(.ls-app-page) #testimonials .creator-reviews-carousel .carousel-viewport::-webkit-scrollbar {
  display: none !important;
}

html body:not(.ls-app-page) #testimonials .creator-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;
}

html body:not(.ls-app-page) #testimonials .creator-reviews-carousel .creator-review-card {
  position: relative !important;
  z-index: 1 !important;
  display: flex !important;
  width: calc((min(1120px, calc(100vw - 40px)) - 28px) / 3) !important;
  min-width: 0 !important;
  max-width: none !important;
  min-height: 330px !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: #f5f3f7 !important;
  background:
    linear-gradient(145deg, rgba(48, 36, 75, 0.38), rgba(16, 24, 39, 0.98)),
    #101827 !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;
  opacity: 1 !important;
  visibility: visible !important;
}

html body:not(.ls-app-page) #testimonials .creator-reviews-carousel .creator-review-card::before,
html body:not(.ls-app-page) #testimonials .creator-reviews-carousel .creator-review-card::after {
  display: none !important;
  content: none !important;
}

html body:not(.ls-app-page) #testimonials .creator-reviews-carousel .review-author-block {
  position: static !important;
  z-index: 1 !important;
  width: 100% !important;
  display: flex !important;
  margin: 0 0 14px !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px !important;
  opacity: 1 !important;
  visibility: visible !important;
}

html body:not(.ls-app-page) #testimonials .creator-reviews-carousel .review-avatar {
  position: relative !important;
  display: grid !important;
  place-items: center !important;
  width: 64px !important;
  min-width: 64px !important;
  max-width: 64px !important;
  height: 64px !important;
  min-height: 64px !important;
  max-height: 64px !important;
  margin: 0 !important;
  flex: 0 0 64px !important;
  border: 1px solid rgba(244, 194, 112, 0.42) !important;
  border-radius: 50% !important;
  background: linear-gradient(145deg, rgba(67, 49, 102, 0.96), rgba(18, 26, 43, 0.98)) !important;
  overflow: hidden !important;
  opacity: 1 !important;
  visibility: visible !important;
}

html body:not(.ls-app-page) #testimonials .creator-reviews-carousel .review-avatar img {
  position: relative !important;
  z-index: 2 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  opacity: 1 !important;
  visibility: visible !important;
}

html body:not(.ls-app-page) #testimonials .creator-reviews-carousel .review-avatar-fallback {
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  display: grid !important;
  place-items: center !important;
  color: #f5f3f7 !important;
  font-size: 1rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.04em !important;
  opacity: 1 !important;
  visibility: visible !important;
}

html body:not(.ls-app-page) #testimonials .creator-reviews-carousel .review-avatar.has-image .review-avatar-fallback {
  opacity: 0 !important;
  visibility: hidden !important;
}

html body:not(.ls-app-page) #testimonials .creator-reviews-carousel .review-avatar.no-image .review-avatar-fallback,
html body:not(.ls-app-page) #testimonials .creator-reviews-carousel .review-avatar:not(.has-image) .review-avatar-fallback {
  opacity: 1 !important;
  visibility: visible !important;
}

html body:not(.ls-app-page) #testimonials .creator-reviews-carousel .review-pseudo {
  position: static !important;
  z-index: 1 !important;
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
  color: #f5f3f7 !important;
  -webkit-text-fill-color: #f5f3f7 !important;
  font-size: 1rem !important;
  font-weight: 750 !important;
  line-height: 1.25 !important;
  text-align: center !important;
  overflow: visible !important;
  overflow-wrap: anywhere !important;
  opacity: 1 !important;
  visibility: visible !important;
}

html body:not(.ls-app-page) #testimonials .creator-reviews-carousel .creator-review-role {
  position: static !important;
  z-index: 1 !important;
  display: block !important;
  width: 100% !important;
  margin: 0 0 14px !important;
  color: #aaa4b8 !important;
  -webkit-text-fill-color: #aaa4b8 !important;
  font-size: 0.78rem !important;
  font-weight: 550 !important;
  line-height: 1.42 !important;
  text-align: center !important;
  overflow: visible !important;
  opacity: 1 !important;
  visibility: visible !important;
}

html body:not(.ls-app-page) #testimonials .creator-reviews-carousel .review-stars {
  position: static !important;
  z-index: 1 !important;
  display: flex !important;
  width: 100% !important;
  margin: 0 0 14px !important;
  justify-content: center !important;
  color: #f5bf65 !important;
  -webkit-text-fill-color: #f5bf65 !important;
  font-size: 0.92rem !important;
  letter-spacing: 0.1em !important;
  line-height: 1 !important;
  opacity: 1 !important;
  visibility: visible !important;
}

html body:not(.ls-app-page) #testimonials .creator-reviews-carousel .review-title {
  position: static !important;
  z-index: 1 !important;
  display: block !important;
  width: 100% !important;
  margin: 0 0 16px !important;
  color: #f5bf65 !important;
  -webkit-text-fill-color: #f5bf65 !important;
  font-size: 0.76rem !important;
  font-weight: 800 !important;
  line-height: 1.42 !important;
  letter-spacing: 0.11em !important;
  text-align: center !important;
  text-transform: uppercase !important;
  overflow: visible !important;
  overflow-wrap: anywhere !important;
  opacity: 1 !important;
  visibility: visible !important;
}

html body:not(.ls-app-page) #testimonials .creator-reviews-carousel .review-quote {
  position: static !important;
  z-index: 1 !important;
  display: block !important;
  width: 100% !important;
  min-height: 0 !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 18px 0 0 !important;
  border-top: 1px solid rgba(244, 194, 112, 0.12) !important;
  color: #d8d3df !important;
  -webkit-text-fill-color: #d8d3df !important;
  font-size: 0.84rem !important;
  font-style: normal !important;
  font-weight: 350 !important;
  line-height: 1.68 !important;
  text-align: center !important;
  white-space: normal !important;
  overflow: visible !important;
  overflow-wrap: anywhere !important;
  text-overflow: clip !important;
  opacity: 1 !important;
  visibility: visible !important;
  -webkit-line-clamp: unset !important;
}

html body:not(.ls-app-page) #testimonials .creator-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;
}

html body:not(.ls-app-page) #testimonials .creator-reviews-carousel[data-items="1"] .carousel-footer {
  display: none !important;
}

@media (max-width: 1024px) {
  html body:not(.ls-app-page) #testimonials .creator-reviews-carousel .creator-review-card {
    width: min(78vw, 350px) !important;
    flex-basis: min(78vw, 350px) !important;
  }
}

@media (max-width: 768px) {
  html body:not(.ls-app-page) #testimonials .creator-reviews-carousel {
    width: 100% !important;
    margin-top: 30px !important;
  }

  html body:not(.ls-app-page) #testimonials .creator-reviews-carousel .carousel-track {
    gap: 14px !important;
  }

  html body:not(.ls-app-page) #testimonials .creator-reviews-carousel .creator-review-card {
    width: min(86vw, 360px) !important;
    min-height: 340px !important;
    padding: 26px 22px !important;
    flex-basis: min(86vw, 360px) !important;
  }
}

@media (max-width: 420px) {
  html body:not(.ls-app-page) #testimonials .creator-reviews-carousel .creator-review-card {
    width: min(88vw, 340px) !important;
    min-height: 340px !important;
    padding: 24px 20px !important;
    flex-basis: min(88vw, 340px) !important;
  }

  html body:not(.ls-app-page) #testimonials .creator-reviews-carousel .review-pseudo {
    font-size: 0.94rem !important;
  }

  html body:not(.ls-app-page) #testimonials .creator-reviews-carousel .creator-review-role,
  html body:not(.ls-app-page) #testimonials .creator-reviews-carousel .review-title {
    font-size: 0.72rem !important;
  }

  html body:not(.ls-app-page) #testimonials .creator-reviews-carousel .review-quote {
    font-size: 0.8rem !important;
    line-height: 1.64 !important;
  }
}

/* -------------------------------------------------------------------------- */
/* Application : une gouttière stable autour de tous les blocs               */
/* -------------------------------------------------------------------------- */

html body.ls-app-page main#contenu-principal {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  overflow-x: clip !important;
}

html body.ls-app-page main#contenu-principal > section:not(.ls-auth-gate) {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  padding-left: var(--app-shell-gutter) !important;
  padding-right: var(--app-shell-gutter) !important;
}

html body.ls-app-page main#contenu-principal > section:not(.ls-auth-gate) > .container,
html body.ls-app-page main#contenu-principal > section:not(.ls-auth-gate) .container {
  width: 100% !important;
  max-width: var(--content-max, 1240px) !important;
  margin-right: auto !important;
  margin-left: auto !important;
  padding-right: 0 !important;
  padding-left: 0 !important;
  box-sizing: border-box !important;
}

html body.ls-app-page main#contenu-principal > .container {
  width: calc(100% - (var(--app-shell-gutter) * 2)) !important;
  max-width: var(--content-max, 1240px) !important;
  margin-right: auto !important;
  margin-left: auto !important;
  box-sizing: border-box !important;
}

html body.ls-app-page main#contenu-principal :where(
  .admin-workspace,
  .admin-detail-grid,
  .admin-staff-layout,
  .profile-hero-grid,
  .profile-main-grid,
  .profile-balance-grid,
  .quest-hero-grid,
  .quest-main-grid,
  .quest-validation-shell,
  .quest-admin-hero-grid,
  .quest-admin-workspace,
  .quest-admin-final-grid,
  .quest-admin-final-top-grid,
  .spin-hero-grid,
  .spin-layout,
  .spin-stats-grid,
  .spin-machine-shell,
  .payment-calendar-grid,
  .payment-calendar-hero-main,
  .team-workspace,
  .team-assignment-grid
) {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin-right: auto !important;
  margin-left: auto !important;
  box-sizing: border-box !important;
}

html body.ls-app-page main#contenu-principal :where(
  .admin-card,
  .admin-hero-card,
  .admin-alert,
  .profile-card,
  .profile-hero-card,
  .profile-balance-highlight-card,
  .quest-panel,
  .quest-card,
  .quest-validation-header,
  .quest-validation-filter,
  .quest-validation-request-card,
  .quest-admin-card,
  .quest-admin-final-card,
  .spin-panel,
  .payment-calendar-card,
  .team-overview-card,
  .team-card,
  .team-history-card,
  .team-assignment-card
) {
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

@media (max-width: 1099px) {
  html body.ls-app-page main#contenu-principal > section:not(.ls-auth-gate) {
    padding-left: var(--app-shell-gutter-mobile) !important;
    padding-right: var(--app-shell-gutter-mobile) !important;
  }

  html body.ls-app-page main#contenu-principal > .container {
    width: calc(100% - (var(--app-shell-gutter-mobile) * 2)) !important;
  }
}

@media (max-width: 720px) {
  html body.ls-app-page main#contenu-principal > section:not(.ls-auth-gate) {
    padding-left: var(--app-shell-gutter-mobile) !important;
    padding-right: var(--app-shell-gutter-mobile) !important;
  }

  html body.ls-app-page main#contenu-principal > section:not(.ls-auth-gate) > .container,
  html body.ls-app-page main#contenu-principal > section:not(.ls-auth-gate) .container {
    width: 100% !important;
    max-width: 100% !important;
  }

  html body.ls-app-page main#contenu-principal :where(
    .quest-validation-shell,
    .quest-validation-header,
    .quest-validation-filter,
    .quest-validation-request-card,
    .spin-hero-grid,
    .spin-panel,
    .profile-hero-card,
    .profile-balance-highlight-card,
    .admin-card,
    .team-overview-card,
    .payment-calendar-card
  ) {
    margin-right: 0 !important;
    margin-left: 0 !important;
  }
}

/* ========================================================================== */
/* V44 — Gouttières affinées, footer respirant et paiement fiabilisé         */
/* ========================================================================== */

:root {
  /* 12 px par côté sur mobile, 16 px sur écrans plus larges. */
  --page-inset-mobile: 24px;
  --page-inset: 32px;
  --app-shell-gutter: 0px;
  --app-shell-gutter-mobile: 0px;
}

/* Le shell applicatif possède déjà son propre padding horizontal dans le
   fichier principal. On évite donc tout cumul de gouttières sur les sections. */
html body.ls-app-page main#contenu-principal > section:not(.ls-auth-gate) {
  padding-right: 0 !important;
  padding-left: 0 !important;
}

html body.ls-app-page main#contenu-principal > section:not(.ls-auth-gate) > .container,
html body.ls-app-page main#contenu-principal > section:not(.ls-auth-gate) .container,
html body.ls-app-page main#contenu-principal > .container {
  width: 100% !important;
  max-width: var(--content-max, var(--ls-content-max, 1240px)) !important;
  margin-right: auto !important;
  margin-left: auto !important;
  padding-right: 0 !important;
  padding-left: 0 !important;
  box-sizing: border-box !important;
}

/* Les pages qui définissent historiquement leur propre calc(100% - 32px)
   utilisent désormais exclusivement la marge du shell global. */
html body.ls-app-page :where(
  .team-page,
  .payment-calendar-page,
  .quest-page,
  .profile-page-v3,
  .spin-page,
  .admin-page-v5,
  .quest-admin-page-v2,
  .quest-admin-final-page
) .container {
  width: 100% !important;
  max-width: var(--content-max, var(--ls-content-max, 1240px)) !important;
  margin-inline: auto !important;
  padding-inline: 0 !important;
}

/* Footer applicatif : il reste aligné sur les cartes, sans toucher l’écran. */
html body.ls-app-page main#contenu-principal > .site-footer--app {
  width: 100% !important;
  max-width: var(--content-max, var(--ls-content-max, 1240px)) !important;
  margin-right: auto !important;
  margin-left: auto !important;
  padding-right: 0 !important;
  padding-left: 0 !important;
  box-sizing: border-box !important;
}

/* Footer public et blocs marketing : 12 px par côté sur smartphone. */
@media (max-width: 720px) {
  html body:not(.ls-app-page) :where(
    .marketing-header,
    .logo-ticker,
    .silk-divider,
    .section,
    .home-cta,
    .site-footer
  ) {
    width: calc(100% - 24px) !important;
  }

  html body:not(.ls-app-page) .hero {
    width: calc(100% - 24px) !important;
  }

  html body.ls-app-page > main#contenu-principal {
    /* La base utilisait déjà 14 px. 12 px est suffisamment respirant tout en
       récupérant de la largeur utile sur les petits écrans. */
    padding-right: 12px !important;
    padding-left: 12px !important;
  }

  html body.ls-app-page main#contenu-principal > .site-footer--app {
    width: 100% !important;
  }
}

@media (min-width: 721px) {
  html body.ls-app-page > main#contenu-principal {
    padding-right: 16px !important;
    padding-left: 16px !important;
  }
}

/* Sécurité anti-débordement pour les cartes et contrôles larges. */
html body.ls-app-page main#contenu-principal :where(
  .quest-tabs-nav,
  .quest-overview-strip,
  .quest-validation-filter,
  .admin-tabs,
  .admin-toolbar,
  .spin-machine-window,
  .payment-registration-table,
  .payment-calendar-hero-actions,
  .team-tabs
) {
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}