/* ==========================================================
   SOLSTICE : MENU BLAZOR ET FIL D'ARIANE
   Ce fichier remplace toutes les versions précédentes.

   Structure attendue :
   - Conteneur principal : .solstice-shell
   - Menu : .solstice-navbar
   - Logo et bouton placés avant .navbar-collapse
   - Liste principale : .solstice-primary-nav
   - Liste utilisateur : .solstice-account-nav

   Aucun changement de route, de droit ou de logique métier.
   ========================================================== */


/* ==========================================================
   1. VARIABLES
   ========================================================== */

.solstice-shell {
    /* Réservation du menu fixe sur grand écran.
       Cette valeur n'est pas une mesure du menu MVC. */
    --solstice-nav-height: 68px;
    --solstice-regular-statusbar-height: 40px;
    --solstice-public-statusbar-height: 211px;
    --solstice-public-content-height: calc( 100dvh - var(--solstice-nav-height) - var(--solstice-public-statusbar-height) );
    --solstice-regular-content-height: calc( 100dvh - var(--solstice-nav-height) - var(--solstice-regular-statusbar-height) );
    --solstice-breadcrumb-height: 34px; /* document.getElementsByClassName("breadcrump-wrapper")[0].offsetHeight */
    --solstice-form-buttons-height: 38px;
    --solstice-regular-form-height: calc(var(--solstice-regular-content-height) - var(--solstice-breadcrumb-height) - var(--solstice-form-buttons-height));
    --solstice-tabstrip-items-wrapper-height: 42px; /* document.getElementsByClassName("k-tabstrip-items-wrapper")[0].offsetHeight */
    --solstice-regular-form-height-tabstripped: calc(var(--solstice-regular-form-height) - var(--solstice-tabstrip-items-wrapper-height));
    --solstice-h2-height: 39px;
    --solstice-regular-form-height-tabstripped-h2-topped: calc(var(--solstice-regular-form-height-tabstripped) - var(--solstice-h2-height));
    --solstice-regular-form-height-tabstripped-double-h2-topped: calc(var(--solstice-regular-form-height-tabstripped-h2-topped) - var(--solstice-tabstrip-items-wrapper-height));
    --solstice-menu-font-size: 14px;
    --solstice-nav-text: #59636E;
    --solstice-nav-active: #24566B;
    --solstice-turquoise: #24A7CF;
    --solstice-border: #DCE3E8;
}


    /* ==========================================================
   2. BARRE PRINCIPALE
   ========================================================== */

    .solstice-shell .solstice-navbar {
        box-sizing: border-box;
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
        min-height: var(--solstice-nav-height);
        max-height: none;
        padding: 0 12px;
        background: #FFFFFF;
        border-bottom: 1px solid var(--solstice-border);
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
        font-size: var(--solstice-menu-font-size);
        line-height: 1.5;
        overflow: visible;
    }

        .solstice-shell .solstice-navbar .navbar-collapse {
            min-width: 0;
        }

        .solstice-shell .solstice-navbar .navbar-nav {
            list-style: none;
            margin-top: 0;
            margin-bottom: 0;
            padding-left: 0;
        }


        /* ==========================================================
   3. LOGO
   ========================================================== */

        .solstice-shell .solstice-navbar .navbar-brand {
            display: flex;
            align-items: center;
            flex-shrink: 0;
            margin-right: 16px;
            padding: 5px 0;
            text-decoration: none;
        }

            .solstice-shell .solstice-navbar .navbar-brand img {
                display: block;
                width: auto;
                height: auto;
                max-width: none;
                max-height: none;
            }


        /* ==========================================================
   4. LIENS PRINCIPAUX
   Couleurs MVC et barre turquoise du menu courant.
   ========================================================== */

        .solstice-shell .solstice-navbar .solstice-primary-nav {
            min-width: 0;
        }

            /* État normal : gris clair, sans barre visible. */
            .solstice-shell .solstice-navbar
            .solstice-primary-nav > .nav-item > .nav-link {
                box-sizing: border-box;
                position: relative;
                display: flex;
                align-items: center;
                min-height: var(--solstice-nav-height);
                padding: 0 8px;
                border-bottom: 3px solid transparent;
                color: #AAAAAA;
                background: transparent;
                font-family: inherit;
                font-size: var(--solstice-menu-font-size);
                font-weight: 700;
                line-height: 1.5;
                white-space: nowrap;
                text-decoration: none;
            }

                /* Survol et focus : turquoise, sans barre de sélection. */
                .solstice-shell .solstice-navbar
                .solstice-primary-nav > .nav-item > .nav-link:hover,
                .solstice-shell .solstice-navbar
                .solstice-primary-nav > .nav-item > .nav-link:focus-visible {
                    color: #24A7CF;
                    background: transparent;
                }

                /* Un sous-menu ouvert n'est pas forcément le menu courant. */
                .solstice-shell .solstice-navbar
                .solstice-primary-nav > .nav-item > .nav-link.show:not(.active),
                .solstice-shell .solstice-navbar
                .solstice-primary-nav > .nav-item.show:not(.active) > .nav-link:not(.active) {
                    color: #AAAAAA;
                    background: transparent;
                    border-bottom-color: transparent;
                }

                /* Menu courant : texte foncé et barre turquoise.
   Compatible avec active sur le lien ou sur son li parent. */
                .solstice-shell .solstice-navbar
                .solstice-primary-nav > .nav-item > .nav-link.active,
                .solstice-shell .solstice-navbar
                .solstice-primary-nav > .nav-item.active > .nav-link {
                    color: #495D6D;
                    background: transparent;
                    border-bottom-color: #24A7CF;
                }

                    /* Le menu courant conserve sa couleur au survol. */
                    .solstice-shell .solstice-navbar
                    .solstice-primary-nav > .nav-item > .nav-link.active:hover,
                    .solstice-shell .solstice-navbar
                    .solstice-primary-nav > .nav-item.active > .nav-link:hover {
                        color: #495D6D;
                    }

        /* Indicateur de sous-menu. */
        .solstice-shell .solstice-navbar .dropdown-toggle::after {
            flex-shrink: 0;
            margin-left: 6px;
        }

        /* ==========================================================
   5. SOUS-MENUS
   Une colonne, sans ajout d'icônes.
   ========================================================== */

        .solstice-shell .solstice-navbar .dropdown-menu {
            box-sizing: border-box;
            min-width: 250px;
            width: max-content;
            max-width: min(460px, calc(100vw - 24px));
            margin-top: 0;
            padding: 5px 0;
            background: #FFFFFF;
            border: 1px solid var(--solstice-border);
            border-radius: 4px;
            box-shadow: 0 3px 10px rgb(36 86 107 / 10%);
        }

            .solstice-shell .solstice-navbar .dropdown-menu .dropdown-item,
            .solstice-shell .solstice-navbar .dropdown-menu .nav-link {
                display: block;
                padding: 8px 14px;
                color: var(--solstice-nav-text);
                font-family: inherit;
                font-size: var(--solstice-menu-font-size);
                font-weight: 400;
                line-height: 1.4;
                white-space: normal;
                overflow-wrap: anywhere;
                text-decoration: none;
                border-radius: 0;
            }

                .solstice-shell .solstice-navbar .dropdown-menu .dropdown-item:hover,
                .solstice-shell .solstice-navbar .dropdown-menu .nav-link:hover {
                    color: var(--solstice-nav-active);
                    background: #EEF6FA;
                }

                .solstice-shell .solstice-navbar .dropdown-menu .dropdown-item.active,
                .solstice-shell .solstice-navbar .dropdown-menu .nav-link.active {
                    color: var(--solstice-nav-active);
                    background: #E5F2F8;
                    font-weight: 700;
                }

        .solstice-shell .solstice-navbar .dropdown-header {
            padding: 7px 14px 4px;
            color: #748390;
            font-family: inherit;
            font-size: 0.85em;
            font-weight: 600;
        }

        .solstice-shell .solstice-navbar .dropdown-divider {
            margin: 5px 0;
            border-top-color: var(--solstice-border);
        }


        /* ==========================================================
   6. ZONE UTILISATEUR
   L'ordre des éléments reste défini dans les composants Razor.
   ========================================================== */

        .solstice-shell .solstice-navbar .solstice-account-nav {
            gap: 10px;
            flex-shrink: 0;
        }

            .solstice-shell .solstice-navbar
            .solstice-account-nav > .nav-item {
                display: flex;
                align-items: center;
            }

            .solstice-shell .solstice-navbar .solstice-account-nav .nav-link {
                color: var(--solstice-nav-text);
                font-family: inherit;
                font-size: var(--solstice-menu-font-size);
                font-weight: 400;
                line-height: 1.5;
                white-space: nowrap;
                text-decoration: none;
            }

        .solstice-shell .solstice-navbar .solstice-user-item,
        .solstice-shell .solstice-navbar .solstice-logout-item {
            border-left: 1px solid var(--solstice-border);
            padding-left: 10px;
        }

        .solstice-shell .solstice-navbar .solstice-organisation-item {
            width: 190px;
            flex-shrink: 0;
        }

            .solstice-shell .solstice-navbar
            .solstice-organisation-item .k-dropdownlist {
                width: 100%;
                background: #FFFFFF;
                border-color: var(--solstice-border);
                border-radius: 4px;
                font-family: inherit;
                font-size: var(--solstice-menu-font-size);
            }

        .solstice-shell .solstice-navbar .solstice-logout-item form {
            margin: 0;
        }

        .solstice-shell .solstice-navbar .solstice-logout-button {
            color: var(--solstice-nav-text);
            background: transparent;
            border-color: transparent;
            box-shadow: none;
            font-family: inherit;
            font-size: var(--solstice-menu-font-size);
            line-height: 1.5;
        }


        /* ==========================================================
   7. MESSAGERIE
   ========================================================== */

        .solstice-shell .solstice-navbar .messages-navbar-button {
            position: relative;
            min-width: 38px;
            min-height: 32px;
            overflow: visible;
        }

            .solstice-shell .solstice-navbar
            .messages-navbar-button .k-badge {
                position: absolute;
                top: 1px;
                right: 3px;
                bottom: auto;
                left: auto;
                transform: none;
                background: var(--solstice-turquoise);
                color: #FFFFFF;
            }


        /* ==========================================================
   8. BOUTON DU MENU RÉDUIT
   ========================================================== */

        .solstice-shell .solstice-navbar .navbar-toggler {
            margin-left: auto;
            padding: 4px 8px;
            color: var(--solstice-turquoise);
            background: #FFFFFF;
            border: 1px solid var(--solstice-border);
            border-radius: 4px;
        }

        .solstice-shell .solstice-navbar .navbar-toggler-icon {
            position: relative;
            display: inline-block;
            box-sizing: border-box;
            width: 20px;
            height: 16px;
            background-image: none;
            border-top: 2px solid currentColor;
            border-bottom: 2px solid currentColor;
            vertical-align: middle;
        }

            .solstice-shell .solstice-navbar .navbar-toggler-icon::before {
                content: "";
                position: absolute;
                top: 5px;
                left: 0;
                width: 100%;
                border-top: 2px solid currentColor;
            }


        /* ==========================================================
   9. FOCUS AU CLAVIER
   ========================================================== */

        .solstice-shell .solstice-navbar a:focus-visible,
        .solstice-shell .solstice-navbar button:focus-visible {
            outline: 2px solid var(--solstice-turquoise);
            outline-offset: 2px;
        }


    /* ==========================================================
   10. CONTENU SOUS LE MENU FIXE
   ========================================================== */

    .solstice-shell > .content {
        margin-top: var(--solstice-nav-height);
        padding-top: 0;
    }

    .solstice-shell > .content.has-regular-footer {
        height: var(--solstice-regular-content-height);
    }

    .solstice-shell > .content.has-public-footer {
        height: var(--solstice-public-content-height);
    }


    /* ==========================================================
   11. FIL D'ARIANE
   ========================================================== */

    .solstice-shell .breadcrump-wrapper {
        flex: 0 0 auto;
        min-height: var(--solstice-breadcrumb-height);
        margin: 0;
        padding: 0;
        background: #EEF2F5;
        border-bottom: 1px solid var(--solstice-border);
    }

    .solstice-shell .solstice-breadcrumb {
        box-sizing: border-box;
        min-height: var(--solstice-breadcrumb-height);
        padding: 0 8px;
        background: transparent;
        border: 0;
        color: var(--solstice-nav-text);
        font-size: 12px;
    }

        .solstice-shell .solstice-breadcrumb .k-breadcrumb-link,
        .solstice-shell .solstice-breadcrumb .k-breadcrumb-root-link {
            color: var(--solstice-nav-text);
            text-decoration: none;
        }

        .solstice-shell .solstice-breadcrumb .k-breadcrumb-root-link {
            color: var(--solstice-turquoise);
        }

        .solstice-shell .solstice-breadcrumb .k-breadcrumb-delimiter-icon {
            color: #8A97A2;
        }


/* ==========================================================
   12. MENU HORIZONTAL : 1200 PX ET PLUS
   ========================================================== */

@media (min-width: 1200px) {
    .solstice-shell .solstice-navbar {
        position: fixed;
        top: 0;
        right: 0;
        left: 0;
        flex-wrap: nowrap;
        overflow: visible;
    }

        .solstice-shell .solstice-navbar .navbar-toggler {
            display: none !important;
        }

        .solstice-shell .solstice-navbar .navbar-collapse {
            display: flex !important;
            flex-basis: auto;
            align-items: center;
            min-width: 0;
            padding-bottom: 0;
        }

        .solstice-shell .solstice-navbar .navbar-nav {
            flex-direction: row;
            align-items: center;
        }

        .solstice-shell .solstice-navbar .solstice-primary-nav {
            flex-shrink: 0;
            margin-right: auto;
        }

        .solstice-shell .solstice-navbar .solstice-account-nav {
            flex-shrink: 0;
            margin-left: 12px;
        }

        .solstice-shell .solstice-navbar .navbar-nav .dropdown-menu {
            position: absolute;
        }
}


/* ==========================================================
   13. MENU RÉDUIT : MOINS DE 1200 PX
   Le menu occupe sa place et repousse le contenu.
   Les règles explicites remplacent l'expansion Bootstrap lg.
   ========================================================== */

@media (max-width: 1199.98px) {
    .solstice-shell {
        overflow-x: hidden;
        overflow-y: auto;
    }

        .solstice-shell > header {
            position: relative;
            flex: 0 0 auto;
        }

        .solstice-shell .solstice-navbar {
            position: relative;
            top: auto;
            right: auto;
            bottom: auto;
            left: auto;
            flex-wrap: wrap;
            min-height: 0;
            max-height: none;
            overflow: visible;
        }

            .solstice-shell .solstice-navbar .navbar-toggler {
                display: block !important;
                margin-left: auto;
            }

            .solstice-shell .solstice-navbar .navbar-collapse {
                flex-basis: 100% !important;
                width: 100%;
                padding-bottom: 8px;
            }

                .solstice-shell .solstice-navbar
                .navbar-collapse.collapse:not(.show) {
                    display: none !important;
                }

                .solstice-shell .solstice-navbar
                .navbar-collapse.collapse.show {
                    display: block !important;
                }

                .solstice-shell .solstice-navbar
                .navbar-collapse.collapsing {
                    display: block !important;
                }

            .solstice-shell .solstice-navbar .navbar-nav {
                flex-direction: column !important;
                align-items: stretch;
                width: 100%;
            }

                .solstice-shell .solstice-navbar .navbar-nav > .nav-item {
                    width: 100%;
                }

            .solstice-shell .solstice-navbar
            .solstice-primary-nav > .nav-item > .nav-link {
                display: block;
                min-height: 0;
                padding: 7px 0;
                border-bottom: 0;
            }

                /* Conserver la couleur MVC du menu courant. */
                .solstice-shell .solstice-navbar
                .solstice-primary-nav > .nav-item > .nav-link.active,
                .solstice-shell .solstice-navbar
                .solstice-primary-nav > .nav-item.active > .nav-link {
                    color: #495D6D;
                    background: transparent;
                }

                    /* Conserver la petite barre turquoise en mode réduit. */
                    .solstice-shell .solstice-navbar
                    .solstice-primary-nav > .nav-item > .nav-link.active::before,
                    .solstice-shell .solstice-navbar
                    .solstice-primary-nav > .nav-item.active > .nav-link::before {
                        content: "";
                        position: absolute;
                        bottom: 0;
                        left: 0;
                        width: 32px;
                        height: 3px;
                        background: #24A7CF;
                    }

            .solstice-shell .solstice-navbar .solstice-account-nav {
                gap: 4px;
                align-items: stretch;
                margin-left: 0;
                padding-top: 4px;
            }

                .solstice-shell .solstice-navbar
                .solstice-account-nav > .nav-item {
                    min-height: 32px;
                }

            .solstice-shell .solstice-navbar .solstice-user-item,
            .solstice-shell .solstice-navbar .solstice-logout-item {
                border-left: 0;
                padding-left: 0;
            }

            .solstice-shell .solstice-navbar .solstice-organisation-item {
                width: 100%;
                align-self: stretch !important;
            }

            .solstice-shell .solstice-navbar
            .navbar-nav .dropdown-menu {
                position: static;
                width: 100%;
                min-width: 0;
                max-width: 100%;
                box-shadow: none;
            }

        /* Annuler l'espace réservé au menu fixe.
       Le menu ouvert repousse maintenant le contenu. */
        .solstice-shell > .content,
        .solstice-shell > .content.has-regular-footer,
        .solstice-shell > .content.has-public-footer {
            flex: 0 0 auto;
            height: auto;
            min-height: 0;
            margin-top: 0;
            padding-top: 0;
            overflow: visible;
        }
}

/* ==========================================================
   14. POLICE RESPONSIVE, LIMITÉE AU MENU
   ========================================================== */

@media (min-width: 768px) and (max-width: 991.98px) {
    .solstice-shell {
        --solstice-menu-font-size: 12px;
    }
}

@media (min-width: 576px) and (max-width: 767.98px) {
    .solstice-shell {
        --solstice-menu-font-size: 11px;
    }
}

@media (max-width: 575.98px) {
    .solstice-shell {
        --solstice-menu-font-size: 10px;
    }
}
/* ==========================================================
   15. CORPS DE LA PAGE SUPPORT
   Présentation centrée inspirée du parcours MVC.
   Aucun effet sur le menu, les grilles ou Contactez-nous.
   ========================================================== */

.solstice-shell .solstice-support-body {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    margin: 0 auto;
    padding: 16px 15px 32px;
    color: #212529;
    background: #FFFFFF;
    font-family: inherit;
    font-size: inherit;
    font-weight: 400;
    line-height: 1.5;
}

    /* Titre principal. */
    .solstice-shell .solstice-support-body > h2 {
        margin: 0 0 0.5em;
        font-family: inherit;
        font-size: 2em;
        font-weight: 500;
        line-height: 1.2;
    }

    /* Paragraphes et séparateurs. */
    .solstice-shell .solstice-support-body p {
        margin: 0 0 1em;
    }

    .solstice-shell .solstice-support-body hr {
        height: 0;
        margin: 1em 0;
        border: 0;
        border-top: 1px solid #DEE2E6;
        opacity: 1;
    }

    /* Liens : présentation proche du MVC. */
    .solstice-shell .solstice-support-body a {
        color: #007BFF;
        text-decoration: none;
        overflow-wrap: anywhere;
    }

        .solstice-shell .solstice-support-body a:hover {
            color: #0056B3;
            text-decoration: underline;
        }

        .solstice-shell .solstice-support-body a:focus-visible {
            outline: 2px solid #24A7CF;
            outline-offset: 2px;
        }

    .solstice-shell .solstice-support-body strong,
    .solstice-shell .solstice-support-body b {
        font-weight: 700;
    }

/* Index des capsules. */
.solstice-shell .solstice-support-summary {
    margin: 0 0 1em;
    padding-left: 40px;
}

    .solstice-shell .solstice-support-summary ul {
        margin-top: 0;
        margin-bottom: 0;
        padding-left: 40px;
    }

    .solstice-shell .solstice-support-summary li {
        margin: 0;
        line-height: 1.5;
    }

/* Une capsule occupe toute la largeur du contenu. */
.solstice-shell .solstice-support-capsule {
    display: block;
    width: 100%;
    margin: 0 0 24px;
}

    .solstice-shell .solstice-support-capsule > h5 {
        margin: 0 0 8px;
        font-family: inherit;
        font-size: 1.25em;
        font-weight: 500;
        line-height: 1.2;
    }

/* Lecteur indépendant des anciennes classes Bootstrap 4. */
.solstice-shell .solstice-support-player {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: #000000;
}

    .solstice-shell .solstice-support-player > iframe {
        position: absolute;
        inset: 0;
        display: block;
        width: 100%;
        height: 100%;
        max-width: none;
        max-height: none;
        margin: 0;
        padding: 0;
        border: 0;
    }

/* Ancres des vidéos et retour à l'index. */
.solstice-shell .solstice-support-body #support-index,
.solstice-shell .solstice-support-capsule a[id] {
    scroll-margin-top: 16px;
}

/* Retour à l'index dans le flux sur les écrans étroits. */
.solstice-shell .solstice-support-back {
    position: static;
    margin: 20px 0 0;
}

    .solstice-shell .solstice-support-back .btn {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        padding: 6px 12px;
        color: #24A7CF;
        background: #FFFFFF;
        border: 1px solid #24A7CF;
        border-radius: 4px;
        font-family: inherit;
        font-size: inherit;
        line-height: 1.5;
        text-decoration: none;
    }

        .solstice-shell .solstice-support-back .btn:hover {
            color: #FFFFFF;
            background: #24A7CF;
            text-decoration: none;
        }

/* Largeurs du conteneur, selon les paliers Bootstrap 4. */
@media (min-width: 576px) {
    .solstice-shell .solstice-support-body {
        max-width: 540px;
    }
}

@media (min-width: 768px) {
    .solstice-shell .solstice-support-body {
        max-width: 720px;
    }
}

@media (min-width: 992px) {
    .solstice-shell .solstice-support-body {
        max-width: 960px;
    }
}

@media (min-width: 1200px) {
    .solstice-shell .solstice-support-body {
        max-width: 1140px;
    }
}

/* Bouton flottant comme en MVC, seulement si la marge suffit. */
@media (min-width: 1500px) {
    .solstice-shell .solstice-support-back {
        position: fixed;
        bottom: 50%;
        left: 30px;
        z-index: 100;
        margin: 0;
    }
}


/* ==========================================================
   16. CENTRAGE DU CORPS DE LA PAGE CONTACT
   Même largeur responsive que la page Support.
   ========================================================== */

.solstice-shell .solstice-contact-body {
    box-sizing: border-box;
    flex: 0 0 auto;
    width: 100%;
    min-width: 0;
    margin: 0 auto;
    padding: 16px 15px 32px;
}

@media (min-width: 576px) {
    .solstice-shell .solstice-contact-body {
        max-width: 540px;
    }
}

@media (min-width: 768px) {
    .solstice-shell .solstice-contact-body {
        max-width: 720px;
    }
}

@media (min-width: 992px) {
    .solstice-shell .solstice-contact-body {
        max-width: 960px;
    }
}

@media (min-width: 1200px) {
    .solstice-shell .solstice-contact-body {
        max-width: 1140px;
    }
}
/* Connexion : apparence identique sur toutes les pages. */
.solstice-shell .solstice-navbar .solstice-account-nav .nav-link.solstice-login-link {
    color: #aaa;
    font-weight: bold;
}

    .solstice-shell .solstice-navbar .solstice-account-nav .nav-link.solstice-login-link:hover,
    .solstice-shell .solstice-navbar .solstice-account-nav .nav-link.solstice-login-link:focus {
        color: #24a7cf;
    }