/* metiers.css, les métiers de la maison.

   La page présentait huit encadrés identiques, séparés par rien. Elle suit
   maintenant la chaîne du livre : trois étapes numérotées, et dans chacune
   les fonctions qui y interviennent. */

/* --- La tête d'une étape ------------------------------------------------- */
.etape-tete {
  display: flex; align-items: flex-start; gap: var(--e3);
  margin-bottom: var(--e4);
}
.etape-numero {
  flex: 0 0 56px; width: 56px; height: 56px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--bleu-voile); color: var(--bleu);
  font-family: var(--font-titre); font-size: 1.5rem; font-weight: 800;
  letter-spacing: -.03em;
}
.etape-tete h2 { font-size: var(--t-h3); margin: 0 0 .35rem; }
.etape-tete p { margin: 0; color: var(--encre-douce); max-width: 60ch; }

/* --- Les fonctions ------------------------------------------------------- */
.grille-metiers {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: var(--e3);
}
.metier {
  background: var(--blanc);
  border: 1px solid var(--ligne); border-radius: var(--r);
  padding: var(--e3);
  box-shadow: var(--ombre-carte);
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.metier:hover {
  transform: translateY(-4px);
  border-color: var(--bleu);
  box-shadow: var(--ombre-livre-levee);
}
.metier-icone {
  display: grid; place-items: center;
  width: 48px; height: 48px; margin-bottom: var(--e2);
  border-radius: var(--r-petit);
  background: var(--bleu-voile); color: var(--bleu);
}
.metier-icone svg { width: 24px; height: 24px; }
.metier h3 { font-size: 1.08rem; line-height: 1.25; margin-bottom: .45rem; }
.metier p { font-size: var(--t-petit); color: var(--encre-douce); margin: 0; }

/* --- La bande de clôture ------------------------------------------------- */
.bande-metiers {
  display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, auto);
  gap: var(--e4); align-items: center;
}
@media (max-width: 900px) { .bande-metiers { grid-template-columns: 1fr; gap: var(--e3); } }
.bande-metiers h2 { margin-bottom: .6rem; }
.bande-metiers p { color: #B9C9EA; margin: 0; max-width: 56ch; }
.bande-metiers-boutons { display: flex; flex-wrap: wrap; gap: .7rem; }

/* La note du bandeau : une précision, pas un avertissement encadré. */
.bandeau p.bandeau-note {
  font-size: var(--t-mini); color: var(--encre-tenue);
  max-width: 62ch; margin-top: var(--e3);
  padding-top: var(--e2); border-top: 1px solid var(--ligne);
}