:root {
    --bg: #f6f1e9;
    --surface: #ffffff;
    --surface-2: #efe7da;
    --text: #2b2118;
    --muted: #6f6152;
    --primary: #8a4f27;
    --primary-dark: #6c3c1b;
    --danger: #b3261e;
    --border: #e0d5c4;
    --radius: 10px;
    --shadow: 0 1px 2px rgba(43, 33, 24, 0.08), 0 1px 3px rgba(43, 33, 24, 0.06);
    --link: #8a4f27;            /* texte coloré (liens, focus) : plus clair en mode sombre */
    --ink: #6c3c1b;             /* texte accentué sur fond clair (survols, avatars…) */
    --topbar-bg: #6c3c1b;
    --danger-ink: #b3261e;      /* rouge utilisé comme TEXTE (--danger sert aux fonds pleins) */
    --border-strong: #cdbfa9;
    --input-border: #c9bba6;
    --input-bg: #ffffff;
    --col-bg: rgba(239, 231, 218, 0.65);
    --glass-strong: rgba(255, 255, 255, 0.85);
    --glass: rgba(255, 255, 255, 0.8);
    --glass-soft: rgba(255, 255, 255, 0.65);
    --highlight: #fff4d6;
    --danger-soft: #fbe4e2;
    --danger-border: #e7b9b5;
    --success-soft: #e5f3e3;
    --success-ink: #1f5a1a;
    --pending-bg: #fbf6ee;
    --drop-bg: #fbf1e3;
    --banner-bg: #3b2a1d;
    --pill-mix: #000;
    --shadow-hover: 0 3px 8px rgba(43, 33, 24, 0.12);
    --shadow-drag: 0 10px 24px rgba(43, 33, 24, 0.25);
    color-scheme: light;
}

/* ---------- Mode sombre ----------
 * Choisi avec le bouton de la barre du haut (assets/controllers/theme_controller.js) : <html data-theme="dark|light">.
 * Sans choix explicite (pas d'attribut), on suit le réglage du système. Les variables sont donc écrites deux fois : c'est le prix de zéro JS pour le mode « auto ».
 */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --bg: #1a1511;
        --surface: #261f19;
        --surface-2: #352b22;
        --text: #f0e7da;
        --muted: #b5a691;
        --primary: #a85d2e;
        --primary-dark: #8a4a22;
        --danger: #c93c33;
        --border: #3a3028;
        --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 1px 3px rgba(0, 0, 0, 0.3);
        --link: #e3a672;
        --ink: #efc9a2;
        --topbar-bg: #2a1b10;
        --danger-ink: #f4908a;
        --border-strong: #54463a;
        --input-border: #5a4b3e;
        --input-bg: #1f1914;
        --col-bg: rgba(53, 43, 34, 0.55);
        --glass-strong: rgba(255, 255, 255, 0.12);
        --glass: rgba(255, 255, 255, 0.09);
        --glass-soft: rgba(255, 255, 255, 0.06);
        --highlight: #4a3a1c;
        --danger-soft: #3a1f1d;
        --danger-border: #6b3430;
        --success-soft: #1f3320;
        --success-ink: #a6dca0;
        --pending-bg: #2d241b;
        --drop-bg: #3a2c1e;
        --banner-bg: #0f0b08;
        --pill-mix: #fff;
        --shadow-hover: 0 3px 8px rgba(0, 0, 0, 0.5);
        --shadow-drag: 0 10px 24px rgba(0, 0, 0, 0.6);
        color-scheme: dark;
    }
    :root:not([data-theme="light"]) select {
        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='%23b5a691' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    }
}
:root[data-theme="dark"] {
    --bg: #1a1511;
    --surface: #261f19;
    --surface-2: #352b22;
    --text: #f0e7da;
    --muted: #b5a691;
    --primary: #a85d2e;
    --primary-dark: #8a4a22;
    --danger: #c93c33;
    --border: #3a3028;
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 1px 3px rgba(0, 0, 0, 0.3);
    --link: #e3a672;
    --ink: #efc9a2;
    --topbar-bg: #2a1b10;
    --danger-ink: #f4908a;
    --border-strong: #54463a;
    --input-border: #5a4b3e;
    --input-bg: #1f1914;
    --col-bg: rgba(53, 43, 34, 0.55);
    --glass-strong: rgba(255, 255, 255, 0.12);
    --glass: rgba(255, 255, 255, 0.09);
    --glass-soft: rgba(255, 255, 255, 0.06);
    --highlight: #4a3a1c;
    --danger-soft: #3a1f1d;
    --danger-border: #6b3430;
    --success-soft: #1f3320;
    --success-ink: #a6dca0;
    --pending-bg: #2d241b;
    --drop-bg: #3a2c1e;
    --banner-bg: #0f0b08;
    --pill-mix: #fff;
    --shadow-hover: 0 3px 8px rgba(0, 0, 0, 0.5);
    --shadow-drag: 0 10px 24px rgba(0, 0, 0, 0.6);
    color-scheme: dark;
}
:root[data-theme="dark"] select {
    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='%23b5a691' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}

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

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

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    line-height: 1.5;
    -webkit-tap-highlight-color: transparent;
    overscroll-behavior-y: none;
}

[hidden] { display: none !important; }

h1, h2 { line-height: 1.2; margin: 0 0 0.6rem; }
h1 { font-size: 1.5rem; }
h2 { font-size: 1.15rem; }
a { color: var(--link); }
p { margin: 0 0 0.8rem; }
:focus-visible { outline: 3px solid var(--link); outline-offset: 2px; }

.muted { color: var(--muted); font-size: 0.9rem; }
.clamp { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* ---------- Structure (les marges respectent les encoches / barres des téléphones) ---------- */
.topbar {
    display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.5rem 1rem;
    padding: calc(0.6rem + env(safe-area-inset-top)) calc(1rem + env(safe-area-inset-right)) 0.6rem calc(1rem + env(safe-area-inset-left));
    background: var(--topbar-bg); color: #fff;
}
.brand { display: flex; align-items: center; gap: 0.5rem; color: #fff; text-decoration: none; font-weight: 700; font-size: 1.15rem; }
.brand img { border-radius: 8px; }

.topbar__nav { display: flex; align-items: center; gap: 0.25rem; }
.topbar__right { display: flex; align-items: center; gap: 0.25rem; margin-left: auto; }

/* Bouton de thème */
.topbar__theme { min-width: 44px; justify-content: center; padding: 0 0.5rem; position: relative; }
.topbar__theme svg { display: block; }
/* Trois icônes dans le bouton ; seule celle du mode courant (data-mode, posé par theme_controller.js) est visible. */
.topbar__theme [data-icon] { display: none; }
.topbar__theme[data-mode="auto"] [data-icon="auto"], .topbar__theme[data-mode="light"] [data-icon="light"], .topbar__theme[data-mode="dark"] [data-icon="dark"] { display: block; }
@keyframes castor-spin { to { transform: rotate(360deg); } }

/* ---------- Modification, suppression, commentaires ---------- */
.modal__tools { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; justify-content: flex-end; }
.btn--danger.is-armed { background: var(--danger); border-color: var(--danger); color: #fff; animation: armed-pulse 1s ease-in-out infinite; }
.btn:disabled { opacity: 0.6; cursor: not-allowed; }
@keyframes armed-pulse { 50% { box-shadow: 0 0 0 4px rgba(179, 38, 30, 0.2); } }

.ticket--flash { animation: ticket-flash 0.9s ease-out; }
@keyframes ticket-flash { from { background: var(--highlight); border-color: var(--primary); } to { background: var(--surface); } }

.comment__head .badge { margin-left: 0; font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; }

.comments { margin-top: 1.25rem; padding-top: 0.25rem; border-top: 1px solid var(--border); }
.comment-list { list-style: none; margin: 0 0 0.6rem; padding: 0; display: grid; gap: 0.75rem; }
.comment-list:empty { display: none; }
.comments__empty { margin: 0 0 0.75rem; font-size: 0.9rem; }
.comment { display: flex; gap: 0.65rem; }
.comment__avatar {
    flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%;
    background: var(--surface-2); color: var(--ink); font-weight: 700; font-size: 0.9rem;
}
.comment__body { flex: 1; min-width: 0; padding: 0.5rem 0.75rem; background: var(--bg); border: 1px solid var(--border); border-radius: 4px 12px 12px 12px; }
.comment__head { display: flex; align-items: center; flex-wrap: wrap; gap: 0.2rem 0.5rem; font-size: 0.88rem; }
.comment__head time { font-size: 0.78rem; }
.comment__text { margin: 0.2rem 0 0; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 0.93rem; }
.comment-form { display: grid; gap: 0.5rem; border-radius: 10px; }
.comment-form .actions { justify-content: flex-end; }
/* Fichiers d'un commentaire : barre « Joindre » + aperçus ; le formulaire entier est une zone de dépôt */
.comment-form.is-over { outline: 2px dashed var(--primary); outline-offset: 4px; background: var(--drop-bg); }
.comment-form .files--comment { margin: 0; }
.comment-form__bar { display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem; }
.comment-form__bar .btn { gap: 0.35rem; }
.comment-form__hint { flex: 1 1 12rem; min-width: 0; font-size: 0.8rem; }
.comment-form__bar [type="submit"] { margin-left: auto; }
.comment__body .thumbs--comment { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); margin: 0.5rem 0 0; }
.comment__body .file-links--comment { margin-top: 0.5rem; }

.files--existing { margin: 0.35rem 0 0.8rem; }
.file.is-removed { background: var(--danger-soft); border-color: var(--danger-border); }
.file.is-removed .file__name { text-decoration: line-through; color: var(--muted); }
.file.is-removed .file__thumb { opacity: 0.45; }


/* ---------- Colonnes personnalisables (administrateurs) ---------- */
.board__col-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.board__col-head { gap: 0.35rem; }
.board__col-head .count { margin-left: auto; }
.board__col-menu { color: var(--muted); }
.board__col-menu:hover { background: var(--glass); color: var(--text); }

.board__new-col {
    flex: 0 0 220px; align-self: flex-start; display: flex; align-items: center; justify-content: center; gap: 0.45rem;
    min-height: 56px; padding: 0.6rem 0.9rem; border: 2px dashed var(--border-strong); border-radius: 12px; background: transparent;
    color: var(--muted); font: inherit; font-weight: 600; cursor: pointer; scroll-snap-align: start;
    transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.board__new-col:hover, .board__new-col:focus-visible { border-color: var(--primary); color: var(--ink); background: var(--glass-soft); }

.modal--small { width: min(440px, calc(100vw - 1.5rem)); }
.danger-zone { margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--border); display: grid; gap: 0.6rem; }
.danger-zone h3 { margin: 0; font-size: 1rem; color: var(--danger-ink); }
.danger-zone p { margin: 0; font-size: 0.9rem; }
.danger-zone .btn { justify-self: start; }

.topbar__nav form { margin: 0; }
.topbar__nav a, .topbar__logout, .topbar__theme {
    display: inline-flex; align-items: center; min-height: 44px; padding: 0 0.75rem;
    color: #fff; text-decoration: none; opacity: 0.85; border-radius: 8px;
    background: none; border: 0; font: inherit; cursor: pointer;
}
.topbar__nav a:hover, .topbar__logout:hover, .topbar__theme:hover { opacity: 1; background: rgba(255, 255, 255, 0.12); }
.topbar__nav a[aria-current="page"] { opacity: 1; background: rgba(255, 255, 255, 0.18); font-weight: 600; }
.topbar :focus-visible { outline-color: #fff; }

.page {
    max-width: 900px; margin: 0 auto;
    padding: 1.25rem calc(1rem + env(safe-area-inset-right)) calc(2rem + env(safe-area-inset-bottom)) calc(1rem + env(safe-area-inset-left));
}
.page-head { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 0.75rem; margin-bottom: 1rem; }
.page-head h1 { margin: 0; }

.panel {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius); box-shadow: var(--shadow);
    padding: 1.1rem 1.25rem; margin-bottom: 1rem;
}
.panel--narrow { max-width: 420px; margin: 1.5rem auto; }
.panel--form { max-width: 560px; }

.stack > * + * { margin-top: 1rem; }
.actions { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; }
.actions form { margin: 0; }

/* ---------- Messages ---------- */
.flash {
    max-width: 900px; margin: 0.75rem auto 0; padding: 0.65rem 1rem; border-radius: 8px;
    width: calc(100% - 2rem);
}
.panel .flash { width: 100%; margin: 0 0 1rem; }
.flash--success { background: var(--success-soft); color: var(--success-ink); }
.flash--error { background: var(--danger-soft); color: var(--danger-ink); }

/* ---------- Formulaires ---------- */
label { display: block; font-weight: 600; font-size: 0.9rem; margin-bottom: 0.25rem; }
input[type="text"], input[type="email"], input[type="password"], textarea, select {
    width: 100%; min-height: 44px; padding: 0.55rem 0.7rem;
    border: 1px solid var(--input-border); border-radius: 8px;
    font: inherit; font-size: 1rem; /* 16px minimum : évite le zoom automatique sur iOS */
    background: var(--input-bg); color: inherit;
    transition: border-color 0.15s, box-shadow 0.15s;
}
input[type="text"]:focus, input[type="email"]:focus, input[type="password"]:focus, textarea:focus, select:focus {
    outline: none; border-color: var(--link); box-shadow: 0 0 0 3px rgba(168, 93, 46, 0.25);
}
textarea { resize: vertical; }
select {
    appearance: none; padding-right: 2.2rem; cursor: pointer;
    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='%236f6152' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 0.7rem center;
}
.help-text, .form-text { margin: 0.25rem 0 0; color: var(--muted); font-size: 0.85rem; }
form ul { margin: 0.25rem 0 0; padding-left: 1.1rem; color: var(--danger-ink); font-size: 0.9rem; }

.btn {
    display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 1rem;
    border: 1px solid var(--border); border-radius: 8px;
    background: var(--surface); color: var(--text);
    font: inherit; font-weight: 600; text-decoration: none; cursor: pointer; gap: 0.4rem;
    transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
}
.btn:hover { background: var(--surface-2); }
.btn--primary { box-shadow: 0 1px 2px rgba(108, 60, 27, 0.25); }
.btn--primary { background: var(--primary); border-color: var(--primary); color: #fff; }
.btn--primary:hover { background: var(--primary-dark); }
.btn--danger { color: var(--danger-ink); border-color: var(--danger-border); }
.btn--danger:hover { background: var(--danger-soft); }
.btn--sm { min-height: 40px; padding: 0 0.8rem; font-size: 0.9rem; }
.btn--block { width: 100%; }

/* ---------- Listes ---------- */
.list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.75rem; }
.list__item {
    display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 0.75rem;
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
    box-shadow: var(--shadow); padding: 0.9rem 1.1rem;
}
.list__main { display: grid; gap: 0.1rem; min-width: 0; flex: 1 1 220px; overflow-wrap: anywhere; }
.list__empty { padding: 1rem 0; }
.badge { display: inline-block; margin-left: 0.4rem; background: var(--primary); color: #fff; font-size: 0.7rem; padding: 0.05rem 0.5rem; border-radius: 999px; vertical-align: middle; }

/* ---------- Éléments créés / modifiés hors ligne, pas encore synchronisés ---------- */
.list__item--pending { border-style: dashed; border-color: var(--primary); background: var(--pending-bg); }
.list__item--deleted { opacity: 0.6; }
.list__item--deleted [data-field="name"] { text-decoration: line-through; }
.badge-pending { color: var(--ink); font-weight: 600; }
.badge-pending::before { content: "● "; font-size: 0.7em; vertical-align: 0.1em; }

/* ---------- Bandeau hors ligne / synchronisation ---------- */
.connection-status {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; text-align: center; font-size: 0.9rem;
    padding: 0.6rem calc(1rem + env(safe-area-inset-right)) calc(0.6rem + env(safe-area-inset-bottom)) calc(1rem + env(safe-area-inset-left));
    background: var(--banner-bg); color: #fff;
}
.connection-status--ok { background: #1f5a1a; }
.connection-status--error { background: var(--danger); }
body:has(.connection-status:not([hidden])) .page { padding-bottom: calc(4rem + env(safe-area-inset-bottom)); }


/* ---------- Utilitaires ---------- */
.visually-hidden {
    position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.pill {
    display: inline-flex; align-items: center; padding: 0.15rem 0.7rem; border-radius: 999px;
    background: var(--surface-2); color: var(--muted); font-size: 0.85rem; font-weight: 600; white-space: nowrap;
}
.icon-btn {
    display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; flex: none;
    border: 0; border-radius: 50%; background: none; color: var(--muted); cursor: pointer;
}
.icon-btn:hover { background: var(--surface-2); color: var(--text); }
.icon-btn--sm { width: 32px; height: 32px; }
.btn.is-loading { opacity: 0.7; pointer-events: none; }
.btn.is-loading::after {
    content: ""; width: 14px; height: 14px; border: 2px solid currentColor; border-right-color: transparent;
    border-radius: 50%; animation: castor-spin 0.7s linear infinite;
}
.form-error { background: var(--danger-soft); color: var(--danger-ink); border-radius: 8px; padding: 0.6rem 0.8rem; font-size: 0.9rem; }

/* ---------- Liste des projets ---------- */
.project__desc { font-size: 0.9rem; }
.project__meta { font-size: 0.8rem; color: var(--muted); }

/* ---------- Kanban ---------- */
.page--board { max-width: none; width: 100%; padding: 1rem clamp(0.75rem, 2vw, 1.5rem) 5rem; }

.board-head { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 0.75rem 1rem; margin-bottom: 1rem; }
.board-head h1 { margin: 0; font-size: 1.6rem; overflow-wrap: anywhere; }
.board-head__back { display: inline-block; margin-bottom: 0.2rem; font-size: 0.85rem; color: var(--muted); text-decoration: none; }
.board-head__back:hover { color: var(--link); text-decoration: underline; }
.board-head__desc { margin: 0.25rem 0 0; max-width: 62ch; }
.board-head__actions { display: flex; align-items: center; gap: 0.75rem; }

.board {
    display: flex; align-items: flex-start; gap: 0.9rem;
    overflow-x: auto; padding: 0.15rem 0.15rem 1rem;
    scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch;
}

.board__col {
    /* Les colonnes se partagent toute la largeur ; en dessous de 250 px chacune, la page défile horizontalement. */
    flex: 1 0 250px; min-width: 0; display: flex; flex-direction: column; scroll-snap-align: start;
    max-height: calc(100dvh - 12rem); min-height: 9rem;
    background: var(--col-bg); border: 1px solid var(--border);
    border-top: 3px solid var(--accent, var(--primary)); border-radius: 12px;
}
.board__col-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.7rem 0.85rem 0.35rem; }
.board__col-head h2 { flex: 1; min-width: 0; display: flex; align-items: center; gap: 0.5rem; margin: 0; font-size: 0.95rem; }
.board__col-head h2::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--accent, var(--primary)); }
.count { min-width: 1.6rem; padding: 0.05rem 0.5rem; border-radius: 999px; background: var(--glass-strong); color: var(--muted); font-size: 0.8rem; font-weight: 700; text-align: center; }

.board__list { flex: 1 1 auto; min-height: 4.5rem; overflow-y: auto; display: flex; flex-direction: column; gap: 0.5rem; padding: 0.35rem 0.55rem; }
.board__list:not(:has(.ticket))::before {
    content: "Aucun ticket"; display: grid; place-items: center; min-height: 4rem;
    border: 1px dashed var(--border-strong); border-radius: 10px; color: var(--muted); font-size: 0.85rem;
}

.board__add {
    display: flex; align-items: center; gap: 0.4rem; min-height: 44px; margin: 0.15rem 0.55rem 0.55rem; padding: 0.5rem 0.65rem;
    border: 0; border-radius: 8px; background: none; color: var(--muted); font: inherit; font-size: 0.9rem; font-weight: 600; text-align: left; cursor: pointer;
}
.board__add:hover { background: var(--glass); color: var(--ink); }

.ticket {
    padding: 0.7rem 0.8rem; background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
    box-shadow: var(--shadow); cursor: grab; transition: box-shadow 0.15s, transform 0.15s, border-color 0.15s;
}
.ticket:hover { border-color: var(--border-strong); box-shadow: var(--shadow-hover); }
.ticket__title { margin: 0; font-size: 0.95rem; font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }
.ticket__excerpt {
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
    margin: 0.3rem 0 0; font-size: 0.85rem; color: var(--muted); overflow-wrap: anywhere; white-space: pre-line;
}
.ticket__meta { display: flex; gap: 0.7rem; margin-top: 0.55rem; font-size: 0.78rem; color: var(--muted); }
.ticket__meta span { display: inline-flex; align-items: center; gap: 0.25rem; }
.ticket--ghost { opacity: 0.35; background: var(--surface-2); }
.ticket--chosen { cursor: grabbing; }
.ticket--drag { transform: rotate(2deg); box-shadow: var(--shadow-drag); }
.ticket--new { animation: ticket-in 0.4s ease-out; }
@keyframes ticket-in { from { opacity: 0; transform: translateY(-8px); background: var(--highlight); } to { opacity: 1; transform: none; } }


.board__col-add { color: var(--ink); background: var(--glass-soft); }
.board__col-add:hover { background: var(--primary); color: #fff; }
.fab {
    position: fixed; right: max(1rem, env(safe-area-inset-right)); bottom: calc(1rem + env(safe-area-inset-bottom)); z-index: 40;
    display: grid; place-items: center; width: 56px; height: 56px; border: 0; border-radius: 50%;
    background: var(--primary); color: #fff; cursor: pointer; box-shadow: 0 6px 18px rgba(108, 60, 27, 0.45);
    transition: transform 0.15s, background 0.15s;
}
.fab:hover { background: var(--primary-dark); transform: scale(1.06); }
.fab:focus-visible { outline: 3px solid rgba(138, 79, 39, 0.4); outline-offset: 3px; }

@media (max-width: 600px) {
    .board__col { flex-basis: min(84vw, 320px); max-height: calc(100dvh - 14rem); }
    .board-head h1 { font-size: 1.35rem; }
}

/* Ordinateur : des colonnes larges (360 px dès 1024 px, 400 px dès 1536 px, contre 250 px sur petit écran) ; elles s'étirent toujours pour remplir l'écran quand il y a de la place.
   Avec beaucoup de colonnes, le tableau défile horizontalement. */
@media (min-width: 1024px) {
    .board__col { flex-basis: 360px; }
    .board__new-col { flex-basis: 280px; }
}
@media (min-width: 1536px) {
    .board__col { flex-basis: 400px; }
    .board__new-col { flex-basis: 300px; }
}

/* Déplacement d'une colonne (administrateurs) : poignée dans l'en-tête, aimantation du défilement coupée pendant le geste */
.board__col-grip {
    flex: none; display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 32px; margin: 0 -0.2rem 0 -0.35rem;
    border-radius: 6px; color: var(--muted); opacity: 0.6; cursor: grab; touch-action: none;
}
.board__col-grip:hover, .board__col--chosen .board__col-grip { opacity: 1; background: var(--glass); color: var(--text); }
.board__col--chosen .board__col-grip { cursor: grabbing; }
.board__col--ghost { opacity: 0.4; }
.board__col--drag { box-shadow: var(--shadow-drag); }
.board--dragging { scroll-snap-type: none; }

/* ---------- Fenêtres (dialog) ---------- */
.modal {
    width: min(560px, calc(100vw - 1.5rem)); max-height: calc(100dvh - 2rem); padding: 0;
    border: 0; border-radius: 16px; background: var(--surface); color: var(--text);
    box-shadow: 0 24px 60px rgba(43, 33, 24, 0.4); overflow: hidden;
}
.modal[open] { animation: modal-in 0.18s ease-out; }
.modal::backdrop { background: rgba(43, 33, 24, 0.55); backdrop-filter: blur(2px); }
@keyframes modal-in { from { opacity: 0; transform: translateY(12px) scale(0.98); } to { opacity: 1; transform: none; } }

.modal__panel { max-height: calc(100dvh - 2rem); overflow-y: auto; padding: 1.1rem 1.25rem 1.25rem; }
.modal__head { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; margin-bottom: 0.9rem; }
.modal__head h2 { margin: 0; font-size: 1.2rem; }
.modal__head form { margin: 0; }
.modal__actions { justify-content: flex-end; padding-top: 0.25rem; }

/* Sur téléphone, la fenêtre devient un panneau qui monte depuis le bas */
@media (max-width: 600px) {
    .modal { width: 100%; max-width: none; margin: auto 0 0; border-radius: 16px 16px 0 0; max-height: 92dvh; }
    .modal__panel { max-height: 92dvh; padding-bottom: calc(1.25rem + env(safe-area-inset-bottom)); }
}

/* Zone de dépôt / collage de fichiers */
.dropzone {
    position: relative; display: flex; flex-direction: column; align-items: center; gap: 0.5rem; padding: 1rem;
    border: 2px dashed var(--input-border); border-radius: 12px; background: var(--bg); color: var(--muted); text-align: center;
    transition: border-color 0.15s, background 0.15s;
}
.dropzone.is-over { border-color: var(--primary); background: var(--drop-bg); color: var(--ink); }
.dropzone__text { margin: 0; font-size: 0.9rem; }
.dropzone__text strong { color: var(--text); }

.files, form .files { list-style: none; margin: 0.6rem 0 0; padding: 0; color: inherit; font-size: inherit; display: grid; gap: 0.4rem; }
.files:empty { display: none; }
.file { display: flex; align-items: center; gap: 0.6rem; min-width: 0; padding: 0.35rem 0.4rem 0.35rem 0.35rem; border: 1px solid var(--border); border-radius: 10px; background: var(--input-bg); color: inherit; text-decoration: none; }
a.file:hover { background: var(--surface-2); }
.file__thumb {
    flex: none; width: 40px; height: 40px; border-radius: 8px; object-fit: cover; background: var(--surface-2);
    display: grid; place-items: center; font-size: 0.65rem; font-weight: 800; letter-spacing: 0.02em; color: var(--ink);
}
.file__name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.9rem; }
.file__size { flex: none; color: var(--muted); font-size: 0.8rem; padding-right: 0.25rem; }

/* Détail d'un ticket */
.status-pill {
    display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.2rem 0.7rem; border-radius: 999px;
    background: color-mix(in srgb, var(--accent) 14%, var(--surface)); color: color-mix(in srgb, var(--accent) 80%, var(--pill-mix));
    font-size: 0.8rem; font-weight: 700;
}
.status-pill::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.ticket-view__title { margin: 0 0 0.6rem; font-size: 1.35rem; overflow-wrap: anywhere; }
.ticket-view__content { white-space: pre-wrap; overflow-wrap: anywhere; }
.ticket-view__subtitle { margin: 1.1rem 0 0.5rem; font-size: 0.95rem; color: var(--muted); }
.thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 0.5rem; margin-bottom: 0.6rem; }
.thumbs img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-2); }
.thumbs a:hover img { border-color: var(--primary); }
.file-links { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.4rem; }

/* Notification éphémère */
.toast {
    position: fixed; left: 50%; bottom: calc(1.25rem + env(safe-area-inset-bottom)); z-index: 60; transform: translateX(-50%);
    max-width: calc(100vw - 2rem); padding: 0.65rem 1.1rem; border-radius: 10px; background: #1f5a1a; color: #fff;
    font-size: 0.9rem; font-weight: 600; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25); animation: toast-in 0.2s ease-out;
}
.toast--error { background: var(--danger); }
@keyframes toast-in { from { opacity: 0; transform: translate(-50%, 8px); } to { opacity: 1; transform: translateX(-50%); } }

@media (prefers-reduced-motion: reduce) {
    .modal[open], .ticket--new, .ticket--flash, .toast, .btn.is-loading::after, .btn--danger.is-armed { animation: none; }
    .ticket, .btn, .dropzone { transition: none; }
}

/* ---------- Archivage et invités ---------- */
.pill--archived { background: var(--highlight); color: var(--ink); border-color: var(--border-strong); font-weight: 600; }
.archive-banner {
    margin: 0 0 1rem; padding: 0.65rem 0.9rem; border: 1px solid var(--border-strong); border-radius: var(--radius);
    background: var(--highlight); color: var(--text); font-size: 0.95rem;
}
.archive-banner a { color: var(--link); font-weight: 600; }
.archived { margin-top: 1.75rem; }
.archived > summary { cursor: pointer; font-weight: 600; color: var(--muted); padding: 0.4rem 0; }
.archived > summary:hover { color: var(--text); }
.archived .list { margin-top: 0.5rem; }
.list__item--archived { opacity: 0.85; border-style: dashed; }
.pseudo-label { max-width: 14ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }