/* Application « Compétences » (bureau Ubuntu) — style GNOME, clair et sombre (variables --win-* du bureau).
   Animations : transform et opacity seulement, jouées une fois à l'affichage d'une vue ; coupées par l'interrupteur Animations
   (body.no-anim), « réduire les animations » et le mode appareil modeste. Script : linux-skills.js. */
.window[data-app=sysmon] .wbody { overflow: hidden }
.window[data-app=sysmon] .wbody { container-type: inline-size }
.sk-app { --sk-muted: color-mix(in srgb, var(--win-muted) 72%, var(--win-fg)); --t1: #8c4f93; --t2: #c27500; --t3: #e95420; display: grid; grid-template-columns: 218px minmax(0, 1fr); height: 100%; min-height: 0; background: var(--win-bg); color: var(--win-fg); animation: none }   /* paliers : Découverte, Pratiqué, Maîtrisé */
body.theme-dark .sk-app { --t1: #c895d1; --t2: #f0b240; --t3: #ff7a45 }
.sk-side { background: var(--win-soft); border-inline-end: 1px solid var(--win-line); padding: 12px 10px; overflow-y: auto; min-height: 0; display: flex; flex-direction: column; gap: 4px }
.sk-sep { margin: 14px 8px 4px; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--sk-muted) }
.sk-nav { display: flex; flex-direction: column; gap: 2px }
.sk-nav button { display: flex; align-items: center; gap: 9px; width: 100%; padding: 8px 10px; border: 0; border-radius: 8px; background: transparent; color: var(--win-fg); font: 500 13.5px var(--font); text-align: start; cursor: pointer; transition: background .15s }
.sk-nav button span { width: 18px; text-align: center; flex: none }
.sk-nav button em { margin-inline-start: auto; font-style: normal; font: 600 11px var(--mono); color: var(--sk-muted) }
.sk-nav button:hover { background: color-mix(in srgb, var(--accent) 9%, transparent) }
.sk-nav button.on { background: color-mix(in srgb, var(--accent) 17%, transparent); color: color-mix(in srgb, var(--accent) 62%, #000); font-weight: 700 }
body.theme-dark .sk-nav button.on { color: color-mix(in srgb, var(--accent) 60%, #fff) }
.sk-nav button:focus-visible, .sk-go:focus-visible, .sk-back:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px }
.sk-main { position: relative; display: flex; flex-direction: column; min-width: 0; min-height: 0 }
.sk-head { display: flex; align-items: center; gap: 12px; padding: 10px 16px; border-bottom: 1px solid var(--win-line); background: var(--win-bg); flex: none }
.sk-head h2 { margin: 0; font-size: 15px; font-weight: 700; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.sk-back { display: inline-flex; align-items: center; gap: 4px; border: 1px solid var(--win-line); background: var(--win-card); color: var(--win-fg); border-radius: 8px; padding: 6px 12px; font: 600 12.5px var(--font); cursor: pointer }
.sk-back:hover { border-color: var(--accent) }
.sk-back[hidden], .sk-q[hidden] { display: none }
.sk-q { width: min(240px, 42%); border: 1px solid var(--win-line); border-radius: 8px; background: var(--win-card); color: var(--win-fg); padding: 7px 11px; font: 13px var(--font) }
.sk-q::placeholder { color: var(--sk-muted); opacity: 1 }
.sk-q:focus { outline: 2px solid color-mix(in srgb, var(--accent) 60%, transparent); border-color: var(--accent) }
.sk-view { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: 16px; position: relative; overscroll-behavior: contain }
.sk-view:focus-visible { outline: 2px solid color-mix(in srgb, var(--accent) 55%, transparent); outline-offset: -2px }
.sk-pane[hidden] { display: none }
.sk-view[data-v=tree] { overflow-x: auto }
.sk-view[data-v=cards] { padding: 0 }
/* À l'affichage d'une vue seulement (classe posée une fois par le script, retirée ensuite) : fondu léger */
.sk-view.enter:not([data-v=cards]) .sk-pane:not([hidden]) { animation: skFade .22s ease both }

/* Segments par palier (fiche, légende, panneau) */
.sk-seg { display: inline-flex; gap: 3px }
.sk-seg i { width: 18px; height: 5px; border-radius: 3px; background: color-mix(in srgb, var(--win-muted) 28%, transparent); transform-origin: left; display: block }
.sk-seg.t1 i:nth-child(-n+1), .sk-seg.t2 i:nth-child(-n+2), .sk-seg.t3 i { background: var(--tc, var(--c, var(--accent))) }
.sk-seg.t1 { --tc: var(--t1) } .sk-seg.t2 { --tc: var(--t2) } .sk-seg.t3 { --tc: var(--t3) }
.sk-detail .sk-seg i { animation: skGrow .5s var(--ease) both }
.sk-detail .sk-seg.t1 i:nth-child(1), .sk-detail .sk-seg.t2 i:nth-child(1), .sk-detail .sk-seg.t3 i:nth-child(1) { animation-delay: .05s }
.sk-detail .sk-seg.t2 i:nth-child(2), .sk-detail .sk-seg.t3 i:nth-child(2) { animation-delay: .15s } .sk-detail .sk-seg.t3 i:nth-child(3) { animation-delay: .25s }

/* Icône de compétence (fiche et panneau) */
.sk-ic { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: linear-gradient(145deg, var(--c1), var(--c2)); color: #fff; flex: none; box-shadow: inset 0 1px 0 #ffffff55 }
.sk-ic b { font: 700 13px var(--mono); letter-spacing: -.02em }
.sk-sub { margin: 22px 2px 10px; font: 700 11px var(--font); letter-spacing: .08em; text-transform: uppercase; color: var(--sk-muted) }

/* Fiche d'une compétence */
.sk-detail { max-width: 720px }
.sk-dh { display: flex; gap: 16px; align-items: center }
.sk-dh .sk-ic { width: 64px; height: 64px; border-radius: 18px } .sk-dh .sk-ic b { font-size: 18px }
.sk-dh small { font: 600 10.5px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--sk-muted) }
.sk-dh h3 { margin: 3px 0 6px; font-size: 24px; letter-spacing: -.02em; text-transform: none; color: var(--win-fg) }
.sk-dt { margin: 0; display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-size: 13px; color: var(--sk-muted) }
.sk-dt b:first-child { color: var(--c) }
.sk-pl { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px }
.sk-pl li { display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: 12px; border: 1px solid var(--win-line); background: var(--win-card); animation: skUp .4s var(--ease) both; animation-delay: calc(var(--i) * 45ms) }
.sk-pl img, .sk-nothumb { width: 64px; height: 44px; border-radius: 8px; object-fit: cover; flex: none; background: var(--win-soft); display: grid; place-items: center; color: var(--sk-muted) }
.sk-pl div { flex: 1; min-width: 0 } .sk-pl p { margin: 0 0 3px; font-size: 13px; line-height: 1.3 } .sk-pl small { color: var(--sk-muted); font: 11px var(--mono) }
.sk-go { border: 0; border-radius: 8px; padding: 7px 12px; background: var(--accent); color: #fff; font: 600 12px var(--font); cursor: pointer; flex: none; transition: transform .15s }
.sk-go:hover { transform: translateY(-2px) }

/* Arbre de dépendances : un clic ne change que des classes (la sélection s'éclaire par fondu, rien n'est rejoué) */
.sk-strip { display: flex; flex-wrap: nowrap; align-items: center; gap: 6px; height: 42px; box-sizing: border-box; overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; padding: 0 10px; margin-bottom: 12px; border-radius: 10px; background: var(--win-soft); border: 1px solid var(--win-line); font-size: 12.5px; position: sticky; top: -16px; z-index: 2 }
.sk-strip .dim { color: var(--sk-muted) }
.sk-strip > * { flex: none; white-space: nowrap }
.sk-strip button { border: 1px solid var(--win-line); background: var(--win-card); color: var(--win-fg); border-radius: 999px; padding: 3px 10px; font: 12px var(--font); cursor: pointer }
.sk-strip button:hover { border-color: var(--accent); color: var(--accent) }
.sk-tree { position: relative; width: 100%; min-width: 600px }
.sk-tree svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible }
.sk-tree .sk-ln { fill: none; stroke: var(--c); stroke-width: 1.3; opacity: .2; transition: opacity .2s; vector-effect: non-scaling-stroke }
.sk-tree .sk-ln.lit { opacity: .95; stroke-width: 2 }
.sk-tree .off { display: none }
.sk-tree .tc { position: absolute; top: 0; bottom: 0; width: 38% }
.sk-tree .tc.l { inset-inline-start: 0 } .sk-tree .tc.r { inset-inline-end: 0 }
.sk-tree .tk, .sk-tree .tj { position: absolute; inset-inline: 0; height: 28px; display: flex; align-items: center; gap: 7px; padding: 0 10px; border: 1px solid var(--win-line); background: var(--win-card); color: var(--win-fg); font: 500 12px var(--font); text-align: start; cursor: pointer; transition: opacity .2s, border-color .15s }
.sk-tree .tk { border-radius: 14px; padding-inline-start: 6px; font-size: 12.5px } .sk-tree .tj { border-radius: 7px; background: var(--win-soft); font-size: 12.5px }
.sk-tree .tb { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; flex: none; background: var(--c); color: #fff; font: 700 8.5px var(--mono); letter-spacing: -.03em; box-shadow: 0 0 0 2px var(--win-card), 0 0 0 3.5px color-mix(in srgb, var(--c) 48%, transparent) }
.sk-tree .tj span { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.sk-tree .tk span { flex: 1; min-width: 0; overflow: hidden; line-height: 1.1; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical }
.sk-tree em, .sk-tree .tj b { font: 600 11px var(--mono); font-style: normal; color: var(--sk-muted); flex: none }
.sk-tree .tk:hover, .sk-tree .tj:hover { border-color: var(--accent) }
.sk-tree .tk.sel { background: color-mix(in srgb, var(--c) 18%, var(--win-card)); border-color: var(--c) }
.sk-tree .tj.sel { background: var(--accent); border-color: var(--accent); color: #fff } .sk-tree .tj.sel b { color: #fff }
.sk-tree .tj.lk { border-color: var(--accent) }
.sk-tree .tk:focus-visible, .sk-tree .tj:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px }
.sk-tree .dim { opacity: .25 }

/* Carte d'activité */
.sk-heat { display: grid; grid-template-columns: minmax(150px, 230px) repeat(var(--n), 22px) 34px; gap: 3px; align-items: center; width: max-content; max-width: 100% }
.sk-heat .hp { height: 22px; border: 0; border-radius: 6px; background: var(--win-soft); color: var(--sk-muted); font: 600 10px var(--mono); cursor: pointer; padding: 0; position: sticky; top: -16px; z-index: 1 }
.sk-heat .hp:hover, .sk-heat .hp.sel { background: var(--accent); color: #fff }
.sk-heat .hc { grid-column: 1 / -1; margin: 12px 0 2px; font: 700 11px var(--font); letter-spacing: .08em; text-transform: uppercase; color: var(--c) }
.sk-heat .hc span { margin-inline-end: 6px; font-size: 9px }
.sk-heat .hc[hidden], .sk-heat .hrow[hidden] { display: none }
.sk-heat .hrow { display: contents }
.sk-heat .hr { border: 0; background: none; color: var(--win-fg); font: 500 12.5px var(--font); text-align: start; padding: 2px 4px; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border-radius: 6px }
.sk-heat .hr:hover, .sk-heat .hr.sel { color: var(--c); font-weight: 700 }
.sk-heat .hr.sel { background: color-mix(in srgb, var(--c) 13%, transparent) }
.sk-heat i { display: block; height: 22px; border-radius: 6px; background: color-mix(in srgb, var(--win-muted) 14%, transparent) }
.sk-heat i.col { box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 55%, transparent) }
.sk-heat i.u1 { background: color-mix(in srgb, var(--accent) 28%, transparent) } .sk-heat i.u2 { background: color-mix(in srgb, var(--accent) 50%, transparent) }
.sk-heat i.u3 { background: color-mix(in srgb, var(--accent) 74%, transparent) } .sk-heat i.u4 { background: var(--accent) }
.sk-heat i[data-tp] { cursor: help; transition: transform .15s } .sk-heat i[data-tp]:hover { transform: scale(1.25) }
.sk-heat em { font-style: normal; font: 600 11px var(--mono); color: var(--sk-muted); text-align: end }
.sk-heat .hrow.dim > * { opacity: .3 }
.sk-heat .h0 { display: block } .sk-heat i.h0 { background: transparent }
.sk-legend { display: flex; align-items: center; justify-content: flex-end; gap: 4px; list-style: none; margin: 14px 0 0; padding: 0; font: 11px var(--mono); color: var(--sk-muted) }
.sk-legend li[class] { width: 14px; height: 14px; border-radius: 4px; background: color-mix(in srgb, var(--accent) 28%, transparent) }
.sk-legend .u2 { background: color-mix(in srgb, var(--accent) 50%, transparent) } .sk-legend .u3 { background: color-mix(in srgb, var(--accent) 74%, transparent) } .sk-legend .u4 { background: var(--accent) }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap }

/* Info-bulle de la carte d'activité */
.sk-tip { position: absolute; z-index: 5; max-width: 250px; padding: 8px 11px; border-radius: 9px; background: #2a1d33f2; color: #fff; font-size: 12px; line-height: 1.35; display: grid; gap: 2px; pointer-events: none; box-shadow: 0 10px 26px #0006 }
.sk-tip[hidden] { display: none }
.sk-tip b { font-size: 13px } .sk-tip span { color: #ffb08a; font: 10px var(--mono); text-transform: uppercase; letter-spacing: .06em } .sk-tip em { font-style: normal; color: #ddd0e6 } .sk-tip small { color: #b3a3bf; font: 10px var(--mono) }

/* ===== Vue d'ensemble : tableau de bord (inspiré du moniteur système GNOME, cartes Yaru) ===== */
html.lang-rtl .ov, html.lang-rtl .ov-pop { direction: rtl }   /* persan : cartes, noms et panneau lus de droite à gauche (l'arbre de dépendances garde son tracé) */
.ov-head { position: sticky; top: 0; z-index: 3; padding: 8px 16px 7px; background: var(--win-bg); border-bottom: 1px solid var(--win-line) }
.ov-stats { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 0 0 7px; padding: 0 }
.ov-stats li { display: flex; align-items: baseline; gap: 10px; padding: 3px 16px; border: 1px solid var(--win-line); border-radius: 999px; background: linear-gradient(120deg, color-mix(in srgb, var(--accent) 13%, var(--win-card)), color-mix(in srgb, #77216f 13%, var(--win-card))) }
.ov-stats b { font: 700 21px/1.2 var(--mono); letter-spacing: -.03em; color: var(--accent); font-variant-numeric: tabular-nums }
.ov-stats span { min-width: 0; font: 700 11px var(--font); letter-spacing: .09em; text-transform: uppercase; color: var(--sk-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.ov-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px }
.ov-seg { display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 2px; border: 1px solid var(--win-line); border-radius: 10px; background: color-mix(in srgb, var(--win-fg) 7%, transparent) }
.ov-seg button { display: inline-flex; align-items: center; gap: 7px; height: 26px; padding: 0 12px; border: 0; border-radius: 8px; background: transparent; color: var(--win-fg); font: 600 12.5px var(--font); cursor: pointer; transition: background .15s }
.ov-seg button:hover { background: color-mix(in srgb, var(--accent) 10%, transparent) }
.ov-seg button[aria-pressed=true] { background: var(--win-card); box-shadow: 0 1px 2px #0003, inset 0 0 0 1px var(--accent) }
.ov-seg button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px }
.ov-seg em { font: 600 10.5px var(--mono); font-style: normal; color: var(--sk-muted) }
.ov-seg .dot { width: 8px; height: 8px; border-radius: 50% }
.ov-seg .t1 .dot { background: var(--t1) } .ov-seg .t2 .dot { background: var(--t2) } .ov-seg .t3 .dot { background: var(--t3) }
.ov-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; list-style: none; margin: 0; padding: 0; font: 11.5px var(--mono); color: var(--sk-muted) }
.ov-legend li { display: inline-flex; align-items: center; gap: 7px }
.ov-legend .sk-seg i { width: 10px; height: 4px }
.ov-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding: 10px 16px 12px }
@container (min-width: 1000px) { .ov-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) } }
@container (min-width: 1300px) { .ov-grid { grid-template-columns: repeat(4, minmax(0, 1fr)) } }
.ov-card { display: flex; flex-direction: column; min-width: 0; border: 1px solid var(--win-line); border-radius: 12px; background: var(--win-card); background-image: linear-gradient(180deg, color-mix(in srgb, var(--c) 6%, transparent), transparent 70px); overflow: hidden }
.ov-h { display: flex; align-items: center; gap: 8px; margin: 0; padding: 6px 10px; border-bottom: 1px solid var(--win-line); font: 700 11px var(--font); letter-spacing: .09em; text-transform: uppercase; color: var(--win-fg) }
.ov-h .ov-t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.ov-h em { font: 600 11px var(--mono); font-style: normal; letter-spacing: 0; color: var(--sk-muted) }
.ov-ci { display: grid; place-items: center; width: 22px; height: 22px; flex: none; border-radius: 7px; background: var(--cd); color: #fff; font: 700 9.5px var(--mono); letter-spacing: -.04em; text-transform: none }
.ov-card.dim .ov-h { opacity: .45 }
.ov-list { list-style: none; margin: 0; padding: 4px 6px; display: grid; gap: 0; align-content: start; flex: 1 }
.ov-sk { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 9px; width: 100%; min-height: 22px; padding: 1px 8px; border: 0; border-radius: 7px; background: transparent; color: var(--win-fg); font: 500 12.5px var(--font); text-align: start; cursor: pointer; transition: background .12s, opacity .18s }
.ov-sk.t1 { --tc: var(--t1) } .ov-sk.t2 { --tc: var(--t2) } .ov-sk.t3 { --tc: var(--t3) }
.ov-sk > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.ov-sk:hover, .ov-sk.sel { background: color-mix(in srgb, var(--tc) 15%, transparent) }
.ov-sk.sel::before { content: ''; position: absolute; inset-block: 4px; inset-inline-start: 0; width: 3px; border-radius: 2px; background: var(--tc) }
.ov-sk:focus-visible { outline: 2px solid var(--accent); outline-offset: -1px }
.ov-sk.dim { opacity: .28 }
.ov-b { display: inline-flex; gap: 2px }
.ov-b i { display: block; width: 9px; height: 4px; border-radius: 2px; background: color-mix(in srgb, var(--win-muted) 30%, transparent); transform-origin: 0 50% }
.ov-sk.t1 .ov-b i:nth-child(1), .ov-sk.t2 .ov-b i:nth-child(-n+2), .ov-sk.t3 .ov-b i { background: var(--tc) }
html.lang-rtl .ov-b i { transform-origin: 100% 50% }
.ov-c { min-width: 1.5em; font: 600 10.5px var(--mono); color: var(--sk-muted); text-align: end }
.ov-oth { grid-column: 1 / -1 }
.ov-oth[hidden] { display: none }
.ov-chips { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 8px 10px }
.ov-chips li { padding: 3px 10px; border: 1px dashed var(--win-line); border-radius: 999px; font-size: 12px; color: var(--sk-muted) }
.ov-empty { margin: 0; padding: 30px 16px; text-align: center; color: var(--sk-muted) }
.ov-empty[hidden] { display: none }
/* Panneau d'une compétence : aperçu au survol / à la prise de focus, fixé par un clic ou Entrée */
.ov-pop { position: absolute; z-index: 6; width: 288px; max-width: calc(100% - 16px); padding: 12px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 9px; border: 1px solid var(--win-line); border-radius: 12px; background: var(--win-card); color: var(--win-fg); box-shadow: 0 14px 34px #0006; pointer-events: none }
.ov-pop.pin { pointer-events: auto; border-color: var(--accent) }
.ov-pop[hidden] { display: none }
.ov-pc { display: grid; grid-template-columns: minmax(0, 1fr); gap: 9px; min-width: 0 }
.ov-pp li { min-width: 0 }
.ov-ph { display: flex; align-items: center; gap: 11px }
.ov-ph .sk-ic { width: 38px; height: 38px; border-radius: 11px }
.ov-ph small { font: 600 10.5px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--sk-muted) }
.ov-ph h4 { margin: 2px 0 0; font: 700 15px/1.2 var(--font); letter-spacing: -.01em; text-transform: none; color: var(--win-fg) }
.ov-pl { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 9px; margin: 0; font-size: 12.5px }
.ov-pl.t1 { --tc: var(--t1) } .ov-pl.t2 { --tc: var(--t2) } .ov-pl.t3 { --tc: var(--t3) }
.ov-pl b { font-weight: 700 }
.ov-pl em { font: 600 11.5px var(--mono); font-style: normal; color: var(--sk-muted) }
.ov-pp { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; max-height: 190px; overflow-y: auto }
.ov-pj { display: flex; align-items: center; gap: 8px; width: 100%; padding: 5px 9px; border: 1px solid var(--win-line); border-radius: 8px; background: var(--win-soft); color: var(--win-fg); font: 12.5px var(--font); text-align: start; cursor: pointer }
.ov-pj:hover { border-color: var(--accent) }
.ov-pj:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px }
.ov-pj b { font: 600 11px var(--mono); color: var(--sk-muted); flex: none }
.ov-pj span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
/* Cascade d'apparition (une fois, à l'affichage de la vue ; 400 ms au total au plus) et remplissage des barres de niveau */
.sk-view.enter[data-v=cards] .ov-stats li { animation: skUp .18s var(--ease) both }
.sk-view.enter[data-v=cards] .ov-card { animation: skUp .18s var(--ease) both; animation-delay: calc(var(--i, 0) * 28ms) }
.sk-view.enter[data-v=cards] .ov-sk .ov-b i { animation: skGrow .2s var(--ease) both; animation-delay: calc(var(--i, 0) * 28ms) }

@keyframes skUp { from { opacity: 0; transform: translateY(10px) } }
@keyframes skGrow { from { transform: scaleX(0) } }
@keyframes skFade { from { opacity: 0 } }

/* Fenêtre étroite (ou téléphone) : la barre latérale passe en rangée défilante au-dessus */
@container (max-width: 640px) {
  .sk-app { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr) }
  .sk-side { flex-direction: row; align-items: center; overflow-x: auto; overflow-y: hidden; border-inline-end: 0; border-bottom: 1px solid var(--win-line); padding: 8px; gap: 8px }
  .sk-sep { display: none } .sk-nav { flex-direction: row; gap: 4px; flex: none } .sk-nav button { width: auto; white-space: nowrap; padding: 6px 10px }
  .sk-nav button em { display: none }
  .sk-head { padding: 8px 12px } .sk-view { padding: 12px } .sk-view[data-v=cards] { padding: 0 }
  .sk-pl li { flex-wrap: wrap } .sk-go { width: 100% }
  .sk-heat { grid-template-columns: 130px repeat(var(--n), 20px) 28px }
  .sk-q { width: 48% }
  .ov-head { position: static; padding: 12px 12px 8px }
  .ov-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px }
  .ov-stats li { padding: 7px 14px } .ov-stats b { font-size: 20px }
  .ov-grid { grid-template-columns: minmax(0, 1fr); padding: 12px }
  .ov-legend { display: none }
  .ov-sk { min-height: 34px; padding: 5px 8px }
  .ov-pop { inset: auto 8px 8px 8px; width: auto; max-width: none; max-height: 70%; overflow-y: auto }
}

body.no-anim .sk-app *, .perf-lite .sk-app * { animation: none !important; transition: none !important }
@media (prefers-reduced-motion: reduce) { .sk-app * { animation: none !important; transition: none !important } }