/**
 * Citivo — LES MESSAGES (succès, erreur, information) — 0.99.363.
 *
 * Composant UNIQUE du site, posé par `CitivoMessage` (citivo-message.js) et
 * `Citivo_Message::html()` : aucun écran n'écrit plus son propre balisage ni
 * ses propres couleurs. Deux formes, trois couleurs :
 *  - DANS LA PAGE : `.citivo-msg` ;
 *  - PAR-DESSUS LA PAGE : `.citivo-msg.citivo-msg--flottant`, en bas de
 *    l'écran, au-dessus du contenu (carte comprise).
 * Modèle validé par Olivier (0.99.345) : fond clair, texte coloré, barre à
 * gauche.
 *
 * ⚠️ Spécificité par la classe seule, sans `!important` ; la couleur du texte
 * est posée sur le message lui-même (un thème ne la colore pas en blanc).
 */

.citivo-msg {
	margin: 0 0 1rem;
	padding: .7rem .85rem;
	border-left: 4px solid currentColor;
	border-radius: 0 6px 6px 0;
	font-size: var( --citivo-fs-texte, 1rem );
	line-height: 1.45;
	text-align: left;
	overflow-wrap: anywhere;
}

.citivo-msg[hidden] {
	display: none;
}

/* ── Les trois couleurs ── */
.citivo-msg--succes {
	background: #e8f5e9;
	color: #1b5e20;
	border-left-color: #2e7d32;
}

.citivo-msg--erreur {
	background: #fdecea;
	color: #8e2419;
	border-left-color: #c62828;
}

.citivo-msg--info {
	background: #eef3fb;
	color: #24467f;
	border-left-color: #315ba3;
}

/* ── Par-dessus la page ──
   Centré en bas, au-dessus de tout (carte, fiches) ; une ombre pour le
   détacher du contenu. Un seul à la fois : le suivant le remplace.
   ⚠️ 0.99.365 — `z-index` 100050 (~~100000~~) : la lightbox des écrans privés
   est à 100000, le message doit passer DEVANT une fiche ouverte (valeur de
   l'ancien `.citivo-retour-flottant`). Un clic le retire (`cursor`). */
.citivo-msg.citivo-msg--flottant {
	position: fixed;
	left: 50%;
	bottom: 24px;
	z-index: 100050;
	cursor: pointer;
	width: max-content;
	max-width: calc( 100% - 32px );
	margin: 0;
	transform: translateX( -50% );
	box-shadow: 0 4px 14px rgba( 0, 0, 0, .18 );
	font-weight: 600;
	transition: opacity .3s ease;
}

.citivo-msg.citivo-msg--flottant.is-sortie {
	opacity: 0;
}

@media ( prefers-reduced-motion: reduce ) {
	.citivo-msg.citivo-msg--flottant {
		transition: none;
	}
}