/*
 * Design system du site www.ericzemmour.fr — charte « Éric Zemmour 2027 » (Eléonore Lhéritier).
 * Règles de la charte : 6 couleurs seulement, 2 dégradés seulement, 3 familles de polices,
 * titres en Digitalt capitales (inclinés à 5,5° pour les logos et accroches), aucun effet ajouté.
 * Démonstration vivante : /design-system.
 */

/* ---------- Polices ---------- */
@font-face { font-family: "Digitalt"; src: url("../fonts/digitalt.otf") format("opentype"); font-display: swap; }
@font-face { font-family: "Futura EZ"; src: url("../fonts/futura-light.ttf") format("truetype"); font-weight: 300; font-display: swap; }
@font-face { font-family: "Futura EZ"; src: url("../fonts/futura-book.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Futura EZ"; src: url("../fonts/futura-bold.ttf") format("truetype"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Brittany Signature"; src: url("../fonts/brittany-signature.ttf") format("truetype"); font-display: swap; }

/* ---------- Jetons ---------- */
:root {
	/* Couleurs primaires (1), secondaire (2), tertiaires (3) */
	--ez-violet: #5B3E90;
	--ez-corail: #EE7C6F;
	--ez-blanc: #FFFFFF;
	--ez-encre: #2B2D6D;
	--ez-nuit: #1E1E3E;
	--ez-turquoise: #45D5DE;

	/* Dégradés (angle 45° en fond de visuel) */
	--ez-degrade-bicolore: linear-gradient(45deg, var(--ez-encre), var(--ez-violet));
	--ez-degrade-quadri: linear-gradient(45deg, var(--ez-nuit), var(--ez-encre) 30%, var(--ez-violet) 62%, var(--ez-corail));
	/* Bicolore à 90° en superposition d'une photo : opacité 0 côté violet */
	--ez-voile-photo: linear-gradient(0deg, var(--ez-encre), rgba(91, 62, 144, 0) 70%);

	/* Polices */
	--ez-f-titre: "Digitalt", "Arial Black", "Helvetica Neue", sans-serif;
	--ez-f-texte: "Futura EZ", "Futura", "Century Gothic", "Trebuchet MS", sans-serif;
	--ez-f-signature: "Brittany Signature", cursive;
	--ez-inclinaison: -5.5deg;

	/* Espacements */
	--ez-e1: 4px; --ez-e2: 8px; --ez-e3: 12px; --ez-e4: 16px; --ez-e5: 24px;
	--ez-e6: 32px; --ez-e7: 48px; --ez-e8: 64px; --ez-e9: 96px; --ez-e10: 128px;
	--ez-section: clamp(56px, 9vw, 120px);

	/* Mise en page */
	--ez-largeur: 1200px;
	--ez-gouttiere: 16px;
	--ez-rayon: 2px;
	--ez-ombre: 0 22px 44px -22px rgba(30, 30, 62, 0.6);
	--ez-duree: 220ms;
	--ez-courbe: cubic-bezier(0.22, 1, 0.36, 1);
}
@media (min-width: 768px) { :root { --ez-gouttiere: 32px; } }

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
	margin: 0; background: var(--ez-violet); color: var(--ez-blanc);
	font-family: var(--ez-f-texte); font-weight: 400; font-size: 1.0625rem; line-height: 1.6;
	-webkit-font-smoothing: antialiased; overflow-x: hidden;
}
img, svg, video { display: block; max-width: 100%; }
a { color: inherit; }
p { margin: 0 0 1em; }
:focus-visible { outline: 3px solid var(--ez-turquoise); outline-offset: 3px; }
[id] { scroll-margin-top: 84px; }
.ez-visuellement-cache { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ez-evitement:focus { z-index: 100; left: 16px; top: 16px; width: auto; height: auto; clip: auto; padding: 10px 16px; background: var(--ez-blanc); color: var(--ez-violet); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

.ez-conteneur { width: 100%; max-width: calc(var(--ez-largeur) + 2 * var(--ez-gouttiere)); margin: 0 auto; padding: 0 var(--ez-gouttiere); }
.ez-section { padding: var(--ez-section) 0; }

/* ---------- Surfaces ---------- */
.ez-fond-violet { background: var(--ez-violet); color: var(--ez-blanc); }
.ez-fond-blanc { background: var(--ez-blanc); color: var(--ez-encre); }
.ez-fond-encre { background: var(--ez-encre); color: var(--ez-blanc); }
.ez-fond-nuit { background: var(--ez-nuit); color: var(--ez-blanc); }
.ez-fond-corail { background: var(--ez-corail); color: var(--ez-encre); }
.ez-fond-bicolore { background: var(--ez-violet) var(--ez-degrade-bicolore); color: var(--ez-blanc); }
.ez-fond-quadri { background: var(--ez-violet) var(--ez-degrade-quadri); color: var(--ez-blanc); }

/* ---------- Typographie ---------- */
.ez-titre { font-family: var(--ez-f-titre); font-weight: 400; text-transform: uppercase; line-height: 0.92; letter-spacing: 0.01em; margin: 0 0 0.35em; }
.ez-titre--xxl { font-size: clamp(3rem, 9vw, 7.5rem); }
.ez-titre--xl { font-size: clamp(2.4rem, 6vw, 4.5rem); }
.ez-titre--l { font-size: clamp(1.9rem, 4vw, 3rem); }
.ez-titre--m { font-size: clamp(1.45rem, 2.4vw, 2rem); line-height: 1; }
.ez-titre--s { font-size: 1.25rem; line-height: 1.05; }
/* Inclinaison à 5,5° (logo Zemmour 2027) ; « redressée » = lettres droites, ligne de base inclinée (logo slogan) */
.ez-incline { display: inline-block; transform: rotate(var(--ez-inclinaison)); }
.ez-incline-redresse { display: inline-block; transform: skewY(var(--ez-inclinaison)); }
.ez-accent { color: var(--ez-corail); }
.ez-fond-blanc .ez-titre { color: var(--ez-violet); }
.ez-fond-corail .ez-accent, .ez-fond-blanc .ez-accent { color: var(--ez-violet); }

.ez-sous-titre { font-family: var(--ez-f-texte); font-weight: 300; text-transform: uppercase; letter-spacing: 0.2em; font-size: clamp(0.85rem, 1.3vw, 1.1rem); line-height: 1.4; margin: 0 0 1em; }
.ez-chapo { font-weight: 700; font-size: clamp(1.15rem, 1.8vw, 1.4rem); line-height: 1.4; }
.ez-chapo .ez-accent { color: var(--ez-corail); }
.ez-texte { max-width: 68ch; }
.ez-texte strong, .ez-gras { font-weight: 700; }
.ez-petit { font-size: 0.875rem; line-height: 1.5; }
.ez-signature { font-family: var(--ez-f-signature); font-size: clamp(2.2rem, 4vw, 3.4rem); line-height: 1.1; font-weight: 400; text-transform: none; }

/* Étiquette : sous-titre court suivi du trait corail de la charte */
.ez-etiquette { display: inline-flex; align-items: center; gap: var(--ez-e3); font-weight: 300; text-transform: uppercase; letter-spacing: 0.2em; font-size: 0.8125rem; }
.ez-etiquette::after, .ez-trait { content: ""; display: inline-block; width: 48px; height: 6px; background: var(--ez-corail); }
.ez-trait { display: block; }

.ez-lien { text-decoration: underline; text-decoration-color: var(--ez-corail); text-decoration-thickness: 2px; text-underline-offset: 4px; transition: color var(--ez-duree); }
.ez-lien:hover { color: var(--ez-corail); }
.ez-fond-blanc .ez-lien:hover { color: var(--ez-violet); }

/* Puces turquoise (couleur tertiaire réservée aux puces et détails) */
.ez-puces { list-style: none; padding: 0; margin: 0 0 1em; }
.ez-puces li { position: relative; padding-left: 1.6em; margin-bottom: 0.5em; }
.ez-puces li::before {
	content: ""; position: absolute; left: 0; top: 0.42em; width: 0.9em; height: 0.75em; background: var(--ez-turquoise);
	clip-path: polygon(0 35%, 55% 35%, 55% 0, 100% 50%, 55% 100%, 55% 65%, 0 65%);
}

/* ---------- Boutons ---------- */
.ez-bouton {
	display: inline-flex; align-items: center; justify-content: center; gap: var(--ez-e2);
	min-height: 52px; padding: 12px 26px 10px; border: 2px solid transparent; border-radius: var(--ez-rayon);
	font-family: var(--ez-f-titre); font-size: 1.2rem; line-height: 1; text-transform: uppercase; letter-spacing: 0.02em;
	text-decoration: none; cursor: pointer; white-space: nowrap;
	transition: transform var(--ez-duree) var(--ez-courbe), background-color var(--ez-duree), color var(--ez-duree), box-shadow var(--ez-duree);
}
.ez-bouton:hover { transform: translateY(-2px); box-shadow: var(--ez-ombre); }
.ez-bouton:active { transform: translateY(0); }
.ez-bouton[disabled], .ez-bouton[aria-disabled="true"] { opacity: 0.45; pointer-events: none; }
.ez-bouton--primaire { background: var(--ez-corail); color: var(--ez-encre); }
.ez-bouton--primaire:hover { background: var(--ez-blanc); color: var(--ez-violet); }
.ez-bouton--secondaire { background: var(--ez-encre); color: var(--ez-blanc); }
.ez-bouton--secondaire:hover { background: var(--ez-nuit); }
.ez-bouton--tertiaire { background: var(--ez-turquoise); color: var(--ez-nuit); }
.ez-bouton--contour { background: transparent; border-color: var(--ez-blanc); color: var(--ez-blanc); }
.ez-bouton--contour:hover { background: var(--ez-blanc); color: var(--ez-violet); }
.ez-fond-blanc .ez-bouton--contour { border-color: var(--ez-violet); color: var(--ez-violet); }
.ez-fond-blanc .ez-bouton--contour:hover { background: var(--ez-violet); color: var(--ez-blanc); }
.ez-bouton--petit { min-height: 42px; padding: 9px 18px 7px; font-size: 1.05rem; }
.ez-bouton--large { min-height: 64px; padding: 16px 36px 13px; font-size: 1.5rem; }
.ez-bouton--bloc { display: flex; width: 100%; }
.ez-boutons { display: flex; flex-wrap: wrap; gap: var(--ez-e3); }

/* ---------- Formulaires ---------- */
.ez-champ { display: grid; gap: var(--ez-e2); margin-bottom: var(--ez-e4); }
.ez-champ label { font-weight: 300; text-transform: uppercase; letter-spacing: 0.2em; font-size: 0.8125rem; }
.ez-saisie {
	width: 100%; min-height: 52px; padding: 12px 16px; border: 2px solid transparent; border-radius: var(--ez-rayon);
	background: var(--ez-blanc); color: var(--ez-encre); font: inherit; font-size: 1rem;
}
.ez-saisie::placeholder { color: rgba(43, 45, 109, 0.55); }
.ez-saisie:focus { outline: none; border-color: var(--ez-turquoise); box-shadow: 0 0 0 3px rgba(69, 213, 222, 0.35); }
.ez-saisie[aria-invalid="true"] { border-color: var(--ez-corail); }
.ez-fond-blanc .ez-saisie { border-color: rgba(43, 45, 109, 0.25); }
.ez-aide { font-size: 0.8125rem; opacity: 0.85; }
.ez-erreur { font-size: 0.875rem; font-weight: 700; color: var(--ez-corail); }
.ez-fond-blanc .ez-erreur { color: var(--ez-violet); }
.ez-case { display: flex; gap: var(--ez-e3); align-items: flex-start; font-size: 0.875rem; line-height: 1.45; }
.ez-case input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--ez-turquoise); flex: none; }
.ez-en-ligne { display: flex; flex-wrap: wrap; gap: var(--ez-e3); }
.ez-en-ligne .ez-saisie { flex: 1 1 240px; }

/* ---------- Cartes ---------- */
.ez-grille { display: grid; gap: var(--ez-e5); grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.ez-carte {
	display: flex; flex-direction: column; background: var(--ez-blanc); color: var(--ez-encre); text-decoration: none;
	border-radius: var(--ez-rayon); overflow: hidden; transition: transform var(--ez-duree) var(--ez-courbe), box-shadow var(--ez-duree);
}
a.ez-carte:hover { transform: translateY(-4px); box-shadow: var(--ez-ombre); }
.ez-carte__media { position: relative; aspect-ratio: 16 / 10; background: var(--ez-encre); overflow: hidden; }
.ez-carte__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 600ms var(--ez-courbe); }
a.ez-carte:hover .ez-carte__media img { transform: scale(1.04); }
.ez-carte__media::after { content: ""; position: absolute; inset: 0; background: var(--ez-voile-photo); opacity: 0.55; }
.ez-carte__corps { display: flex; flex-direction: column; gap: var(--ez-e3); padding: var(--ez-e5); flex: 1; }
.ez-carte__etiquette { font-weight: 300; text-transform: uppercase; letter-spacing: 0.2em; font-size: 0.75rem; color: var(--ez-violet); }
.ez-carte__titre { font-family: var(--ez-f-titre); text-transform: uppercase; font-size: 1.45rem; line-height: 1; color: var(--ez-violet); margin: 0; }
.ez-carte__extrait { font-size: 0.95rem; line-height: 1.55; margin: 0; }
.ez-carte__suite { margin-top: auto; font-weight: 700; font-size: 0.875rem; text-transform: uppercase; letter-spacing: 0.08em; display: inline-flex; gap: var(--ez-e2); align-items: center; }
.ez-carte__suite::after { content: ""; width: 28px; height: 4px; background: var(--ez-corail); transition: width var(--ez-duree) var(--ez-courbe); }
a.ez-carte:hover .ez-carte__suite::after { width: 44px; }
.ez-carte--sombre { background: var(--ez-encre); color: var(--ez-blanc); }
.ez-carte--sombre .ez-carte__titre, .ez-carte--sombre .ez-carte__etiquette { color: var(--ez-blanc); }
.ez-badge { position: absolute; z-index: 1; left: var(--ez-e4); top: var(--ez-e4); background: var(--ez-violet); color: var(--ez-blanc); font-family: var(--ez-f-titre); text-transform: uppercase; font-size: 0.95rem; line-height: 1; padding: 7px 10px 5px; }
.ez-lecture { position: absolute; z-index: 1; inset: 0; margin: auto; width: 64px; height: 64px; border-radius: 50%; background: var(--ez-corail); display: grid; place-items: center; }
.ez-lecture::before { content: ""; width: 0; height: 0; border-style: solid; border-width: 11px 0 11px 18px; border-color: transparent transparent transparent var(--ez-encre); margin-left: 5px; }

/* ---------- Citation (visuel citation de la charte) ---------- */
.ez-citation { position: relative; margin: 0; padding-top: 0.6em; }
.ez-citation::before { content: "“"; position: absolute; left: -0.06em; top: -0.32em; font-family: var(--ez-f-titre); font-size: 9rem; line-height: 1; color: rgba(255, 255, 255, 0.14); pointer-events: none; }
.ez-citation__texte { position: relative; font-family: var(--ez-f-titre); text-transform: uppercase; font-size: clamp(1.7rem, 3.6vw, 2.8rem); line-height: 1.02; margin: 0 0 var(--ez-e5); }
.ez-citation__source { display: flex; align-items: center; gap: var(--ez-e3); font-weight: 300; font-size: 0.875rem; }
.ez-citation__source::before { content: ""; width: 22px; height: 22px; background: var(--ez-violet); flex: none; }
.ez-fond-violet .ez-citation__source::before { background: var(--ez-encre); }

/* ---------- Chiffre clé (visuel sondage) ---------- */
.ez-chiffre { display: inline-flex; flex-direction: column; align-items: flex-start; gap: var(--ez-e2); }
.ez-chiffre__valeur { font-family: var(--ez-f-titre); text-transform: uppercase; font-size: clamp(2.6rem, 6vw, 4.5rem); line-height: 0.9; background: var(--ez-violet); color: var(--ez-blanc); padding: 0.12em 0.22em 0.04em; }
.ez-fond-violet .ez-chiffre__valeur { background: var(--ez-encre); }
.ez-chiffre__legende { font-family: var(--ez-f-titre); text-transform: uppercase; font-size: clamp(1.1rem, 2vw, 1.5rem); line-height: 1.05; max-width: 22ch; }
.ez-chiffre__source { font-size: 0.8125rem; font-weight: 300; }

/* ---------- Encadré ---------- */
.ez-encadre { border: 1px solid var(--ez-corail); padding: var(--ez-e5); }
.ez-fond-blanc .ez-encadre { border-color: var(--ez-violet); }

/* ---------- Bandeau d'appel (don, adhésion) ---------- */
.ez-bandeau { position: relative; overflow: hidden; }
.ez-bandeau__grille { display: grid; gap: var(--ez-e6); align-items: center; }
@media (min-width: 900px) { .ez-bandeau__grille { grid-template-columns: 1.3fr 1fr; } }

/* ---------- En-tête ---------- */
.ez-entete { position: fixed; z-index: 50; inset: 0 0 auto; transition: background-color 300ms, box-shadow 300ms, transform 300ms; }
.ez-entete:not(.est-colle) { background: linear-gradient(180deg, rgba(43, 45, 109, 0.6), rgba(43, 45, 109, 0)); }
.ez-entete.est-colle { background: rgba(91, 62, 144, 0.96); box-shadow: 0 10px 30px -18px rgba(30, 30, 62, 0.9); }
.ez-entete__barre { display: flex; align-items: center; justify-content: space-between; gap: var(--ez-e5); height: 76px; }
.ez-entete__logo img { height: 50px; width: auto; }
.ez-nav { display: none; }
.ez-nav ul { display: flex; gap: var(--ez-e6); list-style: none; margin: 0; padding: 0; }
.ez-nav a { position: relative; text-decoration: none; text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.85rem; font-weight: 400; padding: 6px 0; }
.ez-nav a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: 0; height: 3px; background: var(--ez-corail); transition: right var(--ez-duree) var(--ez-courbe); }
.ez-nav a:hover::after, .ez-nav a[aria-current="page"]::after { right: 0; }
.ez-entete__actions { display: flex; align-items: center; gap: var(--ez-e3); }
.ez-burger { display: inline-grid; place-items: center; width: 48px; height: 48px; padding: 0; background: transparent; border: 0; color: inherit; cursor: pointer; }
.ez-burger span, .ez-burger span::before, .ez-burger span::after { display: block; width: 26px; height: 3px; background: currentColor; position: relative; transition: transform var(--ez-duree), background-color var(--ez-duree); }
.ez-burger span::before, .ez-burger span::after { content: ""; position: absolute; left: 0; }
.ez-burger span::before { top: -8px; } .ez-burger span::after { top: 8px; }
.ez-burger[aria-expanded="true"] span { background: transparent; }
.ez-burger[aria-expanded="true"] span::before { transform: translateY(8px) rotate(45deg); }
.ez-burger[aria-expanded="true"] span::after { transform: translateY(-8px) rotate(-45deg); }
.ez-menu-mobile { position: fixed; inset: 0; z-index: 40; padding: 110px var(--ez-gouttiere) 40px; background: var(--ez-violet) var(--ez-degrade-bicolore); display: flex; flex-direction: column; gap: var(--ez-e6); transform: translateY(-100%); visibility: hidden; transition: transform 420ms var(--ez-courbe), visibility 0s 420ms; }
.ez-menu-mobile.est-ouvert { transform: none; visibility: visible; transition: transform 420ms var(--ez-courbe); }
.ez-menu-mobile ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--ez-e3); }
.ez-menu-mobile a:not(.ez-bouton) { font-family: var(--ez-f-titre); text-transform: uppercase; font-size: 2.1rem; line-height: 1.05; text-decoration: none; }
@media (min-width: 1024px) {
	.ez-nav { display: block; }
	.ez-burger, .ez-menu-mobile { display: none; }
}
@media (max-width: 479px) { .ez-entete__actions .ez-bouton { display: none; } .ez-entete__logo img { height: 42px; } }

/* ---------- Pré-en-tête : bandeau d'annonce au-dessus du menu (meeting de lancement, 10/11/2026) ---------- */
/* Tout le bandeau est le lien. La cale le remplace dans le flux ; dès qu'on défile, l'en-tête remonte de sa hauteur. */
:root { --ez-preentete: 40px; }
.ez-preentete { display: flex; align-items: center; justify-content: center; gap: var(--ez-e4); height: var(--ez-preentete); padding: 0 var(--ez-gouttiere); background: var(--ez-corail); color: var(--ez-encre); text-decoration: none; white-space: nowrap; overflow: hidden; }
.ez-preentete__texte { overflow: hidden; text-overflow: ellipsis; font-size: 0.9375rem; font-weight: 400; }
.ez-preentete strong { font-family: var(--ez-f-titre); font-weight: 400; text-transform: uppercase; letter-spacing: 0.04em; font-size: 1.0625rem; }
.ez-preentete__action { flex: none; padding: 5px 12px 4px; background: var(--ez-encre); color: var(--ez-blanc); text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.75rem; font-weight: 700; transition: background-color var(--ez-duree), color var(--ez-duree); }
.ez-preentete__action::after { content: " →"; }
.ez-preentete:hover .ez-preentete__action, .ez-preentete:focus-visible .ez-preentete__action { background: var(--ez-violet); }
.ez-preentete:focus-visible { outline: 3px solid var(--ez-blanc); outline-offset: -3px; }
.ez-preentete-cale { height: var(--ez-preentete); background: var(--ez-corail); }
.ez-entete.a-preentete.est-colle { transform: translateY(calc(-1 * var(--ez-preentete))); }
.ez-preentete-cale ~ .ez-menu-mobile { padding-top: calc(110px + var(--ez-preentete)); }
/* L'ouverture animée de l'accueil garde la hauteur de l'écran, bandeau compris */
.ez-preentete-cale ~ main .ez-hero { height: calc(100vh - var(--ez-preentete)); height: calc(100svh - var(--ez-preentete)); }
/* Texte de plus en plus court : __xl, puis __l (date longue remplacée par __c), puis __m (lieu), puis __s */
.ez-preentete__c { display: none; }
@media (max-width: 1099px) { .ez-preentete__xl { display: none; } }
@media (max-width: 799px) { .ez-preentete__l { display: none; } .ez-preentete__c { display: inline; } }
@media (max-width: 599px) {
	.ez-preentete__m { display: none; }
	.ez-preentete { gap: var(--ez-e3); }
	.ez-preentete strong { font-size: 0.9375rem; letter-spacing: 0.02em; }
	.ez-preentete__texte { font-size: 0.875rem; }
	.ez-preentete__action { padding: 5px 10px 4px; letter-spacing: 0.08em; }
	.ez-preentete__action::after { content: none; }
}
@media (max-width: 374px) { .ez-preentete__s { display: none; } }

/* ---------- Pied de page ---------- */
.ez-pied { background: var(--ez-encre); color: var(--ez-blanc); padding: var(--ez-e8) 0 var(--ez-e6); }
.ez-pied__grille { display: grid; gap: var(--ez-e6); }
@media (min-width: 900px) { .ez-pied__grille { grid-template-columns: 1.2fr 1fr 1fr; } }
.ez-pied__logos { display: flex; align-items: center; gap: var(--ez-e5); }
.ez-pied__logos img { height: 64px; width: auto; }
.ez-pied ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--ez-e2); }
.ez-pied a { text-decoration: none; }
.ez-pied a:hover { color: var(--ez-corail); }
.ez-pied__bas { margin-top: var(--ez-e7); padding-top: var(--ez-e5); border-top: 1px solid rgba(255, 255, 255, 0.18); display: flex; flex-wrap: wrap; gap: var(--ez-e3) var(--ez-e6); font-size: 0.8125rem; font-weight: 300; }
.ez-pied__minitel { margin-left: auto; opacity: 0.75; }
.ez-pied__3615 { display: inline-block; margin-right: 0.3em; padding: 2px 5px 0; background: var(--ez-corail); color: var(--ez-encre); font-weight: 700; font-size: 0.6875rem; letter-spacing: 0.12em; }
.ez-pied__minitel:hover { opacity: 1; }

/* ---------- Ouverture animée (accueil) ---------- */
.ez-hero { position: relative; height: 100vh; height: 100svh; min-height: 620px; max-height: 1080px; overflow: hidden; background: var(--ez-nuit); isolation: isolate; }
.ez-hero__scene { position: absolute; inset: 0; width: 100%; height: 100%; }
/* Dégradé bicolore à 90° en superposition de l'illustration (opacité 0 côté violet), pour lire le slogan */
.ez-hero__voile { position: absolute; z-index: 1; inset: 0; pointer-events: none; opacity: 0; transition: opacity 1400ms ease; background: linear-gradient(0deg, rgba(43, 45, 109, 0.85) 0%, rgba(43, 45, 109, 0.45) 38%, rgba(91, 62, 144, 0) 62%); }
.ez-hero.est-slogan .ez-hero__voile { opacity: 1; }
@media (min-width: 900px) { .ez-hero__voile { background: linear-gradient(90deg, rgba(43, 45, 109, 0.85) 0%, rgba(43, 45, 109, 0.5) 32%, rgba(91, 62, 144, 0) 60%); } }
/* Mobile : slogan en bas, sur la route sombre, pour laisser voir le ciel et le village */
.ez-hero__contenu { position: absolute; z-index: 2; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; padding: 96px var(--ez-gouttiere) 88px; pointer-events: none; }
.ez-hero__contenu > * { pointer-events: auto; }
.ez-hero .ez-slogan { width: min(82vw, 400px); height: auto; filter: drop-shadow(0 6px 18px rgba(30, 30, 62, 0.35)); }
.ez-hero__actions { margin-top: var(--ez-e5); justify-content: center; opacity: 0; transform: translateY(16px); transition: opacity 700ms, transform 700ms var(--ez-courbe); }
.ez-hero.est-fini .ez-hero__actions { opacity: 1; transform: none; }
@media (max-width: 479px) {
	.ez-hero__actions { width: 100%; }
	.ez-hero__actions .ez-bouton { flex: 1 1 100%; min-height: 56px; font-size: 1.2rem; }
}
@media (min-width: 900px) {
	.ez-hero__contenu { align-items: flex-start; justify-content: center; padding: 76px max(var(--ez-gouttiere), calc((100vw - var(--ez-largeur)) / 2)) 7vh; }
	.ez-hero .ez-slogan { width: clamp(340px, 32vw, 540px); }
	.ez-hero__actions { justify-content: flex-start; }
}
.ez-hero .ez-mot { opacity: 0; transform: translateY(18px) scale(1.18); transform-box: fill-box; transform-origin: 50% 60%; }
.ez-hero.est-slogan .ez-mot { opacity: 1; transform: none; transition: opacity 420ms ease-out, transform 620ms var(--ez-courbe); transition-delay: calc(var(--i) * 260ms); }
.ez-hero__defiler { position: absolute; z-index: 3; left: 50%; bottom: 18px; width: 28px; height: 44px; margin-left: -14px; border: 2px solid rgba(255, 255, 255, 0.8); border-radius: 14px; opacity: 0; transition: opacity 600ms 400ms; }
.ez-hero__defiler::after { content: ""; position: absolute; left: 50%; top: 8px; width: 4px; height: 8px; margin-left: -2px; border-radius: 2px; background: var(--ez-blanc); animation: ez-defiler 1.8s infinite; }
.ez-hero.est-fini .ez-hero__defiler { opacity: 1; }
@keyframes ez-defiler { 0% { transform: translateY(0); opacity: 1; } 70% { transform: translateY(14px); opacity: 0; } 100% { opacity: 0; } }


/* ---------- Bloc d'en-tête de page intérieure ---------- */
.ez-page-tete { padding: calc(76px + var(--ez-section)) 0 var(--ez-section); }
/* En-tête de page intérieure : tout l'écran (horizon néon calé en bas), contenu centré ; pas les en-têtes courts */
.ez-page-tete:not(.ez-page-tete--courte) { display: flex; flex-direction: column; justify-content: center; min-height: 100vh; min-height: 100svh; }

/* ---------- Apparition au défilement ---------- */
.ez-apparait { opacity: 0; transform: translateY(28px); transition: opacity 800ms, transform 800ms var(--ez-courbe); }
.ez-apparait.est-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
	.ez-apparait { opacity: 1; transform: none; transition: none; }
	.ez-bouton, .ez-carte { transition: none; }
}

/* =====================================================================
 * Pages de contenu (listes, articles, priorités, formulaires)
 * ===================================================================== */
.ez-entete.est-plein { background: var(--ez-violet); }
.ez-section--serree { padding: clamp(40px, 6vw, 72px) 0; }
.ez-page-tete--courte { padding-bottom: clamp(40px, 6vw, 72px); }
.ez-tete-section { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--ez-e4) var(--ez-e6); margin-bottom: var(--ez-e7); }
.ez-tete-section .ez-titre { margin-bottom: 0; }
.ez-fond-blanc .ez-carte { box-shadow: 0 0 0 1px rgba(43, 45, 109, 0.14); }
.ez-carte__sans-image { display: grid; place-items: center; width: 100%; height: 100%; font-family: var(--ez-f-titre); font-size: 2rem; text-transform: uppercase; color: var(--ez-blanc); }

/* Années (listes) et sommaires en pastilles */
.ez-annees { display: flex; flex-wrap: wrap; gap: var(--ez-e2); list-style: none; padding: 0; margin: var(--ez-e6) 0 0; }
.ez-annees a { display: inline-block; padding: 8px 14px 6px; border: 1px solid rgba(255, 255, 255, 0.45); text-decoration: none; text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.8rem; transition: background-color var(--ez-duree), color var(--ez-duree); }
.ez-annees a:hover { background: var(--ez-blanc); color: var(--ez-violet); }
.ez-annee { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--ez-e4); margin-bottom: var(--ez-e6); }
.ez-annee__nombre { font-family: var(--ez-f-texte); font-weight: 300; font-size: 0.85rem; letter-spacing: 0.2em; }

/* Les 5 priorités (accueil) */
.ez-priorites { display: grid; gap: var(--ez-e4); grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr)); list-style: none; margin: 0; padding: 0; }
.ez-priorites a { display: flex; flex-direction: column; gap: var(--ez-e2); height: 100%; padding: var(--ez-e5); background: var(--ez-violet); color: var(--ez-blanc); text-decoration: none; transition: transform var(--ez-duree) var(--ez-courbe), box-shadow var(--ez-duree), background-color var(--ez-duree); }
.ez-priorites a:hover { transform: translateY(-4px); box-shadow: var(--ez-ombre); background: var(--ez-encre); }
.ez-priorites__numero { font-family: var(--ez-f-titre); font-size: 2.6rem; line-height: 1; color: var(--ez-corail); }
.ez-priorites__titre { font-family: var(--ez-f-titre); text-transform: uppercase; font-size: 1.6rem; line-height: 1; }
.ez-priorites__texte { font-size: 0.9rem; line-height: 1.5; }

/* Page Priorités */
.ez-priorite { display: grid; gap: var(--ez-e6); }
@media (min-width: 900px) { .ez-priorite { grid-template-columns: minmax(260px, 1fr) 2fr; align-items: start; } .ez-priorite__tete { position: sticky; top: 100px; } }
.ez-priorite__numero { display: block; font-family: var(--ez-f-titre); font-size: clamp(4rem, 9vw, 7rem); line-height: 0.9; color: var(--ez-corail); }
.ez-fond-blanc .ez-priorite__numero { color: var(--ez-violet); }
.ez-priorite__image { margin-top: var(--ez-e4); width: 100%; height: auto; }

/* En-tête d'article : photo voilée au dégradé bicolore à 90° (charte) */
.ez-article-tete { position: relative; display: flex; align-items: flex-end; min-height: min(62vh, 560px); padding: calc(76px + var(--ez-e8)) 0 var(--ez-e7); background: var(--ez-encre); color: var(--ez-blanc); overflow: hidden; isolation: isolate; }
.ez-article-tete__image { position: absolute; z-index: -2; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ez-article-tete::before { content: ""; position: absolute; z-index: -1; inset: 0; background: linear-gradient(0deg, var(--ez-encre) 0%, rgba(43, 45, 109, 0.75) 45%, rgba(91, 62, 144, 0) 100%); }
.ez-article-tete .ez-titre { max-width: 22ch; }
.ez-article-tete__retour { text-decoration: none; margin-bottom: var(--ez-e4); }
.ez-article { max-width: calc(760px + 2 * var(--ez-gouttiere)); }
.ez-article__signature { color: var(--ez-violet); text-align: right; margin-top: var(--ez-e6); }
.ez-article__partage { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ez-e4); margin-top: var(--ez-e7); padding-top: var(--ez-e5); border-top: 1px solid rgba(43, 45, 109, 0.15); }

/* Texte long (discours, communiqués, pages reprises) */
.ez-prose { font-size: 1.125rem; line-height: 1.75; }
.ez-prose > :first-child { margin-top: 0; }
.ez-prose p { margin: 0 0 1.1em; }
.ez-prose h2 { font-family: var(--ez-f-titre); font-weight: 400; text-transform: uppercase; font-size: clamp(1.5rem, 2.6vw, 2rem); line-height: 1.05; margin: 1.6em 0 0.6em; }
.ez-prose h3 { font-weight: 700; font-size: 1.3rem; line-height: 1.35; margin: 1.4em 0 0.5em; }
.ez-prose h4 { font-weight: 700; font-size: 1.1rem; margin: 1.2em 0 0.4em; }
.ez-prose strong, .ez-prose b { font-weight: 700; }
.ez-prose a { text-decoration: underline; text-decoration-color: var(--ez-corail); text-decoration-thickness: 2px; text-underline-offset: 4px; overflow-wrap: anywhere; }
.ez-prose ul, .ez-prose ol { padding-left: 1.4em; margin: 0 0 1.1em; }
.ez-prose li { margin-bottom: 0.4em; }
.ez-prose ul li::marker { color: var(--ez-turquoise); }
.ez-prose blockquote { margin: 1.4em 0; padding: 0.2em 0 0.2em 1.2em; border-left: 6px solid var(--ez-corail); font-weight: 700; }
.ez-prose img { height: auto; margin: 1.4em 0; }
.ez-prose hr { border: 0; height: 6px; width: 48px; background: var(--ez-corail); margin: 2em 0; }
.ez-fond-blanc .ez-prose h2 { color: var(--ez-violet); }

/* Vidéo YouTube chargée au clic (pas de cookie YouTube avant) */
.ez-video { position: relative; aspect-ratio: 16 / 9; margin: 0 0 var(--ez-e6); background: var(--ez-nuit); overflow: hidden; }
.ez-video img, .ez-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border: 0; }
.ez-video__lecture { position: absolute; inset: 0; width: 100%; background: linear-gradient(0deg, rgba(43, 45, 109, 0.7), rgba(91, 62, 144, 0) 60%); border: 0; cursor: pointer; }
.ez-video__lecture .ez-lecture { width: 84px; height: 84px; transition: transform var(--ez-duree) var(--ez-courbe); }
.ez-video__lecture:hover .ez-lecture { transform: scale(1.08); }
.ez-video__mention { position: absolute; left: var(--ez-e4); bottom: var(--ez-e3); font-size: 0.75rem; color: var(--ez-blanc); pointer-events: none; }

/* Référence et coordonnées de paiement (dons par virement ou chèque) */
.ez-reference { display: inline-block; margin: var(--ez-e2) 0 var(--ez-e6); padding: 10px 22px 6px; border: 3px dashed var(--ez-violet); font-family: var(--ez-f-titre); font-size: clamp(2rem, 6vw, 3.2rem); line-height: 1; letter-spacing: 0.06em; color: var(--ez-violet); }
.ez-coordonnees dl { display: grid; grid-template-columns: max-content 1fr; gap: var(--ez-e3) var(--ez-e5); margin: 0; }
.ez-coordonnees dt { font-weight: 300; text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.8rem; padding-top: 3px; }
.ez-coordonnees dd { margin: 0; font-weight: 700; letter-spacing: 0.03em; overflow-wrap: anywhere; }

/* Formulaires (Restez informé, Contact) */
.ez-carte-formulaire { background: var(--ez-blanc); color: var(--ez-encre); padding: clamp(20px, 4vw, 36px); box-shadow: var(--ez-ombre); }
.ez-carte-formulaire .ez-saisie { border-color: rgba(43, 45, 109, 0.25); }
.ez-carte-formulaire .ez-lien:hover { color: var(--ez-violet); }
.ez-carte-formulaire .ez-titre { color: var(--ez-violet); }
.ez-formulaire__grille { display: grid; gap: 0 var(--ez-e4); }
@media (min-width: 600px) { .ez-formulaire__grille { grid-template-columns: 1fr 1fr; } }
textarea.ez-saisie { min-height: 150px; resize: vertical; }
.ez-piege { position: absolute !important; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.ez-formulaire__alerte { margin: var(--ez-e4) 0 0; padding: 10px 14px; border-left: 4px solid var(--ez-corail); background: rgba(238, 124, 111, 0.12); font-weight: 700; font-size: 0.9rem; }
.ez-formulaire__merci .ez-titre { margin-bottom: 0.3em; }
.ez-formulaire .ez-case a { color: inherit; }

/* =====================================================================
 * Agir : boutons d'action, partage, programme, vidéos, Instagram
 * ===================================================================== */
.ez-icone { width: 1.5em; height: 1.5em; flex: none; }
.ez-bouton .ez-icone { width: 1.2em; height: 1.2em; margin-top: -2px; }

/* « J'agis tout de suite » : trois grandes cartes */
.ez-actions { display: grid; gap: var(--ez-e4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); list-style: none; margin: 0; padding: 0; }
.ez-action { position: relative; display: flex; flex-direction: column; gap: var(--ez-e3); height: 100%; padding: var(--ez-e6) var(--ez-e5) var(--ez-e7); background: var(--ez-blanc); color: var(--ez-encre); text-decoration: none; transition: transform var(--ez-duree) var(--ez-courbe), box-shadow var(--ez-duree); }
.ez-action:hover { transform: translateY(-6px); box-shadow: var(--ez-ombre); }
.ez-action__icone { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: var(--ez-corail); color: var(--ez-encre); }
.ez-action__icone .ez-icone { width: 30px; height: 30px; }
.ez-action__titre { font-family: var(--ez-f-titre); text-transform: uppercase; font-size: clamp(1.5rem, 2.4vw, 1.9rem); line-height: 1; color: var(--ez-violet); }
.ez-action__texte { font-size: 0.95rem; line-height: 1.5; }
.ez-action__fleche { position: absolute; right: var(--ez-e5); bottom: var(--ez-e5); width: 40px; height: 6px; background: var(--ez-corail); transition: width var(--ez-duree) var(--ez-courbe); }
.ez-action:hover .ez-action__fleche { width: 64px; }

/* Partage : réseaux sociaux et proches */
.ez-reseaux { display: grid; gap: var(--ez-e5); grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.ez-reseau { display: flex; flex-direction: column; gap: var(--ez-e3); padding: var(--ez-e6); box-shadow: 0 0 0 1px rgba(43, 45, 109, 0.14); }
.ez-reseau .ez-titre { margin: 0; }
.ez-reseau .ez-boutons { margin-top: auto; }
.ez-partage { display: grid; gap: var(--ez-e3); grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); margin: var(--ez-e4) 0; }
.ez-partage__bouton { display: flex; align-items: center; justify-content: center; min-height: 56px; padding: 12px 16px 10px; border: 2px solid var(--ez-violet); background: var(--ez-blanc); color: var(--ez-violet); font-family: var(--ez-f-titre); font-size: 1.2rem; text-transform: uppercase; text-decoration: none; cursor: pointer; transition: background-color var(--ez-duree), color var(--ez-duree); }
.ez-partage__bouton:hover { background: var(--ez-violet); color: var(--ez-blanc); }
.ez-partage__bouton--whatsapp { background: var(--ez-corail); border-color: var(--ez-corail); color: var(--ez-encre); }
.ez-message { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--ez-e3); margin: var(--ez-e5) 0; padding: var(--ez-e4) var(--ez-e5); background: rgba(91, 62, 144, 0.08); border-left: 6px solid var(--ez-corail); }
.ez-message__texte { margin: 0; font-weight: 700; flex: 1 1 260px; overflow-wrap: anywhere; }
.ez-suite { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--ez-e4); }
.ez-suite .ez-chapo { margin: 0; }
.ez-a-venir { margin-top: var(--ez-e6); border-style: dashed; }

/* Programme (tract « Nos priorités pour les Français ») */
/* Les 5 priorités de l'accueil : 3 puis 2 sur grand écran, 2 par 2 (la dernière en entier) sur tablette, une colonne sur téléphone */
.ez-priorites--programme { grid-template-columns: repeat(6, 1fr); }
.ez-priorites--programme > li { grid-column: span 2; }
.ez-priorites--programme > li:nth-child(n + 4) { grid-column: span 3; }
@media (max-width: 1023px) {
	.ez-priorites--programme { grid-template-columns: repeat(2, 1fr); }
	.ez-priorites--programme > li, .ez-priorites--programme > li:nth-child(n + 4) { grid-column: auto; }
	.ez-priorites--programme > li:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media (max-width: 599px) { .ez-priorites--programme { grid-template-columns: 1fr; } }
.ez-priorites--programme .ez-priorites__titre { font-size: 1.35rem; }
.ez-priorites--programme .ez-priorites__texte { font-size: 0.85rem; }
.ez-priorites__texte strong { font-weight: 700; }
.ez-programme { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--ez-e5); }
.ez-programme__item { display: grid; grid-template-columns: auto 1fr; gap: var(--ez-e5); align-items: start; padding: var(--ez-e6); border-left: 8px solid var(--ez-violet); background: rgba(91, 62, 144, 0.06); }
.ez-programme__numero { font-family: var(--ez-f-titre); font-size: clamp(3rem, 7vw, 5rem); line-height: 0.85; color: var(--ez-corail); }
.ez-programme__item .ez-titre { margin-bottom: 0.3em; }
.ez-programme__texte { margin: 0; font-size: 1.15rem; line-height: 1.65; max-width: 70ch; }
.ez-programme__texte strong { font-weight: 700; color: var(--ez-violet); }
@media (max-width: 599px) { .ez-programme__item { grid-template-columns: 1fr; gap: var(--ez-e2); padding: var(--ez-e5); } }

/* Dernières vidéos */
.ez-video-carte .ez-video { margin-bottom: var(--ez-e3); }
.ez-video-carte .ez-video__lecture .ez-lecture { width: 64px; height: 64px; }
.ez-video-carte__date { margin: 0 0 0.3em; font-weight: 300; text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.75rem; }
.ez-video-carte__titre { margin: 0; font-weight: 700; font-size: 1.05rem; line-height: 1.35; }
.ez-videos { display: grid; gap: var(--ez-e6); }
@media (min-width: 1000px) { .ez-videos--une { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: start; } }
.ez-courts { display: flex; gap: var(--ez-e3); overflow-x: auto; scroll-snap-type: x mandatory; list-style: none; margin: 0; padding: 0 0 var(--ez-e3); scrollbar-width: thin; scrollbar-color: var(--ez-corail) transparent; }
.ez-court { flex: 0 0 min(44vw, 190px); scroll-snap-align: start; }
.ez-court .ez-video { aspect-ratio: 9 / 16; margin-bottom: var(--ez-e2); }
.ez-court .ez-video__lecture .ez-lecture { width: 52px; height: 52px; }
.ez-court .ez-video-carte__titre { font-size: 0.9rem; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* Instagram (« Avec les Français ») */
/* Au plus 5 publications (SitePartiContenu::actus) : bandeau qui défile au doigt (vignette suivante entrevue)
   jusqu'à 1000 px, puis une seule rangée ; jamais de vignette seule sur sa ligne. */
.ez-insta { display: flex; gap: var(--ez-e3); overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; list-style: none; margin: 0; padding: 0 0 var(--ez-e3); scrollbar-width: thin; scrollbar-color: var(--ez-corail) transparent; }
.ez-insta > li { flex: 0 0 min(68vw, 260px); scroll-snap-align: start; }
@media (min-width: 600px) { .ez-insta > li { flex-basis: calc((100% - 2 * var(--ez-e3)) / 3.3); } }
@media (min-width: 1000px) {
	.ez-insta { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); overflow: visible; padding-bottom: 0; }
}
.ez-insta__post { position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden; background: var(--ez-encre); }
.ez-insta__post img { width: 100%; height: 100%; object-fit: cover; transition: transform 600ms var(--ez-courbe); }
.ez-insta__post:hover img { transform: scale(1.05); }
.ez-insta__reel { position: absolute; top: var(--ez-e3); right: var(--ez-e3); color: var(--ez-blanc); filter: drop-shadow(0 1px 3px rgba(30, 30, 62, 0.6)); }
.ez-insta__reel .ez-icone { fill: currentColor; stroke: none; }
.ez-insta__infos { position: absolute; left: 0; right: 0; bottom: 0; padding: var(--ez-e5) var(--ez-e3) var(--ez-e2); background: linear-gradient(0deg, rgba(43, 45, 109, 0.85), rgba(91, 62, 144, 0)); color: var(--ez-blanc); font-size: 0.8rem; }

/* =====================================================================
 * Vivant : le mouvement des pages (assets/js/vivant.js, démonstration /design-system#mouvement).
 * Motifs repris des visuels officiels : grille néon de la route, soleil, traînées lumineuses.
 * Uniquement transform et opacity ; « .ez-js » (posé dans _base.twig) n'existe pas si le visiteur
 * a demandé à réduire les mouvements : tout est alors à l'état final et immobile.
 * ===================================================================== */

/* Titres masqués jusqu'au découpage en mots (rendus d'office au bout de 3 s si le script manque) */
.ez-js:not(.ez-vivant-pret) main h1.ez-titre, .ez-js:not(.ez-vivant-pret) main h2.ez-titre { opacity: 0; animation: ez-secours 0s 3s forwards; }
@keyframes ez-secours { to { opacity: 1; } }

/* ---------- Titres mot par mot (comme le slogan) ---------- */
.ez-mot-v { display: inline-block; transform-origin: 50% 60%; }
.ez-mots:not(.est-vu) .ez-mot-v { opacity: 0; transform: translateY(0.35em) scale(1.18) rotate(-3deg); }
.ez-mots.est-vu .ez-mot-v { transition: opacity 420ms ease-out, transform 640ms var(--ez-courbe); transition-delay: calc(var(--i) * 110ms); }

/* ---------- Horizon : grille néon qui défile + soleil ---------- */
/* Bande d'horizon réservée sous le contenu : le texte ne passe jamais sur le soleil ni sur la grille vive.
   --ez-fuite : position du soleil et du point de fuite de la grille (vivant.js la lit), toujours alignés. */
.a-horizon { --ez-sol: clamp(100px, 13vw, 180px); --ez-soleil: clamp(84px, 11vw, 160px); --ez-fuite: 50%; position: relative; isolation: isolate; overflow: hidden; }
.a-horizon { padding-bottom: calc(var(--ez-section) * 0.4 + var(--ez-sol) + var(--ez-soleil) * 0.55); }
.ez-page-tete--courte.a-horizon { padding-bottom: calc(clamp(40px, 6vw, 72px) * 0.4 + var(--ez-sol) + var(--ez-soleil) * 0.55); }
.ez-horizon { position: absolute; z-index: -1; left: 0; right: 0; bottom: 0; height: var(--ez-sol); pointer-events: none; }
.ez-horizon__ciel { position: absolute; left: 0; right: 0; bottom: 100%; height: calc(var(--ez-soleil) * 1.1); overflow: hidden; }
.ez-horizon__astre { position: absolute; left: var(--ez-fuite); bottom: 0; width: var(--ez-soleil); height: var(--ez-soleil); margin-left: calc(var(--ez-soleil) / -2); }
/* Soleil : disque net, sans halo, coupé par la ligne d'horizon */
.ez-horizon__soleil { display: block; width: 100%; height: 100%; fill: var(--ez-corail); shape-rendering: geometricPrecision; transform: translateY(80%); transition: transform 2600ms var(--ez-courbe) 200ms; }
.est-leve .ez-horizon__soleil { transform: translateY(46%); }
.ez-horizon__sol { position: absolute; inset: 0; overflow: hidden; background: rgba(30, 30, 62, 0.38); }
.ez-horizon__sol::before { content: ""; position: absolute; z-index: 1; left: 0; right: 0; top: 0; height: 2px; background: var(--ez-corail); }
/* Grille : deux SVG à l'échelle 1 px dessinés par vivant.js. Rayons en traits fins (fixes), un peu estompés
   vers l'horizon où ils convergent ; lignes en rectangles d'épaisseur calculée, sur leur propre couche. */
.ez-horizon__rayons, .ez-horizon__lignes { position: absolute; inset: 0; width: 100%; height: 100%; shape-rendering: geometricPrecision; }
.ez-horizon__rayons { fill: none; stroke: var(--ez-corail); -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.35), #000 40%); mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.35), #000 40%); }
.ez-horizon__rayon { opacity: 0.8; }
.ez-horizon__rayon--loin { opacity: 0.35; }
.ez-horizon__lignes { fill: var(--ez-corail); will-change: transform; }
/* Crépuscule : au défilement, le ciel quadricolore passe au dégradé bicolore (opacité réglée par vivant.js) */
.ez-crepuscule { position: absolute; z-index: -2; inset: 0; background: var(--ez-degrade-bicolore); opacity: 0; pointer-events: none; }

/* ---------- Passages : TGV et Concorde (page Priorités, data-ez-passages, vivant.js) ---------- */
/* Calque devant le soleil et la grille, derrière le texte (qui ne descend jamais dans la bande d'horizon).
   Tailles en fractions du soleil. TGV à 0,044 soleil par mètre, rail sous l'horizon : la ligne d'horizon le
   coupe à 1,7 m, la hauteur des yeux. Concorde (avion = 1,35 soleil) juste au-dessus du soleil, dont il frôle
   le haut en passant ; vivant.js le fait monter de 0,15 soleil pendant la traversée. */
.ez-passages { position: absolute; z-index: -1; inset: 0; overflow: hidden; pointer-events: none; }
.ez-passage { position: absolute; left: 0; display: block; max-width: none; visibility: hidden; will-change: transform; }
.ez-passage--tgv { bottom: calc(var(--ez-sol) - var(--ez-soleil) * 0.075); width: calc(var(--ez-soleil) * 8.81); height: calc(var(--ez-soleil) * 0.243); }
.ez-passage--concorde { bottom: calc(var(--ez-sol) + var(--ez-soleil) * 0.39); width: calc(var(--ez-soleil) * 3.775); height: calc(var(--ez-soleil) * 0.262); }

/* ---------- Traînées ---------- */
/* Le trait corail des étiquettes se trace à l'arrivée */
.ez-js .ez-etiquette::after { transform: scaleX(0); transform-origin: 0 50%; transition: transform 900ms var(--ez-courbe) 150ms; }
.ez-js .ez-etiquette.est-trace::after { transform: none; }
/* Reflet des boutons principaux : une fois à l'arrivée des grands appels, puis au survol (traînée corail sur fond blanc) */
.ez-bouton--primaire { position: relative; overflow: hidden; isolation: isolate; }
.ez-bouton--primaire::after { content: ""; position: absolute; z-index: -1; top: -20%; bottom: -20%; left: 0; width: 42%; background: var(--ez-blanc); opacity: 0.5; transform: translateX(-160%) skewX(-24deg); pointer-events: none; }
.ez-bouton--primaire.est-balaye::after { animation: ez-balayage 1100ms var(--ez-courbe); }
.ez-bouton--primaire:hover::after { background: var(--ez-corail); animation: ez-balayage 800ms var(--ez-courbe); }
@keyframes ez-balayage { from { transform: translateX(-160%) skewX(-24deg); } to { transform: translateX(340%) skewX(-24deg); } }

/* ---------- Programme : numéros qui arrivent inclinés, traînée le long des priorités ---------- */
.ez-priorites__numero, .ez-programme__numero { align-self: flex-start; justify-self: start; transform-origin: 0 100%; }
.ez-js .ez-apparait .ez-priorites__numero, .ez-js .ez-apparait .ez-programme__numero { opacity: 0; transform: translateY(0.35em) rotate(-16deg) scale(1.3); transition: opacity 500ms ease-out 250ms, transform 900ms var(--ez-courbe) 250ms; }
.ez-js .ez-apparait.est-visible .ez-priorites__numero, .ez-js .ez-apparait.est-visible .ez-programme__numero { opacity: 1; transform: rotate(var(--ez-inclinaison)); }
.ez-js .ez-programme__item { position: relative; }
.ez-js .ez-programme__item::before { content: ""; position: absolute; left: -8px; top: 0; bottom: 0; width: 8px; background: var(--ez-corail); transform: scaleY(0); transform-origin: 50% 0; transition: transform 1200ms var(--ez-courbe) 300ms; }
.ez-js .ez-programme__item.est-visible::before { transform: none; }

/* ---------- Cartes : inclinaison sous la souris (vivant.js), appui au doigt ---------- */
.est-inclinee { transition: transform 160ms linear, box-shadow var(--ez-duree), background-color var(--ez-duree); }
@media (hover: none) {
	.ez-action:active, .ez-priorites a:active, a.ez-carte:active, .ez-insta__post:active { transform: scale(0.97); transition-duration: 90ms; }
}

/* ---------- Shorts : flèches et glisser ---------- */
.ez-courts-cadre { min-width: 0; }
.ez-courts { scroll-behavior: smooth; }
.ez-courts img { -webkit-user-drag: none; user-select: none; }
@media (hover: hover) and (pointer: fine) { .ez-courts { cursor: grab; } }
.ez-courts.est-glisse { scroll-snap-type: none; scroll-behavior: auto; cursor: grabbing; user-select: none; }
.ez-courts__nav { display: flex; justify-content: flex-end; gap: var(--ez-e2); margin-top: var(--ez-e2); }
.ez-courts__fleche { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 2px solid var(--ez-blanc); border-radius: 50%; background: transparent; color: var(--ez-blanc); cursor: pointer; transition: background-color var(--ez-duree), color var(--ez-duree), opacity var(--ez-duree); }
.ez-courts__fleche::before { content: ""; width: 11px; height: 11px; border: solid currentColor; border-width: 0 3px 3px 0; transform: translateX(3px) rotate(135deg); }
.ez-courts__fleche[data-sens="1"]::before { transform: translateX(-3px) rotate(-45deg); }
.ez-courts__fleche:hover:not(:disabled) { background: var(--ez-blanc); color: var(--ez-violet); }
.ez-courts__fleche:disabled { opacity: 0.35; cursor: default; }

/* ---------- Page introuvable : l'interlude des télévisions d'autrefois (404-programmes.twig, horloge dans ez.js) ---------- */
.ez-programmes__grille { display: grid; gap: var(--ez-e7); align-items: center; }
@media (min-width: 900px) { .ez-programmes__grille { grid-template-columns: minmax(280px, 440px) 1fr; } }
.ez-programmes__poste {
	justify-self: center; width: 100%; max-width: 440px; padding: 18px; border-radius: 26px;
	background: linear-gradient(160deg, #3b3160, #262046 55%, #1c1936);
	box-shadow: 0 40px 80px -34px rgba(0, 0, 0, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.14);
}
.ez-programmes__ecran {
	position: relative; overflow: hidden; aspect-ratio: 4 / 3; border-radius: 8% / 10%;
	display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5%; padding: 6%;
	background: radial-gradient(ellipse at 50% 42%, var(--ez-encre), #12112a 78%); box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.7);
}
.ez-programmes__ecran::after {
	content: ""; position: absolute; inset: 0; pointer-events: none;
	background: repeating-linear-gradient(180deg, rgba(0, 0, 0, 0.32) 0 1px, transparent 1px 3px), radial-gradient(ellipse 75% 70% at 50% 50%, transparent 60%, rgba(0, 0, 0, 0.5) 100%);
}
.ez-programmes__horloge { display: block; width: 54%; height: auto; overflow: visible; }
.ez-programmes__seconde { fill: rgba(238, 124, 111, 0.16); }
.ez-programmes__seconde.est-allume { fill: var(--ez-corail); }
.ez-programmes__heure { fill: var(--ez-blanc); opacity: 0.9; }
.ez-programmes__aiguille { stroke: var(--ez-blanc); stroke-linecap: round; }
.ez-programmes__aiguille--h { stroke-width: 6; }
.ez-programmes__aiguille--m { stroke-width: 4; }
.ez-programmes__axe { fill: var(--ez-corail); }
.ez-programmes__interlude {
	margin: 0; font-family: var(--ez-f-titre); font-size: clamp(0.75rem, 2.4vw, 1.05rem); line-height: 1.25; letter-spacing: 0.06em;
	text-align: center; text-transform: uppercase; color: var(--ez-turquoise); text-shadow: 0 0 8px rgba(69, 213, 222, 0.8);
}
.ez-programmes__actions { display: flex; flex-wrap: wrap; gap: var(--ez-e3); margin-top: var(--ez-e5); }
.ez-programmes__astuce { margin: var(--ez-e6) 0 0; font-size: 0.8125rem; font-weight: 300; opacity: 0.75; }
.ez-programmes__astuce kbd { display: inline-block; min-width: 1.7em; padding: 1px 5px; border: 1px solid rgba(255, 255, 255, 0.45); border-radius: 4px; font: inherit; text-align: center; }

/* ---------- Transitions entre pages (navigateurs récents ; les autres changent de page normalement) ---------- */
@view-transition { navigation: auto; }
.ez-entete { view-transition-name: ez-entete; }
::view-transition-old(root) { animation: ez-page-sortie 280ms var(--ez-courbe) both; }
::view-transition-new(root) { animation: ez-page-entree 520ms var(--ez-courbe) both; }
@keyframes ez-page-sortie { to { opacity: 0; transform: translateY(-28px); } }
@keyframes ez-page-entree { from { opacity: 0; transform: translateY(36px); } }

@media print {
	.ez-horizon, .ez-crepuscule, .ez-passages, .ez-courts__nav { display: none; }
	.ez-mot-v, .ez-apparait, .ez-apparait .ez-priorites__numero, .ez-apparait .ez-programme__numero { opacity: 1 !important; transform: none !important; }
}
@media (prefers-reduced-motion: reduce) {
	@view-transition { navigation: none; }
	.ez-horizon__soleil, .ez-etiquette::after { transition: none; }
	.ez-bouton--primaire::after { animation: none !important; }
	.ez-courts { scroll-behavior: auto; }
}


/* En-tête « actions » (Je partage) : le contenu utile tient au-dessus de l'horizon, dès l'arrivée sur la page */
.ez-page-tete--actions { padding-top: calc(76px + clamp(32px, 5vw, 64px)); }
.ez-page-tete--actions .ez-titre { margin-bottom: 0.6em; }
.ez-page-tete--actions .ez-chapo { margin-bottom: var(--ez-e5); }
.ez-page-tete .ez-reseau { background: var(--ez-blanc); color: var(--ez-encre); box-shadow: var(--ez-ombre); }
.ez-page-tete .ez-reseau .ez-titre { color: var(--ez-violet); }
.ez-reseau .ez-bouton--contour { border-color: var(--ez-violet); color: var(--ez-violet); }
.ez-reseau .ez-bouton--contour:hover { background: var(--ez-violet); color: var(--ez-blanc); }