/* ==========================================================================
   YEELEN — Interactions & responsive
   Les styles de base sont inline dans index.php (fidèles au design d'origine).
   Ce fichier ajoute : reset léger, hover/focus, et l'adaptation mobile
   (les surcharges de grille utilisent !important car les styles inline
   l'emportent toujours sur une feuille de style, même en media query).
   ========================================================================== */

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
img { display: block; max-width: 100%; }
a { text-decoration: none; }

/* Ancrage sous le header sticky */
section[id] { scroll-margin-top: 84px; }

/* --- Liens de navigation --- */
.nav-links a { transition: color .18s ease; }
.nav-links a:hover { color: #0B7A38; }

/* --- Boutons primaires --- */
.btn-primary { transition: transform .15s ease, box-shadow .18s ease, filter .18s ease; }
.btn-primary:hover { filter: brightness(1.05); box-shadow: 0 12px 28px -12px rgba(11,122,56,.6); transform: translateY(-1px); }
.btn-primary:active { transform: translateY(0); }

/* --- Cartes expertise --- */
.exp-card { transition: border-color .2s ease, box-shadow .25s ease, transform .2s ease; }
.exp-card:hover {
  border-color: #8CC63F !important;
  box-shadow: 0 16px 40px -24px rgba(11,122,56,.4);
  transform: translateY(-3px);
}

/* --- Champs de formulaire --- */
.field {
  width: 100%;
  font-family: inherit;
  font-size: 14.5px;
  padding: 12px 14px;
  border: 1px solid #DCE2D9;
  border-radius: 10px;
  background: #FBFCFA;
  outline: none;
  color: #0F1E16;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.field::placeholder { color: #9AA79E; }
.field:focus {
  border-color: #0B7A38;
  box-shadow: 0 0 0 3px rgba(11,122,56,.12);
}
.field-error { border-color: #D24545 !important; }
.field-error:focus { box-shadow: 0 0 0 3px rgba(210,69,69,.12); }
.field-msg { color: #B23232; font-size: 12.5px; margin-top: 6px; }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

/* Tablette */
@media (max-width: 960px) {
  .hero-grid,
  .about-grid,
  .why-grid,
  .mission-grid,
  .contact-grid {
    grid-template-columns: 1fr !important;
    gap: 40px !important;
  }
  .cards-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .footer-grid { grid-template-columns: 1fr 1fr !important; }

  /* Réduit les paddings verticaux généreux */
  #apropos, #pourquoi, #contact { padding-top: 64px !important; padding-bottom: 64px !important; }
}

/* Mobile */
@media (max-width: 620px) {
  .nav-links { display: none !important; }

  .header-inner { padding-left: 20px !important; padding-right: 20px !important; }

  /* Paddings latéraux resserrés partout */
  .hero-grid,
  .about-grid,
  .why-grid,
  .mission-grid,
  .contact-grid,
  .footer-grid,
  .footer-bottom { padding-left: 20px !important; padding-right: 20px !important; }

  .cards-grid,
  .stats-grid,
  .form-row,
  .footer-grid { grid-template-columns: 1fr !important; }

  /* Titres plus compacts */
  #top h1 { font-size: 40px !important; }
  .hero-grid { padding-top: 56px !important; padding-bottom: 56px !important; }

  .footer-bottom { flex-direction: column; }
}