*, *::before, *::after { box-sizing: border-box; margin: 0; }
body { font-family: var(--font-body); color: var(--charcoal); background: var(--off-white); line-height: 1.5; min-height: 100vh; display: flex; flex-direction: column; }
h1, h2, h3, .btn { font-family: var(--font-title); }
main { flex: 1; width: min(1100px, 100%); margin: 0 auto; padding: 32px 24px; }

.site-header { background: var(--charcoal); color: #fff; padding: 16px 40px; display: flex; align-items: center; justify-content: space-between; }
.site-header .brand { font-family: var(--font-title); font-weight: 800; font-size: 1.1rem; color: #fff; text-decoration: none; }
.site-header .brand b { color: var(--green); }
.site-footer { padding: 16px 40px; color: var(--charcoal-mid); font-size: .8rem; text-align: center; }

.btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 18px; border-radius: var(--radius-xl); font-weight: 700; font-size: .85rem; border: 2px solid var(--border); background: #fff; color: var(--charcoal); cursor: pointer; text-decoration: none; white-space: nowrap; }
.btn:focus-visible { outline: 3px solid var(--charcoal); outline-offset: 2px; }
.btn-primary { background: var(--green); border-color: var(--green); color: #fff; }
.btn-primary:hover:not(:disabled) { background: var(--green-dark); border-color: var(--green-dark); }
.btn-dark { background: var(--charcoal); border-color: var(--charcoal); color: #fff; }
.btn:disabled { opacity: .5; cursor: not-allowed; }

.card { background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 20px; border-top: 4px solid var(--green); }
.card h2 { margin-bottom: 8px; }

.badge { display: inline-flex; align-items: center; gap: 4px; font-family: var(--font-title); font-weight: 700; font-size: .72rem; padding: 3px 10px; border-radius: 99px; background: var(--green-xlight); color: var(--green-dark); }
.badge.warn { background: var(--warn-bg); color: #9A6412; }
.badge.grey { background: #E8ECEF; color: var(--charcoal); }

.field { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; }
.field label { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px; color: var(--green-dark); }
.field input, .field textarea, .field select { width: 100%; padding: 8px 12px; border: 1.5px solid var(--border); border-radius: var(--radius-sm); font: inherit; background: #fff; color: var(--charcoal); }
.field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: var(--green); box-shadow: 0 0 0 3px rgba(122, 193, 66, .15); }

.stack > * + * { margin-top: 16px; }
.muted { color: var(--charcoal-mid); font-size: .85rem; }

.site-nav { display: flex; gap: 20px; }
.site-nav a { color: #fff; text-decoration: none; font-weight: 700; font-size: .85rem; }
.site-nav a:hover { color: var(--green-light); }
.auth-wrap { max-width: 440px; margin: 40px auto; }
.alert { padding: 10px 14px; border-radius: var(--radius-sm); font-size: .88rem; margin-bottom: 12px; }
.alert-error { background: #FCEBEB; color: #8E2B2B; border: 1px solid var(--danger); }
.alert-info { background: var(--green-xlight); color: var(--green-dark); }
.check { display: flex; align-items: center; gap: 8px; font-size: .85rem; margin: 4px 0 16px; }

.page-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.page-head h1 { font-size: 1.6rem; }
.actions { display: flex; gap: 8px; align-items: center; }
.actions form { display: inline; }
.btn-danger { background: var(--danger); border-color: var(--danger); color: #fff; }
.table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.table th { text-align: left; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--charcoal-mid); padding: 8px 10px; border-bottom: 1.5px solid var(--border); background: var(--off-white); }
.table td { padding: 8px 10px; border-bottom: 1px solid var(--border); vertical-align: top; }
.row-actions { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.row-actions form { display: inline; }
.link, .link-danger { background: none; border: 0; padding: 0; font: inherit; font-weight: 700; cursor: pointer; color: var(--green-dark); text-decoration: underline; }
.link-danger { color: var(--danger); }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.auth-wrap.wide { max-width: 640px; }
fieldset.field { border: 0; padding: 0; }
fieldset.field legend { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px; color: var(--green-dark); margin-bottom: 6px; }
.plain { list-style: none; padding: 0; }
.plain li { padding: 6px 0; border-bottom: 1px solid var(--border); }
a { color: var(--green-dark); }

/* ---------- Calendrier (§ 4.5) ---------- */
.cap { text-transform: capitalize; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.cal-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 20px; align-items: start; }
@media (max-width: 900px) { .cal-layout { grid-template-columns: 1fr; } }
.cal-toolbar { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.cal-month { flex: 1; text-align: center; font-size: 1.1rem; text-transform: capitalize; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.dow { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--charcoal-mid); text-align: center; padding-bottom: 4px; }
.cell { position: relative; height: 78px; border: 1.5px solid var(--border); border-radius: var(--radius-sm); background: #fff; user-select: none; cursor: pointer; transition: background .15s, border-color .15s; outline: none; }
.cell:focus-visible, .cell.selected { border-color: var(--charcoal); }
.cell:focus-visible { box-shadow: 0 0 0 3px rgba(62, 74, 82, .25); }
.cell.off { background-image: repeating-linear-gradient(135deg, transparent 0 6px, rgba(176, 188, 196, .18) 6px 12px); }
.cell.empty { visibility: hidden; }
.cell-day { position: absolute; top: 4px; left: 8px; font-size: .8rem; font-weight: 700; }
.cell-hol { position: absolute; bottom: 3px; left: 8px; right: 4px; font-size: .6rem; color: var(--charcoal-mid); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cell-val { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 1rem; pointer-events: none; color: var(--charcoal); }
.q25 { background-color: #EBF6DC; }
.q50 { background-color: #A8D97A; }
.q75 { background-color: #7AC142; }
.q100 { background-color: #5E9932; }
.q100 .cell-val { color: #fff; }
.q75 .cell-day, .q100 .cell-day, .q75 .cell-hol, .q100 .cell-hol { color: #fff; }
.cr { position: absolute; top: 3px; right: 3px; border-radius: 99px; font-size: .7rem; font-weight: 800; padding: 2px 7px; display: flex; align-items: center; gap: 3px; background: var(--charcoal); color: #fff; text-decoration: none; z-index: 1; }
.cr.add { background: rgba(255, 255, 255, .85); color: var(--charcoal-mid); opacity: 0; border: 1px dashed var(--charcoal-light); }
.cell:hover .cr.add, .cell:focus-visible .cr.add, .cr.add:focus-visible { opacity: 1; }
@media (pointer: coarse) { .cr.add { opacity: 1; } }
.cal-total { margin-top: 14px; display: flex; justify-content: space-between; font-weight: 700; }
.legend { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 12px; font-size: .78rem; color: var(--charcoal-mid); }
.legend span { display: inline-flex; align-items: center; gap: 4px; }
.legend i { width: 14px; height: 14px; border-radius: 3px; border: 1px solid var(--border); display: inline-block; }
.panel h3 { font-size: 1.05rem; font-weight: 800; display: flex; justify-content: space-between; align-items: center; gap: 6px; }
.panel .nav { display: flex; gap: 8px; font-size: 1.1rem; }
.panel .nav a { color: var(--charcoal-mid); text-decoration: none; padding: 0 4px; }
.hidden-link { display: none; }
.label { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px; color: var(--green-dark); margin: 16px 0 8px; }
.qsel { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.qsel button { padding: 8px 0; border: 1.5px solid var(--border); border-radius: var(--radius-sm); background: #fff; font-weight: 800; cursor: pointer; color: var(--charcoal); }
.qsel button.q25 { background: #EBF6DC; } .qsel button.q50 { background: #A8D97A; } .qsel button.q75 { background: #7AC142; } .qsel button.q100 { background: #5E9932; color: #fff; }
.qsel button.on { border-color: var(--charcoal); box-shadow: 0 0 0 2px var(--charcoal) inset; }
.qsel button:disabled { cursor: default; opacity: .8; }
.entry { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 10px 12px; margin-bottom: 8px; }
.entry .act { display: flex; gap: 12px; margin-top: 6px; }
.entry-form { margin: 8px 0; }
.md p { margin: 0 0 .5em; } .md ul, .md ol { padding-left: 1.2em; margin: 0 0 .5em; }
.table-wrap { overflow-x: auto; }
.table .nowrap { white-space: nowrap; }
.table tr.clickable { cursor: pointer; }
.table tr.clickable:hover { background: var(--green-xlight); }
.table tr.missing td { color: var(--charcoal-mid); font-style: italic; }
.table tfoot td { font-size: .85rem; color: var(--charcoal-mid); }
.qpill { display: inline-block; min-width: 52px; text-align: center; border-radius: 99px; padding: 1px 8px; font-weight: 800; font-size: .78rem; border: 1px solid var(--border); color: var(--charcoal); }
.qpill.q100 { color: #fff; }
.card-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }
.card-head h3 { font-size: 1.05rem; font-weight: 800; margin-right: auto; }

.filter-form { display: flex; gap: 16px; align-items: flex-end; flex-wrap: wrap; }
.filter-form .field { margin-bottom: 0; }
.filter-actions { display: flex; gap: 8px; }
.pager { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 16px; }

.ai-bar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 8px; }
.ai-bar input { flex: 1 1 200px; padding: 8px 12px; border: 1.5px solid var(--border); border-radius: var(--radius-sm); font: inherit; }

.cal-dictation { margin-bottom: 12px; }
.dict-dialog { width: min(920px, 94vw); border: 0; border-radius: var(--radius-xl); padding: 20px; box-shadow: 0 20px 60px rgba(0, 0, 0, .3); }
.dict-dialog::backdrop { background: rgba(62, 74, 82, .55); }
.dict-dialog textarea, .dict-dialog select, .dict-dialog input[type=text] { width: 100%; padding: 6px 10px; border: 1.5px solid var(--border); border-radius: var(--radius-sm); font: inherit; }
.dict-dialog .table select { width: auto; }
.dict-entry { display: grid; gap: 4px; margin-bottom: 6px; }
.dictation .recording { background: #FCEBEB; border-color: var(--danger); }
.alerts { list-style: none; margin: 0; padding: 0; font-size: .78rem; color: #9A6412; }
.table tr.off td { background: #FAFAFA; color: var(--charcoal-mid); }
.undo-bar { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; padding: 10px 14px; border-radius: var(--radius-sm); background: var(--green-xlight); color: var(--green-dark); }