/* Cadrages des visuels présents dans les maquettes validées.
   Ce fichier doit être chargé après styles.css. Les captures sont conservées
   telles quelles dans assets/ ; aucun visuel de remplacement n'est utilisé. */

/* Un même paysage traverse le bandeau d'accueil, les expertises et l'équipe.
   Mettre ces trois sections dans un unique élément .mockup-home-continuum.
   La source hero-approved.png est produite à partir du poulpe fourni. */
.mockup-home-continuum {
  --mockup-home-scene: url('assets/hero-approved.png');
  background-color: #eaf2f5;
  background-image: var(--mockup-home-scene);
  background-position: center top;
  background-repeat: no-repeat;
  background-size: cover;
}

/* Dans le continuum, les fonds des sections restent translucides et ne
   redémarrent pas le même paysage à chaque section. */
.mockup-home-continuum > .hero {
  background: linear-gradient(90deg, rgba(255,255,255,.80), rgba(255,255,255,.34) 43%, rgba(255,255,255,0) 68%);
}
.mockup-home-continuum > .home-expertises {
  background: rgba(255,255,255,.86);
}
.mockup-home-continuum > .about-band {
  background: linear-gradient(90deg, rgba(255,255,255,.82), rgba(255,255,255,.28) 53%, rgba(255,255,255,0) 78%);
}

/* 4 photos exactes de Page 1 - Expertises/Sous page 1.png (1024 × 1536).
   Utiliser une classe de base et une classe de variante sur chaque visuel. */
.mockup-expertise-image {
  display: block;
  width: 100%;
  height: auto;
  min-height: 0;
  border-radius: 5px;
  background-color: #f3f0e8;
  background-image: url('assets/mockup-expertises-desktop.png');
  background-repeat: no-repeat;
}
.mockup-expertise-piloter {
  aspect-ratio: 288 / 196;
  background-size: 355.556% 783.673%;
  background-position: 55.163% 30.597%;
}
.mockup-expertise-operer {
  aspect-ratio: 288 / 221;
  background-size: 355.556% 695.023%;
  background-position: 55.163% 48.289%;
}
.mockup-expertise-structurer {
  aspect-ratio: 288 / 206;
  background-size: 355.556% 745.631%;
  background-position: 55.163% 66.466%;
}
.mockup-expertise-eclairer {
  aspect-ratio: 288 / 200;
  background-size: 355.556% 768%;
  background-position: 55.163% 83.608%;
}

/* Portrait entier de Julien dans Page 2 - Qui sommes nous/Sous page 2.png. */
.mockup-julien-portrait {
  display: block;
  width: 100%;
  height: auto;
  min-height: 0;
  aspect-ratio: 450 / 729;
  border-radius: 9px;
  background-color: #f0efec;
  background-image: url('assets/mockup-equipe-desktop.png');
  background-repeat: no-repeat;
  background-size: 227.556% 210.700%;
  background-position: 8.362% 56.506%;
}

/* Pictogrammes d'expérience présents sur la même maquette. */
.mockup-experience-icon {
  display: block;
  flex: 0 0 auto;
  width: 104px;
  height: 108px;
  border-radius: 50%;
  background-image: url('assets/mockup-equipe-desktop.png');
  background-repeat: no-repeat;
}
.mockup-icon-construction {
  background-size: 984.615% 1422.222%;
  background-position: 59.130% 54.832%;
}
.mockup-icon-maitrise {
  background-size: 984.615% 1422.222%;
  background-position: 59.130% 64.986%;
}
.mockup-icon-promotion {
  background-size: 984.615% 1422.222%;
  background-position: 59.130% 75.280%;
}

/* Rangée des logos validés de Page 0 - Accueil/clients.png (2048 × 768).
   Un conteneur défilant garde les logos lisibles sur petit écran. */
.mockup-clients-track {
  overflow-x: auto;
  overscroll-behavior-inline: contain;
}
.mockup-clients-logos {
  display: block;
  width: 100%;
  min-width: 980px;
  aspect-ratio: 2048 / 170;
  background-image: url('assets/mockup-clients.png');
  background-repeat: no-repeat;
  background-size: 100% auto;
  background-position: center 35.12%;
}

@media (max-width: 700px) {
  .mockup-home-continuum {
    background-position: 61% top;
  }
  .mockup-home-continuum > .hero {
    background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.68) 56%, rgba(255,255,255,.08));
  }
  .mockup-home-continuum > .home-expertises {
    background: rgba(255,255,255,.92);
  }
  .mockup-home-continuum > .about-band {
    background: linear-gradient(90deg, rgba(255,255,255,.85), rgba(255,255,255,.35));
  }
}