/* REOS en-tête v2 : menus déroulants sur ordinateur, sections dépliables dans le
   menu plein écran du téléphone. Mêmes jetons et mêmes polices que le reste du site.
   Sans JavaScript, chaque intitulé reste un lien et son panneau s'ouvre au survol
   ou au focus clavier ; nav-v2.js pose .nv-ready et prend le relais. */

/* ------------------------------------------------------------ commun */

.nv-item { min-width: 0; }
.nav .nv-top {
  font: inherit; font-size: .92rem; line-height: inherit; color: var(--text-dim);
  background: none; border: 0; margin: 0; cursor: pointer;
  display: inline-flex; align-items: center; padding: 6px 10px; border-radius: 6px;
  text-decoration: none; white-space: nowrap;
  transition: background .15s ease, color .15s ease;
}
.nav .nv-top:hover, .nv-item.is-open > .nv-top { background: var(--surface-hover); color: var(--text); text-decoration: none; }
.nv-item.is-current > .nv-top { color: var(--text); font-weight: 600; }
.nav .nv-top:focus-visible { border-radius: 6px; }
.nv-chev {
  flex: none; width: 6px; height: 6px; margin-left: 7px;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg); opacity: .7;
  transition: transform .18s var(--v2-ease, ease);
}
.nv-item.is-open > .nv-top .nv-chev { transform: translateY(1px) rotate(225deg); }

.nv-cols { display: grid; gap: 8px; }
.nv-col { min-width: 0; padding: 4px; }
.nv-h {
  margin: 6px 10px 6px; font-family: var(--mono); font-size: .68rem; font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase; color: var(--text-faint); line-height: 1.4;
}
.nv-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.nv-list li { margin: 0; padding: 0; max-width: none; }
.nv-list li::before { content: none; }

/* Entrée de panneau : case d'icône, titre et description courte. */
.nav .nv-panel .nv-list a {
  display: flex; align-items: flex-start; gap: 12px; padding: 9px 10px; border-radius: 10px;
  color: var(--text); font-size: inherit; font-weight: 400; text-decoration: none; background: none;
  transition: background .12s ease;
}
.nav .nv-panel .nv-list a:hover { background: var(--surface-hover); text-decoration: none; }
.nav .nv-panel a:focus-visible { outline-offset: 0; border-radius: 10px; }
.nv-ic {
  flex: none; width: 34px; height: 34px; border-radius: 9px;
  display: grid; place-items: center;
  background: var(--surface); border: 1px solid var(--border); color: var(--text);
  transition: border-color .12s ease, background .12s ease, color .12s ease;
}
.nv-ic svg { display: block; width: 18px; height: 18px; }
.nv-code { font-family: var(--mono); font-size: .7rem; font-weight: 600; letter-spacing: .04em; line-height: 1; }
.nav .nv-panel .nv-list a:hover .nv-ic { border-color: var(--border-strong); }
.nv-tx { display: block; min-width: 0; padding-top: 1px; }
.nv-t { display: block; font-size: .9rem; font-weight: 600; line-height: 1.3; color: var(--text); }
.nv-d { display: block; margin-top: 2px; font-size: .8rem; font-weight: 400; line-height: 1.42; color: var(--text-dim); }

/* Page courante (aria-current posé par build.py). */
.nav .nv-panel .nv-list a[aria-current=page] { background: var(--surface-hover); font-weight: 400; }
.nav .nv-panel .nv-list a[aria-current=page] .nv-ic { background: var(--accent); border-color: var(--accent); color: #fff; }

/* Liens secondaires (comparatifs) : alignés sur le texte des entrées. */
.nav .nv-panel .nv-list--compact { margin-top: 2px; gap: 0; }
.nav .nv-panel .nv-list--compact a {
  display: flex; align-items: center; gap: 8px; padding: 6px 10px 6px 56px; border-radius: 8px;
  font-size: .86rem; color: var(--text-dim); line-height: 1.35;
}
.nav .nv-panel .nv-list--compact a::after {
  content: "\2192"; margin-left: auto; opacity: 0; transform: translateX(-3px);
  transition: opacity .15s ease, transform .15s var(--v2-ease, ease);
}
.nav .nv-panel .nv-list--compact a:hover { color: var(--text); }
.nav .nv-panel .nv-list--compact a:hover::after, .nav .nv-panel .nv-list--compact a:focus-visible::after { opacity: 1; transform: none; }
.nav .nv-panel .nv-list--compact a[aria-current=page] { color: var(--text); font-weight: 600; }

/* Pied de panneau : lien vers la page d'ensemble. */
.nv-foot { display: flex; align-items: center; gap: 12px; margin: 4px 4px 0; padding: 11px 10px 5px; border-top: 1px solid var(--border-soft); }
.nav .nv-panel .nv-foot a {
  display: inline-flex; align-items: center; gap: 6px; padding: 2px 0; border-radius: 4px;
  font-size: .86rem; font-weight: 600; color: var(--text); background: none;
  text-decoration: underline; text-decoration-color: var(--border-strong); text-underline-offset: 4px;
}
.nav .nv-panel .nv-foot a::after { content: "\2192"; transition: transform .18s var(--v2-ease, ease); }
.nav .nv-panel .nv-foot a:hover { background: none; text-decoration-color: currentColor; }
.nav .nv-panel .nv-foot a:hover::after { transform: translateX(3px); }
.nav .nv-panel .nv-foot a:focus-visible { outline-offset: 3px; border-radius: 4px; }
.nav .nv-panel .nv-foot a[aria-current=page] { background: none; font-weight: 600; }

/* ------------------------------------------------------------ ordinateur */

@media (min-width: 1081px) {
  .header-row { position: relative; }
  .header-row > .nav { align-self: stretch; }
  /* Accueil reste visible sur ordinateur: le logo seul ne suffit pas. */
  .nav .nv-home {
    display: inline-flex; align-items: center;
    padding: 0 10px; height: 100%;
    font-size: 13.5px; font-weight: 550; color: var(--ink-2, #3a414c);
    text-decoration: none; white-space: nowrap;
  }
  .nav .nv-home:hover { color: var(--ink, #14161a); }
  .nav .nv-home[aria-current="page"] { font-weight: 650; color: var(--ink, #14161a); }
  .nv-item { position: relative; align-self: stretch; display: flex; align-items: center; }
  /* Sans JavaScript, le panneau se centre sur la colonne de l'en-tête et ne peut pas déborder. */
  .nv:not(.nv-ready) .nv-item { position: static; }

  .nv-panel {
    position: absolute; top: calc(100% + 9px); left: 50%; z-index: 65;
    width: var(--nv-w, 680px); max-width: calc(100vw - 32px);
    transform: translateX(calc(-50% + var(--nv-x, 0px)));
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg), 0 2px 6px -2px rgba(16, 20, 30, .08); padding: 10px;
    visibility: hidden; opacity: 0; translate: 0 6px;
    transition: opacity .16s ease, translate .18s var(--v2-ease, ease), visibility 0s linear .18s;
  }
  /* passerelle invisible entre l'intitulé et le panneau, pour que le survol tienne */
  .nv-panel::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 12px; }
  .nv-item.is-open > .nv-panel,
  .nv:not(.nv-ready) .nv-item:hover > .nv-panel,
  .nv:not(.nv-ready) .nv-item:focus-within > .nv-panel {
    visibility: visible; opacity: 1; translate: 0 0; transition-delay: 0s;
  }

  .nv-panel--sol { --nv-w: 680px; }
  .nv-panel--plat { --nv-w: 900px; }
  .nv-panel--plat .nv-cols { grid-template-columns: 262px minmax(0, 1fr); }
  .nv-panel--res { --nv-w: 720px; }
  .nv-panel--res .nv-cols { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .nv-panel--mkt { --nv-w: 680px; }
  .nv-list--grid { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 4px; }
  .nv-col--aside { background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--border-soft); border-radius: var(--radius-lg); }
}

/* ------------------------------------------------------------ téléphone et tablette */

@media (max-width: 1080px) {
  .nav[data-open="1"] > .nv-item { border-bottom: 1px solid var(--border-soft); }
  /* Accueil reste le premier lien du menu plein ecran. */
  .nav .nv-home {
    display: flex; width: 100%; align-items: center;
    font-size: 1.02rem; padding: 13px 12px; border-radius: 8px;
    color: var(--text); text-decoration: none; font-weight: 550;
  }
  .nav .nv-top {
    display: flex; width: 100%; justify-content: flex-start; text-align: left;
    font-size: 1.02rem; padding: 13px 12px; border-radius: 8px; color: var(--text);
  }
  .nv-chev { margin-left: auto; margin-right: 4px; }
  .nv-panel { display: none; }
  .nv-item.is-open > .nv-panel { display: block; padding: 0 0 10px; animation: nv-acc .2s var(--v2-ease, ease); }
  .nv-cols { display: block; }
  .nv-col { padding: 0; }
  .nv-col + .nv-col { margin-top: 6px; }
  .nv-h { margin: 8px 12px 4px; }
  .nav .nv-panel .nv-list a { align-items: center; padding: 8px 12px; }
  .nv-t { font-size: .97rem; font-weight: 550; }
  .nv-d { display: none; }
  .nv-ic { width: 30px; height: 30px; border-radius: 8px; }
  .nv-ic svg { width: 16px; height: 16px; }
  .nav .nv-panel .nv-list--compact a { padding: 8px 12px 8px 54px; font-size: .94rem; }
  .nv-foot { border-top: 0; margin: 2px 0 0; padding: 8px 12px 4px; }
}
@media (min-width: 640px) and (max-width: 1080px) {
  .nv-list--grid { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 8px; }
}
@keyframes nv-acc { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

/* ------------------------------------------------------------ mouvement réduit */

@media (prefers-reduced-motion: reduce) {
  .nv-panel { transition: none; translate: none; }
  .nv-item.is-open > .nv-panel { animation: none; }
  .nv-chev, .nav .nv-top, .nv-ic, .nav .nv-panel .nv-list a,
  .nav .nv-panel .nv-list--compact a::after, .nav .nv-panel .nv-foot a::after { transition: none; }
}