/* ==========================================================================
   BODYGUARD — Opération Octobre Rose 2026
   Fenêtre pop-up d'accueil + bandeau RoseUp sur la fiche produit.

   Les zones cliquables sont positionnées en pourcentage du visuel : elles
   restent alignées sur les boutons dessinés quelle que soit la largeur
   d'affichage. Depuis la 1.1.0 leurs coordonnées ne sont plus ici mais en
   style inline, écrites par le plugin d'après Réglages > Octobre Rose :
   c'est ce qui permet de les déplacer à la souris quand le visuel change.
   Cette feuille ne porte plus que leur allure.
   ========================================================================== */

:root {
	--bgor-rose: #e87ba2;
	--bgor-rose-fonce: #d95b8a;
	--bgor-magenta: #a50e47;
	--bgor-blanc: #fff;
}

/* --- Utilitaire : visible des seuls lecteurs d'écran --------------------- */
.bgor-sr {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* ==========================================================================
   1. Fenêtre pop-up
   ========================================================================== */

.bgor-overlay {
	position: fixed;
	inset: 0;
	z-index: 1999999999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	background: rgba(40, 12, 24, .62);
	opacity: 0;
	transition: opacity .28s ease;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
}

.bgor-overlay[hidden] {
	display: none;
}

.bgor-overlay.est-ouverte {
	opacity: 1;
}

.bgor-fenetre {
	position: relative;
	width: 100%;
	max-width: 760px;
	margin: auto;
	background: var(--bgor-blanc);
	border-radius: 14px;
	overflow: hidden;
	box-shadow: 0 24px 60px rgba(0, 0, 0, .35);
	transform: translateY(14px) scale(.98);
	transition: transform .28s ease;
}

.bgor-overlay.est-ouverte .bgor-fenetre {
	transform: none;
}

/* --- Bouton de fermeture ------------------------------------------------ */
.bgor-fermer {
	position: absolute;
	top: 10px;
	right: 10px;
	z-index: 3;
	width: 44px;
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	background: rgba(255, 255, 255, .9);
	border: 0;
	border-radius: 50%;
	cursor: pointer;
	box-shadow: 0 2px 8px rgba(0, 0, 0, .18);
	transition: background .18s ease, transform .18s ease;
}

.bgor-fermer:hover,
.bgor-fermer:focus-visible {
	background: var(--bgor-blanc);
	transform: scale(1.06);
}

.bgor-fermer svg {
	width: 20px;
	height: 20px;
	stroke: var(--bgor-magenta);
	stroke-width: 2.2;
	stroke-linecap: round;
	fill: none;
}

/* --- Visuel et zones cliquables ----------------------------------------- */
.bgor-visuel {
	position: relative;
	display: block;
	line-height: 0;
}

.bgor-visuel img {
	display: block;
	width: 100%;
	height: auto;
}

.bgor-zone {
	position: absolute;
	display: block;
	border-radius: 999px;
	text-indent: -9999px;
	overflow: hidden;
	transition: box-shadow .18s ease, background .18s ease;
}

.bgor-zone:focus-visible {
	outline: 3px solid var(--bgor-magenta);
	outline-offset: 3px;
}

/* La forme suit ce que dessine le visuel : bouton arrondi, ou bloc de texte. */
.bgor-zone[data-bgor-forme="rectangle"] {
	border-radius: 4px;
}

/* Un bouton se souligne d'un liseré, un texte se surligne. */
.bgor-zone[data-bgor-forme="pilule"]:hover {
	box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .85), 0 0 0 3px rgba(165, 14, 71, .25);
}

.bgor-zone[data-bgor-forme="rectangle"]:hover {
	background: rgba(255, 255, 255, .22);
}

/* --- CTA doublés : nécessaires dès que le visuel devient petit ----------- */
.bgor-ctas {
	display: none;
	gap: 10px;
	flex-direction: column;
	padding: 14px 16px 18px;
	background: var(--bgor-blanc);
}

.bgor-cta {
	display: block;
	padding: 14px 18px;
	border-radius: 999px;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.25;
	text-align: center;
	text-decoration: none;
}

.bgor-cta--plein {
	background: var(--bgor-rose);
	color: var(--bgor-blanc);
}

.bgor-cta--plein:hover,
.bgor-cta--plein:focus-visible {
	background: var(--bgor-rose-fonce);
	color: var(--bgor-blanc);
}

.bgor-cta--contour {
	background: var(--bgor-blanc);
	color: var(--bgor-magenta);
	box-shadow: inset 0 0 0 2px var(--bgor-rose);
}

.bgor-cta--contour:hover,
.bgor-cta--contour:focus-visible {
	background: #fdf1f5;
	color: var(--bgor-magenta);
}

/*
 * Sous 768 px, les boutons dessinés dans l'image mesurent moins de 30 px de
 * haut : trop petits pour être tapés au doigt. On les neutralise et on affiche
 * de vrais boutons sous le visuel.
 */
@media (max-width: 767px) {
	.bgor-overlay { padding: 12px; align-items: flex-start; }
	.bgor-fenetre { max-width: 520px; }
	.bgor-ctas { display: flex; }
	/* Posée par le plugin sur les zones que double un vrai bouton. */
	.bgor-zone--cache-mobile { display: none; }
}

@media (prefers-reduced-motion: reduce) {
	.bgor-overlay,
	.bgor-fenetre,
	.bgor-fermer,
	.bgor-zone { transition: none; }
}

/* ==========================================================================
   2. Bandeau fiche produit
   ========================================================================== */

.bgor-bandeau {
	position: relative;
	clear: both;
	margin: 32px 0;
	line-height: 0;
	border-radius: 10px;
	overflow: hidden;
}

.bgor-bandeau[hidden] {
	display: none;
}

.bgor-bandeau__visuel {
	width: 100%;
}

.bgor-bandeau img {
	display: block;
	width: 100%;
	height: auto;
}

/* Sur fond clair, le surlignage blanc ne se verrait pas. */
.bgor-bandeau .bgor-zone[data-bgor-forme="rectangle"]:hover {
	background: rgba(165, 14, 71, .10);
}

/*
 * Le bandeau fait 2,75:1. En dessous de ~700 px, les textes tombent sous
 * 9 px et deviennent illisibles. En attendant une déclinaison mobile
 * fournie par Astelia, on conserve une largeur minimale lisible et on
 * autorise le défilement horizontal plutôt que d'écraser le texte.
 */
@media (max-width: 700px) {
	.bgor-bandeau {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}
	/*
	 * C'est le conteneur interne qui porte la largeur, pas l'image : les
	 * zones étant calées sur lui, leurs pourcentages restent justes sans
	 * qu'on ait à les redire en pixels.
	 */
	.bgor-bandeau__visuel {
		width: 680px;
	}
	.bgor-bandeau__visuel img {
		width: 100%;
		max-width: none;
	}
}