/* ==========================================================================
   Harnais v3 : design system (Dev C, spec §5).
   Tokens, base, primitives partagées (.label, .title, .chip, .cta, .btn-round,
   .btn-ghost, .status, .tok, .pill-slider, .bubble) et calques construits ou
   animés par motion.js (préchargeur, rideau, sheets, toasts, glisser pour
   autoriser, anneaux). Langage repris de aquidev.com (portfolio).
   Règles : aucune transition `all`, rien n'anime left/top/width/height/box-shadow.
   ========================================================================== */

/* ---------- 5.1 Tokens (exacts) ---------- */
:root{
  color-scheme: light;
  --paper:#f3f0e8; --paper-2:#ebe6da; --paper-3:#e6e1d5; --paper-hi:#faf8f3;
  --ink:#0e0d0b; --ink-2:#1a1814; --ink-3:#4a4542;
  --flame:#f2541b; --flame-deep:#c73c0c; --flame-50:#fff3ec; --amber:#ffb000;
  --smoke:#6f6a62; --ash:#9d978d; --logo-a:#f4500c; --logo-b:#fbab1c;
  --line:rgba(14,13,11,.10); --line-2:rgba(14,13,11,.15); --line-3:rgba(14,13,11,.25);
  --line-ink:rgba(243,240,232,.15); --line-ink-soft:rgba(243,240,232,.10);

  --font-grotesk:"Bricolage Grotesque","Plus Jakarta Sans",system-ui,sans-serif;
  --font-serif:"Instrument Serif",Georgia,"Times New Roman",serif;
  --font-code:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --font-sans:"Plus Jakarta Sans",system-ui,-apple-system,sans-serif;

  --fs-giant:clamp(4.5rem,11vw,12rem); --fs-h1:clamp(2.4rem,4.2vw,4.25rem); --fs-h2:clamp(1.5rem,1.9vw,2.125rem);
  --fs-kpi:clamp(2.6rem,4vw,4.5rem); --fs-card:clamp(1.5rem,1.8vw,2rem); --fs-h3:1.375rem;
  --fs-body:15px; --lh-body:1.6; --fs-ui:13px; --fs-btn:14px; --fs-label:11px; --fs-label-sm:10px;
  --ls-label:.18em; --ls-label-sm:.14em; --lh-tight:.95; --ls-tight:-.035em; --ls-card:-.03em; --ls-giant:-.06em;

  --r-pill:9999px; --r-card:28px; --r-panel:24px; --r-tile:22px; --r-room:18px; --r-bubble-cut:6px;

  --sh-card:0 30px 60px -30px rgba(14,13,11,.55); --sh-card-lg:0 40px 80px -40px rgba(14,13,11,.55);
  --sh-bubble:0 30px 60px -36px rgba(14,13,11,.45); --sh-dock:0 -12px 32px -12px rgba(14,13,11,.45);
  --sh-token:0 10px 18px -8px rgba(14,13,11,.5); --sh-toast:0 20px 40px -16px rgba(14,13,11,.5);

  --ease-out-expo:cubic-bezier(.16,1,.3,1); --ease-in-out-quart:cubic-bezier(.76,0,.24,1);
  --ease-out-quart:cubic-bezier(.165,.84,.44,1); --ease-in-quart:cubic-bezier(.895,.03,.685,.22);
  --d-xs:.15s; --d-s:.3s; --d-m:.6s; --d-l:.9s; --d-xl:1.2s; --d-xxl:1.4s;

  --rail:76px; --hdr:72px; --ticker:40px; --aside:400px; --aside-2:360px; --gutter:20px; --dock:64px; --legend:56px;
  --safe-t:env(safe-area-inset-top,0px); --safe-b:env(safe-area-inset-bottom,0px);
  --safe-l:env(safe-area-inset-left,0px); --safe-r:env(safe-area-inset-right,0px);
  --dock-space:calc(var(--dock) + var(--safe-b));

  --z-room:1; --z-route:3; --z-chip:4; --z-token:5; --z-bubble:8; --z-hud:12; --z-panel:20; --z-header:40;
  --z-dock:50; --z-sheet:60; --z-toast:65; --z-grain:70; --z-curtain:90; --z-cursor:100;
}
@media (max-width:999.98px){:root{--gutter:16px;--hdr:calc(56px + var(--safe-t));--ticker:32px}}

/* ---------- 5.2 Base et utilitaires (exacts) ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html,body{margin:0}
body{background:var(--paper);color:var(--ink);font:400 var(--fs-body)/var(--lh-body) var(--font-sans);-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;overscroll-behavior-y:none}
button,input,textarea{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0;padding:0;touch-action:manipulation}
[hidden]{display:none!important}
::selection{background:var(--flame);color:var(--ink)}
:focus-visible{outline:2px solid var(--flame);outline-offset:3px}
.sr-only{position:absolute!important;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.i{width:1em;height:1em;fill:currentColor;flex:none;display:inline-block;vertical-align:-.125em}
.mono{font-family:var(--font-code);text-transform:uppercase;letter-spacing:var(--ls-label-sm);font-size:var(--fs-label-sm)}
.num{font-family:var(--font-grotesk);font-weight:600;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.grain{position:fixed;inset:-50%;z-index:var(--z-grain);pointer-events:none;opacity:.07;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 1s steps(6) infinite}
@keyframes grain{0%,100%{transform:translate(0,0)}20%{transform:translate(-5%,3%)}40%{transform:translate(4%,-6%)}60%{transform:translate(-3%,7%)}80%{transform:translate(6%,-2%)}}
.split-mask{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.1em;margin-bottom:-.1em}
.split-mask--em{padding-right:.08em;margin-right:-.08em}
.split-word{display:inline-block;will-change:transform}
.roll{display:inline-flex;overflow:hidden;line-height:1.2;height:1.2em;vertical-align:bottom;white-space:nowrap}
.roll-inner{display:inline-block;position:relative;transition:transform .6s var(--ease-out-expo)}
.roll-inner::after{content:attr(data-text);position:absolute;left:0;top:100%}
:is(a,button,.roll-host):hover .roll-inner{transform:translateY(-100%)}
.btn-fill{position:relative;overflow:hidden;isolation:isolate}
.btn-fill::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:var(--fill,var(--flame));transform:translateY(101%);transition:transform .6s var(--ease-out-expo)}
.btn-fill:hover::before{transform:translateY(0)}
@keyframes soft-ping{0%{transform:scale(1);opacity:.5}60%,100%{transform:scale(1.7);opacity:0}}
.soft-ping{animation:soft-ping 3.2s var(--ease-out-expo) infinite}
.swap{display:inline-grid;overflow:hidden;vertical-align:bottom} .swap>*{grid-area:1/1}
html.has-cursor,html.has-cursor *{cursor:none!important}
.cursor-dot,.cursor-label{position:fixed;top:0;left:0;z-index:var(--z-cursor);pointer-events:none;border-radius:9999px}
.cursor-dot{width:12px;height:12px;background:#fff;mix-blend-mode:difference}
.cursor-label{display:grid;place-items:center;width:88px;height:88px;background:var(--flame);color:var(--ink);font:500 11px var(--font-code);letter-spacing:.08em;text-transform:uppercase}
@media (prefers-reduced-motion:reduce){.grain,.soft-ping,.chip__dot::after{animation:none}.roll-inner,.btn-fill::before{transition:none}}
@media (pointer:coarse){.grain{animation:none}}
@media (hover:none){.btn-fill:hover::before{transform:translateY(101%)}:is(a,button):hover .roll-inner{transform:none}}
html[data-calm] .grain,html[data-calm] .soft-ping,html[data-perf=lite] .grain{animation:none}

/* ---------- Compléments de base (motion.js, visibilité) ---------- */
html.is-loading,html.is-loading body{overflow:hidden}
.split-done .split-word{will-change:auto}            /* revealWords / setTitle terminés */
.title.is-swapping{display:grid}                      /* setTitle : ancien et nouveau titre superposés */
.title-layer{grid-area:1/1;display:block}
.swap>*{display:block;white-space:nowrap}
.mag{display:inline-block;vertical-align:middle}       /* enveloppe magnétique (X07), jamais le bouton lui-même */
.mag--block{display:block}
@media (max-width:999.98px){.d-only{display:none!important}}
@media (min-width:1000px){.m-only{display:none!important}}

/* ==========================================================================
   5.3 Primitives partagées
   ========================================================================== */

/* ---------- .label : (01) ——— TITRE ---------- */
.label{display:flex;align-items:center;gap:16px;margin:0;font:400 var(--fs-label)/1.2 var(--font-code);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--smoke);white-space:nowrap}
.label__n{color:var(--ink);flex:none}
.label__line{flex:none;display:block;width:40px;height:1px;background:var(--line-3);transform-origin:left center}
.label__t{min-width:0;overflow:hidden;text-overflow:ellipsis}
@media (min-width:768px){.label__line{width:64px}}
.label--dark{color:var(--ash)}
.label--dark .label__n{color:var(--flame)}
.label--dark .label__line{background:rgba(243,240,232,.25)}
.label--on2{color:var(--ink-3)}                        /* smoke sur paper-2 = 4,31 : interdit en petit texte */

/* ---------- .title : un seul <em> flamme, point final hors du <em> ---------- */
.title{margin:0;font-family:var(--font-grotesk);font-weight:600;line-height:.92;letter-spacing:var(--ls-tight);text-wrap:balance}
.title em{font-family:var(--font-serif);font-style:italic;font-weight:400;letter-spacing:-.01em;color:var(--flame)}
.title--h1{font-size:var(--fs-h1)}
.title--h2{font-size:var(--fs-h2);line-height:.98}
/* Flamme sur paper-2 = 2,78 : jamais. Sur les surfaces paper-2, l'italique passe en flamme profonde (4,13). */
.title--on2 em,.label--on2~.title em{color:var(--flame-deep)}
/* Sur encre : flamme (5,1). Sur flamme : encre (le texte sur flamme est toujours en encre). */
[data-tone="flame"] .title em{color:var(--ink)}
/* Étiquette sur flamme : tout en encre (smoke sur flamme est illisible). */
[data-tone="flame"] .label,[data-tone="flame"] .label__n{color:var(--ink)}
[data-tone="flame"] .label__line{background:rgba(14,13,11,.3)}

/* ---------- .chip : puce de preuve ---------- */
.chip{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 12px;border:1px solid var(--line-2);border-radius:var(--r-pill);
  font:500 13px/1 var(--font-sans);color:var(--smoke);white-space:nowrap;--fill:var(--ink);
  transition:color .3s var(--ease-out-expo),border-color .3s var(--ease-out-expo),background-color .3s var(--ease-out-expo),transform .3s var(--ease-out-expo)}
.chip b{font:600 15px/1 var(--font-grotesk);font-variant-numeric:tabular-nums;letter-spacing:-.02em;color:var(--ink);transition:color .3s var(--ease-out-expo)}
.chip--alert{background:var(--flame);border-color:var(--flame);color:var(--ink)}
.chip--alert b{color:var(--ink)}
.chip__dot{position:relative;flex:none;width:8px;height:8px;border-radius:50%;background:var(--flame)}
.chip__dot::after{content:"";position:absolute;inset:0;border-radius:inherit;background:inherit;animation:soft-ping 3.2s var(--ease-out-expo) infinite}
.chip--alert .chip__dot{background:var(--ink)}
.chip--live{font:500 var(--fs-label-sm)/1 var(--font-code);letter-spacing:var(--ls-label-sm);text-transform:uppercase}
html:not([data-online="1"]) .chip--live .chip__dot{background:var(--ash)}
html:not([data-online="1"]) .chip--live .chip__dot::after{animation:none;opacity:0}
button.chip:active{transform:scale(.96);transition-duration:.15s}
@media (hover:hover){
  .chip.btn-fill:hover,.chip.btn-fill:hover b{color:var(--paper)}
  .chip.btn-fill:hover{border-color:var(--ink)}
}

/* ---------- .cta : CTA signature (toujours avec .btn-fill) ---------- */
.cta{display:inline-flex;align-items:center;justify-content:space-between;gap:16px;min-height:60px;padding:12px 12px 12px 24px;
  border-radius:var(--r-pill);background:var(--ink);color:var(--paper);font:600 var(--fs-btn)/1.2 var(--font-sans);text-align:left;white-space:nowrap;
  --fill:var(--flame);transition:color .6s var(--ease-out-expo),transform .3s var(--ease-out-expo)}
.cta__dot{display:grid;place-items:center;flex:none;width:36px;height:36px;border-radius:50%;background:var(--flame);color:var(--ink);
  transition:transform .6s var(--ease-out-expo),background-color .6s var(--ease-out-expo),color .6s var(--ease-out-expo)}
.cta__dot .i{width:16px;height:16px;transition:transform .6s var(--ease-out-expo)}
.cta:active{transform:scale(.96);transition:color .6s var(--ease-out-expo),transform .15s var(--ease-out-expo)}
.cta--block{display:flex;width:100%}
.cta--on-flame{--fill:var(--paper)}
.cta--on-flame .cta__dot{background:var(--paper)}
.cta--paper{background:var(--paper);color:var(--ink);--fill:var(--flame)}
.cta[disabled]{cursor:progress}
.cta[disabled] .cta__dot{animation:busy .5s ease-in-out infinite alternate}
@keyframes busy{to{transform:scale(.9)}}
@media (hover:hover){
  .cta:hover{color:var(--ink)}
  .cta:hover .cta__dot{background:var(--ink);color:var(--flame)}
  .cta:hover .cta__dot .i{transform:rotate(45deg)}
}

/* ---------- .btn-round : bouton rond ---------- */
.btn-round{display:inline-grid;place-items:center;flex:none;width:44px;height:44px;border-radius:50%;border:1px solid var(--line-2);color:var(--ink);
  font:600 13px/1 var(--font-grotesk);letter-spacing:-.01em;
  transition:background-color .3s var(--ease-out-expo),color .3s var(--ease-out-expo),border-color .3s var(--ease-out-expo),transform .3s var(--ease-out-expo)}
.btn-round .i{width:18px;height:18px}
.btn-round:active{transform:scale(.96);transition-duration:.15s}
.btn-round[disabled]{opacity:.4;cursor:not-allowed}
.btn-round--ink{border-color:var(--line-ink);color:var(--paper)}
.btn-round--ink[aria-pressed="true"]{color:var(--flame)}
.btn-round--lg{width:48px;height:48px}
.btn-round--sm{width:40px;height:40px}
.btn-round--close .i{transition:transform .6s var(--ease-out-expo)}
@media (hover:hover){
  .btn-round:not([disabled]):hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}
  .btn-round--ink:not([disabled]):hover{background:var(--flame);color:var(--ink);border-color:var(--flame)}
  .btn-round--close:hover .i{transform:rotate(90deg)}
}

/* ---------- .btn-ghost : pilule secondaire (avec .btn-fill) ---------- */
.btn-ghost{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:0 20px;border:1px solid var(--line-3);border-radius:var(--r-pill);
  font:600 var(--fs-btn)/1.2 var(--font-sans);color:var(--ink);white-space:nowrap;--fill:var(--ink);
  transition:color .6s var(--ease-out-expo),border-color .6s var(--ease-out-expo),transform .3s var(--ease-out-expo)}
.btn-ghost .i{width:16px;height:16px}
.btn-ghost:active{transform:scale(.96);transition:color .6s var(--ease-out-expo),border-color .6s var(--ease-out-expo),transform .15s var(--ease-out-expo)}
.btn-ghost[disabled]{opacity:.5;cursor:not-allowed}
.btn-ghost--on-flame{border-color:rgba(14,13,11,.3);color:var(--ink);--fill:var(--ink)}
.btn-ghost--on-ink{border-color:var(--line-ink);color:var(--paper);--fill:var(--paper)}
@media (hover:hover){
  .btn-ghost:not([disabled]):hover{color:var(--paper);border-color:var(--ink)}
  .btn-ghost--on-flame:not([disabled]):hover{color:var(--paper);border-color:var(--ink)}
  .btn-ghost--on-ink:not([disabled]):hover{color:var(--ink);border-color:var(--paper)}
}

/* ---------- .status : pastille de statut (data-s, data-on="ink|paper") ---------- */
.status{position:relative;isolation:isolate;display:inline-flex;align-items:center;gap:6px;flex:none;height:24px;padding:0 10px;border:1px solid transparent;border-radius:var(--r-pill);
  font:500 var(--fs-label-sm)/1 var(--font-code);letter-spacing:var(--ls-label-sm);text-transform:uppercase;white-space:nowrap;
  transition:background-color .4s var(--ease-out-expo),color .4s var(--ease-out-expo),border-color .4s var(--ease-out-expo)}
.status .i{width:12px;height:12px}
.status .swap{line-height:1.25}
.status__dot{flex:none;width:6px;height:6px;border-radius:50%;background:var(--flame);animation:status-dot 1.6s ease-in-out infinite alternate}
@keyframes status-dot{from{opacity:.4}to{opacity:1}}
.status[data-s="waiting_approval"]::after{content:"";position:absolute;inset:-1px;z-index:-1;border-radius:inherit;background:var(--flame);animation:soft-ping 3.2s var(--ease-out-expo) infinite}
/* sur encre (défaut) */
.status[data-s="queued"]{border-color:var(--line-ink);color:rgba(243,240,232,.6)}
.status[data-s="working"]{background:var(--paper);color:var(--ink)}
.status[data-s="waiting_approval"]{background:var(--flame);color:var(--ink)}
.status[data-s="paused"]{background:rgba(243,240,232,.1);color:rgba(243,240,232,.7)}
.status[data-s="done"]{background:var(--amber);color:var(--ink)}
.status[data-s="stopped"]{border:1px dashed var(--line-ink);color:var(--ash)}
/* sur papier */
.status[data-on="paper"][data-s="queued"]{border-color:var(--line-2);color:var(--smoke)}
.status[data-on="paper"][data-s="working"]{background:var(--ink);color:var(--paper)}
.status[data-on="paper"][data-s="paused"]{background:var(--paper-2);color:var(--ink-3)}
.status[data-on="paper"][data-s="stopped"]{border-color:var(--line-3);color:var(--smoke)}

/* ---------- .tok : mini-jeton d'agent ---------- */
.tok{--tok:28px;position:relative;display:inline-grid;place-items:center;flex:none;width:var(--tok);height:var(--tok);border-radius:50%;
  background:var(--ink);color:var(--paper);font:600 calc(var(--tok)*.42)/1 var(--font-grotesk);letter-spacing:-.02em;user-select:none}
.tok--22{--tok:22px}
.tok--28{--tok:28px}
.tok--72{--tok:72px}
.tok__mono{display:block;line-height:1}
.tok--free{background:var(--paper);color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--ink)}
.tok--you{background:var(--paper);color:var(--ink-3);box-shadow:inset 0 0 0 1px var(--line-2)}
.tok--you .i{width:50%;height:50%}
.tok--lg{box-shadow:var(--sh-token)}
.tok__role{position:absolute;right:-2px;bottom:-2px;display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--paper);color:var(--ink);box-shadow:0 0 0 1px var(--line-2)}
.tok__role .i{width:12px;height:12px}
/* Sur encre, le jeton encre garde un filet pour rester lisible. */
[data-tone="ink"] .tok:not(.tok--you):not(.tok--free){box-shadow:0 0 0 1px rgba(243,240,232,.22)}
[data-tone="ink"] .tok__role{box-shadow:0 0 0 2px var(--ink-2)}

/* ---------- .pill-slider : pastille glissante (X09) ---------- */
.pill-slider{position:absolute;left:0;top:0;pointer-events:none;will-change:transform}

/* ---------- .bubble : bulle du fil ---------- */
.bubble{position:relative;padding:12px 16px;border:1px solid var(--line);border-radius:22px;border-top-left-radius:var(--r-bubble-cut);background:var(--paper);color:var(--ink);box-shadow:var(--sh-bubble)}
.bubble--you{background:var(--ink);color:var(--paper);border-color:transparent;border-top-left-radius:22px;border-top-right-radius:var(--r-bubble-cut)}
.bubble--gate{background:var(--flame);color:var(--ink);border-color:transparent}

/* ==========================================================================
   Calques motion (construits ou animés par motion.js)
   ========================================================================== */

/* ---------- X01 Préchargeur : la marque se dessine, la goutte tombe ---------- */
.preloader{position:fixed;inset:0;z-index:calc(var(--z-curtain) + 1);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:26px;
  padding:24px;cursor:pointer;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent}
.preloader::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:rgba(14,13,11,.1)}
.preloader__mark{display:block;width:88px;height:88px;overflow:visible}
.preloader__word{display:flex;margin:0;overflow:hidden;padding:0 .04em .1em;font:700 clamp(2.75rem,7vw,5rem)/.92 var(--font-grotesk);letter-spacing:-.05em;color:var(--ink)}
.preloader__word span{display:inline-block;will-change:transform}
.preloader__word span:last-child{color:var(--flame)}
/* Paire r/n ouverte (700, lettres éclatées : sans elle « Harnais » se lit « Hamais »), §8.2. */
.preloader__word .kern-rn{margin-left:.04em}
.preloader__bar{position:absolute;left:0;bottom:0;z-index:1;width:100%;height:2px;background:var(--flame);transform:scaleX(0);transform-origin:left center}

/* ---------- X02 Double rideau : papier dessus, flamme dessous, bord bas arrondi ---------- */
.curtain{position:fixed;inset:0;z-index:var(--z-curtain);pointer-events:none;visibility:hidden}
.curtain__paper,.curtain__flame{position:absolute;inset:0;will-change:transform}
.curtain__paper{z-index:2;background:var(--paper)}
.curtain__flame{z-index:1;background:var(--flame)}
.curtain__paper::after,.curtain__flame::after{content:"";position:absolute;left:-10%;width:120%;top:100%;height:14vh;border-radius:0 0 100% 100%;background:inherit}

/* ---------- X12 Sheets : bottom | panel | center ; tons ink | paper | flame ---------- */
.sheet{position:fixed;inset:0;z-index:var(--z-sheet);display:flex;align-items:flex-end;justify-content:center;pointer-events:none}
.sheet__backdrop{position:absolute;inset:0;background:rgba(14,13,11,.6);pointer-events:auto}
.sheet__panel{position:relative;display:flex;flex-direction:column;width:100%;max-height:85svh;outline:none;overflow:hidden;pointer-events:auto;
  background:var(--ink-2);color:var(--paper);box-shadow:var(--sh-card-lg);
  transition:background-color .5s var(--ease-out-expo),color .5s var(--ease-out-expo)}
.sheet__body{position:relative;flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
  padding:28px 24px 24px;scrollbar-width:thin;scrollbar-color:currentColor transparent}
.sheet__body>:first-child{margin-right:52px}            /* colonne de la croix */
/* Contenu enveloppé (A) : seule sa première ligne cède la place à la croix, pas toute la fiche. */
.sheet__body>:first-child:has(>[data-in]){margin-right:0}
.sheet__body>:first-child:has(>[data-in])>:first-child{margin-right:52px}
.sheet__close{position:absolute;top:14px;right:14px;z-index:2}
.sheet__handle{position:relative;flex:none;align-self:center;width:44px;height:6px;margin-top:10px;border-radius:var(--r-pill);background:currentColor;opacity:.2;touch-action:none;cursor:grab}
.sheet__handle::before{content:"";position:absolute;inset:-14px -48px}
/* bottom */
.sheet[data-kind="bottom"] .sheet__panel{border-radius:28px 28px 0 0}
/* Zones sûres latérales (paysage à encoche) : contenu et croix hors de l'encoche. */
.sheet[data-kind="bottom"] .sheet__body{padding:20px max(20px,var(--safe-r)) calc(24px + var(--safe-b)) max(20px,var(--safe-l))}
.sheet[data-kind="bottom"] .sheet__close{top:12px;right:max(12px,var(--safe-r))}
/* Fiche à crans (fiche agent mobile) : le plan reste visible au-dessus, voile léger. */
.sheet--detents .sheet__backdrop{background:rgba(14,13,11,.22)}
.sheet--detents .sheet__panel{height:calc(var(--dmax,.85) * 100vh);height:calc(var(--dmax,.85) * 100dvh);max-height:none}
/* Spécificité 0,4,0 : doit l'emporter sur le padding du kind bottom (0,3,0) ; la part du panneau
   sous l'écran (--sheet-off, posée par motion.js) reste ainsi atteignable au défilement. */
.sheet[data-kind="bottom"].sheet--detents .sheet__body{padding-bottom:calc(24px + var(--safe-b) + var(--sheet-off,0px))}
/* panel (desktop, monté dans #plan-overlay) */
.sheet[data-kind="panel"]{position:absolute;inset:16px 16px 16px auto;z-index:var(--z-panel);display:block;width:380px;max-width:calc(100% - 32px);pointer-events:auto}
.sheet[data-kind="panel"] .sheet__panel{height:100%;max-height:none;border-radius:var(--r-card)}
/* center */
.sheet[data-kind="center"]{align-items:center;padding:24px}
.sheet[data-kind="center"] .sheet__panel{width:440px;max-width:100%;border-radius:var(--r-card)}
/* tons */
.sheet[data-tone="paper"] .sheet__panel{background:var(--paper);color:var(--ink)}
.sheet[data-tone="flame"] .sheet__panel{background:var(--flame);color:var(--ink)}
.sheet[data-tone="flame"] :focus-visible{outline-color:var(--ink)}
.sheet[data-tone="ink"] .sheet__close{border-color:var(--line-ink);color:var(--paper)}
.sheet[data-tone="flame"] .sheet__close{border-color:rgba(14,13,11,.3);color:var(--ink)}
@media (hover:hover){
  .sheet[data-tone="ink"] .sheet__close:hover{background:var(--flame);border-color:var(--flame);color:var(--ink)}
  .sheet[data-tone="flame"] .sheet__close:hover{background:var(--ink);border-color:var(--ink);color:var(--flame)}
}

/* ---------- X13 Glisser pour autoriser (gate sensible, écran tactile) ---------- */
.slide{--knob:56px;position:relative;isolation:isolate;display:flex;align-items:center;width:100%;height:64px;padding:4px;border-radius:var(--r-pill);overflow:hidden;
  background:rgba(14,13,11,.1);box-shadow:inset 0 0 0 1px rgba(14,13,11,.3);color:var(--ink);user-select:none;-webkit-user-select:none;touch-action:pan-y}
.slide__fill{position:absolute;inset:4px;z-index:-1;border-radius:inherit;background:var(--ink);opacity:0;transform:translateX(calc(-100% + var(--knob)))}
.slide__label{position:absolute;inset:0;display:grid;place-items:center;padding-left:calc(var(--knob) + 8px);padding-right:16px;
  font:500 var(--fs-label)/1 var(--font-code);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--ink);pointer-events:none;white-space:nowrap}
.slide__handle{position:relative;z-index:1;display:grid;place-items:center;flex:none;width:var(--knob);height:var(--knob);border-radius:50%;
  background:var(--paper);color:var(--ink);box-shadow:var(--sh-token);touch-action:none;cursor:grab;transition:color .3s var(--ease-out-expo)}
.slide__handle .i{width:20px;height:20px}
.slide__handle:active{cursor:grabbing}
.slide.is-done .slide__handle{color:var(--flame-deep)}

/* ---------- X11 Toasts ---------- */
.toasts{position:fixed;z-index:var(--z-toast);left:50%;bottom:calc(var(--dock-space) + var(--legend) + 12px);transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:8px;width:max-content;max-width:calc(100vw - 32px);pointer-events:none}
@media (min-width:1000px){.toasts{left:auto;right:24px;bottom:24px;transform:none;align-items:flex-end;max-width:min(440px,calc(100vw - 48px))}}
.toast{position:relative;display:inline-flex;align-items:center;gap:12px;max-width:100%;height:48px;padding:0 20px 0 8px;border:0;border-radius:var(--r-pill);overflow:hidden;
  background:var(--ink);color:var(--paper);box-shadow:var(--sh-toast);font:600 13px/1.2 var(--font-sans);text-align:left;pointer-events:auto}
button.toast{cursor:pointer}
.toast__icon{display:grid;place-items:center;flex:none;width:32px;height:32px;border-radius:50%;background:var(--flame);color:var(--ink)}
.toast__icon .i{width:16px;height:16px}
.toast[data-tone="error"] .toast__icon{background:rgba(243,240,232,.1);color:var(--flame)}
.toast[data-tone="done"] .toast__icon{background:var(--amber);color:var(--ink)}
.toast__text{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--paper)}
.toast__bar{position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--flame);transform-origin:left center}

/* ---------- X16 Anneau ---------- */
.fx-ring{position:absolute;left:0;top:0;border-style:solid;border-radius:50%;pointer-events:none}

/* ---------- Mouvement réduit, mode calme, qualité réduite ---------- */
@media (prefers-reduced-motion:reduce){
  .status__dot,.status[data-s="waiting_approval"]::after,.cta[disabled] .cta__dot{animation:none}
  .cta,.cta__dot,.cta__dot .i,.btn-round,.btn-round--close .i,.btn-ghost,.chip,.chip b,.status,.sheet__panel,.slide__handle{transition:none}
}
html[data-calm] .chip__dot::after,html[data-calm] .status[data-s="waiting_approval"]::after{animation:none;opacity:0}
html[data-calm] .status__dot{animation:none}