/* Panel des référents : sobre, lisible, clair ou sombre selon l'appareil. */

:root {
    --bg: #f5f6f8;
    --surface: #ffffff;
    --surface-2: #f0f2f5;
    --ink: #0f172a;
    --ink-2: #5b6474;
    --rule: #e2e5ea;
    --accent: #4f46e5;
    --accent-ink: #ffffff;
    --accent-soft: #eef0ff;
    --good: #15803d;
    --good-soft: #e7f6ec;
    --warn: #b45309;
    --warn-soft: #fdf3e2;
    --bad: #b91c1c;
    --bad-soft: #fdecec;
    --muted-soft: #eef0f3;
    --radius: 12px;
    --shadow: 0 1px 2px rgba(15, 23, 42, .05), 0 1px 8px rgba(15, 23, 42, .04);
    color-scheme: light;
}
@media (prefers-color-scheme: dark) {
    :root {
        --bg: #0b1020;
        --surface: #121a2b;
        --surface-2: #182236;
        --ink: #e6e9f0;
        --ink-2: #98a2b6;
        --rule: #243049;
        --accent: #818cf8;
        --accent-ink: #0b1020;
        --accent-soft: #1f2547;
        --good: #4ade80;
        --good-soft: #12301f;
        --warn: #fbbf24;
        --warn-soft: #33270d;
        --bad: #f87171;
        --bad-soft: #3a1515;
        --muted-soft: #1c2638;
        --shadow: none;
        color-scheme: dark;
    }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 15px/1.5 Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
a { color: var(--accent); }
h1, h2, h3 { line-height: 1.2; }
.skip { position: absolute; left: -999px; }
.skip:focus { left: 1rem; top: 1rem; z-index: 10; background: var(--surface); padding: .5rem 1rem; }
.muted { color: var(--ink-2); }
.small { font-size: .85rem; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .9rem; }
.empty { color: var(--ink-2); margin: .4rem 0; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---------- Boutons et champs ---------- */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
    min-height: 40px; padding: 0 1.1rem; border-radius: 10px; border: 1px solid var(--accent);
    background: var(--accent); color: var(--accent-ink); font-family: inherit; font-weight: 600; font-size: .95rem; line-height: 1; text-decoration: none; cursor: pointer; white-space: nowrap;
}
.btn:hover { filter: brightness(1.07); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn.ghost { background: transparent; color: var(--ink); border-color: var(--rule); }
.btn.ghost:hover { background: var(--surface-2); filter: none; }
.btn.small { min-height: 32px; padding: 0 .7rem; font-size: .85rem; }
.btn.danger, .btn.ghost.danger { color: var(--bad); border-color: color-mix(in srgb, var(--bad) 40%, transparent); }
.linkbtn { background: none; border: 0; padding: 0; color: var(--ink-2); font: inherit; font-size: .88rem; text-decoration: underline; cursor: pointer; }
.linkbtn.danger { color: var(--bad); }
input[type="text"], input[type="search"], input[type="date"], input[type="url"], input[type="number"], select, textarea {
    width: 100%; min-height: 40px; padding: .5rem .7rem; border: 1px solid var(--rule); border-radius: 10px;
    background: var(--surface); color: var(--ink); font: inherit;
}
textarea { resize: vertical; min-height: 90px; }
input:hover, select:hover, textarea:hover { border-color: var(--ink-2); }
.field { display: grid; gap: .3rem; align-content: start; }
.field > span { font-weight: 600; font-size: .88rem; }
.field[hidden] { display: none; }
.form-error { color: var(--bad); margin: 0; font-weight: 600; }
.form-error:empty { display: none; }
.actions { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
.alert { padding: .7rem 1rem; border-radius: 10px; background: var(--bad-soft); color: var(--bad); font-weight: 600; }

/* ---------- Pastilles ---------- */
.chip { display: inline-flex; align-items: center; padding: .1rem .55rem; border-radius: 999px; font-size: .78rem; font-weight: 600; white-space: nowrap; background: var(--muted-soft); color: var(--ink-2); }
.st-active, .rs-conforme { background: var(--good-soft); color: var(--good); }
.st-watch, .rs-a_revoir, .soon { background: var(--warn-soft); color: var(--warn); }
.st-suspended, .rs-non_conforme, .late { background: var(--bad-soft); color: var(--bad); }
.st-closed, .st-vacant { background: var(--muted-soft); color: var(--ink-2); }
.st-vacant { background: var(--warn-soft); color: var(--warn); }
.ap-planned { background: var(--accent-soft); color: var(--accent); }
.ap-done { background: var(--good-soft); color: var(--good); }
.ap-cancelled { background: var(--muted-soft); color: var(--ink-2); text-decoration: line-through; }
.chips { display: inline-flex; flex-wrap: wrap; gap: .3rem; align-items: center; }
.never { background: var(--accent-soft); color: var(--accent); }
.count { display: inline-flex; min-width: 1.6rem; justify-content: center; padding: 0 .45rem; border-radius: 999px; background: var(--surface-2); color: var(--ink-2); font-size: .8rem; font-weight: 600; }

.avatar { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; flex: none; }
.avatar.ph { display: inline-flex; align-items: center; justify-content: center; background: var(--accent-soft); color: var(--accent); font-weight: 700; font-size: .8rem; }

/* ---------- Connexion ---------- */
.login { min-height: 100vh; display: grid; place-content: center; justify-items: center; text-align: center; gap: .6rem; padding: 2rem 1rem; max-width: 30rem; margin: 0 auto; }
.login h1 { margin: .4rem 0 0; font-size: 2.2rem; }
.login .lead { margin: 0; font-weight: 600; color: var(--accent); }
.login p { margin: 0; }
.login .btn { margin-top: .8rem; min-height: 46px; padding: 0 1.6rem; }

/* ---------- Cadre ---------- */
.shell { display: grid; grid-template-columns: 250px minmax(0, 1fr); min-height: 100vh; }
.shell > * { min-width: 0; }
.side { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; gap: 1.2rem; padding: 1.2rem .9rem; background: var(--surface); border-right: 1px solid var(--rule); }
.brand { display: flex; align-items: center; gap: .6rem; text-decoration: none; color: var(--ink); padding: 0 .4rem; }
.brand span { display: grid; line-height: 1.15; }
.brand small { color: var(--ink-2); font-size: .78rem; }
.nav { display: grid; gap: .15rem; }
.nav a { display: flex; align-items: center; gap: .6rem; padding: .55rem .7rem; border-radius: 9px; color: var(--ink-2); text-decoration: none; font-weight: 500; }
.nav a:hover { background: var(--surface-2); color: var(--ink); }
.nav a[aria-current="page"] { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.nav .ico { width: 1.3rem; text-align: center; }
.me { margin-top: auto; display: flex; align-items: center; gap: .55rem; padding: .7rem .5rem 0; border-top: 1px solid var(--rule); flex-wrap: wrap; }
.me-name { display: grid; line-height: 1.2; flex: 1; min-width: 0; }
.me-name strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.me-name small { color: var(--ink-2); font-size: .78rem; }
.me .linkbtn { flex-basis: 100%; text-align: left; }
main { padding: 1.6rem clamp(1rem, 3vw, 2.4rem) 4rem; display: grid; gap: 1rem; align-content: start; max-width: 1200px; width: 100%; }
.page-head h1 { margin: 0; font-size: 1.7rem; }
.page-head p { margin: .2rem 0 0; }
.card { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius); padding: 1rem 1.1rem; box-shadow: var(--shadow); display: grid; gap: .7rem; align-content: start; min-width: 0; }
.card h2 { margin: 0; font-size: 1.05rem; }
.card p { margin: 0; }
.card > .btn { justify-self: start; }
.back { text-decoration: none; font-weight: 500; }

@media (max-width: 860px) {
    .shell { grid-template-columns: minmax(0, 1fr); }
    .side { position: sticky; top: 0; z-index: 5; height: auto; flex-direction: row; flex-wrap: wrap; align-items: center; gap: .5rem .8rem; padding: .6rem 1rem; border-right: 0; border-bottom: 1px solid var(--rule); }
    .brand small { display: none; }
    .nav { order: 3; width: 100%; display: flex; overflow-x: auto; gap: .2rem; padding-bottom: .1rem; scrollbar-width: none; }
    .nav a { white-space: nowrap; padding: .45rem .65rem; font-size: .9rem; }
    .me { margin: 0 0 0 auto; padding: 0; border: 0; flex-wrap: nowrap; }
    .me-name { display: none; }
    .me .linkbtn { flex-basis: auto; }
}

/* ---------- Tableau de bord ---------- */
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .7rem; }
.tile { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius); padding: .9rem 1rem; display: grid; gap: .1rem; text-decoration: none; color: var(--ink); box-shadow: var(--shadow); }
a.tile:hover { border-color: var(--accent); }
.tile strong { font-size: 1.8rem; line-height: 1.1; }
.tile span { color: var(--ink-2); font-size: .88rem; }
.tile.warn strong { color: var(--warn); }
.cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: 1rem; align-items: start; }
.lines { display: grid; }
.line { display: flex; align-items: center; gap: .7rem; padding: .55rem .2rem; border-top: 1px solid var(--rule); color: var(--ink); text-decoration: none; min-width: 0; }
.line:first-child { border-top: 0; }
a.line:hover { background: var(--surface-2); border-radius: 8px; }
.line-ico { font-size: 1.2rem; width: 1.6rem; text-align: center; flex: none; }
.line-main { display: grid; flex: 1; min-width: 0; line-height: 1.3; }
.line-main strong, .line-main small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.right { text-align: right; flex: none; }

/* ---------- Entreprises ---------- */
.toolbar { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.toolbar input[type="search"] { flex: 1 1 16rem; }
.toolbar select { flex: 1 1 11rem; width: auto; max-width: 16rem; }
@media (max-width: 640px) { .toolbar select { max-width: none; } }
.toolbar p { margin: 0; flex: 1 1 18rem; }
.groups { display: grid; gap: 1.2rem; }
.group-head { margin: 0 0 .45rem; font-size: 1rem; display: flex; align-items: center; gap: .35rem; }
.rows { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
.row { position: relative; display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) auto auto; align-items: center; gap: .8rem; padding: .7rem 1rem; border-top: 1px solid var(--rule); color: var(--ink); text-decoration: none; }
/* Le lien du nom couvre toute la ligne ; les actions passent par-dessus */
.row-link { color: var(--ink); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row-link::after { content: ""; position: absolute; inset: 0; }
.row-link:focus-visible { outline: none; }
.row-link:focus-visible::after { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: var(--radius); }
.row-actions { position: relative; z-index: 1; display: flex; gap: .4rem; align-items: center; }
.row-actions select.row-type { width: auto; min-height: 32px; padding: .2rem .5rem; font-size: .85rem; max-width: 11rem; }
.row:first-child { border-top: 0; }
.row:hover { background: var(--surface-2); }
.row-main { display: grid; min-width: 0; line-height: 1.3; }
.row-main strong, .row-main small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row-ref { display: flex; align-items: center; gap: .4rem; min-width: 0; color: var(--ink-2); }
.row-ref small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row-tags { display: flex; gap: .35rem; flex-wrap: wrap; justify-content: flex-end; }
@media (max-width: 640px) {
    .row { grid-template-columns: minmax(0, 1fr) auto; }
    .row-ref { grid-row: 2; }
    .row-tags { grid-row: 1 / span 2; grid-column: 2; flex-direction: column; align-items: flex-end; }
    .row-actions { grid-row: 3; grid-column: 1 / -1; }
    .row-actions select.row-type { flex: 1; max-width: none; }
}

/* Formulaires */
.form { gap: 1rem; }
.grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: .8rem 1rem; }
.grid3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); gap: .8rem; }

/* Fiche entreprise */
.company-title { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; }
.company-title h2 { font-size: 1.35rem; }
.company-title p { margin: 0; }
.company-title .tags { margin-left: auto; display: flex; gap: .35rem; flex-wrap: wrap; }
.big-ico { font-size: 2rem; width: 3rem; height: 3rem; display: grid; place-items: center; background: var(--surface-2); border-radius: 12px; }
.infos { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); gap: .7rem 1rem; padding: .8rem 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.info { display: grid; gap: .1rem; min-width: 0; }
.info > span { overflow-wrap: anywhere; }
.info select { min-height: 34px; padding: .25rem .5rem; }
.ref-line { display: inline-flex; align-items: center; gap: .45rem; min-width: 0; }
.notes { white-space: pre-wrap; background: var(--surface-2); border-radius: 10px; padding: .7rem .8rem; }
.report-form { display: grid; gap: .8rem; }
.timeline { display: grid; gap: .6rem; }
.report { border: 1px solid var(--rule); border-left: 4px solid var(--rule); border-radius: 10px; padding: .7rem .9rem; display: grid; gap: .4rem; }
.report.k-inspection, .report.k-controle { border-left-color: var(--accent); }
.report.k-avertissement { border-left-color: var(--warn); }
.report.k-sanction { border-left-color: var(--bad); }
.report-head { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .6rem; }
.report-kind { font-weight: 700; }
.report-head small { margin-left: auto; }
.report-text { white-space: pre-wrap; overflow-wrap: anywhere; }
.report-actions { display: flex; gap: .9rem; }

/* ---------- Répartition ---------- */
.assign-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 270px), 1fr)); gap: .8rem; align-items: start; }
.assign-col.warn { border-color: color-mix(in srgb, var(--warn) 50%, var(--rule)); background: var(--warn-soft); }
.assign-col.heavy { border-color: color-mix(in srgb, var(--warn) 50%, var(--rule)); }
.assign-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.assign-item { display: grid; gap: .3rem; padding: .5rem 0; border-top: 1px solid var(--rule); }
.assign-item a { color: var(--ink); text-decoration: none; font-weight: 500; }
.assign-item a:hover { color: var(--accent); }
.assign-item select { min-height: 32px; padding: .2rem .5rem; font-size: .88rem; }

/* ---------- Référents ---------- */
.ref-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: .8rem; }
.ref-card.off { opacity: .6; }
.ref-card .ref-line > div { display: grid; line-height: 1.25; }
.ref-card .avatar { width: 40px; height: 40px; }
.mini-stats { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.mini-stats > div { background: var(--surface-2); border-radius: 10px; padding: .5rem .6rem; display: grid; }
.mini-stats strong { font-size: 1.3rem; }
.mini-stats small { color: var(--ink-2); font-size: .78rem; }
.ref-card .btn { justify-self: start; }

/* ---------- Réglages ---------- */
.types { display: grid; gap: .45rem; }
.type-row { display: flex; gap: .45rem; align-items: center; flex-wrap: wrap; }
.type-row input[type="text"] { flex: 1 1 12rem; width: auto; }
.type-row input.emoji-in { flex: 0 0 3.4rem; width: 3.4rem; min-width: 0; text-align: center; padding: .5rem .3rem; }
.type-row.add { padding-top: .6rem; border-top: 1px dashed var(--rule); }

/* ---------- Formulaires enrichis ---------- */
.form-sec { margin: .3rem 0 -.3rem; font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-2); }
.checks { display: flex; flex-wrap: wrap; gap: .4rem 1rem; align-items: center; }
.check { display: inline-flex; align-items: center; gap: .4rem; cursor: pointer; font-size: .92rem; }
.check input { width: 1.05rem; height: 1.05rem; accent-color: var(--accent); margin: 0; }
.check .avatar { width: 20px; height: 20px; font-size: .65rem; }
.points { border: 1px solid var(--rule); border-radius: 10px; padding: .7rem .9rem .9rem; margin: 0; display: grid; gap: .6rem; min-width: 0; }
.points[hidden] { display: none; }
.points legend { padding: 0 .3rem; font-weight: 600; font-size: .88rem; }
.points textarea { min-height: 56px; }
.points-view { margin: 0; display: grid; gap: .15rem .8rem; grid-template-columns: minmax(8rem, max-content) 1fr; }
.points-view dt { font-weight: 600; font-size: .88rem; }
.points-view dd { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
@media (max-width: 640px) { .points-view { grid-template-columns: 1fr; } .points-view dd { margin-bottom: .4rem; } }
.hint { margin: 0; font-size: .88rem; color: var(--ink-2); background: var(--surface-2); border-radius: 8px; padding: .45rem .7rem; }
.hint[hidden] { display: none; }
.hint.warn { background: var(--warn-soft); color: var(--warn); }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; flex-wrap: wrap; }
.rules summary { cursor: pointer; font-weight: 600; color: var(--ink-2); font-size: .9rem; }
.rules-text { white-space: pre-wrap; margin-top: .5rem !important; font-size: .9rem; background: var(--surface-2); border-radius: 10px; padding: .7rem .8rem; }

/* ---------- Rendez-vous ---------- */
.report.k-appt { border-left-color: var(--accent); }
.report.appt-done { border-left-color: var(--good); }
.report.appt-cancelled { border-left-color: var(--rule); opacity: .75; }
.people { display: flex; flex-wrap: wrap; gap: .35rem; }
.person { display: inline-flex; align-items: center; gap: .3rem; padding: .1rem .55rem .1rem .2rem; border-radius: 999px; background: var(--surface-2); font-size: .85rem; }
.person .avatar { width: 18px; height: 18px; font-size: .6rem; }
.person.loose { padding-left: .55rem; border: 1px dashed var(--rule); background: transparent; }

/* ---------- Tableaux (micros, fiscal) ---------- */
.table-wrap { overflow-x: auto; margin: 0 -.2rem; }
.table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.table th { text-align: left; font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-2); font-weight: 600; padding: .45rem .5rem; border-bottom: 1px solid var(--rule); white-space: nowrap; }
.table td { padding: .4rem .5rem; border-bottom: 1px solid var(--rule); vertical-align: middle; }
.table tr:last-child td { border-bottom: 0; }
.table .num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.table td a { color: var(--ink); font-weight: 500; text-decoration: none; }
.table td a:hover { color: var(--accent); }
.table input, .table select { min-height: 34px; padding: .25rem .5rem; font-size: .9rem; }
.table input.money-in { min-width: 7.5rem; text-align: right; font-variant-numeric: tabular-nums; }
.table.fiscal td:last-child input { min-width: 10rem; }
.table.fiscal select { min-width: 9.5rem; }
.table tr.over td { background: var(--bad-soft); }
.table tr.projet td { background: var(--muted-soft); }
.pos { color: var(--good); }
.neg { color: var(--bad); }
.micro-form { display: flex; flex-wrap: wrap; gap: .45rem; align-items: center; padding-top: .7rem; }
.micro-form input[type="text"] { flex: 1 1 9rem; width: auto; }
.micro-form input[type="number"] { flex: 0 0 4.5rem; width: 4.5rem; }
.micro-form select { flex: 0 1 9rem; width: auto; }
.micro-form .form-error { flex-basis: 100%; }
.fiscal-card { text-decoration: none; color: var(--ink); }
a.fiscal-card:hover { border-color: var(--accent); }
.mini-stats.three { grid-template-columns: repeat(3, 1fr); }
.mini-stats .warn strong { color: var(--warn); }
.alias-name { flex: 0 1 12rem; font-weight: 600; overflow-wrap: anywhere; }
.type-row select { flex: 1 1 12rem; width: auto; }

/* ---------- Message éphémère ---------- */
#toast { position: fixed; left: 50%; bottom: 1.2rem; transform: translate(-50%, 150%); visibility: hidden; background: var(--ink); color: var(--bg); padding: .6rem 1.1rem; border-radius: 10px; font-weight: 600; transition: transform .2s; z-index: 20; max-width: calc(100% - 2rem); }
#toast.show { transform: translate(-50%, 0); visibility: visible; }
#toast.error { background: var(--bad); color: #fff; }
@media (prefers-reduced-motion: reduce) { #toast { transition: none; } }

/* ---------- Espace patron ---------- */
.patron-shell { min-height: 100vh; }
.patron-top { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .7rem clamp(1rem, 3vw, 2.4rem); background: var(--surface); border-bottom: 1px solid var(--rule); }
.patron-top .me { margin: 0; padding: 0; border: 0; display: flex; align-items: center; gap: .55rem; flex-wrap: nowrap; }
.patron-shell main { margin: 0 auto; }
.patron-co { display: grid; gap: 1rem; }
.checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; }
.checklist li.ko { color: var(--ink-2); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.role-editor { display: grid; gap: .5rem; justify-items: start; }
.role-editor .types { width: 100%; }

/* ---------- Pages externes (carte, guide) ---------- */
.embed { display: grid; gap: .5rem; }
.embed-bar { display: flex; align-items: center; justify-content: space-between; gap: .6rem; flex-wrap: wrap; }
.embed-frame { width: 100%; height: 70vh; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--surface-2); }
.embed-frame.tall { height: calc(100vh - 220px); min-height: 420px; }

/* ---------- Mon espace ---------- */
.space-head .ref-line { gap: .9rem; }
.space-head .avatar { width: 56px; height: 56px; font-size: 1.3rem; }
.space-head h2 { font-size: 1.3rem; }

/* ---------- Entretiens ---------- */
.interview-kind .btn { justify-self: start; }
.interview-form { display: grid; gap: 1rem; }
.question { display: grid; gap: .35rem; padding-top: .7rem; border-top: 1px solid var(--rule); }
.question:first-of-type { border-top: 0; padding-top: 0; }
.q-text { margin: 0; font-weight: 600; }
.q-num { color: var(--accent); }
.answers { margin: 0; padding-left: 1.3rem; display: grid; gap: .8rem; }
.answers li::marker { color: var(--accent); font-weight: 700; }
.answers p { margin: 0; }
.sticky-actions { position: sticky; bottom: 0; z-index: 3; background: var(--bg); padding: .7rem 0; border-top: 1px solid var(--rule); }

/* ---------- À surveiller ---------- */
.template summary { cursor: pointer; font-weight: 600; }
.template-text { margin: 0; padding: .7rem .8rem; background: var(--surface-2); border-radius: 10px; white-space: pre-wrap; font-size: .88rem; overflow-x: auto; }
.watch-report.closed { opacity: .75; }
.field-label { font-weight: 600; font-size: .88rem; }

/* ---------- Cases modifiables sur place (registre des micros) ---------- */
.table .cell-in { width: 100%; min-width: 7rem; min-height: 32px; padding: .25rem .45rem; border: 1px solid transparent; border-radius: 8px; background: transparent; font-size: .92rem; }
.table .cell-in:hover { border-color: var(--rule); background: var(--surface); }
.table .cell-in:focus { border-color: var(--accent); background: var(--surface); outline: none; }
.table .qty-in { width: 4.2rem; min-width: 0; text-align: right; }
.table tr.saved td { animation: saved 1.2s ease-out; }
@keyframes saved { from { background: var(--good-soft); } to { background: transparent; } }
@media (prefers-reduced-motion: reduce) { .table tr.saved td { animation: none; } }

/* ---------- Logo ---------- */
img.logo { border-radius: 10px; object-fit: cover; }
.login img.logo { border-radius: 20px; box-shadow: 0 6px 30px rgba(234, 179, 8, .35); }

/* ---------- Image de fond (désactivable) ---------- */
body.with-bg {
    background:
        linear-gradient(color-mix(in srgb, var(--bg) 82%, transparent), color-mix(in srgb, var(--bg) 90%, transparent)),
        url("/fond.jpg") center / cover fixed no-repeat,
        var(--bg);
}
body.with-bg .side, body.with-bg .patron-top { background: color-mix(in srgb, var(--surface) 88%, transparent); backdrop-filter: blur(8px); }
body.with-bg .sticky-actions { background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: blur(6px); }
.bg-toggle { font-size: .8rem; }
.me .bg-toggle { flex-basis: 100%; text-align: left; }
@media (max-width: 860px) { .me .bg-toggle { display: none; } }

/* ---------- Registre (tableau façon tableur) ---------- */
.registry .group-row th { padding-top: 1rem; font-size: .85rem; text-transform: none; letter-spacing: 0; color: var(--ink); background: transparent; border-bottom: 1px solid var(--rule); }
.registry td:first-child a { white-space: nowrap; }
.registry { table-layout: fixed; min-width: 760px; }
.registry th, .registry td { padding-left: .3rem; padding-right: .3rem; }
.registry .cell-in { min-width: 0; }
.registry th:nth-child(1) { width: 15%; }
.registry th:nth-child(2) { width: 10%; }
.registry th:nth-child(3) { width: 17%; }
.registry th:nth-child(4) { width: 18%; }
.registry th:nth-child(5) { width: 32%; }
.registry th:nth-child(6) { width: 8%; }
.registry thead th { white-space: normal; line-height: 1.25; }
.registry td:first-child a { white-space: normal; }

/* ---------- Menu en sections ---------- */
.nav-sec { margin: .7rem 0 .15rem; padding: 0 .7rem; font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-2); opacity: .8; }
.side { overflow-y: auto; }
@media (max-width: 860px) { .nav-sec { display: none; } }

/* ---------- Votes ---------- */
.tally { display: grid; gap: .35rem; }
.tally-bar { display: flex; height: 12px; border-radius: 999px; overflow: hidden; background: var(--surface-2); }
.tally-bar span { display: block; height: 100%; }
.t-pour { background: var(--good); }
.t-neutre { background: var(--ink-2); opacity: .5; }
.t-contre { background: var(--bad); }
.tally-legend { display: flex; gap: 1rem; flex-wrap: wrap; font-size: .88rem; color: var(--ink-2); }
.report.ballot.b-pour { border-left-color: var(--good); }
.report.ballot.b-contre { border-left-color: var(--bad); }
.btn.choice-pour:not(.ghost) { background: var(--good); border-color: var(--good); color: #fff; }
.btn.choice-contre:not(.ghost) { background: var(--bad); border-color: var(--bad); color: #fff; }
.btn.choice-neutre:not(.ghost) { background: var(--ink-2); border-color: var(--ink-2); color: var(--bg); }
.report.closed { opacity: .75; }

/* ---------- Diplômes ---------- */
.diplomas { display: grid; gap: .8rem; }
.diploma-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: .7rem; }
.diploma { display: flex; gap: .8rem; align-items: flex-start; padding: .7rem; border: 1px solid var(--rule); border-radius: 10px; background: var(--surface); min-width: 0; }
.diploma-img img { width: 96px; height: 70px; object-fit: cover; border-radius: 6px; border: 1px solid var(--rule); display: block; background: #fff; }
.diploma-ico { font-size: 2rem; width: 3rem; text-align: center; }
.diploma-main { display: grid; gap: .1rem; min-width: 0; flex: 1; }
.diploma .report-form { flex: 1; }
.add-diploma summary { cursor: pointer; font-weight: 600; color: var(--accent); }
.add-diploma[open] summary { margin-bottom: .6rem; }

/* ---------- Onglets (Équipe) ---------- */
.tabs { display: flex; gap: .3rem; border-bottom: 1px solid var(--rule); }
.tab { padding: .55rem .9rem; border-radius: 9px 9px 0 0; color: var(--ink-2); text-decoration: none; font-weight: 600; border: 1px solid transparent; border-bottom: 0; margin-bottom: -1px; }
.tab:hover { color: var(--ink); background: var(--surface-2); }
.tab[aria-current="page"] { color: var(--accent); background: var(--surface); border-color: var(--rule); }