/* ===== Hero with photo ===== */
.page-hero.hero-with-photo {
  max-width: 1100px;
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 50px;
  align-items: center;
}

.page-hero-text .hero-lead { max-width: 460px; }

.hero-photo-frame {
    position: relative;
    height: 380px;
    border-radius: 12px;
    overflow: hidden;
}

.slide {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;

    opacity: 0;

    transform: scale(1);

    transition:
        opacity 1.5s ease-in-out,
        transform 6s ease-in-out;

    z-index: 1;
}

.slide.active {
    opacity: 1;
    transform: scale(1.08);
    z-index: 2;
}


/* ===== Metiers section ===== */
.metiers-section {
  padding: 30px 6% 100px;
  max-width: 1180px;
  margin: 0 auto;
}

.metiers-grid {
  margin-top: 36px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 60px;
}

.metiers-col { display: flex; flex-direction: column; }

.metier-row {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  padding: 28px 0;
  border-top: 1px solid rgba(32,32,28,0.1);
}
.metiers-col > .metier-row:last-child { border-bottom: 1px solid rgba(32,32,28,0.1); }

.metier-row.reverse { flex-direction: row-reverse; }

.metier-photo {
  flex-shrink: 0;
  width: 110px;
  height: 110px;
  border-radius: 8px;
  overflow: hidden;
}

.metier-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}


.metier-text { flex: 1; }

.metier-index {
  display: block;
  font-family: var(--font-display);
  font-size: 0.78rem;
  color: var(--terracotta);
  font-weight: 600;
  letter-spacing: 0.06em;
  margin-bottom: 6px;
}

.metier-text h2 {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 500;
  color: var(--forest-deep);
  margin-bottom: 8px;
}

.metier-text p {
  font-size: 0.9rem;
  color: #4a4a43;
}

/* Placeholder color cycle (à remplacer par de vraies photos) */
.metier-photo-1 { background: linear-gradient(150deg, #8a6238, #5e4426); }
.metier-photo-2 { background: linear-gradient(150deg, #2c2c2c, #131313); }
.metier-photo-3 { background: linear-gradient(150deg, #16332c, #0e2420); }
.metier-photo-4 { background: linear-gradient(150deg, #b9aa92, #8c7c63); color: #2c241a; }
.metier-photo-5 { background: linear-gradient(150deg, #aa5a3c, #6e3324); }
.metier-photo-6 { background: linear-gradient(150deg, #cdab68, #8c6f37); color: #2c2410; }
.metier-photo-7 { background: linear-gradient(150deg, #6e4c2a, #4a3017); }
.metier-photo-8 { background: linear-gradient(150deg, #8a3b27, #5c2417); }
.metier-photo-9 { background: linear-gradient(150deg, #4a4a43, #232320); }
.metier-photo-10 { background: linear-gradient(150deg, #9a7a45, #6e4c2a); color: #2c2410; }
.metier-photo-11 { background: linear-gradient(150deg, #5e4426, #2c2c2c); }
.metier-photo-12 { background: linear-gradient(150deg, #7a5c3e, #16332c); }

/* ===== Responsive ===== */
@media (max-width: 900px) {
  .page-hero.hero-with-photo {
    grid-template-columns: 1fr;
    gap: 30px;
  }
  .hero-photo-frame { height: 260px; }
  .metiers-grid { grid-template-columns: 1fr; gap: 0; }
}

@media (max-width: 600px) {
  .metier-photo { width: 86px; height: 86px; font-size: 0.55rem; }
  .metier-row { gap: 14px; }
}