/* Map A · « the legend is the switch » (gestion-design board, round 2; Alex picked it Oct 21). Colour code v2 (Alex, after the first
   port: « des gradients de couleurs… vert foncé, vert pâle si on est au montage des lots, compliance orange, du mauve foncé à moins foncé…
   laisse faire les encadrés »): ONE fill per bubble, no ring, first match wins —
   Made = dark green → In production = teal → In the Batch builder = pale green → Required here = orange → the others (framed by a rule or
   not required) = a purple ramp by relevance (p1 = top 10 % of To produce … p4 = the rest).
   Validated (dataviz validate_palette.js, --pairs all): light (surface #FFFFFF) green/teal/pale green/orange + every purple step:
   worst CVD ΔE 10.0 (teal↔purple), normal 17.6; the ramp is monotone, ΔL ≥ 0.06 (p3 = #B897D9 instead of #A98BC6: teal↔#A98BC6 was
   CVD 6.0). Dark (surface #2A2329), its own steps, the ramp reversed (brightest = most relevant): worst CVD 8.4, normal 16.8.
   The palest colours (pale green and p4 in light, p4 in dark) carry a 1 px outline of their own hue; words on every chip. */
:root{
  --c-made:#2E6B1F;--c-prd:#1D8FA0;--c-wsh:#B5DB7C;--wsh-line:#7FA54A;--c-req:#E0701A;
  --p1:#4B2766;--p2:#7A4FA0;--p3:#B897D9;--p4:#D8C8E8;--p4-line:#B9A6CF;
  --wsh-tint:#EEF6E2;
  --clu:#F7F5F8;--clu-line:#ECE9ED;--halo:#FFFFFF;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --c-made:#3B7A2C;--c-prd:#2196A8;--c-wsh:#B4DA7A;--wsh-line:#B4DA7A;--c-req:#EE7923;
  --p1:#D8BDF4;--p2:#B890DF;--p3:#815AA5;--p4:#644580;--p4-line:#8A6CAA;
  --wsh-tint:#2F3A24;
  --clu:#2F282F;--clu-line:#3A323B;--halo:#2A2329}}
:root[data-theme="dark"]{
  --c-made:#3B7A2C;--c-prd:#2196A8;--c-wsh:#B4DA7A;--wsh-line:#B4DA7A;--c-req:#EE7923;
  --p1:#D8BDF4;--p2:#B890DF;--p3:#815AA5;--p4:#644580;--p4-line:#8A6CAA;
  --wsh-tint:#2F3A24;
  --clu:#2F282F;--clu-line:#3A323B;--halo:#2A2329}
/* text that depends on the theme (the ramp reads « darker = higher » in light, « brighter = higher » in dark) */
.dk-only{display:none!important}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .dk-only{display:inline!important}:root:not([data-theme="light"]) .lt-only{display:none!important}}
:root[data-theme="dark"] .dk-only{display:inline!important}:root[data-theme="dark"] .lt-only{display:none!important}

.cw{max-width:1400px;gap:14px}
html,body{overflow-x:clip}
/* page head */
.phead{display:flex;justify-content:space-between;align-items:flex-end;gap:14px 24px;flex-wrap:wrap}
.phead .ph-l{min-width:0;flex:1 1 520px}
.mkt{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.fr-note{font-size:12px;color:var(--muted)}
.tag{display:inline-block;font-size:10.5px;line-height:16px;padding:0 7px;border-radius:999px;font-weight:600;letter-spacing:0}
.tag.prod{background:var(--tint);color:var(--ok)}
.tag.study{background:var(--warn-bg);color:var(--warn)}
.ex-fsel .cv{font-size:10px;color:var(--faint)}
.pa{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.btn.h34{height:34px;border-radius:9px;padding:0 13px;font-size:13.5px}
.btn svg{flex-shrink:0}
.wishlink b{font-variant-numeric:tabular-nums}
.mmenu{min-width:330px}
.mmenu a{display:flex;flex-direction:column;gap:2px;padding:8px 10px;border-radius:8px;color:var(--fg)}
.mmenu a:hover{background:var(--hover)}
.mmenu a.on{background:var(--sel)}
.mmenu a b{display:flex;align-items:center;gap:7px;font-size:13.5px;font-weight:600}
.mmenu a small{font-size:12px;color:var(--muted)}
.mmenu .sep{height:1px;background:var(--border);margin:4px 6px}
.mmenu .t{font:500 10.5px ui-monospace,"JetBrains Mono",Menlo,monospace;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);padding:6px 10px 4px}

/* the Show bar: every filter in one row */
.ex-fbar{gap:8px}
.ex-fsel{max-width:100%}
.ex-fsel .val{overflow:hidden;text-overflow:ellipsis;max-width:190px}
.nsl,.srch,.tog{display:inline-flex;align-items:center;gap:8px;height:34px;padding:0 12px;border:1px solid var(--border);border-radius:9px;background:var(--surface);font-size:13.5px;min-width:0}
.nsl .k,.srch .k{font:500 10.5px ui-monospace,"JetBrains Mono",Menlo,monospace;letter-spacing:.06em;text-transform:uppercase;color:var(--faint);white-space:nowrap}
.nsl input[type=range]{width:104px;accent-color:var(--fg);margin:0}
.nsl b{font-weight:600;font-variant-numeric:tabular-nums;min-width:26px;text-align:right}
.nsl small{color:var(--muted);font-size:12.5px;white-space:nowrap}
.srch{flex:1 1 170px;padding:0 10px;color:var(--faint)}
.srch:focus-within{border-color:var(--muted)}
.srch input{border:0;outline:0;background:none;width:100%;min-width:0;font:13.5px Figtree,system-ui,sans-serif;color:var(--fg)}
.tog{cursor:pointer;color:var(--fg);font-weight:500;white-space:nowrap}
.tog input{accent-color:var(--fg);margin:0}
.fmenu{max-height:min(420px,70vh);overflow:auto}
.fmenu>button{grid-template-columns:minmax(0,1fr) auto}
.ex-fsum{display:block;margin:-4px 2px 0;font-size:12.5px;line-height:1.6}
.ex-fsum b{color:var(--fg);font-weight:600;font-variant-numeric:tabular-nums}
.ex-fsum .clr{color:var(--fg);text-decoration:underline;text-underline-offset:2px;font-size:12.5px}

/* map 2/3 + side 1/3 */
.mduo{display:grid;grid-template-columns:minmax(0,1.85fr) minmax(360px,1fr);gap:12px;align-items:start}
.mapcard{padding:0;overflow:hidden;position:sticky;top:64px}
.mapcard .chead{padding:16px 18px 0;margin:0}
.mapcard .read{margin-top:4px}
.stage{position:relative;height:620px;margin-top:6px;touch-action:pan-y;user-select:none;-webkit-user-select:none;cursor:grab;overflow:hidden}
.stage.panning{cursor:grabbing}
#map{display:block;width:100%;height:100%}
#map .clu{fill:var(--clu);stroke:var(--clu-line);stroke-width:1;vector-effect:non-scaling-stroke;transition:opacity .2s}
#map.notr g.n,#map.notr .clu{transition:none!important}
#map g.n{transition:transform .5s cubic-bezier(.3,.7,.25,1),opacity .2s}
#map .clu{transition:cx .5s cubic-bezier(.3,.7,.25,1),cy .5s cubic-bezier(.3,.7,.25,1),r .5s cubic-bezier(.3,.7,.25,1),opacity .2s}
/* a bubble = one disk, one colour (its stroke, painted under the fill, is a 1 px halo — or the outline of the palest colours) */
#map .d{stroke:var(--halo);stroke-width:2px;paint-order:stroke;vector-effect:non-scaling-stroke}
#map .n.made .d{fill:var(--c-made)}#map .n.prd .d{fill:var(--c-prd)}#map .n.wsh .d{fill:var(--c-wsh);stroke:var(--wsh-line)}#map .n.req .d{fill:var(--c-req)}
#map .n.p1 .d{fill:var(--p1)}#map .n.p2 .d{fill:var(--p2)}#map .n.p3 .d{fill:var(--p3)}#map .n.p4 .d{fill:var(--p4);stroke:var(--p4-line)}
#map .sl{fill:none;stroke:var(--fg);stroke-opacity:.22;stroke-width:14px;vector-effect:non-scaling-stroke;display:none}
#map .n.sel .sl{display:block}
#map .n.sel .d{stroke:var(--fg);stroke-width:3px}
#map .n.dim{opacity:.2}
#map .n.fdim{opacity:.08}
#map .n.cdim{opacity:.13}
#map .n.coff{opacity:0;pointer-events:none}
#map .n.gone{display:none}
#map .hit{fill:transparent;cursor:pointer}
#map .edge{stroke:var(--fg);stroke-opacity:.55;fill:none;vector-effect:non-scaling-stroke;stroke-linecap:round}
/* the links of the original map: light and recessive by default, the ones of the course in focus strong and on top */
#map #edges,#map #hil,#map #sims{pointer-events:none;transition:opacity .25s}
#map .hold{opacity:0}
#map .lk{stroke:var(--fg);stroke-opacity:.2;stroke-width:var(--w,.8px);fill:none;vector-effect:non-scaling-stroke;stroke-linecap:round;transition:stroke-opacity .15s}
#map .lk.co,#map .lk.oo{stroke-opacity:.3}
#map .lk.fade{stroke-opacity:.05}
#map .lk.hi{stroke-opacity:.78;stroke-width:calc(var(--w,.8px) * 1.6 + .5px)}
#map .lk.off{display:none}
#map .clu.empty{opacity:0!important}
/* the swatch (legend, chips, lists, sheet, tooltip): the bubble's colour; .rsw = the purple ramp (a category of several shades) */
i.sw{flex:0 0 12px;width:12px;height:12px;border-radius:50%;display:inline-block;box-sizing:border-box;vertical-align:-1px}
i.sw.f-made{background:var(--c-made)}i.sw.f-prd{background:var(--c-prd)}i.sw.f-wsh{background:var(--c-wsh);box-shadow:inset 0 0 0 1px var(--wsh-line)}i.sw.f-req{background:var(--c-req)}
i.sw.f-p1{background:var(--p1)}i.sw.f-p2{background:var(--p2)}i.sw.f-p3{background:var(--p3)}i.sw.f-p4{background:var(--p4);box-shadow:inset 0 0 0 1px var(--p4-line)}
i.sw.rsw{background:linear-gradient(90deg,var(--p1) 0 25%,var(--p2) 25% 50%,var(--p3) 50% 75%,var(--p4) 75%)}
#map #lbls{pointer-events:none;transition:opacity .2s}
#map #lbls.hold{opacity:0}
#map #lbls text{font:500 11.5px Figtree,system-ui,sans-serif;fill:var(--fg);paint-order:stroke;stroke:var(--halo);stroke-width:3.2px;stroke-linejoin:round}
#map #lbls text.o{font-weight:700}
#map #lbls text.s{font-weight:700}
#map #lbls text.fam{font:600 10px ui-monospace,"JetBrains Mono",Menlo,monospace;letter-spacing:.08em;fill:var(--muted);stroke-width:3px}
/* Google-Maps-like controls */
.zc,.zfull{position:absolute;right:12px;background:var(--surface);border:1px solid var(--border);border-radius:10px;box-shadow:0 1px 2px rgba(32,26,33,.10),0 6px 16px -8px rgba(32,26,33,.25);overflow:hidden;z-index:2}
.zc{bottom:12px;display:flex;flex-direction:column}
.zfull{top:12px}
.zc button,.zfull{width:36px;height:36px;display:grid;place-items:center;color:var(--fg)}
.zc button+button{border-top:1px solid var(--border)}
.zc button:hover,.zfull:hover{background:var(--hover)}
.mhint{position:absolute;inset:0;display:grid;place-items:center;background:rgba(32,26,33,.45);color:#fff;font:600 15px Figtree,system-ui,sans-serif;opacity:0;pointer-events:none;transition:opacity .25s;z-index:3;text-align:center;padding:20px}
.mhint.on{opacity:1}
.mlg{padding:10px 18px 12px;border-top:1px solid var(--border);gap:6px 16px}
.mlg .ramp{display:inline-flex;gap:2px}
.mlg .ramp i{width:12px;height:10px;border-radius:2px}
.mlg i.dt{width:10px;height:10px;border-radius:50%}
.mlg i.ln{width:18px;height:0;border-top:1.4px solid var(--fg);opacity:.4;border-radius:0}
.mlg .lgo{color:var(--faint)}
.mlg .lgo i.sw{opacity:.35}
.mlg .lgo s{text-decoration-thickness:1px}
.mlg svg{display:block}
.mapcard.full{position:fixed;inset:0;z-index:70;border-radius:0;border:0;display:flex;flex-direction:column}
.mapcard.full .stage{flex:1;height:auto;touch-action:none}
body.mapfull{overflow:hidden}

/* side card */
.side{padding:14px 16px 16px;scroll-margin-top:110px}
.stabs{display:flex;width:100%}
.stabs button{flex:1;padding:6px 6px;text-align:center}
.pane{margin-top:12px}
.intro{font-size:12.5px;color:var(--muted);margin:0 0 6px}
.intro b{color:var(--fg)}
.lgd{display:flex;gap:14px;font-size:11.5px;color:var(--muted);margin:0 0 8px}
.lgd span{display:inline-flex;align-items:center;gap:6px}
.lgd{flex-wrap:wrap;gap:4px 12px}
.lh,.rr{display:grid;grid-template-columns:24px minmax(0,1fr) 52px 46px 28px;gap:8px;align-items:center}
.lh{font-size:11.5px;font-weight:600;color:var(--muted);padding:0 4px 6px;border-bottom:1px solid var(--border)}
.lh .r,.rr .v,.rr .s{text-align:right}
.rr{min-height:37px;padding:0 4px;border-bottom:1px solid var(--border)}
.rr:hover{background:var(--hover)}
.rr.sel{background:var(--sel)}
.rr .no{color:var(--faint);font-size:12px;font-variant-numeric:tabular-nums}
.rr .nm{display:flex;align-items:center;gap:7px;min-width:0;height:36px;text-align:left;font-size:13px;color:var(--fg)}
.rr .nm span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rr .nm em{font-style:normal;color:var(--faint);font-size:11.5px;flex-shrink:0}
.rr .v{color:var(--muted);font-size:12.5px;font-variant-numeric:tabular-nums}
.rr .s{font-weight:600;font-size:13px;font-variant-numeric:tabular-nums;white-space:nowrap}
.plus{width:26px;height:26px;border-radius:7px;border:1px solid var(--border-strong);display:grid;place-items:center;font:600 15px/1 Figtree,system-ui,sans-serif;color:var(--fg);background:var(--surface)}
.plus:hover{border-color:var(--fg)}
.plus.on{background:var(--wsh-tint);border-color:var(--c-wsh);color:var(--fg);font-size:13px}
/* G12 (Oct 26): a course archived in the LMS Admin Console — its + is off (the reason in its title; a click says it) and its row says « Archived » */
.plus[aria-disabled="true"]{opacity:.45;cursor:not-allowed;border-style:dashed}
.plus[aria-disabled="true"]:hover{border-color:var(--border-strong)}
.rr .nm em.jg-arch{color:var(--muted)}
.act button[disabled]{opacity:.45;cursor:not-allowed;pointer-events:auto}
.ono{font:500 11px ui-monospace,Menlo,monospace;color:var(--faint);text-align:right}
.pst{display:grid;place-items:center;width:26px;height:26px}
.empty .btn{margin-top:8px}
.lks{display:flex;flex-wrap:wrap;gap:6px}
.lks .chip{height:22px;cursor:pointer}
.lks .chip:hover{border-color:var(--border-strong)}
.more{margin-top:10px;width:100%}
.empty{color:var(--muted);font-size:13px;padding:14px 4px}
/* sheet */
.sh h2{font:600 18px/1.25 Figtree,system-ui,sans-serif;letter-spacing:-.01em}
.sh .en{color:var(--muted);font-size:12.5px;margin-top:3px}
.sh h3{font:600 13px/1.3 Figtree,system-ui,sans-serif;margin:18px 0 8px}
.sh h3 span{font-weight:400;color:var(--muted)}
.sh p{font-size:13px}
.sh .m{color:var(--muted);font-size:12.5px;margin-top:4px}
.sh .note{font-size:12.5px;color:var(--muted);background:var(--soft2);border-radius:8px;padding:8px 10px;margin-top:8px}
.act{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:12px 0 4px}
.act small{color:var(--muted);font-size:12px}
.onw{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 10px;border-radius:7px;background:var(--wsh-tint);color:var(--fg);font-weight:600;font-size:13px}
.stl{display:flex;align-items:flex-start;gap:8px;margin:12px 0 4px;font-size:13px;color:var(--muted)}
.stl i.sw{margin-top:3px}
.stl+.act{margin-top:8px}
.sh .chips{margin-top:12px}
.sh .chips .chip{height:22px}
.sh .chips button.chip{cursor:pointer}
.sh .chips button.chip:hover{border-color:var(--border-strong)}
.kv{display:grid;grid-template-columns:minmax(0,190px) minmax(0,1fr) auto;gap:7px 10px;align-items:center;font-size:12.5px}
.kv .k{color:var(--muted)}
.kv .k b{color:var(--fg);font-weight:600}
.kv .v{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.bar{height:6px;border-radius:3px;background:var(--track);overflow:hidden}
.bar b{display:block;height:100%;border-radius:3px;background:var(--muted)}
.rgt{display:grid;grid-template-columns:104px minmax(0,1fr);gap:8px 10px;font-size:12.5px}
.rgt .rn{color:var(--muted)}
.rgt .rn.cur{color:var(--fg);font-weight:600}
.rgt .lv{display:flex;align-items:center;gap:7px}
.rgt .tx{color:var(--muted);font-size:12px;margin-top:2px}
.dots{display:inline-flex;gap:2px}
.dots i{width:7px;height:7px;border-radius:50%;background:var(--track)}
.dots i.on{background:var(--fg)}
.near{display:block;width:100%;text-align:left;border:1px solid var(--border);border-radius:10px;padding:9px 11px;margin-bottom:8px;background:var(--surface)}
.near:hover{border-color:var(--border-strong)}
.near .h{display:flex;justify-content:space-between;gap:10px;font-weight:600;font-size:13px}
.near .h span:last-child{font-variant-numeric:tabular-nums;color:var(--muted);font-weight:500;white-space:nowrap}
.near .why{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px}
.near .why .chip{height:20px;font-size:11px}
.near .co{font-size:12px;color:var(--muted);margin-top:6px}
.sib{display:flex;justify-content:space-between;gap:10px;width:100%;text-align:left;padding:6px 4px;border-bottom:1px solid var(--border);font-size:12.5px}
.sib:hover{background:var(--hover)}
.sib span:last-child{color:var(--muted);font-variant-numeric:tabular-nums}
.esh{border:1px dashed var(--border-strong);border-radius:10px;padding:22px 18px;text-align:center;color:var(--muted);font-size:13px}
.esh b{display:block;color:var(--fg);font-size:14px;margin-bottom:4px}
/* method */
.mt h3{font:600 13px/1.3 Figtree,system-ui,sans-serif;margin:18px 0 6px}
.mt h3:first-child{margin-top:2px}
.mt p,.mt li{font-size:12.5px;color:var(--muted);line-height:1.5}
.mt ul{padding-left:18px;display:flex;flex-direction:column;gap:4px}
.mt .m{margin-top:6px}
.presets{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0 4px}
.presets .btn[aria-pressed="true"]{border-color:var(--fg);box-shadow:inset 0 0 0 1px var(--fg);font-weight:600}
.sl{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 10px;margin:10px 0 0;font-size:12.5px}
.sl label{font-weight:600}
.sl output{font-variant-numeric:tabular-nums;color:var(--muted)}
.sl input{grid-column:1/-1;width:100%;accent-color:var(--fg);margin:2px 0}
.sl small{grid-column:1/-1;color:var(--muted);font-size:11.5px}
.at{width:100%;border-collapse:collapse;font-size:12px;margin-top:10px}
.at th,.at td{padding:6px 5px;border-bottom:1px solid var(--border);text-align:left;vertical-align:top}
.at th{font-weight:600;color:var(--muted)}
.at td.c,.at th.c{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.at td.lvn{white-space:nowrap;font-weight:600}
.foot{font-size:12px;color:var(--muted);max-width:130ch;margin:4px 2px 0}
@media (max-width:1560px){header.top.fph .sync .read{display:none}}
header.top.fph .sw.light .sw-box{background:#fff;color:#201A21}

/* tooltip */
.ctip[hidden]{display:none}
.ctip .m{display:block;color:var(--muted);margin-top:2px}

/* toast (fixed ink, readable in both themes) */
.toast{background:#201A21;color:#fff;flex-wrap:wrap;row-gap:6px}
.toast a,.toast button{color:#D5F098;font-weight:600;text-decoration:underline;text-underline-offset:3px}

/* the import pop-up */
dialog.imp{width:min(680px,calc(100vw - 24px));padding:0;max-height:min(88vh,900px);overflow:hidden}
dialog.imp[open]{display:flex;flex-direction:column}
.ih{padding:18px 20px 12px;border-bottom:1px solid var(--border)}
.iht{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.iht h3{font:600 17px/1.3 Figtree,system-ui,sans-serif;margin:0;outline:none}
.ix{width:30px;height:30px;border-radius:8px;font-size:20px;line-height:1;color:var(--muted);margin:-4px -6px 0 0}
.ix:hover{background:var(--hover);color:var(--fg)}
.ifn{font:12px ui-monospace,"JetBrains Mono",Menlo,monospace;color:var(--muted);margin:2px 0 0!important}
.isum{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.isum span{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 10px;border-radius:999px;font-size:12.5px;font-weight:600;background:var(--soft2)}
.isum .s-ok{background:var(--soft2);color:var(--fg)}
.isum .s-new{background:var(--surface);color:var(--fg);box-shadow:inset 0 0 0 1px var(--border-strong)}
.isum .s-al{color:var(--muted)}
.iall{display:flex;align-items:center;gap:9px;margin-top:12px;font-size:13px;font-weight:600;cursor:pointer}
.iall small{font-weight:400;color:var(--muted)}
.ib{overflow:auto;flex:1;min-height:0;overscroll-behavior:contain}
.ib.pad{padding:14px 20px}
.ib textarea{width:100%;min-height:220px;border:1px solid var(--border-strong);border-radius:10px;padding:10px 12px;font:13.5px/1.5 Figtree,system-ui,sans-serif;color:var(--fg);background:var(--surface);resize:vertical}
.ir{display:grid;grid-template-columns:18px minmax(0,1fr);gap:10px;padding:10px 20px;border-bottom:1px solid var(--border);align-items:start;cursor:pointer}
.ir:hover{background:var(--hover)}
.ir input,.iall input{width:16px;height:16px;margin:2px 0 0;accent-color:var(--fg)}
.ir.off{cursor:default}
.ir.off b{color:var(--muted)}
.ir b{display:block;font-weight:600;font-size:13.5px;word-break:break-word}
.ir .m{display:flex;flex-wrap:wrap;gap:4px 8px;align-items:center;font-size:12.5px;color:var(--muted);margin-top:3px}
.ir .mn{color:var(--fg)}
.tg{font-size:11px;font-weight:600;line-height:18px;padding:0 7px;border-radius:999px;white-space:nowrap}
.tg.ok{background:var(--soft2);color:var(--fg)}
.tg.nw{background:var(--surface);color:var(--fg);box-shadow:inset 0 0 0 1px var(--border-strong);white-space:normal}
.tg{display:inline-flex;align-items:center;gap:5px}
.tg i.sw{width:10px;height:10px;flex-basis:10px}
.tg.al{background:var(--soft2);color:var(--muted)}
.use{color:var(--fg);text-decoration:underline;text-underline-offset:2px;font-size:12.5px;text-align:left}
.if{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;padding:12px 20px;border-top:1px solid var(--border);background:var(--surface)}
.ifl,.ifr{display:flex;gap:6px;flex-wrap:wrap}
.ifr .btn{height:34px}
.dropov{position:fixed;inset:0;z-index:90;background:rgba(32,26,33,.5);display:grid;place-items:center;color:#fff;font:600 18px Figtree,system-ui,sans-serif;pointer-events:none;padding:24px;text-align:center}

@media (max-width:1100px){.mduo{grid-template-columns:minmax(0,1.5fr) minmax(340px,1fr)}}
@media (max-width:1000px){
  .mduo{grid-template-columns:minmax(0,1fr)}
  .mapcard{position:relative;top:auto}
  .stage{height:560px}
}
@media (max-width:600px){
  .phead .ph-l{flex-basis:100%}
  .ch1{font-size:26px}
  .pa{width:100%}
  .pa .btn{flex:1 1 auto}
  .ex-fbar{padding:10px}
  .ex-fbar .lbl{width:100%}
  .ex-fbar .fwrap{flex:1 1 calc(50% - 4px);min-width:0}
  .ex-fbar .fwrap .ex-fsel{width:100%;justify-content:space-between}
  .ex-fsel .val{max-width:none;flex:1;text-align:left}
  .nsl{flex:1 1 100%}
  .nsl input[type=range]{flex:1;width:auto;min-width:60px}
  .srch{flex:1 1 100%}
  .tog{flex:1 1 100%}
  .stage{height:470px}
  .mapcard .chead{padding:14px 14px 0}
  .mlg{padding:10px 14px 12px}
  .side{padding:12px 12px 14px}
  .stabs button{font-size:12.5px;padding:5px 4px}
  .lh,.rr{grid-template-columns:22px minmax(0,1fr) 42px 28px;gap:6px}
  .lh .vh,.rr .v{display:none}
  .rr .nm em{display:none}
  .rr .nm em.jg-arch{display:inline}
  .kv{grid-template-columns:minmax(0,110px) minmax(0,1fr) auto}
  .rgt{grid-template-columns:84px minmax(0,1fr)}
  .mmenu{min-width:0}
  .ir{padding:10px 14px}
  .ih{padding:16px 14px 12px}
  .if{padding:12px 14px}
  .if .ifr{width:100%}
  .if .ifr .btn.primary{flex:1}
  dialog.imp{max-height:92vh}
}
/* ---------- A · the legend is the switch ---------- */

.cats{display:flex;flex-direction:column;gap:7px;padding:12px 18px 0}
.cg{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.cgl{font:500 10.5px ui-monospace,"JetBrains Mono",Menlo,monospace;letter-spacing:.06em;text-transform:uppercase;color:var(--faint);min-width:132px}
.cchip{display:inline-flex;align-items:center;gap:7px;height:30px;padding:0 11px 0 9px;border:1px solid var(--border-strong);border-radius:999px;background:var(--surface);font:500 13px Figtree,system-ui,sans-serif;color:var(--fg);cursor:pointer;white-space:nowrap;transition:background .15s,border-color .15s}
.cchip:hover{border-color:var(--fg)}
.cchip b{font-weight:600;font-variant-numeric:tabular-nums;color:var(--muted)}
.cchip.off{background:var(--soft2);border-style:dashed;color:var(--muted)}
.cchip.off .cl{text-decoration:line-through;text-decoration-thickness:1px}
.cchip.off i.sw{opacity:.28}
.cchip:focus-visible{outline:2px solid var(--fg);outline-offset:2px}
.cfoot{display:flex;align-items:center;gap:4px 12px;flex-wrap:wrap;font-size:12px;color:var(--muted);min-height:22px}
.cfoot b{color:var(--fg);font-variant-numeric:tabular-nums}
.cfoot .clr{color:var(--fg);text-decoration:underline;text-underline-offset:2px;font-size:12.5px;font-weight:600}
.mapcard.full .cats{padding-top:12px}
@media (max-width:600px){.cats{padding:10px 14px 0}.cgl{min-width:0;width:100%}.cchip{height:32px;padding:0 10px 0 8px;font-size:12.5px}}

/* ---------- the port (Oct 21): the new colour code in the lists, the sheet, the tooltip ---------- */
.rr .nm i.sw{flex:0 0 12px}
.nn{display:inline-flex;align-items:center;gap:7px;min-width:0}
.nn>span{overflow:hidden;text-overflow:ellipsis}
.sib .nn>span{white-space:nowrap}
.near .h .nn{font-weight:600}
.chip i.sw{width:11px;height:11px;flex:0 0 11px;margin-left:-1px}
.pst i.sw{width:12px;height:12px}
.onw i.sw{width:11px;height:11px}
.ctip .tsw{display:flex;align-items:center;gap:6px;margin:2px 0 3px;color:var(--fg);font-weight:600}
.ctip .tsw i.sw{flex:0 0 12px}
.ckey{list-style:none;padding:0!important;margin:6px 0 8px;display:flex;flex-direction:column;gap:7px!important}
.ckey li{display:flex;align-items:flex-start;gap:9px}
.ckey li i.sw,.ckey li .ramp{flex-shrink:0;margin-top:4px}
.ckey b{color:var(--fg);font-weight:600}
.ramp{display:inline-flex;gap:2px}
.ramp i{display:inline-block;width:12px;height:10px;border-radius:2px}
.ckey .ramp{margin-top:4px}
.mapa-pop{position:absolute;max-width:300px;padding:10px 12px}
.mapa-pop .mtext{margin:0;font-size:12.5px;color:var(--muted);line-height:1.5}
.cats .cgl{white-space:nowrap}
.afor{font-size:12.5px;color:var(--muted)}
.sib>span:last-child{white-space:nowrap;flex-shrink:0}
.sib .nn{flex:1 1 auto}
.act .afor{flex-basis:100%}

/* ---------- the market bar: the same on every market's pages (study-skin.css has the same block for the Market / Method pages) ---------- */
.mbar{padding:14px 20px 0;font-family:Figtree,system-ui,-apple-system,"Segoe UI",sans-serif}
.mb-in{display:flex;align-items:center;gap:10px 12px;flex-wrap:wrap}
.mb-dd{position:relative}
.mb-ddb{display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 12px;border:1px solid var(--border);border-radius:9px;background:var(--surface);font:600 13.5px Figtree,system-ui,sans-serif;color:var(--fg);cursor:pointer;max-width:100%}
.mb-ddb:hover,.mb-ddb[aria-expanded="true"]{border-color:var(--muted)}
.mb-ddb .k{font:500 10.5px ui-monospace,"JetBrains Mono",Menlo,monospace;letter-spacing:.06em;text-transform:uppercase;color:var(--faint)}
.mb-ddb .nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.mb-ddb .cv{font-size:10px;color:var(--faint)}
.mb-ddm{position:absolute;top:calc(100% + 6px);left:0;z-index:60;min-width:340px;max-width:calc(100vw - 28px);padding:5px;border:1px solid var(--border);border-radius:12px;background:var(--surface);box-shadow:0 16px 40px -16px rgba(32,26,33,.35),0 2px 6px rgba(32,26,33,.06)}
.mb-ddm .t{font:500 10.5px ui-monospace,"JetBrains Mono",Menlo,monospace;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);padding:6px 10px 4px}
.mb-ddm a{display:flex;flex-direction:column;gap:2px;padding:8px 10px;border-radius:8px;color:var(--fg);text-decoration:none}
.mb-ddm a:hover{background:var(--hover)}
.mb-ddm a.on{background:var(--sel)}
.mb-ddm a b{display:flex;align-items:center;gap:7px;font-size:13.5px;font-weight:600}
.mb-ddm a small{font-size:12px;color:var(--muted)}
.mb-ddm .sep{height:1px;background:var(--border);margin:4px 6px}
.mbar .tag{display:inline-block;font-size:10.5px;line-height:16px;padding:0 7px;border-radius:999px;font-weight:600}
.mbar .tag.prod{background:var(--tint);color:var(--ok)}
.mb-tabs{display:inline-flex;background:var(--soft2);border-radius:9px;padding:3px;gap:2px}
.mb-tabs a{display:inline-flex;align-items:center;height:30px;padding:0 13px;border-radius:7px;font-size:13px;font-weight:500;color:var(--muted);text-decoration:none;white-space:nowrap}
.mb-tabs a:hover{color:var(--fg)}
.mb-tabs a[aria-current="page"]{background:var(--surface);color:var(--fg);font-weight:600;box-shadow:0 1px 2px rgba(32,26,33,.12)}
.mb-note{font-size:12px;color:var(--muted)}
.mb-sp{flex:1}
.mb-wish{display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 13px;border:1px solid var(--border-strong);border-radius:9px;background:var(--surface);font-weight:600;font-size:13.5px;color:var(--fg);text-decoration:none;white-space:nowrap}
.mb-wish b{font-variant-numeric:tabular-nums}
.mb-wish:hover{border-color:var(--fg)}
@media (max-width:600px){
  .mbar{padding:12px 14px 0}
  .mb-dd,.mb-ddb{width:100%}
  .mb-ddb .nm{flex:1;text-align:left}
  .mb-ddm{min-width:0;width:100%}
  .mb-tabs{width:100%}.mb-tabs a{flex:1;justify-content:center;padding:0 6px}
  .mb-sp{display:none}
  .mb-wish{width:100%;justify-content:center}
}
/* Map A: full width under the bar, like the study pages */
.v2-map-a .cw{max-width:none;padding:14px 20px 72px}
@media (max-width:600px){.v2-map-a .cw{padding:12px 14px 56px}}
.sh .mute{color:var(--muted)}
.rgt .tx.law{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.mt a.lnk{color:var(--fg);text-decoration:underline;text-underline-offset:2px}
/* the suggested style of a course (gestion-cas 01 + 02, Oct 24): the sheet's row, the import's chip. The chip, select and « ? » are style-ui.css's. */
.sty-blk{margin:12px 0 2px}
.sty-nt{margin-top:6px;font-size:12.5px;color:var(--muted);line-height:1.45}
.sty-nt a{color:var(--fg);font-weight:600;text-decoration:underline;text-underline-offset:2px;white-space:nowrap}
.sty-nt a:hover{text-decoration-thickness:2px}
.sty-chip.sug{border-style:dashed}
.isty{margin:8px 0 0;font-size:12.5px;line-height:1.45;color:var(--muted)}
.ir .it{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:10px;align-items:start}
.ir .it .m{grid-column:1/-1}
.ir .it .sty-chip{align-self:center}