/* ==========================================================================
   PRISME — S'engager. Repose sur les tokens de prisme-core.css.
   ========================================================================== */

.prisme-engager-wrap {
	font-family: var(--prisme-font);
	display: flex;
	flex-direction: column;
	gap: 24px;
	max-width: 960px;
}

.prisme-engager-bloc { padding: 32px; }

.prisme-engager-eyebrow {
	display: inline-block;
	font-size: 14px;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-weight: 600;
	color: var(--prisme-bleu, #2F8FE0);
	margin-bottom: 8px;
}

.prisme-engager-bloc h2 {
	font-size: 22px;
	margin: 0 0 16px;
	color: var(--prisme-texte, #FFFFFF);
}

.prisme-engager-bloc p {
	font-size: 15px;
	line-height: 1.7;
	color: var(--prisme-texte-att, #A9A9B4);
	margin: 0 0 16px;
}

.prisme-engager-bloc ul {
	margin: 0 0 24px;
	padding-left: 24px;
}
.prisme-engager-bloc li {
	font-size: 15px;
	line-height: 1.7;
	color: var(--prisme-texte-att, #A9A9B4);
	margin-bottom: 8px;
}

.prisme-engager-bureau { list-style: none; padding-left: 0; margin-bottom: 16px; }
.prisme-engager-bureau li {
	padding-left: 0;
	border-left: 2px solid var(--prisme-bleu, #2F8FE0);
	padding-left: 16px;
	margin-bottom: 16px;
}
.prisme-engager-bureau strong { color: var(--prisme-texte, #FFFFFF); display: block; margin-bottom: 2px; }

.prisme-engager-contact {
	text-align: left;
	font-size: 14px;
	color: var(--prisme-texte-att, #A9A9B4);
}
.prisme-engager-contact a { color: var(--prisme-bleu, #2F8FE0); text-decoration: none; }
.prisme-engager-contact a:hover { text-decoration: underline; }

/* Responsive — jeu de seuils unique du projet : 480 / 640 / 768 / 1024 (mobile d'abord, 320 px minimum).
   Ajouté en fin de feuille : il complète les règles ci-dessus sans les réécrire. */
@media (max-width: 768px) { .prisme-engager-bloc { padding: 24px; } }
@media (max-width: 640px) { .prisme-engager-bloc { padding: 24px 16px; } }

/* Grand écran (ordinateur, iPad en paysage) : la page profite de la largeur disponible */
@media (min-width: 1024px) {
	.prisme-engager-wrap { max-width: 960px; }
}

/* Sommaire /engager/ : une carte par page */
.prisme-engager-sommaire { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.prisme-engager-sommaire .prisme-card { display: flex; flex-direction: column; gap: 8px; height: 100%; box-sizing: border-box; text-decoration: none; color: inherit; }
.prisme-engager-sommaire strong { font-size: 20px; }
.prisme-engager-autres { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 24px; }
.prisme-engager-autres a { min-height: 44px; display: inline-flex; align-items: center; }
.prisme-engager-intro { margin: 0; line-height: 1.5; }

.prisme-engager-note { font-size: 15px; color: var(--prisme-texte-att, #A9A9B4); }
.prisme-engager-bloc h3 { font-size: 18px; margin: 16px 0 8px; }

/* Sous-bento des formations (dans la carte SAÉ) : une sous-carte par BUT, repère coloré en haut, grande première carte (bento.js du thème) */
.prisme-engager-sous { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 16px; margin: 16px 0; }
.prisme-engager-sous-carte { --sc: var(--prisme-bleu, #2F8FE0); position: relative; display: flex; flex-direction: column; gap: 8px; padding: 20px; padding-top: 24px; border-radius: var(--prisme-radius-s, 14px); background: color-mix(in srgb, var(--sc) 10%, rgba(255, 255, 255, 0.03)); border: 1px solid color-mix(in srgb, var(--sc) 30%, transparent); box-sizing: border-box; overflow: hidden; }
.prisme-engager-sous-carte::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: var(--sc); }
.prisme-engager-sous-carte:nth-child(5n+1) { --sc: var(--prisme-bleu, #2F8FE0); } .prisme-engager-sous-carte:nth-child(5n+2) { --sc: var(--prisme-corail, #F0653C); } .prisme-engager-sous-carte:nth-child(5n+3) { --sc: var(--prisme-vert, #2ECC71); } .prisme-engager-sous-carte:nth-child(5n+4) { --sc: var(--prisme-violet, #7B5CF0); } .prisme-engager-sous-carte:nth-child(5n) { --sc: var(--prisme-or, #F5A623); }
.prisme-engager-sous-carte.prisme-bento-grand { background: color-mix(in srgb, var(--sc) 18%, rgba(255, 255, 255, 0.03)); }
.prisme-engager-sous-etiquette { align-self: flex-start; padding: 2px 10px; border-radius: 999px; font-size: 14px; font-weight: 700; letter-spacing: 0.06em; color: #17171A; background: var(--sc); }
.prisme-engager-bloc .prisme-engager-sous-carte h4 { margin: 0; font-size: 18px; font-weight: 600; line-height: 1.3; }
.prisme-engager-sous-idee { margin: 0; line-height: 1.5; }
.prisme-engager-sous-idee span { display: block; font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--prisme-texte-att, #A9A9B4); margin-bottom: 4px; }

/* Cohérence et accessibilité : liens lisibles sur fond sombre, cibles tactiles >= 44 px, rythme identique sur toutes les pages /engager/ */
.prisme-engager-wrap a:not(.prisme-btn-pill):not(.prisme-btn-outline):not(.prisme-card--lien) { color: var(--prisme-lien, #6CB4FF); text-underline-offset: 3px; }
.prisme-engager-lien { display: inline-flex; align-items: center; min-height: 44px; }
.prisme-engager-bloc ul { display: flex; flex-direction: column; gap: 8px; }
.prisme-engager-bloc .prisme-btn-pill, .prisme-engager-bloc .prisme-btn-outline { align-self: flex-start; margin-top: 8px; }
@media (max-width: 640px) { .prisme-engager-wrap { gap: 16px; } .prisme-engager-bloc { padding: 24px 16px; } .prisme-engager-bloc .prisme-btn-pill, .prisme-engager-bloc .prisme-btn-outline { align-self: stretch; text-align: center; } .prisme-engager-sous { gap: 12px; } }

/* Une page par formation : cartes de la page SAÉ = liens vers leur page. */
a.prisme-engager-sous-lien { display: flex; flex-direction: column; gap: 8px; text-decoration: none; color: inherit; min-height: 44px; }
a.prisme-engager-sous-lien:hover, a.prisme-engager-sous-lien:focus-visible { border-color: var(--prisme-rubrique, var(--prisme-bleu)); }
.prisme-engager-sous-aller { margin-top: auto; padding-top: 8px; font-size: 14px; font-weight: 600; text-decoration: underline; text-underline-offset: 4px; }

/* Formations de la page SAÉ : LISTE verticale (une ligne par formation, entièrement cliquable). */
.prisme-engager-liste-formations { list-style: none; margin: 16px 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.prisme-engager-ligne { display: flex; align-items: center; gap: 16px; min-height: 56px; padding: 12px 16px; border-radius: var(--prisme-radius-s, 14px); border: 1px solid rgba(255, 255, 255, 0.14); background: rgba(255, 255, 255, 0.04); color: inherit; text-decoration: none; box-sizing: border-box; }
.prisme-engager-ligne:hover, .prisme-engager-ligne:focus-visible { border-color: var(--prisme-lien, #6FB6FF); background: rgba(255, 255, 255, 0.08); }
.prisme-engager-ligne-nom { flex: 1 1 auto; min-width: 0; font-weight: 600; }
.prisme-engager-ligne .prisme-engager-sous-aller { margin: 0; padding: 0; white-space: nowrap; }
@media (max-width: 640px) { .prisme-engager-ligne { flex-wrap: wrap; gap: 8px; } .prisme-engager-ligne-nom { flex-basis: 100%; order: 2; } .prisme-engager-ligne .prisme-engager-sous-aller { order: 3; } }
.prisme-engager-ligne .prisme-engager-sous-etiquette { flex: 0 0 auto; min-width: 96px; color: var(--prisme-texte, #fff); background: rgba(255, 255, 255, 0.14); padding: 4px 12px; border-radius: 999px; text-align: center; }

/* Thème clair (thème PRISME >= 1.90.0) : filets et fonds translucides en blanc retournés en sombre. */
:root[data-theme="clair"] .prisme-engager-sous-carte { background: color-mix(in srgb, var(--sc) 10%, #FFFFFF); }
:root[data-theme="clair"] .prisme-engager-sous-carte.prisme-bento-grand { background: color-mix(in srgb, var(--sc) 16%, #FFFFFF); }
:root[data-theme="clair"] .prisme-engager-ligne { border-color: var(--prisme-bordure, #D6D6DE); background: #FFFFFF; }
:root[data-theme="clair"] .prisme-engager-ligne:hover, :root[data-theme="clair"] .prisme-engager-ligne:focus-visible { background: rgba(23, 23, 26, .04); }
:root[data-theme="clair"] .prisme-engager-ligne .prisme-engager-sous-etiquette { background: rgba(23, 23, 26, .08); }