/* ============================================================
   Peal RGPD — styles front (v1.3.0)
   
   Principe : l'affichage est contrôlé par l'attribut data-peal-open.
   Insensible aux minifieurs HTML qui suppriment l'attribut `hidden`.
   ============================================================ */

/* ---- Bandeau : masqué par défaut, affiché quand data-peal-open="1" ---- */
#peal-rgpd-banner {
	display: none;
}
#peal-rgpd-banner[data-peal-open="1"] {
	display: flex;
}

/* ---- Base ---- */
.peal-rgpd {
	position: fixed;
	z-index: 2147483600;
	box-sizing: border-box;
	color: #1d2939;
	font-size: 13px;
	line-height: 1.4;
	/* pointer-events: auto par défaut. Le mode "center" applique none sur le fond. */
}
.peal-rgpd *,
.peal-rgpd-manager * {
	box-sizing: border-box;
}
/* Neutralise les marges héritées du thème Divi sur h2/p/ul. */
.peal-rgpd h2,
.peal-rgpd p,
.peal-rgpd ul,
.peal-rgpd li { margin: 0; padding: 0; }

/* ---- Positions ---- */
.peal-rgpd--bar {
	left: 0; right: 0; bottom: 0;
	align-items: flex-end;
	justify-content: stretch;
}
.peal-rgpd--left {
	left: 16px; bottom: 16px;
	align-items: flex-end;
}
.peal-rgpd--right {
	right: 16px; bottom: 16px;
	align-items: flex-end;
}
.peal-rgpd--center {
	inset: 0;
	align-items: center;
	justify-content: center;
	background: transparent;
	pointer-events: none; /* le fond du site reste cliquable */
}

/* ---- Boîte : elle SEULE reçoit les clics ---- */
.peal-rgpd__box {
	background: #ffffff;
	box-shadow: 0 12px 40px rgba(16, 24, 40, .28);
	border: 1px solid rgba(16, 24, 40, .08);
	padding: 16px 20px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 16px;
	pointer-events: auto; /* la modale est cliquable */
	max-width: 480px;
	border-radius: 12px;
	animation: pealPopIn .22s ease-out;
}
.peal-rgpd--bar .peal-rgpd__box {
	max-width: none;
	width: 100%;
	border-radius: 0;
	box-shadow: 0 -6px 30px rgba(16, 24, 40, .18);
	border: none;
	border-top: 1px solid rgba(16, 24, 40, .08);
}
.peal-rgpd--left .peal-rgpd__box,
.peal-rgpd--right .peal-rgpd__box,
.peal-rgpd--center .peal-rgpd__box {
	flex-direction: column;
	align-items: stretch;
	gap: 10px;
}
.peal-rgpd--left .peal-rgpd__box,
.peal-rgpd--right .peal-rgpd__box { max-width: 400px; }

@keyframes pealPopIn {
	from { opacity: 0; transform: translateY(8px) scale(.98); }
	to   { opacity: 1; transform: none; }
}

/* ---- Contenu de la boîte ---- */
.peal-rgpd__logo {
	width: auto;
	height: 48px;
	max-width: 180px;
	max-height: 48px;
	object-fit: contain;
	flex: 0 0 auto;
	display: block;
}
/* En mode barre : logo à côté du texte, taille compacte. */
.peal-rgpd--bar .peal-rgpd__logo {
	height: 40px;
	align-self: center;
}
/* En modale (colonne) : logo aligné à gauche en haut. */
.peal-rgpd--left .peal-rgpd__logo,
.peal-rgpd--right .peal-rgpd__logo,
.peal-rgpd--center .peal-rgpd__logo {
	align-self: flex-start;
	margin-bottom: 4px;
}
.peal-rgpd__head { flex: 1 1 auto; min-width: 0; }
.peal-rgpd--center .peal-rgpd__head,
.peal-rgpd--left .peal-rgpd__head,
.peal-rgpd--right .peal-rgpd__head { text-align: center; }
.peal-rgpd__title {
	margin: 0 0 3px;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.25;
}
.peal-rgpd__intro {
	margin: 0;
	color: #475467;
	font-size: 13px;
	line-height: 1.4;
}
.peal-rgpd__link {
	color: var(--peal-settings-text, #2ea3f2);
	text-decoration: underline;
	white-space: nowrap;
}

/* ---- Préférences : masquées par défaut, dépliées par data-peal-open="1" ---- */
.peal-rgpd__prefs {
	display: none;
	flex: 1 1 100%;
	border-top: 1px solid #eef0f3;
	padding-top: 10px;
	margin-top: 6px;
	max-height: 42vh;
	overflow-y: auto;
	text-align: left;
}
.peal-rgpd__prefs[data-peal-open="1"] { display: block; }

.peal-rgpd__cat {
	display: flex;
	flex-direction: column;
	gap: 3px;
	padding: 8px 0;
	border-bottom: 1px solid #f2f4f7;
}
.peal-rgpd__cat:last-child { border-bottom: 0; }
.peal-rgpd__cat-main {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	flex-wrap: wrap;
}
.peal-rgpd__cat-desc {
	flex: 1 1 100%;
	color: #667085;
	font-size: 12px;
	line-height: 1.35;
	margin: 0;
}
.peal-rgpd__cat--locked {
	color: #667085;
	padding: 6px 0;
	flex-direction: row;
	align-items: center;
	gap: 10px;
}
.peal-rgpd__cat--locked .peal-rgpd__cat-desc { display: none; }
.peal-rgpd__cat-state {
	font-size: 11px;
	background: #eef2f6;
	padding: 2px 8px;
	border-radius: 20px;
	white-space: nowrap;
}
.peal-rgpd__cat-name {
	font-weight: 600;
	color: #1d2939;
	font-size: 13px;
}

/* Détail des cookies */
.peal-rgpd__cookies { font-size: 12px; margin-top: 2px; }

/* ---- Exceptions de session (approche granulaire) ---- */
.peal-rgpd__exceptions {
	margin-top: 6px;
	padding: 8px 10px;
	background: #fef8f0;
	border: 1px solid #f4d9a9;
	border-radius: 6px;
}
.peal-rgpd__exceptions-title {
	font-size: 11px;
	font-weight: 600;
	color: #92400e;
	margin-bottom: 4px;
}
.peal-rgpd__exceptions-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}
.peal-rgpd__exceptions-list li {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: 12px;
}
.peal-rgpd__exceptions-badge {
	background: #fed7aa;
	color: #9a3412;
	padding: 2px 8px;
	border-radius: 12px;
	font-weight: 600;
}
.peal-rgpd__exceptions-revoke {
	appearance: none;
	background: transparent;
	border: none;
	color: #b45309;
	text-decoration: underline;
	font-size: 11px;
	cursor: pointer;
	padding: 0 2px;
}
.peal-rgpd__exceptions-revoke:hover { color: #7c2d12; }
.peal-rgpd__cookies summary {
	cursor: pointer;
	color: var(--peal-settings-text, #2ea3f2);
	list-style: none;
	padding: 2px 0;
}
.peal-rgpd__cookies summary::-webkit-details-marker { display: none; }
.peal-rgpd__cookies summary::before { content: "▸ "; }
.peal-rgpd__cookies[open] summary::before { content: "▾ "; }
.peal-rgpd__cookie-list { list-style: none; margin: 4px 0 0; padding: 0; }
.peal-rgpd__cookie-list li {
	padding: 6px 8px;
	background: #f9fafb;
	border-radius: 6px;
	margin-bottom: 4px;
	display: flex;
	flex-wrap: wrap;
	gap: 2px 8px;
	align-items: baseline;
	font-size: 12px;
	line-height: 1.35;
}
.peal-rgpd__cookie-list code {
	font-weight: 700;
	background: #eef2f6;
	padding: 1px 6px;
	border-radius: 4px;
}
.peal-rgpd__cookie-provider { color: #1d2939; font-weight: 600; }
.peal-rgpd__cookie-expiry { color: #667085; }
.peal-rgpd__cookie-purpose { flex: 1 1 100%; color: #475467; }

/* ---- Interrupteur ---- */
.peal-rgpd__switch {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	cursor: pointer;
	position: relative;
}
.peal-rgpd__switch input {
	position: absolute; opacity: 0; width: 0; height: 0;
}
.peal-rgpd__slider {
	width: 34px; height: 18px;
	background: #cfd4dc;
	border-radius: 20px;
	position: relative;
	transition: background .2s ease;
	flex: 0 0 auto;
}
.peal-rgpd__slider::after {
	content: "";
	position: absolute;
	top: 2px; left: 2px;
	width: 14px; height: 14px;
	background: #fff;
	border-radius: 50%;
	transition: transform .2s ease;
}
.peal-rgpd__switch input:checked + .peal-rgpd__slider {
	background: var(--peal-accept-bg, #2ea3f2);
}
.peal-rgpd__switch input:checked + .peal-rgpd__slider::after {
	transform: translateX(16px);
}
.peal-rgpd__switch--big .peal-rgpd__slider { width: 44px; height: 24px; }
.peal-rgpd__switch--big .peal-rgpd__slider::after { width: 20px; height: 20px; }
.peal-rgpd__switch--big input:checked + .peal-rgpd__slider::after {
	transform: translateX(20px);
}

/* ---- Boutons ---- */
.peal-rgpd__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
	margin-top: 4px;
}
.peal-rgpd--center .peal-rgpd__actions,
.peal-rgpd--left .peal-rgpd__actions,
.peal-rgpd--right .peal-rgpd__actions {
	justify-content: center;
}
.peal-rgpd__btn {
	appearance: none;
	border: 1px solid transparent;
	border-radius: 8px;
	padding: 8px 14px;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	line-height: 1;
	transition: filter .15s ease;
}
.peal-rgpd__btn:hover { filter: brightness(.95); }
.peal-rgpd__btn--accept {
	background: var(--peal-accept-bg, #2ea3f2);
	color: var(--peal-accept-text, #fff);
}
.peal-rgpd__btn--reject {
	background: var(--peal-reject-bg, #eef2f6);
	color: var(--peal-reject-text, #1d2939);
}
.peal-rgpd__btn--settings,
.peal-rgpd__btn--save {
	background: var(--peal-settings-bg, #fff);
	color: var(--peal-settings-text, #2ea3f2);
	border-color: currentColor;
}
/* Save : masqué par défaut, affiché quand data-peal-open="1" */
.peal-rgpd__btn--save { display: none; }
.peal-rgpd__btn--save[data-peal-open="1"] { display: inline-block; }

/* ---- Onglet réouverture (désactivé par défaut en 1.3.0) ---- */
.peal-rgpd-reopen {
	position: fixed;
	bottom: 14px;
	z-index: 2147483647;
	pointer-events: auto !important;
	display: none; /* masqué par défaut */
	align-items: center;
	gap: 6px;
	background: #fff;
	color: #1d2939;
	border: 1px solid #e4e7ec;
	border-radius: 30px;
	padding: 8px 14px;
	font-size: 13px;
	cursor: pointer;
	box-shadow: 0 4px 14px rgba(16, 24, 40, .14);
}
.peal-rgpd-reopen[data-peal-open="1"] { display: inline-flex; }
.peal-rgpd-reopen--left { left: 14px; }
.peal-rgpd-reopen--right { right: 14px; }

/* ---- Overlay vidéo (nouveauté 1.3.0) ---- */
.peal-video-overlay {
	position: absolute;
	inset: 0;
	z-index: 100;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(16, 24, 40, .75);
	padding: 16px;
	color: #fff;
	text-align: center;
	pointer-events: auto;
	border-radius: 8px;
}
.peal-video-overlay__box {
	max-width: 340px;
	background: #fff;
	color: #1d2939;
	border-radius: 10px;
	padding: 18px 20px;
	box-shadow: 0 8px 24px rgba(16, 24, 40, .3);
}
.peal-video-overlay__title {
	font-weight: 700;
	font-size: 14px;
	margin-bottom: 6px;
}
.peal-video-overlay__text {
	font-size: 13px;
	color: #475467;
	line-height: 1.4;
	margin: 0 0 14px;
}
.peal-video-overlay__actions {
	display: flex;
	gap: 8px;
	justify-content: center;
	flex-wrap: wrap;
}
.peal-video-overlay__btn {
	appearance: none;
	border: 1px solid transparent;
	border-radius: 8px;
	padding: 8px 14px;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	line-height: 1;
}
.peal-video-overlay__btn--accept {
	background: var(--peal-accept-bg, #2ea3f2);
	color: var(--peal-accept-text, #fff);
	border: none;
}
.peal-video-overlay__btn--cancel {
	background: #eef2f6;
	color: #1d2939;
	border: none;
}

/* ---- Gestionnaire (shortcode) ---- */
.peal-rgpd-manager { font-size: 15px; color: #1d2939; }
.peal-rgpd-manager__cat {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 14px 0;
	border-bottom: 1px solid #eef0f3;
}
.peal-rgpd-manager__cat-info p {
	margin: 4px 0 0;
	color: #667085;
	font-size: 14px;
}
.peal-rgpd-manager__always {
	font-size: 13px;
	background: #eef2f6;
	padding: 4px 10px;
	border-radius: 20px;
	color: #667085;
	white-space: nowrap;
}
.peal-rgpd-manager__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 18px 0;
}

/* ---- Tableau des cookies ---- */
.peal-rgpd-cookietable { margin-top: 24px; }
.peal-rgpd-cookietable__scroll { overflow-x: auto; }
.peal-rgpd-cookietable table {
	width: 100%;
	border-collapse: collapse;
	font-size: 13px;
}
.peal-rgpd-cookietable th,
.peal-rgpd-cookietable td {
	text-align: left;
	padding: 10px 12px;
	border-bottom: 1px solid #eef0f3;
	vertical-align: top;
}
.peal-rgpd-cookietable th {
	background: #f9fafb;
	font-weight: 600;
}

/* ---- Responsive ---- */
@media (max-width: 782px) {
	.peal-rgpd--left,
	.peal-rgpd--right {
		left: 8px; right: 8px;
	}
	.peal-rgpd__box { padding: 14px 16px; }
	.peal-rgpd__actions .peal-rgpd__btn { flex: 1 1 auto; }
	.peal-rgpd__prefs { max-height: 38vh; }
}