/**
 * Djerba Arrivals — thème d'affichage (fond sombre).
 *
 * Le tableau s'affiche par défaut dans une COLONNE CENTRÉE à largeur limitée
 * (--dja-maxw, réglable dans l'admin), jamais étalée sur toute la fenêtre.
 * Tout est mis à l'échelle avec la largeur de cette colonne (container queries :
 * unités cqw), donc le rendu est identique sur grand écran et sur mobile, juste
 * plus petit. Le mode « pleine largeur » s'obtient avec la classe .dja-board--full
 * (format="full").
 *
 * Couleurs d'état (alignées sur l'affiche officielle ; ce sont des variables,
 * faciles à changer) :
 *   - landed    : doré      (pour repasser au vert : mettre #16c172)
 *   - now       : vert
 *   - estimated : bleu clair
 *   - delayed   : orangé
 *   - cancelled : rouge
 *   - scheduled : clair atténué
 *   - unknown   : gris
 *
 * Le fond est piloté par --dja-bg (near-black par défaut). Mettez-le à
 * « transparent » si vous placez votre propre image de fond derrière le tableau.
 */

.dja-wrap {
	width: 100%;
}

.dja-board {
	--dja-maxw: 600px;
	--dja-bg: #05060a;
	--dja-title: #e8c66a;   /* doré */
	--dja-city: #ffffff;
	--dja-sched: #c7ccd6;
	--dja-flight: #e3c77a;
	--dja-sep: rgba(255, 255, 255, 0.08);

	position: relative;
	box-sizing: border-box;
	width: 100%;
	max-width: var(--dja-maxw, 600px);
	margin-inline: auto;            /* centré */
	container-type: inline-size;     /* mise à l'échelle = largeur de la colonne */
	background: var(--dja-bg);
	color: var(--dja-city);
	padding: clamp(10px, 4cqw, 30px);
	font-family: "Barlow Condensed", "Oswald", "Roboto Condensed", "Saira Condensed", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	font-feature-settings: "tnum" 1;
}

/* Mode pleine largeur (optionnel). */
.dja-board--full {
	max-width: none;
}

.dja-board *,
.dja-board *::before,
.dja-board *::after {
	box-sizing: inherit;
}

/* ---- En-tête ---- */
.dja-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 2cqw;
	padding-bottom: clamp(8px, 2cqw, 18px);
	margin-bottom: clamp(6px, 1.6cqw, 14px);
	border-bottom: 2px solid var(--dja-sep);
}

.dja-head-left {
	display: flex;
	align-items: center;
	gap: 2.4cqw;
	min-width: 0;
}

.dja-head-icon {
	color: var(--dja-title);
	width: clamp(20px, 6cqw, 44px);
	height: clamp(20px, 6cqw, 44px);
	flex: 0 0 auto;
}

.dja-title {
	color: var(--dja-title);
	font-size: clamp(1.1rem, 8cqw, 3rem);
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	line-height: 1;
}

.dja-head-right {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 0.3cqw;
	min-width: 0;
}

.dja-date {
	color: #f1f3f7;
	font-size: clamp(0.7rem, 3.4cqw, 1.6rem);
	font-weight: 600;
	letter-spacing: 0.1em;
	white-space: nowrap;
}

/* Horloge HH:MM:SS — même style que la date, juste sous celle-ci. */
.dja-clock {
	color: #f1f3f7;
	font-size: clamp(0.7rem, 3.4cqw, 1.6rem);
	font-weight: 600;
	letter-spacing: 0.1em;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

/* ---- Lignes de vols (toujours sur UNE seule ligne, comme l'affiche) ---- */
.dja-rows {
	display: block;
	width: 100%;
}

.dja-row {
	--dja-color: #8a8f98;
	display: grid;
	grid-template-columns:
		clamp(18px, 4.6cqw, 40px)  /* drapeau */
		minmax(0, 1.6fr)           /* ville (flexible) */
		max-content                /* heure prévue */
		max-content                /* état */
		clamp(16px, 4.2cqw, 30px)  /* avion */
		max-content                /* heure réelle */
		max-content                /* n° de vol */
		minmax(0, 1fr);            /* logo (flexible) */
	align-items: center;
	gap: clamp(3px, 1.2cqw, 12px);
	padding: clamp(4px, 1.5cqw, 14px) 2px;
	border-bottom: 1px solid var(--dja-sep);
	font-size: clamp(0.72rem, 3.3cqw, 1.45rem);
}

.dja-col {
	min-width: 0;
	display: flex;
	align-items: center;
	overflow: hidden;
}

.dja-col-flag { justify-content: center; }

.dja-flag {
	width: clamp(18px, 5cqw, 44px);
	height: auto;
	max-height: clamp(14px, 3.6cqw, 32px);
	object-fit: contain;
	border-radius: 2px;
	box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12);
}

.dja-col-city {
	color: var(--dja-city);
	font-weight: 600;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.dja-col-sched {
	color: var(--dja-sched);
	justify-content: center;
	font-weight: 600;
	letter-spacing: 0.04em;
	white-space: nowrap;
}

.dja-col-state {
	color: var(--dja-color);
	justify-content: center;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	white-space: nowrap;
	font-size: 0.92em;
}

.dja-col-plane {
	color: var(--dja-color);
	justify-content: center;
}

.dja-plane {
	display: inline-flex;
	width: clamp(16px, 4.4cqw, 32px);
	height: clamp(16px, 4.4cqw, 32px);
}

.dja-col-plane .dja-plane { transform: rotate(135deg); }

.dja-plane svg { width: 100%; height: 100%; display: block; }

.dja-col-actual {
	color: var(--dja-color);
	justify-content: center;
	font-weight: 700;
	letter-spacing: 0.04em;
	white-space: nowrap;
}

.dja-col-flight {
	color: var(--dja-flight);
	justify-content: center;
	font-weight: 600;
	letter-spacing: 0.05em;
	white-space: nowrap;
}

.dja-col-logo { justify-content: flex-end; }

.dja-logo {
	max-width: 100%;
	width: auto;
	height: auto;
	max-height: clamp(20px, 5.5cqw, 44px);
	object-fit: contain;
}

.dja-logo-text {
	color: #cfd3da;
	font-size: 0.78em;
	font-weight: 600;
	text-align: right;
	line-height: 1.05;
	white-space: normal;
}

/* ---- Couleurs par statut (variables = faciles à changer) ---- */
/* Ponctualité : vert = à l'heure, orangé = retard, turquoise = estimé, gris = Inconnu. */
.dja-row.dja-status--ontime    { --dja-color: #16c172; } /* vert : à l'heure */
.dja-row.dja-status--delayed   { --dja-color: #ff9e2c; } /* orangé : retard */
.dja-row.dja-status--estimated { --dja-color: #2fd6c6; } /* turquoise : estimé */
.dja-row.dja-status--unknown   { --dja-color: #8a8f98; } /* gris : Inconnu */
.dja-row.dja-status--cancelled { --dja-color: #ff4d4d; } /* rouge : annulé */
/* États intermédiaires (avant reclassement) — au cas où. */
.dja-row.dja-status--now       { --dja-color: #16c172; }
.dja-row.dja-status--landed    { --dja-color: #16c172; }
.dja-row.dja-status--scheduled { --dja-color: #8a8f98; }

/* ---- Petite icône discrète « recevoir le planning sur WhatsApp » ---- */
.dja-sub {
	position: absolute;
	top: clamp(8px, 2.6cqw, 18px);
	right: clamp(8px, 2.6cqw, 18px);
	width: clamp(26px, 6.5cqw, 42px);
	height: clamp(26px, 6.5cqw, 42px);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 0;
	border-radius: 50%;
	cursor: pointer;
	color: var(--dja-title);
	background: rgba(255, 255, 255, 0.10);
	transition: background 0.15s ease;
}

.dja-sub:hover { background: rgba(255, 255, 255, 0.20); }

.dja-sub svg { width: 58%; height: 58%; display: block; }

/* ---- États particuliers ---- */
.dja-empty {
	padding: 6cqw 2cqw;
	text-align: center;
	color: #aeb4bf;
	font-size: clamp(0.9rem, 3.4cqw, 1.2rem);
	letter-spacing: 0.04em;
}

.dja-foot {
	margin-top: 2.4cqw;
	text-align: right;
	color: #8a8f98;
	font-size: clamp(0.7rem, 2.6cqw, 0.95rem);
	letter-spacing: 0.04em;
}


/* =========================================================================
 *  Shortcode [djerba_just_landed] — une ligne en surbrillance (en-tête de site)
 * ====================================================================== */
.dja-jl {
	--dja-color: #16c172;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	max-width: 100%;
	box-sizing: border-box;
	padding: 7px 14px;
	border-radius: 10px;
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid color-mix(in srgb, var(--dja-color) 55%, transparent);
	box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2), 0 0 14px color-mix(in srgb, var(--dja-color) 35%, transparent);
	color: #fff;
	font-family: "Barlow Condensed", "Oswald", "Roboto Condensed", system-ui, sans-serif;
	font-size: 0.98rem;
	line-height: 1;
	animation: dja-firefly 2.4s ease-in-out infinite;
}

/* Lueur « luciole » : le pourtour respire doucement. */
@keyframes dja-firefly {
	0%, 100% {
		border-color: color-mix(in srgb, var(--dja-color) 40%, transparent);
		box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2), 0 0 6px color-mix(in srgb, var(--dja-color) 22%, transparent);
	}
	50% {
		border-color: color-mix(in srgb, var(--dja-color) 85%, transparent);
		box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2), 0 0 20px color-mix(in srgb, var(--dja-color) 65%, transparent);
	}
}

@media (prefers-reduced-motion: reduce) {
	.dja-jl { animation: none; }

.dja-jl-tag {
	flex: 0 0 auto;
	font-size: 0.62rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--dja-color);
	border: 1px solid color-mix(in srgb, var(--dja-color) 55%, transparent);
	border-radius: 999px;
	padding: 3px 8px;
}

.dja-jl-flag {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
}

.dja-jl-flag .dja-flag {
	width: auto;
	height: auto;
	max-height: 18px;
	border-radius: 2px;
	box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.15);
}

.dja-jl-city {
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	white-space: nowrap;
}

.dja-jl-time {
	font-weight: 700;
	color: var(--dja-color);
	white-space: nowrap;
}

.dja-jl-flight {
	font-weight: 600;
	color: #e3c77a;
	letter-spacing: 0.04em;
	white-space: nowrap;
}

.dja-jl-logo {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
}

.dja-jl-logo .dja-logo {
	max-height: 64px; /* la hauteur réelle est fixée en ligne (réglage admin) */
	width: auto;
	object-fit: contain;
}

.dja-jl-logo .dja-logo-text {
	color: #cfd3da;
	font-size: 0.8em;
	font-weight: 600;
}

.dja-jl--empty {
	opacity: 0.6;
	--dja-color: #8a8f98;
}

/* Carrousel « just landed » (styles de base aussi en ligne pour l'éditeur Elementor) */
.dja-jlc { box-sizing: border-box; }
.dja-jlc-viewport { -webkit-overflow-scrolling: touch; }
.dja-jlc-nav { transition: background 0.15s ease; }
.dja-jlc-nav:hover { background: rgba(255, 255, 255, 0.20) !important; }
a.dja-jl { text-decoration: none; color: #fff; }
a.dja-jl:hover { filter: brightness(1.08); }