/* YouniCloud — design system (import de YouniCloud.dc.html, adapté :
   polices vendorées, classes au lieu d'inline styles — CSP style-src 'self'). */

@font-face { font-family: "Hanken Grotesk"; src: url("../fonts/HankenGrotesk-var.c501f578bf3f.woff2") format("woff2"); font-weight: 400 800; font-display: swap; }
@font-face { font-family: "Space Grotesk"; src: url("../fonts/SpaceGrotesk-var.87c506d88b9f.woff2") format("woff2"); font-weight: 400 700; font-display: swap; }
@font-face { font-family: "Bricolage Grotesque"; src: url("../fonts/BricolageGrotesque-var.ada540c0e24a.woff2") format("woff2"); font-weight: 400 800; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("../fonts/JetBrainsMono-var.b636a65da4f0.woff2") format("woff2"); font-weight: 400 600; font-display: swap; }

/* ---------- Tokens (YouniCloud.dc) ---------- */
:root {
  --font-body: "Hanken Grotesk", system-ui, sans-serif;
  --font-title: "Space Grotesk", system-ui, sans-serif;
  --font-display: "Bricolage Grotesque", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;

  --bg:#fdf6f9; --surface:#ffffff; --surface-2:#faf3f7; --alt:#faf4f7;
  --line:#f1e2eb; --line-2:#f6ecf2;
  --text:#2a2530; --muted:#8a828f; --faint:#b3aab5;
  --accent:#cf6f97; --accent-grad:linear-gradient(140deg,#e392b4,#cf6f97);
  --accent-ink:#c15f8d; --accent-soft:#f8e9f0;
  --btn-ink:#ffffff; --btn2-bg:#2a2530; --btn2-ink:#ffffff;
  --hot:#e07a52; --hot-bg:#fbe9e0; --hot-ink:#b1502c;
  --warm:#d8a24a; --warm-bg:#f6ecd6; --warm-ink:#9a6f1e;
  --cold:#5b91c4; --cold-bg:#e6eef7; --cold-ink:#3d6a97;
  --chip:#f1ecf1; --chip-ink:#8a828f; --chip-brd:#eae3ea;
  --field:#f7f2f5; --field-brd:#efe8ee;
  --shadow:rgba(160,60,110,.16); --shadow-2:rgba(40,30,40,.12);
  --diff-add-bg:#e9f5ee; --diff-add-ink:#2f7d4f;
  --diff-del-bg:#fbe7e6; --diff-del-ink:#b3524f;
  --overlay:rgba(60,40,55,.45); --ph:rgba(70,60,80,.16);
  --ribbon-bg:rgba(255,255,255,.92);
  --ok:#2f7d4f; --err:#b3524f;
  /* (W-A3) Palette de coloration — variante claire. */
  --hl-cmt:#9a94a2; --hl-str:#3f8a5c; --hl-num:#a15fa1; --hl-kw:#b8447a;
  --hl-fn:#3f6fb8; --hl-type:#1f8c8c; --hl-prop:#8a6a1f; --hl-var:#b1502c;
  --hl-meta:#7b6bb5; --hl-op:#6d6478; --hl-pun:#8a828f;
}
/* (W-A3) Palette de coloration — variante sombre, appliquée aux thèmes
   dont le fond est foncé. Les thèmes clairs (sepia, arctic, pastel) gardent
   la palette de :root. */
:root[data-theme="dark"], :root[data-theme="oled"], :root[data-theme="cyberpunk"],
:root[data-theme="vaporwave"], :root[data-theme="synthwave"], :root[data-theme="matrix"],
:root[data-theme="retro"], :root[data-theme="dracula"], :root[data-theme="solarized"],
:root[data-theme="forest"], :root[data-theme="monochrome"] {
  --hl-cmt:#7b7488; --hl-str:#9fd08a; --hl-num:#d5a0e0; --hl-kw:#f08dbb;
  --hl-fn:#7fb6f0; --hl-type:#6fd7d0; --hl-prop:#e6c07b; --hl-var:#f0a07a;
  --hl-meta:#b9a6f5; --hl-op:#b6adc2; --hl-pun:#8b8399;
}
:root[data-theme="dark"] {
  --bg:#1a171d; --surface:#221e28; --surface-2:#1e1b24; --alt:#201d26;
  --line:#2f2937; --line-2:#2b2630;
  --text:#ece8ef; --muted:#928999; --faint:#6c6474;
  --accent:#e07ba6; --accent-grad:linear-gradient(140deg,#f0b3cd,#e07ba6);
  --accent-ink:#eda6c4; --accent-soft:rgba(237,166,196,.13);
  --btn-ink:#241820; --btn2-bg:#eda6c4; --btn2-ink:#241820;
  --hot:#ef8a63; --hot-bg:rgba(239,138,99,.15); --hot-ink:#ef8a63;
  --warm:#e0b25a; --warm-bg:rgba(224,178,90,.15); --warm-ink:#e0b25a;
  --cold:#6ba6db; --cold-bg:rgba(107,166,219,.16); --cold-ink:#6ba6db;
  --chip:#262230; --chip-ink:#8b8393; --chip-brd:#332e3c;
  --field:#232029; --field-brd:#322c39;
  --shadow:rgba(0,0,0,.5); --shadow-2:rgba(0,0,0,.55);
  --diff-add-bg:rgba(90,190,130,.13); --diff-add-ink:#82c99e;
  --diff-del-bg:rgba(224,120,120,.14); --diff-del-ink:#e28f8f;
  --overlay:rgba(0,0,0,.6); --ph:rgba(236,232,239,.18);
  --ribbon-bg:rgba(28,25,32,.82);
  --ok:#82c99e; --err:#e28f8f;
}

/* ---------- Base ---------- */
* { box-sizing: border-box; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  transition: background .25s, color .25s;
  min-height: 100vh;
}
a { color: var(--accent-ink); text-decoration: none; }
a:hover { opacity: .8; }
button { font-family: inherit; cursor: pointer; }
@keyframes ycfade { from{opacity:0} to{opacity:1} }
@keyframes ycpop { from{opacity:0;transform:translateY(12px) scale(.985)} to{opacity:1;transform:none} }
[hidden] { display: none !important; }

.mono { font-family: var(--font-mono); }
.msg { min-height: 1.2em; font-size: 13px; color: var(--muted); padding: 0 2px; }
.msg.error { color: var(--err); font-weight: 600; }

/* ---------- Topbar (layout Pro) ---------- */
.topbar {
  min-height: 60px; display: flex; align-items: center; flex-wrap: wrap;
  gap: 20px; padding: 0 22px;
  border-bottom: 1px solid var(--line-2); background: var(--surface);
}
.brand { display: flex; align-items: center; gap: 10px; padding: 14px 0; color: var(--text); }
.brand:hover { opacity: 1; }
.brand-dot { width: 26px; height: 26px; border-radius: 8px; background: var(--accent-grad); }
.brand-name { font-family: var(--font-title); font-weight: 700; font-size: 15.5px; letter-spacing: -.01em; }
.topnav { display: flex; gap: 22px; font-family: var(--font-title); font-size: 13.5px; font-weight: 500; flex-wrap: wrap; }
.topnav a { color: var(--muted); padding: 20px 0; border-bottom: 2px solid transparent; }
.topnav a.active { color: var(--text); border-bottom-color: var(--accent); }
.top-right { margin-left: auto; display: flex; align-items: center; gap: 10px; padding: 10px 0; flex-wrap: wrap; }
.avatar {
  width: 32px; height: 32px; border-radius: 50%; background: var(--accent-soft);
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; color: var(--accent-ink); border: none;
}

/* ---------- Contrôles segmentés / boutons ---------- */
.seg { display: flex; gap: 3px; background: var(--field); border: 1px solid var(--field-brd); border-radius: 11px; padding: 3px; }
.seg button { border: none; background: transparent; color: var(--muted); font-size: 12.5px; font-weight: 600; padding: 6px 12px; border-radius: 8px; }
.seg button.on { background: var(--accent-grad); color: var(--btn-ink); }
.btn { border: none; border-radius: 11px; font-weight: 600; font-size: 13px; padding: 10px 16px; }
.btn-accent { background: var(--accent-grad); color: var(--btn-ink); font-weight: 700; }
.btn-dark { background: var(--btn2-bg); color: var(--btn2-ink); }
.btn-ghost { background: var(--surface); color: var(--text); border: 1px solid var(--line); }
.btn-sm { padding: 7px 12px; font-size: 12.5px; border-radius: 9px; }

/* ---------- Hero (layout Galerie) ---------- */
.hero { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 18px; padding: 26px 34px 16px; }
.hero-kicker { font-family: var(--font-mono); font-weight: 700; font-size: 11px; letter-spacing: .14em; color: var(--accent-ink); opacity: .85; margin-bottom: 7px; }
.hero h1 { margin: 0; font-family: var(--font-display); font-size: 34px; font-weight: 800; letter-spacing: -.03em; line-height: .95; }
.hero-right { margin-left: auto; display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.hero-stat { text-align: right; }
.hero-stat-big { font-family: var(--font-display); font-size: 28px; font-weight: 800; color: var(--accent-ink); line-height: 1; letter-spacing: -.02em; }
.hero-stat-sub { font-size: 12px; color: var(--muted); margin-top: 4px; }

/* ---------- Barre onglets + outils ---------- */
.toolrow { padding: 0 34px 16px; display: flex; align-items: center; flex-wrap: wrap; gap: 14px; }
.pillnav { display: inline-flex; gap: 4px; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 5px; box-shadow: 0 10px 26px -18px var(--shadow); flex-wrap: wrap; }
.pillnav button { border: none; background: transparent; font-size: 13.5px; font-weight: 500; color: var(--muted); padding: 8px 15px; border-radius: 12px; }
.pillnav button.on { font-weight: 600; color: var(--btn-ink); background: var(--accent-grad); }
.tool-right { margin-left: auto; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.search { background: var(--surface); border: 1px solid var(--line); border-radius: 13px; padding: 10px 14px; font-size: 13px; font-family: inherit; color: var(--text); width: 220px; }
.search::placeholder { color: var(--faint); }
.upload-btn { display: inline-block; }

.legend { display: flex; align-items: center; gap: 16px; margin-bottom: 16px; flex-wrap: wrap; }
.legend .count { font-size: 13px; color: var(--muted); }
.lg { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--muted); }
.lg i { width: 9px; height: 9px; border-radius: 3px; display: inline-block; }
.lg i.hot { background: var(--hot); } .lg i.warm { background: var(--warm); } .lg i.cold { background: var(--cold); }
.lg.push { margin-left: auto; }

.content { flex: 1; padding: 8px 34px 34px; }
.crumb { font-size: 13px; color: var(--muted); margin: 0 0 14px; }

/* ---------- Cartes (Galerie) ---------- */
.fgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); gap: 16px; }
.fcard { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; overflow: hidden; box-shadow: 0 12px 30px -22px var(--shadow); cursor: pointer; animation: ycpop .22s cubic-bezier(.2,.8,.2,1); }
.fthumb { position: relative; height: 112px; display: flex; align-items: center; justify-content: center; }
.fthumb .stripes { position: absolute; inset: 0; background: repeating-linear-gradient(45deg, rgba(255,255,255,.14) 0 2px, transparent 2px 10px); }
.fthumb .ext { position: relative; font-family: var(--font-mono); font-weight: 700; font-size: 20px; color: var(--faint); }
.t-video  { background: linear-gradient(135deg, rgba(140,90,200,.16), rgba(140,90,200,.3)); }
.t-image  { background: linear-gradient(135deg, rgba(70,170,110,.16), rgba(70,170,110,.3)); }
.t-audio  { background: linear-gradient(135deg, rgba(60,170,160,.16), rgba(60,170,160,.32)); }
.t-doc    { background: linear-gradient(135deg, rgba(70,120,200,.16), rgba(70,120,200,.3)); }
.t-text   { background: linear-gradient(135deg, rgba(120,110,130,.12), rgba(120,110,130,.2)); }
.t-archive{ background: linear-gradient(135deg, rgba(200,150,70,.16), rgba(200,150,70,.3)); }
.t-folder { background: linear-gradient(135deg, rgba(207,111,151,.2), rgba(207,111,151,.34)); }
.folder-ico { width: 52px; height: 40px; border-radius: 9px; background: var(--surface); box-shadow: 0 6px 14px -6px var(--shadow); position: relative; }
.folder-ico::before { content: ""; position: absolute; top: -6px; left: 8px; width: 22px; height: 10px; border-radius: 5px 5px 0 0; background: var(--surface); }
.ribbon { position: absolute; top: 10px; left: 10px; display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 700; padding: 4px 9px; border-radius: 20px; background: var(--ribbon-bg); }
.ribbon i { width: 6px; height: 6px; border-radius: 50%; display: inline-block; }
.ribbon.hot { color: var(--hot-ink); } .ribbon.hot i { background: var(--hot); }
.ribbon.warm { color: var(--warm-ink); } .ribbon.warm i { background: var(--warm); }
.ribbon.cold { color: var(--cold-ink); } .ribbon.cold i { background: var(--cold); }
.fbody { padding: 12px 13px 13px; }
.fname { font-weight: 600; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fmeta { display: flex; align-items: center; gap: 8px; margin-top: 8px; font-size: 12px; color: var(--muted); flex-wrap: wrap; }
.vchip { font-family: var(--font-mono); font-weight: 600; font-size: 11px; color: var(--accent-ink); background: var(--accent-soft); padding: 2px 7px; border-radius: 6px; }
.star-on { color: var(--accent-ink); }
.factions { display: flex; gap: 4px; margin-top: 9px; flex-wrap: wrap; }
.factions button { border: 1px solid var(--line); background: var(--surface); color: var(--muted); border-radius: 8px; font-size: 12px; padding: 4px 8px; }
.factions button:hover { color: var(--text); border-color: var(--faint); }

/* ---------- Tableau (Pro) ---------- */
.pro-wrap { flex: 1; display: flex; flex-wrap: wrap; align-items: stretch; min-height: 0; }
.pro-main { flex: 1 1 560px; min-width: 0; padding: 0 22px 20px; }
.pro-title { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; padding: 17px 0 13px; }
.pro-title h1 { margin: 0; font-family: var(--font-title); font-size: 18px; font-weight: 700; letter-spacing: -.01em; }
.pro-title .count { font-family: var(--font-mono); font-size: 13px; color: var(--faint); }
/* (W-A7) Les colonnes sont configurables : le gabarit de grille est posé par
   le JS sur .pro-main (--cols) à partir des colonnes réellement affichées.
   La valeur ci-dessous n'est qu'un repli avant le premier rendu. */
.ftable-head, .frow {
  display: grid; grid-template-columns: var(--cols, 1fr 84px 78px 78px 70px 60px 90px);
  gap: 10px; align-items: center;
  padding: 11px 12px;
}
.ftable-head {
  padding: 9px 12px; font-family: var(--font-mono); font-weight: 600; font-size: 10px;
  text-transform: uppercase; letter-spacing: .08em; color: var(--faint);
  border-bottom: 1px solid var(--line-2);
}
.frow { border-left: 2px solid transparent; cursor: pointer; }
.frow.hot { border-left-color: var(--hot); }
.frow.warm { border-left-color: var(--warm); }
.frow.cold { border-left-color: var(--cold); }
.frow:nth-child(even) { background: var(--alt); border-radius: 0 6px 6px 0; }
.fcell-name { display: flex; align-items: center; gap: 10px; min-width: 0; }
.ficon { width: 28px; height: 28px; flex: none; border-radius: 7px; background: var(--chip); border: 1px solid var(--chip-brd); display: flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-weight: 600; font-size: 8px; color: var(--chip-ink); }
.fcell-name span:last-child { font-size: 13.5px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tier-pill { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 600; padding: 3px 8px; border-radius: 6px; width: fit-content; }
.tier-pill.hot { color: var(--hot-ink); background: var(--hot-bg); }
.tier-pill.warm { color: var(--warm-ink); background: var(--warm-bg); }
.tier-pill.cold { color: var(--cold-ink); background: var(--cold-bg); }
.num { font-family: var(--font-mono); font-weight: 500; font-size: 12.5px; }
.gain { font-family: var(--font-mono); font-weight: 600; font-size: 12px; color: var(--accent-ink); }
.gain.zero { color: var(--faint); }
.dim { font-size: 12px; color: var(--muted); }
/* (W-A7) Colonnes dynamiques : aucune cellule ne doit pousser la grille. */
.ftable-head > span, .frow > * { min-width: 0; }
.ellipsis { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Case à cocher désactivée : elle reste lisible mais visiblement inopérante. */
.ycdlg-check.is-off { opacity: .5; cursor: not-allowed; }

/* ---------- Sidebar stockage (Pro) ---------- */
.side { flex: 0 1 300px; border-left: 1px solid var(--line-2); background: var(--surface-2); padding: 18px; display: flex; flex-direction: column; gap: 14px; }
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 16px; }
.panel-k { font-family: var(--font-mono); font-weight: 600; font-size: 10.5px; letter-spacing: .1em; color: var(--faint); }
.panel-big { font-family: var(--font-title); font-size: 32px; font-weight: 700; margin-top: 6px; letter-spacing: -.02em; }
.panel-big small { font-size: 16px; color: var(--muted); font-weight: 500; }
.panel-sub { font-size: 12px; color: var(--muted); margin-top: 2px; }
.saving-chip { display: inline-block; margin-top: 12px; font-family: var(--font-mono); font-weight: 700; font-size: 12px; color: var(--accent-ink); background: var(--accent-soft); padding: 5px 11px; border-radius: 20px; }
.panel h3 { margin: 0 0 13px; font-size: 13px; font-weight: 600; }
.bar-row { display: flex; justify-content: space-between; font-size: 12px; margin-bottom: 6px; }
.bar-row .mono { color: var(--muted); font-size: 12px; }
.bar { height: 6px; border-radius: 4px; background: var(--line-2); overflow: hidden; margin-bottom: 13px; }
.bar > i { display: block; height: 100%; background: var(--accent-grad); }
.split { display: flex; height: 12px; border-radius: 6px; overflow: hidden; margin-bottom: 11px; }
.split .hot { background: var(--hot); } .split .warm { background: var(--warm); } .split .cold { background: var(--cold); }
.qbar { height: 7px; border-radius: 5px; background: var(--line-2); overflow: hidden; }
.qbar > i { display: block; height: 100%; background: var(--accent-grad); }

/* ---------- Modal versions ---------- */
.overlay { position: fixed; inset: 0; background: var(--overlay); display: flex; align-items: center; justify-content: center; padding: 24px; z-index: 60; animation: ycfade .18s ease; }
.modal { width: min(940px, 96vw); max-height: min(620px, 90vh); background: var(--surface); border: 1px solid var(--line); border-radius: 20px; overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 40px 90px -30px var(--shadow-2); animation: ycpop .22s cubic-bezier(.2,.8,.2,1); }
.modal-head { display: flex; align-items: center; gap: 12px; padding: 18px 22px; border-bottom: 1px solid var(--line-2); }
.modal-head .ficon { width: 34px; height: 34px; border-radius: 9px; font-size: 9px; font-weight: 700; }
.modal-title { font-weight: 700; font-size: 15px; }
.modal-sub { font-size: 12.5px; color: var(--muted); }
.modal-x { margin-left: auto; border: 1px solid var(--line); background: var(--surface); color: var(--muted); width: 32px; height: 32px; border-radius: 9px; font-size: 16px; line-height: 1; }
.modal-body { flex: 1; display: flex; min-height: 0; }
.vlist { width: 246px; flex: none; border-right: 1px solid var(--line-2); padding: 12px; overflow: auto; }
.vlist-k { font-family: var(--font-mono); font-weight: 600; font-size: 10px; letter-spacing: .08em; color: var(--faint); padding: 4px 8px 8px; }
.vitem { display: flex; align-items: center; gap: 10px; padding: 10px 11px; border-radius: 10px; cursor: pointer; margin-bottom: 2px; }
.vitem.current { background: var(--alt); cursor: default; }
.vitem.compare { background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent); }
.vtag { font-family: var(--font-mono); font-weight: 600; font-size: 12px; padding: 3px 8px; border-radius: 7px; background: var(--chip); color: var(--muted); }
.vitem.current .vtag, .vitem.compare .vtag { color: var(--accent-ink); }
.vinfo { flex: 1; min-width: 0; }
.vdate { font-size: 12.5px; font-weight: 600; }
.vmeta { font-size: 11.5px; color: var(--muted); }
.vnow { font-family: var(--font-mono); font-weight: 600; font-size: 9px; color: var(--accent-ink); background: var(--accent-soft); padding: 3px 7px; border-radius: 20px; }
.vpane { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.vpane-head { display: flex; align-items: center; gap: 12px; padding: 14px 20px; border-bottom: 1px solid var(--line-2); flex-wrap: wrap; }
.vpane-head .lbl { font-size: 13px; font-weight: 600; }
.varrow { display: flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-weight: 600; font-size: 12px; color: var(--muted); }
.varrow .to { color: var(--accent-ink); }
.vpane-actions { margin-left: auto; display: flex; gap: 8px; white-space: nowrap; }
.vcompare { flex: 1; overflow: auto; padding: 18px 20px; font-size: 13px; color: var(--muted); line-height: 1.7; }
.vcompare .add { color: var(--diff-add-ink); background: var(--diff-add-bg); padding: 1px 8px; border-radius: 4px; }
.vcompare .del { color: var(--diff-del-ink); background: var(--diff-del-bg); padding: 1px 8px; border-radius: 4px; }
.vstat { display: flex; gap: 20px; margin: 8px 0 14px; flex-wrap: wrap; }
.vstat b { font-family: var(--font-mono); font-size: 15px; color: var(--text); display: block; }
.vstat span { font-size: 11.5px; color: var(--faint); }

/* ---------- Pages auth & formulaires ---------- */
.auth-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; }
.card { width: min(420px, 94vw); background: var(--surface); border: 1px solid var(--line); border-radius: 20px; padding: 28px; box-shadow: 0 24px 60px -30px var(--shadow); animation: ycpop .25s cubic-bezier(.2,.8,.2,1); }
.card .brand { padding: 0 0 18px; }
.card h1 { margin: 0 0 6px; font-family: var(--font-display); font-size: 24px; font-weight: 800; letter-spacing: -.02em; }
.card .lead { margin: 0 0 18px; font-size: 13.5px; color: var(--muted); }
form { display: flex; flex-direction: column; gap: 12px; }
label { display: flex; flex-direction: column; gap: 5px; font-size: 12.5px; font-weight: 600; color: var(--muted); }
input, select {
  font: inherit; color: var(--text); background: var(--field);
  border: 1px solid var(--field-brd); border-radius: 11px; padding: 10px 13px;
}
input:focus { outline: 2px solid var(--accent); outline-offset: 0; }
code { font-family: var(--font-mono); background: var(--chip); border: 1px solid var(--chip-brd); border-radius: 6px; padding: 2px 7px; user-select: all; }

/* ---------- Pages secondaires (tables génériques) ---------- */
.page { padding: 22px 34px 34px; max-width: 1100px; }
.page h1 { font-family: var(--font-display); font-size: 26px; font-weight: 800; letter-spacing: -.02em; margin: 0 0 4px; }
.page h2 { font-family: var(--font-title); font-size: 15px; font-weight: 700; margin: 26px 0 10px; }
.page .lead { color: var(--muted); font-size: 13.5px; margin: 0 0 18px; }
.dtable { border-collapse: collapse; width: 100%; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.dtable th { text-align: left; font-family: var(--font-mono); font-weight: 600; font-size: 10px; text-transform: uppercase; letter-spacing: .08em; color: var(--faint); padding: 11px 14px; border-bottom: 1px solid var(--line-2); }
.dtable td { padding: 11px 14px; font-size: 13px; border-bottom: 1px solid var(--line-2); }
.dtable tr:last-child td { border-bottom: none; }
.dtable tr:nth-child(even) td { background: var(--alt); }
.dtable button { border: 1px solid var(--line); background: var(--surface); color: var(--text); border-radius: 8px; font-size: 12px; padding: 5px 10px; margin-right: 4px; }
.page form { max-width: 380px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 18px; }

@media (max-width: 760px) {
  .hero, .toolrow, .content, .page { padding-left: 16px; padding-right: 16px; }
  /* (W-A7) Sur mobile, c'est le JS qui retire les colonnes secondaires et
     recalcule --cols : plus de masquage par nth-child qui décalerait tout. */
  .side { flex-basis: 100%; border-left: none; border-top: 1px solid var(--line-2); }
}


/* ===== Thèmes (fusionnés depuis themes.css pour éviter le flash) ===== */
/* Thèmes YouniCloud — chaque thème surcharge les tokens de app.css.
   Base (anonyme) : light (défaut, dans app.css), dark, oled.
   Avancés (connecté) : sepia, cyberpunk, vaporwave, synthwave, matrix,
   retro, dracula, arctic, solarized, forest, monochrome, pastel.
   custom : variables posées en inline par le JS. */

/* ---- OLED : noir pur (éco batterie AMOLED) ---- */
:root[data-theme="oled"] {
  --bg:#000000; --surface:#0a0a0c; --surface-2:#060608; --alt:#0c0c0f;
  --line:#1a1a1f; --line-2:#141418;
  --text:#f2f2f5; --muted:#8a8a94; --faint:#5a5a63;
  --accent:#e07ba6; --accent-grad:linear-gradient(140deg,#f0b3cd,#e07ba6);
  --accent-ink:#eda6c4; --accent-soft:rgba(237,166,196,.12);
  --btn-ink:#160b12; --btn2-bg:#eda6c4; --btn2-ink:#160b12;
  --hot:#ef8a63; --hot-bg:rgba(239,138,99,.14); --hot-ink:#ef8a63;
  --cold:#6ba6db; --cold-bg:rgba(107,166,219,.15); --cold-ink:#6ba6db;
  --chip:#141419; --chip-ink:#8a8a94; --chip-brd:#22222a;
  --field:#101014; --field-brd:#22222a;
  --shadow:rgba(0,0,0,.8); --shadow-2:rgba(0,0,0,.85);
  --diff-add-bg:rgba(90,190,130,.14); --diff-add-ink:#82c99e;
  --diff-del-bg:rgba(224,120,120,.14); --diff-del-ink:#e28f8f;
  --overlay:rgba(0,0,0,.75); --ph:rgba(242,242,245,.14); --ribbon-bg:rgba(10,10,12,.88);
  --ok:#82c99e; --err:#e28f8f;
}

/* ---- Sepia clair (lecture douce) ---- */
:root[data-theme="sepia"] {
  --bg:#f4ecd8; --surface:#fbf6e9; --surface-2:#f0e6cf; --alt:#f2e9d5;
  --line:#e2d5b8; --line-2:#ead ; --line-2:#eaddc4;
  --text:#433422; --muted:#8a765a; --faint:#b3a184;
  --accent:#b07a3c; --accent-grad:linear-gradient(140deg,#d0a05e,#b07a3c);
  --accent-ink:#946128; --accent-soft:#efe1c6;
  --btn-ink:#fff; --btn2-bg:#433422; --btn2-ink:#fbf6e9;
  --hot:#c2703a; --hot-bg:#f0dcc6; --hot-ink:#98501f;
  --cold:#6a8a9c; --cold-bg:#e0e6e8; --cold-ink:#456070;
  --chip:#ece0c8; --chip-ink:#8a765a; --chip-brd:#e0d2b4;
  --field:#f0e6cf; --field-brd:#e2d5b8;
  --shadow:rgba(120,90,40,.18); --shadow-2:rgba(70,50,20,.14);
  --overlay:rgba(60,45,20,.4); --ph:rgba(90,70,40,.16); --ribbon-bg:rgba(251,246,233,.92);
  --ok:#5f8a4f; --err:#b3524f;
}

/* ---- Cyberpunk (néon jaune/cyan sur noir) ---- */
:root[data-theme="cyberpunk"] {
  --bg:#0b0f13; --surface:#12181f; --surface-2:#0e141a; --alt:#141c24;
  --line:#1e2a34; --line-2:#18232c;
  --text:#e8fbff; --muted:#7fb3c4; --faint:#4a6b78;
  --accent:#f6e05e; --accent-grad:linear-gradient(140deg,#fff36b,#00e5ff);
  --accent-ink:#ffe93d; --accent-soft:rgba(0,229,255,.12);
  --btn-ink:#07131a; --btn2-bg:#00e5ff; --btn2-ink:#07131a;
  --hot:#ff5470; --hot-bg:rgba(255,84,112,.14); --hot-ink:#ff7a90;
  --cold:#00e5ff; --cold-bg:rgba(0,229,255,.13); --cold-ink:#4ff0ff;
  --chip:#152029; --chip-ink:#7fb3c4; --chip-brd:#213039;
  --field:#101820; --field-brd:#233440;
  --shadow:rgba(0,229,255,.14); --shadow-2:rgba(0,0,0,.7);
  --overlay:rgba(0,10,15,.7); --ph:rgba(0,229,255,.18); --ribbon-bg:rgba(18,24,31,.9);
  --ok:#39ff9e; --err:#ff5470;
}

/* ---- Vaporwave (rose/cyan pastel) ---- */
:root[data-theme="vaporwave"] {
  --bg:#2a1a3e; --surface:#352348; --surface-2:#2e1f40; --alt:#3a2750;
  --line:#4a3568; --line-2:#412e5c;
  --text:#ffeaf7; --muted:#c59fd6; --faint:#8a6ba3;
  --accent:#ff6 ; --accent:#ff6ad5; --accent-grad:linear-gradient(140deg,#8be9fd,#ff6ad5);
  --accent-ink:#ff9ce4; --accent-soft:rgba(255,106,213,.14);
  --btn-ink:#2a1a3e; --btn2-bg:#8be9fd; --btn2-ink:#2a1a3e;
  --hot:#ff8b94; --hot-bg:rgba(255,139,148,.16); --hot-ink:#ffb0b6;
  --cold:#8be9fd; --cold-bg:rgba(139,233,253,.15); --cold-ink:#a9f0ff;
  --chip:#3a2750; --chip-ink:#c59fd6; --chip-brd:#4a3568;
  --field:#33224a; --field-brd:#4a3568;
  --shadow:rgba(255,106,213,.2); --shadow-2:rgba(0,0,0,.5);
  --overlay:rgba(20,10,35,.65); --ph:rgba(255,234,247,.16); --ribbon-bg:rgba(53,35,72,.9);
  --ok:#7fe6b0; --err:#ff8b94;
}

/* ---- Synthwave (violet/orange coucher de soleil) ---- */
:root[data-theme="synthwave"] {
  --bg:#1a1033; --surface:#241645; --surface-2:#1e1239; --alt:#2a1a50;
  --line:#3a2668; --line-2:#33215c;
  --text:#f6e9ff; --muted:#b79ad6; --faint:#7d63a3;
  --accent:#ff7a18; --accent-grad:linear-gradient(140deg,#ff2e97,#ff7a18);
  --accent-ink:#ff9c4a; --accent-soft:rgba(255,46,151,.14);
  --btn-ink:#1a1033; --btn2-bg:#ff2e97; --btn2-ink:#fff;
  --hot:#ff5470; --hot-bg:rgba(255,84,112,.16); --hot-ink:#ff859a;
  --cold:#36c9ff; --cold-bg:rgba(54,201,255,.15); --cold-ink:#6dd8ff;
  --chip:#2a1a50; --chip-ink:#b79ad6; --chip-brd:#3a2668;
  --field:#241645; --field-brd:#3a2668;
  --shadow:rgba(255,46,151,.2); --shadow-2:rgba(0,0,0,.55);
  --overlay:rgba(12,6,28,.7); --ph:rgba(246,233,255,.16); --ribbon-bg:rgba(36,22,69,.9);
  --ok:#7fe6b0; --err:#ff5470;
}

/* ---- Matrix (vert sur noir) ---- */
:root[data-theme="matrix"] {
  --bg:#000804; --surface:#04120a; --surface-2:#020c06; --alt:#06160c;
  --line:#0e2a18; --line-2:#0a2012;
  --text:#7dff9e; --muted:#3faf63; --faint:#256b3c;
  --accent:#00ff5f; --accent-grad:linear-gradient(140deg,#7dff9e,#00ff5f);
  --accent-ink:#3dff77; --accent-soft:rgba(0,255,95,.1);
  --btn-ink:#001a0a; --btn2-bg:#00ff5f; --btn2-ink:#001a0a;
  --hot:#ffb000; --hot-bg:rgba(255,176,0,.12); --hot-ink:#ffc63d;
  --cold:#00d0a0; --cold-bg:rgba(0,208,160,.12); --cold-ink:#3de0c0;
  --chip:#06160c; --chip-ink:#3faf63; --chip-brd:#0e2a18;
  --field:#04120a; --field-brd:#0e2a18;
  --shadow:rgba(0,255,95,.14); --shadow-2:rgba(0,0,0,.8);
  --overlay:rgba(0,8,4,.8); --ph:rgba(125,255,158,.14); --ribbon-bg:rgba(4,18,10,.9);
  --ok:#00ff5f; --err:#ff5c5c;
}

/* ---- Retro (ambre terminal / crème) ---- */
:root[data-theme="retro"] {
  --bg:#1c1710; --surface:#26201660; --surface:#262016; --surface-2:#201a12; --alt:#2c251a;
  --line:#3d3322; --line-2:#352c1e;
  --text:#ffd587; --muted:#b39355; --faint:#7a6538;
  --accent:#ffab40; --accent-grad:linear-gradient(140deg,#ffd587,#ffab40);
  --accent-ink:#ffc061; --accent-soft:rgba(255,171,64,.12);
  --btn-ink:#1c1710; --btn2-bg:#ffab40; --btn2-ink:#1c1710;
  --hot:#ff8f5a; --hot-bg:rgba(255,143,90,.14); --hot-ink:#ffab7d;
  --cold:#8fc0a0; --cold-bg:rgba(143,192,160,.13); --cold-ink:#a9d4b8;
  --chip:#2c251a; --chip-ink:#b39355; --chip-brd:#3d3322;
  --field:#262016; --field-brd:#3d3322;
  --shadow:rgba(255,171,64,.14); --shadow-2:rgba(0,0,0,.6);
  --overlay:rgba(15,12,6,.7); --ph:rgba(255,213,135,.14); --ribbon-bg:rgba(38,32,22,.9);
  --ok:#9ccc65; --err:#ff8f5a;
}

/* ---- Dracula ---- */
:root[data-theme="dracula"] {
  --bg:#282a36; --surface:#343746; --surface-2:#2d2f3c; --alt:#3a3d4e;
  --line:#44475a; --line-2:#3c3f52;
  --text:#f8f8f2; --muted:#a6accd; --faint:#6d7290;
  --accent:#bd93f9; --accent-grad:linear-gradient(140deg,#ff79c6,#bd93f9);
  --accent-ink:#d0aaff; --accent-soft:rgba(189,147,249,.14);
  --btn-ink:#282a36; --btn2-bg:#bd93f9; --btn2-ink:#282a36;
  --hot:#ffb86c; --hot-bg:rgba(255,184,108,.14); --hot-ink:#ffca8f;
  --cold:#8be9fd; --cold-bg:rgba(139,233,253,.14); --cold-ink:#a9f0ff;
  --chip:#3a3d4e; --chip-ink:#a6accd; --chip-brd:#44475a;
  --field:#343746; --field-brd:#44475a;
  --shadow:rgba(0,0,0,.5); --shadow-2:rgba(0,0,0,.6);
  --overlay:rgba(20,21,28,.65); --ph:rgba(248,248,242,.15); --ribbon-bg:rgba(52,55,70,.9);
  --ok:#50fa7b; --err:#ff5555;
}

/* ---- Arctic (bleu glacier clair — Nord) ---- */
:root[data-theme="arctic"] {
  --bg:#eceff4; --surface:#ffffff; --surface-2:#e5e9f0; --alt:#e9edf3;
  --line:#d8dee9; --line-2:#e1e6ee;
  --text:#2e3440; --muted:#6c7686; --faint:#9aa4b5;
  --accent:#5e81ac; --accent-grad:linear-gradient(140deg,#88c0d0,#5e81ac);
  --accent-ink:#4c6a8f; --accent-soft:#dbe4ef;
  --btn-ink:#fff; --btn2-bg:#2e3440; --btn2-ink:#eceff4;
  --hot:#d08770; --hot-bg:#f0e0d8; --hot-ink:#a85a40;
  --cold:#5e81ac; --cold-bg:#dbe4ef; --cold-ink:#436088;
  --chip:#e5e9f0; --chip-ink:#6c7686; --chip-brd:#d8dee9;
  --field:#e5e9f0; --field-brd:#d8dee9;
  --shadow:rgba(46,52,64,.16); --shadow-2:rgba(46,52,64,.12);
  --overlay:rgba(46,52,64,.4); --ph:rgba(46,52,64,.14); --ribbon-bg:rgba(255,255,255,.92);
  --ok:#a3be8c; --err:#bf616a;
}

/* ---- Solarized (dark) ---- */
:root[data-theme="solarized"] {
  --bg:#002b36; --surface:#073642; --surface-2:#04303b; --alt:#0a3d49;
  --line:#12495640; --line:#124956; --line-2:#0e4350;
  --text:#eee8d5; --muted:#93a1a1; --faint:#5d757a;
  --accent:#268bd2; --accent-grad:linear-gradient(140deg,#2aa198,#268bd2);
  --accent-ink:#4aa3e0; --accent-soft:rgba(38,139,210,.14);
  --btn-ink:#002b36; --btn2-bg:#268bd2; --btn2-ink:#002b36;
  --hot:#cb4b16; --hot-bg:rgba(203,75,22,.16); --hot-ink:#e06a38;
  --cold:#268bd2; --cold-bg:rgba(38,139,210,.15); --cold-ink:#4aa3e0;
  --chip:#0a3d49; --chip-ink:#93a1a1; --chip-brd:#124956;
  --field:#073642; --field-brd:#124956;
  --shadow:rgba(0,0,0,.5); --shadow-2:rgba(0,0,0,.6);
  --overlay:rgba(0,20,26,.7); --ph:rgba(238,232,213,.14); --ribbon-bg:rgba(7,54,66,.9);
  --ok:#859900; --err:#dc322f;
}

/* ---- Forest (vert profond) ---- */
:root[data-theme="forest"] {
  --bg:#0f1a12; --surface:#16251a; --surface-2:#121f15; --alt:#1a2c1e;
  --line:#254230; --line-2:#1f3628;
  --text:#e2f0e4; --muted:#8fb097; --faint:#5c7a63;
  --accent:#5aab6a; --accent-grad:linear-gradient(140deg,#8fd49a,#5aab6a);
  --accent-ink:#7cc98a; --accent-soft:rgba(90,171,106,.14);
  --btn-ink:#0f1a12; --btn2-bg:#8fd49a; --btn2-ink:#0f1a12;
  --hot:#d99058; --hot-bg:rgba(217,144,88,.14); --hot-ink:#e6a877;
  --cold:#5a9bab; --cold-bg:rgba(90,155,171,.14); --cold-ink:#7cbcc9;
  --chip:#1a2c1e; --chip-ink:#8fb097; --chip-brd:#254230;
  --field:#16251a; --field-brd:#254230;
  --shadow:rgba(0,0,0,.5); --shadow-2:rgba(0,0,0,.6);
  --overlay:rgba(6,14,8,.7); --ph:rgba(226,240,228,.14); --ribbon-bg:rgba(22,37,26,.9);
  --ok:#7cc98a; --err:#e07a7a;
}

/* ---- Monochrome (gris neutre) ---- */
:root[data-theme="monochrome"] {
  --bg:#151515; --surface:#1e1e1e; --surface-2:#191919; --alt:#232323;
  --line:#2e2e2e; --line-2:#272727;
  --text:#eaeaea; --muted:#9a9a9a; --faint:#6a6a6a;
  --accent:#c0c0c0; --accent-grad:linear-gradient(140deg,#e0e0e0,#a0a0a0);
  --accent-ink:#d5d5d5; --accent-soft:rgba(200,200,200,.12);
  --btn-ink:#151515; --btn2-bg:#e0e0e0; --btn2-ink:#151515;
  --hot:#c98a6a; --hot-bg:rgba(201,138,106,.13); --hot-ink:#d8a488;
  --cold:#7f9db0; --cold-bg:rgba(127,157,176,.13); --cold-ink:#9db6c6;
  --chip:#232323; --chip-ink:#9a9a9a; --chip-brd:#2e2e2e;
  --field:#1e1e1e; --field-brd:#2e2e2e;
  --shadow:rgba(0,0,0,.6); --shadow-2:rgba(0,0,0,.7);
  --overlay:rgba(0,0,0,.65); --ph:rgba(234,234,234,.14); --ribbon-bg:rgba(30,30,30,.9);
  --ok:#9bbf8f; --err:#c98a8a;
}

/* ---- Pastel (clair très doux) ---- */
:root[data-theme="pastel"] {
  --bg:#fdf7fb; --surface:#ffffff; --surface-2:#faf1f6; --alt:#fbf3f8;
  --line:#f0e2ec; --line-2:#f5eaf1;
  --text:#5a5065; --muted:#a394ac; --faint:#c7bccd;
  --accent:#b8a4e0; --accent-grad:linear-gradient(140deg,#f7c6e0,#b8a4e0);
  --accent-ink:#9c84cf; --accent-soft:#f2e9f8;
  --btn-ink:#fff; --btn2-bg:#8fd9c9; --btn2-ink:#2f4a44;
  --hot:#f0a58c; --hot-bg:#fbe6dd; --hot-ink:#c9765a;
  --cold:#9cc6e0; --cold-bg:#e2eef7; --cold-ink:#5f8fb0;
  --chip:#f5eaf1; --chip-ink:#a394ac; --chip-brd:#f0e2ec;
  --field:#faf1f6; --field-brd:#f0e2ec;
  --shadow:rgba(184,164,224,.2); --shadow-2:rgba(90,80,101,.1);
  --overlay:rgba(90,80,101,.35); --ph:rgba(90,80,101,.12); --ribbon-bg:rgba(255,255,255,.92);
  --ok:#8fcf9e; --err:#e59a9a;
}

/* ---- UI du sélecteur de thème ---- */
.theme-picker { position: relative; }
.theme-btn { border: 1px solid var(--line); background: var(--surface); color: var(--text);
  width: 34px; height: 34px; border-radius: 10px; font-size: 15px; line-height: 1; }
.theme-menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 50;
  background: var(--surface); border: 1px solid var(--line); border-radius: 14px;
  box-shadow: 0 20px 50px -20px var(--shadow-2); padding: 8px; width: 210px;
  max-height: 60vh; overflow: auto; }
.theme-menu .grp { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--faint); padding: 8px 8px 4px; }
.theme-opt { display: flex; align-items: center; gap: 9px; width: 100%; border: none;
  background: transparent; color: var(--text); font: inherit; font-size: 13px;
  padding: 7px 8px; border-radius: 9px; text-align: left; }
.theme-opt:hover { background: var(--alt); }
.theme-opt.on { background: var(--accent-soft); color: var(--accent-ink); font-weight: 600; }
.theme-opt .sw { width: 15px; height: 15px; border-radius: 5px; flex: none;
  border: 1px solid var(--line-2); }
.theme-custom { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 8px; }
.theme-custom label { font-size: 11px; gap: 3px; }
.theme-custom input[type=color] { width: 100%; height: 28px; padding: 0; border-radius: 7px; }
.brand-img { border-radius: 7px; display: block; }
.theme-floating { position: fixed; top: 16px; right: 16px; z-index: 40; }

/* ---- Voir / masquer le mot de passe ---- */
.pw-wrap { position: relative; display: block; }
.pw-wrap input { width: 100%; padding-right: 40px; }
.pw-toggle { position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  border: none; background: transparent; font-size: 15px; line-height: 1;
  padding: 4px 6px; opacity: .7; }
.pw-toggle:hover { opacity: 1; }

/* ---- QR code d'enrôlement TOTP ---- */
.qr-box { width: 200px; margin: 4px auto 14px; background: #fff; padding: 10px;
  border-radius: 12px; border: 1px solid var(--line); }
.qr-box svg { width: 100%; height: auto; display: block; }
.qr-manual { margin-bottom: 14px; font-size: 13px; color: var(--muted); }
.qr-manual summary { cursor: pointer; }
.qr-manual code { user-select: all; word-break: break-all; }

/* ============================================================
   Refonte UX — dialogues maison, menu contextuel, visionneuse,
   menu profil, rubans tier, tri. (remplace les box natives)
   ============================================================ */

/* ---- Dialogues maison ---- */
.overlay { position: fixed; inset: 0; background: var(--overlay);
  display: flex; align-items: center; justify-content: center; z-index: 100;
  padding: 20px; animation: ycfade .12s ease; }
.ycdlg { background: var(--surface); border: 1px solid var(--line);
  border-radius: 18px; width: 100%; max-width: 420px; padding: 22px;
  box-shadow: 0 30px 80px -30px var(--shadow-2); animation: ycpop .16s ease; }
.ycdlg-title { font-family: var(--font-title); font-weight: 700; font-size: 17px; margin-bottom: 8px; }
.ycdlg-body { font-size: 13.5px; color: var(--muted); margin-bottom: 14px; }
.ycdlg-body p { margin: 0 0 8px; }
.ycdlg-field { display: block; font-size: 12.5px; font-weight: 600; color: var(--muted); margin-bottom: 12px; }
.ycdlg-field input { width: 100%; margin-top: 5px; background: var(--field);
  border: 1px solid var(--field-brd); border-radius: 10px; padding: 10px 12px;
  font-size: 14px; font-family: inherit; color: var(--text); }
.ycdlg-check { display: flex; align-items: center; gap: 9px; font-size: 13.5px;
  margin-bottom: 12px; cursor: pointer; }
.ycdlg-actions { display: flex; justify-content: flex-end; gap: 9px; margin-top: 6px; }
.btn-danger { background: var(--err); color: #fff; font-weight: 700; }

/* ---- Menu contextuel ---- */
.ycmenu { position: fixed; z-index: 200; min-width: 200px; padding: 6px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 13px;
  box-shadow: 0 22px 60px -22px var(--shadow-2); animation: ycpop .1s ease; }
.ycmenu-it { display: block; width: 100%; text-align: left; border: none;
  background: transparent; color: var(--text); font-size: 13px; font-weight: 500;
  padding: 9px 11px; border-radius: 9px; }
.ycmenu-it:hover:not([disabled]) { background: var(--alt); }
.ycmenu-it.danger { color: var(--err); }
.ycmenu-it[disabled] { opacity: .4; cursor: default; }
.ycmenu-sep { height: 1px; background: var(--line-2); margin: 5px 6px; }

/* ---- Menu profil ---- */
.profile-picker { position: relative; }
.profile-menu { position: absolute; right: 0; top: calc(100% + 8px); z-index: 60;
  width: 250px; padding: 8px; background: var(--surface); border: 1px solid var(--line);
  border-radius: 15px; box-shadow: 0 22px 60px -24px var(--shadow-2); animation: ycpop .12s ease; }
.profile-head { display: flex; align-items: center; gap: 11px; padding: 8px 8px 12px; }
.avatar-lg { width: 42px; height: 42px; font-size: 14px; }
.profile-name { font-family: var(--font-title); font-weight: 700; font-size: 14px; }
.profile-role { font-size: 12px; color: var(--muted); }
.profile-it { display: block; width: 100%; text-align: left; border: none;
  background: transparent; color: var(--text); font-size: 13px; font-weight: 500;
  padding: 10px 10px; border-radius: 10px; text-decoration: none; }
.profile-it:hover { background: var(--alt); opacity: 1; }
.profile-it.danger { color: var(--err); font-weight: 600; }
.profile-sep { height: 1px; background: var(--line-2); margin: 6px 4px; }

/* ---- Visionneuse ---- */
.viewer { background: var(--surface); border-radius: 16px; overflow: hidden;
  width: 100%; max-width: 1000px; max-height: 92vh; display: flex; flex-direction: column;
  box-shadow: 0 30px 90px -30px var(--shadow-2); animation: ycpop .16s ease; }
.viewer-head { display: flex; align-items: center; gap: 12px; padding: 12px 16px;
  border-bottom: 1px solid var(--line-2); }
.viewer-name { font-weight: 600; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.viewer-meta { font-size: 12px; color: var(--muted); margin-right: auto; white-space: nowrap; }
.viewer-body { flex: 1; overflow: auto; display: flex; align-items: center;
  justify-content: center; background: var(--alt); min-height: 200px; }
.viewer-body img, .viewer-body video { max-width: 100%; max-height: 84vh; display: block; }
.viewer-body audio { width: 90%; margin: 40px; }
.viewer-text { margin: 0; padding: 20px; width: 100%; height: 100%;
  font-family: var(--font-mono); font-size: 12.5px; line-height: 1.55;
  white-space: pre-wrap; word-break: break-word; color: var(--text); background: var(--surface); text-align: left; }
.modal-x { border: none; background: transparent; font-size: 22px; line-height: 1;
  color: var(--muted); padding: 2px 8px; border-radius: 8px; }
.modal-x:hover { background: var(--alt); color: var(--text); }

/* ---- Cartes galerie : miniatures, rubans, kebab ---- */
.fcard { position: relative; }
.fthumb.has-img { padding: 0; overflow: hidden; position: relative; }
.fthumb.has-img img, .fthumb.has-img video { width: 100%; height: 100%; object-fit: cover; display: block; }
.play-badge { position: absolute; inset: 0; margin: auto; width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center; padding-left: 3px;
  background: rgba(0,0,0,.48); color: #fff; border-radius: 50%; font-size: 15px; pointer-events: none; }
.ribbon { position: absolute; top: 8px; left: 8px; display: inline-flex; align-items: center;
  gap: 5px; font-size: 10.5px; font-weight: 700; padding: 3px 8px; border-radius: 999px;
  background: var(--ribbon-bg); backdrop-filter: blur(3px); }
.ribbon i { width: 7px; height: 7px; border-radius: 50%; }
.ribbon.hot { color: var(--hot-ink); } .ribbon.hot i { background: var(--hot); }
.ribbon.warm { color: var(--warm-ink); } .ribbon.warm i { background: var(--warm); }
.ribbon.cold { color: var(--cold-ink); } .ribbon.cold i { background: var(--cold); }
.kebab { position: absolute; top: 8px; right: 8px; width: 28px; height: 28px;
  border: none; border-radius: 8px; background: var(--ribbon-bg); backdrop-filter: blur(3px);
  color: var(--text); font-size: 16px; line-height: 1; opacity: 0; transition: opacity .12s; }
.fcard:hover .kebab { opacity: 1; }
.kebab:hover { background: var(--surface); }
.vchip { display: inline-block; font-size: 10px; font-weight: 700; color: var(--accent-ink);
  background: var(--accent-soft); border-radius: 5px; padding: 1px 5px; margin-right: 5px; }
.star-on { color: var(--accent); }

/* ---- En-têtes triables (Pro) ---- */
.ftable-head [data-sort] { cursor: pointer; user-select: none; }
.ftable-head [data-sort]:hover { color: var(--text); }
.ftable-head [data-sort].sorted { color: var(--accent-ink); font-weight: 700; }
.tier-pill { font-size: 11px; font-weight: 700; padding: 2px 9px; border-radius: 999px; }
.tier-pill.hot { color: var(--hot-ink); background: var(--hot-bg); }
.tier-pill.warm { color: var(--warm-ink); background: var(--warm-bg); }
.tier-pill.cold { color: var(--cold-ink); background: var(--cold-bg); }

/* ---- Zone de dépôt (drag & drop) ---- */
.content.dropping { outline: 2.5px dashed var(--accent); outline-offset: -10px;
  border-radius: 18px; background: var(--accent-soft); }

/* ---- Versioning : interrupteur dans la modale ---- */
.vtoggle { display: flex; align-items: center; gap: 8px; font-size: 12.5px;
  color: var(--muted); margin-top: 12px; }

/* ---- Avatar avec photo (topbar, menu profil, réglages) ---- */
.avatar.has-img { background-size: cover; background-position: center; color: transparent; }
.avatar-xl { width: 74px; height: 74px; font-size: 24px; border-radius: 50%; flex: none; }

/* ---- Carte profil (page Réglages) ---- */
.profile-card { background: var(--surface); border: 1px solid var(--line);
  border-radius: 16px; padding: 20px; margin: 8px 0 26px; max-width: 560px; }
.avatar-edit { display: flex; align-items: center; gap: 18px; margin-bottom: 18px; }
.avatar-actions { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.avatar-actions .lead { margin: 2px 0 0; font-size: 12px; }
.pf-grid { display: grid; gap: 12px; }
.pf-grid label { display: grid; gap: 5px; font-size: 12.5px; font-weight: 600; color: var(--muted); }
.pf-grid input { background: var(--field); border: 1px solid var(--field-brd);
  border-radius: 10px; padding: 10px 12px; font-size: 14px; font-family: inherit; color: var(--text); }
.pf-ro { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; color: var(--muted); }
.pf-grid button { justify-self: start; }

/* ---- Éditeur de texte ---- */
.editor { background: var(--surface); border-radius: 16px; overflow: hidden;
  width: 100%; max-width: 920px; height: 88vh; display: flex; flex-direction: column;
  box-shadow: 0 30px 90px -30px var(--shadow-2); animation: ycpop .16s ease; }

/* (W-A5) Mode « ouvert dans un onglet » : plus de fenêtre flottante, la
   visionneuse ou l'éditeur occupe tout l'écran. */
.overlay.full { padding: 0; background: var(--bg); }
.overlay.full .editor, .overlay.full .viewer {
  max-width: none; width: 100%; height: 100vh; height: 100dvh;
  border-radius: 0; box-shadow: none; animation: none;
}
.editor-body { flex: 1; overflow: hidden; display: flex; min-height: 0; }
.editor-area { flex: 1; width: 100%; border: none; resize: none; padding: 18px 20px;
  font-size: 13px; line-height: 1.6; background: var(--surface); color: var(--text);
  outline: none; tab-size: 2; }

/* ---- (W-A3) Coloration syntaxique ----
   Le <pre> coloré est posé SOUS un textarea au texte transparent : l'édition
   reste 100 % native (curseur, sélection, undo, dictée, mobile), seule la
   peinture est reprise. Les deux couches doivent avoir exactement la même
   métrique, sinon les lettres se décalent. */
.editor-code { position: relative; flex: 1; min-height: 0; display: flex; }
.editor-code > .editor-area, .editor-hl {
  padding: 18px 20px; font-family: var(--font-mono); font-size: 13px; line-height: 1.6;
  tab-size: 2; letter-spacing: normal; white-space: pre-wrap; overflow-wrap: break-word;
  word-break: normal;
}
.editor-hl {
  position: absolute; inset: 0; margin: 0; overflow: auto;
  pointer-events: none; color: var(--text); background: var(--surface);
}
.editor-hl code { font: inherit; background: none; padding: 0; }
.editor-code.hl > .editor-area {
  position: relative; z-index: 1; background: transparent;
  color: transparent; caret-color: var(--text);
}
/* Sans coloration (fichier trop gros ou langage inconnu) : le textarea reprend
   la main, la couche colorée est retirée du flux. */
.editor-code:not(.hl) .editor-hl { display: none; }

.hl-cmt  { color: var(--hl-cmt); font-style: italic; }
.hl-str  { color: var(--hl-str); }
.hl-num  { color: var(--hl-num); }
.hl-kw   { color: var(--hl-kw); font-weight: 600; }
.hl-fn   { color: var(--hl-fn); }
.hl-type { color: var(--hl-type); }
.hl-prop { color: var(--hl-prop); }
.hl-var  { color: var(--hl-var); }
.hl-meta { color: var(--hl-meta); }
.hl-op   { color: var(--hl-op); }
.hl-pun  { color: var(--hl-pun); }
.hl-ins  { color: var(--diff-add-ink); }
.hl-del  { color: var(--diff-del-ink); }
.editor-render { flex: 1; overflow: auto; padding: 18px 26px; }
/* (W-A4) Le rendu Markdown est éditable : on veut que ça se voie et que le
   curseur ait de la place, sans transformer la page en formulaire. */
.editor-render[contenteditable="true"] { outline: none; cursor: text; }
.editor-render[contenteditable="true"]:focus-visible { box-shadow: inset 0 0 0 2px var(--accent-soft); }
.md-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 4px;
  padding: 6px 14px; border-bottom: 1px solid var(--line-2); background: var(--surface-2); }
.md-tools button { min-width: 30px; height: 26px; padding: 0 7px; border-radius: 7px;
  border: 1px solid transparent; background: none; color: var(--muted);
  font-family: var(--font-mono); font-size: 12px; cursor: pointer; }
.md-tools button:hover { color: var(--text); border-color: var(--line); background: var(--surface); }
.md-tools-hint { margin-left: auto; font-size: 11px; color: var(--faint); }
.md-tools-hint code { font-family: var(--font-mono); font-size: 10.5px;
  background: var(--field); border-radius: 4px; padding: 1px 4px; }
@media (max-width: 760px) { .md-tools-hint { display: none; } }
.editor-foot { padding: 7px 16px; border-top: 1px solid var(--line-2); min-height: 30px; }
.md-body { line-height: 1.6; }
.md-body h1, .md-body h2, .md-body h3 { font-family: var(--font-title); margin: .8em 0 .4em; }
.md-body h1 { font-size: 24px; } .md-body h2 { font-size: 20px; } .md-body h3 { font-size: 17px; }
.md-body p { margin: .5em 0; }
.md-body code { font-family: var(--font-mono); font-size: .9em; background: var(--field);
  padding: 1px 5px; border-radius: 5px; }
.md-body pre, .md-code { font-family: var(--font-mono); font-size: 12.5px; background: var(--field);
  border: 1px solid var(--field-brd); border-radius: 10px; padding: 12px 14px; overflow-x: auto; white-space: pre; }
.md-body pre code { background: none; padding: 0; }
.md-body blockquote { border-left: 3px solid var(--accent); margin: .6em 0; padding: .1em 0 .1em 14px; color: var(--muted); }
.md-body ul, .md-body ol { padding-left: 22px; margin: .5em 0; }
.md-body a { color: var(--accent-ink); }
.md-body hr { border: none; border-top: 1px solid var(--line); margin: 1em 0; }

/* ---- Admin : stats + actions ---- */
.admin-stats { margin: 18px 0 26px; }
.admin-stats-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.admin-stats-head h2 { margin: 0; }
.stat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; }
.stat-card { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; }
.stat-val { font-family: var(--font-display); font-size: 20px; font-weight: 800; color: var(--accent-ink); }
.stat-lbl { font-size: 11.5px; color: var(--muted); margin-top: 3px; }
.stat-hint { font-size: 10.5px; color: var(--faint); margin-top: 2px; line-height: 1.3; }
.row-actions { display: flex; gap: 5px; flex-wrap: wrap; }
.row-actions button { font-size: 12px; padding: 5px 9px; border: 1px solid var(--line);
  background: var(--surface); color: var(--text); border-radius: 8px; }
.row-actions button:hover { background: var(--alt); }

/* ---- Sélecteur de durée (liens temporaires) ---- */
.dur-presets { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 10px; }
.dur-chip { border: 1px solid var(--line); background: var(--surface); color: var(--text);
  font-size: 12.5px; padding: 6px 11px; border-radius: 999px; }
.dur-chip.on { background: var(--accent-grad); color: var(--btn-ink); border-color: transparent; font-weight: 600; }
.dur-custom { display: flex; gap: 8px; margin-bottom: 8px; }
.dur-custom label { flex: 1; display: grid; gap: 3px; font-size: 11px; color: var(--muted); }
.dur-custom input { background: var(--field); border: 1px solid var(--field-brd);
  border-radius: 8px; padding: 7px 8px; font-size: 13px; color: var(--text); font-family: inherit; }
.dur-info { font-size: 13px; color: var(--muted); margin-bottom: 12px; }
.dur-info b { color: var(--accent-ink); }
.ed-auto { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--muted); }

/* ---- Multi-sélection ---- */
.fcard.selected, .frow.selected { outline: 2px solid var(--accent); outline-offset: -2px; background: var(--accent-soft); }
.fcard { cursor: pointer; }
.bulkbar { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); z-index: 80;
  display: flex; align-items: center; gap: 10px; padding: 8px 10px 8px 14px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 14px;
  box-shadow: 0 18px 50px -20px var(--shadow-2); animation: ycpop .12s ease; flex-wrap: wrap; }
.bulk-n { font-size: 13px; font-weight: 600; }

/* ---- Glisser-déposer interne (W-B1) ---- */
.fcard.dragging, .frow.dragging { opacity: .45; }
.fcard.drop-target, .frow.drop-target {
  outline: 2.5px solid var(--accent); outline-offset: -2px;
  background: var(--accent-soft); box-shadow: 0 0 0 4px var(--accent-soft);
}
.crumb.drop-target {
  outline: 2px dashed var(--accent); outline-offset: 3px;
  border-radius: 8px; background: var(--accent-soft);
}
/* Le fil d'Ariane doit rester une cible atteignable même vide. */
.crumb { min-height: 22px; padding: 2px 4px; }

/* ---- (W-A15) Remplacement des émojis décoratifs ---- */
.theme-swatch {
  display: block; width: 15px; height: 15px; border-radius: 50%;
  background: var(--accent-grad); border: 1px solid var(--line-2);
}
.pw-toggle svg { display: block; }
.play-badge {
  /* Triangle dessiné en CSS : pas de dépendance à une police. */
  width: 0; height: 0; border-style: solid; border-width: 9px 0 9px 15px;
  border-color: transparent transparent transparent #fff;
  background: none; margin-left: 4px;
}
/* (W-A11) Tant que la vignette n'est pas hydratée, la tuile montre juste
   l'extension : le triangle n'a de sens qu'au-dessus d'une vraie image. */
.fthumb .play-badge { display: none; }
.fthumb.has-img .play-badge {
  display: block; position: absolute; inset: 0; margin: auto;
  filter: drop-shadow(0 1px 3px rgba(0,0,0,.6));
}
.fp-ico {
  display: inline-block; width: 13px; height: 11px; margin-right: 8px;
  background: var(--accent-soft); border: 1px solid var(--accent);
  border-radius: 2px 3px 3px 3px; flex: none;
}
.fp-row { display: flex; align-items: center; }

/* ---- (W-A1) Dialogue de partage unifié ---- */
.ycdlg-wide { max-width: 520px; }
.sh-tabs { margin: 6px 0 16px; }
.sh-tabs button { font-size: 13px; padding: 8px 12px; }
.ycdlg-warn {
  background: var(--hot-bg); color: var(--hot-ink);
  border: 1px solid var(--hot); border-radius: 11px;
  padding: 12px 14px; font-size: 13px; line-height: 1.5; margin-bottom: 14px;
}
.ycdlg-warn b { display: block; margin-bottom: 4px; }
.sh-mode select {
  width: 100%; margin-top: 5px; background: var(--field);
  border: 1px solid var(--field-brd); border-radius: 10px; padding: 9px 11px;
  font-size: 13px; font-family: inherit; color: var(--text);
}
.link-out { display: flex; gap: 8px; margin-bottom: 14px; }
.link-out input {
  flex: 1; min-width: 0; background: var(--field); border: 1px solid var(--field-brd);
  border-radius: 10px; padding: 10px 12px; font-family: var(--font-mono);
  font-size: 12.5px; color: var(--text);
}

/* ---- (W-A2) Page Liens ---- */
.lk-badge { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; }
.lk-badge.temp { color: var(--cold-ink); background: var(--cold-bg); }
.lk-badge.perm { color: var(--hot-ink); background: var(--hot-bg); }
.lk-state { font-size: 12px; font-weight: 600; }
.lk-state.on { color: var(--ok); }
.lk-state.off { color: var(--muted); }

/* ---- Bannière « domaine de stockage » (+ sonde d'accès) ---- */
.storage-banner {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  background: var(--cold-bg); border: 1px solid var(--cold);
  color: var(--cold-ink); border-radius: 12px;
  padding: 11px 14px; margin-bottom: 14px; font-size: 13px; line-height: 1.5;
}
.storage-banner button { margin-left: auto; }
.storage-banner code { font-family: var(--font-mono); font-size: 12px; }
.sb-probe { display: block; margin-top: 4px; font-size: 12px; opacity: .85; }
.sb-probe.ok { color: var(--ok); }
.sb-probe.ko { color: var(--err); font-weight: 600; }

/* ---- (W-A6) Comparaison de versions ---- */
.vdiff { margin: 12px 0; font-size: 12.5px; }
.vdiff-note { color: var(--muted); line-height: 1.5; margin: 0; }
.vdiff-note a { margin-left: 4px; }
.hunk {
  font-family: var(--font-mono); font-size: 12px; line-height: 1.5;
  border: 1px solid var(--line); border-radius: 10px; overflow: hidden;
  margin-bottom: 10px; max-height: 320px; overflow-y: auto;
}
.dl { padding: 1px 10px; white-space: pre-wrap; word-break: break-word; }
.dl.ctx { color: var(--muted); background: var(--surface); }
.dl.del { background: var(--diff-del-bg); color: var(--diff-del-ink); }
.dl.add { background: var(--diff-add-bg); color: var(--diff-add-ink); }
.vdiff-visual { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.vdiff-visual figure { margin: 0; text-align: center; }
.vdiff-visual img {
  max-width: 100%; max-height: 240px; border-radius: 10px;
  border: 1px solid var(--line); background: var(--alt);
}
.vdiff-visual figcaption { font-size: 11.5px; color: var(--muted); margin-top: 5px; }

/* ---- (W-A12) Aperçu PDF ---- */
.viewer-pdf { width: 100%; height: 80vh; border: 0; background: #fff; display: block; }

/* ---- (W-A10) Tri exposé en haut ---- */
.sortbar { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--muted); }
.sortbar select {
  background: var(--surface); border: 1px solid var(--line); border-radius: 10px;
  padding: 7px 10px; font-size: 12.5px; font-family: inherit; color: var(--text);
}
.sort-dir {
  border: 1px solid var(--line); background: var(--surface); color: var(--text);
  border-radius: 10px; width: 32px; height: 32px; font-size: 14px; line-height: 1;
}
.sort-dir:hover { background: var(--alt); }

/* ---- Zone d'interaction pleine hauteur ----
   La grille ne faisait que la hauteur de son contenu : clic droit, lasso et
   dépôt ne fonctionnaient que sur la ligne où se trouvaient des éléments, et
   pas dans le vide en dessous. On étire donc les conteneurs jusqu'au bas de la
   fenêtre pour que TOUTE la zone réponde. */
#view-gallery, #view-pro { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
.fgrid { flex: 1 1 auto; align-content: flex-start; min-height: 60vh; }
.pro-wrap { flex: 1 1 auto; min-height: 0; }
.pro-main { display: flex; flex-direction: column; min-height: 0; }
#rows { flex: 1 1 auto; min-height: 55vh; }
/* La zone de contenu occupe le reste de la page (dépôt de fichiers compris). */
.content { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
body { display: flex; flex-direction: column; }

/* ---- Sélection au lasso (W-B2) ---- */
.lasso {
  position: fixed; z-index: 70; pointer-events: none;
  border: 1px solid var(--accent);
  background: var(--accent-soft); opacity: .55; border-radius: 3px;
}
/* Pendant un lasso, on évite la sélection de texte parasite. */
.fgrid, #rows { user-select: none; }

/* ---- Sélecteur de dossier (déplacement) ---- */
.fp-crumb { font-size: 12px; color: var(--muted); margin-bottom: 8px; }
.fp-list { max-height: 260px; overflow-y: auto; border: 1px solid var(--line);
  border-radius: 10px; padding: 6px; margin-bottom: 12px; display: flex; flex-direction: column; gap: 2px; }
.fp-row { display: block; width: 100%; text-align: left; border: none; background: transparent;
  color: var(--text); font-size: 13px; padding: 8px 10px; border-radius: 8px; }
.fp-row:hover { background: var(--alt); }

/* ---- Sous-onglets (Réglages, etc.) ---- */
.subtabs { display: flex; gap: 4px; flex-wrap: wrap; margin: 14px 0 22px;
  border-bottom: 1px solid var(--line-2); }
.subtabs button { border: none; background: transparent; color: var(--muted);
  font-family: var(--font-title); font-size: 14px; font-weight: 500; padding: 10px 14px;
  border-bottom: 2px solid transparent; margin-bottom: -1px; }
.subtabs button.on { color: var(--text); border-bottom-color: var(--accent); }
.subtabs button:hover { color: var(--text); }

/* ---- Admin : niveau tiède ---- */
.admin-warm { margin: 0 0 26px; }
.warm-ctl { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 10px 0; }
.warm-ctl input[type=range] { flex: 1; min-width: 160px; max-width: 300px; accent-color: var(--accent); }
.warm-lbl { font-size: 13px; font-weight: 600; color: var(--accent-ink); }

/* ============================================================================
   (W-A14) Finitions tactiles / petits écrans.

   Placé en toute fin de fichier À DESSEIN : ces règles doivent l'emporter sur
   les définitions de base, qui apparaissent plus haut à spécificité égale.
   ========================================================================== */
@media (max-width: 760px) {
  /* Sur un téléphone, une « fenêtre » flottante ne sert à rien : la
     visionneuse et l'éditeur prennent tout l'écran. */
  .viewer, .editor {
    max-width: none; width: 100%; height: 100vh; height: 100dvh;
    border-radius: 0; box-shadow: none;
  }
  .overlay { padding: 0; }
  /* Les dialogues remontent du bas, comme les feuilles natives. */
  .ycdlg { width: 100%; max-width: none; border-radius: 16px 16px 0 0; margin-top: auto; }
  .bulkbar { left: 8px; right: 8px; transform: none; flex-wrap: wrap; justify-content: center; }
  .viewer-head { flex-wrap: wrap; row-gap: 6px; }
  .md-tools { overflow-x: auto; flex-wrap: nowrap; }
}

/* Doigt plutôt que souris : cibles plus hautes, et surtout aucune sélection
   de texte ni menu système sur appui long — c'est NOTRE menu qui s'ouvre. */
@media (pointer: coarse) {
  .ycmenu { min-width: 220px; }
  .ycmenu-it { min-height: 42px; font-size: 14px; }
  .btn-sm { min-height: 36px; }
  .fcard, .frow {
    -webkit-touch-callout: none;
    -webkit-user-select: none; user-select: none;
  }
  .kebab { min-width: 38px; min-height: 38px; }
}

/* ============================================================================
   PASSE « DYNAMIQUE » — couleurs, tags, média, animations, easter eggs.
   Placé en fin de fichier : ces règles doivent l'emporter sur les définitions
   de base, à spécificité égale.
   ========================================================================== */

/* ---- Couleurs d'organisation ----
   Un NOM est stocké côté serveur, chaque thème choisit sa nuance ici. Aucune
   couleur par défaut : l'apparence ne change que si l'utilisateur le demande. */
:root {
  --c-rouge:#e0685f; --c-orange:#e08a4a; --c-jaune:#d8b83f; --c-vert:#5aa871;
  --c-turquoise:#3fa8a0; --c-bleu:#5b8fd0; --c-violet:#9174d4;
  --c-rose:#d76ba4; --c-gris:#8f8a96;
}
.col-rouge { --col: var(--c-rouge); } .col-orange { --col: var(--c-orange); }
.col-jaune { --col: var(--c-jaune); } .col-vert { --col: var(--c-vert); }
.col-turquoise { --col: var(--c-turquoise); } .col-bleu { --col: var(--c-bleu); }
.col-violet { --col: var(--c-violet); } .col-rose { --col: var(--c-rose); }
.col-gris { --col: var(--c-gris); }

.fcard[class*="col-"] { border-color: color-mix(in srgb, var(--col) 55%, var(--line)); }
.fcard[class*="col-"] .fthumb.t-folder { background: color-mix(in srgb, var(--col) 26%, transparent); }
.fcard[class*="col-"] .folder-ico { color: var(--col); }
.frow[class*="col-"] { border-left-color: var(--col); }
.frow[class*="col-"] .ficon { border-color: color-mix(in srgb, var(--col) 60%, var(--chip-brd));
  background: color-mix(in srgb, var(--col) 18%, var(--chip)); color: var(--col); }
/* Repli si color-mix n'est pas supporté : on garde au moins la teinte. */
@supports not (color: color-mix(in srgb, red 50%, blue)) {
  .fcard[class*="col-"] { border-color: var(--col); }
  .frow[class*="col-"] .ficon { color: var(--col); border-color: var(--col); }
}

/* ---- Tags ---- */
.ftags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.ftag { font-size: 10.5px; padding: 1px 7px; border-radius: 999px;
  background: var(--chip); color: var(--chip-ink); border: 1px solid var(--chip-brd); }
.ftag.more { opacity: .7; }
.tag-cloud { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 10px; }
.tag-chip { display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  font-size: 12px; padding: 4px 9px; border-radius: 999px; background: var(--field);
  border: 1px solid var(--field-brd); color: var(--text);
  transition: border-color .15s ease, transform .12s ease; }
.tag-chip:hover { border-color: var(--accent); transform: translateY(-1px); }
.tag-chip span { font-family: var(--font-mono); font-size: 10px; color: var(--faint); }

/* ---- Menus : sous-menus, pastilles, apparition ---- */
/* Le menu doit paraître INSTANTANÉ : au clic droit, la moindre animation se
   ressent comme une latence. On garde juste un fondu de 70 ms, sans
   déplacement (une translation trahit encore plus l'attente). */
.ycmenu { opacity: 0; transition: opacity .07s linear; }
.ycmenu.in { opacity: 1; }
.ycmenu-it { display: flex; align-items: center; gap: 9px; width: 100%; }
.ycmenu-it > span { flex: 1; text-align: left; }
.ycmenu-arrow { font-size: 15px; line-height: 1; color: var(--faint); }
.ycmenu-it.has-sub:hover .ycmenu-arrow { color: var(--text); }
.ycmenu-it.checked > span::after { content: " OK"; color: var(--accent-ink); font-weight: 700; font-size: 10px; }
.ycmenu-sw { width: 12px; height: 12px; border-radius: 4px; flex: none;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.15); }
.ycmenu.nested { z-index: 200; }

/* ---- Bouton scindé (import) ---- */
.splitbtn { position: relative; display: inline-flex; align-items: stretch; }
.splitbtn > .upload-btn { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.splitbtn .split-more { padding: 0 9px; border-top-left-radius: 0; border-bottom-left-radius: 0;
  margin-left: 1px; font-size: 11px; }
.splitbtn .split-menu { position: absolute; top: calc(100% + 6px); right: 0; z-index: 90;
  min-width: 210px; background: var(--surface); border: 1px solid var(--line);
  border-radius: 12px; padding: 6px; box-shadow: 0 18px 40px -18px var(--shadow-2);
  animation: ycpop .14s ease; }
.split-it { display: block; padding: 9px 11px; border-radius: 8px; font-size: 13px;
  cursor: pointer; color: var(--text); transition: background .12s ease; }
.split-it:hover { background: var(--alt); }

/* ---- Aperçus : pixels respectés, tailles normalisées ---- */
.fthumb.has-img img, .fthumb.has-img video { opacity: 0; transition: opacity .22s ease; }
.fthumb.has-img img.ready, .fthumb.has-img video { opacity: 1; }
/* Petites images (pixel art, icônes) : agrandissement NET, jamais interpolé,
   et cadrage « contain » pour ne rien rogner. */
.fthumb.has-img img.px-art {
  image-rendering: pixelated; object-fit: contain;
  background: repeating-conic-gradient(var(--alt) 0% 25%, transparent 0% 50%) 50%/16px 16px;
}
.viewer-img { max-width: 100%; max-height: 100%; object-fit: contain;
  /* Une image minuscule doit rester VISIBLE : on lui garantit une taille
     d'affichage minimale, sans jamais déborder du cadre. */
  min-width: min(240px, 100%); min-height: min(240px, 100%); }
.viewer-img.px-art { image-rendering: pixelated; }

/* ---- Média : boucle, raccourcis, visualiseur audio ---- */
.viewer-loop { max-width: 100%; max-height: 100%; }
.loop-badge { position: absolute; top: 14px; right: 16px; z-index: 3;
  font-size: 15px; line-height: 1; padding: 4px 9px; border-radius: 999px;
  background: var(--ribbon-bg); color: var(--accent-ink); font-weight: 700; }
.viewer-body { position: relative; }
.media-flash { position: absolute; inset: auto 0 auto 0; top: 50%; z-index: 5;
  margin: 0 auto; width: fit-content; padding: 10px 18px; border-radius: 14px;
  background: rgba(0,0,0,.62); color: #fff; font-family: var(--font-mono);
  font-size: 18px; font-weight: 600; opacity: 0; pointer-events: none;
  transform: translateY(-50%) scale(.9); }
.media-flash.on { animation: mediaFlash .7s ease forwards; }
@keyframes mediaFlash {
  0% { opacity: 0; transform: translateY(-50%) scale(.9); }
  18% { opacity: 1; transform: translateY(-50%) scale(1); }
  100% { opacity: 0; transform: translateY(-50%) scale(1.04); }
}
.audio-wrap { display: flex; flex-direction: column; align-items: center; gap: 16px;
  width: 100%; max-width: 940px; padding: 20px; }
.audio-viz { width: 100%; max-width: 900px; height: auto; color: var(--accent); }
.audio-title { font-family: var(--font-title); font-size: 16px; font-weight: 600;
  text-align: center; word-break: break-word; }
.audio-wrap audio { width: 100%; max-width: 620px; }
#yc-pip-host { position: fixed; width: 1px; height: 1px; overflow: hidden;
  opacity: 0; pointer-events: none; left: -9999px; }
.pip-resume { position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%);
  z-index: 120; display: flex; align-items: center; gap: 10px; padding: 10px 14px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 14px;
  box-shadow: 0 20px 50px -22px var(--shadow-2); font-size: 13px;
  animation: ycslide .2s cubic-bezier(.2,.8,.2,1); }

/* ---- Annulation ---- */
.undohint { margin: 0 0 10px; font-size: 12px; color: var(--faint); }

/* ---- Réglages : lignes compactes ---- */
.setline { margin: 18px 0 6px; }
.sel-sm { width: auto; min-width: 130px; max-width: 190px; }

/* ---- Photo de profil cliquable ---- */
.avatar-hit { position: relative; display: inline-block; cursor: pointer; }
.avatar-hit .avatar-pen { position: absolute; right: -2px; bottom: -2px;
  width: 26px; height: 26px; border-radius: 50%; background: var(--accent);
  border: 2px solid var(--surface); display: grid; place-items: center;
  transition: transform .14s ease; }
/* Crayon dessiné en CSS : aucune police d'icônes à charger. */
.avatar-hit .avatar-pen::before { content: ""; width: 11px; height: 2.5px;
  background: var(--btn-ink); transform: rotate(-45deg); border-radius: 1px; }
.avatar-hit:hover .avatar-pen { transform: scale(1.12); }
.avatar-hit:hover .avatar { filter: brightness(.92); }

/* ---- Le chat ---- */
.yc-cat { position: fixed; right: 26px; bottom: 22px; z-index: 300;
  color: var(--accent); opacity: 0; transform: translateY(24px) rotate(-4deg);
  transition: opacity .3s ease, transform .35s cubic-bezier(.2,.9,.2,1);
  pointer-events: none; filter: drop-shadow(0 12px 24px var(--shadow)); }
.yc-cat.in { opacity: 1; transform: none; }
.yc-cat .pupil { fill: var(--text); animation: catBlink 2.4s ease-in-out infinite; }
@keyframes catBlink { 0%, 92%, 100% { opacity: 1; } 96% { opacity: .15; } }
.cat-bubble { position: absolute; top: -6px; left: -46px; padding: 5px 11px;
  border-radius: 12px 12px 2px 12px; background: var(--surface);
  border: 1px solid var(--line); color: var(--text); font-size: 12px;
  font-family: var(--font-mono); animation: catSay 2.4s ease both; }
@keyframes catSay { 0% { opacity: 0; transform: scale(.7); } 12% { opacity: 1; transform: none; }
  84% { opacity: 1; } 100% { opacity: 0; } }

/* ---- Thèmes secrets ---- */
.grp-secret { color: var(--accent-ink); letter-spacing: .12em; }
.theme-menu.reveal { animation: reveal .8s ease; }
@keyframes reveal {
  0% { box-shadow: 0 0 0 0 var(--accent); }
  40% { box-shadow: 0 0 0 6px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}

/* ============================================================================
   Animations générales.
   Toutes désactivées si le système demande moins de mouvement — ce n'est pas
   une préférence esthétique, certaines personnes en ont besoin.
   ========================================================================== */
@keyframes ycslide { from { opacity: 0; transform: translate(-50%, 12px); }
  to { opacity: 1; transform: translate(-50%, 0); } }
@keyframes ycrow { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.fcard { transition: transform .16s cubic-bezier(.2,.8,.2,1), box-shadow .16s ease,
  border-color .16s ease, background .16s ease; }
.fcard:hover { transform: translateY(-3px); box-shadow: 0 18px 36px -22px var(--shadow); }
.fcard:active { transform: translateY(-1px) scale(.995); }
.frow { transition: background .13s ease, border-left-color .16s ease, transform .13s ease;
  animation: ycrow .2s ease both; }
.frow:hover { background: var(--alt); }
.btn { transition: transform .12s ease, background .15s ease, border-color .15s ease, color .15s ease; }
.btn:active { transform: scale(.97); }
.pillnav button, .subtabs button, .seg button { transition: color .15s ease, background .15s ease; }
.tier-pill, .ribbon, .ftag { transition: background .18s ease, color .18s ease; }

/* Cases à cocher : l'apparence système est incohérente d'un navigateur à
   l'autre, on l'harmonise sans réinventer le comportement. */
input[type="checkbox"] {
  appearance: none; width: 17px; height: 17px; flex: none; border-radius: 5px;
  border: 1.5px solid var(--field-brd); background: var(--surface);
  display: inline-grid; place-content: center; cursor: pointer; vertical-align: -3px;
  transition: background .14s ease, border-color .14s ease;
}
input[type="checkbox"]::before {
  content: ""; width: 10px; height: 10px; transform: scale(0);
  transition: transform .14s cubic-bezier(.2,1.3,.4,1);
  background: var(--btn-ink);
  clip-path: polygon(14% 47%, 0 61%, 40% 100%, 100% 22%, 86% 8%, 39% 71%);
}
input[type="checkbox"]:checked { background: var(--accent); border-color: var(--accent); }
input[type="checkbox"]:checked::before { transform: scale(1); }
input[type="checkbox"]:disabled { opacity: .5; cursor: not-allowed; }
input[type="checkbox"]:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
input[type="range"] { accent-color: var(--accent); }

.overlay { animation: fadeIn .16s ease; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.ycdlg { animation: ycpop .18s cubic-bezier(.2,.9,.2,1); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms; animation-iteration-count: 1;
    transition-duration: .001ms; scroll-behavior: auto;
  }
}

/* ---- (W-E1) Fil d'Ariane, avec repère « on est dans une archive » ---- */
.crumb { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.crumb-it { color: var(--muted); text-decoration: none; padding: 2px 6px;
  border-radius: 7px; transition: background .13s ease, color .13s ease; }
.crumb-it:hover { color: var(--text); background: var(--alt); }
.crumb-it.on { color: var(--text); font-weight: 600; }
.crumb-sep { color: var(--faint); }
/* Une archive n'est PAS un dossier : le segment le dit visuellement. */
.crumb-it.is-archive { color: var(--warm-ink); background: var(--warm-bg); }
.crumb-zip { display: inline-block; width: 9px; height: 11px; margin-right: 6px;
  vertical-align: -1px; border-radius: 2px; background: currentColor;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  box-shadow: inset 0 0 0 1px var(--surface);
  background-image: repeating-linear-gradient(var(--surface) 0 1px, transparent 1px 3px);
  background-position: 50%; background-size: 3px 100%; background-repeat: no-repeat; }

/* ---- Compr. : distinguer « rien à gagner » de « 0 % mesuré » ---- */
.gain.none { color: var(--faint); cursor: help; }

/* ---- Vignette d'archive ---- */
.t-archive .ext { color: var(--warm-ink); }

/* ============================================================================
   RAYON CACHÉ — 10 thèmes complets.

   Chacun redéfinit l'INTÉGRALITÉ des jetons, warm et diff compris : n'en
   déclarer qu'une partie laisse les autres retomber sur le thème clair de
   `:root`, et l'on obtient un thème « sombre » avec des pastilles claires.
   C'était exactement le défaut de la première version.
   ========================================================================== */

/* ---- Tokyo Night ---- */
:root[data-theme="tokyo"] {
  --bg:#1a1b26; --surface:#24283b; --surface-2:#1f2335; --alt:#292e42;
  --line:#3b4261; --line-2:#32374d;
  --text:#c0caf5; --muted:#9aa5ce; --faint:#565f89;
  --accent:#7aa2f7; --accent-grad:linear-gradient(140deg,#bb9af7,#7aa2f7);
  --accent-ink:#9eb8ff; --accent-soft:rgba(122,162,247,.15);
  --btn-ink:#1a1b26; --btn2-bg:#7aa2f7; --btn2-ink:#1a1b26;
  --hot:#ff9e64; --hot-bg:rgba(255,158,100,.15); --hot-ink:#ffb389;
  --warm:#e0af68; --warm-bg:rgba(224,175,104,.15); --warm-ink:#eec27f;
  --cold:#7dcfff; --cold-bg:rgba(125,207,255,.15); --cold-ink:#9adcff;
  --chip:#292e42; --chip-ink:#9aa5ce; --chip-brd:#3b4261;
  --field:#1f2335; --field-brd:#3b4261;
  --shadow:rgba(0,0,0,.55); --shadow-2:rgba(0,0,0,.65);
  --diff-add-bg:rgba(158,206,106,.14); --diff-add-ink:#9ece6a;
  --diff-del-bg:rgba(247,118,142,.14); --diff-del-ink:#f7768e;
  --overlay:rgba(13,14,22,.7); --ph:rgba(192,202,245,.16); --ribbon-bg:rgba(36,40,59,.9);
  --ok:#9ece6a; --err:#f7768e;
}

/* ---- Nord ---- */
:root[data-theme="nord"] {
  --bg:#2e3440; --surface:#3b4252; --surface-2:#343b48; --alt:#434c5e;
  --line:#4c566a; --line-2:#434c5e;
  --text:#eceff4; --muted:#b9c0cb; --faint:#7b8494;
  --accent:#88c0d0; --accent-grad:linear-gradient(140deg,#8fbcbb,#88c0d0);
  --accent-ink:#a3d4e2; --accent-soft:rgba(136,192,208,.16);
  --btn-ink:#2e3440; --btn2-bg:#88c0d0; --btn2-ink:#2e3440;
  --hot:#d08770; --hot-bg:rgba(208,135,112,.16); --hot-ink:#e0a08c;
  --warm:#ebcb8b; --warm-bg:rgba(235,203,139,.16); --warm-ink:#f0d6a3;
  --cold:#81a1c1; --cold-bg:rgba(129,161,193,.16); --cold-ink:#9db9d6;
  --chip:#434c5e; --chip-ink:#b9c0cb; --chip-brd:#4c566a;
  --field:#343b48; --field-brd:#4c566a;
  --shadow:rgba(0,0,0,.5); --shadow-2:rgba(0,0,0,.6);
  --diff-add-bg:rgba(163,190,140,.15); --diff-add-ink:#a3be8c;
  --diff-del-bg:rgba(191,97,106,.15); --diff-del-ink:#bf616a;
  --overlay:rgba(26,30,38,.68); --ph:rgba(236,239,244,.16); --ribbon-bg:rgba(59,66,82,.9);
  --ok:#a3be8c; --err:#bf616a;
}

/* ---- Gruvbox ---- */
:root[data-theme="gruvbox"] {
  --bg:#282828; --surface:#32302f; --surface-2:#2c2b2a; --alt:#3c3836;
  --line:#504945; --line-2:#45403d;
  --text:#ebdbb2; --muted:#bdae93; --faint:#928374;
  --accent:#d79921; --accent-grad:linear-gradient(140deg,#fabd2f,#d79921);
  --accent-ink:#fabd2f; --accent-soft:rgba(215,153,33,.17);
  --btn-ink:#282828; --btn2-bg:#fabd2f; --btn2-ink:#282828;
  --hot:#fe8019; --hot-bg:rgba(254,128,25,.16); --hot-ink:#fe9a4a;
  --warm:#d79921; --warm-bg:rgba(215,153,33,.16); --warm-ink:#e5b043;
  --cold:#83a598; --cold-bg:rgba(131,165,152,.16); --cold-ink:#9dbcae;
  --chip:#3c3836; --chip-ink:#bdae93; --chip-brd:#504945;
  --field:#32302f; --field-brd:#504945;
  --shadow:rgba(0,0,0,.55); --shadow-2:rgba(0,0,0,.65);
  --diff-add-bg:rgba(184,187,38,.14); --diff-add-ink:#b8bb26;
  --diff-del-bg:rgba(251,73,52,.14); --diff-del-ink:#fb4934;
  --overlay:rgba(20,20,20,.7); --ph:rgba(235,219,178,.16); --ribbon-bg:rgba(50,48,47,.9);
  --ok:#b8bb26; --err:#fb4934;
}

/* ---- Rosé Pine ---- */
:root[data-theme="rosepine"] {
  --bg:#191724; --surface:#1f1d2e; --surface-2:#1a1826; --alt:#26233a;
  --line:#403d52; --line-2:#332f4a;
  --text:#e0def4; --muted:#a8a3c4; --faint:#6e6a86;
  --accent:#c4a7e7; --accent-grad:linear-gradient(140deg,#ebbcba,#c4a7e7);
  --accent-ink:#d5bff0; --accent-soft:rgba(196,167,231,.16);
  --btn-ink:#191724; --btn2-bg:#c4a7e7; --btn2-ink:#191724;
  --hot:#eb6f92; --hot-bg:rgba(235,111,146,.16); --hot-ink:#f08cab;
  --warm:#f6c177; --warm-bg:rgba(246,193,119,.16); --warm-ink:#f9d197;
  --cold:#9ccfd8; --cold-bg:rgba(156,207,216,.16); --cold-ink:#b4dde4;
  --chip:#26233a; --chip-ink:#a8a3c4; --chip-brd:#403d52;
  --field:#1f1d2e; --field-brd:#403d52;
  --shadow:rgba(0,0,0,.55); --shadow-2:rgba(0,0,0,.68);
  --diff-add-bg:rgba(49,116,143,.18); --diff-add-ink:#9ccfd8;
  --diff-del-bg:rgba(235,111,146,.16); --diff-del-ink:#eb6f92;
  --overlay:rgba(12,10,20,.72); --ph:rgba(224,222,244,.16); --ribbon-bg:rgba(31,29,46,.92);
  --ok:#9ccfd8; --err:#eb6f92;
}

/* ---- Catppuccin (Mocha) ---- */
:root[data-theme="catppuccin"] {
  --bg:#1e1e2e; --surface:#282a3c; --surface-2:#232436; --alt:#313244;
  --line:#45475a; --line-2:#3a3c50;
  --text:#cdd6f4; --muted:#a6adc8; --faint:#7f849c;
  --accent:#cba6f7; --accent-grad:linear-gradient(140deg,#f5c2e7,#cba6f7);
  --accent-ink:#dcbdfb; --accent-soft:rgba(203,166,247,.16);
  --btn-ink:#1e1e2e; --btn2-bg:#cba6f7; --btn2-ink:#1e1e2e;
  --hot:#fab387; --hot-bg:rgba(250,179,135,.16); --hot-ink:#fcc7a6;
  --warm:#f9e2af; --warm-bg:rgba(249,226,175,.16); --warm-ink:#fbeac6;
  --cold:#89dceb; --cold-bg:rgba(137,220,235,.16); --cold-ink:#a6e6f2;
  --chip:#313244; --chip-ink:#a6adc8; --chip-brd:#45475a;
  --field:#282a3c; --field-brd:#45475a;
  --shadow:rgba(0,0,0,.55); --shadow-2:rgba(0,0,0,.66);
  --diff-add-bg:rgba(166,227,161,.14); --diff-add-ink:#a6e3a1;
  --diff-del-bg:rgba(243,139,168,.14); --diff-del-ink:#f38ba8;
  --overlay:rgba(14,14,24,.7); --ph:rgba(205,214,244,.16); --ribbon-bg:rgba(40,42,60,.92);
  --ok:#a6e3a1; --err:#f38ba8;
}

/* ---- Everforest ---- */
:root[data-theme="everforest"] {
  --bg:#2b3339; --surface:#323c41; --surface-2:#2d373c; --alt:#3a454a;
  --line:#4a555b; --line-2:#404b51;
  --text:#d3c6aa; --muted:#a7b0ac; --faint:#7f8a86;
  --accent:#a7c080; --accent-grad:linear-gradient(140deg,#dbbc7f,#a7c080);
  --accent-ink:#bcd39a; --accent-soft:rgba(167,192,128,.17);
  --btn-ink:#2b3339; --btn2-bg:#a7c080; --btn2-ink:#2b3339;
  --hot:#e67e80; --hot-bg:rgba(230,126,128,.16); --hot-ink:#ed9899;
  --warm:#dbbc7f; --warm-bg:rgba(219,188,127,.16); --warm-ink:#e6cd9c;
  --cold:#7fbbb3; --cold-bg:rgba(127,187,179,.16); --cold-ink:#9bcdc6;
  --chip:#3a454a; --chip-ink:#a7b0ac; --chip-brd:#4a555b;
  --field:#323c41; --field-brd:#4a555b;
  --shadow:rgba(0,0,0,.5); --shadow-2:rgba(0,0,0,.6);
  --diff-add-bg:rgba(167,192,128,.15); --diff-add-ink:#a7c080;
  --diff-del-bg:rgba(230,126,128,.15); --diff-del-ink:#e67e80;
  --overlay:rgba(18,23,26,.68); --ph:rgba(211,198,170,.16); --ribbon-bg:rgba(50,60,65,.92);
  --ok:#a7c080; --err:#e67e80;
}

/* ---- Abysse (bleu profond) ---- */
:root[data-theme="ocean"] {
  --bg:#04141f; --surface:#0a2030; --surface-2:#071a27; --alt:#0e2a3d;
  --line:#164257; --line-2:#123648;
  --text:#d7ecf5; --muted:#8fb4c6; --faint:#5d8399;
  --accent:#2ec4d8; --accent-grad:linear-gradient(140deg,#5be7e0,#2ec4d8);
  --accent-ink:#5edbe9; --accent-soft:rgba(46,196,216,.15);
  --btn-ink:#04141f; --btn2-bg:#2ec4d8; --btn2-ink:#04141f;
  --hot:#ff9166; --hot-bg:rgba(255,145,102,.15); --hot-ink:#ffab8a;
  --warm:#ffc95c; --warm-bg:rgba(255,201,92,.15); --warm-ink:#ffd784;
  --cold:#4aa8ff; --cold-bg:rgba(74,168,255,.16); --cold-ink:#7cc0ff;
  --chip:#0e2a3d; --chip-ink:#8fb4c6; --chip-brd:#164257;
  --field:#071a27; --field-brd:#164257;
  --shadow:rgba(0,0,0,.6); --shadow-2:rgba(0,0,0,.72);
  --diff-add-bg:rgba(90,220,170,.14); --diff-add-ink:#5adcaa;
  --diff-del-bg:rgba(255,110,120,.14); --diff-del-ink:#ff6e78;
  --overlay:rgba(1,8,13,.75); --ph:rgba(215,236,245,.16); --ribbon-bg:rgba(10,32,48,.92);
  --ok:#5adcaa; --err:#ff6e78;
}

/* ---- Sakura (clair) ---- */
:root[data-theme="sakura"] {
  --bg:#fff0f5; --surface:#ffffff; --surface-2:#fde8ef; --alt:#fdeef3;
  --line:#f6d4e0; --line-2:#fae2ea;
  --text:#4a2f3c; --muted:#967684; --faint:#c0a2ae;
  --accent:#e86a95; --accent-grad:linear-gradient(140deg,#ffa4c0,#e86a95);
  --accent-ink:#d4547f; --accent-soft:#fde3ec;
  --btn-ink:#ffffff; --btn2-bg:#4a2f3c; --btn2-ink:#ffffff;
  --hot:#e8734e; --hot-bg:#fdeae2; --hot-ink:#b5502f;
  --warm:#d9a441; --warm-bg:#fbf1dc; --warm-ink:#96701c;
  --cold:#6b95cf; --cold-bg:#e8eff9; --cold-ink:#446da3;
  --chip:#fbe7ee; --chip-ink:#96768a; --chip-brd:#f6d9e3;
  --field:#fdf2f6; --field-brd:#f6dfe8;
  --shadow:rgba(200,100,140,.18); --shadow-2:rgba(70,40,55,.14);
  --diff-add-bg:#e6f6ec; --diff-add-ink:#2f7d55;
  --diff-del-bg:#fde7e9; --diff-del-ink:#b34a55;
  --overlay:rgba(80,40,60,.4); --ph:rgba(90,50,70,.16); --ribbon-bg:rgba(255,255,255,.94);
  --ok:#2f7d55; --err:#b34a55;
}

/* ---- Ambre (sombre chaud) ---- */
:root[data-theme="amber"] {
  --bg:#1c1409; --surface:#261c0e; --surface-2:#20170b; --alt:#2f2312;
  --line:#463519; --line-2:#3a2c15;
  --text:#f3e3c4; --muted:#c0a878; --faint:#8d7a52;
  --accent:#ffb02e; --accent-grad:linear-gradient(140deg,#ffd166,#ffb02e);
  --accent-ink:#ffc65c; --accent-soft:rgba(255,176,46,.15);
  --btn-ink:#1c1409; --btn2-bg:#ffb02e; --btn2-ink:#1c1409;
  --hot:#ff8a4c; --hot-bg:rgba(255,138,76,.16); --hot-ink:#ffa675;
  --warm:#ffcf5c; --warm-bg:rgba(255,207,92,.16); --warm-ink:#ffdb85;
  --cold:#7fc4d8; --cold-bg:rgba(127,196,216,.16); --cold-ink:#9dd5e4;
  --chip:#2f2312; --chip-ink:#c0a878; --chip-brd:#463519;
  --field:#20170b; --field-brd:#463519;
  --shadow:rgba(0,0,0,.6); --shadow-2:rgba(0,0,0,.7);
  --diff-add-bg:rgba(160,200,110,.14); --diff-add-ink:#a8c86e;
  --diff-del-bg:rgba(230,110,90,.14); --diff-del-ink:#e66e5a;
  --overlay:rgba(12,8,3,.72); --ph:rgba(243,227,196,.16); --ribbon-bg:rgba(38,28,14,.92);
  --ok:#a8c86e; --err:#e66e5a;
}

/* ---- Licorne (clair pastel saturé) ---- */
:root[data-theme="unicorn"] {
  --bg:#fdf2ff; --surface:#ffffff; --surface-2:#f8ecff; --alt:#faf0ff;
  --line:#ecd9f7; --line-2:#f3e6fa;
  --text:#3e2a52; --muted:#8a6fa3; --faint:#b69ecb;
  --accent:#a855f7; --accent-grad:linear-gradient(140deg,#67e8f9,#a855f7);
  --accent-ink:#8f3ce0; --accent-soft:#f3e3fe;
  --btn-ink:#ffffff; --btn2-bg:#3e2a52; --btn2-ink:#ffffff;
  --hot:#fb7185; --hot-bg:#ffe8ec; --hot-ink:#d33a52;
  --warm:#fbbf24; --warm-bg:#fdf3d9; --warm-ink:#a4740a;
  --cold:#38bdf8; --cold-bg:#e2f4fe; --cold-ink:#0d84bd;
  --chip:#f6e9fd; --chip-ink:#8a6fa3; --chip-brd:#ecdaf8;
  --field:#fbf3ff; --field-brd:#eddcf8;
  --shadow:rgba(150,80,220,.18); --shadow-2:rgba(60,35,80,.14);
  --diff-add-bg:#e4f8ed; --diff-add-ink:#1f8a54;
  --diff-del-bg:#ffe6ea; --diff-del-ink:#c23a51;
  --overlay:rgba(60,30,80,.42); --ph:rgba(70,40,90,.16); --ribbon-bg:rgba(255,255,255,.94);
  --ok:#1f8a54; --err:#c23a51;
}

/* Palette de coloration syntaxique : les nouveaux thèmes SOMBRES rejoignent la
   variante sombre. Sakura et Licorne sont clairs et gardent celle de :root. */
:root[data-theme="tokyo"], :root[data-theme="nord"], :root[data-theme="gruvbox"],
:root[data-theme="rosepine"], :root[data-theme="catppuccin"],
:root[data-theme="everforest"], :root[data-theme="ocean"], :root[data-theme="amber"] {
  --hl-cmt:#7b7488; --hl-str:#9fd08a; --hl-num:#d5a0e0; --hl-kw:#f08dbb;
  --hl-fn:#7fb6f0; --hl-type:#6fd7d0; --hl-prop:#e6c07b; --hl-var:#f0a07a;
  --hl-meta:#b9a6f5; --hl-op:#b6adc2; --hl-pun:#8b8399;
}

/* (W-E4) DANS un lot FROID (archive ou dossier compressé) : le fond entier
   prend une teinte froide. Ouvrir ou modifier un fichier implique de dépaqueter
   tout le lot — c'est lourd, et ça doit se voir avant de cliquer, pas après.

   ATTENTION au piège corrigé ici : `background: var(--cold-bg)` remplaçait le
   fond du thème. Or dans les thèmes sombres `--cold-bg` est une couleur
   TRANSLUCIDE (rgba) : elle n'a de sens que superposée à quelque chose. Posée
   comme fond plein, elle laissait apparaître du blanc et cassait tous les
   thèmes sombres.

   On empile donc la teinte PAR-DESSUS le fond du thème : le dégradé (une
   couleur unie de bout en bout) sert de calque, `background-color` reste celui
   du thème. Le résultat s'adapte tout seul aux 26 thèmes, clairs comme
   sombres, puisque les deux jetons viennent du thème lui-même. */
body.in-cold-archive {
  background-color: var(--bg);
  background-image: linear-gradient(var(--cold-bg), var(--cold-bg));
  background-attachment: fixed;
}
body.in-cold-archive .content::before {
  content: attr(data-coldnote);
  display: block; margin: 0 0 14px; padding: 9px 14px; border-radius: 12px;
  /* Même raisonnement : la surface du thème dessous, la teinte froide dessus. */
  background-color: var(--surface);
  background-image: linear-gradient(var(--cold-bg), var(--cold-bg));
  border: 1px solid var(--cold);
  color: var(--cold-ink); font-size: 12.5px; font-weight: 600;
}
/* Les cartes et lignes gardent leur propre surface : sans ça, elles se
   fondaient dans la teinte et la liste devenait illisible. */
body.in-cold-archive .fcard { background-color: var(--surface); }
body.in-cold-archive .frow:nth-child(even) { background-color: var(--alt); }

/* ---- (W-A9) Fiche de membre ---- */
.ycdlg-wide { max-width: 720px; }
.member-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 12px; margin: 6px 0 14px; }
.member-grid label { display: flex; flex-direction: column; gap: 5px;
  font-size: 12px; color: var(--muted); }
.member-grid input, .member-grid select {
  padding: 9px 11px; border-radius: 10px; border: 1px solid var(--field-brd);
  background: var(--field); color: var(--text); font-size: 13.5px; width: 100%;
}
.member-facts { display: flex; flex-wrap: wrap; gap: 8px 20px; padding: 11px 13px;
  border-radius: 12px; background: var(--surface-2); font-size: 12.5px;
  color: var(--muted); margin-bottom: 6px; }
.member-facts b { color: var(--text); }
.member-h { font-family: var(--font-title); font-size: 13px; margin: 16px 0 8px;
  text-transform: uppercase; letter-spacing: .07em; color: var(--faint); }
.member-acts { display: flex; flex-wrap: wrap; gap: 8px; }
.member-note { font-size: 12px; margin: 12px 0 0; }
/* Pastille d'état du compte : lisible d'un coup d'œil dans la liste. */
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  margin-right: 7px; vertical-align: 1px; }
.dot.on { background: var(--ok); }
.dot.off { background: var(--faint); }

/* ---- Suggestions de tags pendant la frappe ---- */
.tag-sugg { display: flex; flex-wrap: wrap; gap: 6px; margin: -4px 0 10px; }
.tag-sugg .tag-chip { border-style: dashed; }

/* ---- Bouton « activer le son » d'une vidéo en boucle ---- */
.sound-on { position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%);
  z-index: 6; padding: 9px 16px; border-radius: 999px; border: none; cursor: pointer;
  background: var(--accent); color: var(--btn-ink); font-size: 13px; font-weight: 600;
  box-shadow: 0 10px 24px -12px var(--shadow-2); }
.sound-on:hover { filter: brightness(1.06); }

/* ============================================================================
   Curseur de qualité : la couleur dit ce que le chiffre dit.
   Plus on descend, plus la barre vire au rouge sombre — on voit qu'on
   s'approche d'un réglage destructeur sans avoir à lire la valeur.
   Trois paliers par classe (support universel) + un dégradé continu par
   color-mix quand le navigateur sait le faire.
   ========================================================================== */
.qrow { display: flex; flex-direction: column; gap: 4px; }
.qrange { width: 100%; accent-color: var(--accent); }
.qrange.q-low { accent-color: #d98324; }
.qrange.q-verylow { accent-color: #8f1d1d; }
@supports (color: color-mix(in oklab, red 50%, blue)) {
  .qrange {
    accent-color: color-mix(in oklab,
      var(--accent) calc(var(--q, 1) * 100%), #7a1220);
  }
}
.qrange:disabled { opacity: .45; }
/* Les crans chiffrés ont été retirés : impossible de les aligner sur la
   position réelle de la poignée sans reconstruire toute la piste, et des
   repères décalés trompent plus qu'ils n'aident. La valeur exacte reste
   affichée en clair à gauche du curseur. */

/* PAS de mise en forme de la piste.
   Styler ::-webkit-slider-runnable-track SANS styler aussi la poignée casse le
   curseur natif de WebKit : la poignée garde sa taille par défaut, se décentre
   verticalement et n'atteint plus les extrémités de la course. C'était le
   défaut constaté. On laisse donc le curseur entièrement natif — `accent-color`
   suffit à le colorer, et le comportement reste parfait sur tous les
   navigateurs. */

/* Estimation : le sens du résultat se lit à la couleur. */
.dur-info .better { color: var(--ok); }
.dur-info .worse { color: var(--err); }
.ycdlg-actions .btn[disabled] { opacity: .45; cursor: not-allowed; }

/* ============================================================================
   Échelle de nettoyage du texte : la liste dit ce qui va se passer.
   Les niveaux atteints sont mis en avant, ceux au-delà restent visibles mais
   estompés — on voit ce qu'on s'apprête à perdre ET ce qu'on aurait pu perdre
   en poussant le curseur plus loin.
   ========================================================================== */
.txt-steps { list-style: none; margin: 10px 0 4px; padding: 0;
  max-height: 210px; overflow-y: auto; }
.txt-steps li { display: grid; grid-template-columns: 18px 1fr; gap: 2px 9px;
  padding: 6px 8px; border-radius: 9px; transition: background .14s ease, opacity .14s ease; }
.txt-steps li b { grid-column: 2; font-size: 12.5px; font-weight: 600; }
.txt-steps li span { grid-column: 2; font-size: 11.5px; color: var(--muted); line-height: 1.4; }
/* Numéro du niveau, dessiné par le compteur de la liste. */
.txt-steps { counter-reset: lvl; }
.txt-steps li::before {
  counter-increment: lvl; content: counter(lvl);
  grid-column: 1; grid-row: 1 / span 2; align-self: start;
  font-family: var(--font-mono); font-size: 10px; font-weight: 700;
  width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center;
  background: var(--chip); color: var(--chip-ink);
}
.txt-steps li.on { background: var(--alt); }
.txt-steps li.on::before { background: var(--accent); color: var(--btn-ink); }
/* Un niveau « sûr » (aucune perte visible) se distingue de ceux qui détruisent. */
.txt-steps li.on.safe::before { background: var(--ok); }
.txt-steps li.off { opacity: .5; }
.txt-steps li.na b::after { content: " — indisponible"; color: var(--faint); font-weight: 500; }
.txt-steps li.on.na::before { background: var(--faint); }



/* Niveau d'un LOT (dossier dont tout le contenu partage un niveau) : même
   couleur qu'un fichier, mais en contour. On distingue ainsi « ce fichier est
   froid » de « tout ce dossier est froid », sans inventer une seconde palette. */
.tier-pill.lot { background: transparent; box-shadow: inset 0 0 0 1.5px currentColor; }
.tier-pill.lot.hot { color: var(--hot-ink); }
.tier-pill.lot.warm { color: var(--warm-ink); }
.tier-pill.lot.cold { color: var(--cold-ink); }