/*
 * Sympa — home.css
 *
 * Styles de la page d'accueil (front-page.php). Chargé uniquement sur
 * l'accueil. tokens, global, components, motion et chrome sont
 * chargés avant ce fichier.
 */


/* ── Hero ────────────────────────────────────────────────────────────
 * Texte à gauche, illustration à droite ; empilé en colonne sous 768px.
 */
.s-hero {
  display: flex;
  align-items: center;
  gap: var(--sympa-space-10);
  padding-top: var(--sympa-space-24);
  padding-bottom: var(--sympa-space-16);
}

.s-hero__text { flex: 1 1 600px; }

.s-hero__overline { margin: 0 0 var(--sympa-space-3); }

.s-hero__title { margin: 0 0 var(--sympa-space-4); }
.s-hero__accent {
  display: inline-block;
  white-space: nowrap;
  border-bottom: 2.5px solid var(--sympa-brand-600);
  padding-bottom: 0.04em;
}

/* Mot qui défile dans l'accent souligné — animé par hero.js.
 * Sous prefers-reduced-motion, motion.css neutralise la transition
 * et hero.js ne lance pas le défilement : le mot reste figé.
 */
.s-hero__rotate-word {
  display: inline-block;
  transition: opacity   var(--sympa-dur-md) var(--sympa-ease-out),
              transform var(--sympa-dur-md) var(--sympa-ease-out);
}
.s-hero__rotate-word.is-out {        /* sortie : fond vers le haut */
  opacity: 0;
  transform: translateY(-8px);
}
.s-hero__rotate-word.is-pre {        /* position de départ, sans transition */
  opacity: 0;
  transform: translateY(8px);
  transition: none;
}

.s-hero__sub {
  max-width: 560px;
  margin: 0 0 var(--sympa-space-8);
}

.s-hero__cta {
  display: flex;
  gap: var(--sympa-space-3);
  flex-wrap: wrap;
}

/* Illustration line-art « homme + chat » (design system). */
.s-hero__illu { flex: 1 1 380px; }
.s-hero__illu img {
  display: block;
  width: 100%;
  height: auto;
}


/* ── Chiffres ────────────────────────────────────────────────────────
 * Bande de 4 cartes pastel (composant .s-stat défini dans components.css).
 */
.s-stats {
  padding-bottom: var(--sympa-space-16);
}
.s-stats__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sympa-space-4);
}


/* ── Pourquoi Sympa ──────────────────────────────────────────────────
 * Surtitre, titre, et grille de 3 atouts (composant .s-feature).
 */
.s-why__overline { margin-bottom: var(--sympa-space-3); }
.s-why__title {
  max-width: 560px;
  margin-bottom: var(--sympa-space-12);
}
.s-why__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sympa-space-12);
}
.s-feature__chip { margin-bottom: 14px; }
.s-feature__title { margin-bottom: 6px; }


/* ── Comment ça marche ───────────────────────────────────────────────
 * Surtitre, titre, et grille de 3 étapes numérotées. Les cartes
 * réutilisent le composant pastel .s-stat ; .s-step porte la mise en
 * page propre à l'étape (numéro, titre, texte).
 */
.s-how__overline { margin-bottom: var(--sympa-space-3); }
.s-how__title {
  max-width: 560px;
  margin-bottom: var(--sympa-space-12);
}
.s-how__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sympa-space-5);
}

/* Carte d'étape — .s-stat fournit le fond pastel ; on agrandit le
 * rembourrage et on cale les éléments internes. */
.s-step { padding: var(--sympa-space-6); }
.s-step__num {
  font: 700 38px/40px var(--sympa-font-sans);
  letter-spacing: -0.01em;
  margin-bottom: var(--sympa-space-3);
}
/* color: inherit → le titre prend l'encre pastel de la carte,
 * pas l'encre foncée par défaut de .s-h4. */
.s-step__title {
  margin-bottom: 6px;
  color: inherit;
}
.s-step__body {
  font: 400 14px/20px var(--sympa-font-sans);
  opacity: 0.85;
}


/* ── Aperçu des tutos ────────────────────────────────────────────────
 * Surtitre + titre à gauche, lien « Voir les N tutos » à droite ;
 * en dessous, grille des 6 derniers articles (3 colonnes × 2 lignes).
 * La carte elle-même (fond, bordure, hover) vient de .s-card +
 * .s-card--tuto définis dans components.css.
 */
.s-tutos__header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sympa-space-6);
  margin-bottom: var(--sympa-space-8);
}
.s-tutos__overline { margin-bottom: var(--sympa-space-3); }
.s-tutos__title    { max-width: 560px; }

.s-tutos__all {
  flex-shrink: 0;
  font: 500 14px/20px var(--sympa-font-sans);
}

.s-tutos__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sympa-space-5);
}

/* État vide — aucun article publié pour l'instant. */
.s-tutos__empty {
  padding: var(--sympa-space-10);
  text-align: center;
  background: var(--sympa-surface);
  border: 1px solid var(--sympa-line-soft);
  border-radius: var(--sympa-radius-lg);
}
.s-tutos__empty p { margin: 0; }


/* ── Témoignages ─────────────────────────────────────────────────────
 * 2 paroles côte à côte, sans titre de section. Chaque blockquote a
 * un filet vertical indigo à gauche (signature visuelle du DS).
 */
.s-testimonials__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sympa-space-12);
}

.s-quote {
  margin: 0;
  padding-left: 22px;
  border-left: 3px solid var(--sympa-brand-600);
}

.s-quote__text {
  margin: 0 0 var(--sympa-space-3);
  font: 400 18px/28px var(--sympa-font-sans);
  color: var(--sympa-ink-700);
}

.s-quote__footer {
  font: 400 13px/18px var(--sympa-font-sans);
}

.s-quote__who {
  color: var(--sympa-ink-900);
  font-weight: 500;
}

.s-quote__role {
  color: var(--sympa-ink-400);
  margin-left: 4px;
}


/* ── Appel à l'action final ──────────────────────────────────────────
 * Bandeau indigo arrondi, texte centré blanc, formulaire newsletter
 * (input + bouton blanc), 2 sparks SVG décoratives dans les coins.
 * .s-cta gère l'espacement vertical, .s-cta-band le bandeau lui-même.
 */
.s-cta {
  padding-top: var(--sympa-space-8);
  padding-bottom: var(--sympa-space-24);
}

.s-cta-band {
  position: relative;
  overflow: hidden;
  padding: var(--sympa-space-16) var(--sympa-space-10);
  background: var(--sympa-brand-600);
  color: #fff;
  border-radius: var(--sympa-radius-xl);
  text-align: center;
  /* Cible de l'ancre #sympa-cta-final (bouton « Recevoir la newsletter »
   * du hero) — décale le défilement pour ne pas passer sous la nav. */
  scroll-margin-top: var(--sympa-space-16);
}

/* Sparks SVG — positionnées en haut-gauche et bas-droite du bandeau. */
.s-cta-band__spark {
  position: absolute;
  pointer-events: none;
}
.s-cta-band__spark--tl { left: 28px; top: 28px; }
.s-cta-band__spark--br { right: 32px; bottom: 32px; transform: rotate(20deg); }

/* Titre et sous-titre — blancs, centrés, largeur limitée pour lisibilité. */
.s-cta-band__title {
  color: #fff;
  max-width: 640px;
  margin: 0 auto var(--sympa-space-3);
}

.s-cta-band__sub {
  color: rgba(255, 255, 255, 0.85);
  max-width: 520px;
  margin: 0 auto var(--sympa-space-8);
}

/* Formulaire — input + bouton sur la même ligne, centrés.
 * flex-wrap permet l'empilement automatique sous une certaine largeur. */
.s-cta-band__form {
  display: flex;
  justify-content: center;
  gap: var(--sympa-space-3);
  max-width: 460px;
  margin: 0 auto;
  flex-wrap: wrap;
}

.s-cta-band__input {
  flex: 1 1 220px;
  min-width: 220px;
}

/* Piège anti-robots — invisible mais accessible aux lecteurs d'écran. */
.s-cta-band__hp {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Zone message de retour AJAX (succès / erreur) — sous le formulaire,
 * largeur 100 % pour passer à la ligne sous l'input et le bouton. */
.s-cta-band__msg {
  flex: 1 0 100%;
  margin: var(--sympa-space-3) 0 0;
  font: 400 14px/20px var(--sympa-font-sans);
  color: rgba(255, 255, 255, 0.85);
  min-height: 20px;
}
.s-cta-band__msg.is-success { color: #fff; }
.s-cta-band__msg.is-error   { color: #FFD8D8; }


/* ── Responsive ──────────────────────────────────────────────────────
 * Sous 768px : hero empilé, chiffres sur 2 colonnes, atouts sur 1,
 * grille des tutos sur 1 colonne, en-tête des tutos empilé,
 * témoignages sur 1 colonne, bandeau CTA padding réduit et sparks
 * masquées (le bandeau devient trop étroit pour les loger sans gêne).
 */
@media (max-width: 768px) {
  .s-hero {
    flex-direction: column;
    align-items: stretch;
    gap: var(--sympa-space-6);
    padding-top: var(--sympa-space-12);
  }
  .s-hero__illu {
    flex: none;
    width: 220px;
    align-self: center;
  }
  .s-stats__grid {
    grid-template-columns: 1fr 1fr;
  }
  .s-why__grid {
    grid-template-columns: 1fr;
    gap: var(--sympa-space-8);
  }
  .s-how__grid {
    grid-template-columns: 1fr;
  }
  .s-tutos__header {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--sympa-space-4);
  }
  .s-tutos__grid {
    grid-template-columns: 1fr;
  }
  .s-testimonials__grid {
    grid-template-columns: 1fr;
    gap: var(--sympa-space-8);
  }
  .s-cta-band {
    padding: var(--sympa-space-12) var(--sympa-space-6);
  }
  .s-cta-band__spark { display: none; }
}