/* sections.css — sections du corps de page (cartes, colonnes, carrousel…) */

/* =====================================================
   3) Bandeau de réassurance / USP (sur fond crème)
   ===================================================== */
.reassurance {
  background: linear-gradient(rgba(255, 255, 255, 0.52), rgba(255, 255, 255, 0.52)),
    url('../images/fond-2.svg') center / cover no-repeat;
  background-color: var(--couleur-creme);
  padding-top: 40px;
  padding-bottom: 40px;
}

.reassurance-inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px 56px;
}

.reassurance-item {
  display: flex;
  align-items: center;
  gap: 12px;
}

.reassurance-item p {
  color: var(--couleur-texte);
  font-weight: 600;
}

.reassurance-puce {
  color: var(--couleur-vif);
  font-size: 1.2rem;
}

/* =====================================================
   4) Bloc intro (image + texte)
   ===================================================== */
.intro {
  background: linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.42)),
    url('../images/fond-1.svg') center / cover no-repeat;
  background-color: var(--couleur-creme);
}

.intro-inner {
  display: flex;
  align-items: center;
  gap: 64px;
}

.intro-image {
  flex: 1 1 45%;
}

.intro-image img {
  width: 100%;
  border-radius: var(--rayon-carte);
  object-fit: cover;
  box-shadow: var(--ombre-carte);
}

.intro-texte {
  flex: 1 1 50%;
}

.intro-texte h2 {
  margin-bottom: 18px;
}

.intro-texte p {
  margin-bottom: 16px;
}

.intro-texte .liste-coches {
  margin: 24px 0 32px;
}

/* =====================================================
   5) Grille « programmes » (4 cartes)
   ===================================================== */
.programmes {
  background: linear-gradient(rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.4)),
    url('../images/fond-3.svg') center / cover no-repeat;
  background-color: var(--couleur-fond-clair);
}

.cartes-grille {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
}

.carte {
  background-color: var(--couleur-fond);
  border: 1px solid var(--couleur-bordure);
  border-radius: var(--rayon-carte);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.carte:hover {
  transform: translateY(-6px);
  box-shadow: var(--ombre-carte);
}

.carte img {
  width: 100%;
  height: 180px;
  object-fit: cover;
}

.carte-corps {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 22px;
  flex: 1;
}

.carte-corps p {
  font-size: 0.98rem;
  flex: 1;
}

.carte-lien {
  font-weight: 600;
  color: var(--couleur-principale);
  transition: color 0.2s ease;
}

.carte-lien:hover {
  color: var(--couleur-principale-foncee);
}

/* =====================================================
   6) Section parcours (blocs alternés texte/image)
   ===================================================== */
.parcours {
  background: linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5)),
    url('../images/fond-4.svg') center / cover no-repeat;
  background-color: var(--couleur-fond);
}

.parcours-blocs {
  display: grid;
  gap: 64px;
}

.parcours-bloc {
  display: flex;
  align-items: center;
  gap: 56px;
}

/* Un bloc sur deux inverse l'ordre (image à droite) */
.parcours-bloc--inverse {
  flex-direction: row-reverse;
}

.parcours-bloc-image {
  flex: 1 1 50%;
}

.parcours-bloc-image img {
  width: 100%;
  border-radius: var(--rayon-carte);
  object-fit: cover;
  box-shadow: var(--ombre-carte);
}

.parcours-bloc-texte {
  flex: 1 1 50%;
}

.parcours-numero {
  display: inline-block;
  font-family: var(--police-texte);
  font-weight: 600;
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--couleur-principale);
  background-color: var(--couleur-menthe-pale);
  padding: 6px 14px;
  border-radius: 999px;
  margin-bottom: 16px;
}

.parcours-bloc-texte h3 {
  margin-bottom: 12px;
}

/* =====================================================
   7) Témoignages (carrousel scroll-snap + flèches)
   ===================================================== */
.temoignages {
  background: linear-gradient(rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.4)),
    url('../images/fond-5.svg') center / cover no-repeat;
  background-color: var(--couleur-fond-clair);
}

.carrousel {
  position: relative;
  max-width: var(--largeur-max);
  margin: 0 auto;
  padding: 0 24px;
}

.carrousel-piste {
  display: flex;
  gap: 28px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding: 8px 4px 28px;
  scrollbar-width: none;             /* Firefox : cache la barre */
}

.carrousel-piste::-webkit-scrollbar {
  display: none;                     /* Chrome/Safari : cache la barre */
}

.temoignage {
  scroll-snap-align: center;
  flex: 0 0 clamp(280px, 70%, 560px);
  background-color: var(--couleur-fond);
  border-radius: var(--rayon-carte);
  padding: 40px;
  box-shadow: var(--ombre-carte);
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.temoignage-etoiles {
  color: var(--couleur-ambre);
  font-size: 1.1rem;
  letter-spacing: 2px;
}

.temoignage-texte {
  font-family: var(--police-titre);
  font-weight: 500;
  font-size: 1.3rem;
  line-height: 1.5;
  color: var(--couleur-texte);
}

.temoignage-auteur {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: auto;
}

.temoignage-auteur img {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  object-fit: cover;
}

.temoignage-auteur strong {
  display: block;
  color: var(--couleur-texte);
}

.temoignage-auteur span {
  font-size: 0.9rem;
  color: var(--couleur-texte-doux);
}

/* Flèches de navigation */
.carrousel-fleche {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background-color: var(--couleur-fond);
  color: var(--couleur-principale);
  font-size: 1.6rem;
  line-height: 1;
  box-shadow: var(--ombre-carte);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.carrousel-fleche:hover {
  background-color: var(--couleur-principale);
  color: var(--couleur-fond);
}

.carrousel-fleche--prev { left: -8px; }
.carrousel-fleche--next { right: -8px; }

/* =====================================================
   8) Bandeau preuves / confiance (3 colonnes)
   ===================================================== */
.preuves {
  background: linear-gradient(rgba(255, 255, 255, 0.42), rgba(255, 255, 255, 0.42)),
    url('../images/fond-3.svg') center / cover no-repeat;
  background-color: var(--couleur-creme);
}

.preuves-grille {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

.preuve {
  background-color: var(--couleur-fond);
  border-radius: var(--rayon-carte);
  padding: 40px 32px;
  text-align: center;
  box-shadow: var(--ombre-carte);
}

.preuve-icone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background-color: var(--couleur-menthe-pale);
  color: var(--couleur-principale);
  font-size: 1.6rem;
  margin-bottom: 20px;
}

.preuve h3 {
  margin-bottom: 12px;
}

/* =====================================================
   9) Appel à l'action final
   ===================================================== */
.cta-final {
  background-color: var(--couleur-principale);
}

.cta-inner {
  text-align: center;
  max-width: 680px;
}

.cta-final h2,
.cta-final p {
  color: var(--couleur-fond);
}

.cta-final p {
  margin: 18px 0 32px;
  font-size: 1.2rem;
  opacity: 0.92;
}

.cta-boutons {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: center;
}

/* Boutons inversés sur fond vert */
.cta-final .btn-principal {
  background-color: var(--couleur-fond);
  color: var(--couleur-principale);
}

.cta-final .btn-principal:hover {
  background-color: var(--couleur-fond-clair);
}

.cta-final .btn-secondaire {
  color: var(--couleur-fond);
  border-color: rgba(255, 255, 255, 0.5);
}

.cta-final .btn-secondaire:hover {
  background-color: rgba(255, 255, 255, 0.12);
  border-color: var(--couleur-fond);
}

/* =====================================================
   Responsive mobile
   ===================================================== */
@media (max-width: 768px) {
  .intro-inner {
    flex-direction: column;
    gap: 36px;
  }

  .cartes-grille {
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
  }

  .parcours-blocs {
    gap: 44px;
  }

  .parcours-bloc,
  .parcours-bloc--inverse {
    flex-direction: column;
    gap: 24px;
    text-align: center;
  }

  .parcours-numero {
    margin-left: auto;
    margin-right: auto;
  }

  .preuves-grille {
    grid-template-columns: 1fr;
  }

  .temoignage {
    flex-basis: 85%;
    padding: 28px;
  }

  .temoignage-texte {
    font-size: 1.1rem;
  }

  /* Flèches cachées sur mobile : on fait défiler au doigt */
  .carrousel-fleche {
    display: none;
  }
}

@media (max-width: 480px) {
  .cartes-grille {
    grid-template-columns: 1fr;
  }
}