.bdo-popup-bienvenue {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
}

/* Sans cette règle, "display: flex" ci-dessus reste appliqué même
   quand l'attribut hidden est présent (même niveau de priorité CSS,
   et notre feuille de style passe après celle du navigateur) — la
   popup restait donc visible en permanence, la croix n'avait aucun
   effet visuel malgré un JavaScript par ailleurs correct. */
.bdo-popup-bienvenue[hidden] {
	display: none;
}

.bdo-popup-bienvenue-fond {
	position: absolute;
	inset: 0;
	background: rgba( 11, 46, 61, 0.75 ); /* --bdo-abysse, semi-transparent */
}

.bdo-popup-bienvenue-carte {
	position: relative;
	background: var( --bdo-ecume, #FBF8F2 );
	border-radius: 16px;
	max-width: 480px;
	width: 100%;
	max-height: 90vh;
	overflow-y: auto;
	box-shadow: 0 8px 30px rgba( 0, 0, 0, 0.3 );
}

.bdo-popup-bienvenue-fermer {
	position: absolute;
	top: 10px;
	right: 10px;
	z-index: 2;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	border: none;
	background: rgba( 11, 46, 61, 0.6 );
	color: #fff;
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
}

.bdo-popup-bienvenue-media {
	display: block;
	width: 100%;
	height: auto; /* la hauteur suit le ratio réel du média, plus de recadrage forcé qui coupait la vidéo */
	border-radius: 16px 16px 0 0;
}

.bdo-popup-bienvenue-contenu {
	padding: 24px 26px 28px;
	text-align: center;
}

.bdo-popup-bienvenue-contenu h2 {
	margin: 0 0 10px;
	font-size: 22px;
	color: var( --bdo-abysse, #0B2E3D );
}

.bdo-popup-bienvenue-contenu p {
	margin: 0;
	color: #555;
	line-height: 1.6;
}

@media ( max-width: 480px ) {
	.bdo-popup-bienvenue-carte {
		max-height: 95vh;
	}
}