/**
 * Le bouton « Être prévenu du retour », sur une fiche en rupture.
 *
 * Il se pose sous le « Rupture de stock » que WooCommerce écrit déjà, à
 * l'endroit exact où le client apprend la mauvaise nouvelle.
 *
 * ⚠️ Le jaune impose un texte foncé. Contraste calculé sur #FDD235 :
 * blanc → 1,45 (illisible), encre #16211C → 11,39. Le bouton reprend donc
 * l'encre, comme la pastille des cartes.
 */

.lupeo-alerte {
	--la-jaune: var(--lupeo-jaune, #fdd235);
	--la-jaune-fonce: #e9bc16;
	--la-encre: #16211c;
	--la-gris: #5b6b64;
	--la-filet: #dfe5e2;

	margin: 14px 0 4px;
}

.lupeo-alerte__bouton,
.lupeo-alerte__valider {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 12px 22px;
	border: 0;
	border-radius: 10px;
	background: var(--la-jaune);
	color: var(--la-encre);
	font-size: 15px;
	font-weight: 700;
	cursor: pointer;
}

.lupeo-alerte__bouton:hover,
.lupeo-alerte__bouton:focus-visible,
.lupeo-alerte__valider:hover,
.lupeo-alerte__valider:focus-visible {
	background: var(--la-jaune-fonce);
}

.lupeo-alerte__valider[disabled] {
	opacity: 0.6;
	cursor: progress;
}

.lupeo-alerte__panneau {
	margin-top: 12px;
	padding: 16px 18px;
	border: 1px solid var(--la-filet);
	border-radius: 12px;
	background: #fff;
}

.lupeo-alerte__panneau[hidden] {
	display: none;
}

.lupeo-alerte__texte {
	margin: 0 0 12px;
	font-size: 14.5px;
	line-height: 1.5;
	color: var(--la-encre);
}

.lupeo-alerte__champ {
	display: block;
	margin: 0 0 10px;
}

.lupeo-alerte__champ span {
	display: block;
	margin-bottom: 5px;
	font-size: 13px;
	color: var(--la-gris);
}

.lupeo-alerte__champ input {
	width: 100%;
	height: 48px;
	padding: 0 14px;
	border: 1px solid var(--la-filet);
	border-radius: 10px;
	/* Sous 16 px, Safari iOS zoome à la mise au point. */
	font-size: 16px;
	color: var(--la-encre);
	box-sizing: border-box;
}

.lupeo-alerte__champ input:focus {
	outline: 2px solid var(--la-jaune-fonce);
	outline-offset: 1px;
}

/* Le lien discret qui ouvre la saisie quand l'adresse connue n'est pas la bonne. */
.lupeo-alerte__autre {
	display: inline-block;
	margin-left: 12px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--la-gris);
	font-size: 13.5px;
	text-decoration: underline;
	cursor: pointer;
}

.lupeo-alerte__saisie[hidden] {
	display: none;
}

.lupeo-alerte__erreur {
	margin: 10px 0 0;
	font-size: 13px;
	color: #d63d3d;
}

.lupeo-alerte__erreur[hidden] {
	display: none;
}

.lupeo-alerte__mention {
	margin: 12px 0 0;
	font-size: 12px;
	line-height: 1.45;
	color: var(--la-gris);
}

/*
 * La confirmation : elle remplace le bouton une fois la demande enregistrée, et
 * s'affiche aussi au rechargement pour qui est déjà inscrit — sans quoi le
 * client redemanderait, et douterait que sa première demande ait été prise.
 */
.lupeo-alerte__ok {
	display: flex;
	align-items: center;
	gap: 9px;
	margin: 0;
	padding: 13px 16px;
	border-radius: 10px;
	background: #f3f8f5;
	border: 1px solid var(--la-filet);
	font-size: 14.5px;
	font-weight: 600;
	color: var(--la-encre);
}

.lupeo-alerte__ok::before {
	content: "✓";
	color: var(--lupeo-vert, #0b996e);
	font-size: 17px;
	font-weight: 700;
}

@media (max-width: 480px) {
	.lupeo-alerte__bouton,
	.lupeo-alerte__valider {
		width: 100%;
	}

	.lupeo-alerte__autre {
		display: block;
		margin: 12px 0 0;
	}
}

/*
 * Le badge « ÉPUISÉ » de Blocksy, sur la photo de la fiche.
 *
 * Il existe déjà — c'est le thème qui le pose, en noir (#24292E), réglé dans
 * son personnalisateur. On ne le double pas d'une pastille maison : on le met
 * simplement à la charte, pour qu'il dise la même chose et de la même couleur
 * que celle des cartes de rayon.
 *
 * ⚠️ Surcharge de variables, pas de propriétés : Blocksy construit ce badge à
 * partir de `--badge-text-color` et `--badge-background-color`. Réécrire
 * `background` par-dessus marcherait aujourd'hui et casserait à la prochaine
 * version du thème.
 */
/*
 * ⚠️ `body` en tête, et ce n'est pas décoratif. Blocksy définit ces variables
 * dans son CSS **inline** (`ct-main-styles-inline-css`), imprimé APRÈS les
 * feuilles des extensions : à spécificité égale, c'est lui qui gagnait, et le
 * badge restait noir malgré la surcharge. Constaté à l'écran le 31/08/2026,
 * après un premier essai sans `body` qui n'avait rien changé.
 */
body .out-of-stock-badge,
body [class*="ct-woo-badge-"].out-of-stock-badge {
	--badge-background-color: var(--lupeo-jaune, #fdd235);
	/* Contraste calculé sur #FDD235 : blanc → 1,45 (illisible), encre → 11,39. */
	--badge-text-color: #16211c;
	font-weight: 700;
}