/* Thème « salle de classe » : tableau vert, cahier à carreaux, crayons de couleur */
:root {
  --bg: #fbf6ea; --panel: #ffffff; --panel-2: #f6efdf; --line: #e7dcc4; --line-2: #cfc0a0;
  --text: #2d2a26; --muted: #766d5f; --blue: #2a7de1; --yellow: #f3a712; --red: #d9432a; --green: #2e9e5b;
  --board: #2f5d50; --board-2: #264d42; --wood: #b98a55; --chalk: #fdfaf0;
  --body: "Nunito", "Segoe UI", system-ui, sans-serif;
  --display: "Fredoka", "Nunito", "Segoe UI", system-ui, sans-serif;
  --hand: "Caveat", "Comic Sans MS", cursive;
  --c: var(--blue);
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { color-scheme: light; }
body {
  margin: 0; background: var(--bg); color: var(--text); font: 15px/1.55 var(--body); min-height: 100vh;
  background-image: linear-gradient(rgba(42, 125, 225, .09) 1px, transparent 1px), linear-gradient(90deg, rgba(42, 125, 225, .09) 1px, transparent 1px);
  background-size: 26px 26px;
}
h1, h2, h3, h4 { font-family: var(--display); margin: 0; text-wrap: balance; }
h1 { font-size: 34px; font-weight: 700; line-height: 1.1; }
h2 { font-size: 19px; font-weight: 600; margin-bottom: 14px; display: flex; align-items: center; gap: 10px; }
a { color: inherit; text-decoration: none; }
.muted { color: var(--muted); } .mono { font-variant-numeric: tabular-nums; } .push { margin-left: auto; }
.lead { max-width: 70ch; margin: 8px 0 0; }
.eyebrow { margin: 0 0 2px; color: var(--red); font: 700 22px/1.1 var(--hand); display: flex; align-items: center; gap: 8px; }
.hint { color: var(--muted); font-size: 13px; margin: 10px 0 0; display: block; }
.empty { color: var(--muted); padding: 18px 0; margin: 0; }
.late { color: var(--red); font-weight: 700; }
.dot { display: inline-block; width: 11px; height: 11px; border-radius: 50%; flex: none; }

/* structure */
.shell { display: grid; grid-template-columns: 262px minmax(0, 1fr); min-height: 100vh; }
.side { background: var(--board); background-image: radial-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px); background-size: 5px 5px; color: var(--chalk);
  border-right: 10px solid var(--wood); padding: 22px 14px; display: flex; flex-direction: column; gap: 20px; position: sticky; top: 0; height: 100vh; overflow-y: auto; }
.brand { display: flex; align-items: center; gap: 12px; font: 700 21px/1.1 var(--display); }
.brand img { width: 58px; height: 58px; object-fit: contain; background: #fff; border-radius: 16px; padding: 2px; }
.brand small { display: block; font: 600 18px/1 var(--hand); color: #ffe08a; margin-top: 3px; }
nav { display: flex; flex-direction: column; gap: 3px; flex: 1; }
nav a { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; color: rgba(253, 250, 240, .82); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
nav a i { font-style: normal; width: 20px; text-align: center; }
nav a .dot { box-shadow: 0 0 0 2px rgba(253, 250, 240, .85); margin: 0 4px; }
nav a:hover { color: #fff; background: rgba(255, 255, 255, .09); }
nav a.on { color: #fff; background: rgba(255, 255, 255, .16); box-shadow: inset 4px 0 0 var(--yellow); }
.nav-label { font: 700 20px/1 var(--hand); color: #ffe08a; margin: 18px 10px 6px; }
.nav-empty { color: rgba(253, 250, 240, .5); padding: 4px 10px; font-size: 13px; }
.who { display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: 8px; border-top: 2px dashed rgba(253, 250, 240, .3); padding-top: 14px; }
.who strong, .who small { display: block; } .who small { color: rgba(253, 250, 240, .7); font-size: 12px; }
.side .btn { background: transparent; color: var(--chalk); border-color: rgba(253, 250, 240, .5); box-shadow: none; }
.side .btn:hover { background: rgba(255, 255, 255, .12); border-color: var(--chalk); }
main { padding: 32px clamp(16px, 4vw, 48px) 60px; display: flex; flex-direction: column; gap: 28px; min-width: 0; }
.top { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
.btns { display: flex; gap: 8px; }
.panel { background: var(--panel); border: 2px solid var(--line); border-radius: 18px; padding: 20px; min-width: 0; box-shadow: 0 4px 0 var(--line); }
.split { display: grid; grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr); gap: 24px; align-items: start; }
.two { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px; align-items: start; }

/* boutons & formulaires */
.btn { font: 700 14px var(--body); padding: 9px 16px; border-radius: 12px; border: 2px solid var(--line-2); background: var(--panel); color: var(--text); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 6px; transition: .12s; box-shadow: 0 3px 0 var(--line-2); }
.btn:hover { transform: translateY(-1px); border-color: var(--blue); }
.btn:active { transform: translateY(2px); box-shadow: none; }
.btn.primary { background: var(--blue); border-color: #1f62b5; color: #fff; box-shadow: 0 3px 0 #1f62b5; }
.btn.primary:hover { background: #3a8bec; }
.btn.ghost { background: transparent; }
.btn.danger { background: #fff; border-color: #eab3a8; color: var(--red); box-shadow: 0 3px 0 #eab3a8; }
.btn.danger:hover { background: #fdece8; border-color: var(--red); }
.btn.sm { padding: 5px 10px; font-size: 13px; border-radius: 10px; } .btn.wide { width: 100%; padding: 12px; font-size: 16px; }
:focus-visible { outline: 3px solid var(--yellow); outline-offset: 2px; }
form { display: flex; flex-direction: column; gap: 14px; }
form > .btn { align-self: flex-start; } form > .btn.wide { align-self: stretch; }
td form { display: block; }
label { display: flex; flex-direction: column; gap: 5px; font-size: 13px; font-weight: 700; color: var(--muted); flex: 1; min-width: 0; }
input, select, textarea { font: 15px var(--body); color: var(--text); background: #fffdf7; border: 2px solid var(--line-2); border-radius: 10px; padding: 9px 12px; width: 100%; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(42, 125, 225, .18); }
input[type=range] { padding: 0; accent-color: var(--blue); border: 0; box-shadow: none; background: none; }
input[type=checkbox] { width: 18px; height: 18px; accent-color: var(--blue); }
input[type=file] { padding: 6px; }
textarea { resize: vertical; }
.row { display: flex; gap: 12px; flex-wrap: wrap; } .row > label { min-width: 130px; }
.check { flex-direction: row; align-items: center; gap: 10px; color: var(--text); font-size: 14px; font-weight: 600; }
.actions { display: flex; gap: 8px; justify-content: flex-end; align-items: center; margin-top: 4px; }
.code { font: 600 24px var(--display); letter-spacing: .3em; text-align: center; }
fieldset.swatches { border: 0; padding: 0; margin: 0; display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
fieldset.swatches legend { font-size: 13px; font-weight: 700; color: var(--muted); margin-bottom: 6px; padding: 0; }
.swatches label { flex: none; } .swatches input { position: absolute; opacity: 0; width: 0; }
.swatches b { width: 30px; height: 30px; border-radius: 50%; cursor: pointer; border: 3px solid #fff; box-shadow: 0 0 0 1px var(--line-2); }
.swatches input:checked + b { box-shadow: 0 0 0 3px var(--text); } .swatches input:focus-visible + b { box-shadow: 0 0 0 3px var(--yellow); }
dialog { max-height: calc(100vh - 24px); overflow-y: auto; background: var(--panel); color: var(--text); border: 3px solid var(--wood); border-radius: 20px; padding: 26px; width: min(560px, calc(100vw - 32px)); box-shadow: 0 30px 80px rgba(45, 42, 38, .35); }
dialog::backdrop { background: rgba(38, 77, 66, .6); backdrop-filter: blur(2px); }
dialog h2 { font-size: 24px; }
.flash { color: var(--text); text-align: left; padding: 11px 14px; border-radius: 12px; border: 2px solid var(--line); background: #fff; border-left: 6px solid var(--blue); font-weight: 600; }
.flash.err { border-left-color: var(--red); } .flash.warn { border-left-color: var(--yellow); } .flash.ok { border-left-color: var(--green); }

/* indicateurs */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; }
.stat { background: var(--panel); border: 2px solid var(--line); border-radius: 18px; padding: 14px 18px; box-shadow: 0 4px 0 var(--line); }
.stat span { font: 700 34px/1.15 var(--display); display: block; font-variant-numeric: tabular-nums; color: var(--blue); }
.stat span.small { font-size: 22px; line-height: 1.75; color: var(--text); }
.stat small { color: var(--muted); font-size: 13px; font-weight: 700; }
.stat.alert span { color: var(--red); } .stat.good span { color: var(--green); }
.stat.wide { grid-column: span 2; } .stat .meter { margin-top: 10px; }
.meter { height: 12px; background: var(--panel-2); border-radius: 99px; overflow: hidden; border: 2px solid var(--line); }
.meter b { display: block; height: 100%; background: var(--c); border-radius: 99px; background-image: repeating-linear-gradient(45deg, rgba(255, 255, 255, .25) 0 6px, transparent 6px 12px); }
.meter.thin { height: 6px; border: 0; background: rgba(45, 42, 38, .12); } .meter.thin b { background-image: none; }
.badge { font: 700 12px var(--body); padding: 2px 10px; border-radius: 99px; border: 2px solid var(--line-2); color: var(--muted); background: #fff; white-space: nowrap; }
.badge.active { color: #1e7a44; border-color: #a9dcbd; background: #eaf7ef; }
.badge.paused { color: #8a5d00; border-color: #f2d48a; background: #fff6dc; }
.badge.done { color: #1f62b5; border-color: #a9c9f2; background: #e9f2fd; }

/* cartes projet */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 16px; }
.card { background: var(--panel); border: 2px solid var(--line); border-top: 8px solid var(--c); border-radius: 18px; padding: 16px 18px; display: flex; flex-direction: column; gap: 12px; transition: .15s; box-shadow: 0 4px 0 var(--line); }
.card:hover { transform: translateY(-3px) rotate(-.4deg); border-color: var(--c); }
.card-top { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; }
.card h3 { font-size: 20px; font-weight: 600; overflow-wrap: anywhere; }
.card p { margin: 0; color: var(--muted); font-size: 14px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.card-foot { display: flex; gap: 12px; font-size: 13px; color: var(--muted); flex-wrap: wrap; margin-top: auto; }
.card-foot span:first-child { color: var(--text); font-weight: 800; }
.due { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.due li { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 2px dashed var(--line); }
.due li:last-child { border: 0; }
.due a { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; }
.due small { display: block; color: var(--muted); font-size: 12px; font-weight: 600; }
.due time { font-size: 13px; color: var(--muted); white-space: nowrap; } .due li.late time { color: var(--red); font-weight: 700; }

/* frise */
.tl { overflow-x: auto; }
.tl-head, .tl-row { display: grid; grid-template-columns: 170px minmax(520px, 1fr); align-items: center; gap: 12px; }
.tl.compact .tl-head, .tl.compact .tl-row { grid-template-columns: 170px minmax(1100px, 1fr); }
.tl-name { font-size: 14px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tl-name a:hover { color: var(--blue); }
.tl-track { position: relative; height: 38px; }
.tl-head .tl-track { height: 26px; border-bottom: 2px solid var(--line); }
.tl-head span { position: absolute; top: 0; font: 700 19px/1.1 var(--hand); color: var(--muted); padding-left: 6px; white-space: nowrap; overflow: hidden; }
.tl-grid { position: absolute; top: 0; bottom: 0; width: 0; border-left: 2px dashed var(--line); }
.tl-today { position: absolute; top: 0; bottom: 0; width: 3px; background: var(--red); border-radius: 2px; z-index: 2; }
.tl-bar { position: absolute; top: 7px; height: 24px; border-radius: 99px; background: color-mix(in srgb, var(--c) 18%, #fff); border: 2px solid var(--c); overflow: hidden; }
.tl-bar b { display: block; height: 100%; background: var(--c); opacity: .8; }
.tl-bar span { position: absolute; inset: 0; display: flex; align-items: center; padding-left: 8px; font-size: 12px; font-weight: 800; color: var(--text); text-shadow: 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff; }
.tl-bar.done { opacity: .6; } .tl-bar.blocked { border-color: var(--red); border-style: dashed; }

/* tableau des évolutions : colonnes en liège, cartes en post-it */
.kanban { display: grid; grid-template-columns: repeat(4, minmax(220px, 1fr)); gap: 14px; overflow-x: auto; padding-bottom: 8px; }
.col { background: #ecd9b4; background-image: radial-gradient(rgba(139, 90, 43, .16) 1px, transparent 1.5px); background-size: 7px 7px; border: 4px solid var(--wood); border-radius: 16px; padding: 12px; display: flex; flex-direction: column; gap: 10px; min-height: 190px; transition: .15s; }
.col.over { border-color: var(--blue); filter: brightness(1.04); }
.col h3 { font: 600 16px var(--display); display: flex; align-items: center; gap: 8px; background: #fff; border-radius: 99px; padding: 4px 12px; }
.col h3 em { margin-left: auto; font-style: normal; color: var(--muted); }
.pill { width: 11px; height: 11px; border-radius: 50%; background: var(--muted); }
.pill.ready { background: var(--yellow); } .pill.doing { background: var(--blue); } .pill.blocked { background: var(--red); } .pill.done { background: var(--green); }
.drop { display: flex; flex-direction: column; gap: 10px; flex: 1; }
.task { background: #fff3a8; border-radius: 3px 3px 14px 3px; padding: 11px 12px; display: flex; flex-direction: column; gap: 7px; box-shadow: 0 3px 6px rgba(45, 42, 38, .22); }
.task:nth-child(even) { transform: rotate(.6deg); } .task:nth-child(odd) { transform: rotate(-.5deg); }
[data-status=ready] .task { background: #ffe0b3; } [data-status=doing] .task { background: #cfe6ff; } [data-status=blocked] .task { background: #ffd3cb; } [data-status=done] .task { background: #cdefd9; }
.task[draggable] { cursor: grab; } .task[draggable]:hover { transform: rotate(0) scale(1.02); }
.task.dragging { opacity: .4; } .task.late { box-shadow: inset 5px 0 0 var(--red), 0 3px 6px rgba(45, 42, 38, .22); }
.task h4 { font: 700 15px var(--body); overflow-wrap: anywhere; }
.task p { margin: 0; font-size: 13px; color: #5a5347; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.task-top { display: flex; gap: 8px; align-items: center; font-size: 12px; font-weight: 700; color: #5a5347; }
.task-top { flex-wrap: wrap; } .task-top time { margin-left: auto; white-space: nowrap; } .task.late time { color: var(--red); }
.kind { background: rgba(255, 255, 255, .75); border-radius: 99px; padding: 0 8px; }
.kind.fix { color: var(--red); } .kind.idea { color: #8e5bd0; } .kind.evol { color: #1f62b5; }
.prio.high { color: var(--red); } .prio.high::before { content: "▲ "; } .prio.low { opacity: .6; }
.add { background: rgba(255, 255, 255, .55); border: 2px dashed var(--wood); color: #6b4a22; border-radius: 10px; padding: 7px; font: 700 13px var(--body); cursor: pointer; }
.add:hover { background: #fff; color: var(--blue); border-color: var(--blue); }

/* tableaux, compte */
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th { text-align: left; font-size: 13px; color: var(--muted); font-weight: 700; padding: 0 12px 10px 0; }
td { padding: 10px 12px 10px 0; border-top: 2px dashed var(--line); vertical-align: middle; white-space: nowrap; }
td small { display: block; font-size: 12px; } td select { padding: 5px 8px; font-size: 14px; width: auto; }
.row-actions { display: flex; gap: 6px; justify-content: flex-end; padding-right: 0; }
.steps { margin: 0; padding-left: 20px; color: var(--muted); display: flex; flex-direction: column; gap: 6px; }
.qr { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; margin: 14px 0; }
.qr img { width: 170px; height: 170px; background: #fff; border-radius: 12px; padding: 6px; border: 2px solid var(--line); }
.qr small { display: block; color: var(--muted); font-size: 12px; margin-bottom: 4px; }
.qr code, .codes code { background: var(--panel-2); border: 2px solid var(--line); border-radius: 8px; padding: 4px 8px; overflow-wrap: anywhere; font-size: 13px; }
.codes { border: 2px solid #f2d48a; background: #fff6dc; border-radius: 12px; padding: 14px; margin-bottom: 14px; }
.codes p { margin: 0 0 10px; } .codes div { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 8px; }
.logo-preview { display: flex; align-items: center; gap: 14px; } .logo-preview img { width: 84px; height: 84px; object-fit: contain; background: #fff; border: 2px solid var(--line); border-radius: 12px; padding: 6px; }

/* connexion : un tableau vert dans son cadre en bois */
body.auth { display: grid; place-items: center; padding: 16px; }
.auth-card { width: min(420px, 100%); background: var(--board); background-image: radial-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px); background-size: 5px 5px; color: var(--chalk); border: 12px solid var(--wood); border-radius: 22px; padding: 30px 28px; display: flex; flex-direction: column; gap: 12px; text-align: center; box-shadow: 0 8px 0 #8f6a3f, 0 30px 60px rgba(45, 42, 38, .3); }
.auth-card h1 { color: #fff; }
.auth-card .chalk, .auth-card .muted { font: 700 23px/1.15 var(--hand); color: #ffe08a; margin: 0; }
.auth-card form { text-align: left; margin-top: 6px; }
.auth-card label { color: var(--chalk); } .auth-card .hint { color: rgba(253, 250, 240, .8); }
.auth-card p { margin: 0; } .auth-logo { width: 190px; height: 190px; object-fit: contain; margin: 0 auto; background: #fff; border-radius: 32px; padding: 6px; }
.auth-card .btn.primary { background: var(--yellow); border-color: #c98600; color: #3b2a00; box-shadow: 0 3px 0 #c98600; }

@media (max-width: 860px) {
  .shell { grid-template-columns: 1fr; }
  .side { position: static; height: auto; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 12px; padding: 12px 16px; border-right: 0; border-bottom: 8px solid var(--wood); }
  nav { flex-direction: row; flex: 1 1 100%; order: 3; overflow-x: auto; }
  .nav-label, .nav-empty { display: none; }
  nav a { flex: none; overflow: visible; }
  .who { border: 0; padding: 0; margin-left: auto; }
  .split { grid-template-columns: 1fr; }
  .stat.wide { grid-column: auto; }
  .tl-head, .tl-row { grid-template-columns: 110px minmax(480px, 1fr); }
  h1 { font-size: 28px; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } .task, .card:hover { transform: none !important; } }

/* planning global */
.filters { flex-direction: row; flex-wrap: wrap; align-items: flex-end; gap: 12px; background: var(--panel); border: 2px solid var(--line); border-radius: 18px; padding: 14px 16px; box-shadow: 0 4px 0 var(--line); }
.filters label { flex: 0 1 150px; } .filters label.check { flex: none; padding-bottom: 9px; }
.filters select { padding: 7px 10px; }
.filters .count { margin-left: auto; padding-bottom: 9px; font: 700 20px var(--hand); color: var(--muted); }
.tabs { display: flex; border: 2px solid var(--line-2); border-radius: 12px; overflow: hidden; align-self: flex-end; }
.tabs a { padding: 8px 14px; font-weight: 700; color: var(--muted); background: #fff; }
.tabs a.on { background: var(--blue); color: #fff; }
.tl-group { display: flex; align-items: center; gap: 8px; font: 600 16px var(--display); margin-top: 12px; padding: 5px 10px; background: var(--panel-2); border-radius: 10px; position: sticky; left: 0; }
.tl-group a:hover { color: var(--blue); }
.tl-name small { display: block; font-size: 11px; font-weight: 600; color: var(--muted); line-height: 1.1; overflow: hidden; text-overflow: ellipsis; }
h2 small { font: 600 14px var(--body); }
.cal-nav { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.cal-nav h2 { margin: 0; text-transform: capitalize; font-size: 24px; }
.cal-wrap { overflow-x: auto; }
.cal { display: grid; grid-template-columns: repeat(7, minmax(112px, 1fr)); border-left: 2px solid var(--line); border-top: 2px solid var(--line); min-width: 784px; }
.cal-head { font: 700 20px var(--hand); color: var(--muted); padding: 4px 8px; border-right: 2px solid var(--line); border-bottom: 2px solid var(--line); background: var(--panel-2); }
.cal-day { min-height: 104px; padding: 5px 6px 8px; border-right: 2px solid var(--line); border-bottom: 2px solid var(--line); display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.cal-day.out { background: #faf6ec; } .cal-day.out .num { opacity: .4; }
.cal-day .num { font: 600 14px var(--display); align-self: flex-end; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; }
.cal-day.today { background: #fff8dc; } .cal-day.today .num { background: var(--red); color: #fff; }
.ev { display: block; flex: none; font-size: 12px; font-weight: 700; padding: 2px 7px; border-radius: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; background: color-mix(in srgb, var(--c) 22%, #fff); border-left: 5px solid var(--c); color: var(--text); }
.ev:hover { background: color-mix(in srgb, var(--c) 38%, #fff); }
.ev.start { background: #fff; border: 2px dashed var(--c); border-left: 5px solid var(--c); padding: 0 5px; }
.ev.project { background: var(--c); color: #fff; text-shadow: 0 1px 1px rgba(0, 0, 0, .35); }
.ev.done { text-decoration: line-through; opacity: .6; } .ev.late { box-shadow: 0 0 0 2px var(--red); }
.task-foot { display: flex; gap: 6px; flex-wrap: wrap; font-size: 12px; font-weight: 700; }
.ver, .who-chip { background: rgba(255, 255, 255, .75); border-radius: 99px; padding: 0 8px; color: #5a5347; }
.who-chip::before { content: "🎒 "; }
@media print {
  .side, .noprint, .flash { display: none !important; }
  .shell { display: block; } main { padding: 0; } body { background: #fff; }
  .panel, .stat, .card { box-shadow: none; break-inside: avoid; }
  .tl, .cal-wrap { overflow: visible; } * { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
}

/* rendez-vous */
.stack { display: flex; flex-direction: column; gap: 24px; min-width: 0; }
.pin { flex: none; } .due time { text-align: right; }
button.num { border: 0; background: none; cursor: pointer; color: inherit; padding: 0; }
button.num:hover { background: var(--blue); color: #fff; }
.cal-day.today button.num:hover { background: #a82f1b; }
.ev.rdv { background: #fff3a8; border-left-color: var(--yellow); box-shadow: 0 1px 3px rgba(45, 42, 38, .2); }
.ev.rdv:hover { background: #ffe97a; }
.ev.rdv.cancelled { text-decoration: line-through; opacity: .55; } .ev.rdv.held { opacity: .65; }
.rdv-list { list-style: none; margin: 0; padding: 0; }
.rdv-list > span { display: block; scroll-margin-top: 20px; }
.rdv-row { display: flex; align-items: flex-start; gap: 14px; padding: 12px 0; border-bottom: 2px dashed var(--line); }
.rdv-list .rdv-row:last-child { border: 0; }
.rdv-date { flex: none; width: 108px; background: #fff3a8; border-radius: 4px 4px 14px 4px; padding: 6px 10px; box-shadow: 0 2px 4px rgba(45, 42, 38, .18); }
.rdv-date strong, .rdv-date small { display: block; } .rdv-date strong { font-size: 14px; } .rdv-date small { font-size: 13px; font-weight: 700; color: #5a5347; }
.rdv-main { flex: 1; min-width: 0; }
.rdv-title { font: 700 16px var(--body); color: var(--text); background: none; border: 0; padding: 0; text-align: left; overflow-wrap: anywhere; }
button.rdv-title { cursor: pointer; } button.rdv-title:hover { color: var(--blue); text-decoration: underline; }
.rdv-main small { display: flex; flex-wrap: wrap; gap: 4px 14px; color: var(--muted); font-size: 13px; font-weight: 600; margin-top: 2px; overflow-wrap: anywhere; }
.rdv-main small a { color: var(--blue); text-decoration: underline; }
.rdv-main p { margin: 6px 0 0; font-size: 14px; white-space: pre-line; overflow-wrap: anywhere; }
.rdv-row.cancelled .rdv-title { text-decoration: line-through; } .rdv-row.cancelled, .rdv-row.past { opacity: .7; }
.badge.rdv-confirmed { color: #1e7a44; border-color: #a9dcbd; background: #eaf7ef; }
.badge.rdv-planned { color: #8a5d00; border-color: #f2d48a; background: #fff6dc; }
.badge.rdv-held { color: #1f62b5; border-color: #a9c9f2; background: #e9f2fd; }
.badge.rdv-cancelled { color: var(--red); border-color: #eab3a8; background: #fdece8; }
details summary { cursor: pointer; font-weight: 700; color: var(--muted); padding: 10px 0 4px; }
@media (max-width: 560px) { .rdv-row { flex-wrap: wrap; } .rdv-main { flex-basis: 100%; order: 3; } }

/* administration par onglets */
.admin-tabs { flex-wrap: wrap; align-self: flex-start; background: #fff; }
.admin-tabs a { border-right: 2px solid var(--line); } .admin-tabs a:last-child { border: 0; }
.checks { display: flex; flex-direction: column; gap: 10px; }
label > .hint { margin: 0; font-weight: 400; }
form.stack { gap: 24px; }
table.log td { white-space: normal; padding-top: 7px; padding-bottom: 7px; font-size: 13px; }
table.log td.mono { white-space: nowrap; } table.log td.wrap { overflow-wrap: anywhere; color: var(--muted); }
table.log tr.bad strong { color: var(--red); }
.btns { flex-wrap: wrap; } .btns form { display: block; }
code { background: var(--panel-2); border-radius: 6px; padding: 1px 6px; font-size: 13px; }

/* timeline verticale */
.tline-top { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
.tline-month { font: 700 26px var(--hand); color: var(--red); margin: 18px 0 6px; position: sticky; top: 0; background: var(--panel); z-index: 3; padding: 4px 0; }
.tline { list-style: none; margin: 0; padding: 0; position: relative; }
.tline::before { content: ""; position: absolute; left: 77px; top: 0; bottom: 0; width: 4px; border-radius: 2px; background: var(--line); }
.tline-ev { display: grid; grid-template-columns: 56px 30px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 6px 0; position: relative; }
.tline-date { text-align: right; line-height: 1.05; }
.tline-date strong { display: block; font: 600 22px var(--display); } .tline-date small { color: var(--muted); font-size: 12px; font-weight: 700; }
.tline-dot { width: 22px; height: 22px; margin: 0 auto; border-radius: 50%; background: var(--c); border: 4px solid #fff; box-shadow: 0 0 0 2px var(--c); display: grid; place-items: center; font-style: normal; font-size: 12px; line-height: 1; z-index: 1; color: var(--c); }
.tline-ev.start .tline-dot { background: #fff; font-size: 9px; } .tline-ev.rdv .tline-dot, .tline-ev.project .tline-dot { background: #fff; box-shadow: none; border: 0; font-size: 18px; width: 26px; height: 26px; }
.tline-card { display: block; background: color-mix(in srgb, var(--c) 9%, #fff); border: 2px solid color-mix(in srgb, var(--c) 35%, #fff); border-left: 6px solid var(--c); border-radius: 12px; padding: 8px 12px; min-width: 0; transition: .12s; }
.tline-card:hover { transform: translateX(3px); border-color: var(--c); }
.tline-card strong { display: block; font-size: 15px; overflow-wrap: anywhere; } .tline-card small { display: block; color: var(--muted); font-size: 13px; font-weight: 600; overflow-wrap: anywhere; }
.tline-what { font-size: 12px; font-weight: 700; color: var(--muted); } .tline-what b { color: var(--text); } .tline-what b.late { color: var(--red); }
.tline-card .meter { margin-top: 6px; --c: inherit; } .tline-card .meter b { background: var(--c); }
.tline-ev.rdv .tline-card { background: #fff3a8; border-color: #f2d48a; border-left-color: var(--yellow); }
.tline-ev.start .tline-card { background: #fff; border-style: dashed; border-left-style: solid; }
.tline-ev.past, .tline-ev.done { opacity: .55; } .tline-ev.done .tline-card strong { text-decoration: line-through; }
.tline-ev.late .tline-card { box-shadow: 0 0 0 2px var(--red); } .tline-ev.today .tline-date strong { color: var(--red); }
.tl-now { display: flex; align-items: center; gap: 10px; margin: 10px 0; padding-left: 66px; scroll-margin-top: 60px; position: relative; z-index: 2; }
.tl-now::after { content: ""; flex: 1; height: 3px; background: var(--red); border-radius: 2px; }
.tl-now span { background: var(--red); color: #fff; font-weight: 800; font-size: 13px; padding: 3px 12px; border-radius: 99px; white-space: nowrap; }
.btn[disabled] { opacity: .45; cursor: not-allowed; }
@media (max-width: 560px) {
  .tline::before { left: 59px; } .tl-now { padding-left: 44px; }
  .tline-ev { grid-template-columns: 40px 28px minmax(0, 1fr); } .tline-ev > .badge { grid-column: 3; justify-self: start; }
}

/* états des tâches en pastille */
.badge.todo { color: #5a5347; } .badge.ready { color: #8a5d00; border-color: #f2d48a; background: #fff6dc; }
.badge.doing { color: #1f62b5; border-color: #a9c9f2; background: #e9f2fd; }
.badge.blocked { color: var(--red); border-color: #eab3a8; background: #fdece8; }
/* choix du projet */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 99px; background: #fff; border: 2px solid var(--line-2); font-weight: 700; color: var(--muted); box-shadow: 0 2px 0 var(--line-2); }
.chip:hover { color: var(--text); border-color: var(--c, var(--blue)); }
.chip.on { background: var(--c, var(--blue)); border-color: var(--c, var(--blue)); color: #fff; box-shadow: 0 2px 0 rgba(45, 42, 38, .25); }
.chip.on .dot { background: #fff !important; }
/* timeline horizontale */
.hl-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 14px; flex-wrap: wrap; margin-bottom: 8px; }
.hl-title h2 { margin: 0 0 6px; font-size: 22px; } .hl-title h2 a:hover { color: var(--blue); } .hl-title p { margin: 0; }
.hl-progress { display: flex; align-items: center; gap: 12px; font-size: 13px; font-weight: 700; color: var(--muted); flex-wrap: wrap; }
.hl-progress .meter { width: min(260px, 60vw); }
.hl-wrap { overflow-x: auto; padding: 6px 0 14px; cursor: grab; scrollbar-width: thin; }
.hl-wrap.dragging { cursor: grabbing; user-select: none; } .hl-wrap.dragging .hl-card { pointer-events: none; }
.hline { list-style: none; margin: 0; padding: 0 24px; display: flex; align-items: stretch; min-width: max-content; position: relative; }
.hline::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 6px; margin-top: -3px; border-radius: 3px; background: var(--line-2); }
.hline::after { content: "▶"; position: absolute; right: -2px; top: 50%; transform: translateY(-50%); color: var(--line-2); font-size: 18px; }
.hl-item { flex: none; width: 196px; padding: 0 7px; display: grid; grid-template-rows: 1fr 40px 1fr; position: relative; }
.hl-date { grid-row: 2; align-self: center; justify-self: center; background: #fff; border: 3px solid var(--c); border-radius: 99px; padding: 2px 10px; font-size: 12px; color: var(--muted); white-space: nowrap; z-index: 1; }
.hl-date strong { color: var(--text); font-size: 13px; }
.hl-card { display: flex; flex-direction: column; gap: 4px; text-align: left; font: inherit; color: inherit; cursor: pointer; width: 100%; background: color-mix(in srgb, var(--c) 9%, #fff); border: 2px solid color-mix(in srgb, var(--c) 40%, #fff); border-top: 6px solid var(--c); border-radius: 12px; padding: 8px 10px 10px; position: relative; transition: .12s; }
.hl-item.up .hl-card { grid-row: 1; align-self: end; margin-bottom: 16px; }
.hl-item.down .hl-card { grid-row: 3; align-self: start; margin-top: 16px; }
.hl-item .hl-card::after { content: ""; position: absolute; left: 50%; width: 3px; margin-left: -1.5px; height: 18px; background: var(--c); }
.hl-item.up .hl-card::after { top: 100%; } .hl-item.down .hl-card::after { bottom: 100%; margin-bottom: 4px; }
.hl-card:hover { border-color: var(--c); box-shadow: 0 4px 12px rgba(45, 42, 38, .18); }
.hl-card strong { font-size: 14px; line-height: 1.25; overflow-wrap: anywhere; }
.hl-card small { font-size: 12px; font-weight: 600; color: var(--muted); overflow-wrap: anywhere; }
.hl-proj { display: flex; align-items: center; gap: 6px; } .hl-proj .dot { width: 8px; height: 8px; }
.hl-what { font-size: 11px; font-weight: 800; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.hl-card .meter { display: block; } .hl-card .meter b { background: var(--c); }
.hl-foot { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12px; font-weight: 700; color: var(--muted); margin-top: 2px; }
.hl-foot b { color: var(--text); } .hl-foot b.late { color: var(--red); } .hl-foot .badge { font-size: 11px; padding: 1px 8px; }
.hl-item.t-rdv .hl-card { background: #fff3a8; border-color: #f2d48a; border-top-color: var(--yellow); }
.hl-item.t-project .hl-card { background: var(--c); border-color: var(--c); color: #fff; } .hl-item.t-project .hl-what { color: rgba(255, 255, 255, .9); }
.hl-item.is-done .hl-card, .hl-item.is-past .hl-card { opacity: .6; } .hl-item.is-done .hl-card strong { text-decoration: line-through; }
.hl-item.is-late .hl-card { box-shadow: 0 0 0 3px var(--red); } .hl-item.is-late .hl-date { border-color: var(--red); }
.hl-month { flex: none; display: grid; grid-template-rows: 1fr 40px 1fr; padding: 0 6px 0 18px; border-left: 3px dashed var(--line-2); margin-left: 10px; }
.hl-month span { grid-row: 2; align-self: center; font: 700 22px/1 var(--hand); color: var(--red); background: var(--panel); padding: 4px 8px; white-space: nowrap; z-index: 1; }
.hl-today { flex: none; display: grid; grid-template-rows: 1fr 40px 1fr; padding: 0 10px; position: relative; }
.hl-today::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 4px; margin-left: -2px; background: var(--red); border-radius: 2px; }
.hl-today span { grid-row: 2; align-self: center; background: var(--red); color: #fff; font-weight: 800; font-size: 13px; padding: 4px 12px; border-radius: 99px; white-space: nowrap; z-index: 1; text-align: center; line-height: 1.15; }
.hl-today small { display: block; font-size: 11px; font-weight: 600; opacity: .9; }
.hl-undated { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.hl-undated .hl-card { border-top-width: 6px; }
@media print { .hl-wrap { overflow: visible; } .hline { flex-wrap: wrap; min-width: 0; row-gap: 20px; } .hline::before, .hline::after { display: none; } }
.hl-item.t-project .hl-card small, .hl-item.t-project .hl-foot { color: #fff; }

/* dépendances entre tâches */
.lock, .unlock { font-size: 12px !important; font-weight: 700 !important; display: block !important; -webkit-line-clamp: unset !important; overflow-wrap: anywhere; }
.lock { color: #9a3412 !important; } .lock.ok { color: #1e7a44 !important; } .lock b { color: var(--red); } .unlock { color: #1f62b5 !important; }
.task.waiting { background-image: repeating-linear-gradient(135deg, rgba(45, 42, 38, .07) 0 8px, transparent 8px 16px); }
.hl-item.is-waiting .hl-card { border-style: dashed; border-top-style: solid; background-image: repeating-linear-gradient(135deg, rgba(45, 42, 38, .05) 0 8px, transparent 8px 16px); }
.hl-card.hl-pre { box-shadow: 0 0 0 4px var(--yellow) !important; opacity: 1 !important; } .hl-card.hl-post { box-shadow: 0 0 0 4px var(--blue) !important; opacity: 1 !important; }
.tl-bar.locked { border-style: dashed; background-image: repeating-linear-gradient(135deg, rgba(45, 42, 38, .1) 0 6px, transparent 6px 12px); }
.tl-name small.lock { font-size: 11px !important; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
fieldset.deps { border: 0; padding: 0; margin: 0; min-width: 0; }
fieldset.deps legend { font-size: 13px; font-weight: 700; color: var(--muted); padding: 0; margin-bottom: 6px; } fieldset.deps legend small { font-weight: 400; }
.dep-box { max-height: 170px; overflow-y: auto; border: 2px solid var(--line-2); border-radius: 10px; padding: 8px 10px; background: #fffdf7; display: flex; flex-direction: column; gap: 8px; }
.dep-group { display: flex; flex-direction: column; gap: 4px; } .dep-group > strong { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.dep-box .check { font-size: 14px; gap: 8px; flex: none; } .dep-box .check span { flex: 1; min-width: 0; overflow-wrap: anywhere; } .dep-box .badge { font-size: 10px; padding: 0 7px; }

/* historique des changements */
table.hist .ver { background: var(--panel-2); border: 2px solid var(--line); border-radius: 99px; padding: 0 9px; font-weight: 800; font-size: 12px; color: var(--text); white-space: nowrap; }
table.hist td.wrap { color: var(--text); } table.hist td.wrap em { display: block; color: var(--muted); font-style: normal; }
table.hist td { vertical-align: top; }
#item-history summary { padding: 0 0 6px; } #item-history .table-wrap { max-height: 200px; overflow-y: auto; border: 2px solid var(--line); border-radius: 10px; padding: 6px 10px; }
#item-history th { padding-top: 4px; position: sticky; top: 0; background: var(--panel); }
#item-history td:nth-child(2) { white-space: nowrap; }