/* BugsLog — le style HUD (de la famille de GitOps et ChartOps : menthe et bleu acier, angles droits, équerres aux coins des
   panneaux, petits titres en capitales espacées, trame de fond). Sombre par défaut ; [data-theme="light"] pour le clair.
   Les effets (radar, apparitions, compteurs…) ne jouent qu'avec [data-fx="on"] et sans « réduire les animations ». */

/* ── 1. Les couleurs ───────────────────────────────────────────────────────────────────────────────────────────── */
:root, :root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #111a20; --bg-2: #15222a;
  --panel: rgba(27, 41, 49, .78); --panel-solid: #1b2931; --panel-2: #203039; --panel-3: #263842;
  --line: rgba(177, 203, 215, .13); --line-2: rgba(177, 203, 215, .24); --grid: rgba(159, 187, 204, .035);
  --text: #b4c3cb; --hi: #e6f0f3; --muted: #7f929c; --faint: #586b75;
  --accent: #4de0b0; --accent-rgb: 77, 224, 176; --accent-ink: #0c1e19;
  --info: #50a5d5; --info-rgb: 80, 165, 213;
  --warn: #f2c14e; --warn-rgb: 242, 193, 78;
  --danger: #f08086; --danger-rgb: 240, 128, 134;
  --violet: #b39ae8; --violet-rgb: 179, 154, 232;
  --ok: #7fd18b; --ok-rgb: 127, 209, 139;
  --glow: 0 0 18px rgba(var(--accent-rgb), .25);
  --shadow: 0 22px 70px rgba(0, 0, 0, .5);
  --glass: rgba(17, 26, 32, .82);
}
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #e4edef; --bg-2: #dbe7ea;
  --panel: rgba(250, 252, 252, .88); --panel-solid: #fafcfc; --panel-2: #eef4f5; --panel-3: #e3ecee;
  --line: rgba(40, 70, 85, .16); --line-2: rgba(40, 70, 85, .28); --grid: rgba(40, 70, 85, .032);
  --text: #3a4a53; --hi: #12222a; --muted: #627985; --faint: #93a6af;
  --accent: #0f9e78; --accent-rgb: 15, 158, 120; --accent-ink: #ffffff;
  --info: #2f86b8; --info-rgb: 47, 134, 184;
  --warn: #b07d00; --warn-rgb: 176, 125, 0;
  --danger: #cf3f4a; --danger-rgb: 207, 63, 74;
  --violet: #7656c2; --violet-rgb: 118, 86, 194;
  --ok: #2c9548; --ok-rgb: 44, 149, 72;
  --glow: 0 0 14px rgba(var(--accent-rgb), .18);
  --shadow: 0 18px 50px rgba(30, 50, 60, .18);
  --glass: rgba(228, 237, 239, .88);
}
:root {
  --sans: 'Segoe UI', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
  --mono: ui-monospace, 'Cascadia Code', 'JetBrains Mono', 'SFMono-Regular', Consolas, monospace;
  --top-h: 3.4rem; --side-w: 15.5rem;
  --cut: polygon(0 0, 74% 0, 100% 26%, 100% 100%, 26% 100%, 0 74%);
}
/* les couleurs par sens : statut (--sc), type (--tc), priorité (--prc) */
[data-s="propose"] { --sc: var(--violet); --sc-rgb: var(--violet-rgb); }
[data-s="a_faire"] { --sc: var(--info); --sc-rgb: var(--info-rgb); }
[data-s="en_cours"] { --sc: var(--accent); --sc-rgb: var(--accent-rgb); }
[data-s="a_verifier"] { --sc: var(--warn); --sc-rgb: var(--warn-rgb); }
[data-s="termine"] { --sc: var(--ok); --sc-rgb: var(--ok-rgb); }
[data-s="abandonne"], [data-s="vide"] { --sc: var(--faint); --sc-rgb: 120, 140, 150; }
[data-t="bug"] { --tc: var(--danger); } [data-t="ajout"] { --tc: var(--accent); } [data-t="amelioration"] { --tc: var(--info); }
[data-t="idee"] { --tc: var(--warn); } [data-t="tache"] { --tc: var(--muted); }
[data-p="basse"] { --prc: var(--faint); } [data-p="normale"] { --prc: var(--info); } [data-p="haute"] { --prc: var(--warn); } [data-p="urgente"] { --prc: var(--danger); }

/* ── 2. La base ────────────────────────────────────────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh; font: 14px/1.55 var(--sans); color: var(--text); background: var(--bg);
  background-image: radial-gradient(ellipse at 70% -10%, rgba(var(--info-rgb), .10), transparent 55%), radial-gradient(ellipse at 0% 100%, rgba(var(--accent-rgb), .05), transparent 50%);
  background-attachment: fixed;
}
/* la trame : un quadrillage de 6 px, fixe derrière la page */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 6px 6px;
}
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--hi); }
code, kbd, pre { font-family: var(--mono); }
code { font-size: .86em; color: var(--accent); background: rgba(var(--accent-rgb), .08); padding: .05em .35em; }
kbd { font-size: .7em; padding: .05em .4em; border: 1px solid var(--line-2); color: var(--muted); background: var(--panel-2); }
h1, h2, h3, h4, h5, h6 { color: var(--hi); margin: 0; line-height: 1.25; }
p { margin: 0 0 .7em; }
input, select, textarea, button { font: inherit; color: inherit; }
::selection { background: rgba(var(--accent-rgb), .3); color: var(--hi); }
* { scrollbar-width: thin; scrollbar-color: var(--line-2) transparent; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.q-ic { width: 1rem; height: 1rem; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: square; stroke-linejoin: miter; vertical-align: -.16em; }
.q-ic-sm { width: .8rem; height: .8rem; }
.q-dim { color: var(--muted); }
.q-hint { color: var(--muted); font-size: .8rem; }
[hidden] { display: none !important; }

/* ── 3. La coquille ────────────────────────────────────────────────────────────────────────────────────────────── */
.q-shell { display: grid; grid-template-columns: var(--side-w) minmax(0, 1fr); grid-template-rows: var(--top-h) 1fr; min-height: 100vh; }
.q-top {
  grid-column: 1 / -1; position: sticky; top: 0; z-index: 40; height: var(--top-h); display: flex; align-items: center; gap: 1rem; padding: 0 1.1rem;
  background: var(--glass); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--line);
}
.q-top::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: linear-gradient(90deg, transparent, rgba(var(--accent-rgb), .55) 20%, transparent 60%); pointer-events: none; }
.q-brandlink { display: flex; align-items: center; gap: .6rem; width: calc(var(--side-w) - 1.1rem); flex: none; color: var(--hi); }
.q-brandmark { display: inline-grid; }
.q-logo { width: 2rem; height: 2rem; }
.q-logo-xl { width: 3.2rem; height: 3.2rem; }
.q-logo .lg-plate { fill: rgba(var(--accent-rgb), .1); }
.q-logo .lg-rim { fill: none; stroke: var(--accent); stroke-opacity: .35; stroke-width: 1.5; }
.q-logo .lg-eq { fill: none; stroke: var(--accent); stroke-width: 3; }
.q-logo .lg-node { fill: var(--accent); }
.q-logo .lg-hole { fill: none; stroke: var(--bg); stroke-width: 2.4; }
.q-logo .lg-node2 { fill: var(--info); }
.q-logo .lg-node3 { fill: none; stroke: var(--info); stroke-width: 2.4; }
.q-logo .lg-line { stroke: var(--accent); stroke-width: 4.2; }
.q-logo .lg-line2 { stroke: var(--info); stroke-width: 4.2; }
.q-logo .lg-line3 { stroke: var(--info); stroke-width: 4.2; stroke-opacity: .55; }
.q-brand { position: relative; font-weight: 600; letter-spacing: .1em; font-size: 1rem; color: var(--hi); white-space: nowrap; }
.q-slash { color: var(--accent); margin: 0 .05em; }
.q-ver { font-family: var(--mono); font-size: .62rem; color: var(--muted); border: 1px solid var(--line); padding: 0 .3rem; letter-spacing: .04em; }
.q-search { display: flex; align-items: center; gap: .5rem; height: 2rem; padding: 0 .6rem; min-width: 17rem; color: var(--muted); border: 1px solid var(--line); background: rgba(var(--accent-rgb), .03); }
.q-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font-size: .82rem; color: var(--hi); }
.q-search:focus-within { border-color: rgba(var(--accent-rgb), .6); box-shadow: 0 0 0 2px rgba(var(--accent-rgb), .14); }
.q-search kbd { flex: none; }
.q-top-right { margin-left: auto; display: flex; align-items: center; gap: .6rem; }
.q-link { display: inline-flex; align-items: center; gap: .4rem; font-size: .64rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.q-link i { width: .45rem; height: .45rem; background: var(--faint); box-shadow: 0 0 0 0 rgba(var(--accent-rgb), .5); }
.q-link.on i { background: var(--accent); }
.q-link.off i { background: var(--danger); }
.q-clock { font-family: var(--mono); font-size: .74rem; color: var(--muted); letter-spacing: .06em; min-width: 4.6rem; text-align: right; }
.q-icon-btn { display: inline-grid; place-items: center; width: 2rem; height: 2rem; padding: 0; border: 1px solid var(--line); background: rgba(var(--accent-rgb), .025); color: var(--muted); cursor: pointer; }
.q-icon-btn:hover { color: var(--accent); border-color: rgba(var(--accent-rgb), .55); }
:root[data-theme="dark"] .q-ic-sun, :root[data-theme="light"] .q-ic-moon { display: none; }
/* le menu du compte (<details>) */
.q-dd { position: relative; }
.q-dd > summary { list-style: none; cursor: pointer; }
.q-dd > summary::-webkit-details-marker { display: none; }
.q-userbtn { display: flex; align-items: center; gap: .5rem; height: 2rem; padding: 0 .6rem 0 .25rem; border: 1px solid var(--line); background: rgba(var(--accent-rgb), .04); color: var(--hi); font-size: .82rem; font-weight: 600; }
.q-userbtn:hover, .q-dd[open] .q-userbtn { border-color: rgba(var(--accent-rgb), .55); }
.q-userbtn[data-new]::after { content: attr(data-new); min-width: 1.1rem; height: 1.1rem; padding: 0 .25rem; display: grid; place-items: center; font-size: .6rem; font-weight: 800; background: var(--info); color: var(--bg); }
.q-menu { position: absolute; right: 0; top: calc(100% + .45rem); z-index: 60; min-width: 16rem; padding: .35rem 0; background: var(--panel-solid); border: 1px solid var(--line-2); box-shadow: var(--shadow); }
.q-menu-head { padding: .5rem .9rem .6rem; border-bottom: 1px solid var(--line); margin-bottom: .3rem; display: flex; flex-direction: column; }
.q-menu-head b { color: var(--hi); } .q-menu-head small { color: var(--muted); font-size: .72rem; }
.q-menu a, .q-menu button { display: flex; align-items: center; gap: .6rem; width: 100%; padding: .42rem .9rem; border: 0; background: none; text-align: left; color: var(--text); font-size: .84rem; cursor: pointer; }
.q-menu a:hover, .q-menu button:hover { background: rgba(var(--accent-rgb), .1); color: var(--accent); }
.q-menu form { margin: 0; border-top: 1px solid var(--line); margin-top: .3rem; padding-top: .3rem; }
.q-menu .q-danger:hover { background: rgba(var(--danger-rgb), .1); color: var(--danger); }
.q-menu-val { margin-left: auto; font-family: var(--mono); font-size: .7rem; color: var(--muted); }
#btn-changelog[data-new]::after { content: attr(data-new); margin-left: .4rem; padding: .02rem .4rem; font-size: .6rem; font-weight: 800; background: rgba(var(--info-rgb), .18); color: var(--info); }

/* le menu de gauche */
.q-side { position: sticky; top: var(--top-h); height: calc(100vh - var(--top-h)); overflow-y: auto; display: flex; flex-direction: column; border-right: 1px solid var(--line); background: linear-gradient(180deg, rgba(var(--accent-rgb), .025), transparent 40%); }
.q-nav { display: flex; flex-direction: column; gap: 1px; padding: .6rem .5rem 1rem; flex: 1; }
.q-nav-sec { display: flex; align-items: center; justify-content: space-between; padding: .95rem .6rem .3rem; font-size: .62rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--accent); }
.q-nav-sec a { color: var(--muted); display: inline-grid; } .q-nav-sec a:hover { color: var(--accent); }
.q-nav-link { position: relative; display: flex; align-items: center; gap: .6rem; padding: .34rem .55rem; color: var(--text); font-size: .83rem; font-weight: 500; }
.q-nav-link .ic { width: 1.45rem; height: 1.45rem; display: grid; place-items: center; flex: none; background: var(--panel-2); color: var(--muted); clip-path: var(--cut); transition: background .15s, color .15s; }
.q-nav-link .ic .q-ic { width: .88rem; height: .88rem; }
.q-nav-link .lb { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.q-nav-link:hover { background: rgba(var(--accent-rgb), .06); color: var(--hi); }
.q-nav-link:hover .ic { color: var(--accent); }
.q-nav-link.active { background: linear-gradient(90deg, rgba(var(--accent-rgb), .14), rgba(var(--accent-rgb), .02)); box-shadow: inset 2px 0 0 var(--accent); color: var(--hi); font-weight: 600; }
.q-nav-link.active .ic { background: var(--accent); color: var(--accent-ink); }
.q-nav-link .pill { font-family: var(--mono); font-size: .66rem; font-weight: 600; padding: 0 .38rem; color: var(--accent); box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), .35); }
.q-pdot { width: .62rem; height: .62rem; background: var(--pc, var(--accent)); box-shadow: 0 0 8px var(--pc, var(--accent)); display: inline-block; flex: none; }
.q-nav-link .ic .q-pdot { width: .5rem; height: .5rem; }
.q-nav-empty { padding: .35rem .6rem; font-size: .78rem; color: var(--muted); }
.q-side-foot { display: flex; justify-content: space-between; padding: .6rem 1rem; border-top: 1px solid var(--line); font-family: var(--mono); font-size: .64rem; color: var(--faint); letter-spacing: .04em; }
#q-uplink { color: var(--accent); }
.q-main { padding: 1.4rem 1.7rem 3rem; min-width: 0; }

/* le téléphone : le menu s'ouvre en panneau (☰) */
.q-burger { display: none; width: 2.1rem; height: 2.1rem; border: 1px solid var(--line); background: transparent; color: var(--hi); padding: 0; place-items: center; cursor: pointer; flex: none; }
.q-burger span, .q-burger span::before, .q-burger span::after { display: block; width: 1rem; height: 2px; background: currentColor; transition: transform .2s, background .2s; position: relative; }
.q-burger span::before, .q-burger span::after { content: ""; position: absolute; left: 0; }
.q-burger span::before { top: -5px; } .q-burger span::after { top: 5px; }
.q-menu-open .q-burger span { background: transparent; }
.q-menu-open .q-burger span::before { transform: translateY(5px) rotate(45deg); }
.q-menu-open .q-burger span::after { transform: translateY(-5px) rotate(-45deg); }
.q-sideback { position: fixed; inset: var(--top-h) 0 0; z-index: 44; background: rgba(0, 0, 0, .45); }
@media (max-width: 960px) {
  .q-shell { grid-template-columns: minmax(0, 1fr); }
  .q-burger { display: inline-grid; }
  .q-brandlink { width: auto; }
  .q-side { position: fixed; top: var(--top-h); left: 0; bottom: 0; z-index: 45; width: min(17rem, 85vw); height: auto; background: var(--panel-solid); transform: translateX(-102%); transition: transform .22s ease; visibility: hidden; }
  .q-menu-open .q-side { transform: none; visibility: visible; }
  .q-search { display: none; }
  .q-main { padding: 1rem 1rem 3rem; }
}
@media (max-width: 640px) { .q-clock, .q-link span, .q-ver, .q-userbtn-name { display: none; } .q-top { gap: .5rem; padding: 0 .7rem; } }

/* ── 4. Les panneaux, les titres ───────────────────────────────────────────────────────────────────────────────── */
.q-panel { position: relative; background: var(--panel); border: 1px solid var(--line); margin-bottom: 1.1rem; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
/* les équerres : deux coins pleins, deux à moitié */
.q-panel::before, .q-panel::after, .q-stat::before, .q-pcard::before, .q-card::before {
  content: ""; position: absolute; inset: -1px; pointer-events: none; z-index: 2;
  background:
    linear-gradient(var(--corner, rgba(var(--accent-rgb), .85)), var(--corner, rgba(var(--accent-rgb), .85))) left top / 10px 2px no-repeat,
    linear-gradient(var(--corner, rgba(var(--accent-rgb), .85)), var(--corner, rgba(var(--accent-rgb), .85))) left top / 2px 10px no-repeat,
    linear-gradient(var(--corner, rgba(var(--accent-rgb), .85)), var(--corner, rgba(var(--accent-rgb), .85))) right bottom / 10px 2px no-repeat,
    linear-gradient(var(--corner, rgba(var(--accent-rgb), .85)), var(--corner, rgba(var(--accent-rgb), .85))) right bottom / 2px 10px no-repeat;
  transition: background-size .2s ease, opacity .2s;
}
.q-panel::after { transform: scaleX(-1); opacity: .45; }
.q-panel .q-panel::before, .q-panel .q-panel::after { display: none; }
.q-panel-head { display: flex; align-items: center; gap: .7rem; padding: .65rem 1rem; border-bottom: 1px solid var(--line); }
.q-panel-head h2 { display: flex; align-items: center; gap: .5rem; font-size: .7rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--text); }
.q-panel-head h2 .q-ic { color: var(--accent); }
.q-panel-note { margin-left: auto; font-family: var(--mono); font-size: .66rem; color: var(--muted); letter-spacing: .06em; }
.q-panel-link { margin-left: auto; font-size: .72rem; letter-spacing: .06em; }
.q-panel-body { padding: 1rem; }
.q-panel-foot { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; padding: .75rem 1rem; border-top: 1px solid var(--line); }
.q-count { font-family: var(--mono); color: var(--accent); font-weight: 600; letter-spacing: 0; }
.q-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.15rem; }
.q-head h1 { font-size: 1.45rem; font-weight: 500; letter-spacing: .01em; overflow-wrap: anywhere; }
.q-head h1::after { content: " //"; color: var(--accent); font-weight: 400; font-size: .78em; }
.q-head p { margin: .3rem 0 0; color: var(--muted); font-size: .86rem; }
.q-head p b { color: var(--hi); font-weight: 600; }
.q-kicker { display: flex; align-items: center; gap: .55rem; font-size: .66rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--accent); margin-bottom: .35rem; }
.q-kick-id { font-family: var(--mono); font-size: .8rem; letter-spacing: .04em; color: var(--hi); }
.q-head-actions { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.q-grid { display: grid; gap: 1.1rem; margin-bottom: 0; }
.q-grid > .q-panel, .q-grid > .q-stack > .q-panel:last-child { margin-bottom: 0; }
.q-grid-2 { grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); margin-bottom: 1.1rem; }
.q-grid-dash { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); margin-bottom: 1.1rem; }
.q-stack { display: flex; flex-direction: column; gap: 1.1rem; min-width: 0; }
.q-stack > .q-panel { margin-bottom: 0; }
@media (max-width: 1100px) { .q-grid-dash { grid-template-columns: 1fr; } }

/* ── 5. Les boutons, les champs ────────────────────────────────────────────────────────────────────────────────── */
.q-btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .45rem; height: 2.1rem; padding: 0 .85rem; overflow: hidden;
  border: 1px solid var(--line-2); background: rgba(var(--accent-rgb), .03); color: var(--hi); font-size: .82rem; font-weight: 500; cursor: pointer; white-space: nowrap; text-decoration: none;
  transition: border-color .15s, background .15s, color .15s, box-shadow .15s;
}
.q-btn:hover { border-color: rgba(var(--accent-rgb), .6); color: var(--accent); }
.q-btn-primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); font-weight: 600; }
.q-btn-primary:hover { background: var(--accent); color: var(--accent-ink); box-shadow: var(--glow); filter: brightness(1.08); }
.q-btn-danger { border-color: rgba(var(--danger-rgb), .45); color: var(--danger); background: rgba(var(--danger-rgb), .05); }
.q-btn-danger:hover { border-color: var(--danger); color: var(--danger); background: rgba(var(--danger-rgb), .12); }
.q-btn-sm { height: 1.75rem; padding: 0 .6rem; font-size: .76rem; }
.q-btn-block { width: 100%; }
.q-btn kbd { background: rgba(0, 0, 0, .12); border-color: rgba(0, 0, 0, .18); color: inherit; opacity: .75; }
.q-btn[data-s] { --corner: var(--sc); }
.q-seg { display: inline-flex; box-shadow: inset 0 0 0 1px var(--line-2); }
.q-seg a, .q-seg button { display: inline-flex; align-items: center; gap: .4rem; height: 2.1rem; padding: 0 .8rem; border: 0; background: transparent; color: var(--muted); font-size: .8rem; cursor: pointer; }
.q-seg a:hover, .q-seg button:hover { color: var(--hi); }
.q-seg .on { background: rgba(var(--accent-rgb), .13); color: var(--accent); box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), .45); }
.q-form { margin: 0; }
.q-field { display: flex; flex-direction: column; gap: .3rem; margin-bottom: .85rem; min-width: 0; }
.q-field > span { font-size: .66rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.q-field > span small { text-transform: none; letter-spacing: 0; font-weight: 400; color: var(--faint); font-size: .72rem; }
.q-form input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), .q-form select, .q-form textarea,
.q-filters input:not([type="checkbox"]), .q-filters select, .q-capture input, .q-capture select, .q-dialog textarea, .q-reply select {
  width: 100%; height: 2.2rem; padding: 0 .7rem; border: 1px solid var(--line-2); background: rgba(0, 0, 0, .14); color: var(--hi); font-size: .86rem; outline: 0; border-radius: 0;
  transition: border-color .15s, box-shadow .15s;
}
:root[data-theme="light"] :is(.q-form, .q-filters, .q-capture, .q-dialog, .q-reply) :is(input, select, textarea) { background: #fff; }
.q-form textarea, .q-dialog textarea { height: auto; padding: .6rem .7rem; line-height: 1.55; resize: vertical; font-family: var(--mono); font-size: .82rem; }
select { cursor: pointer; }
:is(.q-form, .q-filters, .q-capture, .q-dialog, .q-reply) :is(input, select, textarea):focus { border-color: rgba(var(--accent-rgb), .65); box-shadow: 0 0 0 2px rgba(var(--accent-rgb), .15); }
option { background: var(--panel-solid); color: var(--hi); }
.q-form-row { display: flex; gap: .9rem; flex-wrap: wrap; }
.q-form-row > .q-field { flex: 1 1 12rem; }
.q-form-row > .q-field-grow { flex: 3 1 18rem; }
.q-form-actions { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.q-form-actions select { width: auto; flex: 1 1 14rem; max-width: 22rem; }
/* les choix en pastilles (type, priorité) */
.q-picks { display: flex; flex-wrap: wrap; gap: .4rem; }
.q-pick { position: relative; display: inline-flex; align-items: center; gap: .45rem; height: 2.2rem; padding: 0 .8rem; border: 1px solid var(--line-2); cursor: pointer; color: var(--muted); font-size: .82rem; user-select: none; transition: all .15s; }
.q-pick input { position: absolute; opacity: 0; pointer-events: none; }
.q-pick .q-ic { color: var(--tc, var(--muted)); }
.q-pick:hover { color: var(--hi); border-color: rgba(var(--accent-rgb), .45); }
.q-pick:has(input:checked) { color: var(--hi); border-color: var(--tc, var(--prc, var(--accent))); background: color-mix(in srgb, var(--tc, var(--prc, var(--accent))) 13%, transparent); box-shadow: inset 0 -2px 0 var(--tc, var(--prc, var(--accent))); }
.q-pick:has(input:focus-visible) { outline: 2px solid var(--accent); }
.q-switch { display: inline-flex; align-items: center; gap: .5rem; font-size: .8rem; color: var(--muted); cursor: pointer; user-select: none; white-space: nowrap; }
.q-switch input { position: absolute; opacity: 0; }
.q-switch i { width: 2rem; height: 1.05rem; border: 1px solid var(--line-2); position: relative; flex: none; transition: all .15s; }
.q-switch i::after { content: ""; position: absolute; top: 2px; left: 2px; width: .7rem; height: .7rem; background: var(--muted); transition: all .15s; }
.q-switch input:checked + i { border-color: var(--accent); background: rgba(var(--accent-rgb), .15); }
.q-switch input:checked + i::after { left: calc(100% - .7rem - 2px); background: var(--accent); }
.q-switch input:focus-visible + i { outline: 2px solid var(--accent); }
.q-switch-field { align-self: center; margin-top: .8rem; }
.q-swatches { display: flex; gap: .4rem; flex-wrap: wrap; }
.q-swatch input { position: absolute; opacity: 0; }
.q-swatch i { display: block; width: 1.8rem; height: 1.8rem; background: var(--pc); cursor: pointer; clip-path: var(--cut); opacity: .55; transition: all .15s; }
.q-swatch input:checked + i { opacity: 1; box-shadow: 0 0 0 2px var(--bg) inset; transform: scale(1.12); }
.q-swatch input:focus-visible + i { outline: 2px solid var(--hi); }

/* ── 6. Les pastilles ──────────────────────────────────────────────────────────────────────────────────────────── */
.q-status { display: inline-flex; align-items: center; gap: .4rem; padding: .1rem .5rem; font-size: .7rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--sc); background: rgba(var(--sc-rgb), .1); box-shadow: inset 0 0 0 1px rgba(var(--sc-rgb), .35); white-space: nowrap; }
.q-status i { width: .42rem; height: .42rem; background: var(--sc); flex: none; }
.q-type { display: inline-flex; align-items: center; gap: .35rem; color: var(--tc); font-size: .78rem; white-space: nowrap; }
.q-type span { color: var(--text); }
.q-prio { display: inline-flex; align-items: center; gap: .4rem; font-size: .78rem; white-space: nowrap; }
.q-bars { display: inline-flex; align-items: flex-end; gap: 2px; height: .8rem; }
.q-bars i { width: 3px; background: var(--line-2); }
.q-bars i:nth-child(1) { height: 30%; } .q-bars i:nth-child(2) { height: 55%; } .q-bars i:nth-child(3) { height: 78%; } .q-bars i:nth-child(4) { height: 100%; }
.q-bars i.on { background: var(--prc); box-shadow: 0 0 5px color-mix(in srgb, var(--prc) 60%, transparent); }
.q-ptag { display: inline-flex; align-items: center; gap: .35rem; font-size: .74rem; color: var(--text); letter-spacing: 0; text-transform: none; font-weight: 500; }
.q-ptag i, .q-row-title small i, .q-mini-title small i, .q-feed-meta a i, .q-radar-legend i { width: .45rem; height: .45rem; background: var(--pc); display: inline-block; flex: none; }
.q-tag { display: inline-block; padding: .05rem .45rem; font-size: .68rem; font-weight: 600; letter-spacing: .05em; color: var(--muted); box-shadow: inset 0 0 0 1px var(--line-2); }
.q-tag-ok { color: var(--accent); box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), .45); }
.q-tag-bot { font-family: var(--mono); font-size: .62rem; padding: 0 .35rem; color: var(--info); box-shadow: inset 0 0 0 1px rgba(var(--info-rgb), .45); }
.q-av { display: inline-grid; place-items: center; width: 1.65rem; height: 1.65rem; flex: none; font-size: .74rem; font-weight: 700; color: hsl(var(--h, 160) 70% 75%); background: hsl(var(--h, 160) 40% 30% / .55); clip-path: var(--cut); }
:root[data-theme="light"] .q-av { color: hsl(var(--h, 160) 55% 32%); background: hsl(var(--h, 160) 50% 85%); }
.q-av-bot { color: var(--info); background: rgba(var(--info-rgb), .16); }
.q-av-bot .q-ic { width: .95rem; height: .95rem; }

/* ── 7. Le tableau de bord ─────────────────────────────────────────────────────────────────────────────────────── */
.q-capture { display: flex; align-items: center; gap: .5rem; padding: .55rem; margin-bottom: 1.1rem; border: 1px solid rgba(var(--accent-rgb), .35); background: linear-gradient(90deg, rgba(var(--accent-rgb), .08), rgba(var(--accent-rgb), .015)); position: relative; flex-wrap: wrap; }
.q-capture::before { content: ""; position: absolute; left: -1px; top: -1px; bottom: -1px; width: 3px; background: var(--accent); box-shadow: var(--glow); }
.q-capture-lbl { display: inline-flex; align-items: center; gap: .4rem; padding: 0 .5rem; font-size: .66rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--accent); }
.q-capture select { width: auto; flex: 0 1 auto; max-width: 11rem; }
.q-capture input { flex: 1 1 16rem; width: auto; }
.q-stats { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .8rem; margin-bottom: 1.1rem; }
@media (max-width: 1100px) { .q-stats { grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); } }
.q-stat { --corner: var(--sc, var(--accent)); position: relative; display: flex; flex-direction: column; gap: .1rem; padding: .8rem .95rem .75rem; background: var(--panel); border: 1px solid var(--line); color: var(--text); overflow: hidden; }
.q-stat[data-k="open"] { --sc: var(--hi); --sc-rgb: 200, 220, 225; }
.q-stat[data-k] { }
.q-stat[data-k="a_faire"] { --sc: var(--info); --sc-rgb: var(--info-rgb); } .q-stat[data-k="en_cours"] { --sc: var(--accent); --sc-rgb: var(--accent-rgb); }
.q-stat[data-k="a_verifier"] { --sc: var(--warn); --sc-rgb: var(--warn-rgb); } .q-stat[data-k="termine"] { --sc: var(--ok); --sc-rgb: var(--ok-rgb); }
.q-stat::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: linear-gradient(90deg, var(--sc), transparent); opacity: .7; }
.q-stat:hover { border-color: rgba(var(--sc-rgb), .5); color: var(--text); }
.q-stat:hover::before { background-size: 18px 2px, 2px 18px, 18px 2px, 2px 18px; }
.q-stat-lbl { font-size: .64rem; font-weight: 600; letter-spacing: .15em; text-transform: uppercase; color: var(--muted); }
.q-stat-num { font-family: var(--mono); font-size: 2rem; font-weight: 500; line-height: 1.15; color: var(--sc); font-variant-numeric: tabular-nums; text-shadow: 0 0 22px rgba(var(--sc-rgb), .35); }
.q-stat-hint { font-size: .72rem; color: var(--faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* le radar */
.q-panel-radar .q-panel-body { padding: .9rem; }
.q-radar-wrap { display: grid; grid-template-columns: minmax(0, 1fr) 11rem; gap: 1rem; align-items: center; }
@media (max-width: 600px) { .q-radar-wrap { grid-template-columns: 1fr; } }
.q-radar { position: relative; aspect-ratio: 1; max-width: 26rem; width: 100%; margin: 0 auto; }
.q-radar svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.q-radar-grid circle, .q-radar-grid line { fill: none; stroke: var(--line-2); stroke-width: .5; }
.q-radar-grid circle:first-child { stroke: rgba(var(--accent-rgb), .45); stroke-width: .8; }
.q-radar-ticks text { font: 600 4.2px var(--mono); fill: var(--faint); text-anchor: middle; letter-spacing: .3px; }
.q-blip circle { fill: var(--pc); filter: drop-shadow(0 0 2px var(--pc)); transition: r .15s; }
.q-blip:hover circle:first-child { r: 4; }
.q-blip[data-s="a_verifier"] circle:first-child { fill: var(--bg); stroke: var(--pc); stroke-width: 1.2; }
.q-blip[data-s="propose"] circle:first-child { opacity: .55; }
.q-radar-legend { display: flex; flex-direction: column; gap: .3rem; font-size: .78rem; }
.q-radar-legend a { display: flex; align-items: center; gap: .5rem; color: var(--text); padding: .2rem .35rem; }
.q-radar-legend a:hover { background: rgba(var(--accent-rgb), .06); color: var(--hi); }
.q-radar-legend b { margin-left: auto; font-family: var(--mono); color: var(--pc); }
/* les mini-listes (à vérifier, en cours) */
.q-mini { display: flex; flex-direction: column; }
.q-mini-row { display: grid; grid-template-columns: 2.6rem 1.2rem minmax(0, 1fr) auto; align-items: center; gap: .6rem; padding: .5rem .3rem; border-bottom: 1px dashed var(--line); color: var(--text); }
.q-mini-row:last-child { border-bottom: 0; }
.q-mini-row:hover { background: rgba(var(--accent-rgb), .05); color: var(--hi); box-shadow: inset 2px 0 0 var(--accent); }
.q-mini-title { min-width: 0; display: flex; flex-direction: column; font-size: .85rem; color: var(--hi); }
.q-mini-title small, .q-row-title small { display: inline-flex; align-items: center; gap: .35rem; font-size: .72rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.q-panel-review { --corner: var(--warn); }
.q-panel-review .q-panel-head h2 .q-ic { color: var(--warn); }
/* les projets */
.q-pcards { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: .8rem; }
.q-pcard { --corner: var(--pc); position: relative; display: flex; flex-direction: column; gap: .6rem; padding: .85rem .95rem; border: 1px solid var(--line); background: linear-gradient(135deg, color-mix(in srgb, var(--pc) 9%, transparent), transparent 55%); color: var(--text); }
.q-pcard:hover { border-color: color-mix(in srgb, var(--pc) 60%, transparent); color: var(--text); }
.q-pcard:hover::before { background-size: 18px 2px, 2px 18px, 18px 2px, 2px 18px; }
.q-pcard-head { display: flex; align-items: baseline; gap: .55rem; }
.q-pcard-head b { color: var(--hi); font-size: .95rem; font-weight: 600; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.q-pcard-pct { font-family: var(--mono); font-size: 1.25rem; color: var(--pc); }
.q-pcard-pctu { font-family: var(--mono); font-size: .7rem; color: var(--muted); margin-left: -.45rem; }
.q-segbar { display: flex; height: 6px; background: var(--panel-3); gap: 2px; overflow: hidden; }
.q-segbar i { display: block; height: 100%; background: var(--sc); transform-origin: left; }
.q-pcard-foot { display: flex; gap: .8rem; font-size: .72rem; color: var(--muted); flex-wrap: wrap; }
.q-pcard-foot b { color: var(--hi); font-family: var(--mono); }
.q-welcome { max-width: 46rem; }
.q-steps { margin: .4rem 0 1.1rem; padding-left: 1.3rem; display: flex; flex-direction: column; gap: .35rem; }
.q-steps li::marker { color: var(--accent); font-family: var(--mono); }

/* le journal de bord */
.q-feed { list-style: none; margin: 0; padding: 0; position: relative; }
.q-feed::before { content: ""; position: absolute; left: .78rem; top: .4rem; bottom: .4rem; width: 1px; background: var(--line); }
.q-feed li { position: relative; display: flex; gap: .75rem; padding: .45rem 0; }
.q-feed-ic { position: relative; z-index: 1; display: grid; place-items: center; width: 1.6rem; height: 1.6rem; flex: none; background: var(--panel-solid); color: var(--sc, var(--muted)); box-shadow: inset 0 0 0 1px var(--line-2); clip-path: var(--cut); }
.q-feed li[data-k="comment"] .q-feed-ic { color: var(--info); }
.q-feed li[data-k="create"] .q-feed-ic { color: var(--accent); }
.q-feed li[data-k="delete"] .q-feed-ic { color: var(--danger); }
.q-feed-ic .q-ic { width: .82rem; height: .82rem; }
.q-feed-tx { min-width: 0; font-size: .84rem; }
.q-feed-who { color: var(--hi); font-weight: 600; }
.q-feed-who .q-ic { color: var(--info); }
.q-feed-item b { font-family: var(--mono); font-weight: 600; }
.q-feed-quote { margin-top: .2rem; padding: .3rem .6rem; border-left: 2px solid var(--line-2); color: var(--muted); font-size: .8rem; overflow-wrap: anywhere; }
.q-feed-meta { display: flex; align-items: center; gap: .3rem; margin-top: .1rem; font-size: .72rem; color: var(--faint); }
.q-feed-meta a { display: inline-flex; align-items: center; gap: .3rem; color: var(--muted); }
.q-feed li.q-new { animation: q-flash-row 2.4s ease-out; }
.q-live-note::before { content: "● "; color: var(--accent); }

/* ── 8. Les listes ─────────────────────────────────────────────────────────────────────────────────────────────── */
.q-panel-list > .q-panel-body { padding: 0; }
.q-filters { padding: .8rem 1rem; border-bottom: 1px solid var(--line); display: flex; flex-direction: column; gap: .6rem; }
.q-filter-row { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
.q-filter-row select { width: auto; flex: 0 1 auto; }
.q-search-inline { flex: 1 1 14rem; min-width: 12rem; height: 2.2rem; }
.q-search-inline input { height: auto !important; border: 0 !important; background: transparent !important; box-shadow: none !important; padding: 0 !important; }
.q-chips { display: flex; gap: .35rem; flex-wrap: wrap; align-items: center; }
.q-chip { position: relative; display: inline-flex; align-items: center; gap: .4rem; padding: .2rem .6rem; font-size: .74rem; color: var(--muted); box-shadow: inset 0 0 0 1px var(--line-2); cursor: pointer; user-select: none; }
.q-chip input { position: absolute; opacity: 0; }
.q-chip i { width: .45rem; height: .45rem; background: var(--sc); opacity: .5; }
.q-chip:hover { color: var(--hi); }
.q-chip:has(input:checked) { color: var(--sc); background: rgba(var(--sc-rgb), .12); box-shadow: inset 0 0 0 1px rgba(var(--sc-rgb), .55); }
.q-chip:has(input:checked) i { opacity: 1; }
.q-chip-reset { font-size: .74rem; color: var(--muted); display: inline-flex; align-items: center; gap: .3rem; margin-left: .3rem; }
.q-rows { display: flex; flex-direction: column; }
.q-row { display: grid; grid-template-columns: 3.4rem 1.2rem minmax(0, 1fr) auto 2.2rem 7.6rem 5.6rem; align-items: center; gap: .7rem; padding: .62rem 1rem; border-bottom: 1px solid var(--line); color: var(--text); position: relative; }
.q-row:last-child { border-bottom: 0; }
.q-row:hover { background: rgba(var(--sc-rgb), .05); color: var(--text); box-shadow: inset 2px 0 0 var(--sc); }
.q-row-id { font-family: var(--mono); font-size: .76rem; color: var(--muted); }
.q-row-title { display: flex; flex-direction: column; min-width: 0; color: var(--hi); font-size: .88rem; }
.q-row-title > :first-child, .q-row-title { overflow-wrap: anywhere; }
.q-row-meta { display: flex; gap: .55rem; font-size: .72rem; color: var(--muted); }
.q-row-meta span, .q-card-meta span { display: inline-flex; align-items: center; gap: .2rem; }
.q-row time { font-size: .72rem; color: var(--faint); text-align: right; white-space: nowrap; }
.q-row .q-status { justify-self: start; }
@media (max-width: 800px) {
  .q-row { grid-template-columns: 3rem minmax(0, 1fr) auto; grid-template-areas: "id title prio" "id status time"; row-gap: .3rem; }
  .q-row .q-type, .q-row-meta { display: none; }
  .q-row-id { grid-area: id; } .q-row-title { grid-area: title; } .q-row .q-prio { grid-area: prio; } .q-row .q-status { grid-area: status; } .q-row time { grid-area: time; }
}
.q-list-foot { padding: .7rem 1rem; border-top: 1px solid var(--line); font-size: .8rem; }
.q-empty { display: flex; flex-direction: column; align-items: center; gap: .6rem; padding: 2.4rem 1rem; text-align: center; color: var(--muted); }
.q-empty > .q-ic { width: 2.2rem; height: 2.2rem; color: var(--faint); }
.q-empty p { margin: 0; }
.q-empty-sm { padding: 1rem; font-size: .84rem; }

/* ── 9. Le tableau d'un projet ─────────────────────────────────────────────────────────────────────────────────── */
.q-phead { position: relative; padding-left: 1rem; margin-bottom: .9rem; }
.q-phead::before { content: ""; position: absolute; left: 0; top: .2rem; bottom: .3rem; width: 3px; background: var(--pc); box-shadow: 0 0 12px var(--pc); }
.q-phead .q-kicker { color: var(--pc); }
.q-phead .q-head { margin-bottom: .7rem; }
.q-pmeta { font-size: .78rem; display: inline-flex; flex-wrap: wrap; gap: .35rem; align-items: center; margin-top: .25rem; }
.q-pstats { display: flex; gap: .4rem; flex-wrap: wrap; margin-bottom: .2rem; }
.q-pstats span { display: inline-flex; align-items: center; gap: .4rem; padding: .18rem .55rem; font-size: .74rem; color: var(--muted); box-shadow: inset 0 0 0 1px var(--line); }
.q-pstats i { width: .45rem; height: .45rem; background: var(--sc); }
.q-pstats b { font-family: var(--mono); color: var(--sc); }
.q-board { display: grid; grid-template-columns: repeat(5, minmax(13rem, 1fr)); gap: .7rem; overflow-x: auto; padding-bottom: .6rem; margin-bottom: .6rem; align-items: start; scroll-snap-type: x proximity; }
.q-col { display: flex; flex-direction: column; min-height: 12rem; background: rgba(var(--sc-rgb), .025); border: 1px solid var(--line); border-top: 2px solid var(--sc); scroll-snap-align: start; }
.q-col-head { display: flex; align-items: center; gap: .5rem; padding: .6rem .75rem; border-bottom: 1px solid var(--line); position: sticky; top: 0; }
.q-col-head i { width: .5rem; height: .5rem; background: var(--sc); box-shadow: 0 0 8px var(--sc); }
.q-col-head h3 { font-size: .68rem; font-weight: 600; letter-spacing: .15em; text-transform: uppercase; color: var(--text); flex: 1; }
.q-col-head b { font-family: var(--mono); font-size: .78rem; color: var(--sc); }
.q-col-body { display: flex; flex-direction: column; gap: .5rem; padding: .55rem; flex: 1; min-height: 4rem; transition: background .15s, box-shadow .15s; }
.q-col-body.q-over { background: rgba(var(--sc-rgb), .08); box-shadow: inset 0 0 0 1px rgba(var(--sc-rgb), .5); }
.q-col-more { padding: .3rem .75rem .6rem; font-size: .74rem; }
.q-quickadd { padding: 0 .55rem .55rem; }
.q-quickadd input { width: 100%; height: 2rem; padding: 0 .6rem; border: 1px dashed var(--line-2); background: transparent; color: var(--hi); font-size: .8rem; outline: 0; }
.q-quickadd input:focus { border-style: solid; border-color: rgba(var(--sc-rgb), .7); background: rgba(0, 0, 0, .12); }
.q-card { --corner: transparent; position: relative; display: flex; flex-direction: column; gap: .4rem; padding: .6rem .65rem .55rem; background: var(--panel-solid); border: 1px solid var(--line); cursor: grab; box-shadow: inset 2px 0 0 var(--prc); transition: border-color .15s, transform .15s, box-shadow .15s; }
.q-card:hover { border-color: rgba(var(--accent-rgb), .45); --corner: rgba(var(--accent-rgb), .85); }
.q-card.q-dragging { opacity: .45; transform: scale(.98); }
.q-card.q-dropped { animation: q-drop .6s ease-out; }
.q-card-top { display: flex; align-items: center; gap: .5rem; }
.q-card-top .q-prio { margin-left: auto; }
.q-card-id { font-family: var(--mono); font-size: .72rem; color: var(--muted); }
.q-card-title { color: var(--hi); font-size: .86rem; line-height: 1.4; overflow-wrap: anywhere; }
.q-card-title:hover { color: var(--accent); }
.q-card-foot { display: flex; align-items: center; gap: .6rem; font-size: .7rem; color: var(--faint); }
.q-card-meta { display: flex; gap: .5rem; color: var(--muted); }
.q-card-meta .q-ic { width: .8rem; height: .8rem; }
.q-card-foot time { margin-left: auto; white-space: nowrap; }
.q-board-foot { margin-top: -.2rem; margin-bottom: 1rem; }

/* ── 10. Une demande ───────────────────────────────────────────────────────────────────────────────────────────── */
.q-subline { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; margin-top: .45rem; }
.q-sub-meta { font-size: .8rem; color: var(--muted); }
.q-itemgrid { display: grid; grid-template-columns: minmax(0, 1fr) 19.5rem; gap: 1.1rem; align-items: start; }
@media (max-width: 1000px) { .q-itemgrid { grid-template-columns: 1fr; } }
.q-itemside .q-panel-body { padding: .85rem; }
.q-quick { display: flex; flex-direction: column; gap: .45rem; }
.q-quick form { margin: 0; }
.q-props .q-field { margin-bottom: .6rem; }
.q-props select[data-s] { color: var(--sc); font-weight: 600; }
.q-dl { display: grid; grid-template-columns: auto 1fr; gap: .35rem .8rem; margin: .5rem 0 0; padding-top: .7rem; border-top: 1px dashed var(--line); font-size: .8rem; }
.q-dl dt { font-size: .64rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); padding-top: .15rem; }
.q-dl dd { margin: 0; color: var(--hi); font-family: var(--mono); font-size: .76rem; }
.q-dl small { color: var(--muted); font-family: var(--sans); }
.q-panel-cli .q-cmd { margin-bottom: .45rem; }
.q-danger-zone { border: 1px solid rgba(var(--danger-rgb), .3); background: rgba(var(--danger-rgb), .03); }
.q-danger-zone summary { padding: .6rem .85rem; cursor: pointer; color: var(--danger); font-size: .8rem; display: flex; align-items: center; gap: .45rem; list-style: none; }
.q-danger-zone summary::-webkit-details-marker { display: none; }
.q-danger-zone form { padding: 0 .85rem .85rem; display: flex; flex-direction: column; gap: .5rem; }
.q-danger-zone input { height: 2rem; }
.q-files { display: grid; grid-template-columns: repeat(auto-fill, minmax(12.5rem, 1fr)); gap: .6rem; }
.q-file { display: flex; align-items: center; gap: .6rem; padding: .45rem; border: 1px solid var(--line); background: var(--panel-2); min-width: 0; }
.q-file form { margin: 0 0 0 auto; }
.q-file-thumb { width: 3.2rem; height: 3.2rem; flex: none; display: grid; place-items: center; overflow: hidden; background: rgba(0, 0, 0, .2); }
.q-file-thumb img { width: 100%; height: 100%; object-fit: cover; }
.q-file-doc { color: var(--muted); }
.q-file-tx { min-width: 0; display: flex; flex-direction: column; font-size: .8rem; }
.q-file-tx a { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--hi); }
.q-file-tx small { color: var(--muted); font-size: .7rem; }
/* le fil */
.q-thread { list-style: none; margin: 0 0 1rem; padding: 0; position: relative; }
.q-thread::before { content: ""; position: absolute; left: .82rem; top: 0; bottom: 0; width: 1px; background: var(--line); }
.q-comment { position: relative; display: flex; gap: .75rem; margin: .7rem 0; }
.q-comment .q-av { position: relative; z-index: 1; }
.q-comment-box { flex: 1; min-width: 0; border: 1px solid var(--line); background: var(--panel-2); }
.q-comment-bot .q-comment-box { border-color: rgba(var(--info-rgb), .35); background: linear-gradient(180deg, rgba(var(--info-rgb), .06), var(--panel-2) 3rem); }
.q-comment-head { display: flex; align-items: center; gap: .5rem; padding: .45rem .8rem; border-bottom: 1px solid var(--line); font-size: .8rem; }
.q-comment-head b { color: var(--hi); }
.q-comment-head time, .q-edited { color: var(--faint); font-size: .74rem; }
.q-comment-tools { margin-left: auto; display: flex; gap: .2rem; }
.q-comment-tools a, .q-comment-tools button { display: inline-grid; place-items: center; width: 1.6rem; height: 1.6rem; border: 0; background: none; color: var(--faint); cursor: pointer; padding: 0; }
.q-comment-tools a:hover, .q-comment-tools button:hover { color: var(--accent); }
.q-comment-tools form { margin: 0; }
.q-comment-box > .q-md { padding: .65rem .85rem; }
.q-comment-box > .q-form { padding: .65rem; }
.q-event { position: relative; display: flex; align-items: baseline; gap: .75rem; padding: .25rem 0 .25rem .45rem; font-size: .78rem; color: var(--muted); }
.q-event b { color: var(--text); font-weight: 600; }
.q-event-dot { position: relative; z-index: 1; width: .75rem; height: .75rem; flex: none; background: var(--bg); box-shadow: inset 0 0 0 2px var(--sc, var(--line-2)); transform: rotate(45deg) translateY(.12rem); }
.q-event time { color: var(--faint); }
.q-reply { display: flex; gap: .75rem; padding-top: .6rem; border-top: 1px dashed var(--line); }
.q-reply-box { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .5rem; }
.q-reply .q-form-actions { justify-content: flex-end; }
/* l'éditeur */
.q-editor { border: 1px solid var(--line-2); background: rgba(0, 0, 0, .12); }
:root[data-theme="light"] .q-editor { background: #fff; }
.q-editor:focus-within { border-color: rgba(var(--accent-rgb), .6); box-shadow: 0 0 0 2px rgba(var(--accent-rgb), .13); }
.q-editor-tabs { display: flex; align-items: center; gap: .1rem; padding: .25rem .3rem; border-bottom: 1px solid var(--line); }
.q-editor-tabs button { display: inline-flex; align-items: center; gap: .35rem; height: 1.7rem; padding: 0 .6rem; border: 0; background: none; color: var(--muted); font-size: .76rem; cursor: pointer; }
.q-editor-tabs button.on { color: var(--accent); background: rgba(var(--accent-rgb), .1); }
.q-editor-hint { margin-left: auto; font-size: .68rem; color: var(--faint); padding-right: .4rem; }
.q-editor-attach { display: inline-grid; place-items: center; width: 1.8rem; height: 1.7rem; color: var(--muted); cursor: pointer; }
.q-editor-attach:hover { color: var(--accent); }
.q-editor textarea { border: 0 !important; box-shadow: none !important; background: transparent !important; display: block; }
.q-editor.q-drop { box-shadow: inset 0 0 0 2px var(--accent); }
.q-editor-preview { padding: .7rem .8rem; min-height: 8rem; }
.q-uploading { font-family: var(--mono); font-size: .72rem; color: var(--accent); padding: .3rem .6rem; border-top: 1px solid var(--line); }

/* le Markdown */
.q-md { color: var(--text); font-size: .9rem; line-height: 1.65; overflow-wrap: anywhere; }
.q-md > :last-child { margin-bottom: 0; }
.q-md h3, .q-md h4, .q-md h5, .q-md h6 { margin: 1.1em 0 .45em; font-weight: 600; }
.q-md h3 { font-size: 1.12rem; } .q-md h4 { font-size: 1rem; } .q-md h5, .q-md h6 { font-size: .9rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.q-md > h3:first-child, .q-md > h4:first-child { margin-top: 0; }
.q-md ul, .q-md ol { padding-left: 1.4rem; margin: 0 0 .8em; }
.q-md li { margin: .15em 0; }
.q-md li::marker { color: var(--accent); }
.q-md .q-task { list-style: none; margin-left: -1.2rem; display: flex; gap: .5rem; align-items: baseline; }
.q-check { width: .8rem; height: .8rem; flex: none; box-shadow: inset 0 0 0 1.5px var(--line-2); transform: translateY(.1rem); }
.q-task.done .q-check { background: var(--accent); box-shadow: none; }
.q-task.done { color: var(--muted); text-decoration: line-through; text-decoration-color: var(--faint); }
.q-md blockquote { margin: 0 0 .8em; padding: .4rem .9rem; border-left: 2px solid var(--line-2); color: var(--muted); background: rgba(0, 0, 0, .08); }
.q-md .q-callout-note, .q-md .q-callout-important { border-color: var(--info); } .q-md .q-callout-tip { border-color: var(--accent); }
.q-md .q-callout-warning, .q-md .q-callout-caution { border-color: var(--warn); background: repeating-linear-gradient(135deg, rgba(var(--warn-rgb), .06) 0 10px, transparent 10px 20px); }
.q-md hr { border: 0; border-top: 1px dashed var(--line-2); margin: 1.2em 0; }
.q-md img { max-width: 100%; max-height: 32rem; border: 1px solid var(--line); display: block; margin: .4rem 0; }
.q-md .q-ref { font-family: var(--mono); font-size: .9em; }
.q-pre { position: relative; margin: 0 0 .9em; padding: .8rem .9rem; overflow-x: auto; background: rgba(0, 0, 0, .28); border: 1px solid var(--line); border-left: 2px solid var(--accent); font-size: .8rem; line-height: 1.55; color: var(--hi); }
:root[data-theme="light"] .q-pre { background: #f1f6f7; }
.q-pre[data-lang]::before { content: attr(data-lang); position: absolute; top: .3rem; right: .5rem; font-size: .62rem; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); }
.q-pre code { background: none; padding: 0; color: inherit; font-size: inherit; }
.q-tablewrap { overflow-x: auto; margin: 0 0 .9em; }
.q-table { width: 100%; border-collapse: collapse; font-size: .84rem; }
.q-table th { text-align: left; font-size: .64rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); padding: .5rem .7rem; border-bottom: 1px solid var(--line-2); }
.q-table td { padding: .55rem .7rem; border-bottom: 1px solid var(--line); vertical-align: middle; }
.q-table tr:last-child td { border-bottom: 0; }
.q-table-cmds td:first-child { white-space: nowrap; }
.q-td-actions { display: flex; gap: .35rem; justify-content: flex-end; flex-wrap: wrap; }
.q-td-actions form { margin: 0; }

/* ── 11. Projets, clés, aide ───────────────────────────────────────────────────────────────────────────────────── */
.q-prows { display: flex; flex-direction: column; gap: .5rem; }
.q-prow { border: 1px solid var(--line); background: var(--panel-2); position: relative; }
.q-prow::before { content: ""; position: absolute; left: -1px; top: -1px; bottom: -1px; width: 3px; background: var(--pc); }
.q-prow.archived { opacity: .65; }
.q-prow summary { display: flex; align-items: center; gap: .65rem; padding: .6rem .8rem .6rem 1rem; cursor: pointer; list-style: none; flex-wrap: wrap; }
.q-prow summary::-webkit-details-marker { display: none; }
.q-prow summary b { color: var(--hi); }
.q-prow-n { margin-left: auto; font-size: .76rem; color: var(--muted); }
.q-prow-n b { font-family: var(--mono); color: var(--pc); }
.q-prow[open] .q-prow-edit { color: var(--accent); border-color: rgba(var(--accent-rgb), .6); }
.q-prow-body { padding: .9rem 1rem 1rem; border-top: 1px solid var(--line); }
.q-prow-danger { display: flex; gap: .6rem; flex-wrap: wrap; align-items: center; margin-top: 1rem; padding-top: .8rem; border-top: 1px dashed var(--line); }
.q-prow-danger form { margin: 0; }
.q-inline-confirm { display: flex; gap: .4rem; align-items: center; margin: 0; }
.q-inline-confirm input { height: 1.75rem; padding: 0 .5rem; border: 1px solid var(--line-2); background: rgba(0, 0, 0, .12); color: var(--hi); font-size: .76rem; width: 12rem; }
.q-newkey { border-color: rgba(var(--accent-rgb), .55); box-shadow: var(--glow); }
.q-cmd { position: relative; display: flex; align-items: stretch; border: 1px solid var(--line); background: rgba(0, 0, 0, .22); margin-bottom: .6rem; }
:root[data-theme="light"] .q-cmd { background: #f1f6f7; }
.q-cmd-lbl { display: flex; align-items: center; padding: 0 .6rem; font-size: .6rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); border-right: 1px solid var(--line); flex: none; }
.q-cmd pre { flex: 1; margin: 0; padding: .55rem .7rem; overflow-x: auto; font-size: .8rem; color: var(--hi); white-space: pre; }
.q-copy { flex: none; width: 2.3rem; border: 0; border-left: 1px solid var(--line); background: transparent; color: var(--muted); cursor: pointer; }
.q-copy:hover { color: var(--accent); background: rgba(var(--accent-rgb), .08); }
.q-copy.done, .q-btn.done { color: var(--accent); }
.q-tabs .q-seg { margin-bottom: .7rem; }
.q-flow { display: flex; align-items: stretch; gap: 0; flex-wrap: wrap; }
.q-flow-step { flex: 1 1 11rem; position: relative; padding: .9rem 1rem; border: 1px solid var(--line); background: var(--panel-2); }
.q-flow-step span { font-family: var(--mono); font-size: .7rem; color: var(--accent); letter-spacing: .1em; }
.q-flow-step b { display: block; color: var(--hi); font-size: .95rem; margin: .1rem 0 .3rem; letter-spacing: .04em; }
.q-flow-step p { margin: 0; font-size: .8rem; color: var(--muted); }
.q-flow-arrow { width: 1.6rem; flex: none; align-self: center; height: 2px; background: linear-gradient(90deg, var(--line-2), var(--accent)); position: relative; }
.q-flow-arrow::after { content: ""; position: absolute; right: -1px; top: -4px; border: 5px solid transparent; border-left-color: var(--accent); border-right: 0; }
@media (max-width: 800px) { .q-flow-arrow { display: none; } .q-flow { gap: .5rem; } }
.q-legend { display: grid; grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr)); gap: .55rem 1.2rem; }
.q-legend div { display: flex; align-items: center; gap: .7rem; font-size: .82rem; }
.q-legend .q-status { min-width: 7.2rem; justify-content: flex-start; }
.q-errbox { max-width: 30rem; margin: 3rem auto; padding: 2rem; text-align: center; }
.q-errcode { font-family: var(--mono); font-size: 4rem; color: var(--accent); line-height: 1; margin-bottom: .6rem; text-shadow: 0 0 30px rgba(var(--accent-rgb), .4); }

/* ── 12. Messages, fenêtres, toasts ────────────────────────────────────────────────────────────────────────────── */
.q-flash { display: flex; align-items: center; gap: .6rem; padding: .6rem .8rem .6rem 1rem; margin-bottom: 1rem; font-size: .86rem; border: 1px solid rgba(var(--accent-rgb), .4); background: rgba(var(--accent-rgb), .08); color: var(--hi); position: relative; }
.q-flash::before { content: ""; position: absolute; left: -1px; top: -1px; bottom: -1px; width: 3px; background: var(--accent); }
.q-flash[data-kind="err"] { border-color: rgba(var(--danger-rgb), .45); background: rgba(var(--danger-rgb), .08); }
.q-flash[data-kind="err"]::before { background: var(--danger); }
.q-flash[data-kind="warn"], .q-flash[data-kind="info"] { border-color: rgba(var(--info-rgb), .45); background: rgba(var(--info-rgb), .08); }
.q-flash[data-kind="warn"]::before, .q-flash[data-kind="info"]::before { background: var(--info); }
.q-flash-x { margin-left: auto; border: 0; background: none; color: var(--muted); cursor: pointer; display: inline-grid; padding: .1rem; }
.q-dialog { width: min(40rem, calc(100vw - 2rem)); max-height: calc(100vh - 3rem); padding: 0; border: 1px solid rgba(var(--accent-rgb), .4); background: var(--panel-solid); color: var(--text); box-shadow: var(--shadow); }
.q-dialog-xl { width: min(62rem, calc(100vw - 2rem)); }
.q-dialog::backdrop { background: rgba(5, 10, 14, .7); backdrop-filter: blur(2px); }
.q-dialog-head { display: flex; align-items: center; gap: .6rem; padding: .7rem 1rem; border-bottom: 1px solid var(--line); position: sticky; top: 0; background: var(--panel-solid); z-index: 2; }
.q-dialog-head h2 { font-size: .74rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; flex: 1; }
.q-dialog-body { padding: 1rem; }
.q-dialog-foot { display: flex; justify-content: flex-end; gap: .5rem; padding: .7rem 1rem; border-top: 1px solid var(--line); }
.q-import-preview { margin-top: .8rem; max-height: 16rem; overflow: auto; font-family: var(--mono); font-size: .76rem; border: 1px solid var(--line); padding: .5rem .7rem; white-space: pre-wrap; color: var(--hi); }
.q-toasts { position: fixed; right: 1rem; bottom: 1rem; z-index: 100; display: flex; flex-direction: column; gap: .5rem; width: min(24rem, calc(100vw - 2rem)); pointer-events: none; }
.q-toast { pointer-events: auto; position: relative; display: flex; gap: .7rem; align-items: flex-start; padding: .7rem .9rem; background: var(--panel-solid); border: 1px solid rgba(var(--sc-rgb, var(--accent-rgb)), .5); box-shadow: var(--shadow); color: var(--text); font-size: .82rem; }
.q-toast::before { content: ""; position: absolute; left: -1px; top: -1px; bottom: -1px; width: 3px; background: var(--sc, var(--accent)); }
.q-toast b { color: var(--hi); }
.q-toast a { color: var(--hi); }
.q-toast small { display: block; color: var(--muted); font-size: .72rem; margin-top: .1rem; }
.q-toast .q-av { margin-top: .1rem; }
.q-toast-x { margin-left: auto; border: 0; background: none; color: var(--faint); cursor: pointer; padding: 0; }
.q-newver { position: fixed; left: 50%; bottom: 1.2rem; transform: translateX(-50%); z-index: 99; display: flex; align-items: center; gap: .8rem; padding: .6rem .8rem .6rem 1rem; background: var(--panel-solid); border: 1px solid rgba(var(--accent-rgb), .5); box-shadow: var(--shadow); font-size: .84rem; }
.q-newver b { color: var(--accent); font-family: var(--mono); }
.q-newver .x { border: 0; background: none; color: var(--faint); cursor: pointer; }

/* le journal des modifications (de ChartOps : par jour, une ligne par changement, recherche et filtres) */
.htc-tools { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; padding-bottom: .8rem; margin-bottom: .6rem; border-bottom: 1px solid var(--line); }
.htc-q { flex: 1 1 14rem; max-width: 22rem; height: 2rem; padding: 0 .7rem; border: 1px solid var(--line-2); background: rgba(0, 0, 0, .14); color: var(--hi); outline: 0; }
.htc-q:focus { border-color: rgba(var(--accent-rgb), .6); }
.htc-kinds small { opacity: .65; font-size: .68rem; font-family: var(--mono); }
.htc-kinds button { height: 2rem; }
.htc-stat { margin-left: auto; font-size: .74rem; color: var(--muted); } .htc-stat b { color: var(--info); }
.htc-list { max-height: 64vh; overflow-y: auto; padding-right: .3rem; }
.htc-day { margin-bottom: 1.1rem; }
.htc-dayh { position: sticky; top: 0; z-index: 1; margin: 0 0 .5rem; padding: .35rem 0; font-size: .66rem; font-weight: 600; letter-spacing: .15em; text-transform: uppercase; color: var(--accent); background: var(--panel-solid); border-bottom: 1px solid var(--line); }
.htc-ver2 { display: grid; grid-template-columns: 6rem minmax(0, 1fr); gap: .2rem .8rem; padding: .45rem .5rem; }
.htc-ver2 + .htc-ver2 { border-top: 1px dashed var(--line); }
.htc-ver2.fresh { background: rgba(var(--info-rgb), .07); }
.htc-vh { display: flex; flex-direction: column; align-items: flex-start; gap: .25rem; }
.htc-vh b { font-family: var(--mono); font-size: .92rem; color: var(--hi); }
.htc-latest, .htc-fresh { font-size: .6rem; font-weight: 700; padding: .04rem .4rem; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.htc-latest { background: rgba(var(--accent-rgb), .15); color: var(--accent); }
.htc-fresh { background: rgba(var(--info-rgb), .16); color: var(--info); }
.htc-items { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.htc-items li { display: flex; gap: .5rem; align-items: baseline; padding: .22rem .35rem; cursor: pointer; font-size: .83rem; line-height: 1.5; color: var(--text); }
.htc-items li:hover { background: rgba(var(--accent-rgb), .06); }
.htc-items li .ic { flex: none; width: 1.2rem; text-align: center; font-size: .8rem; }
.htc-items li .tx { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.htc-items li.open .tx { white-space: normal; }
.htc-items li .tx b { color: var(--hi); font-weight: 600; }
.htc-items li.k-fix .tx b { color: var(--warn); } .htc-items li.k-new .tx b { color: var(--accent); }
.htc-none { text-align: center; color: var(--muted); padding: 2rem 0; }
@media (max-width: 575px) { .htc-ver2 { grid-template-columns: 1fr; } .htc-vh { flex-direction: row; } }

/* ── 13. La connexion ──────────────────────────────────────────────────────────────────────────────────────────── */
.q-bare-main { min-height: 100vh; display: grid; place-items: center; padding: 2rem 1rem; }
.q-login { width: min(26rem, 100%); }
.q-boot { font-family: var(--mono); font-size: .74rem; color: var(--muted); margin-bottom: 1rem; min-height: 5.5rem; }
.q-boot div { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.q-boot-p { color: var(--accent); }
.q-boot .ok { color: var(--accent); font-weight: 600; } .q-boot .warn { color: var(--warn); font-weight: 600; }
.q-login-box { padding: 1.4rem 1.4rem .6rem; box-shadow: var(--shadow); }
.q-login-brand { display: flex; align-items: center; gap: .9rem; margin-bottom: 1.3rem; }
.q-login-brand .q-brand { font-size: 1.35rem; display: block; }
.q-login-brand small { color: var(--muted); font-size: .78rem; }
.q-login-box p { font-size: .86rem; }

/* ── 14. Les effets (data-fx="on", sans « réduire les animations ») ────────────────────────────────────────────── */
.q-fx-scan { display: none; }
@media (prefers-reduced-motion: no-preference) {
  :root[data-fx="on"] .q-fx-scan {
    display: block; position: fixed; inset: 0; z-index: 90; pointer-events: none; mix-blend-mode: screen;
    background: repeating-linear-gradient(0deg, rgba(255, 255, 255, .012) 0 1px, transparent 1px 3px);
  }
  :root[data-fx="on"][data-theme="light"] .q-fx-scan { mix-blend-mode: multiply; background: repeating-linear-gradient(0deg, rgba(0, 40, 50, .018) 0 1px, transparent 1px 3px); }
  /* (plus de bande de balayage qui traverse la page : jolie, mais lassante à la longue) */
  /* l'arrivée de la page : chaque bloc à son tour */
  :root[data-fx="on"] .q-main > * { animation: q-arrive .45s cubic-bezier(.2, .8, .2, 1) both; }
  :root[data-fx="on"] .q-main > :nth-child(2) { animation-delay: .05s; } :root[data-fx="on"] .q-main > :nth-child(3) { animation-delay: .1s; }
  :root[data-fx="on"] .q-main > :nth-child(4) { animation-delay: .15s; } :root[data-fx="on"] .q-main > :nth-child(5) { animation-delay: .2s; }
  :root[data-fx="on"] .q-main > :nth-child(n+6) { animation-delay: .25s; }
  :root[data-fx="on"] .q-stat { animation: q-arrive .5s cubic-bezier(.2, .8, .2, 1) both; }
  :root[data-fx="on"] .q-stat:nth-child(2) { animation-delay: .06s; } :root[data-fx="on"] .q-stat:nth-child(3) { animation-delay: .12s; }
  :root[data-fx="on"] .q-stat:nth-child(4) { animation-delay: .18s; } :root[data-fx="on"] .q-stat:nth-child(5) { animation-delay: .24s; }
  :root[data-fx="on"] .q-segbar i { animation: q-grow .8s cubic-bezier(.2, .8, .2, 1) both .2s; }
  :root[data-fx="on"] .q-card { animation: q-arrive .35s ease-out both; }
  /* le radar reste immobile (plus de faisceau qui tourne) */
  /* les choses vivantes : en cours (le point bat), urgente (les barres clignotent), la liaison */
  :root[data-fx="on"] .q-status[data-s="en_cours"] i, :root[data-fx="on"] .q-col[data-s="en_cours"] .q-col-head i { animation: q-pulse 1.6s ease-in-out infinite; }
  :root[data-fx="on"] .q-prio[data-p="urgente"] .q-bars i.on { animation: q-blink 1.1s steps(2, jump-none) infinite; }
  :root[data-fx="on"] .q-link.on i { animation: q-beacon 2.4s ease-out infinite; }
  :root[data-fx="on"] .q-capture::before { animation: q-pulse 2.6s ease-in-out infinite; }
  /* les boutons : un reflet qui passe */
  :root[data-fx="on"] .q-btn::after { content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .14), transparent); transform: skewX(-18deg); pointer-events: none; }
  :root[data-fx="on"] .q-btn:hover::after { animation: q-sheen .7s ease-out; }
  /* la marque : un petit décalage chromatique au survol */
  :root[data-fx="on"] .q-brandlink:hover .q-brand, :root[data-fx="on"] .q-login-brand:hover .q-brand { animation: q-glitch .5s steps(2, jump-none) 1; }
  :root[data-fx="on"] .q-panel:hover::before { background-size: 16px 2px, 2px 16px, 16px 2px, 2px 16px; }
  /* la séquence de démarrage (connexion) */
  :root[data-fx="on"] .q-boot div { animation: q-type .5s steps(28, end) both; animation-delay: var(--d, 0s); }
  :root[data-fx="on"] .q-boot div:last-child::after { content: "▌"; color: var(--accent); animation: q-blink 1s steps(2, jump-none) infinite; }
  :root[data-fx="on"] .q-login-box { animation: q-arrive .6s cubic-bezier(.2, .8, .2, 1) both .75s; }
  :root[data-fx="on"] .q-toast { animation: q-toast-in .45s cubic-bezier(.2, .8, .2, 1) both; }
  :root[data-fx="on"] .q-toast.out { animation: q-toast-out .3s ease-in both; }
  :root[data-fx="on"] .q-dialog[open] { animation: q-arrive .3s cubic-bezier(.2, .8, .2, 1) both; }
}
@keyframes q-arrive { from { opacity: .35; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes q-grow { from { transform: scaleX(0); } }
@keyframes q-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }
@keyframes q-blink { 0% { opacity: 1; } 100% { opacity: .25; } }
@keyframes q-beacon { 0% { box-shadow: 0 0 0 0 rgba(var(--accent-rgb), .6); } 70%, 100% { box-shadow: 0 0 0 7px rgba(var(--accent-rgb), 0); } }
@keyframes q-sheen { to { left: 130%; } }
@keyframes q-glitch { 0% { text-shadow: -2px 0 rgba(240, 128, 134, .8), 2px 0 rgba(80, 165, 213, .8); transform: translateX(1px); } 50% { text-shadow: 2px 0 rgba(240, 128, 134, .8), -2px 0 rgba(77, 224, 176, .8); transform: translateX(-1px); } 100% { text-shadow: none; transform: none; } }
@keyframes q-type { from { max-width: 0; opacity: 1; } to { max-width: 100%; opacity: 1; } }
@keyframes q-toast-in { from { opacity: 0; transform: translateX(30px); } to { opacity: 1; transform: none; } }
@keyframes q-toast-out { to { opacity: 0; transform: translateX(30px); } }
@keyframes q-drop { 0% { box-shadow: 0 0 0 2px var(--accent), var(--glow); } 100% { box-shadow: inset 2px 0 0 var(--prc); } }
@keyframes q-flash-row { 0% { background: rgba(var(--accent-rgb), .16); } 100% { background: transparent; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

/* ── 15. Les listes à la GitOps (un projet, les demandes) : une ligne par demande, le détail dessous ───────────── */
.q-bar { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin-bottom: .8rem; }
.q-bar .q-seg b, .q-seg a b { font-family: var(--mono); font-weight: 600; margin-left: .2rem; }
.q-bar-form { margin: 0 0 0 auto; display: flex; gap: .5rem; flex-wrap: wrap; }
.q-bar-form select { height: 2.1rem; padding: 0 .6rem; border: 1px solid var(--line-2); background: rgba(0, 0, 0, .14); color: var(--hi); font-size: .82rem; }
:root[data-theme="light"] .q-bar-form select { background: #fff; }
.q-bar-form .q-search-inline { min-width: 15rem; height: 2.1rem; }
.q-lines { padding: 0; }
.q-line { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .85rem; padding: .7rem 1rem; border-bottom: 1px solid var(--line); color: var(--text); }
.q-line:last-child { border-bottom: 0; }
.q-line:hover { background: rgba(var(--sc-rgb), .05); box-shadow: inset 2px 0 0 var(--sc); color: var(--text); }
.q-line-state { display: grid; place-items: center; width: 1.7rem; height: 1.7rem; color: var(--sc); background: rgba(var(--sc-rgb), .1); clip-path: var(--cut); }
.q-line-main { display: flex; flex-direction: column; min-width: 0; }
.q-line-title { color: var(--hi); font-size: .92rem; font-weight: 500; overflow-wrap: anywhere; }
.q-line:hover .q-line-title { color: var(--accent); }
.q-line-proj { display: inline-flex; align-items: center; gap: .3rem; color: var(--muted); font-weight: 400; }
.q-line-proj i { width: .45rem; height: .45rem; background: var(--pc); display: inline-block; }
.q-line-main small { color: var(--muted); font-size: .74rem; margin-top: .1rem; }
.q-line-main small b { color: var(--text); font-weight: 600; }
.q-line-right { display: flex; align-items: center; gap: .8rem; }
.q-line-meta { display: flex; gap: .6rem; font-size: .74rem; color: var(--muted); }
.q-line-meta span { display: inline-flex; align-items: center; gap: .2rem; }
.q-line-meta .q-ic { width: .85rem; height: .85rem; }
.q-line .q-status { min-width: 6.6rem; }
.q-quickline { display: flex; align-items: center; gap: .6rem; padding: .55rem 1rem; border-bottom: 1px dashed var(--line-2); color: var(--muted); }
.q-quickline input { flex: 1; min-width: 0; height: 1.9rem; border: 0; outline: 0; background: transparent; color: var(--hi); font-size: .88rem; }
.q-quickline:focus-within { color: var(--accent); background: rgba(var(--accent-rgb), .04); }
.q-panel-list .q-line { padding-left: 1rem; }
@media (max-width: 720px) {
  .q-line { grid-template-columns: auto minmax(0, 1fr); }
  .q-line-right { grid-column: 2; justify-content: flex-start; flex-wrap: wrap; gap: .6rem; }
  .q-bar-form { margin-left: 0; width: 100%; } .q-bar-form .q-search-inline { flex: 1; min-width: 0; }
}