/* ========================= HEADER ========================== */

.topbar{
position:absolute;
z-index:20;
top:22px;
left:32px;
right:32px;
height:58px;
border:1px solid var(--line);
background:rgba(5,7,6,.60);
backdrop-filter:blur(14px);
display:flex;
justify-content:space-between;
align-items:center;
padding:0 18px 0 22px;
box-shadow:0 18px 60px rgba(0,0,0,.28);
}

/* ========================= LOGO ========================== */

.brand{
display:flex;
align-items:center;
gap:12px;
color:var(--text);
text-decoration:none;
letter-spacing:.09em;
text-transform:uppercase;
}

.brand-logo{
width:125px;
height:125px;
object-fit:contain;
display:block;
flex-shrink:0;
transform:translate(-26px,16px);
}

.brand-name{font-weight:800;font-size:13px;}

.brand-sub{
font-size:11px;
font-weight:700;
color:var(--green2);
transition:.18s ease;
}

.brand:hover .brand-sub{color:#00B7FF;}

/* ========================= MENU ========================== */

.nav{display:flex;gap:9px;}

.nav a{
width:36px;
height:36px;
display:grid;
place-items:center;
color:var(--muted);
text-decoration:none;
border:1px solid transparent;
background:rgba(255,255,255,.025);
transition:.18s ease;
}

.nav a:hover{
color:#008CFF;
border-color:rgba(0,140,255,.52);
box-shadow:0 0 20px rgba(0,140,255,.18), inset 0 0 18px rgba(0,140,255,.05);
background:rgba(0,140,255,.06);
}

.nav a.active{
color:var(--green2);
border-color:rgba(40,214,160,.52);
box-shadow:0 0 20px rgba(40,214,160,.18), inset 0 0 18px rgba(40,214,160,.05);
background:rgba(40,214,160,.06);
}

/* ========================= RESPONSIVE ========================== */

@media(max-width:800px){

.topbar{
position:fixed;
top:12px;
left:12px;
right:12px;
width:auto;
height:56px;
padding:0 10px 0 12px;
gap:8px;
}

.brand{
min-width:0;
gap:4px;
}

.brand-logo{
width:72px;
height:72px;
transform:translate(-15px,9px);
}

.brand-name{
font-size:10px;
letter-spacing:.05em;
white-space:nowrap;
margin-left:-14px;
}

.brand-sub{
display:none;
}

.nav{
gap:4px;
margin-left:auto;
flex-shrink:0;
}

.nav a{
width:32px;
height:32px;
}

}

/* ========================= RESPONSIVE PETIT ECRAN ========================== */

@media(max-width:500px){

.topbar{
left:8px;
right:8px;
top:8px;
height:52px;
padding:0 7px;
}

.brand-logo{
width:62px;
height:62px;
transform:translate(-13px,8px);
}

.brand-name{
font-size:9px;
letter-spacing:.02em;
margin-left:-13px;
}

.nav{
gap:2px;
}

.nav a{
width:29px;
height:29px;
}

}