/* Thème Wizodo 2027 « bulle » (La bulle romantique) : ce que la conversion ajoute aux styles du site d'origine,
   qui restent dans le gabarit tels que l'ancien moteur les écrivait. Écrit à la main (convertir_bulle.py n'y touche pas). */

/* 1. Le H1 de l'accueil : l'ancien site n'en avait pas ; le titre doré du premier bloc devient le H1 et garde
      l'apparence du h2 qu'il remplace (mêmes règles que « .main_accueil h2 » du gabarit, filet compris) */
main.main_accueil h1.bulle-h1 {
	padding: 20px 0 5px 0;
	font-size: 27px;
	font-weight: 300;
	color: #bea85c;
	text-align: left;
}

main.main_accueil h1.bulle-h1::after {
	position: absolute;
	margin: auto;
	margin-left: 15px;
	top: 34px;
	width: 100px;
	height: 1px;
	content: "";
	background-color: var(--solox-border-color, #e8e3da);
}

/* 2. La bannière de l'accueil : une vraie image (remplaçable sur place), recadrée comme l'ancien fond « cover » */
.bulle-banniere {
	height: 320px;
	overflow: hidden;
}

.bulle-banniere img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

/* 3. Les vignettes des galeries (4:3, comme les vignettes recadrées de l'ancien moteur) et les photos rondes des cartes */
.bulle-vignette {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	margin-bottom: 10px;
}

.bulle-rond {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: 50%;
}

.galerie-legende {
	margin: -4px 0 10px;
	color: #838184;
}

/* 4. La vidéo de l'accueil : affiche et bouton, le lecteur YouTube ne se charge qu'au clic (assets/video.js du moteur) ;
      même hauteur que l'ancien lecteur (370 px), en 16:9 sur téléphone */
.bulle-video .w-video {
	position: relative;
	height: 370px;
	overflow: hidden;
	background: #000;
}

.w-video-affiche {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: .8;
	transition: opacity .3s;
}

.w-video:hover .w-video-affiche {
	opacity: .65;
}

.w-video-lecture {
	position: absolute;
	inset: 0;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 14px;
	width: 100%;
	padding: 20px;
	border: 0;
	background: none;
	color: #fff;
	font: 600 11px/1.3 "Plus Jakarta Sans", Arial, sans-serif;
	letter-spacing: .2em;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
}

.w-video-lecture:hover {
	color: #fff;
	text-decoration: none;
}

.w-video-ico {
	width: 76px;
	height: 76px;
	padding: 22px 20px 22px 24px;
	border-radius: 50%;
	fill: #fff;
	background: #bea85c;
	box-shadow: 0 0 0 10px rgba(190, 168, 92, .3);
	transition: transform .3s, background-color .3s;
}

.w-video-lecture:hover .w-video-ico,
.w-video-lecture:focus-visible .w-video-ico {
	transform: scale(1.08);
	background: #000;
}

.w-video iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

.w-video-note {
	margin: 8px 0 0;
	font-size: 12px;
	color: #838184;
}

@media (max-width: 767px) {
	.bulle-video .w-video {
		height: auto;
		aspect-ratio: 16 / 9;
	}
}

/* 5. Le plan de la suite : rien n'est demandé à Google avant le clic sur « Afficher le plan » (assets/bulle.js) */
.bulle-plan {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 14px;
	height: 300px;
	padding: 20px;
	text-align: center;
	background-color: #f9f6f1;
	border: 1px solid #e8e3da;
}

.bulle-plan-adresse {
	margin: 0;
	font-size: 18px;
	color: #000;
}

.bulle-plan-adresse i {
	margin-right: 6px;
	color: #c2a74e;
}

.bulle-plan-note {
	margin: 0;
	font-size: 12px;
	color: #838184;
}

.bulle-plan-note a {
	color: #838184;
	text-decoration: underline;
}

.bulle-plan.charge {
	padding: 0;
}

.bulle-plan iframe {
	width: 100%;
	height: 100%;
	border: 0;
}

@media (prefers-reduced-motion: reduce) {
	.w-video-affiche,
	.w-video-ico {
		transition: none;
	}
}

/* 6. Les filets décoratifs posés après les titres (h1 / h2 / h3::after du style d'origine) dépassent à droite quand un
      titre occupe toute la largeur : sur téléphone, la page glissait de côté (déjà le cas sur l'ancien site). On les coupe
      au bord de la page, sans rien changer d'autre. */
main {
	overflow-x: clip;
}

@supports not (overflow: clip) {
	main {
		overflow-x: hidden;
	}
}

/* 7. Le bandeau cookies (ajouté : l'ancien site chargeait Google Analytics sans demander) : en bas à gauche, aux couleurs
      du site ; « Refuser » aussi visible qu'« Accepter ». « Gérer les cookies » du pied de page le rouvre (bulle.js). */
.bulle-cookies {
	position: fixed;
	left: 18px;
	bottom: 18px;
	z-index: 1450;
	width: min(440px, calc(100vw - 36px));
	padding: 20px 22px;
	font-size: 14px;
	line-height: 1.55;
	color: #555;
	background-color: #f9f6f1;
	border: 1px solid #e8e3da;
	box-shadow: 0 18px 50px rgba(0, 0, 0, .18);
}

.bulle-cookies-titre {
	margin: 0 0 8px;
	font: 500 18px/1.25 "Kumbh Sans", Arial, sans-serif;
	text-transform: uppercase;
	color: #bea85c;
}

.bulle-cookies p {
	margin: 0 0 14px;
}

.bulle-cookies a {
	color: #838184;
	text-decoration: underline;
}

.bulle-cookies-actions {
	display: flex;
	gap: 10px;
}

.bulle-cookies-actions .btn {
	flex: 1;
}

html .bulle-cookies .btn.btn-primary.bulle-refuser {
	background-color: #000;
}

html .bulle-cookies .btn.btn-primary.bulle-refuser:hover {
	background-color: #bea85c;
}

.bulle-lien-cookies {
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	cursor: pointer;
}

.bulle-lien-cookies:hover,
.bulle-lien-cookies:focus-visible {
	text-decoration: underline;
}