header.css

#header-placeholder { height: 76px; }
.site-header {
    position: relative;
    z-index: 100;
    height: 76px;
    border-bottom: 1px solid rgba(255,255,255,.12);
    background: rgba(7,28,39,.86);
    color: white;
    font-family: 'Manrope', system-ui, sans-serif;
    backdrop-filter: blur(16px);
}

.header-container { width: min(1240px, calc(100% - 48px)); height: 100%; margin-inline: auto; display: flex; align-items: center; justify-content: space-between; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: white; text-decoration: none; }
.brand-logo { width: 52px; height: 42px; object-fit: contain; flex: 0 0 auto; }
.brand-name { font-size: 23px; font-weight: 700; letter-spacing: -.04em; }
.brand-name .brand-visu { color: #8bd873; }
.brand-name .brand-phy { color: #ff565c; }
.brand small { margin-left: 4px; padding-left: 13px; border-left: 1px solid rgba(255,255,255,.19); color:#8da0a6; font:500 10px 'DM Mono',monospace; letter-spacing:.12em; }
.header-nav { display: flex; align-items: center; gap: 34px; }
.nav-link { position: relative; color:#b7c4c8; text-decoration:none; font-size:14px; font-weight:600; transition:color .2s; }.nav-link:hover { color:white; }.nav-link::after { content:''; position:absolute; left:0; right:100%; bottom:-9px; height:1px; background:#c8ff3d; transition:right .25s; }.nav-link:hover::after { right:0; }
.nav-github { padding: 9px 12px; border:1px solid rgba(255,255,255,.2); color:white; }.nav-github::after { display:none; }.nav-github:hover { border-color:#c8ff3d; color:#c8ff3d; }
.mobile-nav-toggle { display:none; padding:8px; border:0; background:transparent; color:white; cursor:pointer; }.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }.hamburger-icon { display:flex; width:26px; height:17px; flex-direction:column; justify-content:space-between; }.hamburger-icon .bar { width:100%; height:1px; background:white; transition:transform .25s; }.mobile-nav-toggle[aria-expanded="true"] .bar:first-child { transform:translateY(8px) rotate(45deg); }.mobile-nav-toggle[aria-expanded="true"] .bar:last-child { transform:translateY(-8px) rotate(-45deg); }

@media (max-width: 760px) {
    #header-placeholder { height:68px; }.site-header { height:68px; }.header-container { width:calc(100% - 30px); }.brand-logo { width:48px; height:38px; }.brand-name { font-size:21px; }.brand small { display:none; }.mobile-nav-toggle { display:block; }.header-nav { display:none; position:absolute; top:68px; left:0; right:0; padding:30px 24px 36px; flex-direction:column; align-items:flex-start; gap:27px; border-bottom:1px solid rgba(255,255,255,.12); background:rgba(7,28,39,.98); box-shadow:0 20px 40px rgba(0,0,0,.24); }.header-nav[data-visible="true"] { display:flex; }.nav-link { font-size:16px; }.nav-github { width:100%; text-align:center; }
}