/* Section « trois niveaux » des trois versions simplifiées de l'accueil (refonte, 01.11.2026).
   Reprend le design de Home.html (verre, ombres douces, bleu #1E88E5, encre #183550, Plus Jakarta Sans)
   et les couleurs des six étapes de l'application (/app/app.css). */
.nv {
  --nv-encre: #183550;
  --nv-doux: rgba(24, 53, 80, 0.66);
  --nv-trait: rgba(30, 136, 229, 0.18);
  --nv-bleu: #1e88e5;
  --nv-bleu-fonce: #1669c1;
  --nv-pale: rgba(30, 136, 229, 0.08);
  --nv-facteur: #0f766e;
  --nv-facteur-fond: #dcf5f1;
  --nv-rapide: #1565c0;
  --nv-rapide-fond: #e3effc;
  --nv-iso: #6d28d9;
  --nv-iso-fond: #efe7fd;
  --mp: #e89712; --fab: #25aff3; --tr: #5661e1; --dis: #01bf87; --uti: #cd4f94; --fdv: #91a7c4;
  color: var(--nv-encre);
}
.nv-tete { max-width: 46rem; margin: 0 auto; text-align: center; display: grid; gap: 0.75rem; }
.nv-tete h2 { margin: 0; font-size: clamp(1.9rem, 3.6vw, 2.5rem); line-height: 1.12; font-weight: 800; letter-spacing: -0.02em; text-wrap: balance; }
.nv-tete p { margin: 0; color: var(--nv-doux); font-size: 1.05rem; line-height: 1.6; }
.nv-exemple-note { font-size: 0.82rem; color: var(--nv-doux); }

/* Étiquettes des trois niveaux */
.nv-pastille { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.78rem; font-weight: 700; padding: 0.22rem 0.65rem; border-radius: 999px; white-space: nowrap; }
.nv-pastille svg { width: 0.95rem; height: 0.95rem; }
.nv-n1 .nv-pastille, .nv-pastille.n1 { color: var(--nv-facteur); background: var(--nv-facteur-fond); }
.nv-n2 .nv-pastille, .nv-pastille.n2 { color: var(--nv-rapide); background: var(--nv-rapide-fond); }
.nv-n3 .nv-pastille, .nv-pastille.n3 { color: var(--nv-iso); background: var(--nv-iso-fond); }
.nv-prix { font-weight: 800; font-variant-numeric: tabular-nums; }
.nv-prix small { font-weight: 600; color: var(--nv-doux); font-size: 0.8em; }
.nv-badge-exemple { display: inline-block; font-size: 0.7rem; font-weight: 700; color: #8f5208; background: #fdf3e2; border: 1px solid #f0cf98; border-radius: 999px; padding: 0.08rem 0.5rem; }

/* ---------------------------------------------------------------- visuels animés (communs) */
.nv-visuel { position: relative; min-height: 15.5rem; display: grid; align-content: start; gap: 0.85rem; font-variant-numeric: tabular-nums; }
.nv-saisie { display: flex; align-items: center; gap: 0.6rem; min-height: 2.9rem; padding: 0.55rem 0.8rem; border-radius: 0.85rem; background: #fff; border: 1px solid var(--nv-trait); box-shadow: 0 6px 18px -12px rgba(24, 53, 80, 0.35); font-size: 0.95rem; min-width: 0; }
.nv-saisie .nv-ico { flex: none; width: 1.9rem; height: 1.9rem; border-radius: 0.55rem; display: grid; place-items: center; }
.nv-saisie .nv-ico svg { width: 1rem; height: 1rem; }
.nv-n1 .nv-ico { background: var(--nv-facteur-fond); color: var(--nv-facteur); }
.nv-n2 .nv-ico { background: var(--nv-rapide-fond); color: var(--nv-rapide); }
.nv-n3 .nv-ico { background: var(--nv-iso-fond); color: var(--nv-iso); }
.nv-texte-saisi { min-width: 0; overflow-wrap: anywhere; }
.nv-curseur { display: inline-block; width: 2px; height: 1.1em; vertical-align: -0.18em; background: var(--nv-bleu); margin-left: 1px; animation: nv-clignote 1s steps(1) infinite; }
.nv-fini .nv-curseur { display: none; }
@keyframes nv-clignote { 50% { opacity: 0; } }

.nv-resultat { display: grid; gap: 0.6rem; padding: 0.9rem 1rem; border-radius: 0.95rem; background: rgba(255, 255, 255, 0.9); border: 1px solid var(--nv-trait); transition: opacity 0.45s ease, transform 0.45s ease; }
.nv-cache { opacity: 0; transform: translateY(8px); }
.nv-grand { display: flex; align-items: baseline; gap: 0.4rem; flex-wrap: wrap; }
.nv-grand b { font-size: 2.3rem; line-height: 1; font-weight: 800; letter-spacing: -0.02em; }
.nv-grand span { color: var(--nv-doux); font-size: 0.9rem; }
.nv-ligne-source { font-size: 0.8rem; color: var(--nv-doux); display: flex; flex-wrap: wrap; gap: 0.3rem 0.8rem; }
.nv-ligne-source b { color: var(--nv-encre); font-weight: 600; }

/* Barre des étapes (ACV rapide) */
.nv-barre { display: flex; height: 0.85rem; border-radius: 999px; overflow: hidden; background: rgba(24, 53, 80, 0.06); }
.nv-barre i { display: block; height: 100%; width: 0; transition: width 0.6s cubic-bezier(.2, .7, .2, 1); }
.nv-legende { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.3rem; font-size: 0.84rem; }
.nv-legende li { display: grid; grid-template-columns: 0.7rem 1fr auto; align-items: center; gap: 0.5rem; transition: opacity 0.4s ease; }
.nv-legende li i { width: 0.7rem; height: 0.7rem; border-radius: 3px; }
.nv-legende li span:last-child { font-weight: 700; }

/* Arbre (ACV type ISO) */
.nv-arbre { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.3rem; font-size: 0.84rem; }
.nv-racine { display: flex; justify-content: space-between; gap: 0.6rem; font-weight: 800; padding: 0.45rem 0.6rem; border-radius: 0.6rem; background: var(--nv-iso-fond); color: #3b1a78; }
.nv-branche { position: relative; margin-left: 0.9rem; padding-left: 0.9rem; transition: opacity 0.4s ease, transform 0.4s ease; }
.nv-branche::before { content: ""; position: absolute; left: 0; top: -0.3rem; bottom: 50%; width: 0.7rem; border-left: 2px solid rgba(109, 40, 217, 0.28); border-bottom: 2px solid rgba(109, 40, 217, 0.28); border-bottom-left-radius: 6px; }
.nv-etape { display: flex; justify-content: space-between; gap: 0.6rem; align-items: center; padding: 0.3rem 0.5rem; border-radius: 0.5rem; background: #fff; border: 1px solid var(--nv-trait); }
.nv-etape .nv-nom { display: flex; align-items: center; gap: 0.45rem; min-width: 0; }
.nv-etape .nv-nom i { flex: none; width: 0.6rem; height: 0.6rem; border-radius: 50%; }
.nv-feuille { margin: 0.25rem 0 0.15rem 1rem; display: grid; gap: 0.15rem; padding: 0.4rem 0.55rem; border-radius: 0.5rem; background: rgba(240, 247, 255, 0.85); border: 1px dashed rgba(30, 136, 229, 0.3); }
.nv-feuille .nv-calc { display: flex; justify-content: space-between; gap: 0.5rem; flex-wrap: wrap; }
.nv-feuille .nv-calc b { font-weight: 700; }
.nv-traces { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.nv-trace { font-size: 0.72rem; font-weight: 600; border-radius: 999px; padding: 0.05rem 0.45rem; white-space: nowrap; }
.nv-trace.fichier { color: #1565c0; background: #e3effc; }
.nv-trace.facteur { color: #0f766e; background: #dcf5f1; }
.nv-modifie { animation: nv-flash 1.4s ease; border-radius: 4px; }
@keyframes nv-flash { 0%, 100% { background: transparent; } 25%, 60% { background: #fff1c2; } }
.nv-total-iso { display: flex; justify-content: space-between; align-items: baseline; gap: 0.6rem; font-weight: 800; padding-top: 0.2rem; }
.nv-total-iso b { font-size: 1.35rem; }
.nv-note-modif { font-size: 0.8rem; color: var(--nv-doux); min-height: 1.2em; }

/* Bouton rejouer et contrôles */
.nv-bouton { display: inline-flex; align-items: center; gap: 0.4rem; border: 1px solid var(--nv-trait); background: #fff; color: var(--nv-bleu-fonce); font-weight: 600; font-size: 0.85rem; padding: 0.4rem 0.75rem; border-radius: 0.65rem; cursor: pointer; }
.nv-bouton:hover { border-color: rgba(30, 136, 229, 0.45); }
.nv-bouton svg { width: 0.9rem; height: 0.9rem; }
.nv :focus-visible { outline: 3px solid rgba(30, 136, 229, 0.55); outline-offset: 2px; }

/* ---------------------------------------------------------------- version 1 : un produit, trois profondeurs */
.nv-v1 .nv-cadre { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.25fr); gap: 1.5rem; align-items: stretch; }
.nv-v1 .nv-etapes { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.7rem; }
.nv-v1 .nv-choix { width: 100%; text-align: left; display: grid; gap: 0.35rem; padding: 0.95rem 1rem 1.05rem; border-radius: 1rem; border: 1px solid var(--nv-trait); background: rgba(255, 255, 255, 0.65); cursor: pointer; position: relative; overflow: hidden; font: inherit; color: inherit; transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease; }
.nv-v1 .nv-choix[aria-selected="true"] { background: #fff; border-color: rgba(30, 136, 229, 0.45); box-shadow: 0 16px 36px -22px rgba(24, 53, 80, 0.45); }
.nv-v1 .nv-choix .nv-ligne1 { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.nv-v1 .nv-choix h3 { margin: 0; font-size: 1.08rem; font-weight: 800; }
.nv-v1 .nv-choix p { margin: 0; font-size: 0.9rem; color: var(--nv-doux); line-height: 1.5; }
.nv-v1 .nv-scene { border-radius: 1.25rem; padding: 1.25rem; display: grid; gap: 0.8rem; align-content: start; }
.nv-v1 .nv-scene-tete { display: flex; justify-content: space-between; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.nv-v1 .nv-scene-tete span { font-size: 0.85rem; color: var(--nv-doux); }

/* « Vous donnez / Vous obtenez » */
.nv-dl { margin: 0; display: grid; gap: 0.55rem; }
.nv-dl div { display: grid; gap: 0.1rem; }
.nv-dl dt { font-size: 0.75rem; font-weight: 700; color: var(--nv-doux); letter-spacing: 0.02em; }
.nv-dl dd { margin: 0; font-size: 0.93rem; line-height: 1.5; }

@media (max-width: 1023px) {
  .nv-v1 .nv-cadre { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .nv-curseur { animation: none !important; }
}

/* Passage fluide d'un niveau à l'autre (version 1) */
@keyframes nv-entree { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.nv-entre { animation: nv-entree 0.45s ease both; }