/* =========================================================================
   BIOPOINT AI CORE - L'ESPACE SALARIE : NAVIGATION ET PAGES UNIQUES
   (espace_salarie.css)
   =========================================================================
   UN SEUL MENU : celui de gauche (le tiroir « Menu » sur telephone), en
   accordeon. Sur la page, le titre, une ligne d'aide et, s'il y a lieu, un
   bouton « Plus ▾ » dans la barre de titre - aucune rangee de navigation de
   plus. Le tout lisible sur 375 px, au pouce, sans jamais faire defiler la page
   en largeur : un tableau devient une pile de cartes.
   ========================================================================= */

/* --- Le menu : neuf rubriques en accordeon -------------------------------- */
.es-rubriques { display: flex; flex-direction: column; gap: 2px; margin: 0 0 var(--bp-4); padding: 0; list-style: none; }
.es-rubrique { position: relative; }
.es-rubriques .nav-link-custom { min-height: var(--bp-tap); margin-bottom: 0; padding-block: 0; font-size: .93rem; }
.es-rubriques .nav-link-custom i { width: 1.25rem; text-align: center; }
/* La place du chevron, a droite de la rubrique qui a plusieurs pages. */
.es-rubrique.es-a-pages > .nav-link-custom { padding-inline-end: calc(var(--bp-tap) + .25rem); }
.es-rubriques .es-libelle { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.es-rubriques .es-total {
    flex: 0 0 auto; margin-inline-start: auto; min-width: 1.4rem; padding: .05rem .45rem; border-radius: 999px;
    background: var(--bp-warning); color: #241703; font-size: .72rem; font-weight: 800; text-align: center;
}

/* Le chevron : un <details> dont le <summary> se pose au bout de la rubrique.
   Ferme, il ne prend aucune hauteur ; ouvert, ses pages s'alignent dessous. */
.es-depli > summary {
    position: absolute; top: 0; inset-inline-end: 0; display: flex; align-items: center; justify-content: center;
    width: var(--bp-tap); height: var(--bp-tap); border-radius: var(--bp-r-sm);
    color: var(--bp-text-3); cursor: pointer; list-style: none; -webkit-tap-highlight-color: transparent;
}
.es-depli > summary::-webkit-details-marker { display: none; }
.es-depli > summary::marker { content: ""; }
.es-depli > summary:hover { color: var(--bp-text); background: rgba(63, 63, 70, .5); }
.es-depli > summary:focus-visible { outline: 2px solid var(--bp-primary-soft); outline-offset: -2px; }
.es-depli > summary i { font-size: .72rem; transition: transform .2s ease; }
.es-depli[open] > summary i { transform: rotate(180deg); }

.es-pages {
    margin: .1rem 0 .45rem; margin-inline-start: 1.45rem; padding: 0; padding-inline-start: .55rem;
    list-style: none; border-inline-start: 1px solid var(--bp-border-strong);
}
.es-page {
    display: flex; align-items: center; gap: .5rem; min-height: 40px; padding: .4rem .7rem;
    border-radius: var(--bp-r-sm); color: var(--bp-text-3); font-size: .87rem; font-weight: 500;
    text-decoration: none; -webkit-tap-highlight-color: transparent;
}
.es-page:hover { color: var(--bp-text); background: rgba(63, 63, 70, .45); }
.es-page.active { color: var(--bp-text); background: rgba(99, 102, 241, .14); font-weight: 700; }
.es-page .es-total { font-size: .68rem; }

/* --- « Plus ▾ » : les vues secondaires de la page, dans la barre de titre --- */
.es-vues { position: relative; flex: 0 0 auto; }
.es-vues > summary {
    display: inline-flex; align-items: center; gap: .4rem; min-height: 40px; padding: .35rem .85rem;
    border: 1px solid var(--bp-border-strong); border-radius: 999px; background: rgba(24, 24, 28, .85);
    color: var(--bp-text); font-size: .86rem; font-weight: 700; white-space: nowrap;
    cursor: pointer; list-style: none; user-select: none; -webkit-tap-highlight-color: transparent;
}
.es-vues > summary::-webkit-details-marker { display: none; }
.es-vues > summary::marker { content: ""; }
.es-vues > summary:hover, .es-vues[open] > summary { border-color: var(--bp-primary-soft); }
.es-vues > summary:focus-visible { outline: 2px solid var(--bp-primary-soft); outline-offset: 2px; }
.es-vues > summary .es-fleche { font-size: .9rem; line-height: 1; transition: transform .2s ease; }
.es-vues[open] > summary .es-fleche { transform: rotate(180deg); }
.es-vues > summary .es-total, .es-vues-liste .es-total {
    padding: 0 .4rem; border-radius: 999px; background: var(--bp-warning); color: #241703;
    font-size: .68rem; font-weight: 800;
}
.es-vues-liste {
    position: absolute; top: calc(100% + 6px); inset-inline-end: 0; z-index: 1050;
    width: max-content; min-width: 230px; max-width: 340px; margin: 0; padding: .35rem; list-style: none;
    border: 1px solid var(--bp-border-strong); border-radius: 14px; background: #18181b;
    box-shadow: var(--bp-shadow-lg);
}
.es-vues-liste a {
    display: flex; flex-direction: column; gap: .1rem; min-height: var(--bp-tap); padding: .5rem .7rem;
    border-radius: 10px; color: var(--bp-text); text-decoration: none;
}
.es-vues-liste a:hover, .es-vues-liste a:focus-visible { background: rgba(63, 63, 70, .55); }
.es-vues-liste a.active { background: var(--bp-primary-glow); box-shadow: inset 3px 0 0 var(--bp-primary); }
.es-vue-titre { display: flex; align-items: center; gap: .4rem; font-size: .9rem; font-weight: 700; }
.es-vue-aide { color: var(--bp-text-3); font-size: .76rem; line-height: 1.35; white-space: normal; }
/* Sur telephone, la liste prend la largeur de la barre de titre (elle s'y
   accroche) : jamais coupee par le bord de l'ecran. */
@media (max-width: 575.98px) {
    .es-vues { position: static; }
    .es-vues > summary { padding-inline: .7rem; }
    .es-vues-liste { inset-inline: var(--bp-3); top: calc(100% - 2px); width: auto; min-width: 0; max-width: none; }
}

/* --- La barre de titre sur telephone : la ligne d'aide en entier ------------
   Entre le bouton du menu, « Plus ▾ » et la cloche, il ne reste au titre
   qu'une centaine de pixels : la ligne d'aide - la seule explication de la
   page - s'y couperait au tiers. Sur telephone, elle passe sous le titre, sur
   toute la largeur, en deux lignes au plus. Le bouton du compte a sa propre
   case, entre « Plus ▾ » et la cloche : sans elle, il tomberait sous la ligne
   d'aide des que « Plus ▾ » occupe la sienne (le planning). */
@media (max-width: 575.98px) {
    .es-barre-titre {
        display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto auto;
        grid-template-areas: "menu titre plus compte cloche" "aide aide aide aide aide";
        align-items: center; column-gap: var(--bp-2); row-gap: .2rem; padding-block: .45rem .55rem;
    }
    .es-barre-titre > .mobile-toggle-btn { grid-area: menu; }
    .es-barre-titre > .bp-topbar-title { display: contents; }
    .es-barre-titre h1 { grid-area: titre; }
    .es-barre-titre .bp-topbar-title p {
        grid-area: aide; white-space: normal; display: -webkit-box; -webkit-box-orient: vertical;
        -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; line-height: 1.35;
    }
    .es-barre-titre > .es-vues { grid-area: plus; }
    .es-barre-titre > [data-lien-mon-compte] { grid-area: compte; margin-inline-end: 0 !important; }
    .es-barre-titre > .es-cloche { grid-area: cloche; margin-inline-end: 0 !important; }
}
/* Les plus petits ecrans (320 px) : des marges plus serrees laissent au titre
   la place de son mot. */
@media (max-width: 359.98px) {
    .es-barre-titre { column-gap: .3rem; }
    .es-vues > summary { padding-inline: .45rem; }
}

/* --- « En savoir plus » : le detail, replie --------------------------------- */
.es-plus { margin: 0 0 var(--bp-3); }
.es-plus > summary {
    display: inline-flex; align-items: center; gap: .35rem; cursor: pointer; list-style: none;
    color: var(--bp-info); font-size: .84rem; font-weight: 600; min-height: 32px;
}
.es-plus > summary::-webkit-details-marker { display: none; }
.es-plus > summary::before { content: "\25B8"; font-size: .7rem; }
.es-plus[open] > summary::before { content: "\25BE"; }
.es-plus > div {
    margin-top: .4rem; padding: .7rem .9rem; border-left: 3px solid var(--bp-info);
    background: rgba(56, 189, 248, .06); border-radius: 0 10px 10px 0;
    color: var(--bp-text-2); font-size: .84rem;
}
.es-plus > div p:last-child { margin-bottom: 0; }
.es-plus.es-calcul > div { padding: 0; border: 0; background: transparent; }

/* --- La barre d'action de la page : UN bouton principal --------------------- */
.es-barre { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin: 0 0 var(--bp-3); }
.es-barre .es-grand { min-height: 48px; padding-inline: 1.2rem; font-weight: 700; }
.es-barre .form-select { width: auto; min-height: 44px; }

/* --- Pastilles de statut : une couleur ET un mot ---------------------------- */
.es-pastille {
    display: inline-flex; align-items: center; gap: .3rem; padding: .2rem .6rem; border-radius: 999px;
    font-size: .76rem; font-weight: 700; border: 1px solid transparent; max-width: 100%;
}
.es-pastille::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: currentColor; }
.es-pastille--success   { color: #6ee7b7; background: rgba(16, 185, 129, .14); border-color: rgba(16, 185, 129, .35); }
.es-pastille--warning   { color: #fcd34d; background: rgba(245, 158, 11, .14); border-color: rgba(245, 158, 11, .4); }
.es-pastille--danger    { color: #fca5a5; background: rgba(239, 68, 68, .14); border-color: rgba(239, 68, 68, .4); }
.es-pastille--info      { color: #7dd3fc; background: rgba(56, 189, 248, .12); border-color: rgba(56, 189, 248, .35); }
.es-pastille--secondary { color: #d4d4d8; background: rgba(161, 161, 170, .12); border-color: rgba(161, 161, 170, .3); }

/* --- Les tuiles de chiffres ------------------------------------------------- */
.es-tuiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; margin: 0 0 var(--bp-3); }
@media (min-width: 768px) { .es-tuiles { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.es-tuile {
    display: flex; flex-direction: column; gap: .15rem; min-width: 0; padding: .75rem .85rem;
    border-radius: 14px; border: 1px solid var(--bp-border); background: rgba(18, 18, 21, .7);
    color: inherit; text-decoration: none;
}
.es-tuile .es-etiquette { color: var(--bp-text-3); font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
/* « 172 h 30 min 00 s » tient sur une ligne d'une demi-largeur de telephone :
   chiffres a chasse fixe dans la police du texte, taille qui suit l'ecran. */
.es-tuile .es-valeur { color: var(--bp-text); font-weight: 800; font-variant-numeric: tabular-nums;
    font-size: clamp(.8rem, 3.5vw, 1.05rem); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.es-tuile .es-note { color: var(--bp-text-3); font-size: .74rem; }
a.es-tuile:hover { border-color: var(--bp-primary-soft); }

/* --- Le motif « Tableau + Detail » ------------------------------------------ */
.es-bloc { padding: var(--bp-3); margin: 0 0 var(--bp-3); border-radius: 16px; border: 1px solid var(--bp-border); background: rgba(18, 18, 21, .65); }
.es-bloc > h2 { display: flex; align-items: center; gap: .5rem; margin: 0 0 .8rem; font-size: 1rem; font-weight: 800; }
.es-bloc > h2 .es-suite { margin-inline-start: auto; font-size: .8rem; font-weight: 600; }

.es-table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.es-table th {
    padding: .55rem .6rem; text-align: start; color: var(--bp-text-3); font-size: .74rem;
    font-weight: 700; text-transform: uppercase; letter-spacing: .04em; border-bottom: 1px solid var(--bp-border);
}
.es-table td { padding: .6rem; border-bottom: 1px solid rgba(63, 63, 70, .5); vertical-align: middle; }
.es-table td.es-nombre, .es-table th.es-nombre { text-align: end; font-family: var(--bp-font-mono); white-space: nowrap; }
.es-table tfoot td { font-weight: 800; border-top: 2px solid var(--bp-border-strong); border-bottom: 0; }
.es-table tr.es-ouvert > td { background: rgba(99, 102, 241, .06); }
.es-table tr.es-detail > td { padding: .3rem .6rem 1rem; background: rgba(99, 102, 241, .04); }
.es-table .es-bouton-detail { min-height: 40px; white-space: nowrap; }
.es-panneau { display: flex; flex-direction: column; gap: .7rem; padding: .8rem; border-radius: 12px; border: 1px solid var(--bp-border); background: rgba(9, 9, 11, .6); }
.es-panneau h3 { margin: 0; font-size: .92rem; font-weight: 800; }
.es-ligne-info { display: flex; flex-wrap: wrap; gap: .35rem 1rem; color: var(--bp-text-2); font-size: .85rem; }
.es-ligne-info b { color: var(--bp-text); }
.es-citation { margin: 0; padding: .5rem .75rem; border-left: 3px solid var(--bp-warning); background: rgba(245, 158, 11, .07); border-radius: 0 10px 10px 0; color: var(--bp-text); font-size: .86rem; }
.es-citation.es-gerant { border-left-color: var(--bp-success); background: rgba(16, 185, 129, .07); }
.es-actions { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.es-actions .btn { min-height: 44px; }
.es-vide { margin: 0; padding: 1.2rem .5rem; text-align: center; color: var(--bp-text-3); }

/* SUR TELEPHONE, LE TABLEAU DEVIENT UNE PILE DE CARTES : chaque ligne est une
   carte, chaque cellule une ligne « en-tete : valeur ». Aucun defilement
   lateral, aucune colonne ecrasee. */
@media (max-width: 720px) {
    .es-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
    .es-table, .es-table tbody, .es-table tfoot, .es-table tr, .es-table td { display: block; width: 100%; }
    /* Une carte compacte : le titre sur toute la largeur, les chiffres deux par
       ligne (l'en-tete au-dessus de la valeur), le bouton en bas. Un mois de
       trente lignes reste une page qu'on parcourt du pouce. */
    .es-table tr:not(.es-detail) {
        display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .1rem .6rem;
        margin: 0 0 .6rem; padding: .45rem .3rem; border-radius: 14px;
        border: 1px solid var(--bp-border); background: rgba(18, 18, 21, .75);
    }
    .es-table tr.es-detail { margin: -.6rem 0 .6rem; }
    .es-table tr.es-detail > td { padding: .4rem 0 0; background: transparent; }
    .es-table td { display: flex; flex-direction: column; align-items: flex-start; gap: .05rem;
        min-width: 0; padding: .25rem .5rem; border: 0; text-align: start; overflow-wrap: anywhere; }
    .es-table td.es-nombre { text-align: start; white-space: normal; font-family: var(--bp-font);
        font-variant-numeric: tabular-nums; }
    .es-table td:empty { display: none; }
    .es-table td[data-label]::before {
        content: attr(data-label); color: var(--bp-text-3); font-size: .68rem;
        font-weight: 700; text-transform: uppercase; letter-spacing: .03em; font-family: var(--bp-font);
    }
    .es-table td.es-titre-carte, .es-table td.es-large, .es-table td.es-cellule-action { grid-column: 1 / -1; }
    .es-table td.es-titre-carte { font-weight: 800; font-size: .95rem; }
    .es-table td.es-cellule-action { align-items: stretch; }
    .es-table td.es-cellule-action .btn { width: 100%; }
    .es-table tfoot tr { border-color: var(--bp-border-strong); }
}

/* --- L'accueil : des cartes courtes, une action chacune --------------------- */
.es-cartes { display: grid; grid-template-columns: 1fr; gap: .7rem; margin: 0 0 var(--bp-4); }
@media (min-width: 640px) { .es-cartes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .es-cartes { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.es-carte {
    display: flex; flex-direction: column; gap: .35rem; min-width: 0; padding: .9rem 1rem;
    border-radius: 16px; border: 1px solid var(--bp-border); background: rgba(18, 18, 21, .75);
}
.es-carte.es-carte--attention { border-color: rgba(245, 158, 11, .5); background: rgba(245, 158, 11, .07); }
.es-carte.es-carte--action { border-color: rgba(16, 185, 129, .5); background: rgba(16, 185, 129, .07); }
.es-carte .es-carte-titre { display: flex; align-items: center; gap: .5rem; color: var(--bp-text-3); font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.es-carte .es-carte-valeur { color: var(--bp-text); font-size: 1.12rem; font-weight: 800; overflow-wrap: anywhere; }
.es-carte .es-carte-note { color: var(--bp-text-2); font-size: .84rem; }
.es-carte .btn { align-self: flex-start; min-height: 44px; margin-top: auto; font-weight: 700; }

/* --- Le choix du type de demande -------------------------------------------- */
.es-types { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; margin: 0 0 var(--bp-3); }
@media (min-width: 768px) { .es-types { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.es-types a, .es-types button {
    display: flex; align-items: center; gap: .55rem; min-height: 52px; padding: .6rem .75rem;
    border-radius: 12px; border: 1px solid var(--bp-border-strong); background: rgba(24, 24, 28, .8);
    color: var(--bp-text); font: inherit; font-size: .88rem; font-weight: 600; text-align: start;
    text-decoration: none; cursor: pointer;
}
.es-types a:hover, .es-types button:hover { border-color: var(--bp-success); }
.es-types i { color: var(--bp-success-soft); width: 1.2rem; text-align: center; }

/* --- Le profil -------------------------------------------------------------- */
.es-avatar {
    display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
    width: 56px; height: 56px; border-radius: 50%; background: linear-gradient(135deg, #10b981, #6366f1);
    color: #fff; font-size: 1.2rem; font-weight: 800;
}
.es-champs { display: grid; grid-template-columns: 1fr; gap: .1rem; margin: 0; }
.es-champs > div { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .3rem 1rem; padding: .55rem 0; border-bottom: 1px solid rgba(63, 63, 70, .5); }
.es-champs dt { color: var(--bp-text-3); font-weight: 600; font-size: .86rem; }
.es-champs dd { margin: 0; color: var(--bp-text); font-weight: 600; overflow-wrap: anywhere; }

/* --- La barre du telephone : le bouton « Menu » (il ouvre LE menu) ---------- */
.bp-tabbar .es-tabbar-menu {
    position: relative; flex: 1 1 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 3px; width: auto; height: auto; min-height: var(--bp-tabbar-h); padding: 6px 2px;
    border: 0; border-radius: 0; background: transparent; color: var(--bp-text-3);
    font: inherit; font-size: .72rem; font-weight: 600; line-height: 1.15;
}
.bp-tabbar .es-tabbar-menu i { font-size: 1.22rem; }
.bp-tabbar .es-tabbar-menu .es-total {
    position: absolute; top: 4px; inset-inline-end: calc(50% - 22px); padding: 0 .35rem; border-radius: 999px;
    background: var(--bp-warning); color: #241703; font-size: .62rem; font-weight: 800;
}
.bp-tabbar a { position: relative; }
.bp-tabbar a .es-total {
    position: absolute; top: 4px; inset-inline-end: calc(50% - 22px); padding: 0 .35rem; border-radius: 999px;
    background: var(--bp-warning); color: #241703; font-size: .62rem; font-weight: 800;
}
@media (min-width: 992px) { .bp-tabbar .es-tabbar-menu { display: none; } }

/* --- Accueil : une alerte tient en trois lignes sur telephone (le detail est dans Notifications) */
@media (max-width: 720px) {
    .tb-ligne .tb-corps small { display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3;
        -webkit-box-orient: vertical; overflow: hidden; }
}