{# nav-top.html — Barre de navigation top : logo gauche, 5 liens centre, CTA droit.
   Slots :
   {{LOGO_HTML}}                            — SVG ou <img> du logo (height ~32px)
   {{LINK_1_LABEL}} / {{LINK_1_HREF}}       — liens centre (5)
   {{LINK_2_LABEL}} / {{LINK_2_HREF}}
   {{LINK_3_LABEL}} / {{LINK_3_HREF}}
   {{LINK_4_LABEL}} / {{LINK_4_HREF}}
   {{LINK_5_LABEL}} / {{LINK_5_HREF}}
   {{CTA_LABEL}} / {{CTA_HREF}}             — bouton CTA droit
#}

<nav class="navtop" aria-label="Principal">
  <a class="navtop__brand" href="/" aria-label="Accueil">{{LOGO_HTML}}</a>
  <ul class="navtop__links">
    <li><a class="navtop__link" href="{{LINK_1_HREF}}">{{LINK_1_LABEL}}</a></li>
    <li><a class="navtop__link" href="{{LINK_2_HREF}}">{{LINK_2_LABEL}}</a></li>
    <li><a class="navtop__link" href="{{LINK_3_HREF}}">{{LINK_3_LABEL}}</a></li>
    <li><a class="navtop__link" href="{{LINK_4_HREF}}">{{LINK_4_LABEL}}</a></li>
    <li><a class="navtop__link" href="{{LINK_5_HREF}}">{{LINK_5_LABEL}}</a></li>
  </ul>
  <a class="navtop__cta" href="{{CTA_HREF}}">{{CTA_LABEL}}</a>
</nav>

<style>
  .navtop {
    display: flex; align-items: center; justify-content: space-between;
    gap: 2rem; max-width: 90rem; margin: 0 auto; padding: 1rem 1.5rem;
    font-family: var(--font-body, system-ui, sans-serif);
    color: var(--color-fg, #111); background: var(--color-bg, #fff);
  }
  .navtop__brand { display: inline-flex; align-items: center; height: 2rem; text-decoration: none; }
  .navtop__brand :is(svg, img) { height: 100%; width: auto; display: block; }
  .navtop__links { list-style: none; margin: 0; padding: 0; display: flex; gap: 1.75rem; }
  .navtop__link { text-decoration: none; color: inherit; font-size: 0.95rem; font-weight: 500; transition: opacity .2s; }
  .navtop__link:hover { opacity: 0.65; }
  .navtop__cta {
    background: var(--color-cta-bg, #111); color: var(--color-cta-text, #fff) !important;
    text-decoration: none; font-family: var(--font-heading, inherit); font-weight: 700;
    font-size: 0.95rem; padding: 0.7rem 1.25rem; border-radius: 8px;
    transition: transform .2s, filter .2s; white-space: nowrap;
  }
  .navtop__cta:hover { transform: scale(.97); filter: saturate(.85); }
  @media (max-width: 768px) {
    .navtop { flex-wrap: wrap; gap: 1rem; padding: 0.75rem 1rem; }
    .navtop__links { order: 3; width: 100%; justify-content: center; gap: 1.25rem; flex-wrap: wrap; }
    .navtop__link { font-size: 0.875rem; }
  }
</style>