/* ==========================================================
   Carte — bandeau supérieur "Solaire"
   Bloc repris du prototype bnw_3 : fond bordeaux, soleil doré,
   navigation par catégories en pilules blanches.
   Scope : uniquement le haut de carte.html (héro + nav catégories).
   ========================================================== */

.carte-solaire .carte-top-hero{
  padding:clamp(64px,9vw,120px) 0 72px;
  background:var(--red-700);
  color:var(--white);
  position:relative;
  overflow:hidden;
}
.carte-solaire .carte-top-hero::after{
  content:"";
  position:absolute;
  width:420px;height:420px;
  border-radius:50%;
  background:var(--gold-400);
  right:-170px;bottom:-250px;
}
.carte-solaire .carte-top-hero .container{position:relative;z-index:1}
.carte-solaire .carte-top-hero .eyebrow,
.carte-solaire .carte-top-hero h1{color:var(--white)}
.carte-solaire .carte-top-hero .eyebrow::before{background:var(--gold-400)}
.carte-solaire .carte-top-hero h1{font-size:clamp(1.8rem,4vw,2.6rem);margin-bottom:.35em}
.carte-solaire .carte-top-hero-line>p{color:var(--cream-100);margin:0;max-width:60ch}

.carte-solaire .menu-nav{background:var(--cream-50)}
.carte-solaire .menu-nav a{background:var(--white);border-color:var(--red-700);color:var(--red-800)}
.carte-solaire .menu-nav a:hover,
.carte-solaire .menu-nav a.active{background:var(--gold-400);border-color:var(--gold-400);color:var(--espresso-900)}

@media (max-width:620px){
  .carte-solaire .carte-top-hero::after{opacity:.35}
}