/**
 * Prestaweb Cookies Consentement — styles publics.
 * Design neutre, personnalisable via variables CSS (voir class-pwcc-frontend.php).
 */

:root {
	--pwcc-text-color: #1f2933;
	--pwcc-bg: #ffffff;
	--pwcc-border: #e2e5e9;
	--pwcc-accept-bg: #1f7a4d;
	--pwcc-accept-text: #ffffff;
	--pwcc-reject-bg: #ffffff;
	--pwcc-reject-text: #1f2933;
	--pwcc-accent: #1f7a4d;
	--pwcc-radius: 10px;
	--pwcc-shadow: 0 6px 24px rgba(20, 24, 31, 0.16);
	--pwcc-z: 999999;
}

.pwcc-root, .pwcc-root * {
	box-sizing: border-box;
}

.pwcc-root {
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	font-size: 15px;
	line-height: 1.5;
	color: var(--pwcc-text-color);
}

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

.pwcc-banner {
	position: fixed;
	z-index: var(--pwcc-z);
	background: var(--pwcc-bg);
	border: 1px solid var(--pwcc-border);
	box-shadow: var(--pwcc-shadow);
}

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

.pwcc-position-bottom-bar {
	left: 0;
	right: 0;
	bottom: 0;
	border-left: none;
	border-right: none;
	border-bottom: none;
}

.pwcc-position-bottom-bar .pwcc-banner__inner {
	max-width: 1200px;
	margin: 0 auto;
	padding: 18px 24px;
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	align-items: center;
	justify-content: space-between;
}

.pwcc-position-bottom-left,
.pwcc-position-bottom-right {
	bottom: 20px;
	max-width: 420px;
	width: calc(100% - 40px);
	max-height: calc(100vh - 40px);
	overflow-y: auto;
	border-radius: var(--pwcc-radius);
}

.pwcc-position-bottom-left {
	left: 20px;
}

.pwcc-position-bottom-right {
	right: 20px;
}

.pwcc-position-bottom-left .pwcc-banner__inner,
.pwcc-position-bottom-right .pwcc-banner__inner {
	padding: 20px;
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.pwcc-banner__text {
	flex: 0 1 auto;
	min-width: 220px;
}

/* En mode "barre pleine largeur", l'axe principal est horizontal : on peut
   laisser le bloc de texte grandir jusqu'à 420px de large. */
.pwcc-position-bottom-bar .pwcc-banner__text {
	flex: 1 1 420px;
}

/* En mode "carte" (bas-gauche/bas-droite), l'axe principal est vertical :
   le bloc de texte ne doit pas hériter d'une base de 420px, sinon il force
   une hauteur minimale de 420px et laisse un grand vide avant les boutons. */
.pwcc-position-bottom-left .pwcc-banner__text,
.pwcc-position-bottom-right .pwcc-banner__text {
	flex: 0 1 auto;
	min-width: 0;
}

.pwcc-banner__title {
	margin: 0 0 6px;
	font-weight: 600;
	font-size: 16px;
	color: var(--pwcc-text-color);
}

.pwcc-banner__desc {
	margin: 0 0 8px;
	color: var(--pwcc-text-color);
	opacity: 0.85;
}

.pwcc-banner__note {
	margin: 0;
	font-size: 13px;
	opacity: 0.75;
}

.pwcc-banner__note a {
	color: var(--pwcc-accent);
	text-decoration: underline;
}

.pwcc-banner__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	flex-shrink: 0;
}

/* ---------- Boutons ---------- */

.pwcc-btn {
	appearance: none;
	border-radius: 6px !important;
	padding: 10px 18px !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	cursor: pointer;
	border: 1px solid transparent !important;
	white-space: nowrap !important;
	transition: opacity 0.15s ease, transform 0.05s ease !important;
}

/* De nombreux themes WordPress incluent un "reset.css" qui cible
   directement button / [type=button] / [type=submit] avec ses propres
   couleurs. Ces selecteurs ont la meme specificite qu'une classe unique
   (comme .pwcc-btn--accept), donc sans !important, l'ordre de chargement
   des feuilles de style peut faire gagner le theme et ecraser les couleurs
   choisies dans les reglages. Les proprietes ci-dessous sont donc forcees
   pour rester fiables quel que soit le theme. */

.pwcc-btn:hover {
	opacity: 0.9;
}

.pwcc-btn:active {
	transform: translateY(1px);
}

.pwcc-btn:focus-visible {
	outline: 2px solid var(--pwcc-accent);
	outline-offset: 2px;
}

.pwcc-btn--accept {
	background: var(--pwcc-accept-bg) !important;
	color: var(--pwcc-accept-text) !important;
}

.pwcc-btn--reject {
	background: var(--pwcc-reject-bg) !important;
	color: var(--pwcc-reject-text) !important;
	border-color: var(--pwcc-border) !important;
}

.pwcc-btn--ghost {
	background: transparent !important;
	color: var(--pwcc-text-color) !important;
	border-color: var(--pwcc-border) !important;
}

/* ---------- Renfort anti-conflit specifique a ce site ----------
   Le theme de ce site contient des regles CSS qui ciblent directement, par
   leur nom, certaines classes de ce plugin (.pwcc-banner__inner,
   .pwcc-banner__inner .pwcc-banner__desc, .pwcc-btn.pwcc-btn--ghost,
   .pwcc-modal__panel) avec "color: #fff !important" - vraisemblablement un
   reliquat d'une maquette anterieure a l'installation du module. Comme ces
   selecteurs utilisent 2 classes, ils l'emportent sur nos regles a 1 classe
   malgre nos "!important". On neutralise ce conflit en s'appuyant sur l'ID
   #pwcc-root (present sur le conteneur racine) : sa specificite l'emporte
   toujours sur un selecteur compose uniquement de classes, quel que soit le
   nombre de classes utilisees en face. */

#pwcc-root .pwcc-banner__title,
#pwcc-root .pwcc-banner__desc,
#pwcc-root .pwcc-banner__note,
#pwcc-root .pwcc-modal__title,
#pwcc-root .pwcc-modal__intro,
#pwcc-root .pwcc-category__title,
#pwcc-root .pwcc-category__desc {
	color: var(--pwcc-text-color) !important;
}

#pwcc-root .pwcc-category__status {
	color: var(--pwcc-accent) !important;
}

#pwcc-root .pwcc-banner__note a {
	color: var(--pwcc-accent) !important;
}

#pwcc-root .pwcc-btn.pwcc-btn--ghost {
	background: transparent !important;
	color: var(--pwcc-text-color) !important;
	border-color: var(--pwcc-border) !important;
}

#pwcc-root .pwcc-btn.pwcc-btn--accept {
	background: var(--pwcc-accept-bg) !important;
	color: var(--pwcc-accept-text) !important;
}

#pwcc-root .pwcc-btn.pwcc-btn--reject {
	background: var(--pwcc-reject-bg) !important;
	color: var(--pwcc-reject-text) !important;
	border-color: var(--pwcc-border) !important;
}

/* ---------- Fenetre de preferences ---------- */

.pwcc-modal-overlay {
	position: fixed;
	inset: 0;
	background: rgba(15, 18, 22, 0.55);
	z-index: var(--pwcc-z);
}

.pwcc-modal-overlay[hidden] {
	display: none;
}

.pwcc-modal {
	position: fixed;
	z-index: calc(var(--pwcc-z) + 1);
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: min(560px, calc(100% - 32px));
	max-height: min(680px, calc(100% - 48px));
}

.pwcc-modal[hidden] {
	display: none;
}

.pwcc-modal__panel {
	background: var(--pwcc-bg);
	border-radius: var(--pwcc-radius);
	box-shadow: var(--pwcc-shadow);
	padding: 28px;
	max-height: min(680px, calc(100vh - 48px));
	overflow-y: auto;
	position: relative;
}

.pwcc-modal__close {
	position: absolute;
	top: 14px;
	right: 14px;
	background: transparent;
	border: none;
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
	color: var(--pwcc-text-color);
	padding: 6px;
}

.pwcc-modal__close:focus-visible {
	outline: 2px solid var(--pwcc-accent);
}

.pwcc-modal__title {
	margin: 0 0 10px;
	font-size: 19px;
	font-weight: 700;
	padding-right: 24px;
	color: var(--pwcc-text-color);
}

.pwcc-modal__intro {
	margin: 0 0 20px;
	opacity: 0.85;
	color: var(--pwcc-text-color);
}

.pwcc-categories {
	display: flex;
	flex-direction: column;
	gap: 4px;
	border-top: 1px solid var(--pwcc-border);
}

.pwcc-category {
	padding: 14px 0;
	border-bottom: 1px solid var(--pwcc-border);
}

.pwcc-category__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

.pwcc-category__title {
	font-weight: 600;
	color: var(--pwcc-text-color);
}

.pwcc-category__status {
	font-size: 12px;
	font-weight: 600;
	color: var(--pwcc-accent);
	white-space: nowrap;
}

.pwcc-category__desc {
	margin: 6px 0 0;
	font-size: 13.5px;
	opacity: 0.8;
	color: var(--pwcc-text-color);
}

.pwcc-modal__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 22px;
}

.pwcc-modal__actions .pwcc-btn {
	flex: 1 1 auto;
	text-align: center;
}

/* ---------- Interrupteur (switch) ---------- */

.pwcc-switch {
	position: relative;
	display: inline-flex;
	align-items: center;
	cursor: pointer;
	flex-shrink: 0;
}

.pwcc-switch__input {
	position: absolute;
	opacity: 0;
	width: 42px;
	height: 24px;
	margin: 0;
	cursor: pointer;
}

.pwcc-switch__track {
	width: 42px;
	height: 24px;
	background: #c7cbd1;
	border-radius: 999px;
	position: relative;
	transition: background 0.15s ease;
	display: inline-block;
}

.pwcc-switch__track::before {
	content: "";
	position: absolute;
	top: 3px;
	left: 3px;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: #fff;
	transition: transform 0.15s ease;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}

.pwcc-switch__input:checked + .pwcc-switch__track {
	background: var(--pwcc-accent);
}

.pwcc-switch__input:checked + .pwcc-switch__track::before {
	transform: translateX(18px);
}

.pwcc-switch__input:focus-visible + .pwcc-switch__track {
	outline: 2px solid var(--pwcc-accent);
	outline-offset: 2px;
}

/* ---------- Bouton flottant de reouverture ---------- */

.pwcc-floating-btn {
	position: fixed;
	z-index: var(--pwcc-z);
	bottom: 20px;
	left: 20px;
	width: 46px;
	height: 46px;
	border-radius: 50%;
	background: var(--pwcc-bg);
	border: 1px solid var(--pwcc-border);
	box-shadow: var(--pwcc-shadow);
	color: var(--pwcc-accent);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
}

.pwcc-floating-btn[hidden] {
	display: none;
}

.pwcc-floating-btn:hover {
	opacity: 0.9;
}

/* ---------- Lien preferences (shortcode) ---------- */

.pwcc-preferences-link {
	background: none;
	border: none;
	padding: 0;
	margin: 0;
	color: inherit;
	text-decoration: underline;
	cursor: pointer;
	font: inherit;
}

/* ---------- Accessibilite ---------- */

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}

/* ---------- Responsive ---------- */

@media (max-width: 640px) {
	.pwcc-position-bottom-bar .pwcc-banner__inner {
		flex-direction: column;
		align-items: stretch;
	}

	.pwcc-banner__actions {
		flex-direction: column;
	}

	.pwcc-banner__actions .pwcc-btn {
		width: 100%;
	}

	.pwcc-modal__panel {
		padding: 20px;
	}
}

/* ---------- Mode sombre (respecte les preferences systeme) ---------- */

@media (prefers-color-scheme: dark) {
	.pwcc-root {
		--pwcc-bg: #1d2229;
		--pwcc-border: #333a44;
	}

	.pwcc-root .pwcc-modal-overlay {
		background: rgba(0, 0, 0, 0.65);
	}

	/* Le texte "neutre" du bandeau/de la fenetre (titres, descriptions,
	   bouton "Parametres"/"Enregistrer") utilise la couleur de texte choisie
	   dans les reglages, pensee pour un fond clair. Comme le fond passe au
	   sombre ci-dessus, on force ici une couleur claire pour ce texte afin
	   qu'il reste toujours lisible sur un telephone en mode nuit, quelle que
	   soit la couleur configuree pour le mode clair. On cible directement la
	   propriete "color" (et non la variable --pwcc-text-color) pour ne pas
	   etre ecrase par le CSS genere dynamiquement a partir des reglages, qui
	   est injecte apres cette feuille de style. */
	#pwcc-root .pwcc-banner__title,
	#pwcc-root .pwcc-banner__desc,
	#pwcc-root .pwcc-banner__note,
	#pwcc-root .pwcc-modal__title,
	#pwcc-root .pwcc-modal__intro,
	#pwcc-root .pwcc-category__title,
	#pwcc-root .pwcc-category__desc,
	#pwcc-root .pwcc-modal__close {
		color: #f1f3f5 !important;
	}

	#pwcc-root .pwcc-btn.pwcc-btn--ghost {
		color: #f1f3f5 !important;
		border-color: var(--pwcc-border) !important;
	}

	#pwcc-root .pwcc-banner__note a,
	#pwcc-root .pwcc-category__status {
		color: #7fd4a8 !important;
	}
}