/* =============================================================================
   Talibi marketing — REFONTE VISUELLE v3 (crème · marron · pilotage admin)
   Charge APRÈS talibi-pilot-visual.css — remplace l’image de fond scroll-linked
   ============================================================================= */

:root {
  /* Palette resserrée — contraste WCAG AA sur corps de texte */
  --pilot-beige-base: #e8dcc8;
  --pilot-beige-soft: #f0e6d4;
  --pilot-beige-card: #faf4ea;
  --pilot-beige-elevated: #fffbf5;
  --pilot-beige-inset: #e2d4bc;
  --pilot-brown-ink: #2a2118;
  --pilot-brown-deep: #4a3d32;
  --pilot-brown-mid: #6b5344;
  --pilot-brown-accent: #8a6f56;
  --pilot-brown-gold: #a68652;
  --pilot-brown-border: rgba(74, 58, 42, 0.22);
  --pilot-brown-border-soft: rgba(107, 83, 68, 0.12);
  --pilot-gold: #b8924a;
  --pilot-emerald: #2a7d68;

  /* Fond scroll-linked (pilotés par JS) */
  --scroll-bg-top: #e8dcc8;
  --scroll-bg-mid: #f0e6d4;
  --scroll-bg-bottom: #fffbf5;
  --scroll-bg-glow-a: 0.14;
  --scroll-bg-glow-b: 0.1;
  --page-scroll-wash-opacity: 0;
}

/* ── Fond global : dégradé mesh (plus d’image photo) ─────────── */
.page-scroll-bg img {
  display: none !important;
}

.page-scroll-bg {
  background:
    radial-gradient(
      ellipse 90% 55% at 12% calc(8% + var(--scroll-glow-y, 0%) * 0.4),
      rgba(184, 146, 74, var(--scroll-bg-glow-a, 0.14)),
      transparent 68%
    ),
    radial-gradient(
      ellipse 75% 48% at 88% calc(22% + var(--scroll-glow-y, 0%) * 0.25),
      rgba(138, 111, 86, var(--scroll-bg-glow-b, 0.1)),
      transparent 62%
    ),
    radial-gradient(
      ellipse 60% 40% at 50% calc(65% + var(--scroll-glow-y, 0%) * 0.15),
      rgba(247, 240, 228, 0.85),
      transparent 70%
    ),
    linear-gradient(
      168deg,
      var(--scroll-bg-top) 0%,
      var(--scroll-bg-mid) 42%,
      var(--scroll-bg-bottom) 100%
    ) !important;
}

.page-scroll-bg::after {
  background: rgba(255, 251, 245, var(--page-scroll-wash-opacity, 0)) !important;
  backdrop-filter: blur(calc(var(--page-scroll-wash-blur-px, 0) * 1px)) !important;
  -webkit-backdrop-filter: blur(calc(var(--page-scroll-wash-blur-px, 0) * 1px)) !important;
}

body {
  background: var(--pilot-beige-base) !important;
}

body:not(.page-home-scroll-bg)::before {
  background-image:
    radial-gradient(circle at 1px 1px, rgba(107, 83, 68, 0.05) 1px, transparent 0),
    radial-gradient(circle at 1px 1px, rgba(184, 146, 74, 0.04) 1px, transparent 0) !important;
  opacity: 0.28 !important;
}

body:not(.page-home-scroll-bg)::after {
  opacity: 0.06 !important;
}

body.page-home-scroll-bg {
  background: transparent !important;
}

/* Accueil : sections laissent voir le fond scroll-linked */
body.page-home-scroll-bg main.site-main > section,
body.page-home-scroll-bg main.site-main > section:nth-of-type(4n + 2):not(.dark),
body.page-home-scroll-bg
  main.site-main
  > section:nth-of-type(4n + 3):not(.dark):not(.surface) {
  background: transparent !important;
}

/* ── Header : verre crème + pilules marron ───────────────────── */
#site-header.scrolled .brand {
  background: rgba(255, 251, 245, 0.78) !important;
  border-color: var(--pilot-brown-border-soft) !important;
  box-shadow:
    0 8px 24px rgba(74, 58, 42, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.65) !important;
}

#site-header:not(.scrolled) .brand-logo--full {
  filter: drop-shadow(0 4px 14px rgba(74, 58, 42, 0.18)) !important;
}

#site-header .header-nav-acces {
  color: var(--pilot-brown-deep) !important;
  border-color: var(--pilot-brown-border) !important;
  background: rgba(255, 251, 245, 0.82) !important;
  box-shadow:
    0 2px 10px rgba(74, 58, 42, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
}

#site-header .header-nav-acces:hover {
  color: var(--pilot-brown-ink) !important;
  border-color: rgba(74, 58, 42, 0.38) !important;
  background: var(--pilot-beige-elevated) !important;
}

#site-header .header-nav-contact {
  color: var(--pilot-beige-elevated) !important;
  background: linear-gradient(
    165deg,
    var(--pilot-brown-deep) 0%,
    var(--pilot-brown-ink) 100%
  ) !important;
  border-color: rgba(44, 34, 24, 0.25) !important;
  box-shadow:
    0 2px 4px rgba(44, 34, 24, 0.12),
    0 10px 24px rgba(74, 58, 42, 0.22),
    inset 0 1px 0 rgba(255, 249, 241, 0.15) !important;
}

body.page-contact #site-header .header-nav-contact,
#site-header .header-nav-contact.active {
  display: none !important;
}

#site-header .header-nav-contact:hover {
  background: linear-gradient(
    165deg,
    var(--pilot-brown-accent) 0%,
    var(--pilot-brown-deep) 55%,
    var(--pilot-brown-ink) 100%
  ) !important;
  box-shadow:
    0 4px 8px rgba(44, 34, 24, 0.16),
    0 14px 32px rgba(74, 58, 42, 0.28) !important;
}

/* ── Hero pitch — contraste renforcé ─────────────────────────── */
.hero-pitch-title,
.hero-pitch-title .hero-pitch-title-line:not(.hero-pitch-title-line--accent) {
  color: var(--pilot-brown-ink) !important;
  text-shadow: 0 1px 0 rgba(255, 251, 245, 0.5) !important;
}

.hero-pitch-title-line--accent {
  color: var(--pilot-brown-accent) !important;
}

.hero-pitch-blurb {
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  padding: 0 0 0 clamp(14px, 1.5vw, 20px) !important;
  position: relative;
}

.hero-pitch-blurb::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.2em;
  bottom: 0.2em;
  width: 2px;
  border-radius: 2px;
  background: linear-gradient(
    180deg,
    var(--pilot-gold) 0%,
    var(--pilot-brown-accent) 55%,
    rgba(138, 111, 86, 0.35) 100%
  );
}

.hero-pitch-blurb-text {
  color: var(--pilot-brown-deep) !important;
  font-weight: 500 !important;
  letter-spacing: 0.014em !important;
  line-height: 1.62 !important;
  text-shadow: 0 1px 2px rgba(255, 251, 245, 0.55) !important;
}

.hero-pitch-store-badge:focus-visible {
  outline-color: var(--pilot-brown-deep) !important;
}

/* ── Scrollytelling téléphone — transition marron → crème ───── */
.phone-reveal-section {
  background: linear-gradient(
    180deg,
    #2a2118 0%,
    var(--pilot-brown-deep) 20%,
    #6b5344 38%,
    var(--pilot-beige-soft) 58%,
    var(--pilot-beige-elevated) 100%
  ) !important;
}

.phone-reveal-bluewash {
  background:
    linear-gradient(180deg, transparent 58%, rgba(42, 33, 24, 0.2) 100%),
    radial-gradient(80% 65% at 50% 20%, rgba(184, 146, 74, 0.22), transparent 72%),
    linear-gradient(
      180deg,
      rgba(42, 33, 24, 0.15) 0%,
      rgba(74, 58, 42, 0.42) 68%,
      rgba(42, 33, 24, 0.55) 100%
    ),
    #2a2118 !important;
}

.phone-reveal-whitewash {
  background: rgba(255, 251, 245, 0.82) !important;
}

.phone-reveal-intro-title,
.am-intro-title {
  color: var(--pilot-beige-elevated) !important;
  text-shadow: 0 2px 20px rgba(0, 0, 0, 0.4) !important;
}

.phone-reveal-intro-sub {
  color: rgba(255, 251, 245, 0.9) !important;
}

/* ── Showcases — surfaces crème homogènes ────────────────────── */
.directeur-mobile-showcase .dm-tag {
  background: linear-gradient(
    155deg,
    var(--pilot-beige-elevated) 0%,
    var(--pilot-beige-card) 55%,
    var(--pilot-beige-soft) 100%
  ) !important;
  border: 1px solid var(--pilot-brown-border) !important;
  box-shadow:
    0 4px 14px rgba(74, 58, 42, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.85) !important;
  color: var(--pilot-brown-ink) !important;
}

body.page-home .dashboard-showcase,
.talibi-standard-showcase-section .dashboard-showcase {
  background: var(--pilot-beige-elevated) !important;
  border-top: 1px solid var(--pilot-brown-border-soft);
  border-bottom: 1px solid var(--pilot-brown-border-soft);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65);
}

.insight-cards-section {
  background: transparent !important;
}

.insight-card {
  background: var(--pilot-beige-card) !important;
  border: 1px solid var(--pilot-brown-border-soft) !important;
  box-shadow:
    0 8px 28px rgba(74, 58, 42, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.7) !important;
}

.insight-card-text {
  color: var(--pilot-brown-mid) !important;
}

.insight-card-title {
  color: var(--pilot-brown-ink) !important;
}

/* ── Pitch deck tarification ─────────────────────────────────── */
.pitch-deck-tarification {
  background: transparent !important;
}

.pd-tari-kicker {
  color: var(--pilot-brown-gold) !important;
}

.pd-tari-title {
  color: var(--pilot-brown-ink) !important;
}

.pd-tari-sub {
  color: var(--pilot-brown-mid) !important;
}

.pd-tari-panel {
  background: var(--pilot-grad-surface, linear-gradient(
    155deg,
    var(--pilot-beige-elevated) 0%,
    var(--pilot-beige-card) 42%,
    var(--pilot-beige-soft) 100%
  )) !important;
  border-color: var(--pilot-brown-border-soft) !important;
  box-shadow:
    0 10px 28px rgba(74, 58, 42, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.75) !important;
}

.pd-tari-panel-label {
  color: var(--pilot-brown-gold) !important;
}

.pd-launch-price-intro,
.pd-standard-from,
.pd-tari-range,
.pd-tari-price-num {
  color: var(--pilot-brown-ink) !important;
}

.pd-tari-list li {
  color: var(--pilot-brown-mid) !important;
}

.pd-launch-badge {
  background: linear-gradient(
    165deg,
    var(--pilot-brown-deep) 0%,
    var(--pilot-brown-ink) 100%
  ) !important;
  color: var(--pilot-beige-elevated) !important;
  box-shadow: 0 5px 14px rgba(74, 58, 42, 0.28) !important;
}

/* ── CTA final — marron profond cohérent ─────────────────────── */
.cta48-section {
  background: linear-gradient(
    168deg,
    #3d3228 0%,
    var(--pilot-brown-deep) 45%,
    #2a2118 100%
  ) !important;
}

.cta48-eyebrow {
  color: var(--pilot-gold) !important;
}

/* ── Pages intérieures ───────────────────────────────────────── */
.hero-bg-section h1,
.hero-bg-section p {
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.35);
}

.contact-section::before,
.contact-section::after {
  display: none !important;
}

.contact-form-card h3,
.contact-info h2,
.contact-hero-title {
  color: var(--pilot-brown-ink) !important;
  font-family: "Cormorant Garamond", Georgia, serif !important;
}

.contact-hero-kicker,
.contact-bullets li::before {
  color: var(--pilot-brown-gold) !important;
}

.form-submit-btn {
  background: linear-gradient(135deg, var(--pilot-brown-mid) 0%, var(--pilot-brown-deep) 100%) !important;
  color: var(--pilot-beige-elevated) !important;
}

.form-submit-btn:hover {
  background: linear-gradient(135deg, var(--pilot-brown-accent) 0%, var(--pilot-brown-mid) 100%) !important;
}

/* Page serveur souverain */
body.page-sovereign-doc .sovereign-title,
body.page-sovereign-doc .sovereign-section-title,
body.page-sovereign-doc .sovereign-choice-card h3 {
  color: var(--pilot-brown-ink) !important;
  font-family: "Cormorant Garamond", Georgia, serif !important;
}

body.page-sovereign-doc .sovereign-kicker,
body.page-sovereign-doc .sovereign-choice-label {
  color: var(--pilot-brown-gold) !important;
}

body.page-sovereign-doc .sovereign-lead,
body.page-sovereign-doc .sovereign-section-copy,
body.page-sovereign-doc .sovereign-card p,
body.page-sovereign-doc .sovereign-choice-card p {
  color: var(--pilot-brown-mid) !important;
}

body.page-sovereign-doc .sovereign-back {
  color: var(--pilot-brown-deep) !important;
}

body.page-sovereign-doc .sovereign-sheet {
  background: var(--pilot-beige-card) !important;
  border-color: var(--pilot-brown-border-soft) !important;
}

body.page-sovereign-doc .sovereign-btn-primary,
body.page-sovereign-doc .sovereign-btn-primary:hover {
  color: #ffffff !important;
}

body.page-sovereign-doc .sovereign-cta-box h2 {
  color: #ffffff !important;
}

/* ── Typographie — hiérarchie lisible ────────────────────────── */
.section-eyebrow,
.showcase-eyebrow,
.pd-tari-kicker {
  font-family: var(--font-ui) !important;
  font-style: normal !important;
  font-weight: 700 !important;
  letter-spacing: 0.18em !important;
}

h1,
h2,
.hero-pitch-title,
.final-cta-title {
  line-height: 1.08 !important;
}

.site-main > section > p,
.section-inner > p {
  max-width: 68ch;
}

/* ── Mobile : fond crème unifié (plus de blanc pur) ───────────── */
@media (max-width: 767px) {
  body.page-home-scroll-bg {
    background: var(--pilot-beige-elevated) !important;
  }

  body.page-home-scroll-bg #page-scroll-bg.page-scroll-bg {
    display: block !important;
    opacity: 0.55;
  }

  .hero-pitch-blurb {
    background: none !important;
    border: none !important;
    padding-left: clamp(12px, 3.2vw, 16px) !important;
  }

  #site-header .header-nav-acces,
  #site-header .header-nav-contact {
    font-size: 0.78rem;
    min-height: 36px;
    padding-inline: 12px;
  }
}

/* ── Composants marketing — bleus résiduels style.css ─────────── */
.premium-showcase-section,
.talibi-video-premium,
.final-cta-section {
  background: transparent !important;
}

.premium-showcase-kicker,
.dashboard-showcase-eyebrow,
.showcase-eyebrow {
  color: var(--pilot-brown-gold) !important;
}

.premium-showcase-title,
.dashboard-showcase-title,
.showcase-copy h2,
.showcase-copy h3 {
  color: var(--pilot-brown-ink) !important;
}

.premium-showcase-body,
.dashboard-showcase-body,
.showcase-copy p {
  color: var(--pilot-brown-mid) !important;
}

.ss-icon {
  border-color: var(--pilot-brown-border-soft) !important;
}

.ss-icon--gold {
  background: rgba(184, 146, 74, 0.14) !important;
  color: var(--pilot-brown-gold) !important;
}

.final-cta-section {
  background: linear-gradient(
    168deg,
    var(--pilot-beige-soft) 0%,
    var(--pilot-beige-elevated) 100%
  ) !important;
  border-top: 1px solid var(--pilot-brown-border-soft);
}

.final-cta-title {
  color: var(--pilot-brown-ink) !important;
}

.final-cta-sub {
  color: var(--pilot-brown-mid) !important;
}

.talibi-video-premium-title {
  color: var(--pilot-brown-ink) !important;
}

.talibi-video-premium-eyebrow {
  color: var(--pilot-brown-gold) !important;
  font-family: var(--font-ui) !important;
  font-style: normal !important;
}

.talibi-video-premium-lead {
  color: var(--pilot-brown-deep) !important;
}

.directeur-mobile-showcase .dm-showcase-eyebrow {
  color: var(--pilot-brown-gold) !important;
  font-family: var(--font-ui) !important;
  font-style: normal !important;
}

.directeur-mobile-showcase .dm-showcase-title {
  color: var(--pilot-brown-ink) !important;
}

.directeur-mobile-showcase .dm-showcase-lines li,
.directeur-mobile-showcase .dm-showcase-highlights li {
  color: var(--pilot-brown-deep) !important;
}

.directeur-mobile-showcase .dm-showcase-highlights li {
  color: var(--pilot-brown-mid) !important;
}

.pilotage-snake-route .showcase-premium-eyebrow,
.pilotage-snake-route .dm-showcase-eyebrow,
.compte-enseignant-showcase .showcase-premium-eyebrow,
.compte-parent-showcase .showcase-premium-eyebrow,
.phone-pc-zoom-showcase .showcase-premium-eyebrow {
  color: var(--pilot-brown-gold) !important;
  font-family: var(--font-ui) !important;
  font-style: normal !important;
}

.pilotage-snake-route .pilotage-snake-title,
.pilotage-snake-route .showcase-premium-title,
.pilotage-snake-route .dm-showcase-title,
.compte-enseignant-showcase .showcase-premium-title,
.compte-parent-showcase .showcase-premium-title,
.phone-pc-zoom-showcase .showcase-premium-title {
  color: var(--pilot-brown-ink) !important;
  font-family: "Cormorant Garamond", Georgia, serif !important;
}

.pilotage-snake-route .pilotage-snake-prose p,
.pilotage-snake-route .pilotage-snake-bullets li {
  color: var(--pilot-brown-deep) !important;
}

.pilotage-snake-route .pilotage-snake-kicker {
  color: var(--pilot-brown-gold) !important;
}

.compte-enseignant-showcase .showcase-premium-lines li,
.compte-enseignant-showcase .showcase-premium-highlights li,
.compte-parent-showcase .showcase-premium-lines li,
.compte-parent-showcase .showcase-premium-highlights li,
.phone-pc-zoom-showcase .showcase-premium-lines li,
.phone-pc-zoom-showcase .showcase-premium-highlights li {
  color: var(--pilot-brown-deep) !important;
}

.compte-enseignant-showcase .showcase-premium-highlights li,
.compte-parent-showcase .showcase-premium-highlights li,
.phone-pc-zoom-showcase .showcase-premium-highlights li {
  color: var(--pilot-brown-mid) !important;
}

.talibi-video-premium-sub {
  color: var(--pilot-brown-mid) !important;
}

/* FAQ / accordéon */
.faq-item {
  background: var(--pilot-beige-card) !important;
  border-color: var(--pilot-brown-border-soft) !important;
}

.faq-trigger {
  color: var(--pilot-brown-ink) !important;
}

.faq-content p {
  color: var(--pilot-brown-mid) !important;
}

/* Progress bar */
.progress {
  background: linear-gradient(
    90deg,
    var(--pilot-brown-gold),
    var(--pilot-gold)
  ) !important;
}

/* Footer renforcé */
#site-footer {
  background: linear-gradient(
    180deg,
    var(--pilot-beige-soft) 0%,
    var(--pilot-beige-base) 100%
  ) !important;
}

/* Sticky CTA mobile */
.sticky-mobile-cta {
  background: rgba(255, 251, 245, 0.96) !important;
  border-top-color: var(--pilot-brown-border) !important;
}

@media (prefers-reduced-motion: reduce) {
  .page-scroll-bg {
    background: var(--pilot-beige-soft) !important;
  }

  .page-scroll-bg::after {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
}