/* metier.css : pages /metiers/<secteur>/<metier> */

.split { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-6); align-items: center; }
.page-hero .cta-row { display: flex; flex-direction: column; gap: var(--s-2); width: 100%; margin-top: var(--s-1); }
.page-hero .cta-row .btn { width: 100%; }
.hero-shot { position: relative; margin: 0; border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-ia); aspect-ratio: 4 / 3; }
.hero-shot img { width: 100%; height: 100%; object-fit: cover; }
.hero-shot figcaption { position: absolute; left: var(--s-2); bottom: var(--s-2); }
.steps-4 .h3 { font-size: var(--fs-20); }
.box .note { font-size: var(--fs-14); color: var(--c-ink-3); }
.voisins-foot { margin-top: var(--s-3); }

@media (min-width: 641px) {
  .page-hero .cta-row { flex-direction: row; flex-wrap: wrap; width: auto; }
  .page-hero .cta-row .btn { width: auto; }
  .steps-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1101px) {
  .split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-8); }
  .steps-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Points clés en ouverture */
.hero-points { display: flex; flex-direction: column; gap: var(--s-1); margin-top: var(--s-2); }
.hero-points li { display: flex; align-items: center; gap: var(--s-1); font-weight: 600; color: var(--c-ink-2); }
.hero-points .ic { color: var(--c-ia); }

@media (min-width: 641px) {
  .hero-points { flex-direction: row; flex-wrap: wrap; gap: var(--s-1h) var(--s-3); }
}

/* Pages métier : bande grise derrière le bas de l'aperçu (les autres touches de couleur sont dans components.css) */
.metier-page #versions { background: linear-gradient(var(--c-bg) 0 55%, var(--c-bg-alt) 55%); }

.metier-page #versions .az { margin-top: var(--s-5); }
/* La section qui suit les versions est grise comme le bas des versions : pas de double marge */
.metier-page #versions { padding-bottom: var(--s-8); }
.metier-page #versions + .sec-alt { padding-top: 0; }