/* =====================================================================
   PAGES AUTONOMES — styles des pages servies hors de l'application
   ---------------------------------------------------------------------
   Aujourd'hui : la page 404 (préfixe .nf-, « not found »). Ces pages
   s'affichent sans JavaScript et parfois alors que le reste du site est
   en difficulté : leur mise en forme ne dépend d'aucun script et
   réutilise les jetons de main.css (couleurs, rayons, ombres, échelle
   d'espacement) — l'identité visuelle est donc la même, sans duplication
   de valeurs.
   ===================================================================== */

/* ---------- En-tête ---------- */
.nf-header{
  position:sticky; top:0; z-index:100;
  background:rgba(0,0,0,.88);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.nf-nav{
  max-width:900px; margin:0 auto; padding:0 20px;
  display:flex; align-items:center; flex-wrap:wrap; gap:2px; min-height:56px;
}
.nf-brand{
  display:inline-flex; align-items:center; gap:var(--sp-2);
  min-height:44px; padding-right:10px;
  font-weight:800; font-size:1.02rem; color:var(--white); text-decoration:none;
}
.nf-brand-2{color:var(--gray-3)}
.nf-logo{width:24px;height:auto}
.nf-spacer{flex:1}
.nf-navlink{
  display:inline-flex; align-items:center; min-height:44px; padding:0 10px;
  color:var(--gray-2); font-size:.88rem; text-decoration:none;
}
.nf-navlink:hover{color:var(--white)}

/* ---------- Corps ---------- */
.nf-main{
  position:relative;
  max-width:760px; margin:0 auto;
  padding:clamp(48px,10vw,110px) 20px 64px;
  text-align:center;
}
/* Halo discret : la même signature lumineuse que le héros de l'accueil,
   pour que la page d'erreur reste reconnaissable comme MacroBot. */
.nf-glow{
  position:absolute; top:-140px; left:50%; transform:translateX(-50%);
  width:min(680px,92vw); height:420px; pointer-events:none;
  background:radial-gradient(closest-side,rgba(255,255,255,.10),transparent 72%);
}
.nf-code{
  position:relative;
  font-size:clamp(3.4rem,13vw,7rem); font-weight:900; letter-spacing:-.06em;
  line-height:.9; color:transparent;
  -webkit-text-stroke:1.5px #3d3d3d;
  margin-bottom:var(--sp-4);
  user-select:none;
}
.nf-title{
  position:relative;
  font-size:clamp(1.9rem,5vw,3rem); font-weight:900; letter-spacing:-.035em;
  line-height:1.05; margin-bottom:var(--sp-5);
}
.nf-lead{
  position:relative;
  max-width:56ch; margin:0 auto var(--sp-4);
  color:var(--gray-2); font-size:var(--fs-md); line-height:1.7;
}
.nf-calm{
  max-width:56ch; margin:0 auto var(--sp-8);
  color:var(--gray-3); font-size:var(--fs-sm); line-height:1.65;
}

/* ---------- Actions ---------- */
.nf-cta{
  display:flex; flex-wrap:wrap; justify-content:center; gap:var(--sp-3);
  margin-bottom:var(--sp-9);
}
.nf-cta .btn{justify-content:center}
@media(max-width:520px){
  .nf-cta{flex-direction:column; align-items:stretch}
  .nf-cta .btn{width:100%}
}

/* ---------- Raccourcis ----------
   `padding:0` neutralise la règle globale `section{padding:108px 0}` de
   main.css : sans elle, un vide de deux écrans sépare les boutons des
   raccourcis, et la page paraît cassée plutôt que sobre. */
.nf-links{text-align:left; margin:0 auto var(--sp-8); max-width:620px; padding:0}
.nf-links-t{
  font-size:var(--fs-sm); font-weight:700; text-transform:uppercase;
  letter-spacing:.08em; color:var(--gray-3); margin-bottom:var(--sp-4);
}
.nf-list{list-style:none; display:grid; gap:var(--sp-2)}
.nf-list a{
  display:flex; flex-direction:column; gap:2px;
  padding:14px 16px;
  border:1px solid var(--line); border-radius:var(--radius-md);
  background:var(--panel);
  transition:border-color .2s var(--ease), background .2s var(--ease), transform .2s var(--ease);
}
.nf-list a:hover,.nf-list a:focus-visible{
  border-color:var(--line-2); background:var(--panel-2); transform:translateY(-1px);
}
.nf-list b{font-size:var(--fs-base); font-weight:600}
.nf-list span{color:var(--gray-3); font-size:var(--fs-sm); line-height:1.5}

/* ---------- Aide ---------- */
.nf-help{
  max-width:56ch; margin:0 auto;
  color:var(--gray-3); font-size:var(--fs-sm); line-height:1.7;
}
.nf-help a{color:var(--white); text-decoration:underline}

/* ---------- Pied ---------- */
.nf-footer{
  border-top:1px solid var(--line);
  padding:var(--sp-7) 20px var(--sp-9);
  text-align:center; color:var(--gray-3); font-size:var(--fs-sm);
}
.nf-footer a{color:var(--gray-2)}
.nf-footer a:hover{color:var(--white); text-decoration:underline}
.nf-footer-2{margin-top:var(--sp-2); color:var(--gray)}

/* =====================================================================
   « L'ESSAI, SANS ZONE D'OMBRE » — bloc d'information tarifaire
   ---------------------------------------------------------------------
   Encadré volontairement sobre, placé sous les prix de l'accueil et de la
   page Tarifs. Une définition par question, en <dl> : c'est la structure
   sémantique juste (terme → définition), elle est lue correctement par
   les lecteurs d'écran et par les moteurs.
   ===================================================================== */
.essai-clair{
  max-width:900px; margin:var(--sp-8) auto 0;
  border:1px solid var(--line); border-radius:var(--radius-lg);
  background:var(--panel); padding:clamp(20px,4vw,30px);
}
.essai-clair h3{
  font-size:var(--fs-lg); margin-bottom:var(--sp-5);
}
.essai-clair dl{display:grid; gap:var(--sp-5)}
@media(min-width:760px){ .essai-clair dl{grid-template-columns:1fr 1fr; gap:var(--sp-5) var(--sp-7)} }
.essai-clair dt{
  font-weight:700; font-size:var(--fs-base); margin-bottom:var(--sp-1);
}
.essai-clair dd{color:var(--gray-2); font-size:var(--fs-sm); line-height:1.65}
.essai-clair dd b{color:var(--white)}