/* ==========================================================================
   ST DESIGN — Feuille de style principale
   Sommaire
   01. Tokens / variables
   02. Reset & base
   03. Utilitaires (container, section, titres, boutons, médias, reveal)
   04. Header & navigation
   05. Hero
   06. Blocs scindés (À propos / Zoom gérante)
   07. Services
   08. Chiffres clés
   09. Projets clients
   10. Avis clients
   11. Formulaire de contact
   12. Footer
   13. Accessibilité & préférences système
   ========================================================================== */

/* ==========================================================================
   01. Tokens
   ========================================================================== */
:root {
	/* Charte ST DESIGN */
	--st-ink: #1c1c1c;        /* RAL 9011 — gris noir */
	--st-light: #f4f4f4;      /* RAL 9003 — blanc gris  */
	--st-cream: #fdf4e3;      /* RAL 9010 — blanc crème */

	/* Déclinaisons de travail */
	--st-ink-soft: #232323;
	--st-ink-deep: #141414;
	--st-white: #ffffff;
	--st-muted: #77726a;
	--st-muted-invert: rgba(244, 244, 244, 0.62);
	--st-line: rgba(28, 28, 28, 0.14);
	--st-line-invert: rgba(244, 244, 244, 0.18);
	--st-placeholder: #e4ddd0;

	/* Typographies */
	--st-font-display: "Superior Title", "Times New Roman", Georgia, serif;
	--st-font-sans: "Greycliff CF", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

	/* Rythme — tout le contenu vit dans une colonne de 1440 px maximum */
	--st-container: 1440px;
	--st-gutter: clamp(20px, 4vw, 60px);
	--st-section-y: clamp(72px, 8.5vw, 132px);
	--st-radius-pill: 999px;
	--st-radius-media: clamp(10px, 1.1vw, 18px);

	/* Transitions */
	--st-ease: cubic-bezier(0.25, 0.8, 0.35, 1);
	--st-dur: 0.45s;

	--st-header-h: 92px;
	--st-header-h-stuck: 68px;

	/* Couleur du volet qui balaie les médias à l'apparition */
	--st-wipe: var(--st-light);
}

/* ==========================================================================
   02. Reset & base
   ========================================================================== */
*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-top: var(--st-header-h);
}

body {
	margin: 0;
	background-color: var(--st-light);
	color: var(--st-ink);
	font-family: var(--st-font-sans);
	font-size: 16px;
	font-weight: 400;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: hidden;
}

body.st-nav-open {
	overflow: hidden;
}

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

a {
	color: inherit;
	text-decoration: none;
	transition: color var(--st-dur) var(--st-ease), opacity var(--st-dur) var(--st-ease);
}

button,
input,
textarea,
select {
	font: inherit;
	color: inherit;
}

h1, h2, h3, h4, h5, h6, p, figure, blockquote, ul, ol {
	margin: 0;
}

ul, ol {
	padding: 0;
	list-style: none;
}

hr {
	border: 0;
	border-top: 1px solid var(--st-line);
	margin: 0;
}

::selection {
	background: var(--st-ink);
	color: var(--st-cream);
}

/* ==========================================================================
   03. Utilitaires
   ========================================================================== */
.st-container {
	width: 100%;
	max-width: var(--st-container);
	margin-inline: auto;
	padding-inline: var(--st-gutter);
}

.st-container--narrow {
	max-width: 980px;
}

.st-section {
	position: relative;
	padding-block: var(--st-section-y);
}

.st-section--ink {
	background-color: var(--st-ink);
	color: var(--st-light);
	--st-wipe: var(--st-ink);
}

.st-section--light {
	background-color: var(--st-light);
	color: var(--st-ink);
	--st-wipe: var(--st-light);
}

.st-section--cream {
	background-color: var(--st-cream);
	color: var(--st-ink);
	--st-wipe: var(--st-cream);
}

.st-section--flush {
	padding-block: 0;
}

/* --- Titres de section : accent serif italique + ligne sans capitales --- */
.st-title {
	display: flex;
	flex-direction: column;
	gap: 0.12em;
	font-weight: 400;
	line-height: 1.12;
	text-wrap: balance;
}

.st-title__accent {
	font-family: var(--st-font-display);
	font-style: italic;
	font-weight: 400;
	font-size: clamp(1.6rem, 3.1vw, 2.6rem);
	letter-spacing: 0.005em;
}

.st-title__main {
	font-family: var(--st-font-sans);
	font-weight: 500;
	font-size: clamp(1.35rem, 2.5vw, 2.05rem);
	letter-spacing: 0.055em;
	text-transform: uppercase;
}

/* Variante sur une seule ligne (formulaire de contact) */
.st-title--inline {
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
	align-items: baseline;
	gap: 0.32em;
	text-align: center;
}

.st-title--center {
	align-items: center;
	text-align: center;
}

/* --- Mot-clé encadré -----------------------------------------------------
   Deux variantes : bloc plein sur les fonds sombres, filet sur les fonds
   clairs. L'état « posé » est l'état par défaut (donc correct sans JS) ;
   c'est l'état « pas encore révélé » qui est décrit ensuite.             */
.st-mark {
	position: relative;
	display: inline-block;
	/* Le cadre déborde légèrement à gauche et à droite du mot. */
	padding: 0.1em 0.42em 0.16em;
	margin-inline: -0.1em;
	border-radius: 0.55em;
	color: var(--st-mark-fg, inherit);
	white-space: nowrap;
	transform: rotate(var(--st-mark-tilt, -1.6deg));
	transform-origin: center center;
	/* Le fond est un dégradé plat : background-size s'anime, contrairement à
	   un pseudo-élément en z-index négatif qui se perd dans les contextes
	   d'empilement créés par les éléments animés. */
	background-image: linear-gradient(var(--st-mark-bg, var(--st-cream)), var(--st-mark-bg, var(--st-cream)));
	background-repeat: no-repeat;
	background-position: left center;
	background-size: 100% 100%;
	transition: background-size 0.75s var(--st-ease) 0.15s,
		transform 0.75s var(--st-ease) 0.15s,
		color 0.3s var(--st-ease) 0.45s;
}

/* Avant apparition : le cadre est replié et le mot encore d'aplomb. */
.js [data-reveal]:not(.is-visible) .st-mark {
	color: inherit;
	background-size: 0% 100%;
	transform: rotate(0deg);
	transition-delay: 0s;
}

/* Variante filet : le cadre se dessine de la gauche vers la droite,
   et s'incline dans l'autre sens pour varier le rythme. */
.st-mark--outline {
	--st-mark-tilt: 1.4deg;
	color: inherit;
	padding-inline: 0.38em;
	background-image: none;
}

.st-mark--outline::before {
	content: "";
	position: absolute;
	inset: 0;
	border: 1px solid var(--st-mark-line, currentColor);
	border-radius: inherit;
	clip-path: inset(0 0 0 0 round 0.55em);
	transition: clip-path 0.8s var(--st-ease) 0.15s;
	pointer-events: none;
}

.js [data-reveal]:not(.is-visible) .st-mark--outline::before {
	clip-path: inset(0 100% 0 0 round 0.55em);
}

/* Contextes de couleur */
.st-hero,
.st-split,
.st-section--ink {
	--st-mark-bg: var(--st-cream);
	--st-mark-fg: var(--st-ink);
	--st-mark-line: var(--st-cream);
}

.st-section--light,
.st-section--cream {
	--st-mark-bg: var(--st-ink);
	--st-mark-fg: var(--st-cream);
	--st-mark-line: var(--st-ink);
}

.st-section__head {
	margin-bottom: clamp(38px, 4.6vw, 64px);
}

.st-section__head--center {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

/* --- Sur-titre / label --- */
.st-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-size: 0.6875rem;
	font-weight: 500;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--st-muted);
	margin-bottom: 18px;
}

.st-eyebrow::before {
	content: "";
	width: 28px;
	height: 1px;
	background: currentColor;
	opacity: 0.6;
}

.st-section--ink .st-eyebrow {
	color: var(--st-muted-invert);
}

/* --- Paragraphe courant --- */
.st-lead {
	font-weight: 300;
	font-size: clamp(0.9375rem, 1.05vw, 1rem);
	line-height: 1.85;
	color: var(--st-muted);
	max-width: 54ch;
}

.st-section--ink .st-lead {
	color: var(--st-muted-invert);
}

.st-lead--center {
	margin-top: 18px;
	margin-inline: auto;
	text-align: center;
}

/* Les menus WordPress sortent en <ul> : on garde le même rendu horizontal */
.st-header__nav ul,
.st-footer__bottom ul {
	display: flex;
	align-items: center;
	gap: inherit;
}

.st-mobile-nav ul,
.st-footer__list ul {
	display: flex;
	flex-direction: column;
	gap: inherit;
	width: 100%;
}

/* --- Boutons ---
   Le remplissage est un dégradé plat animé en background-size : il ne peut
   pas être défini en currentColor, sinon il vire en même temps que le texte
   au survol et le libellé devient invisible. D'où deux variables distinctes,
   posées par la variante selon le fond sur lequel le bouton est posé.      */
.st-btn {
	--st-btn-fill: var(--st-ink);
	--st-btn-label: var(--st-light);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 46px;
	padding: 0 30px;
	border: 1px solid currentColor;
	border-radius: var(--st-radius-pill);
	background-color: transparent;
	background-image: linear-gradient(var(--st-btn-fill), var(--st-btn-fill));
	background-repeat: no-repeat;
	background-position: left center;
	background-size: 0% 100%;
	color: inherit;
	font-family: var(--st-font-sans);
	font-size: 0.6875rem;
	font-weight: 500;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	text-align: center;
	cursor: pointer;
	transition: background-size var(--st-dur) var(--st-ease),
		color var(--st-dur) var(--st-ease),
		border-color var(--st-dur) var(--st-ease);
}

.st-btn:hover,
.st-btn:focus-visible {
	background-size: 100% 100%;
	color: var(--st-btn-label);
	border-color: var(--st-btn-fill);
}

/* Une fois rempli, le libellé prend la couleur du fond : l'anneau de focus
   doit suivre le remplissage, pas le texte. */
.st-btn:focus-visible {
	outline-color: var(--st-btn-fill);
}

/* Bouton posé sur un fond sombre : il se remplit en clair. */
.st-btn--on-dark {
	--st-btn-fill: var(--st-light);
	--st-btn-label: var(--st-ink);
}

/* Bouton posé sur un fond clair : il se remplit en encre. */
.st-btn--on-light {
	--st-btn-fill: var(--st-ink);
	--st-btn-label: var(--st-light);
}

.st-btn--sm {
	min-height: 40px;
	padding: 0 24px;
	font-size: 0.625rem;
}

/* --- Réseaux sociaux ---
   Pastille ronde au filet, qui se remplit au survol comme les boutons.     */
.st-socials {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.st-social {
	--st-btn-fill: var(--st-light);
	--st-btn-label: var(--st-ink);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	border: 1px solid currentColor;
	border-radius: 50%;
	background-color: transparent;
	background-image: linear-gradient(var(--st-btn-fill), var(--st-btn-fill));
	background-repeat: no-repeat;
	background-position: center center;
	background-size: 0% 0%;
	color: var(--st-muted-invert);
	transition: background-size var(--st-dur) var(--st-ease),
		color var(--st-dur) var(--st-ease),
		border-color var(--st-dur) var(--st-ease);
}

.st-social:hover,
.st-social:focus-visible {
	background-size: 100% 100%;
	color: var(--st-btn-label);
	border-color: var(--st-btn-fill);
}

.st-social:focus-visible {
	outline-color: var(--st-btn-fill);
}

.st-social__icon {
	width: 18px;
	height: 18px;
}

/* Repli quand aucun pictogramme ne correspond au réseau. */
.st-social--text {
	width: auto;
	padding-inline: 16px;
	border-radius: var(--st-radius-pill);
	font-size: 0.625rem;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

/* Sur fond clair, la pastille se remplit en encre. */
.st-section--light .st-social,
.st-section--cream .st-social {
	--st-btn-fill: var(--st-ink);
	--st-btn-label: var(--st-light);
	color: var(--st-muted);
}

/* --- Lien souligné animé --- */
.st-link {
	position: relative;
	display: inline-block;
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	padding-bottom: 4px;
}

.st-link::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 1px;
	background: currentColor;
	transform: scaleX(0);
	transform-origin: right center;
	transition: transform var(--st-dur) var(--st-ease);
}

.st-link:hover::after,
.st-link:focus-visible::after {
	transform: scaleX(1);
	transform-origin: left center;
}

/* --- Médias (placeholders en attendant les photos / ACF) --- */
.st-media {
	position: relative;
	display: block;
	overflow: hidden;
	border-radius: var(--st-radius-media);
	background-color: var(--st-placeholder);
}

.st-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.9s var(--st-ease);
}

.st-media--zoom:hover img,
.st-service:hover .st-media--zoom img {
	transform: scale(1.045);
}

.st-media--1x1 { aspect-ratio: 1 / 1; }
.st-media--4x3 { aspect-ratio: 4 / 3; }
.st-media--3x2 { aspect-ratio: 3 / 2; }
.st-media--4x5 { aspect-ratio: 4 / 5; }

/* Placeholder « zone photo » — reprend le bleu de la maquette en version charte */
.st-media--placeholder {
	background-color: var(--st-placeholder);
	background-image:
		repeating-linear-gradient(
			135deg,
			rgba(28, 28, 28, 0.045) 0 1px,
			transparent 1px 9px
		);
	display: grid;
	place-items: center;
}

.st-media--placeholder.is-dark {
	background-color: #2b2b2b;
	background-image:
		repeating-linear-gradient(
			135deg,
			rgba(244, 244, 244, 0.05) 0 1px,
			transparent 1px 9px
		);
}

/* Spécificité volontairement plus forte que `.st-media img` ci-dessus. */
.st-media .st-media__mark {
	width: clamp(56px, 9%, 104px);
	height: auto;
	object-fit: contain;
	opacity: 0.16;
	transition: none;
}

.st-media--placeholder.is-dark .st-media__mark {
	opacity: 0.2;
}

/* Volet qui se retire vers la droite quand le média entre dans l'écran. */
.st-media--reveal::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
	background: var(--st-wipe);
	transform: scaleX(0);
	transform-origin: right center;
	transition: transform 0.95s var(--st-ease);
	pointer-events: none;
}

.js [data-reveal]:not(.is-visible) .st-media--reveal::after {
	transform: scaleX(1);
}

/* Le média se repose d'un léger zoom en même temps que le volet se retire.
   Seul l'état initial est décrit, pour ne pas neutraliser le zoom au survol. */
.js [data-reveal]:not(.is-visible) .st-media--reveal img:not(.st-media__mark) {
	transform: scale(1.08);
}

/* --- Apparitions au scroll ---
   Conditionnées à la classe .js posée par header.php : sans JavaScript,
   le contenu reste visible. */
.js [data-reveal] {
	opacity: 0;
	transform: translateY(26px);
	transition: opacity 0.85s var(--st-ease), transform 0.85s var(--st-ease);
	transition-delay: var(--st-reveal-delay, 0s);
	will-change: opacity, transform;
}

.js [data-reveal].is-visible {
	opacity: 1;
	transform: none;
}

/* --- Accessibilité --- */
.st-sr-only {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.st-skip-link {
	position: absolute;
	top: -100px;
	left: 16px;
	z-index: 999;
	padding: 12px 20px;
	background: var(--st-cream);
	color: var(--st-ink);
	font-size: 0.75rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	transition: top 0.25s var(--st-ease);
}

.st-skip-link:focus {
	top: 16px;
}

:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
}

/* ==========================================================================
   04. Header & navigation
   ========================================================================== */
.st-header {
	position: fixed;
	inset: 0 0 auto 0;
	z-index: 100;
	color: var(--st-light);
	transition: background-color var(--st-dur) var(--st-ease),
		box-shadow var(--st-dur) var(--st-ease), color var(--st-dur) var(--st-ease);
}

.st-header.is-stuck,
.st-header--solid {
	background-color: rgba(28, 28, 28, 0.94);
	backdrop-filter: saturate(140%) blur(10px);
	box-shadow: 0 1px 0 rgba(244, 244, 244, 0.1);
}

/* Le bandeau se resserre dès que la page défile. */
.st-header.is-stuck,
.st-header--solid {
	--st-header-h: var(--st-header-h-stuck);
}

.st-header__inner {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 24px;
	min-height: var(--st-header-h);
	transition: min-height 0.5s var(--st-ease);
}

.st-header__nav {
	display: flex;
	align-items: center;
	gap: clamp(20px, 2.6vw, 42px);
}

.st-header__nav--end {
	justify-content: flex-end;
}

.st-header__nav a {
	font-size: 0.6875rem;
	font-weight: 500;
	letter-spacing: 0.19em;
	text-transform: uppercase;
	opacity: 0.82;
}

.st-header__nav a:hover,
.st-header__nav a:focus-visible,
.st-header__nav a.is-active {
	opacity: 1;
}

.st-logo {
	display: inline-block;
	justify-self: center;
}

.st-logo img {
	width: auto;
	height: clamp(40px, 4.4vw, 58px);
	transition: height 0.5s var(--st-ease);
}

.st-header.is-stuck .st-logo img,
.st-header--solid .st-logo img {
	height: clamp(34px, 3.2vw, 44px);
}

/* Burger mobile */
.st-burger {
	display: none;
	justify-self: end;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	background: transparent;
	cursor: pointer;
	position: relative;
}

.st-burger span {
	position: absolute;
	left: 11px;
	width: 22px;
	height: 1px;
	background: currentColor;
	transition: transform 0.4s var(--st-ease), opacity 0.25s var(--st-ease);
}

.st-burger span:nth-child(1) { top: 18px; }
.st-burger span:nth-child(2) { top: 25px; }

.st-burger[aria-expanded="true"] span:nth-child(1) {
	transform: translateY(3.5px) rotate(45deg);
}

.st-burger[aria-expanded="true"] span:nth-child(2) {
	transform: translateY(-3.5px) rotate(-45deg);
}

/* Panneau mobile */
.st-mobile-nav {
	position: fixed;
	inset: 0;
	z-index: 99;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 8px;
	padding: calc(var(--st-header-h) + 16px) var(--st-gutter) 48px;
	background: var(--st-ink);
	color: var(--st-light);
	overflow-y: auto;
	overscroll-behavior: contain;
	opacity: 0;
	visibility: hidden;
	transform: translateY(-12px);
	transition: opacity 0.4s var(--st-ease), transform 0.4s var(--st-ease), visibility 0.4s;
}

.st-mobile-nav.is-open {
	opacity: 1;
	visibility: visible;
	transform: none;
}

.st-mobile-nav a {
	font-family: var(--st-font-display);
	font-size: clamp(1.6rem, 7.5vw, 2.4rem);
	font-weight: 400;
	line-height: 1.45;
	border-bottom: 1px solid var(--st-line-invert);
	padding-block: 12px;
	opacity: 0;
	transform: translateY(16px);
	transition: opacity 0.5s var(--st-ease), transform 0.5s var(--st-ease);
}

.st-mobile-nav a:last-of-type {
	border-bottom: 0;
}

/* Les entrées arrivent en cascade à l'ouverture du panneau. */
.st-mobile-nav.is-open a {
	opacity: 1;
	transform: none;
}

.st-mobile-nav.is-open a:nth-of-type(1) { transition-delay: 0.08s; }
.st-mobile-nav.is-open a:nth-of-type(2) { transition-delay: 0.14s; }
.st-mobile-nav.is-open a:nth-of-type(3) { transition-delay: 0.2s; }
.st-mobile-nav.is-open a:nth-of-type(4) { transition-delay: 0.26s; }
.st-mobile-nav.is-open a:nth-of-type(5) { transition-delay: 0.32s; }
.st-mobile-nav.is-open a:nth-of-type(6) { transition-delay: 0.38s; }

/* ==========================================================================
   05. Hero
   ========================================================================== */
.st-hero {
	position: relative;
	display: flex;
	align-items: center;
	min-height: 660px; /* repli pour les navigateurs sans unité svh */
	min-height: clamp(620px, 100svh, 980px);
	padding-block: calc(var(--st-header-h) + 40px) clamp(84px, 9vh, 128px);
	background-color: var(--st-ink);
	color: var(--st-light);
	overflow: hidden;
}

.st-hero__media {
	position: absolute;
	inset: 0;
	z-index: 0;
}

/* Le visuel du hero couvre toute la section : pas d'arrondi ici. */
.st-hero__media > .st-media {
	height: 100%;
	border-radius: 0;
}

/* Respiration lente sur la photo d'ambiance. */
@keyframes st-kenburns {
	from {
		transform: scale(1.12);
	}
	to {
		transform: scale(1);
	}
}

.st-hero__media > img {
	animation: st-kenburns 16s var(--st-ease) forwards;
}

.st-hero__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: grayscale(0.35) brightness(0.55);
}

.st-hero__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(
		180deg,
		rgba(20, 20, 20, 0.82) 0%,
		rgba(20, 20, 20, 0.55) 38%,
		rgba(20, 20, 20, 0.8) 100%
	);
}

.st-hero__inner {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	width: 100%;
}

.st-hero__title {
	max-width: min(24ch, 100%);
	margin-inline: auto;
	font-family: var(--st-font-sans);
	font-weight: 300;
	font-size: clamp(1.9rem, 4.2vw, 3.9rem);
	line-height: 1.2;
	letter-spacing: 0.005em;
	text-transform: uppercase;
	text-wrap: balance;
}

.st-hero__title strong {
	font-weight: 600;
}

.st-hero__title em {
	font-family: var(--st-font-display);
	font-style: italic;
	font-weight: 400;
	text-transform: none;
	letter-spacing: 0;
}

.st-hero__text {
	margin-top: 24px;
	max-width: 52ch;
	color: rgba(244, 244, 244, 0.72);
	font-weight: 300;
	font-size: clamp(0.9375rem, 1.1vw, 1.0625rem);
	line-height: 1.8;
}

.st-hero__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 14px 26px;
	margin-top: 38px;
}

.st-hero__socials {
	display: flex;
	justify-content: center;
	margin-top: clamp(40px, 6vw, 74px);
}

/* Invitation au défilement */
.st-hero__scroll {
	position: absolute;
	left: 50%;
	bottom: 22px;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	transform: translateX(-50%);
	font-size: 0.5625rem;
	font-weight: 500;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: rgba(244, 244, 244, 0.45);
}

.st-hero__scroll:hover,
.st-hero__scroll:focus-visible {
	color: var(--st-light);
}

.st-hero__scroll::after {
	content: "";
	width: 1px;
	height: 52px;
	background: linear-gradient(to bottom, rgba(244, 244, 244, 0.55), transparent);
	transform-origin: top center;
	animation: st-scroll-line 2.6s var(--st-ease) infinite;
}

@keyframes st-scroll-line {
	0% {
		transform: scaleY(0);
		opacity: 0;
	}
	30% {
		opacity: 1;
	}
	100% {
		transform: scaleY(1);
		opacity: 0;
	}
}

/* ==========================================================================
   06. Blocs scindés — À propos & Zoom gérante
   ========================================================================== */
/* La bande de couleur occupe toute la largeur, le contenu reste dans les
   1440 px du reste de la page. Le padding vertical dégage les visuels des
   sections voisines. */
.st-section--split {
	background-color: var(--st-ink);
	color: var(--st-light);
	padding-block: clamp(56px, 6.5vw, 104px);
	--st-wipe: var(--st-ink);
}

.st-split {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	align-items: stretch;
}

.st-split__media {
	position: relative;
	min-height: clamp(340px, 46vw, 620px);
}

/* Le média remplit la colonne, quelle que soit la hauteur du texte en face */
.st-split__media > .st-media {
	position: absolute;
	inset: 0;
}

.st-split__body {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: clamp(44px, 5vw, 88px) 0 clamp(44px, 5vw, 88px) clamp(28px, 4.4vw, 72px);
}

.st-split--reverse .st-split__body {
	padding-left: 0;
	padding-right: clamp(28px, 4.4vw, 72px);
}

.st-split__title {
	font-family: var(--st-font-sans);
	font-weight: 300;
	font-size: clamp(1.3rem, 2.2vw, 1.95rem);
	line-height: 1.4;
	letter-spacing: 0.045em;
	text-transform: uppercase;
	max-width: 22ch;
	text-wrap: balance;
}

.st-split__title strong {
	font-weight: 600;
}

.st-split__title em {
	font-family: var(--st-font-display);
	font-style: italic;
	font-weight: 400;
	text-transform: none;
	letter-spacing: 0;
}

.st-split__text {
	margin-top: 26px;
	max-width: 46ch;
	color: var(--st-muted-invert);
	font-weight: 300;
	font-size: 0.9375rem;
	line-height: 1.9;
}

.st-split__text + .st-split__text {
	margin-top: 14px;
}

.st-split__actions {
	margin-top: 34px;
}

/* Ordre inversé : texte à gauche, photo à droite */
.st-split--reverse .st-split__media {
	order: 2;
}

.st-split--reverse .st-split__body {
	order: 1;
}

/* Signature manuscrite / nom de la gérante */
.st-signature {
	margin-top: 30px;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.st-signature__name {
	font-family: var(--st-font-display);
	font-size: 1.25rem;
	font-style: italic;
	font-weight: 400;
}

.st-signature__role {
	font-size: 0.6875rem;
	font-weight: 500;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--st-muted-invert);
}

/* ==========================================================================
   07. Services
   ========================================================================== */
.st-services__list {
	display: flex;
	flex-direction: column;
}

.st-service {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: clamp(28px, 5vw, 80px);
	align-items: stretch;
	padding-block: clamp(36px, 4.2vw, 58px);
	border-top: 1px solid var(--st-line);
}

.st-service:first-child {
	border-top: 0;
	padding-top: 0;
}

.st-service__media {
	aspect-ratio: 3 / 2;
}

.st-service__media > .st-media {
	height: 100%;
}

/* Texte et tags centrés verticalement en face du visuel. */
.st-service__body {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding-block: clamp(0px, 1vw, 12px);
}

.st-service__title {
	font-family: var(--st-font-sans);
	font-size: clamp(1rem, 1.5vw, 1.25rem);
	font-weight: 500;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	line-height: 1.4;
}

.st-service__text {
	margin-top: 18px;
	max-width: 50ch;
	color: var(--st-muted);
	font-weight: 300;
	font-size: 0.9375rem;
	line-height: 1.85;
}

/* Contenu issu de l'éditeur ACF : paragraphes, gras, listes. */
.st-service__text > * + * {
	margin-top: 10px;
}

.st-service__text strong,
.st-service__text b {
	font-weight: 500;
	color: var(--st-ink);
}

.st-service__text ul,
.st-service__text ol {
	padding-left: 1.2em;
	list-style: revert;
}

.st-service__text a {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.st-service__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 22px;
}

.st-service__tag {
	padding: 5px 14px;
	border: 1px solid var(--st-line);
	border-radius: var(--st-radius-pill);
	font-size: 0.625rem;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--st-muted);
}

/* ==========================================================================
   08. Chiffres clés
   ========================================================================== */
.st-stats {
	padding-top: clamp(36px, 4.2vw, 58px);
	border-top: 1px solid var(--st-line);
}

/* Le nombre de chiffres dépend de ce qui est saisi (1 à 4) : on centre la
   rangée plutôt que de réserver quatre colonnes fixes. */
.st-stats__grid {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: clamp(28px, 3vw, 40px);
	text-align: center;
}

.st-stat {
	flex: 1 1 0;
	min-width: 180px;
	max-width: 320px;
}

.st-stat__num {
	font-family: var(--st-font-display);
	font-size: clamp(2.1rem, 4.4vw, 3.4rem);
	font-weight: 400;
	line-height: 1;
	letter-spacing: -0.01em;
}

.st-stat__label {
	margin-top: 12px;
	font-size: 0.6875rem;
	font-weight: 500;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--st-muted);
}

/* ==========================================================================
   09. Projets clients
   ========================================================================== */
.st-projects__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(24px, 2.6vw, 38px) clamp(20px, 2.2vw, 32px);
}

.st-project {
	display: flex;
	flex-direction: column;
}

/* Les projets sont présentés à titre d'illustration : pas de lien, donc pas
   d'effet au survol qui laisserait croire qu'ils sont cliquables. */
.st-project__media {
	aspect-ratio: 4 / 3;
	overflow: hidden;
	border-radius: var(--st-radius-media);
}

.st-project__media > .st-media {
	height: 100%;
}

.st-project__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-top: 18px;
}

.st-project__tag {
	padding: 4px 12px;
	border-radius: var(--st-radius-pill);
	background: var(--st-ink);
	color: var(--st-cream);
	font-size: 0.5625rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.st-project__title {
	margin-top: 14px;
	font-size: 0.9375rem;
	font-weight: 500;
	letter-spacing: 0.075em;
	text-transform: uppercase;
	line-height: 1.5;
}

.st-project__meta {
	margin-top: 10px;
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 0.75rem;
	font-weight: 300;
	color: var(--st-muted);
}

.st-project__meta span:first-child {
	font-weight: 500;
}

.st-project__meta .st-dot {
	width: 3px;
	height: 3px;
	border-radius: 50%;
	background: currentColor;
	opacity: 0.7;
}


/* ==========================================================================
   10. Avis clients
   ========================================================================== */
.st-reviews__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(32px, 3.4vw, 52px);
}

.st-review {
	position: relative;
	display: flex;
	flex-direction: column;
	padding-right: 34px;
}

.st-review__stars {
	display: flex;
	gap: 6px;
	color: var(--st-cream);
	font-size: 0.75rem;
	letter-spacing: 0.1em;
}

.st-review__text {
	margin-top: 18px;
	color: var(--st-muted-invert);
	font-weight: 300;
	font-size: 0.875rem;
	line-height: 1.85;
}

.st-review__author {
	display: flex;
	flex-direction: column;
	gap: 2px;
	margin-top: auto;
	padding-top: 26px;
}

.st-review__name {
	font-size: 0.875rem;
	font-weight: 500;
	letter-spacing: 0.03em;
}

.st-review__role {
	font-size: 0.6875rem;
	font-weight: 300;
	letter-spacing: 0.06em;
	color: var(--st-muted-invert);
}

.st-review__quote {
	position: absolute;
	right: 0;
	bottom: 26px;
	font-family: var(--st-font-display);
	font-size: 2.6rem;
	line-height: 1;
	color: var(--st-cream);
	opacity: 0.25;
	pointer-events: none;
}

/* ==========================================================================
   11. Formulaire de contact
   ========================================================================== */
/* Retour après envoi */
.st-alert {
	margin-top: clamp(28px, 3vw, 40px);
	padding: 16px 22px;
	border-left: 2px solid currentColor;
	font-size: 0.875rem;
	font-weight: 300;
	line-height: 1.7;
}

.st-alert--success {
	background: var(--st-cream);
	color: var(--st-ink);
}

.st-alert--error {
	background: rgba(28, 28, 28, 0.05);
	color: var(--st-ink);
}

/* Champ leurre : sorti de l'écran plutôt que masqué, les robots repèrent
   display:none. */
.st-honeypot {
	position: absolute !important;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.st-captcha {
	grid-column: 1 / -1;
	display: flex;
	justify-content: center;
}

.st-captcha__notice {
	grid-column: 1 / -1;
	margin-top: -6px;
	font-size: 0.6875rem;
	font-weight: 300;
	line-height: 1.7;
	text-align: center;
	color: var(--st-muted);
}

.st-captcha__notice a {
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* Le badge flottant de reCAPTCHA v3 doublonne avec la mention ci-dessus. */
.grecaptcha-badge {
	visibility: hidden;
}

.st-contact__form {
	margin-top: clamp(34px, 4vw, 54px);
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: clamp(22px, 2.6vw, 34px) clamp(24px, 3.4vw, 48px);
}

.st-field {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.st-field--full {
	grid-column: 1 / -1;
}

.st-field label {
	font-size: 0.6875rem;
	font-weight: 500;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--st-muted);
}

.st-field input,
.st-field textarea {
	width: 100%;
	padding: 10px 2px;
	border: 0;
	border-bottom: 1px solid var(--st-line);
	border-radius: 0;
	background: transparent;
	font-family: var(--st-font-sans);
	/* 16 px minimum : en dessous, iOS zoome automatiquement à la saisie. */
	font-size: 1rem;
	font-weight: 300;
	color: var(--st-ink);
	transition: border-color var(--st-dur) var(--st-ease),
		box-shadow var(--st-dur) var(--st-ease);
}

.st-field textarea {
	min-height: 150px;
	resize: vertical;
	line-height: 1.7;
}

.st-field input::placeholder,
.st-field textarea::placeholder {
	color: rgba(28, 28, 28, 0.35);
}

/* Le filet du champ sert d'indicateur de focus : on double son épaisseur via
   box-shadow plutôt que border-width, pour ne pas décaler la mise en page,
   et on retire l'anneau générique qui ferait doublon. */
.st-field input:focus,
.st-field textarea:focus {
	outline: none;
	border-bottom-color: var(--st-ink);
	box-shadow: 0 1px 0 0 var(--st-ink);
}

.st-contact__consent {
	grid-column: 1 / -1;
	display: flex;
	align-items: flex-start;
	gap: 12px;
	font-size: 0.75rem;
	font-weight: 300;
	line-height: 1.7;
	color: var(--st-muted);
}

.st-contact__consent input {
	flex: 0 0 auto;
	margin-top: 4px;
	accent-color: var(--st-ink);
}

/* Deux cases qui se suivent : on les rapproche, l'écart de grille est prévu
   pour des champs de saisie. */
.st-contact__consent + .st-contact__consent {
	margin-top: calc(-1 * clamp(12px, 1.6vw, 20px));
}

.st-contact__actions {
	grid-column: 1 / -1;
	display: flex;
	justify-content: center;
	margin-top: 10px;
}

/* ==========================================================================
   12. Footer
   ========================================================================== */
.st-footer {
	background-color: var(--st-ink);
	color: var(--st-light);
	padding-block: clamp(56px, 6.4vw, 92px) 0;
}

.st-footer__top {
	display: grid;
	/* Marque + quatre colonnes : coordonnées, adresse, prestations, menu. */
	grid-template-columns: minmax(240px, 1.2fr) repeat(4, minmax(0, 1fr));
	gap: clamp(28px, 3.4vw, 56px);
}

.st-footer__logo img {
	width: auto;
	height: 118px;
	margin-left: -6px;
}

.st-footer__tagline {
	margin-top: 22px;
	max-width: 34ch;
	color: var(--st-muted-invert);
	font-weight: 300;
	font-size: 0.875rem;
	line-height: 1.85;
}

.st-footer__socials {
	margin-top: 26px;
}

.st-footer__col-title {
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	margin-bottom: 20px;
}

.st-footer__list {
	display: flex;
	flex-direction: column;
	gap: 11px;
	font-weight: 300;
	font-size: 0.875rem;
	color: var(--st-muted-invert);
}

.st-footer__list a:hover,
.st-footer__list a:focus-visible {
	color: var(--st-light);
}

.st-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: 14px;
	margin-top: clamp(46px, 5vw, 72px);
	padding-block: 26px;
	border-top: 1px solid var(--st-line-invert);
	font-size: 0.6875rem;
	font-weight: 300;
	letter-spacing: 0.06em;
	color: var(--st-muted-invert);
}

.st-footer__bottom nav {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
}

/* ==========================================================================
   12 bis. Pages internes (blog, page simple, 404)
   ========================================================================== */
/* Hors landing, le bandeau est d'emblée en version resserrée. */
.st-page {
	padding-top: calc(var(--st-header-h-stuck) + var(--st-section-y));
}

.st-page__thumb {
	margin-bottom: 38px;
}

.st-page__list {
	display: flex;
	flex-direction: column;
	gap: 42px;
}

.st-page__item {
	padding-bottom: 42px;
	border-bottom: 1px solid var(--st-line);
}

.st-page__item:last-child {
	padding-bottom: 0;
	border-bottom: 0;
}

.st-page__content {
	font-weight: 300;
	line-height: 1.9;
	color: var(--st-ink);
}

.st-page__content > * + * {
	margin-top: 22px;
}

.st-page__content h2,
.st-page__content h3 {
	margin-top: 44px;
	font-weight: 500;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.st-page__content a {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.st-page__content ul,
.st-page__content ol {
	padding-left: 1.2em;
	list-style: revert;
}

.st-page__content blockquote {
	padding-left: 24px;
	border-left: 1px solid var(--st-line);
	font-family: var(--st-font-display);
	font-style: italic;
	font-size: 1.15rem;
}

.wp-block-post-title,
.st-page__content img {
	max-width: 100%;
}

.navigation.pagination {
	margin-top: 56px;
	display: flex;
	justify-content: center;
	font-size: 0.8125rem;
	letter-spacing: 0.1em;
}

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

/* ==========================================================================
   12 ter. Pages légales (template-legal.php)
   ========================================================================== */
.st-legal {
	background: var(--st-light);
	padding-block: calc(var(--st-header-h-stuck) + clamp(48px, 6vw, 96px)) var(--st-section-y);
}

.st-legal__head {
	margin-bottom: clamp(36px, 5vw, 72px);
	padding-bottom: clamp(24px, 3vw, 40px);
	border-bottom: 1px solid var(--st-line);
}

.st-legal__title {
	font-family: var(--st-font-display);
	font-style: italic;
	font-weight: 400;
	font-size: clamp(2.2rem, 5vw, 4rem);
	line-height: 1.05;
	letter-spacing: -0.005em;
	text-wrap: balance;
}

.st-legal__layout {
	display: grid;
	grid-template-columns: minmax(200px, 280px) minmax(0, 1fr);
	gap: clamp(40px, 6vw, 110px);
	align-items: start;
}

.st-legal__layout--single {
	grid-template-columns: minmax(0, 1fr);
}

/* --- Sommaire --- */
.st-legal__toc {
	position: sticky;
	top: calc(var(--st-header-h-stuck) + 32px);
}

.st-legal__toc-title {
	display: block;
	margin-bottom: 18px;
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--st-muted);
	list-style: none;
	cursor: pointer;
}

.st-legal__toc-title::-webkit-details-marker {
	display: none;
}

.st-legal__toc-list {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding-left: 14px;
	border-left: 1px solid var(--st-line);
}

.st-legal__toc-list a {
	display: block;
	font-size: 0.8125rem;
	font-weight: 300;
	line-height: 1.5;
	color: var(--st-muted);
}

.st-legal__toc-list a:hover,
.st-legal__toc-list a:focus-visible {
	color: var(--st-ink);
}

/* --- Texte --- */
.st-legal__content {
	max-width: 72ch;
	font-size: 1rem;
	font-weight: 300;
	line-height: 1.85;
	color: #45423d;
}

.st-legal__content > * + * {
	margin-top: 16px;
}

.st-legal__content h2 {
	margin-top: clamp(44px, 5vw, 64px);
	font-family: var(--st-font-sans);
	font-size: clamp(1rem, 1.4vw, 1.2rem);
	font-weight: 500;
	letter-spacing: 0.08em;
	line-height: 1.4;
	text-transform: uppercase;
	color: var(--st-ink);
	/* Les ancres du sommaire ne passent pas sous le bandeau fixe. */
	scroll-margin-top: calc(var(--st-header-h-stuck) + 28px);
}

.st-legal__content > h2:first-child {
	margin-top: 0;
}

.st-legal__content h3 {
	margin-top: 32px;
	font-family: var(--st-font-display);
	font-style: italic;
	font-weight: 400;
	font-size: 1.3rem;
	line-height: 1.3;
	color: var(--st-ink);
}

.st-legal__content h2 + *,
.st-legal__content h3 + * {
	margin-top: 14px;
}

.st-legal__content strong {
	font-weight: 500;
	color: var(--st-ink);
}

.st-legal__content a {
	color: var(--st-ink);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.st-legal__content ul,
.st-legal__content ol {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.st-legal__content ul li {
	position: relative;
	padding-left: 22px;
}

.st-legal__content ul li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.9em;
	width: 10px;
	height: 1px;
	background: var(--st-ink);
}

.st-legal__content ol {
	padding-left: 1.3em;
	list-style: decimal;
}

/* « Dernière mise à jour » en tête de document. */
.st-legal__content .st-legal__updated {
	margin-bottom: 28px;
	font-size: 0.6875rem;
	font-weight: 500;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--st-muted);
}

@media (max-width: 980px) {
	.st-legal__layout {
		grid-template-columns: minmax(0, 1fr);
		gap: 32px;
	}

	.st-legal__toc {
		position: static;
		padding: 18px 20px;
		border: 1px solid var(--st-line);
		border-radius: 12px;
	}

	.st-legal__toc-title {
		margin-bottom: 0;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.st-legal__toc-title::after {
		content: "+";
		font-size: 1rem;
		font-weight: 300;
		letter-spacing: 0;
	}

	.st-legal__toc-details[open] .st-legal__toc-title {
		margin-bottom: 16px;
	}

	.st-legal__toc-details[open] .st-legal__toc-title::after {
		content: "−";
	}
}

/* ==========================================================================
   13. Responsive
   ========================================================================== */
@media (max-width: 1100px) {
	.st-projects__grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.st-footer__top {
		grid-template-columns: 1fr 1fr;
	}
}

@media (max-width: 980px) {
	:root {
		--st-header-h: 72px;
	}

	.st-header__inner {
		grid-template-columns: 1fr auto 1fr;
	}

	.st-header__nav {
		display: none;
	}

	.st-burger {
		display: block;
	}

	/* Le logo reste centré, le burger se place tout seul en colonne 3 */
	.st-header__inner > .st-logo {
		grid-column: 2;
	}

	.st-split {
		grid-template-columns: 1fr;
	}

	.st-split--reverse .st-split__media,
	.st-split--reverse .st-split__body {
		order: initial;
	}

	.st-split__media {
		min-height: 0;
		aspect-ratio: 4 / 3;
	}

	/* Les marges latérales sont déjà portées par .st-container. */
	.st-split__body,
	.st-split--reverse .st-split__body {
		padding: clamp(34px, 7vw, 56px) 0 clamp(12px, 4vw, 32px);
	}

	.st-split__title,
	.st-split__text {
		max-width: 42ch;
	}

	.st-service {
		grid-template-columns: 1fr;
		gap: 24px;
	}

	.st-service__media {
		aspect-ratio: 16 / 10;
	}

	.st-stats__grid {
		gap: 34px 20px;
	}

	.st-stat {
		flex-basis: calc(50% - 10px);
		min-width: 0;
	}

	.st-reviews__grid {
		grid-template-columns: 1fr;
		gap: 40px;
	}

	.st-review {
		padding-bottom: 36px;
		border-bottom: 1px solid var(--st-line-invert);
	}

	.st-review:last-child {
		padding-bottom: 0;
		border-bottom: 0;
	}
}

@media (max-width: 700px) {
	.st-projects__grid {
		grid-template-columns: 1fr;
	}

	.st-contact__form {
		grid-template-columns: 1fr;
	}

	.st-footer__top {
		grid-template-columns: 1fr;
	}

	.st-footer__bottom {
		justify-content: flex-start;
		gap: 10px;
	}

	.st-footer__bottom nav {
		gap: 16px;
	}

	.st-hero {
		min-height: 620px;
		min-height: 88svh;
	}

	/* Le bas du hero est déjà occupé par les réseaux sociaux. */
	.st-hero__scroll {
		display: none;
	}

	.st-hero__actions {
		flex-direction: column;
		align-items: center;
		gap: 22px;
	}

	.st-hero__actions .st-btn {
		width: 100%;
		max-width: 340px;
	}
}

@media (max-width: 520px) {
	.st-hero__socials {
		gap: 14px;
		font-size: 0.625rem;
	}

	.st-stats__grid {
		gap: 30px 16px;
	}

	.st-review {
		padding-right: 0;
	}

	.st-review__quote {
		display: none;
	}

	.st-footer__logo img {
		height: 96px;
	}
}

/* ==========================================================================
   14. Préférences système
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}

	.js [data-reveal] {
		opacity: 1;
		transform: none;
	}
}

/* Impression : on allège */
@media print {
	.st-header,
	.st-mobile-nav,
	.st-hero__socials,
	.st-contact__actions {
		display: none !important;
	}
}