/*
Theme Name: El Andante
Theme URI: https://elandantefilm.com
Description: Thème du film documentaire El Andante. Page d'accueil en français, espagnol et portugais, noir et blanc, plans fixes.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: elandante
*/

:root {
	--ea-bg: #0d0d0d;
	--ea-panel: #1a1a1a;
	--ea-line: #262626;
	--ea-text: #ededed;
	--ea-soft: #d6d6d6;
	--ea-muted: #b5b5b5;
	--ea-label: #9a9a9a;
	--ea-sans: "Archivo", system-ui, sans-serif;
	--ea-mono: "IBM Plex Mono", ui-monospace, monospace;
	--ea-max: 1280px;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
	margin: 0;
	background: var(--ea-bg);
	color: var(--ea-text);
	font-family: var(--ea-sans);
	font-weight: 300;
	-webkit-font-smoothing: antialiased;
}

a { color: var(--ea-text); }
a:hover { color: #fff; }
a:focus-visible, button:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

img { max-width: 100%; height: auto; display: block; }

/* ---- Langues ---- */
[data-l] { display: none; }
html[data-lang="fr"] [data-l="fr"],
html[data-lang="es"] [data-l="es"],
html[data-lang="pt"] [data-l="pt"] { display: inline; }

.screen-reader-text {
	position: absolute !important; width: 1px; height: 1px; overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px); white-space: nowrap;
}
.skip-link:focus {
	clip: auto; width: auto; height: auto; z-index: 100; top: 8px; left: 8px;
	padding: 12px 16px; background: #fff; color: #000;
}

/* ---- Structure ---- */
.ea-wrap { max-width: var(--ea-max); margin: 0 auto; padding-left: 2rem; padding-right: 2rem; }
.ea-section { border-top: 1px solid var(--ea-line); }
.ea-section > .ea-wrap { padding-top: 96px; padding-bottom: 96px; }

.ea-label {
	font-family: var(--ea-mono); font-size: 12px; letter-spacing: 0.12em;
	color: var(--ea-label); text-transform: uppercase;
}
.ea-h2 {
	margin: 0; font-size: 40px; font-weight: 700; font-stretch: 112%; line-height: 1.05;
}
.ea-two {
	display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 48px 80px;
}
.ea-two__head { display: flex; flex-direction: column; gap: 12px; }
.ea-prose {
	display: flex; flex-direction: column; gap: 22px; max-width: 620px;
	font-size: 19px; line-height: 1.65; color: var(--ea-soft);
}
.ea-prose p { margin: 0; }

/* ---- En-tête ---- */
.ea-header > .ea-wrap {
	padding-top: 28px; padding-bottom: 28px;
	display: flex; flex-wrap: wrap; gap: 16px 40px; justify-content: space-between; align-items: center;
}
.ea-brand {
	text-decoration: none; font-weight: 700; font-stretch: 125%; letter-spacing: 0.32em; font-size: 14px;
}
.ea-header__right { display: flex; flex-wrap: wrap; gap: 8px 40px; align-items: center; }
.ea-nav { display: flex; flex-wrap: wrap; gap: 0 32px; font-family: var(--ea-mono); font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; }
.ea-nav a { color: var(--ea-muted); text-decoration: none; padding: 12px 0; display: inline-block; }
.ea-nav a:hover { color: #fff; }

.ea-lang { display: flex; gap: 4px; font-family: var(--ea-mono); font-size: 13px; letter-spacing: 0.08em; }
.ea-lang button {
	min-width: 44px; height: 44px; padding: 0 10px; cursor: pointer;
	border: 1px solid #3a3a3a; background: transparent; color: var(--ea-muted);
	font: inherit; letter-spacing: inherit;
}
.ea-lang button[aria-pressed="true"] { border-color: var(--ea-text); background: var(--ea-text); color: var(--ea-bg); }

/* ---- Ouverture ---- */
.ea-hero {
	position: relative; min-height: 680px; background: var(--ea-panel); border: 1px solid var(--ea-line);
	display: flex; flex-direction: column; justify-content: space-between; padding: 32px; overflow: hidden;
}
.ea-hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1); }
.ea-walker { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.ea-hero.has-img::after {
	content: ""; position: absolute; inset: 0;
	background: linear-gradient(to top, rgba(0,0,0,.7), rgba(0,0,0,0) 55%);
}
.ea-hero > *:not(img) { position: relative; z-index: 1; }
.ea-hero__top {
	display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px;
	font-family: var(--ea-mono); font-size: 12px; color: var(--ea-label); letter-spacing: 0.08em;
}
.ea-hero.has-img .ea-hero__top { color: #d0d0d0; }
.ea-hero__bottom { display: flex; flex-direction: column; gap: 20px; }
.ea-title {
	margin: 0; font-size: clamp(64px, 13vw, 196px); line-height: 0.86; font-weight: 800;
	font-stretch: 125%; letter-spacing: -0.01em; color: #f4f4f4;
}
.ea-byline {
	margin: 0; font-family: var(--ea-mono); font-size: 14px; letter-spacing: 0.1em;
	text-transform: uppercase; color: #c8c8c8;
}

/* ---- Logline ---- */
.ea-logline > .ea-wrap { padding-top: 160px; padding-bottom: 140px; }
.ea-logline p {
	margin: 0; max-width: 980px; font-size: clamp(30px, 4vw, 56px); line-height: 1.18; letter-spacing: -0.01em;
}

/* ---- Portrait de Dani ---- */
.ea-portrait { margin: 28px 0 0; max-width: 320px; display: flex; flex-direction: column; gap: 10px; }
.ea-portrait img { width: 100%; height: auto; border: 1px solid var(--ea-line); filter: grayscale(1); }
.ea-portrait figcaption { font-family: var(--ea-mono); font-size: 12px; letter-spacing: 0.08em; color: var(--ea-label); text-transform: uppercase; }

/* ---- Citation ---- */
.ea-quote > .ea-wrap { padding-top: 120px; padding-bottom: 120px; display: flex; flex-direction: column; gap: 20px; align-items: center; text-align: center; }
.ea-quote blockquote { margin: 0; font-size: clamp(28px, 3.6vw, 48px); font-style: italic; line-height: 1.25; max-width: 900px; }
.ea-quote p.ea-gloss { margin: 0; font-family: var(--ea-mono); font-size: 13px; letter-spacing: 0.1em; color: var(--ea-label); }

/* ---- Images ---- */
.ea-images__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 16px; margin-bottom: 40px; }
.ea-images__head p { margin: 0; font-size: 16px; color: var(--ea-muted); max-width: 420px; line-height: 1.6; }
.ea-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px; }
.ea-frame { margin: 0; display: flex; flex-direction: column; gap: 10px; }
.ea-frame__img, .ea-frame__ph {
	aspect-ratio: 16 / 9; width: 100%; background: var(--ea-panel); border: 1px solid var(--ea-line);
}
.ea-frame__img { object-fit: cover; filter: grayscale(1); }
.ea-frame__ill { aspect-ratio: 16 / 9; width: 100%; border: 1px solid var(--ea-line); overflow: hidden; }
.ea-frame__ill svg { width: 100%; height: 100%; display: block; }
.ea-frame__ph {
	display: flex; align-items: center; justify-content: center; padding: 16px; text-align: center;
	font-family: var(--ea-mono); font-size: 12px; color: var(--ea-label); letter-spacing: 0.06em;
}
.ea-frame figcaption {
	display: flex; justify-content: space-between; gap: 12px;
	font-family: var(--ea-mono); font-size: 12px; color: var(--ea-label); letter-spacing: 0.08em;
}

/* ---- Bande-annonce ---- */
.ea-trailer__box {
	margin-top: 32px; aspect-ratio: 16 / 9; background: var(--ea-panel); border: 1px solid var(--ea-line);
	display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px;
	font-family: var(--ea-mono); font-size: 12px; letter-spacing: 0.1em; color: var(--ea-label);
}
.ea-trailer__embed { margin-top: 32px; }
.ea-trailer__embed iframe { width: 100%; height: auto; aspect-ratio: 16 / 9; border: 0; display: block; }
.ea-play {
	width: 88px; height: 88px; border-radius: 50%; border: 1px solid var(--ea-text);
	display: flex; align-items: center; justify-content: center; color: var(--ea-text);
}

/* ---- Fiche technique ---- */
.ea-credits { margin: 0; display: flex; flex-direction: column; max-width: 620px; width: 100%; }
.ea-credits div { display: flex; justify-content: space-between; gap: 24px; padding: 16px 0; border-bottom: 1px solid var(--ea-line); }
.ea-credits dt { font-family: var(--ea-mono); font-size: 13px; letter-spacing: 0.08em; color: var(--ea-label); text-transform: uppercase; }
.ea-credits dd { margin: 0; font-size: 17px; text-align: right; }

/* ---- Contact / pied de page ---- */
.ea-contact > .ea-wrap { padding-top: 120px; padding-bottom: 64px; display: flex; flex-direction: column; gap: 20px; }
.ea-contact__line { margin: 0; font-size: clamp(28px, 3.6vw, 48px); line-height: 1.2; max-width: 860px; }
.ea-contact__mail { font-size: 20px; text-underline-offset: 6px; padding: 10px 0; align-self: flex-start; }
.ea-footer > .ea-wrap {
	padding-top: 32px; padding-bottom: 48px;
	display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px;
	font-family: var(--ea-mono); font-size: 12px; letter-spacing: 0.08em; color: var(--ea-label);
}
.ea-footer a { color: var(--ea-label); padding: 12px 0; }
.ea-footer a:hover { color: #fff; }
.ea-footer__links { display: flex; gap: 24px; flex-wrap: wrap; }

/* ---- Pages simples (mentions légales, etc.) ---- */
.ea-page > .ea-wrap { padding-top: 64px; padding-bottom: 120px; max-width: 820px; }
.ea-page h1 { font-size: 48px; font-weight: 700; font-stretch: 112%; line-height: 1.05; margin: 0 0 40px; }
.ea-page .entry-content { font-size: 18px; line-height: 1.7; color: var(--ea-soft); }

@media (max-width: 640px) {
	.ea-wrap { padding-left: 1.25rem; padding-right: 1.25rem; }
	.ea-hero { min-height: 520px; padding: 20px; }
	.ea-section > .ea-wrap { padding-top: 72px; padding-bottom: 72px; }
	.ea-logline > .ea-wrap { padding-top: 96px; padding-bottom: 96px; }
}

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }