/* =============================================================================
   Touchy Idea — Bandeau d'alerte
   =============================================================================

   Composant repris à l'identique de touchy-idea-panier-divi/assets/panier.css
   (section « Alertes — bandeau fixe »). Mêmes sélecteurs, mêmes valeurs : les
   deux feuilles peuvent coexister sur une page sans se contredire.

   Les couleurs passent par `var(--ti-xxx, repli)` : la charte si elle est
   chargée, sinon la valeur en dur.
   ============================================================================= */

.tip-alerts {
	position: fixed;
	/* Valeur de repli, sous un menu de hauteur courante : le script la remplace
	   par la hauteur réelle de l'en-tête quand il en trouve un, fixe ou
	   collant. Sans ça, le message tombe derrière le menu. */
	top: 200px;
	left: 50%;
	z-index: 99999;
	display: flex;
	flex-direction: column;
	gap: 10px;
	width: min(92vw, 560px);
	transform: translateX(-50%);
	pointer-events: none;
}

.tip-alert {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 16px 18px;
	border-radius: 20px;
	background: var(--ti-cherry-500, #ff6fa5);
	color: #fff;
	font-family: inherit;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.5;
	text-align: left;
	box-shadow: 0 2px 6px rgba(45, 27, 71, 0.07), 0 12px 28px rgba(45, 27, 71, 0.18);
	pointer-events: auto;
	animation: tip-alert-in 520ms cubic-bezier(0.22, 1, 0.36, 1);
}

.tip-alert::before {
	content: "!";
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	width: 24px;
	height: 24px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.28);
	font-size: 15px;
	font-weight: 800;
}

.tip-alert--success {
	background: var(--ti-mint-200, #d7f0e6);
	color: var(--ti-plum-800, #2d1b47);
}

.tip-alert--success::before {
	content: "\2713";
	background: var(--ti-mint-400, #b8e5d4);
	color: var(--ti-mint-600, #3e9c79);
}

.tip-alert--info {
	background: var(--ti-banana-200, #fff0c2);
	color: var(--ti-plum-800, #2d1b47);
}

.tip-alert--info::before {
	background: var(--ti-banana-400, #ffdd81);
	color: var(--ti-plum-800, #2d1b47);
}

.tip-alert__text {
	flex: 1;
	min-width: 0;
}

/* La croix est un tracé SVG : le caractère « × » n'a pas son centre optique au
   milieu de sa boîte, et aucune règle de centrage ne rattrape ça. */
.tip-alert__close {
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	width: 26px;
	height: 26px;
	padding: 0;
	border: none;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.2);
	color: inherit;
	cursor: pointer;
}

.tip-alert__close svg {
	display: block;
}

/* Lien optionnel dans le message (« Voir le panier »). */
.tip-alert__lien {
	color: inherit !important;
	text-decoration: underline;
	text-underline-offset: 3px;
	white-space: nowrap;
}

/* Une descente franche, puis un léger dépassement : le mouvement attire l'œil
   sans clignoter. */
@keyframes tip-alert-in {
	0%   { opacity: 0; transform: translateY(-24px); }
	60%  { opacity: 1; transform: translateY(5px); }
	100% { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
	.tip-alert {
		animation: none;
	}
}

/* =============================================================================
   Masquage des messages d'origine
   =============================================================================

   Sans ça, le message natif s'affiche puis disparaît quand le script le
   reprend : un clignotement à chaque notification.

   Le masquage dépend de `[data-touchy-alertes="on"]`, posé par le script de
   garde en tête de page et retiré s'il s'avère que le script principal n'a pas
   tourné. Sans JavaScript, l'attribut n'est jamais posé et les messages natifs
   restent lisibles.

   On ne vise QUE les conteneurs de la file de messages. Les classes
   `.woocommerce-info` et consorts servent aussi à du mobilier de page — le
   dépliant « J'ai un code promo », celui de connexion, le panier vide — et les
   masquer casserait la page. Ces éléments-là ne sont jamais dans le wrapper.
   ============================================================================= */

[data-touchy-alertes="on"] .woocommerce-notices-wrapper > *,
[data-touchy-alertes="on"] .woocommerce-NoticeGroup > *,
[data-touchy-alertes="on"] .wc-block-components-notice-banner {
	display: none !important;
}