/* Pages internes generees par build.py : articles, metiers, index actualites.
   Feuille separee plutot que des ajouts dans styles.css — ces pages n'existent
   que depuis le 22/09/2026 et leurs styles doivent pouvoir evoluer sans
   toucher a la page d'accueil, qui est le coeur du site. */

.mps-page {
  padding: 120px 0 64px;
  background: #f7f8fb;
  min-height: 60vh;
}

.mps-page .container {
  max-width: 820px;
}

/* Fil d'Ariane */
.mps-fil {
  font-size: 0.82rem;
  color: #6b7280;
  margin-bottom: 20px;
}

.mps-fil a {
  color: #12275c;
  text-decoration: none;
}

.mps-fil a:hover {
  text-decoration: underline;
}

/* Blocs de contenu */
.mps-article,
.mps-service {
  background: #fff;
  border: 1px solid rgba(18, 39, 92, 0.12);
  border-radius: 16px;
  padding: 28px;
}

.mps-page h1 {
  font-family: 'Poppins', sans-serif;
  font-size: clamp(1.5rem, 4vw, 2.1rem);
  line-height: 1.25;
  color: #12275c;
  margin: 0 0 14px;
}

.mps-page h2 {
  font-family: 'Poppins', sans-serif;
  font-size: 1.15rem;
  color: #12275c;
  margin: 28px 0 12px;
}

.mps-page p {
  font-size: 1rem;
  line-height: 1.7;
  color: #374151;
  margin: 0 0 14px;
}

.mps-chapo {
  font-size: 1.06rem !important;
  color: #4b5563 !important;
  font-weight: 500;
}

.mps-meta {
  font-size: 0.8rem !important;
  color: #6b7280 !important;
  margin-bottom: 8px !important;
}

.mps-cat {
  display: inline-block;
  background: rgba(18, 39, 92, 0.08);
  color: #12275c;
  font-weight: 600;
  border-radius: 999px;
  padding: 2px 10px;
}

/* L'image porte width/height dans le HTML pour reserver sa place et eviter le
   saut de mise en page ; ces regles la rendent malgre tout responsive. */
.mps-illus {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px;
  margin: 18px 0 22px;
  background: rgba(18, 39, 92, 0.04);
}

.mps-suite {
  border-top: 1px solid rgba(18, 39, 92, 0.1);
  padding-top: 14px;
  margin-top: 22px !important;
  font-size: 0.94rem !important;
}

.mps-suite a,
.mps-voisins a {
  color: #12275c;
  font-weight: 600;
}

/* Prestations d'une page metier */
.mps-prestations {
  margin: 0;
}

.mps-prestations dt {
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  color: #12275c;
  margin-top: 16px;
}

.mps-prestations dd {
  margin: 4px 0 0;
  color: #374151;
  line-height: 1.65;
}

/* Listes de liens internes */
.mps-voisins {
  background: #fff;
  border: 1px solid rgba(18, 39, 92, 0.12);
  border-radius: 16px;
  padding: 22px 28px;
  margin-top: 22px;
}

.mps-voisins h2 {
  margin-top: 0;
}

.mps-voisins h2 a {
  color: #12275c;
  text-decoration: none;
}

.mps-voisins ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.mps-voisins li {
  padding: 12px 0;
  border-top: 1px solid rgba(18, 39, 92, 0.08);
  line-height: 1.55;
}

.mps-voisins li:first-child {
  border-top: 0;
}

.mps-voisins li span {
  color: #6b7280;
  font-size: 0.9rem;
}

/* Appel a l'action de bas de page */
.mps-cta {
  background: #12275c;
  border-radius: 16px;
  padding: 28px;
  margin-top: 24px;
  text-align: center;
}

.mps-cta h2 {
  color: #fff !important;
  margin-top: 0 !important;
}

.mps-cta p {
  color: rgba(255, 255, 255, 0.82) !important;
}

.mps-cta-lignes {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  justify-content: center;
  margin-bottom: 18px !important;
}

.mps-cta-lignes a {
  color: #fff;
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.35);
}

@media (max-width: 640px) {
  .mps-page {
    padding: 96px 0 48px;
  }

  .mps-article,
  .mps-service,
  .mps-voisins,
  .mps-cta {
    padding: 20px;
  }
}