/* ==========================================================================
   Tiphaine Design — le CSS que theme.json ne peut pas écrire
   --------------------------------------------------------------------------
   Ce fichier ne contient QUE ce qui échappe à theme.json : le tracé animé
   des pictogrammes, les survols composés, le défilement du bandeau, et la
   neutralisation des animations sous « mouvement réduit ».

   Ne sont volontairement PAS ici, parce que theme.json s'en charge déjà :
   les couleurs, les polices, les corps, les interlignes, les espacements,
   la gouttière, les boutons (fond, texte, rayon, marges internes, survol,
   focus), les liens, les légendes, et les styles de blocs (paragraphe,
   séparateur, image, citation, détails, titre d'article, titre du site).

   Aucune couleur, taille ni espacement en dur : uniquement les variables
   engendrées par theme.json. Seules exceptions assumées et commentées :
   les durées de transition, les courbes de temps propres à un effet, et
   la géométrie des ombres portées — aucune n'est un jeton de la charte.
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. Focus clavier
   theme.json ne colore que le :focus des boutons ; il ne dessine aucun
   indicateur. On en pose un, unique et lisible sur tous les fonds.
   -------------------------------------------------------------------------- */
:where( a, button, summary, input, select, textarea, [tabindex] ):focus-visible {
	outline: 2px solid var(--wp--preset--color--orange);
	outline-offset: 3px;
}


/* --------------------------------------------------------------------------
   2. Pictogrammes au tracé animé — classe .picto-trace
   Le JavaScript mesure chaque forme et pose stroke-dasharray/dashoffset en
   style inline. Le CSS ne fournit que la courbe de temps. Sans JavaScript,
   rien n'est masqué : le pictogramme s'affiche entier. C'est le repli voulu.
   -------------------------------------------------------------------------- */
.picto-trace :is( path, line, polyline, polygon, circle, ellipse, rect ) {
	/* courbe propre au tracé : départ retenu, arrivée franche */
	transition: stroke-dashoffset 1.1s cubic-bezier( 0.45, 0.05, 0.4, 1 );
}


/* --------------------------------------------------------------------------
   2 bis. L'écart de blocs là où il ne doit pas s'appliquer
   theme.json fixe blockGap à 32 px, ce qui est juste À L'INTÉRIEUR des
   groupes. Entre deux sections pleine largeur, en revanche, ces 32 px
   ouvrent une bande de fond de page entre deux aplats — les sections
   portent déjà leur respiration en padding. Et sur un élément en position
   absolue, la marge décale la boîte tout en la rétrécissant d'autant.
   -------------------------------------------------------------------------- */

/* Les sections pleine largeur se touchent, comme dans la maquette.
   Deux cas à couvrir : les sections posées directement dans un modèle,
   et celles qui viennent du contenu de la page — elles sont alors sous
   .entry-content, que le premier sélecteur n'atteint pas. */
main > .alignfull,
.entry-content > .alignfull,
.wp-block-post-content > .alignfull {
	margin-block: 0;
}

/* Respiration en bas du contenu. Elle vit ici et non dans le modèle : un
   style en ligne l'emporterait sur la règle conditionnelle qui suit. */
.td-page-corps,
.td-page-large-corps {
	padding-bottom: var( --wp--preset--spacing--60 );
}

/* Sauf quand le contenu se termine par une section pleine largeur — un appel
   à l'action, typiquement : cette respiration laisserait alors une bande de
   fond de page entre l'aplat et le pied.
   :has() est nécessaire ici, la règle dépendant de ce que contient la page
   et non du modèle. */
.td-page-corps:has( > .entry-content > .alignfull:last-child ),
.td-page-large-corps:has( > .entry-content > .alignfull:last-child ),
.td-page-corps:has( > .wp-block-post-content > .alignfull:last-child ),
.td-page-large-corps:has( > .wp-block-post-content > .alignfull:last-child ) {
	padding-bottom: 0;
}

/* Le pied de page suit la dernière section sans intervalle. */
.wp-site-blocks > footer,
body > footer {
	margin-block-start: 0;
}

/* Un voile en position absolue ne prend pas l'écart de blocs : il était
   poussé de 32 px vers le bas et ne couvrait plus le haut de l'image. */
.vignette-voile {
	margin: 0;
}


/* --------------------------------------------------------------------------
   3. Vignettes de portfolio — classe .vignette sur le conteneur
   L'image se rapproche, un voile d'encre monte, son contenu se recale.
   :focus-within ouvre le même voile au clavier.
   -------------------------------------------------------------------------- */
.vignette {
	position: relative;
	overflow: hidden;
	/* même rayon que le bloc Image de theme.json, sinon le zoom déborde
	   en angles vifs par-dessus les coins arrondis */
	border-radius: var(--wp--custom--rayon);
}

.vignette img {
	transition: transform 0.8s var(--wp--custom--ease);
}

.vignette:hover img,
.vignette:focus-within img {
	transform: scale( 1.05 );
}

.vignette-voile {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: flex-end;
	/* Le voile recouvre toute la vignette : sans ceci il intercepte les
	   clics destinés au lien de l'image, et la carte entière devient
	   inutilisable — y compris quand le voile est invisible.
	   Il ne contient aucun lien : son contenu est purement décoratif. */
	pointer-events: none;
	/* transparence d'encre : hors palette, donc impossible à poser dans
	   l'éditeur — contrairement aux marges internes, laissées au bloc */
	background: var(--wp--custom--encre-70);
	opacity: 0;
	transition: opacity 0.45s var(--wp--custom--ease);
}

/* Lisibilité par défaut sur le voile sombre, à spécificité nulle : le
   moindre réglage de couleur posé dans l'éditeur reprend la main. */
:where( .vignette-voile ) {
	color: var(--wp--preset--color--papier);
}

.vignette:hover .vignette-voile,
.vignette:focus-within .vignette-voile {
	opacity: 1;
}

.vignette-voile > * {
	transform: translateY( var(--wp--preset--spacing--10) );
	transition: transform 0.5s var(--wp--custom--ease) 0.06s;
}

.vignette:hover .vignette-voile > *,
.vignette:focus-within .vignette-voile > * {
	transform: none;
}


/* --------------------------------------------------------------------------
   4. Cartes qui se soulèvent — classe .carte-relief
   Les offsets d'ombre sont une géométrie d'effet, pas un espacement de mise
   en page ; sa couleur, elle, vient bien du contrat de jetons.
   -------------------------------------------------------------------------- */
.carte-relief {
	transition:
		transform 0.5s var(--wp--custom--ease),
		box-shadow 0.5s var(--wp--custom--ease);
}

.carte-relief:hover,
.carte-relief:focus-within {
	transform: translateY( -7px );
	box-shadow: 0 26px 48px -30px var(--wp--custom--encre-45);
}


/* --------------------------------------------------------------------------
   5. Bandeau clients défilant — CSS pur, aucun JavaScript
   La piste contient DEUX fois la même série de noms : la translation de
   -50 % ramène donc exactement au point de départ, sans saut visible.
   Le pas de fuite (padding-right) doit rester égal à l'espace entre noms,
   sinon la boucle se décale d'un cran à chaque tour.
   Le fond orange et le texte orange clair viennent de la palette : ils se
   posent dans l'éditeur, pas ici.
   -------------------------------------------------------------------------- */
.bandeau {
	/* Seul rempart contre le débordement horizontal de la piste.
	   Surtout PAS de max-width ici : alignfull déborde du padding parent
	   par des marges négatives, qu'un max-width:100% annulerait — la bande
	   s'arrêterait alors deux gouttières avant le bord. */
	overflow: hidden;
}

/* Les noms sont des paragraphes : leurs marges verticales gonflaient la
   piste de 38 px et déséquilibraient la bande. */
.bandeau-piste > * {
	margin-block: 0;
}

.bandeau-piste {
	align-items: center;
	display: flex;
	flex-wrap: nowrap;
	width: max-content;
	gap: var(--wp--preset--spacing--40);
	padding-right: var(--wp--preset--spacing--40);
	animation: bandeau-defile 38s linear infinite;
}

.bandeau:hover .bandeau-piste,
.bandeau:focus-within .bandeau-piste {
	animation-play-state: paused;
}

@keyframes bandeau-defile {
	to { transform: translateX( -50% ); }
}


/* --------------------------------------------------------------------------
   6. Listes en filets — classe .filet-liste sur le conteneur
   Chaque ligne se décale vers la droite et son filet passe de la
   transparence orange à l'orange plein.
   -------------------------------------------------------------------------- */
.filet-liste > * {
	border-bottom: 1px solid var(--wp--custom--orange-30);
	transition:
		padding-left 0.35s var(--wp--custom--ease),
		color 0.3s,
		border-color 0.3s;
}

.filet-liste > *:hover,
.filet-liste > *:focus-within {
	padding-left: var(--wp--preset--spacing--20);
	color: var(--wp--preset--color--orange);
	border-bottom-color: var(--wp--preset--color--orange);
}


/* --------------------------------------------------------------------------
   7. Graphique animé de l'accueil
   assets/graphique-home/graphique-home-anime.html est autonome : il porte
   ses propres styles et son script anime ses éléments par ATTRIBUT opacity.

   ⚠ AUCUNE règle d'opacité ne doit viser .td-* : une déclaration CSS
   l'emporterait sur l'attribut, et les figures apparaîtraient déjà
   construites dès la première image au lieu de se construire. Le fichier
   le rappelle en commentaire. Rien ici ne les touche.

   Seul apport : la bascule vers la planche statique en mouvement réduit.
   Le pattern place le bloc HTML dans .hero-graphique-anime et l'image
   graphique-home-statique.svg dans .hero-graphique-statique.
   -------------------------------------------------------------------------- */
.hero-graphique-statique {
	display: none;
}


/* --------------------------------------------------------------------------
   8. Raccord des patterns
   Écrit après coup, à la jonction des patterns et de la feuille de style.
   Uniquement ce que theme.json ne sait pas exprimer : filets, grilles à
   écart d'un pixel, pseudo-éléments. Couleurs, corps et espacements
   restent des presets.
   -------------------------------------------------------------------------- */

/* L'italique orange des titres. Sans classe, volontairement : l'<em> d'un
   titre est du texte enrichi, une classe posée dessus sauterait à la
   première correction dans l'éditeur. */
h1 em,
h2 em,
h3 em {
	color: var( --wp--preset--color--orange );
	font-style: italic;
	font-weight: 400;
}

/* La précision de titre : un complément thématique, dans le titre mais
   composé à part — à la ligne, en petit, en sans empattement, atténué.
   La classe n'est pas à poser à la main : c'est le format « Précision »
   des blocs Titre (inc/titre-precision.php) qui l'écrit et la reconnaît.
   Le corps se tient à mi-chemin des crans md et lg, fluide comme eux.
   Graisse, style et approche sont redonnés : sans cela le complément
   hériterait du 300, de l'interlettrage serré et de l'interligne du titre,
   voire de l'italique orange s'il est posé dans l'<em>. */
.titre-precision {
	color: var( --wp--custom--encre-62 );
	display: block;
	font-family: var( --wp--preset--font-family--sans );
	font-size: calc( ( var( --wp--preset--font-size--md ) + var( --wp--preset--font-size--lg ) ) / 2 );
	font-style: normal;
	font-weight: 400;
	letter-spacing: 0;
	line-height: 1.35;
	margin-top: var( --wp--preset--spacing--10 );
}

/* Sur un titre qui porte sa propre couleur, donc posé sur un aplat, le
   complément suit cette couleur — comme l'accent, en S5 plus bas. */
:is( h1, h2, h3, h4, h5, h6 ).has-text-color .titre-precision {
	color: inherit;
}

/* Surtitre : le petit label en capitales précédé d'un filet. */
.surtitre {
	align-items: center;
	color: var( --wp--custom--encre-62 );
	display: flex;
	font-family: var( --wp--preset--font-family--sans );
	font-size: var( --wp--preset--font-size--xs );
	font-weight: 600;
	gap: 10px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
}

.surtitre::before {
	background: var( --wp--preset--color--orange );
	content: "";
	flex: 0 0 auto;
	height: 1px;
	width: 24px;
}

/* Tête de section : le bloc surtitre + titre + chapeau. */
.tete-section {
	margin-bottom: var( --wp--preset--spacing--40 );
}

/* Filet de séparation entre deux sections. */
.filet-haut {
	border-top: 1px solid var( --wp--custom--orange-30 );
}

/* Pictogrammes. Livrés en 64 x 64 : on redimensionne, et on compense
   l'épaisseur de trait pour qu'elle reste optiquement constante.
   Le pictogramme de titre est un signe éditorial, pas une icône
   d'interface : il tient le rang du titre qu'il accompagne. */
.pictogramme svg,
svg.pictogramme {
	color: var( --wp--preset--color--orange );
	flex: 0 0 auto;
	height: auto;
	stroke-width: 1.05;
	width: clamp( 56px, 6.2vw, 102px );
}

/* Le grand pictogramme d'en-tête de page, à l'échelle du H1. */
.pictogramme-grand svg,
svg.pictogramme-grand {
	color: var( --wp--preset--color--orange );
	height: auto;
	margin-left: auto;
	stroke-width: 0.9;
	width: clamp( 120px, 14vw, 232px );
}

/* Le bandeau de chiffres du hero, séparé par des filets verticaux. */
.bloc-chiffres {
	display: flex;
	flex-wrap: wrap;
	/* 36 px relevés sur la maquette de part et d'autre : sans eux, les
	   chiffres collent au filet qui les surmonte. */
	padding-bottom: clamp( 22px, 2.5vw, 36px );
	padding-top: clamp( 22px, 2.5vw, 36px );
}

.chiffre {
	flex: 1 1 0;
	min-width: 120px;
	padding-left: var( --wp--preset--spacing--20 );
}

.chiffre + .chiffre {
	border-left: 1px solid var( --wp--custom--orange-30 );
}

.chiffre:first-child {
	padding-left: 0;
}

/* Une fois empilés, les filets verticaux ne séparent plus rien : ils
   flottent à gauche de chaque bloc. Ils passent à l'horizontale.
   Seuil choisi sur la largeur réelle de bascule : quatre colonnes de
   120 px plus les gouttières ne tiennent plus en dessous de 700 px. */
@media ( max-width: 700px ) {
	.chiffre {
		padding-left: 0;
	}

	.chiffre + .chiffre {
		border-left: 0;
		border-top: 1px solid var( --wp--custom--orange-30 );
		margin-top: var( --wp--preset--spacing--20 );
		padding-top: var( --wp--preset--spacing--20 );
	}
}

/* Deux classes dans le sélecteur, et non une : sans cela la règle de ton
   de lecture p:not(.has-text-color) — plus loin, donc prioritaire à
   spécificité égale — repeindrait le chiffre en encre à 70 %. Le chiffre
   se compose en encre pleine. */
.bloc-chiffres .chiffre-valeur {
	color: var( --wp--preset--color--encre );
	font-family: var( --wp--preset--font-family--display );
	/* 77,76 px relevés sur la maquette à 1440 px : entre le cran 3xl (62)
	   et le cran 4xl (118), d'où une valeur explicite. */
	font-size: clamp( 38px, 5.4vw, 78px );
	font-weight: 300;
	letter-spacing: -0.045em;
	line-height: 0.85;
}

/* Le suffixe d'un chiffre (ans, p., h) passe en orange, sans italique :
   c'est une unité, pas une emphase — et elle se compose nettement plus
   petite que le nombre qu'elle qualifie. */
.chiffre-valeur em {
	color: var( --wp--preset--color--orange );
	font-size: 0.4em;
	font-style: normal;
}

.chiffre-libelle {
	color: var( --wp--custom--encre-62 );
	font-size: var( --wp--preset--font-size--xs );
	font-weight: 600;
	letter-spacing: 0.13em;
	margin-top: 16px;
	text-transform: uppercase;
}

/* Label agence partenaire : une pastille filetée, à la hauteur du bouton
   qu'elle côtoie (52 px = 14 px de marge interne + 24 px de ligne + 14 px). */
.partenaire,
.td-partenaire {
	align-items: center;
	border: 1px solid var( --wp--custom--orange-30 );
	border-radius: var( --wp--custom--rayon-pilule );
	display: inline-flex;
	gap: 12px;
	min-height: 52px;
	padding: 0 20px 0 12px;
	/* fit-content et non auto : le bloc Groupe reçoit de WordPress une mise
	   en page flex de niveau bloc, qui étirait la pastille sur toute la
	   colonne — son filet filait alors jusqu'au bord, comme signalé en
	   recette sur le hero et sur le pied de page. */
	width: fit-content;
}

/* Sur fond sombre, l'orange à 30 % disparaît : le filet passe au papier. */
.has-encre-background-color .partenaire,
.td-pied .td-partenaire {
	border-color: var( --wp--custom--papier-45 );
}

/* Les paragraphes de la pastille ne portent plus la respiration verticale
   d'un paragraphe courant : elle déséquilibrerait la hauteur fixe. */
.partenaire > p,
.td-partenaire p {
	margin-block: 0;
}

.partenaire-marque img,
.partenaire-marque svg,
.td-partenaire-marque img {
	display: block;
	height: auto;
	width: 28px;
}

/* Les huit étapes. L'écart d'un pixel sur fond clair dessine les filets
   entre cellules sans qu'aucune bordure soit déclarée. */
.grille-etapes {
	background: var( --wp--custom--orange-30 );
	gap: 1px;
}

.etape {
	background: var( --wp--preset--color--encre );
	height: 100%;
}

/* Le numéro d'étape : un repère typographique, calé en haut de case. */
.etape-numero {
	font-family: var( --wp--preset--font-family--display );
	font-size: 44px;
	font-weight: 300;
	letter-spacing: -0.03em;
	line-height: 0.9;
	margin-block: 0 var( --wp--preset--spacing--30 );
}

/* Titre d'étape en Archivo malgré son niveau h3 : c'est un intitulé
   court dans une grille, pas un titre de section. */
.etape-titre {
	font-family: var( --wp--preset--font-family--sans );
	font-size: var( --wp--preset--font-size--md );
	font-weight: 600;
	letter-spacing: 0;
}

/* Mosaïque des services : des tuiles distinctes, séparées par une
   gouttière franche — et non plus soudées par un écart d'un pixel. */
.mosaique {
	gap: 20px;
}

.tuile {
	border: 1px solid var( --wp--custom--orange-30 );
	border-radius: var( --wp--custom--rayon );
	height: 100%;
	/* Crée un contexte d'empilement propre : le filigrane peut alors passer
	   en z-index négatif — au-dessus du fond de la tuile, sous son texte —
	   ce qui évite de positionner les enfants et laisse le lien du titre
	   s'étirer sur toute la surface. */
	isolation: isolate;
	overflow: hidden;
	position: relative;
}

/* La maquette fait de la tuile entière un lien. Le balisage de blocs ne
   permet pas d'envelopper un groupe dans un <a>, alors on étire le lien du
   titre sur toute la surface : même cible de clic, un seul lien annoncé. */
.tuile :is( h2, h3, h4 ) a::after {
	content: "";
	inset: 0;
	position: absolute;
	/* Les frères du titre sont en position:relative pour passer au-dessus
	   du pictogramme en filigrane ; sans z-index, ils peindraient par-dessus
	   cette zone de clic et la tuile resterait inerte. */
	z-index: 2;
}

/* Le survol de n'importe quel point de la tuile éclaire le titre. */
.tuile:hover :is( h2, h3, h4 ) a {
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* Pictogramme en filigrane, en fond de tuile : une trame, pas une icône.
   Il déborde volontairement du cadre en haut et à droite. */
.tuile .pictogramme {
	opacity: 0.13;
	pointer-events: none;
	position: absolute;
	right: -6%;
	top: -8%;
	width: 58%;
	z-index: -1;
}

/* La couleur du filigrane suit celle de la tuile : forcé en orange, il
   disparaîtrait sur les tuiles orange et vibrerait sur les tuiles encre. */
.tuile .pictogramme svg,
.tuile svg.pictogramme {
	color: inherit;
	width: 100%;
}

.tuile svg.pictogramme {
	right: -6%;
	top: -8%;
	width: 58%;
}

/* La liste des livrables se déroule au survol de la tuile. La transition
   porte sur grid-template-rows : c'est ce qui permet d'animer vers une
   hauteur inconnue, qu'aucune valeur de max-height ne saurait deviner.
   Le repli s'applique au groupe qui enveloppe la liste, et non à la liste
   elle-même : un seul rang explicite ne replierait que le premier item, les
   suivants tombant dans des rangs implicites dimensionnés au contenu. */
.tuile-repli {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows 0.45s var( --wp--custom--ease );
}

.tuile-repli > * {
	min-height: 0;
	overflow: hidden;
}

.tuile-liste {
	list-style: none;
	margin-block: 0;
	padding-left: 0;
}

.tuile:hover .tuile-repli,
.tuile:focus-within .tuile-repli {
	grid-template-rows: 1fr;
}

/* Garde-fou tactile : sans souris, le survol n'existe pas et la liste
   resterait inaccessible. On la déroule alors d'emblée. */
@media ( hover: none ), ( pointer: coarse ) {
	.tuile-repli {
		grid-template-rows: 1fr;
	}
}

/* Second garde-fou, clavier celui-là : une tuile sans lien ne contient rien
   de focalisable, donc :focus-within ne s'y déclenchera jamais et la liste
   resterait invisible à qui navigue au clavier. Ces tuiles-là montrent leur
   liste en permanence. */
.tuile:not( :has( :is( h2, h3, h4 ) a ) ) .tuile-repli {
	grid-template-rows: 1fr;
}

.tuile-liste li {
	color: var( --wp--custom--encre-62 );
	font-size: var( --wp--preset--font-size--sm );
	padding: 3px 0;
}

/* Avis. */
.avis-entete {
	align-items: baseline;
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.avis-carte {
	border-top: 1px solid var( --wp--custom--orange-30 );
	height: 100%;
	padding-top: var( --wp--preset--spacing--20 );
}

/* Mur de clients : une seule masse typographique en Fraunces maigre, où
   les corps mélangés font tout le rythme. Plus de séparateur : c'est le
   contraste d'échelle qui sépare les noms. */
.mur-clients {
	align-items: baseline;
	display: flex;
	flex-wrap: wrap;
	gap: 0 28px;
}

.mur-clients > p {
	/* La couleur est posée plus bas, après la règle de ton de lecture :
	   à spécificité égale, c'est la dernière écrite qui l'emporte. */
	font-family: var( --wp--preset--font-family--display );
	font-weight: 300;
	letter-spacing: -0.03em;
	line-height: 1.05;
	margin-block: 0;
}

/* Les trois corps de la charte, rétablis : le préréglage de taille posé
   sur le paragraphe était neutralisé par l'héritage du corps courant. */
.mur-clients > p.has-3-xl-font-size { font-size: var( --wp--preset--font-size--3-xl ); }
.mur-clients > p.has-2-xl-font-size { font-size: var( --wp--preset--font-size--2-xl ); }
.mur-clients > p.has-xl-font-size   { font-size: var( --wp--preset--font-size--xl ); }
.mur-clients > p.has-md-font-size   { font-size: var( --wp--preset--font-size--md ); }

.mur-clients em {
	color: var( --wp--preset--color--orange );
}

.mur-note {
	color: var( --wp--custom--encre-62 );
	font-size: var( --wp--preset--font-size--sm );
}

/* Jalons de parcours. */
.jalons {
	border-top: 1px solid var( --wp--custom--orange-30 );
}

.jalon {
	padding-top: var( --wp--preset--spacing--20 );
}

/* Fiche technique d'un projet : un tableau sans bordures. */
.fiche-technique table,
table.fiche-technique {
	border-collapse: collapse;
	width: 100%;
}

.fiche-technique td,
.fiche-technique th {
	border: 0;
	border-bottom: 1px solid var( --wp--custom--orange-30 );
	padding: 12px 14px 12px 0;
	text-align: left;
	vertical-align: top;
}

.fiche-technique td:first-child,
.fiche-technique th:first-child {
	color: var( --wp--custom--encre-62 );
	font-size: var( --wp--preset--font-size--xs );
	font-weight: 600;
	letter-spacing: 0.13em;
	text-transform: uppercase;
	white-space: nowrap;
	width: 30%;
}

/* Formulaire de demande. Écrit dans le thème, sans extension : les champs
   ne portent donc aucune classe de bloc et se stylent ici, en entier. */
.td-demande {
	margin-top: var( --wp--preset--spacing--30 );
}

.td-demande > * + * {
	margin-top: var( --wp--preset--spacing--30 );
}

.champ-duo {
	display: grid;
	gap: var( --wp--preset--spacing--30 );
	grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
}

@media ( max-width: 640px ) {
	.champ-duo {
		grid-template-columns: minmax( 0, 1fr );
	}
}

.champ,
.champ-consentement,
.champ-envoi,
.champ-note {
	margin-block: 0;
}

.champ label,
.champ-verif > label {
	color: var( --wp--custom--encre-62 );
	display: block;
	font-size: var( --wp--preset--font-size--xs );
	font-weight: 600;
	letter-spacing: 0.13em;
	margin-bottom: 8px;
	text-transform: uppercase;
}

.champ-facultatif {
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
}

.td-demande :is( input[ type="text" ], input[ type="email" ], input[ type="tel" ], select, textarea ) {
	background: transparent;
	border: 1px solid var( --wp--custom--encre-15 );
	border-radius: var( --wp--custom--rayon );
	color: var( --wp--preset--color--encre );
	font-family: inherit;
	font-size: var( --wp--preset--font-size--md );
	padding: 12px 14px;
	width: 100%;
}

.td-demande :is( input, select, textarea ):focus {
	border-color: var( --wp--preset--color--orange );
	outline: 2px solid var( --wp--custom--orange-30 );
	outline-offset: 1px;
}

.td-demande textarea {
	line-height: 1.55;
	resize: vertical;
}

/* Le champ leurre. Il ne doit pas être display:none : certains robots
   ignorent justement les champs cachés de cette façon. On le sort du cadre. */
.td-leurre {
	height: 0;
	left: -9999px;
	overflow: hidden;
	position: absolute;
	width: 0;
}

.champ-verif-ligne {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: var( --wp--preset--spacing--20 );
}

.champ-verif-question {
	font-family: var( --wp--preset--font-family--display );
	font-size: var( --wp--preset--font-size--xl );
	font-weight: 300;
	letter-spacing: -0.02em;
	white-space: nowrap;
}

.champ-verif-ligne input {
	flex: 1 1 160px;
	width: auto;
}

.champ-consentement label {
	align-items: flex-start;
	color: var( --wp--custom--encre-70 );
	display: flex;
	font-size: var( --wp--preset--font-size--sm );
	gap: 12px;
	line-height: 1.5;
}

.champ-consentement input {
	accent-color: var( --wp--preset--color--orange );
	flex: 0 0 auto;
	height: 18px;
	margin-top: 2px;
	width: 18px;
}

/* Le bouton d'envoi est un <button> et non un lien : il ne reçoit donc pas
   les styles du bloc Bouton. La classe .wp-element-button, posée sur lui,
   lui fait hériter du même fond, du même rayon et des mêmes marges. */
.champ-envoi button {
	border: 0;
	cursor: pointer;
}

.champ-note {
	color: var( --wp--custom--encre-62 );
	font-size: var( --wp--preset--font-size--xs );
}

.champ-erreur {
	color: var( --wp--preset--color--orange-texte );
	display: block;
	font-size: var( --wp--preset--font-size--sm );
	margin-top: 6px;
}

.demande-avis {
	border-left: 3px solid var( --wp--preset--color--orange );
	font-size: var( --wp--preset--font-size--md );
	margin-top: var( --wp--preset--spacing--30 );
	padding: var( --wp--preset--spacing--20 ) var( --wp--preset--spacing--30 );
}

.demande-avis-succes {
	background: var( --wp--preset--color--orange-clair );
}

.demande-avis-erreur {
	background: var( --wp--custom--orange-18 );
}

/* Coordonnées, en liste filetée. */
.coordonnees > * + * {
	border-top: 1px solid var( --wp--custom--orange-30 );
	margin-top: var( --wp--preset--spacing--20 );
	padding-top: var( --wp--preset--spacing--20 );
}


/* Ton de lecture des paragraphes.
   Volontairement ici et non dans theme.json : une couleur posée sur
   core/paragraph l'emporte sur celle héritée du groupe parent, et rend
   illisible tout paragraphe placé sur un fond sombre ou coloré. */
p:not( .has-text-color ) {
	color: var( --wp--custom--encre-70 );
}

/* Dès qu'un bloc ancêtre impose sa couleur, le paragraphe la suit. */
.has-text-color p:not( .has-text-color ),
.wp-block-cover p:not( .has-text-color ) {
	color: inherit;
}

/* Même règle pour les tons de complément. Un surtitre, une liste de
   livrables ou un lien de titre gardent une couleur figée pensée pour le
   papier : posés sur une tuile orange ou encre, ils deviennent illisibles.
   Dès qu'un bloc impose sa couleur, ils la suivent. */
.has-text-color .surtitre,
.has-text-color .tuile-liste li,
.has-text-color .mur-note,
.has-text-color .chiffre-libelle,
.wp-block-cover .surtitre {
	color: inherit;
}

/* L'orange de texte (#B73E1E) est calculé pour les fonds CLAIRS. Sur
   l'encre il retombe à 3,31 alors que l'orange de marque y atteint 4,51 :
   sur fond sombre, les liens reprennent donc l'orange de marque. */
.has-encre-background-color a:not( .wp-element-button ),
.has-encre-background-color a:not( .wp-element-button ):hover,
.has-encre-background-color a:not( .wp-element-button ):focus {
	color: var( --wp--preset--color--orange );
}

/* Les liens de titre à l'intérieur d'une tuile : la couleur de lien globale
   est calculée pour le papier, elle ne tient pas sur un aplat coloré. */
.tuile :is( h2, h3, h4 ) a,
.has-text-color :is( h2, h3, h4 ) a {
	color: inherit;
}


/* Logo du site — SVG inline, couleurs pilotées d'ici.
   Inliné plutôt que servi en <img> pour deux raisons : les couleurs suivent
   le fond sur lequel il est posé, et le tracé reste net à toute taille.
   Depuis le 13/09/2026, assets/logo/logo-horizontal.svg reprend le tracé de
   « Logo définitif.svg » (Maquette claude/assets/logo). Le monogramme y est
   dessiné en surfaces pleines et non plus en traits. Le cadre, lui, reste
   celui de l'ancien fichier (464 × 120) et le dessin y est placé pour que
   le lettrage « tiphaine design » retombe à la même taille et au même
   endroit qu'avant, à ±0,3 px : arbitrage de Tiphaine, qui a écarté le
   cadrage serré du fichier source (lettrage 19 % plus grand). */
.tdl-lien {
	display: inline-flex;
	align-items: center;
	text-decoration: none;
}

.tdl {
	display: block;
	width: auto;
	/* La ligne de base « DESIGN ÉDITORIAL · PACKAGING · WEB » fait 12 unités
	   sur 120 : elle rend à un dixième de cette hauteur. En dessous de 60 px
	   de logo, elle cesse d'être lisible. */
	height: clamp( 52px, 6vw, 78px );
}

.tdl-mono {
	fill: var( --wp--preset--color--orange );
}

.tdl-accent {
	fill: var( --wp--preset--color--orange );
}

.tdl-encre {
	fill: var( --wp--preset--color--encre );
}

/* Sur fond sombre — pied de page, bannières — la part sombre de la
   signature deviendrait invisible : elle passe au papier. */
.has-encre-background-color .tdl-encre,
.wp-block-cover .tdl-encre,
.tdl-inverse .tdl-encre {
	fill: var( --wp--preset--color--papier );
}

/* --------------------------------------------------------------------------
   8 bis. Les grilles à nombre de colonnes fixe
   Le bloc Grille de WordPress se replie tout seul quand on lui donne une
   largeur minimale de colonne, mais PAS quand on lui fixe un nombre de
   colonnes — ce que font la mosaïque (12) et les étapes (4), parce que
   leurs cellules ont des empans différents. À 375 px, cela donne des
   colonnes de 83 à 111 px : illisibles, et la page finit par déborder.
   -------------------------------------------------------------------------- */
@media ( max-width: 900px ) {
	.mosaique {
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	}

	.mosaique > * {
		grid-column: auto;
	}
}

@media ( max-width: 780px ) {
	.grille-etapes {
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	}

	.grille-etapes > * {
		grid-column: auto;
	}
}

@media ( max-width: 560px ) {
	.mosaique,
	.grille-etapes {
		grid-template-columns: 1fr;
	}
}


/* --------------------------------------------------------------------------
   8 ter. Correctifs de recette — septembre 2026
   Les retours de la cliente, regroupés par écran. Même règle qu'ailleurs :
   aucune couleur ni espacement en dur, uniquement les jetons de theme.json.
   Les rares valeurs en pixels sont des corps typographiques relevés sur la
   maquette, hors gamme des préréglages.
   -------------------------------------------------------------------------- */

/* Hauteur réelle de l'en-tête collant, recalculée à partir des mêmes jetons
   que lui : logo + marges internes + filet. Ce qui vient se coller dessous
   (la barre de filtres du portfolio) reste ainsi calé sans valeur devinée. */
:root {
	--td-entete-hauteur: calc( 2 * var( --wp--preset--spacing--20 ) + clamp( 52px, 6vw, 78px ) + 1px );
}


/* ── S2. Bouton filaire ──────────────────────────────────────────────────
   Le style « contour » de WordPress impose 2 px de bordure et des marges
   internes en em, qui ne tombent jamais sur celles du bouton plein. On
   reprend le filet à 1 px et les mêmes 14 / 30 px, pour que les deux
   boutons s'alignent quand ils se suivent.
   La classe .wp-element-button, déjà présente sur le lien, sert ici à
   passer devant la règle du cœur — à sélecteur égal, sinon, l'ordre des
   feuilles déciderait. */
.wp-block-button.is-style-outline > .wp-block-button__link.wp-element-button,
.wp-block-button .wp-block-button__link.is-style-outline.wp-element-button {
	background-color: transparent;
	border: 1px solid var( --wp--preset--color--orange );
	color: var( --wp--preset--color--orange );
	padding: 14px 30px;
}

.wp-block-button.is-style-outline > .wp-block-button__link.wp-element-button:hover,
.wp-block-button.is-style-outline > .wp-block-button__link.wp-element-button:focus,
.wp-block-button .wp-block-button__link.is-style-outline.wp-element-button:hover,
.wp-block-button .wp-block-button__link.is-style-outline.wp-element-button:focus {
	background-color: var( --wp--preset--color--orange );
	border-color: var( --wp--preset--color--orange );
	color: var( --wp--preset--color--papier );
}


/* ── S5. L'italique orange sur fond de couleur ───────────────────────────
   L'accent orange des titres est calculé pour le papier. Dès que le titre
   porte lui-même une couleur — donc qu'il est posé sur un aplat —, l'accent
   suit cette couleur au lieu de disparaître dans le fond. Cas d'école : le
   bandeau « Un rapport à sortir cette année ? », orange sur orange. */
:is( h1, h2, h3 ).has-text-color em,
.bandeau-action :is( h1, h2, h3 ) em {
	color: inherit;
}


/* ── S4. En-tête des pages intérieures ───────────────────────────────────
   Surtitre, titre, chapô et grand pictogramme forment un seul bloc, au-dessus
   du filet de séparation. Le pictogramme se range à droite du titre. */
.entete-page {
	align-items: center;
	display: grid;
	gap: var( --wp--custom--gouttiere );
	grid-template-columns: minmax( 0, 1fr ) auto;
}

.entete-page-texte > * {
	margin-block: 0;
}

.entete-page-texte > * + * {
	margin-top: var( --wp--preset--spacing--20 );
}

/* Le corps du chapô vit ici et non en préréglage sur le bloc : les pages de
   prestation le composent à 36 px, une valeur hors gamme qu'une classe
   has-lg-font-size — écrite avec !important — empêcherait d'appliquer. */
.entete-page-chapo {
	font-size: var( --wp--preset--font-size--lg );
	max-width: 62ch;
}

/* Sous 860 px, le pictogramme passerait à moins de 100 px de large en se
   partageant la ligne : il repasse au-dessus du titre. */
@media ( max-width: 860px ) {
	.entete-page {
		grid-template-columns: minmax( 0, 1fr );
	}

	.entete-page-picto svg {
		margin-left: 0;
		width: clamp( 96px, 26vw, 150px );
	}
}


/* ── A2. Les trois cartes d'expertise deviennent cliquables ──────────────
   Même procédé que les tuiles de services : le balisage de blocs ne permet
   pas d'envelopper une superposition dans un <a>, alors on étire le lien du
   titre sur toute la carte. Une seule destination annoncée. */
.carte-cliquable {
	position: relative;
}

.carte-cliquable :is( h2, h3, h4 ) a {
	color: inherit;
	text-decoration: none;
}

.carte-cliquable :is( h2, h3, h4 ) a::after {
	content: "";
	inset: 0;
	position: absolute;
	z-index: 2;
}

.carte-cliquable:hover :is( h2, h3, h4 ) a,
.carte-cliquable:focus-within :is( h2, h3, h4 ) a {
	text-decoration: underline;
	text-underline-offset: 3px;
}


/* ── A7. Bandeau défilant ────────────────────────────────────────────────
   Les noms de clients se composent en Fraunces, au corps relevé sur la
   maquette. Le fond orange vient de la palette, posé dans le pattern. */
.bandeau-piste > p {
	font-family: var( --wp--preset--font-family--display );
	font-size: 24px;
	font-weight: 300;
	letter-spacing: -0.01em;
	white-space: nowrap;
}


/* ── A4. Boucle Journal de l'accueil ─────────────────────────────────────
   Le titre passe devant la date, et prend le corps relevé sur la maquette. */
.journal-titre {
	font-size: 20px;
	letter-spacing: -0.015em;
	line-height: 1.15;
}


/* ── A6. Pastilles de la boucle de publications ──────────────────────────
   La catégorie et la mention d'agence se lisent comme des étiquettes, pas
   comme du texte courant. */
.pastilles {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.pastille,
.pastilles .wp-block-post-terms {
	border: 1px solid var( --wp--custom--orange-30 );
	border-radius: var( --wp--custom--rayon-pilule );
	color: var( --wp--custom--encre-62 );
	display: inline-block;
	font-size: var( --wp--preset--font-size--xs );
	font-weight: 600;
	letter-spacing: 0.13em;
	line-height: 1;
	padding: 7px 12px 6px;
	text-transform: uppercase;
}

/* Les liens de terme héritent du ton de la pastille : la couleur de lien
   globale les ferait ressortir comme s'ils étaient l'information. */
.pastilles .wp-block-post-terms a {
	color: inherit;
	text-decoration: none;
}

.pastille-partenaire {
	align-items: center;
	border-color: var( --wp--custom--orange-30 );
	color: var( --wp--preset--color--orange );
	display: inline-flex;
	gap: 6px;
}

.pastille-partenaire img {
	display: block;
	height: 14px;
	width: auto;
}


/* ── A8. « Au-delà de l'édition » ────────────────────────────────────────
   Les deux colonnes de savoir-faire respirent davantage : leurs lignes
   filetées se lisaient comme une seule liste à deux têtes. */
.savoir-faire {
	column-gap: clamp( 40px, 7vw, 120px );
}


/* ── Pied de page ────────────────────────────────────────────────────────
   F3 — les intitulés de colonne s'effacent au profit des liens.
   F4 — la baseline prend le corps de la maquette, la signature passe en
   Fraunces orange.
   Les intitulés « Navigation », « Expertises », « Suivre » ne sont plus des
   titres h5 mais des div (13/09/2026) : ils n'ouvrent aucune section et
   brouillaient le plan des pages. Mesuré dans le navigateur, le h5 ne leur
   apportait qu'une propriété que la div n'a pas : l'interligne des titres de
   theme.json (elements.heading, 1.02). Il est reporté ici ; tout le reste —
   police, corps, graisse, approche, capitales, couleur, marges — est
   identique au pixel. */
.td-pied .td-titre-colonne {
	color: var( --wp--custom--papier-45 );
	font-size: var( --wp--preset--font-size--xs );
	line-height: 1.02;
	margin-bottom: var( --wp--preset--spacing--20 );
}

/* Les liens du pied se posent un ton en dessous du papier plein, et le
   retrouvent au survol.
   Le !important n'est pas un choix de confort : WordPress écrit lui-même la
   couleur de lien d'un bloc avec !important (règle .wp-elements-N a), et une
   couleur en jeton personnalisé — papier à 70 % — n'est pas acceptée dans
   les attributs du bloc. C'est le seul endroit de la feuille où il figure. */
.td-pied a:where( :not( .wp-element-button ) ) {
	color: var( --wp--custom--papier-70 ) !important;
}

.td-pied a:where( :not( .wp-element-button ) ):hover,
.td-pied a:where( :not( .wp-element-button ) ):focus {
	color: var( --wp--preset--color--papier ) !important;
}

.td-pied .td-pied-baseline {
	font-size: clamp( 30px, 3vw, 40px );
}

/* Le sélecteur reprend l'élément p : sans lui, la règle d'héritage de ton
   .has-text-color p:not(.has-text-color) — un cran au-dessus — repeindrait
   la signature en papier. */
.td-pied p.td-signature {
	color: var( --wp--preset--color--orange );
	font-family: var( --wp--preset--font-family--display );
	font-size: var( --wp--preset--font-size--md );
	font-style: italic;
	letter-spacing: 0;
	text-transform: none;
}

/* Le logo Sumotori du pied est servi en version blanche : le tracé noir
   d'origine disparaissait sur l'encre. */
.td-pied .td-partenaire-sur {
	color: var( --wp--custom--papier-45 );
}


/* ── P2. Barre de filtres du portfolio ───────────────────────────────────
   Elle se colle sous l'en-tête du site, qui est lui-même collant. */
.td-filtres {
	background: var( --wp--preset--color--papier );
	padding-top: var( --wp--preset--spacing--20 );
	position: sticky;
	/* L'en-tête du site ne suit plus le défilement : la barre se colle donc
	   au bord haut de la fenêtre, et non plus sous lui. */
	top: 0;
	z-index: 20;
}

/* Le fond doit couvrir toute la largeur quand la barre passe au-dessus du
   contenu, sans quoi les vignettes défilent visiblement dans ses marges. */
.td-filtres::before {
	background: inherit;
	border-bottom: 1px solid var( --wp--custom--orange-30 );
	content: "";
	inset: 0 calc( -1 * var( --wp--custom--gouttiere ) );
	position: absolute;
	z-index: -1;
}


/* ── J1. Le Journal en liste pleine largeur ──────────────────────────────
   Trois colonnes : la vignette, le texte, les repères. Les filets orange
   tiennent lieu de séparation — aucune carte, aucun fond. */
.journal-liste .wp-block-post-template {
	display: block;
}

.journal-ligne {
	align-items: start;
	border-bottom: 1px solid var( --wp--custom--orange-30 );
	display: grid;
	gap: var( --wp--custom--gouttiere );
	grid-template-columns: 190px minmax( 0, 1fr ) 150px;
	padding-block: var( --wp--preset--spacing--30 );
	transition: background-color 0.3s;
}

/* Le filet du haut n'appartient à aucune ligne en particulier : il ferme
   la liste par le haut. */
.journal-liste .wp-block-post-template > li:first-child .journal-ligne,
.journal-liste .wp-block-post-template > .journal-ligne:first-child {
	border-top: 1px solid var( --wp--custom--orange-30 );
}

.journal-ligne > figure,
.journal-ligne .wp-block-post-featured-image {
	grid-column: 1;
	margin: 0;
}

/* Chaque cellule est placée explicitement. Sans cela, un article sans image
   à la une ne produit aucun élément : le texte remonte dans la colonne de
   190 px et la ligne entière se disloque — le défaut relevé en recette sur
   « Optimisation pour le référencement (SEO) ». */
.journal-ligne-texte {
	grid-column: 2;
}

.journal-ligne-cote {
	grid-column: 3;
}

/* Le titre reste en encre : une liste dont chaque ligne est orange n'a plus
   de hiérarchie. C'est le survol qui signale le lien. */
.journal-ligne-texte .wp-block-post-title a,
.td-carte-projet .wp-block-post-title a,
.vignette + .wp-block-post-title a,
.td-grille-portfolio .wp-block-post-title a {
	color: var( --wp--preset--color--encre );
}

/* La date et la catégorie restent en retrait : ce sont des repères, pas
   l'information principale de la vignette. */
.td-carte-projet .wp-block-post-date,
.td-grille-portfolio .wp-block-post-date,
.td-carte-projet .wp-block-post-terms,
.td-grille-portfolio .wp-block-post-terms {
	color: var( --wp--custom--encre-45 );
}

.journal-ligne-texte .wp-block-post-title a:hover,
.journal-ligne-texte .wp-block-post-title a:focus,
.td-carte-projet .wp-block-post-title a:hover,
.td-grille-portfolio .wp-block-post-title a:hover {
	color: var( --wp--preset--color--orange-texte );
}

.journal-ligne-texte > * {
	margin-block: 0;
}

.journal-ligne-texte > * + * {
	margin-top: 10px;
}

.journal-ligne-cote {
	color: var( --wp--custom--encre-62 );
	text-align: right;
}

.journal-ligne-cote > * {
	margin-block: 0;
}

.journal-ligne-cote > * + * {
	margin-top: 10px;
}

/* Sous 780 px, une colonne de 190 px et une de 150 px ne laissent plus
   rien au texte : la ligne s'empile. */
@media ( max-width: 780px ) {
	.journal-ligne {
		grid-template-columns: minmax( 0, 1fr );
	}

	.journal-ligne-cote {
		text-align: left;
	}
}


/* ── J2. En-tête d'article et de fiche projet ────────────────────────────
   Le titre prend toute la largeur du conteneur ; c'est le corps de texte,
   plus bas, qui garde une mesure de lecture. */
.td-entete-article .wp-block-post-title,
.td-entete-projet .wp-block-post-title {
	max-width: 22ch;
}

.td-entete-article .td-surtitre,
.td-entete-projet .td-surtitre {
	color: var( --wp--custom--encre-62 );
}


/* ── Le studio ───────────────────────────────────────────────────────────
   St1 — la phrase d'ouverture est une accroche composée, pas un chapô. */
/* Les noms de clients se composent en encre pleine, et non dans le ton de
   lecture à 70 % : c'est une masse typographique, pas du texte courant. */
.mur-clients > p {
	color: var( --wp--preset--color--encre );
}

.studio-intro {
	font-family: var( --wp--preset--font-family--display );
	font-size: clamp( 28px, 3vw, 39px );
	font-weight: 300;
	letter-spacing: -0.03em;
	line-height: 1.08;
	max-width: 22ch;
}

.studio-intro em {
	color: var( --wp--preset--color--orange );
	font-style: italic;
}

/* St4 — les quatre convictions : filet orange en tête de liste et gouttière
   entre colonnes assez large pour qu'on ne lise pas en travers. */
.convictions {
	border-top: 1px solid var( --wp--custom--orange-30 );
	column-gap: clamp( 32px, 6vw, 90px );
}

/* St5 — les numéros de conviction sont des repères, pas des emphases :
   l'italique de l'accent ne s'applique pas à eux. */
.convictions h3 em,
.jalons h3 em {
	font-style: normal;
}

/* St6 — « D'abord des logos » : le chapô prend le corps de la maquette,
   les dates celui d'un repère de frise, les légendes celui d'une note. */
.jalons-chapo {
	font-family: var( --wp--preset--font-family--display );
	font-size: clamp( 27px, 3vw, 39px );
	font-weight: 300;
	letter-spacing: -0.03em;
	line-height: 1.12;
	max-width: 30ch;
}

.jalons-texte {
	max-width: 92ch;
}

.jalon h3 {
	font-family: var( --wp--preset--font-family--display );
	font-size: clamp( 38px, 4.2vw, 60px );
	font-weight: 300;
	letter-spacing: -0.04em;
	line-height: 0.95;
}

.jalon p {
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: 0.13em;
	text-transform: uppercase;
}


/* ── Mes services ────────────────────────────────────────────────────────
   Sv2 — les titres de tuile quittent le cran 3xl, trop haut pour une
   grille de onze prestations. */
.tuile-titre {
	font-size: 30px;
	line-height: 1.05;
}

.tuile-large .tuile-titre {
	font-size: clamp( 30px, 3vw, 39px );
}

/* Sv5 — « Ce qui fait la différence » : le numéro d'engagement. La couleur
   est posée sur le bloc, pas ici : la section impose son ton aux paragraphes
   qu'elle contient, et il faut une classe de préréglage pour repasser devant. */
.engagement-numero {
	font-family: var( --wp--preset--font-family--display );
	font-size: 27px;
	font-weight: 300;
	letter-spacing: -0.02em;
	margin-block: 0 6px;
}

/* Sv6 — la FAQ. Le triangle natif est remplacé par un signe + orange calé
   à droite, qui devient − à l'ouverture. */
.faq .wp-block-details > summary {
	align-items: baseline;
	cursor: pointer;
	display: flex;
	font-family: var( --wp--preset--font-family--display );
	font-size: clamp( 20px, 2vw, 26px );
	font-weight: 300;
	gap: var( --wp--preset--spacing--20 );
	letter-spacing: -0.02em;
	line-height: 1.2;
	list-style: none;
}

/* Deux écritures pour un même marqueur : ::marker vaut pour Firefox,
   ::-webkit-details-marker pour les moteurs WebKit anciens. */
.faq .wp-block-details > summary::marker,
.faq .wp-block-details > summary::-webkit-details-marker {
	content: "";
	display: none;
}

.faq .wp-block-details > summary::after {
	color: var( --wp--preset--color--orange );
	content: "+";
	font-family: var( --wp--preset--font-family--sans );
	font-size: var( --wp--preset--font-size--xl );
	font-weight: 300;
	line-height: 1;
	margin-left: auto;
}

.faq .wp-block-details[open] > summary::after {
	content: "−";
}


/* ── C1. Contact — « Ce qui m'aide à vous répondre vite » ─────────────────
   Trois colonnes séparées par un filet, sur aplat orange. */
.bandeau-aide h2 {
	font-size: clamp( 26px, 2.8vw, 34px );
}

.bandeau-aide .wp-block-columns > .wp-block-column + .wp-block-column {
	border-left: 1px solid var( --wp--custom--papier-45 );
	padding-left: var( --wp--preset--spacing--30 );
}

/* Empilées, les colonnes n'ont plus rien à séparer latéralement : le filet
   bascule à l'horizontale. */
@media ( max-width: 781px ) {
	.bandeau-aide .wp-block-columns > .wp-block-column + .wp-block-column {
		border-left: 0;
		border-top: 1px solid var( --wp--custom--papier-45 );
		padding-left: 0;
		padding-top: var( --wp--preset--spacing--30 );
	}
}


/* ── C2. Aucun blanc entre le dernier aplat et le pied de page ───────────
   La respiration de bas de page ne se justifie que si la page se termine
   par du texte. Quand elle se termine par une section pleine largeur —
   bandeau orange, appel à l'action —, elle laisserait une bande de fond
   entre l'aplat et le pied. La règle existante ne couvrait pas le cas où
   le bloc de contenu se termine par un pattern. */
.td-page-corps:has( > .entry-content > section:last-child ),
.td-page-large-corps:has( > .entry-content > section:last-child ),
.td-page-corps:has( > .entry-content > .wp-block-cover:last-child ),
.td-page-large-corps:has( > .entry-content > .wp-block-cover:last-child ) {
	padding-bottom: 0;
}


/* ── Se1 / Se2. Page de prestation ───────────────────────────────────────
   Le corps éditorial prend la largeur du conteneur : titres, listes et
   images s'y déploient. Seules les lignes de texte courant gardent une
   mesure de lecture — au-delà de 80 signes, l'œil perd le début de la ligne
   suivante. */
.td-service-corps :is( p, ul, ol ) {
	max-width: 78ch;
}

.td-service-corps h2 {
	margin-top: var( --wp--preset--spacing--50 );
}

.td-service-corps h3 {
	margin-top: var( --wp--preset--spacing--30 );
}

.td-service-corps hr {
	border: 0;
	border-top: 1px solid var( --wp--custom--orange-30 );
	margin-block: var( --wp--preset--spacing--40 );
}

/* Le chapô du déroulé : une phrase de cadrage, pas un paragraphe courant. */
.service-pourquoi {
	font-size: var( --wp--preset--font-size--lg );
	max-width: 68ch;
}

.service-deroule {
	border-top: 1px solid var( --wp--custom--orange-30 );
	column-gap: clamp( 32px, 6vw, 90px );
}

.service-etape {
	border-bottom: 1px solid var( --wp--custom--orange-30 );
}

.service-etape-numero {
	color: var( --wp--preset--color--orange );
	font-size: 0.7em;
	letter-spacing: 0;
	margin-right: 8px;
}

.service-cadre .wp-block-column {
	border-top: 1px solid var( --wp--custom--orange-30 );
	padding-top: var( --wp--preset--spacing--20 );
}

.service-cadre-valeur {
	font-family: var( --wp--preset--font-family--display );
	font-size: clamp( 30px, 3.2vw, 44px );
	font-weight: 300;
	letter-spacing: -0.03em;
	line-height: 1;
	margin-block: 10px;
}


/* ── Se1 / J2. Les gabarits en pleine largeur ────────────────────────────
   L'article et la page de service prennent la largeur du conteneur large,
   au lieu de rester enfermés dans la mesure de lecture de 800 px. La
   mesure reste tenue là où elle compte : sur le corps de texte lui-même. */
.td-pleine-largeur > .entry-content > :where( :not( .alignfull ):not( .alignwide ) ) {
	margin-inline: auto;
	max-width: var( --wp--style--global--wide-size );
}


/* --------------------------------------------------------------------------
   8 quater. Les pages annexes, alignées sur la maquette
   Fiche projet, article et page de prestation. Les corps en pixels et les
   décimales (10,5 px, 13,5 px, 16,5 px) sont relevés tels quels sur la
   maquette : ce sont des valeurs hors gamme des préréglages, pas des
   approximations.
   -------------------------------------------------------------------------- */

/* Le lien de retour : l'écart entre la flèche et le mot s'ouvre au survol. */
.td-retour a {
	align-items: center;
	color: var( --wp--preset--color--orange );
	display: inline-flex;
	font-size: 12.5px;
	font-weight: 600;
	gap: 8px;
	transition: gap 0.3s var( --wp--custom--ease );
}

.td-retour a:hover {
	gap: 14px;
	text-decoration: none;
}

/* Couverture du projet : elle décolle de la page. La géométrie de l'ombre
   est un effet, pas un jeton — sa couleur, elle, vient bien de la charte. */
.pj-cover {
	border-radius: var( --wp--custom--rayon );
	box-shadow: 0 40px 80px -44px var( --wp--custom--encre-45 );
	overflow: hidden;
}

.pj-cover img {
	display: block;
	height: auto;
	width: 100%;
}

/* Corps du projet et de l'article : une mesure de lecture tenue, et un
   premier paragraphe composé qui fait office de chapô. */
.pj-body,
.art-body {
	font-size: 16.5px;
}

.pj-body > *,
.art-body > * {
	max-width: 62ch;
}

.art-body > * {
	max-width: 68ch;
}

/* Le chapô : c'est le premier paragraphe de l'article lui-même, sans qu'on
   ait à le baliser autrement — la rédaction dans l'éditeur reste ordinaire. */
.pj-body .entry-content > p:first-child,
.art-body .entry-content > p:first-child {
	color: var( --wp--preset--color--encre );
	font-family: var( --wp--preset--font-family--display );
	font-size: clamp( 20px, 2.2vw, 30px );
	font-weight: 300;
	letter-spacing: -0.025em;
	line-height: 1.2;
	margin-bottom: 26px;
}

/* Les intertitres de l'article. */
.art-body .entry-content h3 {
	margin-top: 36px;
}

/* La citation : un filet orange plutôt qu'un cadre. */
.art-body blockquote,
.pj-body blockquote {
	border-left: 3px solid var( --wp--preset--color--orange );
	font-style: italic;
	margin-block: 30px;
	padding: 4px 0 4px 24px;
}

/* Les listes de l'article : pas de puce ronde, un tiret orange et un filet
   qui sépare chaque ligne. */
.art-body .entry-content :is( ul, ol ) {
	list-style: none;
	margin-block: 6px 22px;
	padding-left: 0;
}

.art-body .entry-content :is( ul, ol ) li {
	border-bottom: 1px solid var( --wp--custom--encre-08 );
	display: flex;
	font-size: 15.5px;
	gap: 11px;
	padding: 7px 0;
}

.art-body .entry-content :is( ul, ol ) li::before {
	color: var( --wp--preset--color--orange );
	content: "—";
	flex: none;
}

/* La colonne latérale de l'article suit la lecture. Le décalage tient compte
   de l'en-tête collant, qui la recouvrirait sinon. */
.art-side {
	align-self: start;
	position: sticky;
	top: calc( var( --td-entete-hauteur ) + var( --wp--preset--spacing--20 ) );
}

.art-fig {
	margin-block: 0 32px;
}

/* --- Fiche technique en filets, projet comme article --------------------
   Plus de bloc gris à coins arrondis : la maquette compose ces données en
   un tableau filiforme, ouvert par un filet orange plein. */
.pj-specs {
	border-top: 1px solid var( --wp--preset--color--orange );
}

.pj-specs .pj-specs-ligne,
.pj-specs [class*="pj-specs-ligne"] {
	align-items: flex-start;
	border-bottom: 1px solid var( --wp--custom--orange-30 );
	display: flex;
	font-size: 13.5px;
	gap: 18px;
	justify-content: space-between;
	padding: 14px 0;
}

.pj-specs .pj-specs-libelle {
	color: var( --wp--custom--encre-45 );
	flex: none;
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: 0.13em;
	margin: 3px 0 0;
	text-transform: uppercase;
}

.pj-specs .pj-specs-valeur {
	color: var( --wp--preset--color--encre );
	font-size: 13.5px;
	font-weight: 500;
	margin: 0;
	max-width: 24ch;
	text-align: right;
}

.pj-specs .pj-specs-valeur a {
	color: inherit;
}

.pj-specs .pj-specs-agence a {
	color: var( --wp--preset--color--orange );
	font-weight: 600;
}

/* --- Navigation entre projets et entre articles ------------------------- */
.pj-nav {
	border-top: 1px solid var( --wp--preset--color--orange );
	display: grid;
	gap: 0;
	grid-template-columns: 1fr 1fr;
}

.pj-nav .wp-block-post-navigation-link {
	margin: 0;
	padding-block: clamp( 26px, 3vw, 44px );
}

.pj-nav .post-navigation-link-previous {
	padding-right: 24px;
}

.pj-nav .post-navigation-link-next {
	border-left: 1px solid var( --wp--custom--orange-30 );
	padding-left: 24px;
	text-align: right;
}

.pj-nav .post-navigation-link__title {
	display: block;
}

.pj-nav a {
	/* Le libellé « Projet précédent » reste gris ; c'est le nom du projet
	   qui porte l'orange, comme demandé en recette. */
	color: var( --wp--preset--color--orange );
	display: block;
	font-family: var( --wp--preset--font-family--display );
	font-size: clamp( 19px, 2.2vw, 30px );
	font-weight: 400;
	letter-spacing: -0.025em;
	line-height: 1.1;
	transition: color 0.3s;
}

.pj-nav a:hover {
	color: var( --wp--preset--color--encre );
	text-decoration: none;
}

/* L'intitulé « Projet précédent » : un surtitre, pas un bout de phrase.
   La classe n'est pas préfixée wp-block-, contrairement à celle du bloc. */
.pj-nav .post-navigation-link__label {
	color: var( --wp--custom--encre-45 );
	display: block;
	font-family: var( --wp--preset--font-family--sans );
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: 0.13em;
	margin-bottom: 10px;
	text-transform: uppercase;
}

/* La flèche se range avec l'intitulé, jamais au milieu du titre. */
.pj-nav .wp-block-post-navigation-link__arrow-previous,
.pj-nav .wp-block-post-navigation-link__arrow-next {
	display: none;
}

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

	.pj-nav .post-navigation-link-next {
		border-left: 0;
		border-top: 1px solid var( --wp--custom--orange-30 );
		padding-left: 0;
		text-align: left;
	}

	.pj-nav .post-navigation-link-previous {
		padding-right: 0;
	}
}

/* --- Galerie du projet -------------------------------------------------- */
.pj-gal .wp-block-gallery,
.wp-block-gallery.pj-gal {
	display: grid;
	gap: clamp( 16px, 2vw, 30px );
	grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
}

.pj-gal .wp-block-image {
	border-radius: var( --wp--custom--rayon );
	box-shadow: 0 22px 44px -30px var( --wp--custom--encre-45 );
	margin: 0;
	overflow: hidden;
	width: 100% !important;
}

/* La première planche tient toute la largeur : c'est la double page. */
.pj-gal .wp-block-image:first-child {
	grid-column: 1 / -1;
}

@media ( max-width: 640px ) {
	.pj-gal .wp-block-gallery,
	.wp-block-gallery.pj-gal {
		grid-template-columns: minmax( 0, 1fr );
	}
}

/* --- Page de prestation : le chapô, le déroulé, le cadre ---------------- */

/* Le chapô d'une prestation se compose, il n'est pas du texte courant. */
.td-service .entete-page-chapo {
	color: var( --wp--preset--color--encre );
	font-family: var( --wp--preset--font-family--display );
	font-size: clamp( 21px, 2.5vw, 36px );
	font-weight: 300;
	letter-spacing: -0.028em;
	line-height: 1.18;
	max-width: 26ch;
}

.td-service .entete-page-chapo em {
	color: var( --wp--preset--color--orange );
	font-style: italic;
}

.service-deroule {
	/* Filet orange plein en tête de liste, comme sur la maquette : les filets
	   de séparation entre étapes, eux, restent à 30 %. */
	border-top-color: var( --wp--preset--color--orange );
	grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
}

.service-etape {
	padding: 24px 4px 26px !important;
	transition: padding-left 0.35s var( --wp--custom--ease );
}

.service-etape:hover {
	padding-left: 16px !important;
}

.service-etape h3 {
	font-size: clamp( 18px, 1.8vw, 25px );
	font-weight: 400;
	margin-bottom: 9px;
}

.service-etape p {
	font-size: 14.5px;
	max-width: 48ch;
}

.service-etape-numero {
	font-size: 0.68em;
	margin-right: 10px;
}

@media ( max-width: 820px ) {
	.service-deroule {
		grid-template-columns: minmax( 0, 1fr );
	}
}

/* Le cadre de la prestation : trois cases soudées par un écart d'un pixel,
   exactement comme les huit étapes de l'accueil. */
.service-cadre {
	background: var( --wp--custom--orange-30 );
	border: 1px solid var( --wp--custom--orange-30 );
	gap: 1px !important;
}

.service-cadre .wp-block-column {
	background: var( --wp--preset--color--papier );
	border-top: 0;
	padding: 26px 24px 30px;
}

.service-cadre .surtitre {
	color: var( --wp--custom--encre-45 );
	letter-spacing: 0.13em;
	margin-bottom: 12px;
}

/* Le surtitre de la case n'a pas son filet : dans une case, il n'ouvre rien. */
.service-cadre .surtitre::before {
	content: none;
}

.service-cadre .service-cadre-valeur {
	color: var( --wp--preset--color--orange ) !important;
	font-size: clamp( 26px, 3vw, 44px );
	letter-spacing: -0.035em;
	line-height: 0.95;
	margin-block: 0;
}

.service-cadre p:not( .surtitre ):not( .service-cadre-valeur ) {
	font-size: 13.5px;
	margin-top: 12px;
}


/* --------------------------------------------------------------------------
   8 quinquies. Recette V2 — le PDF annoté
   -------------------------------------------------------------------------- */

/* --- Le ferrage à gauche ------------------------------------------------
   La mise en page « contrainte » de WordPress centre tout enfant plus étroit
   que son conteneur. Chaque bloc de texte à qui l'on impose une mesure se
   retrouvait donc décalé par rapport au titre qui le surmonte — relevé en
   recette sur « D'abord des logos » et sur les pages de prestation. On rend
   la marge gauche explicite partout où une mesure est posée.
   Dans le corps éditorial des prestations, ce sont tous les enfants qui se
   ferrent, titres, filets et images compris, comme dans le corps d'article
   de la maquette : ne ferrer que p, ul et ol laissait les titres centrés dans
   leur boîte de 800 px, 262 px à droite du texte qu'ils introduisent (relevé
   le 13/09/2026). Un alignement choisi dans l'éditeur reste respecté.
   Le ferrage se fait sur la colonne large, pas sur le bord du conteneur
   (13/09/2026, soir, retour de Tiphaine). Une marge de 0 ferrait sur le bord
   intérieur du conteneur : juste quand celui-ci ne dépasse pas la largeur
   large (1 440 px), faux quand il est pleine largeur, car son bord intérieur
   n'est alors que la gouttière. Sur grand écran, le texte partait vers la
   gauche du titre : 176 px à 1 920 px, 496 px à 2 560 px — corps pleine
   largeur de sept pages de prestation, « D'abord des logos » et mur de
   clients du Studio. La marge vaut désormais l'écart entre le conteneur et la
   colonne large centrée : nulle tant que le conteneur ne dépasse pas
   1 440 px, ce qui laisse tous les autres cas tels quels.
   Le texte des étapes du déroulé suit le même ferrage : centré dans sa case,
   il tombait de 40 à 180 px à droite du titre de l'étape, que la maquette
   aligne avec lui.
   Même ferrage pour le contenu hérité de l'éditeur classique des pages du
   modèle « page » (Mentions légales, CGV) : ses paragraphes, titres et filets
   n'ont aucune classe de bloc et tombaient au milieu de la colonne de 800 px,
   à droite du titre de la page (+71 px à 1 024 px, +262 px à 1 440 px,
   +320 px à 1 920 px ; relevé le 13/09/2026). Le sélecteur ne vise que les
   enfants sans classe wp-block-* : les pages composées en blocs, dont tous
   les enfants en portent une, ne sont pas concernées. */
.studio-intro,
.jalons-chapo,
.jalons-texte,
.service-pourquoi,
.entete-page-chapo,
.mur-note,
.service-etape p,
.td-service-corps :is( p, ul, ol ),
.td-service-corps > :not( .alignleft, .alignright, .aligncenter, .alignwide, .alignfull ),
.td-page-corps > .wp-block-post-content > :not( [class*="wp-block-"], .alignleft, .alignright, .aligncenter, .alignwide, .alignfull ),
.pj-body > *,
.art-body > * {
	--td-ferrage: max( 0px, ( 100% - var( --wp--style--global--wide-size, 1440px ) ) / 2 );
	/* !important assumé, et unique en son genre avec les liens du pied :
	   la règle de centrage du cœur — .is-layout-constrained > :where(…) —
	   pose elle-même margin-left et margin-right en !important. Sans cela,
	   aucune spécificité ne suffit. */
	margin-left: var( --td-ferrage ) !important;
	margin-right: var( --td-ferrage ) !important;
}

/* --- Le pictogramme sur aplat orange ------------------------------------
   Orange sur orange, il disparaissait — et son encombrement décalait malgré
   tout le titre. Là où le fond est orange, il suit la couleur du texte. */
.has-orange-background-color .pictogramme svg,
.has-orange-background-color svg.pictogramme {
	color: inherit;
}

/* --- Contact : la respiration du formulaire ----------------------------- */
.td-demande > * + * {
	margin-top: var( --wp--preset--spacing--40 );
}

.champ-consentement,
.champ-envoi {
	margin-top: var( --wp--preset--spacing--30 );
}

/* Les coordonnées, à droite, respirent au même rythme que les champs. */
.coordonnees > * + * {
	margin-top: var( --wp--preset--spacing--30 );
	padding-top: var( --wp--preset--spacing--30 );
}

/* --- Portfolio : de l'air entre la vignette et son texte ---------------- */
.td-carte-projet,
.td-grille-portfolio .wp-block-post-template > li {
	--td-ecart-vignette: var( --wp--preset--spacing--20 );
}

.td-carte-projet > * + *,
.td-grille-portfolio .wp-block-post-template > li > * + * {
	margin-top: var( --td-ecart-vignette );
}

.td-carte-projet .wp-block-post-featured-image,
.td-grille-portfolio .wp-block-post-featured-image {
	margin-bottom: var( --wp--preset--spacing--20 );
}

/* La grille du portfolio de la page d'accueil et de la page Portfolio :
   même écart entre l'image et ce qui la légende. */
.wp-block-query .vignette + * {
	margin-top: var( --wp--preset--spacing--20 );
}

/* --- Article : les trois notes liées, réparties sur la largeur ---------- */
.td-notes-liees .wp-block-post-template {
	gap: var( --wp--preset--spacing--30 );
}

.td-notes-liees .wp-block-post-title a {
	color: var( --wp--preset--color--encre );
}

.td-notes-liees .wp-block-post-title a:hover,
.td-notes-liees .wp-block-post-title a:focus {
	color: var( --wp--preset--color--orange-texte );
}

.td-notes-liees .wp-block-post-date {
	color: var( --wp--custom--encre-45 );
}


/* --------------------------------------------------------------------------
   8 sexies. Les légendes héritées de l'éditeur classique
   Deux contenus du site portent encore un [caption] : WordPress le rend en
   <figure class="wp-caption" style="width:1024px">. Cette largeur en style
   en ligne le rend plus étroit que son conteneur, et la règle de centrage du
   cœur — margin-left/right:auto !important — le pose alors au milieu, au
   beau milieu d'une page dont tout le reste est ferré à gauche.
   Rien dans la maquette n'est centré : on aligne.
   Le ferrage suit la colonne large, comme dans « Le ferrage à gauche » (13/09/2026) :
   nul dans une colonne d'article ou un conteneur d'au plus 1 440 px, il
   évite qu'une légende d'un contenu pleine largeur colle à la gouttière.
   -------------------------------------------------------------------------- */
.entry-content .wp-caption,
.wp-block-post-content .wp-caption {
	--td-ferrage: max( 0px, ( 100% - var( --wp--style--global--wide-size, 1440px ) ) / 2 );
	margin-left: var( --td-ferrage ) !important;
	margin-right: var( --td-ferrage ) !important;
	max-width: 100%;
}

.entry-content .wp-caption img,
.wp-block-post-content .wp-caption img {
	height: auto;
	max-width: 100%;
}

/* La légende reprend le traitement des légendes du thème. */
.entry-content .wp-caption-text,
.wp-block-post-content .wp-caption-text {
	color: var( --wp--custom--encre-62 );
	font-size: var( --wp--preset--font-size--xs );
	margin-top: 10px;
	text-align: left;
}


/* --------------------------------------------------------------------------
   8 septies. Recette du 9 septembre
   -------------------------------------------------------------------------- */

/* --- Rangée « pictogramme + titre » --------------------------------------
   Le pictogramme se tient à GAUCHE du titre, sur la même ligne, et c'est lui
   qui prend la marge du bloc : le titre est donc décalé de sa largeur. C'est
   la composition de la maquette, confirmée en recette le 10 septembre —
   « les titres sont à côté des icônes et non en dessous, pour tous les blocs
   de l'ensemble du site ».

   Ce qui devait être ferré, et qui l'est désormais, c'est le surtitre, le
   chapô et le corps de texte : eux s'alignent sur la marge commune, celle de
   la frise « 2013 … 2026 ». Le titre, lui, est volontairement en retrait.

   Une version antérieure empilait le pictogramme au-dessus du titre pour
   tout aligner : c'était une lecture erronée de la demande. */
.titre-ferre {
	align-items: center;
}

/* --- Le récit de parcours prend toute la largeur ------------------------
   Il court désormais de « 2013 » à « 2026 », comme la frise qu'il annonce. */
.jalons-texte {
	max-width: none;
}

/* --- Titre des fiches projet et des articles ----------------------------
   121 px sur trois lignes : la maquette prévoit un grand titre, mais sur des
   intitulés longs il devenait illisible. Il est ramené de moitié — le cran
   4xl n'est plus posé sur le bloc, sa classe étant écrite en !important. */
/* Le chapô de « Ce qui fait la différence », comme tous les chapôs de
   section : ferré sur le surtitre, jamais centré. */
.difference-chapo {
	margin-left: 0 !important;
	margin-right: 0 !important;
	max-width: 68ch;
}

.titre-page-reduit {
	font-size: clamp( 24px, 4.2vw, 60px );
	letter-spacing: -0.03em;
	line-height: 1.02;
	/* Comme partout ailleurs : une mesure posée sur un enfant d'une mise en
	   page contrainte le fait centrer, le cœur écrivant ses marges en
	   !important. Le titre se ferre sur le surtitre et le lien de retour. */
	margin-left: 0 !important;
	margin-right: 0 !important;
	max-width: 28ch;
}


/* --------------------------------------------------------------------------
   8 octies. Fil d'Ariane — bloc SEOPress PRO « wpseopress/breadcrumbs »
   Posé dans les gabarits juste au-dessus du surtitre (classe .td-fil-ariane).
   SEOPress écrit la liste (nav > ol.breadcrumb > li) et, dans le <head>, une
   feuille minimale : liste en ligne, séparateur « › » posé en ::after. On ne
   règle ici que la voix : petit corps, graisse normale, encre atténuée — celle
   du surtitre —, séparateur plus pâle. L'étape courante n'est pas un lien.
   -------------------------------------------------------------------------- */
.td-fil-ariane .breadcrumb {
	color: var( --wp--custom--encre-62 );
	font-family: var( --wp--preset--font-family--sans );
	font-size: var( --wp--preset--font-size--sm );
	font-weight: 400;
	letter-spacing: 0;
	line-height: 1.5;
}

.td-fil-ariane .breadcrumb li::after {
	color: var( --wp--custom--encre-45 );
}

.td-fil-ariane .breadcrumb a {
	color: inherit;
	text-decoration: none;
}

.td-fil-ariane .breadcrumb a:hover,
.td-fil-ariane .breadcrumb a:focus-visible {
	color: var( --wp--preset--color--orange-texte );
	text-decoration: underline;
}


/* --------------------------------------------------------------------------
   9. Mouvement réduit
   Aucune règle d'opacité ni de transform ici : elles écraseraient les
   attributs pilotés par le graphique de l'accueil.
   -------------------------------------------------------------------------- */
@media ( prefers-reduced-motion: reduce ) {

	/* Pictogrammes affichés d'emblée à leur état final — jamais invisibles,
	   y compris si la préférence est activée après le passage du script. */
	.picto-trace,
	.picto-trace * {
		stroke-dasharray: none !important;
		stroke-dashoffset: 0 !important;
	}

	/* Bandeau arrêté net, à son point de départ. */
	.bandeau-piste {
		animation: none !important;
	}

	/* Contenu du voile posé à sa place définitive, et non décalé pour
	   toujours. Cible étroite : rien ici n'atteint le graphique du hero. */
	.vignette-voile > * {
		transform: none;
	}

	/* Repli du hero sur la planche figée. */
	.hero-graphique-anime {
		display: none;
	}

	.hero-graphique-statique {
		display: block;
	}

	/* Toute autre animation ou transition neutralisée. */
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		transition-delay: 0s !important;
	}
}