/* Polices auto-hébergées (SIL OFL, voir fonts/OFL.txt) : aucune requête vers un tiers */
@font-face { font-family: 'Geist'; font-style: normal; font-weight: 400; font-display: swap; src: url('/static/fonts/Geist-Regular.woff2') format('woff2'); }
@font-face { font-family: 'Geist'; font-style: normal; font-weight: 500; font-display: swap; src: url('/static/fonts/Geist-Medium.woff2') format('woff2'); }
@font-face { font-family: 'Geist'; font-style: normal; font-weight: 600; font-display: swap; src: url('/static/fonts/Geist-SemiBold.woff2') format('woff2'); }
@font-face { font-family: 'Geist Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('/static/fonts/GeistMono-Regular.woff2') format('woff2'); }
@font-face { font-family: 'Geist Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url('/static/fonts/GeistMono-Medium.woff2') format('woff2'); }
@font-face { font-family: 'Unbounded'; font-style: normal; font-weight: 500; font-display: swap; src: url('/static/fonts/Unbounded-Medium.woff2') format('woff2'); }
@font-face { font-family: 'Unbounded'; font-style: normal; font-weight: 600; font-display: swap; src: url('/static/fonts/Unbounded-SemiBold.woff2') format('woff2'); }

:root {
  --bg: #DCE6F8;
  --ink-900: #1A2A4F; --ink-700: #34456B; --ink-500: #52618A; --ink-300: #8793B2;
  --action: #3969C3; --action-deep: #2C55A6; --action-soft: #D3DFF8;
  --glass-top: rgb(255 255 255 / .66); --glass-bottom: rgb(255 255 255 / .30); --glass-rim: rgb(255 255 255 / .85);
  --glass-line: rgb(57 105 195 / .14); --glass-shadow: 52 82 150; --well: rgb(57 105 195 / .07);
  --achat-bg: #CDEEDD; --achat-fg: #0F5A3F; --achat-dot: #3FAE82;
  --vente-bg: #F8D8D2; --vente-fg: #8A2A1E; --vente-dot: #E0584B;
  --neutre-bg: #E8ECF5; --neutre-fg: #55648A; --neutre-dot: #A3AECB;
  --font-display: 'Unbounded', 'Arial Black', sans-serif;
  --font-sans: 'Geist', ui-sans-serif, system-ui, sans-serif;
  --font-mono: 'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --r-panel: 28px; --r-sub: 22px; --r-ctrl: 14px; --r-pill: 999px;
  --spring: cubic-bezier(.34, 1.56, .64, 1); --out: cubic-bezier(.2, .8, .2, 1);
  --rail-w: 340px;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--bg); color: var(--ink-900); font: 14px/1.5 var(--font-sans);
  height: 100vh; height: 100dvh; padding: 12px; position: relative; overflow: hidden; -webkit-font-smoothing: antialiased;
}

/* Planche : lueurs pastel derrière le verre, puis grille de plan */
.planche {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    linear-gradient(rgb(57 105 195 / .075) 1px, transparent 1px) 0 0 / 120px 120px,
    linear-gradient(90deg, rgb(57 105 195 / .075) 1px, transparent 1px) 0 0 / 120px 120px,
    linear-gradient(rgb(57 105 195 / .035) 1px, transparent 1px) 0 0 / 24px 24px,
    linear-gradient(90deg, rgb(57 105 195 / .035) 1px, transparent 1px) 0 0 / 24px 24px,
    radial-gradient(52vmax 40vmax at 8% -6%, rgb(255 255 255 / .95), transparent 62%),
    radial-gradient(46vmax 38vmax at 92% 6%, rgb(212 196 245 / .60), transparent 64%),
    radial-gradient(48vmax 40vmax at 78% 104%, rgb(170 226 212 / .55), transparent 62%),
    radial-gradient(40vmax 34vmax at -4% 96%, rgb(250 214 192 / .45), transparent 64%);
}

/* Verre : dégradé, flou, liseré lumineux, reflet intérieur */
.verre, .verre-doux {
  position: relative; isolation: isolate;
  background: linear-gradient(160deg, var(--glass-top), var(--glass-bottom));
  -webkit-backdrop-filter: blur(22px) saturate(170%); backdrop-filter: blur(22px) saturate(170%);
  box-shadow: inset 0 1px 0 var(--glass-rim), 0 28px 56px -32px rgb(var(--glass-shadow) / .42);
}
.verre { border-radius: var(--r-panel); }
.verre-doux {
  border-radius: var(--r-sub);
  background: linear-gradient(180deg, rgb(255 255 255 / .58), rgb(255 255 255 / .30));
  box-shadow: inset 0 1px 0 var(--glass-rim), 0 16px 34px -24px rgb(var(--glass-shadow) / .40);
}
.verre::before, .verre-doux::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none; z-index: 2;
  background: linear-gradient(140deg, rgb(255 255 255 / .95), rgb(255 255 255 / .30) 26%, rgb(120 150 215 / .10) 55%, rgb(255 255 255 / .75));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .verre, .verre-doux { background: rgb(244 248 253 / .94); }
}

.meta { font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-500); }
.num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
:focus-visible { outline: 2px solid var(--action); outline-offset: 3px; }

/* Coque : rail à gauche (déplié ou replié), graphique sur tout le reste */
.coque {
  position: relative; z-index: 1; height: calc(100vh - 24px); height: calc(100dvh - 24px);
  display: grid; grid-template-columns: var(--rail-w) minmax(0, 1fr); gap: 12px;
  transition: grid-template-columns .45s var(--out);
}
.coque[data-rail="closed"] { --rail-w: 78px; }
.principal { display: flex; flex-direction: column; gap: 12px; min-width: 0; min-height: 0; }

/* Rail */
.rail { display: flex; flex-direction: column; min-height: 0; min-width: 0; overflow: hidden; padding: 16px 10px 8px; }
.rail-tete { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 6px; }
.marque { font-family: var(--font-display); font-weight: 600; font-size: 19px; letter-spacing: -.01em; margin: 0; white-space: nowrap; }
.marque .court { display: none; }
.rail-sous { padding: 6px 6px 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.icone {
  appearance: none; border: 0; cursor: pointer; flex: none; width: 38px; height: 38px; border-radius: 50%; color: var(--ink-700);
  display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(180deg, rgb(255 255 255 / .75), rgb(255 255 255 / .40));
  box-shadow: inset 0 1px 0 #fff, 0 0 0 1px var(--glass-line), 0 10px 22px -16px rgb(var(--glass-shadow) / .5);
  transition: transform .35s var(--spring), color .2s;
}
.icone:hover { transform: translateY(-1px); color: var(--ink-900); }
.icone svg { transition: transform .45s var(--out); }
.coque[data-rail="closed"] #rail-toggle svg { transform: rotate(180deg); }

.ajout { display: flex; gap: 8px; align-items: center; margin: 14px 2px 8px; }
.ajout input {
  font: inherit; color: var(--ink-900); flex: 1; min-width: 0; min-height: 44px; padding: 0 18px; border: 0; border-radius: var(--r-pill);
  background: var(--well); box-shadow: inset 0 1px 3px rgb(var(--glass-shadow) / .18); outline-offset: 2px;
}
.ajout input::placeholder { color: var(--ink-300); }
.btn {
  appearance: none; border: 0; cursor: pointer; font: inherit; font-weight: 600; font-size: 14px;
  min-height: 44px; padding: 0 22px; border-radius: var(--r-pill);
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  color: #fff; background: linear-gradient(180deg, #4C7AD0, var(--action) 55%, var(--action-deep));
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .35), 0 14px 26px -14px rgb(44 85 166 / .75);
  transition: transform .35s var(--spring), box-shadow .2s, opacity .2s;
}
.btn:hover { transform: translateY(-2px); }
.btn:disabled { opacity: .6; cursor: progress; transform: none; }
.btn-sm { min-height: 40px; padding: 0 16px; font-size: 13px; }
.ajout .court { display: none; font-size: 18px; line-height: 1; }
.rail-titre { display: flex; justify-content: space-between; padding: 6px 8px; }

#liste {
  flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; list-style: none; margin: 0; padding: 0 0 6px;
  display: flex; flex-direction: column; gap: 2px; scrollbar-width: thin; scrollbar-color: rgb(57 105 195 / .25) transparent;
}
.val {
  display: grid; grid-template-columns: minmax(0, 1fr) 24px; grid-template-areas: "l1 x" "l2 x"; align-items: center; gap: 2px 6px;
  padding: 9px 8px 9px 12px; border-radius: var(--r-ctrl); cursor: pointer; position: relative; flex: none;
  transition: background .2s, box-shadow .2s;
}
.val.entree { animation: entree .5s var(--out) both; animation-delay: calc(var(--i) * 28ms); }
.val:hover { background: rgb(255 255 255 / .55); }
.val[aria-selected="true"] {
  background: linear-gradient(180deg, #FFFFFF, #F1F5FD);
  box-shadow: 0 1px 0 #fff inset, 0 10px 22px -12px rgb(var(--glass-shadow) / .55);
}
.l1 { grid-area: l1; display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; }
.l2 { grid-area: l2; display: flex; align-items: baseline; gap: 10px; font-size: 12px; white-space: nowrap; min-width: 0; }
.val .nom { flex: 1; min-width: 0; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.val[aria-selected="true"] .nom { color: var(--action-deep); }
.l2 .sym { font-family: var(--font-mono); font-size: 11px; color: var(--ink-500); letter-spacing: .04em; }
.l2 .cours { margin-left: auto; color: var(--ink-700); }
.l2 .cours small { color: var(--ink-300); font-size: 10px; margin-left: 2px; }
.l2 .jour { min-width: 62px; text-align: right; }
.val .x {
  grid-area: x; appearance: none; border: 0; background: transparent; cursor: pointer; color: var(--ink-300); width: 24px; height: 24px; border-radius: 50%;
  font-size: 12px; line-height: 1; opacity: 0; transition: opacity .2s, background .2s, color .2s;
}
.val:hover .x, .val:focus-within .x { opacity: 1; }
.val .x:hover { background: var(--vente-bg); color: var(--vente-fg); }
.val.erreur { color: var(--vente-fg); cursor: default; }
.vide { padding: 24px 12px; color: var(--ink-500); text-align: center; }

/* Rail replié : symbole + point de verdict */
.coque[data-rail="closed"] .rail { padding-inline: 8px; }
.coque[data-rail="closed"] .rail-tete { flex-direction: column; gap: 12px; padding: 0; }
.coque[data-rail="closed"] .marque .long { display: none; }
.coque[data-rail="closed"] .marque .court { display: inline; font-size: 17px; }
.coque[data-rail="closed"] :is(.rail-sous, .rail-titre, .ajout input, .ajout .long, .val .nom, .l2 .cours, .l2 .jour, .val .x) { display: none; }
.coque[data-rail="closed"] .ajout { justify-content: center; margin-inline: 0; }
.coque[data-rail="closed"] .ajout .court { display: inline; }
.coque[data-rail="closed"] .ajout .btn { width: 44px; padding: 0; }
.coque[data-rail="closed"] .val { grid-template-columns: 1fr; grid-template-areas: "l1" "l2"; justify-items: center; padding: 9px 0; gap: 4px; }
.coque[data-rail="closed"] .l1 { justify-content: center; }
.coque[data-rail="closed"] .l2 { justify-content: center; }
.coque[data-rail="closed"] .val .pill { font-size: 0; padding: 0; background: none; gap: 0; }
.coque[data-rail="closed"] .val .pill::before { width: 10px; height: 10px; }

/* Gélules */
.pill {
  display: inline-flex; align-items: center; gap: 7px; padding: 3px 11px; border-radius: var(--r-pill);
  font-size: 12px; font-weight: 500; line-height: 1.5; white-space: nowrap; flex: none;
  background: var(--neutre-bg); color: var(--neutre-fg);
}
.pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--dot, var(--neutre-dot)); }
.achat { background: var(--achat-bg); color: var(--achat-fg); --dot: var(--achat-dot); }
.vente { background: var(--vente-bg); color: var(--vente-fg); --dot: var(--vente-dot); }
.neutre { background: var(--neutre-bg); color: var(--neutre-fg); --dot: var(--neutre-dot); }
.pos { color: var(--achat-fg); } .neg { color: var(--vente-fg); }

/* Bandeau : changements depuis la dernière visite */
.bandeau { padding: 10px 18px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; animation: entree .5s var(--out) both; flex: none; }
.bandeau[hidden] { display: none; }
.bandeau .titre { font-weight: 600; }
.chg { display: inline-flex; align-items: center; gap: 8px; color: var(--ink-700); }
.bandeau .btn { margin-left: auto; min-height: 34px; }

/* Détail : le graphique occupe tout l'écran restant */
.detail { flex: 1; min-height: 0; display: flex; flex-direction: column; padding: 14px 16px 8px; overflow: hidden; }
.detail-tete { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; flex: none; }
.titre-bloc { min-width: 0; }
h2 { margin: 0; font-family: var(--font-display); font-weight: 500; font-size: 22px; letter-spacing: -.035em; line-height: 1.15; text-wrap: balance; }
.titre-bloc .meta { display: block; margin-top: 3px; font-size: 10px; }
.burger { display: none; }
.seg { display: inline-flex; padding: 4px; gap: 2px; border-radius: var(--r-pill); background: var(--well); box-shadow: inset 0 1px 3px rgb(var(--glass-shadow) / .14); margin-left: auto; }
.seg button {
  appearance: none; border: 0; background: transparent; cursor: pointer; font: inherit; min-height: 34px; padding: 0 16px; border-radius: var(--r-pill);
  color: var(--ink-700); font-weight: 500; font-size: 13px; transition: background .2s, color .2s, box-shadow .2s, transform .35s var(--spring);
}
.seg button:hover { color: var(--ink-900); }
.seg button[aria-pressed="true"] {
  background: linear-gradient(180deg, #fff, #F0F4FC); color: var(--action-deep); font-weight: 600;
  box-shadow: 0 1px 0 #fff inset, 0 8px 16px -8px rgb(var(--glass-shadow) / .6);
}
.mesures { display: flex; flex: 1 1 460px; flex-wrap: wrap; align-items: center; gap: 6px; }
.mesure {
  display: inline-flex; align-items: baseline; gap: 7px; padding: 4px 12px; border-radius: var(--r-pill);
  background: linear-gradient(180deg, rgb(255 255 255 / .70), rgb(255 255 255 / .38));
  box-shadow: inset 0 1px 0 #fff, 0 0 0 1px var(--glass-line); font-size: 12px; color: var(--ink-500); white-space: nowrap;
}
.mesure b { font-family: var(--font-mono); font-weight: 500; font-size: 13px; color: var(--ink-900); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.mesure b.pos { color: var(--achat-fg); } .mesure b.neg { color: var(--vente-fg); }
.mesure.accent { background: linear-gradient(180deg, #E9F0FD, var(--action-soft)); color: var(--action-deep); }
.mesure.accent b { color: var(--action-deep); }

.graphes { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 2px; margin-top: 8px; transition: opacity .2s; }
.graphes.charge { opacity: .45; }
.graphes.fondu { animation: fondu .3s var(--out); }
.pane { position: relative; min-height: 0; }
.p-price { flex: 6 1 0; } .p-rsi { flex: 1.5 1 0; } .p-macd { flex: 2 1 0; }
.pane > .g { position: absolute; inset: 0; }
.pane > .meta { position: absolute; top: 6px; left: 6px; z-index: 3; pointer-events: none; font-size: 10px; }
.legende {
  position: absolute; top: 6px; left: 8px; z-index: 3; pointer-events: none; display: flex; flex-wrap: wrap; gap: 2px 14px;
  padding: 3px 12px; border-radius: var(--r-pill); background: rgb(255 255 255 / .55);
}
.legende span { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 10px; color: var(--ink-500); letter-spacing: .06em; }
.legende i { width: 14px; height: 3px; border-radius: 2px; background: var(--c); }

.toast {
  position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 20px); z-index: 40; padding: 12px 20px; border-radius: var(--r-pill);
  opacity: 0; pointer-events: none; transition: opacity .25s, transform .4s var(--spring); color: var(--vente-fg); font-weight: 500;
}
.toast.on { opacity: 1; transform: translate(-50%, 0); }
.voile { display: none; }

@keyframes entree { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes fondu { from { opacity: .35; } to { opacity: 1; } }

/* Mobile : le rail devient un tiroir */
@media (max-width: 860px) {
  body { padding: 8px; }
  /* iPhone installé (viewport-fit=cover) : l'encoche et la barre d'accueil ne recouvrent rien ; env() vaut 0 sans encoche */
  .coque {
    height: calc(100vh - 16px); height: calc(100dvh - 16px); grid-template-columns: minmax(0, 1fr); transition: none;
    padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  }
  .rail {
    position: fixed; top: calc(8px + env(safe-area-inset-top)); bottom: 8px; left: calc(8px + env(safe-area-inset-left));
    width: min(340px, calc(100vw - 16px)); z-index: 30; padding-bottom: calc(8px + env(safe-area-inset-bottom));
    transform: translateX(calc(-100% - 16px)); transition: transform .45s var(--out);
  }
  .coque[data-rail="open"] .rail { transform: none; }
  .voile { display: block; position: fixed; inset: 0; z-index: 25; background: rgb(26 42 79 / .22); opacity: 0; pointer-events: none; transition: opacity .3s; }
  .coque[data-rail="open"] .voile { opacity: 1; pointer-events: auto; }
  .burger { display: inline-flex; }
  .detail { padding: 12px 12px 6px; }
  h2 { font-size: 19px; }
  .seg { margin-left: 0; width: 100%; } .seg button { flex: 1; }
  .mesures { flex-basis: 100%; order: 3; }
  .val .x { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ---------- ajouts de l'application ---------- */
:root { --perime-bg: #FBEBC8; --perime-fg: #7A5410; --perime-dot: #D9A22E; }

/* Pied du rail : déconnexion */
.rail-pied { flex: none; padding: 8px 2px 4px; border-top: 1px solid var(--glass-line); margin-top: 4px; display: flex; flex-direction: column; align-items: flex-start; }
.rail-pied form { margin: 0; }
.lien {
  appearance: none; border: 0; background: transparent; cursor: pointer; font: inherit; font-size: 13px; font-weight: 500; color: var(--ink-500);
  display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 12px; border-radius: var(--r-pill); transition: background .2s, color .2s;
}
.lien:hover { background: rgb(255 255 255 / .55); color: var(--ink-900); }
.coque[data-rail="closed"] .rail-pied { align-items: center; }
.coque[data-rail="closed"] .lien { padding: 0; width: 40px; justify-content: center; }
.coque[data-rail="closed"] .lien .long { display: none; }

/* Valeurs périmées */
.perime {
  flex: none; padding: 0 8px; border-radius: var(--r-pill); font-size: 10px; font-weight: 600; letter-spacing: .04em; line-height: 17px;
  background: var(--perime-bg); color: var(--perime-fg);
}
.coque[data-rail="closed"] .perime { display: none; }
.coque[data-rail="closed"] .val[data-perime] { opacity: .6; }
.bandeau.alerte-perime { background: linear-gradient(180deg, rgb(251 235 200 / .92), rgb(251 235 200 / .62)); color: var(--perime-fg); }
.bandeau.alerte-perime .chg { color: var(--perime-fg); opacity: .85; }
.bandeau.alerte-perime::after { content: ""; order: -1; width: 8px; height: 8px; border-radius: 50%; background: var(--perime-dot); }
.mesure.alerte { background: linear-gradient(180deg, #FDF3DB, var(--perime-bg)); color: var(--perime-fg); }
.mesure.alerte b { color: var(--perime-fg); }

/* Liste vide : le graphique cède la place à un message */
.graphes { position: relative; }
.graphes.vide .pane { visibility: hidden; }
.etat-vide { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 6px; text-align: center; padding: 24px; z-index: 4; }
.etat-vide[hidden] { display: none; }
.etat-vide p { margin: 0; }
.etat-vide .gros { font-family: var(--font-display); font-weight: 500; font-size: 18px; letter-spacing: -.03em; }
.etat-vide .doux { color: var(--ink-500); max-width: 36ch; }

/* Page de connexion : même verre que l'application */
.page-connexion { overflow: auto; }
.connexion { position: relative; z-index: 1; min-height: 100%; display: grid; place-items: center; }
.carte { width: min(380px, 100%); padding: 30px 28px 28px; }
.carte .marque { font-size: 26px; }
.carte .meta { display: block; margin: 6px 0 22px; }
.carte form { display: flex; flex-direction: column; gap: 8px; margin: 0; }
.carte label { font-size: 12px; font-weight: 500; color: var(--ink-700); padding-left: 6px; }
.carte input {
  font: inherit; color: var(--ink-900); min-height: 46px; padding: 0 18px; border: 0; border-radius: var(--r-pill);
  background: var(--well); box-shadow: inset 0 1px 3px rgb(var(--glass-shadow) / .18); outline-offset: 2px;
}
.carte .erreur { margin: 2px 6px 8px; min-height: 1.5em; color: var(--vente-fg); font-weight: 500; }
.carte .btn { width: 100%; min-height: 46px; }

/* Réglages : boîte de dialogue modale, même verre que le reste */
.reglages {
  position: fixed; inset: 0; margin: auto; width: min(580px, calc(100vw - 24px)); max-width: none; height: fit-content; max-height: calc(100vh - 24px); max-height: calc(100dvh - 24px);
  padding: 0; border: 0; color: var(--ink-900); font: inherit; overflow: hidden;
  background: linear-gradient(160deg, rgb(255 255 255 / .86), rgb(255 255 255 / .62));
  box-shadow: inset 0 1px 0 var(--glass-rim), 0 40px 80px -30px rgb(var(--glass-shadow) / .6);
}
.reglages:not([open]) { display: none; }
.reglages[open] { animation: entree .35s var(--out) both; }
.reglages::backdrop { background: rgb(26 42 79 / .28); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); }
#form-reglages { display: flex; flex-direction: column; max-height: calc(100vh - 24px); max-height: calc(100dvh - 24px); margin: 0; }
.reglages-tete { flex: none; padding: 22px 26px 8px; }
.reglages-tete h2 { font-size: 20px; }
.reglages-tete .meta { display: block; margin-top: 4px; font-size: 10px; letter-spacing: .1em; }
.reglages-corps { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 4px 26px 14px; display: flex; flex-direction: column; gap: 14px; scrollbar-width: thin; scrollbar-color: rgb(57 105 195 / .25) transparent; }
.reglages fieldset { border: 0; margin: 0; padding: 0; min-width: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); gap: 10px 14px; }
.reglages legend { grid-column: 1 / -1; padding: 0 0 2px 4px; float: left; width: 100%; }
.reglages legend + .champ { clear: both; }
.champ { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.champ label { font-size: 12px; font-weight: 600; color: var(--ink-700); padding-left: 6px; }
.champ input {
  font: inherit; font-family: var(--font-mono); font-variant-numeric: tabular-nums; color: var(--ink-900); width: 100%; min-height: 44px; padding: 0 18px;
  border: 0; border-radius: var(--r-pill); background: var(--well); box-shadow: inset 0 1px 3px rgb(var(--glass-shadow) / .18); outline-offset: 2px;
}
.champ input[aria-invalid="true"] { box-shadow: inset 0 1px 3px rgb(var(--glass-shadow) / .18), 0 0 0 2px var(--vente-dot); }
.champ .aide { font-size: 11px; line-height: 1.4; color: var(--ink-500); padding-left: 6px; }
.champ .err { font-size: 12px; line-height: 1.4; font-weight: 600; color: var(--vente-fg); padding-left: 6px; }
.champ .err[hidden], .reglages-message[hidden] { display: none; }
.reglages-message { flex: none; margin: 0 26px 6px; padding: 8px 14px; border-radius: var(--r-ctrl); background: var(--vente-bg); color: var(--vente-fg); font-weight: 500; }
.reglages-pied {
  flex: none; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; padding: 12px 26px 20px;
  border-top: 1px solid var(--glass-line);
}
.reglages-pied .lien { padding: 0 14px; margin-left: -14px; }
.reglages-actions { display: flex; gap: 8px; margin-left: auto; }
.btn-secondaire {
  color: var(--ink-700); background: linear-gradient(180deg, rgb(255 255 255 / .85), rgb(255 255 255 / .45));
  box-shadow: inset 0 1px 0 #fff, 0 0 0 1px var(--glass-line), 0 10px 22px -16px rgb(var(--glass-shadow) / .5);
}
@media (max-width: 860px) {
  .reglages-tete { padding: 18px 18px 6px; }
  .reglages-corps { padding: 4px 18px 12px; }
  .reglages-message { margin-inline: 18px; }
  .reglages-pied { padding: 10px 18px 16px; }
  .reglages-actions { width: 100%; }
  .reglages-actions .btn { flex: 1; }
}