/* =========================================================================
   Novialoom — feuille du site.
   Les jetons (tokens.css) et les composants (nl-composants.css) viennent du design system, servis tels quels depuis
   design-system/ : ils sont chargés avant cette feuille. Ici ne restent que les écarts du site : mise en page,
   composants propres au site (démonstration, artefacts, convictions, livre…) et leur rattachement aux jetons.
   Règle : aucune couleur, police, rayon, ombre ni espacement en dur — tout passe par un jeton --nl-… .
   ========================================================================= */

/* Polices de repli aux métriques ajustées (CLS) : Arial / Liberation Sans / Arimo mis à l'échelle sur Jost, pour que le passage
   du repli à la police chargée ne déplace pas la mise en page. Valeurs mesurées par rendu dans Chromium le 2026-10-27 (largeur d'un
   texte français, Jost chargée contre Arial ; lettres d'un côté, chiffres de l'autre via unicode-range, car leur écart de chasse
   n'est pas le même) ; hauteurs lues sur Jost (ascent 1,07, descent 0,375, aucun interligne ajouté), divisées par size-adjust.
   Jost : 400, 400 italique, 500 (titres), 600. La famille « Jost Repli » est dans la pile des jetons (build_tokens.py). */
@font-face { font-family: "Jost Repli"; src: local("Arial"), local("ArialMT"), local("Liberation Sans"), local("Arimo"); font-weight: 400; size-adjust: 95.9%; ascent-override: 111.6%; descent-override: 39.1%; line-gap-override: 0%; }
@font-face { font-family: "Jost Repli"; src: local("Arial Italic"), local("Arial-ItalicMT"), local("Liberation Sans Italic"), local("Arimo Italic"); font-weight: 400; font-style: italic; size-adjust: 94.2%; ascent-override: 113.6%; descent-override: 39.8%; line-gap-override: 0%; }
@font-face { font-family: "Jost Repli"; src: local("Arial"), local("ArialMT"), local("Liberation Sans"), local("Arimo"); font-weight: 500; size-adjust: 99.6%; ascent-override: 107.4%; descent-override: 37.7%; line-gap-override: 0%; }
@font-face { font-family: "Jost Repli"; src: local("Arial Bold"), local("Arial-BoldMT"), local("Liberation Sans Bold"), local("Arimo Bold"); font-weight: 600; size-adjust: 94.6%; ascent-override: 113.1%; descent-override: 39.6%; line-gap-override: 0%; }
@font-face { font-family: "Jost Repli"; src: local("Arial"), local("ArialMT"), local("Liberation Sans"), local("Arimo"); font-weight: 400; size-adjust: 99.2%; ascent-override: 107.9%; descent-override: 37.8%; line-gap-override: 0%; unicode-range: U+0030-0039; }
@font-face { font-family: "Jost Repli"; src: local("Arial Italic"), local("Arial-ItalicMT"), local("Liberation Sans Italic"), local("Arimo Italic"); font-weight: 400; font-style: italic; size-adjust: 97.1%; ascent-override: 110.2%; descent-override: 38.6%; line-gap-override: 0%; unicode-range: U+0030-0039; }
@font-face { font-family: "Jost Repli"; src: local("Arial"), local("ArialMT"), local("Liberation Sans"), local("Arimo"); font-weight: 500; size-adjust: 103.8%; ascent-override: 103.1%; descent-override: 36.1%; line-gap-override: 0%; unicode-range: U+0030-0039; }
@font-face { font-family: "Jost Repli"; src: local("Arial Bold"), local("Arial-BoldMT"), local("Liberation Sans Bold"), local("Arimo Bold"); font-weight: 600; size-adjust: 105%; ascent-override: 101.9%; descent-override: 35.7%; line-gap-override: 0%; unicode-range: U+0030-0039; }

/* ---------- base ---------- */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: var(--nl-e7); }
img { max-width: 100%; display: block; }
p { margin: 0 0 1em; text-wrap: pretty; }
button { font: inherit; }
/* souligné au survol seulement pour les liens sans classe de composant (spécificité nulle : un composant l'emporte) */
:where(a) { text-decoration: none; }
:where(a):hover { text-decoration: underline; text-underline-offset: 3px; }
::selection { background: var(--nl-fil-de); color: var(--nl-fil-sur); }
/* un titre sans jeton de corps (.nl-h1 …) garde un interligne serré */
:where(.nl-display) { line-height: 1.2; }

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

.nl-skip-link {
  position: absolute; left: var(--nl-e3); top: calc(-1 * var(--nl-e7)); z-index: 100;
  padding: var(--nl-e-12) var(--nl-e4);
  background: var(--nl-fond-2); color: var(--nl-texte); border: 2px solid var(--nl-focus); border-radius: var(--nl-r-bouton);
  font-weight: 700; text-decoration: none;
  transition: top .15s ease;
}
.nl-skip-link:focus { top: var(--nl-e3); }

/* ---------- mise en page ---------- */
/* Les sections ne portent que leur marge haute : deux sections de même fond ne cumulent pas leurs marges.
   Un fond distinct (surface, nuit) et le dernier bloc avant le pied ferment la page par le bas. */
.nl-section { padding-block: var(--nl-rythme) 0; }
.nl-section--serre { padding-top: var(--nl-e5); }
.nl-section--surface, .nl-section--nuit { padding-bottom: var(--nl-rythme); }
/* Dernière section d'une page sans bloc de fin (contact) : l'espace avant le pied. */
.nl-section--fin { padding-bottom: var(--nl-rythme); }
.nl-section--surface + .nl-section--surface { padding-top: 0; border-top: 0; }
/* en-tête de page : sur l'écru, fermé par un trait d'encre (charte 2a : un trait relie les sections d'une page) */
.nl-section--entete { position: relative; padding-bottom: var(--nl-e6); border-bottom: 1.5px solid var(--nl-trait); }
.nl-section--entete > .nl-container { position: relative; z-index: 1; }
/* fond de page : l'écru, plein, sans motif (charte 2a ; l'ancien calque de points, de halos et de graphe est retiré) */
main > .nl-section:last-child { padding-bottom: var(--nl-rythme); }

/* ---------- grands écrans ----------
   Au-delà de 1 800 px de large, la page entière passe à l'échelle (zoom par paliers) : la mise en page reste celle d'un
   écran de 1 600 à 1 920 px, agrandie, au lieu d'une bande de 1 280 px au milieu d'un écran 4K à l'échelle 1. Les media
   queries lisent la largeur réelle ; les paliers sont choisis pour que la largeur « vue » reste entre 1 600 et 1 920 px. */
@media (min-width: 1800px) { html { zoom: 1.125; } }
@media (min-width: 2100px) { html { zoom: 1.25; } }
@media (min-width: 2400px) { html { zoom: 1.4; } }
@media (min-width: 2800px) { html { zoom: 1.6; } }
@media (min-width: 3200px) { html { zoom: 1.8; } }
@media (min-width: 3600px) { html { zoom: 2; } }
.nl-bordure-haut { border-top: 1px solid var(--nl-filet); }
.nl-bordure-bas { border-bottom: 1px solid var(--nl-filet); }

.nl-grid-2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--nl-e5); }
.nl-grid-2 > *, .nl-grid-3 > *, .nl-grid-4 > * { min-width: 0; }
.nl-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--nl-gouttiere); }
.nl-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--nl-gouttiere); }
/* proportions de colonne par classe, jamais en style en ligne : il l'emporterait sur la media query et casserait le mobile */
.nl-grid-2--etroit-droite { grid-template-columns: minmax(0, 1fr) 400px; }
.nl-grid-2--large-droite { grid-template-columns: minmax(0, 1fr) 440px; }
.nl-grid-2--deroule { grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.65fr); }
.nl-grid-2--couverture { grid-template-columns: 300px minmax(0, 1fr); }
@media (max-width: 960px) {
  .nl-grid-3, .nl-grid-4 { grid-template-columns: minmax(0, 1fr); }
  .nl-grid-2, .nl-grid-2--etroit-droite, .nl-grid-2--large-droite, .nl-grid-2--deroule, .nl-grid-2--couverture { grid-template-columns: minmax(0, 1fr); gap: var(--nl-e4); }
}

/* ---------- typographie (écarts au design system) ---------- */
.nl-chapo--grand { max-width: 60ch; margin-top: var(--nl-e4); font-size: var(--nl-t-22); line-height: 1.5; }
.nl-lede { font-size: var(--nl-t-18); color: var(--nl-texte-2); }
.nl-mono { font-size: var(--nl-t-12); color: var(--nl-texte-2); }
.nl-texte-editorial { max-width: 62ch; font-size: var(--nl-t-20); line-height: 1.58; color: var(--nl-texte); }
.nl-texte-editorial--attenue { color: var(--nl-texte-2); }
.nl-insec { white-space: nowrap; }

/* le surtitre prend la couleur de la rubrique (data-fil) ; le numéro de section la reprend */
.nl-surtitre { display: flex; margin: 0 0 var(--nl-e4); }
.nl-surtitre__numero { color: var(--nl-fil-texte); font-variant-numeric: tabular-nums; }
.nl-surtitre--role { margin-bottom: var(--nl-e3); }
.nl-portrait .nl-surtitre, .nl-encart-phrase .nl-surtitre, .nl-capture-encart .nl-surtitre { margin-bottom: 0; }

/* puce = filet + nœud, jamais un point rond seul */
.nl-puce { display: flex; gap: var(--nl-e3); align-items: baseline; font-size: var(--nl-t-18); color: var(--nl-texte-2); }
.nl-puce__marque { display: flex; align-items: center; gap: var(--nl-e1); flex: none; padding-top: var(--nl-e2); }
.nl-puce__marque span:first-child { width: 16px; height: 1px; background: var(--nl-fil-texte); }
.nl-puce__marque span:last-child { width: 6px; height: 6px; border-radius: 50%; background: var(--nl-fil-texte); }

.nl-tag {
  display: inline-block;
  padding: var(--nl-e1) var(--nl-e-12);
  border: 1px solid var(--nl-filet-fort); border-radius: var(--nl-r-pastille);
  font-size: var(--nl-t-14); color: var(--nl-texte);
}

/* repère de rubrique en tête de page : surtitre à tuile */
.nl-repere-fil { display: flex; align-items: center; gap: var(--nl-e3); margin-bottom: var(--nl-e4); }
.nl-repere-fil__trait { width: 36px; height: 2px; border-radius: var(--nl-r-pastille); background: var(--nl-fil-texte); }
.nl-repere-fil__noeud { width: 8px; height: 8px; border-radius: 50%; background: var(--nl-fil-texte); }

/* fil d'ariane */
.nl-fil-ariane { display: flex; align-items: center; flex-wrap: wrap; gap: var(--nl-e1) var(--nl-e2); margin-bottom: var(--nl-e5); font-size: var(--nl-t-14); color: var(--nl-texte-3); }
.nl-fil-ariane a { display: inline-flex; align-items: center; min-height: var(--nl-cible); color: var(--nl-texte-2); }
.nl-fil-ariane__actuel { color: var(--nl-texte); font-weight: 600; }

/* ---------- zone à valider : écart ---------- */
.nl-a-valider { white-space: normal; overflow-wrap: anywhere; }
.nl-a-valider.nl-bandeau__marque, .nl-catalogue__meta .nl-a-valider, .nl-liste-offres__meta-valeur .nl-a-valider { white-space: nowrap; }

/* ---------- boutons : écarts ---------- */
.nl-btn-group--ligne { margin-top: var(--nl-e4); }
.nl-form .nl-btn, .nl-capture-form .nl-btn { align-self: stretch; }
.nl-form > .nl-btn { align-self: flex-start; }

/* ---------- en-tête ---------- */
.nl-nav__link--lab .nl-tuile { margin-right: 0; }
@media (max-width: 900px) {
  .nl-nav--ouvert .nl-nav__link { padding-block: var(--nl-e-12); }
  .nl-nav--ouvert .nl-nav__cta { margin: var(--nl-e2) 0 0; }
}

/* ---------- cartes : écarts ---------- */
a.nl-carte-capacite { color: var(--nl-texte); }
a.nl-carte-capacite:hover { text-decoration: none; }
.nl-carte-capacite--etroite { max-width: 560px; }
.nl-carte-capacite--compacte { gap: var(--nl-e3); padding: var(--nl-e4); }
.nl-carte-capacite__numero { margin-left: var(--nl-e2); font-family: var(--nl-police-mono); font-size: var(--nl-t-12); color: var(--nl-texte-2); }
.nl-carte-capacite--compacte .nl-carte-capacite__titre { font-size: var(--nl-t-20); line-height: 1.3; }
/* question d'arbitrage : le verdict ferme la carte */
.nl-question__verdict { padding-top: var(--nl-e3); font-size: var(--nl-t-16); color: var(--nl-fil-texte); }

@media (max-width: 400px) {
  .nl-artefact { --artefact-pad: var(--nl-e-12); }
}

/* ---------- bandeau format ---------- */
.nl-offre-entete { align-items: end; margin-bottom: var(--nl-e6); }
.nl-bandeau__valeur--fil { color: var(--nl-fil-texte); }
.nl-bandeau__borne { font-family: var(--nl-police-mono); font-size: var(--nl-t-16); font-weight: 400; }
.nl-bandeau__valeur { overflow-wrap: anywhere; }

/* ---------- déroulé en étapes ---------- */
ol.nl-deroule { margin: 0; }
.nl-prose ol.nl-etapes { margin: 0 0 var(--nl-e3); padding-left: 0; }
.nl-prose .nl-etapes > li { margin-bottom: 0; color: var(--nl-texte-2); }
.nl-deroule__tete { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--nl-e1) var(--nl-e3); margin-bottom: var(--nl-e1); }
.nl-deroule__moment { font-size: var(--nl-t-12); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--nl-fil-texte); font-variant-numeric: tabular-nums; }
.nl-deroule__texte { max-width: 62ch; margin: 0; font-size: var(--nl-t-16); color: var(--nl-texte-2); }
.nl-deroule__tags { display: flex; flex-wrap: wrap; gap: var(--nl-e2); margin-top: var(--nl-e-12); }
/* mise en scène (initEtapes) : le HTML est l'état final ; le script repart de zéro et avance nœud par nœud */
.nl-etapes--anime > li::before { opacity: .4; }
.nl-etapes--anime > li::after { transform: scaleY(0); transform-origin: top; }
.nl-etapes--anime > li.nl-etape--atteinte::before { opacity: 1; }
.nl-etapes--anime > li.nl-etape--active::before { outline: 2px solid var(--nl-fil-de); outline-offset: 3px; }
@media (min-width: 901px) {
  .nl-etapes--ligne.nl-etapes--anime > li::after { transform: scaleX(0); transform-origin: left; }
}
@media (prefers-reduced-motion: no-preference) {
  .nl-etapes--anime > li::before { transition: opacity .25s ease .2s; }
  .nl-etapes--anime > li.nl-etape--relie::after { transform: none; transition: transform .45s ease-out; }
}
@media (prefers-reduced-motion: reduce) {
  .nl-etapes--anime > li.nl-etape--relie::after { transform: none; }
}

/* ---------- offres : liste d'une page de capacité ---------- */
.nl-liste-offres { border-top: 1px solid var(--nl-filet); }
.nl-liste-offres__item {
  display: grid; grid-template-columns: minmax(0, 1fr) 150px 230px 32px; gap: var(--nl-e4); align-items: center;
  padding: var(--nl-e4) var(--nl-e3);
  border-bottom: 1px solid var(--nl-filet);
  color: var(--nl-texte);
}
.nl-liste-offres__item:hover { background: var(--nl-surface-2); text-decoration: none; }
.nl-liste-offres__type { margin-bottom: var(--nl-e2); font-size: var(--nl-t-12); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--nl-fil-texte); }
.nl-liste-offres__titre { margin-bottom: var(--nl-e2); font: 500 var(--nl-t-28) / 1.2 var(--nl-police-display); letter-spacing: -0.02em; color: var(--nl-texte); }
.nl-liste-offres__texte { max-width: 60ch; margin: 0; font-size: var(--nl-t-18); color: var(--nl-texte-2); }
.nl-liste-offres__meta-label { margin-bottom: var(--nl-e1); font-size: var(--nl-t-12); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--nl-texte-2); }
.nl-liste-offres__meta-valeur { font: 500 var(--nl-t-20) / 1.3 var(--nl-police-display); color: var(--nl-texte); font-variant-numeric: tabular-nums; }
.nl-liste-offres__meta-valeur--fil { color: var(--nl-fil-texte); }
.nl-liste-offres__fleche { font-size: var(--nl-t-20); color: var(--nl-fil-texte); text-align: right; }
@media (max-width: 780px) {
  .nl-liste-offres__item { grid-template-columns: 1fr; gap: var(--nl-e2); padding-inline: 0; }
  .nl-liste-offres__fleche { display: none; }
}

/* ---------- formulaires ---------- */
.nl-form { display: flex; flex-direction: column; gap: var(--nl-e4); max-width: 640px; }
.nl-form__note { padding-top: var(--nl-e4); margin-top: var(--nl-e2); border-top: 1px solid var(--nl-filet); font-size: var(--nl-t-15); }
/* encart d'aimant : texte à gauche, formulaire à droite */
.nl-capture-encart__texte { display: flex; flex: 7 1 min(400px, 100%); flex-direction: column; gap: var(--nl-e3); min-width: 0; }
.nl-capture-encart__texte > * { margin: 0; }
.nl-capture-encart > .nl-capture-form { flex: 5 1 min(320px, 100%); }
.nl-capture-encart .nl-h2 { max-width: 20ch; }
.nl-capture-form .nl-btn--large { width: 100%; }

/* ---------- passerelle vers la rubrique suivante ---------- */
.nl-passerelle {
  display: grid; grid-template-columns: 1fr 300px; gap: var(--nl-e6); align-items: center;
  padding: var(--nl-e6);
  background: var(--nl-surface); border: 1px solid var(--nl-filet); border-top: 3px solid var(--nl-fil-de);
  border-radius: var(--nl-r-carte); box-shadow: var(--nl-ombre);
}
.nl-passerelle__fils { display: flex; align-items: center; gap: var(--nl-e-12); margin-bottom: var(--nl-e3); font-size: var(--nl-t-12); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.nl-passerelle__fils span:first-child, .nl-passerelle__fils span:last-child { color: var(--nl-fil-texte); }
.nl-passerelle__trait { width: 44px; height: 2px; border-radius: var(--nl-r-pastille); background: var(--nl-fil-de); }
.nl-passerelle__titre { max-width: 26ch; margin: 0 0 var(--nl-e3); font-size: var(--nl-t-h2-moyen); line-height: 1.15; }
.nl-passerelle__texte { max-width: 60ch; margin: 0; font-size: var(--nl-t-20); color: var(--nl-texte-2); }
@media (max-width: 780px) { .nl-passerelle { grid-template-columns: 1fr; padding: var(--nl-e4); gap: var(--nl-e4); } }

/* ---------- prose (contenu markdown) ---------- */
.nl-prose { max-width: 68ch; font-size: var(--nl-t-18); line-height: 1.65; }
/* artefact technique d'une page d'offre (ADR-0019) : entre deux blocs de prose, à leur largeur (même mesure en ch) */
.nl-offre-artefact { max-width: 68ch; margin: var(--nl-e5) 0 var(--nl-e6); font-size: var(--nl-t-18); }
.nl-prose h2 { margin: var(--nl-e6) 0 var(--nl-e3); font: 500 var(--nl-t-30) / 1.2 var(--nl-police-display); letter-spacing: -0.02em; color: var(--nl-texte); }
.nl-prose h2:first-child { margin-top: 0; }
.nl-prose h3 { margin: var(--nl-e5) 0 var(--nl-e2); font: 500 var(--nl-t-24) / 1.3 var(--nl-police-display); letter-spacing: -0.02em; color: var(--nl-texte); }
.nl-prose p { margin: 0 0 var(--nl-e3); color: var(--nl-texte-2); }
.nl-prose strong { color: var(--nl-texte); font-weight: 600; }
.nl-prose ul, .nl-prose ol { margin: 0 0 var(--nl-e3); padding-left: 1.3em; color: var(--nl-texte-2); }
.nl-prose li { margin-bottom: var(--nl-e2); }
.nl-prose blockquote { margin: var(--nl-e4) 0; padding-left: var(--nl-e4); border-left: 3px solid var(--nl-fil-de); font-size: var(--nl-t-18); font-style: italic; color: var(--nl-texte); }
.nl-prose code { font-family: var(--nl-police-mono); font-size: .92em; }
.nl-prose a { color: var(--nl-lien); text-decoration: underline; text-underline-offset: 3px; }
.nl-prose a:hover { color: var(--nl-lien-survol); }

/* ---------- photos et emplacements réservés ---------- */
/* portraits à l'échelle des illustrations (retour du 27/10 : « nos photos sont un peu grosses ») : 280 px au plus,
   160 px au téléphone, toujours au-dessus du nom ; l'accueil et la page équipe suivent la même règle */
.nl-photo--portrait, .nl-reserve--portrait, .nl-portrait .nl-photo, .nl-portrait .nl-reserve { max-width: 280px; }
@media (max-width: 640px) {
  .nl-photo--portrait, .nl-reserve--portrait, .nl-portrait .nl-photo, .nl-portrait .nl-reserve { max-width: 160px; }
}
.nl-photo--couverture, .nl-reserve--couverture { max-width: 300px; }
.nl-photo--4-5 { object-position: center top; }

/* ---------- blocs éditoriaux ---------- */
.nl-entete-section { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: var(--nl-e3) var(--nl-e5); margin-bottom: var(--nl-e5); }
.nl-entete-section > p { max-width: 40ch; margin: 0; font-size: var(--nl-t-18); color: var(--nl-texte-2); }
.nl-encart-phrase { --nl-fil-texte: var(--nl-fil-encre); }  /* fond clair dans tous les thèmes : le texte de rubrique y reste en version « encre » */
.nl-encart-phrase p { margin: 0 0 var(--nl-e3); font: inherit; }
.nl-encart-phrase .nl-surtitre + p { margin-top: var(--nl-e2); }
.nl-encart-phrase .nl-lien-fil { font-size: var(--nl-t-15); }
blockquote.nl-encart-phrase { max-width: 52ch; }

.nl-symptome { display: flex; gap: var(--nl-e4); padding: var(--nl-e4) 0; border-bottom: 1px solid var(--nl-filet); }
.nl-symptome:last-child { border-bottom: none; }
.nl-symptome__numero { flex: none; font: 500 var(--nl-t-13) / 1.6 var(--nl-police-display); color: var(--nl-fil-texte); }
.nl-symptome__titre { margin-bottom: var(--nl-e1); font: 500 var(--nl-t-24) / 1.25 var(--nl-police-display); color: var(--nl-texte); }
.nl-symptome p { max-width: 46ch; margin: 0; font-size: var(--nl-t-18); color: var(--nl-texte-2); }
.nl-garde { padding-top: var(--nl-e4); border-top: 1px solid var(--nl-filet); }
.nl-garde__titre { margin-bottom: var(--nl-e2); font: 500 var(--nl-t-24) / 1.25 var(--nl-police-display); color: var(--nl-texte); }
.nl-garde p { margin: 0; font-size: var(--nl-t-18); color: var(--nl-texte-2); }

.nl-studio-note { align-self: start; padding-top: var(--nl-e4); border-top: 1px solid var(--nl-filet); }
.nl-studio-note p { margin: 0; font-size: var(--nl-t-20); line-height: 1.5; color: var(--nl-texte); }
.nl-bio { max-width: 52ch; font-size: var(--nl-t-18); line-height: 1.6; color: var(--nl-texte-2); }
.nl-texte-societe { max-width: 66ch; margin: 0; font-size: var(--nl-t-18); color: var(--nl-texte-2); font-variant-numeric: tabular-nums; }

/* ---------- Lab : fiches projet ---------- */
/* en-tête du Lab avec son illustration (prompt P3), quand le fichier existe */
.nl-entete-illustree { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 460px); gap: var(--nl-e7); align-items: center; }
@media (max-width: 960px) { .nl-entete-illustree { grid-template-columns: minmax(0, 1fr); gap: var(--nl-e5); } }
.nl-entete-illustree .nl-illustration { max-width: 460px; }
/* Arbitrer : titre et encart à gauche, illustration à droite sur les deux lignes */
.nl-entete-arbitrer--illustree { grid-template-columns: minmax(0, 1fr) minmax(0, 460px); grid-template-areas: "texte image" "encart image"; align-items: start; row-gap: var(--nl-e5); }
.nl-entete-arbitrer--illustree > :first-child { grid-area: texte; }
.nl-entete-arbitrer--illustree > .nl-encart-phrase { grid-area: encart; }
.nl-entete-arbitrer--illustree > .nl-entete-arbitrer__image { grid-area: image; align-self: center; }
@media (max-width: 960px) {
  .nl-entete-arbitrer--illustree { grid-template-columns: minmax(0, 1fr); grid-template-areas: "texte" "encart" "image"; }
  .nl-entete-arbitrer__image { max-width: 420px; }
}
.nl-projets { display: flex; flex-direction: column; gap: var(--nl-e5); }
.nl-projet { scroll-margin-top: var(--nl-e7); }
.nl-projet__etat { display: flex; flex-direction: column; gap: var(--nl-e3); min-width: 0; }
.nl-projet__contenu { display: flex; flex-direction: column; gap: var(--nl-e5); min-width: 0; }
.nl-projet__colonnes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: var(--nl-e5); }
.nl-projet__nom { margin: 0; }
.nl-projet__meta a { color: var(--nl-fil-texte); font-weight: 600; }
.nl-projet .nl-artefact { max-width: 820px; }
.nl-projet .nl-btn { align-self: flex-start; }
.nl-legende-statuts { margin-top: var(--nl-e5); }
.nl-legende-statuts dd { margin: 0; }
.nl-projet .nl-ecran { max-width: 820px; }

/* capture d'écran d'un outil du Lab (macro `capture`) : l'écran réel, sa légende et la mention « données fictives » */
.nl-ecran { margin: 0; display: flex; flex-direction: column; gap: var(--nl-e2); min-width: 0; }
.nl-ecran__image { display: block; width: 100%; height: auto; border: 1px solid var(--nl-filet); border-radius: var(--nl-r-tuile); background: var(--nl-surface); box-shadow: var(--nl-ombre); }
.nl-ecran__lien { display: block; border-radius: var(--nl-r-tuile); }
.nl-ecran__lien:focus-visible { outline: 2px solid var(--nl-fil-texte); outline-offset: 4px; }
.nl-ecran__legende { font-size: var(--nl-t-14); line-height: 1.5; color: var(--nl-texte-2); }
.nl-ecran__mention { color: var(--nl-texte-3); }
.nl-ecran--large { margin-top: var(--nl-e6); }

/* page d'un banc du Lab (/lab/agent-lab/) : plans, étapes à capture, pile technique */
.nl-banc-statut { display: flex; flex-wrap: wrap; align-items: center; gap: var(--nl-e2) var(--nl-e3); margin: var(--nl-e5) 0 0; font-size: var(--nl-t-15); color: var(--nl-texte-2); }
.nl-banc-plans { list-style: none; margin: var(--nl-e5) 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--nl-gouttiere); }
@media (max-width: 1100px) { .nl-banc-plans { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .nl-banc-plans { grid-template-columns: minmax(0, 1fr); } }
.nl-banc-plan { display: flex; flex-direction: column; gap: var(--nl-e2); }
.nl-banc-plan__nom { margin: 0; font: 500 var(--nl-t-24) / 1.2 var(--nl-police-display); letter-spacing: -0.01em; color: var(--nl-texte); }
.nl-banc-plan__texte { margin: 0; font-size: var(--nl-t-17); line-height: 1.55; color: var(--nl-texte-2); }
.nl-banc-plan__briques { margin: auto 0 0; padding-top: var(--nl-e2); border-top: 1px solid var(--nl-filet); font: 400 var(--nl-t-13) / 1.6 var(--nl-police-mono); color: var(--nl-texte-2); }
.nl-banc-etapes { list-style: none; margin: var(--nl-e6) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--nl-e7); }
/* une étape : titre et texte côte à côte, la capture en pleine largeur dessous (un écran réduit de moitié ne se lit plus) */
.nl-banc-etape { display: flex; flex-direction: column; gap: var(--nl-e5); }
.nl-banc-etape__texte { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--nl-e3) var(--nl-e6); align-items: start; }
@media (max-width: 960px) { .nl-banc-etape__texte { grid-template-columns: minmax(0, 1fr); } }
.nl-banc-etape__tete { display: flex; flex-direction: column; gap: var(--nl-e2); min-width: 0; }
.nl-banc-etape__corps { display: flex; flex-direction: column; gap: var(--nl-e3); min-width: 0; }
.nl-banc-etape__corps p { margin: 0; max-width: 64ch; font-size: var(--nl-t-18); line-height: 1.6; color: var(--nl-texte-2); }
.nl-banc-etape__numero { margin: 0; font: 500 var(--nl-t-13) / 1.4 var(--nl-police-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--nl-fil-texte); }
.nl-banc-etape__titre { margin: 0; font-size: var(--nl-t-30); line-height: 1.2; color: var(--nl-texte); }
.nl-banc-liste { margin: 0; padding-left: 1.3em; display: flex; flex-direction: column; gap: var(--nl-e1); max-width: 64ch; font-size: var(--nl-t-17); line-height: 1.55; color: var(--nl-texte-2); }
.nl-banc-pile { margin: var(--nl-e4) 0 0; display: flex; flex-direction: column; gap: var(--nl-e3); font-size: var(--nl-t-17); line-height: 1.55; }
.nl-banc-pile dt { font-weight: 600; color: var(--nl-texte); }
.nl-banc-pile dd { margin: 0; color: var(--nl-texte-2); }
/* accueil : cartes du Lab sur la zone sombre */
.nl-carte-lab__nom a:hover { text-decoration: underline; }
.nl-carte-lab { height: 100%; }
.nl-carte-lab__meta > div { display: flex; flex-direction: column; gap: var(--nl-e1); }
.nl-carte-lab__meta dd a { font-weight: 600; }

/* ---------- convictions ---------- */
.nl-conviction {
  --numero: clamp(var(--nl-t-56), 12vw, calc(var(--nl-t-56) * 3));
  display: grid; grid-template-columns: calc(var(--numero) * 1.45) minmax(0, 1fr); gap: var(--nl-e5) var(--nl-e6);
  padding: var(--nl-e6) 0;
  border-top: 1px solid var(--nl-filet);
  scroll-margin-top: var(--nl-e7);
}
.nl-conviction:first-child { padding-top: 0; border-top: none; }
.nl-conviction__numero { padding-top: .06em; font: 500 var(--numero) / .8 var(--nl-police-display); letter-spacing: -0.04em; color: var(--nl-fil-texte); font-variant-numeric: tabular-nums; }
.nl-conviction__titre { margin: 0 0 var(--nl-e4); font-size: var(--nl-t-h2-moyen); line-height: 1.15; }
.nl-conviction p { max-width: 62ch; font-size: var(--nl-t-20); line-height: 1.58; color: var(--nl-texte-2); }
.nl-conviction__preuves { display: flex; flex-wrap: wrap; align-items: center; gap: var(--nl-e2) var(--nl-e3); margin-top: var(--nl-e4); }
.nl-conviction__preuves-label { margin-right: var(--nl-e2); font-size: var(--nl-t-12); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--nl-texte-2); }
@media (max-width: 780px) { .nl-conviction { grid-template-columns: 1fr; gap: var(--nl-e3); } }
.nl-etiquette {
  display: inline-flex; align-items: center; gap: var(--nl-e2); min-height: var(--nl-cible);
  padding: var(--nl-e2) var(--nl-e3);
  border: 1px solid var(--nl-filet-fort); border-radius: var(--nl-r-bouton);
  background: var(--nl-surface); color: var(--nl-texte);
  font-size: var(--nl-t-15); font-weight: 600; line-height: 1.3;
}
.nl-etiquette:hover { background: var(--nl-surface-2); border-color: var(--nl-fil-de); text-decoration: none; }

/* ---------- livre : liste des chapitres, le chapitre offert en évidence ---------- */
ol.nl-chapitres { margin: 0 0 var(--nl-e4); padding: 0; list-style: none; counter-reset: chapitre; }
.nl-prose .nl-chapitres > li, .nl-chapitres > li {
  display: grid; grid-template-columns: 3.2rem minmax(0, 1fr); align-items: baseline;
  margin: 0; padding: var(--nl-e-12) var(--nl-e3) var(--nl-e-12) 0;
  border-top: 1px solid var(--nl-filet);
  counter-increment: chapitre;
}
.nl-chapitres > li:last-child { border-bottom: 1px solid var(--nl-filet); }
.nl-chapitres > li::before {
  content: counter(chapitre, decimal-leading-zero);
  content: counter(chapitre, decimal-leading-zero) / "";
  font: 500 var(--nl-t-20) / 1.3 var(--nl-police-display); color: var(--nl-texte-2); font-variant-numeric: tabular-nums;
}
.nl-chapitres > li.nl-chapitre--offert { margin-left: calc(-1 * var(--nl-e3)); padding-left: var(--nl-e3); border-top-color: transparent; border-left: 3px solid var(--nl-fil-de); border-radius: var(--nl-r-tuile); background: var(--nl-surface-2); }
.nl-chapitres > li.nl-chapitre--offert::before { color: var(--nl-fil-texte); }
.nl-chapitres > li.nl-chapitre--offert + li { border-top-color: transparent; }

/* ---------- accueil (ADR-0015, maquette validée par PY le 27/10) ----------
   Premier écran : le surtitre et le titre à gauche, le chapo et les boutons à droite, alignés par le bas ; les quatre
   portes (composant nl-portes du design system) juste dessous. « Comment on travaille » : les étapes en colonne,
   l'illustration du fil à côté avec son nœud vert d'arrivée ; sous 900 px, une seule colonne, l'image sous les étapes. */
.nl-accueil { padding-top: var(--nl-e6); }
.nl-accueil__tete { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--nl-e5) var(--nl-e7); align-items: end; }
.nl-accueil__titre, .nl-accueil__chapo { display: flex; flex-direction: column; gap: var(--nl-e4); min-width: 0; }
.nl-accueil__titre > *, .nl-accueil__chapo > * { margin: 0; }
.nl-accueil__chapo .nl-chapo { font-size: var(--nl-t-22); }
.nl-accueil__portes { margin-top: var(--nl-e7); }
/* Au-dessus de 1 100 px, le fil d'encre continue après le nœud d'arrivée de Construire jusqu'au bord droit de sa
   colonne, et finit en pointe alignée sur le bord droit de l'image (demande de PY du 29/10). Même trait que le fil ;
   il passe sous l'anneau du nœud, comme le fil qui arrive. De 641 à 1 100 px et au téléphone, rien ne change. */
.nl-porte__pointe { display: none; }
@media (min-width: 1101px) {
  .nl-accueil__portes .nl-porte:last-child .nl-porte__noeud { z-index: 1; }
  .nl-accueil__portes .nl-porte:last-child .nl-porte__fil { display: block; right: 0; }
  .nl-porte__pointe { display: block; position: absolute; right: 0; top: 0; width: 10px; height: 16px; color: var(--nl-trait); }
}
.nl-methode { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: var(--nl-e6) var(--nl-e7); align-items: center; }
.nl-methode__texte { min-width: 0; }
.nl-methode__visuel { position: relative; min-width: 0; padding: 0 var(--nl-e3) var(--nl-e3) 0; }
.nl-methode__visuel .nl-illustration__image { border-radius: var(--nl-r-panneau); }
.nl-methode__noeud { position: absolute; right: 0; bottom: 0; width: 32px; height: 32px; border-radius: 50%; background: var(--nl-construire-de); box-shadow: 0 0 0 5px var(--nl-fond-2); }
@media (max-width: 900px) {
  .nl-accueil__tete, .nl-methode { grid-template-columns: minmax(0, 1fr); }
  .nl-methode__visuel { max-width: 560px; }
}
@media (max-width: 640px) {
  .nl-accueil__portes { margin-top: var(--nl-e6); }
  .nl-accueil__chapo .nl-chapo { font-size: var(--nl-t-18); }
  .nl-accueil__chapo .nl-btn-group { flex-direction: column; }
}

/* ---------- illustrations (charte 2a, planche 06 : risographie, à commander) ---------- */
.nl-illustration { margin: 0; display: flex; flex-direction: column; gap: var(--nl-e2); }
.nl-illustration picture { display: block; }
.nl-illustration__image { display: block; width: 100%; height: auto; border-radius: var(--nl-r-carte); }

/* ---------- M1 · schéma d'architecture agentique ----------
   Objet technique : jetons d'artefact, nuit dans tous les thèmes. Tracé (une fois) en CSS, seulement si le mouvement n'est pas réduit.
   La version large (schemaAgentiqueFond) n'est plus posée par l'accueil ; ses règles restent pour la macro. */
.nl-hero { position: relative; }
.nl-hero__fond { position: absolute; inset: 0; max-width: var(--nl-maxw); margin-inline: auto; z-index: 0; pointer-events: none; }
.nl-schema { margin: 0; color: var(--nl-artefact-discret); }
.nl-hero__fond .nl-schema { position: absolute; inset: 0; }
.nl-schema__svg { display: block; width: 100%; height: 100%; }
.nl-hero__fond .nl-schema__svg {
  opacity: .3;
  -webkit-mask-image: linear-gradient(90deg, rgb(0 0 0 / .35) 0, rgb(0 0 0 / .35) 44%, rgb(0 0 0) 72%);
  mask-image: linear-gradient(90deg, rgb(0 0 0 / .35) 0, rgb(0 0 0 / .35) 44%, rgb(0 0 0) 72%);
}
.nl-schema__trait, .nl-schema__pointe { fill: none; stroke: currentColor; stroke-width: 1.25; }
.nl-schema__trait--accent { stroke: var(--nl-artefact-invite); }
.nl-schema__fantome { opacity: .5; }
.nl-schema__nom { fill: var(--nl-artefact-texte); font-family: var(--nl-police-mono); font-size: var(--nl-t-12); letter-spacing: .08em; text-transform: uppercase; text-anchor: middle; }
.nl-schema__nom--debut { text-anchor: start; }
.nl-schema__nom--fin { text-anchor: end; }
.nl-schema__nom--annotation { fill: var(--nl-artefact-attente); }
.nl-schema__nom--titre { font-weight: 700; fill: var(--nl-artefact-fort); }
.nl-schema__nom--legende { fill: var(--nl-artefact-discret); }
.nl-schema__code { text-transform: none; letter-spacing: .02em; fill: var(--nl-artefact-ok); }
.nl-schema__legende { margin-top: var(--nl-e2); font-family: var(--nl-police-mono); font-size: var(--nl-t-12); letter-spacing: .14em; text-transform: uppercase; color: var(--nl-texte-3); }
.nl-hero__fond .nl-schema__legende { position: absolute; right: var(--nl-pad); bottom: var(--nl-e3); margin: 0; }
.nl-schema--vertical { max-width: 350px; margin: var(--nl-e5) auto 0; }
@media (max-width: 960px) { .nl-hero__fond { display: none; } }
@media (prefers-reduced-motion: no-preference) {
  .nl-schema__trait { animation: nl-schema-trace .45s cubic-bezier(.22, .7, .2, 1) backwards; }
  .nl-schema__trait[data-etape="2"] { animation-delay: .15s; }
  .nl-schema__trait[data-etape="3"] { animation-delay: .3s; }
  .nl-schema__trait[data-etape="4"] { animation-delay: .45s; }
  .nl-schema__nom, .nl-schema__pointe { animation: nl-schema-apparait .45s .45s backwards; }
}
@keyframes nl-schema-trace { from { stroke-dasharray: 1; stroke-dashoffset: 1; } to { stroke-dasharray: 1; stroke-dashoffset: 0; } }
@keyframes nl-schema-apparait { from { opacity: 0; } to { opacity: 1; } }

/* ---------- utilitaires ---------- */
.nl-c-texte { color: var(--nl-texte); }
.nl-c-texte-2 { color: var(--nl-texte-2); }
.nl-fs-16 { font-size: var(--nl-t-16); }
.nl-fs-18 { font-size: var(--nl-t-18); }
.nl-fs-20 { font-size: var(--nl-t-20); }
.nl-fs-24 { font-size: var(--nl-t-24); }
.nl-mt-e2 { margin-top: var(--nl-e2); }
.nl-mt-e3 { margin-top: var(--nl-e3); }
.nl-mt-e4 { margin-top: var(--nl-e4); }
.nl-mt-e5 { margin-top: var(--nl-e5); }
.nl-mb-e3 { margin-bottom: var(--nl-e3); }
.nl-mb-e4 { margin-bottom: var(--nl-e4); }
.nl-mb-e5 { margin-bottom: var(--nl-e5); }
.nl-my-e3 { margin: var(--nl-e3) 0; }
.nl-pt-e6 { padding-top: var(--nl-e6); }
.nl-m0 { margin: 0; }
.nl-pile { display: flex; flex-direction: column; gap: var(--nl-e-12); }
.nl-align-fin { align-items: end; }
.nl-align-debut { align-items: start; }
/* largeurs de colonne (ch) */
.nl-mw-17 { max-width: 17ch; }
.nl-mw-18 { max-width: 18ch; }
.nl-mw-20 { max-width: 20ch; }
.nl-mw-22 { max-width: 22ch; }
.nl-mw-24 { max-width: 24ch; }
.nl-mw-26 { max-width: 26ch; }
.nl-mw-60 { max-width: 60ch; }
.nl-mw-70 { max-width: 70ch; }

/* ---------- artefacts (pages d'offre, ADR-0019 ; Lab : une figure par fiche) ----------
   Le panneau (.nl-artefact__doc) vient du design system : il est nuit dans tous les thèmes, c'est un objet technique.
   Ici : la disposition des contenus (colonnes par container query), leurs couleurs (jetons d'artefact) et leur mise en scène.
   Tout est lisible sans JavaScript ; le mouvement est joué une fois, sauf en mouvement réduit. */
.nl-artefact { --artefact-pad: var(--nl-e3); container-type: inline-size; }
/* le balisage du site porte son indentation : les espaces ne comptent pas (les lignes qui doivent rester telles le déclarent : yaml, terminal, code) */
.nl-artefact__doc { flex: 1; padding: var(--artefact-pad); overflow-x: auto; line-height: 1.6; white-space: normal; }

/* contrat d'agent (YAML) */
.nl-yaml__code { display: block; white-space: pre; font: inherit; }
.nl-yaml__ligne--item .nl-yaml__code { padding-left: 2ch; }
.nl-yaml__cle { color: var(--nl-fil-clair); }
.nl-yaml__tiret { color: var(--nl-artefact-discret); }
.nl-yaml__val { color: var(--nl-artefact-texte); }
.nl-yaml__val--fort { color: var(--nl-artefact-fort); font-weight: 700; }
.nl-yaml__com { display: block; padding-left: 2ch; color: var(--nl-artefact-discret); }
.nl-yaml__ligne--item .nl-yaml__com { padding-left: 4ch; }
@container (min-width: 560px) {
  .nl-yaml__ligne { display: grid; grid-template-columns: 30ch minmax(0, 1fr); column-gap: 2ch; }
  .nl-yaml__com, .nl-yaml__ligne--item .nl-yaml__com { padding-left: 0; }
}

/* note d'arbitrage : l'option A est barrée d'un trait ; son motif reste lisible, non barré */
.nl-note__titre { margin: 0 0 var(--nl-e-12); color: var(--nl-artefact-attente); font-weight: 600; letter-spacing: .04em; }
.nl-note__question { margin: 0 0 var(--nl-e-12); }
.nl-note__etiq { color: var(--nl-artefact-discret); }
.nl-note__options { display: grid; row-gap: var(--nl-e-12); margin: 0; padding: 0; list-style: none; }
.nl-note__intitule { display: block; padding-left: 3ch; text-indent: -3ch; }
.nl-note__lettre { color: var(--nl-artefact-discret); font-weight: 700; }
.nl-note__verdict { display: block; padding-left: 3ch; color: var(--nl-artefact-ok); }
.nl-note__verdict::before { content: "✓ "; }
.nl-note__option--ecartee .nl-note__intitule { color: var(--nl-artefact-discret); text-decoration: line-through; text-decoration-thickness: 1.5px; text-decoration-color: var(--nl-artefact-non); }
.nl-note__option--ecartee .nl-note__verdict { color: var(--nl-artefact-non); }
.nl-note__option--ecartee .nl-note__verdict::before { content: "✕ "; }
.nl-note__decision { margin: var(--nl-e3) 0 0; padding-top: var(--nl-e-12); border-top: 1px solid var(--nl-artefact-bord); color: var(--nl-artefact-fort); font-weight: 700; }
.nl-note__decision .nl-note__etiq { font-weight: 400; }
@container (min-width: 680px) {
  .nl-note__option { display: grid; grid-template-columns: minmax(0, 40ch) minmax(0, 1fr); column-gap: 2ch; }
  .nl-note__verdict { padding-left: 0; }
}

/* journal des appels : la ligne de confirmation est le moment où l'humain intervient */
.nl-journal { margin: 0; padding: 0; list-style: none; }
.nl-journal__entree + .nl-journal__entree { margin-top: var(--nl-e-12); }
.nl-journal__appel, .nl-journal__confirmation { display: grid; grid-template-columns: 8ch minmax(0, 1fr) auto; column-gap: 1ch; }
.nl-journal__heure { grid-column: 1; grid-row: 1; color: var(--nl-artefact-discret); font-variant-numeric: tabular-nums; }
.nl-journal__agent { grid-column: 2; grid-row: 1; color: var(--nl-artefact-texte); }
.nl-journal__statut { grid-column: 3; grid-row: 1; color: var(--nl-artefact-ok); text-align: right; font-variant-numeric: tabular-nums; }
.nl-journal__requete { grid-column: 2 / 4; grid-row: 2; display: flex; flex-wrap: wrap; column-gap: 1ch; min-width: 0; overflow-wrap: anywhere; }
.nl-journal__methode { color: var(--nl-artefact-discret); }
.nl-journal__outil { color: var(--nl-fil-clair); }
.nl-journal__args { color: var(--nl-artefact-texte); }
.nl-journal__confirmation {
  align-items: baseline;
  margin: var(--nl-e2) calc(var(--artefact-pad) * -1) 0;
  padding: var(--nl-e2) var(--artefact-pad);
  border-left: 3px solid var(--nl-artefact-attente); border-radius: 0;
  background: var(--nl-artefact-attente-fond); color: var(--nl-artefact-attente);
}
.nl-journal__confirmation .nl-demo__cadenas-icone { grid-column: 1; align-self: center; color: var(--nl-artefact-attente); }
.nl-journal__confirmation-texte { grid-column: 2; }
.nl-journal__confirmation .nl-journal__statut { grid-row: auto; grid-column: 3; color: var(--nl-artefact-attente); }
@container (max-width: 279px) { .nl-journal__requete { grid-column: 1 / 4; } }
@container (min-width: 720px) {
  .nl-journal__entree + .nl-journal__entree { margin-top: var(--nl-e1); }
  .nl-journal__appel, .nl-journal__confirmation { grid-template-columns: 8ch 15ch 10ch 22ch minmax(0, 1fr) 3ch; column-gap: 2ch; }
  .nl-journal__requete { display: contents; }
  .nl-journal__methode, .nl-journal__outil, .nl-journal__args { grid-row: 1; }
  .nl-journal__methode { grid-column: 3; }
  .nl-journal__outil { grid-column: 4; }
  .nl-journal__args { grid-column: 5; }
  .nl-journal__appel .nl-journal__statut { grid-column: 6; }
  .nl-journal__confirmation-texte { grid-column: 2 / 6; }
  .nl-journal__confirmation .nl-journal__statut { grid-column: 6; }
}

/* terminal : sortie d'un outil ; les lignes se replient, rien ne défile */
.nl-terminal__ligne { white-space: pre-wrap; overflow-wrap: anywhere; }
.nl-terminal__ligne--commande { color: var(--nl-artefact-fort); }
.nl-terminal__ligne--suite { color: var(--nl-artefact-texte); }
.nl-terminal__ligne--vide { height: 1.6em; }
.nl-terminal__ligne--titre { color: var(--nl-fil-clair); font-weight: 700; }
.nl-terminal__ligne--champ { display: grid; grid-template-columns: 14ch minmax(0, 1fr); column-gap: 2ch; }
.nl-terminal__cle { color: var(--nl-artefact-discret); }
.nl-terminal__val { color: var(--nl-artefact-texte); }
.nl-terminal__ligne--sortie { margin-top: var(--nl-e2); color: var(--nl-artefact-ok); }
@container (max-width: 559px) {
  .nl-terminal__ligne--champ { grid-template-columns: minmax(0, 1fr); }
  .nl-terminal__val { padding-left: 2ch; }
}

/* flux : trait plein pour le premier lot livré, pointillé et « à venir » pour la suite */
.nl-flux { --flux-x: 5px; margin: 0; padding: 0; list-style: none; }
.nl-flux__etape { position: relative; padding: 0 0 var(--nl-e-12) var(--nl-e4); color: var(--nl-artefact-fort); }
.nl-flux__etape:last-child { padding-bottom: 0; }
.nl-flux__etape::before { content: ""; position: absolute; left: 0; top: calc(.8em - 5.5px); width: 11px; height: 11px; box-sizing: border-box; background: var(--nl-fil-clair); border: 1.5px solid var(--nl-fil-clair); }
.nl-flux__etape::after { content: ""; position: absolute; left: var(--flux-x); top: calc(.8em + 5.5px); bottom: calc(5.5px - .8em); border-left: 1.5px solid var(--nl-fil-clair); }
.nl-flux__etape:last-child::after { display: none; }
.nl-flux__etape--lien-avenir::after { border-left-style: dotted; border-left-width: 2px; }
.nl-flux__etape--avenir { color: var(--nl-artefact-texte); }
.nl-flux__etape--avenir::before { background: transparent; }
.nl-flux__statut { margin-left: 1ch; color: var(--nl-artefact-discret); font-size: var(--nl-t-12); letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }

/* résolution d'entités : trois écritures, une forme normalisée */
.nl-entites__variantes { display: grid; row-gap: var(--nl-e1); margin: 0; padding: 0; list-style: none; }
.nl-entites__variante { color: var(--nl-artefact-texte); }
.nl-entites__etape { margin: var(--nl-e-12) 0; color: var(--nl-artefact-discret); }
.nl-entites__resultat { margin: 0; }
.nl-entites__forme { color: var(--nl-fil-clair); font-weight: 700; }
.nl-entites__note { margin-left: 1ch; color: var(--nl-artefact-discret); }

/* architecture as code : le modèle, puis la vue qu'il produit (deux dispositions du même tracé) */
.nl-code { overflow-x: auto; padding-bottom: var(--nl-e1); }
.nl-code__ligne { white-space: pre; }
.nl-code__ligne--vide { height: 1.6em; }
.nl-code__mot { color: var(--nl-fil-clair); }
.nl-code__chaine { color: var(--nl-artefact-ok); }
.nl-vues { margin-top: var(--nl-e4); padding-top: var(--nl-e4); border-top: 1px solid var(--nl-artefact-bord); }
.nl-vue { display: block; width: 100%; height: auto; color: var(--nl-artefact-discret); }
.nl-vue--etroite { display: none; max-width: 330px; margin-inline: auto; }
.nl-vue .nl-schema__nom { font-size: var(--nl-t-13); }
.nl-vue .nl-vue__sous { font-size: var(--nl-t-12); letter-spacing: .02em; text-transform: none; fill: var(--nl-artefact-texte); }
@container (max-width: 779px) {
  .nl-vue--large { display: none; }
  .nl-vue--etroite { display: block; }
}
.nl-video { display: block; width: 100%; aspect-ratio: 16 / 9; border-radius: var(--nl-r-tuile); background: var(--nl-artefact-fond); }

/* mouvement des artefacts, joué une fois à l'entrée dans l'écran (nl.js) ; sans JavaScript ou en mouvement réduit, l'état final est affiché */
@media (prefers-reduced-motion: no-preference) {
  .nl-artefact--anime :is(.nl-yaml__ligne, .nl-note__titre, .nl-note__question, .nl-note__option, .nl-note__decision, .nl-journal__appel, .nl-journal__confirmation) { opacity: 0; transition: opacity .45s; }
  .nl-artefact--anime.nl-artefact--vu :is(.nl-yaml__ligne, .nl-note__titre, .nl-note__question, .nl-note__option, .nl-note__decision, .nl-journal__appel, .nl-journal__confirmation) { opacity: 1; }
  .nl-yaml__ligne:nth-child(2) { transition-delay: .08s; }
  .nl-yaml__ligne:nth-child(3) { transition-delay: .16s; }
  .nl-yaml__ligne:nth-child(4) { transition-delay: .24s; }
  .nl-yaml__ligne:nth-child(5) { transition-delay: .32s; }
  .nl-yaml__ligne:nth-child(6) { transition-delay: .4s; }
  .nl-yaml__ligne:nth-child(7) { transition-delay: .48s; }
  .nl-yaml__ligne:nth-child(8) { transition-delay: .56s; }
  .nl-yaml__ligne:nth-child(9) { transition-delay: .64s; }
  .nl-yaml__ligne:nth-child(10) { transition-delay: .72s; }
  .nl-artefact--anime .nl-note__question { transition-delay: .15s; }
  .nl-note__option:nth-child(1) { transition-delay: .3s; }
  .nl-note__option:nth-child(2) { transition-delay: .55s; }
  .nl-note__option:nth-child(3) { transition-delay: .8s; }
  .nl-artefact--anime .nl-note__decision { transition-delay: 1.7s; }
  .nl-artefact--anime .nl-note__option--ecartee .nl-note__intitule { text-decoration-color: transparent; transition: text-decoration-color .5s 1.05s; }
  .nl-artefact--anime.nl-artefact--vu .nl-note__option--ecartee .nl-note__intitule { text-decoration-color: var(--nl-artefact-non); }
  .nl-journal__entree:nth-child(2) .nl-journal__appel { transition-delay: .5s; }
  .nl-journal__entree:nth-child(3) .nl-journal__appel { transition-delay: 1s; }
  .nl-artefact--anime .nl-journal__confirmation { transition-delay: 1.7s; }

  .nl-artefact--anime:not(.nl-artefact--rejeu) .nl-terminal__ligne,
  .nl-artefact--anime .nl-flux__etape,
  .nl-artefact--anime :is(.nl-entites__variante, .nl-entites__etape, .nl-entites__resultat),
  .nl-artefact--anime .nl-code__ligne { opacity: 0; transition: opacity .35s; }
  .nl-artefact--anime.nl-artefact--vu:not(.nl-artefact--rejeu) .nl-terminal__ligne,
  .nl-artefact--anime.nl-artefact--vu .nl-flux__etape,
  .nl-artefact--anime.nl-artefact--vu :is(.nl-entites__variante, .nl-entites__etape, .nl-entites__resultat),
  .nl-artefact--anime.nl-artefact--vu .nl-code__ligne { opacity: 1; }
  .nl-terminal__ligne:nth-child(2), .nl-flux__etape:nth-child(2), .nl-entites__variante:nth-child(2), .nl-code__ligne:nth-child(2) { transition-delay: .1s; }
  .nl-terminal__ligne:nth-child(3), .nl-flux__etape:nth-child(3), .nl-entites__variante:nth-child(3), .nl-code__ligne:nth-child(3) { transition-delay: .2s; }
  .nl-terminal__ligne:nth-child(4), .nl-flux__etape:nth-child(4), .nl-code__ligne:nth-child(4) { transition-delay: .3s; }
  .nl-terminal__ligne:nth-child(5), .nl-flux__etape:nth-child(5), .nl-code__ligne:nth-child(5) { transition-delay: .4s; }
  .nl-terminal__ligne:nth-child(6), .nl-flux__etape:nth-child(6), .nl-code__ligne:nth-child(6) { transition-delay: .5s; }
  .nl-terminal__ligne:nth-child(7), .nl-flux__etape:nth-child(7), .nl-code__ligne:nth-child(7) { transition-delay: .6s; }
  .nl-terminal__ligne:nth-child(8), .nl-flux__etape:nth-child(8), .nl-code__ligne:nth-child(8) { transition-delay: .7s; }
  .nl-terminal__ligne:nth-child(n+9), .nl-code__ligne:nth-child(n+9) { transition-delay: .8s; }
  .nl-artefact--anime .nl-entites__etape { transition-delay: .5s; }
  .nl-artefact--anime .nl-entites__resultat { transition-delay: .9s; }
  /* la vue : les traits se tracent, puis les flèches et les noms apparaissent */
  .nl-artefact--anime .nl-vue .nl-schema__trait { animation: none; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .7s .4s cubic-bezier(.22, .7, .2, 1); }
  .nl-artefact--anime.nl-artefact--vu .nl-vue .nl-schema__trait { stroke-dashoffset: 0; }
  .nl-artefact--anime .nl-vue :is(.nl-schema__pointe, .nl-schema__nom) { animation: none; opacity: 0; transition: opacity .4s .9s; }
  .nl-artefact--anime.nl-artefact--vu .nl-vue :is(.nl-schema__pointe, .nl-schema__nom) { opacity: 1; }
  /* relecture de terminal : le script révèle les lignes une à une ; le texte reste dans le HTML */
  .nl-rejeu--en-cours .nl-terminal__ligne { opacity: 0; transition: opacity .15s; }
  .nl-rejeu--en-cours .nl-terminal__ligne--vue { opacity: 1; }
}

/* ---------- M2 · démonstration « 118 opérations → 15 outils » ----------
   L'état par défaut est l'état final (le plan) : lisible sans JavaScript et en mouvement réduit.
   nl.js ajoute .nl-demo--anime et pilote data-etape (0 à 5) ; tout le mouvement est en transitions CSS.
   La colonne d'étapes suit le thème de la page ; la scène est un objet technique : panneau nuit dans tous les thèmes,
   jetons d'artefact. Formes des effets : carré creux = lecture, carré plein = création, losange = modification ou
   suppression, triangle = action (la couleur ne porte jamais seule l'information). */
.nl-demo__pilote { margin-top: var(--nl-e5); }
.nl-demo__marqueurs { display: none; }
.nl-demo__stage { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: var(--nl-e6); align-items: start; }
.nl-demo__rail { margin: 0; padding: 0; list-style: none; }
.nl-demo__etape { padding: var(--nl-e2) 0 var(--nl-e2) var(--nl-e4); border-left: 2px solid var(--nl-filet-fort); transition: opacity .35s, border-color .35s; }
.nl-demo__etape[aria-current] { border-left-color: var(--nl-fil-de); }
.nl-demo__etape-titre { margin: 0 0 var(--nl-e2); font-family: var(--nl-police-mono); font-size: var(--nl-t-12); letter-spacing: .14em; text-transform: uppercase; color: var(--nl-texte-2); }
.nl-demo__etape-num { margin-right: var(--nl-e-12); color: var(--nl-fil-texte); font-variant-numeric: tabular-nums; }
.nl-demo__etape-texte { margin: 0; font-size: var(--nl-t-15); line-height: 1.5; color: var(--nl-texte-2); }
.nl-demo__etape-texte--suite { margin-top: var(--nl-e2); }
.nl-demo__nombre { display: inline-block; margin-right: var(--nl-e-12); font: 500 var(--nl-t-30) / 1 var(--nl-police-display); letter-spacing: -0.02em; color: var(--nl-texte); font-variant-numeric: tabular-nums; vertical-align: -3px; }
.nl-demo__compteurs { display: grid; gap: var(--nl-e1); margin: 0; padding: 0; list-style: none; font-size: var(--nl-t-15); line-height: 1.3; color: var(--nl-texte-2); }
.nl-demo__compteurs li { display: flex; align-items: center; }
.nl-demo__compteurs .nl-demo__nombre { flex: none; min-width: 2ch; }

/* formes d'effet : sur la page (colonne d'étapes) puis, plus bas, dans la scène sombre */
.nl-demo__forme, .nl-demo__op::before {
  content: ""; flex: none; display: inline-block; box-sizing: border-box; width: 9px; height: 9px;
  border: 1.5px solid var(--forme, var(--nl-texte-3)); background: var(--forme-fond, transparent);
}
.nl-demo__forme { margin-right: var(--nl-e-12); }
.nl-demo [data-effet="lecture"] { --forme: var(--nl-texte-3); }
.nl-demo [data-effet="creation"] { --forme: var(--nl-succes); --forme-fond: var(--nl-succes); }
.nl-demo [data-effet="modification"] { --forme: var(--nl-alerte); --forme-fond: var(--nl-alerte); }
.nl-demo [data-effet="action"] { --forme: var(--nl-erreur); --forme-fond: var(--nl-erreur); }
.nl-demo .nl-demo__forme[data-effet="modification"], .nl-demo__op[data-effet="modification"]::before { clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
.nl-demo .nl-demo__forme[data-effet="action"], .nl-demo__op[data-effet="action"]::before { clip-path: polygon(0 0, 100% 50%, 0 100%); }
.nl-demo__signe { flex: none; width: 9px; margin-right: var(--nl-e-12); font-family: var(--nl-police-mono); font-size: var(--nl-t-12); line-height: 1; text-align: center; color: var(--nl-arbitrer-texte); }
.nl-demo__signe--personnel { color: var(--nl-statut-developpement-texte); }
.nl-demo__signe--signal { color: var(--nl-construire-texte); }

/* la scène : panneau nuit */
.nl-demo__scene {
  display: grid; min-width: 0; padding: var(--nl-e3) var(--nl-e4);
  background: var(--nl-artefact-fond); border: 1px solid var(--nl-artefact-bord); border-radius: var(--nl-r-tuile);
  color: var(--nl-artefact-texte);
}
.nl-demo__scene > * { grid-area: 1 / 1; min-width: 0; }
.nl-demo__scene [data-effet="lecture"] { --forme: var(--nl-artefact-discret); }
.nl-demo__scene [data-effet="creation"] { --forme: var(--nl-artefact-ok); --forme-fond: var(--nl-artefact-ok); }
.nl-demo__scene [data-effet="modification"] { --forme: var(--nl-artefact-attente); --forme-fond: var(--nl-artefact-attente); }
.nl-demo__scene [data-effet="action"] { --forme: var(--nl-artefact-non); --forme-fond: var(--nl-artefact-non); }
.nl-demo__inventaire-bloc { display: none; }
.nl-demo__inventaire { columns: 3; column-gap: var(--nl-e5); margin: 0; padding: 0; list-style: none; font-family: var(--nl-police-mono); font-size: var(--nl-t-12); line-height: 16px; }
.nl-demo__op { display: flex; align-items: center; gap: var(--nl-e2); height: 16px; break-inside: avoid; white-space: nowrap; }
.nl-demo__methode { flex: none; width: 6ch; color: var(--nl-artefact-discret); }
.nl-demo__chemin { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; color: var(--nl-artefact-texte); }
.nl-demo__marque, .nl-demo__motif { flex: none; max-width: 0; overflow: hidden; opacity: 0; font-size: var(--nl-t-12); color: var(--nl-artefact-texte); transition: max-width .3s, opacity .3s; }
.nl-demo__marque--argent { color: var(--nl-artefact-attente); }
.nl-demo__marque--personnel { color: var(--nl-artefact-invite); }
.nl-demo__marque--signal { color: var(--nl-artefact-non); }
.nl-demo__notes { position: relative; height: 56px; margin-top: var(--nl-e3); }
.nl-demo__note {
  position: absolute; inset: 0; display: flex; align-items: center; gap: var(--nl-e3);
  margin: 0; padding: 0 var(--nl-e3);
  border-left: 3px solid var(--nl-artefact-non); background: var(--nl-artefact-bord);
  font-size: var(--nl-t-15); color: var(--nl-artefact-texte);
  opacity: 0; transition: opacity .35s;
}
.nl-demo__note--budget { border-left-color: var(--nl-artefact-discret); font-family: var(--nl-police-mono); font-size: var(--nl-t-14); letter-spacing: .04em; }
.nl-demo__note-code { font-family: var(--nl-police-mono); font-size: var(--nl-t-13); color: var(--nl-artefact-fort); }

.nl-demo__chiffres { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--nl-e4); margin-bottom: var(--nl-e-12); padding-bottom: var(--nl-e-12); border-bottom: 1px solid var(--nl-artefact-bord); }
.nl-chiffre { margin: 0; font: 500 var(--nl-t-56) / 1 var(--nl-police-display); letter-spacing: -0.02em; color: var(--nl-artefact-fort); font-variant-numeric: tabular-nums; }
.nl-chiffre__libelle { margin: var(--nl-e2) 0 0; font-size: var(--nl-t-12); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--nl-artefact-texte); }
.nl-demo__outils { margin: 0; padding: 0; list-style: none; }
.nl-demo__outil {
  display: grid; grid-template-columns: minmax(0, 1fr) 96px 128px 112px 132px; column-gap: var(--nl-e-12); align-items: center;
  padding: var(--nl-e1) 0; border-bottom: 1px solid var(--nl-artefact-bord);
}
.nl-demo__outil:last-child { border-bottom: 0; }
.nl-demo__outil-id { grid-column: 1; grid-row: 1; display: grid; gap: 0; min-width: 0; }
.nl-demo__outil-nom { font-family: var(--nl-police-mono); font-size: var(--nl-t-14); line-height: 18px; color: var(--nl-artefact-fort); }
.nl-demo__outil-ops { font-family: var(--nl-police-mono); font-size: var(--nl-t-12); line-height: 15px; color: var(--nl-artefact-discret); overflow-wrap: anywhere; }
.nl-demo__tag {
  grid-row: 1; justify-self: start; display: inline-flex; align-items: center;
  padding: var(--nl-e1) var(--nl-e2); border: 1px solid var(--nl-neutre-600); border-radius: var(--nl-r-bouton);
  font-family: var(--nl-police-mono); font-size: var(--nl-t-12); line-height: 1; color: var(--nl-artefact-texte); white-space: nowrap;
}
.nl-demo__tag--effet { grid-column: 2; }
.nl-demo__tag--effet .nl-demo__forme { margin-right: var(--nl-e2); }
.nl-demo__tag--risque { grid-column: 3; }
.nl-demo__tag--eleve { border-color: var(--nl-artefact-attente); color: var(--nl-artefact-attente); }
.nl-demo__tag--critique { border-color: var(--nl-artefact-non); color: var(--nl-artefact-non); }
.nl-demo__tag--marque { grid-column: 4; }
.nl-demo__cadenas { grid-column: 5; grid-row: 1; display: inline-flex; align-items: center; gap: var(--nl-e2); overflow-wrap: anywhere; font-family: var(--nl-police-mono); font-size: var(--nl-t-12); line-height: 1.2; color: var(--nl-artefact-texte); }
.nl-demo__cadenas--requise { color: var(--nl-artefact-fort); }
.nl-demo__cadenas-icone { flex: none; }
.nl-demo__legende { max-width: 80ch; margin: var(--nl-e4) 0 0; font-size: var(--nl-t-13); line-height: 1.6; color: var(--nl-texte-2); }

/* mouvement : l'inventaire se construit, se classe, se signale, se réduit ; le plan prend la place */
.nl-demo--anime .nl-demo__inventaire-bloc { display: block; transition: opacity .5s; }
.nl-demo--anime .nl-demo__op { opacity: 0; transition: opacity .35s; }
.nl-demo--anime .nl-demo__op::before { opacity: 0; transition: opacity .35s; }
.nl-demo--anime :is(.nl-demo__methode, .nl-demo__chemin) { transition: opacity .35s; }
.nl-demo--anime .nl-demo__op:nth-child(8n+1) { transition-delay: 0s; }
.nl-demo--anime .nl-demo__op:nth-child(8n+2) { transition-delay: .03s; }
.nl-demo--anime .nl-demo__op:nth-child(8n+3) { transition-delay: .06s; }
.nl-demo--anime .nl-demo__op:nth-child(8n+4) { transition-delay: .09s; }
.nl-demo--anime .nl-demo__op:nth-child(8n+5) { transition-delay: .12s; }
.nl-demo--anime .nl-demo__op:nth-child(8n+6) { transition-delay: .15s; }
.nl-demo--anime .nl-demo__op:nth-child(8n+7) { transition-delay: .18s; }
.nl-demo--anime .nl-demo__op:nth-child(8n+8) { transition-delay: .21s; }
.nl-demo--anime:not([data-etape="0"]) .nl-demo__op { opacity: 1; }
.nl-demo--anime:is([data-etape="2"], [data-etape="3"], [data-etape="4"]) .nl-demo__op::before { opacity: 1; }
.nl-demo--anime[data-etape="3"] .nl-demo__op:not(.nl-demo__op--argent, .nl-demo__op--personnel, .nl-demo__op--signal)::before,
.nl-demo--anime[data-etape="3"] .nl-demo__op:not(.nl-demo__op--argent, .nl-demo__op--personnel, .nl-demo__op--signal) :is(.nl-demo__methode, .nl-demo__chemin) { opacity: .3; }
.nl-demo--anime[data-etape="3"] .nl-demo__marque { max-width: 14em; opacity: 1; }
.nl-demo--anime[data-etape="3"] .nl-demo__note--piege { opacity: 1; }
.nl-demo--anime[data-etape="4"] .nl-demo__op--ecartee::before,
.nl-demo--anime[data-etape="4"] .nl-demo__op--ecartee :is(.nl-demo__methode, .nl-demo__chemin) { opacity: .28; }
.nl-demo--anime[data-etape="4"] .nl-demo__op--retenue .nl-demo__chemin { color: var(--nl-artefact-fort); }
.nl-demo--anime[data-etape="4"] .nl-demo__motif { max-width: 14em; opacity: 1; }
.nl-demo--anime[data-etape="4"] .nl-demo__note--budget { opacity: 1; }
.nl-demo--anime[data-etape="5"] .nl-demo__inventaire-bloc { opacity: 0; }
.nl-demo--anime .nl-demo__plan { opacity: 0; transition: opacity .4s; }
.nl-demo--anime[data-etape="5"] .nl-demo__plan { opacity: 1; transition-delay: .15s; }
.nl-demo--anime .nl-demo__outil { opacity: 0; transform: translateY(4px); transition: opacity .35s, transform .35s; }
.nl-demo--anime[data-etape="5"] .nl-demo__outil { opacity: 1; transform: none; }
.nl-demo--anime[data-etape="5"] .nl-demo__outil:nth-child(1) { transition-delay: .29s; }
.nl-demo--anime[data-etape="5"] .nl-demo__outil:nth-child(2) { transition-delay: .33s; }
.nl-demo--anime[data-etape="5"] .nl-demo__outil:nth-child(3) { transition-delay: .37s; }
.nl-demo--anime[data-etape="5"] .nl-demo__outil:nth-child(4) { transition-delay: .41s; }
.nl-demo--anime[data-etape="5"] .nl-demo__outil:nth-child(5) { transition-delay: .45s; }
.nl-demo--anime[data-etape="5"] .nl-demo__outil:nth-child(6) { transition-delay: .49s; }
.nl-demo--anime[data-etape="5"] .nl-demo__outil:nth-child(7) { transition-delay: .53s; }
.nl-demo--anime[data-etape="5"] .nl-demo__outil:nth-child(8) { transition-delay: .57s; }
.nl-demo--anime[data-etape="5"] .nl-demo__outil:nth-child(9) { transition-delay: .61s; }
.nl-demo--anime[data-etape="5"] .nl-demo__outil:nth-child(10) { transition-delay: .65s; }
.nl-demo--anime[data-etape="5"] .nl-demo__outil:nth-child(11) { transition-delay: .69s; }
.nl-demo--anime[data-etape="5"] .nl-demo__outil:nth-child(12) { transition-delay: .73s; }
.nl-demo--anime[data-etape="5"] .nl-demo__outil:nth-child(13) { transition-delay: .77s; }
.nl-demo--anime[data-etape="5"] .nl-demo__outil:nth-child(14) { transition-delay: .81s; }
.nl-demo--anime[data-etape="5"] .nl-demo__outil:nth-child(15) { transition-delay: .85s; }
.nl-demo--anime .nl-demo__etape:not([aria-current]) :is(.nl-demo__etape-titre, .nl-demo__etape-num, .nl-demo__etape-texte, .nl-demo__compteurs) { color: var(--nl-texte-3); }
.nl-demo--anime .nl-demo__etape:not([aria-current]) .nl-demo__nombre { color: var(--nl-texte-2); }

/* Scène collante : tient sous l'en-tête (72 px) dans une fenêtre de 800 px de haut ; en dessous de 790 px de haut, elle s'empile. */
@media (min-width: 1280px) and (min-height: 790px) {
  .nl-demo--anime .nl-demo__pilote { display: grid; }
  .nl-demo--anime .nl-demo__marqueurs, .nl-demo--anime .nl-demo__stage { grid-area: 1 / 1; }
  .nl-demo--anime .nl-demo__marqueurs { display: block; pointer-events: none; }
  .nl-demo--anime .nl-demo__marqueur { min-height: 45vh; }
  .nl-demo--anime .nl-demo__marqueur:last-child { min-height: 70vh; }
  .nl-demo--anime .nl-demo__stage { position: sticky; top: 100px; align-self: start; }
  .nl-demo--anime .nl-demo__etape { padding-block: var(--nl-e1); }
  .nl-demo--anime .nl-demo__etape-titre { margin-bottom: var(--nl-e1); }
  .nl-demo--anime .nl-demo__etape-texte, .nl-demo--anime .nl-demo__compteurs { font-size: var(--nl-t-14); }
  .nl-demo--anime .nl-demo__compteurs { gap: 0; }
  .nl-demo--anime .nl-demo__scene { padding-block: var(--nl-e-12); }
  .nl-demo--anime .nl-demo__inventaire { line-height: 14px; }
  .nl-demo--anime .nl-demo__op { height: 14px; }
  .nl-demo--anime .nl-demo__notes { height: 44px; margin-top: var(--nl-e-12); }
  .nl-demo--anime .nl-demo__chiffres { margin-bottom: var(--nl-e2); padding-bottom: var(--nl-e2); }
  .nl-demo--anime .nl-demo__chiffres > * { display: flex; align-items: baseline; gap: var(--nl-e-12); }
  .nl-demo--anime .nl-chiffre { font-size: var(--nl-t-40); }
  .nl-demo--anime .nl-chiffre__libelle { margin: 0; font-size: var(--nl-t-12); }
  .nl-demo--anime .nl-demo__outil { padding-block: 0; }
  .nl-demo--anime .nl-demo__outil-id { gap: 0; }
}
@media (min-width: 1280px) and (max-width: 1319px) and (min-height: 790px) {
  .nl-demo__stage { gap: var(--nl-e5); }
  .nl-demo__scene { padding-inline: var(--nl-e3); }
  .nl-demo__inventaire { column-gap: var(--nl-e4); }
  .nl-demo__outil { grid-template-columns: minmax(0, 1fr) 88px 112px 100px 120px; column-gap: var(--nl-e2); }
  .nl-demo__tag { padding: var(--nl-e1) var(--nl-e2); font-size: var(--nl-t-12); }
  .nl-demo__outil-nom { font-size: var(--nl-t-13); }
}
@media (max-width: 1279px), (max-height: 789px) {
  .nl-demo__stage { grid-template-columns: 1fr; gap: var(--nl-e4); }
  .nl-demo__scene { display: block; padding: var(--nl-e3); }
  .nl-demo--anime .nl-demo__plan { margin-top: var(--nl-e4); }
  .nl-demo--anime[data-etape="5"] .nl-demo__inventaire-bloc { opacity: .35; }
  .nl-demo--anime .nl-demo__rail { display: grid; }
  .nl-demo--anime .nl-demo__etape { grid-area: 1 / 1; pointer-events: none; }
  .nl-demo--anime .nl-demo__etape:not([aria-current]) { opacity: 0; }
  /* chaque opération devient un trait ; quelques lignes restent lisibles */
  .nl-demo__inventaire { columns: auto; display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--nl-e2) var(--nl-e2); }
  .nl-demo__op { display: block; height: 4px; background: var(--nl-artefact-discret); transition: opacity .35s, background-color .35s; }
  .nl-demo__op > *, .nl-demo__op::before { display: none; }
  .nl-demo__op--lisible { grid-column: 1 / -1; order: -1; display: flex; height: 20px; background: none; }
  .nl-demo__op--lisible > * { display: block; }
  .nl-demo__op--lisible::before { display: inline-block; }
  .nl-demo--anime:is([data-etape="2"], [data-etape="3"], [data-etape="4"]) .nl-demo__op:not(.nl-demo__op--lisible) { background: var(--forme, var(--nl-artefact-discret)); }
  .nl-demo--anime[data-etape="3"] .nl-demo__op:not(.nl-demo__op--lisible, .nl-demo__op--argent, .nl-demo__op--personnel, .nl-demo__op--signal) { opacity: .25; }
  .nl-demo--anime[data-etape="3"] .nl-demo__op--argent:not(.nl-demo__op--lisible) { background: var(--nl-artefact-attente); }
  .nl-demo--anime[data-etape="3"] .nl-demo__op--personnel:not(.nl-demo__op--lisible) { background: var(--nl-artefact-invite); }
  .nl-demo--anime[data-etape="3"] .nl-demo__op--signal:not(.nl-demo__op--lisible) { background: var(--nl-artefact-non); }
  .nl-demo--anime[data-etape="4"] .nl-demo__op--ecartee:not(.nl-demo__op--lisible) { opacity: .2; }
  .nl-demo__notes { height: 92px; }
  .nl-demo__note { display: block; padding: var(--nl-e-12); font-size: var(--nl-t-14); line-height: 1.4; overflow: hidden; }
  .nl-demo__note-code { display: block; }
  .nl-demo__tag { padding: var(--nl-e1) var(--nl-e2); font-size: var(--nl-t-12); }
  .nl-demo__outil { display: flex; flex-wrap: wrap; align-items: center; gap: var(--nl-e2); padding: var(--nl-e-12) 0; }
  .nl-demo__outil-id { flex: 1 0 100%; margin-bottom: var(--nl-e1); }
  .nl-demo__cadenas { flex: 1 0 100%; }
  .nl-demo__chiffres { grid-template-columns: auto auto auto; justify-content: space-between; gap: var(--nl-e-12); }
  .nl-demo__chiffres > * + * { padding-left: var(--nl-e-12); border-left: 1px solid var(--nl-artefact-bord); }
  .nl-chiffre { font-size: var(--nl-t-40); }
  .nl-chiffre__libelle { font-size: var(--nl-t-12); letter-spacing: .02em; }
  .nl-demo__note--budget { display: flex; align-items: center; }
}
@media (min-width: 1200px) and (max-height: 789px) {
  .nl-demo__stage { max-width: 760px; }
}
@media (max-width: 359px) {
  .nl-demo__chiffres { grid-template-columns: minmax(0, 1fr); gap: var(--nl-e1); }
  .nl-demo__chiffres > * + * { padding-left: 0; border-left: 0; }
  .nl-demo__chiffres > * { display: flex; align-items: baseline; gap: var(--nl-e3); }
  .nl-chiffre { flex: 0 0 64px; font-size: var(--nl-t-30); }
  .nl-chiffre__libelle { margin: 0; }
}