.md-prestations {
	padding: clamp(48px, 7vw, 80px) 24px;
	/* padding-top réduit à part (2026-08-31, retour de Damien) : cette
	   section suit toujours directement .md-hero (accueil et page DJ),
	   dont la bande de confiance a déjà son propre espace de respiration
	   en dessous — garder le rythme clamp(48-80px) complet en plus créait
	   un vide cumulé trop grand entre le hero et la suite de la page. */
	padding-top: clamp(24px, 3vw, 32px);
	/* Fond unifié en crème sur toute la page d'accueil (demande explicite
	   de Damien, 2026-08-29 — un premier essai en blanc neutre a été
	   fait puis annulé le jour même). */
	background: var(--md-cream);
	/* Compense le header sticky quand on arrive via un lien #prestations
	   du menu — sinon le haut de la section reste caché dessous. */
	scroll-margin-top: 90px;
}

.md-prestations__header {
	max-width: 640px;
	margin: 0 auto 32px;
	text-align: center;
}

.md-prestations__header h2 {
	font-size: clamp(28px, 3.8vw, 44px);
	font-weight: 700;
	margin: 0 0 12px;
}

.md-prestations__header p {
	margin: 0;
	color: #4a4a4a;
}

.md-prestations__group {
	max-width: 1100px;
	margin: 0 auto;
}

.md-prestations__group + .md-prestations__group {
	margin-top: 40px;
}

.md-prestations__group-title {
	/* « Location de matériel » / « Prestation technique » un peu plus gros (demande de Damien du 30/09) : 17 px mobile, 20 px dès 1440 px. */
	font-size: clamp(17px, 1.4vw, 20px);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--md-indigo);
	margin: 0 0 14px;
	text-align: center;
}

.md-prestations__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 16px;
}

@media (min-width: 480px) {
	.md-prestations__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 900px) {
	.md-prestations__grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

.md-prestation-card {
	display: block;
	border: 1px solid var(--md-line);
	border-radius: var(--md-radius-card);
	background: var(--md-white);
	text-decoration: none;
	color: inherit;
	overflow: hidden;
}

.md-prestation-card__media {
	aspect-ratio: 16 / 10;
	background-color: var(--md-blue);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

/* Photo du thème en <img> (0.85.6, carte Photobooth de l’accueil) : même cadrage que la photo de fond. */
.md-prestation-card__media > img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* h4 : usage correct (template-parts/prestations-grid.php, carte nichée
   sous un h3 de groupe). h3 : les blocs "maillage" dupliqués sur 6 pages
   (page-animation-dj.php et les 4 pages "location-de-materiel-" + mobilier,
   page-prestation-technique-audiovisuelle.php) utilisaient à tort un h4
   juste après le h2 de section, sans h3 intermédiaire — corrigé le
   2026-08-31 (audit SEO/accessibilité) en h3, cette règle suit le même
   changement pour ne pas perdre le style de titre de carte.
   PIÈGE VÉCU ICI (2026-09-01) : une version antérieure de ce commentaire
   décrivait un motif de fichier en accolant directement une étoile et un
   slash (pour dire "location-de-materiel- n'importe quoi, plus mobilier"),
   séquence qui ferme un commentaire CSS n'importe où elle apparaît, y
   compris dans du texte de commentaire, sans échappement possible. Ça
   coupait ce commentaire en plein milieu et rendait tout le texte suivant
   invalide jusqu'à la fermeture réelle plus bas, ce qui cassait aussi la
   règle h3/h4 juste en dessous — silencieusement, aucune erreur visible,
   juste un espacement de titre qui ne s'appliquait jamais malgré plusieurs
   correctifs successifs sur cette même règle. Ne plus jamais accoler une
   étoile et un slash dans un commentaire CSS, même en prose, même par
   accident — y compris dans un exemple censé mettre en garde contre ça
   (piège retombé une 2e fois pendant la rédaction de ce commentaire même). */
.md-prestation-card h3,
.md-prestation-card h4 {
	font-size: 18px;
	font-weight: 700;
	/* Même espacement des deux côtés du titre (20px), retour de Damien sur
	   capture réelle : le bas (8px) restait bien plus serré que le haut
	   (20px), le titre semblait "collé" au texte de description plutôt que
	   respirer autant au-dessus qu'en dessous. */
	margin: 20px 20px;
}

.md-prestation-card p {
	font-size: 14px;
	color: #6a6a6a;
	margin: 0 20px 20px;
	line-height: 1.5;
}

/* DJ mis en avant : bordure indigo, pas de glow/halo, pas de badge à
   contenu invérifié — juste un contraste net cohérent avec la charte
   (jamais de dégradé/flou généralisé). */
.md-prestation-card--featured {
	border: 2px solid var(--md-indigo);
}

/* Groupe à une seule carte (ex. "DJ", seul dans sa catégorie) — évite
   une grille à 3 colonnes avec 2 cases vides à côté d'une carte perdue
   à gauche : on la centre en largeur réduite, cohérent avec son statut
   de prestation à part (humaine, pas de la simple location de matériel). */
.md-prestations__grid:has(> a:only-child) {
	grid-template-columns: 1fr;
	max-width: 420px;
	margin: 0 auto;
}

/* Groupe à deux cartes (ex. "Audiovisuel") — sur la grille à 3 colonnes
   du desktop, 2 cartes dans 3 pistes laissaient un troisième
   emplacement vide et déséquilibraient la ligne (repéré par Damien sur
   capture réelle, 2026-08-28). On repasse ce groupe précis sur 2
   colonnes pleines plutôt que de laisser un vide "cassé".
   Scopé à min-width:480px (2026-09-01, audit responsive) : sans ce seuil,
   la règle s'appliquait aussi sous 480px et écrasait les 2 cartes
   ("DJ" / "Prestations techniques audiovisuelles") dans des pistes
   d'environ 155px de large au lieu de les empiler comme le reste des
   groupes — pas un débordement, mais illisible. */
@media (min-width: 480px) {
	.md-prestations__grid:has(> a:nth-child(2):last-child) {
		grid-template-columns: repeat(2, 1fr);
		max-width: 700px;
		margin: 0 auto;
	}
}