/* Page d'accueil : à propos, services, aperçu des réalisations, fournisseurs */

/* --- À propos --- */

.apropos {
  display: grid;
  gap: var(--espace-l);
  align-items: center;
}

.apropos__photo img {
  aspect-ratio: 4 / 5;
  object-fit: cover;
}

.apropos__accroche {
  margin-top: var(--espace-m);
  font-family: var(--police-titre);
  font-size: 1.55rem;
  font-style: italic;
  line-height: 1.4;
  color: var(--encre);
}

.apropos__texte > p:not(.apropos__accroche) {
  color: var(--encre-douce);
}

.apropos__lien {
  display: inline-block;
  margin-top: var(--espace-m);
}

@media (min-width: 768px) {
  .apropos {
    grid-template-columns: 5fr 6fr;
    gap: clamp(3rem, 6vw, 5.5rem);
  }
}

/* --- Services --- */

.services {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--espace-m);
}

.service {
  text-align: center;
}

.service__image {
  max-width: 260px;
  margin: 0 auto var(--espace-m);
}

.service__image img {
  aspect-ratio: 1;
  object-fit: cover;
}

@media (max-width: 767px) {
  .service {
    padding: var(--espace-m);
  }

  .service__image {
    max-width: 190px;
  }
}

/* --- Aperçu des réalisations --- */

.apercu-realisations {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--espace-m);
}

.apercu {
  display: block;
  transition: transform var(--transition);
}

.apercu:hover {
  transform: translateY(-4px);
}

.apercu img {
  aspect-ratio: 4 / 5;
  object-fit: cover;
}

@media (min-width: 768px) {
  .apercu-realisations {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* --- Fournisseurs --- */

/* Rangées centrées : pas de logo orphelin calé à gauche */
.fournisseurs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--espace-s);
}

.fournisseur {
  display: grid;
  place-items: center;
  /* Deux par ligne sur mobile */
  width: min(170px, calc(50% - var(--espace-s) / 2));
  height: 120px;
  padding: var(--espace-s);
  background-color: #fff;
  border: 1px solid var(--or-clair);
}

.fournisseur img {
  max-height: 88px;
  object-fit: contain;
}