/* =========================================================================
   Studio Pochoir — feuille de styles principale
   CSS vanilla, mobile-first, aucun framework.

   Sommaire
   01. Polices auto-hébergées
   02. Variables (charte)
   03. Réinitialisation et base
   04. Utilitaires et composants transverses
   05. En-tête, navigation, intro
   06. Section 1 — Hero
   07. Section 2 — Bandeau défilant
   08. Section 3 — Notre façon de travailler
   09. Section 4 — Les quatre pôles
   10. Section 5 — La méthode
   11. Section 6 — Déjà fait
   12. Section 7 — Contact et formulaire
   13. Pied de page
   14. Pages intérieures — éléments communs
   15. Page « Projets » et fiche projet
   16. Page « Services » et fiche service
   17. Blog : liste, article, archives
   18. Page « L’équipe »
   19. Gabarit générique (index.php)
   20. Animations et mouvement réduit
   ========================================================================= */

/* -------------------------------------------------------------------------
   01. Polices auto-hébergées (RGPD : aucun appel à un CDN externe)
   ---------------------------------------------------------------------- */

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

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

/* Texte courant — Instrument Sans (fonte variable 400 → 600) */
@font-face {
	font-family: 'Instrument Sans';
	font-style: normal;
	font-weight: 400 600;
	font-display: swap;
	src: url('../fonts/instrument-sans-var-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

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

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

/* -------------------------------------------------------------------------
   02. Variables — charte Studio Pochoir
   Répartition 60/30/10 : encre en fond dominant, corail en couleur
   structurante, vert acide réservé aux accents, CTA et survols.
   ---------------------------------------------------------------------- */

:root {
	/* Couleurs (jamais de noir pur) */
	--sp-encre: #241b4b;        /* fond dominant */
	--sp-encre-clair: #4c3e8a;  /* aplat secondaire, cercles découpés */
	--sp-encre-trait: #322762;  /* rayures et filets discrets */
	--sp-corail: #ff4e2c;       /* couleur primaire */
	--sp-vert: #c6f24e;         /* accents, CTA, survols uniquement */
	--sp-blanc: #ffffff;

	/* Typographie */
	--sp-titre: 'Bricolage Grotesque', 'Trebuchet MS', system-ui, sans-serif;
	--sp-texte: 'Instrument Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;

	/* Rythme */
	--sp-marge-x: clamp(16px, 5vw, 72px);
	--sp-section-y: clamp(56px, 10vw, 140px);

	/* Mouvement */
	--sp-ease: cubic-bezier(0.7, 0, 0.3, 1);
	--sp-transition: 200ms linear;
}

/* -------------------------------------------------------------------------
   03. Réinitialisation et base
   ---------------------------------------------------------------------- */

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

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-top: 90px;
}

body {
	margin: 0;
	background: var(--sp-encre);
	color: var(--sp-blanc);
	font-family: var(--sp-texte);
	font-size: 17px;
	line-height: 1.6;
	/* Garde-fou : `hidden` (et non `clip`) est propagé au viewport, donc il
	   bloque réellement le défilement horizontal. Le défilement vertical
	   n'est pas affecté. Les décors qui débordent sont rognés section par
	   section ; ceci ne sert que de dernier filet. */
	overflow-x: hidden;
}

h1,
h2,
h3,
p,
ul,
ol,
figure {
	margin: 0;
}

img,
svg {
	max-width: 100%;
}

a {
	color: var(--sp-vert);
	text-decoration: none;
	transition: background var(--sp-transition), color var(--sp-transition);
}

a:hover {
	background: var(--sp-vert);
	color: var(--sp-encre);
}

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

/* Focus visible : anneau clair doublé d'un halo encre, lisible sur tous
   les aplats de la charte (encre, corail, vert). */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 3px solid var(--sp-blanc);
	outline-offset: 2px;
	box-shadow: 0 0 0 6px var(--sp-encre);
}

/* Lien d'évitement */
.sp-skip-link {
	position: absolute;
	top: -100px;
	left: var(--sp-marge-x);
	z-index: 100;
	padding: 12px 18px;
	background: var(--sp-vert);
	color: var(--sp-encre);
	font-weight: 600;
	transition: top 150ms linear;
}

.sp-skip-link:focus {
	top: 12px;
}

/* -------------------------------------------------------------------------
   04. Utilitaires et composants transverses
   ---------------------------------------------------------------------- */

.sp-blanc {
	color: var(--sp-blanc);
}

/* Surtitre : petite ligne capitale verte au-dessus des grands titres */
.sp-surtitre {
	font-size: clamp(13px, 1.1vw, 15px);
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--sp-vert);
}

.sp-surtitre--point {
	display: flex;
	align-items: center;
	gap: 10px;
	letter-spacing: 0.16em;
}

.sp-point {
	flex: none;
	width: 10px;
	height: 10px;
	background: var(--sp-vert);
	animation: sp-blink 1.6s steps(1, end) infinite;
}

/* Grands titres de section */
.sp-titre-section {
	margin: 0;
	font-family: var(--sp-titre);
	font-weight: 800;
	font-size: clamp(38px, 6vw, 86px);
	line-height: 0.88;
	letter-spacing: -0.045em;
	text-transform: uppercase;
	color: var(--sp-blanc);
	/* Filet de sécurité : un mot plus large que l'écran est coupé plutôt que
	   d'élargir la page. */
	overflow-wrap: break-word;
}

/* En-tête de section : titre à gauche, mention à droite */
.sp-entete {
	position: relative;
	z-index: 2;
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 24px;
	margin-bottom: clamp(32px, 5vw, 64px);
}

.sp-lien-discret {
	padding: 8px 12px;
	font-size: 15px;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

/* Bouton principal */
.sp-bouton {
	display: inline-block;
	background: var(--sp-corail);
	color: var(--sp-encre);
	font-family: var(--sp-titre);
	font-weight: 800;
	letter-spacing: -0.02em;
	text-transform: uppercase;
	border: 0;
	cursor: pointer;
	transition: background var(--sp-transition), color var(--sp-transition);
}

.sp-bouton:hover,
.sp-bouton:focus-visible {
	background: var(--sp-vert);
	color: var(--sp-encre);
}

.sp-bouton--grand {
	font-size: clamp(19px, 2.4vw, 34px);
	padding: 16px clamp(20px, 3vw, 44px);
}

/* Tampon circulaire (texte sur cercle) */
.sp-stamp {
	position: absolute;
	z-index: 1;
	pointer-events: none;
}

.sp-stamp svg {
	display: block;
	animation: sp-spin 34s linear infinite;
}

.sp-stamp text {
	font-family: var(--sp-titre);
	font-weight: 800;
	font-size: 19.5px;
	letter-spacing: 0.005em;
	text-transform: uppercase;
}

/* Révélation « pochoir » : le masque se lève. Actif seulement si JS. */
.sp-js [data-reveal] {
	clip-path: inset(0 0 100% 0);
	transition: clip-path 320ms var(--sp-ease);
}

.sp-js [data-reveal].is-visible {
	clip-path: inset(0 0 0 0);
}

/* -------------------------------------------------------------------------
   05. En-tête, navigation, intro
   ---------------------------------------------------------------------- */

/* Panneau d'intro : affiché à la première visite de la session */
.sp-intro {
	display: none;
}

.sp-intro-on .sp-intro {
	position: fixed;
	inset: 0;
	z-index: 90;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	background: var(--sp-encre-clair);
	animation: sp-panel-out 300ms var(--sp-ease) 1100ms forwards;
}

.sp-intro__masque {
	overflow: hidden;
}

.sp-intro img {
	display: block;
	width: min(58vw, 340px);
	height: auto;
	animation: sp-mark-in 300ms var(--sp-ease) 250ms both;
}

/* Barre de progression de lecture */
.sp-progress {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 80;
	height: 4px;
	background: var(--sp-vert);
	transform: scaleX(0);
	transform-origin: 0 50%;
}

/* Barre de navigation fixe */
.sp-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 60;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 14px 24px;
	padding: 16px var(--sp-marge-x);
	background: var(--sp-encre);
	transition: transform 220ms var(--sp-ease);
}

/* Rétractée pendant le défilement vers le bas */
.sp-header.is-hidden {
	transform: translateY(-105%);
}

.sp-header__logo {
	display: block;
	overflow: hidden;
}

.sp-header__logo:hover {
	background: none;
}

.sp-header__logo img {
	display: block;
	height: clamp(34px, 8vw, 40px);
	width: auto;
}

/* Au survol, le logotype est tiré hors cadre puis repoussé dedans :
   même geste que le rideau d'ouverture. */
.sp-header__logo:hover img,
.sp-header__logo:focus-visible img {
	animation: sp-logo-remplacement 380ms var(--sp-ease);
}

.sp-header-spacer {
	height: 74px;
}

/* Menu horizontal. Sans JavaScript, il reste affiché à toutes les tailles :
   le burger et son panneau ne sont activés que si le script est chargé. */
.sp-nav {
	display: block;
}

.sp-menu,
.sp-menu-mobile {
	list-style: none;
	margin: 0;
	padding: 0;
}

.sp-menu {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: clamp(8px, 2.2vw, 32px);
	font-size: clamp(14px, 1.3vw, 15px);
	font-weight: 500;
	white-space: nowrap;
}

.sp-menu a {
	display: inline-block;
	padding: 6px 8px;
	background: var(--fond-lien, transparent);
	color: var(--sp-blanc);
}

.sp-menu a:hover,
.sp-menu a:focus-visible {
	background: var(--sp-vert);
	color: var(--sp-encre);
}

/* Dernier élément (ou item marqué `sp-cta` en administration) : bouton.
   Le fond passe par une variable, sinon cette règle, plus spécifique que
   celle du survol, empêcherait le bouton de réagir au passage de la souris. */
.sp-menu > li:last-child > a,
.sp-menu > li.sp-cta > a {
	--fond-lien: var(--sp-corail);

	color: var(--sp-encre);
	font-weight: 600;
	padding: 12px 18px;
}

/* Bouton burger (sous 760 px, uniquement si JavaScript est actif) */
.sp-burger {
	display: none;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 5px;
	width: 48px;
	height: 44px;
	padding: 0;
	background: var(--sp-corail);
	border: 0;
	cursor: pointer;
}

.sp-burger__bar {
	display: block;
	width: 22px;
	height: 3px;
	background: var(--sp-encre);
	transition: transform 200ms var(--sp-ease), opacity 120ms linear;
}

.sp-burger[aria-expanded='true'] .sp-burger__bar:nth-child(1) {
	transform: translateY(8px) rotate(45deg);
}

.sp-burger[aria-expanded='true'] .sp-burger__bar:nth-child(2) {
	opacity: 0;
}

.sp-burger[aria-expanded='true'] .sp-burger__bar:nth-child(3) {
	transform: translateY(-8px) rotate(-45deg);
}

/* Panneau mobile : révélé par un masque qui se lève */
.sp-nav-mobile {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 55;
	padding: 84px var(--sp-marge-x) 28px;
	background: var(--sp-encre);
	clip-path: inset(0 0 100% 0);
	pointer-events: none;
	transition: clip-path 240ms var(--sp-ease);
}

.sp-nav-mobile.is-open {
	clip-path: inset(0 0 0 0);
	pointer-events: auto;
}

.sp-menu-mobile {
	display: grid;
	gap: 10px;
	font-family: var(--sp-titre);
	font-weight: 800;
	font-size: clamp(32px, 10vw, 52px);
	letter-spacing: -0.035em;
	text-transform: uppercase;
}

.sp-menu-mobile a {
	display: block;
	padding: 8px 10px;
	background: var(--fond-lien, transparent);
	color: var(--sp-blanc);
}

.sp-menu-mobile a:hover,
.sp-menu-mobile a:focus-visible {
	background: var(--sp-vert);
	color: var(--sp-encre);
}

/* Même précaution que sur le menu horizontal : le fond du bouton passe par
   une variable pour ne pas prendre le pas sur le survol. */
.sp-menu-mobile > li:last-child > a,
.sp-menu-mobile > li.sp-cta > a {
	--fond-lien: var(--sp-corail);

	color: var(--sp-encre);
	padding: 12px 14px;
}

/* La barre d'administration est elle aussi fixe : on décale l'en-tête et le
   panneau mobile pour qu'ils ne passent pas dessous. */
body.admin-bar .sp-header,
body.admin-bar .sp-nav-mobile {
	top: 32px;
}

body.admin-bar .sp-progress {
	top: 32px;
}

@media screen and (max-width: 782px) {
	body.admin-bar .sp-header,
	body.admin-bar .sp-nav-mobile,
	body.admin-bar .sp-progress {
		top: 46px;
	}
}

/* Sous 760 px et avec JavaScript : le menu passe dans le panneau burger. */
@media (max-width: 759px) {
	.sp-js .sp-nav {
		display: none;
	}

	.sp-js .sp-burger {
		display: flex;
	}

	.sp-js .sp-nav-mobile {
		display: block;
	}
}

/* -------------------------------------------------------------------------
   06. Section 1 — Hero
   ---------------------------------------------------------------------- */

.sp-hero {
	position: relative;
	/* Le cercle décoratif sort volontairement du cadre : la section le rogne,
	   comme les autres sections le font pour leurs propres décors. Sans cela,
	   il élargit la page et provoque un défilement horizontal. */
	overflow: hidden;
	display: flex;
	flex-direction: column;
	gap: clamp(28px, 3.5vw, 52px);
	padding: clamp(20px, 3vw, 48px) var(--sp-marge-x) clamp(48px, 7vw, 96px);
	/* Filet corail qui annonce le bandeau défilant */
	border-bottom: 2px solid var(--sp-corail);
}

/* Cercle découpé, en arrière-plan */
.sp-hero__cercle {
	position: absolute;
	top: clamp(-40px, -3vw, 0px);
	right: clamp(-70px, -4vw, -20px);
	width: clamp(180px, 26vw, 400px);
	height: clamp(180px, 26vw, 400px);
	border: clamp(14px, 2vw, 30px) solid var(--sp-encre-clair);
	border-radius: 50%;
	pointer-events: none;
}

.sp-stamp--hero {
	display: none;
	right: clamp(24px, 9vw, 150px);
	top: clamp(90px, 20vw, 210px);
	color: var(--sp-vert);
}

.sp-stamp--hero svg {
	width: clamp(96px, 13vw, 190px);
	height: clamp(96px, 13vw, 190px);
}

@media (min-width: 760px) {
	.sp-stamp--hero {
		display: block;
	}
}

.sp-hero > .sp-surtitre,
.sp-hero__titre,
.sp-hero__bas {
	position: relative;
	z-index: 2;
}

.sp-hero__titre {
	font-family: var(--sp-titre);
	font-weight: 800;
	font-size: clamp(40px, 8.6vw, 132px);
	line-height: 0.84;
	letter-spacing: -0.045em;
	text-transform: uppercase;
	color: var(--sp-corail);
}

.sp-hero__titre span {
	display: block;
	white-space: nowrap;
}

.sp-hero__bas {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 32px;
}

.sp-hero__chapo {
	max-width: 32ch;
	font-size: clamp(17px, 1.5vw, 21px);
	line-height: 1.65;
}

/* -------------------------------------------------------------------------
   07. Section 2 — Bandeau défilant
   ---------------------------------------------------------------------- */

.sp-marquee {
	overflow: hidden;
	padding: 14px 0;
	background: var(--sp-corail);
	color: var(--sp-encre);
	border-top: 2px solid var(--sp-encre);
	border-bottom: 2px solid var(--sp-encre);
}

.sp-marquee__piste {
	display: flex;
	width: max-content;
	font-family: var(--sp-titre);
	font-weight: 800;
	font-size: clamp(22px, 2.6vw, 38px);
	letter-spacing: -0.02em;
	text-transform: uppercase;
	animation: sp-marquee 26s linear infinite;
}

.sp-marquee__groupe {
	display: flex;
	align-items: center;
}

.sp-marquee__mot {
	display: flex;
	align-items: center;
	gap: clamp(20px, 3vw, 44px);
	padding-right: clamp(20px, 3vw, 44px);
}

/* Carré séparateur */
.sp-marquee__mot i {
	width: 12px;
	height: 12px;
	background: var(--sp-encre);
}

/* -------------------------------------------------------------------------
   08. Section 3 — Notre façon de travailler
   ---------------------------------------------------------------------- */

.sp-approche {
	position: relative;
	overflow: hidden;
	padding: var(--sp-section-y) var(--sp-marge-x);
	border-top: 2px solid var(--sp-corail);
}

/* Mot fantôme détouré, en arrière-plan */
.sp-approche__mot {
	position: absolute;
	right: -2vw;
	top: 8%;
	font-family: var(--sp-titre);
	font-weight: 800;
	font-size: clamp(120px, 22vw, 340px);
	line-height: 0.8;
	letter-spacing: -0.005em;
	text-transform: uppercase;
	color: var(--sp-encre);
	-webkit-text-stroke: 2px var(--sp-encre-clair);
	paint-order: stroke fill;
	pointer-events: none;
	user-select: none;
}

.sp-approche > .sp-surtitre {
	position: relative;
	z-index: 2;
	margin-bottom: 28px;
}

.sp-approche__titre {
	position: relative;
	z-index: 2;
	max-width: 26ch;
	font-family: var(--sp-titre);
	font-weight: 800;
	font-size: clamp(34px, 6.4vw, 92px);
	line-height: 0.94;
	letter-spacing: -0.04em;
	text-transform: uppercase;
	color: var(--sp-blanc);
}

.sp-approche__colonnes {
	position: relative;
	z-index: 2;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: clamp(24px, 4vw, 56px);
	margin-top: clamp(40px, 5vw, 64px);
}

.sp-approche__colonnes p {
	font-size: clamp(17px, 1.5vw, 20px);
	line-height: 1.7;
}

/* -------------------------------------------------------------------------
   09. Section 4 — Les quatre pôles
   Alternance en damier : corail / encre, inversée sur deux colonnes pour
   que la lecture reste alternée quel que soit le nombre de colonnes.
   ---------------------------------------------------------------------- */

.sp-poles {
	display: grid;
	grid-template-columns: 1fr;
}

.sp-pole {
	/* Thème corail par défaut */
	--pole-fond: var(--sp-corail);
	--pole-texte: var(--sp-encre);
	--pole-label: var(--sp-encre);
	--pole-lien-fond: var(--sp-encre);
	--pole-lien-texte: var(--sp-blanc);
	--pole-bordure: transparent;

	display: grid;
	grid-template-rows: auto 1fr;
	gap: clamp(24px, 3vw, 40px);
	min-height: clamp(340px, 30vw, 460px);
	padding: clamp(32px, 3.6vw, 56px) clamp(20px, 2.4vw, 40px);
	background: var(--pole-fond);
	color: var(--pole-texte);
	border-top: 2px solid var(--pole-bordure);
	border-bottom: 2px solid var(--pole-bordure);
}

/* Thème encre */
.sp-pole:nth-child(even) {
	--pole-fond: var(--sp-encre);
	--pole-texte: var(--sp-blanc);
	--pole-label: var(--sp-vert);
	--pole-lien-fond: var(--sp-corail);
	--pole-lien-texte: var(--sp-encre);
	--pole-bordure: var(--sp-corail);
}

.sp-pole__label {
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.12em;
	color: var(--pole-label);
}

.sp-pole__corps {
	display: grid;
	grid-template-rows: auto 1fr auto;
}

.sp-pole__titre {
	margin-bottom: 18px;
	font-family: var(--sp-titre);
	font-weight: 800;
	font-size: clamp(34px, 3.3vw, 58px);
	line-height: 0.86;
	letter-spacing: -0.045em;
	text-transform: uppercase;
}

.sp-pole__texte {
	max-width: 30ch;
	margin-bottom: 20px;
	align-self: start;
	line-height: 1.7;
}

.sp-pole__lien {
	justify-self: start;
	padding: 10px 16px;
	font-size: 15px;
	font-weight: 600;
	background: var(--pole-lien-fond);
	color: var(--pole-lien-texte);
}

.sp-pole__lien:hover,
.sp-pole__lien:focus-visible {
	background: var(--sp-vert);
	color: var(--sp-encre);
}

/* Deux colonnes : on échange les blocs 03 et 04 pour garder le damier */
@media (min-width: 600px) {
	.sp-poles {
		grid-template-columns: repeat(2, 1fr);
	}

	.sp-pole:nth-child(3) {
		--pole-fond: var(--sp-encre);
		--pole-texte: var(--sp-blanc);
		--pole-label: var(--sp-vert);
		--pole-lien-fond: var(--sp-corail);
		--pole-lien-texte: var(--sp-encre);
		--pole-bordure: var(--sp-corail);
	}

	.sp-pole:nth-child(4) {
		--pole-fond: var(--sp-corail);
		--pole-texte: var(--sp-encre);
		--pole-label: var(--sp-encre);
		--pole-lien-fond: var(--sp-encre);
		--pole-lien-texte: var(--sp-blanc);
		--pole-bordure: transparent;
	}
}

/* Quatre colonnes : retour à l'alternance stricte */
@media (min-width: 1240px) {
	.sp-poles {
		grid-template-columns: repeat(4, 1fr);
	}

	.sp-pole:nth-child(3) {
		--pole-fond: var(--sp-corail);
		--pole-texte: var(--sp-encre);
		--pole-label: var(--sp-encre);
		--pole-lien-fond: var(--sp-encre);
		--pole-lien-texte: var(--sp-blanc);
		--pole-bordure: transparent;
	}

	.sp-pole:nth-child(4) {
		--pole-fond: var(--sp-encre);
		--pole-texte: var(--sp-blanc);
		--pole-label: var(--sp-vert);
		--pole-lien-fond: var(--sp-corail);
		--pole-lien-texte: var(--sp-encre);
		--pole-bordure: var(--sp-corail);
	}
}

/* -------------------------------------------------------------------------
   10. Section 5 — La méthode
   ---------------------------------------------------------------------- */

.sp-methode {
	position: relative;
	overflow: hidden;
	padding: var(--sp-section-y) var(--sp-marge-x);
}

.sp-methode__rayures {
	position: absolute;
	left: -6%;
	top: -10%;
	width: 46%;
	height: 120%;
	background: repeating-linear-gradient(90deg, var(--sp-encre-trait) 0 3px, transparent 3px 26px);
	pointer-events: none;
}

.sp-etapes {
	position: relative;
	z-index: 2;
	list-style: none;
	padding: 0;
	border-top: 1px solid var(--sp-corail);
}

.sp-etape {
	display: grid;
	grid-template-columns: minmax(48px, 12%) 1fr;
	gap: clamp(12px, 4vw, 56px);
	padding: clamp(22px, 3vw, 40px) clamp(12px, 2vw, 24px);
	border-bottom: 1px solid var(--sp-corail);
	transition: background var(--sp-transition), color var(--sp-transition);
}

.sp-etape:hover {
	background: var(--sp-corail);
	color: var(--sp-encre);
}

.sp-etape__numero {
	font-family: var(--sp-titre);
	font-weight: 800;
	font-size: clamp(28px, 3.4vw, 52px);
	letter-spacing: -0.04em;
	opacity: 0.55;
}

.sp-etape__titre {
	margin-bottom: 10px;
	font-family: var(--sp-titre);
	font-weight: 800;
	font-size: clamp(24px, 2.6vw, 38px);
	letter-spacing: -0.035em;
	text-transform: uppercase;
}

.sp-etape__texte {
	max-width: 58ch;
	line-height: 1.7;
}

/* -------------------------------------------------------------------------
   11. Section 6 — Déjà fait
   ---------------------------------------------------------------------- */

.sp-projets {
	position: relative;
	overflow: hidden;
	padding: var(--sp-section-y) var(--sp-marge-x);
	background: var(--sp-encre-clair);
}

.sp-projets__cercle {
	position: absolute;
	left: -10vw;
	bottom: -12vw;
	width: 44vw;
	height: 44vw;
	border: clamp(16px, 2.4vw, 40px) solid var(--sp-encre);
	border-radius: 50%;
	pointer-events: none;
}

.sp-grille-projets {
	position: relative;
	z-index: 2;
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(12px, 2vw, 28px);
}

.sp-projet {
	position: relative;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	min-height: 220px;
	padding: clamp(18px, 2vw, 32px);
	background: var(--sp-encre);
	border: 2px solid var(--sp-corail);
	color: var(--sp-blanc);
}

/* Couverture du projet, en fond de carte */
.sp-projet__visuel {
	position: absolute;
	inset: 0;
}

.sp-projet__visuel img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 420ms var(--sp-ease);
}

/* Voile de lisibilité : le texte reste lisible sur n'importe quelle photo */
.sp-projet__visuel::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(36, 27, 75, 0.94) 0%, rgba(36, 27, 75, 0.6) 50%, rgba(36, 27, 75, 0.25) 100%);
	transition: background var(--sp-transition);
}

.sp-projet:hover .sp-projet__visuel img,
.sp-projet:focus-visible .sp-projet__visuel img {
	transform: scale(1.04);
}

.sp-projet:hover .sp-projet__visuel::after,
.sp-projet:focus-visible .sp-projet__visuel::after {
	background: rgba(255, 78, 44, 0.92);
}

.sp-projet:hover,
.sp-projet:focus-visible {
	background: var(--sp-corail);
	color: var(--sp-encre);
}

.sp-projet__texte {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin-top: auto;
}

.sp-projet__poles {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--sp-vert);
}

/* Sur fond corail, le vert acide ne passe pas : on repasse en encre */
.sp-projet:hover .sp-projet__poles,
.sp-projet:focus-visible .sp-projet__poles {
	color: var(--sp-encre);
}

.sp-projet__titre {
	font-family: var(--sp-titre);
	font-weight: 800;
	font-size: clamp(20px, 2vw, 30px);
	line-height: 1;
	letter-spacing: -0.035em;
	text-transform: uppercase;
}

.sp-projet__sous {
	font-size: 15px;
}

/* Mosaïque : le motif se répète tous les quatre projets — une rangée 2/3 + 1/3,
   puis une rangée 1/3 + 2/3, comme sur la maquette. */
@media (min-width: 900px) {
	.sp-grille-projets {
		grid-template-columns: repeat(3, 1fr);
	}

	.sp-projet:nth-child(4n + 1),
	.sp-projet:nth-child(4n) {
		grid-column: span 2;
	}

	.sp-projet:nth-child(4n + 1) .sp-projet__titre,
	.sp-projet:nth-child(4n) .sp-projet__titre {
		font-size: clamp(22px, 2.6vw, 40px);
	}

	.sp-projet:nth-child(4n + 1) {
		aspect-ratio: 16 / 10;
	}

	.sp-projet:nth-child(4n + 2) {
		aspect-ratio: 3 / 4;
	}

	.sp-projet:nth-child(4n + 3) {
		aspect-ratio: 1 / 1;
	}

	.sp-projet:nth-child(4n) {
		aspect-ratio: 16 / 9;
	}

	/* Sans visuel de couverture, la carte n'a pas à réserver la place d'une
	   image : elle se règle sur son texte. */
	.sp-grille-projets .sp-projet--sans-visuel {
		aspect-ratio: auto;
		min-height: 260px;
	}
}

/* -------------------------------------------------------------------------
   12. Section 7 — Contact et formulaire
   ---------------------------------------------------------------------- */

.sp-contact {
	position: relative;
	overflow: hidden;
	padding: clamp(52px, 9vw, 130px) var(--sp-marge-x);
	background: var(--sp-corail);
	color: var(--sp-encre);
}

.sp-contact a {
	color: var(--sp-encre);
}

.sp-stamp--contact {
	display: none;
	right: clamp(16px, 4vw, 72px);
	bottom: clamp(24px, 4vw, 72px);
	color: var(--sp-encre);
}

.sp-stamp--contact svg {
	width: clamp(150px, 18vw, 280px);
	height: clamp(150px, 18vw, 280px);
	animation-direction: reverse;
}

/* La mention du tampon de contact est plus courte : on l'écrit plus gros
   pour qu'elle occupe la circonférence sans être trop étirée. */
.sp-stamp--contact text {
	font-size: 25px;
}

@media (min-width: 1080px) {
	.sp-stamp--contact {
		display: block;
	}
}

.sp-contact__titre {
	position: relative;
	z-index: 2;
	max-width: 20ch;
	font-family: var(--sp-titre);
	font-weight: 800;
	font-size: clamp(40px, 8vw, 120px);
	line-height: 0.86;
	letter-spacing: -0.045em;
	text-transform: uppercase;
}

.sp-contact__chapo {
	position: relative;
	z-index: 2;
	max-width: 46ch;
	margin: 24px 0 clamp(32px, 4vw, 48px);
	font-size: clamp(17px, 1.5vw, 21px);
	line-height: 1.7;
}

/* Message de confirmation / d'erreur après envoi */
.sp-message {
	position: relative;
	z-index: 2;
	max-width: 860px;
	margin-bottom: 24px;
	padding: 16px 20px;
	font-weight: 600;
	border: 2px solid var(--sp-encre);
}

.sp-message--ok {
	background: var(--sp-vert);
	color: var(--sp-encre);
}

.sp-message--erreur {
	background: var(--sp-encre);
	color: var(--sp-blanc);
}

.sp-formulaire {
	position: relative;
	z-index: 2;
	display: grid;
	gap: 16px;
	max-width: 860px;
}

.sp-formulaire__ligne {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
	gap: 16px;
}

.sp-champ {
	display: grid;
	gap: 8px;
	min-width: 0;
}

.sp-champ label {
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.sp-requis {
	color: var(--sp-encre);
}

.sp-champ input,
.sp-champ select,
.sp-champ textarea {
	min-width: 0;
	padding: 15px 18px;
	background: var(--sp-encre);
	color: var(--sp-blanc);
	border: 2px solid var(--sp-encre);
	border-radius: 0;
	font-family: var(--sp-texte);
	font-size: 17px;
}

.sp-champ textarea {
	line-height: 1.6;
	resize: vertical;
}

.sp-champ input::placeholder,
.sp-champ textarea::placeholder {
	color: rgba(255, 255, 255, 0.62);
}

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

.sp-champ__erreur {
	font-size: 14px;
	font-weight: 600;
	color: var(--sp-encre);
}

.sp-champ__erreur::before {
	content: '↑ ';
}

/* Piège à robots : retiré de l'affichage et du parcours clavier */
.sp-honeypot {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.sp-formulaire__envoi {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px;
}

.sp-bouton--envoi {
	background: var(--sp-vert);
	color: var(--sp-encre);
	border: 2px solid var(--sp-encre);
	font-size: clamp(18px, 2vw, 26px);
	padding: 16px 32px;
}

.sp-bouton--envoi:hover,
.sp-bouton--envoi:focus-visible {
	background: var(--sp-encre);
	color: var(--sp-vert);
}

.sp-formulaire__mention {
	max-width: 40ch;
	font-size: 14px;
	line-height: 1.6;
}

/* -------------------------------------------------------------------------
   13. Pied de page
   ---------------------------------------------------------------------- */

.sp-footer {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	padding: 28px var(--sp-marge-x);
	background: var(--sp-encre);
}

.sp-footer__logo:hover {
	background: none;
}

.sp-footer__logo img {
	display: block;
	height: 32px;
	width: auto;
}

.sp-footer__baseline {
	max-width: 58ch;
	font-size: 15px;
	color: var(--sp-blanc);
}

.sp-footer__legal {
	font-size: 14px;
	color: var(--sp-blanc);
	opacity: 0.75;
}

/* -------------------------------------------------------------------------
   14. Pages intérieures — éléments communs
   ---------------------------------------------------------------------- */

/* En-tête de page (Projets, L'équipe) */
.sp-page-entete {
	position: relative;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	gap: clamp(20px, 2.5vw, 32px);
	padding: clamp(32px, 5vw, 72px) var(--sp-marge-x) clamp(40px, 6vw, 88px);
}

.sp-page-entete__cercle {
	position: absolute;
	top: clamp(-60px, -4vw, -20px);
	right: clamp(-70px, -4vw, -20px);
	width: clamp(160px, 24vw, 360px);
	height: clamp(160px, 24vw, 360px);
	border: clamp(14px, 2vw, 30px) solid var(--sp-encre-clair);
	border-radius: 50%;
	pointer-events: none;
}

/* Le contenu passe devant le décor — sauf le cercle, qui reste positionné */
.sp-page-entete > *:not(.sp-page-entete__cercle) {
	position: relative;
	z-index: 2;
}

.sp-page-entete__titre {
	font-family: var(--sp-titre);
	font-weight: 800;
	font-size: clamp(38px, 7.4vw, 110px);
	line-height: 0.86;
	letter-spacing: -0.045em;
	text-transform: uppercase;
	color: var(--sp-corail);
}

.sp-page-entete__chapo {
	max-width: 52ch;
	font-size: clamp(17px, 1.5vw, 21px);
	line-height: 1.65;
}

/* Filet corail de séparation, comme sous le hero */
.sp-filet {
	height: 2px;
	background: var(--sp-corail);
}

/* État vide (aucun projet, aucun membre) */
.sp-vide {
	position: relative;
	z-index: 2;
	max-width: 46ch;
	font-family: var(--sp-titre);
	font-weight: 800;
	font-size: clamp(24px, 3vw, 40px);
	line-height: 1.05;
	letter-spacing: -0.035em;
	text-transform: uppercase;
	color: var(--sp-blanc);
}

/* Contenu rédigé dans l'éditeur */
.sp-contenu-riche > * {
	margin-bottom: 1.1em;
}

.sp-contenu-riche > *:last-child {
	margin-bottom: 0;
}

.sp-contenu-riche p,
.sp-contenu-riche li {
	font-size: clamp(17px, 1.4vw, 19px);
	line-height: 1.75;
}

.sp-contenu-riche h2,
.sp-contenu-riche h3 {
	font-family: var(--sp-titre);
	font-weight: 800;
	letter-spacing: -0.035em;
	text-transform: uppercase;
	line-height: 1;
	margin-top: 1.6em;
}

.sp-contenu-riche h2 {
	font-size: clamp(26px, 3vw, 44px);
	color: var(--sp-corail);
}

.sp-contenu-riche h3 {
	font-size: clamp(21px, 2.2vw, 30px);
}

.sp-contenu-riche ul,
.sp-contenu-riche ol {
	padding-left: 1.2em;
}

.sp-contenu-riche li {
	margin-bottom: 0.4em;
}

.sp-contenu-riche ul {
	list-style: square;
}

.sp-contenu-riche a {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.sp-contenu-riche img {
	height: auto;
}

.sp-contenu-riche blockquote {
	margin: 1.6em 0;
	padding: clamp(20px, 2.5vw, 32px);
	border-left: 4px solid var(--sp-corail);
	background: var(--sp-encre-clair);
	font-size: clamp(19px, 1.8vw, 24px);
	line-height: 1.5;
}

.sp-contenu-riche blockquote p:last-child {
	margin-bottom: 0;
}

/* Fil d'Ariane et étiquettes */
.sp-fil-ariane {
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.sp-fil-ariane a::before {
	content: '← ';
}

.sp-etiquettes {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.sp-etiquette {
	padding: 6px 12px;
	background: var(--sp-corail);
	color: var(--sp-encre);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

/* Bandeau d'appel au contact, en bas de page intérieure */
.sp-appel {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: clamp(16px, 2vw, 24px);
	padding: clamp(48px, 7vw, 96px) var(--sp-marge-x);
	background: var(--sp-corail);
	color: var(--sp-encre);
	border-top: 2px solid var(--sp-encre);
}

.sp-appel__titre {
	max-width: 18ch;
	font-family: var(--sp-titre);
	font-weight: 800;
	font-size: clamp(32px, 5.4vw, 76px);
	line-height: 0.88;
	letter-spacing: -0.045em;
	text-transform: uppercase;
}

.sp-appel__texte {
	max-width: 46ch;
	font-size: clamp(16px, 1.4vw, 19px);
	line-height: 1.7;
}

.sp-appel .sp-bouton {
	background: var(--sp-encre);
	color: var(--sp-blanc);
}

.sp-appel .sp-bouton:hover,
.sp-appel .sp-bouton:focus-visible {
	background: var(--sp-vert);
	color: var(--sp-encre);
}

/* -------------------------------------------------------------------------
   15. Page « Projets » et fiche projet
   ---------------------------------------------------------------------- */

.sp-projets--archive {
	background: var(--sp-encre);
}

.sp-projet-fiche {
	display: block;
}

.sp-projet-fiche__entete {
	position: relative;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: clamp(16px, 2vw, 26px);
	padding: clamp(28px, 4vw, 56px) var(--sp-marge-x) clamp(36px, 5vw, 72px);
}

.sp-projet-fiche__entete > *:not(.sp-page-entete__cercle) {
	position: relative;
	z-index: 2;
}

.sp-projet-fiche__titre {
	max-width: 18ch;
	font-family: var(--sp-titre);
	font-weight: 800;
	font-size: clamp(36px, 7vw, 104px);
	line-height: 0.86;
	letter-spacing: -0.045em;
	text-transform: uppercase;
	color: var(--sp-corail);
}

.sp-projet-fiche__accroche {
	max-width: 46ch;
	font-size: clamp(18px, 1.7vw, 24px);
	line-height: 1.55;
}

/* Fiche d'identité : client, secteur, année */
.sp-identite {
	display: flex;
	flex-wrap: wrap;
	gap: clamp(20px, 4vw, 64px);
	margin: 0;
	padding-top: clamp(12px, 2vw, 20px);
	border-top: 2px solid var(--sp-corail);
	width: 100%;
}

.sp-identite__ligne dt {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--sp-vert);
	margin-bottom: 4px;
}

.sp-identite__ligne dd {
	margin: 0;
	font-family: var(--sp-titre);
	font-weight: 800;
	font-size: clamp(18px, 1.8vw, 26px);
	letter-spacing: -0.025em;
}

.sp-projet-fiche__visuel {
	margin: 0;
	background: var(--sp-encre-clair);
	border-top: 2px solid var(--sp-corail);
	border-bottom: 2px solid var(--sp-corail);
}

.sp-projet-fiche__visuel img {
	display: block;
	width: 100%;
	height: auto;
}

.sp-projet-fiche__contenu {
	max-width: 68ch;
	padding: clamp(40px, 6vw, 88px) var(--sp-marge-x);
}

/* Navigation entre projets */
.sp-nav-projets {
	display: grid;
	gap: 2px;
	background: var(--sp-corail);
	border-top: 2px solid var(--sp-corail);
	border-bottom: 2px solid var(--sp-corail);
}

.sp-nav-projets__lien {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: clamp(24px, 3vw, 40px) var(--sp-marge-x);
	background: var(--sp-encre);
	color: var(--sp-blanc);
}

.sp-nav-projets__lien--suivant {
	text-align: right;
	align-items: flex-end;
}

.sp-nav-projets__lien:hover,
.sp-nav-projets__lien:focus-visible {
	background: var(--sp-corail);
	color: var(--sp-encre);
}

.sp-nav-projets__sens {
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--sp-vert);
}

.sp-nav-projets__lien:hover .sp-nav-projets__sens,
.sp-nav-projets__lien:focus-visible .sp-nav-projets__sens {
	color: var(--sp-encre);
}

.sp-nav-projets__titre {
	font-family: var(--sp-titre);
	font-weight: 800;
	font-size: clamp(20px, 2.4vw, 34px);
	line-height: 1;
	letter-spacing: -0.035em;
	text-transform: uppercase;
}

@media (min-width: 760px) {
	.sp-nav-projets {
		grid-template-columns: 1fr 1fr;
	}

	/* Un seul voisin : il occupe toute la largeur */
	.sp-nav-projets__lien:only-child {
		grid-column: 1 / -1;
	}
}

/* -------------------------------------------------------------------------
   16. Page « Services » et fiche service
   ---------------------------------------------------------------------- */

/* Sommaire : un raccourci par pôle. Fond encre pour rester distinct du
   premier groupe de services, qui est en aplat clair. */
.sp-sommaire {
	padding: clamp(20px, 2.5vw, 32px) var(--sp-marge-x);
	background: var(--sp-encre);
	border-bottom: 2px solid var(--sp-corail);
}

.sp-sommaire ul {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.sp-sommaire a {
	display: inline-flex;
	align-items: baseline;
	gap: 8px;
	padding: 10px 16px;
	border: 2px solid var(--sp-corail);
	color: var(--sp-blanc);
	font-weight: 600;
	font-size: 15px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.sp-sommaire a:hover,
.sp-sommaire a:focus-visible {
	background: var(--sp-vert);
	color: var(--sp-encre);
}

.sp-sommaire__numero {
	font-family: var(--sp-titre);
	font-weight: 800;
	color: var(--sp-corail);
}

.sp-sommaire a:hover .sp-sommaire__numero,
.sp-sommaire a:focus-visible .sp-sommaire__numero {
	color: var(--sp-encre);
}

/* Un groupe de services par pôle, en alternance de fonds.
   Le fond des cartes passe par une variable : sans elle, la règle du groupe
   serait plus spécifique que celle du survol, qui ne changerait alors que la
   couleur du texte — encre sombre sur aplat violet, illisible. */
.sp-groupe-services {
	--fond-carte: var(--sp-encre);

	padding: clamp(48px, 7vw, 96px) var(--sp-marge-x);
	scroll-margin-top: 90px;
}

.sp-groupe-services:nth-of-type(even) {
	--fond-carte: var(--sp-encre-clair);

	background: var(--sp-encre-clair);
}

.sp-groupe-services__entete {
	display: flex;
	align-items: baseline;
	gap: clamp(12px, 2vw, 24px);
	margin-bottom: clamp(28px, 4vw, 48px);
	padding-bottom: clamp(16px, 2vw, 24px);
	border-bottom: 2px solid var(--sp-corail);
}

/* « Développement » et « Communication » sont longs : le plancher du titre de
   section (38 px) les fait déborder sous 360 px. On descend un peu ici. */
.sp-groupe-services .sp-titre-section {
	font-size: clamp(30px, 5.6vw, 72px);
}

.sp-groupe-services__numero {
	font-family: var(--sp-titre);
	font-weight: 800;
	font-size: clamp(20px, 2.4vw, 34px);
	letter-spacing: -0.04em;
	color: var(--sp-corail);
}

.sp-liste-services {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
	gap: 2px;
	list-style: none;
	margin: 0;
	padding: 0;
	background: var(--sp-corail);
	border: 2px solid var(--sp-corail);
}

.sp-service {
	display: flex;
}

.sp-service__lien {
	display: flex;
	flex-direction: column;
	gap: 12px;
	width: 100%;
	padding: clamp(24px, 3vw, 40px);
	background: var(--fond-carte, var(--sp-encre));
	color: var(--sp-blanc);
}

.sp-service__lien:hover,
.sp-service__lien:focus-visible {
	background: var(--sp-corail);
	color: var(--sp-encre);
}

.sp-service__titre {
	font-family: var(--sp-titre);
	font-weight: 800;
	font-size: clamp(22px, 2.2vw, 32px);
	line-height: 1;
	letter-spacing: -0.035em;
	text-transform: uppercase;
}

.sp-service__texte {
	font-size: 16px;
	line-height: 1.65;
}

.sp-service__action {
	margin-top: auto;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--sp-vert);
}

.sp-service__action::after {
	content: ' →';
}

.sp-service__lien:hover .sp-service__action,
.sp-service__lien:focus-visible .sp-service__action {
	color: var(--sp-encre);
}

/* Autres services, en bas d'une fiche */
.sp-services-voisins {
	padding: clamp(48px, 6vw, 88px) var(--sp-marge-x);
	border-top: 2px solid var(--sp-corail);
}

.sp-services-voisins .sp-titre-section {
	margin-bottom: clamp(24px, 3vw, 40px);
}

/* -------------------------------------------------------------------------
   17. Blog : liste, article, archives
   ---------------------------------------------------------------------- */

.sp-blog {
	padding: clamp(48px, 7vw, 104px) var(--sp-marge-x);
}

.sp-fil-ariane--archive {
	margin-bottom: clamp(24px, 3vw, 40px);
}

.sp-grille-articles {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
	gap: clamp(24px, 3vw, 40px);
}

.sp-article-carte__lien {
	display: flex;
	flex-direction: column;
	height: 100%;
	color: var(--sp-blanc);
	border: 2px solid var(--sp-corail);
}

.sp-article-carte__lien:hover,
.sp-article-carte__lien:focus-visible {
	background: var(--sp-corail);
	color: var(--sp-encre);
}

.sp-article-carte__corps {
	display: flex;
	flex-direction: column;
	gap: 10px;
	flex: 1;
	padding: clamp(20px, 2.4vw, 32px);
}

.sp-article-carte__categories {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--sp-vert);
}

.sp-article-carte__lien:hover .sp-article-carte__categories,
.sp-article-carte__lien:focus-visible .sp-article-carte__categories {
	color: var(--sp-encre);
}

.sp-article-carte__titre {
	font-family: var(--sp-titre);
	font-weight: 800;
	font-size: clamp(22px, 2.2vw, 30px);
	line-height: 1;
	letter-spacing: -0.035em;
	text-transform: uppercase;
}

.sp-article-carte__extrait {
	font-size: 16px;
	line-height: 1.6;
}

/* Date et temps de lecture */
.sp-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin-top: auto;
	padding-top: 4px;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.04em;
	opacity: 0.85;
}

/* Article seul */
.sp-article-single__entete {
	position: relative;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: clamp(14px, 1.8vw, 22px);
	padding: clamp(28px, 4vw, 56px) var(--sp-marge-x) clamp(32px, 4vw, 64px);
}

.sp-article-single__entete > *:not(.sp-page-entete__cercle) {
	position: relative;
	z-index: 2;
}

.sp-article-single__titre {
	max-width: 22ch;
	font-family: var(--sp-titre);
	font-weight: 800;
	font-size: clamp(32px, 5.6vw, 82px);
	line-height: 0.9;
	letter-spacing: -0.04em;
	text-transform: uppercase;
	color: var(--sp-corail);
}

/* Étiquettes cliquables (catégories) */
a.sp-etiquette:hover,
a.sp-etiquette:focus-visible {
	background: var(--sp-vert);
	color: var(--sp-encre);
}

.sp-article-single__contenu {
	max-width: 68ch;
	padding: clamp(40px, 6vw, 88px) var(--sp-marge-x);
}

.sp-projet-fiche__visuel figcaption {
	padding: 12px var(--sp-marge-x);
	font-size: 14px;
	background: var(--sp-encre);
	color: var(--sp-blanc);
	opacity: 0.8;
}

.sp-articles-lies {
	padding: clamp(48px, 6vw, 88px) var(--sp-marge-x);
	background: var(--sp-encre-clair);
	border-top: 2px solid var(--sp-corail);
}

.sp-articles-lies .sp-titre-section {
	margin-bottom: clamp(24px, 3vw, 40px);
}

/* -------------------------------------------------------------------------
   18. Page « L'équipe »
   ---------------------------------------------------------------------- */

.sp-equipe {
	padding: clamp(48px, 7vw, 104px) var(--sp-marge-x);
	background: var(--sp-encre-clair);
}

/* Une colonne sur mobile, deux à partir de 760 px, sur toute la largeur. */
.sp-equipe__liste {
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(28px, 4vw, 56px);
	list-style: none;
	margin: 0;
	padding: 0;
}

@media (min-width: 760px) {
	.sp-equipe__liste {
		grid-template-columns: repeat(2, 1fr);
	}
}

.sp-membre {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

/* La colonne fait la moitié de la page, mais le portrait garde une taille
   raisonnable : seul le texte s'étire sur toute la largeur. */
.sp-membre__photo {
	position: relative;
	width: 100%;
	max-width: 340px;
	aspect-ratio: 4 / 5;
	overflow: hidden;
	background: var(--sp-corail);
	border: 2px solid var(--sp-encre);
}

.sp-membre__photo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Portrait manquant : initiales sur aplat corail */
.sp-membre__initiales {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--sp-titre);
	font-weight: 800;
	font-size: clamp(56px, 8vw, 104px);
	letter-spacing: -0.05em;
	color: var(--sp-encre);
}

.sp-membre__nom {
	font-family: var(--sp-titre);
	font-weight: 800;
	font-size: clamp(26px, 2.6vw, 38px);
	line-height: 0.95;
	letter-spacing: -0.04em;
	text-transform: uppercase;
	color: var(--sp-blanc);
}

.sp-membre__texte p {
	font-size: 16px;
	line-height: 1.7;
}

/* -------------------------------------------------------------------------
   19. Gabarit générique (index.php)
   ---------------------------------------------------------------------- */

.sp-page {
	display: grid;
	gap: clamp(32px, 5vw, 56px);
	max-width: 76ch;
	padding: var(--sp-section-y) var(--sp-marge-x);
}

.sp-article__titre {
	margin-bottom: 16px;
	font-family: var(--sp-titre);
	font-weight: 800;
	font-size: clamp(28px, 4vw, 52px);
	line-height: 0.95;
	letter-spacing: -0.04em;
	color: var(--sp-corail);
}

.sp-article__contenu p {
	margin-bottom: 1em;
	line-height: 1.7;
}

/* Pagination (liste des projets, archives) */
.sp-pagination {
	position: relative;
	z-index: 2;
	margin-top: clamp(32px, 4vw, 56px);
	font-weight: 600;
}

.sp-pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.sp-pagination .page-numbers {
	display: inline-block;
	padding: 10px 16px;
	border: 2px solid var(--sp-corail);
	color: var(--sp-blanc);
}

.sp-pagination .page-numbers:hover,
.sp-pagination .page-numbers:focus-visible {
	background: var(--sp-vert);
	color: var(--sp-encre);
}

.sp-pagination .page-numbers.current {
	background: var(--sp-corail);
	color: var(--sp-encre);
}

/* -------------------------------------------------------------------------
   20. Animations et mouvement réduit
   ---------------------------------------------------------------------- */

@keyframes sp-panel-out {
	from {
		transform: translateY(0);
	}

	to {
		transform: translateY(-101%);
	}
}

@keyframes sp-mark-in {
	from {
		transform: translateY(-110%);
	}

	to {
		transform: translateY(0);
	}
}

@keyframes sp-logo-remplacement {
	0% {
		transform: translateY(0);
	}

	42% {
		transform: translateY(-110%);
	}

	42.01% {
		transform: translateY(110%);
	}

	100% {
		transform: translateY(0);
	}
}

@keyframes sp-marquee {
	from {
		transform: translateX(0);
	}

	to {
		transform: translateX(-50%);
	}
}

@keyframes sp-blink {
	0%,
	55% {
		opacity: 1;
	}

	56%,
	100% {
		opacity: 0;
	}
}

@keyframes sp-spin {
	from {
		transform: rotate(0deg);
	}

	to {
		transform: rotate(360deg);
	}
}

/* Mouvement réduit : on coupe les boucles et les décalages, on garde
   les contenus visibles (l'intro est simplement supprimée). */
@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	.sp-intro-on .sp-intro,
	.sp-intro {
		display: none !important;
	}

	.sp-marquee__piste,
	.sp-point,
	.sp-stamp svg,
	.sp-header__logo:hover img {
		animation: none !important;
	}

	.sp-js [data-reveal] {
		clip-path: none !important;
		transition: none !important;
	}

	.sp-header {
		transition: none;
	}
}