/* Simpl. – prototype de l'espace admin (reprend les couleurs de ../assets/css/style.css) */
:root {
  --side-w: 248px;
  --top-h: 64px;
}
body.admin { background: #F7F3EE; }
body.admin .foot { display: none; }

/* ---------- structure ---------- */
.adm { display: grid; min-height: 100vh; }
.side { position: fixed; inset: 0 auto 0 0; width: var(--side-w); background: var(--ink); color: #EDE6DC; display: flex; flex-direction: column; z-index: 40; transform: translateX(-100%); transition: transform .25s; }
.side.open { transform: none; }
.side-head { height: var(--top-h); display: flex; align-items: center; gap: 10px; padding: 0 20px; border-bottom: 1px solid rgba(255, 255, 255, .08); }
.side-head img { height: 20px; filter: invert(1); }
.side-head span { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: #A79C8F; margin-left: auto; }
.side nav { padding: 12px 10px; overflow-y: auto; flex: 1; }
.side .grp { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: #8C8276; padding: 16px 12px 6px; }
.side a { display: flex; align-items: center; gap: 12px; padding: 9px 12px; border-radius: 10px; color: #D9D0C4; text-decoration: none; font-size: 14.5px; }
.side a:hover { background: rgba(255, 255, 255, .06); color: #fff; }
.side a[aria-current="page"] { background: #F2ECE3; color: var(--ink); font-weight: 600; }
.side a .count { margin-left: auto; background: var(--pink); color: var(--ink); font-size: 11px; font-weight: 600; padding: 1px 7px; border-radius: var(--pill); }
.side-foot { padding: 14px 20px; border-top: 1px solid rgba(255, 255, 255, .08); font-size: 13px; display: flex; align-items: center; gap: 10px; }
.side-foot .avatar { background: #3A332D; color: #fff; }
.scrim { position: fixed; inset: 0; background: rgba(16, 12, 8, .4); z-index: 35; display: none; }
.scrim.open { display: block; }

.main { min-width: 0; }
.top { position: sticky; top: 0; z-index: 20; height: var(--top-h); display: flex; align-items: center; gap: 12px; padding: 0 16px; background: rgba(247, 243, 238, .92); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); }
.burger { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; color: var(--ink); }
.burger:hover { background: var(--beige); }
.search { flex: 1; max-width: 420px; display: flex; align-items: center; gap: 8px; background: #fff; border: 1px solid var(--line); border-radius: var(--pill); padding: 0 14px; height: 40px; color: var(--muted); }
.search input { border: 0; outline: 0; font: inherit; font-size: 14px; flex: 1; min-width: 0; background: transparent; color: var(--ink); }
.top-right { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.top-right .pill-outline { font-size: 12px; padding: 7px 14px; }
@media (max-width: 640px) { .top-right .pill-outline { display: none; } }
.page { padding: 24px 16px 96px; max-width: 1320px; }

@media (min-width: 1100px) {
  .adm { grid-template-columns: var(--side-w) minmax(0, 1fr); }
  .side { position: sticky; top: 0; height: 100vh; transform: none; }
  .burger, .scrim { display: none !important; }
  .page { padding: 28px 32px 64px; }
  .top { padding: 0 32px; }
}

/* ---------- en-tête de page ---------- */
.ph { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
.ph h1 { font-size: clamp(26px, 3.4vw, 34px); }
.ph p { color: var(--muted); margin-top: 4px; font-size: 15px; }
.ph-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.btn-md { min-height: 42px; padding: 0 18px; font-size: 14.5px; }

/* ---------- indicateurs ---------- */
.kpis { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-bottom: 20px; }
@media (min-width: 900px) { .kpis { grid-template-columns: repeat(4, 1fr); } }
.kpi { background: #fff; border: 1px solid var(--line); border-radius: var(--r-md); padding: 16px; }
.kpi .l { font-size: 13px; color: var(--muted); display: flex; align-items: center; gap: 6px; }
.kpi .v { font: 600 28px/1.15 var(--font-title); color: var(--ink); margin-top: 6px; letter-spacing: -.02em; }
.kpi .d { font-size: 12.5px; margin-top: 4px; }
.up { color: var(--green); }
.down { color: #B3261E; }

.grid-2 { display: grid; gap: 16px; }
@media (min-width: 1000px) { .grid-2 { grid-template-columns: 1.6fr 1fr; } }
.panel { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
.panel-h { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 18px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.panel-h h2 { font-size: 18px; }
.panel-b { padding: 16px 18px; }
.panel + .panel, .grid-2 + .panel, .panel + .grid-2 { margin-top: 16px; }

/* ---------- filtres ---------- */
.filters { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.seg { display: inline-flex; background: var(--beige); border-radius: var(--pill); padding: 3px; }
.seg button { padding: 7px 14px; border-radius: var(--pill); font-size: 13.5px; font-weight: 500; color: var(--muted); white-space: nowrap; }
.seg button[aria-pressed="true"] { background: #fff; color: var(--ink); box-shadow: 0 1px 3px rgba(0, 0, 0, .08); }
.sel { height: 38px; border: 1px solid var(--line); border-radius: var(--pill); padding: 0 34px 0 14px; font: inherit; font-size: 14px; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23857C72' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") right 12px center / 14px no-repeat; appearance: none; color: var(--ink); }
.fsearch { height: 38px; border: 1px solid var(--line); border-radius: var(--pill); padding: 0 14px; font: inherit; font-size: 14px; background: #fff; min-width: 0; flex: 1 1 180px; max-width: 280px; }

/* ---------- tableaux (cartes sur mobile) ---------- */
.tbl { width: 100%; border-collapse: collapse; font-size: 14px; }
.tbl th { text-align: left; font-weight: 500; color: var(--muted); font-size: 12.5px; padding: 10px 14px; border-bottom: 1px solid var(--line); white-space: nowrap; background: #FCFAF7; }
.tbl td { padding: 12px 14px; border-bottom: 1px solid var(--line); color: var(--ink); vertical-align: middle; }
.tbl tr:last-child td { border-bottom: 0; }
.tbl tbody tr { transition: background .12s; }
.tbl tbody tr:hover { background: #FCFAF7; }
.tbl .sub { font-size: 12.5px; color: var(--muted); display: block; margin: 0; font-weight: 400; }
.tbl .num { text-align: right; white-space: nowrap; }
.tbl .acts { text-align: right; white-space: nowrap; }
.who-cell { display: flex; align-items: center; gap: 10px; }
.who-cell .avatar { width: 34px; height: 34px; font-size: 12px; flex: none; }
.icon-btn { width: 34px; height: 34px; border-radius: 10px; display: inline-grid; place-items: center; color: var(--muted); }
.icon-btn:hover { background: var(--beige); color: var(--ink); }
@media (max-width: 760px) {
  .tbl thead { display: none; }
  .tbl, .tbl tbody, .tbl tr, .tbl td { display: block; width: 100%; }
  .tbl tr { padding: 12px 14px; border-bottom: 1px solid var(--line); }
  .tbl td { border: 0; padding: 3px 0; display: flex; justify-content: space-between; gap: 12px; text-align: right; }
  .tbl td::before { content: attr(data-l); color: var(--muted); font-size: 12.5px; text-align: left; }
  .tbl td.main-cell { text-align: left; }
  .tbl td.main-cell::before { display: none; }
  .tbl .acts, .tbl .num { text-align: right; }
}
.scroll-x { overflow-x: auto; }

/* ---------- statuts ---------- */
.st { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 500; padding: 3px 10px; border-radius: var(--pill); white-space: nowrap; }
.st::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.st.paye { color: var(--green); background: var(--green-bg); }
.st.attente { color: var(--orange); background: var(--orange-bg); }
.st.annule { color: #8A8178; background: #EFEAE3; }
.st.especes { color: #3E5C9A; background: #E4EAF6; }
.st.gratuit { color: #7A3E8A; background: #F1E4F4; }

/* ---------- planning ---------- */
.plan { display: grid; min-width: 760px; font-size: 12.5px; }
.plan-h, .plan-r { display: grid; grid-template-columns: 150px repeat(var(--n), 1fr); }
.plan-h div { padding: 8px 4px; color: var(--muted); text-align: center; border-bottom: 1px solid var(--line); }
.plan-h div:first-child, .plan-r .pn { text-align: left; padding-left: 14px; }
.plan-r { border-bottom: 1px solid var(--line); }
.plan-r .pn { padding: 10px 14px; color: var(--ink); font-weight: 500; display: flex; flex-direction: column; justify-content: center; }
.plan-r .pn small { color: var(--muted); font-weight: 400; }
.cell { border-left: 1px solid #F1EBE3; padding: 3px; min-height: 46px; position: relative; }
.cell button { width: 100%; height: 100%; border-radius: 8px; }
.cell button:hover { background: var(--beige); }
.bk { position: absolute; top: 4px; bottom: 4px; border-radius: 8px; padding: 4px 8px; font-size: 12px; color: var(--ink); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; text-align: left; z-index: 1; border: 1px solid transparent; }
.bk.c1 { background: var(--pink); border-color: var(--pink-strong); }
.bk.c2 { background: #E3EEF0; border-color: #C5DCE0; }
.bk.c3 { background: #EFE6D3; border-color: #DFD0B0; }
.bk.c4 { background: #E6EBDD; border-color: #CBD6BA; }
.bk.c5 { background: #EDE3F1; border-color: #D9C6E1; }
.bk:hover { filter: brightness(.97); }
.bk b { font-weight: 600; }
.legend-line { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12.5px; color: var(--muted); padding: 12px 18px; border-top: 1px solid var(--line); }

/* ---------- graphiques ---------- */
.bars { display: flex; align-items: flex-end; gap: 6px; height: 180px; padding-top: 12px; }
.bars .b { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; height: 100%; justify-content: flex-end; min-width: 0; }
.bars .b i { display: block; width: 100%; max-width: 34px; background: var(--ink); border-radius: 6px 6px 2px 2px; min-height: 2px; }
.bars .b.cur i { background: #C9A2A5; }
.bars .b span { font-size: 11px; color: var(--muted); }
.meter { height: 8px; background: var(--beige); border-radius: var(--pill); overflow: hidden; }
.meter i { display: block; height: 100%; background: var(--ink); border-radius: var(--pill); }
.occ { display: grid; gap: 14px; }
.occ-row { display: grid; gap: 6px; }
.occ-row div:first-child { display: flex; justify-content: space-between; font-size: 14px; color: var(--ink); }

/* ---------- listes de cartes ---------- */
.cards-grid { display: grid; gap: 14px; }
@media (min-width: 700px) { .cards-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1200px) { .cards-grid { grid-template-columns: repeat(3, 1fr); } }
.ecard { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; display: flex; flex-direction: column; }
.ecard img { height: 150px; object-fit: cover; width: 100%; }
.ecard-b { padding: 14px 16px 16px; display: grid; gap: 6px; flex: 1; }
.ecard-b h3 { font-size: 18px; }
.ecard-f { display: flex; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--line); align-items: center; }
.ecard-f .icon-btn:first-of-type { margin-left: auto; }

.feed { display: grid; }
.feed-i { display: flex; gap: 12px; padding: 12px 18px; border-bottom: 1px solid var(--line); font-size: 14px; align-items: flex-start; }
.feed-i:last-child { border-bottom: 0; }
.feed-i .dotc { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; flex: none; background: var(--beige); color: var(--ink); }
.feed-i time { margin-left: auto; color: var(--muted); font-size: 12.5px; white-space: nowrap; }

/* ---------- panneau latéral (fiche / formulaire) ---------- */
.drawer-bg { position: fixed; inset: 0; background: rgba(16, 12, 8, .4); z-index: 70; animation: fade .2s; }
.drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(480px, 100%); background: #fff; z-index: 71; display: flex; flex-direction: column; animation: slide .25s ease; box-shadow: -10px 0 40px rgba(0, 0, 0, .12); }
@keyframes slide { from { transform: translateX(40px); opacity: 0; } }
.drawer-h { display: flex; align-items: center; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--line); }
.drawer-h h2 { font-size: 20px; }
.drawer-h .icon-btn { margin-left: auto; }
.drawer-b { padding: 20px; overflow-y: auto; flex: 1; }
.drawer-f { padding: 14px 20px calc(14px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }
.drawer-f .btn { flex: 1 1 auto; }
.kv { display: grid; gap: 10px; margin: 0 0 18px; }
.kv div { display: flex; justify-content: space-between; gap: 16px; font-size: 14px; border-bottom: 1px dashed var(--line); padding-bottom: 8px; }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; color: var(--ink); font-weight: 500; text-align: right; }
.sec-t { font: 600 14px var(--font); color: var(--ink); margin: 18px 0 10px; letter-spacing: 0; }
.toggle-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 14px; color: var(--ink); }
.toggle-row button { display: flex; }

.tag-l { display: inline-block; font-size: 12px; padding: 2px 8px; border-radius: 6px; background: var(--beige); color: var(--ink); margin: 2px 4px 2px 0; }
.empty-s { padding: 40px 18px; text-align: center; color: var(--muted); }
.hint-adm { display: flex; gap: 10px; align-items: flex-start; background: var(--pink); border-radius: var(--r-md); padding: 12px 14px; font-size: 13.5px; color: var(--ink); margin-bottom: 16px; }
.pager { display: flex; justify-content: space-between; align-items: center; padding: 12px 18px; font-size: 13px; color: var(--muted); border-top: 1px solid var(--line); }

/* compléments */
.plan-r { grid-template-columns: 150px minmax(0, 1fr); }
.track { position: relative; display: grid; grid-template-columns: repeat(var(--n), 1fr); }
.bk.att { border-style: dashed; border-color: #C9853F; opacity: .9; }
.lg { display: inline-block; width: 18px; height: 10px; border-radius: 4px; vertical-align: middle; margin-right: 6px; }
.lg.att { border: 1.5px dashed #C9853F; background: var(--pink); }
.new { display: inline-block; font-size: 10px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; background: var(--pink); color: var(--ink); border: 1px solid var(--pink-strong); border-radius: var(--pill); padding: 1px 7px; margin-left: 6px; vertical-align: middle; }
.link-side { color: #A79C8F; font-size: 12.5px; text-decoration: underline; text-underline-offset: 2px; }
.link-side:hover { color: #fff; }
.tg { display: inline-flex; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
.form-grid .field { grid-column: 1 / -1; }
.form-grid .field.half { grid-column: auto; }
.drawer .field input, .drawer .field select, .drawer .field textarea { min-height: 44px; }
.days { display: flex; gap: 6px; flex-wrap: wrap; }
.daychip input { position: absolute; opacity: 0; pointer-events: none; }
.daychip span { display: inline-block; padding: 7px 12px; border-radius: var(--pill); border: 1.5px solid var(--line); font-size: 13.5px; cursor: pointer; color: var(--ink); }
.daychip input:checked + span { background: var(--ink); border-color: var(--ink); color: #fff; }
.daychip input:focus-visible + span { outline: 2px solid var(--ink); outline-offset: 2px; }
.photo-f { display: flex; align-items: center; gap: 12px; }
.photo-f img, .ph-empty { width: 64px; height: 64px; border-radius: 12px; object-fit: cover; background: var(--beige); display: grid; place-items: center; color: var(--muted); }
.periode { display: flex; gap: 6px; align-items: center; margin-bottom: 8px; flex-wrap: wrap; }
.periode input, .periode select { min-height: 42px; border: 1.5px solid var(--line); border-radius: 10px; padding: 0 10px; font: inherit; font-size: 14px; background: #fff; color: var(--ink); }
.periode input { flex: 1 1 150px; }
.chk-list { display: grid; gap: 2px; }
.chk-list .check { margin: 4px 0; }
.draft-total { display: flex; justify-content: space-between; align-items: baseline; border-top: 1px dashed var(--line-strong); padding-top: 14px; margin-top: 8px; color: var(--ink); }
.draft-total b { font: 600 26px var(--font-title); }
.mini-list { display: grid; gap: 6px; }
.mini-list button { display: flex; justify-content: space-between; align-items: center; gap: 10px; text-align: left; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; font-size: 14px; color: var(--ink); }
.mini-list button:hover { background: #FCFAF7; }
.code-l { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .04em; }
button.feed-i { width: 100%; text-align: left; }
button.feed-i:hover { background: #FCFAF7; }
.feed-i .st { margin-left: auto; }
.help.up { color: var(--green); }
.help.down { color: #B3261E; }
.kpi .v.down { color: #B3261E; }
.drawer .kpis { margin-bottom: 16px; }
.drawer .kpi .v { font-size: 22px; }
@media (max-width: 760px) { .tbl .who-cell .avatar { display: none; } .plan-r { grid-template-columns: 110px minmax(0, 1fr); } .plan-h { grid-template-columns: 110px repeat(var(--n), 1fr); } }
.seg { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.seg::-webkit-scrollbar { display: none; }
.ph-actions { max-width: 100%; }