/* ==========================================================
   LBC ONE V2
   Structure générale de l'application
========================================================== */

:root {
    --largeur-menu: 235px;
}


/* ==========================================================
   STRUCTURE GÉNÉRALE
========================================================== */

.application {
    display: flex;
    min-height: 100vh;
    width: 100%;
}

.menu-lateral {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 100;

    display: flex;
    flex-direction: column;

    width: var(--largeur-menu);
    height: 100vh;

    overflow: hidden;

    background:
        linear-gradient(
            180deg,
            #173f5f 0%,
            #12354f 100%
        );

    color: white;

    box-shadow:
        5px 0 24px rgba(23, 63, 95, 0.14);
}

.zone-principale {
    flex: 1;
    width: calc(100% - var(--largeur-menu));
    min-width: 0;
    min-height: 100vh;

    margin-left: var(--largeur-menu);
}


/* ==========================================================
   IDENTITÉ
========================================================== */

.identite-application {
    display: flex;
    align-items: center;

    gap: 10px;

    flex-shrink: 0;

    padding: 12px 14px;

    border-bottom:
        1px solid rgba(255, 255, 255, 0.12);
}

.logo-application {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 42px;
    min-width: 42px;
    height: 42px;

    border-radius: 11px;

    background:
        linear-gradient(
            135deg,
            #16a889,
            #2fc7a8
        );

    color: white;

    font-size: 14px;
    font-weight: 900;
    letter-spacing: 0.6px;

    box-shadow:
        0 5px 12px rgba(0, 0, 0, 0.18);
}

.identite-application h1 {
    margin: 0;

    color: white;

    font-size: 18px;
    line-height: 1.05;

    letter-spacing: 0.3px;
}

.identite-application p {
    margin: 3px 0 0;

    color: #bfd3de;

    font-size: 10px;
    line-height: 1.15;
}


/* ==========================================================
   NAVIGATION
========================================================== */

.navigation {
    display: flex;
    flex: 1;
    flex-direction: column;

    min-height: 0;

    gap: 2px;

    padding: 8px 10px;

    overflow: hidden;

    background: transparent;
    border: none;
}

.titre-navigation {
    margin: 9px 8px 3px;

    color: #9fb9c6;

    font-size: 9px;
    font-weight: 900;

    letter-spacing: 1px;

    text-transform: uppercase;
}

.navigation a,
.groupe-navigation summary {
    display: flex;
    align-items: center;

    gap: 9px;

    min-height: 34px;

    padding: 5px 8px;

    border-radius: 8px;

    color: #e5eef2;

    font-size: 12px;
    font-weight: 700;

    text-decoration: none;

    transition:
        background 0.18s ease,
        color 0.18s ease,
        transform 0.18s ease;
}

.navigation a:hover,
.groupe-navigation summary:hover {
    background:
        rgba(255, 255, 255, 0.08);

    color: white;
}

.navigation > a:hover {
    transform: translateX(2px);
}

.navigation a.actif {
    background:
        linear-gradient(
            90deg,
            #1aa188,
            #16977f
        );

    color: white;

    box-shadow:
        0 4px 11px rgba(0, 0, 0, 0.16);
}


/* ==========================================================
   PICTOGRAMMES PRINCIPAUX
========================================================== */

.icone-navigation {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    width: 27px;
    min-width: 27px;
    height: 27px;

    border-radius: 8px;

    font-size: 15px;
    line-height: 1;

    color: white;

    box-shadow:
        0 2px 6px rgba(0, 0, 0, 0.12);
}

.icone-accueil {
    background: #1fa88f;
}

.icone-beneficiaires {
    background: #7867d8;
}

.icone-seances {
    background: #df6a3c;
}

.icone-planning {
    background: #289ed8;
}

.icone-equipe {
    background: #20ad70;
}

.icone-organisation {
    background: #7667df;
}

.icone-finance {
    background: #18a96b;
}

.icone-configuration {
    background: #6f92a8;
}


/* ==========================================================
   GROUPES REPLIABLES
========================================================== */

.groupe-navigation {
    margin: 0;
}

.groupe-navigation summary {
    position: relative;

    list-style: none;

    cursor: pointer;

    user-select: none;
}

.groupe-navigation summary::-webkit-details-marker {
    display: none;
}

.groupe-navigation summary::after {
    content: "›";

    margin-left: auto;

    color: #a9c1cd;

    font-size: 17px;
    line-height: 1;

    transition:
        transform 0.18s ease;
}

.groupe-navigation[open] summary::after {
    transform: rotate(90deg);
}


/* ==========================================================
   SOUS-NAVIGATION
========================================================== */

.sous-navigation {
    display: grid;

    gap: 1px;

    margin:
        2px 0
        4px 28px;

    padding-left: 7px;

    border-left:
        1px solid rgba(255, 255, 255, 0.14);
}

.sous-navigation a {
    min-height: 28px;

    padding: 4px 7px;

    font-size: 11px;
    font-weight: 650;
}

.mini-picto {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    width: 20px;
    min-width: 20px;
    height: 20px;

    border-radius: 6px;

    font-size: 12px;

    background:
        rgba(255, 255, 255, 0.08);
}

.picto-familles {
    background: #d92a7d;
}

.picto-codeuses {
    background: #e7a817;
}

.picto-etablissements {
    background: #2aa7c7;
}

.picto-contrats {
    background: #4c86d9;
}

.picto-programmations {
    background: #bd6bd8;
}

.picto-calendrier {
    background: #3ca6d0;
}

.picto-administration {
    background: #738b9c;
}


/* ==========================================================
   PIED DU MENU
========================================================== */

.pied-menu {
    flex-shrink: 0;

    padding: 8px 14px 10px;

    border-top:
        1px solid rgba(255, 255, 255, 0.12);
}

.pied-menu p {
    margin: 0 0 3px;

    color: #bfd3de;

    font-size: 9px;
    line-height: 1.2;
}

.pied-menu span {
    color: #7ed3c2;

    font-size: 9px;
    font-weight: 800;
}


/* ==========================================================
   BARRE SUPÉRIEURE
========================================================== */

.barre-superieure {
    position: sticky;
    top: 0;
    z-index: 50;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;

    min-height: 60px;

    padding: 9px 28px;

    background:
        rgba(255, 255, 255, 0.96);

    border-bottom:
        1px solid var(--bordure-claire);

    box-shadow:
        0 3px 14px rgba(23, 63, 95, 0.04);

    backdrop-filter: blur(8px);

    box-sizing: border-box;
}

.sur-titre {
    margin: 0;

    color: var(--vert);

    font-size: 12px;
    font-weight: 800;

    letter-spacing: 0.8px;

    text-transform: uppercase;
}

.profil-utilisateur {
    display: flex;
    align-items: center;

    gap: 9px;

    min-width: 145px;
}

.avatar-utilisateur {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 36px;
    min-width: 36px;
    height: 36px;

    border-radius: 50%;

    background: var(--vert-clair);
    color: var(--vert-fonce);

    font-size: 12px;
    font-weight: 800;
}

.profil-utilisateur strong {
    display: block;

    color: var(--bleu-fonce);

    font-size: 13px;
}

.profil-utilisateur span {
    display: block;

    margin-top: 1px;

    color: var(--texte-secondaire);

    font-size: 11px;
}


/* ==========================================================
   CONTENEUR PRINCIPAL
========================================================== */

.conteneur {
    width: 100%;

    min-width: 0;
    max-width: none;

    margin: 0;

    padding: 22px 24px 42px;

    box-sizing: border-box;
}


/* ==========================================================
   TITRES ET EN-TÊTES
========================================================== */

.introduction {
    margin-bottom: 22px;
}

.introduction h1,
.introduction h2,
.titre-page h1,
.titre-page h2 {
    margin-top: 0;
    margin-bottom: 6px;
}

.introduction p,
.titre-page p {
    margin: 0;

    color: var(--texte-secondaire);
}

.titre-page {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 20px;

    margin-bottom: 21px;
}

.page-entete,
.entete-page {
    display: flex;

    align-items: flex-start;
    justify-content: space-between;

    gap: 20px;

    margin-bottom: 20px;
}

.page-entete h1,
.page-entete h2,
.entete-page h1,
.entete-page h2 {
    margin: 0 0 5px;

    color: var(--lbc-navy);

    font-size: 27px;
    line-height: 1.2;
}

.page-entete p,
.entete-page p {
    margin: 0;

    color: var(--lbc-muted);
}

.page-actions,
.actions-page,
.actions-entete,
.actions-fiche,
.barre-actions {
    display: flex;

    align-items: center;
    justify-content: flex-end;

    flex-wrap: wrap;

    gap: 10px;
}


/* ==========================================================
   AJUSTEMENTS GÉNÉRAUX
========================================================== */

*,
*::before,
*::after {
    box-sizing: border-box;
}

img,
svg,
video,
canvas {
    max-width: 100%;
    height: auto;
}

table {
    width: 100%;
    border-collapse: collapse;
}

button,
input,
select,
textarea {
    font: inherit;
}

.zone-principale > * {
    width: 100%;
    min-width: 0;
}

.conteneur > * {
    max-width: 100%;
    min-width: 0;
}

.page-entete,
.entete-page,
.introduction,
.barre-actions,
.actions-page {
    width: 100%;
}


/* ==========================================================
   GRILLES
========================================================== */

.grille {
    display: grid;
    gap: 20px;
}

.grille-2 {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 20px;
}

.grille-3 {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 20px;
}

.grille-4 {
    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 20px;
}

.carte {
    width: 100%;
    min-width: 0;
}


/* ==========================================================
   RESPONSIVE
========================================================== */

@media (max-width: 1200px) {

    .grille-4 {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }
}


@media (max-width: 900px) {

    .grille-2,
    .grille-3,
    .grille-4 {
        grid-template-columns: 1fr;
    }

    .page-entete,
    .entete-page {
        flex-direction: column;
        align-items: stretch;
    }

    .page-actions,
    .actions-page,
    .actions-entete,
    .actions-fiche,
    .barre-actions {
        justify-content: flex-start;
    }

    .profil-utilisateur {
        display: none;
    }
}


@media (max-width: 760px) {

    .menu-lateral {
        position: relative;

        width: 100%;
        height: auto;

        overflow: visible;
    }

    .application {
        flex-direction: column;
    }

    .zone-principale {
        margin-left: 0;

        width: 100%;
        min-width: 0;
    }

    .barre-superieure {
        position: relative;
    }

    .navigation {
        overflow: visible;
    }

    .pied-menu {
        display: none;
    }
}


/* ==========================================================
   ÉCRANS PEU HAUTS
========================================================== */

@media (max-height: 720px) and (min-width: 761px) {

    .identite-application {
        padding-top: 8px;
        padding-bottom: 8px;
    }

    .logo-application {
        width: 36px;
        min-width: 36px;
        height: 36px;
    }

    .navigation {
        padding-top: 5px;
        padding-bottom: 5px;
    }

    .titre-navigation {
        margin-top: 5px;
        margin-bottom: 2px;
    }

    .navigation a,
    .groupe-navigation summary {
        min-height: 28px;

        padding-top: 3px;
        padding-bottom: 3px;

        font-size: 11px;
    }

    .icone-navigation {
        width: 23px;
        min-width: 23px;
        height: 23px;

        font-size: 13px;
    }

    .sous-navigation a {
        min-height: 23px;

        padding-top: 2px;
        padding-bottom: 2px;

        font-size: 10px;
    }

    .mini-picto {
        width: 18px;
        min-width: 18px;
        height: 18px;

        font-size: 10px;
    }

    .pied-menu {
        padding-top: 5px;
        padding-bottom: 6px;
    }
}


/* ==========================================================
   DÉBORDEMENTS
========================================================== */

.zone-principale,
.conteneur,
.page-entete,
.entete-page,
.barre-superieure {
    overflow-x: hidden;
}

.page-entete > *,
.entete-page > *,
.barre-superieure > * {
    min-width: 0;
}

/* Masquer Programmations dans le menu */
a:has(.picto-programmations) {
    display: none;
}


/* ==========================================================
   LA RUCHE LPC — IDENTITÉ VISUELLE 2026
   Version douce validée : crème / miel clair / bleu / vert
========================================================== */

:root {
    --ruche-creme: #fffaf0;
    --ruche-creme-chaud: #fff4cf;
    --ruche-miel-clair: #f7df91;
    --ruche-miel: #edc85d;
    --ruche-miel-fonce: #cfa73a;

    --ruche-bleu: #173f5f;
    --ruche-bleu-moyen: #245a7a;

    --ruche-vert: #15967d;
    --ruche-vert-fonce: #117c68;
    --ruche-vert-clair: #e8f6f2;
}


/* ----------------------------------------------------------
   MENU LATÉRAL
---------------------------------------------------------- */

.menu-lateral {
    background:
        linear-gradient(
            180deg,
            #fffaf0 0%,
            #fff4cf 46%,
            #f8e4a5 100%
        );

    color: var(--ruche-bleu);

    box-shadow:
        5px 0 24px rgba(23, 63, 95, 0.08);
}


/* ----------------------------------------------------------
   IDENTITÉ
---------------------------------------------------------- */

.identite-application {
    border-bottom:
        1px solid rgba(23, 63, 95, 0.08);
}

.logo-application {
    background:
        linear-gradient(
            135deg,
            #f7df91,
            #edc85d
        );

    color: var(--ruche-bleu);

    box-shadow:
        0 4px 10px rgba(126, 92, 18, 0.10);
}

/*
   Important :
   aucun faux logo ou pot de miel généré en CSS.
   Le futur logo "ruche + branche" sera placé dans base.html.
*/
.logo-application::before {
    content: none;
}

.identite-application h1 {
    color: var(--ruche-bleu);
    font-weight: 900;
}

.identite-application p {
    color: rgba(23, 63, 95, 0.66);
    font-weight: 700;
}


/* ----------------------------------------------------------
   NAVIGATION
---------------------------------------------------------- */

.titre-navigation {
    color: rgba(23, 63, 95, 0.62);
}

.navigation a,
.groupe-navigation summary {
    color: var(--ruche-bleu);
}

.navigation a:hover,
.groupe-navigation summary:hover {
    background:
        rgba(255, 255, 255, 0.55);

    color: var(--ruche-bleu);
}

.navigation a.actif {
    background:
        linear-gradient(
            90deg,
            #dff1df,
            #cae7d1
        );

    color: var(--ruche-vert-fonce);

    box-shadow:
        none;
}

.navigation a.actif .icone-navigation {
    box-shadow:
        none;
}

.groupe-navigation summary::after {
    color: rgba(23, 63, 95, 0.56);
}

.sous-navigation {
    border-left:
        1px solid rgba(23, 63, 95, 0.12);
}

.sous-navigation a {
    color: var(--ruche-bleu);
}


/* ----------------------------------------------------------
   PICTOGRAMMES
---------------------------------------------------------- */

.icone-navigation {
    box-shadow:
        0 2px 6px rgba(23, 63, 95, 0.08);
}

.icone-accueil {
    background: #dff1e8;
    color: var(--ruche-vert-fonce);
}

.icone-beneficiaires {
    background: #e9f3ef;
    color: var(--ruche-vert-fonce);
}

.icone-seances,
.icone-planning {
    background: #f6e4a5;
    color: var(--ruche-bleu);
}

.icone-equipe {
    background: #e5f2e8;
    color: var(--ruche-vert-fonce);
}

.icone-organisation {
    background: #f2ead5;
    color: var(--ruche-bleu);
}

.icone-finance {
    background: #e3f1eb;
    color: var(--ruche-vert-fonce);
}

.icone-configuration {
    background: #edf1f3;
    color: var(--ruche-bleu);
}


/* ----------------------------------------------------------
   PIED DU MENU
---------------------------------------------------------- */

.pied-menu {
    border-top:
        1px solid rgba(23, 63, 95, 0.08);
}

.pied-menu p {
    color: rgba(23, 63, 95, 0.68);
}

.pied-menu span {
    color: var(--ruche-vert-fonce);
}

/* Aucun trio d'abeilles dans le pied du menu */
.pied-menu::before {
    content: none;
}


/* ----------------------------------------------------------
   BARRE SUPÉRIEURE
---------------------------------------------------------- */

.barre-superieure {
    background:
        rgba(255, 255, 255, 0.97);

    border-bottom:
        1px solid rgba(21, 150, 125, 0.10);

    box-shadow:
        0 3px 14px rgba(23, 63, 95, 0.035);
}

.sur-titre {
    color: var(--ruche-bleu);
}


/* Préparation des éléments du futur base.html */
.marque-ruche {
    display: inline-flex;
    align-items: baseline;
    gap: 5px;

    color: var(--ruche-bleu);

    font-size: 18px;
    font-weight: 900;
    letter-spacing: 0.2px;
}

.marque-ruche .lpc {
    color: var(--ruche-vert);
}

.equipe-abeilles {
    display: flex;
    align-items: center;
    gap: 14px;

    margin-left: auto;
}

.equipe-abeilles .codeuse {
    display: inline-flex;
    align-items: center;
    gap: 5px;

    color: var(--ruche-bleu);

    font-size: 11px;
    font-weight: 800;

    white-space: nowrap;
}

.equipe-abeilles .abeille {
    font-size: 18px;
    line-height: 1;
}


/* ----------------------------------------------------------
   ZONE PRINCIPALE
---------------------------------------------------------- */

.zone-principale {
    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #fcfdfc 62%,
            #fffdf8 100%
        );
}


/* ----------------------------------------------------------
   COMPACTAGE GLOBAL — PREMIÈRE PASSE
---------------------------------------------------------- */

.conteneur {
    padding:
        16px 20px
        26px;
}

.introduction {
    margin-bottom: 14px;
}

.titre-page,
.page-entete,
.entete-page {
    margin-bottom: 14px;
}

.page-entete h1,
.page-entete h2,
.entete-page h1,
.entete-page h2 {
    font-size: 25px;
}

.grille,
.grille-2,
.grille-3,
.grille-4 {
    gap: 13px;
}

.page-actions,
.actions-page,
.actions-entete,
.actions-fiche,
.barre-actions {
    gap: 8px;
}


/* ----------------------------------------------------------
   PETITS ÉCRANS
---------------------------------------------------------- */

@media (max-width: 1100px) {

    .equipe-abeilles {
        gap: 8px;
    }

    .equipe-abeilles .codeuse {
        font-size: 0;
    }

    .equipe-abeilles .abeille {
        font-size: 17px;
    }
}

/* ==========================================================
   LA RUCHE LPC — VISUEL VERROUILLÉ
   VERSION VALIDÉE
========================================================== */

:root {
    --largeur-menu: 255px;
    --ruche-navy: #123a66;
    --ruche-teal: #0f8f78;
    --ruche-green: #109a65;
    --ruche-cream: #fffaf0;
    --ruche-cream-2: #fff4dc;
    --ruche-honey: #f5d56a;
    --ruche-honey-2: #f0c34b;
    --ruche-pink: #f8d8e2;
    --ruche-mint: #dff4ea;
    --ruche-blue-soft: #dcecff;
    --ruche-violet-soft: #e8ddff;
    --ruche-page: #f8f4ec;
    --ruche-card: #ffffff;
    --ruche-border: #e5dfd3;
    --ruche-muted: #607080;
}

body,
button,
input,
select,
textarea {
    font-family:
        "Trebuchet MS",
        "Segoe UI",
        Arial,
        sans-serif;
}

h1,
h2,
h3,
h4,
h5,
h6,
.identite-application h1,
.marque-ruche,
.navigation strong {
    font-family:
        "Trebuchet MS",
        "Segoe UI",
        Arial,
        sans-serif;
}

html,
body {
    background: var(--ruche-page);
}

.zone-principale {
    background:
        linear-gradient(
            180deg,
            #fffdf8 0%,
            #f8f4ec 100%
        );
}

.conteneur {
    padding: 14px 18px 22px;
}

/* MENU */

.menu-lateral {
    width: var(--largeur-menu);
    background:
        linear-gradient(
            180deg,
            #fffdf5 0%,
            #fff3cf 58%,
            #f8e5a4 100%
        );
    color: var(--ruche-navy);
    border-right: 1px solid rgba(18, 58, 102, 0.07);
    box-shadow: 4px 0 20px rgba(18, 58, 102, 0.07);
}

.zone-principale {
    width: calc(100% - var(--largeur-menu));
    margin-left: var(--largeur-menu);
}

/* IDENTITÉ */

.identite-application {
    position: relative;
    display: block;
    min-height: 150px;
    padding: 18px 14px 12px;
    text-align: center;
    border-bottom: 1px solid rgba(18, 58, 102, 0.07);
}


.logo-application {
    width: 74px;
    min-width: 74px;
    height: 74px;
    margin: 4px auto 4px;
    border-radius: 24px;
    background:
        linear-gradient(
            180deg,
            #ffd85e,
            #f2b935
        );
    box-shadow: 0 7px 18px rgba(198, 146, 26, 0.18);
    color: #784f00;
    font-size: 35px;
}

.identite-application h1 {
    margin-top: 4px;
    color: var(--ruche-navy);
    font-size: 21px;
    line-height: 1.05;
    font-weight: 900;
}

.nom-lpc,
.identite-application h1 .nom-lpc {
    color: var(--ruche-teal);
}

.identite-application p {
    margin-top: 6px;
    color: #234a68;
    font-size: 10px;
    line-height: 1.25;
    font-weight: 700;
}

/* NAVIGATION */

.navigation {
    padding: 8px 12px 6px;
    gap: 7px;
    overflow-y: auto;
}

.navigation > a,
.groupe-navigation summary {
    min-height: 54px;
    padding: 7px 8px;
    gap: 10px;
    border-radius: 15px;
    color: var(--ruche-navy);
    background: transparent;
    font-size: 13px;
}

.navigation > a:hover,
.groupe-navigation summary:hover {
    background: rgba(255, 255, 255, 0.68);
    transform: none;
}

.navigation a.actif {
    background:
        linear-gradient(
            90deg,
            #ffe7a1,
            #fff0bd
        );
    color: var(--ruche-navy);
    box-shadow: 0 4px 12px rgba(197, 145, 36, 0.10);
}

.texte-navigation {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.texte-navigation strong {
    color: var(--ruche-navy);
    font-size: 13px;
    line-height: 1.1;
}

.texte-navigation small {
    margin-top: 3px;
    color: #36566f;
    font-size: 10px;
    line-height: 1.1;
}

.icone-navigation {
    width: 34px;
    min-width: 34px;
    height: 34px;
    border-radius: 11px;
    font-size: 18px;
    box-shadow: 0 3px 9px rgba(18, 58, 102, 0.07);
}

.icone-accueil {
    background: #fff4cf;
    color: var(--ruche-green);
}

.icone-beneficiaires {
    background: #fff1bd;
    color: #b57c00;
}

.icone-planning {
    background: var(--ruche-pink);
    color: #c22f66;
}

.icone-equipe {
    background: #dff7f2;
    color: var(--ruche-teal);
}

.icone-finance {
    background: var(--ruche-violet-soft);
    color: #6755cf;
}

.icone-configuration {
    background: var(--ruche-blue-soft);
    color: #235fd1;
}

.groupe-navigation summary::after {
    color: var(--ruche-navy);
    font-size: 19px;
}

.sous-navigation {
    margin: 1px 0 3px 38px;
    padding-left: 8px;
    border-left: 1px solid rgba(18, 58, 102, 0.10);
}

.sous-navigation a {
    min-height: 27px;
    padding: 4px 7px;
    color: var(--ruche-navy);
    font-size: 10px;
    border-radius: 8px;
}

.sous-navigation a:hover {
    background: rgba(255, 255, 255, 0.55);
}

/* INFOBULLES */

.navigation a[title],
.groupe-navigation summary[title] {
    position: relative;
}

.navigation a[title]:hover::after,
.groupe-navigation summary[title]:hover::after {
    content: attr(title);
    position: fixed;
    z-index: 9999;
    left: calc(var(--largeur-menu) + 8px);
    padding: 6px 9px;
    border-radius: 8px;
    background: #163a5a;
    color: white;
    font-size: 10px;
    font-weight: 700;
    white-space: nowrap;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.16);
    pointer-events: none;
}

/* BAS DU MENU */

.decor-menu-bas {
    margin-top: auto;
    padding: 4px 15px 0;
    color: #59718c;
    font-size: 15px;
}

.trace-abeille {
    letter-spacing: 2px;
}

.pied-menu {
    padding: 6px 15px 12px;
    border-top: none;
}

.pied-menu p {
    color: #36566f;
    font-size: 9px;
}

.pied-menu span {
    color: var(--ruche-teal);
    font-size: 9px;
    font-weight: 800;
}

/* BARRE SUPÉRIEURE */

.barre-superieure {
    min-height: 72px;
    padding: 8px 26px;
    background: rgba(255, 255, 255, 0.96);
    border-bottom: 1px solid rgba(18, 58, 102, 0.07);
    box-shadow: 0 3px 12px rgba(18, 58, 102, 0.04);
}

.marque-ruche {
    color: var(--ruche-navy);
    font-size: 26px;
    font-weight: 900;
    letter-spacing: 0.5px;
}

.marque-ruche .lpc {
    color: var(--ruche-teal);
}

/* ABEILLES */

.equipe-abeilles {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-left: auto;
}

.equipe-abeilles .codeuse {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    min-width: 50px;
    color: var(--ruche-navy);
    font-size: 10px;
    font-weight: 800;
    text-decoration: none;
}

.equipe-abeilles .codeuse:hover {
    transform: translateY(-1px);
}

.equipe-abeilles .abeille-image {
    display: block;
    width: 48px;
    height: 48px;
    object-fit: contain;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

/* PROFIL */

.profil-utilisateur {
    gap: 10px;
    min-width: 215px;
    padding-left: 14px;
    border-left: 1px dashed rgba(18, 58, 102, 0.12);
}

.avatar-utilisateur {
    width: 42px;
    min-width: 42px;
    height: 42px;
    background: #e2f4ed;
    color: var(--ruche-teal);
    font-size: 15px;
}

.informations-utilisateur strong {
    color: var(--ruche-navy);
    font-size: 12px;
}

.informations-utilisateur span {
    margin-top: 2px;
    color: #607080;
    font-size: 10px;
}

.bouton-deconnexion {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 30px;
    margin-left: 6px;
    padding: 5px 9px;
    border: 1px solid rgba(15, 143, 120, 0.30);
    border-radius: 9px;
    background: #ffffff;
    color: var(--ruche-teal);
    font-size: 10px;
    font-weight: 800;
    text-decoration: none;
}

.bouton-deconnexion:hover {
    background: #edf9f5;
}

/* COMPACTAGE */

.page-entete,
.entete-page,
.titre-page,
.introduction {
    margin-bottom: 10px;
}

.page-entete h1,
.page-entete h2,
.entete-page h1,
.entete-page h2,
.titre-page h1,
.titre-page h2,
.introduction h1,
.introduction h2 {
    color: var(--ruche-navy);
    font-size: 26px;
    line-height: 1.05;
}

.page-entete p,
.entete-page p,
.titre-page p,
.introduction p {
    color: var(--ruche-muted);
    font-size: 12px;
}

.carte,
.tableau-conteneur,
.filtres-seances,
.resume,
.formulaire,
.bloc,
.panel {
    border: 1px solid var(--ruche-border);
    border-radius: 15px;
    background: #ffffff;
    box-shadow: 0 4px 14px rgba(18, 58, 102, 0.04);
}

.grille,
.grille-2,
.grille-3,
.grille-4 {
    gap: 10px;
}

.page-actions,
.actions-page,
.actions-entete,
.actions-fiche,
.barre-actions {
    gap: 6px;
}

/* TABLEAUX */

table {
    overflow: hidden;
    border-radius: 13px;
}

thead th,
th {
    background:
        linear-gradient(
            180deg,
            #123f70,
            #103760
        );
    color: #ffffff;
}

th,
td {
    padding: 6px 7px;
    font-size: 11px;
}

tbody tr:hover {
    background: #fffaf0;
}

/* RESPONSIVE */

@media (max-width: 1100px) {
    .equipe-abeilles {
        gap: 10px;
    }

    .nom-codeuse {
        display: none;
    }

    .profil-utilisateur {
        min-width: 160px;
    }
}

@media (max-width: 760px) {
    .menu-lateral {
        width: 100%;
    }

    .zone-principale {
        width: 100%;
        margin-left: 0;
    }

    .barre-superieure {
        min-height: auto;
        flex-wrap: wrap;
    }

    .marque-ruche {
        font-size: 21px;
    }
}
/* ==========================================================
   CORRECTION ABEILLES BARRE SUPÉRIEURE
========================================================== */

/* ==========================================================
   FORÇAGE NOUVEAU LOGO LA RUCHE LPC
========================================================== */

.identite-application::before {
    content: none !important;
    display: none !important;
}

.logo-application,
.logo-ruche,
.ruche-emoji {
    display: none !important;
}

.logo-nouvelle-ruche {
    display: block !important;
    position: relative !important;

    width: 180px !important;
    height: 125px !important;

    margin: 0 auto 8px !important;
}

.ruche-css {
    display: block !important;
}

.ruche-bande,
.porte-ruche,
.mini-abeille {
    display: block !important;
}

/* ==========================================================
   RUCHE CSS — DESSIN COMPLET
========================================================== */

.logo-nouvelle-ruche {
    position: relative !important;

    width: 180px !important;
    height: 125px !important;

    margin: 0 auto 8px !important;
}


.ruche-css {
    position: absolute !important;

    top: 5px !important;
    left: 50% !important;

    width: 118px !important;
    height: 112px !important;

    transform: translateX(-50%) !important;
}


/* BANDES */

.ruche-bande {
    position: absolute !important;

    left: 50% !important;

    transform: translateX(-50%) !important;

    border-radius: 50% !important;

    background:
        linear-gradient(
            180deg,
            #ffdf68 0%,
            #f7c12f 55%,
            #dfa21a 100%
        ) !important;

    box-shadow:
        inset 0 -4px 0 rgba(151, 96, 5, 0.12),
        0 2px 5px rgba(157, 110, 15, 0.10) !important;
}


.ruche-bande-1 {
    top: 0 !important;
    width: 52px !important;
    height: 26px !important;
}


.ruche-bande-2 {
    top: 17px !important;
    width: 78px !important;
    height: 29px !important;
}


.ruche-bande-3 {
    top: 36px !important;
    width: 100px !important;
    height: 31px !important;
}


.ruche-bande-4 {
    top: 56px !important;
    width: 114px !important;
    height: 32px !important;
}


.ruche-bande-5 {
    top: 77px !important;
    width: 106px !important;
    height: 34px !important;
}


/* ENTRÉE */

.porte-ruche {
    position: absolute !important;

    z-index: 10 !important;

    bottom: 1px !important;
    left: 50% !important;

    width: 31px !important;
    height: 42px !important;

    transform: translateX(-50%) !important;

    border-radius: 18px 18px 3px 3px !important;

    background:
        linear-gradient(
            180deg,
            #87520d,
            #563007
        ) !important;
}


/* PETITES ABEILLES */

.mini-abeille {
    position: absolute !important;

    display: block !important;

    font-size: 21px !important;

    line-height: 1 !important;
}


.mini-abeille-gauche {
    top: 52px !important;
    left: 5px !important;

    transform: rotate(-10deg) !important;
}


.mini-abeille-droite {
    top: 30px !important;
    right: 4px !important;

    transform: rotate(12deg) !important;
}
/* ==========================================================
   LOGO LA RUCHE LPC
   Ruche centrale + 3 abeilles autour
========================================================== */

.logo-ruche-anime {
    position: relative;
    width: 150px;
    height: 125px;
    margin: 0 auto 10px;
}


/* ---------- RUCHE ---------- */

.ruche-moderne {
    position: absolute !important;
    display: block !important;

    width: 78px;
    height: 88px;

    left: 50%;
    top: 18px;

    transform: translateX(-50%);

    z-index: 2;
}


/* Les 6 étages de la ruche */

.ruche-ligne {
    display: block !important;
    position: absolute;

    left: 50%;
    transform: translateX(-50%);

    height: 13px;

    background: #f4b928;

    border-radius: 10px;

    box-shadow:
        inset 0 -3px 0 rgba(183, 126, 18, 0.18),
        0 2px 3px rgba(0, 0, 0, 0.08);
}


.ruche-ligne-1 {
    width: 38px;
    top: 0;
}

.ruche-ligne-2 {
    width: 52px;
    top: 12px;
}

.ruche-ligne-3 {
    width: 64px;
    top: 24px;
}

.ruche-ligne-4 {
    width: 72px;
    top: 36px;
}

.ruche-ligne-5 {
    width: 68px;
    top: 48px;
}

.ruche-ligne-6 {
    width: 58px;
    top: 60px;
}


/* Entrée de la ruche */

.entree-ruche-moderne {
    display: block !important;
    position: absolute;

    width: 18px;
    height: 22px;

    left: 50%;
    top: 51px;

    transform: translateX(-50%);

    background: #70471d;

    border-radius: 50% 50% 5px 5px;

    z-index: 3;
}


/* ---------- LES 3 ABEILLES ---------- */

.abeille-orbite {
    display: block !important;
    position: absolute;

    font-size: 23px;
    line-height: 1;

    z-index: 5;

    animation: vol-abeille 3s ease-in-out infinite;
}


.abeille-orbite-1 {
    left: 2px;
    top: 23px;

    animation-delay: 0s;
}


.abeille-orbite-2 {
    right: 0;
    top: 30px;

    animation-delay: -1s;
}


.abeille-orbite-3 {
    left: 62px;
    top: 0;

    animation-delay: -2s;
}


/* Petit mouvement indépendant des abeilles */

@keyframes vol-abeille {

    0%,
    100% {
        transform: translate(0, 0) rotate(-8deg);
    }

    25% {
        transform: translate(4px, -5px) rotate(5deg);
    }

    50% {
        transform: translate(7px, 2px) rotate(10deg);
    }

    75% {
        transform: translate(-3px, 5px) rotate(-4deg);
    }
}
/* ==========================================================
   MENU LATÉRAL - SANS ASCENSEUR INTERNE
========================================================== */

.menu-lateral {
    overflow: hidden !important;
}

.navigation-laterale,
.menu-navigation,
.navigation {
    overflow: visible !important;
    max-height: none !important;
    height: auto !important;
}


/* ==========================================================
   BAS DU MENU
   Masquer l'ancienne mention de l'association
========================================================== */

.pied-menu p,
.pied-menu .association,
.footer-menu .association,
.menu-lateral .mention-association {
    display: none !important;
}
/* ==========================================================
   MENU GAUCHE — SANS ASCENSEUR ET SANS PIED
========================================================== */

.menu-lateral {
    overflow: hidden !important;
}

/* La navigation occupe l'espace disponible */
.navigation {
    flex: 1 1 auto !important;
    min-height: 0 !important;

    overflow: visible !important;

    padding-bottom: 10px !important;
}

/* On masque complètement le bas du menu */
.decor-menu-bas,
.pied-menu {
    display: none !important;
}

/* On évite que les derniers boutons soient collés en bas */
.navigation > a:last-of-type,
.navigation details:last-child {
    margin-bottom: 10px !important;
}