/* Navbar flottante : mêmes surfaces, capsule et lentille que la landing. */
#brandBar {
    --top-nav-gap: 14px;
    position: sticky;
    top: var(--top-nav-gap);
    width: calc(100% - 64px);
    max-width: 1440px;
    margin: var(--top-nav-gap) auto 0;
    border: 1px solid rgba(15,23,42,.09);
    border-radius: 24px;
    background: rgba(255,255,255,.72);
    backdrop-filter: blur(16px) saturate(180%);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
    box-shadow: 0 8px 35px #17255408;
    transition: transform .36s cubic-bezier(.16,1,.3,1), opacity .24s ease;
    z-index: 110;
}
[data-theme="dark"] #brandBar {
    background: rgba(22,22,42,.72);
    border-color: rgba(255,255,255,.09);
}
#brandBar.sp-top-hidden {
    transform: translate3d(0,calc(-100% - var(--top-nav-gap) - 12px),0);
    opacity: 0;
    pointer-events: none;
}
#brandBar .brand-bar-inner {
    position: relative;
    max-width: none;
    height: 64px;
    min-height: 64px;
    padding: 0 24px;
    gap: 14px;
}
#brandBar .brand { min-height:44px; flex-shrink:0; display:flex; align-items:center; }
#brandBar .brand-logo-full { width:158px; }
#brandBar .brand-actions { margin-left:auto; gap:10px; flex-shrink:0; }
#spDesktopNav {
    position:absolute;
    left:50%; top:50%;
    transform:translate(-50%,-50%);
    isolation:isolate;
    display:flex;
    gap:0;
    padding:3px;
    border:1px solid rgba(15,23,42,.055);
    border-radius:999px;
    background:rgba(226,229,237,.56);
    box-shadow:inset 0 2px 6px rgba(15,23,42,.13), inset 0 -1px 1px rgba(255,255,255,.72), 0 1px 0 rgba(255,255,255,.34);
}
[data-theme="dark"] #spDesktopNav {
    border-color:rgba(255,255,255,.065);
    background:rgba(7,10,22,.58);
    box-shadow:inset 0 2px 7px rgba(0,0,0,.52), inset 0 -1px 1px rgba(255,255,255,.055), 0 1px 0 rgba(255,255,255,.025);
}
#spDesktopNav a {
    position:relative; z-index:1;
    min-height:40px; padding:7px 12px;
    border-radius:999px;
    font-size:14px; font-weight:550; line-height:1.4;
    color:#475569;
    background:transparent;
    gap:6px;
    white-space:nowrap;
    transition:color .18s ease;
}
[data-theme="dark"] #spDesktopNav a { color:#b5bfd0; }
#spDesktopNav a::after { display:none; }
#spDesktopNav a[aria-current="page"] { color:#0f172a; }
[data-theme="dark"] #spDesktopNav a[aria-current="page"] { color:#f1f5f9; }
#spDesktopNav a:hover { color:#e11d48; }
[data-theme="dark"] #spDesktopNav a:hover { color:#fb7185; }
#spDesktopNav .sp-nav-pro { font-size:8px; padding:2px 4px; }
.sp-top-selector {
    position:absolute; z-index:0; left:0; top:3px; bottom:3px;
    width:var(--top-selector-width,0px);
    transform:translate3d(var(--top-selector-x,0px),0,0);
    opacity:var(--top-selector-opacity,0);
    border:1px solid rgba(15,23,42,.045);
    border-radius:999px;
    background:rgba(255,255,255,.94);
    box-shadow:0 3px 10px rgba(15,23,42,.10), inset 0 1px 0 #fff;
    pointer-events:none;
    transition:width .36s cubic-bezier(.22,.8,.24,1), transform .44s cubic-bezier(.16,1,.3,1), opacity .18s ease;
}
[data-theme="dark"] .sp-top-selector {
    border-color:rgba(255,255,255,.09);
    background:rgba(40,47,65,.96);
    box-shadow:0 5px 14px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.08);
}
#brandBar #themeToggle, #brandBar #settingsToggle {
    display:grid; place-items:center;
    width:40px; height:44px; min-width:40px;
    padding:0; margin:0; border:0; border-radius:999px;
    background:transparent; color:#475569; box-shadow:none;
    transform:none;
    transition:background .18s ease, color .18s ease;
}
[data-theme="dark"] #brandBar #themeToggle, [data-theme="dark"] #brandBar #settingsToggle { color:#cbd5e1; }
#brandBar #themeToggle:hover, #brandBar #settingsToggle:hover { background:rgba(148,163,184,.15); transform:none; }
#brandBar #themeToggle::before, #brandBar #settingsToggle::before { display:none; }
#brandBar .switch-handle { position:static; width:22px; height:22px; background:none; box-shadow:none; transform:none; border-radius:0; }
#brandBar #themeIcon { display:block; width:24px; height:24px; }
#brandBar #themeIcon svg { width:24px; height:24px; stroke-width:1.7; }
#brandBar .theme-sun { display:none; }
[data-theme="dark"] #brandBar .theme-moon { display:none; }
[data-theme="dark"] #brandBar .theme-sun { display:block; }
#brandBar .sp-top-upgrade {
    min-height:40px;
    padding:7px 20px;
    border:0; border-radius:30px;
    background:linear-gradient(135deg,#e11d48,#be123c);
    box-shadow:0 12px 28px -10px rgba(225,29,72,.45);
    color:#fff; line-height:1.4;
    font-family:inherit; font-size:13.6px; font-weight:700;
    white-space:nowrap; cursor:pointer;
    transition:transform .18s ease, box-shadow .18s ease;
}
[data-theme="dark"] #brandBar .sp-top-upgrade { background:linear-gradient(135deg,#fb7185,#e11d48); }
#brandBar .sp-top-upgrade:hover { transform:translateY(-1px); box-shadow:0 14px 30px -10px rgba(225,29,72,.55); }
#brandBar :is(a,button):focus-visible { outline:2px solid #e11d48; outline-offset:3px; }
[data-theme="dark"] #brandBar :is(a,button):focus-visible { outline-color:#fb7185; }
#brandBar [hidden], #spDesktopNav [hidden] { display:none!important; }

/* Trois entrées, avec le verre limité à la carte et aucun voile sur la page. */
#spProChoice { background:transparent; backdrop-filter:none; -webkit-backdrop-filter:none; z-index:10001; padding:20px; }
#spProChoice .sp-pro-choice-card {
    position:relative; isolation:isolate;
    width:min(100%,416px); max-width:416px; max-height:calc(100dvh - 40px);
    overflow-y:auto; padding:32px 30px 28px;
    border:1px solid rgba(15,23,42,.1); border-radius:22px;
    background:rgba(255,255,255,.82);
    backdrop-filter:blur(18px) saturate(160%);
    -webkit-backdrop-filter:blur(18px) saturate(160%);
    box-shadow:0 24px 48px -16px rgba(15,23,42,.22), 0 8px 20px -8px rgba(15,23,42,.12);
    color:#0f172a; text-align:center;
    transform:translateY(14px) scale(.97);
    transition:transform .28s cubic-bezier(.16,1,.3,1);
    scrollbar-width:none;
}
#spProChoice .sp-pro-choice-card::-webkit-scrollbar { display:none; }
#spProChoice.is-visible .sp-pro-choice-card { transform:none; }
[data-theme="dark"] #spProChoice .sp-pro-choice-card { background:rgba(22,22,42,.82); border-color:rgba(255,255,255,.1); color:#f1f5f9; }
#spProChoice .modal-close-icon { position:absolute; top:12px; right:12px; width:36px; height:36px; border-radius:50%; border:1px solid rgba(225,29,72,.22); background:rgba(225,29,72,.08); color:#e11d48; display:grid; place-items:center; }
#spProChoice .modal-close-icon svg { width:18px; height:18px; }
#spProChoice .sp-pro-choice-symbol { width:40px; height:40px; display:block; margin:0 auto 16px; }
#spProChoice h2 { margin:0; font-size:20px; font-weight:800; line-height:1.35; }
#spProChoice p { margin:10px 0 24px; color:#475569; font-size:14px; line-height:1.55; }
[data-theme="dark"] #spProChoice p { color:#b5bfd0; }
#spProChoice .sp-pro-choice-actions { display:flex; flex-direction:column; gap:10px; }
#spProChoice .sp-pro-choice-actions :is(a,button) { display:flex; align-items:center; justify-content:center; min-height:48px; padding:12px 16px; border:1px solid rgba(15,23,42,.18); border-radius:11px; background:transparent; color:inherit; line-height:1.4; font-family:inherit; font-size:14px; font-weight:700; text-decoration:none; cursor:pointer; }
[data-theme="dark"] #spProChoice .sp-pro-choice-actions :is(a,button) { border-color:rgba(255,255,255,.2); }
#spProChoice #spProChoiceKey { background:linear-gradient(135deg,#fb7185,#e11d48); color:#fff; border:0; box-shadow:0 12px 28px -10px rgba(225,29,72,.4); }
#spProChoice .sp-pro-choice-actions :is(a,button):hover { background-color:rgba(148,163,184,.12); }
#spProChoice :is(a,button):focus-visible { outline:2px solid #e11d48; outline-offset:3px; }

@media (min-width:1100px) and (max-width:1290px) {
    #brandBar .brand-bar-inner { padding-inline:18px; gap:8px; }
    #brandBar .brand-logo-full { width:132px; }
    #spDesktopNav a { font-size:13px; padding-inline:9px; gap:4px; }
    #brandBar .brand-actions { gap:4px; }
    #brandBar .sp-top-upgrade { padding-inline:12px; font-size:13px; }
    #brandBar #themeToggle, #brandBar #settingsToggle { width:34px; min-width:34px; }
}
@media (max-width:1099px), (hover:none) and (pointer:coarse) {
    #spDesktopNav, #brandBar #settingsToggle { display:none; }
}
/* Les badges partagent la définition de route, y compris dans Plus. */
.sp-nav-pro[hidden] { display:none!important; }
@media (max-width:760px) {
    #brandBar { --top-nav-gap:10px; width:calc(100% - 24px); border-radius:18px; }
    #brandBar .brand-bar-inner { height:56px; min-height:56px; padding:0 12px; gap:8px; }
    #brandBar .brand-logo-full { width:128px; }
    #brandBar .brand-actions { gap:6px; }
    #brandBar #themeToggle { width:44px; min-width:44px; }
    #brandBar .sp-top-upgrade { padding-inline:13px; font-size:12px; }
}
@media (max-width:370px) {
    #brandBar .brand-bar-inner { padding-inline:9px; gap:4px; }
    #brandBar .brand-logo-full { width:104px; }
    #brandBar .brand-actions { gap:4px; }
    #brandBar .sp-top-upgrade { padding-inline:10px; }
    #spProChoice .sp-pro-choice-card { padding:30px 20px 22px; }
}
@media (prefers-reduced-motion:reduce) {
    #brandBar, .sp-top-selector, #spProChoice, #spProChoice .sp-pro-choice-card { transition:none!important; }
}
@media (prefers-reduced-transparency:reduce) {
    #brandBar, #spProChoice .sp-pro-choice-card { background:#f7f8fc; backdrop-filter:none; -webkit-backdrop-filter:none; }
    [data-theme="dark"] #brandBar, [data-theme="dark"] #spProChoice .sp-pro-choice-card { background:#16162a; }
}
@media (forced-colors:active) {
    #brandBar, #spDesktopNav, #spProChoice .sp-pro-choice-card { background:Canvas; color:CanvasText; border:1px solid CanvasText; backdrop-filter:none; -webkit-backdrop-filter:none; box-shadow:none; }
    #brandBar :is(a,button), #spProChoice :is(a,button), #spProChoice p { color:CanvasText!important; border-color:ButtonText; }
    .sp-top-selector { background:Canvas; border-color:Highlight; box-shadow:none; }
    #brandBar :focus-visible, #spProChoice :focus-visible { outline-color:Highlight; }
}