/* ═══════════════════════════════════════════════════════════════
   DIATTALINK — style.css
   Classes utilitaires, animations et composants partagés.
   Complète Tailwind CDN pour tout ce qui ne peut pas être fait
   avec des utilitaires inline.
   ═══════════════════════════════════════════════════════════════ */

html, body { overflow-x: hidden; }

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

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50%       { transform: translateY(-14px); }
}

@keyframes shimmer {
  0%   { background-position: 200% center; }
  100% { background-position: -200% center; }
}

@keyframes arcDraw {
  from { stroke-dashoffset: 220; }
  to   { stroke-dashoffset: 0; }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}


/* ─── 2. ANIMATIONS D'ENTRÉE ──────────────────────────────── */

.fade-up {
  animation: fadeUp 0.7s ease-out both;
}
.delay-1 { animation-delay: 0.12s; }
.delay-2 { animation-delay: 0.28s; }
.delay-3 { animation-delay: 0.44s; }
.delay-4 { animation-delay: 0.60s; }


/* ─── 3. FLOAT (logo héro) ────────────────────────────────── */

/* Entrée + flottement continu sur le même élément */
.float-anim {
  animation: float 4s ease-in-out infinite;
}

/* Quand fade-up et float-anim sont combinés :
   d'abord l'entrée, ensuite le flottement infini */
.float-anim.fade-up,
.float-anim.fade-up.delay-1,
.float-anim.fade-up.delay-2,
.float-anim.fade-up.delay-3 {
  animation:
    fadeUp  0.7s ease-out 0.28s both,
    float   4s   ease-in-out 1s infinite;
}


/* ─── 4. ARC SVG ──────────────────────────────────────────── */

.arc-path {
  stroke-dasharray: 220;
  stroke-dashoffset: 220;
  animation: arcDraw 1.4s cubic-bezier(.4,0,.2,1) 0.6s both;
}


/* ─── 5. FOND GRILLE ──────────────────────────────────────── */

.grid-bg {
  background-image:
    linear-gradient(rgba(13,27,62,.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(13,27,62,.03) 1px, transparent 1px);
  background-size: 40px 40px;
}


/* ─── 6. LIGNE OR ─────────────────────────────────────────── */

.gold-line {
  width: 56px;
  height: 3px;
  background: linear-gradient(90deg, #C49A3C, #D4AF5A);
  border-radius: 2px;
}


/* ─── 7. ANNEAU ICÔNE ─────────────────────────────────────── */

.icon-ring {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}


/* ─── 8. HERO DIAGONAL CUT ────────────────────────────────── */

.diagonal-cut {
  clip-path: polygon(0 0, 100% 0, 100% 88%, 0 100%);
}
@media (max-width: 768px) {
  .diagonal-cut {
    clip-path: polygon(0 0, 100% 0, 100% 94%, 0 100%);
  }
}


/* ─── 9. CARD HOVER ───────────────────────────────────────── */

.card-hover {
  transition: transform 0.22s ease, box-shadow 0.22s ease;
}
.card-hover:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 50px rgba(13,27,62,.12);
}


/* ─── 10. BOUTONS PILL ────────────────────────────────────── */

.btn-gold {
  border-radius: 9999px;
  background: linear-gradient(90deg, #C49A3C 0%, #D4AF5A 40%, #F5E9C0 55%, #D4AF5A 70%, #C49A3C 100%);
  background-size: 200% auto;
  transition: background-position .5s ease, transform .2s ease, box-shadow .2s ease;
}
.btn-gold:hover {
  background-position: right center;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(196,154,60,.4);
}

.btn-navy {
  border-radius: 9999px;
  background: #0D1B3E;
  color: #FAF8F3;
  transition: background .2s ease, transform .2s ease, box-shadow .2s ease;
}
.btn-navy:hover {
  background: #1a2f5e;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(13,27,62,.35);
}

.btn-outline {
  border-radius: 9999px;
  border: 1.5px solid rgba(13,27,62,.2);
  background: transparent;
  transition: border-color .2s ease, background .2s ease, color .2s ease, transform .2s ease;
}
.btn-outline:hover {
  border-color: #0D1B3E;
  background: #0D1B3E;
  color: #FAF8F3;
  transform: translateY(-2px);
}


/* ─── 11. NAVBAR SCROLLED ─────────────────────────────────── */

#navbar {
  transition: box-shadow .3s ease, border-color .3s ease;
  border-bottom: 1px solid transparent;
}
#navbar.scrolled {
  box-shadow: 0 2px 20px rgba(13,27,62,.08);
  border-bottom-color: rgba(13,27,62,.06);
}


/* ─── 12. MENU MOBILE ─────────────────────────────────────── */

#mobile-menu {
  max-height: 0;
  overflow: hidden;
  transition: max-height .35s cubic-bezier(.4,0,.2,1);
}
#mobile-menu.open {
  max-height: 480px;
}


/* ─── 13. SCROLL HINT BOB ─────────────────────────────────── */

@keyframes scrollBob {
  0%, 100% { transform: translateY(0);   opacity: 0.45; }
  50%       { transform: translateY(8px); opacity: 0.65; }
}
.scroll-hint-bob {
  animation: scrollBob 2s ease-in-out 1.4s infinite;
}


/* ─── 14. GOLD LINE REVEAL ────────────────────────────────── */

.gold-line {
  transform-origin: left;
  transform: scaleX(0);
  transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}
.gold-line.mx-auto {
  transform-origin: center;
}
.gold-line.gl-visible {
  transform: scaleX(1);
}


/* ─── 15. CONNECTOR LINE DRAW ─────────────────────────────── */

.connector-anim {
  transform-origin: left;
  transform: scaleX(0);
  transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.18s;
}
.connector-anim.cl-visible {
  transform: scaleX(1);
}


/* ─── 16. STEP CARD STAGGER ───────────────────────────────── */

@keyframes stepRise {
  from { opacity: 0.94; transform: translateY(12px); }
  to   { opacity: 1;    transform: translateY(0); }
}
.step-card.sc-visible                  { animation: stepRise 0.52s cubic-bezier(0.22, 1, 0.36, 1)       both; }
.step-card.sc-visible[data-step="2"]  { animation: stepRise 0.52s cubic-bezier(0.22, 1, 0.36, 1) 0.13s both; }
.step-card.sc-visible[data-step="3"]  { animation: stepRise 0.52s cubic-bezier(0.22, 1, 0.36, 1) 0.26s both; }


/* ─── 17. HERO DOT DRIFT ──────────────────────────────────── */

@keyframes driftSlow {
  0%, 100% { transform: translateY(0px) translateX(0px); }
  33%       { transform: translateY(-9px) translateX(5px); }
  66%       { transform: translateY(4px) translateX(-3px); }
}
@keyframes driftFast {
  0%, 100% { transform: translateY(0px); }
  50%       { transform: translateY(-7px); }
}
.dot-a { animation: driftSlow 7s ease-in-out 0.6s infinite; }
.dot-b { animation: driftFast 5s ease-in-out 1.9s infinite; }
.dot-c { animation: driftSlow 9s ease-in-out 3.5s infinite; }


/* ─── 18. BUTTON PRESS FEEDBACK ───────────────────────────── */

.btn-gold:active {
  transform: scale(0.96) !important;
  box-shadow: 0 2px 10px rgba(196,154,60,.3) !important;
  transition-duration: 0.07s !important;
}
.btn-navy:active {
  transform: scale(0.96) !important;
  transition-duration: 0.07s !important;
}
.btn-outline:active {
  transform: scale(0.96) !important;
  transition-duration: 0.07s !important;
}


/* ─── 19. CTA LOGO FLOAT ──────────────────────────────────── */

.cta-logo-float {
  animation: float 5.5s ease-in-out 0.8s infinite;
}


/* ─── 20. REDUCED MOTION ──────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .float-anim,
  .fade-up,
  .arc-path,
  .btn-gold,
  .btn-navy,
  .btn-outline,
  .card-hover,
  .scroll-hint-bob,
  .dot-a, .dot-b, .dot-c,
  .cta-logo-float,
  .step-card.sc-visible {
    animation: none !important;
    transition-duration: 0.01ms !important;
  }

  /* Ensure hidden-by-default elements stay visible */
  .gold-line        { transform: scaleX(1) !important; transition: none !important; }
  .connector-anim   { transform: scaleX(1) !important; transition: none !important; }
}