/**
 * Section : Solutions (grille de cartes dépliables).
 * D'après le design Figma "Content Container".
 */

@layer sections {
	.mm-solutions {
		--mm-section-pt: var(--mm-section-space-large);
		--mm-section-pb: var(--mm-section-space-large);
	}

	.mm-solutions__inner {
		display: flex;
		flex-direction: column;
		gap: var(--mm-space-2xl); /* 80px */
	}

	/* --- En-tête --- */
	.mm-solutions__header {
		display: flex;
		flex-direction: column;
		gap: var(--mm-space-bloc);
		max-width: 75ch;
		color: var(--mm-color-on-tint);
	}
	.mm-solutions__title {
		margin: 0;
		font-size: var(--mm-fs-400); /* → 49px */
		line-height: 1.2;
		color: var(--mm-color-on-tint);
	}
	.mm-solutions__text { color: var(--mm-color-on-tint); }
	.mm-solutions__text p { line-height: 1.5; }

	/* --- Colonnes flex indépendantes ---
	   Ouvrir une carte pousse uniquement les cartes de SA colonne. */
	.mm-solutions__grid {
		display: flex;
		align-items: flex-start;
		gap: var(--mm-space-section); /* 40px */
	}
	.mm-solutions__col {
		flex: 1 1 0;
		min-width: 0;
		display: flex;
		flex-direction: column;
		gap: var(--mm-space-section);
	}
	/* Mobile : colonnes empilées, cartes pleine largeur.
	   (La hauteur réduite est plus bas, APRÈS la règle de base du toggle,
	   pour ne pas être écrasée par l'ordre de la cascade.) */
	@media (max-width: 48rem) {
		.mm-solutions__grid { flex-direction: column; align-items: stretch; }
		.mm-solutions__col { width: 100%; }
	}

	/* --- Carte --- */
	.mm-solution {
		background-color: var(--mm-olive-900);
		color: var(--mm-sauge-25);
		transition: background-color var(--mm-transition), color var(--mm-transition);
	}
	.mm-solution.is-open {
		background-color: var(--mm-color-tint-3); /* sauge-200 */
		color: var(--mm-color-on-tint);           /* olive */
	}

	.mm-solution__toggle {
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		/* Hauteur contenant 2 lignes de titre + padding (box-sizing: border-box),
		   pour que les cartes 1 ligne ET 2 lignes aient TOUTES la même hauteur.
		   2 × 1.2 × 40px = 96px de texte + 2 × 64px de padding = 224px → 14rem
		   (marge de sécurité pour les jambages/interlettrage). */
		min-height: 14.5rem;
		padding: var(--mm-space-hero) var(--mm-space-list); /* 64 / 24 */
		background: none;
		border: 0;
		color: inherit;
		font-family: var(--mm-font-heading);
		font-weight: 400;
		font-size: clamp(1.75rem, 2.08vw, 2.5rem); /* → 40px */
		line-height: 1.2;
		text-transform: uppercase;
		text-align: center;
		cursor: pointer;
		transition: padding var(--mm-transition), min-height var(--mm-transition);
	}
	.mm-solution__toggle--static { cursor: default; }

	/* Indice « Fermer » : visible uniquement sur une carte ouverte, au survol. */
	.mm-solution__close {
		position: absolute;
		inset-block-start: var(--mm-space-s);
		inset-inline-end: var(--mm-space-list);
		font-family: var(--mm-font-body);
		font-weight: 500;
		font-size: var(--mm-fs-p);
		text-transform: none;
		color: var(--mm-color-on-tint);
		opacity: 0;
		transition: opacity var(--mm-transition);
	}
	.mm-solution.is-open:hover .mm-solution__close { opacity: 1; }

	/* Ouverte : titre en haut, semibold. */
	.mm-solution.is-open .mm-solution__toggle {
		min-height: 0;
		padding-block: 3.125rem var(--mm-space-l); /* 50 / 20 */
		font-weight: 600;
	}

	/* Soulignement animé + gras au survol (cartes fermées cliquables). */
	.mm-solution__label { position: relative; }
	.mm-solution__label::after {
		content: "";
		position: absolute;
		inset-inline: 0;
		inset-block-end: -0.2em;
		height: 2px;
		background: currentColor;
		transform: scaleX(0);
		transform-origin: center;
		transition: transform var(--mm-transition);
	}
	.mm-solution--expandable:not(.is-open) .mm-solution__toggle:hover .mm-solution__label,
	.mm-solution--expandable:not(.is-open) .mm-solution__toggle:focus-visible .mm-solution__label {
		font-weight: 600;
	}
	.mm-solution--expandable:not(.is-open) .mm-solution__toggle:hover .mm-solution__label::after,
	.mm-solution--expandable:not(.is-open) .mm-solution__toggle:focus-visible .mm-solution__label::after {
		transform: scaleX(1);
	}

	/* --- Panneau dépliable ---
	   max-height:0 + overflow:hidden → hauteur RÉELLEMENT nulle une fois replié
	   (les cartes fermées ont donc toutes la même hauteur, avec ou sans items). */
	.mm-solution__panel {
		max-height: 0;
		overflow: hidden;
		transition: max-height var(--mm-transition);
	}
	.mm-solution.is-open .mm-solution__panel { max-height: 50rem; }

	.mm-solution__list {
		display: flex;
		flex-direction: column;
		gap: var(--mm-space-l); /* 20px */
		margin: 0;
		padding: 0 var(--mm-space-list) var(--mm-space-list); /* 0 24 24 */
		list-style: none;
	}
	.mm-solution__detail {
		display: flex;
		align-items: center;
		gap: var(--mm-space-m); /* 16px */
		font-family: var(--mm-font-body);
		font-size: var(--mm-fs-p);
		font-weight: 400;
		color: var(--mm-color-on-tint);
	}
	.mm-solution__detail--bold { font-weight: 600; }
	.mm-solution__picto { display: inline-flex; flex-shrink: 0; }
	/* Item lien : soulignement animé + gras au survol. */
	.mm-solution__detail a {
		position: relative;
		color: inherit;
		text-decoration: none;
	}
	.mm-solution__detail a::after {
		content: "";
		position: absolute;
		inset-inline: 0;
		inset-block-end: -0.15em;
		height: 2px;
		background: currentColor;
		transform: scaleX(0);
		transform-origin: left;
		transition: transform var(--mm-transition);
	}
	.mm-solution__detail a:hover,
	.mm-solution__detail a:focus-visible { font-weight: 600; }
	.mm-solution__detail a:hover::after,
	.mm-solution__detail a:focus-visible::after { transform: scaleX(1); }

	/* Mobile : cartes nettement plus basses (placé APRÈS les règles de base
	   du toggle pour gagner la cascade). */
	@media (max-width: 48rem) {
		.mm-solution__toggle {
			min-height: 5rem;                                /* ~80px */
			padding: var(--mm-space-s) var(--mm-space-list); /* 12 / 24 */
			font-size: 1.5rem;                               /* 24px */
		}
		.mm-solution.is-open .mm-solution__toggle {
			padding-block: var(--mm-space-list) var(--mm-space-s);
		}
		/* Tactile : pas de survol → on affiche « Fermer » (haut-droite) dès l'ouverture. */
		.mm-solution.is-open .mm-solution__close { opacity: 1; }
	}
}