/* ============================================================
   N²COGNITION v3 — feuille principale
   Dépend de n2-tokens.css. Portée : accueil, piliers, situations,
   N² IMPACT, 404. Les gabarits legacy (hotline, cgv, mentions,
   catalogue) restent sur assets/site.css.
   ============================================================ */

/* ---------- 1. Base ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }

body.n2v3{
  margin:0;
  background:var(--n2-bg);
  color:var(--n2-text);
  font-family:var(--n2-font-body);
  font-size:var(--n2-t-body);
  line-height:var(--n2-lh-body);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}

.n2v3 h1,.n2v3 h2,.n2v3 h3{
  font-family:var(--n2-font-display);
  font-weight:400;
  line-height:var(--n2-lh-tight);
  letter-spacing:-.015em;
  margin:0;
  text-wrap:balance;
}
.n2v3 h1 em,.n2v3 h2 em,.n2v3 h3 em{
  font-style:italic; color:var(--n2-bronze); font-weight:400;
}
.n2v3 h4,.n2v3 h5,.n2v3 h6{
  font-family:var(--n2-font-body); font-weight:700;
  letter-spacing:0; line-height:1.3; margin:0;
}
.n2v3 p{ margin:0; }
.n2v3 a{ color:inherit; }
.n2v3 img,.n2v3 svg,.n2v3 canvas{ display:block; max-width:100%; }
.n2v3 ul,.n2v3 ol{ margin:0; padding:0; }

.n2-wrap{ width:100%; max-width:var(--n2-max); margin-inline:auto; padding-inline:var(--n2-pad-x); }
.n2-kicker{
  font-size:var(--n2-t-kicker); font-weight:700;
  letter-spacing:var(--n2-track-kicker); text-transform:uppercase;
  color:var(--n2-bronze); margin:0 0 var(--n2-s4); display:block;
}
.n2-lead{ font-size:var(--n2-t-lead); color:var(--n2-muted); max-width:var(--n2-measure); }
.n2-muted{ color:var(--n2-muted); }
.n2-small{ font-size:var(--n2-t-small); }
.n2-micro{ font-size:var(--n2-t-micro); }

/* ---------- 2. Accessibilité ---------- */
.n2-skip{
  position:absolute; left:var(--n2-s4); top:-5rem; z-index:200;
  background:var(--n2-bronze); color:var(--n2-bg);
  padding:var(--n2-s3) var(--n2-s5); font-weight:700;
  text-decoration:none; transition:top var(--n2-fast);
}
.n2-skip:focus{ top:var(--n2-s4); }
.n2v3 :focus-visible{ outline:2px solid var(--n2-bronze-light); outline-offset:3px; border-radius:1px; }
.n2-sr{
  position:absolute!important; width:1px; height:1px; padding:0;
  margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* ---------- 3. Bandeau urgence ---------- */
.n2-urgence{
  background:var(--n2-surface-2);
  border-bottom:1px solid rgba(184,135,70,.26);
  font-size:var(--n2-t-small);
  position:relative; z-index:60;
}
.n2-urgence .n2-wrap{
  display:flex; flex-wrap:wrap; gap:var(--n2-s2) var(--n2-s3);
  align-items:center; justify-content:center;
  padding-block:var(--n2-s3); text-align:center;
}
.n2-urgence span{ color:var(--n2-text-soft); }
.n2-urgence a{
  color:var(--n2-bronze-light); font-weight:700; text-decoration:none;
  border-bottom:1px solid currentColor; padding-bottom:1px;
  transition:color var(--n2-fast);
}
.n2-urgence a:hover{ color:var(--n2-text); }

/* ---------- 4. En-tête ---------- */
.n2-hdr{
  position:sticky; top:0; z-index:50;
  background:rgba(11,15,20,.92);
  border-bottom:1px solid transparent;
  transition:border-color var(--n2-mid), background var(--n2-mid);
}
@supports (backdrop-filter:blur(10px)){
  .n2-hdr{ backdrop-filter:blur(10px) saturate(140%); }
}
.n2-hdr.is-scrolled{ border-bottom-color:var(--n2-border); background:rgba(11,15,20,.97); }
.n2-bar{ display:flex; align-items:center; justify-content:space-between; gap:var(--n2-s4); padding-block:var(--n2-s3); }
.n2-brand{
  display:inline-flex; align-items:center; gap:var(--n2-s3);
  text-decoration:none; font-family:var(--n2-font-display);
  font-size:1.1875rem; letter-spacing:.02em; color:var(--n2-text);
}
.n2-brand img{ height:40px; width:auto; flex:0 0 auto; }
.n2-foot-brand .n2-brand img{ height:34px; }
.n2-brand sup{ color:var(--n2-bronze); font-size:.62em; top:-.42em; position:relative; }

.n2-nav{ display:none; }
@media (min-width:66rem){
  .n2-nav{ display:flex; align-items:center; gap:var(--n2-s6); }
  .n2-nav a:not(.n2-btn){
    font-size:var(--n2-t-small); font-weight:500; letter-spacing:.015em;
    color:var(--n2-muted); text-decoration:none;
    padding-block:var(--n2-s2); border-bottom:1px solid transparent;
    transition:color var(--n2-fast), border-color var(--n2-fast);
  }
  .n2-nav a:not(.n2-btn):hover,.n2-nav a:not(.n2-btn)[aria-current="page"]{ color:var(--n2-text); border-bottom-color:var(--n2-bronze); }
  .n2-nav .n2-btn{ border-bottom:none; }
}
.n2-burger{
  display:inline-flex; align-items:center; gap:var(--n2-s2);
  background:none; border:var(--n2-rule); color:var(--n2-text);
  font:inherit; font-size:var(--n2-t-small); font-weight:600;
  padding:var(--n2-s2) var(--n2-s3); border-radius:var(--n2-radius);
  cursor:pointer; transition:border-color var(--n2-fast);
}
.n2-burger:hover{ border-color:var(--n2-bronze); }
@media (min-width:66rem){ .n2-burger{ display:none; } }

.n2-drawer{ display:none; border-top:var(--n2-rule); background:var(--n2-surface); }
.n2-drawer.is-open{ display:block; }
.n2-drawer a:not(.n2-btn){
  display:flex; align-items:center; justify-content:space-between;
  padding:var(--n2-s4) 0; border-bottom:var(--n2-rule);
  text-decoration:none; color:var(--n2-text); font-weight:500;
}
.n2-drawer a:not(.n2-btn):last-of-type{ border-bottom:none; }
.n2-drawer .n2-drawer-cta{ padding-block:var(--n2-s5); }
.n2-drawer .n2-drawer-cta .n2-btn{ width:100%; justify-content:center; }

/* ---------- 5. Boutons ---------- */
.n2-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:var(--n2-s3);
  font-family:var(--n2-font-body); font-size:.875rem; font-weight:700;
  letter-spacing:.03em; text-transform:uppercase; text-decoration:none;
  line-height:1.15; white-space:nowrap; max-width:100%;
  padding:var(--n2-s4) var(--n2-s5); border-radius:var(--n2-radius);
  border:1px solid transparent; cursor:pointer;
  transition:background var(--n2-mid), border-color var(--n2-mid), color var(--n2-mid), transform var(--n2-fast);
}
.n2-btn--primary,
a.n2-btn--primary,
.n2-nav a.n2-btn--primary,
.n2-drawer a.n2-btn--primary{ background:var(--n2-bronze); color:#0B0F14; }
.n2-btn--primary:hover{ background:var(--n2-bronze-light); }
.n2-btn--ghost{ border-color:var(--n2-border-mid); color:var(--n2-text); background:transparent; }
.n2-btn--ghost:hover{ border-color:var(--n2-bronze); color:var(--n2-bronze-light); }
.n2-btn--quiet{ padding:0; background:none; border:none; text-transform:none; letter-spacing:0; font-weight:600; color:var(--n2-bronze-light); }
.n2-btn:active{ transform:translateY(1px); }
.n2-btn .n2-ar{ transition:transform var(--n2-mid); }
.n2-btn:hover .n2-ar{ transform:translateX(4px); }

/* ---------- 6. Sections ---------- */
.n2-sec{ padding-block:var(--n2-s8); position:relative; }
@media (min-width:48rem){ .n2-sec{ padding-block:var(--n2-s9); } }
.n2-sec--tight{ padding-block:var(--n2-s7); }
.n2-sec--surface{ background:var(--n2-surface); }
.n2-sec--petrol{ background:var(--n2-surface-2); }
.n2-sec--petrol .n2-lead,.n2-sec--petrol p{ color:var(--n2-text-soft); }
.n2-sec--petrol .n2-kicker{ color:var(--n2-bronze-light); }

.n2-head{ max-width:44rem; margin-bottom:var(--n2-s7); }
.n2-head h2{ font-size:var(--n2-t-h2); margin-bottom:var(--n2-s4); }

/* ---------- 7. HERO + SIGNATURE « ligne de tension » ---------- */
.n2-hero{ position:relative; padding-block:var(--n2-s8) var(--n2-s7); overflow:hidden; }
@media (min-width:48rem){ .n2-hero{ padding-block:var(--n2-s9) var(--n2-s8); } }

/* Halo pétrole très lent — atmosphère, pas décoration */
.n2-hero::before{
  content:""; position:absolute; inset:-30% -20% auto -20%; height:120%;
  background:radial-gradient(56% 48% at 50% 34%, rgba(14,58,74,.55) 0%, rgba(14,58,74,0) 68%);
  pointer-events:none; z-index:0;
}
@media (prefers-reduced-motion:no-preference){
  .n2-hero::before{ animation:n2-drift 26s ease-in-out infinite alternate; }
  @keyframes n2-drift{ from{ transform:translate3d(-2%,0,0) scale(1); } to{ transform:translate3d(2%,-1.5%,0) scale(1.06); } }
}
/* Grain — 1 seul SVG inline, aucune image chargée */
.n2-hero::after{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:0; opacity:.16;
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}
.n2-hero > .n2-wrap{ position:relative; z-index:1; }

.n2-hero h1{ font-size:var(--n2-t-h1); max-width:19ch; margin-bottom:var(--n2-s5); }
.n2-hero .n2-lead{ max-width:46rem; margin-bottom:var(--n2-s6); }
.n2-hero-cta{ display:flex; flex-wrap:wrap; gap:var(--n2-s3); }

/* La signature. Un seul geste graphique sur tout le site. */
.n2-signal{ margin-block:var(--n2-s7) var(--n2-s5); position:relative; }
.n2-signal canvas{ width:100%; height:80px; display:block; }
.n2-signal-noscript{ width:100%; height:80px; }
.n2-signal-noscript path{ fill:none; stroke:var(--n2-bronze); stroke-width:1.3; stroke-linecap:round; }
.n2-signature-line{
  font-family:var(--n2-font-display); font-style:italic;
  font-size:var(--n2-t-lead); color:var(--n2-muted); margin:0;
}
.n2-signature-line em{ font-style:italic; color:var(--n2-bronze); }

/* ---------- 8. Bande de preuve ---------- */
.n2-proof{ border-block:var(--n2-rule); }
.n2-proof ul{ list-style:none; display:grid; gap:var(--n2-s5); padding-block:var(--n2-s6); }
@media (min-width:48rem){ .n2-proof ul{ grid-template-columns:repeat(3,1fr); gap:var(--n2-s7); } }
.n2-proof li{ font-size:var(--n2-t-small); color:var(--n2-muted); line-height:1.5; }
.n2-proof strong{ display:block; color:var(--n2-text); font-weight:700; margin-bottom:3px; font-size:var(--n2-t-body); }

/* ---------- 9. Situations (liste) ---------- */
.n2-situations{ display:grid; border-top:var(--n2-rule); }
@media (min-width:54rem){ .n2-situations{ grid-template-columns:1fr 1fr; column-gap:var(--n2-s8); } }
.n2-sit{
  display:block; text-decoration:none; position:relative;
  padding:var(--n2-s5) var(--n2-s4) var(--n2-s5) var(--n2-s5);
  border-bottom:var(--n2-rule);
  transition:background var(--n2-mid);
}
.n2-sit::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:2px;
  background:var(--n2-bronze); transform:scaleY(0); transform-origin:top;
  transition:transform var(--n2-mid);
}
.n2-sit:hover::before,.n2-sit:focus-visible::before{ transform:scaleY(1); }
.n2-sit:hover,.n2-sit:focus-visible{ background:var(--n2-surface); }
.n2-sit-pillar{
  font-size:var(--n2-t-kicker); font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--n2-bronze);
}
.n2-sit h3{ font-size:var(--n2-t-h3); margin:var(--n2-s2) 0; }
.n2-sit p{ font-size:var(--n2-t-small); color:var(--n2-muted); max-width:52ch; }
.n2-sit-go{
  display:inline-block; margin-top:var(--n2-s3);
  font-size:var(--n2-t-small); font-weight:600; color:var(--n2-bronze-light);
}

/* ---------- 10. Avant / Pendant / Après ---------- */
.n2-phases{ display:grid; gap:var(--n2-s6); }
@media (min-width:54rem){ .n2-phases{ grid-template-columns:repeat(3,1fr); gap:var(--n2-s7); } }
.n2-phase{ border-top:2px solid var(--n2-bronze); padding-top:var(--n2-s4); }
.n2-phase h3{ font-size:var(--n2-t-h3); margin-bottom:var(--n2-s3); }
.n2-phase > p{ font-size:var(--n2-t-small); color:var(--n2-muted); margin-bottom:var(--n2-s4); }
.n2-phase ul{ list-style:none; font-size:var(--n2-t-small); }
.n2-phase li{ padding-block:var(--n2-s2); border-bottom:var(--n2-rule); }
.n2-phase li:last-child{ border-bottom:none; }

/* ---------- 11. Formats ---------- */
.n2-formats{ display:grid; gap:var(--n2-s5); }
@media (min-width:54rem){ .n2-formats{ grid-template-columns:repeat(3,1fr); gap:var(--n2-s6); } }
.n2-format{
  border:var(--n2-rule); border-radius:var(--n2-radius);
  padding:var(--n2-s5); display:flex; flex-direction:column;
  transition:border-color var(--n2-mid), background var(--n2-mid);
}
.n2-format:hover{ border-color:var(--n2-border-bronze); background:var(--n2-surface); }
.n2-format h3{ font-family:var(--n2-font-body); font-weight:700; font-size:var(--n2-t-h4); letter-spacing:0; margin-bottom:var(--n2-s3); }
.n2-format p{ font-size:var(--n2-t-small); color:var(--n2-muted); flex:1; }
.n2-format-when{
  display:inline-block; margin-top:var(--n2-s4);
  font-size:var(--n2-t-kicker); letter-spacing:.12em; text-transform:uppercase;
  color:var(--n2-bronze); font-weight:700;
}

/* ---------- 12. Interventions ---------- */
.n2-cases{ display:grid; gap:var(--n2-s6); }
@media (min-width:54rem){ .n2-cases{ grid-template-columns:repeat(3,1fr); } }
.n2-case{ border-top:var(--n2-rule); padding-top:var(--n2-s4); }
.n2-case-ctx{ font-size:var(--n2-t-kicker); letter-spacing:.12em; text-transform:uppercase; color:var(--n2-muted); }
.n2-case h3{ font-family:var(--n2-font-body); font-weight:700; font-size:var(--n2-t-h4); letter-spacing:0; margin:var(--n2-s3) 0; }
.n2-case > p{ font-size:var(--n2-t-small); color:var(--n2-muted); margin-bottom:var(--n2-s5); }
.n2-result{ border-left:2px solid var(--n2-bronze); padding-left:var(--n2-s4); }
.n2-fig{ font-family:var(--n2-font-display); font-size:var(--n2-t-fig); line-height:1; color:var(--n2-text); }
.n2-result p{ font-size:var(--n2-t-small); color:var(--n2-muted); margin-top:var(--n2-s2); }
.n2-method{ display:block; font-size:var(--n2-t-micro); color:var(--n2-muted); margin-top:var(--n2-s3); letter-spacing:.02em; opacity:.85; }

/* ---------- 13. Doctrine ---------- */
.n2-doctrine .n2-wrap{ display:grid; gap:var(--n2-s7); }
@media (min-width:54rem){ .n2-doctrine .n2-wrap{ grid-template-columns:1.15fr 1fr; gap:var(--n2-s9); align-items:center; } }
.n2-doctrine h2{ font-size:var(--n2-t-h2); margin-bottom:var(--n2-s5); }
.n2-doctrine p{ margin-bottom:var(--n2-s4); }
.n2-terms{ list-style:none; font-size:var(--n2-t-small); }
.n2-terms li{ padding-block:var(--n2-s3); border-bottom:1px solid rgba(245,247,250,.13); color:var(--n2-text-soft); }
.n2-terms li:last-child{ border-bottom:none; }
.n2-terms strong{ color:var(--n2-bronze-light); }

/* ---------- 14. CTA final ---------- */
.n2-cta h2{ font-size:var(--n2-t-h2); max-width:24ch; margin-bottom:var(--n2-s5); }
.n2-cta-box{
  border:1px solid var(--n2-border-bronze); border-radius:var(--n2-radius);
  padding:var(--n2-s6); margin-top:var(--n2-s6);
  display:grid; gap:var(--n2-s6);
}
@media (min-width:54rem){ .n2-cta-box{ grid-template-columns:1fr 1fr; gap:var(--n2-s8); } }
.n2-cta-box h3{ font-family:var(--n2-font-body); font-weight:700; font-size:var(--n2-t-h4); letter-spacing:0; margin-bottom:var(--n2-s3); }
.n2-cta-box p{ font-size:var(--n2-t-small); color:var(--n2-muted); margin-bottom:var(--n2-s5); }

/* ---------- 15. Formulaire ---------- */
.n2-form{ display:grid; gap:var(--n2-s4); }
.n2-field label{
  display:block; font-size:var(--n2-t-micro); font-weight:700;
  letter-spacing:.1em; text-transform:uppercase; color:var(--n2-muted);
  margin-bottom:var(--n2-s2);
}
.n2-field input,.n2-field textarea{
  width:100%; font:inherit; font-size:var(--n2-t-body); color:var(--n2-text);
  background:var(--n2-surface); border:1px solid var(--n2-border-mid);
  border-radius:var(--n2-radius); padding:var(--n2-s3) var(--n2-s4);
  transition:border-color var(--n2-fast), background var(--n2-fast);
}
.n2-field textarea{ min-height:9rem; resize:vertical; }
.n2-field input:focus,.n2-field textarea:focus{ border-color:var(--n2-bronze); background:#0D1218; outline:none; }
.n2-field input::placeholder,.n2-field textarea::placeholder{ color:rgba(138,148,158,.6); }
.n2-consent{ display:flex; gap:var(--n2-s3); align-items:flex-start; font-size:var(--n2-t-small); color:var(--n2-muted); }
.n2-consent input{ margin-top:.32em; accent-color:var(--n2-bronze); flex:0 0 auto; }
.n2-form-note{ font-size:var(--n2-t-micro); color:var(--n2-muted); line-height:1.55; }
.n2-form-note a{ color:var(--n2-bronze-light); }
.n2-form-msg{ font-size:var(--n2-t-small); padding:var(--n2-s3) var(--n2-s4); border-left:2px solid var(--n2-success); background:rgba(78,140,106,.1); }
.n2-form-msg[data-state="error"]{ border-left-color:var(--n2-danger); background:rgba(196,85,59,.1); }
.n2-form-msg:empty{ display:none; }
@media (min-width:40rem){ .n2-form-row{ display:grid; grid-template-columns:1fr 1fr; gap:var(--n2-s4); } }

/* ---------- 16. Fil d'Ariane ---------- */
.n2-crumbs{ font-size:var(--n2-t-small); color:var(--n2-muted); padding-block:var(--n2-s5) 0; }
.n2-crumbs ol{ list-style:none; display:flex; flex-wrap:wrap; gap:var(--n2-s2); }
.n2-crumbs li::after{ content:"›"; margin-left:var(--n2-s2); color:var(--n2-border-mid); }
.n2-crumbs li:last-child::after{ content:none; }
.n2-crumbs a{ color:var(--n2-muted); text-decoration:none; border-bottom:1px solid transparent; }
.n2-crumbs a:hover{ color:var(--n2-text); border-bottom-color:var(--n2-bronze); }

/* ---------- 17. Page situation ---------- */
.n2-sit-hero{ padding-block:var(--n2-s6) var(--n2-s7); border-bottom:var(--n2-rule); }
.n2-sit-hero h1{ font-size:clamp(1.875rem,5.6vw,3.125rem); max-width:22ch; margin-bottom:var(--n2-s5); }
.n2-mirror{ font-size:var(--n2-t-lead); color:var(--n2-text-soft); max-width:46rem; margin-bottom:var(--n2-s6); }

.n2-body{ display:grid; gap:var(--n2-s8); }
@media (min-width:60rem){ .n2-body{ grid-template-columns:minmax(0,1fr) 20rem; gap:var(--n2-s9); align-items:start; } }
.n2-block{ margin-bottom:var(--n2-s8); }
.n2-block:last-child{ margin-bottom:0; }
.n2-block h2{ font-size:var(--n2-t-h3); margin-bottom:var(--n2-s4); }
.n2-block p{ color:var(--n2-muted); margin-bottom:var(--n2-s4); max-width:var(--n2-measure); }
.n2-check{ list-style:none; }
.n2-check li{
  position:relative; padding:var(--n2-s3) 0 var(--n2-s3) var(--n2-s6);
  border-bottom:var(--n2-rule); font-size:var(--n2-t-body);
}
.n2-check li::before{
  content:""; position:absolute; left:0; top:1.42em;
  width:14px; height:1px; background:var(--n2-bronze);
}
.n2-aside{ position:sticky; top:5.5rem; border:var(--n2-rule); border-radius:var(--n2-radius); padding:var(--n2-s5); background:var(--n2-surface); }
.n2-aside h3{ font-family:var(--n2-font-body); font-weight:700; font-size:var(--n2-t-h4); letter-spacing:0; margin-bottom:var(--n2-s3); }
.n2-aside p{ font-size:var(--n2-t-small); color:var(--n2-muted); margin-bottom:var(--n2-s5); }
.n2-aside .n2-btn{ width:100%; }
.n2-aside-sep{ border:none; border-top:var(--n2-rule); margin-block:var(--n2-s5); }

/* FAQ */
.n2-faq details{ border-bottom:var(--n2-rule); }
.n2-faq summary{
  cursor:pointer; list-style:none; padding-block:var(--n2-s4);
  font-weight:600; display:flex; justify-content:space-between; gap:var(--n2-s4);
  transition:color var(--n2-fast);
}
.n2-faq summary::-webkit-details-marker{ display:none; }
.n2-faq summary::after{ content:"+"; color:var(--n2-bronze); font-weight:400; font-size:1.25rem; line-height:1; }
.n2-faq details[open] summary::after{ content:"–"; }
.n2-faq summary:hover{ color:var(--n2-bronze-light); }
.n2-faq details p{ padding-bottom:var(--n2-s4); color:var(--n2-muted); font-size:var(--n2-t-small); max-width:var(--n2-measure); }

/* ---------- 18. N² IMPACT ---------- */
.n2-impact{ display:grid; gap:var(--n2-s7); }
@media (min-width:60rem){ .n2-impact{ grid-template-columns:1fr 22rem; gap:var(--n2-s8); align-items:start; } }
.n2-impact-fields{ display:grid; gap:var(--n2-s5); }
@media (min-width:40rem){ .n2-impact-fields{ grid-template-columns:1fr 1fr; } }
.n2-impact-field label{ display:block; font-size:var(--n2-t-small); font-weight:600; margin-bottom:var(--n2-s2); }
.n2-impact-field .n2-hint{ display:block; font-size:var(--n2-t-micro); color:var(--n2-muted); font-weight:400; margin-top:2px; }
.n2-impact-field input{
  width:100%; font:inherit; font-size:var(--n2-t-body); color:var(--n2-text);
  background:var(--n2-surface); border:1px solid var(--n2-border-mid);
  border-radius:var(--n2-radius); padding:var(--n2-s3) var(--n2-s4); margin-top:var(--n2-s2);
}
.n2-impact-field input:focus{ border-color:var(--n2-bronze); outline:none; }
.n2-impact-out{
  position:sticky; top:5.5rem; border:1px solid var(--n2-border-bronze);
  border-radius:var(--n2-radius); padding:var(--n2-s6); background:var(--n2-surface);
}
.n2-impact-total{ font-family:var(--n2-font-display); font-size:clamp(2rem,6vw,2.75rem); line-height:1.05; color:var(--n2-text); }
.n2-impact-caption{ font-size:var(--n2-t-small); color:var(--n2-muted); margin-top:var(--n2-s3); }
.n2-impact-detail{ list-style:none; margin-top:var(--n2-s5); font-size:var(--n2-t-small); }
.n2-impact-detail li{ display:flex; justify-content:space-between; gap:var(--n2-s4); padding-block:var(--n2-s2); border-bottom:var(--n2-rule); color:var(--n2-muted); }
.n2-impact-detail li span:last-child{ color:var(--n2-text); font-variant-numeric:tabular-nums; }
.n2-impact-soon{ border:var(--n2-rule); border-radius:var(--n2-radius); padding:var(--n2-s4); font-size:var(--n2-t-small); color:var(--n2-muted); margin-top:var(--n2-s6); }

/* ---------- 19. Pied de page ---------- */
.n2-foot{ border-top:var(--n2-rule); padding-block:var(--n2-s7) var(--n2-s5); font-size:var(--n2-t-small); }
.n2-foot-cols{ display:grid; gap:var(--n2-s6); margin-bottom:var(--n2-s7); }
@media (min-width:54rem){ .n2-foot-cols{ grid-template-columns:1.5fr 1fr 1fr 1fr; gap:var(--n2-s7); } }
.n2-foot h4{
  font-size:var(--n2-t-kicker); letter-spacing:var(--n2-track-kicker);
  text-transform:uppercase; color:var(--n2-bronze); margin-bottom:var(--n2-s4);
}
.n2-foot ul{ list-style:none; }
.n2-foot li{ padding-block:var(--n2-s2); }
.n2-foot a:not(.n2-btn){ color:var(--n2-muted); text-decoration:none; transition:color var(--n2-fast); }
.n2-foot a:not(.n2-btn):hover{ color:var(--n2-text); }
.n2-foot-brand p{ color:var(--n2-muted); margin-top:var(--n2-s3); max-width:32ch; }
.n2-foot-bottom{
  border-top:var(--n2-rule); padding-top:var(--n2-s5);
  display:flex; flex-wrap:wrap; gap:var(--n2-s3) var(--n2-s5);
  justify-content:space-between; color:var(--n2-muted);
}
.n2-foot-sign{ font-family:var(--n2-font-display); font-style:italic; }

/* ---------- 20. 404 ---------- */
.n2-404{ padding-block:var(--n2-s9); }
.n2-404 h1{ font-size:var(--n2-t-h2); margin-bottom:var(--n2-s5); }

/* ---------- 21. Révélation au défilement ---------- */
/* Visible par défaut : si le JS ne démarre jamais, tout reste lisible. */
.n2-reveal{ opacity:1; transform:none; }
.js .n2-reveal{ opacity:0; transform:translate3d(0,14px,0); }
.js .n2-reveal.is-in{ opacity:1; transform:none; transition:opacity var(--n2-slow), transform var(--n2-slow); }
.n2-d1{ transition-delay:60ms; } .n2-d2{ transition-delay:130ms; } .n2-d3{ transition-delay:200ms; }
@media (prefers-reduced-motion:reduce){
  .n2-reveal{ opacity:1; transform:none; }
  .n2-hero::before{ animation:none; }
  .n2v3 *{ animation-duration:.001ms!important; transition-duration:.001ms!important; }
}

/* ---------- 22. Bouton flottant Hotline ---------- */
.n2-fab{
  position:fixed; right:18px; bottom:18px; z-index:80;
  display:inline-flex; align-items:center; gap:var(--n2-s2);
  background:var(--n2-bronze); color:#120C05;
  font-family:var(--n2-font-body); font-weight:700; font-size:var(--n2-t-small);
  padding:12px 18px; border-radius:40px; text-decoration:none;
  box-shadow:var(--n2-shadow-lg);
  transition:transform var(--n2-mid), background var(--n2-mid);
}
.n2-fab:hover{ background:var(--n2-bronze-light); transform:translateY(-2px); }
/* Sur mobile, la barre d'action basse porte déjà l'urgence : le FAB disparaît. */
@media (max-width:54rem){ .n2-fab{ display:none; } }

/* ---------- 23. Barre d'action mobile ---------- */
.n2-mobilebar{
  position:fixed; left:0; right:0; bottom:0; z-index:70;
  display:none; gap:1px; background:var(--n2-border);
  border-top:var(--n2-rule);
}
.n2-mobilebar a{
  flex:1; text-align:center; padding:var(--n2-s4) var(--n2-s2);
  background:var(--n2-bg); text-decoration:none;
  font-size:var(--n2-t-small); font-weight:700;
}
.n2-mobilebar a.is-primary, .n2-mobilebar a.is-primary:hover{ background:var(--n2-bronze); color:#120C05; }
@media (max-width:54rem){
  .n2-mobilebar{ display:flex; padding-bottom:env(safe-area-inset-bottom, 0px); }
  body.n2v3{ padding-bottom:calc(56px + env(safe-area-inset-bottom, 0px)); }
}


/* ---------- 24. Le cabinet ---------- */
.n2-cabinet .n2-wrap{ display:grid; gap:var(--n2-s7); }
@media (min-width:54rem){ .n2-cabinet .n2-wrap{ grid-template-columns:18rem 1fr; gap:var(--n2-s8); align-items:start; } }
.n2-portrait{
  width:100%; max-width:18rem; height:auto;
  aspect-ratio:4/5; object-fit:cover; object-position:center 22%;
  border-radius:var(--n2-radius);
  border:1px solid var(--n2-border);
}
.n2-quote{ font-family:var(--n2-font-display); font-size:var(--n2-t-h3); line-height:1.3; margin-top:var(--n2-s5); }
.n2-quote em{ font-style:italic; color:var(--n2-bronze); }
.n2-sign{ margin-top:var(--n2-s4); font-size:var(--n2-t-small); }
.n2-sign strong{ display:block; color:var(--n2-text); }
.n2-sign span{ color:var(--n2-muted); }
.n2-creds{ list-style:none; display:grid; gap:var(--n2-s4); margin-top:var(--n2-s6); }
@media (min-width:40rem){ .n2-creds{ grid-template-columns:1fr 1fr; gap:var(--n2-s5); } }
.n2-creds li{ border-top:1px solid var(--n2-border-bronze); padding-top:var(--n2-s3); }
.n2-creds strong{ display:block; font-size:var(--n2-t-body); }
.n2-creds span{ font-size:var(--n2-t-small); color:var(--n2-muted); }


/* ---------- 25. Ancres et en-tête collant ---------- */
:target, [id]{ scroll-margin-top:6.5rem; }
@media (max-width:54rem){ :target, [id]{ scroll-margin-top:5rem; } }

/* ---------- 26. Auto-évaluation : lecture, pas notation ---------- */
.n2-eval{ max-width:44rem; }
.n2-q-label{ font-size:var(--n2-t-kicker); font-weight:700; letter-spacing:var(--n2-track-kicker); text-transform:uppercase; color:var(--n2-bronze); }
.n2-qtxt{ font-family:var(--n2-font-display); font-size:var(--n2-t-h3); margin:var(--n2-s3) 0 var(--n2-s5); }
.n2-opts{ display:grid; gap:var(--n2-s2); }
.n2-opt{
  text-align:left; font:inherit; font-size:var(--n2-t-body); color:var(--n2-text);
  background:var(--n2-bg); border:1px solid var(--n2-border-mid); border-radius:var(--n2-radius);
  padding:.85rem 1rem; cursor:pointer;
  transition:border-color var(--n2-fast), background var(--n2-fast);
}
.n2-opt:hover{ border-color:var(--n2-bronze); }
.n2-progress{ height:2px; background:var(--n2-border); margin-bottom:var(--n2-s2); }
.n2-progress span{ display:block; height:2px; background:var(--n2-bronze); width:0; transition:width var(--n2-mid); }
.n2-eval-result[hidden]{ display:none; }
.n2-dims{ list-style:none; margin-top:var(--n2-s5); }
.n2-dims li{ display:flex; justify-content:space-between; gap:var(--n2-s4); padding-block:var(--n2-s3); border-bottom:var(--n2-rule); }
.n2-dims .n2-dim-state{ font-weight:700; color:var(--n2-bronze-light); font-size:var(--n2-t-small); text-align:right; }
.n2-disclaimer{ font-size:var(--n2-t-micro); color:var(--n2-muted); border-left:2px solid var(--n2-border-mid); padding-left:var(--n2-s4); margin-top:var(--n2-s5); }

/* ---------- 27. Grilles de rubriques ---------- */
.n2-cards{ display:grid; gap:var(--n2-s5); }
@media (min-width:48rem){ .n2-cards{ grid-template-columns:repeat(2,1fr); gap:var(--n2-s6); } }
@media (min-width:64rem){ .n2-cards--3{ grid-template-columns:repeat(3,1fr); } }
.n2-card{ border:var(--n2-rule); border-radius:var(--n2-radius); padding:var(--n2-s5); transition:border-color var(--n2-mid), background var(--n2-mid); }
.n2-card:hover{ border-color:var(--n2-border-bronze); background:var(--n2-surface); }
.n2-card h3{ font-family:var(--n2-font-body); font-weight:700; font-size:var(--n2-t-h4); letter-spacing:0; margin-bottom:var(--n2-s3); }
.n2-card p{ font-size:var(--n2-t-small); color:var(--n2-muted); margin-bottom:var(--n2-s3); }
.n2-card dl{ margin:0; font-size:var(--n2-t-small); }
.n2-card dt{ color:var(--n2-bronze); font-size:var(--n2-t-kicker); letter-spacing:.1em; text-transform:uppercase; font-weight:700; margin-top:var(--n2-s3); }
.n2-card dd{ margin:2px 0 0; color:var(--n2-muted); }
.n2-tag{ display:inline-block; font-size:var(--n2-t-kicker); letter-spacing:.12em; text-transform:uppercase; color:var(--n2-bronze); font-weight:700; margin-bottom:var(--n2-s2); }

/* ---------- 28. Formulaire : états ---------- */
.n2-field input[aria-invalid="true"], .n2-field textarea[aria-invalid="true"]{ border-color:var(--n2-danger); }
.n2-btn[aria-busy="true"]{ opacity:.65; pointer-events:none; }


/* ============================================================
   v3.1.1 — CORRECTIFS MOBILE
   ============================================================ */

/* Un bouton doit revenir à la ligne plutôt que déborder de l'écran. */
@media (max-width:40rem){
  .n2-btn{
    white-space:normal;
    text-align:center;
    line-height:1.25;
    max-width:100%;
    overflow-wrap:anywhere;
  }
  /* Appels à l'action principaux : pleine largeur, zone tactile confortable. */
  .n2-hero-cta{ flex-direction:column; align-items:stretch; }
  .n2-hero-cta .n2-btn{ width:100%; min-height:48px; }
  .n2-cta-box .n2-btn,
  .n2-aside .n2-btn,
  .n2-card .n2-btn{ width:100%; min-height:48px; }
}

/* Zone tactile du bouton de menu (44 px minimum). */
.n2-burger{ min-height:44px; min-width:44px; }

/* Aucun débordement horizontal : les grilles peuvent rétrécir. */
.n2-wrap, .n2-body, .n2-cards, .n2-formats, .n2-phases,
.n2-situations, .n2-impact, .n2-impact-fields{ min-width:0; }
.n2-body > *, .n2-cards > *, .n2-formats > *, .n2-phases > *,
.n2-impact > *, .n2-impact-fields > *{ min-width:0; }
@media (min-width:60rem){
  .n2-body{ grid-template-columns:minmax(0,1fr) 20rem; }
  .n2-impact{ grid-template-columns:minmax(0,1fr) 22rem; }
}
.n2-impact-field input,
.n2-field input, .n2-field textarea{ max-width:100%; }
.n2-impact-total, .n2-fig{ overflow-wrap:anywhere; }
.n2-impact-detail li{ gap:var(--n2-s3); }
.n2-impact-detail li span:first-child{ min-width:0; overflow-wrap:anywhere; }
.n2-crumbs ol{ min-width:0; }
.n2-crumbs li{ overflow-wrap:anywhere; }
code, pre{ overflow-wrap:anywhere; }

/* Textes critiques : jamais sous 13 px sur smartphone. */
@media (max-width:40rem){
  .n2-consent, .n2-form-note, .n2-method, .n2-disclaimer,
  .n2-impact-caption, .n2-micro{ font-size:.8125rem; line-height:1.55; }
}

/* Rythme vertical : sections secondaires légèrement resserrées.
   Le hero et l'appel à l'action final ne sont pas touchés. */
@media (max-width:40rem){
  .n2-sec--surface, .n2-sec--petrol{ padding-block:3.25rem; }
  .n2-block{ margin-bottom:3rem; }
  .n2-head{ margin-bottom:2.25rem; }
}


/* N² IMPACT — poste commencé mais incomplet : on dit ce qui manque. */
.n2-impact-detail li.is-pending span:last-child{
  color:var(--n2-bronze); font-variant-numeric:normal;
  font-size:var(--n2-t-micro); text-align:right; font-style:italic;
}
.n2-impact-detail li.is-pending span:first-child{ opacity:.75; }