/* ==========================================================================
   Timagin — styles du site
   ========================================================================== */

@font-face {
	font-family: "Archivo";
	src: url("../fonts/archivo-variable.woff2") format("woff2");
	font-weight: 300 800; /* police allégée : graisses 300 à 800, largeurs 72 % à 100 %, caractères latins */
	font-stretch: 72% 100%;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "IBM Plex Mono";
	src: url("../fonts/ibm-plex-mono-400.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "IBM Plex Mono";
	src: url("../fonts/ibm-plex-mono-500.woff2") format("woff2");
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}

:root {
	--bg: #0F0F0E;
	--bg-alt: #161614;
	--surface: #1E1E1B;
	--surface-2: #1A1A18;
	--line: #2A2A27;
	--line-strong: #4A4944;
	--text: #F2F0EB;
	--text-soft: #D6D3CA;
	--muted: #D6D3CA; /* texte courant : même gris que --text-soft, un seul gris pour tous les paragraphes */
	--muted-2: #A8A59C;
	--faint: #8C897F;
	--paper: #F2F0EB;
	--ink: #0F0F0E;
	--ink-soft: #3D3C38;
	--or: #D2AE62;
	--cyan: #5CC8D6;
	--error: #E2674A;
	--sans: "Archivo", "Helvetica Neue", Helvetica, sans-serif;
	--mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
	--gutter: clamp(16px, 4vw, 64px);
	--section: clamp(72px, 9vw, 112px);
}

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

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 24px; }

body {
	margin: 0;
	background: var(--bg);
	color: var(--text);
	font-family: var(--sans);
	font-size: 17px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

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

a { color: inherit; text-decoration: none; transition: color .2s ease, border-color .2s ease, background-color .2s ease; }
a:hover { color: var(--or); }

p { margin: 0; }
h1, h2, h3, h4 { margin: 0; font-weight: 700; }
ul, ol, dl, dd, figure { margin: 0; padding: 0; }
ul, ol { list-style: none; }
button { font: inherit; color: inherit; }

:focus-visible { outline: 2px solid var(--or); outline-offset: 3px; }

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

.skip-link {
	position: absolute;
	left: 16px; top: -100px;
	z-index: 100;
	padding: 12px 20px;
	background: var(--or);
	color: var(--ink);
	font-weight: 600;
}
.skip-link:focus { top: 16px; color: var(--ink); }

[hidden] { display: none !important; }

/* Mise en page ----------------------------------------------------------- */

.container { width: 100%; max-width: 1312px; margin: 0 auto; padding-inline: var(--gutter); }

.section { padding-block: var(--section); }
.section--tight { padding-top: 0; }
.section--rule { border-top: 1px solid var(--line); }
.section--alt { background: var(--bg-alt); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.section--alt + .section--rule { border-top: 0; }

.section__head { display: flex; flex-direction: column; gap: 10px; margin-bottom: 56px; }
.section__head--split { flex-direction: row; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 32px; margin-bottom: 48px; }
.section__head--split > div { display: flex; flex-direction: column; gap: 10px; }

.grid { display: grid; gap: 40px 32px; }
.grid--cards { grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 56px 32px; }
/* Sélection de l'accueil (3 films) : jamais de film seul sur sa ligne. */
@media (min-width: 700px) and (max-width: 1099px) {
	.grid--selection > :first-child:nth-last-child(3) { grid-column: 1 / -1; }
}
@media (min-width: 1100px) {
	.grid--selection { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }

.split { display: flex; flex-wrap: wrap; align-items: center; gap: 48px 72px; }
.split__text { flex: 1 1 420px; min-width: 0; display: flex; flex-direction: column; gap: 20px; align-items: flex-start; }
.split__media { flex: 1 1 420px; min-width: 0; }

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

.mono { font-family: var(--mono); font-size: 12px; letter-spacing: .08em; }
.eyebrow {
	font-family: var(--mono);
	font-size: 12px;
	font-weight: 400;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--or);
	margin: 0;
}
.h1, .h2, .cta__title, .next__title {
	font-weight: 800;
	font-stretch: 72%;
	text-transform: uppercase;
	letter-spacing: -.005em;
	text-wrap: balance;
}
/* Deux tailles de titres seulement : les titres de page (h1) et les titres de section (h2).
   Le titre posé sur une image (pages des services, Réalisations) est un peu plus petit, pour tenir dans sa colonne. */
.h1 { font-size: clamp(48px, 7vw, 96px); line-height: .9; }
.h1--projet { max-width: 1100px; }
.h1--page { margin-bottom: 40px; }
.h2 { font-size: clamp(40px, 5vw, 72px); line-height: .95; font-stretch: 75%; }

.lead { color: var(--muted); font-size: clamp(18px, 1.6vw, 20px); max-width: 640px; }
.subtitle { font-weight: 300; font-size: clamp(22px, 2.4vw, 30px); line-height: 1.25; }
.muted { color: var(--muted); }
.mono.muted { color: var(--muted-2); }
.accent-cyan { color: var(--cyan) !important; }
.accent-gold { color: var(--or); }
.num { font-family: var(--mono); font-size: 13px; color: var(--cyan); }

.prose { max-width: 760px; }
.prose > * + * { margin-top: 1em; }
.prose h2 { font-weight: 800; font-stretch: 75%; text-transform: uppercase; font-size: clamp(26px, 3vw, 36px); line-height: 1; margin-top: 48px; }
.prose h3 { font-size: 22px; margin-top: 32px; }
.prose a { text-decoration: underline; text-underline-offset: 3px; }
.prose ul { list-style: disc; padding-left: 1.2em; }
.prose ol { list-style: decimal; padding-left: 1.2em; }
.prose--lead > p:first-child { font-weight: 300; font-size: clamp(22px, 2.4vw, 30px); line-height: 1.35; color: var(--text); }
.prose--lead > p:not(:first-child) { color: var(--muted); }

/* Boutons et liens ------------------------------------------------------- */

.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 48px;
	padding: 0 24px;
	border: 1px solid transparent;
	border-radius: 2px;
	font-family: var(--sans);
	font-size: 16px;
	font-weight: 500;
	line-height: 1.2;
	text-align: center;
	cursor: pointer;
	transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.btn--gold { background: var(--or); color: var(--ink); font-weight: 600; }
.btn--gold:hover { background: var(--text); color: var(--ink); }
.btn--outline { border-color: var(--text); color: var(--text); }
.btn--outline:hover, .btn--outline.is-current { border-color: var(--or); color: var(--or); }
.btn--veil { background: rgba(15, 15, 14, .4); }
.btn--dark { background: var(--ink); color: var(--paper); font-weight: 600; min-height: 52px; padding: 0 26px; }
.btn--dark:hover { background: var(--ink-soft); color: var(--paper); }
.btn--outline-dark { border-color: var(--ink); color: var(--ink); min-height: 52px; padding: 0 26px; }
.btn--outline-dark:hover { background: var(--ink); color: var(--paper); }

.link-arrow {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-height: 44px;
	border-bottom: 1px solid var(--or);
	font-size: 16px;
	transition: color .2s ease;
}
.link-arrow:hover { color: var(--or); }
.link-arrow .icon { transition: transform .2s ease; }
.link-arrow:hover .icon { transform: translateX(4px); }

.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--cyan); }

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

.site-header { position: relative; z-index: 20; border-bottom: 1px solid var(--line); background: var(--bg); }
.site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 16px 32px; padding-block: 18px; }
.site-logo { display: flex; align-items: center; min-height: 44px; }
.site-logo img { height: 36px; width: auto; }

.site-nav { display: flex; align-items: center; gap: 8px 28px; font-size: 15px; }
.site-nav .menu { display: flex; align-items: center; gap: 8px 28px; }
.site-nav .menu a { display: inline-flex; align-items: center; min-height: 44px; }
.site-nav .current-menu-item > a, .site-nav .current_page_item > a, .site-nav .current-menu-ancestor > a { color: var(--or); }
.site-nav__cta { min-height: 44px; padding: 0 20px; font-size: 15px; }

.menu-toggle { display: none; align-items: center; justify-content: center; width: 48px; height: 48px; margin-right: -12px; background: none; border: 0; cursor: pointer; }
.menu-toggle__close { display: none; }
.menu-toggle[aria-expanded="true"] .menu-toggle__open { display: none; }
.menu-toggle[aria-expanded="true"] .menu-toggle__close { display: block; }

@media (max-width: 860px) {
	.menu-toggle { display: inline-flex; }
	.js .site-nav {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		display: none;
		flex-direction: column;
		align-items: stretch;
		gap: 8px;
		padding: 16px var(--gutter) 32px;
		background: var(--bg);
		border-bottom: 1px solid var(--line);
	}
	.js .site-header.is-open .site-nav { display: flex; }
	.site-nav .menu { flex-direction: column; align-items: stretch; gap: 0; }
	.site-nav .menu a { min-height: 56px; font-size: 22px; font-weight: 600; border-bottom: 1px solid var(--line); width: 100%; }
	.site-nav__cta { margin-top: 16px; min-height: 52px; font-size: 16px; }
	.no-js .site-header__inner { flex-wrap: wrap; }
	.no-js .menu-toggle { display: none; }
	.no-js .site-nav { flex-wrap: wrap; }
}

/* Haut de l'accueil ------------------------------------------------------ */

.hero {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	min-height: max(600px, min(56.25vw, 920px));
	overflow: hidden;
	background: var(--surface-2);
	isolation: isolate;
}
.hero__media { position: absolute; inset: 0; z-index: -1; }
.hero__img, .hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 55%; }
.hero__shade {
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(15, 15, 14, .92) 0%, rgba(15, 15, 14, .62) 50%, rgba(15, 15, 14, .18) 100%);
}
.hero__label {
	position: absolute;
	top: 24px;
	left: max(var(--gutter), calc((100% - 1312px) / 2 + var(--gutter)));
	display: flex;
	align-items: center;
	gap: 10px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--text);
}
.hero__content {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 28px;
	padding-top: 96px;
	padding-bottom: clamp(32px, 5vw, 64px);
}
.hero__text { display: flex; flex-direction: column; gap: 14px; max-width: 760px; }
.hero__title { font-weight: 800; font-stretch: 72%; font-size: clamp(56px, 9vw, 136px); line-height: .88; letter-spacing: -.01em; text-transform: uppercase; }
.hero__subtitle { font-weight: 300; font-size: clamp(22px, 2.6vw, 34px); line-height: 1.2; color: var(--or); }
.hero__lead { color: var(--text-soft); font-size: 18px; max-width: 520px; }
.hero .eyebrow { font-size: 13px; }

/* Logos clients ---------------------------------------------------------- */

.logos { border-bottom: 1px solid var(--line); }
.logos__inner { display: flex; flex-direction: column; gap: 28px; padding-block: 56px; }
.logos__title { flex: 0 0 auto; margin: 0; font-weight: 400; letter-spacing: .14em; text-transform: uppercase; color: var(--muted-2); }
.logos__list { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px 32px; }
@media (max-width: 1099px) { .logos__list { justify-content: flex-start; } }
.logos__list li { display: flex; align-items: center; min-height: 44px; }
.logos__img { height: calc(var(--h, 40) * 1px); width: auto; max-width: none; object-fit: contain; filter: brightness(0) invert(.82); opacity: .9; }
.logos__name { font-weight: 700; font-stretch: 85%; font-size: 20px; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); }

/* Vignettes de films ----------------------------------------------------- */

.media { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--surface); }
.media--wide { aspect-ratio: 16 / 9; }
.media-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.media-empty { position: absolute; inset: 0; background: var(--surface); }

.card__link { display: flex; flex-direction: column; gap: 14px; height: 100%; }
.card__link:hover { color: inherit; }
.card__media .media-img { transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
.card__link:hover .media-img { transform: scale(1.035); }
.media--link { display: block; }
.media--link .media-img { transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
.media--link:hover .media-img { transform: scale(1.035); }
.card__title { font-weight: 700; font-stretch: 85%; font-size: clamp(22px, 2vw, 26px); line-height: 1.1; text-transform: uppercase; }
.card__link:hover .card__title { color: var(--or); }
.card__meta { color: var(--muted-2); letter-spacing: .06em; }

.tag {
	position: absolute;
	top: 14px;
	left: 14px;
	padding: 4px 8px;
	background: var(--paper);
	color: var(--ink);
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: .14em;
	text-transform: uppercase;
	line-height: 1.4;
}
.play-dot {
	position: absolute;
	right: 14px;
	bottom: 14px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	border: 1px solid var(--cyan);
	background: rgba(15, 15, 14, .45);
	color: var(--cyan);
	transition: background-color .2s ease, color .2s ease;
}
.card__link:hover .play-dot { background: var(--cyan); color: var(--ink); }

/* Bande plein écran (photo de la page À propos) ------------------------- */

.band { position: relative; width: 100%; min-width: 0; aspect-ratio: 2.39 / 1; min-height: 300px; overflow: hidden; background: var(--surface-2); }
.band--photo { aspect-ratio: 21 / 9; min-height: 320px; }
.band__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.band--photo .band__img { object-position: center 30%; }

/* Blocs services et principes -------------------------------------------- */

.tile { display: flex; flex-direction: column; gap: 12px; padding-top: 20px; border-top: 1px solid var(--or); }
.tile__title { font-size: 22px; line-height: 1.2; }
.tile__text { color: var(--muted); font-size: 16px; }
.tile__link { margin-top: auto; display: inline-flex; align-items: center; min-height: 44px; font-size: 15px; color: var(--muted-2); }

/* Page d'un service (page de sa catégorie) : son texte posé sur son image ou sa vidéo, comme le haut de l'accueil */
.service { position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(0, 1fr); }
.service__media { position: relative; grid-row: 1; grid-column: 1; aspect-ratio: 16 / 9; margin-inline: calc(-1 * var(--gutter)); overflow: hidden; background: var(--surface-2); }
/* Lecture automatique refusée par l'appareil : on montre l'image fixe plutôt qu'un bouton de lecture. */
.hero__video.is-blocked, .service__video.is-blocked { visibility: hidden; }
.service__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.service__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(15, 15, 14, .88) 0%, rgba(15, 15, 14, .3) 55%, rgba(15, 15, 14, 0) 100%); }
/* Téléphone : l'image va d'un bord à l'autre, le titre est posé dessus et aligné sur le texte en dessous. */
.service__head { grid-row: 1; grid-column: 1; align-self: end; position: relative; padding-bottom: 18px; }
.h1--service { font-size: clamp(40px, 6vw, 88px); line-height: .92; text-shadow: 0 1px 12px rgba(0, 0, 0, .35); }
.service__text { display: flex; flex-direction: column; gap: 16px; align-items: flex-start; padding-top: 20px; color: var(--text-soft); font-size: 17px; }
@media (min-width: 700px) {
	.service {
		grid-template-columns: minmax(0, min(600px, 74%)) minmax(0, 1fr);
		grid-template-rows: 1fr auto auto;
		row-gap: 18px;
		min-height: clamp(440px, 44vw, 600px);
		padding: clamp(28px, 4vw, 56px);
	}
	/* Sans placement dans la grille : l'image couvre toute la carte, marges comprises. */
	.service__media { position: absolute; inset: 0; z-index: -2; grid-row: auto; grid-column: auto; aspect-ratio: auto; margin-inline: 0; }
	/* Assombri sous toute la colonne de texte, puis l'image se dégage. */
	.service__media::after { background: linear-gradient(to right, rgba(15, 15, 14, .9) 0%, rgba(15, 15, 14, .82) 42%, rgba(15, 15, 14, .35) 66%, rgba(15, 15, 14, 0) 88%); }
	.service__head { grid-row: 2; grid-column: 1; padding: 0; }
	.service__text { grid-row: 3; grid-column: 1; padding-top: 0; }
}

/* Accueil, bloc À propos : la phrase d'accroche, en grand et en blanc */
.catch { font-size: clamp(22px, 2.1vw, 28px); line-height: 1.45; color: var(--text); max-width: 560px; }
.catch .roll, .catch .roll__item { height: 1.45em; line-height: 1.45em; }

/* Accueil : encadré tarifs (un peu d'air entre le titre et le texte) */
.prix { display: flex; flex-direction: column; gap: 16px; }
.prix > p { max-width: 760px; }

/* Accueil : liste des services, avec l'image du service survolé à droite (écrans larges) */
.svc__list { list-style: none; margin: 0; padding: 0; border-bottom: 1px solid var(--line); }
.svc-row {
	display: grid;
	grid-template-columns: 44px minmax(0, 1fr) 22px;
	align-items: center;
	gap: 20px;
	padding: 24px 0;
	border-top: 1px solid var(--line);
	color: var(--text);
}
.svc-row .num { align-self: start; padding-top: .5em; }
.svc-row__title {
	font-size: clamp(30px, 3.4vw, 50px);
	line-height: .95;
	font-weight: 800;
	font-stretch: 72%;
	text-transform: uppercase;
	transition: color .25s ease;
}
.svc-row__text { margin-top: 8px; color: var(--muted); font-size: 16px; }
.svc-row .icon { color: var(--muted-2); transition: transform .25s ease, color .25s ease; }
.svc-row:hover .svc-row__title, .svc-row:focus-visible .svc-row__title { color: var(--or); }
.svc-row:hover .icon, .svc-row:focus-visible .icon { color: var(--or); transform: translateX(4px); }
.svc__preview { display: none; }
@media (max-width: 599px) {
	.svc-row { grid-template-columns: minmax(0, 1fr) 22px; row-gap: 6px; }
	.svc-row .num { grid-column: 1 / -1; padding-top: 0; }
}
@media (min-width: 960px) {
	.svc { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .5fr); gap: 56px; }
	.svc-row.is-active .svc-row__title { color: var(--or); }
	/* Cadre au format vertical 9:16 : une image exportée en 9:16 s'y affiche entière.
	   Les lignes de la liste s'espacent pour prendre la même hauteur que le cadre. */
	.svc__preview { display: block; position: relative; align-self: start; aspect-ratio: 9 / 16; overflow: hidden; background: var(--surface); }
	.svc__list { display: flex; flex-direction: column; }
	.svc__list > li { display: flex; flex: 1 1 auto; }
	.svc__list .svc-row { flex: 1 1 auto; }
	.svc__img { position: absolute; inset: 0; opacity: 0; transition: opacity .45s ease; }
	.svc__img.is-active { opacity: 1; }
	.svc__img .media-img, .svc__img .media-empty { display: block; width: 100%; height: 100%; object-fit: cover; }
}

.portrait { max-width: 480px; aspect-ratio: 4 / 5; position: relative; overflow: hidden; background: var(--surface); }
.section .split--media-first .portrait { flex: 1 1 340px; }



/* En-têtes de pages ------------------------------------------------------ */

.page-head { padding-top: clamp(64px, 8vw, 96px); padding-bottom: 48px; }
.page-head__inner { display: flex; flex-direction: column; gap: 16px; }
.page-head__inner--split { flex-direction: row; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 24px 48px; }
.page-head__inner--split > div { display: flex; flex-direction: column; gap: 12px; max-width: 760px; }
.page-head--rule { border-bottom: 1px solid var(--line); padding-bottom: 56px; }
.page-head--rule .page-head__inner { gap: 24px; }

.chips, .filters { display: flex; flex-wrap: wrap; gap: 10px; }
/* Pendant le changement de catégorie (sans rechargement) : la liste s'estompe un instant. */
[data-films] { transition: opacity .2s ease; }
[data-films].is-loading { opacity: .45; pointer-events: none; }
.chips { margin-top: 8px; }
.filters { padding-bottom: 28px; margin-bottom: 48px; border-bottom: 1px solid var(--line); }
.chip {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-height: 44px;
	padding: 0 18px;
	border: 1px solid var(--line-strong);
	border-radius: 999px;
	font-size: 15px;
	cursor: pointer;
}
.chip:hover { border-color: var(--text); color: var(--text); }
.chip[aria-current], .chip[aria-pressed="true"] { background: var(--or); border-color: var(--or); color: var(--ink); }
.chip .num { font-size: 12px; }

/* Fiche projet ----------------------------------------------------------- */

.page-head--projet .container { display: flex; flex-direction: column; gap: 28px; }
.breadcrumb { display: flex; flex-wrap: wrap; gap: 10px; text-transform: uppercase; letter-spacing: .12em; color: var(--muted-2); }
.breadcrumb a:first-child { text-decoration: underline; text-underline-offset: 3px; }

.facts { display: flex; flex-wrap: wrap; gap: 20px 56px; padding-top: 24px; border-top: 1px solid var(--line); }
.facts > div { display: flex; flex-direction: column; gap: 4px; }
.facts dt { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted-2); }
.facts dd { font-weight: 700; font-size: 20px; }

.player { background: var(--surface-2); }
.player__btn { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; width: 100%; padding: 0; background: rgba(15, 15, 14, .25); border: 0; cursor: pointer; }
.player__btn:hover { background: rgba(15, 15, 14, .1); }
.play-big {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 92px;
	height: 92px;
	border-radius: 50%;
	border: 1.5px solid var(--cyan);
	background: rgba(15, 15, 14, .55);
	color: var(--cyan);
	transition: transform .2s ease;
}
.player__btn:hover .play-big { transform: scale(1.06); }
.player iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.projet__body { display: flex; flex-wrap: wrap; gap: 48px 96px; }
.projet__text { flex: 2 1 480px; min-width: 0; display: flex; flex-direction: column; gap: 18px; }
.projet__credits { flex: 1 1 280px; min-width: 0; display: flex; flex-direction: column; gap: 18px; }
.credits > div { display: flex; flex-direction: column; gap: 2px; padding: 14px 0; border-top: 1px solid var(--line); }
.credits > div:last-child { border-bottom: 1px solid var(--line); }
.credits dt { color: var(--muted-2); font-size: 15px; }
.credits dd { font-size: 18px; }

.frames { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 12px; padding-bottom: var(--section); }
.projet .section + .frames { margin-top: calc(var(--section) * -1 + 24px); }

.next { border-top: 1px solid var(--line); }
.next__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 32px; padding-block: 64px; }
.next__inner > span:first-child { display: flex; flex-direction: column; gap: 8px; }
.next__inner .mono { text-transform: uppercase; letter-spacing: .14em; }
.next__title { font-size: clamp(34px, 4.5vw, 64px); line-height: .95; font-stretch: 75%; }
.next__arrow { display: flex; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: 50%; border: 1px solid var(--cyan); color: var(--cyan); transition: transform .2s ease; }
.next__inner:hover .next__arrow { transform: translateX(6px); }

/* Bandeau de contact ----------------------------------------------------- */

.cta { background: var(--paper); color: var(--ink); }
.cta__inner { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 32px 64px; padding-block: clamp(64px, 8vw, 96px); }
.cta__title { flex: 1 1 420px; font-size: clamp(48px, 6vw, 88px); line-height: .9; color: var(--ink); }

/* Contact ---------------------------------------------------------------- */

.contact { display: flex; flex-wrap: wrap; gap: 56px 96px; }
.contact__intro { flex: 1 1 400px; min-width: 0; display: flex; flex-direction: column; gap: 28px; }
.contact__details > div { display: flex; flex-direction: column; gap: 2px; padding: 16px 0; border-top: 1px solid var(--line); }
.contact__details > div:last-child { border-bottom: 1px solid var(--line); }
.contact__details dt { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted-2); }
.contact__details dd { font-size: 20px; }
.contact__visual { margin: 0; }
.contact__img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: center 55%; }
@media (max-width: 959px) { .contact__visual { display: none; } }
.callbox { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; padding: 24px; background: var(--bg-alt); }
.callbox__title { font-weight: 700; }

.form {
	flex: 1 1 480px;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 20px;
	padding: clamp(20px, 3vw, 40px);
	background: var(--bg-alt);
	border: 1px solid var(--line);
	scroll-margin-top: 24px;
}
.form__row { display: flex; flex-wrap: wrap; gap: 20px; }
.form__row > .field { flex: 1 1 220px; }
.field { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.field label { font-size: 14px; color: var(--muted); }
.field input, .field select, .field textarea {
	width: 100%;
	min-height: 48px;
	padding: 0 14px;
	background: var(--bg);
	color: var(--text);
	border: 1px solid var(--line-strong);
	border-radius: 2px;
	font-family: var(--sans);
	font-size: 16px;
}
.field textarea { padding: 12px 14px; resize: vertical; min-height: 160px; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--or); box-shadow: 0 0 0 1px var(--or); }
.field--check { flex-direction: row; align-items: flex-start; gap: 12px; }
.field--check input { width: 20px; height: 20px; min-height: 0; margin: 2px 0 0; flex: 0 0 auto; accent-color: var(--or); }
.field--check a { text-decoration: underline; }
.form__trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.form__note { margin-top: -8px; }
.form__submit { display: flex; justify-content: flex-end; }
.form-notice { padding: 16px 18px; border: 1px solid; font-size: 16px; }
.form-notice--success { border-color: var(--cyan); background: rgba(92, 200, 214, .08); }
.form-notice--error { border-color: var(--error); background: rgba(226, 103, 74, .08); }

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

.site-footer { border-top: 1px solid var(--line); }
.cta + .site-footer, .cta ~ .site-footer { border-top: 0; }
.site-footer__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px 40px; padding-block: 48px; font-size: 14px; color: var(--muted-2); }
.site-footer__id { display: flex; flex-wrap: wrap; align-items: center; gap: 20px 28px; }
.site-footer__logo { height: 72px; width: auto; }
.site-footer__lines { display: flex; flex-direction: column; gap: 4px; }
.site-footer__name { color: var(--text); }
.site-footer__lines a { white-space: nowrap; }
.site-footer__lines a:hover { color: var(--or); }
.site-footer__social { display: flex; flex-wrap: wrap; gap: 0 6px; margin-right: -12px; }
/* Icônes blanches, zone de clic de 44 px ; dorées au survol comme les autres liens. */
.site-footer__social a { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; color: var(--text); }
.social-icon { display: block; width: 20px; height: 20px; }

/* 404 -------------------------------------------------------------------- */

.section--404 .container { display: flex; flex-direction: column; gap: 20px; align-items: flex-start; min-height: 50vh; justify-content: center; }

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

.nav-links { display: flex; gap: 16px; }

/* Mot qui défile (« rouleau ») ------------------------------------------- */

.roll { display: inline-block; height: 1.6em; overflow: hidden; vertical-align: top; color: var(--or); }
.roll__track { display: flex; flex-direction: column; transition: transform .5s cubic-bezier(.65, 0, .35, 1); }
.roll__item { display: block; height: 1.6em; line-height: 1.6em; white-space: nowrap; }

/* Survols --------------------------------------------------------------- */
/* De petits mouvements, seulement avec une souris (sur écran tactile, un survol resterait bloqué après le toucher).
   Une seule courbe pour tout le site : départ franc, arrivée douce. */

@media (hover: hover) {
	:root { --ease: cubic-bezier(.2, .7, .2, 1); }

	/* Menu : un trait doré se dessine de gauche à droite sous le lien. */
	.site-nav .menu a { position: relative; }
	.site-nav .menu a::after {
		content: "";
		position: absolute;
		left: 0;
		right: 0;
		bottom: 10px;
		height: 1px;
		background: var(--or);
		transform: scaleX(0);
		transform-origin: right;
		transition: transform .35s var(--ease);
	}
	.site-nav .menu a:hover::after { transform: scaleX(1); transform-origin: left; }

	/* Réseaux sociaux : l'icône passe au doré et monte légèrement. */
	.site-footer__social a { transition: color .25s ease, transform .35s var(--ease); }
	.site-footer__social a:hover { transform: translateY(-2px); }

	/* Boutons : la couleur de survol monte depuis le bas au lieu d'apparaître d'un coup. */
	.btn { transition: background-size .4s var(--ease), background-color .2s ease, color .25s ease, border-color .25s ease; }
	.btn--gold { background: var(--or) linear-gradient(var(--text), var(--text)) no-repeat 50% 100% / 100% 0; }
	.btn--gold:hover { background: var(--or) linear-gradient(var(--text), var(--text)) no-repeat 50% 100% / 100% 100%; }
	.btn--outline { background: transparent linear-gradient(var(--or), var(--or)) no-repeat 50% 100% / 100% 0; }
	.btn--outline:hover { background-size: 100% 100%; border-color: var(--or); color: var(--ink); }
	.btn--dark { background: var(--ink) linear-gradient(var(--ink-soft), var(--ink-soft)) no-repeat 50% 100% / 100% 0; }
	.btn--dark:hover { background: var(--ink) linear-gradient(var(--ink-soft), var(--ink-soft)) no-repeat 50% 100% / 100% 100%; }
	.btn--outline-dark { background: transparent linear-gradient(var(--ink), var(--ink)) no-repeat 50% 100% / 100% 0; }
	.btn--outline-dark:hover { background-size: 100% 100%; color: var(--paper); }

	/* Vignettes de films : l'image s'éclaire un peu et la pastille de lecture grossit. */
	.card__media .media-img { transition: transform .6s var(--ease), filter .6s ease; }
	.card__link:hover .media-img { filter: brightness(1.08); }
	.play-dot { transition: background-color .2s ease, color .2s ease, transform .35s var(--ease); }
	.card__link:hover .play-dot { transform: scale(1.12); }

	/* Accueil, liste des services : le titre glisse légèrement vers la droite. */
	.svc-row__title { transition: color .25s ease, transform .4s var(--ease); }
	.svc-row:hover .svc-row__title { transform: translateX(8px); }

	/* Logos clients : celui qu'on survole passe du gris au blanc et grossit un peu. */
	.logos__img { transition: filter .35s ease, opacity .35s ease, transform .45s var(--ease); }
	.logos__name { display: inline-block; transition: color .35s ease, transform .45s var(--ease); }
	.logos__list li:hover .logos__img { filter: brightness(0) invert(1); opacity: 1; transform: scale(1.1); }
	.logos__list li:hover .logos__name { color: var(--text); transform: scale(1.1); }

	/* Liens fléchés : la flèche avance avec la même courbe que le reste. */
	.link-arrow .icon, .svc-row .icon { transition: transform .35s var(--ease), color .25s ease; }
}

/* Mouvement réduit ------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { transition: none !important; animation: none !important; }
	.hero__video, .service__video { display: none; }
}

/* Petits écrans ---------------------------------------------------------- */

@media (max-width: 600px) {
	/* Sur mobile, le texte couvre presque toute l'image : voile plus dense en haut pour garder le contraste. */
	.hero__shade { background: linear-gradient(to top, rgba(15, 15, 14, .92) 0%, rgba(15, 15, 14, .72) 55%, rgba(15, 15, 14, .5) 100%); }
	.hero__content .btn-row { align-self: stretch; flex-direction: column; align-items: stretch; }
	.hero__content .btn-row .btn { width: 100%; }
	.logos__inner { padding-block: 40px; gap: 20px; }
	.logos__list { gap: 20px 32px; }
	.logos__img { height: calc(var(--h, 40) * .8px); }
	/* Téléphone : tous les filtres visibles, sur deux ou trois lignes, plutôt qu'une ligne qui sort de l'écran. */
	.filters { gap: 8px; }
	.filters .chip { min-height: 40px; padding: 0 14px; font-size: 14px; }
	.site-footer__social { margin: 0 0 0 -12px; }
	.cta .btn-row { width: 100%; }
	.cta .btn { flex: 1 1 100%; }
	.form__submit .btn { width: 100%; }
	.band { min-height: 220px; }
}

/* Impression ------------------------------------------------------------- */

@media print {
	body { background: #fff; color: #000; }
	.site-header, .site-footer, .cta, .hero__media { display: none; }
}