/* ==========================================================================
   Midi Studio — landing
   Normes graphiques : Geist, interlignage 90%, tracking -30.
   ========================================================================== */

@font-face {
	font-family: 'Geist';
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url('../fonts/geist-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
		U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: 'Geist';
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url('../fonts/geist-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
		U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0,
		U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
	/* Couleurs corporatives */
	--ms-noir: #000000;
	--ms-lumiere: #FCFDF7;
	--ms-taupe: #A79687;
	--ms-orange: #FFA852;
	--ms-bleu: #CFE3F3;
	--ms-jaune: #FCD901;

	--ms-marge: clamp(1.25rem, 4vw, 3.5rem);
	--ms-tracking: -0.03em;
}

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

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

body {
	margin: 0;
	background: var(--ms-noir);
	color: var(--ms-lumiere);
	font-family: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
	font-weight: 400;
	letter-spacing: var(--ms-tracking);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* --------------------------------------------------------------------------
   Grille : un seul écran, trois rangées.
   -------------------------------------------------------------------------- */

.ms-page {
	position: relative;
	display: grid;
	grid-template-rows: auto 1fr auto;
	gap: clamp(1.5rem, 4vh, 3rem);
	min-height: 100vh;
	min-height: 100svh;
	padding: var(--ms-marge);
	overflow: clip;
}

/* --------------------------------------------------------------------------
   Fond : image floutée, grain, voile. La zone sous le curseur revient au net.
   -------------------------------------------------------------------------- */

.ms-fond {
	position: absolute;
	inset: 0;
	z-index: 0;
	overflow: clip;
}

.ms-fond__flou,
.ms-fond__net {
	position: absolute;
	/* Débord : le flou mangerait sinon les bords de l'image. */
	inset: calc(var(--ms-flou, 36px) * -2);
	background-image: var(--ms-bg);
	background-size: cover;
	background-position: center;
}

.ms-fond__flou {
	filter: blur(var(--ms-flou, 36px));
}

.ms-fond__net {
	filter: blur(calc(var(--ms-flou, 36px) / 6)) saturate(1.12);
	opacity: 0;
	transition: opacity 400ms ease-out;
	-webkit-mask-image: radial-gradient(
		circle 22vmax at var(--ms-x, 50%) var(--ms-y, 50%),
		#000 0%,
		rgba(0, 0, 0, 0.75) 35%,
		transparent 70%
	);
	mask-image: radial-gradient(
		circle 22vmax at var(--ms-x, 50%) var(--ms-y, 50%),
		#000 0%,
		rgba(0, 0, 0, 0.75) 35%,
		transparent 70%
	);
}

.ms-page[data-mise-au-point].is-focus .ms-fond__net {
	opacity: 1;
}

.ms-fond__grain {
	position: absolute;
	inset: 0;
	opacity: 0.16;
	mix-blend-mode: overlay;
	pointer-events: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
}

.ms-fond__voile {
	position: absolute;
	inset: 0;
	background: linear-gradient(
		180deg,
		rgba(0, 0, 0, 0.55) 0%,
		rgba(0, 0, 0, 0.15) 38%,
		rgba(0, 0, 0, 0.25) 62%,
		rgba(0, 0, 0, 0.8) 100%
	);
	opacity: var(--ms-voile, 0.38);
}

/* --------------------------------------------------------------------------
   Contenu
   -------------------------------------------------------------------------- */

.ms-entete,
.ms-titre,
.ms-colonnes {
	position: relative;
	z-index: 1;
}

.ms-logo {
	display: block;
	width: auto;
	height: clamp(1.375rem, 2.1vw, 1.875rem);
}

.ms-titre {
	display: flex;
	flex-direction: column;
	/* Comme la référence : le titre monte sous le logo, les colonnes tiennent le bas. */
	align-items: flex-start;
	justify-content: flex-start;
	gap: clamp(1.25rem, 3.5vh, 2.5rem);
	padding-top: clamp(0.5rem, 4vh, 3rem);
}

/* Calibré pour une phrase, pas pour un mot : le titre d'origine montait à 10.5rem. */
.ms-titre h1 {
	margin: 0;
	max-width: 19ch;
	font-size: clamp(1.875rem, 4.6vw, 4.5rem);
	font-weight: 500;
	line-height: 0.95;
	letter-spacing: var(--ms-tracking);
	text-wrap: balance;
}

.ms-chapeau {
	max-width: 52ch;
	font-size: clamp(0.9375rem, 1.25vw, 1.125rem);
	line-height: 1.5;
	letter-spacing: -0.015em;
	color: color-mix(in srgb, var(--ms-lumiere) 88%, transparent);
}

.ms-chapeau p {
	margin: 0 0 0.9em;
}

.ms-chapeau p:last-child {
	margin-bottom: 0;
}

.ms-accroche {
	margin-top: 1.4em;
	font-weight: 500;
	color: var(--ms-lumiere);
}

.ms-accroche a {
	color: inherit;
	text-decoration: none;
	border-bottom: 1px solid color-mix(in srgb, var(--ms-lumiere) 45%, transparent);
	transition: color 160ms ease, border-color 160ms ease;
}

.ms-accroche a:hover,
.ms-accroche a:focus-visible {
	color: var(--ms-orange);
	border-bottom-color: var(--ms-orange);
}

.ms-fleche-bas {
	display: inline-block;
	margin-left: 0.2em;
	transition: transform 220ms ease;
}

.ms-accroche a:hover .ms-fleche-bas {
	transform: translateY(0.15em);
}

/* Colonnes du bas */

.ms-colonnes {
	display: grid;
	grid-template-columns: repeat(var(--ms-nb-colonnes, 4), minmax(0, 1fr));
	gap: clamp(1.25rem, 3vw, 2.5rem);
	align-items: start;
	padding-top: clamp(1rem, 3vh, 2rem);
	border-top: 1px solid color-mix(in srgb, var(--ms-lumiere) 22%, transparent);
}

.ms-colonne__titre {
	margin: 0 0 0.85em;
	font-size: 0.6875rem;
	font-weight: 500;
	/* Les capitales de labels ont besoin d'air, à l'inverse des grands titres. */
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: color-mix(in srgb, var(--ms-lumiere) 58%, transparent);
}

.ms-colonne__liste {
	margin: 0;
	padding: 0;
	list-style: none;
}

.ms-colonne__liste li + li {
	margin-top: 0.35em;
}

.ms-colonne__liste,
.ms-colonne__texte {
	font-size: clamp(0.8125rem, 1.05vw, 0.9375rem);
	line-height: 1.45;
	letter-spacing: -0.01em;
}

.ms-colonne__texte {
	max-width: 36ch;
	color: color-mix(in srgb, var(--ms-lumiere) 86%, transparent);
}

.ms-colonne__texte p {
	margin: 0 0 0.7em;
}

.ms-colonne__texte p:last-child {
	margin-bottom: 0;
}

.ms-colonne a {
	color: inherit;
	text-decoration: none;
	border-bottom: 1px solid color-mix(in srgb, var(--ms-lumiere) 30%, transparent);
	transition: color 160ms ease, border-color 160ms ease;
}

.ms-colonne a:hover,
.ms-colonne a:focus-visible {
	color: var(--ms-orange);
	border-bottom-color: var(--ms-orange);
}

.ms-fleche {
	display: inline-block;
	margin-left: 0.15em;
	font-size: 0.85em;
	vertical-align: baseline;
}

:where(a):focus-visible {
	outline: 2px solid var(--ms-orange);
	outline-offset: 3px;
	border-radius: 2px;
}

/* --------------------------------------------------------------------------
   Deuxième écran : le contact.

   Pas d'image ici, et c'est voulu — le premier écran est flou et ne s'éclaircit
   que sous le curseur ; celui-ci est net d'emblée. La page fait ce qu'elle dit.
   -------------------------------------------------------------------------- */

.ms-contact {
	position: relative;
	display: flex;
	align-items: center;
	min-height: 100vh;
	min-height: 100svh;
	padding: var(--ms-marge);
	background: var(--ms-noir);
	background-image: radial-gradient(
		120% 80% at 50% 0%,
		color-mix(in srgb, var(--ms-taupe) 16%, transparent) 0%,
		transparent 60%
	);
	scroll-margin-top: 0;
}

.ms-contact__corps {
	width: 100%;
	max-width: 46rem;
	margin: 0 auto;
}

.ms-contact__titre {
	margin: 0 0 0.5em;
	font-size: clamp(1.75rem, 4.2vw, 3.5rem);
	font-weight: 500;
	line-height: 0.95;
	letter-spacing: var(--ms-tracking);
}

.ms-contact__intro {
	margin-bottom: clamp(1.75rem, 4vh, 2.75rem);
	max-width: 46ch;
	font-size: clamp(0.9375rem, 1.2vw, 1.0625rem);
	line-height: 1.5;
	color: color-mix(in srgb, var(--ms-lumiere) 78%, transparent);
}

.ms-contact__intro p {
	margin: 0 0 0.6em;
}

.ms-contact__intro p:last-child {
	margin-bottom: 0;
}

/* Formulaire */

.ms-formulaire {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(1.25rem, 3vw, 2rem);
}

.ms-champ--large {
	grid-column: 1 / -1;
}

.ms-champ label {
	display: block;
	margin-bottom: 0.6em;
	font-size: 0.6875rem;
	font-weight: 500;
	/* Même exception que les labels de colonnes : des capitales serrées deviennent illisibles. */
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: color-mix(in srgb, var(--ms-lumiere) 58%, transparent);
}

.ms-champ input,
.ms-champ textarea {
	width: 100%;
	padding: 0.55em 0;
	border: 0;
	border-bottom: 1px solid color-mix(in srgb, var(--ms-lumiere) 28%, transparent);
	border-radius: 0;
	background: transparent;
	color: var(--ms-lumiere);
	font-family: inherit;
	font-size: clamp(0.9375rem, 1.15vw, 1.0625rem);
	letter-spacing: -0.015em;
	transition: border-color 160ms ease;
}

.ms-champ textarea {
	resize: vertical;
	min-height: 5.5em;
	line-height: 1.5;
}

.ms-champ input:focus,
.ms-champ textarea:focus {
	outline: none;
	border-bottom-color: var(--ms-orange);
}

.ms-champ input[aria-invalid='true'],
.ms-champ textarea[aria-invalid='true'] {
	border-bottom-color: var(--ms-jaune);
}

.ms-erreur {
	display: block;
	margin-top: 0.5em;
	font-size: 0.8125rem;
	letter-spacing: -0.01em;
	color: var(--ms-jaune);
}

.ms-envoi {
	margin-top: 0.5rem;
}

.ms-formulaire button {
	padding: 0.85em 2.25em;
	border: 0;
	border-radius: 999px;
	background: var(--ms-lumiere);
	color: var(--ms-noir);
	font-family: inherit;
	font-size: 0.9375rem;
	font-weight: 500;
	letter-spacing: -0.01em;
	cursor: pointer;
	transition: background-color 160ms ease, color 160ms ease;
}

.ms-formulaire button:hover,
.ms-formulaire button:focus-visible {
	background: var(--ms-orange);
	color: var(--ms-noir);
}

.ms-formulaire button:focus-visible {
	outline: 2px solid var(--ms-orange);
	outline-offset: 3px;
}

/* Pot de miel : hors de l'écran plutôt que display:none, que certains robots repèrent. */
.ms-pot {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* Messages */

.ms-message {
	margin: 0 0 1.5rem;
	padding: 1em 1.25em;
	border-left: 2px solid;
	font-size: clamp(0.9375rem, 1.2vw, 1.0625rem);
	line-height: 1.5;
}

.ms-message--succes {
	border-color: var(--ms-orange);
	background: color-mix(in srgb, var(--ms-orange) 10%, transparent);
}

.ms-message--erreur {
	border-color: var(--ms-jaune);
	background: color-mix(in srgb, var(--ms-jaune) 10%, transparent);
}

/* Mention légale */

.ms-mention {
	position: relative;
	z-index: 1;
	margin: clamp(2.5rem, 7vh, 4.5rem) 0 0;
	font-size: 0.75rem;
	letter-spacing: -0.005em;
	color: color-mix(in srgb, var(--ms-lumiere) 45%, transparent);
}

/* --------------------------------------------------------------------------
   Écrans étroits
   -------------------------------------------------------------------------- */

@media (max-width: 40rem) {
	.ms-page {
		gap: clamp(1.25rem, 3vh, 2rem);
	}

	.ms-logo {
		height: 1.625rem;
	}

	.ms-titre h1 {
		max-width: none;
		font-size: clamp(1.75rem, 7.4vw, 2.75rem);
	}

	.ms-chapeau {
		font-size: 0.9375rem;
	}

	.ms-colonnes {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 1.25rem 1.5rem;
	}

	/* Un paragraphe à moitié large ne se lit pas : il prend toute la rangée. */
	.ms-colonne:has(.ms-colonne__texte) {
		grid-column: 1 / -1;
	}

	.ms-colonne__texte {
		max-width: none;
	}

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

	.ms-formulaire button {
		width: 100%;
	}
}

@media (prefers-reduced-motion: no-preference) {
	html {
		scroll-behavior: smooth;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ms-fond__net {
		transition: none;
	}

	.ms-fleche-bas {
		transition: none;
	}
}