/* =============================================================================
   Talibi marketing site — ADN visuel admin dashboard (pilotage clair)
   Beige · marron encre · crème · typographie signature Cormorant / Italianno
   Chargé APRÈS style.css (+ styles inline page) — animations inchangées
   ============================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@1,500;1,600;1,700&family=Italianno&family=Inter:wght@400;500;600;700;800&display=swap');

:root {
  /* ── Palette pilot (alignée Pilotage-light.css) ── */
  --pilot-beige-base: #e8dcc8;
  --pilot-beige-soft: #f0e6d4;
  --pilot-beige-card: #faf4ea;
  --pilot-beige-elevated: #fffbf5;
  --pilot-beige-inset: #e8dcc8;
  --pilot-brown-ink: #2c2218;
  --pilot-brown-deep: #4a3d32;
  --pilot-brown-mid: #6b5344;
  --pilot-brown-accent: #8a6f56;
  --pilot-brown-gold: #a68652;
  --pilot-brown-border: rgba(107, 83, 68, 0.24);
  --pilot-brown-border-soft: rgba(107, 83, 68, 0.14);
  --pilot-gold: #b8924a;
  --pilot-gold-light: #c4a574;
  --pilot-emerald: #2a7d68;
  --pilot-grad-hero: linear-gradient(
    118deg,
    var(--pilot-brown-ink) 0%,
    var(--pilot-brown-accent) 38%,
    var(--pilot-brown-gold) 72%,
    #c4a574 100%
  );
  --pilot-grad-surface: linear-gradient(
    155deg,
    var(--pilot-beige-elevated) 0%,
    var(--pilot-beige-card) 42%,
    var(--pilot-beige-soft) 100%
  );
  --pilot-shadow:
    0 18px 48px rgba(74, 58, 42, 0.12),
    0 0 0 1px rgba(255, 249, 241, 0.85) inset;

  --font-ui: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-display-serif: 'Cormorant Garamond', 'Palatino Linotype', 'Book Antiqua', Georgia, serif;
  --font-display-script: 'Italianno', 'Cormorant Garamond', cursive;

  /* Remap tokens legacy style.css */
  --white: var(--pilot-beige-elevated);
  --off-white: var(--pilot-beige-soft);
  --surface: var(--pilot-beige-card);
  --border: var(--pilot-brown-border);
  --border-light: var(--pilot-brown-border-soft);
  --text-primary: var(--pilot-brown-ink);
  --text-secondary: var(--pilot-brown-mid);
  --text-tertiary: #9a8470;
  --gold: var(--pilot-gold);
  --gold-light: var(--pilot-gold-light);
  --gold-bg: #f5ead8;
  --blue: var(--pilot-brown-deep);
  --blue-dark: var(--pilot-brown-ink);
  --blue-light: #f0e6d4;
  --royal: var(--pilot-brown-deep);
  --navy: var(--pilot-brown-ink);
  --teal: var(--pilot-emerald);
  --teal-deep: #1f5c4d;
  --cyan: var(--pilot-brown-accent);
  --shadow-sm: 0 1px 3px rgba(74, 58, 42, 0.07), 0 2px 8px rgba(74, 58, 42, 0.05);
  --shadow-md: 0 4px 16px rgba(74, 58, 42, 0.08), 0 8px 32px rgba(74, 58, 42, 0.06);
  --shadow-lg: 0 8px 32px rgba(74, 58, 42, 0.1), 0 24px 64px rgba(74, 58, 42, 0.08);
}

/* ── Base & motifs ─────────────────────────────────────────── */
html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-ui) !important;
  color: var(--pilot-brown-ink) !important;
  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.06) 1px, transparent 0),
    radial-gradient(circle at 1px 1px, rgba(184, 146, 74, 0.05) 1px, transparent 0) !important;
  opacity: 0.35 !important;
}

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

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

/* ── Typographie display (titres marketing) ─────────────── */
h1,
h2,
.section-eyebrow,
.final-cta-title,
.premium-showcase-title,
.dashboard-showcase-title,
.talibi-video-premium-title,
.am-intro-title,
.phone-reveal-intro-title,
.ts-hero-title {
  font-family: var(--font-display-serif) !important;
  font-style: italic !important;
  font-weight: 700 !important;
  letter-spacing: 0.012em !important;
  color: var(--pilot-brown-ink) !important;
}

h3 {
  font-family: var(--font-ui) !important;
  font-style: normal !important;
  color: var(--pilot-brown-deep) !important;
}

.site-main > section > p,
.section-inner > p,
.card p,
.caption,
.hero-pitch-blurb-text {
  color: var(--pilot-brown-mid);
}

.progress {
  background: var(--pilot-gold) !important;
}

/* ── Sections & surfaces ───────────────────────────────────── */
section:not(.hero-pitch):not(.phone-reveal-section):not(.talibi-standard-showcase-section):not(.directeur-mobile-showcase):not(.compte-enseignant-showcase):not(.compte-parent-showcase):not(.phone-pc-zoom-showcase):not(.contact-section):not(.sovereign-hero):not(.sovereign-section):not(.insight-cards-showcase-section):not(.pitch-deck-tarification):not(.talibi-video-premium):not(.talibi-fees-premium):not(.phone-end-standard) {
  background: var(--pilot-beige-elevated);
}

section.surface {
  background: var(--pilot-grad-surface) !important;
}

section.dark {
  background: linear-gradient(
    168deg,
    #3d3228 0%,
    var(--pilot-brown-deep) 45%,
    #2c2218 100%
  ) !important;
  color: var(--pilot-beige-elevated) !important;
}

body.page-home-scroll-bg main > section:nth-of-type(4n + 2):not(.dark),
body.page-home-scroll-bg main > section:nth-of-type(4n + 3):not(.dark):not(.surface),
body.page-home-scroll-bg #talibi-video-premium,
body.page-home-scroll-bg #talibi-fees-premium,
body.page-home-scroll-bg #directeur-mobile-showcase {
  background: transparent !important;
  background-image: none !important;
}

main > section:nth-of-type(4n + 2):not(.dark) {
  background: linear-gradient(180deg, var(--pilot-beige-soft) 0%, var(--pilot-beige-base) 100%) !important;
}

main > section:nth-of-type(4n + 3):not(.dark):not(.surface) {
  background: linear-gradient(180deg, var(--pilot-beige-elevated) 0%, var(--pilot-beige-card) 100%) !important;
}

/* ── Cartes & boutons ──────────────────────────────────────── */
.card {
  background: var(--pilot-beige-card) !important;
  border: 1px solid var(--pilot-brown-border-soft) !important;
  box-shadow: var(--pilot-shadow) !important;
}

.card::before {
  background: linear-gradient(
    90deg,
    var(--pilot-brown-deep),
    var(--pilot-brown-gold),
    var(--pilot-gold)
  ) !important;
}

.card:hover {
  border-color: var(--pilot-brown-border) !important;
}

.btn-primary {
  background: linear-gradient(
    165deg,
    var(--pilot-brown-deep) 0%,
    var(--pilot-brown-ink) 52%,
    #1f1812 100%
  ) !important;
  color: var(--pilot-beige-elevated) !important;
  border: 1px solid rgba(255, 249, 241, 0.2) !important;
  box-shadow:
    0 2px 4px rgba(44, 34, 24, 0.15),
    0 12px 28px rgba(74, 58, 42, 0.28),
    inset 0 1px 0 rgba(255, 249, 241, 0.15) !important;
}

.btn-primary:hover {
  background: linear-gradient(
    165deg,
    var(--pilot-brown-accent) 0%,
    var(--pilot-brown-deep) 50%,
    var(--pilot-brown-ink) 100%
  ) !important;
  box-shadow:
    0 4px 8px rgba(44, 34, 24, 0.2),
    0 16px 36px rgba(74, 58, 42, 0.32),
    inset 0 1px 0 rgba(255, 249, 241, 0.2) !important;
}

.btn-gold {
  background: linear-gradient(135deg, var(--pilot-gold) 0%, var(--pilot-gold-light) 100%) !important;
  color: var(--pilot-brown-ink) !important;
}

.btn-gold:hover {
  box-shadow: 0 8px 20px rgba(184, 146, 74, 0.35) !important;
}

.btn-outline {
  border-color: var(--pilot-brown-border) !important;
  color: var(--pilot-brown-deep) !important;
}

.btn-outline:hover {
  border-color: var(--pilot-brown-ink) !important;
  background: rgba(255, 249, 241, 0.5) !important;
}

.btn-secondary {
  border-color: rgba(184, 146, 74, 0.55) !important;
  color: var(--pilot-brown-gold) !important;
  background: rgba(184, 146, 74, 0.1) !important;
}

.badge {
  background: linear-gradient(90deg, #f5ead8, #fff9f1) !important;
  color: var(--pilot-brown-deep) !important;
  border-color: var(--pilot-brown-border-soft) !important;
}

/* ── Header : barre SANS fond (style.css premium — ne pas recolorer) ── */
#site-header,
#site-header.scrolled {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* ── Footer ────────────────────────────────────────────────── */
#site-footer {
  background: linear-gradient(180deg, var(--pilot-beige-soft) 0%, var(--pilot-beige-elevated) 38%) !important;
  color: var(--pilot-brown-mid) !important;
  border-top-color: var(--pilot-brown-border-soft) !important;
  box-shadow: 0 -12px 28px rgba(74, 58, 42, 0.05) !important;
}

#site-footer::before {
  background: linear-gradient(
    90deg,
    transparent 8%,
    rgba(138, 111, 86, 0.22),
    transparent 92%
  ) !important;
}

.footer-col-heading {
  color: var(--pilot-brown-ink) !important;
}

.footer-brand-tagline,
.footer-copyright,
.footer-phone-note {
  color: var(--pilot-brown-mid) !important;
}

#site-footer .footer-inner .footer-link-row a,
#site-footer .footer-legal-row a {
  color: var(--pilot-brown-deep) !important;
}

#site-footer .footer-inner .footer-link-row a:hover,
#site-footer .footer-legal-row a:hover {
  color: var(--pilot-brown-ink) !important;
}

.footer-wa-btn {
  background: var(--pilot-emerald) !important;
  border-color: rgba(42, 125, 104, 0.35) !important;
}

.footer-wa-btn:hover {
  background: #238f75 !important;
}

/* Fond scroll-linked : voir talibi-pilot-refonte.css (dégradé mesh, sans photo) */

/* ── Hero pitch deck (accueil) ─────────────────────────────── */
.hero-pitch-title {
  font-family: var(--font-display-serif) !important;
  font-weight: 700 !important;
  font-style: italic !important;
  letter-spacing: 0.01em !important;
  color: var(--pilot-brown-ink) !important;
}

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

.hero-pitch-title-line--accent {
  font-family: var(--font-display-script) !important;
  font-weight: 400 !important;
  font-style: normal !important;
  font-size: 1.18em !important;
  letter-spacing: 0.04em !important;
  color: var(--pilot-brown-accent) !important;
  text-shadow: 0 1px 0 rgba(255, 249, 241, 0.65) !important;
}

.hero-pitch-blurb {
  background: none !important;
  border: none !important;
  box-shadow: none !important;
}

.hero-pitch-blurb-text {
  color: var(--pilot-brown-deep) !important;
}

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

/* ── Scrollytelling téléphone / PC (accueil) ───────────────── */
.phone-reveal-section {
  background: linear-gradient(
    180deg,
    #2c2218 0%,
    var(--pilot-brown-deep) 22%,
    var(--pilot-beige-soft) 48%,
    var(--pilot-beige-base) 100%
  ) !important;
}

.phone-reveal-bluewash {
  background:
    linear-gradient(180deg, transparent 62%, rgba(44, 34, 24, 0.14) 100%),
    radial-gradient(80% 65% at 50% 22%, rgba(184, 146, 74, 0.18), transparent 72%),
    linear-gradient(
      180deg,
      rgba(44, 34, 24, 0.12) 0%,
      rgba(74, 58, 42, 0.38) 70%,
      rgba(44, 34, 24, 0.52) 100%
    ),
    #2c2218 !important;
}

.phone-reveal-whitewash {
  background: rgba(247, 240, 228, 0.78) !important;
}

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

/* ── Hero legacy (pages intérieures) ───────────────────────── */
.hero-photo-overlay {
  background:
    linear-gradient(
      100deg,
      rgba(44, 34, 24, 0.78) 0%,
      rgba(74, 58, 42, 0.58) 40%,
      rgba(74, 58, 42, 0.32) 76%,
      rgba(44, 34, 24, 0.48) 100%
    ),
    linear-gradient(
      145deg,
      rgba(138, 111, 86, 0.22) 0%,
      rgba(42, 125, 104, 0.18) 100%
    ) !important;
}

.hero-bg-section h1 {
  font-family: var(--font-display-serif) !important;
  font-style: italic !important;
}

/* ── Contact & pages légales ───────────────────────────────── */
.contact-form-card,
.legal-doc-card,
.security-card {
  background: var(--pilot-beige-card) !important;
  border: 1px solid var(--pilot-brown-border-soft) !important;
  box-shadow: var(--pilot-shadow) !important;
}

/* ── Composants marketing fréquents ────────────────────────── */
.mockup-btn.is-active,
.mockup-btn:hover {
  border-color: var(--pilot-brown-deep) !important;
  color: var(--pilot-brown-deep) !important;
  background: var(--pilot-beige-elevated) !important;
}

.step-no {
  color: var(--pilot-brown-gold) !important;
  font-family: var(--font-display-serif) !important;
  font-style: italic !important;
}

.day {
  background: rgba(42, 125, 104, 0.12) !important;
  color: var(--pilot-emerald) !important;
  border-color: rgba(42, 125, 104, 0.28) !important;
}

.guarantee {
  background: var(--gold-bg) !important;
  border-color: rgba(184, 146, 74, 0.35) !important;
  color: var(--pilot-brown-gold) !important;
}

.pillar-card-body a,
a:not(.btn):not(.brand):not(.whatsapp-float):not(.footer-wa-btn) {
  color: var(--pilot-brown-deep);
}

.pillar-card-body a:hover {
  color: var(--pilot-brown-ink);
}

/* Showcase / modules — remplace bleus par palette pilot */
.premium-showcase-cta,
.showcase-cta-btn,
.final-cta-primary,
.trial-cta-btn,
.win-back-cta-btn {
  background: linear-gradient(
    165deg,
    var(--pilot-brown-deep) 0%,
    var(--pilot-brown-ink) 100%
  ) !important;
  color: var(--pilot-beige-elevated) !important;
}

.ss-icon--blue {
  background: #f0e6d4 !important;
}

.ss-icon--teal {
  background: rgba(42, 125, 104, 0.12) !important;
}

/* Mobile accueil — crème (talibi-pilot-refonte.css affine l’opacité du mesh) */
@media (max-width: 767px) {
  body.page-home-scroll-bg {
    background: var(--pilot-beige-elevated) !important;
  }
}

/* ── Talibi Core — fondu crème ↔ blanc (voile scroll --tss-wash en JS) ── */
.talibi-standard-showcase-section {
  background: transparent !important;
}

.talibi-standard-showcase-section .talibi-standard-showcase-shell,
.talibi-standard-showcase-section .phone-end-standard {
  background: transparent !important;
}

main > section.talibi-standard-showcase-section,
main > section.talibi-standard-showcase-section:nth-of-type(n) {
  background: transparent !important;
}

.talibi-standard-showcase-section .phone-end-standard-copy p[style] {
  color: var(--pilot-brown-mid) !important;
}

.talibi-standard-showcase-section .dashboard-showcase-title {
  color: var(--pilot-brown-ink) !important;
}

/* Showcase comptes (directeur / parents / enseignants) — même crème */
.pilotage-snake-route,
.directeur-mobile-showcase,
.compte-enseignant-showcase,
.compte-parent-showcase,
.phone-pc-zoom-showcase {
  background: transparent !important;
}

/* ── Pitch deck tarification (index inline) ──────────────── */
.pitch-deck-tarification {
  background: transparent !important;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.pd-tari-kicker {
  color: var(--pilot-brown-mid) !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) !important;
  border-color: var(--pilot-brown-border-soft) !important;
  box-shadow: var(--pilot-shadow) !important;
}

.pd-tari-panel-label,
.pd-standard-head {
  font-family: var(--font-ui) !important;
  font-style: normal !important;
  font-weight: 800 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  font-size: clamp(0.62rem, 0.86vw, 0.72rem) !important;
  color: var(--pilot-brown-gold) !important;
}

.pd-standard-from,
.pd-standard-tagline {
  color: var(--pilot-brown-ink) !important;
}

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

.pd-launch-price-intro {
  color: var(--pilot-brown-ink) !important;
}

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

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

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

.pd-tari-foot {
  background:
    radial-gradient(120% 140% at 0% 0%, rgba(196, 165, 116, 0.22) 0%, transparent 55%),
    linear-gradient(135deg, #3d3228 0%, var(--pilot-brown-deep) 52%, #2c2218 100%) !important;
  border-color: rgba(255, 249, 241, 0.16) !important;
  box-shadow: 0 10px 22px rgba(44, 34, 24, 0.22), inset 0 1px 0 rgba(255, 249, 241, 0.1) !important;
}

.pd-tari-foot.pd-tari-foot--tier {
  box-shadow:
    0 14px 32px rgba(44, 34, 24, 0.24),
    0 6px 14px rgba(74, 58, 42, 0.12),
    inset 0 1px 0 rgba(255, 249, 241, 0.12) !important;
}

.pd-tari-foot-label {
  color: #f5ead8 !important;
  background: rgba(255, 249, 241, 0.12) !important;
  border-color: rgba(255, 249, 241, 0.28) !important;
}

.pd-tari-foot-main {
  color: #fff9f1 !important;
}

.pd-tari-foot-sub {
  color: rgba(255, 249, 241, 0.88) !important;
}

.pd-tari-table thead th {
  background: var(--pilot-beige-inset) !important;
  color: var(--pilot-brown-deep) !important;
  border-color: var(--pilot-brown-border-soft) !important;
}

.pd-tari-table tbody td {
  border-color: var(--pilot-brown-border-soft) !important;
  color: var(--pilot-brown-mid) !important;
}

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

/* ── Showcase Talibi Standard & story phone ──────────────── */
.talibi-standard-showcase-section .phone-end-standard-copy .showcase-cta-btn,
.talibi-standard-showcase-section .phone-end-standard-copy .showcase-cta-btn:hover {
  background: linear-gradient(
    165deg,
    var(--pilot-brown-deep) 0%,
    var(--pilot-brown-ink) 48%,
    #1f1812 100%
  ) !important;
}

.talibi-standard-showcase-section .phone-end-standard-copy .showcase-cta-btn:hover {
  background: linear-gradient(
    165deg,
    var(--pilot-brown-accent) 0%,
    var(--pilot-brown-deep) 50%,
    var(--pilot-brown-ink) 100%
  ) !important;
}

.phone-story-title {
  font-family: var(--font-display-serif) !important;
  font-style: italic !important;
  color: var(--pilot-brown-ink) !important;
}

.phone-story-lines {
  color: var(--pilot-brown-mid) !important;
}

/* Tags compte directeur / parents / enseignants — pilules premium */
.phone-slide-tag,
.phone-story-tag {
  font-family: var(--font-ui) !important;
  font-style: normal !important;
  font-weight: 600 !important;
  font-size: clamp(0.78rem, 1.05vw, 0.88rem) !important;
  letter-spacing: 0.02em !important;
  color: var(--pilot-brown-ink) !important;
  padding: 10px 16px !important;
  border-radius: 999px !important;
  background: linear-gradient(
    155deg,
    #fff9f1 0%,
    #f7f0e4 55%,
    #ebe0cc 100%
  ) !important;
  border: 1px solid rgba(107, 83, 68, 0.22) !important;
  box-shadow:
    0 4px 14px rgba(74, 58, 42, 0.1),
    0 1px 0 rgba(255, 255, 255, 0.85) inset !important;
}

.phone-slide-account-title,
.phone-slide-tags-heading {
  font-family: var(--font-display-serif) !important;
  font-style: italic !important;
  font-weight: 700 !important;
  color: var(--pilot-brown-ink) !important;
  text-shadow: none !important;
}

.pd-sovereign-pack {
  background: var(--pilot-beige-card) !important;
  border-color: var(--pilot-brown-border-soft) !important;
}

.pd-sovereign-title,
.pd-sovereign-kicker,
.pd-sovereign-offer-name {
  color: var(--pilot-brown-ink) !important;
}

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

.pd-sovereign-more {
  color: var(--pilot-brown-deep) !important;
}

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

/* ── Sticky CTA mobile ─────────────────────────────────────── */
.sticky-mobile-cta {
  background: rgba(255, 249, 241, 0.94) !important;
  border-top-color: var(--pilot-brown-border-soft) !important;
  backdrop-filter: blur(12px) !important;
}

.sticky-mobile-cta .btn-primary {
  background: linear-gradient(165deg, var(--pilot-brown-deep) 0%, var(--pilot-brown-ink) 100%) !important;
}

.footer-logo-img {
  height: clamp(28px, 3.2vw, 36px) !important;
  width: auto !important;
  max-width: 140px;
  object-fit: contain;
}

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

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