/**
 * MagicFit Consent — habillage du bandeau.
 *
 * Toutes les règles sont isolées sous .mfc-root et marquées !important sur
 * les propriétés critiques : le thème et Elementor imposent sinon leurs
 * couleurs et leurs tailles aux boutons, ce qui casse l'équilibre visuel
 * exigé entre « Tout refuser » et « Tout accepter ».
 *
 * Une seule couleur à ajuster : --mfc-accent.
 */

.mfc-root {
	--mfc-ink: #101215;
	--mfc-muted: #5c626b;
	--mfc-line: #e3e6ea;
	--mfc-surface: #fff;
	--mfc-accent: #8cc63e;

	position: fixed !important;
	inset: 0 !important;
	z-index: 2147483000 !important;
	font-size: 15px;
	line-height: 1.55;
	-webkit-font-smoothing: antialiased;
}

.mfc-root[hidden],
.mfc-root [hidden] {
	display: none !important;
}

.mfc-scrim {
	position: absolute;
	inset: 0;
	background: rgba(10, 12, 16, 0.5);
	backdrop-filter: saturate(140%) blur(2px);
	animation: mfc-fade 0.2s ease both;
}

.mfc-panel {
	position: absolute !important;
	inset: auto 0 0 0;
	box-sizing: border-box;
	max-height: 86vh;
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: 26px 22px 22px;
	background: var(--mfc-surface);
	color: var(--mfc-ink);
	border-radius: 16px 16px 0 0;
	box-shadow: 0 -2px 60px rgba(10, 12, 16, 0.25);
	animation: mfc-rise 0.28s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@media (min-width: 760px) {
	.mfc-panel {
		inset: auto auto 26px 26px !important;
		width: 512px;
		padding: 28px;
		border-radius: 14px;
	}
}

@keyframes mfc-fade { from { opacity: 0; } }
@keyframes mfc-rise { from { opacity: 0; transform: translateY(14px); } }

.mfc-root .mfc-title {
	margin: 0 0 10px !important;
	padding: 0 !important;
	font-size: 1.24rem !important;
	font-weight: 700 !important;
	line-height: 1.25 !important;
	letter-spacing: -0.015em;
	color: var(--mfc-ink) !important;
	text-transform: none !important;
}

.mfc-root .mfc-body {
	margin: 0 0 20px !important;
	padding: 0 !important;
	max-width: 58ch;
	font-size: 0.95rem !important;
	color: var(--mfc-muted) !important;
}

/* ------------------------------------------------------------ choix */

.mfc-choices {
	margin: 0 0 20px;
	border-top: 1px solid var(--mfc-line);
}

.mfc-choice {
	padding: 15px 0;
	border-bottom: 1px solid var(--mfc-line);
}

.mfc-choice-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
}

.mfc-root .mfc-choice-name {
	margin: 0 !important;
	font-size: 0.97rem !important;
	font-weight: 600 !important;
	color: var(--mfc-ink) !important;
	cursor: pointer;
}

.mfc-choice--locked .mfc-choice-name { cursor: default; }

.mfc-choice-note {
	flex: 0 0 auto;
	font-size: 0.8rem;
	color: var(--mfc-muted);
}

.mfc-root .mfc-choice-desc {
	margin: 5px 0 0 !important;
	padding: 0 !important;
	font-size: 0.875rem !important;
	color: var(--mfc-muted) !important;
}

.mfc-root .mfc-switch {
	flex: 0 0 auto;
	width: 44px !important;
	height: 26px !important;
	min-height: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	appearance: none !important;
	-webkit-appearance: none !important;
	background: #ced3da !important;
	border: 0 !important;
	border-radius: 26px !important;
	cursor: pointer;
	position: relative;
	transition: background 0.18s ease;
}

.mfc-root .mfc-switch::after {
	content: "";
	position: absolute;
	top: 3px;
	left: 3px;
	width: 20px;
	height: 20px;
	background: #fff;
	border-radius: 50%;
	box-shadow: 0 1px 3px rgba(10, 12, 16, 0.3);
	transition: transform 0.18s cubic-bezier(0.22, 1, 0.36, 1);
}

.mfc-root .mfc-switch:checked { background: var(--mfc-accent) !important; }
.mfc-root .mfc-switch:checked::after { transform: translateX(18px); }

/* ---------------------------------------------------------- actions */

.mfc-actions {
	display: flex !important;
	flex-wrap: wrap;
	gap: 12px;
}

.mfc-actions--secondary {
	margin-top: 16px;
	align-items: center;
	gap: 20px;
}

/*
 * Les deux boutons de premier niveau sont strictement identiques.
 * Aucune variante visuelle : refuser doit être aussi simple qu'accepter.
 */
.mfc-root .mfc-btn {
	flex: 1 1 172px;
	box-sizing: border-box;
	min-height: 0 !important;
	margin: 0 !important;
	padding: 13px 18px !important;
	font-family: inherit !important;
	font-size: 0.95rem !important;
	font-weight: 600 !important;
	line-height: 1.2 !important;
	letter-spacing: 0 !important;
	text-align: center !important;
	text-transform: none !important;
	text-decoration: none !important;
	color: #fff !important;
	background: var(--mfc-ink) !important;
	background-image: none !important;
	border: 1px solid var(--mfc-ink) !important;
	border-radius: 9px !important;
	box-shadow: none !important;
	cursor: pointer;
	transition: background 0.15s ease, transform 0.08s ease;
}

.mfc-root .mfc-btn:hover { background: #262b33 !important; }
.mfc-root .mfc-btn:active { transform: translateY(1px); }

.mfc-root .mfc-btn--small {
	flex: 0 0 auto;
	padding: 10px 16px !important;
	font-size: 0.9rem !important;
}

.mfc-root .mfc-link {
	margin: 0 !important;
	padding: 0 !important;
	font-family: inherit !important;
	font-size: 0.875rem !important;
	font-weight: 500 !important;
	text-transform: none !important;
	color: var(--mfc-muted) !important;
	background: none !important;
	border: 0 !important;
	border-radius: 0 !important;
	text-decoration: underline !important;
	text-underline-offset: 3px;
	cursor: pointer;
}

.mfc-root .mfc-link:hover { color: var(--mfc-ink) !important; }

.mfc-root .mfc-btn:focus-visible,
.mfc-root .mfc-link:focus-visible,
.mfc-root .mfc-switch:focus-visible {
	outline: 2px solid var(--mfc-accent) !important;
	outline-offset: 3px !important;
}

.mfc-open-body { overflow: hidden !important; }

/* ---------------------------------------- vignette de remplacement */

.mfc-facade {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 210px;
	padding: 26px;
	box-sizing: border-box;
	background: #f5f6f8;
	border: 1px solid var(--mfc-line);
	border-radius: 10px;
}

/* Vignette posée dans un widget Vidéo Elementor : occupe la zone du lecteur. */
.mfc-facade--widget {
	width: 100%;
	height: 100%;
	border-radius: 0;
}

/*
 * Vignette avec miniature YouTube hébergée sur le site : image en fond,
 * texte et bouton lisibles par-dessus. Format 16/9 par défaut.
 */
.mfc-facade.mfc-facade--thumb {
	position: relative;
	overflow: hidden;
	aspect-ratio: 16 / 9;
	min-height: 0;
	background: #101215;
	border-color: #101215;
}

.mfc-facade--thumb .mfc-facade-thumb {
	position: absolute !important;
	inset: 0;
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	margin: 0 !important;
	object-fit: cover;
}

/*
 * Voile en dégradé sur toute l'image : presque transparent en haut, où YouTube
 * incruste souvent le titre de la vidéo, plus sombre en bas pour le texte et le
 * bouton. Remplace l'encart central de la 1.3.0, qui masquait ce titre.
 */
.mfc-facade.mfc-facade--thumb {
	align-items: flex-end;
	padding-bottom: 22px;
}

.mfc-facade--thumb::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(to top, rgba(10, 12, 16, 0.85) 0%, rgba(10, 12, 16, 0.5) 32%, rgba(10, 12, 16, 0.1) 62%, rgba(10, 12, 16, 0) 100%);
	pointer-events: none;
}

.mfc-facade--thumb .mfc-facade-inner {
	position: relative;
	z-index: 2;
	padding: 0 16px;
	background: none;
}

.mfc-facade--thumb .mfc-facade-text {
	margin-bottom: 12px !important;
	color: #fff !important;
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
}

/* Bouton des vignettes, hors du bandeau : mêmes garde-fous contre le thème. */
.mfc-facade .mfc-btn {
	display: inline-block;
	margin: 0 !important;
	padding: 10px 16px !important;
	font-family: inherit !important;
	font-size: 0.9rem !important;
	font-weight: 600 !important;
	line-height: 1.2 !important;
	text-transform: none !important;
	color: #101215 !important;
	background: #fff !important;
	border: 1px solid #fff !important;
	border-radius: 9px !important;
	cursor: pointer;
}

.mfc-facade:not(.mfc-facade--thumb) .mfc-btn {
	color: #fff !important;
	background: #101215 !important;
	border-color: #101215 !important;
}

.mfc-facade-inner {
	max-width: 44ch;
	text-align: center;
}

.mfc-facade-text {
	margin: 0 0 14px !important;
	font-size: 0.9rem !important;
	color: var(--mfc-muted) !important;
}

/* ------------------------------------------------- lien de retrait */

/*
 * Filet du bouton « Cookies » du pied de page Elementor (modèle 55448).
 * Sur les pages sans ce pied de page (réservation, Canvas), c'est le seul
 * moyen de retrait : il reprend exactement le format des liens légaux
 * .mf-ftr-legal a, ni plus petit ni plus discret. Les propriétés de
 * visibilité sont en !important pour que le thème ne puisse pas le masquer.
 */
.mfc-withdraw {
	display: block !important;
	visibility: visible !important;
	opacity: 1 !important;
	position: static !important;
	clear: both;
	box-sizing: border-box;
	margin: 0 !important;
	padding: 16px !important;
	text-align: center !important;
	background: transparent !important;
	border: 0 !important;
	line-height: 1.4 !important;
}

.mfc-withdraw .mfc-withdraw-link {
	display: inline-block !important;
	visibility: visible !important;
	opacity: 1 !important;
	margin: 0 !important;
	padding: 6px 14px !important;
	font-family: inherit !important;
	font-size: 0.8rem !important;
	font-weight: 400 !important;
	line-height: 1.4 !important;
	text-transform: none !important;
	text-decoration: none !important;
	color: #888 !important;
	background: #111 !important;
	border: 1px solid rgba(255, 255, 255, 0.04) !important;
	border-radius: 20px !important;
	cursor: pointer;
	transition: color 0.15s ease;
}

.mfc-withdraw .mfc-withdraw-link:hover { color: #b0c41f !important; }

.mfc-withdraw .mfc-withdraw-link:focus-visible {
	outline: 2px solid #b0c41f !important;
	outline-offset: 3px !important;
}

@media (prefers-reduced-motion: reduce) {
	.mfc-scrim,
	.mfc-panel { animation: none !important; }
	.mfc-root .mfc-switch,
	.mfc-root .mfc-switch::after,
	.mfc-root .mfc-btn { transition: none !important; }
}