/* ============================================================
   charte-essentiel.css — FEUILLE UNIQUE DE LA FAMILLE « pages essentielles »
   ⚠️ FICHIER GÉNÉRÉ par scripts/regenerer_la_charte.py. Ne rien écrire ici à la
   main : modifier la feuille d'origine, puis régénérer. Les fichiers d'origine
   restent sur le disque.
   Ordre concaténé : nuee3d.css, passe-interface.css
   ============================================================ */

/* ===== début nuee3d.css ===== */
/* ============================================================================
   LA NUÉE — couche de fond commune (2026-10-13)

   ⚠️ À QUOI ÇA SERT. Le décor animé (`nuee3d.js`) doit être visible sur TOUTES
   les pages : accueil, offres, /prix, /services, métiers, départements, blog,
   CGV, mentions, tableau de bord, administration. Les pages viennent de deux
   gabarits différents (`_head.html` et `_n_essentiel.html`) qui peignent chacun
   leur fond opaque (`body{background:var(--paper)}` d'un côté, `.n-body{
   background:var(--n-bg)}` de l'autre) : sans cette feuille, la nuée resterait
   cachée derrière eux.

   ⚠️⚠️ UNE SEULE COUCHE, ET C'EST LE CANVAS (2026-10-13, bug constaté en prod).
   La première version posait un DEUXIÈME calque plein écran : un `<div>` voile
   de lisibilité en `z-index:-1`. Résultat : les images de la page — les trois
   exemples de l'accueil — s'affichaient EN BLANC, le compositeur du navigateur
   perdant leur calque. Le voile est désormais peint DANS le canvas (dernière
   passe de `dessiner()`), et il n'existe plus aucun élément plein écran autre
   que `#nuee-fond`. ⚠️ Ne jamais réintroduire de `<div>` de ce genre ici.

   ⚠️ LE CONTENU N'EST PAS TOUCHÉ. Aucun `z-index` de page n'est modifié, aucune
   carte, aucun menu ne change de plan : le canvas reste en `z-index:-2`, donc
   au-dessus du fond de `<html>` et sous tout le reste.

   ⚠️ Le fond papier du canvas (propriété `background` ci-dessous) n'est qu'un
   repli pour l'instant qui précède la première image, quand le JS n'a pas
   encore tourné : dès la première image, le voile peint dans le canvas prend
   le relais.
   ============================================================================ */

#nuee-fond {
  position: fixed;
  inset: 0;
  z-index: -2;
  display: block;
  pointer-events: none;   /* un décor ne capte jamais un clic */
  background: linear-gradient(180deg,
      rgba(247, 244, 238, .62) 0%,
      rgba(247, 244, 238, .86) 42%,
      rgba(247, 244, 238, .97) 100%);
}

/* Les deux fonds pleine page laissent voir la nuée. Les surfaces de contenu
   (cartes, panneaux, menus, tableaux) gardent leur fond : elles restent nettes. */
html { background-color: var(--paper, #f7f4ee); }
html.nuee-on body { background-color: transparent !important; }
html.nuee-on .n-body { background: transparent !important; }

/* Surface plein écran du gabarit « no scroll ». */
html.nuee-on .n-screen { background: transparent; }

/* Le décor ne s'affiche pas à l'impression. */
@media print {
  #nuee-fond { display: none; }
  html { background: #fff; }
}

/* ===== fin nuee3d.css ===== */

/* ===== début passe-interface.css ===== */
/* ============================================================
   PASSE D'INTERFACE — 2026-10-13
   Feuille chargée EN DERNIER dans les deux familles de gabarits
   (`_head.html` pour les pages classiques, `n_base.html` + `_n_essentiel.html`
   pour les pages publiques). Elle ne réécrit aucune page : elle repose les
   mêmes composants avec une seule échelle, une seule palette et un seul rythme.

   ⚠️ CE QUI N'ALLAIT PAS, RELEVÉ PAGE PAR PAGE :
   1. Le fond des pages publiques était BLANC PUR (`--n-bg: #ffffff`) et l'encre
      NOIRE (`--n-fg: #0a0a0a`), alors que la charte du site est ivoire
      (#f7f4ee) et encre chaude (#191713). La moitié du site était froide.
   2. Chaque famille avait ses propres cotes de bouton, de carte et de champ.
   3. Les titres de section n'avaient pas de repère : pas d'échelle commune
      entre l'accueil (titre géant) et une page de prix (titre moyen).
   4. Le pied de page de la famille publique n'existait PAS (voir
      templates/_n_pied.html), et celui de la famille classique était clair,
      sans hiérarchie.
   5. Aucun état de focus visible sur les champs : on tabulait dans le vide.

   ⚠️ ORDRE DE CHARGE : cette feuille DOIT rester la dernière. Les feuilles de
   page (`seo_*.html`, `admin_*.html`) qui viennent après gardent la main sur
   leur propre périmètre.
   ============================================================ */

:root {
  /* La charte, écrite une fois pour tout le site. */
  --pi-papier:      #f7f4ee;   /* ivoire : le fond de tout le site */
  --pi-papier-2:    #efeae0;   /* ivoire plus dense : bandeaux, survols */
  --pi-carte:       #fffdf9;   /* le papier des cartes, plus clair que le fond */
  --pi-encre:       #191713;   /* encre chaude, jamais du noir pur */
  --pi-encre-doux:  #6f675a;   /* texte secondaire (4,9:1 sur ivoire) */
  --pi-or:          #b08a3e;   /* aplats, traits, gros chiffres */
  --pi-or-clair:    #e8c887;   /* or sur fond sombre */
  --pi-or-profond:  #8a6a2a;   /* texte doré fin (4,6:1 sur ivoire) */
  --pi-ligne:       rgba(25, 23, 19, .10);
  --pi-ligne-forte: rgba(25, 23, 19, .18);
  --pi-ligne-or:    rgba(176, 138, 62, .30);
  --pi-ombre-1: 0 1px 2px rgba(25, 23, 19, .05), 0 4px 14px rgba(25, 23, 19, .05);
  --pi-ombre-2: 0 10px 30px rgba(90, 70, 35, .10), 0 2px 6px rgba(90, 70, 35, .06);
}

/* ---------- 1. LE PAPIER ---------- */
html, body, .n-body, .n-screen, .vitrine { background-color: var(--pi-papier); }
body, .n-body { color: var(--pi-encre); }

/* Les jetons historiques pointent maintenant sur la charte : les pages qui les
   utilisent (elles sont nombreuses) suivent sans être touchées. */
:root {
  --n-bg:       var(--pi-carte);
  --n-fg:       var(--pi-encre);
  --n-dim:      var(--pi-encre-doux);
  --n-rule:     var(--pi-ligne);
  --n-or:       var(--pi-or);
  --n-or-texte: var(--pi-or-profond);
  --n-or-ligne: var(--pi-ligne-or);
}

/* ---------- 2. L'ÉCHELLE TYPOGRAPHIQUE ---------- */
.n-title {
  font-size: clamp(2.1rem, 5.2vw, 5rem);
  line-height: .99; letter-spacing: -.022em;
  text-wrap: balance;
}
.n-kicker {
  color: var(--pi-or-profond);
  letter-spacing: .24em; font-size: .72rem;
  display: flex; align-items: center; gap: .7rem;
}
.n-kicker::before {           /* un trait doré : la page a un début lisible */
  content: ""; width: 28px; height: 1px;
  background: var(--pi-or); opacity: .75; flex: 0 0 auto;
}
.n-sub {
  font-size: clamp(1rem, 1.1vw, 1.12rem);
  line-height: 1.7; color: var(--pi-encre-doux); max-width: 58ch;
  text-wrap: pretty;
}
.n-car-label, h2, h3 { letter-spacing: -.01em; }

/* ---------- 3. LES BOUTONS : une seule famille ---------- */
.n-btn, .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 52px; padding: 0 26px; border: 1px solid transparent; border-radius: 999px;
  font-family: 'IBM Plex Mono', monospace; font-size: .76rem; font-weight: 500;
  letter-spacing: .15em; text-transform: uppercase; text-decoration: none;
  cursor: pointer; background: var(--pi-encre); color: #fbf8f2;
  transition: transform var(--d-court, .16s) var(--t-doux, ease),
              box-shadow var(--d-court, .16s) var(--t-doux, ease),
              background-color var(--d-court, .16s), border-color var(--d-court, .16s), color var(--d-court, .16s);
}
.n-btn:hover, .btn:hover { transform: translateY(-1px); box-shadow: var(--pi-ombre-2); }
.n-btn:active, .btn:active { transform: translateY(0); box-shadow: var(--pi-ombre-1); }

/* Bouton or : encre sur or. C'est la règle de contraste de la charte
   (« --n-or : aplats ; encre des boutons or »). */
.n-btn--or, .btn.primary { background: var(--pi-or); color: #1c1607; }
.n-btn--or:hover, .btn.primary:hover { background: #bd954a; }

/* Bouton contour : pour l'action secondaire, jamais deux boutons pleins côte à côte. */
.n-btn-ghost, .btn.ghost {
  background: transparent; color: var(--pi-encre); border-color: var(--pi-ligne-forte);
}
.n-btn-ghost:hover, .btn.ghost:hover { border-color: var(--pi-or); color: var(--pi-or-profond); background: transparent; }

.btn.big { min-height: 56px; padding: 0 30px; font-size: .8rem; }

/* ---------- 4. LES CARTES ---------- */
.n-car-item, .n-plan, .n-preuve, .n-pay, .n-rappel__form, .card, .auth-card,
.lead-benefit, .tn-chip, .n-pastille {
  background: var(--pi-carte);
  border: 1px solid var(--pi-ligne);
  border-radius: var(--r-lg, 22px);
  box-shadow: var(--pi-ombre-1);
  transition: transform var(--d-court, .16s) var(--t-doux, ease),
              box-shadow var(--d-court, .16s) var(--t-doux, ease),
              border-color var(--d-court, .16s);
}
.n-car-item:hover, .n-plan:hover, .n-preuve:hover, .lead-benefit:hover {
  transform: translateY(-2px);
  box-shadow: var(--pi-ombre-2);
  border-color: var(--pi-ligne-or);
}
.n-car-item { padding: 1.15rem 1.25rem; }
.n-car-item h3 { color: var(--pi-encre); letter-spacing: -.005em; }
.n-prix { color: var(--pi-or-profond); font-variant-numeric: tabular-nums; }

.n-plan { padding: 1.9rem 1.7rem; }
.n-plan__nom { color: var(--pi-or-profond); }
.n-plan__prix { font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.n-plan--phare { border-color: var(--pi-ligne-or); box-shadow: var(--pi-ombre-2); }
.n-plan__badge {
  background: var(--pi-or); color: #1c1607; border: 0; border-radius: 999px;
}
.n-plan__liste li::marker { color: var(--pi-or); }

/* ---------- 5. LES CHAMPS ---------- */
input[type=text], input[type=email], input[type=tel], input[type=password],
input[type=search], select, textarea {
  border-radius: var(--r-sm, 10px) !important;
  border: 1px solid var(--pi-ligne-forte) !important;
  background: #fff; color: var(--pi-encre);
  min-height: 52px; padding: 0 16px; font-size: 1rem;
  font-family: Inter, Archivo, system-ui, sans-serif;
  transition: border-color var(--d-court, .16s), box-shadow var(--d-court, .16s);
}
textarea { padding: 14px 16px; line-height: 1.6; min-height: 110px; }
input::placeholder, textarea::placeholder { color: rgba(25, 23, 19, .42); }

/* ⚠️ Sans anneau de focus, on tabule dans le vide : le champ actif doit se voir. */
input:focus, select:focus, textarea:focus,
.n-btn:focus-visible, .btn:focus-visible, a:focus-visible, summary:focus-visible {
  outline: none;
  border-color: var(--pi-or) !important;
  box-shadow: 0 0 0 3px rgba(176, 138, 62, .18) !important;
}
a:focus-visible, .n-btn:focus-visible, .btn:focus-visible {
  outline: 2px solid var(--pi-or); outline-offset: 3px; box-shadow: none !important;
}
label { color: var(--pi-encre-doux); }

/* ---------- 6. LA BARRE DU HAUT ---------- */
.n-head {
  background: rgba(247, 244, 238, .88) !important;
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--pi-ligne) !important;
}
.n-logo { color: var(--pi-encre) !important; letter-spacing: .01em; }
.n-logo b { font-weight: 500; }
.n-logo b span { color: var(--pi-or-profond); }
.n-menu-btn {
  border-radius: 999px !important; border: 1px solid var(--pi-ligne-forte) !important;
  transition: border-color var(--d-court, .16s), background-color var(--d-court, .16s);
}
.n-menu-btn:hover { border-color: var(--pi-or) !important; background: var(--pi-papier-2); }

/* ---------- 7. LE RYTHME DES SECTIONS ---------- */
.n-screen { padding-left: var(--n-pad); padding-right: var(--n-pad); }
.n-car { gap: 1rem; scroll-padding-left: var(--n-pad); }
.n-detail details {
  border: 1px solid var(--pi-ligne); border-radius: var(--r-md, 16px);
  background: var(--pi-carte); padding: 2px 20px 6px; margin-bottom: 10px;
}
.n-detail summary {
  cursor: pointer; padding: 16px 0; font-family: 'IBM Plex Mono', monospace;
  font-size: .76rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--pi-encre); list-style: none;
}
.n-detail summary::-webkit-details-marker { display: none; }
.n-detail summary::after { content: "+"; float: right; color: var(--pi-or-profond); }
.n-detail details[open] summary::after { content: "−"; }
.n-detail p { color: var(--pi-encre-doux); line-height: 1.7; }

/* Les quatre chiffres de l'accueil : un vrai bandeau, plus du texte posé. */
.n-facts { border-top: 1px solid var(--pi-ligne-or); border-bottom: 1px solid var(--pi-ligne-or); }
.n-facts dt { color: var(--pi-or-profond); letter-spacing: .14em; }
.n-facts dd { color: var(--pi-encre); font-variant-numeric: tabular-nums; }
.n-facts > div { border-right-color: var(--pi-ligne); }

/* ---------- 8. DÉTAILS ---------- */
::selection { background: rgba(176, 138, 62, .26); }
html { scroll-behavior: smooth; }
a, button, summary { -webkit-tap-highlight-color: transparent; }
img { max-width: 100%; }

/* ---------- 9. LES PIEDS DE PAGE : la même encre pour les deux familles ---------- *
   ⚠️ Le pied public n'existait pas (voir templates/_n_pied.html) et celui de la
   famille classique était clair, sans hiérarchie, avec un logo à fond clair.
   Les deux passent sur l'encre du site, texte ivoire, accents or. */
.np, .footer {
  background: var(--pi-encre); color: #e7e0d2;
  padding: 3.6rem var(--n-pad, 28px) 2rem;
}
.np a, .footer a, .np__mail, .footer-mail, .footer-tagline {
  color: #e7e0d2; text-decoration: none; opacity: .8;
  transition: color var(--d-court, .16s), opacity var(--d-court, .16s);
}
.np a:hover, .footer a:hover { color: var(--pi-or-clair); opacity: 1; }
.np__grille {
  display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: 2.4rem;
  max-width: 1120px; margin: 0 auto;
}
.np__logo {
  font-family: Anton, Archivo, sans-serif; font-size: 1.4rem; letter-spacing: .01em;
  text-transform: lowercase; opacity: 1 !important; color: #f6f1e7 !important;
}
.np__phrase { margin: .9rem 0 .6rem; max-width: 34ch; font-size: .95rem; line-height: 1.65; opacity: .72; }
.np__titre, .footer h4 {
  font-family: 'IBM Plex Mono', monospace; font-size: .7rem; letter-spacing: .18em;
  text-transform: uppercase; color: var(--pi-or-clair); margin: 0 0 1rem;
}
.np__col { display: flex; flex-direction: column; gap: .62rem; font-size: .95rem; }
.np__bas {
  display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; align-items: center;
  max-width: 1120px; margin: 3rem auto 0; padding-top: 1.4rem;
  border-top: 1px solid rgba(232, 200, 135, .18); font-size: .82rem; opacity: .7;
}
.np__liens { display: flex; gap: 1.2rem; }

/* la famille classique : on garde sa grille et son bloc de marque, on change l'encre */
.footer { padding: 3.2rem 0 1.8rem; }
.footer-grid { max-width: 1120px; margin: 0 auto; padding: 0 var(--n-pad, 28px); gap: 2.4rem; }
.footer .brand-name { color: #f6f1e7; }
.footer .brand-name span { color: var(--pi-or-clair); }
/* ⚠️ Le logo de la marque est un fichier à fond clair : sur l'encre il
   disparaîtrait. On garde le mot-symbole, qui lui est lisible. */
.footer .brand-mark { display: none; }
.footer h4 { margin-bottom: .85rem; }

@media (max-width: 980px) { .np__grille { grid-template-columns: 1fr 1fr; gap: 1.9rem; } }
@media (max-width: 560px) {
  .np__grille { grid-template-columns: 1fr; gap: 1.6rem; }
  .np__bas { flex-direction: column; align-items: flex-start; margin-top: 2rem; }
}

/* ---------- 10. FINITIONS DE LA PREMIÈRE PASSE (mesurées à l'écran) ---------- */

/* ⚠️ Le titre de l'accueil plafonnait à 48 px en 1440 : `no_scroll_dimension.css`
   verrouille la taille des titres en `@media (min-width: 900px)` avec
   `!important` (3,333 vw). Un hero qui vend « vous êtes invisible sur Google »
   mérite plus d'autorité. C'est le SEUL endroit de cette passe où l'on écrit
   `!important` — il faut bien relever un verrou pour le relever. */
.n-screen--accueil .n-title, .n-screen--pay .n-title {
  font-size: clamp(2.4rem, 4.7vw, 4.4rem) !important;
  letter-spacing: -.02em;
}
/* Le hero prend la largeur de l'écran : le regard descend, il ne balaie pas. */
.n-screen--accueil .n-sub { max-width: 52ch; }

/* ⚠️ `.n-blur` posait un gros aplat beige en haut à droite : sur le papier ivoire
   il se lit comme un bloc inachevé, pas comme une lumière. On en fait une lueur
   très douce, et on la garde hors du texte. */
.n-blur { opacity: .45 !important; filter: blur(60px) saturate(120%) !important; }
.n-blur span {
  background: radial-gradient(circle at 50% 50%, rgba(176,138,62,.32), rgba(176,138,62,0) 72%) !important;
}

/* Les exemples : le métier en étiquette dorée, la description discrète. */
.n-preuves__tete { color: var(--pi-encre); letter-spacing: .2em; }
.n-preuve__corps { padding: .9rem 1.1rem 1.05rem; }
.n-preuve__corps b {
  display: block; font-family: 'IBM Plex Mono', monospace; font-size: .74rem;
  letter-spacing: .16em; text-transform: uppercase; color: var(--pi-or-profond);
}
.n-preuve__quoi { color: var(--pi-encre-doux); font-size: .9rem; }
.n-preuve { overflow: hidden; }
.n-preuve__visuel { display: block; border-bottom: 1px solid var(--pi-ligne); }
.n-preuves__plus {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: 'IBM Plex Mono', monospace; font-size: .74rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--pi-or-profond); text-decoration: none;
}
.n-preuves__plus:hover { color: var(--pi-encre); }

/* Le carrousel de prestations : même hauteur de carte, titre en encre, prix en or. */
.n-car-item h3 { font-size: 1.02rem; }
.n-car-item .n-prix { font-size: .95rem; }

/* Les listes d'offres : un tiret doré, pas un carré de navigateur. */
.n-plan__liste { list-style: none; padding-left: 0; }
.n-plan__liste li { position: relative; padding-left: 1.15rem; }
.n-plan__liste li::before {
  content: "—"; position: absolute; left: 0; color: var(--pi-or);
}
.n-plan__liste li::marker { content: ""; }

/* ---------- 11. LES ÉCRANS NE TRONQUENT PLUS LEUR DERNIER BLOC ----------
   ⚠️⚠️ MESURÉ sur /pricing : `section.n-screen--prix` a `height: 100svh` (900 px)
   et `overflow: hidden auto`. Le bloc « DevisalySEO » qui la suit était donc
   COUPÉ EN DEUX au ras du bas de l'écran. Le défaut passait inaperçu tant que la
   page se terminait là ; depuis qu'elle a un pied de page, la coupure saute aux
   yeux. L'écran garde sa hauteur minimale (l'effet « une seule page »), mais il
   ne tronque plus : ce qui dépasse allonge la page au lieu d'être perdu. */
.n-screen--prix { height: auto !important; min-height: 100svh; overflow: visible !important; }

/* ---------- 12. LES EXEMPLES SUR MOBILE : une rangée qu'on fait glisser ----------
   ⚠️ Mesuré en 390 px : la grille des exemples restait en trois colonnes, chaque
   étiquette se cassait sur quatre lignes (« PLOMBIER / Dépannage et
   installations, à Lyon »). On passe en rangée glissante — c'est déjà le langage
   du site pour les carrousels (« FAITES DÉFILER ») — avec accroche au doigt. */
@media (max-width: 860px) {
  /* ⚠️ La grille gardait `grid-template-columns: repeat(3, 1fr)` d'une autre
     feuille : tant qu'on ne la neutralise pas, les items restent à 1fr et les
     étiquettes se cassent sur quatre lignes. */
  .n-preuves__grille {
    display: grid !important; grid-template-columns: none !important;
    grid-auto-flow: column !important; grid-auto-columns: 78% !important;
    gap: .9rem; overflow-x: auto; scroll-snap-type: x mandatory;
    scroll-padding-left: var(--n-pad, 20px);
    -webkit-overflow-scrolling: touch;
    padding-bottom: .4rem;
  }
  .n-preuves__grille::-webkit-scrollbar { display: none; }
  .n-preuve { scroll-snap-align: start; }
  .n-preuve__corps b { font-size: .7rem; }
  .n-preuve__quoi { font-size: .86rem; }
}


/* ============================================================
   13. UNE SEULE COLONNE DE CONTENU (2026-10-13, « tout n'est pas centré »)

   ⚠️⚠️ CE QUE LA MESURE MONTRE. Le site n'a pas UNE grille, il en a cinq.
   Bords gauches relevés en 1440 px de large :

        accueil, /pricing, /services, /blog, pages prix   56 px   (pleine largeur)
        /visibilite, /leads, /contact, /artisan          130 px
        pied de page classique                           155 px
        bandeau « être rappelé » et pied public          160 px
        carte de connexion                               500 px (centrée)

   Cinq bords gauches : le logo de la barre (56) ne tombe jamais sur le texte de
   la page, et le pied ne tombe sur rien. C'est ça, le « décalé » — ce n'est pas
   une impression, c'est mesuré.

   ⚠️ LA RÈGLE. Une colonne de 1120 px, centrée, jamais moins de 28 px de marge :
   c'est déjà la largeur du pied, du bandeau, des pages /leads et /visibilite, et
   du `.container` historique. On aligne les pages « pleine largeur » sur elle,
   plutôt que l'inverse : le texte d'un paragraphe ne doit pas courir sur 1328 px.
   ============================================================ */
:root { --pi-colonne: 1120px; }

/* Les écrans de la famille no-scroll : la gouttière devient une gouttière de
   colonne. `padding-inline` ne touche pas le `padding-top` de chaque écran. */
.n-screen {
  padding-inline: max(var(--n-pad, 28px), calc((100% - var(--pi-colonne)) / 2)) !important;
}

/* Les pages à formulaire (leads, contact, artisan, tunnel) : même colonne. */
.n-formwrap, .artisan-hero {
  padding-inline: max(24px, calc((100% - var(--pi-colonne)) / 2)) !important;
}

/* Le bandeau « être rappelé ». */
.n-rappel {
  max-width: none; padding-inline: max(var(--n-pad, 28px), calc((100% - var(--pi-colonne)) / 2));
}
.n-rappel__txt, .n-rappel__form { max-width: 520px; }

/* Le pied de page public : même colonne que la page, pas 104 px plus à droite. */
.np__grille, .np__bas {
  max-width: none;
  padding-inline: max(var(--n-pad, 28px), calc((100% - var(--pi-colonne)) / 2));
}

/* Le pied de page classique : sa colonne est celle de `.container` (1120 px avec
   ses 28 px internes). On enlève la marge double qui le décalait de 25 px. */
.footer-grid { max-width: var(--pi-colonne); margin: 0 auto; padding-inline: 0; }
.footer .container { max-width: none; padding-inline: 0; }

/* ⚠️ Sur mobile, la carte de connexion touchait les deux bords : centrée sur
   grand écran, collée aux bords en 390 px. */
@media (max-width: 620px) {
  .auth-body .auth-card, .auth-card { width: auto; margin-inline: 20px; }
}

/* ⚠️⚠️ ET LA BARRE DU HAUT N'ÉTAIT PAS SUR LA COLONNE. Le logo est à 56 px du
   bord alors que TOUT le texte des pages commence à 153 px : sur chaque page, le
   mot-symbole flottait à gauche de tout le reste — c'est le premier « décalage »
   qui saute aux yeux. La barre reste pleine largeur (son filet traverse l'écran),
   mais son contenu se cale sur la colonne, et le bouton MENU sur le bord droit. */
.n-head {
  padding-inline: max(var(--ng-pad, 24px), calc((100% - var(--pi-colonne)) / 2)) !important;
}


/* ============================================================
   14. LE RYTHME VERTICAL, LE BOUTON DE BARRE, LES DERNIERS DÉCALAGES
   ============================================================ */

/* ---------- 14.1 Un rythme vertical, au lieu de paddings au cas par cas ----------
   ⚠️ Les écarts entre sur-titre, titre, sous-titre, boutons et blocs étaient
   posés à la main dans huit feuilles (22, 26, 32, 48 px selon l'endroit). Une
   seule échelle : 8, 16, 24, 32, 48, 64. */
.n-kicker { margin-bottom: 20px; }
.n-title { margin: 0; }
.n-sub { margin-top: 24px; }
.n-cta { margin-top: 32px; }
.n-preuves { margin-top: 48px; }
.n-facts { margin-top: 40px; }
.n-facts dt { margin-top: 8px; }
.n-facts dd { margin-top: 16px; }
.n-detail { margin-top: 48px; }
.n-car-item { padding: 20px 22px; }
.n-plan { padding: 32px 30px; }
.n-plan__pied { margin-top: 24px; }
.n-pay { margin-top: 48px; padding-top: 32px; }
.n-rappel { padding-block: 64px 72px; }
.np { padding-block: 64px 32px; }
.np__bas { margin-top: 48px; padding-top: 24px; }

/* ---------- 14.2 Le bouton de conversion dans la barre du haut ----------
   ⚠️ Ajouté dans les deux partials de barre. Un bouton discret, à gauche du
   MENU : c'est la seule action du site qui rapporte. */
.n-head__cta {
  margin-left: auto; margin-right: 14px;
  display: inline-flex; align-items: center; min-height: 40px; padding: 0 18px;
  border-radius: 999px; background: var(--pi-or); color: #1c1607;
  font-family: 'IBM Plex Mono', monospace; font-size: .7rem; letter-spacing: .13em;
  text-transform: uppercase; text-decoration: none; white-space: nowrap;
  transition: background-color var(--d-court, .16s), transform var(--d-court, .16s);
}
.n-head__cta:hover { background: #bd954a; transform: translateY(-1px); }
@media (max-width: 560px) {
  .n-head__cta { min-height: 36px; padding: 0 13px; font-size: .64rem; letter-spacing: .1em; margin-right: 8px; }
}

/* ---------- 14.2 bis Le bouton « Appeler » (2026-10-13) ----------
   ⚠️ UN SEUL BOUTON OR PAR ÉCRAN : « Être rappelé » le reste. Celui-ci est en
   CONTOUR (fond transparent, filet d'encre), donc il ne concurrence pas l'action qui
   rapporte, et il reste lisible sur le fond clair comme sur le fond or.

   ⚠️ IL PORTE `margin-left: auto`, PAS `.n-head__cta` SEUL. La barre est en
   `justify-content: space-between` : c'est ce `margin-left:auto` qui pousse le bloc
   des actions vers la droite. Posé AVANT « Être rappelé » dans le DOM, il pousse donc
   les deux boutons ensemble et laisse le logo à gauche. Vérifié en 390 px : la barre
   ne débordait plus dès qu'on l'a masqué sous 900 px (voir plus bas).

   ⚠️ IL DISPARAÎT SOUS 900 px. À 390 px, la barre porte le logo, « Être rappelé » et le
   bouton MENU : un quatrième élément la faisait passer à la ligne. Le numéro reste
   joignable depuis le pied du menu plein écran (`_n_menu.html`), et c'est justement
   sur téléphone qu'un `tel:` est le plus utile — on ne le supprime donc pas, on le
   déplace. */
.n-head__tel {
  margin-left: auto; display: inline-flex; align-items: center;
  min-height: 40px; padding: 0 16px;
  border: 1px solid rgba(10, 10, 10, .35); border-radius: 999px;
  background: transparent; color: #0a0a0a; text-decoration: none; white-space: nowrap;
  font-family: 'IBM Plex Mono', monospace; font-size: .7rem; letter-spacing: .1em;
  text-transform: uppercase;
  transition: border-color var(--d-court, .16s), color var(--d-court, .16s);
}
.n-head__tel:hover { border-color: var(--pi-or, #b8892e); color: #8a6a2a; }
/* ⚠️ Quand « Appeler » est là, c'est LUI qui pousse à droite : « Être rappelé » ne doit
   plus le refaire, sinon les deux se disputent la marge automatique et le logo part au
   milieu. */
.n-head__tel + .n-head__cta { margin-left: 14px; }
@media (max-width: 900px) {
  .n-head__tel { display: none; }
  .n-head__cta { margin-left: auto; }
}

/* ---------- 14.3 Les deux derniers décalages mesurés ----------
   ⚠️ 1. La famille classique posait son contenu 7 px à droite du reste
   (`.container { max-width: 1120px; padding: 0 28px }` : le contenu interne
   commençait à 160 px quand la colonne publique commence à 153). En élargissant
   le conteneur de ses deux gouttières, les deux familles tombent au même pixel.
   ⚠️ 2. Le menu plein écran gardait la gouttière de 56 px : ses entrées ne
   tombaient pas sur la colonne du contenu qu'elles recouvrent. */
.container { max-width: calc(var(--pi-colonne) + 56px) !important; }
.n-menu, .n-menu-foot, .n-menu-group {
  padding-inline: max(24px, calc((100% - var(--pi-colonne)) / 2)) !important;
}

/* ---------- 14.4 Un seul texte restait sous le seuil AA ----------
   ⚠️ « Visibilité Pro » : or profond #8a6a2a sur la carte ivoire, corps 10,6 px,
   rapport mesuré 4,20:1 (seuil 4,5:1). On assombrit l'or des étiquettes posées
   sur une carte, sans toucher à l'or des grands aplats (la charte le réserve aux
   gros chiffres et aux traits). */
.n-plan__nom, .n-preuve__corps b { color: #74581f; }

/* ============================================================
   15. LE DÉCOR NE DOIT PAS PASSER DEVANT LES CHIFFRES (2026-10-13)

   ⚠️ CONSTAT. Sur une page de prix (`/prix/<métier>/<département>`), le décor de la
   nuée se lit comme des RECTANGLES PÂLES posés derrière le titre et la grille de
   tarifs : des blocs gris à bords droits, qui donnent l'impression d'une page
   inachevée. Sur l'accueil, les cartes flottantes sont dans une scène plein écran,
   elles se lisent comme un décor ; ici, l'écran est court (577 px), le contenu est
   dense et commence tout en haut, donc les cartes tombent DERRIÈRE des chiffres.

   ⚠️ CE QU'ON NE FAIT PAS : poser un calque pardessus pour baisser le contraste.
   Un calque plein écran en plus du canvas fait disparaître les images de la page
   (bug des exemples blancs, commit 86534c4). On baisse l'opacité DU CANVAS, ce qui
   éclaircit aussi son voile de lisibilité — et comme le voile est peint DANS le
   canvas, le texte gagne en contraste au lieu d'en perdre.

   ⚠️ `:has()` plutôt qu'une classe de page : le canvas est posé par le script à la
   racine du document, il n'est donc pas un descendant de l'écran. Sans `:has()`, il
   faudrait modifier chaque gabarit. Navigateurs anciens : le décor garde sa pleine
   opacité, rien ne casse. */
body:has(.n-screen--prix) #nuee-fond,
body:has(.n-screen--serre) #nuee-fond { opacity: .42; }

/* ============================================================
   16. L'ACCROCHE ET LE VÉRIFICATEUR — ACCUEIL, EN MODE PC (2026-10-13)

   ⚠️ CONSTAT DU CLIENT : « en mode PC, le site fait très vite ». Mesure : à
   1440 px, le titre plafonnait à 68 px, la phrase d'accroche n'existait pas, et
   l'écran enchaînait sur une grille d'exemples — rien n'arrêtait l'œil, tout
   défilait. Sur une page qui vend de la visibilité, l'écran doit poser un
   constat, une promesse, une preuve vérifiable, puis une action. Dans cet ordre.
   ============================================================ */

/* ---------- 16.1 Le titre et l'accroche, plus haut en mode PC ---------- */
@media (min-width: 900px) {
  .n-screen--accueil .n-title {
    font-size: clamp(3rem, 5.4vw, 5.4rem) !important;   /* 78 px en 1440, 86 px en 1920 */
    line-height: .98 !important;
    max-width: 22ch;
  }
}
.n-hook {
  font-family: 'Archivo', Arial, sans-serif; font-weight: 600;
  font-size: clamp(1.1rem, 1.6vw, 1.6rem); line-height: 1.25;
  color: var(--pi-or-profond); margin: 6mm 0 0; max-width: 34ch;
  /* ⚠️ Pas d'emoji, pas de flèche, pas de gras criard : la phrase est la seule
     chose en gras or de l'écran, c'est ce qui la fait lire. */
}
.n-hook b { font-weight: 700; color: var(--pi-encre); }

/* ---------- 16.1 bis La ligne « tout est dit » ----------
   ⚠️ Demande utilisateur (2026-10-14) : « attirer l'œil sur le fait qu'il n'y a pas de
   blabla, tout est rapide et limpide ». UNE ligne, sous les boutons : le prix, le
   délai, et ce qu'il reste à faire (rien). Le filet au-dessus la détache des boutons
   sans ajouter un bloc de plus à l'écran, et les chiffres sont en or profond : c'est
   ce que l'œil doit attraper. Aucune phrase de plus. */
.n-dit {
  margin: 22px 0 0; padding-top: 14px; border-top: .7pt solid var(--pi-ligne);
  font-family: 'IBM Plex Mono', monospace; font-size: .82rem; line-height: 1.5;
  letter-spacing: .04em; color: var(--pi-encre-doux);
}
.n-dit b { font-weight: 700; color: var(--pi-or-profond); white-space: nowrap; }

/* ---------- 16.2 Le vérificateur de visibilité ---------- */
.n-verif {
  border: .7pt solid var(--pi-filet); border-top: 2pt solid var(--pi-or);
  padding: 5mm 6mm 4.5mm; margin: 8mm 0 0; max-width: 100%;
}
.n-verif__titre {
  font-family: 'Archivo', Arial, sans-serif; font-weight: 700; font-size: 1.02rem;
  margin: 0 0 2mm; color: var(--pi-encre);
}
.n-verif__note { font-size: .84rem; color: var(--pi-muted); margin: 0 0 4mm; max-width: 76ch; }
.n-verif__note b { color: var(--pi-encre); font-weight: 700; }
.n-verif__form {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 4mm 6mm;
}
.n-verif__champ { display: flex; flex-direction: column; gap: 1.6mm; min-width: 200px; }
.n-verif__champ > span {
  font-family: 'PlexMono', ui-monospace, monospace; font-size: .62rem;
  letter-spacing: .14em; text-transform: uppercase; color: var(--pi-muted);
}
.n-verif__champ select {
  appearance: none; -webkit-appearance: none;
  font-family: 'Archivo', Arial, sans-serif; font-size: .9rem; color: var(--pi-encre);
  background: transparent; border: 0; border-bottom: 1pt solid var(--pi-encre);
  border-radius: 0; padding: 2mm 6mm 2mm 0; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--pi-encre) 50%),
                    linear-gradient(135deg, var(--pi-encre) 50%, transparent 50%);
  background-position: right 3mm center, right 1.4mm center;
  background-size: 5px 5px, 5px 5px; background-repeat: no-repeat;
}
.n-verif__champ select:focus-visible { outline: 2px solid var(--pi-or); outline-offset: 2px; }
.n-verif__bas { font-size: .74rem; color: var(--pi-muted); margin: 3.5mm 0 0; }

/* Le bouton encre : la deuxième action de l'écran, distincte du bouton or. */
.n-btn--encre {
  background: var(--pi-encre); color: #f7f4ee; border-color: var(--pi-encre);
}
.n-btn--encre:hover { background: #2b2620; border-color: #2b2620; }

@media (max-width: 700px) {
  .n-verif { padding: 4mm 4.5mm; }
  .n-verif__form { gap: 3mm; }
  .n-verif__champ { min-width: 100%; }
  .n-btn--encre { width: 100%; justify-content: center; }
}

/* ---------- 16.3 En mode PC, l'écran se compose en deux colonnes ----------
   ⚠️ MESURE À 1920 px : le titre et l'accroche n'occupaient que le tiers gauche de
   l'écran, le reste était vide. Sur une page qui vend, la moitié droite est la place
   naturelle de la preuve : le vérificateur y monte, à hauteur du titre, sans qu'on
   ait à défiler. Les exemples et la barre de chiffres restent en pleine largeur. */
@media (min-width: 1180px) {
  .n-screen--accueil {
    display: grid !important;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
    column-gap: 14mm; row-gap: 0;
    /* ⚠️⚠️ MESURÉ : la boîte restait hauteur 100svh alors que le contenu en demande
       1128 px. Avec `align-content: center`, le débordement part DES DEUX CÔTÉS : le
       sur-titre se retrouvait à y=28, c'est-à-dire DERRIÈRE la barre de 63 px —
       invisible. On rend donc la hauteur élastique et on colle le contenu en haut,
       sous la barre. Le défilement redevient normal, rien n'est coupé. */
    height: auto !important;
    min-height: 100svh;
    align-content: start;
    padding-top: 104px !important;
  }
  .n-screen--accueil > .n-kicker,
  .n-screen--accueil > .n-title,
  .n-screen--accueil > .n-hook,
  .n-screen--accueil > .n-sub,
  .n-screen--accueil > .n-cta { grid-column: 1; }
  .n-screen--accueil > .n-verif {
    grid-column: 2; grid-row: 1 / span 6; align-self: center; margin-top: 0;
  }
  .n-screen--accueil > .n-preuves,
  .n-screen--accueil > .n-facts { grid-column: 1 / -1; }
  .n-screen--accueil > .n-preuves { margin-top: 10mm; }
}

/* ---------- 16.4 L'accueil respire plus large que les pages de contenu ----------
   ⚠️ La colonne unique de 1120 px vaut pour les pages de texte (prix, blog, CGV).
   Sur l'accueil en 1920 px, elle laissait 400 px de vide de chaque côté : une page
   de vente qui n'occupe que le centre de l'écran ne vend pas. On élargit L'ACCUEIL
   SEUL à 1400 px, et seulement au-delà de 1180 px. Les paragraphes gardent leur
   propre largeur de lecture (max-width en ch) : la colonne élargie ne rallonge
   aucune ligne de texte. */
@media (min-width: 1180px) {
  .n-screen--accueil {
    padding-inline: max(var(--n-pad, 56px), calc((100% - 1400px) / 2)) !important;
  }
  .n-screen--accueil .n-sub { max-width: 52ch; }
}

/* ===== fin passe-interface.css ===== */