/*
 * Sound Up Studio : mise en page.
 *
 * Couleurs : theme.json pose la palette claire (variables --wp--preset--color--*) ; le sombre et, dans le labo, la
 * palette d'origine d'IdeaWeb les redéfinissent ici. Raccourcis posés sur body : --fond, --surface, --texte, --titre,
 * --couleur, --lien, --decor, --bouton, --bouton-texte, --factory.
 * Les états de départ des effets de mouvement sont dans effets.css.
 */

/* Police de secours aux proportions de Poppins : rien ne saute quand Poppins arrive. */
@font-face {
	font-family: "Poppins Fallback";
	src: local("Arial");
	ascent-override: 93.62%;
	descent-override: 31.21%;
	line-gap-override: 8.92%;
	size-adjust: 112.16%;
}

:root {
	color-scheme: light;
	/* Ondes de fond : couleur d'un ruban de loin, de près, de l'éclat qui court le long des traits, et force (opacité d'un
	   trait du milieu, de près). Sous un texte, ondes.js les efface juste assez pour l'AA. */
	--su-onde-loin: #8eaea8;
	--su-onde-pres: #2a8587;
	--su-onde-eclat: #d29d0a;
	--su-onde-lueur: #d2ae5a; /* reflets et lueurs : dans les bornes des trois autres, canal par canal */
	--su-onde-force: 0.6;
	--su-fond-trait: 0.17; /* opacité du dessin immobile (sans JavaScript) : partout sous le plafond de l'AA */
	--su-courbe: var(--wp--custom--courbe, cubic-bezier(0.22, 1, 0.36, 1));
	--su-trait: var(--wp--custom--trait, 1.5px);
	--su-marge: clamp(1.25rem, 3.2vw, 3rem);
	--su-large: 1320px;
	--su-encre: #062626; /* texte posé sur le turquoise, dans les deux thèmes (6:1) */
	--su-erreur: #b3261e; /* messages des formulaires : 6,5:1 sur blanc, 6:1 sur le fond crème */
	/* Photos au repos (« Photos ») : leur blanc et leur noir s'arrêtent sur deux couleurs du thème, le reste garde son
	   contraste et sa chaleur. Clair : la photo en produit sur le fond crème (blanc → fond), puis le voile vert profond
	   en « éclaircir » (le noir ne descend pas sous lui). Sombre : la photo en « éclaircir » sur le fond du cadre, puis
	   le voile crème des titres en produit (blanc → crème, noir → fond de la page) ; fond du cadre = fond de la page /
	   voile, canal par canal. Saturation au repos, entière à l'éveil. */
	--su-photo-voile: #062626;
	--su-photo-voile-mode: lighten;
	--su-photo-fond: 249 246 238;
	--su-photo-mode: multiply;
	--su-photo-saturation: 0.65;
}

/* ---------- Palettes ---------- */

/* Couleurs d'origine d'IdeaWeb (labo seulement, pour comparer). */
:root[data-palette="ideaweb"],
:root[data-palette="ideaweb"] body {
	--wp--preset--color--texte: #4b6e6b;
	--wp--preset--color--titre: #003836;
	--wp--preset--color--titre-couleur: #7fbdbb;
	--wp--preset--color--lien: #257f7c;
	--wp--preset--color--decor: #7fbdbb;
	--wp--preset--color--bouton: #f4e300;
	--wp--preset--color--bouton-texte: #003f3d;
}

/* Sombre : choisi avec l'interrupteur, ou demandé par le système quand rien n'est choisi. */
:root[data-theme="sombre"],
:root[data-theme="sombre"] body {
	color-scheme: dark;
	--su-onde-loin: #1f5a58;
	--su-onde-pres: #5ec7c5;
	--su-onde-eclat: #f5cf5a;
	--su-onde-lueur: #d9cfc5;
	--su-onde-force: 0.58;
	--su-fond-trait: 0.118;
	--su-erreur: #ffb4ab;
	--su-photo-voile: #f1e2cd;
	--su-photo-voile-mode: multiply;
	--su-photo-fond: 6 43 47;
	--su-photo-mode: lighten;
	--wp--preset--color--fond: #062626;
	--wp--preset--color--surface: #003836;
	--wp--preset--color--texte: #d9cfbf;
	--wp--preset--color--titre: #f1e2cd;
	--wp--preset--color--titre-couleur: #7fbdbb;
	--wp--preset--color--lien: #42adaf;
	--wp--preset--color--decor: #42adaf;
	--wp--preset--color--bouton: #fcc119;
	--wp--preset--color--bouton-texte: #062626;
	--wp--preset--color--factory: #b58fd3;
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="clair"]),
	:root:not([data-theme="clair"]) body {
		color-scheme: dark;
		--su-onde-loin: #1f5a58;
		--su-onde-pres: #5ec7c5;
		--su-onde-eclat: #f5cf5a;
		--su-onde-lueur: #d9cfc5;
		--su-onde-force: 0.58;
		--su-fond-trait: 0.118;
		--su-erreur: #ffb4ab;
		--su-photo-voile: #f1e2cd;
		--su-photo-voile-mode: multiply;
		--su-photo-fond: 6 43 47;
		--su-photo-mode: lighten;
		--wp--preset--color--fond: #062626;
		--wp--preset--color--surface: #003836;
		--wp--preset--color--texte: #d9cfbf;
		--wp--preset--color--titre: #f1e2cd;
		--wp--preset--color--titre-couleur: #7fbdbb;
		--wp--preset--color--lien: #42adaf;
		--wp--preset--color--decor: #42adaf;
		--wp--preset--color--bouton: #fcc119;
		--wp--preset--color--bouton-texte: #062626;
		--wp--preset--color--factory: #b58fd3;
	}
}

/* Sombre aux couleurs d'IdeaWeb : seuls le jaune et le turquoise pâle changent. */
:root[data-palette="ideaweb"][data-theme="sombre"],
:root[data-palette="ideaweb"][data-theme="sombre"] body {
	--wp--preset--color--titre-couleur: #7fbdbb;
	--wp--preset--color--decor: #7fbdbb;
	--wp--preset--color--bouton: #f4e300;
}

@media (prefers-color-scheme: dark) {
	:root[data-palette="ideaweb"]:not([data-theme="clair"]),
	:root[data-palette="ideaweb"]:not([data-theme="clair"]) body {
		--wp--preset--color--titre-couleur: #7fbdbb;
		--wp--preset--color--decor: #7fbdbb;
		--wp--preset--color--bouton: #f4e300;
	}
}

body {
	--fond: var(--wp--preset--color--fond);
	--surface: var(--wp--preset--color--surface);
	--texte: var(--wp--preset--color--texte);
	--titre: var(--wp--preset--color--titre);
	--couleur: var(--wp--preset--color--titre-couleur);
	--lien: var(--wp--preset--color--lien);
	--decor: var(--wp--preset--color--decor);
	--bouton: var(--wp--preset--color--bouton);
	--bouton-texte: var(--wp--preset--color--bouton-texte);
	--factory: var(--wp--preset--color--factory);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-wrap: break-word;
}

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

html {
	scroll-padding-top: 6rem;
}

@media (prefers-reduced-motion: no-preference) {
	html:not([data-calme]) {
		scroll-behavior: smooth;
	}
}

/* GSAP réécrit « smooth » directement sur la page après chaque recalcul : le calme demandé en cours de visite
   (réglage de l'appareil ou du site) doit quand même l'emporter. */
@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto !important;
	}
}

html[data-calme] {
	scroll-behavior: auto !important;
}

.wp-site-blocks {
	overflow-x: clip;
}

.wp-site-blocks > * {
	margin-block-start: 0;
}

/* Ondes de fond (effet 13) : fixes à l'écran, sous tout le contenu ; une section à fond plein les cache. Hauteur du
   plus grand écran : la barre d'adresse du téléphone qui se replie ne les redimensionne pas.
   ondes.js les dessine en mouvement dans un canvas. Sans lui (pas de JavaScript, effet coupé), le même dessin immobile
   (ondes.svg, refait par npm run ondes), en masque sur la couleur du décor : large comme l'écran, sans être plus étroit
   que 1,6 fois sa hauteur ni plus large que 1,6 fois l'écran, comme le canvas. */
.su-fond {
	position: fixed;
	top: 0;
	left: 0;
	z-index: -1;
	width: 100%;
	height: 100lvh;
	overflow: hidden;
	pointer-events: none;
}

.su-fond::before {
	content: "";
	position: absolute;
	inset: 0;
	background-color: var(--decor);
	opacity: var(--su-fond-trait);
	-webkit-mask: url("../images/ondes.svg") center / clamp(100%, 160lvh, 160%) 100% no-repeat;
	mask: url("../images/ondes.svg") center / clamp(100%, 160lvh, 160%) 100% no-repeat;
}

.su-fond.est-vivant::before {
	content: none;
}

.su-fond__toile {
	display: block;
	width: 100%;
	height: 100%;
}

/* Le canvas se met en place : le dessin immobile n'apparaît pas entre-temps, et les ondes arrivent en fondu. */
html.js:not([data-sans~="13"]) .su-fond:not(.est-vivant)::before {
	content: none;
}

@media (prefers-reduced-motion: no-preference) {
	html:not([data-calme]) .su-fond__toile {
		animation: su-ondes-entree 1.8s var(--su-courbe) both;
	}
}

@keyframes su-ondes-entree {
	from {
		opacity: 0;
	}
}

::selection {
	background-color: var(--bouton);
	color: var(--bouton-texte);
}

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

a {
	text-decoration-thickness: 1px;
	text-underline-offset: 0.22em;
}

a:hover {
	text-decoration-thickness: 2px;
}

strong,
b {
	font-weight: 600;
}

.visuellement-cache {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* ---------- Titres et mots ---------- */

.su-titre {
	font-size: var(--wp--preset--font-size--titre);
	font-weight: 700;
	line-height: 0.98;
	text-transform: uppercase;
	text-wrap: balance;
}

.su-titre .su-couleur,
.su-titre .su-contour {
	display: block;
}

.su-titre .su-contour {
	font-weight: 500;
}

.su-couleur {
	color: var(--couleur);
}

.su-contour {
	color: transparent;
	-webkit-text-stroke: var(--su-trait) var(--titre);
}

.su-petit {
	display: block;
	margin-top: 1.25em;
	font-size: clamp(1rem, 0.9rem + 0.4vw, 1.25rem);
	font-weight: 700;
	line-height: 1.3;
}

.su-vertical {
	display: inline-block;
	writing-mode: vertical-rl;
	rotate: 180deg;
}

/* Grand mot décoratif en contour, derrière une section (effet 02). */
.su-mot-fond {
	position: absolute;
	z-index: -1;
	margin: 0;
	font-family: var(--wp--preset--font-family--syncopate);
	font-size: var(--wp--preset--font-size--geant);
	font-weight: 700;
	line-height: 0.85;
	text-transform: uppercase;
	white-space: nowrap;
	color: transparent;
	-webkit-text-stroke: 1px var(--decor);
	pointer-events: none;
	user-select: none;
}

.su-mot-fond--vertical {
	writing-mode: vertical-rl;
	text-orientation: upright;
	letter-spacing: -0.12em;
}

@media (forced-colors: active) {
	.su-contour,
	.su-mot-fond {
		color: CanvasText;
		-webkit-text-stroke: 0;
	}
}

/* Pastille ronde à icône devant un sous-titre (icône : --su-icone). */
.su-pastille {
	position: relative;
	display: flex;
	align-items: center;
	min-height: 4.25rem;
	padding-left: 5.5rem;
	font-size: clamp(1.2rem, 0.95rem + 1vw, 1.875rem);
	font-weight: 700;
	line-height: 1.12;
	text-transform: uppercase;
	color: var(--couleur);
}

.su-pastille::before,
.su-pastille::after {
	content: "";
	position: absolute;
	top: 50%;
	translate: 0 -50%;
}

.su-pastille::before {
	left: 0;
	width: 4.25rem;
	aspect-ratio: 1;
	border: var(--su-trait) solid var(--titre);
	border-radius: 50%;
}

.su-pastille::after {
	left: 1.1rem;
	width: 2.05rem;
	aspect-ratio: 1;
	background-color: var(--titre);
	-webkit-mask: var(--su-icone) center / contain no-repeat;
	mask: var(--su-icone) center / contain no-repeat;
}

.su-pastille--ordi,
.su-carte--ordi {
	--su-icone: url(../images/ordi.svg);
}

.su-pastille--micro,
.su-carte--micro {
	--su-icone: url(../images/micro.svg);
}

.su-pastille--enceinte,
.su-carte--enceinte {
	--su-icone: url(../images/enceinte.svg);
}

.su-pastille--bulles,
.su-carte--bulles {
	--su-icone: url(../images/bulles.svg);
}

.su-chapo {
	max-width: 46rem;
	font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);
	line-height: 1.6;
}

/* ---------- Boutons ---------- */

.wp-block-button__link {
	transition: background-color 0.3s var(--su-courbe), color 0.3s var(--su-courbe), box-shadow 0.3s var(--su-courbe);
}

/* Lueur orangée : l'ombre signature du site. */
.wp-block-button__link:hover,
.wp-block-button__link:focus-visible {
	box-shadow: 0 0.75rem 1.75rem -0.6rem rgb(242 140 40 / 55%);
}

.wp-block-button.is-style-outline > .wp-block-button__link {
	padding: calc(0.85em - var(--su-trait)) calc(1.7em - var(--su-trait));
	border: var(--su-trait) solid currentColor;
	background-color: transparent;
	color: var(--titre);
}

.wp-block-button.is-style-outline > .wp-block-button__link:hover {
	background-color: var(--titre);
	color: var(--fond);
	box-shadow: none;
}

/* Rond jaune à flèche (« Tous les articles »). */
.su-rond {
	position: relative;
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	gap: 0.6rem;
	font-weight: 600;
	color: var(--titre);
	text-decoration: none;
}

.su-rond::before {
	content: "";
	width: 3.25rem;
	aspect-ratio: 1;
	border-radius: 50%;
	background-color: var(--bouton);
	transition: box-shadow 0.3s var(--su-courbe);
}

/* Flèche dessinée par-dessus le rond (et non découpée dedans : en sombre, le fond de page la ferait disparaître). */
.su-rond::after {
	content: "";
	position: absolute;
	top: 1.05rem;
	left: calc(50% - 0.5rem);
	width: 1rem;
	height: 1.15rem;
	background-color: var(--bouton-texte);
	-webkit-mask: url(../images/fleche.svg) center / contain no-repeat;
	mask: url(../images/fleche.svg) center / contain no-repeat;
	rotate: -90deg;
	pointer-events: none;
}

.su-rond:hover::before {
	box-shadow: 0 0.75rem 1.75rem -0.6rem rgb(242 140 40 / 55%);
}

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

.su-entete {
	--su-logo-repos: clamp(4.75rem, 3.9rem + 3vw, 7.25rem);
	--su-logo-compact: 4rem;
	position: sticky;
	top: 0;
	z-index: 30;
	view-transition-name: entete;
	transition: margin-bottom 0.45s var(--su-courbe);
}

/* L'en-tête rétrécit au défilement mais garde sa place dans la page : sans cette marge, tout le contenu remonterait
   d'un coup, et les effets au défilement perdraient leurs repères. Hauteur perdue = celle du logo (largeur × 340/419)
   et 2 × 0,45 rem de marge intérieure ; même durée et même courbe que le rétrécissement, la somme reste constante. */
html.defile .su-entete {
	margin-bottom: calc((var(--su-logo-repos) - var(--su-logo-compact)) * 340 / 419 + 0.9rem);
}

.admin-bar .su-entete {
	top: var(--wp-admin--admin-bar--height, 0px);
}

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

.su-entete__barre {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem 2rem;
	padding: 0.9rem var(--su-marge);
	transition: padding 0.45s var(--su-courbe);
}

html.defile .su-entete__barre {
	padding-block: 0.45rem;
}

/* Fond givré sur un calque à part : posé sur la barre elle-même, le flou enfermerait le menu plein écran du téléphone
   dans la hauteur de la barre. */
.su-entete__barre::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	transition: background-color 0.45s var(--su-courbe), box-shadow 0.45s var(--su-courbe);
}

html.defile .su-entete__barre::before {
	background-color: color-mix(in srgb, var(--fond) 84%, transparent);
	-webkit-backdrop-filter: blur(16px) saturate(1.3);
	backdrop-filter: blur(16px) saturate(1.3);
	box-shadow: 0 1px 0 color-mix(in srgb, var(--titre) 12%, transparent);
}

.su-logo {
	display: block;
	flex: none;
	width: clamp(4.75rem, 3.9rem + 3vw, 7.25rem);
	aspect-ratio: 419 / 340;
	background-color: var(--titre);
	-webkit-mask: url(../images/logo.svg) center / contain no-repeat;
	mask: url(../images/logo.svg) center / contain no-repeat;
	transition: width 0.45s var(--su-courbe);
}

.su-entete .su-logo {
	width: var(--su-logo-repos);
}

html.defile .su-entete .su-logo {
	width: var(--su-logo-compact);
}

@media (forced-colors: active) {
	.su-logo {
		forced-color-adjust: none;
		background-color: CanvasText;
	}
}

.su-entete__actions {
	display: flex;
	align-items: center;
	gap: 0.5rem 1.25rem;
}

/* Sans marge (WordPress en ajoute une de 1,5 rem) : le menu reste aligné sur le centre du logo. */
.su-entete__barre > .su-entete__actions {
	margin-block: 0;
}

.su-entete__actions > * {
	margin: 0;
}

/* Menu : liens soulignés de jaune au survol et sur la page en cours. */
.su-menu .wp-block-navigation__container {
	gap: 0.25rem 1.4rem;
}

.su-menu .wp-block-navigation-item__content {
	padding-block: 0.3rem;
	color: var(--titre);
	text-decoration: none;
	background: linear-gradient(var(--bouton), var(--bouton)) 0 100% / 0 2px no-repeat;
	transition: background-size 0.35s var(--su-courbe);
}

.su-menu .wp-block-navigation-item__content:hover,
.su-menu .wp-block-navigation-item__content:focus-visible,
.su-menu .current-menu-item > .wp-block-navigation-item__content,
.su-menu .current-menu-ancestor > .wp-block-navigation-item__content {
	background-size: 100% 2px;
}

.su-entete .su-menu:not(.has-background) .wp-block-navigation__submenu-container {
	min-width: 18rem;
	padding: 0.5rem;
	border: 0;
	border-radius: 0.9rem;
	background-color: var(--surface);
	color: var(--titre);
	box-shadow: 0 1.25rem 2.5rem -1rem rgb(0 40 40 / 30%);
}

.su-entete .su-menu .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	padding: 0.55rem 0.8rem;
	border-radius: 0.5rem;
	background: none;
}

.su-entete .su-menu .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover,
.su-entete .su-menu .wp-block-navigation__submenu-container .wp-block-navigation-item__content:focus-visible {
	background-color: color-mix(in srgb, var(--decor) 16%, transparent);
}

/* Menu replié jusqu'à 1100 px : sept entrées, le logo, l'interrupteur et « Devis » ne tiennent pas sur une ligne. */
@media (min-width: 600px) and (max-width: 1099px) {
	.su-entete .su-menu .wp-block-navigation__responsive-container:not(.is-menu-open) {
		display: none;
	}

	.su-entete .su-menu .wp-block-navigation__responsive-container-open {
		display: flex;
	}
}

/* Sans JavaScript, le menu replié ne peut pas s'ouvrir : ses entrées passent en ligne sous le logo et « Devis », et
   l'en-tête reste en haut de la page au lieu de suivre le défilement. Sous-entrées laissées aux pages Studio et
   Services, qui y mènent toutes. */
@media (scripting: none) and (max-width: 1099px) {
	.su-entete {
		position: relative;
	}

	.su-entete__barre {
		flex-wrap: wrap;
	}

	.su-entete__actions {
		display: contents;
	}

	.su-entete__actions > .su-menu {
		order: 3;
		flex-basis: 100%;
	}

	.su-entete .su-menu .wp-block-navigation__responsive-container-open,
	.su-entete .su-menu .wp-block-navigation__responsive-container-close,
	.su-entete .su-menu .wp-block-navigation__submenu-icon,
	.su-entete .su-menu .wp-block-navigation__submenu-container {
		display: none;
	}

	.su-entete .su-menu .wp-block-navigation__responsive-container:not(.is-menu-open) {
		display: block;
		position: relative;
		width: 100%;
	}

	.su-entete .su-menu .wp-block-navigation__container {
		justify-content: flex-start;
		gap: 0.15rem 1.1rem;
	}
}

.su-entete .su-menu .wp-block-navigation__responsive-container-open,
.su-entete .su-menu .wp-block-navigation__responsive-container-close {
	color: var(--titre);
}

.su-entete .su-menu:not(.has-background) .wp-block-navigation__responsive-container.is-menu-open {
	padding: var(--su-marge);
	background-color: var(--fond);
	color: var(--titre);
}

.su-entete .su-menu .is-menu-open .wp-block-navigation__responsive-container-content {
	padding-top: 3.5rem;
}

.su-entete .su-menu .is-menu-open .wp-block-navigation__container {
	gap: 0.6rem;
}

.su-entete .su-menu .is-menu-open .wp-block-navigation-item__content {
	font-size: 1.5rem;
	font-weight: 600;
	text-transform: uppercase;
}

.su-entete .su-menu .is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	padding: 0.2rem 0;
	font-size: 1.0625rem;
	font-weight: 400;
	text-transform: none;
}

/* Dans le menu plein écran, les sous-entrées suivent leur entrée : alignées à droite, sans la carte du grand écran. */
.su-entete .su-menu:not(.has-background) .is-menu-open .wp-block-navigation__submenu-container {
	min-width: 0;
	padding: 0 0 0.4rem;
	border-radius: 0;
	background-color: transparent;
	box-shadow: none;
}

.su-entete .su-menu .is-menu-open .wp-block-navigation__submenu-container,
.su-entete .su-menu .is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item {
	align-items: flex-end;
	text-align: right;
}

/* Interrupteur clair/sombre. */
.su-bascule {
	display: inline-grid;
	place-items: center;
	flex: none;
	width: 2.75rem;
	aspect-ratio: 1;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background-color: transparent;
	color: var(--titre);
	cursor: pointer;
	transition: background-color 0.3s var(--su-courbe);
}

.su-bascule:hover {
	background-color: color-mix(in srgb, var(--decor) 18%, transparent);
}

.su-bascule[hidden] {
	display: none;
}

.su-bascule[aria-pressed="true"] svg {
	scale: -1 1;
}

.su-devis .wp-block-button__link {
	padding: 0.7em 1.35em;
}

.su-graduation {
	position: absolute;
	top: 0;
	right: 0.4rem;
	width: 0.85rem;
	height: 4.5rem;
	background-color: var(--decor);
	-webkit-mask: url(../images/graduation.svg) top / contain no-repeat;
	mask: url(../images/graduation.svg) top / contain no-repeat;
	transition: opacity 0.45s var(--su-courbe);
}

html.defile .su-graduation {
	opacity: 0;
}

@media (max-width: 1099px) {
	.su-graduation {
		display: none;
	}
}

@media (max-width: 599px) {
	.su-entete__actions {
		gap: 0.35rem;
	}

	.su-entete__actions > .su-menu {
		order: 3;
	}

	.su-devis .wp-block-button__link {
		padding: 0.65em 1.05em;
		font-size: 0.8125rem;
	}
}

/* ---------- Sections ---------- */

.su-principal {
	position: relative;
}

.su-section {
	position: relative;
	padding: clamp(4.5rem, 9vw, 8.5rem) var(--su-marge);
	isolation: isolate;
}

.su-section > * {
	max-width: var(--su-large);
	margin-inline: auto;
}

/* Deux colonnes, l'image va jusqu'au bord de l'écran. Centrage vertical : WordPress impose « align-items: normal
   !important » à toutes les colonnes. */
.su-section > .su-duo {
	max-width: none;
	margin-inline: calc(-1 * var(--su-marge));
	gap: clamp(2rem, 5vw, 5.5rem);
	align-items: center !important;
}

.su-duo > .su-duo__texte {
	padding-left: max(var(--su-marge), calc((100% - var(--su-large)) / 2));
	container-type: inline-size;
}

/* Le titre suit la largeur de sa colonne : le mot le plus long (« Accompagnement », 10,2 em) tient sur une ligne. */
.su-duo__texte .su-titre {
	font-size: min(var(--wp--preset--font-size--titre), 9.6cqi);
}

.su-duo--inverse > .su-duo__texte {
	padding-right: max(var(--su-marge), calc((100% - var(--su-large)) / 2));
	padding-left: 0;
}

.su-duo__texte > * + * {
	margin-block-start: 1.25rem;
}

.su-duo__texte > .su-pastille {
	margin-block: 1.75rem 1.75rem;
}

.su-duo__texte > .wp-block-buttons {
	margin-block-start: 2.25rem;
}

.su-duo__image .wp-block-image {
	margin: 0;
}

.su-duo__image img {
	width: 100%;
}

@media (max-width: 781px) {
	.su-section > .su-duo {
		gap: 2.5rem;
	}

	.su-duo > .su-duo__texte,
	.su-duo--inverse > .su-duo__texte {
		padding-inline: var(--su-marge);
	}

	.su-duo--inverse > .su-duo__image {
		order: 2;
	}
}

/* Texte sur deux colonnes de lecture. */
.su-colonnes-texte {
	columns: 2 17rem;
	column-gap: 2.5rem;
}

.su-colonnes-texte > * {
	break-inside: avoid;
}

.su-colonnes-texte > * + * {
	margin-block-start: 1.1rem;
}

/* ---------- Accueil : bandeau ---------- */

.su-hero {
	display: grid;
	grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr);
	align-items: center;
	gap: clamp(1.5rem, 4vw, 4.5rem);
	min-height: min(54rem, calc(100svh - 6.5rem));
	padding-block: clamp(1rem, 2.5vw, 2.5rem) clamp(4rem, 8vw, 7rem);
}

.su-hero > * {
	max-width: none;
	margin: 0;
}

.su-hero__visuel {
	position: relative;
	margin-left: calc(-1 * var(--su-marge));
	container-type: inline-size;
}

.su-hero__visuel > * {
	margin: 0;
}

/* Coin arrondi découpé, pas border-radius : sous le masque à trois calques (« Photos »), un border-radius laisse passer
   un fil le long de sa courbe. */
.su-hero__image {
	clip-path: inset(0 round 0 1.5rem 0 0);
}

.su-hero__image img {
	width: 100%;
}

/* « SOUND UP STUDIO » en vrai texte, sous la photo (l'ancien site l'affichait en image), et devant elle : positionné
   comme son cadre (« Photos »). */
.su-lettrage {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	width: max-content;
	margin: -14cqi 0 0 max(var(--su-marge), 3cqi) !important;
	font-size: 22cqi;
	font-weight: 800;
	line-height: 0.82;
	text-transform: uppercase;
	color: var(--titre);
	user-select: none;
}

.su-lettrage__ligne {
	display: flex;
	align-items: stretch;
	gap: 0.06em;
	margin-top: 0.02em;
}

.su-lettrage__up {
	font-weight: 500;
	color: var(--couleur);
}

.su-lettrage__studio {
	display: grid;
	place-items: center;
	padding: 0.1em 0.03em;
	font-size: 0.2em;
	font-weight: 400;
	letter-spacing: 0.04em;
	line-height: 1;
	writing-mode: vertical-rl;
	rotate: 180deg;
	background-color: var(--titre);
	color: var(--fond);
}

.su-hero__texte {
	position: relative;
	padding-right: clamp(0rem, 4vw, 4rem);
	container-type: inline-size;
}

.su-hero__texte > * + * {
	margin-block-start: 1.5rem;
}

/* « D’enregistrement » (9,8 em) tient toujours sur une ligne : la taille suit aussi la colonne. */
.su-hero__titre {
	font-size: min(clamp(2.1rem, 1.15rem + 2.85vw, 3.6rem), 10cqi);
}

.su-hero__titre .su-contour {
	margin-top: 0.45em;
}

.su-hero__titre .su-petit {
	text-align: right;
}

.su-hero__texte .su-chapo {
	margin-block-start: 1.75rem;
}

.su-hero__texte .wp-block-buttons {
	margin-block-start: 2rem;
}

.su-hero__texte .su-reseaux {
	margin-block-start: 2.25rem;
}

/* Souris « Défiler » : vers les besoins. */
.su-defiler {
	position: absolute;
	right: max(1rem, calc(var(--su-marge) / 2));
	bottom: clamp(1.5rem, 4vw, 3rem);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.6rem;
	color: var(--titre);
	text-decoration: none;
}

.su-defiler::before {
	content: "";
	width: 1px;
	height: clamp(5rem, 14vh, 15rem);
	background-color: var(--decor);
}

.su-defiler__souris {
	width: 1.6rem;
	aspect-ratio: 204 / 313;
	background-color: currentColor;
	-webkit-mask: url(../images/souris.svg) center / contain no-repeat;
	mask: url(../images/souris.svg) center / contain no-repeat;
}

.su-defiler__texte {
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	writing-mode: vertical-rl;
	rotate: 180deg;
}

@media (max-width: 899px) {
	.su-hero {
		grid-template-columns: minmax(0, 1fr);
		min-height: 0;
	}

	.su-hero__visuel {
		margin-right: calc(-1 * var(--su-marge));
	}

	.su-hero__image {
		clip-path: none;
	}

	.su-hero__texte {
		padding-right: 0;
	}

	.su-defiler {
		display: none;
	}
}

/* ---------- Accueil : besoins ---------- */

.su-besoins .su-titre {
	margin-bottom: clamp(2rem, 4vw, 3.5rem);
}

.su-besoins__autre {
	margin-block-start: 2rem;
	text-align: center;
}

.su-cartes {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 1.25rem;
}

.su-cartes > * {
	margin: 0;
}

@media (max-width: 1099px) {
	.su-cartes {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 599px) {
	.su-cartes {
		grid-template-columns: minmax(0, 1fr);
	}
}

.su-carte {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 0.8rem;
	padding: 6rem 1.75rem 2rem;
	border: 1px solid color-mix(in srgb, var(--titre) 10%, transparent);
	border-radius: 1.25rem;
	background-color: var(--surface);
	transition: translate 0.45s var(--su-courbe), box-shadow 0.45s var(--su-courbe), border-color 0.45s var(--su-courbe);
}

.su-carte > * {
	margin: 0;
}

.su-carte::before {
	content: "";
	position: absolute;
	top: 1.9rem;
	left: 1.75rem;
	width: 2.5rem;
	height: 2.75rem;
	background-color: var(--titre);
	-webkit-mask: var(--su-icone) left center / contain no-repeat;
	mask: var(--su-icone) left center / contain no-repeat;
}

.su-carte:hover {
	translate: 0 -0.3rem;
	border-color: color-mix(in srgb, var(--decor) 60%, transparent);
	box-shadow: 0 1.5rem 2.5rem -1.5rem rgb(0 40 40 / 30%);
}

.su-carte:has(a:focus-visible) {
	outline: 2px solid var(--lien);
	outline-offset: 3px;
}

.su-carte__titre {
	font-size: 1.25rem;
	line-height: 1.15;
	text-transform: uppercase;
}

.su-carte__titre a {
	color: var(--titre);
	text-decoration: none;
}

.su-carte__titre a:focus-visible {
	outline: none;
}

/* Toute la carte est cliquable ; la flèche suit le survol. */
.su-carte__titre a::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
}

.su-carte__titre::after {
	content: "";
	position: absolute;
	top: 2.2rem;
	right: 1.75rem;
	width: 0.85rem;
	height: 1rem;
	background-color: var(--lien);
	-webkit-mask: url(../images/fleche.svg) center / contain no-repeat;
	mask: url(../images/fleche.svg) center / contain no-repeat;
	rotate: -90deg;
	transition: translate 0.45s var(--su-courbe);
}

.su-carte:hover .su-carte__titre::after {
	translate: 0.3rem 0;
}

.su-carte__etiquette {
	position: absolute;
	top: 2.2rem;
	left: 5rem;
	padding: 0.15em 0.65em;
	border: 1px solid currentColor;
	border-radius: 999px;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	line-height: 1.5;
	text-transform: uppercase;
	color: var(--lien);
	/* Le clic traverse l'étiquette jusqu'au lien de la carte. */
	pointer-events: none;
}

.su-carte--factory .su-carte__etiquette {
	color: var(--factory);
}

/* ---------- Accueil : chiffres ---------- */

.su-chiffres {
	padding-block: 0 clamp(2rem, 5vw, 4rem);
}

.su-compteurs {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 2rem 0;
	margin-block: 0;
	padding: 0;
}

.su-compteurs > div {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	padding: 0.25rem clamp(1rem, 2.5vw, 2rem);
	border-left: 1px solid color-mix(in srgb, var(--decor) 70%, transparent);
}

.su-compteurs dt {
	font-size: 0.8125rem;
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.su-compteurs dd {
	margin: 0;
	font-size: clamp(2.5rem, 1.6rem + 3.2vw, 4.75rem);
	font-weight: 700;
	line-height: 1;
	font-variant-numeric: tabular-nums;
	color: var(--titre);
}

/* Unité en minuscules : « M² » se lirait mégamètre carré. Teinte des liens : à cette taille, la turquoise des titres
   n'atteint pas le contraste AA en thème clair. */
.su-compteurs small {
	font-size: 0.3em;
	font-weight: 600;
	letter-spacing: 0.06em;
	color: var(--lien);
}

@media (max-width: 781px) {
	.su-compteurs {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* ---------- Accueil : photos des duos, galerie ---------- */

/* Style « Photo détourée » : la photo se décale au défilement (effet 05). Arrondie du côté du texte, comme dans les
   pages composées ; d'un bord à l'autre de l'écran sur téléphone. */
.su-duo__image .is-style-detoure {
	position: relative;
	border-radius: 1.5rem 0 0 1.5rem;
}

.su-duo--inverse .su-duo__image .is-style-detoure {
	border-radius: 0 1.5rem 1.5rem 0;
}

@media (max-width: 781px) {
	.su-duo .su-duo__image .is-style-detoure {
		border-radius: 0;
	}
}

/* Sans « !important » (la spécificité suffit face aux marges de WordPress) : quand GSAP épingle la galerie (effet 12),
   il doit pouvoir lui retirer sa marge, sinon elle saute vers le bas au moment de s'arrêter. */
:root .su-galerie.wp-block-group {
	margin-block-start: clamp(3.5rem, 7vw, 6rem);
}

/* La galerie va d'un bord à l'autre de l'écran. Largeur explicite : quand GSAP l'épingle (effet 12), il annule ses marges
   et fige sa largeur du moment ; son enveloppe, qui prend sa place dans la section, ne doit pas être bridée à la colonne. */
.su-section > .su-galerie {
	max-width: none;
	width: calc(100% + 2 * var(--su-marge));
	margin-inline: calc(-1 * var(--su-marge));
}

.su-section > .pin-spacer {
	max-width: none;
}

/* La première photo s'aligne sur la colonne de texte, la piste file jusqu'au bord de l'écran. */
.su-galerie__piste {
	--su-galerie-retrait: max(var(--su-marge), calc((100% - var(--su-large)) / 2));
	display: flex;
	gap: 1rem;
	width: 100%;
	padding-inline: var(--su-galerie-retrait);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-padding-inline: var(--su-galerie-retrait);
	scrollbar-width: thin;
	scrollbar-color: var(--decor) transparent;
}

.su-galerie__piste > * {
	flex: 0 0 auto;
	width: clamp(15rem, 34vw, 29rem);
	margin: 0 !important;
	scroll-snap-align: start;
}

.su-galerie__piste .wp-block-image {
	border-radius: 1rem;
}

.su-galerie__piste img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

/* ---------- Accueil : blog ---------- */

.su-blog {
	display: grid;
	grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
	gap: clamp(2rem, 4vw, 4rem);
	align-items: start;
	max-width: calc(var(--su-large) + 2 * var(--su-marge));
	margin-inline: auto;
}

.su-blog > * {
	max-width: none;
	margin: 0;
}

.su-blog__decor {
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: 0.5rem;
	min-height: 28rem;
}

.su-blog__decor .wp-block-image {
	flex: none;
	width: 6.5rem;
	margin: 0;
}

.su-blog__decor .su-mot-fond {
	position: relative;
	z-index: 0;
	font-size: clamp(6rem, 4rem + 4vw, 9.5rem);
}

.su-blog__contenu > * + * {
	margin-block-start: 1.25rem;
}

.su-blog__contenu .su-blog-accueil {
	margin-block-start: clamp(2rem, 4vw, 3rem);
}

.su-blog__suite {
	display: flex;
	justify-content: flex-end;
	margin-block-start: 2.5rem;
}

@media (max-width: 899px) {
	.su-blog {
		grid-template-columns: minmax(0, 1fr);
	}

	.su-blog__decor {
		display: none;
	}
}

/* Cartes d'article (accueil, blog, archives). */
.su-articles {
	gap: clamp(1.5rem, 3vw, 2.5rem) clamp(1.25rem, 2.5vw, 2rem);
	margin: 0;
	padding: 0;
}

.su-article {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 0.85rem;
	height: 100%;
}

.su-article > * {
	margin: 0;
}

.su-article__image {
	overflow: hidden;
	border-radius: 1rem;
}

.su-article__image img {
	transition: scale 0.6s var(--su-courbe);
}

.su-article:hover .su-article__image img {
	scale: 1.04;
}

/* Carte sans image (functions.php) : le logo sur un fond teinté, au format des images. */
.su-article__image--vide {
	display: grid;
	place-items: center;
	aspect-ratio: 3 / 2;
	background-color: color-mix(in srgb, var(--decor) 16%, var(--fond));
}

.su-article__logo {
	width: 26%;
	aspect-ratio: 419 / 340;
	background-color: var(--titre);
	-webkit-mask: url(../images/logo.svg) center / contain no-repeat;
	mask: url(../images/logo.svg) center / contain no-repeat;
	opacity: 0.5;
}

.su-article__titre {
	font-size: 1.125rem;
	font-weight: 600;
	line-height: 1.32;
	text-wrap: pretty;
}

.su-article__titre a {
	color: var(--titre);
	text-decoration: none;
}

.su-article__titre a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.su-article__titre a:focus-visible {
	outline: none;
}

.su-article:has(a:focus-visible) {
	outline: 2px solid var(--lien);
	outline-offset: 4px;
	border-radius: 1rem;
}

/* Rubrique et temps de lecture, en pied de carte : alignés d'une carte à l'autre. */
.su-article .su-article__meta {
	margin-block-start: auto;
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--lien);
}

.su-article__meta:empty {
	display: none;
}

/* Résultats de recherche : une page n'a pas de date de parution à montrer. */
.su-articles .type-page .su-date-contour {
	display: none;
}

/* Date en grand contour (« 13 / OCT. 2026 ») ; l'effet 10 la dessine. */
.su-date-contour {
	position: relative;
	font-size: clamp(1.35rem, 1rem + 1.2vw, 2rem);
	font-weight: 700;
	line-height: 1.05;
	letter-spacing: 0.01em;
	text-transform: uppercase;
	color: transparent;
	-webkit-text-stroke: 1px var(--titre);
}

.su-date-contour__dessin {
	display: block;
	overflow: visible;
}

.su-date-contour__dessin text {
	font: inherit;
	letter-spacing: inherit;
	text-transform: inherit;
	fill: none;
	stroke: var(--titre);
	stroke-width: 1px;
	vector-effect: non-scaling-stroke;
}

@media (min-width: 600px) and (max-width: 1000px) {
	.su-articles.is-layout-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* Accueil et « À lire aussi », téléphone : les trois articles défilent à l'horizontale. */
@media (max-width: 599px) {
	.su-blog .su-articles.is-layout-grid,
	.su-proches .su-articles.is-layout-grid {
		display: flex;
		gap: 1rem;
		margin-inline: calc(-1 * var(--su-marge));
		padding-inline: var(--su-marge);
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scroll-padding-inline: var(--su-marge);
		scrollbar-width: none;
	}

	.su-blog .su-articles.is-layout-grid > li,
	.su-proches .su-articles.is-layout-grid > li {
		flex: 0 0 80%;
		scroll-snap-align: start;
	}
}

/* ---------- Accueil : ingé son ---------- */

/* « Ingé son » reste en ligne pour que « dédié », à la verticale, se pose contre la fin du mot. */
.su-inge__titre .su-contour {
	display: inline;
	font-size: 2.1em;
	font-weight: 400;
	line-height: 0.9;
}

.su-inge__titre .su-vertical {
	display: inline-block;
	margin-left: 0.15em;
	font-size: 0.55em;
	vertical-align: bottom;
}

.su-inge .su-colonnes-texte {
	margin-block-start: 2rem;
}

.su-inge__portrait {
	position: relative;
	max-width: 32rem;
	margin-left: auto !important;
}

/* Aplat turquoise derrière le visage et les épaules, la photo dépasse en haut et en bas (comme sur le site d'IdeaWeb). */
.su-inge__portrait::before {
	content: "";
	position: absolute;
	inset: 20% 0 30% 22%;
	z-index: -1;
	background-color: var(--decor);
}

.su-inge__portrait .su-mot-fond {
	top: 34%;
	left: 22%;
	z-index: -1;
	font-size: clamp(4rem, 2rem + 6vw, 8rem);
	-webkit-text-stroke: 1px var(--fond);
}

.su-inge__portrait .wp-block-image {
	position: relative;
	margin: 0;
}

.su-inge__portrait img {
	display: block;
	width: 100%;
	max-height: 46rem;
	object-fit: contain;
	object-position: right bottom;
}

/* ---------- Accueil : avis, appel ---------- */

/* Avis Google : trois cartes puis deux, centrées, sur ordinateur ; deux par deux sur tablette ; une piste à faire défiler
   de côté sur téléphone. */
.su-avis__cartes {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: 1.25rem;
}

.su-avis__carte {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
	grid-column-end: span 2;
	margin: 0;
	padding: 2rem 1.75rem 1.75rem;
	border: 1px solid color-mix(in srgb, var(--titre) 10%, transparent);
	border-radius: 1.25rem;
	background-color: var(--surface);
}

.su-avis__carte > * {
	margin: 0;
}

@media (min-width: 1100px) {
	.su-avis__carte:nth-child(3n + 1):nth-last-child(2) {
		grid-column-start: 2;
	}

	.su-avis__carte:nth-child(3n + 1):last-child {
		grid-column-start: 3;
	}
}

@media (min-width: 600px) and (max-width: 1099px) {
	.su-avis__cartes {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	.su-avis__carte:nth-child(odd):last-child {
		grid-column-start: 2;
	}
}

@media (max-width: 599px) {
	.su-avis .su-avis__cartes {
		display: flex;
		gap: 1rem;
		margin-inline: calc(-1 * var(--su-marge));
		padding-inline: var(--su-marge);
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scroll-snap-type: x mandatory;
		scroll-padding-inline: var(--su-marge);
		scrollbar-width: none;
	}

	.su-avis__carte {
		flex: 0 0 85%;
		scroll-snap-align: start;
	}
}

/* Piste atteinte au clavier : elle touche les bords de l'écran, le cadre se pose donc à l'intérieur. */
.su-avis__cartes:focus-visible {
	border-radius: 1.25rem;
	outline-offset: -2px;
}

/* Note : cinq étoiles jaunes sur une pastille sombre, comme l'afficheur d'une console. Le texte reste lu. */
.su-avis__note {
	box-sizing: content-box;
	width: 5.9rem;
	height: 1rem;
	padding: 0.45rem 0.8rem;
	overflow: hidden;
	border-radius: 999px;
	background-color: var(--su-encre);
	box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--decor) 40%, transparent);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 118 20'%3E%3Cpath fill='%23fcc119' d='M10 0.6L12.5 7.1L19.5 7.5L14.1 11.9L15.9 18.7L10 14.9L4.1 18.7L5.9 11.9L0.5 7.5L7.5 7.1ZM34.5 0.6L37 7.1L44 7.5L38.6 11.9L40.4 18.7L34.5 14.9L28.6 18.7L30.4 11.9L25 7.5L32 7.1ZM59 0.6L61.5 7.1L68.5 7.5L63.1 11.9L64.9 18.7L59 14.9L53.1 18.7L54.9 11.9L49.5 7.5L56.5 7.1ZM83.5 0.6L86 7.1L93 7.5L87.6 11.9L89.4 18.7L83.5 14.9L77.6 18.7L79.4 11.9L74 7.5L81 7.1ZM108 0.6L110.5 7.1L117.5 7.5L112.1 11.9L113.9 18.7L108 14.9L102.1 18.7L103.9 11.9L98.5 7.5L105.5 7.1Z'/%3E%3C/svg%3E");
	background-origin: content-box;
	background-repeat: no-repeat;
	background-size: 100% 100%;
	color: var(--bouton);
	font-size: 0.75rem;
	line-height: 1rem;
	white-space: nowrap;
	text-indent: 200%;
}

@media (forced-colors: active) {
	.su-avis__note {
		width: auto;
		height: auto;
		padding: 0;
		background: none;
		text-indent: 0;
	}
}

/* Grand guillemet au trait, comme les mots en contour du site. Dessiné dans une police à empattements du système : ceux
   de Poppins et de Syncopate sont des barres droites qui, évidées, se lisent mal. */
.su-avis__carte::after {
	content: "“";
	content: "“" / "";
	position: absolute;
	top: 1.25rem;
	right: 1.5rem;
	font-family: Georgia, "Times New Roman", serif;
	font-size: 6rem;
	font-weight: 700;
	line-height: 1;
	color: transparent;
	-webkit-text-stroke: var(--su-trait) var(--decor);
	pointer-events: none;
}

.su-avis__texte {
	padding: 0;
	border: 0;
	font-size: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
	font-weight: 400;
	line-height: 1.6;
	color: var(--titre);
}

.su-avis__texte p {
	margin: 0;
}

.su-avis__carte > .su-avis__auteur {
	margin-block-start: auto;
	padding-block-start: 1rem;
	border-block-start: 1px solid color-mix(in srgb, var(--titre) 10%, transparent);
	font-size: 0.875rem;
	line-height: 1.5;
}

.su-avis__auteur strong {
	font-size: 1rem;
	font-weight: 600;
	color: var(--titre);
}

.su-section > .su-avis__mention {
	max-width: 46rem;
	margin-block-start: 1.5rem;
	margin-inline: max(0px, calc((100% - var(--su-large)) / 2)) auto;
	font-size: 0.875rem;
	line-height: 1.6;
}

.su-appel__boite {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	gap: 2rem 3rem;
	padding: clamp(2.5rem, 5vw, 4.5rem);
	border-radius: 1.5rem;
	background-color: var(--decor);
	color: var(--su-encre);
}

.su-appel__boite > * {
	margin: 0;
}

.su-appel__boite .su-titre {
	font-size: var(--wp--preset--font-size--grand);
	color: var(--su-encre);
}

.su-appel__boite .su-contour {
	-webkit-text-stroke-color: var(--su-encre);
}

.su-appel__boite p {
	margin-block-start: 1rem;
	max-width: 36rem;
}

.su-appel__boite a:not(.wp-block-button__link) {
	color: var(--su-encre);
}

.su-appel__boite .wp-block-buttons {
	gap: 0.75rem;
}

.su-appel__boite .is-style-outline > .wp-block-button__link {
	color: var(--su-encre);
}

.su-appel__boite .is-style-outline > .wp-block-button__link:hover {
	background-color: var(--su-encre);
	color: #f9f6ee;
}

@media (max-width: 781px) {
	.su-appel__boite {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ---------- Pages, blog, articles ---------- */

.su-tete-page {
	padding-block: clamp(3rem, 7vw, 6rem) clamp(2rem, 4vw, 3rem);
	padding-inline: var(--su-marge);
}

.su-tete-page > * + * {
	margin-block-start: 1.25rem;
}

/* Chapo aligné sous le titre : la mise en page « contrainte » de WordPress centrerait ce bloc plus étroit. */
.su-tete-page > .su-chapo {
	margin-left: max(0px, calc((100% - var(--su-large)) / 2)) !important;
	margin-right: auto !important;
}

/* Blog : grand « Blog » en contour derrière le titre (effet 02), texte de la page Blog, menu des rubriques. */
.su-tete-page--blog {
	position: relative;
	isolation: isolate;
}

.su-tete-page--blog .su-mot-fond {
	top: clamp(1rem, 4vw, 3.5rem);
	right: max(var(--su-marge), calc((100% - var(--su-large)) / 2));
	opacity: 0.6;
}

.su-intro-blog > * {
	margin-block: 0;
}

.su-intro-blog > * + * {
	margin-block-start: 1em;
}

.su-tete-page .su-rubriques {
	margin-block-start: clamp(1.75rem, 3.5vw, 2.75rem);
}

.su-rubriques__liste {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.su-rubriques a {
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	min-height: 2.75rem;
	padding: 0.4em 1.1em;
	border: 1px solid color-mix(in srgb, var(--titre) 25%, transparent);
	border-radius: 999px;
	font-size: 0.9375rem;
	font-weight: 500;
	line-height: 1.2;
	white-space: nowrap;
	color: var(--titre);
	text-decoration: none;
	transition: background-color 0.3s var(--su-courbe), border-color 0.3s var(--su-courbe), color 0.3s var(--su-courbe);
}

.su-rubriques a:hover {
	border-color: var(--titre);
}

.su-rubriques a[aria-current] {
	border-color: var(--titre);
	background-color: var(--titre);
	color: var(--fond);
}

.su-rubriques__nombre {
	font-size: 0.8em;
	opacity: 0.75;
}

/* Téléphone : les rubriques tiennent sur une ligne qui défile ; la rubrique affichée y est amenée (theme.js). */
@media (max-width: 599px) {
	.su-rubriques__liste {
		flex-wrap: nowrap;
		margin-inline: calc(-1 * var(--su-marge));
		padding-inline: var(--su-marge);
		overflow-x: auto;
		scrollbar-width: none;
	}

	.su-rubriques__liste > li {
		flex: none;
	}
}

/* Liste vide (rubrique sans article, recherche sans résultat). */
.su-vide {
	max-width: 46rem;
	padding-block: 1rem 2rem;
	font-size: var(--wp--preset--font-size--moyen);
	line-height: 1.5;
}

.su-contenu {
	padding-inline: var(--su-marge);
	padding-bottom: clamp(3rem, 6vw, 5rem);
}

.su-contenu h2 {
	margin-block-start: 2.2em;
	font-size: clamp(1.5rem, 1.2rem + 1vw, 2.1rem);
}

.su-contenu h3 {
	margin-block-start: 1.8em;
}

.su-contenu img {
	border-radius: 1rem;
}

/* Pages légales : date de la dernière mise à jour, à l'écart du texte. */
.su-contenu .su-mise-a-jour {
	margin-block-start: 3rem;
	font-size: var(--wp--preset--font-size--petit);
}

.su-blog-liste {
	padding-inline: var(--su-marge);
	padding-bottom: clamp(3rem, 6vw, 5rem);
}

.su-pagination {
	margin-block-start: clamp(2.5rem, 5vw, 4rem);
	gap: 0.5rem 1rem;
	font-weight: 500;
}

.su-pagination a {
	color: var(--titre);
}

/* Cibles d'au moins 44 px, au doigt comme à la souris. */
.su-pagination .page-numbers,
.su-pagination .wp-block-query-pagination-previous,
.su-pagination .wp-block-query-pagination-next {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.75rem;
	min-height: 2.75rem;
	border-radius: 999px;
}

.su-pagination a.page-numbers:hover {
	background-color: color-mix(in srgb, var(--titre) 10%, transparent);
}

.su-pagination .page-numbers.current {
	background-color: var(--bouton);
	color: var(--bouton-texte);
}

/* Article : en-tête, texte et bas d'article sur une seule colonne. La marge latérale est celle de l'article
   (.su-lecture) ; en ajouter une décalerait le bloc par rapport au texte. */
.su-tete-article {
	padding-block: clamp(3rem, 6vw, 5rem) 2rem;
}

.su-tete-article > * + * {
	margin-block-start: 1.25rem;
}

.su-titre--article {
	font-size: clamp(1.9rem, 1.2rem + 2.4vw, 3.4rem);
	line-height: 1.04;
	text-transform: none;
}

/* Nom de rubrique ou de sujet, recherche : plus long qu'un titre de page, donc plus petit. */
.su-titre--rubrique {
	font-size: clamp(2rem, 1.2rem + 3.2vw, 4.25rem);
	line-height: 1.02;
	overflow-wrap: break-word;
}

/* En-tête d'article : rubrique et temps de lecture passent à la ligne sur un écran étroit. */
.su-tete-article .su-surtitre {
	flex-wrap: wrap;
	row-gap: 0.35rem;
}

.su-article__une {
	margin-block: 1rem 2.5rem;
	border-radius: 1.25rem;
}

.su-contenu--article {
	padding-inline: 0;
	font-size: clamp(1.0625rem, 1rem + 0.2vw, 1.125rem);
	font-weight: 400;
	line-height: 1.75;
}

.su-contenu--article blockquote {
	margin-inline: 0;
	padding-left: 1.5rem;
	border-left: 3px solid var(--decor);
	font-weight: 500;
}

/* Bas d'article : rubriques et sujets en pastilles, appel au projet, articles proches. */
.su-classement {
	padding-block: 2rem clamp(2.5rem, 5vw, 4rem);
	border-top: 1px solid color-mix(in srgb, var(--titre) 15%, transparent);
}

.su-classement > * + * {
	margin-block-start: 1rem;
}

/* L'étiquette (« Rubriques », « Sujets ») a sa colonne : les pastilles qui passent à la ligne restent à sa droite. */
.su-puces {
	--su-puce: 2.75rem; /* hauteur d'une pastille (44 px, cible tactile), reprise par l'étiquette pour rester alignée */
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
	padding-inline-start: 7rem;
}

.su-puces .wp-block-post-terms__prefix {
	position: absolute;
	inset-block-start: 0;
	inset-inline-start: 0;
	display: flex;
	align-items: center;
	min-height: var(--su-puce);
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--lien);
}

.su-puces .wp-block-post-terms__separator {
	display: none;
}

.su-puces a {
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	min-height: var(--su-puce);
	padding: 0.3em 0.95em;
	border: 1px solid color-mix(in srgb, var(--titre) 25%, transparent);
	border-radius: 999px;
	font-size: 0.875rem;
	font-weight: 500;
	color: var(--titre);
	text-decoration: none;
	transition: border-color 0.3s var(--su-courbe);
}

.su-puces a:hover {
	border-color: var(--titre);
}

/* Téléphone : l'étiquette au-dessus des pastilles, qui prennent toute la largeur. */
@media (max-width: 599px) {
	.su-puces {
		padding-inline-start: 0;
	}

	.su-puces .wp-block-post-terms__prefix {
		position: static;
		flex-basis: 100%;
		min-height: 0;
	}
}

.su-appel--article {
	padding-block: 0;
}

.su-appel--article > .su-appel__boite {
	max-width: 1000px;
}

.su-proches {
	padding-block-start: clamp(3.5rem, 7vw, 6rem);
}

.su-proches > .su-titre {
	margin-block: 0 clamp(2rem, 4vw, 3rem);
	font-size: var(--wp--preset--font-size--grand);
}

.su-recherche .wp-block-search__input {
	padding: 0.75em 1em;
	border: 1px solid color-mix(in srgb, var(--titre) 30%, transparent);
	border-radius: 999px;
	background-color: var(--surface);
	color: var(--titre);
	font: inherit;
}

/* Texte d'exemple aux couleurs du thème : le gris par défaut du navigateur est illisible en mode sombre. */
.su-recherche .wp-block-search__input::placeholder {
	color: var(--texte);
	opacity: 0.8;
}

.su-recherche .wp-block-search__inside-wrapper {
	gap: 0.5rem;
}

.su-recherche .wp-block-search__button {
	margin: 0;
}

/* ---------- Pages composées ---------- */

/* Bandeau d'une page intérieure : le texte suit la grille du site, la photo file jusqu'au bord droit. */
.su-bandeau {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	align-items: center;
	gap: clamp(2rem, 5vw, 5.5rem);
	padding: clamp(2.5rem, 6vw, 5rem) 0 clamp(3.5rem, 7vw, 6.5rem) max(var(--su-marge), calc((100% - var(--su-large)) / 2));
}

.su-bandeau > * {
	max-width: none;
	margin: 0;
}

.su-bandeau__texte {
	container-type: inline-size;
}

.su-bandeau__texte > * {
	margin-block: 0;
}

.su-bandeau__texte > * + * {
	margin-block-start: 1.5rem;
}

/* Les mots longs (« Postproduction », « Enregistrement ») tiennent sur une ligne : la taille suit la colonne. */
.su-bandeau .su-titre {
	font-size: min(var(--wp--preset--font-size--titre), 9.4cqi);
}

.su-bandeau__texte .su-chapo {
	margin-block-start: 1.75rem;
}

.su-bandeau__texte .wp-block-buttons {
	margin-block-start: 2rem;
}

.su-bandeau__image {
	border-radius: 1.5rem 0 0 1.5rem;
}

.su-bandeau__image img {
	width: 100%;
	max-height: min(38rem, 75vh);
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

@media (max-width: 899px) {
	.su-bandeau {
		grid-template-columns: minmax(0, 1fr);
		padding-inline: var(--su-marge);
	}

	.su-bandeau__image {
		border-radius: 1.25rem;
	}

	.su-bandeau__image img {
		aspect-ratio: 3 / 2;
	}
}

/* Surtitre : la rubrique au-dessus du grand titre, précédée d'un trait. */
.su-surtitre {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--lien);
}

.su-surtitre::before {
	content: "";
	flex: none;
	width: 2.5rem;
	height: 1px;
	background-color: currentColor;
}

.su-surtitre a {
	color: inherit;
	text-decoration: none;
}

.su-surtitre a:hover {
	text-decoration: underline;
}

/* Titres de section un cran sous ceux de l'accueil : une page intérieure en enchaîne davantage. */
.su-principal--composee .su-section > h2.su-titre,
.su-principal--composee .su-duo__texte > h2.su-titre {
	font-size: min(clamp(2rem, 1.25rem + 2.5vw, 3.5rem), 9.6cqi);
}

/* Paragraphes posés seuls dans une section : lignes courtes, alignées sur la grille. */
.su-principal--composee .su-section > p,
.su-principal--composee .su-section > .su-encart {
	max-width: 46rem;
	margin-inline: max(0px, calc((100% - var(--su-large)) / 2)) auto;
}

.su-section > .su-titre + .su-chapo {
	margin-block-start: 1.5rem;
}

.su-section > * + :is(.su-points, .su-etapes, .su-frise, .su-faq, .su-index, .su-cartes, .su-avis__cartes, .su-demande, .su-encart, .su-playlists, .su-videos, .su-mosaique) {
	margin-block-start: clamp(2rem, 4vw, 3.5rem);
}

.su-section > * + .wp-block-buttons {
	margin-block-start: 2.25rem;
}

/* Liste « ce que comprend la prestation » : deux colonnes, un rond au trait devant chaque point. */
.su-points {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
	gap: 0 clamp(1.5rem, 4vw, 3.5rem);
	padding: 0;
	list-style: none;
}

.su-points > li {
	position: relative;
	margin: 0;
	padding: 1.1rem 0 1.1rem 2.25rem;
	border-top: 1px solid color-mix(in srgb, var(--titre) 14%, transparent);
}

.su-points > li::before {
	content: "";
	position: absolute;
	top: 1.5rem;
	left: 0.15rem;
	width: 0.85rem;
	aspect-ratio: 1;
	border: var(--su-trait) solid var(--decor);
	border-radius: 50%;
}

.su-points strong {
	display: block;
	margin-bottom: 0.2rem;
	color: var(--titre);
}

/* Étapes numérotées : grands chiffres au trait, comme les titres. */
.su-etapes {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
	gap: clamp(1.75rem, 3vw, 2.5rem);
	padding: 0;
	list-style: none;
	counter-reset: etape;
}

.su-etapes > li {
	margin: 0;
	padding-top: 1.1rem;
	border-top: var(--su-trait) solid var(--decor);
	counter-increment: etape;
}

.su-etapes > li::before {
	content: counter(etape, decimal-leading-zero);
	display: block;
	margin-bottom: 0.8rem;
	font-size: clamp(2.5rem, 1.9rem + 1.8vw, 3.5rem);
	font-weight: 700;
	line-height: 1;
	color: transparent;
	-webkit-text-stroke: var(--su-trait) var(--titre);
}

.su-etapes strong {
	display: block;
	margin-bottom: 0.35rem;
	color: var(--titre);
}

/* Frise de l'histoire du studio : chaque date en grand contour, comme les numéros des étapes. */
.su-frise {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
	gap: clamp(1.75rem, 3vw, 2.5rem);
	padding: 0;
	list-style: none;
}

.su-frise > li {
	margin: 0;
	padding-top: 1.1rem;
	border-top: var(--su-trait) solid var(--decor);
}

.su-frise strong {
	display: block;
	margin-bottom: 0.8rem;
	font-size: clamp(2.25rem, 1.75rem + 1.5vw, 3rem);
	font-weight: 700;
	line-height: 1;
	color: transparent;
	-webkit-text-stroke: var(--su-trait) var(--titre);
}

/* Questions fréquentes : chaque réponse se déplie sous sa question. */
.su-faq > .wp-block-details {
	margin: 0;
	border-bottom: 1px solid color-mix(in srgb, var(--titre) 18%, transparent);
}

.su-faq > .wp-block-details:first-child {
	border-top: 1px solid color-mix(in srgb, var(--titre) 18%, transparent);
}

.su-faq summary {
	position: relative;
	display: block;
	padding: 1.3rem 3rem 1.3rem 0;
	font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.2rem);
	font-weight: 600;
	line-height: 1.35;
	color: var(--titre);
	cursor: pointer;
	list-style: none;
}

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

.su-faq summary::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 0.6rem;
	width: 0.85rem;
	height: 1rem;
	background-color: var(--lien);
	-webkit-mask: url(../images/fleche.svg) center / contain no-repeat;
	mask: url(../images/fleche.svg) center / contain no-repeat;
	translate: 0 -50%;
	transition: rotate 0.35s var(--su-courbe);
}

.su-faq details[open] > summary::after {
	rotate: 180deg;
}

.su-faq details > :not(summary) {
	max-width: 46rem;
	margin-block: 0 1.1rem;
}

.su-faq details > :last-child {
	margin-bottom: 1.6rem;
}

/* Sommaire des services : une ligne par prestation, toute la ligne mène à sa page. */
.su-index {
	border-top: 1px solid color-mix(in srgb, var(--titre) 18%, transparent);
	counter-reset: ligne;
}

.su-index > .su-index__ligne {
	position: relative;
	display: grid;
	grid-template-columns: 4rem minmax(0, 1fr) minmax(0, 1.15fr) 2rem;
	align-items: center;
	gap: 0.6rem clamp(1.25rem, 3vw, 2.5rem);
	margin: 0;
	padding: clamp(1.5rem, 3vw, 2.25rem) 0.75rem;
	border-bottom: 1px solid color-mix(in srgb, var(--titre) 18%, transparent);
	counter-increment: ligne;
	transition: background-color 0.35s var(--su-courbe);
}

.su-index__ligne > * {
	margin: 0;
}

.su-index__ligne::before {
	content: counter(ligne, decimal-leading-zero);
	grid-column: 1;
	grid-row: 1;
	font-size: 1.6rem;
	font-weight: 700;
	line-height: 1;
	color: transparent;
	-webkit-text-stroke: 1px var(--titre);
}

.su-index__titre {
	grid-column: 2;
	grid-row: 1;
	font-size: clamp(1.3rem, 1rem + 1.1vw, 1.9rem);
	line-height: 1.1;
	text-transform: uppercase;
}

.su-index__titre a {
	color: var(--titre);
	text-decoration: none;
}

.su-index__titre a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.su-index__titre a:focus-visible {
	outline: none;
}

.su-index__ligne > p {
	grid-column: 3;
	grid-row: 1;
}

.su-index__ligne::after {
	content: "";
	grid-column: 4;
	grid-row: 1;
	justify-self: end;
	width: 1rem;
	height: 1.15rem;
	background-color: var(--lien);
	-webkit-mask: url(../images/fleche.svg) center / contain no-repeat;
	mask: url(../images/fleche.svg) center / contain no-repeat;
	rotate: -90deg;
	transition: translate 0.45s var(--su-courbe);
}

.su-index__ligne:hover {
	background-color: color-mix(in srgb, var(--decor) 9%, transparent);
}

.su-index__ligne:hover::after {
	translate: 0.35rem 0;
}

.su-index__ligne:has(a:focus-visible) {
	outline: 2px solid var(--lien);
	outline-offset: 3px;
}

@media (max-width: 781px) {
	.su-index > .su-index__ligne {
		grid-template-columns: 2.75rem minmax(0, 1fr) 1.25rem;
		align-items: start;
		padding-inline: 0;
	}

	.su-index__ligne::before {
		grid-row: 1 / span 2;
		font-size: 1.3rem;
	}

	.su-index__ligne > p {
		grid-column: 2;
		grid-row: 2;
	}

	.su-index__ligne::after {
		grid-column: 3;
		grid-row: 1 / span 2;
		align-self: center;
	}

	/* Le mot le plus long (« Accompagnement », 10,2 em en capitales) tient sur une ligne jusqu'à 320 px. */
	.su-index {
		container-type: inline-size;
	}

	.su-index__titre {
		font-size: min(clamp(1.3rem, 1rem + 1.1vw, 1.9rem), calc((100cqi - 6.5rem) / 10.4));
	}
}

/* Trois cartes au lieu de quatre (suites d'une page). */
.su-cartes--trois {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 1099px) {
	.su-cartes--trois {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 599px) {
	.su-cartes--trois {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* Encart : une précision à ne pas manquer (location seule, ce que la prestation ne couvre pas). */
.su-encart {
	padding: 1.25rem 1.5rem;
	border-left: 3px solid var(--decor);
	border-radius: 0 0.75rem 0.75rem 0;
	background-color: var(--surface);
}

.su-encart > * {
	margin: 0;
}

.su-encart > * + * {
	margin-block-start: 0.6rem;
}

/* Demande en ligne : l'explication reste en vue pendant qu'on remplit le formulaire. */
.su-demande {
	display: grid;
	grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
	align-items: start;
	gap: clamp(2rem, 5vw, 5rem);
}

.su-demande > * {
	margin: 0;
}

.su-demande__texte > * {
	margin-block: 0;
}

.su-demande__texte > * + * {
	margin-block-start: 1.25rem;
}

@media (min-width: 900px) {
	.su-demande__texte {
		position: sticky;
		top: 7.5rem;
	}
}

@media (max-width: 899px) {
	.su-demande {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* Photo d'une colonne : arrondie du côté du texte, coupée net au bord de l'écran (comme le bandeau). */
.su-principal--composee .su-duo__image .wp-block-image:not(.is-style-detoure) {
	border-radius: 1.5rem 0 0 1.5rem;
}

.su-principal--composee .su-duo--inverse .su-duo__image .wp-block-image:not(.is-style-detoure) {
	border-radius: 0 1.5rem 1.5rem 0;
}

.su-principal--composee .su-duo__image .wp-block-image:not(.is-style-detoure) img {
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

@media (max-width: 781px) {
	.su-principal--composee .su-duo__image .wp-block-image:not(.is-style-detoure) {
		border-radius: 0;
	}

	.su-principal--composee .su-duo__image .wp-block-image:not(.is-style-detoure) img {
		aspect-ratio: 3 / 2;
	}
}

/* Page Sound Up Factory : le violet remplace le turquoise. Titres et rubrique en violet de la Factory (7:1 en clair) ;
   le décor prend le violet moyen, aussi clair que le turquoise qu'il remplace : l'encre de l'appel reste lisible dessus. */
.su-factory {
	--couleur: var(--factory);
	--decor: #b58fd3;
}

.su-factory .su-surtitre {
	color: var(--factory);
}

@media (forced-colors: active) {
	.su-etapes > li::before,
	.su-frise strong,
	.su-index__ligne::before {
		color: CanvasText;
		-webkit-text-stroke: 0;
	}

	.su-faq summary::after,
	.su-index__ligne::after {
		forced-color-adjust: none;
		background-color: CanvasText;
	}
}

/* ---------- Réalisations : extraits, vidéos ---------- */

/* Un volet par style : numéro au trait, nom en capitales, flèche qui se retourne à l'ouverture (comme le sommaire des
   services). */
.su-playlists {
	border-top: 1px solid color-mix(in srgb, var(--titre) 18%, transparent);
	counter-reset: genre;
}

.su-playlists > .wp-block-details {
	margin: 0;
	border-bottom: 1px solid color-mix(in srgb, var(--titre) 18%, transparent);
	counter-increment: genre;
}

.su-playlists summary {
	position: relative;
	display: flex;
	align-items: center;
	gap: clamp(1rem, 3vw, 2.5rem);
	padding: clamp(1.4rem, 2.6vw, 2rem) 3.25rem clamp(1.4rem, 2.6vw, 2rem) 0.75rem;
	font-size: clamp(1.15rem, 0.95rem + 0.9vw, 1.7rem);
	font-weight: 700;
	line-height: 1.1;
	text-transform: uppercase;
	color: var(--titre);
	cursor: pointer;
	list-style: none;
	transition: background-color 0.35s var(--su-courbe);
}

.su-playlists summary::-webkit-details-marker {
	display: none;
}

.su-playlists summary::before {
	content: counter(genre, decimal-leading-zero);
	flex: none;
	width: 2.75rem;
	font-size: 1.5rem;
	line-height: 1;
	color: transparent;
	-webkit-text-stroke: 1px var(--titre);
}

.su-playlists summary::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 0.9rem;
	width: 1rem;
	height: 1.15rem;
	background-color: var(--lien);
	-webkit-mask: url(../images/fleche.svg) center / contain no-repeat;
	mask: url(../images/fleche.svg) center / contain no-repeat;
	translate: 0 -50%;
	transition: rotate 0.35s var(--su-courbe);
}

.su-playlists details[open] > summary::after {
	rotate: 180deg;
}

.su-playlists summary:hover {
	background-color: color-mix(in srgb, var(--decor) 9%, transparent);
}

.su-playlists summary:focus-visible {
	outline: 2px solid var(--lien);
	outline-offset: 3px;
}

.su-playlists details > .su-pistes {
	margin: 0.75rem 0 clamp(2.25rem, 4vw, 3.25rem);
}

.su-pistes {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 21rem), 1fr));
	gap: clamp(2rem, 3.5vw, 2.75rem) clamp(1.5rem, 3vw, 2.5rem);
}

.su-pistes > * {
	margin: 0;
}

/* Une piste : pochette, titre et artiste, puis le lecteur et ce que le studio a réalisé. La légende du lecteur remonte
   à côté de la pochette. */
.su-piste {
	position: relative;
}

.su-piste > * {
	margin: 0;
}

.su-piste__pochette {
	position: absolute;
	top: 0;
	left: 0;
	width: 3.5rem;
	margin: 0;
}

.su-piste__pochette img {
	display: block;
	width: 100%;
	aspect-ratio: 1;
	object-fit: cover;
	border-radius: 0.6rem;
}

.su-piste .su-lecteur {
	display: flex;
	flex-direction: column;
	gap: 0.9rem;
	margin: 0;
}

.su-piste .su-lecteur figcaption {
	order: -1;
	min-height: 3.5rem;
	margin: 0;
	padding: 0.3rem 0 0 4.5rem;
	font-size: var(--wp--preset--font-size--petit);
	line-height: 1.45;
	text-align: start;
}

.su-piste .su-lecteur figcaption strong {
	font-size: 1rem;
	color: var(--titre);
}

.su-piste > .su-piste__roles {
	margin-block-start: 0.7rem;
	padding-left: 0.25rem;
	font-size: 0.8125rem;
	font-weight: 500;
	color: var(--lien);
}

.su-videos {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr));
	gap: clamp(2.25rem, 4vw, 3rem) clamp(1.25rem, 2.5vw, 2rem);
}

.su-videos > *,
.su-video > * {
	margin: 0;
}

.su-video > * + * {
	margin-block-start: 0.5rem;
}

.su-video > .su-video__genre {
	margin-block-start: 1.1rem;
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--lien);
}

.su-video__titre {
	font-size: 1.15rem;
	line-height: 1.2;
	text-transform: uppercase;
}

.su-video__image img,
.su-video__cadre {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	border: 0;
	border-radius: 1rem;
	object-fit: cover;
}

.su-video__cadre {
	background-color: #000;
}

.su-video__image a,
.su-video__bouton {
	position: relative;
	display: block;
	overflow: hidden;
	border-radius: 1rem;
}

.su-video__bouton {
	width: 100%;
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	cursor: pointer;
}

/* Bouton de lecture : disque jaune et triangle, comme le lecteur audio. Présent aussi sans JavaScript. */
:is(.su-video__image a, .su-video__bouton)::before,
:is(.su-video__image a, .su-video__bouton)::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	translate: -50% -50%;
	pointer-events: none;
}

:is(.su-video__image a, .su-video__bouton)::before {
	width: 4.25rem;
	aspect-ratio: 1;
	border-radius: 50%;
	background-color: var(--bouton);
	box-shadow: 0 0.75rem 1.75rem -0.6rem rgb(0 0 0 / 45%);
	transition: scale 0.35s var(--su-courbe);
}

:is(.su-video__image a, .su-video__bouton)::after {
	width: 1.5rem;
	height: 1.5rem;
	margin-left: 0.15rem;
	background-color: var(--bouton-texte);
	-webkit-mask: url(../images/lecture.svg) center / contain no-repeat;
	mask: url(../images/lecture.svg) center / contain no-repeat;
}

.su-video__image img {
	transition: scale 0.6s var(--su-courbe);
}

:is(.su-video__image a, .su-video__bouton):hover img {
	scale: 1.03;
}

:is(.su-video__image a, .su-video__bouton):hover::before {
	scale: 1.08;
}

:is(.su-video__image a, .su-video__bouton):focus-visible {
	outline: 2px solid var(--lien);
	outline-offset: 3px;
}

.su-section > .su-videos + .su-videos__note {
	margin-block-start: clamp(2rem, 4vw, 3rem);
}

.su-videos__note {
	font-size: var(--wp--preset--font-size--petit);
}

/* ---------- Photos ---------- */

/* Mosaïque : une grande photo et des petites (« --inverse » : la grande à droite ; « --quatre » : quatre photos de même
   taille). Chaque photo s'agrandit au clic, dans la visionneuse de WordPress. */
.su-mosaique {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	grid-auto-rows: clamp(9rem, 15vw, 14.5rem);
	grid-auto-flow: dense;
	gap: clamp(0.75rem, 1.5vw, 1.25rem);
}

.su-mosaique > * {
	margin: 0 !important;
}

.su-mosaique > :first-child {
	grid-column: span 2;
	grid-row: span 2;
}

.su-mosaique--inverse > :first-child {
	grid-column: 2 / span 2;
	grid-row: 1 / span 2;
}

.su-mosaique .wp-block-image {
	border-radius: 1rem;
}

.su-mosaique .wp-block-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.su-mosaique--quatre {
	grid-template-columns: repeat(4, minmax(0, 1fr));
	grid-auto-rows: auto;
}

.su-mosaique--quatre > :first-child {
	grid-column: auto;
	grid-row: auto;
}

.su-mosaique--quatre .wp-block-image img {
	height: auto;
	aspect-ratio: 4 / 3;
}

/* Sans JavaScript, la visionneuse ne s'ouvre pas et son bouton n'a pas de nom : pas de bouton qui ne fait rien. */
@media (scripting: none) {
	.wp-lightbox-container .lightbox-trigger {
		display: none;
	}
}

@media (max-width: 781px) {
	.su-mosaique {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		grid-auto-rows: clamp(7rem, 30vw, 13rem);
	}

	.su-mosaique > :first-child,
	.su-mosaique--inverse > :first-child {
		grid-column: 1 / -1;
		grid-row: span 2;
	}

	/* Un nombre pair de photos laisserait un trou : la dernière prend toute la ligne. */
	.su-mosaique:not(.su-mosaique--quatre) > :last-child:nth-child(2n) {
		grid-column: 1 / -1;
	}

	.su-mosaique--quatre {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		grid-auto-rows: auto;
	}

	.su-mosaique--quatre > :first-child {
		grid-column: auto;
		grid-row: auto;
	}
}

@media (prefers-reduced-motion: reduce) {
	.su-video__image img,
	:is(.su-video__image a, .su-video__bouton)::before,
	.su-playlists summary::after {
		transition: none;
	}
}

html[data-calme] .su-video__image img,
html[data-calme] :is(.su-video__image a, .su-video__bouton)::before,
html[data-calme] .su-playlists summary::after {
	transition: none;
}

@media (forced-colors: active) {
	.su-playlists summary::before {
		color: CanvasText;
		-webkit-text-stroke: 0;
	}

	.su-playlists summary::after {
		forced-color-adjust: none;
		background-color: CanvasText;
	}

	:is(.su-video__image a, .su-video__bouton)::before {
		forced-color-adjust: none;
		background-color: ButtonFace;
		outline: 2px solid ButtonText;
	}

	:is(.su-video__image a, .su-video__bouton)::after {
		forced-color-adjust: none;
		background-color: ButtonText;
	}
}

/* ---------- Photos : couleurs du thème et contour fondu au repos ---------- */

/*
 * Au repos, une photo prend les couleurs de la page : son blanc et son noir s'arrêtent sur deux couleurs du thème
 * (--su-photo-*, en tête de feuille) ; le reste garde son contraste et sa chaleur (bois, lumières du studio), un peu
 * moins saturé. Elle se fond dans la page par un contour doux et irrégulier, qui change d'une photo à sa voisine
 * (images/masques, faits par tools/masques.mjs) : les grandes (accueil, bandeaux, duos) vont jusqu'au bord de l'écran
 * du côté opposé au texte, les petites (galerie, cartes, mosaïque, image d'un article) sont fondues tout autour. Au
 * survol de la souris, ou quand le clavier s'y pose, elle reprend ses vraies couleurs et tout son cadre ; le bas de la
 * photo d'accueil reste fondu sous « SOUND ». Sans survol (écran tactile), elle reste au repos.
 * Dans le cadre (figure) : la photo se mêle au fond du cadre (produit en clair, « éclaircir » en sombre), puis le
 * voile (::before) par l'opération inverse ; là où la photo ne va pas, le cadre prend pile la couleur du fond de la page.
 * --su-eveil va de 0 (repos) à 1 (éveil) : fond du cadre et voile s'effacent, la saturation remonte, un second calque
 * de masque ouvre le cadre en entier. Base sans spécificité (:where) : chaque composant y pose son contour.
 * Gardent leurs couleurs : pochettes, vignettes des vidéos, portrait de l'ingé son, logos et décors, images dans le
 * texte d'un article.
 */
@property --su-eveil {
	syntax: "<number>";
	inherits: true;
	initial-value: 0;
}

:where(.su-hero__image, .su-duo__image:not(.su-inge__portrait) .wp-block-image, .su-labo-effet__demo .is-style-detoure, .su-bandeau__image, .su-galerie__piste .wp-block-image, .su-article__image:not(.su-article__image--vide), .su-article__une, .su-mosaique .wp-block-image) {
	--su-eveil: 0;
	--su-ouvert: linear-gradient(rgb(0 0 0 / var(--su-eveil)), rgb(0 0 0 / var(--su-eveil)));
	position: relative;
	isolation: isolate;
	overflow: clip;
	background-color: rgb(var(--su-photo-fond) / calc(1 - var(--su-eveil)));
	-webkit-mask-image: var(--su-masque, linear-gradient(#000, #000)), var(--su-ouvert);
	mask-image: var(--su-masque, linear-gradient(#000, #000)), var(--su-ouvert);
	-webkit-mask-size: 100% 100%;
	mask-size: 100% 100%;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-composite: source-over;
	mask-composite: add;
}

:where(.su-hero__image, .su-duo__image:not(.su-inge__portrait) .wp-block-image, .su-labo-effet__demo .is-style-detoure, .su-bandeau__image, .su-galerie__piste .wp-block-image, .su-article__image:not(.su-article__image--vide), .su-article__une, .su-mosaique .wp-block-image)::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background-color: var(--su-photo-voile);
	mix-blend-mode: var(--su-photo-voile-mode);
	opacity: calc(1 - var(--su-eveil));
	pointer-events: none;
}

:where(.su-hero__image, .su-duo__image:not(.su-inge__portrait) .wp-block-image, .su-labo-effet__demo .is-style-detoure, .su-bandeau__image, .su-galerie__piste .wp-block-image, .su-article__image:not(.su-article__image--vide), .su-article__une, .su-mosaique .wp-block-image) img {
	mix-blend-mode: var(--su-photo-mode);
	filter: saturate(calc(var(--su-photo-saturation) + (1 - var(--su-photo-saturation)) * var(--su-eveil)));
}

/* Contours : chaque place le sien, et pas deux voisines de la même forme. Accueil : éveillée, la photo n'ouvre que sa
   forme sans le bas (second calque coupé par le troisième). */
@media (min-width: 900px) {
	.su-hero__image {
		-webkit-mask-image: url(../images/masques/accueil.webp), var(--su-ouvert), url(../images/masques/accueil-eveil.webp);
		mask-image: url(../images/masques/accueil.webp), var(--su-ouvert), url(../images/masques/accueil-eveil.webp);
		-webkit-mask-composite: source-over, source-in;
		mask-composite: add, intersect;
	}

	.su-bandeau__image {
		--su-masque: url(../images/masques/large-1.webp);
	}
}

/* Photo d'accueil d'un bord à l'autre, bandeau dans les marges. */
@media (max-width: 899px) {
	.su-hero__image {
		-webkit-mask-image: url(../images/masques/accueil-etroit.webp), var(--su-ouvert), url(../images/masques/accueil-etroit-eveil.webp);
		mask-image: url(../images/masques/accueil-etroit.webp), var(--su-ouvert), url(../images/masques/accueil-etroit-eveil.webp);
		-webkit-mask-composite: source-over, source-in;
		mask-composite: add, intersect;
	}

	.su-bandeau__image {
		--su-masque: url(../images/masques/vignette-2.webp);
	}
}

/* Duos : photo à droite du texte, ou à gauche dans un duo inversé ; à l'accueil (photos détourées), le second duo à
   droite du texte change de forme. */
@media (min-width: 782px) {
	.su-duo__image .wp-block-image {
		--su-masque: url(../images/masques/large-2.webp);
	}

	.su-duo--inverse .su-duo__image .wp-block-image {
		--su-masque: url(../images/masques/large-inverse.webp);
	}

	.su-duo__image .is-style-detoure {
		--su-masque: url(../images/masques/duo-1.webp);
	}

	.su-section:has(.su-duo:not(.su-duo--inverse) .is-style-detoure) ~ .su-section .su-duo:not(.su-duo--inverse) .su-duo__image .is-style-detoure {
		--su-masque: url(../images/masques/duo-2.webp);
	}

	.su-duo--inverse .su-duo__image .is-style-detoure {
		--su-masque: url(../images/masques/duo-inverse.webp);
	}
}

/* Photos des duos d'un bord à l'autre : fondues en haut et en bas. */
@media (max-width: 781px) {
	.su-duo__image .wp-block-image {
		--su-masque: url(../images/masques/bord-1.webp);
	}

	.su-duo--inverse .su-duo__image .wp-block-image {
		--su-masque: url(../images/masques/bord-2.webp);
	}
}

/* Démo du labo, posée dans une carte et non au bord de l'écran : fondue tout autour. */
.su-labo-effet__demo .is-style-detoure {
	--su-masque: url(../images/masques/vignette-2.webp);
}

.su-galerie__piste .wp-block-image,
.su-article__image,
.su-article__une,
.su-mosaique .wp-block-image {
	--su-masque: url(../images/masques/vignette-1.webp);
}

.su-galerie__piste > :nth-child(3n + 2),
.su-mosaique > :nth-child(3n + 2),
.wp-block-post:nth-child(3n + 2) .su-article__image {
	--su-masque: url(../images/masques/vignette-2.webp);
}

.su-galerie__piste > :nth-child(3n),
.su-mosaique > :nth-child(3n),
.wp-block-post:nth-child(3n) .su-article__image {
	--su-masque: url(../images/masques/vignette-3.webp);
}

/* Éveil : au survol de la souris (pas sur écran tactile, où le survol reste collé après un toucher), ou au clavier sur
   une photo qui mène quelque part (carte, galerie, mosaïque). Rapide à l'aller, plus lent au retour. */
@media (hover: hover) and (pointer: fine) {
	.su-hero__visuel:hover .su-hero__image,
	.su-duo__image:hover .wp-block-image,
	.su-labo-effet__demo .is-style-detoure:hover,
	.su-bandeau__image:hover,
	.su-galerie__piste .wp-block-image:hover,
	.su-article:hover .su-article__image,
	.su-article__une:hover,
	.su-mosaique .wp-block-image:hover {
		--su-eveil: 1;
		--su-eveil-duree: 0.45s;
	}
}

.su-article:has(:focus-visible) .su-article__image,
.su-galerie__piste .wp-block-image:has(:focus-visible),
.su-mosaique .wp-block-image:has(:focus-visible) {
	--su-eveil: 1;
	--su-eveil-duree: 0.45s;
}

@media (prefers-reduced-motion: no-preference) {
	html:not([data-calme]) :where(.su-hero__image, .su-duo__image:not(.su-inge__portrait) .wp-block-image, .su-labo-effet__demo .is-style-detoure, .su-bandeau__image, .su-galerie__piste .wp-block-image, .su-article__image:not(.su-article__image--vide), .su-article__une, .su-mosaique .wp-block-image) {
		transition: --su-eveil var(--su-eveil-duree, 0.8s) var(--su-courbe);
	}
}

/* Impression et contraste forcé : la photo telle quelle, sans fond, voile ni contour. */
@media print, (forced-colors: active) {
	:is(.su-hero__image, .su-duo__image:not(.su-inge__portrait) .wp-block-image, .su-labo-effet__demo .is-style-detoure, .su-bandeau__image, .su-galerie__piste .wp-block-image, .su-article__image:not(.su-article__image--vide), .su-article__une, .su-mosaique .wp-block-image) {
		background-color: transparent;
		-webkit-mask-image: none;
		mask-image: none;
	}

	:is(.su-hero__image, .su-duo__image:not(.su-inge__portrait) .wp-block-image, .su-labo-effet__demo .is-style-detoure, .su-bandeau__image, .su-galerie__piste .wp-block-image, .su-article__image:not(.su-article__image--vide), .su-article__une, .su-mosaique .wp-block-image)::before {
		content: none;
	}

	:is(.su-hero__image, .su-duo__image:not(.su-inge__portrait) .wp-block-image, .su-labo-effet__demo .is-style-detoure, .su-bandeau__image, .su-galerie__piste .wp-block-image, .su-article__image:not(.su-article__image--vide), .su-article__une, .su-mosaique .wp-block-image) img {
		mix-blend-mode: normal;
		filter: none;
	}
}

/* ---------- Formulaires ---------- */

.su-formulaire {
	display: grid;
	gap: 2rem;
}

/* Le script masque les champs après l'envoi : rien ne doit les réafficher. */
.su-formulaire [hidden] {
	display: none !important;
}

/* Piège à robots : hors de vue, hors du parcours clavier et des lecteurs d'écran. */
.su-formulaire__piege {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.su-formulaire__champs {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1.6rem 1.25rem;
}

.su-champ {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	grid-column: 1 / -1;
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
}

.su-champ--court {
	grid-column: auto;
}

@media (max-width: 639px) {
	.su-formulaire__champs {
		grid-template-columns: minmax(0, 1fr);
	}
}

.su-champ > label,
.su-champ > legend {
	font-weight: 500;
	line-height: 1.4;
	color: var(--titre);
}

/* Groupe de cases ou de boutons radio : la légende se comporte comme une étiquette ordinaire. */
.su-champ--cases,
.su-champ--choix {
	display: block;
}

.su-champ--cases > legend,
.su-champ--choix > legend {
	float: left;
	width: 100%;
	margin-bottom: 0.4rem;
	padding: 0;
}

.su-champ--cases > legend ~ *,
.su-champ--choix > legend ~ * {
	clear: both;
}

.su-champ__facultatif {
	font-weight: 300;
	color: var(--texte);
}

.su-champ__aide {
	display: block;
	font-size: var(--wp--preset--font-size--petit);
	line-height: 1.5;
}

.su-champ__erreur {
	display: block;
	font-size: var(--wp--preset--font-size--petit);
	font-weight: 600;
	line-height: 1.5;
	color: var(--su-erreur);
}

.su-champ__erreur:empty {
	display: none;
}

/* Champ à revoir : un filet à gauche, le message juste au-dessus de la saisie. */
.su-champ.a-revoir {
	padding-left: 1rem;
	border-left: 3px solid var(--su-erreur);
}

.su-champ input:not([type="checkbox"]):not([type="radio"]),
.su-champ select,
.su-champ textarea {
	box-sizing: border-box;
	width: 100%;
	min-height: 3rem;
	margin: 0;
	padding: 0.7rem 0.95rem;
	border: var(--su-trait) solid var(--lien);
	border-radius: 0.75rem;
	background-color: var(--surface);
	color: var(--titre);
	font: inherit;
	font-weight: 400;
	transition: border-color 0.2s var(--su-courbe), box-shadow 0.2s var(--su-courbe);
}

.su-champ textarea {
	min-height: 9.5rem;
	resize: vertical;
}

.su-champ ::placeholder {
	color: var(--texte);
	opacity: 0.8;
}

.su-champ input:not([type="checkbox"]):not([type="radio"]):hover,
.su-champ select:hover,
.su-champ textarea:hover,
.su-champ input:not([type="checkbox"]):not([type="radio"]):focus,
.su-champ select:focus,
.su-champ textarea:focus {
	border-color: var(--titre);
}

.su-champ :is(input, select, textarea):focus-visible {
	outline-offset: 2px;
}

.su-champ [aria-invalid="true"] {
	border-color: var(--su-erreur) !important;
	box-shadow: inset 0 0 0 1px var(--su-erreur);
}

/* Liste déroulante : flèche dessinée, la même dans tous les navigateurs. */
.su-champ select {
	appearance: none;
	padding-right: 2.75rem;
	background-image: linear-gradient(45deg, transparent 50%, var(--lien) 50%), linear-gradient(135deg, var(--lien) 50%, transparent 50%);
	background-position: right 1.375rem center, right 1rem center;
	background-size: 0.375rem 0.375rem;
	background-repeat: no-repeat;
	cursor: pointer;
}

@media (forced-colors: active) {
	.su-champ select {
		appearance: auto;
		padding-right: 0.95rem;
		background-image: none;
	}
}

/* Cases à cocher : chaque choix est une petite carte cliquable en entier. */
.su-choix {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
	gap: 0.6rem;
	margin: 0.5rem 0 0;
	padding: 0;
	list-style: none;
}

.su-choix > li {
	position: relative;
	display: flex;
	align-items: center;
	gap: 0.7rem;
	margin: 0;
	padding: 0.7rem 0.9rem;
	border: 1px solid color-mix(in srgb, var(--lien) 45%, transparent);
	border-radius: 0.75rem;
	background-color: var(--surface);
	transition: border-color 0.2s var(--su-courbe), box-shadow 0.2s var(--su-courbe);
}

.su-choix > li:hover {
	border-color: var(--lien);
}

.su-choix > li:has(input:checked) {
	border-color: var(--lien);
	box-shadow: inset 0 0 0 1px var(--lien);
}

.su-choix input {
	flex: none;
	width: 1.15rem;
	height: 1.15rem;
	margin: 0;
	accent-color: var(--lien);
}

.su-choix label {
	line-height: 1.35;
	cursor: pointer;
}

.su-choix label::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
}

/* Quantité : un champ court, son unité à côté (« heures », « titres »). */
.su-champ__quantite {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	min-width: 0;
}

.su-champ__quantite > input:not([type="checkbox"]):not([type="radio"]) {
	flex: 0 1 8rem;
	width: 8rem;
	min-width: 0;
}

.su-champ__unite {
	line-height: 1.4;
}

/* Case seule : son libellé dit déjà la question ; la légende reste lue par les lecteurs d'écran. */
.su-champ--seule {
	position: relative;
}

.su-champ--seule > legend {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* Résultat de l'envoi, en tête du formulaire : merci, ou les champs à revoir (chaque lien mène au champ). */
.su-formulaire__etat {
	padding: 1.25rem 1.5rem;
	border: 1px solid color-mix(in srgb, var(--lien) 40%, transparent);
	border-left: 4px solid var(--lien);
	border-radius: 0.75rem;
	background-color: var(--surface);
}

.su-formulaire__etat > * {
	margin: 0;
}

.su-formulaire__etat > * + * {
	margin-block-start: 0.6rem;
}

.su-formulaire__etat-titre {
	font-weight: 600;
	color: var(--titre);
}

.su-formulaire__etat ul {
	padding-left: 1.2rem;
}

.su-formulaire__etat--erreur {
	border-color: color-mix(in srgb, var(--su-erreur) 40%, transparent);
	border-left-color: var(--su-erreur);
}

.su-formulaire__etat--erreur .su-formulaire__etat-titre,
.su-formulaire__etat--erreur ul a {
	color: var(--su-erreur);
}

.su-formulaire__etat--erreur ul a {
	font-weight: 500;
}

.su-formulaire__autre {
	padding: 0;
	border: 0;
	background: none;
	color: var(--lien);
	font: inherit;
	font-weight: 500;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.22em;
	cursor: pointer;
}

.su-formulaire__envoi {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem 1.75rem;
}

/* Sur un petit écran, un libellé long passe à la ligne au lieu de sortir de l'écran. */
.su-formulaire__bouton {
	flex: 0 1 auto;
	max-width: 100%;
	cursor: pointer;
	transition: box-shadow 0.3s var(--su-courbe), opacity 0.3s var(--su-courbe);
}

.su-formulaire__bouton:hover,
.su-formulaire__bouton:focus-visible,
.su-devis__continuer:hover,
.su-devis__continuer:focus-visible {
	box-shadow: 0 0.75rem 1.75rem -0.6rem rgb(242 140 40 / 55%);
}

.su-formulaire__bouton[aria-disabled="true"],
.su-devis__continuer[aria-disabled="true"] {
	cursor: progress;
	opacity: 0.7;
}

.su-formulaire__mention {
	flex: 1 1 18rem;
	margin: 0;
	font-size: var(--wp--preset--font-size--petit);
	line-height: 1.5;
}

/* Précision placée entre deux questions (elle suit les prestations cochées, comme elles). */
.su-formulaire__note {
	grid-column: 1 / -1;
	margin: 0;
	padding: 0.75rem 1rem;
	border-left: 3px solid var(--lien);
	border-radius: 0 0.5rem 0.5rem 0;
	background-color: var(--surface);
	font-size: var(--wp--preset--font-size--petit);
	line-height: 1.5;
}

/* ---------- Demande de devis en étapes ---------- */

/*
 * Sans script, les étapes s'affichent l'une sous l'autre, séparées d'un filet. Avec lui (.su-devis--etapes), une seule
 * étape est visible sous la progression ; les autres portent l'attribut hidden.
 */
.su-formulaire__champs.su-devis__etapes {
	grid-template-columns: minmax(0, 1fr);
	gap: 2.5rem;
}

.su-devis--etapes .su-devis__etapes {
	gap: 2rem;
}

.su-formulaire--devis:not(.su-devis--etapes) .su-devis__etape + .su-devis__etape {
	padding-top: 2.5rem;
	border-top: 1px solid color-mix(in srgb, var(--lien) 30%, transparent);
}

.su-devis__etape {
	display: grid;
	gap: 1.6rem;
	min-width: 0;
}

.su-devis__etape > p {
	margin: 0;
}

.su-devis__titre {
	margin: 0;
	font-size: clamp(1.375rem, 1.2rem + 0.6vw, 1.625rem);
	line-height: 1.2;
	scroll-margin-top: 7.5rem;
}

.su-devis__titre:focus:not(:focus-visible) {
	outline: none;
}

.su-devis__titre:focus-visible {
	outline-offset: 0.4rem;
	border-radius: 0.25rem;
}

.su-devis__compte {
	display: block;
	margin-bottom: 0.5rem;
	font-size: 0.8125rem;
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--lien);
}

/* Progression : un segment par étape ; faites, en cours (pastille jaune), à venir. */
.su-devis__progression {
	display: flex;
	gap: 0.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.su-devis__progression li {
	position: relative;
	display: flex;
	flex: 1 1 0;
	align-items: center;
	gap: 0.55rem;
	min-width: 0;
	margin: 0;
	padding-top: 0.75rem;
	border-top: 3px solid color-mix(in srgb, var(--lien) 25%, transparent);
	color: var(--texte);
	font-size: 0.8125rem;
	line-height: 1.3;
	transition: border-color 0.35s var(--su-courbe), color 0.35s var(--su-courbe);
}

.su-devis__progression li.est-faite {
	border-top-color: var(--lien);
	color: var(--lien);
}

.su-devis__progression li[aria-current="step"] {
	border-top-color: var(--bouton);
	color: var(--titre);
	font-weight: 600;
}

.su-devis__pastille {
	display: inline-grid;
	flex: none;
	place-items: center;
	width: 1.75rem;
	height: 1.75rem;
	border: 1px solid currentColor;
	border-radius: 50%;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	transition: background-color 0.35s var(--su-courbe), border-color 0.35s var(--su-courbe), color 0.35s var(--su-courbe);
}

.su-devis__progression li.est-faite .su-devis__pastille {
	border-color: var(--lien);
	background-color: var(--lien);
	color: var(--surface);
}

.su-devis__progression li[aria-current="step"] .su-devis__pastille {
	border-color: var(--bouton);
	background-color: var(--bouton);
	color: var(--bouton-texte);
}

.su-devis__nom {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Sur un téléphone, les pastilles seules : le titre de l'étape, juste dessous, dit où l'on est. */
@media (max-width: 479px) {
	.su-devis__nom {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip-path: inset(50%);
	}
}

/* Groupe de questions d'une prestation : un filet, puis son nom. */
.su-devis__section {
	min-width: 0;
	margin: 0;
	padding: 1.5rem 0 0;
	border: 0;
	border-top: 1px solid color-mix(in srgb, var(--lien) 30%, transparent);
}

.su-devis__legende {
	float: left;
	width: 100%;
	margin: 0 0 1.1rem;
	padding: 0;
	font-weight: 600;
	line-height: 1.4;
	color: var(--titre);
}

.su-devis__legende ~ * {
	clear: both;
}

.su-devis__grille {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1.6rem 1.25rem;
}

@media (max-width: 639px) {
	.su-devis__grille {
		grid-template-columns: minmax(0, 1fr);
	}
}

.su-devis__navigation,
.su-devis__calculer {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem 1.75rem;
}

.su-devis__continuer {
	flex: 0 1 auto;
	max-width: 100%;
	cursor: pointer;
	transition: box-shadow 0.3s var(--su-courbe), opacity 0.3s var(--su-courbe);
}

.su-devis__retour {
	padding: 0;
	border: 0;
	background: none;
	color: var(--lien);
	font: inherit;
	font-weight: 500;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.22em;
	cursor: pointer;
}

.su-devis__retour:hover {
	color: var(--titre);
}

/* Dernière étape : « Envoyer » et « Retour » sur une ligne, la mention dessous. */
.su-devis--etapes .su-formulaire__mention {
	flex-basis: 100%;
}

.su-devis__sansjs {
	font-size: var(--wp--preset--font-size--petit);
	line-height: 1.5;
}

/* Avis du parcours : l'estimation à calculer, la demande pas encore partie, l'estimation indisponible. */
.su-devis__avis,
.su-devis__attente,
.su-devis__indisponible {
	margin: 0;
	padding: 0.75rem 1rem;
	border-left: 3px solid var(--lien);
	border-radius: 0 0.5rem 0.5rem 0;
	background-color: var(--surface);
	line-height: 1.55;
}

.su-devis__avis {
	font-weight: 500;
	color: var(--titre);
}

.su-devis__estimation {
	display: grid;
	gap: 1.25rem;
	min-width: 0;
}

/* Récapitulatif avant l'envoi. */
.su-devis__recap {
	padding: 1.25rem 1.5rem;
	border: 1px solid color-mix(in srgb, var(--lien) 40%, transparent);
	border-radius: 0.75rem;
	background-color: var(--surface);
}

.su-devis__recap-titre {
	margin: 0;
	font-weight: 600;
	color: var(--titre);
}

.su-devis__recap dl {
	display: grid;
	gap: 0.45rem;
	margin: 0.75rem 0 0;
	font-size: var(--wp--preset--font-size--petit);
	line-height: 1.5;
}

.su-devis__recap dl > div {
	display: flex;
	flex-wrap: wrap;
	gap: 0 0.4rem;
}

.su-devis__recap dt {
	font-weight: 600;
	color: var(--titre);
}

.su-devis__recap dd {
	margin: 0;
}

/* Étape affichée : elle monte doucement, sauf mouvement réduit ou mode calme. */
@media (prefers-reduced-motion: no-preference) {
	html:not([data-calme]) .su-devis__etape.est-entree {
		animation: su-devis-entree 0.45s var(--su-courbe) both;
	}
}

@keyframes su-devis-entree {
	from {
		opacity: 0;
		translate: 0 0.75rem;
	}
}

/* Estimation : l'en-tête dit l'essentiel (total, estimation partielle ou prix sur mesure), le détail suit par
   prestation comme sur un devis, puis les hypothèses, les conditions et le barème. */
.su-estimation {
	display: grid;
	gap: 1.25rem;
	min-width: 0;
}

.su-estimation > *,
.su-estimation__apercu > *,
.su-estimation__tete > *,
.su-estimation__bloc > *,
.su-estimation__mentions > * {
	margin: 0;
}

.su-estimation__apercu,
.su-estimation__admin {
	padding: 1rem 1.25rem;
	border: 2px dashed var(--lien);
	border-radius: 0.75rem;
	font-size: var(--wp--preset--font-size--petit);
	line-height: 1.5;
}

.su-estimation__apercu > * + * {
	margin-block-start: 0.5rem;
}

/* En-tête : l'étiquette, puis le total (A, B) ou ce qui reste à faire (C, D). */
.su-estimation__tete {
	display: grid;
	gap: 0.45rem;
	padding: 1.25rem 1.5rem;
	border: 1px solid color-mix(in srgb, var(--lien) 40%, transparent);
	border-left: 4px solid var(--lien);
	border-radius: 0.75rem;
	background-color: var(--surface);
}

.su-estimation__etiquette {
	font-size: var(--wp--preset--font-size--petit);
	font-weight: 600;
	line-height: 1.4;
	color: var(--titre);
}

.su-estimation__total {
	font-size: var(--wp--preset--font-size--grand);
	font-weight: 600;
	line-height: 1.15;
	color: var(--titre);
	font-variant-numeric: tabular-nums;
	text-wrap: balance;
}

.su-estimation__message {
	line-height: 1.55;
}

.su-estimation__tete > .su-estimation__message {
	font-weight: 500;
	color: var(--titre);
}

/* Rien à chiffrer, ou calcul indisponible : un avis, comme ceux du parcours. */
.su-estimation--vide > .su-estimation__message,
.su-estimation--indisponible > .su-estimation__message {
	padding: 0.75rem 1rem;
	border-left: 3px solid var(--lien);
	border-radius: 0 0.5rem 0.5rem 0;
	background-color: var(--surface);
}

.su-estimation__taxe,
.su-estimation__note,
.su-estimation__mentions,
.su-estimation__bareme,
.su-estimation__avertissement {
	font-size: var(--wp--preset--font-size--petit);
	line-height: 1.5;
}

.su-estimation__mentions {
	display: grid;
	gap: 0.35rem;
}

.su-estimation__avertissement {
	font-weight: 500;
	color: var(--titre);
}

/* Notes d'une estimation partielle (C) : au plus près du détail qu'elles précisent. */
.su-estimation > .su-estimation__lots + .su-estimation__note,
.su-estimation > .su-estimation__note + .su-estimation__taxe {
	margin-top: -0.75rem;
}

/* Détail par prestation : le nom et le montant sur une ligne, ce qui le compose dessous. */
.su-estimation__lots {
	display: grid;
	gap: 1.25rem;
	min-width: 0;
}

.su-estimation__lot {
	display: grid;
	gap: 0.4rem;
	min-width: 0;
}

.su-estimation__lot-titre,
.su-estimation__sous-titre {
	margin: 0;
	font-size: var(--wp--preset--font-size--normal);
	font-weight: 600;
	line-height: 1.35;
	color: var(--titre);
}

.su-estimation__lignes {
	display: grid;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: var(--wp--preset--font-size--petit);
	line-height: 1.5;
}

.su-estimation__ligne {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: baseline;
	gap: 0.1rem 1rem;
	margin: 0;
	padding: 0.55rem 0;
	border-bottom: 1px solid color-mix(in srgb, var(--lien) 30%, transparent);
}

.su-estimation__nom {
	font-weight: 500;
	color: var(--titre);
}

.su-estimation__prix {
	font-variant-numeric: tabular-nums;
	font-weight: 600;
	color: var(--titre);
	text-align: right;
	white-space: nowrap;
}

.su-estimation__detail {
	grid-column: 1 / -1;
	min-width: 0;
}

.su-estimation__ligne--majoration .su-estimation__nom {
	font-weight: 400;
	color: var(--texte);
}

.su-estimation__ligne--sous-total {
	border-bottom: 0;
}

.su-estimation__ligne--sous-total .su-estimation__nom {
	font-weight: 600;
}

/* Totaux détaillés (arrondi, taxe), quand ils apprennent quelque chose de plus que le total. */
.su-estimation__totaux {
	display: grid;
	gap: 0.35rem;
	margin: 0;
	padding: 0.85rem 1.1rem;
	border-radius: 0.75rem;
	background-color: var(--surface);
	font-size: var(--wp--preset--font-size--petit);
	line-height: 1.5;
}

.su-estimation__totaux > div {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 0 1rem;
}

.su-estimation__totaux dt {
	font-weight: 500;
	color: var(--titre);
}

.su-estimation__totaux dd {
	margin: 0;
	font-variant-numeric: tabular-nums;
	font-weight: 600;
	color: var(--titre);
	white-space: nowrap;
}

/* Listes titrées : hypothèses retenues, points à étudier, ce qui dépasse les repères. */
.su-estimation__bloc {
	display: grid;
	gap: 0.35rem;
	padding-left: 1rem;
	border-left: 3px solid color-mix(in srgb, var(--lien) 45%, transparent);
	font-size: var(--wp--preset--font-size--petit);
	line-height: 1.5;
}

.su-estimation__bloc--etudes {
	border-left-color: var(--lien);
}

.su-estimation__bloc ul {
	margin: 0;
	padding-left: 1.2rem;
}

.su-estimation__bloc li + li {
	margin-top: 0.25rem;
}

.su-estimation__conditions {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.75rem 1.25rem;
	font-size: var(--wp--preset--font-size--petit);
	line-height: 1.5;
}

.su-estimation__conditions dt {
	font-weight: 600;
	color: var(--titre);
}

.su-estimation__conditions dd {
	margin: 0;
}

@media (max-width: 639px) {
	.su-estimation__tete {
		padding: 1rem 1.1rem;
	}

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

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

.su-pied {
	position: relative;
	margin-top: clamp(3rem, 6vw, 5rem);
}

/* Signature : SOUND UP sur toute la largeur, en VU-mètre dont le niveau monte un peu vers UP, à demi effacé pour rester
   discret. Le contour de chaque lettre reste tracé ; dessous, un second exemplaire de la lettre est peint en segments
   (turquoise, puis jaune et orange vers le haut, comme le VU-mètre de lecture) et découpé à la hauteur du niveau :
   --n segments allumés sur douze, et --c, la crête, un segment resté allumé plus haut. Au repos, tout reste turquoise ;
   l'effet 15 fait jouer le niveau et le fait sauter au défilement ; sans lui, chaque lettre reste à son niveau --fin. */
.su-signature {
	container-type: inline-size;
	padding: 0 var(--su-marge);
	pointer-events: none;
	user-select: none;
}

.su-signature__texte {
	--seg: 0.0575em; /* un segment : douze font la hauteur des capitales */
	--jeu: max(1px, 0.014em); /* espace entre deux segments */
	--base: 0.672em; /* ligne de base, depuis le haut de la lettre (mesurée : 0,664 à 0,676 em selon la taille) */
	--pied: 0.128em; /* sous la ligne de base, jusqu'au bas de la lettre */
	display: block;
	/* L'encre de SOUND UP (7,085 em en Syncopate) tient toute la largeur ; le décalage cale le S sur le bord. */
	margin-inline-start: -0.06em;
	font-family: var(--wp--preset--font-family--syncopate);
	font-size: 12vw;
	font-size: 14.1cqi;
	font-weight: 700;
	line-height: 0.8;
	white-space: nowrap;
	color: transparent;
	-webkit-text-stroke: 1px var(--decor);
	-webkit-text-stroke: 1px color-mix(in srgb, var(--decor) 50%, transparent);
}

.su-signature [data-l] {
	--n: var(--fin);
	--c: 0;
	position: relative;
	z-index: 0;
	display: inline-block;
}

.su-signature [data-l]:nth-child(1) { --fin: 2; }
.su-signature [data-l]:nth-child(2) { --fin: 2; }
.su-signature [data-l]:nth-child(3) { --fin: 3; }
.su-signature [data-l]:nth-child(4) { --fin: 3; }
.su-signature [data-l]:nth-child(5) { --fin: 4; }
.su-signature [data-l]:nth-child(6) { --fin: 4; }
.su-signature [data-l]:nth-child(7) { --fin: 5; }

.su-signature [data-l]::before,
.su-signature [data-l]::after {
	content: attr(data-l);
	position: absolute;
	inset: 0;
	z-index: -1;
	-webkit-text-stroke: 0;
	background: linear-gradient(to top, var(--decor) 0 calc(var(--pied) + 7 * var(--seg)), var(--bouton) 0 calc(var(--pied) + 10 * var(--seg)), #f28c28 0);
	/* Le turquoise du repos à demi effacé ; le jaune et l'orange, atteints seulement quand la signature saute, gardent
	   presque tout leur éclat. */
	background: linear-gradient(to top, color-mix(in srgb, var(--decor) 50%, transparent) 0 calc(var(--pied) + 7 * var(--seg)), color-mix(in srgb, var(--bouton) 85%, transparent) 0 calc(var(--pied) + 10 * var(--seg)), color-mix(in srgb, #f28c28 85%, transparent) 0);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-mask: repeating-linear-gradient(to top, #000 0 calc(var(--seg) - var(--jeu)), transparent 0 var(--seg)) 0 calc(100% - var(--pied)) / 100% calc(12 * var(--seg)) no-repeat;
	mask: repeating-linear-gradient(to top, #000 0 calc(var(--seg) - var(--jeu)), transparent 0 var(--seg)) 0 calc(100% - var(--pied)) / 100% calc(12 * var(--seg)) no-repeat;
}

/* Niveau : tout ce qui est au-dessus du segment --n est coupé. */
.su-signature [data-l]::after {
	clip-path: inset(calc(var(--base) - var(--n) * var(--seg)) -0.1em 0 -0.1em);
}

/* Crête : le segment --c seul (à 0, la découpe tombe sous la ligne de base, où rien n'est peint). */
.su-signature [data-l]::before {
	clip-path: inset(calc(var(--base) - var(--c) * var(--seg)) -0.1em calc(var(--pied) + (var(--c) - 1) * var(--seg)) -0.1em);
}

@media (forced-colors: active) {
	.su-signature [data-l]::before,
	.su-signature [data-l]::after {
		display: none;
	}
}

.su-pied__grille {
	display: grid;
	grid-template-columns: minmax(16rem, 1.25fr) auto auto auto minmax(13rem, 1fr);
	align-items: start;
	gap: 2.5rem clamp(1.5rem, 3vw, 3rem);
	padding: 2.25rem var(--su-marge) 2.5rem;
	font-size: 0.9375rem;
	line-height: 1.6;
}

.su-pied__grille > * {
	margin: 0;
}

.su-pied a {
	color: var(--titre);
	text-decoration: none;
}

.su-pied a:hover,
.su-pied a:focus-visible {
	text-decoration: underline;
	text-decoration-color: var(--bouton);
	text-decoration-thickness: 2px;
}

.su-pied__studio {
	display: flex;
	align-items: flex-start;
	gap: 1.5rem;
}

.su-pied__studio > * {
	margin: 0;
}

.su-logo--pied {
	width: 6rem;
}

.su-pied__adresse > * {
	margin: 0;
}

.su-pied__nom {
	font-size: 1.375rem;
	font-weight: 700;
	line-height: 1;
	text-transform: uppercase;
	color: var(--titre);
}

.su-pied__nom .su-couleur {
	display: block;
}

.su-pied__adresse p + p {
	margin-top: 0.5rem;
}

.su-pied__acces {
	font-weight: 600;
	color: var(--titre);
}

.su-etiquette {
	display: inline-block;
	margin: 0 0 0.8rem;
	padding: 0.15em 0.5em;
	font-size: 0.9375rem;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	background-color: var(--decor);
	color: var(--su-encre);
}

.su-pied__bloc > * {
	margin: 0;
}

.su-pied__bloc > .su-etiquette {
	margin-bottom: 0.8rem;
}

.su-pied__bloc--vertical {
	display: flex;
	align-items: flex-start;
	gap: 1rem;
}

.su-pied__bloc--vertical > .su-etiquette {
	margin: 0;
	padding: 0.5em 0.15em;
	writing-mode: vertical-rl;
	rotate: 180deg;
}

.su-pied__liens {
	display: grid;
	gap: 0.15rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.su-pied__contact > * {
	margin: 0;
}

.su-pied__contact p + p {
	margin-top: 0.6rem;
}

.su-pied__contact a {
	font-weight: 600;
}

.su-reseaux {
	display: flex;
	flex-wrap: wrap;
	gap: 0.55rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.su-reseaux__lien {
	display: grid;
	place-items: center;
	width: 2.75rem;
	aspect-ratio: 1;
	border: var(--su-trait) solid var(--titre);
	border-radius: 50%;
	color: var(--titre);
	transition: background-color 0.3s var(--su-courbe), border-color 0.3s var(--su-courbe), color 0.3s var(--su-courbe);
}

.su-pied .su-reseaux__lien:hover,
.su-reseaux__lien:hover,
.su-reseaux__lien:focus-visible {
	border-color: var(--bouton);
	background-color: var(--bouton);
	color: var(--bouton-texte);
	text-decoration: none;
}

/* Pied de page sur grand écran : les cinq réseaux tiennent sur une ligne, à la taille de l'original. Ailleurs, les ronds
   gardent 44 px pour le doigt. */
@media (min-width: 1100px) {
	.su-pied .su-reseaux {
		gap: 0.5rem;
	}

	.su-pied .su-reseaux__lien {
		width: 2.375rem;
	}

	.su-pied .su-reseaux__lien svg {
		width: 1.25rem;
		height: 1.25rem;
	}
}

.su-mentions {
	margin-top: 1.25rem !important;
	font-size: 0.8125rem;
}

/* Lien pris dans une phrase : souligné, sa couleur seule ne le distingue pas assez du texte autour. */
.su-pied .su-mentions a {
	text-decoration-line: underline;
	text-underline-offset: 0.2em;
}

/* Pause des animations qui durent, ondes de fond (13) et signature (15) : montrée par mouvement.js quand l'une joue ;
   l'icône dit ce que fait le clic. */
.su-ondes-pause {
	display: inline-flex;
	align-items: center;
	gap: 0.55em;
	min-height: 1.5rem;
	margin-top: 0.75rem;
	padding: 0.25rem 0;
	border: 0;
	background: none;
	color: var(--titre);
	font: inherit;
	font-size: 0.8125rem;
	cursor: pointer;
}

.su-ondes-pause::before {
	content: "";
	flex: none;
	width: 0.6em;
	height: 0.7em;
	border-inline: 0.2em solid currentColor;
}

.su-ondes-pause.est-fige::before {
	border: 0;
	background-color: currentColor;
	clip-path: polygon(0 0, 100% 50%, 0 100%);
}

.su-ondes-pause:hover,
.su-ondes-pause:focus-visible {
	text-decoration: underline;
	text-decoration-color: var(--bouton);
	text-decoration-thickness: 2px;
}

.su-ondes-pause[hidden] {
	display: none;
}

/* Haut de page : apparaît après deux écrans de défilement. Aligné sur le bord droit du contenu, ou au milieu de la
   marge quand elle peut le contenir : à cheval sur le bord, il paraissait se cogner aux cartes du formulaire. */
.su-haut {
	--su-haut-taille: 3rem;
	--su-haut-marge: max(var(--su-marge), calc((100% - var(--su-large)) / 2));
	position: fixed;
	right: var(--su-haut-marge);
	bottom: 1.25rem;
	z-index: 25;
	display: grid;
	place-items: center;
	width: var(--su-haut-taille);
	aspect-ratio: 1;
	padding: 0;
	border: var(--su-trait) solid var(--titre);
	border-radius: 50%;
	background-color: color-mix(in srgb, var(--fond) 85%, transparent);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	color: var(--titre);
	cursor: pointer;
	opacity: 0;
	visibility: hidden;
	translate: 0 0.75rem;
	transition:
		opacity 0.3s var(--su-courbe),
		translate 0.3s var(--su-courbe),
		visibility 0s linear 0.3s,
		background-color 0.3s var(--su-courbe),
		border-color 0.3s var(--su-courbe),
		color 0.3s var(--su-courbe);
}

.su-haut::before {
	content: "";
	width: 0.85rem;
	height: 1rem;
	background-color: currentColor;
	-webkit-mask: url(../images/fleche.svg) center / contain no-repeat;
	mask: url(../images/fleche.svg) center / contain no-repeat;
	rotate: 180deg;
}

.su-haut--visible {
	opacity: 1;
	visibility: visible;
	translate: none;
	transition-delay: 0s;
}

.su-haut:hover,
.su-haut:focus-visible {
	border-color: var(--bouton);
	background-color: var(--bouton);
	color: var(--bouton-texte);
}

.su-haut[hidden] {
	display: none;
}

/* Marge d'au moins 4 rem (le bouton et 0,5 rem de chaque côté) : 1 320 px de contenu, 2 × 4 rem et la barre de
   défilement. */
@media (min-width: 1480px) {
	.su-haut {
		right: calc((var(--su-haut-marge) - var(--su-haut-taille)) / 2);
	}
}

@media (prefers-reduced-motion: reduce) {
	.su-haut {
		translate: none;
		transition: none;
	}
}

/* Pied de page : cinq colonnes, puis trois, deux et une. Plus serrées, l'adresse e-mail (qui ne se coupe pas) et les
   liens longs sortaient de l'écran. */
@media (max-width: 1239px) {
	.su-pied__grille {
		grid-template-columns: repeat(3, minmax(0, auto));
	}

	.su-pied__studio {
		grid-column: 1 / -1;
	}
}

@media (max-width: 899px) {
	.su-pied__grille {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 599px) {
	.su-pied__grille {
		grid-template-columns: minmax(0, 1fr);
	}

	.su-pied__bloc--vertical {
		display: block;
	}

	.su-pied__bloc--vertical > .su-etiquette {
		margin-bottom: 0.8rem;
		padding: 0.15em 0.5em;
		writing-mode: horizontal-tb;
		rotate: none;
	}
}

/* ---------- Bandeau d'accord (mesure d'audience) ---------- */

/* Carte en bas à gauche, alignée sur le bord du contenu ; toute la largeur sur téléphone. Refuser et Accepter pèsent
   autant : même forme, même taille, mêmes couleurs. Montré par l'extension (inc/mesure.php) tant qu'aucun choix n'est
   gardé, sans animation : il ne bouge pas d'une page à l'autre. */
.su-accord {
	position: fixed;
	bottom: 1.25rem;
	left: max(var(--su-marge), calc((100% - var(--su-large)) / 2));
	z-index: 26;
	box-sizing: border-box;
	width: min(26rem, calc(100% - 2 * var(--su-marge)));
	padding: 1.25rem;
	border: 1px solid color-mix(in srgb, var(--titre) 10%, transparent);
	border-radius: 1.25rem;
	background-color: var(--surface);
	box-shadow: 0 1rem 2.5rem -1rem rgb(0 0 0 / 35%);
	color: var(--texte);
	font-size: 0.9375rem;
	line-height: 1.55;
}

.su-accord[hidden],
.su-accord-lien[hidden] {
	display: none;
}

.su-accord > * {
	margin: 0;
}

.su-accord > * + * {
	margin-top: 0.75rem;
}

.su-accord a {
	text-underline-offset: 0.2em;
}

.su-accord__etat {
	font-weight: 600;
	color: var(--titre);
}

.su-accord__essai {
	font-size: 0.8125rem;
}

.su-accord > .su-accord__choix {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-top: 1rem;
}

/* Comme les boutons à contour du site. */
.su-accord__bouton {
	flex: 1 1 8rem;
	min-height: 2.75rem;
	padding: 0.6em 1.4em;
	border: var(--su-trait) solid var(--titre);
	border-radius: 999px;
	background-color: transparent;
	color: var(--titre);
	font: inherit;
	font-size: var(--wp--preset--font-size--petit);
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color 0.3s var(--su-courbe), color 0.3s var(--su-courbe);
}

.su-accord__bouton:hover,
.su-accord__bouton:focus-visible {
	background-color: var(--titre);
	color: var(--fond);
}

/* Rouvert par « Gérer les cookies ». */
.su-accord--rouvert {
	animation: su-accord-entree 0.35s var(--su-courbe);
}

@keyframes su-accord-entree {
	from {
		opacity: 0;
		translate: 0 0.75rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.su-accord--rouvert {
		animation: none;
	}
}

html[data-calme] .su-accord--rouvert {
	animation: none;
}

/* « Gérer les cookies » dans le pied de page : un lien parmi les autres. */
.su-pied .su-accord-ouvrir {
	padding: 0;
	border: 0;
	background: none;
	color: var(--titre);
	font: inherit;
	text-align: start;
	cursor: pointer;
}

.su-pied .su-accord-ouvrir:hover,
.su-pied .su-accord-ouvrir:focus-visible {
	text-decoration: underline;
	text-decoration-color: var(--bouton);
	text-decoration-thickness: 2px;
}

/* Téléphone : bandeau plus serré. Tant qu'il est ouvert, « Haut de page » s'efface : posé au-dessus de lui, il tombait
   au milieu de l'écran, sur les titres (à 320 px, ou sur un écran de 667 px de haut). Il revient après la réponse. Un
   navigateur sans :has() le pose au-dessus du bandeau (hauteur donnée par mesure.js). */
@media (max-width: 599px) {
	.su-accord {
		padding: 1rem;
		font-size: 0.875rem;
	}

	.su-haut {
		bottom: max(1.25rem, calc(var(--su-accord-place, 0px) + 0.75rem));
	}

	body:has(> .su-accord:not([hidden])) .su-haut {
		opacity: 0;
		visibility: hidden;
	}
}

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

@media print {
	.su-entete,
	.su-pied,
	.su-fond,
	.su-mot-fond,
	.su-defiler,
	.su-vumetre,
	.su-rubriques,
	.su-appel--article,
	.su-proches,
	.su-accord,
	.su-accord-lien {
		display: none !important;
	}
}