:root {
  --bg: #f4f2ee; --card: #fff; --ink: #1f2d3a; --muted: #687482; --line: #e6e2da;
  --primary: #2f7a6f; --primary-600: #276a60; --primary-50: #e7f3f0; --primary-ink: #fff;
  --accent: #f2a65a; --ok: #2f8a57; --warn: #c27c0e; --danger: #c0392b; --info: #2f6fa8;
  --side-1: #23584f; --side-2: #2f7a6f;
  --radius: 14px; --shadow: 0 1px 2px rgba(31,45,58,.05), 0 4px 14px rgba(31,45,58,.06);
  --side-w: 248px; --top-h: 64px;
  font-family: ui-rounded, "SF Pro Rounded", "Nunito", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--ink); font-size: 15px; line-height: 1.45; }
a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }
h1 { font-size: 1.5rem; margin: 0 0 .4rem; }
h2 { font-size: 1.05rem; margin: 0 0 .8rem; }
h3 { font-size: .95rem; margin: 1rem 0 .5rem; }
.muted { color: var(--muted); }
.small { font-size: .85em; }
.center { text-align: center; }
.nowrap { white-space: nowrap; }

.page-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
.row { display: flex; gap: .8rem; align-items: center; flex-wrap: wrap; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.1rem 1.2rem; box-shadow: var(--shadow); margin-bottom: 1rem; }
.narrow { max-width: 640px; }
.grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 1rem; }
.grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 1rem; }
.card .grid2, .card .grid3 { gap: 0 1rem; }
.grid2 > .card, .grid3 > .card { margin-bottom: 1rem; }
.grid2:has(> .card), .grid3:has(> .card) { gap: 1rem; }

/* Formulaires */
label { display: block; font-size: .85rem; color: var(--muted); margin-bottom: .7rem; }
input, select, textarea { display: block; width: 100%; margin-top: .25rem; padding: .5rem .6rem; border: 1px solid var(--line); border-radius: 7px; font: inherit; color: var(--ink); background: #fff; }
input:focus, select:focus, textarea:focus { outline: 2px solid color-mix(in srgb, var(--primary) 35%, transparent); border-color: var(--primary); }
input[type=color] { height: 38px; padding: 2px; }
label.check { display: flex; align-items: center; gap: .4rem; color: var(--ink); font-size: .92rem; }
label.check input { width: auto; margin: 0; }
fieldset { border: 1px solid var(--line); border-radius: 8px; padding: .6rem .9rem; margin: 0 0 .9rem; }
legend { font-size: .85rem; color: var(--muted); padding: 0 .3rem; }
fieldset.days { display: flex; gap: 1rem; flex-wrap: wrap; }
fieldset.days label { margin: 0; }
.sub { background: var(--bg); border-radius: 8px; padding: .8rem; margin-bottom: .8rem; }
.filters, .inline-form { display: flex; gap: .6rem; align-items: flex-end; flex-wrap: wrap; margin-bottom: 1rem; }
.filters input, .filters select, .inline-form input, .inline-form select { width: auto; }
.filters label, .inline-form label { margin: 0; }
.filters input[type=search] { min-width: 240px; }
.grid-inline { display: flex; gap: .4rem; flex-wrap: wrap; align-items: center; margin-top: .6rem; }
.grid-inline input { width: auto; flex: 1 1 130px; margin: 0; }
.actions { display: flex; gap: .6rem; margin: 1rem 0; }
.actions.sticky { position: sticky; bottom: 0; background: var(--bg); padding: .8rem 0; }
form.inline { display: inline; }
details summary { cursor: pointer; color: var(--primary); margin-top: .6rem; }
details form { margin-top: .8rem; }
.danger-zone { margin-top: 2rem; padding-top: 1rem; border-top: 1px dashed var(--line); display: flex; gap: 1rem; align-items: center; }

.btn { display: inline-block; padding: .5rem 1rem; border-radius: 7px; border: 1px solid var(--line); background: #fff; color: var(--ink); font: inherit; cursor: pointer; white-space: nowrap; }
.btn:hover { background: var(--bg); text-decoration: none; }
.btn-primary { background: var(--primary); border-color: var(--primary); color: var(--primary-ink); }
.btn-primary:hover { background: color-mix(in srgb, var(--primary) 85%, #000); }
.btn-danger { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 40%, #fff); }
.btn-block { width: 100%; }
button.link { background: none; border: 0; padding: 0 .2rem; color: var(--primary); cursor: pointer; font: inherit; }
button.link.danger, a.danger { color: var(--danger); }

/* Messages */
.flash { padding: .7rem 1rem; border-radius: 8px; margin-bottom: 1rem; border: 1px solid; }
.flash-ok { background: #eef8f1; border-color: #bfe3cc; }
.flash-danger { background: #fdf0ee; border-color: #f2c4bd; }
.flash-warn { background: #fdf6e8; border-color: #f0d9a8; }
.flash-info { background: #edf4fb; border-color: #c4dbf0; }

/* Tableaux */
.table-wrap { overflow-x: auto; padding: 0; }
.card.table-wrap { padding: 0; }
.table { width: 100%; border-collapse: collapse; }
.table th, .table td { text-align: left; padding: .55rem .8rem; border-bottom: 1px solid var(--line); vertical-align: middle; }
.table thead th { font-size: .78rem; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); font-weight: 600; background: #fbfaf8; }
.table tr:last-child td { border-bottom: 0; }
.table.compact td { padding: .35rem .4rem; }
.table.compact select { margin: 0; padding: .25rem; font-size: .85rem; }
tr.highlight { background: #fff8e6; }
tr.inactive { opacity: .5; }

/* Badges */
.badge { display: inline-block; padding: .1rem .55rem; border-radius: 999px; font-size: .8rem; font-weight: 600; background: color-mix(in srgb, var(--c, #999) 18%, #fff); color: color-mix(in srgb, var(--c, #999) 70%, #000); border: 1px solid color-mix(in srgb, var(--c, #999) 40%, #fff); }
.tag { display: inline-block; padding: 0 .45rem; border-radius: 5px; font-size: .75rem; background: #eef0f2; color: #4b5563; margin-left: .2rem; }
.tag-ok { background: #e3f4ea; color: var(--ok); }
.tag-warn { background: #fcf0d9; color: var(--warn); }
.tag-danger { background: #fbe3e0; color: var(--danger); }
.tag-info { background: #e3eef9; color: var(--info); }
.status { font-size: .78rem; padding: .1rem .5rem; border-radius: 5px; vertical-align: middle; }
.status-attente { background: #f1eafa; color: #7048a8; }
.status-inscrit { background: #e3eef9; color: var(--info); }
.status-actif { background: #e3f4ea; color: var(--ok); }
.status-parti { background: #eef0f2; color: var(--muted); }
.role { font-size: .75rem; padding: .1rem .5rem; border-radius: 5px; background: var(--bg); }

/* Tableau de bord */
.kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin: 1rem 0; }
.kpi { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem; color: var(--muted); font-size: .9rem; box-shadow: var(--shadow); }
.alerts { list-style: none; margin: 0; padding: 0; }
.alerts li { padding: .5rem .7rem; border-left: 4px solid; border-radius: 4px; margin-bottom: .4rem; background: var(--bg); }
.alerts a { color: var(--ink); }
.alert-danger { border-color: var(--danger) !important; }
.alert-warn { border-color: var(--warn) !important; }
.alert-info { border-color: var(--info) !important; }
.list { list-style: none; padding: 0; margin: 0; }
.list li { padding: .4rem 0; border-bottom: 1px solid var(--line); }
.list li:last-child { border-bottom: 0; }
.dl { display: grid; grid-template-columns: 170px 1fr; gap: .35rem .8rem; margin: 0 0 .8rem; }
.dl dt { color: var(--muted); font-size: .88rem; }
.dl dd { margin: 0; }

/* Sections */
.sections-board { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 1rem; }
.section-card, .parent-card { border-top: 5px solid var(--c); }
.section-card header, .parent-card header { display: flex; gap: .6rem; align-items: baseline; margin-bottom: .6rem; }
.section-card header h2, .parent-card header h2 { margin: 0; }
.section-card header a { margin-left: auto; }
.occ { display: flex; gap: 1rem; align-items: flex-end; margin-bottom: .6rem; }
.occ-big { font-size: 1.8rem; font-weight: 700; line-height: 1; }
.occ-big small { display: block; font-size: .72rem; font-weight: 400; color: var(--muted); margin-top: .2rem; }
.occ-big.ok { color: var(--ok); } .occ-big.warn { color: var(--warn); } .occ-big.danger { color: var(--danger); }
.days-bars { display: flex; gap: 6px; height: 54px; align-items: flex-end; }
.days-bars .bar { width: 26px; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; position: relative; background: var(--bg); border-radius: 4px; }
.days-bars .bar span { display: block; width: 100%; background: color-mix(in srgb, var(--c) 70%, #fff); border-radius: 4px; }
.days-bars .bar span.over { background: var(--danger); }
.days-bars .bar em { position: absolute; bottom: -16px; font-size: .68rem; font-style: normal; color: var(--muted); }
.days-bars .bar b { position: absolute; top: 2px; font-size: .7rem; }
.staff { margin: 1.2rem 0 .6rem; font-size: .9rem; }
.kids { list-style: none; padding: 0; margin: 0; }
.kids li { padding: .35rem 0; border-top: 1px solid var(--line); font-size: .92rem; }

.timeline { margin: 0 0 1rem; padding-left: 1.2rem; }
.timeline li { margin-bottom: .4rem; }
.timeline li.future { color: var(--muted); }

/* Prévisions */
.forecast td { text-align: center; min-width: 64px; }
.forecast td strong { display: block; font-size: 1.1rem; }
.forecast td small { display: block; font-size: .7rem; color: var(--muted); }
.forecast td .wait { display: block; font-size: .68rem; color: #7048a8; font-style: normal; }
.forecast th { white-space: nowrap; }
.forecast tr.total td { background: #fbfaf8; }
.cell-free { background: #e9f6ee; } .cell-low { background: #fdf3dc; } .cell-full { background: #fde4cf; } .cell-over { background: #f9d2cc; }
.legend span { padding: .1rem .5rem; border-radius: 4px; font-size: .82rem; }
.legend { color: var(--muted); font-size: .85rem; }

.login-card h1 { margin-bottom: .2rem; }

}

/* ---------- v2 ---------- */
.ok { color: var(--ok); } .danger { color: var(--danger); }

.avatar { display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; object-fit: cover; vertical-align: middle; flex-shrink: 0; }
.avatar-sm { width: 28px; height: 28px; font-size: .7rem; }
.avatar-md { width: 44px; height: 44px; font-size: .9rem; }
.avatar-lg { width: 84px; height: 84px; font-size: 1.5rem; }
.avatar-ini { background: #e7ecef; color: #5b6b78; font-weight: 700; }
.photo-box { display: flex; flex-direction: column; align-items: center; gap: .2rem; }
.photo-form label { cursor: pointer; color: var(--primary); margin: 0; }
.page-head .row { align-items: center; gap: 1rem; }
.parent-card header { align-items: center; gap: 1rem; }

.pipeline { display: grid; grid-template-columns: repeat(4, 1fr); gap: .5rem; margin-bottom: 1rem; }
.pipeline .step { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: .6rem .9rem; color: var(--muted); font-size: .85rem; position: relative; }
.pipeline .step span { display: block; font-size: 1.5rem; font-weight: 700; color: var(--ink); }
.tabs { display: flex; gap: .3rem; margin-bottom: .8rem; border-bottom: 1px solid var(--line); }
.tabs a { padding: .5rem .9rem; color: var(--muted); border-bottom: 2px solid transparent; margin-bottom: -1px; }
.tabs a.active { color: var(--ink); border-color: var(--primary); font-weight: 600; }
.tabs a:hover { text-decoration: none; color: var(--ink); }

.enr-nouvelle { background: #fcf0d9; color: var(--warn); }
.enr-visite_planifiee { background: #e3eef9; color: var(--info); }
.enr-place_proposee { background: #f1eafa; color: #7048a8; }
.enr-confirmee { background: #e3f4ea; color: var(--ok); }
.enr-refusee, .enr-annulee { background: #eef0f2; color: var(--muted); }
.ctr-brouillon { background: #eef0f2; color: #4b5563; }
.ctr-genere { background: #fcf0d9; color: var(--warn); }
.ctr-signe { background: #e3f4ea; color: var(--ok); }
.ctr-termine, .ctr-annule { background: #eef0f2; color: var(--muted); }

.proposal { background: #f6f1fc; border: 1px solid #dccbf2; border-radius: 8px; padding: 1rem; margin-bottom: 1rem; }
.proposal h3 { margin-top: 0; color: #5b3a8c; }
.schedule { max-width: 420px; }
.schedule input[type=time] { margin: 0; padding: .3rem; width: auto; }
.schedule input[type=checkbox] { width: auto; margin: 0; }
.inline-label { display: inline-flex; align-items: center; gap: .5rem; }
.inline-label select { width: auto; margin: 0; }
.upload-form { margin-top: 1rem; padding-top: 1rem; border-top: 1px dashed var(--line); }
pre { background: var(--bg); padding: .6rem .8rem; border-radius: 6px; overflow-x: auto; font-size: .82rem; white-space: pre-wrap; word-break: break-all; }
code.copy { cursor: pointer; }
.tags tr.used code { background: #e3f4ea; }
fieldset[disabled] { opacity: .85; }

/* Absences */
.abs-conge { background: #dbeafe !important; color: #1e4f8a; }
.abs-maladie { background: #fde2dd !important; color: #9b2c1f; }
.abs-formation { background: #e9e1f7 !important; color: #5b3a8c; }
.abs-recuperation { background: #fcf0d9 !important; color: #8a5a07; }
.abs-autre { background: #eef0f2 !important; color: #4b5563; }
.legend span[class^="abs-"] { padding: .1rem .5rem; border-radius: 4px; font-size: .82rem; }
.absences-grid th, .absences-grid td { padding: .3rem .2rem; text-align: center; font-size: .78rem; min-width: 26px; border-left: 1px solid var(--line); }
.absences-grid tbody th { text-align: left; padding-left: .8rem; white-space: nowrap; }
.absences-grid .today { outline: 2px solid var(--primary); outline-offset: -2px; }
.absences-grid td.half { background-image: linear-gradient(135deg, transparent 50%, #fff 50%) !important; }

/* Formulaire public */
.public-form { max-width: 760px; margin: 2rem auto; padding: 0 1rem; }
body.embed { background: transparent; }
body.embed .public-form { margin: 0 auto; }
.hp { position: absolute; left: -9999px; }
[hidden] { display: none !important; }

/* ===================== PLANNING ===================== */
.plan-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; flex-wrap: wrap; margin-bottom: .8rem; }
.plan-head h1 { margin: 0; }
.plan-title { font-size: 1.05rem; color: var(--muted); }
.plan-tools { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: #fff; }
.seg a { padding: .4rem .8rem; color: var(--ink); border-left: 1px solid var(--line); font-size: .9rem; }
.seg a:first-child { border-left: 0; }
.seg a.on { background: var(--primary); color: #fff; }
.seg a:hover { text-decoration: none; background: var(--bg); }
.seg a.on:hover { background: var(--primary); }
.plan-form { display: flex; gap: .4rem; }
.plan-form input, .plan-form select { width: auto; margin: 0; padding: .35rem .5rem; font-size: .88rem; }
.btn-sm { padding: .35rem .7rem; font-size: .88rem; }
.btn.on { border-color: var(--primary); color: var(--primary); }

.plan-problems { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .8rem; }
.pb { display: inline-flex; align-items: center; gap: .35rem; padding: .3rem .65rem; border-radius: 999px; font-size: .82rem; border: 1px solid; color: var(--ink); background: #fff; }
.pb:hover { text-decoration: none; filter: brightness(.97); }
.pb .dot { width: .6rem; height: .6rem; border-radius: 50%; background: var(--c); display: inline-block; }
.pb-ok { border-color: #bfe3cc; background: #eef8f1; color: var(--ok); }
.pb-over { border-color: #f2c4bd; background: #fdf0ee; }
.pb-ratio, .pb-nostaff { border-color: #f0d9a8; background: #fdf6e8; }
.pb-nostaff { border-color: #f2c4bd; background: #fdf0ee; }
.pb-hours { border-color: #e2d5f3; background: #f7f2fd; }

.plan-wrap { overflow: auto; max-height: calc(100vh - 230px); border: 1px solid var(--line); border-radius: var(--radius); background: #fff; box-shadow: var(--shadow); }
.plan { border-collapse: separate; border-spacing: 0; font-size: .8rem; width: 100%; }
.plan th, .plan td { border-bottom: 1px solid #eeece7; padding: 0; height: 30px; position: relative; }
.plan thead th { position: sticky; top: 0; z-index: 3; background: #fbfaf8; font-weight: 600; color: var(--muted); text-align: center; border-bottom: 1px solid var(--line); }
.plan thead tr.h1 th { top: 0; height: 22px; font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; }
.plan thead tr.h1 + tr.h2 th { top: 22px; }
.plan th.name { position: sticky; left: 0; z-index: 2; background: #fff; text-align: left; padding: .25rem .6rem; min-width: 230px; max-width: 260px; border-right: 1px solid var(--line); font-weight: 500; color: var(--ink); }
.plan thead th.name { z-index: 4; background: #fbfaf8; color: var(--muted); }

/* Largeurs de colonnes */
.view-week td, .view-week thead th:not(.name) { min-width: 180px; }
.view-month td, .view-month thead th:not(.name) { min-width: 30px; }
.view-year td, .view-year thead th:not(.name) { min-width: 17px; }
.view-month thead th small { display: block; font-size: .65rem; font-weight: 400; }
.view-year thead tr.h2 th { font-size: .62rem; font-weight: 400; }
.view-week thead th { padding: .4rem .3rem 1.2rem; }
.scale { position: absolute; left: 4px; right: 4px; bottom: 2px; height: 12px; }
.scale span { position: absolute; transform: translateX(-50%); font-size: .62rem; font-weight: 400; color: #9aa3ad; }

/* Repères de colonnes */
.plan .wk { border-left: 1px solid #d9d5cc; }
.plan .today { background-color: #fffbea; }
.plan thead th.today { background: #fdf0c4; color: var(--ink); }
.plan td.past:not(.pres):not(.span) { background-color: #fcfcfb; }

/* Section */
.sec-head th.name, .sec-head td { background: color-mix(in srgb, var(--c) 12%, #fff); height: 30px; border-top: 2px solid var(--c); }
.sec-head th.name { z-index: 2; }
.who-line { display: flex; gap: .45rem; align-items: center; }
.who-line a { color: var(--ink); font-weight: 600; }
.meta { color: var(--muted); font-size: .72rem; display: flex; gap: .25rem; flex-wrap: wrap; align-items: center; }
.tg { font-size: .66rem; padding: 0 .35rem; border-radius: 4px; line-height: 1.4; }
.tg-fut { background: #efe7fb; color: #6a3fb0; }
.tg-warn { background: #fcf0d9; color: #8a5a07; }
.tg-bad { background: #fbe3e0; color: var(--danger); }
.note { font-size: .68rem; line-height: 1.25; }
.note-move { color: var(--info); }
.note-warn { color: var(--danger); }
.note-end { color: var(--muted); }

/* Cellules enfants */
.plan tr.kid td.span { background-color: color-mix(in srgb, var(--c) 10%, #fff); }
.plan tr.kid td .fill { position: absolute; left: 1px; right: 1px; top: 5px; bottom: 5px; background: var(--c); border-radius: 3px; }
.view-year tr.kid td .fill { left: 0; right: 0; border-radius: 0; }
.plan tr.is-future td .fill, .plan tr.is-future td .bar {
  background: repeating-linear-gradient(-45deg, var(--c) 0 4px, color-mix(in srgb, var(--c) 35%, #fff) 4px 8px);
  outline: 1px dashed color-mix(in srgb, var(--c) 80%, #000); outline-offset: -1px; }
.plan tr.kid td.over { box-shadow: inset 0 -3px 0 var(--danger); }
.plan .bar { position: absolute; top: 5px; bottom: 5px; background: var(--c); border-radius: 4px; color: #fff; font-size: .68rem; font-weight: 600; display: flex; align-items: center; justify-content: center; white-space: nowrap; overflow: hidden; text-shadow: 0 1px 1px rgba(0,0,0,.25); }
.plan tr.is-future .bar { color: color-mix(in srgb, var(--c) 30%, #000); text-shadow: none; }
.mk { position: absolute; z-index: 1; top: 50%; transform: translateY(-50%); font-size: .62rem; line-height: 1; padding: 2px 3px; border-radius: 3px; background: #24303d; color: #fff; font-weight: 700; pointer-events: none; }
.mk-in { left: 0; background: var(--info); }
.mk-out { right: 0; background: var(--info); }
.mk-start { left: 0; background: var(--ok); }
.mk-end { right: 0; background: #6b7684; }
.view-week .mk { top: 2px; transform: none; }
.legend-grid .mk { position: static; transform: none; display: inline-block; margin-right: .2rem; }

/* Lignes de synthèse */
.plan tr.foot th.name { font-weight: 600; font-size: .78rem; }
.plan tr.foot td { text-align: center; font-weight: 700; font-size: .78rem; }
.plan tr.foot td small { font-weight: 400; color: var(--muted); }
.plan tr.foot-n td { border-top: 1px solid #d9d5cc; }
.cap-ok { color: var(--ok); }
.cap-full { background: #fdf3dc !important; color: #8a5a07; }
.cap-over { background: #f9d2cc !important; color: #9b2c1f; }
.enc-ok { color: #5b6b78; font-weight: 500 !important; }
.enc-bad { background: #fde7c6 !important; color: #9b2c1f; }
.view-year .enc-bad { background: #f5b971 !important; }
.slots { display: flex; height: 6px; margin: 2px 4px 0; gap: 1px; }
.slots i { flex: 1; border-radius: 1px; }
.sl-none { background: #eef0f2; } .sl-ok { background: #9fd3b2; } .sl-bad { background: var(--danger); }
.view-week tr.foot-enc td { height: 38px; vertical-align: top; padding-top: 4px; }

/* Personnel */
.plan tr.staff-row th.name { font-size: .76rem; font-weight: 400; padding-left: 1.4rem; }
.plan tr.staff-row th.name a { color: #4b5563; }
.plan tr.staff-row td { height: 24px; }
.plan tr.staff-row td.work { background-color: #eef0f2; }
.plan tr.staff-row .sbar { background: #8b97a3; top: 4px; bottom: 4px; }
.view-year tr.staff-row td .fill { position: absolute; left: 0; right: 0; bottom: 4px; background: #c5ccd3; }
.abs-label { font-size: .7rem; font-weight: 600; display: block; text-align: center; line-height: 24px; }
.abs-dot { position: absolute; inset: 3px 1px; border-radius: 3px; font-size: .6rem; display: flex; align-items: center; justify-content: center; }
.plan tbody.total tr.foot th, .plan tbody.total tr.foot td { border-top: 2px solid var(--ink); height: 32px; }

/* Légende */
.legend-box { margin-top: .8rem; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: .6rem 1rem; }
.legend-box summary { cursor: pointer; font-weight: 600; font-size: .9rem; }
.legend-grid { display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; margin-top: .6rem; font-size: .82rem; }
.legend-grid span { display: inline-flex; align-items: center; gap: .35rem; }
.lg { display: inline-block; width: 22px; height: 14px; border-radius: 3px; border: 1px solid #e0ddd6; }
.lg-pres { background: #7fb3d5; }
.lg-fut { background: repeating-linear-gradient(-45deg, #7fb3d5 0 4px, #d4e5f1 4px 8px); outline: 1px dashed #4a7ea3; outline-offset: -1px; }
.lg-span { background: #eef5fa; }
.lg-over { background: #fff; box-shadow: inset 0 -3px 0 var(--danger); }
.lg.work { background: #eef0f2; }
.lg.sl-bad { background: var(--danger); }

@media print {
  .sidebar, .topbar, .plan-tools, .legend-box summary { display: none !important; }
  .content { padding: 0; max-width: none; }
  .plan-wrap { max-height: none; overflow: visible; box-shadow: none; }
  @page { size: landscape; margin: 8mm; }
}
.view-year th.name { min-width: 300px; max-width: 300px; }
.view-year .note, .plan .note { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 240px; }
.note a { color: inherit; text-decoration: underline dotted; }
.view-year tr.kid th.name { padding-top: .15rem; padding-bottom: .15rem; }

/* Simulation & projection */
.tg-sim { background: #ffe7c2; color: #8a4b00; font-weight: 600; }
.plan tr.is-sim th.name { background: #fff7e8; }
.plan tr.is-sim td { background-color: #fffaf0; }
.plan tr.is-sim td .fill, .plan tr.is-sim td .bar {
  background: repeating-linear-gradient(45deg, #f0a43a 0 3px, #ffe1b0 3px 6px);
  outline: 2px solid #d9861c; outline-offset: -2px; color: #6b3a00; text-shadow: none; }
.plan tr.kid td.proj .fill, .plan tr.kid td.proj .bar { opacity: .55; outline: 1px dashed color-mix(in srgb, var(--c) 70%, #000); outline-offset: -1px; }
.plan tr.kid td.proj.span:not(.pres) { background-image: repeating-linear-gradient(90deg, transparent 0 3px, rgba(0,0,0,.03) 3px 4px); }
.mk-proj { background: #fff !important; color: var(--info) !important; outline: 1px dashed var(--info); }
.mk-end.mk-proj { color: #6b7684 !important; outline-color: #6b7684; }
.mk-start.mk-proj { color: #8a4b00 !important; outline-color: #d9861c; }
.plan td.simcause { box-shadow: inset 0 0 0 2px #d9861c; }
.lg-sim { background: repeating-linear-gradient(45deg, #f0a43a 0 3px, #ffe1b0 3px 6px); border: 2px solid #d9861c; }
.lg-proj { background: #7fb3d5; opacity: .55; border: 1px dashed #4a7ea3; }
.lg.simcause { background: #fff; box-shadow: inset 0 0 0 2px #d9861c; }
.pb-sim_over, .pb-sim_ratio { border-color: #d9861c; background: #fff3e0; font-weight: 600; }
.sim-panel { position: relative; }
.sim-panel summary { list-style: none; cursor: pointer; }
.sim-panel summary::-webkit-details-marker { display: none; }
.sim-panel[open] .sim-pop { display: block; }
.sim-pop { position: absolute; right: 0; top: calc(100% + 4px); z-index: 20; background: #fff; border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,.12); padding: .8rem; width: 340px; }
.sim-pop label.check { font-size: .85rem; margin-bottom: .35rem; }
.verdict { padding: .7rem 1rem; border-radius: 8px; margin-bottom: .8rem; border: 1px solid; }
.verdict-ok { background: #eef8f1; border-color: #bfe3cc; }
.verdict-bad { background: #fff3e0; border-color: #f0c88c; }

/* Le planning utilise toute la largeur de la fenêtre */
.plan th.name { width: 230px; }
.view-year th.name { width: 300px; }
.pb-one_over, .pb-sim_one { border-color: #c0392b; background: #fbe3e0; font-weight: 600; }

/* Projection du remplissage (tableau de bord) */
.fill-viz { --fill-contrat: #2a78d6; --fill-propose: #eb6834; --fill-demande: #1baf7a; --fill-demande-bg: #d3f0e5; position: relative; }
.fill-svg { width: 100%; height: auto; display: block; max-height: 340px; }
.fill-svg .grid { stroke: #ebe9e4; stroke-width: 1; }
.fill-svg .grid.base { stroke: #b9b5ab; }
.fill-svg .ytick { font-size: 12px; fill: #6b7684; text-anchor: end; }
.fill-svg .xtick { font-size: 13px; fill: #52514e; text-anchor: middle; }
.fill-svg .xtick.yr { font-size: 11px; fill: #8a8f96; }
.fill-svg .seg-contrat { fill: var(--fill-contrat); }
.fill-svg .seg-propose { fill: var(--fill-propose); }
.fill-svg .seg-demande { fill: url(#hatch-demande); stroke: var(--fill-demande); stroke-width: 1; }
.fill-svg .hit { fill: transparent; pointer-events: all; }
.fill-svg .bar-g:hover .hit { fill: rgba(36,48,61,.05); }
.fill-svg .capline { stroke: #24303d; stroke-width: 1.5; stroke-dasharray: 5 4; }
.fill-svg .caplabel { font-size: 12px; fill: #24303d; text-anchor: end; font-weight: 600; }
.fill-svg .vlabel { font-size: 13px; fill: #24303d; text-anchor: middle; font-weight: 600; }
.fill-svg .vlabel.over { fill: #d03b3b; }
.fill-legend { display: flex; flex-wrap: wrap; gap: .3rem 1.1rem; font-size: .82rem; color: #52514e; margin: .3rem 0 .4rem; }
.fill-legend span { display: inline-flex; align-items: center; gap: .35rem; }
.fill-legend .sw { width: 14px; height: 10px; border-radius: 2px; display: inline-block; }
.sw-contrat { background: #2a78d6; } .sw-propose { background: #eb6834; }
.sw-demande { background: repeating-linear-gradient(45deg, #1baf7a 0 2px, #d3f0e5 2px 5px); outline: 1px solid #1baf7a; }
.sw-cap { height: 0 !important; border-top: 2px dashed #24303d; border-radius: 0 !important; }
.fill-summary { margin: .2rem 0 .4rem; font-size: .92rem; }
.fill-table summary { cursor: pointer; color: var(--primary); font-size: .85rem; }
.viz-tip { position: fixed; z-index: 50; pointer-events: none; background: #fff; border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 6px 18px rgba(0,0,0,.12); padding: .5rem .7rem; font-size: .8rem; white-space: pre-line; max-width: 320px; color: var(--ink); }

/* Anniversaire dans le planning */
.mk-bday { background: #fff !important; color: inherit; padding: 2px; border-radius: 999px; font-size: .85rem; line-height: 1; left: 50%; transform: translate(-50%, -50%); box-shadow: 0 0 0 1.5px #e87ba4, 0 1px 3px rgba(0,0,0,.2); }
.view-week .mk-bday { left: auto; right: 4px; top: 50%; transform: translateY(-50%); font-size: .8rem; z-index: 2; }
.view-year .mk-bday { font-size: .6rem; padding: 1px; top: 3px; transform: translateX(-50%); }

/* Calendrier du tableau de bord */
.cal-head { display: flex; align-items: baseline; gap: .8rem; margin-bottom: .6rem; flex-wrap: wrap; }
.cal-head h2 { margin: 0; }
.cal-head .seg { margin-left: auto; }
.cal-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)) repeat(2, minmax(0, .6fr)); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.cal-dn { font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); padding: .3rem .4rem; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); background: #fbfaf8; }
.cal-day { min-height: 74px; padding: .25rem .3rem .35rem; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cal-day.we, .cal-dn.we { background: #faf9f6; }
.cal-day.out { background: #f6f5f2; }
.cal-day.out .cal-num { color: #b3b0a8; }
.cal-day.past .cal-ev { opacity: .6; }
.cal-day.today { box-shadow: inset 0 0 0 2px var(--primary); }
.cal-day.today .cal-num { background: var(--primary); color: #fff; border-radius: 999px; padding: 0 .4rem; }
.cal-num { font-size: .78rem; font-weight: 600; color: var(--muted); align-self: flex-start; }
.cal-ev { display: block; font-size: .74rem; line-height: 1.3; padding: .1rem .35rem; border-radius: 4px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-ev:hover { text-decoration: none; filter: brightness(.96); }
.cal-ev .ico { font-weight: 700; margin-right: .3rem; font-size: .7rem; }
.ev-visit { background: #e3eef9; border-left: 3px solid #2a78d6; }
.ev-bday { background: #fdeef4; border-left: 3px solid #e87ba4; }
.cal-legend { display: flex; gap: 1.2rem; font-size: .8rem; color: var(--muted); margin-top: .5rem; }
.cal-legend span { display: inline-flex; align-items: center; gap: .35rem; }
.cal-legend i { width: 14px; height: 10px; border-radius: 2px; display: inline-block; }
@media (max-width: 900px) { .cal-grid { grid-template-columns: repeat(7, minmax(0, 1fr)); } .cal-ev { font-size: .66rem; } }


/* ===================== Design v4 : structure, menu, barre du haut ===================== */
body.app { min-height: 100vh; }
.main { margin-left: var(--side-w); min-height: 100vh; display: flex; flex-direction: column; min-width: 0; }
.content { flex: 1; padding: 1.5rem clamp(1rem, 2.2vw, 2.2rem) 2.5rem; min-width: 0; width: 100%; }

/* Menu latéral */
.sidebar { position: fixed; inset: 0 auto 0 0; width: var(--side-w); z-index: 30; display: flex; flex-direction: column;
  background: linear-gradient(175deg, var(--side-1) 0%, var(--side-2) 100%); color: #e8f3f0; box-shadow: 2px 0 18px rgba(20,50,45,.12); }
.brand { display: flex; align-items: center; gap: .7rem; padding: 1.1rem 1.1rem 1rem; color: #fff; text-decoration: none !important; }
.brand .logo, .public-brand .logo { width: 40px; height: 40px; border-radius: 12px; background: #fff; color: var(--primary); display: grid; place-items: center; flex-shrink: 0; box-shadow: 0 3px 10px rgba(0,0,0,.15); }
.brand .logo .ic, .public-brand .logo .ic { width: 22px; height: 22px; fill: #f2a65a; stroke: #e0873a; }
.brand-txt { display: flex; flex-direction: column; min-width: 0; }
.brand-txt strong { font-size: 1.02rem; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.brand-txt small { font-size: .74rem; opacity: .75; }
.side-nav { flex: 1; overflow-y: auto; padding: .3rem .7rem 1rem; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.25) transparent; }
.nav-group { font-size: .68rem; text-transform: uppercase; letter-spacing: .1em; color: rgba(232,243,240,.6); margin: 1.1rem .7rem .35rem; font-weight: 700; }
.side-nav a { display: flex; align-items: center; gap: .7rem; padding: .58rem .75rem; margin-bottom: 2px; border-radius: 11px; color: #e8f3f0; font-size: .93rem; font-weight: 600; text-decoration: none; transition: background .15s, color .15s; }
.side-nav a .ic { width: 20px; height: 20px; flex-shrink: 0; opacity: .9; }
.side-nav a span:first-of-type { flex: 1; }
.side-nav a:hover { background: rgba(255,255,255,.1); color: #fff; }
.side-nav a.active { background: #fff; color: var(--primary-600); box-shadow: 0 4px 12px rgba(0,0,0,.12); }
.side-nav a.active .ic { opacity: 1; }
.side-nav .count { background: var(--accent); color: #3a2208; border-radius: 999px; font-size: .72rem; padding: .05rem .5rem; font-weight: 800; }
.side-foot { display: flex; align-items: center; gap: .5rem; padding: .8rem .9rem; border-top: 1px solid rgba(255,255,255,.12); }
.side-foot .me { flex: 1; display: flex; align-items: center; gap: .6rem; color: #fff; text-decoration: none; min-width: 0; }
.side-foot .me span:last-child { display: flex; flex-direction: column; min-width: 0; }
.side-foot .me strong { font-size: .85rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.side-foot .me small { font-size: .72rem; opacity: .7; }
.side-foot .icon-btn { color: #e8f3f0; }
.side-foot .icon-btn:hover { background: rgba(255,255,255,.12); }
.avatar-me { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-size: .78rem; font-weight: 800; background: #f6d7b5; color: #6b3d12; flex-shrink: 0; }

/* Barre du haut */
.topbar { position: sticky; top: 0; z-index: 20; height: var(--top-h); display: flex; align-items: center; gap: 1rem;
  padding: 0 clamp(1rem, 2.2vw, 2.2rem); background: rgba(255,255,255,.88); backdrop-filter: saturate(1.4) blur(10px); border-bottom: 1px solid var(--line); }
.tb-title { display: flex; flex-direction: column; min-width: 0; }
.tb-page { font-weight: 800; font-size: 1.12rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tb-date { font-size: .78rem; color: var(--muted); }
.tb-right { margin-left: auto; display: flex; align-items: center; gap: .7rem; }
.pill-alert { display: inline-flex; align-items: center; gap: .4rem; padding: .4rem .8rem; border-radius: 999px; background: #fff3e2; color: #8a4b00; font-size: .84rem; font-weight: 700; border: 1px solid #f6d3a5; text-decoration: none !important; }
.pill-alert .ic { width: 17px; height: 17px; }
.pill-alert:hover { background: #ffe9cc; }
.tb-user { display: flex; align-items: center; gap: .55rem; color: var(--ink); text-decoration: none !important; padding: .25rem .6rem .25rem .25rem; border-radius: 999px; }
.tb-user:hover { background: var(--bg); }
.tb-user-txt { display: flex; flex-direction: column; font-weight: 700; font-size: .88rem; line-height: 1.15; }
.tb-user-txt small { font-weight: 500; color: var(--muted); font-size: .74rem; }
.icon-btn { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 11px; border: 0; background: transparent; color: var(--ink); cursor: pointer; }
.icon-btn:hover { background: var(--bg); }
.icon-btn .ic { width: 22px; height: 22px; }
.menu-btn { display: none; }
.scrim { display: none; }

/* Pages publiques (connexion, installation) */
.shell-public { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 2rem 1rem;
  background: radial-gradient(1200px 600px at 10% -10%, #d9efe9 0%, transparent 60%), radial-gradient(900px 500px at 110% 110%, #fbe3c8 0%, transparent 55%), var(--bg); }
.shell-public .content { width: 100%; max-width: 440px; padding: 0; flex: 0; }
.public-brand { display: flex; align-items: center; gap: .7rem; margin-bottom: 1.2rem; font-size: 1.2rem; color: var(--ink); }
.login-card { padding: 1.8rem 1.8rem 1.5rem; border-radius: 20px; box-shadow: 0 10px 40px rgba(31,45,58,.10); }

/* Cartes, titres, boutons : plus doux */
h1 { font-size: 1.6rem; font-weight: 800; letter-spacing: -.01em; }
h2 { font-weight: 800; }
.card { border-radius: var(--radius); border-color: #ece8e1; }
.btn { border-radius: 10px; padding: .55rem 1.05rem; font-weight: 700; transition: background .15s, border-color .15s, box-shadow .15s; }
.btn-primary { box-shadow: 0 3px 10px color-mix(in srgb, var(--primary) 35%, transparent); }
.btn-primary:hover { background: var(--primary-600); }
input, select, textarea { border-radius: 10px; padding: .6rem .75rem; }
.flash { border-radius: 12px; }

/* Tuiles de chiffres clés */
.kpis { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.kpi { display: flex; align-items: center; gap: .9rem; border-radius: var(--radius); padding: 1rem 1.1rem; border-color: #ece8e1; }
.kpi .kpi-ic { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; flex-shrink: 0; }
.kpi .kpi-ic .ic { width: 24px; height: 24px; }
.kpi .kpi-body { display: flex; flex-direction: column; min-width: 0; }
.kpi .kpi-body b { font-size: 1.9rem; font-weight: 800; color: var(--ink); line-height: 1.05; }
.kpi-teal .kpi-ic { background: var(--primary-50); color: var(--primary); }
.kpi-blue .kpi-ic { background: #e3eef9; color: #2a78d6; }
.kpi-amber .kpi-ic { background: #fdf0dc; color: #b86e0c; }
.kpi-pink .kpi-ic { background: #fce8f0; color: #c2477a; }

/* Tableau de bord sur deux colonnes quand la largeur le permet */
.dash-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr)); gap: 1rem; align-items: start; }
.dash-grid > .card { margin-bottom: 0; }
.dash-grid .span-all { grid-column: 1 / -1; }
.agenda h3 { display: flex; align-items: center; gap: .45rem; font-size: .9rem; margin: .9rem 0 .4rem; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.agenda h3:first-of-type { margin-top: .2rem; }
.agenda h3 .ic { width: 18px; height: 18px; }

/* Responsive */
@media (max-width: 1000px) {
  .main { margin-left: 0; }
  .sidebar { transform: translateX(-105%); transition: transform .22s ease; }
  body.nav-open .sidebar { transform: none; }
  body.nav-open .scrim { display: block; position: fixed; inset: 0; background: rgba(20,30,40,.35); z-index: 25; }
  .menu-btn { display: inline-grid; }
}
@media (max-width: 900px) {
  .grid2, .grid3 { grid-template-columns: 1fr; }
  .dl { grid-template-columns: 1fr; }
  .dl dt { margin-top: .4rem; }
  .tb-user-txt, .pill-alert span { display: none; }
}
@media (max-width: 560px) {
  :root { --top-h: 56px; }
  .content { padding: 1rem .8rem 2rem; }
  .kpis { grid-template-columns: 1fr 1fr; gap: .6rem; }
  .kpi { padding: .75rem; gap: .6rem; }
  .kpi .kpi-ic { width: 38px; height: 38px; }
  .kpi .kpi-body b { font-size: 1.45rem; }
  .card { padding: .9rem; }
  .page-head h1 { font-size: 1.35rem; }
  .tb-date { display: none; }
  .filters input[type=search] { min-width: 0; width: 100%; }
  .plan-tools { width: 100%; }
}
@media print { .sidebar, .topbar, .scrim { display: none !important; } .main { margin: 0; } }
.count-chip { display: inline-block; min-width: 1.6rem; text-align: center; font-size: .78rem; padding: .05rem .45rem; border-radius: 999px; background: #fde7c6; color: #8a4b00; vertical-align: middle; }
.alerts li { border-radius: 10px; }
.list li { display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; }
.cal-head h2 { font-size: 1.05rem; }
.kpi .kpi-body { font-size: .88rem; font-weight: 600; color: var(--muted); line-height: 1.3; }
.kpi .kpi-body small { display: block; font-size: .76rem; font-weight: 500; }

.badge, .status, .tag, .tg { white-space: nowrap; }
.table.tight td { white-space: nowrap; }
.cal-list { display: none; list-style: none; margin: .6rem 0 0; padding: 0; }
.cal-list li { display: flex; gap: .6rem; align-items: center; padding: .45rem 0; border-bottom: 1px solid var(--line); font-size: .88rem; }
.cal-list .d { font-weight: 800; min-width: 3.2rem; color: var(--muted); }
@media (max-width: 560px) {
  .cal-day { min-height: 46px; padding: .2rem; }
  .cal-ev { font-size: 0; padding: 0; height: 6px; border-radius: 3px; border-left: 0; }
  .cal-ev .ico { display: none; }
  .ev-visit.cal-ev { background: #2a78d6; } .ev-bday.cal-ev { background: #e87ba4; }
  .cal-list { display: block; }
  .cal-head .seg { margin-left: 0; }
}

/* ===================== Finances ===================== */
.tag .ic { width: 14px; height: 14px; vertical-align: -2px; }
.btn .ic { width: 18px; height: 18px; vertical-align: -4px; margin-right: .2rem; }
.btn-link { background: none; border: 0; color: var(--muted); box-shadow: none; }
.btn-link:hover { color: var(--ink); background: none; text-decoration: underline; }
.right { text-align: right; }
.page-head .row { display: flex; flex-wrap: wrap; }
.year-pick select { width: auto; margin: 0; font-weight: 700; }
.fin-tabs { overflow-x: auto; scrollbar-width: none; }
.fin-tabs a { white-space: nowrap; }
.empty-state { text-align: left; padding: 1.5rem; }
.empty-state h2 { margin-top: 0; }
.num { text-align: right !important; font-variant-numeric: tabular-nums; white-space: nowrap; }
.neg { color: var(--danger); } .pos { color: var(--ok); }
.ref { display: inline-block; min-width: 1.8rem; font-size: .72rem; color: var(--muted); background: #f3f1ec; border-radius: 5px; padding: 0 .3rem; text-align: center; }
.fin-facts { display: flex; flex-wrap: wrap; gap: .5rem 1.4rem; margin: -.3rem 0 1rem; font-size: .92rem; color: var(--muted); }
.fin-facts b { color: var(--ink); }
.chips { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; }
.chip { padding: .3rem .7rem; border-radius: 999px; border: 1px solid var(--line); color: var(--ink); font-size: .85rem; background: #fff; }
.chip:hover { text-decoration: none; border-color: var(--primary); }
.chip.on { background: var(--primary); border-color: var(--primary); color: #fff; font-weight: 700; }
.chips select { width: auto; margin: 0; padding: .3rem .6rem; border-radius: 999px; font-size: .85rem; }
.fin-table td, .fin-table th { padding: .45rem .7rem; }
.fin-table .kind-row th, .fin-cash .kind-row th, .fin-plan .kind-row th { background: #f6f4ef; color: var(--ink); font-size: .8rem; text-transform: uppercase; letter-spacing: .05em; }
.fin-table .cat-row td { font-weight: 600; }
.cat-toggle { background: none; border: 0; padding: 0; font: inherit; color: var(--ink); cursor: pointer; text-align: left; }
.cat-toggle .caret { display: inline-block; width: 1em; color: var(--muted); transition: transform .15s; }
.cat-toggle[aria-expanded=true] .caret { transform: rotate(90deg); }
.fin-table .line-row td:first-child { padding-left: 2rem; }
.fin-table .line-row td { font-size: .9rem; background: #fcfbf9; }
.tot-row td { font-weight: 700; border-top: 2px solid var(--line); }
.res-row td { font-weight: 800; background: #f1f6f5; font-size: 1rem; }
.gcol { width: 190px; white-space: nowrap; }
.gauge { display: inline-block; width: 110px; height: 8px; border-radius: 99px; background: #eeebe5; overflow: hidden; vertical-align: middle; margin-right: .45rem; }
.gauge i { display: block; height: 100%; border-radius: 99px; background: var(--ok); }
.gauge.g-warn i { background: #e0a106; } .gauge.g-over i { background: var(--danger); } .gauge.g-low i { background: #9fb3c8; }
.g-pct { font-size: .8rem; } .g-pct.g-over { color: var(--danger); } .g-pct.g-warn { color: #a86f00; }
.fin-svg { width: 100%; height: auto; display: block; max-height: 300px; }
.fin-svg .grid { stroke: #ebe9e4; stroke-width: 1; } .fin-svg .grid.base { stroke: #b9b5ab; }
.fin-svg .ytick { font-size: 11px; fill: #6b7684; text-anchor: end; }
.fin-svg .xtick { font-size: 12px; fill: #52514e; text-anchor: middle; }
.fin-svg .hit { fill: transparent; pointer-events: all; }
.fin-svg .bar-g:hover .hit { fill: rgba(36,48,61,.05); }
.fin-svg .b-budget { fill: #d9dee6; }
.fin-svg .b-actual { fill: #2a78d6; } .fin-svg .b-actual.over { fill: #d03b3b; } .fin-svg .b-actual.partial { opacity: .5; }
.fin-svg .cash.reel { fill: var(--primary); } .fin-svg .cash.encours { fill: var(--primary); opacity: .7; }
.fin-svg .cash.prevision { fill: #a8d5cc; } .fin-svg .cash.low { fill: #e8a09a; } .fin-svg .cash.reel.low { fill: #d03b3b; }
.fin-svg .alertline { stroke: #d03b3b; stroke-width: 1.4; stroke-dasharray: 5 4; }
.fin-svg .alertlabel { font-size: 11px; fill: #d03b3b; text-anchor: start; font-weight: 700; }
.sw-budget { background: #d9dee6; } .sw-actual { background: #2a78d6; } .sw-over { background: #d03b3b; } .sw-partial { background: #2a78d6; opacity: .5; }
.sw-reel { background: var(--primary); } .sw-prev { background: color-mix(in srgb, var(--primary) 40%, #fff); } .sw-low { background: #e8a09a; }
.fin-sum { margin: 0 0 .6rem; }
.fin-sum a { margin-left: .6rem; }
.fin-entries tr.is-income td { background: #f5fbf8; }
.tag-btn { border: 0; cursor: pointer; font: inherit; font-size: .75rem; }
.fin-notes li { margin-bottom: .35rem; }
.fin-cash th small { display: block; font-weight: 400; text-transform: none; letter-spacing: 0; font-size: .68rem; }
.fin-cash td, .fin-cash th { padding: .4rem .5rem; font-size: .86rem; }
.fin-cash td:first-child { white-space: nowrap; }
.fin-cash td.st-prevision, .fin-cash th.st-prevision { color: #6b7684; font-style: italic; }
.fin-cash th.st-encours { color: var(--primary); }
.fin-cash .bal-row td { background: #f8f7f4; }
.fin-cash .bal-row.strong td { font-weight: 800; background: #eef5f3; }
.fin-plan td { padding: .2rem .15rem !important; }
.fin-plan input { margin: 0; padding: .3rem .35rem; font-size: .84rem; border-radius: 6px; width: 100%; min-width: 0; }
.fin-plan .in-ref { width: 3.2rem; text-align: center; }
.fin-plan .in-cat { width: 9rem; }
.fin-plan .in-label { width: 13rem; }
.fin-plan .in-m, .fin-plan .in-tot { width: 5.4rem; text-align: right; font-variant-numeric: tabular-nums; }
.fin-plan .in-tot { font-weight: 700; background: #f6f4ef; }
.fin-plan .new-row input { background: #fbfaf7; border-style: dashed; }
.fin-plan tr.is-del input:not([type=checkbox]) { text-decoration: line-through; opacity: .45; }
.fin-plan .tot-row td, .fin-plan .res-row td { padding: .45rem .35rem !important; font-size: .84rem; }
.plan-actions { padding: .8rem 1rem; display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; position: sticky; left: 0; }
@media (max-width: 560px) {
  .gcol { width: auto; } .gauge { width: 60px; }
  .fin-table td, .fin-table th { padding: .4rem .45rem; font-size: .85rem; }
}
svg.ic { width: 1.15em; height: 1.15em; vertical-align: -.2em; }
.alert-ok { border-color: var(--ok) !important; }
.fin-cash td:first-child, .fin-cash th:first-child { position: sticky; left: 0; z-index: 1; background: var(--card); }
.fin-cash .bal-row td:first-child { background: #f8f7f4; } .fin-cash .res-row td:first-child { background: #f1f6f5; }
.fin-cash .bal-row.strong td:first-child { background: #eef5f3; }
@media (max-width: 560px) {
  .fin-kpis { grid-template-columns: 1fr; }
  .fin-kpis .kpi .kpi-body b { font-size: 1.35rem; }
  .fin-facts { flex-direction: column; gap: .3rem; }
}
/* Participations des parents */
.month-nav { align-items: center; gap: .4rem !important; }
.month-nav form { margin: 0; } .month-nav input { margin: 0; width: auto; }
.fee-bar { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1.2rem; padding: .8rem 1rem; border-bottom: 1px solid var(--line); }
.fee-bar form { margin: 0 0 0 auto; }
.inline-label { display: inline-flex; align-items: center; gap: .5rem; margin: 0; font-weight: 600; }
.inline-label input { width: auto; margin: 0; padding: .35rem .5rem; }
.inline-pay { display: inline-flex; gap: .35rem; align-items: center; margin: 0; }
.pay-amount { width: 6.5rem !important; margin: 0 !important; padding: .35rem .5rem !important; text-align: right; font-variant-numeric: tabular-nums; }
.btn-pay { padding: .38rem .8rem; background: #e3f4ea; color: var(--ok); border-color: #bfe3cc; }
.btn-pay:hover { background: var(--ok); color: #fff; }
.fee-table tr.is-paid td { background: #f6fbf8; }
.rate-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 0 .8rem; }
tr.strong td { font-weight: 700; }
@media (max-width: 560px) {
  .hide-sm { display: none; }
  .fee-table td, .fee-table th { padding: .45rem .4rem; }
  .pay-amount { width: 5rem !important; }
  .fee-bar form { margin-left: 0; }
}
code.hash { font-size: .8rem; background: #f3f1ec; padding: .1rem .35rem; border-radius: 5px; }
.inline-details { display: inline-block; margin-left: .5rem; }
.inline-details[open] { display: block; margin: .5rem 0 0; }
/* Éditeur du modèle de contrat */
.tpl-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 1rem; align-items: start; }
.tpl-side .card { margin-bottom: 1rem; }
.tpl-toolbar { display: flex; flex-wrap: wrap; gap: .3rem; align-items: center; padding: .5rem; background: #f6f4ef; border: 1px solid var(--line); border-radius: 10px 10px 0 0; position: sticky; top: var(--top-h); z-index: 5; }
.tpl-toolbar button { border: 1px solid transparent; background: #fff; border-radius: 7px; padding: .3rem .55rem; font: inherit; font-size: .85rem; cursor: pointer; min-width: 2rem; }
.tpl-toolbar button:hover { border-color: var(--primary); }
.tpl-toolbar select { width: auto; margin: 0; padding: .3rem .5rem; font-size: .85rem; }
.tpl-toolbar .sep { width: 1px; height: 1.4rem; background: var(--line); margin: 0 .2rem; }
.tpl-editor { border: 1px solid var(--line); border-top: 0; border-radius: 0 0 10px 10px; background: #fff; min-height: 60vh; padding: 2rem 2.4rem; font-family: "DejaVu Sans", Verdana, sans-serif; font-size: .92rem; line-height: 1.5; outline: none; max-width: 860px; }
.tpl-editor:focus { box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 18%, transparent); }
.tpl-editor h1 { font-size: 1.5rem; color: #1f3d38; } .tpl-editor h2 { font-size: 1.1rem; color: #1f3d38; margin-top: 1.2rem; } .tpl-editor h3 { font-size: 1rem; }
.tpl-editor p { margin: .4rem 0; text-align: justify; }
.tpl-editor table { border-collapse: collapse; width: 100%; margin: .5rem 0; }
.tpl-editor td, .tpl-editor th { border: 1px solid #c9c4ba; padding: .3rem .5rem; vertical-align: top; text-align: left; }
.tpl-editor table:not([border]) td, .tpl-editor table[border="0"] td { border-style: dashed; border-color: #e3dfd7; }
.tpl-editor .page-break { border-top: 2px dashed #b9b5ab; margin: 1rem 0; position: relative; height: 0; }
.tpl-editor .page-break::after { content: "saut de page"; position: absolute; left: 50%; top: -.7rem; transform: translateX(-50%); background: #fff; padding: 0 .5rem; font-size: .7rem; color: #8a8f96; }
.tpl-actions { align-items: center; flex-wrap: wrap; }
.tpl-actions input { width: auto; flex: 1 1 220px; margin: 0; }
.tag-list { max-height: 55vh; overflow-y: auto; margin-top: .5rem; }
.tag-list h3 { font-size: .75rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin: .8rem 0 .3rem; }
.tag-ins { display: flex; flex-direction: column; align-items: flex-start; width: 100%; text-align: left; background: none; border: 0; border-radius: 7px; padding: .3rem .4rem; cursor: pointer; font: inherit; }
.tag-ins:hover { background: #f1f6f5; }
.tag-ins code { font-size: .78rem; color: var(--primary); }
.tag-ins span { font-size: .75rem; color: var(--muted); }
.tag-ins.used code { background: #e3f4ea; border-radius: 4px; padding: 0 .2rem; }
@media (max-width: 1100px) { .tpl-layout { grid-template-columns: 1fr; } .tpl-editor { padding: 1rem; } }
/* Familiarisation */
.ev-famil { background: #efeafb; border-left: 3px solid #7b5cd6; }
@media (max-width: 560px) { .ev-famil.cal-ev { background: #7b5cd6; } }
.mk-famil { background: #7b5cd6 !important; color: #fff; }
.fam-actions { margin-top: 1rem; align-items: start; }
.fam-actions h3 { margin-top: 0; }
.cd-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: .4rem 1.4rem; }
.cd-grid h3 { font-size: .9rem; margin: .4rem 0; }
.contract-data .dl { grid-template-columns: 9rem 1fr; }
.guardian-card { border: 1px solid var(--line); border-radius: 12px; padding: .8rem 1rem; }
.guardian-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 1rem; }
.guardian-card h3 { margin: 0 0 .4rem; font-size: 1rem; display: flex; justify-content: space-between; gap: .5rem; flex-wrap: wrap; }
.plan .bar.bar-famil { background: #7b5cd6 !important; color: #fff !important; border: 0 !important; opacity: 1 !important; overflow: hidden; white-space: nowrap; font-size: .62rem; }
/* Logo */
.brand .logo.has-img { background: #fff; padding: 3px; overflow: hidden; }
.brand .logo.has-img img { width: 100%; height: 100%; object-fit: contain; }
.public-logo { max-height: 56px; max-width: 200px; object-fit: contain; }
.logo-setting { display: flex; gap: 1.2rem; align-items: flex-start; flex-wrap: wrap; }
.logo-preview { width: 160px; height: 110px; border: 1px dashed var(--line); border-radius: 12px; display: grid; place-items: center; background: repeating-conic-gradient(#f6f4ef 0 25%, #fff 0 50%) 0 0 / 16px 16px; }
.logo-preview img { max-width: 140px; max-height: 90px; object-fit: contain; }
/* Mise en page du contrat */
.lay-wrap { display: grid; grid-template-columns: minmax(0, 560px) minmax(260px, 1fr); gap: 1.4rem; align-items: start; }
.lay-pages { margin-bottom: .5rem; flex-wrap: wrap; }
.lay-pages a { cursor: pointer; }
.lay-sheet { position: relative; width: 100%; aspect-ratio: 210 / 297; background: #fff; box-shadow: 0 4px 18px rgba(0,0,0,.12); border: 1px solid #e3dfd7; overflow: hidden; touch-action: none; user-select: none; }
.lay-sheet canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.lay-margins { position: absolute; left: 11.9%; right: 11.9%; top: 8.42%; bottom: 8.42%; border: 1px dashed rgba(47,107,99,.35); pointer-events: none; }
.lay-loading { position: absolute; inset: 0; display: grid; place-items: center; color: var(--muted); font-size: .85rem; pointer-events: none; }
.lay-img { position: absolute; cursor: move; outline: 1px dashed rgba(123,92,214,.7); z-index: 2; }
.lay-img img { width: 100%; height: 100%; object-fit: fill; display: block; pointer-events: none; }
.lay-img.active, .lay-img:hover { outline: 2px solid #7b5cd6; }
.lay-handle { position: absolute; right: -6px; bottom: -6px; width: 12px; height: 12px; background: #7b5cd6; border: 2px solid #fff; border-radius: 3px; cursor: nwse-resize; }
.lay-side h3 { margin-top: 0; }
.lay-list { display: flex; flex-direction: column; gap: .6rem; margin-bottom: .8rem; }
.lay-row { display: grid; grid-template-columns: 56px 1fr auto; gap: .6rem; align-items: center; border: 1px solid var(--line); border-radius: 10px; padding: .5rem; }
.lay-row.off { opacity: .55; }
.lay-row > img { width: 56px; height: 44px; object-fit: contain; background: repeating-conic-gradient(#f6f4ef 0 25%, #fff 0 50%) 0 0 / 10px 10px; border-radius: 6px; }
.lay-fields { display: flex; flex-wrap: wrap; gap: .3rem .5rem; align-items: center; }
.lay-fields select { width: 100%; margin: 0; padding: .3rem; font-size: .82rem; }
.lay-fields label { display: inline-flex; gap: .25rem; align-items: center; font-size: .75rem; margin: 0; color: var(--muted); }
.lay-fields input { width: 4.6rem; margin: 0; padding: .25rem .35rem; font-size: .82rem; }
@media (max-width: 1000px) { .lay-wrap { grid-template-columns: 1fr; } }
.tpl-tabs a { display: inline-flex; align-items: center; gap: .35rem; font-size: 1rem; }
.tpl-tabs a .ic { width: 18px; height: 18px; }

/* Éditeur : rendu proche du PDF (mise en forme du modèle Word de la crèche) */
.tpl-editor { font-family: "Times New Roman", Times, serif; font-size: 11pt; line-height: 1.25; color: #000; padding: 2.2rem 2.6rem; }
.tpl-editor h1 { font-family: Arial, Helvetica, sans-serif; font-size: 14pt; font-weight: 700; color: #1f4e79; text-transform: uppercase; margin: 1rem 0 .6rem; }
.tpl-editor h2 { font-family: Arial, Helvetica, sans-serif; font-size: 12pt; font-weight: 700; color: #2e74b5; text-transform: uppercase; border-bottom: 1px solid #000; padding-bottom: 2px; margin: 1.3rem 0 .6rem; }
.tpl-editor h3 { font-family: "Times New Roman", serif; font-size: 12pt; font-weight: 400; color: #4472c4; margin: .6rem 0 .2rem; }
.tpl-editor h4 { font-family: Arial, Helvetica, sans-serif; font-size: 11pt; font-weight: 700; font-style: italic; text-decoration: underline; color: #2e74b5; margin: .6rem 0 .2rem; }
.tpl-editor p { margin: 0 0 6pt; text-align: left; }
.tpl-editor p.fn { font-size: 8pt; color: #444; }
.tpl-editor ul, .tpl-editor ol { margin: 0 0 6pt; padding-left: 1.6rem; }
.tpl-editor ul[data-bullet="arrow"] { list-style-type: "➢  "; }
.tpl-editor ul[data-bullet="dash"] { list-style-type: "–  "; }
.tpl-editor ul[data-bullet="box"] { list-style-type: "☐  "; }
.tpl-editor ul[data-bullet="circle"] { list-style-type: circle; } .tpl-editor ul[data-bullet="square"] { list-style-type: square; }
.tpl-editor img { max-width: 100%; height: auto; vertical-align: middle; }
.tpl-editor td, .tpl-editor th { font-size: 10pt; }
.tpl-editor .toc { border: 1px dashed #7b5cd6; border-radius: 8px; padding: .8rem; margin: .5rem 0; color: #5b3fc4; font-size: .85rem; background: #f7f4fe; }
.tpl-editor .toc::before { content: "📑 Table des matières générée automatiquement dans le PDF (titres et numéros de pages)"; }

/* Éditeur de contrat : la colonne des balises reste visible pendant le défilement du contrat */
.tpl-side { position: sticky; top: calc(var(--top-h) + .75rem); max-height: calc(100vh - var(--top-h) - 1.5rem); overflow-y: auto; overscroll-behavior: contain; padding-right: 2px; }
.tpl-side .tag-list { max-height: calc(100vh - var(--top-h) - 15rem); min-height: 12rem; }
@media (max-width: 1100px) { .tpl-side { position: static; max-height: none; overflow: visible; } .tpl-side .tag-list { max-height: 55vh; } }
.tpl-editor li > ul, .tpl-editor li > ol { margin: 2pt 0 0; }

/* Barre d'outils de l'éditeur : compacte, à icônes (style WYSIWYG) */
.tpl-toolbar { gap: 2px; padding: 4px 6px; flex-wrap: wrap; }
.tpl-toolbar .tb-group { display: inline-flex; align-items: center; gap: 1px; padding: 0 4px; border-left: 1px solid var(--line); position: relative; }
.tpl-toolbar .tb-end { margin-left: auto; }
.tpl-toolbar button { display: inline-flex; align-items: center; justify-content: center; gap: 1px; min-width: 30px; height: 30px; padding: 0 5px; background: transparent; border: 1px solid transparent; border-radius: 6px; color: #3a3f45; font-size: .95rem; line-height: 1; }
.tpl-toolbar button:hover { background: #fff; border-color: var(--line); }
.tpl-toolbar button.on { background: #fff; border-color: var(--primary); color: var(--primary); }
.tpl-toolbar button:disabled { opacity: .4; cursor: default; background: transparent; border-color: transparent; }
.tpl-toolbar select { height: 30px; padding: 0 .4rem; font-size: .85rem; border-radius: 6px; margin-right: 2px; }
.tpl-toolbar .tb-image { color: #5b3fc4; }
.tb-dd .tb-menu { display: none; position: absolute; top: calc(100% + 4px); left: 0; z-index: 30; background: #fff; border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,.12); padding: 4px; flex-direction: column; min-width: 220px; }
.tb-dd.open .tb-menu { display: flex; }
.tb-dd .tb-menu.tb-menu-row { flex-direction: row; min-width: 0; }
.tb-menu button { justify-content: flex-start; width: 100%; height: auto; padding: .45rem .6rem; font-size: .88rem; white-space: nowrap; }
.tb-menu-row button { width: auto; padding: 0 5px; height: 30px; justify-content: center; }
.tb-menu hr { border: 0; border-top: 1px solid var(--line); margin: 3px 0; }
.tb-dd.open > .tb-dd-btn { background: #fff; border-color: var(--line); }

/* Réglages : couleur du thème */
.theme-setting { display: flex; gap: 1.2rem; flex-wrap: wrap; align-items: flex-start; }
.theme-swatches { display: flex; flex-wrap: wrap; gap: .45rem; margin: .2rem 0 .8rem; }
.theme-swatches button { width: 34px; height: 34px; border-radius: 50%; border: 3px solid #fff; box-shadow: 0 0 0 1px var(--line); cursor: pointer; padding: 0; }
.theme-swatches button.on { box-shadow: 0 0 0 2px var(--ink); }
.theme-pick { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; }
.theme-pick input[type=color] { width: 56px; margin: 0; cursor: pointer; }
.theme-pick input[type=text] { width: 110px; margin: 0; font-family: ui-monospace, monospace; }
.theme-demo { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; margin-top: .6rem; }
.theme-demo .demo-side { width: 120px; height: 34px; border-radius: 8px; background: linear-gradient(180deg, var(--side-1), var(--side-2)); color: #fff; font-size: .8rem; display: grid; place-items: center; }

/* Import des enfants (Excel) */
.ci-list { margin: .8rem 0 0; padding-left: 1.1rem; }
.ci-mode { margin: .4rem 0 .9rem; }
.ci-mode label.check { margin-bottom: .35rem; flex-wrap: wrap; }
.ci-mode .ci-day { width: 4.2rem; display: inline-block; margin: 0 .2rem; padding: .2rem .4rem; }
.ci-remode { display: flex; gap: .8rem; align-items: flex-end; flex-wrap: wrap; margin: .6rem 0 .8rem; }
.ci-remode .ci-mode { margin: 0; flex: 1 1 520px; display: flex; gap: 1rem; flex-wrap: wrap; align-items: center; }
.ci-remode .ci-mode label.check { margin: 0; }
.ci-table td { vertical-align: top; }
.ci-table tr.ci-err td { background: #fdf1ef; }
.ci-warn { color: var(--warn); }
.sec-dot { display: inline-block; width: .6rem; height: .6rem; border-radius: 50%; background: var(--c); margin-right: .3rem; }
.ci-table { font-size: .9rem; }
.ci-table td:last-child { min-width: 190px; max-width: 260px; }
.ci-table td:nth-child(5) { min-width: 210px; }