/* ══════════════════════════════════════════════════════════════════
   STRATÉGIKA DIGITAL — Brand v2  ·  brand-v2.css
   Nouvelle DA : Canard Profond / Signal / Tiffany + Corail CTA
   Clash Display (titres) + General Sans (texte)
   ══════════════════════════════════════════════════════════════════ */

/* ── 0. FONTS (Fontshare CDN) ───────────────────────────────────── */
@import url("https://api.fontshare.com/v2/css?f[]=clash-display@600,700&f[]=general-sans@400,500,600&display=swap");

/* ── 1. CSS VARIABLES ────────────────────────────────────────────── */
:root {
  --black:        #071E1C;
  --dark2:        #0D2927;
  --border:       rgba(15, 93, 84, 0.42);
  --accent-deep:  #0F5D54;
  --accent:       #198591;
  --accent2:      #0ABAB5;
  --accent-glow:  rgba(25, 133, 145, 0.18);
  --coral:        #FF6B4A;
  --coral-glow:   rgba(255, 107, 74, 0.22);
  --ivory:        #F2EEE3;
  --text:         #F2EEE3;
  --text-muted:   rgba(242, 238, 227, 0.60);
  --text-dim:     rgba(242, 238, 227, 0.36);
  --encre:        #0A1716;
  --font:         'General Sans', 'Montserrat', system-ui, sans-serif;
  --font-display: 'Clash Display', 'General Sans', 'Montserrat', system-ui, sans-serif;
}

/* ── 2. BASE ─────────────────────────────────────────────────────── */
body { font-family: var(--font); background: var(--black); }

/* ── 3. TITRES → CLASH DISPLAY ───────────────────────────────────── */
h1, h2, h3,
.hero__title, .hero__eyebrow,
.section-title, .section__title,
.service-card__title,
.conseil-card__title,
.step__title,
.expertise__content h2,
.diagnostic__intro h2,
.vision__title,
.cta-section h2, .cta-section__title,
.hp-pipeline__title,
.positioning__item h3 {
  font-family: var(--font-display);
  letter-spacing: -0.02em;
}

/* ── 4. BTN PRIMARY → CORAIL ─────────────────────────────────────── */
.btn--primary {
  background: linear-gradient(135deg, #FF6B4A 0%, #ff8a6a 100%) !important;
  box-shadow: 0 4px 20px rgba(255, 107, 74, 0.28) !important;
}
.btn--primary:hover {
  background: linear-gradient(135deg, #e85530 0%, #FF6B4A 100%) !important;
  box-shadow: 0 8px 32px rgba(255, 107, 74, 0.44) !important;
  transform: translateY(-2px);
}

/* ── 5. PROGRESS BAR ─────────────────────────────────────────────── */
.sd-progress {
  background: linear-gradient(90deg, #0F5D54 0%, #0ABAB5 50%, #0F5D54 100%);
}

/* ── 6. CURSOR ───────────────────────────────────────────────────── */
.sd-cursor { background: rgba(10, 186, 181, 0.9); }
.sd-cursor-ring { border: 1.5px solid rgba(10, 186, 181, 0.42); }
.sd-cursor-ring.is-hovered { border-color: rgba(10, 186, 181, 0.75); }

/* ── 7. SCAN LINE ────────────────────────────────────────────────── */
.sd-scan-line {
  background: linear-gradient(
    90deg,
    transparent 5%,
    rgba(10, 186, 181, 0.4) 35%,
    rgba(10, 186, 181, 0.7) 50%,
    rgba(10, 186, 181, 0.4) 65%,
    transparent 95%
  );
}

/* ── 8. GEO DOTS ─────────────────────────────────────────────────── */
.sd-geo-dot {
  background: rgba(10, 186, 181, 0.3);
  box-shadow: 0 0 10px rgba(10, 186, 181, 0.25);
}

/* ── 9. SPOTLIGHT ────────────────────────────────────────────────── */
.sd-spotlight {
  background: radial-gradient(
    circle at var(--mx, 50%) var(--my, 50%),
    rgba(10, 186, 181, 0.07) 0%,
    transparent 58%
  );
}

/* ── 10. CTA CIRCLES / DOTS ──────────────────────────────────────── */
.sd-cta-circle { border-color: rgba(10, 186, 181, 0.08); }
.sd-cta-sq {
  border-color: rgba(10, 186, 181, 0.07);
  background: rgba(10, 186, 181, 0.22);
}
.sd-cta-dot {
  background: rgba(10, 186, 181, 0.22);
  box-shadow: 0 0 12px rgba(10, 186, 181, 0.25);
}

/* ── 11. CARD HOVERS ─────────────────────────────────────────────── */
.service-card:hover {
  box-shadow: 0 24px 56px rgba(25,133,145,.14), 0 4px 16px rgba(0,0,0,.3), inset 0 1px 0 rgba(10,186,181,.06) !important;
  border-color: rgba(10, 186, 181, 0.38) !important;
}
.conseil-card:hover {
  border-color: rgba(10, 186, 181, 0.3) !important;
  box-shadow: -6px 0 32px rgba(25,133,145,.1) !important;
}
.positioning__item:hover {
  border-color: rgba(25,133,145,.45) !important;
  box-shadow: 0 16px 40px rgba(25,133,145,.1) !important;
}
.step:hover {
  box-shadow: 0 16px 40px rgba(25,133,145,.18) !important;
  border-color: rgba(10, 186, 181, 0.45) !important;
}
.hp-pipe__card:hover {
  box-shadow: 0 12px 32px rgba(25,133,145,.12) !important;
  border-left-color: var(--accent2) !important;
}
.expertise__portrait-wrapper:hover {
  box-shadow: 0 20px 48px rgba(25,133,145,.14) !important;
  border-color: rgba(10, 186, 181, 0.38) !important;
}

/* ── 12. NAV UNDERLINE ───────────────────────────────────────────── */
.nav__links li:not(.nav__dropdown):not(.nav__has-mega) > a:not(.nav__cta)::after {
  background: #0ABAB5;
}

/* ── 13. KEYFRAMES REDÉFINIES (écrase design-v2.css) ────────────── */
@keyframes sdRippleBeat {
  0%, 100% { box-shadow: 0 0 0 0 rgba(10,186,181,0); }
  50%       { box-shadow: 0 0 18px 4px rgba(10,186,181,.1); }
}
@keyframes sdGlowPulse {
  0%, 100% { box-shadow: 0 4px 20px rgba(255,107,74,.3); }
  50%       { box-shadow: 0 8px 36px rgba(255,107,74,.55); }
}

/* ── 14. NAV FIX — font metrics change ──────────────────────────── */
.nav__links a,
.nav__links li > a {
  white-space: nowrap;
}

/* ── 15. LOGO SIZING ─────────────────────────────────────────────── */
.nav__logo img,
.nav__logo img.logo--light,
.nav__logo img.logo--dark,
.footer__brand img {
  height: 34px !important;
  width: 160px !important;
  object-fit: contain;
  object-position: left center;
}