/* /Components/Account/Pages/ExternalLogin.razor.rz.scp.css */
.login-page[b-6g761o7ism] {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.login-content[b-6g761o7ism] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
}

.login-footer[b-6g761o7ism] {
    text-align: center;
    padding: 1.5rem 1rem;
    margin: 0;
    font-size: 0.8rem;
    color: var(--bs-secondary-color);
}

.external-login-card[b-6g761o7ism] {
    background-color: var(--bs-secondary-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: 12px;
    padding: 3.5rem 2.5rem;
    width: 100%;
    max-width: 440px;
    text-align: center;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}

.external-login-logo[b-6g761o7ism] {
    max-width: 280px;
    width: 100%;
    height: auto;
    margin-bottom: 1.75rem;
}

.external-login-avatar[b-6g761o7ism] {
    width: 88px;
    height: 88px;
    border-radius: 50%;
    object-fit: cover;
    background-color: var(--bs-tertiary-bg);
    margin: 1.75rem auto 1.5rem;
    display: block;
}

.external-login-title[b-6g761o7ism] {
    margin-bottom: 0.5rem;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--bs-body-color);
}

.external-login-subtitle[b-6g761o7ism] {
    color: var(--bs-secondary-color);
    margin-bottom: 1.75rem;
    font-size: 1rem;
}

.external-login-form[b-6g761o7ism] {
    text-align: left;
}

.external-login-submit[b-6g761o7ism] {
    width: 100%;
    background-color: transparent;
    border: 1px solid var(--bs-primary);
    color: var(--bs-primary);
    font-weight: 600;
    padding: 0.65rem 1.5rem;
    border-radius: 6px;
    transition: background-color 0.15s ease, color 0.15s ease;
}

    .external-login-submit:hover[b-6g761o7ism] {
        background-color: var(--bs-primary);
        color: #fff;
    }
/* /Components/Account/Pages/Login.razor.rz.scp.css */
.login-page[b-4for8rjap8] {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.login-content[b-4for8rjap8] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
}

.login-card[b-4for8rjap8] {
    background-color: var(--bs-secondary-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: 12px;
    padding: 3.5rem 2.5rem;
    width: 100%;
    max-width: 440px;
    text-align: center;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}

.login-logo[b-4for8rjap8] {
    max-width: 280px;
    width: 100%;
    height: auto;
    margin-bottom: 1.75rem;
}

.login-tagline[b-4for8rjap8] {
    color: var(--bs-secondary-color);
    margin-bottom: 2rem;
    font-size: 1rem;
}

.login-footer[b-4for8rjap8] {
    text-align: center;
    padding: 1.5rem 1rem;
    margin: 0;
    font-size: 0.8rem;
    color: var(--bs-secondary-color);
}

[b-4for8rjap8] .btn-primary {
    background-color: #5865F2;
    border-color: #5865F2;
    color: #fff;
    font-weight: 600;
    padding: 0.65rem 1.5rem;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

    [b-4for8rjap8] .btn-primary::before {
        content: "";
        width: 20px;
        height: 20px;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 127.14 96.36' fill='white'%3E%3Cpath d='M107.7,8.07A105.15,105.15,0,0,0,81.47,0a72.06,72.06,0,0,0-3.36,6.83A97.68,97.68,0,0,0,49,6.83,72.37,72.37,0,0,0,45.64,0,105.89,105.89,0,0,0,19.39,8.09C2.79,32.65-1.71,56.6.54,80.21h0A105.73,105.73,0,0,0,32.71,96.36,77.7,77.7,0,0,0,39.6,85.25a68.42,68.42,0,0,1-10.85-5.18c.91-.66,1.8-1.34,2.66-2a75.57,75.57,0,0,0,64.32,0c.87.71,1.76,1.39,2.66,2a68.68,68.68,0,0,1-10.87,5.19,77,77,0,0,0,6.89,11.1A105.25,105.25,0,0,0,126.6,80.22h0C129.24,52.84,122.09,29.11,107.7,8.07ZM42.45,65.69C36.18,65.69,31,60,31,53s5-12.74,11.43-12.74S54,46,53.89,53,48.84,65.69,42.45,65.69Zm42.24,0C78.41,65.69,73.25,60,73.25,53s5-12.74,11.44-12.74S96.23,46,96.12,53,91.08,65.69,84.69,65.69Z'/%3E%3C/svg%3E");
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
        flex-shrink: 0;
        align-self: center;
    }
/* /Components/Account/Pages/Manage/Index.razor.rz.scp.css */
.profile-card[b-jjar11lqz2] {
    background-color: var(--bs-secondary-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: 12px;
    padding: 1.75rem;
    margin-top: 1rem;
}

.profile-header[b-jjar11lqz2] {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    margin-bottom: 1.75rem;
}

.profile-avatar-lg[b-jjar11lqz2] {
    width: 88px;
    height: 88px;
    border-radius: 50%;
    object-fit: cover;
    background-color: var(--bs-tertiary-bg);
    flex-shrink: 0;
}

.profile-name[b-jjar11lqz2] {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--bs-body-color);
}

.profile-sub[b-jjar11lqz2] {
    color: var(--bs-secondary-color);
    font-size: 0.9rem;
}

.profile-form[b-jjar11lqz2] {
    max-width: 360px;
}
/* /Components/Account/Shared/ManageLayout.razor.rz.scp.css */
/* Une seule page de compte pour l'instant (Profil) : plus besoin du sous-menu
   à un seul lien, juste un conteneur de largeur raisonnable pour ne pas
   étaler le formulaire sur toute la largeur du contenu. */
.manage-page[b-cc8gxfxr8p] {
    max-width: 640px;
}
/* /Components/Layout/MainLayout.razor.rz.scp.css */
/* Grille à 3 zones (topbar / sidebar / main). Sur mobile elles s'empilent
   dans cet ordre (comme avant : bandeau du haut, puis barre de la navbar
   repliable, puis contenu). À partir du breakpoint desktop, on change
   uniquement les zones de la grille (grid-template-areas) pour que la
   sidebar occupe toute la hauteur à gauche, sur les deux "lignes" (celle de
   la topbar et celle du contenu) : plus besoin de bouger quoi que ce soit
   dans le balisage, seule la grille change de forme. C'est ce qui fait que
   la topbar ne couvre plus que la largeur du contenu principal (et non plus
   toute la largeur de la page), donc son contenu centré tombe enfin à
   l'aplomb de ce qui est centré dans la zone de contenu en dessous (ex : le
   logo réduit de la page "Mes cercles"). */
.app-shell[b-7exmon3zkt] {
    position: relative;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto 1fr;
    grid-template-areas:
        "topbar"
        "sidebar"
        "main";
    height: 100vh;
}

main[b-7exmon3zkt] {
    grid-area: main;
    min-height: 0;
    background-color: var(--bs-secondary-bg);
    overflow-y: auto;
    /* Coin arrondi côté sidebar/topbar (fond --bs-body-bg), là où le fond de
       main (--bs-secondary-bg) commence : lit comme un panneau inséré dans
       le cadre formé par la sidebar et la topbar plutôt qu'un angle droit
       sec. */
    border-top-left-radius: 16px;
}

.sidebar[b-7exmon3zkt] {
    grid-area: sidebar;
    /* Ancre de positionnement pour le bouton hamburger de la navbar (mobile),
       qui est en position absolute : sans ça, il se positionnerait par
       rapport à .app-shell (donc collé à la topbar) plutôt que par rapport à
       la barre de la sidebar elle-même. */
    position: relative;
    background-color: var(--bs-body-bg);
}

.sidebar-brand[b-7exmon3zkt] {
    /* Logo du site : visible uniquement dans la sidebar en desktop (voir
       media query plus bas) — sur mobile il reste affiché dans la topbar
       comme avant. */
    display: none;
}

.top-bar[b-7exmon3zkt] {
    grid-area: topbar;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    height: 3.5rem;
    background-color: var(--bs-body-bg);
    position: sticky;
    top: 0;
    z-index: 10;
    /* Padding géré ici directement (plus via la classe utilitaire px-3) :
       cette dernière est en !important côté Bootstrap et empêchait le
       padding-left de repasser à 0 au format desktop ci-dessous. */
    padding-left: 1rem;
    padding-right: 1rem;
}

.top-bar-brand[b-7exmon3zkt] {
    /* Colonne fixée explicitement : sans ça, un enfant en display:none (le
       logo, masqué en desktop dans la media query plus bas) sort complètement
       de la grille et le placement automatique décale le titre et les
       actions vers les colonnes 1 et 2 au lieu de 2 et 3, cassant le
       centrage du titre. */
    grid-column: 1;
    font-weight: 600;
    font-size: 1.1rem;
    justify-self: start;
    display: inline-flex;
    align-items: center;
}

.top-bar-title[b-7exmon3zkt] {
    grid-column: 2;
    justify-self: center;
    color: var(--bs-secondary-color);
    font-weight: 500;
}


@media (min-width: 641px) {
    .app-shell[b-7exmon3zkt] {
        grid-template-columns: 250px 1fr;
        grid-template-rows: 3.5rem 1fr;
        grid-template-areas:
            "sidebar topbar"
            "sidebar main";
    }

    .sidebar[b-7exmon3zkt] {
        display: flex;
        flex-direction: column;
        overflow: hidden;
        min-height: 0;
    }

    .sidebar-brand[b-7exmon3zkt] {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 3.5rem;
        flex-shrink: 0;
    }

    article[b-7exmon3zkt] {
        padding-left: 2rem !important;
        padding-right: 1.5rem !important;
    }

    /* Le logo du site vit désormais dans la sidebar en desktop : on cache
       celui de la topbar (la 1ère colonne de sa grille reste réservée et
       vide, ce qui garde le titre bien centré au milieu de la topbar). */
    .top-bar-brand[b-7exmon3zkt] {
        display: none;
    }
}

#blazor-error-ui[b-7exmon3zkt] {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss[b-7exmon3zkt] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

.top-bar-actions[b-7exmon3zkt] {
    grid-column: 3;
    justify-self: end;
    position: relative;
}

.theme-menu[b-7exmon3zkt] {
    position: relative;
}

.theme-menu-trigger[b-7exmon3zkt] {
    list-style: none;
    background: none;
    border: none;
    color: var(--bs-secondary-color);
    font-weight: 700;
    font-size: 1.3rem;
    letter-spacing: 2px;
    line-height: 1;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 4px;
    display: inline-block;
    transition: color 0.15s ease;
}

    .theme-menu-trigger[b-7exmon3zkt]::-webkit-details-marker {
        display: none;
    }

    .theme-menu-trigger:hover[b-7exmon3zkt] {
        color: var(--bs-primary);
        background: none;
    }

.theme-menu-panel[b-7exmon3zkt] {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    background: var(--bs-secondary-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: 8px;
    padding: 0.75rem 1rem;
    min-width: 200px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
    z-index: 21;
}

.theme-switch-row[b-7exmon3zkt] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin: 0;
    cursor: pointer;
}

.theme-switch[b-7exmon3zkt] {
    position: relative;
    display: inline-block;
    width: 40px;
    height: 22px;
    flex-shrink: 0;
}

    .theme-switch input[b-7exmon3zkt] {
        opacity: 0;
        width: 0;
        height: 0;
    }

.theme-switch-slider[b-7exmon3zkt] {
    position: absolute;
    inset: 0;
    background-color: var(--bs-border-color);
    border-radius: 999px;
    transition: background-color 0.2s ease;
}

    .theme-switch-slider[b-7exmon3zkt]::before {
        content: "";
        position: absolute;
        width: 16px;
        height: 16px;
        left: 3px;
        top: 3px;
        background-color: #fff;
        border-radius: 50%;
        transition: transform 0.2s ease;
    }

.theme-switch input:checked + .theme-switch-slider[b-7exmon3zkt] {
    background-color: var(--bs-primary);
}

    .theme-switch input:checked + .theme-switch-slider[b-7exmon3zkt]::before {
        transform: translateX(18px);
    }

.brand-logo[b-7exmon3zkt] {
    /* Même largeur visuelle que le bloc "Mes cercles" (texte + logo "oo")
       juste en dessous dans la navbar, qui était bien plus large. */
    height: 40px;
    width: auto;
    display: block;
}

/* Dupliqué avec app.css, volontairement : .brand-logo ci-dessus fixe déjà
   display: block avec la même spécificité (portée par le CSS isolation de
   ce composant), donc une règle globale non scopée dans app.css serait
   toujours perdante face à elle pour la propriété display, quel que soit
   l'ordre des règles — d'où la copie complète des 3 règles ici. */
.logo-onlight[b-7exmon3zkt] {
    display: none;
}

[data-bs-theme="light"] .logo-ondark[b-7exmon3zkt] {
    display: none;
}

[data-bs-theme="light"] .logo-onlight[b-7exmon3zkt] {
    display: block;
}
/* /Components/Layout/NavMenu.razor.rz.scp.css */
.navbar-toggler[b-ob7nk8f4yj] {
    appearance: none;
    cursor: pointer;
    width: 3.5rem;
    height: 2.5rem;
    color: white;
    position: absolute;
    top: 0.5rem;
    right: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") no-repeat center/1.75rem rgba(255, 255, 255, 0.1);
}

    .navbar-toggler:checked[b-ob7nk8f4yj] {
        background-color: rgba(255, 255, 255, 0.5);
    }

.bi[b-ob7nk8f4yj] {
    display: inline-block;
    position: relative;
    width: 1.25rem;
    height: 1.25rem;
    margin-right: 0.75rem;
    top: -1px;
    background-color: currentColor;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
}

.bi-person-badge-nav-menu[b-ob7nk8f4yj] {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-person-badge' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 2a.5.5 0 0 0 0 1h3a.5.5 0 0 0 0-1h-3zM11 8a3 3 0 1 1-6 0 3 3 0 0 1 6 0z'/%3E%3Cpath d='M4.5 0A2.5 2.5 0 0 0 2 2.5V14a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V2.5A2.5 2.5 0 0 0 11.5 0h-7zM3 2.5A1.5 1.5 0 0 1 4.5 1h7A1.5 1.5 0 0 1 13 2.5v10.795a4.2 4.2 0 0 0-.776-.492C11.392 12.387 10.063 12 8 12s-3.392.387-4.224.803a4.2 4.2 0 0 0-.776.492V2.5z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-person-badge' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 2a.5.5 0 0 0 0 1h3a.5.5 0 0 0 0-1h-3zM11 8a3 3 0 1 1-6 0 3 3 0 0 1 6 0z'/%3E%3Cpath d='M4.5 0A2.5 2.5 0 0 0 2 2.5V14a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V2.5A2.5 2.5 0 0 0 11.5 0h-7zM3 2.5A1.5 1.5 0 0 1 4.5 1h7A1.5 1.5 0 0 1 13 2.5v10.795a4.2 4.2 0 0 0-.776-.492C11.392 12.387 10.063 12 8 12s-3.392.387-4.224.803a4.2 4.2 0 0 0-.776.492V2.5z'/%3E%3C/svg%3E");
}

.nav-item[b-ob7nk8f4yj] {
    font-size: 0.9rem;
    padding-bottom: 0.5rem;
}

    .nav-item:first-of-type[b-ob7nk8f4yj] {
        padding-top: 1rem;
    }

    .nav-item[b-ob7nk8f4yj]  .nav-link {
        color: var(--bs-secondary-color);
        background: none;
        border: none;
        border-radius: 4px;
        height: 3rem;
        display: flex;
        align-items: center;
        line-height: 3rem;
        width: 100%;
    }

    .nav-item[b-ob7nk8f4yj]  a.active {
        background-color: var(--bs-tertiary-bg);
        color: var(--bs-body-color);
    }

    .nav-item[b-ob7nk8f4yj]  .nav-link:hover {
        background-color: var(--bs-tertiary-bg);
        color: var(--bs-body-color);
    }

/* --- Structure générale : la sidebar occupe toute la hauteur disponible,
   seule .circle-list défile si la liste déborde, le footer profil/logout
   reste toujours visible en bas. --- */
.nav-scrollable[b-ob7nk8f4yj] {
    display: none;
}

.navbar-toggler:checked ~ .nav-scrollable[b-ob7nk8f4yj] {
    display: block;
    max-height: calc(100vh - 3.5rem);
    overflow-y: auto;
}

@media (min-width: 641px) {
    .navbar-toggler[b-ob7nk8f4yj] {
        display: none;
    }

    /* Grid plutôt que flex imbriqué : la ligne "1fr" (circle-nav) et la ligne
       "auto" (nav-footer) reçoivent chacune une hauteur déterministe et
       stable dès le premier rendu, sans dépendre d'une chaîne de hauteurs en
       pourcentage à travers plusieurs conteneurs flex parents. C'est ce
       flex+% imbriqué (nav-scrollable > circle-nav flex:1) qui produisait une
       hauteur tantôt indéfinie pour circle-nav, poussant le footer hors de la
       zone visible (clippée par .sidebar) la plupart du temps, avec un
       "flash" bref et visible seulement lors de certains re-rendus. */
    .nav-scrollable[b-ob7nk8f4yj] {
        display: grid;
        grid-template-rows: 1fr auto;
        height: 100%;
        min-height: 0;
    }
}

.circle-nav[b-ob7nk8f4yj] {
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
    /* Pas de padding-top ici : le haut du bloc "Mes cercles" doit tomber
       pile au même niveau que le haut de main (juste sous .sidebar-brand /
       la topbar, à 3.5rem du haut de la page). */
    padding-top: 0;
}

/* Le bloc "Mes cercles" (titre + liste) partage un seul fond, pour se lire
   comme une zone délimitée de la navbar plutôt que deux éléments séparés. */
.circle-nav-block[b-ob7nk8f4yj] {
    display: flex;
    flex-direction: column;
    /* Épouse la hauteur de son contenu (titre + cercles) et s'arrête juste
       après le dernier, sans jamais dépasser l'espace dispo dans .circle-nav
       (où .circle-list prend le relais avec son propre scroll interne). */
    max-height: 100%;
    margin: 0 0.75rem 0.5rem;
    padding: 0.4rem;
    background-color: var(--bs-tertiary-bg);
    border-radius: 10px;
    overflow: hidden;
}

/* NavLink rend son <a> comme composant enfant (framework), pas comme markup
   direct de NavMenu : sans ::deep, la feuille de style scopée de ce composant
   ne matche jamais ces classes et les règles ci-dessous sont silencieusement
   ignorées (c'est ce qui produisait l'absence totale de style constatée). */
.circle-nav-block[b-ob7nk8f4yj]  .circle-nav-title {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 0.65rem 0.6rem;
    border-radius: 8px;
    color: var(--bs-primary);
    font-weight: 700;
    font-size: 1.35rem;
    text-decoration: none;
}

.title-mark[b-ob7nk8f4yj] {
    height: 34px;
    width: auto;
    display: block;
    flex-shrink: 0;
}

/* Dupliqué avec app.css, volontairement : .title-mark ci-dessus fixe déjà
   display: block avec la même spécificité (portée par le CSS isolation de
   ce composant), donc une règle globale non scopée dans app.css serait
   toujours perdante face à elle pour la propriété display, quel que soit
   l'ordre des règles — d'où la copie complète des 3 règles ici. */
.title-mark.logo-onlight[b-ob7nk8f4yj] {
    display: none;
}

[data-bs-theme="light"] .title-mark.logo-ondark[b-ob7nk8f4yj] {
    display: none;
}

[data-bs-theme="light"] .title-mark.logo-onlight[b-ob7nk8f4yj] {
    display: block;
}

.circle-list[b-ob7nk8f4yj] {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.circle-list[b-ob7nk8f4yj]  .circle-row {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    margin: 0 0.35rem;
    padding: 0.5rem 0.75rem;
    border-radius: 8px;
    border: 1px solid transparent;
    box-sizing: border-box;
    color: var(--bs-secondary-color);
    text-decoration: none;
    min-height: 2.75rem;
    transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}

    /* Survol : juste une bordure, jamais de fond. Neutralisé quand la ligne
       est déjà active pour que le survol ne change rien dans ce cas. */
    .circle-list[b-ob7nk8f4yj]  .circle-row:hover:not(.active) {
        border-color: var(--bs-primary);
    }

    .circle-list[b-ob7nk8f4yj]  .circle-row.active {
        background-color: var(--bs-primary);
        border-color: var(--bs-primary);
        color: #fff;
    }

.circle-avatar[b-ob7nk8f4yj] {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    object-fit: cover;
    /* Même couleur que le fond du bloc "Mes cercles" : transparent à l'oeil
       tant que la ligne n'est pas sélectionnée, et moins de contraste qu'un
       fond noir une fois la ligne active (orange). */
    background-color: var(--bs-tertiary-bg);
    flex-shrink: 0;
}

.circle-name[b-ob7nk8f4yj] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 1rem;
    font-weight: 700;
    color: inherit;
}

/* --- Bloc "Rejoindre / Créer" : un pilulier splitté en deux couleurs, qui
   s'écarte au survol pour révéler le texte du bouton survolé pendant que
   l'autre se réduit à sa seule icône. Géré en CSS pur (:hover) plutôt qu'en
   C# (onmouseenter/onmouseleave) : instantané, et fonctionne même si ce
   composant n'est pas rendu en mode interactif. */
.circle-actions[b-ob7nk8f4yj] {
    display: flex;
    align-items: stretch;
    /* Même retrait que .circle-row (padding du bloc + cette marge) pour que
       toute la barre fasse exactement la même largeur que les lignes de
       cercle au-dessus. */
    margin: 0.5rem 0.35rem 0;
    border-radius: 8px;
    overflow: hidden;
}

.circle-actions[b-ob7nk8f4yj]  .circle-action {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 0;
    min-width: 0;
    height: 2.5rem;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.85rem;
    white-space: nowrap;
    background-color: transparent;
    border: 1px solid transparent;
    box-sizing: border-box;
    outline: none;
    transition: flex-grow 0.25s ease, background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

    /* Le focus ring par défaut du navigateur est rectangulaire et ignore le
       rayon du pilulier : il dépasse aux coins arrondis. On le remplace par
       un box-shadow interne, qui lui épouse bien le border-radius. */
    .circle-actions[b-ob7nk8f4yj]  .circle-action:focus-visible {
        box-shadow: inset 0 0 0 2px currentColor;
    }

    /* Grossit au survol : comme le container a une largeur fixe, l'autre
       bouton (resté à flex-grow:1) se réduit automatiquement en conséquence,
       sans avoir besoin de le cibler explicitement. */
    .circle-actions[b-ob7nk8f4yj]  .circle-action:hover {
        flex-grow: 3;
    }

/* Repris des mêmes codes couleur que le reste de la navbar : gris comme
   .profile-row, orange comme les lignes de cercle actives. Pas de fond par
   défaut, fond plein seulement au survol. Aucune règle sur .active : rester
   sur /cercles/rejoindre ou /cercles/creer n'a donc pas d'effet particulier. */
.circle-actions[b-ob7nk8f4yj]  .circle-action-join {
    /* Rayon propre sur les coins extérieurs : sans ça, ce bouton est un
       rectangle droit et sa bordure se fait couper net (pas de courbe) là
       où le conteneur la clippe pour suivre son propre arrondi. */
    border-radius: 8px 0 0 8px;
    color: var(--bs-secondary-color);
    border-color: var(--bs-border-color);
}

    .circle-actions[b-ob7nk8f4yj]  .circle-action-join:hover {
        background-color: var(--bs-secondary-color);
        border-color: var(--bs-secondary-color);
        color: var(--bs-body-bg);
    }

.circle-actions[b-ob7nk8f4yj]  .circle-action-create {
    border-radius: 0 8px 8px 0;
    color: var(--bs-primary);
    border-color: var(--bs-primary);
}

    .circle-actions[b-ob7nk8f4yj]  .circle-action-create:hover {
        background-color: var(--bs-primary);
        border-color: var(--bs-primary);
        color: #fff;
    }

.circle-actions[b-ob7nk8f4yj]  .action-icon {
    flex-shrink: 0;
}

.circle-actions[b-ob7nk8f4yj]  .action-label {
    max-width: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-width 0.25s ease, opacity 0.15s ease;
}

    .circle-actions[b-ob7nk8f4yj]  .circle-action:hover .action-label {
        max-width: 120px;
        opacity: 1;
    }

/* Petit séparateur vertical entre les deux boutons, coloré comme le fond du
   bloc "Mes cercles" (donc invisible/neutre, juste une coupure nette). */
.circle-actions-divider[b-ob7nk8f4yj] {
    flex: 0 0 2px;
    background-color: var(--bs-tertiary-bg);
}

/* --- Pied de la navbar : profil + logout, toujours visible --- */
.nav-footer[b-ob7nk8f4yj] {
    flex-shrink: 0;
    padding: 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.nav-footer[b-ob7nk8f4yj]  .profile-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.65rem;
    width: 100%;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--bs-border-color);
    border-radius: 8px;
    color: var(--bs-secondary-color);
    text-decoration: none;
    box-sizing: border-box;
    transition: background-color 0.15s ease, color 0.15s ease;
}

    .nav-footer[b-ob7nk8f4yj]  .profile-row:hover {
        background-color: var(--bs-secondary-color);
        color: var(--bs-body-bg);
    }

.profile-avatar[b-ob7nk8f4yj] {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.profile-pseudo[b-ob7nk8f4yj] {
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.logout-form[b-ob7nk8f4yj] {
    width: 100%;
}

.logout-button[b-ob7nk8f4yj] {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    background: none;
    border: 1px solid var(--bs-danger);
    color: var(--bs-danger);
    font-weight: 600;
    font-size: 0.9rem;
    padding: 0.5rem 0.75rem;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}

    .logout-button:hover[b-ob7nk8f4yj] {
        background-color: var(--bs-danger);
        color: #fff;
    }
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-0u947982zf],
.components-reconnect-repeated-attempt-visible[b-0u947982zf],
.components-reconnect-failed-visible[b-0u947982zf],
.components-pause-visible[b-0u947982zf],
.components-resume-failed-visible[b-0u947982zf],
.components-rejoining-animation[b-0u947982zf] {
    display: none;
}

#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible[b-0u947982zf],
#components-reconnect-modal.components-reconnect-show .components-rejoining-animation[b-0u947982zf],
#components-reconnect-modal.components-reconnect-paused .components-pause-visible[b-0u947982zf],
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible[b-0u947982zf],
#components-reconnect-modal.components-reconnect-retrying[b-0u947982zf],
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible[b-0u947982zf],
#components-reconnect-modal.components-reconnect-retrying .components-rejoining-animation[b-0u947982zf],
#components-reconnect-modal.components-reconnect-failed[b-0u947982zf],
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible[b-0u947982zf] {
    display: block;
}


#components-reconnect-modal[b-0u947982zf] {
    background-color: white;
    width: 20rem;
    margin: 20vh auto;
    padding: 2rem;
    border: 0;
    border-radius: 0.5rem;
    box-shadow: 0 3px 6px 2px rgba(0, 0, 0, 0.3);
    opacity: 0;
    transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete;
    animation: components-reconnect-modal-fadeOutOpacity-b-0u947982zf 0.5s both;
    &[open]

{
    animation: components-reconnect-modal-slideUp-b-0u947982zf 1.5s cubic-bezier(.05, .89, .25, 1.02) 0.3s, components-reconnect-modal-fadeInOpacity-b-0u947982zf 0.5s ease-in-out 0.3s;
    animation-fill-mode: both;
}

}

#components-reconnect-modal[b-0u947982zf]::backdrop {
    background-color: rgba(0, 0, 0, 0.4);
    animation: components-reconnect-modal-fadeInOpacity-b-0u947982zf 0.5s ease-in-out;
    opacity: 1;
}

@keyframes components-reconnect-modal-slideUp-b-0u947982zf {
    0% {
        transform: translateY(30px) scale(0.95);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes components-reconnect-modal-fadeInOpacity-b-0u947982zf {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes components-reconnect-modal-fadeOutOpacity-b-0u947982zf {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.components-reconnect-container[b-0u947982zf] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

#components-reconnect-modal p[b-0u947982zf] {
    margin: 0;
    text-align: center;
}

#components-reconnect-modal button[b-0u947982zf] {
    border: 0;
    background-color: #6b9ed2;
    color: white;
    padding: 4px 24px;
    border-radius: 4px;
}

    #components-reconnect-modal button:hover[b-0u947982zf] {
        background-color: #3b6ea2;
    }

    #components-reconnect-modal button:active[b-0u947982zf] {
        background-color: #6b9ed2;
    }

.components-rejoining-animation[b-0u947982zf] {
    position: relative;
    width: 80px;
    height: 80px;
}

    .components-rejoining-animation div[b-0u947982zf] {
        position: absolute;
        border: 3px solid #0087ff;
        opacity: 1;
        border-radius: 50%;
        animation: components-rejoining-animation-b-0u947982zf 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
    }

        .components-rejoining-animation div:nth-child(2)[b-0u947982zf] {
            animation-delay: -0.5s;
        }

@keyframes components-rejoining-animation-b-0u947982zf {
    0% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    4.9% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    5% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 1;
    }

    100% {
        top: 0px;
        left: 0px;
        width: 80px;
        height: 80px;
        opacity: 0;
    }
}
/* /Components/Pages/Cercles/Detail.razor.rz.scp.css */
/* Propriétés communes (fond, padding, box-shadow...) dans app.css : ici, on
   ne garde que ce qui diffère des autres modales du site. */
.modal-box[b-t84ta7l6fy] {
    border-radius: 8px;
    min-width: 320px;
}

.vote-avatar[b-t84ta7l6fy] {
    border: 2px solid var(--bs-secondary-bg);
    display: block;
}

.vote-oui[b-t84ta7l6fy] {
    outline: 2px solid var(--bs-success);
}

.vote-non[b-t84ta7l6fy] {
    outline: 2px solid var(--bs-danger);
}

/* Conteneur de chaque avatar : porte désormais le chevauchement/hover
   (déplacés depuis .vote-avatar) puisque .vote-avatar est un <img>, sur
   lequel un pseudo-élément ::after (utilisé pour le badge ci-dessous) ne
   peut pas s'afficher. */
.vote-avatar-wrap[b-t84ta7l6fy] {
    display: inline-flex;
    position: relative;
    margin-right: -8px;
    transition: transform 0.15s ease;
}

    .vote-avatar-wrap:hover[b-t84ta7l6fy] {
        transform: scale(1.15);
        z-index: 2;
    }

/* Petite pastille de statut sur le coin de l'avatar, comme l'indicateur de
   présence de Discord : coche verte (vote oui) / croix rouge (vote non). */
.vote-status-badge[b-t84ta7l6fy] {
    position: absolute;
    bottom: -1px;
    right: -1px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    border: 1.5px solid var(--bs-secondary-bg);
    box-sizing: content-box;
}

    .vote-status-badge svg[b-t84ta7l6fy] {
        width: 5.5px;
        height: 5.5px;
    }

.vote-status-badge.vote-status-oui[b-t84ta7l6fy] {
    background: var(--bs-success);
}

.vote-status-badge.vote-status-non[b-t84ta7l6fy] {
    background: var(--bs-danger);
}

/* Sépare visuellement le groupe des votes positifs et celui des votes
   négatifs (petit espace entre les deux), tout en gardant les avatars
   juxtaposés (qui se chevauchent) à l'intérieur de chaque groupe. */
.vote-avatars-row[b-t84ta7l6fy] {
    gap: 10px;
}

.vote-avatar-group[b-t84ta7l6fy] {
    display: flex;
}

    .vote-avatar-group .vote-avatar-wrap:last-child[b-t84ta7l6fy] {
        /* Sans ça, le chevauchement -8px du dernier avatar du groupe
           rognerait aussi une partie de l'espace ("gap") réservé entre les
           deux groupes. */
        margin-right: 0;
    }

.vote-widget[b-t84ta7l6fy] {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-left: 8px;
    width: 44px;
}

.btn-vote[b-t84ta7l6fy] {
    background: none;
    border-radius: 4px;
    width: 44px;
    height: 25px;
    padding: 0;
    line-height: 1;
    cursor: pointer;
    font-size: 0.75rem;
    /* Fondu à l'entrée/sortie du survol, au lieu d'un changement de couleur
       instantané. */
    transition: background-color 0.15s ease, color 0.15s ease;
}

.btn-vote-up[b-t84ta7l6fy] {
    border: 1px solid var(--bs-success);
    color: var(--bs-success);
}

    .btn-vote-up:hover:not(:disabled)[b-t84ta7l6fy] {
        background: var(--bs-success);
        color: #fff;
    }

.btn-vote-down[b-t84ta7l6fy] {
    border: 1px solid var(--bs-danger);
    color: var(--bs-danger);
}

    .btn-vote-down:hover:not(:disabled)[b-t84ta7l6fy] {
        background: var(--bs-danger);
        color: #fff;
    }

.btn-vote.active-oui[b-t84ta7l6fy] {
    background: var(--bs-success);
    color: #fff;
    border-color: var(--bs-success);
}

.btn-vote.active-non[b-t84ta7l6fy] {
    background: var(--bs-danger);
    color: #fff;
    border-color: var(--bs-danger);
}

.btn-vote:disabled[b-t84ta7l6fy] {
    opacity: 0.35;
    cursor: not-allowed;
    border-color: var(--bs-border-color) !important;
    color: var(--bs-secondary-color) !important;
    background: none !important;
}

.vote-counter[b-t84ta7l6fy] {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--bs-body-color);
    padding: 4px 0;
    margin: 0;
    width: 44px;
    text-align: center;
}

.vote-counter-static[b-t84ta7l6fy] {
    font-weight: 600;
    font-size: 0.9rem;
    padding: 4px 10px;
    border-radius: 4px;
    margin-left: 8px;
    min-width: 44px;
    text-align: center;
    box-sizing: border-box;
}

.counter-success[b-t84ta7l6fy] {
    background: var(--bs-success-bg-subtle);
    color: var(--bs-success-text-emphasis);
}

.counter-danger[b-t84ta7l6fy] {
    background: var(--bs-danger-bg-subtle);
    color: var(--bs-danger-text-emphasis);
}

.btn-icon-toggle[b-t84ta7l6fy] {
    width: 34px;
    height: 34px; /* carré, uniforme quel que soit l'état de la proposition */
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    background: none;
    flex-shrink: 0;
}

    .btn-icon-toggle:disabled[b-t84ta7l6fy] {
        opacity: 0.35;
        cursor: not-allowed;
        border-color: var(--bs-border-color) !important;
        color: var(--bs-secondary-color) !important;
        background: none !important;
    }

.btn-archive[b-t84ta7l6fy] {
    border: 1px solid var(--bs-info);
    color: var(--bs-info);
}

    .btn-archive:hover:not(:disabled)[b-t84ta7l6fy] {
        background: var(--bs-info);
        color: #fff;
    }

    .btn-archive.filled[b-t84ta7l6fy] {
        background: var(--bs-info);
        color: #fff;
    }

        .btn-archive.filled:hover:not(:disabled)[b-t84ta7l6fy] {
            background: none;
            color: var(--bs-info);
        }

.btn-delete[b-t84ta7l6fy] {
    border: 1px solid var(--bs-danger);
    color: var(--bs-danger);
}

    .btn-delete:hover:not(:disabled)[b-t84ta7l6fy] {
        background: var(--bs-danger);
        color: #fff;
    }

.btn-outline-warning:disabled[b-t84ta7l6fy] {
    opacity: 0.35 !important;
    cursor: not-allowed !important;
    pointer-events: auto !important;
    border-color: var(--bs-border-color) !important;
    color: var(--bs-secondary-color) !important;
    background: none !important;
}

.steam-link[b-t84ta7l6fy] {
    /* Couleur par défaut = le bleu clair de la marque Steam (--cl-steam-fg),
       lisible sur fond clair comme sur fond sombre. L'ancien
       var(--cl-steam-bg) (le bleu marine très foncé de Steam) était pensé
       comme fond du survol, pas comme couleur de texte : en mode sombre il
       devenait quasi invisible sur le fond de la page. */
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
    gap: 0.3rem;
    color: var(--cl-steam-fg);
    text-decoration: none;
    padding: 2px 8px;
    border-radius: 20px;
    transition: background-color 0.2s ease, color 0.2s ease;
}

    .steam-link .steam-label[b-t84ta7l6fy] {
        max-width: 0;
        overflow: hidden;
        white-space: nowrap;
        opacity: 0;
        transition: max-width 0.2s ease, opacity 0.2s ease;
        font-size: 0.8rem;
    }

    .steam-link:hover .steam-label[b-t84ta7l6fy],
    .steam-link:focus .steam-label[b-t84ta7l6fy] {
        max-width: 120px;
        opacity: 1;
    }

    .steam-link:hover[b-t84ta7l6fy],
    .steam-link:focus[b-t84ta7l6fy] {
        background-color: var(--cl-steam-bg);
        color: var(--cl-steam-fg);
    }

/* Bouton "Relancer" (proposition échouée) : icône refresh toujours visible
   (garde la même bordure/couleur outline-warning que l'ancien bouton texte),
   le libellé ne se déploie qu'au survol/focus — même mécanique que
   .steam-link .steam-label plus haut. */
.btn-relancer[b-t84ta7l6fy] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

    .btn-relancer-label[b-t84ta7l6fy] {
        max-width: 0;
        overflow: hidden;
        white-space: nowrap;
        opacity: 0;
        transition: max-width 0.2s ease, opacity 0.2s ease;
    }

    .btn-relancer:hover .btn-relancer-label[b-t84ta7l6fy],
    .btn-relancer:focus .btn-relancer-label[b-t84ta7l6fy] {
        max-width: 100px;
        opacity: 1;
    }

.btn-clear-search[b-t84ta7l6fy] {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    font-size: 1.25rem;
    line-height: 1;
    color: var(--bs-secondary-color);
    cursor: pointer;
    padding: 0 4px;
}

    .btn-clear-search:hover[b-t84ta7l6fy] {
        color: var(--bs-danger);
    }

/* Ligne du haut : barre de recherche centrée + retour à droite. L'avatar du
   cercle ne vit plus ici (déplacé au-dessus du bloc Membres, voir
   .members-sidebar-avatar) — il n'y a donc plus besoin de réserver de la
   place à gauche.

   Le bouton retour est volontairement en position absolute plutôt que dans
   une grille à 2 colonnes ou un flex avec padding de réserve : un padding
   asymétrique décale le centre de calcul par rapport à
   .circle-search-results-wrap juste en dessous (qui, lui, occupe toute la
   largeur de .circle-main-col, sans aucun padding). En sortant complètement
   le bouton du flux normal (il ne participe plus au calcul de
   largeur/centrage de la ligne), .circle-search-input-wrap redevient un
   bloc normal centré par margin: auto sur exactement la même largeur que
   les résultats — les deux tombent forcément pile alignés. */
.circle-top-row[b-t84ta7l6fy] {
    position: relative;
    margin-bottom: 0.85rem;
}

.circle-back-link[b-t84ta7l6fy] {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    white-space: nowrap;
}

/* En dessous de ~640px, le bouton en position absolute finirait par
   chevaucher la barre de recherche (qui, elle, reste en pleine largeur pour
   rester alignée avec les résultats). On repasse alors sur un simple
   empilement vertical. */
@media (max-width: 640px) {
    .circle-top-row[b-t84ta7l6fy] {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0.5rem;
    }

    .circle-back-link[b-t84ta7l6fy] {
        position: static;
        transform: none;
    }
}

/* Remplace l'ancien mt-4 Bootstrap : la marge du haut de "Propositions"
   était cumulée avec celle de la barre de recherche juste au-dessus, ce qui
   créait un très gros espace vide entre la topbar et la liste. Le titre est
   centré (bouton "Éditer" sorti du flux, ancré à droite), même mécanique que
   .circle-top-row plus haut. */
.circle-propositions-header[b-t84ta7l6fy] {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 2rem;
    margin-top: 0.5rem;
    margin-bottom: 0.75rem;
}

.circle-propositions-edit-btn[b-t84ta7l6fy] {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
}

/* Dropdown flottant (overlay) plutôt qu'un bloc inséré dans le flux normal :
   avant, ouvrir/fermer les résultats poussait tout le contenu en dessous
   (le titre "Propositions", la liste, le bouton "Éditer"...) vers le
   bas/haut à chaque fois — visible notamment quand fermer la recherche via
   un clic sur "Éditer" faisait "remonter" toute la page d'un coup. En
   position absolute par-dessus le reste, ouvrir/fermer les résultats ne
   déplace plus jamais rien d'autre sur la page. */
.circle-search-results-wrap[b-t84ta7l6fy] {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin-top: 0.5rem;
    z-index: 20;
    max-height: 70vh;
    overflow-y: auto;
    background-color: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: 10px;
    padding: 0.6rem;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
}

.circle-search-input-wrap[b-t84ta7l6fy] {
    /* Bloc normal centré par margin: auto (même mécanique, même largeur
       max-width, que .circle-search-results juste en dessous — voir le
       commentaire sur .circle-top-row). width: 100% reste nécessaire :
       sans largeur explicite, le <input> à l'intérieur (form-control,
       width: 100%) retombe sur sa taille par défaut faute de base de calcul
       claire pour son propre pourcentage.
       position: relative sert aussi d'ancre à .circle-search-results-wrap
       (position: absolute, voir plus haut), qui hérite ainsi de la même
       largeur/du même centrage sans dupliquer la logique. */
    position: relative;
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
}

.circle-search-input[b-t84ta7l6fy] {
    padding-right: 2.25rem;
    padding-top: 0.65rem;
    padding-bottom: 0.65rem;
    font-size: 1.05rem;
    text-align: center;
}

    .circle-search-input[b-t84ta7l6fy]::placeholder {
        text-align: center;
    }

.circle-search-results[b-t84ta7l6fy] {
    max-width: 1000px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.circle-search-spinner[b-t84ta7l6fy] {
    width: 32px;
    height: 32px;
    margin: 0.5rem auto;
    border-radius: 50%;
    border: 3px solid var(--bs-border-color);
    border-top-color: var(--bs-primary);
    animation: circle-search-spin-b-t84ta7l6fy 0.7s linear infinite;
}

@keyframes circle-search-spin-b-t84ta7l6fy {
    to {
        transform: rotate(360deg);
    }
}

/* Résultat de recherche : cover en fondu, zoomée, derrière le contenu — ne
   remplit qu'une partie de la ligne (la zone de droite) et se fond
   progressivement dans le fond de la ligne côté gauche pour rester lisible
   avec le texte. */
.game-result-row[b-t84ta7l6fy] {
    position: relative;
    overflow: hidden;
    border-radius: 10px;
    background-color: var(--bs-secondary-bg);
    border: 1px solid var(--bs-border-color);
}

/* Custom property "enregistrée" (syntax typée) : contrairement à une
   variable CSS classique, celle-ci peut être animée en douceur par
   .game-result-cover ci-dessous (mask-image avec un simple var() ne se
   transitionne pas nativement d'un dégradé à un autre - les navigateurs le
   remplacent sans interpolation - alors qu'une @property déclarée en
   <percentage> s'interpole normalement, frame par frame). */
@property --cl-cover-fade-end {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 70%;
}

.game-result-cover[b-t84ta7l6fy] {
    /* Largeur en compromis entre l'ancienne version (60% de la ligne, trop
       zoomée) et la précédente passe (200px fixes, trop resserrée). Avec
       background-size: cover, plus la boîte est large, plus il faut
       zoomer/rogner pour la remplir en largeur — une boîte plus étroite
       montre donc davantage la cover en hauteur (moins zoomée). */
    position: absolute;
    inset: 0;
    right: auto;
    width: 380px;
    background-size: cover;
    /* Recentre le crop vertical vers les 75% de la hauteur de l'image
       (au lieu du centre) : c'est à peu près là que se trouve le titre sur
       la plupart des covers portrait. */
    background-position: center 75%;
    /* La boîte elle-même est maintenant ancrée à gauche de la ligne (au lieu
       de droite), et le fondu est visible côté gauche (sous le titre) puis
       s'estompe vers la droite avant d'atteindre le bouton "Proposer". Le
       titre/les étiquettes restent lisibles par-dessus car
       .game-result-content est en z-index: 1.
       Le point de disparition (--cl-cover-fade-end) est piloté par la
       @property ci-dessus pour pouvoir être animé en douceur au survol. */
    -webkit-mask-image: linear-gradient(to right, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) var(--cl-cover-fade-end));
    mask-image: linear-gradient(to right, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) var(--cl-cover-fade-end));
    pointer-events: none;
    --cl-cover-fade-end: 70%;
    /* Au survol (voir .proposition-row:hover ci-dessous), la taille/le crop
       de l'image ne changent pas : seul le fondu se résorbe en fondu enchaîné
       (repoussé vers la droite) pour révéler davantage de l'image déjà
       affichée, sans bouger ni redimensionner quoi que ce soit d'autre dans
       la ligne. */
    transition: --cl-cover-fade-end 0.25s ease;
}

/* Nuance appliquée à .game-result-cover uniquement sur les lignes de
   propositions (voir PropositionCoverClass) : grisée pour ce qui est
   terminé sans succès (échoué/archivé), inchangée (couleurs d'origine) pour
   ce qui est validé ou encore en cours. */
.game-result-cover.cover-echec[b-t84ta7l6fy] {
    filter: grayscale(1);
}

/* Même principe de cover en fondu que .game-result-row, appliqué aux lignes
   de la liste des propositions. */
.proposition-row[b-t84ta7l6fy] {
    position: relative;
    overflow: hidden;
}

    /* Au survol, on garde la même taille de cover : seul le fondu se résorbe
       (le point de disparition passe de 70% à 92% de la boîte), pour révéler
       davantage de l'image tout en gardant un petit fondu final — sinon on
       aurait une ligne brute entre l'image et le fond de la ligne. */
    .proposition-row:hover .game-result-cover[b-t84ta7l6fy] {
        --cl-cover-fade-end: 92%;
    }

.proposition-content[b-t84ta7l6fy] {
    position: relative;
    z-index: 1;
}

.game-result-content[b-t84ta7l6fy] {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.75rem 1rem;
}

.game-result-info[b-t84ta7l6fy] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    min-width: 0;
}

.game-result-name[b-t84ta7l6fy] {
    font-size: 1rem;
}

.game-result-tags[b-t84ta7l6fy] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.game-tag-badge[b-t84ta7l6fy] {
    display: inline-flex;
    align-items: center;
    padding: 0.15rem 0.6rem;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 700;
    border: 1px solid transparent;
    background: transparent;
    line-height: 1.4;
}

.game-tag-badge.tag-coop[b-t84ta7l6fy] {
    color: var(--bs-success);
    border-color: var(--bs-success);
}

.game-tag-badge.tag-mmo[b-t84ta7l6fy] {
    color: var(--bs-info);
    border-color: var(--bs-info);
}

.game-tag-badge.tag-split[b-t84ta7l6fy] {
    color: var(--bs-secondary-color);
    border-color: var(--bs-secondary-color);
}

.game-tag-badge.tag-br[b-t84ta7l6fy] {
    color: var(--bs-danger);
    border-color: var(--bs-danger);
}

.game-result-maxcoop[b-t84ta7l6fy] {
    font-size: 0.78rem;
    color: var(--bs-secondary-color);
}

.game-result-propose[b-t84ta7l6fy] {
    flex-shrink: 0;
}

/* Colonne principale (propositions) + sidebar membres, "à la Discord" : même
   largeur que la navbar du site, avatar/pseudo/rôle par ligne. Sa hauteur
   est fixée à celle du viewport (moins la topbar) plutôt que de s'arrêter
   après le dernier membre : sans ça, sa boîte était courte alors que la
   liste de propositions à côté est bien plus longue, laissant un grand vide
   "nu" (fond de page, sans bordure) sous le bloc membres. Avec une hauteur
   fixe + sticky, son propre fond/sa bordure comblent cet espace comme un
   vrai panneau, façon sidebar Discord, et défilent en interne
   (overflow-y: auto) si jamais la liste de membres dépasse. Sur mobile,
   elle repasse simplement sous le contenu principal. */
.circle-detail-layout[b-t84ta7l6fy] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    align-items: start;
}

@media (min-width: 900px) {
    .circle-detail-layout[b-t84ta7l6fy] {
        grid-template-columns: 1fr 250px;
    }

    .circle-members-sidebar[b-t84ta7l6fy] {
        position: sticky;
        top: 1rem;
        height: calc(100vh - 5.5rem);
        overflow-y: auto;
    }

    /* Même formule de hauteur que .circle-members-sidebar : le panneau
       principal devient lui aussi un bloc qui défile en interne, avec sa
       propre barre de scroll à son bord droit — donc entre la liste des
       propositions et le bloc membres, plutôt qu'au bord de la fenêtre.
       padding-right : réserve la place de la barre de scroll pour qu'elle
       ne se superpose pas au contenu (boutons/texte collés au bord droit). */
    .circle-main-col[b-t84ta7l6fy] {
        height: calc(100vh - 5.5rem);
        overflow-y: auto;
        padding-right: 0.75rem;
    }
}

.circle-members-sidebar[b-t84ta7l6fy] {
    background-color: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: 12px;
    padding: 1rem;
}

/* Avatar du cercle, déplacé ici depuis .circle-top-row et agrandi : centré
   au-dessus du bloc Membres plutôt qu'isolé en haut à gauche de main. */
.members-sidebar-avatar[b-t84ta7l6fy] {
    display: flex;
    justify-content: center;
    margin-bottom: 1rem;
}

    .members-sidebar-avatar[b-t84ta7l6fy]  .avatar-wrapper {
        width: 88px;
        height: 88px;
    }

.members-sidebar-title[b-t84ta7l6fy] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-weight: 700;
    color: var(--bs-secondary-color);
    text-transform: uppercase;
    font-size: 1.05rem;
    letter-spacing: 0.03em;
    margin-bottom: 1rem;
}

.members-sidebar-count[b-t84ta7l6fy] {
    color: var(--bs-secondary-color);
    font-weight: 700;
}

.members-sidebar-list[b-t84ta7l6fy] {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.member-row[b-t84ta7l6fy] {
    display: flex;
    align-items: center;
    gap: 0.85rem;
}

/* Éléments agrandis (avatar/pseudo/étiquette) en gardant les mêmes
   proportions qu'avant : la hauteur combinée de .member-row-pseudo +
   .member-role-badge reste à peu près égale à la hauteur de
   .member-row-avatar. Tailles réduites à mi-chemin entre la version
   d'origine (36px/0.9rem/0.65rem) et la 1ère version agrandie
   (56px/1.4rem/1rem). */
.member-row-avatar[b-t84ta7l6fy] {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    object-fit: cover;
    background-color: var(--bs-tertiary-bg);
    flex-shrink: 0;
}

.member-row-info[b-t84ta7l6fy] {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
}

.member-row-pseudo[b-t84ta7l6fy] {
    font-weight: 600;
    font-size: 1.15rem;
    color: var(--bs-body-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.member-role-badge[b-t84ta7l6fy] {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    padding: 0.08rem 0.65rem;
    border-radius: 999px;
    font-size: 0.82rem;
    font-weight: 700;
    border: 1px solid transparent;
    background: transparent;
    line-height: 1.4;
}

.member-role-badge.role-admin[b-t84ta7l6fy] {
    color: var(--bs-primary);
    border-color: var(--bs-primary);
}

.member-role-badge.role-membre[b-t84ta7l6fy] {
    color: var(--bs-secondary-color);
    border-color: var(--bs-secondary-color);
}
/* /Components/Pages/Cercles/MesCercles.razor.rz.scp.css */
.circles-page-mark-wrap[b-fiyhunnjzu] {
    display: flex;
    justify-content: center;
    margin-bottom: 1.5rem;
}

.circles-page-mark[b-fiyhunnjzu] {
    height: 96px;
    width: auto;
}

.circles-cta-btn[b-fiyhunnjzu] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.circle-rows[b-fiyhunnjzu] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.circle-row-card[b-fiyhunnjzu] {
    background-color: var(--bs-secondary-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: 12px;
    padding: 1rem 1.25rem;
    box-sizing: border-box;
    min-height: 96px;
}

.circle-row[b-fiyhunnjzu] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.circle-row-avatar[b-fiyhunnjzu] {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    object-fit: cover;
    background-color: var(--bs-tertiary-bg);
    flex-shrink: 0;
}

.circle-row-info[b-fiyhunnjzu] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    min-width: 0;
}

.circle-row-name[b-fiyhunnjzu] {
    font-weight: 700;
    font-size: 1.6rem;
    color: var(--bs-body-color);
    text-decoration: none;
}

    a.circle-row-name:hover[b-fiyhunnjzu] {
        color: var(--bs-primary);
    }

.circle-row-tags[b-fiyhunnjzu] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.circle-role-badge[b-fiyhunnjzu] {
    display: inline-flex;
    align-items: center;
    padding: 0.15rem 0.65rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    border: 1px solid transparent;
    background: transparent;
    line-height: 1.4;
}

.circle-role-badge.role-admin[b-fiyhunnjzu] {
    color: var(--bs-primary);
    border-color: var(--bs-primary);
}

.circle-role-badge.role-membre[b-fiyhunnjzu] {
    color: var(--bs-secondary-color);
    border-color: var(--bs-secondary-color);
}

.circle-role-badge.role-pending[b-fiyhunnjzu] {
    color: var(--bs-info);
    border-color: var(--bs-info);
}

.circle-role-badge.stat-success[b-fiyhunnjzu] {
    color: var(--bs-success);
    border-color: var(--bs-success);
}

/* Bleu (--bs-info), comme l'étiquette "En cours" des propositions (voir
   Detail.razor, StatusBadgeClass) : la couleur neutre d'origine faisait
   doublon avec celle de l'étiquette "Membre" juste à côté. */
.circle-role-badge.stat-neutral[b-fiyhunnjzu] {
    color: var(--bs-info);
    border-color: var(--bs-info);
}

.pending-request-badge[b-fiyhunnjzu] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    border: none;
    cursor: pointer;
    font-family: inherit;
}

.circle-row-right[b-fiyhunnjzu] {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    margin-left: auto;
    flex-shrink: 0;
}

.circle-row-members[b-fiyhunnjzu] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.3rem;
}

.circle-row-members-count[b-fiyhunnjzu] {
    font-weight: 700;
    font-size: 1rem;
    color: var(--bs-secondary-color);
    white-space: nowrap;
}

.circle-row-members-avatars[b-fiyhunnjzu] {
    display: flex;
    align-items: center;
}

.circle-member-avatar[b-fiyhunnjzu] {
    margin-left: -10px;
    border: 2px solid var(--bs-secondary-bg);
    background-color: var(--bs-tertiary-bg);
    object-fit: cover;
    /* position: relative + z-index au survol : les avatars se chevauchent
       (margin-left négatif), donc sans ça l'agrandissement serait à moitié
       recouvert par le voisin suivant dans la pile. */
    position: relative;
    transition: transform 0.15s ease;
}

    .circle-member-avatar:first-child[b-fiyhunnjzu] {
        margin-left: 0;
    }

    .circle-member-avatar:hover[b-fiyhunnjzu] {
        transform: scale(1.15);
        z-index: 2;
    }

.circle-member-more[b-fiyhunnjzu] {
    margin-left: 6px;
    font-size: 0.85rem;
    color: var(--bs-secondary-color);
    font-weight: 700;
}

.circle-row-actions[b-fiyhunnjzu] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.circle-action-btn[b-fiyhunnjzu] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    border-radius: 20px;
    border: 1px solid var(--bs-border-color);
    background: transparent;
    color: var(--bs-secondary-color);
    padding: 0.4rem 0.55rem;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.circle-action-label[b-fiyhunnjzu] {
    max-width: 0;
    overflow: hidden;
    white-space: nowrap;
    opacity: 0;
    font-size: 0.8rem;
    font-weight: 600;
    transition: max-width 0.2s ease, opacity 0.2s ease;
}

.circle-action-btn:hover .circle-action-label[b-fiyhunnjzu],
.circle-action-btn:focus .circle-action-label[b-fiyhunnjzu] {
    max-width: 120px;
    opacity: 1;
}

.circle-action-share:hover[b-fiyhunnjzu],
.circle-action-share:focus[b-fiyhunnjzu],
.circle-action-leave:hover[b-fiyhunnjzu],
.circle-action-leave:focus[b-fiyhunnjzu] {
    background-color: var(--bs-secondary-color);
    color: var(--bs-body-bg);
    border-color: var(--bs-secondary-color);
}

.circle-action-delete[b-fiyhunnjzu] {
    border-color: var(--bs-danger);
    color: var(--bs-danger);
}

    .circle-action-delete:hover[b-fiyhunnjzu],
    .circle-action-delete:focus[b-fiyhunnjzu] {
        background-color: var(--bs-danger);
        color: #fff;
    }
/* /Components/Shared/CircleAvatarEditor.razor.rz.scp.css */
.avatar-editor[b-lv9ocblut0] {
    display: inline-block;
}

.avatar-wrapper[b-lv9ocblut0] {
    position: relative;
    width: 72px;
    height: 72px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: none;
    cursor: default;
    overflow: hidden;
}

    .avatar-wrapper.is-editable[b-lv9ocblut0] {
        cursor: pointer;
    }

.avatar-image[b-lv9ocblut0] {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    display: block;
}

.avatar-edit-overlay[b-lv9ocblut0] {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: rgba(0, 0, 0, 0.45);
    opacity: 0;
    transition: opacity 0.15s ease;
}

.avatar-wrapper.is-editable:hover .avatar-edit-overlay[b-lv9ocblut0] {
    opacity: 1;
}

/* Propriétés communes (fond, padding, box-shadow...) dans app.css : ici, on
   ne garde que ce qui diffère des autres modales du site. */
.modal-box[b-lv9ocblut0] {
    border-radius: 8px;
    min-width: 320px;
}

.crop-canvas-wrapper[b-lv9ocblut0] {
    display: flex;
    justify-content: center;
}

.crop-canvas-wrapper canvas[b-lv9ocblut0] {
    border-radius: 8px;
    background: var(--bs-tertiary-bg);
    cursor: grab;
    touch-action: none;
}

    .crop-canvas-wrapper canvas:active[b-lv9ocblut0] {
        cursor: grabbing;
    }
/* /Components/Shared/CircleJoinCreateModal.razor.rz.scp.css */
/* Propriétés communes (fond, padding, box-shadow...) dans app.css : ici, on
   ne garde que ce qui diffère des autres modales du site. */
.modal-box[b-z64o12c97n] {
    border-radius: 10px;
    min-width: 340px;
}

.modal-tabs[b-z64o12c97n] {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    margin-bottom: 1.25rem;
}

.modal-tab[b-z64o12c97n] {
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    padding: 0.4rem 0.1rem;
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--bs-secondary-color);
    cursor: pointer;
    transition: color 0.15s ease, border-color 0.15s ease;
}

    .modal-tab:hover[b-z64o12c97n] {
        color: var(--bs-body-color);
    }

    .modal-tab.active[b-z64o12c97n] {
        color: var(--bs-primary);
        border-color: var(--bs-primary);
    }

.modal-close[b-z64o12c97n] {
    margin-left: auto;
    background: none;
    border: none;
    font-size: 1.4rem;
    line-height: 1;
    color: var(--bs-secondary-color);
    cursor: pointer;
    padding: 0 0.25rem;
    transition: color 0.15s ease;
}

    .modal-close:hover[b-z64o12c97n] {
        color: var(--bs-primary);
    }

.join-code-display[b-z64o12c97n] {
    font-size: 1.3rem;
    letter-spacing: 2px;
}
/* /Components/Shared/CircleRequestsModal.razor.rz.scp.css */
/* Propriétés communes (fond, padding, box-shadow...) dans app.css : ici, on
   ne garde que ce qui diffère des autres modales du site. */
.modal-box[b-oc4hv21oib] {
    border-radius: 10px;
    min-width: 460px;
    max-height: 80vh;
    overflow-y: auto;
}

.modal-header-row[b-oc4hv21oib] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.25rem;
}

.modal-title-group[b-oc4hv21oib] {
    display: flex;
    align-items: center;
    gap: 0.55rem;
}

.modal-title-icon[b-oc4hv21oib] {
    color: var(--bs-primary);
    flex-shrink: 0;
}

.modal-title-text[b-oc4hv21oib] {
    margin: 0;
    font-weight: 700;
}

.modal-close[b-oc4hv21oib] {
    background: none;
    border: none;
    font-size: 1.4rem;
    line-height: 1;
    color: var(--bs-secondary-color);
    cursor: pointer;
    padding: 0 0.25rem;
    transition: color 0.15s ease;
}

    .modal-close:hover[b-oc4hv21oib] {
        color: var(--bs-primary);
    }

.requests-empty[b-oc4hv21oib] {
    color: var(--bs-secondary-color);
}

.requests-group[b-oc4hv21oib] {
    padding-top: 1rem;
    border-top: 1px solid var(--bs-border-color);
}

    .requests-group:first-of-type[b-oc4hv21oib] {
        padding-top: 0;
        border-top: none;
    }

    .requests-group + .requests-group[b-oc4hv21oib] {
        margin-top: 1rem;
    }

.requests-circle-name[b-oc4hv21oib] {
    margin: 0 0 0.6rem;
    font-weight: 700;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--bs-secondary-color);
}

.requests-list[b-oc4hv21oib] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.request-row[b-oc4hv21oib] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    background-color: var(--bs-tertiary-bg);
    border-radius: 10px;
    padding: 0.6rem 0.75rem;
}

.request-avatar[b-oc4hv21oib] {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    background-color: var(--bs-secondary-bg);
    flex-shrink: 0;
}

.request-info[b-oc4hv21oib] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
    margin-right: auto;
}

.request-pseudo[b-oc4hv21oib] {
    font-weight: 700;
    color: var(--bs-body-color);
    font-size: 0.95rem;
}

.request-date[b-oc4hv21oib] {
    font-size: 0.75rem;
    color: var(--bs-secondary-color);
}

.request-actions[b-oc4hv21oib] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-shrink: 0;
}

.request-btn[b-oc4hv21oib] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    border-radius: 20px;
    padding: 0.35rem 0.65rem;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.request-approve[b-oc4hv21oib] {
    border: 1px solid var(--bs-success);
    background-color: transparent;
    color: var(--bs-success);
}

    .request-approve:hover[b-oc4hv21oib] {
        background-color: var(--bs-success);
        color: #fff;
    }

.request-reject[b-oc4hv21oib] {
    border: 1px solid var(--bs-danger);
    background-color: transparent;
    color: var(--bs-danger);
}

    .request-reject:hover[b-oc4hv21oib] {
        background-color: var(--bs-danger);
        color: #fff;
    }