/* ══════════════════════════════════════════════════════════════════
   STRATÉGIKA DIGITAL — Design System v2  ·  design-v2.css
   Direction artistique enrichie : animations premium
   Fichier additionnel — ne remplace PAS style.css
   Chargé après style.css et après le bloc <style> de chaque page
   ══════════════════════════════════════════════════════════════════ */


/* ── 1. KEYFRAMES ───────────────────────────────────────────────── */

@keyframes sdFloatA {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  33%       { transform: translateY(-14px) rotate(2deg); }
  66%       { transform: translateY(8px) rotate(-1.5deg); }
}
@keyframes sdFloatB {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  40%       { transform: translateY(10px) rotate(-2deg); }
  80%       { transform: translateY(-9px) rotate(1.5deg); }
}
@keyframes sdSpinCw  { to { transform: rotate(360deg);  } }
@keyframes sdSpinCcw { to { transform: rotate(-360deg); } }

@keyframes sdScan {
  0%   { transform: translateY(0);     opacity: 0; }
  5%   { opacity: .65; }
  90%  { opacity: .3; }
  100% { transform: translateY(680px); opacity: 0; }
}
@keyframes sdBorderFlow {
  0%   { background-position: 0%   50%; }
  100% { background-position: 200% 50%; }
}
@keyframes sdRipple {
  0%   { transform: scale(0); opacity: .5; }
  100% { transform: scale(3); opacity: 0; }
}
@keyframes sdBadgePulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(82,197,200,0); }
  50%       { box-shadow: 0 0 18px 4px rgba(82,197,200,.1); }
}
@keyframes sdGlowPulse {
  0%, 100% { box-shadow: 0 4px 20px rgba(16,123,136,.28); }
  50%       { box-shadow: 0 8px 36px rgba(82,197,200,.5); }
}
@keyframes sdShimmer {
  0%   { transform: translateX(-150%) skewX(-14deg); }
  100% { transform: translateX(280%)  skewX(-14deg); }
}
@keyframes sdCornerPulse {
  0%, 100% { opacity: .22; }
  50%       { opacity: .55; }
}
@keyframes sdDotDrift {
  0%, 100% { transform: translate(0, 0); }
  33%       { transform: translate(6px, -10px); }
  66%       { transform: translate(-4px, 6px); }
}


/* ── 2. SCROLL PROGRESS BAR ──────────────────────────────────────── */

.sd-progress {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 2px;
  z-index: 9999;
  transform-origin: left center;
  transform: scaleX(0);
  background: linear-gradient(90deg, #0F5D54 0%, #0ABAB5 50%, #0F5D54 100%);
  background-size: 200% 100%;
  animation: sdBorderFlow 3s linear infinite;
  pointer-events: none;
}


/* ── 3. FILM GRAIN OVERLAY ───────────────────────────────────────── */

.sd-grain {
  position: fixed;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: .028;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.88' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 192px 192px;
}


/* ── 4. CUSTOM CURSOR (desktop uniquement) ───────────────────────── */

.sd-cursor {
  position: fixed;
  left: 0; top: 0;
  width: 7px; height: 7px;
  margin: 0;
  border-radius: 50%;
  background: rgba(82,197,200,.9);
  pointer-events: none;
  z-index: 9997;
  will-change: transform;
  transition: opacity .3s;
}
.sd-cursor-ring {
  position: fixed;
  left: 0; top: 0;
  width: 32px; height: 32px;
  border-radius: 50%;
  border: 1.5px solid rgba(82,197,200,.42);
  pointer-events: none;
  z-index: 9996;
  will-change: transform;
  transition: width .2s cubic-bezier(.32,.72,0,1),
              height .2s cubic-bezier(.32,.72,0,1),
              border-color .2s,
              opacity .3s;
}
.sd-cursor-ring.is-hovered {
  width: 52px; height: 52px;
  border-color: rgba(82,197,200,.75);
}
@media (hover: none), (pointer: coarse) {
  .sd-cursor, .sd-cursor-ring { display: none !important; }
}


/* ── 5. SCROLL REVEAL v2 ─────────────────────────────────────────── */

[data-sd-reveal] {
  opacity: 0;
  transform: translateY(22px);
  filter: blur(3px);
  transition:
    opacity .65s cubic-bezier(.32,.72,0,1),
    transform .65s cubic-bezier(.32,.72,0,1),
    filter .65s cubic-bezier(.32,.72,0,1);
}
[data-sd-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}
[data-sd-delay="1"] { transition-delay: .07s; }
[data-sd-delay="2"] { transition-delay: .14s; }
[data-sd-delay="3"] { transition-delay: .21s; }
[data-sd-delay="4"] { transition-delay: .28s; }
[data-sd-delay="5"] { transition-delay: .35s; }
[data-sd-delay="6"] { transition-delay: .42s; }

@media (prefers-reduced-motion: reduce) {
  [data-sd-reveal] { opacity: 1; transform: none; filter: none; transition: none; }
}


/* ── 6. BUTTONS ENHANCED ─────────────────────────────────────────── */

/* Primary CTA — transition plus longue et spring */
.btn--primary {
  position: relative;
  overflow: hidden;
  transition:
    transform .4s cubic-bezier(.32,.72,0,1),
    box-shadow .4s cubic-bezier(.32,.72,0,1),
    filter .25s ease !important;
}
.btn--primary:hover {
  transform: translateY(-3px);
  box-shadow:
    0 12px 36px rgba(16,123,136,.45),
    0 3px 10px rgba(0,0,0,.25),
    inset 0 1px 0 rgba(255,255,255,.12);
  filter: brightness(1.06);
}
.btn--primary:active {
  transform: translateY(-1px) scale(.97);
  transition-duration: .1s;
}

/* Shimmer sweep sur hover */
.btn--primary::before {
  content: '';
  position: absolute;
  top: 0; left: -110%;
  width: 55%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.22), transparent);
  transform: skewX(-14deg);
  pointer-events: none;
}
.btn--primary:hover::before {
  animation: sdShimmer .55s ease-out;
}

/* Ripple (span injecté par motion.js) */
.sd-ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(255,255,255,.3);
  transform: scale(0);
  animation: sdRipple .55s ease-out forwards;
  pointer-events: none;
}

/* Glow pulsé sur les CTAs hero / section finale */
.sd-btn-glow {
  animation: sdGlowPulse 3.5s ease-in-out infinite;
}

/* Ghost et outline — rebond léger */
.btn--ghost {
  transition:
    transform .3s cubic-bezier(.32,.72,0,1),
    box-shadow .3s,
    background .25s,
    border-color .25s !important;
}
.btn--ghost:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0,0,0,.2);
  background: rgba(255,255,255,.1) !important;
}
.btn--outline {
  transition:
    transform .3s cubic-bezier(.32,.72,0,1),
    box-shadow .3s,
    background .25s,
    border-color .25s !important;
}
.btn--outline:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(16,123,136,.2);
}

/* Nav CTA */
.nav__cta {
  transition:
    transform .3s cubic-bezier(.32,.72,0,1),
    box-shadow .3s,
    filter .2s !important;
}
.nav__cta:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 5px 18px rgba(16,123,136,.42) !important;
  filter: brightness(1.08) !important;
}

/* Nav links — underline draw from center */
.nav__links li:not(.nav__dropdown):not(.nav__has-mega) > a:not(.nav__cta) {
  position: relative;
}
.nav__links li:not(.nav__dropdown):not(.nav__has-mega) > a:not(.nav__cta)::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 50%; right: 50%;
  height: 1.5px;
  background: var(--accent2, #0ABAB5);
  transition: left .26s cubic-bezier(.32,.72,0,1), right .26s cubic-bezier(.32,.72,0,1);
  border-radius: 2px;
}
.nav__links li:not(.nav__dropdown):not(.nav__has-mega) > a:not(.nav__cta):hover::after {
  left: 0; right: 0;
}


/* ── 7. CARD SPOTLIGHT (radial gradient sur --mx / --my) ─────────── */

.sd-spotlight {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(
    circle at var(--mx, 50%) var(--my, 50%),
    rgba(82,197,200,.07) 0%,
    transparent 58%
  );
  opacity: 0;
  transition: opacity .2s;
  pointer-events: none;
  z-index: 0;
}


/* ── 8. CARD HOVER ENHANCEMENTS ──────────────────────────────────── */

/* Service cards */
.service-card {
  overflow: hidden;
  transition:
    transform .45s cubic-bezier(.32,.72,0,1),
    box-shadow .45s cubic-bezier(.32,.72,0,1),
    border-color .3s ease !important;
}
.service-card:hover {
  transform: translateY(-7px);
  box-shadow:
    0 24px 56px rgba(16,123,136,.14),
    0 4px 16px rgba(0,0,0,.3),
    inset 0 1px 0 rgba(82,197,200,.06);
  border-color: rgba(82,197,200,.38) !important;
}
.service-card:hover .sd-spotlight { opacity: 1; }

/* Shimmer sweep sur les service cards */
.service-card::after {
  content: '';
  position: absolute;
  top: 0; left: -120%;
  width: 60%; height: 100%;
  background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,.04) 50%, transparent 65%);
  transform: skewX(-10deg);
  pointer-events: none;
}
.service-card:hover::after {
  animation: sdShimmer .6s ease-out;
}

/* Problem cards */
.prob-card {
  overflow: hidden;
  transition:
    transform .35s cubic-bezier(.32,.72,0,1),
    border-color .3s,
    box-shadow .35s !important;
}
.prob-card:hover {
  transform: translateX(8px) !important;
  border-color: rgba(82,197,200,.3) !important;
  box-shadow: -6px 0 32px rgba(16,123,136,.1) !important;
}

/* Blog / conseil cards */
.conseil-card {
  position: relative;
  overflow: hidden;
  transition:
    transform .4s cubic-bezier(.32,.72,0,1),
    border-color .3s,
    box-shadow .4s !important;
}
.conseil-card:hover {
  transform: translateY(-6px) !important;
  border-color: rgba(16,123,136,.45) !important;
  box-shadow: 0 16px 40px rgba(16,123,136,.1) !important;
}
.conseil-card:hover .sd-spotlight { opacity: 1; }

/* Positioning items */
.positioning__item {
  overflow: hidden;
  transition:
    transform .4s cubic-bezier(.32,.72,0,1),
    box-shadow .4s,
    border-color .3s !important;
}
.positioning__item:hover {
  transform: translateY(-5px) !important;
  box-shadow: 0 16px 40px rgba(16,123,136,.18) !important;
  border-color: rgba(82,197,200,.45) !important;
}
.positioning__item:hover .sd-spotlight { opacity: 1; }

/* Vision blocks */
.vision__block {
  overflow: hidden;
  transition:
    transform .35s cubic-bezier(.32,.72,0,1),
    box-shadow .35s,
    border-left-color .3s !important;
}
.vision__block:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(16,123,136,.12);
  border-left-color: var(--accent2, #0ABAB5) !important;
}

/* Méthode steps */
.step {
  overflow: hidden;
  transition:
    transform .45s cubic-bezier(.32,.72,0,1),
    border-color .3s,
    box-shadow .4s !important;
}
.step:hover {
  transform: translateY(-8px) !important;
  border-color: rgba(82,197,200,.38) !important;
  box-shadow: 0 20px 48px rgba(16,123,136,.14) !important;
}
.step__num {
  transition: color .3s, -webkit-text-fill-color .3s;
}
.step:hover .step__num {
  background: linear-gradient(135deg, #0F5D54, #0ABAB5);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Pour qui blocks */
.pourqui__block {
  overflow: hidden;
  transition:
    transform .4s cubic-bezier(.32,.72,0,1),
    box-shadow .4s !important;
}
.pourqui__block:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(0,0,0,.14) !important;
}

/* Expertise portrait */
.expertise__portrait {
  transition: transform .5s cubic-bezier(.32,.72,0,1), box-shadow .5s !important;
}
.expertise__portrait:hover {
  transform: scale(1.015);
  box-shadow:
    0 28px 64px rgba(0,0,0,.45),
    0 0 0 1px rgba(82,197,200,.12) !important;
}

/* HP pipeline steps */
.hp-pipe__step {
  transition: background .3s, transform .35s cubic-bezier(.32,.72,0,1) !important;
}
.hp-pipe__step:hover {
  transform: translateY(-5px) !important;
}
.hp-pipe__step:hover .hp-pipe__hex {
  filter: drop-shadow(0 0 18px rgba(82,197,200,.6)) !important;
  transform: scale(1.1) translateY(-3px) !important;
}


/* ── 9. HERO GEOMETRIC ENHANCED ───────────────────────────────────── */

/* Glow orbs — animations plus riches */
.hero-geo__glow-left {
  animation: sdFloatA 22s ease-in-out infinite !important;
}
.hero-geo__glow-right {
  animation: sdFloatB 18s ease-in-out 4s infinite !important;
}
.hero-geo__circle-lg {
  animation: sdFloatA 20s ease-in-out infinite !important;
}
.hero-geo__circle-sm {
  animation: sdFloatB 14s ease-in-out 2s infinite !important;
}
.hero-geo__square {
  animation: sdSpinCw 44s linear infinite !important;
}
.hero-geo__square-sm {
  animation: sdSpinCcw 30s linear infinite !important;
}

/* Scan line (injectée par motion.js) */
.sd-scan-line {
  position: absolute;
  left: 0; right: 0;
  top: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 5%,
    rgba(82,197,200,.4) 35%,
    rgba(82,197,200,.7) 50%,
    rgba(82,197,200,.4) 65%,
    transparent 95%
  );
  animation: sdScan 7.5s cubic-bezier(.45,0,.55,1) 1.5s infinite;
  pointer-events: none;
}

/* Coin brackets (injectés par motion.js) */
.sd-corner {
  position: absolute;
  width: 36px; height: 36px;
  pointer-events: none;
  animation: sdCornerPulse 3.5s ease-in-out infinite;
}
.sd-corner::before, .sd-corner::after {
  content: '';
  position: absolute;
  background: rgba(82,197,200,.32);
  border-radius: 2px;
}
.sd-corner--tl { top: 104px; left: 18px; }
.sd-corner--tl::before { top: 0; left: 0; width: 100%; height: 1.5px; }
.sd-corner--tl::after  { top: 0; left: 0; width: 1.5px; height: 100%; }
.sd-corner--br { bottom: 128px; right: 18px; }
.sd-corner--br::before { bottom: 0; right: 0; width: 100%; height: 1.5px; }
.sd-corner--br::after  { bottom: 0; right: 0; width: 1.5px; height: 100%; }

/* Floating teal dots (injectés par motion.js) */
.sd-geo-dot {
  position: absolute;
  border-radius: 50%;
  background: rgba(82,197,200,.3);
  box-shadow: 0 0 10px rgba(82,197,200,.25);
  pointer-events: none;
}
.sd-geo-dot--a { animation: sdDotDrift 9s ease-in-out infinite; }
.sd-geo-dot--b { animation: sdDotDrift 12s ease-in-out 3s infinite; }
.sd-geo-dot--c { animation: sdDotDrift 7s ease-in-out 5s infinite; }

/* Section geo circles */
.section-geo__circle     { animation: sdFloatA 20s ease-in-out infinite; }
.section-geo__circle--tr { animation: sdFloatB 16s ease-in-out 3s infinite; }
.section-geo__sq         { animation: sdSpinCw 46s linear infinite; }

/* Hero badge subtle pulse */
.hero__badge {
  animation: sdBadgePulse 4.5s ease-in-out 2s infinite;
}


/* ── 10. CTA SECTION DECORATORS (injectés par motion.js) ────────── */

.cta-section {
  position: relative;
  overflow: hidden;
}
.sd-cta-circle {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(82,197,200,.08);
  pointer-events: none;
}
.sd-cta-circle--1 {
  width: 380px; height: 380px;
  top: -130px; right: -80px;
  animation: sdFloatA 24s ease-in-out infinite;
}
.sd-cta-circle--2 {
  width: 220px; height: 220px;
  bottom: -70px; left: -60px;
  animation: sdFloatB 19s ease-in-out 5s infinite;
}
.sd-cta-sq {
  position: absolute;
  width: 70px; height: 70px;
  border: 1px solid rgba(82,197,200,.07);
  bottom: 38px; right: 8%;
  animation: sdSpinCw 36s linear infinite;
  pointer-events: none;
}
.sd-cta-dot {
  position: absolute;
  border-radius: 50%;
  background: rgba(82,197,200,.22);
  box-shadow: 0 0 12px rgba(82,197,200,.25);
  pointer-events: none;
}
.sd-cta-dot--1 { width: 6px; height: 6px; top: 28%; left: 5%; animation: sdDotDrift 9s ease-in-out infinite; }
.sd-cta-dot--2 { width: 4px; height: 4px; bottom: 30%; right: 14%; animation: sdDotDrift 11s ease-in-out 4s infinite; }


/* ── 11. STICKY CTA ──────────────────────────────────────────────── */
.sticky-cta a {
  transition: transform .35s cubic-bezier(.32,.72,0,1), box-shadow .35s !important;
}
.sticky-cta a:hover {
  transform: scale(1.04) !important;
  box-shadow: 0 8px 28px rgba(16,123,136,.5) !important;
}


/* ── 12. FOOTER CTA ──────────────────────────────────────────────── */
.footer__contact-cta {
  transition: transform .35s cubic-bezier(.32,.72,0,1), box-shadow .35s, opacity .25s !important;
}
.footer__contact-cta:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 22px rgba(16,123,136,.38) !important;
  opacity: 1 !important;
}


/* ── 13. PROBE ITEMS ─────────────────────────────────────────────── */
.proof__item {
  transition: transform .3s cubic-bezier(.32,.72,0,1);
}
.proof__item:hover {
  transform: translateY(-2px);
}


/* ── 14. RESPONSIVE ──────────────────────────────────────────────── */
@media (max-width: 768px) {
  .sd-scan-line, .sd-corner   { display: none; }
  .service-card:hover         { transform: none !important; }
  .conseil-card:hover         { transform: none !important; }
  .prob-card:hover            { transform: none !important; }
  .step:hover                 { transform: none !important; }
  .positioning__item:hover    { transform: none !important; }
  .pourqui__block:hover       { transform: none !important; }
  .expertise__portrait:hover  { transform: none !important; }
  .hp-pipe__step:hover        { transform: none !important; }
  .nav__links li > a::after   { display: none; }
  [data-sd-reveal] {
    filter: blur(0);
    transform: translateY(10px);
  }
}