@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&display=swap');

body {
  font-family: 'Montserrat', sans-serif;
  background-color: #f8fafc;
  color: #020f23;
}

.hero-gradient {
  background: linear-gradient(135deg, rgba(2,15,35,0.95) 0%, rgba(2,15,35,0.85) 100%);
}

.card-hover { transition: all 0.3s ease; }
.card-hover:hover { transform: translateY(-5px); box-shadow: 0 10px 25px rgba(2,15,35,0.1); }

.fade-in { animation: fadeIn 1s ease-in; }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }

.slide-up { animation: slideUp 0.8s ease-out; }
@keyframes slideUp {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0); }
}

.btn-primary { background-color: #020f23; transition: all 0.3s ease; }
.btn-primary:hover { background-color: #1e293b; transform: translateY(-2px); }

.blog-card { transition: all 0.3s ease; }
.blog-card:hover { transform: scale(1.02); box-shadow: 0 10px 20px rgba(2,15,35,0.1); }

.nav-link { position: relative; }
.nav-link::after {
  content: ''; position: absolute; width: 0; height: 2px; bottom: -2px; left: 0;
  background-color: #020f23; transition: width 0.3s ease;
}
.nav-link:hover::after { width: 100%; }

.stat-item { transition: all 0.3s ease; }
.stat-item:hover { transform: scale(1.05); }

html { scroll-behavior: smooth; }

#calendar { min-height: 520px; }

/* Décoration point événements si besoin */
.fc .event-dot { background-color: transparent !important; position: relative; padding: 0 !important; height: 0; overflow: visible; }
.fc .event-dot::before {
  content: ''; position: absolute; top: 0.7rem; left: 50%; transform: translateX(-50%);
  width: 6px; height: 6px; border-radius: 50%; background-color: currentColor;
}

/* =========================================
   Responsive baseline — GrowthSphere (mobile-first)
   À coller en bas de style.css
   ========================================= */

/* Lisibilité & césures (FR) */
html { -webkit-text-size-adjust: 100%; }
p, li, h1, h2, h3, h4 { overflow-wrap: break-word; hyphens: auto; }

/* Offset des ancres avec header sticky (évite les titres masqués) */
:root { --header-height: 72px; }
section,
header,
nav[aria-label="Fil d’Ariane"] {
  scroll-margin-top: calc(var(--header-height) + 12px);
}

/* Médias fluides */
img, video, svg, canvas { max-width: 100%; height: auto; display: block; }

/* Cibles tactiles confortables */
a, button { min-height: 44px; }

/* Fil d’Ariane : wrap propre sur mobile */
nav[aria-label="Fil d’Ariane"] ol { flex-wrap: wrap; }
nav[aria-label="Fil d’Ariane"] li { line-height: 1.4; }

/* Tables éventuelles : scroll horizontal sur petit écran */
.fc table { display: table !important; width: 100%; overflow: visible !important; }

/* =======================
   ≤ 640px (équivalent sm)
   ======================= */
@media (max-width: 640px) {

  /* Légère réduction des marges latérales */
  .container.px-6 { padding-left: 1rem; padding-right: 1rem; }

  /* Hero : équilibre des espacements & hauteur image */
  .hero-gradient .grid { row-gap: 1.75rem; }
  .hero-gradient .h-64 { height: 13rem; } /* ~208px pour éviter le "mur" sur petit écran */

  /* Sécurité : si une grille n’a pas de règle responsive, force 1 colonne */
  .grid { grid-template-columns: 1fr; gap: 1rem; }

  /* CTA groupés (FAQ, bandeaux, héros) : empiler et plein largeur */
  #faq .flex.flex-wrap.justify-center.gap-4 a,
  section .flex.flex-wrap.gap-4 a {
    width: 100%;
    justify-content: center;
    text-align: center;
  }

  /* Footer : espacement confortable quand tout s’empile */
  footer .grid { gap: 1.5rem; }
}

/* ===========================
   641–1024px (tablettes/md)
   =========================== */
@media (min-width: 641px) and (max-width: 1024px) {
  .container.px-6 { padding-left: 1.25rem; padding-right: 1.25rem; }
  .hero-gradient .h-64 { height: 15rem; }
}

/* Rendu plus net des icônes sur écrans denses */
@media (min-resolution: 2dppx) {
  .fa { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
}

/* Accessibilité : focus visible cohérent partout */
:focus-visible {
  outline: 2px solid rgba(2,15,35,0.5);
  outline-offset: 2px;
  border-radius: 6px;
}