/* =========================================================
   =========================================================
   PILOT CHRONO COLIS
   DESIGN SYSTEM GLOBAL V2
   =========================================================

   Fichier :
   /assets/css/app.css

   =========================================================
   ========================================================= */






/* =========================================================
   BLOC A — VARIABLES
   ========================================================= */

:root {

    /* BRANDING */

    --pilot-yellow:
        #f6c500;

    --pilot-yellow-dark:
        #dcae00;

    --pilot-yellow-soft:
        #fff5c7;

    --pilot-navy:
        #111827;

    --pilot-navy-hover:
        #1d2939;

    --pilot-navy-active:
        #202b3d;


    /* COULEURS MÉTIER */

    --pilot-blue:
        #3478f6;

    --pilot-blue-soft:
        #eaf2ff;

    --pilot-green:
        #159a63;

    --pilot-green-soft:
        #e4f6ed;

    --pilot-red:
        #dc3f51;

    --pilot-red-soft:
        #fff0f2;

    --pilot-orange:
        #e89e00;

    --pilot-orange-soft:
        #fff2cf;

    --pilot-cyan:
        #168ca5;

    --pilot-cyan-soft:
        #e5f6f9;

    --pilot-purple:
        #6845d6;

    --pilot-purple-soft:
        #eee9ff;


    /* SURFACES */

    --pilot-bg:
        #f6f7f9;

    --pilot-card:
        #ffffff;

    --pilot-surface:
        #fafbfc;

    --pilot-border:
        #dde3ea;

    --pilot-border-soft:
        #edf0f3;


    /* TEXTES */

    --pilot-text:
        #111827;

    --pilot-text-secondary:
        #475467;

    --pilot-muted:
        #667085;

    --pilot-light:
        #98a2b3;


    /* DIMENSIONS */

    --sidebar-width:
        220px;

    --header-height:
        86px;

    --radius-sm:
        8px;

    --radius-md:
        12px;

    --radius-lg:
        16px;


    /* OMBRES */

    --shadow-card:
        0 2px 7px
        rgba(
            15,
            23,
            42,
            .025
        );

    --shadow-menu:
        0 16px 40px
        rgba(
            0,
            0,
            0,
            .22
        );

}

/* =========================================================
   FIN BLOC A
   ========================================================= */


/* =========================================================
   BLOC B — RESET
   ========================================================= */

*,
*::before,
*::after {

    box-sizing:
        border-box;

}


html,
body {

    margin:
        0;

    padding:
        0;

    min-height:
        100%;

}


html {

    background:
        var(--pilot-bg);

}


body {

    background:
        var(--pilot-bg);

    color:
        var(--pilot-text);

    font-family:
        "Manrope",
        "Segoe UI",
        Arial,
        sans-serif;

    font-size:
        14px;

    line-height:
        1.45;

    -webkit-font-smoothing:
        antialiased;

    text-rendering:
        optimizeLegibility;

}


body.sidebar-open {

    overflow:
        hidden;

}


a {

    color:
        inherit;

    text-decoration:
        none;

}


button,
input,
select,
textarea {

    font:
        inherit;

}


button,
input,
select,
textarea,
a {

    outline:
        none;

}


img {

    max-width:
        100%;

}


svg {

    display:
        block;

}


[hidden] {

    display:
        none !important;

}


::selection {

    background:
        var(--pilot-yellow-soft);

    color:
        var(--pilot-navy);

}

/* =========================================================
   FIN BLOC B
   ========================================================= */


/* =========================================================
   BLOC C — STRUCTURE GLOBALE
   ========================================================= */

.pilot-app {

    display:
        flex;

    min-height:
        100vh;

}


.pilot-main {

    flex:
        1;

    min-width:
        0;

    min-height:
        100vh;

    margin-left:
        var(--sidebar-width);

    display:
        flex;

    flex-direction:
        column;

}


.pilot-content {

    flex:
        1;

    width:
        100%;

    padding:
        26px 32px 28px;

}


.page-wrap {

    width:
        100%;

    margin:
        0;

}


.page-wrap--auth {

    min-height:
        100vh;

}

/* =========================================================
   FIN BLOC C
   ========================================================= */


/* =========================================================
   BLOC D — SIDEBAR
   ========================================================= */

.pilot-sidebar {

    position:
        fixed;

    inset:
        0 auto 0 0;

    z-index:
        1000;

    width:
        var(--sidebar-width);

    height:
        100vh;

    display:
        flex;

    flex-direction:
        column;

    background:
        var(--pilot-navy);

    border-right:
        1px solid
        rgba(
            255,
            255,
            255,
            .045
        );

}


/* =========================================================
   BLOC D1 — BRAND
   ========================================================= */

.sidebar-brand {

    position:
        relative;

    height:
        76px;

    display:
        flex;

    align-items:
        center;

    padding:
        0 20px;

    flex:
        0 0 76px;

}


.sidebar-brand__link {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        10px;

    min-width:
        0;

}


.sidebar-brand__mark {

    width:
        28px;

    height:
        28px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    flex:
        0 0 28px;

    border-radius:
        9px;

    background:
        #f7c63b;

    color:
        #111827;

    font-size:
        13px;

    font-weight:
        850;

}


.sidebar-brand__identity {

    min-width:
        0;

    display:
        flex;

    flex-direction:
        column;

}


.sidebar-brand__identity strong {

    color:
        #ffffff;

    font-size:
        15px;

    line-height:
        1.15;

    font-weight:
        760;

}


.sidebar-brand__identity small {

    margin-top:
        3px;

    color:
        #7f8ca1;

    font-size:
        7px;

    font-weight:
        700;

    letter-spacing:
        .22em;

}


/* =========================================================
   BLOC D2 — NAVIGATION
   ========================================================= */

.sidebar-nav {

    flex:
        1;

    min-height:
        0;

    overflow-y:
        auto;

    padding:
        4px 12px 18px;

    scrollbar-width:
        thin;

    scrollbar-color:
        #344054
        transparent;

}


.sidebar-nav__section-title {

    margin:
        22px 10px 8px;

    color:
        #66758d;

    font-size:
        8px;

    font-weight:
        750;

    letter-spacing:
        .15em;

    text-transform:
        uppercase;

}


.sidebar-nav__item {

    position:
        relative;

    min-height:
        38px;

    margin:
        2px 0;

    padding:
        8px 10px;

    display:
        flex;

    align-items:
        center;

    gap:
        10px;

    border-radius:
        8px;

    color:
        #b4bece;

    font-size:
        11px;

    font-weight:
        500;

    transition:
        background .16s ease,
        color .16s ease,
        transform .16s ease;

}


.sidebar-nav__item:hover {

    background:
        #1c2738;

    color:
        #ffffff;

}


.sidebar-nav__item.is-active {

    background:
        #202b3d;

    color:
        #ffffff;

    font-weight:
        700;

}


.sidebar-nav__item.is-active::before {

    content:
        "";

    position:
        absolute;

    left:
        0;

    top:
        9px;

    bottom:
        9px;

    width:
        3px;

    border-radius:
        0 4px 4px 0;

    background:
        var(--pilot-yellow);

}


.sidebar-nav__icon {

    width:
        17px;

    height:
        17px;

    flex:
        0 0 17px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

}


.sidebar-nav__icon svg {

    width:
        16px;

    height:
        16px;

    fill:
        none;

    stroke:
        currentColor;

    stroke-width:
        1.7;

    stroke-linecap:
        round;

    stroke-linejoin:
        round;

}


.sidebar-nav__label {

    overflow:
        hidden;

    white-space:
        nowrap;

    text-overflow:
        ellipsis;

}


/* =========================================================
   BLOC D3 — BAS SIDEBAR
   ========================================================= */

.sidebar-bottom {

    flex:
        0 0 auto;

    padding:
        10px 12px 13px;

    border-top:
        1px solid
        rgba(
            255,
            255,
            255,
            .05
        );

}


.sidebar-user {

    position:
        relative;

}


.sidebar-user__button {

    width:
        100%;

    min-height:
        47px;

    padding:
        6px 8px;

    display:
        flex;

    align-items:
        center;

    gap:
        9px;

    border:
        0;

    border-radius:
        10px;

    background:
        #1c2636;

    color:
        #ffffff;

    cursor:
        pointer;

}


.sidebar-user__button:hover {

    background:
        #222e41;

}


.sidebar-user__avatar {

    width:
        30px;

    height:
        30px;

    flex:
        0 0 30px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        50%;

    background:
        #f5bf31;

    color:
        #111827;

    font-size:
        10px;

    font-weight:
        850;

}


.sidebar-user__identity {

    min-width:
        0;

    flex:
        1;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        flex-start;

}


.sidebar-user__name {

    width:
        100%;

    overflow:
        hidden;

    color:
        #ffffff;

    font-size:
        10px;

    font-weight:
        700;

    white-space:
        nowrap;

    text-overflow:
        ellipsis;

    text-align:
        left;

}


.sidebar-user__role {

    margin-top:
        2px;

    color:
        #8390a4;

    font-size:
        8px;

}


.sidebar-user__arrow {

    width:
        14px;

    height:
        14px;

    color:
        #8290a5;

}


.sidebar-user__arrow svg {

    width:
        14px;

    height:
        14px;

    fill:
        none;

    stroke:
        currentColor;

    stroke-width:
        1.8;

}


.sidebar-user-menu {

    position:
        absolute;

    left:
        0;

    right:
        0;

    bottom:
        calc(
            100% + 8px
        );

    z-index:
        1100;

    overflow:
        hidden;

    border:
        1px solid
        #2a374b;

    border-radius:
        12px;

    background:
        #172133;

    box-shadow:
        var(--shadow-menu);

}


.sidebar-user-menu__header {

    padding:
        12px;

    display:
        flex;

    flex-direction:
        column;

    gap:
        2px;

    border-bottom:
        1px solid
        #29364a;

}


.sidebar-user-menu__header small,
.sidebar-user-menu__header span {

    color:
        #8492a7;

    font-size:
        9px;

}


.sidebar-user-menu__header strong {

    color:
        #ffffff;

    font-size:
        11px;

}


.sidebar-user-menu__link {

    display:
        block;

    padding:
        10px 12px;

    color:
        #d9e0ea;

    font-size:
        10px;

}


.sidebar-user-menu__link:hover {

    background:
        #202d40;

}


.sidebar-user-menu__link--danger {

    color:
        #ff8b96;

}


.sidebar-bottom__version {

    margin-top:
        7px;

    min-height:
        25px;

    padding:
        0 4px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    color:
        #647187;

    font-size:
        8px;

}


.sidebar-mobile-close {

    display:
        none;

    position:
        absolute;

    right:
        10px;

    top:
        50%;

    transform:
        translateY(-50%);

    width:
        32px;

    height:
        32px;

    align-items:
        center;

    justify-content:
        center;

    border:
        0;

    border-radius:
        8px;

    background:
        transparent;

    color:
        #ffffff;

    font-size:
        22px;

    cursor:
        pointer;

}

/* =========================================================
   FIN BLOC D
   ========================================================= */


/* =========================================================
   BLOC E — HEADER
   ========================================================= */

.pilot-header {

    min-height:
        var(--header-height);

    padding:
        0 32px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        20px;

    border-bottom:
        1px solid
        #e3e7ec;

    background:
        rgba(
            255,
            255,
            255,
            .84
        );

    backdrop-filter:
        blur(10px);

}


.pilot-header__left {

    min-width:
        0;

    flex:
        1;

    display:
        flex;

    align-items:
        center;

    gap:
        12px;

}


.pilot-header__right {

    flex:
        0 0 auto;

    display:
        flex;

    align-items:
        center;

    justify-content:
        flex-end;

    gap:
        9px;

}


.pilot-page-heading {

    min-width:
        0;

}


.pilot-page-heading__title {

    margin:
        0;

    color:
        #182230;

    font-size:
        20px;

    font-weight:
        720;

    line-height:
        1.15;

    letter-spacing:
        -.025em;

}


.pilot-page-heading__subtitle {

    margin-top:
        5px;

    color:
        #7a8493;

    font-size:
        10px;

}


/* RECHERCHE */

.pilot-header-search {

    width:
        238px;

    height:
        36px;

    padding:
        0 12px;

    display:
        flex;

    align-items:
        center;

    gap:
        8px;

    border:
        1px solid
        #dbe1e8;

    border-radius:
        9px;

    background:
        #ffffff;

    color:
        #7a8493;

    transition:
        border .16s ease,
        box-shadow .16s ease;

}


.pilot-header-search:hover {

    border-color:
        #cbd3dd;

    box-shadow:
        0 2px 8px
        rgba(
            15,
            23,
            42,
            .04
        );

}


.pilot-header-search__icon {

    width:
        14px;

    height:
        14px;

    flex:
        0 0 14px;

    padding:
        0;

    border:
        0;

    background:
        transparent;

    color:
        inherit;

    cursor:
        pointer;

}


.pilot-header-search__icon svg {

    width:
        14px;

    height:
        14px;

    fill:
        none;

    stroke:
        currentColor;

    stroke-width:
        1.8;

    stroke-linecap:
        round;

}


.pilot-header-search__input {

    width:
        100%;

    min-width:
        0;

    padding:
        0;

    border:
        0;

    background:
        transparent;

    color:
        #344054;

    font-size:
        12px;

}


.pilot-header-search__input::placeholder {

    color:
        #7a8493;

    opacity:
        1;

}


.pilot-header-search__input:focus {

    outline:
        0;

}


.pilot-header-search:focus-within {

    border-color:
        #d39b00;

    box-shadow:
        0 0 0 3px rgba(246, 197, 0, .18);

}


/* =========================================================
   LISIBILITÉ ET FORMULAIRES DE RECHERCHE
   ========================================================= */

.pilot-page-heading__subtitle {
    font-size: 12px;
}

.sidebar-nav__item {
    font-size: 13px;
}

.sidebar-nav__section-title {
    font-size: 9px;
}

.page-title {
    margin: 0;
    font-size: 24px;
    line-height: 1.25;
    font-weight: 800;
    letter-spacing: -.02em;
}

.page-description {
    margin: 8px 0 0;
    color: #667085;
    font-size: 14px;
}

.dashboard-filter-panel {
    margin-top: 16px;
    padding: 18px;
}

.dashboard-filter-form {
    display: flex;
    align-items: flex-end;
    gap: 14px;
    flex-wrap: wrap;
}

.dashboard-filter-group {
    display: grid;
    gap: 7px;
    min-width: 180px;
}

.dashboard-filter-group--search {
    flex: 1 1 360px;
}

.dashboard-filter-label {
    color: #344054;
    font-size: 13px;
    font-weight: 700;
}

.dashboard-filter-input,
.dashboard-filter-select {
    width: 100%;
    min-height: 44px;
    padding: 10px 13px;
    border: 1px solid #d0d7e2;
    border-radius: 9px;
    background: #fff;
    color: #182230;
    font-size: 14px;
}

.dashboard-filter-input:focus,
.dashboard-filter-select:focus {
    outline: 0;
    border-color: #d39b00;
    box-shadow: 0 0 0 3px rgba(246, 197, 0, .18);
}

.dashboard-filter-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.dashboard-filter-actions .btn {
    min-height: 44px;
    padding: 0 18px;
    font-size: 13px;
}

.data-table th {
    font-size: 11px;
}

.data-table td {
    padding-top: 12px;
    padding-bottom: 12px;
    font-size: 12px;
}

.panel-title {
    font-size: 14px;
}

.panel-meta {
    font-size: 11px;
}

@media (max-width: 720px) {
    .dashboard-filter-form,
    .dashboard-filter-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .dashboard-filter-group,
    .dashboard-filter-group--search,
    .dashboard-filter-actions,
    .dashboard-filter-actions .btn {
        width: 100%;
        min-width: 0;
        flex-basis: auto;
    }
}

}


/* PÉRIODE */

.pilot-header-period {

    height:
        36px;

    padding:
        0 7px 0 11px;

    display:
        inline-flex;

    align-items:
        center;

    gap:
        5px;

    border:
        1px solid
        #dbe1e8;

    border-radius:
        9px;

    background:
        #ffffff;

}


.pilot-header-period__dot {

    width:
        5px;

    height:
        5px;

    flex:
        0 0 5px;

    border-radius:
        50%;

    background:
        var(--pilot-yellow);

}


.pilot-header-period select {

    height:
        32px;

    border:
        0;

    outline:
        0;

    background:
        transparent;

    color:
        #344054;

    font-size:
        9px;

    font-weight:
        650;

    cursor:
        pointer;

}


/* CTA */

.pilot-primary-action {

    height:
        36px;

    padding:
        0 13px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        7px;

    border:
        1px solid
        var(--pilot-navy);

    border-radius:
        9px;

    background:
        var(--pilot-navy);

    color:
        #ffffff;

    font-size:
        9px;

    font-weight:
        750;

    transition:
        background .16s ease;

}


.pilot-primary-action:hover {

    background:
        #050b14;

}


.pilot-primary-action__plus {

    font-size:
        15px;

    font-weight:
        400;

}


.pilot-mobile-menu {

    display:
        none;

    width:
        36px;

    height:
        36px;

    align-items:
        center;

    justify-content:
        center;

    border:
        1px solid
        var(--pilot-border);

    border-radius:
        9px;

    background:
        #ffffff;

    color:
        #344054;

    cursor:
        pointer;

}


.pilot-mobile-menu svg {

    width:
        17px;

    height:
        17px;

    fill:
        none;

    stroke:
        currentColor;

    stroke-width:
        1.8;

    stroke-linecap:
        round;

}

/* =========================================================
   FIN BLOC E
   ========================================================= */


/* =========================================================
   BLOC F — COMPOSANTS GÉNÉRIQUES
   ========================================================= */

.panel,
.kpi-card,
.dashboard-kpi-card,
.dashboard-side-card,
.dashboard-chart-card,
.dashboard-recent-panel,
.dashboard-search-panel,
.form-card-field,
.quick-thirdparty-panel,
.commande-total-box {

    background:
        #ffffff;

    border:
        1px solid
        var(--pilot-border);

    border-radius:
        12px;

    box-shadow:
        var(--shadow-card);

}


.panel {

    padding:
        14px;

}


.panel-head {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        12px;

    margin-bottom:
        12px;

}


.panel-title {

    margin:
        0;

    color:
        var(--pilot-text);

    font-size:
        12px;

    font-weight:
        760;

}


.panel-meta,
.muted-text,
.form-help-text {

    color:
        var(--pilot-muted);

    font-size:
        9px;

}


.detail-grid,
.content-grid,
.dashboard-bottom-grid {

    display:
        grid;

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

    gap:
        12px;

}


/* =========================================================
   BLOC F1 — INFO ROWS
   ========================================================= */

.info-list {

    display:
        flex;

    flex-direction:
        column;

}


.info-row {

    min-height:
        40px;

    padding:
        8px 0;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        12px;

    border-bottom:
        1px solid
        var(--pilot-border-soft);

}


.info-row:last-child {

    border-bottom:
        0;

}


.info-label {

    color:
        var(--pilot-muted);

    font-size:
        9px;

}


/* =========================================================
   BLOC F2 — BOUTONS
   ========================================================= */

.btn,
.nav-create-btn,
.btn-thirdparty-plus {

    min-height:
        32px;

    padding:
        0 10px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        6px;

    border:
        1px solid
        var(--pilot-border);

    border-radius:
        7px;

    background:
        #ffffff;

    color:
        #344054;

    font-size:
        9px;

    font-weight:
        700;

    cursor:
        pointer;

}


.btn:hover,
.btn-secondary:hover {

    border-color:
        #ccd4dd;

    background:
        #f8fafc;

}


.btn-primary,
.nav-create-btn {

    border-color:
        var(--pilot-navy);

    background:
        var(--pilot-navy);

    color:
        #ffffff;

}


.btn-primary:hover,
.nav-create-btn:hover {

    background:
        #050b14;

}


.btn-small {

    min-height:
        27px;

    padding:
        0 8px;

    font-size:
        8px;

}


/* =========================================================
   BLOC F3 — FORMULAIRES
   ========================================================= */

.form-grid-2 {

    display:
        grid;

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

    gap:
        10px;

}


.form-card-field {

    padding:
        11px;

    box-shadow:
        none;

}


.form-card-field--full {

    grid-column:
        1 / -1;

}


.form-card-label {

    display:
        block;

    margin-bottom:
        5px;

    color:
        #475467;

    font-size:
        9px;

    font-weight:
        700;

}


.form-control,
.inline-status-select {

    width:
        100%;

    min-height:
        34px;

    padding:
        7px 9px;

    border:
        1px solid
        #d6dde5;

    border-radius:
        7px;

    background:
        #ffffff;

    color:
        #344054;

    font-size:
        9px;

}


.form-control:focus,
.inline-status-select:focus {

    border-color:
        #e2bd2e;

    box-shadow:
        0 0 0 3px
        rgba(
            246,
            197,
            0,
            .10
        );

}


textarea.form-control {

    min-height:
        84px;

    resize:
        vertical;

}

/* =========================================================
   FIN BLOC F
   ========================================================= */


/* =========================================================
   BLOC G — TABLEAUX
   ========================================================= */

.desktop-table-wrap {

    width:
        100%;

    overflow-x:
        auto;

    border:
        1px solid
        var(--pilot-border);

    border-radius:
        12px;

    background:
        #ffffff;

}


.data-table {

    width:
        100%;

    border-collapse:
        collapse;

}


.data-table th {

    height:
        39px;

    padding:
        8px 10px;

    border-bottom:
        1px solid
        var(--pilot-border);

    background:
        #f4f6f8;

    color:
        #475467;

    font-size:
        8px;

    font-weight:
        750;

    text-align:
        left;

    white-space:
        nowrap;

}


.data-table td {

    padding:
        9px 10px;

    border-bottom:
        1px solid
        #edf0f3;

    color:
        #344054;

    font-size:
        9px;

    vertical-align:
        middle;

}


.data-table tbody tr:last-child td {

    border-bottom:
        0;

}


.data-table tbody tr:hover {

    background:
        #fafbfd;

}


.data-table strong {

    color:
        var(--pilot-text);

}

/* =========================================================
   FIN BLOC G
   ========================================================= */


/* =========================================================
   BLOC H — BADGES
   ========================================================= */

.status-pill,
.status-badge {

    min-height:
        23px;

    padding:
        4px 8px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        5px;

    border-radius:
        999px;

    background:
        #edf1f5;

    color:
        #667085;

    font-size:
        8px;

    font-weight:
        750;

    white-space:
        nowrap;

}


.status-badge::before {

    content:
        "";

    width:
        5px;

    height:
        5px;

    flex:
        0 0 5px;

    border-radius:
        50%;

    background:
        currentColor;

}


/* DEMANDE */

.status-badge--draft {

    background:
        #edf1f5;

    color:
        #667085;

}


/* RAMASSÉ */

.status-badge--pickup,
.status-badge--open {

    background:
        var(--pilot-orange-soft);

    color:
        #a57000;

}


/* EXPÉDIÉ */

.status-badge--transit {

    background:
        var(--pilot-blue-soft);

    color:
        #2868d8;

}


/* ARRIVÉ */

.status-badge--ready {

    background:
        var(--pilot-cyan-soft);

    color:
        #087d94;

}


/* EN LIVRAISON */

.status-badge--delivery {

    background:
        var(--pilot-purple-soft);

    color:
        var(--pilot-purple);

}


/* LIVRÉ */

.status-badge--signed,
.status-badge--invoiced,
.status-badge--signed-invoiced {

    background:
        var(--pilot-green-soft);

    color:
        #0d8b5b;

}


/* ÉCHEC */

.status-badge--refused {

    background:
        var(--pilot-red-soft);

    color:
        var(--pilot-red);

}

/* =========================================================
   FIN BLOC H
   ========================================================= */


/* =========================================================
   BLOC I — INLINE EDIT
   ========================================================= */

.inline-status-editor,
.inline-status-form,
.mobile-inline-status-form {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        5px;

}


.inline-status-summary {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        4px;

}


.inline-status-select {

    width:
        auto;

    min-height:
        28px;

    padding:
        4px 7px;

}


.inline-edit-icon {

    width:
        24px;

    height:
        24px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    border:
        0;

    border-radius:
        6px;

    background:
        transparent;

    color:
        #98a2b3;

    cursor:
        pointer;

}


.inline-edit-icon:hover {

    background:
        #f1f4f7;

    color:
        #344054;

}

/* =========================================================
   FIN BLOC I
   ========================================================= */


/* =========================================================
   BLOC J — CARTES MOBILE
   ========================================================= */

.mobile-card-list {

    display:
        none;

    flex-direction:
        column;

    gap:
        8px;

}


.mobile-data-card {

    padding:
        11px;

    border:
        1px solid
        var(--pilot-border);

    border-radius:
        11px;

    background:
        #ffffff;

}


.mobile-data-card__top {

    display:
        flex;

    align-items:
        flex-start;

    justify-content:
        space-between;

    gap:
        10px;

}


.mobile-data-grid {

    display:
        grid;

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

    gap:
        8px;

    margin-top:
        8px;

}


.mobile-label {

    display:
        block;

    margin-bottom:
        2px;

    color:
        #98a2b3;

    font-size:
        8px;

}


.mobile-value {

    color:
        #344054;

    font-size:
        9px;

    font-weight:
        650;

}

/* =========================================================
   FIN BLOC J
   ========================================================= */


/* =========================================================
   BLOC K — PAGINATION
   ========================================================= */

.pagination-bar {

    min-height:
        43px;

    margin-top:
        8px;

    padding:
        6px 10px;

    display:
        grid;

    grid-template-columns:
        1fr auto 1fr;

    align-items:
        center;

    gap:
        10px;

    border:
        1px solid
        var(--pilot-border);

    border-radius:
        10px;

    background:
        #ffffff;

    color:
        #667085;

    font-size:
        8px;

}


.pagination-bar__left {

    justify-self:
        start;

}


.pagination-bar__center {

    justify-self:
        center;

}


.pagination-bar__right {

    justify-self:
        end;

}

/* =========================================================
   FIN BLOC K
   ========================================================= */


/* =========================================================
   BLOC L — ALERTES
   ========================================================= */

.alert {

    margin-bottom:
        10px;

    padding:
        9px 11px;

    border:
        1px solid
        #d7e6fa;

    border-radius:
        8px;

    background:
        #f3f8ff;

    color:
        #35597f;

    font-size:
        9px;

}


.alert-error {

    border-color:
        #f5c7cd;

    background:
        #fff1f3;

    color:
        #a63848;

}


.alert-success {

    border-color:
        #c7ead8;

    background:
        #edf9f3;

    color:
        #13754f;

}

/* =========================================================
   FIN BLOC L
   ========================================================= */


/* =========================================================
   BLOC M — LOGIN
   ========================================================= */

.pilot-login-page {

    min-height:
        100vh;

    padding:
        24px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    background:
        #f4f6f8;

}


.pilot-login-card {

    width:
        min(
            100%,
            390px
        );

    padding:
        24px;

    border:
        1px solid
        var(--pilot-border);

    border-radius:
        16px;

    background:
        #ffffff;

    box-shadow:
        0 18px 50px
        rgba(
            15,
            23,
            42,
            .07
        );

}

/* =========================================================
   FIN BLOC M
   ========================================================= */


/* =========================================================
   BLOC N — FOOTER
   ========================================================= */

.pilot-footer {

    min-height:
        42px;

    padding:
        8px 32px 16px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        12px;

    color:
        #98a2b3;

    font-size:
        7px;

}

/* =========================================================
   FIN BLOC N
   ========================================================= */


/* =========================================================
   BLOC O — RESPONSIVE
   ========================================================= */

.sidebar-overlay {

    display:
        none;

}


@media (
    max-width:
    1150px
) {

    :root {

        --sidebar-width:
            205px;

    }


    .pilot-content {

        padding-left:
            22px;

        padding-right:
            22px;

    }


    .pilot-header {

        padding-left:
            22px;

        padding-right:
            22px;

    }


    .pilot-header-search {

        width:
            190px;

    }

}


@media (
    max-width:
    900px
) {

    :root {

        --header-height:
            68px;

    }


    .pilot-sidebar {

        width:
            min(
                84vw,
                270px
            );

        transform:
            translateX(
                -102%
            );

        transition:
            transform .22s ease;

        box-shadow:
            var(--shadow-menu);

    }


    .pilot-sidebar.is-mobile-open {

        transform:
            translateX(
                0
            );

    }


    .pilot-main {

        margin-left:
            0;

    }


    .pilot-mobile-menu,
    .sidebar-mobile-close {

        display:
            inline-flex;

    }


    .sidebar-overlay {

        position:
            fixed;

        inset:
            0;

        z-index:
            900;

        display:
            block;

        background:
            rgba(
                17,
                24,
                39,
                .4
            );

        opacity:
            0;

        visibility:
            hidden;

        pointer-events:
            none;

        transition:
            opacity .18s ease,
            visibility .18s ease;

    }


    .sidebar-overlay.is-visible {

        opacity:
            1;

        visibility:
            visible;

        pointer-events:
            auto;

    }


    .pilot-header {

        padding:
            0 14px;

    }


    .pilot-content {

        padding:
            16px 12px 22px;

    }


    .pilot-header-search {

        width:
            36px;

        padding:
            0;

        justify-content:
            center;

    }


    .pilot-header-search__input {

        display:
            none;

    }


    .pilot-header-period {

        display:
            none;

    }


    .pilot-primary-action {

        width:
            36px;

        padding:
            0;

    }


    .pilot-primary-action__label {

        display:
            none;

    }


    .pilot-page-heading__title {

        font-size:
            17px;

    }


    .pilot-page-heading__subtitle {

        display:
            none;

    }


    .detail-grid,
    .content-grid,
    .dashboard-bottom-grid,
    .form-grid-2 {

        grid-template-columns:
            1fr;

    }


    .desktop-table-wrap {

        display:
            none;

    }


    .mobile-card-list {

        display:
            flex;

    }


    .pilot-footer {

        padding:
            8px 12px 14px;

        flex-direction:
            column;

        align-items:
            flex-start;

    }

}


@media (
    max-width:
    560px
) {

    .pilot-header__right {

        gap:
            6px;

    }


    .pilot-content {

        padding-left:
            9px;

        padding-right:
            9px;

    }


    .mobile-data-grid {

        grid-template-columns:
            1fr;

    }


    .pagination-bar {

        grid-template-columns:
            1fr;

        text-align:
            center;

    }


    .pagination-bar__left,
    .pagination-bar__center,
    .pagination-bar__right {

        justify-self:
            center;

    }

}

/* =========================================================
   FIN BLOC O
   ========================================================= */
   
   
/* =========================================================
   TYPOGRAPHIE — CHIFFRES / KPI / MONTANTS
   ========================================================= */

.numeric-font,
.kpi-value,
.dashboard-x__mini-value,
.dashboard-x__chart-big,
.dashboard-x__chart-stat strong,
.dashboard-x__finance-value,
.dashboard-x__finance-card strong,
.dashboard-x__collection-value,
.dashboard-x__collection-stat strong,
.dashboard-x__status-meta strong,
.dashboard-x__client-count,
.dashboard-x__record-value {

    font-family:
        "Manrope",
        Helvetica,
        Arial,
        sans-serif;

}   

.dashboard-x__kpi-value {

    font-family:
        "Manrope",
        Helvetica,
        Arial,
        sans-serif;

    font-weight:
        700;

    letter-spacing:
        -0.04em;

}

.dashboard-x__finance-value,
.dashboard-x__collection-value,
.dashboard-x__chart-big {

    font-family:
        "Manrope",
        Helvetica,
        Arial,
        sans-serif;

    font-weight:
        700;

    letter-spacing:
        -0.03em;

}
.data-table td .numeric,
.data-table td[data-type="number"] {

    font-family:
        "Manrope",
        Helvetica,
        Arial,
        sans-serif;

    font-weight:
        600;

}


/* =========================================================
   LISIBILITÉ GLOBALE — TEXTE COURANT
   ========================================================= */

body {
    color: #3d4858;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.55;
}

.pilot-content,
.panel,
.dashboard-filter-panel {
    color: #3d4858;
}

.pilot-page-heading__title,
.pilot-page-heading__subtitle,
.page-title,
.page-description,
.panel-title,
.dashboard-search-card__title {
    color: #15233b;
}

.pilot-page-heading__title {
    font-size: 21px;
    font-weight: 800;
}

.pilot-page-heading__subtitle {
    font-size: 13px;
    font-weight: 500;
}

.page-title {
    font-size: 26px;
    font-weight: 800;
}

.page-description {
    font-size: 15px;
    font-weight: 500;
}

.panel-title {
    font-size: 15px;
    font-weight: 800;
}

.panel-meta,
.muted-text {
    color: #556173;
    font-size: 13px;
    font-weight: 500;
}

.sidebar-nav__item {
    font-size: 14px;
    font-weight: 600;
}

.sidebar-nav__section-title {
    font-size: 10px;
    font-weight: 800;
}

.dashboard-filter-label {
    color: #24324a;
    font-size: 14px;
    font-weight: 700;
}

.dashboard-filter-input,
.dashboard-filter-select,
.pilot-header-search__input {
    color: #344054;
    font-size: 14px;
    font-weight: 500;
}

.dashboard-filter-input::placeholder,
.pilot-header-search__input::placeholder {
    color: #667085;
}

.data-table th {
    color: #26354d;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .01em;
}

.data-table td {
    padding-top: 13px;
    padding-bottom: 13px;
    color: #3d4858;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.45;
}

.data-table td .numeric,
.data-table td[data-type="number"] {
    color: #344054;
    font-weight: 600;
}

.btn,
.status-badge {
    font-weight: 700;
}


/* =========================================================
   LISTING MODERNE — MODÈLE RÉUTILISABLE
   ========================================================= */

.listing-reveal {
    animation: listing-rise .55s cubic-bezier(.22, .8, .3, 1) both;
    animation-delay: var(--reveal-delay, 0ms);
}

@keyframes listing-rise {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.listing-hero {
    position: relative;
    display: flex;
    align-items: center;
    gap: 16px;
    min-height: 94px;
    margin-bottom: 16px;
    padding: 18px 22px;
    overflow: hidden;
    border: 1px solid #e3e8ef;
    border-radius: 16px;
    background:
        radial-gradient(circle at 78% 10%, rgba(246, 197, 0, .14), transparent 26%),
        linear-gradient(115deg, #ffffff 0%, #fbfcfe 66%, #f7f9fc 100%);
    box-shadow: 0 10px 30px rgba(15, 23, 42, .045);
}

.listing-hero::after {
    content: "";
    position: absolute;
    top: -70px;
    right: 12%;
    width: 180px;
    height: 180px;
    border: 1px solid rgba(246, 197, 0, .22);
    border-radius: 50%;
    animation: listing-float 7s ease-in-out infinite;
}

@keyframes listing-float {
    0%, 100% { transform: translate3d(0, 0, 0); }
    50% { transform: translate3d(8px, 10px, 0); }
}

.listing-hero__icon {
    position: relative;
    z-index: 1;
    width: 54px;
    height: 54px;
    display: grid;
    place-items: center;
    flex: 0 0 54px;
    border: 1px solid #ffe39a;
    border-radius: 15px;
    background: linear-gradient(145deg, #fff9e7, #ffefbf);
    color: #17243a;
    box-shadow: 0 8px 20px rgba(226, 169, 0, .12);
}

.listing-hero__icon svg {
    width: 28px;
    height: 28px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.listing-hero__copy {
    position: relative;
    z-index: 1;
    min-width: 0;
}

.listing-eyebrow {
    display: block;
    margin-bottom: 2px;
    color: #b47c00;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .13em;
    text-transform: uppercase;
}

.listing-hero .page-title {
    font-size: 26px;
}

.listing-hero .page-description {
    margin-top: 3px;
    color: #536078;
    font-size: 13px;
}

.listing-hero__badge {
    position: relative;
    z-index: 1;
    margin-left: auto;
    padding: 8px 11px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    border: 1px solid #dfe6ef;
    border-radius: 999px;
    background: rgba(255, 255, 255, .8);
    color: #536078;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}

.listing-hero__badge-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #16a36a;
    box-shadow: 0 0 0 4px rgba(22, 163, 106, .12);
}

.listing-kpi-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 16px;
}

.listing-kpi {
    --listing-accent: #dcae00;
    position: relative;
    min-height: 142px;
    padding: 17px 18px 16px;
    overflow: hidden;
    border: 1px solid #e1e7ef;
    border-radius: 15px;
    background: #fff;
    box-shadow: 0 7px 22px rgba(15, 23, 42, .04);
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.listing-kpi::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
    background: var(--listing-accent);
}

.listing-kpi::after {
    content: "";
    position: absolute;
    right: -34px;
    bottom: -48px;
    width: 110px;
    height: 110px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--listing-accent) 10%, transparent);
}

.listing-kpi:hover {
    transform: translateY(-4px);
    border-color: color-mix(in srgb, var(--listing-accent) 35%, #e1e7ef);
    box-shadow: 0 14px 30px rgba(15, 23, 42, .085);
}

.listing-kpi--blue { --listing-accent: #3978f6; }
.listing-kpi--green { --listing-accent: #159a63; }
.listing-kpi--navy { --listing-accent: #17243a; }

.listing-kpi__top {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.listing-kpi__label {
    color: #536078;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .035em;
    text-transform: uppercase;
}

.listing-kpi__icon {
    width: 31px;
    height: 31px;
    display: grid;
    place-items: center;
    border-radius: 9px;
    background: color-mix(in srgb, var(--listing-accent) 11%, #fff);
    color: var(--listing-accent);
}

.listing-kpi__icon svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.listing-kpi__value {
    position: relative;
    z-index: 1;
    display: block;
    margin-top: 12px;
    color: #15233b;
    font-size: 29px;
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -.035em;
}

.listing-kpi__value--money {
    font-size: clamp(18px, 1.45vw, 25px);
}

.listing-kpi__value small {
    font-size: .55em;
    font-weight: 700;
}

.listing-kpi__meta {
    position: relative;
    z-index: 1;
    display: block;
    margin-top: 8px;
    color: #667085;
    font-size: 11px;
    font-weight: 600;
}

.listing-filter {
    margin-bottom: 16px;
    border-color: #dfe6ef;
    box-shadow: 0 8px 24px rgba(15, 23, 42, .045);
}

.listing-filter .dashboard-filter-label {
    display: flex;
    align-items: center;
    gap: 7px;
}

.listing-filter .dashboard-filter-label svg,
.listing-filter__submit svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.listing-filter .dashboard-filter-input,
.listing-filter .dashboard-filter-select {
    transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}

.listing-filter .dashboard-filter-input:hover,
.listing-filter .dashboard-filter-select:hover {
    border-color: #b9c4d2;
}

.listing-filter__submit {
    gap: 8px;
    border-color: #15233b;
    background: #15233b;
    box-shadow: 0 7px 16px rgba(21, 35, 59, .15);
    transition: transform .16s ease, box-shadow .16s ease, background .16s ease;
}

.listing-filter__submit:hover {
    transform: translateY(-1px);
    background: #213653;
    box-shadow: 0 10px 20px rgba(21, 35, 59, .22);
}

.listing-results {
    padding: 14px;
    border-color: #dfe6ef;
    box-shadow: 0 10px 30px rgba(15, 23, 42, .045);
}

.listing-results .panel-head {
    min-height: 42px;
    margin: -2px 0 9px;
}

.listing-results__title {
    display: flex;
    align-items: center;
    gap: 9px;
}

.listing-results__title-icon {
    width: 29px;
    height: 29px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    background: #edf3fb;
    color: #315b92;
}

.listing-results__title-icon svg {
    width: 17px;
    height: 17px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
}

.listing-results__head-right,
.listing-results__pager {
    display: flex;
    align-items: center;
    gap: 10px;
}

.listing-results__pager {
    gap: 6px;
}

.listing-results__pager a,
.listing-results__pager span {
    width: 31px;
    height: 31px;
    display: grid;
    place-items: center;
    border: 1px solid #dfe6ef;
    border-radius: 8px;
    background: #fff;
    color: #213653;
    font-size: 14px;
    font-weight: 800;
}

.listing-results__pager a {
    transition: transform .16s ease, border-color .16s ease, background .16s ease;
}

.listing-results__pager a:hover {
    transform: translateY(-1px);
    border-color: #b9c4d2;
    background: #f7f9fc;
}

.listing-results__pager span {
    color: #b3bdca;
    background: #f8fafc;
}

.listing-results .desktop-table-wrap {
    border-color: #dfe6ef;
}

.listing-results .data-table th {
    height: 43px;
    background: linear-gradient(180deg, #f5f7fa, #f1f4f8);
}

.listing-results .data-table tbody tr {
    transition: background .15s ease, box-shadow .15s ease;
}

.listing-results .data-table tbody tr:hover {
    background: #fffdf5;
    box-shadow: inset 3px 0 0 #f6c500;
}

.listing-view-btn {
    width: 36px;
    height: 34px;
    min-height: 34px;
    padding: 0;
    color: #315b92;
    transition: color .16s ease, transform .16s ease, border-color .16s ease, background .16s ease;
}

.listing-view-btn svg {
    width: 17px;
    height: 17px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
}

.listing-view-btn:hover {
    transform: translateY(-1px);
    border-color: #a9bdd8;
    background: #edf3fb;
    color: #173f72;
}

@media (max-width: 1180px) {
    .listing-kpi-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 720px) {
    .listing-hero {
        align-items: flex-start;
        padding: 16px;
    }

    .listing-hero__badge {
        display: none;
    }

    .listing-kpi-grid {
        grid-template-columns: 1fr;
    }

    .listing-kpi {
        min-height: 124px;
    }

    .listing-results__head-right {
        align-items: flex-end;
        flex-direction: column;
        gap: 6px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .listing-reveal,
    .listing-hero::after {
        animation: none;
    }

    .listing-kpi,
    .listing-results__pager a,
    .listing-view-btn,
    .listing-filter__submit {
        transition: none;
    }
}


/* =========================================================
   DEVIS — LIEN DE RÉFÉRENCE ET CARTES MOBILES LISIBLES
   ========================================================= */

.listing-reference-link {
    color: #174b87;
    font-weight: 800;
    text-decoration: none;
    text-underline-offset: 3px;
    transition: color .16s ease, text-decoration-color .16s ease;
}

.listing-reference-link:hover,
.listing-reference-link:focus-visible {
    color: #0e315c;
    text-decoration: underline;
    text-decoration-color: #f0b400;
    text-decoration-thickness: 2px;
}

@media (max-width: 760px) {
    .listing-results .mobile-card-list {
        gap: 12px;
    }

    .listing-results .mobile-data-card {
        padding: 15px;
        border-color: #d9e1eb;
        border-radius: 13px;
        box-shadow: 0 5px 16px rgba(15, 23, 42, .045);
    }

    .listing-results .mobile-data-card__top {
        align-items: center;
    }

    .listing-reference-link--mobile {
        font-size: 17px;
        line-height: 1.25;
    }

    .listing-results .mobile-data-grid {
        gap: 12px;
        margin-top: 14px;
    }

    .listing-results .mobile-label {
        margin-bottom: 3px;
        color: #667085;
        font-size: 11px;
        font-weight: 700;
        letter-spacing: .025em;
        text-transform: uppercase;
    }

    .listing-results .mobile-value {
        color: #27364d;
        font-size: 14px;
        font-weight: 600;
        line-height: 1.45;
        overflow-wrap: anywhere;
    }

    .listing-results .mobile-data-card .status-badge {
        min-height: 26px;
        padding: 4px 9px;
        font-size: 10px;
    }
}


/* =========================================================
   DEVIS — MONTANTS ET PAGE DÉTAIL
   ========================================================= */

.table-devis .listing-amount,
.table-commandes .listing-amount,
.mobile-data-card .listing-amount {
    color: #111827;
    font-weight: 700;
}

.table-commandes .listing-reference-link {
    font-size: 12px;
}

.listing-results .inline-status-summary {
    cursor: pointer;
}

.listing-results .inline-status-form {
    border-radius: 10px;
    box-shadow: 0 12px 30px rgba(15, 23, 42, .14);
}

@media (max-width: 760px) {
    .listing-results .mobile-inline-status-form {
        margin-top: 8px;
    }

    .listing-results .mobile-inline-status-form .inline-status-select {
        min-height: 40px;
        font-size: 13px;
    }
}

.quote-detail-hero {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 16px;
    padding: 20px 22px;
    overflow: hidden;
    border: 1px solid #e0e7ef;
    border-radius: 16px;
    background:
        radial-gradient(circle at 86% 5%, rgba(246, 197, 0, .17), transparent 29%),
        linear-gradient(118deg, #fff 0%, #fbfcfe 68%, #f6f8fb 100%);
    box-shadow: 0 10px 30px rgba(15, 23, 42, .045);
}

.quote-detail-hero::after {
    content: "";
    position: absolute;
    right: 8%;
    bottom: -95px;
    width: 210px;
    height: 210px;
    border: 1px solid rgba(246, 197, 0, .2);
    border-radius: 50%;
}

.quote-detail-hero__main,
.quote-detail-hero__side {
    position: relative;
    z-index: 1;
}

.quote-detail-back {
    display: inline-flex;
    margin-bottom: 13px;
    color: #526078;
    font-size: 12px;
    font-weight: 700;
}

.quote-detail-back:hover {
    color: #174b87;
}

.quote-detail-hero__identity {
    display: flex;
    align-items: center;
    gap: 14px;
}

.quote-detail-hero__identity h2 {
    margin: 1px 0 3px;
    color: #15233b;
    font-size: 28px;
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -.025em;
}

.quote-detail-hero__identity p {
    margin: 0;
    color: #526078;
    font-size: 14px;
    font-weight: 600;
}

.quote-detail-hero__side {
    display: flex;
    align-items: flex-end;
    flex-direction: column;
    gap: 13px;
}

.quote-detail-status {
    min-height: 29px;
    padding: 5px 11px;
    font-size: 11px;
}

.quote-detail-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.quote-detail-action {
    min-height: 39px;
    padding: 0 13px;
    font-size: 12px;
}

.quote-detail-action svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.quote-summary-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 16px;
}

.quote-summary-card {
    position: relative;
    min-height: 108px;
    padding: 17px 18px;
    overflow: hidden;
    border: 1px solid #e0e7ef;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 7px 22px rgba(15, 23, 42, .035);
    transition: transform .18s ease, box-shadow .18s ease;
}

.quote-summary-card::after {
    content: "";
    position: absolute;
    right: -28px;
    bottom: -48px;
    width: 92px;
    height: 92px;
    border-radius: 50%;
    background: rgba(57, 120, 246, .065);
}

.quote-summary-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 27px rgba(15, 23, 42, .075);
}

.quote-summary-card--primary {
    border-color: #f0cf67;
    background: linear-gradient(145deg, #fffdf6, #fff8df);
}

.quote-summary-card--primary::after {
    background: rgba(246, 197, 0, .12);
}

.quote-summary-card > span {
    position: relative;
    z-index: 1;
    display: block;
    color: #5b687c;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.quote-summary-card > strong {
    position: relative;
    z-index: 1;
    display: block;
    margin-top: 12px;
    color: #111827;
    font-size: clamp(17px, 1.45vw, 24px);
    font-weight: 750;
    line-height: 1.15;
    letter-spacing: -.025em;
}

.quote-summary-card > strong small {
    font-size: .55em;
    font-weight: 700;
}

.quote-detail-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 16px;
}

.quote-detail-panel {
    padding: 18px;
    border-color: #e0e7ef;
    box-shadow: 0 8px 25px rgba(15, 23, 42, .04);
}

.quote-detail-panel__head {
    display: flex;
    align-items: center;
    gap: 11px;
    padding-bottom: 14px;
    border-bottom: 1px solid #edf1f5;
}

.quote-detail-panel__icon {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    flex: 0 0 36px;
    border-radius: 10px;
    background: #edf3fb;
    color: #315b92;
}

.quote-detail-panel__icon--yellow {
    background: #fff5d7;
    color: #aa7700;
}

.quote-detail-panel__icon svg {
    width: 19px;
    height: 19px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.quote-detail-panel__head h3 {
    margin: 0;
    color: #15233b;
    font-size: 16px;
    font-weight: 800;
}

.quote-detail-panel__head p {
    margin: 2px 0 0;
    color: #667085;
    font-size: 11px;
    font-weight: 600;
}

.quote-field-list {
    display: grid;
    gap: 0;
    margin-top: 5px;
}

.quote-field {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    padding: 13px 2px;
    border-bottom: 1px solid #edf1f5;
}

.quote-field:last-child {
    border-bottom: 0;
}

.quote-field > span,
.quote-document span {
    color: #667085;
    font-size: 12px;
    font-weight: 650;
}

.quote-field > strong,
.quote-document strong,
.quote-note {
    color: #111827;
    font-size: 14px;
    font-weight: 650;
    line-height: 1.5;
    text-align: right;
    overflow-wrap: anywhere;
}

.quote-field--stacked {
    align-items: stretch;
    flex-direction: column;
    gap: 6px;
}

.quote-field--stacked > strong {
    text-align: left;
}

.quote-document {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    margin-top: 14px;
    padding: 14px;
    border: 1px solid #e4e9f0;
    border-radius: 11px;
    background: #f8fafc;
}

.quote-document div {
    min-width: 0;
}

.quote-document span,
.quote-document strong {
    display: block;
    text-align: left;
}

.quote-document strong {
    margin-top: 4px;
}

.quote-document a {
    flex: 0 0 auto;
    color: #174b87;
    font-size: 12px;
    font-weight: 800;
}

.quote-note {
    margin-top: 14px;
    padding: 14px;
    border-left: 3px solid #f0b400;
    border-radius: 0 10px 10px 0;
    background: #fffaf0;
    text-align: left;
}

.quote-empty {
    margin: 14px 0 0;
    color: #566276;
    font-size: 13px;
    font-weight: 600;
}

@media (max-width: 1120px) {
    .quote-summary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .quote-detail-hero {
        align-items: stretch;
        flex-direction: column;
        padding: 17px;
    }

    .quote-detail-hero__side {
        align-items: stretch;
    }

    .quote-detail-status {
        align-self: flex-start;
    }

    .quote-detail-actions,
    .quote-detail-action {
        width: 100%;
    }

    .quote-detail-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .quote-summary-grid,
    .quote-detail-grid {
        grid-template-columns: 1fr;
    }

    .quote-summary-card {
        min-height: 98px;
    }

    .quote-field {
        align-items: stretch;
        flex-direction: column;
        gap: 5px;
    }

    .quote-field > strong {
        font-size: 15px;
        text-align: left;
    }
}

@media (prefers-reduced-motion: reduce) {
    .quote-summary-card {
        transition: none;
    }
}


/* =========================================================
   BLOC SIDEBAR — MENU TARIFICATION (bas du panneau latéral)
   Placé dans .sidebar-bottom, juste au-dessus du profil.
   ========================================================= */

.sidebar-tools {
    margin: 0 0 8px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(255, 255, 255, .05);
}

.sidebar-tools__title {
    margin: 4px 10px 6px;
}

/* FIN BLOC SIDEBAR — MENU TARIFICATION */

/* =========================================================
   BLOC SIDEBAR — PARAMÈTRES (roue crantée, sous-menu repliable)
   ========================================================= */

.sidebar-settings > summary {
    list-style: none;
    cursor: pointer;
    user-select: none;
}

.sidebar-settings > summary::-webkit-details-marker {
    display: none;
}

.sidebar-settings__chevron {
    margin-left: auto;
    display: inline-flex;
    transition: transform .16s ease;
}

.sidebar-settings__chevron svg {
    width: 14px;
    height: 14px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.sidebar-settings[open] > summary .sidebar-settings__chevron {
    transform: rotate(90deg);
}

.sidebar-settings__menu {
    padding-left: 14px;
}

.sidebar-settings__item {
    min-height: 34px;
}

/* FIN BLOC SIDEBAR — PARAMÈTRES */


/* =========================================================
   REFONTE 09/2026 — COMPLÉMENTS DU MODÈLE « LISTING »
   Nouvelles classes uniquement : aucun style existant modifié.
   Utilisées par Factures, Agences, Manifestes, Employés…
   ========================================================= */

/* --- Couleurs supplémentaires des cartes KPI --- */
.listing-kpi--orange { --listing-accent: #e8850c; }
.listing-kpi--red { --listing-accent: #d92d20; }
.listing-kpi--purple { --listing-accent: #7a5af8; }
.listing-kpi--cyan { --listing-accent: #0e9384; }

/* --- Carte KPI cliquable (raccourci vers un filtre) --- */
a.listing-kpi--link {
    display: block;
    color: inherit;
    text-decoration: none;
    cursor: pointer;
}

a.listing-kpi--link:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--listing-accent) 45%, transparent);
    outline-offset: 2px;
}

a.listing-kpi--link .listing-kpi__meta {
    color: color-mix(in srgb, var(--listing-accent) 70%, #344054);
    font-weight: 700;
}

/* --- Barre de progression dans une carte KPI --- */
.listing-kpi__bar {
    position: relative;
    z-index: 1;
    display: block;
    height: 6px;
    margin-top: 10px;
    overflow: hidden;
    border-radius: 999px;
    background: #eef2f6;
}

.listing-kpi__bar > span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--listing-accent);
    transform-origin: left center;
    animation: listing-bar-grow .9s cubic-bezier(.22, .8, .3, 1) both .35s;
}

@keyframes listing-bar-grow {
    from { transform: scaleX(0); }
    to { transform: scaleX(1); }
}

/* --- Petits marqueurs dans les tableaux --- */
.listing-flag {
    display: inline-flex;
    align-items: center;
    margin-left: 6px;
    padding: 2px 7px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .02em;
    vertical-align: middle;
    white-space: nowrap;
}

.listing-flag--danger { background: #fef3f2; color: #b42318; box-shadow: inset 0 0 0 1px #fecdca; }
.listing-flag--warning { background: #fffaeb; color: #b54708; box-shadow: inset 0 0 0 1px #fedf89; }
.listing-flag--info { background: #eff8ff; color: #175cd3; box-shadow: inset 0 0 0 1px #b2ddff; }
.listing-flag--success { background: #ecfdf3; color: #067647; box-shadow: inset 0 0 0 1px #abefc6; }
.listing-flag--muted { background: #f2f4f7; color: #475467; box-shadow: inset 0 0 0 1px #e4e7ec; }

/* --- Montants --- */
.listing-amount--due {
    color: #b54708 !important;
}

.listing-empty {
    padding: 28px 12px;
    text-align: center;
}

/* --- Tableau des factures --- */
.table-factures .cell-ellipsis {
    max-width: 260px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.table-factures .listing-amount {
    color: #111827;
    font-weight: 700;
}

/* --- Carte KPI sous forme de bouton (filtre instantané) --- */
button.listing-kpi--link {
    width: 100%;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

button.listing-kpi--link:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--listing-accent) 45%, transparent);
    outline-offset: 2px;
}

/* --- Bouton d'action principal dans l'en-tête de page --- */
.listing-hero__cta {
    position: relative;
    z-index: 1;
    margin-left: auto;
    gap: 8px;
    min-height: 42px;
    padding: 0 18px;
    border-color: #15233b;
    background: #15233b;
    color: #fff;
    font-size: 13px;
    white-space: nowrap;
    box-shadow: 0 8px 18px rgba(21, 35, 59, .18);
    transition: transform .16s ease, box-shadow .16s ease, background .16s ease;
}

.listing-hero__cta > span {
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #f6c500;
    color: #15233b;
    font-size: 16px;
    font-weight: 800;
    line-height: 1;
}

.listing-hero__cta:hover {
    transform: translateY(-1px);
    background: #213653;
    color: #fff;
    box-shadow: 0 12px 24px rgba(21, 35, 59, .24);
}

/* --- Bouton d'action d'une ligne de tableau --- */
.listing-row-action {
    min-height: 32px;
    gap: 6px;
    padding: 0 11px;
    font-size: 12px;
}

.listing-row-action svg {
    width: 15px;
    height: 15px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* --- Lignes masquées par un filtre instantané --- */
.listing-results [hidden] {
    display: none !important;
}

/* --- Agences --- */
.agency-code {
    display: inline-grid;
    place-items: center;
    min-width: 46px;
    height: 28px;
    padding: 0 8px;
    border-radius: 7px;
    background: #fff6cf;
    color: #7a5d00;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .05em;
}

.agency-subname {
    display: block;
    margin-top: 2px;
    color: #667085;
    font-size: 11px;
    font-weight: 600;
}

.agency-code--hero {
    height: 32px;
    min-width: 54px;
    margin-right: 6px;
    font-size: 15px;
    vertical-align: 4px;
}

.listing-hero__cta--light {
    border-color: #d0d7e2;
    background: #fff;
    color: #15233b;
    box-shadow: 0 6px 14px rgba(15, 23, 42, .06);
}

.listing-hero__cta--light > span {
    background: #eef2f6;
}

.listing-hero__cta--light:hover {
    background: #f8fafc;
    color: #15233b;
}

/* --- Affectation des utilisateurs --- */
.au-name { display: block; color: #15233b; font-weight: 800; }
.au-login { display: block; margin-top: 1px; color: #667085; font-size: 11px; }
.au-agency { margin-left: 6px; color: #344054; font-weight: 600; }
.table-agency-users .au-email { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.au-form {
    display: flex;
    align-items: center;
    gap: 8px;
}

.au-select {
    min-width: 220px;
    min-height: 36px;
    padding: 6px 10px;
    font-size: 12px;
}

.au-save {
    min-height: 36px;
    padding: 0 12px;
    font-size: 12px;
    white-space: nowrap;
}

.au-save:disabled {
    opacity: .38;
    cursor: not-allowed;
    box-shadow: none;
}

.listing-results tr.is-changed,
.listing-results .mobile-data-card.is-changed {
    background: #fffbeb !important;
    box-shadow: inset 3px 0 0 #f6c500;
}

.au-form--mobile {
    margin-top: 12px;
}

.au-form--mobile .au-select {
    flex: 1 1 auto;
    min-width: 0;
}

/* --- Manifestes : le tableau partage la ligne avec le calendrier ;
       sa largeur minimale de 900 px imposait un défilement horizontal --- */
.manifests-page .manifests-table {
    min-width: 640px;
}

/* --- Grille de 5 indicateurs --- */
.listing-kpi-grid--5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

@media (max-width: 1280px) {
    .listing-kpi-grid--5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
    .listing-kpi-grid--5 { grid-template-columns: 1fr; }
}

/* --- Impression (ex. « Imprimer le manifeste ») --- */
@media print {
    .pilot-sidebar,
    .pilot-header,
    .sidebar-overlay,
    .quote-detail-actions,
    .quote-detail-back,
    .listing-kpi__icon,
    .listing-kpi__bar,
    .pilot-footer {
        display: none !important;
    }

    .pilot-main {
        margin: 0 !important;
        padding: 0 !important;
    }

    .listing-reveal {
        animation: none !important;
    }

    .listing-hero,
    .quote-detail-hero,
    .listing-kpi,
    .panel {
        box-shadow: none !important;
        break-inside: avoid;
    }
}

/* --- Employés : raccourcis par catégorie de poste --- */
.rh-category-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
}

.rh-category-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 12px;
    border: 1px solid #dfe6ef;
    border-radius: 999px;
    background: #fff;
    color: #344054;
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
    transition: transform .16s ease, border-color .16s ease, background .16s ease;
}

.rh-category-chip b {
    min-width: 22px;
    padding: 1px 7px;
    border-radius: 999px;
    background: #f2f4f7;
    color: #15233b;
    font-size: 11px;
    text-align: center;
}

.rh-category-chip:hover {
    transform: translateY(-1px);
    border-color: #f0b400;
}

.rh-category-chip.is-active {
    border-color: #15233b;
    background: #15233b;
    color: #fff;
}

.rh-category-chip.is-active b {
    background: #f6c500;
}

/* --- Message de confirmation en haut de liste --- */
.listing-notice {
    margin-bottom: 14px;
    padding: 12px 16px;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 700;
}

.listing-notice--success { background: #ecfdf3; color: #067647; box-shadow: inset 0 0 0 1px #abefc6; }
.listing-notice--error { background: #fef3f2; color: #b42318; box-shadow: inset 0 0 0 1px #fecdca; }

/* --- Formulaire dans une page de détail --- */
.detail-form {
    margin-top: 16px;
}

.detail-form__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.detail-form__field {
    display: grid;
    gap: 6px;
    min-width: 0;
}

.detail-form__field--full {
    grid-column: 1 / -1;
}

.detail-form__required {
    color: #d92d20;
}

.detail-form__code {
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.detail-form__actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid #edf1f5;
}

.detail-form-errors {
    margin-top: 14px;
    display: grid;
    gap: 4px;
}

.detail-empty-cta {
    margin-top: 12px;
}

@media (max-width: 720px) {
    .detail-form__grid {
        grid-template-columns: 1fr;
    }

    .detail-form__actions {
        flex-direction: column-reverse;
    }

    .detail-form__actions .btn {
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 720px) {
    .listing-hero {
        flex-wrap: wrap;
    }

    .listing-hero__cta {
        width: 100%;
        margin-left: 0;
        justify-content: center;
    }
}

/* --- Pages de détail : compléments du modèle « quote-detail » --- */
.detail-badges {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
}

.detail-badges .listing-flag {
    margin-left: 0;
    padding: 4px 9px;
    font-size: 11px;
}

.quote-summary-card__meta {
    position: relative;
    z-index: 1;
    display: block;
    margin-top: 7px;
    color: #667085;
    font-size: 11px;
    font-style: normal;
    font-weight: 700;
}

.quote-summary-card--warning { border-color: #fedf89; background: linear-gradient(145deg, #fffdf5, #fff6e0); }
.quote-summary-card--warning > strong { color: #b54708; }
.quote-summary-card--danger { border-color: #fecdca; background: linear-gradient(145deg, #fffbfa, #fef0ee); }
.quote-summary-card--danger > strong,
.quote-summary-card--danger .quote-summary-card__meta { color: #b42318; }
.quote-summary-card--success { border-color: #abefc6; background: linear-gradient(145deg, #f8fffb, #ecfdf3); }
.quote-summary-card--success > strong { color: #067647; }

.quote-detail-panel__icon--green { background: #ecfdf3; color: #067647; }
.quote-detail-panel__icon--red { background: #fef3f2; color: #b42318; }
.quote-detail-panel__icon--purple { background: #f4f3ff; color: #5925dc; }

.detail-text-danger { color: #b42318 !important; }

.detail-subhead {
    margin-top: 18px;
}

.detail-line-label {
    max-width: 420px;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

.detail-chip-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 14px;
}

.detail-chip {
    display: inline-grid;
    gap: 1px;
    padding: 8px 12px;
    border: 1px solid #dfe6ef;
    border-radius: 10px;
    background: #f8fafc;
    color: inherit;
    text-decoration: none;
    transition: transform .16s ease, border-color .16s ease, background .16s ease;
}

.detail-chip strong { color: #174b87; font-size: 13px; font-weight: 800; }
.detail-chip span { color: #667085; font-size: 11px; font-weight: 600; }

.detail-chip:hover {
    transform: translateY(-1px);
    border-color: #f0b400;
    background: #fffdf5;
}

@media (max-width: 760px) {
    .detail-badges { justify-content: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
    .listing-kpi__bar > span {
        animation: none;
    }

    .detail-chip {
        transition: none;
    }
}

/* --- Détail employé : en-tête, indicateurs et lisibilité ---
   Préfixe .employee-detail-page : l'emporte sur le <style> interne de la page. */
.employee-detail-page .employee-hero__identity {
    align-items: center;
    gap: 18px;
}

.employee-detail-page .employee-profile-avatar {
    position: relative;
    flex: 0 0 96px;
    width: 96px;
    height: 96px;
    border: 3px solid #fff;
    border-radius: 22px;
    background: linear-gradient(145deg, #172a46, #25406a);
    color: #f6c500;
    font-size: 30px;
    font-weight: 800;
    letter-spacing: .02em;
    box-shadow: 0 10px 24px rgba(23, 42, 70, .18), 0 0 0 1px #e0e7ef;
}

.employee-detail-page .employee-profile-avatar img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.employee-detail-page .employee-photo-edit-overlay {
    font-size: 12px;
}

.employee-detail-page .employee-profile-name {
    margin: 2px 0 4px;
    color: #15233b;
    font-size: 28px;
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -.025em;
}

.employee-detail-page .employee-profile-job {
    margin: 0;
    color: #526078;
    font-size: 14px;
    font-weight: 600;
}

.employee-detail-page .employee-profile-meta {
    margin-top: 12px;
}

.employee-detail-page .employee-profile-chip {
    min-height: 28px;
    padding: 0 11px;
    border: 1px solid #e3e8ef;
    background: #fff;
    color: #344054;
    font-size: 12px;
    font-weight: 700;
}

.employee-detail-page .employee-profile-chip--active {
    border-color: #abefc6;
    background: #ecfdf3;
    color: #067647;
}

.employee-detail-page .employee-profile-chip--inactive {
    border-color: #fecdca;
    background: #fef3f2;
    color: #b42318;
}

.employee-detail-page .employee-profile-chip[hidden] {
    display: none;
}

.employee-detail-page .employee-status-inline-editor .employee-inline-control {
    font-size: 13px;
}

.employee-hero__contact {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 5px;
}

.employee-hero__contact a {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #344054;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
}

.employee-hero__contact a:hover {
    color: #174b87;
}

.employee-hero__contact svg {
    width: 15px;
    height: 15px;
    fill: none;
    stroke: #b58a00;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Cartes indicateurs */
.employee-summary-grid .quote-summary-card {
    --listing-accent: #3978f6;
}

.employee-summary-grid .quote-summary-card--success { --listing-accent: #12b76a; }
.employee-summary-grid .quote-summary-card--warning { --listing-accent: #f79009; }
.employee-summary-grid .quote-summary-card--danger { --listing-accent: #f04438; }

.employee-summary-grid .quote-summary-card > strong {
    overflow-wrap: anywhere;
}

.employee-summary-grid .quote-summary-card > .employee-summary-bar {
    letter-spacing: 0;
    text-transform: none;
}

a.employee-summary-link {
    display: block;
    color: inherit;
    text-decoration: none;
}

a.employee-summary-link:focus-visible {
    outline: 3px solid #f6c500;
    outline-offset: 2px;
}

/* Cartes de contenu */
.employee-detail-page .employee-detail-card {
    border-color: #e0e7ef;
    border-radius: 16px;
    box-shadow: 0 7px 22px rgba(15, 23, 42, .035);
}

.employee-detail-page .employee-detail-card__head {
    padding: 16px 18px 12px;
    border-bottom-color: #eef2f6;
}

.employee-detail-page .employee-detail-card__title {
    position: relative;
    padding-left: 13px;
    color: #15233b;
    font-size: 15px;
    font-weight: 800;
}

.employee-detail-page .employee-detail-card__title::before {
    content: "";
    position: absolute;
    top: 2px;
    bottom: 2px;
    left: 0;
    width: 4px;
    border-radius: 4px;
    background: #f6c500;
}

.employee-detail-page .employee-detail-card__subtitle {
    color: #667085;
    font-size: 12px;
}

.employee-detail-page .employee-detail-card__body {
    padding: 15px 18px 18px;
}

.employee-detail-page .employee-info-row {
    grid-template-columns: 150px minmax(0, 1fr);
}

.employee-detail-page .employee-info-label {
    color: #667085;
    font-size: 12px;
    font-weight: 600;
}

.employee-detail-page .employee-info-value {
    color: #1d2939;
    font-size: 14px;
    font-weight: 600;
}

.employee-detail-page .employee-inline-control {
    font-size: 13px;
}

.employee-detail-page .employee-inline-error,
.employee-detail-page .employee-badge-error,
.employee-detail-page .employee-document-error {
    font-size: 12px;
}

.employee-detail-page .employee-group-badge {
    min-height: 30px;
    padding: 0 12px;
    background: #eef4ff;
    color: #174b87;
    font-size: 12px;
    font-weight: 700;
}

.employee-detail-page .employee-doc-item__title { font-size: 13px; }
.employee-detail-page .employee-doc-item__meta { font-size: 11px; }
.employee-detail-page .employee-doc-empty { font-size: 13px; }
.employee-detail-page .employee-id-preview__label { font-size: 11px; }

/* Badge */
.employee-detail-page .employee-badge-state {
    padding: 11px 13px;
    font-size: 13px;
    font-weight: 700;
}

.employee-detail-page .employee-badge-token__label {
    color: #667085;
    font-size: 11px;
    font-weight: 700;
}

.employee-detail-page .employee-badge-token__value {
    color: #1d2939;
    font-size: 12px;
}

.employee-detail-page .employee-badge-button {
    min-height: 38px;
    padding: 0 14px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 700;
    transition: transform .16s ease, box-shadow .16s ease, filter .16s ease;
}

.employee-detail-page .employee-badge-button:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(15, 23, 42, .12);
}

.employee-detail-page .employee-badge-help,
.employee-detail-page .employee-badge-qr__label {
    color: #667085;
    font-size: 12px;
}

.employee-detail-page .employee-detail-alert {
    border-radius: 12px;
    font-size: 14px;
    font-weight: 600;
}

#employee-badge-card {
    scroll-margin-top: 90px;
}

/* Écran tactile : pas de survol, le bouton photo devient une pastille en bas de l'avatar */
@media (hover: none) {
    .employee-detail-page .employee-photo-edit-overlay {
        inset: auto 6px 6px;
        height: 24px;
        padding: 0 8px;
        border-radius: 999px;
        font-size: 11px;
        opacity: .92;
    }
}

@media (max-width: 760px) {
    .employee-detail-page .employee-hero__identity {
        align-items: flex-start;
        flex-direction: column;
    }

    .employee-detail-page .employee-profile-avatar {
        margin: 0;
    }

    .employee-detail-page .employee-profile-meta {
        justify-content: flex-start;
    }

    .employee-detail-page .employee-profile-name {
        font-size: 23px;
    }

    .employee-detail-page .employee-info-row {
        grid-template-columns: 1fr;
    }

    .employee-hero__contact {
        align-items: flex-start;
    }
}

@media print {
    .employee-photo-edit-form,
    .employee-inline-edit-button,
    .employee-hero__contact {
        display: none !important;
    }
}

/* --- Employés : liste au format des pages liste + calendrier RH ---
   Préfixe .rh-page : l'emporte sur le <style> interne de la page. */
.rh-page .table-employes {
    min-width: 860px;
}

.rh-page .table-employes td {
    vertical-align: middle;
}

.rh-page .table-employes th:first-child {
    width: 30%;
    min-width: 250px;
}

.rh-page .table-employes .rh-employee__name {
    white-space: normal;
    line-height: 1.3;
}

.rh-page .table-employes .rh-employee__meta {
    max-width: 260px;
}

.rh-page .table-employes .listing-row-action,
.rh-page .table-employes .status-badge {
    white-space: nowrap;
}

.rh-page .table-employes tr.is-inactive td {
    background: #fbfcfd;
}

.rh-page .table-employes tr.is-inactive .rh-employee__name {
    color: #667085;
}

.rh-page .rh-employee {
    gap: 12px;
}

.rh-page .rh-avatar {
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
    border-radius: 12px;
    background: linear-gradient(145deg, #172a46, #25406a);
    color: #f6c500;
    font-size: 13px;
    font-weight: 800;
}

.rh-page .rh-employee__identity {
    display: grid;
    gap: 2px;
}

.rh-page .rh-employee__name {
    font-size: 14px;
    font-weight: 800;
}

.rh-page .rh-employee__meta {
    margin: 0;
    color: #667085;
    font-size: 12px;
}

.rh-page .mobile-data-card__top .rh-employee {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.rh-page .mobile-data-card__top .rh-avatar {
    flex-basis: 32px;
    width: 32px;
    height: 32px;
    border-radius: 10px;
    font-size: 11px;
}

/* Calendrier */
.rh-calendar-panel {
    margin-top: 16px;
}

.rh-page .rh-calendar__nav {
    display: flex;
    align-items: center;
    gap: 6px;
}

.rh-page .rh-calendar__nav a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    height: 34px;
    padding: 0 10px;
    border: 1px solid #dfe6ef;
    border-radius: 10px;
    background: #fff;
    color: #15233b;
    font-size: 16px;
    font-weight: 800;
    text-decoration: none;
    transition: border-color .16s ease, background .16s ease;
}

.rh-page .rh-calendar__nav a:hover {
    border-color: #f0b400;
    background: #fffdf5;
}

.rh-page .rh-calendar__nav .rh-calendar__today-link {
    font-size: 12px;
}

.rh-calendar-layout {
    display: grid;
    grid-template-columns: minmax(280px, 380px) minmax(0, 1fr);
    gap: 22px;
    align-items: start;
}

.rh-page .rh-calendar {
    padding: 0;
}

.rh-page .rh-calendar__month {
    margin-bottom: 10px;
    color: #15233b;
    font-size: 16px;
    font-weight: 800;
}

.rh-page .rh-calendar__grid {
    gap: 5px;
}

.rh-page .rh-calendar__weekday {
    color: #667085;
    font-size: 11px;
    font-weight: 800;
}

.rh-page .rh-calendar__day {
    position: relative;
    border: 1px solid #eef2f6;
    color: #344054;
    font-size: 13px;
    font-weight: 600;
}

.rh-page .rh-calendar__day--empty {
    border-color: transparent;
}

.rh-page .rh-calendar__day--weekend {
    background: #f8fafc;
    color: #98a2b3;
}

.rh-page .rh-calendar__day--event {
    border-color: #f0cf67;
    background: #fff8df;
    color: #7a5d00;
    font-weight: 800;
    cursor: help;
}

.rh-page .rh-calendar__day--event::after {
    content: "";
    position: absolute;
    bottom: 4px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #f6c500;
}

.rh-page .rh-calendar__day--today {
    border-color: #172a46;
    background: #172a46;
    color: #fff;
    font-weight: 800;
}

.rh-calendar__legend {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 12px;
    color: #667085;
    font-size: 12px;
    font-weight: 600;
}

.rh-calendar__legend span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.rh-calendar__swatch {
    width: 12px;
    height: 12px;
    border-radius: 4px;
}

.rh-calendar__swatch--today { background: #172a46; }
.rh-calendar__swatch--event { border: 1px solid #f0cf67; background: #fff8df; }

.rh-page .rh-upcoming {
    padding: 0;
    border: 0;
}

.rh-page .rh-upcoming__head {
    gap: 10px;
}

.rh-page .rh-upcoming__title {
    color: #15233b;
    font-size: 16px;
    font-weight: 800;
}

.rh-page .rh-upcoming-empty {
    padding: 22px 14px;
    color: #667085;
    font-size: 13px;
}

.rh-event-list {
    display: grid;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.rh-event-list li {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border: 1px solid #eef2f6;
    border-radius: 12px;
    background: #fff;
    transition: border-color .16s ease, transform .16s ease;
}

.rh-event-list li:hover {
    transform: translateY(-1px);
    border-color: #f0cf67;
}

.rh-event-list__date {
    display: grid;
    flex: 0 0 46px;
    place-items: center;
    padding: 5px 0;
    border-radius: 10px;
    background: #fff8df;
    color: #7a5d00;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
}

.rh-event-list__date b {
    font-size: 17px;
    line-height: 1.1;
}

.rh-event-list__text {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.rh-event-list__text small {
    color: #667085;
    font-size: 12px;
    font-weight: 600;
}

.rh-upcoming__note {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 14px 0 0;
    color: #667085;
    font-size: 12px;
}

@media (max-width: 900px) {
    .rh-calendar-layout {
        grid-template-columns: 1fr;
    }
}

/* --- Dashboard : lien du bloc recouvrement vers la page Factures --- */
.dashboard-x__collection-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 6px 12px;
    margin-top: 12px;
    padding: 10px 12px;
    border: 1px solid #e4e8ed;
    border-radius: 10px;
    background: #f8fafc;
    color: #344054;
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    transition: border-color .16s ease, background .16s ease;
}

.dashboard-x__collection-foot strong {
    color: #15233b;
    font-weight: 800;
}

.dashboard-x__collection-foot span:last-child {
    color: #174b87;
    font-weight: 800;
}

.dashboard-x__collection-foot:hover {
    border-color: #f0b400;
    background: #fffdf5;
}

/* FIN REFONTE 09/2026 — COMPLÉMENTS */


/* =========================================================
   BLOC SIDEBAR — LARGEUR ET MODE RÉDUIT (v1.70.3)
   - Panneau élargi (272 px) : groupes et libellés sur une ligne.
   - Logo aligné à gauche, bouton réduire / afficher à sa droite
     dans la bande (PC > 900 px uniquement).
   - Mode réduit : bande d'icônes (72 px), logo masqué, bouton
     centré en haut. Jamais automatique ; choix mémorisé par le
     navigateur (classe html.sidebar-collapsed posée avant l'affichage).
   - Mobile (≤ 900 px) : inchangé (menu ☰ en surimpression).
   ========================================================= */

:root {
    --sidebar-width: 272px;
    --sidebar-rail-width: 72px;
}

/* même largeur sur les écrans moyens (l'ancien CSS la réduisait à 205 px) */
@media (max-width: 1150px) {
    :root {
        --sidebar-width: 272px;
    }
}

.sidebar-brand {
    justify-content: space-between;
    gap: 10px;
}

.sidebar-nav__section-title {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pilot-sidebar-toggle {
    display: none;
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 9px;
    background: transparent;
    color: #b4bece;
    cursor: pointer;
    transition: background .16s ease, border-color .16s ease, color .16s ease;
}

.pilot-sidebar-toggle:hover {
    border-color: rgba(255, 255, 255, .22);
    background: #1c2738;
    color: #ffffff;
}

.pilot-sidebar-toggle:focus-visible {
    outline: 2px solid var(--pilot-yellow);
    outline-offset: 2px;
}

.pilot-sidebar-toggle svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.pilot-sidebar-toggle__chevron {
    transition: transform .2s ease;
    transform-origin: 15px 12px;
}

@media (min-width: 901px) {

    .pilot-sidebar-toggle {
        display: inline-flex;
    }

    .pilot-sidebar {
        transition: width .2s ease;
    }

    .pilot-main {
        transition: margin-left .2s ease;
    }

    html.sidebar-collapsed {
        --sidebar-width: var(--sidebar-rail-width);
    }

    html.sidebar-collapsed .pilot-sidebar-toggle__chevron {
        transform: scaleX(-1);
    }

    /* logo masqué, bouton seul centré en haut de la bande */
    html.sidebar-collapsed .sidebar-brand {
        padding: 0;
        justify-content: center;
    }

    html.sidebar-collapsed .sidebar-brand__link {
        display: none;
    }

    html.sidebar-collapsed .sidebar-nav {
        padding: 4px 10px 18px;
        overflow-x: hidden;
    }

    /* titres de section → simple séparateur */
    html.sidebar-collapsed .sidebar-nav__section-title {
        height: 1px;
        margin: 14px 8px;
        overflow: hidden;
        background: rgba(255, 255, 255, .08);
        color: transparent;
        font-size: 0;
    }

    html.sidebar-collapsed .sidebar-nav__item {
        justify-content: center;
        padding: 8px 0;
        gap: 0;
    }

    html.sidebar-collapsed .sidebar-nav__label,
    html.sidebar-collapsed .sidebar-settings__chevron,
    html.sidebar-collapsed .sidebar-user__identity,
    html.sidebar-collapsed .sidebar-user__arrow,
    html.sidebar-collapsed .sidebar-bottom__version span:first-child {
        display: none;
    }

    html.sidebar-collapsed .sidebar-settings__menu {
        padding-left: 0;
    }

    html.sidebar-collapsed .sidebar-bottom {
        padding: 10px 10px 13px;
    }

    html.sidebar-collapsed .sidebar-user__button {
        justify-content: center;
        padding: 6px 0;
    }

    /* menu du profil : garde sa largeur, déborde sur le contenu */
    html.sidebar-collapsed .sidebar-user-menu {
        right: auto;
        width: 220px;
    }

    html.sidebar-collapsed .sidebar-bottom__version {
        justify-content: center;
        padding: 0;
    }
}

@media (min-width: 901px) and (prefers-reduced-motion: reduce) {
    .pilot-sidebar,
    .pilot-main,
    .pilot-sidebar-toggle__chevron {
        transition: none;
    }
}

/* FIN BLOC SIDEBAR — LARGEUR ET MODE RÉDUIT */


/* =========================================================
   BLOC SIDEBAR — MENU ACCORDÉON (v1.70.5)
   - Chaque groupe (Gestion commerciale, Opérations et logistique,
     Finance et recouvrement, Ressources humaines) est un parent :
     un clic affiche / masque ses sous-menus.
   - Un seul groupe ouvert à la fois ; au chargement, celui de la
     page en cours est ouvert.
   - Mode réduit (PC) : parents masqués, sous-menus affichés en
     icônes, groupes séparés par un trait (comme avant).
   ========================================================= */

.sidebar-group {
    margin-top: 2px;
}

.sidebar-nav > a + .sidebar-group {
    margin-top: 12px;
}

.sidebar-group__toggle {
    width: 100%;
    border: 0;
    background: transparent;
    font-family: inherit;
    font-weight: 700;
    line-height: inherit;
    text-align: left;
    cursor: pointer;
    user-select: none;
}

.sidebar-group__toggle.has-active {
    color: #ffffff;
}

.sidebar-group__toggle:focus-visible {
    outline: 2px solid var(--pilot-yellow);
    outline-offset: -2px;
}

.sidebar-group.is-open > .sidebar-group__toggle .sidebar-settings__chevron {
    transform: rotate(90deg);
}

.sidebar-group__menu {
    display: none;
    padding: 0 0 6px 14px;
}

.sidebar-group.is-open > .sidebar-group__menu {
    display: block;
}

.sidebar-group__menu .sidebar-nav__item {
    min-height: 34px;
}

@media (min-width: 901px) {

    html.sidebar-collapsed .sidebar-nav > a + .sidebar-group {
        margin-top: 0;
    }

    html.sidebar-collapsed .sidebar-group::before {
        content: "";
        display: block;
        height: 1px;
        margin: 14px 8px;
        background: rgba(255, 255, 255, .08);
    }

    html.sidebar-collapsed .sidebar-group__toggle {
        display: none;
    }

    html.sidebar-collapsed .sidebar-group__menu {
        display: block;
        padding: 0;
    }

    html.sidebar-collapsed .sidebar-group__menu .sidebar-nav__item {
        min-height: 38px;
    }
}

/* FIN BLOC SIDEBAR — MENU ACCORDÉON */