/* ══════════════════════════════════════════════════════════════════════════
   NuisiSoft — mise en page du site vitrine.

   Le système visuel (jetons, polices, composants `bmg-*`) vient d'un kit
   réutilisable et n'est pas retouché : ce fichier ne fait que poser la
   structure des pages par-dessus. Toute couleur vient d'un jeton — aucune
   valeur en dur, sinon un changement d'accent oblige à repasser partout.

   Aucun `<style>` dans les pages : la CSP autorise `style-src 'unsafe-inline'`
   mais pas les scripts, et mélanger les deux habitudes finit par produire un
   `<script>` inline qui casse silencieusement en production.
   ══════════════════════════════════════════════════════════════════════════ */

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--text-body);
  background: var(--surface);
}

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

/* Le focus doit se voir. Un applicateur qui remplit le formulaire au clavier
   dans son camion ne doit pas chercher où il en est. */
:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-xs); }

/* ── Lien d'évitement ───────────────────────────────────────────────────── */
.ns-skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--accent); color: var(--text-on-accent);
  padding: 10px 16px; border-radius: 0 0 var(--radius-sm) 0;
  font-weight: var(--fw-medium); text-decoration: none;
}
.ns-skip:focus { left: 0; }

/* ── Conteneur ──────────────────────────────────────────────────────────── */
.ns-wrap { max-width: 1180px; margin: 0 auto; padding: 0 24px; }

/* ── En-tête ────────────────────────────────────────────────────────────── */
.ns-head {
  position: sticky; top: 0; z-index: 50;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}
.ns-head__inner { display: flex; align-items: center; gap: 16px; height: 68px; }
.ns-head__logo { display: flex; align-items: center; gap: 9px; text-decoration: none; flex: none; }
.ns-head__logo:hover { text-decoration: none; }
.ns-head__logo svg { width: 26px; height: 26px; display: block; }
.ns-head__nom {
  font-family: var(--font-display); font-weight: var(--fw-medium);
  font-size: 19px; letter-spacing: var(--tracking-snug); color: var(--text-strong);
}

.ns-nav { margin-left: auto; display: flex; align-items: center; gap: 2px; }
.ns-nav a {
  position: relative; display: inline-flex; align-items: center; height: 68px;
  padding: 0 14px; font-size: 15px; font-weight: var(--fw-medium);
  color: var(--text-strong); text-decoration: none;
  transition: color var(--transition-fast, 110ms);
}
.ns-nav a:hover { color: var(--accent); text-decoration: none; }
.ns-nav a[aria-current="page"]::after {
  content: ""; position: absolute; left: 14px; right: 14px; bottom: -1px;
  height: 2px; background: var(--accent); border-radius: 2px;
}
.ns-head__cta { flex: none; margin-left: 10px; }

/* Le bouton du menu n'existe qu'en petite largeur. */
.ns-burger {
  display: none; margin-left: auto;
  width: 44px; height: 44px; padding: 0;
  background: none; border: 1px solid var(--border); border-radius: var(--radius-sm);
  cursor: pointer; align-items: center; justify-content: center; gap: 4px; flex-direction: column;
}
.ns-burger span { display: block; width: 18px; height: 2px; background: var(--text-body); border-radius: 1px; }

/* ── Sections ───────────────────────────────────────────────────────────── */
.ns-sec { padding: 84px 0; }
.ns-sec--tint { background: var(--surface-2); }
.ns-sec--lav { background: var(--surface-lavender-soft); }
.ns-sec--ink { background: var(--n-900); color: var(--n-100); }
.ns-sec--tight { padding: 56px 0; }

.ns-sec__head { max-width: 720px; margin-bottom: 44px; }
.ns-kick {
  font-family: var(--font-mono); font-size: var(--text-2xs);
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-muted); margin: 0 0 10px;
}
.ns-sec--ink .ns-kick { color: var(--pw-300); }
.ns-h2 {
  font-family: var(--font-display); font-weight: var(--fw-medium);
  font-size: var(--text-3xl); line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight); color: var(--text-strong); margin: 0;
  text-wrap: balance;
}
.ns-sec--ink .ns-h2 { color: var(--n-0); }
.ns-lede {
  font-size: var(--text-md); line-height: var(--leading-relaxed);
  color: var(--text-secondary); margin: 14px 0 0; max-width: 62ch;
}
.ns-sec--ink .ns-lede { color: var(--n-300); }
/* ⚠️ Tout ce qui porte une couleur d'encre doit être repris sur fond sombre.
   Un titre de carte y restait en `--text-strong` : 1,07:1, c'est-à-dire du
   texte invisible. Trouvé en mesurant les couleurs FINALEMENT peintes — la
   feuille de style, elle, ne montrait rien d'anormal. */
.ns-sec--ink .ns-card__t,
.ns-sec--ink h3 { color: var(--n-0); }
.ns-sec--ink p,
.ns-sec--ink .ns-card__intro { color: var(--n-300); }

/* ⚠️ Mais une CARTE posée sur la section sombre garde son fond clair : son
   texte doit redevenir foncé. La règle ci-dessus, appliquée sans cette
   exception, mettait un titre blanc sur une carte blanche — 1,00:1, du texte
   qui n'existe plus. Corriger un contraste peut en casser un autre : c'est
   pour ça qu'on mesure après, et pas seulement avant. */
.ns-sec--ink .ns-card .ns-card__t,
.ns-sec--ink .ns-card h3 { color: var(--text-strong); }
.ns-sec--ink .ns-card p,
.ns-sec--ink .ns-card .ns-card__intro,
.ns-sec--ink .ns-card .ns-liste li { color: var(--text-secondary); }

/* ── Hero ───────────────────────────────────────────────────────────────── */
.ns-hero { padding: 72px 0 88px; border-bottom: 1px solid var(--border-subtle); }
.ns-hero__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.ns-hero h1 {
  font-family: var(--font-display); font-weight: var(--fw-medium);
  font-size: var(--text-4xl); line-height: 1.08;
  letter-spacing: var(--tracking-tight); color: var(--text-strong);
  margin: 16px 0 0; text-wrap: balance;
}
.ns-hero__sub {
  font-size: var(--text-md); line-height: var(--leading-relaxed);
  color: var(--text-secondary); margin: 20px 0 0; max-width: 54ch;
}
.ns-hero__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.ns-hero__note { font-size: var(--text-sm); color: var(--text-muted); margin: 16px 0 0; }

/* ── Le plan d'implantation : le geste visuel du produit ────────────────── */
.ns-plan {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg, 12px);
  box-shadow: var(--shadow-md, 0 8px 24px rgba(20, 29, 56, .07));
  overflow: hidden;
}
.ns-plan__bar {
  display: flex; align-items: center; gap: 8px;
  padding: 11px 14px; border-bottom: 1px solid var(--border-subtle);
  background: var(--surface-2);
  font-family: var(--font-mono); font-size: var(--text-2xs); color: var(--text-muted);
}
.ns-plan__pastille { width: 8px; height: 8px; border-radius: var(--radius-pill, 99px); background: var(--border-strong); flex: none; }
.ns-plan__corps { padding: 14px; }
.ns-plan__legende {
  display: flex; flex-wrap: wrap; gap: 6px 16px;
  padding: 0 14px 14px; font-size: var(--text-2xs); color: var(--text-secondary);
}
.ns-plan__legende span { display: inline-flex; align-items: center; gap: 6px; }
.ns-plan__puce { width: 9px; height: 9px; border-radius: var(--radius-pill, 99px); flex: none; }

/* ── Grilles ────────────────────────────────────────────────────────────── */
.ns-grid { display: grid; gap: 20px; }
.ns-grid--2 { grid-template-columns: repeat(2, 1fr); }
.ns-grid--3 { grid-template-columns: repeat(3, 1fr); }
.ns-grid--4 { grid-template-columns: repeat(4, 1fr); }

/* ── Carte ──────────────────────────────────────────────────────────────── */
.ns-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-md, 8px); padding: 24px;
}
.ns-sec--tint .ns-card { background: var(--surface); }
.ns-card__t {
  font-family: var(--font-display); font-weight: var(--fw-medium);
  font-size: var(--text-lg); line-height: var(--leading-snug);
  color: var(--text-strong); margin: 0 0 8px;
}
.ns-card p { font-size: var(--text-sm); line-height: var(--leading-relaxed); color: var(--text-secondary); margin: 0; }
.ns-card__icone {
  width: 34px; height: 34px; border-radius: var(--radius-sm);
  background: var(--accent-tint); color: var(--accent);
  display: flex; align-items: center; justify-content: center; margin-bottom: 14px;
}
.ns-card__icone svg { width: 19px; height: 19px; display: block; }

/* ── Le constat : ce que vit l'applicateur aujourd'hui ──────────────────── */
.ns-douleur {
  display: flex; gap: 14px; padding: 18px 0;
  border-bottom: 1px solid var(--border-subtle);
}
.ns-douleur:last-child { border-bottom: 0; }
.ns-douleur__h {
  flex: none; width: 26px; height: 26px; border-radius: var(--radius-sm);
  background: var(--danger-bg); color: var(--danger-fg);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: var(--text-2xs);
}
.ns-douleur p { margin: 0; font-size: var(--text-sm); line-height: var(--leading-relaxed); color: var(--text-secondary); }
.ns-douleur strong { color: var(--text-body); font-weight: var(--fw-medium); }

/* ── Le parcours en quatre temps ────────────────────────────────────────── */
.ns-etapes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; }
.ns-etape { padding: 0 24px 0 0; position: relative; }
.ns-etape::before {
  content: ""; position: absolute; left: 0; right: 0; top: 15px;
  height: 1px; background: var(--border);
}
.ns-etape:last-child::before { right: auto; width: 32px; }
.ns-etape__n {
  position: relative; z-index: 1;
  width: 32px; height: 32px; border-radius: var(--radius-pill, 99px);
  background: var(--accent); color: var(--text-on-accent);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: var(--text-xs); font-weight: var(--fw-medium);
}
.ns-etape__t {
  font-family: var(--font-display); font-weight: var(--fw-medium);
  font-size: var(--text-base); color: var(--text-strong); margin: 16px 0 6px;
}
.ns-etape p { margin: 0; font-size: var(--text-sm); line-height: var(--leading-relaxed); color: var(--text-secondary); }

/* ── Liste à puces accentuées ───────────────────────────────────────────── */
/* ⚠️ La puce est POSITIONNÉE, pas mise en flex. Avec `display:flex` sur le
   `li`, un `<strong>` en tête de phrase devient un élément flexible à lui seul
   et le reste du texte un second : la phrase se casse en deux colonnes, le
   gras se replie sur trois lignes et la suite s'aligne ailleurs. Vu en ligne
   le 2026-08-23 sur la page Fonctions. En flux normal, tout reste une phrase. */
.ns-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.ns-liste li {
  position: relative; padding-left: 18px;
  font-size: var(--text-sm); line-height: var(--leading-relaxed); color: var(--text-secondary);
}
.ns-liste li::before {
  content: ""; position: absolute; left: 0; top: 8px;
  width: 7px; height: 7px;
  border-radius: var(--radius-pill, 99px); background: var(--accent);
}
.ns-sec--ink .ns-liste li { color: var(--n-300); }
.ns-sec--ink .ns-liste li::before { background: var(--pw-400); }

/* ── Bloc « où en est le produit » ──────────────────────────────────────── */
.ns-etat {
  border: 1px solid var(--accent-border); background: var(--accent-tint-soft);
  border-radius: var(--radius-md, 8px); padding: 28px 30px;
}
.ns-etat__t {
  font-family: var(--font-display); font-weight: var(--fw-medium);
  font-size: var(--text-xl); color: var(--text-strong); margin: 0 0 10px;
}
.ns-etat p { margin: 0; font-size: var(--text-base); line-height: var(--leading-relaxed); color: var(--text-secondary); max-width: 68ch; }

/* ── Questions / objections ─────────────────────────────────────────────── */
.ns-faq { display: grid; gap: 0; max-width: 780px; }
.ns-faq details { border-bottom: 1px solid var(--border); }
.ns-faq summary {
  display: flex; align-items: flex-start; gap: 12px; cursor: pointer;
  padding: 20px 0; list-style: none;
  font-family: var(--font-display); font-weight: var(--fw-medium);
  font-size: var(--text-md); color: var(--text-strong);
}
.ns-faq summary::-webkit-details-marker { display: none; }
.ns-faq summary::after {
  content: "+"; margin-left: auto; flex: none;
  font-family: var(--font-mono); font-size: var(--text-lg); color: var(--accent); line-height: 1;
}
.ns-faq details[open] summary::after { content: "–"; }
.ns-faq details p { margin: 0 0 20px; font-size: var(--text-sm); line-height: var(--leading-relaxed); color: var(--text-secondary); max-width: 66ch; }

/* ── Formulaire ─────────────────────────────────────────────────────────── */
.ns-form { display: grid; gap: 16px; }
.ns-form__duo { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.ns-form textarea.bmg-input { min-height: 110px; resize: vertical; font-family: inherit; }
/* Le piège à robots. `aria-hidden` + `tabindex` le retirent aussi du clavier
   et des lecteurs d'écran : un humain ne peut pas le remplir par accident. */
.ns-pot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.ns-form__rgpd a { color: var(--accent-strong); }
.ns-form__rgpd { font-size: var(--text-2xs); line-height: var(--leading-relaxed); color: var(--text-muted); margin: 0; max-width: 62ch; }
.ns-form__retour { font-size: var(--text-sm); margin: 0; padding: 12px 14px; border-radius: var(--radius-sm); display: none; }
.ns-form__retour.est-ok { display: block; background: var(--success-bg); color: var(--success-fg); border: 1px solid var(--success-border); }
.ns-form__retour.est-ko { display: block; background: var(--danger-bg); color: var(--danger-fg); border: 1px solid var(--danger-border); }

/* ── Appel final ────────────────────────────────────────────────────────── */
.ns-final__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; }

/* ── Pied de page ───────────────────────────────────────────────────────── */
.ns-pied { background: var(--n-900); color: var(--n-300); padding: 56px 0 32px; }
.ns-pied__grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 40px; }
.ns-pied__nom {
  font-family: var(--font-display); font-weight: var(--fw-medium);
  font-size: var(--text-lg); color: var(--n-0); margin: 0 0 10px;
}
.ns-pied p { font-size: var(--text-sm); line-height: var(--leading-relaxed); margin: 0; color: var(--n-400); }
.ns-pied__t { font-size: var(--text-xs); font-weight: var(--fw-medium); color: var(--n-0); margin: 0 0 14px; letter-spacing: var(--tracking-label); }
.ns-pied nav { display: flex; flex-direction: column; gap: 10px; }
.ns-pied a { font-size: var(--text-sm); color: var(--n-300); text-decoration: none; }
.ns-pied a:hover { color: var(--n-0); text-decoration: underline; text-underline-offset: 2px; }
.ns-pied__bas {
  margin-top: 44px; padding-top: 22px; border-top: 1px solid var(--n-800);
  display: flex; flex-wrap: wrap; gap: 8px 20px; justify-content: space-between;
  /* `--n-500` sur le fond sombre du pied donne 3,41:1 — sous le seuil de
     4,5:1 exigé pour du texte de cette taille. Une mention légale illisible
     n'est pas une mention légale. */
  font-size: var(--text-2xs); color: var(--n-400);
}

/* ── Page légale : onglets sans JavaScript ──────────────────────────────── */
.ns-onglets { display: flex; flex-wrap: wrap; gap: 4px; border-bottom: 1px solid var(--border); margin-bottom: 32px; }
.ns-onglets a {
  padding: 12px 16px; font-size: var(--text-sm); font-weight: var(--fw-medium);
  color: var(--text-secondary); text-decoration: none; border-bottom: 2px solid transparent;
}
.ns-onglets a:hover { color: var(--accent); text-decoration: none; }
.ns-onglets a[aria-current="true"] { color: var(--accent); border-bottom-color: var(--accent); }
.ns-doc { max-width: 74ch; }
.ns-doc h2 { font-family: var(--font-display); font-weight: var(--fw-medium); font-size: var(--text-xl); color: var(--text-strong); margin: 36px 0 10px; }
.ns-doc h2:first-child { margin-top: 0; }
.ns-doc h3 { font-family: var(--font-display); font-weight: var(--fw-medium); font-size: var(--text-base); color: var(--text-strong); margin: 24px 0 6px; }
.ns-doc p, .ns-doc li { font-size: var(--text-sm); line-height: var(--leading-relaxed); color: var(--text-secondary); }
.ns-doc ul { padding-left: 20px; }
.ns-doc dt { font-size: var(--text-sm); font-weight: var(--fw-medium); color: var(--text-body); margin-top: 14px; }
.ns-doc dd { font-size: var(--text-sm); color: var(--text-secondary); margin: 2px 0 0; }

/* ── Tableau ────────────────────────────────────────────────────────────── */
.ns-tablewrap { overflow-x: auto; }
.ns-table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); min-width: 520px; }
.ns-table th, .ns-table td { text-align: left; padding: 14px 16px; border-bottom: 1px solid var(--border-subtle); vertical-align: top; }
.ns-table th { font-weight: var(--fw-medium); color: var(--text-body); font-size: var(--text-xs); letter-spacing: var(--tracking-label); }
.ns-table td { color: var(--text-secondary); }

/* ── Utilitaires ────────────────────────────────────────────────────────── */
.ns-mt-l { margin-top: 40px; }
.ns-mt-m { margin-top: 24px; }
.ns-centre { text-align: center; }

/* ══════════════════════════════════════════════════════════════════════════
   Adaptatif. Trois paliers, correspondant aux trois façons de lire le site :
   le téléphone dans le camion, la tablette, l'écran du bureau.
   ══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 1000px) {
  .ns-hero__grid { grid-template-columns: 1fr; gap: 40px; }
  .ns-final__grid { grid-template-columns: 1fr; gap: 36px; }
  .ns-grid--4 { grid-template-columns: repeat(2, 1fr); }
  .ns-etapes { grid-template-columns: repeat(2, 1fr); row-gap: 32px; }
  .ns-etape:nth-child(2)::before { right: auto; width: 32px; }
  .ns-pied__grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 860px) {
  /* Le menu passe derrière un bouton. Ouvert, il pousse le contenu plutôt que
     de le recouvrir : sur un téléphone, un menu qui flotte cache la page qu'on
     venait de lire. */
  .ns-burger { display: flex; }
  .ns-nav {
    display: none; position: absolute; top: 68px; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--surface); border-bottom: 1px solid var(--border);
    padding: 8px 24px 16px;
    box-shadow: var(--shadow-md, 0 8px 24px rgba(20, 29, 56, .07));
  }
  .ns-nav.est-ouvert { display: flex; }
  .ns-nav a { height: 48px; padding: 0 4px; }
  .ns-nav a[aria-current="page"]::after { left: 4px; right: auto; width: 22px; bottom: 8px; }
  .ns-head__cta { display: none; }
  .ns-head__inner { position: relative; }
}

@media (max-width: 720px) {
  .ns-sec { padding: 56px 0; }
  .ns-hero { padding: 48px 0 56px; }
  .ns-hero h1 { font-size: var(--text-3xl); }
  .ns-h2 { font-size: var(--text-2xl); }
  .ns-grid--2, .ns-grid--3, .ns-grid--4 { grid-template-columns: 1fr; }
  .ns-etapes { grid-template-columns: 1fr; row-gap: 28px; }
  .ns-etape { padding-right: 0; }
  .ns-etape::before { display: none; }
  .ns-form__duo { grid-template-columns: 1fr; }
  .ns-pied__grid { grid-template-columns: 1fr; gap: 32px; }
  /* Cibles tactiles : 44 px minimum, comme dans l'ERP. */
  .bmg-btn--lg, .bmg-btn--md { min-height: 44px; }
  .ns-faq summary { padding: 18px 0; min-height: 44px; }
}

@media (max-width: 400px) {
  .ns-wrap { padding: 0 18px; }
  .ns-hero h1 { font-size: var(--text-2xl); }
}

/* ── Le plan du hero ────────────────────────────────────────────────────────
   Les couleurs passent par des classes et non par des attributs SVG : un
   `fill="var(--x)"` ne se résout PAS. Les attributs de présentation ne
   comprennent pas les variables CSS — seules les déclarations les acceptent.
   Le plan serait sorti tout noir, sans le moindre message d'erreur.

   Les couleurs des postes, elles, restent en dur : ce sont exactement celles
   de la carte de chaleur du produit, et elles doivent lui correspondre au
   pixel près, pas suivre l'accent du site. */
.pl-fond  { fill: var(--surface-2); }
.pl-trame { stroke: var(--border-subtle); stroke-width: 1; fill: none; }
.pl-murs  { stroke: var(--n-800); stroke-width: 3; fill: none; stroke-linejoin: round; }
.pl-zone  { fill: var(--text-muted); font-family: var(--font-mono); font-size: 11px; }
.pl-etiq  { fill: var(--text-secondary); font-family: var(--font-mono); font-size: 10.5px; text-anchor: middle; }

/* Les étapes forment une liste ordonnée : la numérotation du navigateur ferait
   doublon avec les pastilles, qui portent déjà le rang. */
.ns-etapes { list-style: none; margin: 0; padding: 0; }

.ns-card__intro { margin-bottom: 16px !important; }

/* Sur un téléphone, deux boutons de largeurs différentes font désordre et le
   secondaire paraît moins cliquable qu'il ne l'est. */
@media (max-width: 720px) {
  .ns-hero__cta { flex-direction: column; align-items: stretch; }
  .ns-hero__cta .bmg-btn { width: 100%; }
}

/* Une introduction de page est un en-tête de section que rien ne suit : sa
   marge basse ouvre alors un vide qui ressemble à un bloc manquant. */
.ns-sec__head:last-child { margin-bottom: 0; }

/* Un texte centré doit être centré en entier, marges comprises. */
.ns-centre .ns-lede { margin-left: auto; margin-right: auto; }

/* Une suite d'étapes : le rang est une information, une puce ne la porte pas. */
.ns-liste--num { counter-reset: etape; }
.ns-liste--num li { padding-left: 32px; }
.ns-liste--num li::before {
  counter-increment: etape; content: counter(etape);
  top: 1px; width: 20px; height: 20px; border-radius: var(--radius-pill, 99px);
  background: var(--accent-tint); color: var(--accent-strong);
  font-family: var(--font-mono); font-size: 11px; line-height: 20px; text-align: center;
}

/* ── Captures produit ───────────────────────────────────────────────────────
   `width` et `height` sont portés par la balise `img`, pas par ces règles : le
   navigateur réserve la place avant que l'image arrive, et la page ne saute pas
   sous le doigt du lecteur.

   Les images sont capturées à l'échelle 2 et affichées à 1 : un écran de
   téléphone ou un portable récent affiche deux pixels physiques pour un pixel
   de mise en page, et une capture à l'échelle 1 y paraît floue.

   LES CADRES SONT DESSINÉS ICI, pas incrustés dans l'image. Une barre de
   navigateur en pixels ne se redimensionne pas proprement, pèse dans le
   fichier, et vieillit — celle-ci suit les jetons du site et le thème. */

.ns-shot { margin: 0; }
.ns-shot img { display: block; width: 100%; height: auto; }

/* Le cadre « fenêtre de navigateur ». Trois pastilles et une barre d'adresse
   suggérée : assez pour dire « c'est un logiciel », pas assez pour imiter un
   navigateur en particulier — ce qui daterait la capture. */
.ns-fen {
  border: 1px solid var(--border);
  border-radius: var(--radius-md, 10px);
  overflow: hidden;
  background: var(--surface);
  box-shadow: 0 1px 2px rgba(20, 29, 56, .04), 0 12px 32px -8px rgba(20, 29, 56, .14);
}
.ns-fen__bar {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 14px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--border-subtle);
}
.ns-fen__pt { width: 9px; height: 9px; border-radius: var(--radius-pill, 99px); flex: none; background: var(--border-strong); }
.ns-fen__url {
  flex: 1; margin-left: 6px;
  font-family: var(--font-mono); font-size: var(--text-2xs); color: var(--text-muted);
  background: var(--surface); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-pill, 99px); padding: 3px 12px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ns-fen img { display: block; width: 100%; height: auto; }

/* Le cadre « téléphone ». Un contour épais et des coins très arrondis suffisent
   à faire lire « mobile » ; dessiner une encoche et des boutons imiterait un
   modèle précis, et le site vieillirait avec lui. */
.ns-tel {
  width: 100%; max-width: 300px; margin: 0 auto;
  padding: 10px;
  background: var(--n-900);
  border-radius: 30px;
  box-shadow: 0 1px 2px rgba(20, 29, 56, .1), 0 18px 40px -10px rgba(20, 29, 56, .3);
}
.ns-tel img { display: block; width: 100%; height: auto; border-radius: 21px; background: var(--surface); }

/* Un document se pose sur une feuille, pas dans une fenêtre : c'est un PDF
   remis au client, pas un écran. */
.ns-doc-shot {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm, 6px);
  background: #fff;
  padding: 18px;
  box-shadow: 0 1px 2px rgba(20, 29, 56, .04), 0 14px 36px -10px rgba(20, 29, 56, .16);
}
.ns-doc-shot img { display: block; width: 100%; height: auto; }

.ns-shot figcaption, .ns-legende {
  font-size: var(--text-2xs); color: var(--text-muted);
  margin-top: 12px; line-height: var(--leading-relaxed);
}
.ns-sec--ink .ns-shot figcaption, .ns-sec--ink .ns-legende { color: var(--n-400); }

/* Le conteneur qui laisse défiler une capture trop large pour l'écran.
   En grand format il ne fait rien ; sous 760 px il évite qu'une capture soit
   réduite au point d'être illisible — les étiquettes de postes d'un plan font
   alors deux pixels de haut, et l'image ne prouve plus rien. */
.ns-pan { overflow-x: auto; overscroll-behavior-x: contain; }
.ns-pan img { display: block; width: 100%; height: auto; }

@media (max-width: 760px) {
  /* On garde une largeur où le texte de l'interface reste lisible, et on fait
     glisser. Un indice le dit, sinon personne ne devine qu'on peut. */
  .ns-pan img { width: auto; max-width: none; height: 380px; }
  .ns-doc-shot .ns-pan img, .ns-fen .ns-pan img { height: auto; width: 640px; }
  .ns-shot figcaption::after,
  .ns-legende::after {
    content: " — faites glisser l’image pour la parcourir.";
    color: var(--accent-strong);
  }
}

/* Le duo « une image, un texte à côté ». */
.ns-duo { display: grid; grid-template-columns: 1.3fr 1fr; gap: 48px; align-items: center; }
.ns-duo--inverse { grid-template-columns: 1fr 1.3fr; }

@media (max-width: 900px) {
  .ns-duo, .ns-duo--inverse { grid-template-columns: 1fr; gap: 32px; }
  /* Sur une colonne, l'image passe toujours après le texte qui l'annonce. */
  .ns-duo--inverse > figure, .ns-duo--inverse > .ns-fen, .ns-duo--inverse > .ns-tel { order: 2; }
}

/* ── Le plan du hero ────────────────────────────────────────────────────────
   Les couleurs passent par des classes et non par des attributs SVG : un
   `fill="var(--x)"` ne se résout PAS. Les attributs de présentation ne
   comprennent pas les variables CSS — seules les déclarations les acceptent.
   Le plan serait sorti tout noir, sans le moindre message d'erreur.

   Les couleurs des postes, elles, restent en dur : ce sont exactement celles
   de la carte de chaleur du produit, et elles doivent lui correspondre au
   pixel près, pas suivre l'accent du site. */
.pl-fond  { fill: var(--surface-2); }
.pl-trame { stroke: var(--border-subtle); stroke-width: 1; fill: none; }
.pl-murs  { stroke: var(--n-800); stroke-width: 3; fill: none; stroke-linejoin: round; }
.pl-zone  { fill: var(--text-muted); font-family: var(--font-mono); font-size: 11px; }
.pl-etiq  { fill: var(--text-secondary); font-family: var(--font-mono); font-size: 10.5px; text-anchor: middle; }

/* Les étapes forment une liste ordonnée : la numérotation du navigateur ferait
   doublon avec les pastilles, qui portent déjà le rang. */
.ns-etapes { list-style: none; margin: 0; padding: 0; }

.ns-card__intro { margin-bottom: 16px !important; }

/* Sur un téléphone, deux boutons de largeurs différentes font désordre et le
   secondaire paraît moins cliquable qu'il ne l'est. */
@media (max-width: 720px) {
  .ns-hero__cta { flex-direction: column; align-items: stretch; }
  .ns-hero__cta .bmg-btn { width: 100%; }
}

/* Une introduction de page est un en-tête de section que rien ne suit : sa
   marge basse ouvre alors un vide qui ressemble à un bloc manquant. */
.ns-sec__head:last-child { margin-bottom: 0; }

/* Un texte centré doit être centré en entier, marges comprises. */
.ns-centre .ns-lede { margin-left: auto; margin-right: auto; }

/* Une suite d'étapes : le rang est une information, une puce ne la porte pas. */
.ns-liste--num { counter-reset: etape; }
.ns-liste--num li { padding-left: 32px; }
.ns-liste--num li::before {
  counter-increment: etape; content: counter(etape);
  top: 1px; width: 20px; height: 20px; border-radius: var(--radius-pill, 99px);
  background: var(--accent-tint); color: var(--accent-strong);
  font-family: var(--font-mono); font-size: 11px; line-height: 20px; text-align: center;
}

/* ── Captures produit ───────────────────────────────────────────────────────
   `width` et `height` sont sur la balise, pas ici : le navigateur réserve la
   place avant que l'image arrive, et la page ne saute pas sous le doigt du
   lecteur au moment du chargement. */
.ns-capture { margin: 0; }
.ns-capture img {
  display: block; width: 100%; height: auto;
  border: 1px solid var(--border); border-radius: var(--radius-md, 8px);
  background: var(--surface);
  box-shadow: var(--shadow-md, 0 8px 24px rgba(20, 29, 56, .07));
}
.ns-capture--tel img { max-width: 300px; margin: 0 auto; }
.ns-capture figcaption {
  font-size: var(--text-2xs); color: var(--text-muted);
  margin-top: 10px; line-height: var(--leading-relaxed);
}
.ns-sec--ink .ns-capture figcaption { color: var(--n-400); }
.ns-capture--tel figcaption { text-align: center; }

/* Le duo « une grande capture, un texte à côté ». */
.ns-duo { display: grid; grid-template-columns: 1.35fr 1fr; gap: 48px; align-items: center; }
.ns-duo--inverse { grid-template-columns: 1fr 1.35fr; }

@media (max-width: 900px) {
  .ns-duo, .ns-duo--inverse { grid-template-columns: 1fr; gap: 32px; }
  /* Sur une colonne, l'image passe toujours après le texte qui l'annonce. */
  .ns-duo--inverse .ns-capture { order: 2; }
}

.ns-pied__note { font-size: var(--text-2xs); color: var(--n-400); margin-top: 18px; line-height: var(--leading-relaxed); }
.ns-pied__ex { font-family: var(--font-mono); color: var(--n-300); }

/* ══════════════════════════════════════════════════════════════════════════
   L'ATELIER D'INTERFACE — les illustrations du produit, DESSINÉES.

   Aucune capture d'écran sur ce site. Une capture vieillit au premier
   changement d'écran, se lit mal sur un téléphone, et ne prouve rien de plus
   qu'un dessin. Ce qui suit reconstruit l'interface en HTML, CSS et SVG :
   c'est net à toutes les tailles, ça pèse quelques kilo-octets, et surtout
   ça peut BOUGER — une carte d'activité qui se vide au fil des passages
   raconte le produit en cinq secondes, là où un tableau demanderait dix
   lignes de texte.

   ⚠️ Le mouvement est décoratif, jamais porteur d'information : la carte est
   lisible arrêtée, et `prefers-reduced-motion` la fige sur le dernier état.
   ⚠️ Aucune ressource extérieure — la politique de sécurité du site est
   `default-src 'self'` et n'admet aucun hôte tiers.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Le cadre : une fenêtre du logiciel, sans faire semblant d'être une photo ── */
.ui {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: 0 1px 2px rgba(20, 29, 56, .04), 0 18px 44px -12px rgba(20, 29, 56, .16);
  overflow: hidden;
}
.ui__bar {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 14px;
  border-bottom: 1px solid var(--border-subtle);
  background: var(--surface-sunken);
  font-family: var(--font-mono); font-size: var(--text-2xs);
  letter-spacing: var(--tracking-label); text-transform: uppercase;
  color: var(--text-muted);
}
.ui__pts { display: flex; gap: 5px; flex: none; }
.ui__pts i { width: 8px; height: 8px; border-radius: var(--radius-pill); background: var(--border-strong); display: block; }
.ui__titre { color: var(--text-secondary); }
.ui__droite { margin-left: auto; display: flex; align-items: center; gap: 8px; }

/* Un chiffre affiché comme le logiciel l'affiche. */
.ui__jeton {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 8px; border-radius: var(--radius-pill);
  background: var(--accent-tint); color: var(--accent-strong);
  font-family: var(--font-mono); font-size: var(--text-2xs); letter-spacing: 0;
  text-transform: none; white-space: nowrap;
}

/* ── La carte d'activité ─────────────────────────────────────────────────── */
.ui-carte__toile { position: relative; background: var(--surface); }
.ui-carte__toile svg { display: block; width: 100%; height: auto; }

/* Le plan lui-même : des traits, pas des aplats. Un plan trop dessiné se met à
   ressembler à un jeu vidéo et cesse d'avoir l'air d'un document de travail. */
.uc-fond   { fill: var(--surface); }
.uc-piece  { fill: var(--surface-sunken); stroke: none; }
.uc-trame  { stroke: var(--border-subtle); stroke-width: 1; opacity: .5; }
.uc-mur    { stroke: var(--n-400); stroke-width: 2.2; fill: none; stroke-linecap: square; }
.uc-cloison{ stroke: var(--n-300); stroke-width: 1.6; fill: none; stroke-linecap: round; }
.uc-zone {
  fill: var(--text-muted); font-family: var(--font-mono); font-size: 10.5px;
  letter-spacing: .09em; text-transform: uppercase;
}

/* La chaleur : un halo dégradé, pas une pastille. C'est ce qui fait la
   différence entre « une carte de chaleur » et « des points colorés ». */
.uc-halo { transition: opacity 900ms cubic-bezier(.4,0,.2,1), transform 900ms cubic-bezier(.4,0,.2,1); transform-box: fill-box; transform-origin: center; }
.uc-pastille {
  stroke: var(--surface); stroke-width: 2.5;
  transition: transform 700ms cubic-bezier(.4,0,.2,1);
  transform-box: fill-box; transform-origin: center;
}
.uc-code {
  fill: var(--text-secondary); font-family: var(--font-mono); font-size: 9.5px;
  letter-spacing: .04em; text-anchor: middle;
}

/* Les quatre niveaux, tels que le rapport les imprime. La couleur est la même
   partout dans le produit : la légende ne s'apprend qu'une fois. */
/* La teinte est posée sur le GROUPE, et le halo comme la pastille la
   reprennent en `currentColor` : le dégradé du halo suit alors la couleur du
   niveau sans qu'il faille quatre dégradés dans les `defs`, et la transition
   de `color` fait glisser le rouge vers l'ambre au lieu de le remplacer d'un
   coup. Une carte qui saute d'une couleur à l'autre a l'air cassée. */
.uc-poste { color: #1BAF7A; transition: color 700ms cubic-bezier(.4,0,.2,1), opacity 500ms ease; }
.uc-n0 { color: #1BAF7A; }
.uc-n1 { color: #EAB308; }
.uc-n2 { color: #D97706; }
.uc-n3 { color: #DC2626; }
.uc-pastille { fill: currentColor; }
/* La chaleur : un disque plein, flouté.

   ⚠️ PAS de <radialGradient>. `stop-color: currentColor` s'y résout sur le
   DÉGRADÉ, pas sur l'élément qui l'appelle : les quatre niveaux sortaient
   tous en gris, et rien ne le signalait.

   ⚠️ Et PAS de <filter> posé sur le groupe. Un filtre et une découpe sur le
   même élément font dupliquer à Chrome les pixels du bord le long de la
   découpe : des traînées vertes et rouges apparaissaient le long des murs,
   avec des couleurs venues d'un poste situé à l'autre bout du plan. Un flou
   par disque n'a pas de région de filtre commune — rien ne peut baver d'un
   poste sur l'autre, et le flou suit l'échelle du disque au lieu d'être figé. */
.uc-halo { fill: currentColor; filter: blur(21px); }
.uc-n0 .uc-halo { opacity: .16; transform: scale(.42); }
.uc-n1 .uc-halo { opacity: .40; transform: scale(.72); }
.uc-n2 .uc-halo { opacity: .58; transform: scale(.92); }
.uc-n3 .uc-halo { opacity: .78; transform: scale(1.14); }
.uc-n3 .uc-pastille { transform: scale(1.16); }

/* Un poste actif attire l'œil sans clignoter : une respiration lente, et
   seulement sur le niveau le plus haut. */
@keyframes uc-respire { 0%, 100% { opacity: .78; } 50% { opacity: .54; } }
.uc-n3 .uc-halo { animation: uc-respire 3.4s ease-in-out infinite; }

/* ── La frise des passages ───────────────────────────────────────────────── */
.ui-frise {
  display: flex; align-items: center; gap: 0;
  padding: 14px 16px; border-top: 1px solid var(--border-subtle);
  background: var(--surface);
}
.ui-frise__b {
  flex: 1; appearance: none; border: 0; background: none; cursor: pointer;
  padding: 6px 4px 0; text-align: left; position: relative;
  font-family: var(--font-mono); font-size: var(--text-2xs);
  color: var(--text-muted); letter-spacing: .04em;
  transition: color var(--transition-fast);
}
.ui-frise__b::before {
  content: ""; display: block; height: 3px; border-radius: var(--radius-pill);
  background: var(--border); margin-bottom: 8px;
  transition: background var(--transition), transform var(--transition);
  transform-origin: left center;
}
.ui-frise__b:hover { color: var(--text-secondary); }
.ui-frise__b[aria-current="true"] { color: var(--accent-strong); }
.ui-frise__b[aria-current="true"]::before { background: var(--accent); }
.ui-frise__b:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; border-radius: var(--radius-xs); }

/* ── La légende ──────────────────────────────────────────────────────────── */
.ui-leg {
  display: flex; flex-wrap: wrap; gap: 6px 18px;
  padding: 0 16px 14px;
  font-family: var(--font-mono); font-size: var(--text-2xs); color: var(--text-secondary);
}
.ui-leg span { display: inline-flex; align-items: center; gap: 7px; }
.ui-leg i { width: 9px; height: 9px; border-radius: var(--radius-pill); display: block; flex: none; }

/* ── Le téléphone de terrain ─────────────────────────────────────────────── */
.ui-tel {
  max-width: 268px; margin: 0 auto;
  border-radius: 26px; padding: 9px;
  background: var(--n-800);
  box-shadow: 0 1px 2px rgba(20,29,56,.06), 0 22px 48px -14px rgba(20,29,56,.35);
}
.ui-tel__ecran { background: var(--surface); border-radius: 18px; overflow: hidden; }
.ui-tel__tete {
  padding: 12px 14px 10px; border-bottom: 1px solid var(--border-subtle);
  background: var(--surface-sunken);
}
.ui-tel__site { font-size: var(--text-sm); font-weight: var(--fw-medium); color: var(--text-body); margin: 0; }
.ui-tel__meta { font-family: var(--font-mono); font-size: var(--text-2xs); color: var(--text-muted); margin: 3px 0 0; letter-spacing: .04em; }

.ui-ligne {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 14px; border-bottom: 1px solid var(--border-subtle);
}
.ui-ligne:last-child { border-bottom: 0; }
.ui-ligne__code {
  font-family: var(--font-mono); font-size: var(--text-2xs); color: var(--text-muted);
  min-width: 42px; flex: none;
}
.ui-ligne__t { font-size: 13px; color: var(--text-body); margin: 0; line-height: 1.35; }
.ui-ligne__s { font-size: 11.5px; color: var(--text-muted); margin: 1px 0 0; line-height: 1.35; }
.ui-ligne__etat { margin-left: auto; flex: none; }

/* La pastille d'état, la même que sur la carte. */
.ui-pt { width: 10px; height: 10px; border-radius: var(--radius-pill); display: block; }
.ui-pt--0 { background: #1BAF7A; }
.ui-pt--1 { background: #EAB308; }
.ui-pt--2 { background: #D97706; }
.ui-pt--3 { background: #DC2626; }

/* ── Le document remis ───────────────────────────────────────────────────── */
.ui-doc { padding: 22px 24px; background: var(--surface); }
.ui-doc__tete { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; margin-bottom: 16px; }
.ui-doc__t { font-family: var(--font-display); font-size: var(--text-lg); font-weight: var(--fw-medium); color: var(--text-strong); margin: 0; letter-spacing: var(--tracking-tight); }
.ui-doc__ref { font-family: var(--font-mono); font-size: var(--text-2xs); color: var(--text-muted); white-space: nowrap; }
.ui-tbl { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.ui-tbl th {
  text-align: left; font-family: var(--font-mono); font-size: var(--text-2xs);
  letter-spacing: var(--tracking-label); text-transform: uppercase;
  color: var(--text-muted); font-weight: var(--fw-normal);
  padding: 0 10px 8px 0; border-bottom: 1px solid var(--border);
}
.ui-tbl td { padding: 9px 10px 9px 0; border-bottom: 1px solid var(--border-subtle); color: var(--text-secondary); vertical-align: middle; }
.ui-tbl tr:last-child td { border-bottom: 0; }
.ui-tbl td:first-child { font-family: var(--font-mono); font-size: var(--text-2xs); color: var(--text-body); }
.ui-tbl__etat { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }

/* ── Adaptatif ───────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .ui-leg { gap: 5px 14px; }
  .ui-frise__b { font-size: 10px; }
}
@media (max-width: 560px) {
  /* Sous cette largeur les codes de poste deviennent illisibles : on garde la
     carte, on retire les étiquettes. La couleur suffit à lire la scène. */
  .uc-code { display: none; }
  .ui-doc { padding: 16px 16px; }
}

/* ⚠️ Le mouvement est un confort, pas un message. Réglage système respecté :
   la carte se fige, la frise reste utilisable au clic. */
@media (prefers-reduced-motion: reduce) {
  .uc-halo, .uc-pastille, .uc-poste, .ui-frise__b::before { transition-duration: 1ms; }
  .uc-n3 .uc-halo { animation: none; }
}