/* ==========================================================================
   PRISME — Bouton flottant d'urgence (site-wide)
   ========================================================================== */

/* Grand bouton, à DROITE de l'écran en bas (retour à la position d'origine, 12 octobre 2026 : centré, il cachait le bouton
   « Musique » d'Octobre, en bas à gauche). Il reste grand (84 px de haut, 72 px sur téléphone). */
.prisme-floating {
	position: fixed;
	right: 18px;
	bottom: 18px;
	right: max(18px, env(safe-area-inset-right));   /* encoche / barre d'accueil des téléphones */
	bottom: max(18px, env(safe-area-inset-bottom));
	z-index: 999999;
	font-family: var(--prisme-font, "Lexend PRISME", sans-serif);
}

/* Couleurs du bouton SOS : jetons que les thèmes d'événement (Octobre, Noël) peuvent redéfinir.
   Sans thème d'événement, l'apparence est exactement celle d'avant. Position, taille et forme ne changent JAMAIS.
     --prisme-sos-fond  : fond de la pastille      --prisme-sos-texte : texte « PRISME SOS »
     --prisme-sos-halo  : halo qui respire (triplet R, V, B) */
.prisme-floating-toggle {
	pointer-events: auto;
	height: 84px;
	min-width: 72px;
	border-radius: var(--prisme-radius-pill, 999px);
	border: none;
	cursor: pointer;
	padding: 4px 28px 4px 4px;
	display: flex;
	align-items: center;
	gap: 16px;
	background: var(--prisme-sos-fond, linear-gradient(135deg,
		var(--prisme-vert, #2ECC71),
		var(--prisme-bleu, #2F8FE0) 35%,
		var(--prisme-violet, #7B5CF0) 60%,
		var(--prisme-magenta, #E14FA0) 80%,
		var(--prisme-corail, #F0653C)));
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45), 0 0 0 0 rgba(var(--prisme-sos-halo, 240, 101, 60), 0.45);
	transition: transform 0.15s ease;
	animation: prisme-floating-pulse 2.8s ease-in-out infinite;
}
.prisme-floating-toggle:hover,
.prisme-floating-toggle:focus-visible {
	transform: scale(1.05);
}

.prisme-floating-toggle-label {
	color: var(--prisme-sos-texte, #17171A);
	font-size: 26px;
	font-weight: 800;
	white-space: nowrap;
	letter-spacing: 0.01em;
}

/* Signal doux et lent indiquant que le bouton est important, sans
   clignoter ni sauter : une respiration de halo, pas une alerte
   stroboscopique — le public de ce bouton peut être en surcharge
   sensorielle, l'animation doit rester confortable à regarder. */
@keyframes prisme-floating-pulse {
	0%, 100% {
		box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45), 0 0 0 0 rgba(var(--prisme-sos-halo, 240, 101, 60), 0.35);
	}
	50% {
		box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45), 0 0 0 10px rgba(var(--prisme-sos-halo, 240, 101, 60), 0);
	}
}

/* Respecte le réglage système "réduire les animations" */
@media (prefers-reduced-motion: reduce) {
	.prisme-floating-toggle {
		animation: none;
	}
}

.prisme-floating-toggle-logo {
	width: 68px;
	height: 68px;
	flex: none;
	border-radius: 50%;
	background: #FFFFFF;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}
.prisme-floating-toggle-logo img {
	width: 100% !important;
	height: 100% !important;
	object-fit: contain;
	padding: 8px;
	display: block;
}

/* Menu — plein écran (recouvre toute la fenêtre), piloté uniquement
   par la classe .is-open (ajoutée/retirée en JS), jamais par
   l'attribut HTML `hidden` seul : une règle `display` définie ici avec
   une spécificité égale à celle du navigateur pour `[hidden]`
   gagnerait sur ce dernier, quel que soit l'ordre — d'où le bug
   initial (menu toujours visible).
   Plein écran plutôt que petit menu déroulant dans un coin : les liens
   restent grands, lisibles et cliquables de loin, sans avoir à viser
   une petite zone précise du coin de l'écran. */
.prisme-floating-menu {
	display: none;
	pointer-events: auto;
	position: fixed;
	inset: 0;
	flex-direction: column;
	background: var(--prisme-fond, #17171A);
	padding: 24px;
	padding: max(24px, env(safe-area-inset-top)) max(24px, env(safe-area-inset-right)) calc(max(16px, env(safe-area-inset-bottom)) + 108px) max(24px, env(safe-area-inset-left));
	overflow-y: auto;
	overscroll-behavior: contain;
}
.prisme-floating-menu.is-open {
	display: flex;
}

/* Empêche la page en dessous de défiler pendant que le plein écran est ouvert. */
body.prisme-floating-ouvert {
	overflow: hidden;
}

.prisme-floating-menu-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 24px;
	flex: none;
}

.prisme-floating-menu-titre {
	margin: 0;
	font-size: 20px;
	font-weight: 800;
	letter-spacing: 0.02em;
	color: var(--prisme-texte, #FFFFFF);
}

.prisme-floating-menu-close {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	border: 1px solid var(--prisme-bordure, #34333B);
	background: var(--prisme-fond-carte, #201F24);
	color: var(--prisme-texte, #FFFFFF);
	font-size: 20px;
	cursor: pointer;
}
.prisme-floating-menu-close:hover,
.prisme-floating-menu-close:focus-visible {
	background: var(--prisme-bordure, #34333B);
}

/* Bannière / bouton de consentement (Complianz) : il occupe le bas de l'écran. Le bouton SOS monte
   au-dessus pour ne jamais le recouvrir ni être recouvert (bannière ouverte : hauteur variable,
   donc on le remonte d'une bonne marge ; bouton « Gérer le consentement » seul : une pastille). */
body:has(#cmplz-manage-consent .cmplz-manage-consent) .prisme-floating { bottom: calc(max(18px, env(safe-area-inset-bottom)) + 56px); }
body:has(.cmplz-cookiebanner.cmplz-show) .prisme-floating { bottom: calc(max(18px, env(safe-area-inset-bottom)) + 56px); }
@media (max-width: 640px) {
	/* sur téléphone la bannière prend toute la largeur et jusqu'à la moitié de l'écran : le SOS passe au-dessus */
	body:has(.cmplz-cookiebanner.cmplz-show) .prisme-floating { bottom: calc(50vh + 16px); bottom: calc(50dvh + 16px); }
}

/* Grille deux colonnes — sept liens répartis en 4 + 3, chaque carte
   assez grande pour être vue et touchée sans avoir à s'approcher. */
.prisme-floating-menu-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
	max-width: 900px;
	margin: 0 auto;
	width: 100%;
}

.prisme-floating-link {
	display: flex;
	align-items: flex-start;
	gap: 16px;
	padding: 24px;
	border-radius: var(--prisme-radius, 28px);
	background: var(--prisme-fond-carte, #201F24);
	border: 1px solid var(--prisme-bordure, #34333B);
	color: var(--prisme-texte, #FFFFFF);
	text-decoration: none;
}
.prisme-floating-link:hover,
.prisme-floating-link:focus-visible {
	background: var(--prisme-bordure, #34333B);
}

.prisme-floating-dot {
	width: 12px;
	height: 12px;
	border-radius: 50%;
	flex: none;
	margin-top: 8px;
}

.prisme-floating-link-texte {
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.prisme-floating-link-titre {
	font-size: 22px;
	font-weight: 800;
}
.prisme-floating-link-desc {
	font-size: 15px;
	font-weight: 400;
	color: var(--prisme-texte-att, #A9A9B4);
	line-height: 1.4;
}
.prisme-floating-link--explosive .prisme-floating-dot   { background: var(--prisme-corail, #F0653C); }
.prisme-floating-link--implosive .prisme-floating-dot   { background: var(--prisme-violet, #7B5CF0); }
.prisme-floating-link--social .prisme-floating-dot      { background: var(--prisme-or, #F5A623); }
.prisme-floating-link--anxiety .prisme-floating-dot     { background: var(--prisme-bleu, #2F8FE0); }
.prisme-floating-link--agoraphobia .prisme-floating-dot { background: var(--prisme-magenta, #E14FA0); }
.prisme-floating-link--fainting .prisme-floating-dot    { background: var(--prisme-vert, #2ECC71); }
.prisme-floating-link--narcolepsy .prisme-floating-dot  { background: #17A2B8; }

/* En dessous de ~640px, une seule colonne : deux colonnes deviendraient
   trop étroites pour rester lisibles sur un téléphone en portrait. */
@media (max-width: 640px) {
	.prisme-floating-menu-grid {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 480px) {
	.prisme-floating { right: 14px; bottom: 14px; right: max(14px, env(safe-area-inset-right)); bottom: max(14px, env(safe-area-inset-bottom)); }
	.prisme-floating-toggle { height: 72px; padding: 4px 20px 4px 4px; gap: 12px; }
	.prisme-floating-toggle-logo { width: 56px; height: 56px; }
	.prisme-floating-toggle-label { font-size: 22px; }
}

/* Responsive — jeu de seuils unique du projet : 480 / 640 / 768 / 1024 (mobile d'abord, 320 px minimum). */
/* Encoche / barre d'accueil des téléphones : le SOS garde sa position, sa taille et sa forme (décision de Thomas),
   seule sa marge s'adapte pour ne jamais passer sous la zone système. */
.prisme-floating {
	right: max(18px, env(safe-area-inset-right));
	bottom: max(18px, env(safe-area-inset-bottom));
}

/* La page garde une marge basse égale à la hauteur du bouton : rien (pied de page, mentions) n'est caché dessous. */
body:has(.prisme-floating) { padding-bottom: calc(max(16px, env(safe-area-inset-bottom)) + 100px); }

/* ---------- Page de crise : le bouton SOS est remplacé par « Alerter ma Personne de Confiance » (même place, même forme) ---------- */
.prisme-floating--alerte .prisme-floating-toggle-label { font-size: 18px; white-space: normal; line-height: 1.2; max-width: 190px; text-align: left; letter-spacing: 0; }
@media (max-width: 480px) { .prisme-floating--alerte .prisme-floating-toggle { gap: 12px; padding-right: 20px; } .prisme-floating--alerte .prisme-floating-toggle-label { font-size: 15px; max-width: 150px; } }
/* Pas de texte visible à côté du bouton (demande de Thomas) : l'état n'est lu que par les lecteurs d'écran (région masquée à l'œil). */
.prisme-floating-statut { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

/* ---- Sections cachées de la fenêtre PRISME SOS : « Faire un essai » et « Comprendre et savoir réagir » (repliées par défaut, sous les vraies alertes) ---- */
.prisme-sos-sections { display: flex; flex-direction: column; gap: 16px; max-width: 900px; width: 100%; margin: 32px auto 0; }
.prisme-sos-section { border-radius: var(--prisme-radius, 28px); background: var(--prisme-fond-carte, #201F24); border: 1px solid var(--prisme-bordure, #34333B); color: var(--prisme-texte, #FFFFFF); }
.prisme-sos-section > summary, .prisme-edu > summary { list-style: none; cursor: pointer; min-height: 44px; }
.prisme-sos-section > summary::-webkit-details-marker, .prisme-edu > summary::-webkit-details-marker { display: none; }
.prisme-sos-section > summary { display: flex; flex-direction: column; gap: 4px; padding: 24px 56px 24px 24px; position: relative; }
.prisme-sos-section > summary::after, .prisme-edu > summary::after { content: '+'; position: absolute; right: 24px; top: 50%; transform: translateY(-50%); font-size: 28px; font-weight: 600; color: var(--prisme-texte-att, #A9A9B4); }
.prisme-sos-section[open] > summary::after, .prisme-edu[open] > summary::after { content: '–'; }
.prisme-sos-section-titre { font-size: 20px; font-weight: 700; }
.prisme-sos-section-sous { font-size: 15px; color: var(--prisme-texte-att, #A9A9B4); line-height: 1.4; }
.prisme-sos-section-corps { padding: 0 24px 24px; display: flex; flex-direction: column; gap: 16px; }
.prisme-sos-intro, .prisme-sos-note { margin: 0; font-size: 16px; line-height: 1.5; }
.prisme-sos-note { font-size: 15px; color: var(--prisme-texte-att, #A9A9B4); }
.prisme-sos-etapes { margin: 0; padding-left: 24px; display: flex; flex-direction: column; gap: 8px; font-size: 16px; line-height: 1.5; }
.prisme-sos-label { font-size: 16px; font-weight: 600; }
.prisme-sos-select { min-height: 48px; border-radius: 14px; padding: 8px 16px; font: inherit; font-size: 16px; color: var(--prisme-texte, #FFFFFF); background: rgba(0, 0, 0, 0.4); border: 1px solid var(--prisme-bordure, #34333B); }
.prisme-sos-bouton { min-height: 48px; border-radius: 999px; border: 0; padding: 12px 24px; font: inherit; font-size: 16px; font-weight: 700; cursor: pointer; background: var(--prisme-action-fond, #FFFFFF); color: var(--prisme-action-texte, #17171A); }
.prisme-sos-statut { margin: 0; font-size: 16px; line-height: 1.5; min-height: 24px; }

.prisme-edu { border-radius: 18px; border: 1px solid var(--prisme-bordure, #34333B); background: rgba(0, 0, 0, 0.25); }
.prisme-edu > summary { display: flex; align-items: center; gap: 16px; padding: 12px 56px 12px 16px; position: relative; font-size: 18px; font-weight: 700; }
.prisme-edu > summary .prisme-floating-dot { margin-top: 0; }
.prisme-edu-corps { padding: 0 16px 24px; display: flex; flex-direction: column; gap: 12px; }
.prisme-edu-titre { margin: 16px 0 0; font-size: 15px; font-weight: 700; letter-spacing: 0.02em; color: var(--prisme-texte-att, #A9A9B4); text-transform: uppercase; }
.prisme-edu--explosive { --edu: var(--prisme-corail, #F0653C); } .prisme-edu--implosive { --edu: var(--prisme-violet, #7B5CF0); } .prisme-edu--social { --edu: var(--prisme-or, #F5A623); }
.prisme-edu--anxiety { --edu: var(--prisme-bleu, #2F8FE0); } .prisme-edu--agoraphobia { --edu: var(--prisme-magenta, #E14FA0); } .prisme-edu--fainting { --edu: var(--prisme-vert, #2ECC71); } .prisme-edu--narcolepsy { --edu: #17A2B8; }
.prisme-edu .prisme-floating-dot { background: var(--edu); }

/* Jauge animée : elle monte, tient, puis redescend quand on aide (cycle de 9 s). Sans animation : jauge haute avec les deux légendes visibles. */
.prisme-edu-piste { height: 28px; border-radius: 14px; background: rgba(255, 255, 255, 0.1); overflow: hidden; border: 1px solid var(--prisme-bordure, #34333B); }
.prisme-edu-remplissage { height: 100%; width: 85%; border-radius: 14px; background: var(--edu); }
.prisme-edu-legendes { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; font-size: 16px; line-height: 1.45; }
.prisme-edu-leg--monte { color: var(--prisme-texte, #FFFFFF); }
.prisme-edu-leg--baisse { color: var(--prisme-texte-att, #A9A9B4); }
@media (prefers-reduced-motion: no-preference) {
	.prisme-edu[open] .prisme-edu-remplissage { animation: prisme-edu-jauge 9s ease-in-out infinite; }
	.prisme-edu[open] .prisme-edu-leg--monte { animation: prisme-edu-monte 9s ease-in-out infinite; }
	.prisme-edu[open] .prisme-edu-leg--baisse { animation: prisme-edu-baisse 9s ease-in-out infinite; }
	.prisme-edu[open] .prisme-edu-gestes li { opacity: 0; animation: prisme-edu-geste 9s ease-out infinite; animation-delay: calc(3.4s + var(--prisme-edu-i, 0) * 1.1s); }
	.prisme-edu[open] .prisme-edu-bulles li { animation: prisme-edu-bulle .5s ease-out both; }
}
@keyframes prisme-edu-jauge { 0% { width: 8%; } 38% { width: 95%; } 44% { width: 95%; } 90% { width: 12%; } 100% { width: 8%; } }
@keyframes prisme-edu-monte { 0%, 48% { opacity: 1; } 55%, 100% { opacity: .35; } }
@keyframes prisme-edu-baisse { 0%, 42% { opacity: .35; } 55%, 92% { opacity: 1; } 100% { opacity: .35; } }
@keyframes prisme-edu-geste { 0% { opacity: 0; transform: translateX(-8px); } 12%, 100% { opacity: 1; transform: none; } }
@keyframes prisme-edu-bulle { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.prisme-edu-bulles { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.prisme-edu-bulles li { position: relative; padding: 12px 16px; border-radius: 18px 18px 18px 6px; font-size: 16px; line-height: 1.5; background: rgba(255, 255, 255, 0.08); }
.prisme-edu-bulles--dire li { border: 2px solid var(--prisme-vert, #2ECC71); display: flex; gap: 12px; align-items: flex-start; }
.prisme-edu-bulles--eviter li { border: 2px dashed var(--prisme-corail, #F0653C); display: flex; gap: 12px; align-items: flex-start; }
.prisme-edu-pastille { flex: none; width: 24px; height: 24px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 800; color: #17171A; }
.prisme-edu-bulles--dire .prisme-edu-pastille { background: var(--prisme-vert, #2ECC71); }
.prisme-edu-bulles--eviter .prisme-edu-pastille { background: var(--prisme-corail, #F0653C); }
.prisme-edu-bulles--tete li { border-radius: 24px; font-style: italic; border: 1px dotted var(--prisme-texte-att, #A9A9B4); }
.prisme-edu-gestes { margin: 0; padding-left: 24px; display: flex; flex-direction: column; gap: 12px; font-size: 16px; line-height: 1.5; }
.prisme-edu-gestes li::marker { color: var(--edu); font-weight: 800; }
@media (max-width: 640px) { .prisme-sos-sections { margin-top: 24px; } .prisme-sos-section > summary { padding: 16px 48px 16px 16px; } .prisme-sos-section-corps { padding: 0 16px 16px; } }
.prisme-sos-bouton--essai { display: flex; align-items: center; gap: 12px; text-align: left; border: 3px dashed var(--prisme-action-texte, #17171A); }
.prisme-sos-bouton--essai em { font-style: normal; font-weight: 500; }
.prisme-sos-badge-essai { flex: none; padding: 4px 12px; border-radius: 999px; background: var(--prisme-action-texte, #17171A); color: var(--prisme-action-fond, #FFFFFF); font-size: 14px; font-weight: 800; letter-spacing: 0.08em; }

/* PRISME Accident dans la fenêtre PRISME SOS : une carte pleine largeur sous les alertes */
.prisme-sos-accident { max-width: 900px; width: 100%; margin: 16px auto 0; }
.prisme-floating-link--accident .prisme-floating-dot { background: var(--prisme-corail, #F0653C); }

/* Documentation « savoir réagir » (dans chaque fiche d'éducation) */
.prisme-edu-doc { margin-top: 16px; border-radius: 18px; border: 1px solid var(--edu, var(--prisme-bordure, #34333B)); background: rgba(255, 255, 255, 0.04); }
.prisme-edu-doc > summary { list-style: none; cursor: pointer; min-height: 48px; display: flex; align-items: center; padding: 12px 56px 12px 16px; position: relative; font-size: 16px; font-weight: 700; }
.prisme-edu-doc > summary::-webkit-details-marker { display: none; }
.prisme-edu-doc > summary::after { content: '+'; position: absolute; right: 20px; font-size: 24px; color: var(--prisme-texte-att, #A9A9B4); }
.prisme-edu-doc[open] > summary::after { content: '–'; }
.prisme-edu-doc-corps { padding: 0 16px 8px; font-size: 16px; line-height: 1.5; }
.prisme-edu-doc-corps h3 { margin: 0 0 8px; font-size: 18px; }
.prisme-edu-doc-corps h4 { margin: 16px 0 8px; font-size: 15px; text-transform: uppercase; letter-spacing: .02em; color: var(--prisme-texte-att, #A9A9B4); }
.prisme-edu-doc-corps ul { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 8px; }
.prisme-edu-doc-corps p { margin: 0 0 8px; }
.prisme-edu-note { font-size: 15px; color: var(--prisme-texte-att, #A9A9B4); }
.prisme-edu-doc-actions { display: flex; flex-wrap: wrap; gap: 12px; padding: 8px 16px 16px; }
.prisme-sos-bouton--sec { background: transparent; color: var(--prisme-texte, #FFFFFF); border: 1px solid var(--prisme-bordure, #34333B); text-decoration: none; display: inline-flex; align-items: center; }
@media print { .prisme-floating-toggle, .prisme-edu-doc-actions { display: none !important; } }

/* ---- PRISME SOS en bento : les 7 alertes en cartes de tailles variées, sans trou (6 colonnes sur grand écran, 2 sur téléphone) ---- */
.prisme-floating-menu-grid { grid-template-columns: repeat(6, 1fr); gap: 16px; }
.prisme-floating-menu-grid .prisme-floating-link { position: relative; grid-column: span 2; flex-direction: column; justify-content: flex-end; min-height: 150px; padding: 24px; overflow: hidden; --mk: var(--prisme-bleu, #2F8FE0); border-top: 4px solid var(--mk); }
.prisme-floating-menu-grid .prisme-floating-link:nth-child(1), .prisme-floating-menu-grid .prisme-floating-link:nth-child(2), .prisme-floating-menu-grid .prisme-floating-link:nth-child(6), .prisme-floating-menu-grid .prisme-floating-link:nth-child(7) { grid-column: span 3; min-height: 190px; }
.prisme-floating-menu-grid .prisme-floating-link:nth-child(1) { background: linear-gradient(160deg, color-mix(in srgb, var(--mk) 22%, var(--prisme-fond-carte, #201F24)), var(--prisme-fond-carte, #201F24)); }
.prisme-floating-menu-grid .prisme-floating-dot { position: absolute; top: 20px; left: 24px; width: 14px; height: 14px; margin: 0; }
.prisme-floating-link--explosive { --mk: var(--prisme-corail, #F0653C); } .prisme-floating-link--implosive { --mk: var(--prisme-violet, #7B5CF0); } .prisme-floating-link--social { --mk: var(--prisme-or, #F5A623); }
.prisme-floating-link--anxiety { --mk: var(--prisme-bleu, #2F8FE0); } .prisme-floating-link--agoraphobia { --mk: var(--prisme-magenta, #E14FA0); } .prisme-floating-link--fainting { --mk: var(--prisme-vert, #2ECC71); } .prisme-floating-link--narcolepsy { --mk: #17A2B8; } .prisme-floating-link--accident { --mk: var(--prisme-corail, #F0653C); }
@media (max-width: 640px) {
	.prisme-floating-menu-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
	.prisme-floating-menu-grid .prisme-floating-link, .prisme-floating-menu-grid .prisme-floating-link:nth-child(2), .prisme-floating-menu-grid .prisme-floating-link:nth-child(6), .prisme-floating-menu-grid .prisme-floating-link:nth-child(7) { grid-column: span 1; min-height: 150px; padding: 16px; }
	.prisme-floating-menu-grid .prisme-floating-link:nth-child(1) { grid-column: span 2; min-height: 150px; }
	.prisme-floating-menu-grid .prisme-floating-dot { left: 16px; }
	.prisme-floating-menu-grid .prisme-floating-link-titre { font-size: 18px; }
	.prisme-floating-menu-grid .prisme-floating-link-desc { font-size: 14px; }
}
/* Accident et sections : même langage de carte (rayon, filet de couleur) */
.prisme-sos-accident .prisme-floating-link { border-top: 4px solid var(--mk); position: relative; }
.prisme-sos-section { border-top: 4px solid var(--prisme-bordure, #34333B); }

/* ---------- Bouton SOS réactif : il se réduit PENDANT le mouvement de la page, puis se réagrandit quand l'écran est fixe (demande de Thomas, 19 oct. 2026) ---------- */
.prisme-floating-toggle { transition: transform .15s ease, height .25s ease, min-width .25s ease, padding .25s ease, gap .25s ease; }
.prisme-floating-toggle-label { overflow: hidden; max-width: 320px; transition: max-width .25s ease, opacity .2s ease; }
.prisme-floating-toggle-logo { transition: width .25s ease, height .25s ease; }
.prisme-floating.is-reduit .prisme-floating-toggle { height: 56px; min-width: 56px; padding: 4px; gap: 0; animation: none; }
.prisme-floating.is-reduit .prisme-floating-toggle-logo { width: 48px; height: 48px; }
.prisme-floating.is-reduit .prisme-floating-toggle-label { max-width: 0; opacity: 0; }
@media (prefers-reduced-motion: reduce) {
	.prisme-floating-toggle, .prisme-floating-toggle-label, .prisme-floating-toggle-logo { transition: none; }
}

/* ---------- Page /prisme-sos/ : trois vraies parties ---------- */
.prisme-sos-page { display: flex; flex-direction: column; gap: 24px; }
.prisme-sos-nav { display: flex; flex-wrap: wrap; gap: 12px; }
.prisme-sos-nav a { min-height: 44px; display: inline-flex; align-items: center; }
.prisme-sos-partie h2 { margin: 0 0 16px; font-size: 24px; font-weight: 600; }
.prisme-sos-partie { scroll-margin-top: 96px; display: flex; flex-direction: column; gap: 16px; }
.prisme-sos-partie .prisme-floating-menu-grid { max-width: none; }

/* ---------- Animations avec personnages ---------- */
.prisme-edu-scene { --edu: var(--prisme-bleu, #2F8FE0); display: flex; flex-direction: column; gap: 12px; }
.prisme-edu--explosive .prisme-edu-scene, .prisme-edu-scene.sc-explosive { --edu: var(--prisme-corail, #F0653C); } .prisme-edu-scene.sc-implosive { --edu: var(--prisme-violet, #7B5CF0); } .prisme-edu-scene.sc-social { --edu: var(--prisme-or, #F5A623); }
.prisme-edu-scene.sc-anxiety { --edu: var(--prisme-bleu, #2F8FE0); } .prisme-edu-scene.sc-agoraphobia { --edu: var(--prisme-magenta, #E14FA0); } .prisme-edu-scene.sc-fainting { --edu: var(--prisme-vert, #2ECC71); } .prisme-edu-scene.sc-narcolepsy { --edu: #17A2B8; }
.prisme-edu-scene-cadre { border-radius: 20px; overflow: hidden; background: linear-gradient(180deg, color-mix(in srgb, var(--edu) 14%, #101014), #101014); border: 1px solid var(--prisme-bordure, #34333B); }
.prisme-edu-svg { display: block; width: 100%; height: auto; max-height: 300px; }
.prisme-edu-svg .sc-sol { fill: rgba(255, 255, 255, 0.06); }
.prisme-edu-svg .sc-corps { fill: var(--edu); } .prisme-edu-svg .sc-tete, .prisme-edu-svg .sc-tete-a { fill: #F2D3B5; } .prisme-edu-svg .sc-corps-a { fill: #FFFFFF; }
.prisme-edu-svg .sc-oeil, .prisme-edu-svg .sc-oeil-a { fill: #1B1B20; }
.prisme-edu-svg .sc-b, .prisme-edu-svg .sc-ferme, .prisme-edu-svg .sc-sourire-a { stroke: #1B1B20; }
.prisme-edu-svg .sc-perso { transform: translate(110px, 150px); transition: transform .9s ease; }
.prisme-edu-svg .sc-aidant { transform: translate(250px, 150px); transition: transform .9s ease, opacity .6s ease; }
.prisme-edu-scene[data-etape="1"] .sc-aidant { transform: translate(380px, 150px); opacity: 0; }
.prisme-edu-svg .sc-b, .prisme-edu-svg .sc-ferme { display: none; }
.prisme-edu-svg .sc-bulle { fill: #FFFFFF; opacity: 0; transition: opacity .4s; } .prisme-edu-svg .sc-bulle circle { fill: #1B1B20; }
.prisme-edu-scene[data-etape="2"] .sc-bulle { opacity: 1; } .prisme-edu-scene.sc-implosive .sc-bulle { display: none; }
/* visages selon l'étape : inquiet (1-2), neutre (3), apaisé (4) */
.prisme-edu-scene[data-etape="1"] .sc-b-triste, .prisme-edu-scene[data-etape="2"] .sc-b-triste { display: inline; }
.prisme-edu-scene[data-etape="3"] .sc-b-neutre { display: inline; } .prisme-edu-scene[data-etape="4"] .sc-b-sourire { display: inline; }
.prisme-edu-scene[data-etape="1"] .sc-oeil, .prisme-edu-scene[data-etape="2"] .sc-oeil { r: 3.6px; }
.prisme-edu-scene.sc-narcolepsy[data-etape="1"] .sc-oeil, .prisme-edu-scene.sc-narcolepsy[data-etape="2"] .sc-oeil, .prisme-edu-scene.sc-fainting[data-etape="1"] .sc-oeil, .prisme-edu-scene.sc-fainting[data-etape="2"] .sc-oeil { display: none; }
.prisme-edu-scene.sc-narcolepsy[data-etape="1"] .sc-ferme, .prisme-edu-scene.sc-narcolepsy[data-etape="2"] .sc-ferme, .prisme-edu-scene.sc-fainting[data-etape="1"] .sc-ferme, .prisme-edu-scene.sc-fainting[data-etape="2"] .sc-ferme { display: inline; }
/* accessoires de chaque situation */
.sc-bruit { stroke: var(--edu); opacity: 0; } .sc-explosive[data-etape="1"] .sc-bruit, .sc-explosive[data-etape="2"] .sc-bruit { opacity: 1; }
.sc-nuage { fill: rgba(255, 255, 255, 0.22); opacity: 0; transition: opacity .6s; } .sc-implosive[data-etape="1"] .sc-nuage, .sc-implosive[data-etape="2"] .sc-nuage { opacity: 1; }
.sc-implosive[data-etape="1"] .sc-tete-g, .sc-implosive[data-etape="2"] .sc-tete-g { transform: translateY(14px); } .sc-tete-g { transition: transform .8s ease; }
.sc-batterie { color: #fff; } .sc-niveau { fill: var(--prisme-corail, #F0653C); width: 7px; transition: width 1s ease, fill .6s; }
.sc-social[data-etape="3"] .sc-niveau { width: 28px; fill: var(--prisme-or, #F5A623); } .sc-social[data-etape="4"] .sc-niveau { width: 50px; fill: var(--prisme-vert, #2ECC71); }
.sc-coeur { fill: var(--prisme-corail, #F0653C); transform-box: fill-box; transform-origin: center; }
.sc-souffle { stroke: var(--edu); opacity: 0; transform-box: fill-box; transform-origin: center; }
.sc-anxiety[data-etape="3"] .sc-souffle, .sc-anxiety[data-etape="4"] .sc-souffle { opacity: .8; }
.sc-foule circle { fill: rgba(255, 255, 255, 0.28); transition: transform 1s ease, opacity 1s; }
.sc-agoraphobia[data-etape="3"] .sc-f1, .sc-agoraphobia[data-etape="4"] .sc-f1 { transform: translateX(-60px); opacity: 0; } .sc-agoraphobia[data-etape="3"] .sc-f2, .sc-agoraphobia[data-etape="4"] .sc-f2 { transform: translateX(-60px); opacity: 0; }
.sc-agoraphobia[data-etape="3"] .sc-f5, .sc-agoraphobia[data-etape="4"] .sc-f5 { transform: translateX(-60px); opacity: 0; } .sc-agoraphobia[data-etape="3"] .sc-f3, .sc-agoraphobia[data-etape="4"] .sc-f3 { transform: translateX(80px); opacity: 0; }
.sc-agoraphobia[data-etape="3"] .sc-f4, .sc-agoraphobia[data-etape="4"] .sc-f4 { transform: translateX(80px); opacity: 0; } .sc-agoraphobia[data-etape="3"] .sc-f6, .sc-agoraphobia[data-etape="4"] .sc-f6 { transform: translateX(80px); opacity: 0; }
.sc-etoiles { fill: #FFD84D; opacity: 0; } .sc-fainting[data-etape="1"] .sc-etoiles { opacity: 1; }
.sc-coussin { fill: rgba(255, 255, 255, 0.25); opacity: 0; transition: opacity .6s; } .sc-fainting[data-etape="3"] .sc-coussin, .sc-narcolepsy[data-etape="3"] .sc-coussin, .sc-narcolepsy[data-etape="2"] .sc-coussin { opacity: 1; }
.sc-zzz { fill: #fff; opacity: 0; } .sc-narcolepsy[data-etape="1"] .sc-zzz, .sc-narcolepsy[data-etape="2"] .sc-zzz { opacity: 1; }
/* allongé (évanouissement et narcolepsie, étapes 2-3) */
.sc-forme { transition: transform .9s ease; transform-origin: 0 0; }
.sc-fainting[data-etape="2"] .sc-perso, .sc-fainting[data-etape="3"] .sc-perso { transform: translate(160px, 150px); }
.sc-fainting[data-etape="2"] .sc-forme, .sc-fainting[data-etape="3"] .sc-forme { transform: rotate(-90deg); }
.sc-fainting[data-etape="2"] .sc-aidant, .sc-fainting[data-etape="3"] .sc-aidant { transform: translate(250px, 150px); }
@media (prefers-reduced-motion: no-preference) {
	.sc-explosive[data-etape="1"] .sc-forme, .sc-anxiety[data-etape="1"] .sc-forme, .sc-anxiety[data-etape="2"] .sc-forme { animation: sc-tremble .35s linear infinite; }
	.sc-anxiety[data-etape="1"] .sc-coeur, .sc-anxiety[data-etape="2"] .sc-coeur { animation: sc-battre .5s ease-in-out infinite; }
	.sc-anxiety[data-etape="3"] .sc-coeur, .sc-anxiety[data-etape="4"] .sc-coeur { animation: sc-battre 2.4s ease-in-out infinite; }
	.sc-anxiety[data-etape="3"] .sc-souffle, .sc-anxiety[data-etape="4"] .sc-souffle { animation: sc-souffle 4s ease-in-out infinite; }
	.sc-narcolepsy[data-etape="1"] .sc-zzz, .sc-narcolepsy[data-etape="2"] .sc-zzz { animation: sc-zzz 2.4s ease-in-out infinite; }
	.sc-explosive[data-etape="1"] .sc-bruit, .sc-explosive[data-etape="2"] .sc-bruit { animation: sc-bruit .8s ease-in-out infinite; }
}
@keyframes sc-tremble { 0%, 100% { transform: translateX(-1.5px); } 50% { transform: translateX(1.5px); } }
@keyframes sc-battre { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.25); } }
@keyframes sc-souffle { 0%, 100% { transform: scale(.7); } 50% { transform: scale(1.2); } }
@keyframes sc-zzz { 0%, 100% { transform: translateY(0); opacity: .5; } 50% { transform: translateY(-6px); opacity: 1; } }
@keyframes sc-bruit { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
.prisme-edu-legende { margin: 0; font-size: 18px; font-weight: 600; line-height: 1.45; min-height: 3.6em; }
.prisme-edu-commandes { display: flex; flex-wrap: wrap; gap: 8px; }
.prisme-edu-commandes .prisme-sos-bouton { min-width: 48px; justify-content: center; }
.prisme-edu-etapes { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.prisme-edu-etapes button { width: 100%; min-height: 48px; display: flex; gap: 12px; align-items: flex-start; text-align: left; padding: 12px; border-radius: 14px; border: 1px solid var(--prisme-bordure, #34333B); background: transparent; color: var(--prisme-texte, #FFFFFF); font: inherit; font-size: 15px; line-height: 1.4; cursor: pointer; }
.prisme-edu-etapes .est-actif button { border-color: var(--edu); background: color-mix(in srgb, var(--edu) 16%, transparent); font-weight: 600; }
.prisme-edu-etape-n { flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--edu); color: #17171A; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; font-size: 14px; }

/* Documentation : vraies pages (plus d'incrustation) */
.prisme-sos-sections--liens { display: grid; grid-template-columns: 1fr; gap: 16px; max-width: 900px; width: 100%; margin: 16px auto 0; }
.prisme-sos-sections--liens .prisme-floating-link { grid-column: auto; min-height: 120px; }
.prisme-floating-link--sos-essai { --mk: var(--prisme-or, #F5A623); } .prisme-floating-link--sos-reagir { --mk: var(--prisme-vert, #2ECC71); } .prisme-floating-link--sos-page { --mk: var(--prisme-bleu, #2F8FE0); }
.prisme-sos-reagir { display: flex; flex-direction: column; gap: 24px; --edu: var(--prisme-bleu, #2F8FE0); }
.prisme-sos-reagir.prisme-edu { border: 0; background: transparent; }
.prisme-sos-reagir h2 { margin: 0 0 12px; font-size: 22px; font-weight: 600; }
.prisme-edu-doc-page .prisme-edu-doc-corps { padding: 0; }
.prisme-sos-docs .prisme-floating-link { min-height: 120px; }
@media (min-width: 768px) { .prisme-sos-sections--liens { grid-template-columns: repeat(3, 1fr); } }

/* ---------- PRISME SOS en LISTE (demande de Thomas, 19 oct. 2026 : « sous forme de liste chaque scénario ») : une ligne par situation, plus de bento ---------- */
.prisme-floating-menu-grid, .prisme-sos-sections--liens { display: flex; flex-direction: column; gap: 8px; max-width: 900px; margin-left: auto; margin-right: auto; }
.prisme-floating-menu-grid .prisme-floating-link,
.prisme-floating-menu-grid .prisme-floating-link:nth-child(n),
.prisme-sos-sections--liens .prisme-floating-link,
.prisme-sos-accident .prisme-floating-link { position: relative; grid-column: auto; flex-direction: row; align-items: center; justify-content: flex-start; gap: 16px; min-height: 72px; padding: 16px 48px 16px 20px; border-top: 0; border-left: 6px solid var(--mk, var(--prisme-bleu, #2F8FE0)); border-radius: var(--prisme-radius-s, 14px); background: var(--prisme-fond-carte, #201F24); overflow: visible; }
.prisme-floating-menu-grid .prisme-floating-link::after, .prisme-sos-sections--liens .prisme-floating-link::after, .prisme-sos-accident .prisme-floating-link::after { content: '›'; position: absolute; right: 20px; top: 50%; transform: translateY(-50%); font-size: 28px; color: var(--prisme-texte-att, #A9A9B4); }
.prisme-floating-menu-grid .prisme-floating-dot, .prisme-sos-sections--liens .prisme-floating-dot, .prisme-sos-accident .prisme-floating-dot { position: static; flex: none; width: 14px; height: 14px; margin: 0; background: var(--mk, var(--prisme-bleu, #2F8FE0)); }
.prisme-floating-menu-grid .prisme-floating-link-texte, .prisme-sos-sections--liens .prisme-floating-link-texte, .prisme-sos-accident .prisme-floating-link-texte { gap: 4px; }
.prisme-floating-menu-grid .prisme-floating-link-titre, .prisme-sos-sections--liens .prisme-floating-link-titre, .prisme-sos-accident .prisme-floating-link-titre { font-size: 20px; }
.prisme-floating-menu-grid .prisme-floating-link-desc, .prisme-sos-sections--liens .prisme-floating-link-desc, .prisme-sos-accident .prisme-floating-link-desc { font-size: 15px; }
.prisme-sos-accident { margin-top: 8px; }
@media (max-width: 640px) { .prisme-floating-menu-grid .prisme-floating-link, .prisme-floating-menu-grid .prisme-floating-link:nth-child(n) { padding: 12px 40px 12px 16px; min-height: 64px; } .prisme-floating-menu-grid .prisme-floating-link-titre { font-size: 18px; } }

/* ---------- Une situation = une carte à trois sous-boutons : faire un essai, se documenter, alerter ---------- */
.prisme-sos-lignes { display: flex; flex-direction: column; gap: 12px; max-width: 900px; width: 100%; margin: 0 auto; }
.prisme-sos-ligne { --mk: var(--prisme-bleu, #2F8FE0); display: flex; flex-direction: column; gap: 12px; padding: 16px 20px; border-radius: var(--prisme-radius-s, 14px); border-left: 6px solid var(--mk); background: var(--prisme-fond-carte, #201F24); color: var(--prisme-texte, #FFFFFF); }
.prisme-sos-ligne--explosive { --mk: var(--prisme-corail, #F0653C); } .prisme-sos-ligne--implosive { --mk: var(--prisme-violet, #7B5CF0); } .prisme-sos-ligne--social { --mk: var(--prisme-or, #F5A623); }
.prisme-sos-ligne--anxiety { --mk: var(--prisme-bleu, #2F8FE0); } .prisme-sos-ligne--agoraphobia { --mk: var(--prisme-magenta, #E14FA0); } .prisme-sos-ligne--fainting { --mk: var(--prisme-vert, #2ECC71); } .prisme-sos-ligne--narcolepsy { --mk: #17A2B8; }
.prisme-sos-ligne-tete { display: flex; align-items: flex-start; gap: 16px; }
.prisme-sos-ligne-tete .prisme-floating-dot { position: static; flex: none; width: 14px; height: 14px; margin-top: 8px; background: var(--mk); }
.prisme-sos-ligne-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.prisme-sos-ligne-actions .prisme-sos-bouton { flex: 1 1 96px; min-height: 48px; padding: 8px 10px; font-size: 15px; justify-content: center; text-align: center; text-decoration: none; display: inline-flex; align-items: center; }
.prisme-sos-ligne .prisme-sos-statut { min-height: 0; margin: 0; font-size: 15px; }
.prisme-sos-ligne .prisme-sos-statut:empty { display: none; }
.prisme-sos-ligne--accident { --mk: var(--prisme-corail, #F0653C); margin-top: 0; }

/* Respiration du bouton SOS « composée » (PageSpeed 19 oct. 2026 : l'animation de box-shadow était recalculée à chaque image) :
   même signal doux et lent, mais fait avec un anneau dont seuls transform et opacity changent (traité par le processeur graphique). */
.prisme-floating-toggle { animation: none; position: relative; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45); }
.prisme-floating-toggle::after { content: ''; position: absolute; inset: 0; border-radius: inherit; border: 3px solid rgba(var(--prisme-sos-halo, 240, 101, 60), 0.6); pointer-events: none; opacity: 0; animation: prisme-floating-anneau 2.8s ease-in-out 1.2s 3 both; will-change: transform, opacity; } /* 3 respirations à l'arrivée sur la page, puis le bouton reste calme (une animation sans fin gêne la lecture) */
.prisme-floating-toggle:hover::after, .prisme-floating-toggle:focus-visible::after { animation: none; }
.prisme-floating.is-reduit .prisme-floating-toggle::after { animation: none; }
@keyframes prisme-floating-anneau { 0%, 100% { transform: scale(1); opacity: 0; } 30% { opacity: 0.7; } 65% { transform: scale(1.14); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .prisme-floating-toggle::after { animation: none; } }

/* Sous-boutons plus espacés (remarque de Thomas, 19 oct. 2026 : « l'interface des boutons est très proche ») : vrai espace entre les boutons et avec le texte, cibles larges. */
.prisme-sos-ligne { gap: 16px; padding: 20px 24px; }
.prisme-sos-ligne-actions { gap: 16px; margin-top: 4px; }
.prisme-sos-ligne-actions .prisme-sos-bouton { flex: 1 1 110px; min-height: 56px; padding: 12px 16px; font-size: 16px; }
.prisme-sos-lignes { gap: 20px; }
.prisme-sos-ligne--accident { margin-top: 4px; }
@media (max-width: 480px) { .prisme-sos-ligne { padding: 16px; } .prisme-sos-ligne-actions { gap: 12px; } .prisme-sos-ligne-actions .prisme-sos-bouton { flex-basis: 100%; } }

/* Thème clair (thème PRISME 1.90.0+) : la palette est assombrie, le texte sombre du bouton n'était plus assez contrasté sur le dégradé ; ombre plus légère sur fond clair. */
:root[data-theme="clair"] .prisme-floating { --prisme-sos-texte: #FFFFFF; }
:root[data-theme="clair"] .prisme-floating-toggle { box-shadow: 0 6px 18px rgba(23, 23, 26, 0.28); }

/* Toujours visible, intégré au thème (demande de Thomas, 20 oct. 2026) : un liseré de la couleur du FOND de la page sépare le bouton du contenu
   qui défile dessous (clair ou sombre), et le bouton rétracté garde un libellé « SOS » au lieu de n'être qu'un rond. */
.prisme-floating-toggle { box-shadow: 0 0 0 3px var(--prisme-fond, #17171A), 0 6px 18px rgba(0, 0, 0, 0.45); }
:root[data-theme="clair"] .prisme-floating-toggle { box-shadow: 0 0 0 3px var(--prisme-fond, #F5F5F7), 0 6px 18px rgba(23, 23, 26, 0.28); }
.prisme-floating.is-reduit .prisme-floating-toggle { min-width: 56px; padding-right: 14px; gap: 8px; }
.prisme-floating.is-reduit .prisme-floating-toggle-label { max-width: 48px; opacity: 1; font-size: 0; }
.prisme-floating.is-reduit .prisme-floating-toggle-label::after { content: 'SOS'; font-size: 16px; font-weight: 800; letter-spacing: 0.04em; }
.prisme-floating { z-index: 2147483000; }