/* ============================================================
   HOME — annesoeapas.fr (spécifique à l'accueil)
   Composants partagés (cartes, FAQ, CTA) = components.css.
   ============================================================ */

/* Rythme vertical des sections home (centralisé) */
/* Mobile : bas du hero resserré → la bande preuves (fond bleu) vient coller sous
   la photo et comble le vide (vault patterns-site-coach : preuves tôt). */
.hero { padding-top: var(--space-5); padding-bottom: var(--space-4); }
.services { padding-block: var(--section-py); }

/* Carte service entière cliquable (stretched-link CSS pur, 0 JS — même pattern que
   .related-services). Chaque carte ne contient qu'UN seul lien (le h3 a) → pas de
   conflit. Garde le margin-bottom du h3 (titre + paragraphe). Lift au survol/focus
   déjà géré par .card:hover/:focus-within (components.css). */
.services .card { position: relative; }
.services .card h3 a::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--radius);
}

/* --- Passerelle « cours collectifs » — bande de transition SOUS les 3 services
   domicile. Volontairement ≠ grille de services pastel (sinon = 4e service) :
   fond de page + liseré brun d'ancrage (charte verrouillée, brun = ancrage).
   (brief 2026-06-08) --- */
.collectif-band { padding-block: var(--section-py); }
.collectif-band .container {
  border-top: 2px solid var(--accent);
  padding-top: var(--section-py);
}
.collectif-band h2 { margin-bottom: var(--space-3); }
.collectif-band p { max-width: 60ch; }
.collectif-band__link {
  display: inline-block;
  margin-top: var(--space-2);
  padding-block: var(--space-1); /* cible tactile ≥ 24px (WCAG 2.2 SC 2.5.8) */
  font-weight: 700;
  font-family: var(--font-heading);
}

/* --- Bandeau crédit d'impôt (peche + charbon = 9,3:1) --- */
.banner-credit {
  background: var(--bg-peche);
  color: var(--text);
  text-align: center;
  padding: var(--space-2) var(--space-3);
}
/* Mobile : bandeau moins haut (phrase longue qui wrap) — police + interligne resserrés, padding réduit.
   Contraste 9,3:1 inchangé (couleur identique). */
@media (max-width: 47.99em) {
  .banner-credit { padding-block: var(--space-1); font-size: 0.8rem; line-height: 1.4; }
}

/* --- Hero --- */
.hero-inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
/* Mobile : bloc texte centré → espacements gauche/droite symétriques. Sinon le
   hero-text est le SEUL bloc aligné à gauche d'une page mobile autrement centrée
   (proof-band, premier-echange, cta-final, presence) + photo centrée dessous →
   effet « collé à gauche ». Centrage = équilibre (vault patterns-site-coach).
   Desktop (≥48em) repasse à gauche. */
.hero-text { text-align: center; }
.hero-sub { font-size: 1.15rem; margin-top: var(--space-2); }
/* Mobile : on masque le tél du hero (redondant avec le tél persistant du header, 1 tap).
   Hero plus court = meilleur fold/LCP. Le CTA « Prendre rendez-vous » reste. */
@media (max-width: 47.99em) {
  .hero-actions .btn-tel { display: none; }
}
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center; /* CTA + tél centrés avec le texte (mobile) */
  gap: var(--space-3);
  margin-top: var(--space-3);
}
.hero-microcopy { font-size: 0.95rem; margin-top: var(--space-2); }
/* Photo portrait (ratio 0,80). Mobile : on la borne + centre pour qu'elle ne
   remplisse pas tout l'écran (mobile = preuves tôt, pas un mur). Zéro crop. */
.hero-img {
  width: 100%;
  max-width: 280px;
  height: auto;
  display: block;
  margin-inline: auto;
  border-radius: var(--radius);
  /* Fond + profondeur (vault) : bloc pêche décalé (ancrage chaleur, anti-vignette)
     + ombre douce statique. Pêche via le rôle --bg-peche, jamais la couleur brute. */
  box-shadow: 8px 8px 0 0 var(--bg-peche), var(--shadow);
}

/* Entrée one-shot du TEXTE hero au chargement (vault animations-web-2026 Niveau 2,
   @starting-style, CSS pur). La PHOTO (LCP) n'est PAS animée → zéro retard LCP.
   Une seule occurrence, opacity + 8px, coupé net en prefers-reduced-motion.
   Fallback navigateurs sans @starting-style : texte visible d'emblée (aucun FOUC). */
@media (prefers-reduced-motion: no-preference) {
  /* Cascade douce des lignes (titre → sous-titre → CTA → microcopy). Enfants directs
     animés séparément (pas le conteneur) → pas de transform composé. 8px = plafond mobile. */
  .hero-text > * {
    transition: opacity 360ms ease-out, transform 360ms ease-out;
  }
  .hero-text > :nth-child(2) { transition-delay: 70ms; }
  .hero-text > :nth-child(3) { transition-delay: 140ms; }
  .hero-text > :nth-child(4) { transition-delay: 210ms; }
  @starting-style {
    .hero-text > * { opacity: 0; transform: translateY(8px); }
  }
}

@media (min-width: 48em) {
  .hero { padding-block: var(--hero-py); } /* desktop : hauteur aérée + symétrie haut/bas restaurées */
  .hero-inner { flex-direction: row; align-items: center; }
  .hero-text { flex: 1; text-align: left; }        /* desktop : retour à gauche (inchangé) */
  .hero-actions { justify-content: flex-start; }   /* desktop : CTA alignés à gauche */
  /* Desktop : colonne média bornée pour ne pas dominer le bloc texte. */
  .hero-media { flex: 0 1 42%; }
  .hero-img { max-width: 420px; }
}

/* --- Section « peurs » (accueil) — verbalisation des freins (P1) --- */
.fears { padding-block: var(--section-py); }
.fears-intro {
  margin-top: var(--space-3);
  font-size: 1.1rem;
  max-width: 60ch;
}
.fears-list { margin-top: var(--space-4); }
.fears-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-1);
  padding-block: var(--space-3);
  border-bottom: 1px solid var(--color-peche);
}
.fears-row dt { font-weight: 600; font-family: var(--font-heading); }
.fears-row dd { margin: 0; }
@media (min-width: 48em) {
  .fears-row {
    grid-template-columns: minmax(0, 22rem) 1fr;
    gap: var(--space-4);
    align-items: baseline;
  }
}

/* --- Témoignages (accueil) — rendu si data présente (P2 ; RGPD : accord requis) --- */
.temoignages { padding-block: var(--section-py); }
.temoignages-list {
  list-style: none;
  padding: 0;
  margin-top: var(--space-4);
  display: grid;
  gap: var(--space-4);
}
.temoignage {
  border-left: 4px solid var(--accent);
  padding-left: var(--space-3);
}
.temoignage blockquote { font-style: italic; }
.temoignage-auteur { margin-top: var(--space-2); font-weight: 600; }
@media (min-width: 48em) {
  .temoignages-list { grid-template-columns: repeat(2, 1fr); }
}