/*
Theme Name: Studio Peyral
Description: Thème bloc sur mesure de Studio Peyral, conçu pour le site professionnel de Michaël Peyral. Thème enfant : le thème « Twenty Twenty-Five » doit rester installé.
Author: Michaël Peyral
Template: twentytwentyfive
Version: 0.21.1
Requires at least: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: studiopeyral
*/

/*
 * CSS personnalisé volontairement limité.
 * Les couleurs, typographies, espacements et styles des blocs sont définis
 * dans theme.json et restent modifiables dans Apparence > Éditeur > Styles.
 */

/* ---------- Défilement et ancres ---------- */

[id] {
	scroll-margin-top: 1.5rem;
}

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

/* ---------- Focus clavier visible ---------- */

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 2px solid var(--wp--preset--color--accent-1);
	outline-offset: 3px;
	border-radius: 2px;
}

.has-contrast-background-color :where(a, button):focus-visible {
	outline-color: var(--wp--preset--color--accent-3);
}

/* Liens lisibles sur les sections à fond bleu nuit. */
.has-contrast-background-color a:where(:not(.wp-element-button)) {
	color: var(--wp--preset--color--accent-3);
}

/* Bouton turquoise lumineux (fond sombre) : retour visuel au survol. */
.wp-block-button__link.has-accent-3-background-color:hover {
	background-color: var(--wp--preset--color--base) !important;
}

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

.sp-entete {
	border-bottom: 1px solid var(--wp--preset--color--accent-6);
}

/* ---------- Style de bloc « Surtitre » (paragraphe) ---------- */

.is-style-sp-surtitre {
	color: var(--wp--preset--color--accent-1);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.has-contrast-background-color .is-style-sp-surtitre {
	color: var(--wp--preset--color--accent-3);
}

/* ---------- Style de bloc « Carte » (groupe) ---------- */

.is-style-sp-carte {
	background-color: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--accent-6);
	border-radius: 12px;
	padding: var(--wp--preset--spacing--40);
}

.is-style-sp-carte > :first-child {
	margin-top: 0;
}

.is-style-sp-carte .wp-block-image img {
	border-radius: 8px;
}

@media (prefers-reduced-motion: no-preference) {
	.is-style-sp-carte {
		transition: box-shadow 0.2s ease, transform 0.2s ease;
	}

	.is-style-sp-carte:has(a:hover, a:focus-visible) {
		box-shadow: 0 10px 30px -12px rgb(19 41 75 / 0.25);
		transform: translateY(-2px);
	}
}

/* ---------- Style de bloc « Emplacement à fournir » (groupe) ---------- */

.is-style-sp-emplacement {
	background-color: var(--wp--preset--color--accent-2);
	border: 2px dashed var(--wp--preset--color--accent-1);
	border-radius: 12px;
	padding: var(--wp--preset--spacing--40);
}

/* ---------- Captures de projets ---------- */

.sp-capture img {
	border: 1px solid var(--wp--preset--color--accent-6);
	box-shadow: 0 20px 40px -24px rgb(19 41 75 / 0.35);
}

/* ---------- Préférence de réduction des animations ---------- */

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		scroll-behavior: auto !important;
		transition-duration: 0.01ms !important;
	}
}

/* =====================================================================
 * Accueil V2
 * Classes utilisées uniquement par l'en-tête V2, le pied de page V2 et les
 * compositions « Accueil V2 ». Aucune règle ci-dessous ne vise la V1.
 * ===================================================================== */

/* ---------- Accents typographiques : texte en italique dans un titre ---------- */

/* Les titres de la V1 ne contiennent pas d'italique : ces règles ne les modifient pas. */
.sp-titre-affiche em,
#realisations h2 em,
#services h2 em,
#a-propos h2 em {
	color: var(--wp--preset--color--accent-1);
	font-family: var(--wp--preset--font-family--literata);
	font-style: italic;
	font-weight: 400;
	letter-spacing: -0.02em;
}

.has-contrast-background-color .sp-titre-affiche em {
	color: var(--wp--preset--color--accent-3);
}

.sp-titre-affiche {
	font-weight: 800;
	letter-spacing: -0.04em;
	line-height: 1.02;
	max-width: 17ch;
	text-wrap: balance;
}

/* ---------- Signature « Studio Peyral » ---------- */

.sp-signature {
	font-size: clamp(1.25rem, 1.05rem + 0.6vw, 1.55rem);
	font-weight: 800;
	letter-spacing: -0.035em;
	line-height: 1.1;
	margin: 0;
	white-space: nowrap;
}

.sp-signature a {
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}

.sp-signature a:hover {
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 0.2em;
}

.sp-signature em {
	color: var(--wp--preset--color--accent-1);
	font-family: var(--wp--preset--font-family--literata);
	font-style: italic;
	font-weight: 500;
	letter-spacing: -0.01em;
	margin-right: 0.05em;
}

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

.sp-entete-v2 {
	background-color: var(--wp--preset--color--base);
	border-bottom: 1px solid var(--wp--preset--color--accent-6);
}

.sp-bouton-entete .wp-block-button__link {
	font-size: var(--wp--preset--font-size--small);
	padding: 0.6rem 1.1rem;
}

.sp-bouton-entete .wp-block-button__link:hover {
	background-color: var(--wp--preset--color--accent-1) !important;
}

@media (max-width: 599px) {
	.sp-bouton-entete .wp-block-button__link {
		padding: 0.5rem 0.8rem;
	}
}

/* ---------- Index numéroté (introduction, « Ma façon de travailler ») ---------- */

.sp-index {
	border-top: 2px solid var(--wp--preset--color--contrast);
	counter-reset: sp-index;
	list-style: none;
	margin: 0;
	padding: 0;
}

.sp-index > li {
	align-items: baseline;
	border-bottom: 1px solid var(--wp--preset--color--accent-6);
	counter-increment: sp-index;
	display: flex;
	gap: 1rem;
	margin: 0;
	padding: 0.95rem 0;
}

.sp-index > li::before {
	color: var(--wp--preset--color--accent-1);
	content: counter(sp-index, decimal-leading-zero);
	content: counter(sp-index, decimal-leading-zero) / "";
	flex: 0 0 2.2ch;
	font-family: var(--wp--preset--font-family--literata);
	font-style: italic;
}

.sp-intro .sp-index > li {
	font-size: var(--wp--preset--font-size--large);
	font-weight: 700;
	letter-spacing: -0.01em;
}

.sp-index a {
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}

.sp-index a:hover {
	color: var(--wp--preset--color--accent-1);
	text-decoration: underline;
}

/* ---------- Réalisations ---------- */

.sp-couverture img {
	border-radius: 14px;
	box-shadow: 0 24px 48px -28px rgb(19 41 75 / 0.45);
}

.sp-projet-principal {
	margin-bottom: var(--wp--preset--spacing--40);
}

.sp-lien-fort {
	font-weight: 700;
}

.sp-lien-fort a {
	text-decoration-thickness: 2px;
	text-underline-offset: 0.25em;
}

.sp-lien-fort a::after {
	content: " →";
	content: " →" / "";
}

/* ---------- Services ---------- */

.sp-offre {
	border-top: 2px solid var(--wp--preset--color--contrast);
	padding-top: var(--wp--preset--spacing--30);
}

.sp-numero {
	color: var(--wp--preset--color--accent-1);
	font-family: var(--wp--preset--font-family--literata);
	font-size: var(--wp--preset--font-size--x-large);
	font-style: italic;
	line-height: 1;
	margin-bottom: var(--wp--preset--spacing--30);
}

.sp-mots-cles {
	color: var(--wp--preset--color--accent-4);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
}

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

.sp-pied {
	border-top: 1px solid var(--wp--preset--color--accent-6);
}

.sp-pied .wp-block-navigation {
	font-size: var(--wp--preset--font-size--small);
}

/* =====================================================================
 * Nouvelle charte Studio Peyral (modèle « Studio Peyral – nouvelle charte »)
 * Classes propres à cette charte : aucune n'est utilisée par la V1 ou la V2.
 * Version 0.5.0 : hiérarchie de rayons, profondeur, animations légères.
 * ===================================================================== */

:root {
	--sp-r-xs: 8px;    /* étiquettes, petits boutons */
	--sp-r-s: 12px;    /* boutons, icônes */
	--sp-r-m: 18px;    /* panneaux secondaires, images */
	--sp-r-l: 24px;    /* cartes */
	--sp-r-xl: 34px;   /* grands panneaux */
	--sp-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
	--sp-ombre-douce: 0 1px 2px rgb(16 28 44 / 0.04), 0 14px 34px -22px rgb(16 28 44 / 0.28);
	--sp-ombre-haute: 0 2px 6px rgb(16 28 44 / 0.05), 0 30px 60px -30px rgb(16 28 44 / 0.42);
}

/* ---------- En-tête collant (d'après la maquette de référence) ---------- */

:root {
	--sp-h-entete: 64px;
}

@media (max-width: 781px) {
	:root {
		--sp-h-entete: 56px;
	}
}

.sp-sticky {
	position: sticky;
	top: 0;
	z-index: 50;
}

.admin-bar .sp-sticky {
	top: var(--wp-admin--admin-bar--height, 32px);
}

@media (max-width: 600px) {
	.admin-bar .sp-sticky {
		top: 0;
	}
}

/* Ancres : la section commence juste sous l'en-tête (64 px, 56 px sur mobile).
 * La marge héritée de la V1 ([id] { scroll-margin-top }) est neutralisée ici :
 * elle s'ajoutait au décalage et laissait voir la section précédente. */
html:has(.sp-sticky) {
	scroll-padding-top: var(--sp-h-entete);
}

.sp-principal [id] {
	scroll-margin-top: 0;
}

/* Fond bleu nuit derrière l'en-tête (haut de page, rebond du défilement). */
body:has(.sp-sticky) {
	background-color: var(--wp--preset--color--encre);
}

.wp-site-blocks > .sp-pied-part {
	margin-block-start: 0;
}

/* Même bleu nuit que l'introduction, légèrement translucide et flouté. */
.sp-entete-studio.has-encre-background-color {
	backdrop-filter: blur(14px) saturate(140%);
	background-color: rgb(16 28 44 / var(--sp-opacite-entete, 0.96)) !important;
	border-bottom: 1px solid transparent;
	padding-block: 0;
	transition: background-color 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
}

/* Hauteur totale = --sp-h-entete (1 px réservé au filet du bas). */
.sp-entete-studio .sp-barre {
	min-height: calc(var(--sp-h-entete) - 1px);
}

/* Au défilement : filet discret (couleur de la maquette) et ombre légère. */
.sp-defile .sp-entete-studio {
	--sp-opacite-entete: 0.96;
	border-bottom-color: rgb(58 75 93 / 0.8);
	box-shadow: 0 12px 30px -22px rgb(0 0 0 / 0.75);
}

/* Page qui commence par l'introduction : l'en-tête se pose sur le hero,
 * qui remonte sous lui. Fond, trame et halo sont ainsi continus. */
@supports selector(:has(a)) {
	body:has(.sp-principal > .wp-block-post-content > .sp-hero:first-child) {
		--sp-opacite-entete: 0.72;
	}

	/* Avec JavaScript (défilement détecté), l'en-tête est transparent en haut de
	 * page : il se fond entièrement dans l'introduction. */
	.sp-js body:has(.sp-principal > .wp-block-post-content > .sp-hero:first-child) {
		--sp-opacite-entete: 0;
	}

	.sp-js:not(.sp-defile) body:has(.sp-principal > .wp-block-post-content > .sp-hero:first-child) .sp-entete-studio {
		backdrop-filter: none;
	}

	body:has(.sp-principal > .wp-block-post-content > .sp-hero:first-child) .sp-principal {
		margin-top: calc(-1 * var(--sp-h-entete)) !important;
	}

	.sp-principal > .wp-block-post-content > .sp-hero:first-child {
		padding-top: calc(var(--sp-h-entete) + var(--wp--preset--spacing--70)) !important;
	}
}

.sp-marque {
	font-size: 1.125rem;
	font-weight: 800;
	letter-spacing: 0.18em;
	line-height: 1;
	margin: 0;
	text-transform: uppercase;
	white-space: nowrap;
}

.sp-marque a {
	color: inherit;
	text-decoration: none;
	transition: color 0.25s ease;
}

.sp-marque a:hover {
	color: var(--wp--preset--color--menthe);
}

.sp-entete-studio .wp-block-navigation {
	font-size: 0.8125rem;
	font-weight: 500;
}

.sp-entete-studio .wp-block-navigation .wp-block-navigation__container {
	gap: 2.2rem;
}

.sp-entete-studio .wp-block-navigation a,
.sp-pied-studio .wp-block-navigation a {
	color: inherit;
	text-decoration: none;
}

.sp-entete-studio .wp-block-navigation-item__label,
.sp-pied-studio .wp-block-navigation-item__label {
	background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
	padding-bottom: 3px;
	transition: background-size 0.35s var(--sp-ease), color 0.25s ease;
}

.sp-entete-studio .wp-block-navigation a:hover,
.sp-pied-studio .wp-block-navigation a:hover {
	color: var(--wp--preset--color--menthe);
}

.sp-entete-studio .wp-block-navigation a:hover .wp-block-navigation-item__label,
.sp-pied-studio .wp-block-navigation a:hover .wp-block-navigation-item__label {
	background-size: 100% 1px;
}

.sp-sombre :where(a, button, summary):focus-visible,
.sp-entete-studio :where(a, button):focus-visible,
.sp-pied-studio :where(a, button):focus-visible {
	outline-color: var(--wp--preset--color--menthe);
}

/* ---------- Boutons et liens fléchés ---------- */

/* Boutons (classe historique « sp-bouton-fleche ») : plus de flèche automatique.
 * Le survol repose sur un léger soulèvement, une ombre et un fond éclairci. */
.sp-bouton-fleche .wp-block-button__link {
	align-items: center;
	border-radius: var(--sp-r-s);
	display: inline-flex;
	font-size: 0.875rem;
	font-weight: 700;
	justify-content: center;
	padding: 1.05rem 1.5rem;
	transition: transform 0.3s var(--sp-ease), box-shadow 0.3s ease, background-color 0.3s ease, border-color 0.3s ease;
}

.sp-bouton-fleche .wp-block-button__link:hover {
	transform: translateY(-2px);
}

.sp-bouton-fleche .wp-block-button__link.has-menthe-background-color:hover {
	background-color: #d4fbf0 !important;
	box-shadow: 0 14px 28px -14px rgb(186 248 230 / 0.7);
}

/* Liens textuels : « → » pour un lien interne, « ↗ » pour un autre site. */
.sp-lien-fleche a::after {
	content: "\2192";
	content: "\2192" / "";
	display: inline-block;
	font-size: 1.1em;
	font-weight: 400;
	line-height: 1;
	transition: transform 0.3s var(--sp-ease);
}

.sp-lien-fleche a[target="_blank"]::after {
	content: "\2197";
	content: "\2197" / "";
	font-size: 1.2em;
}

.sp-lien-fleche a:hover::after {
	transform: translateX(3px);
}

.sp-lien-fleche a[target="_blank"]:hover::after {
	transform: translate(3px, -3px);
}

.sp-bouton-fleche .wp-block-button__link:active {
	transform: translateY(0) scale(0.98);
}

.sp-sombre .is-style-outline .wp-block-button__link {
	background-color: transparent;
	border: 1px solid rgb(255 255 255 / 0.28);
	color: var(--wp--preset--color--blanc-casse);
}

.sp-sombre .is-style-outline .wp-block-button__link:hover {
	background-color: rgb(255 255 255 / 0.06);
	border-color: var(--wp--preset--color--menthe);
	color: var(--wp--preset--color--blanc-casse);
}

.sp-bouton-entete-studio .wp-block-button__link {
	border-radius: 4px;
	font-size: 0.8125rem;
	min-height: 42px;
	padding: 0 1.15rem;
}

.sp-lien-fleche {
	font-size: 0.875rem;
	font-weight: 700;
}

.sp-lien-fleche a {
	align-items: center;
	background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat;
	color: inherit;
	display: inline-flex;
	gap: 1.1rem;
	padding-bottom: 0.45rem;
	text-decoration: none;
	transition: color 0.25s ease, background-size 0.4s var(--sp-ease);
}

.sp-lien-fleche a:hover {
	background-size: 35% 1px;
	color: var(--wp--preset--color--sarcelle);
}

.sp-sombre .sp-lien-fleche a:hover {
	color: var(--wp--preset--color--blanc-casse);
}

.sp-lien-retour a {
	color: var(--wp--preset--color--gris-clair);
	text-decoration: none;
}

.sp-lien-retour a::before {
	content: "\2190  ";
	content: "\2190  " / "";
}

.sp-lien-retour a:hover {
	color: var(--wp--preset--color--menthe);
	text-decoration: underline;
}

/* ---------- Titres ---------- */

.sp-titre {
	font-weight: 800;
	letter-spacing: -0.045em;
	line-height: 1.02;
	text-wrap: balance;
}

.sp-titre em {
	color: var(--wp--preset--color--sarcelle);
	font-family: var(--wp--preset--font-family--literata);
	font-style: italic;
	font-weight: 400;
	letter-spacing: -0.03em;
}

.sp-sombre .sp-titre em {
	color: var(--wp--preset--color--menthe);
}

.sp-tete-section .wp-block-column:last-child p {
	max-width: 21rem;
}

@media (min-width: 782px) {
	.sp-decale {
		padding-top: 3.25rem;
	}
}

/* ---------- Introduction ---------- */

.sp-hero {
	isolation: isolate;
	overflow: hidden;
	position: relative;
}

.sp-hero::before {
	background-image:
		linear-gradient(rgb(255 255 255 / 0.04) 1px, transparent 1px),
		linear-gradient(90deg, rgb(255 255 255 / 0.04) 1px, transparent 1px);
	background-size: 72px 72px;
	content: "";
	inset: 0;
	-webkit-mask-image: radial-gradient(ellipse 70% 75% at 72% 45%, #000 15%, transparent 72%);
	mask-image: radial-gradient(ellipse 70% 75% at 72% 45%, #000 15%, transparent 72%);
	pointer-events: none;
	position: absolute;
	z-index: -1;
}

.sp-hero::after {
	background: radial-gradient(circle, rgb(186 248 230 / 0.13), transparent 62%);
	content: "";
	height: 980px;
	pointer-events: none;
	position: absolute;
	right: -300px;
	top: -260px;
	width: 980px;
	z-index: -1;
}

.sp-hero:has(.sp-hero-art) {
	align-content: center;
	display: grid;
	min-height: min(62rem, 100svh);
}

.sp-hero:has(.sp-hero-art) > * {
	width: 100%;
}

.sp-hero-titre {
	letter-spacing: -0.052em;
	line-height: 0.98;
}

.sp-chapo {
	line-height: 1.5;
	max-width: 36rem;
}

.sp-reperes {
	align-items: center;
	border-top: 1px solid rgb(255 255 255 / 0.12);
	color: #a8b6c2;
	display: flex;
	flex-wrap: wrap;
	font-size: 0.75rem;
	font-weight: 700;
	gap: 0.6rem 1.1rem;
	letter-spacing: 0.14em;
	list-style: none;
	margin-top: var(--wp--preset--spacing--60);
	padding: 1.2rem 0 0;
	text-transform: uppercase;
}

.sp-reperes li {
	margin: 0;
}

.sp-reperes li::before {
	background: var(--wp--preset--color--menthe);
	border-radius: 50%;
	content: "";
	display: inline-block;
	height: 4px;
	margin-right: 1.1rem;
	vertical-align: 0.2em;
	width: 4px;
}

/* Composition de panneaux */

.sp-hero-art {
	height: 540px;
	isolation: isolate;
	position: relative;
	transform: translate3d(calc(var(--sp-px, 0) * -6px), calc(var(--sp-py, 0) * -5px), 0);
	transition: transform 0.9s var(--sp-ease);
}

.sp-hero-art::before,
.sp-hero-art::after {
	border: 1px solid rgb(120 150 170 / 0.32);
	border-radius: 50%;
	content: "";
	inset: 36px 10px 30px 24px;
	pointer-events: none;
	position: absolute;
	rotate: -18deg;
	z-index: -1;
}

.sp-hero-art::after {
	border: 1px dashed rgb(120 150 170 / 0.36);
	inset: 96px 70px 90px 84px;
}

.sp-hero-art > .sp-art {
	backdrop-filter: blur(6px);
	background: linear-gradient(160deg, rgb(40 62 84 / 0.94), rgb(26 44 67 / 0.94));
	border: 1px solid rgb(155 185 188 / 0.2);
	border-radius: 16px;
	box-shadow: 0 30px 60px -30px rgb(3 8 15 / 0.85), inset 0 1px 0 rgb(255 255 255 / 0.07);
	margin: 0;
	padding: 1.1rem 1.2rem 1.2rem;
	position: absolute;
	rotate: var(--sp-rot, 0deg);
	transform: translate3d(calc(var(--sp-px, 0) * var(--sp-prof, 10px)), calc(var(--sp-py, 0) * var(--sp-prof, 10px)), 0);
	transition: transform 0.9s var(--sp-ease);
}

.sp-art > * {
	margin: 0;
}

.sp-art > * + * {
	margin-top: 0.7rem;
}

.sp-art-label {
	color: #9bb9bc;
	font-size: 0.65rem;
	font-weight: 700;
	letter-spacing: 0.15em;
	text-transform: uppercase;
}

.sp-art-texte {
	font-size: 1.1rem;
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.15;
	text-wrap: balance;
}

.sp-hero-art > .sp-art-principal {
	--sp-rot: -3deg;
	--sp-prof: 14px;
	background: linear-gradient(155deg, #f4fcf7 0%, #dcefe6 100%);
	border: 1px solid rgb(255 255 255 / 0.7);
	border-radius: var(--sp-r-l);
	box-shadow: 0 50px 90px -40px rgb(0 0 0 / 0.75), 0 0 0 10px rgb(186 248 230 / 0.05);
	color: var(--wp--preset--color--encre);
	left: 19%;
	min-height: 292px;
	padding: 1.8rem;
	top: 124px;
	width: 62%;
	z-index: 1;
}

.sp-art-principal .sp-art-label {
	color: var(--wp--preset--color--sarcelle);
}

.sp-art-titre {
	font-size: 2.05rem;
	font-weight: 800;
	letter-spacing: -0.045em;
	line-height: 1.02;
}

.sp-art-principal::after {
	background:
		linear-gradient(90deg, #a7e6d4 0 30%, transparent 30% 35%, #cfd6e6 35% 65%, transparent 65% 70%, #b2cbd1 70%) 0 100% / 100% 42px no-repeat,
		linear-gradient(90deg, var(--wp--preset--color--sarcelle) 0 38%, rgb(30 119 120 / 0.18) 38%) 0 0 / 100% 2px no-repeat;
	border-radius: 0 0 8px 8px;
	content: "";
	display: block;
	height: 64px;
	margin-top: 1.4rem;
}

.sp-hero-art > .sp-art-1 {
	--sp-rot: 4deg;
	--sp-prof: 22px;
	--sp-d: 0.1s;
	right: 0;
	top: 2px;
	width: 212px;
	z-index: 2;
}

.sp-hero-art > .sp-art-2 {
	--sp-rot: 3deg;
	--sp-prof: 20px;
	--sp-d: 0.2s;
	bottom: 96px;
	left: 0;
	width: 204px;
	z-index: 2;
}

.sp-hero-art > .sp-art-3 {
	--sp-rot: -4deg;
	--sp-prof: 16px;
	--sp-d: 0.3s;
	bottom: 58px;
	right: 0;
	width: 206px;
	z-index: 2;
}

.sp-hero-art > .sp-art-4 {
	--sp-rot: -5deg;
	--sp-prof: 18px;
	--sp-d: 0.15s;
	left: 0;
	top: 26px;
	width: 214px;
	z-index: 2;
}

/* Points de connexion, côté du panneau central. */
.sp-hero-art > .sp-art-1::after,
.sp-hero-art > .sp-art-2::after,
.sp-hero-art > .sp-art-3::after,
.sp-hero-art > .sp-art-4::after {
	background: var(--wp--preset--color--menthe);
	border-radius: 50%;
	box-shadow: 0 0 0 4px rgb(186 248 230 / 0.14), 0 0 16px rgb(186 248 230 / 0.55);
	content: "";
	height: 8px;
	position: absolute;
	width: 8px;
}

.sp-hero-art > .sp-art-1::after {
	bottom: 18px;
	left: -4px;
}

.sp-hero-art > .sp-art-2::after {
	right: -4px;
	top: 20px;
}

.sp-hero-art > .sp-art-3::after {
	left: -4px;
	top: 20px;
}

.sp-hero-art > .sp-art-4::after {
	bottom: 18px;
	right: -4px;
}

.sp-hero-art > .sp-art-pastille {
	--sp-prof: 8px;
	--sp-d: 0.4s;
	background: var(--wp--preset--color--menthe);
	border-radius: 100px;
	bottom: 8px;
	box-shadow: 0 16px 30px -16px rgb(186 248 230 / 0.6);
	color: var(--wp--preset--color--encre);
	font-size: 0.7rem;
	font-weight: 800;
	left: 24%;
	letter-spacing: 0.1em;
	margin: 0;
	padding: 0.75rem 1.05rem;
	position: absolute;
	text-transform: uppercase;
	transform: translate3d(calc(var(--sp-px, 0) * var(--sp-prof)), calc(var(--sp-py, 0) * var(--sp-prof)), 0);
	transition: transform 0.9s var(--sp-ease);
	z-index: 3;
}

.sp-bandeau-zone {
	border-top: 1px solid rgb(255 255 255 / 0.07);
}

.sp-bandeau {
	display: flex;
	flex-wrap: wrap;
	font-size: 0.75rem;
	font-weight: 700;
	gap: 0.75rem 1.75rem;
	justify-content: space-between;
	letter-spacing: 0.14em;
	list-style: none;
	margin: 0;
	padding: 0;
	text-transform: uppercase;
}

.sp-bandeau li {
	margin: 0;
}

.sp-bandeau li::before {
	color: var(--wp--preset--color--menthe);
	content: "\2733";
	content: "\2733" / "";
	padding-right: 1rem;
}

/* ---------- Studio Peyral ---------- */

.sp-section-studio .wp-block-column:last-child > .has-large-font-size {
	font-size: clamp(1.25rem, 1.05rem + 0.7vw, 1.6rem) !important;
	letter-spacing: -0.02em;
	line-height: 1.4;
}

/* ---------- Expertises ---------- */

.sp-section-expertises .sp-grille-expertises {
	counter-reset: sp-expertise;
	gap: 1rem;
	grid-template-columns: 1fr;
}

@media (min-width: 900px) {
	.sp-section-expertises .sp-grille-expertises {
		grid-template-columns: repeat(12, minmax(0, 1fr));
	}

	.sp-carte-1,
	.sp-carte-4 {
		grid-column: span 7;
	}

	.sp-carte-2,
	.sp-carte-3 {
		grid-column: span 5;
	}
}

.sp-carte-expertise {
	border: 1px solid rgb(16 28 44 / 0.07);
	border-radius: var(--sp-r-l);
	box-shadow: var(--sp-ombre-douce);
	counter-increment: sp-expertise;
	display: flex;
	flex-direction: column;
	isolation: isolate;
	min-height: 25rem;
	overflow: hidden;
	padding: clamp(1.6rem, 3vw, 2.5rem);
	position: relative;
	transition: transform 0.45s var(--sp-ease), box-shadow 0.45s ease, border-color 0.45s ease;
}

.sp-carte-expertise > * {
	margin-block: 0;
	position: relative;
	z-index: 1;
}

/* Grand numéro en filigrane. */
.sp-carte-expertise::before {
	bottom: -0.25em;
	color: currentColor;
	content: counter(sp-expertise, decimal-leading-zero);
	font-family: var(--wp--preset--font-family--literata);
	font-size: clamp(6rem, 10vw, 9rem);
	font-style: italic;
	line-height: 1;
	opacity: 0.05;
	pointer-events: none;
	position: absolute;
	right: 0.15em;
	transition: opacity 0.45s ease, transform 0.6s var(--sp-ease);
}

/* Pictogramme décoratif propre à chaque famille. */
.sp-carte-expertise::after {
	background: center / contain no-repeat;
	content: "";
	height: 46px;
	pointer-events: none;
	position: absolute;
	right: clamp(1.4rem, 2.6vw, 2.2rem);
	top: clamp(1.4rem, 2.6vw, 2.2rem);
	transition: transform 0.5s var(--sp-ease);
	width: 46px;
}

.sp-carte-1 {
	background-image: radial-gradient(110% 80% at 100% 0%, rgb(186 248 230 / 0.32), transparent 55%);
}

.sp-carte-1::after {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%231A6B6C' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='8' width='38' height='29' rx='6'/%3E%3Cpath d='M5 15h38M17 42h14'/%3E%3Cpath d='M16 21h3l2.2 8h9.3l2-6H20'/%3E%3Ccircle cx='22.5' cy='32' r='.9'/%3E%3Ccircle cx='29.5' cy='32' r='.9'/%3E%3C/svg%3E");
}

.sp-carte-2 {
	background-image: linear-gradient(160deg, rgb(255 255 255 / 0.5), transparent 45%);
}

.sp-carte-2::after {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%231A6B6C' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='13' r='4.5'/%3E%3Ccircle cx='37' cy='13' r='4.5'/%3E%3Ccircle cx='24' cy='36' r='4.5'/%3E%3Cpath d='M15.5 13h17M13.3 17l8.4 15M34.7 17l-8.4 15'/%3E%3C/svg%3E");
}

.sp-carte-3 {
	background-image: radial-gradient(90% 70% at 0% 100%, rgb(255 255 255 / 0.55), transparent 60%);
}

.sp-carte-3::after {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%231A6B6C' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='24' cy='24' r='3.2'/%3E%3Cpath d='M16.5 16.5a10.6 10.6 0 0 0 0 15M31.5 16.5a10.6 10.6 0 0 1 0 15M11 11a18.4 18.4 0 0 0 0 26M37 11a18.4 18.4 0 0 1 0 26'/%3E%3C/svg%3E");
}

.sp-carte-4 {
	background-image: radial-gradient(90% 90% at 100% 0%, rgb(186 248 230 / 0.12), transparent 60%);
	border-color: rgb(255 255 255 / 0.06);
}

.sp-carte-4::after {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%23BAF8E6' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M35 17a12.5 12.5 0 0 0-21-2.5M13 31a12.5 12.5 0 0 0 21 2.5'/%3E%3Cpath d='M13.5 9.5v5.5H19M34.5 38.5V33H29'/%3E%3Cpath d='M24 19.5l1.4 3.1 3.1 1.4-3.1 1.4L24 28.5l-1.4-3.1-3.1-1.4 3.1-1.4z'/%3E%3C/svg%3E");
}

.sp-carte-expertise .sp-titre {
	margin-bottom: 0.9rem;
	margin-top: 2.6rem;
	max-width: 26rem;
	padding-right: 3rem;
}

.sp-carte-expertise .sp-titre + p {
	margin-bottom: 2rem;
	max-width: 27rem;
}

.sp-carte-num {
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
}

.sp-carte-num::after {
	background: currentColor;
	content: "";
	display: block;
	height: 2px;
	margin-top: 0.75rem;
	transform-origin: left center;
	transition: transform 0.5s var(--sp-ease);
	width: 28px;
}

.sp-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 0.45rem;
	list-style: none;
	padding: 0;
}

.sp-carte-expertise .sp-tags {
	margin-top: auto;
}

.sp-tags li {
	background: rgb(255 255 255 / 0.5);
	border: 1px solid rgb(16 28 44 / 0.12);
	border-radius: var(--sp-r-xs);
	font-size: 0.75rem;
	margin: 0;
	padding: 0.42rem 0.7rem;
	transition: border-color 0.3s ease, background-color 0.3s ease;
	white-space: nowrap;
}

.sp-sombre .sp-tags li {
	background: rgb(255 255 255 / 0.04);
	border-color: rgb(255 255 255 / 0.16);
}

@media (hover: hover) and (pointer: fine) {
	.sp-carte-expertise:hover {
		border-color: rgb(30 119 120 / 0.3);
		box-shadow: var(--sp-ombre-haute);
		transform: translateY(-6px);
	}

	.sp-carte-4:hover {
		border-color: rgb(186 248 230 / 0.28);
	}

	.sp-carte-expertise:hover::before {
		opacity: 0.09;
		transform: translateY(-6px);
	}

	.sp-carte-expertise:hover::after {
		transform: translateY(-3px);
	}

	.sp-carte-expertise:hover .sp-carte-num::after {
		transform: scaleX(2.4);
	}

	.sp-carte-expertise:hover .sp-tags li {
		border-color: rgb(30 119 120 / 0.35);
	}

	.sp-carte-4:hover .sp-tags li {
		border-color: rgb(186 248 230 / 0.35);
	}
}

.sp-note {
	margin: 0;
}

/* ---------- Réalisations : projet phare ---------- */

.sp-projet-vedette {
	--sp-pad: clamp(1.5rem, 4vw, 3.5rem);
	background-image: radial-gradient(70% 90% at 0% 100%, rgb(186 248 230 / 0.1), transparent 60%);
	border-radius: var(--sp-r-xl);
	box-shadow: 0 50px 90px -60px rgb(16 28 44 / 0.7);
	position: relative;
}

.wp-block-columns.sp-projet-vedette.has-background {
	padding: var(--sp-pad);
}

.sp-capture-projet {
	border-radius: var(--sp-r-m);
	margin: 0;
	overflow: hidden;
}

.sp-capture-projet img {
	border-radius: var(--sp-r-m);
	display: block;
	transition: transform 0.8s var(--sp-ease);
	width: 100%;
}

.sp-projet-vedette .sp-capture-projet {
	border: 1px solid rgb(255 255 255 / 0.08);
	box-shadow: 0 40px 70px -40px rgb(0 0 0 / 0.9);
}

@media (min-width: 1100px) {
	/* La capture déborde légèrement du panneau, sur la gauche. */
	.sp-projet-vedette .sp-capture-projet {
		margin-left: calc(-1 * (var(--sp-pad) + 2rem));
	}
}

.sp-projet-texte > * {
	margin-block: 0;
}

.sp-projet-texte > * + * {
	margin-top: 1rem;
}

.sp-projet-texte .sp-titre {
	margin-top: 0.9rem;
}

.sp-points {
	counter-reset: sp-points;
	display: grid;
	gap: 0.9rem 1.4rem;
	grid-template-columns: 1fr 1fr;
	list-style: none;
	margin: 1.5rem 0 1.75rem !important;
	padding: 0;
}

.sp-points li {
	border-top: 1px solid rgb(255 255 255 / 0.16);
	counter-increment: sp-points;
	font-size: 0.875rem;
	line-height: 1.35;
	margin: 0;
	padding-top: 0.8rem;
}

.sp-points li::before {
	color: var(--wp--preset--color--menthe);
	content: counter(sp-points, decimal-leading-zero);
	content: counter(sp-points, decimal-leading-zero) / "";
	font-size: 0.7rem;
	font-weight: 700;
	margin-right: 0.5rem;
}

@media (hover: hover) and (pointer: fine) {
	.sp-projet-vedette:hover .sp-capture-projet img {
		transform: scale(1.025);
	}
}

/* ---------- Autres réalisations ---------- */

.sp-filet-titre {
	gap: 1.25rem;
}

.sp-filet-titre > * {
	flex: none;
	margin: 0;
}

.sp-filet-titre::after {
	background: var(--wp--preset--color--filet);
	content: "";
	flex: 1;
	height: 1px;
}

.sp-projet-secondaire > * {
	margin-block: 0;
}

.sp-projet-secondaire .sp-capture-projet {
	box-shadow: var(--sp-ombre-douce);
	transition: transform 0.5s var(--sp-ease), box-shadow 0.5s ease;
}

.sp-projet-legende {
	display: grid;
	gap: 0.35rem 1.25rem;
	grid-template-columns: auto 1fr;
	margin-top: 1.6rem !important;
}

.sp-projet-legende > * {
	grid-column: 2;
	margin: 0;
}

.sp-projet-legende > .sp-projet-num {
	font-family: var(--wp--preset--font-family--literata);
	font-size: 1.35rem;
	font-style: italic;
	grid-column: 1;
	grid-row: 1 / span 2;
	line-height: 1.2;
	padding-top: 0.2rem;
}

@media (min-width: 782px) {
	.sp-autres-projets > .sp-decale-bas {
		margin-top: clamp(3rem, 8vw, 7rem);
	}
}

@media (hover: hover) and (pointer: fine) {
	.sp-projet-secondaire:hover .sp-capture-projet {
		box-shadow: var(--sp-ombre-haute);
		transform: translateY(-6px);
	}
}

/* ---------- Méthode ---------- */

.sp-etape {
	padding-top: 1.5rem;
	position: relative;
}

.sp-etape::before {
	background: #7f9796;
	content: "";
	height: 1px;
	left: 0;
	position: absolute;
	right: -1.25rem;
	top: 0;
	transform-origin: left center;
}

.sp-etape:last-child::before {
	right: 0;
}

.sp-etape::after {
	background: var(--wp--preset--color--sarcelle);
	border-radius: 50%;
	box-shadow: 0 0 0 5px rgb(30 119 120 / 0.14);
	content: "";
	height: 9px;
	left: 0;
	position: absolute;
	top: -4px;
	width: 9px;
}

@media (min-width: 782px) {
	.sp-etape {
		min-height: 14rem;
	}
}

.sp-etape > * {
	margin-block: 0;
}

.sp-etape .sp-numero {
	color: var(--wp--preset--color--sarcelle);
	font-size: 2.6rem;
}

.sp-etape h3 {
	font-size: 1.45rem;
	letter-spacing: -0.03em;
	margin-bottom: 0.75rem;
	margin-top: 2rem;
}

.sp-etape p:last-child {
	font-size: 1rem;
	line-height: 1.55;
}

.sp-conviction {
	background: rgb(255 255 255 / 0.55);
	border-radius: var(--sp-r-l);
	box-shadow: inset 4px 0 0 var(--wp--preset--color--sarcelle);
	font-family: var(--wp--preset--font-family--literata);
	font-size: clamp(1.35rem, 2.3vw, 1.9rem);
	font-style: italic;
	letter-spacing: -0.02em;
	line-height: 1.3;
	margin: 0;
	max-width: 48rem;
	padding: clamp(1.3rem, 3vw, 2rem) clamp(1.5rem, 3.5vw, 2.6rem);
}

/* ---------- À propos ---------- */

@media (min-width: 782px) {
	.sp-section-apropos .wp-block-columns > .wp-block-column:first-child {
		align-self: flex-start;
		position: sticky;
		top: 7rem;
	}
}

.sp-declaration {
	font-size: clamp(1.25rem, 1.8vw, 1.6rem);
	letter-spacing: -0.02em;
	line-height: 1.4;
	text-wrap: balance;
}

.sp-parcours {
	border-top: 1px solid var(--wp--preset--color--filet);
}

.sp-parcours > .sp-parcours-ligne {
	border-bottom: 1px solid var(--wp--preset--color--filet);
	display: grid;
	font-size: 0.9375rem;
	gap: 0.75rem;
	grid-template-columns: 9rem 1fr;
	margin: 0;
	padding: 1.15rem 0;
}

.sp-parcours-ligne > * {
	margin: 0;
}

.sp-parcours-ligne > :last-child {
	font-weight: 700;
}

.sp-parcours-cle {
	font-weight: 800;
}

.sp-parcours-cle::before {
	background: currentColor;
	border-radius: 50%;
	content: "";
	display: inline-block;
	height: 6px;
	margin-right: 0.6rem;
	vertical-align: 0.15em;
	width: 6px;
}

/* ---------- Technologies (fond sombre) ---------- */

.sp-section-outils {
	isolation: isolate;
	overflow: hidden;
	position: relative;
}

.sp-section-outils::before {
	background: radial-gradient(circle, rgb(186 248 230 / 0.09), transparent 60%);
	content: "";
	height: 760px;
	left: -260px;
	pointer-events: none;
	position: absolute;
	top: -300px;
	width: 760px;
	z-index: -1;
}

.sp-competence {
	background: rgb(255 255 255 / 0.035);
	border: 1px solid rgb(255 255 255 / 0.08);
	border-radius: var(--sp-r-m);
	padding: 1.5rem 1.6rem 1.7rem;
	transition: border-color 0.4s ease, background-color 0.4s ease;
}

.sp-competence > * {
	margin-block: 0;
}

.sp-competence h3 {
	margin-bottom: 0.8rem;
}

.sp-competence h3::before {
	background: var(--wp--preset--color--menthe);
	border-radius: 3px;
	content: "";
	display: inline-block;
	height: 8px;
	margin-right: 0.7rem;
	vertical-align: 0.12em;
	width: 8px;
}

.sp-competence p {
	line-height: 1.8;
}

@media (hover: hover) and (pointer: fine) {
	.sp-competence:hover {
		background: rgb(255 255 255 / 0.06);
		border-color: rgb(186 248 230 / 0.25);
	}
}

/* ---------- Questions fréquentes ---------- */

.sp-faq > .sp-faq-item {
	border-top: 1px solid var(--wp--preset--color--filet);
	margin: 0;
}

.sp-faq > .sp-faq-item:last-child {
	border-bottom: 1px solid var(--wp--preset--color--filet);
}

.sp-faq-item summary {
	align-items: center;
	cursor: pointer;
	display: flex;
	position: relative;
	font-size: clamp(1.05rem, 1rem + 0.35vw, 1.25rem);
	font-weight: 700;
	gap: 1.5rem;
	justify-content: space-between;
	letter-spacing: -0.02em;
	list-style: none;
	padding: 1.35rem 0;
	transition: color 0.25s ease;
}

.sp-faq-item summary::-webkit-details-marker {
	display: none;
}

/* Signe « + / − » dessiné par deux traits (dégradés d'arrière-plan) : à
 * l'ouverture, le trait vertical se rétracte ; le contenant ne bouge pas. */
.sp-faq-item summary::after {
	background-color: transparent;
	background-image: linear-gradient(currentColor, currentColor);
	background-position: center;
	background-repeat: no-repeat;
	background-size: 12px 2px;
	border: 1px solid rgb(16 28 44 / 0.16);
	border-radius: var(--sp-r-s);
	box-sizing: border-box;
	color: var(--wp--preset--color--sarcelle);
	content: "";
	display: block;
	flex: none;
	height: 2.25rem;
	transition: background-color 0.26s ease, border-color 0.26s ease, color 0.26s ease;
	width: 2.25rem;
}

/* Trait vertical du « + », posé au centre du carré : à l'ouverture, il pivote
 * d'un quart de tour pour se confondre avec le trait horizontal (« − »). */
.sp-faq-item summary::before {
	background: var(--wp--preset--color--sarcelle);
	border-radius: 1px;
	content: "";
	height: 12px;
	margin-top: -6px;
	pointer-events: none;
	position: absolute;
	right: calc(0.6rem + 1.125rem - 1px);
	top: 50%;
	transition: rotate 0.28s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.26s ease;
	width: 2px;
	z-index: 1;
}

.sp-faq-item[open]:not(.sp-en-fermeture) summary::before {
	background: var(--wp--preset--color--blanc-casse);
	rotate: 90deg;
}

/* Ouvert : « − » clair sur fond sarcelle. Pendant la fermeture animée, la
 * classe « sp-en-fermeture » rend aussitôt l'état fermé à l'icône. */
.sp-faq-item[open]:not(.sp-en-fermeture) summary::after {
	background-color: var(--wp--preset--color--sarcelle);
	border-color: var(--wp--preset--color--sarcelle);
	color: var(--wp--preset--color--blanc-casse);
}

.sp-faq-item summary:hover {
	color: var(--wp--preset--color--sarcelle);
}

.sp-faq-item > :not(summary) {
	margin: -0.3rem 0 0;
	max-width: 40rem;
	padding-bottom: 1.4rem;
}

/* Hauteur mesurée bordures comprises (animation d'ouverture et de fermeture). */
.sp-faq > .sp-faq-item {
	box-sizing: border-box;
}

/* ---------- Contact : grand panneau ---------- */

.sp-panneau-contact {
	background-image:
		radial-gradient(60% 90% at 100% 0%, rgb(186 248 230 / 0.14), transparent 60%),
		radial-gradient(50% 70% at 0% 100%, rgb(30 119 120 / 0.25), transparent 65%);
	border-radius: var(--sp-r-xl);
	box-shadow: 0 50px 90px -60px rgb(16 28 44 / 0.75);
	overflow: hidden;
	position: relative;
}

.wp-block-columns.sp-panneau-contact.has-background {
	padding: clamp(2rem, 6vw, 5rem);
}

.sp-panneau-contact .sp-titre {
	margin-top: 0.8rem;
}

/* ---------- Page projet ---------- */

.sp-fiche > * > * {
	margin: 0;
}

.sp-fiche > * > * + * {
	margin-top: 0.4rem;
}

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

.sp-pied-studio {
	font-size: 0.875rem;
	isolation: isolate;
	overflow: hidden;
	position: relative;
}

/* Détail graphique : orbites de l'introduction, très estompées. */
.sp-pied-studio::before,
.sp-pied-studio::after {
	border: 1px solid rgb(120 150 170 / 0.14);
	border-radius: 50%;
	content: "";
	height: 560px;
	pointer-events: none;
	position: absolute;
	right: -180px;
	rotate: -18deg;
	top: -300px;
	width: 560px;
	z-index: -1;
}

.sp-pied-studio::after {
	border: 1px dashed rgb(186 248 230 / 0.13);
	height: 380px;
	right: -90px;
	top: -210px;
	width: 380px;
}

.sp-pied-haut {
	gap: 3rem;
	padding-bottom: var(--wp--preset--spacing--70);
}

.sp-pied-presentation {
	max-width: 26rem;
}

.sp-pied-presentation > * {
	margin: 0;
}

.sp-pied-studio .sp-marque-pied {
	color: var(--wp--preset--color--blanc-casse);
	font-size: clamp(1.45rem, 1.1rem + 1vw, 1.9rem);
	letter-spacing: 0.16em;
	margin-bottom: 1.1rem;
}

.sp-pied-texte {
	color: #dfe6ec;
	font-size: 1.05rem;
	line-height: 1.55;
}

.sp-pied-presentation > .sp-pied-signature {
	color: #93a7b7;
	font-size: 0.8125rem;
	margin-top: 1.1rem;
}

.sp-pied-colonnes {
	gap: clamp(3rem, 7vw, 6.5rem);
}

.sp-pied-colonne > * {
	margin: 0;
}

.sp-pied-colonne > .sp-pied-titre {
	color: var(--wp--preset--color--menthe);
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.18em;
	margin-bottom: 1rem;
	text-transform: uppercase;
}

.sp-pied-titre::after {
	background: currentColor;
	content: "";
	display: block;
	height: 1px;
	margin-top: 0.7rem;
	opacity: 0.5;
	width: 24px;
}

.sp-pied-studio .wp-block-navigation {
	font-size: 0.9375rem;
	font-weight: 400;
	line-height: 2.1;
}

.sp-pied-studio .wp-block-navigation .wp-block-navigation__container {
	gap: 0;
}

.sp-pied-bas {
	border-top: 1px solid #22374c;
	color: #93a7b7;
	font-size: 0.75rem;
	gap: 1.25rem;
	padding-top: 1.5rem;
}

.sp-pied-bas > * {
	margin: 0;
}

@media (max-width: 781px) {
	.sp-pied-haut {
		display: block;
	}

	.sp-pied-colonnes {
		margin-top: 2.6rem;
	}

	.sp-pied-studio::before {
		right: -300px;
	}

	.sp-pied-studio::after {
		right: -200px;
	}
}

@media (max-width: 530px) {
	.sp-pied-colonnes {
		gap: 2.5rem;
	}

	.sp-pied-bas {
		align-items: flex-start;
		flex-direction: column;
		gap: 0.3rem;
	}
}

/* =====================================================================
 * Animations (uniquement si le visiteur ne demande pas à les réduire)
 * La classe « sp-anim » est posée par un court script d'en-tête : sans
 * JavaScript, aucun contenu n'est masqué.
 * ===================================================================== */

@keyframes sp-entree {
	from {
		opacity: 0;
		transform: translateY(18px);
	}
}

@keyframes sp-entree-titre {
	from {
		opacity: 0.15;
		transform: translateY(22px);
	}
}

@keyframes sp-entree-art {
	from {
		opacity: 0;
		scale: 0.94;
	}
}

@keyframes sp-flotte {
	from {
		translate: 0 0;
	}

	to {
		translate: 0 -6px;
	}
}

@keyframes sp-flotte-inverse {
	from {
		translate: 0 0;
	}

	to {
		translate: 0 5px;
	}
}

@keyframes sp-pulsation {
	from {
		opacity: 1;
	}

	to {
		opacity: 0.45;
	}
}

@keyframes sp-respire {
	from {
		opacity: 0.7;
	}

	to {
		opacity: 1;
	}
}

@keyframes sp-picto {
	from {
		translate: 0 0;
	}

	to {
		translate: 0 -3px;
	}
}

@keyframes sp-derive {
	from {
		translate: 0 0;
	}

	to {
		translate: 4% 5%;
	}
}

@keyframes sp-orbite {
	to {
		rotate: 342deg;
	}
}

@media (prefers-reduced-motion: no-preference) {
	/* Introduction : entrée échelonnée au chargement. */
	.sp-anim .sp-hero-texte > * {
		animation: sp-entree 0.8s var(--sp-ease) both;
	}

	.sp-anim .sp-hero-texte > .sp-hero-titre {
		animation-delay: 0.08s;
		animation-name: sp-entree-titre;
	}

	.sp-anim .sp-hero-texte > .sp-chapo {
		animation-delay: 0.18s;
	}

	.sp-anim .sp-hero-texte > .sp-hero-boutons {
		animation-delay: 0.26s;
	}

	.sp-anim .sp-hero-texte > .sp-reperes {
		animation-delay: 0.34s;
	}

	.sp-anim .sp-hero-art > * {
		animation: sp-entree-art 0.9s var(--sp-ease) calc(0.3s + var(--sp-d, 0s)) both;
	}

	/* Apparition au défilement : opacité et faible translation (propriété
	 * « translate », indépendante des effets de survol). */
	.sp-anim .sp-apparait {
		opacity: 0;
		transition:
			opacity 0.8s var(--sp-ease),
			translate 0.8s var(--sp-ease),
			transform 0.45s var(--sp-ease),
			box-shadow 0.45s ease,
			border-color 0.45s ease;
		transition-delay: calc(var(--sp-rang, 0) * 90ms), calc(var(--sp-rang, 0) * 90ms), 0s, 0s, 0s;
		translate: 0 28px;
	}

	.sp-anim .sp-apparait.est-visible {
		opacity: 1;
		translate: none;
	}

	/* Méthode : le trait de chaque étape se dessine. */
	.sp-anim .sp-etape.sp-apparait::before {
		transform: scaleX(0);
		transition: transform 1.1s var(--sp-ease) calc(0.15s + var(--sp-rang, 0) * 120ms);
	}

	.sp-anim .sp-etape.est-visible::before {
		transform: none;
	}
}

@media (prefers-reduced-motion: no-preference) and (min-width: 1200px) {
	/* Panneaux du hero : flottement très lent (9 à 14 s), quelques pixels,
	 * sens alternés. Le texte principal ne bouge pas. */
	.sp-anim .sp-hero-art > .sp-art:not(.sp-art-principal),
	.sp-anim .sp-hero-art > .sp-art-pastille {
		animation:
			sp-entree-art 0.9s var(--sp-ease) calc(0.3s + var(--sp-d, 0s)) both,
			var(--sp-flottement, sp-flotte) var(--sp-duree, 10s) ease-in-out calc(1.2s + var(--sp-d, 0s)) infinite alternate;
	}

	.sp-hero-art > .sp-art-1 {
		--sp-duree: 9s;
	}

	.sp-hero-art > .sp-art-2 {
		--sp-duree: 12s;
		--sp-flottement: sp-flotte-inverse;
	}

	.sp-hero-art > .sp-art-3 {
		--sp-duree: 10.5s;
	}

	.sp-hero-art > .sp-art-4 {
		--sp-duree: 13.5s;
		--sp-flottement: sp-flotte-inverse;
	}

	.sp-hero-art > .sp-art-pastille {
		--sp-duree: 11s;
		--sp-flottement: sp-flotte-inverse;
	}

	/* Orbites : rotation très lente de la pointillée, respiration de la pleine. */
	.sp-anim .sp-hero-art::after {
		animation: sp-orbite 140s linear infinite;
	}

	.sp-anim .sp-hero-art::before {
		animation: sp-respire 9s ease-in-out infinite alternate;
	}

	/* Points de connexion : pulsation d'opacité discrète, décalée. */
	.sp-anim .sp-hero-art > .sp-art-1::after {
		animation: sp-pulsation 4s ease-in-out infinite alternate;
	}

	.sp-anim .sp-hero-art > .sp-art-2::after {
		animation: sp-pulsation 5s ease-in-out -1.2s infinite alternate;
	}

	.sp-anim .sp-hero-art > .sp-art-3::after {
		animation: sp-pulsation 4.5s ease-in-out -2.4s infinite alternate;
	}

	.sp-anim .sp-hero-art > .sp-art-4::after {
		animation: sp-pulsation 3.6s ease-in-out -0.6s infinite alternate;
	}
}

@media (prefers-reduced-motion: no-preference) and (min-width: 782px) {
	/* Halo de l'introduction : respiration très lente. */
	.sp-hero::after {
		animation: sp-respire 12s ease-in-out infinite alternate;
	}

	/* Pictogrammes des expertises : variation presque imperceptible. */
	.sp-carte-expertise::after {
		animation: sp-picto 14s ease-in-out infinite alternate;
	}

	.sp-carte-2::after {
		animation-delay: -4s;
	}

	.sp-carte-3::after {
		animation-delay: -8s;
	}

	.sp-carte-4::after {
		animation-delay: -11s;
	}

	/* Technologies : le halo de fond dérive lentement. */
	.sp-section-outils::before {
		animation: sp-derive 26s ease-in-out infinite alternate;
	}
}

/* =====================================================================
 * Tablette et mobile
 * ===================================================================== */

/* Le lien « Contact » du menu n'apparaît que dans le menu mobile ; le bouton
 * « Parlons de votre projet » accompagne toujours la navigation d'ordinateur
 * (dès 900 px, seuil du menu plein écran ; 0.19.3). */
@media (min-width: 900px) {
	.sp-nav-studio .sp-nav-contact {
		display: none;
	}
}

@media (max-width: 899px) {
	.sp-entete-studio .wp-block-buttons.sp-bouton-entete-studio {
		display: none;
	}
}

.sp-entete-studio .wp-block-navigation__container {
	flex-wrap: nowrap;
}

.sp-bouton-fleche .wp-block-button__link {
	white-space: nowrap;
}

/* Sous 1200 px, les panneaux du hero passent en grille stable (plus de chevauchement). */
@media (max-width: 1199px) {
	.sp-hero-art {
		display: grid;
		gap: 0.7rem;
		grid-template-columns: 1fr 1fr;
		height: auto;
		transform: none;
	}

	.sp-hero-art::before,
	.sp-hero-art::after {
		display: none;
	}

	.sp-hero-art > .sp-art,
	.sp-hero-art > .sp-art-principal,
	.sp-hero-art > .sp-art-pastille {
		inset: auto;
		min-height: 0;
		position: relative;
		rotate: none;
		transform: none;
		width: auto;
	}

	.sp-hero-art > .sp-art-principal {
		grid-column: 1 / -1;
		padding: 1.4rem;
	}

	.sp-hero-art > .sp-art-pastille {
		grid-column: 1 / -1;
		justify-self: start;
		order: -1;
	}

	.sp-hero-art > .sp-art-1::after,
	.sp-hero-art > .sp-art-2::after,
	.sp-hero-art > .sp-art-3::after,
	.sp-hero-art > .sp-art-4::after {
		display: none;
	}

	.sp-art-titre {
		font-size: 1.6rem;
	}

	.sp-art-principal::after {
		height: 52px;
	}

	.sp-hero-art > .sp-art {
		border-radius: 14px;
		padding: 1rem;
	}

	.sp-art-texte {
		font-size: 1rem;
	}
}

@media (max-width: 781px) {
	.sp-hero:has(.sp-hero-art) {
		min-height: 0;
	}

	.sp-hero::after {
		height: 620px;
		right: -300px;
		top: -200px;
		width: 620px;
	}

	.sp-hero-art {
		display: grid;
		gap: 0.7rem;
		grid-template-columns: 1fr 1fr;
		height: auto;
		transform: none;
	}

	.sp-hero-art::before,
	.sp-hero-art::after {
		display: none;
	}

	.sp-hero-art > .sp-art,
	.sp-hero-art > .sp-art-principal,
	.sp-hero-art > .sp-art-pastille {
		inset: auto;
		min-height: 0;
		position: relative;
		rotate: none;
		transform: none;
		width: auto;
	}

	.sp-hero-art > .sp-art-principal {
		grid-column: 1 / -1;
		padding: 1.4rem;
	}

	.sp-hero-art > .sp-art-pastille {
		grid-column: 1 / -1;
		justify-self: start;
		order: -1;
	}

	.sp-hero-art > .sp-art-1::after,
	.sp-hero-art > .sp-art-2::after,
	.sp-hero-art > .sp-art-3::after,
	.sp-hero-art > .sp-art-4::after {
		display: none;
	}

	.sp-art-titre {
		font-size: 1.6rem;
	}

	.sp-art-principal::after {
		height: 52px;
	}

	.sp-hero-art > .sp-art {
		border-radius: 14px;
		padding: 1rem;
	}

	.sp-art-texte {
		font-size: 1rem;
	}

	.sp-carte-expertise {
		border-radius: 20px;
		min-height: 0;
	}

	.sp-carte-expertise::after {
		height: 38px;
		width: 38px;
	}

	.sp-projet-vedette,
	.sp-panneau-contact {
		border-radius: var(--sp-r-l);
	}

	.sp-bandeau {
		justify-content: flex-start;
	}

	.sp-etape::before {
		right: 0;
	}
}

@media (max-width: 599px) {
	.sp-entete-studio .wp-block-buttons.sp-bouton-entete-studio {
		display: none;
	}

	.sp-marque {
		font-size: 0.875rem;
		letter-spacing: 0.16em;
	}

	.sp-hero-boutons .wp-block-button {
		flex: 1 1 100%;
	}

	.sp-hero-boutons .wp-block-button__link {
		width: 100%;
	}

	.sp-reperes {
		font-size: 0.6875rem;
		letter-spacing: 0.1em;
	}

	.sp-carte-expertise .sp-titre {
		margin-top: 2.2rem;
	}

	/* Noms de projets longs (« coque-de-telephone.eu ») sur une seule ligne. */
	.sp-projet-legende .sp-titre.has-x-large-font-size {
		font-size: 1.45rem !important;
	}

	.sp-projet-vedette .sp-projet-texte {
		padding-inline: 0.25rem;
	}

	.sp-points,
	.sp-parcours > .sp-parcours-ligne {
		grid-template-columns: 1fr;
	}

	.sp-parcours > .sp-parcours-ligne {
		gap: 0.3rem;
	}

	.sp-faq-item summary {
		gap: 1rem;
		padding: 1.15rem 0;
	}

	.sp-competence {
		padding: 1.3rem 1.3rem 1.4rem;
	}
}

@media (prefers-reduced-motion: no-preference) and (max-width: 781px) {
	/* Mobile : amplitudes réduites. */
	.sp-anim .sp-apparait {
		transition-duration: 0.6s, 0.6s, 0.45s, 0.45s, 0.45s;
		translate: 0 14px;
	}
}

/* =====================================================================
 * Affinage 0.7.0 : focus, titres, fonds, hero et menu mobiles
 * ===================================================================== */

/* ---------- FAQ : focus discret (clavier), aucun anneau au clic ---------- */

.sp-faq-item summary {
	border-radius: 10px;
	margin-inline: -0.6rem;
	padding-inline: 0.6rem;
}

.sp-faq-item summary:focus {
	outline: none;
}

.sp-faq-item summary:focus-visible {
	box-shadow: 0 0 0 2px var(--wp--preset--color--papier), 0 0 0 4px rgb(26 107 108 / 0.45);
	outline: none;
}

.sp-pointeur .sp-faq-item summary:focus-visible {
	box-shadow: none;
}

/* ---------- Grands titres : révélation éditoriale ---------- */

@media (prefers-reduced-motion: no-preference) {
	.sp-anim .sp-titre-anime {
		clip-path: inset(100% -0.2em -0.35em -0.2em);
		transition: clip-path 0.8s var(--sp-ease), translate 0.8s var(--sp-ease);
		translate: 0 0.4em;
	}

	.sp-anim .sp-titre-anime.est-visible {
		clip-path: inset(-0.3em -0.2em -0.35em -0.2em);
		translate: none;
	}

	/* Le mot en italique arrive avec un léger retard. */
	.sp-anim .sp-titre-anime em {
		filter: blur(6px);
		opacity: 0;
		transition: opacity 0.7s ease 0.32s, filter 0.7s ease 0.32s;
	}

	.sp-anim .sp-titre-anime.est-visible em {
		filter: none;
		opacity: 1;
	}
}

/* ---------- Fonds : profondeur très discrète ---------- */

/* Expertises : halo menthe diffus derrière la grille, nuance chaude en bas. */
.sp-section-expertises {
	isolation: isolate;
	overflow: hidden;
	position: relative;
}

.sp-section-expertises::before,
.sp-section-expertises::after {
	border-radius: 50%;
	content: "";
	pointer-events: none;
	position: absolute;
	z-index: -1;
}

.sp-section-expertises::before {
	background: radial-gradient(closest-side, rgb(186 248 230 / 0.3), rgb(186 248 230 / 0.1) 55%, rgb(186 248 230 / 0));
	height: 1100px;
	left: 62%;
	top: -32%;
	width: 1250px;
}

.sp-section-expertises::after {
	background: radial-gradient(closest-side, rgb(238 234 227 / 1), rgb(238 234 227 / 0.55) 55%, rgb(238 234 227 / 0));
	bottom: -320px;
	height: 900px;
	left: -300px;
	width: 1100px;
}

/* Réalisations : halo autour du grand panneau IziDrop. */
.sp-section-realisations.has-background {
	background-image:
		radial-gradient(44% 36% at 50% 70%, rgb(186 248 230 / 0.46), rgb(186 248 230 / 0.14) 60%, rgb(186 248 230 / 0) 100%),
		linear-gradient(180deg, rgb(248 245 239 / 0) 55%, rgb(230 245 239 / 0.55) 100%);
}

/* Autres réalisations : lumière menthe pâle qui prolonge le halo d'IziDrop. */
.sp-section-autres.has-background {
	background-image:
		linear-gradient(180deg, rgb(230 245 239 / 0.55), rgb(230 245 239 / 0) 45%),
		radial-gradient(45% 50% at 88% 40%, rgb(230 245 239 / 0.95), rgb(230 245 239 / 0) 100%);
}

/* Méthode : variation de luminosité sur le fond sauge. */
.sp-section-methode.has-background {
	background-image:
		radial-gradient(55% 75% at 90% 6%, rgb(255 254 250 / 0.85), rgb(255 254 250 / 0) 100%),
		linear-gradient(165deg, rgb(233 238 235 / 0) 35%, rgb(221 232 226 / 0.9) 100%);
}

/* À propos : aura très pâle derrière le texte, sans concurrencer le titre. */
.sp-section-apropos.has-background {
	background-image: radial-gradient(45% 70% at 104% 55%, rgb(230 245 239 / 0.55), rgb(230 245 239 / 0) 100%);
}

/* Studio Peyral : nuance chaude à l'opposé du halo des expertises. */
.sp-section-studio.has-background {
	background-image:
		radial-gradient(40% 70% at 0% 0%, rgb(230 245 239 / 0.55), rgb(230 245 239 / 0) 100%),
		radial-gradient(55% 85% at 100% 100%, rgb(238 234 227 / 1), rgb(238 234 227 / 0) 100%);
}

/* FAQ : très faible lumière chaude, l'accordéon reste prioritaire. */
.sp-section-faq.has-background {
	background-image:
		radial-gradient(50% 75% at 0% 30%, rgb(238 234 227 / 1), rgb(238 234 227 / 0) 100%),
		radial-gradient(35% 45% at 100% 100%, rgb(230 245 239 / 0.4), rgb(230 245 239 / 0) 100%);
}

/* Technologies : halo renforcé et seconde lueur sarcelle. */
.sp-section-outils::before {
	background: radial-gradient(circle, rgb(186 248 230 / 0.24), rgb(186 248 230 / 0.07) 42%, rgb(186 248 230 / 0) 64%);
}

.sp-section-outils.has-background {
	background-image: linear-gradient(180deg, rgb(26 44 67 / 0) 20%, rgb(26 44 67 / 0.7) 100%);
}

.sp-section-outils::after {
	background: radial-gradient(circle, rgb(26 107 108 / 0.55), rgb(26 107 108 / 0.16) 40%, rgb(26 107 108 / 0) 64%);
	bottom: -320px;
	content: "";
	height: 720px;
	pointer-events: none;
	position: absolute;
	right: -220px;
	width: 720px;
	z-index: -1;
}

/* Pied de page : halo menthe très léger derrière les orbites. */
.sp-pied-studio.has-background {
	background-image: radial-gradient(38% 90% at 100% 0%, rgb(186 248 230 / 0.12), rgb(186 248 230 / 0) 100%);
}

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

.sp-section-apropos .sp-decale > p:not(.sp-declaration) {
	max-width: 38rem;
}

.sp-carte-expertise .sp-titre + p {
	line-height: 1.6;
}

.sp-tags li {
	font-size: 0.78rem;
}

/* ---------- Micro-animations ---------- */

@media (prefers-reduced-motion: no-preference) {
	/* Filet « Autres réalisations » tracé à l'apparition. */
	.sp-anim .sp-filet-titre.sp-apparait::after {
		transform: scaleX(0);
		transform-origin: left center;
		transition: transform 1.1s var(--sp-ease) 0.2s;
	}

	.sp-anim .sp-filet-titre.est-visible::after {
		transform: none;
	}

	/* Méthode : les numéros arrivent après leur trait. */
	.sp-anim .sp-etape.sp-apparait .sp-numero {
		opacity: 0;
		transition: opacity 0.6s ease, translate 0.6s var(--sp-ease);
		transition-delay: calc(0.35s + var(--sp-rang, 0) * 120ms);
		translate: 0 10px;
	}

	.sp-anim .sp-etape.est-visible .sp-numero {
		opacity: 1;
		translate: none;
	}
}

@media (hover: hover) and (pointer: fine) {
	/* Projets : micro-parallaxe de l'image dans son cadre au survol. */
	.sp-projet-secondaire:hover .sp-capture-projet img {
		transform: scale(1.035) translateY(3px);
	}
}

@media (prefers-reduced-motion: no-preference) and (min-width: 782px) {
	/* Halo des expertises : dérive très lente. */
	.sp-section-expertises::before {
		animation: sp-derive 32s ease-in-out infinite alternate;
	}

	/* Orbite pointillée du pied de page : rotation très lente. */
	.sp-pied-studio::after {
		animation: sp-orbite 160s linear infinite;
	}
}

/* ---------- Hero mobile : un seul appel à l'action fort ---------- */

@media (max-width: 599px) {
	.sp-hero-boutons {
		align-items: flex-start;
		flex-direction: column;
		gap: 0.2rem;
	}

	.sp-hero-boutons .wp-block-button {
		align-self: stretch;
	}

	.sp-hero-boutons .wp-block-button.is-style-outline {
		align-self: flex-start;
		flex: 0 0 auto;
	}

	.sp-sombre .sp-hero-boutons .is-style-outline .wp-block-button__link {
		background: none;
		border: 0;
		color: var(--wp--preset--color--blanc-casse);
		font-weight: 600;
		padding: 0.85rem 0;
		text-decoration: underline;
		text-decoration-color: rgb(186 248 230 / 0.6);
		text-decoration-thickness: 1px;
		text-underline-offset: 0.35em;
		width: auto;
	}

	.sp-sombre .sp-hero-boutons .is-style-outline .wp-block-button__link:hover {
		background: none;
		text-decoration-color: var(--wp--preset--color--menthe);
		transform: none;
	}

	/* Les repères reprennent les expertises : masqués pour laisser respirer le hero. */
	.sp-reperes {
		display: none;
	}
}

/* ---------- Menu mobile (surcouche WordPress restylée) ---------- */

/* Le flou de l'en-tête créerait un bloc conteneur pour le menu en position
 * fixe : on le neutralise pendant que le menu est ouvert. */
.sp-entete-studio.has-encre-background-color:has(.is-menu-open) {
	backdrop-filter: none;
}

/* Halos et orbites de la charte, dessinés en arrière-plan : ils ne peuvent pas
 * allonger la zone de défilement du menu. */
.sp-nav-studio .wp-block-navigation__responsive-container.is-menu-open {
	background-image:
		radial-gradient(circle at 105% 102%, transparent 229px, rgb(186 248 230 / 0.13) 230px, transparent 231.5px),
		radial-gradient(circle at 105% 102%, transparent 149px, rgb(186 248 230 / 0.1) 150px, transparent 151.5px),
		radial-gradient(70% 45% at 88% 10%, rgb(186 248 230 / 0.16), rgb(186 248 230 / 0) 100%),
		radial-gradient(70% 45% at 0% 100%, rgb(26 107 108 / 0.32), rgb(26 107 108 / 0) 100%);
	overflow-x: hidden;
	padding: 0;
	scrollbar-width: none;
}

.sp-nav-studio .wp-block-navigation__responsive-container.is-menu-open::-webkit-scrollbar {
	display: none;
}

.sp-nav-studio .is-menu-open .wp-block-navigation__responsive-dialog {
	display: flex;
	flex-direction: column;
	min-height: 100%;
	padding: 0 clamp(1.25rem, 6vw, 2.5rem) 2rem;
	position: relative;
}

/* Marque en haut à gauche, alignée sur le bouton de fermeture.
 * 0.11.0 : remplacée par le logo (.sp-menu-logo, ajouté par functions.php) ;
 * le texte n'est plus affiché. */
.sp-nav-studio .is-menu-open .wp-block-navigation__responsive-dialog:has(.sp-menu-logo)::before {
	content: none;
}

.sp-nav-studio .is-menu-open .wp-block-navigation__responsive-dialog::before {
	color: var(--wp--preset--color--blanc-casse);
	content: "Studio Peyral";
	content: "Studio Peyral" / "";
	font-size: 0.875rem;
	font-weight: 800;
	letter-spacing: 0.16em;
	line-height: 44px;
	padding-top: 0.6rem;
	text-transform: uppercase;
}

.sp-nav-studio .is-menu-open .wp-block-navigation__responsive-container-close {
	align-items: center;
	border: 1px solid rgb(255 255 255 / 0.18);
	border-radius: 12px;
	color: var(--wp--preset--color--blanc-casse);
	display: flex;
	height: 44px;
	justify-content: center;
	right: clamp(1.25rem, 6vw, 2.5rem);
	top: 0.6rem;
	transition: border-color 0.25s ease, background-color 0.25s ease;
	width: 44px;
}

.sp-nav-studio .is-menu-open .wp-block-navigation__responsive-container-close:hover {
	background-color: rgb(255 255 255 / 0.06);
	border-color: var(--wp--preset--color--menthe);
}

.sp-nav-studio .is-menu-open .wp-block-navigation__responsive-container-close svg {
	height: 22px;
	width: 22px;
}

.sp-nav-studio .is-menu-open .wp-block-navigation__responsive-container-content {
	align-items: stretch !important;
	flex: 1;
	padding-top: clamp(2.5rem, 9vh, 4.5rem) !important;
}

.sp-nav-studio .is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__container {
	align-items: stretch !important;
	counter-reset: sp-menu;
	gap: 0 !important;
	width: 100%;
}

.sp-nav-studio .is-menu-open .wp-block-navigation-item {
	border-bottom: 1px solid rgb(255 255 255 / 0.09);
	counter-increment: sp-menu;
	width: 100%;
}

.sp-nav-studio .is-menu-open .wp-block-navigation-item__content {
	align-items: baseline;
	box-sizing: border-box;
	color: var(--wp--preset--color--blanc-casse);
	display: flex !important;
	font-size: clamp(1.75rem, 8vw, 2.4rem);
	font-weight: 800;
	gap: 1rem;
	letter-spacing: -0.035em;
	line-height: 1.1;
	padding: 0.95rem 0 !important;
	width: 100%;
}

.sp-nav-studio .is-menu-open .wp-block-navigation-item__content::before {
	color: var(--wp--preset--color--menthe);
	content: counter(sp-menu, decimal-leading-zero) " /";
	content: counter(sp-menu, decimal-leading-zero) " /" / "";
	flex: 0 0 2.7rem;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.12em;
}

.sp-nav-studio .is-menu-open .wp-block-navigation-item__label {
	background: none;
	padding: 0;
}

.sp-nav-studio .is-menu-open .wp-block-navigation-item__content:hover {
	color: var(--wp--preset--color--menthe);
}

/* Contact : appel à l'action distinct, après les liens. */
.sp-nav-studio .is-menu-open .wp-block-navigation-item.sp-nav-contact {
	border-bottom: 0;
	margin-top: 2rem;
}

.sp-nav-studio .is-menu-open .sp-nav-contact .wp-block-navigation-item__content {
	background: var(--wp--preset--color--menthe);
	border-radius: var(--sp-r-s);
	color: var(--wp--preset--color--encre);
	font-size: 1rem;
	justify-content: center;
	letter-spacing: 0;
	padding: 1.05rem 1.25rem !important;
}

.sp-nav-studio .is-menu-open .sp-nav-contact .wp-block-navigation-item__content::before {
	display: none;
}

.sp-nav-studio .is-menu-open .sp-nav-contact .wp-block-navigation-item__content:hover {
	background: #d4fbf0;
	color: var(--wp--preset--color--encre);
}

/* Focus clavier discret dans le menu. */
.sp-nav-studio .is-menu-open :where(a, button):focus {
	outline: none;
}

.sp-nav-studio .is-menu-open :where(a, button):focus-visible {
	border-radius: 8px;
	box-shadow: 0 0 0 2px rgb(186 248 230 / 0.55);
}

.sp-pointeur .sp-nav-studio .is-menu-open :where(a, button):focus-visible {
	box-shadow: none;
}

@keyframes sp-menu-entree {
	from {
		opacity: 0;
		translate: 0 16px;
	}
}

@media (prefers-reduced-motion: no-preference) {
	.sp-nav-studio .is-menu-open .wp-block-navigation-item {
		animation: sp-menu-entree 0.55s var(--sp-ease) both;
	}

	.sp-nav-studio .is-menu-open .wp-block-navigation-item:nth-child(1) { animation-delay: 0.06s; }
	.sp-nav-studio .is-menu-open .wp-block-navigation-item:nth-child(2) { animation-delay: 0.12s; }
	.sp-nav-studio .is-menu-open .wp-block-navigation-item:nth-child(3) { animation-delay: 0.18s; }
	.sp-nav-studio .is-menu-open .wp-block-navigation-item:nth-child(4) { animation-delay: 0.24s; }
	.sp-nav-studio .is-menu-open .wp-block-navigation-item:nth-child(5) { animation-delay: 0.34s; }
}

/* =====================================================================
 * Barre de défilement Studio Peyral (0.7.1 ; piste transparente en 0.19.2)
 * Ordinateur (pointeur fin) uniquement : sur tactile, comportement natif.
 * Aucun script : le défilement reste celui du navigateur.
 * ===================================================================== */

@media (hover: hover) and (pointer: fine) {
	/* Chromium, Edge, Safari. La bordure transparente affine le curseur à
	 * l'œil (6 px) sans réduire sa zone de saisie (10 px). */
	::-webkit-scrollbar {
		height: 10px;
		width: 10px;
	}

	::-webkit-scrollbar-track {
		background: transparent;
	}

	::-webkit-scrollbar-thumb {
		background-clip: padding-box;
		background-color: #167c73;
		border: 2px solid transparent;
		border-radius: 999px;
		min-height: 48px;
	}

	::-webkit-scrollbar-thumb:hover,
	::-webkit-scrollbar-thumb:active {
		background-color: #116a63;
	}

	::-webkit-scrollbar-corner {
		background: transparent;
	}

	/* Firefox (propriétés standards). Réservées aux navigateurs sans
	 * ::-webkit-scrollbar : dans Chromium, elles désactiveraient les règles
	 * ci-dessus (thumb arrondi et bordure). */
	@supports not selector(::-webkit-scrollbar) {
		html {
			scrollbar-color: #167c73 transparent;
			scrollbar-width: thin;
		}
	}
}

/* =====================================================================
 * Page Contact (0.8.1) : modèle page-contact.html, compositions « Contact – … »
 * ===================================================================== */

/* ---------- Filet de sécurité : contenu sans fond sur les pages de la charte ----------
 * Le fond bleu nuit du <body> (utile derrière l'en-tête) apparaissait sous toute
 * section sans couleur de fond propre, avec un texte bleu nuit par défaut :
 * contenu illisible (cas de l'ancienne composition V1 « Page Contact »).
 * Le contenu principal reçoit donc le fond clair de la charte. */
.sp-principal {
	background-color: var(--wp--preset--color--papier);
}

/* ---------- Contact – Hero (compact) ---------- */

.sp-hero-contact .sp-hero-texte > * {
	margin-block: 0;
}

.sp-hero-contact .sp-hero-titre {
	margin-top: 1.1rem;
	max-width: 12ch;
}

.sp-hero-contact .sp-chapo {
	line-height: 1.5;
	margin-top: 1.4rem;
	max-width: 36rem;
}

.sp-hero-contact .sp-hero-note {
	font-size: 0.975rem;
	line-height: 1.55;
	margin-top: 0.9rem;
	max-width: 34rem;
}

/* ---------- Contact – Formulaire : bleu nuit, grande carte ivoire ---------- */

.sp-section-contact-formulaire {
	isolation: isolate;
	overflow: hidden;
	position: relative;
}

/* Grille de la charte et halo menthe, derrière la carte. */
.sp-section-contact-formulaire::before {
	background-image:
		linear-gradient(rgb(255 255 255 / 0.035) 1px, transparent 1px),
		linear-gradient(90deg, rgb(255 255 255 / 0.035) 1px, transparent 1px);
	background-size: 72px 72px;
	content: "";
	inset: 0;
	-webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 70%);
	mask-image: linear-gradient(180deg, #000 0%, transparent 70%);
	pointer-events: none;
	position: absolute;
	z-index: -1;
}

.sp-section-contact-formulaire::after {
	background:
		radial-gradient(closest-side, rgb(186 248 230 / 0.2), rgb(186 248 230 / 0.06) 55%, rgb(186 248 230 / 0)),
		radial-gradient(closest-side at 70% 60%, rgb(26 107 108 / 0.35), rgb(26 107 108 / 0));
	content: "";
	height: 780px;
	left: 50%;
	pointer-events: none;
	position: absolute;
	top: 18%;
	transform: translateX(-50%);
	width: min(1400px, 110%);
	z-index: -1;
}

.wp-block-group.sp-contact-carte.has-background {
	border: 1px solid rgb(255 255 255 / 0.6);
	border-radius: var(--sp-r-xl);
	box-shadow: 0 50px 100px -50px rgb(0 0 0 / 0.75), 0 0 0 10px rgb(186 248 230 / 0.04);
	margin-inline: auto;
	max-width: 70rem;
	padding: clamp(0.75rem, 1.6vw, 1.1rem);
	position: relative;
}

.sp-contact-grille {
	display: grid;
	gap: clamp(1.25rem, 3vw, 2.25rem);
	grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 1024px) {
	/* Le panneau « Pour bien démarrer » prend toute la hauteur du formulaire. */
	.sp-contact-grille {
		align-items: stretch;
		grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
	}
}

.sp-contact-grille > * {
	margin: 0 !important;
}

.sp-contact-formulaire {
	padding: clamp(1rem, 2.2vw, 1.8rem) clamp(1rem, 2.6vw, 2.1rem) clamp(0.9rem, 1.8vw, 1.4rem);
}

.sp-contact-formulaire > .is-style-sp-surtitre,
.sp-contact-formulaire > .sp-titre {
	margin-block: 0;
}

.sp-contact-formulaire > .sp-titre {
	margin-top: 0.7rem;
}

/* Carte claire dans une section sombre : l'accent italique reprend le sarcelle
 * (la règle .sp-sombre .sp-titre em le passerait en menthe, illisible sur ivoire). */
.sp-sombre .sp-contact-carte .sp-contact-formulaire .sp-titre em {
	color: var(--wp--preset--color--sarcelle);
}

.sp-contact-formulaire > .sp-carte-formulaire {
	margin-top: 1.3rem;
}

/* « Pour bien démarrer » : panneau sombre à l'intérieur de la carte. */
.wp-block-group.sp-contact-demarrer.has-background {
	background-image:
		radial-gradient(circle at 112% 104%, transparent 159px, rgb(186 248 230 / 0.14) 160px, transparent 161.5px),
		radial-gradient(circle at 112% 104%, transparent 99px, rgb(186 248 230 / 0.1) 100px, transparent 101.5px),
		radial-gradient(90% 60% at 100% 0%, rgb(186 248 230 / 0.12), rgb(186 248 230 / 0) 70%),
		linear-gradient(180deg, rgb(255 255 255 / 0.03), rgb(255 255 255 / 0));
	border: 1px solid rgb(255 255 255 / 0.06);
	border-radius: calc(var(--sp-r-xl) - 0.75rem);
	display: flex;
	flex-direction: column;
	padding: clamp(1.6rem, 2.8vw, 2.4rem);
	position: relative;
}

.sp-contact-demarrer > * {
	margin-block: 0;
}

.sp-contact-demarrer-titre {
	font-size: clamp(1.3rem, 1.1rem + 0.6vw, 1.6rem);
	letter-spacing: -0.03em;
}

.sp-contact-demarrer-titre::before {
	background: var(--wp--preset--color--menthe);
	content: "";
	display: block;
	height: 2px;
	margin-bottom: 1.1rem;
	transform-origin: left center;
	width: 32px;
}

.sp-contact-demarrer > p:not(.sp-demarrer-note) {
	line-height: 1.55;
	margin-top: 0.8rem;
}

.sp-demarrer-liste {
	counter-reset: sp-demarrer;
	display: flex;
	flex: 1;
	flex-direction: column;
	justify-content: space-evenly;
	list-style: none;
	margin-top: 1.4rem !important;
	padding: 0;
}

.sp-demarrer-liste > li {
	align-items: baseline;
	border-top: 1px solid rgb(255 255 255 / 0.09);
	counter-increment: sp-demarrer;
	display: flex;
	font-weight: 600;
	gap: 1rem;
	line-height: 1.45;
	margin: 0;
	padding: 1.05rem 0;
}

.sp-demarrer-liste > li::before {
	color: var(--wp--preset--color--menthe);
	content: counter(sp-demarrer, decimal-leading-zero);
	content: counter(sp-demarrer, decimal-leading-zero) / "";
	flex: 0 0 1.8rem;
	font-family: var(--wp--preset--font-family--literata);
	font-size: 1.15rem;
	font-style: italic;
	font-weight: 400;
}

/* Note finale : posée en bas du panneau, dans un encart discret. */
.sp-contact-demarrer > .sp-demarrer-note {
	background: rgb(186 248 230 / 0.06);
	border: 1px solid rgb(186 248 230 / 0.16);
	border-radius: var(--sp-r-s);
	font-size: 0.9rem;
	line-height: 1.5;
	margin-top: 1.4rem;
	padding: 0.9rem 1rem;
}

.sp-demarrer-note strong {
	color: var(--wp--preset--color--menthe);
	font-weight: 700;
}

/* ---------- Fluent Forms dans les pages de la charte ----------
 * Les variables de Fluent Forms 6 sont redéfinies à l'échelle du formulaire
 * (.fluentform), ce qui prime sur celles déclarées sur :root. Les règles
 * ciblent les classes réelles générées par [fluentform id="1"]. */

.sp-principal .fluentform {
	--fluentform-primary: var(--wp--preset--color--sarcelle);
	--fluentform-secondary: var(--wp--preset--color--encre);
	--fluentform-danger: #a33a2c;
	--fluentform-border-color: rgb(16 28 44 / 0.16);
	--fluentform-border-radius: var(--sp-r-s);
	--sp-champ-fond: #fbfaf6;
	color: var(--wp--preset--color--encre);
	font-family: inherit;
	margin: 0;
}

.sp-principal .fluentform .ff-el-group {
	margin-bottom: 1.6rem;
}

.sp-principal .frm-fluent-form .ff-t-container {
	gap: 1rem;
}

/* Libellés. */
.sp-principal .fluentform .ff-el-input--label {
	margin-bottom: 0.5rem;
}

.sp-principal .fluentform .ff-el-input--label label {
	color: var(--wp--preset--color--encre);
	font-size: 0.9rem;
	font-weight: 700;
	letter-spacing: 0.005em;
}

.sp-principal .fluentform .ff-el-input--label.ff-el-is-required.asterisk-right label::after {
	color: var(--wp--preset--color--sarcelle);
}

/* Champs. */
.sp-principal .fluentform .ff-el-form-control {
	background-color: var(--sp-champ-fond);
	border: 1px solid var(--fluentform-border-color);
	border-radius: var(--sp-r-s);
	box-shadow: none;
	color: var(--wp--preset--color--encre);
	font-family: inherit;
	font-size: 1rem;
	line-height: 1.5;
	min-height: 3.25rem;
	padding: 0.8rem 1rem;
	transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.sp-principal .fluentform .ff-el-form-control::placeholder {
	color: #646f77;
	opacity: 1;
}

.sp-principal .fluentform .ff-el-form-control:hover {
	border-color: rgb(16 28 44 / 0.3);
}

.sp-principal .fluentform .ff-el-form-control:focus {
	background-color: #fff;
	border-color: var(--wp--preset--color--sarcelle);
	box-shadow: 0 0 0 4px rgb(26 107 108 / 0.14);
	outline: none;
}

.sp-principal .fluentform textarea.ff-el-form-control {
	min-height: 11rem;
	resize: vertical;
}

.sp-contact-carte .fluentform .ff-el-group {
	margin-bottom: 1.2rem;
}

.sp-contact-carte .fluentform .ff-el-input--label {
	margin-bottom: 0.45rem;
}

.sp-contact-carte .fluentform .ff-el-form-control {
	min-height: 3rem;
	padding: 0.7rem 0.95rem;
}

.sp-contact-carte .fluentform textarea.ff-el-form-control {
	height: 8.75rem;
	min-height: 7.5rem;
}

/* Liste déroulante : même champ, flèche sarcelle dessinée. */
.sp-principal .fluentform select.ff-el-form-control {
	-webkit-appearance: none;
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%231A6B6C' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
	background-position: right 1rem center;
	background-repeat: no-repeat;
	background-size: 16px 16px;
	cursor: pointer;
	padding-right: 2.75rem;
}

.sp-principal .fluentform select.ff-el-form-control option {
	color: var(--wp--preset--color--encre);
}

/* Erreurs : posées sous le champ sans décaler le formulaire (le bouton ne
 * bouge pas quand Fluent Forms retire le message au moment du clic). */
.sp-principal .fluentform .ff-el-input--content {
	position: relative;
}

.sp-principal .fluentform .ff-el-is-error .ff-el-form-control {
	border-color: var(--fluentform-danger);
	box-shadow: 0 0 0 4px rgb(163 58 44 / 0.1);
}

.sp-principal .fluentform .ff-el-is-error .text-danger,
.sp-principal .fluentform .ff-el-input--content .error {
	color: var(--fluentform-danger);
	font-size: 0.78rem;
	font-weight: 600;
	left: 0;
	line-height: 1.3;
	margin: 0;
	position: absolute;
	right: 0;
	top: calc(100% + 0.3rem);
}

/* Bouton d'envoi : appel à l'action menthe de la charte.
 * Fluent Forms colore ce bouton par une règle en ligne
 * (form.fluent_form_1 .ff-btn-submit:not(.ff_btn_no_style)) et, selon les
 * réglages du formulaire, par un attribut style : !important est ici
 * nécessaire et limité aux couleurs du bouton. */
.sp-principal form.frm-fluent-form .ff_submit_btn_wrapper {
	margin: 0.4rem 0 0;
}

.sp-principal form.frm-fluent-form .ff-btn-submit {
	background-color: var(--wp--preset--color--menthe) !important;
	border: 1px solid rgb(26 107 108 / 0.25) !important;
	border-radius: var(--sp-r-s);
	box-shadow: 0 12px 26px -16px rgb(26 107 108 / 0.9);
	color: var(--wp--preset--color--encre) !important;
	cursor: pointer;
	font-family: inherit;
	font-size: 1rem;
	font-weight: 800;
	letter-spacing: -0.005em;
	line-height: 1.2;
	min-height: 3.5rem;
	opacity: 1;
	padding: 1rem 2rem;
	transition: transform 0.3s var(--sp-ease), box-shadow 0.3s ease, background-color 0.3s ease;
}

.sp-principal form.frm-fluent-form .ff-btn-submit:hover {
	background-color: #d4fbf0 !important;
	box-shadow: 0 18px 32px -16px rgb(26 107 108 / 0.95);
	transform: translateY(-2px);
}

.sp-principal form.frm-fluent-form .ff-btn-submit:active {
	transform: translateY(0);
}

.sp-principal form.frm-fluent-form .ff-btn-submit:focus-visible {
	box-shadow: 0 0 0 3px var(--wp--preset--color--blanc-casse), 0 0 0 5px var(--wp--preset--color--sarcelle);
	outline: none;
}

.sp-principal form.frm-fluent-form .ff-btn-submit:disabled {
	cursor: progress;
	opacity: 0.7;
	transform: none;
}

/* Message de confirmation. */
.sp-principal .ff-message-success {
	background: var(--wp--preset--color--menthe-pale);
	border: 1px solid rgb(26 107 108 / 0.3);
	border-radius: var(--sp-r-m);
	box-shadow: none;
	color: var(--wp--preset--color--encre);
	font-size: 1.05rem;
	line-height: 1.55;
	margin: 0;
	padding: 1.4rem 1.5rem;
}

.sp-principal .ff-message-success > :last-child {
	margin-bottom: 0;
}

.sp-principal .ff-errors-in-stack {
	color: var(--fluentform-danger);
	margin-top: 1rem;
}

/* ---------- Contact – Informations ---------- */

.sp-section-contact-infos.has-background {
	background-image: radial-gradient(40% 70% at 100% 0%, rgb(230 245 239 / 0.6), rgb(230 245 239 / 0) 100%);
}

.sp-section-contact-infos .sp-etape .sp-numero {
	font-size: clamp(2.8rem, 2.2rem + 1.6vw, 3.6rem);
	line-height: 1;
}

.sp-section-contact-infos .sp-etape h3 {
	margin-top: 1.4rem;
}

.sp-section-contact-infos .sp-tete-section .wp-block-column:last-child p {
	border-left: 2px solid var(--wp--preset--color--sarcelle);
	padding-left: 1.1rem;
}

/* ---------- Contact – CTA final ---------- */

.sp-section-contact-relance.has-background {
	background-image: radial-gradient(50% 90% at 90% 50%, rgb(255 254 250 / 0.7), rgb(255 254 250 / 0) 100%);
}

.sp-contact-relance-liens {
	display: flex;
	flex-direction: column;
	gap: 0.9rem;
}

.sp-contact-relance-liens > * {
	margin: 0;
}

@media (min-width: 782px) {
	.sp-contact-relance-liens {
		align-items: flex-end;
	}
}

/* ---------- Animations de la page Contact ---------- */

@media (prefers-reduced-motion: no-preference) {
	/* Le panneau « Pour bien démarrer » apparaît après la carte du formulaire. */
	.sp-anim .sp-contact-demarrer.sp-apparait {
		transition-delay: 0.18s, 0.18s, 0s, 0s, 0s;
	}

	/* Filet du panneau tracé à l'apparition. */
	.sp-anim .sp-contact-demarrer.sp-apparait .sp-contact-demarrer-titre::before {
		transform: scaleX(0);
		transition: transform 0.9s var(--sp-ease) 0.45s;
	}

	.sp-anim .sp-contact-demarrer.est-visible .sp-contact-demarrer-titre::before {
		transform: none;
	}
}

/* ---------- Contact : petits écrans ---------- */

@media (max-width: 599px) {
	.wp-block-group.sp-contact-carte.has-background {
		border-radius: var(--sp-r-l);
		padding: 1rem;
	}

	.sp-contact-formulaire {
		padding: 0.5rem 0.25rem 0;
	}

	.sp-principal form.frm-fluent-form .ff-btn-submit {
		width: 100%;
	}
}

/* ---------- Contact 0.8.2 : hero à deux colonnes ---------- */

.sp-contact-hero-grille {
	align-items: center;
	display: grid;
	gap: clamp(2rem, 5vw, 5rem);
	grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 782px) {
	.sp-contact-hero-grille {
		grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
	}
}

.sp-contact-hero-grille > * {
	margin: 0 !important;
}

/* Carte « Premier échange » (0.8.2–0.8.3) retirée en 0.8.4 : masquée si un
 * ancien contenu de page la contient encore. */
.sp-contact-echange {
	display: none;
}

/* ---------- Contact 0.8.2 : animations ---------- */

@media (prefers-reduced-motion: no-preference) {
	/* Carte du formulaire : légèrement différée ; panneau : décalé ensuite. */
	.sp-anim .sp-contact-carte.sp-apparait {
		transition-delay: 0.12s, 0.12s, 0s, 0s, 0s;
	}

	.sp-anim .sp-contact-demarrer.sp-apparait {
		transition-delay: 0.32s, 0.32s, 0s, 0s, 0s;
	}
}

/* ---------- Contact 0.8.3 : finition ---------- */

/* Bouton d'envoi : plus de présence, reflet lumineux au survol. */
.sp-principal form.frm-fluent-form .ff_submit_btn_wrapper {
	margin-top: 0.3rem;
}

.sp-principal form.frm-fluent-form .ff-btn-submit {
	background-image: linear-gradient(115deg, rgb(255 255 255 / 0) 35%, rgb(255 255 255 / 0.55) 50%, rgb(255 255 255 / 0) 65%);
	background-position: 130% 0;
	background-repeat: no-repeat;
	background-size: 250% 100%;
	box-shadow: 0 14px 30px -16px rgb(26 107 108 / 0.95), inset 0 1px 0 rgb(255 255 255 / 0.5);
	font-size: 1.02rem;
	min-height: 3.65rem;
	min-width: 16rem;
	padding: 1rem 2.6rem;
	transition: transform 0.35s var(--sp-ease), box-shadow 0.35s ease, background-color 0.3s ease, background-position 0.8s var(--sp-ease);
}

.sp-principal form.frm-fluent-form .ff-btn-submit:hover {
	background-position: -30% 0;
	box-shadow: 0 22px 38px -18px rgb(26 107 108 / 0.95), 0 0 0 4px rgb(186 248 230 / 0.28), inset 0 1px 0 rgb(255 255 255 / 0.6);
	transform: translateY(-2px);
}

@media (prefers-reduced-motion: reduce) {
	.sp-principal form.frm-fluent-form .ff-btn-submit,
	.sp-principal form.frm-fluent-form .ff-btn-submit:hover {
		transform: none;
		transition: box-shadow 0.2s ease, background-color 0.2s ease;
	}
}

/* Hero : halo très léger derrière la carte « Premier échange ». */
@media (min-width: 782px) {
	.sp-contact-hero-grille {
		position: relative;
	}

	.sp-contact-hero-grille::before {
		background: radial-gradient(closest-side, rgb(186 248 230 / 0.13), rgb(26 107 108 / 0.14) 55%, rgb(26 107 108 / 0));
		content: "";
		height: 34rem;
		pointer-events: none;
		position: absolute;
		right: -7rem;
		top: 50%;
		transform: translateY(-50%);
		width: 38rem;
		z-index: -1;
	}
}

/* « Pour bien démarrer » : note finale un peu plus lisible. */
.sp-contact-demarrer > .sp-demarrer-note {
	color: #d6dfe6;
	text-wrap: balance;
}

/* Section 02 : la note rejoint la grille des étapes. Mêmes colonnes et même
 * gouttière que .sp-etapes : la note s'aligne sur l'étape 03, au pied du titre ;
 * en dessous de trois colonnes, elle devient l'introduction des étapes. */
.sp-section-contact-infos.has-background {
	background-image:
		radial-gradient(40% 70% at 100% 0%, rgb(230 245 239 / 0.6), rgb(230 245 239 / 0) 100%),
		radial-gradient(45% 60% at 0% 100%, rgb(26 107 108 / 0.035), rgb(26 107 108 / 0) 100%);
}

.sp-section-contact-infos .sp-tete-section {
	display: grid;
	gap: 1.5rem 1.25rem;
	grid-template-columns: minmax(0, 1fr);
}

.sp-section-contact-infos .sp-tete-section > .wp-block-column {
	margin: 0;
}

.sp-section-contact-infos .sp-tete-section .wp-block-column:last-child p {
	border-left: 0;
	color: #46525b;
	font-size: 1.02rem;
	line-height: 1.6;
	max-width: 34rem;
	padding-left: 0;
	text-wrap: pretty;
}

.sp-section-contact-infos .sp-tete-section .wp-block-column:last-child p::before {
	background: var(--wp--preset--color--sarcelle);
	content: "";
	display: block;
	height: 2px;
	margin-bottom: 0.9rem;
	width: 32px;
}

@media (min-width: 1024px) {
	.sp-section-contact-infos .sp-tete-section {
		align-items: end;
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.sp-section-contact-infos .sp-tete-section > .wp-block-column:first-child {
		grid-column: span 2;
	}

	.sp-section-contact-infos .sp-tete-section .wp-block-column:last-child p {
		max-width: 21rem;
		padding-bottom: 0.35rem;
	}
}

.sp-section-contact-infos .sp-etape h3 {
	line-height: 1.2;
}

.sp-section-contact-infos .sp-etape p:last-child {
	color: #4c5861;
	max-width: 40ch;
}

/* Section 02 : le filet se trace de gauche à droite, puis chaque numéro,
 * suivi de son titre et de son texte. Aucune boucle. */
@media (prefers-reduced-motion: no-preference) {
	.sp-section-contact-infos {
		--sp-pas: 0.28s;
	}

	.sp-anim .sp-section-contact-infos .sp-etape.sp-apparait {
		opacity: 1;
		transition: none;
		translate: none;
	}

	.sp-anim .sp-section-contact-infos .sp-etape.sp-apparait::before {
		transform: scaleX(0);
		transition: transform var(--sp-pas) linear calc(var(--sp-rang, 0) * var(--sp-pas));
	}

	.sp-anim .sp-section-contact-infos .sp-etape.sp-apparait::after {
		scale: 0;
		transition: scale 0.35s var(--sp-ease) calc(var(--sp-rang, 0) * var(--sp-pas));
	}

	.sp-anim .sp-section-contact-infos .sp-etape.sp-apparait > * {
		opacity: 0;
		transition: opacity 0.5s ease, translate 0.5s var(--sp-ease);
		translate: 0 10px;
	}

	.sp-anim .sp-section-contact-infos .sp-etape.sp-apparait > .sp-numero {
		transition-delay: calc(0.1s + var(--sp-rang, 0) * var(--sp-pas));
	}

	.sp-anim .sp-section-contact-infos .sp-etape.sp-apparait > h3 {
		transition-delay: calc(0.2s + var(--sp-rang, 0) * var(--sp-pas));
	}

	.sp-anim .sp-section-contact-infos .sp-etape.sp-apparait > p:last-child {
		transition-delay: calc(0.28s + var(--sp-rang, 0) * var(--sp-pas));
	}

	.sp-anim .sp-section-contact-infos .sp-etape.est-visible::before {
		transform: none;
	}

	.sp-anim .sp-section-contact-infos .sp-etape.est-visible::after {
		scale: 1;
	}

	.sp-anim .sp-section-contact-infos .sp-etape.est-visible > * {
		opacity: 1;
		translate: none;
	}
}

@media (prefers-reduced-motion: no-preference) and (max-width: 781px) {
	/* Étapes empilées : chacune se révèle à son arrivée, sans attente. */
	.sp-section-contact-infos {
		--sp-pas: 0s;
	}

	.sp-anim .sp-section-contact-infos .sp-etape.sp-apparait::before {
		transition-duration: 0.6s;
		transition-timing-function: var(--sp-ease);
	}
}

/* Bande avant le pied de page : plus d'air, léger dégradé, liens identifiables. */
.sp-section-contact-relance.has-background {
	background-image:
		radial-gradient(38% 120% at 88% 50%, rgb(186 248 230 / 0.32), rgb(186 248 230 / 0) 100%),
		radial-gradient(30% 90% at 0% 100%, rgb(26 107 108 / 0.05), rgb(26 107 108 / 0) 100%),
		linear-gradient(100deg, rgb(255 254 250 / 0.35), rgb(255 254 250 / 0) 60%);
	border-top: 1px solid rgb(16 28 44 / 0.06);
}

.sp-section-contact-relance > .wp-block-columns {
	padding-block: clamp(0.75rem, 2.4vw, 2rem);
}

.sp-contact-relance-liens {
	gap: 0;
}

.sp-contact-relance-liens > .sp-lien-fleche {
	font-size: 1rem;
	width: min(100%, 21rem);
}

.sp-contact-relance-liens > .sp-lien-fleche a {
	background: none;
	border-bottom: 1px solid rgb(16 28 44 / 0.2);
	color: var(--wp--preset--color--encre);
	display: flex;
	justify-content: space-between;
	padding: 0.95rem 0;
	transition: color 0.25s ease, border-color 0.25s ease;
}

.sp-contact-relance-liens > .sp-lien-fleche:first-child a {
	border-top: 1px solid rgb(16 28 44 / 0.2);
}

.sp-contact-relance-liens > .sp-lien-fleche a::after {
	align-items: center;
	border: 1px solid rgb(26 107 108 / 0.4);
	border-radius: 50%;
	color: var(--wp--preset--color--sarcelle);
	display: inline-flex;
	flex: none;
	font-size: 0.95rem;
	height: 2.1rem;
	justify-content: center;
	transition: transform 0.3s var(--sp-ease), background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
	width: 2.1rem;
}

.sp-contact-relance-liens > .sp-lien-fleche a:hover {
	border-color: var(--wp--preset--color--sarcelle);
	color: var(--wp--preset--color--sarcelle);
}

.sp-contact-relance-liens > .sp-lien-fleche a:hover::after {
	background-color: var(--wp--preset--color--sarcelle);
	border-color: var(--wp--preset--color--sarcelle);
	color: var(--wp--preset--color--blanc-casse);
	transform: translateX(3px);
}

.sp-contact-relance-liens > .sp-lien-fleche a:focus-visible {
	outline: 2px solid var(--wp--preset--color--sarcelle);
	outline-offset: 4px;
}

@media (max-width: 781px) {
	.sp-contact-relance-liens > .sp-lien-fleche {
		width: 100%;
	}
}

/* ---------- Contact 0.8.6 : hero « Votre projet » ---------- */

/* Composition éditoriale : le noyau « Votre projet » et six mots-clés reliés
 * par des traits fins. Repère commun 100 × 80 : les positions des mots-clés
 * (en %) correspondent aux coordonnées des traits (SVG posé par
 * animations.js ; sans script, les mêmes traits en image de fond).
 * Toutes les animations de ce bloc sont préfixées « sp-constellation- » :
 * aucune ne peut remplacer une animation de l'accueil. */
.sp-contact-constellation {
	margin: 0;
	position: relative;
}

@media (max-width: 781px) {
	/* Mobile : l'introduction cite déjà ces mots ; on va droit au formulaire. */
	.sp-contact-constellation {
		display: none;
	}
}

@media (min-width: 1024px) {
	/* Colonne droite plus large pour la constellation. Les rapports sont choisis
	 * pour que le titre tienne sur deux lignes même avant le chargement de la
	 * police (pas de décalage) : 1,35 / 1 sous 1024 px, 1,2 / 1 jusqu'à
	 * 1199 px, 1,12 / 1 au-delà. */
	.sp-contact-hero-grille {
		grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
	}
}

@media (min-width: 1200px) {
	.sp-contact-hero-grille {
		column-gap: 3.5rem;
		grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr);
	}
}

@media (min-width: 782px) {
	.sp-contact-constellation {
		aspect-ratio: 100 / 80;
		justify-self: end;
		max-width: 36rem;
		width: 100%;
	}

	/* Repli sans script : les mêmes traits en image de fond. */
	.sp-contact-constellation::before {
		background: center / 100% 100% no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 80'%3E%3Cpath d='M38 31.9L19 19M59.7 31L78 14M68.8 41.4L89 43M31.7 42.9L12 46M57.6 49.6L72 68M42.2 49.6L28 67' fill='none' stroke='%23BAF8E6' stroke-opacity='.3' stroke-width='.18'/%3E%3C/svg%3E");
		content: "";
		inset: 0;
		pointer-events: none;
		position: absolute;
	}

	.sp-contact-constellation.sp-constellation-vive::before {
		display: none;
	}

	.sp-constellation-svg {
		height: 100%;
		inset: 0;
		overflow: visible;
		pointer-events: none;
		position: absolute;
		width: 100%;
	}

	/* Traits : épaisseur en unités du repère (≈ 1 px à 1440 px). */
	.sp-constellation-trait {
		fill: none;
		stroke-linecap: round;
		stroke-width: 0.18;
		transition: stroke-width 0.4s ease, opacity 0.4s ease;
	}

	/* Traînée d'une particule : court segment lumineux sur le trait. */
	.sp-trainee {
		fill: none;
		stroke: var(--wp--preset--color--menthe);
		stroke-linecap: round;
		stroke-opacity: 0.5;
		stroke-width: 0.3;
	}

	.sp-particule-coeur {
		fill: #f4fffb;
	}

	.sp-flux-retour .sp-particule-coeur {
		fill: var(--wp--preset--color--menthe);
		opacity: 0.45;
	}

	/* Survol d'un mot-clé : sa branche devient plus lisible. */
	.sp-branche.est-active .sp-constellation-trait {
		stroke: rgb(186 248 230 / 0.62);
		stroke-width: 0.26;
	}

	.sp-branche.est-active .sp-trainee {
		stroke-opacity: 0.8;
	}

	.sp-constellation-points circle {
		fill: var(--wp--preset--color--menthe);
		opacity: 0.5;
	}

	/* Noyau : petite capitale « Votre », grand « projet » en italique. */
	.sp-contact-constellation > .sp-constellation-noyau {
		color: var(--wp--preset--color--gris-clair);
		font-size: 0.7rem;
		font-weight: 700;
		left: 50%;
		letter-spacing: 0.28em;
		line-height: 1;
		margin: 0;
		padding-left: 0.28em;
		position: absolute;
		text-align: center;
		text-transform: uppercase;
		top: 50%;
		transform: translate(-50%, -50%);
		white-space: nowrap;
	}

	.sp-constellation-noyau em {
		color: var(--wp--preset--color--menthe);
		display: block;
		font-family: var(--wp--preset--font-family--literata);
		font-size: clamp(2.05rem, 1.1rem + 2vw, 3.1rem);
		font-style: italic;
		font-weight: 400;
		letter-spacing: -0.02em;
		line-height: 1;
		margin: 0.42rem 0 0 -0.28em;
		text-shadow: 0 0 28px rgb(186 248 230 / 0.25);
		text-transform: none;
	}

	/* Lueur sous le noyau : c'est de là que tout part. */
	.sp-constellation-noyau::before {
		background:
			radial-gradient(closest-side, rgb(186 248 230 / 0.22), rgb(186 248 230 / 0.07) 55%, rgb(186 248 230 / 0)),
			radial-gradient(closest-side, rgb(26 107 108 / 0.38), rgb(26 107 108 / 0));
		content: "";
		inset: -3.8rem -3.4rem;
		pointer-events: none;
		position: absolute;
		z-index: -1;
	}

	.sp-contact-constellation > .sp-constellation-liste {
		inset: 0;
		list-style: none;
		margin: 0;
		padding: 0;
		position: absolute;
	}

	/* Mots-clés : capsules sombres et fines (elles masquent le bout des traits). */
	.sp-constellation-liste > li {
		align-items: center;
		background: rgb(21 37 57 / 0.95);
		border: 1px solid rgb(186 248 230 / 0.17);
		border-radius: 999px;
		box-shadow: 0 12px 26px -16px rgb(0 0 0 / 0.8);
		color: #e6edf2;
		display: inline-flex;
		font-size: clamp(0.75rem, 0.58rem + 0.33vw, 0.875rem);
		font-weight: 600;
		gap: 0.55rem;
		left: var(--x);
		letter-spacing: 0.01em;
		line-height: 1;
		margin: 0;
		padding: 0.6rem 1rem 0.6rem 0.82rem;
		position: absolute;
		top: var(--y);
		transform: translate(-50%, -50%);
		white-space: nowrap;
	}

	.sp-constellation-liste > li::before {
		background: var(--wp--preset--color--menthe);
		border-radius: 50%;
		box-shadow: 0 0 8px rgb(186 248 230 / 0.6);
		content: "";
		flex: none;
		height: 5px;
		width: 5px;
	}

	/* Position, profondeur (parallaxe), amplitude et durée du flottement. */
	.sp-constellation-liste > li:nth-child(1) { --x: 19%; --y: 23.75%; --prof: 3px; --fx: 3px; --fy: -4px; --dur: 9.5s; --del: -2s; }
	.sp-constellation-liste > li:nth-child(2) { --x: 78%; --y: 17.5%; --prof: 2px; --fx: -3px; --fy: 4px; --dur: 12.5s; --del: -7s; }
	.sp-constellation-liste > li:nth-child(3) { --x: 89%; --y: 53.75%; --prof: 4px; --fx: -3px; --fy: -5px; --dur: 10.5s; --del: -4s; }
	.sp-constellation-liste > li:nth-child(4) { --x: 12%; --y: 57.5%; --prof: 3px; --fx: 4px; --fy: 3px; --dur: 13s; --del: -9s; }
	.sp-constellation-liste > li:nth-child(5) { --x: 72%; --y: 85%; --prof: 4px; --fx: -4px; --fy: -3px; --dur: 11.5s; --del: -1s; }
	.sp-constellation-liste > li:nth-child(6) { --x: 28%; --y: 83.75%; --prof: 2px; --fx: 3px; --fy: -5px; --dur: 14s; --del: -5s; }
}

@media (min-width: 782px) and (hover: hover) and (pointer: fine) {
	.sp-constellation-liste > li:hover {
		background-color: rgb(29 51 76 / 0.97);
		border-color: rgb(186 248 230 / 0.42);
		color: var(--wp--preset--color--blanc-casse);
	}
}

@keyframes sp-constellation-flotte {
	to {
		translate: var(--fx) var(--fy);
	}
}

@keyframes sp-constellation-points {
	from {
		opacity: 0.28;
	}

	to {
		opacity: 0.75;
	}
}

@keyframes sp-constellation-lueur {
	from {
		opacity: 0.8;
	}

	to {
		opacity: 1;
	}
}

/* Réaction d'un mot-clé à l'arrivée d'une particule (≈ 1,1 s par cycle). */
@keyframes sp-constellation-arrivee {
	0%,
	100% {
		border-color: rgb(186 248 230 / 0.17);
		box-shadow: 0 12px 26px -16px rgb(0 0 0 / 0.8);
		scale: 1;
	}

	3% {
		border-color: rgb(186 248 230 / 0.5);
		box-shadow: 0 12px 26px -16px rgb(0 0 0 / 0.8), 0 0 0 4px rgb(186 248 230 / 0.06), 0 0 22px rgb(186 248 230 / 0.2);
		scale: 1.015;
	}

	11% {
		border-color: rgb(186 248 230 / 0.17);
		box-shadow: 0 12px 26px -16px rgb(0 0 0 / 0.8);
		scale: 1;
	}
}

@media (prefers-reduced-motion: no-preference) and (min-width: 782px) {
	/* Flottement lent et désynchronisé (9,5 à 14 s, 3 à 5 px). */
	.sp-constellation-liste > li {
		animation: sp-constellation-flotte var(--dur) ease-in-out var(--del) infinite alternate;
	}

	.sp-constellation-flux .sp-constellation-liste > li {
		animation:
			sp-constellation-flotte var(--dur) ease-in-out var(--del) infinite alternate,
			sp-constellation-arrivee var(--sp-periode, 11s) cubic-bezier(0.3, 0, 0.2, 1) var(--sp-arrivee, 2s) infinite;
	}

	.sp-constellation-points {
		animation: sp-constellation-points 7s ease-in-out infinite alternate;
	}

	/* Respiration très lente de la lueur du noyau (le texte ne bouge pas). */
	.sp-constellation-noyau::before {
		animation: sp-constellation-lueur 9s ease-in-out infinite alternate;
	}

	.sp-en-pause .sp-constellation-liste > li,
	.sp-en-pause .sp-constellation-points,
	.sp-en-pause .sp-constellation-noyau::before {
		animation-play-state: paused;
	}

	/* Micro-parallaxe au pointeur (ordinateur ; variables posées par animations.js,
	 * lissées par la transition). */
	.sp-constellation-liste > li,
	.sp-contact-constellation > .sp-constellation-noyau {
		transition: transform 1.2s cubic-bezier(0.2, 0.7, 0.2, 1), opacity 0.7s ease, scale 0.7s var(--sp-ease), background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
	}

	.sp-constellation-liste > li {
		transform: translate(-50%, -50%) translate3d(calc(var(--sp-px, 0) * var(--prof)), calc(var(--sp-py, 0) * var(--prof)), 0);
	}

	.sp-contact-constellation > .sp-constellation-noyau {
		transform: translate(-50%, -50%) translate3d(calc(var(--sp-px, 0) * 1px), calc(var(--sp-py, 0) * 1px), 0);
	}

	/* Entrée (≈ 1,6 s) : état de départ posé dès le premier rendu (classe
	 * « sp-anim », retirée si le script échoue), déclenchée par animations.js au
	 * premier affichage. Le noyau, puis les traits
	 * se dessinent depuis le centre, puis les mots-clés un à un ; les flux de
	 * particules ne partent qu'ensuite (premier départ à 1,9 s). */
	.sp-anim .sp-contact-constellation:not(.sp-constellation-entree) > .sp-constellation-noyau {
		opacity: 0;
		scale: 0.94;
	}

	.sp-anim .sp-contact-constellation:not(.sp-constellation-entree) .sp-constellation-trait {
		stroke-dasharray: 1;
		stroke-dashoffset: 1;
	}

	.sp-anim .sp-contact-constellation:not(.sp-constellation-entree) .sp-constellation-liste > li {
		opacity: 0;
		scale: 0.92;
	}

	.sp-constellation-entree > .sp-constellation-noyau {
		transition-delay: 0s, 0.05s, 0.05s, 0s, 0s, 0s;
	}

	.sp-constellation-entree .sp-constellation-trait {
		stroke-dasharray: 1;
		stroke-dashoffset: 0;
		transition: stroke-dashoffset 0.75s var(--sp-ease) calc(0.3s + var(--i, 0) * 0.07s), stroke-width 0.4s ease;
	}

	.sp-constellation-entree .sp-constellation-liste > li:nth-child(1) { transition-delay: 0s, 0.65s, 0.65s, 0s, 0s, 0s; }
	.sp-constellation-entree .sp-constellation-liste > li:nth-child(2) { transition-delay: 0s, 0.72s, 0.72s, 0s, 0s, 0s; }
	.sp-constellation-entree .sp-constellation-liste > li:nth-child(3) { transition-delay: 0s, 0.79s, 0.79s, 0s, 0s, 0s; }
	.sp-constellation-entree .sp-constellation-liste > li:nth-child(4) { transition-delay: 0s, 0.86s, 0.86s, 0s, 0s, 0s; }
	.sp-constellation-entree .sp-constellation-liste > li:nth-child(5) { transition-delay: 0s, 0.93s, 0.93s, 0s, 0s, 0s; }
	.sp-constellation-entree .sp-constellation-liste > li:nth-child(6) { transition-delay: 0s, 1s, 1s, 0s, 0s, 0s; }
}

/* ---------- Contact 0.8.4 : formulaire dominant, panneau compact ---------- */

@media (min-width: 1024px) {
	.sp-contact-grille {
		grid-template-columns: minmax(0, 2.05fr) minmax(0, 1fr);
		position: relative;
	}

	/* Le panneau s'arrête naturellement : il n'occupe plus toute la hauteur. */
	.wp-block-group.sp-contact-demarrer.has-background {
		align-self: start;
		position: relative;
		z-index: 1;
	}

	/* Sous le panneau, dans la carte : trame de points et arc très légers. */
	.sp-contact-grille::after {
		background:
			radial-gradient(circle at 100% 100%, transparent 139px, rgb(26 107 108 / 0.16) 140px, transparent 141.5px),
			radial-gradient(circle, rgb(26 107 108 / 0.2) 1px, transparent 1.6px) 0 0 / 16px 16px;
		border-bottom-right-radius: calc(var(--sp-r-xl) - 0.75rem);
		bottom: 0;
		content: "";
		height: 38%;
		-webkit-mask-image: radial-gradient(120% 100% at 100% 100%, #000 20%, transparent 75%);
		mask-image: radial-gradient(120% 100% at 100% 100%, #000 20%, transparent 75%);
		pointer-events: none;
		position: absolute;
		right: 0;
		width: calc((100% - clamp(1.25rem, 3vw, 2.25rem)) / 3.05);
	}
}

.wp-block-group.sp-contact-demarrer.has-background {
	padding: clamp(1.25rem, 2vw, 1.6rem);
}

.sp-contact-demarrer-titre {
	font-size: clamp(1.15rem, 1rem + 0.35vw, 1.3rem);
}

.sp-contact-demarrer-titre::before {
	margin-bottom: 0.85rem;
}

.sp-contact-demarrer > p:not(.sp-demarrer-note) {
	font-size: 0.9rem;
	line-height: 1.5;
	margin-top: 0.45rem;
}

.sp-demarrer-liste {
	border-top: 1px solid rgb(255 255 255 / 0.1);
	flex: none;
	justify-content: flex-start;
	margin-top: 1rem !important;
}

.sp-demarrer-liste > li {
	border-top: 0;
	font-size: 0.9rem;
	gap: 0.6rem;
	line-height: 1.4;
	padding: 0.62rem 0;
	position: relative;
}

.sp-demarrer-liste > li::before {
	flex: 0 0 1.45rem;
	font-size: 0.98rem;
}

/* Séparateur fin sous chaque ligne. */
.sp-demarrer-liste > li::after {
	background: rgb(255 255 255 / 0.1);
	bottom: 0;
	content: "";
	height: 1px;
	left: 0;
	position: absolute;
	right: 0;
	transform-origin: left center;
}

/* Note finale : dans le fil du panneau, sans encart. */
.sp-contact-demarrer > .sp-demarrer-note {
	background: none;
	border: 0;
	border-radius: 0;
	color: #c9d3db;
	font-size: 0.84rem;
	line-height: 1.5;
	margin-top: 0.9rem;
	padding: 0;
	text-wrap: pretty;
}

.sp-demarrer-note strong {
	display: block;
	margin-bottom: 0.1rem;
}

/* Entrée des lignes : numéro, texte, puis séparateur ; la note en dernier
 * (≈ 0,9 s de séquence après l'apparition du panneau). */
@media (prefers-reduced-motion: no-preference) {
	.sp-demarrer-liste > li:nth-child(1) { --i: 0; }
	.sp-demarrer-liste > li:nth-child(2) { --i: 1; }
	.sp-demarrer-liste > li:nth-child(3) { --i: 2; }
	.sp-demarrer-liste > li:nth-child(4) { --i: 3; }

	.sp-anim .sp-contact-demarrer.sp-apparait .sp-demarrer-liste > li {
		color: rgb(255 254 250 / 0);
		transition: color 0.3s ease;
	}

	.sp-anim .sp-contact-demarrer.sp-apparait .sp-demarrer-liste > li::before {
		opacity: 0;
		transition: opacity 0.25s ease, translate 0.3s var(--sp-ease);
		translate: -6px 0;
	}

	.sp-anim .sp-contact-demarrer.sp-apparait .sp-demarrer-liste > li::after {
		transform: scaleX(0);
		transition: transform 0.3s var(--sp-ease);
	}

	.sp-anim .sp-contact-demarrer.sp-apparait > .sp-demarrer-note {
		opacity: 0;
		transition: opacity 0.4s ease;
	}

	.sp-anim .sp-contact-demarrer.est-visible .sp-demarrer-liste > li {
		color: var(--wp--preset--color--blanc-casse);
		transition-delay: calc(0.42s + var(--i) * 0.2s);
	}

	.sp-anim .sp-contact-demarrer.est-visible .sp-demarrer-liste > li::before {
		opacity: 1;
		transition-delay: calc(0.35s + var(--i) * 0.2s);
		translate: none;
	}

	.sp-anim .sp-contact-demarrer.est-visible .sp-demarrer-liste > li::after {
		transform: none;
		transition-delay: calc(0.47s + var(--i) * 0.2s);
	}

	.sp-anim .sp-contact-demarrer.est-visible > .sp-demarrer-note {
		opacity: 1;
		transition-delay: 1.2s;
	}
}

/* Panneau compact : anneaux décoratifs réduits pour ne pas croiser la note. */
.wp-block-group.sp-contact-demarrer.has-background {
	background-image:
		radial-gradient(circle at 118% 112%, transparent 89px, rgb(186 248 230 / 0.12) 90px, transparent 91.5px),
		radial-gradient(circle at 118% 112%, transparent 55px, rgb(186 248 230 / 0.09) 56px, transparent 57.5px),
		radial-gradient(90% 60% at 100% 0%, rgb(186 248 230 / 0.12), rgb(186 248 230 / 0) 70%),
		linear-gradient(180deg, rgb(255 255 255 / 0.03), rgb(255 255 255 / 0));
}

/* ---------- Contact 0.8.4 : case de confidentialité (Fluent Forms) ---------- */

.sp-principal .fluentform .ff-el-form-check {
	margin: 0;
}

.sp-principal .fluentform .ff-el-form-check-label {
	align-items: flex-start;
	color: #46525b;
	cursor: pointer;
	display: flex;
	font-size: 0.86rem;
	font-weight: 500;
	gap: 0.7rem;
	line-height: 1.5;
}

.sp-principal .fluentform .ff-el-form-check-label > * {
	margin: 0;
}

.sp-principal .fluentform .ff_tc_checkbox {
	display: inline-flex;
	flex: none;
	padding-top: 0.12rem;
}

.sp-principal .fluentform input.ff-el-form-check-input[type="checkbox"] {
	-webkit-appearance: none;
	appearance: none;
	background: var(--sp-champ-fond) center / 12px 12px no-repeat;
	border: 1.5px solid rgb(16 28 44 / 0.32);
	border-radius: 5px;
	cursor: pointer;
	flex: none;
	height: 1.15rem;
	margin: 0;
	transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
	width: 1.15rem;
}

.sp-principal .fluentform input.ff-el-form-check-input[type="checkbox"]:hover {
	border-color: var(--wp--preset--color--sarcelle);
}

.sp-principal .fluentform input.ff-el-form-check-input[type="checkbox"]:checked {
	background-color: var(--wp--preset--color--sarcelle);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%23FFFEFA' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 6.2l2.3 2.3 4.7-4.9'/%3E%3C/svg%3E");
	border-color: var(--wp--preset--color--sarcelle);
}

.sp-principal .fluentform input.ff-el-form-check-input[type="checkbox"]:focus-visible {
	box-shadow: 0 0 0 4px rgb(26 107 108 / 0.18);
	outline: none;
}

.sp-principal .fluentform .ff-el-is-error input.ff-el-form-check-input[type="checkbox"] {
	border-color: var(--fluentform-danger);
}

/* Fluent Forms dispose la case et son texte en cellules de tableau
 * (table-row / table-cell) : l'écart passe donc par une marge du texte. */
.sp-principal .fluentform .ff-el-tc .ff_tc_checkbox {
	vertical-align: top;
}

.sp-principal .fluentform .ff-el-tc .ff_t_c {
	padding-left: 0.7rem;
	vertical-align: top;
}

/* Message d'erreur de la case : dans le flux, aligné sur le texte (il peut
 * tenir sur deux lignes sur mobile). Il disparaît dès que la case est cochée,
 * donc avant le clic sur « Envoyer » : pas de bouton qui se dérobe. */
.sp-principal .fluentform .ff-el-group:has(> .ff-el-form-check) > .error {
	margin-top: 0.45rem;
	padding-left: calc(1.15rem + 0.7rem);
	position: static;
}

/* ---------- Contact 0.8.5 : matière de la grande carte ---------- */

/* Fond clair nuancé : lumière menthe très pâle en haut à gauche, reflet menthe
 * en bas à droite, léger réchauffement vers le bas. */
.wp-block-group.sp-contact-carte.has-background {
	background-image:
		radial-gradient(60% 45% at 0% 0%, rgb(230 245 239 / 0.85), rgb(230 245 239 / 0) 70%),
		radial-gradient(55% 50% at 100% 100%, rgb(186 248 230 / 0.26), rgb(186 248 230 / 0) 72%),
		linear-gradient(180deg, rgb(255 254 250 / 0) 35%, rgb(240 236 226 / 0.6));
	isolation: isolate;
}

/* Trame très fine, visible surtout dans la moitié droite, en fondu. */
.wp-block-group.sp-contact-carte.has-background::before {
	background-image:
		linear-gradient(rgb(16 28 44 / 0.045) 1px, transparent 1px),
		linear-gradient(90deg, rgb(16 28 44 / 0.045) 1px, transparent 1px);
	background-position: -1px -1px;
	background-size: 28px 28px;
	border-radius: inherit;
	content: "";
	inset: 0;
	-webkit-mask-image: radial-gradient(75% 85% at 100% 100%, #000 10%, transparent 72%);
	mask-image: radial-gradient(75% 85% at 100% 100%, #000 10%, transparent 72%);
	pointer-events: none;
	position: absolute;
	z-index: -1;
}

/* Champs blancs : ils se détachent de la carte nuancée. */
.sp-contact-carte .fluentform {
	--sp-champ-fond: #fffefc;
}

.sp-contact-carte .fluentform .ff-el-form-control {
	box-shadow: 0 1px 0 rgb(16 28 44 / 0.03);
}

/* Respiration entre la note de confidentialité et le bouton. */
.sp-principal .sp-contact-carte .fluentform .ff-el-group:has(> .ff-el-form-check) {
	margin-bottom: 1.5rem;
}

@media (min-width: 1024px) {
	/* Panneau posé sur la carte (ombre douce). */
	.wp-block-group.sp-contact-demarrer.has-background {
		box-shadow: 0 34px 56px -38px rgb(16 28 44 / 0.6);
	}

	/* Sous le panneau : composition dessinée (arcs fins, nœud menthe relié à un
	 * point) qui reprend le vocabulaire de la constellation du hero, posée sur la
	 * trame très fine de la carte. */
	.sp-contact-grille::after {
		background:
			right bottom / 340px 340px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 340 340' fill='none'%3E%3Ccircle cx='340' cy='340' r='250' stroke='%231A6B6C' stroke-opacity='.24'/%3E%3Ccircle cx='340' cy='340' r='172' stroke='%231A6B6C' stroke-opacity='.3' stroke-dasharray='2 5'/%3E%3Cpath d='M118 225L200 262' stroke='%231A6B6C' stroke-opacity='.25'/%3E%3Ccircle cx='118' cy='225' r='9' fill='%23BAF8E6' fill-opacity='.45'/%3E%3Ccircle cx='118' cy='225' r='3.5' fill='%231A6B6C'/%3E%3Ccircle cx='200' cy='262' r='2.5' fill='%231A6B6C' fill-opacity='.55'/%3E%3Ccircle cx='250' cy='118' r='2' fill='%231A6B6C' fill-opacity='.4'/%3E%3C/svg%3E");
		height: 44%;
		-webkit-mask-image: none;
		mask-image: none;
	}
}

/* ---------- En-tête 0.8.6 : bouton « Parlons de votre projet » ---------- */

/* Plus doux et plus fin : rayon de 10 px (entre les 4 px d'origine et les
 * 12 px des boutons du hero de l'accueil), 38 px de haut dans une barre de
 * 64 px, texte centré optiquement. */
.sp-entete-studio .sp-bouton-entete-studio .wp-block-button__link {
	align-items: center;
	border-radius: 10px;
	box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.45), 0 0 0 0 rgb(186 248 230 / 0);
	display: inline-flex;
	font-size: 0.8125rem;
	font-weight: 700;
	justify-content: center;
	letter-spacing: 0.005em;
	line-height: 1;
	min-height: 38px;
	padding: 0 1.1rem;
	transition: transform 0.22s var(--sp-ease), box-shadow 0.22s ease, background-color 0.22s ease;
}

.sp-entete-studio .sp-bouton-entete-studio .wp-block-button__link:hover {
	background-color: #d2fbef !important;
	box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.55), 0 8px 20px -10px rgb(186 248 230 / 0.65);
	transform: translateY(-1px);
}

.sp-entete-studio .sp-bouton-entete-studio .wp-block-button__link:active {
	transform: translateY(0);
}

.sp-entete-studio .sp-bouton-entete-studio .wp-block-button__link:focus-visible {
	box-shadow: 0 0 0 2px var(--wp--preset--color--encre), 0 0 0 4px var(--wp--preset--color--menthe);
	outline: none;
}

@media (prefers-reduced-motion: reduce) {
	.sp-entete-studio .sp-bouton-entete-studio .wp-block-button__link,
	.sp-entete-studio .sp-bouton-entete-studio .wp-block-button__link:hover {
		transform: none;
		transition: box-shadow 0.2s ease, background-color 0.2s ease;
	}
}

/* ---------- Contact 0.8.6 : mention de confidentialité (texte) ----------
 * Bloc « HTML » de Fluent Forms (ff-custom_html) : même ton que les autres
 * petits textes de la carte ; le lien reste bien identifiable. */
.sp-principal .fluentform .ff-custom_html {
	color: #46525b;
	font-size: 0.86rem;
	line-height: 1.55;
	margin-bottom: 1.5rem;
}

.sp-principal .fluentform .ff-custom_html > :first-child {
	margin-top: 0;
}

.sp-principal .fluentform .ff-custom_html > :last-child {
	margin-bottom: 0;
}

.sp-principal .fluentform .ff-custom_html a {
	color: var(--wp--preset--color--sarcelle);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.18em;
}

.sp-principal .fluentform .ff-custom_html a:hover {
	color: var(--wp--preset--color--encre);
}

/* ---------- Pages internes (0.8.7) ----------
 * Modèles « Studio Peyral – Page interne » (page-interne.html), « Par défaut »
 * (page.html) et variantes : en-tête et pied de page de la charte, contenu de
 * la page entre les deux. Les compositions ne contiennent que le corps de page.
 * Contenu éditorial (texte) : de l'air sous l'en-tête et avant le pied de page.
 * Contenu qui commence ou finit par une section pleine largeur : aucune marge
 * (une introduction sombre remonte alors sous l'en-tête, comme sur l'accueil). */
.sp-page-interne > .wp-block-post-content {
	padding-bottom: var(--wp--preset--spacing--80);
	padding-top: var(--wp--preset--spacing--70);
}

.sp-page-interne > .wp-block-post-content:has(> .alignfull:first-child) {
	padding-top: 0;
}

.sp-page-interne > .wp-block-post-content:has(> .alignfull:last-child) {
	padding-bottom: 0;
}

/* Variante « avec titre automatique ». */
.sp-page-interne-tete {
	padding-top: var(--wp--preset--spacing--70);
}

.sp-page-interne-tete > .wp-block-post-title {
	margin: 0;
}

.sp-page-interne-titre > .wp-block-post-content {
	padding-top: var(--wp--preset--spacing--40);
}

/* ---------- Pages légales (0.9.0) ----------
 * Système générique, réutilisable pour les mentions légales, la politique de
 * confidentialité, la politique de cookies, etc. : introduction sombre compacte
 * (.sp-legal-hero), mise en page éditoriale (.sp-legal-layout) avec sommaire
 * (.sp-legal-sommaire) et rubriques numérotées (.sp-legal-section).
 * Les numéros sont automatiques (compteurs CSS) : ajouter, retirer ou déplacer
 * une rubrique renumérote le sommaire et le contenu. */

/* Introduction : plus compacte que celles de l'accueil et de Contact. */
.sp-principal > .wp-block-post-content > .sp-legal-hero:first-child {
	padding-top: calc(var(--sp-h-entete) + var(--wp--preset--spacing--60)) !important;
}

/* Halo fixe : aucune animation permanente sur une page légale. */
.sp-legal-hero::after {
	animation: none;
	opacity: 0.7;
}

.sp-legal-hero-grille {
	position: relative;
}

.sp-legal-hero .sp-hero-texte > * {
	margin-block: 0;
}

.sp-legal-hero .sp-hero-titre {
	margin-top: 1rem;
	max-width: 9ch;
}

.sp-legal-hero .sp-chapo {
	font-size: clamp(1.05rem, 0.98rem + 0.3vw, 1.2rem);
	line-height: 1.55;
	margin-top: 1.3rem;
	max-width: 36rem;
}

.sp-legal-hero .sp-legal-maj {
	align-items: center;
	display: flex;
	font-size: 0.875rem;
	gap: 0.6rem;
	margin-top: 1.4rem;
}

.sp-legal-maj::before {
	background: var(--wp--preset--color--menthe);
	border-radius: 50%;
	box-shadow: 0 0 0 4px rgb(186 248 230 / 0.12);
	content: "";
	flex: none;
	height: 6px;
	width: 6px;
}

/* Cartouche d'identification (introduction des pages légales) : pièce
 * typographique ouverte, façon colophon (filet menthe, repères A · B · C, filets
 * fins, folio décoratif, filigrane « SP »), contenu réel modifiable dans
 * l'éditeur. Secondaire par
 * rapport au titre : à droite sur grand écran, rangée compacte sur tablette,
 * masqué sur mobile (les mêmes informations figurent dans la page). */
.sp-legal-hero-grille {
	display: grid;
	gap: 2.25rem;
	grid-template-columns: minmax(0, 1fr);
}

.sp-legal-hero-grille > * {
	margin: 0 !important;
}

.sp-legal-cartouche {
	position: relative;
}

.sp-legal-cartouche > * {
	margin-block: 0;
}

.sp-legal-cartouche-titre {
	align-items: center;
	color: var(--wp--preset--color--menthe);
	display: flex;
	font-size: 0.7rem;
	font-weight: 700;
	gap: 0.9rem;
	letter-spacing: 0.2em;
	text-transform: uppercase;
}

.sp-legal-cartouche-titre::before {
	background: linear-gradient(90deg, rgb(186 248 230 / 0.35), rgb(186 248 230 / 0.06));
	content: "";
	flex: 1;
	height: 1px;
	order: 1;
}

.sp-legal-cartouche-titre::after {
	color: rgb(186 248 230 / 0.55);
	content: "Folio 01";
	content: "Folio 01" / "";
	font-size: 0.62rem;
	letter-spacing: 0.22em;
	order: 2;
}

.sp-legal-cartouche-liste {
	counter-reset: sp-legal-cartouche;
	list-style: none;
	margin: 0.9rem 0 0;
	padding: 0;
}

.sp-legal-cartouche-liste > li {
	align-items: baseline;
	border-bottom: 1px solid rgb(255 255 255 / 0.1);
	color: var(--wp--preset--color--blanc-casse);
	counter-increment: sp-legal-cartouche;
	display: grid;
	font-size: clamp(1.15rem, 0.9rem + 0.6vw, 1.45rem);
	font-weight: 600;
	gap: 0.35rem 1.1rem;
	align-content: start;
	grid-template-columns: 1.8rem minmax(0, 1fr);
	letter-spacing: -0.015em;
	line-height: 1.25;
	margin: 0;
	padding: 1.05rem 0;
}

/* Numéro du repère. */
.sp-legal-cartouche-liste > li::before {
	color: var(--wp--preset--color--menthe);
	content: counter(sp-legal-cartouche, upper-alpha);
	content: counter(sp-legal-cartouche, upper-alpha) / "";
	font-family: var(--wp--preset--font-family--literata);
	font-size: 0.85rem;
	font-style: italic;
	font-weight: 400;
	grid-row: 1 / span 2;
	letter-spacing: 0;
	padding-top: 0.1rem;
}

/* Libellé en micro-capitales au-dessus de la valeur. */
.sp-legal-cartouche-liste > li > strong {
	color: #9fb0bd;
	font-size: 0.68rem;
	font-weight: 700;
	grid-column: 2;
	letter-spacing: 0.18em;
	line-height: 1.2;
	text-transform: uppercase;
}

/* Ligne secondaire sous une valeur (saisie en italique dans l'éditeur). */
.sp-legal-cartouche-liste > li > br {
	display: none;
}

.sp-legal-cartouche-liste > li > em {
	color: #9fb0bd;
	font-size: 0.8rem;
	font-style: normal;
	font-weight: 500;
	grid-column: 2;
	letter-spacing: 0.02em;
	line-height: 1.4;
}

@media (max-width: 781px) {
	.sp-legal-cartouche {
		display: none;
	}
}

/* Tablette : rangée de trois repères sous l'introduction. */
@media (min-width: 782px) and (max-width: 1023px) {
	.sp-legal-cartouche {
		border-top: 1px solid rgb(255 255 255 / 0.12);
		padding-top: 1.1rem;
	}

	.sp-legal-cartouche-titre {
		display: none;
	}

	.sp-legal-cartouche-liste {
		display: grid;
		gap: 1.5rem;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		margin: 0;
	}

	.sp-legal-cartouche-liste > li {
		border-bottom: 0;
		font-size: 1rem;
		grid-template-columns: 1.5rem minmax(0, 1fr);
		padding: 0;
	}
}

/* Grand écran : à droite du titre, avec filet vertical et numérotation fantôme. */
@media (min-width: 1024px) {
	.sp-legal-hero-grille {
		align-items: center;
		gap: clamp(3rem, 6vw, 6rem);
		grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
	}

	.sp-legal-cartouche {
		isolation: isolate;
		justify-self: end;
		padding: 0.4rem 0 0.4rem 2.2rem;
		width: min(100%, 33rem);
	}

	/* Filet vertical menthe (se dessine à l'entrée). */
	.sp-legal-cartouche::before {
		background: linear-gradient(180deg, var(--wp--preset--color--menthe) 0 2.6rem, rgb(186 248 230 / 0.28) 2.6rem 100%);
		bottom: 0;
		content: "";
		left: 0;
		position: absolute;
		top: 0;
		transform-origin: top center;
		width: 1px;
	}

	/* Filigrane éditorial « SP » : très grand, très léger, coupé par le bas de
	 * l'introduction ; il donne de la profondeur sans se lire comme un logo. */
	.sp-legal-cartouche::after {
		color: rgb(255 255 255 / 0.016);
		content: "SP";
		content: "SP" / "";
		font-size: clamp(17rem, 9rem + 12vw, 26rem);
		font-weight: 800;
		letter-spacing: -0.08em;
		line-height: 0.78;
		pointer-events: none;
		position: absolute;
		right: -9rem;
		top: 16%;
		-webkit-text-stroke: 1px rgb(255 255 255 / 0.035);
		white-space: nowrap;
		z-index: -1;
	}
}

/* Entrée (≈ 1 s, une seule fois) : le filigrane apparaît, le filet se dessine,
 * puis A, B et C (libellé puis valeur). Aucune animation ensuite. État de départ posé dès le premier
 * rendu (classe « sp-anim », retirée si le script échoue). */
@media (prefers-reduced-motion: no-preference) {
	.sp-legal-cartouche-liste > li:nth-child(1) { --i: 0; }
	.sp-legal-cartouche-liste > li:nth-child(2) { --i: 1; }
	.sp-legal-cartouche-liste > li:nth-child(3) { --i: 2; }

	.sp-anim .sp-legal-cartouche.sp-apparait {
		opacity: 1;
		transition: none;
		translate: none;
	}

	.sp-anim .sp-legal-cartouche:not(.est-visible)::before {
		transform: scaleY(0);
	}

	.sp-anim .sp-legal-cartouche:not(.est-visible)::after {
		opacity: 0;
	}

	.sp-anim .sp-legal-cartouche:not(.est-visible) > .sp-legal-cartouche-titre {
		opacity: 0;
	}

	.sp-anim .sp-legal-cartouche:not(.est-visible) .sp-legal-cartouche-liste > li {
		color: rgb(255 254 250 / 0);
	}

	.sp-anim .sp-legal-cartouche:not(.est-visible) .sp-legal-cartouche-liste > li > em {
		opacity: 0;
	}

	.sp-anim .sp-legal-cartouche:not(.est-visible) .sp-legal-cartouche-liste > li > strong,
	.sp-anim .sp-legal-cartouche:not(.est-visible) .sp-legal-cartouche-liste > li::before {
		opacity: 0;
		translate: 0 6px;
	}

	.sp-anim .sp-legal-cartouche.est-visible::after {
		transition: opacity 0.6s ease;
	}

	.sp-anim .sp-legal-cartouche.est-visible::before {
		transition: transform 0.5s var(--sp-ease) 0.1s;
	}

	.sp-anim .sp-legal-cartouche.est-visible > .sp-legal-cartouche-titre {
		transition: opacity 0.35s ease 0.15s;
	}

	.sp-anim .sp-legal-cartouche.est-visible .sp-legal-cartouche-liste > li > strong,
	.sp-anim .sp-legal-cartouche.est-visible .sp-legal-cartouche-liste > li::before {
		transition: opacity 0.3s ease calc(0.25s + var(--i) * 0.18s), translate 0.3s var(--sp-ease) calc(0.25s + var(--i) * 0.18s);
	}

	.sp-anim .sp-legal-cartouche.est-visible .sp-legal-cartouche-liste > li {
		transition: color 0.3s ease calc(0.33s + var(--i) * 0.18s);
	}

	.sp-anim .sp-legal-cartouche.est-visible .sp-legal-cartouche-liste > li > em {
		transition: opacity 0.3s ease calc(0.38s + var(--i) * 0.18s);
	}
}

/* Variante « Politique de confidentialité » (0.10.0) : même famille que le
 * cartouche des mentions légales (repères A · B · C, filets, entrée unique),
 * avec son propre folio et un filigrane typographique vertical « DATA »
 * (Literata, simple contour très pâle), coupé par le haut et le bas de l'introduction. */
.sp-legal-hero--confidentialite .sp-hero-titre {
	max-width: none;
}

.sp-legal-cartouche--confidentialite .sp-legal-cartouche-titre::after {
	content: "Folio 02";
	content: "Folio 02" / "";
}

@media (min-width: 1024px) {
	.sp-legal-cartouche--confidentialite::after {
		color: transparent;
		content: "D\A A\A T\A A";
		content: "D\A A\A T\A A" / "";
		font-family: var(--wp--preset--font-family--literata);
		font-size: clamp(6.5rem, 3rem + 5.5vw, 9.5rem);
		font-style: normal;
		font-weight: 400;
		letter-spacing: 0;
		line-height: 0.8;
		right: -6.5rem;
		text-align: center;
		top: 50%;
		translate: 0 -50%;
		white-space: pre;
		-webkit-text-stroke: 1px rgb(255 255 255 / 0.07);
	}
}

@media (min-width: 1024px) and (max-width: 1279px) {
	.sp-legal-cartouche--confidentialite::after {
		right: -3.5rem;
	}
}

/* Corps : fond ivoire, mise en page éditoriale. */
.wp-block-group.sp-legal.has-background {
	background-image: radial-gradient(45% 40% at 100% 0%, rgb(230 245 239 / 0.7), rgb(230 245 239 / 0) 100%);
	padding-block: clamp(3rem, 7vw, 6rem) clamp(4rem, 8vw, 7rem);
}

.sp-legal-layout {
	display: grid;
	gap: 2rem;
	grid-template-columns: minmax(0, 1fr);
}

.sp-legal-layout > * {
	margin: 0 !important;
}

@media (min-width: 1024px) {
	.sp-legal-layout {
		align-items: start;
		gap: clamp(3rem, 6vw, 6rem);
		grid-template-columns: minmax(0, 0.34fr) minmax(0, 1fr);
	}

	/* Sommaire collant, sous l'en-tête. */
	.sp-legal-sommaire {
		position: sticky;
		top: calc(var(--sp-h-entete) + 2.5rem);
	}

	/* Sommaire plus haut que la fenêtre (long sommaire, écran peu haut) : il
	 * défile seul au lieu de masquer ses derniers liens. La réserve de 4 px,
	 * compensée par une marge négative, garde le contour de focus visible sans
	 * rien décaler. */
	.sp-legal-layout > .sp-legal-sommaire {
		margin: 0 -4px -4px !important;
		max-height: calc(100vh - var(--sp-h-entete) - 3.5rem);
		overflow-y: auto;
		overscroll-behavior: contain;
		padding: 0 4px 4px;
		scrollbar-width: thin;
	}
}

/* ---------- Sommaire ---------- */

.sp-legal-sommaire-details {
	margin: 0;
}

.sp-legal-sommaire-details > summary {
	color: var(--wp--preset--color--sarcelle);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	list-style: none;
	text-transform: uppercase;
}

.sp-legal-sommaire-details > summary::-webkit-details-marker {
	display: none;
}

.sp-legal-sommaire-liste {
	--sp-ind-y: 0px;
	--sp-ind-h: 0px;
	border-left: 1px solid rgb(16 28 44 / 0.12);
	counter-reset: sp-legal-sommaire;
	list-style: none;
	margin: 1.1rem 0 0;
	padding: 0;
	position: relative;
}

/* Indicateur de la rubrique en cours : glisse le long du rail. */
.sp-legal-sommaire-liste::before {
	background: var(--wp--preset--color--sarcelle);
	border-radius: 2px;
	content: "";
	height: var(--sp-ind-h);
	left: -1.5px;
	opacity: 0;
	position: absolute;
	top: 0;
	transform: translateY(var(--sp-ind-y));
	width: 2px;
}

.sp-legal-sommaire-liste.a-un-actif::before {
	opacity: 1;
}

@media (prefers-reduced-motion: no-preference) {
	.sp-legal-sommaire-liste::before {
		transition: transform 0.45s var(--sp-ease), height 0.45s var(--sp-ease), opacity 0.3s ease;
	}
}

.sp-legal-sommaire-liste > li {
	counter-increment: sp-legal-sommaire;
	margin: 0;
}

.sp-legal-sommaire-liste a {
	align-items: baseline;
	border-radius: 6px;
	color: #52606a;
	display: flex;
	font-size: 0.92rem;
	gap: 0.75rem;
	line-height: 1.4;
	padding: 0.5rem 0.5rem 0.5rem 1.1rem;
	text-decoration: none;
	transition: color 0.25s ease;
}

.sp-legal-sommaire-liste a::before {
	color: #7b878f;
	content: counter(sp-legal-sommaire, decimal-leading-zero);
	flex: none;
	font-family: var(--wp--preset--font-family--literata);
	font-size: 0.85rem;
	font-style: italic;
	min-width: 1.4rem;
	transition: color 0.25s ease;
}

.sp-legal-sommaire-liste a:hover {
	color: var(--wp--preset--color--encre);
}

.sp-legal-sommaire-liste a:focus-visible {
	outline: 2px solid var(--wp--preset--color--sarcelle);
	outline-offset: 2px;
}

.sp-legal-sommaire-liste li.est-actif > a {
	color: var(--wp--preset--color--encre);
	font-weight: 600;
}

.sp-legal-sommaire-liste li.est-actif > a::before {
	color: var(--wp--preset--color--sarcelle);
}

/* Bloc « Sommaire » compact et repliable (tablette, mobile, et grand écran sans
 * JavaScript). */
.sp-legal-sommaire-details {
	background: #fffefc;
	border: 1px solid rgb(16 28 44 / 0.12);
	border-radius: var(--sp-r-s);
}

.sp-legal-sommaire-details > summary {
	align-items: center;
	cursor: pointer;
	display: flex;
	justify-content: space-between;
	min-height: 3rem;
	padding: 0.85rem 1.1rem;
}

.sp-legal-sommaire-details > summary::after {
	border-bottom: 1.8px solid currentColor;
	border-right: 1.8px solid currentColor;
	content: "";
	height: 7px;
	margin-right: 0.2rem;
	transform: translateY(-2px) rotate(45deg);
	width: 7px;
}

.sp-legal-sommaire-details[open] > summary::after {
	transform: translateY(2px) rotate(-135deg);
}

.sp-legal-sommaire-details > summary:focus-visible {
	border-radius: var(--sp-r-s);
	outline: 2px solid var(--wp--preset--color--sarcelle);
	outline-offset: 2px;
}

.sp-legal-sommaire-details > .sp-legal-sommaire-liste {
	margin: 0 1.1rem 1rem;
}

/* Grand écran, script actif : sommaire toujours déplié, « Sommaire » est un titre. */
@media (min-width: 1024px) {
	.sp-js .sp-legal-sommaire-details {
		background: none;
		border: 0;
		border-radius: 0;
	}

	.sp-js .sp-legal-sommaire-details > summary {
		cursor: default;
		display: block;
		min-height: 0;
		padding: 0;
		pointer-events: none;
	}

	.sp-js .sp-legal-sommaire-details > summary::after {
		display: none;
	}

	.sp-js .sp-legal-sommaire-details > .sp-legal-sommaire-liste {
		margin: 1.1rem 0 0;
	}
}

/* ---------- Rubriques ---------- */

.sp-legal-contenu {
	counter-reset: sp-legal;
}

.sp-legal-section {
	counter-increment: sp-legal;
}

.sp-legal-contenu > .sp-legal-section {
	margin: 0;
}

.sp-legal-contenu > .sp-legal-section + .sp-legal-section {
	margin-top: clamp(3rem, 6vw, 4.5rem);
}

/* Arrivée par le sommaire : le titre s'arrête sous l'en-tête, avec de l'air. */
.sp-principal .sp-legal-section[id] {
	scroll-margin-top: 2rem;
}

.sp-legal-section > * {
	margin-block: 0;
}

.sp-legal-section > * + * {
	margin-top: 1.1rem;
}

/* Numéro + titre, puis filet fin (un court trait sarcelle en tête du filet). */
.sp-legal-section > .sp-legal-titre {
	align-items: baseline;
	border-bottom: 1px solid rgb(16 28 44 / 0.12);
	display: flex;
	font-size: clamp(1.45rem, 1.2rem + 0.8vw, 1.9rem);
	gap: 1rem;
	letter-spacing: -0.03em;
	line-height: 1.2;
	margin-bottom: 1.5rem;
	padding-bottom: 1rem;
	position: relative;
}

.sp-legal-section > .sp-legal-titre::before {
	color: var(--wp--preset--color--sarcelle);
	content: counter(sp-legal, decimal-leading-zero);
	flex: none;
	font-family: var(--wp--preset--font-family--literata);
	font-size: 0.72em;
	font-style: italic;
	font-weight: 400;
	letter-spacing: 0;
	min-width: 1.9rem;
}

.sp-legal-section > .sp-legal-titre::after {
	background: var(--wp--preset--color--sarcelle);
	bottom: -1px;
	content: "";
	height: 2px;
	left: 0;
	position: absolute;
	width: 2rem;
}

.sp-legal-section > p,
.sp-legal-section > .sp-legal-infos {
	color: #33414b;
	overflow-wrap: anywhere;
	font-size: 1.0625rem;
	line-height: 1.7;
	max-width: 44rem;
}

.sp-legal-section a:not(.wp-element-button) {
	color: var(--wp--preset--color--sarcelle);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.18em;
}

.sp-legal-section a:not(.wp-element-button):hover {
	color: var(--wp--preset--color--encre);
}

/* Informations clés : grille libellé / valeur très légère. */
.sp-legal-section > .sp-legal-infos {
	border-top: 1px solid rgb(16 28 44 / 0.08);
	list-style: none;
	padding: 0;
}

.sp-legal-infos > li {
	border-bottom: 1px solid rgb(16 28 44 / 0.08);
	display: grid;
	gap: 0.15rem 1.5rem;
	grid-template-columns: minmax(0, 1fr);
	margin: 0;
	padding: 0.8rem 0;
}

.sp-legal-infos > li > strong {
	color: #48545d;
	font-size: 0.8rem;
	font-weight: 650;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

@media (min-width: 600px) {
	.sp-legal-infos > li {
		align-items: baseline;
		grid-template-columns: minmax(0, 13rem) minmax(0, 1fr);
	}
}

.sp-legal-section > .sp-legal-note {
	border-left: 2px solid rgb(26 107 108 / 0.35);
	color: #52606a;
	font-size: 0.95rem;
	padding-left: 1rem;
}

.sp-legal-section > .sp-legal-lien {
	margin-top: 1.4rem;
}

/* Apparition douce des rubriques (courte, faible amplitude). */
@media (prefers-reduced-motion: no-preference) {
	.sp-anim .sp-legal-section.sp-apparait {
		translate: 0 12px;
	}

	.sp-anim .sp-legal-section.sp-apparait.est-visible {
		translate: none;
	}
}

/* ---------- Contact 0.10.2 : échange direct (téléphone) ----------
 * Sous le panneau « Pour bien démarrer », directement sur le fond ivoire de la
 * carte : filet fin (court trait sarcelle), surtitre, titre, numéro cliquable
 * (tel:), lien « M'appeler », petite note. Pas de carte ni de fond. Sur mobile
 * et tablette, il suit le panneau (ordre du contenu). */
.sp-contact-direct {
	--sp-direct-pad: 0.25rem;
	padding: 1.5rem var(--sp-direct-pad) 0.35rem;
	position: relative;
	z-index: 1;
}

.sp-contact-direct::before {
	background:
		linear-gradient(var(--wp--preset--color--sarcelle), var(--wp--preset--color--sarcelle)) 0 0 / 2rem 2px no-repeat,
		linear-gradient(rgb(16 28 44 / 0.12), rgb(16 28 44 / 0.12)) 0 0.5px / 100% 1px no-repeat;
	content: "";
	height: 2px;
	left: var(--sp-direct-pad);
	position: absolute;
	right: var(--sp-direct-pad);
	top: 0;
	transform-origin: left center;
}

.sp-contact-direct > * {
	margin-block: 0;
}

.sp-contact-direct > .sp-contact-direct-titre {
	color: var(--wp--preset--color--encre);
	font-size: clamp(1.15rem, 1rem + 0.35vw, 1.3rem);
	letter-spacing: -0.02em;
	line-height: 1.25;
	margin-top: 0.6rem;
}

.sp-contact-direct > .sp-contact-direct-texte {
	color: #46525b;
	font-size: 0.95rem;
	line-height: 1.55;
	margin-top: 0.4rem;
}

/* Numéro : élément typographique fort, sous le titre du formulaire. */
.sp-contact-direct > .sp-contact-direct-numero {
	font-size: clamp(1.55rem, 1.25rem + 0.9vw, 2rem);
	font-variant-numeric: tabular-nums;
	font-weight: 600;
	letter-spacing: -0.01em;
	line-height: 1.1;
	margin-top: 1rem;
	white-space: nowrap;
}

.sp-contact-direct-numero a {
	background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
	color: var(--wp--preset--color--encre);
	padding-bottom: 0.15rem;
	text-decoration: none;
	transition: color 0.25s ease, background-size 0.4s var(--sp-ease);
}

.sp-contact-direct-numero a:hover {
	background-size: 100% 1px;
	color: var(--wp--preset--color--sarcelle);
}

.sp-contact-direct a:focus-visible {
	border-radius: 3px;
	outline: 2px solid var(--wp--preset--color--sarcelle);
	outline-offset: 3px;
}

.sp-contact-direct > .sp-contact-direct-lien {
	color: var(--wp--preset--color--sarcelle);
	margin-top: 0.85rem;
}

/* 0.11.0 : la carte est dans une section .sp-sombre, dont la règle
 * « .sp-sombre .sp-lien-fleche a:hover » (texte blanc) l'emportait ici sur le
 * fond ivoire. Survol, appui et focus : sarcelle foncé, filet plein et épaissi. */
.sp-sombre .sp-contact-direct .sp-contact-direct-lien a:hover,
.sp-sombre .sp-contact-direct .sp-contact-direct-lien a:active,
.sp-sombre .sp-contact-direct .sp-contact-direct-lien a:focus-visible {
	background-size: 100% 2px;
	color: #124f50;
}

.sp-contact-direct a {
	-webkit-tap-highlight-color: rgb(26 107 108 / 0.15);
}

.sp-contact-direct > .sp-contact-direct-note {
	color: #5d6971;
	font-size: 0.84rem;
	line-height: 1.5;
	margin-top: 1rem;
	max-width: 24rem;
}

@media (min-width: 600px) and (max-width: 1023px) {
	.sp-contact-direct {
		--sp-direct-pad: clamp(1rem, 2.6vw, 2.1rem);
	}
}

/* Ordinateur : le formulaire occupe deux rangées ; le panneau puis le bloc
 * « Échange direct » se succèdent dans la colonne droite. */
@media (min-width: 1024px) {
	.sp-contact-grille {
		grid-template-rows: auto 1fr;
	}

	.sp-contact-grille > .sp-contact-formulaire {
		grid-row: 1 / span 2;
	}

	.sp-contact-grille > .sp-contact-demarrer {
		grid-column: 2;
		grid-row: 1;
	}

	.sp-contact-grille > .sp-contact-direct {
		--sp-direct-pad: clamp(1.25rem, 2vw, 1.6rem);
		align-self: start;
		grid-column: 2;
		grid-row: 2;
		padding-top: 1.6rem;
	}

	/* Signature graphique bas-droite (arcs, nœud, points) conservée, mais
	 * réduite (340 → 190 px) et glissée de 20 px dans le coin : elle reste sous
	 * le bloc, sans jamais toucher le texte (170 px entre 1024 et 1279 px). */
	.sp-contact-grille::after {
		background-position: right -20px bottom -20px;
		background-size: 190px 190px;
		height: 170px;
	}
}

@media (min-width: 1024px) and (max-width: 1279px) {
	.sp-contact-grille::after {
		background-size: 170px 170px;
		height: 150px;
	}
}

/* Apparition unique, après le panneau ; le filet se trace. */
@media (prefers-reduced-motion: no-preference) {
	.sp-anim .sp-contact-direct.sp-apparait {
		transition-delay: 0.5s, 0.5s, 0s, 0s, 0s;
	}

	.sp-anim .sp-contact-direct.sp-apparait::before {
		transform: scaleX(0);
		transition: transform 0.8s var(--sp-ease) 0.65s;
	}

	.sp-anim .sp-contact-direct.est-visible::before {
		transform: none;
	}
}

/* ---------- Logo (0.11.0) ----------
 * En-tête et pied de page : logo PNG officiel (version claire, 1000 × 211,
 * sans marge transparente), lien vers l'accueil, nom accessible = alt. */
.sp-marque-logo {
	letter-spacing: 0;
	line-height: 0;
}

.sp-marque-logo a {
	border-radius: 4px;
	display: inline-block;
}

.sp-marque-logo .sp-logo {
	aspect-ratio: 1000 / 211;
	display: block;
	height: auto;
	max-width: 100%;
	transition: opacity 0.25s ease;
	width: 192px;
}

.sp-marque-logo a:hover .sp-logo {
	opacity: 0.85;
}

.sp-marque-logo a:focus-visible {
	outline: 2px solid var(--wp--preset--color--menthe);
	outline-offset: 5px;
}

@media (max-width: 599px) {
	.sp-marque-logo .sp-logo {
		width: 148px;
	}
}

.sp-pied-studio .sp-marque-pied.sp-marque-logo .sp-logo {
	width: clamp(200px, 170px + 4vw, 230px);
}

/* Logo du menu mobile ouvert : lien vers l'accueil, en haut à gauche, centré
 * sur la hauteur du bouton de fermeture (44 px). Masqué menu fermé (sur
 * ordinateur, le contenu du menu est affiché dans la barre). */
.sp-nav-studio .sp-menu-logo {
	display: none;
}

.sp-nav-studio .is-menu-open .sp-menu-logo {
	align-items: center;
	align-self: flex-start;
	border-radius: 4px;
	display: flex;
	height: 44px;
	margin-top: 0.6rem;
}

.sp-nav-studio .is-menu-open .sp-menu-logo img {
	aspect-ratio: 1000 / 211;
	display: block;
	height: auto;
	width: 160px;
}


/* =====================================================================
 * Finition 0.12.0 : gabarit de l'en-tête, logo, burger, pages légales
 * ===================================================================== */

/* En-tête un peu plus haut (72 px ; 64 px sous 782 px). Toutes les
 * dépendances (ancres, hero sous l'en-tête, sommaire collant) suivent
 * cette variable. */
:root {
	--sp-h-entete: 72px;
}

@media (max-width: 781px) {
	:root {
		--sp-h-entete: 64px;
	}
}

/* Logo : environ + 16 % partout. */
.sp-marque-logo .sp-logo {
	width: 224px;
}

@media (max-width: 599px) {
	.sp-marque-logo .sp-logo {
		width: 172px;
	}
}

.sp-marque-logo {
	flex-shrink: 0;
}

.sp-pied-studio .sp-marque-pied.sp-marque-logo .sp-logo {
	width: clamp(236px, 200px + 4.5vw, 268px);
}

/* Navigation : texte à peine plus grand, bouton un peu plus haut. */
.sp-entete-studio .wp-block-navigation {
	font-size: 0.875rem;
}

.sp-entete-studio .sp-bouton-entete-studio .wp-block-button__link {
	min-height: 40px;
}

/* Burger : icône plus présente, zone de clic de 44 px. */
.sp-nav-studio .wp-block-navigation__responsive-container-open {
	align-items: center;
	border-radius: 10px;
	height: 44px;
	justify-content: center;
	margin-right: -10px;
	width: 44px;
}

.sp-nav-studio .wp-block-navigation__responsive-container-open svg {
	height: 30px;
	width: 30px;
}

.sp-nav-studio .wp-block-navigation__responsive-container-open:focus-visible {
	outline: 2px solid var(--wp--preset--color--menthe);
	outline-offset: 0;
}

/* Menu ouvert : logo et bouton de fermeture un peu plus grands, centrés sur
 * la hauteur de l'en-tête mobile. */
.sp-nav-studio .is-menu-open .wp-block-navigation__responsive-container-close {
	height: 48px;
	top: 0.5rem;
	width: 48px;
}

.sp-nav-studio .is-menu-open .wp-block-navigation__responsive-container-close svg {
	height: 26px;
	width: 26px;
}

.sp-nav-studio .is-menu-open .sp-menu-logo {
	height: 48px;
	margin-top: 0.5rem;
}

.sp-nav-studio .is-menu-open .sp-menu-logo img {
	width: 188px;
}

/* Pages légales : plus d'air au-dessus du sommaire collant et à l'arrivée
 * sur une rubrique (règles communes à toutes les pages légales). */
@media (min-width: 1024px) {
	.sp-legal-sommaire {
		top: calc(var(--sp-h-entete) + 3.25rem);
	}

	.sp-legal-layout > .sp-legal-sommaire {
		max-height: calc(100vh - var(--sp-h-entete) - 4.25rem);
	}
}

.sp-principal .sp-legal-section[id] {
	scroll-margin-top: 3rem;
}

@media (max-width: 781px) {
	.sp-principal .sp-legal-section[id] {
		scroll-margin-top: 2.25rem;
	}
}

/* Menu plein écran jusqu'à 899 px (WordPress bascule à 600 px) : entre 600 et
 * 900 px, logo et menu en ligne ne tenaient pas sans se serrer. (Le bouton
 * « Parlons de votre projet » est masqué sous 900 px ; « Contact » est
 * dans le menu.) */
@media (min-width: 600px) and (max-width: 899px) {
	.sp-nav-studio .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}

	.sp-nav-studio .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: none;
	}
}

/* =====================================================================
 * Finition 0.12.1 : mobile (< 600 px) et focus
 * ===================================================================== */

/* ---------- Mobile : en-tête, logo, burger ----------
 * Tablette (600–899 px) et ordinateur inchangés. */
@media (max-width: 599px) {
	:root {
		--sp-h-entete: 72px;
	}

	.sp-marque-logo .sp-logo {
		width: 192px;
	}

	.sp-nav-studio .wp-block-navigation__responsive-container-open {
		height: 48px;
		margin-right: -12px;
		width: 48px;
	}

	.sp-nav-studio .wp-block-navigation__responsive-container-open svg {
		height: 32px;
		width: 32px;
	}

	/* Menu ouvert : plus d'air au-dessus du logo, menu rapproché du logo. */
	.sp-nav-studio .is-menu-open .sp-menu-logo {
		margin-top: 1.625rem;
	}

	.sp-nav-studio .is-menu-open .sp-menu-logo img {
		width: 212px;
	}

	.sp-nav-studio .is-menu-open .wp-block-navigation__responsive-container-close {
		top: 1.625rem;
	}

	.sp-nav-studio .is-menu-open .wp-block-navigation__responsive-container-content {
		padding-top: 1.625rem !important;
	}
}

/* ---------- Focus ----------
 * Clavier : anneau visible (:focus-visible). Souris et tactile : aucun contour
 * laissé après un clic. Twenty Twenty-Five pose un contour sur tout élément
 * ciblé (:focus) et theme.json sur les boutons ; on le retire seulement quand
 * le navigateur indique que le focus ne vient pas du clavier. Les champs de
 * formulaire gardent leur propre indication (bordure, halo). */
.wp-site-blocks :focus:not(:focus-visible):not(input, select, textarea) {
	outline: none;
}

/* Couleur commune : sarcelle sur fond clair, menthe sur fond sombre. */
:root {
	--sp-focus: var(--wp--preset--color--sarcelle);
}

.sp-sombre,
.sp-entete-studio,
.sp-pied-studio,
.has-contrast-background-color,
.sp-nav-studio .is-menu-open {
	--sp-focus: var(--wp--preset--color--menthe);
}

/* Carte claire posée dans une section sombre (Contact). */
.sp-sombre .sp-contact-carte {
	--sp-focus: var(--wp--preset--color--sarcelle);
}

.sp-sombre .sp-contact-carte .sp-contact-demarrer {
	--sp-focus: var(--wp--preset--color--menthe);
}

:where(a, button, summary, [tabindex]):focus-visible,
.sp-sombre :where(a, button, summary):focus-visible,
.sp-entete-studio :where(a, button):focus-visible,
.sp-pied-studio :where(a, button):focus-visible,
.has-contrast-background-color :where(a, button):focus-visible {
	outline-color: var(--sp-focus);
}

/* Boutons : l'anneau suit leur arrondi. */
:where(.wp-block-button__link, .wp-element-button):focus-visible {
	outline: 2px solid var(--sp-focus);
	outline-offset: 3px;
}

/* Navigation (en-tête, pied de page) : anneau arrondi, un peu détaché. */
.sp-entete-studio .wp-block-navigation__responsive-container:not(.is-menu-open) a:focus-visible,
.sp-pied-studio .wp-block-navigation a:focus-visible {
	border-radius: 6px;
	outline: 2px solid var(--sp-focus);
	outline-offset: 5px;
}

/* Logo : anneau arrondi autour de l'image. */
.sp-marque-logo a:focus-visible,
.sp-nav-studio .is-menu-open .sp-menu-logo:focus-visible {
	border-radius: 8px;
	box-shadow: none;
	outline: 2px solid var(--sp-focus);
	outline-offset: 6px;
}

/* Liens de texte : contour fin et serré, sans grosse boîte. */
:where(.sp-legal-section, .sp-principal) p a:focus-visible,
:where(.sp-legal-section, .sp-principal) li a:focus-visible {
	border-radius: 3px;
	outline-offset: 2px;
}

/* Menu mobile ouvert : anneau net ; chaque élément garde sa forme. */
.sp-nav-studio .is-menu-open :where(a, button):focus-visible {
	box-shadow: 0 0 0 2px var(--sp-focus);
	outline: none;
}

.sp-nav-studio .is-menu-open .wp-block-navigation-item:not(.sp-nav-contact) > .wp-block-navigation-item__content:focus-visible {
	border-radius: 8px;
}

.sp-nav-studio .is-menu-open .wp-block-navigation__responsive-container-close:focus-visible {
	border-radius: 12px;
}

.sp-nav-studio .is-menu-open .sp-nav-contact > .wp-block-navigation-item__content:focus-visible {
	border-radius: var(--sp-r-s);
}

/* =====================================================================
 * Réalisations 0.13.0 : vraies captures des projets (accueil)
 * ===================================================================== */

/* ---------- IziDrop : pile d'écrans ----------
 * Accueil au premier plan ; tableau de bord (haut, droite) et catalogue
 * (bas, droite) en retrait derrière, sur arcs et grille Studio Peyral. */
.sp-pile-ecrans {
	aspect-ratio: 1.16;
	isolation: isolate;
	position: relative;
}

.sp-pile-ecrans::before {
	background:
		radial-gradient(circle at 92% 12%, transparent 139px, rgb(186 248 230 / 0.16) 140px, transparent 141.5px),
		radial-gradient(circle at 92% 12%, transparent 219px, rgb(186 248 230 / 0.1) 220px, transparent 221.5px),
		linear-gradient(rgb(255 255 255 / 0.05) 1px, transparent 1px) 0 0 / 28px 28px,
		linear-gradient(90deg, rgb(255 255 255 / 0.05) 1px, transparent 1px) 0 0 / 28px 28px;
	content: "";
	inset: -6% -4% -6% 8%;
	-webkit-mask-image: radial-gradient(70% 70% at 70% 45%, #000 30%, transparent 80%);
	mask-image: radial-gradient(70% 70% at 70% 45%, #000 30%, transparent 80%);
	pointer-events: none;
	position: absolute;
	z-index: -1;
}

.sp-ecran {
	border: 1px solid rgb(255 255 255 / 0.14);
	border-radius: 10px;
	display: block;
	height: auto;
	position: absolute;
	transition: transform 0.7s var(--sp-ease), box-shadow 0.7s ease;
}

.sp-ecran--accueil {
	box-shadow: 0 40px 70px -34px rgb(0 0 0 / 0.95), 0 0 0 1px rgb(0 0 0 / 0.2);
	left: 0;
	top: 14%;
	width: 80%;
	z-index: 3;
}

.sp-ecran--tableau {
	box-shadow: 0 24px 50px -30px rgb(0 0 0 / 0.8);
	right: 0;
	top: 0;
	width: 58%;
	z-index: 1;
}

.sp-ecran--catalogue {
	bottom: 0;
	box-shadow: 0 30px 56px -30px rgb(0 0 0 / 0.85);
	right: 3%;
	width: 52%;
	z-index: 2;
}

@media (min-width: 1100px) {
	/* Comme l'ancienne capture : la pile déborde légèrement du panneau. */
	.sp-projet-vedette .sp-pile-ecrans {
		margin-left: calc(-1 * (var(--sp-pad) + 2rem));
	}
}

/* Tablette : la carte IziDrop s'empile (captures au-dessus, texte dessous)
 * pour que la pile garde des écrans lisibles. */
@media (max-width: 959px) {
	.wp-block-columns.sp-projet-vedette {
		flex-wrap: wrap !important;
	}

	.wp-block-columns.sp-projet-vedette > .wp-block-column {
		flex-basis: 100% !important;
	}
}

/* Mobile : seul l'écran principal, en grand (les vues secondaires seraient
 * illisibles à cette taille). */
@media (max-width: 599px) {
	.sp-pile-ecrans {
		aspect-ratio: auto;
	}

	.sp-pile-ecrans::before {
		display: none;
	}

	.sp-ecran--accueil {
		position: relative;
		top: 0;
		width: 100%;
	}

	.sp-ecran--tableau,
	.sp-ecran--catalogue {
		display: none;
	}
}

/* ---------- Autres réalisations : passe-partout ----------
 * Capture entière (ratio réel 1455 / 1202), cadre fin, sur un fond ivoire
 * nuancé avec grille et arc ; même système pour les deux projets. */
.sp-projet-secondaire {
	position: relative;
}

.sp-vitrine {
	background:
		radial-gradient(circle at 100% 0%, transparent 119px, rgb(26 107 108 / 0.16) 120px, transparent 121.5px),
		radial-gradient(circle at 100% 0%, transparent 189px, rgb(26 107 108 / 0.1) 190px, transparent 191.5px),
		radial-gradient(80% 70% at 100% 0%, rgb(186 248 230 / 0.35), rgb(186 248 230 / 0) 70%),
		linear-gradient(180deg, #fbfaf5, #f3efe6);
	border: 1px solid rgb(16 28 44 / 0.08);
	border-radius: var(--sp-r-l);
	isolation: isolate;
	padding: clamp(0.9rem, 2.2vw, 1.5rem);
	position: relative;
}

.sp-vitrine::before {
	background-image:
		linear-gradient(rgb(16 28 44 / 0.045) 1px, transparent 1px),
		linear-gradient(90deg, rgb(16 28 44 / 0.045) 1px, transparent 1px);
	background-size: 24px 24px;
	border-radius: inherit;
	content: "";
	inset: 0;
	-webkit-mask-image: radial-gradient(90% 80% at 100% 0%, #000 10%, transparent 75%);
	mask-image: radial-gradient(90% 80% at 100% 0%, #000 10%, transparent 75%);
	pointer-events: none;
	position: absolute;
	z-index: -1;
}

.sp-vitrine > .sp-vitrine-adresse {
	align-items: center;
	color: var(--wp--preset--color--sarcelle);
	display: flex;
	font-family: var(--wp--preset--font-family--fira-code);
	font-size: 0.72rem;
	gap: 0.55rem;
	letter-spacing: 0.02em;
	line-height: 1;
	margin: 0 0 0.8rem;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.sp-vitrine-adresse::before {
	background: var(--wp--preset--color--sarcelle);
	border-radius: 50%;
	box-shadow: 0 0 0 3px rgb(26 107 108 / 0.14);
	content: "";
	flex: none;
	height: 6px;
	width: 6px;
}

.sp-vitrine-cadre {
	aspect-ratio: 1455 / 1202;
	background: #fff;
	border: 1px solid rgb(16 28 44 / 0.12);
	border-radius: var(--sp-r-s);
	box-shadow: var(--sp-ombre-douce);
	overflow: hidden;
	transition: transform 0.6s var(--sp-ease), box-shadow 0.6s ease, border-color 0.6s ease;
}

.sp-vitrine-capture {
	display: block;
	height: auto;
	transition: transform 0.8s var(--sp-ease);
	width: 100%;
}

/* ---------- Cartes entièrement cliquables ----------
 * Un seul lien par projet (celui du texte) ; sa zone s'étend à toute la
 * carte. Pas de lien imbriqué ; au clavier, le focus reste sur ce lien et la
 * capture est soulignée d'un anneau. */
.sp-projet-secondaire .sp-lien-fleche a::before,
.sp-projet-vedette .sp-projet-texte .sp-lien-fleche a::before {
	border-radius: inherit;
	content: "";
	inset: 0;
	position: absolute;
	z-index: 4;
}

.sp-projet-secondaire:has(.sp-lien-fleche a:focus-visible) .sp-vitrine-cadre {
	outline: 2px solid var(--sp-focus);
	outline-offset: 4px;
}

.sp-projet-vedette:has(.sp-projet-texte .sp-lien-fleche a:focus-visible) .sp-ecran--accueil {
	outline: 2px solid var(--wp--preset--color--menthe);
	outline-offset: 4px;
}

/* ---------- Survol (souris uniquement, mouvement permis) ---------- */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
	.sp-projet-vedette:hover .sp-ecran--accueil {
		box-shadow: 0 48px 80px -34px rgb(0 0 0 / 0.95), 0 0 0 1px rgb(0 0 0 / 0.2);
		transform: translateY(-2px) scale(1.006);
	}

	.sp-projet-vedette:hover .sp-ecran--tableau {
		transform: translate(5px, -5px);
	}

	.sp-projet-vedette:hover .sp-ecran--catalogue {
		transform: translate(5px, 5px);
	}

	.sp-projet-secondaire:hover .sp-vitrine-cadre {
		border-color: rgb(26 107 108 / 0.3);
		box-shadow: var(--sp-ombre-haute);
		transform: translateY(-3px);
	}

	.sp-projet-secondaire:hover .sp-vitrine-capture {
		transform: scale(1.015);
	}
}

@media (prefers-reduced-motion: reduce) {
	.sp-ecran,
	.sp-vitrine-cadre,
	.sp-vitrine-capture {
		transition: none;
	}
}

/* =====================================================================
 * Pied de page 0.14.0 : hiérarchie, réseaux sociaux, bande basse
 * ===================================================================== */

/* Ordinateur : trois zones (marque, Navigation, Contact). */
@media (min-width: 1024px) {
	.sp-pied-haut {
		align-items: start;
		display: grid !important;
		gap: clamp(3rem, 6vw, 6rem);
		grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
		padding-top: 0.5rem;
	}

	.sp-pied-colonnes {
		display: grid !important;
		gap: clamp(2rem, 4vw, 4.5rem);
		grid-template-columns: repeat(2, minmax(0, 1fr));
		justify-self: end;
		padding-top: 0.6rem;
		width: min(100%, 30rem);
	}
}

.sp-pied-presentation {
	max-width: 30rem;
}

.sp-pied-studio .sp-marque-pied {
	margin-bottom: 1.6rem;
}

/* Titres de colonnes et du bloc social : même micro-capitale menthe. */
.sp-pied-social > .sp-pied-titre {
	color: var(--wp--preset--color--menthe);
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.18em;
	margin: 0 0 1rem;
	text-transform: uppercase;
}

.sp-pied-colonne > .sp-pied-titre {
	margin-bottom: 1.1rem;
}

.sp-pied-studio .wp-block-navigation {
	line-height: 2.2;
}

/* ---------- Réseaux sociaux ----------
 * Aujourd'hui : icônes non cliquables (<span class="sp-reseau">), faute
 * d'adresses. Pour activer un réseau : remplacer la balise par
 * <a class="sp-reseau sp-reseau--…" href="…" aria-label="LinkedIn — Studio Peyral">
 * (même contenu SVG) ; le survol ne concerne que les liens. */
.sp-pied-presentation > .sp-pied-social {
	border-top: 1px solid #22374c;
	margin-top: 2rem;
	padding-top: 1.6rem;
}

.sp-reseaux {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.sp-reseaux > li {
	margin: 0;
}

.sp-reseau {
	align-items: center;
	background: rgb(255 255 255 / 0.02);
	border: 1px solid rgb(186 248 230 / 0.22);
	border-radius: 12px;
	color: #dfe6ec;
	display: inline-flex;
	height: 42px;
	justify-content: center;
	text-decoration: none;
	transition: color 0.25s ease, background-color 0.25s ease, border-color 0.25s ease, transform 0.25s var(--sp-ease);
	width: 42px;
}

.sp-reseau svg {
	display: block;
	height: 20px;
	width: 20px;
}

a.sp-reseau:hover {
	background-color: rgb(186 248 230 / 0.08);
	border-color: var(--wp--preset--color--menthe);
	color: var(--wp--preset--color--menthe);
	transform: translateY(-1px);
}

@media (prefers-reduced-motion: reduce) {
	a.sp-reseau:hover {
		transform: none;
	}
}

/* ---------- Bande basse ---------- */
.sp-pied-bas {
	align-items: center;
	margin-top: 0.5rem;
}

.sp-pied-bas > .sp-pied-credit {
	align-items: center;
	color: #b7c6d2;
	display: inline-flex;
	gap: 0.7rem;
	letter-spacing: 0.02em;
}

.sp-pied-credit::before {
	background: var(--wp--preset--color--menthe);
	content: "";
	flex: none;
	height: 1px;
	opacity: 0.6;
	width: 22px;
}

/* Tablette : marque en haut, puis Navigation et Contact côte à côte. */
@media (min-width: 600px) and (max-width: 1023px) {
	.sp-pied-haut {
		display: block !important;
	}

	.sp-pied-colonnes {
		display: grid !important;
		gap: 2.5rem;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		margin-top: 0 !important;
		max-width: 34rem;
		padding-top: 3rem;
	}
}

/* Mobile : une seule colonne (marque, réseaux, Navigation, Contact). */
@media (max-width: 599px) {
	.sp-pied-colonnes {
		display: grid !important;
		gap: 2.2rem;
		grid-template-columns: minmax(0, 1fr);
		margin-top: 0 !important;
		padding-top: 2.6rem;
	}

	.sp-pied-bas {
		align-items: flex-start;
	}
}

/* =====================================================================
 * 0.15.0 : hero de l'accueil (carte claire, badge, boutons mobiles)
 * ===================================================================== */

/* Carte « Votre projet » : les trois aplats de couleur deviennent un mini
 * système d'interface (trois modules fins reliés : le premier actif, le
 * deuxième en cours, le troisième à venir) sous une ligne d'avancement.
 * Dessin vectoriel, traits fins constants, palette Studio Peyral atténuée. */
.sp-art-principal::after {
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 58' preserveAspectRatio='none'%3E %3Crect width='300' height='1' fill='%23101C2C' fill-opacity='.12'/%3E %3Crect width='110' height='2' fill='%231A6B6C'/%3E %3Crect x='.5' y='12.5' width='91' height='45' rx='7' fill='%23BAF8E6' fill-opacity='.38' stroke='%231A6B6C' stroke-opacity='.38' vector-effect='non-scaling-stroke'/%3E %3Crect x='10' y='22' width='7' height='7' rx='2' fill='%231A6B6C'/%3E %3Crect x='23' y='24' width='42' height='3' rx='1.5' fill='%23101C2C' fill-opacity='.6'/%3E %3Crect x='10' y='37' width='66' height='3' rx='1.5' fill='%23101C2C' fill-opacity='.18'/%3E %3Crect x='10' y='45' width='46' height='3' rx='1.5' fill='%23101C2C' fill-opacity='.18'/%3E %3Crect x='92' y='34' width='12' height='1' fill='%231A6B6C' fill-opacity='.45'/%3E %3Crect x='104.5' y='12.5' width='91' height='45' rx='7' fill='%23FFFFFF' fill-opacity='.6' stroke='%23101C2C' stroke-opacity='.13' vector-effect='non-scaling-stroke'/%3E %3Crect x='114.5' y='22.5' width='6' height='6' rx='1.5' fill='none' stroke='%231A6B6C' stroke-opacity='.7' vector-effect='non-scaling-stroke'/%3E %3Crect x='127' y='24' width='36' height='3' rx='1.5' fill='%23101C2C' fill-opacity='.38'/%3E %3Crect x='114' y='37' width='60' height='3' rx='1.5' fill='%23101C2C' fill-opacity='.12'/%3E %3Crect x='114' y='45' width='40' height='3' rx='1.5' fill='%23101C2C' fill-opacity='.12'/%3E %3Crect x='196' y='34' width='12' height='1' fill='%231A6B6C' fill-opacity='.22'/%3E %3Crect x='208.5' y='12.5' width='91' height='45' rx='7' fill='%23FFFFFF' fill-opacity='.3' stroke='%23101C2C' stroke-opacity='.18' stroke-dasharray='3 3' vector-effect='non-scaling-stroke'/%3E %3Crect x='218.5' y='22.5' width='6' height='6' rx='1.5' fill='none' stroke='%23101C2C' stroke-opacity='.3' vector-effect='non-scaling-stroke'/%3E %3Crect x='231' y='24' width='30' height='3' rx='1.5' fill='%23101C2C' fill-opacity='.2'/%3E %3Crect x='218' y='37' width='54' height='3' rx='1.5' fill='%23101C2C' fill-opacity='.08'/%3E %3Crect x='218' y='45' width='34' height='3' rx='1.5' fill='%23101C2C' fill-opacity='.08'/%3E %3C/svg%3E") 0 0 / 100% 100% no-repeat;
	border-radius: 0;
	height: 58px;
	margin-top: 1.5rem;
}

.sp-hero-art > .sp-art-principal {
	box-shadow: 0 50px 90px -40px rgb(0 0 0 / 0.75), 0 0 0 10px rgb(186 248 230 / 0.05), inset 0 0 0 1px rgb(255 255 255 / 0.55);
}

/* Grand écran : « 02 / Connecter » descend sous les modules de la carte (il
 * masquait le module actif) ; le badge se décale en conséquence. */
@media (min-width: 1200px) {
	.sp-hero-art > .sp-art-2 {
		bottom: 40px;
	}

	.sp-hero-art > .sp-art-pastille {
		bottom: 2px;
		left: 40%;
	}
}

/* Grille (tablette et mobile) : le badge devient un onglet posé sur le haut
 * de la carte, au lieu d'un bloc de plus dans la pile. */
@media (max-width: 1199px) {
	.sp-art-principal::after {
		height: 54px;
	}

	.sp-hero-art > .sp-art-pastille {
		box-shadow: 0 10px 22px -12px rgb(186 248 230 / 0.55);
		font-size: 0.64rem;
		margin: 0 0 -1rem 1.25rem;
		padding: 0.5rem 0.85rem;
		position: relative;
		z-index: 3;
	}

	.sp-hero-art > .sp-art-principal {
		padding-top: 1.9rem;
	}
}

/* Mobile : bouton principal à sa largeur naturelle, lien secondaire à côté
 * (ou dessous si la place manque) ; plus d'air avant la composition. */
@media (max-width: 599px) {
	.sp-hero-boutons {
		align-items: center;
		flex-direction: row;
		flex-wrap: wrap;
		gap: 0.35rem 1.4rem;
	}

	.sp-hero-boutons .wp-block-button,
	.sp-hero-boutons .wp-block-button.is-style-outline {
		align-self: auto;
		flex: 0 0 auto;
	}

	.sp-hero-boutons .wp-block-button:not(.is-style-outline) .wp-block-button__link {
		padding: 0.8rem 1.3rem;
		width: auto;
	}

	.sp-hero-grille > .wp-block-column + .wp-block-column {
		padding-top: 0.75rem;
	}

	.sp-art-principal::after {
		height: 50px;
		margin-top: 1.25rem;
	}
}

/* =====================================================================
 * 0.15.0 : pied de page plus compact
 * Cause du vide : marge intérieure basse du haut du pied de page héritée
 * de l'espacement WordPress « spacing--70 » (90 px sur ordinateur).
 * ===================================================================== */
.sp-pied-haut {
	padding-bottom: clamp(2.5rem, 1.6rem + 2.5vw, 3.75rem);
}

.sp-pied-bas {
	margin-top: 0;
}

@media (min-width: 600px) and (max-width: 1023px) {
	.sp-pied-colonnes {
		padding-top: 2.5rem;
	}
}

@media (max-width: 599px) {
	/* La mise en page « flex » de WordPress ajoutait 48 px d'écart entre la
	 * marque et les colonnes : le haut du pied de page passe en bloc. */
	.sp-pied-haut {
		display: block !important;
	}

	.sp-pied-colonnes {
		gap: 2rem;
		padding-top: 2.5rem;
	}
}

/* =====================================================================
 * 0.15.1 / 0.15.2 : CTA du hero sur mobile (< 600 px) uniquement
 * À gauche, « Voir les réalisations → » en lien secondaire (ivoire, souligné
 * menthe, flèche) ; à droite, « Parlons de votre projet » en bouton principal
 * menthe (style du bouton principal du hero). Le bouton menthe n'est ainsi
 * plus dans l'axe du badge menthe, placé à gauche de la carte. Ordre visuel
 * = ordre du contenu (aucun « order »).
 * */
@media (max-width: 599px) {
	.sp-hero-boutons {
		flex-wrap: nowrap;
		gap: 0.35rem 1rem;
		justify-content: space-between;
	}

	/* Bouton principal : « Parlons de votre projet ». */
	.sp-sombre .sp-hero-boutons .is-style-outline .wp-block-button__link {
		background-color: var(--wp--preset--color--menthe);
		border: 0;
		border-radius: var(--sp-r-s);
		color: var(--wp--preset--color--encre);
		font-size: 0.8125rem;
		font-weight: 700;
		padding: 0.8rem 1rem;
		text-decoration: none;
	}

	.sp-sombre .sp-hero-boutons .is-style-outline .wp-block-button__link:hover {
		background-color: #d4fbf0;
		box-shadow: 0 14px 28px -14px rgb(186 248 230 / 0.7);
		color: var(--wp--preset--color--encre);
		text-decoration: none;
		transform: translateY(-2px);
	}

	/* Lien secondaire : « Voir les réalisations → ». */
	.sp-sombre .sp-hero-boutons .wp-block-button:not(.is-style-outline) .wp-block-button__link,
	.sp-sombre .sp-hero-boutons .wp-block-button:not(.is-style-outline) .wp-block-button__link:hover {
		background-color: transparent !important;
		border: 0;
		box-shadow: none;
		color: var(--wp--preset--color--blanc-casse) !important;
		font-size: 0.8125rem;
		font-weight: 600;
		gap: 0.4rem;
		padding: 0.8rem 0;
		text-decoration: underline;
		text-decoration-color: rgb(186 248 230 / 0.6);
		text-decoration-thickness: 1px;
		text-underline-offset: 0.35em;
		transform: none;
	}

	.sp-sombre .sp-hero-boutons .wp-block-button:not(.is-style-outline) .wp-block-button__link:hover {
		text-decoration-color: var(--wp--preset--color--menthe);
	}

	.sp-hero-boutons .wp-block-button:not(.is-style-outline) .wp-block-button__link::after {
		color: var(--wp--preset--color--menthe);
		content: "\2192";
		content: "\2192" / "";
		display: inline-block;
		text-decoration: none;
		transition: transform 0.3s var(--sp-ease);
	}

	.sp-hero-boutons .wp-block-button:not(.is-style-outline) .wp-block-button__link:hover::after {
		transform: translateX(3px);
	}

	/* Plus d'air entre les CTA et le badge (menthe tous les deux). */
	.sp-hero-grille > .wp-block-column + .wp-block-column {
		padding-top: 1.75rem;
	}
}

/* Très petits écrans : un peu plus compact pour rester sur une ligne. */
@media (max-width: 379px) {
	.sp-hero-boutons {
		gap: 0.35rem 0.8rem;
	}

	.sp-sombre .sp-hero-boutons .is-style-outline .wp-block-button__link {
		font-size: 0.78rem;
		padding: 0.78rem 0.85rem;
	}

	.sp-sombre .sp-hero-boutons .wp-block-button:not(.is-style-outline) .wp-block-button__link,
	.sp-sombre .sp-hero-boutons .wp-block-button:not(.is-style-outline) .wp-block-button__link:hover {
		font-size: 0.75rem;
	}
}

/* =====================================================================
 * 0.15.3 : CTA du hero sur mobile (< 600 px) : groupe compact, soulignement
 * limité au texte du lien « Voir les réalisations ».
 * ===================================================================== */
@media (max-width: 599px) {
	.sp-hero-boutons {
		gap: 0.35rem 0.75rem;
		justify-content: flex-start;
	}

	/* La flèche sort du flux (position absolue) : le soulignement du lien ne
	 * la suit plus et reste sous le texte. */
	.sp-sombre .sp-hero-boutons .wp-block-button:not(.is-style-outline) .wp-block-button__link,
	.sp-sombre .sp-hero-boutons .wp-block-button:not(.is-style-outline) .wp-block-button__link:hover {
		padding-right: 1.35em;
		position: relative;
	}

	.sp-hero-boutons .wp-block-button:not(.is-style-outline) .wp-block-button__link::after {
		position: absolute;
		right: 0;
		top: 50%;
		translate: 0 -50%;
	}
}

@media (max-width: 379px) {
	.sp-hero-boutons {
		gap: 0.35rem 0.625rem;
	}
}


/* =====================================================================
 * 0.16.0 : Accueil, section « Outils & automatisations » (#outils)
 * Un rail commun (fond, bordure, filet menthe en tête, séparateurs fins)
 * réunit trois outils ; chaque outil a un emplacement de capture 16:10.
 * ===================================================================== */
.sp-section-automatisations {
	background-image:
		radial-gradient(45% 60% at 100% 0%, rgb(186 248 230 / 0.07), rgb(186 248 230 / 0) 70%),
		linear-gradient(rgb(255 255 255 / 0.025) 1px, transparent 1px),
		linear-gradient(90deg, rgb(255 255 255 / 0.025) 1px, transparent 1px);
	background-size: auto, 56px 56px, 56px 56px;
}

.sp-outils-rail {
	background: linear-gradient(180deg, rgb(255 255 255 / 0.035), rgb(255 255 255 / 0.012));
	border: 1px solid rgb(186 248 230 / 0.14);
	border-radius: var(--sp-r-l);
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	overflow: hidden;
	position: relative;
}

/* Filet du rail : menthe à gauche, qui s'efface vers la droite. */
.sp-outils-rail::before {
	background: linear-gradient(90deg, var(--wp--preset--color--menthe), rgb(186 248 230 / 0.25) 34%, rgb(186 248 230 / 0) 100%);
	content: "";
	height: 1px;
	inset: 0 0 auto;
	position: absolute;
}

.sp-outils-rail > .sp-outil {
	margin: 0;
	padding: clamp(1.1rem, 1.8vw, 1.6rem);
	position: relative;
	transition: background-color 0.4s ease;
}

.sp-outils-rail > .sp-outil + .sp-outil {
	border-left: 1px solid rgb(186 248 230 / 0.12);
}

/* Outil 01 : légèrement mis en avant (lumière et trait menthe). */
.sp-outils-rail > .sp-outil--sync {
	background-image: radial-gradient(90% 60% at 0% 0%, rgb(186 248 230 / 0.07), rgb(186 248 230 / 0) 70%);
}

.sp-outils-rail > .sp-outil--sync::before {
	background: var(--wp--preset--color--menthe);
	content: "";
	height: 2px;
	left: 0;
	position: absolute;
	top: 0;
	width: 56px;
}

/* ---------- Emplacement de capture ----------
 * Aujourd'hui : fond bleu nuit, grille, esquisse d'interface propre à chaque
 * outil et mention temporaire. Avec une image (<img> dans le bloc), celle-ci
 * remplit l'emplacement (cover, position réglable par --sp-media-pos) et
 * l'esquisse disparaît. */
.sp-outil-media {
	aspect-ratio: 16 / 10;
	background:
		linear-gradient(rgb(255 255 255 / 0.035) 1px, transparent 1px) 0 0 / 18px 18px,
		linear-gradient(90deg, rgb(255 255 255 / 0.035) 1px, transparent 1px) 0 0 / 18px 18px,
		linear-gradient(160deg, #13233a, #0b1624);
	border: 1px solid rgb(186 248 230 / 0.16);
	border-radius: 10px;
	overflow: hidden;
	position: relative;
	transition: transform 0.5s var(--sp-ease), border-color 0.4s ease, box-shadow 0.4s ease;
}

.sp-outil-media::before {
	background: var(--wp--preset--color--menthe);
	content: "";
	height: 2px;
	left: 14px;
	opacity: 0.8;
	position: absolute;
	top: 14px;
	width: 22px;
}

/* Esquisses d'interface (décoratives, très discrètes). */
.sp-outil-media::after {
	content: "";
	inset: 22% 9% 26%;
	opacity: 0.9;
	position: absolute;
}

.sp-outil-media--sync::after {
	background:
		linear-gradient(90deg, rgb(186 248 230 / 0.35) 0 18%, transparent 18%) 0 0 / 100% 6px no-repeat,
		repeating-linear-gradient(180deg, rgb(255 255 255 / 0.07) 0 5px, transparent 5px 15px) 0 16px / 100% calc(100% - 16px) no-repeat,
		linear-gradient(90deg, transparent 0 72%, rgb(186 248 230 / 0.28) 72% 86%, transparent 86%) 0 16px / 100% 5px no-repeat;
}

.sp-outil-media--device::after {
	background:
		repeating-linear-gradient(180deg, rgb(255 255 255 / 0.08) 0 6px, transparent 6px 16px) 0 0 / 30% 100% no-repeat,
		linear-gradient(rgb(186 248 230 / 0.3), rgb(186 248 230 / 0.3)) 0 16px / 30% 6px no-repeat,
		linear-gradient(rgb(255 255 255 / 0.05), rgb(255 255 255 / 0.05)) 100% 0 / 62% 100% no-repeat;
}

.sp-outil-media--bundles::after {
	background:
		linear-gradient(90deg, rgb(255 255 255 / 0.07) 0 30%, transparent 30% 35%, rgb(255 255 255 / 0.07) 35% 65%, transparent 65% 70%, rgb(255 255 255 / 0.07) 70%) 0 0 / 100% 64% no-repeat,
		linear-gradient(90deg, rgb(186 248 230 / 0.3) 0 22%, transparent 22%) 0 100% / 100% 6px no-repeat;
}

.sp-outil-media-mention {
	bottom: 12px;
	color: rgb(186 248 230 / 0.6);
	font-family: var(--wp--preset--font-family--fira-code);
	font-size: 0.6rem;
	left: 14px;
	letter-spacing: 0.12em;
	position: absolute;
	text-transform: uppercase;
}

.sp-outil-media img {
	display: block;
	height: 100%;
	object-fit: cover;
	object-position: var(--sp-media-pos, top left);
	width: 100%;
}

.sp-outil-media:has(img)::before,
.sp-outil-media:has(img)::after {
	display: none;
}

/* ---------- Texte des outils ---------- */
.sp-outil-corps {
	align-items: baseline;
	column-gap: 0.7rem;
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	margin-top: 1.1rem !important;
}

.sp-outil-corps > * {
	grid-column: 1 / -1;
	margin: 0;
}

.sp-outil-corps > .sp-outil-num {
	color: var(--wp--preset--color--menthe);
	font-family: var(--wp--preset--font-family--literata);
	font-size: 1.15rem;
	font-style: italic;
	grid-column: 1;
	line-height: 1;
}

.sp-outil-corps > .sp-outil-meta {
	color: #9bb9bc;
	font-size: 0.64rem;
	font-weight: 700;
	grid-column: 2;
	letter-spacing: 0.15em;
	line-height: 1.3;
	text-transform: uppercase;
}

.sp-outil-corps > .sp-outil-titre {
	color: var(--wp--preset--color--blanc-casse);
	font-size: clamp(1.1rem, 1rem + 0.35vw, 1.3rem);
	letter-spacing: -0.02em;
	line-height: 1.2;
	margin-top: 0.75rem;
}

.sp-outil-corps > .sp-outil-texte {
	color: #c5d0d9;
	font-size: 0.9rem;
	line-height: 1.55;
	margin-top: 0.5rem;
}

.sp-outil-corps > .sp-outil-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	list-style: none;
	margin-top: 0.95rem;
	padding: 0;
}

.sp-outil-tags > li {
	border: 1px solid rgb(186 248 230 / 0.22);
	border-radius: 100px;
	color: #dfe6ec;
	font-size: 0.7rem;
	font-weight: 600;
	line-height: 1;
	margin: 0;
	padding: 0.4rem 0.65rem;
}

/* Sortie de section : lien textuel vers Contact. */
.sp-outils-sortie > .sp-outils-cta {
	margin: 0;
}

/* ---------- Survol (souris uniquement, mouvement permis) ---------- */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
	.sp-outils-rail > .sp-outil:hover {
		background-color: rgb(255 255 255 / 0.018);
	}

	.sp-outils-rail > .sp-outil:hover .sp-outil-media {
		border-color: rgb(186 248 230 / 0.36);
		box-shadow: 0 18px 36px -24px rgb(0 0 0 / 0.8);
		transform: translateY(-2px);
	}
}

/* ---------- Tablette : 01 en pleine largeur (capture à gauche), 02 et 03
 * côte à côte. ---------- */
@media (min-width: 600px) and (max-width: 1023px) {
	.sp-outils-rail {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.sp-outils-rail > .sp-outil--sync {
		align-items: center;
		border-bottom: 1px solid rgb(186 248 230 / 0.12);
		column-gap: 1.5rem;
		display: grid;
		grid-column: 1 / -1;
		grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
	}

	.sp-outils-rail > .sp-outil--sync > * {
		margin: 0 !important;
	}

	.sp-outils-rail > .sp-outil--device {
		border-left: 0;
	}
}

/* ---------- Mobile : outils empilés, compacts ---------- */
@media (max-width: 599px) {
	.sp-outils-rail {
		grid-template-columns: minmax(0, 1fr);
	}

	.sp-outils-rail > .sp-outil {
		padding: 1.1rem;
	}

	.sp-outils-rail > .sp-outil + .sp-outil {
		border-left: 0;
		border-top: 1px solid rgb(186 248 230 / 0.12);
	}

	.sp-outil-corps {
		margin-top: 0.9rem !important;
	}

	.sp-outil-corps > .sp-outil-texte {
		font-size: 0.875rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.sp-outil-media,
	.sp-outils-rail > .sp-outil {
		transition: none;
	}
}

/* Section compacte : titre sur deux lignes, un cran sous les grands titres
 * de section (la page d'accueil est déjà longue). */
.sp-section-automatisations .sp-tete-section .sp-titre {
	font-size: clamp(1.85rem, 1.2rem + 2.1vw, 2.7rem) !important;
	line-height: 1.08;
}

.sp-section-automatisations .sp-tete-section .wp-block-column:last-child p {
	max-width: 24rem;
}


/* =====================================================================
 * 0.16.1 : vraies captures des outils
 * Cadre commun 4:3 (proche des captures réelles ; plus de 16:10).
 * Cadrages et vignettes : voir 0.16.3, plus bas.
 * ===================================================================== */
.sp-outils-rail .sp-outil-media {
	aspect-ratio: 4 / 3;
}


/* =====================================================================
 * 0.16.3 : médias des outils (cadrages lisibles, visionneuse, tags)
 * Chaque média est un bouton : la capture y est agrandie et cadrée sur sa
 * zone utile (cadre 4:3, débordement masqué, aucune déformation) ; un clic
 * ou un toucher l'ouvre en grand dans la visionneuse.
 * ===================================================================== */
.sp-outil-media--cadre {
	isolation: isolate;
}

.sp-outil-media .sp-outil-agrandir {
	background: none;
	border: 0;
	border-radius: inherit;
	cursor: zoom-in;
	display: block;
	height: 100%;
	inset: 0;
	margin: 0;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 100%;
}

/* Cadrage : l'image est plus large que le cadre et placée par variables. */
.sp-outil-media .sp-outil-agrandir > img.sp-outil-cadrage {
	height: auto;
	left: var(--sp-cadre-x, 0);
	max-width: none;
	object-fit: fill;
	position: absolute;
	top: var(--sp-cadre-y, 0);
	transform-origin: var(--sp-cadre-origine, 0 0);
	transition: transform 0.6s var(--sp-ease);
	width: var(--sp-cadre-l, 100%);
}

/* 01 : bandeau, compteurs, étapes, début des réglages (haut à gauche). */
.sp-outil-media--sync {
	--sp-cadre-l: 170%;
	--sp-cadre-x: -2%;
	--sp-cadre-y: -1%;
}

/* 02 : vue côté site agrandie (marques, champ, liste des modèles). */
.sp-outil-media--device {
	--sp-cadre-l: 150%;
	--sp-cadre-x: -1%;
	--sp-cadre-y: 0;
	background: #fdf2ee;
}

/* 03 : « Chargeurs compatibles », premiers bundles et leurs prix remisés
 * (toute la largeur de la capture, pour garder les prix). */
.sp-outil-media--bundles {
	--sp-cadre-l: 104%;
	--sp-cadre-x: -2%;
	--sp-cadre-y: -1%;
	background: #f4f4f6;
}

/* Vignette d'administration (02), en bas à droite. */
.sp-outil-media .sp-outil-vignette {
	aspect-ratio: 1397 / 1051;
	background: #fff;
	border: 1px solid rgb(255 255 255 / 0.55);
	border-radius: 6px;
	bottom: 8px;
	box-shadow: 0 14px 28px -12px rgb(16 28 44 / 0.75), 0 0 0 1px rgb(16 28 44 / 0.18);
	cursor: zoom-in;
	margin: 0;
	overflow: hidden;
	padding: 0;
	position: absolute;
	right: 8px;
	transition: transform 0.5s var(--sp-ease), box-shadow 0.4s ease;
	width: 42%;
	z-index: 2;
}

.sp-outil-media .sp-outil-vignette > img {
	display: block;
	height: 100%;
	object-fit: cover;
	object-position: 0 0;
	width: 100%;
}

/* Indication discrète : pictogramme « agrandir » dans un coin. */
.sp-outil-loupe {
	align-items: center;
	background: rgb(16 28 44 / 0.72);
	border: 1px solid rgb(186 248 230 / 0.35);
	border-radius: 8px;
	color: var(--wp--preset--color--menthe);
	display: flex;
	bottom: 8px;
	height: 28px;
	justify-content: center;
	opacity: 0.8;
	position: absolute;
	right: 8px;
	transition: opacity 0.3s ease;
	width: 28px;
	z-index: 1;
}

/* 02 : la vignette occupe le coin bas droit ; pictogramme en haut à droite. */
.sp-outil-media--device .sp-outil-loupe {
	bottom: auto;
	top: 8px;
}

.sp-outil-agrandir:hover .sp-outil-loupe,
.sp-outil-agrandir:focus-visible .sp-outil-loupe {
	opacity: 1;
}

/* Focus clavier : anneau à l'intérieur du cadre (le cadre masque l'extérieur). */
.sp-outil-media .sp-outil-agrandir:focus-visible,
.sp-outil-media .sp-outil-vignette:focus-visible {
	outline: 2px solid var(--wp--preset--color--menthe);
	outline-offset: -3px;
}

/* Survol (souris, mouvement permis) : léger zoom interne. */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
	.sp-outil-agrandir:hover > img.sp-outil-cadrage {
		transform: scale(1.018);
	}

	.sp-outil-media .sp-outil-vignette:hover {
		box-shadow: 0 18px 34px -12px rgb(16 28 44 / 0.85), 0 0 0 1px rgb(186 248 230 / 0.5);
		transform: translateY(-2px);
	}
}

@media (prefers-reduced-motion: reduce) {
	.sp-outil-media .sp-outil-agrandir > img.sp-outil-cadrage,
	.sp-outil-media .sp-outil-vignette {
		transition: none;
	}
}

/* ---------- Tags : un peu plus présents ---------- */
.sp-outil-tags > li {
	background: rgb(186 248 230 / 0.07);
	border-color: rgb(186 248 230 / 0.32);
	color: #cdf5e9;
}

/* ---------- Visionneuse (dialog natif) ---------- */
.sp-visionneuse {
	background: transparent;
	border: 0;
	color: var(--wp--preset--color--blanc-casse);
	height: 100%;
	margin: 0;
	max-height: none;
	max-width: none;
	overflow: hidden;
	padding: 0;
	width: 100%;
}

.sp-visionneuse::backdrop {
	backdrop-filter: blur(4px);
	background: rgb(8 14 24 / 0.9);
}

.sp-visionneuse-cadre {
	align-items: center;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	gap: 0.9rem;
	height: 100%;
	justify-content: center;
	padding: clamp(3.5rem, 7vh, 4.5rem) clamp(0.75rem, 4vw, 4.5rem) clamp(1.5rem, 4vh, 2.5rem);
}

.sp-visionneuse-image {
	border: 1px solid rgb(255 255 255 / 0.18);
	border-radius: 8px;
	box-shadow: 0 30px 70px -30px rgb(0 0 0 / 0.9);
	display: block;
	height: auto;
	max-height: calc(100% - 3rem);
	max-width: 100%;
	object-fit: contain;
	width: auto;
}

.sp-visionneuse-legende {
	color: #c5d0d9;
	font-size: 0.85rem;
	margin: 0;
	text-align: center;
}

.sp-visionneuse-compteur {
	color: var(--wp--preset--color--menthe);
	font-family: var(--wp--preset--font-family--fira-code);
	margin-right: 0.6rem;
}

.sp-visionneuse button {
	align-items: center;
	background: rgb(16 28 44 / 0.75);
	border: 1px solid rgb(255 255 255 / 0.25);
	border-radius: 12px;
	color: var(--wp--preset--color--blanc-casse);
	cursor: pointer;
	display: flex;
	height: 48px;
	justify-content: center;
	padding: 0;
	position: absolute;
	transition: border-color 0.25s ease, background-color 0.25s ease;
	width: 48px;
	z-index: 2;
}

.sp-visionneuse button:hover {
	background-color: rgb(26 44 67 / 0.9);
	border-color: var(--wp--preset--color--menthe);
}

.sp-visionneuse button:focus-visible {
	outline: 2px solid var(--wp--preset--color--menthe);
	outline-offset: 3px;
}

.sp-visionneuse .sp-visionneuse-fermer {
	right: clamp(0.75rem, 3vw, 1.5rem);
	top: clamp(0.75rem, 3vw, 1.25rem);
}

.sp-visionneuse .sp-visionneuse-prec,
.sp-visionneuse .sp-visionneuse-suiv {
	top: 50%;
	translate: 0 -50%;
}

.sp-visionneuse .sp-visionneuse-prec {
	left: clamp(0.5rem, 2vw, 1.25rem);
}

.sp-visionneuse .sp-visionneuse-suiv {
	right: clamp(0.5rem, 2vw, 1.25rem);
}

.sp-visionneuse [hidden] {
	display: none;
}

@media (max-width: 599px) {
	/* Mobile : flèches sous l'image, pour ne pas la recouvrir. */
	.sp-visionneuse .sp-visionneuse-prec,
	.sp-visionneuse .sp-visionneuse-suiv {
		bottom: 1rem;
		top: auto;
		translate: none;
	}

	.sp-visionneuse .sp-visionneuse-prec {
		left: calc(50% - 56px);
	}

	.sp-visionneuse .sp-visionneuse-suiv {
		right: calc(50% - 56px);
	}

	.sp-visionneuse-cadre {
		padding-bottom: 5rem;
	}
}

/* Défilement de la page bloqué pendant l'ouverture. */
html.sp-visionneuse-ouverte {
	overflow: hidden;
}

/* =====================================================================
 * 0.16.4 : quatre outils, grille 2 × 2 dans le même rail
 * Ordinateur et tablette : deux colonnes (01 02 / 03 04), séparateurs
 * fins vertical et horizontal ; médias en 16:10 sur ordinateur (grille
 * large, section plus compacte). Mobile : une colonne.
 * ===================================================================== */
@media (min-width: 600px) {
	.sp-outils-rail {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.sp-outils-rail > .sp-outil + .sp-outil {
		border-left: 0;
	}

	.sp-outils-rail > .sp-outil:nth-child(even) {
		border-left: 1px solid rgb(186 248 230 / 0.12);
	}

	.sp-outils-rail > .sp-outil:nth-child(n + 3) {
		border-top: 1px solid rgb(186 248 230 / 0.12);
	}
}

/* Tablette : on annule la mise en avant pleine largeur de l'outil 01. */
@media (min-width: 600px) and (max-width: 1023px) {
	.sp-outils-rail > .sp-outil--sync {
		border-bottom: 0;
		display: block;
		grid-column: auto;
	}

	.sp-outils-rail > .sp-outil--sync > .sp-outil-corps {
		margin-top: 1.1rem !important;
	}
}

@media (min-width: 1024px) {
	.sp-outils-rail .sp-outil-media {
		aspect-ratio: 16 / 10;
	}

	.sp-outils-rail > .sp-outil {
		padding: 1.5rem 1.75rem 1.6rem;
	}
}

/* 04 : espace adhérent (en-tête « Espace adhérent », salutation, statut,
 * onglets, premiers blocs). Vignette d'administration plus petite. */
.sp-outil-media--adhesions {
	--sp-cadre-l: 130%;
	--sp-cadre-x: -1%;
	--sp-cadre-y: -1%;
	background: #f5f9ff;
}

.sp-outil-media--adhesions .sp-outil-vignette {
	aspect-ratio: 1556 / 1544;
	width: 30%;
}

.sp-outil-media--adhesions .sp-outil-loupe {
	bottom: auto;
	top: 8px;
}

/* Mobile : l'administration n'est pas affichée dans la carte (trop petite) ;
 * elle reste la deuxième vue de la visionneuse. */
@media (max-width: 599px) {
	.sp-outil-media--adhesions .sp-outil-vignette {
		display: none;
	}
}

/* =====================================================================
 * 0.16.5 : section « Outils & automatisations » plus compacte ;
 * vignette « fiche produit » dans le module Bundles.
 * ===================================================================== */
.sp-section-automatisations.has-background {
	padding-bottom: clamp(2.5rem, 1.5rem + 3vw, 4.25rem) !important;
	padding-top: clamp(2.75rem, 1.6rem + 3.4vw, 4.75rem) !important;
}

@media (min-width: 600px) {
	.sp-outils-rail > .sp-outil {
		padding-block: 1.2rem 1.3rem;
	}

	.sp-outil-corps {
		margin-top: 0.9rem !important;
	}
}

/* Médias moins hauts : l'aperçu est éditorial, le détail est dans la
 * visionneuse. */
@media (min-width: 1024px) {
	.sp-outils-rail .sp-outil-media {
		aspect-ratio: 15 / 8;
	}
}

@media (min-width: 600px) and (max-width: 1023px) {
	.sp-outils-rail .sp-outil-media {
		aspect-ratio: 16 / 10;
	}
}

@media (max-width: 599px) {
	.sp-outils-rail .sp-outil-media {
		aspect-ratio: 16 / 10;
	}

	.sp-outils-rail > .sp-outil {
		padding: 1rem 1rem 1.1rem;
	}

	.sp-outil-corps {
		margin-top: 0.8rem !important;
	}
}

/* Cadrages réajustés pour les cadres moins hauts. */
.sp-outil-media--sync {
	--sp-cadre-l: 138%;
	--sp-cadre-y: -1%;
}

.sp-outil-media--adhesions {
	--sp-cadre-l: 125%;
}

/* Vignette « fiche produit » (03) : coin bas droit, assez petite pour rester
 * sous le prix remisé du premier bundle ; le pictogramme « agrandir » passe
 * en bas à gauche. */
.sp-outil-media--bundles .sp-outil-vignette {
	aspect-ratio: 1403 / 1059;
	width: 22%;
}

.sp-outil-media--bundles .sp-outil-loupe {
	left: 8px;
	right: auto;
}

/* Vignette du sélecteur : un peu plus petite (la vue côté site domine). */
.sp-outil-media--device .sp-outil-vignette {
	width: 34%;
}

/* Lien final un peu plus proche du rail. */
.sp-section-automatisations > .sp-outils-sortie {
	margin-top: clamp(1.5rem, 1rem + 1vw, 2.25rem) !important;
}

@media (max-width: 599px) {
	.sp-outil-media--bundles .sp-outil-vignette,
	.sp-outil-media--device .sp-outil-vignette {
		display: none;
	}
}

/* =====================================================================
 * 0.17.0 : Politique de cookies (famille .sp-legal-*), menu « Informations »
 * ===================================================================== */

/* Introduction : titre sur deux lignes, comme la politique de confidentialité. */
.sp-legal-hero--cookies .sp-hero-titre {
	max-width: none;
}

/* Colophon : Folio 03 et filigrane « COOKIES » écrit à la verticale (de bas
 * en haut), en simple contour très pâle, coupé par l'introduction. */
.sp-legal-cartouche--cookies .sp-legal-cartouche-titre::after {
	content: "Folio 03";
	content: "Folio 03" / "";
}

@media (min-width: 1024px) {
	.sp-legal-cartouche--cookies::after {
		color: transparent;
		content: "COOKIES";
		content: "COOKIES" / "";
		font-family: var(--wp--preset--font-family--literata);
		font-size: clamp(5.5rem, 2.5rem + 4.6vw, 8rem);
		font-style: normal;
		font-weight: 400;
		letter-spacing: 0.02em;
		line-height: 1;
		right: -4.5rem;
		rotate: 180deg;
		top: 50%;
		translate: 0 -50%;
		-webkit-text-stroke: 1px rgb(255 255 255 / 0.07);
		white-space: nowrap;
		writing-mode: vertical-rl;
	}
}

/* ---------- Inventaire des traceurs (à remplacer ou compléter par le
 * gestionnaire de consentement) ---------- */
.sp-legal-section > .sp-cookie-inventory {
	border-left: 2px solid rgb(26 107 108 / 0.35);
	max-width: 44rem;
	padding-left: 1.1rem;
}

.sp-cookie-inventory > * {
	margin-block: 0;
}

.sp-cookie-inventory > .sp-cookie-inventory-note {
	color: #52606a;
	font-size: 0.9rem;
	line-height: 1.6;
}

.sp-cookie-inventory > .sp-legal-infos {
	border-top: 1px solid rgb(16 28 44 / 0.08);
	color: #33414b;
	font-size: 1rem;
	line-height: 1.65;
	list-style: none;
	margin-top: 1rem;
	padding: 0;
}

/* Tableau éventuellement injecté par le gestionnaire de consentement. */
.sp-cookie-inventory table {
	border-collapse: collapse;
	font-size: 0.9rem;
	margin-top: 1rem;
	width: 100%;
}

.sp-cookie-inventory :is(th, td) {
	border-bottom: 1px solid rgb(16 28 44 / 0.1);
	padding: 0.55rem 0.6rem 0.55rem 0;
	text-align: left;
	vertical-align: top;
}

/* ---------- Zone des préférences (future intégration du gestionnaire de
 * consentement : bouton, code court ou bloc) ---------- */
.sp-legal-section > .sp-cookie-preferences {
	background: rgb(26 107 108 / 0.05);
	border: 1px dashed rgb(26 107 108 / 0.35);
	border-radius: var(--sp-r-s);
	max-width: 44rem;
	padding: 1rem 1.2rem;
}

.sp-cookie-preferences > * {
	margin-block: 0;
}

.sp-cookie-preferences > .sp-cookie-preferences-texte {
	color: #46525b;
	font-size: 0.92rem;
	line-height: 1.6;
}

.sp-cookie-preferences :is(button, .wp-element-button, a.cmplz-manage-consent) {
	margin-top: 0.8rem;
}

/* ---------- Menu plein écran : zone secondaire « Informations » ----------
 * Au bas du panneau, sous « Contact » ; petite, non numérotée. Cachée tant
 * que le menu n'est pas ouvert (sur ordinateur, le menu est dans la barre). */
.sp-nav-studio .sp-menu-infos {
	display: none;
}

.sp-nav-studio .is-menu-open .sp-menu-infos {
	border-top: 1px solid rgb(255 255 255 / 0.12);
	display: block;
	margin-top: 2rem;
	order: 3;
	padding-top: 1.1rem;
}

.sp-nav-studio .is-menu-open .sp-menu-infos-titre {
	color: rgb(186 248 230 / 0.75);
	font-size: 0.66rem;
	font-weight: 700;
	letter-spacing: 0.18em;
	margin: 0 0 0.55rem;
	text-transform: uppercase;
}

.sp-nav-studio .is-menu-open .sp-menu-infos ul {
	display: flex;
	flex-wrap: wrap;
	gap: 0.2rem 1.4rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.sp-nav-studio .is-menu-open .sp-menu-infos li {
	margin: 0;
}

.sp-nav-studio .is-menu-open .sp-menu-infos a {
	color: #b7c6d2;
	display: inline-block;
	font-size: 0.875rem;
	font-weight: 500;
	line-height: 1.4;
	padding: 0.35rem 0;
	text-decoration: none;
	transition: color 0.25s ease;
}

.sp-nav-studio .is-menu-open .sp-menu-infos a:hover {
	color: var(--wp--preset--color--menthe);
}

.sp-nav-studio .is-menu-open .sp-menu-infos a:focus-visible {
	border-radius: 4px;
	box-shadow: none;
	color: var(--wp--preset--color--menthe);
	outline: 2px solid var(--wp--preset--color--menthe);
	outline-offset: 3px;
}

/* =====================================================================
 * 0.18.0 : Conditions générales de vente (famille .sp-legal-*)
 * ===================================================================== */

/* Introduction : titre sur deux lignes, comme les autres politiques. */
.sp-legal-hero--cgv .sp-hero-titre {
	max-width: none;
}

/* Colophon : Folio 04 et filigrane « CGV » (lettres empilées, simple contour
 * très pâle, comme « DATA » sur la politique de confidentialité). */
.sp-legal-cartouche--cgv .sp-legal-cartouche-titre::after {
	content: "Folio 04";
	content: "Folio 04" / "";
}

@media (min-width: 1024px) {
	.sp-legal-cartouche--cgv::after {
		color: transparent;
		content: "C\A G\A V";
		content: "C\A G\A V" / "";
		font-family: var(--wp--preset--font-family--literata);
		font-size: clamp(6.5rem, 3rem + 5.5vw, 9.5rem);
		font-style: normal;
		font-weight: 400;
		letter-spacing: 0;
		line-height: 0.8;
		right: -6.5rem;
		text-align: center;
		top: 50%;
		translate: 0 -50%;
		white-space: pre;
		-webkit-text-stroke: 1px rgb(255 255 255 / 0.07);
	}
}

@media (min-width: 1024px) and (max-width: 1279px) {
	.sp-legal-cartouche--cgv::after {
		right: -3.5rem;
	}
}

/* Sous-titres internes d'une rubrique (pages longues). */
.sp-legal-section > .sp-legal-sous-titre {
	color: var(--wp--preset--color--encre);
	font-family: inherit;
	font-size: 1.125rem;
	font-weight: 650;
	letter-spacing: -0.01em;
	line-height: 1.35;
	max-width: 44rem;
}

.sp-legal-section > * + .sp-legal-sous-titre {
	margin-top: 2.1rem;
}

.sp-legal-section > .sp-legal-titre + .sp-legal-sous-titre {
	margin-top: 0;
}

.sp-legal-section > .sp-legal-sous-titre + * {
	margin-top: 0.7rem;
}

/* Listes à puces dans le texte. */
.sp-legal-section > .sp-legal-liste {
	color: #33414b;
	font-size: 1.0625rem;
	line-height: 1.7;
	max-width: 44rem;
	overflow-wrap: anywhere;
	padding-left: 1.3rem;
}

.sp-legal-liste > li {
	margin: 0;
	padding-left: 0.2rem;
}

.sp-legal-liste > li + li {
	margin-top: 0.4rem;
}

.sp-legal-liste > li::marker {
	color: var(--wp--preset--color--sarcelle);
}

.sp-legal-liste strong {
	color: var(--wp--preset--color--encre);
	font-weight: 650;
}

/* Clause mise en évidence (paragraphe entièrement en gras). */
.sp-legal-section > p > strong:only-child {
	color: var(--wp--preset--color--encre);
	font-weight: 600;
}

/* Annexe : repère « A » à la place du numéro, dans la page et dans le sommaire. */
.sp-legal-section.sp-legal-annexe > .sp-legal-titre::before {
	content: "A";
}

.sp-legal-sommaire-liste > li.sp-legal-sommaire-annexe > a::before {
	content: "A";
}

/* Formulaire type de rétractation : fiche imprimable, lignes à compléter. */
.sp-legal-section > .sp-legal-formulaire {
	background: #fffefc;
	border: 1px solid rgb(16 28 44 / 0.12);
	border-radius: var(--sp-r-s);
	max-width: 44rem;
	padding: clamp(1.25rem, 1rem + 1.5vw, 2rem);
}

.sp-legal-formulaire > * {
	margin-block: 0;
}

.sp-legal-formulaire > * + * {
	margin-top: 1rem;
}

.sp-legal-formulaire > p {
	color: #33414b;
	font-size: 1rem;
	line-height: 1.65;
	overflow-wrap: anywhere;
}

.sp-legal-formulaire > .sp-legal-formulaire-titre {
	color: var(--wp--preset--color--sarcelle);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.sp-legal-formulaire > .sp-legal-formulaire-consigne {
	color: #52606a;
	font-style: italic;
}

.sp-legal-formulaire > .sp-legal-formulaire-champ {
	border-bottom: 1px dashed rgb(16 28 44 / 0.25);
	padding-bottom: 1.6rem;
}

.sp-legal-formulaire > .sp-legal-formulaire-note {
	color: #52606a;
	font-size: 0.9rem;
}

@media print {
	.sp-legal-formulaire {
		break-inside: avoid;
	}
}

/* =====================================================================
 * 0.19.0 : hero de l'accueil, tablette et mobile (< 1200 px) uniquement.
 * Le hero du grand écran (≥ 1200 px, composition absolue) n'est pas touché.
 * ===================================================================== */

/* Carte « Votre projet » : les trois modules sont un seul dessin vectoriel
 * (viewBox 300 × 58, preserveAspectRatio="none") qui était étiré sur toute
 * la largeur de la carte. Il garde désormais ses proportions (largeur
 * plafonnée, hauteur déduite) et ne remplit plus la carte. */
@media (max-width: 1199px) {
	/* Conteneur de référence : la zone des panneaux (même largeur que la
	 * carte, qui l'occupe entièrement sous 1200 px). */
	.sp-hero-art {
		container: sp-hero-art / inline-size;
	}

	.sp-art-principal::after {
		aspect-ratio: 300 / 58;
		height: auto;
		max-width: 100%;
		width: 18.75rem;
	}
}

/* Tablette, carte large : texte à gauche, modules à droite. Le trait
 * d'avancement passe sous le titre (les modules sont alors recadrés sans
 * leur ligne du haut). */
@media (min-width: 600px) and (max-width: 1199px) {
	@container sp-hero-art (min-width: 32rem) {
		.sp-art-principal {
			align-items: center;
			column-gap: clamp(1.5rem, 5cqi, 2.75rem);
			display: grid;
			grid-template-columns: minmax(0, 1fr) auto;
		}

		.sp-art-principal > .sp-art-label {
			grid-column: 1;
			grid-row: 1;
		}

		.sp-art-principal > .sp-art-titre {
			grid-column: 1;
			grid-row: 2;
		}

		.sp-art-principal::before {
			background:
				linear-gradient(var(--wp--preset--color--sarcelle), var(--wp--preset--color--sarcelle)) 0 0 / 38% 2px no-repeat,
				linear-gradient(rgb(16 28 44 / 0.12), rgb(16 28 44 / 0.12)) 0 0 / 100% 1px no-repeat;
			content: "";
			grid-column: 1;
			grid-row: 3;
			height: 2px;
			margin-top: 1.3rem;
			max-width: 16rem;
		}

		.sp-art-principal::after {
			aspect-ratio: 300 / 46;
			background-position: 0 100%;
			background-size: 100% calc(100% * 58 / 46);
			grid-column: 2;
			grid-row: 1 / 4;
			margin-top: 0;
			width: clamp(15rem, 44cqi, 18.75rem);
		}
	}
}

/* Mobile : CTA centrés comme un groupe, avec un vrai espace entre eux. */
@media (max-width: 599px) {
	.sp-hero-boutons {
		column-gap: 1.5rem;
		justify-content: center;
	}
}

@media (max-width: 379px) {
	.sp-hero-boutons {
		column-gap: 1rem;
	}
}

/* =====================================================================
 * 0.19.0 : Politique de cookies, sorties Complianz intégrées
 * Tout est limité aux zones .sp-cookie-inventory et .sp-cookie-preferences
 * (et au bouton .sp-gerer-cookies) : la bannière de consentement, placée
 * ailleurs dans la page (#cmplz-cookiebanner-container), n'est pas touchée.
 * ===================================================================== */

/* Signal côté serveur : le script de la bannière (#cmplz-cookiebanner-js)
 * n'est imprimé que lorsque Complianz charge réellement sa bannière. Sans lui,
 * « Gérer mes cookies » ne ferait rien : il reste masqué. */
.sp-pied-cookies,
.sp-cookie-preferences > .sp-cookie-preferences-action {
	display: none;
}

body:has(#cmplz-cookiebanner-js) .sp-pied-cookies,
body:has(#cmplz-cookiebanner-js) .sp-cookie-preferences > .sp-cookie-preferences-action {
	display: block;
}

body:has(#cmplz-cookiebanner-js) .sp-cookie-preferences > .sp-cookie-preferences-inactif {
	display: none;
}

/* Message « sans JavaScript » de Complianz : sans objet quand le gestionnaire
 * n'est pas chargé sur le site (Complianz le masque lui-même sinon). */
body:not(:has(#cmplz-cookiebanner-js)) .sp-cookie-preferences #cmplz-manage-consent-container-nojavascript {
	display: none;
}

/* Inventaire : la liste de Complianz remplace l'inventaire constaté dès
 * qu'elle contient au moins un service ; sinon l'inventaire constaté reste. */
.sp-cookie-inventory > .sp-cookie-inventory-cmplz:not(:has(.cmplz-dropdown)) {
	display: none;
}

.sp-cookie-inventory:has(.sp-cookie-inventory-cmplz .cmplz-dropdown) > .sp-cookie-inventory-constat {
	display: none;
}

.sp-cookie-inventory > :is(.sp-cookie-inventory-cmplz, .sp-cookie-inventory-constat) > * {
	margin-block: 0;
}

.sp-cookie-inventory-cmplz #cmplz-cookies-overview {
	display: grid;
	gap: 0.6rem;
	margin-top: 1rem;
}

.sp-cookie-inventory-cmplz #cmplz-cookies-overview .cmplz-dropdown {
	background: #fffefc;
	border: 1px solid rgb(16 28 44 / 0.12);
	border-radius: var(--sp-r-s);
	color: #33414b;
	font-size: 0.95rem;
	line-height: 1.6;
	margin: 0;
	overflow: hidden;
	padding: 0;
}

.sp-cookie-inventory-cmplz #cmplz-cookies-overview .cmplz-dropdown summary {
	cursor: pointer;
	list-style: none;
	padding: 0.9rem 1.1rem;
}

.sp-cookie-inventory-cmplz #cmplz-cookies-overview .cmplz-dropdown summary:focus-visible {
	border-radius: var(--sp-r-s);
	outline: 2px solid var(--wp--preset--color--sarcelle);
	outline-offset: -2px;
}

.sp-cookie-inventory-cmplz #cmplz-cookies-overview .cmplz-dropdown summary h3 {
	color: var(--wp--preset--color--encre);
	font-family: inherit;
	font-size: 1.02rem;
	font-weight: 650;
	letter-spacing: -0.01em;
	line-height: 1.35;
	margin: 0;
}

.sp-cookie-inventory-cmplz #cmplz-cookies-overview .cmplz-dropdown summary p {
	color: #52606a;
	font-size: 0.875rem;
	margin: 0.15rem 0 0;
}

.sp-cookie-inventory-cmplz #cmplz-cookies-overview .cmplz-dropdown[open] summary {
	border-bottom: 1px solid rgb(16 28 44 / 0.08);
}

.sp-cookie-inventory-cmplz #cmplz-cookies-overview .cmplz-dropdown :is(.cmplz-service-description, .cmplz-sharing-data, .cookies-per-purpose) {
	box-sizing: border-box;
	margin: 0;
	padding: 0.9rem 1.1rem 0;
}

.sp-cookie-inventory-cmplz #cmplz-cookies-overview .cmplz-dropdown :is(h4, h5) {
	color: #48545d;
	font-family: inherit;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	line-height: 1.4;
	margin: 0 0 0.3rem;
	text-transform: uppercase;
}

.sp-cookie-inventory-cmplz #cmplz-cookies-overview .cmplz-dropdown p {
	margin: 0;
}

.sp-cookie-inventory-cmplz #cmplz-cookies-overview .cmplz-dropdown .cookies-per-purpose {
	border-top: 1px solid rgb(16 28 44 / 0.08);
	margin-top: 0.9rem;
	padding-bottom: 0.9rem;
}

.sp-cookie-inventory-cmplz #cmplz-cookies-overview .cmplz-dropdown .cookies-per-purpose > div {
	overflow-wrap: anywhere;
}

.sp-cookie-inventory-cmplz #cmplz-cookies-overview .cmplz-dropdown a {
	color: var(--wp--preset--color--sarcelle);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.18em;
}

/* Notes et inventaire constaté : même style qu'avant le regroupement (0.17.0). */
.sp-cookie-inventory :is(.sp-cookie-inventory-cmplz, .sp-cookie-inventory-constat) > .sp-cookie-inventory-note {
	color: #52606a;
	font-size: 0.9rem;
	line-height: 1.6;
}

.sp-cookie-inventory .sp-cookie-inventory-constat > .sp-legal-infos {
	border-top: 1px solid rgb(16 28 44 / 0.08);
	color: #33414b;
	font-size: 1rem;
	line-height: 1.65;
	list-style: none;
	margin-top: 1rem;
	padding: 0;
}

/* Bandes claires parasites : Complianz (document.css) donne une marge de
 * 5 px au-dessus et au-dessous de chaque barre (summary) et 10 px sous le
 * tableau d'un service ouvert, entre le contenu et la bordure de la boîte. */
.sp-cookie-inventory-cmplz #cmplz-cookies-overview .cmplz-dropdown summary {
	margin: 0;
}

.sp-cookie-inventory-cmplz #cmplz-cookies-overview .cmplz-dropdown .cookies-per-purpose {
	margin-bottom: 0;
}

/* Tableau des cookies d'un service : sans le fond gris de Complianz. */
.sp-cookie-inventory-cmplz #cmplz-cookies-overview .cmplz-dropdown .cookies-per-purpose,
.sp-cookie-inventory-cmplz #cmplz-cookies-overview .cmplz-dropdown .cookies-per-purpose > div {
	background: transparent;
}

.sp-cookie-inventory-cmplz #cmplz-cookies-overview .cmplz-dropdown .cookies-per-purpose > div {
	border-color: rgb(16 28 44 / 0.08);
}

/* Préférences : bouton « Gérer mes cookies » (bouton natif Complianz : la
 * classe cmplz-manage-consent rouvre ses préférences) et zone de gestion. */
.sp-cookie-preferences > .sp-cookie-preferences-action {
	margin-top: 0;
}

.sp-cookie-preferences > .sp-cookie-preferences-action + * {
	margin-top: 0.9rem;
}

.sp-cookie-preferences .sp-gerer-cookies {
	background: var(--wp--preset--color--encre);
	border: 0;
	border-radius: var(--sp-r-s);
	color: var(--wp--preset--color--blanc-casse);
	cursor: pointer;
	font: inherit;
	font-size: 0.9rem;
	font-weight: 700;
	padding: 0.75rem 1.2rem;
	transition: background-color 0.25s ease, color 0.25s ease;
}

.sp-cookie-preferences .sp-gerer-cookies:hover {
	background: var(--wp--preset--color--sarcelle);
}

.sp-cookie-preferences .sp-gerer-cookies:focus-visible {
	outline: 2px solid var(--wp--preset--color--sarcelle);
	outline-offset: 3px;
}

.sp-cookie-preferences #cmplz-manage-consent-container {
	color: #33414b;
	font-size: 0.95rem;
	line-height: 1.6;
}

.sp-cookie-preferences #cmplz-manage-consent-container a {
	color: var(--wp--preset--color--sarcelle);
}

/* Catégories de consentement (contenu chargé par Complianz) : sélecteurs
 * précédés de .sp-cookie-preferences, plus précis que ceux de Complianz, et
 * sans effet sur les mêmes catégories dans la bannière. */
.sp-cookie-preferences #cmplz-manage-consent-container.cmplz-manage-consent-container .cmplz-categories {
	display: grid;
	gap: 0.5rem;
}

.sp-cookie-preferences #cmplz-manage-consent-container.cmplz-manage-consent-container .cmplz-categories .cmplz-category {
	background: #fffefc;
	border: 1px solid rgb(16 28 44 / 0.1);
	border-radius: 10px;
	margin: 0;
	overflow: hidden;
}

.sp-cookie-preferences #cmplz-manage-consent-container.cmplz-manage-consent-container .cmplz-categories .cmplz-category .cmplz-category-header {
	background: transparent;
	color: var(--wp--preset--color--encre);
	font-weight: 600;
}

.sp-cookie-preferences #cmplz-manage-consent-container.cmplz-manage-consent-container .cmplz-categories .cmplz-category .cmplz-category-header .cmplz-always-active {
	color: var(--wp--preset--color--sarcelle);
	font-weight: 600;
}

.sp-cookie-preferences #cmplz-manage-consent-container.cmplz-manage-consent-container .cmplz-categories .cmplz-category .cmplz-description {
	color: #52606a;
	font-size: 0.9rem;
}

.sp-cookie-preferences #cmplz-manage-consent-container.cmplz-manage-consent-container input[type="checkbox"] {
	accent-color: var(--wp--preset--color--sarcelle);
}

/* En-têtes du tableau des cookies : sans coupure au milieu d'un mot. */
.sp-cookie-inventory-cmplz #cmplz-cookies-overview .cmplz-dropdown .cookies-per-purpose h5 {
	letter-spacing: 0.03em;
	overflow-wrap: normal;
}

/* Pied de page : « Gérer mes cookies » dans la liste de la colonne
 * Informations, sous « Cookies », avec l'apparence des liens (bouton, car il
 * ouvre un panneau ; inséré par functions.php). */
.sp-pied-studio .wp-block-navigation-item.sp-pied-cookies {
	margin: 0;
}

.sp-pied-studio .sp-gerer-cookies {
	background: none;
	border: 0;
	color: inherit;
	cursor: pointer;
	font: inherit;
	font-size: 0.9375rem;
	font-weight: 400;
	line-height: 2.1;
	padding: 0;
	text-align: left;
}

.sp-pied-studio .sp-gerer-cookies:hover {
	color: var(--wp--preset--color--menthe);
}

.sp-pied-studio .sp-gerer-cookies:focus-visible {
	border-radius: 6px;
	outline: 2px solid var(--sp-focus);
	outline-offset: 5px;
}

/* =====================================================================
 * 0.19.3 : en-tête d'ordinateur (≥ 900 px, navigation en ligne)
 * ===================================================================== */
@media (min-width: 900px) {
	/* + 5 px en haut et en bas (72 → 82 px) : marge intérieure symétrique ;
	 * la barre garde sa hauteur, logo, liens et bouton restent centrés. La
	 * variable suit (ancres, sommaire collant, introduction sous l'en-tête). */
	:root {
		--sp-h-entete: 82px;
	}

	.sp-entete-studio.has-encre-background-color {
		padding-block: 5px;
	}

	.sp-entete-studio .sp-barre {
		min-height: calc(var(--sp-h-entete) - 11px);
	}

	/* L'introduction garde exactement sa position (les 10 px de l'en-tête
	 * sont repris sur sa marge haute). */
	.sp-principal > .wp-block-post-content > .sp-hero:first-child {
		padding-top: calc(var(--sp-h-entete) - 10px + var(--wp--preset--spacing--70)) !important;
	}

	.sp-principal > .wp-block-post-content > .sp-legal-hero:first-child {
		padding-top: calc(var(--sp-h-entete) - 10px + var(--wp--preset--spacing--60)) !important;
	}
}

/* 900–999 px : logo, quatre liens et bouton tiennent sur une ligne en
 * resserrant légèrement les écarts (tailles de texte inchangées). */
@media (min-width: 900px) and (max-width: 999px) {
	.sp-entete-studio .wp-block-navigation .wp-block-navigation__container {
		gap: 1.6rem;
	}

	.sp-entete-studio .sp-barre > .wp-block-group {
		gap: 1.5rem;
	}
}

/* =====================================================================
 * 0.20.0 : page 404 (templates/404.html, composition studiopeyral/page-404)
 * Introduction sombre du site (.sp-hero : trame, halo), textes et boutons
 * existants ; grand « 404 » en filigrane, dans l'esprit des filigranes des
 * pages légales (Literata, simple contour très pâle).
 * ===================================================================== */
.sp-404 {
	align-content: center;
	display: grid;
	min-height: min(46rem, calc(100svh - var(--sp-h-entete)));
	padding-block: clamp(4.5rem, 3rem + 6vw, 8rem);
}

.sp-404 > * {
	width: 100%;
}

.sp-404-contenu {
	position: relative;
}

.sp-404-contenu > * {
	margin-block: 0;
	max-width: 40rem;
	position: relative;
	z-index: 1;
}

.sp-404-contenu > .sp-404-titre {
	margin-top: 1.1rem;
	max-width: 13ch;
}

.sp-404-contenu > .sp-chapo {
	margin-top: 1.4rem;
	max-width: 34rem;
}

.sp-404-contenu > .sp-404-boutons {
	gap: 0.75rem;
	margin-top: var(--wp--preset--spacing--50);
}

.sp-404-contenu > .sp-404-lien {
	color: var(--wp--preset--color--blanc-casse);
	margin-top: 1.75rem;
}

.sp-404-lien a::after {
	color: var(--wp--preset--color--menthe);
}

/* Filigrane « 404 » : décoratif, à droite, coupé par l'introduction. */
@media (min-width: 782px) {
	.sp-404-contenu::after {
		color: transparent;
		content: "404";
		content: "404" / "";
		font-family: var(--wp--preset--font-family--literata);
		font-size: clamp(14rem, 6rem + 16vw, 24rem);
		font-style: italic;
		font-weight: 400;
		letter-spacing: -0.04em;
		line-height: 0.8;
		pointer-events: none;
		position: absolute;
		right: -1rem;
		top: 50%;
		translate: 0 -50%;
		-webkit-text-stroke: 1px rgb(186 248 230 / 0.12);
		white-space: nowrap;
		z-index: 0;
	}
}

@media (max-width: 599px) {
	/* Boutons pleine largeur et empilés, lien dessous. */
	.sp-404-contenu > .sp-404-boutons {
		flex-direction: column;
	}

	.sp-404-boutons > .wp-block-button,
	.sp-404-boutons .wp-block-button__link {
		width: 100%;
	}
}

/* Comme les pages qui commencent par une introduction sombre : l'en-tête se
 * pose sur la 404 (transparent en haut de page, fond au défilement). */
@supports selector(:has(a)) {
	body:has(.sp-principal-404) {
		--sp-opacite-entete: 0.72;
	}

	.sp-js body:has(.sp-principal-404) {
		--sp-opacite-entete: 0;
	}

	.sp-js:not(.sp-defile) body:has(.sp-principal-404) .sp-entete-studio {
		backdrop-filter: none;
	}

	body:has(.sp-principal-404) .sp-principal-404 {
		margin-top: calc(-1 * var(--sp-h-entete)) !important;
	}

	.sp-principal-404 > .sp-404 {
		min-height: min(calc(46rem + var(--sp-h-entete)), 100svh);
		padding-top: calc(var(--sp-h-entete) + clamp(4.5rem, 3rem + 6vw, 8rem));
	}
}