/**
 * Bandeau de consentement — Epiona.
 *
 * Trois contraintes de fond : deux réglementaires, une commerciale.
 *
 *  - « Tout refuser » et « Tout accepter » doivent avoir **exactement** le même poids visuel.
 *    Même largeur, même hauteur, même graisse : seule la couleur les distingue. Un refus
 *    relégué en lien discret est le motif que la CNIL sanctionne le plus souvent.
 *  - Le bandeau ne doit jamais faire mur. Il informe, il ne bloque pas la navigation :
 *    d'où les hauteurs plafonnées en `vh` et le défilement interne du panneau détaillé.
 *  - C'est la première chose que voit un visiteur. Il ne doit pas avoir l'impression qu'un
 *    outil étranger s'est posé sur le site.
 *
 * Métriques visées : environ 100 px replié, 250 px déplié sur grand écran. Toute
 * augmentation de padding ou d'interligne ici se paie directement en surface masquée.
 */

.epiona-consent {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 9000;
	background: var(--e-surface);
	border-top: 1px solid var(--e-line);
	box-shadow: 0 -1px 40px rgba(23, 22, 20, 0.06);
	transform: translateY(100%);
	transition: transform 0.32s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.epiona-consent[data-etat="visible"] {
	transform: translateY(0);
}

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

.epiona-consent__inner {
	max-width: var(--e-container);
	margin: 0 auto;
	padding: 18px var(--e-gutter) 20px;
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	gap: 14px 40px;
}

.epiona-consent__resume .epiona-eyebrow {
	margin: 0 0 5px;
}

.epiona-consent__texte {
	margin: 0;
	max-width: 78ch;
	font-family: var(--e-sans);
	font-size: 13.5px;
	font-weight: 300;
	line-height: 1.6;
	color: var(--e-text-muted);
}

.epiona-consent__texte a {
	color: var(--e-text);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.epiona-consent__texte a:hover {
	color: var(--e-gold-dark);
}

/* ---------------------------------------------------------------------------
   Actions
   --------------------------------------------------------------------------- */

.epiona-consent__actions {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
}

/* « Personnaliser » est un troisième chemin, pas une alternative au refus :
   il est donc traité en lien, sans concurrencer les deux boutons. */
.epiona-consent__lien {
	background: none;
	border: 0;
	padding: 6px 4px;
	font-family: var(--e-sans);
	font-size: 12.5px;
	font-weight: 300;
	color: var(--e-text-muted);
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
	transition: var(--e-transition);
}

.epiona-consent__lien:hover {
	color: var(--e-text);
}

/* Les deux boutons sont strictement identiques en dimensions et en graisse. */
.epiona-consent__btn {
	min-width: 140px;
	padding: 12px 22px;
	border: 1px solid transparent;
	border-radius: 0;
	font-family: var(--e-sans);
	font-size: 11.5px;
	font-weight: 400;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	line-height: 1.2;
	cursor: pointer;
	transition: var(--e-transition);
}

/* Largeur fixe et identique pour les deux : `min-width` ne suffit pas, le libellé le plus
   long le dépasse et creuse un écart visible entre refuser et accepter. Ne s'applique pas
   au bouton d'enregistrement du panneau, dont le libellé est plus long. */
.epiona-consent__actions .epiona-consent__btn {
	flex: 0 0 164px;
}

.epiona-consent__btn--refus {	background: transparent;
	border-color: var(--e-text);
	color: var(--e-text);
}

.epiona-consent__btn--refus:hover {
	background: var(--e-text);
	color: var(--e-on-dark);
}

.epiona-consent__btn--accept {
	background: var(--e-gold);
	color: var(--e-on-dark);
}

.epiona-consent__btn--accept:hover {
	background: var(--e-gold-dark);
}

.epiona-consent__btn:focus-visible,
.epiona-consent__lien:focus-visible {
	outline: 2px solid var(--e-gold-dark);
	outline-offset: 2px;
}

/* ---------------------------------------------------------------------------
   Panneau détaillé

   Les finalités sont côte à côte sur grand écran : deux colonnes divisent par
   deux la hauteur du panneau, à contenu égal.
   --------------------------------------------------------------------------- */

.epiona-consent__detail {
	grid-column: 1 / -1;
	margin-top: 2px;
	padding-top: 18px;
	border-top: 1px solid var(--e-line);
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 18px 40px;
	max-height: 46vh;
	overflow-y: auto;
}

/* `display: grid` ci-dessus l'emporte sur l'attribut `hidden` du HTML : sans cette règle,
   le panneau reste ouvert en permanence et le bandeau fait mur. Le JavaScript bascule bien
   `detail.hidden` — c'était le CSS qui le contredisait. */
.epiona-consent__detail[hidden] {
	display: none;
}

.epiona-consent__finalite-tete {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	margin-bottom: 5px;
}

.epiona-consent__switch {
	display: flex;
	align-items: center;
	gap: 14px;
	cursor: pointer;
}

.epiona-consent__switch input {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
}

.epiona-consent__switch-piste {
	flex: none;
	width: 40px;
	height: 20px;
	background: var(--e-field);
	position: relative;
	transition: var(--e-transition);
}

.epiona-consent__switch-piste::after {
	content: "";
	position: absolute;
	top: 3px;
	left: 3px;
	width: 14px;
	height: 14px;
	background: var(--e-surface);
	transition: var(--e-transition);
}

.epiona-consent__switch input:checked + .epiona-consent__switch-piste {
	background: var(--e-gold);
}

.epiona-consent__switch input:checked + .epiona-consent__switch-piste::after {
	left: 23px;
}

.epiona-consent__switch input:disabled + .epiona-consent__switch-piste {
	background: var(--e-text-disabled);
	cursor: not-allowed;
}

.epiona-consent__switch input:focus-visible + .epiona-consent__switch-piste {
	outline: 2px solid var(--e-gold-dark);
	outline-offset: 2px;
}

.epiona-consent__finalite-titre {
	font-family: var(--e-sans);
	font-size: 11.5px;
	font-weight: 400;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--e-text);
}

.epiona-consent__toujours {
	font-family: var(--e-sans);
	font-size: 11px;
	font-weight: 300;
	color: var(--e-text-subtle);
	white-space: nowrap;
}

/* L'indentation aligne le texte sur le titre, pas sur l'interrupteur :
   40 px de piste plus 14 px d'écart. */
.epiona-consent__finalite-texte {
	margin: 0;
	padding-left: 54px;
	font-family: var(--e-sans);
	font-size: 13px;
	font-weight: 300;
	line-height: 1.6;
	color: var(--e-text-muted);
}

.epiona-consent__detail-actions {
	grid-column: 1 / -1;
	display: flex;
	justify-content: flex-end;
}

/* Le lien de révocation, en pied de page : c'est un bouton, il doit passer pour un lien. */
.epiona-consent-rouvrir {
	background: none;
	border: 0;
	padding: 0;
	font: inherit;
	color: inherit;
	cursor: pointer;
	text-align: left;
}

/* ---------------------------------------------------------------------------
   Écrans intermédiaires — une seule colonne de finalités redevient plus lisible
   --------------------------------------------------------------------------- */

@media (max-width: 1100px) {
	.epiona-consent__detail {
		grid-template-columns: 1fr;
		gap: 16px;
	}
}

/* ---------------------------------------------------------------------------
   Mobile — l'endroit où un bandeau mal fait devient un mur
   --------------------------------------------------------------------------- */

@media (max-width: 900px) {
	.epiona-consent__inner {
		grid-template-columns: 1fr;
		gap: 14px;
		padding: 16px 20px 18px;
	}

	.epiona-consent__texte {
		font-size: 13px;
		line-height: 1.55;
	}

	.epiona-consent__actions {
		gap: 10px;
	}

	/* Les deux boutons se partagent la largeur à parts égales : aucun des deux
	   n'est plus facile à atteindre que l'autre. */
	.epiona-consent__btn {
		flex: 1 1 0;
		min-width: 0;
		padding: 14px 12px;
		font-size: 11px;
		letter-spacing: 0.1em;
	}

	.epiona-consent__lien {
		flex: 1 0 100%;
		order: 3;
		text-align: center;
		padding-top: 2px;
	}

	/* Le panneau détaillé peut être long : il défile sans jamais couvrir tout l'écran. */
	.epiona-consent__detail {
		padding-top: 16px;
		max-height: 38vh;
	}

	.epiona-consent__finalite-texte {
		padding-left: 0;
		margin-top: 8px;
		font-size: 12.5px;
	}
}