/* Unicomm Modals — frontend v1.0.1
   Teintes dérivées de --ucm-bg / --ucm-text / --ucm-accent via color-mix,
   avec fallbacks pour navigateurs anciens. */

.ucm {
	position: fixed;
	inset: 0;
	z-index: 99990;
	display: none;
	pointer-events: none;
	/* Teintes dérivées (fallbacks d'abord) */
	--ucm-muted: var(--ucm-text);
	--ucm-line: rgba(0, 0, 0, .08);
	--ucm-soft: rgba(0, 0, 0, .05);
}
@supports (color: color-mix(in srgb, red 50%, blue)) {
	.ucm {
		--ucm-muted: color-mix(in srgb, var(--ucm-text) 72%, var(--ucm-bg));
		--ucm-line: color-mix(in srgb, var(--ucm-text) 10%, transparent);
		--ucm-soft: color-mix(in srgb, var(--ucm-text) 6%, transparent);
	}
}
.ucm.is-open { display: block; }

.ucm__overlay {
	position: absolute;
	inset: 0;
	background: var(--ucm-overlay);
	pointer-events: auto;
	opacity: 0;
	transition: opacity .35s ease;
}
.ucm.is-visible .ucm__overlay { opacity: 1; }

/* ---------- Boîte de dialogue ---------- */
.ucm__dialog {
	position: absolute;
	pointer-events: auto;
	width: min(var(--ucm-width), calc(100vw - 32px));
	max-height: calc(100vh - 40px);
	max-height: calc(100dvh - 40px);
	overflow: auto;
	overscroll-behavior: contain;
	background: var(--ucm-bg);
	color: var(--ucm-text);
	border-radius: var(--ucm-radius);
	border: 1px solid var(--ucm-line);
	box-shadow:
		0 1px 1px rgba(0, 0, 0, .04),
		0 8px 20px rgba(0, 0, 0, .10),
		0 32px 80px rgba(0, 0, 0, .22);
	font-family: inherit;
	-webkit-font-smoothing: antialiased;
	opacity: 0;
	transition: opacity .45s cubic-bezier(.16, 1, .3, 1), transform .45s cubic-bezier(.16, 1, .3, 1);
	scrollbar-width: thin;
	scrollbar-color: var(--ucm-line) transparent;
}
.ucm.is-visible .ucm__dialog { opacity: 1; }

/* ---------- Positions ---------- */
.ucm--center .ucm__dialog        { top: 50%; left: 50%; transform: translate(-50%, -50%); }
.ucm--top-left .ucm__dialog      { top: 28px; left: 28px; }
.ucm--top-center .ucm__dialog    { top: 28px; left: 50%; transform: translateX(-50%); }
.ucm--top-right .ucm__dialog     { top: 28px; right: 28px; }
.ucm--center-left .ucm__dialog   { top: 50%; left: 28px; transform: translateY(-50%); }
.ucm--center-right .ucm__dialog  { top: 50%; right: 28px; transform: translateY(-50%); }
.ucm--bottom-left .ucm__dialog   { bottom: 28px; left: 28px; }
.ucm--bottom-center .ucm__dialog { bottom: 28px; left: 50%; transform: translateX(-50%); }
.ucm--bottom-right .ucm__dialog  { bottom: 28px; right: 28px; }

/* ---------- Bandeaux (haut / bas) ----------
   Anatomie « announcement bar » : une ligne centrée, message en gras +
   texte + bouton compact, croix à droite. Rien d'autre. */
/* Bandeau haut : DANS LE FLUX de la page (premier enfant de body).
   Il pousse le header vers le bas au lieu de le recouvrir, et défile
   avec la page — comportement announcement bar standard. */
.ucm--top-bar {
	position: relative;
	inset: auto;
	width: 100%;
	overflow: hidden; /* contient le slide d'entrée */
	pointer-events: auto;
}
.ucm--bottom-bar { inset: auto 0 0 0; }

.ucm--top-bar .ucm__dialog,
.ucm--bottom-bar .ucm__dialog {
	position: relative;
	width: 100% !important;
	max-width: none !important;
	border-radius: 0;
	border: 0;
	overflow: visible;
	max-height: none;
	box-sizing: border-box;
}
.ucm--top-bar .ucm__dialog { border-bottom: 2px solid var(--ucm-accent); box-shadow: 0 8px 24px rgba(0, 0, 0, .10); }
.ucm--bottom-bar .ucm__dialog { border-top: 2px solid var(--ucm-accent); box-shadow: 0 -8px 24px rgba(0, 0, 0, .10); }

.ucm--top-bar .ucm__body,
.ucm--bottom-bar .ucm__body {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 4px 16px;
	min-height: 52px;
	max-width: 1160px;
	margin: 0 auto;
	padding: 10px 64px;
	text-align: center;
	box-sizing: border-box;
}
.ucm--bottom-bar .ucm__body { padding-bottom: max(10px, env(safe-area-inset-bottom)); }

/* Éléments sans place dans un bandeau */
.ucm--top-bar .ucm__eyebrow,   .ucm--bottom-bar .ucm__eyebrow,
.ucm--top-bar .ucm__never,     .ucm--bottom-bar .ucm__never,
.ucm--top-bar .ucm__media,     .ucm--bottom-bar .ucm__media,
.ucm--top-bar .ucm__bg-media,  .ucm--bottom-bar .ucm__bg-media { display: none; }

.ucm--top-bar .ucm__title,
.ucm--bottom-bar .ucm__title {
	margin: 0;
	font-size: .94rem;
	font-weight: 700;
	letter-spacing: 0;
	line-height: 1.4;
}
.ucm--top-bar .ucm__content,
.ucm--bottom-bar .ucm__content {
	margin: 0;
	font-size: .94rem;
	line-height: 1.4;
	color: var(--ucm-text);
}
.ucm--top-bar .ucm__content p,
.ucm--bottom-bar .ucm__content p { display: inline; margin: 0; }
.ucm--top-bar .ucm__content br,
.ucm--bottom-bar .ucm__content br { display: none; }

.ucm--top-bar .ucm__actions,
.ucm--bottom-bar .ucm__actions { margin: 0; flex-wrap: nowrap; gap: 8px; }
.ucm--top-bar .ucm__actions .ucm__btn,
.ucm--bottom-bar .ucm__actions .ucm__btn {
	padding: 7px 16px !important;
	font-size: .85rem !important;
	white-space: nowrap;
}

@media (max-width: 640px) {
	.ucm--top-bar .ucm__body,
	.ucm--bottom-bar .ucm__body { padding: 10px 48px 12px 16px; gap: 4px 12px; }
	.ucm--top-bar .ucm__title, .ucm--top-bar .ucm__content,
	.ucm--bottom-bar .ucm__title, .ucm--bottom-bar .ucm__content { font-size: .88rem; }
}

/* ---------- Animations (état initial) ---------- */
.ucm--anim-zoom:not(.is-visible) .ucm__dialog { transform: scale(.94); }
.ucm--anim-zoom.ucm--center:not(.is-visible) .ucm__dialog { transform: translate(-50%, -50%) scale(.94); }
.ucm--anim-slide-up:not(.is-visible) .ucm__dialog { transform: translateY(28px); }
.ucm--anim-slide-up.ucm--center:not(.is-visible) .ucm__dialog { transform: translate(-50%, calc(-50% + 28px)); }
.ucm--anim-slide-up.ucm--bottom-bar:not(.is-visible) .ucm__dialog { transform: translateY(100%); }
.ucm--anim-slide-up.ucm--top-bar:not(.is-visible) .ucm__dialog { transform: translateY(-100%); }
.ucm--anim-none .ucm__dialog, .ucm--anim-none .ucm__overlay { transition: none; }

@media (prefers-reduced-motion: reduce) {
	.ucm__dialog, .ucm__overlay { transition: opacity .2s ease !important; transform: none; }
	.ucm--center .ucm__dialog { transform: translate(-50%, -50%) !important; }
}

/* ---------- Corps & typographie ---------- */
.ucm__body { padding: 40px 44px; }
.ucm__eyebrow {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 14px;
	font-size: .74rem;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--ucm-accent);
}
.ucm__eyebrow-dash {
	flex: 0 0 22px;
	height: 2px;
	border-radius: 1px;
	background: var(--ucm-accent);
}
.ucm__title {
	margin: 0 0 14px;
	font-size: clamp(1.5rem, 1.2rem + 1.2vw, 1.85rem);
	font-weight: 700;
	line-height: 1.18;
	letter-spacing: -.02em;
	color: inherit;
	text-wrap: balance;
}
.ucm__content {
	font-size: .98rem;
	line-height: 1.65;
	color: var(--ucm-muted);
}
.ucm__content > :first-child { margin-top: 0; }
.ucm__content > :last-child { margin-bottom: 0; }
.ucm__content a { color: var(--ucm-accent); text-underline-offset: 2px; }

.ucm__never {
	display: flex;
	align-items: center;
	gap: 9px;
	margin-top: 18px;
	font-size: .85rem;
	color: var(--ucm-muted);
	cursor: pointer;
	user-select: none;
}
.ucm__never input {
	width: 16px;
	height: 16px;
	margin: 0;
	accent-color: var(--ucm-accent);
	cursor: pointer;
}
.ucm--layout-img-bg .ucm__never { color: rgba(255, 255, 255, .8); }

/* ---------- Images ----------
   Blindage contre les styles globaux des thèmes / plugins lazy-load
   (img{height:auto}, margins, max-width) : remplissage forcé. */
.ucm__media, .ucm__bg-media { margin: 0; padding: 0; line-height: 0; font-size: 0; }
.ucm img.ucm__img {
	display: block !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	max-width: none !important;
	max-height: none !important;
}
.ucm--layout-img-top .ucm__media img.ucm__img {
	width: 100% !important;
	height: auto !important;
	max-height: 280px !important;
	object-fit: cover;
}

.ucm--layout-img-left .ucm__dialog,
.ucm--layout-img-right .ucm__dialog { display: flex; align-items: stretch; }
.ucm--layout-img-right .ucm__dialog { flex-direction: row-reverse; }
.ucm--layout-img-left .ucm__media,
.ucm--layout-img-right .ucm__media { position: relative; flex: 0 0 50%; min-height: 320px; overflow: hidden; }
.ucm--layout-img-left .ucm__media img.ucm__img,
.ucm--layout-img-right .ucm__media img.ucm__img {
	position: absolute !important;
	inset: 0 !important;
	width: 100% !important;
	height: 100% !important;
	object-fit: cover;
}

/* Les layouts côte à côte ont besoin d'ampleur : plancher 880px sur desktop */
@media (min-width: 960px) {
	.ucm--layout-img-left .ucm__dialog,
	.ucm--layout-img-right .ucm__dialog { width: min(max(var(--ucm-width), 880px), calc(100vw - 48px)); }
}

.ucm--layout-img-bg .ucm__dialog { overflow: hidden; }
.ucm--layout-img-bg .ucm__bg-media { position: absolute; inset: 0; overflow: hidden; }
.ucm--layout-img-bg .ucm__bg-media img.ucm__img {
	position: absolute !important;
	inset: 0 !important;
	width: 100% !important;
	height: 100% !important;
	object-fit: cover;
}
.ucm--layout-img-bg .ucm__bg-media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(200deg, rgba(8, 10, 14, .05) 0%, rgba(8, 10, 14, .38) 46%, rgba(8, 10, 14, .78) 100%);
}
.ucm--layout-img-bg .ucm__body { position: relative; padding-top: 96px; color: #fff; }
.ucm--layout-img-bg .ucm__title,
.ucm--layout-img-bg .ucm__content { color: #fff; text-shadow: 0 1px 12px rgba(0, 0, 0, .35); }
.ucm--layout-img-bg .ucm__content { opacity: .92; }
.ucm--layout-img-bg .ucm__content a { color: #fff; text-decoration: underline; }

/* ---------- Boutons ---------- */
.ucm__actions { display: flex; flex-wrap: wrap; align-items: stretch; gap: 12px; margin-top: 26px; }

.ucm__arrow { display: inline-block; margin-left: 9px; transition: transform .2s cubic-bezier(.16, 1, .3, 1); }
.ucm__btn:hover .ucm__arrow { transform: translateX(4px); }

.ucm--custom .ucm__btn:not(.ucm__btn--ghost) {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 13px 26px;
	background: var(--ucm-accent);
	color: #fff;
	border: 0;
	border-radius: clamp(6px, calc(var(--ucm-radius) * .45), 10px);
	text-decoration: none;
	font-weight: 600;
	font-size: .95rem;
	letter-spacing: .01em;
	box-shadow: 0 1px 2px rgba(0, 0, 0, .14), 0 8px 22px -8px var(--ucm-accent);
	transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.ucm--custom .ucm__btn:not(.ucm__btn--ghost):hover {
	transform: translateY(-1px);
	filter: brightness(1.07);
	box-shadow: 0 2px 4px rgba(0, 0, 0, .14), 0 12px 28px -8px var(--ucm-accent);
}
.ucm--custom .ucm__btn:not(.ucm__btn--ghost):active { transform: translateY(0); filter: brightness(.97); }

.ucm--auto .ucm__btn:not(.ucm__btn--ghost) { display: inline-flex; align-items: center; text-decoration: none; cursor: pointer; }

.ucm__btn--ghost {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 13px 22px;
	background: transparent;
	color: var(--ucm-text);
	border: 1px solid var(--ucm-line);
	border-radius: clamp(6px, calc(var(--ucm-radius) * .45), 10px);
	text-decoration: none;
	font-size: .93rem;
	font-weight: 600;
	cursor: pointer;
	transition: color .15s ease, border-color .15s ease, background .15s ease;
}
.ucm__btn--ghost:hover { border-color: var(--ucm-muted); background: var(--ucm-soft); }
.ucm--layout-img-bg .ucm__btn--ghost { color: #fff; border-color: rgba(255, 255, 255, .45); }
.ucm--layout-img-bg .ucm__btn--ghost:hover { border-color: #fff; background: rgba(255, 255, 255, .12); }

/* ---------- Fermeture ---------- */
.ucm__close {
	position: absolute;
	z-index: 2;
	width: 32px;
	height: 32px;
	display: grid;
	place-items: center;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--ucm-soft);
	color: var(--ucm-muted);
	font-size: 13px;
	line-height: 1;
	cursor: pointer;
	transition: background .15s ease, color .15s ease, transform .25s cubic-bezier(.16, 1, .3, 1);
}
.ucm__close:hover { background: var(--ucm-line); color: var(--ucm-text); transform: rotate(90deg); }
.ucm__close--inside { top: 14px; right: 14px; }
.ucm__close--outside {
	top: -44px;
	right: 0;
	background: rgba(255, 255, 255, .92);
	color: #111;
	box-shadow: 0 2px 10px rgba(0, 0, 0, .2);
}
.ucm__close--outside:hover { background: #fff; color: #000; }
.ucm--layout-img-bg .ucm__close--inside,
.ucm--layout-img-left .ucm__close--inside,
.ucm--layout-img-right .ucm__close--inside,
.ucm--layout-img-top .ucm__close--inside {
	background: rgba(12, 14, 18, .38);
	color: #fff;
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
}
.ucm--layout-img-bg .ucm__close--inside:hover,
.ucm--layout-img-left .ucm__close--inside:hover,
.ucm--layout-img-right .ucm__close--inside:hover,
.ucm--layout-img-top .ucm__close--inside:hover { background: rgba(12, 14, 18, .58); color: #fff; }
.ucm--layout-img-right .ucm__close--inside { background: var(--ucm-soft); color: var(--ucm-muted); backdrop-filter: none; -webkit-backdrop-filter: none; }
.ucm--top-bar .ucm__close--inside,
.ucm--top-bar .ucm__close--outside,
.ucm--bottom-bar .ucm__close--inside,
.ucm--bottom-bar .ucm__close--outside { top: 50%; right: 16px; transform: translateY(-50%); box-shadow: none; width: 28px; height: 28px; font-size: 12px; }
.ucm--top-bar .ucm__close:hover,
.ucm--bottom-bar .ucm__close:hover { transform: translateY(-50%) rotate(90deg); }

.ucm :focus-visible { outline: 2px solid var(--ucm-accent); outline-offset: 2px; border-radius: 4px; }
.ucm__btn:focus-visible { outline-offset: 3px; }

/* ---------- Mobile ---------- */
@media (max-width: 600px) {
	.ucm--layout-img-left .ucm__dialog,
	.ucm--layout-img-right .ucm__dialog { flex-direction: column; }
	.ucm--layout-img-left .ucm__media,
	.ucm--layout-img-right .ucm__media { flex-basis: auto; height: 190px; min-height: 190px; overflow: hidden; }
	.ucm--layout-img-right .ucm__close--inside { background: rgba(12, 14, 18, .38); color: #fff; }
	.ucm__body { padding: 28px 24px; }
	.ucm--layout-img-bg .ucm__body { padding-top: 84px; }
	.ucm__actions { margin-top: 20px; }
	.ucm__actions .ucm__btn { flex: 1 1 auto; justify-content: center; text-align: center; }
	/* Les positions latérales retombent en bas-centre */
	.ucm--top-left .ucm__dialog, .ucm--top-right .ucm__dialog,
	.ucm--center-left .ucm__dialog, .ucm--center-right .ucm__dialog,
	.ucm--bottom-left .ucm__dialog, .ucm--bottom-right .ucm__dialog {
		top: auto; bottom: 16px; left: 50%; right: auto; transform: translateX(-50%);
	}
	.ucm--anim-slide-up.ucm--top-left:not(.is-visible) .ucm__dialog,
	.ucm--anim-slide-up.ucm--top-right:not(.is-visible) .ucm__dialog,
	.ucm--anim-slide-up.ucm--center-left:not(.is-visible) .ucm__dialog,
	.ucm--anim-slide-up.ucm--center-right:not(.is-visible) .ucm__dialog,
	.ucm--anim-slide-up.ucm--bottom-left:not(.is-visible) .ucm__dialog,
	.ucm--anim-slide-up.ucm--bottom-right:not(.is-visible) .ucm__dialog { transform: translateX(-50%) translateY(28px); }
}