.navbar {
    font-weight: 400;
    /* Bootstrap pose flex-wrap: wrap sur .navbar : si les largeurs des deux zones dépassent
       transitoirement 100 % pendant l'animation du repli, la zone de menu passerait à la
       ligne et la barre doublerait de hauteur. On interdit le passage à la ligne. */
    flex-wrap: nowrap;
    transition: background 0.25s ease;
    box-shadow: 0px 5px 21px -5px #CDD1E1;
}

/***********************************************************************************************
*  Zone du logo
*
*  Le logo compact n'est pas une autre image : c'est la PARTIE GAUCHE du logo complet
*  (l'hexagone « easy », sans le mot), vérifiée identique au pixel près. Le repli du menu
*  doit donc donner l'impression que seul le mot disparaît, l'hexagone restant immobile.
*
*  Trois choses sont nécessaires pour cela :
*
*  1. Le logo compact est TOUJOURS visible, sous le logo complet. Les deux hexagones étant
*     superposés au même pixel, quand le logo complet s'estompe l'hexagone reste porté par
*     le compact : visuellement, seul le mot s'efface. Un fondu croisé classique (l'un
*     sort, l'autre entre) laissait un trou de ~90 ms où AUCUN logo n'était visible —
*     c'était perçu comme un clignotement de l'hexagone.
*
*  2. Caler les deux images sur le CENTRE DE L'HEXAGONE, et non sur leur bord gauche. Les
*     deux images n'ont pas le même retrait interne : aligner leurs bords décalait
*     l'hexagone de plusieurs pixels. Les variables ci-dessous donnent, pour chaque image,
*     la distance entre son bord gauche et le centre de l'hexagone, à 52 px de hauteur de
*     rendu. Les deux logos sont positionnés pour que ce centre tombe au milieu de la
*     colonne de 70 px du menu replié : identique dans les deux états, et aligné avec les
*     icônes du menu replié.
*
*  3. Décaler dans le temps le fondu du MOT et le changement de largeur du conteneur, pour
*     que le logo complet ne soit JAMAIS visible alors que le conteneur est plus étroit que
*     lui — sinon on voit le mot se faire rogner par la droite pendant qu'il s'efface.
*
*       REPLI        0 ────── 80 ms ──────────────── 250 ms
*                    │ le mot s'efface │ le conteneur rétrécit │
*                      (largeur intacte)   (l'hexagone reste)
*
*       DÉPLIEMENT   0 ──────────────── 170 ms ───── 250 ms
*                    │ le conteneur s'élargit │ le mot apparaît │
*                        (l'hexagone reste)
*
*     Pendant tout ce temps l'hexagone est visible (porté par le logo compact) : il n'y a
*     ni trou ni clignotement, et le rognage est impossible par construction.
*
*     Ce décalage est invisible : la zone du logo et la zone de menu ont toutes deux un fond
*     blanc, la frontière entre elles n'a donc aucun contraste. La durée totale reste de
*     250 ms, synchronisée avec le menu latéral.
*
*  ATTENTION — `--brand-logo-offset` dépend de l'image de CHAQUE application ; les logos
*  complets livrés ne sont pas homogènes (mesures et méthode dans docs/chrome.md). Vérifier
*  la valeur en changeant de logo, sinon l'hexagone se décalera au repli.
***********************************************************************************************/
:root {
    /* Abscisse à laquelle le centre de l'hexagone est calé, dans les deux états.
       35 px = le milieu de la colonne de 70 px du menu replié : l'hexagone est donc
       parfaitement centré sur les icônes du menu une fois replié. */
    --brand-anchor: 35px;

    /* Distance bord gauche de l'image -> centre de l'hexagone, à 52 px de hauteur de rendu.
       Les images sources ayant été normalisées (marge transparente gauche retirée), cette
       valeur est la MÊME pour les dix logos des cinq applications. Voir docs/chrome.md. */
    --brand-logo-offset: 23.8px;
    --brand-logo-mini-offset: 23.8px;
}

.navbar .navbar-brand-wrapper {
    /* La largeur animée fait foi : on interdit au flex de la comprimer si le contenu de la
       zone de menu venait à manquer de place (c'est elle qui absorbe, via min-width: 0). */
    flex: 0 0 auto;
    position: relative;
    /* Filet de sécurité : le logo complet est plus large que le menu replié. Le séquencement
       ci-dessus fait qu'il est déjà invisible à ce moment, mais on ne veut en aucun cas le
       voir déborder sur la zone de menu. */
    overflow: hidden;
    background: #ffffff;
    width: 235px;
    height: 60px;
    /* Dépliement : le conteneur s'élargit d'abord, de 0 à 170 ms. */
    transition: width 0.17s ease, background 0.25s ease;
}

.navbar .navbar-brand-wrapper .navbar-brand {
    position: absolute;
    top: 0;
    height: 100%;
    display: flex;
    align-items: center;
    margin: 0;
    padding: 0;
    color: rgb(38.90625, 54.46875, 127.09375);
    font-size: 1.5rem;
}

.navbar .navbar-brand-wrapper .navbar-brand img {
    height: 52px;
    /* Pas de max-width : la largeur doit rester constante pendant que le conteneur se
       rétrécit, sinon l'image se déformerait au lieu de simplement s'effacer. */
    max-width: none;
    vertical-align: middle;
}

/* Logo complet, peint AU-DESSUS du compact. Quand il est opaque, son hexagone recouvre
   exactement celui du compact (images identiques au pixel près) : on ne voit que lui.
   Quand il s'estompe, l'hexagone du compact prend le relais sans discontinuité — seul le
   mot disparaît. Au dépliement, il n'apparaît qu'une fois le conteneur revenu à sa pleine
   largeur (170 ms), donc sans jamais être rogné. */
.navbar .navbar-brand-wrapper .brand-logo {
    left: calc(var(--brand-anchor) - var(--brand-logo-offset));
    z-index: 2;
    opacity: 1;
    transition: opacity 0.08s ease 0.17s;
}

/* Logo compact : TOUJOURS visible, sous le complet. C'est lui qui garantit qu'un hexagone
   est affiché à chaque instant de la transition — aucun fondu, donc aucun clignotement
   possible. Les clics vont au logo complet tant que le menu est déplié (z-index). */
.navbar .navbar-brand-wrapper .brand-logo-mini {
    left: calc(var(--brand-anchor) - var(--brand-logo-mini-offset));
    z-index: 1;
    opacity: 1;
    pointer-events: none;
}

.navbar .navbar-menu-wrapper {
    background: #ffffff;
    color: #6C7383;
    padding-right: 2.375rem;
    padding-left: 2.375rem;
    /* Pas de largeur explicite ni de transition propre : la zone de menu remplit l'espace
       restant à côté de la zone du logo. Elle suit donc l'animation de largeur de celle-ci
       image par image — y compris son retard au repli — et la somme des deux fait 100 % à
       chaque instant : le passage à la ligne (barre qui double de hauteur) est impossible.
       Animer les deux largeurs séparément les désynchronisait. */
    flex: 1 1 auto;
    min-width: 0;
    height: 60px;
}

.navbar .navbar-menu-wrapper .navbar-toggler {
    border: 0;
    color: inherit;
    font-size: 1.25rem;
    padding: 0;
    border-radius: 0;
}

.navbar .navbar-menu-wrapper .navbar-toggler:active,
.navbar .navbar-menu-wrapper .navbar-toggler:focus {
    outline: none !important;
    box-shadow: none !important;
    outline: 0;
}

.navbar .navbar-menu-wrapper .navbar-toggler:not(.navbar-toggler-right) {
    transform: rotate(0deg);
    -webkit-transition: transform 0.3s linear;
    -moz-transition: transform 0.3s linear;
    -ms-transition: transform 0.3s linear;
    -o-transition: transform 0.3s linear;
    transition: transform 0.3s linear;
}

.sidebar-icon-only .navbar .navbar-menu-wrapper .navbar-toggler:not(.navbar-toggler-right) {
    transform: rotate(180deg);
}

.navbar-nav-right{
    flex-direction: row;
}

.navbar .navbar-menu-wrapper .navbar-nav .nav-item.nav-search .input-group{
    align-items: center;
}

.navbar .navbar-menu-wrapper .navbar-nav .nav-item.nav-search .input-group .form-control{
    margin-left: 0.7rem;
}

#navbar-search-icon > #search{
        vertical-align: baseline;
}

.navbar .navbar-menu-wrapper .navbar-nav.navbar-nav-right {
    margin-left: auto;
}

.navbar .navbar-menu-wrapper .navbar-nav .nav-item.dropdown .count-indicator i {
    font-size: 1.25rem;
    margin-right: 0;
    vertical-align: middle;
}

/* Pastille numérique des non-lus ; masquée quand le compteur est vide. */
.navbar .navbar-menu-wrapper .navbar-nav .nav-item.dropdown .count-indicator .count {
    position: absolute;
    left: 36%;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 8px;
    background: var(--marque);
    border: 1px solid #ffffff;
    color: #ffffff;
    font-size: 10px;
    line-height: 14px;
    text-align: center;
}

.navbar .navbar-menu-wrapper .navbar-nav .nav-item.dropdown .count-indicator .count:empty {
    display: none;
}

.navbar .navbar-menu-wrapper .navbar-nav .nav-item.dropdown .count-indicator::after {
    display: none;
}

.navbar .navbar-menu-wrapper .navbar-nav .nav-item {
    margin-left: 1rem;
    margin-right: 1rem;
}

.dropdown-toggle {
    white-space: nowrap;
}

.navbar .navbar-menu-wrapper .navbar-nav .nav-item .nav-link {
    color: inherit;
    font-size: 1rem;
}

.navbar .navbar-menu-wrapper .navbar-nav .nav-item.dropdown .count-indicator {
    text-align: center;
}

.navbar .navbar-menu-wrapper .navbar-nav .nav-item.dropdown .navbar-dropdown {
    position: absolute;
    font-size: 0.9rem;
    margin-top: 0;
    right: 0;
    left: auto;
    top: 65px;
}

.navbar .navbar-menu-wrapper .navbar-nav .nav-item.dropdown .dropdown-menu {
    border: none;
    -webkit-box-shadow: 0px 3px 21px 0px rgba(0, 0, 0, 0.2);
    box-shadow: 0px 3px 21px 0px rgba(0, 0, 0, 0.2);
}

.dropdown-header {
    display: block;
    padding: var(--bs-dropdown-header-padding-y) var(--bs-dropdown-header-padding-x);
    margin-bottom: 0;
    font-size: 0.875rem;
    color: var(--bs-dropdown-header-color);
    white-space: nowrap;
}

.dropdown .dropdown-menu .dropdown-item {
    font-size: 0.875rem;
    padding: 0.25rem 1.5rem;
}

.dropdown-menu {
    position: absolute;
    display: none;
    margin: 0;
    margin-top: 0px;
    text-align: left;
    list-style: none;
  }

.dropdown-item {
    display: flex;
    width: 100%;
    clear: both;
    font-weight: 400;
    text-align: inherit;
    text-decoration: none;
    white-space: nowrap;
    background-color: transparent;
    border: 0;
    flex-direction: row;
}

.dropdown-toggle {
    display: flex;
    width: 100%;
    clear: both;
    font-weight: 400;
    text-align: inherit;
    text-decoration: none;
    white-space: nowrap;
    background-color: transparent;
    border: 0;
    flex-direction: row;
}

.navbar .navbar-menu-wrapper .navbar-nav .nav-item.dropdown .navbar-dropdown .dropdown-item {
    margin-bottom: 0;
    padding: 0.687rem 1.562rem;
    cursor: pointer;
}

.preview-list .preview-item .preview-thumbnail {
    color: #ffffff;
    position: relative;
}

.preview-list .preview-item .preview-item-content {
    line-height: 1;
    padding-left: 15px;
    /* Borne la colonne texte pour qu'un message long se tronque (text-truncate)
       au lieu d'élargir le menu déroulant ; le détail complet est dans la modale. */
    flex: 1;
    min-width: 0;
    max-width: 280px;
}

.preview-list .preview-item .preview-thumbnail .preview-icon {
    width: 36px;
    height: 36px;
    border-radius: 100%;
    padding: 6px;
    text-align: center;
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
}

.preview-icon > i {
    width: 20px;
    height: 20px;
}

.nav-profile, .nav-notif, .nav-application {
    display:flex;
    margin-left: 0.2rem !important;
}

/* Sélecteur d'application (grille de tuiles, montage repris de portail). */
#application-list {
    display: grid;
    /* Nombre de colonnes calculé dans le template (⌈√n⌉) pour des lignes
       équilibrées : 2×2, 3×2, 3×3… plutôt qu'une seule rangée. */
    grid-template-columns: repeat(var(--application-colonnes, 2), minmax(80px, 1fr));
    gap: 10px;
    justify-items: center;
    min-width: clamp(200px, 18vw, 320px);
}

.application-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 0.5rem;
    border-radius: 8px;
    text-decoration: none;
    color: inherit;
    transition: background 0.2s;
}

.application-tile:hover {
    background: #f8f9fa;
}

/* Application courante : repère visuel, la tuile ne mène nulle part. */
.application-tile.active {
    background: #f1f3f7;
    pointer-events: none;
}

.application-tile img {
    width: 50px;
    height: 50px;
    object-fit: contain;
    margin-bottom: 5px;
}

.application-tile span {
    font-weight: 600;
    font-size: 0.85rem;
    text-align: center;
}

/* Pastille d'initiales du menu profil : couleur de marque de l'application (le gris
   `bg-secondary` de Bootstrap était le repli de départ). */
#profil {
    width: 40px;
    height: 40px;
    background-color: var(--marque);
}

#logo-organisation{
    width:auto;
    max-height:40px;
}

/* Repli quand l'organisation n'a pas de logo : son nom, même gabarit que l'image. */
#nom-organisation{
    font-weight: 600;
    white-space: nowrap;
    max-width: 154px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.navbar .navbar-menu-wrapper .navbar-nav .nav-item.nav-search .input-group .form-control{
    background: transparent;
    border: 0;
    color: #000;
    padding: 0;
}

/* Icône du sélecteur de projet de la navbar : rendu discret, fondue dans la barre
   (le même partial est aussi inclus dans le menu mobile). */
.navbar .nav-search .input-group-text {
    background: transparent;
    border: 0;
    padding: 0 6px 0 0;
    color: inherit;
}

/* Centré en absolu dans la zone de menu : centré dans le flux (m-auto), il se décalait
   selon la largeur du bloc de droite (logo ou nom d'organisation, présent ou non). */
.navbar .navbar-menu-wrapper {
    position: relative;
}

#navbar-selecteur-projet {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

/* Menu déroulant de projet, repris de check. Les couleurs passent par les variables
   Bootstrap (check n'a pas de thème sombre) : la déclinaison sombre suit toute seule. */
.project-dropdown > .dropdown-toggle {
    border: 1px solid var(--bs-border-color);
    background-color: var(--bs-body-bg);
    color: var(--bs-body-color);
    font-size: 14px;
    padding: 8px 12px;
    min-width: 200px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.project-dropdown > .dropdown-toggle::after {
    margin-left: 0.5rem;
    vertical-align: middle;
}

.project-dropdown > .dropdown-toggle:hover {
    border-color: var(--bs-secondary-border-subtle);
    background-color: var(--bs-tertiary-bg);
    color: var(--bs-body-color);
}

/* Nom du projet : tronqué plutôt que d'étirer la barre sur les intitulés longs. */
.project-dropdown > .dropdown-toggle .projet-nom {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dropdown.project-dropdown {
    position: relative;
}

/* Positionnement forcé : le widget est lui-même positionné en absolu dans la
   navbar, le placement automatique de Popper y dérivait (repris de check). */
.dropdown.project-dropdown .dropdown-menu {
    border: 1px solid var(--bs-border-color);
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
    border-radius: 0.375rem;
    padding: 0.5rem 0;
    min-width: 200px;
    max-height: 80vh;
    overflow-y: auto;
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    z-index: 1050 !important;
    transform: none !important;
}

.dropdown.project-dropdown .dropdown-item {
    padding: 0.5rem 1rem;
    color: var(--bs-body-color);
    text-decoration: none;
    font-size: 14px;
    border: none;
    background: none;
}

.dropdown.project-dropdown .dropdown-item:hover {
    background-color: var(--bs-tertiary-bg);
    color: var(--bs-body-color);
}

/* Projet affiché : marqué à la couleur de marque de l'application plutôt qu'au bleu
   Bootstrap de check (variables définies dans app.css). */
.dropdown.project-dropdown .dropdown-item.active {
    background-color: var(--marque);
    color: #fff;
}

.dropdown.project-dropdown .dropdown-item.active:hover {
    background-color: var(--marque-survol);
    color: #fff;
}

/* Étoile de projet favori, dans le sélecteur (navbar et menu mobile) : bouton nu,
   fondu dans le widget ; doré quand le projet affiché est le favori. */
.projet-favori {
    border: 0;
    background: transparent;
    color: inherit;
    padding: 0 6px;
    display: flex;
    align-items: center;
}

.projet-favori[aria-pressed="true"] {
    color: #f0a800;
}

/* L'étoile est basculée sur place par project_switcher_controller (POST en
   arrière-plan, pas de re-rendu serveur) : les deux icônes sont dans le DOM,
   aria-pressed choisit laquelle est visible. */
.projet-favori .favori-on,
.projet-favori[aria-pressed="true"] .favori-off {
    display: none;
}

.projet-favori[aria-pressed="true"] .favori-on {
    display: inline-flex;
}

/* Bascule de thème du menu profil : trois boutons (clair, sombre, auto), celui du
   choix courant est marqué par aria-pressed. Variables Bootstrap : les couleurs
   suivent le thème sans déclinaison sombre dédiée. */
.theme-switch {
    display: flex;
    gap: 4px;
    padding: 0.5rem 8px;
}

.theme-choice {
    flex: 1 1 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--bs-secondary-color);
    padding: 0.35rem 0;
}

.theme-choice:hover {
    background: var(--bs-tertiary-bg);
    color: var(--bs-body-color);
}

.theme-choice[aria-pressed="true"] {
    background: var(--bs-tertiary-bg);
    color: var(--marque);
}

/* Déclinaison claire sur fond sombre : l'encre brute du logo y manque de contraste. */
[data-bs-theme="dark"] .theme-choice[aria-pressed="true"] {
    color: var(--marque-claire);
}
/***********************************************************************************************
*  Déclinaison sombre (même motif que footer.css) : seules les couleurs posées en dur
*  ci-dessus sont reprises — tout ce qui s'appuie sur les variables Bootstrap suit le
*  thème tout seul. Surfaces à #1a1d20, alignées sur le pied de page.
***********************************************************************************************/
[data-bs-theme="dark"] .navbar {
    box-shadow: 0px 5px 21px -5px rgba(0, 0, 0, 0.55);
}

[data-bs-theme="dark"] .navbar .navbar-brand-wrapper {
    background: #1a1d20;
}

[data-bs-theme="dark"] .navbar .navbar-menu-wrapper {
    background: #1a1d20;
    color: rgba(255, 255, 255, 0.75);
}

[data-bs-theme="dark"] .navbar .navbar-menu-wrapper .navbar-nav .nav-item.dropdown .count-indicator .count {
    border-color: #1a1d20;
}

/* Plaque blanche sous le logo : le mot « easy » de l'hexagone est une réserve
   (des pixels transparents), dessinée pour une page blanche — posée telle quelle sur
   la surface sombre du menu, elle prenait le fond et le mot devenait illisible. On
   rend au logo le fond pour lequel il est fait plutôt que de retoucher l'image. */
[data-bs-theme="dark"] .application-tile img {
    background: #fff;
    border-radius: 8px;
    padding: 4px;
}

[data-bs-theme="dark"] .application-tile:hover {
    background: rgba(255, 255, 255, 0.06);
}

[data-bs-theme="dark"] .application-tile.active {
    background: rgba(255, 255, 255, 0.12);
}

[data-bs-theme="dark"] .navbar .navbar-menu-wrapper .navbar-nav .nav-item.nav-search .input-group .form-control {
    color: #fff;
}

/***********************************************************************************************
*  Sous 992 px, le menu latéral est en superposition (offcanvas) : la navbar passe en mode
*  compact — rail de 70 px avec le logo hexagone seul, comme le mode replié du bureau.
*  Sans cela, la zone de logo de 235 px mangeait un tiers d'un écran de téléphone et le
*  contenu de la zone de menu, trop à l'étroit, débordait par la gauche PAR-DESSUS le logo
*  (mesuré : bouton à x=123 px et logo d'organisation à x=159 px pour une zone de logo
*  s'étendant jusqu'à 235 px).
*
*  Bloc volontairement placé en FIN de fichier : à spécificité égale, il doit venir après
*  les règles de base pour l'emporter.
***********************************************************************************************/
@media (max-width: 991.98px) {
    .navbar .navbar-brand-wrapper {
        width: 70px;
    }

    .navbar .navbar-brand-wrapper .brand-logo {
        opacity: 0;
        pointer-events: none;
        transition: none;
    }

    .navbar .navbar-brand-wrapper .brand-logo-mini {
        pointer-events: auto;
    }

    .navbar .navbar-menu-wrapper {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    /* Les dropdowns (notifications, profil) sont alignés à droite : on borne leur largeur
       pour qu'ils ne sortent jamais de l'écran. */
    .navbar .navbar-menu-wrapper .navbar-nav .nav-item.dropdown .navbar-dropdown {
        max-width: calc(100vw - 1rem);
    }

    /* Notifications : le déroulant passe en pleine largeur sous la barre (dans une
       navbar, Bootstrap positionne les dropdowns en statique, pas de Popper à
       contrarier) et la colonne texte reprend l'espace libéré par la largeur fixe
       de bureau — items à trois boutons trop à l'étroit sinon. */
    .navbar .navbar-menu-wrapper .navbar-nav .nav-item.nav-notif .navbar-dropdown {
        position: fixed;
        top: 60px;
        left: 0.5rem;
        right: 0.5rem;
        max-width: none;
        max-height: calc(100vh - 70px);
        overflow-y: auto;
    }

    .preview-list .preview-item .preview-item-content {
        max-width: none;
    }
}