/* =====================================================================
   NOVEM TRACK - Feuille de style unique
   Aucune dependance externe : fonctionne hors ligne et sur tout
   hebergement mutualise.
   ===================================================================== */

:root {
    --navy:        #16325c;
    --navy-dark:   #0f2342;
    --navy-light:  #24497d;
    --accent:      #1f7a8c;
    --ink:         #1d2330;
    --ink-soft:    #4b5565;
    --ink-muted:   #8a93a3;
    --line:        #e2e6ee;
    --line-strong: #cfd6e2;
    --bg:          #f4f6fa;
    --surface:     #ffffff;
    --surface-alt: #f8fafc;

    --success:     #1a7f52;
    --success-bg:  #e6f4ec;
    --warning:     #9a6207;
    --warning-bg:  #fdf3e2;
    --danger:      #a52834;
    --danger-bg:   #fceaec;
    --info:        #1b5f8f;
    --info-bg:     #e8f1f9;
    --progress:    #6b4fa8;
    --progress-bg: #efeaf9;
    --neutral:     #5b6477;
    --neutral-bg:  #eef0f5;

    --radius:      10px;
    --radius-sm:   7px;
    --shadow:      0 1px 2px rgba(19, 26, 44, .05), 0 8px 24px rgba(19, 26, 44, .05);
    --shadow-sm:   0 1px 2px rgba(19, 26, 44, .07);
    --sidebar-w:   248px;

    --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --mono: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
}

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

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    font-family: var(--font);
    font-size: 14px;
    line-height: 1.55;
    color: var(--ink);
    background: var(--bg);
}

h1, h2, h3, h4 { margin: 0; line-height: 1.3; font-weight: 650; }

p { margin: 0 0 .7em; }
p:last-child { margin-bottom: 0; }

a { color: var(--navy); text-decoration: none; }
a:hover { text-decoration: underline; }

img { max-width: 100%; height: auto; }

hr.sep { border: 0; border-top: 1px solid var(--line); margin: 18px 0; }

code, .mono { font-family: var(--mono); font-size: .92em; }

.h2 { font-size: 21px; }
.h3 { font-size: 15.5px; }
.h4 { font-size: 13.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-soft); }

.muted { color: var(--ink-muted); }
.small { font-size: 12.5px; }
.nowrap { white-space: nowrap; }
.text-danger { color: var(--danger); }
.text-warning { color: var(--warning); }
.prose { color: var(--ink-soft); }

.skip-link {
    position: absolute; left: -9999px; top: 0;
    background: var(--navy); color: #fff; padding: 10px 16px; z-index: 100;
}
.skip-link:focus { left: 8px; top: 8px; }

:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: 3px;
}

/* ============================================================ Structure */
.app { display: block; }

.sidebar {
    position: fixed; inset: 0 auto 0 0;
    width: var(--sidebar-w);
    background: linear-gradient(180deg, var(--navy) 0%, var(--navy-dark) 100%);
    color: #e6ecf6;
    display: flex; flex-direction: column;
    z-index: 40;
}

.sidebar__brand {
    display: flex; flex-direction: column; align-items: flex-start; gap: 7px;
    padding: 18px 18px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, .1);
}

/* La hauteur est bornee : un logo televerse peut avoir n'importe
   quelles proportions sans repousser la navigation. */
.sidebar__logo {
    display: block;
    width: 176px; height: auto;
    max-height: 52px; object-fit: contain; object-position: left center;
}

.sidebar__tagline {
    font-size: 11px; letter-spacing: .01em;
    color: rgba(230, 236, 246, .6);
}

.sidebar__nav { padding: 12px 10px; overflow-y: auto; flex: 1; }

.sidebar__section {
    margin: 18px 8px 6px;
    font-size: 10.5px; text-transform: uppercase; letter-spacing: .09em;
    color: rgba(230, 236, 246, .45);
}

.navlink {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 10px; margin-bottom: 2px;
    border-radius: var(--radius-sm);
    color: rgba(230, 236, 246, .82);
    font-size: 13.5px; font-weight: 500;
}
.navlink:hover { background: rgba(255, 255, 255, .08); color: #fff; text-decoration: none; }
.navlink.is-active { background: rgba(255, 255, 255, .15); color: #fff; font-weight: 600; }

.navlink__icon { width: 16px; height: 16px; flex: none; opacity: .85; }

.sidebar__foot {
    padding: 14px 16px;
    border-top: 1px solid rgba(255, 255, 255, .1);
    font-size: 12.5px;
}
.sidebar__role { display: flex; align-items: center; gap: 9px; }
.sidebar__role span { display: flex; flex-direction: column; min-width: 0; }
.sidebar__role strong { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar__role small { color: rgba(230, 236, 246, .6); font-size: 11.5px; }
.sidebar__org {
    margin-top: 8px; padding-top: 8px;
    border-top: 1px solid rgba(255, 255, 255, .08);
    color: rgba(230, 236, 246, .6); font-size: 11.5px;
}

.main { margin-left: var(--sidebar-w); min-height: 100vh; display: flex; flex-direction: column; }

/* ------------------------------------------------------------- Topbar */
.topbar {
    position: sticky; top: 0; z-index: 30;
    display: flex; align-items: center; gap: 14px;
    padding: 12px 22px;
    background: rgba(255, 255, 255, .92);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--line);
}

.topbar__burger {
    display: none; flex-direction: column; gap: 4px;
    width: 36px; height: 36px; padding: 9px 8px;
    background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--radius-sm); cursor: pointer;
}
.topbar__burger span { display: block; height: 2px; background: var(--ink); border-radius: 2px; }

.topbar__title {
    font-size: 16px; font-weight: 650; margin: 0;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.topbar__search { margin-left: auto; display: flex; gap: 6px; }
.topbar__search input {
    width: 250px; max-width: 34vw;
    padding: 7px 11px;
    border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
    font: inherit; font-size: 13px; background: var(--surface);
}
.topbar__search button {
    padding: 7px 13px; font: inherit; font-size: 13px; font-weight: 550;
    background: var(--surface); color: var(--ink-soft);
    border: 1px solid var(--line-strong); border-radius: var(--radius-sm); cursor: pointer;
}
.topbar__search button:hover { background: var(--surface-alt); }

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

/* ---- Choix de la langue ---- */
.langswitch {
    display: inline-flex; align-items: stretch;
    border: 1px solid var(--line); border-radius: var(--radius-sm);
    overflow: hidden; background: var(--surface);
}
.langswitch__item {
    padding: 0 9px;
    display: inline-flex; align-items: center;
    font-size: 11.5px; font-weight: 700; letter-spacing: .03em;
    color: var(--ink-muted); text-decoration: none;
}
.langswitch__item + .langswitch__item { border-left: 1px solid var(--line); }
.langswitch__item:hover { background: var(--surface-alt); color: var(--ink); text-decoration: none; }
.langswitch__item.is-active { background: var(--navy); color: #fff; }

.auth .langswitch { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .22); }
.auth .langswitch__item { color: rgba(230, 236, 246, .72); }
.auth .langswitch__item + .langswitch__item { border-left-color: rgba(255, 255, 255, .22); }
.auth .langswitch__item:hover { background: rgba(255, 255, 255, .14); color: #fff; }
.auth .langswitch__item.is-active { background: rgba(255, 255, 255, .22); color: #fff; }

.iconbtn {
    position: relative;
    width: 36px; height: 36px;
    display: grid; place-items: center;
    border: 1px solid var(--line); border-radius: var(--radius-sm);
    background: var(--surface); color: var(--ink-soft);
}
.iconbtn:hover { background: var(--surface-alt); text-decoration: none; }
.iconbtn__badge {
    position: absolute; top: -6px; right: -6px;
    min-width: 18px; height: 18px; padding: 0 4px;
    display: grid; place-items: center;
    background: var(--danger); color: #fff;
    border-radius: 9px; font-size: 10.5px; font-weight: 700;
}

/* ------------------------------------------------------------- Menu */
.menu { position: relative; }
.menu__trigger { list-style: none; cursor: pointer; display: block; }
.menu__trigger::-webkit-details-marker { display: none; }

.menu__panel {
    position: absolute; right: 0; top: calc(100% + 8px);
    min-width: 230px;
    background: var(--surface);
    border: 1px solid var(--line); border-radius: var(--radius);
    box-shadow: var(--shadow); overflow: hidden; z-index: 50;
}
.menu__head { padding: 12px 14px; border-bottom: 1px solid var(--line); background: var(--surface-alt); }
.menu__head strong { display: block; font-size: 13.5px; }
.menu__head small { display: block; color: var(--ink-muted); font-size: 11.5px; }

.menu__item {
    display: block; width: 100%; text-align: left;
    padding: 10px 14px;
    background: none; border: 0;
    font: inherit; font-size: 13px; color: var(--ink); cursor: pointer;
}
.menu__item:hover { background: var(--surface-alt); text-decoration: none; }
.menu__item--danger { color: var(--danger); }

/* ------------------------------------------------------------- Content */
.content { flex: 1; padding: 22px; max-width: 1560px; width: 100%; }

.footer {
    display: flex; justify-content: space-between; align-items: center;
    gap: 12px; flex-wrap: wrap;
    padding: 16px 22px;
    border-top: 1px solid var(--line);
    color: var(--ink-muted); font-size: 12px;
}

/* ============================================================ Icones */
.icon {
    display: inline-block;
    background-repeat: no-repeat; background-position: center; background-size: contain;
}
.icon--home     { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e6ecf6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 10l9-7 9 7v10a1 1 0 0 1-1 1h-5v-7H9v7H4a1 1 0 0 1-1-1z'/%3E%3C/svg%3E"); }
.icon--folder   { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e6ecf6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 7a2 2 0 0 1 2-2h4l2 2h8a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'/%3E%3C/svg%3E"); }
.icon--plus     { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e6ecf6' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E"); }
.icon--users    { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e6ecf6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8' r='3.2'/%3E%3Cpath d='M3 20a6 6 0 0 1 12 0M16.5 5.2a3.2 3.2 0 0 1 0 5.6M18 20a5.5 5.5 0 0 0-2-4'/%3E%3C/svg%3E"); }
.icon--building { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e6ecf6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='3' width='11' height='18' rx='1'/%3E%3Cpath d='M15 8h4a1 1 0 0 1 1 1v11a1 1 0 0 1-1 1h-4M8 7h3M8 11h3M8 15h3'/%3E%3C/svg%3E"); }
.icon--gear     { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e6ecf6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M12 2v3M12 19v3M4.2 4.2l2.1 2.1M17.7 17.7l2.1 2.1M2 12h3M19 12h3M4.2 19.8l2.1-2.1M17.7 6.3l2.1-2.1'/%3E%3C/svg%3E"); }
.icon--shield   { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e6ecf6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l7 3v5c0 4.5-3 8-7 10-4-2-7-5.5-7-10V6z'/%3E%3Cpath d='M9 12l2 2 4-4'/%3E%3C/svg%3E"); }
.icon--chart    { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e6ecf6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20V4M4 20h16'/%3E%3Cpath d='M8 20v-6M12 20V8M16 20v-9M20 20v-4'/%3E%3C/svg%3E"); }
.icon--bell     { width: 18px; height: 18px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234b5565' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 15V10a6 6 0 1 0-12 0v5l-1.5 2.5h15z'/%3E%3Cpath d='M10 20a2 2 0 0 0 4 0'/%3E%3C/svg%3E"); }

/* ============================================================ Composants */

/* ---- En-tete de page ---- */
.page-head {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 16px; flex-wrap: wrap;
    margin-bottom: 18px;
}
.page-head__actions { display: flex; gap: 8px; flex-wrap: wrap; }

.breadcrumb {
    display: flex; align-items: center; gap: 7px;
    font-size: 12.5px; color: var(--ink-muted); margin-bottom: 5px;
}
.breadcrumb a { color: var(--ink-muted); }
.breadcrumb a:hover { color: var(--navy); }

/* ---- Cartes ---- */
.card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    padding: 18px;
    margin-bottom: 16px;
}
.card--narrow { max-width: 680px; }
.card--tight { padding: 14px; }
.card--info { background: var(--surface-alt); }
.card--danger { border-color: #f0c7cc; background: #fffafa; }
.card--danger .card__head { border-bottom: 1px solid #f6dde0; padding-bottom: 10px; }
.card--danger .h3 { color: var(--danger); }

.card__head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; flex-wrap: wrap;
    margin: -2px 0 14px;
}
.card__head .h3, .card__head .h4 { display: flex; align-items: center; gap: 8px; }

.card__foot {
    margin: 16px -18px -18px;
    padding: 14px 18px;
    border-top: 1px solid var(--line);
    background: var(--surface-alt);
    border-radius: 0 0 var(--radius) var(--radius);
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.card--tight .card__foot { margin: 14px -14px -14px; padding: 12px 14px; }

.stack > .card:last-child { margin-bottom: 0; }

/* ---- Grilles ---- */
.grid { display: grid; gap: 16px; }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid--sidebar { grid-template-columns: minmax(0, 1fr) 300px; align-items: start; }
.grid--status { grid-template-columns: minmax(0, 260px) minmax(0, 1fr) auto; align-items: end; }
.grid--upload { grid-template-columns: minmax(0, 240px) minmax(0, 1fr) minmax(0, 220px) auto; align-items: end; }

/* ---- Boutons ---- */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    padding: 8px 15px;
    font: inherit; font-size: 13.5px; font-weight: 550; line-height: 1.3;
    border: 1px solid transparent; border-radius: var(--radius-sm);
    cursor: pointer; text-align: center;
    transition: background .12s, border-color .12s, color .12s;
}
.btn:hover { text-decoration: none; }
.btn:disabled { opacity: .55; cursor: not-allowed; }

.btn--primary { background: var(--navy); color: #fff; }
.btn--primary:hover { background: var(--navy-light); }

.btn--success { background: var(--success); color: #fff; }
.btn--success:hover { background: #166b45; }

.btn--danger { background: var(--danger-bg); color: var(--danger); border-color: #f0c7cc; }
.btn--danger:hover { background: #f8dade; }

.btn--ghost { background: var(--surface); color: var(--ink-soft); border-color: var(--line-strong); }
.btn--ghost:hover { background: var(--surface-alt); color: var(--ink); }

.btn--block { width: 100%; }
.btn--sm { padding: 6px 12px; font-size: 12.5px; }
.btn--xs { padding: 4px 9px; font-size: 11.5px; }

.btnrow { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.btnrow form { display: inline; }

.link { color: var(--navy); font-size: 13px; font-weight: 500; }
.link--strong { font-weight: 650; }

/* ---- Badges ---- */
.badge {
    display: inline-flex; align-items: center;
    padding: 2px 8px;
    border-radius: 20px;
    font-size: 11.5px; font-weight: 600; line-height: 1.6;
    white-space: nowrap;
}
.badge--neutral  { background: var(--neutral-bg);  color: var(--neutral); }
.badge--info     { background: var(--info-bg);     color: var(--info); }
.badge--success  { background: var(--success-bg);  color: var(--success); }
.badge--warning  { background: var(--warning-bg);  color: var(--warning); }
.badge--danger   { background: var(--danger-bg);   color: var(--danger); }
.badge--progress { background: var(--progress-bg); color: var(--progress); }

.dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; }
.dot--success { background: var(--success); }
.dot--danger  { background: var(--danger); }
.dot--neutral { background: var(--line-strong); }

.stage-pill {
    display: inline-grid; place-items: center;
    width: 20px; height: 20px;
    background: var(--navy); color: #fff;
    border-radius: 50%; font-size: 11px; font-weight: 700;
    margin-right: 4px;
}

/* ---- Avatars ---- */
.avatar {
    display: inline-grid; place-items: center;
    width: 34px; height: 34px; flex: none;
    border-radius: 50%;
    color: #fff; font-size: 12.5px; font-weight: 700;
}
.avatar--sm { width: 28px; height: 28px; font-size: 11px; }

/* ---- Alertes ---- */
.flashes { margin-bottom: 16px; display: grid; gap: 8px; }

.alert {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 11px 14px;
    border: 1px solid; border-radius: var(--radius-sm);
    font-size: 13.5px;
}
.alert__text { flex: 1; }
.alert__text ul { margin: 6px 0 0; padding-left: 18px; }
.alert__close {
    background: none; border: 0; cursor: pointer;
    font-size: 18px; line-height: 1; color: inherit; opacity: .55; padding: 0 2px;
}
.alert__close:hover { opacity: 1; }

.alert--success { background: var(--success-bg); border-color: #bfe0cd; color: #115c3b; }
.alert--error   { background: var(--danger-bg);  border-color: #f0c7cc; color: #8a1f29; }
.alert--warning { background: var(--warning-bg); border-color: #f0dcb8; color: #7d5006; }
.alert--info    { background: var(--info-bg);    border-color: #c5dced; color: #164c73; }

/* ---- Indicateurs ---- */
.kpis {
    display: grid; gap: 12px;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    margin-bottom: 18px;
}
.kpi {
    background: var(--surface);
    border: 1px solid var(--line); border-radius: var(--radius);
    padding: 14px 16px;
    box-shadow: var(--shadow-sm);
}
.kpi__label { display: block; font-size: 11.5px; color: var(--ink-muted);
    text-transform: uppercase; letter-spacing: .05em; }
.kpi__value { display: block; font-size: 26px; font-weight: 700; line-height: 1.2; margin: 2px 0; }
.kpi__value--sm { font-size: 18px; }
.kpi__value--success { color: var(--success); }
.kpi__value--danger  { color: var(--danger); }
.kpi__value--info    { color: var(--info); }
.kpi__hint { font-size: 12px; color: var(--ink-muted); }

.minikpis { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.minikpi {
    display: block; padding: 12px 14px;
    background: var(--surface-alt);
    border: 1px solid var(--line); border-radius: var(--radius-sm);
    color: var(--ink);
}
.minikpi:hover { background: #eef2f8; text-decoration: none; }
.minikpi strong { display: block; font-size: 20px; }
.minikpi span { font-size: 12px; color: var(--ink-muted); }

/* ---- Barres de progression ---- */
.progress {
    display: inline-block; vertical-align: middle;
    width: 100%; max-width: 160px; height: 7px;
    background: var(--neutral-bg); border-radius: 4px; overflow: hidden;
}
.progress--lg { max-width: none; height: 10px; }
.progress__bar { display: block; height: 100%; border-radius: 4px; background: var(--navy); }
.progress__bar--success  { background: var(--success); }
.progress__bar--warning  { background: #d99b2a; }
.progress__bar--danger   { background: var(--danger); }
.progress__bar--info     { background: var(--info); }
.progress__bar--progress { background: var(--progress); }
.progress__bar--neutral  { background: var(--neutral); }
.progress__label { margin-left: 7px; font-size: 11.5px; color: var(--ink-muted); }

.bar { display: block; height: 6px; background: var(--neutral-bg); border-radius: 3px; overflow: hidden; }
.bar__fill { display: block; height: 100%; background: var(--navy-light); border-radius: 3px; }
.bar__fill--success  { background: var(--success); }
.bar__fill--warning  { background: #d99b2a; }
.bar__fill--danger   { background: var(--danger); }
.bar__fill--info     { background: var(--info); }
.bar__fill--progress { background: var(--progress); }
.bar__fill--neutral  { background: var(--neutral); }

/* ---- Statistiques ---- */
.chart { width: 100%; overflow-x: auto; }
.chart svg { width: 100%; min-width: 560px; height: auto; display: block; }
.chart__grid      { stroke: var(--line); stroke-width: 1; }
.chart__axisline  { stroke: var(--line-strong); stroke-width: 1; }
.chart__axis      { fill: var(--ink-muted); font-size: 10px; font-family: var(--font); }
.chart__value     { fill: var(--ink-soft); font-size: 10px; font-weight: 650; font-family: var(--font); }
.chart__bar       { fill: #9fb4d4; }
.chart__bar--done { fill: var(--navy); }

.barlist { list-style: none; margin: 0; padding: 0; }
.barlist__item {
    display: grid; align-items: center; gap: 10px;
    grid-template-columns: minmax(96px, 34%) minmax(0, 1fr) minmax(64px, auto);
    padding: 6px 0;
    border-bottom: 1px solid var(--line);
}
.barlist__item:last-child { border-bottom: 0; }
.barlist__label {
    font-size: 12.5px; color: var(--ink-soft);
    display: flex; align-items: center; gap: 5px;
    min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.barlist__value {
    font-size: 12.5px; font-weight: 650; text-align: right;
    font-variant-numeric: tabular-nums;
}

@media (max-width: 560px) {
    .barlist__item { grid-template-columns: minmax(80px, 42%) minmax(0, 1fr) auto; gap: 7px; }
    .barlist__label { font-size: 11.5px; }
}

/* ---- Tableaux ---- */
.table-wrap { overflow-x: auto; margin: 0 -18px; padding: 0 18px; }
.table-wrap--editor { max-height: none; }

.table { width: 100%; border-collapse: collapse; font-size: 13px; }
.table th, .table td {
    padding: 10px 11px;
    text-align: left; vertical-align: top;
    border-bottom: 1px solid var(--line);
}
.table thead th {
    background: var(--surface-alt);
    font-size: 11.5px; font-weight: 650;
    text-transform: uppercase; letter-spacing: .035em;
    color: var(--ink-soft);
    white-space: nowrap;
    border-bottom: 1px solid var(--line-strong);
    position: sticky; top: 0; z-index: 1;
}
.table tbody tr:hover { background: #fafbfd; }
.table tbody tr:last-child td { border-bottom: 0; }
.table tfoot th { background: var(--surface-alt); font-size: 12.5px; }

.table--compact th, .table--compact td { padding: 7px 9px; font-size: 12.5px; }
.table .num { text-align: right; font-variant-numeric: tabular-nums; }
.table .shrink { width: 1%; white-space: nowrap; }
.table .actions { width: 1%; white-space: nowrap; }
.table .actions form { display: inline-block; margin-left: 4px; }
.table .cell--progress { min-width: 130px; }
.table tr.is-archived { opacity: .55; }
.table tr.is-current { background: var(--info-bg); }
.table tr.row--differs { background: var(--warning-bg); }

.cell__sub { margin-top: 3px; display: flex; gap: 5px; align-items: center; flex-wrap: wrap; font-size: 11.5px; }

.table--summary td, .table--summary th { font-size: 12px; }

/* Editeur de summary table */
.table--editor { font-size: 12.5px; min-width: 1180px; }
.table--editor td { padding: 6px 5px; }
.table--editor input, .table--editor textarea {
    width: 100%; min-width: 72px;
    padding: 5px 7px;
    border: 1px solid var(--line-strong); border-radius: 5px;
    font: inherit; font-size: 12.5px; background: var(--surface);
}
.table--editor textarea { resize: vertical; min-height: 44px; }
.table--editor input:focus, .table--editor textarea:focus { border-color: var(--accent); }
.table--editor input[readonly], .table--editor textarea[readonly] {
    background: var(--surface-alt); color: var(--ink-soft);
}
.table--editor .row-number { color: var(--ink-muted); font-weight: 600; padding-top: 12px; }
.cell--caf { display: table-cell; }
.cell--caf input { margin-bottom: 4px; }
.input--tiny { max-width: 72px; min-width: 56px !important; }

.totals {
    margin-top: 12px; padding: 10px 14px;
    background: var(--surface-alt); border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    font-size: 13px; color: var(--ink-soft);
}

/* ---- Listes ---- */
.list { list-style: none; margin: 0; padding: 0; }
.list__item {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--line);
}
.list__item:last-child { border-bottom: 0; padding-bottom: 0; }
.list__main { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1; color: var(--ink); }
.list__main:hover { text-decoration: none; }
.list__main > span { display: flex; flex-direction: column; min-width: 0; }
.list__main strong { font-size: 13.5px; }
.list__main small { color: var(--ink-muted); font-size: 12px; }
.list__meta { display: flex; align-items: center; gap: 6px; flex: none; flex-wrap: wrap; }

.minilist { list-style: none; margin: 0; padding: 0; font-size: 12.5px; }
.minilist li {
    display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
    padding: 7px 0; border-bottom: 1px solid var(--line);
}
.minilist li:last-child { border-bottom: 0; }

.bullets { margin: 6px 0 0; padding-left: 18px; color: var(--ink-soft); }
.bullets li { margin-bottom: 4px; }

.deflist { display: grid; grid-template-columns: minmax(130px, 42%) minmax(0, 1fr); gap: 0; margin: 0; }
.deflist dt {
    padding: 7px 0; font-size: 12px; color: var(--ink-muted);
    border-bottom: 1px solid var(--line);
}
.deflist dd {
    padding: 7px 0; margin: 0; font-size: 13px; font-weight: 500;
    border-bottom: 1px solid var(--line); word-break: break-word;
}
.deflist dt:last-of-type, .deflist dd:last-of-type { border-bottom: 0; }
.deflist--tight dt, .deflist--tight dd { padding: 5px 0; font-size: 12px; }

.empty {
    padding: 22px 14px; text-align: center;
    color: var(--ink-muted); font-size: 13.5px;
    background: var(--surface-alt);
    border: 1px dashed var(--line-strong); border-radius: var(--radius-sm);
}

.chips { display: flex; gap: 7px; flex-wrap: wrap; }
.chip {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 9px;
    background: var(--surface); border: 1px solid var(--line);
    border-radius: 20px; font-size: 12px; color: var(--ink);
}
.chip:hover { background: var(--surface-alt); text-decoration: none; }
.chip__count { font-weight: 700; }

/* ---- Etapes (stepper) ---- */
.stepper {
    list-style: none; margin: 0 0 18px; padding: 0;
    display: grid; gap: 10px;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}
.step {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 12px 14px;
    background: var(--surface);
    border: 1px solid var(--line); border-radius: var(--radius);
    border-left: 3px solid var(--line-strong);
}
.step__num {
    display: grid; place-items: center;
    width: 24px; height: 24px; flex: none;
    background: var(--neutral-bg); color: var(--neutral);
    border-radius: 50%; font-size: 12px; font-weight: 700;
}
.step__body { display: flex; flex-direction: column; min-width: 0; }
.step__body strong { font-size: 13px; }
.step__body small { color: var(--ink-muted); font-size: 11.5px; line-height: 1.45; }

.step--done { border-left-color: var(--success); }
.step--done .step__num { background: var(--success-bg); color: var(--success); }
.step--current { border-left-color: var(--navy); background: #fbfcfe; box-shadow: var(--shadow-sm); }
.step--current .step__num { background: var(--navy); color: #fff; }
.step--current .step__body strong { color: var(--navy); }

.stages { list-style: none; margin: 0; padding: 0; }
.stages__item { display: flex; align-items: center; gap: 11px; padding: 8px 0; }
.stages__num {
    display: grid; place-items: center;
    width: 22px; height: 22px; flex: none;
    background: var(--neutral-bg); color: var(--neutral);
    border-radius: 50%; font-size: 11px; font-weight: 700;
}
.stages__body { flex: 1; min-width: 0; }
.stages__label { display: block; font-size: 12.5px; margin-bottom: 4px; }
.stages__count { font-size: 14px; font-weight: 700; min-width: 28px; text-align: right; }

/* ---- Onglets ---- */
.tabs {
    display: flex; gap: 2px; flex-wrap: wrap;
    border-bottom: 1px solid var(--line);
    margin-bottom: 18px;
}
.tab {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 9px 14px;
    font-size: 13.5px; font-weight: 550; color: var(--ink-soft);
    border: 1px solid transparent; border-bottom: 2px solid transparent;
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
    margin-bottom: -1px;
}
.tab:hover { background: var(--surface-alt); color: var(--ink); text-decoration: none; }
.tab.is-active {
    background: var(--surface);
    border-color: var(--line); border-bottom-color: var(--navy);
    color: var(--navy); font-weight: 650;
}
.tab__count {
    padding: 0 6px;
    background: var(--neutral-bg); color: var(--neutral);
    border-radius: 10px; font-size: 11px; font-weight: 700;
}
.tab.is-active .tab__count { background: var(--info-bg); color: var(--info); }

/* ---- Fiche dossier ---- */
.dossier-head {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 18px; flex-wrap: wrap;
    padding: 16px 18px;
    background: var(--surface);
    border: 1px solid var(--line); border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    margin-bottom: 16px;
}
.dossier-head__title {
    display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
    font-size: 22px; font-weight: 700; letter-spacing: -.01em;
}
.dossier-head__sub { margin: 5px 0 0; font-size: 12.5px; color: var(--ink-muted); }
.dossier-head__side { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.dossier-head__status { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.dossier-head__actions { display: flex; gap: 7px; flex-wrap: wrap; }
.dossier-head__actions form { display: inline; }

/* ---- Checklist ---- */
.checklist { list-style: none; margin: 0; padding: 0; }
.checklist__item {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid var(--line);
    font-size: 13px; color: var(--ink-soft);
}
.checklist__item:last-child { border-bottom: 0; }
.checklist__mark {
    width: 17px; height: 17px; flex: none;
    border: 2px solid var(--line-strong); border-radius: 4px;
}
.checklist__item.is-done { color: var(--ink); }
.checklist__item.is-done .checklist__mark {
    background: var(--success); border-color: var(--success);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E");
    background-size: 13px; background-position: center; background-repeat: no-repeat;
}
.checklist__meta { margin-left: auto; font-size: 12px; color: var(--ink-muted); font-weight: 600; }

/* ---- Jalons ---- */
.milestones { list-style: none; margin: 0; padding: 0; }
.milestone {
    display: flex; align-items: flex-start; gap: 12px;
    padding: 11px 0;
    border-bottom: 1px solid var(--line);
}
.milestone:last-child { border-bottom: 0; }
.milestone__mark {
    display: grid; place-items: center;
    width: 22px; height: 22px; flex: none;
    border: 2px solid var(--line-strong); border-radius: 50%;
    font-size: 12px; font-weight: 700; color: #fff;
}
.milestone--done .milestone__mark    { background: var(--success); border-color: var(--success); }
.milestone--in_progress .milestone__mark { border-color: var(--progress); background: var(--progress-bg); }
.milestone--blocked .milestone__mark { background: var(--danger); border-color: var(--danger); }
.milestone__body { flex: 1; min-width: 0; }
.milestone__body strong { font-size: 13.5px; }
.milestone__meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 3px; }
.milestone__comment { margin: 5px 0 0; font-size: 12.5px; color: var(--ink-soft); }
.milestone__form { display: flex; gap: 6px; flex: none; align-items: center; flex-wrap: wrap; }
.milestone__form select, .milestone__form input {
    padding: 5px 8px; font: inherit; font-size: 12px;
    border: 1px solid var(--line-strong); border-radius: 5px;
}
.milestone__form input { width: 150px; }

/* ---- Chronologie ---- */
.timeline { list-style: none; margin: 0; padding: 0 0 0 16px; }
.timeline__item {
    position: relative;
    padding: 0 0 16px 16px;
    border-left: 2px solid var(--line);
}
.timeline__item:last-child { border-left-color: transparent; padding-bottom: 0; }
.timeline__item::before {
    content: ''; position: absolute; left: -7px; top: 3px;
    width: 12px; height: 12px;
    background: var(--surface);
    border: 2px solid var(--neutral); border-radius: 50%;
}
.timeline__item--success::before  { border-color: var(--success); }
.timeline__item--warning::before  { border-color: #d99b2a; }
.timeline__item--danger::before   { border-color: var(--danger); }
.timeline__item--info::before     { border-color: var(--info); }
.timeline__item--progress::before { border-color: var(--progress); }

.timeline__head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 10px; flex-wrap: wrap;
}
.timeline__time { font-size: 11.5px; color: var(--ink-muted); }
.timeline__body { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; margin-top: 3px; }
.timeline__comment {
    margin: 6px 0 0; padding: 7px 10px;
    background: var(--surface-alt); border-radius: var(--radius-sm);
    font-size: 12.5px; color: var(--ink-soft);
}

/* ---- Notifications ---- */
.notifs { list-style: none; margin: 0; padding: 0; }
.notif {
    display: flex; align-items: flex-start; gap: 11px;
    padding: 12px 0;
    border-bottom: 1px solid var(--line);
}
.notif:last-child { border-bottom: 0; }
.notif.is-unread { background: #fbfcff; }
.notif__dot { width: 9px; height: 9px; flex: none; margin-top: 6px; border-radius: 50%; background: var(--neutral); }
.notif__dot--info { background: var(--info); }
.notif__dot--warning { background: #d99b2a; }
.notif__dot--success { background: var(--success); }
.notif__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; color: var(--ink); }
.notif__body:hover { text-decoration: none; }
.notif__text { font-size: 12.5px; color: var(--ink-soft); }

/* ---- Fichiers ---- */
.filecell { display: flex; align-items: flex-start; gap: 9px; }
.filecell > span { display: flex; flex-direction: column; min-width: 0; }
.filecell strong { font-size: 12.5px; word-break: break-word; }
.filecell small { font-size: 11.5px; }

.file-icon {
    display: grid; place-items: center;
    width: 32px; height: 32px; flex: none;
    border-radius: 6px;
    font-size: 9.5px; font-weight: 800; letter-spacing: .02em;
    color: #fff; background: var(--neutral);
}
.file-icon--pdf { background: #b5313f; }
.file-icon--doc { background: #2a5699; }
.file-icon--xls { background: #1d7044; }
.file-icon--img { background: #7a4f9c; }
.file-icon--zip { background: #8a6d1f; }

.package {
    display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
    padding: 16px;
    background: var(--surface-alt);
    border: 1px solid var(--line); border-radius: var(--radius);
}
.package__icon {
    display: grid; place-items: center;
    width: 52px; height: 52px; flex: none;
    background: #b5313f; color: #fff;
    border-radius: 9px; font-size: 13px; font-weight: 800;
}
.package__body { flex: 1; min-width: 200px; }
.package__body strong { font-size: 14px; word-break: break-word; }
.package__body p { margin: 3px 0 0; font-size: 12.5px; }
.package__actions { display: flex; flex-direction: column; gap: 7px; }

.ftlbar {
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px; flex-wrap: wrap;
    padding: 13px 15px; margin-bottom: 14px;
    background: var(--surface-alt);
    border: 1px solid var(--line); border-radius: var(--radius-sm);
}
.ftlbar__file { display: flex; align-items: center; gap: 10px; min-width: 0; }
.ftlbar__file > span { display: flex; flex-direction: column; min-width: 0; }
.ftlbar__action { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

/* ---- Cachet et signature ---- */
.stampbox {
    display: grid; gap: 18px;
    grid-template-columns: 220px minmax(0, 1fr);
    align-items: start;
}
.stampbox__preview {
    display: grid; place-items: center;
    min-height: 150px; padding: 12px;
    background:
        linear-gradient(45deg, #f1f3f7 25%, transparent 25%, transparent 75%, #f1f3f7 75%),
        linear-gradient(45deg, #f1f3f7 25%, #fff 25%, #fff 75%, #f1f3f7 75%);
    background-size: 16px 16px;
    background-position: 0 0, 8px 8px;
    border: 1px solid var(--line); border-radius: var(--radius-sm);
}
.stampbox__preview img { max-width: 100%; height: auto; max-height: 190px; }
.stampbox__body { min-width: 0; }
.stampbox__body form { margin-bottom: 10px; }

/* Apercu du logo aux deux endroits ou il apparait, a leur taille reelle */
.stampbox__preview--logo {
    display: grid; gap: 10px; place-items: stretch;
    background: none; border: 0; padding: 0; min-height: 0;
}
.logoproof {
    display: grid; gap: 8px; place-items: center;
    padding: 16px 12px 10px;
    background: var(--navy);
    border-radius: var(--radius-sm);
}
.logoproof img { max-width: 100%; height: auto; }
.logoproof__line  { width: 176px; max-height: 46px; object-fit: contain; }
.logoproof__block { width: 196px; max-height: 92px; object-fit: contain; }
.logoproof small {
    font-size: 10.5px; letter-spacing: .07em; text-transform: uppercase;
    color: rgba(230, 236, 246, .55);
}

@media (max-width: 820px) {
    .stampbox { grid-template-columns: minmax(0, 1fr); }
}

.rawtext {
    margin: 0; padding: 14px;
    max-height: 560px; overflow: auto;
    background: #1c2230; color: #d8dee9;
    border-radius: var(--radius-sm);
    font-family: var(--mono); font-size: 12px; line-height: 1.6;
    white-space: pre-wrap; word-break: break-word;
}

/* ---- Formulaires ---- */
.form { display: block; }

.field { margin-bottom: 14px; }
.field:last-child { margin-bottom: 0; }
.field > label {
    display: block; margin-bottom: 5px;
    font-size: 12.5px; font-weight: 600; color: var(--ink-soft);
}
.field > label em { font-weight: 400; font-style: italic; }
.field--submit { display: flex; gap: 8px; align-items: flex-end; }
.field--highlight {
    padding: 13px 15px;
    background: var(--info-bg);
    border: 1px solid #c5dced; border-radius: var(--radius-sm);
}

.req { color: var(--danger); }

input[type="text"], input[type="email"], input[type="password"], input[type="search"],
input[type="date"], input[type="number"], input[type="tel"], select, textarea {
    width: 100%;
    padding: 8px 11px;
    border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
    font: inherit; font-size: 13.5px; color: var(--ink);
    background: var(--surface);
}
input:focus, select:focus, textarea:focus { border-color: var(--accent); outline-offset: 1px; }
input[readonly], input:disabled, select:disabled, textarea[readonly] {
    background: var(--surface-alt); color: var(--ink-soft);
}
textarea { resize: vertical; min-height: 64px; }

input[type="file"] {
    width: 100%;
    padding: 7px 9px;
    border: 1px dashed var(--line-strong); border-radius: var(--radius-sm);
    font: inherit; font-size: 13px; background: var(--surface-alt);
}

.hint { display: block; margin-top: 4px; font-size: 11.5px; color: var(--ink-muted); line-height: 1.5; }

.check {
    display: inline-flex; align-items: center; gap: 7px;
    font-size: 13px; font-weight: 400; color: var(--ink-soft); cursor: pointer;
}
.check input { width: auto; margin: 0; }

.form__actions {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    margin-top: 16px;
}
.form__actions--sticky {
    position: sticky; bottom: 0; z-index: 10;
    padding: 13px 18px; margin: 16px -18px -18px;
    background: rgba(255, 255, 255, .95);
    backdrop-filter: blur(6px);
    border-top: 1px solid var(--line);
    border-radius: 0 0 var(--radius) var(--radius);
}
.form > .form__actions--sticky {
    margin: 16px 0 0; border: 1px solid var(--line); border-radius: var(--radius);
}
.form__links { margin-top: 14px; text-align: center; font-size: 13px; }

.filters { padding: 15px 18px; }
.filters__grid {
    display: grid; gap: 12px;
    grid-template-columns: repeat(auto-fit, minmax(165px, 1fr));
}
.filters__foot {
    display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
    margin-top: 12px; padding-top: 12px;
    border-top: 1px solid var(--line);
}
.filters__actions { margin-left: auto; display: flex; gap: 8px; }

.statusgrid {
    display: grid; gap: 9px;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    margin-bottom: 14px;
}
.radiocard {
    display: flex; align-items: flex-start; gap: 9px;
    padding: 11px 13px;
    background: var(--surface);
    border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
    cursor: pointer;
}
.radiocard:hover { background: var(--surface-alt); }
.radiocard input { margin-top: 2px; width: auto; }
.radiocard__body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.radiocard__body small { font-size: 11.5px; color: var(--ink-muted); }
.radiocard:has(input:checked) { border-color: var(--navy); background: var(--info-bg); }

/* ---- Pagination ---- */
.pagination {
    display: flex; align-items: center; gap: 4px; flex-wrap: wrap;
    margin-top: 16px; padding-top: 14px;
    border-top: 1px solid var(--line);
}
.pagination__link {
    display: inline-block;
    padding: 6px 11px;
    border: 1px solid var(--line); border-radius: var(--radius-sm);
    font-size: 12.5px; color: var(--ink-soft); background: var(--surface);
}
.pagination__link:hover { background: var(--surface-alt); text-decoration: none; }
.pagination__link.is-current {
    background: var(--navy); color: #fff; border-color: var(--navy); font-weight: 650;
}
.pagination__gap { padding: 0 4px; color: var(--ink-muted); }

/* ============================================================ Connexion */
.auth {
    margin: 0; min-height: 100vh;
    display: grid; place-items: center;
    padding: 28px 18px;
    background:
        radial-gradient(1100px 520px at 12% -8%, #1d3f74 0%, transparent 62%),
        linear-gradient(160deg, var(--navy-dark) 0%, #091a33 100%);
}
.auth__wrap { width: 100%; max-width: 432px; }

.auth__brand { text-align: center; color: #e6ecf6; margin-bottom: 22px; }
.auth__logo { margin: 0 0 14px; line-height: 0; }
.auth__logo img {
    width: 218px; max-width: 100%; height: auto;
    max-height: 120px; object-fit: contain;
}
.auth__brand p { margin: 5px 0 0; font-size: 13px; color: rgba(230, 236, 246, .66); }

.auth__card {
    background: var(--surface);
    border-radius: 14px;
    padding: 26px;
    box-shadow: 0 20px 50px rgba(4, 12, 28, .34);
}
.auth__title { font-size: 18px; margin-bottom: 5px; }
.auth__intro { font-size: 13px; color: var(--ink-muted); margin-bottom: 18px; }

.auth__foot { margin-top: 20px; text-align: center; font-size: 12px; color: rgba(230, 236, 246, .58); }
.auth__foot p { margin: 0 0 6px; }
.auth__foot .muted { color: rgba(230, 236, 246, .42); }

.page-centered {
    margin: 0; min-height: 100vh;
    display: grid; place-items: center; padding: 24px;
    background: var(--bg); font-family: var(--font); color: var(--ink);
}
.error-code { font-size: 46px; font-weight: 800; color: var(--line-strong); line-height: 1; }

/* ============================================================ Responsive */
@media (max-width: 1240px) {
    .grid--sidebar { grid-template-columns: minmax(0, 1fr); }
    .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .grid--upload { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 1000px) {
    .grid--2, .grid--3 { grid-template-columns: minmax(0, 1fr); }
    .grid--status { grid-template-columns: minmax(0, 1fr); }
    .topbar__search { display: none; }
}

@media (max-width: 820px) {
    .sidebar {
        transform: translateX(-100%);
        transition: transform .22s ease;
        box-shadow: 0 0 40px rgba(0, 0, 0, .3);
    }
    body.nav-open .sidebar { transform: translateX(0); }
    .main { margin-left: 0; }
    .topbar__burger { display: flex; }
    .content { padding: 16px; }
    .card { padding: 15px; }
    .card__foot { margin: 14px -15px -15px; padding: 12px 15px; }
    .table-wrap { margin: 0 -15px; padding: 0 15px; }
    .form__actions--sticky { margin: 14px -15px -15px; padding: 12px 15px; }
    .dossier-head { flex-direction: column; }
    .dossier-head__side { align-items: flex-start; width: 100%; }
    .grid--4 { grid-template-columns: minmax(0, 1fr); }
    .deflist { grid-template-columns: minmax(0, 1fr); }
    .deflist dt { padding-bottom: 0; border-bottom: 0; }
    .deflist dd { padding-top: 2px; }
    .milestone { flex-wrap: wrap; }
    .milestone__form { width: 100%; }
    .milestone__form input { flex: 1; width: auto; }
}

@media (max-width: 560px) {
    .page-head { flex-direction: column; }
    .page-head__actions { width: 100%; }
    .page-head__actions .btn { flex: 1; }
    .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .kpi__value { font-size: 22px; }
    .dossier-head__title { font-size: 19px; }
    .stepper { grid-template-columns: minmax(0, 1fr); }
    .package__actions { width: 100%; }
    .package__actions .btn { width: 100%; }
}

/* ============================================================ Impression */
@media print {
    .sidebar, .topbar, .footer, .tabs, .page-head__actions,
    .form__actions, .filters, .btn, .alert__close { display: none !important; }
    .main { margin-left: 0; }
    body { background: #fff; font-size: 11pt; }
    .card { border: 1px solid #ccc; box-shadow: none; page-break-inside: avoid; }
    .table-wrap { overflow: visible; margin: 0; padding: 0; }
    a { color: #000; text-decoration: none; }
}