@import '../root.css';

/* Structure de base */
.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-padding);

}
.containera{
  /* background-color: aqua; */
  padding-left: 10%;
}

/* Section Hero */
.hero {
  padding: var(--space-xxl) var(--container-padding-mobile) var(--space-xxl);
  text-align: center;
  margin: 0 auto;
  margin-bottom: 200px;
  margin-top: 80px;
}

.hero__title {
  font-family: var(--font-primary);
  font-size: var(--font-size-huge);
  font-weight: 300;
  line-height: 1.2;
  margin-bottom: 2.5rem;
}

.hero__subtitle {
  font-family: var(--font-tertiary);
  font-size: var(--font-size-medium);
  color: var(--color-text-light);
}

/* Section Services */
.services {
  display: flex;
  flex-direction: column;
  gap: 200px;
  margin: 0 auto;
  max-width: var(--container-max);
  margin-bottom: 200px;
  padding-bottom: var(--space-xxl);
}

.service {
  display: flex;
  position: relative;
  height: 300px;
  transition: transform var(--transition-fast);
}

.service:hover {
  transform: translateY(-5px);
}

.service:nth-child(odd) {
  justify-content: flex-start;
}

.service:nth-child(even) {
  justify-content: flex-end;
}

.service:nth-child(odd) .service__bg {
  left: 0;
}

.service:nth-child(even) .service__bg {
  right: 0;
}

.service__title {
  font-family: var(--font-primary);
  font-size: var(--font-size-huge);
  font-weight: 300;
  z-index: 2;
  position: absolute;
  pointer-events: none;
  transition: color var(--transition-fast);
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-secondary);
}
.service__bg{
  filter: brightness(0.5);
}

/* Positionnement spécifique pour chaque titre */
.service:nth-child(1) .service__title {
  right: 5%;
}

.service:nth-child(2) .service__title {
  left: 5%;
}

.service:nth-child(3) .service__title {
  right: 23%;
}

.service:nth-child(4) .service__title {
  left: 5%;
}

.service__bg {
  position: absolute;
  z-index: 1;
  transition: background-color var(--transition-fast);
  width: 60%;
  height: 368px;
  object-fit: cover;
}

.service__link {
  position: absolute;
  z-index: 3;
  width: 100%;
  height: 100%;
  display: block;
}

/* États de survol */
.service:hover .service__title {
  color: var(--color-primary);
}

/* Section Méthodologie de Projet */
.methodology {
  background-color: var(--color-bg-light);
  padding: 80px 0 120px;
  margin-bottom: 30px;
}

.methodology__title {
  font-family: var(--font-primary);
  font-size: var(--font-size-xlarge);
  font-weight: 300;
  margin-bottom: 110px;
}

.methodology__grid {
  display: grid;
  grid-template-columns: 30% 70%;
  row-gap: 50px;
}

.methodology__step-number {
  font-family: var(--font-tertiary);
  font-size: var(--font-size-large);
  font-weight: 500;
  padding-right: var(--space-md);
  padding-top: 3px;
  white-space: nowrap;
  letter-spacing: 3px;
}

.methodology__content {
  margin-top: 60px;
  padding-left: 20%;
}

.methodology__description {
  font-size: var(--font-size-medium);
  line-height: 1.6;
  color: var(--color-text-light);
  margin: 0;
}

/* Section Partenariat */
.partnership {
  padding: 80px 0 120px;
  margin-bottom: 30px;
}

.partnership__title {
  font-family: var(--font-primary);
  font-size: var(--font-size-xlarge);
  font-weight: 300;
  margin-bottom: 110px;
}

.row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 30px; /* Ajoute un espacement uniforme entre les éléments */
}

.partnership__container {
  flex: 1;
  min-width: 300px;
}

.partnership__description {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  gap: 120px; /* Réduit l'écart entre les paragraphes */
  max-width: 500px;
}

.partnership__description p {
  font-size: 24px;
  margin: 0; /* Évite les marges supplémentaires */
}

.partnership__image-container {
  /* flex: 1; */
  min-width: 300px;
  display: flex;
  align-items: center; /* Centre verticalement l'image */
}

.partnership__image {
  max-width: 100%;
  height: auto;
}

/* Media Queries pour la responsivité */
@media (max-width: 992px) {
  .methodology__grid {
    grid-template-columns: 1fr;
  }
  
  .methodology__content {
    padding-left: 0;
  }
  
  .row {
    flex-direction: column;
    gap: 50px; /* Réduit l'espace en responsive */
  }
  
  .partnership__image-container {
    order: 2; /* Force l'image à apparaître en second */
    margin-top: 0; /* Supprime la marge supérieure excessive */
  }
  
  .partnership__container {
    order: 1; /* Force le texte à apparaître en premier */
  }
  
  .partnership__description {
    width: 100%;
    max-width: 100%; /* Permet au contenu de s'adapter à la largeur disponible */
    margin-bottom: 0; /* Supprime la marge inférieure excessive */
    gap: 40px; /* Réduit l'espace entre les paragraphes en responsive */
  }
}

@media (max-width: 768px) {
  .hero__title {
    font-size: calc(var(--font-size-huge) * 0.8);
  }
  
  .service {
    height: 220px;
    margin: 0 auto;
    width: 90%;
  }
  
/* Modification principale pour les services */
.service {
  position: relative;
}

.service__bg {
  width: 100%;
  height: 280px;
  /* Appliquer directement un filtre d'assombrissement à l'image */
  filter: brightness(0.5) !important;
}

.service__title {
  font-size: var(--font-size-xlarge);
  width: 100%;
  text-align: center;
  color: white; /* Texte en blanc */
  padding: 10px 15px;
  left: 50%;
  transform: translate(-50%, -50%);
  right: auto;
  z-index: 2; /* Assure que le texte est au-dessus de l'image */
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.8); /* Ajoute une ombre au texte pour plus de lisibilité */
}
  
  /* Assure que tous les services ont la même disposition en mobile */
  .service:nth-child(odd),
  .service:nth-child(even) {
    justify-content: center;
  }
  
  .service:nth-child(odd) .service__bg,
  .service:nth-child(even) .service__bg {
    left: 0;
    right: 0;
    margin: 0 auto;
  }
  
  /* Réinitialise les positionnements spécifiques pour mobile */
  .service:nth-child(1) .service__title,
  .service:nth-child(2) .service__title,
  .service:nth-child(3) .service__title,
  .service:nth-child(4) .service__title {
    left: 50%;
    right: auto;
  }
  
  .methodology__title {
    margin-bottom: 60px;
  }
}

@media (max-width: 576px) {
  .hero__title {
    font-size: calc(var(--font-size-huge) * 0.6);
  }
  
  .hero__subtitle {
    font-size: var(--font-size-base);
  }
  
  .hero,
  .services,
  .methodology,
  .partnership {
    margin-bottom: 100px;
  }
  
  .services {
    gap: 120px; /* Réduit l'espace entre les cartes */
  }
  
  .service {
    height: 180px;
    width: 100%;
  }
  
  .service__bg {
    width: 100%;
    height: 240px;
    /* Appliquer directement un filtre d'assombrissement à l'image */
    filter: brightness(0.5); /* Assombrit l'image à 50% */
  }
  
  .service:nth-child(odd) .service__title,
  .service:nth-child(even) .service__title {
    left: 50%;
    right: auto;
    transform: translate(-50%, -50%);
    text-align: center;
    width: 80%;
    font-weight: 400; /* Un peu plus gras pour la lisibilité */
    font-size: calc(var(--font-size-xlarge) * 0.9);
    color: white; /* Texte en blanc */
    z-index: 2; /* Pour placer le texte au-dessus du filtre noir */
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.8); /* Ombre pour la lisibilité */
  }
  
  .partnership {
    padding: 50px 0 70px; /* Réduire le padding vertical en petit écran */
  }
  
  .partnership__title {
    margin-bottom: 50px; /* Réduire l'espace sous le titre */
    font-size: calc(var(--font-size-xlarge) * 0.8); /* Réduire légèrement la taille du titre */
  }
  
  .partnership__description {
    gap: 30px; /* Encore moins d'espace entre les paragraphes sur très petits écrans */
  }
  
  .partnership__description p {
    font-size: 18px;
  }
  
  .methodology__description {
    font-size: var(--font-size-base);
  }
}
@media (max-width: 576px) {
  .hero__title {
    font-size: calc(var(--font-size-huge) * 0.6);
  }
  
  .hero__subtitle {
    font-size: var(--font-size-base);
  }
  
  .hero,
  .services,
  .methodology,
  .partnership {
    margin-bottom: 100px;
  }
  
  .services {
    gap: 120px; /* Réduit l'espace entre les cartes */
  }
  
  .service {
    height: 180px;
    width: 100%;
  }
  
  .service__bg {
    width: 100%;
    height: 240px;
  }
  
  .service:nth-child(odd) .service__title,
  .service:nth-child(even) .service__title {
    left: 50%;
    right: auto;
    transform: translate(-50%, -50%);
    text-align: center;
    width: 80%;
    font-weight: 400; /* Un peu plus gras pour la lisibilité */
    font-size: calc(var(--font-size-xlarge) * 0.9);
  }
  
  .partnership {
    padding: 50px 0 70px; /* Réduire le padding vertical en petit écran */
  }
  
  .partnership__title {
    margin-bottom: 50px; /* Réduire l'espace sous le titre */
    font-size: calc(var(--font-size-xlarge) * 0.8); /* Réduire légèrement la taille du titre */
  }
  
  .partnership__description {
    gap: 30px; /* Encore moins d'espace entre les paragraphes sur très petits écrans */
  }
  
  .partnership__description p {
    font-size: 18px;
  }
  
  .methodology__description {
    font-size: var(--font-size-base);
  }
}