/*
 * Habillage SU Conseil de la bannière de consentement (Orejime).
 * Chargé après orejime-standard.css : il ne fait que surcharger les variables et quelques détails.
 * Pour changer de police ou de couleur, modifier uniquement le bloc « .orejime-Env » ci-dessous.
 */
.orejime-Env {
	--su-vert: #042A1F;
	--su-vert-hover: #0B4A36;
	--su-sauge: #81C0A2;
	--su-sauge-clair: rgba(129, 192, 162, .15);
	--su-lien: #1F6B4C;

	--orejime-font-family: 'Red Hat Text', 'Red Hat Display', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
	--orejime-color-background: #fff;
	--orejime-color-text: var(--su-vert);
	--orejime-color-subdued: #4A6359;
	--orejime-color-interactive: var(--su-vert);
	--orejime-color-on-interactive: #fff;
	--orejime-color-backdrop: rgba(4, 42, 31, .55);
	--orejime-color-shadow: 4, 42, 31;
	--orejime-radius: 12px;
	--orejime-banner-max-width: 48ch;
	--orejime-modal-max-width: 68ch;
}

/* Empilement : la bannière et la fenêtre de choix passent au-dessus de tout (menu collant, barre d'administration…). */
.orejime-BannerOverlay { z-index: 999990; }
.orejime-Banner { z-index: 999991; }
.orejime-ModalOverlay { z-index: 999992; }

/* Titres : police de la charte. */
.orejime-Banner-title,
.orejime-Modal-title,
.orejime-Purpose-title,
.orejime-ContextualNotice-title {
	font-family: 'Red Hat Display', var(--orejime-font-family);
	font-weight: 700;
	letter-spacing: -.01em;
}

.orejime-Banner-title { font-size: 1.15em; }
.orejime-Modal-title { font-size: 1.7em; line-height: 1.15; padding-right: 2rem; }

/* Bannière : carte claire avec liseré sauge. */
.orejime-Banner { padding: 1rem; }
.orejime-Banner-body {
	border-top: 4px solid var(--su-sauge);
	border-radius: var(--orejime-radius);
	padding: 1.25rem 1.4rem;
}
.orejime-Banner-description { line-height: 1.5; }
.orejime-Banner-purposes { color: var(--orejime-color-subdued); }

/* Fenêtre de choix. */
.orejime-Modal { border-top: 4px solid var(--su-sauge); }
.orejime-Modal-header { border-bottom: 1px solid var(--su-sauge-clair); padding-bottom: .6rem; }
.orejime-Purpose {
	background: var(--su-sauge-clair);
	border-radius: 10px;
	padding: .85rem 1rem;
	margin-top: .75rem;
}
.orejime-Purpose-description,
.orejime-Purpose-purposes { color: var(--orejime-color-subdued); }
.orejime-Purpose-input { accent-color: var(--su-lien); }

/* Liens */
.orejime-Env a { color: var(--su-lien); text-underline-offset: 2px; }
.orejime-Env a:focus-visible { outline: 3px solid var(--su-sauge); outline-offset: 2px; border-radius: 4px; }

/* Boutons : « Accepter » et « Refuser » ont exactement le même poids visuel. */
.orejime-Button {
	min-height: 44px;
	padding: .55em 1.15em;
	font-weight: 600;
	border: 2px solid var(--su-vert);
	border-radius: 999px;
	background: var(--su-vert);
	color: #fff;
	transition: background-color .15s ease, color .15s ease;
}
.orejime-Button:not([disabled]):not([aria-disabled=true]):hover {
	background: var(--su-vert-hover);
	border-color: var(--su-vert-hover);
}
.orejime-Button:not([disabled]):not([aria-disabled=true]):hover,
.orejime-Button:not([disabled]):not([aria-disabled=true]):focus {
	outline: 3px solid var(--su-sauge);
	outline-offset: 2px;
}
/* Actions secondaires (« Personnaliser », « Tout accepter / refuser » dans la fenêtre). */
.orejime-Button--info {
	background: transparent;
	color: var(--su-vert);
}
.orejime-Button--info:not([disabled]):not([aria-disabled=true]):hover {
	background: var(--su-sauge-clair);
	border-color: var(--su-vert);
	color: var(--su-vert);
}
.orejime-ButtonList { gap: .6rem; }

/* Petits écrans : bannière pleine largeur, boutons empilés. */
@media (max-width: 600px) {
	.orejime-Banner { padding: .5rem; left: 0; }
	.orejime-Banner-body { max-width: none; padding: 1rem; }
	.orejime-Modal { padding: 1.25rem; }
}

@media (prefers-reduced-motion: reduce) {
	.orejime-Button { transition: none; }
}