/* ============================================================================
   Neon Bao - feuille de style du site
   Toutes les valeurs viennent de tokens.css : aucune couleur, aucun espacement
   et aucune valeur typographique en dur. Aucun !important non plus, sauf dans
   le bloc prefers-reduced-motion en fin de fichier, ou il doit legitimement
   ecraser toutes les animations declarees plus haut.
   Ordre : base > primitives > composants > sections > responsive
   ========================================================================== */

/* ---------------------------------------------------------------- 1. base */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--surface-wall);
  color: var(--text-body);
  font: var(--type-body);
  letter-spacing: var(--ls-normal);
  text-wrap: pretty;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Grain du mur : superposition fixe, jamais cliquable. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  background-image: var(--noise);
  opacity: var(--noise-opacity);
  mix-blend-mode: screen;
}

h1, h2, h3, h4 {
  margin: 0;
  color: var(--text-loud);
  font-family: var(--font-display);
  letter-spacing: var(--ls-tight);
}
h1 { font: var(--type-h1); }
/* Lignes equilibrees : plus de mot orphelin en fin de titre. */
h1, h2 { text-wrap: balance; }
h2 { font: var(--type-h2); }
h3 { font: var(--type-h3); }

p { margin: 0; max-width: var(--measure); }
img, svg { max-width: 100%; }
button { font: inherit; }

a {
  color: var(--nb-green-core);
  text-decoration: none;
  border-bottom: 1px solid rgba(88, 242, 60, .4);
  transition: text-shadow var(--dur-fast) var(--ease-snap), border-color var(--dur-fast);
}
a:hover { text-shadow: var(--text-glow-green); border-bottom-color: var(--nb-green); }
a:active { color: #fff; }

:focus-visible { outline: var(--tube-w) solid var(--focus-ring); outline-offset: 2px; }
::selection { background: var(--nb-violet); color: #fff; }

/* Compense l'en-tete collant de 72px sur les ancres. */
[id] { scroll-margin-top: 88px; }

.nb-sr {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

/* Lien d'evitement clavier : visible seulement au focus. */
.nb-skip {
  position: absolute; top: var(--sp-2); left: var(--sp-2);
  z-index: 100; transform: translateY(-200%);
  padding: var(--sp-2) var(--sp-4);
  background: var(--nb-green-core); color: var(--nb-ink-000);
  border: none; font: var(--type-label); letter-spacing: var(--ls-tag);
  text-transform: uppercase;
  transition: transform var(--dur-fast) var(--ease-snap);
}
.nb-skip:focus { transform: translateY(0); }

/* ---------------------------------------------------- 2. mise en page */

.nb-container {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.nb-section { padding-block: var(--section-y); }

/* Une section sur deux passe en ink-050 : deux valeurs de fond, pas plus. */
.nb-section--panel {
  background: var(--surface-panel);
  border-top: 1px solid var(--surface-line);
}

.nb-grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-4); }
.nb-grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-4); }
.nb-split  { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-8); }
.nb-split-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-3); }

.nb-label {
  font: var(--type-label);
  letter-spacing: var(--ls-tag);
  text-transform: uppercase;
  color: var(--text-quiet);
}

/* Titre de section : l'echelle saute h2 -> h1, sans palier intermediaire. */
.nb-h2 { font: var(--type-h1); text-transform: uppercase; }
.nb-h2--gap { margin-bottom: var(--sp-6); }

/* Paragraphe precede d'une icone : garantie, mention de confiance. */
.nb-note {
  display: flex;
  gap: var(--sp-2);
  align-items: flex-start;
  font: var(--fw-regular) 13px/1.5 var(--font-tube);
  color: var(--text-quiet);
  max-width: var(--measure);
}
.nb-note--sm { font-size: 12px; line-height: 1.4; }
.nb-note .nb-i { margin-top: 2px; color: var(--nb-green-core); }

.nb-stack-4 { margin-bottom: var(--sp-4); }
.nb-stack-5 { margin-bottom: var(--sp-5); }
.nb-stack-t5 { margin-top: var(--sp-5); }
.nb-stack-t6 { margin-top: var(--sp-6); }
.nb-quiet { color: var(--text-quiet); }
.nb-optional { color: var(--text-quiet); }

/* Tailles d'icone : l'echelle de la charte, pas des valeurs libres. */
.nb-i--xs { font-size: 14px; }
.nb-i--sm { font-size: 15px; }
.nb-i--md { font-size: 17px; }

/* Piege a robots : hors ecran, jamais lu par un lecteur d'ecran. */
.nb-honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Reservoir d'icones : jamais rendu, seulement reference par <use>.
   En classe et non en attribut style, sinon la CSP style-src 'self' le bloque. */
.nb-sprite { display: none; }

/* En-tete de section : titre a gauche, marqueur a droite. */
.nb-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-5);
  margin-bottom: var(--sp-6);
}
.nb-head h2 { font: var(--type-h1); text-transform: uppercase; }
.nb-head .nb-label { margin-bottom: var(--sp-3); }

/* ------------------------------------------------------- 3. primitives */

/* --- icone : glyphe SVG peint en currentColor --- */
.nb-i {
  display: inline-block;
  width: 1em; height: 1em;
  flex: 0 0 auto;
  vertical-align: -.125em;
  fill: none;
  stroke: currentColor;
}

/* --- bouton --- */
.nb-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  height: var(--control-h);
  padding-inline: var(--pad-control-x);
  border-radius: var(--r-hair);
  font: var(--fw-medium) 13px/1 var(--font-tube);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  text-align: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition:
    box-shadow var(--dur-fast) var(--ease-snap),
    transform var(--dur-fast) var(--ease-snap),
    background var(--dur-fast), color var(--dur-fast), border-color var(--dur-fast);
}
.nb-btn:hover { border-bottom-color: currentColor; }
.nb-btn--sm { height: var(--control-h-sm); padding-inline: var(--sp-3); font-size: 12px; }
.nb-btn--lg { height: var(--control-h-lg); padding-inline: var(--sp-6); font-size: 15px; }
.nb-btn--full { width: 100%; }

/* Tube evide : l'etat de repos de la marque. */
.nb-btn--tube {
  background: transparent;
  border: var(--tube-w) solid var(--nb-green);
  color: var(--nb-green-core);
}
.nb-btn--tube:hover { background: var(--nb-green-ash); text-shadow: var(--text-glow-green); box-shadow: var(--glow-green); }
.nb-btn--tube.nb-btn--violet { border-color: var(--nb-violet); color: var(--nb-violet-core); }
.nb-btn--tube.nb-btn--violet:hover { background: var(--nb-violet-ash); text-shadow: var(--text-glow-violet); box-shadow: var(--glow-violet); }

/* Face de sign allumee + ombre collee. */
.nb-btn--solid {
  background: var(--nb-green);
  border: var(--tube-w) solid var(--nb-green-core);
  color: var(--nb-ink-000);
  font-weight: var(--fw-bold);
  box-shadow: var(--stack-green);
}
.nb-btn--solid:hover { background: var(--nb-green-core); box-shadow: var(--stack-green), var(--glow-green); }
.nb-btn--solid:active { transform: translate(var(--press-shift), var(--press-shift)); box-shadow: none; }
.nb-btn--tube:active { transform: translate(var(--press-shift), var(--press-shift)); }

/* --- badge --- */
.nb-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  height: 22px;
  padding-inline: var(--sp-2);
  border: 1px solid var(--nb-green);
  border-radius: var(--r-hair);
  background: var(--nb-green-ash);
  color: var(--nb-green-core);
  font: var(--type-label);
  letter-spacing: var(--ls-tag);
  text-transform: uppercase;
  white-space: nowrap;
}
.nb-badge--violet { border-color: var(--nb-violet); background: var(--nb-violet-ash); color: var(--nb-violet-core); }
.nb-badge--quiet  { border-color: var(--surface-line); background: transparent; color: var(--text-quiet); }
.nb-badge--glow   { text-shadow: 0 0 10px currentColor; }
.nb-badge__dot {
  width: 5px; height: 5px; flex: 0 0 auto;
  border-radius: var(--r-tube);
  background: var(--nb-green);
  box-shadow: 0 0 8px currentColor;
  animation: nb-pulse 1.6s infinite;
}

/* --- tag --- */
.nb-tag {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  height: 26px;
  padding-inline: var(--sp-3);
  border: 1px solid var(--surface-line);
  border-radius: var(--r-hair);
  background: var(--surface-raised);
  color: var(--text-body);
  font: var(--fw-regular) 11px/1 var(--font-mono);
  letter-spacing: var(--ls-tag);
  text-transform: uppercase;
}

/* --- carte : dalle sur le mur, arete 2px, encoches a 45 degres --- */
.nb-card {
  position: relative;
  background: var(--surface-card);
  border: var(--tube-w) solid rgba(180, 75, 255, .38);
  border-radius: var(--r-hair);
  padding: var(--pad-card);
  transition: all var(--dur-base) var(--ease-snap);
}
.nb-card--green { border-color: rgba(88, 242, 60, .35); }
.nb-card--plain { border-color: var(--surface-line); }

.nb-card--lit { border-color: var(--nb-green); box-shadow: var(--glow-green-sm), var(--glow-inner-green); }
.nb-card--paste { box-shadow: var(--stack-violet); }
.nb-card--green.nb-card--paste { box-shadow: var(--stack-green); }
.nb-card--green.nb-card--paste.nb-card--lit { box-shadow: var(--stack-green), var(--glow-green-sm), var(--glow-inner-green); }
.nb-card--plain.nb-card--paste { box-shadow: var(--stack-ink); }

.nb-card--hover:hover {
  border-color: var(--nb-violet);
  box-shadow: var(--glow-violet-sm), var(--glow-inner-violet);
  transform: translate(-1px, -1px);
}
.nb-card--green.nb-card--hover:hover {
  border-color: var(--nb-green);
  box-shadow: var(--glow-green-sm), var(--glow-inner-green);
}

/* Encoches : deux barres a 45 degres aux coins opposes. */
.nb-card--ticks::before,
.nb-card--ticks::after {
  content: "";
  position: absolute;
  width: 10px; height: 2px;
  background: currentColor;
  color: inherit;
  opacity: .9;
}
.nb-card--ticks::before { top: -2px; left: -2px; transform: rotate(45deg); transform-origin: left top; }
.nb-card--ticks::after { bottom: -2px; right: -2px; transform: rotate(45deg); transform-origin: right bottom; }
.nb-card--ticks { color: rgba(180, 75, 255, .38); }
.nb-card--green.nb-card--ticks { color: rgba(88, 242, 60, .35); }
.nb-card--plain.nb-card--ticks { color: var(--surface-line); }
.nb-card--lit.nb-card--ticks { color: var(--nb-green); }
.nb-card--hover.nb-card--ticks:hover { color: var(--nb-violet); }
.nb-card--green.nb-card--hover.nb-card--ticks:hover { color: var(--nb-green); }
/* Le texte de la carte reprend sa couleur normale : les encoches seules heritent.
   :where() ramene la specificite a zero : toute classe qui fixe sa propre couleur
   (bouton, badge, titre) l'emporte. Sans lui, les boutons verts des cartes
   passaient en gris clair sur vert (contraste 1,1:1). */
:where(.nb-card) > * { color: var(--text-body); }

/* --- etiquette collee de travers --- */
.nb-tape {
  display: inline-block;
  padding: 4px 10px;
  border: var(--tube-w) solid var(--nb-green);
  background: var(--nb-green-ash);
  color: var(--nb-green-core);
  font: var(--type-label);
  letter-spacing: var(--ls-tag);
  text-transform: uppercase;
  box-shadow: 4px 4px 0 #000;
  transform: rotate(-3deg);
}
.nb-tape--violet { border-color: var(--nb-violet); background: var(--nb-violet-ash); color: var(--nb-violet-core); }
.nb-tape--right { transform: rotate(2deg); }
.nb-tape--left { transform: rotate(-2deg); }

/* --- champ de formulaire --- */
.nb-field { display: grid; gap: var(--sp-2); }
.nb-field > label {
  font: var(--type-label);
  letter-spacing: var(--ls-tag);
  text-transform: uppercase;
  color: var(--text-quiet);
}
.nb-field__wrap {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: var(--control-h);
  padding-inline: var(--sp-3);
  background: var(--surface-raised);
  border: var(--tube-w) solid var(--surface-line);
  border-radius: var(--r-hair);
  transition: border-color var(--dur-fast) var(--ease-snap), box-shadow var(--dur-fast) var(--ease-snap);
}
.nb-field__wrap:focus-within {
  border-color: var(--nb-violet);
  box-shadow: var(--glow-inner-violet), var(--glow-violet-sm);
}
.nb-field__wrap > .nb-i { font-size: 15px; color: var(--text-quiet); }
.nb-field__wrap:focus-within > .nb-i { color: var(--nb-violet-core); }
.nb-field__suffix { font: var(--type-label); letter-spacing: var(--ls-tag); color: var(--text-quiet); }

.nb-field input,
.nb-field select,
.nb-field textarea {
  flex: 1;
  width: 100%;
  min-width: 0;
  /* Remplit toute la hauteur du tube (44px - 2x2px de bordure) : la zone
     tactile fait bien 44px, pas seulement le texte. */
  min-height: calc(var(--control-h) - 2 * var(--tube-w));
  padding-block: var(--sp-2);
  background: transparent;
  border: 0;
  color: var(--text-loud);
  font: var(--fw-regular) 14px/1.4 var(--font-tube);
}
.nb-field textarea { resize: vertical; min-height: 88px; }
.nb-field input:focus, .nb-field select:focus, .nb-field textarea:focus { outline: none; }
.nb-field input::placeholder, .nb-field textarea::placeholder { color: var(--text-quiet); }
.nb-field select { appearance: none; cursor: pointer; }
.nb-field select option { background: var(--surface-card); color: var(--text-loud); }

/* Message d'erreur de validation, cache par defaut. */
.nb-field__error {
  font: var(--fw-regular) 12px/1.4 var(--font-tube);
  color: var(--nb-chili);
}
.nb-field:not([data-invalid]) .nb-field__error { display: none; }
.nb-field[data-invalid] .nb-field__wrap { border-color: var(--nb-chili); }

/* --- case a cocher --- */
.nb-check { display: flex; gap: var(--sp-3); align-items: flex-start; cursor: pointer; }
.nb-check input {
  appearance: none;
  width: 18px; height: 18px; margin: 2px 0 0;
  flex: 0 0 auto;
  background: var(--surface-raised);
  border: var(--tube-w) solid var(--surface-line);
  border-radius: var(--r-hair);
  cursor: pointer;
  transition: all var(--dur-fast) var(--ease-snap);
}
.nb-check input:checked {
  background: var(--nb-green);
  border-color: var(--nb-green-core);
  box-shadow: var(--glow-green-sm);
}
.nb-check__text { display: grid; gap: 2px; }
.nb-check__label { font: var(--fw-medium) 13px/1.3 var(--font-tube); color: var(--text-loud); }
.nb-check__hint { font: var(--fw-regular) 12px/1.4 var(--font-tube); color: var(--text-quiet); }

/* ------------------------------------------------------- 4. en-tete */

.nb-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--glass);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border-bottom: 1px solid var(--surface-line);
}
.nb-header__bar {
  display: flex;
  align-items: center;
  gap: var(--sp-6);
  height: 72px;
}
.nb-header__logo { display: flex; margin-right: auto; border: 0; }
.nb-header__logo:hover { text-shadow: none; }
.nb-header__logo img { height: 30px; width: auto; display: block; }

.nb-nav { display: flex; gap: var(--sp-6); }
.nb-nav a,
.nb-mobnav a {
  font: var(--fw-medium) 12px/1 var(--font-tube);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--text-body);
  border-bottom: none;
}
.nb-nav a:hover, .nb-mobnav a:hover { color: var(--nb-violet-core); text-shadow: var(--text-glow-violet); }

.nb-burger {
  display: none;
  width: var(--control-h); height: var(--control-h);
  align-items: center; justify-content: center;
  background: transparent;
  border: var(--tube-w) solid var(--surface-line);
  border-radius: var(--r-hair);
  color: var(--text-body);
  cursor: pointer;
  transition: all var(--dur-fast) var(--ease-snap);
}
.nb-burger:hover { border-color: var(--nb-violet); color: var(--nb-violet-core); background: var(--nb-violet-ash); }
.nb-burger .nb-i { font-size: 18px; }
.nb-burger__close { display: none; }
.nb-burger[aria-expanded="true"] .nb-burger__open { display: none; }
.nb-burger[aria-expanded="true"] .nb-burger__close { display: inline-block; }

.nb-mobnav {
  display: none;
  border-top: 1px solid var(--surface-line);
  background: var(--surface-panel);
  padding: var(--sp-3) var(--gutter) var(--sp-4);
  gap: var(--sp-1);
}
.nb-mobnav[data-open] { display: grid; }
.nb-mobnav a {
  display: flex;
  align-items: center;
  min-height: var(--control-h);
  border-bottom: 1px dashed var(--surface-line);
}

/* --------------------------------------------------------- 5. heros */

.nb-hero { position: relative; overflow: hidden; border-bottom: 1px solid var(--surface-line); }
.nb-hero__wash, .nb-hero__scan { position: absolute; inset: 0; pointer-events: none; }
.nb-hero__wash { background-image: var(--wall-wash); }
.nb-hero__scan { background-image: var(--scanlines); opacity: .6; }

.nb-hero__grid {
  position: relative;
  display: grid;
  /* 1,35 / 0,65 : « TÉLÉPHONE. » mesure 10,6 fois le corps du titre, il lui faut la place. */
  grid-template-columns: minmax(0, 1.35fr) minmax(0, .65fr);
  gap: var(--sp-7);
  align-items: center;
  padding-block: var(--sp-9) var(--sp-8);
}
.nb-hero__row { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.nb-hero__badges { margin-bottom: var(--sp-5); }
.nb-hero__cta { margin-top: var(--sp-6); }
.nb-hero__meta { margin-top: var(--sp-6); }
.nb-hero__lead {
  font: var(--fw-regular) var(--fs-body-lg)/1.55 var(--font-tube);
  color: var(--text-body);
  max-width: 48ch;
}
.nb-hero__sign { display: grid; place-items: center; }
.nb-hero__sign img {
  width: 100%;
  max-width: 400px;
  animation: nb-flicker 7s infinite steps(1, end);
}

/* Titre en tube allume : le seul texte du site qui brille vraiment. */
.nb-neon {
  /* Plafond calcule pour que « TÉLÉPHONE. » tienne dans sa colonne de 961 a 1440 px. */
  font: var(--fw-black) clamp(44px, 5.4vw, 69px)/var(--lh-crush) var(--font-display);
  letter-spacing: var(--ls-mega);
  text-transform: uppercase;
  color: var(--nb-violet-core);
  text-shadow: var(--text-glow-violet);
  margin-bottom: var(--sp-5);
}

/* --- bandeau defilant --- */
.nb-marquee {
  border-top: 1px solid var(--surface-line);
  background: var(--surface-panel);
  overflow: hidden;
  padding-block: 10px;
}
.nb-marquee__run {
  display: flex;
  gap: var(--sp-6);
  width: max-content;
  animation: nb-marquee var(--dur-marquee) linear infinite;
}
.nb-marquee span {
  font: var(--fw-bold) 12px/1 var(--font-mono);
  letter-spacing: var(--ls-tag);
  color: var(--nb-green-core);
  white-space: nowrap;
}
.nb-marquee span:nth-child(even) { color: var(--nb-violet-core); }

/* ---------------------------------------------------- 6. offre */

.nb-offre__card { display: grid; gap: var(--sp-4); align-content: start; }
.nb-offre__top { display: flex; align-items: center; justify-content: space-between; }
.nb-offre__icon { display: inline-flex; font-size: 22px; color: var(--nb-violet-core); }
.nb-card--green .nb-offre__icon { color: var(--nb-green-core); }
/* La plainte du client, dans ses mots. Chili : c'est un refus, pas une decoration. */
.nb-offre__quote {
  font: var(--fw-regular) var(--fs-small)/1.4 var(--font-tube);
  color: var(--nb-chili);
}
.nb-offre__title {
  font: var(--fw-bold) 26px/1.05 var(--font-display);
  text-transform: uppercase;
  color: var(--text-loud);
}
.nb-offre__tags { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.nb-offre__foot { margin-top: var(--sp-6); display: flex; gap: var(--sp-4); align-items: center; flex-wrap: wrap; }

/* -------------------------------------------- 7. mur de travaux */

/* Superposition en grille : la crea garde son ratio, la fiche se pose dessus.
   Ne pas remplacer par position:absolute sur la fiche, ni forcer height:100%. */
.nb-slot {
  display: grid;
  align-self: start;
  position: relative;
  padding: 0;
  background: none;
  border: 0;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.nb-slot__face,
.nb-slot__spec,
.nb-slot__hint { grid-area: 1 / 1; }

.nb-slot__face {
  position: relative;
  border: var(--tube-w) solid rgba(180, 75, 255, .38);
  border-radius: var(--r-hair);
  overflow: hidden;
  background: var(--surface-card);
  transition: border-color var(--dur-base) var(--ease-snap), box-shadow var(--dur-base) var(--ease-snap);
}
.nb-slot:hover .nb-slot__face,
.nb-slot:focus-visible .nb-slot__face { border-color: var(--nb-violet); box-shadow: var(--glow-violet-sm); }

.nb-slot__face img { display: block; width: 100%; height: auto; }

/* Etiquettes du cadre : format en haut a gauche, label en bas. */
.nb-slot__format {
  position: absolute; top: var(--sp-2); left: var(--sp-2);
  padding: 2px 6px;
  background: var(--veil);
  border: 1px solid var(--surface-line);
  font: var(--type-label); letter-spacing: var(--ls-tag);
  color: var(--text-body);
}
.nb-slot__caption {
  padding: var(--sp-3);
  border-top: 1px solid var(--surface-line);
  font: var(--type-label); letter-spacing: var(--ls-tag);
  text-transform: uppercase;
  color: var(--text-quiet);
  background: var(--surface-card);
}

/* Fiche technique : au dos du cadre, revelee au survol / tap / clavier. */
.nb-slot__spec {
  position: relative;
  min-height: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-base) var(--ease-snap);
}
.nb-slot:hover .nb-slot__spec,
.nb-slot:focus-visible .nb-slot__spec,
.nb-slot[aria-pressed="true"] .nb-slot__spec { opacity: 1; }

.nb-spec {
  position: absolute; inset: 0;
  display: grid; align-content: start; gap: var(--sp-2);
  overflow: auto;
  padding: var(--sp-4);
  background: var(--nb-ink-100);
  border: var(--tube-w) solid var(--nb-green);
  box-shadow: var(--glow-green-sm);
}
.nb-spec__top { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--sp-1); }
.nb-spec__top .nb-label { color: var(--nb-green-core); }
/* La <dl> ne casse pas la grille : ses lignes deviennent des enfants directs. */
.nb-spec__list { display: contents; }
.nb-spec__row {
  display: flex; justify-content: space-between; gap: var(--sp-3);
  padding-bottom: 4px;
  border-bottom: 1px dashed var(--surface-line);
  font: var(--fw-regular) 12px/1.5 var(--font-mono);
}
.nb-spec__row dt { color: var(--text-quiet); letter-spacing: var(--ls-tag); }
.nb-spec__row dd { margin: 0; color: var(--text-loud); text-align: right; }
.nb-spec__row dd[data-empty] { color: var(--nb-ink-300); }
.nb-spec__note { font: var(--fw-regular) 11px/1.5 var(--font-tube); color: var(--text-quiet); margin-top: var(--sp-1); }

/* Affordance : disparait quand la fiche est affichee, sinon collision. */
.nb-slot__hint {
  align-self: start; justify-self: end;
  margin: var(--sp-2);
  z-index: 2;
  font: var(--type-label); letter-spacing: var(--ls-tag);
  color: var(--text-body);
  background: var(--veil);
  padding: 2px 6px;
  pointer-events: none;
  transition: opacity var(--dur-base) var(--ease-snap);
}
.nb-slot:hover .nb-slot__hint,
.nb-slot:focus-visible .nb-slot__hint,
.nb-slot[aria-pressed="true"] .nb-slot__hint { opacity: 0; }

.nb-travaux__note {
  font: var(--fw-regular) var(--fs-small)/1.5 var(--font-tube);
  color: var(--text-quiet);
  margin-top: var(--sp-4);
}

/* ------------------------------------------------------ 8. methode */

.nb-etape { display: grid; gap: var(--sp-3); align-content: start; }
/* Asymetrie voulue par la charte : une carte sur deux descend. */
.nb-grid-4 > .nb-card:nth-child(even) { transform: translateY(14px); }
.nb-etape__num { font: var(--fw-bold) 30px/1 var(--font-mono); color: var(--nb-violet-core); }
.nb-etape--last .nb-etape__num { color: var(--nb-green-core); text-shadow: var(--text-glow-green); }
.nb-etape h3 { font: var(--fw-medium) var(--fs-h4)/1.25 var(--font-tube); color: var(--text-loud); }
.nb-etape p { font: var(--fw-regular) var(--fs-small)/1.5 var(--font-tube); }

/* ------------------------------------------------------- 9. tarifs */

.nb-tarifs__grid { align-items: start; }
.nb-tarifs__card { display: grid; gap: var(--sp-4); }
.nb-tarifs__top { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); }
.nb-tarifs__price { display: flex; align-items: baseline; gap: var(--sp-3); flex-wrap: wrap; }
.nb-tarifs__amount {
  font: var(--fw-bold) 44px/1 var(--font-mono);
  color: var(--nb-green-core);
  text-shadow: var(--text-glow-green);
}
.nb-tarifs__lines { display: grid; gap: var(--sp-2); }
.nb-tarifs__line {
  display: flex; justify-content: space-between; gap: var(--sp-4);
  padding-bottom: var(--sp-2);
  border-bottom: 1px dashed var(--surface-line);
  font: var(--fw-regular) 13px/1.4 var(--font-mono);
}
.nb-tarifs__line dt { color: var(--text-body); }
.nb-tarifs__line dd { margin: 0; color: var(--text-loud); text-align: right; }

/* Criteres d'entree de l'offre partenaire. */
.nb-criteres { list-style: none; margin: var(--sp-3) 0 0; padding: 0; display: grid; gap: var(--sp-3); max-width: var(--measure); }
.nb-criteres li { display: flex; gap: var(--sp-3); align-items: flex-start; font: var(--type-body); color: var(--text-body); }
.nb-criteres .nb-i { margin-top: 4px; font-size: 16px; color: var(--nb-green-core); }
.nb-criteres strong { color: var(--text-loud); font-weight: var(--fw-medium); }

/* ------------------------------------------------------ 10. contact */

.nb-contact__form { display: grid; gap: var(--sp-4); align-content: start; }
.nb-contact__coords {
  display: grid; gap: var(--sp-2);
  margin-top: var(--sp-6);
  font: var(--fw-regular) 14px/1.8 var(--font-mono);
  color: var(--text-body);
}
.nb-contact__coords a { color: var(--text-body); border-bottom-color: var(--surface-line); }
.nb-contact__coords a:hover { color: var(--nb-green-core); }
.nb-contact__coords .nb-i { font-size: 14px; margin-right: var(--sp-2); }
.nb-contact__fine { font: var(--fw-regular) 12px/1.5 var(--font-tube); color: var(--text-quiet); }

/* ------------------------------------------------- 11. pied de page */

.nb-footer { border-top: 1px solid var(--surface-line); background: var(--surface-panel); }
.nb-foot {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
  gap: var(--sp-6);
  padding-block: var(--sp-7);
}
.nb-foot img { height: 26px; width: auto; margin-bottom: var(--sp-4); }
.nb-foot p { font: var(--fw-regular) 13px/1.6 var(--font-tube); color: var(--text-quiet); max-width: 30ch; }
.nb-foot .nb-label { margin-bottom: var(--sp-2); }
.nb-foot a {
  display: block;
  font: var(--fw-regular) 13px/2 var(--font-tube);
  color: var(--text-quiet);
  border-bottom: none;
}
.nb-foot a:hover { color: var(--nb-green-core); }
.nb-footer__legal {
  max-width: none; /* sinon le filet s'arrete a la largeur de lecture */
  border-top: 1px solid var(--surface-line);
  padding: var(--sp-4) var(--gutter);
  text-align: center;
  font: var(--type-label); letter-spacing: var(--ls-tag);
  color: var(--text-quiet);
}

/* --------------------------------------------- 12. pages legales */

.nb-prose { max-width: var(--container-narrow); }
.nb-prose h1 { font: var(--type-h1); text-transform: uppercase; margin-bottom: var(--sp-6); }
.nb-prose h2 {
  font: var(--fw-medium) var(--fs-h3)/1.3 var(--font-tube);
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
  color: var(--nb-violet-core);
  margin-top: var(--sp-7); margin-bottom: var(--sp-3);
}
.nb-prose p, .nb-prose li { font: var(--type-body); margin-bottom: var(--sp-3); }
.nb-prose ul { padding-left: var(--sp-5); margin: 0 0 var(--sp-4); }
.nb-prose dl { display: grid; gap: var(--sp-2); margin: 0 0 var(--sp-4); }
.nb-prose dt { font: var(--type-label); letter-spacing: var(--ls-tag); text-transform: uppercase; color: var(--text-quiet); }
.nb-prose dd { margin: 0 0 var(--sp-2); font: var(--fw-regular) 14px/1.5 var(--font-mono); color: var(--text-loud); }
/* Champ que Vinh doit remplir avant mise en ligne. */
.nb-todo {
  background: var(--nb-ginger-ash);
  border-bottom: 1px dashed var(--nb-ginger);
  color: var(--nb-ginger);
  padding: 0 4px;
  font: var(--fw-bold) 12px/1.4 var(--font-mono);
}

/* --------------------------------------------- 13. page de merci */

.nb-merci { display: grid; place-items: center; min-height: 72vh; text-align: center; }
.nb-merci__inner { display: grid; gap: var(--sp-5); justify-items: center; }
.nb-merci h1 {
  font: var(--fw-black) clamp(40px, 8vw, 80px)/var(--lh-crush) var(--font-display);
  letter-spacing: var(--ls-mega);
  text-transform: uppercase;
  color: var(--nb-green-core);
  text-shadow: var(--text-glow-green);
}
.nb-merci p { margin-inline: auto; }

/* ------------------------------------------------- 14. responsive */

/* Trois points de rupture, tous en max-width. */

/* ------------------------------------------- qui est derriere */

/* Portrait discret : un medaillon rond, cercle d'un tube neon, a cote du texte. */
.nb-qui { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--sp-7); align-items: start; }
.nb-qui__photo {
  margin: var(--sp-2) 0 0;
  width: 168px; height: 168px;
  border-radius: var(--r-tube); overflow: hidden;
  border: var(--tube-w) solid var(--nb-violet-core);
  box-shadow: var(--glow-violet);
  background: var(--surface-card);
}
.nb-qui__photo img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* --------------------------------------- offre dans le heros */

.nb-hero__offre {
  display: flex; gap: var(--sp-2); align-items: flex-start;
  margin-top: var(--sp-5); padding: var(--sp-3) var(--sp-4);
  max-width: 48ch;
  border: 1px solid var(--nb-green); border-radius: var(--r-hair);
  background: var(--nb-green-ash); color: var(--nb-green-core);
  font: var(--fw-regular) var(--fs-small)/1.5 var(--font-tube);
  text-align: left;
}
.nb-hero__offre .nb-i { margin-top: 2px; }
.nb-hero__offre strong { font-weight: var(--fw-bold); }

/* --------------------------------------------------- questions */

.nb-faq { display: grid; grid-template-columns: minmax(0, .38fr) minmax(0, .62fr); gap: var(--sp-8); align-items: start; }
.nb-faq__item { border-bottom: 1px dashed var(--surface-line); }
.nb-faq__item summary {
  list-style: none; cursor: pointer;
  display: flex; justify-content: space-between; align-items: center; gap: var(--sp-4);
  padding: var(--sp-4) 0;
  font: var(--fw-medium) var(--fs-h4)/1.35 var(--font-tube); color: var(--text-loud);
}
.nb-faq__item summary::-webkit-details-marker { display: none; }
.nb-faq__item summary::after {
  content: "+"; flex: none;
  font: var(--fw-bold) 22px/1 var(--font-mono); color: var(--nb-violet-core);
  transition: transform var(--dur-fast) var(--ease-snap);
}
.nb-faq__item[open] summary::after { transform: rotate(45deg); }
.nb-faq__item summary:hover { color: var(--nb-violet-core); }
.nb-faq__item p { padding-bottom: var(--sp-4); }

@media (max-width: 960px) {
  .nb-faq { grid-template-columns: 1fr; gap: var(--sp-5); }
  .nb-qui { grid-template-columns: 1fr; gap: var(--sp-5); }
  .nb-qui__photo { width: 120px; height: 120px; margin: 0; }
  .nb-hero__grid { grid-template-columns: 1fr; gap: var(--sp-6); }
  .nb-hero__sign img { max-width: 240px; }
  .nb-neon { font-size: clamp(44px, 6.6vw, 72px); }
  .nb-split { grid-template-columns: 1fr; gap: var(--sp-6); }
  .nb-grid-3, .nb-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nb-grid-3 > :last-child:nth-child(odd) { grid-column: 1 / -1; }
  .nb-grid-4 > .nb-card:nth-child(even) { transform: none; }
  .nb-foot { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .nb-nav { display: none; }
  .nb-burger { display: inline-flex; }
}

@media (max-width: 640px) {
  /* L'enseigne occupait un ecran entier entre la promesse et l'argumentaire ;
     le logo reste visible dans l'en-tete. */
  .nb-hero__sign { display: none; }
  .nb-grid-3, .nb-grid-4, .nb-foot { grid-template-columns: 1fr; }
  .nb-split-in { grid-template-columns: 1fr; }
  .nb-head { flex-wrap: wrap; align-items: flex-start; gap: var(--sp-4); }
  .nb-header__cta { display: none; }
  .nb-section { padding-block: var(--sp-8); }

  .nb-hero__copy { text-align: center; }
  .nb-hero__copy .nb-hero__row { justify-content: center; }
  .nb-hero__copy p { margin-inline: auto; }
  .nb-hero__meta { text-align: center; }
  .nb-neon { font-size: clamp(26px, 7.5vw, 60px); overflow-wrap: break-word; }
  h2, .nb-head h2, .nb-h2 { font-size: clamp(24px, 6.5vw, 48px); line-height: 1.02; overflow-wrap: break-word; }
  .nb-tarifs__amount { font-size: 34px; }
}

/* Le mouvement est un ornement : on le coupe entierement si demande. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition-duration: 1ms !important; }
}