/**
 * HappyManage — Demo Note
 *
 * Utility class pour annoter une zone d'un site démo de prospection.
 * Signale au prospect "ce contenu sera enrichi avec vos vraies données".
 * Style intentionnellement visible (sauge pâle + italique) sans être
 * aggressif — assume son rôle d'annotation agence.
 *
 * Usage :
 *   <aside class="hm-demo-note">
 *     <span class="hm-demo-note__label">Note pour la démo</span>
 *     Ce texte sera remplacé par votre vraie histoire.
 *   </aside>
 *
 * À retirer du markup à la signature du client (le module CSS peut
 * rester enqueué pour les autres démos de l'agence).
 *
 * Overrides exposés :
 *   --hm-note-bg, --hm-note-accent, --hm-note-max-width
 */

.hm-demo-note {
	--hm-note-bg:        var(--color-primary-soft, #E8EFD9);
	--hm-note-accent:    var(--color-primary-dark, #9eb37e);
	--hm-note-max-width: 720px;

	display: block;
	background: var(--hm-note-bg);
	border-left: 3px solid var(--hm-note-accent);
	border-radius: 6px;
	padding: 1rem 1.25rem;
	font-style: italic;
	font-size: 0.9375rem;
	line-height: 1.55;
	color: var(--color-text, #0a0a0a);
	margin: 1.5rem auto;
	max-width: var(--hm-note-max-width);
}

.hm-demo-note__label {
	display: block;
	font-style: normal;
	font-weight: 500;
	font-size: 0.7rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--color-secondary, #696d5e);
	margin-bottom: 0.4rem;
}

.hm-demo-note p {
	margin: 0;
}

.hm-demo-note p + p {
	margin-top: 0.5rem;
}