/* ==========================================================================
   MARC Solutions — Feuille de style personnalisée (CSS3)
   Tailwind gère l'essentiel via les classes utilitaires ; ce fichier porte
   les polices, les keyframes et les quelques helpers non couverts par Tailwind.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400;12..96,500;12..96,600;12..96,700;12..96,800&family=Hanken+Grotesk:wght@400;500;600;700&display=swap');

:root {
  --ink: #1B2130;
  --night: #141821;
  --cream: #FBFAF7;
  --royal: #2F5BD8;
  --emerald: #2E7D6B;
  --copper: #A35A2A;
  --muted: #565B68;
  --faint: #9A9AA0;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: 'Hanken Grotesk', system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: var(--royal); color: #fff; }

a { color: inherit; text-decoration: none; }

.font-display { font-family: 'Bricolage Grotesque', 'Hanken Grotesk', sans-serif; }

/* ---- Animations de fond (mockups / graphes) ---------------------------- */
@keyframes floaty   { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
@keyframes pulsenode{ 0%, 100% { opacity: .55; r: 5; } 50% { opacity: 1; r: 7; } }
@keyframes dashflow { to { stroke-dashoffset: -24; } }

.anim-dashflow  { animation: dashflow 2.4s linear infinite; }
.anim-pulse     { animation: pulsenode 2.6s ease-in-out infinite; }
.anim-pulse-slow{ animation: pulsenode 3s ease-in-out infinite; }

/* ---- Révélation au scroll (IntersectionObserver) ----------------------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .65s ease, transform .65s ease;
  will-change: opacity, transform;
}
[data-reveal].is-visible {
  opacity: 1;
  transform: none;
}
/* Délais d'apparition en cascade pour les grilles */
[data-reveal-delay="1"] { transition-delay: .07s; }
[data-reveal-delay="2"] { transition-delay: .14s; }

/* ---- Carte de module : survol ------------------------------------------ */
.module-card {
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.module-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 30px -18px rgba(27, 33, 48, .30);
  border-color: #DCD9D0;
}

/* ---- Liens du pied de page --------------------------------------------- */
.footer-link { transition: color .18s ease; }
.footer-link:hover { color: #fff; }

/* ---- Menu de navigation mobile ----------------------------------------- */
#nav-menu { display: none; }
#nav-menu.open { display: flex; }
.nav-mobile-link {
  padding: 11px 12px;
  border-radius: 10px;
  font-weight: 600;
  font-size: 15px;
  color: var(--ink);
  transition: background .15s ease;
}
.nav-mobile-link:hover { background: rgba(27, 33, 48, .05); }
#nav-toggle .bar { transition: transform .25s ease, opacity .2s ease; }
#nav-toggle[aria-expanded="true"] .bar-top    { transform: translateY(6px) rotate(45deg); }
#nav-toggle[aria-expanded="true"] .bar-mid    { opacity: 0; }
#nav-toggle[aria-expanded="true"] .bar-bottom { transform: translateY(-6px) rotate(-45deg); }
/* Au-delà de 1024px : le menu desktop reprend la main */
@media (min-width: 1024px) {
  #nav-menu, #nav-toggle { display: none !important; }
}

/* ---- Onglets de filtre des modules ------------------------------------- */
.tab {
  cursor: pointer;
  font-family: 'Hanken Grotesk', sans-serif;
  font-weight: 600;
  font-size: 14px;
  padding: 9px 18px;
  border-radius: 999px;
  border: 1px solid #E2DFD6;
  background: #fff;
  color: #565B68;
  transition: all .18s ease;
}
.tab:hover { border-color: #9A9AA0; }
.tab-active { background: #1B2130; color: #fff; border-color: #1B2130; }

/* ---- Parcours : états des étapes --------------------------------------- */
.step-num { background: #fff; color: #9A9AA0; border-color: #E2DFD6; }
.step.is-done   .step-num { background: #EEF2FE; color: #2F5BD8; border-color: #CBD8FB; }
.step.is-active .step-num { background: #2F5BD8; color: #fff; border-color: #2F5BD8; box-shadow: 0 8px 20px -8px rgba(47, 91, 216, .6); }
.step-line { background: #E7E4DC; }
.step.is-done .step-line { background: #2F5BD8; }
.step:last-child .step-line { background: transparent; }

/* ---- Pages légales : une seule visible à la fois ----------------------- */
[data-legal-page] { display: none; }

/* ---- Accessibilité : réduction des animations -------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, [data-reveal] { animation: none !important; transition: none !important; }
  [data-reveal] { opacity: 1; transform: none; }
}