/* ============================================================
   accueil-nav-icons.css — Icônes "À propos" et "Aide / FAQ" ajoutées
   à côté de l'icône "Voir mes services" dans l'en-tête de accueil.html.
   Fichier 100% additif : ne modifie ni ne redéfinit aucune règle de
   style.css, accueil.css ou accueil-showcase.css, n'affecte aucune
   autre page. Réutilise .nav-icon-btn et .simple-modal / .simple-modal-box
   déjà définis dans style.css, sans les redéclarer.
   ============================================================ */

/* ---------- Repère visuel bref sur le bloc "À propos" du footer,
   déclenché après un clic sur l'icône "À propos" (voir accueil-nav-icons.js) ---------- */

.mp-about-pulse {
  animation: mpAboutPulse 1.6s ease-out;
  border-radius: var(--radius, 14px);
}

@keyframes mpAboutPulse {
  0%   { box-shadow: 0 0 0 0 rgba(0, 217, 126, 0.45); }
  60%  { box-shadow: 0 0 0 14px rgba(0, 217, 126, 0); }
  100% { box-shadow: 0 0 0 0 rgba(0, 217, 126, 0); }
}

/* ---------- Modale Aide / FAQ (réutilise .simple-modal-box) ---------- */

.mp-home-faq-modal {
  max-width: 460px;
  text-align: left;
}

.mp-home-faq-item {
  border-bottom: 1px solid var(--border);
}

.mp-home-faq-item:last-of-type {
  border-bottom: none;
}

.mp-home-faq-q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: none;
  border: none;
  color: var(--text);
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 600;
  text-align: left;
  padding: 12px 2px;
  cursor: pointer;
}

.mp-home-faq-caret {
  flex: none;
  transition: transform 0.2s ease;
  color: var(--muted);
}

.mp-home-faq-q-open .mp-home-faq-caret {
  transform: rotate(90deg);
  color: var(--green);
}

.mp-home-faq-a {
  display: none;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.6;
  padding: 0 2px 12px;
}

.mp-home-faq-a-open {
  display: block;
}

@media (prefers-reduced-motion: reduce) {
  .mp-about-pulse { animation: none; }
}