/* ApiCore — feuille de style unique
   Thème par défaut : charte de resa.lesruchesdelalimagne.fr (noir #1C1C1C, or #C8840A, police Inter) */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
:root {
    --dark: #1C1C1C;          /* barre latérale */
    --bg: #F7F7F7;            /* fond de page */
    --surface: #ffffff;       /* cartes, barre du haut */
    --ink: #1C1C1C;           /* titres */
    --muted: #888888;         /* texte secondaire */
    --line: #EBEBEB;          /* bordures */
    --brand: #C8840A;         /* or : boutons, accents */
    --brand-dark: #A86E06;    /* survol, liens */
    --brand-light: #E8A020;   /* or clair : menu actif */
    --brand-soft: #FFF3DC;    /* ambre clair : fonds légers */
    --ok: #2E7D32;     --ok-soft: #E8F5E9;
    --info: #1976D2;   --info-soft: #E3F2FD;
    --warn: #B26A00;   --warn-soft: #FFF3DC;
    --danger: #D32F2F; --danger-soft: #FDECEA;
    --radius: 8px;
    --shadow: 0 2px 10px rgba(0, 0, 0, .06);
    --font: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body { font: 14px/1.5 var(--font); background: var(--bg); color: #444; }
a { color: var(--brand-dark); }
h1 { font-size: 1.45rem; margin: 0; }
h3 { font-size: 1.05rem; margin: 0 0 .6rem; }
code, .mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
code.big { font-size: 1.15rem; background: #fff; padding: .15rem .5rem; border-radius: 6px; border: 1px solid var(--line); }
.muted { color: var(--muted); }
.small { font-size: .82rem; }
.center { text-align: center; }
.right { text-align: right; }
.nowrap { white-space: nowrap; }
.inline { display: inline; }

/* ---------- Barre supérieure ---------- */
.topbar {
    position: sticky; top: 0; z-index: 20;
    display: flex; align-items: center; gap: 1rem;
    height: 56px; padding: 0 1rem;
    background: #2a2416; color: #f4ead2;
}
.topbar a { color: #f4ead2; text-decoration: none; }
.brand { font-weight: 700; font-size: 1.1rem; letter-spacing: .2px; display: flex; align-items: center; gap: .4rem; }
.logo { color: var(--brand); font-size: 1.3rem; }
.topbar-expl { flex: 1; min-width: 0; }
.topbar-expl a { display: inline-flex; align-items: center; gap: .5rem; padding: .3rem .7rem; border-radius: 8px; background: rgba(255,255,255,.07); max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.topbar-expl .napi { font-family: ui-monospace, monospace; font-size: .8rem; color: #e8c674; }
.topbar-expl .role { font-size: .75rem; opacity: .7; }
.topbar-user { display: flex; align-items: center; gap: .6rem; font-size: .9rem; }
.menu-toggle { display: none; background: none; border: 0; color: inherit; font-size: 1.4rem; cursor: pointer; }

/* ---------- Structure ---------- */
.shell { display: flex; min-height: calc(100vh - 56px); }
.sidebar { width: 240px; flex-shrink: 0; background: var(--surface); border-right: 1px solid var(--line); padding: 1rem .6rem; }
.sidebar h4 { font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin: 1.1rem .6rem .3rem; }
.sidebar ul { list-style: none; margin: 0; padding: 0; }
.sidebar a { display: block; padding: .42rem .6rem; border-radius: 7px; color: var(--ink); text-decoration: none; font-size: .93rem; }
.sidebar a:hover { background: var(--bg); }
.sidebar a.active { background: var(--brand-soft); color: var(--brand-dark); font-weight: 600; }
.sidebar .version { color: var(--muted); font-size: .75rem; margin: 1.5rem .6rem 0; }
.content { flex: 1; min-width: 0; padding: 1.4rem 1.6rem 3rem; max-width: 1300px; }

.page-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .8rem; margin-bottom: 1rem; }
.page-head .actions { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }

/* ---------- Cartes ---------- */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.1rem 1.2rem; margin-bottom: 1rem; box-shadow: var(--shadow); }
.card.no-pad { padding: 0; overflow: hidden; }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1rem; }
.cards .card { margin: 0; }
.expl-card.current { border-color: var(--brand); }
.grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1rem; }
.widgets { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 1rem; }
.widgets .card { margin: 0; }
.help-box { background: var(--info-soft); color: #1e4565; border-radius: var(--radius); padding: .7rem 1rem; margin-bottom: 1rem; font-size: .92rem; }
.help-box p { margin: .3rem 0; }

/* ---------- Statistiques ---------- */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: .6rem; }
.stat { background: var(--bg); border-radius: 8px; padding: .6rem .7rem; }
.stat b { display: block; font-size: 1.5rem; line-height: 1.1; }
.stat span { font-size: .8rem; color: var(--muted); }
.list-plain { list-style: none; padding: 0; margin: 0; }
.list-plain li { padding: .35rem 0; border-bottom: 1px solid var(--line); }
.list-plain li:last-child { border-bottom: 0; }

/* ---------- Boutons ---------- */
.btn { display: inline-flex; align-items: center; gap: .3rem; padding: .48rem .9rem; border-radius: 8px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); font: inherit; font-size: .92rem; cursor: pointer; text-decoration: none; line-height: 1.2; }
.btn:hover { border-color: #cfc6b2; }
.btn-primary { background: var(--brand); border-color: var(--brand); color: #fff; font-weight: 600; }
.btn-primary:hover { background: var(--brand-dark); border-color: var(--brand-dark); }
.btn-light { background: transparent; }
.btn-danger { color: var(--danger); border-color: #e7c2bf; background: #fff; }
.btn-danger:hover { background: var(--danger-soft); }
.btn-ghost { background: transparent; border-color: rgba(255,255,255,.25); color: #f4ead2; }
.btn-sm { padding: .28rem .6rem; font-size: .82rem; }
.btn-block { width: 100%; justify-content: center; }

/* ---------- Badges & alertes ---------- */
.badge { display: inline-block; padding: .1rem .5rem; border-radius: 99px; font-size: .75rem; font-weight: 600; background: var(--line); color: var(--ink); vertical-align: middle; }
.badge-ok { background: var(--ok-soft); color: var(--ok); }
.badge-info { background: var(--info-soft); color: var(--info); }
.badge-warn { background: var(--warn-soft); color: var(--warn); }
.badge-danger { background: var(--danger-soft); color: var(--danger); }
.alert { padding: .75rem 1rem; border-radius: var(--radius); margin-bottom: 1rem; border: 1px solid transparent; }
.alert ul { margin: .3rem 0 0; padding-left: 1.2rem; }
.alert-success { background: var(--ok-soft); color: #1f5a34; border-color: #c5e5cf; }
.alert-error { background: var(--danger-soft); color: #7d211c; border-color: #efc5c1; }
.alert-warning { background: var(--warn-soft); color: #6b4700; border-color: #f0dca8; }
.alert-info { background: var(--info-soft); color: #1e4565; }

/* ---------- Tableaux ---------- */
.table-wrap { overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.table th { text-align: left; font-size: .76rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); background: #faf8f3; padding: .6rem .7rem; border-bottom: 1px solid var(--line); }
.table td { padding: .55rem .7rem; border-bottom: 1px solid var(--line); vertical-align: top; }
.table tbody tr:hover { background: #fcfbf7; }
.table tr:last-child td { border-bottom: 0; }
.table.compact td, .table.compact th { padding: .35rem .55rem; }
.table td.old { color: var(--muted); text-decoration: line-through; }
tr.row-warn td:first-child { box-shadow: inset 3px 0 var(--warn); }
tr.row-danger td:first-child { box-shadow: inset 3px 0 var(--danger); }
tr.row-muted { opacity: .6; }
.pager { display: flex; flex-wrap: wrap; gap: .3rem; margin: 1rem 0; }
.pager a, .pager span { padding: .25rem .6rem; border-radius: 6px; border: 1px solid var(--line); text-decoration: none; background: #fff; }
.pager .current { background: var(--brand); color: #fff; border-color: var(--brand); }

/* ---------- Fiches ---------- */
.details { display: grid; grid-template-columns: minmax(160px, 240px) 1fr; gap: .45rem 1rem; margin: 0; }
.details dt { color: var(--muted); font-size: .9rem; }
.details dd { margin: 0; }
.section-title { font-size: .85rem; text-transform: uppercase; letter-spacing: .06em; color: var(--brand-dark); margin: 1.1rem 0 .5rem; padding-top: .7rem; border-top: 1px dashed var(--line); }
.form-grid .section-title:first-of-type { border-top: 0; padding-top: 0; margin-top: 0; }
.meta { margin: 1rem 0 0; font-size: .82rem; }
.timeline { list-style: none; margin: 0; padding: 0; }
.timeline li { display: grid; grid-template-columns: 95px 1fr; gap: .8rem; padding: .5rem 0; border-bottom: 1px solid var(--line); }
.timeline li:last-child { border-bottom: 0; }
.timeline .when { color: var(--muted); font-size: .85rem; }
.history-head { margin-bottom: .5rem; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }

/* ---------- Formulaires ---------- */
input, select, textarea { font: inherit; color: inherit; border: 1px solid #d5cebf; border-radius: 7px; padding: .45rem .6rem; background: #fff; width: 100%; max-width: 100%; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--brand-soft); border-color: var(--brand); }
input[type=checkbox], input[type=radio] { width: auto; }
input[disabled] { background: var(--bg); color: var(--muted); }
textarea { resize: vertical; }
label { font-size: .9rem; }
.stack { display: flex; flex-direction: column; gap: .7rem; }
.stack label { display: flex; flex-direction: column; gap: .25rem; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .9rem 1.2rem; }
.form-grid .full { grid-column: 1 / -1; }
.field label { display: block; font-weight: 600; margin-bottom: .25rem; }
.field .unit { font-size: .82rem; color: var(--muted); }
.field .help, .help { display: block; color: var(--muted); font-size: .8rem; margin-top: .2rem; }
.field.has-error input, .field.has-error select, .field.has-error textarea { border-color: var(--danger); }
.error-msg { display: block; color: var(--danger); font-size: .82rem; margin-top: .2rem; }
.req { color: var(--danger); }
.locked { padding: .45rem 0; }
.checkbox { display: inline-flex; align-items: center; gap: .4rem; font-weight: normal !important; }
.form-actions { display: flex; gap: .5rem; flex-wrap: wrap; padding-top: .4rem; }
.filters { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; padding: .7rem; }
.filters input[type=search] { flex: 1 1 200px; width: auto; }
.filters select { width: auto; max-width: 220px; }
.filters input[type=date] { width: auto; }
.inline-label { display: inline-flex; align-items: center; gap: .3rem; color: var(--muted); }

/* Sélection multiple (colonies…) */
.multi { border: 1px solid #d5cebf; border-radius: 8px; padding: .6rem; max-height: 380px; overflow: auto; background: #fff; }
.multi-tools { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; position: sticky; top: -.6rem; background: #fff; padding: .2rem 0 .5rem; z-index: 1; }
.multi-tools input { flex: 1 1 140px; width: auto; }
.multi-group { margin-bottom: .5rem; }
.multi-group-title { display: flex; align-items: center; gap: .4rem; font-weight: 600 !important; font-size: .85rem; margin: .3rem 0; color: var(--brand-dark); }
.multi-items { display: flex; flex-wrap: wrap; gap: .3rem; }
.chip { display: inline-flex; align-items: center; gap: .3rem; padding: .2rem .55rem; border: 1px solid var(--line); border-radius: 99px; font-size: .85rem; cursor: pointer; font-weight: normal !important; margin: 0 !important; background: #fdfcf9; }
.chip:has(input:checked) { background: var(--brand-soft); border-color: var(--brand); }
.chip.hidden { display: none; }

/* ---------- Authentification ---------- */
.auth-body { display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 1rem; background: linear-gradient(160deg, #2a2416, #4a3a17); }
.auth-box { background: #fff; width: 100%; max-width: 480px; padding: 1.8rem; border-radius: 14px; box-shadow: 0 10px 40px rgba(0,0,0,.25); }
.auth-box h1 { margin-bottom: 1rem; }
.auth-box h3 { margin: .6rem 0 0; font-size: .85rem; text-transform: uppercase; color: var(--brand-dark); letter-spacing: .05em; }
.auth-brand { font-weight: 700; font-size: 1.2rem; margin-bottom: 1rem; display: flex; align-items: center; gap: .4rem; }
.napi { font-family: ui-monospace, monospace; }

/* ---------- Impression (registre) ---------- */
.print-only { display: none; }
@media print {
    .topbar, .sidebar, .no-print, .page-head .actions, .filters { display: none !important; }
    .print-only { display: block; }
    body { background: #fff; font-size: 10.5pt; }
    .content { padding: 0; max-width: none; }
    .card { box-shadow: none; border: 0; padding: 0; margin-bottom: .6rem; }
    .table th { background: #eee !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    .table td, .table th { padding: 3px 5px; }
    h2 { page-break-after: avoid; }
    .print-section { page-break-inside: auto; }
    a { color: inherit; text-decoration: none; }
}

/* ---------- Mobile ---------- */
@media (max-width: 860px) {
    .menu-toggle { display: block; }
    .topbar-user a { display: none; }
    .sidebar { position: fixed; top: 56px; bottom: 0; left: 0; z-index: 30; transform: translateX(-100%); transition: transform .2s; overflow-y: auto; box-shadow: 4px 0 20px rgba(0,0,0,.15); }
    .sidebar.open { transform: none; }
    .content { padding: 1rem; }
    .form-grid, .row2 { grid-template-columns: 1fr; }
    .details { grid-template-columns: 1fr; gap: .1rem; }
    .details dd { margin-bottom: .5rem; }
    .topbar-expl .role { display: none; }
}
a.stat { color: inherit; text-decoration: none; } a.stat:hover { background: var(--brand-soft); }


/* ===== Thème Les Ruches de la Limagne (aligné sur resa.lesruchesdelalimagne.fr) ===== */
.topbar { background: var(--surface); color: var(--ink); border-bottom: 1px solid var(--line); box-shadow: 0 1px 4px rgba(0,0,0,.06); }
.topbar a { color: var(--ink); }
.topbar-expl a { background: var(--bg); border: 1px solid var(--line); }
.topbar-expl .napi { color: var(--brand); }
.btn-ghost { color: var(--ink); border-color: var(--line); }
.menu-toggle { color: var(--ink); }
.sidebar { background: var(--dark); border-right: 0; }
.sidebar h4 { color: rgba(255,255,255,.35); font-size: .65rem; letter-spacing: .08em; }
.sidebar a { color: rgba(255,255,255,.72); border-left: 3px solid transparent; border-radius: 0 6px 6px 0; font-size: .87rem; font-weight: 500; }
.sidebar a:hover { background: rgba(255,255,255,.06); color: #fff; }
.sidebar a.active { background: rgba(200,132,10,.15); color: var(--brand-light); border-left-color: var(--brand); font-weight: 600; }
.sidebar .version { color: rgba(255,255,255,.3); }
.card { border: 0; box-shadow: var(--shadow); }
.btn { border-radius: 6px; font-weight: 600; font-size: .85rem; }
.btn-primary:hover { background: var(--brand-light); border-color: var(--brand-light); }
.stat { background: var(--surface); border-left: 4px solid var(--brand); box-shadow: var(--shadow); }
.table th { background: #FAFAFA; }
.badge { text-transform: uppercase; letter-spacing: .3px; font-size: .68rem; }
.pager .current { background: var(--brand); border-color: var(--brand); }
.auth-body { background: var(--dark); }
.auth-brand .logo, .logo { color: var(--brand); }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--brand-soft); border-color: var(--brand); }
.chip.masque, .multi-group.vide { display: none; }

/* Menu de gauche : groupes repliables (fermés par défaut, ouverts sur la page en cours) */
.nav-groupe { margin: 0 0 2px; }
.nav-groupe > summary { list-style: none; display: flex; align-items: center; gap: .55rem; padding: .55rem .6rem; border-radius: 7px; cursor: pointer; user-select: none;
    font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: rgba(255,255,255,.55); }
.nav-groupe > summary::-webkit-details-marker { display: none; }
.nav-groupe > summary::after { content: '▸'; margin-left: auto; font-size: .7rem; color: rgba(255,255,255,.35); transition: transform .15s; }
.nav-groupe[open] > summary { color: #fff; }
.nav-groupe[open] > summary::after { transform: rotate(90deg); color: var(--brand); }
.nav-groupe > summary:hover { background: rgba(255,255,255,.06); color: #fff; }
.nav-groupe > summary:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }
.nav-groupe .nav-ico { width: 1.2rem; text-align: center; font-size: .9rem; }
.nav-groupe .nav-titre { flex: 1; min-width: 0; }
.nav-groupe > summary .menu-badge { margin-left: 0; }
.nav-groupe > ul { padding: 0 0 .35rem .35rem; }
.sidebar .nav-groupe + .nav-groupe { border-top: 1px solid rgba(255,255,255,.06); }

/* Mon profil : ordre du menu */
.menu-ordre { list-style: none; margin: 0 0 .8rem; padding: 0; }
.menu-ordre li { display: flex; align-items: center; gap: .6rem; padding: .45rem .6rem; border: 1px solid var(--line); border-radius: 8px; margin-bottom: 4px; background: var(--surface); }
.menu-ordre li .t { flex: 1; font-weight: 600; }
.menu-ordre li small { color: var(--muted); font-weight: 400; }
.menu-ordre li.bouge { border-color: var(--brand); background: var(--brand-soft); }
.menu-ordre button { min-width: 2rem; }

/* ---------- Tableaux et contenus larges : défilement horizontal (téléphone) ---------- */
.table-wrap, .table-wrap.card.no-pad { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
@media (max-width: 860px) {
    .content .table { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .content .table-wrap .table { display: table; }
    .content pre { max-width: 100%; overflow-x: auto; }
    .content img, .content video { max-width: 100%; height: auto; }
    .content .page-head .actions, .content .filters { flex-wrap: wrap; }
}