/* ============================================================
   NEXUS VORTEX — COMPOSANTS
   ============================================================ */

/* ============================================================
   SYMBOLE
   Le symbole officiel n'est jamais deforme, recolore hors
   palette, ombre ou contourne. Seules l'echelle, l'opacite et
   une rotation tres faible sont utilisees.
   ============================================================ */
.nv-symbol{
  width:1em;height:1em;
  color:inherit;
  fill:currentColor;
  flex:none;
}

/* ============================================================
   HEADER
   ============================================================ */
.nv-header{
  position:fixed;
  inset:0 0 auto 0;
  z-index:var(--nv-z-header);
  height:var(--nv-header-h);
  display:flex;
  align-items:center;
  color:var(--nv-ivoire);
  transition:height var(--nv-medium) var(--nv-ease),
             background-color var(--nv-medium) var(--nv-ease),
             border-color var(--nv-medium) var(--nv-ease);
  border-bottom:1px solid transparent;
}
/* Apres scroll : compact, fond legerement opaque */
.nv-header.is-scrolled{
  height:var(--nv-header-h-compact);
  background-color:rgba(20,20,20,.88);
  border-bottom-color:rgba(249,237,207,.12);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}

.nv-header__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--nv-s5);
  width:100%;
}

/* ---------- Marque : symbole + nom ---------- */
.nv-brand{
  display:inline-flex;
  align-items:center;
  gap:14px;
  /* Zone de respiration : >= 25% de la hauteur du symbole */
  padding:6px 10px 6px 0;
}
.nv-brand .nv-symbol{
  width:38px;height:38px;
  color:var(--nv-brun);
  transition:color var(--nv-medium) var(--nv-ease);
}
.nv-brand:hover .nv-symbol{color:var(--nv-ivoire)}
.nv-brand__name{
  font-family:var(--nv-font-display);
  font-weight:700;
  font-size:1.0625rem;
  letter-spacing:.04em;
  line-height:1;
  white-space:nowrap;
}

/* ---------- Navigation ---------- */
.nv-nav{display:flex;align-items:center;gap:var(--nv-s5)}
.nv-nav__list{
  display:flex;
  align-items:center;
  gap:var(--nv-s4);
  list-style:none;
  margin:0;padding:0;
}
.nv-nav__link{
  position:relative;
  display:inline-block;
  font-family:var(--nv-font-label);
  font-weight:500;
  font-size:1rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  padding-block:6px;
  color:rgba(249,237,207,.82);
  transition:color var(--nv-fast) var(--nv-ease);
  white-space:nowrap;
}
.nv-nav__link::after{
  content:"";
  position:absolute;
  left:0;bottom:0;
  width:100%;height:1px;
  background:var(--nv-brun);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform 300ms var(--nv-ease);
}
.nv-nav__link:hover,
.nv-nav__link:focus-visible{color:var(--nv-ivoire)}
.nv-nav__link:hover::after,
.nv-nav__link:focus-visible::after{transform:scaleX(1)}

/* ---------- Sous-menu Expertises ---------- */
.nv-nav__item{position:relative}
.nv-nav__toggle{
  display:inline-flex;
  align-items:center;
  gap:7px;
}
.nv-nav__chevron{
  width:9px;height:9px;
  border-right:1.5px solid currentColor;
  border-bottom:1.5px solid currentColor;
  transform:translateY(-2px) rotate(45deg);
  transition:transform var(--nv-fast) var(--nv-ease);
}
.nv-nav__item:hover .nv-nav__chevron,
.nv-nav__item:focus-within .nv-nav__chevron{transform:translateY(1px) rotate(225deg)}

.nv-submenu{
  position:absolute;
  top:calc(100% + 14px);
  left:50%;
  translate:-50% 0;
  min-width:310px;
  padding:var(--nv-s2);
  background:rgba(20,20,20,.97);
  border:1px solid rgba(249,237,207,.14);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  list-style:none;
  margin:0;
  opacity:0;
  visibility:hidden;
  transform:translateY(-6px);
  transition:opacity var(--nv-fast) var(--nv-ease),
             transform var(--nv-fast) var(--nv-ease),
             visibility var(--nv-fast);
}
.nv-nav__item:hover .nv-submenu,
.nv-nav__item:focus-within .nv-submenu{
  opacity:1;
  visibility:visible;
  transform:translateY(0);
}
.nv-submenu a{
  display:block;
  padding:11px 14px;
  font-size:.95rem;
  line-height:1.35;
  color:rgba(249,237,207,.8);
  border-left:2px solid transparent;
  transition:color var(--nv-fast) var(--nv-ease),
             border-color var(--nv-fast) var(--nv-ease),
             background-color var(--nv-fast) var(--nv-ease);
}
.nv-submenu a:hover,
.nv-submenu a:focus-visible{
  color:var(--nv-ivoire);
  border-left-color:var(--nv-brun);
  background:rgba(249,237,207,.05);
}
.nv-submenu__all{
  margin-top:6px;
  border-top:1px solid rgba(249,237,207,.12);
  padding-top:6px;
}
.nv-submenu__all a{color:var(--nv-brun);font-family:var(--nv-font-label);letter-spacing:.08em;text-transform:uppercase}

/* ============================================================
   BOUTONS
   ============================================================ */
.nv-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  min-height:54px;
  padding:0 var(--nv-s4);
  border:1px solid transparent;
  border-radius:var(--nv-r1);
  font-family:var(--nv-font-label);
  font-weight:600;
  font-size:1.0625rem;
  letter-spacing:.09em;
  text-transform:uppercase;
  line-height:1;
  white-space:nowrap;
  transition:background-color 250ms var(--nv-ease),
             color 250ms var(--nv-ease),
             border-color 250ms var(--nv-ease);
}

/* Primaire : ivoire sur sombre, noir sur clair. Inversion au survol. */
.nv-btn--primary{
  background:var(--btn-bg,var(--nv-ivoire));
  color:var(--btn-fg,var(--nv-noir));
  border-color:var(--btn-bg,var(--nv-ivoire));
}
.nv-btn--primary:hover,
.nv-btn--primary:focus-visible{
  background:transparent;
  color:var(--btn-bg,var(--nv-ivoire));
}

/* Secondaire : contour discret */
.nv-btn--ghost{
  background:transparent;
  color:var(--fg,var(--nv-ivoire));
  border-color:var(--rule,rgba(249,237,207,.3));
}
.nv-btn--ghost:hover,
.nv-btn--ghost:focus-visible{
  border-color:var(--btn-bg,var(--nv-ivoire));
}

/* Bouton compact du header */
.nv-btn--sm{min-height:44px;padding:0 var(--nv-s3);font-size:.95rem}

.nv-btn-row{
  display:flex;
  flex-wrap:wrap;
  gap:var(--nv-s2);
  align-items:center;
}

/* ============================================================
   HERO
   ============================================================ */
.nv-hero{
  position:relative;
  min-height:min(100svh,1000px);
  display:flex;
  align-items:center;
  padding-top:calc(var(--nv-header-h) + var(--nv-s6));
  padding-bottom:var(--nv-s7);
  overflow:hidden;
}
.nv-hero__inner{position:relative;z-index:2;max-width:1000px}
.nv-hero h1{margin-block:var(--nv-s4) var(--nv-s5)}
.nv-hero .nv-lead{max-width:60ch}
.nv-hero .nv-btn-row{margin-top:var(--nv-s5)}

/* Le H1 se revele ligne par ligne */
.nv-hero__line{display:block}

/* Symbole en fond du hero */
.nv-hero__symbol{
  position:absolute;
  right:-9%;
  top:50%;
  translate:0 -50%;
  width:min(58vw,720px);
  height:auto;
  color:var(--nv-brun);
  opacity:.16;
  pointer-events:none;
  z-index:1;
}

/* Motif du hero : forme DECORATIVE derivee, en deux octogones distincts.
   C'est ce qui permet la convergence a l'ouverture — le logo officiel,
   lui, est un trace unique qu'on ne separe pas. */
.nv-hero-motif{
  position:absolute;
  right:-8%;
  top:50%;
  translate:0 -50%;
  width:min(56vw,700px);
  height:auto;
  color:var(--nv-brun);
  opacity:.15;
  pointer-events:none;
  z-index:1;
}
.nv-hero-motif polygon{
  fill:none;
  stroke:currentColor;
  stroke-width:1.1;
  stroke-linejoin:round;
  transform-box:fill-box;
  transform-origin:center;
}

/* Mention de territoires + indicateur de scroll */
.nv-hero__meta{
  position:relative;
  z-index:2;
  margin-top:var(--nv-s7);
  display:flex;
  align-items:center;
  gap:var(--nv-s3);
  font-family:var(--nv-font-label);
  font-size:1rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--muted);
}
.nv-hero__meta::before{
  content:"";
  width:56px;height:1px;
  background:var(--nv-brun);
  flex:none;
}

/* ============================================================
   CARTES « ENJEUX »
   ============================================================ */
.nv-enjeux{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));
  gap:1px;
  background:var(--rule);
  border-block:1px solid var(--rule);
  margin-top:var(--nv-s6);
}
.nv-enjeu{
  display:flex;
  flex-direction:column;
  gap:var(--nv-s2);
  padding:var(--nv-s5) var(--nv-s4);
  background:var(--bg);
  transition:background-color var(--nv-medium) var(--nv-ease);
}
.nv-enjeu:hover{background:rgba(147,89,39,.06)}
.nv-enjeu h3{font-size:1.4rem;line-height:1.2}
.nv-enjeu p{font-size:1rem;color:var(--muted);flex:1}
.nv-enjeu .nv-link{margin-top:var(--nv-s2)}

/* ============================================================
   LISTE « EXPERTISES » — lignes numerotees
   ============================================================ */
.nv-expertises{
  margin-top:var(--nv-s6);
  border-top:1px solid var(--rule);
}
.nv-expertise{
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:baseline;
  gap:var(--nv-s4);
  padding-block:var(--nv-s5);
  border-bottom:1px solid var(--rule);
  transition:padding-left var(--nv-medium) var(--nv-ease);
}
.nv-expertise:hover{padding-left:var(--nv-s3)}
.nv-expertise__num{
  font-family:var(--nv-font-label);
  font-size:1.05rem;
  letter-spacing:.14em;
  color:var(--accent-on);
  opacity:.55;
}
.nv-expertise__body h3{margin-bottom:12px}
.nv-expertise__body p{color:var(--muted);max-width:62ch;font-size:1.0625rem}
.nv-expertise__go{
  font-size:1.6rem;
  line-height:1;
  color:var(--accent-on);
  opacity:0;
  transform:translateX(-8px);
  transition:opacity var(--nv-medium) var(--nv-ease),
             transform var(--nv-medium) var(--nv-ease);
}
.nv-expertise:hover .nv-expertise__go,
.nv-expertise:focus-within .nv-expertise__go{opacity:1;transform:translateX(0)}

/* ============================================================
   MOTS-CLES (Analyser · Prioriser · Structurer · …)
   ============================================================ */
.nv-steps-words{
  display:flex;
  flex-wrap:wrap;
  gap:var(--nv-s3) var(--nv-s5);
  margin-top:var(--nv-s6);
  padding-top:var(--nv-s5);
  border-top:1px solid var(--rule);
  list-style:none;
}
.nv-steps-words li{
  font-family:var(--nv-font-display);
  font-weight:700;
  font-size:clamp(1.35rem,2.6vw,2.1rem);
  line-height:1;
}

/* ============================================================
   METHODE — 5 etapes
   ============================================================ */
.nv-method{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(210px,100%),1fr));
  gap:var(--nv-s5) var(--nv-gap);
  margin-top:var(--nv-s6);
}
.nv-method__step{
  padding-top:var(--nv-s3);
  border-top:2px solid var(--rule);
  transition:border-color var(--nv-medium) var(--nv-ease);
}
.nv-method__step:hover{border-top-color:var(--nv-brun)}
.nv-method__step .nv-label{margin-bottom:12px;opacity:.7}
.nv-method__step h3{font-size:1.3rem;margin-bottom:10px}
.nv-method__step p{font-size:.98rem;color:var(--muted)}

/* ============================================================
   ETIQUETTES (processus IA, territoires)
   ============================================================ */
.nv-tags{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:var(--nv-s5);
  list-style:none;
}
.nv-tags li{
  padding:10px 18px;
  border:1px solid var(--rule);
  border-radius:var(--nv-r1);
  font-family:var(--nv-font-label);
  font-size:1rem;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--muted);
  transition:border-color var(--nv-fast) var(--nv-ease),
             color var(--nv-fast) var(--nv-ease);
}
.nv-tags li:hover{border-color:var(--accent-on);color:var(--fg)}

/* ============================================================
   BLOC DEUX COLONNES
   ============================================================ */
.nv-split{
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  gap:var(--nv-gap);
  align-items:start;
}
.nv-split__main{grid-column:1 / span 6}
.nv-split__aside{grid-column:8 / span 5}

/* ============================================================
   PRINCIPES (grille du cabinet)
   ============================================================ */
.nv-principes{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr));
  gap:var(--nv-s5) var(--nv-gap);
  margin-top:var(--nv-s6);
  list-style:none;
}
.nv-principes h3{font-size:1.2rem;margin-bottom:10px}
.nv-principes p{font-size:.98rem;color:var(--muted)}

/* ============================================================
   CTA FINAL
   ============================================================ */
.nv-cta-final{text-align:center}
.nv-cta-final h2{margin-bottom:var(--nv-s3);max-width:20ch;margin-inline:auto}
.nv-cta-final .nv-lead{margin-inline:auto;text-align:center}
.nv-cta-final .nv-btn-row{justify-content:center;margin-top:var(--nv-s5)}

/* ============================================================
   FOOTER
   ============================================================ */
.nv-footer{
  background:var(--nv-noir);
  color:var(--nv-ivoire);
  padding-block:var(--nv-s7) var(--nv-s4);
  border-top:1px solid rgba(249,237,207,.12);
}
.nv-footer__grid{
  display:grid;
  grid-template-columns:1.6fr 1fr 1fr 1fr;
  gap:var(--nv-s5) var(--nv-gap);
}
.nv-footer__brand .nv-symbol{width:44px;height:44px;color:var(--nv-brun)}
.nv-footer__brand p{
  margin-top:var(--nv-s3);
  max-width:34ch;
  font-size:.98rem;
  color:rgba(249,237,207,.62);
}
.nv-footer h4{
  font-family:var(--nv-font-label);
  font-weight:600;
  font-size:1rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--nv-brun);
  margin-bottom:var(--nv-s3);
}
.nv-footer ul{list-style:none;display:flex;flex-direction:column;gap:12px}
.nv-footer li a{
  font-size:.98rem;
  color:rgba(249,237,207,.72);
  transition:color var(--nv-fast) var(--nv-ease);
}
.nv-footer li a:hover,
.nv-footer li a:focus-visible{color:var(--nv-ivoire)}

.nv-footer__bottom{
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  align-items:center;
  gap:var(--nv-s3);
  margin-top:var(--nv-s7);
  padding-top:var(--nv-s4);
  border-top:1px solid rgba(249,237,207,.12);
  font-size:.88rem;
  color:rgba(249,237,207,.5);
}
.nv-footer__legal{display:flex;flex-wrap:wrap;gap:var(--nv-s3);list-style:none;flex-direction:row}

/* Mention de conception, discrete */
.nv-footer__credit{
  font-size:.86rem;
  color:rgba(249,237,207,.4);
}
.nv-footer__credit a{
  color:rgba(249,237,207,.62);
  border-bottom:1px solid transparent;
  transition:color var(--nv-fast) var(--nv-ease),
             border-color var(--nv-fast) var(--nv-ease);
}
.nv-footer__credit a:hover,
.nv-footer__credit a:focus-visible{
  color:var(--nv-ivoire);
  border-bottom-color:var(--nv-brun);
}

/* ============================================================
   MENU MOBILE
   ============================================================ */
.nv-burger{
  display:none;
  width:46px;height:46px;
  position:relative;
  flex:none;
}
.nv-burger span{
  position:absolute;
  left:11px;
  width:24px;height:1.5px;
  background:var(--nv-ivoire);
  transition:transform var(--nv-medium) var(--nv-ease),
             opacity var(--nv-fast) var(--nv-ease);
}
.nv-burger span:nth-child(1){top:17px}
.nv-burger span:nth-child(2){top:23px}
.nv-burger span:nth-child(3){top:29px}
.nv-burger.is-open span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.nv-burger.is-open span:nth-child(2){opacity:0}
.nv-burger.is-open span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

.nv-menu{
  position:fixed;
  inset:0;
  z-index:var(--nv-z-menu);
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:var(--nv-header-h) var(--nv-gutter) var(--nv-s6);
  background:var(--nv-noir);
  overflow-y:auto;
  opacity:0;
  visibility:hidden;
  transition:opacity var(--nv-medium) var(--nv-ease),
             visibility var(--nv-medium);
}
.nv-menu.is-open{opacity:1;visibility:visible}
.nv-menu ul{list-style:none;display:flex;flex-direction:column;gap:var(--nv-s3)}
.nv-menu__link{
  font-family:var(--nv-font-display);
  font-weight:700;
  font-size:clamp(1.9rem,7vw,2.6rem);
  line-height:1.1;
  color:var(--nv-ivoire);
  /* Apparition sequencee, pilotee par --i en HTML */
  opacity:0;
  transform:translateY(16px);
}
.nv-menu.is-open .nv-menu__link{
  animation:nv-menu-in var(--nv-medium) var(--nv-ease) forwards;
  animation-delay:calc(120ms + var(--i,0) * 55ms);
}
@keyframes nv-menu-in{to{opacity:1;transform:translateY(0)}}

.nv-menu__sub{
  margin-top:var(--nv-s2);
  padding-left:var(--nv-s3);
  border-left:1px solid rgba(249,237,207,.16);
  gap:12px!important;
}
.nv-menu__sub a{
  font-family:var(--nv-font-body);
  font-size:1.05rem;
  color:rgba(249,237,207,.72);
}
.nv-menu .nv-btn{margin-top:var(--nv-s5);width:100%}

/* Bloque le scroll de la page quand le menu est ouvert */
body.nv-locked{overflow:hidden}


/* ============================================================
   PAGES INTERIEURES
   ============================================================ */

/* ---------- Hero de page interieure ---------- */
.nv-page-hero{
  position:relative;
  padding-top:calc(var(--nv-header-h) + var(--nv-s7));
  padding-bottom:var(--nv-s7);
  overflow:hidden;
}
.nv-page-hero__inner{position:relative;z-index:2}
.nv-page-hero h1{margin-block:var(--nv-s4) var(--nv-s4);max-width:19ch}
.nv-page-hero .nv-lead{max-width:62ch}
.nv-page-hero__symbol{
  position:absolute;
  right:-10%;top:50%;
  translate:0 -50%;
  width:min(46vw,560px);
  color:var(--nv-brun);
  opacity:.12;
  pointer-events:none;
  z-index:1;
}

/* ---------- Fil d'ariane ---------- */
.nv-breadcrumb{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
  list-style:none;
  font-family:var(--nv-font-label);
  font-size:.95rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--muted);
}
.nv-breadcrumb li:not(:last-child)::after{content:"/";margin-left:10px;opacity:.5}
.nv-breadcrumb a:hover,
.nv-breadcrumb a:focus-visible{color:var(--fg)}

/* ---------- Liste des interventions ---------- */
.nv-interventions{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(290px,100%),1fr));
  gap:0 var(--nv-s6);
  margin-top:var(--nv-s6);
  list-style:none;
}
.nv-interventions li{
  display:flex;
  gap:14px;
  align-items:baseline;
  padding:var(--nv-s3) 0;
  border-top:1px solid var(--rule);
  font-size:1.05rem;
}
.nv-interventions li::before{
  content:"";
  width:6px;height:6px;
  flex:none;
  background:var(--mark);
  transform:translateY(-2px);
}

/* ---------- Questions « vous reconnaissez-vous ? » ---------- */
.nv-questions{
  display:flex;
  flex-direction:column;
  gap:var(--nv-s4);
  margin-top:var(--nv-s6);
  list-style:none;
}
.nv-questions li{
  font-family:var(--nv-font-display);
  font-weight:700;
  font-size:clamp(1.25rem,2.1vw,1.75rem);
  line-height:1.25;
  padding-left:var(--nv-s4);
  border-left:2px solid var(--mark);
}

/* ---------- Enchainement (Diagnostic -> priorites -> …) ---------- */
.nv-flow{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:12px var(--nv-s2);
  margin-top:var(--nv-s5);
  list-style:none;
}
.nv-flow li{
  font-family:var(--nv-font-label);
  font-size:1.05rem;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.nv-flow li:not(:last-child)::after{
  content:"→";
  margin-left:var(--nv-s2);
  color:var(--accent-on);
  opacity:.6;
}

/* ---------- Cibles ---------- */
.nv-targets{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(255px,100%),1fr));
  gap:var(--nv-s4) var(--nv-gap);
  margin-top:var(--nv-s6);
  list-style:none;
}
.nv-targets li{
  padding-top:var(--nv-s3);
  border-top:2px solid var(--rule);
  font-size:1.05rem;
  color:var(--muted);
}

/* ---------- Citation de conviction ---------- */
.nv-pull{
  font-family:var(--nv-font-display);
  font-weight:700;
  font-size:clamp(1.5rem,3vw,2.4rem);
  line-height:1.2;
  max-width:24ch;
  margin-bottom:var(--nv-s3);
}

/* ---------- Bloc expertise (page Expertises) ---------- */
.nv-xp{border-top:1px solid var(--rule);padding-block:var(--nv-s6)}
.nv-xp__head{
  display:flex;
  gap:var(--nv-s3);
  align-items:baseline;
  margin-bottom:var(--nv-s3);
}
.nv-xp__num{
  font-family:var(--nv-font-label);
  font-size:1.05rem;
  letter-spacing:.14em;
  color:var(--accent-on);
  opacity:.55;
  flex:none;
}
.nv-xp__tags{
  display:flex;
  flex-wrap:wrap;
  gap:10px 18px;
  margin-top:var(--nv-s3);
  list-style:none;
  color:var(--muted);
  font-size:1rem;
}
.nv-xp__tags li{display:flex;align-items:baseline;gap:10px}
.nv-xp__tags li:not(:last-child)::after{content:"·";opacity:.5;margin-left:8px}
.nv-xp .nv-btn{margin-top:var(--nv-s4)}


/* ============================================================
   TIMELINE DE LA METHODE
   Seule animation « forte » du site (CDC §32) : un filet
   progresse avec le scroll et chaque etape devient active.
   Le texte n'est jamais attenue : la lecture prime.
   ============================================================ */
.nv-timeline{
  position:relative;
  margin-top:var(--nv-s7);
  padding-left:var(--nv-s5);
}
.nv-timeline__line{
  position:absolute;
  left:0;top:10px;bottom:10px;
  width:1px;
  background:var(--rule);
}
.nv-timeline__fill{
  position:absolute;
  left:0;top:0;
  width:100%;
  height:var(--p,0%);
  background:var(--mark);
  transition:height 120ms linear;
}
.nv-timeline__step{
  position:relative;
  padding-bottom:var(--nv-s7);
}
.nv-timeline__step:last-child{padding-bottom:0}
.nv-timeline__step::before{
  content:"";
  position:absolute;
  left:calc(-1 * var(--nv-s5) - 4px);
  top:11px;
  width:9px;height:9px;
  border-radius:50%;
  background:var(--bg);
  border:1px solid var(--rule);
  transition:background-color var(--nv-medium) var(--nv-ease),
             border-color var(--nv-medium) var(--nv-ease),
             transform var(--nv-medium) var(--nv-ease);
}
.nv-timeline__step.is-active::before{
  background:var(--mark);
  border-color:var(--mark);
  transform:scale(1.35);
}
.nv-timeline__step .nv-label{
  opacity:.5;
  transition:opacity var(--nv-medium) var(--nv-ease);
}
.nv-timeline__step.is-active .nv-label{opacity:1}
.nv-timeline__step h3{
  font-size:clamp(1.5rem,2.6vw,2.1rem);
  margin-block:12px var(--nv-s2);
}
.nv-timeline__step p{color:var(--muted);max-width:58ch}

.nv-tags--tight{margin-top:var(--nv-s3)}

/* ============================================================
   FORMULAIRE
   ============================================================ */
.nv-form{margin-top:var(--nv-s5)}
.nv-form__row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0 var(--nv-gap);
}

.nv-field{
  display:flex;
  flex-direction:column;
  gap:9px;
  margin-bottom:var(--nv-s3);
}
.nv-field > label{
  font-family:var(--nv-font-label);
  font-weight:600;
  font-size:1rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--fg);
}
.nv-req{color:var(--accent-on)}

.nv-field input,
.nv-field select,
.nv-field textarea{
  width:100%;
  padding:14px 16px;
  background:transparent;
  border:1px solid var(--rule);
  border-radius:var(--nv-r1);
  color:var(--fg);
  font-family:var(--nv-font-body);
  font-size:1.0625rem;
  line-height:1.4;
  transition:border-color var(--nv-fast) var(--nv-ease),
             background-color var(--nv-fast) var(--nv-ease);
}
.nv-field textarea{min-height:160px;resize:vertical}
.nv-field input:hover,
.nv-field select:hover,
.nv-field textarea:hover{border-color:var(--accent-on)}
.nv-field input:focus,
.nv-field select:focus,
.nv-field textarea:focus{border-color:var(--accent-on)}
.nv-field input::placeholder,
.nv-field textarea::placeholder{color:var(--muted);opacity:.7}

/* Chevron du menu deroulant, herite de la couleur du theme */
.nv-select{position:relative;display:block}
.nv-select select{appearance:none;-webkit-appearance:none;padding-right:46px}
.nv-select::after{
  content:"";
  position:absolute;
  right:18px;top:50%;
  width:8px;height:8px;
  border-right:1.5px solid currentColor;
  border-bottom:1.5px solid currentColor;
  transform:translateY(-70%) rotate(45deg);
  opacity:.55;
  pointer-events:none;
}

/* Case a cocher RGPD */
.nv-check{
  display:flex;
  gap:14px;
  align-items:flex-start;
  margin-block:var(--nv-s4);
}
.nv-check input{
  width:20px;height:20px;
  flex:none;
  margin-top:3px;
  accent-color:var(--nv-brun);
}
.nv-check label{
  font-size:.98rem;
  line-height:1.55;
  color:var(--muted);
}
.nv-check a{text-decoration:underline;text-underline-offset:3px}

/* Erreurs de validation */
.nv-field__error,
.nv-check__error{
  display:none;
  font-size:.92rem;
  color:var(--accent-on);
}
.nv-field.is-invalid .nv-field__error,
.nv-check.is-invalid .nv-check__error{display:block}
.nv-field.is-invalid input,
.nv-field.is-invalid select,
.nv-field.is-invalid textarea{border-color:var(--accent-on)}
.nv-check.is-invalid{flex-wrap:wrap}
.nv-check__error{width:100%}

/* Encart d'information */
.nv-notice{
  margin-top:var(--nv-s4);
  padding:var(--nv-s3) var(--nv-s4);
  border:1px solid var(--rule);
  border-left:2px solid var(--mark);
  border-radius:var(--nv-r1);
  font-size:1rem;
  line-height:1.55;
  color:var(--muted);
}
.nv-notice strong{color:var(--fg)}

/* ============================================================
   CONTACT — demande structuree + echange direct
   ============================================================ */
.nv-contact{
  display:grid;
  grid-template-columns:65fr 35fr;
  gap:var(--nv-s6) var(--nv-s7);
  margin-top:var(--nv-s6);
  align-items:start;
}

/* Bloc « Echange direct » : vert profond, alternative rapide au formulaire */
.nv-direct{
  --bg:var(--nv-vert);
  --fg:var(--nv-ivoire);
  --muted:rgba(249,237,207,.72);
  --rule:rgba(249,237,207,.2);
  --accent-on:var(--nv-ivoire);
  --btn-bg:var(--nv-ivoire);
  --btn-fg:var(--nv-vert);
  background:var(--bg);
  color:var(--fg);
  padding:var(--nv-s5);
  border-radius:var(--nv-r2);
  position:sticky;
  top:calc(var(--nv-header-h) + var(--nv-s3));
}
.nv-direct h3{font-size:clamp(1.3rem,2vw,1.6rem);margin-block:12px var(--nv-s3)}
.nv-direct p{color:var(--muted);font-size:1.02rem}
.nv-direct .nv-btn{margin-top:var(--nv-s4);width:100%}
.nv-direct__note{
  display:block;
  margin-top:var(--nv-s3);
  font-size:.92rem;
  line-height:1.5;
  color:var(--muted);
}

/* Coordonnees en fin de page */
.nv-coords{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(200px,100%),1fr));
  gap:var(--nv-s4) var(--nv-gap);
  margin-top:var(--nv-s6);
  list-style:none;
}
.nv-coords li{
  padding-top:var(--nv-s3);
  border-top:2px solid var(--rule);
}
.nv-coords .nv-label{margin-bottom:10px}
.nv-coords a,
.nv-coords span{font-size:1.05rem}
.nv-coords a{
  border-bottom:1px solid transparent;
  transition:border-color var(--nv-fast) var(--nv-ease);
}
.nv-coords a:hover,
.nv-coords a:focus-visible{border-bottom-color:var(--accent-on)}

/* Colonne laterale de contact */
.nv-aside-card{
  padding-top:var(--nv-s3);
  border-top:2px solid var(--rule);
  margin-bottom:var(--nv-s6);
}
.nv-aside-card h3{font-size:1.25rem;margin-block:12px}
.nv-aside-card p{font-size:1rem;color:var(--muted)}
.nv-aside-card .nv-btn{margin-top:var(--nv-s3);width:100%}
.nv-contact-list{list-style:none;display:flex;flex-direction:column;gap:14px;margin-top:var(--nv-s3)}
.nv-contact-list a{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:var(--nv-s2);
  padding-bottom:12px;
  border-bottom:1px solid var(--rule);
  transition:border-color var(--nv-fast) var(--nv-ease);
}
.nv-contact-list a:hover{border-bottom-color:var(--accent-on)}
.nv-contact-list span:last-child{color:var(--accent-on)}

/* ============================================================
   ELEMENTS DECORATIFS
   Formes derivees de la geometrie du symbole (deux octogones
   superposes). Ce ne sont PAS le logo : usage purement
   graphique, toujours a faible opacite (3-15 %).
   ============================================================ */

/* Trame de fond, teintee par le theme via --mark */
.nv-pattern{position:relative;isolation:isolate}
.nv-pattern > *{position:relative;z-index:1}
.nv-pattern::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  background-color:var(--mark);
  opacity:.05;
  pointer-events:none;
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg fill='none' stroke='%23fff' stroke-width='1.1'%3E%3Cpolygon points='90.65,66.84 66.84,90.65 33.16,90.65 9.35,66.84 9.35,33.16 33.16,9.35 66.84,9.35 90.65,33.16'/%3E%3Cpolygon points='82.44,79.73 51.92,93.96 20.27,82.44 6.04,51.92 17.56,20.27 48.08,6.04 79.73,17.56 93.96,48.08'/%3E%3C/g%3E%3C/svg%3E");
          mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg fill='none' stroke='%23fff' stroke-width='1.1'%3E%3Cpolygon points='90.65,66.84 66.84,90.65 33.16,90.65 9.35,66.84 9.35,33.16 33.16,9.35 66.84,9.35 90.65,33.16'/%3E%3Cpolygon points='82.44,79.73 51.92,93.96 20.27,82.44 6.04,51.92 17.56,20.27 48.08,6.04 79.73,17.56 93.96,48.08'/%3E%3C/g%3E%3C/svg%3E");
  -webkit-mask-repeat:repeat;
          mask-repeat:repeat;
  -webkit-mask-size:190px 190px;
          mask-size:190px 190px;
}

/* Separateur : un filet, le motif au centre */
.nv-sep{
  display:flex;
  align-items:center;
  gap:var(--nv-s3);
  margin-block:var(--nv-s6);
}
.nv-sep::before,
.nv-sep::after{
  content:"";
  flex:1;
  height:1px;
  background:var(--rule);
}
.nv-sep__mark{
  width:22px;height:22px;
  flex:none;
  color:var(--mark);
  opacity:.75;
}

/* Embleme centre, au-dessus d'un titre de cloture */
.nv-mark-emblem{
  width:40px;height:40px;
  margin:0 auto var(--nv-s4);
  color:var(--mark);
  opacity:.85;
}

/* ============================================================
   PARCOURS — bande de progression horizontale
   Distincte de la timeline verticale de la methode, pour ne pas
   repeter deux fois le meme dispositif sur une meme page.
   ============================================================ */
.nv-journey{position:relative;margin-top:var(--nv-s7)}
.nv-journey__track{
  position:absolute;
  left:0;right:0;top:5px;
  height:1px;
  background:var(--rule);
}
.nv-journey__fill{
  position:absolute;
  left:0;top:0;
  width:var(--p,0%);
  height:100%;
  background:var(--mark);
  transition:width 140ms linear;
}
.nv-journey__list{
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:var(--nv-gap);
  list-style:none;
}
.nv-journey__step{position:relative;padding-top:var(--nv-s4)}
.nv-journey__step::before{
  content:"";
  position:absolute;
  left:0;top:0;
  width:11px;height:11px;
  border-radius:50%;
  background:var(--bg);
  border:1px solid var(--rule);
  transition:background-color var(--nv-medium) var(--nv-ease),
             border-color var(--nv-medium) var(--nv-ease),
             transform var(--nv-medium) var(--nv-ease);
}
.nv-journey__step.is-active::before{
  background:var(--mark);
  border-color:var(--mark);
  transform:scale(1.3);
}
.nv-journey__step span{
  display:block;
  font-family:var(--nv-font-label);
  font-weight:600;
  font-size:clamp(.95rem,1.2vw,1.1rem);
  letter-spacing:.12em;
  text-transform:uppercase;
  opacity:.55;
  transition:opacity var(--nv-medium) var(--nv-ease);
}
.nv-journey__step.is-active span{opacity:1}

/* ============================================================
   MANIFESTE — une phrase, beaucoup de vide
   ============================================================ */
.nv-manifeste{
  font-family:var(--nv-font-display);
  font-weight:700;
  font-size:clamp(1.9rem,5.4vw,4.2rem);
  line-height:1.08;
  max-width:22ch;
}

/* ============================================================
   FORMULES D'ACCOMPAGNEMENT
   ============================================================ */
.nv-formules{
  display:grid;
  grid-template-columns:1fr 1.12fr;
  gap:var(--nv-gap);
  margin-top:var(--nv-s6);
  align-items:start;
}
.nv-formule{
  display:flex;
  flex-direction:column;
  height:100%;
  padding:var(--nv-s5);
  border:1px solid var(--rule);
  border-radius:var(--nv-r2);
}
.nv-formule--featured{
  border-color:var(--accent-on);
  background:rgba(147,89,39,.10);
}
.nv-formule h3{font-size:clamp(1.35rem,2.2vw,1.8rem);margin-block:12px var(--nv-s3)}
.nv-formule > p{color:var(--muted);max-width:46ch}
.nv-formule .nv-btn{margin-top:auto;align-self:flex-start}
.nv-formule .nv-tags{margin-top:var(--nv-s4);margin-bottom:var(--nv-s5)}
.nv-formule .nv-flow{margin-bottom:var(--nv-s5)}

/* ============================================================
   FAQ — accordeons natifs (<details>), accessibles sans JavaScript
   ============================================================ */
.nv-faq{margin-top:var(--nv-s6);border-top:1px solid var(--rule)}
.nv-faq details{border-bottom:1px solid var(--rule)}
.nv-faq summary{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:var(--nv-s4);
  padding:var(--nv-s4) 0;
  cursor:pointer;
  list-style:none;
  font-family:var(--nv-font-display);
  font-weight:700;
  font-size:clamp(1.05rem,1.7vw,1.3rem);
  line-height:1.3;
}
.nv-faq summary::-webkit-details-marker{display:none}
.nv-faq summary::marker{content:""}
.nv-faq summary:hover{color:var(--accent-on)}
.nv-faq__icon{position:relative;width:16px;height:16px;flex:none}
.nv-faq__icon::before,
.nv-faq__icon::after{
  content:"";
  position:absolute;
  background:var(--accent-on);
  transition:transform var(--nv-medium) var(--nv-ease);
}
.nv-faq__icon::before{left:0;top:7px;width:16px;height:1.5px}
.nv-faq__icon::after{left:7px;top:0;width:1.5px;height:16px}
.nv-faq details[open] .nv-faq__icon::after{transform:scaleY(0)}
.nv-faq__answer{
  padding-bottom:var(--nv-s4);
  color:var(--muted);
  max-width:64ch;
}

/* ============================================================
   REFERENCES CLIENTS
   Composition sobre : beaucoup d'air autour de chaque marque,
   hauteur visuelle homogene, largeur libre (un logo n'est
   jamais etire pour remplir sa case).
   ============================================================ */
.nv-refs{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:var(--nv-s6) var(--nv-gap);
  margin-top:var(--nv-s7);
  align-items:center;
  list-style:none;
}

.nv-ref{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:110px;
  padding:var(--nv-s3);
  margin:0;
}

/* Chaque reference renvoie vers le site du client */
.nv-ref > a{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  height:100%;
  border-radius:var(--nv-r1);
}

/* Le logo garde ses proportions : hauteur bornee, largeur libre.
   --h est regle logo par logo : a hauteur egale, un long logotype
   parait beaucoup plus gros qu'une marque carree. On equilibre a l'oeil,
   sans jamais toucher au ratio du fichier. */
.nv-ref__logo{
  width:auto;
  height:auto;
  max-height:var(--h,48px);
  max-width:min(100%,200px);
  object-fit:contain;
  /* Au repos : desature et attenue. Au survol : couleurs d'origine.
     .65 et non .55 : la section est sur fond noir, une attenuation plus
     forte rendrait les logotypes clairs trop ternes. */
  filter:grayscale(1) opacity(.65);
  transition:filter 320ms var(--nv-ease);
}
.nv-ref:hover .nv-ref__logo,
.nv-ref:focus-within .nv-ref__logo{filter:grayscale(0) opacity(1)}

/* Variante blanche — pour un logo trop sombre pour le fond noir.
   brightness(0) invert(1) aplatit toutes les couleurs en blanc en
   conservant la transparence. Solution d'attente : la version inversee
   officielle de la marque reste preferable. */
.nv-ref__logo--blanc{filter:brightness(0) invert(1) opacity(.65)}
.nv-ref:hover .nv-ref__logo--blanc,
.nv-ref:focus-within .nv-ref__logo--blanc{filter:brightness(0) invert(1) opacity(1)}

/* Variante eclaircie — pour un logo aux couleurs moyennes, trop sombres
   sur le noir mais assez claires pour etre remontees. Contrairement au
   blanchiment, les couleurs de la marque sont conservees. */
.nv-ref__logo--eclairci{filter:grayscale(1) brightness(1.6) opacity(.65)}
.nv-ref:hover .nv-ref__logo--eclairci,
.nv-ref:focus-within .nv-ref__logo--eclairci{filter:brightness(1.6) opacity(1)}

/* Emplacement en attente du logo officiel.
   Volontairement visible : cette section ne doit pas partir en ligne
   tant que les fichiers ne sont pas fournis et autorises. */
.nv-ref--attente{
  flex-direction:column;
  gap:12px;
  border:1px dashed var(--rule);
  border-radius:var(--nv-r1);
}
.nv-ref__nom{
  font-family:var(--nv-font-display);
  font-weight:700;
  font-size:1.05rem;
  line-height:1.25;
  text-align:center;
  color:var(--muted);
}

/* ============================================================
   PAGES LEGALES
   ============================================================ */
.nv-legal{max-width:var(--nv-measure)}
.nv-legal h2{
  font-size:clamp(1.4rem,2.2vw,1.9rem);
  margin-top:var(--nv-s6);
  margin-bottom:var(--nv-s3);
}
.nv-legal h2:first-child{margin-top:0}
.nv-legal p{margin-bottom:var(--nv-s3);color:var(--muted)}
.nv-legal ul{margin:0 0 var(--nv-s3) var(--nv-s3);color:var(--muted)}
.nv-legal li{margin-bottom:10px}
.nv-legal dl{margin-bottom:var(--nv-s3)}
.nv-legal dt{
  font-family:var(--nv-font-label);
  font-size:.98rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--fg);
  margin-top:var(--nv-s3);
}
.nv-legal dd{margin:4px 0 0;color:var(--muted)}

/* Marque visuellement les informations restant a fournir :
   impossible de les mettre en ligne sans les voir. */
.nv-todo{
  display:inline-block;
  padding:2px 9px;
  border-radius:var(--nv-r1);
  background:rgba(147,89,39,.12);
  border:1px dashed var(--nv-brun);
  font-family:var(--nv-font-label);
  font-size:.92rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--nv-brun);
}

/* Filigrane d'angle, pour aerer une section sans la charger */
.nv-watermark{
  position:absolute;
  right:-60px;bottom:-60px;
  width:min(34vw,340px);
  color:var(--mark);
  opacity:.07;
  pointer-events:none;
  z-index:0;
}

/* ---------- Territoires ---------- */
.nv-territoires{
  display:flex;
  flex-wrap:wrap;
  gap:var(--nv-s3) var(--nv-s6);
  margin-top:var(--nv-s5);
  list-style:none;
}
.nv-territoires li{
  font-family:var(--nv-font-display);
  font-weight:700;
  font-size:clamp(1.2rem,2.2vw,1.75rem);
  line-height:1;
}