/* ============================================================
   DEVISALY — MODELE « NO SCROLL » (refonte 2026-10-05)
   Calque sur absurdventures.com : UN ECRAN, tout dans le menu.

   ⚠️⚠️ CE FICHIER NE REUTILISE AUCUNE CLASSE DE L'ANCIEN THEME.
   Prefixe `n-` (comme absurdventures prefixe `abp-`). La demande est explicite :
   « sans rien garder de l'ancien ». Reutiliser `.v-`, `.s-`, `.container`…
   reproduirait le MELANGE ancien/nouveau que l'utilisateur repere tout de suite.

   POLICES : on reutilise celles deja auto-hebergees, qui correspondent aux
   roles d'absurdventures :
     Anton    (condensee)  ~ Tungsten  -> titres
     Archivo  (sans-serif) ~ BioSans   -> texte
     Plex Mono             ~ JetBrains -> etiquettes, meta, boutons

   REGLE DE MISE EN PAGE : chaque page = `min-height: 100svh` (jamais `vh`),
   la navigation vit dans `.n-menu` (plein ecran), presente DANS LE HTML pour
   le SEO/GEO.
   ============================================================ */

:root {
  --n-bg: #ffffff;          /* fond : BLANC */
  --n-fg: #0a0a0a;          /* encre : NOIRE */
  --n-dim: rgba(10, 10, 10, .58);
  --n-rule: rgba(10, 10, 10, .2);
  --n-pad: 24px;

  /* ⚠️⚠️ L'OR DE LA MARQUE — « le site est trop fade » (2026-10-06).
     La refonte avait supprimé TOUTE couleur : « aucune couleur d'accent, comme
     la reference [absurdventures] ». Le user a tranché : « ajoute de la couleur,
     c'est trop fade ». On réintroduit donc l'or du logo (#C8A24A), mais
     ATTÉNUÉ, avec des contrastes MESURÉS sur fond blanc :
       --n-or        #b8892e   3,16:1  APLATS, traits, gros chiffres (>= 24 px)
       --n-or-texte  #8a6a2a   5,03:1  texte fin, et ENCRE des boutons or
       --n-or-pale   #f3ead6   1,20:1  fonds très légers (bandeaux, cartes)
     ⚠️ L'or vif #c8a24a ne fait que 2,41:1 sur blanc : JAMAIS sur du texte
     courant, seulement en aplat. La règle vit maintenant dans `:root` pour que
     toute feuille `n-` puisse l'utiliser. */
  --n-or: #b8892e;
  --n-or-texte: #8a6a2a;
  --n-or-pale: #f3ead6;
  --n-or-ligne: #dcc79a;
}

/* ⚠️ L'ACCENT DE LA BARRE : le mot « devisaly » reprend l'or du logo. */
.n-logo b { font-weight: 500; }
.n-logo { color: var(--n-fg); }
.n-logo b span { color: var(--n-or-texte); }

@media (min-width: 900px) { :root { --n-pad: 56px; } }

* { box-sizing: border-box; }

/* ============================================================
   TYPOGRAPHIE — PROPORTIONS EXACTES DE LA REFERENCE
   Mesurees dans le CSS d'absurdventures :
       --graphicFont: clamp(1.5rem, 3.333vw, 4rem)   -> titres
       --titlesFont : condensed                      -> tres gros titres
       --decorativeFont: mono                        -> etiquettes
       --bodyFont   : sans                           -> texte
   ⚠️ Mon 1er jet utilisait clamp(34px, 7.4vw, 96px) : a 1440 px cela donnait
   96 px, soit DEUX FOIS la reference (48 px). On recale sur la reference.
   ⚠️ Police de LECTURE = **Inter** (2026-10-06, demande « plus lisible » ;
   avant : Bitter, slab serif). Inter est dessinee pour l'ecran : hauteur
   d'x elevee, formes ouvertes, chiffres tabulaires. Declaree dans
   `fonts_inter.css`, chargee par les gabarits `n-`.
   ============================================================ */
:root {
  --n-titre: clamp(1.5rem, 3.333vw, 4rem);        /* 24 -> 48 px */
  --n-titre-grand: clamp(1.5rem, 3.333vw, 4rem);  /* = --graphicFont de la reference */
  --n-corps: clamp(1rem, 1.15vw, 1.15rem);        /* 16 -> 18.4 px */
  --n-etiquette: .75rem;                           /* 12 px, comme la reference */
}

.n-body {
  margin: 0;
  background: var(--n-bg);
  color: var(--n-fg);
  /* ⚠️ Bitter en lecture, Archivo en repli : si le woff2 tarde, on tombe sur une
     sans-serif propre plutot que sur le serif par defaut du systeme. */
  font-family: Inter, Archivo, system-ui, sans-serif;
  font-size: var(--n-corps);
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* ---------------- LA BARRE (fixe, transparente) ---------------- */
.n-head {
  position: fixed; top: 0; left: 0; right: 0; z-index: 40;
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px var(--n-pad);
  background: transparent;
  pointer-events: none;                 /* seuls les enfants sont cliquables */
}
.n-head > * { pointer-events: auto; }
.n-logo {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 13px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--n-fg); text-decoration: none;
}
.n-logo b { font-weight: 500; }
.n-menu-btn {
  display: inline-flex; align-items: center; gap: 12px;
  background: none; border: 0; cursor: pointer;
  color: var(--n-fg);
  font-family: 'IBM Plex Mono', monospace;
  font-size: var(--n-etiquette); letter-spacing: .2em; text-transform: uppercase;
  padding: 10px 0;
}
.n-menu-btn .n-burger { display: inline-flex; flex-direction: column; gap: 5px; }
.n-menu-btn .n-burger i {
  display: block; width: 26px; height: 1px; background: var(--n-fg);
  transition: transform .3s, opacity .3s;
}
.n-menu-btn[aria-expanded="true"] .n-burger i:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.n-menu-btn[aria-expanded="true"] .n-burger i:nth-child(2) { opacity: 0; }
.n-menu-btn[aria-expanded="true"] .n-burger i:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* ---------------- L'ECRAN (un seul, plein viewport) ----------------
   ⚠️ `100svh` et non `vh` : sur mobile la barre du navigateur apparait/disparait
   et `vh` fait deborder de ~60 px. `min-height` (pas `height`) : si le texte est
   trop long sur un petit ecran, la page grandit plutot que de rogner. */
.n-screen {
  min-height: 100svh;
  display: flex; flex-direction: column; justify-content: center;
  padding: 96px var(--n-pad) 48px;
}
.n-kicker {
  font-family: 'IBM Plex Mono', monospace;
  font-size: var(--n-etiquette); letter-spacing: .26em; text-transform: uppercase;
  color: var(--n-dim); margin: 0 0 22px;
}
.n-title {
  font-family: Anton, Archivo, sans-serif;
  font-weight: 400; text-transform: uppercase;
  font-size: var(--n-titre);
  line-height: 1.02; letter-spacing: -.008em;
  margin: 0; max-width: 24ch;
}
.n-title .n-outline { color: transparent; -webkit-text-stroke: 1.4px var(--n-fg); }
.n-sub {
  margin: 26px 0 0; max-width: 46ch;
  font-size: var(--n-corps); color: var(--n-dim); line-height: 1.62;
}
.n-cta {
  display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px;
}
.n-btn {
  display: inline-block; padding: 15px 26px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px; letter-spacing: .16em; text-transform: uppercase;
  text-decoration: none; border: 1px solid var(--n-fg);
  color: var(--n-bg); background: var(--n-fg);
  transition: background .2s, color .2s;
}
.n-btn:hover { background: transparent; color: var(--n-fg); }
.n-btn-ghost { background: transparent; color: var(--n-fg); }
.n-btn-ghost:hover { background: var(--n-fg); color: var(--n-bg); }

/* le bandeau de reperes, en bas de l'ecran */
.n-facts {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 1px; margin-top: 48px; border-top: 1px solid var(--n-rule);
}
.n-facts > div { padding: 16px 0 0; border-right: 1px solid var(--n-rule); }
.n-facts > div:last-child { border-right: 0; }
.n-facts dt {
  font-family: 'IBM Plex Mono', monospace; font-size: 10px;
  letter-spacing: .18em; text-transform: uppercase; color: var(--n-dim); margin: 0;
}
.n-facts dd { margin: 6px 0 0; font-size: 18px; }
@media (max-width: 700px) { .n-facts { grid-template-columns: repeat(2, 1fr); } }

/* ---------------- LE MENU (plein ecran, DANS LE DOM) ----------------
   ⚠️ Le menu est SERVI dans le HTML (c'est le plan du site : c'est lui qui rend
   les pages crawlables). On le masque par `visibility` + `transform`, jamais en
   retirant les liens du document. */
.n-menu {
  position: fixed; inset: 0; z-index: 60;
  background: var(--n-bg);
  display: flex; flex-direction: column;
  /* ⚠️⚠️ `flex-start`, JAMAIS `center`. BUG MESURE (2026-10-06) : avec
     `justify-content: center` + `overflow-y: auto`, le contenu depasse des
     DEUX cotes — la premiere entree sortait a -27 px (320x568) et -2 px
     (390x844), donc IMPOSSIBLE de remonter au debut du menu : la barre de
     defilement ne remonte que jusqu'au premier pixel du contenu, pas jusqu'a
     « tout en haut ». En flex, le debordement au-dessus du conteneur est perdu.
     C'est un piege classique du combos « centre + scroll ». */
  justify-content: flex-start;
  padding: 96px var(--n-pad) 40px;
  overflow-y: auto;                     /* le MENU peut defiler (il est long) */
  overscroll-behavior: contain;         /* le scroll ne « deborde » pas sur la page */
  visibility: hidden;
  transform: translateY(-1.5rem);
  opacity: 0;
  transition: opacity .28s ease, transform .28s ease, visibility .28s;
}
.n-menu[data-open="true"] { visibility: visible; opacity: 1; transform: translateY(0); }
/* ⚠️⚠️ OUVERTURE SANS JAVASCRIPT. Le bouton est aussi un lien `#n-menu` : si le
   JS echoue ou est desactive, `:target` ouvre le menu quand meme. La navigation
   ne depend donc JAMAIS du script — c'est la regle du skill `no-scroll-site`. */
.n-menu:target { visibility: visible; opacity: 1; transform: translateY(0); }

.n-menu-group {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px; letter-spacing: .24em; text-transform: uppercase;
  color: var(--n-dim); margin: 30px 0 8px;
}
.n-menu a.n-link {
  display: block; width: 100%;
  padding: 14px 0;
  border-top: 1px solid var(--n-rule);
  font-family: Anton, Archivo, sans-serif;
  font-size: clamp(20px, 2.9vw, 34px);
  letter-spacing: -.01em; text-transform: uppercase;
  color: var(--n-fg); text-decoration: none;
  transition: padding-left .2s, color .2s;
}
.n-menu a.n-link:hover { padding-left: 14px; }
.n-menu-foot {
  margin-top: 30px;
  font-family: 'IBM Plex Mono', monospace; font-size: 11px;
  letter-spacing: .14em; color: var(--n-dim);
}
.n-menu-foot a { color: var(--n-dim); text-decoration: none; margin-right: 18px; }

/* ⚠️⚠️ LE MENU DOIT TENIR DANS L'ECRAN — par paliers de HAUTEUR.
   BUG MESURE (2026-10-06) : le menu debordait de 6 px (390x844), 60 px
   (1440x900) et 153 px (320x568) → une barre de defilement apparaissait a
   l'ouverture, alors que c'est le MENU qui doit tenir. On resserre la chaine
   complete (groupes, entrees, pied) — pas juste le padding. */
@media (max-height: 920px) {
  .n-menu { padding: 80px var(--n-pad) 28px; }
  .n-menu-group { margin: 20px 0 6px; }
  .n-menu a.n-link { padding: 10px 0; font-size: clamp(18px, 2.4vw, 28px); }
  .n-menu-foot { margin-top: 20px; }
}
@media (max-height: 760px) {
  .n-menu { padding: 64px var(--n-pad) 20px; }
  .n-menu-group { margin: 14px 0 4px; }
  .n-menu a.n-link { padding: 8px 0; font-size: clamp(17px, 2.2vw, 24px); }
  .n-menu-foot { margin-top: 14px; font-size: 10px; }
}
@media (max-height: 620px) {
  .n-menu { padding: 54px var(--n-pad) 14px; }
  .n-menu-group { margin: 9px 0 3px; font-size: 9px; }
  .n-menu a.n-link { padding: 6px 0; font-size: clamp(16px, 2vw, 21px); }
  .n-menu-foot { margin-top: 10px; }
}

/* la classe qui verrouille le defilement derriere le menu ouvert */
.n-locked { overflow: hidden; }

/* ============================================================
   PETITS ECRANS — par paliers de HAUTEUR, pas de largeur.
   ⚠️ Un 320x568 est COURT : le meme contenu qui tient sur un 390x844 fait
   818 px de haut (mesure) et deborde de 250 px. On resserre TOUTE la chaine
   d'espacements et la taille des boutons — pas seulement le padding.
   Si ca ne suffit pas encore, la page GRANDIT (min-height) : on ne rogne JAMAIS.
   ============================================================ */
@media (max-height: 760px) {
  .n-screen { padding: 64px var(--n-pad) 24px; }
  .n-kicker { margin-bottom: 14px; }
  .n-title { font-size: clamp(1.5rem, 3.4vw, 2.4rem); }
  .n-sub { margin-top: 18px; font-size: 14px; }
  .n-cta { margin-top: 22px; gap: 10px; }
  .n-btn { padding: 12px 18px; font-size: 11px; }
  .n-facts { margin-top: 26px; }
  .n-facts dd { font-size: 16px; }
  .n-facts > div { padding-top: 12px; }
}
@media (max-height: 620px) {
  .n-screen { padding: 56px var(--n-pad) 18px; }
  .n-kicker { margin-bottom: 10px; }
  .n-title { font-size: clamp(1.4rem, 3.6vw, 1.9rem); }
  .n-sub { margin-top: 12px; font-size: 13px; }
  .n-cta { margin-top: 16px; gap: 8px; }
  .n-cta .n-btn { flex: 1 1 100%; text-align: center; padding: 11px 14px; }
  .n-facts { margin-top: 18px; grid-template-columns: repeat(2, 1fr); }
  .n-facts > div { padding-top: 8px; }
  .n-facts dt { font-size: 9px; }
  .n-facts dd { font-size: 14px; margin-top: 3px; }
}


/* ============================================================
   CARROUSEL NATIF — pour les pages de contenu long (prix métier x departement,
   ~16 000 pages). Défilement horizontal au doigt, accrochage, AUCUN JavaScript.
   ⚠️ C'est le « système » demande : au lieu d'empiler, on fait defiler une bande.
   ============================================================ */
.n-car {
  display: flex; gap: 1px; margin-top: 1.4rem;
  overflow-x: auto; scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--n-rule);
  scrollbar-width: thin;
}
.n-car-item {
  flex: 0 0 auto; min-width: min(86vw, 320px);
  scroll-snap-align: start;
  padding: 1.3rem 1.2rem; border-right: 1px solid var(--n-rule);
  background: var(--n-bg);
}
.n-car-item:last-child { border-right: 0; }
.n-car-item h3 { font-size: 1.05rem; margin: 0 0 .5rem; font-weight: 600; }
.n-car-item .n-prix { font-family: 'IBM Plex Mono', monospace; font-size: 1.35rem; margin: 0; }
.n-car-item .n-prix small { font-size: .72rem; color: var(--n-dim); letter-spacing: .08em; }
.n-car-label {
  font-family: 'IBM Plex Mono', monospace; font-size: .68rem;
  letter-spacing: .18em; text-transform: uppercase; color: var(--n-dim);
  margin: 1.6rem 0 0;
}

/* un écran un peu plus serré (pages de contenu) */
.n-screen--serre { justify-content: center; padding-top: 7rem; }
@media (max-height: 760px) { .n-screen--serre { padding-top: 5.5rem; } }
@media (max-height: 620px) { .n-screen--serre { padding-top: 4.5rem; } }
.n-screen--serre .n-car-item { padding: 1rem .9rem; }
.n-screen--serre .n-sub { margin-top: .9rem; }
.n-screen--serre .n-title { font-size: var(--n-titre); }
.n-detail { margin-top: 1.2rem; max-width: 62ch; }
.n-detail summary {
  cursor: pointer; font-family: 'IBM Plex Mono', monospace; font-size: .72rem;
  letter-spacing: .14em; text-transform: uppercase; color: var(--n-dim);
}
.n-detail p { font-size: .95rem; margin: .8rem 0; }

/* ============================================================
   L'ECRAN D'ACCUEIL — la seule page avec un titre plus grand.
   La reference a `--titlesFont` (condensee) pour les tres gros titres et
   `--graphicFont` pour les titres courants : deux niveaux, pas plus.
   ============================================================ */
.n-screen--accueil .n-title { font-size: var(--n-titre-grand); max-width: 20ch; }

/* ============================================================
   FOND ANIME AVEC EFFET DE FLOU (demande du user)
   ⚠️ CSS PUR, aucun canvas, aucun shader : un effet qui echoue en silence est
   pire qu'un effet absent. Deux nappes radiales qui derivent lentement +
   `filter: blur()`. Respecte `prefers-reduced-motion`.
   ⚠️ Decoratif : `aria-hidden`, jamais au-dessus du contenu (z-index negatif).
   ============================================================ */
.n-blur {
  position: fixed; inset: -20%;
  z-index: -1; pointer-events: none;
  overflow: hidden;
}
.n-blur span {
  position: absolute; display: block;
  width: 55vmax; height: 55vmax; border-radius: 50%;
  filter: blur(90px); opacity: .5;
}
.n-blur span:nth-child(1) { background: rgba(10,10,10,.10); top: -10%; left: -8%;  animation: n-derive-a 26s ease-in-out infinite alternate; }
.n-blur span:nth-child(2) { background: rgba(10,10,10,.07); bottom: -14%; right: -6%; animation: n-derive-b 32s ease-in-out infinite alternate; }
.n-blur span:nth-child(3) { background: rgba(10,10,10,.05); top: 34%; left: 42%;    animation: n-derive-a 40s ease-in-out infinite alternate-reverse; }
@keyframes n-derive-a {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(14vw, 9vh, 0) scale(1.22); }
}
@keyframes n-derive-b {
  from { transform: translate3d(0, 0, 0) scale(1.1); }
  to   { transform: translate3d(-12vw, -7vh, 0) scale(.92); }
}
@media (prefers-reduced-motion: reduce) {
  .n-blur span { animation: none; }
}

/* ============================================================
   TRES PETITS ECRANS (320x568, 360x640) — derniers resserrements.
   ⚠️ Mesure : a 320 px il restait un debordement de 4 a 31 px sur les pages de
   contenu. On resserre l'espacement, on ne rogne jamais le contenu.
   ============================================================ */
@media (max-height: 600px) {
  .n-screen--serre { padding-top: 3.6rem; padding-bottom: .8rem; }
  .n-screen--serre .n-title { font-size: 1.35rem; }
  .n-screen--serre .n-sub { font-size: .85rem; margin-top: .55rem; line-height: 1.45; }
  .n-screen--serre .n-car-label { margin-top: .7rem; }
  .n-screen--serre .n-car-item { padding: .65rem .7rem; }
  .n-screen--serre .n-car-item h3 { font-size: .92rem; margin-bottom: .3rem; }
  .n-screen--serre .n-car-item .n-prix { font-size: 1.1rem; }
  .n-screen--serre .n-cta { margin-top: .7rem; }
  .n-screen--serre .n-btn { padding: 9px 12px; font-size: 10px; }
  .n-detail { margin-top: .5rem; }
  .n-detail summary { font-size: .66rem; }
}

/* ============================================================
   MODE LECTURE « NO SCROLL » (2026-10-05, demande du user)
   Pour les pages a texte long (blog, CGV, confidentialite, mentions) : la PAGE
   ne defile JAMAIS ; c'est la ZONE DE TEXTE qui defile, dans l'ecran.
   ⚠️ Pourquoi c'est la bonne reponse : un texte long qu'on force a tenir dans
   100svh devient soit illisible (trop petit), soit rogne (perdu). Ici la
   hauteur est exactement celle du viewport et le texte defile DEDANS — comme
   un article dans une fenetre. Mesure : `docH == innerHeight` sur toute page.
   ============================================================ */
.n-lecture {
  /* ⚠️⚠️ `height` et NON `min-height` : c'est la hauteur FIXE de l'ecran qui
     oblige le texte a defiler DEDANS. Avec `min-height`, le conteneur grandit
     avec le texte et c'est la page entiere qui defile (bug mesuré : +1264 px
     sur /cgv). Le bloc est borne a l'ecran, le corps defile a l'interieur. */
  height: 100svh;
  box-sizing: border-box;
  padding: 5.5rem var(--n-pad) 2rem;
  display: flex; flex-direction: column;
  overflow: hidden;
}
.n-lecture__tete { flex: 0 0 auto; }
.n-lecture__tete .n-title { font-size: var(--n-titre); max-width: 28ch; }
.n-lecture__tete .n-sub { margin-top: 1rem; }
.n-lecture__corps {
  /* la hauteur disponible, ni plus ni moins : c'est ce qui garantit que la page
     ne defile pas, quel que soit le volume de texte. */
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  margin-top: 1.6rem;
  padding-right: 1rem;
  max-width: 68ch;              /* largeur de lecture confortable */
  font-size: var(--n-corps);
  line-height: 1.68;
  scrollbar-width: thin;
  border-top: 1px solid var(--n-rule);
  padding-top: 1.4rem;
}
.n-lecture__corps h2 { font-size: 1.15rem; margin: 2rem 0 .7rem; }
.n-lecture__corps h3 { font-size: 1.02rem; margin: 1.5rem 0 .5rem; }
.n-lecture__corps p, .n-lecture__corps li { margin: 0 0 1rem; color: var(--n-fg); }
.n-lecture__corps a { color: var(--n-fg); }
.n-lecture__corps strong { font-weight: 600; }
/* ⚠️ marge basse pour que le dernier paragraphe ne colle jamais au bord */
.n-lecture__corps > *:last-child { margin-bottom: 2rem; }

/* ============================================================
   PAGES A FORMULAIRE / TUNNEL — « no scroll » (2026-10-05).
   Même principe que le mode lecture : la PAGE tient dans l'écran, c'est le
   CONTENU (formulaire) qui défile dedans si besoin.
   ⚠️ Les formulaires gardent TOUS leurs champs, leur `name` et leur `csrf_token` :
   seule l'enveloppe visuelle change. Un formulaire amputé ne se remplit plus.
   ============================================================ */
.n-screen--form {
  height: 100svh; box-sizing: border-box; overflow: hidden;
  padding: 5.5rem var(--n-pad) 2rem;
  display: flex; flex-direction: column;
  justify-content: flex-start;
}
.n-screen--form .n-title { font-size: var(--n-titre); max-width: 26ch; }
.n-formbox {
  flex: 1 1 auto; min-height: 0;
  overflow-y: auto;
  margin-top: 1.4rem;
  max-width: 46rem;
  scrollbar-width: thin;
  padding-right: .5rem;
}
/* les champs : on garde les classes d'origine, on ne retouche que ce qui est
   indispensable pour qu'ils restent lisibles sur fond blanc. */
.n-formbox input, .n-formbox select, .n-formbox textarea {
  width: 100%; padding: 12px 14px; margin: 6px 0 14px;
  border: 1px solid var(--n-rule); background: var(--n-bg); color: var(--n-fg);
  font-family: Inter, Archivo, system-ui, sans-serif; font-size: 1rem;
  border-radius: 0; box-sizing: border-box;
}
.n-formbox label {
  font-family: 'IBM Plex Mono', monospace; font-size: .72rem;
  letter-spacing: .12em; text-transform: uppercase; color: var(--n-dim);
}
.n-formbox .btn, .n-formbox button[type=submit] {
  display: inline-block; padding: 14px 24px; border: 1px solid var(--n-fg);
  background: var(--n-fg); color: var(--n-bg); border-radius: 0;
  font-family: 'IBM Plex Mono', monospace; font-size: .78rem;
  letter-spacing: .14em; text-transform: uppercase; cursor: pointer;
}
.n-formbox h2, .n-formbox h3 { font-family: Anton, Archivo, sans-serif; font-weight: 400; text-transform: uppercase; }

/* ============================================================
   ENVELOPPE « no scroll » des pages a formulaire / tunnel.
   ⚠️ `height: 100svh` + `overflow-y: auto` : la PAGE ne defile pas, le
   CONTENU defile DEDANS. C'est ce qui permet de convertir /leads, /contact,
   /artisan et /visibilite sans toucher a leurs champs.
   ============================================================ */
.n-formwrap {
  height: 100svh; box-sizing: border-box;
  overflow-y: auto;
  padding: 5.5rem var(--n-pad) 2.5rem;
  scrollbar-width: thin;
}
@media (max-height: 760px) { .n-formwrap { padding: 4.5rem var(--n-pad) 1.6rem; } }
/* les champs herites restent lisibles sur fond blanc */
.n-formwrap input, .n-formwrap select, .n-formwrap textarea {
  border: 1px solid var(--n-rule); background: var(--n-bg); color: var(--n-fg);
  border-radius: 0; font-family: Inter, Archivo, system-ui, sans-serif;
}
.n-formwrap .btn, .n-formwrap button { border-radius: 0; }

/* ============================================================
   BLOC DE PAIEMENT (`.n-pay`) — la carte de commande de /visibilite.
   ⚠️ Le FORMULAIRE n'est pas retouche (action, csrf, email, accept) : seule sa
   presentation change. Il doit rester evident et cliquable en un ecran.
   ============================================================ */
.n-screen--pay { height: 100svh; overflow: hidden; justify-content: flex-start; padding-top: 6.5rem; }
.n-screen--pay .n-title { font-size: clamp(1.5rem, 3.333vw, 3rem); max-width: 26ch; }
.n-screen--pay .n-car { margin-top: .9rem; }
.n-screen--pay .n-car-item { min-width: min(80vw, 260px); padding: .9rem 1rem; }
.n-pay {
  display: flex; align-items: center; gap: 2rem; flex-wrap: wrap;
  margin-top: 1.4rem; padding-top: 1.4rem; border-top: 1px solid var(--n-rule);
}
.n-pay__prix { display: flex; flex-direction: column; gap: .35rem; }
.n-pay__montant { font-family: 'IBM Plex Mono', monospace; font-size: 2.4rem; line-height: 1; }
.n-pay__prix small { font-family: 'IBM Plex Mono', monospace; font-size: .8rem; color: var(--n-dim); }
.n-pay__badge {
  font-family: 'IBM Plex Mono', monospace; font-size: .66rem; letter-spacing: .16em;
  text-transform: uppercase; border: 1px solid var(--n-rule); padding: 5px 9px; color: var(--n-dim);
}
.n-pay__form { flex: 1 1 320px; max-width: 34rem; }
.n-pay__form label { display: block; font-family: 'IBM Plex Mono', monospace; font-size: .7rem;
  letter-spacing: .12em; text-transform: uppercase; color: var(--n-dim); margin-bottom: 5px; }
.n-pay__form input[type=email] {
  width: 100%; padding: 12px 14px; margin-bottom: 14px; border: 1px solid var(--n-rule);
  background: var(--n-bg); color: var(--n-fg); border-radius: 0;
  font-family: Inter, Archivo, system-ui, sans-serif; font-size: 1rem;
}
.n-pay__consent { display: flex; gap: .6rem; align-items: flex-start; text-transform: none;
  font-family: Inter, Archivo, system-ui, sans-serif; font-size: .82rem; letter-spacing: 0; color: var(--n-fg); margin: 0 0 14px; }
.n-pay__consent input { margin-top: .25rem; }
.n-pay__tiny { font-family: 'IBM Plex Mono', monospace; font-size: .64rem;
  letter-spacing: .1em; color: var(--n-dim); margin: .7rem 0 0; text-transform: uppercase; }
@media (max-height: 760px) {
  .n-screen--pay { padding-top: 4.8rem; }
  .n-screen--pay .n-sub { font-size: .9rem; }
  .n-pay { margin-top: .9rem; padding-top: .9rem; gap: 1.1rem; }
}
@media (max-height: 620px) {
  .n-screen--pay { padding-top: 4rem; }
  .n-screen--pay .n-car { display: none; }   /* ecran trop court : on garde l'essentiel */
}