:root{
    --bg:#FFFFFF; --surface:#F4F7FA; --surface-2:#EAF0F6; --ink:#17222E; --mute:#5E6B78;
    --rule:#DDE4EB; --shadow:rgba(23,34,46,.10); --hero:#F7FAFC;
    --r1:#E4002B; --r2:#F26522; --r3:#D99400; --r4:#00A65A; --r5:#00838C;
    --r6:#0B6FD0; --r7:#4B3FA0; --r8:#C6007E;
    --ok:#00703C; --ok-bg:#E6F5ED; --bad:#C4002B; --bad-bg:#FBECEF; --focus:#0B6FD0; --warn:#9A5B00; --warn-bg:#FBF1E0;
    --display:"Barlow Condensed","Arial Narrow",Arial,sans-serif;
    --body:"Barlow","Helvetica Neue",Arial,sans-serif;
  }
  @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){
    --bg:#0F151B; --surface:#19222B; --surface-2:#212C37; --ink:#EDF2F7; --mute:#9DAAB7;
    --rule:#2A3541; --shadow:rgba(0,0,0,.45); --hero:#141C24;
    --r1:#FF5470; --r2:#FF8A4C; --r3:#FFC43D; --r4:#2BC77E; --r5:#2ECAD4;
    --r6:#4F9DF2; --r7:#9184E8; --r8:#F056A8;
    --ok:#2BC77E; --ok-bg:#12312A; --bad:#FF5470; --bad-bg:#33161D; --focus:#4F9DF2; --warn:#E8A93A; --warn-bg:#332912; } }
  :root[data-theme="dark"]{
    --bg:#0F151B; --surface:#19222B; --surface-2:#212C37; --ink:#EDF2F7; --mute:#9DAAB7;
    --rule:#2A3541; --shadow:rgba(0,0,0,.45); --hero:#141C24;
    --r1:#FF5470; --r2:#FF8A4C; --r3:#FFC43D; --r4:#2BC77E; --r5:#2ECAD4;
    --r6:#4F9DF2; --r7:#9184E8; --r8:#F056A8;
    --ok:#2BC77E; --ok-bg:#12312A; --bad:#FF5470; --bad-bg:#33161D; --focus:#4F9DF2; --warn:#E8A93A; --warn-bg:#332912; }

  *{box-sizing:border-box}
  body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--body);font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased}
  h1,h2,h3,h4{font-family:var(--display);font-weight:700;letter-spacing:-.01em;text-wrap:balance;margin:0}
  h1{font-size:clamp(44px,8vw,86px);line-height:.98}
  h2{font-size:clamp(28px,4.2vw,44px);line-height:1.06}
  h3{font-size:clamp(21px,2.6vw,27px);line-height:1.18}
  h4{font-size:19px;line-height:1.25;font-weight:600}
  p{margin:0}
  a{color:inherit}
  .eyebrow{font-family:var(--body);font-weight:600;font-size:13px;letter-spacing:.22em;text-transform:uppercase;color:var(--r8)}

  /* ---------- top bar ---------- */
  .ribbon{display:flex;height:7px;width:100%}
  .ribbon i{flex:1}
  .topbar{position:sticky;top:env(safe-area-inset-top,0px);z-index:40;background:var(--bg);border-bottom:1px solid var(--rule)}
  .topbar-in{max-width:1180px;margin:0 auto;padding:11px 20px;display:flex;align-items:center;gap:16px;flex-wrap:wrap}
  .mark{display:flex;gap:3px;align-items:center;cursor:pointer;background:none;border:0;padding:0}
  .mark i{width:9px;height:22px;border-radius:2px;display:block}
  .mark b{font-family:var(--display);font-size:22px;letter-spacing:.02em;margin-left:9px;white-space:nowrap}
  nav.main{display:flex;gap:4px;align-items:center;flex-wrap:wrap;margin-left:6px}
  .nv{background:none;border:0;font-family:var(--body);font-size:15px;font-weight:600;color:var(--mute);
      padding:7px 11px;border-radius:7px;cursor:pointer}
  .nv:hover{color:var(--ink);background:var(--surface)}
  .nv.on{color:var(--ink);background:var(--surface-2)}
  .pips{display:flex;gap:5px;align-items:center}
  .pip{width:30px;height:30px;border-radius:8px;border:1.5px solid var(--rule);background:transparent;color:var(--mute);
       font-family:var(--display);font-weight:700;font-size:16px;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0}
  .pip:hover{border-color:var(--ink);color:var(--ink)}
  .pip.on{border-color:var(--ink);color:var(--ink);background:var(--surface-2)}
  .pip.done{background:var(--ok);border-color:var(--ok);color:#fff}
  .right{margin-left:auto;display:flex;align-items:center;gap:10px}
  .lang{display:flex;border:1px solid var(--rule);border-radius:7px;overflow:hidden}
  .lang button{background:none;border:0;padding:6px 10px;font-family:var(--body);font-weight:600;font-size:13px;color:var(--mute);cursor:pointer}
  .lang button.on{background:var(--ink);color:var(--bg)}
  .progtext{font-size:13.5px;color:var(--mute);white-space:nowrap}
  button:focus-visible,.mark:focus-visible{outline:2px solid var(--focus);outline-offset:2px}

  .wrap{max-width:1180px;margin:0 auto;padding-inline:20px}
  .narrow{max-width:960px;margin:0 auto}

  /* ---------- hero ---------- */
  .hero{background:var(--hero);border-bottom:1px solid var(--rule);padding-block:clamp(34px,6vw,70px) clamp(34px,6vw,66px)}
  .hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(24px,4vw,56px);align-items:center}
  @media (max-width:880px){ .hero-grid{grid-template-columns:1fr} }
  .hero h1 span{display:block}
  .hero h1 .b{color:var(--r1)}
  .hero .lede{margin-top:20px;font-size:clamp(17px,1.9vw,20px);color:var(--mute);max-width:56ch}
  .ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
  .stats{display:flex;flex-wrap:wrap;gap:26px;margin-top:30px;padding-top:24px;border-top:1px solid var(--rule)}
  .stat b{display:block;font-family:var(--display);font-size:38px;line-height:1;font-variant-numeric:tabular-nums}
  .stat span{font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--mute);font-weight:600}

  /* animated bay */
  .bay{background:var(--bg);border:1px solid var(--rule);border-radius:16px;padding:18px 18px 14px;box-shadow:0 14px 40px var(--shadow)}
  .bayrow{display:flex;align-items:center;gap:12px;margin-bottom:9px}
  .baylab{flex:none;width:118px;text-align:right;font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--mute);font-variant-numeric:tabular-nums}
  .baytrack{flex:1;display:flex;gap:4px;height:46px}
  .blk{border-radius:3px;transform-origin:left center;animation:grow .75s cubic-bezier(.2,.8,.25,1) backwards}
  @keyframes grow{from{transform:scaleX(.9);opacity:.35}to{transform:scaleX(1);opacity:1}}
  .bayshelf{height:4px;background:var(--rule);border-radius:2px;margin:0 0 9px 130px}
  .baynote{margin-top:10px;padding-top:12px;border-top:1px solid var(--rule);font-size:13.5px;color:var(--mute)}
  .baynote b{color:var(--ink)}
  @media (prefers-reduced-motion:reduce){ .blk{animation:none} }

  /* ---------- buttons ---------- */
  button.btn,.btn{font-family:var(--body);font-size:16px;font-weight:600;padding:13px 24px;border-radius:9px;border:1px solid transparent;cursor:pointer}
  a.btn{display:inline-block;text-decoration:none;text-align:center;line-height:1.2}
  .primary{background:#D6002A;color:#fff}
  a.primary,a.primary:hover{color:#fff}
  .primary:hover{filter:brightness(1.08)}
  .blue{background:var(--r6);color:#fff}
  .blue:hover{filter:brightness(1.08)}
  .ghost{background:transparent;color:var(--ink);border-color:var(--rule)}
  .ghost:hover{border-color:var(--ink)}
  button[disabled]{opacity:.5;cursor:default}

  /* ---------- home blocks ---------- */
  .blockpad{padding-block:clamp(40px,6vw,68px)}
  .able{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:2px;margin-top:26px}
  .able div{background:var(--surface);padding:24px 22px 26px;border-top:4px solid var(--c)}
  .able h4{color:var(--c);margin-bottom:6px}
  .able p{font-size:15.5px;color:var(--mute)}
  .hook{background:var(--ink);color:#fff;border-radius:16px;padding:clamp(26px,4vw,44px);margin-top:10px}
  .hook .eyebrow{color:var(--r3)}
  .hook h2{margin-top:10px;color:#fff;max-width:20ch}
  .hook p{margin-top:16px;color:#C9D6E2;max-width:62ch;font-size:17.5px}
  .path{display:grid;grid-template-columns:repeat(auto-fit,minmax(310px,1fr));gap:18px;margin-top:26px}
  .card{background:var(--surface);border-radius:14px;overflow:hidden;text-align:left;border:0;padding:0;cursor:pointer;
        display:flex;flex-direction:column;font-family:var(--body);color:inherit;transition:transform .14s, box-shadow .14s}
  .card:hover{transform:translateY(-3px);box-shadow:0 12px 28px var(--shadow)}
  .card .thumb{aspect-ratio:16/9;background:#0b1117;position:relative;overflow:hidden}
  .card .thumb img{width:100%;height:100%;object-fit:cover;display:block}
  .card .n{position:absolute;left:12px;top:12px;width:38px;height:38px;border-radius:10px;background:var(--c);color:#fff;
           font-family:var(--display);font-weight:700;font-size:21px;display:flex;align-items:center;justify-content:center}
  .card .tick{position:absolute;right:12px;top:12px;background:var(--ok);color:#fff;font-size:12px;font-weight:700;
              letter-spacing:.1em;text-transform:uppercase;padding:5px 9px;border-radius:999px}
  .card .body{padding:16px 18px 20px;display:flex;flex-direction:column;gap:7px;flex:1}
  .card .dur{font-size:12.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--mute)}
  .card h4{font-family:var(--display);font-size:24px;font-weight:700;line-height:1.12}
  .card p{font-size:15px;color:var(--mute)}
  .card .go{margin-top:auto;padding-top:8px;font-weight:600;font-size:15px;color:var(--c)}
  .finalcard{margin-top:18px;background:var(--surface);border-radius:14px;padding:clamp(22px,3vw,34px);
             border-left:6px solid var(--r3);display:flex;gap:22px;align-items:center;flex-wrap:wrap}
  .finalcard .t{flex:1;min-width:260px}
  .finalcard h3{margin-bottom:6px}
  .finalcard p{color:var(--mute);font-size:16px}

  /* ---------- section view ---------- */
  .sechead{display:flex;gap:18px;align-items:flex-start;margin-top:8px}
  .secnum{flex:none;width:58px;height:58px;border-radius:14px;background:var(--c);color:#fff;
          font-family:var(--display);font-weight:700;font-size:30px;display:flex;align-items:center;justify-content:center}
  .secmeta{font-size:13.5px;color:var(--mute);letter-spacing:.08em;text-transform:uppercase;font-weight:600}
  .seclede{margin-top:9px;color:var(--mute);max-width:64ch}
  .covers{display:flex;flex-wrap:wrap;gap:6px;margin-top:18px}
  .cov{font-size:14px;padding:5px 11px;border-radius:6px;background:var(--surface)}
  .player{margin-top:22px;border-radius:12px;overflow:hidden;background:#000;box-shadow:0 10px 30px var(--shadow);line-height:0}
  .player video{width:100%;height:auto;aspect-ratio:16/9;max-width:100%;display:block}
  .sheetrow{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:14px}
  .sheetnote{font-size:14px;color:var(--mute)}

  /* ---------- around the player: resume chip, transcript, script, practical ---------- */
  .player{position:relative}
  .player .resume{position:absolute;left:14px;bottom:58px;line-height:1.2;font-family:var(--body);font-size:14px;font-weight:600;
    padding:8px 13px;border-radius:999px;border:0;background:rgba(255,255,255,.92);color:#17222E;cursor:pointer;box-shadow:0 4px 14px rgba(0,0,0,.35)}
  .player .resume:hover{background:#fff}
  .transcript,.sheettext{margin-top:14px;background:var(--surface);border-radius:12px;padding:14px 18px}
  .transcript summary,.sheettext summary{cursor:pointer;font-family:var(--display);font-weight:700;font-size:18px;letter-spacing:.02em}
  .transcript .tx{margin-top:12px;font-size:15.5px;line-height:1.6;color:var(--ink);max-width:70ch}
  .transcript .dl{display:inline-block;margin-top:12px;font-size:14px;font-weight:600;color:var(--r6)}
  .script{margin-top:22px;padding:22px 24px;border-radius:12px;background:var(--surface);border-left:6px solid var(--r3)}
  .script .eyebrow{color:var(--r3)}
  .scriptsub{margin-top:6px;font-size:15px;color:var(--mute);max-width:64ch}
  .prose{margin-top:14px;font-size:16px;line-height:1.6;max-width:72ch}
  .prose h4{font-family:var(--display);font-size:19px;margin:18px 0 6px}
  .prose p{margin:0 0 12px}
  .prose ul{margin:0 0 12px 20px;padding:0}
  .prose li{margin:3px 0}
  .prose .cue{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13.5px;color:var(--r8);background:var(--surface-2);
    padding:1px 6px;border-radius:5px}
  .practical{margin-top:18px;padding:20px 22px;border-radius:12px;background:var(--surface);border-left:6px solid var(--r4);
    display:flex;gap:20px;align-items:center;flex-wrap:wrap}
  .practical .pt{flex:1;min-width:260px}
  .practical .eyebrow{color:var(--r4)}
  .practical p{margin-top:6px;font-size:16.5px;line-height:1.5}
  .practical .note{display:block;margin-top:6px;font-size:13.5px;color:var(--mute)}
  .badge.script{background:var(--surface-2);color:var(--mute);vertical-align:middle;margin-left:8px;white-space:nowrap}
  .ccard .badge.script{margin:0 0 2px;align-self:flex-start}

  /* ---------- quiz ---------- */
  .quiz{margin-top:38px}
  .quizsub{color:var(--mute);font-size:16px;max-width:62ch;margin-top:5px}
  .q{margin-top:20px;background:var(--surface);border-radius:12px;padding:22px 20px;border-left:5px solid var(--c)}
  .qnum{font-family:var(--display);font-weight:700;font-size:13.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--c)}
  .stem{font-size:18px;font-weight:500;margin-top:3px;text-wrap:pretty}
  fieldset{border:0;margin:0;padding:0} legend{padding:0;width:100%}
  .opts{display:grid;gap:8px;margin-top:14px}
  .opt{display:flex;gap:12px;align-items:flex-start;background:var(--bg);border:1px solid var(--rule);
       border-radius:8px;padding:11px 13px;cursor:pointer;transition:border-color .12s,background .12s}
  .opt:hover{border-color:var(--c)}
  .opt input{margin:4px 0 0;accent-color:var(--c);flex:none;width:17px;height:17px}
  .opt .tx{font-size:16px}
  .opt:focus-within{outline:2px solid var(--focus);outline-offset:2px}
  .opt.is-right{border-color:var(--ok);background:var(--ok-bg)}
  .opt.is-wrong{border-color:var(--bad);background:var(--bad-bg)}
  .mk{margin-left:auto;font-weight:600;font-size:13.5px;flex:none;padding-left:8px}
  .opt.is-right .mk{color:var(--ok)} .opt.is-wrong .mk{color:var(--bad)}
  .why{margin-top:13px;padding:13px 15px;border-radius:8px;background:var(--surface-2);font-size:16px;line-height:1.5}
  .why b{font-family:var(--display);font-size:14.5px;letter-spacing:.1em;text-transform:uppercase;display:block;margin-bottom:3px;color:var(--mute)}
  .actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:22px}
  .note{font-size:15px;color:var(--mute)}
  .score{margin-top:22px;padding:20px 22px;border-radius:12px;background:var(--surface);border-left:5px solid var(--ok)}
  .score .big{font-family:var(--display);font-size:48px;font-weight:700;line-height:1;font-variant-numeric:tabular-nums}
  .score .msg{margin-top:5px;font-size:17px;color:var(--mute)}
  .score .pct{font-size:20px;color:var(--mute);font-family:var(--body);font-weight:600;margin-left:8px}

  /* ---------- reference ---------- */
  .scroller{overflow-x:auto}
  table{border-collapse:collapse;font-size:15px;width:100%}
  .mx{min-width:820px}
  .mx th,.mx td{padding:11px 14px 11px 0;border-bottom:1px solid var(--rule);text-align:left;vertical-align:top}
  .mx thead th{font-family:var(--display);font-size:19px;font-weight:700}
  .mx thead .sub th{font-family:var(--body);font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
                    color:var(--mute);border-bottom:2px solid var(--ink);padding-top:0}
  .mx tbody th{font-weight:600;white-space:nowrap;padding-right:22px}
  .fx{width:100%;margin-top:16px}
  .fx td{padding:11px 14px 11px 0;border-bottom:1px solid var(--rule);vertical-align:top}
  .fx .nm{font-weight:600;white-space:nowrap}
  .fx .fo{color:var(--mute);font-variant-numeric:tabular-nums}
  .dot{width:11px;height:11px;border-radius:50%;display:inline-block;margin-right:11px;vertical-align:1px}
  .pull{margin-top:22px;padding:18px 20px;border-left:5px solid var(--r3);background:var(--surface);font-size:18px}
  footer{margin-top:64px;padding:26px 0 70px;border-top:1px solid var(--rule);font-size:14px;color:var(--mute)}
  .backlink{margin-top:34px}
  @media (max-width:520px){ .q{padding:18px 15px} .actions .btn{width:100%} .sheetrow .btn{width:100%}
    .baylab{width:82px;font-size:11px} .bayshelf{margin-left:94px} }
  @media (prefers-reduced-motion:reduce){ *{transition:none!important;animation:none!important;scroll-behavior:auto!important} }

/* ---------- app chrome ---------- */
.lang a{display:block;padding:6px 10px;font-family:var(--body);font-weight:600;font-size:13px;color:var(--mute);text-decoration:none}
.lang a.on{background:var(--ink);color:var(--bg)}
a.nv{text-decoration:none;display:inline-block}
a.pip{text-decoration:none}
.mark{text-decoration:none;color:inherit}
.auth{max-width:470px;margin:0 auto;padding:44px 20px 80px}
.authcard{background:var(--surface);border-radius:16px;padding:30px 28px 32px;box-shadow:0 12px 34px var(--shadow)}
.authcard h2{margin-bottom:6px}
.authcard p.sub{color:var(--mute);font-size:15.5px}
.field{margin-top:16px}
.field label{display:block;font-size:13.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--mute);margin-bottom:5px}
.field input,.field select,.field textarea{width:100%;font-family:var(--body);font-size:16px;padding:12px 13px;
  border:1px solid var(--rule);border-radius:8px;background:var(--bg);color:var(--ink)}
.field input:focus,.field select:focus,.field textarea:focus{outline:2px solid var(--focus);outline-offset:1px;border-color:var(--focus)}
.formactions{margin-top:22px;display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.linkbtn{background:none;border:0;color:var(--r6);font-family:var(--body);font-size:15px;font-weight:600;cursor:pointer;padding:0;text-decoration:underline}
.alert{margin-top:16px;padding:12px 14px;border-radius:8px;background:var(--bad-bg);color:var(--bad);font-size:15px;border-left:4px solid var(--bad)}
.ok{background:var(--ok-bg);color:var(--ok);border-left-color:var(--ok)}
.userchip{display:flex;align-items:center;gap:9px;font-size:14px;color:var(--mute)}
.userchip b{color:var(--ink);font-weight:600;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.04em}

.prog{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px;margin-top:24px}
.pcard{background:var(--surface);border-radius:12px;padding:20px;border-left:5px solid var(--c);display:flex;gap:16px;align-items:center}
.pcard .pn{flex:none;width:44px;height:44px;border-radius:11px;background:var(--c);color:#fff;font-family:var(--display);
  font-weight:700;font-size:23px;display:flex;align-items:center;justify-content:center}
.pcard .pt{flex:1}
.pcard h4{font-size:19px;font-family:var(--display);font-weight:700}
.pcard .ps{font-size:14px;color:var(--mute);margin-top:2px;font-variant-numeric:tabular-nums}
.pcard .pb{font-family:var(--display);font-size:26px;font-weight:700;font-variant-numeric:tabular-nums}

.adminwrap{max-width:1320px;margin:0 auto;padding:0 20px}
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;margin-top:22px}
.tile{background:var(--surface);border-radius:12px;padding:20px;border-top:4px solid var(--c)}
.tile b{display:block;font-family:var(--display);font-size:42px;line-height:1;font-variant-numeric:tabular-nums}
.tile span{font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--mute);font-weight:600}
table.grid{width:100%;border-collapse:collapse;margin-top:18px;font-size:15px}
table.grid th{text-align:left;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--mute);
  font-weight:600;padding:0 12px 9px 0;border-bottom:2px solid var(--ink);white-space:nowrap}
table.grid td{padding:10px 12px 10px 0;border-bottom:1px solid var(--rule);vertical-align:middle}
table.grid tr:hover td{background:var(--surface)}
.badge{display:inline-block;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  padding:4px 9px;border-radius:999px;background:var(--surface-2);color:var(--mute)}
.badge.good{background:var(--ok-bg);color:var(--ok)}
.badge.bad{background:var(--bad-bg);color:var(--bad)}
.code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:14px;background:var(--surface-2);
  padding:3px 8px;border-radius:5px;letter-spacing:.06em}
.toolbar{display:flex;gap:12px;flex-wrap:wrap;align-items:flex-end;margin-top:20px}
.toolbar .field{margin-top:0}
.split{display:grid;grid-template-columns:1fr 1fr;gap:26px;margin-top:8px}
@media (max-width:860px){ .split{grid-template-columns:1fr} }
.panel{background:var(--surface);border-radius:12px;padding:22px}
.panel h3{margin-bottom:4px}
.panel p.sub{color:var(--mute);font-size:14.5px}

/* certificate */
.cert{max-width:900px;margin:0 auto;background:var(--bg);border:2px solid var(--ink);padding:56px 60px;margin-top:30px}
.cert .cbow{display:flex;height:10px;margin:-56px -60px 40px}
.cert .cbow i{flex:1}
.cert h1{font-size:46px;margin-bottom:10px}
.cert .who{font-family:var(--display);font-size:56px;font-weight:700;margin:26px 0 10px}
.cert .meta{display:flex;gap:40px;margin-top:34px;padding-top:22px;border-top:1px solid var(--rule);flex-wrap:wrap}
.cert .meta div span{display:block;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--mute);font-weight:600}
.cert .meta div b{font-family:var(--display);font-size:24px}
@media print{ .topbar,.ribbon,footer,.noprint{display:none!important} .cert{border:0;margin:0} body{background:#fff} }

/* ---------- platform: catalogue and tools ---------- */
.catgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:26px}
@media (max-width:1000px){.catgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.catgrid{grid-template-columns:1fr}}
.ccard{background:var(--surface);border-radius:14px;overflow:hidden;display:flex;flex-direction:column;
  border-top:5px solid var(--c);text-decoration:none;color:inherit;transition:transform .16s,box-shadow .16s}
.ccard:hover{transform:translateY(-3px);box-shadow:0 14px 32px var(--shadow)}
.ccard .cim{display:block;aspect-ratio:16/9;background:var(--surface-2);position:relative;overflow:hidden}
.ccard .cim img{width:100%;height:100%;object-fit:cover;display:block}
.ccard .cb{display:flex;padding:20px 22px 24px;flex:1;flex-direction:column;gap:8px}
.ccard .ck{display:block;font-size:12px;letter-spacing:.12em;text-transform:uppercase;font-weight:700;color:var(--c)}
.ccard h3{font-size:25px;line-height:1.12}
.ccard p{display:block;color:var(--mute);font-size:15.5px;flex:1}
.ccard .cf{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:6px;
  padding-top:14px;border-top:1px solid var(--rule)}
.ccard .cf .st{font-size:13.5px;font-weight:600;color:var(--mute);font-variant-numeric:tabular-nums}
.ccard .cf .go{font-family:var(--display);font-weight:700;font-size:17px;color:var(--c)}
.ccard .bar{display:block;height:6px;background:var(--surface-2);border-radius:3px;overflow:hidden;margin-top:4px}
.ccard .bar i{display:block;height:100%;background:var(--c)}

/* featured course — the promoted "à la une" hero above the grid */
.hero{display:grid;grid-template-columns:1fr 42%;gap:0;margin-top:26px;background:var(--surface);
  border-radius:16px;overflow:hidden;text-decoration:none;color:inherit;border:1px solid var(--rule);
  border-left:6px solid var(--c);transition:transform .16s,box-shadow .16s}
.hero:hover{transform:translateY(-3px);box-shadow:0 18px 40px var(--shadow)}
.hero .hcopy{padding:40px 44px;display:flex;flex-direction:column;gap:12px;justify-content:center}
.hero .hbadge{align-self:flex-start;display:inline-block;background:var(--c);color:#fff;font-size:12.5px;
  font-weight:700;letter-spacing:.12em;text-transform:uppercase;padding:5px 12px;border-radius:999px}
.hero .hk{font-size:13px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--c)}
.hero h3{font-size:34px;line-height:1.1;letter-spacing:-.01em}
.hero p{color:var(--mute);font-size:16.5px;line-height:1.5;max-width:60ch}
.hero .hcta{margin-top:8px;font-family:var(--display);font-weight:700;font-size:18px;color:var(--c)}
.hero .him{position:relative;background:var(--surface-2);min-height:260px}
.hero .him img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero .hbs{position:absolute;top:14px;right:14px}
@media (max-width:820px){.hero{grid-template-columns:1fr}.hero .him{order:-1;min-height:180px}.hero h3{font-size:27px}}
.toolcard{background:var(--surface);border-radius:14px;padding:26px;border-left:6px solid var(--c);
  display:flex;gap:24px;align-items:center;flex-wrap:wrap;margin-top:18px}
.toolcard .tt{flex:1;min-width:260px}
.toolcard h3{font-size:25px}
.toolcard p{color:var(--mute);font-size:15.5px;margin-top:6px;max-width:64ch}
.secnote{margin-top:14px;font-size:14px;color:var(--mute);max-width:70ch}

/* ---------- code sheet (printable) ---------- */
.sheet{margin-top:22px}
.sheet table{width:100%;border-collapse:collapse;font-size:15px}
.sheet th{text-align:left;font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--mute);
  padding:0 10px 8px 0;border-bottom:2px solid var(--ink)}
.sheet td{padding:11px 10px 11px 0;border-bottom:1px solid var(--rule);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:15px;letter-spacing:.05em}
.sheet td.cut{font-family:var(--body);color:var(--mute);font-size:13px;letter-spacing:0}

/* ---------- planogram editor ---------- */
.plwrap{max-width:1500px;margin:0 auto;padding:0 20px}
.pllayout{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:24px;margin-top:22px;align-items:start}
@media (max-width:1100px){ .pllayout{grid-template-columns:1fr} }
.plstage{background:var(--surface);border-radius:14px;padding:20px}
.plbar{display:flex;gap:12px;flex-wrap:wrap;align-items:flex-end;margin-bottom:18px}
.plbar .field{margin-top:0}
.plfix{border:1px solid var(--rule);border-radius:10px;overflow:hidden;background:var(--bg)}
.plband{display:flex;align-items:stretch;border-bottom:1px solid var(--rule);min-height:76px;cursor:pointer}
.plband:last-child{border-bottom:0}
.plband.sel{outline:3px solid var(--focus);outline-offset:-3px}
.plband.dead{background:repeating-linear-gradient(45deg,var(--surface-2),var(--surface-2) 7px,transparent 7px,transparent 14px)}
.plband .bl{flex:none;width:210px;padding:10px 12px;border-right:1px solid var(--rule);
  font-size:11.5px;letter-spacing:.08em;font-weight:700;color:var(--mute);display:flex;flex-direction:column;justify-content:center;gap:3px}
.plband .bl em{font-style:normal;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:11px;letter-spacing:.02em;color:var(--mute);opacity:.8}
.plband .bt{flex:1;display:flex;gap:3px;padding:8px;min-width:0}
.plblk{border-radius:5px;color:#fff;font-size:12px;font-weight:600;padding:7px 8px;overflow:hidden;
  display:flex;flex-direction:column;justify-content:space-between;min-width:0;line-height:1.2}
.plblk b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:700;font-size:12.5px}
.plblk .f{font-variant-numeric:tabular-nums;opacity:.86;font-size:11px;letter-spacing:.04em}
.plblk button{background:rgba(255,255,255,.22);border:0;color:#fff;border-radius:4px;cursor:pointer;
  font-family:var(--body);font-weight:700;font-size:12px;line-height:1;padding:3px 6px}
.plside{display:flex;flex-direction:column;gap:18px}
.plpanel{background:var(--surface);border-radius:14px;padding:20px}
.plpanel h3{font-size:19px;margin-bottom:10px}
.plline{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--rule);cursor:pointer}
.plline:last-child{border-bottom:0}
.plline.sel{background:var(--surface-2);margin:0 -10px;padding-left:10px;padding-right:10px;border-radius:7px}
.plline .sw{flex:none;width:16px;height:16px;border-radius:4px}
.plline .nm{flex:1;min-width:0}
.plline .nm b{display:block;font-size:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.plline .nm span{font-size:12.5px;color:var(--mute);font-variant-numeric:tabular-nums}
.plline .fc{font-variant-numeric:tabular-nums;font-weight:700;font-size:15px}
/* KPI cards (Operations) — one definition for the whole suite. A card sets its
   own accent with `style="--kc:#RRGGBB"`; default falls back to the focus token.
   Previously copy-pasted into day/pl/retail/month/quote — centralised here. */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;margin:4px 0 18px}
.kpi{border:1px solid var(--rule);border-radius:16px;padding:16px;background:var(--bg);position:relative;overflow:hidden}
.kpi::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:var(--kc,var(--focus))}
.kpi .lab{color:var(--mute);font-size:13px;font-weight:600}
.kpi .val{font-family:var(--display);font-weight:800;font-size:clamp(18px,1.7vw,22px);margin-top:4px;line-height:1.15;overflow-wrap:break-word}
.kpi .sub{color:var(--mute);font-size:12px;margin-top:3px}
.plkpi{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.plkpi div{background:var(--surface-2);border-radius:9px;padding:12px 13px}
.plkpi b{display:block;font-family:var(--display);font-size:27px;line-height:1.05;font-variant-numeric:tabular-nums}
.plkpi span{font-size:11.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--mute);font-weight:600}
.plchk{margin:0;padding:0;list-style:none}
.plchk li{display:flex;gap:9px;align-items:flex-start;padding:8px 0;border-bottom:1px solid var(--rule);font-size:14.5px}
.plchk li:last-child{border-bottom:0}
.plchk li i{flex:none;width:18px;height:18px;border-radius:50%;margin-top:2px;font-style:normal;color:#fff;
  font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center}
.plchk li.no i{background:var(--bad)} .plchk li.yes i{background:var(--ok)} .plchk li.warn i{background:var(--r3)}
.plsaved{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--rule);font-size:14.5px}
.plsaved:last-child{border-bottom:0}
.plsaved .nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.plsaved .dt{font-size:12.5px;color:var(--mute);white-space:nowrap}
.plhint{font-size:13.5px;color:var(--mute);margin-top:12px}

/* ---------- certification paths (home) ---------- */
.cpaths{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:20px;margin-top:22px}
.cpath{background:var(--surface);border-radius:14px;padding:22px 24px;border-top:5px solid var(--c);display:flex;flex-direction:column;gap:14px}
.cpath .ph p{color:var(--mute);font-size:15px;margin-top:4px;max-width:56ch}
.cpath .pl{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:7px}
.cpath .pl li{display:flex;align-items:center;gap:10px;font-size:15.5px;color:var(--mute);flex-wrap:wrap}
.cpath .pl li.ok{color:var(--ink)}
.cpath .pl li a{color:var(--ink);text-decoration:none;font-weight:600}
.cpath .pl li a:hover{text-decoration:underline}
.cpath .tick{flex:none;width:24px;height:24px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;
  font-weight:700;font-size:14px;background:var(--surface-2);color:var(--mute)}
.cpath .pl li.ok .tick{background:var(--ok-bg);color:var(--ok)}
.cpath .pf{display:flex;flex-direction:column;gap:6px;margin-top:auto}
.cpath .bar{display:block;height:6px;background:var(--surface-2);border-radius:3px;overflow:hidden}
.cpath .bar i{display:block;height:100%;background:var(--c)}
.cpath .st{font-size:13.5px;color:var(--mute);font-variant-numeric:tabular-nums}
.cpath .st b{color:var(--ok)}

/* ---------- country parameters (regulated-display course) ---------- */
.cparams .cptable{min-width:720px;font-size:14px;margin-top:12px}
.cparams .cptable th{font-size:13px}
.cparams .cptable td.todo{color:var(--r3);font-weight:600;font-size:12.5px;letter-spacing:.04em;text-transform:uppercase}
.cparams .cptable{min-width:1100px}
.cparams .cptable td.cell{vertical-align:top;min-width:220px;font-size:13px;line-height:1.4}
.cparams .cptable td.cell .rule{margin-bottom:6px}
.cparams .cptable td.cell .meta{font-size:11.5px;color:var(--mute);margin-top:2px;overflow-wrap:anywhere}
.cparams .cptable td.cell .meta b{font-weight:600;color:inherit}
.cparams .cptable td.cell .meta a{color:inherit;text-decoration:underline dotted}
.cparams .cptable td.c1 .conf{color:var(--ok)}
.cparams .cptable td.c2 .conf{color:var(--r3)}
.cparams .cptable td.c3 .conf{color:var(--r3);font-weight:600}
.cparams .cptable td.c3 .rule{font-style:italic}

/* ============================================================
   Accessibility (WCAG 2.1 AA)
   Ajouts uniquement — réutilise les variables :root existantes
   (--focus, --bg, --ink, --surface-2, --rule). Ne réécrit rien.
   ============================================================ */

/* 1) Skip link : hors écran par défaut, visible au focus clavier */
.skip{
  position:absolute;
  left:8px;
  top:-100px;                 /* poussé hors de l'écran */
  z-index:100;                /* au-dessus du topbar (z-index:40) */
  padding:10px 16px;
  background:#0A57B0;
  color:#fff;
  font-family:var(--body);
  font-weight:600;
  font-size:15px;
  text-decoration:none;
  border-radius:8px;
  box-shadow:0 6px 20px var(--shadow);
  transition:top .15s ease;
}
.skip:focus,
.skip:focus-visible{
  top:calc(8px + env(safe-area-inset-top,0px));
  outline:3px solid var(--ink);
  outline-offset:2px;
}

/* 2) Utilitaire lecteur d'écran uniquement */
.sr-only{
  position:absolute !important;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  clip-path:inset(50%);
  white-space:nowrap;
  border:0;
}
.sr-only-focusable:focus,
.sr-only-focusable:focus-visible{
  position:static !important;
  width:auto;height:auto;
  margin:0;overflow:visible;
  clip:auto;clip-path:none;
  white-space:normal;
}

/* 3) Focus visible net et contrasté sur tous les éléments interactifs.
   Étend la règle existante (button/.mark) aux liens, champs et nav. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible,
.nv:focus-visible,
.pip:focus-visible,
.btn:focus-visible,
.lang button:focus-visible{
  outline:3px solid var(--focus);
  outline-offset:2px;
  border-radius:6px;
}
/* Sécurité : si un focus par défaut n'apparaît pas (souris),
   on garde au moins un anneau visible au clavier ci-dessus.
   Aucune règle existante ne fait outline:none — rien à rétablir. */

/* Filet de sécurité thème sombre : tout champ de formulaire non encapsulé
   dans .tform/.field reste lisible (fond + texte + bordure suivent le thème).
   Ces sélecteurs sont peu spécifiques : .tform/.field/.readrow (plus
   spécifiques) conservent leur style. Corrige les écrans à formulaires bruts. */
input[type=text],input[type=number],input[type=search],input[type=tel],
input[type=email],input[type=url],input[type=date],input[type=datetime-local],
input[type=month],input[type=time],input[type=password],input:not([type]),
select,textarea{
  font-family:var(--body);font-size:15px;color:var(--ink);background:var(--bg);
  border:1px solid var(--rule);border-radius:8px;padding:8px 10px;
  color-scheme:light dark}
input::placeholder,textarea::placeholder{color:var(--mute)}

/* Grille de cases à cocher présentables (outils autorisés, cours ouverts…) :
   chaque option est une carte bordée, l'état coché est mis en évidence. */
.formsec{font-size:12.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--mute);margin:18px 0 0}
.checkgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:8px;margin-top:9px}
.checkitem{display:flex;gap:10px;align-items:center;border:1px solid var(--rule);border-radius:9px;
  padding:9px 12px;font-size:14.5px;cursor:pointer;background:var(--bg);
  transition:border-color .12s,background .12s}
.checkitem:hover{border-color:var(--focus)}
.checkitem input{width:17px;height:17px;flex:none;accent-color:var(--focus);margin:0}
.checkitem:has(input:checked){border-color:var(--focus);background:color-mix(in srgb,var(--focus) 9%,var(--bg))}

/* 4) La cible du skip-link (main[tabindex="-1"]) ne doit pas afficher de halo */
#main:focus{outline:none;}

/* 5) Respect de prefers-reduced-motion (complète les blocs existants,
   ajoute la neutralisation du scroll fluide au niveau racine) */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto !important;}
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    animation:none !important;
    transition:none !important;
    scroll-behavior:auto !important;
  }
}

/* 6) Contraste : --mute (#5E6B78) sur blanc = ~5.45:1 → conforme AA (≥4.5:1).
   Aucune surcharge nécessaire ; laissé tel quel. */

/* 7) Cibles tactiles confortables sur mobile (≥40px) pour les petits liens */
@media (max-width:640px){
  .nv,
  .lang button,
  .footlinks a,
  .right > a{
    min-height:40px;
    display:inline-flex;
    align-items:center;
  }
  .pip{
    min-width:40px;
    min-height:40px;
  }
}

/* ---------------------------------------------------------------------------
   Lisibilité des accents en TEXTE (correctif contraste).
   Les teintes vives (ambre, vert, orange…) passent mal en petit texte sur fond
   blanc. On fonce la teinte pour le texte en thème clair, tout en gardant la
   teinte vive en thème sombre (où le texte est sur fond foncé). Les usages
   décoratifs (pastilles, barres, images) gardent la teinte vive d'origine.
   --------------------------------------------------------------------------- */
:root{ --tshade:#071320; --tamt:66%; }         /* clair : foncer le texte coloré */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){ --tshade:#ffffff; --tamt:100%; }
}
:root[data-theme="dark"]{ --tshade:#ffffff; --tamt:100%; }

.able h4, .card .go, .qnum,
.ccard .ck, .ccard .cf .go, .hero .hk, .hero .hcta{
  color: var(--c);                                             /* repli navigateurs anciens */
  color: color-mix(in srgb, var(--c) var(--tamt), var(--tshade));
}
.eyebrow{
  color: var(--r8);
  color: color-mix(in srgb, var(--r8) var(--tamt), var(--tshade));
}
.hook .eyebrow, .script .eyebrow{
  color: var(--r3);
  color: color-mix(in srgb, var(--r3) var(--tamt), var(--tshade));
}
.practical .eyebrow{
  color: var(--r4);
  color: color-mix(in srgb, var(--r4) var(--tamt), var(--tshade));
}

/* ===========================================================================
   Bandeaux photo, en-têtes de page et cartes pictos — design réutilisable
   (hub Operations, accueils, pages outils). Fond blanc, arc-en-ciel franc.
   =========================================================================== */
.tw{max-width:1060px;margin:0 auto;padding:22px 16px 48px}

/* --- Bandeau d'accueil avec photo (visages dégagés : carte compacte en bas) --- */
.hero-op{position:relative;border-radius:20px;overflow:hidden;margin-bottom:30px;
  background:#0B1620 no-repeat;background-size:cover;background-position:50% 26%;
  min-height:clamp(280px,38vw,360px);display:flex;align-items:flex-end}
.hero-op::after{content:"";position:absolute;left:0;right:0;bottom:0;height:52%;
  background:linear-gradient(to top,rgba(9,18,28,.55),rgba(9,18,28,0));pointer-events:none}
.hero-op .hbar{position:absolute;top:0;left:0;right:0;height:6px;display:flex;z-index:2}
.hero-op .hbar i{flex:1}
.hero-in{position:relative;z-index:2;display:flex;align-items:center;gap:16px;
  margin:0 0 18px 18px;padding:14px 20px;color:#fff;
  background:rgba(9,18,28,.66);backdrop-filter:blur(7px);border-radius:16px;max-width:min(92%,560px)}
.hero-in img.av{width:66px;height:66px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 3px rgba(255,255,255,.9);flex:none}
.hero-in h1{font-family:var(--display);font-weight:800;font-size:clamp(24px,3.4vw,34px);margin:0;line-height:1.05;color:#fff}
.hero-in .sub{opacity:.92;margin:3px 0 0;font-size:14px}
.hero-badges{margin-top:10px;display:flex;gap:8px;flex-wrap:wrap}
.hero-badges span{background:rgba(255,255,255,.18);border-radius:20px;padding:4px 11px;font-size:12.5px;font-weight:600}

/* --- En-tête de page allégé (pages de travail) : picto + titre + trait couleur --- */
.pghead{display:flex;align-items:center;gap:14px;margin:6px 0 22px;padding-bottom:16px;
  border-bottom:1px solid var(--rule)}
.pghead .pico{width:48px;height:48px;border-radius:12px;flex:none;display:flex;align-items:center;justify-content:center;
  color:#fff;background:var(--tc,#0B6FD0)}
.pghead .pico svg{width:27px;height:27px}
.pghead h1{margin:0;font-family:var(--display);font-weight:800;font-size:clamp(26px,4vw,38px);line-height:1.02}
.pghead p{margin:3px 0 0;color:var(--mute);font-size:15px}
.pghead .txt{min-width:0}

/* --- En-tête de section : barre couleur + titre --- */
.sec-h{display:flex;align-items:center;gap:11px;margin:6px 0 14px}
.sec-h .bar{width:11px;height:28px;border-radius:3px}
.sec-h h2{margin:0;font-family:var(--display);font-weight:700;font-size:27px}

/* --- Grille de cartes outils avec pictogramme --- */
.op-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:16px}
.op-card{position:relative;display:block;text-decoration:none;color:inherit;background:var(--bg);
  border:1px solid var(--rule);border-radius:16px;padding:18px;height:100%;overflow:hidden;
  transition:transform .12s ease,box-shadow .12s ease}
.op-card::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:var(--tc)}
a.op-card:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(11,22,32,.12)}
.op-ic{width:46px;height:46px;border-radius:12px;display:flex;align-items:center;justify-content:center;color:#fff;background:var(--tc);margin:6px 0 12px}
.op-ic svg{width:26px;height:26px}
.op-card h3{margin:0 0 4px;font-size:18px}
.op-card p{margin:0;color:var(--mute);font-size:14px;line-height:1.45}
.op-soon{font-size:11px;font-weight:700;letter-spacing:.06em;background:var(--surface-2);color:var(--mute);border-radius:10px;padding:2px 8px;text-transform:uppercase}
@media(max-width:560px){.hero-in{flex-wrap:wrap}}

/* --- Formulaires d'administration lisibles (réseau, permissions, etc.) --- */
.card-pad{background:var(--bg);border:1px solid var(--rule);border-radius:16px;padding:20px}
.form2{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-bottom:20px}
@media(max-width:720px){.form2{grid-template-columns:1fr}}
.form2>.card-pad{min-width:0}
@media (max-width:640px){.card-pad{padding:14px}.card-pad .dtable{display:block;overflow-x:auto;max-width:100%}}
.tform .fld{margin:0 0 14px}
.tform label{display:block;font-weight:600;font-size:13px;color:var(--ink);margin:0 0 5px}
.tform input[type=text],.tform input[type=email],.tform input:not([type]),
.tform select,.tform textarea{
  width:100%;padding:10px 12px;border:1px solid var(--rule);border-radius:9px;
  font:inherit;background:var(--bg);color:var(--ink);box-sizing:border-box}
.tform input:focus,.tform select:focus,.tform textarea:focus{
  outline:2px solid var(--focus);outline-offset:1px;border-color:var(--focus)}
.tform .row{display:flex;gap:12px;flex-wrap:wrap}
.tform .row .fld{flex:1;min-width:140px}
.tform .hint{color:var(--mute);font-size:13px;margin:0 0 14px}
/* bandeaux d'état */
.flash{padding:12px 14px;border-radius:10px;margin:14px 0;font-weight:500}
.flash.ok{background:var(--ok-bg);border:1px solid var(--ok);color:var(--ok)}
.flash.err{background:var(--bad-bg);border:1px solid var(--bad);color:var(--bad)}
/* arbre du réseau */
.nettree{background:var(--bg);border:1px solid var(--rule);border-radius:16px;padding:14px 18px}
.nettree .node{display:flex;align-items:center;gap:8px;padding:5px 0;font-size:15px}
.nettree .tag{font-size:11px;font-weight:700;letter-spacing:.04em;color:#fff;border-radius:5px;padding:2px 8px;text-transform:uppercase}
.nettree .tag.org{background:#0B6FD0}
.nettree .tag.station{background:#00874A}
.nettree .code{color:var(--mute);font-size:13px}
/* cartes utilisateurs affectés */
.ugrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px;margin-bottom:8px}
.ucard{display:flex;align-items:center;gap:11px;background:var(--bg);border:1px solid var(--rule);border-radius:14px;padding:12px}
.ucard img,.ucard .ph{width:46px;height:46px;border-radius:50%;object-fit:cover;flex:none;box-shadow:0 0 0 2px #0B6FD0}
.ucard .ph{background:var(--surface-2);box-shadow:0 0 0 2px var(--rule)}
.ucard .nm{font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ucard .rl{color:var(--mute);font-size:13px}

/* --- Tables de données lisibles (ops) --- */
.dtable{width:100%;border-collapse:collapse;background:var(--bg);border:1px solid var(--rule);
  border-radius:14px;overflow:hidden;margin:8px 0 20px}
.dtable th{background:var(--surface);text-align:left;padding:11px 13px;font-size:13px;
  font-weight:700;color:var(--ink);white-space:nowrap}
.dtable td{padding:11px 13px;border-top:1px solid var(--rule);font-size:14.5px}
.dtable tr:hover td{background:var(--surface)}
.dtable .num{text-align:right;font-variant-numeric:tabular-nums}
.dtable .empty{color:var(--mute);padding:16px 13px}
.pill{display:inline-block;font-size:12px;font-weight:700;border-radius:20px;padding:2px 10px}
.pill.ok{background:var(--ok-bg);color:var(--ok)} .pill.bad{background:var(--bad-bg);color:var(--bad)}
.pill.mut{background:var(--surface-2);color:var(--mute)}
.backlink{margin:0 0 4px}
.backlink a{color:var(--focus);text-decoration:none;font-weight:600;font-size:14px}
.btn.sm{padding:6px 12px;font-size:13px}

/* Listes de saisie partagées (Journée, jaugeage, index, contradictoire) —
   présentation homogène et professionnelle sur tous les écrans de relevé. */
.readgrid{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start}
@media(max-width:760px){.readgrid{grid-template-columns:1fr}}
.readcol{background:var(--bg);border:1px solid var(--rule);border-radius:12px;overflow:hidden}
.readcol>.hd{display:flex;align-items:center;gap:8px;padding:12px 16px;border-bottom:1px solid var(--rule);font-weight:700}
.readcol>.hd .dot{width:9px;height:9px;border-radius:50%}
.readrow{display:flex;align-items:center;gap:12px;padding:9px 16px;border-bottom:1px solid var(--surface-2)}
.readrow:last-child{border-bottom:0}
.readrow .lbl{flex:1;min-width:0}
.readrow .lbl b{display:block;font-size:14.5px}
.readrow .lbl span{color:var(--mute);font-size:12px}
.readrow input{width:140px;text-align:right;font-size:16px;padding:8px 10px;border:1px solid var(--rule);border-radius:8px}
.readrow input:focus{outline:2px solid var(--focus);border-color:var(--focus)}
.pumpsep{padding:8px 16px 4px;font-size:12px;font-weight:700;color:var(--mute);text-transform:uppercase;letter-spacing:.04em;background:var(--surface)}
.readhint{color:var(--mute);font-size:12.5px;padding:10px 16px 12px}

/* ===========================================================================
   Correctifs ergonomie (audit 2026-09-21)
   =========================================================================== */
/* Tableaux : jamais de débordement de page sur mobile — le tableau défile
   dans son cadre (app.js enveloppe chaque tableau dans .tscroll). */
.tscroll{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%;margin-top:inherit}
.tscroll > table{margin-top:0}
.tscroll table{min-width:100%}
/* Champs : jamais plus larges que leur colonne sur petit écran */
@media (max-width:640px){
  input:not([type=checkbox]):not([type=radio]):not([type=range]),select,textarea{max-width:100%;box-sizing:border-box}
  .fld,.field{min-width:0}
  .kpis{grid-template-columns:1fr 1fr}
  .pghead h1{font-size:24px}
}
/* En-tête compact sur mobile : le menu se replie derrière un bouton */
.navtoggle{display:none;background:var(--surface);border:1px solid var(--rule);border-radius:8px;padding:8px 12px;font:600 14px var(--body);color:var(--ink);cursor:pointer;min-height:40px}
@media (max-width:640px){
  .navtoggle{display:inline-flex;align-items:center;gap:8px}
  .topbar-in{padding:8px 12px;gap:8px}
  .topbar-in nav.main{display:none;width:100%;flex-direction:column;align-items:stretch;gap:2px;margin:4px 0 0;order:10}
  .topbar-in.open nav.main{display:flex}
  .topbar-in nav.main .nv{padding:11px 12px;font-size:15px}
  .topbar-in .pips{flex-wrap:wrap}
  .right{margin-left:0;flex:1 1 100%;min-width:0;justify-content:flex-end;gap:6px;flex-wrap:wrap}
  .userchip{max-width:44vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12.5px;display:inline-block}
  .userchip b{font-size:12.5px}
}
.userchip{text-decoration:none}
.userchip:hover b{text-decoration:underline}
button.nv.linkbtn{background:none;border:0;cursor:pointer}
/* Nombres en contexte arabe : toujours dans l'ordre latin (1 617, pas 617 1) */
[dir="rtl"] .num, [dir="rtl"] td.num, [dir="rtl"] .kpi .v, [dir="rtl"] .kpi b, [dir="rtl"] .tile b, [dir="rtl"] .big,
[dir="rtl"] input[type=number], [dir="rtl"] .val, [dir="rtl"] .stock b{direction:ltr;unicode-bidi:isolate}
[dir="rtl"] input[type=number]{text-align:right}
/* Page de refus / erreur */
.deny{max-width:520px;margin:48px auto;padding:28px;border:1px solid var(--rule);border-radius:14px;background:var(--surface);text-align:center}
.deny h1{font-size:22px;margin:8px 0 10px}
.deny p{color:var(--mute);margin:0 0 18px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
/* Cible tactile minimale sur mobile pour les petits liens d'action */
@media (max-width:640px){ .linkbtn,.dtable a,.btn.sm{min-height:36px;display:inline-flex;align-items:center} }
/* Mobile : les tableaux larges défilent horizontalement au lieu d'être tronqués */
@media (max-width:640px){ .dtable{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%} .dtable th,.dtable td{white-space:nowrap} }
/* définitions clé/valeur (facturation, fiches) */
dl.kv{display:grid;grid-template-columns:max-content 1fr;gap:6px 18px;margin:0}
dl.kv dt{color:var(--mute);font-size:13.5px}
dl.kv dd{margin:0}
.pill.warn{background:#FFF1DC;color:#8A4B00}

/* Terrain sur téléphone : bouton d'enregistrement toujours à portée de pouce,
   champs de saisie à 16 px (pas de zoom iOS), cibles tactiles de 44 px. */
.stickyact{margin-top:12px}
@media (max-width:640px){
  .stickyact{position:sticky;bottom:0;z-index:5;background:rgba(255,255,255,.96);backdrop-filter:blur(4px);
             margin:12px -12px 0;padding:10px 12px calc(10px + env(safe-area-inset-bottom));border-top:1px solid var(--rule);display:flex;gap:10px}
  .stickyact .btn{flex:1 1 0;justify-content:center;min-height:46px;font-size:16px}
  input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]),select,textarea{font-size:16px;min-height:44px}
  input[type=checkbox],input[type=radio]{width:22px;height:22px;accent-color:var(--brand,#0B6FD0)}
  .readrow input{width:46%;min-width:120px}
  .btn,button.btn{min-height:44px}
  .btn.sm{min-height:36px}
}

/* ===========================================================================
   Refonte visuelle (24/09/2026) — une seule couche, appliquée à toute la
   plateforme : en-tête sur une ligne, échelle typographique resserrée, rayons
   et espacements homogènes, cartes KPI, tableaux, formulaires et boutons plus
   calmes. Fond blanc, couleurs franches réservées aux accents.
   =========================================================================== */
:root{
  --rs:8px; --rm:12px; --rl:16px;                 /* rayons : petit, moyen, grand */
  --sh-1:0 1px 2px rgba(23,34,46,.05);            /* ombre de repos */
  --sh-2:0 10px 28px rgba(23,34,46,.10);          /* ombre de menu / survol */
  --lab:12px;                                     /* libellé de champ / colonne */
}
body{font-size:16px;line-height:1.5}
p,li,td,th,label{text-wrap:pretty}
main{min-height:60vh}

/* --- En-tête : une seule ligne, menus repliés --- */
.topbar-in{padding:8px 20px;gap:8px;flex-wrap:nowrap;align-items:center}
.mark{flex:none}
.mark i{width:7px;height:18px}
.mark b{font-size:19px;margin-left:8px}
nav.main{gap:1px;flex-wrap:nowrap;min-width:0;margin-left:10px}
.nv{font-size:14px;padding:7px 10px;border-radius:var(--rs);white-space:nowrap}
.nv.on{background:var(--surface-2)}
.right{gap:8px;flex:none;margin-left:auto}
.lang{border-radius:var(--rs)}
.lang a,.lang button{padding:5px 8px;font-size:12px}
.navmore,.usermenu{position:relative}
.navmore>summary,.usermenu>summary{list-style:none;cursor:pointer;user-select:none}
.navmore>summary::-webkit-details-marker,.usermenu>summary::-webkit-details-marker{display:none}
.navmore>summary::after{content:"";display:inline-block;width:6px;height:6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg);margin:0 0 3px 7px}
.navmore[open]>summary{color:var(--ink);background:var(--surface)}
.menu{position:absolute;top:calc(100% + 6px);inset-inline-start:0;background:var(--bg);border:1px solid var(--rule);
  border-radius:var(--rm);box-shadow:var(--sh-2);padding:6px;min-width:230px;z-index:60;display:grid;gap:1px}
.usermenu .menu{inset-inline-start:auto;inset-inline-end:0}
.menu a,.menu button{display:block;width:100%;text-align:start;padding:9px 12px;border-radius:var(--rs);font:600 14px var(--body);
  color:var(--ink);text-decoration:none;background:none;border:0;cursor:pointer}
.menu a:hover,.menu button:hover{background:var(--surface)}
.menu a.on{background:var(--surface-2)}
.menu .sep{height:1px;background:var(--rule);margin:5px 4px}
.menu .who{padding:8px 12px 6px;font-size:12.5px;color:var(--mute);line-height:1.35}
.menu .who b{display:block;color:var(--ink);font-size:14px}
.uchip{display:inline-flex;align-items:center;gap:8px;padding:4px 10px 4px 4px;border:1px solid var(--rule);border-radius:999px;
  font-size:13.5px;font-weight:600;color:var(--ink);max-width:260px}
.uchip .av{width:28px;height:28px;border-radius:50%;background:var(--r6);color:#fff;font:700 12px var(--body);
  display:inline-flex;align-items:center;justify-content:center;flex:none;letter-spacing:.02em}
.uchip .nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.uchip .en{color:var(--mute);font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:130px}
@media (max-width:980px){ .uchip .en{display:none} }
@media (max-width:640px){
  .topbar-in{flex-wrap:wrap;padding:8px 12px}
  .right{flex:1 1 auto;justify-content:flex-end}
  .topbar-in nav.main{flex-wrap:wrap}
  .navmore{display:contents}
  .navmore>summary{display:none}
  .navmore .menu{position:static;border:0;box-shadow:none;padding:0;display:contents}
  .navmore .menu a{padding:11px 12px;font-size:15px}
  .navmore .menu .sep,.navmore .menu .who{display:none}
  .uchip .nm{max-width:110px}
}

/* --- Contenants et en-têtes de page --- */
.tw{max-width:1120px;padding:20px 20px 56px}
.wrap{padding-inline:20px}
.pghead{gap:14px;margin:4px 0 20px;padding-bottom:14px}
.pghead .pico{width:42px;height:42px;border-radius:11px}
.pghead .pico svg{width:24px;height:24px}
.pghead h1{font-size:clamp(24px,3.2vw,30px);font-weight:700;letter-spacing:-.01em}
.pghead p{font-size:14px;max-width:96ch;margin-top:2px}
.sec-h{margin:26px 0 12px;gap:10px}
.sec-h .bar{width:6px;height:22px;border-radius:3px}
.sec-h h2{font-size:21px;font-weight:700;letter-spacing:0}
.sec-h .pill{font-size:11px;vertical-align:middle;margin-inline-start:6px}
.hint,.tform .hint,.readhint,.secnote{font-size:13px;color:var(--mute)}

/* --- Cartes et KPI --- */
.card-pad,.panel,.nettree,.readcol{border-radius:var(--rm);box-shadow:var(--sh-1)}
.card-pad{padding:18px 20px}
.panel{background:var(--bg);border:1px solid var(--rule);padding:18px 20px}
.card-pad>h3:first-child,.panel>h3:first-child{font-size:17px;font-weight:700;margin-bottom:10px}
.kpis{grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px;margin:2px 0 8px}
.kpi{border-radius:var(--rm);padding:12px 14px 13px;box-shadow:var(--sh-1)}
.kpi::before{height:3px}
.kpi .lab{font-size:var(--lab);text-transform:uppercase;letter-spacing:.05em;color:var(--mute);line-height:1.3}
.kpi .val{font-size:clamp(20px,1.6vw,24px);font-weight:700;margin-top:5px}
.kpi .sub{font-size:12px;margin-top:4px;line-height:1.35}
.kpi .sub a{color:var(--focus);text-decoration:none;font-weight:600}
.tiles{gap:12px;margin-top:16px}
.tile{background:var(--bg);border:1px solid var(--rule);border-top-width:1px;border-radius:var(--rm);padding:14px 16px;position:relative;overflow:hidden;box-shadow:var(--sh-1)}
.tile::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--c,var(--focus))}
.tile b{font-size:30px}
.tile span{font-size:var(--lab);letter-spacing:.05em}

/* --- Formulaires --- */
.tform .fld{margin:0 0 12px}
.tform label,.field label{font-size:12.5px;font-weight:600;color:var(--mute);letter-spacing:.02em;text-transform:none;margin-bottom:4px}
.tform input[type=text],.tform input[type=email],.tform input:not([type]),.tform select,.tform textarea,
input[type=text],input[type=number],input[type=search],input[type=tel],input[type=email],input[type=url],input[type=date],
input[type=datetime-local],input[type=month],input[type=time],input[type=password],input:not([type]),select,textarea,
.field input,.field select,.field textarea{border-radius:var(--rs);padding:9px 11px;font-size:15px;line-height:1.3}
select{padding-inline-end:28px;appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%235E6B78' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 10px center}
[dir=rtl] select{background-position:left 10px center}
select[multiple],select[size]{background-image:none;padding-inline-end:11px}
.tform .row{gap:12px}
.toolbar{gap:10px;margin-top:14px}
.formactions{margin-top:16px}
.field{margin-top:12px}
.checkitem{border-radius:var(--rs)}
fieldset.grp{border:1px solid var(--rule);border-radius:var(--rm);padding:12px 16px 14px;margin:0 0 14px}
fieldset.grp legend{padding:0 6px;font-size:12.5px;font-weight:700;color:var(--mute);text-transform:uppercase;letter-spacing:.05em}

/* --- Boutons --- */
button.btn,.btn{font-size:14.5px;padding:9px 16px;border-radius:9px;line-height:1.25}
a.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px}
.btn.sm{padding:6px 11px;font-size:13px;border-radius:7px}
.primary{background:var(--r1)}
.ghost{background:var(--bg)}
.ghost:hover{background:var(--surface);border-color:var(--rule)}
.linkbtn{font-size:14px}

/* --- Tableaux --- */
.dtable{border-radius:var(--rm);margin:6px 0 18px;box-shadow:var(--sh-1)}
.dtable th{font-size:var(--lab);text-transform:uppercase;letter-spacing:.05em;color:var(--mute);padding:9px 12px;font-weight:700}
.dtable td{padding:9px 12px;font-size:14px}
.dtable td .btn.sm{padding:4px 9px;font-size:12.5px}
.dtable tr:hover td{background:var(--hero)}
table.grid th{font-size:var(--lab);border-bottom-width:1px;border-color:var(--rule);padding-bottom:8px}
table.grid td{padding:9px 12px 9px 0;font-size:14px}
.sheet th{font-size:var(--lab)}

/* --- Pastilles, bandeaux d'état, filtres --- */
.pill{font-size:11.5px;padding:2px 9px;letter-spacing:.01em}
.badge{font-size:11px;padding:3px 8px}
.flash{padding:11px 14px;border-radius:var(--rs);margin:12px 0;font-size:14.5px;border:0;border-inline-start:4px solid}
.flash.ok{border-color:var(--ok)} .flash.err{border-color:var(--bad)}
.alert{border-radius:var(--rs);font-size:14.5px}
.backlink a{font-size:13px}
.backlink{margin:0 0 8px}

/* --- Raccourcis et menus d'actions (Ma journée, Ma station) --- */
.quick{display:flex;gap:8px;flex-wrap:wrap;margin:4px 0 14px}
.quick a{display:inline-flex;align-items:center;gap:8px;padding:9px 13px;border-radius:var(--rs);border:1px solid var(--rule);background:var(--bg);
  text-decoration:none;color:var(--ink);font-weight:600;font-size:14px;box-shadow:var(--sh-1);transition:border-color .12s,background .12s}
.quick a:hover{border-color:var(--ink);background:var(--hero)}
.quick a svg{width:17px;height:17px;flex:none;color:var(--mute)}
.quick a:hover svg{color:var(--ink)}
.quick a.hot{border-color:transparent;background:var(--r1);color:#fff}
.quick a.hot svg{color:#fff}
.ico{width:18px;height:18px;vertical-align:-3px;flex:none}

/* --- Bandeau d'accueil (hub) : plus bas, visages dégagés --- */
.hero-op{min-height:clamp(200px,26vw,250px);margin-bottom:24px;border-radius:var(--rl)}
.hero-in{margin:0 0 14px 14px;padding:12px 16px;gap:12px;border-radius:var(--rm)}
.hero-in img.av{width:52px;height:52px}
.hero-in h1{font-size:clamp(20px,2.6vw,26px)}
.hero-in .sub{font-size:13px}
.hero-badges{margin-top:6px}
.hero-badges span{font-size:12px;padding:3px 9px}

/* --- Cartes d'outils --- */
.op-grid{gap:14px}
.op-card{border-radius:var(--rm);padding:16px;box-shadow:var(--sh-1)}
.op-card::before{height:3px}
.op-ic{width:40px;height:40px;border-radius:10px;margin:4px 0 10px}
.op-ic svg{width:22px;height:22px}
.op-card h3{font-size:17px}
.op-card p{font-size:13.5px}

/* --- Bandeau d'onglets (administration) --- */
nav.tabs{display:flex;gap:2px;margin:14px 0 4px;border-bottom:1px solid var(--rule);overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
nav.tabs::-webkit-scrollbar{display:none}
nav.tabs .nv{border-radius:0;padding:9px 11px 10px;font-size:13.5px;color:var(--mute);border-bottom:2px solid transparent;margin-bottom:-1px}
nav.tabs .nv:hover{background:none;color:var(--ink)}
nav.tabs .nv.on{background:none;color:var(--ink);border-bottom-color:var(--ink)}
.adminwrap{max-width:1180px}

/* --- Pied de page --- */
footer{margin-top:48px;padding:20px 0 56px;font-size:13px}
footer .footlinks{margin-inline-start:14px}
footer .footlinks a{color:var(--mute);margin-inline-end:12px}

/* --- Sélecteur de station : masqué lorsqu'il n'y a qu'une station --- */
.onlyone{display:none!important}

/* --- Lecture : liste clé/valeur, blocs de saisie --- */
dl.kv dt{font-size:13px}
.readcol>.hd{padding:10px 14px;font-size:14.5px}
.readrow{padding:8px 14px}
.readrow .lbl b{font-size:14px}
.readrow input{font-size:15px;padding:7px 10px}

/* --- Académie : catalogue et cartes --- */
.ccard{border-radius:var(--rm);border-top-width:4px;box-shadow:var(--sh-1)}
.ccard .cb{padding:16px 18px 18px;gap:6px}
.ccard h3{font-size:22px}
.ccard p{font-size:14.5px}
.hero .hcopy{padding:30px 34px}
.hero h3{font-size:30px}
.catgrid{gap:16px;margin-top:20px}
.cpath{border-radius:var(--rm);padding:18px 20px}
.pcard{border-radius:var(--rm)}
.authcard{border-radius:var(--rl);box-shadow:var(--sh-2);border:1px solid var(--rule)}
.hook{border-radius:var(--rl)}

@media (max-width:640px){
  .tw{padding:14px 14px 48px}
  .pghead{gap:10px;margin-bottom:14px}
  .pghead .pico{width:36px;height:36px;border-radius:9px}
  .pghead .pico svg{width:20px;height:20px}
  .kpis{grid-template-columns:1fr 1fr;gap:8px}
  .kpi{padding:10px 12px}
  .kpi .val{font-size:19px}
  .sec-h h2{font-size:19px}
  .quick a{flex:1 1 calc(50% - 8px);justify-content:flex-start;font-size:13.5px;padding:10px 12px}
  .card-pad{padding:14px}
}
@media (max-width:640px){
  .topbar-in{gap:6px}
  .mark b{font-size:17px;margin-left:6px}
  .mark i{width:6px;height:16px}
  .navtoggle{padding:8px 10px;min-height:36px}
  .navtoggle .lbl{display:none}
  .right{flex:0 0 auto;margin-left:auto;gap:6px}
  .uchip{padding:2px;border:0}
  .uchip .nm,.uchip .en{display:none}
  .uchip .av{width:32px;height:32px}
  .lang a,.lang button{padding:6px 7px;font-size:11.5px;min-height:32px}
}
/* Titres bruts dans les pages de travail (hors pages marketing) : échelle d'application */
.tw h1,.adminwrap h1,.tw>h2:first-child,.adminwrap>h2{font-size:clamp(24px,3.2vw,30px);line-height:1.1}
.tw h2:not(.sec-h h2),.adminwrap h2{font-size:clamp(19px,2.4vw,23px);line-height:1.15}
.tw h3,.adminwrap h3,.panel h3,.card-pad h3{font-size:17px;line-height:1.25}
.tw h1 .code,.tw h1 .pill{font-size:13px;vertical-align:middle}
@media (min-width:641px){
  .nv{flex:none}
  .nv.ct{flex:0 1 auto;min-width:60px;max-width:260px;overflow:hidden;text-overflow:ellipsis}
  .pips{flex:none}
  .pip{width:26px;height:26px;font-size:14px;border-radius:7px}
}
main .wrap h2{font-size:clamp(24px,3vw,32px)}
main .wrap>h2+p,main .wrap .lede{font-size:15.5px}
@media (max-width:640px){ .tiles{grid-template-columns:1fr 1fr;gap:8px} .tile{padding:12px} .tile b{font-size:24px} }