/* Novialoom — composants, charte 2a « Graphe » (ADR-0013 de novialoom-sites). Dépend de tokens/tokens.css (à charger avant).
   Le N est un chemin : des nœuds pleins pour ce qui est acquis, des nœuds vides pour ce qui reste à essayer, une croix pour
   ce qu'on écarte ; un trait d'encre relie. Angles ronds (18), boutons en pilule, Jost partout, DM Mono pour le code.
   CSS simple, sans préprocesseur. Les noms de classes reprennent ceux du site v2 (nl-bloc__element--modificateur)
   pour que la migration soit un changement de feuille de style, pas de balisage.
   Aucune information n'est portée par la seule couleur : chaque statut a sa forme, chaque rubrique son pictogramme. */

/* ------------------------------------------------------------------ base */
.nl-base,
body.nl {
  margin: 0;
  background: var(--nl-fond);
  color: var(--nl-texte);
  font-family: var(--nl-police-body);
  font-size: var(--nl-t-17);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
}
.nl-sombre { background-color: var(--nl-fond); color: var(--nl-texte); }
.nl-clair { color: var(--nl-texte); }

:where(.nl-base, body.nl) a { color: var(--nl-lien); }
:where(.nl-base, body.nl) a:hover { color: var(--nl-lien-survol); }
:where(.nl-base, body.nl) :is(a, button, input, select, textarea, summary):focus-visible {
  outline: 2px solid var(--nl-focus);
  outline-offset: 2px;
}

.nl-visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.nl-tabular { font-variant-numeric: tabular-nums; }
.nl-mono { font-family: var(--nl-police-mono); }

/* -------------------------------------------------------------- structure */
.nl-container {
  box-sizing: content-box;
  max-width: var(--nl-maxw);
  margin-inline: auto;
  padding-inline: var(--nl-pad);
}
.nl-section { padding-block: var(--nl-rythme); }
.nl-section--surface { background: var(--nl-fond-2); border-block: 1px solid var(--nl-filet); }
/* Le soir de l'atelier : seul le Lab passe en fond sombre, chaud, en aplat. */
.nl-section--nuit { background: var(--nl-nuit); }
.nl-grille {
  display: grid;
  gap: var(--nl-gouttiere);
  grid-template-columns: repeat(auto-fit, minmax(min(var(--nl-col-min, 340px), 100%), 1fr));
}
.nl-grille--12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }

/* ------------------------------------------------------------ typographie */
.nl-display,
.nl-h1, .nl-h2, .nl-h3 {
  margin: 0;
  font-family: var(--nl-police-display);
  font-weight: 500;
  letter-spacing: -0.025em;
  text-wrap: balance;
}
.nl-h1 { font-size: var(--nl-t-h1); line-height: 1.04; }
.nl-h1--lab { font-size: var(--nl-t-h1-lab); line-height: 1; letter-spacing: -0.03em; }
.nl-h2 { font-size: var(--nl-t-h2); line-height: 1.1; }
.nl-h2--moyen { font-size: var(--nl-t-h2-moyen); line-height: 1.15; }
.nl-h3 { font-size: var(--nl-t-h3); line-height: 1.25; }
.nl-chapo { margin: 0; font-size: var(--nl-t-22); line-height: 1.5; color: var(--nl-texte-2); max-width: 56ch; }
.nl-texte { margin: 0; color: var(--nl-texte-2); max-width: var(--nl-mesure); }
.nl-libelle {
  font: 500 11px / 1.4 var(--nl-police-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--nl-texte-3);
}

/* Surtitre de section : capitales espacées, précédées du nœud de la rubrique, ou de sa tuile (.nl-tuile) */
.nl-surtitre {
  display: inline-flex; align-items: center; gap: 12px;
  font-size: var(--nl-t-13); font-weight: 500; line-height: 1.5; letter-spacing: .3em; text-transform: uppercase;
  color: var(--nl-fil-texte);
}
/* le nœud se cale sur la première ligne quand le surtitre passe à la ligne */
.nl-surtitre__filet { flex: none; align-self: flex-start; width: 10px; height: 10px; margin-top: calc(.75em - 5px); border-radius: 50%; background: var(--nl-fil-de); }
.nl-surtitre--role { font-size: 11px; letter-spacing: .2em; }

/* Lien fléché, dans la couleur de la rubrique courante */
.nl-lien-fil {
  display: inline-flex; align-items: center; gap: 8px; min-height: var(--nl-cible);
  color: var(--nl-fil-texte) !important; font-weight: 500; font-size: var(--nl-t-16);
  text-decoration: underline; text-underline-offset: 4px;
}

/* ----------------------------------------------------------------- tuiles */
/* Tuile : le pictogramme de la rubrique, trait d'encre et nœud en couleur, sur la teinte de la rubrique (claire dans tous les thèmes) */
.nl-tuile {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: var(--nl-r-tuile);
  background: var(--nl-fil-teinte); color: var(--nl-encre);
}
.nl-tuile--s { width: 28px; height: 28px; border-radius: 9px; }
.nl-tuile--l { width: 48px; height: 48px; }
.nl-tuile--xl { width: 56px; height: 56px; }
.nl-tuile svg { width: 72%; height: 72%; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.nl-tuile--s svg { stroke-width: 4; }
.nl-tuile__noeud { fill: var(--nl-fil-de); stroke: none; }
.nl-tuile__plein { fill: currentColor; stroke: none; }

/* ---------------------------------------------------------------- boutons */
.nl-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  box-sizing: border-box; min-height: 48px; padding: 0 24px;
  border: 1.5px solid transparent; border-radius: var(--nl-r-bouton);
  font: 500 var(--nl-t-16) / 1 var(--nl-police-body); text-decoration: none; cursor: pointer;
}
/* Pilule brique : la couleur des boutons et des avis tranchés */
.nl-btn--primary { background: var(--nl-brique); color: var(--nl-papier) !important; box-shadow: var(--nl-ombre-action); }
.nl-btn--primary:hover { background: var(--nl-brique-survol); }
.nl-btn--secondary { background: var(--nl-btn-2-fond); border-color: var(--nl-btn-2-bord); color: var(--nl-btn-2-texte) !important; }
.nl-btn--secondary:hover { background: var(--nl-surface-2); }
.nl-btn--clair { background: var(--nl-papier); color: var(--nl-encre) !important; }
.nl-btn--fil { background: var(--nl-fil-teinte); border-color: var(--nl-fil-de); color: var(--nl-fil-encre) !important; }
.nl-btn--large { min-height: 58px; padding-inline: 28px; font-size: var(--nl-t-18); }
.nl-btn-group { display: flex; flex-wrap: wrap; gap: 12px; }
.nl-btn[disabled], .nl-btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; box-shadow: none; }

/* ---------------------------------------------------------------- en-tête */
.nl-header {
  position: sticky; top: 0; z-index: 10;
  background: var(--nl-verre); border-bottom: 1px solid var(--nl-verre-filet);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
.nl-header__barre {
  box-sizing: content-box; max-width: var(--nl-maxw); margin-inline: auto; padding-inline: var(--nl-pad);
  height: 76px; display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
.nl-header__marque {
  display: inline-flex; align-items: center; gap: 12px; min-height: var(--nl-cible);
  color: var(--nl-titre-fort) !important; text-decoration: none;
}
.nl-header__mark { width: 24px; height: 28px; }
/* Le mot-symbole s'écrit en bas de casse (le nom reste « Novialoom » dans le texte) */
.nl-header__mot { font: 500 24px / 1 var(--nl-police-display); letter-spacing: -0.025em; text-transform: lowercase; }
.nl-nav { display: flex; align-items: center; gap: 4px; }
.nl-nav__link {
  display: inline-flex; align-items: center; gap: 9px; box-sizing: border-box; min-height: var(--nl-cible); padding: 3px 12px 0;
  border-bottom: 3px solid transparent; color: var(--nl-texte) !important;
  font-size: var(--nl-t-16); font-weight: 500; text-decoration: none;
}
.nl-nav__link:hover { border-bottom-color: var(--nl-filet-fort); }
/* Chaque rubrique a son nœud, dans sa couleur */
.nl-nav__noeud { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--nl-fil-de); }
:is(.nl-sombre, [data-theme="dark"]) .nl-nav__noeud { background: var(--nl-fil-clair); }
/* Rubrique active : nœud cerclé et trait souligné, dans la couleur de la rubrique (jamais la couleur seule) */
.nl-nav__link[aria-current="page"] { border-bottom-color: var(--nl-fil-de); color: var(--nl-fil-texte) !important; }
.nl-nav__link[aria-current="page"] .nl-nav__noeud { box-shadow: 0 0 0 4px var(--nl-fil-teinte); }
.nl-sombre .nl-nav__link[aria-current="page"] .nl-nav__noeud,
[data-theme="dark"] .nl-nav__link[aria-current="page"] .nl-nav__noeud { box-shadow: 0 0 0 4px color-mix(in srgb, var(--nl-fil-de) 35%, transparent); }
/* Qui sommes-nous : après les quatre rubriques, en retrait */
.nl-nav__link--societe { margin-left: 12px; color: var(--nl-texte-2) !important; }
.nl-nav__link--societe[aria-current="page"] { border-bottom-color: var(--nl-trait); color: var(--nl-texte) !important; }
.nl-nav__cta { margin-left: 12px; min-height: var(--nl-cible); padding-inline: 20px; }
.nl-nav__toggle {
  display: none; width: var(--nl-cible); height: var(--nl-cible); border: 0; border-radius: var(--nl-r-bouton);
  background: transparent; color: var(--nl-titre-fort); align-items: center; justify-content: center; cursor: pointer;
}
@media (max-width: 900px) {
  .nl-header__barre { height: 64px; }
  .nl-nav__link { border-bottom: 0; border-left: 3px solid transparent; padding: 0 12px; }
  .nl-nav__link[aria-current="page"] { border-left-color: var(--nl-fil-de); }
  .nl-nav__link--societe { margin-left: 0; }
  .nl-nav__toggle { display: inline-flex; }
  .nl-nav {
    display: none; position: absolute; inset: 64px 0 auto 0; flex-direction: column; align-items: stretch; gap: 4px;
    padding: 12px var(--nl-pad) 20px; background: var(--nl-fond-2); border-bottom: 1px solid var(--nl-filet);
  }
  .nl-nav--ouvert { display: flex; }
  /* sans JavaScript, la navigation reste accessible */
  html:not(.js) .nl-nav { display: flex; position: static; padding: 0; background: none; border: 0; flex-direction: row; flex-wrap: wrap; }
  html:not(.js) .nl-nav__toggle { display: none; }
  html:not(.js) .nl-header__barre { height: auto; flex-wrap: wrap; padding-block: 8px; }
  .nl-nav__cta { margin-left: 0; }
}

/* Fil de parcours : Lab → Comprendre → Arbitrer → Construire */
.nl-parcours { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.nl-parcours__etape {
  display: inline-flex; align-items: center; gap: 10px; box-sizing: border-box; min-height: 48px; padding: 0 18px 0 8px;
  border: 1px solid var(--nl-filet); border-radius: var(--nl-r-bouton); background: var(--nl-surface);
  color: var(--nl-texte) !important; font-size: var(--nl-t-15); font-weight: 500; text-decoration: none;
}
.nl-parcours__etape--entree { border-color: transparent; background: var(--nl-lab-teinte); color: var(--nl-lab-encre) !important; }
.nl-parcours__lien { flex: none; width: 44px; height: 12px; fill: none; stroke: var(--nl-trait); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 600px) {
  .nl-parcours { gap: 10px 8px; }
  .nl-parcours__etape { min-height: var(--nl-cible); padding: 0 12px 0 6px; font-size: var(--nl-t-14); gap: 8px; }
  .nl-parcours__lien { width: 20px; }
}

/* ---------------------------------------------------------------- statuts */
/* Pastille : fond teinté + texte + forme propre à chaque statut (dessinée en CSS, aucun balisage en plus) */
.nl-statut {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: var(--nl-r-pastille);
  font: 500 var(--nl-t-12) / 16px var(--nl-police-mono); white-space: nowrap;
  background: var(--nl-statut-specifie-fond); color: var(--nl-statut-specifie-texte);
}
.nl-statut::before {
  content: ""; flex: none; box-sizing: border-box; width: 10px; height: 10px; border-radius: 50%;
  border: 1.5px solid currentColor;
}
.nl-statut--developpement { background: var(--nl-statut-developpement-fond); color: var(--nl-statut-developpement-texte); }
.nl-statut--developpement::before { background: linear-gradient(90deg, transparent 50%, currentColor 50%); }
.nl-statut--extraction { background: var(--nl-statut-extraction-fond); color: var(--nl-statut-extraction-texte); }
.nl-statut--extraction::before { width: 8px; height: 8px; border-radius: 1px; background: currentColor; transform: rotate(45deg); margin-inline: 1px; }
.nl-statut--interne { background: var(--nl-statut-interne-fond); color: var(--nl-statut-interne-texte); }
.nl-statut--interne::before { border-radius: 2px; background: currentColor; }
.nl-statut--publie { background: var(--nl-statut-publie-fond); color: var(--nl-statut-publie-texte); }
.nl-statut--publie::before { background: currentColor; }
.nl-statut--publication-prevue {
  padding-block: 3px; background: transparent; border: 1px dashed var(--nl-statut-prevue-bord); color: var(--nl-statut-prevue-texte);
}
.nl-statut--publication-prevue::before { border-style: dashed; }
.nl-legende-statuts { display: grid; grid-template-columns: max-content 1fr; gap: 12px 16px; align-items: center; margin: 0; font-size: var(--nl-t-14); color: var(--nl-texte-2); }
.nl-legende-statuts .nl-statut { justify-self: start; }

/* ----------------------------------------------------- zone ⟨à valider⟩ */
/* Le marqueur ⟨…⟩ reste lisible tel quel : on l'encadre, on ne le remplace jamais. */
.nl-a-valider {
  padding: 1px 6px; border: 1px dashed var(--nl-avalider-bord); border-radius: 6px;
  background: var(--nl-avalider-fond); color: var(--nl-avalider-texte);
  font-family: var(--nl-police-mono); font-size: .875em; white-space: nowrap;
}
.nl-a-valider--bloc { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-radius: var(--nl-r-tuile); white-space: normal; }

/* ----------------------------------------------------------------- cartes */
/* Carte : papier sur écru, sans bordure ; sur une bande papier (nl-section--surface), elle passe en écru */
.nl-carte,
.nl-carte-capacite {
  box-sizing: border-box; display: flex; flex-direction: column; gap: 20px; padding: 28px;
  background: var(--nl-surface); border: 1px solid transparent; border-radius: var(--nl-r-carte);
  box-shadow: var(--nl-ombre);
}
.nl-section--surface :is(.nl-carte, .nl-carte-capacite, .nl-projet, .nl-bandeau, .nl-passerelle, .nl-capture-form) { background: var(--nl-fond); }
.nl-carte--attente { background: transparent; border-style: dashed; border-color: var(--nl-filet-fort); box-shadow: none; }

/* Carte capacité : tuile + type de prestation + titre, artefact, texte, catalogue, lien */
/* Les modificateurs existants du site fixent la rubrique, comme le ferait data-fil. */
.nl-carte-capacite--comprendre { --nl-fil-de: var(--nl-comprendre-de); --nl-fil-a: var(--nl-comprendre-a); --nl-fil-encre: var(--nl-comprendre-encre); --nl-fil-clair: var(--nl-comprendre-clair); --nl-fil-teinte: var(--nl-comprendre-teinte); --nl-fil-sur: var(--nl-comprendre-sur); --nl-fil-texte: var(--nl-comprendre-texte); }
.nl-carte-capacite--arbitrer { --nl-fil-de: var(--nl-arbitrer-de); --nl-fil-a: var(--nl-arbitrer-a); --nl-fil-encre: var(--nl-arbitrer-encre); --nl-fil-clair: var(--nl-arbitrer-clair); --nl-fil-teinte: var(--nl-arbitrer-teinte); --nl-fil-sur: var(--nl-arbitrer-sur); --nl-fil-texte: var(--nl-arbitrer-texte); }
.nl-carte-capacite--construire { --nl-fil-de: var(--nl-construire-de); --nl-fil-a: var(--nl-construire-a); --nl-fil-encre: var(--nl-construire-encre); --nl-fil-clair: var(--nl-construire-clair); --nl-fil-teinte: var(--nl-construire-teinte); --nl-fil-sur: var(--nl-construire-sur); --nl-fil-texte: var(--nl-construire-texte); }
.nl-carte-capacite__tete { display: flex; align-items: center; gap: 14px; }
.nl-carte-capacite__fil { display: block; font: 500 var(--nl-t-12) / 1.4 var(--nl-police-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--nl-fil-texte); }
.nl-carte-capacite__titre { margin: 0; font: 500 var(--nl-t-28) / 1.1 var(--nl-police-display); letter-spacing: -0.02em; }
.nl-carte-capacite__texte { margin: 0; font-size: var(--nl-t-17); line-height: 1.55; color: var(--nl-texte-2); }
.nl-carte-capacite > .nl-lien-fil { margin-top: auto; align-self: flex-start; }

/* Ligne de catalogue d'offre : titre + format · durée · tarif */
.nl-catalogue { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; border-bottom: 1px solid var(--nl-filet); }
.nl-catalogue__offre { display: flex; flex-direction: column; gap: 2px; padding: 12px 0; border-top: 1px solid var(--nl-filet); }
.nl-catalogue__offre:first-child { border-top: 1.5px solid var(--nl-trait); }
.nl-catalogue__titre { font-size: var(--nl-t-16); font-weight: 500; color: var(--nl-texte) !important; text-decoration: none; }
.nl-catalogue__titre:hover { color: var(--nl-fil-texte) !important; text-decoration: underline; text-underline-offset: 4px; }
.nl-catalogue__meta { font-family: var(--nl-police-mono); font-size: var(--nl-t-12); line-height: 22px; color: var(--nl-texte-2); }
.nl-catalogue--ligne .nl-catalogue__offre { flex-direction: row; align-items: center; justify-content: space-between; gap: 16px; min-height: 52px; padding-block: 0; }
/* Catalogue sur deux colonnes (rangées « Nos offres ») : un filet au-dessus de chaque ligne, une colonne jusqu'à 640 px */
.nl-catalogue--colonnes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--nl-e5); border-bottom: 0; }
.nl-catalogue--colonnes .nl-catalogue__offre:first-child { border-top: 1px solid var(--nl-filet); }
@media (max-width: 640px) {
  .nl-catalogue--colonnes { grid-template-columns: minmax(0, 1fr); border-bottom: 1px solid var(--nl-filet); }
}
/* Outils du Lab : le nom de l'outil est un nom de code */
.nl-catalogue--outils .nl-catalogue__titre { font-family: var(--nl-police-mono); }

/* Carte Lab (accueil) : nom, statut, accroche, dépôt, offre servie */
.nl-carte-lab {
  box-sizing: border-box; display: flex; flex-direction: column; gap: 14px; padding: 24px;
  background: var(--nl-surface); border: 1px solid transparent; border-radius: var(--nl-r-carte);
  color: var(--nl-texte);
}
.nl-carte-lab--attente { border: 1.5px dashed var(--nl-filet-fort); }
.nl-carte-lab__tete { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; }
.nl-carte-lab__nom, .nl-carte-lab__nom a {
  font: 500 var(--nl-t-18) / 1.3 var(--nl-police-mono); color: var(--nl-texte) !important; text-decoration: none;
}
.nl-carte-lab__nom a { display: inline-flex; align-items: center; min-height: var(--nl-cible); }
.nl-carte-lab__accroche { margin: 0; font-size: var(--nl-t-17); line-height: 1.5; color: var(--nl-texte-2); }
.nl-carte-lab--vedette { padding: 28px; gap: 20px; }
.nl-carte-lab--vedette .nl-carte-lab__nom, .nl-carte-lab--vedette .nl-carte-lab__nom a { font-size: var(--nl-t-22); }
.nl-carte-lab--vedette .nl-carte-lab__accroche { font: 500 24px / 1.35 var(--nl-police-display); letter-spacing: -0.01em; color: var(--nl-texte); max-width: 30ch; }
.nl-carte-lab__meta { margin: auto 0 0; display: flex; flex-wrap: wrap; gap: 12px 40px; padding-top: 14px; border-top: 1.5px solid var(--nl-trait); font-size: var(--nl-t-14); }
.nl-carte-lab__meta dt { font: 500 11px / 1.4 var(--nl-police-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--nl-texte-3); }
.nl-carte-lab__meta dd { margin: 0; color: var(--nl-texte-2); }
.nl-carte-lab__meta dd a { color: var(--nl-fil-texte) !important; font-weight: 500; }

/* Fiche projet du Lab (/lab/) : colonne d'état à gauche, contenu à droite */
.nl-projet {
  display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 32px; padding: 32px;
  background: var(--nl-surface); border: 1px solid transparent; border-radius: var(--nl-r-panneau); box-shadow: var(--nl-ombre);
  color: var(--nl-texte);
}
.nl-projet__nom { margin: 0; font: 500 var(--nl-t-22) / 1.3 var(--nl-police-mono); overflow-wrap: anywhere; }
.nl-projet__meta { margin: 0; display: flex; flex-direction: column; gap: 12px; font-size: var(--nl-t-14); line-height: 22px; color: var(--nl-texte-2); }
.nl-projet__meta dt { font: 500 11px / 1.4 var(--nl-police-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--nl-texte-3); }
.nl-projet__meta dd { margin: 0; }
.nl-projet__accroche { margin: 0; font: 500 24px / 1.35 var(--nl-police-display); letter-spacing: -0.01em; }
.nl-projet__probleme { margin: 0; font-size: var(--nl-t-17); line-height: 1.55; color: var(--nl-texte-2); max-width: var(--nl-mesure); }
.nl-projet__intertitre { margin: 0 0 10px; font-size: 11px; font-weight: 500; letter-spacing: .25em; text-transform: uppercase; color: var(--nl-texte-2); }
.nl-projet__liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; font-size: var(--nl-t-16); line-height: 1.5; color: var(--nl-texte-2); }
.nl-projet__liste li { position: relative; padding-left: 26px; }
/* « Ce qu'il fait » : coche · « Ce qu'il ne fait pas » : croix (forme différente, pas seulement la couleur) */
.nl-projet__liste li::before { content: ""; position: absolute; left: 2px; top: 5px; width: 12px; height: 7px; border: solid var(--nl-succes); border-width: 0 0 2.5px 2.5px; transform: rotate(-45deg); }
/* la croix = écarté, en brique */
.nl-projet__liste--non li::before { top: 10px; left: 1px; width: 14px; height: 0; border-width: 0 0 2.5px; border-color: var(--nl-erreur); border-radius: 2px; transform: rotate(45deg); }
.nl-projet__liste--non li::after { content: ""; position: absolute; left: 1px; top: 10px; width: 14px; border-bottom: 2.5px solid var(--nl-erreur); border-radius: 2px; transform: rotate(-45deg); }
@media (max-width: 760px) { .nl-projet { grid-template-columns: minmax(0, 1fr); padding: 20px; gap: 20px; } }

/* -------------------------------------------------------------- artefacts */
/* Panneau nuit dans tous les thèmes : c'est un objet technique, pas une surface de page. */
.nl-artefact { margin: 0; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.nl-artefact__doc {
  box-sizing: border-box; padding: 16px; border-radius: var(--nl-r-tuile);
  background: var(--nl-artefact-fond); border: 1px solid var(--nl-artefact-bord); color: var(--nl-artefact-texte);
  font-family: var(--nl-police-mono); font-size: var(--nl-t-12); line-height: 20px;
  white-space: pre-wrap; overflow-wrap: anywhere;
}
.nl-artefact__doc--prose { font-family: var(--nl-police-body); font-size: var(--nl-t-13); white-space: normal; display: flex; flex-direction: column; gap: 10px; }
/* Légende obligatoire : « Exemple · … » ou « Illustration » */
.nl-artefact__legende { font-size: var(--nl-t-12); color: var(--nl-texte-3); }
.nl-artefact__barre { display: flex; gap: 6px; margin-bottom: 10px; }
.nl-artefact__barre i { width: 8px; height: 8px; border-radius: 50%; background: var(--nl-neutre-600); }
.nl-code__cle { color: var(--nl-fil-clair); }
.nl-code__com, .nl-code__discret { color: var(--nl-artefact-discret); }
.nl-code__fort { color: var(--nl-artefact-fort); }
.nl-code__invite { color: var(--nl-artefact-invite); }
.nl-code__ok { color: var(--nl-artefact-ok); }
.nl-code__non { color: var(--nl-artefact-non); }
.nl-code__attente { color: var(--nl-artefact-attente); }
.nl-journal__confirmation { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; background: var(--nl-artefact-attente-fond); color: var(--nl-artefact-attente); }

/* Graphe de nœuds façon NoviaGraph (SVG en ligne). Nœuds arrondis colorés par type, arêtes en Bézier. */
.nl-graphe { display: block; width: 100%; height: auto; font: 500 11px var(--nl-police-body); }
.nl-graphe__arete { fill: none; stroke: var(--nl-neutre-400); stroke-width: 1.5; stroke-linecap: round; }
.nl-graphe__noeud rect { rx: 10px; }
.nl-graphe text { fill: var(--nl-papier); text-anchor: middle; }
.nl-graphe__code { font-family: var(--nl-police-mono); font-weight: 500; fill: var(--nl-artefact-invite) !important; }

/* ------------------------------------------------- portes (accueil) */
/* Quatre portes, une par étape du N (Comprendre, Lab, Arbitrer, Construire), reliées par le fil d'encre (ADR-0015).
   Chaque porte porte data-fil : nœud, étiquette et lien prennent la couleur de sa rubrique. Le fil est décoratif
   (aria-hidden) ; l'ordre est dit par l'étiquette numérotée.
   Au-dessus de 1 100 px : quatre colonnes, nœuds reliés par le fil. De 641 à 1 100 px : deux colonnes, nœuds sans fil.
   Jusqu'à 640 px : des rangées, vignette de 96 px, nœud au pied de la vignette, fil vertical vers la porte suivante.
   Les images n'ont pas de mention visible (règle 3, ADR-0016). */
.nl-portes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--nl-e6) var(--nl-gouttiere); }
.nl-porte { position: relative; display: flex; flex-direction: column; min-width: 0; }
.nl-porte__image { overflow: hidden; border-radius: var(--nl-r-carte); background: var(--nl-papier); }
.nl-porte__image .nl-illustration__image { aspect-ratio: 1 / 1; object-fit: cover; border-radius: 0; }
.nl-porte__corps { display: flex; flex: 1; flex-direction: column; min-width: 0; }
.nl-porte__rail { position: relative; height: 16px; margin: var(--nl-e4) 0 var(--nl-e3); }
.nl-porte__noeud { position: absolute; left: 0; top: 0; width: 16px; height: 16px; border-radius: 50%; background: var(--nl-fil-de); }
.nl-porte__fil { position: absolute; left: 16px; right: calc(-1 * var(--nl-gouttiere)); top: 6.5px; height: 3px; border-radius: 2px; background: var(--nl-trait); }
/* la dernière porte est l'arrivée : nœud cerclé, pas de fil après elle */
.nl-porte:last-child .nl-porte__noeud { box-shadow: 0 0 0 4px var(--nl-fil-teinte); }
.nl-porte:last-child .nl-porte__fil { display: none; }
.nl-porte__etiquette { font: 500 var(--nl-t-12) / 1.4 var(--nl-police-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--nl-fil-texte); }
.nl-porte__titre { margin: var(--nl-e2) 0 0; font: 500 var(--nl-t-24) / 1.15 var(--nl-police-display); letter-spacing: -0.02em; color: var(--nl-texte); }
.nl-porte__texte { margin: var(--nl-e-12) 0 0; font-size: var(--nl-t-16); line-height: 1.55; color: var(--nl-texte-2); text-wrap: pretty; }
.nl-porte__lien {
  margin-top: auto; align-self: flex-start; display: inline-flex; align-items: center; gap: var(--nl-e2);
  min-height: var(--nl-cible); padding-top: var(--nl-e-12);
  color: var(--nl-fil-texte) !important; font-size: var(--nl-t-16); font-weight: 500; text-decoration: underline; text-underline-offset: 4px;
}
@media (max-width: 1100px) {
  .nl-portes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nl-porte__fil { display: none; }
}
@media (max-width: 640px) {
  .nl-portes { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .nl-porte { display: grid; grid-template-columns: 96px minmax(0, 1fr); column-gap: var(--nl-e3); padding-bottom: var(--nl-e5); }
  .nl-porte:last-child { padding-bottom: 0; }
  .nl-porte__image { width: 96px; height: 96px; border-radius: var(--nl-r-tuile); }
  /* nœud au pied de la vignette, fil vertical jusqu'à la porte suivante */
  .nl-porte__rail { position: absolute; left: 40px; top: 88px; bottom: 0; width: 16px; height: auto; margin: 0; }
  .nl-porte__fil { display: block; left: 6.5px; right: auto; top: 24px; bottom: 0; width: 3px; height: auto; }
  .nl-porte__titre { margin-top: var(--nl-e1); font-size: var(--nl-t-20); line-height: 1.2; }
  .nl-porte__texte { margin-top: var(--nl-e1); font-size: var(--nl-t-15); line-height: 1.5; }
  .nl-porte__lien { padding-top: 0; font-size: var(--nl-t-15); }
}

/* ------------------------------------------- rangées d'offre (accueil) */
/* Une rangée par offre, dans l'ordre du N (ADR-0019) : d'un côté l'illustration (4:3) et sa fiche d'exemple posée en
   chevauchement, de l'autre la tuile, le type, le titre, le chapeau, le texte, le catalogue et le lien. Les côtés
   alternent (--inverse : le visuel à droite). Porter data-fil sur la rangée.
   Ordre du DOM = ordre de lecture au téléphone : tête, chapeau, texte, visuel, catalogue, lien. Au-dessus de 900 px, le
   visuel occupe toute la hauteur de sa colonne ; dans l'autre, le texte se centre entre deux pistes souples. Aucune
   rangée ne s'aligne sur une autre. Jusqu'à 900 px, une seule colonne, la fiche à cheval sur le bas de l'image. */
.nl-offre-rangees { display: flex; flex-direction: column; }
.nl-offre-rangee {
  display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  grid-template-rows: 1fr repeat(5, auto) 1fr;
  grid-template-areas: "visuel ." "visuel tete" "visuel chapo" "visuel texte" "visuel catalogue" "visuel lien" "visuel .";
  column-gap: var(--nl-e7); row-gap: var(--nl-e4); padding-block: var(--nl-e6);
}
.nl-offre-rangee--inverse {
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  grid-template-areas: ". visuel" "tete visuel" "chapo visuel" "texte visuel" "catalogue visuel" "lien visuel" ". visuel";
}
.nl-offre-rangee__tete { grid-area: tete; display: flex; align-items: center; gap: var(--nl-e3); }
.nl-offre-rangee__type { display: block; font: 500 var(--nl-t-12) / 1.4 var(--nl-police-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--nl-fil-texte); }
.nl-offre-rangee__titre { margin: 0; font: 500 max(var(--nl-t-30), var(--nl-t-h2-moyen)) / 1.1 var(--nl-police-display); letter-spacing: -0.02em; color: var(--nl-texte); }
.nl-offre-rangee__chapo { grid-area: chapo; margin: 0; font: 500 var(--nl-t-22) / 1.4 var(--nl-police-display); letter-spacing: -0.01em; color: var(--nl-texte); text-wrap: pretty; }
.nl-offre-rangee__texte { grid-area: texte; margin: 0; max-width: 62ch; font-size: var(--nl-t-17); line-height: 1.55; color: var(--nl-texte-2); }
.nl-offre-rangee__visuel { grid-area: visuel; display: flex; flex-direction: column; min-width: 0; }
.nl-offre-rangee__catalogue { grid-area: catalogue; }
.nl-offre-rangee__lien { grid-area: lien; justify-self: start; align-self: start; }
/* l'image à 84 % de sa colonne, la fiche à 72 %, chevauchant l'image d'un quart de la largeur, côté texte */
.nl-offre-rangee__visuel .nl-illustration { width: 84%; margin: 0; }
.nl-offre-rangee__visuel .nl-illustration__image { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--nl-r-panneau); }
.nl-offre-rangee__visuel .nl-fiche-exemple { position: relative; z-index: 1; width: 72%; margin: -23% 0 0 auto; }
.nl-offre-rangee__visuel .nl-fiche-exemple__legende { text-align: right; }
.nl-offre-rangee--inverse .nl-offre-rangee__visuel .nl-illustration { margin-left: auto; }
.nl-offre-rangee--inverse .nl-offre-rangee__visuel .nl-fiche-exemple { margin: -23% auto 0 0; }
.nl-offre-rangee--inverse .nl-offre-rangee__visuel .nl-fiche-exemple__legende { text-align: left; }
@media (max-width: 900px) {
  .nl-offre-rangee { display: flex; flex-direction: column; gap: var(--nl-e3); padding-block: var(--nl-e5); }
  .nl-offre-rangee__visuel { margin-top: var(--nl-e1); }
  .nl-offre-rangee__visuel .nl-illustration { width: 100%; }
  .nl-offre-rangee__visuel .nl-fiche-exemple,
  .nl-offre-rangee--inverse .nl-offre-rangee__visuel .nl-fiche-exemple { width: auto; margin: calc(-1 * var(--nl-e7)) var(--nl-e-12) 0; }
  .nl-offre-rangee__visuel .nl-fiche-exemple__legende,
  .nl-offre-rangee--inverse .nl-offre-rangee__visuel .nl-fiche-exemple__legende { text-align: left; }
}
@media (max-width: 640px) {
  .nl-offre-rangee__tete { gap: var(--nl-e-12); }
  .nl-offre-rangee .nl-tuile--xl { width: 48px; height: 48px; }
  .nl-offre-rangee__chapo { font-size: var(--nl-t-20); }
  .nl-offre-rangee__texte { font-size: var(--nl-t-16); }
  .nl-offre-rangee__visuel .nl-illustration__image { border-radius: var(--nl-r-carte); }
}

/* ------------------------------------------ fiche d'exemple (accueil) */
/* Extraits mot pour mot d'une page d'offre (ADR-0019), dans l'aplat de la rubrique (data-fil) : fond --nl-fil-a, texte
   --nl-fil-sur, cerclée du fond de page comme les nœuds ; la tuile de la rubrique en petit dans l'en-tête. Coche et
   croix sont dessinées et de formes différentes : la couleur ne porte jamais seule le sens. La légende est sous
   l'aplat, sur le fond de page. Variante du Lab : une accroche, un passage « de → vers » à grands chiffres, des points. */
.nl-fiche-exemple { margin: 0; display: flex; flex-direction: column; gap: var(--nl-e2); min-width: 0; }
.nl-fiche-exemple__corps {
  box-sizing: border-box; display: flex; flex-direction: column; gap: var(--nl-e3); padding: var(--nl-e5);
  border-radius: var(--nl-r-carte); background: var(--nl-fil-a); color: var(--nl-fil-sur);
  box-shadow: 0 0 0 var(--nl-e2) var(--nl-fond); text-wrap: pretty;
}
.nl-fiche-exemple__tete { display: flex; align-items: center; gap: var(--nl-e-12); }
.nl-fiche-exemple__titre { font: 500 var(--nl-t-12) / 1.4 var(--nl-police-mono); letter-spacing: .08em; text-transform: uppercase; }
.nl-fiche-exemple__lignes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--nl-e-12); }
.nl-fiche-exemple__ligne { display: grid; grid-template-columns: 22px minmax(0, 1fr); column-gap: var(--nl-e-12); font: 500 var(--nl-t-20) / 1.35 var(--nl-police-body); }
.nl-fiche-exemple__marque { width: 22px; height: 22px; margin-top: 2px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.nl-fiche-exemple__accroche { margin: 0; font: 500 var(--nl-t-20) / 1.35 var(--nl-police-body); }
.nl-fiche-exemple__passage { margin: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: var(--nl-e3); }
.nl-fiche-exemple__nombre { display: flex; flex-direction: column; font-size: var(--nl-t-15); line-height: 1.4; }
.nl-fiche-exemple__chiffre { font: 500 var(--nl-t-56) / 1 var(--nl-police-display); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.nl-fiche-exemple__fleche { width: 48px; height: 24px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.nl-fiche-exemple__points { list-style: none; margin: 0; padding: var(--nl-e-12) 0 0; border-top: 1.5px solid currentColor; display: flex; flex-direction: column; gap: var(--nl-e2); font-size: var(--nl-t-15); line-height: 1.5; }
.nl-fiche-exemple__point { display: flex; align-items: baseline; gap: var(--nl-e2); }
.nl-fiche-exemple__point::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.nl-fiche-exemple__fin { margin: 0; padding-top: var(--nl-e-12); border-top: 1.5px solid currentColor; font-size: var(--nl-t-15); line-height: 1.5; }
.nl-fiche-exemple__legende { font-size: var(--nl-t-13); line-height: 1.5; color: var(--nl-texte-3); }
.nl-fiche-exemple__legende a { color: var(--nl-fil-texte); font-weight: 500; }
@media (max-width: 640px) {
  .nl-fiche-exemple__corps { gap: var(--nl-e-12); padding: var(--nl-e4); }
  .nl-fiche-exemple__ligne { grid-template-columns: 20px minmax(0, 1fr); font-size: var(--nl-t-17); }
  .nl-fiche-exemple__marque { width: 20px; height: 20px; }
  .nl-fiche-exemple__accroche { font-size: var(--nl-t-17); }
  .nl-fiche-exemple__fleche { width: 40px; height: 20px; }
  .nl-fiche-exemple__points, .nl-fiche-exemple__fin, .nl-fiche-exemple__nombre { font-size: var(--nl-t-14); }
}

/* ---------------------------------------------- bandeau format (offres) */
.nl-bandeau {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr));
  background: var(--nl-surface); border: 1px solid var(--nl-filet); border-top: 3px solid var(--nl-fil-texte);
  border-radius: var(--nl-r-carte); box-shadow: var(--nl-ombre); overflow: hidden;
}
.nl-bandeau__case { display: flex; flex-direction: column; gap: 6px; padding: 28px 24px; box-shadow: -1px 0 0 var(--nl-filet), 0 -1px 0 var(--nl-filet); }
.nl-bandeau__label { font: 500 11px / 1.4 var(--nl-police-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--nl-texte-3); }
.nl-bandeau__valeur { font: 500 24px / 30px var(--nl-police-display); letter-spacing: -0.02em; }
.nl-bandeau__valeur--num .nl-bandeau__nombre { font-size: 44px; line-height: 48px; font-variant-numeric: tabular-nums; }
.nl-bandeau__valeur--num .nl-bandeau__unite { font: 500 16px var(--nl-police-body); letter-spacing: 0; }
.nl-bandeau__marque { display: inline-block; padding: 2px 10px; border-radius: var(--nl-r-bouton); font-family: inherit; font-size: inherit; }
.nl-bandeau__sub { font-size: var(--nl-t-13); color: var(--nl-texte-2); }

/* ------------------------------------------------- déroulé en étapes */
/* Le N déplié : une chaîne de nœuds numérotés reliés par un trait d'encre ; le dernier nœud est l'arrivée (vert). */
.nl-etapes { list-style: none; margin: 0; padding: 0; counter-reset: nl-etape; display: flex; flex-direction: column; }
.nl-etapes > li { counter-increment: nl-etape; position: relative; padding: 6px 0 28px 56px; color: var(--nl-texte-2); font-size: var(--nl-t-16); line-height: 1.55; }
.nl-etapes > li::before {
  content: counter(nl-etape); position: absolute; left: 0; top: 0; width: 40px; height: 40px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--nl-fil-de); color: var(--nl-fil-sur); font: 500 16px var(--nl-police-display); font-variant-numeric: tabular-nums;
}
.nl-etapes > li::after { content: ""; position: absolute; left: 18.5px; top: 40px; bottom: 0; width: 3px; border-radius: 2px; background: var(--nl-trait); }
.nl-etapes > li:last-child { padding-bottom: 0; }
.nl-etapes > li:last-child::before { background: var(--nl-construire-de); color: var(--nl-construire-sur); }
.nl-etapes > li:last-child::after { display: none; }
.nl-etapes strong, .nl-etapes__titre { display: block; color: var(--nl-texte); font-size: var(--nl-t-18); font-weight: 500; }
@media (min-width: 901px) {
  .nl-etapes--ligne { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: var(--nl-gouttiere); }
  .nl-etapes--ligne > li { padding: 52px 0 0; }
  .nl-etapes--ligne > li::after { left: 52px; right: calc(-1 * var(--nl-gouttiere) + 12px); top: 18.5px; bottom: auto; width: auto; height: 3px; }
}

/* ------------------------------------------------------------- formulaire */
.nl-capture-form {
  box-sizing: border-box; margin: 0; display: flex; flex-direction: column; gap: 12px; padding: 28px;
  background: var(--nl-surface); border: 1px solid transparent; border-radius: var(--nl-r-carte); box-shadow: var(--nl-ombre);
}
.nl-form__champ { display: flex; flex-direction: column; gap: 8px; }
.nl-form__champ label { font-size: var(--nl-t-14); font-weight: 500; color: var(--nl-texte); }
.nl-form__champ :is(input, textarea, select) {
  box-sizing: border-box; min-height: 48px; min-width: 0; padding: 0 16px; border-radius: var(--nl-r-tuile);
  border: 1.5px solid var(--nl-champ-bord); background: var(--nl-papier); color: var(--nl-encre);
  font: 400 16px var(--nl-police-body);
}
.nl-form__champ textarea { padding-block: 12px; min-height: 144px; }
.nl-capture-form__reassurance, .nl-form__note { margin: 4px 0 0; font-size: var(--nl-t-13); line-height: 20px; color: var(--nl-texte-2); }

/* ----------------------------------------------------- photos, réserves */
.nl-photo { display: block; width: 100%; height: auto; object-fit: cover; border-radius: var(--nl-r-carte); }
.nl-photo--4-5 { aspect-ratio: 4 / 5; }
.nl-photo--2-3 { aspect-ratio: 2 / 3; border-radius: 8px; }
.nl-portrait { display: flex; flex-direction: column; gap: 6px; }
.nl-portrait--ligne { flex-direction: row; gap: 16px; align-items: flex-start; }
.nl-portrait--ligne .nl-photo { width: 112px; flex: none; border-radius: var(--nl-r-tuile); }
.nl-portrait__nom { margin: 8px 0 0; font: 500 24px / 30px var(--nl-police-display); letter-spacing: -0.02em; }
.nl-portrait--ligne .nl-portrait__nom { margin-top: 0; font-size: 19px; line-height: 24px; }
.nl-portrait__texte { margin: 4px 0 0; font-size: var(--nl-t-17); line-height: 1.55; color: var(--nl-texte-2); }
/* Emplacement réservé (couverture du livre à fournir) : visible, jamais une image de remplacement */
.nl-reserve {
  display: flex; align-items: center; justify-content: center; text-align: center;
  border: 1.5px dashed var(--nl-filet-fort); border-radius: var(--nl-r-carte);
  background: repeating-linear-gradient(135deg, var(--nl-surface-2) 0 8px, var(--nl-filet) 8px 9px);
  font: 400 var(--nl-t-12) var(--nl-police-mono); color: var(--nl-texte-2);
}
.nl-reserve--2-3 { aspect-ratio: 2 / 3; }
.nl-reserve--4-5 { aspect-ratio: 4 / 5; }

/* Encart : phrase mise en avant (manifeste), extrait offert */
.nl-encart-phrase { margin: 0; padding: 22px 26px; border-radius: var(--nl-r-carte); background: var(--nl-sable); color: var(--nl-encre); font: 500 var(--nl-t-22) / 1.4 var(--nl-police-display); letter-spacing: -0.01em; }
.nl-capture-encart {
  display: flex; flex-wrap: wrap; align-items: center; gap: 32px 64px; padding: clamp(28px, 4.4vw, 64px); border-radius: var(--nl-r-panneau);
  background: var(--nl-nuit);
}

/* ------------------------------------------------------------ pied de page */
.nl-footer { background: var(--nl-fond-2); border-top: 1.5px solid var(--nl-trait); }
.nl-footer__haut, .nl-footer__bas { box-sizing: content-box; max-width: var(--nl-maxw); margin-inline: auto; padding-inline: var(--nl-pad); display: flex; flex-wrap: wrap; justify-content: space-between; }
.nl-footer__haut { gap: 40px 48px; padding-block: 56px 40px; }
.nl-footer__marque { display: inline-flex; align-items: center; gap: 12px; align-self: flex-start; }
.nl-footer__mark { width: 22px; height: 26px; }
.nl-footer__mot { font: 500 var(--nl-t-22) / 1 var(--nl-police-display); letter-spacing: -0.025em; text-transform: lowercase; color: var(--nl-titre-fort); }
.nl-footer__colonnes { display: flex; flex-wrap: wrap; gap: 32px 72px; font-size: var(--nl-t-15); }
.nl-footer__colonne { display: flex; flex-direction: column; }
.nl-footer__titre { margin-bottom: 4px; font: 500 11px / 1.4 var(--nl-police-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--nl-texte-3); }
.nl-footer__colonne a { display: inline-flex; align-items: center; min-height: var(--nl-cible); color: var(--nl-texte) !important; text-decoration: none; }
.nl-footer__colonne a:hover { text-decoration: underline; text-underline-offset: 4px; }
.nl-footer__bas { gap: 12px 24px; padding-block: 20px 28px; border-top: 1px solid var(--nl-filet); font-size: var(--nl-t-13); color: var(--nl-texte-2); }

/* ---------------------------------------------------------------- symbole */
/* Le N tracé par quatre nœuds (partials/symbole.njk) : trait d'encre, nœuds aux couleurs d'étape, éclaircis sur la nuit. */
.nl-symbole { display: block; flex: none; fill: none; stroke: var(--nl-trait); stroke-width: 3.6; stroke-linecap: round; stroke-linejoin: round; }
.nl-symbole--petit { stroke-width: 6; }
.nl-symbole__noeud { stroke: none; }
.nl-symbole__noeud--comprendre { fill: var(--nl-comprendre-de); }
.nl-symbole__noeud--lab { fill: var(--nl-lab-de); }
.nl-symbole__noeud--arbitrer { fill: var(--nl-arbitrer-de); }
.nl-symbole__noeud--construire { fill: var(--nl-construire-de); }
:is(.nl-sombre, [data-theme="dark"]) .nl-symbole__noeud--comprendre { fill: var(--nl-comprendre-clair); }
:is(.nl-sombre, [data-theme="dark"]) .nl-symbole__noeud--lab { fill: var(--nl-lab-clair); }
:is(.nl-sombre, [data-theme="dark"]) .nl-symbole__noeud--arbitrer { fill: var(--nl-arbitrer-clair); }
:is(.nl-sombre, [data-theme="dark"]) .nl-symbole__noeud--construire { fill: var(--nl-construire-clair); }
/* Symbole à l'étape : le chemin entier en filet, l'encre jusqu'à l'étape en cours */
.nl-symbole--etape .nl-symbole__trait { stroke: var(--nl-filet-fort); }
.nl-symbole__encre { stroke: var(--nl-trait); }

/* -------------------------------------------------------------- mouvement */
/* Sobre et fonctionnel : survol des cartes, apparition unique des artefacts, tracé unique du graphe. Rien en boucle.
   L'état final est l'état par défaut : sans animation (ou avec prefers-reduced-motion), tout est déjà visible. */
@media (prefers-reduced-motion: no-preference) {
  .nl-btn, .nl-nav__link, .nl-catalogue__titre { transition: background-color var(--nl-duree) var(--nl-courbe), color var(--nl-duree) var(--nl-courbe), box-shadow var(--nl-duree) var(--nl-courbe); }
  .nl-carte, .nl-carte-capacite, .nl-carte-lab { transition: transform var(--nl-duree) var(--nl-courbe), box-shadow var(--nl-duree) var(--nl-courbe); }
  .nl-carte:hover, .nl-carte-capacite:hover, a.nl-carte-lab:hover, .nl-carte-lab:has(a:hover) { transform: translateY(-2px); box-shadow: var(--nl-ombre-survol); }
  .nl-graphe__noeud { animation: nl-apparait .4s var(--nl-courbe) both; }
  .nl-graphe__arete { animation: nl-apparait .15s linear both, nl-trace .7s var(--nl-courbe) both; }
  .nl-graphe [data-etape="1"] { animation-delay: .1s; }
  .nl-graphe [data-etape="2"] { animation-delay: .6s; }
  .nl-graphe [data-etape="3"] { animation-delay: 1.1s; }
  .nl-graphe [data-etape="4"] { animation-delay: 1.6s; }
  /* .nl-artefact--anime est posée par le script : sans JavaScript, l'artefact est visible d'emblée */
  .nl-artefact--anime:not(.nl-artefact--vu) { opacity: 0; transform: translateY(8px); }
  .nl-artefact--anime { transition: opacity .4s var(--nl-courbe), transform .4s var(--nl-courbe); }
}
@keyframes nl-apparait { from { opacity: 0; } }
/* les arêtes animées portent pathLength="1" */
@keyframes nl-trace { from { stroke-dasharray: 1; stroke-dashoffset: 1; } to { stroke-dasharray: 1; stroke-dashoffset: 0; } }