/* ==========================================================================
   Univers Professionnels / Particuliers — sections partagées entre les deux
   pages (déplacées depuis l'accueil)
   ========================================================================== */

/* --- Atelier : photo découpée + texte défilant + photo pleine, superposées
   (reproduit l'effet de l'ancien site : deux photos identiques, l'une en
   silhouette détourée au premier plan, avec un grand texte qui glisse
   horizontalement au scroll entre les deux). --- */
.atelier-parallax {
  position: relative;
  aspect-ratio: 3 / 2;
  /* Le texte doit déborder du cadre des photos : pas de clip ici. */
  overflow: visible;
  background: var(--color-bg-dark);
}

/* Même photo, même cadrage : fond et silhouette détourée occupent exactement
   la même zone pour se superposer parfaitement. */
.atelier-parallax__bg,
.atelier-parallax__fg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.atelier-parallax__fg {
  z-index: 3;
}

.atelier-parallax__text {
  position: absolute;
  left: 0;
  width: 100%;
  z-index: 2;
  margin: 0;
  text-align: center;
  white-space: nowrap;
  font-size: 200px;
  font-weight: var(--weight-medium);
  text-transform: uppercase;
  color: var(--color-brand);
  will-change: transform;
}

.atelier-parallax__text--1 {
  top: 12%;
  /* Démarre au ras du bord gauche de l'écran, pas du cadre (centré/limité)
     de la section — on sort du conteneur en pleine largeur viewport. */
  left: calc(50% - 50vw);
  width: 100vw;
  text-align: left;
}
.atelier-parallax__text--2 {
  top: 65%;
}

/* --- Matériaux : texte + collage photo stylisé (superposition, comme sur
   l'ancien site) --- */
.materiaux-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: var(--space-8);
  align-items: center;
}

.material-collage {
  position: relative;
  aspect-ratio: 98 / 100;
}

.material-collage__item {
  position: absolute;
  object-fit: cover;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
  transition: transform var(--duration-base) var(--ease-standard), box-shadow var(--duration-base) var(--ease-standard),
    opacity var(--duration-slow) var(--ease-standard);
}

.material-collage__item:hover {
  transform: scale(1.04);
  box-shadow: var(--shadow-lg);
  z-index: 10;
}

/* Positions reprises de la mise en page originale du site (proportions
   relevées sur mzboisetcompagnie.com), en % pour rester fluide. */
.material-collage__item--1 {
  left: 13.5%;
  top: 0%;
  width: 19%;
  height: 18.5%;
}
.material-collage__item--2 {
  left: 3%;
  top: 23%;
  width: 43%;
  height: 41.5%;
}
.material-collage__item--3 {
  left: 0%;
  top: 68.5%;
  width: 32.5%;
  height: 31.5%;
}
.material-collage__item--4 {
  left: 36.5%;
  top: 16.5%;
  width: 35%;
  height: 72.5%;
}
.material-collage__item--5 {
  left: 75.5%;
  top: 0%;
  width: 20%;
  height: 28%;
}
.material-collage__item--6 {
  left: 75.5%;
  top: 32%;
  width: 7%;
  height: 8%;
}
.material-collage__item--7 {
  left: 75.5%;
  top: 44.5%;
  width: 24.5%;
  height: 18.5%;
}

/* En dessous d'une certaine taille, le collage superposé devient illisible
   (certaines vignettes ne mesurent plus que quelques pixels) : on repasse en
   mosaïque simple, empilée sous le texte. */
@media (max-width: 720px) {
  .materiaux-layout {
    grid-template-columns: 1fr;
  }
  .material-collage {
    aspect-ratio: auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(6rem, 1fr));
    gap: var(--space-3);
    margin-top: var(--space-6);
  }
  .material-collage__item {
    position: static;
    width: 100%;
    height: 100%;
    aspect-ratio: 1;
  }
}