/* -------------------------------------------------------------------------- */
/* Bandeau cookies — habillage Ocube (17/09/2026)                               */
/* -------------------------------------------------------------------------- */
/* Même mécanique que sur archicool, mais la carte y est une pilule blanche avec
   des yeux : c'est leur identité, pas celle d'Ocube. Ici : angles droits, beige
   de la charte, typographie du site. */

.oc-ck {
	position: fixed;
	left: var(--wp--preset--spacing--30, 20px);
	bottom: var(--wp--preset--spacing--30, 20px);
	width: min(420px, calc(100vw - 2 * var(--wp--preset--spacing--30, 20px)));
	max-height: calc(100svh - 2 * var(--wp--preset--spacing--30, 20px));
	overflow-y: auto;
	box-sizing: border-box;
	/* Sous l'en-tête (9999999) et sous le rideau de transition (10000001) : le
	   bandeau ne doit jamais passer par-dessus le menu ouvert ni par-dessus la
	   lightbox (10000000). */
	z-index: 9999990;
	background: #fff;
	color: var(--wp--preset--color--contrast, #5f5f5f);
	border: 1px solid var(--wp--preset--color--accent-1, #f2eae2);
	box-shadow: 0 18px 44px rgba(0, 0, 0, 0.13);
	padding: 26px 26px 22px;
	opacity: 0;
	transform: translateY(18px);
	transition: opacity 0.45s ease, transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}
.oc-ck.is-open {
	opacity: 1;
	transform: none;
}
.oc-ck[hidden] { display: none; }

.oc-ck__title {
	margin: 0 0 10px;
	font-size: 20px;
	font-weight: 700;
	line-height: 1.15;
	color: var(--wp--preset--color--contrast, #5f5f5f);
}
.oc-ck__text {
	margin: 0 0 18px;
	font-size: 14px;
	line-height: 1.5;
}
.oc-ck__text a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 0.18em;
}

/* --- Réglages détaillés ---------------------------------------------------- */
.oc-ck__prefs {
	list-style: none;
	margin: 0 0 18px;
	padding: 0;
	border-top: 1px solid var(--wp--preset--color--accent-1, #f2eae2);
}
.oc-ck__prefs li {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 13px 0;
	border-bottom: 1px solid var(--wp--preset--color--accent-1, #f2eae2);
}
.oc-ck__prefs label {
	flex: 1 1 auto;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.25;
	cursor: pointer;
}
.oc-ck__prefs label small {
	display: block;
	margin-top: 3px;
	font-size: 12px;
	font-weight: 300;
	line-height: 1.35;
	opacity: 0.75;
}
/* La case native reste dans la page (accessible au clavier et aux lecteurs
   d'écran) mais invisible : c'est l'interrupteur qui la représente. */
.oc-ck__prefs input {
	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;
}
.oc-ck__toggle {
	flex: 0 0 auto;
	width: 42px;
	height: 24px;
	background: var(--wp--preset--color--accent-1, #f2eae2);
	position: relative;
	transition: background-color 0.25s ease;
}
.oc-ck__toggle::after {
	content: "";
	position: absolute;
	top: 3px;
	left: 3px;
	width: 18px;
	height: 18px;
	background: #fff;
	transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}
.oc-ck__prefs input:checked + .oc-ck__toggle {
	background: var(--wp--preset--color--contrast, #5f5f5f);
}
.oc-ck__prefs input:checked + .oc-ck__toggle::after {
	transform: translateX(18px);
}
.oc-ck__prefs input:disabled + .oc-ck__toggle {
	background: var(--wp--preset--color--contrast, #5f5f5f);
	opacity: 0.35;
}
/* Le focus clavier doit rester visible alors que la case est masquée. */
.oc-ck__prefs input:focus-visible + .oc-ck__toggle {
	outline: 2px solid var(--wp--preset--color--contrast, #5f5f5f);
	outline-offset: 3px;
}

/* --- Boutons --------------------------------------------------------------- */
.oc-ck__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
}
.oc-ck__btn {
	flex: 1 1 auto;
	min-width: 140px;
	padding: 12px 18px;
	font-family: inherit;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.2;
	color: var(--wp--preset--color--contrast, #5f5f5f);
	background: var(--wp--preset--color--accent-1, #f2eae2);
	border: 1px solid var(--wp--preset--color--accent-1, #f2eae2);
	cursor: pointer;
	transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}
.oc-ck__btn--oui {
	color: #fff;
	background: var(--wp--preset--color--contrast, #5f5f5f);
	border-color: var(--wp--preset--color--contrast, #5f5f5f);
}
@media (hover: hover) {
	.oc-ck__btn:hover {
		background: var(--wp--preset--color--contrast, #5f5f5f);
		border-color: var(--wp--preset--color--contrast, #5f5f5f);
		color: #fff;
	}
	.oc-ck__btn--oui:hover {
		background: #fff;
		color: var(--wp--preset--color--contrast, #5f5f5f);
	}
}
.oc-ck__lien {
	flex: 0 0 auto;
	padding: 6px 2px;
	font-family: inherit;
	font-size: 13px;
	font-weight: 500;
	color: inherit;
	background: none;
	border: 0;
	cursor: pointer;
	text-decoration: underline;
	text-underline-offset: 0.18em;
}
.oc-ck__btn:focus-visible,
.oc-ck__lien:focus-visible {
	outline: 2px solid var(--wp--preset--color--contrast, #5f5f5f);
	outline-offset: 3px;
}

/* --- Petits écrans --------------------------------------------------------- */
@media (max-width: 600px) {
	.oc-ck {
		left: 12px;
		right: 12px;
		bottom: 12px;
		width: auto;
		padding: 20px 18px 18px;
	}
	.oc-ck__btn { min-width: 0; width: 100%; }
	.oc-ck__lien { width: 100%; text-align: center; }
}

/* --- Mouvement réduit ------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
	.oc-ck,
	.oc-ck__toggle,
	.oc-ck__toggle::after,
	.oc-ck__btn {
		transition: none;
	}
	.oc-ck { transform: none; }
}

/* --- Voile des contenus externes (carte, vidéos) --------------------------- */
/* Posé par le filtre `render_block` de functions.php, juste après une iframe
   dont l'adresse a été neutralisée. Il disparaît dès que l'iframe a reçu son
   adresse, c'est-à-dire dès que la catégorie « media » est accordée. */
.oc-embed-voile {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 14px;
	width: 100%;
	min-height: 260px;
	padding: 28px 22px;
	box-sizing: border-box;
	font-family: inherit;
	text-align: center;
	color: var(--wp--preset--color--contrast, #5f5f5f);
	background: var(--wp--preset--color--accent-1, #f2eae2);
	border: 0;
	cursor: pointer;
}
.oc-embed-voile__txt {
	font-size: 14px;
	line-height: 1.5;
	max-width: 34ch;
}
.oc-embed-voile__cta {
	padding: 11px 20px;
	font-size: 14px;
	font-weight: 700;
	color: #fff;
	background: var(--wp--preset--color--contrast, #5f5f5f);
	transition: background-color 0.3s ease, color 0.3s ease;
}
@media (hover: hover) {
	.oc-embed-voile:hover .oc-embed-voile__cta {
		background: #fff;
		color: var(--wp--preset--color--contrast, #5f5f5f);
	}
}
.oc-embed-voile:focus-visible {
	outline: 2px solid var(--wp--preset--color--contrast, #5f5f5f);
	outline-offset: -4px;
}
/* Autorisé : l'iframe a reçu son adresse, le voile n'a plus lieu d'être. */
iframe:not([data-ocube-src]) + .oc-embed-voile {
	display: none;
}
/* Et tant qu'elle est neutralisée, l'iframe vide ne doit pas occuper de place. */
iframe[data-ocube-src] {
	display: none;
}