/* ═══════════════════════════════════════════════════════════════
   ETS Portfolio — styles
   Palette et proportions : maquette design/SITE-V3.pdf
   ═══════════════════════════════════════════════════════════════ */

/* ---------- Fontes ---------- */

@font-face {
	font-family: "Sweet Sans";
	src: url("../fonts/SweetSansPro-Bold.woff2") format("woff2");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Caslon";
	src: url("../fonts/ACaslonPro-Regular.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Caslon";
	src: url("../fonts/ACaslonPro-Italic.woff2") format("woff2");
	font-weight: 400;
	font-style: italic;
	font-display: swap;
}

@font-face {
	font-family: "Caslon";
	src: url("../fonts/ACaslonPro-Semibold.woff2") format("woff2");
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}

/* ---------- Variables ---------- */

:root {
	--c-bg: #f7f4ef;
	--c-ink: #644530;

	/* Marges du cadre (mesurées sur la maquette) */
	--pad-x: clamp(20px, 4.6vw, 66px);
	--pad-y: clamp(18px, 4.4vh, 40px);

	/* Scène du slider : le média ne dépasse jamais cette zone */
	--stage-x: 25vw; /* marge horizontale de part et d'autre */
	--stage-y: 20vh; /* marge verticale haut et bas */

	--fs-nav: clamp(10px, 0.76vw, 12px);
	--ls-nav: 0.16em;
}

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

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

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

body {
	background: var(--c-bg);
	color: var(--c-ink);
	font-family: "Caslon", "Iowan Old Style", Georgia, serif;
	line-height: 1.45;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

body.home {
	overflow: hidden;
	height: 100vh;
	height: 100dvh;
}

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

a,
button {
	color: inherit;
	/* Pas de rectangle gris/noir au tap sur mobile. */
	-webkit-tap-highlight-color: transparent;
}

::selection {
	background: var(--c-ink);
	color: var(--c-bg);
}

:focus-visible {
	outline: 1px solid var(--c-ink);
	outline-offset: 3px;
}

.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	background: var(--c-bg);
	padding: 0.75em 1.25em;
	z-index: 100;
	font-family: "Sweet Sans", sans-serif;
	font-size: var(--fs-nav);
	letter-spacing: var(--ls-nav);
	text-transform: uppercase;
}

.skip-link:focus {
	left: 0;
}

/* ---------- Navigation (texte petites capitales) ---------- */

.nav-link {
	position: relative;
	display: inline-block;
	font-family: "Sweet Sans", sans-serif;
	font-weight: 700;
	font-size: var(--fs-nav);
	letter-spacing: var(--ls-nav);
	text-transform: uppercase;
	text-decoration: none;
	padding-bottom: 0.35em;
}

/*
 * Souligné qui se dessine : entre par la gauche au survol,
 * ressort par la droite au départ (transform uniquement — GPU).
 */
.nav-link::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 1px;
	background: currentColor;
	transform: scaleX(0);
	transform-origin: right center;
	transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}

.nav-link.is-current::after {
	transform: scaleX(1);
	transform-origin: left center;
}

/* Survol : uniquement pour les vrais pointeurs (pas de faux hover tactile). */
@media (hover: hover) and (pointer: fine) {
	.nav-link:hover::after {
		transform: scaleX(1);
		transform-origin: left center;
	}
}


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

.site-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 10;
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	padding: var(--pad-y) var(--pad-x) 64px;
	pointer-events: none;
	/* Voile crème : au défilement, le texte s'estompe sous l'en-tête
	   au lieu de se superposer aux liens et au logo. Le voile reste
	   plein sur une bonne marge sous la ligne de base du logo, puis
	   fond en douceur. */
	background: linear-gradient(
		to bottom,
		var(--c-bg) 72%,
		rgba(247, 244, 239, 0) 100%
	);
}

.site-header a {
	pointer-events: auto;
}

.site-header__nav {
	display: flex;
	gap: clamp(18px, 2.2vw, 32px);
}

.site-header__nav--right {
	justify-content: flex-end;
}

.site-header__logo {
	line-height: 0; /* pas d'espace de ligne fantôme sous le SVG */
}

.site-header__logo img {
	width: clamp(180px, 15.5vw, 230px);
	height: auto;
}

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

.site-footer {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 10;
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	padding: 0 var(--pad-x) var(--pad-y);
	pointer-events: none;
}

.site-footer a {
	pointer-events: auto;
}

.site-footer__monogram {
	margin-left: auto;
	line-height: 0;
	/* Calé sur la ligne de base du texte de la légende, pas sur la
	   boîte de ligne (sinon il descend visuellement plus bas). */
	margin-bottom: 0.3em;
}

.site-footer__monogram img {
	width: clamp(30px, 2.5vw, 38px);
	height: auto;
}

/* ---------- Légende du projet (bas gauche) ---------- */

.caption {
	max-width: 60%;
}

.caption__title {
	font-family: "Sweet Sans", sans-serif;
	font-weight: 700;
	font-size: var(--fs-nav);
	letter-spacing: var(--ls-nav);
	text-transform: uppercase;
}

.caption__meta {
	font-family: "Caslon", serif;
	font-style: italic;
	font-size: clamp(13px, 1.05vw, 16px);
	margin-top: 0.25em;
}

.caption__meta:empty {
	display: none;
}

/* ---------- Slider ---------- */

.slider {
	position: fixed;
	inset: 0;
}

.slider__stage {
	position: absolute;
	inset: var(--stage-y) var(--stage-x);
}

.slide {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	visibility: hidden;
}

.slide.is-active {
	opacity: 1;
	visibility: visible;
}

.slide__media {
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}

.slider__empty {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-style: italic;
}

/* Zones de clic invisibles : moitié gauche = précédent, droite = suivant */

.slider__hit {
	position: fixed;
	top: 15vh;
	bottom: 15vh;
	width: 50%;
	border: 0;
	background: transparent;
	-webkit-appearance: none;
	appearance: none;
	z-index: 5;
	padding: 0;
}

.slider__hit--prev {
	left: 0;
	cursor: w-resize;
}

.slider__hit--next {
	right: 0;
	cursor: e-resize;
}

.slider__hit:focus {
	outline: none;
}

.slider__hit:focus-visible {
	outline: 1px solid var(--c-ink);
	outline-offset: -6px;
}

/* ---------- Pages de contenu (Informations…) ---------- */

/*
 * Le contenu est centré dans la hauteur de l'écran (marges hautes
 * et basses symétriques) ; si le texte est plus long que l'écran,
 * il défile normalement.
 */
.page-content {
	min-height: 100vh;
	min-height: 100dvh;
	display: flex;
	flex-direction: column;
	padding: clamp(84px, 12vh, 132px) var(--pad-x);
}

.prose {
	max-width: 33em;
	width: 100%;
	margin-inline: auto;
	margin-block: auto; /* centrage vertical */
	text-align: center;
	font-size: clamp(16px, 1.3vw, 19px);
}

.prose--center {
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: 50vh;
}

/*
 * Rythme vertical : un seul et même espacement entre tous les
 * blocs (paragraphes, titres de section, colonnes).
 */
.prose > * {
	margin: 0;
}

.prose > * + * {
	margin-top: clamp(30px, 4.8vh, 44px);
}

.prose a {
	text-decoration: underline;
	text-underline-offset: 0.18em;
	text-decoration-thickness: 1px;
	transition: opacity 0.2s ease;
}

@media (hover: hover) and (pointer: fine) {
	.prose a:hover {
		opacity: 0.6;
	}
}

/* Titres de section (CLIENTS, CONTACT) : petites capitales espacées */

.prose h2,
.prose h3 {
	font-family: "Sweet Sans", sans-serif;
	font-weight: 700;
	font-size: var(--fs-nav);
	letter-spacing: var(--ls-nav);
	text-transform: uppercase;
}

/* Deux colonnes (bloc Colonnes de Gutenberg) */

.prose .wp-block-columns {
	display: flex;
	gap: 2.5em;
	text-align: center;
}

.prose .wp-block-column {
	flex: 1;
	min-width: 0;
}

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

/* Laptop */
@media (max-width: 1439px) {
	:root {
		--stage-x: 22vw;
		--stage-y: 19vh;
	}
}

/* Tablette */
@media (max-width: 1023px) {
	:root {
		--stage-x: 15vw;
		--stage-y: 18vh;
	}

	.site-header__logo img {
		width: clamp(160px, 22vw, 200px);
	}
}

/* Mobile */
@media (max-width: 767px) {
	:root {
		--stage-x: 6vw;
		--stage-y: 16vh;
		--fs-nav: 10px;
		--pad-y: 18px;
	}

	.site-header__logo img {
		width: 150px;
	}

	.caption {
		max-width: 75%;
	}

	.caption__meta {
		font-size: 13px;
	}

	.prose .wp-block-columns {
		flex-direction: column;
		gap: 1.4em;
	}

	.slider__hit {
		cursor: pointer;
	}
}

/* Très petits écrans : le logo cède la place aux liens. */
@media (max-width: 374px) {
	.site-header__logo img {
		width: 118px;
	}
}

/*
 * Mouvement réduit : les seules transitions CSS du thème sont des
 * changements de couleur/opacité (autorisés) ; le slider raccourcit
 * ses fondus et coupe l'auto-défilement côté JS.
 */