/**
 * Bloc « mein/prestations-grid » — grille de cartes de prestations.
 *
 * Styles en CLASSES uniquement (aucun style inline dans render.php).
 * Fidèle à la section « Autres prestations » de la maquette (Prestation.dc.html).
 * Réutilise les tokens de theme.json (crème, sauge, terracotta, titres, polices).
 *
 * Deux niveaux de variante de couleur :
 *  - SECTION (.mein-grid.is-*) : couleur de l'eyebrow + du filet, dérivée de la
 *    source (approche/soins/auto).
 *  - CARTE (.mein-grid-card.is-*) : accent propre à la catégorie de chaque
 *    prestation (sur-titre = accentEye, lien « Découvrir » = accent).
 *
 * Enqueue automatique : déclaré via « style » dans block.json, WordPress ne
 * charge cette feuille que lorsque le bloc est présent sur la page.
 */

/* -----------------------------------------------------------------------
 * Section : conteneur centré, padding fluide repris du design.
 * -------------------------------------------------------------------- */

.mein-grid {
	/* Variables d'accent de SECTION (eyebrow + filet). Défaut = sauge. */
	/* Texte eyebrow : sauge-fonce pour contraste AA (>= 4.5:1). Le filet
	   décoratif garde sauge-brumeux (background, non soumis au ratio texte). */
	--mein-grid-eye: var(--wp--preset--color--sauge-fonce);
	--mein-grid-line: var(--wp--preset--color--sauge-brumeux);
}

.mein-grid.is-terracotta {
	/* terracotta-fonce assombri en v0.4.0 (#B5786A → #9E5D4F) : 4.76:1 sur crème,
	   AA 1.4.3 désormais atteint. L'ancienne valeur plafonnait à ~3.35:1 et faisait
	   l'objet d'une exception assumée, écartée depuis (un sur-titre porte de
	   l'information, il n'entre dans aucune des trois exemptions de 1.4.3). */
	--mein-grid-eye: var(--wp--preset--color--terracotta-fonce);
	--mein-grid-line: var(--wp--preset--color--rose-pale);
}

.mein-grid__inner {
	max-width: 1180px;
	margin: 0 auto;
	padding: clamp(56px, 7vw, 104px) clamp(20px, 5vw, 64px);
}

/* -----------------------------------------------------------------------
 * En-tête de section : eyebrow (sur-titre) + filet.
 * -------------------------------------------------------------------- */

.mein-grid__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	margin-bottom: 30px;
}

.mein-grid__eyebrow-texte {
	/* Neutralise la marge UA du titre h2 (l'eyebrow « Autres prestations » est un
	   titre réel : hiérarchie a11y) tout en conservant l'apparence eyebrow d'origine. */
	margin: 0;
	font-family: var(--wp--preset--font-family--sans);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.26em;
	text-transform: uppercase;
	color: var(--mein-grid-eye);
}

.mein-grid__filet {
	width: 42px;
	height: 1px;
	background: var(--mein-grid-line);
}

/* -----------------------------------------------------------------------
 * Grille : auto-fit gère seule le nombre variable de cartes.
 * -------------------------------------------------------------------- */

.mein-grid__grille {
	display: grid;
	/* min(100%, 280px) : garde-fou anti-débordement sur écran < 280px,
	   cohérent avec les grilles tarifs/cartes. */
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
	gap: 26px;
}

/* -----------------------------------------------------------------------
 * Carte : lien pleine surface, colonne, accent propre à la catégorie.
 * -------------------------------------------------------------------- */

.mein-grid-card {
	/* Variables d'accent de CARTE. Défaut = sauge. */
	/* Libellé de catégorie (majuscules) : sauge-fonce pour AA (>= 4.5:1). */
	--mein-card-eye: var(--wp--preset--color--sauge-fonce);

	/*
	 * DEUX jetons d'accent, et pas un seul, parce que les deux usages n'ont pas le
	 * même seuil (correctif d'audit) :
	 *  - « accent »       : l'anneau de focus, NON TEXTUEL, seuil 3:1 (WCAG 1.4.11).
	 *                       Le sauge sur la carte crème donne 4,32:1, il convient.
	 *  - « accent-texte » : le libellé « Découvrir », qui est du TEXTE, seuil 4,5:1.
	 *                       Le sauge n'y donne que 4,32:1, d'où le sauge-fonce à
	 *                       5,60:1. Cf. règle de charte, assets/css/main.css.
	 * Les confondre était précisément l'erreur : une même teinte ne peut pas servir
	 * les deux seuils.
	 */
	--mein-card-accent: var(--wp--preset--color--sauge);
	--mein-card-accent-texte: var(--mein-sauge-sur-clair);

	display: flex;
	flex-direction: column;
	text-decoration: none;
	background: var(--wp--preset--color--creme);
	border: 1px solid rgba(59, 50, 43, 0.06);
	border-radius: 22px;
	overflow: hidden; /* clippe l'image aux angles arrondis */
	box-shadow: 0 20px 46px -38px rgba(74, 63, 53, 0.4);
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.mein-grid-card.is-terracotta {
	--mein-card-eye: var(--wp--preset--color--terracotta-fonce);
	--mein-card-accent: var(--wp--preset--color--terracotta);
	/* Le terracotta plein ne donne que 2,68:1 sur la carte crème : inutilisable en
	   texte. Terracotta foncé : 4,76:1. */
	--mein-card-accent-texte: var(--wp--preset--color--terracotta-fonce);
}

.mein-grid-card:hover,
.mein-grid-card:focus-visible {
	transform: translateY(-5px);
	box-shadow: 0 30px 60px -38px rgba(74, 63, 53, 0.5);
}

/* Focus clavier visible (accessibilité). */
.mein-grid-card:focus-visible {
	outline: 2px solid var(--mein-card-accent);
	outline-offset: 3px;
}

/* -----------------------------------------------------------------------
 * Média : hauteur fixe, image couvrante ou placeholder neutre.
 * -------------------------------------------------------------------- */

.mein-grid-card__media {
	position: relative;
	height: 170px;
	overflow: hidden;
	background: var(--wp--preset--color--vert-voile);
}

.mein-grid-card.is-terracotta .mein-grid-card__media {
	background: var(--wp--preset--color--rose-pale-bg);
}

.mein-grid-card__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.5s ease;
}

.mein-grid-card:hover .mein-grid-card__image,
.mein-grid-card:focus-visible .mein-grid-card__image {
	transform: scale(1.04);
}

/* Placeholder décoratif quand la prestation n'a pas d'image à la une. */
.mein-grid-card__placeholder {
	display: block;
	width: 100%;
	height: 100%;
	background:
		radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.45), rgba(255, 255, 255, 0));
}

/* -----------------------------------------------------------------------
 * Corps de carte : catégorie (accentEye), titre, lien « Découvrir ».
 * -------------------------------------------------------------------- */

.mein-grid-card__corps {
	display: flex;
	flex: 1;
	flex-direction: column;
	padding: 24px 24px 28px;
}

.mein-grid-card__categorie {
	margin-bottom: 12px;
	font-family: var(--wp--preset--font-family--sans);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--mein-card-eye);
}

.mein-grid-card__titre {
	margin: 0 0 14px;
	font-family: var(--wp--preset--font-family--serif);
	font-weight: 600;
	font-size: 23px;
	line-height: 1.18;
	color: var(--wp--preset--color--titres);
	text-wrap: balance;
}

.mein-grid-card__lien {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: auto; /* pousse le lien en bas → cartes alignées */
	font-family: var(--wp--preset--font-family--sans);
	font-size: 12.5px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	/* Jeton de TEXTE, pas le jeton d'anneau : voir le commentaire sur .mein-grid-card.
	   La flèche n'a pas de couleur propre, elle hérite d'ici. */
	color: var(--mein-card-accent-texte);
}

.mein-grid-card__fleche {
	font-size: 16px;
	transition: transform 0.25s ease;
}

.mein-grid-card:hover .mein-grid-card__fleche,
.mein-grid-card:focus-visible .mein-grid-card__fleche {
	transform: translateX(4px);
}

/* -----------------------------------------------------------------------
 * Responsive : sur très petit écran, une seule colonne fluide.
 * (auto-fit + minmax gère déjà l'essentiel ; on borne le minmax.)
 * -------------------------------------------------------------------- */

@media (max-width: 360px) {
	.mein-grid__grille {
		grid-template-columns: 1fr;
	}
}

/* -----------------------------------------------------------------------
 * Respect de prefers-reduced-motion : on coupe transforms et transitions.
 * -------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {

	.mein-grid-card,
	.mein-grid-card__image,
	.mein-grid-card__fleche {
		transition: none;
	}

	.mein-grid-card:hover,
	.mein-grid-card:focus-visible,
	.mein-grid-card:hover .mein-grid-card__image,
	.mein-grid-card:focus-visible .mein-grid-card__image,
	.mein-grid-card:hover .mein-grid-card__fleche,
	.mein-grid-card:focus-visible .mein-grid-card__fleche {
		transform: none;
	}
}