/**
 * Bandeau de consentement tarteaucitron : carte flottante aux couleurs du thème, commune à tous les thèmes enfants
 * (voir sbaEnqueueTarteaucitron() dans functions/enqueues.php).
 *
 * Pour résister aux mises à jour de la lib :
 * - cette feuille complète celle de tarteaucitron, chargée juste avant, au lieu de la remplacer ;
 * - elle ne cible que les identifiants du bandeau, jamais la structure du HTML ;
 * - tout est limité à l'orientation « bottom » : si elle change, le style d'origine de la lib s'applique ;
 * - l'affichage du bandeau est géré par la lib (style="display: …") : la mise en page n'y touche pas
 *   et repose sur des flottants.
 *
 * Les thèmes enfants relient les variables --cookies-* à leurs couleurs (components/_cookies.scss),
 * le mode sombre suit donc celui du thème. Valeurs par défaut ci-dessous pour un thème qui ne les définit pas.
 */

#tarteaucitronRoot {
	--_surface: var(--cookies-surface, #ffffff);
	--_ink: var(--cookies-ink, #1b1a17);
	--_ink-soft: var(--cookies-ink-soft, #4d4a43);
	--_line: var(--cookies-line, #d8d3c7);
	--_brand: var(--cookies-brand, #1f4fa8);
	--_brand-strong: var(--cookies-brand-strong, #173b7e);
	--_on-brand: var(--cookies-on-brand, #ffffff);
	--_brand-soft: var(--cookies-brand-soft, #e8eefa);
	--_radius: var(--cookies-radius, 1rem);
	--_button-radius: var(--cookies-button-radius, 0.5rem);
	--_border: var(--cookies-border, 1px solid var(--_line));
	--_shadow: var(--cookies-shadow, 0 1px 2px rgb(0 0 0 / 0.06), 0 12px 32px rgb(0 0 0 / 0.14));
	--_font: var(--cookies-font, inherit);
	--_title-font: var(--cookies-title-font, var(--_font));
	--_button-weight: var(--cookies-button-weight, 700);
	--_button-transform: var(--cookies-button-transform, none);
}

/* La carte */
html body #tarteaucitronRoot.tarteaucitronSize-bottom #tarteaucitronAlertBig {
	right: auto;
	bottom: 1.5rem;
	left: 1.5rem;
	box-sizing: border-box;
	width: min(28rem, 100vw - 3rem);
	max-height: calc(100vh - 3rem);
	overflow-y: auto;
	padding: 1.5rem;
	font-family: var(--_font);
	font-size: 1rem !important;
	line-height: 1.5;
	color: var(--_ink);
	text-align: left;
	background: var(--_surface);
	border: var(--_border);
	border-radius: var(--_radius);
	box-shadow: var(--_shadow);
}

/* Titre (paramètre showTitleBanner, texte middleBarHead) */
html body #tarteaucitronRoot.tarteaucitronTitleBanner.tarteaucitronSize-bottom #tarteaucitronAlertBig::before {
	margin: 0 0 0.5rem;
	padding: 0;
	font-family: var(--_title-font);
	font-size: 1.25rem;
	font-weight: 700;
	line-height: 1.3;
	color: var(--_ink);
}

html body #tarteaucitronRoot.tarteaucitronSize-bottom #tarteaucitronDisclaimerAlert {
	display: block;
	max-height: none;
	margin: 0 0 1.25rem;
	padding: 0;
	font: inherit;
	color: var(--_ink-soft);
}

/* Accepter et refuser : même taille et même poids visuel (recommandations CNIL) */
html body #tarteaucitronRoot.tarteaucitronSize-bottom #tarteaucitronPersonalize2,
html body #tarteaucitronRoot.tarteaucitronSize-bottom #tarteaucitronAllDenied2 {
	box-sizing: border-box;
	width: calc(50% - 0.375rem);
	min-height: 2.75rem;
	margin: 0 0 0.75rem; /* Sous les flottants, une marge haute du bouton creux serait absorbée par le clear */
	padding: 0.625rem 1rem;
	font-family: inherit;
	font-size: 1rem !important;
	font-weight: var(--_button-weight);
	line-height: 1.3;
	text-transform: var(--_button-transform);
	color: var(--_on-brand);
	background: var(--_brand);
	border: 2px solid var(--_brand);
	border-radius: var(--_button-radius);
	transition: background-color 0.2s, border-color 0.2s;
}

html body #tarteaucitronRoot.tarteaucitronSize-bottom #tarteaucitronPersonalize2 {
	float: left;
}

html body #tarteaucitronRoot.tarteaucitronSize-bottom #tarteaucitronAllDenied2 {
	float: right;
}

html body #tarteaucitronRoot.tarteaucitronSize-bottom #tarteaucitronPersonalize2:hover,
html body #tarteaucitronRoot.tarteaucitronSize-bottom #tarteaucitronAllDenied2:hover {
	background: var(--_brand-strong);
	border-color: var(--_brand-strong);
}

/* Personnaliser : bouton creux sur toute la largeur, sous les deux boutons */
html body #tarteaucitronRoot.tarteaucitronSize-bottom #tarteaucitronCloseAlert {
	display: block;
	clear: both;
	box-sizing: border-box;
	width: 100%;
	min-height: 2.75rem;
	margin: 0;
	padding: 0.625rem 1rem;
	font-family: inherit;
	font-size: 1rem !important;
	font-weight: var(--_button-weight);
	line-height: 1.3;
	text-transform: var(--_button-transform);
	color: var(--_brand);
	background: transparent;
	border: 2px solid var(--_brand);
	border-radius: var(--_button-radius);
	transition: background-color 0.2s, border-color 0.2s, color 0.2s;
}

html body #tarteaucitronRoot.tarteaucitronSize-bottom #tarteaucitronCloseAlert:hover {
	color: var(--_brand-strong);
	background: var(--_brand-soft);
	border-color: var(--_brand-strong);
}

html body #tarteaucitronRoot.tarteaucitronSize-bottom #tarteaucitronAlertBig button:focus-visible {
	outline: 3px solid var(--_brand);
	outline-offset: 2px;
}

/* Mobile : carte en bas de l'écran, boutons empilés */
@media (max-width: 30rem) {
	html body #tarteaucitronRoot.tarteaucitronSize-bottom #tarteaucitronAlertBig {
		bottom: 0.5rem;
		left: 0.5rem;
		width: calc(100vw - 1rem);
		max-height: calc(100vh - 1rem);
		padding: 1.25rem;
	}
}

@media (max-width: 26rem) {
	html body #tarteaucitronRoot.tarteaucitronSize-bottom #tarteaucitronPersonalize2,
	html body #tarteaucitronRoot.tarteaucitronSize-bottom #tarteaucitronAllDenied2 {
		float: none;
		display: block;
		width: 100%;
	}
}

@media (prefers-reduced-motion: reduce) {
	html body #tarteaucitronRoot.tarteaucitronSize-bottom #tarteaucitronAlertBig button {
		transition: none;
	}
}