/**
 * WP JRA Consent : habillage.
 *
 * Tout passe par des variables : sur un site client, trois lignes dans le
 * thème enfant suffisent à mettre le bandeau à la charte, sans toucher au
 * plugin et sans écran de réglage de couleurs.
 *
 *   :root {
 *     --wpjraco-fond: #241710;
 *     --wpjraco-texte: #FFF8E8;
 *     --wpjraco-accent: #B61315;
 *   }
 */

:root {
	--wpjraco-fond: #1c1c1c;
	--wpjraco-texte: #f5f5f5;
	--wpjraco-texte-doux: rgba(245, 245, 245, .78);
	--wpjraco-accent: #2563eb;
	--wpjraco-accent-texte: #ffffff;
	--wpjraco-bordure: rgba(245, 245, 245, .28);
	--wpjraco-rayon: 10px;
	--wpjraco-ombre: 0 -2px 24px rgba(0, 0, 0, .28);
	--wpjraco-largeur: 1100px;
	--wpjraco-z: 99999;
}

.wpjraco[hidden] { display: none; }

.wpjraco__voile {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, .45);
	z-index: var(--wpjraco-z);
	display: none;
}
.wpjraco[data-wpjraco-etat="panneau"] .wpjraco__voile { display: block; }

/* ---- Bandeau ---------------------------------------------------------- */

.wpjraco__bandeau {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: calc(var(--wpjraco-z) + 1);
	background: var(--wpjraco-fond);
	color: var(--wpjraco-texte);
	box-shadow: var(--wpjraco-ombre);
	padding: 18px 20px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px 24px;
	font-size: .95rem;
	line-height: 1.5;
}
.wpjraco[data-wpjraco-etat="panneau"] .wpjraco__bandeau { display: none; }

.wpjraco .wpjraco__titre {
	font-size: 1rem;
	margin: 0;
	flex: 1 0 100%;
	color: var(--wpjraco-texte) !important;
}
.wpjraco__bandeau .wpjraco__titre {
	/* Sur le bandeau, le titre est utile aux lecteurs d'écran mais alourdit
	   l'affichage : on le laisse accessible sans l'afficher. */
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

.wpjraco__texte {
	margin: 0;
	flex: 1 1 420px;
	color: var(--wpjraco-texte);
}
/* Même raison : sur le premier site, le lien héritait du rouge de la marque,
   posé sur un fond brun foncé, soit 2,6 pour 1. Illisible. */
.wpjraco .wpjraco__texte a {
	color: var(--wpjraco-texte) !important;
	text-underline-offset: 3px;
	text-decoration: underline;
}

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

/*
 * Accepter et refuser ont exactement le même poids visuel : même taille,
 * même graisse, même surface. C'est une exigence, pas une préférence.
 */
/*
 * `!important` assumé, et voici pourquoi.
 *
 * Ce bandeau s'affiche sur des sites dont on ne maîtrise pas la feuille de
 * style, et la sienne est presque toujours chargée AVANT celle du thème ou du
 * constructeur de page. À spécificité égale, c'est donc le site qui gagne.
 *
 * Constaté sur le premier déploiement : le thème imposait son fond brun et sa
 * bordure aux deux boutons, qui devenaient identiques. « Accepter » et
 * « refuser » doivent rester distincts et lisibles quel que soit le site : ce
 * n'est pas une préférence esthétique, c'est ce qui rend le choix clair.
 *
 * Les propriétés protégées sont donc uniquement celles qui portent le sens :
 * couleurs, bordure, graisse. Tout le reste suit la charte du site.
 */
.wpjraco .wpjraco__bouton {
	font: inherit;
	font-weight: 600 !important;
	padding: 11px 20px;
	border-radius: var(--wpjraco-rayon);
	border: 1.5px solid transparent;
	cursor: pointer;
	min-height: 44px;
	white-space: nowrap;
	text-transform: none !important;
	letter-spacing: normal !important;
}
.wpjraco .wpjraco__bouton--oui {
	background: var(--wpjraco-accent) !important;
	color: var(--wpjraco-accent-texte) !important;
	border-color: var(--wpjraco-accent) !important;
}
.wpjraco .wpjraco__bouton--non {
	background: transparent !important;
	color: var(--wpjraco-texte) !important;
	border-color: var(--wpjraco-bordure) !important;
}
.wpjraco .wpjraco__bouton:hover { opacity: .9; }

.wpjraco__lien {
	font: inherit;
	background: none;
	border: 0;
	color: var(--wpjraco-texte-doux);
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
	padding: 11px 4px;
	min-height: 44px;
}

/* ---- Panneau de réglages --------------------------------------------- */

.wpjraco__panneau {
	position: fixed;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	z-index: calc(var(--wpjraco-z) + 2);
	width: min(560px, calc(100vw - 32px));
	max-height: min(80vh, 720px);
	overflow-y: auto;
	background: var(--wpjraco-fond);
	color: var(--wpjraco-texte);
	border-radius: var(--wpjraco-rayon);
	padding: 24px;
	box-shadow: 0 10px 48px rgba(0, 0, 0, .4);
}
.wpjraco__panneau[hidden] { display: none; }

.wpjraco__liste { list-style: none; margin: 18px 0; padding: 0; }

.wpjraco__item {
	padding: 14px 0;
	border-top: 1px solid var(--wpjraco-bordure);
}
.wpjraco__item:first-child { border-top: 0; }

.wpjraco__item-tete {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}
.wpjraco__item-nom { font-weight: 600; cursor: pointer; }
.wpjraco__item-fixe { font-size: .82rem; color: var(--wpjraco-texte-doux); }
.wpjraco__item-desc {
	margin: 6px 0 0;
	font-size: .88rem;
	color: var(--wpjraco-texte-doux);
	line-height: 1.5;
}
.wpjraco__case { width: 20px; height: 20px; cursor: pointer; flex: 0 0 auto; }

/* ---- Aperçu remplaçant un contenu bloqué ------------------------------ */

.wpjraco-apercu {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 10px;
	text-align: center;
	padding: 28px 20px;
	background: rgba(128, 128, 128, .12);
	border: 1px dashed currentColor;
	border-radius: var(--wpjraco-rayon);
	min-height: 180px;
}
.wpjraco-apercu__texte { margin: 0; font-size: .95rem; }
.wpjraco-apercu__note { margin: 0; font-size: .8rem; opacity: .75; }
.wpjraco-apercu__bouton {
	font: inherit;
	font-weight: 600;
	padding: 11px 20px;
	min-height: 44px;
	border-radius: var(--wpjraco-rayon);
	border: 0;
	background: var(--wpjraco-accent);
	color: var(--wpjraco-accent-texte);
	cursor: pointer;
}

/* ---- Rappel permanent ------------------------------------------------- */

/*
 * Le retrait du consentement doit être aussi simple que son recueil : ce
 * bouton reste accessible en permanence, discrètement.
 */
.wpjraco-rappel {
	position: fixed;
	left: 12px;
	bottom: 12px;
	z-index: calc(var(--wpjraco-z) - 1);
	font: inherit;
	font-size: .8rem;
	padding: 8px 12px;
	min-height: 36px;
	border-radius: 999px;
	border: 1px solid var(--wpjraco-bordure);
	background: var(--wpjraco-fond);
	color: var(--wpjraco-texte);
	cursor: pointer;
	opacity: .75;
}
.wpjraco-rappel:hover { opacity: 1; }
.wpjraco-rappel[hidden] { display: none; }

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

/* ---- Accessibilité ---------------------------------------------------- */

.wpjraco button:focus-visible,
.wpjraco input:focus-visible,
.wpjraco-rappel:focus-visible,
.wpjraco-apercu__bouton:focus-visible {
	outline: 3px solid var(--wpjraco-accent);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	.wpjraco *, .wpjraco-apercu * { transition: none !important; animation: none !important; }
}

@media (max-width: 640px) {
	.wpjraco__bandeau { padding: 16px; gap: 12px; }
	.wpjraco__actions { width: 100%; }
	.wpjraco__bouton { flex: 1 1 auto; }
}