/**
 * Le message de consentement.
 *
 * Une seule feuille pour les huit présentations : elles partagent le panneau,
 * les boutons et le détail, et ne diffèrent que par la façon dont le panneau
 * se pose. Huit feuilles auraient donné huit boutons légèrement différents.
 */

.etck {
	position: fixed;
	z-index: 99999;
	inset: 0;
	pointer-events: none;
	font-size: 15px;
	line-height: 1.5;
}

.etck[hidden] { display: none; }

.etck-veil {
	position: absolute;
	inset: 0;
	background: rgba( 0, 0, 0, 0.6 );
	pointer-events: auto;
}

.etck-panel {
	position: absolute;
	pointer-events: auto;
	box-sizing: border-box;
	max-height: calc( 100vh - 24px );
	overflow-y: auto;
	padding: 20px 22px;
	background: var( --etck-surface, #17171A );
	color: var( --etck-text, #F4F4F5 );
	border-radius: var( --etck-radius, 14px );
	box-shadow: 0 24px 60px -20px rgba( 0, 0, 0, 0.7 );
}

.etck-title {
	margin: 0 0 8px;
	font-size: 1.1em;
	font-weight: 700;
	line-height: 1.25;
}

.etck-message { margin: 0; }
.etck-message p { margin: 0 0 8px; }
.etck-message p:last-child { margin-bottom: 0; }

.etck-message a,
.etck-policy a {
	color: var( --etck-accent, #FF7A1A );
	text-decoration: underline;
}

.etck-policy {
	margin: 10px 0 0;
	font-size: 0.88em;
}

/* --- Le détail --- */

.etck-detail {
	margin-top: 14px;
	padding-top: 14px;
	border-top: 1px solid var( --etck-veil-4, rgba( 255, 255, 255, 0.14 ) );
	display: grid;
	gap: 10px;
}

.etck-detail[hidden] { display: none; }

.etck-choice {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	cursor: pointer;
}

/* Une catégorie qu'on ne peut pas refuser ne doit pas se donner l'air
   cliquable : le curseur le dit avant l'essai. */
.etck-choice.is-locked { cursor: default; opacity: 0.75; }

.etck-choice input {
	flex: none;
	margin-top: 3px;
	width: 17px;
	height: 17px;
	accent-color: var( --etck-accent, #FF7A1A );
}

.etck-choice-text strong { display: block; }

.etck-choice-text em,
.etck-choice-text small {
	display: block;
	font-style: normal;
	font-size: 0.86em;
	opacity: 0.78;
}

.etck-choice-text small { margin-top: 2px; }

/* --- Les boutons --- */

.etck-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 16px;
}

/*
 * La forme vient de la charte du site, avec la nôtre en repli. Elle est lue
 * ici plutôt qu'imposée de l'extérieur : à spécificité égale, c'est la
 * dernière feuille écrite qui gagne, et l'ordre d'impression change dès qu'un
 * greffon de cache les regroupe. Le repli garde l'extension autonome quand
 * ET Astra est absent.
 */
.etck-btn {
	flex: 0 1 auto;
	padding: var( --wia-btn-py, 11px ) var( --wia-btn-px, 18px );
	font: inherit;
	font-weight: var( --wia-btn-weight, 600 );
	line-height: 1.2;
	border: 1px solid transparent;
	border-radius: var( --wia-btn-radius, calc( var( --etck-radius, 14px ) * 0.6 ) );
	cursor: pointer;
	transition: transform 0.12s, opacity 0.12s;
}

.etck-btn:hover { transform: translateY( -1px ); }
.etck-btn[hidden] { display: none; }

.etck-btn--main {
	background: var( --etck-accent, #FF7A1A );
	color: var( --etck-on-accent, #0B0B0C );
}

/*
 * « Refuser » a la même taille et le même poids que « accepter ». Le rendre
 * plus discret serait la faute que la CNIL sanctionne le plus souvent, et une
 * feuille de style est un endroit facile où la commettre sans y penser.
 */
.etck-btn--plain {
	background: var( --etck-veil-1, rgba( 255, 255, 255, 0.12 ) );
	color: inherit;
	border-color: var( --etck-veil-2, rgba( 255, 255, 255, 0.22 ) );
}

.etck-btn--ghost {
	background: none;
	color: inherit;
	border-color: var( --etck-veil-3, rgba( 255, 255, 255, 0.28 ) );
	margin-right: auto;
}

/* --- Les huit présentations --- */

.etck-bar-bottom .etck-panel,
.etck-bar-top .etck-panel {
	left: 12px;
	right: 12px;
	width: auto;
	max-width: none;
}

.etck-bar-bottom .etck-panel { bottom: 12px; }
.etck-bar-top .etck-panel { top: 12px; }

.etck-box-left .etck-panel,
.etck-box-right .etck-panel {
	bottom: 16px;
	width: min( 420px, calc( 100vw - 32px ) );
}

.etck-box-left .etck-panel { left: 16px; }
.etck-box-right .etck-panel { right: 16px; }

.etck-modal .etck-panel {
	top: 50%;
	left: 50%;
	transform: translate( -50%, -50% );
	width: min( 560px, calc( 100vw - 32px ) );
}

.etck-drawer .etck-panel {
	top: 0;
	right: 0;
	bottom: 0;
	width: min( 420px, 100vw );
	max-height: 100vh;
	border-radius: var( --etck-radius, 14px ) 0 0 var( --etck-radius, 14px );
}

.etck-wall .etck-panel {
	inset: 0;
	width: auto;
	max-height: 100vh;
	border-radius: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 40px max( 24px, calc( 50vw - 320px ) );
}

/*
 * La pastille n'affiche rien tant qu'on ne la touche pas : le panneau reste
 * masqué et c'est le bouton de réouverture qui tient lieu de message.
 */
.etck-pill .etck-panel {
	bottom: 16px;
	left: 16px;
	width: min( 420px, calc( 100vw - 32px ) );
}

/* --- La pastille de réouverture --- */

.etck-reopen {
	position: fixed;
	left: 16px;
	bottom: 16px;
	z-index: 99998;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 9px 14px;
	font: inherit;
	font-size: 13px;
	background: var( --etck-surface, #17171A );
	color: var( --etck-text, #F4F4F5 );
	border: 1px solid var( --etck-veil-2, rgba( 255, 255, 255, 0.18 ) );
	border-radius: 999px;
	box-shadow: 0 10px 26px -14px rgba( 0, 0, 0, 0.8 );
	cursor: pointer;
}

.etck-reopen[hidden] { display: none; }

/*
 * Le repere de fin de page. Il ne se voit pas : sa seule raison d'etre est
 * d'etre observe. Une hauteur d'un pixel suffit — a zero, certains
 * navigateurs ne le signalent jamais.
 */
.etck-end {
	height: 1px;
	margin-top: -1px;
	pointer-events: none;
}

/*
 * Arrive en bas, la pastille s'efface plutot que de disparaitre : elle
 * recouvre la derniere ligne du pied de page, et la reprendre en remontant
 * doit se faire sans que la page saute.
 *
 * Seulement sous cette largeur : sur un ecran large, le pied de page est
 * assez ample pour que la pastille ne cache rien.
 */
@media (max-width: 782px) {

	.etck-at-end .etck-reopen {
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
		transform: translateY(8px);
	}

	.etck-reopen {
		transition: opacity .2s, visibility .2s, transform .2s;
	}
}

@media (prefers-reduced-motion: reduce) {
	.etck-reopen { transition: opacity .2s, visibility .2s; }
}

.etck-reopen-icon {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var( --etck-accent, #FF7A1A );
}

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

/* --- Contenus mis en attente --- */

/*
 * Un cadre sans adresse n'affiche rien, pas même sa place : sans cette taille
 * minimale, la page se réorganiserait au moment de l'acceptation.
 */
iframe[data-etck-held] {
	display: block;
	width: 100%;
	min-height: 200px;
	background: repeating-linear-gradient( 45deg,
		var( --etck-surface, #17171A ), var( --etck-surface, #17171A ) 10px,
		var( --etck-veil-1, #1E1E22 ) 10px, var( --etck-veil-1, #1E1E22 ) 20px );
	border: 1px solid var( --etck-veil-1, rgba( 255, 255, 255, 0.12 ) );
	border-radius: 10px;
}

/* Le corps ne défile plus derrière une présentation qui recouvre la page. */
body.etck-open:has( .etck-modal:not( [hidden] ) ),
body.etck-open:has( .etck-wall:not( [hidden] ) ) {
	overflow: hidden;
}

@media ( max-width: 600px ) {

	.etck-panel { padding: 16px 16px 18px; }

	.etck-actions .etck-btn {
		flex: 1 1 100%;
		text-align: center;
	}

	.etck-btn--ghost { margin-right: 0; order: 3; }
}

@media ( prefers-reduced-motion: reduce ) {
	.etck-btn:hover { transform: none; }
}

/* --- Effets d'apparition et de disparition --- */

/*
 * L'effet est porte par une classe separee de la presentation : les huit
 * dispositions et les quatre effets se combinent ainsi sans qu'on ait a
 * ecrire trente-deux jeux de regles.
 *
 * L'element anime est le panneau, jamais son conteneur : celui-ci couvre tout
 * l'ecran, et l'animer ferait glisser le voile avec lui.
 */
.etck-panel,
.etck-veil {
	transition:
		opacity var( --etck-ms, 260ms ) ease,
		transform var( --etck-ms, 260ms ) ease;
}

/*
 * L'etat de depart et l'etat de sortie sont les memes : c'est ce qui permet a
 * la disparition d'etre l'apparition jouee a l'envers, sans regles en double.
 */
.etck-fx-fade.is-entering .etck-panel,
.etck-fx-fade.is-leaving .etck-panel,
.etck-fx-slide.is-entering .etck-panel,
.etck-fx-slide.is-leaving .etck-panel,
.etck-fx-zoom.is-entering .etck-panel,
.etck-fx-zoom.is-leaving .etck-panel {
	opacity: 0;
}

.etck.is-entering .etck-veil,
.etck.is-leaving .etck-veil {
	opacity: 0;
}

/* Glissement : la direction suit la presentation, elle ne se regle pas. */
.etck-fx-slide.etck-bar-bottom.is-entering .etck-panel,
.etck-fx-slide.etck-bar-bottom.is-leaving .etck-panel,
.etck-fx-slide.etck-box-left.is-entering .etck-panel,
.etck-fx-slide.etck-box-left.is-leaving .etck-panel,
.etck-fx-slide.etck-box-right.is-entering .etck-panel,
.etck-fx-slide.etck-box-right.is-leaving .etck-panel,
.etck-fx-slide.etck-pill.is-entering .etck-panel,
.etck-fx-slide.etck-pill.is-leaving .etck-panel {
	transform: translateY( 24px );
}

.etck-fx-slide.etck-bar-top.is-entering .etck-panel,
.etck-fx-slide.etck-bar-top.is-leaving .etck-panel {
	transform: translateY( -24px );
}

.etck-fx-slide.etck-drawer.is-entering .etck-panel,
.etck-fx-slide.etck-drawer.is-leaving .etck-panel {
	transform: translateX( 100% );
}

/* La modale est deja centree par une translation : la sienne s'y ajoute. */
.etck-fx-slide.etck-modal.is-entering .etck-panel,
.etck-fx-slide.etck-modal.is-leaving .etck-panel {
	transform: translate( -50%, calc( -50% + 24px ) );
}

.etck-fx-slide.etck-wall.is-entering .etck-panel,
.etck-fx-slide.etck-wall.is-leaving .etck-panel {
	transform: translateY( 3vh );
}

/* Ouverture depuis le centre. */
.etck-fx-zoom.is-entering .etck-panel,
.etck-fx-zoom.is-leaving .etck-panel {
	transform: scale( 0.94 );
}

.etck-fx-zoom.etck-modal.is-entering .etck-panel,
.etck-fx-zoom.etck-modal.is-leaving .etck-panel {
	transform: translate( -50%, -50% ) scale( 0.94 );
}

/*
 * Sans effet, aucune transition : laisser la duree jouer donnerait un fondu
 * de zero, c'est-a-dire un effet qu'on avait dit ne pas vouloir.
 */
.etck-fx-none .etck-panel,
.etck-fx-none .etck-veil { transition: none; }

/*
 * Un visiteur qui a demande moins d'animations dans son systeme ne doit pas
 * voir la seule fenetre qu'il ne peut pas eviter s'animer quand meme.
 */
@media ( prefers-reduced-motion: reduce ) {

	.etck-panel,
	.etck-veil {
		transition: none !important;
	}

	.etck.is-entering .etck-panel,
	.etck.is-leaving .etck-panel,
	.etck.is-entering .etck-veil,
	.etck.is-leaving .etck-veil {
		opacity: 1;
		transform: none;
	}
}