/* ============================================================
   Thème de l'application (Bootstrap).
   Fond gris clair, menu en rail noir arrondi (icônes, libellé en bulle au survol),
   cartes blanches très arrondies, grands titres légers, boutons en pilule noire,
   touches de lavande. Texte en Inter.
   Couleur d'accent pilotée par les variables --accent* (voir render_theme_style()
   dans includes/helpers.php), avec la lavande par défaut ci-dessous.
   ============================================================ */

/* ---------- Polices (fichiers dans assets/fonts, licence SIL OFL) ---------- */
@font-face {
    font-family: "Inter";
    font-style: normal;
    font-display: swap;
    font-weight: 100 900;
    src: url("../fonts/inter-latin.woff2") format("woff2-variations"), url("../fonts/inter-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: "Inter";
    font-style: normal;
    font-display: swap;
    font-weight: 100 900;
    src: url("../fonts/inter-latin-ext.woff2") format("woff2-variations"), url("../fonts/inter-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------- Couleurs, arrondis, ombres ---------- */
:root {
    --accent: #6a5bd2;
    --accent-dark: #4c3db3;
    --accent-soft: #e6e1fb;
    --accent-text: #ffffff;

    --ink: #17161b;
    --ink-2: #3c3a44;
    --muted: #6b6975;
    --faint: #9896a2;
    --navy: #17161b;           /* rail du menu, boutons principaux */
    --line: #ebeaf0;
    --line-strong: #dddbe4;
    --soft: #f5f4f8;
    --page: #ecebf0;
    --success: #1d7a45;
    --success-soft: #e0f2e6;
    --danger: #c13a2f;
    --danger-soft: #fbe7e5;
    --warning-soft: #fcf0d6;
    /* Teintes pastel des pastilles d'icônes */
    --tint-lav: #e6e1fb;
    --tint-pink: #f8e0ec;
    --tint-mint: #dff1e5;
    --tint-sky: #dfe8f8;
    --tint-sand: #f6ecdb;

    --radius-card: 24px;
    --radius-inner: 16px;
    --radius-field: 12px;
    --radius-btn: 999px;
    --shadow-card: 0 1px 2px rgba(23, 22, 27, 0.03);
    --shadow-hover: 0 14px 30px -18px rgba(23, 22, 27, 0.28);
    --shadow-pop: 0 24px 60px -20px rgba(23, 22, 27, 0.35);
    --shadow-accent: none;

    --font: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --rail-w: 64px;
    --rail-gap: 16px;
    --sb-width: calc(var(--rail-w) + var(--rail-gap) * 2);
    --pad-x: 28px;

    /* Bootstrap */
    --bs-body-font-family: var(--font);
    --bs-body-color: var(--ink);
    --bs-body-bg: var(--page);
    --bs-emphasis-color: var(--ink);
    --bs-secondary-color: var(--muted);
    --bs-border-color: var(--line);
    --bs-border-radius: 12px;
    --bs-border-radius-sm: 10px;
    --bs-border-radius-lg: 20px;
    --bs-border-radius-xl: 24px;
    --bs-link-color: var(--accent);
    --bs-link-hover-color: var(--accent-dark);
    --bs-link-color-rgb: 106, 91, 210;
    --bs-link-hover-color-rgb: 76, 61, 179;
    --bs-focus-ring-color: color-mix(in srgb, var(--accent) 25%, transparent);
}

/* ---------- Base ---------- */
body {
    font-family: var(--font);
    font-size: 14px;
    color: var(--ink);
    background: var(--page);
    font-feature-settings: "cv11", "ss01";
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}
a { color: var(--accent-dark); }
@media (hover: hover) { a:hover { color: var(--accent); } }
.text-muted { color: var(--muted) !important; }
.text-accent { color: var(--accent-dark); }
::selection { background: color-mix(in srgb, var(--accent) 24%, transparent); }
:focus-visible { outline: 3px solid color-mix(in srgb, var(--accent) 45%, transparent); outline-offset: 2px; }

/* Barre de défilement discrète */
html { scrollbar-width: thin; scrollbar-color: #c9c7d2 transparent; }

.wrapper { display: flex; min-height: 100vh; }

.main-content {
    flex: 1;
    min-width: 0;
    max-width: 100%;
    padding: 0 var(--pad-x) 56px;
    margin-left: var(--sb-width);
}

/* Titre de page : grand et léger */
.main-content h1 {
    font-family: var(--font);
    font-weight: 500;
    font-size: 30px;
    line-height: 1.15;
    letter-spacing: -0.03em;
    color: var(--ink);
    overflow-wrap: anywhere;
}
.main-content h1 > .bi { display: none; }
.main-content h1 + p.text-muted { margin-top: 4px; font-size: 13.5px !important; color: var(--muted) !important; }

/* Titres des cartes */
.main-content h2.h6, .modal h2.h6 { font-size: 16px; font-weight: 550; letter-spacing: -0.015em; color: var(--ink); }
.main-content h2.h6 > .bi:first-child { display: none; }

/* Petit titre au-dessus d'une valeur */
.kicker { font-size: 12.5px; font-weight: 500; color: var(--muted); }

/* ============================================================
   Menu
   Ordinateur : rail noir arrondi à gauche, icônes seules, libellé en bulle au survol.
   Mobile et tablette : même menu en volet depuis le bas (bouton « Menu »), libellés visibles.
   ============================================================ */
.sidebar { display: flex; flex-direction: column; z-index: 1045; }
.sidebar-brand, .mobile-brand { display: flex; align-items: center; gap: 10px; min-width: 0; color: var(--ink); text-decoration: none; }
.sidebar-brand:hover, .mobile-brand:hover { color: var(--ink); }
.brand-icon {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--ink);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
}
.brand-name { font-weight: 650; font-size: 15px; letter-spacing: -0.02em; line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar-nav { display: flex !important; flex-direction: column; }
.sidebar .nav-link .bi, .sidebar-logout .bi, .sidebar-cta .bi { line-height: 1; }
.user-status { width: 7px; height: 7px; background: #10b981; border-radius: 50%; display: inline-block; margin-right: 5px; vertical-align: 1px; }
.notification-badge { background: var(--danger); color: #fff; padding: 0.15rem 0.5rem; border-radius: 9999px; font-size: 0.72rem; }

@media (min-width: 1200px) {
    .sidebar {
        position: fixed;
        top: var(--rail-gap);
        bottom: var(--rail-gap);
        left: var(--rail-gap);
        width: var(--rail-w);
        align-items: center;
        gap: 6px;
        padding: 14px 0;
        border-radius: 32px;
        background: var(--navy);
    }
    .sidebar-header { margin-bottom: 14px; }
    .sidebar-brand .brand-name { display: none; }
    .sidebar-brand .brand-icon { width: 40px; height: 40px; background: #fff; color: var(--ink); font-size: 17px; }
    .sidebar-brand .brand-logo { display: block; width: 40px; height: 40px; object-fit: contain; border-radius: 50%; background: #fff; padding: 5px; }
    .sidebar-close { display: none; }
    .sidebar-nav, .sidebar-foot { align-items: center; gap: 6px; }
    .sidebar-foot { margin-top: auto; display: flex; flex-direction: column; }

    /* Boutons ronds du rail */
    .sidebar-cta, .sidebar .nav-link, .profile-btn, .sidebar-logout {
        position: relative;
        width: 44px;
        height: 44px;
        padding: 0;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #a9a7b4;
        font-size: 19px;
        text-decoration: none;
        transition: background-color 0.15s ease, color 0.15s ease;
    }
    .sidebar .nav-link:hover, .sidebar-logout:hover { color: #fff; background: rgba(255, 255, 255, 0.08); }
    .sidebar .nav-link.active { background: var(--accent-soft); color: var(--ink); }
    .sidebar-cta { background: #fff; color: var(--ink); margin-bottom: 8px; }
    .sidebar-cta:hover { background: var(--accent-soft); color: var(--ink); }
    .sidebar-section { width: 24px; height: 1px; margin: 8px 0; background: rgba(255, 255, 255, 0.14); font-size: 0; overflow: hidden; }
    .profile-btn .avatar-fallback { width: 36px; height: 36px; font-size: 12px; background: var(--accent-soft); color: var(--ink); }
    .profile-btn:hover .avatar-fallback { box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.18); }
    .profile-text .profile-status { display: none; }

    /* Libellé en bulle noire à droite de l'icône (survol et clavier) */
    .rail-label, .profile-text {
        position: absolute;
        left: calc(100% + 18px);
        top: 50%;
        transform: translate(-4px, -50%);
        padding: 6px 12px;
        border-radius: 999px;
        background: var(--navy);
        color: #fff;
        font-size: 12.5px;
        font-weight: 550;
        letter-spacing: 0;
        white-space: nowrap;
        pointer-events: none;
        opacity: 0;
        transition: opacity 0.12s ease, transform 0.12s ease;
        box-shadow: 0 8px 20px -10px rgba(23, 22, 27, 0.5);
    }
    .rail-label::before, .profile-text::before {
        content: "";
        position: absolute;
        left: -9px;
        top: 50%;
        width: 6px;
        height: 10px;
        margin-top: -5px;
        border-radius: 0 6px 6px 0;
        background: var(--navy);
    }
    .sidebar a:hover > .rail-label, .sidebar a:focus-visible > .rail-label,
    .profile-btn:hover > .profile-text, .profile-btn:focus-visible > .profile-text { opacity: 1; transform: translate(0, -50%); }
    .profile-name { font-size: 12.5px; }
}
/* Écrans peu hauts : le rail se resserre */
@media (min-width: 1200px) and (max-height: 700px) {
    .sidebar { gap: 2px; padding: 10px 0; }
    .sidebar-cta, .sidebar .nav-link, .profile-btn, .sidebar-logout { width: 40px; height: 40px; font-size: 17px; }
    .sidebar-header { margin-bottom: 6px; }
}
@media (min-width: 1200px) and (prefers-reduced-motion: reduce) {
    .rail-label, .profile-text { transition: none; }
}

/* ============================================================
   Cartes, indicateurs, avatars
   ============================================================ */
.stat-card {
    background: #fff;
    border: 0;
    border-radius: var(--radius-card);
    padding: 22px 24px;
    box-shadow: var(--shadow-card);
}
.stat-card .stat-label { font-size: 13.5px; font-weight: 500; color: var(--muted); }
.stat-card .stat-value { font-family: var(--font); font-weight: 500; font-size: 32px; letter-spacing: -0.035em; line-height: 1.05; color: var(--ink); margin-top: 10px; font-variant-numeric: tabular-nums; }
a.stat-card { display: block; color: inherit; text-decoration: none; transition: transform 0.18s ease, box-shadow 0.18s ease; }
a.stat-card:hover { color: inherit; transform: translateY(-3px); box-shadow: var(--shadow-hover); }

/* Indicateurs : intitulé, valeur, détail ; pastille ronde teintée en haut à droite */
.stat-tile { position: relative; padding: 20px 22px; display: flex; flex-direction: column; }
.stat-tile .stat-icon { position: absolute; top: 16px; right: 16px; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: var(--tint, var(--tint-lav)); color: var(--ink); font-size: 16px; }
.stat-tile .stat-value { order: 2; margin-top: 12px; padding-right: 8px; }
.stat-tile .stat-label { order: 1; margin-top: 0; padding-right: 46px; }
.stat-tile .stat-sub { order: 3; font-size: 12.5px; color: var(--faint); margin-top: 6px; }
.stat-tile.is-navy { --tint: var(--tint-sky); }
.stat-tile.is-green { --tint: var(--tint-mint); }
.stat-tile.is-accent { --tint: var(--tint-lav); }

.avatar-sm { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; background: var(--soft); }
.avatar-fallback {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--accent-soft);
    color: var(--ink);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12.5px;
    font-weight: 600;
}

/* ============================================================
   Boutons : pilules. Action principale en noir, secondaire en blanc.
   ============================================================ */
.btn {
    --bs-btn-font-weight: 550;
    --bs-btn-font-size: 13.5px;
    --bs-btn-padding-x: 1.05rem;
    --bs-btn-padding-y: 0.5rem;
    --bs-btn-border-radius: var(--radius-btn);
    --bs-btn-focus-box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 30%, transparent);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.btn .bi.me-1, .btn .bi.me-2 { margin-right: 0 !important; }
.btn-sm { --bs-btn-padding-x: 0.8rem; --bs-btn-padding-y: 0.32rem; --bs-btn-font-size: 12.5px; --bs-btn-border-radius: var(--radius-btn); }
.btn-lg { --bs-btn-padding-x: 1.5rem; --bs-btn-padding-y: 0.75rem; --bs-btn-font-size: 15px; --bs-btn-border-radius: var(--radius-btn); }

.btn-accent, .btn-primary, .btn-dark {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--navy);
    --bs-btn-border-color: var(--navy);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #2d2b35;
    --bs-btn-hover-border-color: #2d2b35;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #000;
    --bs-btn-active-border-color: #000;
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: var(--navy);
    --bs-btn-disabled-border-color: var(--navy);
    background: var(--bs-btn-bg);
    color: var(--bs-btn-color);
    border: 1px solid var(--bs-btn-border-color);
    box-shadow: none;
}
.btn-accent:hover, .btn-accent:focus-visible { background: var(--bs-btn-hover-bg); border-color: var(--bs-btn-hover-bg); color: #fff; }
.btn-accent:active { transform: translateY(1px); }
.btn-accent:disabled { background: var(--navy); color: #fff; opacity: 0.5; }
.btn-accent .bi, .btn-primary .bi { font-size: 1.05em; }

.btn-light {
    --bs-btn-bg: #fff;
    --bs-btn-border-color: var(--line-strong);
    --bs-btn-hover-bg: var(--soft);
    --bs-btn-hover-border-color: var(--line-strong);
    --bs-btn-active-bg: var(--line);
    --bs-btn-active-border-color: var(--line-strong);
    --bs-btn-color: var(--ink);
    --bs-btn-hover-color: var(--ink);
    --bs-btn-active-color: var(--ink);
    box-shadow: none;
}
.btn-light.border { border-color: var(--line-strong) !important; }
.btn-light.border:hover { border-color: #cfcdd8 !important; }
.btn-danger { --bs-btn-bg: var(--danger); --bs-btn-border-color: var(--danger); --bs-btn-hover-bg: #a52e25; --bs-btn-hover-border-color: #a52e25; --bs-btn-active-bg: #8f261f; }
.btn-outline-danger {
    --bs-btn-color: var(--danger);
    --bs-btn-border-color: #f1ccc8;
    --bs-btn-bg: #fff;
    --bs-btn-hover-color: var(--danger);
    --bs-btn-hover-bg: var(--danger-soft);
    --bs-btn-hover-border-color: #ebb3ad;
    --bs-btn-active-color: var(--danger);
    --bs-btn-active-bg: var(--danger-soft);
    --bs-btn-active-border-color: #ebb3ad;
}
.btn-outline-secondary, .btn-outline-primary {
    --bs-btn-color: var(--ink);
    --bs-btn-border-color: var(--line-strong);
    --bs-btn-bg: #fff;
    --bs-btn-hover-color: var(--ink);
    --bs-btn-hover-bg: var(--soft);
    --bs-btn-hover-border-color: var(--line-strong);
    --bs-btn-active-color: var(--ink);
    --bs-btn-active-bg: var(--line);
}
.btn-link { --bs-btn-color: var(--accent-dark); --bs-btn-hover-color: var(--accent); text-decoration: none; }
.btn-close:focus { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent); }
/* Bouton rond, icône seule (modifier, supprimer…) */
.icon-btn { width: 34px; height: 34px; padding: 0; border-radius: 50%; border: 0; background: transparent; color: var(--muted); display: inline-flex; align-items: center; justify-content: center; font-size: 15px; transition: background-color 0.15s ease, color 0.15s ease; }
.icon-btn:hover, .icon-btn:focus-visible { background: var(--soft); color: var(--ink); }
.icon-btn.is-danger:hover, .icon-btn.is-danger:focus-visible { background: var(--danger-soft); color: var(--danger); }

/* ============================================================
   Champs de formulaire
   ============================================================ */
.form-label { font-size: 13px; font-weight: 550; color: var(--ink-2); margin-bottom: 6px; }
.form-control, .form-select {
    border-radius: var(--radius-field);
    border-color: var(--line-strong);
    background-color: #fff;
    color: var(--ink);
    font-size: 14px;
    padding: 0.5rem 0.85rem;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}
.form-select { padding-right: 2.2rem; }
.form-control-sm, .form-select-sm { border-radius: 10px; font-size: 13px; padding: 0.32rem 0.7rem; }
.form-select-sm { padding-right: 2rem; }
.form-control::placeholder { color: var(--faint); }
.form-control:focus, .form-select:focus {
    background-color: #fff;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}
.form-control:disabled, .form-select:disabled, .form-control[readonly] { background-color: var(--soft); color: var(--muted); }
.form-control.is-invalid, .form-select.is-invalid { border-color: var(--danger); background-color: #fff; }
.input-group-text { border-radius: var(--radius-field); border-color: var(--line-strong); background: var(--soft); color: var(--muted); font-size: 13px; }
.form-text { color: var(--muted); }
.form-check-input { border-color: #c9c7d2; }
.form-check-input:checked { background-color: var(--navy); border-color: var(--navy); }
.form-check-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent); }
.form-check-label { color: var(--ink-2); }
.form-switch .form-check-input:checked { background-color: var(--navy); }

/* ============================================================
   Tableaux
   ============================================================ */
.table { --bs-table-bg: transparent; --bs-table-color: var(--ink); --bs-table-hover-bg: var(--soft); --bs-table-border-color: var(--line); }
.table-card { background: #fff; border: 0; border-radius: var(--radius-card); box-shadow: var(--shadow-card); overflow: hidden; }
table.user-table th { font-size: 12.5px; font-weight: 500; color: var(--faint); background: transparent; border-bottom: 1px solid var(--line); padding: 16px 14px 10px; white-space: nowrap; }
table.user-table td { padding: 13px 14px; font-size: 14px; vertical-align: middle; border-bottom: 1px solid #f2f1f5; }
table.user-table th:first-child, table.user-table td:first-child { padding-left: 24px; }
table.user-table th:last-child, table.user-table td:last-child { padding-right: 24px; }
table.user-table tr:last-child td { border-bottom: none; }
table.user-table tbody tr:hover td { background: #f8f7fb; }
table.user-table a:not(.btn) { font-weight: 600; text-decoration: none; }

/* Pastilles grises (grade, compétences…) */
.badge { font-weight: 550; border-radius: 999px; padding: 0.38em 0.75em; }
.badge.bg-light, .badge.text-bg-light { background: var(--soft) !important; color: var(--ink-2) !important; border: 0 !important; }

/* Pastilles d'état des listes (compte, droits, grade, habilitations, projets d'un client) */
.account-badge-yes, .account-badge-off, .account-badge-no, .rights-badge, .grade-badge, .habilitation-badge,
.state-badge, .cert-badge-valide, .cert-badge-bientot, .cert-badge-expire, .project-count {
    display: inline-block;
    font-size: 12px;
    font-weight: 550;
    line-height: 1.5;
    padding: 2px 10px;
    border-radius: 999px;
    white-space: nowrap;
    background: var(--soft);
    color: var(--ink-2);
}
.account-badge-yes, .state-badge.ok, .habilitation-badge, .cert-badge-valide { background: var(--success-soft); color: #145c32; }
.account-badge-off, .state-badge.off, .cert-badge-expire { background: var(--danger-soft); color: #8f261f; }
.account-badge-no, .state-badge, .grade-badge { background: var(--soft); color: var(--muted); }
.cert-badge-bientot { background: var(--warning-soft); color: #74490c; }
.rights-badge, .project-count.has-projects { background: var(--accent-soft); color: var(--accent-dark); }
.rights-badge.custom { background: var(--tint-pink); color: #8a2257; }
.rights-badge.none { background: var(--soft); color: var(--muted); }
.habilitation-badge { margin: 0 4px 4px 0; white-space: normal; }
.cert-badge-valide, .cert-badge-bientot, .cert-badge-expire { font-size: 11.5px; padding: 1px 9px; }
.action-btn { --bs-btn-font-size: 12.5px; --bs-btn-padding-x: 0.85rem; --bs-btn-padding-y: 0.3rem; }
.client-name { font-weight: 600; color: var(--ink); overflow-wrap: anywhere; }
.client-sub { font-size: 12.5px; color: var(--muted); overflow-wrap: anywhere; }
.avatar-lg { width: 64px; height: 64px; flex-shrink: 0; border-radius: 50%; background: var(--accent-soft); color: var(--ink); display: flex; align-items: center; justify-content: center; font-size: 22px; font-weight: 600; }

/* ============================================================
   Messages, fenêtres, menus déroulants
   ============================================================ */
.alert { border-radius: 16px; border: 0; font-size: 13.5px; padding: 12px 16px; }
.alert-success { background: var(--success-soft); color: #145c32; }
.alert-danger { background: var(--danger-soft); color: #8f261f; }
.alert-warning { background: var(--warning-soft); color: #6a4304; }
.alert-info { background: var(--accent-soft); color: var(--accent-dark); }
.alert a { color: inherit; font-weight: 600; }
.alert .btn-close { padding: 1rem; }

.modal-content { border: 0; border-radius: 24px; box-shadow: var(--shadow-pop); }
.modal-header { border-bottom: 0; padding: 22px 24px 6px; }
.modal-title { font-size: 19px; font-weight: 550; letter-spacing: -0.02em; color: var(--ink); }
.modal-body { padding: 14px 24px 20px; }
.modal-footer { border-top: 0; background: transparent; border-radius: 0 0 24px 24px; padding: 4px 24px 22px; gap: 8px; }
.modal-footer > * { margin: 0; }
.modal-backdrop.show { opacity: 0.4; }
.modal-backdrop { --bs-backdrop-bg: #17161b; }

.dropdown-menu { border: 0; border-radius: 16px; box-shadow: var(--shadow-pop); padding: 6px; }
.dropdown-item { border-radius: 10px; padding: 8px 12px; font-size: 13.5px; }
.dropdown-item.active, .dropdown-item:active { background: var(--accent-soft); color: var(--ink); }

.pagination { --bs-pagination-border-radius: 999px; --bs-pagination-color: var(--ink-2); --bs-pagination-active-bg: var(--navy); --bs-pagination-active-border-color: var(--navy); --bs-pagination-border-color: transparent; --bs-pagination-bg: #fff; --bs-pagination-hover-bg: var(--soft); gap: 4px; }
.pagination .page-link { border-radius: 999px !important; min-width: 34px; text-align: center; font-weight: 550; font-size: 13px; }

.progress { background: var(--line); border-radius: 999px; }
.progress-bar { background: var(--navy); border-radius: 999px; }
.bg-accent { background-color: var(--accent) !important; }
.tooltip { --bs-tooltip-bg: var(--navy); --bs-tooltip-border-radius: 999px; --bs-tooltip-padding-x: 0.75rem; --bs-tooltip-padding-y: 0.35rem; }

/* ============================================================
   Onglets : rubriques d'un module (dans l'en-tête) et filtres d'une liste.
   Pastille noire sur l'onglet actif.
   ============================================================ */
.admin-subnav, .pill-tabs {
    display: flex;
    max-width: 100%;
    gap: 4px;
    padding: 0;
    margin-bottom: 18px;
    border-bottom: 0;
    overflow-x: auto;
    scrollbar-width: none;
}
.admin-subnav::-webkit-scrollbar, .pill-tabs::-webkit-scrollbar { display: none; }
.admin-subnav a, .pill-tabs a {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 15px;
    border-radius: 999px;
    font-size: 13.5px;
    font-weight: 550;
    color: var(--muted);
    text-decoration: none;
    white-space: nowrap;
    transition: color 0.15s ease, background-color 0.15s ease;
}
.admin-subnav a .bi, .pill-tabs a .bi { display: none; }
.admin-subnav a:hover, .pill-tabs a:hover { color: var(--ink); background: rgba(23, 22, 27, 0.05); }
.admin-subnav a.active, .pill-tabs a.active { color: #fff; background: var(--navy); }
.pill-tabs .tab-count { display: inline-block; min-width: 20px; padding: 0 6px; border-radius: 999px; font-size: 11px; font-weight: 650; text-align: center; background: rgba(23, 22, 27, 0.07); color: var(--muted); }
.pill-tabs a.active .tab-count { background: rgba(255, 255, 255, 0.18); color: #fff; }

/* ---------- Palette de couleurs (page Paramètres) ---------- */
.color-choice { cursor: pointer; }
.color-swatch {
    display: block;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    cursor: pointer;
    border: 4px solid #fff;
    box-shadow: 0 0 0 1px var(--line-strong), 0 6px 14px -8px rgba(23, 22, 27, 0.4);
    position: relative;
    transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.color-swatch:hover { transform: scale(1.06); }
.color-swatch.selected { box-shadow: 0 0 0 2.5px var(--ink), 0 6px 14px -8px rgba(23, 22, 27, 0.4); transform: scale(1.06); }
.color-swatch.selected::after {
    content: "\2713";
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 18px;
    font-weight: 600;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* ---------- Statuts de projet ---------- */
.status-badge { display: inline-flex; align-items: center; font-size: 12px; font-weight: 550; padding: 2px 10px; border-radius: 999px; white-space: nowrap; line-height: 1.5; }
.status-prospect    { background: var(--soft); color: #4b5563; }
.status-a_venir     { background: #e3ebfd; color: #1d43af; }
.status-preparation { background: #efe8fd; color: #6d28d9; }
.status-en_cours    { background: var(--accent-soft); color: var(--accent-dark); }
.status-suspendu    { background: var(--warning-soft); color: #7a4f0f; }
.status-termine     { background: var(--success-soft); color: #145c32; }
.status-annule      { background: var(--danger-soft); color: #8f261f; }

.period-state { display: inline-block; font-size: 11px; font-weight: 600; padding: 1px 7px; border-radius: 999px; margin-top: 3px; }
.period-active   { background: var(--accent-soft); color: var(--accent-dark); }
.period-upcoming { background: #e3ebfd; color: #1d43af; }
.period-done     { background: var(--soft); color: var(--muted); }

/* ---------- Cartes projet ---------- */
.project-card {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius-card);
    padding: 14px 16px 14px;
    color: inherit;
    text-decoration: none;
    box-shadow: var(--shadow-card);
    overflow: hidden;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.project-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--accent); }
.project-card:hover { color: inherit; border-color: var(--line-strong); box-shadow: 0 4px 14px -8px rgba(23, 22, 27, 0.25); }
.project-card.is-closed::before { background: #d4d2dc; }
.project-card-title { font-size: 14.5px; font-weight: 600; letter-spacing: -0.01em; color: var(--ink); margin-bottom: 2px; overflow-wrap: anywhere; }
.project-card-meta { font-size: 13px; color: var(--muted); margin-bottom: 10px; }
.project-card-dates { font-size: 13px; color: var(--ink-2); }
.project-card-ref { font-size: 12px; font-weight: 550; color: var(--faint); white-space: nowrap; }
.project-card-footer { margin-top: auto; padding-top: 14px; display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.project-card-count { font-size: 12.5px; color: var(--muted); white-space: nowrap; }

.avatar-stack { display: flex; align-items: center; }
.avatar-stack > * { border: 2px solid #fff; margin-left: -8px; }
.avatar-stack > *:first-child { margin-left: 0; }
.avatar-more { width: 28px; height: 28px; border-radius: 50%; background: var(--soft); color: var(--ink-2); font-size: 11px; font-weight: 600; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }

.empty-icon { width: 48px; height: 48px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); display: inline-flex; align-items: center; justify-content: center; font-size: 24px; }

/* ---------- Fiches ---------- */
.back-link { display: inline-flex; align-items: center; gap: 4px; font-size: 14px; color: var(--muted); text-decoration: none; }
.back-link:hover { color: var(--accent); }

.info-row { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid #f2f1f5; font-size: 14px; }
.info-row:last-child { border-bottom: none; }
.info-label { color: var(--muted); }
.info-value { color: var(--ink); font-weight: 500; text-align: right; overflow-wrap: anywhere; }

/* ---------- Taux d'occupation (fiche collaborateur) ---------- */
.occupancy-pill { display: inline-flex; align-items: center; gap: 10px; background: #fff; color: var(--ink-2); border: 0; border-radius: 999px; padding: 6px 14px; font-size: 13px; }
.occupancy-pill strong { color: var(--accent); font-weight: 600; }
.occupancy-sep { width: 1px; height: 12px; background: var(--line-strong); }

/* ---------- Avancement du projet (barre + to-do list) ---------- */
.progress-percent { font-family: var(--font); font-weight: 500; font-size: 30px; letter-spacing: -0.035em; color: var(--ink); line-height: 1; }
.progress-track { height: 8px; background: var(--line); border-radius: 999px; overflow: hidden; }
.progress-fill {
    height: 100%;
    width: 0;
    background: var(--navy);
    border-radius: 999px;
    transition: width 0.45s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.3s ease;
}
.progress-fill.is-complete { background: var(--success); }
.progress-caption { font-size: 12.5px; color: var(--muted); margin: 6px 0 12px; }

.task-list { list-style: none; padding: 0; margin: 0 0 12px; transition: opacity 0.15s ease; }
.task-list.is-busy { opacity: 0.6; pointer-events: none; }
.task-item { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 7px; transition: background 0.15s ease; }
.task-item:hover { background: var(--soft); }
.task-item .form-check-input { width: 1.15em; height: 1.15em; margin: 0; flex-shrink: 0; cursor: pointer; border-radius: 6px; }
.task-item .form-check-input:disabled { cursor: default; opacity: 0.8; }
.task-label { flex: 1; min-width: 0; font-size: 14px; color: var(--ink); overflow-wrap: anywhere; }
.task-body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.task-body .task-label { flex: none; }
.task-owner { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--muted); margin-top: 1px; overflow-wrap: anywhere; }
.task-item.is-done .task-owner { color: var(--faint); }
.task-item.is-done .task-label { color: var(--faint); text-decoration: line-through; }
.task-actions { display: flex; gap: 2px; opacity: 0; transition: opacity 0.15s ease; }
.task-item:hover .task-actions, .task-item:focus-within .task-actions { opacity: 1; }
@media (hover: none) { .task-actions { opacity: 1; } }
.task-btn { border: none; background: none; color: var(--faint); padding: 2px 6px; border-radius: 8px; line-height: 1.4; }
.task-btn:hover { background: var(--line); color: var(--ink); }
.task-btn.task-delete:hover { background: var(--danger-soft); color: var(--danger); }
.task-rename-input { flex: 1; min-width: 0; font-size: 14px; }
.task-empty { font-size: 13px; color: var(--muted); margin-bottom: 10px; }
.task-add { display: flex; gap: 8px; }
.task-add .btn { flex-shrink: 0; }
.task-error { font-size: 12.5px; color: var(--danger); margin-top: 6px; }
.task-error:empty { display: none; }

/* Avancement sur les cartes de la liste des projets */
.project-card-progress { margin-top: 12px; }
.project-card-progress-head { display: flex; justify-content: space-between; font-size: 12px; color: var(--muted); margin-bottom: 5px; }
.project-card-progress-head strong { color: var(--ink); font-weight: 600; }
.project-card-progress .progress-track { height: 6px; }

/* ---------- Tableau des droits d'accès (fiche d'administration d'une personne) ---------- */
.perm-card { padding: 0; overflow: hidden; }
.perm-toolbar { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; padding: 18px 22px; border-bottom: 1px solid var(--line); }
.perm-summary { font-size: 13px; color: var(--muted); }
.perm-summary strong { color: var(--ink); }
.perm-notice { font-size: 13px; color: var(--ink-2); background: var(--soft); padding: 10px 22px; border-bottom: 1px solid var(--line); }
.perm-table { width: 100%; min-width: 620px; border-collapse: separate; border-spacing: 0; }
.perm-table thead th { font-size: 12.5px; font-weight: 500; color: var(--faint); background: transparent; padding: 11px 12px; border-bottom: 1px solid var(--line); text-align: center; width: 110px; }
.perm-table thead th:first-child { text-align: left; padding-left: 22px; width: auto; }
.perm-table th.perm-col-toggle { cursor: pointer; user-select: none; transition: color 0.15s ease; }
.perm-table th.perm-col-toggle:hover { color: var(--accent); }
.perm-table td { padding: 11px 12px; border-bottom: 1px solid #f2f1f5; text-align: center; vertical-align: middle; }
.perm-table td:first-child { text-align: left; padding-left: 22px; }
.perm-section td { background: var(--soft); font-size: 13px; font-weight: 600; color: var(--ink-2); padding: 10px 22px; text-align: left; }
.perm-row:hover td { background: #f8f7fb; }
.perm-row-label { font-size: 14px; font-weight: 600; color: var(--ink); }
.perm-row-label[data-row-toggle] { cursor: pointer; display: inline-block; }
.perm-row-label[data-row-toggle]:hover { color: var(--accent); }
.perm-row-desc { font-size: 12.5px; color: var(--muted); }
.perm-na { color: #cfcdd8; }
.perm-check { width: 1.2em; height: 1.2em; margin: 0; cursor: pointer; }
.perm-check:disabled { cursor: default; opacity: 0.75; }
.perm-footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 22px; background: var(--soft); border-top: 1px solid var(--line); }
.perm-dirty { font-size: 13px; color: #9a6200; font-weight: 600; }
.perm-hint { font-size: 12.5px; color: var(--muted); }
.perm-footer .btn { margin-left: auto; }

/* ---------- Code de suivi client (fiche projet) ---------- */
.client-code-box { display: flex; align-items: center; justify-content: space-between; gap: 10px; background: var(--soft); border: 1.5px dashed #d4d2dc; border-radius: 16px; padding: 10px 12px; }
.client-code { font-family: var(--font); font-weight: 600; font-size: 22px; letter-spacing: 0.14em; color: var(--ink); font-variant-numeric: tabular-nums; line-height: 1; }

/* ---------- Suivi de chantier du client : application sur l'écran d'accueil ---------- */
.app-add-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 20px; }
.app-add { font-size: 15px; padding: 11px 22px; }
.app-added { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 650; padding: 7px 14px; border-radius: 999px; background: var(--success-soft); color: #145c32; }
.app-hint { position: relative; display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-radius: 16px; background: var(--navy); color: #fff; font-size: 14px; font-weight: 500; box-shadow: var(--shadow-pop); }
.app-hint .bi { font-size: 18px; }
.app-hint strong { font-weight: 600; }
.app-hint-close { margin-left: auto; border: 0; background: none; color: #a9a7b4; font-size: 15px; padding: 2px 4px; line-height: 1; }
.app-hint-close:hover { color: #fff; }
/* iPhone : la bulle se place près du bouton Partager de Safari (en bas, ou en haut sur iPad) */
.app-hint.is-floating { position: fixed; left: 12px; right: 12px; bottom: calc(14px + env(safe-area-inset-bottom)); z-index: 1060; max-width: 460px; margin: 0 auto; }
.app-hint.is-floating::after { content: ""; position: absolute; left: 50%; bottom: -8px; width: 16px; height: 16px; margin-left: -8px; background: var(--navy); transform: rotate(45deg); border-radius: 0 0 4px 0; }
.app-hint.is-floating.is-top { top: calc(12px + env(safe-area-inset-top)); bottom: auto; }
.app-hint.is-floating.is-top::after { bottom: auto; top: -8px; left: auto; right: 56px; border-radius: 4px 0 0 0; }
.suivi-updated { display: block; margin-top: 6px; }
.suivi-flash { animation: suivi-flash 1.6s ease; }
@keyframes suivi-flash { 0% { opacity: 0.35; } 100% { opacity: 1; } }
@media (max-width: 575.98px) {
    .app-add { flex: 1 1 100%; }
}
@media (prefers-reduced-motion: reduce) { .suivi-flash { animation: none; } }

/* Équipe staffée : « Modifier » et « Retirer » l'un au-dessus de l'autre (la colonne garde sa largeur) */
.staff-actions { display: inline-flex; align-items: center; gap: 2px; }

/* ---------- Tâches confiées (fenêtres Staffer / Modifier le staffing) ---------- */
.assign-hint { font-size: 12px; color: var(--muted); margin-bottom: 8px; }
.assign-list { border: 1px solid var(--line); border-radius: 14px; max-height: 232px; overflow-y: auto; background: #fff; }
.assign-item { display: flex; align-items: center; gap: 10px; margin: 0; padding: 10px 12px; border-bottom: 1px solid #f2f1f5; font-size: 14px; cursor: pointer; transition: background 0.15s ease; }
.assign-item:last-child { border-bottom: none; }
.assign-item:hover { background: var(--soft); }
.assign-item .form-check-input { margin: 0; flex-shrink: 0; cursor: pointer; }
.assign-label { flex: 1; min-width: 0; color: var(--ink); overflow-wrap: anywhere; }
.assign-item.is-done .assign-label { color: var(--faint); text-decoration: line-through; }
.assign-owner { flex-shrink: 0; max-width: 45%; font-size: 11.5px; color: var(--muted); background: var(--soft); border: 1px solid var(--line); border-radius: 20px; padding: 1px 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.assign-empty { font-size: 13px; color: var(--muted); margin: 0; padding: 12px; }

/* ---------- Disponibilités sur la période (fenêtres Staffer / Modifier le staffing) ---------- */
.dispo-box { border: 1px solid var(--line); border-radius: 14px; padding: 11px 13px; background: var(--soft); font-size: 13px; color: var(--ink-2); transition: opacity 0.15s ease; }
.dispo-box.is-loading { opacity: 0.55; }
.dispo-head { display: flex; align-items: flex-start; gap: 9px; }
.dispo-head > i { font-size: 16px; line-height: 1.2; flex-shrink: 0; color: var(--faint); }
.dispo-box.is-free .dispo-head > i { color: #16a34a; }
.dispo-box.is-partial .dispo-head > i { color: #d97706; }
.dispo-box.is-busy .dispo-head > i { color: var(--danger); }
.dispo-title { font-size: 13.5px; font-weight: 650; color: var(--ink); line-height: 1.3; }
.dispo-sub { font-size: 12.5px; color: var(--muted); margin-top: 1px; }
/* Une ligne par tranche : étiquettes alignées dans une colonne, dates et détail dans la suivante */
.dispo-list { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 6px 10px; align-items: baseline; margin: 9px 0 0; padding-left: 25px; }
.dispo-row { display: contents; }
.dispo-text { display: flex; flex-wrap: wrap; column-gap: 8px; min-width: 0; }
.dispo-more { grid-column: 1 / -1; color: var(--muted); }
.dispo-chip { justify-self: start; display: inline-block; font-size: 11px; font-weight: 650; padding: 1px 9px; border-radius: 999px; white-space: nowrap; }
.dispo-chip.is-free    { background: var(--success-soft); color: #145c32; }
.dispo-chip.is-partial { background: var(--warning-soft); color: #7a4f0f; }
.dispo-chip.is-busy    { background: var(--danger-soft); color: #8f261f; }
.dispo-chip.is-leave   { background: var(--soft); color: var(--ink-2); }
.dispo-dates { color: var(--ink); font-variant-numeric: tabular-nums; }
.dispo-detail { color: var(--muted); min-width: 0; overflow-wrap: anywhere; }
.dispo-note { margin: 8px 0 0 25px; font-size: 12px; color: var(--muted); }
.dispo-loading { display: flex; align-items: center; gap: 8px; color: var(--muted); }
.dispo-loading .spinner-border { width: 14px; height: 14px; border-width: 2px; color: var(--accent); }

/* ---------- Code postal → ville (formulaires projet et client) ---------- */
.cp-box { margin-top: 6px; }
.cp-box-title { font-size: 12px; color: var(--muted); margin-bottom: 4px; }
.cp-hint { font-size: 12px; color: #9a6200; }
.cp-choices { display: flex; flex-wrap: wrap; gap: 4px; max-height: 96px; overflow-y: auto; }
.cp-choice { border: 1px solid var(--line-strong); background: #fff; color: var(--ink-2); border-radius: 999px; font-size: 12.5px; font-weight: 500; line-height: 1.5; padding: 2px 11px; cursor: pointer; transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease; }
.cp-choice:hover, .cp-choice:focus-visible { border-color: var(--accent); color: var(--accent); outline: none; }
.cp-choice.is-selected { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-dark); }

/* ---------- Référence de projet (attribuée automatiquement) ---------- */
.ref-lock { background: var(--line); color: var(--faint); font-size: 13px; }
.form-control.ref-readonly, .form-control.ref-readonly:focus { background: #f2f1f5; color: var(--ink-2); box-shadow: none; border-color: var(--line-strong); cursor: default; }

/* ---------- Logo (page Paramètres) ---------- */
.logo-preview { display: flex; align-items: center; justify-content: center; min-height: 96px; padding: 16px; border: 1.5px dashed #d4d2dc; border-radius: 16px; background: var(--soft); }
.logo-preview img { display: block; max-width: 100%; max-height: 64px; width: auto; height: auto; }
.logo-preview-empty { display: inline-flex; align-items: center; gap: 10px; font-weight: 650; letter-spacing: -0.03em; color: var(--navy); }
.logo-preview-empty .brand-icon { width: 34px; height: 34px; font-size: 15px; }
.logo-preview-note { font-size: 12px; color: #9a6200; margin: -8px 0 12px; }

/* ============================================================
   Fenêtres de confirmation et d'information (assets/js/ui.js)
   Elles remplacent les alertes grises du navigateur.
   ============================================================ */
html.ui-dialog-open { overflow: hidden; }
.ui-dialog-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(23, 22, 27, 0.45);
    opacity: 0;
    transition: opacity 0.16s ease;
}
.ui-dialog-backdrop.is-visible { opacity: 1; }
.ui-dialog {
    width: 100%;
    max-width: 440px;
    max-height: calc(100vh - 32px);
    overflow-y: auto;
    background: #fff;
    border: 0;
    border-radius: 24px;
    padding: 20px 20px 18px;
    box-shadow: var(--shadow-pop);
    transform: translateY(8px) scale(0.98);
    transition: transform 0.16s ease;
}
.ui-dialog-backdrop.is-visible .ui-dialog { transform: none; }
.ui-dialog-head { display: flex; align-items: flex-start; gap: 14px; }
.ui-dialog-icon {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--accent-soft);
    color: var(--accent);
}
.ui-dialog-icon.is-danger { background: var(--danger-soft); color: var(--danger); }
.ui-dialog-text { min-width: 0; padding-top: 2px; }
.ui-dialog-title { font-size: 17px; font-weight: 600; letter-spacing: -0.01em; color: var(--ink); line-height: 1.35; margin: 0 0 4px; }
.ui-dialog-message { font-size: 14px; color: var(--ink-2); line-height: 1.5; margin: 0; white-space: pre-line; overflow-wrap: anywhere; }
.ui-dialog-message:empty { display: none; }
.ui-dialog-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 22px; }
.ui-dialog-btn { min-width: 96px; padding: 7px 14px; font-size: 13.5px; font-weight: 600; border-radius: var(--radius-btn); }
.ui-dialog-btn.btn-accent { border: 1px solid transparent; }

/* Messages des champs de formulaire (remplacent les bulles du navigateur) */
.field-error { display: flex; align-items: flex-start; gap: 6px; margin-top: 6px; font-size: 12.5px; font-weight: 500; line-height: 1.4; color: var(--danger); text-align: left; }
.field-error svg { flex-shrink: 0; margin-top: 2px; }
.field-error.is-row { flex-basis: 100%; width: 100%; margin-top: 0; }

@media (prefers-reduced-motion: reduce) {
    .ui-dialog-backdrop, .ui-dialog { transition: none; }
}

/* ============================================================
   Mobile et tablette (moins de 1200 px de large).
   Aucune de ces règles ne s'applique à l'affichage ordinateur.
   ============================================================ */

/* Éléments propres au mobile : invisibles sur ordinateur */
.mobile-topbar,
.mobile-nav,
.sidebar-backdrop,
.mobile-only,
.perm-cell-label { display: none; }

@media (max-width: 1199.98px) {
    /* Barre du haut : nom du site et accès au profil, sur le fond gris */
    .mobile-topbar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        height: 60px;
        padding: 0 14px 0 16px;
        background: color-mix(in srgb, var(--page) 90%, transparent);
        -webkit-backdrop-filter: blur(12px);
        backdrop-filter: blur(12px);
        z-index: 1020;
    }
    .mobile-brand { height: 40px; max-width: 72vw; }
    .mobile-brand .brand-logo { display: block; max-width: 170px; max-height: 30px; width: auto; height: auto; }
    .mobile-icon-btn { width: 40px; height: 40px; border-radius: 50%; border: 0; background: #fff; display: grid; place-items: center; color: var(--ink); font-size: 13px; font-weight: 600; text-decoration: none; }
    .mobile-icon-btn.active, .mobile-icon-btn:hover { background: var(--accent-soft); color: var(--ink); }

    /* Barre du bas : pilule noire flottante, bouton central « Nouveau projet » */
    .mobile-nav {
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        align-items: center;
        position: fixed;
        left: 12px;
        right: 12px;
        bottom: calc(10px + env(safe-area-inset-bottom));
        z-index: 1025;
        max-width: 520px;
        height: 64px;
        margin: 0 auto;
        padding: 0 6px;
        border-radius: 32px;
        background: var(--navy);
        box-shadow: 0 16px 34px -18px rgba(23, 22, 27, 0.7);
    }
    .mobile-nav-item, .mobile-nav-fab {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 2px;
        min-width: 0;
        height: 56px;
        border: 0;
        background: none;
        color: #a9a7b4;
        font: inherit;
        font-size: 10.5px;
        font-weight: 550;
        text-decoration: none;
        cursor: pointer;
    }
    .mobile-nav-item span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .mobile-nav-item .bi { font-size: 18px; line-height: 1; padding: 4px 14px; border-radius: 999px; transition: background-color 0.15s ease, color 0.15s ease; }
    .mobile-nav-item.active { color: #fff; }
    .mobile-nav-item.active .bi { background: var(--accent-soft); color: var(--ink); }
    .mobile-nav-item:hover { color: #fff; }
    .mobile-nav-fab > span:last-child { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
    .mobile-nav-fab .fab {
        width: 46px;
        height: 46px;
        border-radius: 50%;
        display: grid;
        place-items: center;
        background: #fff;
        color: var(--ink);
        font-size: 20px;
    }

    /* Contenu sur toute la largeur, entre la barre du haut et la barre du bas */
    .main-content { --pad-x: 16px; margin-left: 0; padding: 60px var(--pad-x) calc(100px + env(safe-area-inset-bottom)); }

    /* Le menu complet s'ouvre en volet depuis le bas de l'écran (bouton « Menu ») */
    .sidebar {
        position: fixed;
        top: auto;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        max-width: 520px;
        max-height: 88vh;
        max-height: 88dvh;
        margin: 0 auto;
        padding: 10px 14px calc(16px + env(safe-area-inset-bottom));
        overflow-y: auto;
        border-radius: 28px 28px 0 0;
        background: #fff;
        transform: translateY(105%);
        visibility: hidden;
        transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s linear 0.28s;
    }
    .sidebar::before { content: ""; display: block; flex-shrink: 0; width: 40px; height: 4px; margin: 0 auto 12px; border-radius: 4px; background: var(--line-strong); }
    body.sidebar-open { overflow: hidden; }
    body.sidebar-open .sidebar {
        transform: none;
        visibility: visible;
        box-shadow: 0 -12px 40px rgba(23, 22, 27, 0.22);
        transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
    }
    .sidebar-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(23, 22, 27, 0.4);
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.25s ease, visibility 0s linear 0.25s;
        z-index: 1040;
    }
    body.sidebar-open .sidebar-backdrop { opacity: 1; visibility: visible; transition: opacity 0.25s ease; }
    .sidebar-header { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 0 8px; padding: 0 4px 10px; }
    .sidebar-brand .brand-logo { display: block; max-width: 180px; max-height: 30px; width: auto; height: auto; }
    .sidebar-close {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 36px;
        height: 36px;
        flex-shrink: 0;
        border: none;
        border-radius: 50%;
        background: var(--soft);
        color: var(--muted);
        font-size: 15px;
    }
    .sidebar-close:hover { background: var(--line); color: var(--ink); }
    .sidebar-cta { display: none; } /* déjà au centre de la barre du bas */
    .sidebar-nav { gap: 2px; }
    .sidebar .nav-link, .sidebar-logout, .profile-btn {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 11px 14px;
        border-radius: 16px;
        color: var(--ink-2);
        font-weight: 550;
        font-size: 15px;
        text-decoration: none;
    }
    .sidebar .nav-link .bi, .sidebar-logout .bi { font-size: 18px; width: 20px; text-align: center; color: var(--muted); }
    .sidebar .nav-link:hover { background: var(--soft); color: var(--ink); }
    .sidebar .nav-link.active { background: var(--accent-soft); color: var(--ink); }
    .sidebar .nav-link.active .bi { color: var(--ink); }
    .sidebar-section { margin: 14px 14px 4px; font-size: 12.5px; font-weight: 550; color: var(--faint); }
    .sidebar-foot { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); display: grid; gap: 2px; }
    .profile-btn { padding: 8px 12px; }
    .profile-btn .avatar-fallback { width: 34px; height: 34px; font-size: 12px; }
    .profile-text { display: flex; flex-direction: column; min-width: 0; }
    .profile-name { font-weight: 600; font-size: 14px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .profile-status { font-size: 12px; color: var(--faint); font-weight: 500; }
    .sidebar-logout { color: var(--muted); }
    @media (hover: hover) {
        .sidebar-logout:hover { background: var(--danger-soft); color: var(--danger); }
        .sidebar-logout:hover .bi { color: var(--danger); }
    }

    /* Un champ signalé n'est pas caché sous la barre du haut quand la page défile jusqu'à lui */
    .form-control, .form-select, .form-check-input { scroll-margin-top: 76px; scroll-margin-bottom: 100px; }

    .pagination { flex-wrap: wrap; row-gap: 4px; }
    .main-content h1 { font-size: 25px; }
}

@media (max-width: 1199.98px) and (prefers-reduced-motion: reduce) {
    .sidebar, body.sidebar-open .sidebar, .sidebar-backdrop, body.sidebar-open .sidebar-backdrop { transition: none; }
}

/* 16 px minimum dans les champs sur écran tactile : évite le zoom automatique de l'iPhone pendant la saisie */
@media (max-width: 1199.98px) and (pointer: coarse), (max-width: 575.98px) {
    .form-control, .form-select { font-size: 16px !important; }
}

@media (max-width: 1199.98px) {
    /* Filtres de la liste des collaborateurs : largeurs égales, textes entiers */
    .filters-bar > .form-control, .filters-bar > .form-select { flex: 1 1 0; min-width: 0; max-width: none !important; }
}

@media (max-width: 767.98px) {
    /* En-têtes de page : les boutons passent sous le titre */
    .page-head { flex-wrap: wrap; gap: 14px; }
}

/* ----- Tableaux présentés en fiches, une par ligne -----
   .table-stack      : en dessous de 992 px (téléphone, tablette en portrait)
   .table-stack-wide : en dessous de 1200 px (tableaux trop larges pour une tablette à l'horizontale) */
@media (max-width: 1199.98px) {
    .table-stack-wide thead { display: none; }
    .table-stack-wide, .table-stack-wide tbody { display: block; width: 100%; }
    .table-stack-wide tr {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        column-gap: 6px;
        row-gap: 3px;
        position: relative;
        padding: 14px 16px;
        border-bottom: 1px solid var(--line);
    }
    .table-stack-wide tr:last-child { border-bottom: none; }
    table.user-table.table-stack-wide td { display: block; padding: 0; border: none; }
    table.user-table.table-stack-wide tr:hover td { background: transparent; }
    table.user-table.table-stack-wide td.is-empty { display: none; }
    .table-stack-wide tr::before, .table-stack-wide tr::after { content: ''; display: none; flex-basis: 100%; height: 0; }
    .table-stack-wide .mobile-only { display: inline; }
    .table-stack-wide tr.empty-row { display: block; padding: 24px 16px; }
    table.user-table.table-stack-wide tr.empty-row td { text-align: center; }

    /* Administration des collaborateurs : photo à gauche, nom, métier, compte, droits, boutons */
    .admin-collab-table tr { padding-left: 66px; min-height: 66px; }
    .admin-collab-table td.c-photo { position: absolute; left: 16px; top: 14px; }
    .admin-collab-table td.c-nom { order: 1; }
    table.user-table.admin-collab-table td.c-prenom { order: 2; flex: 1 1 auto; min-width: 0; margin-left: -2px; font-weight: 500; }
    .admin-collab-table tr::before { display: block; order: 4; }
    table.user-table.admin-collab-table td.c-emploi { order: 5; font-size: 13px; color: var(--muted); }
    table.user-table.admin-collab-table td.c-grade { order: 6; font-size: 13px; color: var(--muted); }
    .admin-collab-table td.c-grade::before { content: '·'; margin-right: 6px; }
    .admin-collab-table tr::after { display: block; order: 7; }
    .admin-collab-table td.c-compte { order: 8; margin-top: 6px; }
    .admin-collab-table td.c-droits { order: 9; margin-top: 6px; }
    table.user-table.admin-collab-table td.c-actions {
        order: 10;
        flex-basis: 100%;
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
        margin-top: 10px;
        text-align: left !important;
        white-space: normal !important;
    }
    .admin-collab-table .action-btn { padding: 7px 14px; font-size: 13px; }

    /* Périodes de staffing (équipe d'un projet, projets d'un collaborateur) */
    table.user-table.period-table td.c-main { order: 1; flex: 1 1 0; min-width: 0; }
    .period-table td.c-actions { order: 2; }
    .period-table .staff-actions { flex-direction: row; }
    .period-table tr::before { display: block; order: 3; }
    table.user-table.period-table td.c-period { order: 4; margin-top: 6px; font-size: 13.5px; }
    .period-table td.c-period > div { display: inline-block; margin-left: 6px; }
    .period-table tr::after { display: block; order: 5; }
    table.user-table.period-table td.c-days { order: 6; font-size: 13px; color: var(--muted); }
    table.user-table.period-table td.c-rate { order: 7; font-size: 13px; color: var(--muted); }
    .period-table td.c-rate::before { content: '·'; margin-right: 6px; }
    table.user-table.period-table td.c-mission { order: 8; flex-basis: 100%; max-width: none !important; margin-top: 2px; font-size: 13px; color: var(--ink-2); }
}

@media (max-width: 991.98px) {
    .table-stack thead { display: none; }
    .table-stack, .table-stack tbody { display: block; width: 100%; }
    .table-stack tr {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        column-gap: 6px;
        row-gap: 3px;
        position: relative;
        padding: 14px 16px;
        border-bottom: 1px solid var(--line);
    }
    .table-stack tr:last-child { border-bottom: none; }
    table.user-table.table-stack td { display: block; padding: 0; border: none; }
    table.user-table.table-stack tr:hover td { background: transparent; }
    table.user-table.table-stack td.is-empty { display: none; }
    .table-stack tr::before, .table-stack tr::after { content: ''; display: none; flex-basis: 100%; height: 0; }
    .table-stack .mobile-only { display: inline; }
    .table-stack tr.empty-row { display: block; padding: 24px 16px; }
    table.user-table.table-stack tr.empty-row td { text-align: center; }

    /* Liste des collaborateurs : photo à gauche, nom, occupation, métier, grade, habilitations */
    .collab-table tr { padding-left: 66px; min-height: 66px; }
    .collab-table td.c-photo { position: absolute; left: 16px; top: 14px; }
    .collab-table td.c-nom { order: 1; }
    table.user-table.collab-table td.c-prenom { order: 2; flex: 1 1 auto; min-width: 0; margin-left: -2px; font-weight: 500; }
    .collab-table td.c-occ { order: 3; }
    .collab-table td.c-occ .progress { width: 46px !important; }
    .collab-table tr::before { display: block; order: 4; }
    table.user-table.collab-table td.c-emploi { order: 5; font-size: 13px; color: var(--muted); }
    .collab-table td.c-grade { order: 6; }
    .collab-table td.c-habil { order: 7; flex-basis: 100%; margin-top: 4px; }

    /* Clients (administration) */
    table.user-table.clients-table td.c-name { order: 1; flex: 1 1 0; min-width: 0; }
    .clients-table td.c-projects { order: 2; }
    table.user-table.clients-table td.c-contact { order: 3; flex-basis: 100%; margin-top: 4px; font-size: 13px; }
    table.user-table.clients-table td.c-actions { order: 4; flex-basis: 100%; margin-top: 8px; text-align: left !important; }

    /* Journal d'activité */
    table.user-table.logs-table td.c-action { order: 1; flex: 1 1 0; min-width: 0; font-weight: 600; color: var(--ink); }
    .logs-table td.c-detail { order: 2; }
    .logs-table tr::before { display: block; order: 3; }
    table.user-table.logs-table td.c-user { order: 4; font-size: 13px; color: var(--ink-2); }
    table.user-table.logs-table td.c-date { order: 5; font-size: 13px; }
    .logs-table td.c-date::before { content: '·'; margin-right: 6px; }
    .logs-table tr::after { display: block; order: 6; }
    table.user-table.logs-table td.c-entity { order: 7; font-size: 12.5px; color: var(--muted); }
    table.user-table.logs-table td.c-ip { order: 8; font-size: 12.5px; }
    .logs-table td.c-ip::before { content: '·'; margin-right: 6px; }

    /* Tableau des droits : une fiche par fonctionnalité, cases à cocher libellées */
    .perm-table { min-width: 0; }
    .perm-table thead { display: none; }
    .perm-table, .perm-table tbody { display: block; width: 100%; }
    .perm-table tr.perm-section { display: block; }
    .perm-table tr.perm-section td { display: block; padding: 10px 16px; }
    .perm-table tr.perm-row {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 8px;
        padding: 12px 16px 14px;
        border-bottom: 1px solid #f2f1f5;
    }
    .perm-table tr.perm-row td { display: block; padding: 0; border: none; text-align: left; }
    .perm-table tr.perm-row td:first-child { grid-column: 1 / -1; padding: 0 0 2px; }
    .perm-table tr.perm-row:hover td { background: transparent; }
    .perm-table tr.perm-row td.perm-cell {
        position: relative;
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 9px 11px;
        border: 1px solid var(--line);
        border-radius: 12px;
        background: #fff;
        transition: background 0.15s ease, border-color 0.15s ease;
    }
    .perm-table tr.perm-row td.perm-cell:has(.perm-check:checked) {
        background: var(--accent-soft);
        border-color: color-mix(in srgb, var(--accent) 35%, transparent);
    }
    .perm-table tr.perm-row td.perm-cell-na { visibility: hidden; }
    .perm-table .perm-cell-label { display: inline; margin: 0; font-size: 13px; color: var(--ink-2); cursor: pointer; }
    .perm-table .perm-cell-label::after { content: ''; position: absolute; inset: 0; }
    .perm-table .perm-check:disabled + .perm-cell-label { cursor: default; }
    .perm-table .perm-check { width: 1.25em; height: 1.25em; flex-shrink: 0; }
    .perm-toolbar, .perm-notice, .perm-footer { padding-left: 16px; padding-right: 16px; }
}

@media (max-width: 575.98px) {
    .main-content { --pad-x: 14px; }
    .stat-card { padding: 14px 14px; }
    .stat-card .stat-value { font-size: 26px; }
    .row.stat-row { --bs-gutter-y: 0.6rem; }

    /* Filtres de la liste des collaborateurs : un champ par ligne */
    .filters-bar > .form-control, .filters-bar > .form-select, .filters-bar > .btn { flex: 1 1 100%; min-width: 0; max-width: none !important; }

    /* Ajout d'une compétence : la liste sur toute la largeur, niveau et bouton en dessous */
    .skill-add-form > select[name="skill_id"] { flex: 1 1 100% !important; min-width: 0 !important; }
    .skill-add-form > select[name="skill_level"] { flex: 1 1 auto; max-width: none !important; }

    /* Onglets plus compacts (la rangée défile si besoin) */
    .admin-subnav a, .pill-tabs a { padding: 8px 10px 9px; font-size: 13px; }
    .admin-subnav a i { display: none; }

    /* Fiche collaborateur : photo au-dessus du nom */
    .page-head-main { flex-direction: column; align-items: flex-start !important; gap: 12px !important; }
    .occupancy-pill { flex-wrap: wrap; }

    /* Couleurs du site : deux rangées de cinq */
    .color-grid { display: grid !important; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px 8px !important; }
    .color-grid .color-swatch { width: 100%; height: auto; aspect-ratio: 1 / 1; }

    /* Administration : boutons sur toute la largeur de la fiche, sous la photo */
    table.user-table.admin-collab-table td.c-actions { flex-basis: calc(100% + 50px); margin-left: -50px; }
    .admin-collab-table td.c-actions > :not(form) { flex: 1 1 auto; }
    .admin-collab-table td.c-actions form .action-btn { width: 100%; }
    .admin-collab-table .action-btn { padding: 7px 10px; }

    /* Tableau des droits : deux cases par ligne */
    .perm-table tr.perm-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .perm-table tr.perm-row td.perm-cell-na { display: none; }
    .perm-footer .btn { flex: 1 1 100%; margin-left: 0; }

    /* Fenêtres de confirmation : boutons pleine largeur */
    .ui-dialog { padding: 22px 18px 18px; }
    .ui-dialog-actions .ui-dialog-btn { flex: 1 1 0; min-width: 0; padding: 11px 12px; }

    /* Disponibilités (Staffer / Modifier) : toute la largeur de l'encart pour les tranches */
    .dispo-list { padding-left: 0; column-gap: 8px; }
    .dispo-note { margin-left: 0; }
}


/* ============================================================
   Facturation et gestion des chantiers
   ============================================================ */
.page-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.min-w-0 { min-width: 0; }
.stat-card .stat-value.is-money { font-size: clamp(22px, 2vw, 30px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stat-tile.is-late { --tint: var(--tint-sand); }
.stat-tile.is-red { --tint: var(--tint-pink); }

/* Statuts */
.bill-status {
    display: inline-flex;
    align-items: center;
    font-size: 12px;
    font-weight: 650;
    line-height: 1.5;
    padding: 1px 8px;
    border-radius: 999px;
    white-space: nowrap;
    background: var(--soft);
    color: var(--muted);
}
.bill-status.is-sent { background: var(--accent-soft); color: var(--accent-dark); }
.bill-status.is-accepted, .bill-status.is-paid { background: var(--success-soft); color: #145c32; }
.bill-status.is-refused, .bill-status.is-cancelled { background: var(--danger-soft); color: #8f261f; }
.bill-status.is-issued { background: #e8e7ee; color: var(--navy); }
.bill-status.is-late { background: var(--warning-soft); color: #7a4f0f; }
.bill-kind { font-size: 12.5px; color: var(--muted); overflow-wrap: anywhere; }
.doc-number { font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
a.doc-number { color: var(--ink); text-decoration: none; }
a.doc-number:hover { color: var(--accent); }
.doc-number.is-big { font-size: 14px; }
.doc-head-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.doc-head-client { font-size: 14.5px; color: var(--muted); font-weight: 600; }
.amount { font-variant-numeric: tabular-nums; white-space: nowrap; }
.amount-neg { color: var(--danger); }
.margin-pos { color: var(--success); }
.margin-neg { color: var(--danger); }

/* Recherche + filtre des listes */
.filters-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.filters-row .form-control { flex: 1 1 260px; max-width: 360px; }
.filters-row .form-select { flex: 0 1 230px; }

/* Fiche d'un document */
.doc-facts { display: grid; grid-template-columns: minmax(110px, auto) 1fr; gap: 8px 16px; margin: 0; font-size: 14px; }
.doc-facts dt { font-weight: 600; color: var(--muted); }
.doc-facts dd { margin: 0; overflow-wrap: anywhere; }
.doc-facts a { font-weight: 600; text-decoration: none; }
.lines-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; padding: 20px 24px 6px; }
.save-bar { display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.quote-actions { display: grid; gap: 8px; margin-top: 16px; }
.linked-docs { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.linked-docs a, .linked-docs .linked-static { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 14px; background: var(--soft); color: var(--ink); text-decoration: none; }
.linked-docs a:hover { background: var(--accent-soft); }
.linked-docs .bill-status { margin-top: 3px; }
.seg-choice { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.seg-choice .btn-check:checked + .btn { background: var(--accent-soft); border-color: var(--accent) !important; color: var(--accent-dark); }

/* Totaux */
.totals-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 4px 0; font-size: 13.5px; }
.totals-row > span:first-child { min-width: 0; }
.totals-base { font-size: 12px; color: var(--faint); font-weight: 500; }
.totals-row.is-strong { font-weight: 600; font-size: 15px; border-top: 1px solid var(--line); padding-top: 10px; margin-top: 4px; }
.totals-row.is-net { margin-top: 12px; padding: 12px 16px; border-radius: 16px; background: var(--navy); color: #fff; font-weight: 600; font-size: 16px; }
.totals-note { font-size: 12.5px; color: var(--muted); margin-top: 10px; }

/* Lignes : lecture */
.lines-view-wrap, .lines-editor-wrap { padding: 0; overflow-x: auto; }
table.lines-view { width: 100%; border-collapse: collapse; }
.lines-view th { font-size: 12.5px; font-weight: 500; color: var(--faint); background: transparent; padding: 8px 12px; border-bottom: 1px solid var(--line); text-align: left; white-space: nowrap; }
.lines-view td { padding: 8px 12px; border-bottom: 1px solid #f2f1f5; font-size: 13.5px; vertical-align: top; }
.lines-view tbody tr:last-child td { border-bottom: none; }
.lines-view .lv-num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.lines-view .lv-total { font-weight: 650; }
.lines-view .lv-des { min-width: 220px; overflow-wrap: anywhere; }
.lines-view .lv-title td { background: var(--soft); font-weight: 600; color: var(--ink); }
.lines-view .lv-deduction td { color: var(--muted); font-style: italic; }
.progress-input { width: 118px; margin-left: auto; flex-wrap: nowrap; }

/* Lignes : éditeur */
table.lines-editor { width: 100%; border-collapse: collapse; }
.lines-editor th { font-size: 12.5px; font-weight: 500; color: var(--faint); background: transparent; padding: 8px 6px; border-bottom: 1px solid var(--line); text-align: left; white-space: nowrap; }
.lines-editor td { padding: 5px 6px; border-bottom: 1px solid #f2f1f5; vertical-align: top; }
.lines-editor .form-control, .lines-editor .form-select { font-size: 13.5px; padding: 0.32rem 0.55rem; }
.lines-editor .form-select { padding-right: 1.8rem; background-position: right 0.5rem center; }
.lines-editor textarea { resize: vertical; min-height: 40px; line-height: 1.4; }
.lines-editor .l-des { width: auto; min-width: 240px; }
.lines-editor .l-qty { width: 86px; }
.lines-editor .l-unit { width: 92px; }
.lines-editor .l-pu { width: 120px; }
.lines-editor .l-vat { width: 96px; }
.lines-editor .l-total { width: 120px; text-align: right; }
.lines-editor .l-tools { width: 100px; }
.lines-editor.no-vat .l-vat { display: none; }
.line-total { display: block; padding-top: 6px; font-weight: 650; font-variant-numeric: tabular-nums; white-space: nowrap; }
.line-row.is-title td { background: var(--soft); }
.line-title-input { font-weight: 600; }
.line-tools { display: flex; gap: 2px; justify-content: flex-end; padding-top: 4px; }
.line-tool { border: 0; background: transparent; width: 28px; height: 28px; border-radius: 50%; color: var(--faint); display: inline-flex; align-items: center; justify-content: center; }
.line-tool:hover, .line-tool:focus-visible { background: var(--soft); color: var(--ink); }
.line-tool.is-danger:hover { background: var(--danger-soft); color: var(--danger); }
.lines-add { display: flex; gap: 8px; flex-wrap: wrap; padding: 10px 16px 12px; border-top: 1px solid #f2f1f5; }

/* Gestion : compte du chantier, avancement, ratios */
.card-note { font-size: 12.5px; color: var(--muted); }
.ratio-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.kpi-ratio { padding: 14px 16px; border-radius: var(--radius-inner); background: var(--soft); min-width: 0; }
.ratio-label { font-size: 13px; font-weight: 500; color: var(--muted); }
.ratio-value { font-family: var(--font); font-weight: 500; font-size: 24px; letter-spacing: -0.03em; line-height: 1.15; color: var(--ink); white-space: nowrap; font-variant-numeric: tabular-nums; margin-top: 6px; }
.ratio-help { font-size: 12px; color: var(--faint); margin-top: 4px; }
/* Répartition des coûts : barre empilée, segments séparés par un filet de 2 px */
.cost-bar { display: flex; gap: 2px; height: 12px; margin-bottom: 14px; }
.cost-bar > span { flex-basis: 0; min-width: 4px; border-radius: 4px; }
.cost-bar > span:first-child { border-radius: 999px 4px 4px 999px; }
.cost-bar > span:last-child { border-radius: 4px 999px 999px 4px; }
.cost-bar > span:only-child { border-radius: 999px; }
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 8px; vertical-align: 1px; }
.account-table tr.is-sub td { font-weight: 600; color: var(--ink); }
.account-table tr.is-total td { font-weight: 600; font-size: 15px; color: var(--ink); border-top: 1px solid var(--line-strong); padding-top: 10px; }
.account-table tbody tr:not(.is-sub):not(.is-total) td:first-child { color: var(--ink-2); }
/* Jauges d'avancement */
.meter-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 13.5px; color: var(--ink-2); margin-bottom: 6px; }
.meter-row strong { font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.meter { height: 8px; border-radius: 999px; background: var(--line); overflow: hidden; margin-bottom: 14px; }
.meter > span { display: block; height: 100%; border-radius: 999px; background: var(--navy); }
.meter.is-soft > span { background: var(--accent); }
.fact-list { display: grid; gap: 0; margin: 4px 0 0; }
.fact-list > div { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-top: 1px solid var(--line); font-size: 14px; }
.fact-list dt { font-weight: 500; color: var(--muted); }
.fact-list dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.split-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 3px 12px; align-items: baseline; padding: 6px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.split-row:last-child { border-bottom: none; }
.compare-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.compare-table th { font-size: 12.5px; font-weight: 500; color: var(--faint); padding: 8px 0; text-align: right; }
.compare-table th:first-child, .compare-table td:first-child { text-align: left; }
.compare-table td { padding: 8px 0 8px 12px; text-align: right; border-top: 1px solid var(--line); font-variant-numeric: tabular-nums; white-space: nowrap; }
.compare-table td:first-child { white-space: normal; padding-left: 0; }
.compare-table tr.is-strong td { font-weight: 600; }
table.user-table td.amount, table.user-table th.amount { text-align: right; }
table.user-table tfoot td { font-weight: 600; border-top: 1px solid var(--line-strong); background: var(--soft); }

@media (max-width: 991.98px) {
    /* Liste des documents */
    table.user-table.bill-table td.c-num { order: 1; flex: 1 1 0; min-width: 0; }
    .bill-table td.c-status { order: 2; }
    .bill-table tr::before { display: block; order: 3; }
    table.user-table.bill-table td.c-client { order: 4; flex: 1 1 0; min-width: 0; margin-top: 6px; }
    table.user-table.bill-table td.c-ttc { order: 5; margin-top: 6px; font-size: 15px; }
    .bill-table td.c-ht { display: none !important; }
    .bill-table tr::after { display: block; order: 6; }
    table.user-table.bill-table td.c-date { order: 7; font-size: 13px; color: var(--muted); text-align: left !important; }
    table.user-table.bill-table td.c-date > div { display: inline; }
    table.user-table.bill-table td.c-date > div + div::before { content: ' · '; }

    /* Gestion : tableau des chantiers */
    table.user-table.mgmt-table td.c-name { order: 1; flex: 1 1 0; min-width: 0; }
    .mgmt-table td.c-rate { order: 2; }
    .mgmt-table tr::before { display: block; order: 3; }
    table.user-table.mgmt-table td.c-money { order: 4; flex: 1 1 calc(50% - 6px); margin-top: 6px; text-align: left !important; font-size: 13.5px; }
    table.user-table.mgmt-table td.c-money::before { content: attr(data-label); display: block; font-size: 12px; font-weight: 500; color: var(--faint); }
    .mgmt-table tfoot, .mgmt-table tfoot tr { display: block; }
    .mgmt-table tfoot tr { display: flex; flex-wrap: wrap; column-gap: 6px; padding: 14px 16px; background: var(--soft); }
    table.user-table.mgmt-table tfoot td { display: block; padding: 0; border: none; background: transparent; }
    table.user-table.mgmt-table tfoot td.c-name { flex-basis: 100%; }

    /* Charges et produits d'un chantier, salaires */
    table.user-table.entries-table td.c-label { order: 1; flex: 1 1 0; min-width: 0; }
    table.user-table.entries-table td.c-amount { order: 2; font-weight: 650; }
    .entries-table tr::before { display: block; order: 3; }
    table.user-table.entries-table td.c-date { order: 4; font-size: 13px; color: var(--muted); }
    table.user-table.entries-table td.c-cat { order: 5; font-size: 13px; color: var(--muted); }
    .entries-table td.c-cat::before { content: '·'; margin-right: 6px; }
    table.user-table.entries-table td.c-actions { order: 6; flex-basis: 100%; margin-top: 8px; text-align: left !important; }
    table.user-table.salary-table td.c-name { order: 1; flex: 1 1 0; min-width: 0; }
    table.user-table.salary-table td.c-actions { order: 2; }
    .salary-table tr::before { display: block; order: 3; }
    table.user-table.salary-table td.c-money { order: 4; flex: 1 1 calc(50% - 6px); margin-top: 6px; text-align: left !important; font-size: 13.5px; }
    table.user-table.salary-table td.c-money::before { content: attr(data-label); display: block; font-size: 12px; font-weight: 500; color: var(--faint); }
}

@media (max-width: 767.98px) {
    /* Éditeur de lignes : une fiche par ligne */
    .lines-editor-wrap { padding: 0 12px 4px; overflow: visible; }
    .lines-editor thead th { background: none; }
    .lines-editor thead { display: none; }
    .lines-editor, .lines-editor tbody { display: block; width: 100%; }
    .lines-editor tr.line-row { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 0.85fr) minmax(0, 1.35fr) minmax(0, 1fr); gap: 8px; padding: 12px 0; border-bottom: 1px solid var(--line); }
    .lines-editor tr.line-row td { display: block; width: auto !important; min-width: 0; padding: 0; border: none; }
    .lines-editor tr.line-row td.l-des { grid-column: 1 / -1; }
    .lines-editor tr.line-row td[data-label]::before { content: attr(data-label); display: block; font-size: 12px; font-weight: 500; color: var(--faint); margin-bottom: 3px; }
    .lines-editor tr.line-row td.l-total { grid-column: 1 / 3; text-align: left; }
    .lines-editor tr.line-row td.l-tools { grid-column: 3 / -1; align-self: end; }
    .lines-editor.no-vat tr.line-row td.l-pu { grid-column: 3 / -1; }
    .lines-editor .line-total { padding-top: 0; font-size: 15px; }
    .lines-editor tr.line-row.is-title { grid-template-columns: minmax(0, 1fr) auto; padding: 12px 10px; margin: 8px -10px 0; border-radius: 14px; }
    .lines-editor tr.line-row.is-title td { background: transparent; }
    .lines-editor tr.line-row.is-title td.l-des { grid-column: auto; }
    .lines-editor tr.line-row.is-title td.l-tools { grid-column: auto; align-self: center; }

    /* Lignes en lecture : désignation puis chiffres en ligne */
    .lines-view-wrap { padding: 0 12px 4px; }
    .lines-view thead { display: none; }
    .lines-view, .lines-view tbody { display: block; width: 100%; }
    .lines-view tbody tr { display: flex; flex-wrap: wrap; gap: 4px 14px; padding: 12px 0; border-bottom: 1px solid var(--line); }
    .lines-view tbody tr:last-child { border-bottom: none; }
    .lines-view tbody td { display: block; padding: 0; border: none; font-size: 13.5px; }
    .lines-view tbody td:empty { display: none; }
    .lines-view tbody td.lv-des { flex-basis: 100%; min-width: 0; font-size: 14px; }
    .lines-view tbody td.lv-num:not(:empty)::before, .lines-view tbody td.lv-unit:not(:empty)::before { content: attr(data-label) ' '; color: var(--faint); font-size: 12px; }
    .lines-view tbody td.lv-total { margin-left: auto; font-size: 14.5px; }
    .lines-view tbody td.lv-total::before { content: '' !important; }
    .lines-view tbody tr.lv-title { padding: 10px 12px; margin: 6px -12px 0; background: var(--soft); border-radius: 12px; border-bottom: none; }
    .lines-view tbody tr.lv-title td { background: transparent; }
    .situation-table tbody td.lv-num[data-label="Cumulé"] { flex-basis: 100%; }
    .situation-table .progress-input { margin-left: 0; width: 140px; }
    .doc-facts { grid-template-columns: 1fr; gap: 2px; }
    .compare-table { font-size: 13px; }
    .compare-table th { font-size: 12px; padding-left: 8px; }
    .compare-table td { padding-left: 8px; }
    .ratio-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ratio-value { font-size: 22px; }
    .doc-facts dd { margin-bottom: 8px; }
    .save-bar .btn { flex: 1 1 auto; }
}

/* ============================================================
   En-tête de page (retour, titre, statut, actions, onglets du module).
   Fixe en haut de l'écran sur ordinateur : les actions restent à portée pendant le défilement ;
   un filet apparaît dès que la page défile (classe is-stuck, assets/js/ui.js).
   ============================================================ */
.page-header {
    position: sticky;
    top: 0;
    z-index: 1010;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 14px 20px;
    margin: 0 calc(var(--pad-x) * -1) 22px;
    padding: 28px var(--pad-x) 16px;
    background: color-mix(in srgb, var(--page) 90%, transparent);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    transition: box-shadow 0.2s ease;
}
.page-header.is-stuck { box-shadow: 0 1px 0 var(--line-strong); }
.page-header-main { min-width: 0; flex: 1 1 320px; }
.page-header h1 { margin: 0; }
.page-title-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.page-sub { margin: 6px 0 0; font-size: 13.5px; color: var(--muted); }
.page-header .page-actions { flex: 0 1 auto; justify-content: flex-end; }
/* Onglets du module, sous le titre */
.page-header .admin-subnav, .page-header .pill-tabs { flex: 1 1 100%; margin: 2px 0 0; }
.crumbs { margin-bottom: 8px; font-size: 13px; }
.crumbs a { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); text-decoration: none; font-weight: 500; }
.crumbs a:hover { color: var(--ink); }
.crumbs .bi { font-size: 13px; }

/* Barre d'enregistrement du bas : utile sur téléphone, doublon sur ordinateur (le bouton est dans l'en-tête) */
@media (min-width: 1200px) {
    .save-bar.has-header-save { display: none; }
}

/* Tableaux triables (assets/js/ui.js) : un clic sur l'intitulé d'une colonne trie la liste */
table[data-sortable] th.is-sortable { cursor: pointer; user-select: none; }
table[data-sortable] th.is-sortable:hover { color: var(--ink); }
table[data-sortable] th.is-sortable::after { content: "\2195"; display: inline-block; margin-left: 4px; font-size: 10px; color: #c9c7d2; }
table[data-sortable] th[aria-sort="ascending"]::after { content: "\2191"; color: var(--ink); }
table[data-sortable] th[aria-sort="descending"]::after { content: "\2193"; color: var(--ink); }
table[data-sortable] th.amount.is-sortable::after { margin-left: 3px; }

@media (max-width: 1199.98px) {
    .page-header { position: static; margin: 0 0 16px; padding: 14px 0 0; background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none !important; }
    .page-header .page-actions { flex: 1 1 100%; justify-content: flex-start; }
}

/* Liste des projets (tableau) */
.table-progress { display: flex; align-items: center; gap: 8px; min-width: 160px; font-size: 12.5px; color: var(--muted); white-space: nowrap; }
.table-progress .progress-track { flex: 1 1 70px; height: 6px; }
.table-progress strong { color: var(--ink); font-weight: 650; }
table.user-table tr.is-closed .client-name { color: var(--muted); }
.project-table td.c-ref .doc-number { font-size: 12.5px; color: var(--ink-2); }
@media (max-width: 991.98px) {
    table.user-table.project-table td.c-name { order: 1; flex: 1 1 0; min-width: 0; }
    .project-table td.c-status { order: 2; }
    .project-table tr::before { display: block; order: 3; }
    table.user-table.project-table td.c-ref { order: 4; font-size: 12.5px; }
    table.user-table.project-table td.c-start { order: 5; font-size: 13px; color: var(--muted); }
    table.user-table.project-table td.c-end { order: 6; font-size: 13px; color: var(--muted); }
    .project-table td.c-start::before { content: '· '; }
    .project-table td.c-end::before { content: '→ '; }
    .project-table tr::after { display: block; order: 7; }
    table.user-table.project-table td.c-progress { order: 8; flex: 1 1 0; min-width: 0; margin-top: 6px; }
    table.user-table.project-table td.c-team { order: 9; margin-top: 6px; }
}
@media (max-width: 369.98px) {
    /* Très petits téléphones : les onglets passent à la ligne plutôt que d'être masqués */
    .admin-subnav { flex-wrap: wrap; }
    .admin-subnav a { padding: 7px 6px 8px; font-size: 12.5px; }
}
@media (max-width: 575.98px) {
    /* Indicateurs à deux par ligne : montants entiers, petite icône */
    .stat-tile .stat-icon { width: 30px; height: 30px; top: 14px; right: 14px; font-size: 13px; }
    .stat-tile .stat-label { padding-right: 30px; font-size: 12.5px; }
    .stat-tile .stat-value { padding-right: 0; }
    .stat-card .stat-value.is-money { font-size: 20px; }
}

/* ============================================================
   Bandeau d'accueil (tableau de bord) : fond lavande, sphère décorative à droite
   ============================================================ */
.hero-card {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    min-height: 196px;
    padding: 30px 34px;
    border-radius: var(--radius-card);
    background: linear-gradient(115deg, var(--accent-soft) 0%, color-mix(in srgb, var(--accent) 26%, var(--accent-soft)) 100%);
}
.hero-text { position: relative; z-index: 1; max-width: 560px; }
.hero-title { font-size: 30px; font-weight: 500; letter-spacing: -0.03em; line-height: 1.12; margin: 0 0 8px; color: var(--ink); }
.hero-sub { font-size: 14px; color: var(--ink-2); margin: 0 0 18px; }
.hero-sub:last-child { margin-bottom: 0; }
.hero-orb {
    position: absolute;
    right: 6%;
    top: 50%;
    width: 168px;
    height: 168px;
    transform: translateY(-50%);
    border-radius: 50%;
    background:
        radial-gradient(circle at 34% 28%, rgba(255, 255, 255, 0.95) 0 6%, rgba(255, 255, 255, 0) 30%),
        radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--accent) 45%, #fff) 0%, var(--accent) 62%, var(--accent-dark) 100%);
    box-shadow: 0 30px 60px -28px color-mix(in srgb, var(--accent-dark) 70%, transparent);
}
.hero-orb::after {
    content: "";
    position: absolute;
    right: -54px;
    bottom: -14px;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background:
        radial-gradient(circle at 34% 30%, rgba(255, 255, 255, 0.9) 0 6%, rgba(255, 255, 255, 0) 32%),
        radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--accent) 30%, #fff) 0%, color-mix(in srgb, var(--accent) 75%, #fff) 70%, var(--accent) 100%);
}
@media (max-width: 767.98px) {
    .hero-card { min-height: 0; padding: 24px 22px; }
    .hero-title { font-size: 23px; }
    .hero-orb { width: 58px; height: 58px; right: 18px; top: 20px; transform: none; }
    .hero-title { padding-right: 64px; }
    .hero-orb::after { display: none; }
    .hero-text { max-width: 100%; }
}