/* ==========================================================================
   ESE — Alertes : une seule famille pour WooCommerce (classique et blocs),
   Contact Form 7 et la newsletter. Carte blanche, tuile d’icône colorée,
   action compacte à droite, entrée douce. Rouge réservé aux erreurs.
   ========================================================================== */

:root {
	--alert-info: var(--ese-bleu-pro);
	--alert-info-bg: var(--ese-bleu-tint);
	--alert-error: #C0392B;
	--alert-error-bg: #FBEDEB;
	/* Icônes (tracés Lucide) en masque : la couleur suit currentColor. */
	--alert-ico-info: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 16v-4'/%3E%3Cpath d='M12 8h.01'/%3E%3C/svg%3E");
	--alert-ico-ok: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
	--alert-ico-error: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3'/%3E%3Cpath d='M12 9v4'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E");
}

/* ---------- Carte d’alerte commune ---------- */
.woocommerce-notices-wrapper:empty { display: none; }
.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.wpcf7 form .wpcf7-response-output,
.newsletter__status {
	--tone: var(--alert-info);
	--tone-bg: var(--alert-info-bg);
	--ico: var(--alert-ico-info);
	position: relative;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px 20px;
	min-height: 68px;
	margin: 24px 0;
	padding: 14px 16px 14px 68px;
	list-style: none;
	background: #fff;
	border: 1px solid var(--ese-bordure);
	border-radius: var(--radius-card);
	box-shadow: 0 10px 28px rgba(38, 41, 46, .06);
	color: var(--ese-texte);
	font-size: 15px;
	line-height: 1.5;
	animation: ese-alert-in var(--dur-md, 420ms) var(--ease-out, ease-out) both;
}
/* Tuile d’icône : fond teinté + pictogramme en masque */
.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before,
.wpcf7 form .wpcf7-response-output::before,
.newsletter__status::before {
	content: "";
	position: absolute;
	left: 14px;
	top: 14px;
	width: 40px;
	height: 40px;
	border-radius: 10px;
	background: var(--tone-bg);
}
.woocommerce-message::after,
.woocommerce-info::after,
.woocommerce-error::after,
.wpcf7 form .wpcf7-response-output::after,
.newsletter__status::after {
	content: "";
	position: absolute;
	left: 24px;
	top: 24px;
	width: 20px;
	height: 20px;
	background: var(--tone);
	-webkit-mask: var(--ico) center / contain no-repeat;
	mask: var(--ico) center / contain no-repeat;
}

/* Tons */
.woocommerce-message, .wpcf7 form.sent .wpcf7-response-output, .newsletter__status { --ico: var(--alert-ico-ok); }
.woocommerce-error,
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output,
.wpcf7 form.aborted .wpcf7-response-output,
.wpcf7 form.spam .wpcf7-response-output,
.newsletter__status--error {
	--tone: var(--alert-error);
	--tone-bg: var(--alert-error-bg);
	--ico: var(--alert-ico-error);
}

/* Le focus posé par WooCommerce pour annoncer l’alerte n’a pas besoin d’un contour visible. */
.woocommerce-message:focus, .woocommerce-info:focus, .woocommerce-error:focus,
.wc-block-components-notice-banner:focus { outline: none; }

/* Erreurs WooCommerce classiques : une liste, une ligne par message */
.woocommerce-error { display: block; padding-top: 22px; padding-bottom: 22px; }
.woocommerce-error li { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 20px; }
.woocommerce-error li + li { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--ese-bordure); }

/* Action (« Voir le panier », « Continuer »…) : compacte, toujours à droite */
.woocommerce-message a.button,
.woocommerce-info a.button,
.woocommerce-error a.button,
.woocommerce-notices-wrapper a.button {
	order: 2;
	margin-left: auto;
	min-height: 40px;
	padding: 0 16px;
	border-radius: var(--radius-btn);
	background: var(--tone-bg);
	color: var(--tone);
	font-size: 13.5px;
	font-weight: 600;
	box-shadow: none;
	white-space: nowrap;
	transition: background-color var(--dur-sm, 220ms), color var(--dur-sm, 220ms);
}
.woocommerce-message a.button::after,
.woocommerce-info a.button::after,
.woocommerce-error a.button::after { content: "→"; margin-left: 2px; transition: transform var(--dur-md, 420ms) var(--ease-out, ease-out); }
.woocommerce-message a.button:hover,
.woocommerce-info a.button:hover,
.woocommerce-error a.button:hover,
.woocommerce-notices-wrapper a.button:hover { background: var(--tone); color: #fff; box-shadow: none; }
.woocommerce-message a.button:hover::after,
.woocommerce-info a.button:hover::after,
.woocommerce-error a.button:hover::after { transform: translateX(3px); }
.woocommerce-error li .button { order: 2; }

/* ---------- Alertes des blocs WooCommerce (panier, commande) ---------- */
.wc-block-components-notice-banner {
	gap: 14px !important;
	align-items: center !important;
	margin: 0 0 20px !important;
	padding: 14px 16px !important;
	background: #fff !important;
	border: 1px solid var(--ese-bordure) !important;
	border-radius: var(--radius-card) !important;
	box-shadow: 0 10px 28px rgba(38, 41, 46, .06);
	color: var(--ese-texte) !important;
	font-size: 15px !important;
	animation: ese-alert-in var(--dur-md, 420ms) var(--ease-out, ease-out) both;
}
.wc-block-components-notice-banner > svg {
	flex-shrink: 0;
	width: 40px !important;
	height: 40px !important;
	padding: 10px;
	border-radius: 10px;
	background: var(--alert-info-bg) !important;
	fill: var(--alert-info) !important;
}
.wc-block-components-notice-banner.is-error > svg { background: var(--alert-error-bg) !important; fill: var(--alert-error) !important; }
.wc-block-components-notice-banner .wc-forward { color: var(--ese-bleu-pro) !important; font-weight: 600; opacity: 1 !important; }

/* ---------- Contact Form 7 & newsletter ---------- */
.wpcf7 form .wpcf7-response-output { margin: 20px 0 0; padding-top: 22px; padding-bottom: 22px; font-size: 14.5px; }
.wpcf7 form.init .wpcf7-response-output, .wpcf7 form.resetting .wpcf7-response-output, .wpcf7 form.submitting .wpcf7-response-output { display: none; }
.newsletter__status { margin: 16px 0 0; min-height: 56px; padding: 10px 14px 10px 60px; font-size: 14px; max-width: 520px; }
.newsletter__status::before { left: 10px; top: 8px; }
.newsletter__status::after { left: 20px; top: 18px; }

@keyframes ese-alert-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }

@media (max-width: 767px) {
	.woocommerce-message, .woocommerce-info, .woocommerce-error { font-size: 14.5px; }
	.woocommerce-message a.button, .woocommerce-info a.button, .woocommerce-error a.button { margin-left: 0; }
}

/* Contact Form 7 impose une bordure colorée selon l’état : on garde la carte commune. */
.wpcf7 form.wpcf7-form .wpcf7-response-output { border: 1px solid var(--ese-bordure); }
.ese-form .wpcf7-not-valid { border-color: var(--alert-error) !important; }
.ese-form .wpcf7-not-valid:focus { box-shadow: 0 0 0 3px rgba(192, 57, 43, .14) !important; }