/**
 * Bloc « mein/tarifs » — grille de cartes de tarifs.
 *
 * Styles en CLASSES uniquement (aucun style inline dans render.php).
 * Fidèle à la maquette « ME-IN Studio - Tarifs » (section GRILLE TARIFS).
 * Réutilise exclusivement les tokens de theme.json : couleurs (sable,
 * sable-fonce, creme, titres, texte, texte-discret, or-sable, sauge, terracotta,
 * rose-terre) et polices (serif / sans). AUCUNE couleur codée en dur : les
 * bordures et ombres sont dérivées d'un token via color-mix().
 *
 * La teinte du sur-titre et des prix est pilotée par la classe de variante posée
 * sur la carte (.is-sauge / .is-terracotta), elle-même issue du champ
 * « couleur_prix » du répéteur (voir render.php).
 *
 * 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 : fond en dégradé vertical sable → sable foncé ------------ */

.mein-tarifs {
	position: relative;
	overflow: hidden; /* garde-fou : aucun débordement horizontal de page */
	background: linear-gradient(
		180deg,
		var(--wp--preset--color--sable) 0%,
		var(--wp--preset--color--sable-fonce) 100%
	);
}

/* --- Conteneur centré --------------------------------------------------- */
/* Padding fluide aligné sur les autres blocs de section pour la cohérence. */

.mein-tarifs__inner {
	position: relative;
	z-index: 1;
	max-width: 1120px;
	margin: 0 auto;
	padding: clamp(56px, 7vw, 108px) clamp(20px, 5vw, 64px);
}

/* --- Grille : auto-fit (gère seule 2, 3, 4 cartes) --------------------- */
/* min(100%, 280px) évite tout débordement sur écran plus étroit que 280px. */

.mein-tarifs__grille {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
	gap: 24px;
	align-items: stretch; /* toutes les cartes d'une rangée à la même hauteur */
}

/*
 * Mode « hauteurs figées », posé par view.js UNIQUEMENT.
 *
 * En « stretch », déplier une carte ferait grandir toute sa rangée : les voisines
 * bougeraient, ce que le client refuse. Le script mesure donc la hauteur de chaque
 * RANGÉE à l'état replié, la fige en min-height sur chaque carte, et bascule ici
 * en « start » : l'état replié reste visuellement identique au stretch, mais une
 * carte dépliée dépasse seule, sans entraîner ses voisines.
 *
 * Sans JavaScript, cette classe n'existe pas : on garde le comportement actuel.
 */
.mein-tarifs__grille.is-hauteurs-figees {
	align-items: start;
}

/* --- Carte : fond crème, bordure fine, radius, ombre douce ------------- */

.mein-tarifs__carte {
	display: flex;
	flex-direction: column;
	/*
	 * border-box : la min-height posée par view.js est mesurée sur la boîte de
	 * bordure (getBoundingClientRect). En content-box, la même valeur ajouterait
	 * padding et bordure par-dessus et gonflerait les cartes. Sans effet sur la
	 * mise en page actuelle (largeur et hauteur sont en « auto » dans la grille).
	 */
	box-sizing: border-box;
	padding: clamp(28px, 3.4vw, 34px) clamp(24px, 3vw, 30px);
	background: var(--wp--preset--color--creme);
	/* Bordure fine dérivée du token « titres » (pas de couleur en dur). */
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--titres) 8%, transparent);
	border-radius: 24px;
	/* Ombre douce dérivée du token « titres » (pas de rgba en dur). */
	box-shadow: 0 20px 44px -30px color-mix(in srgb, var(--wp--preset--color--titres) 40%, transparent);
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.mein-tarifs__carte:hover {
	transform: translateY(-3px);
	box-shadow: 0 26px 54px -28px color-mix(in srgb, var(--wp--preset--color--titres) 46%, transparent);
}

/* --- Sur-titre (eyebrow) ----------------------------------------------- */
/* Couleur posée plus bas selon la variante de carte. */

.mein-tarifs__eyebrow {
	margin: 0 0 14px;
	font-family: var(--wp--preset--font-family--sans);
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: 0.24em;
	line-height: 1.3;
	text-transform: uppercase;
}

/* --- Titre de carte (H3) : Cormorant 600 ------------------------------- */

.mein-tarifs__titre {
	margin: 0 0 12px;
	font-family: var(--wp--preset--font-family--serif);
	font-weight: 600;
	font-size: clamp(22px, 2.4vw, 26px);
	line-height: 1.15;
	color: var(--wp--preset--color--titres);
	text-wrap: balance;
}

/* --- Description -------------------------------------------------------- */

.mein-tarifs__desc {
	margin: 0 0 24px;
	font-family: var(--wp--preset--font-family--sans);
	font-size: 14.5px;
	line-height: 1.6;
	/* Contraste AA : token « texte » (≥ 4.5:1) au lieu de « texte-discret ». */
	color: var(--wp--preset--color--texte);
}

/* --- Bloc des prix : poussé en bas de carte ---------------------------- */
/*
 * Le margin-top:auto vit désormais sur ce conteneur et non sur la liste : les
 * lignes repliées (details) doivent être poussées en bas AVEC la liste, en un seul
 * bloc. Rendu identique à l'ancien « margin: auto 0 0 » sur la liste.
 */

.mein-tarifs__prix {
	margin-top: auto;
}

/* --- Lignes (répéteur imbriqué) ---------------------------------------- */

.mein-tarifs__lignes {
	list-style: none;
	margin: 0;
	padding: 0;
}

.mein-tarifs__ligne {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 16px;
	padding: 14px 0;
	/* Filet fin dérivé du token « titres » (pas de couleur en dur). */
	border-top: 1px solid color-mix(in srgb, var(--wp--preset--color--titres) 10%, transparent);
}

.mein-tarifs__ligne-libelle {
	min-width: 0; /* autorise le libellé à se réduire → pas de débordement */
	font-family: var(--wp--preset--font-family--sans);
	font-size: 15px;
	line-height: 1.4;
	color: var(--wp--preset--color--texte);
}

.mein-tarifs__ligne-prix {
	flex: none; /* le prix ne se comprime pas */
	font-family: var(--wp--preset--font-family--serif);
	font-weight: 600;
	font-size: clamp(20px, 2.2vw, 23px);
	line-height: 1.1;
	white-space: nowrap;
}

/* --- Repli des lignes au-delà du seuil (details / summary natif) ------- */
/*
 * <details> plutôt qu'un bouton JavaScript : les prix repliés sont dans le HTML
 * servi (indexables), déjà repliés à l'arrivée (aucun clignotement), dépliables
 * sans script, et l'état ouvert / fermé est exposé nativement aux lecteurs
 * d'écran. Le clavier fonctionne sans une ligne de code.
 */

.mein-tarifs__plus-declencheur {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 14px 0;
	/* Même filet que les lignes : le bouton s'inscrit dans la même trame. */
	border-top: 1px solid color-mix(in srgb, var(--wp--preset--color--titres) 10%, transparent);
	cursor: pointer;
	font-family: var(--wp--preset--font-family--sans);
	font-size: 13.5px;
	font-weight: 600;
	line-height: 1.4;
	/* Même token que la description : contraste AA sur la carte crème. */
	color: var(--wp--preset--color--texte);
	/* Retire le triangle natif (Chrome / Firefox), avec display:flex ci-dessus. */
	list-style: none;
}

/* Retrait du marqueur natif : ::marker pour les moteurs récents… */
.mein-tarifs__plus-declencheur::marker {
	content: '';
}

/* …et ::-webkit-details-marker pour Safari, qui ignore encore le précédent. */
.mein-tarifs__plus-declencheur::-webkit-details-marker {
	display: none;
}

/* Chevron dessiné en CSS, teinté par currentColor (aucune couleur nouvelle). */
.mein-tarifs__plus-declencheur::after {
	content: '';
	flex: none;
	width: 7px;
	height: 7px;
	margin-top: -4px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg);
	transition: transform 0.2s ease;
}

.mein-tarifs__plus[open] .mein-tarifs__plus-declencheur::after {
	margin-top: 2px;
	transform: rotate(-135deg);
}

/* Bascule du libellé « Voir » / « Masquer » : en CSS pur, donc sans script. */
.mein-tarifs__plus-label--masquer {
	display: none;
}

.mein-tarifs__plus[open] .mein-tarifs__plus-label--voir {
	display: none;
}

.mein-tarifs__plus[open] .mein-tarifs__plus-label--masquer {
	display: inline;
}

/* Focus clavier : même anneau que le reste du site sur fond clair (WCAG 2.4.7). */
.mein-tarifs__plus-declencheur:focus-visible {
	outline: 2px solid var(--wp--preset--color--sauge-fonce);
	outline-offset: 3px;
}

/* --- Variantes de couleur (pilotées par la carte) ---------------------- */
/*
 * .is-sauge      : cartes thérapeutiques (défaut). Sur-titre neutre, prix sauge.
 * .is-terracotta : cartes soins esthétiques. Sur-titre + prix teintés rosé.
 */

.mein-tarifs__carte.is-sauge .mein-tarifs__eyebrow {
	/* Ton neutre chaud le plus proche de la maquette (#A9967C) parmi les tokens. */
	color: var(--wp--preset--color--texte-discret);
}

/*
 * Sauge foncé et non sauge : le sauge sur la carte crème donne 4,32:1, contre
 * 5,60:1 ici. Le prix est à 23 px en graisse 600, donc du TEXTE NORMAL au sens de
 * WCAG : le seuil de 3:1 du grand texte demande >= 24 px, ou >= 18,66 px ET une
 * graisse 700. Il s'en fallait d'un pixel. Cf. règle de charte, main.css.
 */
.mein-tarifs__carte.is-sauge .mein-tarifs__ligne-prix {
	color: var(--mein-sauge-sur-clair);
}

.mein-tarifs__carte.is-terracotta .mein-tarifs__eyebrow {
	color: var(--wp--preset--color--rose-terre);
}

.mein-tarifs__carte.is-terracotta .mein-tarifs__ligne-prix {
	/* Contraste AA sur fond crème : teinte terracotta foncée (≥ 4.5:1). */
	color: var(--wp--preset--color--terracotta-fonce);
}

/* --- Note sous la grille : centrée, discrète --------------------------- */

.mein-tarifs__note {
	max-width: 640px;
	margin: 40px auto 0;
	font-family: var(--wp--preset--font-family--sans);
	font-size: 13.5px;
	line-height: 1.6;
	text-align: center;
	/* Contraste AA : token « texte » (≥ 4.5:1) au lieu de « texte-discret ». */
	color: var(--wp--preset--color--texte);
}

/* --- Responsive : resserre un peu sur mobile --------------------------- */

@media (max-width: 600px) {
	.mein-tarifs__grille {
		gap: 16px;
	}

	.mein-tarifs__note {
		margin-top: 32px;
	}
}

/* --- Respect de prefers-reduced-motion --------------------------------- */
/* Neutralise la légère élévation au survol pour les personnes sensibles. */

@media (prefers-reduced-motion: reduce) {
	.mein-tarifs__carte {
		transition: none;
	}

	.mein-tarifs__carte:hover {
		transform: none;
	}

	/* Le chevron bascule d'un coup, sans rotation animée. */
	.mein-tarifs__plus-declencheur::after {
		transition: none;
	}
}