/* Compact, full-width navigation shared by the creation pages. */
:root { --site-navigation-height: 100px; }
body { padding-top: var(--site-navigation-height); }
.site-navigation { position: fixed; inset: 0 0 auto; z-index: 60; background: #141414; border-bottom: 1px solid #ffffff0a; color: #f0f1f2; }
body[data-workspace="accueil"], body[data-workspace="montage"] { background: #090b10; }
body[data-workspace="video"] { background: #0e1011; }
body[data-workspace="images"], body[data-workspace="influencer"], body[data-workspace="bibliotheque"] { background: #101112; }
.home-header { position: relative; margin: 0; min-height: 56px; padding: 10px 20px; display: flex; align-items: center; gap: 32px; }
.home-brand { display: inline-flex; flex-shrink: 0; align-items: center; gap: 7px; color: #f5f5f5; text-decoration: none; }
.home-brand img { display: block; width: 30px; height: 30px; object-fit: contain; }
.home-brand span { font-family: 'Manrope', 'Segoe UI', sans-serif; font-size: 18px; line-height: 1; font-weight: 800; letter-spacing: -.7px; }
.home-nav { display: flex; gap: 24px; align-items: center; margin-left: auto; max-width: 100%; min-width: 0; overflow-x: auto; scrollbar-width: none; padding: 4px; }
.home-nav::-webkit-scrollbar { display: none; }
.home-nav a { flex-shrink: 0; padding: 5px 0; font-size: 14px; line-height: 20px; font-weight: 500; color: #999; text-decoration: none; white-space: nowrap; transition: color .2s; }
.home-nav a:hover, .home-nav .home-nav-current { color: #fff; }
.home-nav [aria-expanded="true"] { color: #fff; background: #ffffff0a; box-shadow: 0 0 0 6px #ffffff0a; border-radius: 3px; }
.site-nav-panel { position: absolute; top: 100%; right: 20px; display: grid; grid-template-columns: .9fr 1.1fr; gap: 24px; width: min(900px, calc(100vw - 40px)); max-height: calc(100dvh - var(--site-navigation-height) - 16px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #48484c transparent; padding: 20px; border: 1px solid #ffffff0c; border-radius: 22px; background: #1c1e20; box-shadow: 0 18px 48px #0006; }
.site-nav-column { min-width: 0; }
.site-nav-column h2 { margin: 0 0 8px 8px; color: #96969b; font-size: 13px; font-weight: 500; line-height: 20px; }
.site-nav-list { display: grid; gap: 2px; }
.site-nav-entry { display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 8px; border-radius: 12px; color: #eeeef0; text-decoration: none; transition: background .15s; }
.site-nav-entry:hover, .site-nav-entry[aria-current="page"] { background: #ffffff06; }
.site-nav-entry:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; background: #ffffff06; }
.site-nav-symbol { display: grid; place-items: center; width: 48px; height: 48px; flex-shrink: 0; border-radius: 13px; background: #27292c; color: #f0f0f3; }
.site-nav-symbol .icon { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.site-nav-symbol .image-model-logo { width: 23px; height: 23px; background: currentColor; }
.site-nav-copy { display: grid; gap: 4px; min-width: 0; }
.site-nav-copy strong { font-size: 14px; font-weight: 600; line-height: 20px; }
.site-nav-copy > span { color: #95959b; font-size: 13px; line-height: 19px; }
.site-nav-empty { margin: 8px; color: #95959b; font-size: 13px; line-height: 20px; }
.home-auth { display: flex; flex-shrink: 0; align-items: center; gap: 8px; padding-left: 20px; border-left: 1px solid #ffffff14; }
.home-auth-button { padding: 6px 12px; border-radius: 6px; font-size: 13px; line-height: 20px; white-space: nowrap; }
.home-login { color: #b5b5b5; font-weight: 500; }
.home-login:hover { color: #fff; }
.home-signup { background: var(--accent); color: var(--accent-ink); font-weight: 500; }
.home-auth-button:focus-visible { outline-color: var(--accent); }
.home-promo { position: relative; min-height: 44px; padding: 8px 56px; background: var(--accent); color: var(--accent-ink); }
.home-promo-content { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px 14px; min-height: 28px; }
.home-promo-message { display: flex; align-items: center; gap: 9px; min-width: 0; font-size: 14px; font-weight: 500; line-height: 1.5; }
.home-promo-message .icon { width: 16px; height: 16px; fill: currentColor; fill-rule: evenodd; stroke: none; }
.home-promo-message strong { font-weight: 700; white-space: nowrap; }
.home-promo-action { flex-shrink: 0; padding: 5px 12px; border-radius: 7px; background: #fff; color: #202220; box-shadow: 0 2px 5px #090b1020; font-size: 12px; font-weight: 600; line-height: 18px; white-space: nowrap; }
.home-promo-action:hover { background: #f4e9fc; }
.home-promo-close { position: absolute; top: 0; right: 10px; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border-radius: 7px; }
.home-promo-close:hover { background: #090b100d; }
.home-promo-close .icon { width: 16px; height: 16px; }
.home-promo button:focus-visible { outline-color: #090b10; outline-offset: 2px; }
@media (max-width: 1000px) { .home-header { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 16px; padding-bottom: 0; } .home-auth { grid-column: 2; grid-row: 1; border-left: 0; padding-left: 0; } .home-nav { grid-column: 1 / -1; grid-row: 2; width: 100%; margin-left: 0; border-top: 1px solid #ffffff0a; padding-block: 6px; } }
@media (max-width: 680px) { .home-header { padding-inline: 16px; } .home-nav { gap: 20px; } .home-nav a { font-size: 13px; } .home-auth { gap: 4px; } .home-auth-button { padding-inline: 10px; } .home-promo { padding: 10px 48px; } .home-promo-message { font-size: 12px; } .home-promo-close { right: 2px; } }
@media (max-width: 680px) { .site-nav-panel { right: 12px; width: calc(100vw - 24px); grid-template-columns: 1fr; gap: 20px; padding: 14px; border-radius: 16px; } .site-nav-list { gap: 0; } .site-nav-entry { min-height: 60px; } .site-nav-symbol { width: 42px; height: 42px; border-radius: 11px; } }
@media (prefers-reduced-motion: reduce) { .home-nav a, .site-nav-entry { transition: none; } }