/* ==========================================================================
   PRISME — Pages d'urgence (crise explosive / implosive / batterie sociale)
   Repose sur les tokens définis dans prisme-core.css (chargé en dépendance).
   ========================================================================== */

.prisme-crise-wrap {
	max-width: 1100px;
	margin: 24px auto 48px;
	padding: 0;
	overflow: hidden;
}

.prisme-crise-explosive   { --prisme-accent: var(--prisme-corail, #F0653C); }
.prisme-crise-implosive   { --prisme-accent: var(--prisme-violet, #7B5CF0); }
.prisme-crise-social      { --prisme-accent: var(--prisme-or, #F5A623); }
.prisme-crise-anxiety     { --prisme-accent: var(--prisme-bleu, #2F8FE0); }
.prisme-crise-agoraphobia { --prisme-accent: var(--prisme-magenta, #E14FA0); }
.prisme-crise-fainting    { --prisme-accent: var(--prisme-vert, #2ECC71); }
.prisme-crise-narcolepsy  { --prisme-accent: #17A2B8; } /* teal — les 6 couleurs de la palette de base sont déjà prises par les autres profils */

/* Bandeau d'accroche — doit être lu en premier, par un tiers. Occupe
   tout l'écran à l'ouverture de la page : un tiers qui arrive sur
   cette page (souvent dans l'urgence) doit d'abord comprendre ce qui
   se passe, avant même de voir ce qu'il faut faire. Le texte est
   volontairement très grand pour rester lisible d'un coup d'œil,
   dans un contexte de stress. */
.prisme-crise-banner {
	background: #000000;
	padding: 24px;
	padding: clamp(16px, 4vw, 64px);
	min-height: 100vh;
	min-height: 100svh;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center; /* le texte, agrandi par le script, occupe tout le premier écran */
	text-align: left;
	box-sizing: border-box;
}
.prisme-crise-banner-text {
	margin: 0;
	width: 100%;
	max-width: 1500px;
	/* clamp() calcule la taille à partir de la largeur de l'écran
	   (vw) : énorme sur mobile comme sur grand écran, sans media
	   query à multiplier pour chaque appareil. */
	font-size: clamp(44px, 25vw, 260px);
	line-height: 1.15;
	font-weight: 800;
	letter-spacing: -0.01em;
	color: var(--prisme-texte, #FFFFFF);
}
.prisme-crise-banner-text strong {
	color: var(--prisme-accent, #F0653C);
	text-transform: uppercase;
	font-weight: 800;
	font-size: 1.1em;
	letter-spacing: 0.01em;
}
.prisme-crise-banner-scroll {
	margin-top: 48px;
	font-size: 14px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--prisme-texte-att, #A9A9B4);
	animation: prisme-crise-bounce 1.6s ease-in-out infinite;
}
@keyframes prisme-crise-bounce {
	0%, 100% { transform: translateY(0); opacity: 0.6; }
	50% { transform: translateY(8px); opacity: 1; }
}

/* En-tête */
.prisme-crise-header {
	text-align: left;
	padding: 32px 24px 8px;
}
.prisme-crise-tag {
	display: inline-block;
	font-size: 14px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	font-weight: 600;
	color: var(--prisme-accent, #F0653C);
	border: 1px solid var(--prisme-accent, #F0653C);
	border-radius: var(--prisme-radius-pill, 999px);
	padding: 4px 16px;
	margin-bottom: 16px;
}
.prisme-crise-header h1 {
	font-size: 28px;
	font-weight: 600;
	margin: 0 0 8px;
	letter-spacing: -0.01em;
}
.prisme-crise-subtitle {
	color: var(--prisme-texte-att, #A9A9B4);
	font-size: 15px;
	margin: 0;
}

/* Sections */
.prisme-crise-colonnes {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 24px;
	padding: 24px 24px;
}
@media (max-width: 1024px) {
	.prisme-crise-colonnes {
		grid-template-columns: 1fr;
		gap: 16px;
	}
}

.prisme-crise-colonnes .prisme-crise-section {
	border: 1px solid var(--prisme-bordure, #34333B);
	border-radius: var(--prisme-radius, 28px);
	padding: 24px;
}
.prisme-crise-colonnes .prisme-crise-section--ressenti {
	border-color: var(--prisme-accent, #F0653C);
}

.prisme-crise-section {
	border-top: 1px solid var(--prisme-bordure, #34333B);
	padding: 24px 24px;
}
.prisme-crise-section h2 {
	font-size: 14px;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--prisme-texte-att, #A9A9B4);
	margin: 0 0 16px;
	font-weight: 600;
}
.prisme-crise-section ul {
	margin: 0;
	padding: 0;
	list-style: none;
}
.prisme-crise-section li {
	position: relative;
	padding-left: 24px;
	margin-bottom: 12px;
	font-size: 16px;
	line-height: 1.5;
}
.prisme-crise-section li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 8px;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--prisme-accent, #F0653C);
}

/* "Ce que je ressens" passe en premier et doit se voir comme tel :
   fond légèrement teinté par l'accent du profil, titre en couleur
   plutôt qu'en gris neutre — pour qu'un lecteur qui parcourt vite la
   page comprenne immédiatement que cette section-là est celle qui
   compte le plus. */
.prisme-crise-section--ressenti {
	background: rgba(255, 255, 255, 0.04);
	background: color-mix(in srgb, var(--prisme-accent, #F0653C) 10%, transparent);
	border-top: none;
}
.prisme-crise-section--ressenti h2 {
	color: var(--prisme-accent, #F0653C);
}

.prisme-crise-note {
	border-top: 1px solid var(--prisme-bordure, #34333B);
	padding: 24px 24px;
	margin: 0;
	font-size: 14px;
	color: var(--prisme-texte-att, #A9A9B4);
	font-style: italic;
}

/* Action */
.prisme-crise-action {
	border-top: 1px solid var(--prisme-bordure, #34333B);
	padding: 24px 24px 32px;
	text-align: left;
	max-width: 480px;
	margin: 0 auto;
}
.prisme-crise-status {
	min-height: 20px;
	font-size: 14px;
	color: var(--prisme-texte, #FFFFFF);
	margin: 12px 0 0;
	font-weight: 500;
}
.prisme-crise-hint {
	font-size: 14px;
	color: var(--prisme-texte-att, #A9A9B4);
	margin: 8px 0 0;
	line-height: 1.5;
}

/* Bloc "Appeler les pompiers" — priorité visuelle sur le bouton
   d'alerte à la personne de confiance : rouge d'urgence, séparé par un
   espace net du reste des actions. */
.prisme-crise-urgence-call {
	margin-bottom: 32px;
	padding-bottom: 24px;
	border-bottom: 1px solid var(--prisme-bordure, #34333B);
}
.prisme-crise-btn-urgence {
	background: #D92D20;
	color: #FFFFFF;
}
.prisme-crise-btn-urgence:hover,
.prisme-crise-btn-urgence:focus-visible {
	background: #B7241A;
}

/* Adresse résolue : gros texte, fort contraste, pour être lisible
   pendant l'appel sans avoir à s'approcher de l'écran. */
.prisme-crise-adresse {
	margin: 16px 0 0;
	padding: 16px;
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid var(--prisme-bordure, #34333B);
	border-radius: var(--prisme-radius, 28px);
	font-size: 20px;
	font-weight: 600;
	line-height: 1.4;
	color: var(--prisme-texte, #FFFFFF);
}

.prisme-crise-footer {
	text-align: left;
	padding: 16px 24px;
	border-top: 1px solid var(--prisme-bordure, #34333B);
	font-size: 14px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--prisme-texte-att, #A9A9B4);
}

@media (max-width: 480px) {
	.prisme-crise-header h1 { font-size: 24px; }
}

/* Mouvement réduit : aucune transition ni animation sur les pages d'urgence si l'utilisateur le demande */
@media (prefers-reduced-motion: reduce) {
	[class*="prisme-crise"], [class*="prisme-crise"] * { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

/* Responsive — jeu de seuils unique du projet : 480 / 640 / 768 / 1024 (mobile d'abord, 320 px minimum). */
@media (max-width: 640px) {
	/* La bannière reste très grande, mais assez petite pour qu'aucun mot (« autistique », « connaissance »)
	   ne soit coupé en milieu de mot à 320 px : en situation de stress, un mot entier se lit, pas un mot haché.
	   Au-dessus de 640 px, la taille d'origine (25vw) est inchangée. */
	.prisme-crise-banner-text { font-size: clamp(32px, 12vw, 260px); overflow-wrap: normal; word-break: normal; }
	.prisme-crise-colonnes { padding: 16px; gap: 12px; }
	.prisme-crise-colonnes .prisme-crise-section, .prisme-crise-section { padding: 16px; }
}

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

/* ---- Texte mis en avant, sur tous les appareils ---- */
/* iPad en portrait et petit ordinateur : « Ce que je ressens » en pleine largeur, les deux autres sections côte à côte (l'ordre de lecture est conservé) */
@media (min-width: 641px) and (max-width: 1024px) {
	.prisme-crise-colonnes { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
	.prisme-crise-colonnes > .prisme-crise-section--ressenti { grid-column: 1 / -1; }
}
/* Écrans larges : texte des listes plus grand pour rester lisible à distance (un tiers lit souvent par-dessus l'épaule) */
@media (min-width: 768px) {
	.prisme-crise-section li { font-size: 18px; }
	.prisme-crise-header h1 { font-size: 36px; }
	.prisme-crise-subtitle { font-size: 18px; }
}
@media (min-width: 1280px) {
	.prisme-crise-section li { font-size: 20px; }
	.prisme-crise-header h1 { font-size: 44px; }
	.prisme-crise-colonnes { gap: 32px; padding: 32px; }
	.prisme-crise-action { max-width: 640px; }
}