/* Barre sombre superposée à l’image du Hero — sans étirer l’image */
.site-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  box-sizing:border-box;
}

/* La barre flotte dans le Hero : l’image continue donc derrière elle. */
.method-hero > .site-header,
.v18-hero > .site-header{
  position:absolute;
  top:14px;
  left:50%;
  transform:translateX(-50%);
  z-index:20;
  width:min(1780px,calc(100% - 32px));
  margin:0;
  padding:10px 20px;
  border:1px solid rgba(180,224,128,.22);
  border-radius:999px;
  background:linear-gradient(180deg,rgba(15,22,16,.88),rgba(5,10,7,.92));
  box-shadow:0 16px 38px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.08);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}

/* L’image garde ses proportions : aucun étirement. */
.method-hero-bg{
  inset:0 !important;
  background-size:cover !important;
  background-position:center center !important;
  background-repeat:no-repeat !important;
}
.v18-hero{
  background-size:cover !important;
  background-position:center center !important;
  background-repeat:no-repeat !important;
}

/* Assure que le contenu demeure devant l’image et sous la navigation. */
.method-hero-content,
.v18-copy{
  position:relative;
  z-index:2;
}

.site-header .brand{
  color:#f5f8f1;
  font-size:1.2rem;
  font-weight:900;
  letter-spacing:-.02em;
  text-decoration:none;
  text-shadow:0 1px 8px rgba(0,0,0,.35);
}
.site-header nav{
  display:flex;
  align-items:center;
  gap:7px;
}
.site-header nav a{
  padding:9px 13px;
  border:1px solid transparent;
  border-radius:999px;
  color:#f3f6ef;
  font-size:.88rem;
  font-weight:800;
  line-height:1;
  text-decoration:none;
  transition:background .2s ease,border-color .2s ease,color .2s ease,transform .2s ease;
}
.site-header nav a:hover{
  transform:translateY(-1px);
  border-color:rgba(164,216,99,.35);
  background:rgba(103,156,47,.16);
  color:#c9ef9b;
}
.site-header nav a[aria-current="page"]{
  border-color:rgba(151,211,78,.72);
  background:linear-gradient(180deg,rgba(85,139,35,.92),rgba(53,99,23,.95));
  color:#fff;
  box-shadow:0 7px 17px rgba(44,91,20,.3),inset 0 1px 0 rgba(255,255,255,.18);
}

@media(max-width:800px){
  .method-hero > .site-header,
  .v18-hero > .site-header{
    top:8px;
    width:calc(100% - 16px);
    padding:10px 14px;
    border-radius:20px;
  }
  .site-header nav{display:none}
  .site-header .brand{font-size:1.15rem}
  .v18-copy{padding-top:92px !important}
}