/* ════════════════════════════════════════════════════════════════
   Vertaya theme overrides — pivot couleur bleu marine + reveal v2
   À charger APRÈS le <style> embed de chaque page (cascade override).
   ════════════════════════════════════════════════════════════════ */

:root {
  /* Palette brief Vertaya */
  --primary: #1E3A5F;          /* Bleu marine — confiance/expertise */
  --primary-dark: #122544;
  --primary-light: #2C5282;
  --primary-glow: rgba(30,58,95,.08);
  --primary-border: rgba(30,58,95,.18);

  /* L'orange existant devient officiellement l'accent */
  --accent: #FF6B35;
  --accent-dark: #E85A2D;
  --accent-soft: #F59E0B;

  /* Dark navy teinté pour les sections sombres */
  --dark-navy: #0a1428;        /* au lieu de noir pur */
  --dark-navy-2: #0f1d36;
}

/* ── Sections sombres : teinte navy au lieu de noir ────────────── */
.hero,
.section.dark,
.final-cta,
.footer {
  background: var(--dark-navy) !important;
}
.hero { background: linear-gradient(180deg, var(--dark-navy-2) 0%, var(--dark-navy) 100%) !important; }
.final-cta { background: linear-gradient(180deg, var(--dark-navy) 0%, var(--primary-dark) 100%) !important; }

/* ── Section "expert" (comment ça marche) : fond bleu marine ──── */
.section.alt {
  background: linear-gradient(180deg, #ffffff 0%, rgba(30,58,95,.03) 100%);
}

/* ── Nav fixe au scroll (sticky horizontal) ────────────────────── */
.nav {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 1000 !important;
  border-bottom-color: var(--primary-border) !important;
}
/* Nav légèrement renforcée quand on a scrollé */
.nav.scrolled {
  background: rgba(250, 249, 246, 0.96) !important;
  box-shadow: 0 2px 24px rgba(15, 23, 42, 0.08) !important;
}

/* ── Fix lisibilité headers sur fonds sombres ─────────────────────
   Le CSS d'origine a une variable --white qui pointe sur #1a1a1a
   (sémantique inversée — historique du framework). Sur la nouvelle
   palette dark navy ça donne du noir sur fond sombre = illisible.
   On force les couleurs claires sur les heros et sections sombres. */
.hero h1,
.hero p,
.cs-hero h1,
.cs-hero-sub,
.page-hero h1,
.page-hero p,
.final-cta h2,
.final-cta p,
.section.dark .sec-h,
.section.dark .sec-sub,
.section.dark p,
.vp-section.dark .sec-h,
.vp-section.dark .sec-sub {
  color: #ffffff !important;
}
.hero p,
.cs-hero-sub,
.page-hero p,
.final-cta p,
.section.dark .sec-sub,
.vp-section.dark .sec-sub {
  color: rgba(255, 255, 255, 0.72) !important;
}
/* Strong dans paragraphes hero : blanc plein pour highlight */
.hero p strong,
.cs-hero-sub strong,
.page-hero p strong,
.final-cta p strong {
  color: #ffffff !important;
}

/* Filet de sécurité : tout texte direct enfant des heros sombres
   doit être lisible (cas du H1, du pill, et de tout span/em qu'on
   aurait oublié dans les overrides ciblés). Ne s'applique pas
   aux <em> avec gradient text (background-clip: text). */
.hero h1, .hero h2, .hero h3,
.page-hero h1, .page-hero h2, .page-hero h3,
.cs-hero h1, .cs-hero h2, .cs-hero h3 {
  color: #ffffff !important;
}
.hero .pill, .page-hero .pill, .cs-hero .pill,
.hero .cs-pill, .cs-hero .cs-pill {
  /* Le pill garde sa couleur orange brand sur fond sombre — déjà OK */
  color: var(--accent, #FF6B35) !important;
}

/* Filet supplémentaire : tout texte direct dans une section sombre.
   Le CSS d'origine a --white: #1a1a1a (noir) qui devient illisible
   sur les fonds dark navy qu'on force via theme.css. */
.final-cta h2,
.final-cta h2 em,
.final-cta p,
.final-cta strong {
  color: #ffffff !important;
}
.final-cta p {
  color: rgba(255, 255, 255, 0.72) !important;
}
.final-cta h2 em {
  /* l'em garde un accent orange sur fond sombre */
  color: var(--accent, #FF6B35) !important;
}

/* Sections marketing avec background sombre forcé via inline style :
   les heading y restent en blanc même si elles ne sont pas .section.dark */
section[style*="dark-navy"] h1,
section[style*="dark-navy"] h2,
section[style*="dark-navy"] h3,
section[style*="0f0f13"] h1,
section[style*="0f0f13"] h2,
section[style*="0f0f13"] h3,
section[style*="1a1a2e"] h1,
section[style*="1a1a2e"] h2,
section[style*="1a1a2e"] h3 {
  color: #ffffff !important;
}
section[style*="dark-navy"] p,
section[style*="0f0f13"] p,
section[style*="1a1a2e"] p {
  color: rgba(255, 255, 255, 0.72) !important;
}
section[style*="dark-navy"] strong,
section[style*="0f0f13"] strong,
section[style*="1a1a2e"] strong {
  color: #ffffff !important;
}

/* ════════════════════════════════════════════════════════════════
   FILET ULTIME — couvre toute hiérarchie d'éléments dans n'importe
   quel parent au background dark navy (CSS d'origine ou inline).
   La spécificité est augmentée par double class et by attribute.
   ════════════════════════════════════════════════════════════════ */

/* Tout descendant text d'une zone à fond sombre — y compris les .pill
   en orange (qui ont leur propre color déjà) qu'on garde tel quel. */
.page-hero.page-hero h1,
.page-hero.page-hero h2,
.page-hero.page-hero h3,
.page-hero.page-hero h4,
.page-hero.page-hero h5,
.hero.hero h1,
.hero.hero h2,
.hero.hero h3,
.hero.hero p,
.cs-hero.cs-hero h1,
.cs-hero.cs-hero h2,
.cs-hero.cs-hero p {
  color: #ffffff !important;
}

/* H1/h2 au sein d'un parent ayant un background gradient via inline
   style contenant une des couleurs sombres typiques. Couvre les
   sections style="background:linear-gradient(...,#0f0f13,...)" etc. */
[style*="0f0f13"] h1, [style*="0f0f13"] h2, [style*="0f0f13"] h3,
[style*="0a1428"] h1, [style*="0a1428"] h2, [style*="0a1428"] h3,
[style*="0f1d36"] h1, [style*="0f1d36"] h2, [style*="0f1d36"] h3,
[style*="1a1a2e"] h1, [style*="1a1a2e"] h2, [style*="1a1a2e"] h3,
[style*="16213e"] h1, [style*="16213e"] h2, [style*="16213e"] h3,
[style*="122544"] h1, [style*="122544"] h2, [style*="122544"] h3 {
  color: #ffffff !important;
}

/* Le strong à l'intérieur des paragraphes de heros sombres reste
   blanc plein, pas le 72%. */
.page-hero p strong,
.hero p strong,
.hero-sub strong,
.cs-hero-sub strong,
.cs-hero p strong {
  color: #ffffff !important;
  opacity: 1 !important;
}

/* ════════════════════════════════════════════════════════════════
   CONTAINER — légère adaptation grands écrans
   On garde des bornes raisonnables — un container trop large rend
   le texte trop long à lire (>80 chars/ligne = fatigue oculaire).
   ════════════════════════════════════════════════════════════════ */

@media (min-width: 1600px) {
  .container { max-width: 1320px !important; }
}

/* ════════════════════════════════════════════════════════════════
   SECTIONS — pas de min-height forcé. On laisse le contenu couler
   naturellement selon sa propre hauteur (le CSS d'origine gère déjà
   un padding correct). Les heros gardent leur min-height: 100vh
   d'origine via le CSS embedded de chaque page.
   ════════════════════════════════════════════════════════════════ */


/* ════════════════════════════════════════════════════════════════
   REVEAL v2 — état initial + état révélé (classes pilotées par JS)
   ════════════════════════════════════════════════════════════════ */

.reveal,
.fade-up,
[data-reveal] {
  opacity: 0;
  transform: translate3d(0, 28px, 0);
  transition:
    opacity 0.85s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.85s cubic-bezier(0.22, 1, 0.36, 1);
}
.fx-in {
  opacity: 1 !important;
  transform: translate3d(0, 0, 0) !important;
}

/* Variante : reveal scale (cards) */
[data-reveal="scale"] {
  transform: translate3d(0, 14px, 0) scale(0.96);
}
[data-reveal="scale"].fx-in {
  transform: translate3d(0, 0, 0) scale(1) !important;
}

/* Variante : reveal slide-left/right */
[data-reveal="left"]  { transform: translate3d(-32px, 0, 0); }
[data-reveal="right"] { transform: translate3d( 32px, 0, 0); }

/* Reduced motion : pas d'animation */
@media (prefers-reduced-motion: reduce) {
  .reveal, .fade-up, [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ════════════════════════════════════════════════════════════════
   CARDS — hover lift + depth shadow (Webflow/Framer style)
   ════════════════════════════════════════════════════════════════ */

.problem-card,
.mod-chip,
.case-card,
.plan-card,
.tech-item {
  transition:
    transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.4s cubic-bezier(0.22, 1, 0.36, 1),
    border-color 0.3s ease;
}
.problem-card:hover,
.case-card:hover,
.plan-card:hover,
.tech-item:hover {
  transform: translate3d(0, -6px, 0);
  box-shadow:
    0 24px 60px -12px rgba(30,58,95,.18),
    0 8px 24px -8px rgba(30,58,95,.12);
}
.mod-chip:hover {
  transform: translate3d(0, -3px, 0);
  box-shadow: 0 12px 28px -8px rgba(255,107,53,.25);
}

/* ════════════════════════════════════════════════════════════════
   CTA HERO — glow expansion sur hover (classe Framer)
   ════════════════════════════════════════════════════════════════ */
.btn-hero {
  position: relative;
  overflow: visible;
}
.btn-hero::before {
  content: '';
  position: absolute; inset: 0;
  border-radius: inherit;
  background: inherit;
  filter: blur(20px);
  opacity: 0;
  z-index: -1;
  transition: opacity 0.35s ease;
}
.btn-hero:hover::before { opacity: 0.6; }

/* ════════════════════════════════════════════════════════════════
   STAT VALUES — police plus marquée pour les compteurs
   ════════════════════════════════════════════════════════════════ */
.stat-val {
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.04em;
}

/* ════════════════════════════════════════════════════════════════
   MARQUEE INFINIE — bandeau "Ils nous font confiance"
   Track dupliqué côté JS ou en HTML (2× le contenu en boucle).
   Pause au hover (l'utilisateur peut lire).
   ════════════════════════════════════════════════════════════════ */
.marquee {
  overflow: hidden;
  width: 100%;
  position: relative;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
  padding: 1.5rem 0;
}
.marquee-track {
  display: flex;
  gap: 4rem;
  animation: marquee-scroll 40s linear infinite;
  width: max-content;
}
.marquee:hover .marquee-track {
  animation-play-state: paused;
}
.marquee-item {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 1.05rem;
  font-weight: 700;
  color: rgba(255,255,255,0.45);
  white-space: nowrap;
  letter-spacing: -0.01em;
  transition: color 0.3s ease;
}
.marquee-item:hover { color: rgba(255,255,255,0.85); }
.marquee-item i {
  font-size: 1.4rem;
  color: var(--accent, #FF6B35);
}
@keyframes marquee-scroll {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .marquee-track { animation: none; }
}

/* ════════════════════════════════════════════════════════════════
   HORIZONTAL STICKY SCROLL — process pages
   ════════════════════════════════════════════════════════════════ */
[data-horizontal-scroll] .hsection {
  background: linear-gradient(180deg, var(--dark-navy-2) 0%, var(--dark-navy) 100%);
  color: #fff;
}
[data-horizontal-scroll] .htrack {
  padding: 0 8vw;
  gap: 2.5rem;
}
[data-horizontal-scroll] .hpanel {
  flex-shrink: 0;
  width: 70vw;
  max-width: 720px;
  min-height: 60vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 2.5rem;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 1.5rem;
  backdrop-filter: blur(8px);
}
[data-horizontal-scroll] .hpanel h3 {
  font-size: clamp(1.5rem, 2.4vw, 2.25rem);
  font-weight: 800;
  margin-bottom: 1rem;
  letter-spacing: -0.02em;
}
[data-horizontal-scroll] .hpanel .hp-num {
  font-size: 0.78rem;
  font-weight: 800;
  color: var(--accent, #FF6B35);
  letter-spacing: 0.2em;
  margin-bottom: 0.75rem;
  text-transform: uppercase;
}
[data-horizontal-scroll] .hpanel p {
  font-size: 1rem;
  line-height: 1.65;
  color: rgba(255,255,255,0.7);
}
/* Mobile : retombe en stack vertical normal */
@media (max-width: 1024px) {
  [data-horizontal-scroll] { height: auto !important; }
  [data-horizontal-scroll] .hsection {
    position: relative !important;
    height: auto !important;
    overflow: visible !important;
    padding: 4rem 0;
  }
  [data-horizontal-scroll] .htrack {
    flex-direction: column !important;
    transform: none !important;
    padding: 0 1.5rem;
  }
  [data-horizontal-scroll] .hpanel {
    width: 100% !important;
    min-height: auto;
  }
}

/* ════════════════════════════════════════════════════════════════
   VIEW TRANSITIONS API
   ════════════════════════════════════════════════════════════════ */
@view-transition { navigation: auto; }
::view-transition-old(root) {
  animation: vt-fade-out 0.25s cubic-bezier(0.4, 0, 1, 1) both;
}
::view-transition-new(root) {
  animation: vt-fade-in 0.35s cubic-bezier(0, 0, 0.2, 1) both;
}
@keyframes vt-fade-out {
  to { opacity: 0; transform: translate3d(0, -8px, 0); }
}
@keyframes vt-fade-in {
  from { opacity: 0; transform: translate3d(0, 12px, 0); }
}