/* ==========================================================================
   EYE PLAY — feuille de style principale
   Direction : magazine haut de gamme. Blanc tournant, cascade asymétrique.
   ========================================================================== */

:root {
	--ep-paper: #ffffff;
	--ep-ink: #0a0a0a;
	--ep-muted: #3a3a3a;
	--ep-accent: #d21f2b;
	--ep-max: 1760px;
	--ep-gutter: clamp(20px, 4.2vw, 72px);
	--ep-hair: rgba(10, 10, 10, 0.16);
	--ep-serif: "Playfair Display", "Times New Roman", Georgia, serif;
	--ep-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
	--ep-tracking: 0.18em;

	/* Deux niveaux de respiration seulement, appliqués partout : c'est ce qui
	   donne un rythme au blanc, au lieu de vides sans rapport entre eux. */
	--ep-breath: clamp(56px, 6vw, 130px);
	--ep-breath-lg: clamp(80px, 9vw, 200px);

	/* Décalage du hero vers la droite : le bloc est « posé » dans la page,
	   laissant un grand blanc à gauche — composition de magazine. */
	--ep-hero-offset: clamp(0px, 18vw, 340px);
}

/* ------------------------------------------------------------------ Base */

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

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
}

body.ep-body {
	margin: 0;
	padding: 0;
	background: var(--ep-paper);
	color: var(--ep-ink);
	font-family: var(--ep-sans);
	font-weight: 300;
	font-size: 16px;
	line-height: 1.7;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: hidden;
}

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

a {
	color: inherit;
	text-decoration: none;
}

button {
	font: inherit;
	color: inherit;
	background: none;
	border: 0;
	cursor: pointer;
}

.ep-skip {
	position: absolute;
	left: -9999px;
	top: 0;
}

.ep-skip:focus {
	left: 16px;
	top: 16px;
	z-index: 999;
	background: var(--ep-ink);
	color: #fff;
	padding: 10px 16px;
}

.ep-main {
	display: block;
}

/* ------------------------------------------------------------- Typographie */

.ep-display {
	font-family: var(--ep-serif);
	font-weight: 400;
	line-height: 0.94;
	letter-spacing: -0.02em;
	margin: 0;
	font-optical-sizing: auto;
}

.ep-display__line {
	display: block;
}

.ep-index {
	display: block;
	font-family: var(--ep-sans);
	font-size: 11px;
	letter-spacing: var(--ep-tracking);
	color: var(--ep-muted);
}

.ep-rule {
	display: block;
	width: 44px;
	height: 1px;
	margin: 14px 0 26px;
	background: var(--ep-ink);
}

.ep-prose {
	font-size: 15.5px;
	line-height: 1.92;
	color: var(--ep-muted);
	max-width: 60ch;
}

.ep-prose p {
	margin: 0 0 1.15em;
}

.ep-prose p:last-child {
	margin-bottom: 0;
}

.ep-prose strong {
	color: var(--ep-ink);
	font-weight: 500;
}

/* ------------------------------------------------------------- En-tête */

/* En-tête : collant, mais discret. Il reste joignable sans jamais imposer sa
   présence — il s'efface quand on descend, revient dès qu'on remonte. Sa
   hauteur ne change pas d'un état à l'autre : rien ne bouge dans la page. */
.ep-header {
	position: sticky;
	top: 0;
	z-index: 60;
	padding: clamp(20px, 2.4vw, 38px) var(--ep-gutter) clamp(14px, 1.5vw, 22px);
	border-bottom: 1px solid transparent;
	background: transparent;
	transition: background-color 0.5s ease, border-color 0.5s ease,
		transform 0.55s cubic-bezier(0.2, 0.6, 0.2, 1);
}

/* Passé le premier écran, la barre se pose sur le contenu. */
.ep-header.is-stuck {
	background: var(--ep-header-scrim);
	border-bottom-color: var(--ep-hair);
	-webkit-backdrop-filter: blur(14px);
	backdrop-filter: blur(14px);
}

/* Hors champ : la place d'origine reste réservée, la page ne se décale pas. */
.ep-header.is-hidden {
	transform: translateY(-101%);
}

/* Le filet de progression : la seule couleur de la barre. */
.ep-header__progress {
	position: absolute;
	left: 0;
	bottom: -1px;
	width: var(--ep-progress, 0%);
	height: 1px;
	background: var(--ep-accent);
	opacity: 0;
	transition: opacity 0.4s ease;
}

.ep-header.is-stuck .ep-header__progress {
	opacity: 1;
}

/* Compact : la signature s'efface, la marque se resserre. Par transformation,
   pour ne pas déplacer la barre d'un pixel. */
.ep-header.is-stuck .ep-brand {
	transform: scale(0.9);
}

.ep-header.is-stuck .ep-brand__tagline {
	opacity: 0;
}

.ep-header__inner {
	max-width: var(--ep-max);
	margin: 0 auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
}

.ep-brand {
	display: inline-flex;
	align-items: baseline;
	gap: 10px;
	flex-wrap: wrap;
	transform-origin: left center;
	transition: transform 0.5s cubic-bezier(0.2, 0.6, 0.2, 1);
}

.ep-brand__name {
	font-family: var(--ep-sans);
	font-weight: 500;
	font-size: 15px;
	letter-spacing: 0.34em;
	text-transform: uppercase;
}

.ep-brand__dot {
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--ep-accent);
	transform: translateY(-3px);
}

.ep-brand__tagline {
	font-size: 9.5px;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	color: var(--ep-muted);
	transition: opacity 0.4s ease;
}

/* Logo officiel : la hauteur pilote, la largeur suit le rapport du tracé SVG. */
.ep-brand__logo {
	display: block;
	height: clamp(30px, 3vw, 48px);
	width: auto;
	max-width: min(58vw, 380px);
}

.ep-brand__logo--footer {
	height: clamp(24px, 2.2vw, 34px);
}

.ep-nav__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	align-items: center;
	gap: clamp(18px, 2.6vw, 46px);
}

.ep-nav__list a {
	font-size: 10px;
	letter-spacing: var(--ep-tracking);
	text-transform: uppercase;
	color: var(--ep-muted);
	position: relative;
	padding-bottom: 3px;
}

.ep-nav__list a::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 0;
	height: 1px;
	background: var(--ep-accent);
	transition: width 0.5s cubic-bezier(0.2, 0.6, 0.2, 1);
}

.ep-nav__list a:hover {
	color: var(--ep-ink);
}

.ep-nav__list a:hover::after {
	width: 100%;
}

.ep-burger {
	display: none;
	width: 34px;
	height: 22px;
	position: relative;
}

.ep-burger span {
	position: absolute;
	left: 0;
	width: 100%;
	height: 1px;
	background: var(--ep-ink);
	transition: transform 0.4s ease, opacity 0.3s ease;
}

.ep-burger span:first-child {
	top: 6px;
}

.ep-burger span:last-child {
	bottom: 6px;
}

.ep-burger[aria-expanded="true"] span:first-child {
	transform: translateY(5px) rotate(8deg);
}

.ep-burger[aria-expanded="true"] span:last-child {
	transform: translateY(-5px) rotate(-8deg);
}

/* --------------------------------------------------------------- Hero */

.ep-hero {
	max-width: var(--ep-max);
	margin: 0 auto;
	padding: clamp(50px, 7vw, 130px) var(--ep-gutter) var(--ep-breath) calc(var(--ep-gutter) + var(--ep-hero-offset));
	display: grid;
	grid-template-columns: minmax(0, 58fr) minmax(0, 42fr);
	gap: clamp(40px, 7vw, 150px);
	align-items: start;
}

.ep-media {
	position: relative;
	display: block;
	overflow: hidden;
	background: #f2f2f0;
}

.ep-media__frame {
	display: block;
	position: relative;
	overflow: hidden;
}

.ep-media__img,
.ep-media__video {
	width: 100%;
	height: auto;
	display: block;
	transition: transform 1.4s cubic-bezier(0.2, 0.6, 0.2, 1);
}

.ep-media__placeholder,
.ep-media__frame--empty {
	display: block;
	width: 100%;
	padding-top: 62%;
	background: linear-gradient(135deg, #ececea 0%, #dcdcd8 100%);
}

.ep-media--showreel .ep-media__frame {
	aspect-ratio: 16 / 9;
	background: #eaeae7;
}

.ep-media--showreel .ep-media__placeholder {
	padding-top: 0;
	height: 100%;
}

.ep-media--showreel .ep-media__frame img,
.ep-media--showreel .ep-media__frame video {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Visuel fourni : on respecte son cadrage d'origine au lieu de le rogner. */
.ep-media--showreel.ep-media--natural .ep-media__frame {
	aspect-ratio: auto;
	background: transparent;
}

.ep-media--showreel.ep-media--natural .ep-media__frame img {
	height: auto;
	object-fit: contain;
}

.ep-play {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: clamp(64px, 6vw, 96px);
	height: clamp(64px, 6vw, 96px);
	display: grid;
	place-items: center;
	border-radius: 50%;
}

.ep-play__ring {
	position: absolute;
	inset: 0;
	border: 1px solid rgba(255, 255, 255, 0.85);
	border-radius: 50%;
	transition: transform 0.7s cubic-bezier(0.2, 0.6, 0.2, 1), background 0.5s ease;
}

.ep-play__triangle {
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 7px 0 7px 12px;
	border-color: transparent transparent transparent #fff;
	margin-left: 3px;
	position: relative;
}

.ep-play:hover .ep-play__ring {
	transform: scale(1.12);
	background: rgba(210, 31, 43, 0.55);
	border-color: rgba(210, 31, 43, 0.9);
}

.ep-hero__meta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	margin-top: 20px;
	font-size: 10px;
	letter-spacing: var(--ep-tracking);
	text-transform: uppercase;
	color: var(--ep-muted);
}

.ep-hero__timecode {
	color: var(--ep-ink);
	font-variant-numeric: tabular-nums;
}

.ep-link-arrow {
	display: inline-block;
	font-size: 10px;
	letter-spacing: var(--ep-tracking);
	text-transform: uppercase;
	color: var(--ep-ink);
	border-bottom: 1px solid var(--ep-hair);
	padding-bottom: 3px;
	transition: color 0.4s ease, border-color 0.4s ease;
}

.ep-link-arrow:hover {
	color: var(--ep-accent);
	border-color: var(--ep-accent);
}

.ep-hero__media {
	min-width: 0;
}

/* Visuel large (format cinéma) : on lui donne plus de largeur pour équilibrer
   la colonne éditoriale, sans rogner l'image. */
.ep-hero--natural {
	grid-template-columns: minmax(0, 63fr) minmax(0, 37fr);
	gap: clamp(38px, 6vw, 118px);
}

/* Visuel au format portrait : on resserre la colonne média pour que le hero
   reste une double page, pas une colonne interminable. */
.ep-hero--vertical {
	grid-template-columns: minmax(0, 56fr) minmax(0, 44fr);
	gap: clamp(36px, 4.5vw, 90px);
}

.ep-hero--vertical .ep-hero__media {
	max-width: 720px;
}

.ep-hero__about {
	padding-top: clamp(0px, 2vw, 26px);
}

/* Colonne éditoriale : on garde de l'air à droite du texte. */
.ep-hero--natural .ep-hero__about .ep-prose,
.ep-hero--natural .ep-hero__about .ep-skills {
	max-width: 46ch;
}

.ep-display--about {
	font-size: clamp(78px, 10.2vw, 196px);
	margin-bottom: clamp(28px, 3.2vw, 54px);
}

/* Compétences : présentation éditoriale, pas de cartes ni de pictos. */

.ep-skills {
	margin: clamp(48px, 6vw, 96px) 0 0;
	padding: 0;
	border-top: 1px solid var(--ep-hair);
	max-width: 62ch;
}

.ep-skills__row {
	display: grid;
	grid-template-columns: minmax(0, 0.42fr) minmax(0, 0.58fr);
	gap: 18px;
	padding: 15px 0;
	border-bottom: 1px solid var(--ep-hair);
}

.ep-skills__label {
	margin: 0;
	font-size: 10px;
	letter-spacing: var(--ep-tracking);
	text-transform: uppercase;
	color: var(--ep-ink);
}

.ep-skills__value {
	margin: 0;
	font-size: 12.5px;
	line-height: 1.75;
	color: var(--ep-muted);
}

/* ---------------------------------------------------- Respiration / manifest */

.ep-manifest {
	max-width: var(--ep-max);
	margin: 0 auto;
	/* La respiration basse est un peu plus ample : la phrase manifeste agit
	   comme une double page, la cascade doit démarrer plus loin. */
	padding: var(--ep-breath) var(--ep-gutter) calc(var(--ep-breath-lg) + 48px);
}

.ep-display--manifest {
	font-size: clamp(46px, 7.2vw, 142px);
	max-width: 15ch;
}

.ep-display--manifest .ep-display__line:nth-child(2) {
	font-style: italic;
	padding-left: clamp(0px, 6vw, 130px);
}

.ep-manifest__sub {
	margin: clamp(36px, 4.2vw, 70px) 0 0;
	font-size: 10px;
	letter-spacing: 0.46em;
	text-transform: uppercase;
	color: var(--ep-muted);
}

/* -------------------------------------------------------------- Cascade */

.ep-projects {
	max-width: var(--ep-max);
	margin: 0 auto;
	padding: 0 var(--ep-gutter) var(--ep-breath-lg);
}

.ep-cascade {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	column-gap: 0;
	row-gap: 0;
}

.ep-cascade__empty {
	font-size: 13px;
	color: var(--ep-muted);
	letter-spacing: 0.06em;
	padding: 40px 0;
}

.ep-item {
	margin: 0;
	display: flex;
	flex-wrap: nowrap;
	align-items: flex-end;
	gap: clamp(12px, 1.3vw, 26px);
	min-width: 0;
}

.ep-item .ep-media {
	flex: 1 1 0%;
	min-width: 0;
}

.ep-item--caption-left {
	flex-direction: row-reverse;
}

.ep-item--caption-below,
.ep-item--caption-above {
	align-items: flex-start;
}

.ep-item--caption-below {
	flex-direction: column;
}

.ep-item--caption-above {
	flex-direction: column-reverse;
}

/* En colonne, la base flexible porte sur la hauteur : on la neutralise. */
.ep-item--caption-below .ep-media,
.ep-item--caption-above .ep-media {
	flex: 0 0 auto;
	width: 100%;
}

.ep-media__frame img {
	width: 100%;
	height: auto;
}

.ep-item--portrait .ep-media__img {
	aspect-ratio: 3 / 4;
	object-fit: cover;
}

.ep-item--landscape .ep-media__img {
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

.ep-item--square .ep-media__img {
	aspect-ratio: 1 / 1;
	object-fit: cover;
}

/* Cadrage d'origine : aucune règle n'est nécessaire. Sans classe d'orientation,
   l'image conserve son rapport natif (et sa hauteur est réservée d'après les
   attributs width/height, donc aucun saut de mise en page au chargement).
   Ne surtout pas écrire `aspect-ratio: auto` ici : cela écraserait le rapport
   déduit des attributs et la hauteur tomberait à zéro avant chargement. */

/* ------------------------------------------------------- Parallaxe */

/* Vidéo de couverture : même comportement qu'une image dans la cascade. */
.ep-media__video--cover {
	width: 100%;
	height: auto;
	display: block;
	object-fit: cover;
	transition: transform 1.4s cubic-bezier(0.2, 0.6, 0.2, 1);
}

.ep-item--portrait .ep-media__video--cover {
	aspect-ratio: 3 / 4;
}

.ep-item--landscape .ep-media__video--cover {
	aspect-ratio: 16 / 9;
}

.ep-item--square .ep-media__video--cover {
	aspect-ratio: 1 / 1;
}

/* Capsule vidéo intégrée : cadre 16/9, lecteur injecté seulement à l'entrée
   dans l'écran (le poster tient la place jusque-là). */
.ep-embed {
	display: block;
	position: relative;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: #0a0a0a;
}

.ep-embed .ep-embed__poster {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: opacity 0.6s ease;
}

.ep-embed[data-ep-embed-ready] .ep-embed__poster {
	opacity: 0;
}

.ep-embed iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
}

/* Le décalage porte sur le CONTENANT — le bloc projet, ou la colonne média du
   hero — et non sur l'image à l'intérieur. Conséquences : aucun recadrage,
   aucun cadrage modifié, et aucune marge interne à réserver.
   On utilise la propriété `translate` (et non `transform`) afin de ne pas
   entrer en conflit avec l'animation d'apparition, qui utilise `transform`. */
html.ep-parallax [data-ep-parallax] {
	translate: var(--ep-px, 0px) var(--ep-py, 0px);
	will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
	html.ep-parallax [data-ep-parallax] {
		translate: none;
		will-change: auto;
	}
}

/* Les blocs ne sont plus cliquables : plus de voile, plus de zoom, plus de
   pastille au survol. Le curseur reste neutre — rien ne doit promettre une
   action qui n'existe pas. */

/* Légendes minuscules. */

.ep-caption {
	flex: 0 0 auto;
	width: clamp(92px, 8.5vw, 130px);
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
	margin: 0;
	padding-bottom: 4px;
}

.ep-item--caption-below .ep-caption,
.ep-item--caption-above .ep-caption {
	width: auto;
	flex-direction: row;
	align-items: center;
	gap: 14px;
}

.ep-caption__index {
	font-size: 11px;
	letter-spacing: var(--ep-tracking);
	color: var(--ep-accent);
}

.ep-caption__rule {
	width: 22px;
	height: 1px;
	background: var(--ep-hair);
}

.ep-caption__lines {
	display: flex;
	flex-direction: column;
	gap: 3px;
}

.ep-item--caption-below .ep-caption__lines,
.ep-item--caption-above .ep-caption__lines {
	flex-direction: row;
	gap: 14px;
	flex-wrap: wrap;
}

.ep-caption__client {
	font-size: 10.5px;
	letter-spacing: var(--ep-tracking);
	text-transform: uppercase;
	color: var(--ep-ink);
}

.ep-caption__meta {
	font-size: 9.5px;
	letter-spacing: var(--ep-tracking);
	text-transform: uppercase;
	color: var(--ep-muted);
}

/* --------------------------------------------------------------- Corporate */

.ep-corporate {
	max-width: var(--ep-max);
	margin: 0 auto;
	padding: var(--ep-breath-lg) var(--ep-gutter) var(--ep-breath-lg);
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 4fr);
	gap: clamp(40px, 8vw, 170px);
	align-items: end;
}

.ep-display--corporate {
	font-size: clamp(44px, 5.8vw, 112px);
	margin-bottom: clamp(24px, 3vw, 44px);
}

.ep-display--corporate .ep-display__line:nth-child(2) {
	font-style: italic;
}

.ep-corporate__body {
	max-width: 44ch;
	font-size: 15px;
	line-height: 1.85;
	color: var(--ep-muted);
	margin: 0 0 clamp(24px, 3vw, 42px);
}

/* Bloc de sortie d'une cascade : même grille que le bloc corporate, pour que
   la page se referme sur la même respiration qu'elle s'est ouverte. */
.ep-outro {
	max-width: var(--ep-max);
	margin: 0 auto;
	padding: var(--ep-breath-lg) var(--ep-gutter) var(--ep-breath-lg);
	border-top: 1px solid var(--ep-hair);
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 4fr);
	gap: clamp(40px, 8vw, 170px);
	align-items: end;
}

.ep-display--outro {
	font-size: clamp(38px, 4.8vw, 92px);
	margin-bottom: clamp(20px, 2.4vw, 34px);
}

.ep-display--outro .ep-display__line:nth-child(2) {
	font-style: italic;
}

.ep-outro__body {
	max-width: 44ch;
	font-size: 15px;
	line-height: 1.85;
	color: var(--ep-muted);
	margin: 0;
}

.ep-link-arrow--outro {
	justify-self: end;
	align-self: end;
}

@media (max-width: 900px) {
	.ep-outro {
		grid-template-columns: minmax(0, 1fr);
		gap: clamp(28px, 6vw, 48px);
	}

	.ep-link-arrow--outro {
		justify-self: start;
	}
}

/* -------------------------------------------------- Formulaire de contact */

/* Bloc plein : il coupe le rythme de la page, bord à bord. Trois tenues —
   noir, rouge de la maison, papier — réglées depuis le personnaliseur.
   Tout l'intérieur se teinte à partir de ces cinq variables. */
.ep-contact {
	--epc-bg: #0a0a0a;
	--epc-ink: #ffffff;
	--epc-soft: rgba(255, 255, 255, 0.74);
	--epc-line: rgba(255, 255, 255, 0.34);
	--epc-focus: #ffffff;
	--epc-accent: var(--ep-accent);

	padding: var(--ep-breath-lg) var(--ep-gutter);
	background: var(--epc-bg);
	color: var(--epc-ink);
	color-scheme: dark;
}

.ep-contact--rouge {
	--epc-bg: var(--ep-accent);
	--epc-soft: rgba(255, 255, 255, 0.88);
	--epc-line: rgba(255, 255, 255, 0.5);
	--epc-accent: #0a0a0a;
}

.ep-contact--papier {
	--epc-bg: var(--ep-paper);
	--epc-ink: var(--ep-ink);
	--epc-soft: var(--ep-muted);
	--epc-line: var(--ep-hair);
	--epc-focus: var(--ep-ink);
	--epc-accent: var(--ep-accent);
	color-scheme: light;
}

/* Le contenu garde la mesure du site, le fond déborde. */
.ep-contact__inner {
	max-width: var(--ep-max);
	margin: 0 auto;
	display: grid;
	grid-template-columns: minmax(0, 4fr) minmax(0, 6fr);
	gap: clamp(40px, 8vw, 170px);
	align-items: start;
}

/* Le filet suit la couleur du texte : lisible sur les trois fonds. */
.ep-contact .ep-rule {
	background: currentColor;
}

.ep-display--contact {
	font-size: clamp(38px, 4.8vw, 92px);
	margin-bottom: clamp(20px, 2.4vw, 34px);
}

.ep-display--contact .ep-display__line:nth-child(2) {
	font-style: italic;
}

.ep-contact__text {
	max-width: 34ch;
	font-size: 15px;
	line-height: 1.85;
	color: var(--epc-soft);
	margin: 0;
}

/* Champs réduits à un filet : rien à encadrer, seul le trait compte. */
.ep-form {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(26px, 3vw, 46px) clamp(24px, 3vw, 54px);
	margin: 0;
}

.ep-field {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin: 0;
	min-width: 0;
}

.ep-field--wide {
	grid-column: 1 / -1;
}

.ep-field__label {
	font-size: 9.5px;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	color: var(--epc-soft);
}

.ep-field input,
.ep-field textarea {
	width: 100%;
	border: 0;
	border-bottom: 1px solid var(--epc-line);
	border-radius: 0;
	background: transparent;
	color: var(--epc-ink);
	font-family: var(--ep-sans);
	font-size: 16px;
	font-weight: 300;
	line-height: 1.6;
	padding: 6px 0 10px;
	resize: vertical;
	transition: border-color 0.4s ease;
	-webkit-appearance: none;
	appearance: none;
}

.ep-field input:focus,
.ep-field textarea:focus {
	outline: none;
	border-color: var(--epc-focus);
}

/* Le remplissage automatique ne doit pas repeindre un fond clair sur le noir. */
.ep-field input:-webkit-autofill {
	-webkit-text-fill-color: var(--epc-ink);
	transition: background-color 9999s ease-out;
}

/* Pot de miel : hors écran, invisible pour un humain. */
.ep-form__pot {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
	margin: 0;
}

.ep-form__foot {
	grid-column: 1 / -1;
	display: flex;
	align-items: baseline;
	gap: 24px;
	flex-wrap: wrap;
}

/* Sans message d'état, le bouton reste seul : il s'aligne alors sur les champs
   plutôt que de filer à l'autre bout de la page. */
.ep-form__note {
	max-width: 42ch;
	margin: 0 0 0 auto;
	font-size: 13px;
	line-height: 1.7;
	color: var(--epc-soft);
}

.ep-form__submit {
	padding: 0 0 3px;
	border: 0;
	border-bottom: 1px solid var(--epc-line);
	background: none;
	font-family: var(--ep-sans);
	font-size: 10px;
	letter-spacing: var(--ep-tracking);
	text-transform: uppercase;
	color: var(--epc-ink);
	cursor: pointer;
	transition: color 0.4s ease, border-color 0.4s ease;
	-webkit-appearance: none;
	appearance: none;
}

.ep-form__submit:hover,
.ep-form__submit:focus {
	color: var(--epc-accent);
	border-color: var(--epc-accent);
	outline: none;
}

.ep-form__note--ko {
	color: var(--epc-accent);
}

@media (max-width: 900px) {
	.ep-contact__inner {
		grid-template-columns: minmax(0, 1fr);
		gap: clamp(28px, 6vw, 48px);
	}

	.ep-form {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ------------------------------------------------------------- Pied de page */

.ep-footer {
	border-top: 1px solid var(--ep-hair);
	padding: clamp(48px, 6vw, 96px) var(--ep-gutter) clamp(30px, 3vw, 48px);
}

.ep-footer__inner {
	max-width: var(--ep-max);
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 40px;
	flex-wrap: wrap;
}

.ep-footer__brand {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.ep-footer__contact {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 6px;
	text-align: right;
}

.ep-footer__link {
	font-size: 12px;
	letter-spacing: 0.1em;
	color: var(--ep-ink);
	border-bottom: 1px solid transparent;
	transition: border-color 0.4s ease, color 0.4s ease;
}

.ep-footer__link:hover {
	color: var(--ep-accent);
	border-color: var(--ep-accent);
}

.ep-footer__address {
	font-style: normal;
	font-size: 12px;
	letter-spacing: 0.06em;
	line-height: 1.8;
	color: var(--ep-muted);
}

.ep-footer__legal {
	max-width: var(--ep-max);
	margin: clamp(40px, 5vw, 72px) auto 0;
	font-size: 9.5px;
	letter-spacing: var(--ep-tracking);
	text-transform: uppercase;
	color: var(--ep-muted);
}

/* --------------------------------------------------- Pages, articles, blog */

.ep-article,
.ep-projet,
.ep-archive {
	max-width: var(--ep-max);
	margin: 0 auto;
	padding: clamp(70px, 9vw, 170px) var(--ep-gutter) clamp(80px, 10vw, 190px);
}

.ep-display--page,
.ep-display--projet {
	font-size: clamp(46px, 7vw, 132px);
}

.ep-article__cover,
.ep-projet__cover,
.ep-projet__gallery-item {
	margin: clamp(40px, 6vw, 100px) 0;
}

.ep-article__body,
.ep-projet__body {
	margin-top: clamp(32px, 4vw, 64px);
}

.ep-projet__meta {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 18px;
	margin: clamp(24px, 3vw, 40px) 0 0;
	padding: 0;
	font-size: 10px;
	letter-spacing: var(--ep-tracking);
	text-transform: uppercase;
	color: var(--ep-muted);
}

.ep-projet__film {
	margin: clamp(40px, 6vw, 100px) 0;
}

.ep-projet__video {
	width: 100%;
	background: #000;
}

.ep-projet__gallery {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	gap: clamp(20px, 3vw, 60px);
}

.ep-projet__gallery-item {
	margin: 0;
	grid-column: span 6;
}

.ep-projet__gallery-item:nth-child(3n) {
	grid-column: 4 / span 6;
}

.ep-projet__credits {
	margin-top: clamp(50px, 7vw, 120px);
	max-width: 52ch;
	font-size: 12px;
	letter-spacing: 0.04em;
	line-height: 1.9;
	color: var(--ep-muted);
}

.ep-archive__head {
	margin-bottom: clamp(40px, 6vw, 100px);
}

/* Page à cascade (corporate et autres pages éditoriales). */
.ep-page-cascade__head {
	max-width: var(--ep-max);
	margin: 0 auto;
	padding: clamp(70px, 9vw, 170px) var(--ep-gutter) clamp(30px, 5vw, 80px);
}

.ep-page-cascade__head .ep-prose {
	margin-top: clamp(24px, 3vw, 44px);
}

.ep-page-cascade .ep-projects {
	padding-top: 0;
}

.ep-archive__list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(30px, 5vw, 90px);
}

.ep-archive__item {
	margin: 0;
}

.ep-archive__meta {
	display: flex;
	justify-content: space-between;
	gap: 14px;
	margin-top: 14px;
}

.ep-cascade--archive {
	padding-bottom: 0;
}

.ep-empty {
	color: var(--ep-muted);
	font-size: 13px;
}

/* ------------------------------------------------------- Animations douces */

html.ep-js .ep-body [data-ep-reveal] {
	opacity: 0;
	transform: translateY(38px);
}

html.ep-js .ep-body [data-ep-reveal].is-visible {
	opacity: 1;
	transform: none;
	transition: opacity 1.1s cubic-bezier(0.2, 0.6, 0.2, 1), transform 1.1s cubic-bezier(0.2, 0.6, 0.2, 1);
}

.ep-display[data-ep-reveal].is-visible,
[data-ep-reveal].is-visible .ep-display__line {
	transition-delay: 0.1s;
}

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

	html.ep-js .ep-body [data-ep-reveal] {
		opacity: 1;
		transform: none;
		transition: none;
	}

	/* La barre reste en place : ni glissement, ni effacement. */
	.ep-header,
	.ep-brand,
	.ep-brand__tagline {
		transition: none;
	}

	.ep-header.is-hidden {
		transform: none;
	}
}

/* ------------------------------------------------------- Curseur discret */

.ep-cursor {
	display: none;
}

@media (hover: hover) and (pointer: fine) {
	.ep-body.ep-has-cursor .ep-cursor {
		display: block;
		position: fixed;
		left: 0;
		top: 0;
		width: 10px;
		height: 10px;
		border-radius: 50%;
		background: var(--ep-accent);
		pointer-events: none;
		z-index: 9999;
		transform: translate(-50%, -50%);
		mix-blend-mode: multiply;
		transition: width 0.35s cubic-bezier(0.2, 0.6, 0.2, 1), height 0.35s cubic-bezier(0.2, 0.6, 0.2, 1), opacity 0.3s ease;
		opacity: 0;
	}

	.ep-body.ep-has-cursor.ep-cursor-on .ep-cursor {
		opacity: 1;
	}

	.ep-body.ep-has-cursor.ep-cursor-hover .ep-cursor {
		width: 46px;
		height: 46px;
		background: rgba(210, 31, 43, 0.35);
	}
}

/* ------------------------------------------------- Lecteur plein écran */

.ep-lightbox {
	position: fixed;
	inset: 0;
	z-index: 10000;
	background: rgba(8, 8, 8, 0.94);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: clamp(16px, 5vw, 80px);
	animation: ep-fade-in 0.5s cubic-bezier(0.2, 0.6, 0.2, 1);
}

.ep-lightbox[hidden] {
	display: none;
}

.ep-lightbox__frame {
	width: min(1440px, 100%);
	aspect-ratio: 16 / 9;
	background: #000;
}

.ep-lightbox__frame iframe {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}

.ep-lightbox__close {
	position: absolute;
	top: clamp(14px, 2vw, 30px);
	right: clamp(14px, 2vw, 30px);
	width: 46px;
	height: 46px;
	border-radius: 50%;
	border: 1px solid rgba(255, 255, 255, 0.45);
	color: #fff;
	font-size: 22px;
	line-height: 1;
	display: grid;
	place-items: center;
	transition: background 0.4s ease, border-color 0.4s ease;
}

.ep-lightbox__close:hover {
	background: var(--ep-accent);
	border-color: transparent;
}

body.ep-lightbox-open {
	overflow: hidden;
}

@keyframes ep-fade-in {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

/* ------------------------------------------------------------ Responsive */

@media (max-width: 1180px) {
	.ep-hero {
		grid-template-columns: minmax(0, 1fr);
		gap: clamp(40px, 8vw, 80px);
		padding-left: var(--ep-gutter);
	}

	.ep-hero__about {
		max-width: 640px;
	}

	.ep-corporate {
		grid-template-columns: minmax(0, 1fr);
		gap: 40px;
	}
}

@media (max-width: 980px) {
	.ep-nav {
		position: absolute;
		right: var(--ep-gutter);
		top: calc(100% + 10px);
		background: var(--ep-paper);
		border: 1px solid var(--ep-hair);
		padding: 18px 22px;
		display: none;
	}

	.ep-nav.is-open {
		display: block;
	}

	.ep-nav__list {
		flex-direction: column;
		align-items: flex-start;
		gap: 14px;
	}

	.ep-burger {
		display: block;
	}

	.ep-header__inner {
		position: relative;
		align-items: center;
	}

	/* La cascade conserve son caractère : largeurs variées et décalages. */
	.ep-cascade {
		display: block;
	}

	.ep-item {
		margin-left: 0;
		margin-right: 0;
	}

	.ep-item--size-xs {
		width: 42%;
	}

	.ep-item--size-small {
		width: 56%;
	}

	.ep-item--size-medium {
		width: 74%;
	}

	.ep-item--size-large {
		width: 88%;
	}

	.ep-item--size-xl,
	.ep-item--size-wide,
	.ep-item--size-full {
		width: 100%;
	}

	.ep-item--align-left {
		margin-right: auto;
	}

	.ep-item--align-center-left {
		margin-left: 8%;
		margin-right: auto;
	}

	.ep-item--align-center {
		margin-left: auto;
		margin-right: auto;
	}

	.ep-item--align-center-right {
		margin-right: 8%;
		margin-left: auto;
	}

	.ep-item--align-right {
		margin-left: auto;
	}

	.ep-caption {
		width: auto;
	}

	.ep-footer__inner {
		flex-direction: column;
	}

	.ep-footer__contact {
		align-items: flex-start;
		text-align: left;
	}
}

@media (max-width: 640px) {
	.ep-brand__tagline {
		display: none;
	}

	.ep-display--about {
		font-size: clamp(62px, 22vw, 110px);
	}

	.ep-skills__row {
		grid-template-columns: minmax(0, 1fr);
		gap: 6px;
	}

	.ep-item--caption-left,
	.ep-item--caption-below,
	.ep-item--caption-above {
		flex-direction: column;
		align-items: flex-start;
	}

	.ep-projet__gallery-item,
	.ep-projet__gallery-item:nth-child(3n) {
		grid-column: span 12;
	}

	.ep-archive__list {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ------------------------------------------------------------- WordPress */

.alignleft {
	float: left;
	margin: 0 24px 24px 0;
}

.alignright {
	float: right;
	margin: 0 0 24px 24px;
}

.aligncenter {
	display: block;
	margin: 0 auto 24px;
}

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}