/* CSS global de base.html (head) — extrait du template (07/2026).
Zéro tag Django ici : toute valeur dynamique reste dans base.html. */
/* Empêche les transitions au chargement (évite le flash sidebar) */
body.gg-no-trans *{transition:none!important;}
@keyframes astraBtnSpin{to{transform:rotate(360deg)}}
@keyframes astraGradientShift{
0%{background-position:0% 50%}
50%{background-position:100% 50%}
100%{background-position:0% 50%}
}
@keyframes islandBoot{
0%{
opacity:0;
transform:translateY(-14px) scale(.94,.9);
filter:blur(8px);
}
55%{
opacity:1;
transform:translateY(2px) scale(1.01,.995);
filter:blur(0);
}
100%{
opacity:1;
transform:translateY(0) scale(1);
filter:blur(0);
}
}
@keyframes islandIdlePulse{
0%,100%{box-shadow:var(--gg-shadow-soft)}
50%{box-shadow:0 18px 38px rgba(2,6,23,.14)}
}
@keyframes astraBubbleIn{
0% {opacity:0;transform:translateY(36px) scale(.78);}
38% {opacity:1;transform:translateY(-14px) scale(1.06);}
55% {transform:translateY(7px) scale(.95);}
70% {transform:translateY(-5px) scale(1.025);}
82% {transform:translateY(3px) scale(.988);}
91% {transform:translateY(-1px) scale(1.006);}
100%{opacity:1;transform:translateY(0) scale(1);}
}
@keyframes astraBubbleOut{
0% {opacity:1;transform:translateY(0) scale(1);}
20% {transform:translateY(-9px) scale(1.03);}
45% {opacity:.7;transform:translateY(16px) scale(.94);}
100%{opacity:0;transform:translateY(36px) scale(.78);}
}
@keyframes astraBtnPop{
0% {transform:scale(1);}
22% {transform:scale(.68);}
50% {transform:scale(1.24);}
68% {transform:scale(.91);}
84% {transform:scale(1.10);}
100%{transform:scale(1.06);}
}
/* Astra button visible sur toutes les pages connectées */
body.gg-auth #astra-nav-btn{display:inline-flex!important;}
/* ── Event Island pill — petit indicateur d'état dans la navbar ── */
.ei-pill{
display:inline-flex; align-items:center; gap:8px;
padding:6px 12px 6px 10px;
border-radius:999px;
background:rgba(255,255,255,.65);
backdrop-filter:blur(14px);
border:1px solid rgba(11,18,32,.10);
color:#0b1220;
font-family:'DM Sans', system-ui, sans-serif;
font-size:11px;
text-decoration:none;
line-height:1;
max-width:200px;
transition:background .18s ease, border-color .18s ease, transform .15s ease, box-shadow .18s ease, opacity .25s ease;
cursor:pointer;
}
.ei-pill.ei-pill-hidden{ opacity:0; pointer-events:none; transform:translateY(-4px); }
.ei-pill:hover{
background:#fff;
border-color:rgba(79,70,229,.40);
color:#0b1220;
transform:translateY(-1px);
box-shadow:0 4px 14px rgba(49,46,129,.12);
text-decoration:none;
}
.ei-pill-icon{
font-size:14px; line-height:1; flex-shrink:0;
width:22px; height:22px;
display:inline-flex; align-items:center; justify-content:center;
border-radius:50%;
background:rgba(11,18,32,.06);
}
.ei-pill-text{
display:inline-flex; align-items:baseline; gap:6px;
min-width:0;
}
.ei-pill-label{
font-size:9px;
letter-spacing:.12em;
text-transform:uppercase;
font-weight:700;
color:rgba(11,18,32,.50);
white-space:nowrap;
}
.ei-pill-value{
font-size:12px;
font-weight:700;
color:#0b1220;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
max-width:120px;
}
/* Verdict variants */
.ei-pill.verdict-aligned .ei-pill-icon{ background:rgba(34,197,94,.18); color:#16a34a; }
.ei-pill.verdict-aligned .ei-pill-value{ color:#15803d; }
.ei-pill.verdict-drifting .ei-pill-icon{ background:rgba(251,191,36,.20); color:#b45309; }
.ei-pill.verdict-drifting .ei-pill-value{ color:#92400e; }
.ei-pill.verdict-divergent .ei-pill-icon{ background:rgba(248,113,113,.20); color:#b91c1c; }
.ei-pill.verdict-divergent .ei-pill-value{ color:#991b1b; }
.ei-pill.verdict-challenge .ei-pill-icon{ background:rgba(124,58,237,.18); color:#6d28d9; }
.ei-pill.verdict-challenge .ei-pill-value{ color:#5b21b6; }
@media (max-width:720px){
.ei-pill-label{ display:none; }
.ei-pill{ padding:6px 10px 6px 8px; max-width:130px; }
}
/* ── Arc 30j pill (réutilise .ei-pill) : mouvement du score DS sur 30 jours,
métrique distincte de l'alignement. Clic → popover détail. ── */
.arc-pill-wrap{ position:relative; display:inline-flex; }
.arc-pill.dir-up .ei-pill-icon{ background:rgba(34,197,94,.18); color:#16a34a; }
.arc-pill.dir-up .ei-pill-value{ color:#15803d; }
.arc-pill.dir-down .ei-pill-icon{ background:rgba(248,113,113,.18); color:#b91c1c; }
.arc-pill.dir-down .ei-pill-value{ color:#991b1b; }
.arc-pill.dir-flat .ei-pill-icon{ background:rgba(100,116,139,.16); color:#475569; }
.arc-pill.dir-flat .ei-pill-value{ color:#475569; }
.arc-pop{
position:absolute; top:calc(100% + 8px); right:0; z-index:60;
min-width:228px; max-width:280px;
background:rgba(255,255,255,.97); backdrop-filter:blur(16px);
border:1px solid rgba(11,18,32,.12); border-radius:14px;
box-shadow:0 16px 40px rgba(49,46,129,.18);
padding:12px 13px; font-family:'DM Sans',system-ui,sans-serif; color:#0b1220;
}
.arc-pop[hidden]{ display:none; }
.arc-pop__head{ display:flex; align-items:baseline; justify-content:space-between; gap:8px; margin-bottom:6px; }
.arc-pop__title{ font-size:10px; letter-spacing:.10em; text-transform:uppercase; font-weight:700; color:rgba(11,18,32,.55); }
.arc-pop__scores{ font-size:12px; font-weight:700; color:#0b1220; white-space:nowrap; }
.arc-pop__row{ display:flex; align-items:flex-start; gap:8px; margin-top:7px; }
.arc-pop__lbl{ font-size:9px; letter-spacing:.08em; text-transform:uppercase; font-weight:700; color:rgba(11,18,32,.45); flex-shrink:0; width:52px; padding-top:3px; }
.arc-pop__chips{ display:flex; flex-wrap:wrap; gap:4px; }
.arc-chip{ font-size:11px; padding:2px 8px; border-radius:999px; background:rgba(11,18,32,.05); border:1px solid rgba(11,18,32,.08); white-space:nowrap; }
.arc-pop__row.is-emerged .arc-chip{ background:rgba(34,197,94,.10); border-color:rgba(34,197,94,.22); }
.arc-pop__row.is-dormant .arc-chip{ opacity:.7; }
.arc-pop__cta{ display:inline-block; margin-top:10px; font-size:11px; font-weight:600; color:#4f46e5; text-decoration:none; }
.arc-pop__cta:hover{ text-decoration:underline; }
#astra-nav-btn:hover{transform:scale(1.08);}
/* ── Astra chat panel — floating dark bubble ── */
.astra-nav-chat{display:none;}
body.gg-auth .astra-nav-chat{
display:flex;
flex-direction:column;
position:fixed;
bottom:28px;
right:28px;
top:auto;
left:auto;
width:420px;
max-height:560px;
border-radius:28px;
background:linear-gradient(160deg, rgba(255,255,255,.82) 0%, rgba(220,222,232,.68) 55%, rgba(205,208,222,.60) 100%);
backdrop-filter:blur(44px) saturate(190%);
-webkit-backdrop-filter:blur(44px) saturate(190%);
border:1px solid rgba(255,255,255,.65);
box-shadow:0 20px 56px rgba(0,0,0,.14), inset 0 1px 0 rgba(255,255,255,.90);
overflow:hidden;
pointer-events:none;
opacity:0;
transform:translateY(36px) scale(.78);
z-index:1200;
}
body.gg-auth .astra-nav-chat::after{
content:"";
position:absolute;
top:0;
left:20px;
right:20px;
height:1px;
background:linear-gradient(90deg, transparent, rgba(255,255,255,.14), transparent);
pointer-events:none;
}
/* Comptes connectés : la cloche de notifications va tout à gauche et l'orbe
Astra tout à droite (les pills, quand présentes, se répartissent entre). */
body.gg-auth:not(.gg-home-public) .gg-navbar-right{
flex: 1 1 auto;
justify-content: space-between;
}
/* ── Dynamic Island Navbar — toutes les pages connectées ── */
body.gg-auth:not(.gg-home-public) #mainNavbar{
position:relative!important;
overflow:visible!important;
transition:
width .65s cubic-bezier(.22,1,.36,1),
margin-left .65s cubic-bezier(.22,1,.36,1),
border-radius .48s cubic-bezier(.22,1,.36,1),
min-height .38s cubic-bezier(.22,1,.36,1),
box-shadow .5s ease,
filter .35s ease;
transform-origin:center center;
will-change:width,margin-left,border-radius;
}
/* ── Event Island expanded — forme squircle ── */
body.gg-auth:not(.gg-home-public) #mainNavbar.island-event-open{
border-radius:28px !important;
min-height:88px !important;
width: 340px !important;
margin-left: calc(230px + (100vw - 230px) / 2 - 170px) !important;
cursor:default;
background:rgba(255,255,255,.94) !important;
box-shadow:0 8px 32px rgba(15,23,42,.12) !important;
}
body.sidebar-collapsed.gg-auth:not(.gg-home-public) #mainNavbar.island-event-open{
margin-left: calc(60px + (100vw - 60px) / 2 - 170px) !important;
}
body.gg-auth:not(.gg-home-public) #mainNavbar.island-event-open .gg-navbar-lang,
body.gg-auth:not(.gg-home-public) #mainNavbar.island-event-open .gg-navbar-right,
body.gg-auth:not(.gg-home-public) #mainNavbar.island-event-open .navbar-brand,
body.gg-auth:not(.gg-home-public) #mainNavbar.island-event-open .navbar-collapse{
opacity:0;
pointer-events:none;
transition:opacity .18s ease;
}
.event-island-content{
display:none;
position:absolute;
inset:0;
padding:0 20px;
align-items:center;
gap:14px;
opacity:0;
transform:scale(.90) translateY(4px);
transition:opacity .28s ease .14s, transform .32s cubic-bezier(.22,1,.36,1) .14s;
pointer-events:none;
z-index:6;
}
body.gg-auth:not(.gg-home-public) #mainNavbar.island-event-open .event-island-content{
display:flex;
opacity:1;
transform:scale(1) translateY(0);
pointer-events:auto;
}
.ei-dot{
width:10px;height:10px;border-radius:50%;
flex-shrink:0;
box-shadow:0 0 8px 2px currentColor;
transition:background .2s;
}
.ei-left{display:flex;align-items:center;gap:10px;flex:1;min-width:0;}
.ei-info{display:flex;flex-direction:column;gap:1px;min-width:0;}
.ei-label{
font-size:.62rem;font-weight:700;letter-spacing:.10em;
text-transform:uppercase;color:#94a3b8;
}
.ei-title{
font-size:.92rem;font-weight:800;color:#0b1220;
letter-spacing:-.02em;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
max-width:280px;
}
.ei-right{
display:flex;flex-direction:column;align-items:flex-end;gap:1px;
flex-shrink:0;
}
.ei-time{
font-size:.88rem;font-weight:800;color:#0b1220;
letter-spacing:-.01em;font-variant-numeric:tabular-nums;
}
.ei-date{font-size:.70rem;color:#64748b;font-weight:600;}
.ei-today-badge{
display:inline-block;padding:1px 7px;border-radius:999px;
background:rgba(14,165,233,.14);color:#0284c7;
font-size:.62rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase;
margin-top:2px;
}
.ei-empty{
font-size:.82rem;color:#64748b;font-weight:600;
text-align:center;width:100%;
}
.ei-close-btn{
width:24px;height:24px;border-radius:50%;
border:1px solid rgba(15,23,42,.10);
background:rgba(15,23,42,.06);
color:#64748b;font-size:.68rem;
display:flex;align-items:center;justify-content:center;
cursor:pointer;flex-shrink:0;
transition:background .15s,color .15s;
}
.ei-close-btn:hover{background:rgba(15,23,42,.12);color:#0b1220;}
.event-island-content.is-empty{
justify-content:center;
text-align:center;
}
.event-island-content.is-empty .ei-left{
justify-content:center;
flex:none;
}
.event-island-content.is-empty .ei-info{
align-items:center;
}
.event-island-content.is-empty .ei-title{
max-width:none;
}
.event-island-content.is-empty .ei-right{
display:none;
}
/* ── Notification Island — quand on reçoit un message ── */
body.gg-auth:not(.gg-home-public) #mainNavbar.island-notification-open{
border-radius:28px !important;
min-height:70px !important;
width: 360px !important;
margin-left: calc(230px + (100vw - 230px) / 2 - 180px) !important;
cursor:pointer;
background:rgba(255,255,255,.94) !important;
box-shadow:0 8px 32px rgba(15,23,42,.12) !important;
}
body.sidebar-collapsed.gg-auth:not(.gg-home-public) #mainNavbar.island-notification-open{
margin-left: calc(60px + (100vw - 60px) / 2 - 180px) !important;
}
body.gg-auth:not(.gg-home-public) #mainNavbar.island-notification-open .gg-navbar-lang,
body.gg-auth:not(.gg-home-public) #mainNavbar.island-notification-open .gg-navbar-right,
body.gg-auth:not(.gg-home-public) #mainNavbar.island-notification-open .navbar-brand,
body.gg-auth:not(.gg-home-public) #mainNavbar.island-notification-open .navbar-collapse{
opacity:0;
pointer-events:none;
transition:opacity .18s ease;
}
.notification-island-content{
display:none;
position:absolute;
inset:0;
padding:0 14px 0 12px;
align-items:center;
gap:12px;
opacity:0;
transform:scale(.92) translateY(4px);
transition:opacity .28s ease .14s, transform .32s cubic-bezier(.22,1,.36,1) .14s;
pointer-events:none;
z-index:7;
}
body.gg-auth:not(.gg-home-public) #mainNavbar.island-notification-open .notification-island-content{
display:flex;
opacity:1;
transform:scale(1) translateY(0);
pointer-events:auto;
}
.ni-avatar{
width:40px;height:40px;border-radius:50%;
flex-shrink:0;
display:inline-flex;align-items:center;justify-content:center;
background:linear-gradient(135deg,#a78bfa 0%,#60a5fa 100%);
color:#fff;font-size:1rem;font-weight:900;
box-shadow:0 4px 12px rgba(96,165,250,.3);
position:relative;overflow:hidden;
}
.ni-avatar img{width:100%;height:100%;object-fit:cover;border-radius:50%;}
.ni-avatar::after{
content:'';position:absolute;top:-2px;right:-2px;
width:11px;height:11px;border-radius:50%;
background:#22c55e;border:2px solid #fff;
animation:niDotPulse 1.2s ease-in-out infinite;
}
@keyframes niDotPulse{
0%,100%{ transform:scale(1);opacity:1; }
50% { transform:scale(1.25);opacity:.6; }
}
.ni-info{display:flex;flex-direction:column;gap:1px;flex:1;min-width:0;}
.ni-kicker{
font-size:.58rem;font-weight:900;letter-spacing:.14em;text-transform:uppercase;
color:#7c3aed;
display:inline-flex;align-items:center;gap:6px;
}
.ni-kicker i{font-size:.6rem;}
.ni-title{
font-size:.88rem;font-weight:800;color:#0b1220;
letter-spacing:-.01em;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
max-width:220px;
}
.ni-title .ni-actor{
color:#0b1220;
font-weight:900;
}
.ni-body{
font-size:.7rem;color:#64748b;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
max-width:220px;margin-top:1px;
}
.ni-close{
/* Le pill se ferme automatiquement : on masque le bouton close */
display:none !important;
}
body.gg-auth:not(.gg-home-public) #mainNavbar.island-awake{
/* boot animation retiré — évite l'impression de rechargement à chaque page */
}
body.gg-auth:not(.gg-home-public) #mainNavbar.island-transitioning{
filter:brightness(1.07) saturate(1.14);
}
@keyframes islandPress{
0% {transform:scaleX(1) scaleY(1);}
28% {transform:scaleX(.972) scaleY(.91);}
58% {transform:scaleX(1.014) scaleY(1.022);}
78% {transform:scaleX(.996) scaleY(.996);}
100%{transform:scaleX(1) scaleY(1);}
}
body.gg-auth:not(.gg-home-public) #mainNavbar.island-press{
animation:islandPress .38s cubic-bezier(.22,1,.36,1) forwards;
}
@keyframes islandIdleDynamic{
0%,100%{box-shadow:var(--gg-shadow-soft);}
50%{box-shadow:0 8px 40px rgba(14,165,233,.18),0 0 90px rgba(139,92,246,.07);}
}
@keyframes orbIdlePulse{
0%,100%{box-shadow:0 4px 14px rgba(2,6,23,.36),inset 0 0 0 1px rgba(147,197,253,.22);}
50%{box-shadow:0 4px 28px rgba(109,40,217,.50),0 0 36px rgba(139,92,246,.26),inset 0 0 0 1px rgba(167,139,250,.44);}
}
/* idle animations retirées — évite les effets visuels automatiques */
.gg-navbar > .container{
display:flex;
align-items:center;
justify-content:flex-end;
gap:16px;
width:100%;
max-width:100%;
position:relative;
padding-inline:14px 10px;
}
.gg-navbar .navbar-brand{
flex:0 0 auto;
white-space:nowrap;
}
body.gg-auth:not(.gg-home-public) .gg-navbar .navbar-brand{
display:none;
}
.gg-navbar .navbar-collapse{
flex:1 1 auto;
min-width:0;
display:flex !important;
align-items:center;
justify-content:flex-start;
width:auto;
padding-right:0;
}
body.gg-auth:not(.gg-home-public) .gg-navbar .navbar-collapse{
display:none !important;
}
.gg-navbar .navbar-collapse .navbar-nav{
display:flex;
align-items:center;
flex-direction:row;
flex-wrap:nowrap;
gap:2px;
white-space:nowrap;
margin-right:0;
padding-left:0;
}
.gg-navbar .navbar-collapse .nav-item{
flex-shrink:0;
}
.gg-navbar .navbar-collapse .nav-link{
white-space:nowrap;
}
/* État actif : section courante (classe .active + aria-current posés côté template) */
.gg-navbar .navbar-collapse .nav-link.active,
.gg-navbar .navbar-collapse .nav-link[aria-current="page"]{
color:#3b82f6;
font-weight:600;
}
/* Repos : on centre FR + avatar dans la barre resserrée (plus de margin-left
auto qui les collait à droite en laissant un vide à gauche). Les îlots
event/notif sont position:absolute inset:0 → insensibles à ce justify,
ils continuent de remplir la barre quand ils s'ouvrent. */
body.gg-auth:not(.gg-home-public) #mainNavbar .container{
justify-content:center;
}
body.gg-auth:not(.gg-home-public) .gg-navbar .gg-navbar-lang{
margin-left:0;
margin-right:2px;
}
.gg-ds-side-nav{
display:none;
}
body.gg-auth:not(.gg-home-public) .gg-ds-side-nav{
position:fixed;
left:0;
top:0;
bottom:0;
height:100vh;
width:230px;
z-index:1039;
display:flex;
flex-direction:column;
align-items:stretch;
gap:4px;
padding:68px 10px 20px;
border-radius:0;
background:linear-gradient(180deg, #03060e 0%, #020509 100%);
border:none;
border-right:1px solid rgba(255,255,255,.07);
box-shadow:4px 0 32px rgba(2,6,23,.50);
transition:width .36s cubic-bezier(.22,1,.36,1),
opacity .22s ease,
transform .34s cubic-bezier(.22,1,.36,1);
overflow-x:hidden;
overflow-y:auto;
-webkit-overflow-scrolling:touch;
}
/* ── Bouton toggle collapse — position:fixed pour ne pas être coupé par overflow:hidden ── */
#sidebarToggleBtn{
position:fixed;
top:80px;
left:217px; /* bord droit du sidebar expanded */
width:28px;
height:28px;
border-radius:50%;
background:#111827;
border:1.5px solid rgba(255,255,255,.18);
box-shadow:0 2px 12px rgba(0,0,0,.55);
color:rgba(148,163,184,.90);
font-size:10px;
cursor:pointer;
display:flex;
align-items:center;
justify-content:center;
z-index:1100;
transition:left .36s cubic-bezier(.22,1,.36,1),
background .18s,color .18s,
transform .36s cubic-bezier(.22,1,.36,1);
}
#sidebarToggleBtn:hover{
background:#1e3a5f;
color:#ffffff;
border-color:rgba(96,165,250,.40);
box-shadow:0 0 0 3px rgba(96,165,250,.12), 0 4px 14px rgba(0,0,0,.50);
}
/* ── ÉTAT COLLAPSÉ — spécificité égale pour écraser la règle width:230px ── */
body.sidebar-collapsed.gg-auth:not(.gg-home-public) .gg-ds-side-nav{
width:60px;
}
body.sidebar-collapsed #sidebarToggleBtn{
left:47px; /* bord droit du sidebar collapsed */
transform:rotate(180deg);
}
body.sidebar-collapsed .gg-ds-side-nav-label{
opacity:0;
max-width:0;
pointer-events:none;
}
/* ── Sélecteur de langue dans la sidebar (déplacé depuis la navbar) ── */
.gg-ds-side-nav-lang{ position:relative; width:100%; }
.gg-ds-side-nav-lang .lang-side-trigger{
width:100%;
cursor:pointer;
background:transparent;
font-family:inherit;
}
.gg-ds-side-nav-lang .gg-ds-side-nav-label{
display:flex;
align-items:center;
gap:6px;
}
.gg-ds-side-nav-lang .lang-side-current{
font-size:.72rem;
font-weight:800;
letter-spacing:.04em;
color:#60a5fa;
}
.gg-ds-side-nav-lang .lang-side-chevron{
width:9px;
height:6px;
margin-left:auto;
flex-shrink:0;
color:rgba(148,163,184,.75);
transition:transform .2s ease;
}
.gg-ds-side-nav-lang .lang-picker.open .lang-side-chevron{ transform:rotate(180deg); }
/* dropdown : ouvre vers le HAUT (le picker est bas dans la sidebar) */
.gg-ds-side-nav-lang .lang-dropdown{
top:auto;
bottom:calc(100% + 8px);
left:0;
right:auto;
transform-origin:bottom left;
min-width:170px;
}
/* collapsé : icône seule, dropdown en flyout à droite */
body.sidebar-collapsed .gg-ds-side-nav-lang .lang-side-chevron{ display:none; }
body.sidebar-collapsed .gg-ds-side-nav-lang .lang-dropdown{
left:calc(100% + 10px);
bottom:0;
}
/* La sidebar a overflow-x:hidden (clip le flyout collapsé). On libère
l'overflow uniquement le temps qu'un picker est ouvert. */
body.gg-auth:not(.gg-home-public) .gg-ds-side-nav:has(.lang-picker.open){
overflow:visible;
}
/* Section labels */
.gg-ds-side-nav-section{
padding:10px 16px 3px;
font-size:.55rem;
font-weight:900;
letter-spacing:.18em;
text-transform:uppercase;
color:rgba(148,163,184,.55);
overflow:hidden;
white-space:nowrap;
transition:opacity .22s ease, max-height .22s ease, padding .22s ease;
max-height:32px;
}
body.sidebar-collapsed .gg-ds-side-nav-section{
opacity:0;
max-height:0;
padding:0;
pointer-events:none;
}
body.sidebar-collapsed .gg-ds-side-nav-link{
justify-content:center;
padding:0 !important;
gap:0;
}
body.sidebar-collapsed .gg-ds-side-nav-link:hover{
transform:scale(1.10) !important;
}
/* Tooltip au hover sur icône (sidebar collapsed) */
body.sidebar-collapsed .gg-ds-side-nav-link:hover::after{
content:attr(data-label);
position:absolute;
left:66px;
top:50%;
transform:translateY(-50%);
background:#1e293b;
color:rgba(255,255,255,.92);
font-size:12px;
font-weight:700;
padding:5px 12px;
border-radius:8px;
white-space:nowrap;
border:1px solid rgba(255,255,255,.12);
box-shadow:0 4px 16px rgba(0,0,0,.45);
pointer-events:none;
z-index:9999;
}
body.gg-auth:not(.gg-home-public) .gg-ds-side-nav-link{
display:flex;
align-items:center;
justify-content:flex-start;
gap:14px;
position:relative;
width:100%;
min-height:40px;
padding:0 14px;
border-radius:10px;
color:rgba(210,220,240,.80);
background:transparent;
border:1px solid transparent;
box-shadow:none;
text-decoration:none;
transition:transform .18s ease,color .18s ease,opacity .18s ease,background .18s ease,border-color .18s ease,box-shadow .18s ease,justify-content .32s,padding .32s,gap .32s;
opacity:.90;
}
body.gg-auth:not(.gg-home-public) .gg-ds-side-nav-link:hover{
color:#ffffff;
transform:translateX(3px);
opacity:1;
background:rgba(255,255,255,.08);
border-color:rgba(255,255,255,.10);
}
body.gg-auth:not(.gg-home-public) .gg-ds-side-nav-link i{
width:20px;
text-align:center;
font-size:.95rem;
line-height:1;
flex-shrink:0;
color:rgba(148,163,184,.80);
}
body.gg-auth:not(.gg-home-public) .gg-ds-side-nav-link:hover i{
color:#94a3b8;
}
/* ── État actif : section courante (is-active posé côté template) ── */
body.gg-auth:not(.gg-home-public) .gg-ds-side-nav-link.is-active{
color:#ffffff;
opacity:1;
background:rgba(96,165,250,.14);
border-color:rgba(96,165,250,.24);
}
body.gg-auth:not(.gg-home-public) .gg-ds-side-nav-link.is-active::before{
content:"";
position:absolute;
left:0;
top:50%;
transform:translateY(-50%);
width:3px;
height:20px;
border-radius:0 3px 3px 0;
background:#60a5fa;
}
body.gg-auth:not(.gg-home-public) .gg-ds-side-nav-link.is-active i,
body.gg-auth:not(.gg-home-public) .gg-ds-side-nav-link.is-active svg{
color:#60a5fa;
}
body.gg-auth:not(.gg-home-public) .gg-ds-side-nav-label{
display:block;
font-size:.84rem;
font-weight:700;
letter-spacing:-.01em;
color:currentColor;
white-space:nowrap;
overflow:hidden;
max-width:160px;
transition:opacity .22s ease, max-width .32s cubic-bezier(.22,1,.36,1);
}
body.gg-auth:not(.gg-home-public) .gg-ds-side-nav-mobile-only{
display:none;
}
/* ── Astra sidebar morphing logo ── */
.astra-morph-wrap{
width:22px;height:22px;flex-shrink:0;
display:flex;align-items:center;justify-content:center;
}
.astra-morph-svg{
filter:drop-shadow(0 0 4px rgba(96,165,250,.45));
animation:astraSpin 12s linear infinite;
}
@keyframes astraSpin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
.astra-sidebar-link:hover .astra-morph-svg{
filter:drop-shadow(0 0 8px rgba(167,139,250,.7)) drop-shadow(0 0 16px rgba(96,165,250,.5));
}
body.sidebar-collapsed .astra-morph-wrap{
width:20px;height:20px;
}
body.gg-auth:not(.gg-home-public) .gg-ds-side-nav-profile{
margin-top:auto;
border-top:1px solid rgba(255,255,255,.06);
padding-top:12px;
}
body.gg-auth:not(.gg-home-public) .gg-ds-side-nav form{
width:100%;
}
body.gg-auth:not(.gg-home-public) .gg-ds-side-nav-logout{
border:none;
cursor:pointer;
text-align:left;
color:#fca5a5;
}
body.gg-auth:not(.gg-home-public) .gg-ds-side-nav-logout i,
body.gg-auth:not(.gg-home-public) .gg-ds-side-nav-logout .gg-ds-side-nav-label{
color:#fca5a5;
}
body.gg-auth:not(.gg-home-public) .gg-ds-side-nav-logout:hover{
background:rgba(239,68,68,.10);
border-color:rgba(248,113,113,.20);
color:#fecaca;
}
body.gg-auth:not(.gg-home-public) .gg-ds-side-nav-logout:hover i,
body.gg-auth:not(.gg-home-public) .gg-ds-side-nav-logout:hover .gg-ds-side-nav-label{
color:#fecaca;
}
body.gg-auth:not(.gg-home-public) .gg-ds-side-nav-logout i{
color:#fca5a5;
display:inline-flex;
align-items:center;
justify-content:center;
opacity:1;
}
body.gg-auth:not(.gg-home-public) .gg-ds-side-nav-logout::after{
content:"";
position:absolute;
inset:auto 14px 8px 14px;
height:1px;
background:linear-gradient(90deg, transparent, rgba(248,113,113,.42), transparent);
opacity:.55;
pointer-events:none;
}
/* ── "Mettre à niveau" : texte en dégradé animé, sans fond ── */
body.gg-auth:not(.gg-home-public) .gg-ds-side-nav-upgrade{
background:transparent !important;
text-decoration:none !important;
}
body.gg-auth:not(.gg-home-public) .gg-ds-side-nav-upgrade i,
body.gg-auth:not(.gg-home-public) .gg-ds-side-nav-upgrade .gg-ds-side-nav-label{
background:linear-gradient(90deg,#fbbf24,#f97316,#ec4899,#8b5cf6,#38bdf8,#fbbf24);
background-size:300% 100%;
-webkit-background-clip:text;
background-clip:text;
-webkit-text-fill-color:transparent;
color:transparent !important;
animation:ggUpgradeTextFlow 5s linear infinite;
font-weight:900;
}
body.gg-auth:not(.gg-home-public) .gg-ds-side-nav-upgrade:hover i,
body.gg-auth:not(.gg-home-public) .gg-ds-side-nav-upgrade:hover .gg-ds-side-nav-label{
animation-duration:2s;
filter:drop-shadow(0 0 6px rgba(236,72,153,.45));
}
@keyframes ggUpgradeTextFlow{
0%{background-position:0% 50%}
100%{background-position:300% 50%}
}
body.gg-auth:not(.gg-home-public).gg-logout-ignite .navbar-brand,
body.gg-auth:not(.gg-home-public).gg-logout-ignite .gg-ds-side-nav-profile i,
body.gg-auth:not(.gg-home-public).gg-logout-ignite .gg-ds-side-nav-profile .gg-ds-side-nav-label{
color:#fff7ed !important;
text-shadow:
0 0 10px rgba(251,146,60,.88),
0 0 22px rgba(249,115,22,.72),
0 0 34px rgba(239,68,68,.54);
animation:ggLogoutIgnite .55s ease-in-out infinite alternate;
}
body.gg-auth:not(.gg-home-public).gg-logout-ignite .navbar-brand::after{
content:"";
position:absolute;
left:-10px;
right:-10px;
bottom:-6px;
height:18px;
background:
radial-gradient(circle at 14% 100%, rgba(251,146,60,.95), transparent 28%),
radial-gradient(circle at 34% 100%, rgba(239,68,68,.82), transparent 30%),
radial-gradient(circle at 58% 100%, rgba(251,191,36,.78), transparent 28%),
radial-gradient(circle at 82% 100%, rgba(249,115,22,.82), transparent 30%);
filter:blur(6px);
opacity:.95;
pointer-events:none;
animation:ggLogoutFlame .55s ease-in-out infinite alternate;
}
@keyframes ggLogoutIgnite{
from{transform:translateY(0) scale(1)}
to{transform:translateY(-1px) scale(1.02)}
}
@keyframes ggLogoutFlame{
from{transform:scaleX(.96) translateY(0);opacity:.72}
to{transform:scaleX(1.04) translateY(-2px);opacity:1}
}
.gg-navbar-right{
flex:0 0 auto;
margin-left:8px;
z-index:2;
display:flex;
align-items:center;
gap:.6rem;
}
body.gg-auth:not(.gg-home-public) #mainNavbar .navbar-collapse,
body.gg-auth:not(.gg-home-public) #mainNavbar .navbar-brand,
body.gg-auth:not(.gg-home-public) #mainNavbar .navbar-nav,
body.gg-auth:not(.gg-home-public) #mainNavbar .nav-item,
body.gg-auth:not(.gg-home-public) #mainNavbar .lang-picker{
transition:opacity .26s ease,transform .36s cubic-bezier(.22,1,.36,1),filter .26s ease;
transform-origin:top center;
}
body.gg-auth:not(.gg-home-public) #mainNavbar.astra-open{
box-shadow:none;
width:170px !important;
/* centré dans l'espace droit du sidebar élargi */
margin-left: calc(230px + (100vw - 230px) / 2 - 85px) !important;
}
body.sidebar-collapsed.gg-auth:not(.gg-home-public) #mainNavbar.astra-open{
/* centré dans l'espace droit du sidebar réduit */
margin-left: calc(60px + (100vw - 60px) / 2 - 85px) !important;
}
body.gg-auth:not(.gg-home-public) #mainNavbar.astra-open .gg-navbar-lang{
opacity:0;
pointer-events:none;
transition:opacity .4s ease;
}
/* astra-open : la navbar se réduit à une bulle de 170px → on ne garde QUE
l'orbe Astra. Le pill verdict, l'Arc et la cloche sont retirés du flux,
sinon le cluster déborde de la bulle (centré, il sortait des 2 côtés). */
body.gg-auth:not(.gg-home-public) #mainNavbar.astra-open #eventIslandPill,
body.gg-auth:not(.gg-home-public) #mainNavbar.astra-open #arcPillWrap,
body.gg-auth:not(.gg-home-public) #mainNavbar.astra-open #bc-hud,
body.gg-auth:not(.gg-home-public) #mainNavbar.astra-open #navNotificationsButton{
display:none !important;
}
body.gg-auth:not(.gg-home-public) #mainNavbar.community-toast-active{
width:min(440px, calc(100vw - 28px));
max-width:calc(100vw - 28px);
min-height:72px;
padding:10px 14px;
border-radius:30px;
}
body.gg-auth:not(.gg-home-public) #mainNavbar.community-toast-active .navbar-brand,
body.gg-auth:not(.gg-home-public) #mainNavbar.community-toast-active .navbar-collapse,
body.gg-auth:not(.gg-home-public) #mainNavbar.community-toast-active .gg-navbar-lang,
body.gg-auth:not(.gg-home-public) #mainNavbar.community-toast-active .gg-navbar-right,
body.gg-auth:not(.gg-home-public) #mainNavbar.community-toast-active .event-island-content{
opacity:0;
pointer-events:none;
}
body.gg-auth:not(.gg-home-public) #mainNavbar.community-toast-active .community-toast-shell{
opacity:1;
pointer-events:auto;
transform:translate(-50%, -50%) scale(1);
}
body.gg-auth:not(.gg-home-public) #mainNavbar.community-toast-expanded{
width:min(360px, calc(100vw - 24px));
min-height:360px;
border-radius:34px;
padding:16px;
}
body.gg-auth:not(.gg-home-public) #mainNavbar.community-toast-expanded .community-toast-shell{
width:min(320px, calc(100vw - 56px));
min-height:320px;
}
.community-toast-shell{
position:absolute;
left:50%;
top:50%;
width:min(392px, calc(100vw - 56px));
min-height:52px;
display:flex;
align-items:stretch;
justify-content:center;
opacity:0;
pointer-events:none;
transform:translate(-50%, -50%) scale(.88);
transition:opacity .24s ease, transform .32s cubic-bezier(.22,1,.36,1), width .34s cubic-bezier(.22,1,.36,1), min-height .34s cubic-bezier(.22,1,.36,1);
z-index:8;
}
.community-toast-card{
width:100%;
min-height:100%;
border:1px solid rgba(148,163,184,.24);
background:
radial-gradient(circle at top left, rgba(96,165,250,.22), transparent 42%),
linear-gradient(135deg, rgba(9,18,37,.96), rgba(18,35,68,.93));
color:#f8fbff;
box-shadow:0 22px 56px rgba(2,6,23,.34);
backdrop-filter:blur(18px);
border-radius:28px;
padding:12px 14px;
display:flex;
flex-direction:column;
gap:10px;
cursor:pointer;
overflow:hidden;
transition:border-radius .28s ease, padding .28s ease, box-shadow .28s ease;
}
#mainNavbar.community-toast-expanded .community-toast-card{
border-radius:30px;
padding:16px;
cursor:default;
}
.community-toast-head{
display:flex;
align-items:center;
gap:12px;
min-width:0;
}
.community-toast-avatar{
width:38px;
height:38px;
border-radius:14px;
background:linear-gradient(135deg, rgba(96,165,250,.95), rgba(167,139,250,.95));
color:#fff;
display:inline-flex;
align-items:center;
justify-content:center;
font-weight:800;
font-size:.95rem;
flex-shrink:0;
box-shadow:0 10px 22px rgba(96,165,250,.26);
}
.community-toast-copy{
min-width:0;
display:flex;
flex-direction:column;
gap:3px;
flex:1;
}
.community-toast-eyebrow{
font-size:.68rem;
letter-spacing:.16em;
text-transform:uppercase;
color:rgba(226,232,240,.62);
font-weight:700;
}
.community-toast-title{
min-width:0;
font-size:.98rem;
font-weight:800;
color:#fff;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
.community-toast-subtitle{
font-size:.79rem;
color:rgba(226,232,240,.78);
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
.community-toast-preview{
margin:0;
font-size:.86rem;
line-height:1.45;
color:rgba(241,245,249,.96);
display:-webkit-box;
-webkit-line-clamp:1;
-webkit-box-orient:vertical;
overflow:hidden;
}
.community-toast-hint{
font-size:.72rem;
color:rgba(191,219,254,.76);
font-weight:700;
}
.community-toast-body{
display:none;
}
#mainNavbar.community-toast-expanded .community-toast-preview,
#mainNavbar.community-toast-expanded .community-toast-hint{
display:none;
}
#mainNavbar.community-toast-expanded .community-toast-body{
display:flex;
flex-direction:column;
gap:10px;
min-height:0;
flex:1;
}
.community-toast-full{
margin:0;
flex:1;
min-height:0;
overflow-y:auto;
overflow-x:hidden;
padding:14px;
border-radius:22px;
background:rgba(255,255,255,.08);
border:1px solid rgba(191,219,254,.12);
color:#f8fbff;
white-space:pre-wrap;
word-break:break-word;
overflow-wrap:anywhere;
line-height:1.58;
font-size:.92rem;
}
.community-toast-meta{
display:flex;
align-items:center;
justify-content:space-between;
gap:10px;
font-size:.78rem;
color:rgba(191,219,254,.76);
}
.community-toast-close{
width:34px;
height:34px;
border:none;
border-radius:12px;
background:rgba(255,255,255,.08);
color:#fff;
font-size:1rem;
line-height:1;
display:inline-flex;
align-items:center;
justify-content:center;
cursor:pointer;
flex-shrink:0;
}
.community-toast-close:hover{
background:rgba(255,255,255,.16);
}
.community-toast-message-line{
font-weight:600;
}
@keyframes communityToastPulse {
0% { box-shadow:0 18px 40px rgba(2,6,23,.30); }
50% { box-shadow:0 24px 56px rgba(59,130,246,.26); }
100% { box-shadow:0 18px 40px rgba(2,6,23,.30); }
}
@keyframes discordToastPulse {
0% { box-shadow:0 18px 40px rgba(2,6,23,.30); }
50% { box-shadow:0 24px 56px rgba(88,101,242,.36); }
100% { box-shadow:0 18px 40px rgba(2,6,23,.30); }
}
#mainNavbar.community-toast-active .community-toast-card{
animation:communityToastPulse 1.6s ease-in-out infinite;
}
#mainNavbar.community-toast-active .community-toast-card.is-discord{
animation:discordToastPulse 1.6s ease-in-out infinite;
background:linear-gradient(160deg, rgba(88,101,242,.97), rgba(71,82,196,.94));
}
.community-toast-card.is-discord .community-toast-eyebrow{
color:#fff;
display:inline-flex;align-items:center;gap:6px;
}
.community-toast-card.is-discord .community-toast-eyebrow::before{
content:"";
width:14px;height:14px;border-radius:50%;
background:url("data:image/svg+xml;utf8,") center/80% no-repeat #5865F2;
flex-shrink:0;
}
.community-toast-card.is-discord .community-toast-avatar{
background:linear-gradient(135deg, #7983f5, #5865f2);
color:#fff;
border:1px solid rgba(255,255,255,.3);
}
#mainNavbar.community-toast-expanded .community-toast-card{
animation:none;
}
@media (max-width: 767.98px){
body.gg-auth:not(.gg-home-public) #mainNavbar.community-toast-active{
width:calc(100vw - 18px);
max-width:calc(100vw - 18px);
}
body.gg-auth:not(.gg-home-public) #mainNavbar.community-toast-expanded{
width:calc(100vw - 18px);
min-height:340px;
}
body.gg-auth:not(.gg-home-public) #mainNavbar.community-toast-expanded .community-toast-shell{
width:calc(100vw - 48px);
min-height:300px;
}
}
/* Open state: animation class handles visibility */
body.gg-auth .astra-nav-chat.astra-bubble-in{
animation:astraBubbleIn .75s cubic-bezier(.22,1,.36,1) forwards;
pointer-events:auto;
}
body.gg-auth .astra-nav-chat.astra-bubble-out{
animation:astraBubbleOut .42s ease forwards;
pointer-events:none;
}
.astra-nav-chat-inner{
padding:24px 26px 22px;
height:100%;
min-height:0;
display:flex;flex-direction:column;gap:12px;
opacity:0;
transform:translateY(-6px);
transition:opacity .22s ease .14s, transform .22s ease .14s;
}
body.gg-auth.astra-panel-open .astra-nav-chat-inner{
opacity:1;
transform:translateY(0);
}
.astra-nav-chat-head{display:flex;align-items:center;gap:12px;}
.astra-nav-chat-title{font-size:.95rem;font-weight:800;color:rgba(0,0,0,.80);letter-spacing:-.01em;}
.astra-nav-chat-sub{font-size:.73rem;color:rgba(0,0,0,.38);margin-top:1px;}
.astra-nav-chat .ds-island-status{
display:inline-flex;align-items:center;gap:6px;
padding:5px 10px;border-radius:999px;
background:rgba(0,0,0,.06);border:1px solid rgba(0,0,0,.10);
color:rgba(0,0,0,.50);font-size:.73rem;white-space:nowrap;
}
.astra-nav-chat .ds-island-status-dot{
width:7px;height:7px;border-radius:50%;flex-shrink:0;
background:radial-gradient(circle,#c084fc,#7c3aed);
box-shadow:0 0 8px rgba(192,132,252,.5);
}
.astra-nav-chat .ds-island-chip-row{display:flex;flex-wrap:wrap;gap:7px;}
.astra-nav-chat .ds-island-chip{
display:inline-flex;align-items:center;gap:5px;padding:5px 11px;
border-radius:999px;background:rgba(0,0,0,.06);
border:1px solid rgba(0,0,0,.10);font-size:.74rem;color:rgba(0,0,0,.66);font-weight:600;
}
.astra-nav-chat .ds-island-empty{
padding:12px 16px;border-radius:14px;
background:rgba(0,0,0,.04);border:1px dashed rgba(0,0,0,.12);
color:rgba(0,0,0,.38);font-size:.84rem;line-height:1.65;text-align:center;
flex-shrink:0;
}
.astra-nav-chat .ds-island-messages{
flex:1 1 auto;
min-height:200px;
max-height:320px;
display:flex;flex-direction:column;gap:8px;padding-right:3px;
overflow-y:auto;
}
.astra-nav-chat .ds-island-messages::-webkit-scrollbar{width:3px;}
.astra-nav-chat .ds-island-messages::-webkit-scrollbar-thumb{background:rgba(0,0,0,.14);border-radius:3px;}
.astra-nav-chat .ds-island-msg{
max-width:88%;padding:10px 14px;border-radius:16px;
font-size:.86rem;line-height:1.6;white-space:pre-wrap;
}
.astra-nav-chat .ds-island-msg.user{
align-self:flex-end;
background:rgba(100,60,210,.15);border:1px solid rgba(120,80,220,.22);color:rgba(0,0,0,.80);
}
.astra-nav-chat .ds-island-msg.assistant{
align-self:flex-start;
background:rgba(255,255,255,.60);border:1px solid rgba(0,0,0,.08);color:rgba(0,0,0,.76);
}
.astra-nav-chat .ds-island-msg.loading{
display:inline-flex;align-items:center;justify-content:center;
min-width:58px;min-height:50px;padding:10px 12px;
}
.astra-nav-chat .ds-island-loader{
width:24px;height:24px;border-radius:50%;
background:conic-gradient(from 0deg,#60a5fa,#a78bfa,#f472b6,#60a5fa);
animation:astraBtnSpin 1.15s linear infinite;
position:relative;
box-shadow:0 0 0 1px rgba(160,120,255,.12),0 8px 18px rgba(109,40,217,.16);
}
.astra-nav-chat .ds-island-loader::before{
content:"";position:absolute;inset:3px;border-radius:50%;
background:radial-gradient(circle,#080f26,#0a1840);
}
.astra-nav-chat .ds-island-loader::after{
content:"✦";position:absolute;inset:0;display:flex;
align-items:center;justify-content:center;
color:#dbeafe;font-size:10px;text-shadow:0 0 10px rgba(147,197,253,.7);
}
.astra-nav-chat .ds-island-typing-cursor{
display:inline-block;width:8px;height:1.05em;margin-left:2px;
vertical-align:-0.15em;border-radius:999px;
background:rgba(167,139,250,.70);
animation:astraTypingBlink .9s ease-in-out infinite;
}
@keyframes astraTypingBlink{
0%,45%{opacity:1}
55%,100%{opacity:.12}
}
.astra-nav-chat .ds-island-compose{display:flex;gap:8px;align-items:center;}
.astra-nav-chat .ds-island-input{
flex:1;height:38px;min-height:38px !important;max-height:38px !important;
border-radius:999px;border:1px solid rgba(0,0,0,.12) !important;
background:rgba(255,255,255,.65) !important;color:rgba(0,0,0,.80) !important;
font-family:"Manrope",sans-serif;font-size:.85rem;
padding:0 16px !important;outline:none;resize:none;
line-height:38px;overflow:hidden;
}
.astra-nav-chat .ds-island-input::placeholder{color:rgba(0,0,0,.28);font-size:.82rem;}
.astra-nav-chat .ds-island-input:focus{
border-color:rgba(120,80,220,.30) !important;background:rgba(255,255,255,.80) !important;
box-shadow:0 0 0 3px rgba(120,80,220,.08);
}
.astra-nav-chat .ds-island-send{
width:36px !important;height:36px !important;border:none;border-radius:999px !important;cursor:pointer;
background:linear-gradient(135deg,#6d28d9,#be185d,#1d4ed8) !important;
color:#fff;font-size:.9rem;flex-shrink:0;
box-shadow:0 4px 12px rgba(109,40,217,.36);
transition:transform .15s ease,opacity .15s;
}
.astra-nav-chat .ds-island-send:hover{transform:translateY(-1px);opacity:.88;}
.astra-nav-chat .ds-island-send:disabled{opacity:.38;cursor:default;transform:none;}
.astra-nav-chat .ds-island-foot{font-size:.68rem;color:rgba(0,0,0,.26);letter-spacing:.03em;text-align:center;}
body.gg-auth:not(.gg-home-public) #astra-nav-btn[aria-expanded="true"]{
transform:scale(1.06);
box-shadow:0 10px 26px rgba(109,40,217,.34),inset 0 0 0 1px rgba(216,180,254,.30)!important;
}
body.gg-auth:not(.gg-home-public) #astra-nav-btn[aria-expanded="true"] > span:first-child{
animation-duration:2.2s!important;
}
@media (max-width: 991.98px){
.gg-navbar > .container{
display:flex;
flex-wrap:wrap;
gap:10px;
position:relative;
}
.gg-navbar .navbar-collapse{
width:100%;
flex-basis:100%;
padding-right:0;
}
body.gg-auth:not(.gg-home-public) .gg-ds-side-nav{
display:none;
}
.gg-navbar .navbar-collapse .navbar-nav{
flex-direction:column;
align-items:flex-start;
white-space:normal;
margin-right:0;
}
body.digital-self-page .gg-navbar .gg-navbar-lang{
margin-left:auto;
}
body.gg-auth:not(.gg-home-public) .container-fluid{
display:flex;
flex-direction:column;
align-items:center;
padding-left: 0;
padding-right: 0;
}
body.gg-auth:not(.gg-home-public) .container-fluid > *{
width:100%;
max-width:100%;
margin-left:auto;
margin-right:auto;
}
body.gg-auth:not(.gg-home-public) #mainNavbar.astra-open,
body.sidebar-collapsed.gg-auth:not(.gg-home-public) #mainNavbar.astra-open,
body.gg-auth:not(.gg-home-public) #mainNavbar.island-event-open,
body.sidebar-collapsed.gg-auth:not(.gg-home-public) #mainNavbar.island-event-open{
width:100vw !important;
margin-left:0 !important;
margin-right:0 !important;
min-height:58px !important;
border-radius:0 !important;
}
body.gg-auth:not(.gg-home-public) #mainNavbar.astra-open .navbar-brand{
opacity:1 !important;
pointer-events:auto !important;
}
.gg-navbar-right{
flex:0 0 auto;
margin-left:0;
}
body.gg-auth .astra-nav-chat{
left:14px;
right:14px;
width:auto;
max-width:332px;
margin:0 auto;
border-radius:22px;
max-height:72vh;
bottom:18px;
}
.astra-nav-chat-inner{
padding:18px 18px 16px;
gap:10px;
}
.astra-nav-chat .ds-island-messages{
min-height:140px;
max-height:200px;
}
.astra-nav-chat .ds-island-input{
min-height:38px!important;
max-height:38px!important;
}
.astra-nav-chat .ds-island-send{
width:40px!important;
height:40px!important;
align-self:flex-end;
}
body.gg-auth:not(.gg-home-public) .gg-ds-side-nav{
display:none !important;
width:min(264px, calc(100vw - 48px));
left:0;
transform:none;
opacity:0;
pointer-events:none;
z-index:1405;
padding-top:78px;
transition:transform .28s cubic-bezier(.22,1,.36,1), opacity .2s ease;
}
body.gg-auth:not(.gg-home-public) #sidebarToggleBtn{
display:none !important;
}
body.gg-auth:not(.gg-home-public).mobile-auth-nav-open .gg-ds-side-nav{
display:flex !important;
transform:none;
opacity:1;
pointer-events:auto;
}
body.gg-auth:not(.gg-home-public) .gg-ds-side-nav-mobile-only{
display:flex !important;
}
.gg-mobile-sidebar-scrim{
display:block;
position:fixed;
inset:0;
background:rgba(2,6,23,.42);
backdrop-filter:blur(2px);
-webkit-backdrop-filter:blur(2px);
opacity:0;
pointer-events:none;
transition:opacity .2s ease;
z-index:1400;
}
body.gg-auth:not(.gg-home-public).mobile-auth-nav-open .gg-mobile-sidebar-scrim{
opacity:1;
pointer-events:auto;
}
}
@media (max-width: 991.98px){
.gg-navbar{
width:100vw !important;
margin:0 0 12px !important;
border-radius:0 !important;
}
body.gg-auth:not(.gg-home-public) .gg-navbar,
body.sidebar-collapsed.gg-auth:not(.gg-home-public) .gg-navbar{
width:100vw !important;
margin-left:0 !important;
margin-right:0 !important;
min-height:58px;
}
.gg-navbar > .container{
min-height:58px;
padding:10px 10px !important;
display:grid;
grid-template-columns:auto 1fr auto;
align-items:center;
gap:10px;
}
.gg-navbar .navbar-toggler{
order:0;
display:inline-flex;
align-items:center;
justify-content:center;
width:42px;
height:42px;
margin:0;
padding:0;
border:1px solid rgba(148,163,184,.32);
border-radius:14px;
box-shadow:0 10px 24px rgba(15,23,42,.08);
color:#475569;
flex-shrink:0;
}
.gg-navbar .navbar-toggler:focus{
box-shadow:0 0 0 3px rgba(99,102,241,.14);
}
.gg-navbar .navbar-toggler-icon{
width:1.15rem;
height:1.15rem;
}
.gg-navbar .navbar-brand{
order:1;
margin:0 !important;
justify-self:center;
font-size:17px !important; /* agrandi, en px pour une taille identique partout (reste en 900) */
line-height:1;
max-width:100%;
overflow:hidden;
text-overflow:ellipsis;
}
/* Centrage RÉEL du brand sur les pages visiteur : la grille auto/1fr/auto
le centrait dans l'espace APRÈS le toggler (→ décalé ~21px à droite).
Colonnes latérales égales (1fr) = brand vraiment centré. En authed le
brand est masqué, donc on ne touche qu'aux pages publiques. */
body:not(.gg-auth) .gg-navbar > .container{ grid-template-columns:1fr auto 1fr; }
body:not(.gg-auth) .gg-navbar .navbar-toggler{ justify-self:start; }
/* Navbar visiteur moins épaisse sur mobile (~56px au lieu de ~74).
- row-gap:0 supprime le +10px fantôme : le .navbar-collapse fermé
(display:block, h=0) crée une 2e rangée de grille séparée par le
gap de 10px. Le menu ouvert reste en rangée 2 (juste collé).
- padding en !important (la règle de base l'est aussi).
min-height:0 (pas de height fixe) pour ne pas rogner le menu ouvert. */
body:not(.gg-auth) .gg-navbar > .container{ min-height:0; padding:5px 10px !important; row-gap:0; }
body:not(.gg-auth) .gg-navbar .navbar-toggler{ width:38px; height:38px; }
/* Marge haute uniforme sur les pages visiteur NON-home (la home a déjà son
propre gap car sa navbar est position:fixed; top ~14px). Ici les navbars
sont position:relative et collées en haut → on ajoute le même gap pour
qu'elles soient toutes positionnées de la même manière. margin-top seul
(pas la shorthand) pour préserver les marges latérales de la pill. */
body:not(.gg-auth):not(.gg-home-public) #mainNavbar{ margin-top:12px !important; }
/* Home : sa navbar est position:fixed (donc margin:auto ne la centre pas →
elle restait collée à gauche et plus haute). On l'aligne sur les autres :
centrée (left/right 16), même hauteur réduite (min-height:0) et même gap
(~12px). Réduire la hauteur n'enlève que du vide → ne masque pas le
contenu (qui a déjà son padding sous la navbar fixe). */
body.gg-home-public:not(.gg-auth) #mainNavbar{
min-height:0 !important; top:12px !important;
left:16px !important; right:16px !important; width:auto !important;
padding-top:1px !important; padding-bottom:1px !important; /* = hauteur des autres (52px) */
}
/* La navbar home porte des classes "island" (gg-island-open) qui la
rendent plus haute et changent la taille du brand. On force les mêmes
valeurs que les autres pages visiteur (container compact + brand 17px). */
body.gg-home-public:not(.gg-auth) #mainNavbar > .container{ min-height:0 !important; }
body.gg-home-public:not(.gg-auth) #mainNavbar .navbar-brand{ font-size:17px !important; }
body.gg-auth:not(.gg-home-public) .gg-navbar .navbar-brand{
/* Navbar connectée : pas de brand (la barre est déjà chargée — cloche,
pill Arc, orbe Astra). Affiché, il était tronqué en « G.. ». */
display:none;
}
.gg-navbar .gg-navbar-lang,
.gg-navbar-right{
display:none !important;
}
body.gg-auth:not(.gg-home-public) .gg-navbar > .container > .gg-navbar-right{
display:flex !important;
order:3;
align-items:center;
justify-content:flex-end;
min-width:42px;
margin-left:8px;
}
body.gg-auth:not(.gg-home-public) .gg-navbar > .container > .gg-navbar-right #astra-nav-btn{
display:inline-flex !important;
width:42px;
height:42px;
}
body.gg-auth:not(.gg-home-public) .gg-navbar > .container > .gg-navbar-right .profile-menu,
body.gg-auth:not(.gg-home-public) .gg-navbar > .container > .gg-navbar-right .profile-trigger,
body.gg-auth:not(.gg-home-public) .gg-navbar > .container > .gg-navbar-right .profile-dropdown{
width:auto;
}
.gg-navbar .navbar-collapse{
order:3;
grid-column:1 / -1;
width:100%;
flex-basis:auto;
display:block !important;
max-height:0;
overflow:hidden;
opacity:0;
visibility:hidden;
margin-top:0;
padding:0;
transition:max-height .24s ease, opacity .18s ease, margin-top .18s ease;
}
.gg-navbar .navbar-collapse.show{
max-height:min(78vh, 520px);
opacity:1;
visibility:visible;
margin-top:4px;
}
.gg-navbar .navbar-collapse > .navbar-nav{
width:100%;
}
.gg-navbar .navbar-collapse.show::before{
content:"";
display:block;
height:1px;
margin:0 4px 12px;
background:rgba(148,163,184,.18);
}
.gg-navbar .navbar-collapse .navbar-nav{
gap:8px;
width:100%;
margin:0;
}
.gg-navbar .navbar-collapse .nav-item{
width:100%;
}
.gg-navbar .navbar-collapse .nav-link{
width:100%;
justify-content:flex-start;
padding:.8rem .95rem !important;
border-radius:16px;
background:rgba(255,255,255,.56);
box-shadow:inset 0 1px 0 rgba(255,255,255,.52);
font-size:.92rem !important;
}
body.digital-self-page .gg-navbar .gg-navbar-lang{
margin:0;
}
.gg-navbar .gg-mobile-panel{
display:flex;
flex-direction:column;
gap:12px;
padding:0 4px 4px;
}
.gg-navbar .gg-mobile-toolbar{
display:flex;
align-items:center;
gap:10px;
width:100%;
justify-content:center;
flex-wrap:wrap;
}
.gg-navbar .gg-mobile-toolbar .gg-navbar-lang{
display:block !important;
flex:0 0 100%;
position:relative;
}
.gg-navbar .gg-mobile-toolbar .lang-trigger{
min-height:40px;
padding:8px 12px 8px 10px;
font-size:.82rem;
margin:0 auto;
}
.gg-navbar .gg-mobile-toolbar .lang-current{
min-width:2ch;
text-align:center;
}
.gg-navbar .gg-mobile-toolbar .lang-dropdown{
left:50%;
right:auto;
transform:translateX(-50%);
transform-origin:top center;
min-width:190px;
}
.gg-navbar .gg-mobile-toolbar .gg-navbar-right{
display:flex !important;
flex:1 1 auto;
min-width:0;
justify-content:flex-end;
gap:8px !important;
margin-left:0;
}
.gg-navbar .gg-mobile-toolbar .btn-nav-cta{
width:100%;
justify-content:center;
padding:10px 14px;
font-size:.82rem !important;
}
.gg-navbar .gg-mobile-toolbar #astra-nav-btn{
margin-left:auto;
}
.gg-navbar .gg-mobile-toolbar .profile-menu,
.gg-navbar .gg-mobile-toolbar .profile-trigger,
.gg-navbar .gg-mobile-toolbar .profile-dropdown{
width:100%;
}
.gg-navbar .gg-mobile-toolbar .profile-trigger{
justify-content:center;
min-height:42px;
}
}
:root{
--gg-bg-night:#060816;
--gg-bg-deep:#0d1630;
--gg-bg-void:#02040b;
--gg-surface:rgba(255,255,255,.64);
--gg-surface-strong:rgba(255,255,255,.78);
--gg-surface-soft:rgba(255,255,255,.42);
--gg-border:rgba(176, 204, 255, .22);
--gg-border-strong:rgba(191, 219, 254, .34);
--gg-text:#06111f;
--gg-text-muted:#4b5b75;
--gg-heading:#020817;
--gg-accent:#76a9ff;
--gg-accent-strong:#2f6fff;
--gg-shadow:0 24px 70px rgba(2, 6, 23, .20);
--gg-shadow-soft:0 16px 40px rgba(2, 6, 23, .12);
}
html, body {
overflow-x: hidden;
max-width: 100%;
}
html{
background:
radial-gradient(900px circle at 8% 10%, rgba(96,165,250,.18), transparent 45%),
radial-gradient(820px circle at 88% 14%, rgba(15,23,42,.66), transparent 44%),
linear-gradient(180deg, #050816 0%, #0a1330 52%, #06101f 100%);
}
body{
position: relative;
min-height: 100vh;
color: var(--gg-text);
font-family: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
background:
radial-gradient(1200px circle at 12% 0%, rgba(148,163,184,.10), transparent 45%),
radial-gradient(960px circle at 86% 10%, rgba(96,165,250,.15), transparent 42%),
linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.04));
}
/* Défensif : un titre avec un mot très long ne déborde jamais
(ex. « confidentialité » sur les pages légales en mobile étroit). */
h1, h2, h3, h4, h5, h6{ overflow-wrap: break-word; }
body::before{
content:"";
position: fixed;
inset: 0;
pointer-events: none;
z-index: 0;
background:
linear-gradient(120deg, rgba(255,255,255,.08), transparent 28%, transparent 72%, rgba(255,255,255,.05)),
radial-gradient(circle at top, rgba(255,255,255,.08), transparent 35%);
opacity: .65;
}
* { box-sizing: border-box; }
h1, h2, h3, h4, h5, h6, .navbar-brand{
font-family: "Space Grotesk", "Manrope", sans-serif;
color: var(--gg-heading);
}
a{
color: var(--gg-accent-strong);
}
.container-fluid,
.container{
position: relative;
z-index: 1;
}
.notifications-list{
max-height: 320px;
overflow-y: auto;
}
.notification-item-actions{
display: flex;
gap: .75rem;
align-items: center;
}
.notification-bell-btn{
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border: none;
border-radius: 50%;
background: transparent;
color: rgba(11,18,32,0.50);
font-size: 1.05rem;
cursor: pointer;
flex-shrink: 0;
transition: background .18s ease, color .18s ease;
}
.notification-bell-btn:hover{
background: rgba(15,23,42,.06);
}
.notification-bell-count{
position: absolute;
top: .1rem;
right: .02rem;
min-width: 16px;
height: 16px;
padding: 0 4px;
line-height: 16px;
border-radius: 999px;
background: #ef4444;
color: #fff;
font-size: .62rem;
font-weight: 700;
text-align: center;
border: 2px solid #fff;
box-sizing: content-box;
pointer-events: none;
}
.notification-bell-btn .fa-bell{
transition: transform .18s ease, color .18s ease;
}
.notification-bell-btn:hover .fa-bell{
transform: rotate(-8deg);
color: var(--gg-accent-strong);
}
.notification-bell-dot{
position: absolute;
top: .48rem;
left: 1rem;
width: .7rem;
height: .7rem;
border-radius: 999px;
background: #ef4444;
border: 2px solid #fff;
box-shadow: 0 0 0 0 rgba(239,68,68,.32);
opacity: 0;
transform: scale(.65);
transition: opacity .18s ease, transform .18s ease;
pointer-events: none;
}
.notification-bell-dot.is-visible{
opacity: 1;
transform: scale(1);
animation: notificationPulse 1.6s ease-in-out infinite;
}
.notification-bell-btn.has-new .fa-bell{
color: #2563eb;
animation: bellRing .5s ease;
}
.gg-notifications-modal .modal-content{
overflow: hidden;
border: 1px solid var(--gg-border-strong);
border-radius: 28px;
box-shadow: var(--gg-shadow);
background: var(--gg-surface-strong);
backdrop-filter: blur(22px);
}
.gg-notifications-modal .modal-header,
.gg-notifications-modal .modal-footer{
border-color: var(--gg-border);
}
.gg-notifications-modal .modal-header{
padding: 1rem 1.15rem;
background: linear-gradient(180deg, rgba(255,255,255,.68), rgba(255,255,255,.48));
}
.gg-notifications-modal .modal-footer{
padding: .9rem 1.15rem;
}
.gg-modal-notification-meta{
display: flex;
justify-content: space-between;
align-items: center;
gap: .75rem;
padding: .9rem 1rem;
border-bottom: 1px solid var(--gg-border);
background: rgba(255,255,255,.34);
}
.gg-modal-unread-pill{
display: inline-flex;
align-items: center;
gap: .45rem;
padding: .42rem .75rem;
border-radius: 999px;
background: rgba(47,111,255,.12);
color: #1647bc;
font-size: .82rem;
font-weight: 700;
}
.gg-modal-notification-row{
display: grid;
grid-template-columns: auto 1fr auto;
gap: .9rem;
align-items: flex-start;
padding: 1rem;
border-bottom: 1px solid rgba(176, 204, 255, .14);
transition: background-color .18s ease;
}
.gg-modal-notification-row:hover{
background: rgba(255,255,255,.44);
}
.gg-modal-notification-row.is-unread{
background: linear-gradient(90deg, rgba(47,111,255,.10), rgba(255,255,255,.54));
}
.gg-modal-notification-icon{
width: 2.35rem;
height: 2.35rem;
border-radius: 16px;
display: inline-flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, rgba(96,165,250,.18), rgba(15,23,42,.10));
color: var(--gg-heading);
}
.gg-modal-notification-title{
font-weight: 800;
color: var(--gg-heading);
}
.gg-modal-notification-body{
margin-top: .12rem;
color: var(--gg-text-muted);
font-size: .92rem;
}
.gg-modal-notification-date{
margin-top: .45rem;
color: rgba(72, 95, 133, .72);
font-size: .79rem;
}
.gg-modal-notification-actions{
display: flex;
align-items: center;
gap: .8rem;
flex-wrap: wrap;
justify-content: flex-end;
}
@keyframes notificationPulse{
0%, 100% { box-shadow: 0 0 0 0 rgba(239,68,68,.28); }
60% { box-shadow: 0 0 0 8px rgba(239,68,68,0); }
}
@keyframes bellRing{
0% { transform: rotate(0deg); }
20% { transform: rotate(18deg); }
40% { transform: rotate(-14deg); }
60% { transform: rotate(10deg); }
80% { transform: rotate(-6deg); }
100% { transform: rotate(0deg); }
}
.gg-navbar{
margin: 14px auto 18px;
width: min(900px, calc(100% - 280px));
border-radius: 22px;
background: rgba(255,255,255,.52) !important;
backdrop-filter: blur(24px);
border: 1px solid var(--gg-border) !important;
box-shadow: var(--gg-shadow-soft);
position: relative;
z-index: 1040;
transition: padding .3s ease;
}
/* Toutes les pages connectées ont désormais le même contenu de navbar :
FR + les pills (verdict d'alignement / Arc) + l'orbe Astra — la nav vit
dans la sidebar. Pleine largeur = slab vide ; 700 laisse respirer le
cluster sans redevenir un slab. Sûr pour les overlays : l'îlot
event/notif aligne son texte à gauche + ellipsis, toast centré. */
body.gg-auth:not(.gg-home-public) .gg-navbar{
width: min(700px, calc(100% - 300px));
margin-left: calc(230px + max(18px, (100vw - 230px - min(700px, calc(100% - 300px))) / 2));
min-height: 64px;
border-radius: 999px;
transition: width .32s cubic-bezier(.22,1,.36,1), margin-left .32s cubic-bezier(.22,1,.36,1);
}
/* Navbar recentrée quand la sidebar est collapsée */
body.sidebar-collapsed.gg-auth:not(.gg-home-public) .gg-navbar{
width: min(700px, calc(100% - 120px));
margin-left: calc(60px + max(18px, (100vw - 60px - min(700px, calc(100% - 120px))) / 2));
}
.gg-navbar > .container{
border-radius: inherit;
overflow: visible;
}
body.gg-auth:not(.gg-home-public) .container-fluid{
padding-left: 248px;
padding-right: 24px;
transition: padding-left .32s cubic-bezier(.22,1,.36,1);
}
body.sidebar-collapsed.gg-auth:not(.gg-home-public) .container-fluid{
padding-left: 78px;
}
/* ── Footer décalé selon la sidebar ── */
body.gg-auth:not(.gg-home-public) footer{
margin-left: 230px;
transition: margin-left .36s cubic-bezier(.22,1,.36,1);
}
body.sidebar-collapsed.gg-auth:not(.gg-home-public) footer{
margin-left: 60px;
}
/* ── État initial : navbar complète, hauteur réduite ── */
.gg-navbar {
padding-top: 1px !important;
padding-bottom: 1px !important;
}
body.gg-auth:not(.gg-home-public) .gg-navbar{
padding-top: 3px !important;
padding-bottom: 3px !important;
}
.gg-navbar .navbar-brand {
font-size: .95rem;
}
.gg-navbar .nav-link {
padding: .38rem .78rem !important;
font-size: .88rem;
}
.gg-navbar .btn-nav-cta {
font-size: .78rem;
padding: 5px 14px;
}
/* ── État scrollé : navbar réduite avec tous les liens ── */
.gg-navbar.gg-scrolled {
padding-top: 1px !important;
padding-bottom: 1px !important;
}
.gg-navbar.gg-scrolled .navbar-brand {
font-size: .82rem;
}
.gg-navbar.gg-scrolled .nav-link {
padding: .28rem .6rem !important;
font-size: .8rem;
}
.gg-navbar.gg-scrolled .btn-nav-cta {
font-size: .74rem;
padding: 4px 12px;
}
.gg-navbar.gg-scrolled .profile-trigger {
padding: .4rem .7rem;
font-size: .82rem;
}
/* ── Hover sur scrolled : taille identique à l'état initial ── */
.gg-navbar.gg-scrolled:hover {
padding-top: 3px !important;
padding-bottom: 3px !important;
}
.gg-navbar.gg-scrolled:hover .navbar-brand {
font-size: .95rem;
}
.gg-navbar.gg-scrolled:hover .nav-link {
padding: .38rem .78rem !important;
font-size: .88rem;
}
.gg-navbar.gg-scrolled:hover .btn-nav-cta {
font-size: .78rem;
padding: 5px 14px;
}
.gg-navbar.gg-scrolled:hover .profile-trigger {
padding: .65rem .95rem;
font-size: 1rem;
}
.gg-navbar .navbar-brand{
font-weight: 800;
letter-spacing: -.03em;
color: var(--gg-heading);
}
.gg-navbar .nav-link{
border-radius: 999px;
padding: .55rem .95rem !important;
color: #1f3658;
font-weight: 700;
transition: background-color .18s ease, color .18s ease, transform .18s ease;
}
.gg-navbar .nav-link:hover{
background: rgba(255,255,255,.56);
color: #0d2444;
transform: translateY(-1px);
}
body.gg-auth:not(.gg-home-public) .gg-navbar > .container{
min-height: 52px;
padding-inline: 16px 14px;
align-items:center;
}
body.gg-auth:not(.gg-home-public) .gg-navbar .gg-navbar-lang .lang-trigger{
min-height: 38px;
padding: .45rem .82rem;
}
body.gg-auth:not(.gg-home-public) .gg-navbar-right{
min-height: 38px;
}
body.gg-auth:not(.gg-home-public) #astra-nav-btn{
width: 38px !important;
height: 38px !important;
}
/* ── CTA nav button ── */
@keyframes ctaShimmer {
0% { background-position: -200% center; }
100% { background-position: 200% center; }
}
@keyframes ctaPulse {
0%, 100% { box-shadow: 0 0 0 0 rgba(124,58,237,.45); }
50% { box-shadow: 0 0 0 8px rgba(124,58,237,.0); }
}
.btn-nav-cta {
display: inline-flex;
align-items: center;
gap: 6px;
background: linear-gradient(100deg, #091225, #11305c, #2f6fff, #11305c, #091225);
background-size: 300% auto;
color: #fff !important;
font-weight: 600;
font-size: .82rem;
border-radius: 999px;
padding: 7px 18px;
text-decoration: none !important;
border: none;
cursor: pointer;
animation: ctaShimmer 3s linear infinite, ctaPulse 2.5s ease-in-out infinite;
transition: transform .2s, box-shadow .2s;
white-space: nowrap;
}
.btn-nav-cta:hover {
transform: translateY(-2px) scale(1.03);
animation: ctaShimmer 1.5s linear infinite;
color: #fff !important;
}
/* ── Navbar visiteur desktop : pill flottante identique sur toutes les
pages publiques (home, fonctionnalités, démo, ...) — cf. CLAUDE.md
Navigation. Portée .gg-public (présent sur toute page non-authed),
plus large que .gg-home-public (home uniquement) d'où venait ce
style à l'origine. Le compense pour .container-fluid ci-dessous
évite que le contenu passe sous la pill fixed. */
@media (min-width: 992px){
body.gg-public .gg-navbar,
body.gg-public .gg-navbar.gg-island,
body.gg-public .gg-navbar.gg-island.gg-island-hidden,
body.gg-public .gg-navbar.gg-island.gg-island-open,
body.gg-public .gg-navbar.gg-island.gg-island-compact,
body.gg-public .gg-navbar.gg-scrolled,
body.gg-public .gg-navbar.gg-scrolled:hover{
position: fixed !important;
top: 14px !important;
left: 0;
right: 0;
z-index: 1200;
width: min(960px, calc(100vw - 32px)) !important;
min-height: 56px !important;
padding-top: 0 !important;
padding-bottom: 0 !important;
margin-inline: auto !important;
border-radius: 999px !important;
transform: none !important;
opacity: 1 !important;
visibility: visible !important;
pointer-events: auto !important;
transition: none !important;
background: linear-gradient(180deg, rgba(255,255,255,.68), rgba(255,255,255,.48)) !important;
border: 1px solid rgba(255,255,255,.72) !important;
box-shadow:
0 10px 28px rgba(112, 129, 190, .10),
inset 0 1px 0 rgba(255,255,255,.92) !important;
backdrop-filter: blur(22px) saturate(155%);
-webkit-backdrop-filter: blur(22px) saturate(155%);
}
body.gg-public .gg-navbar > .container,
body.gg-public .gg-navbar.gg-island .container,
body.gg-public .gg-navbar.gg-scrolled .container,
body.gg-public .gg-navbar.gg-scrolled:hover .container{
min-height: 56px !important;
padding-left: 22px !important;
padding-right: 14px !important;
gap: 14px !important;
transition: none !important;
}
body.gg-public .gg-navbar .navbar-brand,
body.gg-public .gg-navbar.gg-scrolled .navbar-brand,
body.gg-public .gg-navbar.gg-scrolled:hover .navbar-brand{
font-size: .95rem !important;
}
body.gg-public .gg-navbar .nav-link,
body.gg-public .gg-navbar.gg-scrolled .nav-link,
body.gg-public .gg-navbar.gg-scrolled:hover .nav-link{
padding: .38rem .78rem !important;
font-size: .9rem !important;
}
body.gg-public .gg-navbar .btn-nav-cta,
body.gg-public .gg-navbar.gg-scrolled .btn-nav-cta,
body.gg-public .gg-navbar.gg-scrolled:hover .btn-nav-cta{
font-size: .85rem !important;
padding: 7px 16px !important;
}
body.gg-public .gg-navbar .navbar-brand,
body.gg-public .gg-navbar .nav-link,
body.gg-public .gg-navbar .btn-nav-cta,
body.gg-public .gg-navbar .lang-trigger{
transform: none !important;
opacity: 1 !important;
transition: none !important;
}
body.gg-public .gg-navbar .navbar-brand,
body.gg-public .gg-navbar .nav-link{
color: rgba(15, 23, 42, .86) !important;
}
body.gg-public .gg-navbar .nav-link:hover{
color: #111827 !important;
}
body.gg-public .gg-navbar .btn-nav-cta{
background: rgba(255,255,255,.84) !important;
border: 1px solid rgba(15,23,42,.06) !important;
color: #111827 !important;
box-shadow: 0 10px 24px rgba(15,23,42,.06) !important;
}
/* La home gère son propre décalage de contenu via .gg-home-shell
(padding-top:136px, cf. home.html) — ne pas doubler ici. */
body.gg-public:not(.gg-home-page) .container-fluid{
padding-top: 96px;
}
}
.gg-navbar .btn{
border-radius: 999px;
padding-left: 1.1rem;
padding-right: 1.1rem;
box-shadow: 0 14px 34px rgba(2, 6, 23, .16);
}
.profile-menu{
position: relative;
}
.profile-trigger{
position: relative;
display: inline-flex;
align-items: center;
gap: .55rem;
border: 1px solid var(--gg-border);
background: rgba(255,255,255,.48);
border-radius: 999px;
padding: .65rem .95rem;
color: var(--gg-heading);
font-weight: 700;
box-shadow: 0 14px 30px rgba(2, 6, 23, .12);
backdrop-filter: blur(16px);
transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.profile-trigger:hover{
transform: translateY(-1px);
border-color: rgba(96,165,250,.34);
box-shadow: 0 18px 34px rgba(2, 6, 23, .18);
}
.profile-trigger:focus-visible{
outline: 2px solid rgba(96,165,250,.32);
outline-offset: 2px;
}
.profile-avatar-icon{
width: 1.95rem;
height: 1.95rem;
border-radius: 999px;
display: inline-flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, rgba(96,165,250,.16), rgba(15,23,42,.14));
color: #10233f;
}
.profile-trigger-dot{
position: absolute;
top: .45rem;
right: .55rem;
width: .72rem;
height: .72rem;
border-radius: 999px;
background: #ef4444;
border: 2px solid #fff;
box-shadow: 0 0 0 0 rgba(239,68,68,.32);
opacity: 0;
transform: scale(.65);
transition: opacity .18s ease, transform .18s ease;
pointer-events: none;
}
.profile-trigger-dot.is-visible{
opacity: 1;
transform: scale(1);
animation: notificationPulse 1.6s ease-in-out infinite;
}
.profile-trigger-chevron{
transition: transform .24s cubic-bezier(.16,1,.3,1);
}
.profile-menu.open .profile-trigger-chevron{
transform: rotate(180deg);
}
.profile-dropdown{
position: absolute;
top: calc(100% + 12px);
right: 0;
min-width: 220px;
padding: .65rem;
border-radius: 22px;
border: 1px solid var(--gg-border-strong);
background: rgba(255,255,255,.62);
box-shadow: var(--gg-shadow);
backdrop-filter: blur(24px);
opacity: 0;
visibility: hidden;
transform: translateY(-10px) scale(.96);
transform-origin: top right;
transition: opacity .2s ease, transform .24s cubic-bezier(.16,1,.3,1), visibility .2s ease;
z-index: 1080;
}
.profile-menu.open .profile-dropdown{
opacity: 1;
visibility: visible;
transform: translateY(0) scale(1);
}
.profile-dropdown::before{
content: "";
position: absolute;
top: -8px;
right: 22px;
width: 16px;
height: 16px;
background: rgba(255,255,255,.62);
border-top: 1px solid var(--gg-border-strong);
border-left: 1px solid var(--gg-border-strong);
transform: rotate(45deg);
}
.profile-dropdown-link,
.profile-dropdown-logout{
width: 100%;
display: flex;
align-items: center;
gap: .8rem;
border: none;
background: transparent;
border-radius: 16px;
padding: .8rem .9rem;
color: var(--gg-heading);
text-decoration: none;
font-weight: 600;
transition: background-color .18s ease, color .18s ease, transform .18s ease;
}
.profile-dropdown-link:hover,
.profile-dropdown-logout:hover{
background: rgba(255,255,255,.44);
color: var(--gg-heading);
transform: translateX(2px);
}
.profile-dropdown-link i,
.profile-dropdown-logout i{
width: 1rem;
text-align: center;
color: #5f718f;
}
.profile-dropdown-link.has-badge{
justify-content: space-between;
}
.profile-dropdown-link-main{
display: inline-flex;
align-items: center;
gap: .8rem;
}
.profile-dropdown-badge{
min-width: 1.35rem;
height: 1.35rem;
padding: 0 .35rem;
border-radius: 999px;
display: inline-flex;
align-items: center;
justify-content: center;
background: #ef4444;
color: #fff;
font-size: .72rem;
font-weight: 800;
}
.profile-dropdown-divider{
height: 1px;
margin: .35rem 0;
background: rgba(226,232,240,.9);
}
.profile-dropdown-logout{
color: #dc2626;
}
.profile-dropdown-logout i{
color: #dc2626;
}
.profile-dropdown-logout:hover{
background: rgba(254,226,226,.7);
color: #b91c1c;
}
/* ── Language picker ── */
.gg-navbar-lang-mobile{ display:none; }
.gg-navbar .gg-navbar-lang{
position:relative;
z-index:1205;
pointer-events:auto;
}
.lang-picker { position: relative; }
.lang-trigger {
display: flex; align-items: center; gap: 5px;
background: rgba(255,255,255,.34);
border: 1px solid var(--gg-border);
border-radius: 999px;
padding: 5px 10px 5px 8px;
cursor: pointer; font-size: .78rem; font-weight: 600;
color: #35507b; transition: background .18s, border-color .18s;
backdrop-filter: blur(14px);
white-space: nowrap;
}
.lang-trigger:hover { background: rgba(255,255,255,.48); border-color: var(--gg-border-strong); }
.lang-globe { width: 15px; height: 15px; flex-shrink: 0; }
.lang-chevron {
width: 10px; height: 6px; flex-shrink: 0;
transition: transform .25s cubic-bezier(.16,1,.3,1);
}
.lang-picker.open .lang-chevron { transform: rotate(180deg); }
.lang-current { font-size: .75rem; letter-spacing: .04em; }
@keyframes langDrop {
from { opacity: 0; transform: translateY(-6px) scaleY(.93); }
to { opacity: 1; transform: translateY(0) scaleY(1); }
}
.lang-dropdown {
position: absolute; top: calc(100% + 8px); right: 0;
background: rgba(255,255,255,.66);
border: 1px solid var(--gg-border-strong);
border-radius: 14px;
box-shadow: var(--gg-shadow-soft);
backdrop-filter: blur(18px);
padding: 6px;
min-width: 150px;
display: none;
flex-direction: column; gap: 2px;
transform-origin: top right;
z-index: 5000;
}
.lang-picker.open .lang-dropdown {
display: flex;
animation: langDrop .22s cubic-bezier(.16,1,.3,1) both;
}
.lang-opt {
display: flex; align-items: center; gap: 8px;
background: none; border: none; border-radius: 10px;
padding: 8px 10px; cursor: pointer;
font-size: .83rem; font-weight: 600; color: #25406a;
text-align: left; transition: background .14s, color .14s;
width: 100%;
}
.lang-opt:hover { background: rgba(255,255,255,.48); color: var(--gg-accent-strong); }
.lang-opt.active { background: rgba(47,111,255,.10); color: var(--gg-accent-strong); font-weight: 800; }
.lang-flag { font-size: 1rem; }
.page-route-overlay{
position: fixed;
inset: 0;
background:
radial-gradient(circle at 20% 20%, rgba(96,165,250,.22), transparent 28%),
radial-gradient(circle at 80% 18%, rgba(255,255,255,.10), transparent 24%),
linear-gradient(180deg, rgba(6,8,22,.20), rgba(2,4,11,.98));
opacity: 0;
pointer-events: none;
transform: scaleY(0.02);
transform-origin: top center;
transition: opacity .42s ease, transform .48s cubic-bezier(.22,1,.36,1);
z-index: 3000;
}
body.transitioning-to-investments .page-route-overlay{
opacity: 1;
transform: scaleY(1);
}
/* Barre de progression de navigation : feedback au clic sur un lien
interne. Le TTFB serveur est ~1,3 s ; cette barre fait sentir que
"ça charge" plutôt que de fixer l'ancienne page. Déclenchée par
body.gg-route-transitioning — la classe posée par gg_saas.js dans
son handler de clic en phase de CAPTURE (preventDefault avant que
quoi que ce soit d'autre ne voie le clic). Un ancien système
séparé (listener + .is-active) ne se déclenchait donc jamais :
gg_saas.js consommait toujours le clic en premier. */
#gg-nav-progress{
position: fixed; top: 0; left: 0; height: 3px; width: 100%;
transform: scaleX(0); transform-origin: left center;
background: linear-gradient(90deg, #6366f1, #8b5cf6 60%, #0ea5e9);
box-shadow: 0 0 10px rgba(99,102,241,.55);
z-index: 4000; pointer-events: none; opacity: 0;
transition: transform .2s ease, opacity .25s ease;
}
body.gg-route-transitioning #gg-nav-progress{
opacity: 1;
/* monte vite à ~30% puis rampe lentement vers ~90% (indéterminé) tant
que la page n'a pas répondu — jamais 100% avant le vrai chargement. */
animation: ggNavProgress 12s cubic-bezier(.1,.6,.3,1) forwards;
}
@keyframes ggNavProgress{
0%{ transform: scaleX(0.03); }
12%{ transform: scaleX(0.30); }
60%{ transform: scaleX(0.75); }
100%{ transform: scaleX(0.92); }
}
@media (prefers-reduced-motion: reduce){
body.gg-route-transitioning #gg-nav-progress{ animation: none; transform: scaleX(0.85); }
}
/* Logo de transition, centré à l'écran : même déclencheur que la barre
(body.gg-route-transitioning) — aucun délai ajouté par ce logo lui-
même, sa durée de vie = la vraie durée du chargement. */
#gg-nav-logo{
position: fixed; top: 50%; left: 50%;
width: 160px; height: 160px;
transform: translate(-50%, -50%) scale(.9);
opacity: 0;
z-index: 4001; pointer-events: none;
transition: opacity .25s ease, transform .25s ease;
}
#gg-nav-logo img{
width: 100%; height: 100%; object-fit: contain;
filter: drop-shadow(0 10px 24px rgba(15,23,42,.22));
}
body.gg-route-transitioning #gg-nav-logo{
opacity: .8;
transform: translate(-50%, -50%) scale(1);
}
@media (max-width: 767.98px){
.notification-nav-label{
display: none;
}
.notifications-list{
max-height: calc(100vh - 240px);
}
.notification-item-row{
gap: .5rem;
}
.notification-item-actions{
flex-direction: column;
align-items: flex-end;
gap: .25rem;
}
}
@media (max-width: 767.98px){
html,
body,
body.gg-saas{
width:100%;
max-width:100%;
overflow-x:hidden !important;
}
body.gg-saas .page-route-overlay{
inset:0;
width:100%;
max-width:100%;
left:0;
right:0;
margin:0;
}
body.gg-saas .container-fluid,
body.gg-saas .container,
body.gg-saas.gg-auth .container-fluid,
body.gg-saas.gg-public .container-fluid{
width:100%;
max-width:100%;
margin-left:0 !important;
margin-right:0 !important;
padding-left:16px !important;
padding-right:16px !important;
box-sizing:border-box;
}
/* :not(.community-toast-shell) — ce shell est un overlay position:absolute
centré par transform:translate(-50%,-50%). Le neutraliser ici le laissait
ancré à left:50% sans recentrage → il débordait de ~la moitié de sa largeur
hors viewport (overflow horizontal mobile). Les autres overlays (event /
notification island) utilisent inset:0, donc pas concernés. */
body.gg-saas .container-fluid > *:not(.community-toast-shell),
body.gg-saas .container > *:not(.community-toast-shell),
body.gg-saas main,
body.gg-saas [role="main"]{
max-width:100%;
margin-left:0 !important;
margin-right:0 !important;
transform:none !important;
box-sizing:border-box;
}
body.gg-saas .gg-navbar,
body.gg-saas #mainNavbar{
width:calc(100% - 32px) !important;
max-width:none !important;
margin:0 auto 12px !important;
left:auto !important;
right:auto !important;
transform:none !important;
border-radius:22px !important;
box-sizing:border-box;
}
body.gg-saas .gg-navbar > .container,
body.gg-saas #mainNavbar > .container{
width:100%;
max-width:100%;
margin-left:0 !important;
margin-right:0 !important;
padding-left:16px !important;
padding-right:16px !important;
box-sizing:border-box;
}
body.gg-saas .gg-navbar .navbar-collapse,
body.gg-saas .gg-navbar .navbar-nav{
width:100%;
max-width:100%;
margin-left:0 !important;
margin-right:0 !important;
}
}