/* 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; }

/* bilan financier */
.fin-stats .stat span.num { font-size: clamp(20px, 2.2vw, 28px); color: var(--text); white-space: nowrap; }
.key { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 7px; vertical-align: -1px; }
.btn.primary.alt { background: #e4572e; border-color: #b8401d; box-shadow: 0 3px 0 #b8401d; } .btn.primary.alt:hover { background: #ea6a44; }
.legend { display: flex; gap: 18px; font-size: 13px; font-weight: 700; color: var(--muted); margin-bottom: 4px; }
.chart-wrap { overflow-x: auto; margin-bottom: 14px; }
svg.chart { display: block; width: 100%; min-width: 560px; height: auto; }
svg.chart .grid { stroke: var(--line); stroke-width: 1; } svg.chart .grid.base { stroke: var(--line-2); stroke-width: 2; }
svg.chart .tick { font: 600 11px var(--body); fill: var(--muted); }
svg.chart .hit { fill: transparent; cursor: default; outline: none; } svg.chart .col-g:hover .hit, svg.chart .hit:focus { fill: rgba(45, 42, 38, .06); }
#tip { position: fixed; z-index: 50; background: var(--text); color: #fff; font-size: 13px; font-weight: 600; padding: 7px 11px; border-radius: 9px; pointer-events: none; max-width: min(320px, calc(100vw - 16px)); box-shadow: 0 6px 18px rgba(0, 0, 0, .25); }
table.fin td, table.fin th { white-space: nowrap; } table.fin .r { text-align: right; font-variant-numeric: tabular-nums; }
table.fin th.r { padding-right: 12px; } table.fin td small { color: var(--muted); font-weight: 600; white-space: normal; }
table.fin td.neg { color: var(--red); font-weight: 700; } table.fin tr.zero td { color: var(--muted); }
table.fin tfoot td { border-top: 3px solid var(--line-2); font-weight: 800; padding-top: 10px; }
table.fin.entries td:nth-child(2) { white-space: normal; min-width: 200px; }
.catrow { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; padding: 8px 0; border-bottom: 2px dashed var(--line); }
.catrow:last-child { border: 0; } .catrow:hover .catname { color: var(--blue); }
.catname { font-weight: 700; overflow-wrap: anywhere; } .catval { font-variant-numeric: tabular-nums; font-weight: 700; white-space: nowrap; } .catval small { color: var(--muted); margin-left: 6px; }
.catrow .meter { grid-column: 1 / -1; display: block; } .catrow .meter b { background: var(--c); }
.seg { display: flex; border: 2px solid var(--line-2); border-radius: 12px; overflow: hidden; align-self: flex-start; }
.seg label { flex: none; display: block; } .seg input { position: absolute; opacity: 0; width: 0; }
.seg span { display: block; padding: 8px 18px; font-weight: 800; font-size: 14px; color: var(--muted); cursor: pointer; background: #fff; }
.seg input:checked + span { background: var(--text); color: #fff; } .seg input:focus-visible + span { outline: 3px solid var(--yellow); outline-offset: -3px; }

/* portail */
.tiles { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
.tile { border-top-width: 2px; gap: 8px; } .tile:hover { border-color: var(--blue); }
.tile-icon { font-size: 40px; line-height: 1; } .tile h3 { font-size: 24px; } .tile p { -webkit-line-clamp: 3; }
.tile-go { margin-top: auto; font-weight: 800; color: var(--blue); }
.badge.lv-read { color: #1f62b5; border-color: #a9c9f2; background: #e9f2fd; }
.badge.lv-write { color: #1e7a44; border-color: #a9dcbd; background: #eaf7ef; }
.badge.lv-admin { color: #8a5d00; border-color: #f2d48a; background: #fff6dc; }
table.access select { padding: 5px 8px; font-size: 14px; width: auto; } table.access td small { display: block; }
table.access input[type=checkbox] { width: 20px; height: 20px; }
fieldset.levels { border: 2px solid var(--line); border-radius: 12px; padding: 10px 12px; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; }
fieldset.levels legend { font-size: 13px; font-weight: 700; color: var(--muted); padding: 0 6px; }
nav a.mod.on { box-shadow: inset 4px 0 0 var(--yellow); }
.nav-sub { display: flex; flex-direction: column; gap: 2px; margin: 2px 0 6px 14px; padding-left: 8px; border-left: 2px dashed rgba(253, 250, 240, .3); }
@media (max-width: 860px) { .nav-sub { flex-direction: row; margin: 0; padding: 0; border: 0; } }

/* stock */
a.stat { display: block; } a.stat:hover { border-color: var(--blue); } .stat.warn span { color: #b36b00; }
.badge.st-ok { color: #1e7a44; border-color: #a9dcbd; background: #eaf7ef; }
.badge.st-low { color: #8a5d00; border-color: #f2d48a; background: #fff6dc; }
.badge.st-out { color: var(--red); border-color: #eab3a8; background: #fdece8; }
table.stock td small { display: block; } .st-name { font-weight: 800; } .st-name:hover { color: var(--blue); text-decoration: underline; }
.st-qty { font: 700 18px var(--display); } table.stock input[type=checkbox] { width: 20px; height: 20px; }
.st-count-input { width: 110px; padding: 6px 10px; }
.st-hero { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 24px; align-items: start; }
.st-count p { margin: 0 0 8px; } .st-loc { font-weight: 800; font-size: 17px; }
.st-big strong { font: 700 clamp(64px, 14vw, 96px)/1 var(--display); font-variant-numeric: tabular-nums; } .st-big span { font: 600 22px var(--display); color: var(--muted); }
.st-count.st-low { border-color: #f2d48a; box-shadow: 0 4px 0 #f2d48a; } .st-count.st-out { border-color: #eab3a8; box-shadow: 0 4px 0 #eab3a8; }
.st-count.st-out .st-big strong { color: var(--red); }
.st-notes { white-space: pre-line; color: var(--muted); }
.seg.big { align-self: stretch; } .seg.big label { flex: 1; } .seg.big span { text-align: center; padding: 14px 6px; font-size: 16px; }
.st-qtyrow { display: grid; grid-template-columns: 64px 1fr 64px; gap: 10px; }
.st-qtyrow input { font: 700 30px var(--display); text-align: center; padding: 8px; } .st-qtyrow .btn { font-size: 28px; padding: 0; }
.st-qrpanel { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; } .st-qrpanel img { width: 170px; height: 170px; background: #fff; border: 2px solid var(--line); border-radius: 12px; padding: 6px; }
.st-qrpanel p { margin: 0 0 8px; } .st-link { font-size: 13px; color: var(--muted); overflow-wrap: anywhere; }
.scan-panel { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.scan-view { position: relative; width: min(100%, 520px); aspect-ratio: 4 / 3; background: #111; border-radius: 16px; overflow: hidden; }
.scan-view video { width: 100%; height: 100%; object-fit: cover; }
.scan-frame { position: absolute; inset: 18% 24%; border: 4px solid #fff; border-radius: 18px; box-shadow: 0 0 0 100vmax rgba(0, 0, 0, .35); }
/* étiquettes : dimensions réelles en millimètres */
.labels { display: grid; gap: 0; justify-content: start; }
.labels.size-s { grid-template-columns: repeat(auto-fill, 38mm); grid-auto-rows: 21mm; }
.labels.size-m { grid-template-columns: repeat(auto-fill, 63.5mm); grid-auto-rows: 38.1mm; }
.labels.size-l { grid-template-columns: repeat(auto-fill, 99mm); grid-auto-rows: 67mm; }
.label { background: #fff; color: #000; border: 1px dashed #999; padding: 2mm; display: flex; gap: 2mm; align-items: center; overflow: hidden; break-inside: avoid; }
.label img { height: 100%; aspect-ratio: 1; flex: none; }
.label-text { min-width: 0; display: flex; flex-direction: column; gap: .6mm; font: 600 8pt/1.15 var(--body); }
.label-text strong { font-size: 10pt; font-weight: 800; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.label-text span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .label-text code { background: none; padding: 0; font: 700 9pt ui-monospace, Menlo, Consolas, monospace; letter-spacing: .08em; }
.size-s .label { padding: 1mm; gap: 1mm; } .size-s .label-text { font-size: 5.5pt; } .size-s .label-text strong { font-size: 6.5pt; -webkit-line-clamp: 2; } .size-s .label-text span { display: none; } .size-s .label-text code { font-size: 6.5pt; }
.size-l .label { padding: 4mm; gap: 4mm; } .size-l .label-text { font-size: 11pt; gap: 1.5mm; } .size-l .label-text strong { font-size: 16pt; } .size-l .label-text code { font-size: 13pt; }
@media print { @page { margin: 8mm; } main { gap: 0 !important; } .labels { justify-content: start; } }

/* téléphone : le menu passe à la ligne au lieu de défiler, pour garder « Scanner » sous le pouce */
@media (max-width: 860px) {
  nav { flex-wrap: wrap; overflow: visible; gap: 4px; }
  nav a { padding: 6px 9px; font-size: 14px; }
  .nav-label { display: none; }
}
.seg.big span { white-space: nowrap; padding: 14px 2px; font-size: 15px; }

/* ---------- Onglets de page, prévision de dépenses ---------- */
.flash.error { border-left-color: var(--red); }
.page-tabs { align-self: flex-start; background: #fff; flex-wrap: wrap; } .page-tabs a + a { border-left: 2px solid var(--line); }
.empty-state { text-align: center; padding: 34px 24px; } .empty-state h2 { justify-content: center; } .empty-state p { max-width: 62ch; margin: 0 auto 18px; color: var(--muted); }
.bud-bar { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; justify-content: space-between; }
form.inline { display: inline-flex; flex-direction: row; gap: 6px; align-items: center; }
.inline-label { flex-direction: row; align-items: center; gap: 8px; white-space: nowrap; } .inline-label select { width: auto; padding: 7px 10px; }
h2 .btns { display: flex; gap: 6px; flex-wrap: wrap; } h2 em.count { font: 700 20px var(--hand); color: var(--muted); font-style: normal; }
table.bud { width: 100%; } table.bud .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
table.bud td em { display: block; font-style: normal; color: var(--muted); font-size: 12px; }
table.bud tr.grp td { background: #f6f0df; font: 600 14px var(--display); color: var(--text); border-top: 2px solid var(--line-2); }
table.bud tfoot td { border-top: 3px solid var(--line-2); font-weight: 800; padding-top: 10px; font-size: 14px; }
table.bud tr.cur td { background: #eef5fe; } table.bud td a:hover strong { color: var(--blue); text-decoration: underline; }
.badge.per-once { color: #5a5347; } .badge.per-monthly { color: #1f62b5; border-color: #a9c9f2; background: #e9f2fd; } .badge.per-yearly { color: #6b3fa8; border-color: #cdb8ec; background: #f3edfb; }
.barcol { width: 22%; min-width: 90px; } .bud-meter { height: 12px; border-radius: 99px; background: #efe8d6; overflow: hidden; } .bud-meter b { display: block; height: 100%; background: var(--blue); border-radius: 99px; }

/* ---------- Photos du stock ---------- */
.photo-pick { display: flex; flex-direction: column; gap: 8px; } .photo-pick .lbl { font-size: 13px; font-weight: 700; color: var(--muted); }
.photo-pick .btns { display: flex; gap: 8px; flex-wrap: wrap; } .photo-pick label.btn { flex: none; flex-direction: row; font-size: 14px; color: var(--text); cursor: pointer; }
.photo-prev { display: flex; gap: 8px; flex-wrap: wrap; } .photo-prev:empty { display: none; }
.photo-prev figure { margin: 0; position: relative; width: 84px; height: 84px; border-radius: 12px; overflow: hidden; border: 2px solid var(--line-2); background: #fff; }
.photo-prev img { width: 100%; height: 100%; object-fit: cover; display: block; }
.photo-prev button { position: absolute; top: 2px; right: 2px; width: 26px; height: 26px; border-radius: 50%; border: 0; background: rgba(45, 42, 38, .8); color: #fff; font-size: 17px; line-height: 1; cursor: pointer; }
.photo-add { margin-top: 16px; padding-top: 16px; border-top: 2px dashed var(--line); }
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; }
.gallery figure { margin: 0; background: #fff; border: 2px solid var(--line-2); border-radius: 14px; overflow: hidden; display: flex; flex-direction: column; }
.gallery figure.main { border-color: var(--green); } .gallery a { display: block; aspect-ratio: 1; background: #f6f0df; }
.gallery img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gallery figcaption { display: flex; gap: 6px; align-items: center; justify-content: space-between; padding: 6px 8px; min-height: 42px; flex-wrap: wrap; }
dialog.zoom { width: auto; max-width: calc(100vw - 24px); padding: 12px; text-align: center; } dialog.zoom img { max-width: 100%; max-height: calc(100vh - 120px); border-radius: 10px; display: block; margin: 0 auto 10px; }
.st-cell { display: flex; gap: 12px; align-items: center; } .st-cell > span:last-child { min-width: 0; }
.st-thumb { width: 46px; height: 46px; border-radius: 10px; object-fit: cover; flex: none; border: 2px solid var(--line-2); background: #fff; }
.st-thumb.none { display: grid; place-items: center; font-size: 20px; background: #f6f0df; border-style: dashed; }
@media print { .st-thumb { display: none; } }

/* ---------- Établissements, fournisseurs, documents ---------- */
fieldset { border: 2px solid var(--line); border-radius: 12px; padding: 12px 14px 14px; margin: 0; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
fieldset > legend { font: 600 14px var(--display); color: var(--text); padding: 0 6px; }
fieldset.swatches, fieldset.deps { display: flex; } fieldset.levels { display: grid; }
dialog.wide { width: min(720px, calc(100vw - 32px)); }
.card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 24px; align-items: start; }
dl.facts { display: grid; grid-template-columns: max-content 1fr; gap: 8px 16px; margin: 0; } dl.facts dt { color: var(--muted); font-weight: 700; font-size: 13px; padding-top: 2px; }
dl.facts dd { margin: 0; overflow-wrap: anywhere; } dl.facts a { color: var(--blue); text-decoration: underline; }
.pre { white-space: pre-line; } ul.plain { margin: 0; padding-left: 20px; display: grid; gap: 6px; } ul.plain a:hover { color: var(--blue); text-decoration: underline; }
.doc-add { flex-direction: row; flex-wrap: wrap; align-items: flex-end; gap: 12px; margin-top: 16px; padding-top: 16px; border-top: 2px dashed var(--line); }
.doc-add > .btn { align-self: flex-end; } .doc-add label { flex: 1 1 150px; }

/* ---------- Factures ---------- */
.badge.inv-draft { color: #5a5347; } .badge.inv-issued { color: #1f62b5; border-color: #a9c9f2; background: #e9f2fd; }
.badge.inv-paid { color: #1e7a44; border-color: #a9dcbd; background: #eaf7ef; } .badge.inv-cancelled { color: var(--muted); text-decoration: line-through; }
.badge.inv-late { color: var(--red); border-color: #eab3a8; background: #fdece8; }
table.inv-edit { width: 100%; min-width: 640px; } table.inv-edit td { padding: 4px 6px 4px 0; vertical-align: middle; }
table.inv-edit td:nth-child(2) { width: 90px; } table.inv-edit td:nth-child(3) { width: 150px; } table.inv-edit td:nth-child(4) { width: 110px; } table.inv-edit td:nth-child(5) { width: 120px; } table.inv-edit td:last-child { width: 44px; }
.sheet { position: relative; background: #fff; border: 2px solid var(--line-2); border-radius: 6px; padding: 44px 48px; max-width: 860px; box-shadow: 0 4px 0 var(--line); font-size: 14px; color: #222; overflow: hidden; }
.sheet-mark { position: absolute; top: 38%; left: 0; right: 0; text-align: center; margin: 0; font: 700 clamp(48px, 12vw, 110px) var(--display); color: rgba(228, 87, 46, .13); transform: rotate(-18deg); pointer-events: none; letter-spacing: .06em; }
.sheet-head { display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.sheet-seller { display: flex; gap: 14px; align-items: flex-start; } .sheet-seller img { width: 72px; height: 72px; object-fit: contain; }
.sheet-seller div, .sheet-client { display: flex; flex-direction: column; gap: 1px; } .sheet-seller strong, .sheet-client strong { font-size: 16px; }
.sheet-seller span, .sheet-client span { color: #444; font-size: 13px; }
.sheet-title { text-align: right; } .sheet-title h2 { font-size: 30px; justify-content: flex-end; margin-bottom: 8px; color: var(--blue); }
.sheet-title dl { display: grid; grid-template-columns: auto auto; gap: 2px 12px; margin: 0; justify-content: end; } .sheet-title dt { color: #666; } .sheet-title dd { margin: 0; font-weight: 700; }
.sheet-client { margin: 28px 0 22px auto; width: min(340px, 100%); border: 1.5px solid #ccc; border-radius: 8px; padding: 12px 16px; } .sheet-client small { color: #666; font-weight: 700; text-transform: uppercase; font-size: 11px; letter-spacing: .05em; }
.sheet-subject { margin: 0 0 4px; } .sheet-lines { width: 100%; border-collapse: collapse; margin-top: 16px; }
.sheet-lines th { text-align: left; background: #f1f4f8; border-bottom: 2px solid #222; padding: 8px 10px; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; }
.sheet-lines td { padding: 9px 10px; border-bottom: 1px solid #ddd; vertical-align: top; white-space: pre-line; } .sheet-lines .r { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.sheet-totals { display: flex; justify-content: flex-end; margin-top: 14px; } .sheet-totals dl { display: grid; grid-template-columns: auto auto; gap: 5px 28px; margin: 0; min-width: 260px; }
.sheet-totals dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; } .sheet-totals .grand { font-weight: 800; font-size: 17px; border-top: 2px solid #222; padding-top: 7px; margin-top: 3px; }
.sheet-note { margin: 16px 0 0; } .sheet-foot { margin-top: 34px; padding-top: 12px; border-top: 1px solid #ccc; font-size: 12px; color: #444; } .sheet-foot p { margin: 0 0 6px; }
@media (max-width: 640px) { .sheet { padding: 22px 18px; } .sheet-title { text-align: left; } .sheet-title h2 { justify-content: flex-start; } .sheet-title dl { justify-content: start; } }
@media print {
  @page { size: A4; margin: 14mm; }
  .sheet { border: 0; box-shadow: none; padding: 0; max-width: none; border-radius: 0; overflow: visible; }
  .sheet-lines tr { break-inside: avoid; } .sheet-foot { break-inside: avoid; }
  .bud-meter b { background: #555; }
}
.fin-stats { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
table.sheet-lines tbody td, table.sheet-lines tbody tr:last-child td { border-bottom: 1px solid #ddd; }
.sheet-totals dl { column-gap: 0; } .sheet-totals dd { padding-left: 28px; }
table.sheet-lines td { border-top: 0; } table.sheet-lines th { padding: 8px 10px; color: #333; } table.inv-edit td { border-top: 0; }
h2 { flex-wrap: wrap; }
@media (max-width: 640px) { .sheet { overflow-x: auto; } .sheet-mark { position: static; transform: none; font-size: 34px; margin-bottom: 10px; } }

/* ---------- Pièces jointes des tâches ---------- */
.file-list { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 4px; }
.file-list li { display: flex; gap: 10px; align-items: baseline; justify-content: space-between; padding: 6px 10px; background: #fffdf7; border: 2px solid var(--line); border-radius: 10px; }
.file-list a { font-weight: 700; overflow-wrap: anywhere; } .file-list a:hover { color: var(--blue); text-decoration: underline; } .file-list small { color: var(--muted); white-space: nowrap; }

/* ---------- Commandes de la boutique ---------- */
.nav-count { background: var(--yellow); color: #3a2f00; border-radius: 99px; padding: 0 8px; font-size: 12px; margin-left: 4px; }
.badge.ord-new { color: #8a5d00; border-color: #f2d48a; background: #fff6dc; } .badge.ord-preparing { color: #1f62b5; border-color: #a9c9f2; background: #e9f2fd; }
.badge.ord-shipped { color: #1e7a44; border-color: #a9dcbd; background: #eaf7ef; } .badge.ord-cancelled { color: var(--muted); text-decoration: line-through; }

/* ---------- Module Réseau ---------- */
.net-bar { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; justify-content: space-between; }
.net-meta { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; color: var(--muted); font-weight: 700; font-size: 14px; }
button.chip { cursor: pointer; font: inherit; font-weight: 700; }
.net { display: grid; grid-template-columns: minmax(0, 1fr) 390px; gap: 20px; align-items: start; }
.net-wrap { background: #fffdf7; border: 2px solid var(--line); border-radius: 18px; box-shadow: 0 4px 0 var(--line); overflow: hidden; min-width: 0; }
.net-foot { display: flex; gap: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap; padding: 8px 12px; border-top: 2px dashed var(--line); }
.net-canvas { position: relative; max-height: 880px; overflow: auto;
  background-image: radial-gradient(rgba(42, 125, 225, .16) 1.2px, transparent 1.2px); background-size: 22px 22px; }
.net-inner { position: relative; transform-origin: 0 0; } #net-wires, #net-labels { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; } #net-labels { z-index: 2; }
#net-wires path.hit { pointer-events: stroke; cursor: pointer; }
.net-tier { position: absolute; top: 8px; font: 700 20px var(--hand); color: var(--red); }
.net-empty { position: absolute; left: 24px; top: 60px; color: var(--muted); max-width: 50ch; }
.net-node { position: absolute; background: #fff; border: 2px solid #2d2a26; border-radius: 14px; box-shadow: 0 4px 0 rgba(45, 42, 38, .18); font-size: 12.5px; z-index: 1; }
.net-node.sel { outline: 4px solid var(--yellow); outline-offset: 2px; } .net-node.dim { opacity: .36; } .net-node.dragging { z-index: 5; opacity: .9; cursor: grabbing; }
.net-head { display: block; padding: 8px 10px 7px; cursor: pointer; touch-action: none; } [data-edit="1"] .net-head { cursor: grab; }
.net-head h4 { font: 600 14px var(--display); margin: 0 0 2px; display: flex; gap: 6px; align-items: center; overflow-wrap: anywhere; }
.net-head .ip { color: var(--muted); font-weight: 700; font-variant-numeric: tabular-nums; display: block; overflow-wrap: anywhere; } .net-head .ip b { color: var(--text); }
.net-node.k-lb, .net-node.k-proxy { border-color: #8e5bd0; } .net-node.k-lb h4, .net-node.k-proxy h4 { color: #6b3fa8; }
.net-node.k-db { border-color: #2e9e5b; } .net-node.k-db h4 { color: #1e7a44; }
.net-node.k-external, .net-node.k-internet, .net-node.k-storage, .net-node.st-planned { border-style: dashed; background: #fbf7ec; }
.net-node.k-external, .net-node.k-internet, .net-node.k-storage { box-shadow: none; } .net-node.st-stopped { opacity: .6; }
.dotst { width: 9px; height: 9px; border-radius: 50%; background: #2e9e5b; flex: none; display: inline-block; } .dotst.planned { background: #f3a712; } .dotst.stopped { background: #b9b2a3; }
.net-node .cts { border-top: 2px dashed var(--line); padding: 6px 8px 8px; display: grid; gap: 4px; }
.net-node .ct { display: flex; align-items: center; gap: 6px; background: #f3f7fe; border: 1.5px solid #b9cdf0; border-radius: 8px; padding: 2px 7px; font-weight: 700; font-size: 11.5px; height: 23px; }
.net-node .ct .ctn { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; } .net-node .ct small { margin-left: auto; color: var(--muted); font-weight: 700; white-space: nowrap; font-size: 11px; }
.net-node .ct:hover { border-color: var(--blue); } .net-node .ct.sel { background: #fff3c4; border-color: #e0a800; }
.net-node .ct.ck-db { background: #eaf7ef; border-color: #a9dcbd; } .net-node .ct.ck-proxy { background: #f3edfb; border-color: #cdb8ec; }
.net-legend { display: inline-flex; gap: 16px; flex-wrap: wrap; font-size: 12px; font-weight: 700; color: var(--muted); }
.net-legend i { display: inline-block; width: 26px; border-top: 3px solid #2a7de1; vertical-align: middle; margin-right: 6px; } .net-legend i.r { border-top: 3px dashed #2e9e5b; } .net-legend i.b { border-top: 3px dotted #8b5a2b; }
.net-tools { display: flex; gap: 6px; } .net-tools form { display: block; } .net-tools .btn { background: #fffdf7; }
.net-panel { background: var(--panel); border: 2px solid var(--line); border-radius: 18px; padding: 18px; box-shadow: 0 4px 0 var(--line); font-size: 13.5px; display: grid; gap: 12px; min-width: 0; }
.net-panel h2 { margin: 0; font-size: 20px; } .net-panel h3 { font: 600 14px var(--display); margin: 6px 0 0; color: var(--text); } .net-panel form { gap: 8px; }
.kv { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 5px 10px; margin: 0; } .kv dt { color: var(--muted); font-weight: 700; font-size: 12.5px; } .kv dd { margin: 0; overflow-wrap: anywhere; }
.mono { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12.5px; }
.rowlist { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; }
.rowlist li { display: flex; gap: 8px; align-items: center; border: 2px solid var(--line); border-radius: 10px; padding: 5px 9px; background: #fffdf7; min-width: 0; }
.rowlist li a { overflow-wrap: anywhere; font-weight: 700; } .rowlist li a:hover { color: var(--blue); text-decoration: underline; } .rowlist small { margin-left: auto; color: var(--muted); font-weight: 700; white-space: nowrap; }
.tagp { display: inline-block; font: 700 11px var(--body); padding: 1px 7px; border-radius: 99px; border: 1.5px solid var(--line-2); background: #fff; white-space: nowrap; color: #5a5347; }
.tagp.x-internet { color: #b3261e; border-color: #eab3a8; background: #fdece8; } .tagp.x-restricted { color: #8a5d00; border-color: #f2d48a; background: #fff6dc; }
.tagp.x-private, .tagp.x-internal { color: #1e7a44; border-color: #a9dcbd; background: #eaf7ef; }
table.ports { width: 100%; font-size: 12px; } table.ports td, table.ports th { padding: 5px 6px 5px 0; white-space: normal; vertical-align: top; } table.ports small { display: block; color: var(--muted); font-weight: 600; }
.alertline { background: #fff; border-radius: 10px; padding: 8px 12px; border: 2px solid var(--line); border-left: 6px solid var(--yellow); font-weight: 600; } .alertline.bad { border-left-color: var(--red); }
.badge.nst-active { color: #1e7a44; border-color: #a9dcbd; background: #eaf7ef; } .badge.nst-planned { color: #8a5d00; border-color: #f2d48a; background: #fff6dc; } .badge.nst-stopped { color: var(--muted); }
.net-upload { flex-direction: row; align-items: center; } .net-upload input { font-size: 12px; padding: 4px; }
@media (max-width: 1180px) { .net { grid-template-columns: 1fr; } .net-canvas { max-height: 70vh; } }
@media print { .net { display: block; } .net-wrap { border: 0; box-shadow: none; overflow: visible; } .net-canvas { max-height: none; overflow: visible; } .net-node.dim { opacity: 1; } .net-inner { transform: none !important; } }