/* Walter Moon — design system.
   Helvetica family only: Helvetica Neue / Helvetica where installed (Apple: Light 300, Regular 400, Medium 500,
   Bold 700), else "WM Heros" (TeX Gyre Heros, a Helvetica-derived free font served from /static, Regular and Bold).
   Weights by role: titles and key figures Bold, labels / navigation / buttons Medium, text Regular, display Light.
   Themes: dark by default, light on request (html[data-theme]). Brand blue #007BFA.
   Shapes: right angles everywhere (Jules, 04/10: « enlève les arrondis, des angles droits, un peu rétro »),
   no decorative stripes, secondary details shown on hover (tooltips, app.js). */

@font-face{font-family:"WM Heros";src:url("fonts/heros-regular.5939a7b231a6.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"WM Heros";src:url("fonts/heros-bold.09619e1ece09.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"WM Heros";src:url("fonts/heros-italic.dff9ea36210b.woff2") format("woff2");font-weight:400;font-style:italic;font-display:swap}

:root,[data-theme="dark"]{
  color-scheme:dark;
  --font:"Helvetica Neue","WM Heros",Helvetica,sans-serif;
  --bg:#0B0B0C;--panel:#141415;--panel-2:#1C1C1E;--sunk:#060607;
  --line:#28282B;--line-2:#3A3A3E;
  --ink:#F4F1EA;--ink-2:#D6D2CA;--muted:#8E8A84;
  /* --blue: the brand blue (logo, strokes, charts); --fill: the same blue, one step deeper, behind white
     text (buttons, hero boxes, counters) so small white text stays readable (≥ 4.5:1) */
  --blue:#007BFA;--fill:#0070E6;--blue-ink:#5AAAFF;--on-blue:#FFFFFF;--blue-soft:rgba(0,123,250,.16);
  --ok:#35CF7E;--ok-soft:rgba(53,207,126,.14);
  --warn:#FFB224;--warn-soft:rgba(255,178,36,.15);
  --ko:#FF5A4F;--ko-soft:rgba(255,90,79,.15);
  --shadow:6px 6px 0 rgba(0,0,0,.55);--lift:5px 5px 0 var(--blue);
  --maxw:1240px;--r:0;--r-sm:0;
  /* --w-medium: labels, navigation, tabs, buttons, badges, table headers (every medium role of this sheet). Where
     Helvetica Neue is missing (Windows, Android), « WM Heros » has no Medium and 500 shows as 400: if the
     hierarchy looks flat there, this one value decides for everyone (700), POL-01 */
  --w-light:300;--w-regular:400;--w-medium:500;--w-bold:700;
}
[data-theme="light"]{
  color-scheme:light;
  --bg:#F2EFE8;--panel:#FBFAF6;--panel-2:#FFFFFF;--sunk:#E8E4DA;
  --line:#DCD7CB;--line-2:#C6C0B2;
  --ink:#0B0B0C;--ink-2:#2B2B2E;--muted:#66625A;
  /* states: >= 4.5:1 as 12 px text on their -soft tint over --bg, --panel and --panel-2 (A11Y-01, 05/10/2026) */
  --blue:#007BFA;--fill:#0070E6;--blue-ink:#0058BD;--on-blue:#FFFFFF;--blue-soft:rgba(0,123,250,.10);
  --ok:#06683A;--ok-soft:rgba(6,104,58,.10);
  --warn:#7E4900;--warn-soft:rgba(126,73,0,.11);
  --ko:#B42318;--ko-soft:rgba(180,35,24,.09);
  --shadow:6px 6px 0 rgba(40,32,18,.14);--lift:5px 5px 0 var(--blue);
}

/* ------------------------------------------------------------------ base */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;min-height:100vh;background:var(--bg);color:var(--ink);font:400 15px/1.5 var(--font);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;
  font-feature-settings:"kern","liga"}
a{color:var(--blue-ink);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
abbr[title]{text-decoration:underline dotted;text-decoration-thickness:1px;text-underline-offset:3px;cursor:help}
ul{list-style-type:square}ul>li::marker{color:var(--blue)}  /* right angles, bullets too */
h1,h2,h3,h4{font-weight:var(--w-medium);letter-spacing:-.02em;margin:0;line-height:1.15;overflow-wrap:anywhere}
h3{font-size:17px}
p{margin:0 0 10px}
b,strong{font-weight:var(--w-medium)}
hr{border:0;height:1px;background:var(--line);margin:18px 0}
::selection{background:var(--fill);color:var(--on-blue)}
:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
img,svg{max-width:100%}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.i{width:1.2em;height:1.2em;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;
  vertical-align:-.22em;flex:none}
.skip{position:absolute;left:-9999px;top:8px;z-index:100;background:var(--fill);color:var(--on-blue);padding:8px 14px;}
.skip:focus{left:12px}
.muted{color:var(--muted)}.small{font-size:13px}.tiny{font-size:12px}
.nowrap{white-space:nowrap}.right{text-align:right}.center{text-align:center}
.hidden{display:none!important}
.num,td.num,th.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.tabular{font-variant-numeric:tabular-nums}
.pos{color:var(--ok)}.neg{color:var(--ko)}
.ok{color:var(--ok);font-weight:var(--w-medium)}.ko{color:var(--ko)}.warn{color:var(--warn)}
.label{font-size:12px;font-weight:var(--w-medium);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
/* anchors land below the sticky top bar (and below the messages when there are some, NAV-05) */
html{scroll-padding-top:80px}
html:has(.msgs .msg){scroll-padding-top:150px}

/* ------------------------------------------------------------------ top bar
   [logo] [app] ··· [search] [bell] [apps] [avatar], same order on every page; the theme switch is in the avatar menu */
.top{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:6px;height:64px;padding:0 22px;
  background:var(--bg);border-bottom:1px solid var(--line)}
@supports (backdrop-filter:blur(8px)){.top{background:color-mix(in srgb,var(--bg) 86%,transparent);backdrop-filter:blur(12px) saturate(1.3)}}
.top-brand{display:flex;align-items:center;min-width:0;color:var(--ink);padding:8px 4px;}
.top-brand:hover{text-decoration:none}
.wm-logo{display:block;height:24px;width:auto;color:inherit}
.wm-logo .wm-moon{fill:currentColor}
.top-app{display:flex;align-items:center;gap:9px;margin-left:14px;padding:6px 14px 6px 16px;border-left:1px solid var(--line);
  color:var(--ink);font-weight:var(--w-medium);font-size:15px}
.top-app .i{color:var(--blue)}
.top-app:hover{text-decoration:none;color:var(--blue-ink)}
.top-fill{flex:1}
.top-btn{display:grid;place-items:center;width:42px;height:42px;border:1px solid transparent;
  background:transparent;color:var(--ink);cursor:pointer;padding:0;font:inherit}
.top-btn:hover{background:var(--panel-2);border-color:var(--line)}
.top-btn .i{width:20px;height:20px}
.theme-form{margin:0;display:flex}
[data-theme="dark"] .to-dark,[data-theme="light"] .to-light{display:none}
/* « Vue simplifiée » / « Vue complète » (avatar menu): only the useful button, from html[data-view] */
.view-form{margin:0;display:flex}
[data-view="simple"] .to-simple,html:not([data-view="simple"]) .to-full{display:none}
.avatar{display:grid;place-items:center;width:40px;height:40px;background:var(--fill);color:var(--on-blue);
  font-weight:var(--w-medium);font-size:13px;letter-spacing:.04em;cursor:pointer;margin-left:6px;user-select:none}
summary{list-style:none;cursor:pointer}summary::-webkit-details-marker{display:none}
.pop{position:relative}
.pop-panel{position:absolute;right:0;top:calc(100% + 10px);background:var(--panel);border:1px solid var(--line);
  padding:10px;box-shadow:var(--shadow);z-index:40;animation:pop .14s ease-out}
@keyframes pop{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.apps-panel{display:grid;grid-template-columns:repeat(3,104px);gap:4px}
.apps-panel a{display:flex;flex-direction:column;align-items:center;gap:7px;padding:14px 6px 12px;
  color:var(--ink);font-size:12px;font-weight:var(--w-medium);text-align:center;line-height:1.2}
.apps-panel a .i{width:24px;height:24px;color:var(--blue)}
.apps-panel a:hover{background:var(--panel-2);text-decoration:none}
.apps-panel a.on{background:var(--blue-soft)}
.apps-panel .home-link{grid-column:1/-1;flex-direction:row;justify-content:center;padding:10px;border-bottom:1px solid var(--line);
  margin-bottom:4px}
/* menus (avatar, « … » for rare actions, POL-02): one action per line, words only */
.menu{display:flex;flex-direction:column;min-width:200px;padding:6px}
.menu form{display:contents;margin:0}
.menu a,.menu button{display:flex;align-items:center;justify-content:flex-start;width:100%;min-height:40px;padding:0 12px;
  border:0;background:transparent;color:var(--ink);font:var(--w-medium) 14px/1.2 var(--font);letter-spacing:0;text-align:left;
  white-space:nowrap;cursor:pointer;transition:background .12s}
.menu a:hover,.menu button:hover,.menu a:focus-visible,.menu button:focus-visible{background:var(--panel-2);
  border-color:transparent;color:var(--ink);text-decoration:none}
.menu a.ko,.menu button.ko{color:var(--ko)}
.menu .sep{height:1px;margin:6px 0;background:var(--line)}
.more-actions>summary{list-style:none}
/* avatar menu: who I am, then « Mon compte » · theme · « Se déconnecter » */
.me-panel{min-width:260px}
.me-who{display:flex;flex-direction:column;gap:2px;min-width:0;padding:10px 12px 12px;margin-bottom:6px;
  border-bottom:1px solid var(--line)}
.me-who .me-name{font-weight:var(--w-medium);font-size:16px}
.me-who .muted{overflow-wrap:anywhere}
/* theme picker (« Mon compte »): the current theme is marked by the page's own data-theme (also after a switch) */
.theme-pick{gap:8px;flex-wrap:wrap}
[data-theme="dark"] .theme-pick .pick-dark,[data-theme="light"] .theme-pick .pick-light{border-color:var(--blue);
  background:var(--blue-soft);color:var(--blue-ink)}

/* ------------------------------------------------------------------ page head + tabs */
.head{max-width:var(--maxw);margin:0 auto;padding:30px 22px 0}
.head:empty{display:none}
.head>header,.ph{display:flex;align-items:flex-end;justify-content:space-between;gap:12px 20px;flex-wrap:wrap;
  padding:0 0 16px;background:none;border:0}
.head h1{font-size:36px;line-height:1.02;letter-spacing:-.04em}
.head>header p,.ph p{margin:8px 0 0;color:var(--muted);font-size:15px;max-width:70ch}
.ph-actions,.head>header .actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:0}
.head>nav,nav.tabs{display:flex;gap:2px;overflow-x:auto;border-bottom:1px solid var(--line);scrollbar-width:none;
  padding:0;background:none}
.head>nav::-webkit-scrollbar,nav.tabs::-webkit-scrollbar{display:none}
.head>nav a,nav.tabs a{position:relative;padding:12px 14px 13px;color:var(--muted);font-weight:var(--w-medium);font-size:14px;
  white-space:nowrap;border:0;}
.head>nav a:hover,nav.tabs a:hover{color:var(--ink);text-decoration:none;background:var(--panel)}
.head>nav a.on,nav.tabs a.on{color:var(--ink)}
.head>nav a.on::after,nav.tabs a.on::after{content:"";position:absolute;left:12px;right:12px;bottom:-1px;height:3px;
  background:var(--blue)}
.back{display:inline-flex;align-items:center;gap:6px;color:var(--muted);font-weight:var(--w-medium);font-size:13px;margin-bottom:8px}
.back:hover{color:var(--ink);text-decoration:none}

/* ------------------------------------------------------------------ main */
.main{max-width:var(--maxw);margin:0 auto;padding:22px 22px 80px}
.main>h1{font-size:28px;letter-spacing:-.03em;margin:0 0 16px}
.section-title{display:flex;align-items:center;gap:12px;margin:26px 0 12px;font-size:12px;font-weight:var(--w-medium);
  letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}

/* ------------------------------------------------------------------ messages
   Sticky under the top bar (NAV-05): a confirmation stays in sight after a jump to an anchor or on a long page.
   Opaque (the tint is laid over the panel colour); « Fermer » added by app.js; successes fade out after 6 s. */
.msgs{display:flex;flex-direction:column;gap:8px;margin-bottom:16px}
.main>.msgs{position:sticky;top:72px;z-index:25}
.msg{display:flex;gap:10px;align-items:flex-start;padding:12px 16px;border:1px solid var(--line);
  background:var(--panel);font-weight:var(--w-medium);font-size:14px;margin-bottom:10px}
.msgs .msg{margin:0}
.msg::before{content:"";flex:none;width:8px;height:8px;margin-top:6px;background:var(--blue)}
.msg>.msg-t{flex:1;min-width:0}
.msg.success{border-color:color-mix(in srgb,var(--ok) 40%,var(--line));background:linear-gradient(var(--ok-soft),var(--ok-soft)),var(--panel);color:var(--ink)}
.msg.success::before{background:var(--ok)}
.msg.error{border-color:color-mix(in srgb,var(--ko) 45%,var(--line));background:linear-gradient(var(--ko-soft),var(--ko-soft)),var(--panel);color:var(--ink)}
.msg.error::before{background:var(--ko)}
.msg.warning{border-color:color-mix(in srgb,var(--warn) 45%,var(--line));background:linear-gradient(var(--warn-soft),var(--warn-soft)),var(--panel);color:var(--ink)}
.msg.warning::before{background:var(--warn)}
.msgs .msg-x{flex:none;width:32px;min-height:32px;margin:-6px -10px -6px 0;padding:0;border:0;background:transparent;
  color:var(--muted)}
.msgs .msg-x:hover{background:color-mix(in srgb,var(--ink) 8%,transparent);color:var(--ink);border-color:transparent}
.msgs .msg-x .i{width:16px;height:16px}
.msg.is-leaving{opacity:0;transform:translateY(-4px);transition:.3s}

/* ------------------------------------------------------------------ layout helpers */
.grid{display:grid;gap:16px}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.spread{display:flex;gap:10px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.stack>*+*{margin-top:12px}
@media (max-width:900px){.g3,.g4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:700px){.g2,.g3,.g4,.grid2{grid-template-columns:1fr}}

/* ------------------------------------------------------------------ cards */
.card{background:var(--panel);border:1px solid var(--line);padding:20px 22px;margin-bottom:16px;min-width:0}
.card>h2,.card-title{display:flex;align-items:center;gap:12px;margin:0 0 14px;font-size:12px;font-weight:var(--w-medium);
  letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.card>h2 a,.card-title a{text-transform:none;letter-spacing:0;font-size:13px;margin-left:auto}
.card.flush{padding:0;overflow:hidden}
.card.flush>h2{padding:18px 22px 0}

/* ------------------------------------------------------------------ stats (KPI boxes) */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px;margin-bottom:16px}
.stat{position:relative;overflow:hidden;display:block;background:var(--panel);border:1px solid var(--line);
  padding:18px 20px 20px;color:var(--ink);min-width:0}
a.stat:hover{text-decoration:none;border-color:var(--blue);transform:translate(-3px,-3px);box-shadow:var(--lift)}
.stat-label{font-size:12px;font-weight:var(--w-medium);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.stat-value{font-size:34px;font-weight:var(--w-medium);letter-spacing:-.04em;line-height:1.05;margin-top:10px;
  font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stat-sub{font-size:13px;color:var(--muted);margin-top:6px}
.stat.good .stat-value{color:var(--ok)}.stat.bad .stat-value{color:var(--ko)}.stat.warn .stat-value{color:var(--warn)}
/* hero: the key figure of the screen, on the brand fill */
.stat.hero{background:var(--fill);border-color:var(--fill);color:var(--on-blue)}
.stat.hero .stat-label,.stat.hero .stat-sub{color:var(--on-blue)}
a.stat.hero:hover{border-color:var(--blue)}

/* ------------------------------------------------------------------ tables */
.scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
table{border-collapse:collapse;width:100%;font-size:14px}
th,td{padding:11px 12px;border-bottom:1px solid var(--line);text-align:left;vertical-align:middle}
th{font-size:12px;font-weight:var(--w-medium);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);white-space:nowrap}
thead th{border-bottom-color:var(--line-2)}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover td{background:color-mix(in srgb,var(--panel-2) 70%,transparent)}
tr[data-href]{cursor:pointer}
td.c,th.c{text-align:center}
tfoot td{font-weight:var(--w-medium);border-top:1px solid var(--line-2);border-bottom:0}
.card>table,.card>.scroll{margin:0 -22px -20px;width:calc(100% + 44px)}
.card>table th:first-child,.card>table td:first-child,.card>.scroll th:first-child,.card>.scroll td:first-child{padding-left:22px}
.card>table th:last-child,.card>table td:last-child,.card>.scroll th:last-child,.card>.scroll td:last-child{padding-right:22px}
.card>h2+table,.card>h2+.scroll{margin-top:-4px}
.t-dense th,.t-dense td{padding:7px 10px}
.mod td{background:var(--panel-2);font-size:12px;font-weight:var(--w-medium);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
tr.total td{font-weight:var(--w-medium);background:var(--panel-2)}
.cell-main{font-weight:var(--w-medium);color:var(--ink)}
.cell-sub{display:block;font-size:12px;color:var(--muted);margin-top:2px}

/* ------------------------------------------------------------------ badges and chips */
.badge{display:inline-flex;align-items:center;gap:5px;padding:3px 10px;font-size:12px;
  font-weight:var(--w-medium);line-height:1.35;background:var(--panel-2);color:var(--ink-2);border:1px solid var(--line);white-space:nowrap}
.badge.blue{background:var(--blue-soft);color:var(--blue-ink);border-color:transparent}
.badge.ok{background:var(--ok-soft);color:var(--ok);border-color:transparent}
.badge.warn{background:var(--warn-soft);color:var(--warn);border-color:transparent}
.badge.ko{background:var(--ko-soft);color:var(--ko);border-color:transparent}
.badge.solid{background:var(--fill);color:var(--on-blue);border-color:var(--fill)}
.badge .dot{width:7px;height:7px;background:currentColor}
.badge .i{width:13px;height:13px}
.count{display:inline-grid;place-items:center;min-width:22px;height:22px;padding:0 7px;
  background:var(--fill);color:var(--on-blue);font-size:12px;font-weight:var(--w-medium)}
.count.ko{background:var(--ko);color:var(--bg)}

/* ------------------------------------------------------------------ buttons */
button,.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:40px;padding:0 18px;
  border:1px solid var(--fill);background:var(--fill);color:var(--on-blue);font:var(--w-medium) 14px/1 var(--font);
  letter-spacing:.01em;cursor:pointer;text-decoration:none;white-space:nowrap;position:relative;overflow:hidden;
  transition:background .15s,border-color .15s,transform .08s}
button:hover,.btn:hover{background:var(--blue);border-color:var(--blue);text-decoration:none;color:var(--on-blue)}
button:active,.btn:active{transform:translateY(1px)}
button:disabled,.btn.disabled{opacity:.45;cursor:not-allowed;pointer-events:none}
button.ghost,.btn.ghost{background:transparent;color:var(--ink);border-color:var(--line-2)}
button.ghost:hover,.btn.ghost:hover{background:var(--panel-2);border-color:var(--ink);color:var(--ink)}
button.danger,.btn.danger{background:transparent;color:var(--ko);border-color:color-mix(in srgb,var(--ko) 55%,transparent)}
button.danger:hover,.btn.danger:hover{background:var(--ko);border-color:var(--ko);color:var(--bg)}
button.quiet,.btn.quiet{background:transparent;border-color:transparent;color:var(--blue-ink);padding:0 10px}
button.quiet:hover,.btn.quiet:hover{background:var(--blue-soft);color:var(--blue-ink)}
button.sm,.btn.sm{min-height:32px;padding:0 13px;font-size:13px}
button.lg,.btn.lg{min-height:50px;padding:0 26px;font-size:16px}
.btn.block,button.block{display:flex;width:100%;margin:8px 0}
.btn.icon,button.icon{width:40px;padding:0}
.is-busy{opacity:.6;pointer-events:none}

/* ------------------------------------------------------------------ forms */
input[type=text],input[type=email],input[type=password],input[type=search],input[type=number],input[type=date],
input[type=datetime-local],input[type=month],input[type=url],input[type=tel],input[type=file],select,textarea{
  font:inherit;font-size:15px;color:var(--ink);background:var(--sunk);border:1px solid var(--line);
  padding:9px 12px;min-height:42px;max-width:100%;transition:border-color .15s,background .15s}
[data-theme="light"] input:not([type=checkbox]):not([type=radio]),[data-theme="light"] select,[data-theme="light"] textarea{background-color:var(--panel-2)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-soft)}
input[type=file]{padding:8px;min-height:auto}
input[type=checkbox],input[type=radio]{-webkit-appearance:none;appearance:none;display:inline-grid;place-content:center;flex:none;
  width:18px;height:18px;vertical-align:-4px;border:1.5px solid var(--muted);background:var(--panel-2);cursor:pointer;
  transition:border-color .12s,background .12s}
input[type=checkbox]:hover,input[type=radio]:hover,input[type=checkbox]:checked,input[type=radio]:checked{border-color:var(--blue)}
input[type=checkbox]:checked{background:var(--blue)}
input[type=checkbox]::before,input[type=radio]::before{content:"";width:10px;height:10px;transform:scale(0);transition:transform .1s}
input[type=checkbox]::before{background:var(--on-blue);clip-path:polygon(14% 44%,0 65%,50% 100%,100% 16%,80% 0,43% 62%)}
input[type=radio]::before{width:8px;height:8px;background:var(--blue)}
input[type=checkbox]:checked::before,input[type=radio]:checked::before{transform:scale(1)}
input[type=checkbox]:indeterminate{border-color:var(--blue)}
input[type=checkbox]:indeterminate::before{height:2px;clip-path:none;background:var(--blue);transform:scale(1)}
input[type=checkbox]:focus-visible,input[type=radio]:focus-visible{outline:2px solid var(--blue);outline-offset:2px;box-shadow:none}
input[type=checkbox]:disabled,input[type=radio]:disabled{opacity:.45;cursor:not-allowed}
textarea{width:100%;min-height:110px;resize:vertical;line-height:1.45}
select{appearance:none;-webkit-appearance:none;padding-right:36px;
  background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);
  background-position:calc(100% - 18px) 50%,calc(100% - 13px) 50%;background-size:5px 5px;background-repeat:no-repeat}
select[multiple]{background-image:none;padding-right:12px;min-height:120px}
label{font-size:13px;font-weight:var(--w-medium);color:var(--ink-2)}
.form{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px 18px}
.form .f,.f{display:flex;flex-direction:column;gap:6px;min-width:0}
.form .f.wide,.f.wide{grid-column:1/-1}
.f input:not([type=checkbox]):not([type=radio]),.f select,.f textarea{width:100%}
.f.check{flex-direction:row;align-items:center;gap:10px}
.f.check label{font-weight:400;color:var(--ink)}
.help{font-size:12px;color:var(--muted);font-weight:400}
.err,.errorlist{color:var(--ko);font-size:13px;font-weight:var(--w-medium)}
.errorlist{list-style:none;padding:0;margin:4px 0}
.actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:18px}
.filters{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end;margin-bottom:16px}
.filters>*{max-width:100%;min-width:0}
.filters label{display:flex;flex-direction:column;gap:5px;font-size:12px}
.filters input:not([type=checkbox]):not([type=radio]),.filters select{min-height:42px}
.filters .f.check{align-self:center;min-height:42px}
.filters>button:not(.sm),.filters>.btn:not(.sm){min-height:42px}
.search{position:relative;flex:1;min-width:220px;max-width:420px}
.search input{width:100%;padding-left:40px;}
.search .i{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--muted);pointer-events:none}
.bar{position:sticky;bottom:12px;z-index:5;display:flex;gap:10px;align-items:center;flex-wrap:wrap;padding:12px 16px;margin-top:16px;
  background:var(--panel);border:1px solid var(--line);box-shadow:var(--shadow)}
.bar input[type=text]{flex:1;min-width:220px}
.inline{display:inline}
form.inline{display:inline-flex;gap:6px;align-items:center;margin:0}

/* ------------------------------------------------------------------ home: app tiles */
.hello{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap;margin:6px 0 28px}
.hello h1{font-size:clamp(34px,5.4vw,58px);line-height:.98;letter-spacing:-.045em}
.hello h1 em{font-style:normal;color:var(--blue)}
.hello-date{display:flex;align-items:center;gap:10px;margin-bottom:14px;color:var(--muted);font-weight:var(--w-medium);font-size:13px;
  letter-spacing:.08em;text-transform:uppercase}
.moon{width:18px;height:18px;flex:none}
.moon .disc{fill:var(--panel-2);stroke:var(--line-2);stroke-width:1}
.moon .lit{fill:var(--blue)}
/* what is waiting for me: one labelled chip per app (the tiles carry no second counter) */
.todo{display:flex;gap:8px;flex-wrap:wrap}
.todo a{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:8px 14px 8px 8px;background:var(--panel);
  border:1px solid var(--line);color:var(--ink);font-weight:var(--w-medium);font-size:13px;transition:border-color .15s,transform .15s}
.todo a:hover{border-color:var(--blue);text-decoration:none;transform:translate(-2px,-2px);box-shadow:3px 3px 0 var(--blue)}
.apps-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px}
.app-tile{--d:0;position:relative;display:flex;flex-direction:column;min-height:172px;padding:22px 22px 20px;
  background:var(--panel);border:1px solid var(--line);color:var(--ink);overflow:hidden;isolation:isolate;
  transition:border-color .2s,transform .2s,background .2s;animation:rise .4s cubic-bezier(.2,.7,.2,1) both;
  animation-delay:calc(var(--d) * 30ms)}
/* the cascade plays on the first home page of a session only (early.js sets .no-intro from sessionStorage, NAV-08) */
.no-intro .app-tile{animation:none}
.app-tile:hover{text-decoration:none;border-color:var(--blue);transform:translate(-3px,-3px);box-shadow:var(--lift);background:var(--panel-2)}
.app-ic{display:grid;place-items:center;width:52px;height:52px;border:1.5px solid var(--line-2);color:var(--blue);
  transition:.2s}
.app-ic .i{width:24px;height:24px;stroke-width:1.9}
.app-tile:hover .app-ic{background:var(--blue);border-color:var(--blue);color:var(--on-blue)}
.app-name{margin-top:auto;padding-top:22px;font-size:23px;font-weight:var(--w-medium);letter-spacing:-.03em;line-height:1.1}
.app-stat{margin-top:6px;color:var(--muted);font-size:14px;min-height:21px}
.app-go{position:absolute;right:22px;bottom:20px;color:var(--blue);opacity:0;transform:translateX(-8px);transition:.25s}
.app-tile:hover .app-go{opacity:1;transform:none}
@keyframes rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

/* ------------------------------------------------------------------ empty states */
.empty{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:10px;padding:44px 20px;
  color:var(--muted);border:1px dashed var(--line-2);background:transparent}
.empty .wm-comet{width:92px;opacity:.9}
.empty b{color:var(--ink);font-size:17px}
.empty .btn{margin-top:6px}
.empty.compact{padding:26px 14px;gap:8px;margin-bottom:16px}
.empty.compact .wm-comet{width:64px}
.empty.compact b{font-size:15px}

/* ------------------------------------------------------------------ timeline (histories, exchanges, lifecycles) */
.timeline{list-style:none;margin:0;padding:0 0 0 22px;position:relative}
.timeline::before{content:"";position:absolute;left:6px;top:6px;bottom:6px;width:2px;background:var(--line)}
.timeline li{position:relative;padding:0 0 18px}
.timeline li::before{content:"";position:absolute;left:-21px;top:5px;width:12px;height:12px;background:var(--bg);
  border:2px solid var(--blue)}
.timeline li.muted::before{border-color:var(--line-2)}
.timeline .when{font-size:12px;color:var(--muted);font-weight:var(--w-medium);letter-spacing:.04em}
.timeline .what{font-weight:var(--w-medium)}

/* ------------------------------------------------------------------ board (pipeline, projects) */
.board{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(250px,1fr);gap:14px;overflow-x:auto;padding-bottom:6px}
.col{background:var(--sunk);border:1px solid var(--line);padding:12px;min-height:120px}
.col-head{display:flex;justify-content:space-between;align-items:center;padding:4px 6px 12px;font-size:12px;font-weight:var(--w-medium);
  letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.item-card{display:block;background:var(--panel);border:1px solid var(--line);padding:12px 14px;margin-bottom:8px;color:var(--ink);
  transition:border-color .15s,transform .15s}
a.item-card:hover{border-color:var(--blue);text-decoration:none;transform:translate(-2px,-2px);box-shadow:3px 3px 0 var(--blue)}
.item-card .t{font-weight:var(--w-medium)}
.item-card .s{font-size:12px;color:var(--muted);margin-top:4px}

/* ------------------------------------------------------------------ tree (BOM) */
.tree{list-style:none;margin:0;padding:0}
.tree ul{list-style:none;margin:0;padding:0 0 0 22px;border-left:1px dashed var(--line-2);margin-left:10px}
.tree li{padding:4px 0}
.tree .node{display:flex;align-items:center;gap:10px;padding:8px 12px;}
.tree .node:hover{background:var(--panel-2)}

/* ------------------------------------------------------------------ meter (progress, caps) */
.meter{position:relative;height:10px;background:var(--panel-2);overflow:hidden;border:1px solid var(--line)}
.meter>span{position:absolute;inset:0 auto 0 0;width:var(--v,0%);max-width:100%;
  background:var(--blue)}
.meter.warn>span{background:var(--warn)}.meter.ko>span{background:var(--ko)}.meter.ok>span{background:var(--ok)}

/* ------------------------------------------------------------------ calendar grid */
.cal{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px}
.cal .d{min-height:74px;background:var(--panel);border:1px solid var(--line);padding:6px 8px;font-size:12px}
.cal .d.off{background:transparent;border-style:dashed;color:var(--muted)}
.cal .d.today{border-color:var(--blue)}
.cal .dh{font-size:12px;font-weight:var(--w-medium);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);padding:4px 8px}

/* ------------------------------------------------------------------ definition lists */
dl.kv{display:grid;grid-template-columns:minmax(120px,max-content) 1fr;gap:8px 18px;margin:0}
dl.kv dt{color:var(--muted);font-size:13px}
dl.kv dd{margin:0;font-weight:var(--w-medium);min-width:0;overflow-wrap:anywhere}

/* ------------------------------------------------------------------ details / disclosure */
details.more>summary{display:inline-flex;align-items:center;gap:6px;color:var(--blue-ink);font-weight:var(--w-medium);font-size:14px;padding:6px 0}
/* a fold says it opens (TRE-03): a chevron after its words, turned when open (the « Nouveau … » folds keep their +) */
details.more:not(.add)>summary::after{content:"";flex:none;width:7px;height:7px;margin:0 0 0 4px;border:solid currentColor;
  border-width:0 1.5px 1.5px 0;transform:translateY(-2px) rotate(45deg);transition:transform .15s}
details.more:not(.add)[open]>summary::after{transform:translateY(2px) rotate(225deg)}
details.more[open]>summary{margin-bottom:10px}
details:not(.pop)>summary{color:var(--blue-ink)}

/* ------------------------------------------------------------------ auth screens */
.auth-page{min-height:100vh;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(360px,.9fr)}
.auth-art{position:relative;overflow:hidden;background:var(--sunk);border-right:1px solid var(--line);display:flex;flex-direction:column;
  justify-content:space-between;padding:40px}
.auth-art .wm-logo{height:34px;width:auto;align-self:flex-start;color:var(--ink)}
.auth-art .big{font-size:clamp(40px,5vw,72px);font-weight:var(--w-medium);letter-spacing:-.05em;line-height:.95;max-width:9ch}
.auth-art .big em{font-style:normal;color:var(--blue)}
.auth-main{display:flex;align-items:center;justify-content:center;padding:40px 24px}
.auth-box{width:100%;max-width:380px}
.auth-box h1{font-size:34px;letter-spacing:-.04em;margin-bottom:6px}
.auth-box .sub{color:var(--muted);margin-bottom:26px}
.auth-box form{margin:0}
.auth-box .or{display:flex;align-items:center;gap:12px;color:var(--muted);font-size:12px;margin:22px 0 12px;
  text-transform:uppercase;letter-spacing:.14em;font-weight:var(--w-medium)}
.auth-box .or::before,.auth-box .or::after{content:"";flex:1;height:1px;background:var(--line)}
.auth-box .f{margin-bottom:12px}
.auth-mobile-logo{display:none}
.auth-theme{position:fixed;top:14px;right:14px;z-index:5}
@media (max-width:860px){.auth-page{grid-template-columns:1fr}.auth-art{display:none}.auth-mobile-logo{display:block;margin-bottom:34px}
  .auth-mobile-logo .wm-logo{height:26px}}

/* ------------------------------------------------------------------ error page */
.error-page{max-width:640px;margin:10vh auto;padding:0 22px}
.error-page .code{font-size:120px;font-weight:300;letter-spacing:-.06em;line-height:.9;color:var(--blue)}
.error-page h1{font-size:34px;margin:14px 0 8px}
.error-logo{display:inline-block;margin-bottom:8vh;color:var(--ink)}
.error-logo .wm-logo{height:26px}

/* ------------------------------------------------------------------ misc helpers */
.masked{color:var(--muted);font-style:italic}
.sticky{position:sticky;left:0;background:var(--panel);z-index:1}

/* ================================================================== shared components (merged from the modules) */
.sr-only,.vh,.sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);
  white-space:nowrap;border:0}
/* segmented links (periods, revisions, board / list): pill group, no JavaScript */
.seg{display:inline-flex;flex-wrap:wrap;gap:2px;padding:3px;background:var(--panel);border:1px solid var(--line)}
.seg a{display:inline-flex;align-items:center;min-height:32px;padding:0 14px;color:var(--muted);font-size:13px;
  font-weight:var(--w-medium);line-height:1;white-space:nowrap;font-variant-numeric:tabular-nums}
.seg a:hover{color:var(--ink);text-decoration:none;background:var(--panel-2)}
.seg a.on,.seg a.on:hover{background:var(--fill);color:var(--on-blue)}
.seg a .n{font-weight:400;opacity:.8;margin-left:5px}
/* filter pills (one choice among a few, with a count) */
.pills{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 16px}
.pills a{display:inline-flex;align-items:center;gap:8px;min-height:34px;padding:0 14px;
  border:1px solid var(--line);color:var(--ink-2);font-weight:var(--w-medium);font-size:13px;white-space:nowrap}
.pills a:hover{border-color:var(--line-2);background:var(--panel);color:var(--ink);text-decoration:none}
.pills a.on{background:var(--ink);border-color:var(--ink);color:var(--bg)}
.pills .n{font-weight:400;color:var(--muted);font-variant-numeric:tabular-nums}
.pills a.on .n{color:inherit;opacity:.6}
/* pagination: previous · position · next */
.pager{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:16px 0 0}
.pager-n,.pager>.muted{color:var(--muted);font-size:13px;font-weight:var(--w-medium);font-variant-numeric:tabular-nums;text-align:center}
/* several choices as toggle pills (checkboxes) */
fieldset.f{border:0;margin:0;padding:0;min-width:0}
fieldset.f>legend{font-size:13px;font-weight:var(--w-medium);color:var(--ink-2);padding:0;margin:0 0 8px}
.opts{display:flex;flex-wrap:wrap;gap:8px}
.opt{display:inline-flex;align-items:center;gap:8px;min-height:36px;padding:0 14px 0 11px;border:1px solid var(--line-2);
  cursor:pointer;font-weight:400;font-size:14px;color:var(--ink);transition:background .15s,border-color .15s}
.opt:hover{border-color:var(--ink-2)}
.opt input[type=checkbox]{margin:0;width:16px;height:16px}
.opt:has(input:checked){background:var(--blue-soft);border-color:var(--blue);color:var(--blue-ink);font-weight:var(--w-medium)}
.opt:has(input:focus-visible){outline:2px solid var(--blue);outline-offset:2px}
/* inline « add » form that unfolds */
details.add{margin:0 0 14px}
details.add>summary{display:inline-flex;align-items:center;gap:8px;min-height:36px;padding:0 14px 0 10px;
  border:1px dashed var(--line-2);color:var(--blue-ink);font-weight:var(--w-medium);font-size:14px}
details.add>summary:hover{border-color:var(--blue);background:var(--blue-soft)}
details.add[open]>summary{border-style:solid;border-color:var(--blue);background:var(--blue-soft);margin-bottom:14px}
details.add>form{padding:18px;border:1px solid var(--line);background:var(--sunk)}
details.add>form .actions{margin-top:14px}
.card>details.add:last-child{margin-bottom:0}
.card>table+details.add,.card>.scroll+details.add{margin-top:36px}
/* small round initials, icon links */
.ini{display:inline-grid;place-items:center;flex:none;width:26px;height:26px;background:var(--panel);
  border:1px solid var(--line-2);font-size:10px;font-weight:var(--w-medium);letter-spacing:.04em;color:var(--ink-2)}
.edit-link{display:inline-grid;place-items:center;flex:none;width:30px;height:30px;color:var(--muted)}
.edit-link:hover{background:var(--panel-2);color:var(--blue-ink);text-decoration:none}
.edit-link .i{width:16px;height:16px}
.f.bad input,.f.bad select,.f.bad textarea{border-color:var(--ko)}
/* « as of » date chip, badges under a title, compact date picker */
.asof{display:inline-flex;align-items:center;gap:8px;padding:6px 12px 6px 8px;background:var(--warn-soft);
  color:var(--warn);font-weight:var(--w-medium);font-size:13px}
.asof .i{width:16px;height:16px}
.title-badges{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}
.datepick{display:inline-flex;align-items:center;gap:6px;margin:0}
.datepick input[type=date]{min-height:40px;padding:6px 10px;}
/* tables inside cards */
.card.flush>.scroll,.card.flush>table{margin:0;width:100%}
.card>.scroll:not(:last-child),.card>table:not(:last-child){margin-bottom:14px}
/* long texts in a stat box (a place, an owner): smaller and allowed to wrap */
.stat-value.text{font-size:21px;letter-spacing:-.02em;line-height:1.2;white-space:normal;overflow:visible}
textarea[rows="2"]{min-height:66px}
textarea[rows="3"]{min-height:88px}
/* status banner under a page title */
.banner,.banner.ok,.banner.warn,.banner.ko{display:flex;align-items:flex-start;gap:10px;padding:12px 16px;margin:0 0 16px;
  border:1px solid var(--line);background:var(--panel);color:var(--ink);font-weight:var(--w-medium);font-size:14px}
.banner .i{flex:none;margin-top:1px;color:var(--muted)}
.banner.blue{border-color:color-mix(in srgb,var(--blue) 40%,var(--line));background:var(--blue-soft)}
.banner.blue .i{color:var(--blue-ink)}
.banner.ok{border-color:color-mix(in srgb,var(--ok) 40%,var(--line));background:var(--ok-soft)}
.banner.ok .i{color:var(--ok)}
.banner.warn{border-color:color-mix(in srgb,var(--warn) 45%,var(--line));background:var(--warn-soft)}
.banner.warn .i{color:var(--warn)}
.banner.ko{border-color:color-mix(in srgb,var(--ko) 45%,var(--line));background:var(--ko-soft)}
.banner.ko .i{color:var(--ko)}
/* toolbar above a list (filters or segmented links on the left, action on the right) */
.toolbar{display:flex;flex-wrap:wrap;gap:10px 14px;align-items:center;justify-content:space-between;margin-bottom:16px}
.card>.toolbar{margin-bottom:14px}
.toolbar>.btn:only-child{margin-left:auto}
/* two columns: main + side (.split), even (.split.balanced), narrow left (.split.wide-right) */
.split{display:grid;grid-template-columns:minmax(0,1.85fr) minmax(290px,1fr);gap:16px;align-items:start}
.split.balanced{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);align-items:stretch}
.split.wide-right{grid-template-columns:minmax(0,1fr) minmax(0,1.6fr)}
@media (max-width:900px){.split,.split.balanced,.split.wide-right{grid-template-columns:minmax(0,1fr)}}
/* month navigation (calendars): ← Septembre 2026 → */
.month-nav{display:flex;align-items:center;gap:8px}
.month-nav .month{min-width:172px;margin:0;font-size:24px;letter-spacing:-.03em;text-align:center}
/* legend under a calendar or a chart */
.legend{display:flex;flex-wrap:wrap;gap:8px 20px;margin:14px 0 20px;padding:0;list-style:none;font-size:13px;color:var(--muted)}
.legend>*{display:inline-flex;align-items:center;gap:8px}
/* initials of a person (contacts, requests) */
.face{flex:none;display:grid;place-items:center;width:40px;height:40px;background:var(--blue-soft);
  color:var(--blue-ink);font-weight:var(--w-medium);font-size:13px;letter-spacing:.03em}
/* forms */
label .req,.f .req{color:var(--blue-ink)}
/* required fields: an asterisk after the label of any field whose control is required (FORM-02), written once here for
   every form of the pages (not the sign-in screens); a label that already holds a .req keeps it; the input's own
   « required » is what screen readers announce, so the asterisk is hidden from them */
.main .f:has(>:is(input:not([type=checkbox]):not([type=radio]):not([type=hidden]),select,textarea)[required])>label:first-of-type:not(:has(.req))::after{
  content:"\a0*";content:"\a0*"/"";color:var(--blue-ink)}
.f.has-err input,.f.has-err select,.f.has-err textarea{border-color:var(--ko)}
.f.check{flex-wrap:wrap}.f.check .help,.f.check .err{flex-basis:100%;margin-left:28px}
input[type=file]::file-selector-button{font:var(--w-medium) 13px var(--font);color:var(--ink);background:var(--panel-2);
  border:1px solid var(--line-2);padding:6px 14px;margin-right:12px;cursor:pointer}
details.more>form{margin-top:4px}
.card>details.more{margin-top:10px}
code{font-family:var(--font)}
/* a table at the bottom of a card follows its rounded corners (sticky cells included) */
.card>.scroll:last-child,.card>table:last-child{}
.card>.scroll:last-child{overflow-y:hidden}
/* charts (apps/web/charts.py) */
.wmc{margin:0}
.wmc-legend{display:flex;flex-wrap:wrap;gap:6px 18px;margin:0 0 12px;font-size:13px;font-weight:var(--w-medium);color:var(--ink-2)}
.wmc-key{display:inline-flex;align-items:center;gap:8px}
.wmc-sw{flex:none;overflow:visible}
.wmc-svg{display:block}
.wmc-svg text{fill:var(--muted)}
.wmc-svg .wmc-year,.wmc-svg .wmc-val{fill:var(--ink-2)}
.wmc-grid{stroke:var(--line)}.wmc-zero{stroke:var(--line-2)}
.wmc-future{fill:var(--bg)}
.wmc-hit{fill:transparent}.wmc-hit:hover{fill:color-mix(in srgb,var(--ink) 7%,transparent)}
.wmc-dot{stroke:var(--panel)}
.wmc .k-blue{--c:var(--blue)}.wmc .k-ink{--c:var(--ink-2)}.wmc .k-warn{--c:var(--warn)}
.wmc .k-ok{--c:var(--ok)}.wmc .k-ko{--c:var(--ko)}.wmc .k-muted{--c:var(--muted)}
.wmc-line{stroke:var(--c)}.wmc-fill,.wmc-dot{fill:var(--c)}.wmc-area{fill:var(--c);fill-opacity:.13}.wmc-svg .wmc-hl{fill:var(--c)}
@media (max-width:640px){.wmc-svg .min{display:none}}

/* phones */
.show-sm,.show-s{display:none}
@media (max-width:760px){
  .hide-sm,.hide-s{display:none!important}
  .show-sm,.show-s,.cell-sub.show-s{display:block}
  .show-sm{margin:0 0 4px}
  .stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .stats .stat.hero{grid-column:1/-1}
  /* the hero and three boxes: the three share one row, compact (PHONE-07); otherwise a box left alone on the last
     line takes the line: never a hole */
  html:not([data-view="simple"]) .stats:has(>.stat.hero:first-child):has(>.stat:nth-child(4):last-child){grid-template-columns:repeat(3,minmax(0,1fr))}
  html:not([data-view="simple"]) .stats:has(>.stat.hero:first-child):has(>.stat:nth-child(4):last-child)>.stat:not(.hero){padding:12px 12px 14px}
  html:not([data-view="simple"]) .stats:has(>.stat.hero:first-child):has(>.stat:nth-child(4):last-child)>.stat:not(.hero) .stat-value{font-size:20px}
  html:not([data-view="simple"]) .stats:has(>.stat.hero:first-child):has(>.stat:nth-child(4):last-child)>.stat:not(.hero) .stat-label{letter-spacing:.06em}
  html:not([data-view="simple"]) .stats:has(>.stat.hero:first-child):not(:has(>.stat:nth-child(4):last-child))>.stat:last-child:nth-child(even),
  html:not([data-view="simple"]) .stats:not(:has(>.stat.hero:first-child))>.stat:last-child:nth-child(odd){grid-column:1/-1}
  /* simple view: some boxes are hidden (the counts above would leave holes): the visible ones share each line */
  html[data-view="simple"] .stats{display:flex;flex-wrap:wrap}
  html[data-view="simple"] .stats>.stat{flex:1 1 140px}
  html[data-view="simple"] .stats>.stat.hero{flex-basis:100%}
  .stats .stat{padding:14px 16px 16px}
  .stats .stat-value{font-size:24px}
  .stats .stat-value.text{font-size:18px}
  .stats .stat-sub{font-size:12px}
  .pills{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-right:-16px;padding-right:16px}
  .pills::-webkit-scrollbar{display:none}
  .pills a{flex:none}
  /* touch targets: 40 px at least */
  button.sm,.btn.sm,.seg a,.pills a,.opt,details.add>summary,details.more>summary,.top-brand,.top-app{min-height:40px}
  .edit-link{width:40px;height:40px}
  /* small text links: larger hit area, same layout */
  .back{padding:10px 0;margin:-10px 0 -2px}
  .card>h2 a,.card-title a{padding:12px 0;margin:-12px 0 -12px auto}
  .item-card a.t{padding:12px 0;margin:-12px 0}
  .month-nav .month{min-width:0;flex:1;font-size:20px}
}

/* ================================================================== type roles (Helvetica weights) */
h1,h2,h3,h4,b,strong,.me-panel .me-name,.stat-value,.kpi,.app-name,tr.total td,tfoot td,.timeline .what,.item-card .t,
.auth-art .big,.month-nav .month,.empty b,.wmc-svg .wmc-val{font-weight:700}
.card>h2,.card-title{font-weight:var(--w-medium)}
.stat-value.text{font-weight:var(--w-medium)}
input,select,textarea{font-weight:400}

/* ================================================================== simple first, details on hover
   Secondary lines (.cell-sub in tables, .stat-sub under a figure, any .tip) are shown as a tooltip on hover or
   keyboard focus (app.js copies them into data-tip) instead of crowding the screen; they stay in the page for
   screen readers. « .keep » keeps one visible. Without JavaScript everything stays visible. */
.tip{display:block;margin-top:2px;font-size:13px;font-weight:400;color:var(--muted)}
.scroll{position:relative}
.js .tip,.js .cell-sub:not(.keep):not(.show-s),.js .stat-sub:not(.keep){position:absolute!important;left:0;top:0;width:1px;height:1px;
  padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
/* a field's help shows when the field has the focus, and stays once seen (FORM-01): hiding it again on blur moved the
   button below between mouse-down and mouse-up, and the click was lost */
.js .f:not(:focus-within):not(.is-seen)>.help:not(.keep){display:none}
.js [data-tip]:not(a):not(button):not(tr):not(input):not(select){cursor:help}
.wm-tip{position:fixed;z-index:300;max-width:340px;padding:9px 12px;background:var(--ink);color:var(--bg);
  font:400 13px/1.45 var(--font);box-shadow:4px 4px 0 var(--blue);pointer-events:none;white-space:pre-line;
  opacity:0;transform:translate(0,3px);transition:opacity .12s,transform .12s}
.wm-tip.on{opacity:1;transform:none}
/* text buttons are words only (icons stay on icon-only buttons and on the back link) */
.js button.has-text>.i,.js .btn.has-text>.i{display:none}

/* ================================================================== live updates (app.js, apps/web/live)
   The page updates itself; the only marks: a brief highlight of the figures that changed, and a discreet bar under the
   top bar (never over the action bars at the bottom) when a form being filled changed on the server or when the
   session expired. */
.live-bar{position:fixed;left:50%;top:76px;z-index:250;transform:translateX(-50%);display:flex;align-items:center;
  gap:6px;max-width:calc(100% - 32px);padding:8px 8px 8px 16px;background:var(--panel);border:1px solid var(--line-2);
  box-shadow:var(--shadow);color:var(--ink);font-size:14px;font-weight:var(--w-medium);white-space:nowrap}
.live-bar .live-act{display:inline-flex;align-items:center;min-height:32px;padding:0 10px;border:0;background:transparent;
  color:var(--blue-ink);font:var(--w-medium) 14px/1 var(--font);cursor:pointer}
.live-bar .live-act:hover{background:var(--blue-soft);text-decoration:none;color:var(--blue-ink)}
.live-flash{animation:live-flash 1.4s ease-out}
@keyframes live-flash{from{background-color:var(--blue-soft)}to{background-color:transparent}}
@media (max-width:760px){.live-bar{top:68px;font-size:13px}.live-bar .live-act{min-height:40px}}
@media print{.live-bar{display:none}}

/* ================================================================== v2 shell (UX audit, 05/10/2026) */
/* ------------------------------------------------------------------ global search (NAV-02)
   Top bar: details.pop.search-pop holds the field; app.js shows the results while typing (« / » or Ctrl K opens it).
   The same results, grouped by application, on the full page /recherche/ (works without JavaScript). */
.search-panel{width:min(580px,calc(100vw - 48px));padding:10px}
.search-panel form{margin:0}
.search-panel .search,.search-page .search{max-width:none;min-width:0;width:100%}
.search-panel input[type=search]{min-height:46px;font-size:16px}
.sr-out{margin-top:4px;max-height:min(62vh,540px);overflow-y:auto;overscroll-behavior:contain}
.sr-out:empty{display:none}
.sr-group+.sr-group{border-top:1px solid var(--line)}
.sr-head{display:flex;align-items:center;gap:8px;padding:10px 10px 4px;font-size:12px;font-weight:var(--w-medium);letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted)}
.sr-head .i{width:15px;height:15px;color:var(--blue)}
.sr-head a{margin-left:auto;font-size:13px;letter-spacing:0;text-transform:none}
.sr-list{list-style:none;margin:0;padding:0 0 4px}
.sr-item{display:flex;align-items:baseline;gap:10px;min-height:40px;padding:9px 10px;color:var(--ink)}
.sr-item:hover,.sr-item:focus-visible{background:var(--panel-2);text-decoration:none}
.sr-item:focus-visible{outline:none;box-shadow:inset 3px 0 0 var(--blue)}
.sr-t{flex:none;max-width:60%;font-weight:var(--w-medium);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sr-s{flex:1;min-width:0;color:var(--muted);font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sr-k{flex:none;color:var(--muted);font-size:12px}
.sr-more{display:block;padding:2px 10px 8px;color:var(--muted);font-size:13px}
.sr-note{padding:12px 10px;color:var(--muted);font-size:14px}
.sr-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 10px 4px;margin-top:4px;
  border-top:1px solid var(--line);font-size:13px}
.sr-foot .muted{font-size:12px}
kbd{display:inline-block;min-width:20px;padding:1px 5px;border:1px solid var(--line-2);color:var(--ink-2);
  font:var(--w-medium) 12px/1.3 var(--font);text-align:center}
.search-page{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:0 0 22px}
.search-page .search{flex:1 1 320px;max-width:680px}
.sr-groups{columns:2 440px;column-gap:16px}
.sr-groups>.card{break-inside:avoid;padding:6px 6px 4px}
.sr-groups>.card>h2{margin:0;padding:12px 10px 6px}
.sr-groups>.card>h2 .i{width:15px;height:15px;color:var(--blue)}
.sr-groups>.card>h2 a{padding-right:4px}
@media (max-width:760px){
  .search-panel{padding:8px}
  .sr-out{max-height:none}
  .sr-t{max-width:70%}
  .sr-foot .muted{display:none}
}

/* ------------------------------------------------------------------ as-of date chip (PHONE-01)
   « Aujourd'hui » (or « Au 12/09 ») with a chevron; opens a small form with a visible label (web/_datepick.html) */
.datepick-pop>summary{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 12px 0 10px;
  border:1px solid var(--line-2);color:var(--ink);font-weight:var(--w-medium);font-size:14px;white-space:nowrap;user-select:none}
.datepick-pop>summary:hover{border-color:var(--ink-2);background:var(--panel-2)}
.datepick-pop>summary .i{width:16px;height:16px;color:var(--muted)}
.datepick-pop.dated>summary{background:var(--warn-soft);border-color:transparent;color:var(--warn)}
.datepick-pop.dated>summary .i{color:var(--warn)}
.caret{display:inline-block;flex:none;width:7px;height:7px;margin-left:2px;border:solid currentColor;
  border-width:0 1.5px 1.5px 0;transform:translateY(-2px) rotate(45deg)}
details[open]>summary .caret{transform:translateY(2px) rotate(225deg)}
.datepick-panel{width:260px;max-width:calc(100vw - 32px);display:flex;flex-direction:column;gap:10px;padding:14px}
.datepick-panel .actions{margin-top:4px}
@media (max-width:760px){.datepick-panel{left:0;right:auto}}  /* the page's actions start on the left on a phone */

/* ------------------------------------------------------------------ content that scrolls sideways (PHONE-02)
   app.js marks the side where more content waits (.is-scroll-l / .is-scroll-r): that edge fades out. */
.is-scroll-r{-webkit-mask-image:linear-gradient(to left,transparent,#000 44px);mask-image:linear-gradient(to left,transparent,#000 44px)}
.is-scroll-l{-webkit-mask-image:linear-gradient(to right,transparent,#000 44px);mask-image:linear-gradient(to right,transparent,#000 44px)}
.is-scroll-l.is-scroll-r{-webkit-mask-image:linear-gradient(to right,transparent,#000 44px,#000 calc(100% - 44px),transparent);
  mask-image:linear-gradient(to right,transparent,#000 44px,#000 calc(100% - 44px),transparent)}

/* ------------------------------------------------------------------ filters folded on phones (PHONE-05)
   app.js adds « Filtres » (with the number of filters in use) to a form.filters holding two choices or more; on a
   phone only the search field and that button stay, the rest opens below. Nothing changes on a computer. */
.filters-toggle{display:none}
.filters-toggle .n{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 5px;background:var(--fill);
  color:var(--on-blue);font-size:12px;font-weight:var(--w-medium)}
@media (max-width:760px){
  .filters.is-foldable>.filters-toggle{display:inline-flex;gap:8px}
  .filters.is-foldable:not(.is-open)>:is(select,label,.f,fieldset,details,button:not(.filters-toggle)){display:none}
  .filters.is-foldable>.search{flex:1 1 150px;min-width:0}
  .filters.is-foldable.is-open>.filters-toggle{border-color:var(--ink);background:var(--panel-2)}
}

/* ------------------------------------------------------------------ shown on condition (app.js)
   data-show-if="stage=PERDU" (or "article.tracking=SERIAL": the data-tracking of the chosen option; several values
   with |): the element shows only when the form says so (FORM-04); the server keeps validating everything.
   .bar[data-on-change]: an action bar that appears once its form changed (PAR-04). Without JavaScript: always shown. */
.js .is-off{display:none!important}
.js .bar[data-on-change]:not(.is-on){display:none}

/* ------------------------------------------------------------------ long lists: type to filter (FORM-03) */
.f>.sel-filter{min-height:38px;margin-bottom:-2px;padding:6px 12px;font-size:14px;border-style:dashed;border-bottom:0}
.f>.sel-filter:focus{border-style:solid;border-bottom:1px solid var(--blue)}
.f>.sel-filter::placeholder{color:var(--muted)}
@media (max-width:760px){.f>.sel-filter{font-size:16px}}  /* iOS zooms on a smaller field */

/* ------------------------------------------------------------------ « Premiers pas » (home page, first 14 days) */
.first-steps{display:flex;align-items:center;flex-wrap:wrap;gap:12px 18px;margin:-6px 0 24px;padding:14px 14px 14px 20px}
.fs-head{display:flex;align-items:baseline;gap:10px;flex:none}
.fs-title{font-size:12px;font-weight:var(--w-medium);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.fs-n{font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums}
.fs-list{display:flex;flex-wrap:wrap;gap:6px;flex:1 1 420px;min-width:0;margin:0;padding:0;list-style:none}
.fs-list>li{display:flex;min-width:0}
.fs-list form{display:flex;margin:0;min-width:0}
.fs-item{display:inline-flex;align-items:center;justify-content:flex-start;gap:10px;min-height:38px;padding:0 14px 0 10px;
  border:1px solid var(--line-2);
  background:transparent;color:var(--ink);font:var(--w-medium) 14px/1.2 var(--font);letter-spacing:0;white-space:nowrap;cursor:pointer;
  transition:border-color .15s,transform .15s}
a.fs-item:hover,button.fs-item:hover{border-color:var(--blue);background:transparent;color:var(--ink);text-decoration:none;
  transform:translate(-2px,-2px);box-shadow:3px 3px 0 var(--blue)}
.fs-box{display:grid;place-items:center;flex:none;width:16px;height:16px;border:1.5px solid var(--muted)}
.fs-box .i{width:12px;height:12px;stroke-width:3}
.fs-item.done{border-color:var(--line);color:var(--muted)}
.fs-item.done .fs-box{border-color:var(--ok);background:var(--ok);color:var(--bg)}
.first-steps .fs-hide{margin-left:auto}
.first-steps .fs-hide form{margin:0}
@media (max-width:760px){  /* a compact check list: title and « Masquer » on one line, one step per line */
  .first-steps{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 10px;margin:-4px 0 18px;padding:8px 8px 8px 14px}
  .fs-head{grid-column:1;grid-row:1;align-self:center}
  .first-steps .fs-hide{grid-column:2;grid-row:1;margin:0}
  .fs-list{grid-column:1/-1;flex-direction:column;gap:0}
  .fs-list>li,.fs-list form,.fs-item{width:100%}
  .fs-item,.fs-item.done{min-height:40px;padding:0 4px;border-color:transparent;white-space:normal;text-align:left}
  a.fs-item:hover,button.fs-item:hover{border-color:transparent;transform:none;box-shadow:none}
}

/* ------------------------------------------------------------------ « Mes applications » (Mon compte) */
.app-list{list-style:none;margin:0;padding:0;columns:2 300px;column-gap:28px}
.app-list li{break-inside:avoid}
.app-list a{display:flex;align-items:center;gap:14px;min-height:54px;padding:7px 0;color:var(--ink)}
.app-list a:hover{text-decoration:none}
.app-list a:hover b{color:var(--blue-ink)}
.app-list .i{flex:none;width:22px;height:22px;color:var(--blue)}
.app-list a>span{display:flex;flex-direction:column;min-width:0}
.app-list small{color:var(--muted);font-size:13px;line-height:1.35}
/* ================================================================== /v2 shell */

/* ================================================================== « Vue simplifiée » (v2.2, 06/10/2026)
   A per-person switch of the avatar menu (html[data-view="simple"]): only the important actions and facts, every
   detail one click away (its own page, the « ⋯ » menu of the header, a fold). The full view is never changed by
   these rules: they only remove or fold. Two marker classes for the templates (docs/DESIGN.md « Vue simplifiée »):
   .hide-simple = hidden in the simple view (the detail is available elsewhere); details.fold-simple = a block open
   in the full view and folded in the simple view (the template writes `open` only when `simple` is off). */
html[data-view="simple"] .hide-simple{display:none!important}
/* tables: the phone's choice of columns at every width (secondary cells .hide-s / .hide-sm out, the phone lines in) */
html[data-view="simple"] table :is(.hide-s,.hide-sm){display:none!important}
html[data-view="simple"] table :is(.show-s,.show-sm){display:block}
html[data-view="simple"] table .badge:is(.show-s,.show-sm){display:flex;width:max-content;max-width:100%}
/* secondary lines: under the figures (the .keep ones say what the figure is: they stay), the helps, the legends (they
   come back in the full view; a figure's line stays on hover) */
html[data-view="simple"] :is(.stat-sub:not(.keep),.help,.hint,.legend){display:none!important}
/* home: no « Premiers pas », a tile without a live figure keeps its name only (its description stays on hover) */
html[data-view="simple"] .first-steps{display:none}
html[data-view="simple"] .app-stat.blurb{display:none}
/* filters: the search box and the most used filter (.keep), the others behind « Filtres » (app.js) at every width */
@media (min-width:761px){
  html[data-view="simple"] .filters.is-foldable>.filters-toggle{display:inline-flex;gap:8px}
  html[data-view="simple"] .filters.is-foldable:not(.is-open)>:not(.search):not(.keep):not(.filters-toggle):not(button):not(.btn):not([type=hidden]){display:none}
  html[data-view="simple"] .filters.is-foldable.is-open>.filters-toggle{border-color:var(--ink);background:var(--panel-2)}
  /* search · kept filter · « Filtres » · « Filtrer » */
  html[data-view="simple"] .filters.is-foldable>.filters-toggle{order:1}
  html[data-view="simple"] .filters.is-foldable>:is(button:not(.filters-toggle),a.btn){order:2}
}
/* header: the primary action and « ⋯ » (app.js moves the other buttons into that menu, as plain menu lines: words
   only) */
html[data-view="simple"] .ph-actions .more-actions .menu .i{display:none}
/* a block folded in the simple view: <details class="fold-simple"{% if not simple %} open{% endif %}> + <summary>.
   Full view: the summary is hidden (an inline « Plus de détails ») or, when it holds the block's title (h2), shown
   as that title and inert; simple view: the summary is the switch, with a chevron */
details.fold-simple>summary{display:flex;align-items:center;gap:8px;color:var(--blue-ink);font-weight:var(--w-medium);
  font-size:14px}
html[data-view="simple"] details.fold-simple>summary:not(:has(>:is(h2,h3))){min-height:32px}
details.fold-simple>summary>:is(h2,h3){display:flex;align-items:center;gap:12px;flex:1;min-width:0;margin:0;font-size:12px;
  font-weight:var(--w-medium);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
details.fold-simple>summary>:is(h2,h3) a{text-transform:none;letter-spacing:0;font-size:13px;margin-left:auto}
details.card.fold-simple[open]>summary,details.fold-simple[open]>summary:has(>:is(h2,h3)){margin-bottom:14px}
details.card.fold-simple>summary+:is(table,.scroll){margin-top:-4px}
details.card.flush.fold-simple>summary{padding:18px 22px 0}
html[data-view="simple"] details.card.flush.fold-simple:not([open])>summary{padding-bottom:18px}
html[data-view="simple"] :is(.split,.grid)>details.fold-simple:not([open]){align-self:start}
html:not([data-view="simple"]) details.fold-simple>summary:not(:has(>:is(h2,h3))){display:none}
html:not([data-view="simple"]) details.fold-simple>summary{pointer-events:none;cursor:auto}
html:not([data-view="simple"]) details.fold-simple>summary a{pointer-events:auto}
html[data-view="simple"] details.fold-simple>summary::after{content:"";flex:none;width:7px;height:7px;margin:0 0 0 4px;
  border:solid var(--blue-ink);border-width:0 1.5px 1.5px 0;transform:translateY(-2px) rotate(45deg);transition:transform .15s}
html[data-view="simple"] details.fold-simple[open]>summary::after{transform:translateY(2px) rotate(225deg)}
html[data-view="simple"] details.fold-simple[open]>summary:not(:has(>:is(h2,h3))){margin-bottom:10px}
html[data-view="simple"] details.fold-simple>summary:hover>:is(h2,h3){color:var(--ink)}
html[data-view="simple"] details.fold-simple>summary+.section-title{display:none}  /* the summary says it */
@media print{details.fold-simple>summary{display:none}}

/* ================================================================== right angles, everywhere */
*,*::before,*::after{border-radius:0!important}

/* ------------------------------------------------------------------ responsive */
@media (max-width:760px){
  .top{padding:0 12px;height:58px}.wm-logo{height:18px}
  .top-app{margin-left:8px;padding:6px 10px}.top-app span{display:none}
  /* the menus of the top bar open fixed under it, across the screen (NAV-01: the app switcher was cut off) */
  .top .pop-panel{position:fixed;top:64px;left:8px;right:8px;width:auto;max-height:calc(100vh - 76px);
    max-height:calc(100dvh - 76px);overflow-y:auto;overscroll-behavior:contain}
  .top .me-panel{left:auto;min-width:240px;max-width:calc(100vw - 16px)}
  .apps-panel{grid-template-columns:repeat(3,minmax(0,1fr))}
  .head{padding:22px 16px 0}.head h1{font-size:28px}
  .main{padding:18px 16px 70px}
  .main>.msgs{top:66px}
  .card{padding:16px}.card>table,.card>.scroll{margin:0 -16px -16px;width:calc(100% + 32px)}
  .card>table th:first-child,.card>table td:first-child,.card>.scroll th:first-child,.card>.scroll td:first-child{padding-left:16px}
  .stat-value{font-size:28px}
  /* home: compact tiles, every application fits on one screen (NAV-07); the « à faire » chips on one sliding line */
  .hello{margin:0 0 18px;gap:14px}
  .hello-date{margin-bottom:8px}
  .hello h1{font-size:36px}
  .todo{flex:1 1 100%;min-width:0;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-right:-16px;padding-right:16px}
  .todo::-webkit-scrollbar{display:none}
  .todo a{flex:none}
  .apps-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .app-tile{display:grid;grid-template-columns:34px minmax(0,1fr);column-gap:10px;align-content:center;min-height:64px;
    padding:12px}
  .app-ic{grid-row:span 2;width:34px;height:34px}.app-ic .i{width:18px;height:18px}
  .app-name{margin:0;padding:0;font-size:16px;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .app-stat{margin-top:2px;font-size:12px;line-height:1.3;min-height:0;white-space:nowrap;overflow:hidden;
    text-overflow:ellipsis}
  .app-go{display:none}
  /* typing on a phone: 16 px at least (iOS zooms the page on a smaller field) */
  input[type=text],input[type=email],input[type=password],input[type=search],input[type=number],input[type=date],
  input[type=datetime-local],input[type=month],input[type=url],input[type=tel],select,textarea{font-size:16px}
}
/* small phones (320 to 379 px): the page title already names the application, the top bar keeps its five buttons */
@media (max-width:379px){
  .top{gap:3px;padding:0 8px}
  .top-app{display:none}
  .top-btn{width:40px}
  .avatar{margin-left:3px}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}
@media print{.top,.head>nav,nav.tabs,.actions,.bar,button,.btn{display:none!important}body{background:#fff;color:#000}
  .card{border-color:#ccc}}

/* ===== Notion palette (road map) ===== */
/* The ten colours of Notion select options (« inspire-toi des couleurs », Jules 05/10/2026), tuned for both themes:
   --n-<colour>: strong (bar edges, squares, diamonds, coloured text), >= 4.5:1 on --bg, --panel and its own soft;
   --n-<colour>-soft: background (bars, tags), --ink on it >= 8:1; --n-on: text on a strong colour (>= 5:1).
   Use them through the classes: .n-blue … give a component its --n / --n-soft, then .n-chip (square swatch),
   .n-tag (tag), .n-text (coloured text), .n-edge (colour edge on the left), .n-fill (strong background). */
:root,[data-theme="dark"]{
  --n-default:#C8C3BA;--n-default-soft:#454342;--n-gray:#A9A59E;--n-gray-soft:#3C3B3A;
  --n-brown:#CFA083;--n-brown-soft:#463A33;--n-orange:#F59A55;--n-orange-soft:#513826;
  --n-yellow:#EDC85A;--n-yellow-soft:#4F4528;--n-green:#58C994;--n-green-soft:#264537;
  --n-blue:#62AEFF;--n-blue-soft:#293E54;--n-purple:#BC93F7;--n-purple-soft:#413652;
  --n-pink:#F383BF;--n-pink-soft:#503243;--n-red:#FF7A70;--n-red-soft:#53302E;--n-on:#0B0B0C;
}
[data-theme="light"]{
  --n-default:#4F4A43;--n-default-soft:#E7E4DF;--n-gray:#66625B;--n-gray-soft:#E3E1DD;
  --n-brown:#825538;--n-brown-soft:#F3E6DF;--n-orange:#9A4B0B;--n-orange-soft:#FCE5D3;
  --n-yellow:#7A5C00;--n-yellow-soft:#FAF1D4;--n-green:#18703F;--n-green-soft:#D4F1E3;
  --n-blue:#0A5DB8;--n-blue-soft:#D6EAFF;--n-purple:#7442BD;--n-purple-soft:#EEE3FD;
  --n-pink:#A92E6C;--n-pink-soft:#FCDFEE;--n-red:#B32F25;--n-red-soft:#FFDCDA;--n-on:#FFFFFF;
}
.n-default{--n:var(--n-default);--n-soft:var(--n-default-soft)}.n-gray{--n:var(--n-gray);--n-soft:var(--n-gray-soft)}
.n-brown{--n:var(--n-brown);--n-soft:var(--n-brown-soft)}.n-orange{--n:var(--n-orange);--n-soft:var(--n-orange-soft)}
.n-yellow{--n:var(--n-yellow);--n-soft:var(--n-yellow-soft)}.n-green{--n:var(--n-green);--n-soft:var(--n-green-soft)}
.n-blue{--n:var(--n-blue);--n-soft:var(--n-blue-soft)}.n-purple{--n:var(--n-purple);--n-soft:var(--n-purple-soft)}
.n-pink{--n:var(--n-pink);--n-soft:var(--n-pink-soft)}.n-red{--n:var(--n-red);--n-soft:var(--n-red-soft)}
.n-chip{display:inline-block;flex:none;width:10px;height:10px;background:var(--n,var(--n-default))}
.n-tag{display:inline-flex;align-items:center;gap:6px;padding:2px 9px;font-size:12px;font-weight:var(--w-medium);line-height:1.4;
  background:var(--n-soft,var(--n-default-soft));color:var(--n,var(--n-default));white-space:nowrap}
.n-text{color:var(--n,var(--n-default))}
.n-edge{box-shadow:inset 4px 0 0 var(--n,var(--n-default))}
.n-fill{background:var(--n,var(--n-default));color:var(--n-on)}
/* ===== /Notion palette ===== */
/* ===== « Documents » card of a record (v2.3 fichiers: {% documents obj %}, on six records, and its choice page) ===== */
ul.docs{list-style:none;margin:0 0 12px;padding:0;display:grid;gap:6px}
ul.docs li{display:flex;align-items:center;gap:4px 8px;min-width:0;padding:2px 4px 2px 12px;border:1px solid var(--line)}
.doc-name{display:flex;align-items:center;gap:10px;flex:1;min-width:0;min-height:40px;color:var(--ink);overflow-wrap:anywhere}
.doc-name:hover{text-decoration:none;color:var(--blue-ink)}
.doc-name .i{flex:none;width:17px;height:17px;color:var(--blue)}
.doc-name b{font-size:14px;font-weight:var(--w-medium)}
.doc-where{color:var(--muted);font-size:12px;overflow-wrap:anywhere}
.doc-acts{display:inline-flex;align-items:center;gap:2px;flex:none;margin-left:auto}
.doc-sugg{margin:4px 0 12px}
.doc-sugg>p{margin:0 0 6px}
/* ===== /Documents ===== */