/* ==========================================================================
   OZE — panneau de consentement aux traceurs.
   Charte du site : crème, vert sauge, brun, lien terracotta.
   Verts assombris par rapport à la charte pour atteindre le niveau WCAG AA
   (blanc sur #4A7867 : 5.0:1 · texte vert sur crème : 4.7:1).
   ========================================================================== */
.oze-ck {
	--ck-panel: #FAF8F3;
	--ck-heading: #2E2A26;
	--ck-text: #3D3834;
	--ck-muted: #6E6660;
	--ck-border: #E4DDD2;
	--ck-green: #4A7867;
	--ck-green-hover: #3D6555;
	--ck-green-soft: #EDF3F0;
	--ck-terra: #A85340;
	--ck-font-title: var(--e-global-typography-primary-font-family, 'Fraunces', Georgia, serif);
	--ck-font-text: var(--e-global-typography-text-font-family, 'Work Sans', Helvetica, Arial, sans-serif);

	position: fixed;
	inset: auto 0 0 0;
	z-index: 99999;
	padding: 18px;
	display: flex;
	justify-content: flex-end;   /* ancré en bas à droite */
	align-items: flex-end;
	pointer-events: none;
	font-family: var(--ck-font-text);
	color: var(--ck-text);
}
.oze-ck[hidden] { display: none; }

.oze-ck__panel {
	pointer-events: auto;
	max-height: calc(100vh - 36px);
	overflow-y: auto;
	background: var(--ck-panel);
	border: 1px solid var(--ck-border);
	border-radius: 16px;
	box-shadow: 0 8px 24px rgba(61, 56, 52, .14);
}

.oze-ck__title {
	font-family: var(--ck-font-title);
	color: var(--ck-heading);
}
.oze-ck__text {
	color: var(--ck-text);
}

/* ---------------------------------------------- Détail des finalités */
.oze-ck__detail {
	border-top: 1px solid var(--ck-border);
	padding-top: 12px;
	margin-bottom: 14px;
}
.oze-ck__cat + .oze-ck__cat { margin-top: 13px; }
.oze-ck__cat-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.oze-ck__cat-name { font-weight: 600; font-size: 14px; color: var(--ck-heading); }
.oze-ck__cat-desc { margin: 3px 0 0; font-size: 13px; line-height: 1.5; color: var(--ck-muted); }
.oze-ck__always {
	font-size: 12px;
	font-weight: 600;
	color: var(--ck-green);
	background: var(--ck-green-soft);
	border-radius: 40px;
	padding: 3px 12px;
}
.oze-ck__switch { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; min-height: 44px; }
.oze-ck__switch input { width: 20px; height: 20px; accent-color: var(--ck-green); }

/* ------------------------------------------------------------ Actions
   « Tout accepter » occupe la pleine largeur ; « Tout refuser » reste
   accessible en un seul clic, au même niveau, avec la même typographie. */
.oze-ck__actions { display: flex; flex-direction: column; gap: 8px; }
.oze-ck__row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

.oze-ck__btn {
	width: 100%;
	border-radius: 8px;
	border: 1.5px solid var(--ck-green);
	background: transparent;
	color: var(--ck-green);
	font: inherit;
	font-weight: 500;
	cursor: pointer;
	transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease;
}
.oze-ck__row .oze-ck__btn { min-width: 0; }

.oze-ck__btn--accept {
	background: var(--ck-green);
	border-color: var(--ck-green);
	color: #FFFFFF;
	font-weight: 600;
}
.oze-ck__btn--accept:hover, .oze-ck__btn--accept:focus-visible {
	background: var(--ck-green-hover);
	border-color: var(--ck-green-hover);
	color: #FFFFFF;
}
.oze-ck__btn--reject:hover, .oze-ck__btn--reject:focus-visible,
.oze-ck__btn--custom:hover, .oze-ck__btn--custom:focus-visible {
	background: var(--ck-green-soft);
}
.oze-ck__btn--save {
	background: var(--ck-green);
	border-color: var(--ck-green);
	color: #FFFFFF;
	font-weight: 600;
}
.oze-ck__btn--save:hover { background: var(--ck-green-hover); border-color: var(--ck-green-hover); }

.oze-ck :focus-visible { outline: 3px solid var(--ck-terra); outline-offset: 2px; }

/* -------------------------------------------------------------- Pied */
.oze-ck__foot { margin: 12px 0 0; text-align: center; }
.oze-ck__foot a {
	display: inline-block;
	padding: 5px 4px;
	font-size: 13px;
	color: var(--ck-terra);
	text-decoration: underline;
	text-underline-offset: 3px;
}
.oze-ck__foot a:hover { color: #8E4536; }

/* -------------------------------------------------------- Responsive */
/* ==========================================================================
   Spécificité renforcée.
   Le kit Elementor déclare « :root h2 { font-size: 46px } » (0,1,1) et se
   charge après cette feuille : les règles ci-dessous doublent la classe et
   marquent les propriétés typographiques en !important pour rester maîtres
   de l'affichage du panneau, sans toucher au reste du site.
   ========================================================================== */
.oze-ck .oze-ck__panel {
	width: min(420px, calc(100vw - 24px));
	max-width: 420px;
	padding: 20px;
}

.oze-ck .oze-ck__title {
	margin: 0 0 8px;
	font-size: 20px !important;
	line-height: 1.2 !important;
	font-weight: 600 !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
}

.oze-ck .oze-ck__text {
	margin: 0 0 16px;
	font-size: 14px !important;
	line-height: 1.45 !important;
	font-weight: 400 !important;
	text-transform: none !important;
}

.oze-ck .oze-ck__btn {
	min-height: 42px;
	padding: 9px 12px;
	font-size: 13px !important;
	line-height: 1.2 !important;
	white-space: nowrap;
	text-transform: none !important;
	letter-spacing: 0 !important;
}

@media (max-width: 480px) {
	.oze-ck { padding: 10px; justify-content: center; }
	.oze-ck .oze-ck__panel {
		width: calc(100vw - 20px);
		padding: 16px;
	}

	.oze-ck .oze-ck__row {
		grid-template-columns: 1fr 1fr;
	}
}

@media (prefers-reduced-motion: reduce) {
	.oze-ck * { transition: none !important; }
}