/* =============================================================================
   Indeso Design System - charpente d'ecran
   -----------------------------------------------------------------------------
   Styles de la structure d'une application : barre laterale, barre de titre,
   zone de contenu. Separes de components.css parce qu'ils decrivent une mise
   en page et non des composants autonomes : une application charge toujours
   l'ensemble, alors qu'elle pourrait n'utiliser qu'une partie des composants.

   Origine : les regles .bcy-* de Naruto.SharedUI/wwwroot/css/global.css, et le
   bloc <style> de MyStickyAppBar.razor. Le prefixe passe de bcy- a my-, et les
   couleurs en dur (#EF7C59, #373854, #888, #fdf2ef...) passent par les tokens,
   ce qui rend la navigation rehabillable par client.
   ============================================================================= */


/* =============================================================================
   MyShell - conteneur racine
   ============================================================================= */

.my-shell {
    display: flex;
    flex-direction: row;
    height: 100vh;
    width: 100%;
    overflow: hidden;
    color: var(--my-text-heading);
}

.my-shell-main {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-width: 0;
    height: 100vh;
    overflow: hidden;
    background-color: var(--my-surface-page);
}

.my-main-content {
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;

    /*  La marge de l'ecran est publiee, et pas seulement appliquee.

        Une bande qui doit filer d'un bord a l'autre - MySummaryStrip - a besoin de
        la connaitre pour l'annuler. Elle en codait 24 px en dur : dans cette pile,
        qui en pose 16, la bande depassait donc de 8 px de chaque cote. */
    --my-page-marge: var(--my-space-md);
    padding: var(--my-page-marge);

    /*  Defilement fluide vers les ancres.

        Blazor traite lui-meme les fragments d'adresse et amene l'element cible a
        l'ecran, mais sans animation : le saut est brutal et l'on perd le fil de
        l'endroit d'ou l'on vient. Le regler ici plutot qu'en JavaScript couvre
        aussi bien le defilement declenche par Blazor que celui demande par du
        code, sans avoir a se coordonner avec lui.

        Une remise en haut lors d'un changement d'ecran doit en revanche rester
        instantanee : elle passe un behavior explicite, qui l'emporte sur cette
        regle.

        A SAVOIR SI LE DEFILEMENT VERS LES ANCRES CESSE DE FONCTIONNER
        Cette regle n'a pas pu etre validee automatiquement : dans un onglet pilote
        par outillage, les defilements animes ne s'executent pas, et l'activer y
        supprime tout defilement programmatique. Le comportement attendu dans un
        navigateur ordinaire est un deplacement fluide vers la section visee.
        Si un doute survient, passer cette valeur a auto retablit le saut immediat,
        qui lui est verifie. */
    scroll-behavior: smooth;
}

/*  UN ECRAN QUI S'OUVRE SUR UNE BANDE N'A PAS DE MARGE EN HAUT

    Un ecran de fiche commence par un bandeau de synthese, qui prolonge la barre de
    titre : les deux surfaces blanches doivent se toucher. La marge interne de la
    zone de contenu laissait entre elles un filet gris de 16 px, qui se lisait comme
    un defaut d'alignement plutot que comme une respiration.

    La regle ne vise que les ecrans concernes, ceux dont la bande est le premier
    element : une page de documentation garde sa marge haute. */
.my-main-content:has(> .my-summary-strip) {
    padding-top: 0;
}

/*  LA BARRE D'ONGLETS SUIT LA BANDE, D'UN BORD A L'AUTRE

    Sous une bande pleine largeur, une barre d'onglets laissee dans la marge dessine
    un bloc blanc plus etroit que celle du dessus, avec une gouttiere grise de chaque
    cote. Elle ressort donc de la marge et la reprend a l'interieur : le fond couvre
    toute la largeur, tandis que les libelles restent sur le bord commun - c'est la
    marge du contenu, pas celle du composant.

    Meme procede que .my-summary-strip, et pour la meme raison. Restreint aux ecrans
    qui ouvrent sur une bande : ailleurs MyTabs est un composant parmi d'autres, qui
    doit rester dans le flux.

    Les panneaux, eux, gardent la marge : c'est le contenu de l'onglet, et il
    s'aligne sur le reste de l'ecran. */
.my-main-content:has(> .my-summary-strip) > .mud-tabs > .mud-tabs-tabbar {
    margin-left: calc(-1 * var(--my-page-marge));
    margin-right: calc(-1 * var(--my-page-marge));
    padding-left: var(--my-page-marge);
    padding-right: var(--my-page-marge);
}

/* Respecte le reglage systeme de reduction des animations : un defilement anime
   peut provoquer un malaise chez les personnes sensibles au mouvement. */
@media (prefers-reduced-motion: reduce) {
    .my-main-content {
        scroll-behavior: auto;
    }
}


/* =============================================================================
   MyStickyAppBar
   Anciennement le bloc <style> du composant, qui portait huit !important.
   Ils sont devenus inutiles : la specificite des selecteurs ci-dessous suffit
   a depasser celle de MudBlazor.
   ============================================================================= */

.mud-paper.my-appbar {
    position: sticky;
    top: 0;
    z-index: var(--my-z-sticky);
    flex: 0 0 auto;
    height: var(--my-appbar-height);
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--my-border-subtle);
}

.my-appbar__inner {
    height: 100%;
    padding: 0 var(--my-space-lg);
}

.my-appbar__title-block {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}

.my-appbar__icon-pill {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    flex-shrink: 0;
    border-radius: var(--my-radius-md);
    background: rgba(var(--my-brand-primary-rgb), 0.12);
    transition: transform 0.25s ease, background 0.25s ease;
}

.my-appbar__icon-pill:hover {
    transform: rotate(-6deg);
    background: rgba(var(--my-brand-primary-rgb), 0.18);
}

.my-appbar__icon-pill .mud-icon-root {
    color: var(--my-action-primary);
}

.my-appbar__text {
    min-width: 0;
    line-height: 1.15;
}

.mud-typography.my-appbar__title {
    margin: 0;
    font-size: 1.25rem;
    font-weight: var(--my-font-weight-heavy);
    color: var(--my-text-heading);
    letter-spacing: -0.3px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mud-typography.my-appbar__subtitle {
    margin: 1px 0 0;
    font-size: 0.78rem;
    font-weight: var(--my-font-weight-medium);
    color: var(--my-text-muted);
    letter-spacing: 0.1px;
}

.my-appbar__actions {
    flex-shrink: 0;
}

@media (max-width: 768px) {
    .my-appbar__inner {
        padding: 0 var(--my-space-md);
    }

    /* Sous 768 px, le sous-titre passerait sur deux lignes et ferait deborder
       la barre : il est masque plutot que tronque. */
    .mud-typography.my-appbar__subtitle {
        display: none;
    }
}


/* =============================================================================
   MyNavSidebar
   ============================================================================= */

.my-sidebar {
    position: relative;
    z-index: var(--my-z-drawer);
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    height: 100vh;
    background-color: var(--my-surface-card);
    border-right: 1px solid var(--my-border-default);
    box-shadow: 4px 0 18px rgba(var(--my-neutral-800-rgb), 0.06);
    transition: width 220ms cubic-bezier(0.4, 0, 0.2, 1);
}

.my-sidebar.is-open { width: var(--my-sidebar-width); }
.my-sidebar.is-mini { width: var(--my-sidebar-width-mini); }

/*  UNE BARRE PRESENTEE DANS UNE PAGE NE MONTE PAS AU NIVEAU DU TIROIR

    La regle ci-dessus place toute barre au niveau du tiroir, ce qui est juste pour la
    navigation de l'application - elle doit passer au-dessus du contenu. Un exemple
    presente dans une page, lui, EST du contenu.

    A ce niveau, et plus loin dans le DOM, il se peignait par-dessus le tiroir ouvert :
    sur un ecran etroit, un exemple flottait au milieu de la navigation. Sur un ecran de
    bureau, le meme niveau l'aurait fait recouvrir une liste deroulante, qui vit plus
    bas.

    La regle vaut donc a toutes les largeurs, et pas seulement en mode tiroir. */
.my-sidebar--inline {
    z-index: auto;
}

/* ---- Bouton de replis, sur le bord droit ----
   Invisible au repos, revele au survol de la barre : il ne consomme aucune
   place a l'ecran tout en restant atteignable au clavier. */

.my-sidebar-toggle {
    position: absolute;
    top: 56px;
    right: -14px;
    z-index: 70;
    width: 28px;
    height: 28px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--my-border-subtle);
    border-radius: var(--my-radius-full);
    background-color: var(--my-surface-card);
    color: var(--my-text-heading);
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(var(--my-neutral-800-rgb), 0.12);
    opacity: 0;
    transform: translateX(-4px);
    transition: opacity 0.18s ease, transform 0.18s ease,
                background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.my-sidebar:hover .my-sidebar-toggle,
.my-sidebar-toggle:focus-visible {
    opacity: 1;
    transform: translateX(0);
}

.my-sidebar-toggle:hover {
    background-color: var(--my-brand-primary-subtle);
    border-color: var(--my-action-primary);
    color: var(--my-action-primary);
}

/* ---- Voile du mode tiroir ----
   Masque par defaut : sur un ecran de bureau la barre ne recouvre rien. La media
   query ci-dessous le revele. */

.my-sidebar-voile {
    display: none;
}

/*  Le hamburger de la barre de titre n'existe qu'en mode tiroir : hors de ce mode, la
    barre laterale est visible et porte son propre bouton de replis.

    Cette regle est posee AVANT la media query qui la revele. Ecrite apres, elle
    l'emportait a specificite egale - la derniere declaration gagne - et le bouton
    restait masque sur mobile, donc le tiroir inouvrable. */
.my-appbar__menu {
    display: none;
}

/* =============================================================================
   MODE TIROIR - sous 960 px

   Sur un ecran de bureau la barre partage la largeur avec le contenu : elle occupe
   sa place dans la rangee, et se replie en rail d'icones. Sur un telephone il n'y a
   pas de largeur a partager - un rail de 60 px ampute deja le contenu, et le rail
   n'aide personne. La barre sort donc du flux et se superpose.

   LES DEUX CLASSES EXISTANTES CHANGENT DE SENS
   is-open et is-mini ne commandent plus une largeur mais une position : le tiroir est
   soit en place, soit hors ecran. La largeur ne varie plus, et la transition porte sur
   transform - une propriete que le navigateur anime sans recalculer la mise en page,
   la ou une largeur animee reflow la page entiere a chaque image.

   Le seuil est ecrit en 959.98px et non 960px : c'est ainsi que MudBlazor formule ses
   propres bornes, et un seuil a 960 laisserait une fenetre de exactement 960 px
   satisfaire les deux regles. La meme valeur est lue en JavaScript par le composant,
   qui a besoin de connaitre le mode pour fermer le tiroir a la navigation.
   ============================================================================= */

/*  LE MODE NE VISE PAS TOUTE BARRE PRESENTE DANS LA PAGE

    Une barre presentee a l'interieur d'un contenu - un exemple de documentation - garde
    sa place dans le flux : la classe my-sidebar--inline, posee par le parametre Inline,
    l'exclut de tout ce qui suit.

    Sans cette exclusion, chaque barre de la page devenait un tiroir plein ecran et
    quittait le cadre qui la bornait. La page de documentation de ce composant en montre
    deux : avec celle de l'application, trois tiroirs se superposaient a l'ecran. */
@media (max-width: 959.98px) {

    .my-sidebar:not(.my-sidebar--inline) {
        position: fixed;
        top: 0;
        left: 0;
        z-index: var(--my-z-drawer);

        /* La largeur ne depasse pas l'ecran : sur un telephone etroit, une barre de
           260 px laisserait moins de 120 px au contenu qu'elle recouvre, et l'on ne
           verrait plus ou l'on se trouve. */
        width: min(var(--my-sidebar-width), 86vw);

        transition: transform 220ms cubic-bezier(0.4, 0, 0.2, 1);
    }

    .my-sidebar:not(.my-sidebar--inline).is-open {
        width: min(var(--my-sidebar-width), 86vw);
        transform: translateX(0);
    }

    /* Hors ecran, et non reduit : le rail d'icones n'a pas de sens ici. Le decalage
       depasse la largeur de 1 px pour que l'ombre portee ne laisse pas une trace sur
       le bord de l'ecran. */
    .my-sidebar:not(.my-sidebar--inline).is-mini {
        width: min(var(--my-sidebar-width), 86vw);
        transform: translateX(calc(-100% - 1px));
    }

    /*  Le bouton de replis disparait en mode tiroir.

        Il vit sur le bord droit de la barre et n'apparait qu'au survol - or il n'y a pas
        de survol au doigt, et il se superposerait au contenu que le tiroir recouvre. La
        fermeture passe par le voile, par Echap et par la navigation ; l'ouverture par le
        bouton de la barre de titre.

        Un exemple inline garde le sien : c'est justement ce qu'il demontre. */
    .my-sidebar:not(.my-sidebar--inline) .my-sidebar-toggle {
        display: none;
    }

    .my-sidebar-voile {
        display: block;
        position: fixed;
        inset: 0;

        /* Sous le tiroir, au-dessus de tout le reste. */
        z-index: calc(var(--my-z-drawer) - 1);

        background-color: rgba(var(--my-neutral-800-rgb), 0.45);
    }

    /* Le hamburger de la barre de titre n'existe que dans ce mode. */
    .my-appbar__menu {
        display: inline-flex;
    }
}

/*  Les animations sont coupees pour qui les refuse.

    Un tiroir qui glisse sur toute la largeur de l'ecran est precisement le mouvement
    qui gene les personnes sensibles - il apparait donc d'un coup, sans perdre aucune
    fonction. */
@media (prefers-reduced-motion: reduce) {
    .my-sidebar {
        transition: none;
    }
}

/* ---- Zone de logo ---- */

.my-sidebar-brand {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    height: var(--my-appbar-height);
    padding: 0 18px;
    border-bottom: 1px solid var(--my-border-subtle);
    background: linear-gradient(180deg, var(--my-brand-primary-subtle) 0%, var(--my-surface-card) 100%);
}

.my-sidebar-logo {
    display: block;
    height: 38px;
    width: auto;
    object-fit: contain;
}

.my-sidebar-logo-mini {
    display: block;
    height: 38px;
    width: 38px;
    border-radius: 50%;
    object-fit: cover;
    object-position: 0 50%;
}

/* Repli tant qu'aucun logo n'est fourni. */
.my-sidebar-logo-text {
    font-size: var(--my-font-size-lg);
    font-weight: var(--my-font-weight-heavy);
    color: var(--my-action-primary);
    letter-spacing: -0.3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ---- Navigation ---- */

.my-sidebar-nav {
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    padding: var(--my-space-md) 12px 12px;
    scrollbar-width: thin;
    scrollbar-color: var(--my-neutral-300) transparent;
}

.my-sidebar-nav::-webkit-scrollbar { width: 6px; }

.my-sidebar-nav::-webkit-scrollbar-thumb {
    background: var(--my-neutral-300);
    border-radius: 3px;
}

.my-sidebar.is-mini .my-sidebar-nav { padding: var(--my-space-md) 0; }

/* ---- Intitule de section ---- */

.my-nav-section {
    display: flex;
    align-items: center;
    gap: var(--my-space-sm);
    padding: 6px 12px 8px;
    font-size: 0.66rem;
    font-weight: var(--my-font-weight-black);
    letter-spacing: 1.8px;
    text-transform: uppercase;
    color: var(--my-action-primary);
    user-select: none;
}

.my-nav-section:not(:first-child) { padding-top: 18px; }

.my-nav-section-bullet {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--my-action-primary) 0%, var(--my-action-primary-hover) 100%);
    box-shadow: 0 0 0 3px rgba(var(--my-brand-primary-rgb), 0.15);
}

/* ---- Lien principal ---- */

.my-navlink {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    margin: 3px 0;
    padding: 12px 14px;
    box-sizing: border-box;
    border: none;
    border-radius: var(--my-radius-md);
    background: transparent;
    color: var(--my-text-heading);
    font-size: 0.92rem;
    font-weight: var(--my-font-weight-bold);
    letter-spacing: -0.1px;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.18s cubic-bezier(0.4, 0, 0.2, 1);
}

.my-navlink .mud-icon-root.my-navlink-icon {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    font-size: 22px;
    color: var(--my-text-muted);
    transition: color 0.18s ease;
}

.my-navlink-text {
    flex: 1 1 auto;
    color: inherit;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.my-navlink:hover {
    background-color: var(--my-brand-primary-subtle);
    color: var(--my-action-primary);
    transform: translateX(2px);
    text-decoration: none;
}

.my-navlink:hover .mud-icon-root.my-navlink-icon {
    color: var(--my-action-primary);
}

/* La classe active est posee par le composant NavLink d'ASP.NET, qui compare
   l'URL courante a Href. */
.my-navlink.active {
    background: linear-gradient(135deg, var(--my-action-primary) 0%, var(--my-action-primary-hover) 100%);
    color: var(--my-action-primary-text);
    font-weight: var(--my-font-weight-heavy);
    box-shadow: 0 6px 18px rgba(var(--my-brand-primary-rgb), 0.4);
    transform: none;
}

.my-navlink.active .my-navlink-text,
.my-navlink.active .mud-icon-root.my-navlink-icon {
    color: var(--my-action-primary-text);
}

.my-navlink.active:hover { transform: none; }

/* ---- Sous-lien ---- */

.my-sublink {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 2px 0;
    padding: 9px 12px;
    border-radius: 10px;
    color: var(--my-text-muted);
    font-size: 0.86rem;
    font-weight: var(--my-font-weight-medium);
    text-decoration: none;
    transition: all 0.18s ease;
}

.my-sublink-bullet {
    flex: 0 0 auto;
    display: inline-block;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background-color: var(--my-neutral-300);
    transition: background-color 0.18s ease, transform 0.18s ease;
}

.my-sublink-text { color: inherit; }

.my-sublink:hover {
    background-color: var(--my-brand-primary-subtle);
    color: var(--my-action-primary);
    transform: translateX(2px);
    text-decoration: none;
}

.my-sublink:hover .my-sublink-bullet {
    background-color: var(--my-action-primary);
    transform: scale(1.3);
}

.my-sublink.active {
    background: linear-gradient(135deg, var(--my-action-primary) 0%, var(--my-action-primary-hover) 100%);
    color: var(--my-action-primary-text);
    font-weight: var(--my-font-weight-heavy);
    box-shadow: 0 4px 14px rgba(var(--my-brand-primary-rgb), 0.35);
    transform: none;
}

.my-sublink.active .my-sublink-text { color: var(--my-action-primary-text); }

.my-sublink.active .my-sublink-bullet {
    background-color: var(--my-action-primary-text);
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.4);
}

/* ---- Barre repliee : le lien devient un carre a icone ----

   Le carre est accroche a .my-navlink-mini, l'enveloppe que le composant produit
   lui-meme quand il est replie, et non a l'etat de la barre laterale. Une entree
   repliee se dessine donc correctement partout - y compris hors de la barre, ce
   dont la vitrine a besoin pour la montrer. */

.my-navlink-mini {
    position: relative;
    display: flex;
    justify-content: center;
}

.my-navlink-mini .my-navlink {
    width: 52px;
    height: 52px;
    margin: 4px auto;
    padding: 0;
    border-radius: 14px;
    justify-content: center;
}

.my-navlink-mini .my-navlink:hover,
.my-navlink-mini .my-navlink.active { transform: none; }


/* =============================================================================
   Pied de barre laterale : utilisateur et version
   ============================================================================= */

.my-sidebar-footer {
    position: relative;
    flex: 0 0 auto;
    padding: 12px;
    border-top: 1px solid var(--my-border-subtle);
    background-color: var(--my-neutral-50);
}

.my-sidebar.is-mini .my-sidebar-footer {
    padding: 12px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.my-user-wrap { position: relative; }

.my-user-card {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 10px 12px;
    box-sizing: border-box;
    background-color: var(--my-surface-card);
    border: 1.5px solid var(--my-border-subtle);
    border-radius: 14px;
    text-align: left;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(var(--my-neutral-800-rgb), 0.04);
    transition: all 0.18s ease;
}

.my-user-card:hover {
    border-color: var(--my-action-primary);
    background-color: var(--my-brand-primary-subtle);
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(var(--my-brand-primary-rgb), 0.16);
}

.my-user-card.mini {
    width: 52px;
    height: 52px;
    padding: 0;
    justify-content: center;
    border-radius: 14px;
}

.my-user-text {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    overflow: hidden;
    line-height: 1.2;
}

.my-user-name {
    max-width: 100%;
    font-size: 0.88rem;
    font-weight: var(--my-font-weight-heavy);
    color: var(--my-text-heading);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.my-user-mail {
    max-width: 100%;
    margin-top: 1px;
    font-size: 0.72rem;
    font-weight: var(--my-font-weight-medium);
    color: var(--my-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.my-user-card .mud-icon-root.my-user-chev {
    flex: 0 0 auto;
    font-size: 18px;
    color: var(--my-neutral-400);
    transition: color 0.18s ease;
}

.my-user-card:hover .mud-icon-root.my-user-chev {
    color: var(--my-action-primary);
}

/* ---- Avatar ---- */

.my-avatar {
    position: relative;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--my-action-primary) 0%, var(--my-action-primary-hover) 100%);
    color: var(--my-action-primary-text);
    font-size: 0.78rem;
    font-weight: var(--my-font-weight-black);
    letter-spacing: 0.4px;
    box-shadow: 0 4px 12px rgba(var(--my-brand-primary-rgb), 0.3);
}

.my-avatar-lg {
    width: 52px;
    height: 52px;
    font-size: 1rem;
    box-shadow: 0 6px 18px rgba(var(--my-brand-primary-rgb), 0.35);
}

/* ---- Version ---- */

.my-version-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 6px 2px;
}

.my-version-label {
    font-size: 0.66rem;
    font-weight: var(--my-font-weight-heavy);
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--my-neutral-400);
}

.my-version-tag {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border: 1px solid rgba(var(--my-brand-primary-rgb), 0.25);
    border-radius: var(--my-radius-full);
    background-color: var(--my-brand-primary-subtle);
    color: var(--my-action-primary);
    font-size: 0.7rem;
    font-weight: var(--my-font-weight-heavy);
    letter-spacing: 0.2px;
}

/* ---- Menu utilisateur ---- */

.my-user-popover {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 0;
    right: 0;
    z-index: var(--my-z-dropdown);
    background-color: var(--my-surface-card);
    border: 1px solid var(--my-border-subtle);
    border-radius: 18px;
    box-shadow: 0 20px 50px rgba(var(--my-neutral-800-rgb), 0.22);
    overflow: hidden;
}

/* Barre repliee : le menu s'ouvre a cote et non au-dessus, faute de largeur. */
.my-user-popover-mini {
    left: calc(100% + 12px);
    right: auto;
    bottom: 0;
    width: 280px;
}

.my-user-popover-header {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 18px 16px;
    border-bottom: 1px solid var(--my-border-subtle);
    background: linear-gradient(135deg, var(--my-brand-primary-subtle) 0%, var(--my-surface-card) 100%);
}

.my-user-popover-info {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
}

.my-user-popover-name {
    font-size: 1rem;
    font-weight: var(--my-font-weight-heavy);
    color: var(--my-text-heading);
    line-height: 1.25;
}

.my-user-popover-mail {
    margin-top: 2px;
    font-size: 0.8rem;
    font-weight: var(--my-font-weight-medium);
    color: var(--my-text-muted);
}

.my-user-popover-badge {
    display: inline-block;
    margin-top: var(--my-space-sm);
    padding: 3px 10px;
    border-radius: var(--my-radius-full);
    background-color: var(--my-action-primary);
    color: var(--my-action-primary-text);
    font-size: 0.65rem;
    font-weight: var(--my-font-weight-heavy);
    letter-spacing: 0.8px;
    text-transform: uppercase;
    box-shadow: 0 2px 6px rgba(var(--my-brand-primary-rgb), 0.3);
}

.my-user-popover-body { padding: 6px; }

.my-popover-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 12px;
    border: none;
    border-radius: 10px;
    background: transparent;
    color: var(--my-text-heading);
    font-size: 0.88rem;
    font-weight: var(--my-font-weight-bold);
    text-align: left;
    cursor: pointer;
    transition: all 0.15s ease;
}

.my-popover-item .mud-icon-root.my-popover-icon {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    font-size: 18px;
    color: var(--my-text-muted);
}

.my-popover-item:hover {
    background-color: var(--my-brand-primary-subtle);
    color: var(--my-action-primary);
}

.my-popover-item:hover .mud-icon-root.my-popover-icon {
    color: var(--my-action-primary);
}

.my-popover-danger,
.my-popover-danger .mud-icon-root.my-popover-icon {
    color: var(--my-error-500);
}

.my-popover-danger:hover {
    background-color: var(--my-error-100);
    color: var(--my-error-500);
}

.my-popover-danger:hover .mud-icon-root.my-popover-icon {
    color: var(--my-error-500);
}

.my-popover-sep {
    height: 1px;
    margin: 6px 4px;
    background-color: var(--my-border-subtle);
}

/* Surface transparente : un clic hors du menu le ferme. */
.my-backdrop {
    position: fixed;
    inset: 0;
    z-index: 900;
    background: transparent;
}


/* =============================================================================
   MyNavGroup - entree depliable
   ============================================================================= */

.my-nav-group {
    display: block;
}

/*  Le conteneur reprend l'apparence d'un lien de navigation, mais abrite deux
    zones cliquables distinctes : le libelle mene a la page, le chevron deplie.
    Le padding est porte par ces zones et non par le conteneur, afin que la
    surface cliquable couvre toute la hauteur de l'entree. */
.my-nav-group-trigger {
    display: flex;
    align-items: stretch;
    padding: 0;
    font-family: inherit;
}

.my-nav-group-label {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    padding: 12px 0 12px 14px;
    color: inherit;
    text-decoration: none;
}

.my-nav-group-label:hover {
    text-decoration: none;
}

/* Zone du chevron : assez large pour etre atteinte au doigt sans deborder sur le
   libelle, dont le clic mene ailleurs. */
.my-nav-group-toggle {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    padding: 0;
    border: none;
    background: transparent;
    color: inherit;
    cursor: pointer;
}

/* Le groupe contenant la page courante est signale par la couleur d'action, sans
   le fond plein reserve a l'entree reellement active : sinon deux elements
   paraitraient selectionnes en meme temps. */
.my-nav-group-trigger.has-active,
.my-nav-group-trigger.has-active .mud-icon-root.my-navlink-icon {
    color: var(--my-action-primary);
}

/* Sur la page courante le groupe reste ouvert de force : le chevron n'a plus
   d'effet, il est donc presente comme inactif plutot que faussement cliquable. */
.my-nav-group-trigger.has-active .my-nav-group-toggle {
    cursor: default;
    opacity: 0.4;
}

.my-nav-group-toggle .mud-icon-root.my-nav-group-chevron {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    font-size: 18px;
    color: var(--my-neutral-400);
    transition: transform 0.22s ease, color 0.18s ease;
}

.my-nav-group.is-expanded .my-nav-group-toggle .mud-icon-root.my-nav-group-chevron {
    transform: rotate(180deg);
    color: var(--my-action-primary);
}

/*  Sous-menu replie par defaut. L'animation porte sur max-height plutot que sur
    height : height ne s'anime pas depuis auto, et connaitre la hauteur exacte
    demanderait de la mesurer en JavaScript a chaque ouverture.

    La valeur depliee est un plafond genereux, pas la hauteur reelle : elle doit
    rester superieure au plus grand sous-menu, sinon celui-ci serait tronque.
    Le trait vertical a gauche rattache visuellement les sous-liens a leur
    groupe, ce que le seul retrait ne suffit pas a faire. */
.my-nav-submenu {
    max-height: 0;
    overflow: hidden;
    margin-left: 22px;
    padding-left: 12px;
    border-left: 2px solid var(--my-brand-primary-subtle);
    transition: max-height 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}

.my-nav-group.is-expanded .my-nav-submenu {
    max-height: 800px;
    padding-top: var(--my-space-xs);
    padding-bottom: 6px;
}