/* ==========================================================================
   Portage Partner 2026 — surcouche sombre immersive (A1 + A3)
   Chargée APRÈS main.css. Tout est scopé sous body.pp-dark.
   ========================================================================== */

body.pp-dark {
  --background: #070b16;
  --foreground: #e8ecf4;
  --card: rgba(255, 255, 255, 0.045);
  --card-foreground: #e8ecf4;
  --popover: #0d1322;
  --popover-foreground: #e8ecf4;
  --primary: #c8332b;
  --primary-foreground: #ffffff;
  --secondary: rgba(255, 255, 255, 0.07);
  --secondary-foreground: #f0e3c8;
  --muted: rgba(255, 255, 255, 0.05);
  --muted-foreground: #93a1bd;
  --accent: #d9a441;
  --accent-foreground: #1f1710;
  --border: rgba(255, 255, 255, 0.12);
  --input: rgba(255, 255, 255, 0.14);
  --ring: #d9a441;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 18px 60px rgba(0, 0, 0, 0.55);
  color: var(--foreground);
  background: var(--background);
}

/* --------------------------------------------------------------------------
   Aurora organique (A3) + grain cinéma — fixes, derrière tout le contenu
   -------------------------------------------------------------------------- */

body.pp-dark .pp-aurora {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  contain: strict;
  transform: translateZ(0);
}

body.pp-dark .pp-aurora__blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(64px);
  opacity: 0.6;
  will-change: transform;
  transform: translateZ(0);
  backface-visibility: hidden;
}

body.pp-dark .pp-aurora__blob--red {
  width: 55vw;
  height: 55vw;
  background: radial-gradient(circle, rgba(200, 51, 43, 0.55) 0%, transparent 70%);
  top: -20vw;
  left: -12vw;
  animation: pp-morph-red 19s ease-in-out infinite alternate;
}

body.pp-dark .pp-aurora__blob--gold {
  width: 48vw;
  height: 48vw;
  background: radial-gradient(circle, rgba(217, 164, 65, 0.4) 0%, transparent 70%);
  top: 30vh;
  right: -16vw;
  animation: pp-morph-gold 23s ease-in-out infinite alternate;
}

body.pp-dark .pp-aurora__blob--blue {
  width: 42vw;
  height: 42vw;
  background: radial-gradient(circle, rgba(74, 58, 255, 0.3) 0%, transparent 70%);
  bottom: -18vw;
  left: 20vw;
  animation: pp-morph-blue 27s ease-in-out infinite alternate;
}

@keyframes pp-morph-red {
  from { transform: translate(0, 0) scale(1); }
  to { transform: translate(8vw, 6vh) scale(1.25); }
}

@keyframes pp-morph-gold {
  from { transform: translate(0, 0) scale(1.15); }
  to { transform: translate(-9vw, -5vh) scale(0.9); }
}

@keyframes pp-morph-blue {
  from { transform: translate(0, 0) scale(1); }
  to { transform: translate(-6vw, -8vh) scale(1.2); }
}

body.pp-dark .pp-grain {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.16;
  background-image: radial-gradient(rgba(255, 255, 255, 0.14) 1px, transparent 1px);
  background-size: 4px 4px;
}

body.pp-dark .site-main,
body.pp-dark .site-footer {
  position: relative;
  z-index: 2;
}

/* --------------------------------------------------------------------------
   Header glassmorphism qui se condense au scroll (classe posée par animations.js)
   -------------------------------------------------------------------------- */

body.pp-dark .site-header {
  background: rgba(7, 11, 22, 0.6);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(6px);
  transition: background 0.35s ease;
}

body.pp-dark .site-header__inner {
  min-height: 98px;
  transition: min-height 0.35s ease;
}

body.pp-dark .site-header.is-condensed {
  background: rgba(7, 11, 22, 0.85);
}

body.pp-dark .site-header.is-condensed .site-header__inner {
  min-height: 68px;
}

body.pp-dark .site-brand img {
  background: rgba(255, 255, 255, 0.94);
  border-radius: 10px;
  padding: 5px 10px;
  filter: drop-shadow(0 0 12px rgba(255, 255, 255, 0.15));
}

body.pp-dark .primary-menu a {
  position: relative;
  color: var(--foreground);
}

body.pp-dark .primary-menu a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -4px;
  height: 2px;
  width: 100%;
  background: linear-gradient(90deg, #c8332b, #d9a441);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}

body.pp-dark .primary-menu a:hover::after,
body.pp-dark .primary-menu a:focus-visible::after {
  transform: scaleX(1);
}

body.pp-dark .nav-toggle__bar {
  background: var(--foreground);
}

/* --------------------------------------------------------------------------
   Typographie : dégradé animé rouge → or sur les mots clés
   -------------------------------------------------------------------------- */

body.pp-dark h1 em,
body.pp-dark h2 em,
body.pp-dark .pp-gradient-text {
  font-style: normal;
  background: linear-gradient(90deg, #e4574f, #d9a441, #e4574f);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: pp-grad-slide 5s linear infinite;
}

@keyframes pp-grad-slide {
  to { background-position: 200% 0; }
}

/* Découpe mot-à-mot (posée par animations.js sur [data-animate="words"]) */
body.pp-dark .pp-word {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
}

body.pp-dark .pp-word__inner {
  display: inline-block;
  will-change: transform;
}

/* --------------------------------------------------------------------------
   Hero immersif (A1) : la scène WebGL remplace la photo
   -------------------------------------------------------------------------- */

body.pp-dark .future-hero {
  position: relative;
  background: radial-gradient(120% 120% at 75% 0%, #141d36 0%, #070b16 65%);
  overflow: hidden;
}

body.pp-dark .future-hero__shade {
  background: linear-gradient(180deg, transparent 40%, rgba(7, 11, 22, 0.85) 100%);
}

body.pp-dark .future-hero__scene {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

body.pp-dark .future-hero__scene canvas {
  display: block;
  width: 100%;
  height: 100%;
}

body.pp-dark .future-hero__inner {
  position: relative;
  z-index: 2;
}

body.pp-dark .future-hero h1 {
  color: #ffffff;
  text-shadow: 0 4px 40px rgba(0, 0, 0, 0.6);
}

body.pp-dark .future-hero__lead {
  color: #b8c2d9;
}

/* --------------------------------------------------------------------------
   Composants UI sur fond sombre
   -------------------------------------------------------------------------- */

body.pp-dark .ui-card,
body.pp-dark .control-panel,
body.pp-dark .trust-card {
  background: var(--card);
  border: 1px solid var(--border);
  color: var(--card-foreground);
  backdrop-filter: blur(6px);
  box-shadow: var(--shadow-md);
}

body.pp-dark .ui-card {
  transition: border-color 0.3s ease, transform 0.3s ease;
}

body.pp-dark .ui-card:hover {
  border-color: rgba(217, 164, 65, 0.45);
  transform: translateY(-4px);
}

body.pp-dark .ui-button--primary {
  position: relative;
  overflow: hidden;
  background: linear-gradient(90deg, #c8332b, #e4574f);
  color: #ffffff;
  border: none;
}

body.pp-dark .ui-button--primary::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, 0.35) 50%, transparent 70%);
  transform: translateX(-110%);
}

body.pp-dark .ui-button--primary:hover::after {
  animation: pp-shine 0.9s ease forwards;
}

@keyframes pp-shine {
  to { transform: translateX(110%); }
}

body.pp-dark .ui-button--secondary,
body.pp-dark .ui-button--outline-light {
  background: rgba(255, 255, 255, 0.07);
  color: var(--foreground);
  border: 1px solid var(--border);
}

body.pp-dark .ui-button--secondary:hover,
body.pp-dark .ui-button--outline-light:hover {
  border-color: rgba(217, 164, 65, 0.6);
}

body.pp-dark .ui-badge {
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid var(--border);
  color: var(--foreground);
}

body.pp-dark .ui-badge--gold {
  background: rgba(217, 164, 65, 0.14);
  border-color: rgba(217, 164, 65, 0.5);
  color: #f0d9a8;
}

body.pp-dark .ui-badge--outline {
  background: transparent;
}

body.pp-dark .section__header p,
body.pp-dark .section p {
  color: var(--muted-foreground);
}

body.pp-dark .section h2,
body.pp-dark .section h3 {
  color: var(--foreground);
}

/* Bandeau promesse */
body.pp-dark .signal-strip {
  background: rgba(255, 255, 255, 0.03);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

body.pp-dark .signal-strip span {
  color: var(--muted-foreground);
}

/* Étapes méthode */
body.pp-dark .workflow-step {
  background: var(--card);
  border: 1px solid var(--border);
}

body.pp-dark .workflow-step > span {
  color: #d9a441;
}

/* Mini dashboard */
body.pp-dark .mini-dashboard {
  background: rgba(13, 19, 34, 0.85);
  border: 1px solid var(--border);
}

body.pp-dark .mini-dashboard__rows span {
  transform-origin: left;
}

/* FAQ / accordéons */
body.pp-dark .accordion__item {
  background: var(--card);
  border: 1px solid var(--border);
}

body.pp-dark .accordion__item summary {
  color: var(--foreground);
}

/* CTA final baigné d'aurora */
body.pp-dark .final-cta {
  position: relative;
  background:
    radial-gradient(60% 120% at 20% 0%, rgba(200, 51, 43, 0.35) 0%, transparent 60%),
    radial-gradient(50% 100% at 85% 100%, rgba(217, 164, 65, 0.3) 0%, transparent 60%),
    #0a0f1d;
  overflow: hidden;
}

/* Footer */
body.pp-dark .site-footer {
  background: #05080f;
  border-top: 1px solid var(--border);
  color: var(--muted-foreground);
}

/* --------------------------------------------------------------------------
   Simulateur : champs lumineux + résultats
   -------------------------------------------------------------------------- */

body.pp-dark .simulator-form,
body.pp-dark .simulator-results {
  background: var(--card);
  border: 1px solid var(--border);
  backdrop-filter: blur(6px);
}

body.pp-dark .amount-field input {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--input);
  color: var(--foreground);
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

body.pp-dark .amount-field input:focus {
  border-color: #d9a441;
  box-shadow: 0 0 0 3px rgba(217, 164, 65, 0.25), 0 0 24px rgba(217, 164, 65, 0.18);
  outline: none;
}

body.pp-dark .simulator-presets__button {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--border);
  color: var(--foreground);
}

body.pp-dark .simulator-presets__button.is-active {
  background: linear-gradient(90deg, #c8332b, #e4574f);
  border-color: transparent;
  color: #ffffff;
}

body.pp-dark .result-highlight strong[data-result] {
  color: #5dd39e;
}

body.pp-dark .result-card strong[data-result] {
  color: var(--foreground);
}

/* --------------------------------------------------------------------------
   Rendez-vous
   -------------------------------------------------------------------------- */

body.pp-dark .appointment-hero {
  background: radial-gradient(100% 120% at 70% 0%, #141d36 0%, #070b16 70%);
}

body.pp-dark .appointment-booking,
body.pp-dark .appointment-checklist {
  background: var(--card);
  border: 1px solid var(--border);
}

/* --------------------------------------------------------------------------
   États initiaux des éléments animés.
   La classe pp-anim-ready est posée sur <html> par animations.js UNIQUEMENT
   quand GSAP va animer : sans JS ou en reduced-motion, tout reste visible.
   -------------------------------------------------------------------------- */

html.pp-anim-ready body.pp-dark [data-animate="rise"] {
  opacity: 0;
}

html.pp-anim-ready body.pp-dark .pp-word__inner {
  transform: translateY(110%);
}

/* --------------------------------------------------------------------------
   prefers-reduced-motion : on coupe tout mouvement décoratif
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  body.pp-dark .pp-aurora__blob,
  body.pp-dark h1 em,
  body.pp-dark h2 em,
  body.pp-dark .pp-gradient-text {
    animation: none;
  }

  body.pp-dark .ui-card:hover {
    transform: none;
  }

  body.pp-dark .pp-word__inner {
    will-change: auto;
  }

  body.pp-dark *,
  body.pp-dark *::before,
  body.pp-dark *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* --------------------------------------------------------------------------
   Mobile : aurora allégée
   -------------------------------------------------------------------------- */

@media (max-width: 899px) {
  body.pp-dark .pp-aurora__blob {
    filter: blur(60px);
    opacity: 0.35;
    mix-blend-mode: normal;
  }

  body.pp-dark .pp-grain {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   Correctif contraste : .home-future peint un fond CLAIR (gradient #fbfbfa).
   Les règles pp-dark définissent un texte clair -> illisible sur ces sections.
   On restaure localement la palette claire pour les sections sur fond clair
   (le hero sombre .future-hero et le CTA final .final-cta ne sont pas visés).
   -------------------------------------------------------------------------- */
body.pp-dark .home-future .section,
body.pp-dark .home-future .signal-strip,
body.pp-dark .home-future .image-rail {
  --foreground: #17232b;
  --muted-foreground: #5f6f78;
  --card: #ffffff;
  --card-foreground: #17232b;
  --secondary: #f6f0eb;
  --secondary-foreground: #781f0c;
  --border: #dce3e2;
  color: var(--foreground);
}

body.pp-dark .home-future .section h2,
body.pp-dark .home-future .section h3,
body.pp-dark .home-future .signal-strip h2,
body.pp-dark .home-future .signal-strip h3 {
  color: var(--foreground);
}

body.pp-dark .home-future .signal-strip {
  background: var(--secondary);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

/* --------------------------------------------------------------------------
   Correctif contraste (portail client) : les plugins maison (portail,
   timesheets, documents) rendent des cartes BLANCHES ; les règles pp-dark
   passent les titres en clair. On force la palette claire dans ces blocs.
   -------------------------------------------------------------------------- */
body.pp-dark .pport,
body.pp-dark .pdoc,
body.pp-dark .pts-fe {
  --foreground: #17232b;
  --muted-foreground: #5f6f78;
  color: #17232b;
}

body.pp-dark .pport h1,
body.pp-dark .pport h2,
body.pp-dark .pport h3,
body.pp-dark .pport h4,
body.pp-dark .pdoc h1,
body.pp-dark .pdoc h2,
body.pp-dark .pdoc h3,
body.pp-dark .pdoc h4,
body.pp-dark .pts-fe h1,
body.pp-dark .pts-fe h2,
body.pp-dark .pts-fe h3,
body.pp-dark .pts-fe h4 {
  color: #17232b;
}