/* ==========================================================================
   Botlings — l'atelier des nains.
   Bois sombre, laiton, cuivre, parchemin. Rien de plat, rien de néon.
   ========================================================================== */

:root {
  --bg: #1b130e;
  --bg-2: #241911;
  --wood-hi: #55402b;
  --wood: #43301f;
  --wood-lo: #33241a;
  --edge: #130c07;
  --brass: #c9973f;
  --honey: #e6ae4c;
  --honey-hi: #f3c56d;
  --copper: #b8693a;
  --parch: #f3e6c9;
  --parch-2: #e7d5ae;
  --ink: #3a2814;
  --muted: #bba98b;
  --muted-2: #9a8868;
  --moss: #98bf68;
  --moss-d: #4d7433;
  --brick: #e0705a;
  --brick-d: #8e3526;
  --slate: #86b0d0;
  --r: 18px;

  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='200'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.005 .38' numOctaves='3' seed='6'/%3E%3CfeColorMatrix values='0 0 0 0 .07 0 0 0 0 .035 0 0 0 0 .01 0 0 0 1.2 -.52'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  --speck: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' seed='2'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .55 -.22'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");

  --font-title: "Fredoka", "Nunito", ui-rounded, "Segoe UI", system-ui, sans-serif;
  --font-body: "Nunito", ui-rounded, "Segoe UI", system-ui, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  font: 400 1rem/1.55 var(--font-body);
  color: var(--parch);
  background: var(--bg);
  overflow-x: hidden;
  -webkit-tap-highlight-color: transparent;
}
/* lumière de la lanterne + grain du mur */
body::before {
  content: "";
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(ellipse 70% 45% at 50% -8%, rgba(230, 174, 76, .16), transparent 70%),
    radial-gradient(ellipse 120% 80% at 50% 120%, rgba(0, 0, 0, .55), transparent 60%),
    var(--bg);
}
body::after {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .3;
  background: var(--speck), var(--grain);
}
body.sheet-open { overflow: hidden; }

h1, h2, h3 { font-family: var(--font-title); font-weight: 600; line-height: 1.15; margin: 0; letter-spacing: .005em; }
p { margin: 0 0 .8em; }
a { color: var(--honey-hi); text-underline-offset: 3px; }
a:hover { color: #ffe0a0; }
img, svg { max-width: 100%; }
button, input, textarea, select { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--honey-hi); outline-offset: 3px; border-radius: 8px; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.muted { color: var(--muted); }
.boot { text-align: center; padding: 30vh 20px 0; font-family: var(--font-title); color: var(--muted); }
.ico { display: block; flex: none; }
.desk-only { display: inline-flex; }

/* ---------------------------------------------------------------- boutons « tampon » */
.btn {
  --face-a: #f4c673; --face-b: #d89a3a; --lip: #8a5a1e; --txt: #2b1a08;
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  min-height: 48px; padding: 0 22px;
  font: 600 1.06rem/1 var(--font-title); letter-spacing: .01em; text-decoration: none;
  color: var(--txt);
  background: linear-gradient(180deg, var(--face-a), var(--face-b));
  border: 2px solid var(--edge); border-radius: 15px;
  box-shadow: 0 5px 0 var(--lip), 0 5px 0 2px var(--edge), 0 10px 14px -4px rgba(0, 0, 0, .55), inset 0 2px 0 rgba(255, 255, 255, .4);
  cursor: pointer; user-select: none; touch-action: manipulation;
  margin-bottom: 7px;
  transition: transform .08s, box-shadow .08s, filter .15s;
}
.btn:hover { filter: brightness(1.07); color: var(--txt); }
.btn:active, .btn.busy { transform: translateY(4px); box-shadow: 0 1px 0 var(--lip), 0 1px 0 2px var(--edge), inset 0 2px 0 rgba(255, 255, 255, .3); }
.btn[disabled] { opacity: .55; cursor: not-allowed; filter: saturate(.6); }
.btn.busy { cursor: progress; }
.btn-big { min-height: 56px; padding: 0 28px; font-size: 1.15rem; }
.btn-wood {
  --face-a: #62482f; --face-b: #4a3622; --lip: #231710; --txt: var(--parch);
  box-shadow: 0 5px 0 var(--lip), 0 5px 0 2px var(--edge), 0 10px 14px -4px rgba(0, 0, 0, .55), inset 0 2px 0 rgba(255, 230, 180, .16);
}
.btn-wood:hover { color: #fff; }
.btn-danger { --face-a: #e8836d; --face-b: #c4513a; --lip: #7a2616; --txt: #fff6ee; }
.btn-danger:hover { color: #fff; }
.btn-ghost {
  --txt: var(--parch);
  background: transparent; border-color: rgba(243, 230, 201, .32);
  box-shadow: none; margin-bottom: 0;
}
.btn-ghost:hover { background: rgba(243, 230, 201, .08); color: #fff; filter: none; }
.btn-ghost:active { transform: translateY(1px); box-shadow: none; }
.btn-danger-ghost {
  --txt: #f0a090;
  background: transparent; border-color: rgba(224, 112, 90, .45);
  box-shadow: none; margin-bottom: 0;
}
.btn-danger-ghost:hover { background: rgba(224, 112, 90, .12); color: #ffc0b3; filter: none; }
.btn-danger-ghost:active { transform: translateY(1px); box-shadow: none; }
.btn-icon {
  display: inline-grid; place-items: center; width: 48px; height: 48px; flex: none;
  background: var(--wood-lo); border: 2px solid var(--edge); border-radius: 14px; color: var(--parch); cursor: pointer;
  box-shadow: inset 0 2px 0 rgba(255, 230, 180, .1);
}
.btn-icon:hover { background: var(--wood); }
.linkbtn { background: none; border: 0; padding: 8px 4px; color: var(--muted); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; font-weight: 700; min-height: 44px; }
.linkbtn:hover { color: var(--parch); }

/* ---------------------------------------------------------------- champs */
.field { border: 0; padding: 0; margin: 0 0 18px; min-width: 0; }
.label { display: block; font: 600 .95rem var(--font-title); letter-spacing: .02em; color: var(--parch-2); margin-bottom: 7px; padding: 0; }
.input {
  width: 100%; min-height: 50px; padding: 11px 15px;
  background: #1f150e; color: var(--parch);
  border: 2px solid #5c4430; border-radius: 13px;
  box-shadow: inset 0 3px 7px rgba(0, 0, 0, .55), 0 1px 0 rgba(255, 230, 180, .1);
  font-size: 1rem;
}
.input::placeholder { color: #8b7a5f; }
.input:focus { outline: none; border-color: var(--honey); box-shadow: inset 0 3px 7px rgba(0, 0, 0, .55), 0 0 0 3px rgba(230, 174, 76, .3); }
textarea.input { resize: vertical; line-height: 1.45; }
textarea.paste { font-family: ui-monospace, Consolas, monospace; font-size: .9rem; min-height: 120px; }
.input-row { display: flex; gap: 10px; align-items: center; }
.input-row .input { flex: 1; min-width: 0; }
.hint { font-size: .9rem; color: var(--muted); margin: 8px 0 0; }
.form-msg { min-height: 1.5em; margin: 10px 0 14px; font-weight: 700; }
.form-msg.err { color: var(--brick); }

/* ---------------------------------------------------------------- planches de bois */
.plank {
  position: relative;
  background: var(--speck), var(--grain), linear-gradient(180deg, var(--wood-hi), var(--wood-lo));
  border: 2px solid var(--edge); border-radius: var(--r);
  box-shadow:
    inset 0 2px 0 rgba(255, 220, 160, .14),
    inset 0 -3px 0 rgba(0, 0, 0, .22),
    0 6px 0 #0f0905,
    0 16px 24px -10px rgba(0, 0, 0, .65);
}
.plank::before { /* filet intérieur, comme une enseigne gravée */
  content: ""; position: absolute; inset: 6px; border-radius: calc(var(--r) - 6px);
  border: 1.5px solid rgba(230, 174, 76, .2); pointer-events: none;
}
.plank::after { /* clous de laiton */
  content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background:
    radial-gradient(circle at 13px 13px, #f1d089 0 1.6px, #a97a2c 2.6px, #5a3c12 3.6px, transparent 4.2px),
    radial-gradient(circle at calc(100% - 13px) 13px, #f1d089 0 1.6px, #a97a2c 2.6px, #5a3c12 3.6px, transparent 4.2px);
}
.plank-flat {
  background: rgba(0, 0, 0, .22); border: 2px solid rgba(0, 0, 0, .35); border-radius: 16px;
  box-shadow: inset 0 3px 8px rgba(0, 0, 0, .35), 0 1px 0 rgba(255, 230, 180, .08);
}

/* ---------------------------------------------------------------- barre du haut */
.topbar {
  position: sticky; top: 0; z-index: 20;
  background: var(--speck), var(--grain), linear-gradient(180deg, #3b2a1b, #2a1d13);
  border-bottom: 3px solid var(--edge);
  box-shadow: inset 0 2px 0 rgba(255, 220, 160, .12), 0 8px 18px -8px rgba(0, 0, 0, .7);
  padding-top: env(safe-area-inset-top);
}
.topbar-in { max-width: 1100px; margin: 0 auto; padding: 8px max(20px, env(safe-area-inset-right)) 8px max(20px, env(safe-area-inset-left)); display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--parch); }
.brand-logo {
  width: 46px; height: 46px; border-radius: 50%; overflow: hidden; flex: none; position: relative;
  background: #1a110b; border: 3px solid var(--brass);
  box-shadow: 0 0 0 2px var(--edge), inset 0 0 12px rgba(0, 0, 0, .8), 0 3px 6px rgba(0, 0, 0, .5);
}
.brand-logo svg { position: absolute; width: 76px; height: auto; max-width: none; left: -18px; top: -9px; overflow: visible; }
.brand-name { font: 700 1.55rem var(--font-title); letter-spacing: .01em; text-shadow: 0 2px 0 #120a05, 0 0 14px rgba(230, 174, 76, .25); }
.topnav { display: flex; gap: 6px; }
.navlink {
  display: inline-flex; align-items: center; gap: 8px; min-height: 46px; padding: 0 14px; white-space: nowrap;
  font: 600 1rem var(--font-title); color: var(--muted); text-decoration: none;
  background: none; border: 2px solid transparent; border-radius: 13px; cursor: pointer;
}
.navlink:hover { color: var(--parch); background: rgba(0, 0, 0, .18); }
.navlink.active { color: #2b1a08; background: linear-gradient(180deg, var(--honey-hi), var(--honey)); border-color: var(--edge); box-shadow: 0 3px 0 #8a5a1e, inset 0 2px 0 rgba(255, 255, 255, .35); }
.tabbar { display: none; }

.view { max-width: 1100px; margin: 0 auto; padding: 30px max(20px, env(safe-area-inset-right)) 80px max(20px, env(safe-area-inset-left)); outline: none; }
.team-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 22px; flex-wrap: wrap; }
.page-title { font-size: clamp(1.9rem, 4vw, 2.5rem); font-weight: 700; text-shadow: 0 3px 0 #0f0905; }
.summary { color: var(--muted); margin: 4px 0 0; font-size: 1.02rem; min-height: 1.5em; }

/* ---------------------------------------------------------------- recherche + filtres */
.toolbar { display: flex; gap: 14px 18px; align-items: center; flex-wrap: wrap; margin-bottom: 28px; }
.search { position: relative; flex: 1 1 280px; max-width: 520px; }
.search-ico { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); color: var(--muted-2); pointer-events: none; }
.search-input { padding-left: 46px; }
.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chip {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px;
  font: 600 .95rem var(--font-title); color: var(--parch-2); cursor: pointer;
  background: linear-gradient(180deg, #4a3724, #3b2a1c); border: 2px solid var(--edge); border-radius: 12px;
  box-shadow: 0 3px 0 #130c07, inset 0 2px 0 rgba(255, 230, 180, .12);
}
.chip:hover { color: #fff; }
.chip.sel { color: #2b1a08; background: linear-gradient(180deg, var(--honey-hi), var(--honey)); box-shadow: 0 3px 0 #8a5a1e, inset 0 2px 0 rgba(255, 255, 255, .35); }
.chip-n { font: 700 .8rem var(--font-body); min-width: 22px; padding: 1px 6px; text-align: center; border-radius: 99px; background: rgba(0, 0, 0, .3); color: var(--parch); }
.chip.sel .chip-n { background: rgba(0, 0, 0, .18); color: #2b1a08; }

/* ---------------------------------------------------------------- cartes Botlings */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 310px), 1fr)); gap: 30px 24px; }
.card {
  --c: var(--honey);
  display: grid; grid-template-columns: 96px 1fr; gap: 4px 14px;
  padding: 20px 18px 16px;
  transition: transform .2s cubic-bezier(.3, 1.5, .5, 1), box-shadow .2s, filter .3s;
}
.card.skeleton { min-height: 190px; opacity: .45; animation: pulse 1.6s ease-in-out infinite; }
.card:hover { transform: translateY(-4px) rotate(-.4deg); }
.card.on { border-color: #2a1a0c; box-shadow: inset 0 2px 0 rgba(255, 220, 160, .18), inset 0 -3px 0 rgba(0, 0, 0, .22), 0 6px 0 #0f0905, 0 0 0 2px color-mix(in srgb, var(--c) 50%, transparent), 0 16px 28px -10px rgba(0, 0, 0, .65); }
.card.off { filter: saturate(.72) brightness(.93); }
.card.off .name a { color: var(--parch-2); }
.card-link { color: inherit; text-decoration: none; }
.card-link::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; } /* toute la carte est cliquable */
.card-link:focus-visible { outline: none; }
.card:has(.card-link:focus-visible) { outline: 3px solid var(--honey-hi); outline-offset: 4px; }

.stage { position: relative; grid-row: 1 / 3; width: 96px; height: 106px; display: grid; place-items: end center; align-self: start; }
.stage::before { /* halo de la couleur du métier */
  content: ""; position: absolute; left: 50%; top: 52%; width: 120px; height: 120px; transform: translate(-50%, -50%);
  background: radial-gradient(circle, color-mix(in srgb, var(--c) 55%, transparent) 0%, transparent 68%); opacity: .0; transition: opacity .4s;
}
.card.on .stage::before { opacity: .55; }
.stage::after { /* ombre au sol */
  content: ""; position: absolute; bottom: 0; left: 50%; width: 60px; height: 10px; margin-left: -30px; border-radius: 50%;
  background: rgba(0, 0, 0, .5); filter: blur(4px);
}
.stage .dwarf { position: relative; z-index: 1; width: 92px; height: auto; overflow: visible; filter: drop-shadow(0 3px 2px rgba(0, 0, 0, .35)); transform-origin: 50% 100%; }
.card.on .dwarf { animation: squish 2.6s ease-in-out infinite; animation-delay: var(--d, 0s); }
.card:hover .dwarf { animation: jump .6s ease; }
.card:hover .dwarf .hand { animation: wave 1.5s ease-in-out; }
.dwarf .hand { transform-origin: 70px 66px; }
.dwarf .eyes { transform-box: fill-box; transform-origin: center; animation: blink 4.6s infinite; animation-delay: var(--d, 0s); }
.dwarf.asleep { animation: breathe 4.2s ease-in-out infinite; transform-origin: 50% 100%; }
.dwarf.asleep .eyes { animation: none; }
.dwarf .z { font: 700 11px var(--font-title); fill: var(--parch); opacity: 0; animation: floatz 3.2s ease-in-out infinite; }
.dwarf .z2 { font-size: 9px; animation-delay: .9s; }
.dwarf .z3 { font-size: 8px; animation-delay: 1.8s; }

.card-body { min-width: 0; grid-column: 2; }
.role {
  display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: top;
  font: 600 .72rem/1 var(--font-title); letter-spacing: .09em; text-transform: uppercase; color: #fff4dc;
  padding: 5px 11px 4px 9px; border-radius: 6px 99px 99px 6px;
  background: color-mix(in srgb, var(--c, var(--honey)) 62%, #1a0f07);
  border: 1.5px solid color-mix(in srgb, var(--c, var(--honey)) 40%, #000);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25);
}
.name { font-size: 1.6rem; font-weight: 700; margin: 8px 0 0; text-shadow: 0 2px 0 #120a05; overflow-wrap: anywhere; }
.wfname { font-size: .85rem; color: var(--muted-2); margin: 2px 0 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.desc { font-size: .98rem; color: var(--parch-2); margin: 0 0 4px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.card-foot {
  grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; margin-top: 10px; padding-top: 12px;
  border-top: 2px dashed rgba(230, 174, 76, .2);
}
.card-foot .pill { margin-right: auto; }
.foot-state { font: 600 .88rem var(--font-title); color: var(--muted); }
.card.on .foot-state { color: var(--moss); }
.card-foot .switch { position: relative; z-index: 2; }

.pill {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px 4px 8px; min-height: 28px;
  font: 700 .84rem var(--font-body); color: var(--muted); white-space: nowrap;
  background: rgba(0, 0, 0, .32); border: 1.5px solid rgba(255, 255, 255, .07); border-radius: 99px;
}
.pill.ok { color: var(--moss); }
.pill.err { color: var(--brick); }
.pill.run { color: var(--honey-hi); }

/* interrupteur : un petit levier de bois et de laiton */
.switch {
  position: relative; flex: none; width: 66px; height: 38px; padding: 0; cursor: pointer;
  background: #261a11; border: 2px solid var(--edge); border-radius: 99px;
  box-shadow: inset 0 4px 8px rgba(0, 0, 0, .65), 0 1px 0 rgba(255, 230, 180, .12);
  transition: background .25s;
}
.switch::before { content: ""; position: absolute; inset: -8px -4px; } /* zone tactile élargie */
.switch::after {
  content: ""; position: absolute; top: 2px; left: 2px; width: 30px; height: 30px; border-radius: 50%;
  background: radial-gradient(circle at 35% 28%, #fbe4a2, #c9973f 55%, #7c5218);
  box-shadow: 0 3px 4px rgba(0, 0, 0, .55), inset 0 -2px 3px rgba(0, 0, 0, .25);
  transition: transform .28s cubic-bezier(.3, 1.6, .5, 1);
}
.switch[aria-checked="true"] { background: linear-gradient(180deg, #3d5a28, #55792f); }
.switch[aria-checked="true"]::after { transform: translateX(28px); }
.switch.busy { opacity: .6; }
.switch.big { transform: scale(1.18); transform-origin: right center; }

/* ---------------------------------------------------------------- animations du nain */
@keyframes squish { 0%, 100% { transform: translateY(0) scale(1, 1); } 45% { transform: translateY(-5px) scale(.97, 1.03); } 90% { transform: translateY(0) scale(1.04, .96); } }
@keyframes breathe { 0%, 100% { transform: scale(1, 1); } 50% { transform: scale(1.015, .985); } }
@keyframes jump { 30% { transform: translateY(-16px) scale(.92, 1.08); } 60% { transform: scale(1.08, .92); } }
@keyframes blink { 0%, 93%, 100% { transform: scaleY(1); } 96% { transform: scaleY(.1); } }
@keyframes wave { 0% { transform: rotate(0); } 18% { transform: rotate(-140deg); } 34% { transform: rotate(-168deg); } 50% { transform: rotate(-130deg); } 66% { transform: rotate(-168deg); } 82% { transform: rotate(-140deg); } 100% { transform: rotate(0); } }
@keyframes floatz { 0% { opacity: 0; transform: translate(0, 4px); } 30% { opacity: .9; } 100% { opacity: 0; transform: translate(4px, -10px); } }
@keyframes pulse { 50% { opacity: .22; } }
@keyframes fall { 0% { transform: translateY(-30px) rotate(var(--r)); opacity: 0; } 12% { opacity: 1; } 100% { transform: translateY(105vh) rotate(calc(var(--r) + 540deg)); opacity: .9; } }
@keyframes fade { from { opacity: 0; } }
@keyframes slideIn { from { transform: translateX(40px); opacity: 0; } }
@keyframes pop { from { transform: translateY(18px) scale(.94); opacity: 0; } }

/* ---------------------------------------------------------------- états vides / notes */
.empty { max-width: 560px; margin: 24px auto 0; padding: 30px 26px 28px; text-align: center; }
.empty h2 { font-size: 1.6rem; margin: 6px 0 10px; }
.empty p { color: var(--parch-2); }
.empty-dwarf { width: 140px; margin: -66px auto 4px; filter: drop-shadow(0 6px 4px rgba(0, 0, 0, .4)); }
.empty-small { padding: 24px; }
.empty-small .empty-dwarf { width: 108px; margin-top: -58px; }
.empty .ob-actions { justify-content: center; margin-top: 12px; }
.empty-dwarf .dwarf, .ob-guide .dwarf, .modal-dwarf .dwarf, .sheet-stage .dwarf, .drop-dwarf .dwarf, .spin-dwarf .dwarf { width: 100%; height: auto; overflow: visible; }
.note { display: flex; gap: 12px; align-items: flex-start; padding: 13px 15px; margin: 14px 0; border-radius: 14px; font-weight: 600; line-height: 1.45; }
.note > span:first-child { margin-top: 1px; }
.note-warn { background: rgba(230, 174, 76, .13); border: 2px solid rgba(230, 174, 76, .4); color: #f3d79e; }
.note-info { background: rgba(134, 176, 208, .12); border: 2px solid rgba(134, 176, 208, .35); color: #c6dcec; }
.note-err { background: rgba(224, 112, 90, .13); border: 2px solid rgba(224, 112, 90, .45); color: #ffc0b3; }
.slot:empty { display: none; }

/* ---------------------------------------------------------------- fiche Botling */
.sheet-back { position: fixed; inset: 0; z-index: 40; background: rgba(8, 5, 3, .66); animation: fade .2s; }
.sheet {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 41; width: min(540px, 100%);
  display: flex; flex-direction: column; overflow: hidden; outline: none;
  background: var(--speck), var(--grain), linear-gradient(180deg, #3a2a1c, #2b1e14);
  border-left: 3px solid var(--edge); box-shadow: -18px 0 40px -12px rgba(0, 0, 0, .7);
  animation: slideIn .28s cubic-bezier(.2, .9, .3, 1);
}
.sheet-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 12px 18px 6px; padding-top: max(12px, env(safe-area-inset-top)); flex: none; }
.sheet-body { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 14px 20px 40px; }
.sheet-head { --c: var(--honey); display: flex; align-items: center; gap: 16px; padding: 22px 20px 20px 14px; margin: 54px 0 24px; }
.sheet-stage { flex: none; width: 118px; margin-top: -62px; filter: drop-shadow(0 8px 5px rgba(0, 0, 0, .45)); }
.sheet-stage .dwarf { animation: squish 2.6s ease-in-out infinite; transform-origin: 50% 100%; }
.sheet-id { min-width: 0; }
.sheet-name { font-size: 2rem; font-weight: 700; margin: 8px 0 2px; text-shadow: 0 2px 0 #120a05; overflow-wrap: anywhere; }
.sec { margin: 0 0 26px; }
.sec-title { font-size: 1.15rem; margin: 0 0 12px; color: var(--honey-hi); }
.sec-head { display: flex; justify-content: space-between; align-items: baseline; }
.sec-head .linkbtn { padding: 0 4px; min-height: 0; }
.switch-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 28px 16px 18px; }
.switch-row .sec-title { margin-bottom: 4px; }
.switch-state { margin: 0; font-size: .95rem; color: var(--muted); }
.run-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.run-note { display: flex; gap: 10px; align-items: flex-start; margin-top: 10px; font-weight: 700; }
.run-note:empty { display: none; }
.run-note.ok { color: var(--moss); }
.run-note.err { color: var(--brick); }
.run-note.info { color: #f3d79e; background: rgba(230, 174, 76, .12); border-radius: 12px; padding: 10px 12px; }

.parch {
  background: var(--speck), linear-gradient(180deg, #f3e6c9, #e7d5ae); color: var(--ink);
  border-radius: 10px / 18px; padding: 8px 6px;
  box-shadow: inset 0 10px 14px -8px rgba(122, 82, 28, .5), inset 0 -10px 14px -8px rgba(122, 82, 28, .5), 0 4px 0 #130c07, 0 10px 18px -8px rgba(0, 0, 0, .6);
}
.hist { list-style: none; margin: 0; padding: 0; }
.hist-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-bottom: 1.5px dashed rgba(90, 60, 20, .25); }
.hist-row:last-child { border-bottom: 0; }
.hist-ico { width: 30px; height: 30px; flex: none; display: grid; place-items: center; border-radius: 50%; background: rgba(90, 60, 20, .12); }
.hist-row.ok .hist-ico { background: #cfe3b3; color: #2f5a14; }
.hist-row.err .hist-ico { background: #f1c2b6; color: #8e2a18; }
.hist-main { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.hist-main strong { font: 600 1rem var(--font-title); }
.hist-when { font-size: .88rem; color: #6b5535; }
.hist-meta { display: flex; flex-direction: column; align-items: flex-end; font-size: .88rem; font-weight: 700; color: #5a4529; line-height: 1.25; }
.hist-meta em { font-style: normal; font-weight: 600; font-size: .78rem; color: #8a7350; text-transform: uppercase; letter-spacing: .06em; }
.hist-empty { padding: 16px; text-align: center; color: #6b5535; font-weight: 600; }
.hist-empty.err { color: #8e2a18; }

.live {
  position: sticky; top: -6px; z-index: 4; display: flex; align-items: center; gap: 12px; padding: 4px 14px 4px 10px; margin: 0 0 18px;
  background: var(--speck), linear-gradient(180deg, #4a3724, #3a2a1c); border: 2px solid var(--edge); border-radius: 14px;
  box-shadow: 0 8px 14px -8px rgba(0, 0, 0, .75), inset 0 2px 0 rgba(255, 230, 180, .12);
}
.live-d { width: 52px; height: 58px; flex: none; }
.live-d .dwarf { width: 100%; height: 100%; overflow: visible; }
.live-t { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.live-t em { font: 600 .72rem var(--font-title); font-style: normal; letter-spacing: .1em; text-transform: uppercase; color: var(--honey-hi); }
.live-t strong { font: 600 1.1rem var(--font-title); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.live-t span { font-size: .85rem; color: var(--muted); }
.swatches { display: flex; gap: 10px; flex-wrap: wrap; }
.swatch {
  position: relative; width: 44px; height: 44px; padding: 0; cursor: pointer; border-radius: 50%;
  background: var(--s); border: 3px solid var(--edge);
  box-shadow: inset 0 3px 0 rgba(255, 255, 255, .28), inset 0 -4px 6px rgba(0, 0, 0, .25), 0 2px 0 rgba(255, 230, 180, .08);
}
.swatch.sel { outline: 3px solid var(--honey-hi); outline-offset: 2px; }
.swatch.sel::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 2px rgba(0, 0, 0, .45); }
.opts { display: flex; flex-wrap: wrap; gap: 8px; }
.opt {
  display: flex; flex-direction: column; align-items: center; gap: 2px; width: 82px; padding: 6px 4px 7px; cursor: pointer;
  background: rgba(0, 0, 0, .22); border: 2px solid rgba(0, 0, 0, .35); border-radius: 13px; color: var(--muted);
}
.opt:hover { background: rgba(0, 0, 0, .12); color: var(--parch); }
.opt.sel { border-color: var(--honey); background: rgba(230, 174, 76, .14); color: var(--parch); box-shadow: 0 0 0 2px rgba(230, 174, 76, .25); }
.opt-thumb { width: 56px; height: 62px; display: block; }
.opt-thumb .dwarf { width: 100%; height: 100%; overflow: visible; }
.opt-label { font: 600 .74rem/1.15 var(--font-body); text-align: center; }
.foot-actions { display: flex; gap: 14px; flex-wrap: wrap; padding-top: 6px; border-top: 2px dashed rgba(230, 174, 76, .18); margin-top: 8px; padding-top: 22px; }
.savebar {
  display: none; flex: none; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 20px; padding-bottom: max(12px, env(safe-area-inset-bottom));
  background: linear-gradient(180deg, #2b1e14, #1e150e); border-top: 3px solid var(--edge); box-shadow: 0 -10px 20px -10px rgba(0, 0, 0, .6);
}
.savebar.show { display: flex; }
.save-hint { font-weight: 700; color: var(--honey-hi); font-size: .95rem; }
.savebar .btn { margin-bottom: 4px; }

/* ---------------------------------------------------------------- modales */
.modal-back { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: 20px; padding-top: 90px; overflow-y: auto; background: rgba(8, 5, 3, .72); animation: fade .15s; }
.modal-back.bye { opacity: 0; transition: opacity .15s; }
.modal { width: min(500px, 100%); padding: 22px 22px 20px; outline: none; animation: pop .22s cubic-bezier(.3, 1.4, .5, 1); margin: auto 0; }
.modal-wide { width: min(620px, 100%); }
.modal-dwarf { width: 104px; margin: -86px auto 6px; filter: drop-shadow(0 6px 4px rgba(0, 0, 0, .45)); }
.modal-title { text-align: center; font-size: 1.5rem; margin-bottom: 14px; }
.modal-text { text-align: center; color: var(--parch-2); }
.modal-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-top: 18px; }
.modal-actions .btn { flex: 1 1 140px; }
.kvs { margin-bottom: 14px; }
.kv { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 2px; border-bottom: 1.5px dashed rgba(230, 174, 76, .2); }
.kv-k { font: 600 1rem var(--font-title); color: var(--parch-2); }
.kv-link { font-weight: 700; overflow-wrap: anywhere; text-align: right; }
.change-key { margin-top: 12px; }

.toasts, #toasts { position: fixed; left: 0; right: 0; bottom: 0; z-index: 100; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 16px; padding-bottom: calc(16px + env(safe-area-inset-bottom)); pointer-events: none; }
.toast {
  max-width: min(520px, 100%); padding: 13px 18px; font-weight: 700; color: var(--parch); pointer-events: auto;
  background: var(--speck), linear-gradient(180deg, #52402c, #3a2b1d); border: 2px solid var(--edge); border-radius: 14px;
  box-shadow: 0 5px 0 #0f0905, 0 14px 24px -8px rgba(0, 0, 0, .7), inset 0 2px 0 rgba(255, 230, 180, .15);
  animation: pop .25s cubic-bezier(.3, 1.4, .5, 1);
}
.toast-error { background: linear-gradient(180deg, #7a3426, #5e2519); color: #ffe9e2; }
.toast.bye { opacity: 0; transform: translateY(10px); transition: .3s; }

/* ---------------------------------------------------------------- accueil (onboarding) */
.ob { min-height: 100vh; min-height: 100dvh; display: grid; place-items: start center; padding: 40px 18px 60px; }
.ob-step, .ob-welcome { width: min(600px, 100%); display: flex; flex-direction: column; align-items: center; }
.ob-guide.big { width: 210px; margin-bottom: -44px; }
.ob-guide { position: relative; z-index: 0; width: 150px; margin-bottom: -34px; filter: drop-shadow(0 8px 5px rgba(0, 0, 0, .45)); }
.ob-guide .dwarf { animation: squish 2.8s ease-in-out infinite; transform-origin: 50% 100%; }
.ob-guide.party .dwarf, .ob-party .ob-guide .dwarf { animation: jump 0.9s ease-in-out infinite; }
.ob-guide .hand { animation: wave 3.6s ease-in-out infinite; animation-delay: 1s; }
.ob-card { position: relative; z-index: 1; width: 100%; padding: 30px 28px 24px; }
.ob-title { font-size: clamp(1.8rem, 6vw, 2.35rem); font-weight: 700; margin-bottom: 14px; text-shadow: 0 3px 0 #0f0905; }
.lead { font-size: 1.1rem; color: var(--parch); }
.ob-actions { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; margin-top: 18px; }
.ob-card > .linkbtn { display: block; margin: 10px auto 0; }
.steps { list-style: none; display: flex; gap: 8px; margin: 0 0 16px; padding: 0; }
.steps li { flex: 1; display: flex; flex-direction: column; gap: 6px; font: 600 .82rem var(--font-title); color: var(--muted-2); letter-spacing: .04em; text-transform: uppercase; }
.steps .nail { height: 8px; border-radius: 99px; background: #20160e; box-shadow: inset 0 2px 3px rgba(0, 0, 0, .6); }
.steps .now { color: var(--honey-hi); }
.steps .now .nail, .steps .done .nail { background: linear-gradient(180deg, var(--honey-hi), var(--brass)); box-shadow: 0 0 10px rgba(230, 174, 76, .4); }
.steps .done { color: var(--moss); }


.schema { display: flex; align-items: stretch; gap: 8px; margin: 18px 0 8px; }
.mini-wrap { flex: 1 1 0; min-width: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.mini-wrap figcaption { font-size: .88rem; color: var(--parch-2); line-height: 1.35; }
.mini { position: relative; height: 112px; padding: 10px; background: #f0e2c2; border: 2px solid var(--edge); border-radius: 12px; box-shadow: inset 0 3px 8px rgba(120, 80, 30, .35), 0 3px 0 #0f0905; overflow: hidden; }
.mini-n { position: absolute; z-index: 2; top: 6px; right: 6px; width: 24px; height: 24px; display: grid; place-items: center; font: 700 .85rem var(--font-title); color: #2b1a08; background: var(--honey); border: 2px solid var(--edge); border-radius: 50%; }
.mini-ui { height: 100%; display: flex; gap: 8px; color: #5a4529; font: 700 .72rem var(--font-body); }
.mini-ui.col { flex-direction: column; justify-content: center; gap: 7px; }
.mini-ui .side { width: 46%; display: flex; flex-direction: column; gap: 6px; padding: 6px; background: #d9c59a; border-radius: 8px; }
.mini-ui .spacer { flex: 1; }
.mini-ui .who { padding: 4px 6px; border-radius: 6px; background: #fff3cf; border: 2px solid var(--copper); font-size: .66rem; }
.mini-ui .menu { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 6px; }
.ln { display: block; height: 7px; border-radius: 4px; background: rgba(90, 60, 20, .28); }
.w60 { width: 60%; } .w40 { width: 40%; } .w50 { width: 50%; }
.hot { display: inline-block; padding: 5px 8px; border-radius: 7px; background: #fff3cf; border: 2px solid var(--copper); color: #7a3f15; width: max-content; max-width: 100%; box-shadow: 0 0 0 3px rgba(184, 105, 58, .22); }
.hot-btn { background: var(--honey); border-color: #8a5a1e; color: #2b1a08; }
.keybox { padding: 5px 8px; border-radius: 7px; background: #fff; border: 1.5px dashed #a68a5a; font-family: ui-monospace, Consolas, monospace; font-size: .66rem; color: #7a6a4a; }
.sch-arrow { align-self: center; color: var(--honey); transform: rotate(180deg); flex: none; margin-top: -40px; }

.keyform .btn { width: 100%; }
.coins { position: fixed; inset: 0; pointer-events: none; overflow: hidden; z-index: 5; }
.preview .coins { position: absolute; border-radius: inherit; }
.coin { position: absolute; top: 0; left: var(--x); width: 20px; height: 20px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff1b8, #d9a63a 55%, #7a5218); box-shadow: inset 0 0 0 3px rgba(122, 82, 24, .35), 0 3px 4px rgba(0, 0, 0, .4); animation: fall var(--du) var(--dl) ease-in forwards; opacity: 0; }

/* ---------------------------------------------------------------- recruter */
.recruit { max-width: 720px; }
.dropzone {
  display: flex; align-items: center; gap: 18px; padding: 22px 24px; margin-bottom: 22px; cursor: pointer; color: var(--parch);
  background: var(--speck), var(--grain), linear-gradient(180deg, #3a2a1c, #2f2217);
  border: 3px dashed rgba(230, 174, 76, .5); border-radius: 20px;
  box-shadow: inset 0 3px 10px rgba(0, 0, 0, .45);
  transition: border-color .15s, background-color .15s, transform .15s;
}
.dropzone:hover { border-color: var(--honey); }
.dropzone.over { border-color: var(--honey-hi); transform: scale(1.015); background-color: #4a3622; }
.dropzone.has-file { border-style: solid; }
.drop-dwarf { width: 74px; flex: none; }
.drop-text { display: flex; flex-direction: column; }
.drop-text strong { font: 600 1.2rem var(--font-title); }
.drop-text span { color: var(--muted); }
.find { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; color: var(--muted); margin-top: 22px; }
.recruit-out { margin-bottom: 8px; }
.loading-card { display: flex; align-items: center; gap: 14px; padding: 18px 22px; margin: 24px 0; font: 600 1.1rem var(--font-title); }
.loading-card p { margin: 0; }
.spin-dwarf { width: 62px; flex: none; }
.spin-dwarf .dwarf { animation: squish 1s ease-in-out infinite; transform-origin: 50% 100%; }
.preview { --c: var(--honey); padding: 22px 22px 18px; margin: 26px 0 12px; overflow: visible; }
.preview-top { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 16px; }
.preview-top .stage { grid-row: auto; flex: none; margin-top: -40px; }
.preview-top .stage.jump .dwarf { animation: jump 1s ease-in-out infinite; }
.preview-name { font-size: 1.55rem; margin: 8px 0 2px; overflow-wrap: anywhere; }
.preview .sec-title { margin-top: 6px; }
.tags { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 8px; padding: 0; }
.tag { padding: 4px 12px; font-weight: 700; font-size: .92rem; color: var(--parch); background: rgba(0, 0, 0, .3); border: 1.5px solid rgba(230, 174, 76, .3); border-radius: 99px; }


/* ---------------------------------------------------------------- équipes */
.teams-list { display: flex; flex-direction: column; gap: 38px; }
.tslot { margin-left: calc(var(--depth, 0) * 28px); }
.tcard { --c: var(--honey); padding: 20px 20px 18px; }
.tcard.sub { border-left: 6px solid color-mix(in srgb, var(--c) 70%, #000); }
.tcard-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px 20px; flex-wrap: wrap; margin-bottom: 12px; }
.tcard-title { min-width: 0; }
.tname { font-size: 1.7rem; font-weight: 700; margin: 8px 0 0; text-shadow: 0 2px 0 #120a05; overflow-wrap: anywhere; }
.tcard-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.tcard .role { background: color-mix(in srgb, var(--c) 62%, #1a0f07); }

.tree-wrap { overflow-x: auto; padding: 8px 4px 14px; margin: 0 -4px; scrollbar-color: var(--brass) transparent; }
.tree { --rope: #a37f48; display: flex; justify-content: center; min-width: max-content; margin: 0 auto; }
.tree ul { list-style: none; margin: 0; padding: 0; }
.tree li { list-style: none; }
.onode {
  display: inline-flex; flex-direction: column; align-items: center; gap: 2px; width: 108px; padding: 6px 6px 8px; text-decoration: none; color: var(--parch);
  background: rgba(0, 0, 0, .26); border: 2px solid var(--edge); border-radius: 14px;
  box-shadow: inset 0 2px 0 rgba(255, 230, 180, .08), 0 3px 0 #0f0905; transition: transform .15s, background .15s;
}
.onode:hover { transform: translateY(-3px); background: rgba(0, 0, 0, .12); color: #fff; }
.onode.big { width: 128px; }
.onode.chief { border-color: var(--brass); box-shadow: inset 0 2px 0 rgba(255, 230, 180, .12), 0 3px 0 #0f0905, 0 0 0 2px rgba(201, 151, 63, .3); }
.onode.rest { opacity: .8; }
.onode.gone { opacity: .5; font-style: italic; }
.o-dwarf { width: 62px; display: block; margin-top: 4px; }
.onode.big .o-dwarf { width: 78px; }
.o-dwarf .dwarf { width: 100%; height: auto; overflow: visible; }
.o-txt { display: flex; flex-direction: column; align-items: center; line-height: 1.2; text-align: center; min-width: 0; max-width: 100%; }
.o-name { font: 600 1rem var(--font-title); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.o-role { font-size: .74rem; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; font-weight: 700; }
.o-tag { margin-top: 4px; font-size: .72rem; font-weight: 700; color: var(--honey-hi); }
.dwarf .crown { animation: crownfloat 3s ease-in-out infinite; transform-box: fill-box; }
@keyframes crownfloat { 50% { transform: translateY(-1.5px) rotate(2deg); } }

/* branches : cordes entre le chef et ses membres (version horizontale) */
@media (min-width: 721px) {
  .tree ul ul { display: flex; justify-content: center; padding-top: 22px; position: relative; }
  .tree ul ul::before { content: ""; position: absolute; top: 0; left: 50%; height: 22px; border-left: 3px solid var(--rope); }
  .tree li { position: relative; padding: 22px 8px 0; text-align: center; display: flex; flex-direction: column; align-items: center; }
  .tree > ul > li { padding-top: 0; }
  .tree li::before, .tree li::after { content: ""; position: absolute; top: 0; right: 50%; width: 50%; height: 22px; border-top: 3px solid var(--rope); }
  .tree li::after { right: auto; left: 50%; border-left: 3px solid var(--rope); }
  .tree > ul > li::before, .tree > ul > li::after { display: none; }
  .tree li:only-child::before, .tree li:only-child::after { display: none; }
  .tree li:only-child { padding-top: 22px; }
  .tree li:first-child::before, .tree li:last-child::after { border: 0 none; }
  .tree li:last-child::before { border-right: 3px solid var(--rope); border-radius: 0 12px 0 0; }
  .tree li:first-child::after { border-radius: 12px 0 0 0; }
}

/* éditeur d'équipe */
.modal .left { text-align: left; }
.zone {
  display: flex; flex-wrap: wrap; gap: 10px; min-height: 100px; padding: 10px;
  background: rgba(0, 0, 0, .25); border: 2px dashed rgba(230, 174, 76, .3); border-radius: 16px; box-shadow: inset 0 3px 8px rgba(0, 0, 0, .35);
  transition: border-color .15s, background .15s;
}
.zone.over { border-color: var(--honey-hi); background: rgba(230, 174, 76, .12); }
.zone-leader { border-color: rgba(201, 151, 63, .6); }
.zone-empty { margin: auto; color: var(--muted); font-weight: 600; text-align: center; padding: 6px 10px; }
.bchip {
  --c: var(--honey);
  display: grid; grid-template-columns: 56px 1fr; grid-template-rows: auto auto auto; column-gap: 8px; align-items: center;
  width: 218px; max-width: 100%; padding: 8px 10px; cursor: grab;
  background: linear-gradient(180deg, #55402b, #43301f); border: 2px solid var(--edge); border-radius: 14px;
  box-shadow: inset 0 2px 0 rgba(255, 230, 180, .12), 0 3px 0 #0f0905;
}
.bchip.lead { border-color: var(--brass); }
.bchip.dragging { opacity: .4; }
.b-dwarf { grid-row: 1 / 3; width: 56px; }
.b-dwarf .dwarf { width: 100%; height: auto; overflow: visible; }
.b-name { font: 600 1.02rem var(--font-title); align-self: end; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.b-role { font-size: .72rem; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; font-weight: 700; align-self: start; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.b-btns { grid-column: 1 / -1; display: flex; gap: 8px; margin-top: 6px; }
.mini-btn {
  flex: 1; min-height: 44px; padding: 0 10px; font: 600 .9rem var(--font-title); color: var(--parch); cursor: pointer;
  background: linear-gradient(180deg, #62482f, #4a3622); border: 2px solid var(--edge); border-radius: 11px;
  box-shadow: 0 3px 0 #130c07, inset 0 2px 0 rgba(255, 230, 180, .14);
}
.mini-btn:hover { color: #fff; filter: brightness(1.1); }
.mini-btn:active { transform: translateY(2px); box-shadow: 0 1px 0 #130c07; }
.mini-btn.gold { color: #2b1a08; background: linear-gradient(180deg, var(--honey-hi), var(--honey)); box-shadow: 0 3px 0 #8a5a1e, inset 0 2px 0 rgba(255, 255, 255, .35); }
.mini-btn[disabled] { opacity: .6; cursor: progress; }
.team-form .modal-actions { justify-content: flex-end; }
.team-form .modal-actions .btn-danger-ghost { margin-right: auto; flex: 0 0 auto; }
select.input { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--honey) 50%), linear-gradient(135deg, var(--honey) 50%, transparent 50%); background-position: calc(100% - 22px) 52%, calc(100% - 16px) 52%; background-size: 6px 6px; background-repeat: no-repeat; padding-right: 40px; }
select.input option { background: #2b1e14; color: var(--parch); }

/* cerveau */
.brain .sec-title { margin-top: 14px; }
.bmembers { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.bmember { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 9px 12px; background: rgba(0, 0, 0, .25); border: 2px solid rgba(0, 0, 0, .35); border-radius: 13px; }
.bm-txt { display: flex; flex-direction: column; line-height: 1.2; margin-right: auto; min-width: 0; }
.bm-txt small { color: var(--muted); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; font-size: .72rem; }
.bmember .mini-btn { flex: 0 0 auto; }
code { font-family: ui-monospace, Consolas, monospace; font-size: .86em; padding: 1px 6px; border-radius: 6px; background: rgba(0, 0, 0, .35); overflow-wrap: anywhere; }
.brain-done { display: flex; align-items: center; gap: 16px; margin-bottom: 8px; }
.brain-done .stage { width: 84px; height: 94px; flex: none; grid-row: auto; }
.brain-done .stage .dwarf { width: 80px; }
.brain-done .stage.jump .dwarf { animation: jump 1s ease-in-out infinite; }
.todo { list-style: none; padding: 0; margin: 0; }
.todo .note { margin: 8px 0; }

/* version verticale de l'organigramme (mobile) */
@media (max-width: 720px) {
  .tslot { margin-left: calc(var(--depth, 0) * 14px); }
  .tcard { padding: 18px 14px 14px; }
  .tcard-actions .btn { flex: 1 1 140px; }
  .tree-wrap { overflow: visible; }
  .tree { display: block; min-width: 0; --rope: #a37f48; }
  .tree ul ul { margin: 0 0 0 30px; padding: 0 0 0 0; border-left: 3px solid var(--rope); }
  .tree li { position: relative; padding: 10px 0 0 0; }
  .tree ul ul > li { padding-left: 22px; }
  .tree ul ul > li::before { content: ""; position: absolute; left: 0; top: 46px; width: 22px; border-top: 3px solid var(--rope); }
  .tree .onode, .tree .onode.big { flex-direction: row; width: 100%; max-width: 100%; justify-content: flex-start; gap: 10px; padding: 6px 12px 6px 8px; }
  .tree .o-dwarf, .tree .onode.big .o-dwarf { width: 52px; flex: none; margin: 0; }
  .tree .o-txt { align-items: flex-start; text-align: left; }
  .bchip { width: 100%; }
  .brain-done { flex-direction: column; text-align: center; }
}

/* ---------------------------------------------------------------- mobile */
@media (max-width: 720px) {
  .desk-only { display: none !important; }
  .topnav { display: none; }
  .topbar-in { padding: 8px max(16px, env(safe-area-inset-right)) 8px max(16px, env(safe-area-inset-left)); }
  .view { padding: 22px max(16px, env(safe-area-inset-right)) calc(110px + env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); }
  .tabbar {
    display: grid; grid-template-columns: repeat(5, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
    padding: 8px max(6px, env(safe-area-inset-right)) calc(8px + env(safe-area-inset-bottom)) max(6px, env(safe-area-inset-left)); gap: 4px;
    background: var(--speck), var(--grain), linear-gradient(180deg, #3b2a1b, #241811);
    border-top: 3px solid var(--edge); box-shadow: 0 -10px 20px -8px rgba(0, 0, 0, .7), inset 0 2px 0 rgba(255, 220, 160, .12);
  }
  .tablink {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 58px; padding: 4px;
    font: 600 .72rem var(--font-title); color: var(--muted); text-decoration: none; background: none; border: 2px solid transparent; border-radius: 14px; cursor: pointer; min-width: 0;
  }
  .tablink .nav-l { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .tablink.active { color: #2b1a08; background: linear-gradient(180deg, var(--honey-hi), var(--honey)); border-color: var(--edge); box-shadow: 0 3px 0 #8a5a1e, inset 0 2px 0 rgba(255, 255, 255, .35); }
  .toolbar { gap: 12px; }
  .search { flex-basis: 100%; max-width: none; }
  .chips { flex-wrap: nowrap; overflow-x: auto; margin: 0 -16px; padding: 2px 16px 8px; scrollbar-width: none; width: calc(100% + 32px); }
  .chips::-webkit-scrollbar { display: none; }
  .chip { flex: none; }
  .grid { gap: 30px; }
  .sheet { width: 100%; border-left: 0; }
  .sheet-body { padding: 10px 14px 40px; }
  .sheet-head { margin-top: 50px; }
  .sheet-name { font-size: 1.7rem; }
  .ob { padding-top: 24px; }
  .ob-card { padding: 26px 18px 20px; }
  .ob-actions .btn { width: 100%; }
  .schema { flex-direction: column; gap: 14px; }
  .sch-arrow { display: none; }
  .mini-wrap { flex-direction: row; align-items: center; gap: 12px; }
  .mini { width: 150px; flex: none; height: 104px; }
  .dropzone { padding: 18px; }
  .savebar { padding-left: 14px; padding-right: 14px; }
  .toasts, #toasts { bottom: calc(84px + env(safe-area-inset-bottom)); }
  body.sheet-open #toasts { bottom: 0; }
}
@media (max-width: 420px) {
  .card { grid-template-columns: 84px 1fr; gap: 4px 10px; padding: 18px 14px 14px; }
  .stage { width: 84px; height: 96px; }
  .stage .dwarf { width: 82px; }
  .name { font-size: 1.45rem; }
  .brand-name { font-size: 1.35rem; }
  .sheet-head { gap: 10px; padding: 20px 14px 18px 10px; }
  .sheet-stage { width: 100px; margin-top: -54px; }
  .switch-row { padding-right: 24px; }
  .opt { width: 76px; }
  .foot-state { display: none; }
  .modal-actions .btn { flex-basis: 100%; }
}

/* ---------------------------------------------------------------- app : navigation, badge, installation */
.nav-ico { position: relative; display: inline-flex; }
.nav-badge {
  position: absolute; top: -7px; right: -11px; min-width: 20px; height: 20px; padding: 0 5px; display: grid; place-items: center;
  font: 700 .72rem/1 var(--font-body); color: #fff6ee; background: linear-gradient(180deg, #e8836d, #c4513a);
  border: 2px solid var(--edge); border-radius: 99px; box-shadow: 0 2px 0 #7a2616;
}
.navlink.active .nav-badge, .tablink.active .nav-badge { border-color: #2b1a08; }
.btn-sm { min-height: 40px; padding: 0 14px; font-size: .95rem; margin-bottom: 5px; }
.topbar-install { flex: none; }
@media (max-width: 720px) { .topbar-in { gap: 8px; } .topbar-install { padding: 0 11px; font-size: .88rem; } }
.chips.seg { flex-wrap: wrap; overflow: visible; margin: 0 0 4px; padding: 0; width: auto; }
.form-msg.ok { color: var(--moss); }
.mono { font-family: ui-monospace, Consolas, monospace; font-size: .9rem; }

/* ---------------------------------------------------------------- portier (connexion) */
.gate .ob-step { align-items: center; }
.gate-door {
  position: relative; z-index: 0; width: 230px; height: 214px; margin-bottom: -34px; flex: none;
  border-radius: 115px 115px 8px 8px; border: 6px solid var(--edge); border-bottom: 0;
  background:
    radial-gradient(ellipse 60% 55% at 50% 70%, rgba(243, 197, 109, .55), rgba(184, 105, 58, .16) 62%, transparent 75%),
    repeating-linear-gradient(90deg, rgba(0, 0, 0, .28) 0 3px, transparent 3px 46px),
    linear-gradient(180deg, #4a3724, #2a1c12);
  box-shadow: inset 0 0 0 4px #5b4026, inset 0 8px 30px rgba(0, 0, 0, .6), 0 14px 26px -10px rgba(0, 0, 0, .7);
  overflow: hidden;
}
.gate-door::before, .gate-door::after { /* clous de laiton */
  content: ""; position: absolute; top: 40%; width: 9px; height: 9px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #f1d089, #a97a2c 60%, #5a3c12); box-shadow: 0 1px 2px #000;
}
.gate-door::before { left: 16px; } .gate-door::after { right: 16px; }
.gate-glow { position: absolute; inset: 0; background: radial-gradient(circle at 50% 78%, rgba(255, 224, 150, 0), rgba(255, 224, 150, 0) 60%); transition: background .35s; }
.gate-door.open .gate-glow { background: radial-gradient(circle at 50% 78%, rgba(255, 236, 180, .95), rgba(255, 210, 120, .5) 55%, transparent 75%); }
.gate-dwarf { position: absolute; left: 50%; bottom: 14px; width: 128px; margin-left: -64px; filter: drop-shadow(0 6px 4px rgba(0, 0, 0, .5)); }
.gate-dwarf .dwarf { width: 100%; height: auto; overflow: visible; animation: squish 3s ease-in-out infinite; transform-origin: 50% 100%; }
.gate-dwarf .hand { animation: wave 4s ease-in-out infinite; animation-delay: 1.4s; }
.gate-sill { position: absolute; left: 0; right: 0; bottom: 0; height: 14px; background: linear-gradient(180deg, #6b6155, #3d362e); border-top: 3px solid var(--edge); }
.gate-door.nope .gate-dwarf { animation: nope .5s ease; }
.gate-door.open .gate-dwarf { transform: translateY(-6px) scale(1.04); transition: transform .3s; }
@keyframes nope { 15% { transform: translateX(-9px) rotate(-3deg); } 35% { transform: translateX(8px) rotate(3deg); } 55% { transform: translateX(-6px); } 75% { transform: translateX(4px); } }
.gate .ob-card { padding-top: 38px; }
.gate .ob-title, .gate .lead { text-align: center; }

/* ---------------------------------------------------------------- boîte aux lettres */
.mail-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; max-width: 760px; }
.mail {
  position: relative; display: flex; align-items: center; gap: 14px; padding: 12px 16px 12px 12px; min-height: 76px; color: var(--parch); text-decoration: none;
  background: rgba(0, 0, 0, .22); border: 2px solid rgba(0, 0, 0, .35); border-radius: 16px;
  box-shadow: inset 0 3px 8px rgba(0, 0, 0, .3), 0 1px 0 rgba(255, 230, 180, .08);
}
.mail:hover { background: rgba(0, 0, 0, .12); color: #fff; }
.mail.unread { background: linear-gradient(180deg, #55402b, #43301f); border-color: var(--edge); box-shadow: inset 0 2px 0 rgba(255, 220, 160, .14), 0 4px 0 #0f0905; }
.mail.read { opacity: .8; }
.mail-av { flex: none; width: 54px; height: 60px; display: block; }
.mail-av .dwarf { width: 100%; height: 100%; overflow: visible; }
.mail-av-ico { display: grid; place-items: center; width: 50px; height: 50px; border-radius: 50%; background: rgba(0, 0, 0, .3); }
.mail-av-ico.err { color: var(--brick); } .mail-av-ico.ok { color: var(--moss); } .mail-av-ico.info, .mail-av-ico.warn { color: var(--honey-hi); }
.mail-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.mail-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.mail-title { font: 600 1.05rem/1.25 var(--font-title); overflow-wrap: anywhere; }
.mail-when { flex: none; font-size: .8rem; color: var(--muted); white-space: nowrap; }
.mail-body { font-size: .95rem; color: var(--parch-2); overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.mail-kind { align-self: flex-start; font: 700 .68rem var(--font-title); letter-spacing: .09em; text-transform: uppercase; padding: 2px 8px; border-radius: 99px; background: rgba(0, 0, 0, .3); color: var(--muted); }
.mail-kind.err { color: var(--brick); } .mail-kind.ok { color: var(--moss); } .mail-kind.info, .mail-kind.warn { color: var(--honey-hi); }
.mail-dot { flex: none; width: 12px; height: 12px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #ffb09c, #c4513a); box-shadow: 0 0 0 3px rgba(224, 112, 90, .25); }
.view-inbox .team-head .btn { margin-bottom: 7px; }

/* ---------------------------------------------------------------- réglages */
.set-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; max-width: 760px; }
.set-sec { padding: 20px 20px 16px; margin: 0; }
.set-sec .sec-title { margin-bottom: 10px; }
.set-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 12px; }
.sub-title { font-size: 1rem; color: var(--parch-2); margin: 18px 0 6px; }
.dev { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; }
.dev small { color: var(--muted); font-size: .84rem; }
.me { margin-left: 8px; font: 700 .68rem var(--font-title); font-style: normal; letter-spacing: .08em; text-transform: uppercase; padding: 2px 8px; border-radius: 99px; background: rgba(152, 191, 104, .18); color: var(--moss); }
.code { margin: 6px 0 0; padding: 12px 14px; max-height: 260px; overflow: auto; font: .8rem/1.5 ui-monospace, Consolas, monospace; color: var(--parch-2); background: #1f150e; border: 2px solid #5c4430; border-radius: 12px; box-shadow: inset 0 3px 7px rgba(0, 0, 0, .55); white-space: pre; tab-size: 2; }
.pwform .btn { margin-top: 4px; }

/* ---------------------------------------------------------------- suggestion + guide iPhone */
.nudge {
  position: fixed; z-index: 60; left: 12px; right: 12px; bottom: calc(96px + env(safe-area-inset-bottom)); max-width: 520px; margin: 0 auto;
  display: grid; grid-template-columns: 62px 1fr; gap: 6px 12px; align-items: center; padding: 14px 16px 10px; animation: pop .3s cubic-bezier(.3, 1.4, .5, 1);
}
.nudge.bye { opacity: 0; transform: translateY(10px); transition: .25s; }
.nudge-d { grid-row: 1 / 3; width: 62px; } .nudge-d .dwarf { width: 100%; height: auto; overflow: visible; }
.nudge-t { display: flex; flex-direction: column; line-height: 1.3; font-size: .92rem; color: var(--parch-2); }
.nudge-t strong { font: 600 1.1rem var(--font-title); color: var(--parch); }
.nudge-a { display: flex; align-items: center; gap: 10px; }
.nudge-a .btn { margin-bottom: 4px; }
@media (min-width: 721px) { .nudge { left: auto; right: 24px; bottom: 24px; margin: 0; } }
.ios-steps { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.ios-step { display: flex; align-items: center; gap: 12px; padding: 10px 12px; background: rgba(0, 0, 0, .25); border-radius: 14px; border: 2px solid rgba(0, 0, 0, .35); }
.ios-n { flex: none; width: 26px; height: 26px; display: grid; place-items: center; font: 700 .9rem var(--font-title); color: #2b1a08; background: var(--honey); border: 2px solid var(--edge); border-radius: 50%; }
.ios-ico { flex: none; width: 46px; height: 46px; display: grid; place-items: center; background: #f0e2c2; border-radius: 11px; border: 2px solid var(--edge); color: #7a3f15; }
.ios-txt { font-size: .95rem; color: var(--parch-2); line-height: 1.35; }
.ios-txt strong { color: var(--parch); font-family: var(--font-title); }

/* ---------------------------------------------------------------- l'Ancien */
.role-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; position: relative; z-index: 2; }
.health { display: inline-grid; place-items: center; width: 30px; height: 30px; margin: -4px -4px -4px 0; border-radius: 50%; flex: none; }
.health-dot { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--edge); box-shadow: 0 0 0 3px rgba(0, 0, 0, .18), inset 0 2px 2px rgba(255, 255, 255, .35); }
.h-ok .health-dot { background: radial-gradient(circle at 35% 30%, #c9ec9b, #5f9a3a); }
.h-warn .health-dot { background: radial-gradient(circle at 35% 30%, #ffe0a0, #d98a2c); animation: pulse 2.4s ease-in-out infinite; }
.h-critical .health-dot { background: radial-gradient(circle at 35% 30%, #ffb09c, #c4513a); animation: pulse 1.4s ease-in-out infinite; }

.ancien-top { margin-bottom: 34px; position: relative; }
.ancien-top:not(:empty)::after { /* la corde qui relie l'Ancien aux équipes */
  content: ""; position: absolute; left: 50%; bottom: -34px; height: 34px; border-left: 3px solid #a37f48; transform: translateX(-1.5px);
}
.ancien-banner {
  --c: #6a5aa0; display: flex; align-items: center; gap: 16px; padding: 14px 20px 14px 14px; max-width: 760px; margin: 0 auto; text-decoration: none; color: var(--parch);
  background: var(--speck), var(--grain), linear-gradient(180deg, #4b3d6e, #2f2548);
  transition: transform .2s cubic-bezier(.3, 1.5, .5, 1);
}
.ancien-banner:hover { transform: translateY(-3px); color: #fff; }
.ancien-banner.alert { border-color: #5a1a10; box-shadow: inset 0 2px 0 rgba(255, 220, 160, .14), inset 0 -3px 0 rgba(0, 0, 0, .22), 0 6px 0 #0f0905, 0 0 0 2px rgba(224, 112, 90, .55), 0 16px 24px -10px rgba(0, 0, 0, .65); }
.ab-d { flex: none; width: 82px; margin-top: -26px; margin-bottom: -2px; filter: drop-shadow(0 6px 4px rgba(0, 0, 0, .45)); }
.ab-d .dwarf { width: 100%; height: auto; overflow: visible; animation: breathe 4.2s ease-in-out infinite; transform-origin: 50% 100%; }
.ab-t { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; flex: 1; }
.ab-t .role { background: #6a5aa0; border-color: #3c3166; }
.ab-name { font: 700 1.5rem var(--font-title); text-shadow: 0 2px 0 #120a05; }
.ab-line { font-size: .95rem; color: #d6cdee; }
.ab-go { flex: none; transform: rotate(180deg); color: var(--honey-hi); }
@keyframes glowpulse { 50% { opacity: .55; transform: scale(1.14); } }
.dwarf .ancien-glow { transform-box: fill-box; transform-origin: center; animation: glowpulse 3.2s ease-in-out infinite; }
.dwarf.ancien.asleep .ancien-glow { animation: none; opacity: .15; }

.anc-head { --c: #6a5aa0; display: flex; align-items: center; gap: 18px; flex-wrap: wrap; padding: 20px 22px 18px 16px; margin: 62px 0 18px; background: var(--speck), var(--grain), linear-gradient(180deg, #4b3d6e, #2f2548); }
.anc-stage { flex: none; width: 124px; margin-top: -76px; filter: drop-shadow(0 8px 5px rgba(0, 0, 0, .45)); }
.anc-stage .dwarf { width: 100%; height: auto; overflow: visible; animation: breathe 4.2s ease-in-out infinite; transform-origin: 50% 100%; }
.anc-id { flex: 1 1 220px; min-width: 0; }
.anc-id .role { background: #6a5aa0; border-color: #3c3166; }
.anc-id .page-title { margin: 8px 0 2px; }
.anc-facts { flex: 1 1 100%; display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; }
.fact { display: flex; flex-direction: column; padding: 8px 12px; background: rgba(0, 0, 0, .26); border: 2px solid rgba(0, 0, 0, .35); border-radius: 12px; line-height: 1.2; }
.fact strong { font: 700 1.5rem var(--font-title); }
.fact span { font-size: .8rem; color: var(--muted); }
.fact.good strong { color: var(--moss); } .fact.meh strong { color: var(--honey-hi); } .fact.bad strong { color: var(--brick); }
.anc-intro { max-width: 640px; margin: 0 0 22px; }
.back-link { display: inline-flex; align-items: center; padding-left: 0; }

.obs-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.obs { display: flex; gap: 14px; padding: 14px 16px 14px 12px; background: linear-gradient(180deg, #55402b, #43301f); border: 2px solid var(--edge); border-left-width: 7px; border-radius: 16px; box-shadow: inset 0 2px 0 rgba(255, 220, 160, .12), 0 4px 0 #0f0905; }
.obs.sev-err { border-left-color: var(--brick); } .obs.sev-warn { border-left-color: var(--honey); } .obs.sev-info { border-left-color: var(--moss); }
.obs.closed { opacity: .72; }
.obs-av { flex: none; width: 56px; height: 62px; display: grid; place-items: center; color: var(--honey-hi); }
.obs-av .dwarf { width: 100%; height: 100%; overflow: visible; }
.obs-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.obs-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.obs-sev { font: 700 .7rem var(--font-title); letter-spacing: .09em; text-transform: uppercase; padding: 3px 9px; border-radius: 99px; background: rgba(0, 0, 0, .3); }
.obs-sev.err { color: var(--brick); } .obs-sev.warn { color: var(--honey-hi); } .obs-sev.info { color: var(--moss); }
.obs-when { font-size: .8rem; color: var(--muted); white-space: nowrap; }
.obs-title { font: 600 1.15rem/1.25 var(--font-title); overflow-wrap: anywhere; }
.obs-msg { margin: 0; color: var(--parch-2); overflow-wrap: anywhere; }
.obs-count { font-style: normal; color: var(--muted); }
.obs-advice { margin: 2px 0 0; display: flex; gap: 8px; align-items: flex-start; font-weight: 700; color: #f3d79e; }
.obs-advice .ico { margin-top: 2px; }
.obs-actions { display: flex; flex-wrap: wrap; gap: 8px 10px; margin-top: 8px; }
.obs-actions .btn { margin-bottom: 5px; min-height: 40px; }
.closed-toggle { margin-top: 12px; }
.obs-closed { margin-top: 10px; }

.report-card { padding: 14px 16px; }
.report-sum { margin: 0 0 8px; font-size: 1.02rem; }
.report-ai { margin: 0 0 8px; font-weight: 700; color: #8e2a18; }
.report-bots, .report-issues { list-style: none; margin: 8px 0 0; padding: 0; }
.report-bots li { display: flex; gap: 10px; align-items: baseline; padding: 5px 2px; border-bottom: 1.5px dashed rgba(90, 60, 20, .25); }
.report-bots li span { flex: 1; font-weight: 700; min-width: 0; overflow-wrap: anywhere; }
.report-bots li em { font-style: normal; color: #6b5535; font-size: .88rem; }
.report-bots li b { font-size: .88rem; color: #3f6a22; min-width: 86px; text-align: right; } .report-bots li b.bad { color: #8e2a18; }
.report-issues li { padding: 6px 2px; font-size: .95rem; border-bottom: 1.5px dashed rgba(90, 60, 20, .25); }
.report-when { margin: 10px 0 0; font-size: .8rem; color: #6b5535; }

.anc-settings { max-width: 720px; }
.opt-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 2px; border-bottom: 1.5px dashed rgba(230, 174, 76, .2); }
.opt-txt { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; }
.opt-txt strong { font: 600 1rem var(--font-title); color: var(--parch); }
.opt-txt span { font-size: .88rem; color: var(--muted); }
.opt-row .input { width: 190px; flex: none; min-height: 44px; }
.opt-row .input.num { width: 96px; text-align: center; }
.anc-settings .sub-title { margin-top: 22px; color: var(--honey-hi); }
.opt-row .switch[disabled] { opacity: .5; }
@media (max-width: 520px) {
  .ancien-banner { padding-right: 14px; gap: 10px; }
  .ab-d { width: 70px; }
  .anc-stage { width: 104px; margin-top: -64px; }
  .obs { flex-direction: column; gap: 6px; }
  .obs-av { width: 48px; height: 52px; }
  .opt-row .input { width: 150px; }
  .report-bots li { flex-wrap: wrap; }
}

/* ---------------------------------------------------------------- mouvement réduit */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; animation-delay: 0s !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  .coin { display: none; }
  .dwarf .z { opacity: .8; }
  .card:hover { transform: none; }
}

/* ---------------------------------------------------------------- catalogue de nains prêts à l'emploi */
.recruit-wide { max-width: 1040px; }
.cat-title { font-size: 1.4rem; margin: 6px 0 4px; }
.cat-sub { margin: 0 0 30px; }
.recruit-wide .recruit { margin-top: 44px; }
.cat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 310px), 1fr)); gap: 46px 22px; }
.cat-card { --c: var(--honey); display: flex; flex-direction: column; gap: 10px; padding: 18px 20px 18px; margin-top: 0; }
.cat-top { display: flex; align-items: flex-start; gap: 14px; margin-top: -44px; }
.cat-stage { flex: none; width: 92px; filter: drop-shadow(0 6px 4px rgba(0, 0, 0, .45)); }
.cat-stage .dwarf { width: 100%; height: auto; overflow: visible; }
.cat-id { min-width: 0; padding-top: 48px; }
.cat-name { font-size: 1.35rem; overflow-wrap: anywhere; margin: 6px 0 0; }
.cat-id .wfname { margin: 2px 0 0; }
.cat-card .role { background: color-mix(in srgb, var(--c) 62%, #1a0f07); }
.cat-desc { -webkit-line-clamp: unset; display: block; margin: 2px 0 0; font-weight: 600; }
.cat-does { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: .94rem; color: var(--parch-2); }
.cat-does li { position: relative; padding-left: 20px; }
.cat-does li::before { content: ""; position: absolute; left: 3px; top: .5em; width: 8px; height: 8px; border-radius: 2px; transform: rotate(45deg); background: var(--c); border: 1.5px solid var(--edge); }
.creds { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.cred { font-size: .9rem; font-weight: 700; }
.cred-badge { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 99px; background: rgba(0, 0, 0, .3); border: 1.5px solid rgba(152, 191, 104, .4); color: var(--moss); list-style: none; cursor: default; min-height: 32px; }
.cred.ko .cred-badge { color: #ffc0b3; border-color: rgba(224, 112, 90, .5); cursor: pointer; }
.cred.ko.opt .cred-badge { color: var(--muted); border-color: rgba(187, 169, 139, .4); }
.cred summary::-webkit-details-marker { display: none; }
.cred-more { font-size: .78rem; text-decoration: underline; text-underline-offset: 3px; opacity: .85; margin-left: 2px; }
.cred-guide { margin: 8px 0 2px; padding: 10px 12px 10px 32px; font-weight: 600; font-size: .88rem; color: var(--parch-2); background: rgba(0, 0, 0, .25); border-radius: 12px; display: flex; flex-direction: column; gap: 4px; }
.cat-in { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 8px 12px; border-radius: 12px; background: rgba(152, 191, 104, .1); border: 1.5px solid rgba(152, 191, 104, .35); font-weight: 700; font-size: .92rem; }
.cat-in-tag { display: inline-flex; align-items: center; gap: 5px; color: var(--moss); }
.cat-in-link { color: var(--honey-hi); }
.cat-foot { margin-top: auto; padding-top: 6px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.cat-warn { font-size: .85rem; color: var(--muted); font-weight: 700; }
.cat-formcard { max-width: 720px; margin-top: 40px; }
.cat-form .field { margin-bottom: 20px; }
.pills { display: flex; flex-wrap: wrap; gap: 8px; }
.pill { min-width: 52px; min-height: 44px; justify-content: center; }
.chip[aria-pressed="true"] { color: #2b1a08; background: linear-gradient(180deg, var(--honey-hi), var(--honey)); box-shadow: 0 3px 0 #8a5a1e, inset 0 2px 0 rgba(255, 255, 255, .35); }
.pill-presets { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 4px; }
.linkbtn.preset { min-height: 36px; padding: 4px 0; font-size: .9rem; }
.input.time, .input.num { max-width: 160px; }
.unit { color: var(--muted); font-weight: 700; }
.pickups { display: flex; flex-direction: column; gap: 10px; }
.pk-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 8px; border-radius: 14px; background: rgba(0, 0, 0, .18); }
.pk-row.on { background: rgba(0, 0, 0, .3); }
.pk-toggle { min-height: 44px; flex: 1 1 210px; justify-content: flex-start; }
.pk-sub { flex: 1 1 160px; min-width: 0; }
.pk-sub .input { min-height: 44px; }
.pk-date { flex-basis: 100%; }
.pk-date .hint { margin: 0 0 6px; }
@media (max-width: 720px) {
  .cat-grid { gap: 50px 0; }
  .cat-card { padding: 16px 16px 16px; }
  .cat-foot .btn { width: 100%; }
  .cat-formcard { padding: 22px 16px 16px; }
  .input.time, .input.num { max-width: none; }
}

/* ---------------------------------------------------------------- recruter par la parole */
.talk-host { margin-bottom: 52px; }
.talk { padding: 20px 22px 20px; }
.talk-top { display: flex; align-items: flex-start; gap: 16px; margin-top: -58px; margin-bottom: 8px; }
.talk-master { flex: none; width: 128px; filter: drop-shadow(0 8px 5px rgba(0, 0, 0, .45)); }
.talk-master .dwarf { width: 100%; height: auto; overflow: visible; animation: breathe 4.2s ease-in-out infinite; transform-origin: 50% 100%; }
.talk-intro { min-width: 0; padding-top: 62px; }
.talk-title { font-size: 1.5rem; margin: 6px 0 4px; overflow-wrap: anywhere; }
.talk-intro .summary { min-height: 0; margin-top: 2px; }
.talk-area { min-height: 92px; font-size: 1.05rem; resize: vertical; }
.talk-ex { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 0; }
.talk-chip { font-size: .86rem; padding: 6px 12px; min-height: 40px; text-align: left; line-height: 1.25; white-space: normal; max-width: 100%; flex: 0 1 auto; }
.talk-log { display: flex; flex-direction: column; gap: 8px; margin: 10px 0 14px; max-height: 260px; overflow-y: auto; }
.talk-log[hidden] { display: none; }
.bubble { padding: 9px 13px; border-radius: 14px; font-size: .95rem; max-width: 92%; overflow-wrap: anywhere; }
.bubble-who { display: block; font: 700 .7rem var(--font-title); letter-spacing: .08em; text-transform: uppercase; opacity: .75; margin-bottom: 1px; }
.bubble.user { align-self: flex-end; background: rgba(230, 174, 76, .16); border: 1.5px solid rgba(230, 174, 76, .4); }
.bubble.assistant { align-self: flex-start; background: rgba(0, 0, 0, .28); border: 1.5px solid rgba(255, 230, 180, .15); color: var(--parch-2); }
.talk-out { margin-top: 6px; }
.talk-q { margin-top: 18px; }
.loading-card.dig { margin: 22px 0 6px; gap: 18px; }
.diggers { display: flex; flex: none; gap: 2px; }
.digger { width: 54px; animation: dig .9s ease-in-out infinite; animation-delay: var(--d, 0s); transform-origin: 50% 100%; }
.digger .dwarf { width: 100%; height: auto; overflow: visible; }
@keyframes dig { 0%, 100% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(-6px) rotate(5deg); } }
.wait-line { font: 600 1.05rem var(--font-title); margin: 0 0 4px; }
.prop-list { display: flex; flex-direction: column; gap: 28px; margin-top: 22px; }
.prop { --c: var(--honey); padding: 20px 20px 18px; display: flex; flex-direction: column; gap: 12px; }
.prop-head { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.prop-kind { font: 600 .72rem/1 var(--font-title); letter-spacing: .09em; text-transform: uppercase; color: #fff4dc; padding: 5px 10px; border-radius: 99px;
  background: color-mix(in srgb, var(--c) 62%, #1a0f07); border: 1.5px solid color-mix(in srgb, var(--c) 40%, #000); }
.prop-kind.team { background: linear-gradient(180deg, #8a6a2a, #5d4318); border-color: var(--brass); }
.prop-title { font-size: 1.35rem; overflow-wrap: anywhere; }
.prop-why { margin: 0; color: var(--parch-2); font-weight: 600; }
.prop-h { font: 600 .98rem var(--font-title); color: var(--honey-hi); margin: 0 0 6px; }
.prop-steps { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 4px; font-size: .95rem; color: var(--parch-2); }
.prop-items { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.prop-item { display: flex; align-items: center; gap: 12px; padding: 8px 10px; background: rgba(0, 0, 0, .24); border-radius: 14px; border-left: 5px solid var(--c); }
.prop-av { flex: none; width: 52px; }
.prop-av .dwarf { width: 100%; height: auto; overflow: visible; }
.prop-it { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.prop-it strong { font: 600 1.05rem var(--font-title); }
.prop-role { font-size: .74rem; text-transform: uppercase; letter-spacing: .06em; font-weight: 700; color: var(--muted); }
.prop-sub { font-size: .88rem; color: var(--parch-2); overflow-wrap: anywhere; }
.prop-src { font-size: .8rem; color: var(--muted); font-weight: 700; overflow-wrap: anywhere; }
.prop-src.cat { color: var(--moss); }
.prop-cost { display: flex; align-items: center; gap: 8px; margin: 0; font-weight: 700; color: var(--parch-2); font-size: .94rem; }
.prop-adjust { display: flex; gap: 10px; align-items: center; }
.prop-adjust[hidden] { display: none; }
.prop-adjust .input { flex: 1; min-width: 0; }
.res-list { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.res { display: flex; gap: 10px; align-items: flex-start; font-weight: 600; }
.res.ok > span:first-child { color: var(--moss); }
.res.ko { color: #ffc0b3; }
.res-warn { display: block; font-size: .88rem; color: var(--muted); font-weight: 600; }
@media (max-width: 720px) {
  .talk { padding: 18px 14px 16px; }
  .talk-top { margin-top: -52px; gap: 10px; }
  .talk-master { width: 96px; }
  .talk-intro { padding-top: 56px; }
  .talk-title { font-size: 1.25rem; }
  .prop { padding: 18px 14px 14px; }
  .prop-adjust { flex-direction: column; align-items: stretch; }
  .loading-card.dig { flex-direction: column; text-align: center; }
  .talk-host { margin-bottom: 46px; }
}
@media (prefers-reduced-motion: reduce) { .digger, .talk-master .dwarf { animation: none; } }

/* ==========================================================================
   Trésorerie : tableau de bord des finances + pack d'équipe du catalogue
   ========================================================================== */
.tr-head-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.tr-head-actions .btn { margin-bottom: 0; }
.tr-body { display: flex; flex-direction: column; gap: 26px; }
.tr-cols { display: grid; grid-template-columns: 1fr; gap: 26px; align-items: start; }
.tr-col { display: flex; flex-direction: column; gap: 26px; min-width: 0; }
@media (min-width: 900px) { .tr-cols { grid-template-columns: 1fr 1fr; } }

.tr-card { padding: 20px 18px 18px; min-width: 0; }
.tr-card > :last-child { margin-bottom: 0; }
.tr-h { font: 600 1.2rem var(--font-title); color: var(--honey-hi); margin: 0 0 14px; padding: 0; display: flex; align-items: center; gap: 10px; }
.tr-h3 { font: 600 .98rem var(--font-title); color: var(--parch-2); margin: 0 0 8px; letter-spacing: .02em; }
.tr-sub { margin-top: 16px; padding-top: 14px; border-top: 1.5px dashed rgba(230, 174, 76, .22); }

/* carte « reste à vivre » */
.tr-hero { padding: 24px 20px 20px; background: var(--speck), var(--grain), radial-gradient(ellipse 80% 120% at 85% -10%, rgba(152, 191, 104, .22), transparent 60%), linear-gradient(180deg, var(--wood-hi), var(--wood-lo)); }
.tr-hero.neg { background: var(--speck), var(--grain), radial-gradient(ellipse 80% 120% at 85% -10%, rgba(224, 112, 90, .26), transparent 60%), linear-gradient(180deg, var(--wood-hi), var(--wood-lo)); }
.tr-kicker { font: 600 1rem var(--font-title); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin: 0 0 2px; }
.tr-big { font: 700 clamp(2.6rem, 11vw, 4rem)/1.05 var(--font-title); color: var(--moss); margin: 0 0 6px; text-shadow: 0 3px 0 #0f0905, 0 0 22px rgba(152, 191, 104, .25); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.tr-hero.neg .tr-big { color: var(--brick); text-shadow: 0 3px 0 #0f0905, 0 0 22px rgba(224, 112, 90, .25); }
.tr-formula { display: flex; flex-wrap: wrap; gap: 2px 8px; align-items: baseline; color: var(--parch-2); font-weight: 700; font-size: .95rem; margin: 0 0 16px; }
.tr-op { color: var(--muted-2); font-weight: 800; }
.tr-month { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.tr-month .tr-bar { flex: 1; }
.tr-month-l { font: 600 .85rem var(--font-title); color: var(--muted); white-space: nowrap; }
.tr-hint { font-size: .92rem; color: #f3d79e; margin: 0 0 12px; font-weight: 700; }
.tr-accts { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.tr-acct { display: inline-flex; flex-direction: column; gap: 1px; padding: 7px 12px; border-radius: 12px; background: rgba(0, 0, 0, .28); border: 1.5px solid rgba(0, 0, 0, .35); font-size: .82rem; color: var(--muted); font-weight: 700; min-width: 0; }
.tr-acct strong { font: 700 1.02rem var(--font-title); color: var(--parch); font-variant-numeric: tabular-nums; }
.tr-acct.total { background: rgba(230, 174, 76, .14); border-color: rgba(230, 174, 76, .4); }
.tr-acct.total strong { color: var(--honey-hi); }

/* barres */
.tr-bar { grid-column: 1 / -1; height: 12px; border-radius: 99px; background: #1f150e; box-shadow: inset 0 2px 4px rgba(0, 0, 0, .6), 0 1px 0 rgba(255, 230, 180, .1); overflow: hidden; }
.tr-bar-fill { display: block; height: 100%; width: var(--w); border-radius: 99px; background: linear-gradient(180deg, color-mix(in srgb, var(--c) 75%, #fff), var(--c)); box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .22); transition: width .5s cubic-bezier(.3, 1, .4, 1); }
.tr-rows { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.tr-row { display: grid; grid-template-columns: 1fr auto; gap: 5px 12px; align-items: baseline; }
.tr-row-n { font-weight: 800; min-width: 0; overflow-wrap: anywhere; display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tr-row-v { font: 700 1rem var(--font-title); font-variant-numeric: tabular-nums; white-space: nowrap; }
.tr-dot { width: 11px; height: 11px; border-radius: 3px; background: var(--c); border: 1.5px solid var(--edge); transform: rotate(45deg); flex: none; }
.tr-over { font-style: normal; font-size: .75rem; font-weight: 800; padding: 1px 8px; border-radius: 99px; background: var(--brick-d); color: #ffd9d0; }
.tr-rows.plain { gap: 0; }
.tr-fixed { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1.5px solid rgba(0, 0, 0, .28); }
.tr-fixed:last-child { border-bottom: 0; }
.tr-fixed-main { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-width: 0; }
.tr-per { font: 700 .72rem var(--font-body); text-transform: uppercase; letter-spacing: .05em; padding: 2px 8px; border-radius: 99px; background: rgba(0, 0, 0, .3); color: var(--muted); }
.tr-due { font-size: .8rem; font-weight: 800; color: #2b1a08; background: linear-gradient(180deg, var(--honey-hi), var(--honey)); padding: 2px 9px; border-radius: 99px; }
.tr-total { margin: 12px 0 0; color: var(--muted); font-weight: 700; }
.tr-total strong { color: var(--parch); font-family: var(--font-title); }

/* puces */
.tr-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.tr-chip { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 99px; background: rgba(0, 0, 0, .28); border: 1.5px solid rgba(0, 0, 0, .35); font-weight: 700; font-size: .9rem; color: var(--parch-2); }
.tr-chip b { color: var(--honey-hi); font-family: var(--font-title); font-variant-numeric: tabular-nums; }
.tr-chip.bad b { color: var(--brick); }
.tr-chips.sugg { margin: 12px 0 4px; }
.tr-chips.sugg .chip { min-height: 40px; font-size: .88rem; padding: 0 12px; text-align: left; }
.tr-chips.sugg .chip[disabled] { opacity: .5; cursor: not-allowed; }

/* graphique */
.tr-evo { margin: 0 -2px; }
.tr-chart { display: block; height: auto; overflow: visible; }
.tr-legend { display: flex; gap: 18px; margin: 4px 0 0; color: var(--muted); font-size: .85rem; font-weight: 700; }
.tr-legend span { display: inline-flex; align-items: center; gap: 7px; }
.tr-key { width: 14px; height: 10px; border-radius: 3px; background: var(--c); }
.tr-key.line { height: 4px; border-radius: 99px; }

/* tirelires */
.tr-piggies { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.tr-piggy { display: flex; align-items: center; gap: 14px; }
.tr-ring { flex: none; width: 64px; height: 64px; }
.tr-ring svg { display: block; }
.tr-piggy strong { font: 600 1.05rem var(--font-title); overflow-wrap: anywhere; }
.tr-piggy p { margin: 0; }
.tr-piggy-v { color: var(--parch-2); font-weight: 700; font-variant-numeric: tabular-nums; }
.tr-piggy-d { color: var(--muted); font-size: .85rem; }

/* plan de Grimoire */
.tr-plan-date { color: var(--muted); font-size: .9rem; font-weight: 700; margin: -4px 0 10px; }
.tr-plan-text { white-space: pre-line; margin: 0 0 4px; line-height: 1.6; overflow-wrap: anywhere; }
.tr-goal { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; padding: 8px 0; border-bottom: 1.5px solid rgba(0, 0, 0, .28); }
.tr-goal:last-child { border-bottom: 0; }
.tr-goal-m { grid-column: 1 / -1; color: var(--muted); font-size: .85rem; font-weight: 700; }
.tr-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 16px; margin-top: 18px; }
.tr-actions .btn { margin-bottom: 7px; }
.tr-actions .hint { margin: 0; }

/* question au Trésorier */
.tr-ask .btn { flex: none; margin-bottom: 0; min-height: 50px; }
.tr-answer { padding: 14px 16px; margin-top: 12px; }
.tr-q { margin: 0 0 6px; color: var(--muted); font-weight: 700; font-size: .92rem; }
.tr-a { margin: 0 0 6px; font-size: 1.05rem; line-height: 1.55; white-space: pre-line; overflow-wrap: anywhere; }
.tr-thinking { display: flex; align-items: center; gap: 12px; margin-top: 12px; font: 600 1.02rem var(--font-title); color: var(--parch-2); }
.tr-thinking p { margin: 0; }
.tr-thinking .spin-dwarf { width: 54px; }

/* import */
.tr-import > summary { cursor: pointer; list-style: none; margin: 0; }
.tr-import > summary::-webkit-details-marker { display: none; }
.tr-import[open] > summary { margin-bottom: 8px; }
.tr-two { display: grid; grid-template-columns: 1fr; gap: 0 16px; }
@media (min-width: 560px) { .tr-two { grid-template-columns: 1fr 1fr; } }
.tr-import-out { margin-top: 14px; }
.tr-imp-files { list-style: none; margin: 0 0 10px; padding: 0; display: flex; flex-direction: column; gap: 4px; font-weight: 700; font-size: .92rem; overflow-wrap: anywhere; }
.tr-imp-files .tr-per { margin-right: 8px; }
.tr-ok { display: flex; align-items: center; gap: 8px; color: var(--moss); font-weight: 800; margin: 6px 0; }
.tr-prog { display: flex; flex-direction: column; gap: 8px; }
.tr-prog .hint { margin: 0; }
.tr-report { display: flex; flex-direction: column; gap: 10px; }
input[type="file"].input { padding: 10px 12px; min-height: 52px; }

/* pack d'équipe (catalogue) */
.cat-section { margin-top: 48px; }
.pack-card { display: flex; flex-direction: column; gap: 6px; padding: 18px 20px 20px; margin: 46px 0 40px; }
.pack-card.done { border-color: #2c3d1c; }
.pack-crew { display: flex; justify-content: center; margin: -62px 0 0; height: 110px; padding-left: 28px; pointer-events: none; }
.pack-crew.small { height: 90px; margin-top: -4px; }
.pack-dwarf { width: 92px; margin-left: -26px; flex: none; filter: drop-shadow(0 6px 4px rgba(0, 0, 0, .45)); position: relative; z-index: calc(10 - var(--i)); }
.pack-crew.small .pack-dwarf { width: 76px; margin-left: -22px; }
.pack-dwarf .dwarf { width: 100%; height: auto; overflow: visible; }
.pack-body { display: flex; flex-direction: column; gap: 10px; }
.pack-name { font-size: 1.45rem; margin: 2px 0 0; }
.pack-members { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 8px; }
.pack-members li { display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; border-radius: 99px; background: rgba(0, 0, 0, .28); border: 1.5px solid rgba(0, 0, 0, .35); font-weight: 700; font-size: .85rem; color: var(--muted); }
.pack-members li.in { color: var(--moss); border-color: rgba(152, 191, 104, .4); background: rgba(152, 191, 104, .1); }
.pack-result { list-style: none; margin: 8px 0 14px; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.pack-result li { padding: 8px 12px; border-radius: 12px; background: rgba(0, 0, 0, .22); }
.pack-result li.bad { background: rgba(224, 112, 90, .14); color: #ffc0b3; }
.pack-result em { color: var(--muted); font-style: normal; }
.cat-backstage { margin-top: 36px; }
.cat-backstage > summary { cursor: pointer; font: 600 1.05rem var(--font-title); color: var(--parch-2); padding: 10px 0; list-style: none; display: flex; align-items: center; gap: 12px; }
.cat-backstage > summary::-webkit-details-marker { display: none; }
.cat-backstage > summary::before { content: "▸"; color: var(--honey); transition: transform .15s; }
.cat-backstage[open] > summary::before { transform: rotate(90deg); }
.cat-more { font: 700 .8rem var(--font-body); color: var(--muted); }
.cat-backstage .cat-grid { margin-top: 40px; }
@media (max-width: 720px) {
  .tabbar { grid-template-columns: repeat(7, 1fr); gap: 1px; }
  .tablink { font-size: .64rem; padding: 4px 0; border-width: 1.5px; }
  .tr-card { padding: 18px 14px 16px; }
  .pack-card { padding: 16px 14px 18px; }
  .pack-dwarf { width: 78px; margin-left: -22px; }
  .tr-actions .btn, .tr-head-actions .btn { flex: 1 1 auto; }
  .tr-ask .input-row { flex-direction: column; align-items: stretch; }
  .tr-ask .btn { width: 100%; }
}
input[type="file"].input::file-selector-button { font: 600 .92rem var(--font-title); color: #2b1a08; background: linear-gradient(180deg, var(--honey-hi), var(--honey)); border: 2px solid var(--edge); border-radius: 10px; padding: 6px 14px; margin-right: 12px; cursor: pointer; }

/* ---- Budget détaillé : rôles des entrées, catégories dépliables, tableau mois par mois */
.tr-roles > summary, .tr-how > summary, .tr-maint > summary { cursor: pointer; list-style: none; margin: 0; }
.tr-roles > summary::-webkit-details-marker, .tr-how > summary::-webkit-details-marker, .tr-maint > summary::-webkit-details-marker { display: none; }
.tr-roles > summary::after, .tr-how > summary::after, .tr-maint > summary::after { content: "▾"; margin-left: auto; color: var(--honey); transition: transform .15s; }
.tr-roles:not([open]) > summary::after, .tr-how:not([open]) > summary::after, .tr-maint:not([open]) > summary::after { transform: rotate(-90deg); }
.tr-roles[open] > summary, .tr-how[open] > summary, .tr-maint[open] > summary { margin-bottom: 8px; }
.tr-first { margin-top: -6px; margin-bottom: 12px; }
.tr-typ { display: grid; grid-template-columns: 1fr; gap: 10px; margin: 2px 0 14px; padding: 12px 14px; border-radius: 14px; background: rgba(0, 0, 0, .26); border: 1.5px solid rgba(0, 0, 0, .35); }
@media (min-width: 640px) { .tr-typ { grid-template-columns: repeat(3, 1fr); } }
.tr-typ > div { min-width: 0; }
.tr-typ dt { font: 600 .82rem var(--font-title); letter-spacing: .05em; text-transform: uppercase; color: var(--muted); margin: 0; }
.tr-typ dd { margin: 0; font: 700 1.3rem var(--font-title); color: var(--parch); font-variant-numeric: tabular-nums; }
.tr-typ dd.tr-typ-f { font: 700 .8rem var(--font-body); color: var(--muted); overflow-wrap: anywhere; }
.tr-row-s { grid-column: 1 / -1; font-size: .83rem; font-weight: 700; color: var(--muted); margin-top: -2px; }
.tr-row-s.wide { margin-top: 0; font-weight: 600; color: var(--muted-2); }
.tr-inrow { row-gap: 3px; }
.tr-subnote { margin: 14px 0 0; padding-top: 12px; border-top: 1.5px dashed rgba(230, 174, 76, .22); color: var(--parch-2); font-size: .92rem; }
.tr-badge { display: inline-block; font: 700 .72rem var(--font-body); text-transform: uppercase; letter-spacing: .05em; padding: 2px 9px; border-radius: 99px; background: rgba(0, 0, 0, .3); color: var(--muted); white-space: nowrap; }
.tr-badge.ok { background: rgba(152, 191, 104, .18); color: var(--moss); }
.tr-badge.warn { background: linear-gradient(180deg, var(--honey-hi), var(--honey)); color: #2b1a08; }
.tr-badge.info { background: rgba(134, 176, 208, .18); color: #c6dcec; }
.tr-badge.bad { background: var(--brick-d); color: #ffd9d0; }
.tr-srcs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.tr-src { display: flex; flex-direction: column; gap: 6px; padding: 12px 0; border-bottom: 1.5px solid rgba(0, 0, 0, .28); }
.tr-src:first-child { padding-top: 0; }
.tr-src-main { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; min-width: 0; }
.tr-src-n { font: 600 1.05rem var(--font-title); overflow-wrap: anywhere; min-width: 0; }
.tr-src-meta { margin: 0; font-size: .85rem; font-weight: 700; color: var(--muted); overflow-wrap: anywhere; }
.tr-sugg { margin: 0; font-size: .9rem; font-weight: 700; color: #f3d79e; }
.tr-sugg .linkbtn { min-height: 36px; padding: 4px 4px; color: var(--honey-hi); }
.tr-sel { width: 100%; min-height: 48px; }
.tr-more { padding: 6px 0 0; }
.tr-roles-out { margin-top: 12px; display: flex; flex-direction: column; gap: 8px; }
.tr-roles-out .note { margin: 0; }
.tr-prev { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: .88rem; }
.tr-prev li { display: grid; grid-template-columns: 1fr auto; gap: 0 10px; padding: 6px 0; border-bottom: 1px solid rgba(0, 0, 0, .25); }
.tr-prev span { min-width: 0; overflow-wrap: anywhere; font-weight: 700; }
.tr-prev b { font-variant-numeric: tabular-nums; }
.tr-prev em { grid-column: 1 / -1; font-style: normal; color: var(--muted); }
.tr-cats { gap: 6px; }
.tr-cat > summary { list-style: none; cursor: pointer; }
.tr-cat > summary::-webkit-details-marker { display: none; }
.tr-cat-sum { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; align-items: baseline; padding: 8px 0; min-height: 48px; }
.tr-cat-sum .tr-row-n::after { content: "▸"; color: var(--honey); font-size: .8rem; transition: transform .15s; }
.tr-cat[open] .tr-cat-sum .tr-row-n::after { transform: rotate(90deg); }
.tr-top { margin: 2px 0 10px 18px; }
.tr-top h4 { font: 600 .85rem var(--font-title); text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin: 8px 0 4px; }
.tr-top ul { list-style: none; margin: 0; padding: 0; }
.tr-top li { display: grid; grid-template-columns: 1fr auto auto; gap: 0 10px; padding: 4px 0; font-size: .92rem; font-weight: 700; border-bottom: 1px dotted rgba(0, 0, 0, .3); }
.tr-top li span { min-width: 0; overflow-wrap: anywhere; }
.tr-top li b { font-variant-numeric: tabular-nums; }
.tr-top li em { font-style: normal; color: var(--muted); min-width: 2.2em; text-align: right; }
.tr-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 -4px; padding: 0 4px 6px; border-radius: 12px; }
.tr-table { width: 100%; min-width: 560px; border-collapse: separate; border-spacing: 0; font-size: .9rem; font-variant-numeric: tabular-nums; }
.tr-table th, .tr-table td { padding: 9px 10px; text-align: right; white-space: nowrap; border-bottom: 1.5px solid rgba(0, 0, 0, .28); }
.tr-table thead th { font: 600 .8rem var(--font-title); letter-spacing: .04em; color: var(--muted); text-transform: uppercase; }
.tr-table th:first-child { text-align: left; position: sticky; left: 0; background: #3a2a1c; z-index: 1; font-weight: 800; }
.tr-table tbody th small { color: var(--honey-hi); font-weight: 700; }
.tr-table tr.cur th, .tr-table tr.cur td { background: rgba(230, 174, 76, .12); }
.tr-table tr.cur th:first-child { background: #4a3721; }
.tr-table tfoot th, .tr-table tfoot td { border-top: 2px solid rgba(230, 174, 76, .35); border-bottom: 0; font-weight: 800; color: var(--parch); }
.tr-table .pos { color: var(--moss); font-weight: 800; }
.tr-table .neg { color: var(--brick); font-weight: 800; }
.tr-row-v.out { color: #f0a998; }
.tr-next, .tr-cover { flex-basis: 100%; font-size: .8rem; font-weight: 700; color: var(--muted); }
.tr-cover { color: #c6dcec; }
.tr-howlist { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 8px; color: var(--parch-2); line-height: 1.5; }
.tr-howlist b { color: var(--parch); }
.tr-maint .note { margin: 0 0 10px; }
@media (max-width: 720px) {
  .tr-top { margin-left: 8px; }
  .tr-table th, .tr-table td { padding: 8px 8px; }
}

/* ---------------------------------------------------------------- l'Archiviste : « Scanner un ticket » */
.rc-fab {
  position: fixed; z-index: 29; right: max(16px, env(safe-area-inset-right)); bottom: calc(18px + env(safe-area-inset-bottom));
  display: inline-flex; align-items: center; gap: 10px; min-height: 56px; padding: 0 20px 0 16px;
  font: 600 1.05rem/1 var(--font-title); color: #2b1a08; cursor: pointer; touch-action: manipulation;
  background: linear-gradient(180deg, #f4c673, #d89a3a); border: 2px solid var(--edge); border-radius: 99px;
  box-shadow: 0 5px 0 #8a5a1e, 0 5px 0 2px var(--edge), 0 14px 20px -6px rgba(0, 0, 0, .7), inset 0 2px 0 rgba(255, 255, 255, .4);
  transition: transform .08s, box-shadow .08s, filter .15s;
}
.rc-fab:hover { filter: brightness(1.07); }
.rc-fab:active { transform: translateY(4px); box-shadow: 0 1px 0 #8a5a1e, 0 1px 0 2px var(--edge), inset 0 2px 0 rgba(255, 255, 255, .3); }
body.sheet-open .rc-fab { display: none; }
.view-team, .view-treasury { padding-bottom: 120px; }
@media (max-width: 720px) {
  .rc-fab { bottom: calc(88px + env(safe-area-inset-bottom)); }
  .view-team, .view-treasury { padding-bottom: calc(170px + env(safe-area-inset-bottom)); }
}

.modal-back:has(.rc-modal) { padding: 12px; padding-top: 84px; }
.rc-modal { padding: 20px 18px 18px; }
.rc-h { font-size: 1.25rem; text-align: center; margin: 0 0 10px; outline: none; }
.rc-hint { text-align: center; margin: 0 0 14px; }
.rc-choose { display: flex; flex-direction: column; gap: 4px; }
.rc-choose .btn-big { width: 100%; }
.rc-choose .modal-text { margin-bottom: 14px; }
.rc-wait { justify-content: center; margin: 14px 0; }
.rc-file { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 14px; margin: 6px 0 4px; border-radius: 14px; background: rgba(0, 0, 0, .28); font-weight: 700; overflow-wrap: anywhere; }

.rc-editor { display: flex; flex-direction: column; gap: 12px; }
.rc-crop { position: relative; align-self: center; max-width: 100%; border-radius: 12px; overflow: hidden; background: #fff; box-shadow: 0 0 0 3px var(--edge), 0 8px 18px -6px rgba(0, 0, 0, .7); line-height: 0; --t: 0%; --b: 0%; --l: 0%; --r: 0%; }
.rc-canvas { display: block; max-width: 100%; max-height: 52vh; width: auto; height: auto; }
.rc-dim { position: absolute; background: rgba(20, 12, 6, .62); pointer-events: none; }
.rc-dim.t { top: 0; left: 0; right: 0; height: var(--t); }
.rc-dim.b { bottom: 0; left: 0; right: 0; height: var(--b); }
.rc-dim.l { top: var(--t); bottom: var(--b); left: 0; width: var(--l); }
.rc-dim.r { top: var(--t); bottom: var(--b); right: 0; width: var(--r); }
.rc-frame { position: absolute; top: var(--t); bottom: var(--b); left: var(--l); right: var(--r); border: 2px dashed var(--honey-hi); pointer-events: none; }
.rc-tools { display: flex; flex-direction: column; gap: 8px; }
.rc-rot { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.rc-rot .btn { margin-bottom: 4px; }
.rc-det > summary { cursor: pointer; font: 600 .98rem var(--font-title); color: var(--honey-hi); padding: 10px 2px; min-height: 44px; display: flex; align-items: center; }
.rc-det > summary::before { content: "▸"; color: var(--honey); margin-right: 8px; transition: transform .15s; }
.rc-det[open] > summary::before { transform: rotate(90deg); }
.rc-det[open] > summary { margin-bottom: 4px; }
.rc-sliders { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 16px; margin-bottom: 4px; }
.rc-slider { display: flex; flex-direction: column; gap: 2px; font: 600 .85rem var(--font-title); color: var(--muted); }
.rc-range { width: 100%; min-height: 36px; accent-color: var(--honey); }

.rc-form { display: flex; flex-direction: column; gap: 4px; }
.rc-grid { display: grid; grid-template-columns: 1fr; gap: 0 14px; }
@media (min-width: 560px) { .rc-grid { grid-template-columns: 1fr 1fr; } }
.rc-form .field { margin-bottom: 14px; }
.rc-unc .input { border-color: var(--honey); box-shadow: inset 0 3px 7px rgba(0, 0, 0, .55), 0 0 0 3px rgba(230, 174, 76, .3); }
.rc-art { margin: 2px 0 6px; }
.rc-art .label { margin-bottom: 4px; }
.rc-items { list-style: none; margin: 0; padding: 0; max-height: 220px; overflow-y: auto; border-radius: 12px; background: rgba(0, 0, 0, .22); }
.rc-items li { display: flex; align-items: center; gap: 10px; padding: 4px 6px 4px 12px; border-bottom: 1.5px solid rgba(0, 0, 0, .28); min-height: 48px; }
.rc-items li:last-child { border-bottom: 0; }
.rc-it-n { flex: 1; min-width: 0; overflow-wrap: anywhere; font-weight: 700; }
.rc-it-n em { font-style: normal; color: var(--muted); font-weight: 600; }
.rc-it-p { font: 600 .95rem var(--font-title); font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--honey-hi); }
.rc-rm { width: 44px; height: 44px; flex: none; border-radius: 12px; }
.rc-actions { margin-top: 8px; }
.rc-done .rc-card { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; margin: 0 0 12px; border-radius: 14px; background: rgba(0, 0, 0, .28); overflow-wrap: anywhere; }
.rc-card .hint { margin: 0; }
.rc-ok, .rc-no { display: flex; gap: 12px; align-items: flex-start; padding: 13px 15px; border-radius: 14px; font-weight: 600; line-height: 1.45; }
.rc-ok { background: rgba(152, 191, 104, .13); border: 2px solid rgba(152, 191, 104, .45); color: #d4ebb4; }
.rc-no { background: rgba(230, 174, 76, .13); border: 2px solid rgba(230, 174, 76, .4); color: #f3d79e; }
.cred-note { display: block; margin: 4px 0 0 4px; font-size: .82rem; font-weight: 600; color: var(--muted); }
@media (max-width: 420px) {
  .rc-modal { padding: 18px 14px 16px; }
  .rc-fab { padding: 0 16px 0 13px; font-size: 1rem; }
}
@media (prefers-reduced-motion: reduce) { .rc-fab { transition: none; } }


/* ==========================================================================
   Courses : Mamie Lou, la cuisinière (menu, liste, panier Carrefour)
   ========================================================================== */
.view-courses { max-width: 760px; }
.cs { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.cs > * { min-width: 0; }
.cs-hero { display: flex; align-items: flex-end; gap: 14px; margin-bottom: 2px; }
.cs-hero-d { width: 92px; flex: none; margin-bottom: -6px; filter: drop-shadow(0 6px 4px rgba(0, 0, 0, .45)); }
.cs-hero-d .dwarf { display: block; width: 100%; height: auto; }
.cs-hero-t { flex: 1; min-width: 0; }
.cs-hero-t .page-title { text-align: left; }
.cs-bubble {
  position: relative; margin: 8px 0 0; padding: 11px 14px; font-weight: 700; line-height: 1.4; font-size: .98rem;
  color: var(--ink); background: linear-gradient(180deg, #f6ebd0, #e7d5ae); border: 2px solid var(--edge); border-radius: 16px 16px 16px 4px;
  box-shadow: 0 4px 0 #0f0905, inset 0 2px 0 rgba(255, 255, 255, .5);
}
.cs-bubble::before { content: ""; position: absolute; left: -9px; bottom: 10px; border: 7px solid transparent; border-right-color: var(--edge); border-left: 0; }
.cs-bubble::after { content: ""; position: absolute; left: -5px; bottom: 11px; border: 6px solid transparent; border-right-color: #ecdcb6; border-left: 0; }

.cs-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.cs-step {
  display: flex; align-items: center; justify-content: center; gap: 7px; min-height: 48px; padding: 0 8px; min-width: 0;
  font: 600 .98rem var(--font-title); color: var(--parch-2); cursor: pointer;
  background: linear-gradient(180deg, #4a3724, #3b2a1c); border: 2px solid var(--edge); border-radius: 13px;
  box-shadow: 0 3px 0 #130c07, inset 0 2px 0 rgba(255, 230, 180, .12);
}
.cs-step:hover { color: #fff; }
.cs-step.on { color: #2b1a08; background: linear-gradient(180deg, var(--honey-hi), var(--honey)); box-shadow: 0 3px 0 #8a5a1e, inset 0 2px 0 rgba(255, 255, 255, .35); }
.cs-step-n { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; font: 700 .78rem var(--font-body); background: rgba(0, 0, 0, .3); color: var(--parch); flex: none; }
.cs-step.on .cs-step-n { background: rgba(0, 0, 0, .2); color: #2b1a08; }

.cs-card { padding: 20px 16px 16px; min-width: 0; }
.cs-card > :last-child { margin-bottom: 0; }
.cs-lead { color: var(--parch-2); margin: 0 0 14px; }
.cs-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-top: 12px; }
.cs-row .btn { margin-bottom: 5px; }
.cs-next { display: flex; justify-content: center; margin-top: 4px; }
.cs-undo { display: flex; justify-content: flex-start; margin-top: -6px; }
.cs-undo .btn { margin-bottom: 0; }
.cs-weeksum { margin: 0; color: var(--parch-2); line-height: 1.5; }
.cs-weeksum b { color: var(--honey-hi); font-family: var(--font-title); }
.cs-over { color: var(--brick); font-weight: 800; }

/* attente de l'IA */
.cs-think { display: flex; align-items: center; gap: 14px; padding: 6px 2px; color: var(--parch-2); font-weight: 700; }
.cs-think p { margin: 0; }
.cs-pot { display: inline-grid; place-items: center; flex: none; color: var(--honey-hi); animation: cs-wobble 1.4s ease-in-out infinite; transform-origin: 50% 80%; }
@keyframes cs-wobble { 0%, 100% { transform: rotate(-6deg); } 50% { transform: rotate(6deg) translateY(-2px); } }

/* cases à cocher maison */
.cs-check, .cs-line { display: flex; align-items: center; gap: 12px; cursor: pointer; position: relative; }
.cs-check input, .cs-line input { position: absolute; opacity: 0; width: 100%; height: 100%; left: 0; top: 0; margin: 0; cursor: pointer; }
.cs-box { width: 28px; height: 28px; flex: none; border-radius: 9px; background: #1f150e; border: 2px solid #5c4430; box-shadow: inset 0 3px 6px rgba(0, 0, 0, .55); display: grid; place-items: center; transition: background .15s; }
.cs-box::after { content: ""; width: 12px; height: 7px; border-left: 3.5px solid #2b1a08; border-bottom: 3.5px solid #2b1a08; transform: rotate(-45deg) scale(0); margin-top: -3px; transition: transform .15s cubic-bezier(.3, 1.6, .5, 1); }
input:checked + .cs-box { background: linear-gradient(180deg, var(--honey-hi), var(--honey)); border-color: var(--edge); }
input:checked + .cs-box::after { transform: rotate(-45deg) scale(1); }
input:focus-visible + .cs-box { outline: 3px solid rgba(230, 174, 76, .5); outline-offset: 2px; }
.cs-check { margin: 4px 0 14px; min-height: 44px; font-weight: 700; }

/* menu */
.cs-meals { display: flex; flex-direction: column; gap: 22px; }
.cs-meal { padding: 16px 16px 14px; min-width: 0; }
.cs-meal.kept { box-shadow: inset 0 2px 0 rgba(255, 220, 160, .14), inset 0 -3px 0 rgba(0, 0, 0, .22), 0 6px 0 #0f0905, 0 0 0 2px rgba(230, 174, 76, .55), 0 16px 24px -10px rgba(0, 0, 0, .65); }
.cs-meal-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; position: relative; z-index: 1; }
.cs-day { font: 700 1.1rem var(--font-title); color: var(--honey-hi); letter-spacing: .02em; }
.cs-kind { font: 700 .74rem var(--font-body); text-transform: uppercase; letter-spacing: .06em; padding: 3px 9px; border-radius: 99px; background: rgba(0, 0, 0, .32); color: var(--parch-2); }
.cs-kind.lunch { color: var(--slate); }
.cs-kept { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; font: 700 .8rem var(--font-body); color: var(--honey-hi); }
.cs-dish { position: relative; z-index: 1; margin: 6px 0 10px; font-size: 1.32rem; line-height: 1.2; overflow-wrap: anywhere; }
.cs-meta { position: relative; z-index: 1; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.cs-chip { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; min-height: 30px; font: 700 .86rem var(--font-body); color: var(--parch-2); background: rgba(0, 0, 0, .3); border-radius: 99px; }
.cs-portions, .cs-qty { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; }
.cs-portions-n, .cs-qty-n { min-width: 56px; text-align: center; font: 700 .92rem var(--font-body); font-variant-numeric: tabular-nums; }
.cs-qty-n { min-width: 28px; }
.cs-mini { position: relative; display: inline-grid; place-items: center; width: 36px; height: 36px; flex: none; padding: 0; color: var(--parch); cursor: pointer; background: var(--wood-lo); border: 2px solid var(--edge); border-radius: 11px; box-shadow: inset 0 2px 0 rgba(255, 230, 180, .1); }
.cs-mini::before { content: ""; position: absolute; inset: -5px; }
.cs-mini:hover:not([disabled]) { background: var(--wood); }
.cs-mini[disabled] { opacity: .4; cursor: not-allowed; }
.cs-ings { position: relative; z-index: 1; margin: 12px 0 4px; }
.cs-ings summary { cursor: pointer; font: 600 .95rem var(--font-title); color: var(--parch-2); padding: 8px 0; min-height: 40px; display: flex; align-items: center; list-style: none; }
.cs-ings summary::-webkit-details-marker { display: none; }
.cs-ings summary::before { content: "▸"; color: var(--honey); margin-right: 8px; transition: transform .15s; }
.cs-ings[open] summary::before { transform: rotate(90deg); }
.cs-ings ul { list-style: none; margin: 0 0 6px; padding: 0; }
.cs-ings li { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0; border-bottom: 1.5px dashed rgba(230, 174, 76, .16); font-size: .95rem; }
.cs-ings li em { font-style: normal; font-weight: 700; color: var(--parch-2); white-space: nowrap; font-variant-numeric: tabular-nums; }
.cs-actions { position: relative; z-index: 1; display: flex; gap: 8px; margin-top: 10px; }
.cs-actions .btn { flex: 1 1 0; min-width: 0; padding: 0 6px; gap: 6px; font-size: .88rem; margin-bottom: 5px; }
.cs-meal.thinking > :not(.cs-meal-wait) { opacity: .35; }
.cs-meal-wait { position: absolute; inset: 0; z-index: 3; display: flex; align-items: center; justify-content: center; gap: 12px; font-weight: 800; color: var(--parch); text-shadow: 0 2px 0 #0f0905; }
.cs-draft-sub { margin: 0 0 8px; color: var(--parch-2); }
.cs-draft-list, .cs-tips ul { margin: 0 0 6px; padding: 0 0 0 4px; list-style: none; display: flex; flex-direction: column; gap: 4px; }
.cs-draft-list li b { color: var(--honey-hi); font-family: var(--font-title); }
.cs-tips li { padding-left: 18px; position: relative; }
.cs-tips li::before { content: "✦"; position: absolute; left: 0; color: var(--honey); }
.cs-feed { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.cs-feed li { max-width: 88%; padding: 9px 13px; border-radius: 15px; line-height: 1.4; font-weight: 600; overflow-wrap: anywhere; }
.cs-feed li.user { align-self: flex-end; background: linear-gradient(180deg, var(--honey-hi), var(--honey)); color: #2b1a08; border-bottom-right-radius: 4px; }
.cs-feed li.assistant { align-self: flex-start; background: linear-gradient(180deg, #f6ebd0, #e7d5ae); color: var(--ink); border-bottom-left-radius: 4px; }
.cs-sugg { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.cs-sugg .chip { min-height: 40px; font-size: .88rem; padding: 0 12px; }
.cs-sugg .chip[disabled] { opacity: .5; }
.cs-card .input-row .btn { margin-bottom: 0; }

/* liste */
.cs-howto { margin: 0; text-align: center; color: var(--parch-2); font-weight: 700; }
.cs-budget-n { margin: 0 0 10px; font-size: 1.05rem; }
.cs-budget-n b { font: 700 1.9rem var(--font-title); color: var(--honey-hi); font-variant-numeric: tabular-nums; }
.cs-lines { list-style: none; margin: 0; padding: 0; }
.cs-lines li { border-bottom: 1.5px dashed rgba(230, 174, 76, .18); }
.cs-lines li:last-child { border-bottom: 0; }
.cs-line { padding: 9px 0; min-height: 56px; }
.cs-line-t { display: flex; flex-direction: column; min-width: 0; gap: 1px; }
.cs-line-t b { font-weight: 800; overflow-wrap: anywhere; }
.cs-line-t small { color: var(--parch-2); font-size: .9rem; font-weight: 700; }
.cs-line-t em { color: var(--muted-2, #9a8868); font-style: normal; font-size: .82rem; line-height: 1.3; }
.cs-line.have .cs-line-t { opacity: .5; }
.cs-line.have .cs-line-t b { text-decoration: line-through; }
.cs-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 4px; }
.cs-chips .chip { min-height: 42px; }
.cs-drinks-l, .cs-extras-l { list-style: none; margin: 0; padding: 0; }
.cs-drinks-l li { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1.5px dashed rgba(230, 174, 76, .18); flex-wrap: wrap; }
.cs-drink-n { display: flex; flex-direction: column; flex: 1 1 100px; min-width: 0; }
.cs-drink-n small { color: var(--muted); font-weight: 700; }
.cs-drinks-l .cs-qty { margin-left: 0; }
.cs-extras-l li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 0; font-weight: 700; }
.cs-extras-l { margin-bottom: 12px; }
.cs-edit { display: flex; flex-direction: column; gap: 12px; margin-bottom: 4px; }
.cs-edit-row { padding: 12px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.cs-edit-row .cs-f:first-child, .cs-edit-row .btn { grid-column: 1 / -1; }
.cs-edit-row .btn { margin-bottom: 0; }
.cs-f { display: flex; flex-direction: column; gap: 5px; min-width: 0; font: 600 .86rem var(--font-title); color: var(--parch-2); }
.cs-f .input { min-height: 44px; padding: 8px 12px; }

/* panier */
.cs-reminder b { color: #dcecf7; }
.cs-steps-l { margin: 0 0 14px; padding-left: 22px; color: var(--parch-2); display: flex; flex-direction: column; gap: 4px; }
.cs-link { margin: 0 0 6px; }
.cs-robotline { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 8px; }
.cs-store { margin: 4px 0 12px; padding: 12px 14px; background: rgba(0, 0, 0, .22); border-radius: 14px; }
.cs-store p { margin: 0 0 6px; overflow-wrap: anywhere; }
.cs-store .btn { margin-bottom: 0; }
.cs-shot { margin: 12px 0; }
.cs-shot img { display: block; width: 100%; height: auto; border-radius: 12px; border: 2px solid var(--edge); background: #000; }
.cs-shot figcaption { margin-top: 6px; color: var(--muted); font-size: .88rem; text-align: center; }
.cs-run { position: relative; height: 112px; margin: 2px 0 14px; overflow: hidden; border-radius: 14px; background: linear-gradient(180deg, rgba(0, 0, 0, .25), rgba(0, 0, 0, .1)); box-shadow: inset 0 3px 8px rgba(0, 0, 0, .4); }
.cs-run-floor { position: absolute; left: 0; right: 0; bottom: 0; height: 14px; background: repeating-linear-gradient(90deg, #4a3724 0 28px, #3b2a1b 28px 56px); border-top: 2px solid var(--edge); }
.cs-run-walk { position: absolute; bottom: 12px; left: 0; width: 176px; animation: cs-walk 9s linear infinite; }
.cs-run-face { display: flex; align-items: flex-end; animation: cs-face 9s steps(1) infinite; transform-origin: 50% 50%; }
.cs-run-dwarf { width: 84px; flex: none; animation: cs-bob .5s ease-in-out infinite; }
.cs-run-dwarf .dwarf { display: block; width: 100%; height: auto; }
.cs-run-cart { width: 88px; flex: none; margin-left: -8px; margin-bottom: 4px; animation: cs-bob .5s ease-in-out infinite .1s; }
.cs-run-cart svg { display: block; width: 100%; height: auto; overflow: visible; }
.cs-wh { transform-box: fill-box; transform-origin: center; animation: cs-spin .7s linear infinite; }
.cs-it { transform-box: fill-box; transform-origin: center; animation: cs-pop 1.8s ease-in-out infinite; }
.cs-it.b { animation-delay: .6s; }
.cs-it.c { animation-delay: 1.2s; }
@keyframes cs-walk { 0% { left: 0; } 50% { left: calc(100% - 176px); } 100% { left: 0; } }
@keyframes cs-face { 0%, 49.99% { transform: scaleX(1); } 50%, 99.99% { transform: scaleX(-1); } }
@keyframes cs-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
@keyframes cs-spin { to { transform: rotate(360deg); } }
@keyframes cs-pop { 0%, 100% { transform: translateY(0) scale(1); } 40% { transform: translateY(-5px) scale(1.12); } }
.cs-run-t { margin: 10px 0 4px; font-weight: 700; color: var(--parch-2); min-height: 3em; }
.cs-sum { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.cs-total { margin: 0 0 8px; color: var(--parch-2); }
.cs-total b { font: 700 1.3rem var(--font-title); color: var(--honey-hi); font-variant-numeric: tabular-nums; }
.cs-total small { color: var(--muted); }
.cs-rep { list-style: none; margin: 14px 0 4px; padding: 0; }
.cs-rep li { display: grid; grid-template-columns: 26px 1fr auto; gap: 10px; align-items: start; padding: 10px 0; border-bottom: 1.5px dashed rgba(230, 174, 76, .18); }
.cs-rep li:last-child { border-bottom: 0; }
.cs-rep-i { display: grid; place-items: center; margin-top: 1px; }
.cs-rep-i.ok { color: var(--moss); }
.cs-rep-i.run { color: var(--honey-hi); }
.cs-rep-i.err { color: var(--brick); }
.cs-rep-i.none { color: var(--muted); }
.cs-rep-t { display: flex; flex-direction: column; min-width: 0; gap: 1px; }
.cs-rep-t b { overflow-wrap: anywhere; }
.cs-rep-t small { color: var(--parch-2); font-size: .88rem; font-weight: 600; line-height: 1.35; overflow-wrap: anywhere; }
.cs-rep-t em { font-style: normal; font-size: .78rem; color: var(--moss); font-weight: 700; }
.cs-rep-p { font: 700 .98rem var(--font-title); font-variant-numeric: tabular-nums; white-space: nowrap; }
.cs-rep-not_found .cs-rep-t b, .cs-rep-unavailable .cs-rep-t b { color: #f0a090; }
@media (prefers-reduced-motion: reduce) {
  .cs-pot, .cs-run-walk, .cs-run-face, .cs-run-dwarf, .cs-run-cart, .cs-wh, .cs-it { animation: none; }
  .cs-run-walk { left: 20%; }
}
@media (max-width: 420px) {
  .cs-hero-d { width: 78px; }
  .cs-step { font-size: .9rem; gap: 5px; padding: 0 4px; }
  .cs-step-n { display: none; }
  .cs-card { padding: 18px 13px 14px; }
  .cs-actions .btn { font-size: .86rem; gap: 4px; }
  .cs-actions .btn .ico { display: none; }
}