:root{--deep:#032536;--navy:#041c2c;--sea:#087c99;--cyan:#58d9ed;--sand:#f1d9a5;--cream:#fff6e5;--muted:#b9d3d9}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--navy);color:var(--cream);font-family:Montserrat,sans-serif;line-height:1.5}

a{color:inherit;text-decoration:none}

button{font:inherit;cursor:pointer}

.site-top{position:sticky;top:0;z-index:30;backdrop-filter:blur(18px);background:#032536e8;border-bottom:1px solid #c5eaf333}

.top-inner{max-width:1140px;margin:auto;min-height:68px;padding:10px 22px;display:flex;align-items:center;justify-content:space-between;gap:18px}

.brand{font-family:Montserrat,sans-serif;font-size:1.45rem;letter-spacing:.06em;color:var(--sand)}

.brand small{display:block;font:600 .58rem system-ui;letter-spacing:.22em;color:var(--cyan)}

.nav{display:flex;gap:22px;align-items:center;font-size:.86rem}


/* V2.1 — animations, identité et passerelle entre les univers */
:root{--sand:#dfc18f;--cream:#f8f3e9}
.brand{display:flex;align-items:center;gap:11px}
.brand-mark{width:37px;height:37px;border:1px solid #e7c99288;border-radius:50%;display:grid;place-items:center;color:var(--cyan);font-size:1.35rem;box-shadow:inset 0 0 15px #29b8d327}
.nav a{position:relative;transition:color .2s}
.nav a:after{content:"";position:absolute;left:0;right:100%;bottom:-5px;height:2px;background:var(--cyan);transition:right .25s}
.nav a:hover:after,.nav a:focus-visible:after{right:0}






.site-top .navigation-principale {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 25px;
}

.site-top .navigation-principale a {
    color: #f8f3e9;
    font-size: 0.85rem;
    white-space: nowrap;
    text-decoration: none;
}

.site-top .navigation-principale a:hover {
    color: #58d9ed;
}

/* ==========================================
   SUBTOMEK — LOGO HEADER CORRIGÉ
========================================== */
.site-top .brand {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    flex-shrink: 0;
}
.site-top .brand .brand-mark {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    padding: 0;
    margin: 0;
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    overflow: hidden;
}
.site-top .brand .brand-mark .brand-logo {
    display: block;
    position: static;
    width: 38px;
    height: 38px;
    min-width: 0;
    max-width: 38px;
    max-height: 38px;
    margin: 0;
    padding: 0;
    object-fit: contain;
    transform: none;
}