/**
 * Bannière Loi 25 — style « barre ».
 * Variables CSS pour la personnalisation sans surcharge de sélecteurs.
 */

:root {
	--loi25-primary: #003DA5;
	--loi25-primary-text: #ffffff;
	--loi25-text: #1a1a1a;
	--loi25-muted: #5a5a66;
	--loi25-bg: #ffffff;
	--loi25-border: #d9d9e0;
	--loi25-radius: 8px;
	--loi25-z: 999999;
}

.loi25-banner[hidden] { display: none; }

.loi25-banner {
	position: fixed;
	inset-inline: 0;
	bottom: 0;
	z-index: var(--loi25-z);
	background: var(--loi25-bg);
	color: var(--loi25-text);
	border-top: 1px solid var(--loi25-border);
	box-shadow: 0 -8px 30px -20px rgba(0,0,0,.5);
	font-size: 15px;
	line-height: 1.5;
}

.loi25-banner__inner {
	max-width: 1180px;
	margin-inline: auto;
	padding: 20px clamp(16px, 4vw, 32px);
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 16px 32px;
	align-items: center;
}

.loi25-banner__title {
	margin: 0 0 4px;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.25;
}

.loi25-banner__desc { margin: 0; color: var(--loi25-muted); font-size: 14px; }
.loi25-banner__policy { color: inherit; text-underline-offset: 2px; }

.loi25-banner__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: center;
}

.loi25-btn {
	font: inherit;
	cursor: pointer;
	border-radius: var(--loi25-radius);
	padding: 11px 20px;
	border: 1px solid transparent;
	transition: opacity .12s ease, background-color .12s ease;
	min-height: 44px;   /* cible tactile confortable */
}
.loi25-btn:focus-visible { outline: 2px solid var(--loi25-primary); outline-offset: 2px; }

/*
 * Refuser et accepter partagent CE style : même surface, même contraste,
 * même effort. C'est une exigence, pas une préférence esthétique.
 */
.loi25-btn--primary {
	background: var(--loi25-primary);
	color: var(--loi25-primary-text);
	font-weight: 600;
}
.loi25-btn--primary:hover { opacity: .88; }

.loi25-btn--link {
	background: none;
	color: var(--loi25-muted);
	text-decoration: underline;
	text-underline-offset: 3px;
	padding-inline: 8px;
}
.loi25-btn--link:hover { color: var(--loi25-text); }

.loi25-btn--save {
	background: var(--loi25-primary);
	color: var(--loi25-primary-text);
	font-weight: 600;
	margin-top: 14px;
}

.loi25-banner__details {
	grid-column: 1 / -1;
	border-top: 1px solid var(--loi25-border);
	padding-top: 16px;
	max-height: 46vh;
	overflow-y: auto;
}
.loi25-banner__details[hidden] { display: none; }

.loi25-cat + .loi25-cat { margin-top: 14px; }
.loi25-cat__row { display: flex; align-items: center; gap: 10px; cursor: pointer; font-weight: 600; }
.loi25-cat__input { width: 18px; height: 18px; accent-color: var(--loi25-primary); }
.loi25-cat__input:disabled { opacity: .55; cursor: not-allowed; }
.loi25-cat__lock { font-size: 12px; font-weight: 400; color: var(--loi25-muted); }
.loi25-cat__desc { margin: 4px 0 0 28px; font-size: 13px; color: var(--loi25-muted); }

.loi25-reopen {
	font: inherit;
	background: none;
	border: 0;
	padding: 0;
	color: inherit;
	cursor: pointer;
	text-decoration: underline;
	text-underline-offset: 3px;
}

@media (max-width: 860px) {
	.loi25-banner__inner { grid-template-columns: 1fr; }
	.loi25-banner__actions { width: 100%; }
	.loi25-btn--primary { flex: 1 1 45%; }
}

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

/* ------------------------------------------------------------------ */
/* Pastille de retrait — permanente une fois le choix fait             */
/*                                                                     */
/* Coin BAS-GAUCHE volontairement : le bas-droite est occupé par les    */
/* widgets de clavardage sur la majorité des sites. Discrète au repos,  */
/* elle révèle son libellé au survol pour rester compréhensible.        */
/* ------------------------------------------------------------------ */

.loi25-fab[hidden] { display: none; }

.loi25-fab {
	position: fixed;
	left: 16px;
	bottom: 16px;
	z-index: calc(var(--loi25-z) - 1);
	display: inline-flex;
	align-items: center;
	gap: 0;
	height: 44px;
	padding: 0 10px;
	border: 1px solid var(--loi25-border);
	border-radius: 999px;
	background: var(--loi25-bg);
	color: var(--loi25-text);
	cursor: pointer;
	font: inherit;
	font-size: 13px;
	line-height: 1;
	box-shadow: 0 6px 20px -10px rgba(0,0,0,.45);
	transition: gap .14s ease, padding .14s ease, background-color .14s ease;
}

.loi25-fab__icon { display: inline-flex; width: 22px; height: 22px; }
.loi25-fab__icon svg { width: 100%; height: 100%; }

/* Le libellé est masqué visuellement mais reste lisible par les lecteurs
   d'écran via aria-label sur le bouton. Il se déplie au survol/focus. */
.loi25-fab__label {
	max-width: 0;
	overflow: hidden;
	white-space: nowrap;
	opacity: 0;
	transition: max-width .16s ease, opacity .16s ease;
}

.loi25-fab:hover,
.loi25-fab:focus-visible { gap: 8px; padding-inline: 12px 16px; }

.loi25-fab:hover .loi25-fab__label,
.loi25-fab:focus-visible .loi25-fab__label { max-width: 140px; opacity: 1; }

.loi25-fab:focus-visible { outline: 2px solid var(--loi25-primary); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
	.loi25-fab, .loi25-fab__label { transition: none; }
}

/* ------------------------------------------------------------------ */
/* Robustesse : certains thèmes imposent un border-radius aux éléments  */
/* focalisés (`:focus-visible { border-radius: 2px }`), ce qui déforme  */
/* les boutons de la bannière et donne l'impression que « refuser » et  */
/* « accepter » n'ont pas le même traitement. On reprend la main.       */
/* ------------------------------------------------------------------ */
.loi25-btn:focus-visible { border-radius: var(--loi25-radius); }
.loi25-fab:focus-visible { border-radius: 999px; }