/*
 * Djerba Arrivals — animation « split-flap ».
 *
 * Fichier SÉPARÉ, chargé uniquement quand l'option est active. Tant qu'elle
 * est désactivée, djerba-arrivals.css reste seul en piste et le rendu est
 * identique au bit près à celui d'avant l'ajout de cette fonctionnalité.
 *
 * Principe : chaque caractère est un volet coupé horizontalement en deux. La
 * moitié haute bascule vers l'avant sur une charnière centrale et retombe sur
 * la moitié basse, comme un tableau Solari.
 */

/*
 * Les volets restent visibles EN PERMANENCE, mais sans largeur imposée : chaque
 * caractère garde son avance Oswald naturelle. Mesuré sur les villes du
 * tableau, une largeur fixe élargissait les colonnes de 5 à 31 % selon le mot
 * (« NICE » +31 %, « LUXEMBOURG » +8 %) — aucune valeur unique ne convenait,
 * les mots courts à lettres étroites et les mots longs à lettres larges tirant
 * en sens inverse. La grille des volets suffit à porter l'illusion mécanique ;
 * la chasse fixe n'y est pas nécessaire.
 */
.dja-flap {
	display: inline-flex;
	vertical-align: baseline;
	/*
	 * Ni « gap » ni « padding » : mesurée en navigateur, la somme des volets
	 * vaut 132,69 px là où le texte en fait 132,64 — l'écart réel est de
	 * 0,05 px. Tout élargissement observé venait de l'espacement ajouté, qui
	 * décalait les colonnes de 11 px en cascade. La séparation entre volets est
	 * obtenue par une bordure INTERNE, qui ne consomme pas de largeur.
	 */
}

.dja-flap-c {
	position: relative;
	height: var(--dja-flap-h, 1.15em);
	perspective: 200px;
	flex: 0 0 auto;
	text-align: center;
	line-height: var(--dja-flap-h, 1.15em);
	/* Filet : si le gabarit venait à ne rien mesurer, le volet garde une
	   largeur plausible au lieu de s'effondrer sur ses voisins. */
	min-width: 0.28em;
}

/*
 * Gabarit qui donne au volet la largeur EXACTE de son caractère en Oswald.
 *
 * Il occupe le flux NORMAL de la cellule et c'est lui qui la dimensionne : les
 * deux moitiés du volet sont en position absolue et ne comptent donc pas dans
 * le calcul de largeur. Il était auparavant de hauteur nulle avec
 * « overflow: hidden » — Safari donnait alors une largeur nulle à la boîte, les
 * volets se retrouvaient tous à la même position et les lettres se
 * superposaient. Il conserve désormais sa hauteur, et seule sa couleur est
 * transparente : la géométrie est calculée par le moteur exactement comme pour
 * du texte ordinaire.
 */
.dja-flap-w {
	display: block;
	white-space: pre;
	pointer-events: none;
	/*
	 * Le gabarit MESURE, il ne s'affiche pas. « color: transparent » ne
	 * suffisait pas : le glyphe restait peint, et le lissage sous-pixel des
	 * écrans mobiles le rendait visible — d'où « MMMAAARRR… », chaque lettre
	 * apparaissant une fois pour le gabarit et deux fois pour les moitiés du
	 * volet. On le retire du rendu tout en gardant sa largeur, en le décalant
	 * hors de la zone visible du volet, qui masque son débordement.
	 */
	color: transparent;
	visibility: hidden;
}

/* Les deux moitiés fixes. Elles héritent de la couleur du statut via
   --dja-color, donc un vol vert reste vert pendant toute l'animation. */
.dja-flap-h {
	position: absolute;
	left: 0;
	right: 0;
	height: 50%;
	overflow: hidden;
	background: var(--dja-flap-bg, rgba(255, 255, 255, 0.06));
	box-shadow: inset calc( -1 * var(--dja-flap-gap, 1px) ) 0 0 var(--dja-flap-sep, transparent);
	border-radius: 1px;
}

.dja-flap-t {
	top: 0;
	border-bottom: 1px solid var(--dja-flap-seam, rgba(0, 0, 0, 0.55));
}

.dja-flap-b {
	bottom: 0;
}

.dja-flap-h > span {
	position: absolute;
	left: 0;
	right: 0;
	height: 200%;
	display: block;
}

.dja-flap-t > span {
	top: 0;
}

.dja-flap-b > span {
	top: -100%;
}

/* Le volet mobile : même géométrie que la moitié haute, pivotant sur son bord
   inférieur. backface-visibility évite le miroir au-delà de 90°. */
.dja-flap-m {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	height: 50%;
	overflow: hidden;
	background: var(--dja-flap-bg-active, rgba(255, 255, 255, 0.1));
	border-radius: 1px 1px 0 0;
	border-bottom: 1px solid var(--dja-flap-seam, rgba(0, 0, 0, 0.55));
	transform-origin: bottom;
	backface-visibility: hidden;
	z-index: 2;
}

.dja-flap-m > span {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 200%;
	display: block;
}

/*
 * Mouvement réduit. Réglage SYSTÈME de la personne, pas une option
 * d'administration : une animation de cette intensité peut provoquer un
 * malaise chez les personnes sensibles au mouvement vestibulaire.
 */
@media (prefers-reduced-motion: reduce) {
	/*
	 * Les volets RESTENT affichés : ils font partie de l'apparence du tableau,
	 * pas de l'animation. Seule la BASCULE est supprimée — c'est le mouvement
	 * qui gêne les personnes sensibles, pas la grille statique.
	 */
	.dja-flap-m {
		display: none !important;
	}
}

/*
 * Intensité des volets au repos, réglable en administration. Seules les
 * variables changent : la structure est la même dans les trois cas.
 */
.dja-board--flap-discret {
	--dja-flap-bg: rgba(255, 255, 255, 0.04);
	--dja-flap-bg-active: rgba(255, 255, 255, 0.07);
	--dja-flap-seam: rgba(0, 0, 0, 0.35);
	--dja-flap-gap: 0px;
}

.dja-board--flap-moyen {
	--dja-flap-bg: rgba(255, 255, 255, 0.07);
	--dja-flap-bg-active: rgba(255, 255, 255, 0.11);
	--dja-flap-seam: rgba(0, 0, 0, 0.55);
	--dja-flap-gap: 1px;
	--dja-flap-sep: rgba(0, 0, 0, 0.35);
}

/* Proche de la photo d'origine : volets nettement détachés du fond. */
.dja-board--flap-marque {
	--dja-flap-bg: rgba(255, 255, 255, 0.12);
	--dja-flap-bg-active: rgba(255, 255, 255, 0.18);
	--dja-flap-seam: rgba(0, 0, 0, 0.8);
	--dja-flap-gap: 2px;
	--dja-flap-sep: rgba(0, 0, 0, 0.6);
}

/*
 * Cellules différées.
 *
 * Quand l'animation est active, le serveur envoie ces cellules VIDES, leur
 * texte vivant dans « data-dja-txt ». Rien de visible n'est donc transmis, et
 * aucun texte ne peut s'afficher avant les volets — y compris si un plugin de
 * cache déplace le JavaScript du <head> vers le pied de page, ce qui annulait
 * toute tentative de masquage par script.
 *
 * La hauteur est préservée pour que la ligne ne se replie pas avant sa pose.
 */
.dja-defer {
	min-height: 1em;
}