/**
 * MY RGPD — l'habillage du bandeau.
 *
 * Deux principes :
 *   • TÉLÉPHONE D'ABORD. Le bandeau est conçu pour un écran de 390 px et
 *     s'élargit ensuite. Toutes les cibles font au moins 44 px de haut.
 *   • LES TROIS RÉPONSES ONT LE MÊME POIDS. Même taille, même forme, même
 *     contraste : c'est une exigence de la CNIL, pas une préférence de
 *     goût. Ne donnez pas une couleur pleine au seul bouton « J'accepte ».
 */

:root {
	--myrgpd-accent: #00b3c4;
	--myrgpd-radius: 14px;
	--myrgpd-logo-h: 44px;
}

/* Habillage clair (par défaut) et sombre. Les jetons sont posés sur le
   bandeau lui-même : le thème du site n'est jamais touché. */
.myrgpd {
	--myrgpd-bg: #ffffff;
	--myrgpd-bg-2: #f4f5f8;
	--myrgpd-text: #14141f;
	--myrgpd-muted: #5c5c72;
	--myrgpd-line: rgba(10, 10, 20, .14);
	--myrgpd-ink: #0a0a0f;
}

.myrgpd--skin-dark,
.myrgpd--skin-auto.myrgpd--is-dark {
	--myrgpd-bg: #13131d;
	--myrgpd-bg-2: #1c1c28;
	--myrgpd-text: #f4f4f8;
	--myrgpd-muted: #a2a2b8;
	--myrgpd-line: rgba(255, 255, 255, .14);
	--myrgpd-ink: #ffffff;
}

@media (prefers-color-scheme: dark) {
	.myrgpd--skin-auto {
		--myrgpd-bg: #13131d;
		--myrgpd-bg-2: #1c1c28;
		--myrgpd-text: #f4f4f8;
		--myrgpd-muted: #a2a2b8;
		--myrgpd-line: rgba(255, 255, 255, .14);
		--myrgpd-ink: #ffffff;
	}
}

/* ---------------------------------------------------------------------
   Le cadre
   ------------------------------------------------------------------ */

.myrgpd[hidden] { display: none !important; }

.myrgpd {
	position: fixed;
	z-index: 999999;
	inset: 0;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	padding: 0;
	font-family: inherit;
	font-size: 15px;
	line-height: 1.5;
	color: var(--myrgpd-text);
}

.myrgpd--overlay { background: rgba(6, 6, 12, .62); }

.myrgpd--bottom { align-items: flex-end; }
.myrgpd--modal  { align-items: center; }

.myrgpd--corner {
	inset: auto 0 0 0;
	background: none;
	pointer-events: none;
}

.myrgpd--corner .myrgpd__box { pointer-events: auto; }

.myrgpd__box {
	width: 100%;
	max-width: 640px;
	max-height: 92dvh;
	overflow-y: auto;
	background: var(--myrgpd-bg);
	color: var(--myrgpd-text);
	border-radius: var(--myrgpd-radius) var(--myrgpd-radius) 0 0;
	box-shadow: 0 -8px 40px rgba(0, 0, 0, .3);
	padding: 18px 18px calc(18px + env(safe-area-inset-bottom));
	-webkit-overflow-scrolling: touch;
}

@media (min-width: 700px) {
	.myrgpd { padding: 24px; }
	.myrgpd__box {
		border-radius: var(--myrgpd-radius);
		padding: 24px 26px;
	}
	.myrgpd--corner .myrgpd__box { max-width: 420px; margin-left: 24px; margin-right: auto; }
}

/* ---------------------------------------------------------------------
   L'en-tête : le logo du site, pour qu'on sache à QUI on répond
   ------------------------------------------------------------------ */

.myrgpd__head {
	display: flex;
	align-items: center;
	gap: 10px;
	padding-bottom: 12px;
	margin-bottom: 14px;
	border-bottom: 1px solid var(--myrgpd-line);
}

.myrgpd__logo {
	height: var(--myrgpd-logo-h);
	width: auto;
	max-width: 70%;
	object-fit: contain;
	display: block;
}

.myrgpd__site {
	font-weight: 700;
	font-size: 17px;
	letter-spacing: .01em;
}

/* « Continuer sans accepter » : un lien, pas un bouton fantôme.
   ⚠ Il doit rester LISIBLE — même famille de couleur que le texte courant,
   souligné, 44 px de haut. Le rendre pâle ou minuscule pour décourager le
   refus est exactement le dark pattern que la CNIL sanctionne. */
.myrgpd__skip {
	margin-left: auto;
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 4px 2px;
	border: 0;
	background: none;
	color: var(--myrgpd-text);
	font: inherit;
	font-size: 13px;
	text-align: right;
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
}

.myrgpd__skip:hover { color: var(--myrgpd-accent); }

.myrgpd__skip:focus-visible {
	outline: 3px solid var(--myrgpd-accent);
	outline-offset: 2px;
	border-radius: 6px;
}

.myrgpd__skip[hidden] { display: none !important; }

/* ---------------------------------------------------------------------
   Les textes
   ------------------------------------------------------------------ */

.myrgpd__title {
	margin: 0 0 8px;
	font-size: 19px;
	line-height: 1.25;
	font-weight: 700;
	color: var(--myrgpd-text);
}

.myrgpd__intro {
	margin: 0 0 14px;
	color: var(--myrgpd-muted);
	font-size: 14px;
}

.myrgpd__links {
	margin: 0 0 16px;
	display: flex;
	flex-wrap: wrap;
	gap: 6px 18px;
	font-size: 13px;
}

.myrgpd__links a {
	color: var(--myrgpd-accent);
	text-decoration: underline;
}

/* ---------------------------------------------------------------------
   Les boutons — LES TROIS SONT IDENTIQUES
   ------------------------------------------------------------------ */

.myrgpd__actions {
	display: grid;
	gap: 10px;
}

@media (min-width: 560px) {
	.myrgpd__actions { grid-template-columns: repeat(3, 1fr); }
	.myrgpd__actions--panel { grid-template-columns: repeat(2, 1fr); }
}

.myrgpd-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 46px;
	padding: 11px 16px;
	border-radius: 10px;
	border: 2px solid var(--myrgpd-accent);
	background: var(--myrgpd-bg-2);
	color: var(--myrgpd-text);
	font: inherit;
	font-weight: 600;
	font-size: 15px;
	line-height: 1.2;
	text-align: center;
	cursor: pointer;
	transition: transform .15s ease, background-color .15s ease;
}

.myrgpd-btn:hover { background: var(--myrgpd-accent); color: #fff; }
.myrgpd-btn:active { transform: translateY(1px); }

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

.myrgpd-btn--ghost {
	border-color: var(--myrgpd-line);
	background: transparent;
	font-weight: 500;
}

.myrgpd-btn--ghost:hover {
	background: var(--myrgpd-bg-2);
	color: var(--myrgpd-text);
}

/* ---------------------------------------------------------------------
   Le panneau des catégories
   ------------------------------------------------------------------ */

.myrgpd__cats {
	list-style: none;
	margin: 0 0 16px;
	padding: 0;
	display: grid;
	gap: 10px;
}

.myrgpd-cat {
	background: var(--myrgpd-bg-2);
	border: 1px solid var(--myrgpd-line);
	border-radius: 10px;
	padding: 12px 14px;
}

.myrgpd-cat__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	min-height: 32px;
}

.myrgpd-cat__label { font-weight: 600; }

.myrgpd-cat__always {
	font-size: 12px;
	color: var(--myrgpd-muted);
	white-space: nowrap;
}

.myrgpd-cat__desc {
	margin: 6px 0 0;
	font-size: 13px;
	color: var(--myrgpd-muted);
}

.myrgpd-cat__details { margin-top: 8px; font-size: 13px; }
.myrgpd-cat__details summary { cursor: pointer; color: var(--myrgpd-accent); }

.myrgpd-cat__services {
	list-style: none;
	margin: 8px 0 0;
	padding: 0;
	display: grid;
	gap: 6px;
}

.myrgpd-cat__services li { font-size: 13px; }

.myrgpd-cat__provider,
.myrgpd-cat__duration {
	display: inline-block;
	margin-left: 8px;
	color: var(--myrgpd-muted);
	font-size: 12px;
}

/* L'interrupteur : une case à cocher habillée. La case reste là pour les
   lecteurs d'écran et la navigation au clavier. */
.myrgpd-switch {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	cursor: pointer;
	min-height: 44px;
	padding-left: 2px;
}

.myrgpd-switch input {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
}

.myrgpd-switch__track {
	position: relative;
	width: 46px;
	height: 26px;
	border-radius: 13px;
	background: var(--myrgpd-line);
	border: 1px solid var(--myrgpd-line);
	flex: none;
	transition: background-color .18s ease;
}

.myrgpd-switch__track::after {
	content: "";
	position: absolute;
	top: 2px;
	left: 2px;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: var(--myrgpd-bg);
	box-shadow: 0 1px 3px rgba(0, 0, 0, .35);
	transition: transform .18s ease;
}

.myrgpd-switch input:checked + .myrgpd-switch__track { background: var(--myrgpd-accent); }
.myrgpd-switch input:checked + .myrgpd-switch__track::after { transform: translateX(20px); }

.myrgpd-switch input:focus-visible + .myrgpd-switch__track {
	outline: 3px solid var(--myrgpd-accent);
	outline-offset: 2px;
}

.myrgpd-switch__text { font-size: 12px; color: var(--myrgpd-muted); min-width: 68px; }
.myrgpd-switch__on { display: none; }
.myrgpd-switch input:checked ~ .myrgpd-switch__text .myrgpd-switch__on { display: inline; }
.myrgpd-switch input:checked ~ .myrgpd-switch__text .myrgpd-switch__off { display: none; }

/* ---------------------------------------------------------------------
   La pastille de rappel
   ------------------------------------------------------------------ */

.myrgpd-recall[hidden] { display: none !important; }

.myrgpd-recall {
	position: fixed;
	bottom: max(14px, env(safe-area-inset-bottom));
	z-index: 999998;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	padding: 8px 14px;
	border: 1px solid rgba(255, 255, 255, .2);
	border-radius: 999px;
	background: #13131d;
	color: #f4f4f8;
	font: inherit;
	font-size: 13px;
	cursor: pointer;
	box-shadow: 0 6px 20px rgba(0, 0, 0, .28);
}

.myrgpd-recall--left { left: 14px; }
.myrgpd-recall--right { right: 14px; }
.myrgpd-recall:hover { background: var(--myrgpd-accent); color: #fff; }

.myrgpd-recall:focus-visible {
	outline: 3px solid var(--myrgpd-accent);
	outline-offset: 2px;
}

.myrgpd-recall__icon { display: inline-flex; }

@media (max-width: 480px) {
	.myrgpd-recall__text {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
		white-space: nowrap;
	}
	.myrgpd-recall { padding: 10px; }
}

/* ---------------------------------------------------------------------
   Le cadre d'attente d'un contenu bloqué
   ------------------------------------------------------------------ */

.myrgpd-blocked {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 180px;
	margin: 16px 0;
	padding: 20px;
	border: 1px dashed rgba(125, 125, 150, .5);
	border-radius: 12px;
	background: rgba(125, 125, 150, .08);
	text-align: center;
}

.myrgpd-blocked__in { max-width: 420px; }
.myrgpd-blocked__title { margin: 0 0 6px; font-weight: 700; }
.myrgpd-blocked__text { margin: 0 0 12px; font-size: 14px; opacity: .85; }

/* ---------------------------------------------------------------------
   Le tableau des traceurs et la mention d'affiliation
   ------------------------------------------------------------------ */

.myrgpd-table__grid {
	width: 100%;
	border-collapse: collapse;
	margin: 10px 0 22px;
	font-size: 14px;
	display: block;
	overflow-x: auto;
}

.myrgpd-table__grid th,
.myrgpd-table__grid td {
	padding: 8px 10px;
	border: 1px solid rgba(125, 125, 150, .3);
	text-align: left;
	vertical-align: top;
}

.myrgpd-table__grid th { background: rgba(125, 125, 150, .12); font-weight: 600; }
.myrgpd-table__cat { margin: 22px 0 4px; }
.myrgpd-table__desc { margin: 0 0 8px; opacity: .8; font-size: 14px; }

.myrgpd-affiliate {
	font-size: 13px;
	opacity: .8;
	border-left: 3px solid var(--myrgpd-accent);
	padding-left: 12px;
	margin: 18px 0;
}

.myrgpd-footer-link { text-align: center; padding: 10px 0; }

.myrgpd-open--link {
	background: none;
	border: 0;
	padding: 4px 8px;
	min-height: 44px;
	color: inherit;
	font: inherit;
	font-size: 13px;
	text-decoration: underline;
	cursor: pointer;
	opacity: .85;
}

/* Le corps ne défile plus derrière une fenêtre modale. */
body.myrgpd-open-body { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
	.myrgpd-btn,
	.myrgpd-switch__track,
	.myrgpd-switch__track::after { transition: none; }
}