:root {	
    --img-who-online: url(./images/who_is_online.png);
}

html, [data-theme="light"] {
	--color-user-registered : black;
}
	
[data-theme="dark"] {
	--color-user-registered : white;
}

.shoutbox.offline {
    text-align: center;
    font-size: 1.5em;
    padding: 5px;
    font-weight: bold;
}

p.stat-content.icon-online-list {
	display: flex;
	align-items: center;      
	gap: 1rem;               
	box-sizing: border-box;
}

p.stat-content.icon-online-list::before {
	content: '';
	height: 175px;
	width: 203px;
	flex: 0 0 clamp(90px, calc(90px +(113*((100vw - 250px) / 450))), 203px);       
	background-image: var(--img-who-online);
	background-position: center;
	background-size: contain;
	background-repeat: no-repeat;
}

#userMenuPopover {	
    background-color: var(--color-3);
    border: 1px solid var(--border-color-2);
    border-radius: 6px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
    padding: 8px;
    font-size: 14px;
}

#userMenuPopover ul.userMenu  {	
    list-style: none; 
}

.registered, .reveurs,
.registered:hover, .reveurs:hover,
.registered:focus, .reveurs:focus{color:var(--color-user-registered)}



/* Partners-block
----------------------------------------*/ 
.partners-block {
    background-color: var(--color-1);
    border-bottom: 1px solid var(--color-2);
    clear: both;
    padding: 12px 10px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap; 
    align-items: flex-start;
	justify-content: space-evenly;
	gap: 15px;
	min-height: 145px;
}
.partners-block h3 {
    font-size: 1em;
    border-bottom: none;
    margin-top: 0;
}
.partners-content {
    flex: 0 1 400px;
    text-align: center;   
}
.partners-topsites-content {
    flex: 0 1 160px;
    text-align: center;   
}
.partners-topsites-content a {
    margin: 6px 0;
}
.partners-bigger-content,
.partners-vip-content {
    flex: 0 1 225px;
    text-align: center;   
}
.partners-content img,
.partners-bigger-content img,
.partners-vip-content img  {
    max-width: 100%;
    height: auto;
	margin: 5px;
	transition: filter 0.3s ease;
	filter: drop-shadow(0 0 1px black);
}
.partners-content img:hover,
.partners-bigger-content img:hover,
.partners-vip-content img:hover {
	filter: drop-shadow(0 0 3px white)
			brightness(1.15);
}

/* Correction no idea why it does not work otherwise */
li.header dt, li.header dd {
    text-transform: uppercase !important;
}


/* bouton masqué par défaut */
.profile-dropdown-toggle {
    display: none;
}

.sticky-nav, .rtl .navbar.sticky-nav {
    z-index: 10; /* From 1 to 10 to ensure every dropdpown stays under */
}

/* mobile */
@media (max-width:700px){
    .profile-dropdown-toggle {
        display: inline-block;
        cursor: pointer;
        margin-left: 4px;
    }

    .dropdown.profile-dropdown {
        display: none; /* toggle via JS */
        position: absolute;
        border-radius: 5px;
        padding: 9px 0;
        width: 200px;
        max-width: 90vw; /* pour mobiles étroits */
        box-sizing: border-box;
        z-index: 1;
        animation: unfold 200ms ease-in-out forwards;
        transform-origin: top center;
        overflow: visible; /* jamais de scroll */
        white-space: normal; /* retour à la ligne automatique */
    }

    .dropdown.profile-dropdown .dropdown-contents li {
        list-style: none;
        padding: 4px 12px;
        word-wrap: break-word; /* couper mots trop longs */
        white-space: normal;
    }

    .dropdown.profile-dropdown .dropdown-contents li a {
        display:  inline-block;
        padding: 0;
        text-decoration: none;
        white-space: normal; /* retour à la ligne */
    }

    .dropdown.profile-dropdown .dropdown-contents li a i {
        margin-right: 6px;
    }
}