/* ==========================================================================
   DigitalAF — Feuille de styles principale
   Styles personnalisés communs à toutes les pages.
   (Les utilitaires Tailwind sont générés par le CDN ; la config des couleurs
    de marque reste dans le <script>tailwind.config</script> de chaque page.)
   ========================================================================== */

/* ===== Base typographique ===== */
html { font-family: 'Inter', system-ui, sans-serif; }
.font-display { font-family: 'Plus Jakarta Sans', Inter, sans-serif; letter-spacing: -0.02em; }

/* ===== Fond en grille (hero / sections) ===== */
.grid-bg {
  background-image:
    linear-gradient(to right, rgba(14,41,66,.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(14,41,66,.06) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 40%, transparent 75%);
}

/* ===== Dégradés de marque ===== */
.brand-gradient {
  background-image: linear-gradient(90deg, #10C997 0%, #06B6D4 50%, #1E88E5 100%);
}
.brand-gradient-text {
  background-image: linear-gradient(90deg, #10C997 0%, #06B6D4 50%, #1E88E5 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Dégradé "mint" (produit Staff) */
.mint-gradient { background-image: linear-gradient(135deg, #10C997 0%, #06B6D4 100%); }
.mint-gradient-text {
  background-image: linear-gradient(135deg, #10C997 0%, #06B6D4 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* Dégradé "ocean" (produit JeGèreMonBusiness) */
.ocean-gradient { background-image: linear-gradient(135deg, #06B6D4 0%, #1E88E5 100%); }
.ocean-gradient-text {
  background-image: linear-gradient(135deg, #06B6D4 0%, #1E88E5 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ===== Liens de navigation (soulignement de la page active) ===== */
.nav-link { position: relative; }
.nav-link[aria-current="page"] { color: #0E2942; }
.nav-link[aria-current="page"]::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -6px;
  height: 2px; border-radius: 2px;
  background-image: linear-gradient(90deg, #10C997, #06B6D4, #1E88E5);
}

/* ===== Marquee (bandeau défilant — section Stack) ===== */
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.marquee-track { animation: marquee 40s linear infinite; width: max-content; }
.marquee-mask { mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent); }

/* ===== Hamburger (menu mobile) ===== */
.hamburger-line {
  position: absolute; left: 50%; margin-left: -10px;
  width: 20px; height: 2px;
  background-color: currentColor; border-radius: 2px;
  transition: transform .3s cubic-bezier(.4,0,.2,1), opacity .2s ease, top .3s ease;
}
.hamburger-line.line-1 { top: 14px; }
.hamburger-line.line-2 { top: 19px; }
.hamburger-line.line-3 { top: 24px; }
#mobile-menu-toggle[aria-expanded="true"] .hamburger-line.line-1 { top: 19px; transform: rotate(45deg); }
#mobile-menu-toggle[aria-expanded="true"] .hamburger-line.line-2 { opacity: 0; transform: scaleX(0); }
#mobile-menu-toggle[aria-expanded="true"] .hamburger-line.line-3 { top: 19px; transform: rotate(-45deg); }

/* ===== Overlay du menu mobile ===== */
#mobile-menu {
  transition: opacity .35s cubic-bezier(.4,0,.2,1), transform .35s cubic-bezier(.4,0,.2,1);
}
#mobile-menu.is-open { opacity: 1; pointer-events: auto; transform: translateY(0); }
.mobile-nav-link { opacity: 0; transform: translateY(10px); transition: opacity .35s ease, transform .35s ease; }
#mobile-menu.is-open .mobile-nav-link { opacity: 1; transform: translateY(0); }
#mobile-menu.is-open .mobile-nav-link:nth-child(1) { transition-delay: 80ms; }
#mobile-menu.is-open .mobile-nav-link:nth-child(2) { transition-delay: 140ms; }
#mobile-menu.is-open .mobile-nav-link:nth-child(3) { transition-delay: 200ms; }
#mobile-menu.is-open .mobile-nav-link:nth-child(4) { transition-delay: 260ms; }
#mobile-menu.is-open .mobile-nav-link:nth-child(5) { transition-delay: 320ms; }
#mobile-menu.is-open .mobile-cta { opacity: 1; transform: translateY(0); transition-delay: 400ms; }
.mobile-cta { opacity: 0; transform: translateY(10px); transition: opacity .35s ease, transform .35s ease; }

/* ===== Preloader (écran de chargement) ===== */
#preloader {
  position: fixed; inset: 0; z-index: 200;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.75rem;
  background: #ffffff;
  transition: opacity .5s ease, visibility .5s ease;
}
#preloader.is-hidden { opacity: 0; visibility: hidden; }
.preloader-stage { position: relative; display: flex; align-items: center; justify-content: center; height: 120px; width: 120px; }
.preloader-ring {
  position: absolute; inset: 0; border-radius: 50%;
  border: 3px solid #E6EEF4;
  border-top-color: #10C997; border-right-color: #06B6D4; border-bottom-color: #1E88E5;
  animation: preloader-spin 1s linear infinite;
}
.preloader-logo {
  width: 64px; height: 64px; object-fit: contain;
  animation: preloader-pulse 1.6s ease-in-out infinite;
}
.preloader-wordmark {
  font-family: 'Plus Jakarta Sans', Inter, sans-serif; font-weight: 800; letter-spacing: -0.02em;
  font-size: 1.25rem; color: #0E2942;
}
.preloader-wordmark .grad {
  background-image: linear-gradient(90deg, #10C997 0%, #06B6D4 50%, #1E88E5 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.preloader-bar {
  width: 140px; height: 3px; border-radius: 999px; background: #E6EEF4; overflow: hidden;
}
.preloader-bar span {
  display: block; height: 100%; width: 40%; border-radius: 999px;
  background-image: linear-gradient(90deg, #10C997, #06B6D4, #1E88E5);
  animation: preloader-load 1.1s ease-in-out infinite;
}
@keyframes preloader-spin { to { transform: rotate(360deg); } }
@keyframes preloader-pulse { 0%,100% { transform: scale(1); opacity: 1; } 50% { transform: scale(.85); opacity: .65; } }
@keyframes preloader-load { 0% { transform: translateX(-120%); } 100% { transform: translateX(360%); } }

/* ===== Accessibilité : réduire les animations ===== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}