/* MG Studio MSS — liste des ateliers de l'accueil ([ateliers_list]).
   1 grande carte « ouverte » (à gauche) + 4 petites cartes carrées en grille 2x2 (à droite) ;
   un clic sur une petite carte ouvre une popup (<dialog> natif). */

.mssa {
	--mssa-color: #465f9d;
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
	gap: 14px;
	align-items: stretch;
	width: 100%;
	max-width: 1100px;
	margin: auto;
	container-type: inline-size;   /* les tailles internes suivent la largeur réelle du bloc */
}

/* ---------- Bloc commun : picto + titre ---------- */
.mssa-head { display: flex; align-items: center; gap: 16px; }
.mssa-picto { flex: none; display: inline-flex; color: var(--mssa-color); }
.mssa-titles { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.mssa-date { font-size: 13px; font-weight: 500; letter-spacing: .04em; color: #8a8f96; text-transform: none; }
/* Typo des titres fixée ici (et non par le module Divi de la page) : les deux listes restent identiques */
.mssa h3 {
	margin: 0 !important; padding: 0 !important; color: var(--mssa-color) !important;
	font-weight: 600 !important; text-transform: uppercase !important; letter-spacing: max(1px, .1vw) !important; line-height: 1.3 !important;
}
.mssa-feature h3 { font-size: 18px !important; }

/* ---------- Grande carte ouverte ---------- */
.mssa-feature {
	display: flex; flex-direction: column; gap: 16px;
	box-sizing: border-box; padding: 34px 34px 28px;
	border: 1px solid #ddd; border-radius: 10px;
	background: rgba(255, 255, 255, .78);
	backdrop-filter: blur(20px) brightness(1.2);
	border-top: 4px solid var(--mssa-color);
}
.mssa-text { margin: 0; font-size: 17px; font-weight: 500; line-height: 1.75; color: #555; }
.mssa-feature .mssa-picto svg { width: 56px; height: 56px; }
.mssa-feature .mssa-text { flex: 1 1 auto; min-height: 0; overflow: hidden; }
.mssa-link {
	align-self: flex-end; flex: none;
	font-weight: 600; text-transform: uppercase; text-decoration: none; letter-spacing: .03em;
	color: var(--mssa-color); transition: transform .2s ease;
}
.mssa-link:hover { transform: scale(1.08); }

/* ---------- Grille 2x2 de petites cartes carrées ---------- */
.mssa-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.mssa-tile {
	position: relative; aspect-ratio: 1 / 1; box-sizing: border-box; width: 100%;
	display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
	padding: 18px 16px; text-align: center; cursor: pointer;
	border: 1px solid #ddd; border-radius: 10px; background: rgba(255, 255, 255, .78);
	border-top: 4px solid var(--mssa-color);   /* même bordure haute colorée que la grande carte */
	backdrop-filter: blur(20px) brightness(1.2);
	color: var(--mssa-color); font: inherit;
	transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.mssa-tile:hover, .mssa-tile:focus-visible {
	transform: scale(1.04); border-color: var(--mssa-color); box-shadow: 0 8px 22px rgba(0, 0, 0, .12);
}
.mssa-tile:focus-visible { outline: 2px solid var(--mssa-color); outline-offset: 2px; }
/* titres longs : taille réduite et 4 lignes maximum pour garder le carré */
.mssa-tile h3 {
	font-size: 15px !important; line-height: 1.3 !important; letter-spacing: .05em !important;
	display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
}
.mssa-tile .mssa-picto svg { width: 62px; height: 62px; }
.mssa-plus {
	position: absolute; right: 12px; bottom: 9px; font-size: 24px; line-height: 1; font-weight: 600; opacity: .7;
}

/* ---------- Popup (<dialog>) ---------- */
.mssa-dialog {
	box-sizing: border-box; width: min(700px, 92vw); max-height: 88vh; margin: auto; padding: 0; overflow: auto;
	border: 0; border-top: 6px solid var(--mssa-color); border-radius: 14px; background: #fff; color: #555;
	box-shadow: 0 24px 70px rgba(15, 23, 32, .35);
}
.mssa-dialog[open] { animation: mssa-pop .22s ease; }
.mssa-dialog::backdrop { background: rgba(20, 28, 40, .55); backdrop-filter: blur(4px); animation: mssa-fade .22s ease; }
@keyframes mssa-pop  { from { opacity: 0; transform: translateY(14px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes mssa-fade { from { opacity: 0; } to { opacity: 1; } }

.mssa-dialog__close {
	position: absolute; top: 10px; right: 12px; z-index: 2; width: 38px; height: 38px; padding: 0;
	border: 0; border-radius: 50%; background: rgba(255, 255, 255, .92); color: #2b3a46; cursor: pointer;
	font-size: 26px; line-height: 1; box-shadow: 0 2px 8px rgba(0, 0, 0, .2);
}
.mssa-dialog__close:hover { background: #fff; transform: scale(1.06); }
.mssa-dialog__media { max-height: 280px; overflow: hidden; }
.mssa-dialog__img { display: block; width: 100%; height: 280px; object-fit: cover; }
.mssa-dialog__body { display: flex; flex-direction: column; gap: 18px; padding: 28px 34px 30px; }
.mssa-dialog h3 { font-size: 20px !important; }

/* Verrouille le défilement de la page tant que la popup est ouverte */
html.mssa-lock { overflow: hidden; }

/* Navigateurs sans <dialog> modal : repli en fenêtre fixe */
.mssa-dialog.mssa-fallback[open] { position: fixed; inset: 0; z-index: 99990; height: fit-content; }

/* ---------- Bureau : la grille 2x2 donne la hauteur de la ligne, la grande carte s'y cale ----------
   (contain: size = le contenu de la grande carte ne dicte plus sa hauteur ; le texte est coupé à 6 lignes) */
@media (min-width: 721px) {
	.mssa-feature { contain: size; }
	.mssa-feature .mssa-text {
		display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; flex: 0 1 auto;
	}
	.mssa-feature .mssa-link { margin-top: auto; }
	/* La colonne de droite est CARRÉE (aussi large que haute) : deux rangées égales, donc 4 carrés parfaitement répartis.
	   C'est elle qui donne la hauteur de la ligne ; la grande carte s'y cale. */
	.mssa-grid { aspect-ratio: 1 / 1; grid-template-rows: repeat(2, minmax(0, 1fr)); align-content: stretch; }
	.mssa-tile { aspect-ratio: auto; height: 100%; }
}

/* Plus le bloc est large, plus la grande carte est haute : on affiche davantage de lignes */
@container (min-width: 860px) { .mssa-feature .mssa-text { -webkit-line-clamp: 9; } }
@container (min-width: 1000px) { .mssa-feature .mssa-text { -webkit-line-clamp: 11; } }

/* ---------- Mobile : grande carte puis grille 2x2 ---------- */
@media (max-width: 720px) {
	.mssa { grid-template-columns: 1fr; }
	.mssa-feature { padding: 22px 20px 18px; }
	.mssa-feature .mssa-text { display: -webkit-box; -webkit-line-clamp: 8; -webkit-box-orient: vertical; overflow: hidden; }
	.mssa-tile { padding: 12px 10px; }
	.mssa-tile h3 { font-size: 12.5px !important; }
	.mssa-tile .mssa-picto svg { width: 46px; height: 46px; }
	.mssa-feature .mssa-picto svg { width: 46px; height: 46px; }
	.mssa-text { font-size: 16px; }
	.mssa-dialog__body { padding: 20px 20px 22px; }
}

@media (prefers-reduced-motion: reduce) {
	.mssa-dialog[open], .mssa-dialog::backdrop { animation: none; }
	.mssa-tile, .mssa-link { transition: none; }
}