/* ============================================
   PAGE ACCUEIL — / (FR + EN + ES)
   Sections index1 (hero background), index2-5 (alternance texte/image),
   index6 (CTA).
   Note : les styles du bloc temoignages (index7) sont dans composants.css
   car le partial est reutilise sur d'autres pages.
   ============================================ */

/* === TYPOGRAPHIE des sections === */

.index2 h1,
.index3 h1,
.index4 h1,
.index5 h1 {
  font-size: 2.2rem;
  margin-bottom: 1.5rem;
  font-weight: bold;
  color: var(--color8);
  line-height: 1.3;
}

.index2 h2, .index3 h2, .index4 h2, .index5 h2 {
  font-size: 2.2rem;
  margin-bottom: 1.5rem;
  font-weight: bold;
  color: var(--color8);
  line-height: 1.3;
}

.index2 h3, .index3 h3, .index4 h3, .index5 h3 {
  font-size: 1.4rem;
  margin-bottom: 1rem;
  font-weight: normal;
  color: var(--color8);
  line-height: 1.4;
}

@media (max-width: 768px) {
  .index2 h1,
  .index3 h1,
  .index4 h1,
  .index5 h1 {
    font-size: 1.8rem;
  }
}

/* === INDEX1 - Hero avec image de fond + texte superpose === */

.index1 {
  position: relative;
  width: 100%;
  height: 81.25vh;
  height: 81.25dvh;
  min-height: 560px;
  overflow: hidden;
}

.index1 img {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: cover;
  display: block;
}

.texte-superpose {
  position: absolute;
  top: calc(25% + 90px);
  left: 50%;
  transform: translate(-50%, -50%);
  color: var(--text-white);
  text-align: center;
  background: var(--bg-overlay);
  padding: 1.5rem;
  border-radius: 12px;
  width: 75%;
  max-width: 75%;
}

.texte-superpose h1 {
  font-size: 2.5rem;
  margin: 0 0 1rem 0;
  padding: 0;
  font-weight: bold;
  color: var(--text-white);
  text-shadow: 0 2px 4px var(--shadow-dark);
  line-height: 1.2;
  white-space: nowrap;
  margin-block-start: 0;
  margin-block-end: 0;
  margin-inline-start: 0;
  margin-inline-end: 0;
}

.texte-superpose h2 {
  font-size: 1.5rem;
  margin-bottom: 2rem;
  font-weight: normal;
  color: var(--text-white);
  text-shadow: 0 1px 2px var(--shadow-dark);
}

.hero-buttons {
  display: flex;
  gap: 1.5rem;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 1rem;
}

@media (max-width: 768px) {
  .hero-buttons {
    flex-direction: column;
    gap: 1rem;
    align-items: stretch;
  }
  .hero-buttons .btn-primary,
  .hero-buttons .btn-secondary {
    width: 200px;
    margin: 0 auto;
  }
}

@media (max-width: 768px) {
  .texte-superpose {
    position: absolute;
    top: calc(25% + 135px);
    left: 50%;
    transform: translate(-50%, -50%);
    color: var(--text-white);
    text-align: center;
    background: var(--bg-overlay);
    padding: 1.5rem;
    border-radius: 12px;
    width: 100%;
    max-width: 100%;
  }
  .texte-superpose h1 {
    font-size: 2rem;
    line-height: 1.2;
    white-space: nowrap;
    margin: 0 0 1rem 0;
    padding: 0;
  }
  .texte-superpose h2 {
    font-size: 1.2rem;
  }
  .index2 h2, .index3 h2, .index4 h2, .index5 h2 {
    font-size: 1.8rem;
  }
  .index2 h3, .index3 h3, .index4 h3, .index5 h3 {
    font-size: 1.2rem;
  }
}

/* === INDEX2 / INDEX3 / INDEX4 / INDEX5 — alternance texte/image === */

.index2 {
  background-color: var(--white);
  color: var(--color2);
  font-family: 'Inter Tight', sans-serif;
  padding: 0;
  min-height: 400px;
  contain: layout;
}

.index2-content {
  display: flex;
  align-items: center;
  width: 100%;
  gap: 3rem;
  padding: 0 2rem;
}

.index2-text {
  flex: 3;
  padding: 2.5rem;
}

.index2-text p {
  text-align: left;
  line-height: 1.7;
  margin-bottom: 1.5rem;
}

.index2-image {
  flex: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2.5rem;
}

.index2-image img {
  max-width: 100%;
  height: auto;
  border-radius: 12px;
  object-fit: contain;
  box-shadow: 0 4px 16px var(--shadow-medium);
}

.index2-image-mobile,
.index3-image-mobile,
.index4-image-mobile,
.index5-image-mobile {
  display: none;
}

@media (max-width: 900px) {
  .index2-content {
    flex-direction: column;
    gap: 2rem;
    padding: 0 1rem;
  }
  .index2-text {
    order: 1;
    padding: 1.5rem;
    padding-bottom: 0.5rem;
    text-align: center;
  }
  .index2-image-mobile {
    display: block;
    margin: 1.5rem 0;
    text-align: center;
  }
  .index2-image-mobile img {
    max-width: 100%;
    height: auto;
    border-radius: 12px;
    box-shadow: 0 4px 16px var(--shadow-medium);
    object-fit: contain;
  }
  .index2-image {
    display: none;
  }
}

@media (max-width: 1024px) and (min-width: 769px) {
  .index2-image-mobile img,
  .index3-image-mobile img,
  .index4-image-mobile img,
  .index5-image-mobile img {
    max-width: 100%;
    height: auto;
    object-fit: contain;
    background-color: var(--color9);
  }
}

@media (max-width: 768px) {
  .index2-image-mobile img,
  .index3-image-mobile img,
  .index4-image-mobile img,
  .index5-image-mobile img {
    max-width: 100%;
    height: auto;
    object-fit: contain;
    background-color: var(--color9);
  }
}

.index3 {
  background: var(--color9);
  color: var(--color2);
  font-family: 'Inter Tight', sans-serif;
  padding: 0;
  min-height: 400px;
  contain: layout;
}

.index3-content {
  display: flex;
  align-items: center;
  width: 100%;
  gap: 3rem;
  padding: 0 2rem;
}

.index3-text {
  flex: 3;
  padding: 2.5rem;
}

.index3-text p {
  text-align: left;
  line-height: 1.7;
  margin-bottom: 1.5rem;
}

.index3-image {
  flex: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2.5rem;
}

.index3-image img {
  max-width: 100%;
  height: auto;
  border-radius: 12px;
  object-fit: contain;
  box-shadow: 0 4px 16px var(--shadow-medium);
}

@media (max-width: 900px) {
  .index3-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
    padding: 0 1rem;
  }
  .index3-text {
    text-align: center;
    padding: 1.5rem;
    padding-bottom: 0.5rem;
    order: 1;
  }
  .index3-image-mobile {
    display: block;
    margin: 1.5rem 0;
    text-align: center;
  }
  .index3-image-mobile img {
    max-width: 100%;
    height: auto;
    border-radius: 12px;
    box-shadow: 0 4px 16px var(--shadow-medium);
    object-fit: contain;
  }
  .index3-image {
    display: none;
  }
}

.index4 {
  background-color: var(--white);
  color: var(--color2);
  font-family: 'Inter Tight', sans-serif;
  padding: 0;
  min-height: 400px;
  contain: layout;
}

.index4-content {
  display: flex;
  align-items: center;
  width: 100%;
  gap: 3rem;
  padding: 0 2rem;
}

.index4-text {
  flex: 3;
  padding: 2.5rem;
}

.index4-text p {
  text-align: left;
  line-height: 1.7;
  margin-bottom: 1.2rem;
}

.index4-image {
  flex: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2.5rem;
}

.index4-image img {
  max-width: 100%;
  height: auto;
  border-radius: 12px;
  object-fit: contain;
  box-shadow: 0 4px 16px var(--shadow-medium);
  background-color: var(--color9);
}

@media (max-width: 900px) {
  .index4-content {
    flex-direction: column;
    gap: 2rem;
    padding: 0 1rem;
  }
  .index4-text {
    padding: 1.5rem;
    padding-bottom: 0.5rem;
    text-align: center;
  }
  .index4-image-mobile {
    display: block;
    margin: 1.5rem 0;
    text-align: center;
  }
  .index4-image-mobile img {
    max-width: 100%;
    height: auto;
    border-radius: 12px;
    box-shadow: 0 4px 16px var(--shadow-medium);
    object-fit: contain;
  }
  .index4-image {
    display: none;
  }
}

.index5 {
  background: var(--color9);
  color: var(--color2);
  font-family: 'Inter Tight', sans-serif;
  padding: 0;
}

.index5-content {
  display: flex;
  align-items: center;
  width: 100%;
  gap: 3rem;
  padding: 0 2rem;
}

.index5-text {
  flex: 3;
  padding: 2.5rem;
}

.index5-text p {
  text-align: left;
  line-height: 1.7;
  margin-bottom: 1.5rem;
}

.index5-image {
  flex: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2.5rem;
}

.index5-image img {
  max-width: 100%;
  height: auto;
  border-radius: 12px;
  object-fit: contain;
  box-shadow: 0 4px 16px var(--shadow-medium);
  background-color: var(--color9);
}

@media (max-width: 900px) {
  .index5-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
    padding: 0 1rem;
  }
  .index5-text {
    text-align: center;
    padding: 1.5rem;
    padding-bottom: 0.5rem;
    order: 1;
  }
  .index5-image-mobile {
    display: block;
    margin: 1.5rem 0;
    text-align: center;
  }
  .index5-image-mobile img {
    max-width: 100%;
    height: auto;
    border-radius: 12px;
    box-shadow: 0 4px 16px var(--shadow-medium);
    object-fit: contain;
  }
  .index5-image {
    display: none;
  }
}

/* === INDEX6 — Call to action central === */

.index6 {
  background: var(--color3);
  color: var(--white);
  padding: 4rem 2rem;
  text-align: center;
}

.index6-content {
  max-width: 800px;
  margin: 0 auto;
}

.index6 h2 {
  font-size: 2.2rem;
  margin-bottom: 1.5rem;
  font-weight: bold;
  color: var(--white);
  line-height: 1.3;
}

.index6 p {
  font-size: 1.2rem;
  line-height: 1.6;
  margin-bottom: 2.5rem;
  color: var(--white);
}

.index6-buttons {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
}

@media (max-width: 768px) {
  .index6 {
    padding: 3rem 1.5rem;
  }
  .index6 h2 {
    font-size: 1.8rem;
  }
  .index6 p {
    font-size: 1.1rem;
  }
  .index6-buttons {
    flex-direction: column;
    gap: 1rem;
  }
}

/* === Images responsive (regle partagee index2-5) === */

.index2-image img,
.index3-image img,
.index4-image img,
.index5-image img {
  max-width: 100%;
  height: auto;
  margin: 0 auto;
  display: block;
  object-fit: contain;
  border-radius: 12px;
  box-shadow: 0 4px 16px var(--shadow-medium);
}

.index2-image-mobile img,
.index3-image-mobile img,
.index4-image-mobile img,
.index5-image-mobile img {
  max-width: 100%;
  height: auto;
  margin: 0 auto;
  display: block;
  object-fit: contain;
  border-radius: 12px;
  box-shadow: 0 4px 16px var(--shadow-medium);
}

.responsive-img {
  width: 100% !important;
  height: 600px !important;
  object-fit: cover;
  contain: layout;
  display: block;
}