/*
Theme Name: Noro
Theme URI: https://ateliernoro.com
Author: Atelier Noro
Description: Thème bloc de l'Atelier Noro. Le système de marque est déclaré dans theme.json ; ce fichier ne porte que ce que theme.json ne sait pas exprimer.
Version: 0.4.5
Requires at least: 6.5
Tested up to: 6.8
Requires PHP: 7.4
License: Propriétaire — Atelier Noro
Text Domain: noro
Tags: full-site-editing, block-theme
*/

/* ---------------------------------------------------------------
   1. L'or
   Doctrine A5 : l'or ne se pose jamais à plat sur une surface.
   Dégradé interne + grain 5 % en Multiply.
   Exception nommée : sur un trait fin, l'or est plat — un dégradé
   d'un pixel ne se voit pas et le grain y fait du bruit.
   --------------------------------------------------------------- */

.noro-or-surface {
	position: relative;
	background-image: var(--wp--preset--gradient--or-surface);
	isolation: isolate;
}

.noro-or-surface::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	opacity: 0.05;
	mix-blend-mode: multiply;
	background-image: url("assets/img/grain.png");
	background-size: 180px 180px;
}

.noro-trait-or {
	border: 0;
	height: 1px;
	width: 40px;
	background: var(--wp--preset--color--or-revele);
}

/* ---------------------------------------------------------------
   2. Le filet de section
   Repère des sections non numérotées. Vertical, court, à gauche
   du titre. Grège — l'or ne sert jamais l'interface.
   --------------------------------------------------------------- */

/* Le filet vertical de section est retiré : il alourdissait la page
   sans rien porter. Le blanc et le titre suffisent à ouvrir une bande. */

/* ---------------------------------------------------------------
   3. La tête et la nav
   Deux états, un seul axe. Le wordmark ne bouge jamais : la colonne
   rétractée se cale sur son bord gauche, donc rien ne saute d'un
   état à l'autre. Le passage se fait en fondu, jamais en glissement.
   L'or ne sert pas l'interface — le point est grège, et c'est la
   graisse de l'intitulé qui porte l'information d'état.

   Ce point n'est pas un ornement. C'est le point souscrit de Nọrọ,
   l'orthographe vraie du nom, que le REQ ne peut pas enregistrer. Le
   logotype la porte ; le texte courant écrit Noro. La nav reprend donc
   une lettre du nom, pas un motif décoratif.
   --------------------------------------------------------------- */

:root {
	--noro-marge: clamp(24px, 5vw, 64px);
	--noro-fondu: 200ms;
	/* Le couloir : colonne de gauche réservée à la nav rétractée.
	   Réservée en permanence, pas seulement au défilement — sinon le
	   contenu sauterait latéralement au moment de la rétraction. */
	--noro-couloir: 0px;
}

@media (min-width: 782px) {
	:root { --noro-couloir: clamp(184px, 17vw, 252px); }
}

.wp-site-blocks { padding-inline-start: var(--noro-couloir); }

.noro-tete {
	position: fixed;
	inset-block-start: 0;
	inset-inline: 0;
	z-index: 50;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--40);
	padding: var(--wp--preset--spacing--30) var(--noro-marge);
	pointer-events: none;
}

.noro-tete > * { pointer-events: auto; }

.noro-tete__marque {
	display: block;
	text-decoration: none;
	color: var(--wp--preset--color--encre);
}

/* Le wordmark est en or diffus : c'est l'échelle qui le rend lisible,
   pas le contraste. On le pose donc large, jamais en vignette. */
.noro-tete__wordmark {
	display: block;
	width: clamp(84px, 7.5vw, 108px);
}

.noro-tete__wordmark svg {
	display: block;
	width: 100%;
	height: auto;
}

/* -- La nav, état déployé ---------------------------------------- */

.noro-nav {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--40);
	transition: opacity var(--noro-fondu) ease;
}

.noro-nav__liste {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--40);
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Le point est sorti du flux : la boîte du lien vaut donc la hauteur
   du texte seul, et le wordmark, les intitulés et la bascule de langue
   partagent exactement le même centre vertical. */
.noro-nav__lien {
	display: inline-block;
	position: relative;
	text-decoration: none;
	font-family: var(--wp--preset--font-family--corps);
	font-size: var(--wp--preset--font-size--releve);
	text-transform: uppercase;
	letter-spacing: 0.12em;
	font-weight: 300;
	color: var(--wp--preset--color--gris-moyen);
	transition: color var(--noro-fondu) ease;
}

.noro-nav__lien:hover,
.noro-nav__lien:focus-visible { color: var(--wp--preset--color--encre); }

.noro-nav__item.est-actif .noro-nav__lien {
	color: var(--wp--preset--color--encre);
	font-weight: 500;
}

.noro-nav__point {
	position: absolute;
	inset-inline-start: 50%;
	inset-block-start: calc(100% + 7px);
	transform: translateX(-50%);
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: transparent;
	transition: background-color var(--noro-fondu) ease;
}

.noro-nav__item.est-actif .noro-nav__point {
	background: var(--wp--preset--color--grege);
}

.noro-nav__langues {
	display: flex;
	align-items: center;
	gap: 10px;
	font-family: var(--wp--preset--font-family--corps);
	font-size: var(--wp--preset--font-size--releve);
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

.noro-nav, .noro-nav__liste { align-items: center; }

.noro-langue { color: var(--wp--preset--color--gris-moyen); text-decoration: none; }
.noro-langue--active { color: var(--wp--preset--color--encre); }
a.noro-langue:hover,
a.noro-langue:focus-visible { color: var(--wp--preset--color--encre); }

/* -- La nav, état rétracté --------------------------------------- */

.noro-tete.est-retractee .noro-nav {
	position: fixed;
	inset-block-start: 50%;
	inset-inline-start: var(--noro-marge);
	inline-size: calc(var(--noro-couloir) - var(--noro-marge) * 0.5);
	transform: translateY(-50%);
	flex-direction: column;
	align-items: flex-start;
	gap: var(--wp--preset--spacing--30);
}

.noro-tete.est-retractee .noro-nav__liste {
	flex-direction: column;
	align-items: flex-start;
	gap: 18px;
}

/* En colonne, le point revient dans le flux, à gauche de l'intitulé. */
.noro-tete.est-retractee .noro-nav__lien {
	display: inline-flex;
	flex-direction: row;
	align-items: center;
	gap: 10px;
}

.noro-tete.est-retractee .noro-nav__point {
	position: static;
	transform: none;
	flex: 0 0 auto;
}

.noro-tete.est-retractee .noro-nav__point {
	background: var(--wp--preset--color--grege);
	opacity: 0.5;
}

.noro-tete.est-retractee .noro-nav__item.est-actif .noro-nav__point {
	opacity: 1;
}

/* Tous les intitulés restent lisibles, à demi-présence. Le survol de
   la colonne les ramène entiers. L'actif ne baisse jamais. */
.noro-tete.est-retractee .noro-nav__intitule {
	opacity: 0.25;
	white-space: nowrap;
	transition: opacity var(--noro-fondu) ease;
}

.noro-tete.est-retractee .noro-nav__item.est-actif .noro-nav__intitule,
.noro-tete.est-retractee .noro-nav:hover .noro-nav__intitule,
.noro-tete.est-retractee .noro-nav:focus-within .noro-nav__intitule {
	opacity: 1;
}

/* -- Le fondu ----------------------------------------------------- */

.noro-tete.en-fondu .noro-nav { opacity: 0; }

/* -- Mobile ------------------------------------------------------- */

/* Au défilement, la tête cesse d'être transparente : sur écran étroit
   elle reste une vraie barre, et le contenu passerait dessous. */
@media (max-width: 781px) {
	.noro-tete {
		background: var(--wp--preset--color--blanc-laiteux);
		background: transparent;
		transition: background-color 280ms ease, box-shadow 280ms ease;
	}

	.noro-tete.est-retractee,
	.noro-tete.est-ouverte {
		background-color: var(--wp--preset--color--blanc-laiteux);
		box-shadow: 0 1px 0 var(--wp--preset--color--grege);
	}
}

/* --- 2. Le bouton reste au-dessus du menu plein écran, et il ferme. --- */

.noro-tete__bascule {
	display: none;
	background: none;
	border: 0;
	padding: 6px 0;
	cursor: pointer;
	position: relative;
	z-index: 3;
	font-family: var(--wp--preset--font-family--corps);
	font-weight: 500;
	font-size: var(--wp--preset--font-size--releve);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--wp--preset--color--encre);
}

@media (max-width: 781px) {
	.noro-tete__bascule { display: block; }

	.noro-tete .noro-nav,
	.noro-tete.est-retractee .noro-nav {
		position: fixed;
		inset: 0;
		/* L'état rétracté impose la largeur du couloir, qui vaut zéro en
		   mobile : sans cette remise à zéro, le voile se réduit à ses
		   marges intérieures — une bande blanche de 48 px à gauche, et
		   le reste de l'écran transparent. Le défaut n'apparaît qu'après
		   défilement, ce qui le rend intermittent à l'usage. */
		inline-size: auto;
		block-size: auto;
		transform: none;
		flex-direction: column;
		align-items: flex-start;
		justify-content: center;
		gap: var(--wp--preset--spacing--50);
		padding: var(--noro-marge);
		background: var(--wp--preset--color--blanc-laiteux);
		opacity: 0;
		visibility: hidden;
	}

	.noro-tete.est-ouverte .noro-nav {
		opacity: 1;
		visibility: visible;
	}

	.noro-tete .noro-nav__liste,
	.noro-tete.est-retractee .noro-nav__liste {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--wp--preset--spacing--30);
	}

	.noro-tete .noro-nav__lien { font-size: var(--wp--preset--font-size--sous-titre); letter-spacing: 0.04em; }
	.noro-tete .noro-nav__intitule,
	.noro-tete.est-retractee .noro-nav__intitule { opacity: 1; transform: none; }
}

/* ---------------------------------------------------------------
   4. Les bandes
   Deux types. La bande de lecture porte parole et matière côte à
   côte, en alternance. La bande d'affiche répartit le contenu aux
   extrémités du cadre et laisse le centre vide ; elle ne se lit pas,
   elle se regarde.

   Grille mixte réglée : la bande va de bord à bord, la parole se
   cale sur la feuille de 1180. Trois formats de matière seulement —
   bord à bord, colonne étroite, absente. Le vide est un format.
   --------------------------------------------------------------- */

:root {
	--noro-feuille: 1180px;
	--noro-tete-h: clamp(140px, 16vh, 190px);
}

.noro-bande {
	--noro-retrait: max( var(--noro-marge), calc( ( 100% - var(--noro-feuille) ) / 2 ) );
	position: relative;
	padding-block: var(--wp--preset--spacing--70);
}

.noro-bande--seuil { padding-block: var(--wp--preset--spacing--80); }

.noro-bande--affiche {
	min-height: 100svh;
	display: grid;
	grid-template-rows: auto 1fr auto;
	align-content: stretch;
	padding-block: var(--wp--preset--spacing--50);
}

/* Ouverture de page intérieure : généreuse, mais elle laisse voir la
   suite. Seul l'Accueil s'ouvre en plein écran — c'est le seuil du
   site, pas un gabarit à répliquer. */
/* Dans une ouverture, la matière doit atteindre le haut et le bas de la
   bande. La rangée s'étire donc, et c'est la parole qui se recentre en
   son sein — l'inverse de ce qui se faisait, où la rangée entière était
   centrée et la matière ne touchait rien. */
.noro-bande--ouverture {
	min-height: clamp(480px, 68svh, 720px);
	display: grid;
	align-content: stretch;
}

.noro-bande--ouverture .noro-bande__grille {
	align-items: stretch;
	min-height: inherit;
}

.noro-bande--ouverture .noro-bande__parole {
	align-self: center;
}

/* Deux paroles dans la même bande, sans matière. Sert la paire :
   ce qui ne se fractionne pas se lit d'un seul regard. */
.noro-bande--paire .noro-bande__grille {
	column-gap: var(--wp--preset--spacing--60);
}

.noro-bande--paire .noro-bande__parole:first-child {
	grid-column: 1 / span 6;
	padding-inline-start: var(--noro-retrait);
	padding-inline-end: 0;
}

.noro-bande--paire .noro-bande__parole:last-child {
	grid-column: 7 / -1;
	padding-inline-start: 0;
	padding-inline-end: var(--noro-retrait);
}

@media (max-width: 781px) {
	.noro-bande--paire .noro-bande__parole:first-child,
	.noro-bande--paire .noro-bande__parole:last-child {
		grid-column: 1;
		padding-inline: var(--noro-marge);
	}
}

/* La tête est fixe : la première bande lui réserve sa hauteur. */
.noro-bande--entree { padding-block-start: var(--noro-tete-h); }

/* -- La grille de bande ------------------------------------------ */

.noro-bande__grille {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	align-items: center;
	column-gap: var(--wp--preset--spacing--50);
	row-gap: var(--wp--preset--spacing--50);
}

/* Le seuil fait toute la hauteur de l'écran. Y étirer la matière
   donnerait une photographie de 100 svh qui écraserait la parole — ce
   n'est pas une bande de lecture mais une affiche. Elle garde donc la
   mesure qu'elle avait, et se centre dans la bande. */
.noro-bande--affiche .noro-bande__matiere {
	align-self: center;
	min-height: 0;
}

.noro-bande--affiche .noro-matiere__image {
	height: auto;
}

.noro-bande--affiche .noro-bande__matiere img {
	width: 100%;
	height: clamp(320px, 46vw, 620px);
	object-fit: cover;
	display: block;
}

/* La parole passe au-dessus de la matière. Un H1 en Sought déborde
   volontiers de sa colonne — quand cela arrive, il doit couvrir la
   photographie, jamais passer dessous. */
.noro-bande__parole {
	position: relative;
	z-index: 1;
	grid-column: 1 / span 5;
	padding-inline-start: var(--noro-retrait);
	padding-inline-end: var(--wp--preset--spacing--30);
}

.noro-bande__matiere {
	grid-column: 6 / -1;
	margin: 0;
}

/* Alternance : la parole passe à droite, la matière à gauche. */

.noro-bande--inverse .noro-bande__parole {
	grid-column: 8 / -1;
	padding-inline-start: var(--wp--preset--spacing--30);
	padding-inline-end: var(--noro-retrait);
}

.noro-bande--inverse .noro-bande__matiere { grid-column: 1 / span 7; }

/* -- Les trois formats de matière -------------------------------- */

/* La matière touche les bords de sa bande, en haut comme en bas. La
   photographie est tronquée plutôt que réduite : c'est la bande qui
   décide du cadre, jamais les proportions du fichier.

   La cellule est une GRILLE, non un bloc à enfant positionné en absolu.
   L'absolu retirait la figure du flux : la cellule perdait sa largeur
   propre, s'effondrait contre son bord d'alignement, et la matière
   devenait un ruban. Une grille étire son enfant sans le sortir du
   calcul — et elle respecte les marges intérieures, ce que l'absolu
   ignorait. */
/* La matière remplit sa cellule : toute la hauteur de la bande, toute
   la largeur de ses colonnes. La photographie est tronquée plutôt que
   réduite.

   Note de conception : la colonne étroite a été dessinée pour un DÉTAIL
   — un gros plan de matière, un fragment. Sur un fragment, le recadrage
   ne retire rien. Y placer une scène entière la réduit à une bande
   centrale : ce n'est pas un défaut de réglage, c'est le format qui
   n'est pas fait pour cette image. */
.noro-matiere--pleine,
.noro-matiere--colonne {
	display: grid;
	align-self: stretch;
}

.noro-matiere--pleine {
	min-height: clamp(320px, 46vw, 620px);
}

.noro-matiere__image {
	margin: 0;
	min-height: 0;
	overflow: hidden;
}

.noro-matiere__image img,
.noro-matiere--pleine .noro-matiere__cadre {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* La colonne occupe vraiment ses trois colonnes. Le calage contre un
   bord la laissait se rétrécir à la largeur de son contenu — sans
   contenu dans le flux, cela valait zéro. */
.noro-matiere--colonne {
	grid-column: 9 / span 3;
	justify-self: stretch;
	padding-inline-end: var(--noro-retrait);
}

.noro-bande--inverse .noro-matiere--colonne {
	grid-column: 2 / span 3;
	justify-self: stretch;
	padding-inline-start: var(--noro-retrait);
	padding-inline-end: 0;
}

/* La colonne étroite suit la même loi que la matière pleine : elle
   remplit la hauteur de sa bande. Sa hauteur fixe d'avant entrait en
   conflit avec la règle commune et la laissait petite. */
.noro-matiere--colonne {
	min-height: clamp(280px, 34vw, 460px);
}

/* Une cellule de matière SANS format d'image — celle qui porte les
   entrées du Carnet, par exemple — ne doit hériter d'aucune hauteur
   minimale : elle creusait un vide au-dessus de son contenu. */
.noro-bande__matiere:not(.noro-matiere--pleine):not(.noro-matiere--colonne) {
	min-height: 0;
}

/* Matière absente : la parole seule, dans la feuille. Le silence. */

.noro-bande--silence .noro-bande__parole {
	grid-column: 1 / -1;
	max-width: 46rem;
	margin-inline: auto;
	padding-inline: var(--noro-marge);
	text-align: initial;
}

/* Filet de sécurité : une image ne peut jamais être écrasée sous 200 px
   de large, même si elle atterrit dans une structure imprévue.

   Ce filet posait aussi « height: auto », d'une spécificité supérieure
   à la règle de pleine hauteur — il écrasait donc précisément ce qu'il
   devait protéger, et rendait toutes les matières minuscules. La leçon
   tient en une ligne : un filet ne pose que ce qu'il doit garantir. */
.noro-bande__grille .wp-block-image {
	min-width: min(200px, 100%);
}

/* Un bloc image encore vide ne doit pas faire s'effondrer sa bande :
   il garde la hauteur du cadre d'attente jusqu'à ce qu'on le remplisse. */
.noro-matiere__image:empty {
	display: block;
	min-height: clamp(320px, 46vw, 620px);
	background: var(--wp--preset--color--grege);
}

.noro-matiere--colonne .noro-matiere__image:empty { min-height: clamp(280px, 34vw, 460px); }

.noro-matiere__image { margin: 0; }
.noro-matiere__image img { display: block; width: 100%; }

/* Cadre d'attente, tant qu'il n'y a pas de photographie. */
.noro-matiere__cadre { background: var(--wp--preset--color--grege); }

/* L'amorce : la ligne qui ouvre une section sans être un titre.
   Montserrat Alternates en italique — plus proche de la parole que
   de la structure. */
h4.noro-amorce,
.noro-amorce {
	font-family: var(--wp--preset--font-family--corps);
	font-style: italic;
	font-weight: 400;
	font-size: var(--wp--preset--font-size--sous-titre);
	letter-spacing: 0.06em;
	line-height: 1.5;
	color: var(--wp--preset--color--or-revele);
	margin-block: 0 var(--wp--preset--spacing--30);
}

/* Le lien de suite : un trait d'or, puis le mot. L'or marque le
   passage, l'encre le porte. Même geste que l'appel, en plus discret. */
.noro-suite {
	display: inline-flex;
	align-items: baseline;
	gap: 14px;
	margin-block-start: var(--wp--preset--spacing--20);
	font-family: var(--wp--preset--font-family--corps);
	font-size: var(--wp--preset--font-size--corps);
	font-weight: 500;
	letter-spacing: 0.06em;
	color: var(--wp--preset--color--encre);
	text-decoration: none;
}

.noro-suite::before {
	content: "";
	flex: 0 0 auto;
	width: 30px;
	height: 1px;
	background: var(--wp--preset--color--or-revele);
	transform: translateY(-0.32em);
	transition: width 320ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.noro-suite:hover::before,
.noro-suite:focus-visible::before { width: 52px; }

/* Les trois dernières entrées du Carnet, en bref, sur l'Accueil. */
.noro-entrees--breve .wp-block-post-template {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0;
}

.noro-entree-breve {
	border-block-start: 1px solid var(--wp--preset--color--grege);
	padding-block: var(--wp--preset--spacing--30);
}

.noro-entree-breve .wp-block-post-title { margin: 0 0 6px; }
.noro-entree-breve .wp-block-post-title a { text-decoration: none; }
.noro-entree-breve .wp-block-post-title a:hover { color: var(--wp--preset--color--gris-moyen); }
.noro-entree-breve .wp-block-post-excerpt { margin: 0; }
.noro-entree-breve p { font-size: var(--wp--preset--font-size--legende); margin: 0; }

/* Les icônes des cinq moments. */
/* Les icônes des cinq moments ont été retirées : la séquence revient à
   deux colonnes, le numéro et le texte. Les styles d'icône restent
   déclarés — le bloc existe toujours si on veut y revenir. */
.noro-icone { display: block; width: 34px; }
.noro-icone svg {
	display: block;
	width: 100%;
	height: auto;
	fill: none;
	stroke: var(--wp--preset--color--or-revele);
	stroke-width: 1.2;
	stroke-linecap: round;
}

@media (max-width: 600px) {
	.noro-icone { width: 28px; }
}

/* La tête est fixe : une ancre doit s'arrêter sous elle. */
[id] { scroll-margin-block-start: calc(var(--noro-tete-h) + 24px); }

/* Repli : tant qu'une page n'a pas été recomposée, ses liens de section
   sont de simples <a> sans classe. On leur donne quand même le trait
   d'or, pour que le contenu déjà en place ne reste pas nu. Le fondu
   vers Alamanda, lui, demande le balisage complet. */
.noro-bande__parole > p > a:only-child:not([class]) {
	display: inline-flex;
	align-items: baseline;
	gap: 14px;
	font-weight: 500;
	color: var(--wp--preset--color--encre);
	text-decoration: none;
}

.noro-bande__parole > p > a:only-child:not([class])::before {
	content: "";
	flex: 0 0 auto;
	width: 30px;
	height: 1px;
	background: var(--wp--preset--color--or-revele);
	transform: translateY(-0.32em);
	transition: width 320ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.noro-bande__parole > p > a:only-child:not([class]):hover::before { width: 52px; }

/* Le refus : « Ou rien ». Le seul endroit du site où l'écriture
   d'Alamanda sert autre chose qu'une citation — elle sert une porte
   qu'on referme. Emploi unique, à ne pas répliquer ailleurs. */
.noro-refus {
	font-family: var(--wp--preset--font-family--citation);
	font-size: var(--wp--preset--font-size--titre-courant);
	line-height: 1.4;
	letter-spacing: 0;
	color: var(--wp--preset--color--or-revele);
	margin-block: var(--wp--preset--spacing--30) 0;
}

/* Le mot d'un lien de passage : deux états superposés. Le premier est
   dans le flux et fixe la largeur ; le second, en Alamanda, est posé
   par-dessus et se révèle au survol. Une police ne s'interpole pas —
   le fondu croisé est le seul moyen d'y arriver progressivement.

   Le second exemplaire est un vrai élément et non un `content: attr()` :
   ce qui naît du CSS est invisible aux outils de traduction. Il porte
   aria-hidden pour que les lecteurs d'écran ne lisent pas deux fois. */
/* La pile ne porte aucun texte : elle ne fait que superposer ses deux
   enfants. C'est ce qui la rend invisible aux outils de traduction,
   tandis que chacun de ses enfants reste un texte pur, donc traduisible. */
.noro-lien__pile {
	position: relative;
	display: inline-block;
	white-space: nowrap;
}

.noro-lien__mot {
	display: inline-block;
	white-space: nowrap;
	transition: color 420ms ease;
}

.noro-lien__ombre {
	position: absolute;
	inset-block-start: -0.24em;
	inset-inline-start: 0;
	white-space: nowrap;
	pointer-events: none;
	opacity: 0;
	font-family: var(--wp--preset--font-family--citation);
	font-weight: 400;
	font-style: normal;
	font-size: 1.5em;
	letter-spacing: 0;
	color: var(--wp--preset--color--gris-moyen);
	transition: opacity 420ms ease;
}

/* Le mot ne s'efface QUE s'il est dans une pile — c'est-à-dire que si
   son double en Alamanda existe pour prendre sa place. Sans ce garde,
   l'échec du script ne donnait pas « pas d'effet » mais « le libellé
   disparaît au survol », ce qui est bien pire. La dégradation doit
   toujours retirer l'ornement, jamais le contenu. */
.noro-suite:hover .noro-lien__pile .noro-lien__mot,
.noro-suite:focus-visible .noro-lien__pile .noro-lien__mot,
.noro-appel:hover .noro-lien__pile .noro-lien__mot,
.noro-appel:focus-visible .noro-lien__pile .noro-lien__mot { color: transparent; }

.noro-suite:hover .noro-lien__ombre,
.noro-suite:focus-visible .noro-lien__ombre,
.noro-appel:hover .noro-lien__ombre,
.noro-appel:focus-visible .noro-lien__ombre { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
	.noro-lien__mot,
	.noro-lien__ombre { transition: none; }
	.noro-suite:hover .noro-lien__mot,
	.noro-appel:hover .noro-lien__mot { color: var(--wp--preset--color--gris-moyen); }
	.noro-suite:hover .noro-lien__ombre,
	.noro-appel:hover .noro-lien__ombre { opacity: 0; }
}

/* Sought à la demande. La police ne tient plus les titres courants —
   elle perturbait la lecture. Elle reste disponible sur n'importe quel
   titre par la classe additionnelle « noro-dramatique », pour les
   effets rares où le choc est voulu. */
.noro-dramatique {
	font-family: var(--wp--preset--font-family--dramatique) !important;
	font-weight: 400;
	letter-spacing: -0.005em;
	line-height: 1.12;
}

/* -- L'appel -------------------------------------------------------
   Le bouton fait entrer, l'appel fait sortir. Deux vêtements pour la
   même porte.

   L'or marque, il ne lit pas : #E0B15E sur blanc laiteux donne 1,86
   pour 1, très en dessous du seuil d'un texte lisible. Un logotype
   peut s'en affranchir, un lien non — c'est du texte fonctionnel.
   Donc la parole est en encre et l'or tient le trait. La règle est
   respectée sans que personne ne plisse les yeux.
   -------------------------------------------------------------------- */

.noro-appel {
	display: inline-flex;
	align-items: baseline;
	gap: 16px;
	margin-block-start: var(--wp--preset--spacing--40);
	font-family: var(--wp--preset--font-family--corps);
	font-weight: 500;
	font-size: var(--wp--preset--font-size--titre-courant);
	letter-spacing: 0.06em;
	line-height: 1.3;
	color: var(--wp--preset--color--encre);
	text-decoration: none;
}

.noro-appel::before {
	content: "";
	flex: 0 0 auto;
	width: 38px;
	height: 1px;
	background: var(--wp--preset--color--or-revele);
	transform: translateY(-0.32em);
	transition: width 320ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.noro-appel:hover::before,
.noro-appel:focus-visible::before { width: 62px; }

@media (prefers-reduced-motion: reduce) {
	.noro-appel::before { transition: none; }
}

/* Le titre de métier : TAN en minuscules, gris moyen. La paire ne se
   fractionne jamais — les deux moitiés vivent dans la même ligne. */
/* Le titre de métier : Montserrat Alternates en italique, sous le nom.
   La paire ne se fractionne jamais — les deux moitiés tiennent dans
   la même ligne. */
.noro-metier {
	font-family: var(--wp--preset--font-family--corps);
	font-style: italic;
	font-weight: 400;
	font-size: var(--wp--preset--font-size--corps);
	letter-spacing: 0.06em;
	line-height: 1.5;
	color: var(--wp--preset--color--gris-moyen);
	margin-block: 4px var(--wp--preset--spacing--20);
}

/* -- Les séquences -------------------------------------------------
   Le chiffre n'apparaît que là où il y a un ordre. Ici, il est dans
   la liste, pas sur la section : la section énonce, la liste avance.

   Les colonnes sont posées en grille et non par la largeur des
   caractères : Axicode n'est pas une chasse fixe — ses avances vont
   de 304 à 1300 unités, et le chiffre 1 est plus étroit que les
   autres. Sans grille, les numéros décaleraient.
   -------------------------------------------------------------------- */

.noro-sequence {
	list-style: none;
	margin: var(--wp--preset--spacing--40) 0 0;
	padding: 0;
	display: grid;
	gap: var(--wp--preset--spacing--30);
}

.noro-sequence li {
	display: grid;
	grid-template-columns: 3.25rem 1fr;
	column-gap: var(--wp--preset--spacing--30);
	align-items: baseline;
	border-block-start: 1px solid var(--wp--preset--color--grege);
	padding-block-start: var(--wp--preset--spacing--20);
}

.noro-sequence__n {
	font-family: var(--wp--preset--font-family--releve);
	font-size: var(--wp--preset--font-size--releve);
	letter-spacing: 0.1em;
	color: var(--wp--preset--color--gris-moyen);
	font-variant-numeric: tabular-nums;
}

.noro-sequence__nom {
	color: var(--wp--preset--color--encre);
	font-weight: 700;
	letter-spacing: 0.06em;
}

.noro-sequence p { margin: 6px 0 0; }

/* Trois paroles dans une bande : le chemin. */

.noro-bande--triade .noro-bande__grille {
	column-gap: var(--wp--preset--spacing--50);
	align-items: start;
}

.noro-bande--triade .noro-bande__parole { padding-inline: 0; }
.noro-bande--triade .noro-bande__parole:nth-child(1) { grid-column: 1 / span 4; padding-inline-start: var(--noro-retrait); }
.noro-bande--triade .noro-bande__parole:nth-child(2) { grid-column: 5 / span 4; }
.noro-bande--triade .noro-bande__parole:nth-child(3) { grid-column: 9 / span 4; padding-inline-end: var(--noro-retrait); }

@media (max-width: 781px) {
	.noro-bande--triade .noro-bande__parole:nth-child(1),
	.noro-bande--triade .noro-bande__parole:nth-child(2),
	.noro-bande--triade .noro-bande__parole:nth-child(3) {
		grid-column: 1;
		padding-inline: var(--noro-marge);
	}
}

/* -- Le formulaire -------------------------------------------------
   Des traits, pas des boîtes. Le champ n'existe qu'au moment où on
   y écrit ; le reste du temps il n'est qu'une ligne de grège.
   -------------------------------------------------------------------- */

.noro-formulaire { max-width: 34rem; }

.noro-formulaire__leurre {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.noro-formulaire__paire {
	display: grid;
	grid-template-columns: 1fr 1fr;
	column-gap: var(--wp--preset--spacing--40);
}

@media (max-width: 600px) {
	.noro-formulaire__paire { grid-template-columns: 1fr; }
}

.noro-champ { margin-block: 0 var(--wp--preset--spacing--40); }

.noro-champ label {
	display: block;
	margin-block-end: 8px;
	font-family: var(--wp--preset--font-family--appel);
	font-weight: 300;
	font-size: var(--wp--preset--font-size--releve);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--wp--preset--color--gris-moyen);
}

.noro-champ input,
.noro-champ textarea {
	width: 100%;
	background: none;
	border: 0;
	border-block-end: 1px solid var(--wp--preset--color--grege);
	border-radius: 0;
	padding: 8px 0;
	font-family: var(--wp--preset--font-family--corps);
	font-size: var(--wp--preset--font-size--corps);
	font-weight: 300;
	color: var(--wp--preset--color--encre);
	transition: border-color 240ms ease;
}

.noro-champ textarea { resize: vertical; }

.noro-champ input:focus,
.noro-champ textarea:focus {
	outline: none;
	border-block-end-color: var(--wp--preset--color--encre);
}

.noro-champ--envoi { margin-block-start: var(--wp--preset--spacing--30); }

.noro-formulaire__mot {
	border-inline-start: 1px solid var(--wp--preset--color--or-revele);
	padding-inline-start: var(--wp--preset--spacing--30);
	margin-block-end: var(--wp--preset--spacing--40);
	color: var(--wp--preset--color--encre);
}

.noro-formulaire__mot--mal { border-inline-start-color: var(--wp--preset--color--gris-moyen); }

.noro-formulaire__note {
	margin-block-start: var(--wp--preset--spacing--30);
	font-family: var(--wp--preset--font-family--appel);
	font-weight: 300;
	font-size: var(--wp--preset--font-size--releve);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--wp--preset--color--gris-moyen);
}

.noro-formulaire__note a { color: var(--wp--preset--color--gris-moyen); text-decoration: underline; text-underline-offset: 4px; }

/* -- La page de texte ----------------------------------------------
   Les pages légales et tout texte long hors Carnet. Le H2 du système
   est en TAN, minuscules forcées : il rendrait « 1. l'éditeur du site ».
   Ici il redevient sobre — Montserrat, casse respectée, numéroté.
   -------------------------------------------------------------------- */

.noro-texte {
	padding-block: var(--noro-tete-h) var(--wp--preset--spacing--70);
}

.noro-texte__corps {
	max-width: 40rem;
	margin-inline: auto;
	padding-inline: var(--noro-marge);
}

.noro-texte h1 { margin-block: 0 var(--wp--preset--spacing--40); }

.noro-texte h2 {
	font-family: var(--wp--preset--font-family--corps);
	font-size: var(--wp--preset--font-size--sous-titre);
	font-weight: 500;
	text-transform: none;
	letter-spacing: 0.06em;
	line-height: 1.4;
	color: var(--wp--preset--color--encre);
	margin-block: var(--wp--preset--spacing--60) var(--wp--preset--spacing--20);
}

.noro-texte p { margin-block: 0 var(--wp--preset--spacing--30); }

.noro-texte ul {
	margin-block: 0 var(--wp--preset--spacing--30);
	padding-inline-start: 1.1rem;
}

.noro-texte li { margin-block-end: 10px; }

.noro-texte a { color: var(--wp--preset--color--encre); text-decoration: underline; text-underline-offset: 4px; }

.noro-texte__date {
	margin-block-start: var(--wp--preset--spacing--50);
	padding-block-start: var(--wp--preset--spacing--20);
	border-block-start: 1px solid var(--wp--preset--color--grege);
	font-size: var(--wp--preset--font-size--legende);
	color: var(--wp--preset--color--gris-moyen);
}

/* -- Le repère de section ---------------------------------------- */

/* Un titre posé directement dans une bande — « Les fondatrices »,
   « Le chemin » — ne passe pas par la grille et n'hérite donc d'aucun
   retrait. Il faut le lui donner, sinon il colle au bord. */
.noro-bande > .wp-block-heading,
.noro-bande > .noro-bande__titre { padding-inline: var(--noro-retrait); }

.noro-bande__titre { margin-block-end: var(--wp--preset--spacing--30); }

/* -- Mobile ------------------------------------------------------- */

@media (max-width: 781px) {
	.noro-bande__grille { grid-template-columns: 1fr; }

	/* En pile, le titre passe toujours au-dessus de l'image, y compris
	   dans les bandes inversées où la matière vient d'abord au balisage. */
	.noro-bande__parole,
	.noro-bande--inverse .noro-bande__parole { order: 1; }
	.noro-bande__matiere,
	.noro-bande--inverse .noro-bande__matiere { order: 2; }

	.noro-bande__parole,
	.noro-bande--inverse .noro-bande__parole,
	.noro-bande--silence .noro-bande__parole {
		grid-column: 1;
		padding-inline: var(--noro-marge);
		max-width: none;
	}

	.noro-bande__matiere,
	.noro-bande--inverse .noro-bande__matiere,
	.noro-matiere--colonne,
	.noro-bande--inverse .noro-matiere--colonne {
		grid-column: 1;
		padding-inline: 0;
		justify-self: stretch;
	}

	/* En pile, la matière reprend une hauteur mesurée : étirée sur toute
	   la hauteur d'un texte long, elle deviendrait une colonne sans fin. */
	.noro-matiere--pleine,
	.noro-matiere--colonne {
		min-height: 0;
	}

	.noro-matiere__image img {
		height: clamp(260px, 62vw, 420px);
		object-fit: cover;
	}

	/* La matière va de bord à bord quand c'est une image. Quand c'est
	   du texte — une fiche, une liste d'entrées — il lui faut le même
	   retrait que la parole, sinon elle colle au bord de l'écran. */
	.noro-bande__matiere > :not(figure):not(.wp-block-image):not(.noro-matiere__image):not(.noro-trace) {
		padding-inline: var(--noro-marge);
	}

	.noro-bande > .wp-block-heading,
	.noro-bande > .noro-bande__titre { padding-inline: var(--noro-marge); }

	.noro-matiere--colonne { padding-inline: var(--noro-marge); }

	.noro-bande--affiche { min-height: auto; padding-block: var(--wp--preset--spacing--70); }
	.noro-bande--entree { padding-block-start: calc(var(--noro-tete-h) * 0.7); }
}

/* ---------------------------------------------------------------
   5. Le Relevé — les quatre formes
   Toutes en grille explicite. Axicode n'est pas une chasse fixe :
   ses avances vont de 304 à 1300 unités et le chiffre 1 est plus
   étroit que les autres. Sans grille, aucune colonne ne tomberait
   au même endroit.
   --------------------------------------------------------------- */

/* La face du Relevé : Axicode, et elle ne sert qu'ici — métadonnées
   d'articles et de pièces. La fiche de La Rencontre en est exclue :
   ce n'est ni un article ni une pièce. */
.noro-releve--tete,
.noro-releve--pied,
.noro-releve--piece,
.noro-releve--entree {
	font-family: var(--wp--preset--font-family--releve);
	font-size: var(--wp--preset--font-size--releve);
	text-transform: uppercase;
	letter-spacing: 0.1em;
}

.noro-releve--tete,
.noro-releve--pied,
.noro-releve--piece {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
	gap: 0 var(--wp--preset--spacing--40);
	margin-block: var(--wp--preset--spacing--40) 0;
	border-block-start: 1px solid var(--wp--preset--color--grege);
	padding-block-start: var(--wp--preset--spacing--20);
	flex-wrap: nowrap;
}

.noro-releve--tete > div,
.noro-releve--pied > div,
.noro-releve--piece > div { display: block; }

.noro-releve--tete dt,
.noro-releve--pied dt,
.noro-releve--piece dt { margin: 0 0 4px; color: var(--wp--preset--color--gris-moyen); }

.noro-releve--tete dd,
.noro-releve--pied dd,
.noro-releve--piece dd { margin: 0; color: var(--wp--preset--color--encre); }

.noro-releve--pied a { color: var(--wp--preset--color--encre); text-decoration: underline; text-underline-offset: 4px; }

/* La fiche de La Rencontre : libellés à gauche, valeurs à droite. */
/* La fiche de La Rencontre : Montserrat Alternates, pas Axicode. */
.noro-releve--fiche {
	font-family: var(--wp--preset--font-family--corps);
	letter-spacing: 0.06em;
	display: grid;
	gap: 0;
	margin: 0;
	border-block-start: 1px solid var(--wp--preset--color--grege);
	padding-block-start: 0;
	flex-wrap: nowrap;
}

.noro-releve--fiche > div {
	display: grid;
	grid-template-columns: 8.5rem 1fr;
	column-gap: var(--wp--preset--spacing--30);
	border-block-end: 1px solid var(--wp--preset--color--grege);
	padding-block: var(--wp--preset--spacing--20);
}

.noro-releve--fiche dt { color: var(--wp--preset--color--gris-moyen); margin: 0; }
.noro-releve--fiche dd { color: var(--wp--preset--color--encre); margin: 0; }

/* Le Relevé d'une entrée de liste : en ligne, sans filet. */
.noro-releve--entree {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--30);
	border: 0;
	padding: 0;
	margin: 0;
}

.noro-releve--entree > div { display: flex; gap: 8px; }
.noro-releve--entree dt { margin: 0; color: var(--wp--preset--color--gris-moyen); }
.noro-releve--entree dd { margin: 0; color: var(--wp--preset--color--encre); }

/* ---------------------------------------------------------------
   6. Le corps d'article
   Le seul endroit du site où l'on écrit long. La mesure se resserre,
   les intertitres descendent d'un cran : un article n'est pas une page.
   --------------------------------------------------------------- */

.noro-corps { max-width: 38rem; }

.noro-corps > p { margin-block: 0 var(--wp--preset--spacing--30); }

.noro-corps h2 {
	font-size: var(--wp--preset--font-size--titre-section);
	margin-block: var(--wp--preset--spacing--60) var(--wp--preset--spacing--20);
}

.noro-corps h3 {
	font-size: var(--wp--preset--font-size--titre-courant);
	margin-block: var(--wp--preset--spacing--50) var(--wp--preset--spacing--20);
}

.noro-corps blockquote {
	margin-block: var(--wp--preset--spacing--50);
	padding-inline-start: var(--wp--preset--spacing--40);
	border-inline-start: 1px solid var(--wp--preset--color--or-revele);
}

.noro-corps .noro-releve--pied { margin-block-start: var(--wp--preset--spacing--60); }

/* ---------------------------------------------------------------
   7. Les entrées du Carnet
   Une entrée par ligne. Pas de numéro d'ordre : la liste est classée
   par récence, et un chiffre y annoncerait une progression qui
   n'existe pas. Le N° du Relevé, lui, est une référence d'archive.
   --------------------------------------------------------------- */

.noro-entrees .wp-block-post-template {
	list-style: none;
	margin: var(--wp--preset--spacing--40) 0 0;
	padding: 0;
	display: grid;
	gap: 0;
}

.noro-entree {
	display: grid;
	grid-template-columns: 200px 1fr;
	column-gap: var(--wp--preset--spacing--40);
	align-items: start;
	border-block-start: 1px solid var(--wp--preset--color--grege);
	padding-block: var(--wp--preset--spacing--40);
}

.noro-entree__matiere img {
	width: 100%;
	height: 140px;
	object-fit: cover;
	display: block;
}

.noro-entree__parole > * { margin-block: 0 var(--wp--preset--spacing--20); }
.noro-entree__parole > *:last-child { margin-block-end: 0; }

.noro-entree .wp-block-post-title a { text-decoration: none; }
.noro-entree .wp-block-post-title a:hover { color: var(--wp--preset--color--gris-moyen); }

.noro-pagination {
	display: flex;
	gap: var(--wp--preset--spacing--30);
	margin-block-start: var(--wp--preset--spacing--50);
	font-family: var(--wp--preset--font-family--corps);
	font-weight: 400;
	font-size: var(--wp--preset--font-size--releve);
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.noro-pagination a { color: var(--wp--preset--color--gris-moyen); text-decoration: none; }
.noro-pagination a:hover { color: var(--wp--preset--color--encre); }
.noro-pagination .current { color: var(--wp--preset--color--encre); }

@media (max-width: 600px) {
	.noro-entree { grid-template-columns: 1fr; row-gap: var(--wp--preset--spacing--30); }
	.noro-entree__matiere img { height: 200px; }
}

/* ---------------------------------------------------------------
   8. Les Pièces
   Ici l'ordre s'inverse : la matière domine, la parole accompagne.
   Le récit se compose dans l'éditeur, donc la mise en page ne fixe
   qu'une chose — le texte reste étroit, les images vont aux bords.
   --------------------------------------------------------------- */

.noro-piece__seuil { padding-block: var(--noro-tete-h) var(--wp--preset--spacing--50); }

.noro-piece__matiere img {
	width: 100%;
	height: clamp(360px, 62vh, 720px);
	object-fit: cover;
	display: block;
}

.noro-piece__recit { padding-block: var(--wp--preset--spacing--70); }
.noro-piece__recit p { margin-block: 0 var(--wp--preset--spacing--30); }
.noro-piece__recit h2 { margin-block: var(--wp--preset--spacing--70) var(--wp--preset--spacing--20); }
.noro-piece__recit .wp-block-image { margin-block: var(--wp--preset--spacing--60); }
.noro-piece__recit .wp-block-image img { width: 100%; height: auto; display: block; }

/* Le retrait vit sur le conteneur et non sur la liste, sinon le message
   « aucune pièce » — qui n'est pas dans la liste — reste collé au bord. */
.noro-pieces > * { padding-inline: var(--noro-marge); }

.noro-pieces .wp-block-post-template {
	list-style: none;
	margin: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
	gap: var(--wp--preset--spacing--50);
}

.noro-piece-vignette img {
	width: 100%;
	height: clamp(240px, 26vw, 340px);
	object-fit: cover;
	display: block;
	margin-block-end: var(--wp--preset--spacing--30);
}

.noro-piece-vignette .wp-block-post-title { margin-block: 0 var(--wp--preset--spacing--20); }
.noro-piece-vignette .wp-block-post-title a { text-decoration: none; }
.noro-piece-vignette .noro-releve--piece { margin-block-start: 0; }



/* ---------------------------------------------------------------
   9. Les portes
   La sortie d'une 404. Pas de bande de seuil ici : on ne propose pas
   une rencontre à quelqu'un qui cherchait autre chose.
   --------------------------------------------------------------- */

.noro-portes {
	list-style: none;
	margin: var(--wp--preset--spacing--50) 0 0;
	padding: 0;
	display: grid;
	gap: 0;
	max-width: 22rem;
}

.noro-portes li { border-block-start: 1px solid var(--wp--preset--color--grege); }

.noro-portes a {
	display: block;
	padding-block: var(--wp--preset--spacing--20);
	font-family: var(--wp--preset--font-family--corps);
	font-size: var(--wp--preset--font-size--releve);
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: var(--wp--preset--color--gris-moyen);
	text-decoration: none;
	transition: color 240ms ease, padding-inline-start 240ms ease;
}

.noro-portes a:hover,
.noro-portes a:focus-visible {
	color: var(--wp--preset--color--encre);
	padding-inline-start: 10px;
}

@media (prefers-reduced-motion: reduce) {
	.noro-portes a { transition: none; }
	.noro-portes a:hover { padding-inline-start: 0; }
}

/* ---------------------------------------------------------------
   10. Les tracés
   Des lignes qui relèvent la matière : elles suivent un contour, elles
   ne décorent pas. Posées par-dessus la matière d'une bande, elles se
   dessinent une seule fois à l'entrée dans le cadre, sans retour.
   L'or est plat ici — c'est l'exception nommée du trait fin.
   --------------------------------------------------------------- */

.noro-trace {
	position: absolute;
	inset: 0;
	pointer-events: none;
	overflow: hidden;
	z-index: 2;
}

.noro-trace svg {
	position: absolute;
	inset-block: 0;
	height: 100%;
	width: auto;
	overflow: visible;
}

.noro-trace--pose-droite svg { inset-inline-end: 0; }
.noro-trace--pose-gauche svg { inset-inline-start: 0; }
.noro-trace--pose-centre svg { inset-inline-start: 50%; transform: translateX(-50%); }

.noro-trace--petite svg { height: 55%; inset-block-start: 22%; }
.noro-trace--moyenne svg { height: 80%; inset-block-start: 10%; }
.noro-trace--grande svg { height: 120%; inset-block-start: -10%; }

.noro-trace path {
	fill: none;
	stroke: var(--wp--preset--color--or-revele);
	stroke-width: 1;
	vector-effect: non-scaling-stroke;
	stroke-linecap: round;
	stroke-dasharray: 4000;
	stroke-dashoffset: 4000;
}

/* La voûte porte l'ossature : son trait est un peu plus présent. */
.noro-trace--voute path { stroke-width: 1.2; }
.noro-trace--eventail path { stroke: var(--wp--preset--color--lin); }

.noro-trace.est-visible path {
	animation: noro-tracer 2600ms cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}

/* Les tracés d'un même motif se dessinent en cascade, pas d'un bloc. */
.noro-trace.est-visible path:nth-child(2) { animation-delay: 120ms; }
.noro-trace.est-visible path:nth-child(3) { animation-delay: 240ms; }
.noro-trace.est-visible path:nth-child(4) { animation-delay: 360ms; }
.noro-trace.est-visible path:nth-child(5) { animation-delay: 480ms; }
.noro-trace.est-visible path:nth-child(n+6) { animation-delay: 600ms; }

@keyframes noro-tracer {
	to { stroke-dashoffset: 0; }
}

/* La matière porte les tracés : elle doit donc être un repère. */
.noro-bande__matiere { position: relative; }

@media (max-width: 781px) {
	.noro-trace--grande svg { height: 90%; inset-block-start: 5%; }
}

/* ---------------------------------------------------------------
   10b. Le seuil
   --------------------------------------------------------------- */

.noro-seuil__phrase {
	font-family: var(--wp--preset--font-family--dramatique);
	font-size: var(--wp--preset--font-size--titre-section);
	font-weight: 400;
	letter-spacing: 0.1em;
	line-height: 1.18;
	color: var(--wp--preset--color--gris-moyen);
	margin: 0;
}

.noro-seuil__ligne {
	font-family: var(--wp--preset--font-family--sous-titre);
	font-size: var(--wp--preset--font-size--sous-titre);
	text-transform: lowercase;
	letter-spacing: 0.2em;
	line-height: 1.6;
	color: var(--wp--preset--color--or-revele);
	margin: var(--wp--preset--spacing--20) 0 0;
}

/* ---------------------------------------------------------------
   10c. Le pied
   --------------------------------------------------------------- */

.noro-pied {
	border-block-start: 1px solid var(--wp--preset--color--grege);
	padding: var(--wp--preset--spacing--60) var(--noro-marge) var(--wp--preset--spacing--40);
}

.noro-pied__corps {
	display: grid;
	grid-template-columns: 1.8fr 1fr 1fr 1fr;
	gap: var(--wp--preset--spacing--50);
	align-items: start;
}

/* Le wordmark du pied porte trois niveaux — noro, « Atelier de Marque »
   en Alamanda, et la signature « L'Art de l'Exceptionnel ». Ce dernier
   niveau ne fait que 8,6 % de la hauteur du bloc : à la largeur d'avant,
   il tombait sous les 12 px et cessait d'être un mot pour devenir une
   texture. D'où l'élargissement. */
.noro-pied__wordmark { display: block; width: clamp(240px, 26vw, 360px); }
.noro-pied__wordmark svg { display: block; width: 100%; height: auto; }

.noro-pied__mention {
	display: block;
	margin-block-start: 8px;
	font-family: var(--wp--preset--font-family--corps);
	font-weight: 400;
	font-size: var(--wp--preset--font-size--releve);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--wp--preset--color--gris-moyen);
}

.noro-pied__marque { align-self: start; }
.noro-pied__colonne { min-width: 0; }

.noro-pied__titre {
	margin: 0 0 var(--wp--preset--spacing--20);
	font-family: var(--wp--preset--font-family--corps);
	font-weight: 700;
	font-size: var(--wp--preset--font-size--releve);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--wp--preset--color--gris-moyen);
}

.noro-pied__liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }

.noro-pied__liste a,
.noro-pied__liste li {
	font-size: var(--wp--preset--font-size--legende);
	letter-spacing: 0.06em;
	color: var(--wp--preset--color--encre);
	text-decoration: none;
}

.noro-pied__liste a:hover { color: var(--wp--preset--color--gris-moyen); }

.noro-pied__mentions {
	margin: var(--wp--preset--spacing--50) 0 0;
	padding-block-start: var(--wp--preset--spacing--20);
	border-block-start: 1px solid var(--wp--preset--color--grege);
	font-family: var(--wp--preset--font-family--appel);
	font-weight: 300;
	font-size: var(--wp--preset--font-size--releve);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--wp--preset--color--gris-moyen);
}

@media (max-width: 781px) {
	.noro-pied__corps { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 480px) {
	.noro-pied__corps { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------
   12. Les textes d'août 2026 — quatre pièces nouvelles
   Le surtitre, l'intro d'une bande titrée, les questions fréquentes,
   la grille titrée des Pièces. Rien ici ne crée de face : tout se
   règle dans les six déjà déclarées.
   --------------------------------------------------------------- */

/* Le surtitre : la ligne posée au-dessus d'un H1 — le métier nommé,
   en petites capitales de corps, gris moyen. Il précède, il ne
   titre pas. Montserrat, jamais Axicode : le Relevé garde sa face. */
/* Le surtitre en DM Sans Light : au-dessus d'un H1 en Sought et d'un
   H5 en TAN, une troisième face à fort caractère étouffait l'ensemble.
   DM Sans ne dispute rien — elle situe, elle ne titre pas.

   Réglée en 300 à 0,05 em, elle devient identique aux étiquettes de
   champ et au copyright : un seul registre d'étiquette pour tout le
   site, au lieu de deux. Le 700 reste au bouton, qui appelle. */
.noro-surtitre {
	font-family: var(--wp--preset--font-family--appel);
	font-weight: 300;
	font-size: var(--wp--preset--font-size--releve);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	line-height: 1.6;
	color: var(--wp--preset--color--gris-moyen);
	margin-block: 0 var(--wp--preset--spacing--30);
}

/* L'intro d'une bande titrée — « Les fondatrices » ouvre par une
   amorce et une phrase avant la paire. Même retrait que le titre,
   même largeur qu'une parole. */
.noro-bande > .noro-bande__intro {
	padding-inline: var(--noro-retrait);
	max-width: calc( var(--noro-retrait) + 42rem );
	margin-block-end: var(--wp--preset--spacing--50);
}

.noro-bande > .noro-bande__intro > p { margin-block: 0; }

/* Les questions fréquentes : un filet, la question en gras, la
   réponse en corps. Même construction que la séquence, sans numéro —
   une question n'a pas d'ordre. */
.noro-questions {
	margin: var(--wp--preset--spacing--40) 0 0;
	padding: 0;
	display: grid;
	gap: var(--wp--preset--spacing--30);
}

.noro-question {
	border-block-start: 1px solid var(--wp--preset--color--grege);
	padding-block-start: var(--wp--preset--spacing--20);
}

.noro-question dt {
	font-weight: 700;
	letter-spacing: 0.06em;
	color: var(--wp--preset--color--encre);
	margin: 0 0 6px;
}

.noro-question dd { margin: 0; }

/* La grille titrée des Pièces : le titre et la grille se calent sur
   la même feuille. Les titres de vignette passent en H3 — le H2 est
   « Projets choisis » — mais gardent la face du H2 : TAN, en
   bas-de-casse, espacée. */
.noro-bande--pieces .noro-pieces > * { padding-inline: var(--noro-retrait); }

.noro-piece-vignette .wp-block-post-title {
	font-family: var(--wp--preset--font-family--sous-titre);
	font-weight: 400;
	text-transform: lowercase;
	letter-spacing: 0.2em;
	line-height: 1.5;
}

.noro-piece-vignette__appel { margin-block: var(--wp--preset--spacing--20) 0; }

/* ---------------------------------------------------------------
   11. Plancher de qualité
   --------------------------------------------------------------- */

:where(a, button, input, select, textarea):focus-visible {
	outline: 1px solid var(--wp--preset--color--encre);
	outline-offset: 3px;
}

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

	.noro-trace path { stroke-dashoffset: 0; animation: none; }
}

/* ---------------------------------------------------------------------
 * L'ÉTABLI — la surface où la matière est posée
 * ------------------------------------------------------------------ */

/* Une composition sans parole, entre deux bandes qui parlent. Tenue par
   la grille : douze colonnes, dix rangs, et chaque image posée sur des
   coordonnées nommées. Les chevauchements sont décidés un par un — c'est
   ce qui sépare une composition d'un collage, et ce qui la rend
   compatible avec la discipline du reste du site. */
.noro-etabli {
	inline-size: 100%;
	padding-block: var(--wp--preset--spacing--70);
	padding-inline: var(--noro-retrait);
	overflow: hidden;
}

.noro-etabli__grille {
	position: relative;
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	grid-template-rows: repeat(10, 1fr);
	aspect-ratio: 16 / 10;
	gap: 0;
	max-inline-size: var(--noro-feuille);
	margin-inline: auto;
}

/* Le fond n'est pas une photographie : c'est une trame. Il porte le
   grain de la maison sans réclamer le regard, et il reste sous tout le
   reste. */
.noro-etabli__fond {
	position: absolute;
	inset: 0;
	z-index: 0;
	opacity: 0.28;
	/* Cette valeur est reprise par la règle d'animation plus bas :
	   modifier l'une sans l'autre ferait clignoter le fond à l'arrivée. */
}

.noro-etabli__fond img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	display: block;
}

.noro-etabli__piece {
	margin: 0;
	overflow: hidden;
	background-color: var(--wp--preset--color--grege);
}

.noro-etabli__piece img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	display: block;
}

/* Le blanc laiteux entre les pièces : c'est lui qui fait tenir la
   composition. Sans cette réserve, les images se touchent et le
   chevauchement devient une bouillie. */
.noro-etabli__piece {
	outline: var(--wp--preset--spacing--30) solid var(--wp--preset--color--blanc-laiteux);
	outline-offset: calc(var(--wp--preset--spacing--30) * -1);
}

@media (max-width: 781px) {
	/* La composition tombe. Un chevauchement sur 380 px de large n'est
	   plus une composition, c'est un empilement illisible. Trois images
	   seulement, posées à plat, et le fond disparaît. */
	.noro-etabli {
		padding-block: var(--wp--preset--spacing--60);
	}

	.noro-etabli__grille {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		grid-template-rows: auto auto;
		aspect-ratio: auto;
		gap: var(--wp--preset--spacing--30);
	}

	.noro-etabli__fond {
		display: none;
	}

	.noro-etabli__piece {
		display: none;
		outline: none;
	}

	.noro-etabli__piece.est-retenue {
		display: block;
		grid-column: auto !important;
		grid-row: auto !important;
		aspect-ratio: 3 / 4;
	}

	/* La première tient la largeur : elle donne le ton, les deux autres
	   la commentent. Elle reste en portrait — les photographies le sont
	   toutes, et un cadre paysage en pleine largeur les amputerait. */
	.noro-etabli__piece.est-premiere {
		grid-column: 1 / -1 !important;
		aspect-ratio: 4 / 5;
	}
}

@media (prefers-reduced-motion: reduce) {
	.noro-etabli__piece { transition: none; }
}

/* L'aveu du pied : la maison dit ce qu'elle emploie. Ni note en bas de
   page ni proclamation — le registre d'étiquette, comme le copyright
   qu'il précède, mais en encre plutôt qu'en gris : ce n'est pas une
   mention légale, c'est une position. */
.noro-pied__aveu {
	font-family: var(--wp--preset--font-family--corps);
	font-size: var(--wp--preset--font-size--legende);
	line-height: 1.6;
	color: var(--wp--preset--color--encre);
	max-inline-size: 46ch;
	/* Le même écart que celui qui sépare les colonnes du pied. En mobile
	   elles s'empilent et l'aveu venait se coller à la dernière ligne de
	   « Contacter l'atelier » : il devenait une quatrième coordonnée au
	   lieu d'une position. */
	margin-block: var(--wp--preset--spacing--50) var(--wp--preset--spacing--30);
}

/* ---------------------------------------------------------------------
 * LA MATIÈRE SE POSE
 * ------------------------------------------------------------------ */

/* Tout ce qui suit est conditionné à la classe « noro-anime », que le
   script pose sur la page à sa première ligne utile. Sans script, rien
   n'est masqué et le site s'affiche entier. C'est la leçon d'août : une
   dégradation doit retirer l'ornement, jamais le contenu. */

.noro-anime .noro-matiere__image,
.noro-anime .noro-etabli__piece,
.noro-anime .noro-etabli__fond {
	opacity: 0;
	transform: translate3d(0, 16px, 0);
	/* Mille cent millisecondes, et une courbe qui décélère longtemps :
	   l'image ne s'arrête pas, elle se dépose. Le retard est nul par
	   défaut ; seul l'Établi en pose un, pièce par pièce. */
	transition:
		opacity 1100ms cubic-bezier(0.22, 0.61, 0.36, 1) var(--noro-retard, 0ms),
		transform 1100ms cubic-bezier(0.22, 0.61, 0.36, 1) var(--noro-retard, 0ms);
	will-change: opacity, transform;
}

.noro-anime .noro-matiere__image.est-posee,
.noro-anime .noro-etabli__piece.est-posee,
.noro-anime .noro-etabli__fond.est-posee {
	opacity: 1;
	transform: none;
	will-change: auto;
}

/* Le fond de l'Établi se lève avant ses pièces, et plus lentement : il
   installe la table, elles s'y posent ensuite. */
.noro-anime .noro-etabli__fond {
	transform: translate3d(0, 24px, 0);
	transition-duration: 1600ms;
}

.noro-anime .noro-etabli__fond.est-posee {
	opacity: 0.28;
}

/* La dérive vit sur l'IMAGE, l'entrée sur son CADRE : deux éléments,
   deux propriétés `transform` distinctes, aucune dispute.

   L'échelle légèrement supérieure à 1 donne à l'image la marge dont la
   translation a besoin. Sans elle, la dérive découvrirait le vide en
   haut ou en bas du cadre. */
.noro-matiere__image img,
.noro-etabli__fond img {
	scale: 1.06;
	transform: translate3d(0, 0, 0);
}

@media (prefers-reduced-motion: reduce) {
	.noro-anime .noro-matiere__image,
	.noro-anime .noro-etabli__piece,
	.noro-anime .noro-etabli__fond {
		opacity: 1;
		transform: none;
		transition: none;
	}

	.noro-anime .noro-etabli__fond { opacity: 0.28; }

	.noro-matiere__image img,
	.noro-etabli__fond img {
		scale: 1;
		transform: none;
	}
}

@media (max-width: 781px) {
	/* Pas de dérive en mobile : le défilement tactile et le parallaxe se
	   contrarient, et l'échelle ne servirait qu'à rogner l'image. */
	.noro-matiere__image img,
	.noro-etabli__fond img {
		scale: 1;
	}

	/* L'entrée reste, mais plus courte : sur un écran étroit, une image
	   occupe presque tout le champ et une seconde d'attente s'y voit. */
	.noro-anime .noro-matiere__image,
	.noro-anime .noro-etabli__piece {
		transform: translate3d(0, 12px, 0);
		transition-duration: 800ms;
	}
}