/*
Theme Name: Confluens
Theme URI: https://confluens.dev
Author: Confluens
Description: Thème WordPress minimal pour confluens.dev — fournit l'habillage global (en-tête, navigation, pied de page, design system CSS) en fidélité avec site/index.html du dépôt de production. Le contenu de chaque page/section reste géré dans WordPress (blocs Gutenberg), poussé au fur et à mesure par l'agent wordpress-publisher.
Version: 0.1.0
Requires at least: 6.5
Requires PHP: 7.4
Text Domain: confluens
*/

/* ==========================================================================
   Design system partagé — copie fidèle de la section 1-5 de site/styles.css
   (tokens, reset, visuels partagés, navigation, boutons). Les styles propres
   à chaque section (hero, bifurcation, réassurance...) restent poussés avec
   le contenu de la page par wordpress-publisher, pas ici.
   ========================================================================== */

:root {
  --color-bg:             #060504;
  --color-bg-alt:         #120e0d;
  --color-bg-elevated:    #17110f;
  --color-text-primary:   #e2eefa;
  --color-text-secondary: #afc3d6;
  --color-text-muted:     #8fa2b5;
  --color-surface:        #2a3036;
  --color-border:         color-mix(in srgb, #e2eefa 18%, transparent);
  --color-border-soft:    color-mix(in srgb, #e2eefa 10%, transparent);

  --accent-purple:  #a261ff;
  --accent-red:     #ff4a4a;
  --accent-orange:  #fd874a;
  --accent-yellow:  #fcee47;
  --accent-pink:    #ff7bf6;
  --color-focus:    #4d65ff;
  --accent-sober: var(--color-focus);

  --gradient-spectral: linear-gradient(
    90deg,
    var(--accent-purple), var(--accent-red), var(--accent-orange),
    var(--accent-yellow), var(--accent-pink), var(--accent-purple)
  );
  --gradient-confluence: linear-gradient(135deg, var(--accent-sober), var(--accent-purple));

  --glass-bg:     color-mix(in srgb, #e2eefa 1%, transparent);
  --glass-blur:   blur(100px);
  --glass-border: color-mix(in srgb, #e2eefa 18%, transparent);

  --font-primary: -apple-system, BlinkMacSystemFont, "Segoe UI", "Inter",
    "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "Menlo", "Consolas", monospace;

  --text-h1:      clamp(2.5rem, 2rem + 3vw, 4.25rem);
  --text-h2:      clamp(1.9rem, 1.5rem + 2vw, 3rem);
  --text-h3:      clamp(1.4rem, 1.15rem + 1.2vw, 2rem);
  --text-h4:      clamp(1.2rem, 1.05rem + 0.7vw, 1.6rem);
  --text-display: clamp(2.75rem, 1.8rem + 5vw, 6rem);

  --text-body:    1rem;
  --text-medium:  1.125rem;
  --text-large:   1.25rem;
  --text-small:   0.875rem;
  --text-xs:      0.75rem;

  --font-weight-heading: 400;
  --font-weight-body:    400;
  --letter-spacing-allcaps: -0.01em;

  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2rem;
  --space-5: 2.5rem;
  --space-6: 3rem;
  --space-8: 4rem;

  --space-section-sm:  2rem;
  --space-section-md:  3rem;
  --space-section-lg:  5rem;
  --space-section-xl:  7rem;
  --space-section-xxl: 9rem;

  --container-large:  79rem;
  --container-medium: 58rem;
  --container-small:  40rem;
  --padding-global:   5.5rem;

  --radius-xs:   4px;
  --radius-sm:   12px;
  --radius-md:   20px;
  --radius-lg:   32px;
  --radius-xl:   48px;
  --radius-2xl:  80px;
  --radius-pill: 9999px;

  --z-content:       1;
  --z-decor:         2;
  --z-top-bar:       50;
  --z-menu:          70;
  --z-overlay:       90;

  --duration-gradient-btn:   30s;
  --duration-gradient-text: 100s;
  --duration-gradient-hover: 2s;
  --duration-float:    20s;
  --ease-float:        ease-in-out;
  --ease-enter: cubic-bezier(0.165, 0.84, 0.44, 1);
  --duration-hover:  0.2s;
  --duration-medium: 0.4s;
  --duration-slow:   0.6s;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background-color: var(--color-bg);
  color: var(--color-text-primary);
  font-family: var(--font-primary);
  font-size: var(--text-body);
  font-weight: var(--font-weight-body);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2, h3, h4 { font-weight: var(--font-weight-heading); margin: 0; text-wrap: balance; }
h1 { font-size: var(--text-h1); line-height: 1.05; }
h2 { font-size: var(--text-h2); line-height: 1.08; }
h3 { font-size: var(--text-h3); line-height: 1.15; }
p  { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button { font: inherit; color: inherit; }
svg { display: block; }

.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  z-index: var(--z-overlay);
  background: var(--color-bg-alt);
  color: var(--color-text-primary);
  padding: 0.75rem 1.25rem;
  border-radius: var(--radius-sm);
}
.skip-link:focus { left: var(--space-2); top: var(--space-2); }

:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 3px;
}

.container-large  { max-width: var(--container-large);  margin-inline: auto; padding-inline: var(--padding-global); }
.container-medium { max-width: var(--container-medium); margin-inline: auto; padding-inline: var(--padding-global); }
.container-small  { max-width: var(--container-small);  margin-inline: auto; padding-inline: var(--padding-global); }

@media (max-width: 991px) {
  .container-large, .container-medium, .container-small { padding-inline: 2.5rem; }
}
@media (max-width: 767px) {
  .container-large, .container-medium, .container-small { padding-inline: 1.5rem; }
}

.section { padding-block: var(--space-section-xl); position: relative; }
.section-header { max-width: 42rem; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.section-header--center { max-width: 46rem; margin-inline: auto; text-align: center; }
.section-title { margin-top: var(--space-2); }
.eyebrow {
  display: inline-block;
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-allcaps);
  color: var(--color-text-muted);
  margin-bottom: var(--space-2);
}
.section-lead { margin-top: var(--space-3); color: var(--color-text-secondary); font-size: var(--text-medium); max-width: 46ch; }
.section-lead--center { margin-inline: auto; }

section { position: relative; }

.gradient-text--spectral-animated {
  background-image: var(--gradient-spectral);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--accent-purple);
  font-style: italic;
  animation: gradient-move var(--duration-gradient-text) linear infinite;
  display: inline;
}
@supports not (-webkit-background-clip: text) {
  .gradient-text--spectral-animated { -webkit-text-fill-color: unset; background-image: none; }
}

@keyframes gradient-move {
  0%   { background-position: 0% center; }
  100% { background-position: 200% center; }
}
@keyframes float-up-down {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-10%); }
}

.float-element { animation: float-up-down var(--duration-float) var(--ease-float) infinite; }

.glass-surface {
  background-color: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
}
@supports not (backdrop-filter: blur(1px)) {
  .glass-surface { background-color: color-mix(in srgb, var(--color-bg-alt) 92%, transparent); }
}

.glass-bg-deco {
  position: absolute;
  pointer-events: none;
  border-radius: 100%;
  opacity: 0.3;
  filter: blur(4px);
  animation: float-up-down var(--duration-float) var(--ease-float) infinite;
  z-index: var(--z-decor);
  background: radial-gradient(circle, var(--accent-purple) 0%, transparent 70%);
}

/* ──────────────────────────────────────────────────────────────────────
   NAVIGATION — comp-nav-sticky-hide-on-scroll (variante dark)
   + pattern-nav-frosted-glass
   ────────────────────────────────────────────────────────────────────── */
.nav {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: var(--z-top-bar);
  min-height: 4.5rem;
  background-color: transparent;
  border-bottom: 1px solid transparent;
  transition: background-color var(--duration-medium) ease,
              backdrop-filter var(--duration-medium) ease,
              transform var(--duration-hover) ease,
              border-color var(--duration-medium) ease;
}
.nav.is-scrolled {
  background-color: color-mix(in srgb, var(--color-bg-alt) 85%, transparent);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom-color: var(--color-border-soft);
}
.nav.is-hidden { transform: translateY(-100%); }

.nav__inner {
  max-width: var(--container-large);
  margin-inline: auto;
  padding-inline: var(--padding-global);
  height: 4.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}
@media (max-width: 991px) { .nav__inner { padding-inline: 2.5rem; } }
@media (max-width: 767px) { .nav__inner { padding-inline: 1.5rem; } }

.nav__logo {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--text-small);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  text-decoration: none;
  color: var(--color-text-primary);
}
.nav__logo-mark { flex-shrink: 0; color: var(--color-text-primary); }

.nav__links { display: flex; gap: var(--space-4); }
.nav__link {
  position: relative;
  text-decoration: none;
  font-size: var(--text-small);
  color: var(--color-text-secondary);
  transition: color var(--duration-hover) ease;
  padding-block: 0.25rem;
}
.nav__link:hover, .nav__link:focus-visible { color: var(--color-text-primary); }

.nav__actions { display: flex; align-items: center; gap: var(--space-3); }

.nav__burger {
  display: none;
  background: none;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  width: 2.5rem;
  height: 2.5rem;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.nav__burger svg { width: 1.25rem; height: 1.25rem; }

@media (max-width: 900px) {
  .nav__links { display: none; }
  .nav__actions .btn-gradient { display: none; }
  .nav__burger { display: inline-flex; }
}

.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: var(--z-menu);
  background-color: var(--color-bg-alt);
  padding: 6rem 1.5rem 2rem;
  transform: translateY(-100%);
  transition: transform var(--duration-slow) var(--ease-enter);
}
.mobile-menu.is-open { transform: translateY(0); }
.mobile-menu__links { display: flex; flex-direction: column; gap: var(--space-4); }
.mobile-menu__links a { text-decoration: none; font-size: var(--text-h4); color: var(--color-text-primary); }
.mobile-menu__close {
  position: absolute;
  top: 1.5rem; right: 1.5rem;
  background: none;
  border: 1px solid var(--color-border);
  border-radius: 50%;
  width: 2.5rem; height: 2.5rem;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
}

/* ──────────────────────────────────────────────────────────────────────
   BOUTONS — comp-button-gradient-animated-arrow-swap
   ────────────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.85em 1.6em;
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  cursor: pointer;
  font-size: var(--text-small);
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--duration-medium) ease,
              color var(--duration-medium) ease,
              border-color var(--duration-medium) ease;
}
.btn--secondary {
  background-color: transparent;
  border-color: var(--color-text-primary);
  color: var(--color-text-primary);
}
.btn--secondary:hover { background-color: var(--color-text-primary); color: var(--color-bg); }

.btn-gradient {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.85em 1.6em;
  border-radius: var(--radius-pill);
  overflow: hidden;
  text-decoration: none;
  cursor: pointer;
  border: none;
  background: var(--gradient-spectral);
  background-size: 200% auto;
  animation: gradient-move var(--duration-gradient-btn) linear infinite;
  font-style: italic;
  text-transform: uppercase;
  font-size: var(--text-small);
  letter-spacing: var(--letter-spacing-allcaps);
  color: var(--color-bg);
}
.btn-gradient:hover { animation-duration: var(--duration-gradient-hover); }
.btn-gradient__arrow-wrap { position: relative; width: 1em; height: 1em; overflow: hidden; flex-shrink: 0; }
.btn-gradient__arrow { position: absolute; inset: 0; transition: transform 0.3s ease; }
.btn-gradient__arrow.is-out { transform: translateX(0); }
.btn-gradient:hover .btn-gradient__arrow.is-out { transform: translateX(110%); }
.btn-gradient__arrow.is-in { transform: translateX(-110%); }
.btn-gradient:hover .btn-gradient__arrow.is-in { transform: translateX(0); }
.btn-gradient:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }

.btn-gradient-inline__arrow-wrap { position: relative; display: inline-flex; width: 1em; height: 1em; overflow: hidden; flex-shrink: 0; vertical-align: middle; }
.btn-gradient-inline__arrow-wrap svg { position: absolute; inset: 0; transition: transform 0.3s ease; color: #fff; }
.btn-gradient-inline__arrow-wrap .is-out { transform: translateX(0); }
.btn-gradient-inline__arrow-wrap .is-in { transform: translateX(-110%); }
.confluence-card__cta:hover .btn-gradient-inline__arrow-wrap .is-out,
.confluence-card__cta:focus-visible .btn-gradient-inline__arrow-wrap .is-out { transform: translateX(110%); }
.confluence-card__cta:hover .btn-gradient-inline__arrow-wrap .is-in,
.confluence-card__cta:focus-visible .btn-gradient-inline__arrow-wrap .is-in { transform: translateX(0); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}