/**
 * Ad'on :: Volet coulissant
 *
 * Géométrie et comportement, communs à tous les volets du site. Ce qui varie
 * d'un volet à l'autre — taille, couleurs, durée — arrive par les variables
 * écrites sur l'enveloppe par la feuille du module, ou par la feuille du site.
 *
 * @package Adon Components
 * @since   1.0.0
 */

/* --------------------------------------------------------- Enveloppe ---- */

/*
 * Les valeurs par défaut sont écrites en repli dans chaque `var()`, et non
 * déclarées ici en tête de fichier. Ce n'est pas un détail de style : la
 * feuille du module pose ses variables sur ce même élément, avec la même
 * spécificité, et c'est alors l'ordre des feuilles dans la page qui tranche —
 * un ordre que WordPress et le constructeur décident, pas nous. Un jour sur
 * deux, les réglages du module auraient perdu contre ces valeurs par défaut.
 */
.adon-volet-enveloppe {
	position: fixed;
	top: var(--volet-decalage, 0px);
	right: 0;
	bottom: 0;
	left: 0;
	z-index: var(--volet-zindex, 9990);

	/*
	 * L'enveloppe couvre l'écran en permanence, y compris volet fermé pendant
	 * l'animation de sortie. Elle ne doit donc jamais intercepter un clic :
	 * seuls le voile et le panneau le font, et seulement une fois ouverts.
	 */
	pointer-events: none;
}

/*
 * `hidden` est retiré par le script à l'ouverture et reposé à la fin de
 * l'animation de fermeture. Entre les deux, le volet reste dans l'arbre
 * d'accessibilité — un panneau `display: none` disparaîtrait d'un coup au lieu
 * de sortir de l'écran.
 */
.adon-volet-enveloppe[hidden] {
	display: none;
}

/* ------------------------------------------------------------- Voile ---- */

.adon-volet__voile {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background: var(--volet-voile, rgba(0, 0, 0, 0.45));
	opacity: 0;
	transition: opacity var(--volet-duree, 300ms) ease;
	pointer-events: none;
}

/*
 * Le voile capte les clics dès que le volet est ouvert, même quand la fermeture
 * au clic extérieur est désactivée : c'est ce qui empêche d'actionner la page
 * derrière un volet modal. Sans lui, un visiteur au clavier sortirait du volet
 * par la tabulation et un visiteur à la souris cliquerait un lien qu'il ne voit
 * qu'à moitié.
 */
.adon-volet-enveloppe.est-ouvert .adon-volet__voile,
.adon-volet-enveloppe--ouvert .adon-volet__voile {
	opacity: 1;
	pointer-events: auto;
}

/* ----------------------------------------------------------- Panneau ---- */

.adon-volet__panneau {
	position: absolute;
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	max-width: 100%;
	max-height: 100%;
	padding: var(--volet-marge, 24px);
	background: var(--volet-fond, #ffffff);
	box-shadow: var(--volet-ombre, 0 0 3rem rgba(0, 0, 0, 0.25));
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;

	/*
	 * Le défilement du volet ne se propage pas à la page quand il arrive en
	 * butée. Sans cela, continuer à faire défiler un menu mobile arrivé en bas
	 * fait défiler la page derrière — qui se retrouve ailleurs à la fermeture.
	 */
	overscroll-behavior: contain;

	pointer-events: auto;
	transition: transform var(--volet-duree, 300ms) cubic-bezier(0.22, 0.61, 0.36, 1);
}

.adon-volet__contenu {
	flex: 1 1 auto;
	min-height: 0;
}

/* --- Les quatre côtés ---------------------------------------------------- */

.adon-volet-enveloppe--gauche .adon-volet__panneau,
.adon-volet-enveloppe--droite .adon-volet__panneau {
	top: 0;
	bottom: 0;
	width: var(--volet-taille, 320px);
}

.adon-volet-enveloppe--gauche .adon-volet__panneau {
	left: 0;
	transform: translateX(-100%);
}

.adon-volet-enveloppe--droite .adon-volet__panneau {
	right: 0;
	transform: translateX(100%);
}

.adon-volet-enveloppe--haut .adon-volet__panneau,
.adon-volet-enveloppe--bas .adon-volet__panneau {
	left: 0;
	right: 0;
	height: var(--volet-taille, 320px);
}

.adon-volet-enveloppe--haut .adon-volet__panneau {
	top: 0;
	transform: translateY(-100%);
}

.adon-volet-enveloppe--bas .adon-volet__panneau {
	bottom: 0;
	transform: translateY(100%);
}

/*
 * Plein écran : la taille réglée ne s'applique plus, le panneau occupe toute
 * l'enveloppe — donc tout l'écran, décalage déduit.
 */
.adon-volet-enveloppe--plein .adon-volet__panneau {
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	width: auto;
	height: auto;
	max-width: none;
	max-height: none;
}

.adon-volet-enveloppe.est-ouvert .adon-volet__panneau,
.adon-volet-enveloppe--ouvert .adon-volet__panneau {
	transform: translate(0, 0);
}

/*
 * Pendant le balayage, le panneau suit le doigt : la transition est coupée,
 * sans quoi chaque déplacement serait animé sur la durée réglée et le geste
 * traînerait derrière le doigt.
 */
.adon-volet-enveloppe.est-glisse .adon-volet__panneau {
	transition: none;
}

/* ------------------------------------------------------- Déclencheur ---- */

.adon-volet {
	--volet-declencheur-taille: 1.75em;
}

.adon-volet__declencheur {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	margin: 0;
	padding: 0.25em;
	border: 0;
	background: none;

	/*
	 * Couleur héritée, jamais posée. Le déclencheur vit dans l'en-tête ou dans
	 * une rangée qui porte une classe de charte — .bgfonce, .accent1 — et ces
	 * classes colorent ce qu'elles contiennent. Une couleur écrite ici les
	 * contredirait, et le contraste mesuré pour cet endroit ne vaudrait plus.
	 */
	color: inherit;
	font: inherit;
	line-height: 1;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

.adon-volet__declencheur:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
}

.adon-volet__declencheur--sans-libelle .adon-volet__libelle {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

.adon-volet__icone {
	font-size: var(--volet-declencheur-taille);
}

/* --- Le burger, et sa croix ---------------------------------------------- */

.adon-volet__burger {
	width: var(--volet-declencheur-taille);
	height: var(--volet-declencheur-taille);
	flex: 0 0 auto;
}

.adon-volet__barre {
	fill: currentColor;

	/*
	 * `fill-box` cadre la transformation sur la barre elle-même et non sur le
	 * SVG entier : sans lui, `transform-origin: center` désigne le centre du
	 * dessin, et les barres pivotent autour d'un point qui n'est pas le leur.
	 */
	transform-box: fill-box;
	transform-origin: center;
	transition: transform var(--volet-duree, 300ms) cubic-bezier(0.22, 0.61, 0.36, 1),
		opacity calc(var(--volet-duree, 300ms) / 2) ease;
}

/*
 * L'état est lu sur `aria-expanded`, pas sur une classe ajoutée en plus. Une
 * seule source de vérité : si l'animation joue, c'est que l'attribut est à
 * jour, donc que les lecteurs d'écran annoncent la bonne chose.
 */
.adon-volet__declencheur[aria-expanded="true"] .adon-volet__barre--haute {
	transform: translateY(6.875px) rotate(45deg);
}

.adon-volet__declencheur[aria-expanded="true"] .adon-volet__barre--milieu {
	opacity: 0;
	transform: scaleX(0.1);
}

.adon-volet__declencheur[aria-expanded="true"] .adon-volet__barre--basse {
	transform: translateY(-6.875px) rotate(-45deg);
}

/* --------------------------------------------------- Croix du panneau --- */

.adon-volet__fermer {
	flex: 0 0 auto;
	align-self: flex-end;
	margin: 0 0 0.5em;
	padding: 0.25em;
	border: 0;
	background: none;
	color: inherit;
	line-height: 1;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

.adon-volet__fermer:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
}

.adon-volet__croix {
	width: 1.5em;
	height: 1.5em;
	display: block;
}

.adon-volet__fermer-libelle {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

/* -------------------------------------------- Défilement de la page ----- */

/*
 * Verrou posé sur <html> et sur <body> : selon le navigateur et selon le thème,
 * c'est l'un ou l'autre qui porte le défilement. Le compensateur remplace la
 * largeur de la barre de défilement escamotée, sans quoi toute la page se
 * décale d'une quinzaine de pixels à l'ouverture — un saut que l'on remarque.
 */
html.adon-volet-verrou,
html.adon-volet-verrou body {
	overflow: hidden;
}

html.adon-volet-verrou body {
	padding-right: var(--volet-compensation, 0px);
}

/* ----------------------------------------------------- Contraste élevé -- */

body.contraste-eleve .adon-volet__panneau {
	background: #ffffff;
	color: #000000;
	border: 2px solid #000000;
	box-shadow: none;
}

body.contraste-eleve .adon-volet__voile {
	background: rgba(0, 0, 0, 0.85);
}

body.contraste-eleve .adon-volet__declencheur:focus-visible,
body.contraste-eleve .adon-volet__fermer:focus-visible {
	outline: 3px solid #ffff00;
	outline-offset: 3px;
}

/* --------------------------------------------- Animations réduites ------ */

/*
 * Le volet arrive toujours, mais sans glisser. Ni le pictogramme ni le voile ne
 * sont animés non plus : le réglage système vaut pour tout ce que la page
 * anime, pas seulement pour ce qui traverse l'écran.
 */
@media (prefers-reduced-motion: reduce) {

	.adon-volet__panneau,
	.adon-volet__voile,
	.adon-volet__barre {
		transition-duration: 1ms;
	}
}

/* ------------------------------------------------------ Constructeur ---- */

.adon-volet-module--fantome {
	padding: 0.5em 0.75em;
	border: 1px dashed currentColor;
	opacity: 0.45;
	font-style: italic;
}

/* ------------------------------------------------------------ Balayage -- */

/*
 * `pan-y` rend le geste horizontal au script tout en laissant le défilement
 * vertical au navigateur : un menu mobile plus haut que l'écran continue de se
 * faire dérouler au doigt, et le balayage latéral le referme. Les volets qui
 * entrent par le haut ou par le bas ne peuvent pas recevoir le même traitement
 * — le geste de fermeture et le geste de défilement y sont le même geste. Leur
 * balayage n'est donc engagé que lorsque le contenu tient sans défilement,
 * décision prise à l'ouverture par le script.
 */
.adon-volet-enveloppe[data-swipe="1"][data-cote="gauche"] .adon-volet__panneau,
.adon-volet-enveloppe[data-swipe="1"][data-cote="droite"] .adon-volet__panneau {
	touch-action: pan-y;
}