/* ==========================================================
   styles_accueil.css — à charger APRÈS styles_main.css
   Ajouts et corrections pour la page d'accueil
   ========================================================== */

/* Meilleur contraste du texte blanc sur le fond à bulles */
:root{
  --overlay-1: rgba(18, 59, 119, 0.65);
}

/* Lien d'évitement (accessibilité clavier) */
.skip-link{
  position: absolute;
  left: 12px;
  top: -60px;
  background: #fff;
  color: var(--brand-navy);
  padding: 10px 16px;
  border-radius: 8px;
  font-weight: 700;
  z-index: 2000;
  text-decoration: none;
}
.skip-link:focus{ top: 12px; }

/* Focus visible partout */
a:focus-visible{
  outline: 3px solid var(--brand-teal);
  outline-offset: 3px;
}
.fixed-header a:focus-visible,
.hero-section a:focus-visible,
.final-cta a:focus-visible,
footer a:focus-visible{
  outline-color: #fff;
}

/* Titres de sections */
.services-home-section h2,
.news-section h2,
.approach-section h2,
.plans-section h2{
  color: var(--brand-navy);
  font-size: clamp(1.6rem, 1.1rem + 1.5vw, 2rem);
  text-align: center;
  margin-bottom: 24px;
}

/* ---------- Hero ---------- */
.hero-content .hero-eyebrow{
  font-weight: 700;
  letter-spacing: .02em;
  opacity: .95;
  margin: 0 0 .6rem;
  font-size: clamp(0.95rem, 1.2vw + .4rem, 1.15rem);
  color: #dfe9ff;
}

.hero-content h1{
  font-size: clamp(1.7rem, 3vw + 1rem, 2.8rem);
  max-width: 22ch;
  margin-inline: auto;
}

.hero-lead{
  max-width: 62ch;
  margin-inline: auto;
}

.hero-actions{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
}

.cta-button.is-ghost{
  background: transparent;
  color: #fff;
  border: 2px solid rgba(255,255,255,.85);
  box-shadow: none;
}
.cta-button.is-ghost:hover{
  background: rgba(255,255,255,.14);
  box-shadow: none;
}

/* ---------- Repères de confiance ---------- */
.proof-section{
  background: #fff;
  padding: 28px 20px;
  border-bottom: 1px solid rgba(18,59,119,.08);
}
.proof-grid{
  list-style: none;
  max-width: 1000px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
}
.proof-item{
  text-align: center;
  padding: 6px 10px;
}
.proof-item strong{
  display: block;
  color: var(--brand-navy);
  font-size: 1.1rem;
  margin-bottom: 4px;
}
.proof-item span{
  color: #3a4150;
  font-size: .95rem;
}

/* ---------- Pourquoi : lecture à gauche, sans justification ---------- */
.presentation-section .container{
  max-width: 820px;
}
.presentation-section p{
  font-size: 1.08rem;
  line-height: 1.8;
  color: #2a2f36;
  margin-bottom: 18px;
  text-align: left;
}

/* ---------- Services (cartes) ---------- */
.service-item h3{
  color: var(--brand-navy);
  font-size: 1.1rem;
  margin-bottom: 8px;
}
.service-item p{
  color: #3a4150;
  font-size: .98rem;
}

/* ---------- Méthode ---------- */
.approach-section{
  background: #f6f9fc;
  padding: 56px 0 60px;
}
.steps{
  list-style: none;
  counter-reset: step;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 20px;
}
.steps li{
  counter-increment: step;
  background: #fff;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 4px 10px rgba(18,59,119,.08);
}
.steps li::before{
  content: counter(step);
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--brand-teal);
  color: #fff;
  font-weight: 700;
  margin-bottom: 10px;
}
.steps strong{
  display: block;
  color: var(--brand-navy);
  margin-bottom: 4px;
}
.steps span{
  color: #3a4150;
  font-size: .97rem;
}

/* ---------- Formules ---------- */
.plans-section{
  padding: 56px 0 64px;
  background: #fff;
}
.plans-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
}
.plan-card{
  border: 1px solid rgba(18,59,119,.15);
  border-radius: 12px;
  padding: 22px;
  background: #f9fbfd;
}
.plan-card h3{
  color: var(--brand-navy);
  margin-bottom: 8px;
}
.plan-card p{
  color: #3a4150;
  font-size: .98rem;
}
.plans-section .cta-wrap{ margin-top: 28px; }

/* ---------- Actualités ---------- */
.news-item h3{
  color: var(--brand-navy);
  font-size: 1.05rem;
  margin-bottom: 8px;
}
.news-item p{
  color: #3a4150;
  font-size: .97rem;
  margin-bottom: 10px;
}

/* ---------- Appel à l'action final ---------- */
.final-cta{
  background: linear-gradient(135deg, var(--brand-navy), var(--brand-violet));
  color: #fff;
  text-align: center;
  padding: 56px 0 60px;
}
.final-cta h2{
  font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2rem);
  margin-bottom: 10px;
}
.final-cta p{
  margin-bottom: 24px;
  color: #eef4ff;
}

/* ---------- Mobile ---------- */
@media (max-width: 720px){
  nav{
    flex-wrap: wrap;
    row-gap: 6px;
  }
  .nav-center{
    order: 3;
    width: 100%;
  }
  .nav-links{
    justify-content: center;
    flex-wrap: wrap;
  }
  nav .nav-links li{ margin: 4px 10px; }
  .client-button span{ display: none; }
  .hero-section{ padding-top: 150px; }
}