/* ══════════════════════════════════════════════
   CONCORDIA FORMATIONS — INDEX.CSS (Accueil)
   ══════════════════════════════════════════════ */

/* ══ HERO : texte à gauche, image (fille + carte intégrées) à droite.
      Fond blanc uniforme, aucune bordure : l'image se fond avec le hero ══ */
.home-hero {
  background: #fff;
  padding-top: calc(var(--navh) + clamp(20px, 4vw, 48px));
  padding-bottom: clamp(28px, 5vw, 60px);
  overflow: hidden;
}
.home-hero-grid {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(16px, 3vw, 40px); align-items: center;
}
.home-hero-text .p-title { font-size: clamp(2.1rem, 5.4vw, 3.4rem); }
.home-hero-text .hero-h1 { font-size: clamp(1.7rem, 4vw, 2.6rem); line-height: 1.14; }

/* Image unique : ni cadre, ni ombre, ni arrondi.
   Les bords sont fondus (masque dégradé) pour disparaître dans le fond blanc */
.home-hero-visual .hhv-person {
  display: block; width: 100%; height: auto;
  -webkit-mask-image:
    linear-gradient(to right,  black 78%, transparent 100%),
    linear-gradient(to bottom, black 82%, transparent 100%),
    linear-gradient(to top,    black 94%, transparent 100%);
  mask-image:
    linear-gradient(to right,  black 78%, transparent 100%),
    linear-gradient(to bottom, black 82%, transparent 100%),
    linear-gradient(to top,    black 94%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}
@media (max-width: 991px) {
  .home-hero-grid { grid-template-columns: 1fr; gap: 12px; }
  .home-hero-visual { order: -1; max-width: 620px; margin-inline: auto; }
  .home-hero-visual .hhv-person {
    -webkit-mask-image:
      linear-gradient(to right,  black 86%, transparent 100%),
      linear-gradient(to bottom, black 86%, transparent 100%);
    mask-image:
      linear-gradient(to right,  black 86%, transparent 100%),
      linear-gradient(to bottom, black 86%, transparent 100%);
  }
  /* Hero CTA : 3 boutons empilés proprement, pleine largeur, centrés */
  .home-hero .hero-actions { flex-direction: column; align-items: stretch; gap: 10px; }
  .home-hero .hero-actions .btn-navy,
  .home-hero .hero-actions .btn-outline,
  .home-hero .hero-actions .btn-red {
    width: 100%; justify-content: center;
    padding: 13px 18px; font-size: .74rem;
  }
}

/* ══ Carte France (section trouver un centre) ══ */
.map-card {
  position: relative;
  display: flex; align-items: center; justify-content: center;
}
.map-card .map-img { position: relative; z-index: 1; width: 100%; height: auto; border-radius: 14px; }

/* ══ Témoignages ══ */
.testi-card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 26px 24px;
  display: flex; flex-direction: column; gap: 14px;
  transition: transform .3s, box-shadow .3s;
}
.testi-card:hover { transform: translateY(-4px); box-shadow: 0 14px 34px rgba(15,33,72,.09); }
.testi-stars { display: flex; gap: 3px; color: var(--rouge); }
.testi-text { font-size: .88rem; color: var(--gris); line-height: 1.7; margin: 0; flex: 1; }
.testi-who { display: flex; align-items: center; gap: 12px; }
.testi-who img, .testi-avatar {
  width: 42px; height: 42px; border-radius: 50%; object-fit: cover; flex-shrink: 0;
}
.testi-avatar {
  background: var(--navy); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--fd); font-weight: 700;
}
.testi-who strong { display: block; font-size: .85rem; color: var(--navy); }
.testi-who span { display: block; font-size: .74rem; color: var(--gris); }