/* ==========================================================================
   landing.css — Landing manifesto pré-lancement (Phase 1)
   --------------------------------------------------------------------------
   Page unique index.php : Hero + Qui je suis + Ce que je prépare +
   Pour qui + Pour rester en contact. Aligné DS ICyam v1.2.
   Aucun style inline dans index.php (CSP script/style-src 'self').
   ========================================================================== */

/* === Hero manifesto — aplat Bleu Marine + motif géométrique en filigrane === */
.hero-landing {
  position: relative;
  overflow: hidden;
  background: var(--color-blue);
  color: var(--color-white);
  padding: var(--space-xl) 0;
  text-align: center;
}
/* Image de fond en overlay discret (même traitement que .hero du site complet).
   Défaut : hero-accueil.png existante. À remplacer par hero-landing.png dédiée. */
.hero-landing::after {
  content: '';
  position: absolute;
  inset: 0;
  background: url('/assets/img/hero/hero-landing.png') center center / cover no-repeat;
  opacity: 0.18;
  pointer-events: none;
}
.hero-landing__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.hero-landing__logo {
  width: 140px;
  height: 140px;
  margin-bottom: var(--space-md);
}
.hero-landing__title {
  font-size: var(--text-h1);
  font-weight: 700;
  line-height: 1.2;
  color: var(--color-white);
  margin-bottom: var(--space-sm);
  max-width: 820px;
}
.hero-landing__subtitle {
  font-size: 1.125rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.85);
  max-width: 640px;
  margin-bottom: var(--space-md);
}
.hero-landing__badge {
  display: inline-block;
  background: rgba(110, 165, 147, 0.18);
  color: var(--color-green-light);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.4rem 1.1rem;
  border-radius: 999px;
}

/* === Titres et chapôs de section === */
.section__title {
  color: var(--color-blue);
  margin-bottom: var(--space-sm);
}
.section__lead {
  color: var(--color-gray-mid);
  max-width: 620px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: var(--space-md);
}

/* Conteneur étroit : largeur déplacée dans main.css (chargé sur toutes les pages) */
/* Espace entre les paragraphes des sections de texte */
.container--narrow p + p {
  margin-top: var(--space-sm);
}

/* === Qui je suis — texte à gauche, photo à droite === */
.about {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: var(--space-lg);
  align-items: center;
}
.about__text p + p { margin-top: var(--space-sm); }
.about__photo { display: flex; justify-content: center; }
.about__photo img {
  width: 100%;
  max-width: 360px;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}
/* === Ce que je prépare — 4 cartes === */
.prepare-grid {
  display: grid;
  /* minmax(0,1fr) force des colonnes strictement égales : sans le min 0, le
     mot le plus long (« Accompagnement ») impose sa largeur et déséquilibre. */
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-md);
  align-items: stretch;
}
.prepare-card {
  background: var(--color-white);
  border: 1px solid var(--color-gray-light);
  border-radius: var(--radius-lg);
  padding: var(--space-md);
  box-shadow: var(--shadow-sm);
  text-align: center;
}
.prepare-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  margin-bottom: var(--space-sm);
  border-radius: var(--radius);
  background: var(--color-blue-pastel);
  color: var(--color-blue);
}
.prepare-card__icon svg {
  width: 28px;
  height: 28px;
}
.prepare-card__title {
  color: var(--color-blue);
  /* Taille réduite vs H3 (28px) : un titre d'1 mot long (« Accompagnement »)
     ne tient pas en 28px dans une carte sur 4 colonnes → 20px + filet anti-débordement. */
  font-size: 1.25rem;
  line-height: 1.3;
  overflow-wrap: break-word;
  margin-bottom: 0.5rem;
}
.prepare-card__desc {
  color: var(--color-gray-mid);
  font-size: var(--text-sm);
}

/* === Responsive === */
@media (max-width: 980px) {
  .prepare-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 768px) {
  .hero-landing__title { font-size: 2rem; }
  .hero-landing__subtitle { font-size: 1rem; }
  .about { grid-template-columns: 1fr; gap: var(--space-md); }
  .about__photo { order: -1; }
}
@media (max-width: 560px) {
  .prepare-grid { grid-template-columns: 1fr; }
}