/* ==========================================================================
   Copilote Projet — design system
   Calqué sur le langage visuel de monday.com (couleurs de statut, board,
   sidebar, chips) pour que l'équipe ne change pas de repères visuels en
   passant de Monday au Copilote. Voir docs/CHANGELOG-DECISIONS.md.
   ========================================================================== */

/* --------------------------------------------------------------- 1. Tokens */
:root {
    /* Surfaces & texte (palette monday) */
    --bg:               #f6f7fb;
    --surface:          #ffffff;
    --surface-hover:    #f5f6f8;
    --surface-selected: #e6f1fd;
    --text:             #323338;
    --text-secondary:   #676879;
    --text-placeholder: #9699a6;
    --border:           #d0d4e4;
    --border-soft:      #e6e9ef;

    /* Marque */
    --primary:          #0073ea;
    --primary-hover:    #0060b9;
    --primary-soft:     #cce5ff;
    --primary-tint:     #e6f1fd;

    /* Couleurs de statut monday */
    --c-grey:           #c4c4c4;
    --c-orange:         #fdab3d;
    --c-red:            #e2445c;
    --c-green:          #00c875;
    --c-purple:         #a25ddc;
    --c-light-blue:     #579bfc;
    --c-dark-blue:      #0086c0;
    --c-pink:           #ff158a;

    /* Élévation */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .06);
    --shadow:    0 4px 12px rgba(0, 0, 0, .08);
    --shadow-lg: 0 6px 20px rgba(0, 0, 0, .14);

    --radius:    8px;
    --radius-sm: 4px;

    --sidebar-w: 248px;
    --topbar-h:  56px;

    --font: "Figtree", "Poppins", "Roboto", -apple-system, BlinkMacSystemFont,
            "Segoe UI", Helvetica, Arial, sans-serif;

    /* Les bandes du flux cumulé (docs/12, lot 6).

       Elles ne reprennent PAS les couleurs des pastilles de statut, et ce
       n'est pas un oubli : le validateur de palette mesure « À tester
       (dev) » et « À valider (PO) », deux bleus du board, à ΔE 11,7 en
       vision normale et 4,1 en deutéranopie. Sur des pastilles portant leur
       libellé, sans conséquence ; sur des bandes empilées où la couleur est
       le seul encodage, illisible.

       Le gris échoue volontairement le plancher de chroma : « En file »
       n'est pas une activité, c'est une attente, et elle doit lire neutre. */
    --phase-file:          #98a0ac;
    --phase-developpement: #c9770a;
    --phase-bloque:        #8b46c9;
    --phase-verification:  #00688f;
    --phase-termine:       #12915a;
}

/* ------------------------------------------------- 1b. Thème sombre (lot 8) */
/*
   1 310 lignes de CSS et pas un seul `prefers-color-scheme`, pour un outil
   que des développeurs ouvrent toute la journée à côté de leur éditeur :
   c'était le premier reproche qu'on allait entendre (docs/12, lot 8).

   Tout passe par les tokens du bloc précédent — c'est ce qui rend le thème
   possible en une cinquantaine de lignes plutôt qu'en une réécriture. Les
   `#fff` qui restent ailleurs dans ce fichier sont du texte POSÉ SUR une
   couleur pleine (boutons, pastilles, avatars) : ils restent blancs dans
   les deux thèmes, et c'est correct.

   Le thème suit le système, et `data-theme` permet de le forcer : quelqu'un
   qui travaille en clair sur un système sombre doit pouvoir le dire — le
   sélecteur d'interface viendra, la mécanique est prête.
*/
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        /* Seule la bande « en vérification » change de pas : le sien passe
           sous 3:1 sur fond sombre. Les autres tiennent, et les garder
           identiques préserve la reconnaissance d'un thème à l'autre. */
        --phase-verification: #3d8fd6;

        --bg:               #12141a;
        --surface:          #1b1e26;
        --surface-hover:    #232732;
        --surface-selected: #1c2b40;
        --text:             #e6e8ee;
        --text-secondary:   #a4a9b8;
        --text-placeholder: #7b8194;
        --border:           #333846;
        --border-soft:      #262a34;

        --primary:          #4c9aff;
        --primary-hover:    #6cb0ff;
        --primary-soft:     #1e3357;
        --primary-tint:     #17253c;

        /* Les couleurs de statut sont assombries : les valeurs monday sont
           calibrées pour un fond blanc et brûlent sur un fond sombre. Elles
           restent reconnaissables — c'est bien le même vert « Terminé ». */
        --c-grey:           #8f95a3;
        --c-orange:         #d9903a;
        --c-red:            #e05a70;
        --c-green:          #2aa96f;
        --c-purple:         #9a68cf;
        --c-light-blue:     #5b93e0;
        --c-dark-blue:      #2b8ec2;
        --c-pink:           #e0468c;

        /* Sur fond sombre, une ombre légère ne se voit pas : c'est le
           contraste de la bordure qui porte l'élévation. */
        --shadow-sm: 0 1px 2px rgba(0, 0, 0, .5);
        --shadow:    0 4px 12px rgba(0, 0, 0, .55);
        --shadow-lg: 0 6px 20px rgba(0, 0, 0, .65);

        color-scheme: dark;
    }
}

/* Le thème forcé, dans les deux sens, pour le jour où l'interface le propose. */
:root[data-theme="dark"] {
    --phase-verification: #3d8fd6;
    --bg:               #12141a;
    --surface:          #1b1e26;
    --surface-hover:    #232732;
    --surface-selected: #1c2b40;
    --text:             #e6e8ee;
    --text-secondary:   #a4a9b8;
    --text-placeholder: #7b8194;
    --border:           #333846;
    --border-soft:      #262a34;
    --primary:          #4c9aff;
    --primary-hover:    #6cb0ff;
    --primary-soft:     #1e3357;
    --primary-tint:     #17253c;
    --c-grey:           #8f95a3;
    --c-orange:         #d9903a;
    --c-red:            #e05a70;
    --c-green:          #2aa96f;
    --c-purple:         #9a68cf;
    --c-light-blue:     #5b93e0;
    --c-dark-blue:      #2b8ec2;
    --c-pink:           #e0468c;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .5);
    --shadow:    0 4px 12px rgba(0, 0, 0, .55);
    --shadow-lg: 0 6px 20px rgba(0, 0, 0, .65);
    color-scheme: dark;
}

/* ----------------------------------------------------------- 2. Reset/base */
*, *::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.45;
    color: var(--text);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { margin: 0; font-weight: 600; line-height: 1.25; }
h1 { font-size: 24px; }
h2 { font-size: 18px; }
h3 { font-size: 15px; }
p  { margin: 0 0 12px; }
p:last-child { margin-bottom: 0; }

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

code {
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
    font-size: 12.5px;
    background: var(--surface-hover);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-sm);
    padding: 1px 5px;
    word-break: break-all;
}

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

.skip-link {
    position: absolute;
    left: -9999px;
    top: 8px;
    z-index: 100;
    background: var(--surface);
    padding: 10px 16px;
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow);
}
.skip-link:focus { left: 8px; }

/* -------------------------------------------------------------- 3. Layout */
.app { display: flex; min-height: 100vh; }

.sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    width: var(--sidebar-w);
    background: var(--surface);
    border-right: 1px solid var(--border-soft);
    display: flex;
    flex-direction: column;
    z-index: 40;
}

.sidebar__brand {
    display: flex;
    align-items: center;
    gap: 10px;
    height: var(--topbar-h);
    padding: 0 16px;
    border-bottom: 1px solid var(--border-soft);
    flex: 0 0 auto;
}
.sidebar__brand:hover { text-decoration: none; }
.brand-mark {
    width: 28px; height: 28px;
    flex: 0 0 28px;
    border-radius: 6px;
    background: linear-gradient(135deg, #0073ea 0%, #a25ddc 100%);
    display: grid; place-items: center;
    color: #fff; font-weight: 700; font-size: 14px;
}
.brand-name { font-weight: 700; font-size: 15px; color: var(--text); letter-spacing: -.2px; }

.sidebar__nav { flex: 1 1 auto; overflow-y: auto; padding: 12px 8px; }
.nav-section { margin-bottom: 18px; }
.nav-section__title {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--text-placeholder);
    padding: 0 10px 6px;
}
.nav-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    margin-bottom: 2px;
    border-radius: var(--radius-sm);
    color: var(--text);
    font-weight: 500;
}
.nav-item:hover { background: var(--surface-hover); text-decoration: none; }
.nav-item svg { flex: 0 0 18px; color: var(--text-secondary); }
.nav-item.is-active {
    background: var(--surface-selected);
    color: var(--primary);
    font-weight: 600;
}
.nav-item.is-active svg { color: var(--primary); }

.sidebar__footer { flex: 0 0 auto; border-top: 1px solid var(--border-soft); padding: 10px 8px; }

.main {
    flex: 1 1 auto;
    min-width: 0;
    margin-left: var(--sidebar-w);
    display: flex;
    flex-direction: column;
}

.topbar {
    position: sticky;
    top: 0;
    z-index: 30;
    height: var(--topbar-h);
    background: var(--surface);
    border-bottom: 1px solid var(--border-soft);
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 24px;
}
.topbar__spacer { flex: 1 1 auto; }

.breadcrumb { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-secondary); min-width: 0; }
.breadcrumb a { color: var(--text-secondary); }
.breadcrumb a:hover { color: var(--primary); }
.breadcrumb__sep { color: var(--border); }
.breadcrumb__current { color: var(--text); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.burger {
    display: none;
    background: none; border: 0; padding: 6px; border-radius: var(--radius-sm);
    color: var(--text-secondary); cursor: pointer;
}
.burger:hover { background: var(--surface-hover); }

.content { padding: 24px; width: 100%; max-width: 1320px; }

.page-head {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}
.page-head__text { flex: 1 1 320px; min-width: 0; }
.page-head__title { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.page-head__sub { color: var(--text-secondary); font-size: 13.5px; margin-top: 6px; max-width: 78ch; }
.page-head__actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

/* --------------------------------------------------------------- 4. Cartes */
.card {
    background: var(--surface);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    padding: 20px;
    margin-bottom: 16px;
}
.card--narrow { max-width: 560px; }
.card--flush { padding: 0; overflow: hidden; }

.card__head {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}
.card--flush .card__head { padding: 16px 20px 14px; margin-bottom: 0; }
.card__head h2 { display: flex; align-items: center; gap: 8px; }
.card__head .spacer { flex: 1 1 auto; }
.card__hint { color: var(--text-secondary); font-size: 13px; margin-top: -4px; margin-bottom: 14px; max-width: 82ch; }
.card--flush .card__hint { padding: 0 20px; }
.card__foot { border-top: 1px solid var(--border-soft); padding: 14px 20px; background: #fbfcfe; }

.count-pill {
    display: inline-block;
    background: var(--surface-hover);
    color: var(--text-secondary);
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    padding: 1px 9px;
}

/* -------------------------------------------------------------- 5. Boutons */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    height: 34px;
    padding: 0 16px;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    background: var(--primary);
    color: #fff;
    font: inherit;
    font-weight: 500;
    font-size: 14px;
    cursor: pointer;
    white-space: nowrap;
    transition: background .12s ease, border-color .12s ease, color .12s ease;
}
.btn:hover { background: var(--primary-hover); text-decoration: none; color: #fff; }
.btn:disabled, .btn[disabled] { background: var(--border); color: #fff; cursor: not-allowed; }

.btn--secondary { background: transparent; border-color: var(--border); color: var(--text); }
.btn--secondary:hover { background: var(--surface-hover); border-color: var(--text-placeholder); color: var(--text); }
.btn--secondary:disabled { background: transparent; border-color: var(--border-soft); color: var(--text-placeholder); }

.btn--ghost { background: transparent; color: var(--text-secondary); }
.btn--ghost:hover { background: var(--surface-hover); color: var(--text); }

.btn--danger { background: var(--c-red); }
.btn--danger:hover { background: #c9394f; }

.btn--positive { background: var(--c-green); }
.btn--positive:hover { background: #00a75f; }

.btn--sm { height: 28px; padding: 0 10px; font-size: 13px; }
.btn--block { width: 100%; }
.btn svg { flex: 0 0 auto; }

.btn-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* -------------------------------------------------------- 6. Formulaires */
.field { margin-bottom: 16px; }
.field:last-child { margin-bottom: 0; }
.field__label, label.field__label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 5px;
}
.field__label .req, .field__label.required::after { color: var(--c-red); }
.field__label.required::after { content: " *"; }

.input, input[type="text"], input[type="email"], input[type="password"],
input[type="date"], input[type="number"], input[type="url"], select, textarea {
    width: 100%;
    font: inherit;
    font-size: 14px;
    color: var(--text);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 7px 10px;
    min-height: 34px;
    transition: border-color .12s ease, box-shadow .12s ease;
}
textarea { min-height: 90px; resize: vertical; line-height: 1.5; }
select { appearance: none; padding-right: 30px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23676879' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 8px center;
}
.input:hover, input:hover:not([type="checkbox"]):not([type="radio"]), select:hover, textarea:hover { border-color: var(--text-placeholder); }
.input:focus, input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 1px var(--primary);
}
input::placeholder, textarea::placeholder { color: var(--text-placeholder); }
input[type="file"] { border: 1px dashed var(--border); background: #fbfcfe; padding: 10px; cursor: pointer; }

.field__help { color: var(--text-secondary); font-size: 12.5px; margin: 5px 0 0; }
.field__errors { list-style: none; margin: 6px 0 0; padding: 0; }
.field__errors li { color: var(--c-red); font-size: 12.5px; }
.field--invalid .input, .field--invalid input, .field--invalid select, .field--invalid textarea { border-color: var(--c-red); }

/* Cases à cocher / radios en liste (choix multiples, ex. devs affectés) */
.choice-list { display: flex; flex-wrap: wrap; gap: 8px; }
.choice {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 5px 14px 5px 10px;
    background: var(--surface);
    font-size: 13.5px;
    cursor: pointer;
    font-weight: 500;
}
.choice:hover { border-color: var(--primary); }
.choice input { margin: 0; }
.choice:has(input:checked) { background: var(--primary-tint); border-color: var(--primary); color: var(--primary); }
input[type="checkbox"], input[type="radio"] { accent-color: var(--primary); width: 15px; height: 15px; }

.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 20px; }
.form-grid > .field--wide { grid-column: 1 / -1; }
@media (max-width: 720px) { .form-grid { grid-template-columns: 1fr; } }

/* ------------------------------------------------------- 7. Tables "board" */
.table-wrap { overflow-x: auto; }
/* Un titre de ticket qui s'écrit sur cinq lignes n'est plus un titre. Les
   colonnes reprises du board ne prennent pas la place du sujet : le tableau
   défile plutôt que de comprimer. */
table.board th:nth-child(2), table.board td:nth-child(2) { min-width: 260px; }
table.board {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 14px;
}
table.board th {
    text-align: left;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
    padding: 10px 12px;
    border-bottom: 1px solid var(--border-soft);
    white-space: nowrap;
    background: var(--surface);
}
table.board td {
    padding: 11px 12px;
    border-bottom: 1px solid var(--border-soft);
    vertical-align: middle;
}
table.board tbody tr:hover td { background: var(--surface-hover); }
table.board tbody tr:last-child td { border-bottom: 0; }
/* Bande de couleur monday à gauche de chaque ligne */
table.board tbody td:first-child {
    box-shadow: inset 4px 0 0 0 var(--row-color, transparent);
    padding-left: 16px;
}
table.board th:first-child { padding-left: 16px; }
.cell-num { color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.cell-strong { font-weight: 600; }
.cell-actions { text-align: right; white-space: nowrap; }

/* --------------------------------------- 8. Statuts, chips, avatars, tags */
.status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 128px;
    height: 28px;
    padding: 0 12px;
    border-radius: var(--radius-sm);
    background: var(--c-grey);
    color: #fff;
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: .1px;
    white-space: nowrap;
}
.status--todo    { background: var(--c-grey); }
.status--working { background: var(--c-orange); }
.status--waiting { background: var(--c-purple); }
.status--new     { background: var(--c-pink); }
.status--testing { background: var(--c-light-blue); }
.status--review  { background: var(--c-dark-blue); }
.status--done    { background: var(--c-green); }
.status--stuck   { background: var(--c-red); }
.status--draft   { background: var(--surface); color: var(--text-secondary); border: 1px dashed var(--border); font-weight: 500; }
.status--auto    { min-width: 0; }

.tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 22px;
    padding: 0 9px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .02em;
    background: var(--surface-hover);
    color: var(--text-secondary);
    white-space: nowrap;
}
.tag--admin     { background: #f3e8fd; color: #7c3fbd; }
.tag--lead_dev  { background: #e6e9fd; color: #3b45b5; }
.tag--direction { background: #e0f2fb; color: #00658f; }
.tag--po        { background: #fdf1de; color: #a96700; }
.tag--dev       { background: #d9f7e9; color: #007a4a; }
.tag--danger    { background: #fde8eb; color: #b32338; }
.tag--warning   { background: #fdf1de; color: #a96700; }
.tag--positive  { background: #d9f7e9; color: #007a4a; }
.tag--info      { background: var(--primary-tint); color: var(--primary-hover); }

.avatar {
    display: inline-grid;
    place-items: center;
    width: 28px; height: 28px;
    flex: 0 0 28px;
    border-radius: 50%;
    color: #fff;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .02em;
    text-transform: uppercase;
    user-select: none;
}
.avatar--lg { width: 36px; height: 36px; flex-basis: 36px; font-size: 14px; }
.avatar--0 { background: #0073ea; } .avatar--1 { background: #a25ddc; }
.avatar--2 { background: #00c875; } .avatar--3 { background: #fdab3d; }
.avatar--4 { background: #e2445c; } .avatar--5 { background: #0086c0; }
.avatar--6 { background: #ff158a; } .avatar--7 { background: #579bfc; }

.person { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.person__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.person-group { display: flex; align-items: center; }
.person-group .avatar { margin-left: -6px; border: 2px solid var(--surface); }
.person-group .avatar:first-child { margin-left: 0; }

/* ---------------------------------------------- 9. Batterie d'avancement */
.battery {
    display: flex;
    height: 20px;
    border-radius: var(--radius-sm);
    overflow: hidden;
    background: var(--border-soft);
    min-width: 180px;
}
.battery__seg {
    display: grid;
    place-items: center;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    overflow: hidden;
}
.battery__label { font-size: 12.5px; color: var(--text-secondary); margin-top: 5px; }

.progress {
    height: 8px;
    border-radius: 999px;
    background: var(--border-soft);
    overflow: hidden;
    min-width: 140px;
}
.progress__bar { height: 100%; border-radius: 999px; background: var(--c-green); }

/* ------------------------------------------------------------ 10. KPI */
.kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 16px;
    margin-bottom: 16px;
}
.kpi {
    background: var(--surface);
    border: 1px solid var(--border-soft);
    border-left: 4px solid var(--primary);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    padding: 16px 18px;
}
.kpi__label { font-size: 12.5px; color: var(--text-secondary); font-weight: 500; }
.kpi__value { font-size: 28px; font-weight: 700; line-height: 1.15; margin-top: 4px; font-variant-numeric: tabular-nums; }
.kpi__hint  { font-size: 12px; color: var(--text-placeholder); margin-top: 2px; }
.kpi--green { border-left-color: var(--c-green); }
.kpi--red   { border-left-color: var(--c-red); }
.kpi--orange{ border-left-color: var(--c-orange); }
.kpi--purple{ border-left-color: var(--c-purple); }

/* ---------------------------------------------------- 11. Flash & alertes */
.flash {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    border-radius: var(--radius);
    padding: 12px 14px;
    margin-bottom: 12px;
    font-size: 14px;
    box-shadow: var(--shadow-sm);
    border: 1px solid transparent;
}
.flash svg { flex: 0 0 18px; margin-top: 1px; }
.flash__text { flex: 1 1 auto; }
.flash__close { background: none; border: 0; cursor: pointer; color: inherit; opacity: .65; padding: 0 2px; line-height: 1; }
.flash__close:hover { opacity: 1; }
.flash-success { background: #e5f9f0; border-color: #a5e9c9; color: #00613a; }
.flash-error   { background: #fdecef; border-color: #f7bec7; color: #a02338; }
.flash-warning { background: #fdf5e7; border-color: #f6dcae; color: #8a5300; }
.flash-info    { background: var(--primary-tint); border-color: var(--primary-soft); color: #00519c; }

.callout {
    display: flex;
    gap: 10px;
    border-radius: var(--radius);
    padding: 12px 14px;
    font-size: 13.5px;
    background: var(--primary-tint);
    color: #00519c;
}
.callout--muted { background: var(--surface-hover); color: var(--text-secondary); }

/* -------------------------------------------------------- 12. Empty state */
.empty {
    text-align: center;
    padding: 34px 20px;
    color: var(--text-secondary);
}
.empty__icon {
    width: 48px; height: 48px;
    margin: 0 auto 12px;
    border-radius: 50%;
    display: grid; place-items: center;
    background: var(--surface-hover);
    color: var(--text-placeholder);
}
.empty__title { font-weight: 600; color: var(--text); margin-bottom: 4px; }
.empty__text { font-size: 13.5px; max-width: 56ch; margin: 0 auto 14px; }

/* ------------------------------------------------------- 13. Divers / util */
.muted { color: var(--text-secondary); }
.small { font-size: 12.5px; }
.stack > * + * { margin-top: 12px; }
.row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.row--tight { gap: 5px; }
.grid-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.prewrap { white-space: pre-wrap; line-height: 1.6; }
.hr { height: 1px; background: var(--border-soft); border: 0; margin: 16px 0; }
.checklist { list-style: none; margin: 0; padding: 0; }
.checklist li { display: flex; align-items: center; gap: 9px; padding: 8px 0; border-bottom: 1px solid var(--border-soft); }
.checklist li:last-child { border-bottom: 0; }
.check-icon { flex: 0 0 18px; }
.check-icon--done { color: var(--c-green); }
.check-icon--todo { color: var(--text-placeholder); }

/* ------------------------------------- Onglets d'un écran (espace projet) */
/*
   L'écran projet portait neuf blocs dans un seul défilement. Les onglets ne
   masquent rien : ils rendent au lecteur le droit de ne regarder qu'une
   chose à la fois. Ce sont de vrais liens (`?vue=`), donc partageables et
   fonctionnels sans JavaScript.
*/
.tabs {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--border);
    padding-bottom: 0;
}
.tab {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 14px;
    margin-bottom: -1px;
    border: 1px solid transparent;
    border-bottom: 2px solid transparent;
    border-radius: var(--radius) var(--radius) 0 0;
    color: var(--text-secondary);
    font-size: 13.5px;
    font-weight: 500;
    white-space: nowrap;
}
.tab:hover { background: var(--surface-hover); color: var(--text); text-decoration: none; }
.tab svg { color: var(--text-placeholder); flex: 0 0 auto; }
.tab.is-active {
    background: var(--surface);
    color: var(--text);
    font-weight: 600;
    border-color: var(--border-soft);
    border-bottom-color: var(--primary);
}
.tab.is-active svg { color: var(--primary); }
.tab__count {
    font-size: 11.5px;
    font-weight: 700;
    background: var(--surface-hover);
    color: var(--text-secondary);
    border-radius: 999px;
    padding: 1px 7px;
}
.tab.is-active .tab__count { background: var(--primary-tint); color: var(--primary-hover); }
/* Le point ne compte rien : il dit « il y a quelque chose à regarder ici »,
   ce qu'un compteur de plus ne dirait pas. */
.tab__dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--c-orange);
    flex: 0 0 7px;
}

/* -------------------------------------------- Ce qui attend la personne */
.todo {
    background: var(--surface);
    border: 1px solid var(--border-soft);
    border-left: 3px solid var(--primary);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    padding: 14px 18px;
    margin-bottom: 20px;
}
.todo__head { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.todo__head svg { color: var(--primary); }
.todo__row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 10px 0;
    border-bottom: 1px solid var(--border-soft);
}
.todo__row:last-child { border-bottom: 0; padding-bottom: 2px; }
.todo__text { flex: 1 1 320px; font-size: 13.5px; }
.todo__dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 8px; background: var(--c-grey); }
.todo__dot--primary  { background: var(--primary); }
.todo__dot--warning  { background: var(--c-orange); }
.todo__dot--danger   { background: var(--c-red); }
.todo__dot--positive { background: var(--c-green); }

/* Titre de sous-section dans une carte (« À trancher », « Déjà tranché ») */
.section-title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 4px 0 12px;
    font-size: 14px;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: .04em;
}
.section-title svg { color: var(--text-placeholder); }

/* Panneau dépliable (documents, description de ticket) */
details.disclosure > summary {
    cursor: pointer;
    color: var(--primary);
    font-size: 13px;
    list-style: none;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
details.disclosure > summary::-webkit-details-marker { display: none; }
details.disclosure > summary::before { content: "▸"; font-size: 11px; }
details.disclosure[open] > summary::before { content: "▾"; }
details.disclosure > .disclosure__body {
    margin-top: 8px;
    padding: 12px;
    background: var(--surface-hover);
    border-radius: var(--radius-sm);
    font-size: 13.5px;
}

/* Menu utilisateur (natif, sans JS) */
.menu { position: relative; }
.menu > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 8px; padding: 4px; border-radius: var(--radius-sm); }
.menu > summary::-webkit-details-marker { display: none; }
.menu > summary:hover { background: var(--surface-hover); }
.menu__panel {
    position: absolute;
    right: 0;
    top: calc(100% + 6px);
    min-width: 240px;
    background: var(--surface);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    padding: 6px;
    z-index: 50;
}
.menu__header { padding: 10px; border-bottom: 1px solid var(--border-soft); margin-bottom: 6px; }
.menu__item {
    display: flex; align-items: center; gap: 9px;
    padding: 8px 10px; border-radius: var(--radius-sm);
    color: var(--text); font-size: 13.5px; width: 100%;
    background: none; border: 0; font-family: inherit; cursor: pointer; text-align: left;
}
.menu__item:hover { background: var(--surface-hover); text-decoration: none; }
.menu__item svg { color: var(--text-secondary); flex: 0 0 16px; }

/* Table clé/valeur (branchements techniques) */
table.kv { width: 100%; border-collapse: collapse; font-size: 13.5px; }
table.kv th {
    text-align: left; vertical-align: top; width: 34%;
    padding: 12px 14px 12px 0; font-weight: 600;
    border-bottom: 1px solid var(--border-soft);
}
table.kv td { padding: 12px 0; border-bottom: 1px solid var(--border-soft); }
table.kv tr:last-child th, table.kv tr:last-child td { border-bottom: 0; }

/* ------------------------------------------------------ 14. Écran de login */
.auth {
    min-height: 100vh;
    display: grid;
    grid-template-columns: 1fr 1fr;
    background: var(--surface);
}
.auth__aside {
    background: linear-gradient(150deg, #0073ea 0%, #5034ff 55%, #a25ddc 100%);
    color: #fff;
    padding: 48px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 22px;
}
.auth__aside h2 { font-size: 30px; line-height: 1.2; font-weight: 700; max-width: 16ch; }
.auth__aside p { color: rgba(255, 255, 255, .86); max-width: 42ch; font-size: 15px; }
.auth__points { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.auth__points li { display: flex; gap: 10px; align-items: flex-start; font-size: 14.5px; }
.auth__brand { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 17px; }
.auth__brand .brand-mark { background: rgba(255, 255, 255, .2); }
.auth__panel { display: grid; place-items: center; padding: 40px 24px; }
.auth__box { width: 100%; max-width: 380px; }
.auth__box h1 { font-size: 26px; margin-bottom: 6px; }
@media (max-width: 900px) {
    .auth { grid-template-columns: 1fr; }
    .auth__aside { display: none; }
}

/* -------------------------------------------------------- 15. Responsive */
@media (max-width: 1024px) {
    .sidebar {
        transform: translateX(-100%);
        transition: transform .18s ease;
        box-shadow: var(--shadow-lg);
    }
    body.nav-open .sidebar { transform: translateX(0); }
    body.nav-open .scrim { display: block; }
    .main { margin-left: 0; }
    .burger { display: inline-flex; }
    .scrim {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, .35);
        z-index: 35;
    }
}
@media (max-width: 720px) {
    .content { padding: 16px; }
    h1 { font-size: 20px; }
    .kpi__value { font-size: 24px; }
    .status { min-width: 0; }
    /* Cinq onglets ne tiennent pas sur une largeur de téléphone. Ils
       défilent latéralement plutôt que de se casser sur trois lignes :
       une barre d'onglets qui prend le tiers de l'écran ne navigue plus,
       elle encombre. */
    .tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: thin; }
    .tab { padding: 9px 10px; }
}

@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; animation: none !important; }
}

/* --------------------------------------- 16. Groupes de board (sprints) */
.group { margin-bottom: 22px; }
.group:last-child { margin-bottom: 0; }
.group__head {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 0 0 8px 16px;
    font-weight: 700;
    font-size: 15px;
    color: var(--group-color, var(--text));
}
.group__dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex: 0 0 8px; }
/* Un groupe qu'on peut replier : l'en-tête reste identique, il devient
   seulement cliquable. Le chevron dit ce qui est ouvert. */
.group--foldable > summary.group__head { cursor: pointer; list-style: none; }
.group--foldable > summary.group__head::-webkit-details-marker { display: none; }
.group--foldable > summary.group__head::after {
    content: "▾";
    margin-left: auto;
    font-size: 12px;
    color: var(--text-placeholder);
    transition: transform .15s ease;
}
.group--foldable:not([open]) > summary.group__head::after { transform: rotate(-90deg); }
.group--foldable > summary.group__head:hover { background: var(--surface-hover); border-radius: var(--radius-sm); }
.group__meta { font-weight: 500; font-size: 12.5px; color: var(--text-secondary); }
.group table.board { border: 1px solid var(--border-soft); border-radius: var(--radius); overflow: hidden; background: var(--surface); }

/* Saisie inline d'estimation (à la monday) */
.inline-edit { display: inline-flex; align-items: center; gap: 6px; }
.inline-edit input {
    width: 68px; min-height: 28px; padding: 3px 8px; text-align: center;
    font-variant-numeric: tabular-nums;
}
.inline-edit .unit { color: var(--text-secondary); font-size: 12.5px; }

/* Bandeau d'information projet (page-head) */
.meta-row { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-top: 12px; }
.meta { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-secondary); }
.meta__label { font-weight: 600; color: var(--text-placeholder); font-size: 11.5px; text-transform: uppercase; letter-spacing: .04em; }

/* Indicateur « en cours de traitement » */
.pulse-dot {
    width: 8px; height: 8px; border-radius: 50%; background: var(--c-orange);
    animation: pulse 1.4s ease-in-out infinite;
    flex: 0 0 8px;
}
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }

/* ------------------------------------------- 17. Champs « secret / URL » */
.copy-field {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--surface-hover);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-sm);
    padding: 6px 6px 6px 10px;
    margin-top: 6px;
}
.copy-field code {
    flex: 1 1 auto;
    background: none;
    border: 0;
    padding: 0;
    overflow-x: auto;
    white-space: nowrap;
    scrollbar-width: thin;
}
.copy-field .btn { flex: 0 0 auto; }
.copy-ok { color: var(--c-green); font-weight: 600; font-size: 12.5px; }

.visually-hidden {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* ------------------------------------------ 18. Éditeur de texte riche */
.rte {
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
    transition: border-color .12s ease, box-shadow .12s ease;
}
.rte:hover { border-color: var(--text-placeholder); }
.rte.is-focused { border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary); }

.rte__toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px;
    padding: 5px 6px;
    border-bottom: 1px solid var(--border-soft);
    background: var(--surface-hover);
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
}
.rte__btn {
    min-width: 28px;
    height: 28px;
    padding: 0 8px;
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text-secondary);
    font: inherit;
    font-size: 13px;
    cursor: pointer;
}
.rte__btn:hover { background: var(--primary-tint); color: var(--primary); }
.rte__sep { width: 1px; height: 18px; background: var(--border); margin: 0 4px; }

.rte__surface {
    padding: 12px 14px;
    min-height: 140px;
    font-size: 14px;
    line-height: 1.6;
    outline: none;
    overflow-wrap: anywhere;
}
.rte__surface:empty::before {
    content: attr(data-placeholder);
    color: var(--text-placeholder);
}
.rte__source { display: none; }

/* Rendu partagé par l'éditeur et l'affichage d'un contenu riche */
.rte__surface > *:first-child, .rich-content > *:first-child { margin-top: 0; }
.rte__surface > *:last-child, .rich-content > *:last-child { margin-bottom: 0; }
.rte__surface h2, .rich-content h2 { font-size: 17px; margin: 18px 0 8px; }
.rte__surface h3, .rich-content h3 { font-size: 15px; margin: 16px 0 6px; }
.rte__surface h4, .rich-content h4 { font-size: 14px; margin: 14px 0 6px; }
.rte__surface p, .rich-content p { margin: 0 0 10px; }
.rte__surface ul, .rte__surface ol, .rich-content ul, .rich-content ol { margin: 0 0 10px; padding-left: 22px; }
.rte__surface li, .rich-content li { margin-bottom: 4px; }
.rte__surface blockquote, .rich-content blockquote {
    margin: 0 0 10px;
    padding: 6px 0 6px 14px;
    border-left: 3px solid var(--primary-soft);
    color: var(--text-secondary);
}
.rte__surface pre, .rich-content pre {
    background: var(--surface-hover);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-sm);
    padding: 10px 12px;
    overflow-x: auto;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 12.5px;
    margin: 0 0 10px;
}
.rte__surface hr, .rich-content hr { border: 0; border-top: 1px solid var(--border-soft); margin: 14px 0; }
.rich-content { font-size: 14px; line-height: 1.6; }
/* Un tableau large défile dans son bloc au lieu d'élargir la carte. */
.rich-content table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    border-collapse: collapse;
    margin: 0 0 12px;
    font-size: 13px;
}
.rich-content th, .rich-content td {
    padding: 6px 10px;
    border: 1px solid var(--border-soft);
    text-align: left;
    vertical-align: top;
}
.rich-content th { background: var(--surface-hover); font-weight: 600; white-space: nowrap; }
.rich-content th[align="center"], .rich-content td[align="center"] { text-align: center; }
.rich-content th[align="right"], .rich-content td[align="right"] { text-align: right; }

/* Texte long replié (« Voir plus ») : posé par le JS, qui ne replie que ce
   qui dépasse vraiment ; sans JS, tout reste affiché. */
.is-collapsed { max-height: 520px; overflow: hidden; position: relative; }
.is-collapsed::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 80px;
    background: linear-gradient(to bottom, transparent, var(--surface));
    pointer-events: none;
}
.collapse-toggle { margin-top: 10px; }

/* --------------------------------------------- 19. Filtres & pagination */
.toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 10px;
    padding: 14px 16px;
    background: var(--surface);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    margin-bottom: 16px;
}
.toolbar .field { margin: 0; }
.toolbar__search { flex: 1 1 260px; }
.toolbar__actions { margin-left: auto; display: flex; gap: 8px; align-items: center; }

/* Onglets de filtre rapide (« tous / introduits / miroirs ») */
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 30px;
    padding: 0 12px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
}
.chip:hover { border-color: var(--primary); color: var(--primary); text-decoration: none; }
.chip.is-active { background: var(--primary); border-color: var(--primary); color: #fff; }
.chip__count {
    font-size: 11.5px;
    font-weight: 700;
    background: var(--surface-hover);
    color: var(--text-secondary);
    border-radius: 999px;
    padding: 0 6px;
}
.chip.is-active .chip__count { background: rgba(255, 255, 255, .25); color: #fff; }

.pager {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 16px;
    border-top: 1px solid var(--border-soft);
    font-size: 13px;
    color: var(--text-secondary);
}
.pager__spacer { flex: 1 1 auto; }
.pager__link {
    display: inline-flex;
    align-items: center;
    height: 30px;
    padding: 0 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text);
}
.pager__link:hover { border-color: var(--primary); color: var(--primary); text-decoration: none; }
.pager__link[aria-disabled="true"] { opacity: .45; pointer-events: none; }

/* -------------------------------------------- 20. Select avec filtre */
.select-search { display: flex; flex-direction: column; gap: 6px; }
.select-search__input { max-width: 100%; }
.select-search select { min-height: 34px; }
.select-search__count { align-self: flex-end; }

/* ------------------------------------------------- Colonnes Monday */
/* Les pastilles reprennent la couleur choisie par l'équipe DANS Monday :
   c'est ce qui rend le tableau lisible d'un coup d'œil, et le seul moyen
   que « Élevé » soit rouge ici comme là-bas. Le texte est blanc parce que
   la palette de Monday n'a pas de teinte assez claire pour exiger l'inverse. */
.monday-chip {
    display: inline-block; max-width: 100%;
    padding: 3px 10px; border-radius: 4px;
    background: var(--chip, #c4c4c4); color: #fff;
    font-size: 12px; font-weight: 500; line-height: 18px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Une valeur de colonne sans mise en forme propre : on la borne pour qu'un
   commentaire de trois paragraphes ne fasse pas exploser la hauteur de ligne. */
.cell-plain {
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden; font-size: 13px; color: var(--text);
}

.field-block { margin-bottom: 14px; }
.field-block > strong { display: block; margin-bottom: 4px; font-size: 13px; color: var(--text-soft); }

/* Toutes les colonnes du board, en deux colonnes intitulé/valeur. */
.field-grid {
    display: grid; grid-template-columns: minmax(120px, auto) 1fr;
    gap: 6px 16px; margin: 0 0 14px; align-items: baseline;
}
.field-grid dt { font-size: 12px; color: var(--text-soft); }
.field-grid dd { margin: 0; font-size: 13px; }

@media (max-width: 700px) {
    .field-grid { grid-template-columns: 1fr; gap: 2px 0; }
    .field-grid dd { margin-bottom: 8px; }
}

/* ----------------------------- Conversation Monday (« Mises à jour ») */
/* Le fil tel qu'il se lit sur Monday : chaque message dans sa carte, les
   réponses en retrait derrière un filet. Sans le retrait, une question du
   client et la réponse du dev se ressemblent — et on perd le fil. */
.thread { margin: 14px 0; }
.thread__title {
    display: flex; align-items: center; gap: 6px;
    margin-bottom: 10px; font-size: 13px; font-weight: 600; color: var(--text-soft);
}
.thread__title a { margin-left: auto; font-weight: 400; }

.thread__msg {
    padding: 10px 12px; margin-bottom: 8px;
    background: var(--surface); border: 1px solid var(--border); border-radius: 8px;
}
.thread__msg--reply {
    margin: 8px 0 0 20px; padding-left: 12px;
    background: var(--bg); border: 0; border-left: 2px solid var(--border); border-radius: 0;
}

.thread__head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.thread__author { font-size: 13px; font-weight: 600; }
.thread__date { font-size: 12px; color: var(--text-soft); margin-left: auto; }

.thread__body { font-size: 13px; line-height: 1.55; overflow-wrap: anywhere; }
.thread__body p { margin: 0 0 8px; }
.thread__body p:last-child { margin-bottom: 0; }
/* Les mentions « @Quelqu'un » sont ce qui rend un fil Monday lisible d'un
   coup d'œil : qui parle à qui. On les garde visibles même sans le lien. */
.thread__body a { color: var(--primary); }
.thread__body img { max-width: 100%; height: auto; border-radius: 6px; }

.thread__files {
    display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
    margin-top: 8px; font-size: 12px; color: var(--text-soft);
}

/* ------------------------------------- Panneau de détail d'un ticket */
/* Comme sur Monday : la liste garde des lignes d'une ligne, et le détail
   s'ouvre à droite. C'est ce qui permet de balayer un backlog de cinquante
   tickets sans que trois d'entre eux remplissent l'écran. */
.cell-link {
    display: block; width: 100%; padding: 0; border: 0; background: none;
    font: inherit; font-weight: 500; color: var(--text); text-align: left;
    cursor: pointer;
}
.cell-link:hover { color: var(--primary); text-decoration: underline; }

.cell-hints { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.hint {
    display: inline-flex; align-items: center; gap: 3px;
    font-size: 12px; color: var(--text-soft);
}
.hint--alert { color: var(--c-red); }

.panel-overlay {
    position: fixed; inset: 0; z-index: 60;
    background: rgba(0, 0, 0, .28);
}

/* « display: flex » l'emporte sur le « display: none » que le navigateur
   applique à [hidden] : sans cette règle, le panneau reste affiché en
   permanence, vide, collé à droite de l'écran. Toute classe qui pose un
   display doit rendre l'attribut hidden explicitement. */
.panel[hidden], .panel-overlay[hidden] { display: none; }

.panel {
    position: fixed; top: 0; right: 0; bottom: 0; z-index: 61;
    /* Le panneau porte désormais le détail complet d'un ticket à l'étude —
       contexte métier, critères, dépendances des deux côtés, remarques.
       À 560px, une liste à puces se cassait en trois lignes par item et la
       lecture devenait pénible. */
    width: min(840px, 100vw);
    display: flex; flex-direction: column;
    background: var(--surface); border-left: 1px solid var(--border);
    box-shadow: -8px 0 32px rgba(0, 0, 0, .12);
}
/* Le corps défile, l'en-tête reste : sur une conversation longue, on doit
   pouvoir fermer sans remonter. */
.panel__head {
    display: flex; align-items: flex-start; gap: 12px;
    padding: 18px 20px; border-bottom: 1px solid var(--border); flex: 0 0 auto;
}
.panel__title { flex: 1; min-width: 0; }
.panel__title h2 { margin: 0; font-size: 19px; line-height: 1.3; overflow-wrap: anywhere; }
.panel__meta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; font-size: 12px; color: var(--text-soft); }

.panel__body { flex: 1; overflow-y: auto; padding: 18px 20px 32px; }
.panel__loading { padding: 32px 20px; color: var(--text-soft); }

.panel__section { margin-bottom: 22px; }
.panel__section > h3 {
    margin: 0 0 10px; font-size: 13px; font-weight: 600;
    color: var(--text-soft); text-transform: uppercase; letter-spacing: .03em;
}
.panel__label { margin: 12px 0 4px; font-size: 13px; font-weight: 600; }
.panel__section ul { margin: 6px 0 0; padding-left: 18px; }

.panel__composer { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border); }

body.panel-open { overflow: hidden; }

@media (max-width: 640px) {
    .panel { width: 100vw; border-left: 0; }
}

/* Bandeau d'identité empruntée : collé en haut, il suit le défilement —
   on ne doit jamais oublier au nom de qui on clique. */
.impersonation {
    position: sticky; top: 0; z-index: 70;
    margin: 0; border-radius: 0;
    align-items: center;
}
.impersonation .btn { flex: 0 0 auto; }

/* --------------------------------------------------------- Documentation
   Le lien (i) est volontairement discret mais toujours au contact du champ
   qu'il explique : un jeton GitLab se configure une fois par projet, des
   mois après le précédent, et c'est au moment où l'on a le champ vide sous
   les yeux qu'on a besoin du mode d'emploi. */
.help-link {
    display: inline-flex; align-items: center; gap: 4px;
    margin-top: 4px;
    font-size: 12px; font-weight: 500; text-decoration: none;
    color: var(--c-dark-blue);
}
.help-link:hover { text-decoration: underline; }
.help-link span { font-size: 14px; line-height: 1; }

.steps { margin: 0; padding-left: 22px; }
.steps li { margin-bottom: 10px; line-height: 1.55; }
.steps li .muted { display: block; margin-top: 2px; }

/* Un extrait de pipeline se lit en entier ou pas du tout : il défile
   horizontalement dans son cadre plutôt que de casser la page. */
.code-block {
    margin: 0; padding: 14px 16px;
    background: var(--bg-soft, #f6f7f9); border: 1px solid var(--border);
    border-radius: 8px; overflow-x: auto;
    font-size: 12.5px; line-height: 1.6;
}
.code-block code { background: none; padding: 0; white-space: pre; }

/* ------------------------------------ 21. Écran des comptes utilisateurs */
/* Les métiers s'y choisissaient dans un select multiple de huit lignes,
   ouvert sur chaque ligne : le tableau faisait 250 px par personne, la
   colonne d'actions passait hors écran, et la flèche de select se dessinait
   au milieu de la liste. On lit maintenant les métiers ; on ne les édite
   que sur demande. */

/* Un select multiple n'ouvre rien : la flèche du select simple y ment. */
select[multiple] { background-image: none; padding-right: 10px; }
/* Un select qui ne porte qu'un rôle ou un statut n'a pas à occuper
   toute la largeur de sa cellule. */
.select--auto { width: auto; min-width: 132px; }

.check-inline {
    display: inline-flex; align-items: center; gap: 7px;
    font-size: 13px; font-weight: 500; color: var(--text-secondary);
    white-space: nowrap; cursor: pointer;
}
.check-inline input { flex: none; }

/* Barre d'actions groupées, au-dessus du tableau qu'elle commande. */
.bulk-bar {
    display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
    padding: 10px 16px;
    border-bottom: 1px solid var(--border-soft);
    background: var(--bg-soft, #f6f7f9);
}
.bulk-bar__actions { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }
/* Rien de coché : l'action reste visible mais annonce qu'elle ne fera rien. */
.bulk-bar--empty .bulk-bar__actions .btn { opacity: .55; }

table.board .cell-check { width: 34px; padding-right: 0; }
.cell-check input { display: block; }
table.board--users th:nth-child(2), table.board--users td:nth-child(2) { min-width: 230px; }
table.board--users td { vertical-align: top; padding-top: 13px; }
table.board--users .cell-actions { vertical-align: middle; }
.cell-monday { margin-top: 4px; }

/* Nom et adresse désignent la même personne : ils tiennent dans une cellule,
   l'un sous l'autre. Deux colonnes pour ça poussaient les actions hors écran. */
.person__lines { display: flex; flex-direction: column; min-width: 0; line-height: 1.35; }
.person__mail { overflow: hidden; text-overflow: ellipsis; }

.tag-list { display: flex; flex-wrap: wrap; gap: 4px; }

/* Liste repliée : le contenu se lit, l'édition se demande. */
.picker { min-width: 190px; }
.picker__summary {
    display: flex; align-items: center; gap: 8px;
    padding: 4px 6px; margin: -4px -6px;
    border-radius: var(--radius-sm);
    cursor: pointer; list-style: none;
}
.picker__summary::-webkit-details-marker { display: none; }
.picker__summary:hover { background: var(--surface-hover); }
.picker__summary > :first-child { flex: 1; min-width: 0; }
/* Le chevron de la bibliothèque pointe à droite : il indique le bas quand
   la liste est repliée, le haut quand elle est ouverte. */
.picker__caret { flex: none; display: flex; color: var(--text-secondary); transform: rotate(90deg); transition: transform .12s ease; }
.picker[open] > .picker__summary .picker__caret { transform: rotate(-90deg); }
.picker__body {
    margin-top: 8px; padding: 10px;
    min-width: 180px;
    border: 1px solid var(--border); border-radius: var(--radius-sm);
    background: var(--surface);
}
.picker__body fieldset { border: 0; margin: 0; padding: 0; }

.choice-list--sm { gap: 5px; }
.choice-list--sm .choice { padding: 2px 10px 2px 7px; font-size: 12.5px; gap: 6px; }
.choice-list--sm .choice input { width: 13px; height: 13px; }

/* Les actions d'une ligne tiennent sur une ligne : un formulaire par bouton
   les empilait verticalement, ce qui étirait la ligne d'autant. */
.row-actions { display: flex; align-items: center; justify-content: flex-end; gap: 6px; flex-wrap: nowrap; }
.row-actions > form { display: flex; }
/* Le bouton le moins courant se réduit à son icône : sur huit lignes, trois
   libellés côte à côte repoussaient la colonne hors de l'écran. Le titre et
   la confirmation disent ce qu'il fait — on ne l'actionne pas par mégarde. */
.btn--icon { padding: 0 8px; }

.sync-form { display: flex; align-items: center; gap: 10px; }

/* --------------------------------------------- 22. Graphiques (docs/12, lot 6) */
/* SVG rendu côté serveur : aucune bibliothèque, aucune dépendance à JS.
   Les formes visées sont simples, et une page de pilotage qui se charge en
   un aller-retour vaut mieux qu'une page qui attend 300 ko pour dessiner
   six étincelles. */

/* L'étincelle vit DANS le KPI, sous le grand chiffre. */
.spark { display: block; width: 100%; height: 26px; margin-top: 6px; overflow: visible; }

.chart { margin: 0; }
.chart__scroll { overflow-x: auto; }
.chart__svg { display: block; width: 100%; min-width: 460px; height: auto; }
.chart__tick { fill: var(--text-placeholder); font-size: 10px; font-family: inherit; }

.chart__legend {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 18px;
    align-items: center;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--border-soft);
    font-size: 12.5px;
    color: var(--text-secondary);
}
.chart__key { display: inline-flex; align-items: center; gap: 7px; }
.chart__swatch { width: 12px; height: 10px; border-radius: 2px; flex: 0 0 auto; }
/* Le périmètre est une ligne pointillée sur le graphique : sa pastille doit
   le dire, sinon la légende décrit autre chose que ce qu'on voit. */
.chart__swatch--dashed { background: transparent; border: 2px dashed currentColor; height: 0; border-radius: 0; }
.chart__range { margin-left: auto; }

@media (max-width: 720px) {
    .chart__range { margin-left: 0; }
}

/* ------------------------------------- 23. Lisibilité (docs/12, lot 8) */

/* La couleur ne porte jamais seule le sens : le liseré rouge du bloc « À
   toi de jouer » est doublé d'un mot. Un liseré lu sans texte ne dit rien
   à qui ne distingue pas les rouges, et rien du tout sur une impression. */
.is-late { color: var(--c-red); font-weight: 600; }

/* Les tableaux clés deviennent des CARTES sous 720 px.

   Le défilement horizontal était la seule stratégie responsive : un tableau
   à huit colonnes qu'on fait glisser sur un téléphone n'est pas
   consultable — on perd l'en-tête dès la deuxième colonne, donc le sens de
   ce qu'on lit. Chaque cellule porte son intitulé en préfixe (`data-label`)
   et la ligne devient un bloc. */
@media (max-width: 720px) {
    table.board--cards,
    table.board--cards tbody,
    table.board--cards tr,
    table.board--cards td { display: block; width: 100%; }

    table.board--cards thead { display: none; }

    table.board--cards tr {
        background: var(--surface);
        border: 1px solid var(--border-soft);
        border-left: 3px solid var(--row-color, var(--border));
        border-radius: var(--radius);
        margin-bottom: 10px;
        padding: 4px 0;
    }

    table.board--cards td {
        border-bottom: 0;
        padding: 7px 14px;
        display: flex;
        gap: 12px;
        align-items: baseline;
        justify-content: space-between;
        text-align: left;
    }
    table.board--cards td:empty { display: none; }

    table.board--cards td::before {
        content: attr(data-label);
        flex: 0 0 40%;
        font-size: 12px;
        font-weight: 600;
        color: var(--text-secondary);
    }
    /* Une cellule sans intitulé (la première, le titre) prend toute la
       largeur : lui coller un libellé vide laisserait un blanc de 40 %. */
    table.board--cards td:not([data-label])::before { content: none; }
    table.board--cards td:not([data-label]) { display: block; }

    table.board--cards .cell-actions { justify-content: flex-start; }
}

/* ------------------------------------------- 24. Listes d'administration */
/* Un libellé masqué (« Actions », « Sélection ») est positionné en absolu :
   sans ancre, il se plaçait par rapport à la page et non au tableau, et
   faisait défiler TOUTE la page de la largeur du tableau — la moitié de la
   liste des comptes sortait de l'écran. Le conteneur défilant sert d'ancre. */
.table-wrap { position: relative; }

table.board .cell-title { color: inherit; font-weight: 600; }
table.board .cell-title:hover { color: var(--primary); }
table.board--users th:nth-child(2), table.board--users td:nth-child(2) { min-width: 0; }
table.board--users .cell-person { min-width: 240px; }
.person__state { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 5px; }
.person__lines { max-width: 280px; }
.person__mail { white-space: nowrap; }
.picker { min-width: 150px; }
/* Le formulaire de disponibilité s'ouvre dans sa cellule : il doit pouvoir
   y tenir sans élargir la colonne au repos. */
.picker__body--wide { min-width: 300px; }
table.board--projects td:first-child { min-width: 240px; }
table.board--projects .status { min-width: 0; }
.cell-hints code { font-size: 11.5px; }

@media (max-width: 720px) {
    table.board--cards td.cell-check { display: none; }
    table.board--cards td.cell-person { min-width: 0; }
    table.board--cards .picker { min-width: 0; flex: 1; }
    table.board--cards .picker__body--wide { min-width: 0; }
    table.board--cards .row-actions { justify-content: flex-start; flex-wrap: wrap; }
    table.board--cards td:first-child { box-shadow: none; padding-left: 14px; }
}

/* ----------------------------------------------- 25. Champ de recherche */
input[type="search"] {
    width: 100%;
    font: inherit;
    font-size: 14px;
    color: var(--text);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 7px 10px;
    min-height: 34px;
}
input[type="search"]:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary); }
.search-input { position: relative; display: flex; align-items: center; }
.search-input > .icon { position: absolute; left: 10px; color: var(--text-placeholder); pointer-events: none; }
.search-input > input { padding-left: 34px; }
.toolbar__field { min-width: 190px; }

/* ------------------------------------------------ 26. Filtre du backlog */
/* Une ligne : la recherche prend la place disponible, les listes gardent
   leur libellé collé à gauche au lieu d'un titre au-dessus — la barre fait
   la hauteur d'un champ, pas celle d'un formulaire. */
.filter-bar {
    margin-bottom: 16px;
    padding: 10px 12px;
    background: var(--surface-hover);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius);
}
.filter-bar__row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.filter-bar__search { flex: 1 1 280px; min-width: 0; }
.filter-bar__select {
    display: flex; align-items: center;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding-left: 10px;
    min-height: 34px;
}
.filter-bar__select:focus-within { border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary); }
.filter-bar__label { font-size: 12px; font-weight: 600; color: var(--text-secondary); white-space: nowrap; }
.filter-bar__select select {
    width: auto; min-width: 120px; border: 0; background-color: transparent;
    min-height: 32px; box-shadow: none; padding-left: 8px;
}
.filter-bar__select select:focus { box-shadow: none; }
.filter-bar__active {
    display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
    margin-top: 10px; padding-top: 10px;
    border-top: 1px solid var(--border-soft);
}
.filter-chip {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 2px 8px 2px 10px;
    border-radius: 999px;
    background: var(--primary-tint);
    color: var(--primary-hover);
    font-size: 12.5px; font-weight: 500;
    text-decoration: none;
}
.filter-chip:hover { text-decoration: none; background: var(--primary-soft); }
.filter-bar__reset { font-size: 12.5px; margin-left: 4px; }

@media (max-width: 720px) {
    .filter-bar__select { flex: 1 1 100%; }
    .filter-bar__select select { flex: 1; }
    .filter-bar__submit { flex: 1 1 100%; }
}

/* ------------------------------------------------- 27. Onglet Blocages */
.tab--danger { color: var(--c-red); }
.tab--danger svg { color: var(--c-red); }
.tab--danger .tab__count { background: color-mix(in srgb, var(--c-red) 14%, var(--surface)); color: var(--c-red); }
.tab--danger.is-active { color: var(--c-red); box-shadow: inset 0 -2px 0 var(--c-red); }
.tab--danger.is-active svg { color: var(--c-red); }

.stepper {
    list-style: none; margin: 4px 0 0; padding: 0;
    display: flex; flex-wrap: wrap; gap: 6px;
    counter-reset: step;
}
.stepper__step {
    flex: 1 1 140px;
    display: flex; align-items: center; gap: 8px;
    padding: 9px 12px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-soft);
    font-size: 13px; font-weight: 600;
}
.stepper__step.is-clear { color: var(--text-secondary); }
.stepper__step.is-clear .stepper__icon { color: var(--c-green); }
.stepper__step.is-blocked {
    color: var(--c-red);
    border-color: color-mix(in srgb, var(--c-red) 45%, var(--surface));
    background: color-mix(in srgb, var(--c-red) 8%, var(--surface));
}
.stepper__icon { display: flex; }

.blocker-step { border-left: 3px solid var(--c-red); }
.blocker-step h2 { gap: 10px; }
.blocker-step__num {
    display: inline-grid; place-items: center;
    width: 24px; height: 24px; border-radius: 50%;
    background: var(--c-red); color: #fff;
    font-size: 13px; font-weight: 700;
}
.blocker-list { list-style: none; margin: 0; padding: 0; }
.blocker {
    display: flex; gap: 12px; align-items: flex-start; flex-wrap: wrap;
    padding: 12px 0;
    border-top: 1px solid var(--border-soft);
}
.blocker__icon { color: var(--c-red); display: flex; margin-top: 1px; }
.blocker__body { flex: 1 1 320px; min-width: 0; }
.blocker__text { margin: 0; font-size: 14px; font-weight: 500; }
.blocker__who { margin: 4px 0 0; font-size: 13px; color: var(--text-secondary); display: flex; gap: 8px; align-items: baseline; }
.blocker__details { margin-top: 8px; font-size: 13px; }
.blocker__details summary { cursor: pointer; color: var(--text-secondary); }
.blocker__details ul { margin: 6px 0 0; padding-left: 18px; }
.blocker__details li { margin-bottom: 3px; }
.blocker__action { flex: 0 0 auto; align-self: center; }
@media (max-width: 720px) {
    .blocker__action { flex: 1 1 100%; padding-left: 30px; }
}

/* ------------------------------------------------- 28. Ajustements */
/* `.btn` pose un display : l'attribut hidden seul ne le masquait pas. */
.btn[hidden] { display: none; }

/* Huit onglets doivent tenir sur une ligne à 1 440 px. */
.tabs { gap: 0; }
.tab { padding: 9px 8px; gap: 5px; font-size: 13px; }

/* Une URL de webhook ou un jeton ne doit pas élargir la page : le champ
   défile dans sa boîte. Sans min-width, un élément flex refuse de rétrécir
   sous la largeur de son contenu. */
table.kv { table-layout: fixed; }
.copy-field { min-width: 0; }
.copy-field code { min-width: 0; }
/* Les trois actions d'un compte doivent rester visibles à 1 180 px. */
table.board--users .cell-person { min-width: 210px; }
table.board--users .picker { min-width: 120px; }
table.board--users .person__state .tag { white-space: nowrap; }

/* ------------------------------------------ 29. Page « Mon jeton MCP » */
.copy-block {
    margin: 0;
    padding: 12px 14px;
    background: var(--surface-hover);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-sm);
    font-size: 12.5px;
    line-height: 1.55;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    max-height: 340px;
    overflow: auto;
}
.copy-head { display: flex; align-items: center; gap: 10px; margin: 16px 0 6px; flex-wrap: wrap; }
.copy-head h3 { font-size: 14px; margin: 0; }
.copy-head .btn { margin-left: auto; }
.steps { margin: 0; padding-left: 20px; line-height: 1.8; font-size: 13.5px; }