/* ===== topbar — sticky, commune à toutes les sections de la page ===== */
.topbar{
  position:sticky;
  top:0;
  z-index:20;
  background:var(--white);
  border-bottom:1px solid var(--gray-200);
}

.nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  /* vertical seulement : le padding horizontal vient de .wrap (sinon le logo
     touche le bord de l'écran sous 1280px) */
  padding-top:24px;
  padding-bottom:18px;
  position:relative;
}

.brand{
  display:flex;
  align-items:center;
  flex-shrink:0;
}
.brand img{ height:44px; width:auto; }

.menu{
  display:flex;
  align-items:center;
  gap:31px;
  list-style:none;
}
.menu a{
  font-size:15.5px;
  font-weight:500;
  color:var(--ink-soft);
  transition:color .18s ease;
  position:relative;
}
.menu a:hover{ color:var(--ink); }
.menu a.active{ color:var(--ink); font-weight:600; }

.nav-right{
  display:flex;
  align-items:center;
  gap:34px;
}
.nav-cta{
  display:flex;
  align-items:center;
  gap:22px;
}

/* soulignement animé, repositionné en JS (nav.js -> moveUnderline) sous le lien actif */
.nav-underline{
  position:absolute;
  bottom:12px;
  height:2px;
  background:linear-gradient(90deg, transparent, var(--red) 25%, var(--red-dark) 50%, var(--red) 75%, transparent);
  border-radius:2px;
  transition:left .45s cubic-bezier(.65,0,.35,1), width .45s cubic-bezier(.65,0,.35,1);
}

/* repère "section en cours / total" */
.section-counter{
  padding-bottom:10px;   /* horizontal : celui de .wrap */
  font-size:10px;
  font-weight:600;
  letter-spacing:.14em;
  color:var(--ink-soft);
}
.section-counter span{ color:var(--ink); }

/* bouton hamburger — injecté par Header/nav-toggle.js, visible sous 900px */
.nav-toggle{
  display:none;
  position:relative;
  width:44px; height:44px;
  margin-right:-10px;          /* aligne visuellement les barres sur le bord du .wrap */
  background:none;
  border:none;
  border-radius:12px;
  cursor:pointer;
  color:var(--ink);
}
.nav-toggle span{
  position:absolute;
  left:11px; right:11px;
  height:2px;
  border-radius:2px;
  background:currentColor;
  transition:transform .3s cubic-bezier(.65,0,.35,1), opacity .2s ease;
}
.nav-toggle span:nth-child(1){ top:15px; }
.nav-toggle span:nth-child(2){ top:21px; }
.nav-toggle span:nth-child(3){ top:27px; }
.topbar.is-open .nav-toggle span:nth-child(1){ transform:translateY(6px) rotate(45deg); }
.topbar.is-open .nav-toggle span:nth-child(2){ opacity:0; }
.topbar.is-open .nav-toggle span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }
.nav-toggle:focus-visible{ outline:2px solid var(--red); outline-offset:2px; }

@media (max-width:1180px){
  .nav{ padding-top:20px; padding-bottom:16px; }
  .menu{ gap:22px; }
}

/* ---- mobile / tablette portrait : menu hamburger ---- */
@media (max-width:900px){
  .nav{ padding-top:14px; padding-bottom:14px; }
  .brand img{ height:40px; }
  .nav-toggle{ display:block; }
  .nav-underline{ display:none; }
  .section-counter{ display:none; }

  /* le bloc menu + CTA devient un panneau déroulant sous la topbar */
  .nav-right{
    position:absolute;
    top:100%;
    left:0; right:0;
    flex-direction:column;
    align-items:stretch;
    gap:0;
    padding:8px 28px 28px;
    background:var(--white);
    border-bottom:1px solid var(--gray-200);
    box-shadow:0 24px 40px -24px rgba(22,32,43,0.28);
    max-height:calc(100vh - 72px);
    max-height:calc(100dvh - 72px);
    overflow-y:auto;
    opacity:0;
    visibility:hidden;
    transform:translateY(-8px);
    transition:opacity .25s ease, transform .25s ease, visibility 0s linear .25s;
  }
  .topbar.is-open .nav-right{
    opacity:1;
    visibility:visible;
    transform:none;
    transition:opacity .25s ease, transform .25s ease, visibility 0s;
  }
  .menu{
    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap:0;
  }
  .menu li{ border-bottom:1px solid var(--gray-100); }
  .menu a{
    display:block;
    padding:16px 0;
    font-family:'Sora', sans-serif;
    font-size:18px;
  }
  .menu a.active{ color:var(--red); }
  .nav-cta{ margin-top:22px; }
  .nav-cta .btn{ width:100%; padding:14px 24px; font-size:14px; }
}
@media (max-width:520px){
  .nav{ padding-top:12px; padding-bottom:12px; }
  .brand img{ height:36px; }
  .nav-right{ padding:4px 20px 24px; max-height:calc(100dvh - 60px); }
}

/* ===== ancien bandeau (désormais section 2) ===== */
.banner{
  position:relative;
  width:100%;
  background:var(--white);
  /* coupe la moitié droite de l'anneau, qui déborde volontairement de l'écran */
  overflow:hidden;
  /* garde-fou : la forme (2×rayon + débord des pastilles + dégagement du
     haut de section) doit tenir entièrement dans le bandeau. --orbit-s
     n'entre plus dans ce calcul : l'allongement est désormais horizontal,
     il n'ajoute rien à la hauteur (voir css/orbit.css). */
  min-height:calc(var(--orbit-r) * 2 + 210px);
}

@media (max-width:900px){
  .banner{ min-height:0; }
}