/* =====================================================================================================================
   OQEL — SYSTÈME VISUEL (source unique : toutes les pages, Python et TypeScript, lisent ces jetons)
   Calme, clair, évident. Blanc chaud, gris doux et encre ; l'ORANGE est rare : le bouton principal de l'écran,
   l'élément de menu actif et un ou deux repères. Jamais une couleur écrite en dur dans une page : on ajoute un jeton ici.
   Aperçu de tous les éléments : /static/design.html
   ===================================================================================================================== */

/* ---- Police : Inter (variable, auto-hébergée : la politique de sécurité n'autorise que 'self'). Licence : Inter-LICENSE.txt ---- */
@font-face{font-family:"Inter";font-style:normal;font-weight:100 900;font-display:swap;src:url(inter-latin-wght.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Inter";font-style:normal;font-weight:100 900;font-display:swap;src:url(inter-latin-ext-wght.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

/* ---- 1. Palette (valeurs brutes : on ne les utilise PAS directement dans les pages, on passe par les rôles du §2) ---- */
:root{
  --orange-light:#FF7A30;--orange:#FF6A1A;--orange-hover:#E85A0C;--orange-pressed:#CC4C06;--orange-soft:#FFF1E8;
  --c-ink:#14110F;--c-ink-2:#1C1917;--c-warm-white:#FAF8F5;--c-white:#FFFFFF;--c-border:#ECE7E1;--c-muted:#6B645D;
  --c-success:#2E9E6B;--c-warning:#E8A317;--c-error:#D93F3F;

  /* ---- Typographie, espacement, formes, mouvement (identiques en clair et en sombre) ---- */
  --font:"Inter",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",sans-serif;
  --sans:var(--font);--serif:var(--font);
  /* CINQ tailles de texte, pas une de plus : titre de page, titre de section, texte, petit, légende */
  --fs-title:2.5rem;--fs-section:1.3125rem;--fs-body:1.0625rem;--fs-small:.9375rem;--fs-caption:.8125rem;
  --lh:1.6;--lh-tight:1.12;
  --s-1:4px;--s-2:8px;--s-3:12px;--s-4:16px;--s-5:24px;--s-6:32px;--s-7:48px;--s-8:64px;--s-9:96px;
  --r-sm:10px;--r-md:12px;--radius:16px;--r-lg:24px;--r-full:999px;
  --tap:48px;--tap-lg:56px;
  --ease:cubic-bezier(.2,.8,.2,1);--t-fast:150ms;--t:200ms;--t-slow:250ms;
  --blur:saturate(1.8) blur(20px);--rail:84px;--content:1120px;
  --ico-stroke:1.75;
}

/* ---- 2. Rôles — thème clair ---- */
:root,[data-theme=light]{
  color-scheme:light;
  --bg:var(--c-warm-white);           /* fond de page */
  --surface:var(--c-white);           /* cartes, champs */
  --card:var(--surface);
  --surface-2:#F3EFEA;                /* remplissage discret : segments, survol neutre (dérivé du blanc chaud) */
  --ink:var(--c-ink);                 /* texte principal */
  --muted:var(--c-muted);             /* texte secondaire — 5,5:1 sur le fond */
  --line:var(--c-border);
  --line-strong:#DDD5CC;
  --field-line:#9C9289;             /* bord des champs : 3:1 sur blanc */
  --brand:var(--orange);--brand-hover:var(--orange-hover);--brand-pressed:var(--orange-pressed);
  --brand-soft:var(--orange-soft);
  --brand-bright:var(--orange);
  --brand-ink:var(--c-ink);           /* texte SUR l'orange : l'encre (6,5:1) — le blanc n'atteindrait que 2,9:1 */
  --brand-text:var(--orange-pressed); /* orange utilisé comme TEXTE sur fond clair (4,5:1) */
  --ok:var(--c-success);--warn:var(--c-warning);--danger:var(--c-error);
  --ok-text:#1F7A52;--warn-text:#8A5A00;--danger-text:#B42F2F;     /* versions lisibles en texte (≥ 4,5:1) */
  --ok-soft:#E8F5EE;--warn-soft:#FDF4E0;--danger-soft:#FCECEC;--info-soft:#F1EEEA;
  --accent:var(--warn);--accent-soft:var(--warn-soft);            /* anciens noms, conservés */
  --cat-booking:var(--c-ink);--cat-meeting:#56708F;--cat-block:#8A817A;--cat-event:#9AA3AD; /* catégories de l'agenda */
  --overlay:rgba(20,17,15,.36);
  --glass:rgba(250,248,245,.72);--glass-strong:rgba(255,255,255,.86);
  --shadow-sm:0 1px 2px rgba(20,17,15,.05);
  --shadow:0 1px 2px rgba(20,17,15,.04),0 8px 24px -8px rgba(20,17,15,.08);
  --shadow-lg:0 2px 4px rgba(20,17,15,.04),0 24px 48px -16px rgba(20,17,15,.16);
  --glow:0 1px 0 rgba(255,255,255,.35) inset,0 6px 18px -6px rgba(255,106,26,.55),0 2px 6px -2px rgba(255,106,26,.35);
  --glow-hover:0 1px 0 rgba(255,255,255,.35) inset,0 10px 26px -8px rgba(255,106,26,.6),0 3px 8px -2px rgba(255,106,26,.4);
  --focus:0 0 0 4px rgba(255,106,26,.28);
}

/* ---- 3. Rôles — thème sombre EN OPTION (Bureau V2 : clair par défaut partout ; le sombre se choisit, il ne suit plus l'appareil) ---- */
[data-theme=dark]{
  color-scheme:dark;
  --bg:var(--c-ink);--surface:var(--c-ink-2);--card:var(--surface);--surface-2:#27221F;
  --ink:#F5F1EC;--muted:#A8A097;--line:#2C2622;--line-strong:#3D3631;--field-line:#7A7169;
  --brand-soft:rgba(255,106,26,.14);--brand-text:var(--orange);
  --ok-text:#5CCB97;--warn-text:#F2BE4F;--danger-text:#F07A7A;
  --ok-soft:rgba(46,158,107,.16);--warn-soft:rgba(232,163,23,.16);--danger-soft:rgba(217,63,63,.18);--info-soft:#27221F;
  --cat-booking:#F5F1EC;--cat-meeting:#8FB0D4;--cat-block:#B3AAA2;--cat-event:#6F7882;
  --overlay:rgba(0,0,0,.55);--glass:rgba(20,17,15,.7);--glass-strong:rgba(28,25,23,.88);
  --shadow-sm:0 1px 2px rgba(0,0,0,.3);--shadow:0 1px 2px rgba(0,0,0,.3),0 8px 24px -8px rgba(0,0,0,.5);--shadow-lg:0 24px 48px -16px rgba(0,0,0,.7);
  --glow:0 1px 0 rgba(255,255,255,.25) inset,0 6px 20px -6px rgba(255,106,26,.5);--glow-hover:0 1px 0 rgba(255,255,255,.25) inset,0 10px 28px -8px rgba(255,106,26,.6);
}
[data-theme]{background:var(--bg);color:var(--ink)}

/* ---- 4. Base ---- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font:400 var(--fs-body)/var(--lh) var(--font);font-feature-settings:"cv11","ss01";-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
a{color:var(--ink);text-decoration-color:var(--line-strong);text-underline-offset:.2em;text-decoration-thickness:1px;transition:color var(--t-fast) var(--ease),text-decoration-color var(--t-fast) var(--ease)}
a:hover{text-decoration-color:currentColor}
h1,h2,h3,h4{font-family:var(--font);color:var(--ink);font-weight:650;letter-spacing:-.02em;line-height:var(--lh-tight);text-wrap:balance}
h1{font-size:var(--fs-title);font-weight:750;letter-spacing:-.035em;margin:0 0 var(--s-2)}
h2{font-size:var(--fs-section);margin:0 0 var(--s-3)}
h3{font-size:var(--fs-body);margin:var(--s-1) 0}
p{margin:0 0 var(--s-4)}
small{font-size:var(--fs-caption)}
::selection{background:var(--brand-soft);color:var(--ink)}
img,svg{max-width:100%}
.muted{color:var(--muted)}.right{text-align:right}.nowrap{white-space:nowrap}.center{text-align:center}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-999px;top:var(--s-2);background:var(--brand);color:var(--brand-ink);padding:var(--s-3) var(--s-4);z-index:60;border-radius:var(--r-full);font-weight:600}.skip:focus{left:var(--s-2)}
.eyebrow{display:block;font:600 var(--fs-caption)/1 var(--font);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:0 0 var(--s-3)}
.lead{font-size:var(--fs-section);line-height:1.5;color:var(--muted);max-width:40rem}
code{font:500 var(--fs-small) ui-monospace,SFMono-Regular,Menlo,monospace;background:var(--surface-2);padding:.1rem .4rem;border-radius:6px;word-break:break-all}

/* Focus : un anneau doux et toujours visible au clavier */
:focus-visible{outline:none;box-shadow:var(--focus);border-radius:var(--r-sm)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--brand);box-shadow:var(--focus)}

/* Icônes : un seul style de trait partout (24×24, trait 1,75, bouts arrondis) */
.ico,.primary a svg,.btn svg,.empty-ico svg{width:1.25em;height:1.25em;flex:none;fill:none;stroke:currentColor;stroke-width:var(--ico-stroke);stroke-linecap:round;stroke-linejoin:round}

/* ---- 5. Mouvement : discret, 150–250 ms ---- */
@keyframes rise{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes fade{from{opacity:0}to{opacity:1}}
.card,.list,.empty,.tile,.done,.alert{animation:rise var(--t-slow) var(--ease) both}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* ---- 6. Pages publiques (accueil, connexion, inscription) ---- */
body.public main{max-width:720px;margin:0 auto;padding:var(--s-6) var(--s-4) var(--s-8)}body.public main:has(.pitch){max-width:1040px}
.topbar{position:sticky;top:0;z-index:20;display:flex;justify-content:space-between;align-items:center;gap:var(--s-4);padding:var(--s-3) var(--s-5);background:var(--bg);border-bottom:1px solid var(--line)}
.topbar nav{display:flex;gap:var(--s-4);align-items:center;font-size:var(--fs-small);white-space:nowrap}.topbar nav>a:not(.btn){text-decoration:none;color:var(--muted)}.topbar nav>a:not(.btn):hover{color:var(--ink)}
@media (max-width:359px){.topbar{padding-inline:var(--s-4)}.topbar nav>a[href="/login"]{display:none}}
.topbar .btn:not(.btn-secondary){--b-bg:var(--surface);color:var(--ink);box-shadow:inset 0 0 0 1px var(--line-strong)}
.brand{display:inline-flex;align-items:center;gap:.55rem;font:750 var(--fs-body)/1 var(--font);letter-spacing:-.02em;text-decoration:none;color:var(--ink)}
.brand::before{content:"";width:1.5rem;height:1.5rem;border-radius:8px;background:linear-gradient(145deg,var(--orange) 0%,var(--orange-hover) 100%);box-shadow:var(--glow)}

/* ---- Logo Pilotiko : deux images, l'une pour le clair, l'autre pour le sombre (CSS seul) ----
   Hauteur 24 px dans les barres, jamais moins de 20 px. Le nom accessible est porté par le parent (aria-label). */
.logo{display:inline-flex;align-items:center;line-height:0}
.logo{flex:none}.logo img{display:block;height:24px;min-height:20px;width:auto;max-width:none}.brand{flex:none}
.logo .logo-dark{display:none}
[data-theme=dark] .logo .logo-light.logo-light{display:none}[data-theme=dark] .logo .logo-dark.logo-dark{display:block}
[data-theme=light] .logo .logo-dark.logo-dark{display:none}[data-theme=light] .logo .logo-light.logo-light{display:block}
.brand:has(.logo)::before{content:none}
.logo.logo-lg img{height:36px}                       /* connexion, inscription, accueil public */
.logo-center{display:flex;justify-content:center;margin:0 0 var(--s-5)}
.logo.logo-sm img{height:20px}                       /* écrans « C'est fait » */
.done .logo{margin-bottom:var(--s-4)}

/* ---- 7. Coquille (refonte 2026-10) : RAIL ÉTROIT de 4 icônes à gauche, « Plus » replié en panneau ; barre d'onglets en bas sur téléphone ---- */
body.with-shell{display:grid;grid-template-columns:var(--rail) minmax(0,1fr);min-height:100vh}
.shell{background:var(--surface);border-right:1px solid var(--line);padding:var(--s-4) var(--s-2);display:flex;flex-direction:column;align-items:center;gap:var(--s-4);position:sticky;top:0;height:100vh;overflow:visible;z-index:26}
.shell .brand{padding:var(--s-1);border-radius:var(--r-md)}.shell .brand::before{content:none}.shell .brand img{display:block;width:32px;height:32px}
.tenant{display:none}
.primary{display:flex;flex-direction:column;gap:var(--s-1);width:100%}
.primary a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-height:64px;padding:var(--s-2) 2px;border-radius:var(--r-md);text-decoration:none;color:var(--muted);position:relative;transition:background var(--t-fast) var(--ease),color var(--t-fast) var(--ease)}
.primary a svg{width:1.55rem;height:1.55rem;color:var(--muted);transition:color var(--t-fast) var(--ease)}
.primary a b{display:block;font:600 var(--fs-caption)/1.2 var(--font);text-align:center}.primary a small{display:none}
.primary a:hover{background:var(--surface-2);color:var(--ink)}.primary a:hover svg{color:var(--ink)}
.primary a.active{background:var(--brand-soft);color:var(--ink)}.primary a.active svg{color:var(--brand)}.primary a.active b{font-weight:700}
.count{position:absolute;top:6px;right:8px;min-width:1.25rem;height:1.25rem;padding:0 .35rem;border-radius:var(--r-full);background:var(--brand);color:var(--brand-ink);font:700 var(--fs-caption)/1.25rem var(--font);text-align:center}
.primary .tab-menu{display:none}
.rail-more{margin-top:auto;display:flex;flex-direction:column;align-items:center;gap:4px;min-height:56px;width:100%;padding:var(--s-2) 2px;border-radius:var(--r-md);text-decoration:none;color:var(--muted);font:600 var(--fs-caption)/1.2 var(--font)}
.rail-more svg{width:1.4rem;height:1.4rem;fill:none;stroke:currentColor;stroke-width:var(--ico-stroke);stroke-linecap:round;stroke-linejoin:round}.rail-more:hover{background:var(--surface-2);color:var(--ink)}
.shell .shell-me{display:none}
/* « Plus » : un panneau à droite du rail, fermé tant qu'on ne le cible pas (#more) — sans JavaScript */
.more{position:fixed;left:var(--rail);top:0;bottom:0;z-index:40;width:min(340px,100vw - var(--rail));display:none;flex-direction:column;gap:var(--s-2);padding:var(--s-5) var(--s-4) var(--s-6);background:var(--glass-strong);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);border-right:1px solid var(--line);box-shadow:var(--shadow-lg);overflow:auto;animation:fade var(--t) var(--ease)}
.more:target{display:flex}
.more-top{display:flex;justify-content:space-between;align-items:center;gap:var(--s-3);margin-bottom:var(--s-1)}.more-top strong{font-size:var(--fs-section);font-weight:700;letter-spacing:-.02em}
.more-top a{font-weight:600;text-decoration:none;min-height:40px;display:inline-flex;align-items:center;padding:0 var(--s-4);border-radius:var(--r-full);background:var(--surface-2);color:var(--ink)}
.more-who{color:var(--muted);font-size:var(--fs-small);margin:0 0 var(--s-3)}
.more-links{display:flex;flex-direction:column;gap:2px;margin-bottom:var(--s-3)}.more-links a{display:flex;align-items:center;min-height:48px;padding:0 var(--s-3);border-radius:var(--r-md);text-decoration:none;color:var(--ink);font-weight:550}.more-links a:hover{background:var(--surface-2)}
.more details{border-radius:var(--r-md)}
.more summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;min-height:44px;padding:var(--s-2) var(--s-3);border-radius:var(--r-sm);font:600 var(--fs-caption)/1.4 var(--font);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);transition:background var(--t-fast) var(--ease)}
.more summary::-webkit-details-marker{display:none}
.more summary::after{content:"";width:.4rem;height:.4rem;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg);transition:transform var(--t) var(--ease)}.more details[open]>summary::after{transform:rotate(-135deg)}
.more summary:hover{background:var(--surface-2);color:var(--ink)}
.more details.tools .sub{margin-left:var(--s-2)}.more details.tools .sub>summary{text-transform:none;letter-spacing:0;font-size:var(--fs-small);font-weight:550}
.more details a{display:flex;align-items:center;min-height:44px;padding:var(--s-2) var(--s-3) var(--s-2) var(--s-4);border-radius:var(--r-sm);text-decoration:none;color:var(--ink);font-size:var(--fs-small);transition:background var(--t-fast) var(--ease)}
.more details a:hover{background:var(--surface-2)}.more details a.active{background:var(--brand-soft);font-weight:600}
.switch{display:flex;flex-direction:column;gap:var(--s-1);font-size:var(--fs-small);padding:var(--s-3)}.switch small{color:var(--muted)}.switch a{text-decoration:none;min-height:40px;display:flex;align-items:center}
.who{margin-top:auto;display:flex;flex-direction:column;gap:var(--s-1);font-size:var(--fs-small);color:var(--muted);padding:var(--s-4) var(--s-3) 0;border-top:1px solid var(--line)}.who a{text-decoration:none;font-weight:600;min-height:40px;display:flex;align-items:center}
.shell-spacer{flex:1}
main{padding:var(--s-6) var(--s-7) var(--s-8);max-width:var(--content);width:100%;margin:0 auto}main.wide{max-width:1240px}
.banner{background:var(--brand-soft);color:var(--ink);padding:var(--s-3) var(--s-4);font-size:var(--fs-small);border-radius:var(--r-md);margin:0 0 var(--s-5)}.banner-warn{background:var(--danger-soft);color:var(--danger-text)}

/* ---- 8. En-tête de page : un grand titre, une phrase, UNE action principale ---- */
.page-head{display:flex;justify-content:space-between;gap:var(--s-4) var(--s-5);align-items:flex-end;flex-wrap:wrap;margin-bottom:var(--s-6)}
.page-head h1{margin:0}.page-head p{margin:var(--s-2) 0 0;font-size:var(--fs-section);color:var(--muted)}
.actions{display:flex;gap:var(--s-2);flex-wrap:wrap;align-items:center}
.section{margin:0 0 var(--s-7)}.section-head{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s-4);margin:0 0 var(--s-4)}.section-head h2{margin:0}.section-head a{font-size:var(--fs-small);font-weight:600;text-decoration:none;color:var(--muted)}.section-head a:hover{color:var(--ink)}

/* ---- 9. Boutons : un seul orange par écran (.btn), les autres sont calmes ---- */
.btn,button.btn{
  --b-bg:linear-gradient(180deg,var(--orange-light) 0%,var(--orange) 55%,var(--orange-hover) 100%);
  display:inline-flex;align-items:center;justify-content:center;gap:var(--s-2);min-height:var(--tap);padding:0 1.35rem;border-radius:var(--r-full);
  border:0;background:var(--b-bg);color:var(--brand-ink);font:600 var(--fs-body)/1.2 var(--font);letter-spacing:-.01em;padding-block:.55rem;text-decoration:none;text-align:center;max-width:100%;cursor:pointer;
  box-shadow:var(--glow);transition:transform var(--t-fast) var(--ease),box-shadow var(--t) var(--ease),background var(--t) var(--ease),color var(--t-fast) var(--ease)}
.btn:hover{--b-bg:linear-gradient(180deg,var(--orange) 0%,var(--orange-hover) 100%);box-shadow:var(--glow-hover);transform:translateY(-1px)}
.btn:active{--b-bg:var(--orange-pressed);transform:translateY(0) scale(.98);box-shadow:var(--glow)}
.btn:focus-visible{box-shadow:var(--glow),var(--focus);border-radius:var(--r-full)}
.btn[disabled],.btn[aria-disabled=true]{opacity:.45;pointer-events:none;box-shadow:none}
.btn[aria-busy=true]{opacity:.7;cursor:progress}
/* Secondaire : blanc, fin contour, encre */
.btn.btn-secondary,button.btn.btn-secondary{--b-bg:var(--surface);color:var(--ink);box-shadow:inset 0 0 0 1px var(--line-strong),var(--shadow-sm)}
.btn.btn-secondary:hover{--b-bg:var(--surface);box-shadow:inset 0 0 0 1px var(--ink),var(--shadow)}
.btn.btn-secondary:active{--b-bg:var(--surface-2)}
/* Discret : texte seul, fond au survol */
.btn.btn-quiet,button.btn.btn-quiet{--b-bg:transparent;color:var(--ink);box-shadow:none;font-weight:550}
.btn.btn-quiet:hover{--b-bg:var(--surface-2);box-shadow:none;transform:none}.btn.btn-quiet:active{--b-bg:var(--line)}
/* Danger : contour rouge (le rouge n'est jamais plein, sauf confirmation) */
.btn.btn-danger,button.btn.btn-danger{--b-bg:transparent;color:var(--danger-text);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--danger) 45%,transparent)}
.btn.btn-danger:hover{--b-bg:var(--danger-soft);box-shadow:inset 0 0 0 1px var(--danger)}
/* Tailles */
.btn.btn-small,button.btn.btn-small{min-height:38px;padding:.4rem 1rem;font-size:var(--fs-small)}
.btn.btn-big,button.btn.btn-big{min-height:var(--tap-lg);padding:.6rem 1.9rem}
.btn.btn-block{display:flex;width:100%}
.btn.btn-icon{width:var(--tap);padding:0}.btn.btn-small.btn-icon{width:38px}
.btn.is-on{box-shadow:inset 0 0 0 1.5px var(--ink);color:var(--ink)}
nav:has(>.btn-secondary)>.btn:not(.btn-secondary):not(.btn-quiet):not(.btn-danger){--b-bg:var(--ink);color:var(--bg);box-shadow:none;transform:none}
button.link,.link-btn{background:none;border:0;padding:0;color:var(--ink);font:inherit;cursor:pointer;text-align:left;text-decoration:underline;text-decoration-color:var(--line-strong);text-underline-offset:.2em}button.link:hover,.link-btn:hover{text-decoration-color:currentColor}
.link-btn{min-height:44px}
.inline{display:inline}

/* ---- 10. Menu « Plus » : là où vont les actions rares (fonctionne sans JavaScript) ---- */
.menu{position:relative;display:inline-block}
.menu>summary{list-style:none}.menu>summary::-webkit-details-marker{display:none}
.menu-pop{position:absolute;right:0;top:calc(100% + var(--s-2));z-index:30;min-width:15rem;padding:var(--s-2);border-radius:var(--radius);background:var(--surface);box-shadow:0 0 0 1px var(--line),var(--shadow-lg);display:flex;flex-direction:column;animation:rise var(--t) var(--ease)}
.menu-pop a,.menu-pop button{display:flex;align-items:center;gap:var(--s-3);min-height:44px;padding:0 var(--s-3);border-radius:var(--r-sm);border:0;background:none;font:inherit;font-size:var(--fs-small);color:var(--ink);text-decoration:none;text-align:left;cursor:pointer;width:100%}
.menu-pop a:hover,.menu-pop button:hover{background:var(--surface-2)}.menu-pop hr{border:0;border-top:1px solid var(--line);margin:var(--s-1) 0}.menu-pop form{margin:0}
.menu-pop svg{width:1.15rem;height:1.15rem;color:var(--muted);fill:none;stroke:currentColor;stroke-width:var(--ico-stroke);stroke-linecap:round;stroke-linejoin:round}

/* ---- 11. Cartes et grilles ---- */
.card{background:var(--surface);border:0;border-radius:var(--radius);padding:var(--s-5);box-shadow:0 0 0 1px var(--line),var(--shadow);margin-bottom:var(--s-4)}
.card>h2:first-child,.card>h3:first-child{margin-top:0}
a.card{display:block;text-decoration:none;color:inherit;transition:transform var(--t) var(--ease),box-shadow var(--t) var(--ease)}a.card:hover{transform:translateY(-2px);box-shadow:0 0 0 1px var(--line-strong),var(--shadow-lg)}
.card.card-flat{box-shadow:0 0 0 1px var(--line)}
.card.card-hero{padding:var(--s-6);border-radius:var(--r-lg)}
.grid{display:grid;gap:var(--s-4)}.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))}
.cols{display:grid;gap:var(--s-4);grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.stack{display:flex;flex-direction:column;gap:var(--s-3)}.row{display:flex;gap:var(--s-3);align-items:center;flex-wrap:wrap}
.stat{display:flex;flex-direction:column;gap:2px}.stat b{font-size:var(--fs-title);font-weight:700;letter-spacing:-.03em;line-height:1.1;font-variant-numeric:tabular-nums}.stat span{color:var(--muted);font-size:var(--fs-small)}
.stat.key b{color:var(--brand-text)}

/* Liste « une ligne = une chose » : grandes zones à toucher */
.list{list-style:none;margin:0;padding:0;border-radius:var(--radius);background:var(--surface);box-shadow:0 0 0 1px var(--line),var(--shadow);overflow:hidden}
.list>li{display:flex;align-items:center;gap:var(--s-4);padding:var(--s-4) var(--s-5);border-top:1px solid var(--line);min-height:64px}.list>li:first-child{border-top:0}
.list>li>div,.list .row-link>div{flex:1;min-width:0}.list b{display:block;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.list small{display:block;color:var(--muted);font-size:var(--fs-small)}
.list a.row-link{display:flex;align-items:center;gap:var(--s-4);flex:1;text-decoration:none;color:inherit;margin:calc(-1 * var(--s-4)) calc(-1 * var(--s-5));padding:var(--s-4) var(--s-5);transition:background var(--t-fast) var(--ease)}.list a.row-link:hover{background:var(--surface-2)}
.chev{width:.5rem;height:.5rem;border-right:1.75px solid var(--muted);border-bottom:1.75px solid var(--muted);transform:rotate(-45deg);flex:none;margin-right:var(--s-1)}

/* ---- 12. Champs ---- */
.field{display:flex;flex-direction:column;gap:var(--s-2);margin-bottom:var(--s-5)}
label{font-weight:550;font-size:var(--fs-small)}.req{color:var(--danger-text)}
input,select,textarea{font:inherit;font-size:var(--fs-body);padding:0 var(--s-4);border-radius:var(--r-md);border:1px solid var(--field-line);background:var(--surface);color:var(--ink);min-height:var(--tap);width:100%;transition:border-color var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease)}
textarea{padding:var(--s-3) var(--s-4);min-height:120px;line-height:1.5;resize:vertical}
input::placeholder,textarea::placeholder{color:color-mix(in srgb,var(--muted) 75%,transparent)}
input:hover,select:hover,textarea:hover{border-color:var(--muted)}
select{appearance:none;-webkit-appearance:none;padding-right:2.6rem;background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);background-position:calc(100% - 1.3rem) 52%,calc(100% - .95rem) 52%;background-size:.35rem .35rem;background-repeat:no-repeat}
input[type=checkbox],input[type=radio]{width:1.35rem;height:1.35rem;min-height:0;padding:0;accent-color:var(--brand);flex:none}
input[type=file]{padding:var(--s-3);min-height:auto}
input[type=search]{border-radius:var(--r-full);padding-left:var(--s-5)}
fieldset{border:1px solid var(--line);border-radius:var(--radius);padding:var(--s-3) var(--s-4) var(--s-4);margin:0 0 var(--s-4);min-width:0}legend{padding:0 var(--s-2);font-weight:600;font-size:var(--fs-small)}
input[type=file]::file-selector-button{font:600 var(--fs-small) var(--font);min-height:40px;margin-right:var(--s-3);padding:0 var(--s-4);border:0;border-radius:var(--r-full);background:var(--surface-2);color:var(--ink);cursor:pointer;box-shadow:inset 0 0 0 1px var(--line-strong);transition:box-shadow var(--t-fast) var(--ease)}input[type=file]::file-selector-button:hover{box-shadow:inset 0 0 0 1px var(--ink)}
.has-error input,.has-error select,.has-error textarea{border-color:var(--danger)}.error{color:var(--danger-text);font-size:var(--fs-small)}.hint{color:var(--muted);font-size:var(--fs-small)}
.check-inline{display:inline-flex;align-items:center;gap:var(--s-2);font-size:var(--fs-small);font-weight:450;color:var(--ink)}.check-inline input{width:1.2rem;height:1.2rem}
.row-form{display:flex;gap:var(--s-3);align-items:flex-end;flex-wrap:wrap}.row-form .field{flex:1;min-width:240px;margin:0}
.inline-form{display:flex;gap:var(--s-2);align-items:center;flex-wrap:wrap;margin:0}.inline-form input,.inline-form select{width:auto;min-height:40px}
.form-foot{display:flex;gap:var(--s-4);align-items:center;flex-wrap:wrap;margin-top:var(--s-2)}

/* ---- 13. Messages ---- */
.alert{display:block;padding:var(--s-4) var(--s-5);border-radius:var(--radius);margin-bottom:var(--s-5);background:var(--surface);box-shadow:0 0 0 1px var(--line);animation:rise var(--t) var(--ease)}
.alert ul{margin:var(--s-2) 0 0 1.1rem;padding:0}
.alert-ok{background:var(--ok-soft);color:var(--ink);box-shadow:inset 4px 0 0 var(--ok)}
.alert-error{background:var(--danger-soft);color:var(--ink);box-shadow:inset 4px 0 0 var(--danger)}.alert-error strong{color:var(--danger-text)}
.alert-warn{background:var(--warn-soft);color:var(--ink);box-shadow:inset 4px 0 0 var(--warn)}
.alert-info{background:var(--info-soft);color:var(--ink);box-shadow:none}

/* ---- 14. Pastilles d'état : point de couleur + texte encre (jamais la couleur seule) ---- */
.pill,.badge{display:inline-flex;align-items:center;gap:.4rem;padding:.2rem .7rem;border-radius:var(--r-full);font-size:var(--fs-caption);font-weight:600;line-height:1.5;background:var(--surface-2);color:var(--ink);white-space:nowrap}
.pill::before,.badge::before{content:"";width:.45rem;height:.45rem;border-radius:50%;background:var(--muted)}
.pill.ok,.b-green{background:var(--ok-soft);color:var(--ink)}.pill.ok::before,.b-green::before{background:var(--ok)}
.pill.warn,.b-amber{background:var(--warn-soft);color:var(--ink)}.pill.warn::before,.b-amber::before{background:var(--warn)}
.pill.bad,.b-red{background:var(--danger-soft);color:var(--ink)}.pill.bad::before,.b-red::before{background:var(--danger)}
.pill.brand{background:var(--brand-soft)}.pill.brand::before{background:var(--brand)}
.b-blue{background:var(--info-soft)}.b-gray{background:var(--surface-2);color:var(--muted)}
.tag{display:inline-block;font-size:var(--fs-caption);letter-spacing:.06em;text-transform:uppercase;font-weight:700;color:var(--brand-text);margin-bottom:var(--s-1)}
.dot-on{display:inline-block;width:.6rem;height:.6rem;border-radius:50%;background:var(--ok);vertical-align:middle;box-shadow:0 0 0 3px var(--ok-soft)}.conn-on{box-shadow:0 0 0 1.5px var(--ok),var(--shadow)}

/* ---- 15. Choix segmentés et onglets (un seul style partout) ---- */
.segments{display:inline-flex;gap:2px;padding:4px;border-radius:var(--r-full);background:var(--surface-2)}
.segments a,.segments button{display:inline-flex;align-items:center;min-height:40px;padding:0 var(--s-4);border:0;border-radius:var(--r-full);text-decoration:none;color:var(--muted);font:550 var(--fs-small)/1 var(--font);background:none;cursor:pointer;transition:background var(--t) var(--ease),color var(--t) var(--ease),box-shadow var(--t) var(--ease)}
.segments a,.segments button{white-space:nowrap}.segments a:hover{color:var(--ink)}.segments a.on,.segments a[aria-current]{background:var(--surface);color:var(--ink);box-shadow:var(--shadow-sm),0 0 0 1px var(--line)}
.tabs{display:flex;gap:var(--s-2);flex-wrap:wrap;margin-bottom:var(--s-5)}
.tabs a{display:inline-flex;align-items:center;min-height:40px;padding:0 var(--s-4);border-radius:var(--r-full);text-decoration:none;color:var(--muted);font-weight:550;font-size:var(--fs-small);background:var(--surface-2);transition:background var(--t-fast) var(--ease),color var(--t-fast) var(--ease)}
.tabs a:hover{color:var(--ink)}.tabs a.active{background:var(--ink);color:var(--bg)}
.steps,.steps-line{display:flex;gap:var(--s-2);margin:0 0 var(--s-5);flex-wrap:wrap;list-style:none;padding:0}
.step,.steps-line li{display:inline-flex;align-items:center;min-height:36px;padding:0 var(--s-4);border-radius:var(--r-full);background:var(--surface-2);color:var(--muted);font-size:var(--fs-small);font-weight:550}
.step.on,.steps-line li.on{background:var(--ink);color:var(--bg)}
.toolbar{display:flex;gap:var(--s-3);flex-wrap:wrap;align-items:center;margin:0 0 var(--s-5)}.toolbar input[type=search],.toolbar input[name=q]{max-width:24rem;border-radius:var(--r-full)}

/* ---- 16. Tableaux ---- */
table{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
th,td{text-align:left;padding:var(--s-3) var(--s-3);border-bottom:1px solid var(--line);vertical-align:middle}
th{font:600 var(--fs-caption)/1.3 var(--font);letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
tbody tr:last-child td{border-bottom:0}tbody tr{transition:background var(--t-fast) var(--ease)}tbody tr:hover td{background:var(--surface-2)}
td a{text-decoration:none;font-weight:600}td a:hover{text-decoration:underline}
.card>table,.card>.scroll>table{margin:calc(-1 * var(--s-2)) 0}
.scroll{overflow-x:auto}
.kv{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:var(--s-4) var(--s-5);margin:0 0 var(--s-4)}.kv>div{display:flex;flex-direction:column}.kv dt{font:600 var(--fs-caption) var(--font);letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}.kv dd{margin:var(--s-1) 0 0;font-size:var(--fs-body)}
.kv th{width:9rem;color:var(--muted);font-weight:600}

/* ---- 17. État vide : une phrase amicale et UN bouton orange ---- */
.empty{display:flex;flex-direction:column;align-items:center;text-align:center;gap:var(--s-2);padding:var(--s-8) var(--s-5);border-radius:var(--r-lg);background:var(--surface);box-shadow:0 0 0 1px var(--line);color:var(--muted)}
.empty-ico{display:grid;place-items:center;width:4rem;height:4rem;border-radius:50%;background:var(--brand-soft);color:var(--brand-text);margin-bottom:var(--s-3)}.empty-ico svg{width:1.75rem;height:1.75rem}
.empty h3{color:var(--ink);font-size:var(--fs-section);margin:0}.empty p{max-width:30rem;margin:0 auto var(--s-4);font-size:var(--fs-body)}
.empty .btn{margin-top:var(--s-2)}

/* ---- 18. Petits éléments partagés ---- */
details.card>summary,details.fold>summary{cursor:pointer;font-weight:600}details.card[open]>summary{margin-bottom:var(--s-4)}
details.fold{margin:var(--s-3) 0}details.fold>summary{color:var(--muted);padding:var(--s-2) 0;list-style-position:inside;transition:color var(--t-fast) var(--ease)}details.fold>summary:hover{color:var(--ink)}details.fold[open]>summary{margin-bottom:var(--s-3)}
.check{list-style:none;padding:0;margin:0}.check li{display:flex;gap:var(--s-3);padding:var(--s-2) 0;align-items:center}
.dot{width:1.4rem;height:1.4rem;border-radius:50%;border:1.75px solid var(--line-strong);display:inline-flex;align-items:center;justify-content:center;font-size:var(--fs-caption);flex:none}.dot.done{background:var(--ok);border-color:var(--ok);color:var(--c-white)}
.meter{height:8px;background:var(--surface-2);border-radius:var(--r-full);overflow:hidden}.meter span{display:block;height:100%;background:var(--brand);border-radius:inherit}
.divider{border:0;border-top:1px solid var(--line);margin:var(--s-6) 0}
hr{border:0;border-top:1px solid var(--line);margin:var(--s-5) 0}
pre.msg{white-space:pre-wrap;font:inherit;margin:0}

/* ---- 19. Barre du haut : retour à gauche, titre au centre, profil à droite. Toujours au même endroit ---- */
.appbar{position:sticky;top:0;z-index:20;display:grid;grid-template-columns:var(--tap) 1fr var(--tap);align-items:center;gap:var(--s-2);min-height:60px;padding:var(--s-2) var(--s-3);background:var(--bg);border-bottom:1px solid var(--line)}
.appbar>:nth-child(2){text-align:center;font-weight:650;font-size:var(--fs-body);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.appbar>:last-child{justify-self:end}
.icon-btn{display:inline-grid;place-items:center;width:var(--tap);height:var(--tap);border-radius:var(--r-full);border:0;background:none;color:var(--ink);text-decoration:none;cursor:pointer;transition:background var(--t-fast) var(--ease),transform var(--t-fast) var(--ease)}
.icon-btn svg{width:1.5rem;height:1.5rem;fill:none;stroke:currentColor;stroke-width:var(--ico-stroke);stroke-linecap:round;stroke-linejoin:round}
.icon-btn:hover{background:var(--surface-2)}.icon-btn:active{transform:scale(.94);background:var(--line)}
.avatar-btn{display:inline-grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--surface-2);color:var(--ink);font:650 var(--fs-small)/1 var(--font);text-decoration:none;box-shadow:0 0 0 1px var(--line);transition:box-shadow var(--t-fast) var(--ease),transform var(--t-fast) var(--ease)}
.avatar-btn:hover{box-shadow:0 0 0 2px var(--line-strong)}.avatar-btn:active{transform:scale(.94)}

/* ---- 20. Barre d'onglets (téléphone) : 5 destinations au plus, icône + un mot, la page active en orange ---- */
.tabbar{display:flex;padding:var(--s-1) var(--s-2) calc(var(--s-1) + env(safe-area-inset-bottom,0px));background:var(--surface);border-top:1px solid var(--line)}
.tabbar a{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:56px;border-radius:var(--r-md);text-decoration:none;color:var(--muted);font:550 var(--fs-caption)/1.2 var(--font);transition:color var(--t-fast) var(--ease),transform var(--t-fast) var(--ease)}
.tabbar svg{width:1.6rem;height:1.6rem;fill:none;stroke:currentColor;stroke-width:var(--ico-stroke);stroke-linecap:round;stroke-linejoin:round}
.tabbar a:hover{color:var(--ink)}.tabbar a:active{transform:scale(.94)}
.tabbar a.on,.tabbar a[aria-current]{color:var(--brand-text);font-weight:650}.tabbar a.on svg,.tabbar a[aria-current] svg{color:var(--brand)}

/* ---- 21. Interrupteur (case à cocher en CSS seul) ---- */
input[type=checkbox].toggle{appearance:none;-webkit-appearance:none;position:relative;width:52px;height:32px;min-height:0;padding:0;border:0;border-radius:var(--r-full);background:var(--line-strong);cursor:pointer;flex:none;transition:background var(--t) var(--ease)}
input[type=checkbox].toggle::before{content:"";position:absolute;top:3px;left:3px;width:26px;height:26px;border-radius:50%;background:var(--c-white);box-shadow:0 1px 3px rgba(20,17,15,.25);transition:transform var(--t) var(--ease)}
input[type=checkbox].toggle:checked{background:var(--brand)}input[type=checkbox].toggle:checked::before{transform:translateX(20px)}
input[type=checkbox].toggle:focus-visible{box-shadow:var(--focus)}
.setting{display:flex;align-items:center;justify-content:space-between;gap:var(--s-4);min-height:64px;cursor:pointer}
.setting b{display:block;font-weight:600}.setting small{display:block;color:var(--muted);font-size:var(--fs-small);font-weight:400}

/* ---- 22. Choix segmenté en CSS seul (boutons radio). Le choix le plus courant est coché par défaut dans le HTML ---- */
.seg{display:inline-flex;gap:2px;padding:4px;border:0;margin:0;border-radius:var(--r-full);background:var(--surface-2)}
.seg input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.seg label{display:inline-flex;align-items:center;justify-content:center;min-height:40px;padding:0 var(--s-4);border-radius:var(--r-full);color:var(--muted);font:550 var(--fs-small)/1 var(--font);cursor:pointer;transition:background var(--t) var(--ease),color var(--t) var(--ease),box-shadow var(--t) var(--ease)}
.seg label:hover{color:var(--ink)}
.seg input:checked+label{background:var(--surface);color:var(--ink);box-shadow:var(--shadow-sm),0 0 0 1px var(--line)}
.seg input:focus-visible+label{box-shadow:var(--focus)}
.seg.seg-block{display:flex}.seg.seg-block label{flex:1}

/* ---- 23. Grande carte avec icône : une porte d'entrée vers une chose à faire ---- */
.tile{display:flex;flex-direction:column;gap:var(--s-2);padding:var(--s-5);border-radius:var(--radius);background:var(--surface);box-shadow:0 0 0 1px var(--line),var(--shadow);text-decoration:none;color:var(--ink);transition:transform var(--t) var(--ease),box-shadow var(--t) var(--ease)}
a.tile:hover{transform:translateY(-2px);box-shadow:0 0 0 1px var(--line-strong),var(--shadow-lg)}a.tile:active{transform:scale(.99)}
.tile-ico{display:grid;place-items:center;width:52px;height:52px;border-radius:var(--r-md);background:var(--surface-2);color:var(--ink);margin-bottom:var(--s-2)}
.tile-ico svg{width:1.6rem;height:1.6rem;fill:none;stroke:currentColor;stroke-width:var(--ico-stroke);stroke-linecap:round;stroke-linejoin:round}
.tile.key .tile-ico{background:var(--brand-soft);color:var(--brand-text)}
.tile b{font-size:var(--fs-section);font-weight:650;letter-spacing:-.02em;line-height:var(--lh-tight)}.tile span{color:var(--muted)}
.tile .go{margin-top:auto;padding-top:var(--s-3);display:flex;align-items:center;gap:var(--s-2);font-weight:600;color:var(--ink)}

/* Rangée de liste avec icône à gauche et flèche à droite */
.row-ico{display:grid;place-items:center;width:44px;height:44px;border-radius:var(--r-md);background:var(--surface-2);flex:none}
.row-ico svg{width:1.35rem;height:1.35rem;fill:none;stroke:currentColor;stroke-width:var(--ico-stroke);stroke-linecap:round;stroke-linejoin:round}
.list a.row-link:active{background:var(--line)}

/* ---- 24. Écran « C'est fait » : le moment dont on se souvient, un peu plus soigné que le reste ---- */
@keyframes pop{0%{transform:scale(.6);opacity:0}60%{transform:scale(1.06);opacity:1}100%{transform:scale(1)}}
@keyframes halo{from{box-shadow:0 0 0 0 color-mix(in srgb,var(--ok) 35%,transparent)}to{box-shadow:0 0 0 22px transparent}}
.done{display:flex;flex-direction:column;align-items:center;text-align:center;gap:var(--s-3);padding:var(--s-8) var(--s-5);border-radius:var(--r-lg);background:radial-gradient(120% 70% at 50% 0%,var(--ok-soft) 0%,transparent 70%),var(--surface);box-shadow:0 0 0 1px var(--line),var(--shadow)}
.done-mark{display:grid;place-items:center;width:88px;height:88px;border-radius:50%;background:var(--ok);color:var(--c-white);margin-bottom:var(--s-3);animation:pop 420ms var(--ease) both,halo 900ms 300ms ease-out both}
.done-mark svg{width:2.6rem;height:2.6rem;fill:none;stroke:currentColor;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.done h2{font-size:var(--fs-title);font-weight:750;letter-spacing:-.035em;margin:0}.done p{margin:0 0 var(--s-4);color:var(--muted);max-width:26rem}
.done .actions{flex-direction:column;align-items:stretch;width:100%;max-width:20rem}

/* ---- 25. Chargement : des formes grises à la place du contenu ---- */
@keyframes shimmer{from{background-position:150% 0}to{background-position:-50% 0}}
.skel{display:block;border-radius:var(--r-sm);background:linear-gradient(90deg,var(--surface-2) 0%,var(--surface-2) 35%,var(--line) 50%,var(--surface-2) 65%,var(--surface-2) 100%);background-size:200% 100%;animation:shimmer 1.4s linear infinite}
.skel-line{height:.9em;margin:.35em 0}.skel-line.short{width:40%}.skel-line.mid{width:70%}
.skel-title{height:1.6em;width:55%;margin-bottom:var(--s-3)}
.skel-circle{width:44px;height:44px;border-radius:50%;flex:none}
.skel-btn{height:var(--tap);width:12rem;border-radius:var(--r-full)}
.skel-card{display:flex;gap:var(--s-4);align-items:center;padding:var(--s-4) var(--s-5);border-radius:var(--radius);background:var(--surface);box-shadow:0 0 0 1px var(--line)}.skel-card>div{flex:1}
[aria-busy=true] .skel{cursor:progress}

/* ---- 26. Verre dépoli : barres et menus, seulement si le navigateur sait le faire (sinon fond plein ci-dessus) ---- */
@supports ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
  .topbar,.appbar,.tabbar,.menu-pop{background:var(--glass);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur)}
  .menu-pop{background:var(--glass-strong)}
}

/* ---- Bureau virtuel (office.css) : palette de l'illustration, en clair et en sombre. Tailles : libellés de la scène SVG ---- */
.office{--o-floor:#ecdcc0;--o-floor-line:#e0cca8;--o-wall:#f6efe1;--o-baseboard:#d8c39c;--o-frame:#b88d5a;--o-sky:#bfe3f5;--o-sun:#ffd25a;--o-rug:#c9a37a;--o-board:#fffdf6;--o-track:#e5dccb;--o-accent:#0d7a6a;--o-chair:#7b6aa8;--o-desk:#d9b98a;--o-desk-edge:#b88d5a;--o-laptop:#9aa3ad;--o-laptop-dim:#6b7380;--o-glow:#7dffb8;--o-lounge:#e8cdb2;--o-ink:#2b2d31;--o-veil:rgba(255,255,255,.1);--o-veil-strong:rgba(255,255,255,.2);--o-fs-sm:11px;--o-fs-xs:10px;--o-available:#4AA3E6}
[data-theme=dark] .office{--o-floor:#2a2e33;--o-floor-line:#31363c;--o-wall:#232a30;--o-baseboard:#161b20;--o-frame:#5b6a78;--o-sky:#1c3550;--o-sun:#e8d9a0;--o-rug:#3d4b58;--o-board:#1b2128;--o-track:#38424c;--o-accent:#6fd6bb;--o-chair:#57507d;--o-desk:#6d5a43;--o-desk-edge:#4d3f2e;--o-laptop:#8a929c;--o-laptop-dim:#4a5260;--o-lounge:#3a3330;--o-ink:#e8eee9}

/* ---- 27. Garde-fous appliqués à toutes les pages (y compris celles construites en TypeScript) ---- */

/* Un seul orange par écran : le premier bouton plein visible de la page garde l'orange, les suivants se calment.
   (Exceptions : le bouton d'une page vide reste orange, les filtres faits de boutons sont des pastilles encre.) */
main :is(.btn:not(.btn-secondary,.btn-quiet,.btn-danger,nav>.btn):not(details:not([open])>:not(summary) *),:has(.btn:not(.btn-secondary,.btn-quiet,.btn-danger,nav>.btn):not(details:not([open])>:not(summary) *))) ~ .btn:not(.btn-secondary,.btn-quiet,.btn-danger,nav>.btn,.empty .btn),
main :is(.btn:not(.btn-secondary,.btn-quiet,.btn-danger,nav>.btn):not(details:not([open])>:not(summary) *),:has(.btn:not(.btn-secondary,.btn-quiet,.btn-danger,nav>.btn):not(details:not([open])>:not(summary) *))) ~ * .btn:not(.btn-secondary,.btn-quiet,.btn-danger,nav>.btn,.empty .btn){--b-bg:var(--surface);color:var(--ink);box-shadow:inset 0 0 0 1px var(--line-strong),var(--shadow-sm)}

/* Messages : une icône dit tout de suite si c'est réussi, à surveiller ou en erreur */
.alert-ok,.alert-warn,.alert-error{display:flex;gap:var(--s-3);align-items:flex-start}
.alert-ok::before,.alert-warn::before,.alert-error::before{content:"";flex:none;width:1.35rem;height:1.35rem;margin-top:1px;border-radius:50%;background:var(--ok);-webkit-mask:var(--ico-ok) center/100% no-repeat;mask:var(--ico-ok) center/100% no-repeat}
.alert-warn::before{background:var(--warn);-webkit-mask-image:var(--ico-warn);mask-image:var(--ico-warn)}
.alert-error::before{background:var(--danger);-webkit-mask-image:var(--ico-warn);mask-image:var(--ico-warn)}
.alert>ul{margin-top:var(--s-2)}.alert-error:has(ul){flex-wrap:wrap}.alert-error:has(ul)>strong{flex:1}.alert-error:has(ul)>ul{flex-basis:100%;margin-left:calc(1.35rem + var(--s-3))}
:root{--ico-ok:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cmask id='m'%3E%3Crect width='24' height='24' fill='%23fff'/%3E%3Cpath d='m7 12.5 3.2 3.2L17 9' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/mask%3E%3Ccircle cx='12' cy='12' r='11' mask='url(%23m)'/%3E%3C/svg%3E");
  --ico-warn:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cmask id='m'%3E%3Crect width='24' height='24' fill='%23fff'/%3E%3Cpath d='M12 6.5v7' stroke='%23000' stroke-width='2.6' stroke-linecap='round'/%3E%3Ccircle cx='12' cy='17.2' r='1.5' fill='%23000'/%3E%3C/mask%3E%3Ccircle cx='12' cy='12' r='11' mask='url(%23m)'/%3E%3C/svg%3E")}

/* Pages d'erreur */
.error-page{margin-top:var(--s-6)}.error-page h1{font-size:var(--fs-section);margin:0}

/* Menu du profil (en haut à droite) */
.topbar .menu>summary{list-style:none;cursor:pointer}.topbar .menu-pop{min-width:13rem}

/* Téléphone : tout ce qui se touche fait au moins 48 px de haut ; la barre du haut passe à la ligne au lieu de déborder */
@media (max-width:820px){
  .btn,button.btn,.btn.btn-small,button.btn.btn-small,.segments a,.segments button,.tabs a,.step,.steps-line li,.chip,.seg label,.ws-period a,.tnav a,.bk-more>summary,.icon-btn,.link-btn,.topbar nav a,.topbar nav button{min-height:var(--tap)}
  .btn.btn-small.btn-icon,.icon-btn{width:var(--tap)}
  .avatar-btn{width:var(--tap);height:var(--tap)}
  .segments a,.segments button,.tabs a,.ws-period a,.tnav a,.step,.steps-line li{display:inline-flex;align-items:center}
  details:not(.menu)>summary:not(.btn){min-height:var(--tap);padding-block:var(--s-3);box-sizing:border-box}
  .inline-form input,.inline-form select,.row-form input,.row-form select{min-height:var(--tap)}
  .topbar{flex-wrap:wrap;padding:var(--s-3) var(--s-4);row-gap:var(--s-2)}.topbar nav{flex-wrap:wrap;gap:var(--s-1) var(--s-3);justify-content:flex-end}
  .topbar nav>a:not(.btn),.topbar nav button.link{display:inline-flex;align-items:center}
}
/* Téléphone : les tableaux deviennent des fiches lisibles (le nom des colonnes est rappelé une fois, en légende) */
@media (max-width:640px){
  table:not(.stack){display:block}
  table:not(.stack)>thead,table:not(.stack)>tbody,table:not(.stack)>tfoot{display:block}
  table:not(.stack) tr{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--s-1) var(--s-4);padding:var(--s-3) 0;border-bottom:1px solid var(--line)}
  table:not(.stack) tbody tr:last-child{border-bottom:0}
  table:not(.stack) th,table:not(.stack) td{display:block;border:0;padding:0;text-align:left;min-width:0;overflow-wrap:anywhere}
  table:not(.stack)>thead tr{padding-top:0}
  table:not(.stack) tr>:first-child{flex-basis:100%}
  table:not(.stack) td:first-child{font-weight:600}
  table:not(.stack) td.right,table:not(.stack) th.right{text-align:left}
  table:not(.stack) tbody tr:hover td{background:none}
  .scroll:has(>table:not(.stack)){overflow-x:visible}
}

/* ---- 28. Téléphone d'abord : la coquille devient une barre d'onglets ---- */
@media (max-width:820px){
  body.with-shell{display:block;padding-bottom:calc(5.5rem + env(safe-area-inset-bottom))}
  .shell{position:sticky;top:0;z-index:25;height:auto;border-right:0;border-bottom:1px solid var(--line);padding:var(--s-3) var(--s-4);flex-direction:row;align-items:center;gap:var(--s-3);overflow:visible;background:var(--bg)}
  .tenant{display:flex;flex-direction:column;margin-left:auto;text-align:right;padding:0;min-width:0}.tenant strong{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:var(--fs-small)}.tenant small{display:none}.shell .brand{padding:0}
  .rail-more{display:none}
  .primary{position:fixed;left:0;right:0;bottom:0;z-index:30;flex-direction:row;gap:0;background:var(--surface);border-top:1px solid var(--line);padding:var(--s-1) var(--s-2) calc(var(--s-1) + env(safe-area-inset-bottom))}
  .primary a{flex:1;min-height:56px;padding:var(--s-2) 2px}
  .primary a.active{background:none}.primary a.active b{color:var(--brand-text)}
  .primary a .count{top:2px;right:calc(50% - 1.6rem)}
  .primary .tab-menu{display:flex}
  .shell .shell-me{display:inline-grid;flex:none}
  @supports ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
    .shell{background:transparent}.shell::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--glass);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur)}
    .primary{background:var(--glass);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur)}
  }
  .more{left:0;width:100%;padding:var(--s-4) var(--s-4) 7rem;border-right:0}
  main{padding:var(--s-5) var(--s-4) var(--s-7)}
  :root{--fs-title:2rem}.page-head{margin-bottom:var(--s-5)}.page-head p{font-size:var(--fs-body)}
  .page-head .actions{width:100%}.page-head .actions>.btn:not(.btn-quiet):not(.btn-secondary){flex:1}
  .g3,.g4{grid-template-columns:1fr 1fr}
  .card{padding:var(--s-4)}.empty{padding:var(--s-7) var(--s-4)}
  .list>li{padding:var(--s-4)}.list a.row-link{margin:calc(-1 * var(--s-4));padding:var(--s-4)}
  .menu-pop{position:fixed;left:var(--s-3);right:var(--s-3);top:auto;bottom:calc(5.5rem + env(safe-area-inset-bottom));min-width:0;padding:var(--s-3)}
  .menu-pop a,.menu-pop button{min-height:52px;font-size:var(--fs-body)}
  table.stack thead{display:none}table.stack tr{display:block;border-radius:var(--r-md);padding:var(--s-3) var(--s-4);margin-bottom:var(--s-2);background:var(--surface);box-shadow:0 0 0 1px var(--line)}table.stack td{display:grid;grid-template-columns:minmax(6.5rem,38%) minmax(0,1fr);gap:var(--s-3);border:0;padding:var(--s-1) 0;text-align:left;overflow-wrap:anywhere}table.stack td[data-label]::before{content:attr(data-label);color:var(--muted);font-size:var(--fs-small)}table.stack td:first-child
}
@media (max-width:520px){
  .g2,.g3,.g4{grid-template-columns:1fr}
  .form-foot{flex-direction:column;align-items:stretch}.form-foot .btn{width:100%}.form-foot .muted{text-align:center}
  .empty .btn{width:100%}
}

/* =====================================================================================================================
   PAGES — styles propres à un écran. Ils n'utilisent que les jetons ci-dessus.
   Règle : un seul bouton orange par écran. Quand une page en affiche plusieurs, on calme les autres ici.
   ===================================================================================================================== */

/* ---- Un seul orange par écran, appliqué partout ----
   1. Une page vide montre son bouton orange : le bouton de l'en-tête se calme.
   2. Sinon, si l'en-tête a l'action principale, les boutons pleins des cartes se calment. */
main:has(.empty .btn:not(.btn-secondary):not(.btn-quiet)) .page-head .btn:not(.btn-secondary):not(.btn-quiet):not(.btn-danger),
main:has(.page-head .btn:not(.btn-secondary):not(.btn-quiet):not(.btn-danger)):not(:has(.empty .btn)) :is(.card,.list,.tile) .btn:not(.btn-secondary):not(.btn-quiet):not(.btn-danger){--b-bg:var(--surface);color:var(--ink);box-shadow:inset 0 0 0 1px var(--line-strong),var(--shadow-sm)}
.card>.empty,.card .empty{box-shadow:none;background:none;padding:var(--s-6) var(--s-4)}

/* Barre de progression native */
progress{appearance:none;-webkit-appearance:none;width:100%;max-width:12rem;height:8px;border:0;border-radius:var(--r-full);background:var(--surface-2);overflow:hidden;vertical-align:middle;accent-color:var(--brand)}
progress::-webkit-progress-bar{background:var(--surface-2);border-radius:var(--r-full)}
progress::-webkit-progress-value{background:var(--brand);border-radius:var(--r-full)}
progress::-moz-progress-bar{background:var(--brand);border-radius:var(--r-full)}

/* ---- Bouton principal en bas, sous le pouce, sur téléphone (pages Python : .thumb-action) ---- */
@media (max-width:820px){
  .thumb-action{position:fixed;left:var(--s-4);right:var(--s-4);bottom:calc(5.5rem + env(safe-area-inset-bottom,0px));z-index:28;display:flex}
  .thumb-action .btn{flex:1;min-height:var(--tap-lg)}
  body:has(.thumb-action){padding-bottom:calc(10rem + env(safe-area-inset-bottom,0px))}
}

/* ---- Pages publiques : accueil, connexion, inscription, erreur ---- */
.hero{padding:var(--s-8) 0 var(--s-6);max-width:44rem}
.hero h1{margin:0 0 var(--s-4)}.hero .lead{margin:0 0 var(--s-6)}
.hero-actions{display:flex;gap:var(--s-3);flex-wrap:wrap;align-items:center;margin:0}
.hero-center{margin:0 auto;text-align:center}.hero-center .lead{margin-inline:auto}.hero-center .hero-actions{justify-content:center}
.pitch{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-4);margin:var(--s-5) 0 var(--s-8)}
.pitch .card,.pitch .tile{margin:0}
.pitch .n{display:inline-grid;place-items:center;width:2rem;height:2rem;border-radius:50%;background:var(--surface-2);color:var(--ink);font:650 var(--fs-small) var(--font);margin-bottom:var(--s-3)}
.pitch h3{margin:0 0 var(--s-2)}
.auth{max-width:440px;margin:0 auto;padding-top:var(--s-6)}
.auth .page-head{flex-direction:column;align-items:center;text-align:center;margin-bottom:var(--s-5)}
.auth .card{padding:var(--s-6) var(--s-5)}
.auth .form-foot{flex-direction:column;align-items:stretch;gap:var(--s-4);margin-top:var(--s-5)}.auth .form-foot .btn{width:100%;min-height:var(--tap-lg)}.auth .form-foot .muted{text-align:center}
@media (max-width:820px){.hero{padding:var(--s-6) 0 var(--s-4)}.pitch{grid-template-columns:1fr}.hero-actions .btn{flex:1 1 100%}}

/* Site public (refonte 2026-10) : aperçu de la carte en zones dessiné en HTML, tuiles de rôles */
.demo-map{margin:0 0 var(--s-7)}.demo-scene{border-radius:var(--r-lg);background:radial-gradient(120% 90% at 50% 10%,var(--surface) 0%,var(--bg) 70%);box-shadow:0 0 0 1px var(--line),var(--shadow);overflow:hidden;padding:var(--s-3)}.demo-scene svg{width:100%;height:auto;display:block}.demo-zones{display:grid;gap:var(--s-4);grid-template-columns:repeat(3,minmax(0,1fr))}.demo-zones .zone{pointer-events:none}
.face{display:inline-grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--av,var(--brand));color:var(--c-white);font:600 var(--fs-small) var(--font);box-shadow:0 0 0 2px var(--surface)}
.demo-cap{margin:var(--s-4) 0 0}.roles{display:grid;gap:var(--s-4);grid-template-columns:repeat(3,minmax(0,1fr));margin:0 0 var(--s-6)}.roles .card{margin:0}.roles h3{font-size:var(--fs-section);margin:0 0 var(--s-2)}.roles p{margin:0}
.sectors{margin:0 0 var(--s-6)}
body.public main:has(.demo-map){max-width:1040px}
@media (max-width:820px){.demo-zones,.roles{grid-template-columns:1fr}}

/* ---- Accueil (ancien récit de l'entreprise) ---- */
.home-head{margin:0 0 var(--s-6)}.home-head h1{margin:0 0 var(--s-2)}.home-head .lead{margin:0}.home-head .lead strong{color:var(--ink);font-weight:600}
.vitals{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));border-radius:var(--radius);background:var(--surface);box-shadow:0 0 0 1px var(--line),var(--shadow);margin:0 0 var(--s-6);overflow:hidden}
.vital{padding:var(--s-4) var(--s-5);border-right:1px solid var(--line);display:flex;flex-direction:column;gap:2px;text-decoration:none;color:inherit;transition:background var(--t-fast) var(--ease)}.vital:last-child{border-right:0}a.vital:hover{background:var(--surface-2)}
.vital b{font:700 var(--fs-section)/1.1 var(--font);font-variant-numeric:tabular-nums}.vital span{color:var(--muted);font-size:var(--fs-caption)}
.sect{margin:0 0 var(--s-7)}.sect>.eyebrow{margin-bottom:var(--s-3)}
.feed{list-style:none;margin:0;padding:0 0 0 var(--s-4);border-left:2px solid var(--line)}
.feed li{position:relative;padding:0 0 var(--s-4) var(--s-4)}
.feed li::before{content:"";position:absolute;left:calc(-1 * var(--s-4) - 7px);top:.5rem;width:.7rem;height:.7rem;border-radius:50%;background:var(--line-strong);box-shadow:0 0 0 4px var(--bg)}
.feed li:first-child:not(.soft)::before{background:var(--brand)}
.feed b{font-weight:600}.feed .when{display:block;color:var(--muted);font-size:var(--fs-caption)}.feed a{text-decoration:none;font-weight:600}.feed a:hover{text-decoration:underline}
.ask{display:flex;gap:var(--s-4);align-items:center;justify-content:space-between;flex-wrap:wrap;padding:var(--s-4) var(--s-5);border-radius:var(--radius);background:var(--surface);box-shadow:0 0 0 1px var(--line),inset 4px 0 0 var(--warn);margin-bottom:var(--s-3)}
.ask.urgent{box-shadow:0 0 0 1px var(--line),inset 4px 0 0 var(--danger)}
.ask .body{flex:1 1 20rem}.ask .body b{display:block;font-weight:600}.ask .body span{display:block;color:var(--muted);font-size:var(--fs-small)}.ask .body small{color:var(--muted)}
.noticed{border-radius:var(--radius);background:var(--surface);box-shadow:0 0 0 1px var(--line),var(--shadow);padding:var(--s-5);margin-bottom:var(--s-4)}.noticed h3{font-size:var(--fs-section);margin:0 0 var(--s-2)}.noticed p{margin:0 0 var(--s-4);color:var(--muted)}
.facts{display:flex;flex-wrap:wrap;gap:var(--s-2) var(--s-6);margin:var(--s-1) 0 var(--s-4)}.fact{display:flex;flex-direction:column}.fact b{font:700 var(--fs-section)/1.1 var(--font);font-variant-numeric:tabular-nums}.fact span{color:var(--muted);font-size:var(--fs-caption)}
/* « Tout va bien » : un moment calme, présenté comme une petite réussite */
.calm{display:flex;gap:var(--s-4);align-items:center;padding:var(--s-5) var(--s-6);border-radius:var(--r-lg);background:radial-gradient(90% 120% at 0% 0%,var(--ok-soft) 0%,transparent 60%),var(--surface);box-shadow:0 0 0 1px var(--line),var(--shadow);margin-bottom:var(--s-6);animation:rise var(--t-slow) var(--ease) both}
.calm .tick{flex:none;width:3rem;height:3rem;border-radius:50%;background:var(--ok);color:var(--c-white);display:grid;place-items:center}
.calm .tick svg{width:1.5rem;height:1.5rem;stroke:currentColor;fill:none;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.calm h2,.calm h3{margin:0 0 var(--s-1);font-size:var(--fs-section)}.calm p{margin:0;color:var(--muted)}.calm p+p{margin-top:var(--s-4)}
.watch{display:flex;flex-wrap:wrap;gap:var(--s-2) var(--s-5);color:var(--muted);font-size:var(--fs-small);margin:0;padding:0;list-style:none}.watch li::before{content:"";display:inline-block;width:.5rem;height:.5rem;border-radius:50%;background:var(--ok);margin-right:var(--s-2);vertical-align:middle}
.welcome-steps{list-style:none;margin:var(--s-5) 0 0;padding:0;display:grid;gap:var(--s-3)}
.welcome-steps li{display:flex;gap:var(--s-4);align-items:center;padding:var(--s-4) var(--s-5);border-radius:var(--radius);background:var(--surface);box-shadow:0 0 0 1px var(--line)}
.welcome-steps .n{flex:none;width:2rem;height:2rem;border-radius:50%;display:grid;place-items:center;font:650 var(--fs-small) var(--font);background:var(--surface-2);color:var(--ink)}
.welcome-steps li.done .n{background:var(--ok);color:var(--c-white)}
.welcome-steps b{display:block}.welcome-steps span{color:var(--muted);font-size:var(--fs-small)}.welcome-steps a.btn{margin-left:auto}
.welcome-steps li:not(:first-of-type) a.btn:not(.btn-secondary){--b-bg:var(--surface);color:var(--ink);box-shadow:inset 0 0 0 1px var(--line-strong)}

/* ---- Situations repérées (missions) ---- */
.mission{position:relative;display:grid;gap:var(--s-2);padding:var(--s-5) var(--s-5) var(--s-5) var(--s-6);border-radius:var(--radius);background:var(--surface);margin-bottom:var(--s-4);box-shadow:0 0 0 1px var(--line),var(--shadow);overflow:hidden}
.mission::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--lvl,var(--line-strong))}.mission.lvl-auto{--lvl:var(--ok)}.mission.lvl-approve{--lvl:var(--warn)}.mission.lvl-human{--lvl:var(--danger)}.mission.is-done{opacity:.72}
.mission .top{display:flex;flex-wrap:wrap;gap:var(--s-2) var(--s-4);align-items:center;color:var(--muted);font-size:var(--fs-caption)}.mission .kind{font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.mission h3{font-size:var(--fs-section);margin:0}.mission .why{margin:0}.mission .goal{margin:0;color:var(--muted);font-size:var(--fs-small)}
.autonomy{display:inline-flex;align-items:center;gap:var(--s-2);font-weight:600;color:var(--ink)}.autonomy i{width:.6rem;height:.6rem;border-radius:50%;background:var(--muted)}.autonomy.auto i{background:var(--ok)}.autonomy.approve i{background:var(--warn)}.autonomy.human i{background:var(--danger)}
.mission .acts{display:flex;flex-wrap:wrap;gap:var(--s-2);align-items:center;margin-top:var(--s-2)}.mission .acts form{margin:0}.mission .state{display:inline-flex;gap:var(--s-2);align-items:center;color:var(--muted);font-size:var(--fs-small)}
.mission~.mission .acts .btn:not(.btn-secondary):not(.btn-quiet):not(.btn-danger){--b-bg:var(--surface);color:var(--ink);box-shadow:inset 0 0 0 1px var(--line-strong)}
.mission-group{margin:var(--s-7) 0 var(--s-4)}.mission-group h2{display:flex;align-items:baseline;gap:var(--s-3)}.mission-group h2 small{font:500 var(--fs-small) var(--font);color:var(--muted)}
@media (max-width:820px){.hours{grid-template-columns:5.5rem 1fr 1fr}.vitals{grid-template-columns:1fr 1fr}.vital:nth-child(2n){border-right:0}.vital{border-bottom:1px solid var(--line)}.vital:last-child:nth-child(odd){grid-column:1/-1;border-bottom:0}.facts{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-4)}}
@media (max-width:520px){.mission{padding-left:var(--s-5)}.ask .btn,.welcome-steps a.btn{width:100%;margin-left:0}.welcome-steps li{flex-wrap:wrap}}

/* ---- Conversation avec OQEL ---- */
body.is-chat main{max-width:880px;padding:0}
.chatpane{display:flex;flex-direction:column;height:100vh;min-height:420px}
.thread{flex:1;overflow-y:auto;padding:var(--s-6) var(--s-5) var(--s-4);display:flex;flex-direction:column;gap:var(--s-3);scroll-behavior:smooth}
.msg{display:flex;gap:var(--s-3);align-items:flex-start;animation:rise var(--t) var(--ease) both}.msg.me{justify-content:flex-end}
.avatar{flex:none;width:2rem;height:2rem;border-radius:10px;background:linear-gradient(145deg,var(--orange),var(--orange-hover));color:var(--brand-ink);display:grid;place-items:center;font:800 var(--fs-caption) var(--font)}
.bubble{padding:var(--s-3) var(--s-4);border-radius:var(--radius) var(--radius) var(--radius) 6px;background:var(--surface);box-shadow:0 0 0 1px var(--line);max-width:min(560px,86%);line-height:1.55;overflow-wrap:anywhere}
.bubble.me{background:var(--ink);color:var(--bg);box-shadow:none;border-radius:var(--radius) var(--radius) 6px var(--radius)}
.bubble.me a{color:inherit}
.bubble.card-action{box-shadow:0 0 0 1.5px var(--brand);background:var(--surface)}
.quick{display:flex;flex-wrap:wrap;gap:var(--s-2);margin-top:var(--s-3)}.quick.pad{margin-left:2.75rem}
.chip{display:inline-flex;align-items:center;min-height:40px;padding:0 var(--s-4);border-radius:var(--r-full);border:0;background:var(--surface);color:var(--ink);font:500 var(--fs-small) var(--font);cursor:pointer;text-decoration:none;box-shadow:inset 0 0 0 1px var(--line-strong);transition:box-shadow var(--t-fast) var(--ease),background var(--t-fast) var(--ease),transform var(--t-fast) var(--ease)}
.chip:hover{box-shadow:inset 0 0 0 1px var(--ink)}.chip:active{transform:scale(.97)}
.chip.primary{background:var(--brand);color:var(--brand-ink);font-weight:600;box-shadow:var(--glow)}
.composer{display:flex;gap:var(--s-2);align-items:center;margin:0 var(--s-5) var(--s-5);padding:var(--s-1) var(--s-1) var(--s-1) var(--s-5);border-radius:var(--r-full);background:var(--surface);box-shadow:0 0 0 1px var(--line-strong),var(--shadow);transition:box-shadow var(--t-fast) var(--ease)}
.composer input{flex:1;border:0;background:transparent;min-height:44px;padding:0;box-shadow:none}.composer input:focus{box-shadow:none}
.composer:focus-within{box-shadow:0 0 0 1.5px var(--brand),var(--focus)}
.welcome{max-width:640px;margin:0 auto;display:flex;flex-direction:column;gap:var(--s-3);padding-top:var(--s-6)}.welcome .composer{margin:0}
body.is-chat .banner{margin:0;border-radius:0}
.oq-hero{max-width:720px;margin:0 auto;padding:var(--s-8) var(--s-4) var(--s-4)}.oq-hero h1{margin:0 0 var(--s-3)}.oq-hero p{color:var(--muted);margin:0 0 var(--s-6);max-width:34rem}
.oq-cards{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-3)}.oq-cards form{margin:0}
.oq-card{width:100%;height:100%;text-align:left;font:inherit;display:flex;flex-direction:column;gap:var(--s-2);padding:var(--s-4) var(--s-5);border-radius:var(--radius);border:0;background:var(--surface);color:var(--ink);cursor:pointer;box-shadow:0 0 0 1px var(--line),var(--shadow);transition:transform var(--t) var(--ease),box-shadow var(--t) var(--ease)}
.oq-card:hover{transform:translateY(-2px);box-shadow:0 0 0 1px var(--line-strong),var(--shadow-lg)}.oq-card:active{transform:scale(.99)}
.oq-card b{font:600 var(--fs-body)/1.3 var(--font)}.oq-card span{color:var(--muted);font-size:var(--fs-caption);font-weight:600}
@media (max-width:820px){.chatpane{height:calc(100dvh - 10rem);min-height:360px}.thread{padding:var(--s-4) var(--s-4) var(--s-2)}.composer{margin:0 var(--s-3) var(--s-3)}.oq-hero{padding:var(--s-6) var(--s-2) var(--s-3)}.oq-cards{grid-template-columns:1fr}}

/* ---- Petits éléments de pages diverses ---- */
.bars{display:flex;gap:var(--s-3);align-items:flex-end;height:150px;overflow-x:auto;padding:var(--s-2) 0}
.bar{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;min-width:2.6rem}
.bar span{width:70%;background:var(--line-strong);border-radius:6px 6px 0 0;min-height:4px}.bar:last-child span{background:var(--brand)}.bar small{color:var(--muted)}
.plan-current{box-shadow:0 0 0 2px var(--brand),var(--shadow)}.price b{font-size:var(--fs-title);letter-spacing:-.03em}
section h2{margin:var(--s-5) 0 var(--s-3)}
.findings{list-style:none;padding:0;margin:0}.findings li{padding:var(--s-3) 0;border-bottom:1px solid var(--line)}.findings pre{margin:var(--s-1) 0 0;background:var(--surface-2);padding:var(--s-2) var(--s-3);border-radius:var(--r-sm);font-size:var(--fs-caption);overflow-x:auto}
.channels{border:0;border-radius:var(--radius);margin:var(--s-2) 0 var(--s-4);padding:var(--s-4);display:flex;gap:var(--s-4);flex-wrap:wrap;background:var(--surface-2)}.channels label{font-weight:450}
.wf{list-style:none;padding:0;margin:0;display:grid;gap:var(--s-2);grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}
.wf li{display:flex;gap:var(--s-3);align-items:flex-start;padding:var(--s-3) var(--s-4);border-radius:var(--r-md);background:var(--surface);box-shadow:0 0 0 1px var(--line)}
.wf-ico{width:1.6rem;height:1.6rem;border-radius:50%;display:grid;place-items:center;background:var(--surface-2);font-size:var(--fs-caption);flex:none}
.wf-done .wf-ico{background:var(--ok);color:var(--c-white)}.wf-current{box-shadow:0 0 0 1.5px var(--brand)!important}.wf-current .wf-ico{background:var(--brand);color:var(--brand-ink)}.wf-skipped{opacity:.6}
.wf.big{grid-template-columns:1fr}.wf.big li{padding:var(--s-4)}
.swatches{display:flex;gap:var(--s-2);flex-wrap:wrap}.sw{display:inline-flex;align-items:center;gap:var(--s-2);font-size:var(--fs-caption)}.sw i{width:1.4rem;height:1.4rem;border-radius:6px;box-shadow:0 0 0 1px var(--line);display:inline-block}
.devices{display:flex;gap:var(--s-2);margin-bottom:var(--s-3)}.device-stage{background:var(--surface-2);border-radius:var(--radius);padding:var(--s-3);overflow:auto;text-align:center}
.device-frame{height:78vh;max-width:100%;border:0;box-shadow:0 0 0 1px var(--line),var(--shadow-lg);background:var(--c-white);border-radius:var(--r-md);display:inline-block}
.adopt-list{list-style:none;margin:0;padding:0}.adopt-row{display:grid;grid-template-columns:auto 1fr;gap:var(--s-1) var(--s-3);padding:var(--s-3) 0;border-top:1px solid var(--line)}
.adopt-row input[type=checkbox]{margin:2px 0 0}.adopt-name{font-weight:600;overflow-wrap:anywhere}
.adopt-meta{grid-column:2;display:flex;flex-wrap:wrap;gap:var(--s-2) var(--s-4);align-items:center;color:var(--muted);font-size:var(--fs-small)}.adopt-meta input[type=number]{width:6rem;min-height:40px}.adopt-meta span{overflow-wrap:anywhere}
details.setup{margin-top:var(--s-6)}details.setup summary{cursor:pointer;display:flex;gap:var(--s-3);align-items:center;flex-wrap:wrap}details.setup[open] summary{margin-bottom:var(--s-4)}details.setup ul.plain li{margin:var(--s-2) 0}
.uq-steps{display:flex;flex-wrap:wrap;gap:var(--s-2) var(--s-5);list-style:none;padding:0;margin:0 0 var(--s-5);color:var(--muted)}
.uq-steps li b{display:inline-grid;place-items:center;width:1.7rem;height:1.7rem;border-radius:50%;background:var(--surface-2);margin-right:var(--s-2);font-size:var(--fs-caption)}
.uq-steps .wf-done{color:var(--ok-text)}.uq-steps .wf-done b{background:var(--ok);color:var(--c-white)}.uq-steps .wf-current{color:var(--ink);font-weight:600}.uq-steps .wf-current b{background:var(--brand);color:var(--brand-ink)}
.uq-q .row-form{display:flex;flex-wrap:wrap;gap:var(--s-2);align-items:center}.uq-q .row-form input{flex:1 1 14rem;min-width:0}.uq-q details{display:inline-block;margin:var(--s-1) 0}.uq-q details[open]{display:block}

/* ---- Tableau de bord (frontend/home.ts) ---- */
.d-head{margin:0 0 var(--s-6)}.d-head h1{margin:0 0 var(--s-2)}.d-head .lead{margin:0}.d-head .lead strong{color:var(--ink);font-weight:600}
.dash{display:grid;grid-template-columns:minmax(0,1fr) 340px;grid-template-areas:"todo agenda" "rest agenda";gap:0 var(--s-6);align-items:start}
.d-todo{grid-area:todo;margin-bottom:var(--s-7)}.d-agenda{grid-area:agenda;position:sticky;top:var(--s-5)}.d-rest{grid-area:rest;min-width:0}
.dash h2{margin:0 0 var(--s-4)}
.todo{list-style:none;margin:0;padding:0;display:grid;gap:var(--s-3)}
.todo li{display:flex;gap:var(--s-4);align-items:center;justify-content:space-between;flex-wrap:wrap;padding:var(--s-4) var(--s-5);border-radius:var(--radius);background:var(--surface);box-shadow:0 0 0 1px var(--line);animation:rise var(--t-slow) var(--ease) both}
.todo li>div{flex:1 1 16rem;min-width:0}.todo .eyebrow{margin:0 0 var(--s-1)}.todo h3{margin:0}.todo p{margin:var(--s-1) 0 0;color:var(--muted);font-size:var(--fs-small)}
.todo li.first{padding:var(--s-5) var(--s-6);box-shadow:0 0 0 1px var(--line),var(--shadow-lg)}.todo li.first h3{font-size:var(--fs-section)}.todo li.first .btn{min-height:var(--tap-lg);padding:0 1.9rem}
.todo li.urgent .eyebrow{color:var(--danger-text)}.todo li.urgent:not(.first){box-shadow:0 0 0 1px var(--line),inset 4px 0 0 var(--danger)}
.dash:has(.todo li.first) .d-actions .btn:not(.btn-secondary){--b-bg:var(--surface);color:var(--ink);box-shadow:inset 0 0 0 1px var(--line-strong),var(--shadow-sm)}
.d-agenda{padding:var(--s-5);border-radius:var(--radius);background:var(--surface);box-shadow:0 0 0 1px var(--line),var(--shadow)}
.d-agh{display:flex;justify-content:space-between;align-items:baseline}.d-agh h2{margin:0}.d-agh a{font-weight:600;font-size:var(--fs-small);text-decoration:none;color:var(--muted)}.d-agh a:hover{color:var(--ink)}
.d-agenda h3{font:600 var(--fs-caption)/1 var(--font);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin:var(--s-5) 0 var(--s-2)}
.d-agenda .btn-block{margin-top:var(--s-5)}
.d-sh{display:flex;justify-content:space-between;align-items:center;gap:var(--s-4);flex-wrap:wrap;margin-bottom:var(--s-2)}.d-sh h2{margin:0}.d-period{font-size:var(--fs-small);margin:0 0 var(--s-4)}
.d-kpis{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:var(--s-3);margin-bottom:var(--s-4)}
.d-kpi{display:flex;flex-direction:column;gap:2px;padding:var(--s-4) var(--s-5);border-radius:var(--radius);background:var(--surface);box-shadow:0 0 0 1px var(--line)}
.d-kpi .lbl{color:var(--muted);font-size:var(--fs-caption)}.d-kpi b{font-size:var(--fs-section);font-weight:700;letter-spacing:-.02em;line-height:1.2;font-variant-numeric:tabular-nums}
.d-kpi .delta{font-size:var(--fs-caption);font-weight:600;color:var(--muted)}.d-kpi .delta.up{color:var(--ok-text)}.d-kpi .delta.down{color:var(--danger-text)}.d-kpi .delta small{font-weight:400}.d-kpi .note{color:var(--muted)}
.d-kpi details{margin-top:var(--s-1);font-size:var(--fs-caption)}.d-kpi summary{cursor:pointer;color:var(--muted)}.d-kpi details p{margin:var(--s-1) 0 0}
.d-progress,.d-plain{list-style:none;margin:0 0 var(--s-3);padding:0}.d-progress li,.d-plain li{padding:var(--s-3) 0;border-bottom:1px solid var(--line)}.d-progress li:last-child,.d-plain li:last-child{border-bottom:0}
.d-progress a{font-weight:600;text-decoration:none;color:var(--ink)}.d-progress a:hover{text-decoration:underline}.d-progress small,.d-plain small{display:block;color:var(--muted)}.d-plain li.warn b{color:var(--warn-text)}
.d-actions{display:flex;flex-wrap:wrap;gap:var(--s-2)}.d-short{display:flex;flex-wrap:wrap;gap:var(--s-2);margin-top:var(--s-3)}
.d-spaces{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:var(--s-3);margin-bottom:var(--s-4)}
.d-spaces .ws-space{display:flex;flex-direction:column;gap:var(--s-1);padding:var(--s-5);border-radius:var(--radius);background:var(--surface);box-shadow:0 0 0 1px var(--line);text-decoration:none;color:var(--ink);transition:transform var(--t) var(--ease),box-shadow var(--t) var(--ease)}
.d-spaces .ws-space:hover{transform:translateY(-2px);box-shadow:0 0 0 1px var(--line-strong),var(--shadow-lg)}.d-spaces .ws-space:active{transform:scale(.99)}
.d-spaces .ws-space b{font-size:var(--fs-body)}.d-spaces .ws-space small{color:var(--muted);font-size:var(--fs-small)}.d-spaces .ws-space .meta{display:flex;gap:var(--s-2);flex-wrap:wrap;margin-top:var(--s-1)}
@media (max-width:1000px){.dash{grid-template-columns:minmax(0,1fr);grid-template-areas:"todo" "agenda" "rest"}.d-agenda{position:static;margin-bottom:var(--s-7)}}
@media (max-width:520px){.todo li .btn{width:100%}.todo li.first{padding:var(--s-5)}.d-kpis{grid-template-columns:1fr 1fr}}

/* ---- Agenda (frontend/agenda.ts et python/templates/agenda.html) : une couleur sobre par nature d'élément ---- */
.k-booking{--k:var(--cat-booking)}.k-meeting{--k:var(--cat-meeting)}.k-task{--k:var(--warn)}.k-block{--k:var(--cat-block)}.k-event{--k:var(--cat-event)}
.ag-head{display:flex;justify-content:space-between;align-items:flex-end;gap:var(--s-4);flex-wrap:wrap;margin:0 0 var(--s-5)}.ag-head h1{margin:0}.ag-head>div:first-child{min-width:0;flex:1 1 auto}@media (max-width:820px){.ag-head{flex-wrap:nowrap;align-items:flex-start}.ag-head .actions{flex-wrap:nowrap}}.ag-head .actions{align-items:center}
.ag-bar{display:flex;justify-content:space-between;align-items:center;gap:var(--s-3);flex-wrap:wrap;margin:0 0 var(--s-5)}
.ag-step{display:flex;gap:var(--s-2)}.ag-step .btn{min-width:44px}.ag-step svg{width:1.15rem;height:1.15rem}
.ag-dot{flex:none;width:.6rem;height:.6rem;border-radius:50%;background:var(--k,var(--muted));margin-top:.5rem}
.ag-items{list-style:none;margin:0;padding:0}.ag-item{display:flex;gap:var(--s-3);align-items:flex-start;padding:var(--s-2) 0}
.ag-item>div{min-width:0;overflow-wrap:anywhere}.ag-item a,.ag-item b{font-weight:600;text-decoration:none;color:var(--ink)}.ag-item a:hover{text-decoration:underline}.ag-item small{display:block;color:var(--muted);font-size:var(--fs-small)}
.ag-item time{flex:none;width:3.4rem;color:var(--ink);font-weight:600;font-size:var(--fs-small);font-variant-numeric:tabular-nums;padding-top:2px}
.ag-list{display:grid;gap:var(--s-3)}.ag-day{padding:var(--s-4) var(--s-5);border-radius:var(--radius);background:var(--surface);box-shadow:0 0 0 1px var(--line)}
.ag-day h2{font-size:var(--fs-body);margin:0 0 var(--s-1)}.ag-day.today{box-shadow:0 0 0 1px var(--line),inset 4px 0 0 var(--brand)}.ag-day.today h2{color:var(--brand-text)}.ag-day.late{box-shadow:0 0 0 1px var(--line),inset 4px 0 0 var(--danger)}.ag-day.late h2{color:var(--danger-text)}
.ag-timeline{padding:var(--s-1) var(--s-5);border-radius:var(--radius);background:var(--surface);box-shadow:0 0 0 1px var(--line),var(--shadow)}.ag-timeline .ag-item{padding:var(--s-4) 0;border-bottom:1px solid var(--line)}.ag-timeline .ag-item:last-child{border-bottom:0}
.ag-week{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:var(--s-2)}
.ag-week>li{min-width:0;padding:var(--s-3);border-radius:var(--r-md);background:var(--surface);box-shadow:0 0 0 1px var(--line);min-height:9rem}
.ag-week>li.today{box-shadow:0 0 0 1.5px var(--brand)}.ag-week>li.free p{font-size:var(--fs-caption);margin:var(--s-1) 0 0}
.ag-dh{display:flex;gap:var(--s-2);align-items:baseline;text-decoration:none;color:var(--muted);margin-bottom:var(--s-1);font-size:var(--fs-caption);text-transform:capitalize}.ag-dh b{font-size:var(--fs-section);color:var(--ink)}.today .ag-dh b{color:var(--brand-text)}
.ag-week .ag-item{flex-wrap:wrap;gap:2px var(--s-2);padding:var(--s-2) 0;border-top:1px solid var(--line)}.ag-week .ag-item time{width:auto;font-size:var(--fs-caption)}.ag-week .ag-item .ag-dot{margin-top:.4rem}.ag-week .ag-item>div{flex-basis:100%}.ag-week .ag-item small{font-size:var(--fs-caption)}
.ag-month{border-radius:var(--radius);background:var(--surface);box-shadow:0 0 0 1px var(--line),var(--shadow);overflow:hidden}
.ag-wk{display:grid;grid-template-columns:repeat(7,minmax(0,1fr))}.ag-wk:first-child span{padding:var(--s-2);font-size:var(--fs-caption);font-weight:600;color:var(--muted);text-align:center;text-transform:capitalize}
.ag-cell{display:flex;flex-direction:column;gap:var(--s-1);min-height:6.2rem;padding:var(--s-2);border-top:1px solid var(--line);border-left:1px solid var(--line);text-decoration:none;color:var(--ink);min-width:0;transition:background var(--t-fast) var(--ease)}.ag-wk .ag-cell:first-child{border-left:0}
.ag-cell:hover{background:var(--surface-2)}.ag-cell.out{color:var(--muted);background:color-mix(in srgb,var(--bg) 60%,transparent)}
.ag-cell>b{font-size:var(--fs-small);width:1.8rem;height:1.8rem;display:grid;place-items:center;border-radius:50%}.ag-cell.today>b{background:var(--brand);color:var(--brand-ink)}
.ag-chips{list-style:none;margin:0;padding:0;display:grid;gap:2px}.ag-chips li{font-size:var(--fs-caption);line-height:1.35;padding:1px var(--s-2);border-radius:6px;background:color-mix(in srgb,var(--k,var(--muted)) 12%,transparent);box-shadow:inset 3px 0 0 var(--k,var(--muted));white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ag-chips li.more{background:none;box-shadow:none;color:var(--muted)}
.ag-dots{display:none;gap:3px;flex-wrap:wrap}.ag-dots i{width:.42rem;height:.42rem;border-radius:50%;background:var(--k)}
.ag-legend{display:flex;flex-wrap:wrap;gap:var(--s-2) var(--s-5);list-style:none;margin:var(--s-4) 0 var(--s-6);padding:0;color:var(--muted);font-size:var(--fs-caption)}.ag-legend li{display:flex;gap:var(--s-2);align-items:center}.ag-legend .ag-dot{margin:0}
@media (max-width:900px){.ag-week{grid-template-columns:minmax(0,1fr)}.ag-week>li{min-height:0;display:grid;grid-template-columns:4.2rem minmax(0,1fr);gap:var(--s-3);align-items:start}.ag-week>li.free{opacity:.7}.ag-dh{flex-direction:column;gap:0;margin:0}.ag-week .ag-item:first-child{border-top:0}}
@media (max-width:640px){.ag-cell{min-height:3.4rem;align-items:center;padding:var(--s-1) 2px}.ag-chips{display:none}.ag-dots{display:flex;justify-content:center}.ag-bar{flex-direction:column;align-items:stretch}.ag-bar .segments{display:flex}.ag-bar .segments a{flex:1;justify-content:center;padding-inline:var(--s-2)}.ag-step{justify-content:space-between}.ag-step .btn:nth-child(2){flex:1}}

/* ---- Comptabilité (frontend/bookskit.ts, pages/books.ts) : le quotidien d'abord ---- */
.bk-tabs{display:flex;flex-wrap:wrap;gap:var(--s-2);align-items:flex-start;margin:0 0 var(--s-6)}.bk-tabs .segments{flex-wrap:wrap;border-radius:var(--radius)}
.bk-more>summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:var(--s-2);min-height:40px;padding:0 var(--s-4);border-radius:var(--r-full);font-weight:550;color:var(--muted);font-size:var(--fs-small);background:var(--surface-2);transition:color var(--t-fast) var(--ease)}
.bk-more>summary::-webkit-details-marker{display:none}.bk-more>summary::after{content:"";width:.4rem;height:.4rem;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg) translateY(-2px);transition:transform var(--t) var(--ease)}
.bk-more>summary:hover,.bk-more[open]>summary{color:var(--ink)}.bk-more[open]>summary::after{transform:rotate(-135deg)}
.bk-more[open]{flex-basis:100%}
.bk-money,.bk-pay{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:var(--s-3)}
.bk-money>div,.bk-pay>a{display:flex;flex-direction:column;gap:var(--s-1);padding:var(--s-5);border-radius:var(--radius);background:var(--surface);box-shadow:0 0 0 1px var(--line),var(--shadow);text-decoration:none;color:var(--ink)}
.bk-money span,.bk-pay span{color:var(--muted);font-weight:550;font-size:var(--fs-small)}.bk-money b,.bk-pay b{font-size:var(--fs-title);font-weight:750;letter-spacing:-.035em;line-height:1.1;font-variant-numeric:tabular-nums}.bk-money small,.bk-pay small{color:var(--muted)}
.bk-money .in b{color:var(--ok-text)}.bk-money .left b{color:var(--brand-text)}
.bk-pay>a{transition:transform var(--t) var(--ease),box-shadow var(--t) var(--ease)}.bk-pay>a:hover{transform:translateY(-2px);box-shadow:0 0 0 1px var(--line-strong),var(--shadow-lg)}.bk-pay>a:active{transform:scale(.99)}.bk-pay small{color:var(--ink);font-weight:600}
.bk-todo{list-style:none;margin:0;padding:0;display:grid;gap:var(--s-3)}
.bk-todo li{display:flex;gap:var(--s-4);align-items:center;justify-content:space-between;flex-wrap:wrap;padding:var(--s-4) var(--s-5);border-radius:var(--radius);background:var(--surface);box-shadow:0 0 0 1px var(--line),inset 4px 0 0 var(--warn)}
.bk-todo li>div{flex:1 1 16rem}.bk-todo small{display:block;color:var(--muted)}
.bk-todo li+li .btn:not(.btn-secondary):not(.btn-quiet):not(.btn-danger){--b-bg:var(--surface);color:var(--ink);box-shadow:inset 0 0 0 1px var(--line-strong)}

/* Téléphone : les petites commandes propres à certaines pages atteignent aussi 48 px */
@media (max-width:820px){.chip{min-height:var(--tap)}.composer input{min-height:var(--tap)}.adopt-meta input[type=number]{min-height:var(--tap)}}

/* ---- 29. Organisation (refonte 2026-10) : urgence = icône + mot (jamais la couleur seule), zones, tuiles personne/agent, fil d'Ariane de zoom.
   Trois couleurs d'état seulement : --danger (Urgent), --warn (À surveiller), --ok (Ça va). Rien d'autre n'utilise ces couleurs sur le plan. ---- */
:root{--ico-clock:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cmask id='m'%3E%3Crect width='24' height='24' fill='%23fff'/%3E%3Cpath d='M12 7v5.5l3.5 2' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/mask%3E%3Ccircle cx='12' cy='12' r='11' mask='url(%23m)'/%3E%3C/svg%3E");
  --ico-tri:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cmask id='m'%3E%3Crect width='24' height='24' fill='%23fff'/%3E%3Cpath d='M12 9v4.5' stroke='%23000' stroke-width='2.6' stroke-linecap='round'/%3E%3Ccircle cx='12' cy='17' r='1.5' fill='%23000'/%3E%3C/mask%3E%3Cpath d='M12 2.5 23 21.5H1Z' mask='url(%23m)'/%3E%3C/svg%3E")}
.urg{display:inline-flex;align-items:center;gap:.4rem;padding:.25rem .8rem .25rem .55rem;border-radius:var(--r-full);font:650 var(--fs-caption)/1.5 var(--font);color:var(--ink);background:var(--surface-2);white-space:nowrap;vertical-align:middle}
.urg::before{content:"";flex:none;width:1rem;height:1rem;background:var(--muted);-webkit-mask:var(--ico-ok) center/100% no-repeat;mask:var(--ico-ok) center/100% no-repeat}
.urg-green{background:var(--ok-soft)}.urg-green::before{background:var(--ok)}
.urg-amber{background:var(--warn-soft)}.urg-amber::before{background:var(--warn);-webkit-mask-image:var(--ico-clock);mask-image:var(--ico-clock)}
.urg-red{background:var(--danger-soft)}.urg-red::before{background:var(--danger);-webkit-mask-image:var(--ico-tri);mask-image:var(--ico-tri)}
.urg.lg{font-size:var(--fs-small);padding:.4rem 1rem .4rem .7rem}.urg.lg::before{width:1.25rem;height:1.25rem}
.urg-lock{background:var(--surface-2);color:var(--muted)}.urg-lock::before{background:var(--muted);-webkit-mask-image:var(--ico-lock);mask-image:var(--ico-lock)}
:root{--ico-lock:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 10.5h14v9.5H5z'/%3E%3Cpath d='M8.5 10.5V8a3.5 3.5 0 0 1 7 0v2.5' fill='none' stroke='%23000' stroke-width='2.2'/%3E%3C/svg%3E")}
.av.av-locked{--av:var(--surface-2);color:var(--muted)}.av.av-locked svg{width:55%;height:55%;fill:none;stroke:currentColor;stroke-width:var(--ico-stroke);stroke-linecap:round;stroke-linejoin:round}
.zone.restricted{background:var(--surface-2);box-shadow:0 0 0 1px var(--line)}
.zoom{display:flex;align-items:center;gap:var(--s-1);flex-wrap:wrap;margin:0 0 var(--s-4);font-size:var(--fs-small)}
.zoom a{display:inline-flex;align-items:center;min-height:40px;padding:0 var(--s-3);border-radius:var(--r-full);text-decoration:none;color:var(--muted);background:var(--surface-2);font-weight:550;transition:color var(--t-fast) var(--ease)}.zoom a:hover{color:var(--ink)}
.zoom .sep{color:var(--muted);padding:0 2px}.zoom b{display:inline-flex;align-items:center;min-height:40px;padding:0 var(--s-3);font-weight:650}
.org-head{display:flex;justify-content:space-between;gap:var(--s-4) var(--s-5);align-items:flex-start;flex-wrap:wrap;margin-bottom:var(--s-5)}
.org-head h1{margin:0 0 var(--s-2)}.org-head .lead{margin:0;display:flex;align-items:center;gap:var(--s-3);flex-wrap:wrap}
.zones{display:grid;gap:var(--s-4);grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));margin:0 0 var(--s-6)}
.zone{display:flex;flex-direction:column;gap:var(--s-3);padding:var(--s-5);border-radius:var(--radius);background:var(--surface);box-shadow:0 0 0 1px var(--line),var(--shadow);text-decoration:none;color:var(--ink);transition:transform var(--t) var(--ease),box-shadow var(--t) var(--ease)}
a.zone:hover{transform:translateY(-2px);box-shadow:0 0 0 1px var(--line-strong),var(--shadow-lg)}
.zone.u-red{box-shadow:inset 6px 0 0 var(--danger),0 0 0 1px var(--line),var(--shadow)}.zone.u-amber{box-shadow:inset 6px 0 0 var(--warn),0 0 0 1px var(--line),var(--shadow)}
a.zone.u-red:hover{box-shadow:inset 6px 0 0 var(--danger),0 0 0 1px var(--line-strong),var(--shadow-lg)}a.zone.u-amber:hover{box-shadow:inset 6px 0 0 var(--warn),0 0 0 1px var(--line-strong),var(--shadow-lg)}
.zone-head{display:flex;align-items:center;gap:var(--s-3);flex-wrap:wrap}.zone-head .urg{margin-left:auto}
.zico{display:inline-grid;place-items:center;width:44px;height:44px;border-radius:var(--r-md);background:var(--surface-2);color:var(--ink);flex:none}
.zico svg{width:1.4rem;height:1.4rem;fill:none;stroke:currentColor;stroke-width:var(--ico-stroke);stroke-linecap:round;stroke-linejoin:round}
.zone-head b{font-size:var(--fs-section);font-weight:650;letter-spacing:-.02em;line-height:var(--lh-tight);flex:1;min-width:8rem;overflow-wrap:anywhere}
.zone-row{display:flex;flex-direction:column;gap:var(--s-1)}.zone-row small{color:var(--muted);font:600 var(--fs-caption)/1.3 var(--font);letter-spacing:.06em;text-transform:uppercase}
.faces{display:flex;flex-wrap:wrap;gap:var(--s-2);align-items:center;min-height:40px}.faces .av{width:40px;height:40px;font-size:var(--fs-small)}
.faces .faces-more{display:inline-grid;place-items:center;min-width:40px;height:40px;padding:0 .5rem;border-radius:var(--r-full);background:var(--surface-2);font:600 var(--fs-caption) var(--font);color:var(--muted)}
.bot{display:inline-flex;align-items:center;gap:.45rem;min-height:40px;padding:0 .8rem 0 .55rem;border-radius:var(--r-full);border:1.5px dashed var(--line-strong);background:var(--bg);font:550 var(--fs-caption)/1.2 var(--font);color:var(--ink)}.bot.off{opacity:.55}
.bot svg{width:1.15rem;height:1.15rem;flex:none;fill:none;stroke:currentColor;stroke-width:var(--ico-stroke);stroke-linecap:round;stroke-linejoin:round;color:var(--muted)}
.zone-foot{display:flex;justify-content:space-between;align-items:center;gap:var(--s-3);margin-top:auto;color:var(--muted);font-size:var(--fs-small)}
.tiles{display:grid;gap:var(--s-3);grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));margin:0 0 var(--s-4)}
.ptile{display:grid;grid-template-columns:48px minmax(0,1fr) auto;gap:var(--s-3);align-items:center;min-height:72px;padding:var(--s-3) var(--s-4);border-radius:var(--radius);background:var(--surface);box-shadow:0 0 0 1px var(--line),var(--shadow-sm);text-decoration:none;color:var(--ink);transition:transform var(--t) var(--ease),box-shadow var(--t) var(--ease)}
a.ptile:hover{transform:translateY(-1px);box-shadow:0 0 0 1px var(--line-strong),var(--shadow)}
.ptile .av{width:48px;height:48px;font-size:var(--fs-body)}.ptile b{display:block;font-weight:650;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ptile small{display:block;color:var(--muted);font-size:var(--fs-small);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ptile.agent{border:1.5px dashed var(--line-strong);background:var(--bg);box-shadow:none}a.ptile.agent:hover{box-shadow:none;border-color:var(--ink)}
.av.robot{--av:var(--surface-2);color:var(--ink);box-shadow:none}.av.robot svg{width:55%;height:55%;fill:none;stroke:currentColor;stroke-width:var(--ico-stroke);stroke-linecap:round;stroke-linejoin:round}
.org-sect{margin:0 0 var(--s-6)}.org-sect>h2{display:flex;align-items:center;gap:var(--s-3);margin:0 0 var(--s-3)}.org-sect>h2 small{color:var(--muted);font-weight:500;font-size:var(--fs-small)}
.sheet-head{display:flex;gap:var(--s-4);align-items:center;flex-wrap:wrap;margin:0 0 var(--s-4)}.sheet-head>div{flex:1;min-width:14rem}.sheet-head .av.av{width:64px;height:64px;font-size:var(--fs-section)}.sheet-head h1{margin:0 0 .2rem}.sheet-head .sheet-who{color:var(--muted);margin:0}.sheet-head .urg{margin-left:auto}
.approve{display:flex;flex-direction:column;gap:var(--s-3)}.approve .acts{display:flex;gap:var(--s-2);flex-wrap:wrap}.approve p{margin:var(--s-2) 0 0}
.honest{font-size:var(--fs-small);color:var(--muted);margin:0 0 var(--s-5);max-width:48rem}
.tasklist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--s-2)}
.tasklist li{display:flex;gap:var(--s-3);align-items:center;flex-wrap:wrap;min-height:52px;padding:var(--s-2) var(--s-3);border-radius:var(--r-md);background:var(--surface);box-shadow:0 0 0 1px var(--line)}
.tasklist li b{flex:1;min-width:10rem;font-weight:600}.tasklist li b a{text-decoration:none}.tasklist li small{color:var(--muted);font-size:var(--fs-small)}.tasklist li .zico{width:36px;height:36px}
.pulse{display:flex;gap:var(--s-3);flex-wrap:wrap;margin:0 0 var(--s-5)}.pulse a{flex:1 1 140px;display:flex;flex-direction:column;gap:2px;padding:var(--s-3) var(--s-4);border-radius:var(--r-md);background:var(--surface);box-shadow:0 0 0 1px var(--line);text-decoration:none;color:var(--ink)}.pulse b{font-size:var(--fs-title);font-weight:700;letter-spacing:-.03em;line-height:1.1;font-variant-numeric:tabular-nums}.pulse span{display:flex;align-items:center;gap:var(--s-2);color:var(--muted);font-size:var(--fs-small)}.pulse a.u-red{box-shadow:inset 6px 0 0 var(--danger),0 0 0 1px var(--line)}.pulse a:hover{box-shadow:0 0 0 1px var(--line-strong),var(--shadow)}.eyebrow .urg{margin-left:var(--s-2);text-transform:none;letter-spacing:0}
@media (max-width:820px){.zones,.tiles{grid-template-columns:1fr}.org-head .actions{width:100%}.org-head .actions>.btn:not(.btn-quiet):not(.btn-secondary){flex:1}.sheet-head .urg{margin-left:0}}

/* ---- 30. Le bureau comme interface : panneau latéral en verre dépoli, bulles de notification, page « panneau seul » ---- */
.panel{position:fixed;top:var(--s-4);right:var(--s-4);bottom:var(--s-4);z-index:35;width:min(440px,calc(100vw - var(--rail) - 2 * var(--s-4)));display:none;flex-direction:column;border-radius:var(--r-lg);background:var(--glass-strong);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);box-shadow:0 0 0 1px var(--line),var(--shadow-lg);overflow:hidden;animation:rise var(--t-slow) var(--ease)}
.panel.open{display:flex}
.panel-head{display:flex;align-items:center;gap:var(--s-3);padding:var(--s-4) var(--s-4) var(--s-3);border-bottom:1px solid var(--line)}
.panel-head b{flex:1;min-width:0;font-size:var(--fs-section);font-weight:650;letter-spacing:-.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.panel-close{display:inline-grid;place-items:center;width:var(--tap);height:var(--tap);border-radius:var(--r-full);border:0;background:var(--surface-2);color:var(--ink);cursor:pointer;font:inherit}.panel-close:hover{background:var(--line)}
.panel-close svg{width:1.2rem;height:1.2rem;fill:none;stroke:currentColor;stroke-width:var(--ico-stroke);stroke-linecap:round}
.panel-body{flex:1;overflow:auto;padding:var(--s-4) var(--s-4) var(--s-6)}
.panel-body .zoom,.panel-body .tnav2{display:none}.panel-body .org-head{margin-bottom:var(--s-4)}.panel-body .org-head h1{font-size:var(--fs-section)}.panel-body .sheet-head h1{font-size:var(--fs-section)}
.panel-body .card{padding:var(--s-4)}.panel-body .tiles,.panel-body .zones{grid-template-columns:1fr}.panel-body .lead{font-size:var(--fs-body)}
.panel-body[aria-busy=true]{opacity:.6}
body.panel-only{background:transparent;padding:0}
.toasts{position:fixed;right:var(--s-4);bottom:calc(var(--s-4) + 72px);z-index:45;display:flex;flex-direction:column;gap:var(--s-2);pointer-events:none}
.toast{display:flex;align-items:center;gap:var(--s-3);max-width:min(380px,90vw);padding:var(--s-3) var(--s-4);border-radius:var(--r-full);background:var(--glass-strong);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);box-shadow:0 0 0 1px var(--line),var(--shadow);font-size:var(--fs-small);color:var(--ink);pointer-events:auto;animation:rise var(--t-slow) var(--ease)}
.toast.ok{box-shadow:0 0 0 1px var(--ok),var(--shadow)}.toast.win{box-shadow:0 0 0 1px var(--brand),var(--shadow)}
@media (max-width:820px){.panel{top:auto;left:var(--s-2);right:var(--s-2);bottom:calc(4.5rem + env(safe-area-inset-bottom));width:auto;max-height:72vh;border-radius:var(--r-lg)}.toasts{right:var(--s-3);bottom:calc(5.5rem + env(safe-area-inset-bottom) + var(--s-2))}}

/* chiffres clés d'une pièce (refonte, 3e passe) : 2 ou 3 grosses cartes */
.figures{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:var(--s-3);margin:0 0 var(--s-5)}.fig{display:flex;flex-direction:column;gap:2px;padding:var(--s-4);border-radius:var(--r-md);background:var(--surface);box-shadow:0 0 0 1px var(--line)}.fig b{font-size:var(--fs-title);font-weight:700;letter-spacing:-.03em;line-height:1.1;font-variant-numeric:tabular-nums}.fig span{color:var(--muted);font-size:var(--fs-small)}.fig.fig-ok b{color:var(--ok-text);font-size:var(--fs-section)}

/* essai gratuit : une pastille discrète en haut à droite (plus de bandeau) */
.trial-pill{position:fixed;top:var(--s-3);right:var(--s-4);z-index:27;display:inline-flex;align-items:center;min-height:32px;padding:0 var(--s-3);border-radius:var(--r-full);background:var(--brand-soft);color:var(--ink);font:600 var(--fs-caption) var(--font);text-decoration:none;box-shadow:0 0 0 1px var(--line)}.trial-pill:hover{background:var(--surface)}
@media (max-width:820px){.trial-pill{top:auto;bottom:calc(5.5rem + env(safe-area-inset-bottom) + var(--s-2));right:var(--s-3)}}

/* fiche d'avatar (3e passe) : la grosse carte « En cours » */
.now-card{padding:var(--s-5);margin:0 0 var(--s-5)}.now-card.u-red{box-shadow:inset 6px 0 0 var(--danger),0 0 0 1px var(--line),var(--shadow)}.now-card.u-amber{box-shadow:inset 6px 0 0 var(--warn),0 0 0 1px var(--line),var(--shadow)}
.now-card .eyebrow{display:flex;align-items:center;gap:var(--s-2)}.now-card h2{font-size:var(--fs-section);margin:0 0 var(--s-3)}
.now-meta{display:flex;gap:var(--s-4) var(--s-6);flex-wrap:wrap;margin:0 0 var(--s-4)}.now-meta div{display:flex;flex-direction:column}.now-meta dt{font:600 var(--fs-caption) var(--font);letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}.now-meta dd{margin:2px 0 0}
.now-steps{margin:0 0 var(--s-4);padding-left:1.3rem}.now-steps li{margin:0 0 4px}.now-steps li.done{color:var(--muted);text-decoration:line-through}
.now-acts{display:flex;align-items:center;gap:var(--s-2)}.tmenu>summary{list-style:none}.tmenu>summary::-webkit-details-marker{display:none}

.fold-card>summary{cursor:pointer;font-size:var(--fs-body);list-style:none}.fold-card>summary::-webkit-details-marker{display:none}.fold-card>summary::before{content:'▸ ';color:var(--muted)}.fold-card[open]>summary::before{content:'▾ '}.fold-card[open]>summary{margin-bottom:var(--s-3)}

/* ---------------------------------------------------------------- comptes (Bureau V2) : force du mot de passe, double authentification */
.pw-meter{display:grid;gap:4px;margin:-8px 0 16px}
.pw-bar{display:block;height:6px;border-radius:3px;background:var(--line, #e3e8ee);overflow:hidden}
.pw-bar i{display:block;height:100%;width:0;background:#9aa5b1;transition:width .2s ease}
.pw-meter[data-score="1"] .pw-bar i,.pw-meter[data-score="0"] .pw-bar i{background:#b91c1c}
.pw-meter[data-score="2"] .pw-bar i{background:#d97706}
.pw-meter[data-score="3"] .pw-bar i{background:#15803d}
.pw-meter[data-score="4"] .pw-bar i{background:#0f6e56}
.pw-label{color:var(--muted);min-height:1.2em}
label.check{display:flex;gap:8px;align-items:baseline;margin:-8px 0 16px}
.wide-auth{max-width:560px}
.qr{margin:12px 0;max-width:220px}
.qr svg{width:100%;height:auto;display:block}
.secret{display:inline-block;font-size:1.05rem;letter-spacing:.06em;padding:2px 6px;background:var(--surface-2, #f4f6f8);border-radius:6px;user-select:all}
.backup-codes{list-style:none;padding:0;margin:12px 0;display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.backup-codes code{display:block;padding:8px 12px;background:var(--surface-2, #f4f6f8);border-radius:8px;font-size:1.05rem;letter-spacing:.08em;text-align:center;user-select:all}
.dev-only{border-style:dashed}


/* ---- messages passagers (Bureau V2) ---- */
.alert-transient{position:relative;padding-right:calc(var(--s-5) + 32px);transition:opacity .25s var(--ease),transform .25s var(--ease)}
.alert-hide{opacity:0;transform:translateY(-4px)}
.alert-close{position:absolute;right:var(--s-3);top:50%;transform:translateY(-50%);width:32px;height:32px;border:0;border-radius:50%;background:transparent;color:var(--muted);font:500 1.3rem/1 var(--font);cursor:pointer}.alert-close:hover{background:var(--surface-2);color:var(--ink)}
@media (prefers-reduced-motion:reduce){.alert-transient{transition:none}}
/* Pied de page légal réutilisable (frontend/templates/legal/_pied.html, docs/legal/GUIDE-FUSION.md) */
.legal-pied-zone{padding:var(--s-5,24px) var(--s-4,16px);text-align:center}.legal-pied{font-size:var(--fs-small,.875rem);color:var(--muted);line-height:2}.legal-pied a{color:inherit;display:inline-block;padding:0 2px}